/* AMII shared design system — single source of truth for tokens + base components. Extracted from the hand-rolled per-template styles (capture.html was the fullest set). Page-specific CSS still lives in each template's {% block styles %}; put anything reused by 2+ templates HERE so it never drifts again. */ :root { /* LIGHT IS THE STANDARD VIEW. The app no longer auto-follows the OS into dark; light is what opens, on every page, regardless of system setting. color-scheme:light keeps native controls (scrollbars, date pickers) light too. Dark is OPT-IN — see the :root[data-theme="dark"] block below. */ color-scheme: light; --bg: #f5f3ef; --surface: #fffdfa; --surface-2: #efece6; --border: #e3ded5; --border-strong: #cfc7ba; --text: #1f1b16; --text-muted: #6b6157; --text-faint: #a49b8d; --accent: #c2410c; --accent-hover: #9a3412; --accent-bg: #fdece4; /* Text colour that sits ON the accent fill (primary buttons). White on the LIGHT accent #c2410c is 5.18:1 (AA). It is NOT reused in dark mode: white on the lighter dark accent #f97316 is only 2.80:1 (fails AA), so the dark override below flips this to dark ink. */ --accent-contrast-text: #fff; /* Status palette (badges, tags) — the fullest set, hoisted from history.html */ --amber-bg: #fdf0d5; --amber-text: #8a5a00; --green-bg: #e6f4ea; --green-text: #1a7431; --red-bg: #fae9e6; --red-text: #a3341a; --purple-bg: #f0e9fb; --purple-text: #6d3aed; /* --gray-text darkened #7a7268 → #6a6157: the old value was 4.02:1 on --gray-bg, below AA. The "not offered" signoff is now a prominent thesis pill (Visual World), so its tone is clamped to AA like every reachable style — 5.15:1 on --gray-bg, and ≥5.4:1 on --bg/--surface. (Unit 5's rule: fix the token, never ship a below-AA pairing with a passive warning.) */ --gray-bg: #efece6; --gray-text: #6a6157; --radius-sm: 8px; --radius: 12px; --radius-lg: 14px; /* DOCUMENT/RECORD visual world (the dashboard's "working face of the evidence document"). --slate is the report's structural spine (section rules/bands); --band-bg / --zebra tint the ledger; --mono is the evidence chain's own voice (hashes, refs, timestamps, filenames, the stat line, breadcrumbs). None of these carry meaning without a word beside them. */ --slate: #33404d; --band-bg: #eef1f4; --zebra: #f7f8fa; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --text-xs: 12px; --text-sm: 13px; --text-base: 15px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --shadow-sm: 0 1px 2px rgba(31,27,22,0.04); --shadow: 0 4px 16px rgba(31,27,22,0.10); --shadow-lg: 0 12px 32px rgba(31,27,22,0.10); --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --dur: 160ms; } /* DARK MODE — OPT-IN, not automatic. Applies ONLY when something sets ; it no longer fires from @media (prefers-color-scheme: dark), so an OS in dark mode still opens this app in LIGHT. The dark tokens (and the --accent-contrast-text dark-ink fix) are preserved here for whenever a dark toggle is wanted — nothing is thrown away, it is just no longer the default. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #1a1714; --surface: #221e1a; --surface-2: #2a2521; --border: #332d27; --border-strong: #443c34; --text: #f0ebe3; --text-muted: #b3a89b; --text-faint: #7d746a; --accent: #f97316; --accent-hover: #fb8b3c; --accent-bg: #3a2416; /* DARK INK on the dark accent: var(--bg) #1a1714 on #f97316 = 6.37:1 (AA/AAA), versus white's failing 2.80:1. WCAG AA for normal text is 4.5:1. */ --accent-contrast-text: var(--bg); /* Dark structural accent + ledger tints: a light slate reads on the dark ground; the band and zebra sit a step off --surface so the ruled document rhythm survives the dark theme. */ --slate: #9aa7b4; --band-bg: #26303a; --zebra: #201c19; --amber-bg: #38290f; --amber-text: #edbd6a; /* Paired -bg/-text so every badge stays legible on dark, not dark-on-dark (values from index.html's considered dark treatment). */ --green-bg: #16311f; --green-text: #6fdc9b; --red-bg: #3a1d18; --red-text: #f0a595; --purple-bg: #241a3a; --purple-text: #bfa8f2; --gray-bg: #2b2621; --gray-text: #b3a89b; --shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --shadow: 0 4px 16px rgba(0,0,0,0.36); --shadow-lg: 0 12px 32px rgba(0,0,0,0.5); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); /* Led by "Avenir Next" (a workhorse face with character, off the monoculture list), the same split the report is set in, so the dashboard and the document it produces read as one system; graceful system fallback everywhere the face is absent. Mono is reserved for the evidence voice. */ font-family: "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; font-size: var(--text-base); -webkit-font-smoothing: antialiased; } /* Layout */ .wrap { max-width: 640px; margin: 0 auto; padding: var(--space-4); } .center { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-4); } /* Typography */ h1 { font-size: var(--text-lg); font-weight: 650; letter-spacing: -0.02em; margin: var(--space-2) 0 var(--space-1); } .sub { color: var(--text-muted); font-size: var(--text-sm); margin: 0 0 var(--space-4); } a.back { color: var(--accent); text-decoration: none; font-size: var(--text-sm); } a.back:hover { text-decoration: underline; } /* Surfaces */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-5); } /* NOTE: no shared `.btn` or bare input/select rule on purpose. `.btn` already exists in capture.html / review_cards.html meaning a bordered auto-width control; a shared `width:100%` accent `.btn` would collide with it, and a global input rule bled `width:100%` into every control in the larger templates. Style buttons/inputs per-template; the shared layer is tokens + layout + .card + callouts. */ /* ── PLATFORM RULES (learned the hard way; keep them so they outlive us) ─────────────── 1. TEXT ON THE ACCENT FILL uses var(--accent-contrast-text), never a hardcoded #fff. White passes on the LIGHT accent (5.18:1) but FAILS on the lighter dark accent (#f97316 = 2.80:1). The token flips to dark ink in dark mode; a raw #fff reintroduces the AA failure. --text-faint is DECORATIVE ONLY (2.48:1 on the light bg): anything a user must READ — timestamps, hashes, tokens, filenames — uses --text-muted. 2. GRADIENTS are CHROME ONLY — headers, empty states, the login card. NEVER on an evidence surface (photo cards, /report, /compare, anything printable). A gradient's contrast varies per pixel, so automated checkers miss the failing point, and a gradient on an evidence record reads as "spin". Text over a gradient needs a solid or semi-opaque scrim behind it. 3. RED vs GREEN must ALWAYS carry a second channel — a word, a count, an icon. ~8% of men read nothing from the red/green hue pair alone. The status badges already show counts; this rule exists so nobody "simplifies" that away. */ /* Callouts */ .note { background: var(--amber-bg); color: var(--amber-text); border: 1px solid currentColor; border-radius: var(--radius-sm); padding: 10px var(--space-3); font-size: var(--text-xs); line-height: 1.45; } .err { color: var(--accent); font-size: var(--text-sm); } /* Callout — ONE component for every page-level inline banner/notice (legal holds, unclassifiable files, dispute-window notices, files outside the tenancy model). A tinted surface + a 1px hairline FULL border in the tone — NEVER a thick colored side border, which is the AI-UI "side-tab" tell. Severity is carried by the tone AND the banner's own words; colour is never the only signal (platform rule 3). Positioning/animation stay OUT of here so the fixed toast can borrow the tone without inheriting a layout. Secondary text is tinted from the tone, never gray, and never dimmed with opacity (the Unit-1 amber-on-amber lesson). */ .callout { --callout-bg: var(--surface-2); --callout-fg: var(--text); --callout-bd: var(--border-strong); background: var(--callout-bg); color: var(--callout-fg); border: 1px solid var(--callout-bd); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); line-height: 1.5; margin: 0 0 var(--space-4); } .callout--info { --callout-bg: var(--surface-2); --callout-fg: var(--text); --callout-bd: var(--border-strong); } .callout--warn { --callout-bg: var(--amber-bg); --callout-fg: var(--amber-text); --callout-bd: var(--amber-text); } .callout--error { --callout-bg: var(--red-bg); --callout-fg: var(--red-text); --callout-bd: var(--red-text); } .callout--success { --callout-bg: var(--green-bg); --callout-fg: var(--green-text); --callout-bd: var(--green-text); } .callout a { color: inherit; font-weight: 650; } .callout strong { font-weight: 700; } .callout .callout-sub { display: block; margin-top: var(--space-1); font-size: var(--text-xs); } .callout .callout-sub.mono { font-family: ui-monospace, monospace; word-break: break-all; } /* Move-out proximity flag — a warn-tone callout with its own name because it appears on BOTH the property header and every portfolio card. Defined ONCE here (was duplicated verbatim in index.html and portfolio.html). A fact about timing surfaced early, never a verdict. */ .moveout-flag { background: var(--amber-bg); color: var(--amber-text); border: 1px solid currentColor; border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); line-height: 1.45; margin: var(--space-3) 0 var(--space-4); } .moveout-flag a { color: inherit; font-weight: 650; text-decoration: underline; } /* Sub-note under the flag. NO opacity (amber-on-amber at .85 fell below AA — Unit 1). */ .moveout-flag .moveout-sub { display: block; margin-top: var(--space-1); font-size: 11px; } /* ── Landlord navigation (LANDLORD pages only; tenant pages never include _nav.html). Shared chrome, so it lives here rather than drifting across five templates. It is layout + tokens only - no bare button/input rule, no .btn. The active state is a quiet accent underline, never a filled pill: this is a wayfinder, not a call to action. */ .appnav { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--border); } .appnav-in { /* The nav's content edge is aligned to the 900px document measure the property and portfolio pages use, so the standing header, the thesis and the queue all sit on one column edge (kills the old 640/900/1100 drift). */ max-width: 900px; margin: 0 auto; padding: 0 var(--space-4); display: flex; align-items: center; gap: var(--space-4); min-height: 52px; flex-wrap: wrap; } .appnav .brand { font-weight: 700; letter-spacing: -0.03em; font-size: var(--text-lg); color: var(--text); text-decoration: none; flex: 0 0 auto; } .appnav .brand:hover { color: var(--accent); } .appnav nav { display: flex; gap: var(--space-1); align-items: center; overflow-x: auto; } .appnav nav a { color: var(--text-muted); text-decoration: none; font-size: var(--text-sm); font-weight: 550; padding: 6px 2px; white-space: nowrap; border-bottom: 2px solid transparent; margin: 0 var(--space-2); } .appnav nav a:hover { color: var(--text); } .appnav nav a.active { color: var(--text); border-bottom-color: var(--accent); } .appnav .ctx { margin-left: auto; display: flex; align-items: center; gap: var(--space-4); flex: 0 0 auto; } .appnav .ctx .prop { color: var(--text-muted); font-size: var(--text-sm); } .appnav .ctx form { margin: 0; } .appnav .ctx .signout, .appnav .ctx .ctx-link { background: none; border: 0; color: var(--text-muted); cursor: pointer; font-size: var(--text-sm); text-decoration: underline; padding: 0; font-family: inherit; } .appnav .ctx .signout:hover, .appnav .ctx .ctx-link:hover { color: var(--accent); } @media (max-width: 560px) { .appnav .ctx .prop { display: none; } /* the property name is repeated in the page head */ } /* The report's SPINE as a document device: a slate double rule (a 2px slate line, then a 1px line 2px below it). Shared by the property page and the portfolio so both read as the working face of the evidence document. Never a side tab — it is a full-width horizontal rule. */ .spine { border: 0; border-top: 2px solid var(--slate); margin: 0; } .spine + .spine { border-top-width: 1px; margin-top: 2px; } /* Consistent page header: an h1 and one muted subtitle, same place and scale on every page. Half the pages had this and half did not. */ .page-head { margin: 0 0 var(--space-5); } .page-head h1 { font-size: var(--text-xl); font-weight: 650; letter-spacing: -0.02em; margin: 0; } .page-head .sub { display: block; color: var(--text-muted); font-size: var(--text-sm); margin-top: var(--space-1); } /* Designed empty state: one sentence, one optional action, no icon. Every list/grid that can be empty uses this instead of a bare "nothing here". */ .empty-state { border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: var(--space-6) var(--space-4); text-align: center; color: var(--text-muted); font-size: var(--text-sm); line-height: 1.5; } .empty-state strong { display: block; color: var(--text); font-size: var(--text-base); font-weight: 600; margin-bottom: var(--space-1); } .empty-state a { color: var(--accent); } /* Honour a reduced-motion preference across EVERY page that loads app.css (was defined only in index.html, so portfolio and the tenant pages animated regardless). The old rule here nulled a backdrop-filter the .appnav no longer sets — a no-op; this is the real one. */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }