/* Easy Invoice. Made for a phone held in one hand on a job: one column, big text, big buttons.
   Ledger green is the colour of "paid" and of every main button.
   The look is MudBlazor's Material one, drawn here in plain CSS: the pages stay static server
   pages with no live connection, so they open on a weak signal (Mahdi, 2026-11-07). */
:root {
  --paper: #F5F6F7;
  --sheet: #FFFFFF;
  --ink: #16202B;
  --on-ink: #FFFFFF; /* words on a ground of --ink */
  --soft: #5C6876;
  --rule: #DDE2E8;
  --accent: #0B0B0A; /* the main button is the logo's black (Mahdi, 2026-11-14); the side's colour is --brand, and what is done or paid is --good */
  --accent-ink: #FFFFFF;
  --accent-soft: #E9ECEF;
  --warn: #A55A00;
  --warn-soft: #FBEEDD;
  --danger: #B42318;
  --wa: #1DA851;
  --doc-ink: #1F2A37;
  --doc-accent: #1F3A5F;
  --doc-band: #EEF2F7;
  --accent-dark: #2B2B29;
  --good: #0E6B57; --good-ink: #FFFFFF; --good-soft: #E3F1EC; --good-dark: #0A5545;
  --brand: #FC630D; --brand-ink: #B23F00; --brand-soft: #FFF0E6;
  --bar-work: #0B0B0A; /* the logo's black */
  --line: rgba(0, 0, 0, .23);
  --line-hover: rgba(0, 0, 0, .87);
  /* Material elevations, as MudBlazor draws them. */
  --e1: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
  --e2: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
  --e4: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
  --e8: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
  --r: 8px;
  --r-card: 12px;
  /* goud.work's drawn icons (Parts/Glyph.razor): ink, paper and the logo's orange. */
  --gl-ink: #1C1C1A;
  --gl-soft: #E9E2D8;
  --gl-hot: #FC630D;
  --font: Roboto, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: 18px; line-height: 1.5;
  padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
}
a { color: var(--accent); }
h1 { font-size: 28px; line-height: 1.2; margin: 0 0 8px; text-wrap: balance; }
h2 { font-size: 20px; margin: 0 0 8px; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- frame ---------- */
.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px; background: var(--sheet); border-bottom: 1px solid var(--rule);
}
.mark { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); text-decoration: none; font-size: 19px; }
.mark .dot { width: 14px; height: 14px; border-radius: 4px; background: var(--accent); }
.bar nav { display: flex; gap: 16px; font-size: 16px; }
.bar nav a { color: var(--soft); text-decoration: none; }
.bar nav a:hover { color: var(--ink); }
.page { padding: 20px 16px 48px; }
.sheet { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.sheet.narrow { max-width: 520px; }
.lead { color: var(--soft); }
.soft { color: var(--soft); }
.small { font-size: 15px; }
.center { text-align: center; justify-content: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px; padding: 12px 20px; border-radius: var(--r-card); border: 2px solid var(--accent);
  background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
}
.btn:hover { filter: brightness(1.06); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn.ghost { background: var(--sheet); color: var(--ink); border-color: var(--rule); }
.btn.wide { width: 100%; }
.btn.big { min-height: 64px; font-size: 20px; }
.btn.wa { background: var(--wa); border-color: var(--wa); }
.btn.wa.quiet { background: var(--sheet); color: var(--wa); border-color: var(--wa); }
.btn.paid { background: var(--good); }
.btn.danger { background: var(--danger); border-color: var(--danger); }
.link { background: none; border: 0; padding: 8px; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; display: block; }
.link.danger { color: var(--danger); margin: 0 auto; }
.twin { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; }
.trio .btn { padding: 10px 8px; font-size: 16px; }
.pair { display: flex; flex-direction: column-reverse; gap: 10px; margin-top: 10px; }
.pair .btn { margin-top: 0; }
/* The send buttons stay in reach under the thumb while the preview scrolls behind them. */
.dock {
  position: sticky; bottom: 0; z-index: 5; margin: 0 -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(6px); border-top: 1px solid var(--rule);
}

/* ---------- forms ---------- */
.stack { display: flex; flex-direction: column; gap: 8px; }
.stack .btn { margin-top: 10px; }
label { font-weight: 600; margin-top: 6px; }
input, select, textarea {
  width: 100%; font: inherit; font-size: 18px; color: var(--ink); background: var(--sheet);
  border: 2px solid #C9D1DA; border-radius: var(--r); padding: 13px 14px; min-height: 54px;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; }
input.caps { text-transform: uppercase; }
input.caps::placeholder { text-transform: none; }
input.code { font-size: 30px; letter-spacing: .3em; text-align: center; }
.money { display: flex; align-items: center; border: 2px solid #C9D1DA; border-radius: var(--r); background: var(--sheet); padding-left: 14px; }
.money:focus-within { border-color: var(--accent); }
.money span { font-size: 22px; color: var(--soft); }
.money input { border: 0; font-size: 26px; font-variant-numeric: tabular-nums; }
details summary { cursor: pointer; color: var(--accent); font-weight: 600; padding: 8px 0; }
.said { background: var(--warn-soft); color: var(--warn); border-radius: var(--r); padding: 12px 14px; font-weight: 600; }
.done { background: var(--good-soft); color: var(--good); border-radius: var(--r); padding: 12px 14px; font-weight: 600; }

/* ---------- steps ---------- */
.steps { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }
.steps .back { text-decoration: none; font-weight: 600; }
.steps .of { margin-left: auto; font-size: 13px; letter-spacing: .08em; color: var(--soft); font-weight: 700; }
.q { font-size: 30px; }
.switch { display: grid; grid-template-columns: 1fr 1fr; background: #EAEEF2; border-radius: var(--r-card); padding: 4px; gap: 4px; }
.switch button { font: inherit; font-weight: 700; border: 0; border-radius: 11px; padding: 12px; background: transparent; color: var(--soft); cursor: pointer; min-height: 48px; }
.switch button.on { background: var(--sheet); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.picks { display: flex; flex-direction: column; gap: 8px; }
.pick {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left;
  font: inherit; padding: 16px; min-height: 60px; border: 2px solid var(--rule); border-radius: var(--r-card); background: var(--sheet); color: var(--ink); cursor: pointer;
}
.pick.on, .pick:hover { border-color: var(--brand); }
.missing { background: var(--warn-soft); border-radius: var(--r); padding: 12px 16px; }
.missing ul { margin: 6px 0 0; padding-left: 20px; }
.sends { display: flex; flex-direction: column; gap: 10px; }
.boxed { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-card); padding: 14px; }

/* ---------- home ---------- */
.owed { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-card); padding: 14px 16px; }
.empty { display: flex; flex-direction: column; gap: 4px; text-align: center; padding: 36px 16px; background: var(--sheet); border: 2px dashed var(--rule); border-radius: var(--r-card); color: var(--soft); }
.empty b { color: var(--ink); }
.list { list-style: none; margin: 0; padding: 0; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-card); overflow: hidden; }
.list li + li { border-top: 1px solid var(--rule); }
.list a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; color: var(--ink); text-decoration: none; min-height: 64px; }
.list a:hover { background: var(--paper); }
.who { display: flex; flex-direction: column; min-width: 0; }
.who b, .who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.amount { font-weight: 700; font-variant-numeric: tabular-nums; }
.pill { display: inline-block; font-size: 13px; font-weight: 700; padding: 2px 10px; border-radius: 99px; background: #EEF2F5; color: var(--soft); white-space: nowrap; }
.pill.paid { background: var(--good-soft); color: var(--good); }
.pill.overdue { background: var(--warn-soft); color: var(--warn); }
.pill.viewed { background: #E6EEFB; color: #1F4E9C; }
.pill.invoiced { background: var(--good-soft); color: var(--good); }
.pill.expired { background: #F1F1F1; color: #777; }

/* ---------- settings ---------- */
.group { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-card); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.group .kv { display: grid; grid-template-columns: 90px 1fr auto; gap: 8px; align-items: baseline; }
.group .kv span { color: var(--soft); font-size: 15px; }
.leave summary { color: var(--danger); }


/* ---------- sign-in ---------- */
.ways { display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 44px; }
.pretend { width: 100%; display: flex; flex-direction: column; gap: 8px; border: 2px dashed var(--warn); border-radius: var(--r-card); padding: 12px; }
.or { display: flex; align-items: center; gap: 12px; color: var(--soft); font-size: 15px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.google { color-scheme: light; }

/* ---------- the document as the customer sees it ---------- */
.paper {
  background: #FFFFFF; color: var(--doc-ink); border: 1px solid var(--rule); border-radius: var(--r-card);
  padding: 20px; font-size: 15px; line-height: 1.45; display: flex; flex-direction: column; gap: 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.paper header { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 2px solid var(--doc-accent); }
.paper .biz { font-size: 20px; font-weight: 700; color: var(--doc-strong, var(--doc-accent)); }
.paper .brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.paper .logo { max-height: 64px; max-width: 96px; object-fit: contain; flex-shrink: 0; }
.paper .who-from { min-width: 0; }
.logo-now { display: flex; align-items: center; gap: 14px; }
.logo-now img { max-height: 72px; max-width: 140px; object-fit: contain; border: 1px solid var(--rule); border-radius: 10px; padding: 6px; background: #fff; }
input[type=file] { padding: 10px; }
.paper .right { text-align: right; margin-left: auto; }
.paper .title { font-size: 26px; font-weight: 800; color: var(--doc-strong, var(--doc-accent)); letter-spacing: .08em; }
.paper .facts { display: grid; grid-template-columns: auto auto; gap: 0 10px; margin: 4px 0 0; font-size: 13px; }
.paper .facts dt { color: #6B7280; }
.paper .facts dd { margin: 0; font-weight: 700; }
.paper .parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.paper .label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6B7280; margin-bottom: 4px; }
.paper .gap { margin-top: 4px; }
.paper .work { width: 100%; border-collapse: collapse; }
.paper .work th { background: var(--doc-accent); color: var(--doc-on, #fff); text-align: left; font-size: 13px; padding: 8px 10px; }
.paper .work td { padding: 10px; border-bottom: 1px solid #D5DCE5; vertical-align: top; }
.paper .work ul { margin: 0; padding-left: 18px; }
.paper .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.paper .sums { margin-left: auto; width: min(100%, 300px); display: flex; flex-direction: column; gap: 4px; }
.paper .sums .row { display: flex; justify-content: space-between; padding: 0 12px; color: #6B7280; }
.paper .total { display: flex; justify-content: space-between; background: var(--doc-band); color: var(--doc-strong, var(--doc-accent)); font-weight: 800; font-size: 17px; padding: 10px 12px; border-radius: 6px; }
.paper .pay .kv { display: grid; grid-template-columns: 130px 1fr auto; gap: 8px; align-items: center; padding: 2px 0; }
.paper .pay .kv span { color: #6B7280; }
.paper .copy { font: inherit; font-size: 13px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border: 0; border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.paper .soft { color: #6B7280; }
/* Modern: the head in the business's colour, the logo on a white tile. */
.paper.look-modern { padding-top: 0; overflow: hidden; }
.paper.look-modern header { background: var(--doc-accent); color: var(--doc-on); margin: 0 -20px; padding: 20px; border-bottom: 0; }
.paper.look-modern .biz, .paper.look-modern .title, .paper.look-modern .facts dt, .paper.look-modern .facts dd, .paper.look-modern .small { color: var(--doc-on); }
.paper.look-modern .logo { background: #fff; padding: 6px; border-radius: 6px; }
/* Plain: black and white with thin rules, nothing filled. */
.paper.look-plain header { border-bottom: 1px solid #111; }
.paper.look-plain .work th { background: none; color: #111; border-bottom: 1.5px solid #111; }
.paper.look-plain .total { background: none; border-radius: 0; border-top: 1.5px solid #111; border-bottom: 1.5px solid #111; }
.paper.serif { font-family: Georgia, "Times New Roman", "Liberation Serif", serif; }

.bare { padding-top: calc(20px + env(safe-area-inset-top, 0px)); }
.open-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.made { text-align: center; color: var(--soft); font-size: 14px; margin-top: 28px; }

@media (max-width: 420px) {
  .paper { padding: 14px; }
  .paper .pay .kv { grid-template-columns: 110px 1fr auto; }
  .q { font-size: 26px; }
}
@media (max-width: 420px) {
  .paper.look-modern header { margin: 0 -14px; padding: 14px; }
}

/* ---------- the look picker ---------- */
.looks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.look-card { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 10px; border: 2px solid var(--rule); border-radius: var(--r-card); cursor: pointer; font-weight: 400; background: var(--sheet); }
.look-card:has(input:checked), .look-card.on { border-color: var(--brand); }
.look-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.look-card:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.mini { display: flex; flex-direction: column; gap: 5px; height: 74px; padding: 8px; border: 1px solid var(--rule); border-radius: 6px; background: #fff; }
.mini i { display: block; height: 6px; border-radius: 2px; background: #DDE2E8; }
.mini i:first-child { width: 55%; height: 9px; background: var(--mini); }
.mini i:nth-child(2) { margin-top: auto; height: 10px; background: var(--mini); }
.mini-modern i:first-child { width: auto; height: 20px; margin: -8px -8px 0; border-radius: 5px 5px 0 0; }
.mini-plain i:first-child, .mini-plain i:nth-child(2) { background: none; border-bottom: 2px solid #111; border-radius: 0; }
.pair-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
input[type=color] { padding: 4px; height: 54px; cursor: pointer; }
.word-drop { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 2px dashed var(--rule); border-radius: var(--r-card); background: var(--sheet); }
.label-soft { font-size: 13px; color: var(--soft); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; }
@media (max-width: 480px) {
  .looks { gap: 8px; }
  .look-card { padding: 8px; }
  .look-card .soft { display: none; }
  .mini { height: 52px; padding: 6px; }
}

/* ---------- desktop and laptop ---------- */
.split-paper { display: none; }
.when { display: none; }
@media (min-width: 1024px) {
  .bar { padding-left: max(32px, calc((100vw - 1180px) / 2)); padding-right: max(32px, calc((100vw - 1180px) / 2)); }
  .bar nav { gap: 28px; font-size: 17px; }
  .page { padding: 32px 32px 64px; }
  .sheet { max-width: 1180px; }
  .sheet.narrow.split-page { max-width: 1180px; }

  /* The step's form on the left, the invoice as the customer will see it on the right, held in view. */
  .split { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 40px; align-items: start; }
  .split-form { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .split-paper { display: block; position: sticky; top: 88px; min-width: 0; }
  .only-narrow { display: none; }
  .dock { position: static; margin: 0; padding: 0; background: none; border: 0; backdrop-filter: none; }

  /* The list becomes a table: who, when, how much, where it stands. */
  .sheet > form.twin { max-width: 560px; }
  .list a { display: grid; grid-template-columns: minmax(0, 1fr) 180px 260px; gap: 16px; align-items: center; }
  .when { display: block; color: var(--soft); font-size: 16px; }
  .end { flex-direction: row; justify-content: flex-end; align-items: center; gap: 16px; }

}

/* ---------- finding an address ---------- */
.find-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.find-row .btn { margin-top: 0; white-space: nowrap; }
.found { display: flex; flex-direction: column; gap: 6px; padding: 10px; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-card); max-height: 340px; overflow-y: auto; }
.found .pick { min-height: 52px; padding: 10px 14px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; }

/* ---------- lines offered, trades ---------- */
.offer { display: flex; flex-direction: column; gap: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 7px 12px; min-height: 42px; border: 2px solid var(--rule); border-radius: 99px; background: var(--sheet); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; text-align: left; }
.chip:hover, .chip.on, .chip:has(input:checked) { border-color: var(--brand); }
.chip:has(input:checked) { background: var(--brand-soft); }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.chip.add .soft { font-weight: 400; font-size: 14px; }
.trades { border: 0; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; }
.trades legend { font-weight: 600; padding: 0; margin-bottom: 2px; }

/* ---------- settings: a menu of five parts ---------- */
.set-shell { max-width: 560px; margin: 0 auto; }
.set-menu { display: flex; flex-direction: column; gap: 14px; }
.set-menu ul { list-style: none; margin: 0; padding: 0; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-card); overflow: hidden; }
.set-menu li + li { border-top: 1px solid var(--rule); }
.set-menu a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; min-height: 68px; color: var(--ink); text-decoration: none; }
.set-menu a > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.set-menu a .soft { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-menu a:hover { background: var(--paper); }
.chev { color: var(--soft); font-size: 26px; line-height: 1; flex-shrink: 0; }
.set-out { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 0 4px; }
.set-out .btn { min-height: 44px; padding: 8px 16px; }

.set-part { display: flex; flex-direction: column; gap: 16px; }
.set-part h2 { font-size: 26px; margin: 0; }
.set-part > .btn, .set-part form > .btn { align-self: flex-start; }
.set-back { text-decoration: none; font-weight: 600; }
.at-menu .set-part, .at-part .set-menu { display: none; }

.rows { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-card); overflow: hidden; }
.row-link { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 14px 16px; min-height: 56px; color: var(--ink); text-decoration: none; }
.row-link + .row-link { border-top: 1px solid var(--rule); }
.row-link > span:first-child { color: var(--soft); font-size: 15px; }
.row-link b { font-weight: 600; overflow-wrap: anywhere; }
.row-link:hover { background: var(--paper); }

.look-part { display: flex; flex-direction: column; gap: 24px; }
.look-forms { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.logo-now { display: flex; align-items: flex-start; gap: 14px; }
.logo-now .grow { flex: 1; min-width: 0; }
.no-logo { display: grid; place-items: center; width: 84px; height: 72px; flex-shrink: 0; border: 2px dashed var(--rule); border-radius: 10px; color: var(--soft); font-size: 13px; }
.logo-form { display: flex; flex-direction: column; gap: 6px; }
.logo-form label { margin: 0; }
.word-more { border-top: 1px solid var(--rule); padding-top: 8px; }

@media (min-width: 1024px) {
  .set-shell, .at-menu, .at-part { max-width: 1180px; display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 48px; align-items: start; }
  .at-menu .set-part, .at-part .set-menu { display: flex; }
  .set-menu { position: sticky; top: 88px; }
  .set-menu a.on { background: var(--brand-soft); box-shadow: inset 4px 0 0 var(--brand); }
  .set-back { display: none; }
  .set-part { padding-top: 6px; }
  .look-part { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
  .look-part .sample { position: sticky; top: 88px; }
}
.logo-acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.logo-acts .btn { min-height: 44px; padding: 8px 16px; }
.logo-acts .link { margin: 0; }

/* ---------- Goud Work: the bars, the front page, the account ---------- */
.mark-name { display: flex; flex-direction: column; line-height: 1.1; }
.mark-name small { font-size: 11px; font-weight: 600; color: var(--soft); letter-spacing: .02em; }
.mark .dot.work { background: var(--ink); }
.chip-co { border: 1px solid var(--rule); border-radius: 99px; padding: 2px 10px; color: var(--ink) !important; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.services { max-width: 760px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.service { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: var(--r-card); background: var(--sheet); border: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.service.live { border: 2px solid var(--accent); }
.service.live:hover { background: var(--accent-soft); }
.service-name { font-size: 20px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.service .go { color: var(--accent); font-weight: 700; margin-top: auto; }
.service.soon { color: var(--soft); }
.company-row.on { background: var(--brand-soft); }
button.row-link { width: 100%; font: inherit; background: none; border: 0; text-align: start; cursor: pointer; }
.rows form, .rows > .member + .member { border-top: 1px solid var(--rule); }
.member { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; flex-wrap: wrap; }
.member + .member { border-top: 1px solid var(--rule); }
.member b { overflow-wrap: anywhere; }
.member-acts { display: flex; align-items: center; gap: 8px; }
.member-acts select { min-height: 42px; padding: 6px 10px; width: auto; }
.member-acts .btn { min-height: 42px; padding: 6px 14px; }
.note-box { background: var(--accent-soft); border-radius: var(--r); padding: 12px 14px; }
.roles-what ul { margin: 6px 0 0; padding-inline-start: 20px; }
.set-part h3 { margin: 10px 0 0; font-size: 17px; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.plan-card { display: flex; flex-direction: column; gap: 2px; padding: 14px; border: 2px solid var(--rule); border-radius: var(--r-card); background: var(--sheet); }
.plan-card.on { border-color: var(--brand); }
.plan-card .price { font-size: 24px; font-weight: 800; }
.plan-card .price small { font-size: 13px; font-weight: 500; color: var(--soft); }
.plan-card .pill { align-self: flex-start; margin-top: 6px; }
.row-btns-plain { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 560px) { .chip-co { max-width: 140px; } .bar nav { gap: 12px; font-size: 15px; } }
.paper .made-with { margin: 0; text-align: center; font-size: 12px; color: #6B7280; border-top: 1px solid #D5DCE5; padding-top: 8px; }
.paper .made-with a { color: inherit; text-decoration: none; }

/* ---------- the MudBlazor look: elevation instead of outlines ---------- */
.bar { background: var(--accent); color: #fff; border-bottom: 0; box-shadow: var(--e4); position: relative; z-index: 10; }
@media (min-width: 1024px) { .bar { position: sticky; top: 0; } }
.bar.work { background: var(--bar-work); }
.bar .mark, .bar .mark-name small { color: #fff; }
.bar .mark-name small { opacity: .75; }
.bar .mark .dot { background: #fff; }
.bar .mark .dot.work { background: #F2C14E; }
/* The goud.work logo (20.10, 2026-11-07): a clean lowercase sans, the full stop an orange
   octagon with a square in it, the only colour, and an arrow under the word. Cut from the master
   in docs/goud-work/renders. logo-dark.png is white for dark grounds, logo.png black for light;
   both are see-through. */
.bar .mark.logo { padding: 2px 0; }
.bar .mark.logo img { display: block; height: 42px; width: auto; }
@media (min-width: 720px) { .bar .mark.logo img { height: 48px; } }
.bar nav a { color: rgba(255,255,255,.82); font-weight: 500; }
.bar nav a:hover { color: #fff; }
.bar .chip-co { color: #fff !important; border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.1); }

h1, h2, h3, .q { font-weight: 600; letter-spacing: -.005em; }
label { font-weight: 500; font-size: 16px; color: var(--soft); }

.btn { border: 0; border-radius: var(--r); font-weight: 600; letter-spacing: .02em; box-shadow: var(--e2); transition: box-shadow .2s, background-color .2s; }
.btn:hover { filter: none; background: var(--accent-dark); box-shadow: var(--e4); }
.btn:active { box-shadow: var(--e8); }
.btn.ghost { background: transparent; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); box-shadow: none; }
.btn.ghost:hover { background: var(--accent-soft); border-color: var(--accent); box-shadow: none; }
.btn.wa:hover { background: #178D44; }
.btn.wa.quiet { border: 1px solid var(--wa); box-shadow: none; }
.btn.wa.quiet:hover { background: #E8F7EE; }
.btn.danger:hover { background: #8F1C13; }
.btn[disabled] { box-shadow: none; }

input, select, textarea { border: 1px solid var(--line); border-radius: var(--r); transition: border-color .15s, box-shadow .15s; }
input:hover, select:hover, textarea:hover { border-color: var(--line-hover); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.money { border: 1px solid var(--line); }
.money:focus-within { box-shadow: inset 0 0 0 1px var(--accent); }

.boxed, .owed, .list, .group, .rows, .set-menu ul, .found, .service, .plan-card, .word-drop, .empty {
  border-color: transparent; box-shadow: var(--e1);
}
.empty { border-style: solid; }
.paper { border-color: transparent; box-shadow: var(--e2); }
.pick, .chip, .look-card, .plan-card { border-width: 1px; border-color: var(--line); }
.pick { box-shadow: none; }
.pick.on, .pick:hover, .chip:hover, .chip.on, .chip:has(input:checked), .look-card:has(input:checked), .look-card.on, .plan-card.on {
  border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand);
}
.chip { border-radius: 99px; font-weight: 500; }
.pill { font-weight: 600; letter-spacing: .02em; }
.switch { background: #E8EBEE; }
.list a:hover, .set-menu a:hover, .row-link:hover { background: rgba(0,0,0,.04); }
.said, .done, .missing, .note-box { border-radius: var(--r); }
.done { border-inline-start: 4px solid var(--good); }
.said, .missing { border-inline-start: 4px solid var(--warn); }
.service.live { border: 0; box-shadow: var(--e2); }
.service.live:hover { background: var(--sheet); box-shadow: var(--e8); }

/* ---------- the goud.work front page ---------- */
.page:has(> .front) { padding: 0; }
.front { display: flex; flex-direction: column; }
.front-in { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.front-block { padding-top: 40px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 20px; }
.block-title { font-size: 26px; margin: 0; }
.front-band { background: var(--sheet); box-shadow: var(--e1); }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 4px 12px; border-radius: 99px; }

.phone { width: min(100%, 320px); background: var(--sheet); border-radius: 28px; padding: 14px; box-shadow: var(--e8); border: 1px solid rgba(0,0,0,.06); display: flex; flex-direction: column; gap: 12px; }
.phone-top { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; background: var(--accent); color: var(--accent-ink); border-radius: 16px; padding: 10px 14px; }
.phone-top .dot { width: 10px; height: 10px; border-radius: 3px; background: var(--accent-ink); }
.mock { display: flex; flex-direction: column; gap: 8px; font-size: 14px; padding: 4px 6px; }
.mock-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--doc-accent); padding-bottom: 8px; }
.mock-head b { color: var(--doc-accent); font-size: 16px; }
.mock-head span { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--doc-accent); }
.mock-to { color: var(--soft); font-size: 13px; }
.mock-to span { font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; margin-inline-end: 6px; }
.mock-line { display: flex; justify-content: space-between; gap: 10px; font-variant-numeric: tabular-nums; }
.mock-line.soft { color: var(--soft); }
.mock-total { display: flex; justify-content: space-between; background: var(--doc-band); color: var(--doc-accent); border-radius: 6px; padding: 8px 10px; font-size: 16px; font-weight: 700; }
.mock-bank { display: flex; align-items: center; gap: 6px; color: var(--soft); font-size: 13px; }
.mock-send { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--wa); color: #fff; border-radius: var(--r); padding: 12px; font-weight: 600; box-shadow: var(--e2); }

.service-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-card); background: var(--accent-soft); color: var(--accent); }
.service.soon .service-icon { background: #ECEFF1; color: var(--soft); }
.service .go { display: inline-flex; align-items: center; gap: 4px; }
.front .services { max-width: none; margin: 0; }

.how { list-style: none; counter-reset: how; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.how li { counter-increment: how; display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: var(--r-card); background: var(--paper); }
.how li::before { content: counter(how); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 700; margin-bottom: 4px; box-shadow: var(--e2); }
.how b { font-size: 19px; }
.how span { color: var(--soft); font-size: 16px; }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.features div { display: flex; flex-direction: column; gap: 6px; padding: 20px; background: var(--sheet); border-radius: var(--r-card); box-shadow: var(--e1); }
.features .icon { color: var(--accent); width: 28px; height: 28px; margin-bottom: 4px; }
.features span { color: var(--soft); font-size: 16px; }

.front-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.front-plans .plan-card { padding: 20px; gap: 6px; border: 0; box-shadow: var(--e1); }
.front-plans .plan-card b { font-size: 18px; }
.front-plans .price { font-size: 32px; }

.front-foot { background: var(--bar-work); color: rgba(255,255,255,.8); font-size: 15px; padding: 20px 0 calc(20px + env(safe-area-inset-bottom, 0px)); }
.front-foot .front-in { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.front-foot b { color: #fff; }
.front-foot a { color: #fff; }

@media (min-width: 1024px) {
  .front-in { padding: 0 32px; }
  .front-block { padding-top: 64px; padding-bottom: 64px; gap: 28px; }
  .block-title { font-size: 30px; }
  .phone { width: 340px; transform: rotate(2deg); }
  .features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- goud.work front page in the Goud Work colours (Mahdi, 2026-11-07) ----------
   The boring bits, sorted: two doors, for a business and for a home. Black and white like the
   logo, the octagon orange its one colour. Orange (#FC630D) is too light for small words on
   white, so words in orange use --brand-ink. */
.front.gw { --accent: #0B0B0A; --accent-dark: #000; --accent-soft: #FFF0E6; --brand: #FC630D; --brand-ink: #B23F00; --brand-soft: #FFF0E6; }
.gw .service .go { color: var(--brand-ink); }
.gw .phone-top { background: var(--accent); }
.gw .phone-top .dot { background: var(--brand); }
.gw .phone-top .soon-tag { margin-inline-start: auto; }
.gw .how li::before { background: var(--brand); color: #0B0B0A; }
.gw .features .icon { color: var(--brand); }
.gw .features b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gw .block-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }

/* The two doors are radio buttons; the page shows the side whose door is picked. */
.door-pick { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.gw:has(#door-home:checked) .for-business, .gw:has(#door-business:checked) .for-home { display: none !important; }

.soon-tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.6; background: var(--brand-soft, #FFF0E6); color: var(--brand-ink, #B23F00); padding: 1px 9px; border-radius: 99px; vertical-align: middle; }
.phone-top .soon-tag { background: rgba(255, 255, 255, .14); color: #FFB98F; }

/* Soon services: a card on /services; on the front page and its own page, one email for it. */
.gw .service.soon { color: var(--ink); cursor: pointer; font-weight: 400; transition: box-shadow .2s; }
.gw .service.soon:hover { box-shadow: var(--e4); }
.gw .service.soon > span:not([class]) { color: var(--soft); font-size: 16px; }
.service-top { display: flex; justify-content: space-between; align-items: flex-start; }
.gw .service.soon .service-icon { background: #F1EFEC; color: var(--ink); }
.wait-said { color: var(--danger); font-weight: 500; }
.wait-done { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: var(--r-card); background: var(--brand-soft); max-width: 680px; }
.wait-done .icon { color: var(--brand-ink); flex: none; }

/* The made-up phone screens (Parts/ServiceMock.razor). */
.mock-sum { display: flex; flex-direction: column; padding: 4px 0 8px; border-bottom: 1px solid var(--rule); }
.mock-sum span { color: var(--soft); font-size: 13px; }
.mock-sum b { font-size: 30px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.mock-sub { display: flex; gap: 10px; align-items: flex-start; border-radius: 8px; padding: 10px; }
.mock-sub.warn { background: var(--brand-soft); color: var(--brand-ink); }
.mock-sub span { display: flex; flex-direction: column; font-size: 13px; }
.mock-sub b { color: var(--ink); font-size: 14px; }
.mock-line small { display: block; color: var(--soft); font-size: 12px; }
.mock-send.home { background: var(--accent); color: var(--accent-ink); }

/* Where home meets work. */
.bridge { display: grid; gap: 12px; align-items: stretch; }
.bridge-card { display: flex; flex-direction: column; gap: 6px; padding: 20px; background: var(--sheet); border-radius: var(--r-card); box-shadow: var(--e1); }
.bridge-card b { font-size: 19px; }
.bridge-card .soft { font-size: 16px; }
.bridge-who { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-ink); }
.bridge-arrow { justify-self: center; align-self: center; color: var(--brand); transform: rotate(90deg); }
.bridge-arrow .icon { width: 32px; height: 32px; }
@media (min-width: 720px) {
  .bridge { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 20px; }
  .bridge-arrow { transform: none; }
}

.gw .front-foot { border-top: 1px solid rgba(255, 255, 255, .12); }

.front-sign { display: inline-flex; align-items: center; min-height: 42px; padding: 6px 18px; border: 1.5px solid var(--ink); border-radius: 99px; color: var(--ink); font-weight: 600; font-size: 16px; text-decoration: none; transition: background-color .15s, color .15s; }
.front-sign:hover { background: var(--ink); color: var(--on-ink); }

/* The goud.work mark (Parts/Mark.razor): the logo's full stop, an eight-sided ring with a square
   in it. The square flies in like a shot arrow with a streak behind it and the ring gives at the hit:
   once where it stands for a tick (.mk-shoot, the sorted word, the sorted card), over and over as the
   loader (.mk-loop). --mk-delay holds the shot back. Less motion: it sits, and the loader breathes. */
.mk { display: inline-block; overflow: visible; color: #FC630D; flex: none; }
.mk-ring, .mk-dot, .mk-trail { fill: currentColor; transform-box: fill-box; transform-origin: center; }
.mk-trail { opacity: 0; transform-origin: right center; }
.mk-shoot .mk-dot, .sorted.sorting .sl-dot .mk-dot, .sorted.show + .sorted-card .sc-tick .mk-dot, .sorted:hover + .sorted-card .sc-tick .mk-dot, .sorted:focus-visible + .sorted-card .sc-tick .mk-dot { animation: mk-dot-shot .6s cubic-bezier(.2,.7,.2,1) var(--mk-delay, 0s) both; }
.mk-shoot .mk-trail, .sorted.sorting .sl-dot .mk-trail, .sorted.show + .sorted-card .sc-tick .mk-trail, .sorted:hover + .sorted-card .sc-tick .mk-trail, .sorted:focus-visible + .sorted-card .sc-tick .mk-trail { animation: mk-trail-shot .6s ease-out var(--mk-delay, 0s) both; }
.mk-shoot .mk-ring, .sorted.sorting .sl-dot .mk-ring, .sorted.show + .sorted-card .sc-tick .mk-ring, .sorted:hover + .sorted-card .sc-tick .mk-ring, .sorted:focus-visible + .sorted-card .sc-tick .mk-ring { animation: mk-ring-hit .6s ease-out var(--mk-delay, 0s) both; }
.mk-loop .mk-dot { animation: mk-dot-loop 1.3s cubic-bezier(.2,.7,.2,1) infinite; }
.mk-loop .mk-trail { animation: mk-trail-loop 1.3s ease-out infinite; }
.mk-loop .mk-ring { animation: mk-ring-loop 1.3s ease-out infinite; }
@keyframes mk-dot-shot {
  0% { transform: translateX(-260%) scale(.55, .35); opacity: 0; }
  15% { opacity: 1; }
  60% { transform: translateX(12%) scale(1.25, .8); }
  78% { transform: translateX(-4%) scale(.94, 1.06); }
  100% { transform: none; opacity: 1; }
}
@keyframes mk-trail-shot {
  0% { transform: translateX(-60%) scaleX(.2); opacity: 0; }
  30% { opacity: .5; }
  55% { transform: none; opacity: .4; }
  78%, 100% { transform: scaleX(0); opacity: 0; }
}
@keyframes mk-ring-hit { 0%, 55% { transform: none; } 68% { transform: scale(1.08); } 100% { transform: none; } }
@keyframes mk-dot-loop {
  0% { transform: translateX(-260%) scale(.55, .35); opacity: 0; }
  10% { opacity: 1; }
  32% { transform: translateX(12%) scale(1.25, .8); }
  42% { transform: none; }
  74% { transform: none; opacity: 1; }
  100% { transform: scale(.2); opacity: 0; }
}
@keyframes mk-trail-loop {
  0% { transform: translateX(-60%) scaleX(.2); opacity: 0; }
  15% { opacity: .5; }
  30% { transform: none; opacity: .4; }
  42%, 100% { transform: scaleX(0); opacity: 0; }
}
@keyframes mk-ring-loop { 0%, 30% { transform: none; } 38% { transform: scale(1.08); } 50%, 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .mk .mk-dot, .mk .mk-trail, .mk .mk-ring, .sorted .mk-dot, .sorted-card .mk-dot { animation: none !important; }
  .mk-loop { animation: mk-breathe 1.6s ease-in-out infinite; }
}
@keyframes mk-breathe { 50% { opacity: .45; } }

/* The sample opened big (Mahdi, 2026-11-08: «این صفحه نمایش رو با یک کلیک رو آیکون باز شو شبیه
   گوشی آیفون باز باشه و سایت فلوت روی صفحه باز بشه», then «خیلی کنده باز شدن حالت فولد هم اصلا
   طبیعی نیست»): one tap on the address bar's icon and the small phone itself grows into a whole
   iPhone in the middle of the screen, the page in it already there, nothing loaded again; a tap
   outside, Close or Esc and it shrinks back into its place. front.js moves it; --fk is how big it is
   against a real iPhone (414 by 868 with its frame). */
@property --fk { syntax: '<number>'; inherits: true; initial-value: 1; }
.pv-float { position: fixed; inset: 0; z-index: 900; background: rgba(8, 8, 8, .5); backdrop-filter: blur(5px); opacity: 0; transition: opacity .3s; }
.pv-float.open { opacity: 1; }
.pv-phone.floating { position: fixed; z-index: 901; margin: 0; filter: drop-shadow(0 calc(30px * var(--fk, 1)) calc(40px * var(--fk, 1)) rgba(0,0,0,.55)); }
.pv-ibar { position: relative; background: #F2F1EF; border-radius: calc(29px * var(--fk, 1)) calc(29px * var(--fk, 1)) 0 0; flex: none; display: flex; align-items: center; justify-content: space-between; height: calc(50px * var(--fk, 1)); padding: calc(4px * var(--fk, 1)) calc(30px * var(--fk, 1)) 0 calc(36px * var(--fk, 1)); color: #111; font: 600 calc(15px * var(--fk, 1))/1 system-ui, -apple-system, "Segoe UI", sans-serif; }
.pv-ibar-island { position: absolute; top: calc(10px * var(--fk, 1)); left: 50%; width: calc(122px * var(--fk, 1)); height: calc(35px * var(--fk, 1)); border-radius: 99px; background: #000; transform: translateX(-50%); }
/* The island is a button: an open sign on the small phone, a close sign on the big one. A hover
   swells it a little, as the island does when something happens. */
.pv-ibar-island { display: grid; place-items: center; padding: 0; border: 0; cursor: pointer; color: #E8E6E1; transition: transform .25s cubic-bezier(.3, .8, .3, 1.3), box-shadow .25s; }
.pv-ibar-island:hover { transform: translateX(-50%) scale(1.08, 1.12); box-shadow: 0 0 0 calc(2px * var(--fk, 1)) rgba(252, 99, 13, .55); }
.pv-ibar-island:focus-visible { outline: 2px solid #FC630D; outline-offset: 2px; }
.pv-ibar-island svg { width: max(12px, calc(18px * var(--fk, 1))); height: max(12px, calc(18px * var(--fk, 1))); fill: currentColor; }
.pv-ib-shut, .pv-phone.floating .pv-ib-open { display: none; }
.pv-phone.floating .pv-ib-shut { display: block; }
/* The status bar's bars, wi-fi and battery as an iPhone draws them (Mahdi, 2026-11-08: «اون آنتن و باطری هم طبیعی تر بشه»). */
.pv-ibar-icons { width: calc(68px * var(--fk, 1) * 1.05); height: calc(12px * var(--fk, 1) * 1.05); fill: #111; }
.pv-ibar-icons .bat-case { fill: none; stroke: #111; stroke-opacity: .38; stroke-width: 1.1; }
.pv-ibar-icons .bat-cap { fill-opacity: .4; }
.pv-phone .pv-screen { border-radius: 0 0 calc(29px * var(--fk, 1)) calc(29px * var(--fk, 1)); }
.pv-phone-hold { flex: none; }
.pv-float-acts { position: fixed; z-index: 902; left: 50%; bottom: 14px; display: flex; gap: 8px; transform: translateX(-50%); opacity: 0; transition: opacity .3s .15s; }
.pv-float.open ~ .pv-float-acts, .pv-float-acts.open { opacity: 1; }
.pv-float-acts > * { display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border: 0; border-radius: 99px; background: rgba(255,255,255,.94); color: #111; font: 600 14px/1 inherit; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.pv-float-acts > :focus-visible { outline: 3px solid #FC630D; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .pv-float, .pv-float-acts { transition: none; } }

/* The loader: inside the front page's phone while its page loads, and over any page when the next
   one is slow to come (front.js). */
.pv-load { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: rgba(255,255,255,.86); opacity: 0; pointer-events: none; transition: opacity .2s; }
/* Grey in the phone (2026-11-11): the orange is kept for the button and the picked thing. */
.pv-load .mk { color: #BDB7AE; }
.pv-screen.loading .pv-load { opacity: 1; }
/* Until the sample page has come the first time the phone shows that page's own cover photo, not an
   empty white screen (2026-11-14): the photo is the one the page itself will ask for a moment later. */
.pv-screen.first { background: #2A2926 var(--pv-poster) center top / cover no-repeat; }
.pv-screen.first iframe { opacity: 0; }
.pv-screen.first .pv-load { background: rgba(0, 0, 0, .2); }
.pv-screen.first .pv-load .mk { color: #fff; }
.gw-busy { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: color-mix(in srgb, var(--paper) 70%, transparent); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .25s; }
.gw-busy.on { opacity: 1; pointer-events: auto; }

/* «sorted» starts out of order, «detsro.» (Mahdi, 2026-11-08: «sorted از اول بهم ریخته باشه با
   اولین هاور یا پرس در موبایل مرتب بشه»): the first hover, or the first tap on a phone, sorts it.
   The letters land in place, the orange bar sweeps in, the goud.work mark shoots its dot beside it
   and stays, and the card says the word. front.js swaps .mixed for .sorting, then .done; .show
   holds the card. With no script the word is simply in order. */
.sorted-wrap { position: relative; display: inline-block; }
.sorted { position: relative; isolation: isolate; display: inline-block; font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; margin: 0; padding: 0 .06em; cursor: pointer; white-space: nowrap; line-height: inherit; }
.sorted:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; border-radius: 6px; }
.sorted::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: .1em; height: .36em; background: color-mix(in srgb, var(--brand) 38%, transparent); transform-origin: left center; }
.sl { display: inline-block; }
/* The word's full stop is the goud.work mark itself (Mahdi, 2026-11-08: «نقطه نارنجی جای نقطه آخر
   باشه»): an empty ring while the word is out of order, and its square shoots in as the word sorts. */
.sl-dot { color: var(--brand); --mk-delay: .95s; margin-left: .03em; }
.sl-dot .mk { display: inline-block; width: .36em; height: .36em; vertical-align: -.02em; }
/* Calmer since 2026-11-11: the letters stand in order from the start (.calm: the bar not yet there,
   the full stop an empty ring); as the logo's ball lands (.settle) the bar sweeps in and the square shoots. */
.sorted.calm .sl-dot .mk-dot { opacity: 0; }
.sorted.calm::after { transform: scaleX(0); }
.sorted.settle::after { animation: bar-in .7s ease-in-out both; }
.sorted.settle .sl-dot { --mk-delay: .45s; }
.sorted.settle .sl-dot .mk-dot { animation: mk-dot-shot .6s cubic-bezier(.2,.7,.2,1) var(--mk-delay, 0s) both; }
.sorted.settle .sl-dot .mk-trail { animation: mk-trail-shot .6s ease-out var(--mk-delay, 0s) both; }
.sorted.settle .sl-dot .mk-ring { animation: mk-ring-hit .6s ease-out var(--mk-delay, 0s) both; }
@keyframes bar-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .sorted.settle::after { animation: none; } }
/* The card reads as a dictionary entry (Mahdi, 2026-11-08: «این کامپوننت رو هم بهتر کنیم»): the
   word cut into its syllables with how it is said, the part of speech, a numbered meaning and the
   example, an orange rule down its left. It hangs from the word and never leaves the screen: on a
   laptop centred under the word, on a phone held to the right edge with its point under the word.
   Shown while the word plays (about four seconds), on a hover, or when it has the focus. */
.sorted-card {
  position: absolute; z-index: 20; top: calc(100% + 12px); left: 50%; width: 300px; max-width: calc(100vw - 32px);
  display: flex; flex-direction: column; gap: 3px; padding: 14px 16px 13px 20px;
  background: var(--sheet); border-radius: 14px; box-shadow: 0 0 0 1px var(--rule), var(--e8);
  font-size: 15px; line-height: 1.45; font-weight: 400; letter-spacing: normal; color: var(--soft); text-align: left; white-space: normal;
  opacity: 0; pointer-events: none; transform: translate(-50%, 8px) scale(.98); transform-origin: top center; transition: opacity .22s, transform .22s;
}
.sorted-card::before { content: ""; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; background: var(--sheet); box-shadow: -1px -1px 0 0 var(--rule); transform: translateX(-50%) rotate(45deg); }
.sorted-card::after { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--brand); }
.sc-head { display: flex; align-items: baseline; gap: 10px; color: var(--ink); }
.sc-head b { font-family: Georgia, "Times New Roman", serif; font-size: 22px; font-weight: 700; letter-spacing: .01em; }
.sc-say { font-size: 14px; color: var(--soft); }
.sc-kind { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-ink); padding-bottom: 4px; border-bottom: 1px solid var(--rule); margin-bottom: 4px; }
.sc-mean { display: flex; gap: 8px; color: var(--ink); }
.sc-mean i { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--brand-soft, rgba(252,99,13,.15)); color: var(--brand-ink); font-style: normal; font-size: 12px; font-weight: 800; }
.sc-eg { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-left: 28px; color: var(--soft); font-style: italic; }
.sc-tick { flex: none; display: grid; place-items: center; width: 24px; height: 24px; color: var(--brand); --mk-delay: .3s; }
.sorted.show + .sorted-card, .sorted:hover + .sorted-card, .sorted:focus-visible + .sorted-card { opacity: 1; transform: translate(-50%, 0) scale(1); }
/* On a phone the word sits near the right edge: the card holds to that edge, its point under the word. */
@media (max-width: 1023px) {
  .sorted-card { left: auto; right: -4px; transform: translate(0, 8px) scale(.98); transform-origin: top right; }
  .sorted-card::before { left: auto; right: 44px; transform: rotate(45deg); }
  .sorted.show + .sorted-card, .sorted:hover + .sorted-card, .sorted:focus-visible + .sorted-card { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .sorted-card { transition: none; } }

/* The drawn icons (Parts/Glyph.razor), three tones that follow the light or dark look. */
.glyph { display: block; flex: none; }
.glyph .ga { fill: var(--gl-ink); }
.glyph .gb { fill: var(--gl-hot); }
.glyph .gc { fill: var(--gl-soft); }
.glyph :is(.gsa, .gsb, .gsc) { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.glyph .gsa { stroke: var(--gl-ink); }
.glyph .gsb { stroke: var(--gl-hot); }
.glyph .gsc { stroke: var(--gl-soft); }
.gw .pic { width: 64px; height: 64px; }
.gw .features .pic { margin-bottom: 2px; }
@media (min-width: 1024px) { .gw .pic { width: 72px; height: 72px; } }

/* ---------- the front page on one screen (Mahdi, 2026-11-08) ----------
   «صفحه اول که اسکرول نخوره»: everything fits the screen, but scrolling is never locked. The page
   is exactly one screen tall; with big text the fixed rows grow past it, the phone's row shrinks
   to nothing, and the page simply scrolls. A phone stacks it all in one column; a laptop puts the
   words, the button and the tiles on the left and the phone on the right.
   Which service shows is in Landing.razor's own <style>: [data-s] blocks are hidden until their
   tile is picked. */
/* Since 2026-11-11 (Mahdi: «صفحه اول گود.ورک خیلی شلوغه», then «هر دو») the one screen is the top
   of a longer page: .one-page holds it, the services' sections below it (.one-below) and the footer. */
.page:has(> .one), .page:has(> .one-page) { padding: 0; }
.one-page { position: relative; isolation: isolate; background: linear-gradient(170deg, #FFF1E6 0%, #FAF8F5 35%, #FFFFFF 100%); }
.one {
  height: 100vh; height: 100dvh; display: grid; gap: 12px; align-content: stretch;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  grid-template-areas: "logo logo" "words words" "show show" "tiles tiles" "act act";
  padding: calc(22px + env(safe-area-inset-top, 0px)) max(16px, calc((100vw - 640px) / 2)) calc(14px + env(safe-area-inset-bottom, 0px));
}
.one [data-s] { display: none; }
.one-logo { grid-area: logo; align-self: center; justify-self: center; }
.one-logo img { display: block; height: 46px; width: auto; }
/* The mark sits exactly on the logo's full stop (the octagon's centre at 362,76 of 710 by 228). The
   first time in a visit (.intro) the word draws in from the left like the arrow under it, the ring
   lands as the drawing reaches it, and the square shoots in. */
.one-logo-in { position: relative; display: block; width: fit-content; line-height: 0; }
.one-logo-mk { position: absolute; left: 44.33%; top: 12.26%; width: 13.54%; height: auto; }
/* The logo in its pieces (Landing.razor): the whole pictures only hold the size, the letters and the
   arrow stand over them, and front.js plays the ball game. .intro hides the pieces until it starts. */
.one-logo .lg-size { opacity: 0; }
.one-logo .lg-p { position: absolute; height: auto; transform-origin: 50% 100%; }
.one-logo.intro .lg-p, .one-logo.intro .one-logo-mk { opacity: 0; }

/* Business or household as a word in the headline (Mahdi, 2026-11-08, his pick): the side shown is
   the word, orange with a dashed line under it and a small swap sign; a tap rolls it over to the other
   one. The radio buttons it works are out of sight; a keyboard on them rings the word. */
.door-picks { position: absolute; width: 1px; height: 1px; overflow: hidden; }
.nw { white-space: nowrap; }
.dw-wrap { display: inline-block; perspective: 400px; }
.dw { display: none; align-items: baseline; gap: .1em; margin: 0; font: inherit; letter-spacing: inherit; color: var(--brand-ink); cursor: pointer; white-space: nowrap; text-decoration: underline dashed .06em; text-underline-offset: .14em; text-decoration-color: color-mix(in srgb, var(--brand) 70%, transparent); }
.dw .icon { width: .62em; height: .62em; padding: .1em; margin-left: .06em; align-self: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand-ink); transition: transform .3s; }
.dw:hover .icon { transform: rotate(180deg); }
/* No roll any more (2026-11-11, his pick: the switch stays in the headline, only its spin goes). */
.gw:has(#door-business:checked) .dw-b, .gw:has(#door-home:checked) .dw-h { display: inline-flex; }
.gw:has(#door-business:focus-visible) .dw-b, .gw:has(#door-home:focus-visible) .dw-h { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
html[data-theme=dark] .dw, html[data-theme=dark] .dw .icon { color: var(--brand-ink); }

.one-words { grid-area: words; display: flex; flex-direction: column; gap: 6px; }
.one-words h1 { font-size: clamp(30px, 8.6vw, 44px); line-height: 1.08; letter-spacing: -.015em; margin: 0; }
.one-say { flex-direction: column; gap: 2px; margin: 0; }
.one-say b { display: none; }
.one-say > span { color: var(--soft); font-size: 15px; line-height: 1.4; }

.one-show { grid-area: show; min-height: 0; display: flex; }
.one-mock { flex: 1; min-height: 0; justify-content: center; align-items: flex-start; }
.one .phone { width: min(100%, 330px); max-height: 100%; overflow: hidden; padding: 10px; gap: 8px; border-radius: 22px; }
.one .phone-top { padding: 8px 12px; font-size: 14px; border-radius: 12px; flex: none; }
.one .mock { min-height: 0; overflow: hidden; font-size: 13px; gap: 6px; padding: 2px 4px; }
.one .mock-send { padding: 9px; font-size: 14px; flex: none; }

.one-tiles { grid-area: tiles; }
.one-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
/* More than five (Recipes made six on the home side, Mahdi, 2026-11-11: «اسکرول داشته باشه»): the row
   scrolls sideways, five and a bit showing so the rest is seen to be there. Room above for a Soon tag. */
.one-row:has(> label:nth-of-type(6)) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 5 * 6px) / 5.4); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 8px 2px 4px; margin: -8px -2px -4px; }
.one-row:has(> label:nth-of-type(6))::-webkit-scrollbar { display: none; }
.one-row:has(> label:nth-of-type(6)) > label { scroll-snap-align: center; }
/* The picked tile slides to the middle and stays there (Mahdi, 2026-11-14: «اسکرول آیتم انتخاب شده به
   صورت اسلاید باشه و انتخاب همیشه وسط باشه»). front.js gives the row half its width less half a tile on
   each side (--pad), so the first and the last tile can stand in the middle too, and the ends fade. */
.one-row.slide:has(> label:nth-of-type(6)) { padding-inline: var(--pad); grid-auto-columns: var(--tile); mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
/* Where the row is wide enough for every tile at once, they all stand in it and nothing slides
   (front.js adds .all; 2026-11-14: on a laptop only three of six tiles showed). */
.one-row.all:has(> label:nth-of-type(6)) { grid-auto-columns: var(--tile); overflow-x: hidden; scroll-snap-type: none; }
/* The service tiles look like the sample tabs beside the phone (Mahdi, 2026-11-08): white, a fine ring, rounder, lifting a little on a hover. */
.one-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px 6px; border-radius: 14px; background: var(--sheet); border: 0; box-shadow: 0 0 0 1px var(--rule), 0 1px 2px rgba(0,0,0,.06); color: var(--ink); font-size: 12px; font-weight: 600; line-height: 1.15; text-align: center; cursor: pointer; transition: box-shadow .2s, transform .2s, background-color .2s; }
/* The phone keeps its place from one service to the next (Mahdi, 2026-11-08): the line under the
   headline always has room for three lines (two on a laptop) and a tile for a two-line name. */
.one-say > span { min-height: calc(1.4em * 3); }
.one-tile { min-height: 82px; justify-content: flex-start; }
@media (max-height: 720px) and (max-width: 1023px) { .one-tile { min-height: 74px; } }
@media (min-width: 1024px) { .one-say > span { min-height: calc(1.4em * 2); } }
/* And the buttons under it always take the room of the tallest (a waiting list's email field and a two-line note). */
@media (max-width: 1023px) { .one-act { min-height: 142px; } }
.one-tile:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--rule), 0 8px 18px -10px rgba(0,0,0,.4); }
.one-tile .glyph { width: 40px; height: 40px; }
.one-tile > span:not(.soon-tag) { overflow-wrap: anywhere; hyphens: auto; }
.one-tile .soon-tag { position: absolute; top: -7px; right: -2px; font-size: 9px; padding: 0 5px; letter-spacing: .04em; }

.one-act { grid-area: act; }
.one-do { flex-direction: column; gap: 6px; }
.one-buttons { display: flex; flex-direction: column; gap: 4px; }
.one-buttons .btn { min-height: 54px; font-size: 19px; }
.one-more { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 36px; color: var(--ink); font-weight: 600; font-size: 16px; }
.one-note { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--soft); font-size: 13px; text-align: center; }
.one-note .icon { color: var(--brand-ink); flex: none; }
.one-note a { color: var(--ink); }
.one .wait-form { display: flex; flex-direction: column; gap: 8px; }
.one .wait-form input[type=email] { min-height: 50px; margin: 0; }
.one .wait-form .btn { min-height: 52px; margin: 0; font-size: 18px; }
.one .wait-done { padding: 12px 14px; font-size: 15px; }

/* Each service of the side shown, below the first screen (Landing.razor): its line, its steps,
   Try it (back up to the phone) and its own page. One column on a phone, two on a laptop. Quiet:
   white cards, grey step numbers, and the button an outline, so the orange stays up top. */
.one-below { display: flex; flex-direction: column; gap: 18px; padding: 36px max(16px, calc((100vw - 640px) / 2)) 32px; }
.one-list { display: flex; flex-direction: column; gap: 16px; }
.one-list h2 { margin: 0; font-size: 26px; letter-spacing: -.01em; }
.one-svcs { display: grid; gap: 14px; }
.one-svc { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 18px; background: var(--sheet); box-shadow: 0 0 0 1px var(--rule), 0 1px 2px rgba(0,0,0,.05); scroll-margin-top: 16px; }
.one-svc-head { display: flex; align-items: flex-start; gap: 14px; }
.one-svc-head .glyph { width: 48px; height: 48px; }
.one-svc h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 19px; }
.one-svc h3 .soon-tag { font-size: 10px; }
.one-svc-head p { margin: 3px 0 0; color: var(--soft); font-size: 15px; line-height: 1.45; }
.one-svc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; counter-reset: st; }
.one-svc-steps li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--soft); font-size: 15px; line-height: 1.45; counter-increment: st; }
.one-svc-steps li::before { content: counter(st); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 8%, var(--sheet)); color: var(--ink); font-size: 12px; font-weight: 700; }
.one-svc-steps b { color: var(--ink); }
.one-svc-go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: auto; }
.one-svc-go .btn { min-height: 44px; padding: 8px 20px; font-size: 16px; margin: 0; }
.one-svc-go a:not(.btn) { color: var(--ink); font-weight: 600; font-size: 15px; }

/* The footer, at the very end of the page now: what goud.work promises, then the links and the
   look, each row wrapping on a phone so nothing is cut at the edges (2026-11-11). */
.one-foot { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px max(16px, calc((100vw - 640px) / 2)) calc(22px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--rule); font-size: 14px; color: var(--soft); }
.one-why { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.one-why > span { display: inline-flex; align-items: center; gap: 6px; }
.one-why .icon { color: var(--soft); }
/* The plain line on whose the data is (Parts/DataLine.razor): a row of its own above the rest. */
.data-line { flex-basis: 100%; display: flex; justify-content: center; align-items: flex-start; gap: 8px; margin: 0; text-align: center; line-height: 1.5; }
.data-line .icon { flex: none; margin-top: 3px; }
.data-line span { max-width: 560px; }
.one-foot .data-line { color: var(--ink); }
.one-foot .data-line .icon { color: var(--brand, #FC630D); }
.front-foot .data-line { color: #fff; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.front-foot .data-line .icon { color: #FC630D; }
.one-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 18px; }
.one-links a { color: var(--soft); }

/* The business page on the front page (ServiceMock.razor): a real sample page in a frame,
   drawn at a phone's width and shrunk to fit by front.js (--pv-k), with a switcher above it. */
.one-mock:has(.pv-stage) { align-items: stretch; }
.pv-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; width: 100%; }
/* The phone with a small row under it (2026-11-11, the calmer front page; the samples and the steps
   were a column of tabs beside it, a second way to drive one phone): the samples' logos or the
   service's step icons, round pills, the one in the phone with its name and the side's colour. */
.pv-wrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; height: 100%; max-height: 560px; min-height: 0; }
.pv-wrap > .pv-phone, .pv-wrap > .pv-phone-hold { order: 1; width: min(100%, 300px); }
.pv-pick { order: 2; flex: none; display: flex; flex-wrap: nowrap; justify-content: center; gap: 6px; max-width: 100%; }
.pv-card {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 3px; border-radius: 99px;
  color: var(--ink); text-decoration: none; background: var(--sheet); box-shadow: 0 0 0 1px var(--rule);
  transition: box-shadow .2s ease, background-color .2s ease;
}
.pv-card:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 35%, var(--rule)); }
.pv-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pv-card.on { padding-right: 12px; background: color-mix(in srgb, var(--brand) 10%, var(--sheet)); box-shadow: 0 0 0 2px var(--brand); }
.pv-card-logo { flex: none; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.pv-card-name { display: none; font-size: 13px; line-height: 1; white-space: nowrap; }
.pv-card.on .pv-card-name { display: inline; }
@media (prefers-reduced-motion: reduce) { .pv-card { transition: none; } }
/* The small phone wears the iPhone's frame too, its island, clock and bars at the top (Mahdi,
   2026-11-08: «کوچیکه هم قاب داشته باشه», then «قاب شیکتر و نازکتر و رندر گرفته باشه»): a rendered
   frame (docs/goud-work/cut-phone-frame.ps1), drawn to its size by --fk (its width against 414, front.js). */
.pv-phone {
  flex: 1; min-height: 0; min-width: 0; width: 100%; display: flex; flex-direction: column; overflow: hidden; color-scheme: light;
  box-sizing: border-box; background: transparent; border: calc(8px * var(--fk, .7)) solid transparent; border-radius: 0;
  border-image: url("brand/phone-frame.png") 76 / calc(36.9px * var(--fk, .7)) stretch;
  filter: drop-shadow(0 calc(14px * var(--fk, .7)) calc(22px * var(--fk, .7)) rgba(40,24,8,.32));
}
.pv-screen { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.pv-screen iframe { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; border: 0; background: #fff; }
/* A service's own screen inside the phone (every service but the business page): drawn at 390 and
   shrunk like the page, and light like a phone's app whatever the site's look. */
.pv-canvas {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; display: flex; flex-direction: column;
  --ink: #1C1C1A; --soft: #6B6862; --sheet: #FFFFFF; --paper: #F5F4F1; --rule: #E6E2DB; --accent: #0B0B0A; --accent-ink: #FFFFFF; --on-ink: #FFFFFF;
  background: var(--paper); color: var(--ink); color-scheme: light; font-size: 16px;
}
.pv-screen.scaled > .pv-canvas { width: 390px; height: calc(100% / var(--pv-k, 1)); transform: scale(var(--pv-k, 1)); transform-origin: 0 0; }
/* Inside the phone the old mock stands straight and full (the laptop rules tilted it 2 degrees). */
.one .pv-canvas .phone, .pv-canvas .phone { flex: 1; width: 100%; max-width: none; border: 0; border-radius: 0; box-shadow: none; padding: 12px 16px 24px; background: var(--paper); gap: 14px; transform: none; }
.pv-canvas .phone-top { border-radius: 14px; padding: 12px 16px; font-size: 17px; }
.pv-canvas .mock { font-size: 16px; gap: 12px; padding: 4px 4px; }
.pv-appbar { flex: none; display: flex; align-items: center; gap: 9px; padding: 14px 18px; background: #0B0B0A; color: #fff; font-weight: 700; font-size: 18px; }
.pv-appbar-dot { width: 12px; height: 12px; border-radius: 3px; background: #FC630D; }
.pv-app .inv-stage { flex: 1; padding: 18px 16px 14px; justify-content: flex-start; }
.pv-app .inv-wrap { max-width: none; }
.pv-app .inv-paper { rotate: none; }
/* Easy Invoice's step tabs (ServiceMock.razor): the sample tabs' look, an icon over the step's name; the
   step the phone is on is ringed in orange, and the steps before it are done, their icon ticked orange. */
/* A service's steps in the same row: an icon each, the step the phone is on with its name; the ones
   before it done, their icon in the side's soft colour. */
button.pv-card { border: 0; font: inherit; cursor: pointer; }
.pv-step-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--soft); transition: background-color .25s, color .25s; }
.pv-step.on .pv-step-icon { background: var(--brand); color: #fff; }
.pv-step.done .pv-step-icon { color: var(--brand-ink); }
.pv-solo { justify-content: center; }
.pv-solo .pv-phone { flex: none; width: min(100%, 250px); }
.pv-screen.scaled iframe { width: 390px; height: calc(100% / var(--pv-k, 1)); transform: scale(var(--pv-k, 1)); transform-origin: 0 0; }
@media (min-width: 1024px) {
  .pv-wrap { width: 340px; height: min(100%, 720px); max-height: none; gap: 14px; }
  .pv-wrap > .pv-phone, .pv-wrap > .pv-phone-hold, .pv-solo .pv-phone { width: 320px; }
  .pv-phone { filter: drop-shadow(0 22px 34px rgba(0,0,0,.4)); }
}
html[data-theme=dark] .pv-phone:not(.floating) { filter: drop-shadow(0 22px 34px rgba(0,0,0,.6)); }

/* Easy Invoice on the front page (ServiceMock.razor): the invoice itself, white as it prints,
   writing itself line by line; then it goes out on WhatsApp, the answer comes and Paid lands.
   One 12 s loop: each line has its own moment (inv-s1 to inv-s9) and all of it fades at the end. */
.one-mock:has(.inv-stage) { align-items: stretch; }
.inv-stage { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; }
.inv-wrap { position: relative; display: flex; width: 100%; max-width: 360px; max-height: 100%; min-height: 0; }
.inv-paper {
  --ink-d: #1C1C1A; --soft-d: #6B6862; --rule-d: #ECE8E2;
  position: relative; width: 100%; max-height: 100%; overflow: hidden; display: flex; flex-direction: column; gap: 7px;
  padding: 14px 16px 16px; background: #FFFFFF; color: var(--ink-d); border-radius: 6px; font-size: 12px; line-height: 1.35;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 12px 32px -8px rgba(40,24,8,.28); color-scheme: light;
  animation: inv-paper 12s infinite both;
}
.inv-paper::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: #FC630D; }
.inv-head { display: flex; align-items: center; gap: 9px; padding-bottom: 9px; border-bottom: 1px solid var(--rule-d); }
.inv-logo { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #FC630D; color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .02em; }
.inv-from, .inv-no, .inv-to, .inv-bank { display: flex; flex-direction: column; min-width: 0; }
.inv-from b { font-size: 13px; }
.inv-from small, .inv-no small, .inv-to span, .inv-to small { color: var(--soft-d); font-size: 11px; }
.inv-no { margin-inline-start: auto; text-align: right; }
.inv-no b { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #B23F00; }
.inv-to small { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 10px; }
.inv-to b { font-size: 13px; }
.inv-row { display: flex; justify-content: space-between; gap: 10px; font-variant-numeric: tabular-nums; padding: 1px 0; }
.inv-row.soft { color: var(--soft-d); }
.inv-total { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 10px; border-radius: 6px; background: #0B0B0A; color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.inv-total b { font-size: 17px; }
.inv-bank { gap: 1px; padding: 7px 10px; border-radius: 6px; background: #FFF4EC; font-size: 11px; color: #5A3A22; }
.inv-bank b { color: var(--ink-d); font-size: 12px; }
.inv-stamp { position: absolute; right: 14px; top: 64px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px 4px 9px; border: 3px solid #1DA851; border-radius: 8px; color: #138A40; font-weight: 800; font-size: 20px; letter-spacing: .1em; text-transform: uppercase; background: rgba(255,255,255,.85); rotate: -12deg; }
.inv-stamp .icon { width: 20px; height: 20px; }

.inv-chat { position: absolute; z-index: 2; right: -4px; bottom: 6px; width: min(88%, 270px); display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.inv-msg { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 7px 9px 5px; border-radius: 10px; box-shadow: 0 1px 1px rgba(0,0,0,.12), 0 6px 18px -6px rgba(0,0,0,.3); max-width: 100%; color: #111B21; }
.inv-msg.out { align-self: flex-end; background: #D9FDD3; border-top-right-radius: 3px; }
.inv-msg.in { align-self: flex-start; background: #FFFFFF; border-top-left-radius: 3px; margin-inline-start: -18px; }
.inv-file { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; background: rgba(0,0,0,.05); }
.inv-file > span:last-child { display: flex; flex-direction: column; }
.inv-file small { color: #667781; font-size: 11px; }
.inv-pdf { display: grid; place-items: center; width: 30px; height: 34px; border-radius: 5px; background: #FC630D; color: #fff; }
.inv-meta { align-self: flex-end; display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; color: #667781; }
.inv-ticks { color: #8696A0; animation: inv-ticks 12s infinite both; }
.inv-stage :is(.s1, .s2, .s3, .s4, .s5, .s6, .s7, .s8, .s9) { --from: translateY(6px); animation: 12s infinite both; }
.inv-stage :is(.s2, .s3, .s4) { --from: none; }
@keyframes inv-s1 { 0%, 6.7% { opacity: 0; transform: var(--from); } 9.6%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes inv-s5 { 0%, 30% { opacity: 0; transform: var(--from); } 32.9%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes inv-s6 { 0%, 36.7% { opacity: 0; transform: var(--from); } 39.6%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes inv-s7 { 0%, 46.7% { opacity: 0; transform: var(--from); } 49.6%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes inv-s8 { 0%, 63.3% { opacity: 0; transform: var(--from); } 66.3%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes inv-s9 { 0%, 71.7% { opacity: 0; transform: var(--from); } 74.6%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.inv-stage .s1 { animation-name: inv-s1; }
.inv-stage .s2 { animation-name: inv-w2; }
.inv-stage .s3 { animation-name: inv-w3; }
.inv-stage .s4 { animation-name: inv-w4; }
.inv-stage .s5 { animation-name: inv-s5; --from: scale(.94); }
.inv-stage .s6 { animation-name: inv-s6; }
.inv-stage .s7 { animation-name: inv-s7; --from: translateY(14px) scale(.96); }
.inv-stage .s8 { animation-name: inv-s8; --from: translateY(14px) scale(.96); }
.inv-stage .s9 { animation-name: inv-s9; --from: scale(1.8); }
/* The lines are written left to right, like a pen. */
@keyframes inv-w2 { 0%, 13.3% { clip-path: inset(0 100% 0 0); } 17.5%, 93% { clip-path: inset(0 0 0 0); opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes inv-w3 { 0%, 20% { clip-path: inset(0 100% 0 0); } 23.3%, 93% { clip-path: inset(0 0 0 0); opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes inv-w4 { 0%, 25% { clip-path: inset(0 100% 0 0); } 27.5%, 93% { clip-path: inset(0 0 0 0); opacity: 1; } 97%, 100% { opacity: 0; } }
/* Read: the grey ticks turn blue a second after it is sent. */
@keyframes inv-ticks { 0%, 55% { color: #8696A0; } 56.7%, 100% { color: #53BDEB; } }
/* The sheet steps back a little when it is sent, so the chat sits over it. */
@keyframes inv-paper { 0%, 45% { transform: none; } 50%, 95% { transform: translateY(-6px) scale(.97); } 100% { transform: none; } }
/* On a phone the sheet shrinks up out of the way when it is sent, and only the sent message shows. */
@media (max-width: 1023px) {
  .inv-paper { transform-origin: 50% 0; animation-name: inv-paper-phone; }
  .inv-msg.in { display: none; }
}
@keyframes inv-paper-phone { 0%, 45% { transform: none; } 50%, 95% { transform: scale(.86); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .inv-paper, .inv-ticks, .inv-stage :is(.s1, .s2, .s3, .s4, .s5, .s6, .s7, .s8, .s9) { animation: none; }
  .inv-ticks { color: #53BDEB; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 1023px) { .inv-paper { transform: scale(.86); } }
@media (min-width: 1024px) {
  .inv-stage { padding: 0 0 40px; }
  .inv-wrap { max-width: 420px; }
  .inv-paper { padding: 22px 24px 24px; gap: 10px; font-size: 14px; transform-origin: 50% 0; rotate: -1.5deg; }
  .inv-head { padding-bottom: 12px; }
  .inv-logo { width: 38px; height: 38px; font-size: 14px; border-radius: 10px; }
  .inv-from b, .inv-to b { font-size: 15px; }
  .inv-from small, .inv-no small, .inv-to span, .inv-bank { font-size: 12px; }
  .inv-total b { font-size: 20px; }
  .inv-chat { right: -96px; bottom: -40px; width: 280px; font-size: 14px; }
  .inv-stamp { font-size: 24px; top: 84px; right: 20px; }
}
.mock-sum b.mock-name { font-size: 22px; }
.mock-tag { flex: none; align-self: center; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: #F1EFEC; color: var(--ink); }
.mock-tag.good { background: #E3F1EC; color: #0A5545; }
.mock-tag.low { background: var(--brand-soft); color: var(--brand-ink); }
.mock-send.dark { background: var(--ink); color: var(--on-ink); }

/* A short phone (an iPhone SE is 667 tall) drops the service's line and shrinks the rest; a very
   short one drops the phone too, so the button always stays in sight. */
@media (max-height: 720px) and (max-width: 1023px) {
  .one { gap: 9px; padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
  .one-say { display: none !important; }
  .one-words h1 { font-size: 30px; }
  .one-tile .glyph { width: 34px; height: 34px; }
}
@media (max-height: 540px) and (max-width: 1023px) { .one-show { display: none; } }

@media (min-width: 1024px) {
  .one {
    gap: 14px 48px;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto auto auto minmax(0, 1fr);
    grid-template-areas: "logo logo logo" ". show show" "words show show" "act show show" "tiles show show" ". show show";
    padding: 36px max(40px, calc((100vw - 1240px) / 2)) 28px;
  }
  .one-below { padding: 56px max(40px, calc((100vw - 1240px) / 2)) 48px; gap: 24px; }
  .one-list h2 { font-size: 34px; }
  .one-svcs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .one-svc { padding: 24px; }
  .one-foot { flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding-inline: max(40px, calc((100vw - 1240px) / 2)); }
  .one-logo img { height: 64px; }
  .one-words { gap: 14px; }
  .one-words h1 { font-size: clamp(44px, 4.4vw, 66px); }
  .one-say b { display: flex; align-items: center; gap: 10px; font-size: 21px; }
  .one-say > span { font-size: 18px; max-width: 34em; }
  .one-mock { align-items: center; }
  .one .phone { width: 340px; padding: 14px; gap: 12px; border-radius: 28px; transform: rotate(2deg); }
  .one .phone-top { font-size: 15px; padding: 10px 14px; }
  .one .mock { font-size: 14px; gap: 8px; }
  .one-row { gap: 10px; }
  .one-tile { padding: 8px 4px 8px; font-size: 14px; }
  .one-tile .glyph { width: 52px; height: 52px; }
  .one-tile .soon-tag { font-size: 10px; }
  .one-buttons { flex-direction: row; align-items: center; gap: 20px; }
  .one-buttons .btn { padding-inline: 32px; }
  .one-note { justify-content: flex-start; font-size: 14px; }
  .one .wait-form { flex-direction: row; flex-wrap: wrap; max-width: 560px; }
  .one .wait-form input[type=email] { flex: 1 1 220px; width: auto; }
  .one .wait-form .wait-said { flex-basis: 100%; }
}
/* A short laptop screen: a smaller headline and phone, so all of it still fits. */
@media (min-width: 1024px) and (max-height: 780px) {
  .one { gap: 10px 40px; padding-top: 24px; }
  .one-words h1 { font-size: clamp(40px, 3.8vw, 54px); }
  .one-say > span { font-size: 16px; }
  .one .phone { width: 310px; padding: 12px; gap: 9px; }
  .one-tile .glyph { width: 44px; height: 44px; }
}

/* /plans and /services: the front page's longer words, on pages of their own (2026-11-08). */
.sub .front-block:first-child { padding-top: 28px; }
.sub-go { align-self: flex-start; }
.sub-hero { display: grid; gap: 28px; align-items: center; }
.sub-words { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.sub-words .lead { font-size: 19px; max-width: 34em; }
.sub-phone { display: flex; justify-content: center; }
.sub .wait-form { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; max-width: 560px; }
.sub .wait-form input[type=email] { flex: 1 1 220px; width: auto; min-height: 54px; margin: 0; }
.sub .wait-form .btn { margin: 0; }
.sub .wait-form .wait-said { flex-basis: 100%; }
.sub-others { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; max-width: 720px; }
.sub-others .one-tile { text-decoration: none; padding: 12px 6px; font-size: 14px; }
.sub-others .one-tile .glyph { width: 52px; height: 52px; }
.sub-others .one-tile .soon-tag { font-size: 10px; }
@media (min-width: 1024px) {
  .sub-hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; }
  .sub .phone { width: 340px; transform: rotate(2deg); }
}



/* ---------- the sign-in page (Mahdi, 2026-11-07) ----------
   Two halves on a laptop: black with the logo, the slogan and a few painted icons on the left,
   the form on white on the right. On a phone only the logo and the form. Same colours as the
   front page: black, white, the logo's orange. */
.page:has(> .door-page) { padding: 0; }
.door-page { --accent: #0B0B0A; --accent-dark: #000; --accent-soft: #FFF0E6; --brand: #FC630D; --brand-ink: #B23F00; --brand-soft: #FFF0E6;
  min-height: 100vh; min-height: 100dvh; display: grid; background: var(--sheet); }
.door-side { display: none; }
.door-main { display: flex; flex-direction: column; align-items: center; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
.door-main-logo { align-self: flex-start; }
.door-main-logo img { display: block; height: 38px; width: auto; }
.door-box { width: min(100%, 420px); margin: auto 0; padding: 32px 0 16px; display: flex; flex-direction: column; gap: 14px; }
.door-box h1 { font-size: 30px; margin: 0; letter-spacing: -.01em; }
.door-box .lead { font-size: 17px; }
.door-form { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.door-form .btn { margin-top: 8px; min-height: 56px; font-size: 19px; }
.door-form input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(252, 99, 13, .25); }
.door-box .ways { min-height: 0; }
.door-box .pretend { border-color: var(--brand); }
.door-foot { margin-top: 8px; text-align: center; }
.door-foot a { color: var(--soft); }

/* The code: six boxes made by front.js from the one plain field. */
.digits { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.digit { min-height: 62px; padding: 0; text-align: center; font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; border-radius: 10px; caret-color: var(--brand); }
.digit:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(252, 99, 13, .25); }
.door-again { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px; font-size: 15px; text-align: center; }
.link-btn { font: inherit; font-weight: 600; color: var(--brand-ink); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; box-shadow: none; }

@media (min-width: 960px) {
  .door-page { grid-template-columns: minmax(400px, 5fr) 7fr; }
  .door-side { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 36px 48px 44px; background: var(--accent); color: #fff; position: relative; overflow: hidden; }
  .door-side-logo { display: block; height: 52px; width: auto; }
  .door-side-words { display: flex; flex-direction: column; gap: 22px; }
  .door-side-big { font-size: clamp(38px, 3.6vw, 54px); font-weight: 600; line-height: 1.08; letter-spacing: -.015em; margin: 0; }
  .door-side-big span { background: linear-gradient(transparent 84%, var(--brand) 84%); padding: 0 .04em; }
  .door-side ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
  .door-side li { position: relative; padding-left: 22px; color: rgba(255, 255, 255, .78); font-size: 17px; line-height: 1.45; }
  .door-side li::before { content: ""; position: absolute; left: 0; top: .5em; width: 9px; height: 9px; border-radius: 2px; background: var(--brand); }
  .door-side-pics { display: flex; flex-wrap: wrap; gap: 14px; }
  .door-side { --gl-ink: #F4F1EC; --gl-soft: #45403A; }
  .door-side-pics .glyph { width: 84px; height: 84px; padding: 12px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); border-radius: 22px; }
  .door-side-pics .glyph:nth-child(odd) { transform: rotate(-4deg); }
  .door-side-pics .glyph:nth-child(even) { transform: rotate(3deg) translateY(10px); }
  .door-main { justify-content: center; padding: 32px 48px; }
  .door-main-logo { display: none; }
}

.door-again a { color: var(--soft); }
.door-legal { margin-top: 8px; font-size: 14px; color: var(--soft); }
.foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }

/* The privacy page: plain reading width. */
.sheet.legal { max-width: 720px; gap: 12px; }
.legal h2 { font-size: 21px; margin: 18px 0 0; }
.legal ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.legal p, .legal li { font-size: 17px; line-height: 1.6; }

/* ---------- the kind of work at setup (Mahdi, 2026-11-08) ----------
   A search above about seventy kinds in fourteen groups, each group a fold; Something else with
   the work in its own words; up to two more kinds below. */
.kind-form { gap: 10px; }
.kind-find { font-size: 18px; }
.kind-none { margin: 0; }
.kind-group, .kind-more { background: var(--sheet); border-radius: var(--r-card); box-shadow: var(--e1); }
.kind-more { background: transparent; box-shadow: none; border: 1px dashed var(--line); margin-top: 6px; }
.kind-group > summary, .kind-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; font-weight: 600; cursor: pointer; list-style: none; }
.kind-group > summary::-webkit-details-marker, .kind-more > summary::-webkit-details-marker { display: none; }
.kind-group > summary::after, .kind-more > summary::after { content: "›"; color: var(--soft); font-size: 22px; line-height: 1; transition: transform .15s; }
.kind-group[open] > summary::after, .kind-more[open] > summary::after { transform: rotate(90deg); }
.kind-group > summary .soft { margin-left: auto; font-weight: 400; font-size: 15px; }
.kind-more > summary .soft { font-weight: 400; font-size: 14px; }
.kind-group .chips, .kind-more .chips { padding: 0 14px 14px; }
.kind-else-in { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.kind-form .chip[hidden], .kind-group[hidden] { display: none; }

/* A line priced by its unit: £40 an hour, times 3 hours. */
.per-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.per-row .money { flex: 1 1 150px; }
.per-count { width: 84px; flex: none; text-align: center; }
.per-word, .per-times { color: var(--soft); font-size: 16px; }

/* ---------- setup asks only the name (Mahdi, 2026-11-08) ----------
   The page's address beside it, held now and opened once approved; the rest can wait for the
   first invoice, with a card on the home page. */
.web-row { display: flex; align-items: stretch; }
.web-row input { flex: 1 1 auto; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.web-tail { display: flex; align-items: center; padding: 0 14px; border: 1px solid var(--line); border-left: 0; border-radius: 0 var(--r) var(--r) 0; background: var(--paper); color: var(--soft); font-size: 16px; white-space: nowrap; }
.web-said[data-state="free"] { color: var(--good); }
.web-said[data-state="bad"] { color: var(--danger); }
.finish { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: var(--r-card); background: var(--warn-soft); box-shadow: var(--e1); }
.finish-links { display: flex; flex-wrap: wrap; gap: 16px; font-weight: 600; }
.pe-wait { padding: 12px 14px; border-radius: var(--r-card); background: var(--warn-soft); color: var(--ink); font-size: 15px; }

/* ---------- a company's own page (name.goud.work) ---------- */
.pg { min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); --pg: #0E6B57; --pg-on: #fff; }
.pg.serif { font-family: Georgia, "Times New Roman", "Liberation Serif", serif; }
.pg-in { width: 100%; max-width: 980px; margin: 0 auto; padding: 0 16px; }
.pg-draft { background: var(--warn-soft); color: var(--warn); text-align: center; padding: 8px 16px; font-weight: 600; font-size: 15px; }
/* A sample page under /demo/ (SitePage.razor, Demos.cs): the address as a phone shows it, the
   wizard's "this is your page" strip, what the owner would hear, and the way to make one. */
.pg-demo-url { position: sticky; top: 0; z-index: 5; display: flex; text-decoration: none; align-items: center; justify-content: center; gap: 4px; padding: 8px 10px; background: #F2F1EF; color: #4B4945; font-size: 13px; font-weight: 600; }
.pg-demo-url .icon { color: #138A40; }
.pg-demo-keep { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; background: #FFF3EA; color: #3D1E06; border-bottom: 1px solid #F5CDB0; font-size: 15px; }
.pg-demo-acts { display: flex; align-items: center; gap: 14px; }
.pg-demo-keep .pg-btn { background: #FC630D; color: #0B0B0A; }
.pg-demo-change { color: #B23F00; font-weight: 600; }
.pg-demo-note { display: flex; flex-direction: column; gap: 2px; margin: 18px 0 6px; padding: 12px 14px; border-radius: 14px; background: #fff; color: #1C1C1A; text-align: left; box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 12px 30px -6px rgba(0,0,0,.3); }
.pg-demo-note > span:not(.pg-demo-note-top):not(.pg-demo-note-go) { color: #4B4945; }
.pg-demo-note-top { display: flex; align-items: center; gap: 6px; color: #6B6862; font-size: 12px; font-weight: 600; }
.pg-demo-dot { width: 14px; height: 14px; border-radius: 4px; background: #FC630D; }
.pg-demo-note-go { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; color: #B23F00; font-weight: 700; }
.pg-demo-make { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 28px; padding-top: 24px; padding-bottom: 24px; border-top: 1px solid var(--rule); }
.pg-demo-make b { font-size: 19px; }
.pg-demo-make .pg-btn { margin-top: 6px; background: #FC630D; color: #0B0B0A; }
.demo-make { min-height: 100vh; background: var(--paper); }
.demo-make-in { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 32px; }
.demo-make-top { display: flex; justify-content: space-between; align-items: center; }
.demo-make-back { color: var(--ink); font-weight: 600; text-decoration: none; }
.demo-make .q { margin: 8px 0 0; }
.demo-make .lead { margin: 0 0 6px; }
.demo-make .chip { min-height: 38px; font-size: 14px; }
.demo-make select { width: 100%; }
.pg-banner { background: var(--ink); color: var(--on-ink); text-align: center; padding: 10px 16px; font-weight: 600; font-size: 16px; }
.pg-head { color: var(--pg-on); background: var(--pg); padding: calc(28px + env(safe-area-inset-top, 0px)) 0 32px; }
.pg-head.cover { color: #fff; background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.65)), var(--cover) center / cover no-repeat, var(--pg); padding: calc(40px + env(safe-area-inset-top, 0px)) 0 40px; min-height: 340px; display: flex; align-items: flex-end; }
.pg-head-in { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.pg-brand { display: flex; align-items: center; gap: 12px; }
.pg-logo { height: 52px; max-width: 120px; object-fit: contain; background: #fff; border-radius: var(--r); padding: 4px; }
.pg-name { font-weight: 700; font-size: 19px; letter-spacing: .01em; }
/* On a phone the cover keeps the logo and name at its top and the headline and buttons at its foot,
   so the logo is not pushed down out of the first look (Mahdi, 2026-11-08: «در سایز موبایل لوگو از
   بالاتر باشه»). */
@media (max-width: 600px) {
  .pg-head.cover { align-items: stretch; min-height: 320px; padding-top: calc(16px + env(safe-area-inset-top, 0px)); padding-bottom: 28px; }
  .pg-head.cover .pg-head-in { width: 100%; }
  .pg-head.cover .pg-brand { margin-bottom: auto; padding-bottom: 24px; }
}
.pg-head h1 { font-size: clamp(30px, 7vw, 48px); margin: 0; max-width: 18em; }
.pg-light { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; padding: 6px 12px; border-radius: 99px; background: rgba(255,255,255,.92); color: #16202B; }
.pg-light i { width: 10px; height: 10px; border-radius: 50%; background: #1DA851; box-shadow: 0 0 0 4px rgba(29,168,81,.25); }
.pg-light.busy i { background: var(--warn); box-shadow: 0 0 0 4px rgba(165,90,0,.2); }
.pg-acts { display: flex; flex-wrap: wrap; gap: 10px; }
/* A booking page (SitePage.razor BookFirst, Mahdi 2026-11-13): the stars and lowest price up top, the next
   free times as one-tap chips, and prices that stand out. */
.pg-proof { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.pg-proof a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px; border-radius: 99px; background: rgba(255,255,255,.92); color: #16202B; text-decoration: none; font-size: 16px; }
.pg-proof .stars { letter-spacing: 0; font-size: 18px; }
.pg-next { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pg-next span { font-weight: 700; font-size: 15px; margin-right: 2px; }
.pg-next a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border-radius: 99px; border: 1px solid currentColor; color: inherit; text-decoration: none; font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.pg-next a:hover { background: rgba(255,255,255,.16); }
.book-first .pg-offers li { align-items: center; }
.book-first .pg-price { background: var(--pg); color: var(--pg-on); padding: 4px 14px; border-radius: 99px; font-size: 18px; }
.book-first .pg-score { font-size: 20px; }
.book-first .pg-score .stars { font-size: 22px; }
.pg-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 22px; border-radius: var(--r); border: 0; background: var(--pg); color: var(--pg-on); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; box-shadow: var(--e2); }
.pg-head .pg-btn { background: #fff; color: var(--pg-strong, var(--ink)); }
.pg-btn.ghost { background: transparent; color: var(--pg-text, var(--pg-strong)); border: 1px solid currentColor; box-shadow: none; }
.pg-head .pg-btn.ghost { color: inherit; }
.pg-btn.wide { width: 100%; }
.pg-btn:hover { filter: brightness(1.05); }
.pg-blocks { flex: 1; padding-bottom: 88px; }
.pg-block { padding-top: 32px; padding-bottom: 8px; display: flex; flex-direction: column; gap: 14px; }
.pg-block h2 { font-size: 24px; margin: 0; }
.pg-about { font-size: 19px; gap: 10px; }
.pg-offers { list-style: none; margin: 0; padding: 0; background: var(--sheet); border-radius: var(--r-card); box-shadow: var(--e1); overflow: hidden; }
.pg-offers li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 16px; align-items: baseline; }
.pg-offers li + li { border-top: 1px solid var(--rule); }
.pg-offers li > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.pg-offers .soft { font-size: 15px; }
.pg-price { font-weight: 700; color: var(--pg-text, var(--pg-strong)); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* The gallery as a slider (SitePage.razor, page.js): one at a time on a phone with the next showing at
   the edge, two on a wide screen; a swipe snaps to the next. */
.pg-slider { position: relative; }
.pg-shots { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; margin: -6px -6px 0; padding: 6px 6px 8px; }
.pg-shots::-webkit-scrollbar { display: none; }
.pg-shots figure { flex: 0 0 86%; scroll-snap-align: center; margin: 0; background: var(--sheet); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--e1); }
.pg-shots figure:only-child { flex-basis: 100%; }
@media (min-width: 720px) { .pg-shots figure { flex-basis: calc(50% - 6px); scroll-snap-align: start; } }
.pg-dots { display: flex; justify-content: center; gap: 2px; margin-top: 6px; }
.pg-dots[hidden] { display: none; }
.pg-dots button { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; }
.pg-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: var(--rule); transition: width .2s, background .2s; }
.pg-dots button.on::before { width: 20px; background: var(--pg); }
.pg-slide-go { position: absolute; top: calc(50% - 34px); z-index: 2; display: none; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; cursor: pointer; }
.pg-slide-go svg { width: 26px; height: 26px; fill: currentColor; }
.pg-slide-go.prev { left: 6px; }
.pg-slide-go.next { right: 6px; }
.pg-slide-go[disabled] { opacity: 0; pointer-events: none; }
@media (hover: hover) and (min-width: 720px) { .pg-slide-go { display: grid; } }
/* A before and after in the slider is pulled by its handle; the rest of the photo is the slider's to swipe. */
.compare:has(.compare-knob) input[type=range] { pointer-events: none; }
.compare-knob { position: absolute; top: 50%; left: var(--at); z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: #fff; color: #111; box-shadow: 0 2px 10px rgba(0,0,0,.4); cursor: ew-resize; touch-action: none; }
.compare-knob svg { width: 24px; height: 24px; fill: currentColor; }
.compare:has(input:focus-visible) .compare-knob { outline: 3px solid var(--pg); outline-offset: 2px; }
.pg-shots img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pg-shots figcaption { padding: 10px 14px; font-size: 15px; color: var(--soft); }
.compare { position: relative; --at: 50%; }
.compare img.before { position: absolute; inset: 0; height: 100%; clip-path: inset(0 calc(100% - var(--at)) 0 0); }
.compare::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--at); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 6px rgba(0,0,0,.4); pointer-events: none; }
.compare input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; padding: 0; min-height: 0; border: 0; }
.compare .tag { position: absolute; top: 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: rgba(0,0,0,.6); color: #fff; padding: 3px 8px; border-radius: 4px; pointer-events: none; }
.compare .tag.b { left: 10px; }
.compare .tag.a { right: 10px; }
.stars { color: #E8A317; letter-spacing: .08em; }
.pg-score { font-weight: 600; }
.pg-reviews { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.pg-reviews blockquote { margin: 0; padding: 16px; background: var(--sheet); border-radius: var(--r-card); box-shadow: var(--e1); display: flex; flex-direction: column; gap: 8px; }
.pg-reviews footer { color: var(--soft); font-size: 14px; }
.pg-link { color: var(--pg-text, var(--pg-strong)); font-weight: 600; }
.pg-cta { background: var(--pg-wash); border-radius: var(--r-card); padding: 24px 16px; margin-top: 32px; }
.pg-areas { font-weight: 600; }
.pg-areas-say { font-size: 18px; font-weight: 600; }
.pg-areas-all summary { cursor: pointer; color: var(--soft); }
.pg-areas-all .pg-areas { margin-top: 8px; font-weight: 400; }
.pg-check { display: flex; flex-direction: column; gap: 8px; max-width: 460px; }
.pg-check .pg-btn { min-height: 54px; }
.pg-answer { border-radius: var(--r); padding: 10px 14px; font-weight: 600; }
.pg-answer.yes { background: var(--good-soft); color: var(--good); }
.pg-answer.no { background: var(--warn-soft); color: var(--warn); }
.pg-badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.pg-badges li { display: flex; gap: 10px; align-items: flex-start; padding: 14px; background: var(--sheet); border-radius: var(--r-card); box-shadow: var(--e1); }
.pg-badges li > span { display: flex; flex-direction: column; }
.pg-badges .icon { color: var(--pg-text, var(--pg-strong)); flex-shrink: 0; margin-top: 2px; }
.pg-badges .soft { font-size: 15px; }
.pg-post { padding: 14px 16px; background: var(--sheet); border-radius: var(--r-card); box-shadow: var(--e1); display: flex; flex-direction: column; gap: 4px; }
.pg-post h3 { margin: 0; font-size: 19px; }
.pg-contact { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.pg-contact > * { display: flex; flex-direction: column; padding: 14px 16px; background: var(--sheet); border-radius: var(--r-card); box-shadow: var(--e1); color: var(--ink); text-decoration: none; }
.pg-contact a b { color: var(--pg-text, var(--pg-strong)); overflow-wrap: anywhere; }
.pg-hours { display: flex; flex-direction: column; gap: 4px; }
/* Social media (Mahdi, 2026-11-10): round buttons in Contact and small ones at the foot; the editor rows carry the same marks. */
.pg-follow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.pg-socials { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pg-social { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sheet); color: var(--pg-text, var(--pg-strong)); box-shadow: var(--e1); }
.pg-social:hover { background: var(--pg); color: var(--pg-on); }
.pg-socials.small .pg-social { width: 32px; height: 32px; background: rgba(255,255,255,.12); color: #fff; box-shadow: none; }
.social-form { gap: 8px; }
.social-row { display: flex; align-items: center; gap: 10px; }
.social-row input { flex: 1; min-width: 0; }
.social-mark { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: var(--wash, rgba(0,0,0,.05)); color: var(--ink); }
.pg-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--sheet) 94%, transparent); backdrop-filter: blur(8px); box-shadow: 0 -2px 8px rgba(0,0,0,.08); }
.pg-dock a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: var(--r); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; }
.pg-dock a.main { background: var(--pg); color: var(--pg-on); border-color: transparent; flex: 1.4; }
.pg-dock:empty { display: none; }
.pg-foot { background: var(--bar-work); color: rgba(255,255,255,.8); font-size: 14px; padding: 18px 0 calc(18px + env(safe-area-inset-bottom, 0px)); }
.pg-foot .pg-in { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pg-foot a { color: #fff; }
.pg-top { background: var(--pg); color: var(--pg-on); padding: calc(14px + env(safe-area-inset-top, 0px)) 0 14px; }
.pg-back { color: inherit; text-decoration: none; font-weight: 600; }
.pg-form-page { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; padding-bottom: 48px; max-width: 560px; flex: 1; }
.pg-form-page h1 { margin: 0; }
.pg-days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.pg-days a { display: flex; flex-direction: column; align-items: center; min-width: 62px; padding: 8px 6px; border-radius: var(--r); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 13px; }
.pg-days a b { font-size: 22px; }
.pg-days a.on { background: var(--pg); color: var(--pg-on); border-color: transparent; }
.pg-times { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pg-times legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.pg-stars { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.pg-stars legend { font-weight: 600; padding: 0; margin-bottom: 4px; }
.pg-stars label { display: flex; align-items: center; gap: 10px; font-size: 24px; color: #E8A317; margin: 0; }
.pg-stars input { width: 22px; height: 22px; min-height: 0; }
.pg-thanks { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; padding: 24px 0; }
.pg-none { max-width: 520px; margin: 0 auto; padding: 80px 16px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.check { display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--ink); }
.check input { width: 22px; height: 22px; min-height: 0; flex-shrink: 0; }
@media (min-width: 1024px) {
  .pg-dock { display: none; }
  .pg-blocks { padding-bottom: 48px; }
  .pg-head.cover { min-height: 440px; }
  .pg-block { padding-top: 48px; }
}

/* ---------- the owner's editor (goud.work/page) ---------- */
.pe-start { gap: 16px; padding-top: 12px; align-items: flex-start; }
.pe { max-width: 560px; margin: 0 auto; }
.pe-menu { gap: 12px; }
.pe-head { margin-bottom: 12px; }
.pe-addr { font-weight: 600; overflow-wrap: anywhere; }
.pe-state { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--sheet); border-radius: var(--r-card); box-shadow: var(--e1); }
.pe-state .btn { min-height: 44px; padding: 8px 18px; }
.pe-light { display: flex; flex-direction: column; gap: 4px; }
.switch.three-way { grid-template-columns: 1fr 1fr 1fr; }
.switch.three-way button { font-size: 14px; padding: 8px 4px; min-height: 44px; }
.pe-blocks { display: flex; flex-direction: column; background: var(--sheet); border-radius: var(--r-card); box-shadow: var(--e1); overflow: hidden; }
.pe-block { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; }
.pe-block + .pe-block { border-top: 1px solid var(--rule); }
.pe-block > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.pe-block.off b { color: var(--soft); }
.pe-block-acts { display: flex; gap: 6px; flex-shrink: 0; }
.pe-block-acts button { min-width: 44px; min-height: 44px; border-radius: var(--r); border: 1px solid var(--line); background: var(--sheet); font: inherit; font-weight: 600; cursor: pointer; color: var(--ink); }
.pe-block-acts button[disabled] { opacity: .3; cursor: default; }
.pe-block-acts .pe-turn { min-width: 58px; background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.pe-block.off .pe-turn { background: #ECEFF1; color: var(--soft); }
.looks.two { grid-template-columns: 1fr 1fr; }
.mini-cover { background: linear-gradient(180deg, #8a9aa8, #3d4a56) !important; }
.mini-cover i:first-child { background: #fff !important; }
.pe-cover { width: 100%; max-height: 180px; object-fit: cover; border-radius: var(--r); }
.pe-offers { display: flex; flex-direction: column; gap: 10px; }
.pe-offer { display: grid; grid-template-columns: minmax(0, 1fr) 116px 44px; gap: 6px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
/* The eye beside a row (ShowToggle.razor): open, the row is on the page; crossed, it is kept here only
   and the row fades. */
.pe-eye { position: relative; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; border-radius: 50%; color: var(--accent); cursor: pointer; }
.pe-eye:hover { background: var(--accent-soft); }
.pe-eye input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pe-eye svg { width: 24px; height: 24px; fill: currentColor; }
.pe-eye-off, .pe-eye:has(input:not(:checked)) .pe-eye-on { display: none; }
.pe-eye:has(input:not(:checked)) { color: var(--soft); }
.pe-eye:has(input:not(:checked)) .pe-eye-off { display: block; }
.pe-eye:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 1px; }
.pe-offer:has(.pe-eye input:not(:checked)) > input, .pe-offer:has(.pe-eye input:not(:checked)) > .money { opacity: .45; }
/* Where a business works (AreaPicker.razor): base, miles, then the districts as chips. Words only
   until the script has the districts. */
.area { display: flex; flex-direction: column; gap: 8px; }
.area-miles, .area-head, .area-chips, .area-add, .area-more { display: none; }
.area.live .area-miles, .area.live .area-head, .area.live .area-add { display: flex; }
.area.live .area-chips { display: flex; }
.area.live .area-more:not([hidden]) { display: block; align-self: flex-start; margin: 0; padding: 4px 0; }
.area.live > textarea, .area.live .area-words-label, .area.live .area-words-hint { display: none; }
.area-say { min-height: 0; color: var(--soft); }
.area-say:empty { display: none; }
.area-say.bad { color: var(--danger); }
.area-miles { align-items: center; gap: 14px; }
.area-miles input[type=range] { flex: 1; min-height: 44px; padding: 0; border: 0; background: none; box-shadow: none; accent-color: var(--accent); }
.area-miles output { flex: none; min-width: 74px; font-weight: 700; text-align: right; }
.area-head { align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 6px; }
.area-chip { gap: 6px; max-width: 100%; padding: 4px 4px 4px 12px; min-height: 38px; cursor: default; }
.area-chip b { flex: none; }
.area-chip .soft { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; font-size: 14px; max-width: 160px; }
.area-chip button { flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--soft); font: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.area-chip button:hover { background: var(--accent-soft); color: var(--ink); }
.area-add { gap: 8px; }
.area-add input { flex: 1; min-width: 0; }
.area-add input.bad { border-color: var(--danger); }
.area-add .btn { flex: none; margin: 0; }

/* A price in pounds in a row (PoundInput.razor): the £ in the box, the number at the row's size. */
.money.pound { min-width: 0; min-height: 54px; padding-left: 12px; }
.money.pound span { font-size: 18px; font-weight: 600; color: var(--soft); }
.money.pound input { min-width: 0; min-height: 0; padding: 13px 10px 13px 4px; font-size: 18px; background: transparent; box-shadow: none; }
.money.pound:hover { border-color: var(--line-hover); }
/* One card a service on the page's own list (Mahdi, 2026-11-09: «شکل فرم بد شده»): name, price and eye on
   top, the note a soft line inside the same card that looks like a field only when it is being written. */
.pe-offer:not(.wz-offer) { row-gap: 2px; padding: 8px 4px 4px 8px; border: 0; border-radius: var(--r-card); background: var(--sheet); box-shadow: var(--e1); }
.pe-offer .pe-note { grid-column: 1 / 3; min-height: 38px; padding: 6px 10px; border: 0; background: transparent; box-shadow: none; font-size: 15px; color: var(--soft); }
.pe-offer .pe-note:hover { background: var(--paper); }
.pe-offer .pe-note:focus { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent); }
.pe-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pe-shots figure { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.pe-shots img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.pe-shots figcaption { font-size: 14px; color: var(--soft); }
.pe-shots .link { padding: 4px 0; margin: 0; font-size: 15px; }
.pe-inbox { display: flex; flex-direction: column; gap: 12px; }
.pe-ask { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--sheet); border-radius: var(--r-card); box-shadow: var(--e1); }
.pe-ask.new { box-shadow: var(--e2), inset 4px 0 0 var(--warn); }
.pe-ask header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pe-when { font-weight: 600; color: var(--accent); }
.pe-text { white-space: pre-line; }
.pe-photos { display: flex; gap: 8px; flex-wrap: wrap; }
.pe-photos img { width: 84px; height: 84px; object-fit: cover; border-radius: var(--r); }
.pe-reach { display: flex; gap: 14px; flex-wrap: wrap; font-size: 16px; }
.pe-ask .row-btns-plain .btn { min-height: 44px; padding: 8px 16px; }
.pe-slug { display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r); background: var(--sheet); overflow: hidden; }
.pe-slug:focus-within { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pe-slug input { border: 0; box-shadow: none !important; min-width: 0; }
.pe-slug span { padding: 0 14px 0 0; color: var(--soft); white-space: nowrap; }
.pe-preview { display: none; }

/* The menu, laid out for a phone first: what visitors see, the way on, today, two tiles, three groups. */
.pe-state { flex-direction: column; align-items: stretch; gap: 10px; }
.pe-state-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* The first card with the page in it (PagePeek Bare): the phone on the left, the address and the
   switch beside it. */
.pe-state-top { display: flex; align-items: center; gap: 14px; }
.pe-state-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.pe-state-main .pe-state-row { flex-wrap: wrap; }
.wz-look.bare { flex: none; padding: 0; background: none; box-shadow: none; border-radius: 0; }
.wz-look.bare .pv-phone { width: 66px; height: 138px; }
.wz-look.bare .wz-look-go { position: absolute; right: -8px; bottom: -6px; width: 32px; height: 32px; box-shadow: var(--e2); }
.wz-look.bare .wz-look-go svg { width: 14px; height: 14px; }
/* The whole phone is the button's to tap: from the button's corner up and left over the phone. */
.wz-look.bare .wz-look-go::after { inset: -112px 0 0 -42px; border-radius: 0; }
.set-menu a.pe-addr { display: block; min-height: 0; padding: 0; font-size: 17px; color: var(--ink); }
.pe-state.live { box-shadow: var(--e1), inset 0 0 0 1px var(--accent-soft); }
.pe-state .pe-wait { padding: 10px 12px; font-size: 14px; }
.wz-bar { display: flex; gap: 4px; }
.wz-bar i { flex: 1; height: 6px; border-radius: 3px; background: var(--rule); }
.wz-bar i.past { background: var(--good); }
.wz-bar i.now { background: color-mix(in srgb, var(--brand) 45%, transparent); }
.set-menu a.pe-guide { display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-height: 0; padding: 14px 16px; border-radius: var(--r-card); background: var(--accent-soft); color: var(--ink); }
.set-menu a.pe-guide:hover { background: var(--accent-soft); filter: brightness(.98); }
.pe-guide-top, .pe-guide-next { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pe-guide-next > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.pe-guide-next .btn { min-height: 44px; padding: 8px 18px; flex-shrink: 0; }
.pe-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.set-menu a.pe-tile { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px; min-height: 0; padding: 12px 14px; background: var(--sheet); border-radius: var(--r-card); box-shadow: var(--e1); }
.set-menu a.pe-tile .soft { white-space: normal; font-size: 14px; }
.pe-tile-head { display: flex; align-items: center; gap: 6px; width: 100%; }
/* .set-menu a > span:first-child stacks its first span; these first spans are rows. */
.set-menu a.pe-guide > .pe-guide-top, .set-menu a.pe-tile > .pe-tile-head { flex-direction: row; align-items: center; text-align: start; }
.set-menu a.pe-guide, .set-menu a.pe-tile { text-align: start; }
.pe-elsewhere { display: flex; justify-content: center; gap: 4px 20px; flex-wrap: wrap; padding: 8px 0 4px; }
.set-menu .pe-elsewhere a { display: inline-block; min-height: 0; padding: 8px 4px; font-weight: 600; color: var(--soft); }
.set-menu .pe-elsewhere a:hover { background: none; color: var(--ink); }
@media (max-width: 1023px) {
  .bar.on-desk nav > a { display: none; }
}
@media (min-width: 1024px) {
  .pe-elsewhere { display: none; }
}
.pe-tile-head .icon { width: 20px; height: 20px; color: var(--accent); }
.pe-count { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--warn); color: #fff; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.pe-tile.fresh { box-shadow: var(--e2), inset 0 3px 0 var(--warn); }
.pe-groups { display: flex; flex-direction: column; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-card); overflow: hidden; margin-top: -6px; }
.pe-group + .pe-group { border-top: 1px solid var(--rule); }
.pe-group summary { display: flex; align-items: center; gap: 14px; padding: 14px 16px; min-height: 72px; cursor: pointer; list-style: none; }
.pe-group summary::-webkit-details-marker { display: none; }
.pe-group summary b { color: var(--ink); }
.pe-group summary > .pe-g-words { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pe-group summary .soft { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-group .chev { transition: transform .2s; }
.pe-group[open] > summary .chev { transform: rotate(90deg); }
.pe-group[open] > summary { background: var(--paper); }
.set-menu .pe-group ul { border: 0; border-radius: 0; background: transparent; box-shadow: none; border-top: 1px solid var(--rule); }
.set-menu .pe-group a { padding-left: 28px; min-height: 60px; }

/* The first steps: one thing at a time, a bar of how far, a small look at the page, Next at the thumb. */
.wz { gap: 12px; }
.wz-head { display: flex; flex-direction: column; gap: 8px; }
.wz-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wz-later { font-weight: 600; text-decoration: none; padding: 8px 0; }
.wz h2 { margin-top: 4px; }
.wz-lead { margin: -8px 0 0; }
/* The page as a button: a small phone with the page in it, opened big by a tap anywhere on the card.
   No z-index or transform on the card, so the phone grown out of it stands over everything. */
.wz-look { position: relative; display: flex; align-items: center; gap: 16px; padding: 12px 16px 12px 12px; border-radius: var(--r-card); background: var(--sheet); box-shadow: var(--e1); }
.wz-look .pv-phone { flex: none; width: 60px; height: 126px; }
.wz-look .pv-phone:not(.floating) iframe { pointer-events: none; }
.wz-look-words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wz-look-words b { font-size: 17px; }
.wz-look-go { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--bar-work); color: #fff; cursor: pointer; }
.wz-look-go svg { width: 18px; height: 18px; fill: currentColor; }
.wz-look-go::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.wz-look:has(.wz-look-go:focus-visible) { outline: 3px solid var(--bar-work); outline-offset: 2px; }
/* A phone with its country (PhoneInput.razor, page.js): the flag and code show, the list of countries
   is the select laid over them, so a tap opens the phone's own list. */
.tel { display: flex; gap: 8px; }
.tel-cc { position: relative; flex: none; display: flex; }
.tel-cc-show { display: flex; align-items: center; gap: 6px; padding: 0 30px 0 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--sheet); color: var(--ink); font-size: 17px; font-weight: 600; white-space: nowrap; }
.tel-cc-show::after { content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; border: solid var(--soft); border-width: 0 2px 2px 0; transform: translateY(-70%) rotate(45deg); }
.tel-flag { font-size: 20px; line-height: 1; }
.tel-cc select { position: absolute; inset: 0; width: 100%; min-height: 0; padding: 0; opacity: 0; cursor: pointer; }
.tel-cc:hover .tel-cc-show { border-color: var(--line-hover); }
.tel-cc:has(select:focus) .tel-cc-show { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tel input { flex: 1; min-width: 0; }
.tel input.bad, .tel input.bad:focus { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.tel-say { min-height: 0; margin-top: -2px; color: var(--danger); }
.tel-say:empty { display: none; }

/* Opening hours picked (HoursPicker.razor, page.js): a usual week in one tap, then a day a row. Words
   only until the script has read them; words again when they are written by hand. */
.hrs { display: flex; flex-direction: column; gap: 10px; }
.hrs-quick, .hrs-days, .hrs-mode { display: none; }
.hrs.live .hrs-quick, .hrs.live .hrs-mode { display: flex; }
.hrs.live .hrs-mode { align-self: flex-start; margin: 0; padding: 4px 0; }
.hrs.live .hrs-days { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hrs.live > textarea { display: none; }
.hrs.live.writing > textarea { display: block; }
.hrs.live.writing .hrs-quick, .hrs.live.writing .hrs-days { display: none; }
.hrs-quick .chip { min-height: 38px; padding: 6px 12px; font-size: 14px; }
.hrs-day { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.hrs-day .chip { justify-content: center; padding: 7px 4px; }
.hrs-day select { width: 100%; min-width: 0; min-height: 42px; padding-top: 6px; padding-bottom: 6px; }
.hrs-shut { grid-column: 2 / -1; }
.hrs-day:not(.open) select, .hrs-day:not(.open) .hrs-to, .hrs-day.open .hrs-shut { display: none; }
.hrs-same { display: none; grid-column: 2 / -1; justify-self: start; margin: -2px 0 2px; padding: 2px 0; font-size: 14px; }
.hrs-day.open.fresh .hrs-same { display: block; }
.wz-form { gap: 10px; }
.wz-form > .btn { align-self: stretch; }
.wz-offer { grid-template-columns: minmax(0, 1fr) 116px 44px; padding-bottom: 0; border-bottom: 0; }
.wz-cover, .wz-slots { display: none; }
.wz-form:has(input[name=head][value=Cover]:checked) .wz-cover { display: flex; }
.wz-form:has(input[name=slots]:checked) .wz-slots { display: flex; padding: 12px; border-radius: var(--r-card); background: var(--paper); }
.wz-actions { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--rule); }
.wz-actions-go { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.wz-actions .link { margin: 0; padding: 10px 4px; font-weight: 600; text-decoration: none; }
.wz-actions .btn.big { min-width: 120px; }
.wz-list { list-style: none; margin: 0; padding: 0; background: var(--sheet); border-radius: var(--r-card); box-shadow: var(--e1); overflow: hidden; }
.wz-list li + li { border-top: 1px solid var(--rule); }
.wz-list a { display: flex; align-items: center; gap: 14px; padding: 12px 16px; color: var(--ink); text-decoration: none; }
.wz-list a > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.wz-list .soft { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wz-tick { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; background: var(--rule); color: var(--soft); }
.wz-list .past .wz-tick { background: var(--good); color: #fff; }
.wz-actions-end .btn.big { flex: 1; }
@media (min-width: 1024px) {
  .wz-look, .pe-said { display: none; }
  .wz-actions { margin: 8px 0 0; padding: 14px 0; }
}
@media (min-width: 1024px) {
  .pe { max-width: 1440px; display: grid; grid-template-columns: 280px minmax(0, 1fr) 390px; gap: 32px; align-items: start; }
  .pe-head { grid-column: 1 / -1; margin: 0 0 -16px; }
  .pe.at-menu .set-part, .pe.at-part .set-menu { display: flex; }
  .pe .set-menu { position: sticky; top: 88px; }
  .pe .set-menu a.on { background: var(--brand-soft); box-shadow: inset 4px 0 0 var(--brand); }
  .pe .set-back { display: none; }
  .pe-preview { display: flex; flex-direction: column; align-items: center; gap: 8px; position: sticky; top: 88px; }
  .pe-phone { width: 390px; height: min(780px, calc(100vh - 140px)); border-radius: 28px; padding: 10px; background: var(--bar-work); box-shadow: var(--e8); }
  .pe-phone iframe { width: 100%; height: 100%; border: 0; border-radius: 20px; background: #fff; }
}
@media (max-width: 1023px) {
  .pe.at-menu .set-part, .pe.at-part .set-menu { display: none; }
  .pe.at-part > .pe-head { display: none; } /* a part on a phone has its own way back */
}

/* ---------- printing the QR code ---------- */
.print-shell { gap: 20px; }
.print-tools { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.print-pick { width: min(100%, 400px); }
.print-pick a { display: grid; place-items: center; text-decoration: none; font-weight: 700; border-radius: 11px; padding: 12px; color: var(--soft); min-height: 48px; }
.print-pick a.on { background: var(--sheet); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.print-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(85mm, 1fr)); gap: 6mm; }
.print-card { width: 85mm; height: 55mm; background: #fff; border: 1px dashed #c9ced4; border-radius: 3mm; padding: 4.5mm 4.5mm 4.5mm 5mm; display: flex; gap: 4mm; align-items: stretch; color: #16202B; overflow: hidden; }
.pc-words { flex: 1; display: flex; flex-direction: column; gap: 1.6mm; font-size: 3.1mm; min-width: 0; padding-top: 1mm; }
.pc-words b { font-size: 4.6mm; line-height: 1.15; font-weight: 800; }
.pc-words b::after { content: ""; display: block; width: 9mm; height: .9mm; border-radius: .45mm; background: var(--pg); margin-top: 2mm; }
.pc-line { color: #5C6876; font-size: 2.9mm; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pc-foot { margin-top: auto; display: flex; flex-direction: column; gap: .6mm; font-size: 3mm; }
.pc-at { font-weight: 700; color: var(--pg); overflow-wrap: anywhere; }

/* The frame round the code: a white tile edged in the business colour, the tag under it. */
.qr-frame { display: flex; flex-direction: column; background: #fff; border: .55mm solid var(--pg); border-radius: 3mm; overflow: hidden; flex-shrink: 0; }
.qr-art { padding: 1mm; }
.qr-art svg { width: 100%; height: auto; display: block; }
.qr-tag { display: flex; align-items: center; justify-content: center; gap: 1mm; background: var(--pg); color: #fff; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 2.6mm; padding: 1mm 0 1.2mm; line-height: 1; }
.qr-scan { width: 1.25em; height: 1.25em; flex-shrink: 0; }
.pc-frame { width: 31mm; align-self: center; }

.print-poster { width: min(100%, 210mm); aspect-ratio: 210 / 297; background: #fff; color: #16202B; border: 1px solid #ccc; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5mm; padding: 14mm 16mm; text-align: center; border-top: 10mm solid var(--pg); }
.pp-name { font-size: clamp(24px, 6vw, 13mm); font-weight: 800; line-height: 1.1; }
.pp-line { font-size: clamp(16px, 3vw, 6.5mm); color: #5C6876; max-width: 150mm; }
.pp-frame { width: 64%; border-width: clamp(3px, .9vw, 1.6mm); border-radius: clamp(14px, 3.5vw, 7mm); margin: 3mm 0; }
.pp-frame .qr-art { padding: 3%; }
.pp-frame .qr-tag { font-size: clamp(18px, 4.4vw, 9mm); gap: .4em; padding: .45em 0 .55em; letter-spacing: .1em; }
.pp-do { font-size: clamp(16px, 3.2vw, 7mm); font-weight: 700; max-width: 160mm; }
.pp-at { font-size: clamp(16px, 3.4vw, 7.5mm); color: var(--pg); font-weight: 800; overflow-wrap: anywhere; }
.pp-phone { font-size: clamp(16px, 3vw, 7mm); }
@media print {
  .bar, .print-tools, .made { display: none !important; }
  body { background: #fff; }
  .page { padding: 0; }
  .print-card { break-inside: avoid; }
  .print-poster { width: 210mm; height: 297mm; border: 0; border-top: 10mm solid var(--pg); aspect-ratio: auto; }
  .qr-frame, .qr-tag, .print-poster, .pc-words b::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @page { size: A4; margin: 8mm; }
}

/* ---------- reminders on an invoice ---------- */
.reminders { display: flex; flex-direction: column; gap: 6px; }
.rem-line { display: flex; align-items: center; gap: 6px; font-size: 16px; }
.rem-line .icon { color: var(--accent); flex-shrink: 0; }
.reminders .link { padding: 4px 0; }

/* ---------- the not found page ---------- */
.nf { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 32px 16px; background: radial-gradient(circle at 50% 0%, #E3F1EC 0%, var(--paper) 60%); }
.nf-logo img { height: 56px; width: auto; display: block; }
.nf-card { width: min(100%, 520px); background: var(--sheet); border-radius: var(--r-card); box-shadow: var(--e4); padding: 36px 28px; display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; }
.nf-code { font-size: clamp(64px, 18vw, 96px); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--accent); opacity: .18; }
.nf-404 { display: inline-flex; align-items: center; gap: .06em; font-size: clamp(72px, 22vw, 112px); font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.nf-404 .nf-oct { width: .74em; height: .74em; color: #FC630D; margin: 0 .04em; }
.nf-dot { display: inline-flex; color: #FC630D; }
.nf-dot .nf-oct { width: 72px; height: 72px; }
.nf-dot.waiting .nf-oct { animation: nf-breathe 2.4s ease-in-out infinite; }
@keyframes nf-breathe { 50% { transform: scale(.88); opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .nf-dot.waiting .nf-oct { animation: none; } }
.nf-card h1 { margin: 0; font-size: 26px; }
.claim-addr { font-size: clamp(20px, 6vw, 28px); font-weight: 600; color: var(--soft); word-break: break-all; }
.claim-addr b { color: var(--ink); font-weight: 800; }
.claim-free { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: #E6F4EA; color: #1E6B3A; font-size: 14px; font-weight: 700; }
html[data-theme=dark] .claim-free { background: #183A26; color: #9BE0B4; }
.claim-form { width: 100%; text-align: left; margin-top: 4px; }
.nf-acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }
.nf-foot { color: var(--soft); font-size: 14px; text-align: center; }
.nf-foot a { color: var(--ink); font-weight: 600; text-decoration: none; }

/* ---------- the panel at admin.goud.work (Mahdi, 2026-11-07) ----------
   For the people who run goud.work, on a laptop first: wider sheets, tables and small facts.
   The bar carries an orange "panel" tag so nobody takes it for goud.work itself. */
.panel-bar nav { align-items: center; flex-wrap: wrap; }
.panel-bar nav a.on { color: #fff; font-weight: 600; }
.panel-tag { margin-inline-start: 10px; padding: 2px 8px; border-radius: 6px; background: #FC630D; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.panel-out { display: inline; margin: 0; }
.panel-out button { background: none; border: 0; color: rgba(255,255,255,.7); font: inherit; font-size: 16px; cursor: pointer; padding: 0; }
.panel-out button:hover { color: #fff; }
.page.panel { font-size: 16px; }
.sheet.panel-wide { max-width: 1100px; }
.panel h1 { font-size: 26px; }
.panel-card { background: var(--sheet); border-radius: var(--r-card); box-shadow: var(--e1); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.panel-card h3 { font-size: 16px; margin: 6px 0 0; }
.panel-danger { border-inline-start: 4px solid var(--danger); }
.panel-card > .btn, .panel-card > form > .btn { align-self: flex-start; }
.panel-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.panel-tiles div { background: var(--sheet); border-radius: var(--r-card); box-shadow: var(--e1); padding: 16px 18px; display: flex; flex-direction: column; }
.panel-tiles b { font-size: 34px; line-height: 1.1; }
.panel-tiles span { font-weight: 600; }
.panel-tiles small { color: var(--soft); font-size: 13px; }
.panel-facts { display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: 6px 18px; margin: 0; }
.panel-facts dt { color: var(--soft); }
.panel-facts dd { margin: 0; overflow-wrap: anywhere; }
.panel-warn { color: var(--danger); font-weight: 600; }
.panel-table { width: 100%; border-collapse: collapse; background: var(--sheet); border-radius: var(--r-card); box-shadow: var(--e1); overflow: hidden; }
.panel-table th, .panel-table td { text-align: start; padding: 9px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.panel-table th { font-size: 13px; color: var(--soft); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; background: #FAFBFC; }
.panel-table tr:last-child td { border-bottom: 0; }
.panel-pill { display: inline-block; margin-inline-start: 6px; padding: 1px 8px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; }
.panel-pill.warn { background: var(--warn-soft); color: var(--warn); }
.panel-search, .panel-inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.panel-search input[type=search] { flex: 1 1 280px; }
.panel-inline input:not([type=date]) { flex: 1 1 200px; min-width: 0; }
.panel-inline .btn, .panel-search .btn { min-height: 44px; padding: 0 16px; }
.panel input, .panel select, .panel textarea { font-size: 16px; }
.panel-row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; padding: 8px 0; border-top: 1px solid var(--rule); }
.panel-list { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 6px; }
.panel-notes { list-style: none; padding: 0; }
.panel-notes li { display: flex; flex-direction: column; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.panel-notes li:last-child { border-bottom: 0; }
.panel-bars { display: flex; align-items: flex-end; gap: 6px; height: 160px; padding-top: 8px; }
.panel-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; position: relative; gap: 2px; }
.panel-bar small { font-size: 11px; color: var(--soft); text-align: center; white-space: nowrap; overflow: hidden; }
.panel-bar-sent { display: block; background: var(--accent); border-radius: 3px 3px 0 0; max-height: 75%; }
.panel-bar-joined { display: block; background: #FC630D; border-radius: 3px 3px 0 0; max-height: 25%; }
.panel-key-sent, .panel-key-joined { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--accent); margin: 0 4px 0 10px; }
.panel-key-joined { background: #FC630D; }
.panel-steps { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 4px; }
.panel-qr { width: 220px; height: 220px; margin: 4px auto; background: #fff; padding: 8px; border-radius: var(--r); box-shadow: var(--e1); }
.panel-qr svg { width: 100%; height: 100%; display: block; }
.panel-key { font-size: 15px; letter-spacing: .06em; word-break: break-all; }
.notes-said { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.notes-said li { display: flex; flex-direction: column; padding: 10px 12px; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r); }
@media (max-width: 720px) {
  .panel-table thead { display: none; }
  .panel-table, .panel-table tbody, .panel-table tr, .panel-table td { display: block; width: 100%; }
  .panel-table tr { border-bottom: 1px solid var(--rule); padding: 6px 0; }
  .panel-table td { border: 0; padding: 3px 12px; }
  .panel-facts { grid-template-columns: 1fr; gap: 0 0; }
  .panel-facts dd { margin-bottom: 8px; }
}
/* ---------- Your data and the privacy policy: long reading pages ---------- */
.doc { gap: 28px; line-height: 1.6; }
.doc h1 { font-size: 32px; }
.doc h2 { font-size: 21px; margin-bottom: 6px; scroll-margin-top: 80px; }
.doc p { margin: 0 0 10px; }
.doc ul, .doc ol { margin: 0 0 10px; padding-inline-start: 22px; }
.doc li { margin-bottom: 6px; }
.doc .lead { font-size: 17px; }
.doc-honest { background: var(--accent-soft); border-radius: var(--r); padding: 16px 18px; }
.doc-promises { list-style: none; padding: 0; display: grid; gap: 10px; }
.doc-promises li { border-inline-start: 4px solid var(--accent); padding: 2px 0 2px 12px; margin: 0; }
.doc-toc { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px; }
.doc-toc ol { margin: 0; columns: 2 220px; }
.doc-toc li { margin-bottom: 4px; break-inside: avoid; }
.doc-list { margin: 0 0 10px; }
.doc-list dt { font-weight: 600; margin-top: 12px; }
.doc-list dd { margin: 2px 0 0; }
.doc-list dd .soft { display: block; font-size: 14px; margin-top: 2px; }
/* The About page's company details (Pages/About.razor, 2026-11-14): a name and its value on one line, stacked on a phone. */
.about-list > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 2px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.about-list dt { margin: 0; color: var(--soft); }
.about-list dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .about-list > div { grid-template-columns: minmax(0, 1fr); } }
.doc-terms li { margin-bottom: 10px; }
.doc-foot { border-top: 1px solid var(--line); padding-top: 14px; }
.doc-foot p { margin: 0 0 4px; }

/* The data part of the account: four plain facts above Download and Delete. */
.data-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.data-facts li { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); }
.data-facts b { font-size: 14px; }
.data-facts span { color: var(--soft); }
.yours { margin-top: 18px; }

/* ---------- visits (Mahdi, 2026-11-08): the panel's Visits page and a page owner's Visitors part draw the same view ---------- */
.vv { display: flex; flex-direction: column; gap: 16px; }
.vv-span { display: inline-flex; gap: 4px; padding: 4px; background: var(--sheet); border-radius: 999px; box-shadow: var(--e1); align-self: flex-start; }
.vv-span a { padding: 6px 14px; border-radius: 999px; color: var(--soft); text-decoration: none; font-size: 15px; font-weight: 600; }
.vv-span a.on { background: var(--ink); color: var(--on-ink); }
.vv-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.vv-tiles div { background: var(--sheet); border-radius: var(--r-card); box-shadow: var(--e1); padding: 14px 16px; display: flex; flex-direction: column; }
.vv-tiles b { font-size: 30px; line-height: 1.1; }
.vv-tiles span { font-weight: 600; }
.vv-tiles small { color: var(--soft); font-size: 13px; }
.vv-bars { display: flex; align-items: flex-end; gap: 3px; height: 150px; padding: 12px 12px 0; background: var(--sheet); border-radius: var(--r-card); box-shadow: var(--e1); }
.vv-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-width: 0; }
.vv-bar span { display: block; background: var(--accent); border-radius: 3px 3px 0 0; max-height: calc(100% - 22px); }
.vv-bar small { font-size: 10px; color: var(--soft); text-align: center; white-space: nowrap; overflow: hidden; height: 16px; }
.vv-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.vv-lists section { background: var(--sheet); border-radius: var(--r-card); box-shadow: var(--e1); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.vv-lists h3 { font-size: 15px; margin: 0; }
.vv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vv-list li { position: relative; display: flex; justify-content: space-between; gap: 8px; padding: 4px 8px; font-size: 15px; z-index: 0; }
.vv-name { overflow-wrap: anywhere; }
.vv-count { white-space: nowrap; font-weight: 600; }
.vv-count small { color: var(--soft); font-weight: 400; }
.vv-fill { position: absolute; inset: 0 auto 0 0; background: var(--accent-soft); border-radius: 4px; z-index: -1; }
.funnel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.funnel li { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 12px; border-radius: var(--r); z-index: 0; }
.funnel b { font-size: 22px; min-width: 2.5ch; }
.funnel small { flex-basis: 100%; }
.funnel-bar { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, #FC630D 18%, transparent); border-radius: var(--r); z-index: -1; }
.panel-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
/* In a narrow place (the page editor's middle column, a phone) the view tightens itself. */
.vv { container-type: inline-size; }
.vv-span a { white-space: nowrap; }
@container (max-width: 520px) {
  .vv-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .vv-tiles div { padding: 10px 12px; }
  .vv-tiles b { font-size: 24px; }
  .vv-tiles small { display: none; }
  .vv-bar small { display: none; }
  .vv-bars { height: 110px; padding-bottom: 8px; }
  .vv-lists { grid-template-columns: 1fr; }
  .vv-span a { padding: 6px 10px; font-size: 14px; }
}
/* Bring someone: the link to copy or send, and the coupons it earned. */
.bring-link { display: grid; gap: 10px; margin: 6px 0 18px; }
.bring-link input { font-size: 17px; font-weight: 600; }
.coupon-row > span:first-child { color: var(--accent); font-weight: 700; }
.coupon-row.on { background: var(--brand-soft); }
.invited { margin: 0 0 10px; padding: 10px 12px; border-radius: var(--r); background: #FFF1E8; color: #8A3300; font-weight: 600; }

/* ---------- light or dark (Mahdi, 2026-11-08) ----------
   The head script in App.razor puts data-theme on <html>: the device's own look, unless the switch
   (Parts/ThemeSwitch.razor) picked the other one. Dark is the same page with the grounds turned
   down: cards a step lighter than the page instead of shadows, the ledger green brighter with dark
   words on it, and goud.work's own black and white pages turned round. The invoice stays a white
   sheet of paper, as it prints and as the customer's PDF shows it. */
html[data-theme=dark] {
  --paper: #0F1215;
  --sheet: #191D22;
  --ink: #E8ECF0;
  --on-ink: #0F1215;
  --soft: #9AA5B1;
  --rule: #2C333B;
  --accent: #F4F1EC;
  --accent-ink: #0B0B0A;
  --accent-soft: #262B32;
  --accent-dark: #FFFFFF;
  --good: #3DBE98; --good-ink: #062A20; --good-soft: #14332B; --good-dark: #62D2B0;
  --brand-soft: #33200F;
  --warn: #F0A54A;
  --warn-soft: #36270F;
  --danger: #FF7B6F;
  --doc-accent: #93B4DE;
  --doc-band: #1C2734;
  --brand: #FC630D;
  --brand-ink: #FF9A5C;
  --brand-soft: #33200F;
  --line: rgba(255, 255, 255, .2);
  --line-hover: rgba(255, 255, 255, .7);
  --e1: 0 0 0 1px rgba(255,255,255,.05), 0 1px 3px rgba(0,0,0,.5);
  --e2: 0 0 0 1px rgba(255,255,255,.06), 0 2px 6px rgba(0,0,0,.55);
  --e4: 0 0 0 1px rgba(255,255,255,.07), 0 4px 12px rgba(0,0,0,.6);
  --e8: 0 0 0 1px rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.65);
  color-scheme: dark;
}

/* The invoice, the QR prints and the look picker's small sheets are paper: light in both looks. */
html[data-theme=dark] :is(.paper, .print-card, .print-poster) {
  --paper: #F5F6F7; --sheet: #FFFFFF; --ink: #16202B; --on-ink: #FFFFFF; --soft: #5C6876; --rule: #DDE2E8;
  --accent: #0B0B0A; --accent-ink: #FFFFFF; --accent-soft: #E9ECEF; --accent-dark: #2B2B29;
  --good: #0E6B57; --good-ink: #FFFFFF; --good-soft: #E3F1EC; --good-dark: #0A5545; --brand-ink: #B23F00; --brand-soft: #FFF0E6;
  --doc-accent: #1F3A5F; --doc-band: #EEF2F7; --line: rgba(0,0,0,.23); --line-hover: rgba(0,0,0,.87);
  --e1: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
  color-scheme: light;
}

/* The logo comes in black for light grounds and white for dark ones. */
img.on-dark { display: none !important; }
html[data-theme=dark] img.on-light { display: none !important; }
html[data-theme=dark] img.on-dark { display: block !important; }

/* The switch: an icon in a bar, an icon and a word in a page's foot. Hidden with no script. */
.theme-switch { display: none; align-items: center; justify-content: center; gap: 6px; min-width: 36px; min-height: 36px; padding: 0 8px; border-radius: 99px; border: 1px solid transparent; background: none; color: inherit; font: inherit; font-size: inherit; font-weight: 500; cursor: pointer; vertical-align: middle; }
html[data-theme] .theme-switch { display: inline-flex; }
.theme-switch:hover { border-color: currentColor; }
.theme-switch svg { flex: none; }
.theme-switch .ts-sun, html[data-theme=dark] .theme-switch .ts-moon { display: none; }
html[data-theme=dark] .theme-switch .ts-sun { display: inline; }
.theme-switch.with-words { min-height: 28px; padding: 0 8px 0 4px; color: var(--soft); }
.theme-switch.with-words svg { width: 16px; height: 16px; }
.bar .theme-switch { color: rgba(255,255,255,.82); }
.bar .theme-switch:hover { color: #fff; }
.front-foot .theme-switch, .pg-foot .theme-switch { color: #fff; }
.made .theme-switch { margin-inline-start: 6px; }

/* ---------- dark: what the tokens alone do not reach ---------- */
html[data-theme=dark] body { background: var(--paper); }
html[data-theme=dark] .bar { background: #103A30; box-shadow: 0 1px 0 rgba(255,255,255,.08); }
html[data-theme=dark] .bar.work { background: var(--bar-work); }
html[data-theme=dark] .switch { background: #23282E; }
html[data-theme=dark] :is(.switch button.on, .print-pick a.on) { background: #39414B; box-shadow: none; }
html[data-theme=dark] .pill { background: #262C33; }
html[data-theme=dark] .pill.viewed { background: #1A2A45; color: #9CBDF0; }
html[data-theme=dark] .pill.expired { background: #23272C; color: #8A939C; }
html[data-theme=dark] :is(.list a, .set-menu a, .row-link):hover { background: rgba(255,255,255,.05); }
html[data-theme=dark] .btn.danger:hover { background: #FF9A90; }
html[data-theme=dark] .btn.wa.quiet:hover { background: rgba(29,168,81,.15); }
html[data-theme=dark] :is(.service.soon .service-icon, .gw .service.soon .service-icon, .pe-block.off .pe-turn, .mock-tag) { background: #262C33; }
html[data-theme=dark] .mock-tag.good { background: var(--good-soft); color: var(--good); }
html[data-theme=dark] .panel-table th { background: #1F242A; }
html[data-theme=dark] .invited { background: #33200F; color: #FFB98F; }
html[data-theme=dark] .nf { background: radial-gradient(circle at 50% 0%, #14332B 0%, var(--paper) 60%); }
html[data-theme=dark] .found .pick { background: var(--sheet); }

/* goud.work's own pages, black and white like the logo, turn round: white buttons with black words. */
html[data-theme=dark] :is(.front.gw, .door-page) { --accent: #F4F1EC; --accent-dark: #FFFFFF; --accent-ink: #0B0B0A; --accent-soft: #33200F; --brand-ink: #FF9A5C; --brand-soft: #33200F; }
html[data-theme=dark] .one-page { background: linear-gradient(170deg, #2A170A 0%, #14161A 35%, #0F1215 100%); }

/* The household side has colours of its own (Mahdi, 2026-11-08: «صفحه بیزنز و هوزهلد با هم متفاوت
   باشه», his pick the home colours): the business stays orange on black, the household is a warm
   olive green on cream, in its word, its tiles, its sorted bar and its ground. The colours turn over
   slowly when the word in the headline is tapped. The goud.work mark on the logo keeps its orange. */
@property --brand { syntax: '<color>'; inherits: true; initial-value: #FC630D; }
@property --brand-ink { syntax: '<color>'; inherits: true; initial-value: #B23F00; }
@property --brand-soft { syntax: '<color>'; inherits: true; initial-value: #FFF0E6; }
.front.gw { transition: --brand .5s ease, --brand-ink .5s ease, --brand-soft .5s ease; }
.front.gw:has(#door-home:checked) { --brand: #5E8C3A; --brand-ink: #3F6B26; --brand-soft: #EAF2E0; --accent-soft: #EAF2E0; }
html[data-theme=dark] .front.gw:has(#door-home:checked) { --brand: #8DBF5E; --brand-ink: #A8D27E; --brand-soft: #1E2A14; --accent-soft: #1E2A14; }
.one { position: relative; isolation: isolate; }
.one-page::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .6s ease; background: linear-gradient(170deg, #E9F1DC 0%, #F7F7EF 35%, #FFFFFF 100%); }
html[data-theme=dark] .one-page::before { background: linear-gradient(170deg, #17240E 0%, #14161A 35%, #0F1215 100%); }
.one-page.gw:has(#door-home:checked)::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .front.gw, .one-page::before { transition: none; } }
html[data-theme=dark] .phone { border-color: rgba(255,255,255,.08); }
html[data-theme=dark] .phone-top .soon-tag { background: rgba(0,0,0,.08); color: #B23F00; }
html[data-theme=dark] .door-side { background: #0B0B0A; border-inline-end: 1px solid rgba(255,255,255,.06); }
html[data-theme=dark] :is(.door-form input:focus, .digit:focus) { border-color: var(--brand); }
html[data-theme=dark] { --gl-ink: #F4F1EC; --gl-soft: #47423C; }

/* A business's own page: its colour stays, its words in that colour get lighter to read on dark. */
/* A dark accent (a barber's slate) would sink into the dark cards: the price pill takes the light page colour. */
html[data-theme=dark] .book-first .pg-price { background: var(--pg-text); color: #11161C; }
html[data-theme=dark] .pg { --pg-text: color-mix(in oklab, var(--pg) 55%, #FFFFFF); --pg-wash: color-mix(in srgb, var(--pg) 16%, var(--sheet)) !important; }
html[data-theme=dark] .pg-dock { box-shadow: 0 -1px 0 rgba(255,255,255,.08); }

/* ---------- the bridge (2026-11-08): keeping a copy, the home book, one thread a job ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.keep, .talk-box, .after-box { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.keep .btn { align-self: stretch; }
.talk { display: flex; flex-direction: column; gap: 8px; }
.talk-empty { margin: 0; }
.talk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; }
.talk-msg { display: flex; flex-direction: column; gap: 2px; max-width: 85%; padding: 8px 12px; border-radius: 14px; background: var(--paper); border: 1px solid var(--rule); }
.talk-msg.mine { align-self: flex-end; background: var(--brand-soft); border-color: transparent; }
.talk-who { font-size: 13px; color: var(--soft); }
.talk-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.talk-form textarea { width: 100%; }
.talk-form .btn { align-self: flex-end; }
.paper .note.after div + div { margin-top: 2px; }
.after-box span b { margin-right: 6px; }
.home h2 { margin: 28px 0 10px; font-size: 20px; }
.home .list a { display: flex; }
.home .row-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.home .row-main .soft { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home .row-end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.due-day { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 10px; background: var(--paper); border: 1px solid var(--rule); line-height: 1.1; flex: none; }
.due-day b { font-size: 20px; }
.due-day span { font-size: 12px; text-transform: uppercase; color: var(--soft); }
.due-day.soon { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.due-day.soon span { color: var(--warn); }
.due-day.past { opacity: .6; }
.known { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.known-card { display: flex; flex-direction: column; gap: 10px; }
.known-head { display: flex; flex-direction: column; }
.known-ways { display: flex; flex-wrap: wrap; gap: 8px; }
.known-ways .btn { flex: 1 1 auto; }
.pill.new { background: var(--brand); color: #0B0B0A; }
@media (min-width: 720px) { .known { grid-template-columns: 1fr 1fr; } }
html[data-theme=dark] .talk-msg.mine { background: var(--brand-soft); }
html[data-theme=dark] .pill.new { background: var(--brand); color: #0B0B0A; }

/* The invoice demo (MainLayout.razor, DemoBooks.cs), mostly seen in the front page's phone: one short
   row of a bar (Mahdi, 2026-11-08: «طراحی در سایز کوچک مناسب باشه هدر خیلی بزرگه»), no company chip
   or theme switch, and one small line saying the business is made up. */
.bar.demo { flex-wrap: nowrap; gap: 10px; padding: calc(9px + env(safe-area-inset-top, 0px)) 14px 9px; box-shadow: none; }
.bar.demo .mark { font-size: 16px; gap: 7px; white-space: nowrap; }
.bar.demo .mark .dot { width: 11px; height: 11px; border-radius: 3px; }
.bar.demo .mark-name small { display: none; }
.bar.demo nav { gap: 12px; font-size: 14px; }
.demo-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0 auto; padding: 7px 16px 0; max-width: 640px; font-size: 12px; line-height: 1.3; color: var(--soft); text-align: center; }
.demo-note .dot { flex: none; width: 6px; height: 6px; border-radius: 2px; background: #FC630D; }
.page:has(> .demo-note) { padding-top: 0; }
.demo-note + * { margin-top: 12px; }

/* Google and Apple on the front page (Landing.razor): side by side, each brand's own look, and email a
   small link under them. On a narrow phone only the brand's name shows beside its logo. */
.one-ways { display: flex; gap: 8px; }
.one-ways .btn { flex: 1 1 0; min-width: 0; gap: 10px; white-space: nowrap; overflow: hidden; }
/* The words give way before the logo does: a name too long for its button is cut with an ellipsis,
   never pushed out past the edge (Mahdi, 2026-11-08: «لوگو گوگل و اپل نزنه بیرون»). */
.one-ways .btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.way-logo { flex: none; width: 22px; height: 22px; }
.way-google { background: #fff; color: #1F1F1F; box-shadow: inset 0 0 0 1px #DADCE0; }
.way-google:hover { background: #F8F9FA; }
.way-apple { background: #000; color: #fff; }
.way-apple:hover { background: #1A1A1A; }
html[data-theme=dark] .way-apple { background: #fff; color: #000; }
@media (prefers-color-scheme: dark) { html:not([data-theme=light]) .way-apple { background: #fff; color: #000; } }
.way-long { display: none; }
.one-email { align-self: center; min-height: 32px; display: inline-flex; align-items: center; color: var(--soft); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.one-email:hover { color: var(--ink); }
/* "Continue with Google" beside its logo needs about 250px a button, so the long words wait for a
   screen of 560px; at 440 (an iPhone Pro Max) they spilled out of both buttons. */
@media (min-width: 560px) { .way-long { display: inline; } .one-ways .btn { font-size: 17px; } }
.one-email { white-space: nowrap; }
@media (min-width: 1024px) {
  .one-buttons:has(> .one-ways) { flex-direction: column; align-items: flex-start; gap: 6px; }
  .one-ways .btn { flex: 0 0 auto; padding-inline: 24px; }
  .one-buttons:has(> .one-ways) .one-email { align-self: flex-start; padding-left: 6px; }
}

/* Email on the front page itself (EmailDoor.razor): a small link that opens an email field, then the
   code in the same place. */
.email-door { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; max-width: 420px; margin: 0 auto; }
.email-door > summary { list-style: none; cursor: pointer; min-height: 32px; display: inline-flex; align-items: center; color: var(--soft); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.email-door > summary::-webkit-details-marker { display: none; }
.email-door > summary:hover { color: var(--ink); }
.email-door[open] > summary { display: none; }
.email-door-form { display: flex; gap: 8px; width: 100%; }
.email-door-form input:not([type=hidden]) { flex: 1 1 auto; min-width: 0; min-height: 48px; margin: 0; }
.email-door-form .btn { flex: none; min-height: 48px; padding-inline: 18px; }
.email-door-sent { margin: 0; color: var(--soft); font-size: 13px; }
.email-door-sent a { color: var(--ink); }
.email-door .said { width: 100%; margin: 0; }
@media (min-width: 1024px) { .email-door { align-self: flex-start; align-items: flex-start; margin: 0; } }

/* The wizard's other kinds (DemoMake.razor): a list that opens in the page, rows like the chips. */
.kind-more { border: 2px solid var(--rule); border-radius: 14px; background: var(--sheet); }
.kind-more:has(input:checked) { border-color: var(--brand); }
.kind-more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 8px 14px; font-weight: 600; font-size: 15px; }
.kind-more > summary::-webkit-details-marker { display: none; }
.kind-more > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.kind-more[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.kind-list { max-height: 220px; overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 8px; border-top: 1px solid var(--rule); }
.kind-group { display: flex; flex-direction: column; padding-top: 8px; }
.kind-group > b { padding: 4px 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--soft); }
.kind-row { position: relative; display: flex; align-items: center; min-height: 40px; margin: 0; padding: 6px 10px; border-radius: 10px; font-size: 15px; cursor: pointer; }
.kind-row:hover { background: var(--paper); }
.kind-row:has(input:checked) { background: var(--brand-soft); font-weight: 700; }
.kind-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kind-row:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: -3px; }

/* ---------- Claude's help (Help.cs): logo ideas, the page's words, sorting photos, one line to invoice lines ---------- */
.lm { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--rule); border-radius: var(--r-card); background: var(--paper); margin: 0 0 16px; }
.lm .stack { gap: 8px; }
.lm-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.lm-ask { margin: 0; }
.lm-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; margin: 0; }
.lm-picks[hidden] { display: none; }
.lm-pick { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; color: #1C1C1A; cursor: pointer; font: inherit; font-weight: 600; }
.lm-pick img { width: 100%; height: auto; aspect-ratio: 1; display: block; }
.lm-pick:hover, .lm-pick:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.lm-pick.on { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand); }
.lm-pick:disabled { opacity: .45; cursor: default; }
.lm-prompt summary { cursor: pointer; font-weight: 600; }
.lm-prompt textarea { width: 100%; font-size: 14px; margin: 6px 0; }
.lm-words { display: block; }
.lm-words > summary { display: flex; flex-direction: column; gap: 2px; cursor: pointer; list-style: none; }
.lm-words > summary::-webkit-details-marker { display: none; }
.lm-words > summary::after { content: "Open ›"; font-size: 13px; color: var(--soft); }
.lm-words[open] > summary::after { content: ""; }
.lm-words form { margin-top: 10px; }
.lm-row { display: flex; gap: 8px; flex-wrap: wrap; }
.lm-row input { flex: 1 1 220px; min-width: 0; }
.wz-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.wz-logo img { width: 64px; height: 64px; object-fit: contain; border: 1px solid var(--rule); border-radius: 10px; padding: 4px; background: #fff; }

/* ---------- Easy Invoice without a bar (Mahdi, 2026-11-08) ----------
   No top menu: the home carries the company, the money, the papers by tabs and the rest of the
   service as cards; the four steps carry their own stepper and the practice guide. */
.ei-page { padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
.ei-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
.ei-mark { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; color: var(--soft); }
.ei-mark .dot { width: 12px; height: 12px; border-radius: 4px; background: var(--accent); }
.ei-co { display: inline-flex; align-items: center; gap: 2px; max-width: 60%; padding: 8px 14px; border-radius: 99px; background: var(--sheet); box-shadow: var(--e1); color: var(--ink); font-weight: 600; font-size: 16px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.ei-co:hover { box-shadow: var(--e4); }

/* The practice offer, and the practice waiting. */
.offer-card { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: start; padding: 16px; border-radius: var(--r-card); background: var(--accent-soft); box-shadow: var(--e1); }
.offer-card > .icon { color: var(--accent); margin-top: 2px; }
.offer-card > div:not(.offer-acts) { display: flex; flex-direction: column; gap: 2px; }
.offer-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 6px; }
.offer-acts .btn { min-height: 48px; }
.offer-acts .link { padding: 8px 4px; }

/* Finish setting up: what is done is ticked, what is left is a link. */
.finish-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-weight: 600; }
.finish-list li { display: flex; align-items: center; gap: 6px; }
.finish-list a { display: inline-flex; align-items: center; gap: 6px; }
.finish-list li.is-done { color: var(--soft); font-weight: 400; }
.finish-list li.is-done .icon { color: var(--good); }

/* The money: three tiles, each a filter. */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 14px; border-radius: var(--r-card); background: var(--sheet); box-shadow: var(--e1); color: var(--ink); text-decoration: none; border: 2px solid transparent; }
.tile:hover { box-shadow: var(--e4); }
.tile.on { border-color: var(--brand); }
.tile-name { font-size: 14px; color: var(--soft); font-weight: 600; }
.tile-sum { font-size: 24px; line-height: 1.2; overflow-wrap: anywhere; }
.tile.late { background: var(--warn-soft); }
.tile.late .tile-sum { color: var(--warn); }
.tile.paid .tile-sum { color: var(--good); }
@media (max-width: 560px) {
  .tiles { grid-template-columns: 1fr 1fr; }
  .tiles .tile:first-child { grid-column: 1 / -1; }
  .tile-sum { font-size: 21px; }
}

/* The papers by tabs, scrolling sideways on a phone. */
.tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 6px 14px; border-radius: 99px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 16px; font-weight: 500; }
.tabs a:hover { border-color: var(--line-hover); }
.tabs a.on { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.tab-n { font-size: 13px; color: var(--soft); font-weight: 600; }
.tabs a.on .tab-n { color: inherit; opacity: .75; }
@media (min-width: 720px) { .tabs { margin: 0; padding: 2px 0; flex-wrap: wrap; } }
.pill.practice { background: var(--accent-soft); color: var(--accent); }

/* No invoices yet: the four steps, so the first one is no surprise. */
.ei-how { list-style: none; margin: 10px auto 0; padding: 0; display: flex; flex-direction: column; gap: 8px; text-align: left; color: var(--ink); }
.ei-how li { display: flex; align-items: center; gap: 12px; }
.ei-how li > span { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 15px; }
.first-steps .ei-how { width: fit-content; }

/* The rest of the service, as cards. */
.more-cards { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 8px; }
@media (min-width: 560px) { .more-cards { grid-template-columns: 1fr 1fr; } }
.more-cards > a, .more-cards > button { display: flex; align-items: center; gap: 14px; padding: 14px 16px; min-height: 72px; border-radius: var(--r-card); background: var(--sheet); box-shadow: var(--e1); border: 0; color: var(--ink); text-decoration: none; font: inherit; text-align: left; cursor: pointer; }
.more-cards > a:hover, .more-cards > button:hover { box-shadow: var(--e4); }
.more-cards .icon { flex: none; color: var(--accent); }
.more-cards span { display: flex; flex-direction: column; }
.ei-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; border-top: 1px solid var(--rule); }

/* The four steps: where you are, each answered step a link back to it. */
.steps .back { display: inline-flex; align-items: center; gap: 4px; }
.steps-out { margin-left: auto; font-size: 15px; color: var(--soft); text-decoration: none; font-weight: 600; }
.steps-out:hover { color: var(--ink); text-decoration: underline; }
.stepper { list-style: none; margin: 8px 0 14px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.stepper li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--soft); font-size: 13px; font-weight: 600; }
.stepper li > a { display: flex; flex-direction: column; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
.stepper li::before { content: ""; position: absolute; top: 15px; right: 50%; width: calc(100% + 4px); height: 2px; background: var(--rule); }
.stepper li:first-child::before { display: none; }
.stepper li.is-done::before { background: var(--good); }
.stepper li.now::before { background: var(--brand); }
.st-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--sheet); border: 2px solid var(--rule); color: var(--soft); font-size: 14px; font-weight: 700; }
.stepper li.is-done .st-dot { background: var(--good); border-color: var(--good); color: var(--good-ink); }
.stepper li.now .st-dot { border-color: var(--brand); color: var(--ink); box-shadow: 0 0 0 4px var(--brand-soft); }
.stepper li.now { color: var(--ink); }
.stepper li > a:hover { color: var(--ink); }
.stepper li > a:hover .st-dot { border-color: var(--accent); }
.so-far { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 10px; font-size: 15px; color: var(--soft); }
.so-far a { color: var(--ink); font-weight: 600; text-decoration-color: var(--rule); text-underline-offset: 3px; }
@media (min-width: 1024px) { .so-far { display: none; } } /* the paper is beside the form there */

/* The practice guide beside a step. */
.coach { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: var(--r-card); background: var(--accent-soft); border-left: 4px solid var(--brand); }
.coach p { line-height: 1.45; }
.coach-tag { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }

/* The practice's last screen. */
.practice-done { display: flex; flex-direction: column; gap: 14px; }
.done-tick { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--good); color: var(--good-ink); }
.ei-how.real { margin: 0; gap: 12px; }
.ei-how.real li { align-items: flex-start; }
.set-home { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px; text-decoration: none; font-weight: 600; }

/* ---------- Expenses (Mahdi, 2026-11-08) ----------
   One tap to the camera: the big round button is the page. What Claude was unsure of is orange
   until the person saves. The month by kind is a list with a bar, the biggest first. */
.ex-dot { background: var(--gl-hot) !important; }
.ex-snap { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 0 4px; }
.ex-cam { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 188px; height: 188px; margin: 0; border-radius: 50%; background: var(--ink); color: var(--on-ink); text-align: center; cursor: pointer; box-shadow: 0 0 0 10px color-mix(in srgb, var(--gl-hot) 18%, transparent), var(--e4); transition: transform .15s, box-shadow .15s; }
.ex-cam:hover { transform: scale(1.02); }
.ex-cam:active { transform: scale(.98); }
.ex-cam .icon { color: var(--gl-hot); }
.ex-cam b { font-size: 20px; }
.ex-cam .small { color: inherit; opacity: .75; font-weight: 400; }
.ex-snap:has(input:focus-visible) .ex-cam { outline: 3px solid var(--accent); outline-offset: 6px; }
.ex-go { display: none; }
.ex-snap:has(input:valid) .ex-go { display: inline-flex; }
html.ex-reading .ex-go { display: none; }
html.ex-reading .ex-cam { pointer-events: none; animation: ex-pulse 1.2s ease-in-out infinite; }
.ex-busy { display: none; }
html.ex-reading .ex-cam > b, html.ex-reading .ex-cam > .small { display: none; }
html.ex-reading .ex-busy { display: block; font-weight: 700; font-size: 18px; }
@keyframes ex-pulse { 50% { box-shadow: 0 0 0 18px color-mix(in srgb, var(--gl-hot) 10%, transparent), var(--e4); } }
@media (prefers-reduced-motion: reduce) { html.ex-reading .ex-cam { animation: none; } }
.ex-pick { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin: 0; text-align: center; font-weight: 600; }
.ex-home .twin .btn { font-size: 18px; padding-inline: 10px; }
.ex-left { text-align: center; }
.ex-h { margin: 8px 0 0; font-size: 18px; }
.ex-sent { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 16px; }
.ex-sent .who { flex: 1 1 180px; }
.ex-sent form { margin-left: auto; }
.ex-sent .btn { min-height: 44px; }
.ex-month { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.ex-month b { font-size: 20px; }
.ex-month a, .ex-month > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; text-decoration: none; font-size: 26px; color: var(--ink); }
.ex-month a:hover { background: var(--sheet); box-shadow: var(--e1); }
.ex-tiles { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) { .ex-tiles .tile:first-child:last-child { grid-column: 1 / -1; } .ex-tiles .tile:first-child { grid-column: auto; } }
.ex-kinds-sum { list-style: none; margin: 0; padding: 2px 2px 4px; display: flex; flex-direction: column; gap: 12px; }
.ex-kinds-sum li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; }
.ex-k-name { min-width: 0; }
.ex-bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--paper); overflow: hidden; }
.ex-bar i { display: block; height: 100%; border-radius: 3px; background: var(--gl-hot); }

/* ---------- Tax pot (Mahdi, 2026-11-11) ----------
   One big percent at the top, then what is set aside and what is still to move, every payment with
   its share and an "I moved it" tick, and the dates like a calendar page. */
.tx-dot { background: var(--gl-hot) !important; }
.tx-top { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 18px 16px; text-align: center; border-radius: var(--r-card); background: var(--ink); color: var(--on-ink); box-shadow: var(--e2); }
.tx-top .tile-name { opacity: .8; }
.tx-top .soft { color: inherit; opacity: .75; }
.tx-percent { font-size: 56px; line-height: 1.05; color: var(--gl-hot); font-variant-numeric: tabular-nums; }
.tx-tiles { grid-template-columns: repeat(2, 1fr); }
.tx-owe { border-color: var(--gl-hot); }
.tx-list li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 14px; padding: 12px 16px; }
.tx-list .who { min-width: 0; }
.tx-share { display: flex; flex-direction: column; align-items: flex-end; }
.tx-tick-form { grid-column: 1 / -1; margin: 0; }
.tx-drop-form { grid-column: 1 / -1; margin: -4px 0 0; justify-self: start; }
.tx-tick { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 14px 6px 8px; border: 2px solid var(--rule); border-radius: 22px; background: var(--paper); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.tx-tick:hover { border-color: var(--ink); }
.tx-box { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--soft); background: var(--sheet); }
.tx-tick.on { border-color: var(--gl-hot); background: color-mix(in srgb, var(--gl-hot) 12%, var(--sheet)); }
.tx-tick.on .tx-box { border-color: var(--gl-hot); background: var(--gl-hot); color: #fff; }
.tx-pay.tx-moved .amount { color: var(--soft); text-decoration: line-through; }
.tx-add summary, .tx-how summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-weight: 600; }
.tx-add[open] summary { margin-bottom: 10px; }
.tx-how { padding: 0 2px; }
.tx-rows { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; margin: 8px 0; padding: 14px 16px; background: var(--sheet); border-radius: var(--r-card); box-shadow: var(--e1); }
.tx-rows dt { color: var(--soft); }
.tx-rows dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.tx-free { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.tx-dates li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 14px; padding: 12px 16px; }
.tx-dates .who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tx-cal { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 52px; height: 56px; border-radius: 10px; background: var(--paper); border-top: 6px solid var(--ink); line-height: 1.1; }
.tx-cal b { font-size: 22px; }
.tx-cal span { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--soft); }
.tx-dates li.soon .tx-cal { border-top-color: var(--gl-hot); }
.tx-dates .amount { white-space: nowrap; }
.tx-dates .who b, .tx-dates .who span, .tx-list .who span { white-space: normal; overflow: visible; text-overflow: clip; }
@media (max-width: 420px) { .tx-dates li { grid-template-columns: auto 1fr; } .tx-dates .amount { grid-column: 2; } }
.tx-pick { border: 0; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.tx-pick legend { font-weight: 600; margin-bottom: 6px; }
.tx-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 400; }
.tx-check input { width: 22px; height: 22px; }
.tx-label { font-weight: 600; }
.tx-setup:has(#tx-ltd:checked) .tx-sole, .tx-setup:not(:has(#tx-ltd:checked)) .tx-ltd { display: none; }
.tx-setup:not(:has(#tx-flat:checked)) .tx-flat { display: none; }

/* ---------- Jobs and diary (Mahdi, 2026-11-11) ----------
   The week on a strip of seven days, one day's jobs under it on a phone and the whole week in
   columns on a laptop. A job is a card with its time, who and what, and its stage; a page booking
   waiting for a yes is pale and dashed. A person on the team has a colour down the card's edge. */
.jb-dot { background: var(--gl-hot) !important; }
.jb-home { --p0: var(--rule); --p1: #FC630D; --p2: #2B7BD3; --p3: #2E9E5B; --p4: #9A4FD0; --p5: #C9417C; }
.jb-warn { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-card); background: var(--warn-soft); color: var(--ink); text-decoration: none; border-inline-start: 4px solid var(--gl-hot); }
.jb-warn .icon { color: var(--gl-hot); flex: none; }
.jb-warn > span { display: flex; flex-direction: column; }
.jb-warn.over { border-inline-start-color: var(--danger); }
.jb-week { display: grid; grid-template-columns: 36px repeat(7, 1fr) 36px; gap: 4px; align-items: stretch; }
.jb-arrow { display: grid; place-items: center; border-radius: 10px; color: var(--ink); text-decoration: none; }
.jb-arrow:hover { background: var(--sheet); box-shadow: var(--e1); }
.jb-day { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 64px; padding: 6px 0; border-radius: 12px; color: var(--ink); text-decoration: none; background: var(--sheet); border: 1px solid var(--rule); }
.jb-day span { font-size: 12px; color: var(--soft); text-transform: uppercase; letter-spacing: .04em; }
.jb-day b { font-size: 20px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.jb-day.today b { color: var(--gl-hot); }
.jb-day.on { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.jb-day.on span { color: inherit; opacity: .75; }
.jb-dots { display: flex; gap: 3px; height: 6px; font-style: normal; }
.jb-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--gl-hot); }
.jb-today { align-self: center; }
.jb-cols { display: flex; flex-direction: column; gap: 10px; }
.jb-col { display: none; flex-direction: column; gap: 8px; }
.jb-col.on { display: flex; }
.jb-col h3 { margin: 4px 0 0; font-size: 17px; }
.jb-col h3 a { color: inherit; text-decoration: none; }
.jb-col h3 .soft { font-weight: 400; }
.jb-free { margin: 0; padding: 14px; text-align: center; border: 2px dashed var(--rule); border-radius: var(--r-card); }
@media (min-width: 1024px) {
  .jb-home:not(.jb-one) { max-width: 1200px; }
  .jb-cols { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: start; }
  .jb-col { display: flex; }
  .jb-col h3 { font-size: 14px; }
  .jb-col.today h3 { color: var(--gl-hot); }
  .jb-col .jb-job-in { grid-template-columns: 1fr; gap: 4px; padding: 10px; }
  .jb-col .jb-right { flex-direction: row; justify-content: space-between; align-items: center; }
  .jb-col .jb-free { padding: 10px 4px; font-size: 13px; }
}
.jb-job { background: var(--sheet); border: 1px solid var(--rule); border-inline-start: 5px solid var(--p0); border-radius: var(--r-card); overflow: hidden; }
.jb-job.p1 { border-inline-start-color: var(--p1); }
.jb-job.p2 { border-inline-start-color: var(--p2); }
.jb-job.p3 { border-inline-start-color: var(--p3); }
.jb-job.p4 { border-inline-start-color: var(--p4); }
.jb-job.p5 { border-inline-start-color: var(--p5); }
.jb-job.held { border-style: dashed; background: color-mix(in srgb, var(--gl-hot) 6%, var(--sheet)); }
.jb-job-in { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; color: var(--ink); text-decoration: none; }
.jb-job-in:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.jb-job .who b, .jb-job .who span { white-space: normal; overflow: visible; }
.jb-time { display: flex; flex-direction: column; min-width: 48px; font-variant-numeric: tabular-nums; }
.jb-time span { font-weight: 700; }
.jb-time .soft { font-weight: 400; font-size: 14px; }
.jb-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.jb-tag { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--paper); color: var(--soft); white-space: nowrap; }
.s-booked .jb-tag { background: color-mix(in srgb, var(--p2) 14%, var(--sheet)); color: var(--ink); }
.s-done .jb-tag { background: var(--warn-soft); color: var(--warn); }
.s-invoiced .jb-tag { background: color-mix(in srgb, var(--gl-hot) 16%, var(--sheet)); color: var(--ink); }
.s-paid .jb-tag { background: color-mix(in srgb, var(--p3) 16%, var(--sheet)); color: var(--ink); }
.jb-job.held .jb-tag { background: var(--gl-hot); color: #fff; }
.jb-yesno { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 12px; }
.jb-yesno form { margin: 0; }
.jb-next .jb-yesno { padding: 0; }
.jb-new { margin-top: 4px; }
.jb-links { display: flex; flex-wrap: wrap; gap: 8px; }
.jb-links .btn { flex: 1 1 160px; }
.jb-back { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; }
.jb-title { margin: 0; font-size: 26px; line-height: 1.2; }
.jb-sub { margin: -6px 0 0; color: var(--soft); }
.jb-track { list-style: none; margin: 4px 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
.jb-track li { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--soft); position: relative; text-align: center; }
.jb-track li::before { content: ""; position: absolute; top: 8px; left: -50%; width: 100%; height: 3px; background: var(--rule); z-index: 0; }
.jb-track li:first-child::before { display: none; }
.jb-track i { position: relative; z-index: 1; width: 18px; height: 18px; border-radius: 50%; background: var(--sheet); border: 3px solid var(--rule); }
.jb-track li.past i { background: var(--ink); border-color: var(--ink); }
.jb-track li.past::before, .jb-track li.on::before { background: var(--ink); }
.jb-track li.on i { background: var(--gl-hot); border-color: var(--gl-hot); box-shadow: 0 0 0 5px color-mix(in srgb, var(--gl-hot) 20%, transparent); }
.jb-track li.on { color: var(--ink); font-weight: 700; }
.jb-next { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.jb-next form { margin: 0; }
.jb-undo { align-self: flex-start; }
.jb-card { display: flex; flex-direction: column; gap: 8px; }
.jb-rows { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; padding: 14px 16px; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-card); }
.jb-rows dt { color: var(--soft); }
.jb-rows dd { margin: 0; overflow-wrap: anywhere; }
.jb-rows dd a { display: inline-flex; align-items: center; gap: 4px; }
.jb-note { white-space: pre-line; }
.jb-map { margin-inline-start: 6px; min-height: 32px; padding: 2px 10px; }
.jb-pdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-inline-end: 6px; background: var(--p0); }
.jb-pdot.p1 { background: var(--p1); }
.jb-pdot.p2 { background: var(--p2); }
.jb-pdot.p3 { background: var(--p3); }
.jb-pdot.p4 { background: var(--p4); }
.jb-pdot.p5 { background: var(--p5); }
.jb-edit summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; color: var(--accent); }
.jb-edit[open] summary { margin-bottom: 8px; }
.jb-photos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.jb-photos li { position: relative; display: flex; flex-direction: column; gap: 4px; }
.jb-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--paper); }
.jb-photos form { margin: 0; }
.jb-ba { position: absolute; top: 6px; left: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.65); color: #fff; font-size: 12px; font-weight: 600; }
.jb-snap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.jb-snap label.btn { cursor: pointer; margin: 0; }
.jb-ba-pick { display: flex; gap: 14px; }
.jb-ba-pick label { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; }
.jb-money { grid-template-columns: repeat(3, 1fr); }
.jb-drop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.jb-drop p { flex: 1 1 100%; margin: 0; }
.jb-stages { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.jb-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 14px; border-radius: 999px; border: 1px solid var(--rule); background: var(--sheet); color: var(--ink); text-decoration: none; white-space: nowrap; font-weight: 600; }
.jb-chip span { color: var(--soft); font-weight: 400; }
.jb-chip.on { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.jb-chip.on span { color: inherit; opacity: .75; }
.jb-line { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 12px 16px; color: var(--ink); text-decoration: none; }
.jb-line .amount { grid-column: 2; grid-row: 1; }
.jb-mini { grid-column: 1 / -1; display: flex; align-items: center; gap: 4px; font-size: 13px; }
.jb-mini i { width: 18px; height: 5px; border-radius: 3px; background: var(--rule); }
.jb-mini i.on { background: var(--gl-hot); }
.jb-mini b { margin-inline-start: 6px; font-weight: 600; color: var(--soft); }
.jb-set summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-weight: 600; }
.jb-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.jb-renewals li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 14px; padding: 12px 16px; }
.jb-renewals .who b, .jb-renewals .who span { white-space: normal; }
.jb-renewals li.soon .tx-cal { border-top-color: var(--gl-hot); }
.jb-renewals li.over .tx-cal { border-top-color: var(--danger); }
.jb-renewals li.over .who > .soft:first-of-type { color: var(--danger); font-weight: 600; }
@media (max-width: 420px) {
  .jb-renewals li { grid-template-columns: auto 1fr; }
  .jb-renewals li .btn { grid-column: 2; justify-self: start; }
  .jb-week { grid-template-columns: 26px repeat(7, 1fr) 26px; gap: 2px; }
}
.jb-ask { display: flex; flex-direction: column; gap: 12px; }
.jb-ask h1 { margin: 0; }

/* Check it */
.ex-photo { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; }
.ex-photo img { max-height: 280px; max-width: 100%; border-radius: var(--r-card); box-shadow: var(--e2); background: #fff; }
.ex-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ex-two .stack { gap: 8px; min-width: 0; }
.ex-check label.unsure, .ex-kinds.unsure legend { color: var(--warn); }
.ex-check input.unsure { border-color: var(--warn); background: var(--warn-soft); box-shadow: inset 0 0 0 1px var(--warn); }
.ex-kinds { border: 0; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 6px; }
@media (min-width: 480px) { .ex-kinds { grid-template-columns: 1fr 1fr; } }
.ex-kinds legend { font-weight: 500; font-size: 16px; color: var(--soft); margin-bottom: 6px; padding: 0; }
.ex-kind { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--sheet); cursor: pointer; color: var(--ink); }
.ex-kind:hover { border-color: var(--line-hover); }
.ex-kind:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: var(--brand-soft); }
.ex-kind input { width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.ex-kind > span { display: flex; flex-direction: column; min-width: 0; }
.ex-kind b { font-weight: 600; font-size: 16px; }
.ex-kind .small { font-size: 13px; line-height: 1.3; }
.ex-drop { display: flex; flex-direction: column; gap: 8px; }

/* ---------- Shopping list (Mahdi, 2026-11-09) ----------
   One list a home, in the order a shop is walked. The whole row is the tick: a big target for a
   thumb with a basket in the other hand. What is in the trolley sinks under the list, struck
   through, with who put it there. */
.shop-dot { background: var(--gl-hot) !important; }
.shop-add { display: flex; gap: 8px; margin-top: 4px; }
.shop-add input { flex: 1; min-width: 0; font-size: 19px; }
.shop-add .btn { flex: none; width: 56px; padding: 0; }
.shop-hint { display: flex; align-items: center; gap: 6px; margin: 6px 2px 0; }
.shop-hint .icon { flex: none; color: var(--gl-hot); }
#shop-live { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.shop-again { display: flex; flex-direction: column; gap: 6px; }
.shop-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.shop-chip { flex: none; min-height: 42px; padding: 6px 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--sheet); color: var(--ink); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.shop-chip:hover { border-color: var(--line-hover); }
.shop-list { display: flex; flex-direction: column; gap: 6px; }
.shop-aisle { margin: 10px 2px 0; font-size: 15px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--soft); }
.shop-items { list-style: none; margin: 0; padding: 0; background: var(--sheet); border-radius: var(--r-card); box-shadow: var(--e1); }
.shop-items li { position: relative; display: flex; align-items: center; transition: opacity .2s; }
.shop-items li + li { border-top: 1px solid var(--rule); }
.shop-items li.going { opacity: .45; }
.shop-tick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 10px 6px 10px 16px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.shop-box { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; border: 2px solid var(--line); color: var(--good-ink); }
.shop-tick:hover .shop-box { border-color: var(--accent); }
.shop-tick.on .shop-box { background: var(--good); border-color: var(--good); }
.shop-name { flex: 1; min-width: 0; font-size: 19px; font-weight: 500; overflow-wrap: anywhere; }
.shop-qty { margin-left: 8px; padding: 1px 8px; border-radius: 99px; background: var(--paper); font-size: 15px; font-weight: 700; color: var(--ink); }
.shop-by { flex: none; max-width: 30%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-items.in .shop-name { text-decoration: line-through; color: var(--soft); }
.shop-more { flex: none; }
.shop-more > summary { list-style: none; display: grid; place-items: center; width: 48px; height: 58px; cursor: pointer; color: var(--soft); font-size: 22px; font-weight: 700; }
.shop-more > summary::-webkit-details-marker { display: none; }
.shop-more[open] > summary { color: var(--ink); }
.shop-menu { position: absolute; right: 8px; top: calc(100% - 6px); z-index: 5; display: flex; flex-direction: column; gap: 8px; width: min(280px, calc(100vw - 48px)); padding: 12px; border-radius: var(--r-card); background: var(--sheet); box-shadow: var(--e8); }
.shop-menu select { min-height: 46px; }
.shop-menu .btn { min-height: 44px; }
.shop-menu .link { padding: 6px 0; text-align: left; }
.shop-done { margin-top: 8px; }
.shop-note { margin: 0 2px; text-align: center; }
.shop-people { display: flex; align-items: flex-start; gap: 6px; margin: 4px 2px 0; }
.shop-people .icon { flex: none; margin-top: 2px; }
.link.danger, .btn.ghost.danger { color: var(--danger); }
.btn.ghost.danger { border-color: var(--danger); background: var(--sheet); }

/* Your homes */
.homes h2 { margin: 28px 0 8px; font-size: 22px; }
.homes h3 { margin: 18px 0 6px; font-size: 17px; }
.homes .rows { margin-bottom: 10px; }
.homes-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 4px; }
.homes-add label { flex-basis: 100%; font-weight: 500; font-size: 16px; color: var(--soft); }
.homes-add input { flex: 1 1 180px; min-width: 0; }
.homes-add .btn { flex: none; }
.homes-invite { margin: 12px 0; gap: 10px; }
.homes-invite input { font-size: 15px; }
.homes-delete { margin-top: 24px; }
.homes-delete summary { cursor: pointer; color: var(--danger); font-weight: 600; }

/* The join link's page */
.join-home { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding-top: 32px; }
.join-home .icon { color: var(--gl-hot); }
.join-home h1 { margin: 4px 0; font-size: 26px; line-height: 1.25; }
.join-home form, .join-home .btn { width: 100%; }
.join-logo img { height: 40px; width: auto; }

/* Shopping list, advanced (Mahdi, 2026-11-09): search with pictures, the barcode, shops, prices,
   dishes and a receipt. A thing's picture leads its row; its shop is its name in its own colour. */
.shop-find { position: relative; }
.shop-scan { flex: none; width: 56px; padding: 0; }
.shop-found { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; max-height: min(60vh, 420px); overflow-y: auto; padding: 6px; border-radius: var(--r-card); background: var(--sheet); box-shadow: var(--e8); }
.shop-hit { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 6px 8px; border: 0; border-radius: var(--r); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.shop-hit:hover, .shop-hit:focus-visible { background: var(--paper); }
.shop-hit img { flex: none; width: 40px; height: 40px; object-fit: contain; border-radius: 8px; background: #fff; }
.shop-hit-words { display: flex; flex-direction: column; min-width: 0; }
.shop-hit-words b { font-weight: 600; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-credit { margin: 6px 8px 2px; }
.shop-pic { flex: none; width: 44px; height: 44px; border-radius: 10px; object-fit: contain; background: #fff; }
.shop-pic.letter { display: grid; place-items: center; font-weight: 700; font-size: 19px; color: #fff; background: #8A8F98; }
.shop-pic.letter[data-aisle=veg] { background: #4E8A3A; }
.shop-pic.letter[data-aisle=bakery] { background: #B07A3B; }
.shop-pic.letter[data-aisle=meat] { background: #B4463F; }
.shop-pic.letter[data-aisle=dairy] { background: #4A7DB5; }
.shop-pic.letter[data-aisle=chilled] { background: #3E9AA6; }
.shop-pic.letter[data-aisle=cupboard] { background: #A0702C; }
.shop-pic.letter[data-aisle=breakfast] { background: #C28B22; }
.shop-pic.letter[data-aisle=snacks] { background: #C2507A; }
.shop-pic.letter[data-aisle=drinks] { background: #3D6FB0; }
.shop-pic.letter[data-aisle=frozen] { background: #5AA7D6; }
.shop-pic.letter[data-aisle=household] { background: #6B6F8E; }
.shop-pic.letter[data-aisle=health] { background: #8C5BA8; }
.shop-pic.letter[data-aisle=baby] { background: #D98AA0; }
.shop-pic.letter[data-aisle=pets] { background: #7C6A55; }
.shop-what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.shop-under { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; line-height: 1.3; }
.shop-store { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 99px; background: var(--store, #555); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .01em; }
.shop-last { font-weight: 600; color: var(--ink); }
.shop-note-text { color: var(--warn); }
.shop-items li.waiting { opacity: .7; }
.shop-items li.waiting .shop-tick .shop-box { border-style: dashed; }
.shop-items li.waiting .shop-tick.on .shop-box { background: var(--good); }
.shop-waiting { margin: 0 2px; }
.shop-price { flex: none; display: flex; align-items: center; gap: 4px; margin-right: 8px; }
.shop-price input { width: 74px; min-height: 40px; padding: 6px 8px; font-size: 16px; }
.shop-price-go { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--r); background: var(--sheet); color: var(--accent); cursor: pointer; }
.shop-elsewhere { margin: 0 2px; }
.shop-at { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.shop-at label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 16px; color: var(--soft); }
.shop-at select { flex: 1 1 160px; width: auto; min-height: 46px; }
.shop-at-go { min-height: 46px; padding: 6px 14px; }
html.shop-js .shop-at-go { display: none; }
.shop-cook { margin-top: 6px; }
.shop-cook > summary { display: inline-flex; align-items: center; gap: 6px; padding: 6px 2px; cursor: pointer; font-weight: 600; color: var(--accent); list-style: none; }
.shop-cook > summary::-webkit-details-marker { display: none; }
.shop-cook-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.shop-cook-form input { flex: 1 1 180px; min-width: 0; }
.shop-cook-form select { width: auto; flex: none; }
.shop-dishes { flex-wrap: wrap; overflow: visible; }
.shop-dish { display: flex; flex-direction: column; gap: 6px; }
.shop-parts { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; }
.shop-parts label { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; color: var(--ink); font-size: 17px; cursor: pointer; }
.shop-parts input { width: 22px; height: 22px; min-height: 0; flex: none; accent-color: var(--accent); }
.shop-parts .soft { margin-left: auto; }
.shop-receipt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.shop-receipt-snap { flex: 1 1 220px; display: flex; align-items: center; gap: 12px; margin: 0; cursor: pointer; color: var(--ink); }
.shop-receipt-snap .icon { flex: none; color: var(--gl-hot); }
.shop-receipt-snap > span { display: flex; flex-direction: column; }
.shop-scanner { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.82); }
.shop-scanner[hidden] { display: none; }
.shop-scanner-box { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(460px, 100%); color: #fff; text-align: center; }
.shop-scanner video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-card); background: #000; }
.shop-scanner-line { position: absolute; left: 10%; right: 10%; top: calc((min(460px, 100vw - 32px) * .75) / 2); height: 2px; background: var(--gl-hot); box-shadow: 0 0 10px var(--gl-hot); }
.shop-scanner .btn { width: 100%; }
.shop-scan-photo { cursor: pointer; color: #fff; border-color: #fff; background: transparent; }
.shop-dish[hidden], .shop-receipt[hidden] { display: none; }
/* Cooking a dish (Mahdi, 2026-11-11): its picture, what goes in it with theirs, its steps. */
.shop-pic.small { width: 34px; height: 34px; border-radius: 8px; font-size: 15px; }
.shop-dish-chip { display: inline-flex; align-items: center; gap: 6px; padding-inline-start: 4px; }
.shop-dish-chip .shop-dish-pic { border-radius: 50%; }
.shop-dish-pic { flex: none; display: inline-grid; place-items: center; border-radius: 12px; object-fit: cover; background: #fff; }
.shop-dish-pic.pot, .cook-pic.pot { background: var(--accent-soft); color: var(--accent); }
.shop-dish-head { display: flex; align-items: center; gap: 12px; }
.shop-dish-head > span { display: flex; flex-direction: column; gap: 2px; }
.shop-dish .twin .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }
.shop-dish-more { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font-size: 15px; }
.linkish { padding: 0; border: 0; background: none; color: var(--soft); font: inherit; font-size: 15px; text-decoration: underline; cursor: pointer; }
.linkish:hover { color: var(--ink); }
.cook { display: flex; flex-direction: column; gap: 14px; }
.cook-head { display: flex; align-items: center; gap: 16px; }
.cook-head .q { margin: 0; overflow-wrap: anywhere; }
.cook-head p { margin: 4px 0 0; }
.cook-pic { flex: none; display: grid; place-items: center; width: 112px; height: 112px; border-radius: 18px; object-fit: cover; background: #fff; box-shadow: var(--e1); }
.cook-photo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.cook-photo label.btn { display: inline-flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; }
html.cook-js .cook-photo-go { display: none; }
.cook-h { margin: 8px 0 0; font-size: 20px; }
.cook-parts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cook-parts label { display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 0; padding: 2px 0; border-bottom: 1px solid var(--rule); color: var(--ink); font-size: 18px; cursor: pointer; }
.cook-parts input { width: 24px; height: 24px; min-height: 0; flex: none; accent-color: var(--accent); }
.cook-parts .soft { margin-left: auto; text-align: end; font-size: 16px; }
.cook-parts input:checked ~ .cook-part-name { text-decoration: line-through; color: var(--soft); }
.cook-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: none; }
.cook-steps li { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--r-card); background: var(--sheet); border: 1px solid var(--rule); }
.cook-step { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 21px; line-height: 1.45; text-align: start; cursor: pointer; }
.cook-n { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 17px; font-weight: 700; line-height: 1; }
.cook-steps li.done { opacity: .55; }
.cook-steps li.done .cook-text { text-decoration: line-through; }
.cook-steps li.done .cook-n { background: var(--soft); }
.cook-timer { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-inline-start: 50px; font-variant-numeric: tabular-nums; }
.cook-timer.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.cook-ring { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 70; display: flex; align-items: center; gap: 12px; max-width: 520px; margin: 0 auto; padding: 14px 16px; border-radius: var(--r-card); background: var(--gl-hot, #FC630D); color: #fff; box-shadow: var(--e8); font-size: 18px; }
.cook-ring[hidden] { display: none; }
.cook-ring b { flex: 1; }
.cook-ring .btn { background: #fff; color: #1C1C1A; border-color: #fff; }
/* A picture seen big (pic.js, Mahdi, 2026-11-11). */
img[data-zoom] { cursor: zoom-in; }
dialog.pic-zoom { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 16px; border: 0; border-radius: var(--r-card); background: #fff; color: #1C1C1A; box-shadow: var(--e8); text-align: center; cursor: zoom-out; }
dialog.pic-zoom::backdrop { background: rgba(8, 8, 8, .7); backdrop-filter: blur(4px); }
dialog.pic-zoom img { display: block; width: 100%; max-height: calc(100dvh - 140px); object-fit: contain; border-radius: 10px; }
dialog.pic-zoom p { margin: 10px 0 0; font-size: 18px; font-weight: 600; }
dialog.pic-zoom p:empty { display: none; }
.pic-zoom-x { position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
/* A dish's sides (Mahdi, 2026-11-11): links on the cooking screen, groups on the dish card. */
.cook-sides { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cook-sides .shop-chip { text-decoration: none; color: var(--ink); }
.shop-side { display: flex; flex-direction: column; gap: 2px; padding-top: 8px; border-top: 1px solid var(--rule); }
.shop-side-head { display: flex; align-items: center; gap: 10px; min-height: 48px; color: var(--ink); text-decoration: none; }
.shop-side-head > span:not(.shop-dish-pic) { flex: 1; display: flex; flex-direction: column; }
.shop-side-head .icon { color: var(--accent); }
.shop-side-head:hover b { text-decoration: underline; }
.dish-write-form { display: flex; flex-direction: column; gap: 16px; }
.dish-write-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.dish-write-form label .soft { font-weight: 400; }
.dish-write-form textarea { width: 100%; font-size: 17px; line-height: 1.5; resize: vertical; }
.dish-write-name { display: flex; gap: 10px; }
.dish-write-name label:first-child { flex: 1; min-width: 0; }
.dish-write-name select { width: auto; }
/* Writing a dish in rows (2026-11-11): a name and amount for each thing, words and minutes for each step. */
.dw-set { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.dw-set legend { padding: 0; margin-bottom: 4px; font-weight: 600; }
.dw-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; counter-reset: dw; }
.dw-row { display: flex; align-items: center; gap: 8px; }
.dw-row input[name=part_name] { flex: 1 1 auto; min-width: 0; }
.dw-row .dw-amount { flex: 0 0 34%; min-width: 0; }
.dw-x { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--sheet); color: var(--soft); font: inherit; font-size: 18px; cursor: pointer; }
.dw-x:hover { color: var(--ink); border-color: var(--ink); }
.dw-step { flex-direction: column; align-items: stretch; gap: 6px; padding: 10px 10px 10px 44px; position: relative; border-radius: var(--r-card); background: var(--sheet); border: 1px solid var(--rule); counter-increment: dw; }
.dw-step::before { content: counter(dw); position: absolute; left: 10px; top: 12px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 14px; font-weight: 700; }
.dw-step textarea { width: 100%; font-size: 16px; line-height: 1.45; resize: vertical; }
.dw-step-tools { display: flex; align-items: center; gap: 6px; }
.dish-write-form .dw-min { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; margin: 0 auto 0 0; font-weight: 400; color: var(--soft); }
.dish-write-form .dw-min input { width: 64px; min-height: 40px; text-align: center; }
.dw-add { display: none; align-self: flex-start; align-items: center; gap: 6px; }
html.dw-js .dw-add { display: inline-flex; }
/* Recipes, a home service (Mahdi, 2026-11-11): the search, the home's dishes, a recipe's public page. */
.rc-home, .rc-page, .rc-share { display: flex; flex-direction: column; gap: 14px; }
.rc-title { display: flex; align-items: center; gap: 10px; margin: 0; }
.rc-find { display: flex; gap: 8px; }
.rc-find input { flex: 1; min-width: 0; min-height: 50px; font-size: 17px; }
.rc-find .btn { min-width: 54px; }
.rc-h { margin: 8px 0 0; font-size: 20px; }
.rc-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.rc-card { display: flex; flex-direction: column; gap: 4px; color: var(--ink); text-decoration: none; }
.rc-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: var(--sheet); box-shadow: var(--e1); }
.rc-card b { font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.rc-card:hover b { text-decoration: underline; }
.rc-mine { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rc-mine li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.rc-mine-dish { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.rc-mine-dish > span:not(.shop-dish-pic) { display: flex; flex-direction: column; min-width: 0; }
.rc-mine-dish:hover b { text-decoration: underline; }
.rc-tag { flex: none; padding: 4px 12px; border-radius: 99px; border: 1px solid var(--accent); color: var(--accent); font-size: 14px; font-weight: 700; text-decoration: none; }
.rc-tag.share { background: var(--accent); color: #fff; }
.rc-tag.off { border-color: var(--warn); color: var(--warn); }
.rc-photos { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -4px; padding: 0 4px 4px; }
.rc-photos img { flex: none; width: 82%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; scroll-snap-align: start; background: var(--sheet); }
.rc-photos.one img { width: 100%; }
.rc-page .q { margin: 0; overflow-wrap: anywhere; }
.rc-page > p.soft { margin: -6px 0 0; }
.rc-act { display: flex; flex-wrap: wrap; gap: 10px; }
.rc-act .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }
.rc-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #111; }
.rc-video iframe { width: 100%; height: 100%; border: 0; }
.rc-video-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; color: #fff; text-decoration: none; font-weight: 700; font-size: 18px; }
.rc-video-play span { display: flex; flex-direction: column; }
.rc-video-play small { font-weight: 400; font-size: 13px; opacity: .8; }
.rc-parts li { display: flex; align-items: center; gap: 10px; min-height: 44px; border-bottom: 1px solid var(--rule); font-size: 18px; }
.rc-steps .cook-step { cursor: default; }
.rc-cooked { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.rc-cooked li { display: flex; flex-direction: column; gap: 2px; }
.rc-cooked img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--sheet); }
.rc-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 15px; }
.rc-report summary { cursor: pointer; color: var(--soft); }
.rc-report form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.rc-share-dish { display: flex; align-items: center; gap: 14px; }
.rc-share-dish > div { display: flex; flex-direction: column; gap: 2px; }
.rc-shared-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0; }
.rc-share-go { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; text-decoration: none; }
.shop-offer { display: flex; flex-direction: column; gap: 6px; }
.shop-offer[hidden] { display: none; }
.shop-offers { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.shop-offers li { display: flex; align-items: center; gap: 12px; }
.shop-offers img { flex: none; width: 64px; height: 64px; object-fit: cover; border-radius: 10px; background: var(--sheet); }
.shop-offers li > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.shop-offers .btn { flex: none; }
.shop-offer .linkish { align-self: flex-start; text-align: start; }
/* Adding a dish on Recipes (2026-11-12): ours stands beside the shared ones in the logo's mark. */
.rc-add { margin: 0; }
.rc-add .btn { display: inline-flex; align-items: center; gap: 6px; }
.shop-offers .rc-ours { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 10px; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; }
.rc-added { display: flex; flex-direction: column; gap: 10px; }
.rc-added .rc-share-dish img, .rc-added .rc-share-dish .shop-dish-pic { flex: none; }
@media (max-width: 400px) {
  .cook-pic { width: 84px; height: 84px; }
  .cook-step { font-size: 19px; }
  .cook-timer { margin-inline-start: 0; }
}
/* Expenses to try (Mahdi, 2026-11-09): three sample receipts, each a button that reads it. */
.ex-samples { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--r-card); background: var(--sheet); box-shadow: var(--e1); }
.ex-samples-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.ex-sample-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ex-sample { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 6px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; line-height: 1.25; text-align: center; cursor: pointer; }
.ex-sample:hover { border-color: var(--gl-hot); }
.ex-sample:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ex-sample img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; background: #fff; }
.ex-sample span { overflow-wrap: anywhere; }

/* The account menu (Mahdi, 2026-11-09, like YouTube's accounts): one round face in the bar, a
   panel under it. The switch is a details inside the panel: open, it takes the panel's place and
   its summary becomes the way back. */
.acct { position: relative; }
.acct > summary, .acct-sw > summary { list-style: none; cursor: pointer; }
.acct > summary::-webkit-details-marker, .acct-sw > summary::-webkit-details-marker { display: none; }
.acct-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; }
.acct-btn:hover .acct-face, .acct[open] > .acct-btn .acct-face { box-shadow: 0 0 0 3px rgba(255,255,255,.28); }
.acct-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.acct-face { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: #FC630D; color: #fff; font-weight: 700; font-size: 16px; line-height: 1; text-transform: uppercase; }
.acct-face.home { background: #F1E7D6; color: #1C1C1A; }
.acct-face.big { width: 44px; height: 44px; font-size: 20px; }
.acct-face img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
.acct-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 320px; max-height: calc(100dvh - 90px); overflow: auto; overscroll-behavior: contain; padding: 6px 0; border-radius: 14px; background: var(--sheet); color: var(--ink); box-shadow: var(--e8); font-size: 15px; font-weight: 400; text-align: start; }
@media (max-width: 559px) {
  .acct-panel { position: fixed; left: 8px; right: 8px; top: calc(64px + env(safe-area-inset-top, 0px)); width: auto; max-height: calc(100dvh - 80px); }
}
.acct-head { display: flex; align-items: flex-start; gap: 14px; padding: 12px 16px 14px; border-bottom: 1px solid var(--rule); }
.acct-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acct-who b { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-who .soft { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-side { align-self: flex-start; margin-top: 4px; padding: 2px 10px; border-radius: 99px; background: #FFE9DC; color: #A84300; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.acct-side.home { background: #F1E7D6; color: #5A4A30; }
.acct-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 44px; padding: 8px 16px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 15px; text-align: start; text-decoration: none; cursor: pointer; }
.bar nav .acct-row, .bar nav .acct-row:hover { color: var(--ink); font-weight: 400; }
.bar nav .acct-row.acct-add { color: var(--soft); }
.bar nav .acct-go .acct-row.on { font-weight: 700; }
.acct-row:hover, .acct-row:focus-visible { background: color-mix(in srgb, var(--ink) 7%, transparent); outline: none; }
.acct-row.on { font-weight: 700; }
.acct-row .icon { flex: none; color: var(--soft); }
.acct-row .glyph { flex: none; }
.acct-grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.acct-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-chev { color: var(--soft); font-size: 22px; line-height: 1; }
.acct-tick { color: #FC630D; font-weight: 700; font-size: 18px; }
.acct-sw-back { display: none; font-size: 20px; width: 20px; text-align: center; }
.acct-sw > summary { border-bottom: 1px solid var(--rule); }
.acct-sw[open] > summary { font-weight: 700; }
.acct-sw[open] .acct-sw-in, .acct-sw[open] .acct-chev { display: none; }
.acct-sw[open] .acct-sw-back { display: inline; }
.acct-panel:has(.acct-sw[open]) .acct-hide { display: none; }
.acct-spots { padding-bottom: 4px; }
.acct-spots h3 { margin: 12px 16px 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.acct-spots .acct-row.on { font-weight: 400; }
.acct-add { color: var(--soft); }
.acct-plus { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px dashed var(--rule); font-size: 20px; }
.acct-go { padding: 6px 0; border-bottom: 1px solid var(--rule); }
.acct-foot { padding: 6px 0 0; }
.acct-foot form { margin: 0; }
.acct-theme { padding: 0 8px; cursor: default; }
.acct-theme:hover { background: none; }
.acct-theme .theme-switch.with-words { width: 100%; justify-content: flex-start; gap: 14px; min-height: 44px; padding: 0 8px; border: 0; border-radius: 0; color: var(--ink); font-size: 15px; font-weight: 400; }
.acct-theme .theme-switch.with-words svg { width: 20px; height: 20px; color: var(--soft); }
.acct-theme .theme-switch.with-words:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
html:not([data-theme]) .acct-theme { display: none; }

/* The home (Mahdi, 2026-11-09): the home in use and its people, the home services as tiles, then
   what businesses sent. */
.hb-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.hb-head .acct-face.big { width: 56px; height: 56px; font-size: 24px; }
.hb-head h1 { margin: 0; line-height: 1.15; }
.hb-people { font-size: 15px; text-decoration: none; }
.hb-people:hover { color: var(--ink); text-decoration: underline; }
.hb-services { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
@media (min-width: 560px) { .hb-services { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.hb-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px 14px; min-height: 128px; border-radius: var(--r-card); background: var(--sheet); box-shadow: var(--e1); color: var(--ink); text-align: center; text-decoration: none; }
.hb-tile:hover { box-shadow: var(--e4); }
.hb-tile b { font-size: 15px; line-height: 1.2; hyphens: manual; }
.hb-tile .small { line-height: 1.2; }
.hb-tile.soon { background: transparent; box-shadow: none; border: 1.5px dashed var(--rule); }
.hb-tile.soon .glyph { opacity: .55; }
.hb-tile.soon b { color: var(--soft); }
.hb-soon { padding: 1px 9px; border-radius: 99px; background: #FFE9DC; color: #A84300; font-size: 12px; font-weight: 700; }
.home h3 { margin: 20px 0 8px; font-size: 16px; color: var(--soft); }
.hb-none { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: var(--r-card); background: var(--sheet); box-shadow: var(--e1); }
.hb-none .glyph { flex: none; }
.hb-none p { margin: 0; line-height: 1.45; }
/* In the heads of Easy Invoice, Expenses and the shopping list, the face sits after the name pill. */
.ei-right { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 72%; }
.ei-right .ei-co { max-width: none; min-width: 0; }
.ei-head .acct-btn:hover .acct-face, .ei-head .acct[open] > .acct-btn .acct-face { box-shadow: 0 0 0 3px var(--rule); }
.ei-head .acct-btn:focus-visible { outline-color: var(--ink); }

/* The logo in the page's Look (Mahdi, 2026-11-09). */
.pe-logo-head { display: block; margin-top: 22px; }

/* The logo, simple (Mahdi, 2026-11-09): the square is the button, the words beside it. */
.logo-pick { display: flex; align-items: center; gap: 16px; margin: 6px 0 10px; }
.logo-tile { position: relative; flex: none; display: grid; place-items: center; align-content: center; gap: 2px; width: 88px; height: 88px; margin: 0; border-radius: 16px; border: 2px dashed var(--rule); background: var(--paper); color: var(--soft); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.logo-tile:hover { border-color: var(--accent); color: var(--accent); }
.logo-tile.has { border: 1px solid var(--rule); background: #fff; padding: 8px; }
.logo-tile.has:hover { box-shadow: var(--e4); }
.logo-tile img { width: 100%; height: 100%; object-fit: contain; }
.logo-plus { font-size: 30px; line-height: 1; font-weight: 300; }
.logo-tile-word { font-size: 13px; font-weight: 600; }
.logo-badge { position: absolute; right: -6px; bottom: -6px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); box-shadow: var(--e2); }
.logo-pick input.sr:focus-visible + .logo-tile { outline: 2px solid var(--accent); outline-offset: 3px; }
.logo-pick.off .logo-tile { cursor: default; opacity: .6; }
.logo-words { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.logo-words .logo-acts { display: flex; align-items: center; gap: 14px; margin-top: 2px; }
.logo-words .logo-acts:empty { display: none; }
.logo-pick [data-logo-save][hidden] { display: none; }
.logo-wait { display: none; position: absolute; inset: 0; border-radius: inherit; background: color-mix(in srgb, var(--sheet) 70%, transparent); }
.logo-wait::after { content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px; border-radius: 50%; border: 3px solid var(--rule); border-top-color: var(--accent); animation: logo-spin .8s linear infinite; }
.logo-pick.busy .logo-wait { display: block; }
@keyframes logo-spin { to { transform: rotate(360deg); } }

/* The cover photo, like the logo (Mahdi, 2026-11-09): the wide frame is the button. */
.cover-pick { display: flex; flex-direction: column; gap: 8px; width: 100%; margin: 6px 0 10px; }
.cover-tile { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 1; min-height: 110px; margin: 0; overflow: hidden; border-radius: 14px; border: 2px dashed var(--rule); background: var(--paper); color: var(--soft); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.cover-tile:hover { border-color: var(--accent); color: var(--accent); }
.cover-tile.has { border: 0; box-shadow: var(--e1); }
.cover-tile.has:hover { box-shadow: var(--e4); }
.cover-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover-empty { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; padding: 8px; }
.cover-empty b { color: var(--ink); font-size: 15px; }
.cover-tile:hover .cover-empty b { color: var(--accent); }
.cover-change { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; border-radius: 99px; background: rgba(0,0,0,.62); color: #fff; font-size: 13px; font-weight: 600; backdrop-filter: blur(4px); }
.cover-empty[hidden], .cover-change[hidden], .cover-tile img[hidden] { display: none; }
.cover-pick input.sr:focus-visible + .cover-tile { outline: 2px solid var(--accent); outline-offset: 3px; }
.cover-pick.busy .logo-wait { display: block; }
.cover-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.cover-acts [data-cover-save][hidden] { display: none; }
.wz-cover .cover-pick { margin: 0; }
.cover-acts .link { margin: 0; }

/* The page's Look as one preview (Mahdi, 2026-11-09): the top of the page as the page draws it,
   changed on it. The page's own .pg-head styles draw it; these fit it into the editor. */
.look-live { position: relative; }
.look-pg { min-height: 0; border-radius: 16px; overflow: hidden; box-shadow: var(--e2); background: transparent; }
.look-pg .pg-head { position: relative; padding: 64px 0 24px; }
.look-pg .pg-head.cover { min-height: 280px; padding: 64px 0 24px; }
.look-pg .pg-head h1 { font-size: clamp(24px, 6vw, 34px); }
.look-pg .pg-btn { min-height: 42px; padding: 8px 16px; font-size: 15px; cursor: default; }
.look-pg .pg-btn:hover { filter: none; }
.look-tools { position: absolute; top: 12px; right: 12px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.look-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 7px 13px 7px 10px; border-radius: 99px; background: rgba(0,0,0,.62); color: #fff; font-family: var(--font); font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; backdrop-filter: blur(4px); box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.look-chip:hover { background: rgba(0,0,0,.78); }
.look-colour input[type=color] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.look-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--pg); box-shadow: 0 0 0 2px #fff; }
.look-logo { position: relative; display: inline-grid; place-items: center; min-width: 52px; height: 52px; margin: 0; cursor: pointer; }
.look-logo .pg-logo { display: block; }
.look-logo:hover .pg-logo { box-shadow: 0 0 0 3px rgba(255,255,255,.7); }
.look-logo-add { display: grid; place-items: center; height: 52px; padding: 0 14px; border-radius: var(--r); border: 2px dashed currentColor; font-family: var(--font); font-size: 14px; font-weight: 700; }
.look-logo-add[hidden], .look-logo .pg-logo[hidden] { display: none; }
.look-logo .logo-badge { width: 22px; height: 22px; right: -8px; bottom: -8px; }
.look-live.busy .logo-wait { display: block; }
.look-live .logo-wait { z-index: 2; }
.look-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 14px; }
.seg { display: inline-flex; padding: 3px; border-radius: 99px; background: var(--sheet); box-shadow: var(--e1); }
.seg label { position: relative; margin: 0; padding: 8px 15px; border-radius: 99px; color: var(--soft); font-size: 14px; font-weight: 600; cursor: pointer; }
.seg label.on { background: var(--ink); color: var(--paper); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.look-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.look-swatch { width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 3px solid var(--sheet); background: var(--sw); box-shadow: 0 0 0 1px var(--rule); cursor: pointer; }
.look-swatch.on { box-shadow: 0 0 0 2px var(--ink); }
.look-bar [data-look-save][hidden] { display: none; }
.look-told { min-width: 4em; }
.look-file { margin: 0; }
.look-more { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 12px; }
.look-more .link { margin: 0; }

/* Easy Invoice, Expenses and the shopping list under the bar (Mahdi, 2026-11-09): the bar is the same everywhere. */
.ei-page.ei-barred { padding-top: 20px; }

/* ---------- a list with its detail beside it on a laptop (page.js, 2026-11-14) ----------
   The invoice list and the expenses list keep what is picked beside them once the window is wide
   enough (1280 px, with the side column). The place is empty on a phone and never shown there:
   a row opens its own page. The list keeps its own flow; the place hangs at its right and stays
   in view as the list scrolls. */
.ei-peek { display: none; }
@media (min-width: 1280px) {
  .sheet.has-peek { position: relative; max-width: 1180px; padding-right: calc(46% + 28px); }
  .sheet.has-peek > .ei-peek { display: block; position: absolute; top: 0; bottom: 0; right: 0; width: 46%; }
  .ei-peek > * { position: sticky; top: 88px; max-height: calc(100dvh - 104px); overflow: auto; overscroll-behavior: contain; padding: 2px; }
  .ei-peek[aria-busy=true] > * { opacity: .55; }
  .ei-peek-body { display: flex; flex-direction: column; gap: 12px; }
  .ei-peek-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .ei-peek-head .who b { font-size: 18px; }
  .ex-peek-sum { font-size: 22px; white-space: nowrap; }
  .ex-peek-list { margin: 0; display: flex; flex-direction: column; background: var(--sheet); border-radius: var(--r-card); box-shadow: var(--e1); }
  .ex-peek-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 14px; }
  .ex-peek-list > div + div { border-top: 1px solid var(--rule); }
  .ex-peek-list:empty { display: none; }
  .ex-peek-list dt { color: var(--soft); }
  .ex-peek-list dd { margin: 0; text-align: end; }
  .ex-peek-pic { display: block; width: 100%; max-height: 70vh; object-fit: contain; border-radius: var(--r-card); background: var(--sheet); box-shadow: var(--e1); }
  /* Beside a peek the list is as narrow as a phone's, so its rows are laid out as a phone's are: the day is on the paper. */
  .sheet.has-peek .list a { display: flex; }
  .sheet.has-peek .list .when { display: none; }
  .list li.peeked > a { background: var(--brand-soft); box-shadow: inset 4px 0 0 var(--brand); }
  /* The shopping list: the list on the left, Cook something beside it and open (page.js opens it
     when the window is this wide). Buy again stays under the list, where the live list draws it. */
  .sheet.shop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 42%); column-gap: 28px; row-gap: 10px; align-items: start; }
  .sheet.shop > * { grid-column: 1; min-width: 0; }
  .sheet.shop > .shop-cook { grid-column: 2; grid-row: 2 / span 3; position: sticky; top: 88px; max-height: calc(100dvh - 104px); overflow: auto; overscroll-behavior: contain; margin: 0; padding: 4px 16px 12px; border-radius: var(--r-card); background: var(--sheet); box-shadow: var(--e1); }
}
.shop-credit { margin: 20px 0 0; text-align: center; }

/* A group of the editor's menu, not an item (Mahdi, 2026-11-09): icon, count and a round arrow that turns over. */
.pe-g-icon { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.pe-group summary b { font-size: 17px; }
.pe-g-count { flex: none; display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 13px; background: var(--paper); color: var(--soft); font-size: 13px; font-weight: 700; }
.pe-g-chev { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--paper); color: var(--ink); transition: transform .2s; }
.pe-group summary:hover .pe-g-chev { background: var(--rule); }
.pe-group[open] > summary .pe-g-chev { transform: rotate(180deg); background: var(--sheet); }
.pe-group[open] > summary .pe-g-count { background: var(--sheet); }
.pe-group[open] > summary { background: var(--paper); }
.pe-group summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.set-menu .pe-group a { padding-left: 72px; min-height: 56px; }
.set-menu .pe-group a b { font-size: 15px; font-weight: 600; }
.set-menu .pe-group a .soft { font-size: 14px; }

/* Suggestions under a field, drawn by the page, not by the browser (Mahdi, 2026-11-09). */
.sug { position: fixed; z-index: 90; max-height: 288px; overflow-y: auto; overscroll-behavior: contain; padding: 6px 0; border-radius: 12px; border: 1px solid var(--rule); background: var(--sheet); color: var(--ink); box-shadow: var(--e8); }
.sug[hidden] { display: none; }
.sug-opt { display: flex; align-items: center; min-height: 44px; padding: 8px 16px; font-size: 16px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sug-opt b { font-weight: 700; color: var(--accent); }
.sug-opt:hover, .sug-opt.on { background: var(--accent-soft); }

/* A £ field is one frame, not a frame in a frame (Mahdi, 2026-11-09): the field inside it keeps no border,
   shadow or ground of its own, also when it has the focus; the frame shows the focus. */
.money input, .money input:hover, .money input:focus { flex: 1; min-width: 0; border: 0; box-shadow: none; background: transparent; outline: none; }

/* The price step (Mahdi, 2026-11-09): both ways in one form, the switch only shows one. */
.price-switch label { position: relative; display: grid; place-items: center; margin: 0; min-height: 48px; padding: 12px; border-radius: 11px; color: var(--soft); font-weight: 700; text-align: center; cursor: pointer; }
.price-switch input { position: absolute; opacity: 0; pointer-events: none; }
.price-switch label:has(input:checked) { background: var(--sheet); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
html[data-theme=dark] .price-switch label:has(input:checked) { background: #39414B; box-shadow: none; }
.price-switch label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.price-way { display: none; flex-direction: column; gap: 10px; }
.price-form:has(input[name=pricing][value=together]:checked) .price-together,
.price-form:has(input[name=pricing][value=each]:checked) .price-each { display: flex; }
.price-big { min-height: 66px; padding-left: 18px; }
.price-big span { font-size: 26px; font-weight: 600; }
.price-big input { padding: 14px 14px 14px 8px; font-size: 30px; font-weight: 600; }
.price-covers { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; padding: 14px 16px; border-radius: var(--r-card); background: var(--sheet); box-shadow: var(--e1); }
.price-covers .label-soft { margin: 0; }
.price-covers ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.price-covers li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.4; }
.price-covers li .icon { flex: none; margin-top: 1px; color: var(--accent); }
.price-lines { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.price-line { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: var(--r-card); background: var(--sheet); box-shadow: var(--e1); }
.price-line > label { margin: 0; font-weight: 600; line-height: 1.35; }
.price-line .money { min-height: 52px; }
.price-line .money input { padding: 12px 12px 12px 6px; font-size: 20px; }
.price-sum { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 4px 0; border-top: 2px solid var(--rule); font-weight: 600; color: var(--soft); }
.price-sum b { color: var(--ink); font-size: 24px; font-variant-numeric: tabular-nums; }
.price-sum[hidden] { display: none; }

/* Just saved (Mahdi, 2026-11-09): the number, then the ways to send it. */
.saved-card { display: flex; align-items: center; gap: 14px; margin: 4px 0 6px; padding: 14px 16px; border-radius: var(--r-card); background: var(--good-soft); }
.saved-card > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.saved-card b { font-size: 17px; }
.saved-tick { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--good); color: var(--good-ink); }
.send-head { display: block; margin: 14px 0 6px; }

/* Price each line as a receipt (Mahdi, 2026-11-09: «چون تایتل بلند میشه قشنگ نیست»): one card, a row a line,
   its name on the left (two lines at most, the whole in its title) and a small pound field on the right. */
.price-lines { gap: 0; overflow: hidden; border-radius: var(--r-card); background: var(--sheet); box-shadow: var(--e1); }
.price-line { flex-direction: row; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border-radius: 0; background: transparent; box-shadow: none; }
.price-line + .price-line { border-top: 1px solid var(--rule); }
.price-line > label { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink); font-weight: 500; font-size: 15px; line-height: 1.35; }
.price-line > .money { flex: none; width: 132px; min-height: 46px; padding-left: 12px; }
.price-line > .money span { font-size: 17px; }
.price-line .money input { padding: 10px 12px 10px 4px; font-size: 18px; text-align: right; }
.price-line.per { flex-wrap: wrap; }
.price-line.per > label { flex-basis: 100%; }
.price-line.per .per-row { flex: 1 1 100%; }
.price-line.per .per-row .money input { text-align: left; }

/* A link's switches (Mahdi, 2026-11-09): the customer's link and the messages on it, on or off. */
.link-switches { display: flex; flex-direction: column; gap: 0; margin-top: 12px; padding: 2px 16px; }
.link-switches [data-autosend-button][hidden] { display: none; }
.link-switches [data-autosend-button] { align-self: flex-start; margin: 8px 0; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; padding: 12px 0; cursor: pointer; }
.toggle-row + .toggle-row { border-top: 1px solid var(--rule); }
.toggle-row > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.toggle-row.off { opacity: .5; cursor: default; }
/* The site's field size (min-height 54px, padding) must not reach a switch (Mahdi, 2026-11-09: «رادیوباکس ها زشتن»). */
.toggle-row input[role=switch], .toggle-row input[role=switch]:hover, .toggle-row input[role=switch]:focus { position: relative; flex: none; width: 50px; min-width: 50px; height: 30px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 15px; background: color-mix(in srgb, var(--ink) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent); appearance: none; -webkit-appearance: none; cursor: pointer; transition: background .2s; }
.toggle-row input[role=switch]::before { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: transform .2s; }
.toggle-row input[role=switch]:checked { background: var(--good); box-shadow: none; }
.toggle-row input[role=switch]:checked::before { transform: translateX(20px); }
.toggle-row input[role=switch]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.toggle-row input[role=switch]:disabled { cursor: default; }

/* A message that just came in over the live chat. */
.talk-new { animation: talk-in .25s ease-out; }
@keyframes talk-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .talk-new { animation: none; } }

/* Ticks like WhatsApp (Mahdi, 2026-11-09): one grey when sent, two blue once seen. */
.ticks { display: inline-flex; vertical-align: -4px; margin-left: 4px; color: var(--soft); }
.ticks svg { display: block; }
.ticks.seen { color: #1F9ED8; }
html[data-theme=dark] .ticks.seen { color: #53BDEB; }

/* A draft's own dates (Mahdi, 2026-11-09): two date fields and quick choices for the due date. */
.due-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.due-quick .chip { min-height: 36px; padding: 6px 14px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.due-quick .chip.on { background: var(--brand); border-color: transparent; color: #0B0B0A; }
.add-note.dates summary .soft { font-weight: 400; }
.add-note.dates .pair-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.add-note.dates input[type=date] { min-width: 0; padding: 12px 10px; font-size: 16px; }

/* Why Save cannot be pressed yet, beside it (Mahdi, 2026-11-09). */
.save-missing { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 4px; padding: 10px 14px; border-radius: var(--r); background: var(--warn-soft); color: var(--warn); font-size: 15px; font-weight: 600; }
.save-missing .icon { flex: none; margin-top: 2px; }
.save-missing a { color: inherit; }

/* Many papers (Mahdi, 2026-11-09): a search above the tabs, the list by month, Show 20 more. */
.ei-search { position: relative; display: flex; align-items: center; margin: 4px 0 10px; }
.ei-search > .icon { position: absolute; left: 14px; color: var(--soft); pointer-events: none; }
.ei-search input[type=search] { padding-left: 44px; padding-right: 44px; min-height: 48px; font-size: 16px; border-radius: 99px; }
.ei-search input[type=search]::-webkit-search-cancel-button { display: none; }
.ei-search-clear { position: absolute; right: 6px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--soft); font-size: 22px; text-decoration: none; }
.ei-search-clear:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.ei-month { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 18px 4px 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.ei-month .soft { font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 13px; }
.ei-month + .list, .ei-month ~ .list { margin-top: 0; }
.ei-more { margin-top: 12px; }
.ei-more .soft { font-weight: 400; font-size: 14px; margin-left: 6px; }
.list li#more { scroll-margin-top: 100px; }


/* Under the tabs, one row: the month to show and the search (Mahdi, 2026-11-09). */
.ei-filter { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; }
.ei-month-pick { position: relative; flex: none; display: flex; align-items: center; max-width: 58%; }
.ei-month-pick > .icon { position: absolute; left: 12px; color: var(--soft); pointer-events: none; }
.ei-month-pick select { width: auto; max-width: 100%; min-height: 44px; padding: 8px 26px 8px 34px; border-radius: 99px; font-size: 14px; font-weight: 600; text-overflow: ellipsis; }
.ei-month-pick.on select { border-color: var(--brand); color: var(--accent); }
.ei-month-pick.on > .icon { color: var(--accent); }
.ei-filter .ei-search { flex: 1; min-width: 0; margin: 0; }
.ei-filter .ei-search > .icon { left: 12px; }
.ei-filter .ei-search input[type=search] { min-height: 44px; padding-left: 36px; padding-right: 36px; font-size: 15px; }
.ei-filter .ei-search-clear { right: 4px; }

/* Easy Invoice's home, tighter (Mahdi, 2026-11-09: «یکم فاصله‌های سطرها کم بشه»). */
.sheet.ei-home { gap: 10px; }
.ei-home .ei-filter { margin: 0; }
.ei-home .ei-month { margin: 8px 4px 2px; }
.ei-home .ei-more { margin-top: 4px; }

/* A form that saves where it is (Mahdi, 2026-11-09): Saved, or a problem, said beside it. */
.autosave-told { min-height: 1.2em; color: var(--good); font-weight: 600; }
.autosave-told.bad { color: var(--danger); }
.autosave-told:empty { display: none; }
[data-autosave-button][hidden] { display: none !important; }

/* Call from the invoice (Mahdi, 2026-11-09). */
.open-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.open-acts .btn, .sends a.btn[href^="tel:"] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.sends a.btn[href^="tel:"] .soft { font-weight: 400; }
.call-btn > span { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.2; }
.call-btn > span b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.call-btn .soft { font-weight: 400; }

/* A service's head, two menus (Mahdi, 2026-11-09): the service, and the business or home. */
.svc-pick { position: relative; min-width: 0; }
.svc-pick > summary { list-style: none; cursor: pointer; }
.svc-pick > summary::-webkit-details-marker { display: none; }
.pick-btn { display: inline-flex; align-items: center; gap: 8px; }
.svc-pick > .ei-mark { margin-left: -10px; padding: 8px 10px; border-radius: 99px; }
.svc-pick > .ei-mark:hover, .svc-pick[open] > .ei-mark { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
.pick-chev { font-size: 11px; opacity: .7; }
.pick-place { max-width: 62%; }
.pick-place > .ei-co { max-width: 100%; }
.pick-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 70; min-width: 240px; max-width: calc(100vw - 32px); max-height: 70vh; overflow: auto; padding: 6px 0; border-radius: 14px; background: var(--sheet); box-shadow: var(--e8); }
.pick-menu.right { left: auto; right: 0; }
.pick-menu form { margin: 0; }
.pick-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; margin: 0; padding: 8px 16px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 15px; text-align: start; text-decoration: none; cursor: pointer; }
.pick-row:hover, .pick-row:focus-visible { background: color-mix(in srgb, var(--ink) 7%, transparent); outline: none; }
.pick-row.on { font-weight: 700; }
.pick-row .glyph { flex: none; }
.pick-name { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-name .soft { font-weight: 400; }
.pick-tick { color: var(--brand); font-weight: 700; }
.pick-add { border-top: 1px solid var(--rule); color: var(--soft); }
.pick-plus { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px dashed var(--rule); font-size: 20px; }
.svc-pick > .ei-mark, .svc-pick > .ei-co { white-space: nowrap; }
.ei-mark .glyph { flex: none; margin: -2px 0; }
/* The business or home in use, with its logo or letter (Mahdi, 2026-11-09). */
.pick-place > .ei-co { gap: 8px; padding: 5px 12px 5px 5px; }
.pick-place > .ei-co .acct-face { width: 28px; height: 28px; font-size: 13px; }
.pick-place-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ---------- the bell, its toast, and the unread marks (Mahdi, 2026-11-10) ---------- */
.bar nav { align-items: center; }
.bell { position: relative; }
.bell > summary { list-style: none; cursor: pointer; }
.bell > summary::-webkit-details-marker { display: none; }
.bell-btn { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; }
.bell-btn:hover, .bell[open] > .bell-btn { background: rgba(255,255,255,.14); }
.bell-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.bell-n { position: absolute; top: 4px; right: 2px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; background: var(--danger); color: #fff; font-size: 12px; font-weight: 700; line-height: 19px; text-align: center; box-shadow: 0 0 0 2px var(--bar-work, var(--accent)); }
.bell-n[hidden] { display: none; }
.bell-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 360px; max-height: calc(100dvh - 90px); overflow: auto; overscroll-behavior: contain; border-radius: 14px; background: var(--sheet); color: var(--ink); box-shadow: var(--e8); font-size: 15px; text-align: start; }
@media (max-width: 559px) {
  .bell-panel { position: fixed; left: 8px; right: 8px; top: calc(64px + env(safe-area-inset-top, 0px)); width: auto; max-height: calc(100dvh - 80px); }
}
.bell-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 10px; }
.bell-head a { color: var(--soft); }
.bar nav .bell-head a { color: var(--soft); font-weight: 500; }
.bell-push { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 12px 8px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.bell-push[hidden] { display: none; }
.bell-push .btn { flex: none; min-height: 36px; padding: 6px 14px; font-size: 14px; }
.bell-none { margin: 0; padding: 4px 16px 18px; }
.bell-none[hidden] { display: none; }
.bell-list { list-style: none; margin: 0; padding: 0 0 6px; }
.bell-list li a { display: flex; gap: 12px; padding: 10px 16px; color: inherit; text-decoration: none; }
.bar nav .bell-list li a { color: inherit; font-weight: 400; }
.bell-list li a:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.bell-list li.new a { background: color-mix(in srgb, var(--danger) 7%, transparent); }
.bell-k { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
.bell-k svg { width: 20px; height: 20px; }
.bell-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bell-words b { font-weight: 600; }
.bell-words .small { overflow-wrap: anywhere; }
.tiny { font-size: 12px; }

.toasts { position: fixed; z-index: 90; top: calc(12px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: 12px; background: var(--ink); color: var(--on-ink, #fff); box-shadow: var(--e8); text-decoration: none; opacity: 0; transform: translateY(-12px); transition: opacity .2s, transform .2s; }
.toast.in { opacity: 1; transform: none; }
.toast b { font-weight: 600; }
.toast span { font-size: 14px; opacity: .85; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; transform: none; } }

/* A job's unread messages on the list of papers, and all of them beside the service's name. */
.unread { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--danger); color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }
.unread[hidden] { display: none; }
.svc-left { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.head-unread { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 3px 4px; border-radius: 99px; background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.head-unread[hidden] { display: none; }
.head-unread-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: var(--danger); color: #fff; font-size: 12px; }
.tabs a.tab-new { color: var(--danger); }
.tabs a.tab-new .tab-n { color: #fff; background: var(--danger); border-radius: 99px; padding: 0 6px; opacity: 1; }

/* Asking for the browser's notifications, and the switch for this device. */
.push-ask { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 14px; padding: 14px 16px; border-radius: var(--r-card); background: var(--sheet); box-shadow: 0 0 0 1px var(--rule); }
.push-ask[hidden] { display: none; }
.push-ask-words { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; }
.push-ask-acts { display: flex; align-items: center; gap: 12px; }
.push-switch { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: space-between; margin-top: 12px; }
.push-switch-words { display: flex; flex-direction: column; gap: 2px; flex: 1 1 240px; }
.push-switch-acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.push-switch .ps-on, .push-switch .ps-off, .push-switch .ps-blocked, .push-switch .ps-none { display: none; }
.push-switch[data-push-state=on] .ps-on, .push-switch[data-push-state=off] .ps-off,
.push-switch[data-push-state=blocked] .ps-blocked, .push-switch[data-push-state=none] .ps-none { display: revert; }

/* ---------- a trade's own page, /for and /for/<trade> (Mahdi, 2026-11-10: SEO) ---------- */
.for-trail { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 18px; font-size: 14px; color: var(--soft); }
.for-trail a { color: inherit; }
.for-hero { align-items: start; }
.for-gos { display: flex; flex-wrap: wrap; gap: 10px; }
.for-paper { width: 100%; max-width: 520px; justify-self: center; }
.for-text { max-width: 760px; }
.for-text p { line-height: 1.65; }
.for-text h3 { margin: 22px 0 6px; font-size: 18px; }
.for-lines { columns: 2 220px; margin: 0; padding-left: 20px; line-height: 1.8; }
.for-make { display: flex; flex-direction: column; gap: 8px; max-width: 520px; margin-top: 14px; }
.for-make-row { display: flex; gap: 8px; }
.for-make-row input { flex: 1; min-width: 0; }
.for-near { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.for-near a { display: inline-block; padding: 8px 14px; border-radius: 999px; background: var(--paper); color: var(--ink); text-decoration: none; box-shadow: var(--e1); }
.for-near a:hover { background: color-mix(in srgb, var(--accent) 10%, var(--paper)); }
.for-group h2 { margin: 0 0 10px; font-size: 20px; }

/* ---------- /for drawn again (Mahdi, 2026-11-10: «دوباره طراحی بشه از لوگو هم استفاده بشه»): the logo,
   then tiles, each trade wearing the mark in its group's colour, and on its own page the invoice and
   the page side by side. ---------- */

.for-top { padding-bottom: 8px; }
.for-top h1 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.for-top .lead { max-width: 46em; font-size: 18px; }
.for-show { display: grid; gap: 28px; padding-bottom: 36px; }
@media (min-width: 900px) { .for-show { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; } }
.for-show-one { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 0; padding: 22px; border-radius: var(--r-card, 16px); background: var(--paper); }
.for-show-one figcaption { display: flex; align-items: center; gap: 10px; align-self: flex-start; font-size: 18px; }
.for-show .for-paper { max-width: 540px; }
.for-phone { display: flex; justify-content: center; width: 100%; }
.for-phone .pv-phone { flex: none; width: min(330px, 86vw); height: min(680px, 178vw); }

/* ---------- /for a third time (Mahdi, 2026-11-10: «هنوز شلوغه ... آیکون تکراری داره»): a quiet
   directory. The logo, one line, a search box, then the groups in columns of plain links, each group
   marked once by a small square in its colour, the logo's dot. ---------- */
.for-hub-head { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 44px 16px 8px; text-align: center; }
.for-hub-logo img { display: block; width: min(200px, 52vw); height: auto; }
.for-hub-head h1 { margin: 0; font-size: clamp(24px, 4vw, 36px); line-height: 1.15; letter-spacing: -.01em; }
.for-find { display: flex; align-items: center; gap: 10px; width: min(460px, 100%); box-sizing: border-box; margin-top: 6px; padding: 0 16px; border-radius: 999px; background: var(--sheet); color: var(--soft); box-shadow: 0 0 0 1px var(--rule, #E6E2DB); }
.for-find:focus-within { box-shadow: 0 0 0 2px var(--ink); }
.for-find input { flex: 1; min-width: 0; height: 48px; border: 0; padding: 0; background: transparent; color: var(--ink); font: inherit; font-size: 17px; outline: none; }
.for-dir { columns: 3 240px; column-gap: 40px; padding-top: 36px; padding-bottom: 24px; }
.for-dir-group { break-inside: avoid; margin: 0 0 30px; }
.for-dir-group[hidden] { display: none; }
.for-dir-group h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--soft); }
.for-dir-group h2::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--tint); }
.for-dir-group ul { margin: 0; padding: 0; list-style: none; }
.for-dir-group li[hidden] { display: none; }
.for-dir-group a { display: block; padding: 7px 0 7px 20px; color: var(--ink); text-decoration: none; font-size: 17px; line-height: 1.3; }
.for-dir-group a:hover, .for-dir-group a:focus-visible { color: var(--tint); text-decoration: underline; text-underline-offset: 3px; }
html[data-theme=dark] .for-dir-group a:hover, html[data-theme=dark] .for-dir-group a:focus-visible { color: color-mix(in srgb, var(--tint) 55%, #fff); }
.for-dir-none { column-span: all; }
.for-hub .front-foot { margin-top: 32px; }

/* Each trade's own rendered icon (docs/goud-work/trade-renders.md, Mahdi, 2026-11-10: «برای هرکدوم
   یک لوگو رندر بگیر»), drawn on white, so it sits on a small white tile in either look. */
.for-dir-group a { display: flex; align-items: center; gap: 12px; padding: 5px 0 5px 20px; }
.for-ico { flex: none; width: 36px; height: 36px; border-radius: 9px; background: #fff; object-fit: contain; }
html[data-theme=dark] .for-ico { box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.for-top-ico { flex: none; width: 72px; height: 72px; border-radius: 18px; background: #fff; box-shadow: var(--e1); }

/* A box over the page (dialog.pop, page.js): the bigger plans on Expenses (Mahdi, 2026-11-10). */
dialog.pop { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 22px 20px 20px; border: 0; border-radius: var(--r-card); background: var(--paper); color: var(--ink); box-shadow: var(--e8); }
dialog.pop::backdrop { background: rgba(8, 8, 8, .5); backdrop-filter: blur(4px); }
dialog.pop h2 { margin: 0 44px 6px 0; }
dialog.pop .plans { margin: 14px 0; }
dialog.pop .note-box { margin: 0 0 12px; }
.pop-x { position: absolute; top: 10px; right: 10px; margin: 0; }
.pop-x button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 99px; background: transparent; color: var(--soft); cursor: pointer; }
.pop-x button:hover { background: var(--rule); color: var(--ink); }
.pop-x button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The receipt big (Mahdi, 2026-11-10): the photo as large as the screen lets it, the X on a dark disc so it shows on white paper. */
dialog.pop-photo { width: fit-content; max-width: calc(100vw - 32px); padding: 0; overflow: hidden; background: #000; }
dialog.pop-photo img { display: block; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); width: auto; height: auto; }
dialog.pop-photo .pop-x button { background: rgba(0, 0, 0, .6); color: #fff; }
dialog.pop-photo .pop-x button:hover { background: rgba(0, 0, 0, .8); color: #fff; }

/* A receipt's lines under its photo (Mahdi, 2026-11-11), read-only. */
.ex-items { margin: 4px 0 12px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--sheet); }
.ex-items > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; font-weight: 600; cursor: pointer; list-style: none; }
.ex-items > summary::-webkit-details-marker { display: none; }
.ex-items > summary::after { content: "›"; color: var(--soft); font-size: 20px; line-height: 1; transition: transform .15s; }
.ex-items[open] > summary::after { transform: rotate(90deg); }
.ex-items > summary .soft { margin-left: auto; font-weight: 400; }
.ex-items ul { margin: 0; padding: 0 14px 10px; list-style: none; }
.ex-items li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--rule); }
.ex-item-what { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.ex-items .amount { flex: none; font-variant-numeric: tabular-nums; }

/* Charts drawn as SVG (Parts/PriceLine, Parts/MonthBars; Mahdi, 2026-11-11): one hue for the one
   series, the text in text colours, hairline grid, the marks the only loud thing. */
.ex-chart { margin: 4px 0 8px; padding: 12px 12px 6px; border-radius: var(--r-card); background: var(--sheet); box-shadow: var(--e1); }
.ex-chart .ex-h { margin-top: 0; }
.chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart-grid { stroke: var(--rule); stroke-width: 1; }
.chart-tick { fill: var(--soft); font-size: 12px; font-variant-numeric: tabular-nums; }
.chart-end { fill: var(--ink); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.chart-line { fill: none; stroke: var(--gl-hot); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-dot { fill: var(--gl-hot); stroke: var(--sheet); stroke-width: 2; }
.chart-col { fill: color-mix(in srgb, var(--gl-hot) 55%, var(--sheet)); }
.chart-col.top { fill: var(--gl-hot); }
.chart-hit { fill: transparent; cursor: default; outline: none; }
.chart-hit:hover, .chart-hit:focus-visible { fill: color-mix(in srgb, var(--ink) 6%, transparent); }
circle.chart-hit:focus-visible { stroke: var(--gl-hot); stroke-width: 2; }
.chart-tip { position: fixed; z-index: 950; max-width: 260px; padding: 7px 10px; border-radius: 8px; background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 600; line-height: 1.3; pointer-events: none; box-shadow: var(--e4); }
.ex-month-list { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 4px 6px; padding: 0; list-style: none; font-size: 13px; }
.ex-month-list li { display: flex; gap: 6px; }
.ex-month-list a { color: var(--soft); }
.ex-more { margin-top: 14px; }
.ex-thing .tiles, .ex-year .tiles { margin-bottom: 8px; }
/* A list row that opens nothing (Where it went) sits like the rows that do. */
.list li.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; min-height: 64px; }
/* On a phone the chart is drawn smaller, so its words are set larger to read the same. */
@media (max-width: 600px) {
  .chart-tick { font-size: 21px; }
  .chart-end { font-size: 23px; }
}

/* A receipt being read (Mahdi, 2026-11-11; page.js, the reading screen): its own screen over the page, in
   place of the site's loading mark. Dark in either look, so the photo and the orange line stand out. */
html.ex-reading .gw-busy { display: none; }
.ex-read { position: fixed; inset: 0; z-index: 1001; display: grid; place-items: center; padding: 16px; background: rgba(8, 8, 8, .86); backdrop-filter: blur(10px); opacity: 0; transition: opacity .25s; }
.ex-read.on { opacity: 1; }
.ex-read-card { display: flex; flex-direction: column; align-items: center; gap: 22px; width: min(320px, 100%); }
.ex-read-photo { position: relative; width: min(220px, 62vw); aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: #111; box-shadow: 0 0 0 2px rgba(255, 255, 255, .12), 0 24px 60px rgba(0, 0, 0, .55); transform: scale(.94); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.ex-read.on .ex-read-photo { transform: none; }
.ex-read-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ex-read-beam { position: absolute; left: 0; right: 0; top: 0; height: 26%; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--gl-hot) 32%, transparent)); border-bottom: 2px solid var(--gl-hot); box-shadow: 0 6px 18px color-mix(in srgb, var(--gl-hot) 55%, transparent); animation: ex-beam 1.7s ease-in-out infinite alternate; }
@keyframes ex-beam { from { transform: translateY(-100%); } to { transform: translateY(385%); } }
.ex-read-steps { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; color: #fff; font-size: 16px; font-weight: 600; }
.ex-read-steps li { display: flex; align-items: center; gap: 12px; opacity: .4; transition: opacity .3s; }
.ex-read-steps li::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 3px; background: rgba(255, 255, 255, .45); }
.ex-read-steps li.ex-step-now { opacity: 1; }
.ex-read-steps li.ex-step-now::before { background: var(--gl-hot); animation: ex-blink .8s ease-in-out infinite alternate; }
.ex-read-steps li.ex-step-done { opacity: .8; }
.ex-read-steps li.ex-step-done::before { background: var(--gl-hot); }
@keyframes ex-blink { from { opacity: 1; transform: scale(1); } to { opacity: .45; transform: scale(.75); } }
/* The reading's bar (Mahdi, 2026-11-12: «پروگرس بار دقیق»; page.js): a cell for each step. The
   first fills with how much of the photo has really gone. The others cannot know how long they
   will take, so the one at work only shimmers, and each turns solid when its step is truly over.
   Beside a step, a number that is counted: the part sent, the lines found. */
.ex-read-live .ex-read-bar, .ex-read-live .ex-read-steps { width: min(250px, 100%); }
.ex-read-bar { display: flex; gap: 5px; margin-bottom: -6px; }
.ex-read-bar i { position: relative; flex: 1; height: 6px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, .16); }
.ex-read-bar i.ex-step-done { background: var(--gl-hot); }
.ex-read-bar b { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 3px; background: var(--gl-hot); transition: width .2s linear; }
.ex-read-bar i.ex-step-now:not(.ex-cell-sent)::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 45%; border-radius: 3px; background: linear-gradient(to right, transparent, var(--gl-hot), transparent); animation: ex-sweep 1.1s ease-in-out infinite; }
@keyframes ex-sweep { from { transform: translateX(-100%); } to { transform: translateX(225%); } }
/* The same bar on a form's own scan (Subscriptions, Renewals): two cells under the picture, on the page's own paper. */
.subs-scan-bar { width: 104px; margin: 0 0 4px; }
.subs-scan-bar i { height: 5px; background: var(--rule); }
.subs-scan-bar i.ex-step-done { background: var(--gl-hot); }
.ex-step-note { margin-left: auto; color: var(--gl-hot); font-weight: 700; font-variant-numeric: tabular-nums; }
.ex-step-note:empty { display: none; }
@media (prefers-reduced-motion: reduce) {
  .ex-read-beam { display: none; }
  .ex-read-steps li.ex-step-now::before { animation: none; }
  .ex-read-photo { transition: none; transform: none; }
  .ex-read-bar b { transition: none; }
  .ex-read-bar i.ex-step-now:not(.ex-cell-sent)::after { animation: none; width: 100%; opacity: .45; }
}

/* A receipt added twice (Mahdi, 2026-11-11): a box in the warning colour with the one before and a take-out. */
.ex-twin { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; padding: 14px 16px; border-radius: var(--r-card); border: 1px solid color-mix(in srgb, var(--warn) 55%, transparent); background: var(--warn-soft); color: var(--ink); }
.ex-twin > b { font-size: 16px; }
.ex-twin .twin { margin-top: 6px; }
.ex-twin form { display: contents; }

/* By kind is a summary, not a receipt (Mahdi, 2026-11-11): no card, quieter words, the bar carries it;
   small headings name the summary and the receipts apart. */
.ex-kinds-sum li { font-size: 15px; }
.ex-kinds-sum .ex-k-name { color: var(--soft); }
.ex-kinds-sum .amount { font-weight: 600; }
.ex-kinds-sum .ex-bar { height: 8px; background: var(--sheet); }
.ex-h-small { margin-top: 14px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--soft); }
.ex-h-small .soft { margin-left: 4px; font-weight: 600; }
/* Subscriptions (Mahdi, 2026-11-11): what the home pays for, a month and a year. A known service is a
   round badge in its own colour with its first letter, never its logo. */
.subs .subs-h { margin: 22px 4px 8px; font-size: 19px; }
.subs-fresh { position: sticky; top: 8px; z-index: 6; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 10px; padding: 12px 16px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); font-weight: 700; text-decoration: none; box-shadow: var(--e8); }
.subs-fresh[hidden] { display: none; }
.subs-sum { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 14px; padding: 18px 18px 16px; border-radius: var(--r-card); background: var(--sheet); border: 1px solid var(--rule); }
.subs-big { display: flex; align-items: baseline; gap: 8px; }
.subs-big-n { font-size: 38px; font-weight: 700; letter-spacing: -.5px; line-height: 1.1; }
.subs-big-w { font-size: 18px; color: var(--soft); }
.subs-year { font-size: 17px; color: var(--soft); }
.subs-who { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.subs-who-one { padding: 4px 10px; border-radius: 99px; background: var(--paper); font-size: 15px; }
.subs-saved { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--good); font-weight: 600; font-size: 15px; }
.subs-rate { margin: 4px 0 0; }
.subs-badge { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--b); color: var(--i); font-weight: 700; font-size: 20px; line-height: 1; box-shadow: inset 0 0 0 1px rgba(128, 128, 128, .35); }
.subs-what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.subs-what b { font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.subs-under { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 15px; color: var(--soft); }
.subs-tag { padding: 0 8px; border-radius: 99px; background: var(--paper); color: var(--ink); font-size: 14px; }
.subs-tag.trial { background: #FFF0E6; color: #8A3300; }
html[data-theme=dark] .subs-tag.trial { background: #3A2414; color: #FFB27A; }
.subs-lock { margin-left: 6px; color: var(--soft); vertical-align: -1px; }
.subs-list { list-style: none; margin: 0; padding: 0; border-radius: var(--r-card); background: var(--sheet); border: 1px solid var(--rule); }
.subs-list > li { position: relative; padding: 10px 6px 10px 14px; }
.subs-list > li + li { border-top: 1px solid var(--rule); }
.subs-row-top { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.subs-more { flex: none; }
.subs-more > summary { list-style: none; display: grid; place-items: center; width: 48px; height: 48px; cursor: pointer; color: var(--soft); font-size: 22px; font-weight: 700; }
.subs-more > summary::-webkit-details-marker { display: none; }
.subs-more[open] > summary { color: var(--ink); }
.subs-menu { position: absolute; right: 8px; top: calc(100% - 6px); z-index: 5; display: flex; flex-direction: column; gap: 8px; width: min(340px, calc(100vw - 40px)); max-height: 75vh; overflow-y: auto; padding: 14px; border-radius: var(--r-card); background: var(--sheet); box-shadow: var(--e8); }
.subs-menu .btn { min-height: 46px; }
.subs-menu .link { padding: 6px 0; text-align: left; }
.subs-rise { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 0 56px; }
.subs-form { display: flex; flex-direction: column; gap: 6px; }
.subs-form input, .subs-form select { min-height: 46px; }
.subs-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.subs-pair > span { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.subs-price-in { display: flex; gap: 6px; }
.subs-price-in select { flex: none; width: 64px; }
.subs-price-in input { flex: 1; min-width: 0; }
.subs-extra { margin: 2px 0; }
.subs-extra > summary { cursor: pointer; padding: 6px 0; color: var(--soft); }
.subs-extra[open] { display: flex; flex-direction: column; gap: 6px; }
.subs-justme { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.subs-draft { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; border-color: var(--gl-hot, #FC630D); }
.subs-ask { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.subs-ask .subs-h { margin: 0 0 4px; }
.subs-ask-row { display: flex; align-items: center; gap: 10px; }
.subs-ask-row .btn { flex: none; min-height: 42px; padding: 0 14px; }
.subs-add { margin: 6px 0 12px; }
.subs-add > summary { list-style: none; display: flex; justify-content: center; align-items: center; gap: 6px; width: 100%; cursor: pointer; }
.subs-add > summary::-webkit-details-marker { display: none; }
.subs-add[open] > summary { display: none; }
.subs-add-in { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--r-card); background: var(--sheet); border: 1px solid var(--rule); }
.subs-add-in > p { margin: 0; }
.subs-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.subs-chip { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 10px 4px 4px; border-radius: 99px; border: 1px solid var(--rule); color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; }
.subs-chip .subs-badge { width: 36px; height: 36px; font-size: 16px; }
.subs-chip span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subs-chip.on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.subs-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 6px 0 14px; }
.subs-way { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding: 18px 16px 14px; border-radius: var(--r-card); background: var(--sheet); border: 1px solid var(--rule); }
.subs-way-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; border-radius: 12px; background: rgba(252, 99, 13, .12); color: #E2560A; }
html[data-theme=dark] .subs-way-icon { background: rgba(252, 99, 13, .18); color: #FF8A47; }
.subs-way-title { font-size: 18px; font-weight: 700; color: var(--ink); }
.subs-way-line { font-size: 15px; line-height: 1.45; color: var(--soft); }
.subs-way-act { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 12px; }
.subs-way-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; cursor: pointer; }
.subs-way-act input:focus-visible + .subs-way-btn { outline: 3px solid var(--accent); outline-offset: 2px; }
/* The scan over an upload card (Mahdi, 2026-11-11: «لودینگ آپلود اسکن فایل باشه»): the picture itself, or a page for a statement, with a line sweeping over it. */
.subs-scan { position: absolute; inset: 0; z-index: 2; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; background: var(--sheet); text-align: center; }
.subs-way.busy .subs-scan { display: flex; animation: subs-scan-in .2s ease-out; }
.subs-scan-doc { position: relative; display: grid; place-items: center; width: 104px; height: 132px; margin-bottom: 6px; overflow: hidden; border-radius: 10px; border: 1px solid var(--rule); background: var(--paper); color: var(--soft); box-shadow: var(--e1, 0 1px 3px rgba(0,0,0,.12)); }
.subs-scan-doc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.subs-scan.has-pic .subs-scan-doc .icon { display: none; }
.subs-scan-doc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(252, 99, 13, 0) 0%, rgba(252, 99, 13, .14) 100%); background-size: 100% 40px; background-repeat: no-repeat; animation: subs-scan-glow 1.8s ease-in-out infinite alternate; }
.subs-scan-line { position: absolute; left: -4px; right: -4px; top: 0; height: 3px; border-radius: 3px; background: #FC630D; box-shadow: 0 0 12px 3px rgba(252, 99, 13, .55); animation: subs-scan-line 1.8s ease-in-out infinite alternate; }
.subs-scan-say { font-size: 17px; font-weight: 700; color: var(--ink); }
.subs-scan-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--soft); }
@keyframes subs-scan-line { from { top: 0; } to { top: calc(100% - 3px); } }
@keyframes subs-scan-glow { from { background-position: 0 -40px; } to { background-position: 0 100%; } }
@keyframes subs-scan-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .subs-scan-line, .subs-scan-doc::after, .subs-way.busy .subs-scan { animation: none; } .subs-scan-line { top: 50%; } }
.subs-way-foot { font-size: 13px; line-height: 1.4; color: var(--soft); margin-top: 2px; }
.subs-way-foot .link { font-size: 13px; padding: 0; margin-left: 2px; }
.subs-addr { display: block; padding: 10px 12px; border-radius: var(--r); border: 1px dashed var(--line, var(--rule)); background: var(--paper); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 14px; text-align: center; overflow-wrap: anywhere; user-select: all; }
.subs-found { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.subs-found[hidden], #drafts[hidden] { display: none; }
.subs-found-list { list-style: none; margin: 0; padding: 0; }
.subs-found-list li + li { border-top: 1px solid var(--rule); }
.subs-found-list label { display: flex; align-items: center; gap: 12px; padding: 10px 2px; cursor: pointer; }
.subs-found-list input[type=checkbox] { flex: none; width: 22px; height: 22px; }
.subs-found-more { margin-top: 2px; border-top: 1px solid var(--rule); }
.subs-found-more > summary { cursor: pointer; padding: 12px 2px; font-weight: 600; color: var(--accent); }
.subs-found-more[open] > summary { color: var(--ink); }
.subs-gone { margin-top: 16px; }
.subs-gone > summary { cursor: pointer; padding: 8px 4px; font-weight: 600; color: var(--soft); }
.subs-gone .subs-badge { filter: grayscale(1); opacity: .6; }
.subs-gone .link { flex: none; font-size: 15px; }
.subs-foot { display: flex; align-items: flex-start; gap: 6px; margin: 10px 2px 0; }
.subs-foot .icon { flex: none; margin-top: 2px; }
.subs-foot .link { font-size: inherit; padding: 0; margin-left: 4px; }
@media (max-width: 420px) {
  .subs-big-n { font-size: 32px; }
  .subs-chips { grid-template-columns: 1fr 1fr; }
  .subs-ask-row { flex-wrap: wrap; }
  .subs-rise { margin-left: 0; }
}

/* Renewals and papers (Mahdi, 2026-11-11): a card for the house, each car and each person, the dates
   as chips that turn orange near and red once past, a drawer for papers with no date. It wears the
   subscriptions page's parts (subs-*), with these for its own. */
.rn-dot { background: var(--gl-hot) !important; }
.rn-ok { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(22, 128, 61, .14); color: #16803D; }
.rn-coming { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.rn-coming > li { border-bottom: 1px solid var(--rule); }
.rn-coming > li:last-child { border-bottom: 0; }
.rn-row-link { padding: 8px 2px; color: var(--ink); text-decoration: none; }
.rn-row-link:hover b { text-decoration: underline; }
.rn-when { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 84px; padding: 6px 10px; border-radius: 12px; background: var(--paper); text-align: right; font-size: 13px; color: var(--soft); }
.rn-when b { font-size: 15px; color: var(--ink); }
.rn-when.soon { background: #FFF0E6; color: #8A3300; }
.rn-when.soon b { color: #8A3300; }
.rn-when.over { background: #FDE8E8; color: #A11B1B; }
.rn-when.over b { color: #A11B1B; }
html[data-theme=dark] .rn-when.soon { background: #3A2414; color: #FFB27A; }
html[data-theme=dark] .rn-when.soon b { color: #FFB27A; }
html[data-theme=dark] .rn-when.over { background: #3B1717; color: #FF9C9C; }
html[data-theme=dark] .rn-when.over b { color: #FF9C9C; }
html[data-theme=dark] .rn-ok { background: rgba(80, 200, 120, .16); color: #7FD9A0; }
.rn-add { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 6px 0 12px; }
.rn-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin: 6px 0 10px; }
.rn-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 12px 12px 14px; border-radius: var(--r-card); background: var(--sheet); border: 1px solid var(--rule); }
.rn-card-head { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.rn-card-head .subs-menu { top: 56px; }
.rn-tile { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--paper); color: var(--soft); }
.rn-thumb { flex: none; width: 44px; height: 44px; border-radius: 10px; object-fit: cover; border: 1px solid var(--rule); background: var(--paper); }
.rn-plate { display: inline-block; padding: 0 6px; border-radius: 4px; background: #FFD400; color: #111; font-family: "Arial Black", Arial, sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .5px; line-height: 20px; border: 1px solid rgba(0, 0, 0, .35); }
.rn-list { list-style: none; margin: 0; padding: 0; }
.rn-list > li + li { border-top: 1px solid var(--rule); }
.rn-card-add { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.rn-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 4px 12px 4px 8px; border-radius: 99px; border: 1px solid var(--rule); color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; background: var(--sheet); }
.rn-chip.soft { color: var(--soft); }
.rn-chip:hover { border-color: var(--accent); }
.rn-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.rn-person-add { margin: 2px 2px 14px; }
.rn-person-add > summary { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 6px 0; color: var(--soft); }
.rn-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; }
.rn-inline input:not([type=file]) { flex: 1; min-width: 160px; min-height: 46px; }
.rn-plate-in { min-height: 50px; text-align: center; text-transform: uppercase; font-family: "Arial Black", Arial, sans-serif; font-weight: 700; font-size: 20px; letter-spacing: 1px; background: #FFD400; color: #111; border: 1px solid rgba(0, 0, 0, .4); border-radius: var(--r); }
.rn-plate-in::placeholder { color: rgba(0, 0, 0, .35); }
.rn-drawer { margin-top: 8px; }
.rn-drawer > p { margin: 0 4px 8px; }
.rn-drawer .rn-chip { margin-top: 10px; }
.rn-search { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--rule); background: var(--sheet); color: var(--soft); }
.rn-search input { flex: 1; min-width: 0; min-height: 46px; border: 0; background: transparent; padding: 0; box-shadow: none; }
.rn-search input:focus { outline: none; }
.rn-search:focus-within { border-color: var(--accent); }
.rn-h3 { margin: 18px 4px 8px; font-size: 16px; }
.rn-date { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 14px; }
.rn-date-in { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 170px; }
.rn-undated { display: flex; align-items: center; gap: 8px; min-height: 46px; }
.rn-form { margin-bottom: 14px; }
.rn-form input[type=file] { min-height: 0; padding: 8px 0; }
.rn-state { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 12px; padding: 14px 16px; border-radius: var(--r-card); background: var(--sheet); border: 1px solid var(--rule); }
.rn-state b { font-size: 19px; }
.rn-state span { color: var(--soft); font-size: 15px; }
.rn-state.soon { background: #FFF0E6; border-color: #F7C9A8; }
.rn-state.soon b, .rn-state.soon span { color: #8A3300; }
.rn-state.over { background: #FDE8E8; border-color: #F2B8B8; }
.rn-state.over b, .rn-state.over span { color: #A11B1B; }
html[data-theme=dark] .rn-state.soon { background: #3A2414; border-color: #6B3D1E; }
html[data-theme=dark] .rn-state.soon b, html[data-theme=dark] .rn-state.soon span { color: #FFB27A; }
html[data-theme=dark] .rn-state.over { background: #3B1717; border-color: #6E2A2A; }
html[data-theme=dark] .rn-state.over b, html[data-theme=dark] .rn-state.over span { color: #FF9C9C; }
.rn-price { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 2px 12px; font-size: 16px; }
.rn-note { margin: 0 2px 12px; color: var(--soft); }
.rn-pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin: 4px 0 8px; }
.rn-pics figure { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.rn-pics img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; border: 1px solid var(--rule); background: var(--paper); }
.rn-renew { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 12px; }
.rn-renew .subs-h { margin: 0 0 4px; }
.rn-renew input[type=file] { min-height: 0; padding: 8px 0; }
.rn-edit { margin: 0 0 12px; }
.rn-edit > summary { cursor: pointer; margin: 0; }
.rn-edit[open] > summary { margin-bottom: 10px; }
.rn-history .rn-thumb { width: 38px; height: 38px; }
.rn-off { margin: 18px 4px 6px; }
@media (max-width: 420px) {
  .rn-cards { grid-template-columns: 1fr; }
  .rn-when { min-width: 74px; padding: 5px 8px; }
}
.rn .subs-form input[type=checkbox] { flex: none; width: 22px; height: 22px; min-height: 0; margin: 0; }
.rn .rn-undated { flex: 1 1 100%; min-height: 0; padding: 2px 0 4px; }
.rn .subs-justme { display: flex; }
.rn-offer { padding: 10px 14px; border-radius: var(--r-card); background: var(--paper); }
.rn .rn-edit > summary.subs-h { margin: 0; list-style-position: inside; }

/* The logo switch (Parts/LogoSwitch.razor, Mahdi 2026-11-11): the bar's logo, goud.work on a
   business and goud.home on a home, with the place in use and a chevron beside it; one tap opens
   every business and home together. A phone gets the list as a sheet from the bottom. */
.lsw { position: relative; min-width: 0; }
.lsw > summary { list-style: none; cursor: pointer; }
.lsw > summary::-webkit-details-marker { display: none; }
.lsw-btn { display: flex; align-items: center; gap: 12px; margin: -4px -8px; padding: 4px 8px; border-radius: 14px; color: #fff; }
.lsw-btn:hover, .lsw[open] > .lsw-btn { background: rgba(255,255,255,.08); }
.lsw-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lsw-logo { display: block; height: 42px; width: auto; }
@media (min-width: 720px) { .lsw-logo { height: 48px; } }
.lsw-place { display: flex; align-items: center; gap: 8px; min-width: 0; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.18); font-size: 15px; font-weight: 600; }
.lsw-place .acct-face { width: 28px; height: 28px; font-size: 13px; }
.lsw-name { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lsw-chev { opacity: .7; font-size: 13px; }
.lsw-menu { position: absolute; left: 0; top: calc(100% + 10px); z-index: 70; width: 320px; max-height: calc(100dvh - 90px); overflow: auto; overscroll-behavior: contain; padding: 6px 0; border-radius: 14px; background: var(--sheet); color: var(--ink); box-shadow: var(--e8); font-size: 15px; font-weight: 400; }
.lsw-menu form { margin: 0; }
.lsw-menu h3 { display: flex; align-items: center; gap: 8px; margin: 12px 16px 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.lsw-menu h3:first-of-type { margin-top: 6px; }
.lsw-dot { width: 10px; height: 10px; background: #FC630D; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
.lsw-dot.home { background: #249C65; }
.lsw-menu .pick-row { color: var(--ink); }
.lsw-menu .pick-add { border-top: 0; }
.lsw-menu .pick-tick { color: #FC630D; }
.lsw.home .lsw-menu .pick-tick { color: #249C65; }
.lsw-key { flex: none; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--rule); color: var(--soft); font: inherit; font-size: 11px; }
@media (hover: none) { .lsw-key { display: none; } }
.lsw-start { display: block; margin-top: 4px; padding: 10px 16px 6px; border-top: 1px solid var(--rule); color: var(--soft); font-size: 14px; text-decoration: none; }
.lsw-start:hover { color: var(--ink); }
.lsw-grip { display: none; }
@media (max-width: 559px) {
  .lsw-place { padding-left: 10px; gap: 6px; }
  .lsw-name { display: none; }
  .lsw[open]::before { content: ""; position: fixed; inset: 0; z-index: 69; background: rgba(0,0,0,.45); }
  .lsw-menu { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 80dvh; padding: 8px 0 calc(12px + env(safe-area-inset-bottom, 0px)); border-radius: 20px 20px 0 0; animation: lsw-up .2s ease-out; }
  .lsw-grip { display: block; width: 40px; height: 4px; margin: 2px auto 6px; border-radius: 2px; background: var(--rule); }
  .lsw-menu .pick-row { min-height: 52px; }
}
@keyframes lsw-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lsw-menu { animation: none; } }

/* Paying for plans (2026-11-11): the pay page, the plan part's places and cards, and the receipt. */
.pay fieldset { border: 0; margin: 0 0 18px; padding: 0; }
.pay legend { font-weight: 700; margin-bottom: 8px; }
.plan-card.pick { cursor: pointer; position: relative; }
.plan-card.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.plan-card.pick:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.plan-card.pick:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.pay-sum { border-top: 1px solid var(--rule); margin: 8px 0 14px; padding-top: 10px; }
.pay-line, .pay-total { display: flex; justify-content: space-between; gap: 12px; margin: 4px 0; }
.pay-line span { overflow-wrap: anywhere; }
.pay-total { font-size: 20px; border-top: 1px solid var(--rule); padding-top: 8px; margin-top: 8px; }
.pay-total b { font-size: 24px; }
.pay-window { display: flex; flex-direction: column; gap: 10px; }
.place-list { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 16px; }
.place-pay { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--r-card); background: var(--sheet); }
.place-pay-head { display: flex; flex-direction: column; gap: 2px; }
.place-pay-head b { font-weight: 600; overflow-wrap: anywhere; }
.inline-pick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inline-pick select { max-width: 100%; }
.warn-box { background: var(--warn-soft); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin-bottom: 10px; }
.panel-form { display: grid; gap: 10px; max-width: 520px; margin-bottom: 20px; }
.panel-form label { display: grid; gap: 4px; }
/* The panel sign-in's remember box (2026-11-13). */
.panel-remember { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--soft, inherit); }
.panel-remember input { width: 18px; height: 18px; margin: 0; }
/* A lead's email, filled in, to copy into a mailbox (2026-11-13). */
.panel-mail { width: 100%; max-width: 720px; font: inherit; font-size: 14px; line-height: 1.5; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper, transparent); color: inherit; }
/* The lead review (2026-11-13): the page in a phone-sized frame beside the email and the two buttons. */
.lead-review-in { display: grid; grid-template-columns: 392px minmax(0, 1fr); gap: 20px; align-items: start; }
.lead-look { width: 392px; height: 720px; border: 1px solid var(--rule); border-radius: 22px; background: #fff; }
.lead-review-side { display: grid; gap: 12px; }
.lead-review-acts { display: flex; gap: 12px; flex-wrap: wrap; }
.lead-review-acts .btn { min-width: 140px; }
.lead-social { display: grid; gap: 10px; }
.lead-social-find { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
@media (max-width: 900px) { .lead-review-in { grid-template-columns: 1fr; } .lead-look { width: 100%; height: 640px; } }
/* A hunt as it looks: the goud.work mark turning and the counts (2026-11-13). */
.lead-hunting { display: flex; align-items: center; gap: 14px; padding: 12px 0; }
.lead-hunting .mk { color: var(--brand, #FC630D); flex: none; }
.panel-table tr.on td { background: color-mix(in srgb, var(--brand, #FC630D) 8%, transparent); }
/* A plan's receipt as paper (Mahdi, 2026-11-12): white in either look, the logo and title on top, from and
   for side by side with a stamp, the lines under a dark head, the sums in an orange-edged band, a foot. */
.prc-sheet { max-width: 820px; }
.prc-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.prc {
  --prc-ink: #1F2A37; --prc-soft: #6B7280; --prc-rule: #E3E7ED; --prc-hot: #FC630D; --prc-ok: #15803D;
  position: relative; background: #FFFFFF; color: var(--prc-ink); border: 1px solid var(--rule); border-radius: var(--r-card);
  border-top: 6px solid var(--prc-hot); padding: 36px 40px 28px; font-size: 15px; line-height: 1.5;
  display: flex; flex-direction: column; gap: 28px; box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.prc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.prc-logo { width: 170px; height: auto; display: block; }
.prc-title { text-align: right; margin-left: auto; }
.prc-title h1 { margin: 0 0 8px; font-size: 26px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--prc-ink); }
.prc-facts { display: grid; grid-template-columns: auto auto; gap: 2px 14px; margin: 0; font-size: 14px; justify-content: end; }
.prc-facts dt { color: var(--prc-soft); text-align: right; }
.prc-facts dd { margin: 0; font-weight: 700; text-align: right; }
.prc-parties { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; padding: 18px 20px; background: #F7F8FA; border-radius: 10px; }
.prc-parties span { color: var(--prc-soft); }
.prc-label { margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--prc-soft); }
.prc-stamp {
  position: absolute; right: 22px; top: 50%; translate: 0 -50%; rotate: -8deg; padding: 6px 16px;
  border: 3px solid var(--prc-ok); border-radius: 8px; color: var(--prc-ok); font-size: 22px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; opacity: .85; pointer-events: none;
}
.prc-stamp.back { border-color: #B45309; color: #B45309; }
.prc-lines { width: 100%; border-collapse: collapse; }
.prc-lines th { background: var(--prc-ink); color: #fff; text-align: left; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 9px 12px; }
.prc-lines th:first-child { border-radius: 6px 0 0 6px; }
.prc-lines th:last-child { border-radius: 0 6px 6px 0; }
.prc-lines td { padding: 14px 12px; border-bottom: 1px solid var(--prc-rule); vertical-align: top; }
.prc-lines td b { display: block; }
.prc-sub { display: block; color: var(--prc-soft); font-size: 13px; }
.prc .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.prc-sums { margin-left: auto; width: min(100%, 320px); display: flex; flex-direction: column; gap: 6px; }
.prc-row { display: flex; justify-content: space-between; padding: 0 14px; color: var(--prc-soft); font-variant-numeric: tabular-nums; }
.prc-total { display: flex; justify-content: space-between; padding: 12px 14px; background: #FFF4EC; border-left: 4px solid var(--prc-hot); border-radius: 6px; font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.prc-note { margin: 4px 0 0; color: var(--prc-soft); font-size: 13px; text-align: right; }
.prc-foot { border-top: 1px solid var(--prc-rule); padding-top: 14px; color: var(--prc-soft); font-size: 12.5px; display: flex; flex-direction: column; gap: 4px; }
.prc-foot p { margin: 0; }
@media (max-width: 560px) {
  .prc { padding: 22px 16px 18px; gap: 22px; font-size: 14px; }
  .prc-logo { width: 130px; }
  .prc-title { text-align: left; margin-left: 0; }
  .prc-facts, .prc-facts dt, .prc-facts dd { justify-content: start; text-align: left; }
  .prc-stamp { top: 14px; translate: none; font-size: 16px; }
  .prc-lines th, .prc-lines td { padding-left: 8px; padding-right: 8px; }
}
@media print {
  .no-print { display: none !important; }
  body:has(.prc) .bar, body:has(.prc) .demo-note { display: none !important; }
  body:has(.prc) { background: #fff; }
  body:has(.prc) .page { padding: 0; }
  .prc-sheet { max-width: none; }
  .prc { border: 0; border-top: 6px solid var(--prc-hot); border-radius: 0; box-shadow: none; padding: 10mm 8mm 6mm; }
  .prc, .prc * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* The drawn car in the colour the DVLA holds (Plates.Paint), with a thin edge so a white or silver car shows on a pale tile. */
.glyph .gd { fill: var(--car, var(--gl-ink)); }
.rn-car-paint .glyph .gd { stroke: rgba(0, 0, 0, .35); stroke-width: .9; }
.rn-car-pic { position: relative; flex: none; }
.rn-car-pic img { display: block; width: 44px; height: 44px; border-radius: 12px; object-fit: cover; border: 1px solid var(--rule); }
.rn-photo-form { display: flex; flex-direction: column; gap: 6px; }
html[data-theme=dark] .rn-car-paint .glyph .gd { stroke: rgba(255, 255, 255, .55); }
/* Get quotes (2026-11-11): the box on an insurance's page, only while a partner is switched on in the panel. */
.rn-quote { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; border-color: var(--gl-hot, #FC630D); }
.rn-quote .subs-h { margin: 0; }
.rn-quote-say { margin: 0; }
.rn-quote .btn { display: flex; align-items: center; justify-content: center; gap: 8px; }
.rn-tag-quote { padding: 0 8px; border-radius: 99px; background: rgba(252, 99, 13, .14); color: #B23F00; font-size: 14px; font-weight: 600; }
html[data-theme=dark] .rn-tag-quote { color: #FFB27A; }
/* The sample recipe in the front page's phone (2026-11-11): said plainly that it is a sample. */
.rc-sample { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin: 0 0 -6px; padding: 3px 10px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 700; }
.rc-sample-end { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 0; padding: 14px; border-radius: var(--r-card); background: var(--sheet); border: 1px solid var(--rule); }
.rc-sample-end a { font-weight: 700; }
/* Running low (Mahdi, 2026-11-12): the cupboard. Its rows are the shopping list's, with the two taps on the right;
   on a narrow phone the taps drop under the name. */
.st-dot { background: var(--gl-hot) !important; }
.st .st-items li { flex-wrap: wrap; }
.st-row { flex: 1 1 190px; min-width: 0; display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 10px 6px 10px 16px; }
.st-acts { flex: none; display: flex; gap: 6px; margin-left: auto; padding: 0 2px 0 12px; }
.st-items li:has(.shop-more) .st-acts { padding-right: 0; }
.st-items li:not(:has(.shop-more)) .st-acts { padding-right: 12px; }
.st-act { min-height: 40px; padding: 4px 13px; border-radius: 99px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.st-act:hover { background: var(--accent-dark); }
.st-act.ghost { background: none; border-color: var(--line); color: var(--ink); }
.st-act.ghost:hover { background: none; border-color: var(--line-hover); }
.st-items li.going .st-act { pointer-events: none; }
@media (max-width: 479px) {
  .st-row { flex-basis: 100%; min-height: 50px; padding-bottom: 4px; }
  .st-acts { margin-left: 74px; padding: 0 0 10px; }
  .st-items li:has(.shop-more) .st-row { flex-basis: calc(100% - 48px); }
  .st-items li .shop-more { order: 2; }
  .st-items li .st-acts { order: 3; flex-basis: calc(100% - 74px); }
}
.st-h { display: flex; align-items: center; gap: 6px; }
.st-use .st-h { color: var(--warn); }
.st-use .shop-items { box-shadow: var(--e1), inset 4px 0 0 var(--warn); }
.st-use .st-when { color: var(--warn); font-weight: 600; }
.st-use .st-late .st-when { color: var(--danger); }
.st-guess .shop-items { box-shadow: var(--e1), inset 4px 0 0 var(--gl-hot); }
.st-note { margin: 6px 2px 0; }
.st-tag { flex: none; padding: 0 8px; border-radius: 99px; background: var(--warn-soft); color: var(--warn); font-size: 13px; font-weight: 700; white-space: nowrap; }
.st-tag.in { background: var(--good-soft); color: var(--good); }
.st-tag.ice { background: #E1EEF8; color: #23608F; }
.st-low .shop-name { color: var(--soft); }
.st-out { margin-top: 8px; }
.st-out > summary { cursor: pointer; margin: 2px 2px 8px; font-size: 15px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--soft); }
.st-out .shop-name { color: var(--soft); }
.st-cook { margin: 8px 0 0; }
.st-cook > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; color: var(--accent); font-weight: 600; }
.st-ideas { list-style: none; margin: 4px 0 0; padding: 0; background: var(--sheet); border-radius: var(--r-card); box-shadow: var(--e1); }
.st-ideas li + li { border-top: 1px solid var(--rule); }
.st-ideas a { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 14px; color: var(--ink); text-decoration: none; }
.st-ideas a > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-ideas img { border-radius: 10px; object-fit: cover; flex: none; }
.st-shelf[hidden], .st-drafts[hidden] { display: none; }
.st-drafts .shop-parts .shop-qty { margin-left: 6px; }
.st-quiet { display: flex; align-items: flex-start; gap: 6px; margin: 12px 2px 0; }
.st-quiet .icon { flex: none; margin-top: 2px; color: var(--soft); }
.st .empty .glyph { align-self: center; }
/* The cupboard's guesses above the shopping list: each a pair, add it or say there is still some. */
.shop-low[hidden] { display: none; }
.shop-pair { flex: none; display: inline-flex; }
.shop-pair .shop-chip:first-child { border-radius: 99px 0 0 99px; padding-right: 10px; }
.shop-pair .shop-still { border-radius: 0 99px 99px 0; border-left: 0; padding-left: 10px; color: var(--soft); font-weight: 500; font-size: 15px; }
/* What the cupboard has, marked on a dish's parts; and what ran out while cooking. */
.cook-parts .st-tag { margin-left: 6px; }
.cook-parts .st-tag + .soft { margin-left: auto; }
.cook-used { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.cook-used[hidden] { display: none; }
.cook-used .cook-h { margin-bottom: 0; }
.cook-used-chips { flex-wrap: wrap; overflow: visible; }
html[data-theme=dark] .st-tag.ice { background: #17324A; color: #9CCBF0; }

/* One page, one click (2026-11-12): now and after side by side, the stop at the foot, the plan in the account menu, an upgrade under a cap. */
.pay-place { margin: 0 0 10px; }
.pay-compare { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: stretch; margin: 0 0 18px; }
.pay-side { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--r-card); background: var(--sheet); }
.pay-side b { font-size: 18px; overflow-wrap: anywhere; }
.pay-side.after { border-color: var(--brand); background: var(--brand-soft); }
.pay-arrow { align-self: center; font-size: 22px; color: var(--soft); }
.pay-say { font-weight: 600; margin: 10px 0 0; }
.pay-stop { margin-top: 28px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
/* Stopping a plan is there but quiet (Mahdi, 2026-11-12: «دکمه استاپ خیلی تو چشم نباشه»). */
.quiet-stop { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; box-shadow: none; }
.quiet-stop:hover { color: var(--ink); }
.plan-stop-foot { margin-top: 36px; padding-top: 14px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 6px; }
.plan-card .pill.paid { margin-inline-start: 6px; vertical-align: middle; }
.acct-plan .acct-plan-go { font-weight: 700; color: var(--accent); }
.said-up { display: block; width: fit-content; margin-top: 10px; }
.plan-go { margin-top: 8px; }
@media (max-width: 420px) { .pay-compare { grid-template-columns: 1fr; } .pay-arrow { transform: rotate(90deg); justify-self: center; } }
/* Home jobs (2026-11-12): the list with its ticks, a job's own page, the prices side by side, the page a link opens. */
.hj-dot { background: var(--gl-hot) !important; }
.hj-add { display: flex; gap: 8px; margin: 0 0 12px; }
.hj-add input { flex: 1; min-width: 0; min-height: 52px; font-size: 18px; }
.hj-add .btn { flex: none; min-width: 52px; min-height: 52px; display: grid; place-items: center; }
.hj-ways { margin-top: 0; }
.hj-ready > summary { display: flex; flex-direction: column; gap: 6px; cursor: pointer; list-style: none; }
.hj-ready > summary::-webkit-details-marker { display: none; }
.hj-ready > summary::after { content: "Show the list"; margin-top: 8px; font-weight: 700; color: var(--accent); }
.hj-ready[open] > summary::after { content: "Hide the list"; }
.hj-ready-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.hj-ready-form fieldset, .hj-round, .hj-near, .hj-stars { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hj-ready-form legend, .hj-round legend, .hj-near legend { padding: 0; margin-bottom: 4px; font-size: 14px; font-weight: 700; color: var(--soft); }
.hj-ready-form label, .hj-round label, .hj-stars label { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 2px 4px; border-radius: var(--r); cursor: pointer; }
.hj-ready-form label > span:first-of-type { flex: 1; min-width: 0; }
.hj-ready-form label.has { color: var(--soft); cursor: default; }
.hj-ready-form input[type=checkbox], .hj-round input, .hj-near input, .hj-linkpick input, .hj-stars input { flex: none; width: 22px; height: 22px; accent-color: var(--accent); }
.hj-list > li { padding-left: 8px; }
.hj-list.late > li { box-shadow: inset 4px 0 0 var(--warn); }
.hj-tick { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 2px solid var(--line); background: var(--sheet); color: transparent; cursor: pointer; }
.hj-tick:hover, .hj-tick:focus-visible { border-color: var(--accent); color: var(--accent); }
.hj-tick.is-done { border-color: var(--good); background: var(--good); color: var(--good-ink); cursor: default; }
.hj-what { color: inherit; text-decoration: none; }
.hj-what:hover b { text-decoration: underline; }
.hj-me { font-weight: 700; color: var(--ink); }
.hj-done > summary { cursor: pointer; }
.hj-done .hj-what b { font-weight: 500; color: var(--soft); }
.hj-job .q { margin: 6px 0 0; overflow-wrap: anywhere; }
.hj-job .lead { margin: 2px 0 12px; }
.hj-state { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; padding: 14px; border-radius: var(--r-card); background: var(--sheet); border: 1px solid var(--rule); }
.hj-state.late { border-color: var(--warn); }
.hj-state.is-done { background: var(--good-soft); border-color: transparent; }
.hj-state.is-done b { display: flex; align-items: center; gap: 6px; color: var(--good); }
.hj-state .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 52px; }
.hj-note { white-space: pre-line; overflow-wrap: anywhere; }
.hj-asks { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; align-items: start; margin-bottom: 14px; }
.hj-ask { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hj-ask > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hj-ask-who { font-size: 18px; overflow-wrap: anywhere; }
.hj-ask.taken { border-color: var(--good); box-shadow: 0 0 0 1px var(--good); }
.hj-ask.closed { opacity: .7; }
.hj-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.hj-pounds { font-size: 34px; font-weight: 700; letter-spacing: -.5px; line-height: 1.1; }
.hj-line, .hj-comes { margin: 0; overflow-wrap: anywhere; }
.hj-comes { display: flex; align-items: center; gap: 6px; }
.hj-ask .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }
.hj-take > summary { display: flex; align-items: center; justify-content: center; min-height: 50px; list-style: none; cursor: pointer; text-align: center; }
.hj-take[open] > summary { background: none; color: var(--accent); box-shadow: none; border: 1px solid var(--accent); }
.hj-take > summary::-webkit-details-marker { display: none; }
.hj-take[open] > summary { margin-bottom: 10px; }
.hj-talk > summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.hj-talk[open] > summary { margin-bottom: 8px; }
.hj-said { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hj-said li { display: flex; flex-direction: column; gap: 2px; max-width: 92%; padding: 8px 10px; border-radius: 12px; background: var(--paper); overflow-wrap: anywhere; }
.hj-said li.mine { align-self: flex-end; background: var(--brand-soft); }
.hj-said li span { white-space: pre-line; }
.hj-said li b { font-size: 14px; }
.hj-say { display: flex; flex-direction: column; gap: 6px; }
.hj-say textarea { min-height: 64px; }
.hj-show { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule); }
.hj-show-row { display: flex; flex-wrap: wrap; gap: 8px; }
.hj-show-row input { flex: 1; min-width: 150px; min-height: 46px; }
.hj-pass { align-self: flex-start; }
.hj-stages { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 4px 0 0; padding: 0; }
.hj-stages li { padding: 8px 4px 0; border-top: 4px solid var(--rule); font-size: 14px; color: var(--soft); overflow-wrap: anywhere; }
.hj-stages li.on { border-color: var(--brand); color: var(--ink); font-weight: 600; }
.hj-ask-form, .hj-review, .hj-demo-say { margin: 0 0 14px; }
.hj-demo-say { display: flex; flex-direction: column; gap: 4px; }
.hj-ask-form .subs-h, .hj-review .subs-h { margin: 0 0 4px; }
.hj-near label, .hj-linkpick { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--rule); border-radius: var(--r); cursor: pointer; }
.hj-near label:has(input:checked), .hj-linkpick:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.hj-near-what, .hj-linkpick > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hj-near { gap: 6px; margin-top: 6px; }
.hj-linkpick { margin: 6px 0; }
.hj-none { margin: 6px 0 0; }
.hj-stars { flex-direction: row; flex-wrap: wrap; gap: 6px; }
.hj-stars label { padding: 2px 10px; border: 1px solid var(--rule); }
.hj-history { margin-bottom: 8px; }
.hj .rn-edit > summary.subs-h { margin: 0; list-style-position: inside; }
.hj-q { display: flex; flex-direction: column; gap: 12px; }
.hj-q h1 { margin: 0; overflow-wrap: anywhere; }
.hj-q .rn-pics { margin: 0; }
.hj-q-from { margin: 0; color: var(--soft); }
.hj-q-words { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.hj-q .boxed { display: flex; flex-direction: column; gap: 8px; }
.hj-q .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }
.hj-q-rows { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; }
.hj-q-rows dt { color: var(--soft); }
.hj-q-rows dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.pe-home { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--rule); }
.pe-home-price { display: grid; grid-template-columns: minmax(90px, 130px) minmax(0, 1fr); gap: 8px; }
.pe-home-price .wide { grid-column: 1 / -1; }
.pe-home input, .pe-home textarea { min-height: 44px; }
.pe-home-said { font-size: 15px; }
@media (max-width: 420px) { .hj-pounds { font-size: 30px; } .hj-stages li { font-size: 13px; } }
/* Pets (2026-11-12): each pet with today's ticks, its card, the sitter link, the tag's page and the print sheet. */
.pt-dot { background: var(--gl-hot) !important; }
.pt-found { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 14px; padding: 14px 16px; border-radius: var(--r-card); background: var(--warn-soft); color: var(--ink); text-decoration: none; box-shadow: inset 4px 0 0 var(--warn); }
.pt-found > span { display: flex; flex-direction: column; gap: 2px; }
.pt-found b { font-size: 17px; }
.pt-found.calm { background: var(--sheet); box-shadow: inset 4px 0 0 var(--accent); border: 1px solid var(--rule); }
.pt-pet { margin: 0 0 18px; padding: 12px 12px 6px; border-radius: var(--r-card); background: var(--sheet); border: 1px solid var(--rule); }
.pt-head { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; min-height: 56px; }
.pt-head:hover b { text-decoration: underline; }
.pt-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pt-name b { font-size: 19px; }
.pt-face { flex: none; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--paper); }
.pt-face.big { width: 96px; height: 96px; }
.pt-face.huge { width: 160px; height: 160px; margin: 0 auto 12px; display: block; }
.pt-noface { display: grid; place-items: center; }
.pt-care { margin: 6px 0 4px; }
.pt-care .subs-what b { font-weight: 600; }
.pt-by { color: var(--accent); font-weight: 600; }
.pt-dates { list-style: none; margin: 4px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pt-dates li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: var(--r); background: var(--paper); }
.pt-dates li.late { background: var(--warn-soft); }
.pt-datelist li.late { box-shadow: inset 4px 0 0 var(--warn); padding-left: 8px; }
.pt-offer { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; }
.pt-offer-act, .pt-sitter-act, .pt-asks, .pt-find-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pt-add select { flex: none; width: auto; min-height: 52px; }
.pt-away { margin-top: 20px; }
.pt-lock { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-card); background: var(--paper); }
.pt-lock > span { display: flex; flex-direction: column; gap: 4px; }
.pt-sample { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; padding: 12px 14px; border: 2px dashed var(--rule); border-radius: var(--r-card); color: var(--soft); }
.pt-sample b { color: var(--ink); }
.pt-sample-tag { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.pt-sitter { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; }
.pt-new-sitter > summary, .pt-edit > summary { cursor: pointer; }
.pt-new-sitter > summary { display: flex; flex-direction: column; gap: 6px; list-style: none; }
.pt-new-sitter > summary::-webkit-details-marker { display: none; }
.pt-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.pt-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.pt-form label .soft { font-weight: 400; }
.pt-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 420px) { .pt-two { grid-template-columns: 1fr; } }
.pt-who { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.pt-who legend { padding: 0; margin-bottom: 4px; font-weight: 600; }
.pt-who label { flex-direction: row; align-items: center; gap: 6px; font-weight: 400; min-height: 40px; }
.pt-edit { margin: 4px 0 0; }
.pt-more { margin: 8px 0 0; }
.pt-row-acts { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; margin-top: 8px; }
.pt-snap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pt-snap .subs-scan { flex-basis: 100%; }
.pt-card-head { display: flex; gap: 16px; align-items: center; margin: 4px 0 16px; }
.pt-card-head h1 { margin: 0; }
.pt-card-head p { margin: 2px 0 0; }
.pt-photo { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pt-memory { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; }
.pt-memory ul { margin: 0; padding-left: 20px; }
.pt-finds .pt-find { display: flex; flex-direction: column; gap: 6px; }
.pt-finds .pt-find.is-new { box-shadow: inset 4px 0 0 var(--warn); padding-left: 10px; }
.pt-finds p { margin: 0; overflow-wrap: anywhere; }
.pt-food-line { margin: 0 0 8px; }
.pt-weights { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; }
.pt-weights li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.pt-tag { display: flex; gap: 16px; align-items: flex-start; }
.pt-qr { flex: none; width: 132px; height: 132px; border-radius: 12px; overflow: hidden; background: #fff; }
.pt-qr svg { width: 100%; height: 100%; display: block; }
@media (max-width: 420px) { .pt-tag { flex-direction: column; } }
.pt-lost { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.pt-lost.on { background: var(--warn-soft); border-color: transparent; }
.pt-goodbye { margin-top: 28px; }
.pt-ways { margin: 6px 0; }
.pt-tagpage { text-align: center; }
.pt-tagpage .pt-form { text-align: left; margin-top: 16px; }
.pt-tagpage.lost h1 { color: var(--warn); }
.pt-lost-say { font-size: 20px; font-weight: 700; color: var(--warn); }
.pt-sit-home { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; }
.pt-sit-home p { margin: 0; white-space: pre-line; }
.pt-sit-photo { margin-top: 8px; }
/* The print sheet: six tags to cut out, and the poster for a lost pet. */
.pt-print { background: #fff; color: #16202B; }
.pt-sheet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10mm; padding: 10mm; }
.pt-print-say { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pt-cut { display: flex; flex-direction: column; align-items: center; gap: 2mm; padding: 4mm; border: 1px dashed #9AA3AD; border-radius: 4mm; text-align: center; font-size: 11pt; }
.pt-cut-qr { width: 28mm; height: 28mm; }
.pt-cut.big .pt-cut-qr { width: 40mm; height: 40mm; }
.pt-cut-qr svg, .pt-poster-qr svg { width: 100%; height: 100%; display: block; }
.pt-cut span { font-size: 9pt; }
.pt-poster { max-width: 190mm; margin: 0 auto; padding: 10mm; text-align: center; }
.pt-poster-lost { margin: 0; font-size: 64pt; font-weight: 800; line-height: 1; color: #B23F00; text-transform: uppercase; letter-spacing: .04em; }
.pt-poster h1 { margin: 2mm 0; font-size: 40pt; }
.pt-poster img { max-width: 100%; max-height: 110mm; border-radius: 4mm; object-fit: cover; }
.pt-poster-looks { font-size: 18pt; font-weight: 600; }
.pt-poster-qr { width: 60mm; height: 60mm; margin: 4mm auto; }
.pt-poster-phone { font-size: 22pt; font-weight: 700; }
@media print {
  .pt-print ~ .made, .no-print { display: none !important; }
  .page.bare:has(.pt-print) { padding: 0; }
}
/* A recipe read in another language (Mahdi, 2026-11-12: «ترجمه به زبان دلخواه برای رسیپی و طرز تهیه»):
   the picker under the name, its waiting line, and the name as written under a translated one. */
.rc-tongue { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }
.rc-tongue-label { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--soft); font-weight: 600; font-size: 15px; }
.rc-tongue select { width: auto; max-width: 100%; min-height: 44px; padding: 8px 12px; font-size: 16px; }
.rc-tongue.js .rc-tongue-go { display: none; }
.rc-tongue.busy select { opacity: .6; pointer-events: none; }
.rc-tongue-wait { display: inline-flex; align-items: center; gap: 8px; }
.rc-tongue-wait[hidden] { display: none; }
.rc-tongue-wait::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: rc-tongue-beat 1s ease-in-out infinite; }
@keyframes rc-tongue-beat { 50% { opacity: .25; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { .rc-tongue-wait::before { animation: none; } }
.rc-page > p.rc-tongue-said, .cook .rc-tongue-said { margin: -4px 0 0; }
.rc-page > p.rc-was, .cook-head .rc-was { margin: 0; overflow-wrap: anywhere; }
.rc-tongue-said a { white-space: nowrap; }

/* Reviews and follows (2026-11-12). The business's answer under a review on its page. */
.pg-reply { margin-top: 4px; padding: 10px 12px; border-left: 3px solid var(--pg-accent, var(--accent)); background: var(--paper); border-radius: 0 var(--r) var(--r) 0; font-size: 15px; display: flex; flex-direction: column; gap: 4px; }
.pg-reply p { margin: 0; }
.pg-follow .icon { margin-right: 4px; vertical-align: -3px; }
.pe-tiles { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.pe-review { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--rule); }
.pe-report summary, .pe-follow summary { cursor: pointer; }
.pe-report[open], .pe-follow[open] { display: flex; flex-direction: column; gap: 8px; }
.pe-follow summary { font-weight: 600; color: var(--accent); }
.tr-ask h1 { margin-top: 8px; }
.tr-points { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.tr-points li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.tr-points .icon { flex: none; color: var(--accent); margin-top: 1px; }
.tr-stars { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.tr-stars legend { font-weight: 600; margin-bottom: 4px; }
.tr-stars label { display: flex; align-items: center; gap: 10px; font-size: 20px; color: #E3A008; cursor: pointer; }
.tr-their { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.tr-their p { margin: 0; white-space: pre-line; }
.tr-home { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin: 18px 0 4px; color: inherit; text-decoration: none; }
.tr-home .icon { flex: none; color: var(--accent); }
.tr-card { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; color: inherit; text-decoration: none; }
.tr-line { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-news { display: grid; gap: 10px; margin-bottom: 18px; }
.tr-news article { display: flex; flex-direction: column; gap: 4px; }
.tr-news p { margin: 0; white-space: pre-line; }
.tr-one .talk-box { margin: 18px 0; }
.tr-list .link-switches, .tr-one .link-switches { margin-top: 18px; }

/* ---------- Hours and leave (Mahdi, 2026-11-14) ----------
   The clock is one box at the top: Start, or what it is on and Finish, with a green dot while it
   runs. Rows of hours read like the jobs' lists; a stretch closed at midnight is marked orange; a
   ticked week is quiet. The tiles here are two wide. */
.tm-dot { background: #2E9E5B !important; }
.tm-home .tiles { grid-template-columns: repeat(2, 1fr); }
.tm-home .tiles .tile:first-child { grid-column: auto; }
.tm-clock { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.tm-clock.on { border-inline-start: 4px solid #2E9E5B; }
.tm-clock form { margin: 0; }
.tm-dot-run { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #2E9E5B; margin-inline-end: 6px; animation: tm-beat 1.6s ease-in-out infinite; }
@keyframes tm-beat { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .tm-dot-run { animation: none; } }
.tm-jobs li, .tm-shifts li, .tm-ask, .tm-home .list li:not(:has(> a)) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 16px; }
.tm-jobs li > a.who { padding: 0; min-height: 0; flex: 1 1 200px; align-items: flex-start; justify-content: center; }
.tm-home .who { display: flex; flex-direction: column; min-width: 0; flex: 1 1 200px; }
.tm-home .amount { font-variant-numeric: tabular-nums; font-weight: 700; }
.tm-on { color: #2E9E5B; font-weight: 700; }
.tm-shifts li.look { background: var(--warn-soft); }
.tm-mend { flex-basis: 100%; }
.tm-ask .jb-yesno { padding: 0; }
.tm-span { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; }
.tm-span label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.tm-weeknav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tm-weeknav .jb-title { display: flex; flex-direction: column; align-items: center; text-align: center; font-size: 22px; }
.tm-weeknav .jb-arrow { width: 44px; height: 44px; }
.tm-who { display: flex; justify-content: space-between; gap: 12px; overflow-wrap: anywhere; }
.tm-person.ticked .tm-shifts { opacity: .75; }
.tm-balances { display: grid; gap: 10px; }
.tm-balance { display: flex; flex-direction: column; gap: 4px; }
.tm-left { font-size: 24px; font-weight: 700; }
.tm-days { display: flex; flex-wrap: wrap; gap: 6px 12px; border: 0; padding: 0; margin: 0; }
.tm-days legend { width: 100%; padding: 0; margin-bottom: 4px; }
.tm-days label { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; }
.tm-away { display: flex; align-items: center; font-size: 13px; color: var(--soft); padding: 2px 0; }

/* ---------- the trail (Parts/Trail.razor, trail.js, 2026-11-14) ----------
   The service's home, the way this tab came, this page. One look for every page's way back, where
   there were seven before. On a phone only the step before this page shows, as an arrow and its name. */
.trail { margin: 0 0 10px; font-size: 14px; }
.trail ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.trail li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--soft); }
.trail li + li::before { content: "\203A"; color: var(--soft); opacity: .7; }
.trail a { color: var(--accent); font-weight: 600; text-decoration: none; padding: 6px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch; }
.trail a:hover { text-decoration: underline; }
.trail [aria-current=page] { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28ch; }
.steps .trail { margin: 0; }
@media (max-width: 639px) {
  .trail li { display: none; }
  .trail li:nth-last-child(2) { display: inline-flex; }
  .trail li:nth-last-child(2)::before { content: "\2190"; opacity: 1; color: var(--accent); }
  .trail a { max-width: 70vw; padding: 8px 0; }
}
@media print { .trail { display: none; } }

/* ---------- the way between services (Parts/AppNav.razor, 2026-11-14) ----------
   A bar along the bottom on a phone, a narrow rail on a small laptop, a column with names on a wide
   one. The side's own colour marks where you are: the logo's orange on a business, its green at home. */
.gw-side, .gw-tabs { --nav-hot: #FC630D; }
.gw-side.home, .gw-tabs.home { --nav-hot: #249C65; }
.gw-side { display: none; }
.gw-nav-pill { display: grid; place-items: center; width: 56px; height: 32px; border-radius: 16px; transition: background .15s; }
.gw-nav-pill .icon { color: var(--soft); }
.gw-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); background: var(--sheet); border-top: 1px solid var(--rule); }
.gw-tab { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; min-height: 52px; padding: 2px 0; color: var(--soft); font-size: 12px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gw-tab.on { color: var(--ink); }
.gw-tab.on .gw-nav-pill, .gw-side-a.on .gw-nav-pill { background: color-mix(in srgb, var(--nav-hot) 22%, transparent); }
.gw-tab-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-more { min-width: 0; }
.gw-more > summary { list-style: none; }
.gw-more > summary::-webkit-details-marker { display: none; }
.gw-more[open]::before { content: ""; position: fixed; inset: 0; z-index: 69; background: rgba(0, 0, 0, .45); }
.gw-more-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; max-height: 80dvh; overflow: auto; overscroll-behavior: contain; padding: 8px 0 calc(12px + env(safe-area-inset-bottom, 0px)); border-radius: 20px 20px 0 0; background: var(--sheet); color: var(--ink); box-shadow: var(--e8); animation: lsw-up .2s ease-out; }
.gw-more-sheet .pick-row { min-height: 54px; font-size: 16px; }
.gw-more-sheet .pick-row .icon { flex: none; width: 28px; color: var(--soft); }
.gw-grip { display: block; width: 40px; height: 4px; margin: 2px auto 6px; border-radius: 2px; background: var(--rule); }
/* The page ends above the bar, and a page's own buttons that hold to the foot hold above it. */
body:has(.gw-tabs) .page { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
body:has(.gw-tabs) :is(.dock, .wz-actions) { bottom: calc(65px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 1024px) {
  .gw-tabs { display: none; }
  body:has(.gw-tabs) .page { padding-bottom: 64px; }
  body:has(.gw-tabs) :is(.dock, .wz-actions) { bottom: 0; }
  body:has(.gw-side) { --nav-w: 88px; }
  body:has(.gw-side) .bar { padding-left: 20px; padding-right: 24px; }
  body:has(.gw-side) .page { margin-left: var(--nav-w); }
  .gw-side { display: flex; flex-direction: column; gap: 4px; position: fixed; left: 0; top: var(--bar-h, 72px); bottom: 0; z-index: 9; width: var(--nav-w); padding: 12px 6px; overflow-y: auto; overscroll-behavior: contain; background: var(--sheet); border-right: 1px solid var(--rule); }
  .gw-side-a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 12px; color: var(--soft); font-size: 12px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; }
  .gw-side-a:hover, .gw-side-a:focus-visible { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
  .gw-side-a.on { color: var(--ink); }
  .gw-side-name { display: none; }
  .gw-side-acct { margin-top: auto; }
}
@media (min-width: 1280px) {
  body:has(.gw-side) { --nav-w: 240px; }
  .gw-side { padding: 16px 12px; }
  .gw-side-a { flex-direction: row; gap: 10px; padding: 5px 12px 5px 4px; font-size: 15px; text-align: start; }
  .gw-side-a .gw-nav-pill { width: 44px; height: 36px; }
  .gw-side-name { display: inline; }
  .gw-side-short { display: none; }
  .gw-side-a.on { background: color-mix(in srgb, var(--nav-hot) 14%, transparent); font-weight: 700; }
  .gw-side-a.on .gw-nav-pill { background: none; }
}
@media print {
  .gw-side, .gw-tabs { display: none !important; }
  body:has(.gw-side) .page { margin-left: 0; }
}

/* ---------- Today (Pages/TodayPage.razor and the top of Pages/HomeBook.razor, 2026-11-14) ----------
   What waits, then the day, then the quick buttons, the money last. One column on a phone; on a
   laptop the buttons and the money stand beside the lists. */
.sheet.td { max-width: 760px; gap: 18px; }
.td-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.td-head h1 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 28px; line-height: 1.2; }
.td-cols, .td-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.td h2 { margin: 0 0 8px; font-size: 18px; }
.td-list { list-style: none; margin: 0; padding: 0; background: var(--sheet); border-radius: var(--r-card); box-shadow: var(--e1); overflow: hidden; }
.td-list li + li { border-top: 1px solid var(--rule); }
.td-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; color: var(--ink); text-decoration: none; }
.td-row:hover, .td-row:focus-visible { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.td-row.late { box-shadow: inset 4px 0 0 var(--gl-hot); }
.td-row.done b { color: var(--soft); font-weight: 600; }
.td-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.td-main b { overflow-wrap: anywhere; }
.td-go { flex: none; color: var(--soft); font-size: 22px; line-height: 1; }
.td-when { flex: none; width: 60px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--soft); }
.td-clear { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: var(--r-card); background: var(--sheet); box-shadow: var(--e1); }
.td-clear .icon { flex: none; color: var(--good); }
.td-none { margin: 0; padding: 16px; border-radius: var(--r-card); background: var(--sheet); box-shadow: var(--e1); }
.td-other { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px; border-radius: var(--r-card); border: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.td-other:hover, .td-other:focus-visible { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.td-quick { display: flex; flex-wrap: wrap; gap: 10px; }
.td-quick form { display: contents; }
.td-quick .btn { flex: 1 1 150px; min-width: 0; margin: 0; padding-left: 10px; padding-right: 10px; gap: 6px; font-size: 18px; text-align: center; }
.td-quick .btn:not(.ghost) { flex-basis: 100%; }
.td-quick .btn.ghost { font-size: 16px; }
.td-quick .btn .icon { flex: none; }
.td-quick .td-on { flex-basis: 100%; }
@media (min-width: 1024px) {
  .sheet.td { max-width: 1080px; }
  .td-cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: 28px; align-items: start; }
  .td-side .td-quick .btn { flex-basis: 100%; }
  .td-side .tiles { grid-template-columns: 1fr; }
  .td-side .tiles .tile:first-child { grid-column: auto; }
}

/* ---------- the colour rule (Mahdi, 2026-11-14) ----------
   Three jobs, three colours. The main button is the logo's black (cream at night): --accent.
   The side's own colour is only a mark on what is picked: --brand, the logo's orange on a
   business and its green at home. What is paid, done or ticked is green on both sides: --good.
   Links and second buttons are neutral. The front page and the sign-in page already worked
   this way; this takes it through every signed-in page. */
[data-side=home] { --brand: #249C65; --brand-ink: #1B7A4E; --brand-soft: #E4F3EA; }
html[data-theme=dark] [data-side=home] { --brand: #4CC38A; --brand-ink: #7FD9AE; --brand-soft: #14332B; }
.btn.paid:hover { background: var(--good-dark); }

/* ---------- the plans page's cards (Pages/Plans.razor, 2026-11-14) ----------
   A card says who it is for and what it opens, a ticked line for each thing. Basic stands out by
   its edge alone: no badge claims anything about who picks it. */
.plan-for { font-size: 15px; font-weight: 600; color: var(--soft); }
.plan-year { min-height: 20px; }
.plan-lead { margin-top: 10px; font-size: 14px; font-weight: 700; }
.plan-lines { list-style: none; margin: 8px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.35; }
.plan-lead + .plan-lines { margin-top: 4px; }
.plan-lines li { display: flex; align-items: flex-start; gap: 8px; }
.plan-lines .icon { flex: none; margin-top: 1px; color: var(--good); }
.front-plans .plan-card.edge { box-shadow: 0 0 0 2px var(--brand, #FC630D), var(--e4); }
.front-plans .plan-card .plan-go, .front-plans .plan-card .pill { margin-top: auto; }
.front-plans.two { grid-template-columns: repeat(auto-fit, minmax(220px, 360px)); justify-content: center; }
.plan-small { max-width: 60ch; margin-left: auto; margin-right: auto; }