/* 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: #0E6B57;
  --accent-ink: #FFFFFF;
  --accent-soft: #E3F1EC;
  --warn: #A55A00;
  --warn-soft: #FBEEDD;
  --danger: #B42318;
  --wa: #1DA851;
  --doc-ink: #1F2A37;
  --doc-accent: #1F3A5F;
  --doc-band: #EEF2F7;
  --accent-dark: #0A5545;
  --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(--accent); }
.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.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(--accent-soft); color: var(--accent); 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(--accent); }
.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(--accent-soft); color: var(--accent); }
.pill.overdue { background: var(--warn-soft); color: var(--warn); }
.pill.viewed { background: #E6EEFB; color: #1F4E9C; }
.pill.invoiced { background: var(--accent-soft); color: var(--accent); }
.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(--accent); }
.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(--accent); }
.chip:has(input:checked) { background: var(--accent-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(--accent-soft); box-shadow: inset 4px 0 0 var(--accent); }
  .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(--accent-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(--accent); }
.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; }

/* ---------- 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) 50%, 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(--accent); box-shadow: inset 0 0 0 1px var(--accent);
}
.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(--accent); }
.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; }
.pv-screen.loading .pv-load { opacity: 1; }
.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; }
.sorted.mixed .sl-dot .mk-dot { opacity: 0; }
.sorted.mixed .sl { transform: translate(var(--x), var(--y)) rotate(var(--r)); animation: jumble 2.6s ease-in-out infinite; }
/* The jumble does not sit still: each letter rocks a little, out of step, asking to be touched. */
.sorted.mixed .sl:nth-child(2n) { animation-duration: 3.1s; animation-delay: -.8s; }
.sorted.mixed .sl:nth-child(3n) { animation-duration: 2.2s; animation-delay: -1.4s; }
@keyframes jumble {
  0%, 100% { transform: translate(var(--x), var(--y)) rotate(var(--r)); }
  50% { transform: translate(var(--x), calc(var(--y) - .05em)) rotate(calc(var(--r) + 7deg)); }
}
@media (prefers-reduced-motion: reduce) { .sorted.mixed .sl { animation: none; } }
.sorted.mixed::after { transform: scaleX(0); }
.sorted.sorting .sl { animation: sort-in 1s cubic-bezier(.3, .7, .2, 1.05) both; }
.sorted.sorting .sl:nth-child(2) { animation-delay: 30ms; }
.sorted.sorting .sl:nth-child(3) { animation-delay: 60ms; }
.sorted.sorting .sl:nth-child(4) { animation-delay: 90ms; }
.sorted.sorting .sl:nth-child(5) { animation-delay: 120ms; }
.sorted.sorting .sl:nth-child(6) { animation-delay: 150ms; }
.sorted.sorting .sl:nth-child(7) { animation-delay: 180ms; }
.sorted.sorting::after { animation: bar-in 1.2s ease-in-out both; }
@keyframes sort-in {
  0% { transform: translate(var(--x), var(--y)) rotate(var(--r)); }
  70% { transform: translate(0, -.06em); }
  100% { transform: none; }
}
@keyframes bar-in { 0%, 55% { transform: scaleX(0); } 90%, 100% { transform: scaleX(1); } }
/* 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.sorting + .sorted-card .sc-tick { --mk-delay: 1.25s; }
.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; }
}
/* While it sorts, the card waits for the letters to land. */
.sorted.sorting + .sorted-card { transition-delay: .9s; }
@media (prefers-reduced-motion: reduce) {
  .sorted.sorting .sl, .sorted.sorting::after { animation: none; }
  .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. */
.page:has(> .one) { padding: 0; }
.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 auto;
  grid-template-areas: "logo logo" "words words" "show show" "tiles tiles" "act act" "foot foot";
  padding: calc(22px + env(safe-area-inset-top, 0px)) max(16px, calc((100vw - 640px) / 2)) calc(8px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(160deg, #FFF1E6 0%, #FAF8F5 50%, #FFFFFF 100%);
}
.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); }
.gw:has(#door-business:checked) .dw-b, .gw:has(#door-home:checked) .dw-h { display: inline-flex; animation: dw-roll .45s cubic-bezier(.3, .8, .3, 1.2) both; transform-origin: 50% 70%; }
.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; }
@keyframes dw-roll { from { transform: translateY(.45em) rotateX(75deg); opacity: 0; } to { transform: none; opacity: 1; } }
html[data-theme=dark] .dw, html[data-theme=dark] .dw .icon { color: var(--brand-ink); }
@media (prefers-reduced-motion: reduce) { .gw:has(#door-business:checked) .dw-b, .gw:has(#door-home:checked) .dw-h { animation: none; } }

.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; }
/* 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; }

.one-foot { grid-area: foot; display: flex; justify-content: center; gap: 12px; font-size: 13px; color: var(--soft); }
.one-why { display: none; align-items: center; gap: 6px; }
.one-why .icon { color: var(--brand-ink); margin-inline-start: 8px; }
.one-why .icon:first-child { margin-inline-start: 0; }
.one-links { display: flex; gap: 16px; }
.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%; }
.pv-wrap { position: relative; display: flex; gap: 8px; width: 100%; max-width: 440px; height: 100%; max-height: 520px; min-height: 0; }
/* The samples as vertical tabs down the side of the phone (Mahdi, 2026-11-08: «تب عمودی بشه», then
   «تب فقط اسم و لوگو باشه»): the logo above the name, nothing else. The one in the phone is ringed
   in orange on a soft orange ground; Yours is a dashed tab with a plus, the wizard. */
.pv-pick { flex: none; width: 82px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.pv-card {
  flex: 1 1 0; max-height: 104px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 6px 4px; border-radius: 14px; color: var(--ink); text-decoration: none; text-align: center;
  background: var(--sheet); box-shadow: 0 0 0 1px var(--rule), 0 1px 2px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.pv-card:hover { transform: translateX(2px); box-shadow: 0 0 0 1px var(--rule), 0 8px 18px -10px rgba(0,0,0,.4); }
.pv-card:focus-visible { outline: 2px solid #FC630D; outline-offset: 2px; }
.pv-card.on { background: color-mix(in srgb, #FC630D 10%, var(--sheet)); box-shadow: 0 0 0 2px #FC630D, 0 10px 22px -12px rgba(252,99,13,.7); }
.pv-card-logo, .pv-card-plus { flex: none; width: 32px; height: 32px; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.pv-card-logo { object-fit: cover; }
.pv-card-name { max-width: 100%; font-size: 11.5px; line-height: 1.12; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.pv-card-yours { background: transparent; box-shadow: none; border: 1.5px dashed #FC630D; }
.pv-card-yours:hover { box-shadow: 0 8px 18px -10px rgba(252,99,13,.6); }
.pv-card-yours.on { border-style: solid; }
.pv-card-plus { display: grid; place-items: center; background: none; box-shadow: none; color: #FC630D; }
.pv-card-plus .mk { width: 100%; height: 100%; }
.pv-card-yours:hover .mk-dot, .pv-card-yours.on .mk-dot, .pv-card-yours:focus-visible .mk-dot { animation: mk-dot-shot .6s cubic-bezier(.2,.7,.2,1) both; }
.pv-card-yours:hover .mk-trail, .pv-card-yours.on .mk-trail, .pv-card-yours:focus-visible .mk-trail { animation: mk-trail-shot .6s ease-out both; }
.pv-card-yours:hover .mk-ring, .pv-card-yours.on .mk-ring, .pv-card-yours:focus-visible .mk-ring { animation: mk-ring-hit .6s ease-out both; }
@media (prefers-reduced-motion: reduce) { .pv-card { transition: none; } .pv-card:hover { transform: none; } }
/* A short phone (an iPhone SE): a smaller logo. */
@media (max-height: 720px) and (max-width: 1023px) {
  .pv-pick { width: 72px; gap: 5px; }
  .pv-card { gap: 4px; border-radius: 12px; }
  .pv-card-logo, .pv-card-plus { width: 26px; height: 26px; }
  .pv-card-name { font-size: 11px; }
}
/* 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. */
button.pv-card { border: 0; font: inherit; cursor: pointer; }
.pv-step-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 9%, var(--sheet)); color: var(--ink); transition: background-color .25s, color .25s; }
.pv-step.on .pv-step-icon { background: var(--brand); color: #fff; }
.pv-step.done .pv-step-icon { background: color-mix(in srgb, var(--brand) 18%, var(--sheet)); color: var(--brand-ink); }
.pv-step.done { opacity: .85; }
@media (max-height: 720px) and (max-width: 1023px) {
  /* A short phone: five steps beside a short phone, so each shows its icon alone. */
  .pv-steps .pv-card { min-height: 0; padding: 4px; gap: 0; }
  .pv-steps .pv-card-name { display: none; }
  .pv-step-icon { width: 28px; height: 28px; }
}
/* Five steps beside a phone on a phone screen: a little tighter than the samples, so all five stand
   beside the phone and none climbs over the line above it. */
@media (max-width: 1023px) {
  .pv-steps { gap: 4px; }
  .pv-steps .pv-card { min-height: 0; overflow: hidden; gap: 2px; padding: 3px 4px; }
  .pv-steps .pv-step-icon { width: 28px; height: 28px; border-radius: 9px; }
}
@media (min-width: 1024px) { .pv-step-icon { width: 42px; height: 42px; border-radius: 12px; } }
.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; }
/* On a laptop the page sits in a phone with its edge; on a phone screen it is a plain card. */
@media (min-width: 1024px) {
  .pv-wrap { width: 444px; max-width: none; height: min(100%, 660px); max-height: none; gap: 14px; }
  .pv-pick { width: 104px; gap: 8px; }
  .pv-card { max-height: 120px; gap: 8px; padding: 10px 6px; }
  .pv-card-logo, .pv-card-plus { width: 46px; height: 46px; }
  .pv-card-name { font-size: 13px; }
  .pv-phone, .pv-solo .pv-phone { flex: none; 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) auto;
    grid-template-areas: "logo logo logo" ". show show" "words show show" "act show show" "tiles show show" ". show show" "foot foot foot";
    padding: 36px max(40px, calc((100vw - 1240px) / 2)) 14px;
  }
  .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%; }
  .one-foot { justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--rule); }
  .one-why { display: flex; }
}
/* 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; gap: 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(--accent); }
.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; }
.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; }
.pg-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.pg-shots figure { margin: 0; background: var(--sheet); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--e1); }
.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-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(--accent-soft); color: var(--accent); }
.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; }
.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-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) 110px; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.pe-offer .pe-note { grid-column: 1 / -1; min-height: 44px; font-size: 16px; padding: 8px 12px; }
.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; }
@media (min-width: 1024px) {
  .pe { max-width: 1440px; display: grid; grid-template-columns: 280px minmax(0, 1fr) 390px; gap: 32px; align-items: start; }
  .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(--accent-soft); box-shadow: inset 4px 0 0 var(--accent); }
  .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; }
}

/* ---------- 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 #bbb; border-radius: 3mm; padding: 5mm; display: flex; gap: 4mm; align-items: center; border-left: 3mm solid var(--pg); color: #111; }
.pc-words { flex: 1; display: flex; flex-direction: column; gap: 1.5mm; font-size: 3.4mm; min-width: 0; }
.pc-words b { font-size: 4.4mm; }
.pc-at { font-weight: 700; color: var(--pg); overflow-wrap: anywhere; }
.pc-qr { width: 30mm; flex-shrink: 0; }
.pc-qr svg, .pp-qr svg { width: 100%; height: auto; display: block; }
.print-poster { width: min(100%, 210mm); aspect-ratio: 210 / 297; background: #fff; color: #111; border: 1px solid #ccc; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6mm; padding: 16mm; text-align: center; border-top: 12mm solid var(--pg); }
.pp-name { font-size: clamp(24px, 6vw, 13mm); font-weight: 800; }
.pp-line { font-size: clamp(16px, 3vw, 7mm); color: #444; max-width: 150mm; }
.pp-qr { width: 60%; }
.pp-do { font-size: clamp(16px, 3.4vw, 8mm); font-weight: 700; }
.pp-at { font-size: clamp(16px, 3vw, 7mm); color: var(--pg); font-weight: 700; }
.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: 12mm solid var(--pg); aspect-ratio: auto; }
  @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-card h1 { margin: 0; font-size: 26px; }
.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; }
.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(--accent-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: #3DBE98;
  --accent-ink: #062A20;
  --accent-soft: #14332B;
  --accent-dark: #62D2B0;
  --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: #0E6B57; --accent-ink: #FFFFFF; --accent-soft: #E3F1EC; --accent-dark: #0A5545;
  --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(--accent-soft); color: var(--accent); }
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 { background: linear-gradient(160deg, #2A170A 0%, #14161A 50%, #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::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .6s ease; background: linear-gradient(160deg, #E9F1DC 0%, #F7F7EF 50%, #FFFFFF 100%); }
html[data-theme=dark] .one::before { background: linear-gradient(160deg, #17240E 0%, #14161A 50%, #0F1215 100%); }
.one.gw:has(#door-home:checked)::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .front.gw, .one::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. */
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(--accent-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(--accent); color: var(--accent-ink); }
@media (min-width: 720px) { .known { grid-template-columns: 1fr 1fr; } }
html[data-theme=dark] .talk-msg.mine { background: #173A31; }
html[data-theme=dark] .pill.new { background: var(--accent); color: var(--accent-ink); }

/* 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; }
.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); }
@media (min-width: 440px) { .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(--accent); }
.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(--accent-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; }