/* The one stylesheet of every site: www, dash and client each copy site/shared/
   in at deploy and link /shared/style.css. The look is the dashboard's, which is
   Claude's. Every colour, font, radius, shadow and the queue's columns are tokens
   in :root and no rule names a colour, so a restyle is a token change. Rules a
   single page needs sit in a section named after it. Sections are marked with a
   line like the one above "fonts" below; grep for it to find one.
   docs/design.md says what each token and component is for. */

/* ── fonts ── */
/* Self-hosted, since the CSP allows fonts from 'self' only. Inter stands
   in for Apple's SF Pro, Source Serif 4 for its serif, Poppins sets the brand
   and the letterhead; Noto Sans Arabic sets Arabic. All OFL, licences beside them in
   fonts/. A file loads only for text that needs it, so a latin page never
   fetches the latin-ext or Arabic one. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/shared/fonts/Inter-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/shared/fonts/Inter-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Noto Sans Arabic"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/shared/fonts/NotoSansArabic-arabic.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
/* Poppins, the practice's face: the brand everywhere, and quote.html's letterhead. Latin subsets of the weights used. */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url(/shared/fonts/Poppins-Light-latin.woff) format("woff"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url(/shared/fonts/Poppins-Regular-latin.woff) format("woff"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url(/shared/fonts/Poppins-Medium-latin.woff) format("woff"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url(/shared/fonts/Poppins-SemiBold-latin.woff) format("woff"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap; src: url(/shared/fonts/SourceSerif4-latin.woff2) format("woff2"); }

:root {
  /* colour, sampled from the Claude screenshots */
  --bg: #fcfcfb; --chrome: #fafaf9; --surface: #ffffff; --tint: #f6f5f2;
  --hover: #f1f0ec; --active: #edece8;
  --line: #e5e5e3; --line-soft: #f0efec; --line-strong: #d6d5d1;
  --strong: #0b0b0b; --text: #262624; --nav: #52514e; --sub: #6e6c66; --faint: #96948d;
  --accent: #d97757; --accent-ink: #9c4526; --accent-soft: #f6e5dd;
  /* the printed documents (quote.html): plain paper and ink */
  --paper: #ffffff; --ink: #000000;
  --ok: #2f7a4d; --ok-soft: #e3efe6; --neg: #b53333; --focus: #aeaca5;
  --shadow: 0 0.25rem 1.25rem rgb(0 0 0 / 0.04), 0 0 0 1px rgb(0 0 0 / 0.02);
  --shadow-pop: 0 0.5rem 1.5rem rgb(0 0 0 / 0.08), 0 0.0625rem 0.1875rem rgb(0 0 0 / 0.04);
  /* a project card: lifted a touch, a little more when hovered or open */
  --shadow-card: 0 0.0625rem 0.125rem rgb(0 0 0 / 0.04), 0 0.0625rem 0.375rem rgb(0 0 0 / 0.05);
  --shadow-knob: 0 1px 2px rgb(0 0 0 / 0.08);
  --shadow-field: 0 0 0 3px rgb(0 0 0 / 0.04);
  --shadow-card-up: 0 0.125rem 0.25rem rgb(0 0 0 / 0.04), 0 0.125rem 0.75rem rgb(0 0 0 / 0.07);
  /* type: three sizes, the serif for display, Poppins capitals for the brand
     only. Arabic falls through Inter to Noto Sans Arabic. */
  --font: "Inter", "Noto Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --poppins: "Poppins", var(--font);
  --brand: var(--poppins); --brand-track: 0.22em;
  --fs: 0.875rem; --fs-s: 0.8125rem; --fs-xs: 0.75rem;
  /* the serif's size on a notice page; the brand's on a notice page */
  --fs-display: 2rem; --fs-brand: 1.125rem;
  /* shape */
  --r-s: 0.375rem; --r: 0.5rem; --r-l: 0.875rem; --r-full: 999px;
  /* a segmented control: rounded as the cards, its knob nested inside the track's padding */
  --seg-pad: 0.1875rem; --r-knob: calc(var(--r-l) - var(--seg-pad));
  --gap: 1rem; --pad-x: 0.75rem; --cell-x: 0.375rem;
  /* a card's insides: text sits --card-pad from either side, its first and
     last lines --card-pad-y from the top and bottom; cards --gap apart */
  --card-pad: 1.25rem; --card-pad-y: 1rem;
  --page-w: none; --page-pad: 2.5rem; --doc-panel-w: min(45vw, 50rem);
  /* the dashboard's page: the same room above and on either side */
  --main-pad: 1.5rem;
  /* The queue: fold, name and city, next step, billed of contract with its
     bar, ⋯. An open project's invoices: date, label, status, received,
     amount, VAT, document, ⋯. */
  --col-fold: 1.25rem; --q-gap: 0.75rem; --q-row-y: 0.5rem; --q-card-gap: 0.375rem;
  --q-cols: minmax(0,1fr) 10rem 15rem 1.75rem;
  --inv-cols: 6.25rem minmax(8rem,1fr) 6.5rem 6.5rem 7rem 5.5rem 1.75rem 1.75rem;
  --bar-h: 0.3125rem;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Every size is in rem, from the browser's default (16px unless changed),
   so text stays the same size as the window resizes; the screen's own
   display scaling and browser zoom make it bigger. */
html { font-size: 100%; }
/* The dashboard reads a step larger on a desktop screen; below 760px it
   keeps the phone size. */
@media (min-width: 761px) { html.dash { font-size: 125%; } }
body {
  margin: 0; background: var(--bg); color: var(--text); font-family: var(--font);
  font-size: var(--fs); line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  /* No blue flash on tap (Android Chrome); hover and the fold already answer a tap. */
  -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font: inherit; color: inherit; }
/* Inset, so a ring never spills past a sidebar or a clipping card. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
::selection { background: var(--accent-soft); }
::placeholder { color: var(--sub); opacity: 1; }
svg.i { width: 1rem; height: 1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Figures in columns only: Inter's tabular set also widens the hyphen, so "1-4" stays proportional. */
.num { font-variant-numeric: tabular-nums; }
.dim { color: var(--sub); }
.bright { color: var(--strong); font-weight: 500; }
.right { text-align: right; }
[role="button"] { cursor: pointer; }

/* ── shell ── */
/* A bar across the top on every screen: the brand with undo and redo, the
   views, then the search and the next prayer at the far edge; the page below. */
.shell { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: 100vh; height: 100dvh; }
.sidebar { display: flex; align-items: center; gap: 0.25rem; padding: 0.5rem 0.625rem; background: var(--chrome); border-bottom: 1px solid var(--line); user-select: none; }
.brand-row { display: flex; align-items: center; gap: 0.125rem; }
.sidebar .brand { padding: 0 0.5rem 0 0.25rem; font-size: 1rem; }
/* The wordmark: Poppins capitals, tracked wide, as the letterhead and the old www. */
.brand { padding: 0.125rem 0.5rem; font-family: var(--brand); font-size: var(--fs-brand); font-weight: 400; line-height: 1.2; color: var(--strong); letter-spacing: var(--brand-track); text-transform: uppercase; }
.search { display: flex; order: 3; flex: 0 1 16rem; align-items: center; gap: 0.5rem; min-width: 6rem; margin-left: auto; padding: 0 0.625rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); color: var(--sub); }
.search:focus-within { border-color: var(--line-strong); }
.search input { flex: 1; min-width: 0; padding: 0.4375rem 0; background: none; border: 0; outline: none; color: var(--strong); }
.search kbd { font: var(--fs-xs) var(--font); color: var(--faint); border: 1px solid var(--line); border-radius: var(--r-s); padding: 0 0.3125rem; }
.sidebar nav { display: flex; order: 2; gap: 0.125rem; }
.prayer { display: flex; order: 4; padding: 0 0.25rem 0 0.5rem; font-size: var(--fs-xs); color: var(--sub); font-variant-numeric: tabular-nums; }
.prayer-row { display: flex; justify-content: space-between; gap: 0.5rem; }
.prayer-row:not(.next) { display: none; }
.nav-item { display: flex; align-items: center; gap: 0.625rem; padding: 0.4375rem 0.5rem; background: none; border: 0; border-radius: var(--r); color: var(--nav); text-align: left; cursor: pointer; }
.nav-item:hover { background: var(--hover); color: var(--strong); }
.nav-item.active { background: var(--active); color: var(--strong); }
.nav-item svg.i { width: 1.125rem; height: 1.125rem; }

/* The scrollbar's room is kept whether or not it shows, so the page does not shift when it appears. */
.shell main { overflow: auto; scrollbar-gutter: stable; padding: var(--main-pad) var(--main-pad) 4rem; }
.shell main > * { max-width: var(--page-w); margin-inline: auto; }

/* Pages opened in place (notes, tools) sit in the same cell as main, one
   iframe each, kept alive once opened so switching back costs nothing. */
.frames { grid-column: 1; grid-row: 2; min-height: 0; }
.frames iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--bg); }

/* ── queue ── */
/* One line of figures, then a row per project, the last opened first. Text
   after the fold column starts on one edge everywhere: rows, group heads,
   invoice lists. */
/* The stage bar, as the old finance page's city bar: a grey track, the
   chosen stage on a white pill that slides; + New project to its right. */
.stages { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.875rem; }
.stages .primary { margin-left: auto; }
.seg-bar { position: relative; display: flex; gap: 0.125rem; min-width: 0; overflow-x: auto; padding: var(--seg-pad); background: var(--active); border-radius: var(--r-l); scrollbar-width: none; }
.seg-pill { position: absolute; top: var(--seg-pad); bottom: var(--seg-pad); left: 0; background: var(--surface); border-radius: var(--r-knob); box-shadow: var(--shadow-knob); }
.seg-btn { position: relative; padding: 0.25rem 0.75rem; background: none; border: 0; border-radius: var(--r-knob); color: var(--sub); font-size: var(--fs-s); white-space: nowrap; cursor: pointer; }
.seg-btn:hover, .seg-btn.on { color: var(--strong); }
.seg-btn.on { font-weight: 500; }
.seg-btn .n { margin-left: 0.125rem; color: var(--faint); font-weight: 400; }
.seg-btn.on .n { color: var(--sub); }
.summary { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0 var(--pad-x) 1rem calc(var(--pad-x) + var(--col-fold) + var(--q-gap)); color: var(--sub); }
.summary .sep { color: var(--faint); }
.summary b { color: var(--strong); font-weight: 500; }
.summary .neg { color: var(--neg); }
.bill-fig b { color: var(--strong); font-weight: 500; }
.link { padding: 0; background: none; border: 0; color: inherit; cursor: pointer; text-decoration: underline dotted var(--faint); text-underline-offset: 0.25em; }
.link:hover, .link.on { color: var(--strong); text-decoration-color: var(--strong); }
.empty { padding: 2rem var(--pad-x); text-align: center; color: var(--sub); }

/* Each project is its own card: white, lifted by a soft shadow rather than
   a border, rounded, a small gap between. An open one unfolds its detail
   below a hairline, white like its row. */
.queue { display: flex; flex-direction: column; gap: var(--q-card-gap); }
.q-card { overflow: hidden; background: var(--surface); border-radius: var(--r-l); box-shadow: var(--shadow-card); }
.q-card:hover, .q-card.open { box-shadow: var(--shadow-card-up); }
.q-row { display: grid; grid-template-columns: var(--col-fold) var(--q-cols); column-gap: var(--q-gap); align-items: center; padding: var(--q-row-y) var(--pad-x); cursor: pointer; }
/* A filing due sits above the queue as a card that floats, like Claude's prompt box. */
.q-row.task { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow); cursor: default; }
.q-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chev { display: flex; align-items: center; justify-content: center; width: var(--col-fold); height: 1.5rem; color: var(--sub); }
.chev svg { width: 0.875rem; height: 0.875rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s; }
.q-row.open .chev svg, .group-head.open .chev svg { transform: rotate(90deg); }

