/* Danti platform styles.

   The idea: the drawing board and the paper. Danti's own chrome (the sidebar and the sign-in page)
   is the black drafting board from danti.uk, drawn in thin green lines. Each customer's work sits on
   white paper in the middle, accented in their own brand colour. The one flourish is the current
   page in the sidebar, outlined with corner marks like the registration marks on a drawing. Tools
   that don't exist yet are drawn dashed, the way a drawing shows something planned.

   Customer colours (--brand, --on-brand, --brand-ink, --brand-hover, --brand-tint, --brand-tint-2,
   --brand-line, --brand-rgb) are worked out per client in app/core/brand.py and served from
   /brand.css, which loads after this file. The values here are only fallbacks. */

/* ---------- fonts (OFL licences alongside in /static/fonts) ---------- */
@font-face { font-family: "Geist"; src: url("/static/fonts/geist-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/static/fonts/geist-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/static/fonts/geist-semibold.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/static/fonts/geist-mono-regular.woff") format("woff"); font-weight: 400; font-display: swap; }
/* only the "Danti" wordmark uses the serif, as on danti.uk */
@font-face { font-family: "Newsreader Display"; src: url("/static/fonts/newsreader-72pt-regular.woff") format("woff"); font-weight: 400; font-display: swap; }

:root {
  --brand: #2B7A4B; --on-brand: #FFFFFF; --brand-ink: #2B7A4B; --brand-hover: #246A41;
  --brand-tint: #EEF5EF; --brand-tint-2: #DCEBE0; --brand-line: #A6CDB2; --brand-rgb: 43, 122, 75;

  /* the drafting board: Danti's chrome */
  --board: #000000; --board-raise: #0A0C0A; --board-ink: #EEF2FA; --board-ink-2: #C9D1E2; --board-muted: #8C95A8;
  --board-hair: #1F2A22; --board-outline: #2F4536; --signal: #8BC79F; --signal-fill: #2B7A4B; --signal-wash: rgba(139, 199, 159, .08);

  /* the paper: the customer's work */
  --bg: #F4F6FA; --card: #FFFFFF; --sunk: #F8F9FB;
  --line: #E3E6EB; --line-strong: #CDD2DA;
  --text: #121620; --text-2: #3A404C; --muted: #5E6573; --faint: #8A919E;
  --ok: #17643D; --ok-bg: #E8F5EE; --err: #A3132B; --err-bg: #FDECEE; --err-line: #F2C2C9;
  --warn: #6B4E00; --warn-bg: #FFF4D6;
  --radius: 10px; --radius-sm: 7px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-lift: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px -12px rgba(16, 24, 40, .18);
  --ring: 0 0 0 3px rgba(var(--brand-rgb), .28);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --side: 256px;
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --logo: "Newsreader Display", "Iowan Old Style", Georgia, serif;
  font-family: var(--sans);
}
* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
       font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: var(--brand-ink); text-underline-offset: 3px; }
h1 { font-size: 26px; line-height: 1.2; letter-spacing: -0.025em; font-weight: 600; margin: 0 0 4px; text-wrap: balance; }
.lede { color: var(--muted); margin: 0 0 22px; max-width: 64ch; }
.hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: none; box-shadow: var(--ring); }
::selection { background: rgba(var(--brand-rgb), .2); }
.num, .ref, table.data .num { font-variant-numeric: tabular-nums; }
.ref { font-family: var(--mono); font-size: .9em; letter-spacing: -.01em; white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 60; background: var(--card); color: var(--text); padding: 8px 14px; border-radius: var(--radius-sm); box-shadow: var(--shadow-lift); }
.skip:focus { left: 16px; }
.icon { width: 18px; height: 18px; flex: none; }

/* ---------- the Danti wordmark ---------- */
.wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--board-ink); text-decoration: none; }
.wordmark .mark { width: 26px; height: 26px; flex: none; }
.wordmark span { font-family: var(--logo); font-size: 23px; line-height: 1; letter-spacing: -0.01em; }
.wordmark.large .mark { width: 34px; height: 34px; }
.wordmark.large span { font-size: 30px; }

/* ---------- the shell: board on the left, paper in the middle ---------- */
.shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--side); z-index: 40; display: flex; flex-direction: column;
           background: var(--board); color: var(--board-ink-2); border-right: 1px solid var(--board-hair); overflow-y: auto; overscroll-behavior: contain; }
