/* Legal Watchtower — "Chambers" design system: ink-navy console, warm paper documents,
rubber stamps, index cards, manila folders, LED indicators and a wax validation seal. */
:root { color-scheme: light;
--ink:#16222e; --ink-2:#34475a; --muted:#526170; --faint:#596977;
--desk:#e9e6df; --desk-2:#dfdbd2; --card:#ffffff; --paper:#fdfbf6; --paper-2:#f7f3e9; --paper-line:#e8e0cf;
--line:#e2ddd3; --line-2:#cfc8ba;
--navy:#0e1b29; --navy-2:#15283b; --navy-3:#1d3550;
--accent:#1b55ac; --accent-2:#5aa2f0; --brass:#725319; --brass-2:#d7b46a;
--red:#b3263c; --red-ink:#a3192f; --amber:#8a5300; --green:#1d7a45; --teal:#0f8a7a; --violet:#6247c4;
--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
--sans:Inter,"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
--serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
--shadow-1:0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(40,30,10,.06), 0 4px 14px -6px rgba(40,30,10,.10);
--shadow-paper:0 1px 1px rgba(60,45,20,.08), 0 10px 30px -12px rgba(60,45,20,.28), 0 2px 6px -2px rgba(60,45,20,.10);
--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.3 0 0 0 0 0.2 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
* { box-sizing:border-box; } html,body { margin:0; color:var(--ink); font:15.5px/1.6 var(--sans); -webkit-font-smoothing:antialiased; }
body { background:var(--desk) var(--grain); } a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; text-underline-offset:2px; }
code { font:.84em var(--mono); background:#efece4; padding:.08em .38em; border-radius:4px; color:var(--ink-2); border:1px solid #e3ded2; } h1 { font:700 2.05rem/1.15 var(--sans); letter-spacing:-.025em; margin:.15rem 0 .45rem; }
h2 { font:650 1.12rem/1.3 var(--sans); margin:0 0 .7rem; letter-spacing:-.01em; } h3 { font:700 .72rem/1.3 var(--sans); margin:1.3rem 0 .5rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); }
p { margin:.35rem 0; } ul,ol { padding-left:1.25rem; } li { margin:.25rem 0; } .muted { color:var(--muted); } .faint { color:var(--faint); } .small { font-size:.82rem; } .mono { font-family:var(--mono); } .serif { font-family:var(--serif); }
.num { font-family:var(--mono); text-align:right; white-space:nowrap; }
/* ---------- Shell ---------- */
.shell { display:grid; grid-template-columns:262px minmax(0,1fr); min-height:100vh; } .sidebar { background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 60%,#122436 100%); color:#cfdbe7; padding:1.2rem .9rem; position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:1rem; box-shadow:inset -1px 0 0 rgba(255,255,255,.05), 4px 0 18px rgba(0,0,0,.18); overflow-y:auto; }
.sidebar::before { content:""; position:absolute; inset:0; background:var(--grain); opacity:.6; pointer-events:none; } .brand { display:flex; gap:.75rem; align-items:center; color:white; padding:.35rem .45rem .9rem; border-bottom:1px solid rgba(255,255,255,.08); position:relative; }
.brand:hover { text-decoration:none; }
.brand-mark { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; font-size:1.15rem; color:#1a1406;
background:radial-gradient(circle at 30% 25%,#f3dca0,var(--brass-2) 45%,var(--brass) 100%); box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 -2px 0 rgba(0,0,0,.25) inset, 0 3px 8px rgba(0,0,0,.4); }
.brand strong { display:block; font-size:1.02rem; letter-spacing:.01em; } .brand small { display:block; color:#8ea5bb; font-size:.72rem; letter-spacing:.04em; } .sidebar nav { display:flex; flex-direction:column; gap:.12rem; position:relative; }
.sidebar nav a { display:flex; align-items:center; gap:.7rem; color:#bfcfde; padding:.52rem .7rem; border-radius:9px; font-size:.91rem; } .sidebar nav a .ico { width:18px; text-align:center; opacity:.75; font-size:.95rem; }
.sidebar nav a .count { margin-left:auto; background:var(--red); color:white; font:700 .68rem/1 var(--sans); padding:.22rem .45rem; border-radius:999px; box-shadow:0 1px 0 rgba(255,255,255,.25) inset; } .sidebar nav a:hover { background:rgba(255,255,255,.06); text-decoration:none; color:white; }
.sidebar nav a.active { background:linear-gradient(180deg,rgba(90,162,240,.24),rgba(90,162,240,.12)); color:white; box-shadow:inset 3px 0 0 var(--accent-2), 0 1px 0 rgba(255,255,255,.05) inset; } .nav-group { color:#7890a7; font-size:.66rem; text-transform:uppercase; letter-spacing:.16em; padding:1rem .7rem .3rem; }
.sidebar-foot { margin-top:auto; position:relative; background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:.75rem .8rem; display:flex; flex-direction:column; gap:.45rem; font-size:.74rem; color:#a8bccf; box-shadow:inset 0 2px 6px rgba(0,0,0,.35); } .sidebar-foot .label { font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:#7890a7; }
.pipeline-pill { display:flex; gap:.55rem; align-items:center; } .identity { margin-top:.2rem; padding-top:.45rem; border-top:1px solid rgba(255,255,255,.07); overflow-wrap:anywhere; color:#7890a7; }
/* LEDs */
.led { width:9px; height:9px; border-radius:50%; flex:none; display:inline-block; vertical-align:middle;
background:radial-gradient(circle at 35% 30%,#ffffff 0 12%,#8a99a8 40%,#56626e 100%); box-shadow:0 0 0 1px rgba(0,0,0,.25); }
.led.on { background:radial-gradient(circle at 35% 30%,#eafff4 0 12%,#3ee08f 40%,#139a57 100%); box-shadow:0 0 0 1px rgba(0,0,0,.2), 0 0 8px rgba(62,224,143,.75); animation:pulse 2.4s ease-in-out infinite; } .led.amber { background:radial-gradient(circle at 35% 30%,#fff7e2 0 12%,#ffbe3b 40%,#c27c00 100%); box-shadow:0 0 0 1px rgba(0,0,0,.2), 0 0 7px rgba(255,190,59,.7); }
.led.red { background:radial-gradient(circle at 35% 30%,#ffe9ec 0 12%,#ff5a72 40%,#b3263c 100%); box-shadow:0 0 0 1px rgba(0,0,0,.2), 0 0 7px rgba(255,90,114,.7); } .led.off { opacity:.55; }
@keyframes pulse { 0%,100% { filter:brightness(1);} 50% { filter:brightness(1.25);} }
/* ---------- Content frame ---------- */
.content { padding:0 2.4rem 4rem; min-width:0; }
.topbar { display:flex; align-items:center; gap:1rem; padding:1rem 0; margin-bottom:1.2rem; border-bottom:1px solid var(--line-2); position:sticky; top:0; z-index:5;
background:linear-gradient(180deg,rgba(233,230,223,.97),rgba(233,230,223,.9)); backdrop-filter:blur(6px); }
.crumbs { font-size:.82rem; color:var(--muted); display:flex; gap:.45rem; align-items:center; flex-wrap:wrap; min-width:0; } .crumbs a { color:var(--ink-2); } .crumbs .sep { color:var(--faint); }
.topsearch { margin-left:auto; display:flex; align-items:center; gap:.4rem; background:white; border:1px solid var(--line-2); border-radius:999px; padding:.25rem .3rem .25rem .9rem; box-shadow:inset 0 1px 2px rgba(0,0,0,.06); width:min(360px,40vw); } .topsearch input { border:0; outline:0; background:transparent; font:inherit; font-size:.86rem; flex:1; min-width:0; padding:.25rem 0; }
.topsearch button { border:0; background:var(--navy-3); color:white; border-radius:999px; padding:.35rem .8rem; font:600 .78rem var(--sans); cursor:pointer; } .status-chip { display:flex; align-items:center; gap:.45rem; font-size:.76rem; color:var(--ink-2); background:white; border:1px solid var(--line-2); border-radius:999px; padding:.3rem .7rem; white-space:nowrap; box-shadow:var(--shadow-1); }
.wrap { max-width:1480px; }
.page-head { display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:1.1rem; } .eyebrow { color:var(--brass); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; }
.lede { color:var(--ink-2); max-width:72ch; font-size:1rem; } .howto { display:flex; gap:.9rem; align-items:flex-start; background:linear-gradient(180deg,#fffdf6,#fbf6e8); border:1px solid #eadfc4; border-left:4px solid var(--brass-2); border-radius:10px; padding:.75rem 1rem; margin:0 0 1.3rem; font-size:.88rem; color:var(--ink-2); box-shadow:var(--shadow-1); }
.howto .ico { font-size:1.1rem; line-height:1.4; color:var(--brass); } .howto b { color:var(--ink); }
.howto ul { margin:.2rem 0 0; padding-left:1.1rem; } .howto li { margin:.1rem 0; }
/* ---------- Surfaces ---------- */
.grid { display:grid; gap:1.1rem; } .g2 { grid-template-columns:repeat(2,minmax(0,1fr));} .g3 { grid-template-columns:repeat(3,minmax(0,1fr));} .g4 { grid-template-columns:repeat(4,minmax(0,1fr));} .g6 { grid-template-columns:repeat(6,minmax(0,1fr));} .two { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:1.2rem; align-items:start; }
.two.wide-right { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); } .card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.15rem 1.3rem; box-shadow:var(--shadow-1); }
.card.flush { padding:0; overflow:hidden; overflow-x:auto; } .card > h2, .card-head { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.card h2 a, .card-head a { font-size:.8rem; font-weight:600; } .card-head { padding:1rem 1.3rem .7rem; border-bottom:1px solid var(--line); background:linear-gradient(180deg,#fff,#faf8f3); }
.card-head h2 { margin:0; } .section-num { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--navy-3); color:white; font:700 .74rem var(--sans); margin-right:.5rem; vertical-align:2px; box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 1px 2px rgba(0,0,0,.25); }
/* Paper documents (legal text, proposals) */
.paper { background:var(--paper) var(--grain); border:1px solid #e9e1cf; border-radius:4px; box-shadow:var(--shadow-paper); padding:2.2rem 2.6rem; position:relative; }
.paper.ruled { background:
linear-gradient(90deg,transparent 3.4rem,rgba(196,72,72,.28) 3.4rem,rgba(196,72,72,.28) calc(3.4rem + 1px),transparent calc(3.4rem + 1px)),
var(--paper) var(--grain); padding-left:4.4rem; }
.paper::after { content:""; position:absolute; right:-1px; bottom:-1px; width:26px; height:26px; background:linear-gradient(135deg,transparent 50%,#efe7d3 50%,#e4dac2 100%); border-top-left-radius:4px; box-shadow:-2px -2px 4px rgba(60,45,20,.08); } .paper-stack { position:relative; }
.paper-stack::before, .paper-stack::after { content:""; position:absolute; inset:6px -4px -6px 4px; background:#f6f1e4; border:1px solid #e6dcc6; border-radius:4px; z-index:-1; box-shadow:0 6px 18px -10px rgba(60,45,20,.3); } .paper-stack::after { inset:12px -8px -12px 8px; background:#f1eadb; z-index:-2; }
/* KPI tiles — embossed */
.kpi { background:linear-gradient(180deg,#ffffff,#f7f5f0); border:1px solid var(--line); border-radius:14px; padding:1rem 1.05rem .9rem; display:flex; flex-direction:column; box-shadow:var(--shadow-1); position:relative; overflow:hidden; } .kpi::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--line-2); }
.kpi.hot::before { background:var(--red);} .kpi.ok::before { background:var(--green);} .kpi.info::before { background:var(--accent);} .kpi.brass::before { background:var(--brass-2);} .kpi-value { font:700 1.85rem/1.05 var(--sans); letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.kpi-label { color:var(--ink-2); font-size:.8rem; font-weight:600; margin-top:.35rem; } .kpi-sub { color:var(--muted); font-size:.72rem; margin-top:.1rem; }
.kpi.hot .kpi-value { color:var(--red);} .kpi.ok .kpi-value { color:var(--green);} .kpi.info .kpi-value { color:var(--accent);}
/* Pipeline strip */
.pipeline { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:0; background:linear-gradient(180deg,#1a2c40,#13222f); border-radius:14px; padding:.8rem .6rem; box-shadow:inset 0 2px 8px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5); margin-bottom:1.2rem; } .pipeline .stage { display:flex; flex-direction:column; align-items:center; gap:.3rem; color:#c9d7e4; font-size:.72rem; text-align:center; position:relative; padding:0 .3rem; }
.pipeline .stage + .stage::before { content:""; position:absolute; left:-50%; right:50%; top:4px; height:2px; background:linear-gradient(90deg,#2b7a55,#3ee08f); opacity:.6; } .pipeline details summary { color:#c9d7e4; } .pipeline .stage b { color:white; font-weight:600; font-size:.76rem; } .pipeline .stage span { color:#8aa1b7; }
/* Badges, stamps, tags */
.badge { display:inline-block; border-radius:999px; padding:.12rem .62rem; font-size:.7rem; font-weight:700; letter-spacing:.06em; border:1px solid transparent; vertical-align:middle; white-space:nowrap; } .level-alert { background:#fbe6ea; color:var(--red); border-color:#f2bdc7; } .level-notice { background:#fff2d9; color:var(--amber); border-color:#f1d397; } .level-info { background:#e7f0ff; color:var(--accent); border-color:#c6dafd; }
.stamp { display:inline-block; font:800 .78rem/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; padding:.38rem .6rem .34rem; border:2.5px solid currentColor; border-radius:5px; transform:rotate(-4deg); position:relative; opacity:1;
-webkit-mask-image:none; }
.stamp::after { content:""; position:absolute; inset:2px; border:1px solid currentColor; border-radius:3px; opacity:.55; } .stamp.alert { color:var(--red-ink); } .stamp.notice { color:#865000; } .stamp.info { color:var(--accent); }
.stamp.big { font-size:1.05rem; padding:.5rem .85rem .45rem; } .cov-full { background:#e2f4ea; color:var(--green); border-color:#b9e2c9;} .cov-partial { background:#fff2d9; color:var(--amber); border-color:#f1d397;} .cov-gap { background:#fbe6ea; color:var(--red); border-color:#f2bdc7;}
.tag { display:inline-block; background:#f1eee6; color:var(--ink-2); border:1px solid #e3ddcf; border-radius:6px; padding:.06rem .48rem; font:.7rem/1.5 var(--mono); margin:.12rem .22rem .12rem 0; } .tag.kind { background:#e9f1fe; color:var(--accent); border-color:#cfe0fb; font-family:var(--sans); font-weight:600; }
.tag.brass { background:#f8f0dc; color:#7d5f22; border-color:#ead9ae; font-family:var(--sans); font-weight:600; } .pill-row { display:flex; flex-wrap:wrap; gap:.3rem; }
/* Score dial */
.dial { --v:0; width:58px; height:58px; border-radius:50%; display:grid; place-items:center; position:relative; flex:none;
background:conic-gradient(var(--dial-c,var(--accent)) calc(var(--v)*1%),#e8e3d8 0); box-shadow:inset 0 1px 3px rgba(0,0,0,.15), 0 1px 0 #fff; }
.dial::before { content:""; position:absolute; inset:6px; border-radius:50%; background:linear-gradient(180deg,#fff,#f4f1ea); box-shadow:0 1px 2px rgba(0,0,0,.12); } .dial b { position:relative; font:700 1rem/1 var(--mono); } .dial small { position:absolute; bottom:9px; font-size:.5rem; color:var(--muted); letter-spacing:.06em; }
.dial.hot { --dial-c:var(--red);} .dial.warm { --dial-c:#d48a00;} .dial.big { width:84px; height:84px; } .dial.big b { font-size:1.45rem; } .dial.big::before { inset:8px; } .dial.big small { bottom:14px; font-size:.58rem; }
.score { font:700 1.05rem var(--mono); } .score small { color:var(--muted); font-weight:400; font-size:.7rem; } .score.hot { color:var(--red);} .score.warm { color:var(--amber);}
/* Vertical heat bar */
.heat { display:inline-flex; gap:3px; padding:3px; background:#efebe2; border-radius:7px; box-shadow:inset 0 1px 2px rgba(0,0,0,.08); } .heat .cell { width:30px; height:22px; font:600 .6rem/22px var(--mono); text-align:center; border-radius:4px; color:#526170; background:#f9f7f2; text-transform:uppercase; }
.heat.compact .cell { width:24px; height:17px; font-size:.54rem; line-height:17px; } .heat .v1 { background:#dbe7f6; color:#2e4b66;} .heat .v2 { background:#86b0e4; color:#0c2a48;} .heat .v3 { background:linear-gradient(180deg,#2b6fc5,#1b56a3); color:white; box-shadow:0 1px 0 rgba(255,255,255,.25) inset; }
.heat-legend { display:flex; gap:1rem; flex-wrap:wrap; align-items:center; font-size:.74rem; color:var(--muted); } .heat-legend i { display:inline-block; width:14px; height:12px; border-radius:3px; vertical-align:-1px; margin-right:.3rem; }
.meter-row { display:grid; grid-template-columns:minmax(0,170px) 1fr 22px; gap:.7rem; align-items:center; font-size:.82rem; padding:.12rem 0; } .meter { height:9px; background:#ebe6dc; border-radius:999px; overflow:hidden; box-shadow:inset 0 1px 2px rgba(0,0,0,.12); }
.meter i { display:block; height:100%; background:linear-gradient(180deg,#5aa2f0,#1f5fbf); border-radius:999px; box-shadow:0 1px 0 rgba(255,255,255,.35) inset; } .meter-row b { font-family:var(--mono); text-align:right; }
/* Tables */
table { border-collapse:collapse; width:100%; font-size:.88rem; } th { text-align:left; font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); padding:.65rem .8rem; border-bottom:1px solid var(--line-2); background:#faf8f3; white-space:nowrap; }
td { padding:.7rem .8rem; border-bottom:1px solid var(--line); vertical-align:top; } tr:last-child td { border-bottom:0; } tbody tr:hover td { background:#fbfaf6; }
dl.facts { display:grid; grid-template-columns:max-content 1fr; gap:.35rem 1rem; font-size:.84rem; margin:0; } dl.facts dt { color:var(--muted); } dl.facts dd { margin:0; overflow-wrap:anywhere; }
/* Filter chips */
.filters { display:flex; gap:.45rem; align-items:center; flex-wrap:wrap; margin-bottom:.8rem; } .filters .label { font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; margin-right:.2rem; }
.filters a { padding:.28rem .8rem; border-radius:999px; border:1px solid var(--line-2); font-size:.8rem; color:var(--ink-2); background:linear-gradient(180deg,#fff,#f6f3ec); box-shadow:0 1px 0 #fff inset, 0 1px 2px rgba(0,0,0,.05); } .filters a:hover { text-decoration:none; border-color:var(--faint); }
.filters a.on { background:linear-gradient(180deg,var(--navy-3),var(--navy-2)); color:white; border-color:var(--navy); box-shadow:inset 0 1px 3px rgba(0,0,0,.35); }
/* Alert index cards */
.alert-list { display:flex; flex-direction:column; gap:.75rem; } .alert-card { display:grid; grid-template-columns:118px minmax(0,1fr) auto; gap:1.2rem; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1rem 1.25rem; box-shadow:var(--shadow-1); color:inherit; position:relative; transition:transform .12s, box-shadow .12s; }
.alert-card:hover { text-decoration:none; transform:translateY(-1px); box-shadow:0 1px 0 #fff inset, 0 10px 24px -12px rgba(40,30,10,.3); } .alert-card.lvl-alert { border-left:5px solid var(--red); } .alert-card.lvl-notice { border-left:5px solid #d48a00; }
.alert-card .when { font:.74rem var(--mono); color:var(--muted); margin-top:.55rem; } .alert-title { font-weight:700; font-size:1.02rem; line-height:1.35; }
.alert-meta { color:var(--muted); font-size:.78rem; margin-top:.2rem; } .alert-why { font-size:.87rem; color:var(--ink-2); margin-top:.45rem; }
.alert-why b { color:var(--ink); } .alert-side { display:flex; flex-direction:column; align-items:flex-end; gap:.5rem; }
.alert-row { display:grid; grid-template-columns:96px minmax(0,1fr); gap:.9rem; align-items:start; padding:.85rem 1.3rem; border-bottom:1px solid var(--line); color:inherit; } .alert-row:hover { background:#fbfaf6; text-decoration:none; } .alert-row:last-child { border-bottom:0; }
/* Legal text */
.quote { border-left:3px solid var(--brass-2); background:linear-gradient(90deg,#fbf6e8,#fdfbf6); padding:.7rem 1rem; margin:.6rem 0; font-family:var(--serif); font-size:1rem; line-height:1.55; color:#2c2416; border-radius:0 6px 6px 0; } .diff { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; margin-top:.8rem; }
.diff > div { padding:.85rem 1rem; border-radius:8px; font-size:.9rem; position:relative; } .diff .before { background:#fdf0f2; border:1px solid #f3cfd6; } .diff .after { background:#ebf7ef; border:1px solid #c5e6d1; }
.diff .lab { display:block; font:700 .66rem var(--sans); letter-spacing:.14em; text-transform:uppercase; margin-bottom:.3rem; } .diff .before .lab { color:var(--red);} .diff .after .lab { color:var(--green);}
.diff .before p { text-decoration:line-through; text-decoration-color:rgba(179,38,60,.35); } .statute { font-family:var(--serif); font-size:1.06rem; line-height:1.75; color:#221c12; }
.statute .para { display:grid; grid-template-columns:3.2rem 1fr; gap:.3rem; margin:0 0 .45rem; margin-left:-4.4rem; } .statute .para .lbl { font:600 .7rem/2.4 var(--mono); color:#79512e; text-align:right; padding-right:.9rem; }
.unit-text { font-family:var(--serif); font-size:1.02rem; line-height:1.7; white-space:pre-wrap; }
/* Sticky-note: open questions */
.sticky-note { background:linear-gradient(180deg,#fff7b8,#fdeb8a); border-radius:2px 2px 4px 14px; padding:1.3rem 1.5rem 1.2rem; box-shadow:0 1px 1px rgba(0,0,0,.08), 0 14px 22px -12px rgba(110,80,0,.45); transform:rotate(-.6deg); position:relative; color:#3b2f05; } .sticky-note::before { content:""; position:absolute; top:-10px; left:50%; width:110px; height:24px; transform:translateX(-50%) rotate(2deg); background:rgba(255,255,255,.55); border:1px solid rgba(0,0,0,.05); box-shadow:0 1px 2px rgba(0,0,0,.08); }
.sticky-note h2 { color:#3b2f05; } .sticky-note .small { color:#6b5a1a; } .sticky-note ol { counter-reset:q; list-style:none; padding:0; margin:.6rem 0 0; }
.sticky-note li { counter-increment:q; display:grid; grid-template-columns:28px 1fr; gap:.4rem; margin:.55rem 0; font-family:"Segoe Print","Bradley Hand","Comic Neue",var(--sans); font-size:.96rem; } .sticky-note li::before { content:counter(q); width:22px; height:22px; border-radius:50%; border:1.5px solid #7a6410; display:grid; place-items:center; font:700 .72rem var(--sans); color:#5a4a0c; }
/* Index cards (obligations) */
.index-card { background:#fff; border:1px solid #e3ddd0; border-radius:6px; padding:.9rem 1.1rem .85rem; margin:.7rem 0; position:relative; box-shadow:0 1px 1px rgba(0,0,0,.04), 0 6px 14px -10px rgba(40,30,10,.3);
background-image:linear-gradient(#fff 2.1rem,#e57b7b 2.1rem,#e57b7b calc(2.1rem + 1px),transparent calc(2.1rem + 1px)), repeating-linear-gradient(#fff 0 1.55rem,#e7eef7 1.55rem calc(1.55rem + 1px)); background-size:100% 100%,100% 1.6rem; background-position:0 0,0 2.25rem; background-repeat:no-repeat,repeat; }
.index-card .ic-head { display:flex; justify-content:space-between; gap:1rem; align-items:baseline; min-height:1.5rem; } .index-card .ic-head b { font-size:.96rem; line-height:1.35; }
.index-card .ic-body { padding-top:.75rem; } .relevance { display:inline-flex; gap:2px; vertical-align:middle; } .relevance i { width:7px; height:12px; border-radius:2px; background:#e3ded3; } .relevance i.on { background:var(--brass); }
/* Manila folders (customers) */
.folder { position:relative; padding-top:22px; color:inherit; display:block; } .folder:hover { text-decoration:none; } .folder:hover .folder-body { transform:translateY(-2px); box-shadow:0 18px 30px -16px rgba(80,60,10,.55); }
.folder-tab { position:absolute; top:0; left:18px; height:26px; padding:.25rem 1rem 0; border-radius:8px 8px 0 0; background:linear-gradient(180deg,#e9cf8f,#dcbc72); border:1px solid #c9a65c; border-bottom:0; font:700 .68rem/1.4 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:#5d4511; } .folder-body { background:linear-gradient(180deg,#f3dfa8,#ecd394 60%,#e6ca86); border:1px solid #c9a65c; border-radius:3px 12px 12px 12px; padding:1.25rem 1.4rem 1.1rem; box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 10px 22px -14px rgba(80,60,10,.5); transition:transform .15s, box-shadow .15s; position:relative; }
.folder-body .sheet { background:var(--paper) var(--grain); border:1px solid #e5dbc4; border-radius:3px; padding:1rem 1.15rem; box-shadow:0 2px 6px -2px rgba(60,45,20,.25); } .folder-body h2 { font-family:var(--serif); font-size:1.35rem; margin:0; color:#2b1f05; }
.folder-label { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:.8rem; } .folder .flag { font-size:.8rem; color:#6a5420; }
.folder .w { font-size:.86rem; margin:.35rem 0; } .folder .w b { display:inline-block; min-width:3.6rem; color:var(--brass); text-transform:uppercase; font-size:.7rem; letter-spacing:.12em; } .folder-foot { display:flex; gap:1rem; flex-wrap:wrap; font-size:.74rem; color:#6a5420; margin-top:.75rem; }
.folder-foot span b { color:#3b2c08; font-family:var(--mono); }
/* Proposal letter */
.letterhead { display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px solid var(--ink); padding-bottom:1rem; margin-bottom:1.4rem; gap:1.5rem; } .letterhead .org { font:700 1.05rem var(--sans); letter-spacing:.02em; display:flex; align-items:center; gap:.6rem; }
.letterhead .org .brand-mark { width:32px; height:32px; font-size:.95rem; } .letterhead .meta { text-align:right; font-size:.76rem; color:var(--muted); line-height:1.5; }
.confidential { position:absolute; top:1.6rem; right:-.6rem; transform:rotate(8deg); } .prose { font-family:var(--serif); font-size:1.04rem; line-height:1.72; color:#231d12; overflow-wrap:anywhere; }
.prose h1 { font-family:var(--sans); font-size:1.65rem; line-height:1.2; margin:0 0 .4rem; color:var(--ink); } .prose h2 { font-family:var(--sans); font-size:1.18rem; margin:2.2rem 0 .7rem; padding-top:1.1rem; border-top:1px solid var(--paper-line); color:var(--ink); scroll-margin-top:5rem; }
.prose h3 { font-family:var(--sans); text-transform:none; letter-spacing:0; color:var(--ink-2); font-size:1rem; margin:1.3rem 0 .4rem; } .prose table { display:block; overflow-x:auto; font-family:var(--sans); font-size:.82rem; margin:.8rem 0 1.2rem; background:white; border:1px solid var(--paper-line); border-radius:6px; }
.prose th { background:#f6f1e3; } .prose td { border-bottom-color:#f0e9d8; } .prose blockquote { border-left:3px solid var(--brass-2); margin:.7rem 0; padding:.3rem 1rem; color:#3d3320; background:#fbf6e8; }
.prose code { font-size:.72em; background:#f1ead8; border-color:#e5dbc4; } .prose a code { color:var(--accent); }
.prose hr { border:0; border-top:1px solid var(--paper-line); margin:1.5rem 0; } .toc { font-size:.84rem; } .toc ol { counter-reset:t; list-style:none; padding:0; margin:0; }
.toc li { counter-increment:t; margin:0; } .toc a { display:grid; grid-template-columns:24px 1fr; gap:.35rem; padding:.35rem .5rem; border-radius:7px; color:var(--ink-2); } .toc a::before { content:counter(t); font:600 .72rem/1.7 var(--mono); color:var(--brass); }
.toc a:hover { background:#f4f0e6; text-decoration:none; }
.seal { width:96px; height:96px; border-radius:50%; display:grid; place-items:center; text-align:center; color:#fff7f0; font:800 .58rem/1.15 var(--sans); letter-spacing:.12em; text-transform:uppercase; flex:none;
background:radial-gradient(circle at 35% 30%,#e0625f,#b3262c 55%,#7d1418 100%); box-shadow:0 0 0 5px #a3222a, 0 0 0 7px rgba(125,20,24,.35), 0 6px 14px rgba(90,10,10,.45), inset 0 -4px 8px rgba(0,0,0,.3), inset 0 3px 6px rgba(255,255,255,.25);
clip-path:polygon(50% 0,61% 4%,72% 2%,80% 9%,90% 12%,93% 22%,99% 31%,97% 42%,100% 52%,96% 62%,98% 73%,90% 80%,86% 90%,76% 93%,66% 99%,55% 96%,44% 100%,34% 95%,24% 97%,17% 89%,8% 85%,5% 74%,0 65%,3% 54%,0 43%,5% 33%,3% 22%,11% 15%,15% 6%,26% 4%,36% 0); }
.seal.amber { background:radial-gradient(circle at 35% 30%,#f2b04f,#c27c00 55%,#8a5600 100%); box-shadow:0 0 0 5px #b06d00, 0 6px 14px rgba(90,60,0,.45), inset 0 -4px 8px rgba(0,0,0,.3); } .seal span { font-size:1.15rem; display:block; letter-spacing:0; }
.validation { display:flex; gap:1rem; align-items:center; }
/* Forms */
form.proposal .field { margin:1.1rem 0 0; } form.proposal label { display:flex; gap:.7rem; align-items:baseline; font-weight:700; font-size:.95rem; margin-bottom:.35rem; }
form.proposal label .w-letter { font:800 1.05rem var(--serif); width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:var(--navy-3); color:#f3dca0; flex:none; box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 2px 4px rgba(0,0,0,.25); } form.proposal label small { font-weight:400; color:var(--muted); font-size:.8rem; }
input[type=text],textarea,select { width:100%; font:inherit; padding:.65rem .8rem; border:1px solid var(--line-2); border-radius:9px; background:#fffefb; box-shadow:inset 0 1px 3px rgba(40,30,10,.08); color:var(--ink); } input[type=text]:focus,textarea:focus,select:focus { outline:0; border-color:var(--accent-2); box-shadow:inset 0 1px 3px rgba(40,30,10,.08), 0 0 0 3px rgba(90,162,240,.22); }
textarea { min-height:5.4rem; resize:vertical; line-height:1.5; } .btn { display:inline-flex; align-items:center; gap:.5rem; background:linear-gradient(180deg,#2f74d6,#1d58b3); color:white; border:1px solid #174a97; border-radius:9px; padding:.62rem 1.15rem; font:650 .9rem var(--sans); cursor:pointer; box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 2px 4px rgba(20,50,100,.25); }
.btn:hover { text-decoration:none; filter:brightness(1.06); } .btn:active { transform:translateY(1px); box-shadow:inset 0 2px 4px rgba(0,0,0,.25); } .btn.ghost { background:linear-gradient(180deg,#fff,#f4f1ea); color:var(--ink-2); border:1px solid var(--line-2); box-shadow:0 1px 0 #fff inset, 0 1px 2px rgba(0,0,0,.06); }
.btn.big { padding:.95rem 1.7rem; font-size:1.02rem; border-radius:11px; } .btn.brass { background:linear-gradient(180deg,#e8c97f,#c49a45); color:#2b1f05; border-color:#a8843f; }
/* Waiting room */
.wait-hero { background:radial-gradient(1200px 300px at 0 0,#1f3a57,transparent),linear-gradient(180deg,#14263a,#0f1d2b); color:#dce6f0; border-radius:16px; padding:1.5rem 1.7rem; margin-bottom:1.2rem; display:flex; gap:1.5rem; align-items:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 14px 30px -18px rgba(0,0,0,.6); } .wait-hero h1 { color:white; } .wait-hero .lede { color:#a9bdd0; } .wait-hero .eyebrow { color:var(--brass-2); }
.gauges { margin-left:auto; display:flex; gap:1.6rem; text-align:right; } .gauge .counter { font:700 1.6rem/1 var(--mono); color:white; font-variant-numeric:tabular-nums; } .gauge .small { color:#8aa1b7; }
.orbit { width:62px; height:62px; border-radius:50%; flex:none; position:relative; background:conic-gradient(from 0deg,transparent 0 70%,var(--brass-2)); animation:spin 1.1s linear infinite; -webkit-mask:radial-gradient(circle,transparent 24px,#000 25px); }
@keyframes spin { to { transform:rotate(360deg);} }
.timeline { list-style:none; padding:0; margin:0; } .timeline li { display:grid; grid-template-columns:30px 1fr; gap:.7rem; padding:.6rem 0; border-bottom:1px dashed var(--line); align-items:center; color:var(--muted); }
.timeline li:last-child { border-bottom:0; } .timeline .st { width:24px; height:24px; border-radius:50%; border:2px solid var(--line-2); display:grid; place-items:center; font-size:.72rem; color:var(--muted); background:white; }
.timeline .done { color:var(--ink); } .timeline .done .st { background:var(--green); border-color:var(--green); color:white; box-shadow:0 0 0 3px rgba(29,122,69,.15); } .timeline .run { color:var(--ink); font-weight:600; } .timeline .run .st { border-color:var(--accent); border-top-color:transparent; animation:spin .9s linear infinite; }
.timeline .done .st::before { content:"✓"; } .console { background:#0a131d; color:#b7cde3; font:.78rem/1.55 var(--mono); padding:1rem 1.1rem; border-radius:10px; height:300px; overflow:auto; white-space:pre-wrap; box-shadow:inset 0 2px 10px rgba(0,0,0,.6); border:1px solid #1e2e40; }
.console .t { color:#5a7c9b; } .console .s { color:#79d4b8; } .thinking { background:#120e22; color:#d5ccf7; font:.8rem/1.6 var(--mono); padding:1rem 1.1rem; border-radius:10px; height:260px; overflow:auto; white-space:pre-wrap; box-shadow:inset 0 2px 10px rgba(0,0,0,.6); border:1px solid #2a2346; }
.typewriter { background:var(--paper) var(--grain); color:#2a2213; font:.86rem/1.6 var(--serif); padding:1rem 1.1rem; border-radius:6px; height:230px; overflow:auto; white-space:pre-wrap; border:1px solid #e5dbc4; box-shadow:var(--shadow-paper); } .typewriter::after { content:"▍"; color:var(--brass); animation:blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
.activity { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.6rem; } .activity span { font-size:.72rem; padding:.2rem .55rem; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); color:#c8d6e4; transition:all .3s; }
.activity span.lit { background:rgba(215,180,106,.2); border-color:var(--brass-2); color:#f6e4b7; }
/* Misc */
.insight { border-left:3px solid var(--teal); padding:.6rem .95rem; background:#f1faf7; border-radius:0 8px 8px 0; margin:.5rem 0; } .cluster-card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1rem 1.1rem; box-shadow:var(--shadow-1); border-top:4px solid var(--violet); display:flex; flex-direction:column; gap:.4rem; }
.cluster-card .tension { font-size:.8rem; color:#7b4f00; background:#fff6e2; border:1px solid #f0dcaa; border-radius:7px; padding:.45rem .6rem; margin-top:auto; } .status-ok { color:var(--green); font-weight:600;} .status-degraded { color:var(--amber); font-weight:600;} .status-disabled { color:var(--muted);}
.toggle { display:inline-block; width:34px; height:19px; border-radius:999px; background:#cfd6dd; position:relative; vertical-align:middle; box-shadow:inset 0 1px 3px rgba(0,0,0,.25); } .toggle::after { content:""; position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%; background:linear-gradient(180deg,#fff,#e6e6e6); box-shadow:0 1px 2px rgba(0,0,0,.35); transition:left .15s; }
.toggle.on { background:linear-gradient(180deg,#2bb06c,#1d7a45); } .toggle.on::after { left:17px; } mark { background:#fff1a8; padding:0 .12em; border-radius:2px; }
details summary { cursor:pointer; color:var(--accent); font-size:.88rem; } details[open] > summary { margin-bottom:.4rem; }
.empty { color:var(--muted); padding:1.5rem 0; } .sticky { position:sticky; top:5.2rem; }
.unit-link code { background:#eef3fb; border-color:#d9e4f5; color:var(--accent); } .divider { height:1px; background:var(--line); margin:1rem 0; }
.lede-strong { font-size:1.06rem; color:var(--ink); }
@media (max-width:1100px) { .shell { grid-template-columns:1fr; } .sidebar { position:static; height:auto; } .g4,.g3,.g6 { grid-template-columns:repeat(2,minmax(0,1fr));} .two,.two.wide-right { grid-template-columns:1fr; } .alert-card { grid-template-columns:1fr; } .pipeline { grid-template-columns:repeat(4,1fr); gap:.6rem; } .topsearch { display:none; } }
@media print { body { background:white; } .sidebar,.topbar,.btn,.filters,.howto,.toc-card { display:none !important; } .shell { display:block; } .content { padding:0; } .two { grid-template-columns:1fr; } .paper { box-shadow:none; border:0; padding:0; } .paper-stack::before,.paper-stack::after { display:none; } .sticky { position:static; } }
.grid { grid-template-columns:minmax(0,1fr); } .grid > *, .two > * { min-width:0; } .grid.g2 { grid-template-columns:repeat(2,minmax(0,1fr));} .grid.g3 { grid-template-columns:repeat(3,minmax(0,1fr));} .grid.g4 { grid-template-columns:repeat(4,minmax(0,1fr));} .grid.g6 { grid-template-columns:repeat(6,minmax(0,1fr));}
.content { overflow-x:clip; } .topsearch input[type=text] { border:0; box-shadow:none; background:transparent; padding:.25rem 0; border-radius:0; }
.topsearch input[type=text]:focus { box-shadow:none; } .scan-table td { padding:.5rem .45rem; border-bottom:1px solid var(--line); } .scan-table a { line-height:1.3; display:inline-block; }
@media (max-width:1100px) { .grid.g4,.grid.g3,.grid.g6 { grid-template-columns:repeat(2,minmax(0,1fr));} }
.index-card { background:#fff; background-image:none; } .index-card .ic-head { border-bottom:1px solid #e9a0a0; padding-bottom:.5rem; }
.index-card .ic-body { padding-top:.6rem; background:repeating-linear-gradient(transparent 0 1.55rem,#eaf0f8 1.55rem calc(1.55rem + 1px)); } .page-head h1 { font-size:clamp(1.55rem,2.2vw,2.05rem); max-width:30ch; }
.crumbs span:last-child { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:42ch; } .stamp { white-space:nowrap; }
.folder { display:flex; flex-direction:column; } .folder-body { flex:1; display:flex; flex-direction:column; } .folder-body .sheet { flex:1; } .folder-foot { margin-top:.75rem; } .btn { white-space:nowrap; }
.confidential { top:-.9rem; right:2rem; } .prose a code { white-space:nowrap; }
/* Keyboard focus: ink outline and paper halo stay visible on light and dark panels. */
a:focus-visible,button:focus-visible,input:focus-visible,input[type]:focus-visible,
textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--ink); outline-offset:2px; box-shadow:0 0 0 2px var(--paper); }
/* Proposal pages declare a desktop sidebar inline; keep the paper readable on phones. */
@media (max-width:1100px), print {
.two:has(> .paper-stack) { grid-template-columns:minmax(0,1fr) !important; }
}
@media (max-width:600px) {
.page-head:has(a[href$="/print"]), .page-head:has(a[href$="/print"]) > div:last-child, .letterhead { flex-wrap:wrap; }
.page-head:has(a[href$="/print"]) > div { min-width:0; overflow-wrap:anywhere; }
.letterhead .meta { text-align:left; overflow-wrap:anywhere; }
}
.two:has(> .paper-stack) pre { max-width:100%; overflow-x:auto; } .two:has(> .paper-stack) .facts { grid-template-columns:max-content minmax(0,1fr); }
/* Evidence and inline links stay readable with keyboard, narrow paper and print. */
p a, dd a, #job-result { text-decoration:underline; text-underline-offset:2px; } .two pre { white-space:pre-wrap; overflow-wrap:anywhere; }
.prose table { display:table; table-layout:fixed; width:100%; } .prose th, .prose td { white-space:normal; overflow-wrap:anywhere; }
.prose a code { white-space:normal; overflow-wrap:anywhere; } .archived-claims { overflow-wrap:anywhere; }
@media (max-width:600px) {
.content { padding-left:1rem; padding-right:1rem; }
.page-head { flex-wrap:wrap; gap:1rem; }
.page-head > div { min-width:0; max-width:100%; overflow-wrap:anywhere; }
.paper { padding:1.2rem; }
.diff, .grid.g2, .grid.g3, .grid.g4, .grid.g6 { grid-template-columns:minmax(0,1fr); }
}
@media print {
[data-print-evidence] { display:block !important; }
.howto[data-print-evidence] { background:white; box-shadow:none; color:var(--ink); }
.content, .card.flush, .prose table, .two:has(> .paper-stack) pre { overflow:visible; }
.two, .grid, dl.facts { display:block; } .card { box-shadow:none; margin-bottom:1rem; }
pre, code { white-space:pre-wrap; overflow-wrap:anywhere; } table { table-layout:fixed; width:100%; } tr { break-inside:avoid; }
th, td { white-space:normal; overflow-wrap:anywhere; } .num { white-space:normal; }
.paper::after { display:none; }
}

/* Text for screen readers only (e.g. the numbers behind a colour strip). */
.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}