/* The next step, a dot and a word: mine a filled accent dot, a client's
   an empty ring, done a green tick. The amount left reads quiet. */
.pill { display: inline-flex; align-items: center; gap: 0.4375rem; justify-self: start; white-space: nowrap; font-size: var(--fs-s); }
.pill::before { content: ""; flex: none; width: 0.4375rem; height: 0.4375rem; border-radius: var(--r-full); }
.pill-mine { color: var(--strong); font-weight: 500; }
.pill-mine::before { background: var(--accent); }
.pill-waiting { color: var(--sub); }
.pill-waiting::before { box-shadow: inset 0 0 0 1.5px var(--faint); }
.pill-done { color: var(--ok); }
.pill-done::before { display: none; }

.bill { display: flex; align-items: center; gap: 0.625rem; min-width: 0; }
.bill-fig { min-width: 8.5rem; margin-left: auto; white-space: nowrap; text-align: right; color: var(--sub); font-size: var(--fs-s); }
/* The bill track: received in accent, sent and unpaid paler after it, green once all is in. */
.track { display: flex; flex: 1; min-width: 3rem; height: var(--bar-h); border-radius: var(--r-full); overflow: hidden; background: var(--active); }
.track i { background: var(--accent); }
.track i.sent { background: color-mix(in srgb, var(--accent) 35%, var(--active)); }
.track.full i { background: var(--ok); }

