/* Curly, Daylight: indigo ink, Curly yellow, one colour per suite. Fraunces for titles and the numbers that matter,
   Figtree for everything people read and type. The tokens below are the design system's (docs/design/tokens.md):
   views use them and the shared classes, never colours, sizes or shadows of their own. */
:root {
  color-scheme: light;
  /* brand */
  --ink: #15173d; --sun: #ffce38; --sun-soft: #fff3c4; --sun-strong: #f5bc12;
  /* neutrals, leaning to the indigo */
  --canvas: #f6f6fb; --surface: #ffffff; --sunken: #eeeff6; --line: #e3e4ee; --line-strong: #cbcddd;
  --text: #15173d; --text-2: #3c3f63; --muted: #6b6e8f; --faint: #9093ae;
  /* suites: where you are */
  --suite-chat: #7b5cfa; --suite-chat-soft: #ece7ff; --suite-ops: #1ea7fd; --suite-ops-soft: #e1f3ff;
  --suite-crm: #f2558a; --suite-crm-soft: #ffe6ef; --suite-finance: #12a66b; --suite-finance-soft: #dff5ea;
  --suite-trade: #ff7a2e; --suite-trade-soft: #ffebdd; --suite-planning: #19b8b0; --suite-planning-soft: #ddf5f3;
  --suite-bridge: #8f9bff; --suite-bridge-soft: #e9ebff;
  /* status: what is happening, always with a word */
  --good: #0e7a4e; --good-soft: #e1f4ea; --warn: #9a5a00; --warn-soft: #fff0d4; --bad: #c2263f; --bad-soft: #fde6ea;
  --info: #2350c8; --info-soft: #e6edff; --quiet: #4b4f70; --quiet-soft: #eeeff6;
  --focus: #5b4cf5;
  /* type */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-ui: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --display-axes: 'SOFT' 100, 'WONK' 0;
  /* space, radius, elevation, motion */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-14: 56px;
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;
  --e-1: 0 1px 2px rgba(21, 23, 61, .06), 0 1px 1px rgba(21, 23, 61, .04);
  --e-2: 0 6px 20px rgba(21, 23, 61, .10);
  --e-3: 0 16px 40px rgba(21, 23, 61, .18);
  --m-fast: 120ms; --m-base: 200ms; --m-slow: 320ms; --ease: cubic-bezier(.2, .7, .2, 1);
  --side: 248px;
  /* older names, kept so every module view reads the new palette until it is redesigned */
  --bg: var(--canvas); --line-strong-old: var(--line-strong); --accent: var(--sun); --accent-soft: var(--sun-soft); --accent-line: var(--sun-strong);
  --blue: var(--info); --red: var(--bad); --red-soft: var(--bad-soft); --green: var(--good); --green-soft: var(--good-soft); --orange: var(--warn);
  --radius: var(--r-md); --shadow: none;
}
* { box-sizing: border-box; }
/* An element a view hides stays hidden, whatever display its class gives it. */
[hidden] { display: none !important; }
html { font: 14px/1.5 var(--font-ui); color: var(--text); background: var(--canvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { margin: 0; background: var(--canvas); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, h4, p { margin-top: 0; }
h1 { font-family: var(--font-display); font-variation-settings: var(--display-axes); font-weight: 700; font-size: 30px; line-height: 36px; letter-spacing: -.02em; margin-bottom: 4px; text-wrap: balance; }
h2 { font-family: var(--font-display); font-variation-settings: var(--display-axes); font-weight: 650; font-size: 20px; line-height: 26px; letter-spacing: -.01em; margin-bottom: 8px; text-wrap: balance; }
h3 { font-size: 15px; line-height: 22px; font-weight: 700; margin-bottom: 4px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--sun-soft); }
.muted { color: var(--muted); }
.tiny { font-size: 12px; line-height: 16px; }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.row { display: flex; align-items: center; gap: var(--s-2) var(--s-3); flex-wrap: wrap; }
.between { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.grow { flex: 1; min-width: 0; }
.stack { display: grid; gap: var(--s-4); }
/* A grid item's minimum is its content's, so one wide select or line would push a stack past its column (Stock's items, beside On hand). */
.stack > * { min-width: 0; }
.spaced { margin-top: var(--s-3); } .after { margin-top: var(--s-6); }
.skip { position: fixed; top: -100px; left: 20px; z-index: 100; } .skip:focus { top: 10px; background: var(--surface); padding: var(--s-3); border-radius: var(--r-sm); }
mark { background: var(--sun-soft); color: inherit; border-radius: 3px; padding: 0 1px; }
code, .mono { font-family: var(--font-mono); font-size: .9em; }
.wordmark { display: block; height: auto; }
.figure { font-family: var(--font-display); font-variation-settings: var(--display-axes); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.num { font-variant-numeric: tabular-nums; }

/* ---- buttons: yellow is the one thing to press; white for the rest; indigo when it must stand firm ---- */
button, a.button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); border-radius: var(--r-sm); padding: 7px 14px; min-height: 36px; font-size: 14px; font-weight: 600; line-height: 20px; text-decoration: none; white-space: nowrap; transition: background var(--m-fast) var(--ease), border-color var(--m-fast) var(--ease), box-shadow var(--m-fast) var(--ease); }
button:hover, a.button:hover { background: var(--sunken); }
button:active { transform: translateY(1px); }
button:disabled { cursor: not-allowed; opacity: .5; transform: none; }
button.primary, a.button.primary, button.accent, button.yellow { background: var(--sun); border-color: var(--sun); color: var(--ink); }
button.primary:hover, a.button.primary:hover, button.accent:hover, button.yellow:hover { background: var(--sun-strong); border-color: var(--sun-strong); }
button.strong, a.button.strong { background: var(--ink); border-color: var(--ink); color: #fff; } button.strong:hover, a.button.strong:hover { background: #262a5e; }
button.ghost, a.button.ghost { border-color: transparent; background: transparent; } button.ghost:hover, a.button.ghost:hover { background: var(--sunken); }
button.danger { color: var(--bad); } button.danger:hover { background: var(--bad-soft); border-color: var(--bad-soft); }
button.small, a.button.small { padding: 4px 10px; min-height: 30px; font-size: 13px; line-height: 18px; }
button.large, a.button.large { padding: 10px 20px; min-height: 44px; font-size: 15px; }
button.selected { background: var(--sunken); }

/* ---- inputs ---- */
input, select, textarea { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 7px 11px; min-height: 36px; max-width: 100%; font-size: 14px; transition: border-color var(--m-fast) var(--ease), box-shadow var(--m-fast) var(--ease); }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:hover, select:hover, textarea:hover { border-color: #b4b7cc; }
input:focus, select:focus, textarea:focus { border-color: var(--focus); outline: none; }
/* Fields take the same 2 px ring as every other control (tokens.md, Focus), 1 px out so it sits close to the border (#604). */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline-offset: 2px; }
select { appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236b6e8f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; }
input[type=checkbox], input[type=radio] { min-height: 0; width: 16px; height: 16px; margin: 0; accent-color: var(--ink); padding: 0; }
input[type=file] { padding: 5px; }
input[type=file]::file-selector-button { font: inherit; font-weight: 600; font-size: 13px; border: 1px solid var(--line-strong); background: var(--sunken); border-radius: var(--r-xs); padding: 4px 10px; margin-right: 10px; cursor: pointer; }
textarea { resize: vertical; }

/* ---- the frame of a company: an indigo sidebar of suites, a top bar, the work ---- */
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--side); padding: 18px 12px 14px; display: flex; flex-direction: column; background: var(--ink); color: #fff; z-index: 20; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.sidebar .wordmark { width: 76px; margin: 2px 0 18px 10px; }
.company { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: var(--r-md); margin-bottom: 14px; font-size: 13px; background: rgba(255, 255, 255, .07); }
.company small { display: block; font-size: 11.5px; color: #b9bbd6; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.company-copy { min-width: 0; } .company-copy b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.company-mark { flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; background: var(--sun); color: var(--ink); border-radius: var(--r-sm); font-weight: 800; font-size: 14px; text-transform: uppercase; }
.nav { display: grid; gap: 1px; }
.nav-label { display: flex; align-items: center; gap: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: #9a9dc4; font-weight: 700; padding: 14px 10px 4px; }
.nav-label .swatch { width: 8px; height: 8px; border-radius: 2px; background: var(--suite, #9a9dc4); }
.nav a { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: var(--r-sm); text-decoration: none; font-weight: 500; font-size: 14px; color: #d9daec; transition: background var(--m-fast) var(--ease), color var(--m-fast) var(--ease); }
.nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav a.selected { background: rgba(255, 255, 255, .13); color: #fff; font-weight: 700; }
.nav a.selected::before { content: ''; position: absolute; left: -12px; top: 7px; bottom: 7px; width: 4px; border-radius: 0 4px 4px 0; background: var(--sun); }
.nav-icon { width: 18px; flex-shrink: 0; display: grid; place-items: center; }
.nav-icon i { width: 10px; height: 10px; border-radius: 3px; background: var(--suite, var(--sun)); }
.nav-icon svg { width: 16px; height: 16px; }
.nav .count { margin-left: auto; font-size: 11px; line-height: 18px; min-width: 20px; text-align: center; background: var(--sun); color: var(--ink); border-radius: var(--r-pill); padding: 0 6px; font-weight: 800; }
.side-bottom { margin-top: auto; padding-top: 16px; display: grid; gap: 4px; }
.identity { border-top: 1px solid rgba(255, 255, 255, .12); padding: 12px 6px 2px; margin-top: 6px; display: flex; gap: 10px; align-items: center; font-size: 13px; text-decoration: none; color: #fff; }
.identity small { display: block; color: #b9bbd6; margin-top: 1px; font-size: 11.5px; }
.avatar { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; background: var(--sun); color: var(--ink); }
.avatar.small { width: 24px; height: 24px; font-size: 9px; }
.online { font-size: 12px; color: #b9bbd6; padding: 0 10px; }
.online::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #3ddc97; margin-right: 8px; vertical-align: 1px; }
.online.off::before { background: var(--sun); }
.side-link { display: block; padding: 6px 10px; font-size: 13px; color: #b9bbd6; text-decoration: none; border-radius: var(--r-sm); } .side-link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sidebar button.ghost { color: #d9daec; justify-content: flex-start; } .sidebar button.ghost:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.app-shell { margin-left: var(--side); min-height: 100vh; }
.topbar { height: 60px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s-8); gap: var(--s-4); position: sticky; top: 0; z-index: 10; }
.topbar-tools { justify-content: flex-end; }
.breadcrumb { font-size: 13px; color: var(--muted); white-space: nowrap; } .breadcrumb b { color: var(--text); font-weight: 700; }
.topbar input[type=search]:focus { border-color: var(--focus); }
.topbar input[type=search] { width: min(360px, 100%); background: var(--canvas); border-color: var(--line); padding-left: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='5' fill='none' stroke='%236b6e8f' stroke-width='1.6'/%3E%3Cpath d='M11 11l3.5 3.5' stroke='%236b6e8f' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 11px center; }
.topbar .row { flex-wrap: nowrap; }
.topbar-tools button { white-space: nowrap; }
.topbar-me, .menu-button { display: none; text-decoration: none; }
.menu-button svg { width: 20px; height: 20px; }
.scrim { display: none; }
main { padding: var(--s-8) var(--s-8) var(--s-14); max-width: 1344px; margin: auto; }
.notice { margin: 0 0 var(--s-4); padding: 10px 14px; border: 1px solid #f4c3cc; background: var(--bad-soft); color: #8a1c2e; border-radius: var(--r-md); font-size: 14px; }
.notice:empty { display: none; }
.notice.good { border-color: #bfe5d0; background: var(--good-soft); color: #0b5c3b; }
.welcome { margin-bottom: var(--s-6); }
.welcome p { margin-bottom: 0; color: var(--muted); }

/* ---- pages outside a company: the site header, then one column ---- */
.site { min-height: 100vh; display: flex; flex-direction: column; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 32px; background: var(--ink); color: #fff; }
.site-header .wordmark { width: 84px; }
.site-header nav { display: flex; align-items: center; gap: 6px; }
.site-header nav a:not(.button) { text-decoration: none; font-size: 14px; padding: 6px 10px; border-radius: var(--r-sm); color: #d9daec; font-weight: 600; }
.site-header nav a:not(.button):hover, .site-header nav a.selected { color: #fff; background: rgba(255, 255, 255, .1); }
.site-header button.ghost { color: #d9daec; } .site-header button.ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.site main { width: 100%; max-width: 880px; padding-top: 48px; }
.site main.narrow { max-width: 460px; }
.site main.wide { max-width: 1200px; }
.site-footer { margin-top: auto; padding: 22px 32px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); display: flex; gap: 18px; flex-wrap: wrap; }
.site-footer a { color: var(--muted); }

/* ---- forms ---- */
.form { display: grid; gap: var(--s-4); }
.form .row { align-items: flex-end; } .form .row > * { flex: 1 1 140px; } .form .row > button { flex: 0 0 auto; }
.row > input[type=password] { flex: 1 1 280px; }
.field { display: grid; gap: 6px; align-content: start; font-size: 13px; font-weight: 600; color: var(--text-2); }
.field input, .field select, .field textarea { font-weight: 400; width: 100%; color: var(--text); }
.field .hint { font-weight: 400; color: var(--muted); font-size: 12px; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; } .check input { margin-top: 2px; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.code-input { font-family: var(--font-mono); letter-spacing: 1.5px; text-transform: uppercase; }
.secret { display: block; font-family: var(--font-mono); font-size: 16px; letter-spacing: 1.5px; padding: 12px 14px; background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r-sm); user-select: all; overflow-wrap: anywhere; }
.message-box { width: 100%; min-height: 120px; font-size: 13px; }

/* ---- panels and lists ---- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-5) var(--s-6); }
.panel > h2:first-child { margin-bottom: var(--s-3); }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: var(--s-3); flex-wrap: wrap; } .panel-head h2 { margin: 0; }
.columns { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.empty { padding: var(--s-8) var(--s-6); text-align: center; color: var(--muted); font-size: 14px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: var(--surface); }
.empty b { display: block; color: var(--text); margin-bottom: 4px; font-family: var(--font-display); font-variation-settings: var(--display-axes); font-weight: 650; font-size: 18px; }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.list a, .list .item { display: block; width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: inherit; text-decoration: none; font-size: 14px; transition: border-color var(--m-fast) var(--ease), background var(--m-fast) var(--ease); }
.list a:hover { border-color: var(--line-strong); background: #fbfbfe; }
.list a.selected { background: var(--sun-soft); border-color: var(--sun); }
.list a.quiet { color: var(--muted); }
/* A link inside a list item that is not itself a link (Stock's Needs attention) reads as a link, not as a box in a box. */
.list .item a { display: inline; width: auto; padding: 0; border: 0; border-radius: 0; background: none; font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.list .item a:hover { background: none; text-decoration-color: currentColor; }
/* A part of a page that a button scrolls to (Stock's Move stock) lands below the sticky top bar, not under it. */
.anchor, .app-shell > main { scroll-margin-top: calc(60px + var(--s-4)); }
.snippet { display: block; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.badge { float: right; min-width: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--bad); color: #fff; font-size: 11px; font-weight: 800; text-align: center; line-height: 19px; }
.people { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.people > li { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 12px 2px; border-bottom: 1px solid var(--line); font-size: 14px; }
.people > li:last-child { border-bottom: 0; }
.people label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
/* People: who, then what they use in a line; what each module lets them do opens under Access, a set per module. */
.person-who { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; flex: 1 1 320px; min-width: 0; }
.person-who .muted { flex-basis: 100%; font-size: 13px; }
.person-tools { display: flex; gap: var(--s-2); margin-left: auto; }
.people details.access { flex-basis: 100%; }
.people details.access > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.people details.access > summary::-webkit-details-marker { display: none; }
.people details.access > summary::before { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--m-fast) var(--ease); }
.people details.access[open] > summary::before { transform: rotate(45deg); }
.form.invite { margin-top: var(--s-4); }
.access-sets { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-4); padding: var(--s-2) 0 var(--s-1); }
.access-set { margin: 0; padding: 0; border: 0; display: grid; gap: var(--s-2); align-content: start; min-width: 0; }
.access-set legend { padding: 0 0 var(--s-1); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.access-set label { align-items: flex-start; line-height: 18px; }
.access-set input[type=checkbox] { flex: none; margin-top: 1px; }
.invite-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: var(--s-3); align-items: end; }
@media (max-width: 620px) { .invite-row { grid-template-columns: 1fr; } .invite-row > button { justify-self: start; } }
/* status pills: a word and a colour, never colour alone */
.chip, .pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; font-size: 12px; line-height: 18px; border-radius: var(--r-pill); white-space: nowrap; background: var(--quiet-soft); color: var(--quiet); font-weight: 700; border: 0; }
.chip.accent, .pill.warn { background: var(--warn-soft); color: var(--warn); }
.chip.success, .pill.good { background: var(--good-soft); color: var(--good); }
.chip.bad, .pill.bad { background: var(--bad-soft); color: var(--bad); }
.chip.info, .pill.info { background: var(--info-soft); color: var(--info); }
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
a.card { display: inline-block; padding: 1px 8px; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--sunken); color: inherit; text-decoration: none; font-size: 13px; }
a.card:hover { border-color: var(--line-strong); }
/* tables: quiet, scannable, numbers right-aligned in tabular figures */
table.ledger, table.data, table.levels { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 14px; }
table.ledger th, table.data th, table.levels th { text-align: left; color: var(--muted); font-weight: 700; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; background: var(--surface); }
table.ledger td, table.data td, table.levels td { padding: 11px 12px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; vertical-align: top; }
table.data tbody tr:last-child td, table.ledger tbody tr:last-child td, table.levels tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr, table.ledger tbody tr { transition: background var(--m-fast) var(--ease); }
table.data tbody tr:hover, table.ledger tbody tr:hover { background: #fafaff; }
table.data td a, table.ledger td a { font-weight: 600; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line-strong); }
table.data td a:hover, table.ledger td a:hover { border-bottom-color: var(--ink); }
table.data td.wrap { min-width: 220px; max-width: 360px; overflow-wrap: anywhere; }
.table-scroll { overflow: auto; }
.panel > .table-scroll { margin: 0 calc(-1 * var(--s-6)); padding: 0 var(--s-6); }
.section-head { margin: 4px 0 var(--s-4); display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
.section-head p { color: var(--muted); font-size: 14px; margin: 2px 0 0; }
.found { margin-bottom: var(--s-5); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; font-size: 14px; }
.facts dt { color: var(--muted); } .facts dd { margin: 0; overflow-wrap: anywhere; }
.facts-note { color: var(--muted); font-size: 12px; margin: 12px 0 0; }

/* ---- shared page patterns (ui.js): the page head, tabs, summary figures, queue groups, the record head ---- */
.page { display: grid; gap: var(--s-5); min-width: 0; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-4); flex-wrap: wrap; }
.page-head .eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.page-head .eyebrow i { width: 9px; height: 9px; border-radius: 3px; background: var(--suite, var(--sun)); }
.page-head h1 { margin: 0; }
.page-head p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.page-head .actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.tabs { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs button { border: 0; background: transparent; border-radius: 0; padding: 10px 12px 12px; min-height: 0; color: var(--muted); font-weight: 600; position: relative; }
.tabs button:hover { background: transparent; color: var(--text); }
.tabs button[aria-current=page] { color: var(--ink); }
.tabs button[aria-current=page]::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--ink); }
.tabs .count { margin-left: 6px; font-size: 11px; line-height: 18px; min-width: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--sun); color: var(--ink); font-weight: 800; }
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s-3); }
.figure-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; display: grid; gap: 2px; text-decoration: none; color: inherit; transition: border-color var(--m-fast) var(--ease), box-shadow var(--m-fast) var(--ease); }
a.figure-card:hover { border-color: var(--line-strong); box-shadow: var(--e-1); }
.figure-card .k { font-size: 13px; font-weight: 600; color: var(--text-2); }
.figure-card .v { font-family: var(--font-display); font-variation-settings: var(--display-axes); font-weight: 700; font-size: 28px; line-height: 34px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.figure-card .s { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
button.figure-card { display: grid; justify-items: start; justify-content: stretch; align-content: start; text-align: left; white-space: normal; min-height: 0; font-weight: inherit; line-height: inherit; }
button.figure-card:hover { background: var(--surface); border-color: var(--line-strong); box-shadow: var(--e-1); }
/* what needs someone now: a yellow bar along the top, so several can say so without the row turning yellow */
.figure-card.hot { box-shadow: inset 0 4px 0 var(--sun); }
.figure-card.hot .k { color: var(--ink); font-weight: 700; }
.figure-card:not(.hot) .v { color: var(--text-2); }
/* Home's Needs you: what asks nothing folds into one quiet line under the figures (#648) */
.needs { display: grid; gap: var(--s-3); }
.needs-clear { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-3); padding: var(--s-2) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); font-size: 13px; line-height: 24px; }
.needs-clear .k { font-weight: 700; color: var(--text-2); }
.needs-clear ul { display: flex; flex-wrap: wrap; gap: 0 var(--s-4); margin: 0; padding: 0; list-style: none; }
.needs-clear li { color: var(--muted); }
.needs-clear a, .needs-clear button { display: inline; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; font: inherit; font-weight: 600; color: var(--text); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; white-space: normal; }
.needs-clear a:hover, .needs-clear button:hover { background: none; text-decoration-color: currentColor; }
.needs-clear .s { font-variant-numeric: tabular-nums; }
/* a chart a page leads with (chart.js): headline figures that pick what the chart shows, then one plot in the suite colour */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.chart-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-5) var(--s-6) var(--s-4); display: grid; gap: var(--s-5); min-width: 0; }
.chart-filters { display: flex; gap: var(--s-2); flex-wrap: wrap; } .chart-filters select { width: 220px; max-width: 100%; }
.metrics { display: flex; gap: var(--s-2); flex-wrap: wrap; margin: -10px 0 0 -14px; }
.metric { display: grid; justify-items: start; align-content: start; gap: 2px; padding: 10px 14px; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; text-align: left; white-space: normal; min-height: 0; font-weight: inherit; line-height: inherit; color: inherit; }
button.metric { cursor: pointer; }
button.metric:hover { background: var(--sunken); }
.metric[aria-pressed=true] { background: var(--sunken); }
.metric[aria-pressed=true] .k::before { background: var(--suite, var(--ink)); }
.metric .k { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.metric .k::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--line-strong); }
.metric .v { font-family: var(--font-display); font-variation-settings: var(--display-axes); font-weight: 700; font-size: 32px; line-height: 38px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--text); }
.metric .s { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.delta { font-weight: 700; } .delta.up { color: var(--good); } .delta.down { color: var(--bad); }
.chart { margin: 0; min-width: 0; }
/* a title over one of several charts that share their weeks */
.chart-caption { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: var(--s-5) 0 var(--s-3); }
.chart-caption:first-child { margin-top: 0; }
.chart-body { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--s-3); }
.chart-y { position: relative; min-width: 3ch; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.chart-y span { position: absolute; right: 0; transform: translateY(-50%); white-space: nowrap; line-height: 1; }
.chart-y span.chart-y-size { position: static; display: block; height: 0; overflow: hidden; visibility: hidden; transform: none; }
.chart-plot { position: relative; outline-offset: 6px; border-radius: 2px; cursor: crosshair; touch-action: pan-y; }
.chart-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart-grid { stroke: var(--line); stroke-width: 1; } .chart-grid.zero { stroke: var(--line-strong); }
.chart-area { fill: var(--suite, var(--ink)); opacity: .1; }
.chart-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-line.s1 { stroke: var(--suite, var(--ink)); } .chart-line.s2 { stroke: var(--ink); } .chart-line.s3 { stroke: var(--faint); stroke-dasharray: 6 5; }
.chart-bar.s1 { fill: var(--suite, var(--ink)); } .chart-bar.s2 { fill: var(--ink); } .chart-bar.s3 { fill: var(--line-strong); }
.chart-cursor { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--line-strong); pointer-events: none; }
.chart-dot { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--surface); border: 2.5px solid var(--suite, var(--ink)); pointer-events: none; }
.chart-dot.s2 { border-color: var(--ink); } .chart-dot.s3 { border-color: var(--faint); }
.chart-tip { position: absolute; top: 0; z-index: 2; transform: translateX(12px); min-width: 180px; max-width: 240px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--e-2); font-size: 13px; display: grid; gap: 4px; pointer-events: none; }
.chart-tip.flip { transform: translateX(calc(-100% - 12px)); }
.chart-tip b { font-weight: 700; white-space: nowrap; }
.chart-tip-row { display: flex; align-items: center; gap: 8px; } .chart-tip-row .grow { color: var(--text-2); }
.chart-tip-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.chart-key { flex: none; width: 10px; height: 3px; border-radius: 2px; background: var(--suite, var(--ink)); }
.chart-key.s2 { background: var(--ink); } .chart-key.s3 { background: var(--faint); }
.chart-x { position: relative; height: 26px; font-size: 12px; color: var(--muted); }
.chart-x span { position: absolute; top: 9px; transform: translateX(-50%); white-space: nowrap; }
.chart-x span.start { transform: none; } .chart-x span.end { transform: translateX(-100%); }
.chart-legend { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-2); font-size: 13px; color: var(--text-2); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.group-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: 14px var(--s-5); flex-wrap: wrap; }
.group-head h2 { font-family: var(--font-ui); font-size: 15px; line-height: 22px; font-weight: 700; margin: 0; letter-spacing: 0; }
.group-head h2 .n { color: var(--muted); font-weight: 600; margin-left: 6px; }
.group-head p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.group .table-scroll { border-top: 1px solid var(--line); }
.group table.data th { background: #fafaff; }
.group table.data th:first-child, .group table.data td:first-child { padding-left: var(--s-5); }
.group table.data th:last-child, .group table.data td:last-child { padding-right: var(--s-5); }
.group .more { padding: 10px var(--s-5); font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); }
.group.done .group-head { padding-block: 12px; }
.ref { font-family: var(--font-mono); font-size: 13px; }
.sub { display: block; color: var(--muted); font-size: 12px; }
.record-head { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); display: grid; gap: var(--s-4); }
.record-head .top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4); flex-wrap: wrap; }
.record-head h1 { font-size: 26px; line-height: 32px; }
.record-head .amount { font-family: var(--font-display); font-variation-settings: var(--display-axes); font-weight: 700; font-size: 34px; line-height: 40px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.record-amount { text-align: right; display: grid; gap: 8px; justify-items: end; }
.record-head .meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); font-size: 14px; color: var(--text-2); }
.record-head .meta span b { display: block; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.next-step { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; background: var(--sun-soft); border-radius: var(--r-md); padding: 12px 16px; font-size: 14px; }
.next-step b { display: block; }
.next-step.quiet { background: var(--sunken); }
.record-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-5); align-items: start; }
.record-body > * { min-width: 0; }
.record-side { display: grid; gap: var(--s-4); }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.timeline li { position: relative; padding: 0 0 14px 20px; font-size: 13px; }
.timeline li::before { content: ''; position: absolute; left: 3px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.timeline li::after { content: ''; position: absolute; left: 6.5px; top: 18px; bottom: 0; width: 1px; background: var(--line); }
.timeline li:last-child::after { display: none; }
.timeline li:first-child::before { background: var(--ink); }
.timeline small { display: block; color: var(--muted); font-size: 12px; }
.skeleton { display: block; height: 14px; border-radius: var(--r-xs); background: linear-gradient(90deg, var(--sunken) 0%, #f6f6fb 50%, var(--sunken) 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.loading { display: grid; gap: var(--s-3); padding: var(--s-6) 0; max-width: 560px; }
.loading p { margin: 0; } .loading .skeleton:nth-child(3) { width: 82%; } .loading .skeleton:nth-child(4) { width: 64%; }

/* ---- the landing page ---- */
.hero { padding: 64px 0 40px; max-width: 720px; }
.hero h1 { font-size: 52px; line-height: 1.02; letter-spacing: -.025em; margin-bottom: 18px; }
.hero p { font-size: 18px; color: var(--text-2); margin-bottom: 28px; max-width: 600px; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 24px 0 56px; }
.steps article { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; }
.steps .step-number { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sun); color: var(--ink); font-weight: 800; font-size: 13px; margin-bottom: 12px; }
.steps p { color: var(--muted); font-size: 14px; margin: 0; }
.suites { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 56px; }
.suites.three { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.suite { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; border-top: 4px solid var(--suite, var(--line)); }
.suite p { color: var(--muted); font-size: 14px; margin: 0; }
.suite .suite-foot { margin-top: auto; padding-top: 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.suite .preview-line { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); margin-top: 8px; }
.suite.installed { box-shadow: var(--e-1); }
/* Modules: every suite card the same size and shape, its mark and name, its state, one line, its modules, one action (#589) */
/* Every row as tall as the tallest card, so cards stay one size and a module list is never cut (#631). */
.suites.catalog { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-auto-rows: 1fr; gap: var(--s-4); margin-bottom: var(--s-8); }
.catalog .suite { min-height: 292px; padding: var(--s-5); gap: var(--s-3); }
.catalog .suite.installed { box-shadow: none; }
.suite-top { display: flex; align-items: center; gap: var(--s-3); }
.suite-top h2 { flex: 1; margin: 0; }
.suite-mark { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-md); background: var(--suite, var(--sun)); color: var(--ink); }
.suite-mark svg { width: 22px; height: 22px; }
.catalog .suite-what { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: none; min-height: 63px; color: var(--muted); font-size: 14px; line-height: 21px; }
.suite-modules { flex: none; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.suite-modules li { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--r-xs); background: var(--suite-soft, var(--sunken)); font-size: 13px; line-height: 22px; color: var(--ink); }
.suite-modules li button.small { min-height: 22px; padding: 0 6px; font-size: 12px; line-height: 18px; }
.catalog .suite-foot { padding-top: var(--s-3); border-top: 1px solid var(--line); }
.catalog .suite-foot .tiny { color: var(--muted); }
.catalog .suite-foot { flex-wrap: wrap; }
/* A module a partly added suite doesn't have yet: quiet, and its line says "not added" (#818). */
.suite-modules li.off { background: var(--sunken); color: var(--text-2); }
.suite-modules li.off .tiny { color: var(--muted); }

/* A dialog in the page, in place of the browser's confirm() */
dialog.dialog { border: 0; border-radius: var(--r-lg); box-shadow: var(--e-3); padding: var(--s-6); width: min(440px, calc(100vw - 32px)); color: var(--text); background: var(--surface); }
dialog.dialog::backdrop { background: rgba(21, 23, 61, .4); }
dialog.dialog h2 { margin: 0 0 var(--s-2); font-size: 20px; line-height: 26px; }
dialog.dialog p { margin: 0 0 var(--s-6); color: var(--text-2); font-size: 14px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--s-2); }

/* ---- the home page: what needs you, then widgets onto each module's records ---- */
.home-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-5); }
.home-head h1 { font-size: 36px; line-height: 42px; margin: 0; }
.home-head p { margin: 4px 0 0; color: var(--muted); }
.home-section { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin: var(--s-8) 0 var(--s-3); flex-wrap: wrap; }
.home-section h2 { margin: 0; }
.home-section p { margin: 0; color: var(--muted); font-size: 13px; }
.widget-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); align-items: start; }
.work-widget { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-md); padding: 16px 18px 12px; display: flex; flex-direction: column; min-height: 0; transition: box-shadow var(--m-fast) var(--ease), border-color var(--m-fast) var(--ease); }
.work-widget:hover { box-shadow: var(--e-1); }
.work-widget.dragging { opacity: .45; } .work-widget.over { outline: 2px dashed var(--focus); outline-offset: 3px; }
.work-widget > .row { flex-wrap: nowrap; gap: 8px; }
.work-widget h3 { font-size: 14px; margin: 0; cursor: grab; display: flex; align-items: center; gap: 8px; }
.work-widget h3 i { width: 9px; height: 9px; border-radius: 3px; background: var(--suite, var(--sun)); flex: none; }
.widget-tools { display: flex; gap: 2px; margin-left: auto; opacity: 0; transition: opacity var(--m-fast) var(--ease); }
.work-widget:hover .widget-tools, .work-widget:focus-within .widget-tools { opacity: 1; }
.widget-tools button { border: 0; background: transparent; padding: 2px 6px; min-height: 24px; font-size: 13px; color: var(--muted); } .widget-tools button:hover { color: var(--ink); background: var(--sunken); }
.widget-content { flex: 1; padding: 10px 0 8px; font-size: 13px; }
.widget-content p { margin: 6px 0; line-height: 1.45; }
/* The number, then its words: beside it when they fit, under it as one block when they do not (#131). */
.widget-big { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .4em; font-family: var(--font-display); font-variation-settings: var(--display-axes); font-size: 30px; line-height: 1.15; font-variant-numeric: tabular-nums; font-weight: 700; margin: 2px 0 8px; letter-spacing: -.01em; }
.widget-big small { font-family: var(--font-ui); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--muted); line-height: 1.35; }
.widget-record { display: grid; gap: 1px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.4; }
.widget-record:first-child { padding-top: 0; } .widget-record:last-child { border: 0; }
.widget-record small { font-size: 12px; color: var(--muted); }
.widget-record a { text-decoration: none; font-weight: 600; } .widget-record a:hover { text-decoration: underline; }
.widget-foot { display: flex; justify-content: space-between; gap: 8px; align-items: center; border-top: 1px solid var(--line); padding-top: 10px; font-size: 12px; color: var(--muted); }
.widget-foot > span { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.widget-foot a { text-decoration: none; font-weight: 700; color: var(--ink); white-space: nowrap; font-size: 13px; }
.catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 20px; }
.catalog article { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; background: var(--surface); font-size: 13px; }
.catalog article p { color: var(--muted); margin: 4px 0 10px; }

