/* Timesheet Sender: one design language, "slate glass". See docs/design/slate-glass.md for the tokens, the measured contrast and the rules.
   Cool blue-grey plan sheet underneath. Frosted glass for the fixed bars, the bottom form, panels and the private lists.
   Solid white paper, never glass, for what a customer receives. One action blue, only on things tapped to move forward.
   Yellow is only the mark (bar and warning icon), green only sent and paid, red only a real problem.
   Self-contained: no web fonts, no external requests. */

/* ---- tokens ------------------------------------------------------------------------------ */
/* Light is the base. The paper and the cards re-declare it, so what a customer receives stays light in dark mode too. */
:root, .paper, .card {
  --base: #DEE5EC; --grid: rgba(24, 48, 72, .06);
  --ink: #121E28; --ink2: #384957; --inv: #121E28; --on-inv: #FFFFFF;
  --ctl: #5A6B79; --hair: rgba(18, 30, 40, .12); --sel: rgba(18, 30, 40, .09);
  --field: #FFFFFF;
  /* glass: a fill, a solid of the same tone for the fallbacks, a rim, and a highlight on the top edge */
  --glass-bar: rgba(255, 255, 255, .78);   --glass-bar-solid: #F6F8FA;
  --glass-form: rgba(255, 255, 255, .90);  --glass-form-solid: #FBFCFD;
  --glass-list: rgba(255, 255, 255, .62);  --glass-list-solid: #F2F5F8;
  --glass-chip: rgba(255, 255, 255, .62);  --glass-chip-solid: #F3F6F9;
  --glass-hover: rgba(255, 255, 255, .92); --glass-frame: rgba(255, 255, 255, .34);
  --edge: rgba(255, 255, 255, .85); --edge-solid: #C8D2DC; --hi: inset 0 1px 0 rgba(255, 255, 255, .95);
  --blur: blur(14px) saturate(1.25);
  --shadow: 0 8px 28px -10px rgba(28, 44, 64, .22); --shadow-up: 0 -8px 26px -12px rgba(28, 44, 64, .30);
  /* the one action colour, and the three marks */
  --primary: #2563EB; --primary-hover: #1D4ED8; --primary-press: #1E40AF; --primary-off: #A9BFEF; --on-primary: #FFFFFF;
  --focus: #0B3A8F;
  --mark: #F5C518; --ok: #17653F; --bad: #B3261E;
  --doc: #FFFFFF; --doc-ink: #121E28; --doc-line: #D3DBE2; --doc-muted: #46585F; --doc-hover: #EDF1F5;
  --scrim: rgba(10, 20, 30, .42);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --base: #0D141B; --grid: rgba(150, 190, 230, .06);
    --ink: #EDF2F7; --ink2: #B3C0CC; --inv: #EDF2F7; --on-inv: #0D141B;
    --ctl: #8497A8; --hair: rgba(237, 242, 247, .13); --sel: rgba(237, 242, 247, .12);
    --field: #0E1721;
    --glass-bar: rgba(24, 35, 47, .84);   --glass-bar-solid: #19242F;
    --glass-form: rgba(24, 35, 47, .92);  --glass-form-solid: #18232E;
    --glass-list: rgba(30, 44, 59, .58);  --glass-list-solid: #17222D;
    --glass-chip: rgba(237, 242, 247, .08); --glass-chip-solid: #243342;
    --glass-hover: rgba(237, 242, 247, .16); --glass-frame: rgba(24, 35, 47, .38);
    --edge: rgba(237, 242, 247, .15); --edge-solid: #34475A; --hi: inset 0 1px 0 rgba(237, 242, 247, .12);
    --shadow: 0 10px 30px -10px rgba(0, 0, 0, .6); --shadow-up: 0 -10px 30px -12px rgba(0, 0, 0, .7);
    --primary: #5B9BFF; --primary-hover: #7DB1FF; --primary-press: #4685EA; --primary-off: #2C4469; --on-primary: #07152B;
    --focus: #A5C8FF;
    --ok: #6FD39E; --bad: #FF9C93;
    --scrim: rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
/* No glass where it cannot be drawn or is not wanted: the same tone, opaque. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root, .paper, .card { --glass-bar: var(--glass-bar-solid); --glass-form: var(--glass-form-solid); --glass-list: var(--glass-list-solid); --glass-chip: var(--glass-chip-solid); --glass-frame: var(--glass-list-solid); --blur: none; }
}
@media (prefers-reduced-transparency: reduce) {
  :root, .paper, .card { --glass-bar: var(--glass-bar-solid); --glass-form: var(--glass-form-solid); --glass-list: var(--glass-list-solid); --glass-chip: var(--glass-chip-solid); --glass-frame: var(--glass-list-solid); --blur: none; }
}
@media (prefers-contrast: more) {
  :root, .paper, .card { --glass-bar: var(--glass-bar-solid); --glass-form: var(--glass-form-solid); --glass-list: var(--glass-list-solid); --glass-chip: var(--glass-chip-solid); --glass-frame: var(--glass-list-solid); --blur: none; --edge: var(--ctl); --hair: var(--ctl); --grid: transparent; }
}
:root {
  --font: Bahnschrift, "DIN Alternate", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 40px;
  --r1: 12px; --r2: 22px; --rp: 6px; --rb: 999px;  /* fields, glass panes, the paper (a sheet, not a pane), buttons and chips */
  --t-s: 13px; --t-m: 16px; --t-l: 20px; --t-xl: 30px;
  --tap: 48px;
  /* One height for the fixed tab bar. The bar is sized by it, and the column that holds the page keeps
     exactly this much room under the sticky dock, so nothing can end up behind either. */
  --tabs-h: calc(60px + env(safe-area-inset-bottom, 0px));
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--base); color: var(--ink); font: 400 var(--t-m)/1.45 var(--font); min-height: 100vh; min-height: 100dvh; }
/* The plan-sheet grid: fixed behind everything, so glass has something to frost. One static layer, never animated. */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 28px 28px; }
h1, h2, h3, h4, p, dl, dd, dt, figure, ul { margin: 0; }
a { color: inherit; }
.email { display: inline-block; max-width: 100%; overflow-wrap: anywhere; font-weight: 600; }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The marker pill every mark uses: a yellow bar on the left, with the warning icon beside the words. */
.row.mark::before, .warn::before, .ferr::before, .notice::before {
  content: ""; position: absolute; left: 8px; top: 10px; bottom: 10px; width: 5px; border-radius: 3px; background: var(--mark); box-shadow: inset 0 0 0 1px rgba(18, 30, 40, .55);
}