/* Waiting and Done: headed as Claude's sections are, "For you". */
.group-head { display: flex; align-items: center; gap: var(--q-gap); width: 100%; margin: 0; padding: 1.25rem var(--pad-x) 0.25rem; background: none; border: 0; text-align: left; color: var(--strong); font-size: 1rem; font-weight: 500; }
.group-head .dim { margin-left: -0.375rem; font-size: var(--fs); font-weight: 400; }
button.group-head { cursor: pointer; }
button.group-head:hover .chev { color: var(--strong); }

/* ⋯ opens a small menu, fixed so no scrolling list clips it. */
.menu-wrap { justify-self: end; }
/* With a mouse, a row's ⋯ shows when the row is hovered or its menu open. */
@media (hover: hover) {
  .q-row .menu-wrap, .inv-row .menu-wrap, .entry .menu-wrap, .renewal .menu-wrap, .money-row .menu-wrap { opacity: 0; }
  .q-row:hover .menu-wrap, .inv-row:hover .menu-wrap, .entry:hover .menu-wrap, .renewal:hover .menu-wrap, .money-row:hover .menu-wrap, .menu-wrap:focus-within, .menu-wrap:has(.menu.show) { opacity: 1; }
}
.menu { display: none; position: fixed; z-index: 60; min-width: 9rem; padding: 0.3125rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-pop); }
.menu.show { display: block; }
.menu button { display: block; width: 100%; padding: 0.4375rem 0.625rem; background: none; border: 0; border-radius: var(--r); text-align: left; cursor: pointer; }
.menu button:hover { background: var(--hover); }
.menu .danger { color: var(--neg); }

/* An open project: its facts, then its invoices, white like its row. */
.detail { padding: 0.75rem var(--pad-x) 1.5rem calc(var(--pad-x) + var(--col-fold) + var(--q-gap) - var(--cell-x) - 1px); background: var(--surface); border-top: 1px solid var(--line-soft); cursor: default; }
.facts { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.fact { display: flex; flex-direction: column; gap: 0.125rem; }
.fact > span:first-child { padding: 0 calc(var(--cell-x) + 1px); color: var(--sub); font-size: var(--fs-xs); }
.fact .cell { width: 7rem; }
.fact.wide .cell { width: 16rem; }
.fact .cell.client { width: 11rem; }
.fact .val { padding: 0.1875rem calc(var(--cell-x) + 1px); border: 1px solid transparent; }
.inv-list { margin-top: 1rem; overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); }
.inv-head, .inv-row { display: grid; grid-template-columns: var(--inv-cols); column-gap: 0.25rem; align-items: center; min-width: 40rem; padding: 0.25rem calc(var(--card-pad) - var(--cell-x) - 1px); }
.inv-head > span, .inv-row > span:not(.cell) { padding: 0 calc(var(--cell-x) + 1px); white-space: nowrap; }
.inv-head { padding-block: 0.5rem 0.375rem; color: var(--sub); font-size: var(--fs-xs); }
.inv-row { border-top: 1px solid var(--line-soft); }
.inv-row:hover { background: var(--tint); }
/* The contract's invoices nest above it, each with a short neutral tick.
   No accent: nothing here is in progress. */
/* The card's last line adds to it. */
.inv-foot { display: flex; gap: 0.25rem; padding: 0.375rem calc(var(--card-pad) - var(--cell-x)); border-top: 1px solid var(--line-soft); }
.inv-foot:first-child { border-top: 0; }

/* A list of invoices in a card (the Declare stage); a row opens its project. */
.owed { margin-bottom: 1rem; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); }
/* The Declare stage: a half-year's head with Mark filed at its end, then its payments, VAT last. */
/* An expense under the payments, edited in place: each track is a payment's
   widened by the cell's inset and the gaps narrowed by it, so the text lines up. */
.declare { --cx: calc(var(--cell-x) + 1px); }
.declare .exp-row { grid-template-columns: calc(6.25rem + 2 * var(--cx)) minmax(0,1fr) minmax(0,1.4fr) calc(7rem + 2 * var(--cx)) calc(5.5rem + 2 * var(--cx)) calc(1.75rem + 2 * var(--cx)) calc(1.75rem + 2 * var(--cx)); column-gap: calc(var(--q-gap) - 2 * var(--cx)); padding-right: calc(var(--pad-x) - var(--cx)); border-top: 1px solid var(--line-soft); }
.declare .exp-row:first-child { border-top: 0; }
.declare .exp-row:hover { background: var(--tint); }
.declare .exp-row > .icon-btn, .declare .exp-row > .link { justify-self: center; }
.declare .exp-row > .link { font-size: var(--fs-s); }
/* Charged less paid closes a half, under the VAT column. */
.vat-sum { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 0 0.5rem; padding: 0.4375rem calc(var(--pad-x) + 3.5rem + 2 * var(--q-gap)) 0.4375rem calc(var(--pad-x) + var(--col-fold) + var(--q-gap)); border-top: 1px solid var(--line-soft); }
.vat-sum:first-child { border-top: 0; }
.vat-sum > .dim:first-child { margin-right: auto; }
.vat-sum .cell.short { width: 6.5rem; }
@supports (field-sizing: content) { .vat-sum .cell.short { width: auto; min-width: 2.5rem; field-sizing: content; } }
.vat-head.filed { padding-top: 0.75rem; font-size: var(--fs); }
.vat-head.filed .icon-btn { margin-left: auto; }
.expense-add { margin: -0.5rem 0 0.5rem; }

/* Status, coloured as the pills are. */
.st { font-weight: 500; text-transform: capitalize; }
.st-planned, .st-approved { color: var(--accent-ink); }
.st-quoted, .st-invoiced { color: var(--nav); }
.st-received, .st-declared { color: var(--ok); }
.st-waived { color: var(--sub); }
.st-void { color: var(--faint); }
/* A cancelled invoice stays in the list, struck, so its ref is never reused. */
.inv-row.void > .cell:not(.st) { color: var(--sub); text-decoration: line-through; text-decoration-color: var(--faint); }