/* ---- chat ---- */
.chat { display: grid; grid-template-columns: minmax(180px, 220px) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.chat.with-thread { grid-template-columns: minmax(180px, 210px) minmax(0, 1fr) minmax(260px, 340px); }
.chat aside h2 { font-family: var(--font-ui); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 14px 0 6px; }
.chat aside .list a { border-color: transparent; background: transparent; padding: 6px 9px; }
.chat aside .list a:hover { background: var(--sunken); } .chat aside .list a.selected { background: var(--sun-soft); }
.conversation h2 { font-size: 20px; margin: 0; }
.messages { display: grid; gap: 14px; max-height: 62vh; overflow-y: auto; padding: 8px 4px 10px; }
.message { display: grid; gap: 4px; }
.message .text { display: block; background: var(--sunken); border-radius: 2px var(--r-md) var(--r-md) var(--r-md); padding: 9px 13px; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.message.focus .text { outline: 2px solid var(--focus); } .message.pinned .text { background: var(--sun-soft); }
.message .when { font-size: 12px; color: var(--muted); text-decoration: none; }
.message .actions { gap: 6px; } .message .actions button, .reactions button, .react button { padding: 2px 8px; min-height: 0; font-size: 12px; border-color: transparent; background: transparent; color: var(--muted); }
.message .actions button:hover, .react button:hover { background: var(--sunken); color: var(--ink); }
.reactions button { border: 1px solid var(--line); background: var(--surface); color: var(--ink); } .reactions button.selected { background: var(--sun-soft); border-color: var(--sun); }
.react summary { cursor: pointer; list-style: none; padding: 1px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); display: inline-block; font-size: 13px; color: var(--muted); }
.composer { display: grid; gap: 6px; margin-top: 12px; } .composer textarea { width: 100%; }
.mentions:empty { display: none; }
.thread { border-left: 1px solid var(--line); padding-left: 16px; }
.thread h2 { font-size: 17px; }

/* ---- smaller screens: below 900 the sidebar becomes a drawer behind a menu button ---- */
@media (max-width: 1200px) { main { padding: var(--s-6) var(--s-6) var(--s-14); } .topbar { padding: 0 var(--s-6); } .widget-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .record-body { grid-template-columns: minmax(0, 1fr) 300px; } }
@media (max-width: 900px) {
  /* Closed, the drawer is hidden once it has slid away, so its links leave the Tab order and its shadow goes (#603, #505). */
  .sidebar { transform: translateX(-100%); visibility: hidden; transition: transform var(--m-base) var(--ease), visibility 0s linear var(--m-base); box-shadow: var(--e-3); z-index: 40; width: min(300px, 86vw); padding-top: max(18px, env(safe-area-inset-top, 0px)); }
  .menu-open .sidebar { transform: none; visibility: visible; transition: transform var(--m-base) var(--ease), visibility 0s; }
  .menu-open .scrim { display: block; position: fixed; inset: 0; background: rgba(21, 23, 61, .4); z-index: 30; }
  .app-shell { margin-left: 0; }
  .menu-button { display: inline-flex; }
  .topbar { padding: 0 var(--s-4); gap: var(--s-2); }
  .columns, .record-body { grid-template-columns: minmax(0, 1fr); }
  .chat, .chat.with-thread { grid-template-columns: 1fr; } .thread { border: 0; padding: 0; }
  .steps { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .topbar { height: auto; min-height: 56px; padding: 8px 16px; flex-wrap: wrap; position: sticky; top: 0; }
  .anchor, .app-shell > main { scroll-margin-top: 128px; }
  .breadcrumb { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .crumb-here { display: none; }
  .topbar-me { display: block; } .topbar-tools { flex-basis: 100%; } .topbar input[type=search] { width: 100%; }
  main { padding: var(--s-5) var(--s-4) var(--s-14); }
  h1 { font-size: 26px; line-height: 32px; } .home-head h1 { font-size: 30px; line-height: 36px; } .hero h1 { font-size: 36px; }
  .widget-grid { grid-template-columns: 1fr; } .messages { max-height: none; }
  .panel { padding: var(--s-4); } .panel > .table-scroll { margin: 0 calc(-1 * var(--s-4)); padding: 0 var(--s-4); }
  .site-header { padding: 14px 16px; } .site-footer { padding: 18px 16px; } .field-pair { grid-template-columns: 1fr; }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } .figure-card .v { font-size: 24px; line-height: 30px; }
  .chart-card { padding: var(--s-4); gap: var(--s-4); } .chart-filters select { flex: 1 1 140px; width: auto; min-width: 0; } .chart-x span.minor { display: none; }
  .metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1); margin: -8px -8px 0; } .metric { padding: 8px; }
  .metric .k { font-size: 12px; } .metric .v { font-size: 22px; line-height: 28px; } .metric .s { font-size: 12px; }
  .page .row > select { flex: 1 1 140px; min-width: 0; } .page .row > input[type=search] { flex: 1 1 100% !important; }
  .record-head { padding: var(--s-4); } .record-head .amount { font-size: 28px; line-height: 34px; }
  .record-head .top { flex-direction: column; } .record-head h1 { font-size: 22px; line-height: 28px; } .record-amount { text-align: left; justify-items: start; }
  .group-head { padding: 12px var(--s-4); }
  /* a queue's table becomes cards: each row a block, its cells stacked */
  .group table.data.cards thead { display: none; }
  .group table.data.cards, .group table.data.cards tbody, .group table.data.cards tr, .group table.data.cards td { display: block; width: 100%; }
  .group table.data.cards tr { padding: 12px var(--s-4); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; }
  .group table.data.cards tr:last-child { border-bottom: 0; }
  .group table.data.cards td { padding: 0 !important; border: 0; text-align: left !important; }
  .group table.data.cards td.amt { grid-column: 2; grid-row: 1; text-align: right !important; font-weight: 700; }
  .group table.data.cards td:nth-child(1) { grid-column: 1; grid-row: 1; } .group table.data.cards td:nth-child(1) .sub { display: inline; margin-left: 8px; }
  .group table.data.cards td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; } .group table.data.cards td:nth-child(3) { grid-column: 1 / -1; grid-row: 3; min-width: 0; max-width: none; color: var(--text-2); }
  .group table.data.cards td .sub { display: inline; margin-left: 6px; }
  .group table.data.cards td.act { grid-column: 1 / -1; padding-top: 8px !important; }
  .group table.data.cards td.age { display: none; }
  .group table.data.cards .wide { display: none; } /* a column only a wide screen has room for */
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media print { .sidebar, .topbar, .tabs, .no-print { display: none !important; } .app-shell { margin: 0; } main { padding: 0; } .panel, .record-head, .group { border: 0; } }