/* ---- layout ------------------------------------------------------------------------------ */
.app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
.main { flex: 1; display: flex; flex-direction: column; width: 100%; max-width: 640px; margin: 0 auto; }
.page { flex: 1; padding: var(--s3) var(--s3) var(--s5); }
.app.has-tabs .main { padding-bottom: var(--tabs-h); }  /* the room under the page for the fixed tab bar; the sticky dock rests on top of it */
.has-dock .page { padding-bottom: var(--s4); }
.bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: var(--s2); min-height: 64px; padding: calc(var(--s2) + env(safe-area-inset-top, 0px)) var(--s4) var(--s2); background: var(--glass-bar); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-bottom: 1px solid var(--edge-solid); box-shadow: var(--hi), 0 6px 18px -12px rgba(28, 44, 64, .35); }
.bar .ib:first-child { margin-left: -12px; }
.bar-title, .brand { font-size: var(--t-l); line-height: 1.2; font-weight: 700; letter-spacing: -.005em; }
.brand { display: inline-flex; align-items: center; gap: var(--s2); }
.brand .ic { color: var(--ink); width: 26px; height: 26px; }
.ib { display: grid; place-items: center; flex: none; width: var(--tap); height: var(--tap); border: 0; background: none; color: var(--ink); border-radius: 50%; cursor: pointer; text-decoration: none; }
.ib:hover { background: var(--sel); }
.sect { margin: var(--s5) 0 var(--s2) var(--s2); font-size: var(--t-m); font-weight: 700; }
.sect:first-child { margin-top: var(--s1); }
.stack > * + * { margin-top: var(--s3); }
.gap { margin-top: var(--s3); }
.muted { color: var(--ink2); }