/* ── notes ── */
/* Log entries: in an open project, under its invoices. */
.notes-pane { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: var(--gap) 2rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.notes-col h4 { margin: 0 0 0.375rem; padding: 0 calc(var(--cell-x) + 1px); color: var(--strong); font-size: var(--fs); font-weight: 500; }
.add-note { margin: 0.25rem 0; border-color: var(--line-soft); }
/* A long log scrolls inside the card rather than stretching it. */
.log-scroll { max-height: 24rem; overflow-y: auto; overscroll-behavior: contain; }
/* Personal: a renewal is its name, its expiry and the months left. */
.renewal { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem 6.5rem 1.75rem; column-gap: 0.25rem; align-items: center; padding: 0.125rem var(--pad-x) 0.125rem calc(var(--pad-x) + var(--col-fold) + var(--q-gap) - var(--cell-x) - 1px); }
.renewal > .dim { font-size: var(--fs-s); }
/* Personal money: dues, the pot and its ledger. Every row is
   a grid on the renewals' edge; a wide table scrolls sideways on a phone. */
/* Each Personal part is a card drawn as a project card is, its heading
   inside. Renewals and dues stack in columns, as many as fit (three
   at most), each card as wide as its column; the pot, with its ledger, takes
   the full width below. Inside a card, text sits --card-pad from its sides.
   No overflow clip, so a ⋯ menu can leave it. */
.cards { columns: 3 26rem; column-gap: var(--gap); }
/* Spaced by top margins: a column drops a bottom margin at its end, and the
   top margin of a card that starts a column. */
.cards > .panel { break-inside: avoid; }
.cards > .panel + .panel, .cards + .panel { margin-top: var(--gap); }
.panel { padding: var(--card-pad-y) 0 calc(var(--card-pad-y) - 0.375rem); background: var(--surface); border-radius: var(--r-l); box-shadow: var(--shadow-card); }
/* Its title sits over a hairline, as a project's row sits over its detail. */
.panel > .group-head { margin-bottom: 0.5rem; padding: 0 var(--card-pad) 0.75rem; border-bottom: 1px solid var(--line-soft); }
.panel > div.group-head > .chev { display: none; }
.panel .renewal, .panel .money-row, .panel .money-add { padding-inline: calc(var(--card-pad) - var(--cell-x) - 1px); }
.panel .renewal:hover, .panel .money-row:not(.money-cols):hover { background: var(--tint); }
.panel .pot-line { padding: 0 var(--card-pad) 0.5rem; }
.panel .empty { padding: 1rem var(--card-pad); }
/* The ledger folds under the pot's table, below a hairline: its name, count
   and a chevron that turns as the project fold does. */
.sub-head { display: flex; align-items: center; gap: 0.375rem; width: 100%; margin-top: 0.75rem; padding: 0.75rem var(--card-pad) 0.375rem; background: none; border: 0; border-top: 1px solid var(--line-soft); text-align: left; color: var(--strong); font-weight: 500; cursor: pointer; }
.sub-head .dim { font-weight: 400; }
.sub-head .chev { width: 1rem; height: 1rem; }
.sub-head:hover .chev, .sub-head.open .chev { color: var(--strong); }
.sub-head.open { margin-bottom: 0.5rem; border-bottom: 1px solid var(--line-soft); }
.sub-head.open .chev svg { transform: rotate(90deg); }
.money-row { display: grid; column-gap: 0.25rem; align-items: center; padding: 0.125rem var(--pad-x) 0.125rem calc(var(--pad-x) + var(--col-fold) + var(--q-gap) - var(--cell-x) - 1px); }
.money-row > span { padding: 0 calc(var(--cell-x) + 1px); white-space: nowrap; }
.money-row > .dim { font-size: var(--fs-s); }
.money-cols { padding-block: 0 0.125rem; color: var(--sub); font-size: var(--fs-xs); }
.due-row { grid-template-columns: minmax(0, 1fr) 8rem 3.5rem 1.75rem; }
.due-row .cell.bad { color: var(--neg); }
.money-add { display: flex; flex-wrap: wrap; gap: 0 0.5rem; padding: 0.125rem var(--pad-x) 0.25rem calc(var(--pad-x) + var(--col-fold) + var(--q-gap) - var(--cell-x) - 1px); }
.money-add .add-note { flex: 1; min-width: 12rem; }
.pot-line { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; padding: 0.25rem var(--pad-x) 0.25rem calc(var(--pad-x) + var(--col-fold) + var(--q-gap)); color: var(--text); }
.pot-line b { color: var(--strong); font-weight: 500; }
.pot-line .sep { margin: 0 0.25rem; color: var(--faint); }
.pot-line .cell.short { width: 6.5rem; }
/* Where the browser can, a figure's box is as wide as the figure, so no gap opens before it. */
@supports (field-sizing: content) { .pot-line .cell.short { width: auto; min-width: 2.5rem; field-sizing: content; } }
.pot-line .ok { margin-left: 0.5rem; color: var(--ok); }
.pot-line .neg { margin-left: 0.5rem; color: var(--neg); }
/* The pot keeps the project list's edges: its text sits after the fold
   column, a person's chevron in that column, as on a project row. */
.pot { --pot-x: calc(var(--pad-x) + var(--col-fold) + var(--q-gap)); }
.pot > .group-head, .panel.pot .pot-line, .pot .sub-head { padding-left: var(--pot-x); }
.pot .money-row, .pot .money-add { padding-left: calc(var(--pot-x) - var(--cell-x) - 1px); }
.panel .pot-row { grid-template-columns: var(--col-fold) minmax(4rem, 1fr) minmax(4.5rem, 6.5rem) minmax(4rem, 6rem) minmax(3.5rem, 4.5rem) 1.75rem; column-gap: 0; padding: 0.125rem calc(var(--card-pad) - var(--cell-x) - 1px) 0.125rem var(--pad-x); cursor: pointer; }
.pot-row > .q-name, .pot-row.money-cols > span:nth-child(2) { margin-left: var(--q-gap); padding: 0; }
.pot-row.money-cols { padding-block: 0 0.125rem; cursor: default; }
.pot-detail .facts { gap: 0.25rem 1rem; }
.pot-row > .chev { padding: 0; }
.pot-row.open .chev svg { transform: rotate(90deg); }
.pot-row:hover .chev, .pot-row.open .chev { color: var(--strong); }
/* An open person: as .detail under a project, a hairline above and below. */
.pot-detail { padding: 0.375rem var(--card-pad) 0.75rem calc(var(--pot-x) - var(--cell-x) - 1px); border-block: 1px solid var(--line-soft); }
.pot-events { margin-top: 0.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); }
.pot-event { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr) 7.5rem; column-gap: 0.25rem; align-items: center; padding: 0.1875rem calc(var(--card-pad) - var(--cell-x) - 1px); border-top: 1px solid var(--line-soft); }
.pot-event > span { padding: 0 calc(var(--cell-x) + 1px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pot-event.pot-head { padding-block: 0.375rem 0.25rem; border-top: 0; color: var(--sub); font-size: var(--fs-xs); }
.pot-event.dim { color: var(--sub); }
.pot-sum { border-top: 0; padding-block: 0.0625rem; }
.pot-event:not(.pot-sum) + .pot-sum { margin-top: 0.125rem; padding-top: 0.3125rem; border-top: 1px solid var(--line-soft); }
.pot-net { padding-bottom: 0.375rem; color: var(--strong); font-weight: 500; }
/* On a phone the events card takes the card's width and its figures their own. */
@media (max-width: 760px) {
  .pot-detail { padding-left: calc(var(--pad-x) - var(--cell-x) - 1px); padding-right: var(--pad-x); }
  .pot-event { grid-template-columns: 5.75rem minmax(0, 1fr) auto; padding-inline: calc(var(--pad-x) - var(--cell-x)); font-size: var(--fs-s); }
  .pot-detail .facts { padding-left: calc(var(--pot-x) - var(--pad-x)); }
}
.log-row { grid-template-columns: 6.25rem minmax(10rem, 1fr) 6.5rem 6.5rem 6.5rem 8rem 6rem 1.75rem; }
.log-row .cell { font-size: var(--fs-s); }
.money-wide { overflow-x: auto; }
.money-wide > .log-row { min-width: 55rem; }
.entry { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr) 1.75rem; column-gap: 0.25rem; align-items: start; padding: 0.25rem 0; border-top: 1px solid var(--line-soft); }
.entry-body { padding: 0.1875rem calc(var(--cell-x) + 1px); }
.entry-body .pill { margin-right: 0.375rem; font-size: var(--fs-xs); }
.entry-body textarea.cell { display: block; resize: vertical; }
.md { max-width: 65ch; line-height: 1.6; }
.md p { display: inline; margin: 0; }
.md p + p { display: block; margin-top: 0.375rem; }
.md ul { margin: 0.25rem 0 0; padding-left: 1.125rem; }
.md code { padding: 0 0.25rem; background: var(--hover); border-radius: var(--r-s); font-size: var(--fs-s); }

/* ── buttons ── */
/* Claude's chip button: white, hairline, rounded; .primary is its dark one. */
.tab { padding: 0.3125rem 0.75rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); color: var(--strong); font-size: var(--fs-s); cursor: pointer; white-space: nowrap; }
.tab:hover { background: var(--hover); border-color: var(--line-strong); }
/* A link drawn as a button. */
a.tab, a.primary { display: inline-block; text-decoration: none; }
.primary { padding: 0.5625rem 1rem; background: var(--strong); border: 0; border-radius: var(--r); color: var(--surface); font-weight: 500; cursor: pointer; }
.primary:hover { opacity: 0.86; }
/* The page's one action, the dark chip of Claude's "+ Add". */
.tab.primary { padding: 0.3125rem 0.75rem; border: 1px solid var(--strong); font-weight: 500; }
.tab.primary:hover { background: var(--strong); }
/* A bare text button that adds a row, quiet until hovered. */
.ghost { padding: 0.1875rem var(--cell-x); background: none; border: 0; border-radius: var(--r-s); color: var(--sub); font-size: var(--fs-s); cursor: pointer; }
.ghost:hover { background: var(--hover); color: var(--strong); }