.paper { margin-left: var(--side); min-height: 100vh; }
.page { width: 100%; max-width: 1120px; margin: 0 auto; padding: 36px 40px 56px; }

.sidebar-top { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 18px; }
.workspace { display: flex; align-items: center; gap: 11px; margin: 0 14px; padding: 10px 12px; border: 1px solid var(--board-outline); border-radius: 8px; }
.org-badge { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 6px; background: var(--signal-fill); color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
.workspace-text { display: grid; min-width: 0; line-height: 1.3; }
.workspace-text strong { color: var(--board-ink); font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-text span { color: var(--board-muted); font-size: 12.5px; }
.demo-note { margin: 10px 14px 0; padding: 7px 12px; border: 1px dashed #6B5520; border-radius: 8px; color: #E8B04B; font-size: 12.5px; }

.nav-groups { padding: 14px 14px 8px; flex: 1; }
.nav-group + .nav-group { margin-top: 18px; }
.nav-heading { margin: 0 0 6px; padding: 0 10px; color: var(--board-muted); font-size: 12.5px; font-weight: 500; }
.nav-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav-link { position: relative; display: flex; align-items: center; gap: 11px; min-height: 38px; padding: 0 10px; border-radius: 6px;
            color: var(--board-ink-2); text-decoration: none; font-size: 14.5px; font-weight: 500; border: 1px solid transparent; transition: color .15s, background-color .15s; }
.nav-link .icon { color: var(--board-muted); transition: color .15s; }
.nav-link:hover { color: var(--board-ink); background: rgba(255, 255, 255, .04); }
.nav-link:hover .icon { color: var(--board-ink-2); }
.nav-link:focus-visible { box-shadow: 0 0 0 2px var(--signal); }
/* the current page: drawn in the bright line, with registration marks at two corners */
.nav-link.active { color: var(--board-ink); background: var(--signal-wash); border-color: var(--board-outline); }
.nav-link.active .icon { color: var(--signal); }
.nav-link.active::before, .nav-link.active::after { content: ""; position: absolute; width: 7px; height: 7px; border: 0 solid var(--signal); }
.nav-link.active::before { top: -1px; left: -1px; border-top-width: 1.5px; border-left-width: 1.5px; border-top-left-radius: 6px; }
.nav-link.active::after { bottom: -1px; right: -1px; border-bottom-width: 1.5px; border-right-width: 1.5px; border-bottom-right-radius: 6px; }

.sidebar-foot { padding: 10px 14px 16px; border-top: 1px solid var(--board-hair); display: grid; gap: 6px; }
.account { position: relative; }
.account summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; cursor: pointer; border: 1px solid transparent; }
.account summary::-webkit-details-marker { display: none; }
.account summary:hover, .account[open] summary { background: rgba(255, 255, 255, .04); border-color: var(--board-hair); }
.account summary:focus-visible { box-shadow: 0 0 0 2px var(--signal); }
.avatar { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--board-outline); color: var(--board-ink); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; }
.account-text { display: grid; min-width: 0; flex: 1; line-height: 1.3; }
.account-text strong { color: var(--board-ink); font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-text span { color: var(--board-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account .caret { width: 16px; height: 16px; color: var(--board-muted); }
.account-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); background: var(--board-raise); border: 1px solid var(--board-outline); border-radius: 8px; padding: 6px; box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .8); }
.account-menu a, .account-menu button { display: block; width: 100%; text-align: left; padding: 9px 10px; border-radius: 5px; color: var(--board-ink); text-decoration: none; background: none; border: 0; font: inherit; font-size: 14px; cursor: pointer; }
.account-menu a:hover, .account-menu button:hover { background: rgba(255, 255, 255, .06); }
.account-menu a:focus-visible, .account-menu button:focus-visible { box-shadow: 0 0 0 2px var(--signal); }
.account-menu form { margin: 0; }

.menu-btn { display: none; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--board-hair); border-radius: 8px; background: none; color: var(--board-ink); cursor: pointer; }
.menu-btn:focus-visible { box-shadow: 0 0 0 2px var(--signal); }
.mobilebar { display: none; }
.scrim { display: none; }

