/* Hartco Aurum CRM — "Private Client Desk" Visual language: Aurum's own deep-graphite-and-gold palette and hairline borders, arranged to the structure the owner asked for (docs/CRM-LOOK-AND-FEEL.md): a narrow dark icon rail down the left, one top bar carrying eight sections and a global search, white cards on a pale page, status pills that mean something. Light is the desk default; dark is the same layout in a deep graphite, lifted off the old near-black. No framework, no build step. */ :root { --page: #1a1a1a; --rail: #1e1e1e; --surface: #212121; --surface-2: #252525; --surface-3: #272727; --line: #2e2e2e; --line-soft: #282828; --text: #f4f1ea; --text-2: #c3bdb2; --text-3: #969084; /* --text-4 carries the smallest type on the desk (9.5-10.5px uppercase eyebrows, field labels, hints) and must clear the 4.5:1 floor on every dark surface it sits on. On the graphite desk #928c80 measures 5.21:1 on the #1a1a1a page, 4.99:1 on the #1e1e1e wells, 4.82:1 on a #212121 card and 4.59:1 on a #252525 strip, so the smallest print stays readable while --text-4 remains a step dimmer than --text-3 (#969084) and the quiet hierarchy survives. tests/render-views.mjs asserts these ratios from this file. */ --text-4: #928c80; --gold: #c9a45c; --gold-bright: #e0bf83; --ok: #6cc08b; --warn: #d9a441; --bad: #e0715f; --radius: 14px; --radius-sm: 8px; --sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --serif: Georgia, "Iowan Old Style", "Times New Roman", serif; --shadow: 0 18px 44px rgba(0, 0, 0, .45); /* appearance tokens — every value here is the exact colour the dark desk already used, so dark cannot drift; html[data-theme="light"] below swaps the whole set. The inline bootstrap in index.html puts data-theme on before the first paint, and public/lib/prefs.js changes it from Setup → Appearance. */ color-scheme: dark; --well: #1e1e1e; /* inputs, table heads, segmented pills, the Aura panel */ --well-focus: #222222; --panel: #1e1e1e; --surface-raised: #222222; /* modal, skeleton base */ --skeleton-a: #222222; --skeleton-b: #2a2a2a; --nav-hover: #252525; --row-hover: #242424; --line-strong: #3a3a3a; --input-focus-line: #404040; --card-hover-line: #3e3e3e; --text-strong: #ffffff; /* active nav row, active segmented pill */ --on-strong: #14120e; /* text on the white primary button */ --strong-hover: #ffffff; --slider: #323232; /* rail scrollbar thumb */ --dot-idle: #4a4a4a; --scrim: rgba(6, 6, 6, .72); --selected: rgba(180, 148, 97, .07); --ok-tint: rgba(108, 192, 139, .10); --ok-line: rgba(108, 192, 139, .30); --ok-line-strong: rgba(108, 192, 139, .34); --ok-notice-tint: rgba(108, 192, 139, .08); --warn-tint: rgba(217, 164, 65, .10); --warn-line: rgba(217, 164, 65, .30); --bad-tint: rgba(224, 113, 95, .10); --bad-tint-strong: rgba(224, 113, 95, .12); --bad-tint-stronger: rgba(224, 113, 95, .20); --bad-line: rgba(224, 113, 95, .30); --bad-line-strong: rgba(224, 113, 95, .34); --bad-line-strongest: rgba(224, 113, 95, .38); --bad-notice-tint: rgba(224, 113, 95, .08); --bad-chip: rgba(224, 113, 95, .16); --bad-soft: #eb9c8b; --bad-soft-hover: #f4b3a4; --bad-notice: #f0b0a2; --good-notice: #a8dcc0; --gold-tint: rgba(201, 164, 92, .10); --gold-line: rgba(201, 164, 92, .32); /* ── the usability dials (added 30 Sep 2026, the brighter/calmer pass) ────── --focus is the keyboard ring; --bad-badge-ink is the ink on a red count badge (white on the dark desk's #e0715f measures 3.14:1 — unreadable at 9.5px — so the badge carries its own ink per theme). The five spacing tokens are the density dial: html[data-density="compact"] swaps them, so the choice moves real spacing. --card-shadow is the gentle lift under a card on the light desk; dark keeps its graphite identity and paints none. */ --focus: #e0bf83; --focus-ring-soft: rgba(224, 191, 131, .22); --bad-badge-ink: #2a1410; --row-min: 44px; --cell-pad-y: 11px; --cell-pad-x: 14px; --card-pad: 18px; --grid-gap: 10px; --view-pad-y: 22px; --topbar-h: 52px; --card-shadow: none; --card-shadow-hover: none; /* ── shell tokens ────────────────────────────────────────────────────────── The top nav, the rail, the status pills (Live / Idle / Attention) and the popovers all read these, so the light desk can be the reference's while the dark desk keeps its own lifted graphite set. */ --radius: 10px; --topbar: #1a1a1a; /* the bar itself, just off the page */ --pill-active-bg: #292929; /* the active section pill */ --pill-active-ink: #ffffff; --gold-on-dark: #d9b877; /* gold on the dark rail, in either theme */ --rail-bg: #1e1e1e; --rail-ink: #f4f1ea; --rail-ink-2: #c3bdb2; --rail-line: #2e2e2e; --rail-hover: #2a2a2a; --rail-active: #353535; --live-ink: #6cc08b; --live-dot: #6cc08b; --live-tint: rgba(108, 192, 139, .10); --live-line: rgba(108, 192, 139, .28); --attention-ink: #d9a441; --attention-dot: #d9a441; --attention-tint: rgba(217, 164, 65, .10); --attention-line: rgba(217, 164, 65, .28); --idle-ink: #969084; --idle-dot: #4a4a4a; --idle-tint: rgba(255, 255, 255, .04); --idle-line: #2e2e2e; } /* ── light theme — the brighter, calmer desk ──────────────────────────────── Near-white WARM page #f8f7f3, pure white cards #ffffff, soft 1px warm borders (#e7e4dd) and a gentle lift (--card-shadow) instead of hard edges. Ink sits at #0f172a with a considered four-step ladder underneath it: --text #0f172a 16.7:1 on the page — headings, values --text-2 #38414f 9.6:1 — body copy --text-3 #4d5768 6.8:1 — labels, subtitles, muted --text-4 #5b6779 5.4:1 — the smallest print (9.5-10.5px eyebrows, hints) Gold stays an ACCENT, never a field: #7a6234 for gold TEXT (5.41:1 on the page, 5.79:1 on a card — #b49461 measures 2.62:1 on a light surface and is never used as text), with the estate's #b49461 only inside translucent tints. The rail is a soft deep navy — #22355a, 3.9x the luminance of the old #111827 — so the shell reads as navy rather than near-black and nothing reads heavy or gloomy. Every ratio above is measured, and tests/render-views.mjs re-measures the whole cross product (every text token on every surface) from this file. */ html[data-theme="light"] { color-scheme: light; --page: #f8f7f3; --rail: #f2f0ea; /* kanban columns and other rail-tinted surfaces */ --surface: #ffffff; --surface-2: #fbfaf7; --surface-3: #f0eee8; --line: #e7e4dd; --line-soft: #f0eee9; --text: #0f172a; --text-2: #38414f; --text-3: #4d5768; --text-4: #5b6779; /* 5.35:1 page · 5.74:1 card · 4.94:1 on --surface-3 */ --gold: #7a6234; --gold-bright: #5f4d22; --ok: #1f6b41; --warn: #7a5312; --bad: #a4341f; --well: #faf9f6; --well-focus: #ffffff; --panel: #ffffff; --surface-raised: #ffffff; --skeleton-a: #efece5; --skeleton-b: #f8f6f2; --nav-hover: #f2f0ea; --row-hover: #fbfaf7; --line-strong: #d8d4ca; --input-focus-line: #b8b2a4; --card-hover-line: #d8d4ca; --text-strong: #0f172a; --on-strong: #ffffff; --strong-hover: #1e293b; --slider: #d8d4ca; --dot-idle: #a8a49a; --scrim: rgba(15, 23, 42, .32); --selected: rgba(34, 53, 90, .06); --shadow: 0 12px 30px rgba(15, 23, 42, .11); --ok-tint: rgba(31, 107, 65, .10); --ok-line: rgba(31, 107, 65, .30); --ok-line-strong: rgba(31, 107, 65, .40); --ok-notice-tint: rgba(31, 107, 65, .07); --warn-tint: rgba(122, 83, 18, .10); --warn-line: rgba(122, 83, 18, .30); --bad-tint: rgba(164, 52, 31, .09); --bad-tint-strong: rgba(164, 52, 31, .09); --bad-tint-stronger: rgba(164, 52, 31, .16); --bad-line: rgba(164, 52, 31, .28); --bad-line-strong: rgba(164, 52, 31, .34); --bad-line-strongest: rgba(164, 52, 31, .40); --bad-notice-tint: rgba(164, 52, 31, .07); --bad-chip: rgba(164, 52, 31, .12); --bad-soft: #8f2f1c; --bad-soft-hover: #7a2817; --bad-notice: #8f2f1c; --good-notice: #1f5c39; --bad-badge-ink: #ffffff; /* white on #a4341f measures 6.80:1 */ --gold-tint: rgba(180, 148, 97, .16); /* the estate's own gold, as a tint only */ --gold-line: rgba(180, 148, 97, .40); /* the shell */ --topbar: #ffffff; --pill-active-bg: #1e293b; /* dark pill, white text — the active section */ --pill-active-ink: #ffffff; --rail-bg: #22355a; /* soft deep navy, not near-black */ --rail-ink: #eef2f7; --rail-ink-2: #c3cdde; --rail-line: rgba(255, 255, 255, .14); --rail-hover: rgba(255, 255, 255, .10); --rail-active: rgba(255, 255, 255, .18); --focus: #22355a; /* 11.4:1 on the page, 12.2:1 on a card */ --focus-ring-soft: rgba(34, 53, 90, .16); /* soft 1px borders + a gentle lift instead of a hard, flat edge */ --card-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 18px rgba(15, 23, 42, .05); --card-shadow-hover: 0 1px 2px rgba(15, 23, 42, .05), 0 12px 28px rgba(15, 23, 42, .10); --live-ink: #146b33; --live-dot: #16a34a; --live-tint: rgba(20, 107, 51, .10); --live-line: rgba(20, 107, 51, .30); --attention-ink: #9a4a08; --attention-dot: #d97706; --attention-tint: rgba(154, 74, 8, .10); --attention-line: rgba(154, 74, 8, .30); --idle-ink: #4d5768; --idle-dot: #a8a49a; --idle-tint: #f4f2ee; --idle-line: #e7e4dd; } /* ── density — Comfortable (the default) or Compact ───────────────────────── Set on as data-density by ui-enhance.js (and before the first paint by the inline bootstrap in index.html), stored per device in localStorage under `ha-crm-density`, exactly like the theme. It moves real spacing — row heights, cell padding, card padding, grid gaps and page padding — rather than scaling type, so nothing becomes unreadable and the smallest print keeps its measured contrast. */ html[data-density="compact"] { --row-min: 32px; --cell-pad-y: 7px; --cell-pad-x: 12px; --card-pad: 13px; --grid-gap: 8px; --view-pad-y: 16px; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--page); color: var(--text); font-family: var(--sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4 { margin: 0; font-weight: 500; } p { margin: 0 0 12px; } .hidden { display: none !important; } .small { font-size: 12.5px; } .muted { color: var(--text-3); } .gold { color: var(--gold); } .sub { font-size: 13.5px; color: var(--text-3); } .spacer { flex: 1; } .link { color: var(--gold); font-size: 13px; } .link:hover { color: var(--gold-bright); text-decoration: underline; } .stack { display: flex; flex-direction: column; gap: 18px; } .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .row.tight { gap: 6px; } .nowrap { white-space: nowrap; } /* ── first paint: a hairline progress bar, never a loading page ─────────── */ #bootbar { position: fixed; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: bootslide 1.1s ease-in-out infinite; z-index: 200; } #bootbar.done { opacity: 0; transition: opacity .25s ease; animation: none; } @keyframes bootslide { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } } /* ── shell ─────────────────────────────────────────────────────────────── */ .layout { display: flex; min-height: 100vh; } /* The rail: narrow, dark, icon-only — the reference's, in Aurum's palette. It is dark in BOTH themes, so its ink comes from its own tokens and never from the page's. Every item carries a title (the tooltip) and an aria-label. */ .rail { width: 62px; flex: 0 0 62px; background: var(--rail-bg); border-right: 1px solid var(--rail-line); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 0 10px; position: sticky; top: 0; height: 100vh; z-index: 50; } .rail-mark { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(180deg, var(--gold-on-dark), #a8853f); color: #17150f; } .rail-mark:hover { filter: brightness(1.06); } .rail-monogram { font-family: var(--serif); font-size: 15px; letter-spacing: .02em; line-height: 1; } .rail-nav { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; } .rail-nav::-webkit-scrollbar { width: 0; } /* a group separator: the sections are the same eight as the top nav */ .rail-group { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--rail-line); } .rail-group:first-child { padding-top: 0; margin-top: 0; border-top: 0; } .rail-link { position: relative; display: flex; align-items: center; justify-content: center; width: 42px; height: 36px; border-radius: 9px; color: var(--rail-ink-2); transition: background .12s ease, color .12s ease; } .rail-link:hover { background: var(--rail-hover); color: var(--rail-ink); } .rail-link.active { background: var(--rail-active); color: var(--rail-ink); } .rail-link.active::before { content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gold-on-dark); } .nav-icon { display: inline-flex; width: 16px; height: 16px; opacity: .9; } .nav-icon svg { width: 16px; height: 16px; } .rail-link .nav-icon, .rail-link .nav-icon svg { width: 17px; height: 17px; } .rail-badge { position: absolute; top: 1px; right: 1px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px; background: var(--bad); color: var(--bad-badge-ink); font-size: 10px; line-height: 15px; text-align: center; font-variant-numeric: tabular-nums; } .rail-foot { flex: 0 0 auto; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 10px; border-top: 1px solid var(--rail-line); } .rail-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 42px; height: 36px; border-radius: 9px; border: 0; background: transparent; color: var(--rail-ink-2); cursor: pointer; } .rail-btn:hover { background: var(--rail-hover); color: var(--rail-ink); } .avatar { width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .16); color: var(--gold-on-dark); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; flex: 0 0 28px; } /* the signed-in user at the foot of the rail: the avatar, with the name and role on hover (and on keyboard focus) rather than a permanently open block */ .rail-user-card { position: absolute; left: calc(100% + 12px); bottom: 2px; display: flex; flex-direction: column; gap: 2px; min-width: 150px; padding: 9px 12px; text-align: left; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transition: opacity .12s ease; z-index: 70; } .rail-user:hover .rail-user-card, .rail-user:focus-visible .rail-user-card { opacity: 1; visibility: visible; } .user-name { font-size: 13px; color: var(--text); } .user-role { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-4); } .status-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 12.5px; color: var(--text-3); padding: 5px 12px; } .status { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); } .status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dot-idle); display: inline-block; } .status.ok { color: var(--ok); } .status.ok .dot { background: var(--ok); } .status.warn { color: var(--warn); } .status.warn .dot { background: var(--warn); } .status.bad { color: var(--bad); } .status.bad .dot { background: var(--bad); } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--topbar); position: sticky; top: 0; z-index: 40; } /* app context: the desk's mark and the screen you are on */ .topbar-context { display: flex; align-items: center; gap: 8px; min-width: 0; padding-right: 12px; border-right: 1px solid var(--line); } .topbar-mark { display: none; /* the rail carries the mark where there is room */ align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; flex: 0 0 24px; background: var(--pill-active-bg); color: var(--pill-active-ink); font-family: var(--serif); font-size: 11px; line-height: 1; } .topbar-title { font-size: 13.5px; font-weight: 600; color: var(--text); letter-spacing: .005em; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* the eight sections: compact, and the active one unmistakable — a solid ink pill with white text, exactly the reference's treatment */ .topnav { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; } .topnav::-webkit-scrollbar { display: none; } .topnav-link { display: inline-flex; align-items: center; height: 30px; padding: 0 9px; border-radius: 8px; color: var(--text-2); font-size: 13.5px; white-space: nowrap; transition: background .12s ease, color .12s ease; } .topnav-link:hover { background: var(--nav-hover); color: var(--text); } .topnav-link.active { background: var(--pill-active-bg); color: var(--pill-active-ink); font-weight: 600; } .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; } /* the utility icons: one compact group, every one a real destination */ .topbar-tools { display: flex; align-items: center; gap: 2px; padding: 3px; background: var(--well); border: 1px solid var(--line); border-radius: 10px; } .tool { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 28px; border-radius: 7px; border: 0; background: transparent; color: var(--text-3); cursor: pointer; } .tool:hover { background: var(--surface); color: var(--text); } .tool-badge { position: absolute; top: -3px; right: -3px; min-width: 14px; height: 14px; padding: 0 4px; border-radius: 999px; background: var(--bad); color: var(--bad-badge-ink); font-size: 9.5px; line-height: 14px; text-align: center; font-variant-numeric: tabular-nums; } .tool .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dot-idle); display: inline-block; } .tool .dot.ok { background: var(--ok); } .tool .dot.warn { background: var(--warn); } .tool .dot.bad { background: var(--bad); } .topbar-mode { font-size: 9.5px; letter-spacing: .16em; color: var(--text-4); border-left: 1px solid var(--line); padding-left: 10px; } /* ── company switcher + workspace badge ───────────────────────────────────── */ .tool.workspace-badge { width: auto; height: 24px; padding: 0 9px; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-2); border: 1px solid var(--line); border-radius: 999px; } .tool.workspace-badge:hover { background: var(--surface); color: var(--text); } .pop-ws { position: absolute; top: calc(100% - 6px); right: 16px; min-width: 220px; } .ws-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; min-height: 38px; border: 0; background: none; cursor: pointer; font-size: 13px; color: var(--text-2); text-align: left; font-family: inherit; } .ws-option:hover { background: var(--surface); color: var(--text); } .ws-option.active { color: var(--text); font-weight: 600; } .ws-option-mark { width: 14px; flex: 0 0 14px; color: var(--text-3); } .nav-toggle { display: none; background: none; border: 0; color: var(--text-2); padding: 6px; border-radius: var(--radius-sm); cursor: pointer; } .nav-toggle:hover { background: var(--surface-2); color: var(--text); } .global-search { position: relative; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; min-width: 180px; flex: 0 1 240px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; color: var(--text-4); } .global-search:focus-within { border-color: var(--line-strong); box-shadow: 0 0 0 3px var(--selected); } .global-search input { background: none; border: 0; outline: none; width: 100%; height: auto; padding: 0; font-size: 13px; color: var(--text); } .global-search input::placeholder { color: var(--text-4); } .search-hint { flex: 0 0 auto; padding: 1px 5px; border-radius: 5px; border: 1px solid var(--line); background: var(--well); color: var(--text-4); font-size: 10.5px; font-family: var(--sans); } /* ── popovers: search results, the payment panel, system status, sections ─── */ .pop { background: var(--surface-raised); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); z-index: 80; overflow: hidden; } .pop-head { padding: 9px 12px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-4); border-bottom: 1px solid var(--line-soft); } .pop-note { padding: 9px 12px; font-size: 12px; color: var(--text-3); } .pop-note.bad { color: var(--bad-soft); } .pop-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; min-height: 44px; border-bottom: 1px solid var(--line-soft); } .pop-row:last-child { border-bottom: 0; } .pop-row:hover { background: var(--row-hover); } .pop-row .nav-icon { color: var(--text-4); flex: 0 0 auto; } .pop-row-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; } .pop-row-main strong { font-size: 13.5px; font-weight: 500; color: var(--text); } .pop-sep { height: 1px; background: var(--line-soft); } .pop-foot { width: 100%; text-align: left; padding: 10px 12px; background: var(--well); border: 0; border-top: 1px solid var(--line-soft); color: var(--text-2); font-size: 12.5px; cursor: pointer; } .pop-foot:hover { background: var(--nav-hover); color: var(--text); } .pop-field { padding: 10px 12px 6px; } .pop-results { max-height: 250px; overflow-y: auto; } .pop-truth { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; border-top: 1px solid var(--line-soft); background: var(--well); } .pop-truth strong { font-size: 13.5px; color: var(--text); } .pop-truth p { font-size: 12px; color: var(--text-3); margin: 0; line-height: 1.5; } .search-results { position: absolute; top: calc(100% + 6px); left: 0; width: 380px; max-width: calc(100vw - 90px); } .pop-sys { position: absolute; top: calc(100% - 6px); right: 16px; min-width: 250px; padding-bottom: 6px; } .pop-pay { position: absolute; top: calc(100% - 6px); right: 16px; width: 400px; max-width: calc(100vw - 90px); } .pop-nav { position: absolute; top: calc(100% - 6px); left: 12px; width: min(360px, calc(100vw - 90px)); max-height: 72vh; overflow-y: auto; } /* ── the page pattern: eyebrow, title, one muted subtitle, then content ─── */ .view { padding: var(--view-pad-y) 26px 80px; max-width: 1320px; width: 100%; } .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; } .page-head-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .page-head h1, .desk-title { /* the desk sans, not the serif: the reference titles are sans, and the Marketing hub (public/views/marketing.js) already sets its own title in sans — one desk, one title face */ font-family: var(--sans); font-size: 27px; font-weight: 600; line-height: 1.15; letter-spacing: -.015em; margin: 0; } .eyebrow { display: block; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-4); margin-bottom: 2px; } .page-head .sub { max-width: 78ch; font-size: 13.5px; color: var(--text-3); } /* ── status pills that mean something: Live / Idle / Attention ───────────── */ .spill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; border: 1px solid transparent; white-space: nowrap; } .spill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; } .spill.live { color: var(--live-ink); background: var(--live-tint); border-color: var(--live-line); } .spill.live .dot { background: var(--live-dot); } .spill.attention { color: var(--attention-ink); background: var(--attention-tint); border-color: var(--attention-line); } .spill.attention .dot { background: var(--attention-dot); } .spill.idle { color: var(--idle-ink); background: var(--idle-tint); border-color: var(--idle-line); } .spill.idle .dot { background: var(--idle-dot); } /* ── list rows: hairline dividers, ~44px, hover on the row ───────────────── */ .list { display: flex; flex-direction: column; } .list-head, .list-row { display: grid; align-items: center; gap: 12px; padding: 0 6px; } .list-head { height: 34px; border-bottom: 1px solid var(--line); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-4); } .list-row { min-height: var(--row-min); padding: 8px 6px; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; color: var(--text-2); } .list-row:last-child { border-bottom: 0; } .list-row:hover { background: var(--row-hover); } .list-inbox .list-head, .list-inbox .list-row { grid-template-columns: 132px minmax(140px, 1fr) 96px 118px minmax(160px, 2fr); } .list-when { font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; } /* ── hub cards: the marketing hub's shape, reused by the honest panels ───── */ .hub-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--card-pad); box-shadow: var(--card-shadow); display: flex; flex-direction: column; gap: 10px; } .hub-card h3 { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); } .hub-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 9px; font-size: 13px; color: var(--text-2); line-height: 1.5; } .hub-links { display: flex; flex-direction: column; } .hub-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; color: var(--text-2); } .hub-link:last-child { border-bottom: 0; } .hub-link:hover { color: var(--gold); } .hub-arrow { color: var(--text-4); } .section { margin: 4px 0 12px; } .section > h2, .section > h3 { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-4); } .grid { display: grid; gap: var(--grid-gap); } .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } /* ── cards and metrics ─────────────────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--card-pad); box-shadow: var(--card-shadow); } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .card-head h3, .card h3 { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); } .card-head h2 { font-size: 15px; color: var(--text); } .card.compact { padding: 14px 16px; } .metric { display: flex; flex-direction: column; gap: 8px; min-height: 118px; } .metric .label { font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--text-3); } /* the reference's big number: sans, semibold, tabular — not the serif */ .metric .value { font-family: var(--sans); font-size: 30px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--text); } .metric .value.gold { color: var(--gold-bright); } .metric .hint { font-size: 12.5px; color: var(--text-4); } .metric.alert { border-color: var(--bad-line-strong); } .metric.alert .label { color: var(--bad-soft); } .kv { display: grid; grid-template-columns: minmax(120px, 190px) 1fr; gap: 9px 16px; margin: 0; } .kv dt { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-4); padding-top: 2px; } .kv dd { margin: 0; font-size: 13.5px; color: var(--text-2); } .kv-custom { margin-top: 12px; border-top: 1px solid var(--line-soft); padding-top: 12px; } /* ── tables ────────────────────────────────────────────────────────────── */ .table-wrap { border: 1px solid var(--line); border-radius: var(--radius); /* `clip`, not `hidden`: `hidden` makes this a scroll container, which traps the sticky inside the table so it never sticks to the window. `clip` keeps the rounded corners and lets the header stick where a reader expects it. */ overflow: clip; background: var(--surface); box-shadow: var(--card-shadow); } .table-wrap + .table-wrap { margin-top: 14px; } table.data { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; } table.data thead th { text-align: left; padding: 10px var(--cell-pad-x); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); font-weight: 500; background: var(--well); border-bottom: 1px solid var(--line); white-space: nowrap; /* the long lists keep their headings: the header parks under the sticky top bar. Sticky needs an opaque fill (a translucent one shows the rows sliding under), and the fill sits below the top bar's own z-index so the bar still covers it. */ position: sticky; top: var(--topbar-h); z-index: 3; } table.data thead th:first-child { border-top-left-radius: var(--radius); } table.data thead th:last-child { border-top-right-radius: var(--radius); } table.data tbody td { padding: var(--cell-pad-y) var(--cell-pad-x); border-bottom: 1px solid var(--line-soft); color: var(--text-2); vertical-align: top; } table.data tbody tr:last-child td { border-bottom: 0; } table.data tbody tr:hover { background: var(--row-hover); } table.data tr.row-link { cursor: pointer; } table.data td strong, table.data td b { color: var(--text); font-weight: 500; } th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; } table.data td .small { color: var(--text-4); } .pagination { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--text-3); font-size: 13px; } .agenda-card .agenda-list { display: flex; flex-direction: column; } .agenda-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 0; border-top: 1px solid var(--line-soft); cursor: pointer; } .agenda-row:first-child { border-top: 0; } .agenda-row:hover .agenda-what { color: var(--gold-bright); } .agenda-when { font-size: 11.5px; color: var(--text-4); letter-spacing: .04em; } .agenda-what { font-size: 13.5px; color: var(--text); } .agenda-why { font-size: 12.5px; color: var(--text-3); } .agenda-empty { padding: 10px 0; color: var(--text-4); font-size: 13px; } .agenda-card.alert { border-color: var(--bad-line); } /* ── kanban ────────────────────────────────────────────────────────────── */ .board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start; } .column { flex: 0 0 268px; background: var(--rail); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 12px; min-height: 160px; } .column-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); } .column-head h3, .column-head strong { font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--text-3); } .column-head .count, .column-head span { font-size: 11px; color: var(--text-4); font-variant-numeric: tabular-nums; } .lead-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 12px; margin-bottom: 8px; cursor: pointer; transition: border-color .12s ease, background .12s ease; } .lead-card:hover { border-color: var(--card-hover-line); background: var(--surface-2); } .lead-card strong { display: block; font-size: 13.5px; color: var(--text); font-weight: 500; } .lead-card .meta, .lead-card .small { color: var(--text-4); font-size: 12px; } /* ── timeline, lists, chips ────────────────────────────────────────────── */ .timeline { display: flex; flex-direction: column; } .timeline-item, .timeline > div { border-left: 1px solid var(--line); padding: 0 0 16px 16px; position: relative; } .timeline-item::before, .timeline > div::before { content: ""; position: absolute; left: -3.5px; top: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); } .field-list { display: flex; flex-direction: column; gap: 8px; } .field-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; } .field-item.off { opacity: .5; } .chip, .pill { display: inline-flex; align-items: center; gap: 6px; height: 21px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-3); font-size: 11.5px; white-space: nowrap; } .pill.good, .chip.good { color: var(--ok); border-color: var(--ok-line); background: var(--ok-tint); } .pill.warn, .chip.warn { color: var(--warn); border-color: var(--warn-line); background: var(--warn-tint); } .pill.bad, .chip.bad { color: var(--bad); border-color: var(--bad-line); background: var(--bad-tint); } .pill.gold, .chip.gold { color: var(--gold-bright); border-color: var(--gold-line); background: var(--gold-tint); } .checklist { display: flex; flex-direction: column; gap: 8px; } .checklist label { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; color: var(--text-2); } .checklist input { accent-color: var(--gold); margin-top: 3px; } /* ── charts ────────────────────────────────────────────────────────────── */ .chart { display: flex; flex-direction: column; gap: 10px; } .bar-row { display: grid; grid-template-columns: minmax(90px, 170px) 1fr auto; gap: 12px; align-items: center; } .bar-row .small { color: var(--text-3); font-size: 12.5px; } .bar-track { height: 6px; background: var(--surface-3); border-radius: 999px; overflow: hidden; } .bar-fill { height: 100%; background: linear-gradient(90deg, #8a6f3a, var(--gold-bright)); border-radius: 999px; } .bar-val { font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; } /* ── forms ─────────────────────────────────────────────────────────────── */ .field { display: flex; flex-direction: column; gap: 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-4); } input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="date"], input[type="tel"], input[type="url"], select, textarea { width: 100%; height: 34px; padding: 0 11px; background: var(--well); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); font-size: 13.5px; letter-spacing: 0; text-transform: none; outline: none; } textarea { height: auto; min-height: 84px; padding: 9px 11px; line-height: 1.5; resize: vertical; } select { appearance: none; background-image: none; padding-right: 28px; } input:focus, select:focus, textarea:focus { border-color: var(--input-focus-line); background: var(--well-focus); } input::placeholder, textarea::placeholder { color: var(--text-4); text-transform: none; } input[type="checkbox"] { width: auto; height: auto; accent-color: var(--gold); } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .form-grid .wide { grid-column: 1 / -1; } .form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; } .filters { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; } .filters .field { min-width: 130px; } /* ── buttons ───────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: transparent; color: var(--text-2); font-size: 13.5px; cursor: pointer; white-space: nowrap; transition: background .12s ease, color .12s ease, border-color .12s ease; } .btn:hover { background: var(--surface-2); color: var(--text); } .btn:disabled { opacity: .5; cursor: default; } .btn-sm { height: 30px; padding: 0 11px; font-size: 13px; } .btn-primary, .btn-gold { background: var(--text); border-color: var(--text); color: var(--on-strong); font-weight: 500; } .btn-primary:hover, .btn-gold:hover { background: var(--strong-hover); border-color: var(--strong-hover); color: var(--on-strong); } .btn-quiet, .btn-ghost { background: transparent; border-color: var(--line); color: var(--text-2); } .btn-quiet:hover, .btn-ghost:hover { background: var(--surface-2); color: var(--text); } .btn-danger { background: var(--bad-tint-strong); border-color: var(--bad-line-strong); color: var(--bad-soft); } .btn-danger:hover { background: var(--bad-tint-stronger); color: var(--bad-soft-hover); } .btn-link { background: none; border: 0; padding: 0; color: var(--gold); height: auto; } .aura-glyph { color: var(--gold); } /* ── segmented control, tabs ───────────────────────────────────────────── */ .segmented { display: inline-flex; gap: 2px; padding: 3px; background: var(--well); border: 1px solid var(--line); border-radius: 999px; /* wrap instead of overflowing on a phone: the scopes stay one tap away without a sideways scroll that hides the later ones off-screen */ flex-wrap: wrap; max-width: 100%; } .segmented button { height: 28px; padding: 0 13px; border: 0; border-radius: 999px; background: transparent; color: var(--text-3); font-size: 12.5px; cursor: pointer; } .segmented button:hover { color: var(--text); } .segmented button.active { background: var(--pill-active-bg); color: var(--pill-active-ink); font-weight: 500; } .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; } .tabs button { height: 36px; padding: 0 13px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--text-3); font-size: 13.5px; cursor: pointer; white-space: nowrap; } .tabs button:hover { color: var(--text); } .tabs button.active { color: var(--text); border-bottom-color: var(--gold); } /* ── feedback: notices, empty states, loading and errors ─────────────────── A screen must never look broken while it waits. `.empty` is the desk's existing inline empty state and keeps working, but is now a deliberate soft panel rather than a stray line of grey; `.state` is the fuller empty/loading/error block that app.js draws for a route that failed; `.spinner` and `.loading-inline` mark a wait as activity, not as an answer of "nothing". */ .notice { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13.5px; color: var(--text-2); } .notice.bad { border-color: var(--bad-line-strong); background: var(--bad-notice-tint); color: var(--bad-notice); } .notice.good { border-color: var(--ok-line); background: var(--ok-notice-tint); color: var(--good-notice); } .empty { color: var(--text-3); font-size: 13.5px; padding: 16px 16px; text-align: center; text-wrap: pretty; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-2); } .empty.tight { padding: 10px 12px; text-align: left; } .state { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 34px 20px; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface-2); } .state-icon { font-size: 20px; line-height: 1; color: var(--text-4); } .state-title { font-size: 15px; font-weight: 600; color: var(--text); } .state-body { font-size: 13.5px; color: var(--text-3); max-width: 62ch; line-height: 1.6; } .state .row { justify-content: center; margin-top: 4px; } .state.error { border-style: solid; border-color: var(--bad-line-strong); background: var(--bad-notice-tint); } .state.error .state-title { color: var(--bad-notice); } .state.loading { border-style: solid; border-color: var(--line); background: var(--surface); } .spinner { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--gold); animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .loading-inline { display: inline-flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 13px; } .toasts { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 300; max-width: calc(100vw - 32px); } .toast { display: flex; align-items: flex-start; gap: 9px; background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 12px 11px 14px; font-size: 13.5px; color: var(--text); box-shadow: var(--shadow); max-width: 380px; } .toast.good { border-color: var(--ok-line-strong); } .toast.error { border-color: var(--bad-line-strongest); } .toast-glyph { flex: 0 0 auto; font-size: 12px; line-height: 18px; color: var(--text-3); } .toast.good .toast-glyph { color: var(--ok); } .toast.error .toast-glyph { color: var(--bad); } .toast-body { flex: 1 1 auto; min-width: 0; } .toast-dismiss { flex: 0 0 auto; width: 20px; height: 20px; padding: 0; line-height: 1; border: 0; border-radius: 5px; background: transparent; color: var(--text-4); font-size: 14px; cursor: pointer; } .toast-dismiss:hover { background: var(--nav-hover); color: var(--text); } /* ── modal ─────────────────────────────────────────────────────────────── */ .modal-backdrop { position: fixed; inset: 0; background: var(--scrim); backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px 16px; overflow-y: auto; z-index: 250; } .modal { width: 100%; max-width: 720px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); } .modal.narrow { max-width: 420px; } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .modal-head h2 { font-family: var(--serif); font-size: 21px; font-weight: 400; } /* ── Aura panel ────────────────────────────────────────────────────────── */ .aura-panel { position: fixed; right: 0; top: 0; bottom: 0; width: min(460px, 100vw); background: var(--panel); border-left: 1px solid var(--line); display: flex; flex-direction: column; z-index: 240; box-shadow: var(--shadow); } .aura-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--line); } .aura-title { font-family: var(--serif); font-size: 19px; } .aura-body { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; } .aura-msg { border-radius: var(--radius-sm); padding: 11px 13px; font-size: 13.5px; line-height: 1.55; } .aura-msg.me { background: var(--surface-2); border: 1px solid var(--line); align-self: flex-end; max-width: 90%; } .aura-msg.aura { background: transparent; border: 1px solid var(--line); color: var(--text-2); } .aura-msg.aura strong { color: var(--text); } .aura-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 18px 12px; } .aura-chips button { border: 1px solid var(--line); background: var(--surface-2); color: var(--text-3); border-radius: 999px; padding: 5px 11px; font-size: 12px; cursor: pointer; } .aura-chips button:hover { color: var(--text); border-color: var(--card-hover-line); } .aura-tools { font-size: 11.5px; color: var(--text-4); padding: 0 18px 10px; } .aura-form { display: flex; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--line); } .aura-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 8px; } .aura-table th, .aura-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line-soft); } .aura-table th { color: var(--text-4); font-weight: 500; } .aura-turn { font-size: 11.5px; color: var(--text-4); } /* ── auth (first run / sign in) ────────────────────────────────────────── */ .auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; } .auth-wrap .card { width: 100%; max-width: 420px; padding: 28px; } .auth-mark { font-size: 10px; letter-spacing: .2em; color: var(--gold); margin-bottom: 14px; } .auth-title { font-family: var(--serif); font-size: 30px; font-weight: 400; margin-bottom: 8px; } .auth-sub { color: var(--text-3); font-size: 13.5px; margin-bottom: 20px; } .auth-wrap form { display: flex; flex-direction: column; gap: 14px; } .auth-wrap .btn { width: 100%; } /* ── loading skeletons (the shell is on screen, content fills in) ─────── */ .skeleton { background: linear-gradient(90deg, var(--skeleton-a) 25%, var(--skeleton-b) 37%, var(--skeleton-a) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--radius-sm); } @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } .skeleton-title { height: 34px; width: 240px; margin-bottom: 6px; } .skeleton-card { height: 118px; border-radius: var(--radius); } .skeleton-row { height: 42px; } /* ── mobile ────────────────────────────────────────────────────────────── */ .tabbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--rail); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); } .tabbar .tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 0; font-size: 10.5px; letter-spacing: .04em; color: var(--text-4); background: none; border: 0; cursor: pointer; } .tabbar .tab .tab-icon { font-size: 15px; } .tabbar .tab.active { color: var(--gold-bright); } @media (max-width: 1500px) { .topbar-mode { display: none; } /* the environment chip is the first thing to go: with it present the eighth section label clips at 1440 */ } @media (max-width: 1119px) { .topnav { display: none; } /* the eight sections move into the #navToggle panel */ .nav-toggle { display: inline-flex; } .topbar-mark { display: inline-flex; } } @media (max-width: 1100px) { .cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ── contact manager: selection, bulk bar, tag chips ──────────────────────── */ .chip-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .chip-x { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 13px; line-height: 1; padding: 0 0 0 4px; opacity: .7; } .chip-x:hover { opacity: 1; } .bulk-bar { position: sticky; bottom: 14px; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 14px; background: var(--surface-2, #252525); border: 1px solid var(--line); border-radius: var(--radius, 10px); box-shadow: var(--shadow); } .bulk-bar .count { color: var(--text); font-weight: 600; } .row-check { width: 34px; } .row-check input { width: 15px; height: 15px; accent-color: var(--gold, #b49461); cursor: pointer; } tr.selected { background: var(--selected); } @media (max-width: 900px) { .cols-5, .cols-4, .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .view { padding: 18px 16px 96px; } .global-search { flex: 1 1 160px; min-width: 120px; } .list-inbox .list-head, .list-inbox .list-row { grid-template-columns: 120px minmax(120px, 1fr) 88px minmax(140px, 2fr); } .list-inbox .list-head > span:nth-child(4), .list-inbox .list-row > span:nth-child(4) { display: none; } } @media (max-width: 720px) { /* the rail stays: it is icon-only and 62px wide, so it never needs a drawer */ .nav-toggle { display: inline-flex; } .search-hint { display: none; } .cols-2, .cols-3, .cols-4, .cols-5, .form-grid { grid-template-columns: minmax(0, 1fr); } .tabbar { display: flex; } .page-head h1, .desk-title { font-size: 25px; } .metric .value { font-size: 28px; } .bar-row { grid-template-columns: 1fr; gap: 4px; } .list-inbox .list-head { display: none; } .list-inbox .list-row { grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 10px 6px; } .list-inbox .list-row > span:nth-child(4) { display: inline-flex; } .search-results { position: fixed; left: 8px; right: 8px; width: auto; max-width: none; top: 58px; } .pop-pay, .pop-sys, .pop-nav { position: fixed; left: 8px; right: 8px; width: auto; max-width: none; top: 58px; } } /* ── template builder: the document form beside the live sheet ──────────── */ /* The overlay sits above the shell (rail z-index 120, tabbar 60) but below the modal layer (250) and the toasts (300), so the send dialogue opens over the builder. */ .builder-backdrop { position: fixed; inset: 0; z-index: 190; background: var(--page); overflow-y: auto; overscroll-behavior: contain; } .builder { max-width: 1560px; margin: 0 auto; padding: 0 20px 40px; } .builder-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 0; margin-bottom: 18px; background: var(--page); border-bottom: 1px solid var(--line); } .builder-title { display: flex; flex-direction: column; gap: 2px; margin-right: 6px; min-width: 0; } .builder-title .eyebrow { margin-bottom: 0; } .builder-name { font-family: var(--serif); font-size: 19px; color: var(--text); } .builder-body { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 18px; align-items: start; } .builder-form { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .builder-aside { display: flex; flex-direction: column; gap: 10px; min-width: 0; position: sticky; top: 78px; align-self: start; } .builder-preview-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .builder-preview-title { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); } .builder-sheet { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .builder-frame { display: block; width: 100%; height: calc(100vh - 260px); min-height: 460px; border: 0; background: #fff; } .builder-frame.mobile { width: 420px; max-width: 100%; margin: 0 auto; } /* blocks */ .builder-add { max-width: 300px; } .block-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .block-card { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); overflow: hidden; } .block-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); } .block-card.collapsed .block-head { border-bottom: 0; } .block-toggle { flex: 1 1 160px; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0; background: none; border: 0; cursor: pointer; text-align: left; color: inherit; } .block-type { flex: 0 0 auto; font-size: 12.5px; color: var(--text); } .block-summary { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--text-4); } .block-actions { flex: 0 0 auto; } .block-body { display: flex; flex-direction: column; gap: 12px; padding: 12px; } .stack.tight { gap: 12px; } /* repeatable field editors (lines / rows) */ .lines-editor, .rows-editor { display: flex; flex-direction: column; gap: 8px; } .line-row { display: flex; align-items: center; gap: 6px; } .line-row input { flex: 1 1 auto; min-width: 0; } .row-item { display: flex; flex-direction: column; gap: 10px; padding: 10px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); } .row-item-head { display: flex; align-items: center; gap: 8px; } /* merge-field chips */ .merge-chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip-btn { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--text-3); font-size: 12px; cursor: pointer; } .chip-btn:hover { color: var(--text); border-color: var(--card-hover-line); } /* raw-HTML template editor (the HTML drop-in) */ .html-editor { width: 100%; min-height: 220px; resize: vertical; box-sizing: border-box; font-family: ui-monospace, 'Cascadia Code', Consolas, 'Courier New', monospace; font-size: 12.5px; line-height: 1.55; color: var(--text-2); background: var(--well); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; } .html-editor:focus { border-color: var(--input-focus-line); outline: none; } .html-visual { width: 100%; min-height: 220px; max-height: 60vh; overflow: auto; box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px; background: var(--well); color: var(--text-2); font-size: 13.5px; line-height: 1.5; } .html-visual h1, .html-visual h2, .html-visual h3, .html-visual h4 { color: var(--text); } .html-visual a { color: var(--gold); } .html-visual table { border-collapse: collapse; } .html-visual td, .html-visual th { border: 1px solid var(--line); padding: 6px 10px; } @media (max-width: 1100px) { .builder-body { grid-template-columns: minmax(0, 1fr); } .builder-aside { position: static; } .builder-frame { height: 70vh; } } @media (max-width: 720px) { .builder { padding: 0 14px 32px; } .builder-bar .btn { flex: 1 1 auto; } .builder-frame, .builder-frame.mobile { width: 100%; height: 62vh; min-height: 320px; } } /* ══ keyboard, density, palette and the phone pass (30 Sep 2026) ═════════════ Everything in this section is driven by public/lib/ui-enhance.js, which mounts itself and needs no edits to any other module. */ /* ── visible focus, everywhere ─────────────────────────────────────────────── Placed after the form styles on purpose: `input[type="text"] { outline: none }` ties on specificity with `input:focus-visible`, so source order decides, and the ring must win. A keyboard user can see where they are on every control. */ a:focus-visible, area:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible, [contenteditable]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* the search pill draws its ring on the wrapper, so the inner field must not double it */ .global-search:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-ring-soft); } .global-search input:focus-visible { outline: none; } /* skip straight to the page, for a keyboard */ .skip-link { position: fixed; left: 12px; top: -70px; z-index: 400; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--pill-active-bg); color: var(--pill-active-ink); border: 1px solid var(--line); font-size: 13.5px; box-shadow: var(--shadow); transition: top .12s ease; } .skip-link:focus { top: 10px; } /* ── the density control and the palette key hint, in the utility group ──── */ .tool.on { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); } .tool.tool-wide { width: auto; padding: 0 9px; gap: 6px; font-size: 12px; } .tool-key { font-size: 10px; letter-spacing: .06em; color: var(--text-4); border: 1px solid var(--line); background: var(--well); border-radius: 5px; padding: 1px 4px; } /* the two new controls fold down to their glyphs before the bar gets tight, so the eight sections and the real tools never lose room to them */ @media (max-width: 1500px) { .tool.tool-wide .small { display: none; } } @media (max-width: 1119px) { .tool-key { display: none; } } /* the skip link focuses the page itself; the scroll is the indicator, not a ring around every card at once */ #view:focus, #view:focus-visible { outline: none; } /* ── the command palette (⌘K / Ctrl-K) ──────────────────────────────────── Built entirely by ui-enhance.js: it lists the real destinations and the real actions the desk already has, and invents nothing. */ .palette-backdrop { position: fixed; inset: 0; z-index: 260; background: var(--scrim); backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; padding: 9vh 16px 16px; overflow-y: auto; } .palette { width: 100%; max-width: 620px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; max-height: 72vh; } .palette-input-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--text-4); } .palette-input-row input { border: 0; background: none; height: 30px; padding: 0; font-size: 15px; } .palette-input-row input:focus-visible { outline: none; } .palette-list { overflow-y: auto; padding: 6px; } .palette-group { padding: 9px 10px 4px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-4); } .palette-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; min-height: 40px; padding: 8px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-2); font-size: 13.5px; cursor: pointer; } .palette-item:hover { background: var(--nav-hover); color: var(--text); } .palette-item[aria-selected="true"] { background: var(--nav-hover); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); } .palette-item .nav-icon { color: var(--text-4); flex: 0 0 auto; } .palette-item .palette-note { margin-left: auto; font-size: 11.5px; color: var(--text-4); white-space: nowrap; } .palette-none { padding: 20px 14px; text-align: center; color: var(--text-3); font-size: 13.5px; } .palette-foot { display: flex; flex-wrap: wrap; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--line); background: var(--well); font-size: 11.5px; color: var(--text-4); } /* ── the shortcuts sheet (?) ─────────────────────────────────────────────── */ .keysheet-backdrop { position: fixed; inset: 0; z-index: 260; background: var(--scrim); backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; padding: 9vh 16px 16px; overflow-y: auto; } .keysheet { width: 100%; max-width: 560px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .keysheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); } .keysheet-head h2 { font-size: 18px; font-weight: 600; color: var(--text); } .keysheet-body { padding: 4px 16px 18px; max-height: 68vh; overflow-y: auto; } .keysheet-group { margin-top: 16px; } .keysheet-group h3 { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-4); margin-bottom: 6px; } .keysheet-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; color: var(--text-2); } .keysheet-row:last-child { border-bottom: 0; } .kbd { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; } .kbd kbd { font-family: var(--sans); font-size: 11px; line-height: 1; padding: 5px 7px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 6px; background: var(--well); color: var(--text-2); min-width: 22px; text-align: center; } .kbd .kbd-then { color: var(--text-4); font-size: 11px; } /* ── the mobile "More" panel: the same grouped rail, at a thumb's reach ───── */ .pop-group { padding: 9px 12px 3px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-4); } /* a table inside a modal scrolls with the backdrop, not the window: its sticky header would park in the wrong place, so it is a plain header there */ .modal-backdrop table.data thead th { position: static; } /* ── the phone pass (<720px): tables become cards, the rail folds away ───── Everything is still reachable: the eight sections are the top-bar toggle and the bottom tabs, and every rail destination — pipeline, stock, certificates, imports, the lot — is in the "More" tab's grouped panel and in ⌘K. */ @media (max-width: 720px) { .rail { display: none; } .table-wrap { border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; } table.data { display: block; } table.data thead { display: none; } table.data tbody { display: block; } table.data tbody tr { display: block; margin-bottom: 10px; padding: 4px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--card-shadow); } table.data tbody tr:last-child { margin-bottom: 0; } table.data tbody tr:hover { background: var(--surface); } table.data tbody td { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line-soft); } table.data tbody td:last-child { border-bottom: 0; } table.data tbody td::before { content: attr(data-label); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-4); } table.data tbody td[data-label=""]::before { content: none; } table.data tbody td[data-label=""] { grid-template-columns: minmax(0, 1fr); } table.data tbody td.num { text-align: left; } .palette-backdrop, .keysheet-backdrop { padding: 4vh 10px 10px; } .palette { max-height: 84vh; } .pagination { flex-wrap: wrap; } } /* ── appearance: the Settings panel, device insets and motion preferences ──── */ /* Setup → Appearance (public/lib/prefs.js builds it). The theme choice is on as data-theme, applied by the inline bootstrap before the first paint. */ .appearance-block { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; } .appearance-block .segmented { align-self: flex-start; } /* hug the choices, not the card */ .appearance-block .label { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-4); } .appearance-fonts { display: flex; flex-direction: column; gap: 6px; } .appearance-font { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; width: 100%; text-align: left; cursor: pointer; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2); } .appearance-font:hover { border-color: var(--card-hover-line); color: var(--text); } .appearance-font.active { border-color: var(--gold); color: var(--text); } .appearance-font-label { font-size: 13.5px; color: var(--text); } .appearance-font-sample { font-size: 13.5px; color: var(--text-2); } .appearance-font-note { margin-left: auto; } .appearance-font-on { color: var(--gold); letter-spacing: .1em; text-transform: uppercase; font-size: 10px; } /* viewport-fit=cover: keep the shell clear of a notch or a rounded corner. Written with max() so a device without insets keeps exactly the padding it had. */ @supports (padding: max(0px)) { .topbar { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); } @media (max-width: 900px) { .view { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); } } @media (max-width: 720px) { .rail { padding-top: max(12px, env(safe-area-inset-top)); } .builder { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); } } } /* A device that asks for less motion gets it: the theme change is instant either way, so nothing about the appearance settings depends on an animation. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } /* hold the boot hairline and the skeletons still rather than freezing a shimmer mid-slide */ #bootbar { animation: none !important; background: var(--gold); background-size: 100% 100%; } .skeleton { animation: none !important; background: var(--skeleton-a); } /* a still ring with a gold arc still reads as "working", a frozen spinner does not */ .spinner { animation: none !important; border-color: var(--line-strong); border-top-color: var(--gold); } }