/* ── cards and fields ── */
/* A plain card, as a project card is: white, rounded, lifted by a shadow, no border. */
.card { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--shadow-card); }
/* A text box that is always a box: the login, a password gate. An editable value is a .cell instead. */
.field, .login-box input { width: 100%; padding: 0.625rem 0.75rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.field:hover { border-color: var(--line-strong); }
.field:focus, .login-box input:focus { outline: none; border-color: var(--line-strong); box-shadow: var(--shadow-field); }

/* ── editable cells ── */
.cell { width: 100%; min-width: 0; padding: 0.1875rem var(--cell-x); background: transparent; border: 1px solid transparent; border-radius: var(--r-s); }
.cell:not(span):hover { background: var(--hover); }
.cell:focus { outline: none; background: var(--surface); border-color: var(--line-strong); color: var(--strong); box-shadow: var(--shadow-field); }
select.cell { cursor: pointer; -webkit-appearance: none; appearance: none; }
select.cell option { background: var(--surface); color: var(--text); text-transform: capitalize; }
input.cell.right { text-align: right; }
input[type="date"]::-webkit-calendar-picker-indicator { filter: grayscale(1) opacity(0.5); cursor: pointer; }

.icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; padding: 0; background: none; border: 0; border-radius: var(--r); color: var(--sub); cursor: pointer; font-size: 1rem; line-height: 1; }
.icon-btn:hover { background: var(--active); color: var(--strong); }
.icon-btn:disabled { background: none; color: var(--line-strong); cursor: default; }
.icon-btn svg, .doc-bar svg { width: 0.9375rem; height: 0.9375rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ── tools ── */
/* Every page under tools/ is one column laid out as Claude's settings: a
   line on what it does, rows of label and control, then the drop area.
   The sidebar names it. */
.tool { max-width: 40rem; margin: 0 auto; padding: 1.5rem var(--page-pad); }
.tool .lede { margin: 0 0 0.75rem; color: var(--sub); }
.control { display: grid; grid-template-columns: 8rem minmax(0, 1fr) 4.5rem; align-items: center; gap: 0.75rem; min-height: 3rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line-soft); }
.control > label:first-child { color: var(--strong); }
.control .val { text-align: right; color: var(--sub); font-size: var(--fs-s); }
input[type=range] { width: 100%; margin: 0; accent-color: var(--strong); }
input[type=checkbox] { width: 1rem; height: 1rem; margin: 0; accent-color: var(--accent); justify-self: start; }
/* The segmented control of "System | Reduced". */
.seg { display: flex; gap: 0.125rem; padding: var(--seg-pad); background: var(--active); border-radius: var(--r-l); }
.seg input { display: none; }
.seg label { flex: 1; padding: 0.25rem 0.5rem; border-radius: var(--r-knob); text-align: center; color: var(--sub); font-size: var(--fs-s); cursor: pointer; }
.seg label:hover { color: var(--strong); }
.seg input:checked + label { background: var(--surface); color: var(--strong); box-shadow: var(--shadow-knob); }
.drop { position: relative; overflow: hidden; margin-top: 1.25rem; padding: 2.75rem 1.5rem; text-align: center; cursor: pointer; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r-l); color: var(--sub); box-shadow: var(--shadow); }
.drop:hover, .drop.drag { border-color: var(--accent); background: var(--tint); }
.drop .main, .drop.main { position: relative; z-index: 1; color: var(--strong); font-weight: 500; }
.drop .sub { position: relative; z-index: 1; margin-top: 0.25rem; font-size: var(--fs-s); }
.drop .fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--accent-soft); transition: width 0.2s; }
.drop.busy { pointer-events: none; opacity: 0.7; }
.success { color: var(--ok) !important; }
.results { margin-top: 1rem; font-size: var(--fs-s); }
.results div { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.375rem 0; border-bottom: 1px solid var(--line-soft); color: var(--sub); }
.results .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.results .pct { color: var(--ok); }
input[type=file] { display: none; }