.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; height: var(--tabs-h); padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); background: var(--glass-bar); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-top: 1px solid var(--edge-solid); box-shadow: var(--hi), var(--shadow-up); }
.tabs a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; margin: 6px 3px; padding: 0 2px; border-radius: 16px; color: var(--ink2); font: 600 var(--t-s)/1.2 var(--font); text-decoration: none; }
.tabs a[aria-current] { color: var(--ink); background: var(--sel); box-shadow: inset 0 0 0 1px var(--hair); }
.tabs a:hover { background: var(--sel); }
.tabs a span { text-align: center; line-height: 1.15; }

@media (min-width: 900px) {
  .app { padding: var(--s5) var(--s4); min-height: 0; }
  .app.has-tabs .main { padding-bottom: 0; }
  .main { flex: none; min-height: 0; background: var(--glass-frame); border: 1px solid var(--edge); border-radius: 28px; box-shadow: var(--hi), var(--shadow); overflow: clip; }
  .app.has-tabs { display: grid; grid-template-columns: 220px minmax(0, 760px); justify-content: center; align-items: start; column-gap: var(--s5); }
  .app.has-tabs .main { max-width: 760px; }
  .bar { position: static; box-shadow: none; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: var(--hair); }
  .tabs { position: sticky; top: var(--s5); bottom: auto; left: auto; right: auto; height: auto; padding: var(--s2); flex-direction: column; gap: var(--s1); border: 1px solid var(--edge); border-radius: var(--r2); box-shadow: var(--hi), var(--shadow); }
  .tabs a { flex-direction: row; justify-content: flex-start; gap: var(--s3); min-height: var(--tap); height: auto; margin: 0; padding: 0 var(--s3); border-radius: 14px; font-size: var(--t-m); }
  .tabs a[aria-current] { box-shadow: inset 0 0 0 1px var(--hair); }
  .has-tabs .page { padding-bottom: var(--s5); }
  .page { padding: var(--s5); }
  .app.has-tabs .dock { bottom: 0; }  /* the tabs are in the side column here, so the dock rests on the window edge */
}

/* ---- plain pages: sign in, errors ------------------------------------------------------- */
.plain .main { max-width: 30rem; background: none; border: 0; box-shadow: none; }
.plain .bar { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; box-shadow: none; justify-content: center; padding-top: var(--s5); }
.plain .page { padding-top: var(--s3); }
@media (min-width: 900px) { .plain .bar { padding-top: var(--s2); } .app.plain { padding-top: var(--s6); } }

/* ---- paper: what a customer receives. Solid white in both themes, dark ink, never glass or translucent --- */
.card, .paper { position: relative; background: var(--doc); color: var(--doc-ink); border: 1px solid var(--doc-line); border-radius: var(--rp); box-shadow: 0 1px 2px rgba(10, 20, 30, .18), 0 18px 34px -16px rgba(10, 20, 30, .38); }
.card { padding: var(--s5); }
.card h1 { font-size: var(--t-xl); line-height: 1.15; margin-bottom: var(--s3); }
.card p { margin-bottom: var(--s3); }
.card h2 { font-size: var(--t-l); line-height: 1.2; margin: var(--s4) 0 var(--s1); }
.card .btn { width: 100%; }
.card .row { padding: 0; }
.card .dev-box { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--doc-line); }
.card code { font-family: Consolas, "Cascadia Mono", monospace; font-size: .92em; }
.card .muted { color: var(--doc-muted); font-size: 15px; }
.card .notice { position: relative; }

/* ---- buttons ---------------------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: var(--tap); padding: 0 var(--s5); border: 1.5px solid var(--ctl); border-radius: var(--rb); background: var(--glass-chip); box-shadow: var(--hi); color: var(--ink); font: 600 var(--t-m)/1.2 var(--font); text-align: center; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--glass-hover); }
.btn.pri { background: var(--primary); border-color: var(--primary); color: var(--on-primary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 5px 14px -6px var(--primary); }
.btn.pri:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn.pri:active { background: var(--primary-press); border-color: var(--primary-press); }
.btn.pri:disabled, .btn.pri[aria-disabled="true"] { background: var(--primary-off); border-color: var(--primary-off); box-shadow: none; cursor: not-allowed; }
.btn.sm { padding: 0 var(--s4); font-size: 15px; }
.btn.big { width: 100%; min-height: 56px; }
.btn:active { transform: translateY(1px); }
.btns { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.btns > * { flex: 1 1 140px; }
.btns form { display: contents; }
.dock { position: sticky; bottom: 0; z-index: 4; display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3) var(--s3) calc(var(--s3) + env(safe-area-inset-bottom, 0px)); background: var(--glass-bar); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-top: 1px solid var(--edge-solid); box-shadow: var(--hi), var(--shadow-up); }
.has-tabs .dock { bottom: var(--tabs-h); padding-bottom: var(--s3); }  /* the tab bar already covers the home-indicator strip */
.link-btn { display: inline; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }

/* ---- grey list: private things. Frosted fill and a soft rim; no blur here, nothing scrolls beneath a list --- */
.list { background: var(--glass-list); border: 1px solid var(--edge); border-radius: var(--r2); box-shadow: var(--hi), var(--shadow); }
.row { position: relative; display: flex; align-items: stretch; min-height: 56px; border-bottom: 1px solid var(--hair); color: var(--ink); }
.list > .row:first-child { border-radius: var(--r2) var(--r2) 0 0; }
.list > .row:last-child { border-bottom: 0; border-radius: 0 0 var(--r2) var(--r2); }
.list > .row:only-child { border-radius: var(--r2); }
.row-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s3); padding: 10px var(--s3) 10px var(--s5); border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; border-radius: inherit; }
span.row-main, div.row-main { cursor: default; }
a.row-main:hover, button.row-main:hover { background: var(--sel); }
.r-ic { flex: none; width: 20px; display: grid; place-items: center; color: var(--ink2); }
.mark .r-ic { color: var(--ink); }
.r-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.r-name { font-weight: 600; }
.r-sub { font-size: var(--t-s); color: var(--ink2); line-height: 1.3; }
.r-val { flex: none; max-width: 55%; text-align: right; overflow-wrap: anywhere; display: inline-flex; align-items: center; gap: var(--s1); font-variant-numeric: tabular-nums; }
.row.off .r-name, .row.off .r-val { text-decoration: line-through; color: var(--ink2); }
.row.paid .r-ic, .row.sent .r-ic { color: var(--ok); }  /* green is only for sent and paid */
.row.has-act { flex-wrap: wrap; }
.row .act { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: var(--s2); padding: 0 var(--s3) var(--s3) calc(var(--s5) + 20px + var(--s3)); }
.paper .row .act { padding-left: 0; padding-right: 0; }
.row .act .btn { flex: 1 1 140px; }
.pf tr.rcl .row-main { gap: var(--s2); }
.row form { display: contents; }
.row > form > .row-main { width: 100%; }

/* ---- tips: the "why", opened from a small icon ------------------------------------------ */
.tip { position: relative; flex: none; display: flex; align-items: center; }
.tip-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--ink2); border-radius: 50%; cursor: pointer; }
.tip-btn .ic { width: 18px; height: 18px; }
.tip-btn:hover { color: var(--ink); background: var(--sel); }
.tip-text { display: none; position: absolute; z-index: 20; right: 4px; top: calc(100% - 4px); width: max-content; max-width: min(280px, 72vw); padding: var(--s2) var(--s3); background: var(--inv); color: var(--on-inv); border-radius: var(--r1); font-size: 14px; line-height: 1.35; font-weight: 400; text-align: left; box-shadow: 0 8px 22px -6px rgba(0, 0, 0, .4); }
.tip-btn:focus-visible + .tip-text, .tip-btn[aria-expanded="true"] + .tip-text { display: block; }
@media (hover: hover) { .tip:hover .tip-text { display: block; } }