/* signed out, or choosing a first password: a slim board strip and the paper */
.plainbar { background: var(--board); padding: 14px 24px; border-bottom: 1px solid var(--board-hair); }
.paper.plain { margin-left: 0; min-height: calc(100vh - 56px); }
.paper.plain .page { max-width: 720px; padding-top: 48px; }

/* phones and small tablets: the sidebar slides in from the left */
@media (max-width: 900px) {
  .paper { margin-left: 0; }
  .page { padding: 22px 16px 40px; }
  .mobilebar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 8px 12px; min-height: 56px; background: var(--board); border-bottom: 1px solid var(--board-hair); }
  .mobilebar .wordmark span { font-size: 21px; }
  .mobilebar-org { margin-left: auto; color: var(--board-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45vw; }
  .menu-btn { display: grid; }
  .sidebar { width: min(300px, 86vw); transform: translateX(-100%); visibility: hidden; transition: transform .25s var(--ease), visibility 0s linear .25s; }
  .nav-open .sidebar { transform: none; visibility: visible; transition: transform .25s var(--ease); }
  .nav-open .scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(5, 8, 15, .55); }
  .nav-link { min-height: 44px; }
  /* without JavaScript the menu button can't work, so the sidebar just sits above the page */
  .no-js .sidebar { position: static; width: auto; transform: none; visibility: visible; border-right: 0; border-bottom: 1px solid var(--board-hair); }
  .no-js .menu-btn { display: none; }
}
html.nav-open { overflow: hidden; }

/* ---------- layout ---------- */
.page-head { display: flex; align-items: flex-end; gap: 12px 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head > div:first-child { flex: 1 1 420px; min-width: 0; }
.page-head .lede { margin-bottom: 0; }
.page-head .spacer { display: none; }
.head-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.crumb { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 13px; font-weight: 500; color: var(--muted); text-decoration: none; }
.crumb::before { content: "←"; }
.crumb:hover { color: var(--text); }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
@media (max-width: 1000px) { .two-col { grid-template-columns: 1fr; } .sticky { position: static !important; } }
.sticky { position: sticky; top: 32px; }
@media (max-width: 900px) { .sticky { top: 72px; } }
.narrow { max-width: 580px; }
.narrow-wide { max-width: 840px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 20px; overflow: hidden; box-shadow: var(--shadow); }
.card > h2 { margin: 0; padding: 15px 20px; font-size: 14px; font-weight: 650; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; letter-spacing: -0.005em; }
.card > h2 .n { width: 22px; height: 22px; border-radius: 50%; background: var(--brand-tint-2); color: var(--brand-ink); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.card .body { padding: 20px; }
@media (max-width: 600px) { .card .body { padding: 16px; } .card > h2 { padding: 14px 16px; } }

/* ---------- forms ---------- */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid .full { grid-column: 1 / -1; }
.grid.tight { gap: 14px; }
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }
label, .label { display: block; font-size: 13px; font-weight: 550; color: var(--text-2); margin-bottom: 6px; }
input, select, textarea { width: 100%; font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
                          background: var(--card); color: var(--text); transition: border-color .15s, box-shadow .15s; }
input:hover, select:hover, textarea:hover { border-color: #B5BCC7; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand-ink); box-shadow: var(--ring); }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:disabled { background: var(--sunk); color: var(--muted); }
select { appearance: none; padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
         background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
/* 16px text in fields stops phones zooming in when you tap one */
@media (max-width: 860px) { input, select, textarea { font-size: 16px; } }
button:focus-visible, a:focus-visible { outline: none; box-shadow: var(--ring); }
.check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text); font-weight: 400; margin: 0; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--brand); }
.field-error { color: var(--err); font-size: 13px; margin-top: 5px; display: flex; gap: 6px; }
.field-error::before { content: "!"; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--err); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; margin-top: 1px; }
.hint { color: var(--muted); font-size: 13px; margin-top: 5px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 0 16px;
       font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color .15s, border-color .15s, box-shadow .15s, transform .1s; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--brand); color: var(--on-brand); box-shadow: 0 1px 2px rgba(16, 24, 40, .12), inset 0 1px 0 rgba(255, 255, 255, .12); }