/* ── toast ── */
.toast {
  position: fixed; left: 50%; bottom: 1.25rem; z-index: 80; transform: translateX(-50%);
  padding: 0.5rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-pop);
  color: var(--strong); white-space: nowrap; opacity: 0; pointer-events: none;
}
.toast.show { animation: toast-life 1.8s ease-out; }
.toast.error { color: var(--neg); }
.toast.error.show { animation: toast-life 3.4s ease-out; }
.toast.act.show { animation: toast-life 6s ease-out; pointer-events: auto; }
.toast button { margin-left: 0.875rem; padding: 0; background: none; border: 0; color: var(--accent-ink); font-weight: 500; cursor: pointer; }
@keyframes toast-life { 0% { opacity: 0; transform: translate(-50%, 0.375rem); } 10%, 70% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* ── login ── */
.login { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; background: var(--bg); }
.login-box { width: 20rem; max-width: 90vw; }
/* The wordmark over the form, centred: the indent balances the tracking after the last letter. */
.login-box .brand { margin: 0 0 1.5rem; padding: 0; font-size: 1.5rem; text-align: center; text-indent: var(--brand-track); }
.notice h1 { font-family: var(--serif); font-size: var(--fs-display); font-weight: 400; line-height: 1.2; color: var(--strong); letter-spacing: -0.01em; }
.login-box input { display: block; margin-bottom: 0.5rem; }
.login-err { min-height: 1.125rem; margin-bottom: 0.375rem; color: var(--neg); font-size: var(--fs-xs); text-align: center; }
.login-box .primary { width: 100%; }

/* ── notice ── */
/* A page with one thing to say, centred: the 404s, www's home, a share link
   on its way to Drive, client's placeholder. A label or the brand, the serif
   heading, a line in --sub, one action. */
.notice { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; min-height: 100vh; min-height: 100dvh; padding: 2rem var(--page-pad); text-align: center; }
.notice h1, .notice p { margin: 0; }
.notice p { color: var(--sub); }
/* Centred: the indent balances the tracking after the last letter. */
.notice .brand { padding: 0; text-indent: var(--brand-track); }

/* ── home ── */
/* www's home, a title page: the wordmark alone, light and tracked wide
   between two hairlines. The one page whose type grows with the window. */
.home { display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh; padding: 2rem 1.25rem; }
.plate { margin: 0; padding: 1.25rem 0; border-block: 1px solid var(--strong); color: var(--strong); font-family: var(--brand); font-size: clamp(2.5rem, 9vw, 7rem); font-weight: 300; line-height: 1; letter-spacing: 0.32em; text-indent: 0.32em; }

/* ── doc panel ── */
.doc-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 70; display: none; flex-direction: column; width: var(--doc-panel-w); background: var(--surface); border-left: 1px solid var(--line); }
.doc-panel.show { display: flex; }
.doc-panel iframe { flex: 1; width: 100%; border: 0; }
.doc-resize { position: absolute; top: 0; bottom: 0; left: -0.375rem; z-index: 2; width: 0.375rem; cursor: col-resize; }
.doc-resize::after { content: ""; position: absolute; top: 50%; left: 50%; width: 0.25rem; height: 2.5rem; transform: translate(-50%, -50%); border-radius: var(--r-full); background: var(--line-strong); opacity: 0; transition: opacity 0.15s; }
.doc-resize:hover::after { opacity: 1; }
.doc-resize.dragging::after { opacity: 1; background: var(--sub); }
body.doc-resizing { cursor: col-resize; user-select: none; }
.doc-bar { position: absolute; top: 0.625rem; right: 0.75rem; z-index: 71; display: flex; align-items: center; padding: 0.125rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-pop); }
.doc-bar button { display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; background: none; border: 0; border-radius: var(--r-s); color: var(--sub); cursor: pointer; text-decoration: none; }
.doc-bar button:hover { background: var(--hover); color: var(--strong); }
body.with-doc .shell { padding-right: var(--doc-panel-w); }

/* ── quote ── */
/* quote.html: one quote or invoice as an A4 sheet, printed to PDF to send,
   and its fee basis under it, in the dashboard's grey. It keeps the practice's letterhead, not the
   dashboard's look: Poppins, black on white, black rules, measured from
   the Google Docs quotes it replaces. So its sizes are print units (mm,
   pt), and its two colours are the paper tokens. */
.quote-page { --q-col: 31.8mm; --q-line: 3.7mm; --q-bleed: 2mm; padding: 1.25rem 1rem 3rem; }
/* Saving, and a sheet past one page, in the corner; empty, it takes no room. */
.q-state { position: fixed; right: 0.75rem; bottom: 0.75rem; padding: 0.25rem 0.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); color: var(--sub); font-size: var(--fs-s); }
.q-state:empty { display: none; }
/* Zoomed on screen only (quote.js); print and the PDF are always 100%. */
.q-sheet, .q-below { zoom: var(--q-zoom, 1); }
.q-state.err { color: var(--neg); }
/* An editable field shows itself on hover and while edited, on screen only. */
.q-sheet [data-edit] { border-radius: 0.5mm; outline: 1px solid transparent; outline-offset: 0.6mm; }
.q-sheet [data-edit]:hover { outline-color: var(--line-strong); }
/* No fill: it would hide the selection, which is the same clay. */
.q-sheet [data-edit]:focus { outline: 1px solid var(--accent); }
.q-sheet [data-edit]:empty::after, .q-sheet ul[data-edit] li:empty::after { content: "…"; color: var(--faint); }
.q-sheet {
  display: flex; flex-direction: column; width: 210mm; min-height: 297mm; margin: 0 auto;
  padding: 12mm 15.5mm 12mm 19.5mm; background: var(--paper); box-shadow: var(--shadow-card); color: var(--ink);
  font-family: var(--poppins); font-size: 7pt; font-weight: 400; line-height: var(--q-line);
}
.q-sheet b, .q-sheet h2, .q-sheet h3 { font-weight: 600; }
.q-sheet h2, .q-sheet h3, .q-sheet p, .q-sheet ul { margin: 0; }
/* The letterhead: the wordmark, and the contacts in the right column, each behind its icon. */
.q-head, .q-meta, .q-item, .q-sums div, .q-foot { display: grid; grid-template-columns: minmax(0, 1fr) var(--q-col); column-gap: 6mm; }
.q-brand { font-size: 35pt; font-weight: 500; line-height: 1; letter-spacing: 0.01em; }
.q-sub { margin: -0.5mm 0 0 0.8mm; font-size: 9pt; line-height: 1.3; }
.q-contact { padding-top: 4.4mm; font-size: 6pt; line-height: 5.1mm; }
.q-contact div { position: relative; }
.q-contact svg { position: absolute; left: -5.1mm; top: 1.2mm; width: 2.6mm; height: 2.6mm; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* The client on the left; the kind, ref and date on the right. A block's first line is its heading. */
.q-meta { margin-top: 9mm; }
.q-block { white-space: pre-line; }
.q-block + .q-block { margin-top: var(--q-line); }
.q-client .q-block:first-child { font-weight: 600; }
.q-ref dl { display: grid; grid-template-columns: 10.6mm auto; margin: var(--q-line) 0 0; padding-top: var(--q-line); }
.q-ref dt { font-weight: 500; }
.q-ref dd { margin: 0; white-space: nowrap; }
/* Description and fee, between black rules that run a little past the text. */
.q-rule { margin: 0 calc(-1 * var(--q-bleed)); padding: 0 var(--q-bleed); border-bottom: 1pt solid var(--ink); }
.q-cols { display: flex; justify-content: space-between; margin-top: 9mm; padding-bottom: 1.6mm; font-size: 8pt; font-weight: 600; }
.q-item { padding-top: 2.2mm; }
.q-item h2, .q-item h3 { font-size: 7pt; }
.q-item h2 a { color: inherit; text-decoration: underline; text-underline-offset: 0.6mm; }
.q-item h3, .q-item p + p, .q-item .q-note { margin-top: var(--q-line); }
.q-fee { font-size: 8pt; font-weight: 600; text-align: right; }
.q-sheet ul { padding-left: 8mm; list-style: none; }
.q-sheet li { position: relative; }
.q-sheet li::before { content: "●"; position: absolute; left: -4mm; font-family: Arial, sans-serif; font-size: 0.8em; }
/* The sums: labels right-aligned against the figures, the grand total under its own rule. */
/* An issued document: its lines as sent, a fee against any of them. */
.q-issued { padding-top: 2.2mm; }
.q-line { display: grid; grid-template-columns: minmax(0, 1fr) var(--q-col); column-gap: 6mm; }
.q-line:not(.head) + .q-line.head { margin-top: var(--q-line); }
.q-line h2 { font-size: 7pt; }
.q-statement .q-line + .q-line { margin-top: var(--q-line); }
.q-sums .q-note { margin-top: var(--q-line); }
.q-sums { margin-top: 6mm; }
.q-sums .q-rule { padding-top: 2.3mm; padding-bottom: 2mm; border-top: 1pt solid var(--ink); }
.q-sums div { font-size: 8pt; font-weight: 600; line-height: 4.3mm; text-align: right; }
.q-sums div span:first-child { padding-right: 0; }
.q-grand { padding-top: 2.4mm; }
/* Payment on the left; the signature, name and role centred on the right. */
.q-foot { align-items: end; margin-top: 8mm; }
.q-foot h2 { margin-bottom: var(--q-line); font-size: 8pt; }
.q-pay .q-block::first-line { font-weight: 600; }
.q-sign { margin-right: -1mm; font-size: 8pt; line-height: 4.3mm; text-align: center; white-space: nowrap; }
.q-sign img { display: block; width: 34.4mm; margin: 0 auto 0.5mm; }
.q-sign span { font-weight: 300; }
/* Under the sheet: the fee basis, a table and lists. */
.q-below { width: 210mm; max-width: 100%; margin: 1.5rem auto 0; color: var(--sub); font-size: var(--fs-s); line-height: 1.5; }
.q-below h2, .q-below h3 { margin: 1.25rem 0 0.375rem; color: var(--sub); font-size: var(--fs-s); font-weight: 600; }
.q-below h2 { margin-top: 0; }
.q-below ul { margin: 0; padding-left: 1.25rem; }
.q-below p { margin: 1.25rem 0 0; }
.q-below .q-none { margin: 0; }
.q-send { display: flex; gap: 0.5rem; margin: 0.5rem 0 1.25rem; }
.q-send .field { max-width: 20rem; padding: 0.25rem 0.5rem; }
.q-basis { width: 100%; border-collapse: collapse; }
.q-basis td { padding: 0.25rem 1rem 0.25rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.q-basis td.num { text-align: right; white-space: nowrap; }
.q-msg { color: var(--sub); font-family: var(--font); font-size: var(--fs); }
.q-msg a { color: var(--strong); }
/* One page, edge to edge: the sheet's padding is the margin. */
@page { size: A4; margin: 0; }
@media print {
  html, .quote-page { padding: 0; background: var(--paper); }
  .q-below, .q-state { display: none; }
  .q-sheet [data-edit] { outline: none !important; background: none !important; }
  .q-sheet { zoom: 1; min-height: 0; box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ── heritage book ── */
/* www/heritage-book: Dr Salah's pick list, in Arabic, right to left. Two
   exceptions, for a reader on a laptop or a television: text grows with the
   screen (16px on a phone, about 19px on a laptop, 26px on a 4K television),
   and body text is a step larger, as Arabic needs. */
html.hb { font-size: clamp(100%, 0.35vw + 0.8rem, 200%); --fs: 1rem; --fs-s: 0.9375rem; --fs-xs: 0.8125rem; --check: 1.5rem; }
.hb body { padding: var(--page-pad) var(--page-pad) calc(4rem + env(safe-area-inset-bottom)); line-height: 1.6; }
/* A narrow centred column, only as wide as the table needs. */
.hb header, .hb .card { max-width: 46rem; margin-inline: auto; }
.hb header { margin-bottom: 1.5rem; }
/* The wordmark reads left to right, on the page's start edge. */
.hb .brand { margin: 0 calc(-1 * var(--brand-track)) 0.5rem 0; padding: 0; direction: ltr; text-align: right; }
/* The title stays on one line, shrinking on a narrow phone. */
.hb h1 { margin: 0; color: var(--strong); font-size: min(clamp(1.5rem, 3vw, 2rem), 5.6vw); font-weight: 500; line-height: 1.35; white-space: nowrap; }
.hb-gate { max-width: 28rem; margin: 18vh auto 0; text-align: center; }
.hb-gate .brand { text-align: center; }
.hb-gate h1 { margin-bottom: 1.5rem; }
.hb-gate form { display: flex; gap: 0.5rem; }
.hb-gate .primary { flex: none; }
.hb-gate .login-err { margin: 0.75rem 0 0; }
/* One card, a row per building, a tick per drawing; an × strikes a building out. */
.hb .card { overflow: hidden; }
.hb table { width: 100%; border-collapse: collapse; }
.hb th, .hb td { padding: 0.5rem; text-align: start; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
.hb th { position: sticky; top: 0; z-index: 1; padding-top: 0.75rem; background: var(--surface); color: var(--sub); font-size: var(--fs-xs); font-weight: 400; vertical-align: bottom; }
.hb tbody tr:hover { background: var(--tint); }
.hb tr:last-child td { border-bottom: 0; }
.hb .num { width: 2.25rem; padding-inline-start: var(--card-pad); color: var(--faint); }
.hb .drive-col { width: 2.5rem; }
.hb th:last-child, .hb td:last-child { padding-inline-end: var(--card-pad); }
.hb .pick { width: 6.5rem; text-align: center; }
.hb .name { min-width: 11rem; color: var(--strong); font-weight: 500; }
/* Each English name sits under its Arabic one, for the book designer. */
.hb .en { display: block; color: var(--sub); font-size: var(--fs-xs); font-weight: 400; text-align: right; }
.hb .pick .en { text-align: center; }
.hb th .en { color: var(--faint); }
.hb .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* A building with materials: a folder button, left of its name, opens its Drive folder. */
.hb .drive { display: inline-grid; place-items: center; width: 2rem; height: 2rem; margin-top: -0.125rem; border: 1px solid var(--line); border-radius: var(--r-s); color: var(--sub); }
.hb .drive svg { width: 1.125rem; height: 1.125rem; }
.hb .drive:hover { border-color: var(--line-strong); background: var(--tint); color: var(--strong); }
/* The page is read-only, so a drawing's state is a mark, not a checkbox: a green
   disc with a check (done), ringed in the accent when done in the latest round, or a faint dash (not yet). */
.hb .mark { display: inline-grid; place-items: center; width: var(--check); height: var(--check); margin-top: 0.125rem; border-radius: var(--r-full); color: var(--surface); }
.hb .mark svg { width: 0.875rem; height: 0.875rem; }
.hb .mark[data-state="done"], .hb .mark[data-state="new"] { background: var(--ok); }
.hb .mark[data-state="new"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.hb .mark[data-state="none"]::after { content: ""; width: 0.625rem; border-top: 1.5px solid var(--line-strong); }
/* A struck building is faded, with one straight line across the whole row, drawn cell by cell. */
.struck td { position: relative; opacity: 0.4; }
.struck td::after { content: ""; position: absolute; inset-inline: 0; top: 50%; border-top: 1.5px solid var(--strong); pointer-events: none; }
.pick-label { display: none; }
/* A phone: each building a block, its name on top, the five ticks with their names. */
@media (max-width: 760px) {
  .hb thead { display: none; }
  .hb table, .hb tbody, .hb td { display: block; width: auto !important; }
  .hb tr { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.375rem 0.25rem; padding: 0.875rem var(--card-pad); border-bottom: 1px solid var(--line-soft); }
  .hb td { min-width: 0 !important; padding: 0 !important; border: 0; }
  .hb td.num { display: none; }
  .hb td.name { grid-column: 1 / -1; }
  /* The folder button stays left of the name, at the row's end. */
  .hb td.drive-col { position: absolute; inset-inline-end: var(--card-pad); top: 0.875rem; }
  .hb tr:has(.drive) td.name { padding-inline-end: 2.75rem !important; }
  .hb td.pick { display: flex; flex-direction: column; justify-content: end; align-items: center; }
  .hb .pick-label { display: flex; flex-direction: column; justify-content: end; margin-bottom: 0.25rem; color: var(--sub); font-size: var(--fs-xs); line-height: 1.3; text-align: center; }
  .hb .struck td::after { content: none; }
  .hb tr.struck::after { content: ""; position: absolute; inset-inline: var(--card-pad); top: 50%; border-top: 1.5px solid var(--sub); pointer-events: none; }
}

/* ── survey ── */
/* www/adhen-survey: the drawing sheets in one column, the models in a grid,
   and the stage bar floating at the bottom, in thumb reach, to switch. */
.survey { padding: var(--page-pad) var(--page-pad) calc(6rem + env(safe-area-inset-bottom)); }
.sheets { display: grid; gap: var(--gap); max-width: 87.5rem; margin: 0 auto; }
.sheets .sheet { display: block; overflow: hidden; }
.sheets img { display: block; width: 100%; height: auto; aspect-ratio: 3200 / 2263; }
.sheets .download { margin: 0.5rem 0 0; text-align: center; }
.models { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 27.5rem), 1fr)); gap: var(--gap); max-width: 100rem; margin: 0 auto; }
.models figure { margin: 0; overflow: hidden; }
.models model-viewer { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; background: transparent; --poster-color: transparent; --progress-bar-color: var(--faint); }
.models figcaption { padding: 0.75rem var(--card-pad); border-top: 1px solid var(--line-soft); color: var(--strong); }
.survey-bar { position: fixed; left: 50%; bottom: calc(0.75rem + env(safe-area-inset-bottom)); z-index: 20; transform: translateX(-50%); box-shadow: var(--shadow-pop); }
/* Big enough for a thumb. */
.survey-bar .seg-btn { padding: 0.5rem 1rem; font-size: var(--fs); }
/* The knob slides once it has been placed, not on load. */
.survey-bar.ready .seg-pill { transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1), width 0.2s cubic-bezier(0.2, 0, 0, 1); }
@media (prefers-reduced-motion: reduce) { .survey-bar.ready .seg-pill { transition: none; } }

/* ── narrow ── */
/* A tablet or narrow window: the search takes what the bar has left. */
@media (max-width: 900px) {
  :root { --page-pad: 0.75rem; --main-pad: 0.75rem; --doc-panel-w: 100vw; }
  .search kbd { display: none; }
  .search { flex: 1; margin-left: 0.25rem; }
  body.with-doc .shell { padding-right: 0; }
}
/* A phone: views as icons only, and a row takes two lines, the name and ⋯,
   then the step with the bar beside it. */
@media (max-width: 760px) {
  .nav-item span { display: none; }
  /* The wordmark gives its room to undo and redo, so the bar fits a phone. */
  .sidebar .brand { display: none; }
  .search { min-width: 4.5rem; }
  .q-row { grid-template-columns: var(--col-fold) auto minmax(0,1fr) auto; grid-template-areas: "fold name name menu" ". step bill bill"; row-gap: 0.375rem; }
  .q-row > .chev { grid-area: fold; }
  .q-row > .q-name { grid-area: name; }
  .q-row > .pill, .q-row > .pill-gap { grid-area: step; }
  .q-row > .bill { grid-area: bill; }
  .q-row .track { min-width: 0; }
  .q-row .bill-fig { min-width: 0; }
  .q-row > :last-child { grid-area: menu; }
  .declare .exp-row { grid-template-columns: minmax(0,1fr) 5.5rem 4.5rem 1.75rem 1.75rem; column-gap: 0.25rem; }
  .declare .exp-row > :first-child, .declare .exp-row > :nth-child(3) { display: none; }
  .vat-sum { padding-right: var(--pad-x); }
  .due-row { grid-template-columns: minmax(0, 1fr) 6.5rem 3rem 1.75rem; }
  .renewal { grid-template-columns: minmax(0, 1fr) 6.25rem 5rem 1.75rem; }
  :root { --card-pad: 1rem; }
}