/* ---- paper contents --------------------------------------------------------------------- */
.paper { padding: var(--s4); }
.paper h2 { font-size: var(--t-l); margin-bottom: var(--s1); }
.paper .pl { font-size: var(--t-s); color: var(--doc-muted); margin-bottom: var(--s1); }
.paper .row { background: transparent; color: var(--doc-ink); border: 0; min-height: 48px; }
.paper .row.mark::before { left: calc(-1 * var(--s4)); top: 0; bottom: 0; width: 6px; border-radius: 0; box-shadow: none; }
.paper .row-main { padding: 6px 0; border-radius: 0; }
.paper a.row-main:hover { background: var(--doc-hover); }
.paper .r-ic { color: var(--doc-muted); }
.paper .r-sub { color: var(--doc-muted); }
.paper .row.paid .r-ic, .paper .row.sent .r-ic { color: var(--ok); }
.hline { position: relative; display: flex; align-items: center; min-height: 44px; }
.hline.mark::before { content: ""; position: absolute; left: calc(-1 * var(--s4)); top: 2px; bottom: 2px; width: 6px; background: var(--mark); }
.hl-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s2); min-height: 44px; color: var(--doc-muted); font-size: var(--t-s); text-decoration: none; }
.hl-main b { color: var(--doc-ink); font-weight: 600; font-size: 15px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
a.hl-main:hover b { text-decoration: underline; }
.hline .tip-btn { color: var(--doc-muted); }
.hgrid { display: grid; grid-template-columns: 1fr; column-gap: var(--s5); }
@media (min-width: 560px) { .hgrid { grid-template-columns: 1fr 1fr; } }

/* day lines: a real table on desktop, one grid line per day at phone width */
.pt { width: 100%; border-collapse: collapse; font-size: 15px; margin-top: var(--s3); }
.pt th, .pt td { padding: 10px var(--s2) 10px 0; border-bottom: 1px solid var(--doc-line); text-align: left; vertical-align: top; font-weight: 400; color: var(--doc-ink); }
.pt thead th { font-size: var(--t-s); font-weight: 600; color: var(--doc-muted); border-bottom: 1.5px solid var(--doc-ink); padding-top: var(--s1); padding-bottom: var(--s1); }
.pt .r { text-align: right; padding-right: 0; }
.pt td.r { white-space: nowrap; }
.pt tbody tr { position: relative; }
.pt .day { white-space: nowrap; font-weight: 700; }
.pt .day a, .pt .day .dl { text-decoration: none; display: inline-flex; flex-direction: column; min-height: 24px; }
.pt .day a::after { content: ""; position: absolute; inset: 0; }
.pt .day a:focus-visible { outline: none; }
.pt tbody tr:has(.day a:focus-visible) { outline: 3px solid var(--focus); outline-offset: -3px; }
.pt tbody tr:hover > * { background: var(--doc-hover); }
.pt .nw { white-space: nowrap; }
.pt .small { display: block; font-size: var(--t-s); font-weight: 400; color: var(--doc-muted); }
.pt .tm { display: none; }
.pt .st, .pt .en, .pt .bk { white-space: nowrap; }
.pt td.hr { padding-right: var(--s4); }
.pt .tipwrap { position: relative; z-index: 2; display: inline-flex; align-items: center; vertical-align: middle; }
.pt .tip-btn { margin: -14px -6px; }
.pt .tip-text { right: auto; left: -8px; top: calc(100% - 10px); }
.pt tr.mark > .day { position: relative; }
.pt tr.mark > .day::before { content: ""; position: absolute; left: calc(-1 * var(--s4)); top: 0; bottom: 0; width: 6px; background: var(--mark); }
.pt tr.off td, .pt tr.off th { color: var(--doc-muted); }
.pt tr.off .st, .pt tr.off .en, .pt tr.off .bk, .pt tr.off .nt, .pt tr.off .hr, .pt tr.off .am, .pt tr.off .tm .tmv { text-decoration: line-through; }
.pt .ic { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; color: var(--doc-muted); }
.pt .offic { display: block; margin-top: 2px; }
.pt .plus1 { font-size: 11px; vertical-align: super; color: var(--doc-muted); margin-left: 1px; }
.pt .nmark { display: block; font-size: var(--t-s); color: var(--doc-ink); }
.pt .nmark .tipwrap { margin-left: 2px; }
.pf { width: 100%; border-collapse: collapse; margin-top: var(--s3); }
.pf th, .pf td { padding: 10px 0; border-bottom: 1px solid var(--doc-line); text-align: left; font-weight: 400; font-size: 15px; color: var(--doc-ink); }
.pf td { text-align: right; white-space: nowrap; padding-left: var(--s3); }
.pf th a { display: flex; align-items: center; min-height: 44px; margin: -8px 0; text-decoration: none; }
.pf a:hover { text-decoration: underline; }
.pf tr.in th { padding-left: var(--s4); color: var(--doc-muted); }
.pf tr.sum th, .pf tr.sum td { font-size: var(--t-l); font-weight: 700; border-bottom: 0; border-top: 1.5px solid var(--doc-ink); }
.pf tr.dim th, .pf tr.dim td { color: var(--doc-muted); }

@media (max-width: 559px) {
  .pt thead { display: none; }
  .pt, .pt tbody { display: block; }
  .pt tr { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "d t a" "d t h" "d n n"; column-gap: var(--s2); row-gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--doc-line); }
  .pt td, .pt th { border: 0; padding: 0; }
  .pt tbody tr:hover > * { background: none; }
  .pt tbody tr:hover { background: var(--doc-hover); }
  .pt .day { grid-area: d; }
  .pt .st, .pt .en, .pt .bk { display: none; }
  .pt .tm { display: block; grid-area: t; min-width: 0; }
  .pt .nt { grid-area: n; font-size: var(--t-s); color: var(--doc-muted); overflow-wrap: anywhere; }
  .pt .nt:empty { display: none; }
  .pt td.hr { grid-area: h; padding-right: 0; text-align: right; font-size: var(--t-s); color: var(--doc-muted); }
  .pt .am { grid-area: a; font-weight: 600; }
  .pt tr.mark > .day::before { content: none; }
  .pt tr.mark::before { content: ""; position: absolute; left: calc(-1 * var(--s4)); top: 0; bottom: 0; width: 6px; background: var(--mark); }
}