.btn.primary:hover { background: var(--brand-hover); }
.btn.primary:disabled { opacity: .7; cursor: progress; }
.btn.ghost { background: var(--card); color: var(--text); border-color: var(--line-strong); box-shadow: var(--shadow); }
.btn.ghost:hover { background: var(--sunk); border-color: #B5BCC7; }
.btn.danger { background: var(--card); color: var(--err); border-color: var(--err-line); }
.btn.danger:hover { background: var(--err-bg); }
.btn.block { width: 100%; min-height: 48px; font-size: 15px; }
.btn.small { min-height: 32px; padding: 0 11px; font-size: 13px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; align-items: center; }

.alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-sm); margin-bottom: 18px; font-size: 14px; border: 1px solid transparent; }
.alert::before { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; margin-top: 1px; }
.alert.ok { background: var(--ok-bg); color: var(--ok); border-color: #BFE3CF; }
.alert.ok::before { content: "✓"; background: var(--ok); }
.alert.err { background: var(--err-bg); color: var(--err); border-color: var(--err-line); }
.alert.err::before { content: "!"; background: var(--err); }
.alert.warn { background: var(--warn-bg); color: var(--warn); border-color: #F3DE9A; }
.alert.warn::before { content: "!"; background: #B08500; }
@media (prefers-reduced-motion: no-preference) { .alert { animation: drop .3s var(--ease); } }
@keyframes drop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- while the AI is writing ---------- */
.busy-msg { align-self: center; }
.spin { display: inline-block; width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; opacity: .85; }
@keyframes spin { to { transform: rotate(360deg); } }
form[aria-busy="true"] .card { opacity: .62; pointer-events: none; transition: opacity .3s; }
form[aria-busy="true"] .summary { opacity: 1; }
.busy-msg:not(.hidden) { display: block; margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--brand-tint); color: var(--text-2); font-size: 13px; position: relative; overflow: hidden; }
.busy-msg:not(.hidden)::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 40%; background: var(--brand); animation: slide 1.6s var(--ease) infinite; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.muted { color: var(--muted); font-size: 13px; }
.center { text-align: center; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12px; letter-spacing: .02em; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--sunk); white-space: nowrap; }
table.data td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data tbody tr { transition: background-color .12s; }
table.data tbody tr:hover { background: #FAFBFC; }
table.data tr:last-child td { border-bottom: 0; }
table.data .num { text-align: right; white-space: nowrap; }
table.data tr.total td { font-weight: 700; background: var(--brand-tint); }
table.data tr.sub td { font-weight: 600; }
table.data tr.inactive td { color: var(--faint); }
table.data a.rowlink { font-weight: 600; text-decoration: none; color: var(--brand-ink); }
table.data a.rowlink:hover { text-decoration: underline; }
table.data .clip { max-width: 34ch; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* a whole table row that opens something: the link's ::after covers the row */
table.data tr.linked { position: relative; cursor: pointer; }
table.data tr.linked a.rowlink::after { content: ""; position: absolute; inset: 0; }
.badge { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--brand-tint-2); color: var(--brand-ink); white-space: nowrap; }
.badge.grey { background: #EEF0F3; color: var(--muted); }
.badge.demo { background: var(--warn-bg); color: var(--warn); }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.err { background: var(--err-bg); color: var(--err); }
.empty { padding: 44px 20px; text-align: center; color: var(--muted); }
.empty strong { display: block; color: var(--text); font-size: 15px; margin-bottom: 4px; }

/* On phones, tables marked .stack turn into one card per row, labelled from data-label. */
@media (max-width: 720px) {
  table.data.stack, table.data.stack tbody, table.data.stack tr, table.data.stack td { display: block; width: 100%; }
  table.data.stack thead { display: none; }
  table.data.stack tr { padding: 12px 16px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; }
  table.data.stack tr:last-child { border-bottom: 0; }
  table.data.stack td { padding: 0; border: 0; text-align: left; }
  table.data.stack td[data-label]:not(.lead):not(.end):not(.plain)::before { content: attr(data-label) " · "; color: var(--faint); font-size: 12px; }
  table.data.stack td.lead { grid-column: 1; grid-row: 1; font-size: 15px; font-weight: 550; }
  table.data.stack td.end { grid-column: 2; grid-row: 1; text-align: right; font-weight: 600; }
  table.data.stack td:not(.lead):not(.end) { grid-column: 1 / -1; color: var(--text-2); font-size: 13px; }
  table.data.stack td:empty, table.data.stack td.hide-sm { display: none; }
  table.data.stack .clip { max-width: none; display: inline; }
  table.data.stack td.plain::before { display: none; }
  table.data.stack td.plain { color: var(--text-2); }
}

.search { display: flex; gap: 8px; flex-wrap: wrap; }
.search input { width: 280px; }
.search input[type="search"] { padding-left: 34px; background-image: radial-gradient(circle at 50% 50%, transparent 4.2px, var(--faint) 4.6px, var(--faint) 5.6px, transparent 6px), linear-gradient(45deg, transparent 45%, var(--faint) 45%, var(--faint) 58%, transparent 58%);
                                background-size: 16px 16px, 6px 6px; background-position: 11px 50%, 21px calc(50% + 6px); background-repeat: no-repeat; }
@media (max-width: 700px) { .search { width: 100%; } .search select { flex: 1 1 100%; } .search input { flex: 1; width: auto; min-width: 0; } .head-actions { width: 100%; } .head-actions > .btn.primary { flex: 1; } }
.pager { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 12px; font-size: 13px; color: var(--muted); }
.page-head .search select { width: auto; }

/* ---------- detail ---------- */
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 10px 14px; font-size: 14px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .kv { grid-template-columns: 1fr; gap: 2px; } .kv dd { margin-bottom: 10px; } }
.prose p { margin: 0 0 10px; max-width: 72ch; }
.prose ul, .prose ol { margin: 0 0 10px; padding-left: 20px; }
.pre { white-space: pre-wrap; }
.section-title { font-size: 15px; font-weight: 600; color: var(--brand-ink); margin: 22px 0 6px; }
.section-title:first-child { margin-top: 0; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--muted); font-size: 14px; margin: 4px 0 0; }
.meta .dot::before { content: "·"; margin-right: 10px; color: var(--faint); }
/* the generated text, shown like a page of the document */
.sheet { border-top: 3px solid var(--brand); }
.sheet .body { padding: clamp(18px, 3vw, 32px); }

/* ---------- sign in: the board, with one sheet on it ---------- */
body.board { background: var(--board); color: var(--board-ink-2); }
.auth { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 20px; padding: 40px 16px; }
.auth-card { position: relative; width: min(400px, calc(100vw - 32px)); padding: 30px 28px 26px; border: 1px solid var(--board-outline); border-radius: 10px; background: var(--board); }
.auth-card::before, .auth-card::after { content: ""; position: absolute; width: 12px; height: 12px; border: 0 solid var(--signal); }
.auth-card::before { top: -1px; left: -1px; border-top-width: 1.5px; border-left-width: 1.5px; border-top-left-radius: 10px; }
.auth-card::after { bottom: -1px; right: -1px; border-bottom-width: 1.5px; border-right-width: 1.5px; border-bottom-right-radius: 10px; }
.auth-card .wordmark { margin-bottom: 26px; }
.auth-card h1 { color: var(--board-ink); font-size: 20px; font-weight: 500; letter-spacing: -0.015em; margin-bottom: 18px; }
.auth-card .stack > * + * { margin-top: 16px; }
.auth-card label { color: var(--board-ink-2); font-weight: 500; }
.auth-card input { font-size: 16px; min-height: 46px; background: var(--board-raise); border-color: var(--board-outline); color: var(--board-ink); }
.auth-card input:hover { border-color: #3D5A46; }
.auth-card input:focus { border-color: var(--signal); box-shadow: 0 0 0 3px rgba(139, 199, 159, .25); }
.auth-card .alert.err { background: rgba(255, 138, 138, .08); color: #FFB3B3; border-color: rgba(255, 138, 138, .35); }
.auth-card .alert.ok { background: rgba(126, 224, 168, .08); color: #A6EBC4; border-color: rgba(126, 224, 168, .35); }
.auth-help { margin: 18px 0 0; color: var(--board-muted); font-size: 13px; }
.auth-foot { margin: 0; color: var(--board-muted); font-size: 13px; }
.auth-foot a { color: var(--board-ink); text-decoration-color: var(--signal); }
.btn.signal { background: var(--signal-fill); color: #fff; }
.btn.signal:hover { background: #246A41; }
.btn.signal:focus-visible { box-shadow: 0 0 0 3px rgba(139, 199, 159, .4); }
.secret { font-family: var(--mono); font-size: 22px; letter-spacing: .05em; padding: 16px; background: var(--brand-tint); border: 1px dashed var(--brand-line); border-radius: var(--radius-sm); text-align: center; user-select: all; }
.two-col > .card { margin-bottom: 20px; }

/* ---------- home ---------- */
.block { margin-bottom: 32px; }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.block-head a { font-size: 14px; font-weight: 500; }
.block-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 12px; }
.tools { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tool { display: flex; align-items: center; gap: 16px 24px; padding: 16px 18px; border-radius: var(--radius); }
.tool-text { flex: 1; min-width: 0; }
.tool h3 { margin: 0; font-size: 15px; font-weight: 600; }
.tool p { margin: 2px 0 0; color: var(--muted); font-size: 14px; max-width: 62ch; }
.tool-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tool.live { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
/* planned tools are drawn dashed, as a drawing shows what isn't built yet */
@media (max-width: 640px) { .tool { flex-direction: column; align-items: flex-start; } }
/* tools that aren't built yet are drawn dashed, as a drawing shows what's planned */
.planned { margin-top: 10px; padding: 14px 18px 6px; border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.planned h3 { margin: 0 0 4px; font-size: 13.5px; font-weight: 500; color: var(--muted); }
.planned ul { list-style: none; margin: 0; padding: 0; }
.planned li { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 2px 16px; padding: 9px 0; border-top: 1px dashed var(--line); font-size: 14px; }
.planned li:first-child { border-top: 0; }
.planned strong { font-weight: 500; color: var(--text-2); }
.planned span { color: var(--muted); }
@media (max-width: 640px) { .planned li { grid-template-columns: 1fr; } }
table.data a.plainlink { color: var(--text); font-weight: 600; }

.checklist { list-style: none; margin: 0; display: grid; gap: 14px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; font-weight: 500; }
.checklist .tick { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border: 1.5px solid var(--line-strong); border-radius: 50%; margin-top: 1px; }
.checklist .tick .icon { width: 14px; height: 14px; }
.checklist li.done { color: var(--muted); font-weight: 400; }
.checklist li.done .tick { background: var(--ok); border-color: var(--ok); color: #fff; }
.checklist .hint { margin-top: 2px; font-weight: 400; }

/* ---------- document forms ---------- */
.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; max-width: 960px; }
.choice { position: relative; display: grid; gap: 6px; padding: 22px 22px 20px; text-decoration: none; color: var(--text); margin: 0; transition: border-color .15s, box-shadow .2s, transform .2s var(--ease); }
.choice::after { content: "→"; position: absolute; right: 20px; top: 21px; color: var(--faint); transition: transform .2s var(--ease), color .15s; }
.choice:hover { border-color: var(--brand-line); box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.choice:hover::after { color: var(--brand-ink); transform: translateX(3px); }
.choice-name { font-weight: 650; font-size: 16px; color: var(--text); padding-right: 24px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-check { display: inline-flex; margin: 0; cursor: pointer; }
.chip-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-check span { border: 1px solid var(--line-strong); background: var(--card); border-radius: 99px; padding: 7px 13px; font-size: 14px; color: var(--text); font-weight: 450; transition: background-color .12s, border-color .12s; }
.chip-check span:hover { border-color: #B5BCC7; }
.chip-check input:checked + span { background: var(--brand-tint-2); border-color: var(--brand-ink); color: var(--text); }
.chip-check input:checked + span::before { content: "✓ "; color: var(--brand-ink); font-weight: 700; }
.chip-check input:focus-visible + span { box-shadow: var(--ring); }
.cat { border-top: 1px solid var(--line); }
.cat:first-of-type { border-top: 0; }
.cat h3 { margin: 0; padding: 10px 20px; font-size: 13px; font-weight: 600; color: var(--text-2); background: var(--sunk); border-bottom: 1px solid var(--line); }
.prod { display: grid; grid-template-columns: minmax(0, 1fr) auto 84px; gap: 16px; align-items: center; padding: 13px 20px; border-top: 1px solid var(--line); transition: background-color .12s, box-shadow .12s; }
.cat h3 + .prod { border-top: 0; }
.prod:hover { background: #FAFBFC; }
.prod.active { background: var(--brand-tint); box-shadow: inset 3px 0 0 var(--brand); }
.prod .name { font-weight: 550; }
.prod .desc { font-size: 13px; color: var(--muted); margin-top: 2px; }
.prod .price { font-variant-numeric: tabular-nums; color: var(--text-2); font-size: 14px; white-space: nowrap; }
.prod .qty { text-align: center; padding: 8px 6px; font-variant-numeric: tabular-nums; }
.prod.active .qty { border-color: var(--brand-ink); font-weight: 650; }
@media (max-width: 600px) { .prod { grid-template-columns: minmax(0, 1fr) 76px; padding: 12px 16px; gap: 4px 12px; } .prod .price { grid-column: 1; grid-row: 2; font-size: 13px; } .prod .qty { grid-row: 1 / span 2; } }
.summary .row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-variant-numeric: tabular-nums; color: var(--text-2); }
.summary .row.total { font-weight: 700; font-size: 18px; color: var(--text); border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px; letter-spacing: -0.01em; }
.summary ul { list-style: none; padding: 0; margin: 0 0 12px; max-height: 320px; overflow: auto; }
.summary li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 4px 0; color: var(--text-2); }
.summary li span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.summary .muted { margin-top: 12px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.card .table-wrap + .table-wrap { border-top: 1px solid var(--line); margin-top: 14px; }

/* the running total stays in view on phones, where the summary is far below the items */
.mobile-bar { display: none; }
@media (max-width: 1000px) {
  .mobile-bar { position: sticky; bottom: 0; z-index: 15; display: flex; align-items: center; gap: 14px; margin: 8px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
                background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -16px rgba(16, 24, 40, .25); }
  .mobile-bar .mb-total { flex: 1; display: grid; line-height: 1.2; }
  .mobile-bar .mb-total span { font-size: 12px; color: var(--muted); }
  .mobile-bar .mb-total strong { font-size: 18px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
  .summary .actions { display: none; }
}

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

/* ---------- settings pages (stage 2) ---------- */
input.short { width: 7em; display: inline-block; }
fieldset.full > .check + .check { margin-top: 8px; }
fieldset.full > div + div { margin-top: 10px; }
.colour-row { display: flex; gap: 10px; align-items: center; }
.colour-row input[type="color"] { width: 52px; height: 42px; padding: 3px; flex: none; }
.logo-preview { max-height: 64px; max-width: 220px; display: block; margin: 6px 0 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px; background: #fff; }

/* ---------- two-factor and /platform (stage 3) ---------- */
.two-factor-qr { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.two-factor-qr img { border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.two-factor-qr > div { flex: 1 1 220px; }
.secret.small { font-size: 15px; padding: 10px; word-break: break-all; }
.recovery-codes { columns: 2; column-gap: 32px; margin: 0; padding-left: 22px; font-size: 16px; line-height: 2; }
.support-banner { position: sticky; top: 0; z-index: 25; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
                  padding: 10px 16px; background: #FFF4D6; color: #6B4E00; border-bottom: 1px solid #F3DE9A; font-size: 14px; }
.support-banner strong { font-weight: 650; }
.support-banner form { margin: 0 0 0 auto; }
@media (max-width: 900px) { .support-banner { top: 56px; } }
textarea.code { font-family: var(--mono); font-size: 13px; line-height: 1.5; min-height: 460px; tab-size: 4; white-space: pre; overflow-wrap: normal; overflow-x: auto; }
.problems { margin: 0; padding-left: 20px; color: var(--err); font-size: 13.5px; }
.problems li + li { margin-top: 4px; }
.check-status { font-size: 13px; color: var(--muted); }
.check-status.ok { color: var(--ok); }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.stat span { display: block; color: var(--muted); font-size: 12.5px; }
.stat strong { display: block; font-size: 20px; font-weight: 650; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; margin-top: 2px; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin: -6px 0 22px; }
.tabs a { padding: 9px 12px; color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 550; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--text); }
.tabs a.on { color: var(--text); border-bottom-color: var(--brand); }
.inline-form { display: inline; margin: 0; }
.status-pill { text-transform: capitalize; }
textarea.code.short-code { min-height: 200px; }