/* James house design system v2 (Galley 2), see SPEC.md. Paste first; style through var() only. */
:root{color-scheme:light;
--bg-l:#EFF1F8;--bg-dk:#12141C;--surface:#FFF;--sunk-0:#EEF0F3;--line-0:#E1E4E9;--edge:#7B838F;--ink:#0D1117;--ink-2:#4A5260;
--good:#1A7437;--warn:#8A5700;--bad:#BF2530;
--c1:#2A5BD7;--c2:#D9622B;--c3:#13936A;--c4:#B98000;--c5:#C2528B;
--a-l:#2748C6;--a-d:#8FA8FF;--on-accent:var(--bg);
--serif:Charter,"Bitstream Charter","Sitka Text",Cambria,"Noto Serif",Georgia,serif;
--sans:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif;
--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
--t-xs:.75rem;--t-sm:.875rem;--t-md:1rem;--t-lg:1.25rem;--t-xl:1.5625rem;--t-2xl:1.9375rem;--t-3xl:clamp(2.25rem,1.7rem + 2.2vw,3.25rem);--t-hero:clamp(2.75rem,1.6rem + 4.4vw,4.75rem);
--lh:1.55;--measure:65ch;
--s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;--gutter:16px;--page:1200px;
--r-sm:6px;--r:10px;--r-card:16px;--r-pill:999px;
--shadow-card:0 1px 2px rgb(13 17 23/.05),0 10px 30px -12px rgb(13 17 23/.16);--shadow-pop:0 1px 2px rgb(13 17 23/.06),0 6px 20px rgb(13 17 23/.1);
--shadow-dialog:0 2px 6px rgb(13 17 23/.08),0 24px 64px rgb(13 17 23/.22);
--scrim:rgb(13 17 23/.48);
--ease:cubic-bezier(.2,.7,.2,1);--ease-flip:cubic-bezier(.6,0,.3,1);--dur-1:120ms;--dur-2:200ms;--dur-3:320ms;--dur-flip:480ms}
/* Roles, per [data-accent] scope */
:root,[data-accent]{--accent:var(--a-l);
--bg:var(--bg-l);--wash:color-mix(in oklab,var(--accent) 10%,var(--surface));
--hover:color-mix(in oklab,var(--accent) 84%,var(--ink));
--accent-line:color-mix(in oklab,var(--accent) 40%,var(--bg));
--sunk:color-mix(in oklab,var(--sunk-0) 95%,var(--accent));
--line:color-mix(in oklab,var(--line-0) 90%,var(--accent))}
/* Families: light fill, dark fill; --bg text on either clears 4.5:1 */
[data-accent=cobalt]{--a-l:#2748C6;--a-d:#8FA8FF;--bg-l:#EFF1F8;--bg-dk:#12141C}
[data-accent=pimento]{--a-l:#BE2A1F;--a-d:#FF8B7B;--bg-l:#F5F0F0;--bg-dk:#151318}
[data-accent=fern]{--a-l:#1D7443;--a-d:#5ACB8A;--bg-l:#EEF3F2;--bg-dk:#101618}
[data-accent=iris]{--a-l:#6B3FC2;--a-d:#B9A1FF;--bg-l:#F2F1F7;--bg-dk:#13141C}
[data-accent=ledger]{--a-l:#0A6E80;--a-d:#52C6D6;--bg-l:#EDF3F5;--bg-dk:#0F151B}
[data-accent=marigold]{--a-l:#9A5600;--a-d:#F5B83D;--bg-l:#F4F2EF;--bg-dk:#151515}
@media (prefers-color-scheme:dark){
:root:not([data-theme=light]){color-scheme:dark;--surface:#161A21;--sunk-0:#1E232C;--line-0:#2A303A;--edge:#6E7785;--ink:#EEF1F5;--ink-2:#AEB6C2;--good:#5DD286;--warn:#EDBE4F;--bad:#FF8080;--c1:#5B86F0;--c2:#E0703C;--c3:#22A77A;--c4:#B8880F;--c5:#D2649A;--scrim:rgb(4 5 8/.66);--shadow-card:0 1px 2px rgb(0 0 0/.3),0 10px 30px -12px rgb(0 0 0/.5)}
:root:not([data-theme=light]),:root:not([data-theme=light]) [data-accent]{--accent:var(--a-d);--bg:var(--bg-dk)}}
:root[data-theme=dark]{color-scheme:dark;--surface:#161A21;--sunk-0:#1E232C;--line-0:#2A303A;--edge:#6E7785;--ink:#EEF1F5;--ink-2:#AEB6C2;--good:#5DD286;--warn:#EDBE4F;--bad:#FF8080;--c1:#5B86F0;--c2:#E0703C;--c3:#22A77A;--c4:#B8880F;--c5:#D2649A;--scrim:rgb(4 5 8/.66);--shadow-card:0 1px 2px rgb(0 0 0/.3),0 10px 30px -12px rgb(0 0 0/.5)}
:root[data-theme=dark],:root[data-theme=dark] [data-accent]{--accent:var(--a-d);--bg:var(--bg-dk)}
@media (min-width:768px){:root{--gutter:32px}}
@media (prefers-reduced-motion:reduce){:root{--dur-1:0ms;--dur-2:0ms;--dur-3:0ms;--dur-flip:0ms}}
/* Base */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font:var(--t-md)/var(--lh) var(--sans)}
h1,h2,h3,h4{margin:0;font-family:var(--display,var(--sans));font-weight:var(--display-w,750);line-height:1.08;letter-spacing:-.025em;text-wrap:balance}
h1{font-size:var(--t-3xl);font-weight:var(--display-w1,800);line-height:1.02;letter-spacing:var(--display-track,-.035em)}h2{font-size:var(--t-2xl)}h3{font-size:var(--t-xl);letter-spacing:-.015em}h4{font-size:var(--t-lg);letter-spacing:-.01em}
:is(h1,h2) em{font-family:var(--serif);font-style:italic;font-weight:600;letter-spacing:-.01em;color:var(--accent)}
p{max-width:var(--measure)}
a{color:var(--accent);text-underline-offset:.2em}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.num{font-variant-numeric:tabular-nums lining-nums}
.kicker{display:inline-flex;align-items:center;gap:6px;width:fit-content;padding:5px 11px;border-radius:var(--r-pill);background:var(--wash);font:700 var(--t-xs)/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.wrap{max-width:var(--page);margin-inline:auto;padding-inline:var(--gutter)}
.grid{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.grid>*{min-width:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:46px;padding:0 var(--s-5);border:1px solid transparent;border-radius:var(--r);background:none;color:var(--ink);font:600 var(--t-sm)/1 var(--sans);cursor:pointer;text-decoration:none;transition:background-color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover:not(:disabled){background:var(--hover)}
.btn-secondary,.btn-delete{border-color:var(--edge)}
.btn:is(.btn-secondary,.btn-ghost):hover:not(:disabled){background:var(--sunk)}
.btn-ghost{color:var(--ink-2)}
.btn-delete{color:var(--bad)}
.btn-delete:hover:not(:disabled){border-color:var(--bad)}
dialog .btn-delete{background:var(--bad);border-color:var(--bad);color:var(--bg)}
.btn:disabled{opacity:.45;cursor:not-allowed}
label{font:600 var(--t-sm)/1.3 var(--sans)}
input:not([type=checkbox],[type=radio],[type=range]),select,textarea{width:100%;min-height:44px;padding:8px 12px;border:1px solid var(--edge);border-radius:var(--r);background:var(--surface);color:var(--ink);font:400 var(--t-md)/1.4 var(--sans)}
:is(input,select,textarea):focus-visible{outline-offset:-1px;border-color:var(--accent)}
[aria-invalid=true]{border-color:var(--bad)!important}
.error{color:var(--bad);font-size:var(--t-sm)}
input[type=checkbox],input[type=radio]{width:18px;height:18px;accent-color:var(--accent)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-card)}
.panel{background:var(--sunk);border-radius:var(--r-card);padding:var(--s-5)}
dialog:not([open]){display:none}
dialog[open]{width:min(440px,calc(100vw - 32px));padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-dialog)}
dialog::backdrop{background:var(--scrim)}
.toasts{position:fixed;inset:auto 0 0;display:grid;justify-items:center;gap:var(--s-2);padding:var(--s-4);pointer-events:none}
.toast{pointer-events:auto;padding:10px 16px;border-radius:var(--r);background:var(--ink);color:var(--bg);box-shadow:var(--shadow-pop)}
/* TOUCH FLOOR (Code QA row 15, 2026-10-03: 16/31 built apps had controls under 44 px on a phone -- 40 px pills/segmented buttons, 18-22 px checkboxes, short links, small selects).
   Phones and coarse pointers only (desktop density unchanged). A floor: min-height only ever RAISES a control, and !important keeps an app's own 40 px rule from lowering it. */
@media (pointer:coarse),(max-width:600px){
button,.btn,[role=button],[role=tab],select,summary,input:not([type=checkbox],[type=radio],[type=range],[type=hidden]){min-height:44px!important}
button,.btn,[role=button],[role=tab]{min-width:44px}
label:has(input[type=checkbox]),label:has(input[type=radio]){position:relative}
label:has(input[type=checkbox])::after,label:has(input[type=radio])::after{content:"";position:absolute;inset:-16px} /* the label (any depth) is the box's hit area -- a tap on it toggles; an empty pseudo-element 16 px larger on every side grows that area without touching padding or layout */
input[type=checkbox]:not(label *),input[type=radio]:not(label *){width:44px!important;height:44px!important;margin:0}
a:not(.btn,[role=button]):not(p *){padding-block:10px}
}

/* HOUSE PATCH 1 (TAO-1 templates 2026-10-05, CodeBlue's kit defects; JAMES_HOUSE_PATCH=on appends this to house v2, off = today's bytes) */
:root{--display:var(--sans)} /* css_tokens_defined: headings and app.css read var(--display); defined here so it is never undefined -- a theme / mood preset (warm: var(--serif)) loads after the house and overrides it */
@media (pointer:coarse),(max-width:600px){input:not([type=checkbox],[type=radio],[type=range],[type=hidden]),select,textarea{font-size:max(16px,1em)!important}} /* phone_input_zoom: iOS zooms the page on focus under 16 px; a floor that never lowers an app's larger size */
.c-pricing{margin-inline:auto;justify-content:center} /* the library pricing grid centred when a build caps its width (P209 R6 b08: max-width:761px left the cards against the left edge, 'unbalanced empty space'); full-width grids are unchanged */
@media (pointer:coarse),(max-width:600px){.hero-credit a,.sec-credit a{display:inline-block;min-width:44px;text-align:center}} /* photo credit links ('Pexels' was 34 px wide on a phone; the cards-v6 witness) */