/* ---- the warning shape: a line, an icon, one or two buttons. A glass panel with the yellow bar ------ */
.warn { position: relative; margin: var(--s2) 0; padding: var(--s3) var(--s3) var(--s3) var(--s5); background: var(--glass-list); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--edge); border-radius: var(--r2); box-shadow: var(--hi), var(--shadow); color: var(--ink); }
.warn .cl { list-style: none; padding: 0; margin: 0; }
.warn .cl li { display: flex; align-items: center; gap: var(--s2); min-height: 32px; }
.warn .cl b { font-weight: 700; font-variant-numeric: tabular-nums; }
.warn .cl .cl-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.warn .tip-btn { margin: -6px -8px -6px 0; color: var(--ink); }
.warn .btns { margin-top: var(--s2); }
.paper .warn { background: #F4F6F9; border-color: var(--doc-line); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---- bottom form ------------------------------------------------------------------------ */
.overlay { position: fixed; inset: 0; z-index: 30; }
.scrim { position: absolute; inset: 0; background: var(--scrim); animation: fade .15s; }
.sheetform { position: absolute; left: 0; right: 0; bottom: var(--kb, 0px); max-width: 560px; margin: 0 auto; max-height: 92vh; max-height: calc(92dvh - var(--kb, 0px)); overflow: auto; background: var(--glass-form); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); color: var(--ink); border: 1px solid var(--edge); border-bottom: 0; border-radius: 28px 28px 0 0; padding: var(--s2) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom, 0px)); box-shadow: var(--hi), var(--shadow-up); animation: up .18s ease-out; overscroll-behavior: contain; }
.sheetform::before { content: ""; display: block; width: 40px; height: 4px; margin: 4px auto 0; border-radius: 2px; background: var(--hair); }
.sf-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s2); }
.sf-head h3 { font-size: var(--t-l); }
.sf-head .ib { margin-right: -12px; }
@keyframes up { from { transform: translateY(24px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
body:has(.overlay) { overflow: hidden; }
.sheetform .list { background: var(--glass-chip); box-shadow: none; }

.setup { margin: var(--s4) 0 0; padding-left: 1.4em; font-size: var(--t-m); line-height: 1.4; }
.setup li { margin-bottom: var(--s2); padding-left: var(--s1); }
.setup-note { margin: var(--s2) 0 var(--s1); font-size: var(--t-s); line-height: 1.4; color: var(--ink2); }

.fld { display: block; margin-bottom: var(--s3); }
.fld > span:first-child { display: block; font-size: var(--t-s); font-weight: 600; color: var(--ink2); }
.fld input[type=text], .fld input[type=email], .fld input[type=number], .fld input[type=date], .fld input[type=time], .fld select, .fld textarea { display: block; width: 100%; min-height: var(--tap); margin-top: var(--s1); padding: 8px 12px; font: 400 var(--t-m)/1.3 var(--font); color: var(--ink); background: var(--field); border: 1.5px solid var(--ctl); border-radius: var(--r1); }
.fld input[type=file] { display: block; width: 100%; min-height: var(--tap); margin-top: var(--s1); padding: 10px; font: 400 15px/1.3 var(--font); color: var(--ink); background: var(--field); border: 1.5px dashed var(--ctl); border-radius: var(--r1); cursor: pointer; }
.fld input[type=file]::file-selector-button { margin-right: var(--s3); padding: 6px 14px; font: 600 14px var(--font); color: var(--ink); background: var(--glass-chip); border: 1.5px solid var(--ctl); border-radius: var(--rb); cursor: pointer; }
.fld.bad input, .fld.bad select { border-color: var(--bad); border-width: 2px; }
.box { display: flex; align-items: center; gap: var(--s2); }
.box input { flex: 1; min-width: 0; }
.box .aff { flex: none; margin-top: var(--s1); font-weight: 600; color: var(--ink2); min-width: 1ch; }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.f2 > .fld { min-width: 0; }
.ferr { position: relative; display: flex; align-items: center; gap: var(--s2); margin: calc(-1 * var(--s2)) 0 var(--s3); padding: var(--s2) var(--s3) var(--s2) var(--s5); background: var(--glass-list); border: 1px solid var(--edge); border-radius: var(--r1); font-weight: 600; }
.swrow { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: var(--tap); margin-bottom: var(--s3); }
.swrow .swname { display: flex; align-items: center; gap: var(--s2); font-weight: 600; }
.swrow .swname .v { font-weight: 400; color: var(--ink2); }
.swrow .swname .vy { display: none; }
.swrow:has(input:checked) .vn { display: none; }
.swrow:has(input:checked) .vy { display: inline; color: var(--ink); font-weight: 600; }
.swrow .tip-btn { margin: 0 -8px 0 0; }
.sw { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 52px; height: 32px; margin: 0; border: 1.5px solid var(--ctl); border-radius: 16px; background: var(--field); cursor: pointer; }
.sw::after { content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--ctl); transition: transform .12s; }
.sw::before { content: ""; position: absolute; inset: -8px -4px; }  /* a 44px-high touch area around the 32px switch */
.sw:checked { background: var(--inv); border-color: var(--inv); }
.sw:checked::after { transform: translateX(20px); background: var(--on-inv); }

/* big tappable answers (radio buttons dressed as buttons: they work without JavaScript) */
.opts { display: grid; gap: var(--s2); margin-bottom: var(--s3); }
.bigopt { position: relative; display: flex; align-items: center; gap: var(--s3); min-height: 56px; padding: 0 var(--s5); border: 1.5px solid var(--ctl); border-radius: var(--rb); background: var(--glass-chip); box-shadow: var(--hi); color: var(--ink); font: 600 var(--t-m)/1.2 var(--font); cursor: pointer; }
.bigopt:hover { background: var(--glass-hover); }
.bigopt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.bigopt > span { flex: 1; }
.bigopt .tick { opacity: 0; color: var(--on-inv); }
.bigopt:has(input:checked) { background: var(--inv); border-color: var(--inv); color: var(--on-inv); }
.bigopt:has(input:checked) .tick { opacity: 1; }
.bigopt:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
button.bigopt { width: 100%; text-align: left; background: var(--primary); border-color: var(--primary); color: var(--on-primary); }  /* a button that moves forward, not an answer */
button.bigopt:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.pickfields { display: none; margin-bottom: var(--s3); }
.opts:has(input[value=pick]:checked) + .pickfields, .opts:has(input[value=two]:checked) + .pickfields { display: block; }

/* ---- steps indicator: the general bar for any multi-step form --------------------------- */
.steps { flex: 1; height: 10px; background: var(--sel); border: 1px solid var(--hair); border-radius: 5px; overflow: hidden; }
.steps i { display: block; height: 100%; background: var(--inv); border-radius: 4px; transition: width .2s; }

/* ---- first-time setup ------------------------------------------------------------------- */
.sbar { display: flex; align-items: center; gap: var(--s3); min-height: 64px; padding: calc(var(--s2) + env(safe-area-inset-top, 0px)) var(--s4) var(--s2) var(--s3); background: var(--glass-bar); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-bottom: 1px solid var(--edge-solid); box-shadow: var(--hi); position: sticky; top: 0; z-index: 5; }
.sbar .sp { width: var(--tap); flex: none; }
.sform { flex: 1; display: flex; flex-direction: column; }
.sform .page { padding-top: var(--s5); }
.stitle { font-size: var(--t-xl); line-height: 1.15; margin-bottom: var(--s4); letter-spacing: -.01em; }
.who { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s5); font-size: var(--t-s); color: var(--ink2); }
.who form { display: block; }
.readyrow { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s6); }
.readyicon { display: grid; place-items: center; width: 88px; height: 88px; border-radius: var(--r2); background: var(--glass-list); border: 1px solid var(--edge); box-shadow: var(--hi), var(--shadow); color: var(--ink); }
.readyicon .ic { width: 44px; height: 44px; }
.done-line { font-size: var(--t-xl); font-weight: 700; }

/* ---- materials: receipt lines on the sheet, returns under their purchase ------------------ */
.pf tr.mh th { padding: var(--s4) 0 var(--s1); font-size: var(--t-s); font-weight: 600; color: var(--doc-muted); border-bottom: 1.5px solid var(--doc-ink); }
.pf tr.rc th { padding: 0; border-bottom: 1px solid var(--doc-line); }
tr.rc { position: relative; }
.pf tr.rc td { border-bottom: 1px solid var(--doc-line); vertical-align: middle; }
.rcell { position: relative; display: flex; align-items: center; }
.pf th .rl, .pf th a.rl { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s2); min-height: 52px; margin: 0; padding: 6px 0; color: inherit; text-decoration: none; }
.pf th a.rl:hover { background: var(--doc-hover); text-decoration: none; }
.rlic { flex: none; width: 20px; display: grid; place-items: center; color: var(--doc-muted); }
.rlt { display: flex; flex-direction: column; min-width: 0; }
.rn { font-weight: 600; overflow-wrap: anywhere; }
.pf .small { font-size: var(--t-s); font-weight: 400; color: var(--doc-muted); overflow-wrap: anywhere; }
.pf tr.rc.ret th .rl { padding-left: var(--s5); }
.pf tr.rc.off .rn, .pf tr.rc.off td, .pf tr.rc.off .small { text-decoration: line-through; color: var(--doc-muted); }
.pf tr.rc.mark th::before { content: ""; position: absolute; left: calc(-1 * var(--s4)); top: 0; bottom: 0; width: 6px; background: var(--mark); }
.pf tr.rc .tip-btn { color: var(--doc-muted); }
.pf tr.rcl td, .pf tr.rcw td, .pf tr.rca td { position: relative; padding: 0; text-align: left; white-space: normal; border-bottom: 1px solid var(--doc-line); }
.pf tr.rcw td { padding: var(--s1) 0; }
.pf tr.rcw .warn { margin: var(--s1) 0; }
.pf tr.rcl .row { border-bottom: 0; }
.pf tr.rca .row { border-bottom: 0; }

/* the approve button carries the total */
.btn.approve { justify-content: space-between; gap: var(--s3); }
.btn.approve .amt { font-variant-numeric: tabular-nums; }
.dock .btn.big { text-decoration: none; }

/* Payments statements (white paper) and the Jobs and customers list */
.bucket { margin-top: var(--s3); }
.bk-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: var(--s1) 0; border-bottom: 1.5px solid var(--doc-ink); font-size: var(--t-s); font-weight: 600; color: var(--doc-muted); }
.bk-head b { color: var(--doc-ink); font-size: var(--t-m); }
.bucket .row { border-bottom: 1px solid var(--doc-line); }
.paper > .row { border-top: 1px solid var(--doc-line); margin-top: var(--s2); }
.jobrow .row-main { padding-left: calc(var(--s5) + var(--s5)); }

/* ---- misc ------------------------------------------------------------------------------- */
.notice { position: relative; background: var(--glass-list); border: 1px solid var(--edge); border-radius: var(--r1); padding: var(--s3) var(--s4) var(--s3) var(--s5); margin-bottom: var(--s3); font-weight: 600; box-shadow: var(--hi); }
.notice.notice-success::before, .notice.notice-info::before { background: var(--ctl); box-shadow: none; }  /* only a mark is yellow; a plain message is not */
.notice.notice-error::before { background: var(--bad); box-shadow: none; }
.card .notice { color: var(--doc-ink); background: #F4F6F9; border-color: var(--doc-line); box-shadow: none; }
.errorlist { list-style: none; padding: 0; margin: 0 0 var(--s3); color: var(--bad); }
.emptyline { min-height: 1px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}