/* PLM Knowledge Base — "a lit reading desk in an archive". Dark desk by default, warm-paper light mode, cream-paper documents in both. One brand accent (amber), four status hues, disciplined scales. Theme: default dark; honor prefers-color-scheme; a [data-theme] on wins (manual toggle). */ :root{ /* brand — fixed in both themes */ --brand-amber:#E3A43C; --brand-amber-h:#c98d2d; --slate:#54748D; --navy:#092E4C; --blue:#3D7FB8; /* scales */ --r-sm:6px; --r-md:10px; --r-lg:14px; --r-pill:999px; --radius:var(--r-md); --radius-sm:var(--r-sm); --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:36px; --t-display:1.875rem; --t-h2:1.25rem; --t-h3:1.0625rem; --t-body:.9375rem; --t-meta:.8125rem; --t-micro:.6875rem; --head:'Lato',system-ui,-apple-system,sans-serif; --body:'Inter',system-ui,-apple-system,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,monospace; /* the document "paper" is cream in BOTH themes — the deliberate constant */ --paper:#f4efdd; --ink:#1d1e1e; --ink-soft:#3f4147; --paper-line:#e3dcc2; } /* DARK (default) */ :root, :root[data-theme="dark"]{ --bg:#0a0b10; --surface:#13151d; --card:#181b24; --elevated:#20242f; --text:#f4efdd; --muted:#8b97a8; --dim:#5b6675; --accent:var(--brand-amber); --accent-h:var(--brand-amber-h); --accent-glow:rgba(227,164,60,.16); --ok:#5bb075; --ok-bg:rgba(91,176,117,.15); --warn:#d99a3c; --warn-bg:rgba(217,154,60,.16); /* burnt-amber — distinct from brand accent */ --crit:#e0736c; --crit-bg:rgba(224,115,108,.16); --info:#5c9ed6; --info-bg:rgba(92,158,214,.15); --bad:var(--crit); --bad-bg:var(--crit-bg); /* legacy alias */ --muted-bg:rgba(139,151,168,.14); --bd:rgba(244,239,221,.10); --bd2:rgba(244,239,221,.18); --shadow:0 8px 30px rgba(0,0,0,.45); --shadow-sm:0 2px 10px rgba(0,0,0,.35); } /* LIGHT — warm paper desk, slate ink */ :root[data-theme="light"]{ --bg:#f1ece0; --surface:#faf7f0; --card:#ffffff; --elevated:#f3eee2; --text:#20242b; --muted:#55606e; --dim:#8a93a0; --accent:#b07c1e; --accent-h:#8f6115; /* amber darkened for AA on light */ --accent-glow:rgba(176,124,30,.18); --ok:#3f8b58; --ok-bg:rgba(63,139,88,.14); --warn:#a7691d; --warn-bg:rgba(167,105,29,.15); --crit:#b83f37; --crit-bg:rgba(184,63,55,.12); --info:#2f6ea3; --info-bg:rgba(47,110,163,.12); --bad:var(--crit); --bad-bg:var(--crit-bg); --muted-bg:rgba(85,96,110,.12); --bd:rgba(20,30,45,.12); --bd2:rgba(20,30,45,.22); --shadow:0 6px 24px rgba(30,40,60,.12); --shadow-sm:0 2px 8px rgba(30,40,60,.08); } @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ --bg:#f1ece0; --surface:#faf7f0; --card:#ffffff; --elevated:#f3eee2; --text:#20242b; --muted:#55606e; --dim:#8a93a0; --accent:#b07c1e; --accent-h:#8f6115; --accent-glow:rgba(176,124,30,.18); --ok:#3f8b58; --ok-bg:rgba(63,139,88,.14); --warn:#a7691d; --warn-bg:rgba(167,105,29,.15); --crit:#b83f37; --crit-bg:rgba(184,63,55,.12); --info:#2f6ea3; --info-bg:rgba(47,110,163,.12); --bad:var(--crit); --bad-bg:var(--crit-bg); --muted-bg:rgba(85,96,110,.12); --bd:rgba(20,30,45,.12); --bd2:rgba(20,30,45,.22); --shadow:0 6px 24px rgba(30,40,60,.12); --shadow-sm:0 2px 8px rgba(30,40,60,.08); } } *{box-sizing:border-box} [hidden]{display:none!important} /* keep modals/popovers closed until JS opens them */ html{scroll-behavior:smooth} body{margin:0;font-family:var(--body);background:var(--bg);color:var(--text); font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased} h1,h2,h3,h4{font-family:var(--head);font-weight:700;line-height:1.25;color:var(--text)} a{color:var(--accent);text-decoration:none} a:hover{color:var(--accent-h);text-decoration:underline} code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em; background:rgba(244,239,221,.08);padding:1px 6px;border-radius:5px} /* layout */ .sidebar{position:fixed;top:0;left:0;bottom:0;width:280px;background:#0d0f15; border-right:1px solid var(--bd);padding:20px 16px;overflow-y:auto;z-index:20} .content{margin-left:280px;padding:38px 44px 80px;max-width:1180px;transition:margin-right .22s ease} .menu-btn{display:none;position:fixed;top:14px;left:14px;z-index:30;background:var(--card); color:var(--text);border:1px solid var(--bd2);border-radius:8px;font-size:18px;padding:6px 12px;cursor:pointer} /* brand + search + nav */ .brand{display:flex;align-items:center;gap:10px;margin-bottom:18px;text-decoration:none} .brand-mark{flex:0 0 auto;border-radius:7px} .brand-text strong{display:block;font-family:var(--head);font-size:17px;color:var(--text);letter-spacing:.2px} .brand-text small{display:block;font-size:12px;color:var(--accent);letter-spacing:.14em;text-transform:uppercase;margin-top:2px} .search input{width:100%;background:var(--surface);border:1px solid var(--bd);border-radius:9px; color:var(--text);padding:9px 12px;font-size:14px;font-family:var(--body)} .search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)} .nav{margin-top:18px} .home-link{display:block;font-weight:600;color:var(--text);padding:6px 8px;border-radius:7px;margin-bottom:6px} .home-link:hover{background:var(--surface);text-decoration:none} .nav-section{margin:14px 0} .nav-h{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--dim); font-weight:700;padding:0 8px;margin-bottom:5px} .nav-item{display:block;color:var(--muted);padding:6px 8px;border-radius:7px;font-size:13.5px; text-decoration:none;border:none;background:none;width:100%;text-align:left;cursor:pointer;font-family:var(--body)} .nav-item:hover{background:var(--surface);color:var(--text);text-decoration:none} .nav-item.active{background:transparent;color:var(--accent);font-weight:600;box-shadow:inset 3px 0 0 var(--accent);border-radius:0 var(--r-sm) var(--r-sm) 0} .as-link{font:inherit} .who{margin-top:18px;padding-top:14px;border-top:1px solid var(--bd);font-size:12px;color:var(--dim)} .suggest-box{margin-top:10px;background:var(--surface);border:1px solid var(--bd);border-radius:9px;padding:10px} .suggest-box textarea{width:100%;background:var(--bg);border:1px solid var(--bd);border-radius:7px; color:var(--text);padding:8px;font-family:var(--body);font-size:13px;resize:vertical} /* headings + hero */ .page-title{font-size:30px;margin:0 0 6px;letter-spacing:-.4px} .page-sub{margin:0 0 10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center} .lede{color:var(--muted);max-width:70ch} .hero{background:linear-gradient(135deg,var(--card),var(--surface));border:1px solid var(--bd); border-radius:var(--radius);padding:22px 24px;margin:6px 0 30px} .hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px} .stat{background:var(--elevated);border:1px solid var(--bd);border-radius:20px;padding:5px 14px;font-size:13px;color:var(--muted)} .stat b{color:var(--text)} /* register cards — the catalog */ .reg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin:6px 0 34px} .reg-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--bd);border-radius:var(--radius); padding:20px 22px;text-decoration:none;transition:transform .12s,border-color .12s,box-shadow .12s} .reg-card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:var(--shadow);text-decoration:none} .reg-emoji{font-size:26px;line-height:1} .reg-card .reg-blurb{margin-top:auto;padding-top:8px} .reg-name{font-family:var(--head);font-weight:700;font-size:19px;color:var(--text);margin:12px 0 4px} .reg-count{color:var(--accent);font-weight:700;font-size:13px} .reg-blurb{color:var(--muted);font-size:13.5px;margin-top:8px;line-height:1.5} /* doc lists + pills */ .doclist{list-style:none;padding:0;margin:0 0 26px} .doclist li{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:9px 2px;border-bottom:1px solid var(--bd)} .doclist a{font-weight:500} /* ONE pill component. A pill encodes STATE (ok/warn/crit/info) or is an inert neutral label. Attribute chips (type/role/space/category/cadence) are NOT pills — they are plain subtitle text. */ .pill,.chip{display:inline-flex;align-items:center;gap:4px;font-size:var(--t-micro);font-weight:600; padding:2px 9px;border-radius:var(--r-pill);line-height:1.5;background:var(--muted-bg);color:var(--muted)} .pill.ok{background:var(--ok-bg);color:var(--ok)} .pill.warn{background:var(--warn-bg);color:var(--warn)} .pill.crit,.pill.bad{background:var(--crit-bg);color:var(--crit)} .pill.info{background:var(--info-bg);color:var(--info)} .pill.muted{background:var(--muted-bg);color:var(--muted)} .pill.ratified{background:var(--navy);color:var(--accent)} .appr-na{color:var(--dim);font-size:12px;font-style:italic} .ratified-tag{font-size:11px;font-weight:600;color:var(--accent);margin-left:8px;white-space:nowrap} .chip{background:var(--elevated);color:var(--muted);border:1px solid var(--bd)} .chip.flag-restricted{background:var(--warn-bg);color:var(--warn);border-color:transparent;font-weight:700} .reg-id{font-family:ui-monospace,monospace;font-size:11.5px;color:var(--dim);background:var(--surface); padding:2px 7px;border-radius:5px;border:1px solid var(--bd)} .hint{color:var(--dim);font-size:13px} /* buttons */ .btn{background:var(--accent);color:var(--navy);border:none;border-radius:9px;padding:9px 16px; font-weight:700;font-family:var(--body);font-size:14px;cursor:pointer} .btn:hover{background:var(--accent-h)} .btn.ghost-btn{background:transparent;color:var(--muted);border:1px solid var(--bd2)} .btn.ghost-btn:hover{color:var(--text);background:var(--surface)} /* document head bar */ .doc-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 20px;padding:12px 16px; background:var(--card);border:1px solid var(--bd);border-radius:var(--radius)} .head-status{display:flex;flex-wrap:wrap;align-items:center;gap:10px} .appr{display:inline-flex;flex-wrap:wrap;gap:6px} .appr-item{font-size:12px;font-weight:600;color:var(--muted);background:var(--elevated);border-radius:14px;padding:3px 9px} .appr-item.on{color:var(--ok);background:var(--ok-bg)} .head-actions{display:flex;gap:14px;margin-left:auto;flex-wrap:wrap;align-items:center} .head-link{font-size:13px;font-weight:600;color:var(--accent);background:none;border:none;cursor:pointer;padding:0;font-family:var(--body)} .head-link:hover{text-decoration:underline} .provenance{flex-basis:100%;background:var(--surface);border:1px solid var(--bd);border-radius:9px; padding:12px 14px;font-size:13px;line-height:1.7;color:var(--muted)} .provenance b{color:var(--text)} .source-btn{display:inline-flex;align-items:center;gap:6px;background:var(--elevated);border:1px solid var(--bd2); color:var(--text);border-radius:8px;padding:6px 12px;font-size:13px;font-weight:600} .source-btn:hover{border-color:var(--accent);text-decoration:none} /* DOCUMENT BODY — cream paper on the dark desk */ .doc-layout{max-width:820px} /* article is full width now; the comments drawer is fixed, not a column */ .doc{background:var(--paper);color:var(--ink);border-radius:10px;padding:46px 52px; box-shadow:var(--shadow);font-size:15.5px;line-height:1.72;max-width:100%;overflow-x:auto} .doc h1,.doc h2,.doc h3,.doc h4{color:var(--ink);font-family:var(--head)} .doc h1{font-size:26px;margin:.2em 0 .5em;border-bottom:2px solid var(--paper-line);padding-bottom:.3em} .doc h2{font-size:21px;margin:1.4em 0 .5em;border-bottom:1px solid var(--paper-line);padding-bottom:.25em} .doc h3{font-size:17px;margin:1.2em 0 .4em} .doc a{color:#1c5a86} .doc a:hover{color:#0f4470} .doc p,.doc li{color:var(--ink-soft)} .doc strong{color:var(--ink)} .doc code{background:rgba(9,46,76,.08);color:#1c3a52} .doc blockquote{border-left:3px solid var(--accent);margin:1em 0;padding:.4em 1em; background:rgba(9,46,76,.04);color:var(--ink-soft)} .doc table{border-collapse:collapse;width:100%;margin:1.2em 0;font-size:14px} .doc th,.doc td{border:1px solid var(--paper-line);padding:8px 11px;text-align:left;vertical-align:top} .doc th{background:rgba(9,46,76,.06);color:var(--ink);font-family:var(--head)} .doc hr{border:none;border-top:1px solid var(--paper-line);margin:1.6em 0} .transcribed-note{background:rgba(9,46,76,.06);border-left:3px solid var(--blue);border-radius:0 6px 6px 0; padding:9px 14px;margin:0 0 22px;font-size:13px;color:var(--ink-soft)} /* comments — a fixed slide-out drawer, opened by the persistent toggle */ .c-toggle{position:fixed;right:0;top:130px;z-index:40;display:flex;align-items:center;gap:6px; background:var(--card);border:1px solid var(--bd);border-right:none;border-radius:10px 0 0 10px; color:var(--text);cursor:pointer;font:inherit;font-size:15px;padding:10px 12px 10px 14px; box-shadow:-2px 2px 10px rgba(0,0,0,.14)} .c-toggle:hover{border-color:var(--accent);color:var(--accent)} .c-toggle-n{min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--accent); color:#fff;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center} .c-toggle-n.zero{background:var(--bd2);color:var(--dim)} /* Push mode: when the drawer is open the document gets right margin equal to the drawer width, so it slides out from under the drawer rather than being covered. No scrim — you keep reading. */ body.comments-open .content{margin-right:min(430px,90vw)} @media(max-width:760px){body.comments-open .content{margin-right:0}} /* phone: overlay, no push */ .c-drawer{position:fixed;top:0;right:0;z-index:45;height:100vh;width:min(430px,92vw); background:var(--card);border-left:1px solid var(--bd);box-shadow:-8px 0 28px rgba(0,0,0,.22); display:flex;flex-direction:column;transform:translateX(100%);transition:transform .22s ease} .c-drawer.open{transform:none} .c-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:10px; padding:16px 18px;border-bottom:1px solid var(--bd);flex:none} .c-drawer-head h3{font-size:15px;margin:0;display:flex;gap:8px;align-items:baseline} .c-drawer-x{background:none;border:none;color:var(--dim);cursor:pointer;font-size:24px;line-height:1; padding:0 4px} .c-drawer-x:hover{color:var(--accent)} .c-drawer-body{flex:1;overflow-y:auto;padding:14px 18px 40px} .c-sec-h{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim); margin:12px 0 4px} .c-sec-h b{color:var(--accent)} .c-arch{margin-top:16px;border-top:1px solid var(--bd);padding-top:10px} .c-arch>summary{cursor:pointer;font-size:13px;color:var(--dim);list-style:none;padding:2px 0} .c-arch>summary::-webkit-details-marker{display:none} .c-arch>summary:hover{color:var(--accent)} .c-arch>summary b{color:var(--muted)} .c-arch[open]>summary{margin-bottom:6px} @media(max-width:560px){.c-drawer{width:100vw}} .add-comment-btn{width:100%;margin:4px 0 6px;justify-content:center} /* front-page legal/tax status statement, rendered whole */ .front-statement{background:var(--card);border:1px solid var(--bd);border-left:4px solid var(--accent); border-radius:var(--radius);padding:22px 26px;margin:0 0 30px} .front-statement .doc{max-width:none} .front-catalog-head{font-size:15px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em; margin:0 0 14px;padding-top:6px;border-top:1px solid var(--bd)} .count{color:var(--accent);font-weight:700} .comment{background:var(--surface);border:1px solid var(--bd);border-radius:9px;padding:11px;margin:10px 0} .comment.addressed{opacity:.62} .q{border-left:3px solid var(--accent);padding:2px 10px;margin:0 0 6px;color:var(--muted);font-style:italic;font-size:13px} .q.del{border-color:#e08585;text-decoration:line-through;opacity:.8} .q.ins{border-color:var(--ok)} .c-body{font-size:14px} /* Jump-to-passage: the control on an anchored comment, and the flash on the located text. */ .c-jump{background:none;border:1px solid var(--bd);border-radius:6px;color:var(--dim);cursor:pointer; font:inherit;font-size:11px;padding:2px 8px;margin:0 0 6px} .c-jump:hover{border-color:var(--accent);color:var(--accent)} .c-lost{display:block;font-size:11.5px;color:var(--warn);margin:0 0 6px} .anchored>summary{position:relative} .anchored>summary .c-peek::after{content:" ⤴";color:var(--accent);opacity:.7} ::highlight(kb-anchor){background:var(--accent-glow);color:inherit; box-shadow:0 0 0 2px var(--accent-glow)} /* meta line carries the addressed/restore action on its right, so it stays out of the reading path */ .c-meta{font-size:12px;color:var(--dim);margin-top:5px;display:flex;align-items:flex-end; justify-content:space-between;gap:8px} .c-meta form{margin:0;flex:none} .c-act{background:none;border:1px solid var(--bd);border-radius:6px;color:var(--dim);cursor:pointer; font:inherit;font-size:11px;padding:2px 7px;white-space:nowrap} .c-act:hover{border-color:var(--accent);color:var(--accent)} /* comment rail: filter chips + collapsed rows. A document can carry 40+ comments, several of them a pasted section of the document itself. Fully expanded that rail is unusable, so every comment is one line until opened and the default filter is Open — the rail's job is to surface what still needs a decision. */ .c-filters{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 4px} .c-chip{background:none;border:1px solid var(--bd);border-radius:var(--r-pill);color:var(--dim); cursor:pointer;font:inherit;font-size:11px;padding:3px 9px;white-space:nowrap} .c-chip:hover{border-color:var(--accent);color:var(--accent)} .c-chip b{font-weight:700} .c-chip.is-on{background:var(--accent-glow);border-color:var(--accent);color:var(--accent)} .c-chip.st-ok{color:var(--ok)} .c-chip.st-info{color:var(--info)} .c-chip.st-crit{color:var(--crit)} .c-chip.st-warn{color:var(--warn)} .c-list{margin-top:2px} .comment>summary{cursor:pointer;list-style:none;display:flex;flex-direction:column;gap:2px} .comment>summary::-webkit-details-marker{display:none} .comment>summary:hover .c-peek{color:var(--text)} .c-sum{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--dim)} .c-who{color:var(--muted);font-weight:600} .c-peek{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .comment[open] .c-peek{display:none} .c-dot{font-size:10px;line-height:1} .c-dot.st-open{color:var(--accent)} .c-dot.st-ok{color:var(--ok)} .c-dot.st-info{color:var(--info)} .c-dot.st-crit{color:var(--crit)} .c-dot.st-warn{color:var(--warn)} .c-open{margin-top:8px} /* Long bodies are clamped even when expanded — Lee pastes whole sections into a comment, and one of those can be taller than the viewport on its own. */ .c-open .c-body{max-height:14em;overflow-y:auto} /* author's own edit box + the revision history, small nested controls */ .c-hist,.c-edit{margin-top:7px} .c-hist>summary,.c-edit>summary{cursor:pointer;font-size:11px;color:var(--dim);list-style:none} .c-hist>summary::-webkit-details-marker,.c-edit>summary::-webkit-details-marker{display:none} .c-hist>summary:hover,.c-edit>summary:hover{color:var(--accent)} .c-hist-when{font-size:10.5px;color:var(--dim);margin:2px 0 6px} .c-edit textarea{width:100%;background:var(--bg);border:1px solid var(--bd);border-radius:7px; color:var(--text);padding:7px;font-family:var(--body);margin:5px 0} /* the disposition block: what we actually did about it */ .c-res{border-left:3px solid var(--bd2);border-radius:0 6px 6px 0;padding:7px 10px;margin:8px 0 4px; background:var(--bg)} .c-res.st-ok{border-color:var(--ok);background:var(--ok-bg)} .c-res.st-info{border-color:var(--info);background:var(--info-bg)} .c-res.st-crit{border-color:var(--crit);background:var(--crit-bg)} .c-res.st-warn{border-color:var(--warn);background:var(--warn-bg)} .c-res-head{font-size:11.5px;color:var(--muted)} .c-res-note{font-size:12.5px;color:var(--text);margin-top:5px;font-style:italic} .c-res .q{margin:6px 0 0;font-style:normal} .c-resolve{margin-top:8px;border-top:1px solid var(--bd);padding-top:7px} .c-resolve summary{cursor:pointer;font-size:11px;color:var(--dim);list-style:none} .c-resolve summary::-webkit-details-marker{display:none} .c-resolve summary:hover{color:var(--accent)} .c-select{width:100%;background:var(--bg);border:1px solid var(--bd);border-radius:7px; color:var(--text);padding:7px;font-family:var(--body)} /* per-document archive — collapsed by default so handled comments stay out of the way */ .archived-box{margin-top:14px;border-top:1px solid var(--bd);padding-top:10px} .archived-box summary{cursor:pointer;font-size:13px;color:var(--dim);list-style:none; display:flex;justify-content:space-between;align-items:center} .archived-box summary::-webkit-details-marker{display:none} .archived-box summary:hover{color:var(--accent)} .archived-box[open] summary{margin-bottom:4px} .fld{display:block;margin:10px 0} .fld span{display:block;font-size:13px;color:var(--muted);margin-bottom:4px} .fld textarea,.comments textarea{width:100%;background:var(--bg);border:1px solid var(--bd); border-radius:7px;color:var(--text);padding:8px;font-family:var(--body);resize:vertical} /* selection popover + modals */ .sel-pop{position:absolute;background:var(--elevated);border:1px solid var(--bd2);border-radius:9px; padding:5px;display:flex;gap:4px;box-shadow:var(--shadow);z-index:40} .sel-pop button{background:none;border:none;color:var(--text);font-size:13px;padding:5px 9px;border-radius:6px;cursor:pointer} .sel-pop button:hover{background:var(--surface)} .modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px} .modal-card{position:relative;background:var(--card);border:1px solid var(--bd2);border-radius:var(--radius);padding:22px;width:min(560px,100%);box-shadow:var(--shadow)} .modal-card h3{margin:0 0 12px} .modal-x{position:absolute;top:12px;right:12px;background:none;border:none;color:var(--muted); font-size:24px;line-height:1;cursor:pointer;padding:2px 8px;border-radius:6px} .modal-x:hover{background:var(--surface);color:var(--text)} .modal-card textarea{width:100%;background:var(--bg);border:1px solid var(--bd);border-radius:7px;color:var(--text);padding:9px;font-family:var(--body);resize:vertical} .modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px} /* tables: tracker + registers + equipment */ .tracker-wrap,.table-wrap{overflow-x:auto;margin:0 0 26px} .tracker{border-collapse:collapse;width:100%;font-size:14px} .tracker th,.tracker td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--bd)} .tracker th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--dim);font-weight:700} .tracker td.chk,.tracker td.num{text-align:center;font-variant-numeric:tabular-nums} .tracker tbody tr:hover{background:var(--surface)} /* click-to-toggle approval cells: real empty checkboxes */ .tracker td.chk form{margin:0;display:inline-flex} .appr-check{cursor:pointer;width:22px;height:22px;padding:0;border-radius:5px; border:2px solid var(--bd);background:transparent;color:var(--ok); font-size:14px;font-weight:700;line-height:1;display:inline-flex;align-items:center; justify-content:center;transition:all .12s ease} .appr-check:hover{border-color:var(--accent)} .appr-check.on{background:var(--ok-bg);border-color:var(--ok)} /* status cell: pill + a "check all" shortcut */ .status-cell{white-space:nowrap} .status-cell .pill{vertical-align:middle} .status-cell form{display:inline;margin:0 0 0 8px} .check-all{cursor:pointer;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px; border:1px solid var(--bd);background:transparent;color:var(--muted);transition:all .12s ease} .check-all:hover{border-color:var(--ok);color:var(--ok);background:var(--ok-bg)} .tracker.log td{font-size:13px;color:var(--muted)} table.equip{font-size:13px} table.equip .hint{font-size:11px} table.equip tbody tr:nth-child(even){background:rgba(244,239,221,.028)} /* center everything in the equipment grid except the long Item column */ table.equip th,table.equip td{text-align:center;vertical-align:middle} table.equip th.col-item,table.equip td.col-item{text-align:left;min-width:200px} .tracker th.money,.tracker td.money{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} .tracker th.ctr,.tracker td.ctr{text-align:center} .owner-name{color:var(--muted)} .manual-lnk{font-size:16px;text-decoration:none} .equip-tools{display:flex;align-items:center;gap:14px;margin:6px 0 12px;flex-wrap:wrap} .equip-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px} .equip-nav a{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;background:var(--surface); border:1px solid var(--bd);border-radius:16px;padding:5px 12px;color:var(--muted);text-decoration:none} .equip-nav a:hover{border-color:var(--accent);color:var(--text);text-decoration:none} .chip-n{background:var(--elevated);color:var(--dim);border-radius:10px;padding:0 7px;font-size:11px;font-weight:700} /* collapsible guild sections (equipment) */ details.guild{border:1px solid var(--bd);border-radius:var(--radius);margin:0 0 12px;overflow:hidden;background:var(--card)} details.guild summary{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px; cursor:pointer;padding:12px 16px;background:var(--surface);font-weight:600;list-style:none} details.guild summary::-webkit-details-marker{display:none} details.guild summary::before{content:"▸";color:var(--dim);justify-self:start} details.guild[open] summary::before{content:"▾"} .g-name{font-size:15px;text-align:center;grid-column:2} .g-meta{font-size:12px;font-weight:600;color:var(--muted);justify-self:end;text-align:right;grid-column:3} .dq-flags{background:var(--warn-bg);border-radius:var(--radius);padding:12px 16px;margin:14px 0 24px;font-size:13px} .dq-flags ul{margin:6px 0 0;padding-left:20px} .dq-flags li{margin:5px 0} /* changelog + recent */ .recent{margin:0 0 30px;padding:16px 18px;background:var(--card);border:1px solid var(--bd);border-radius:var(--radius)} .recent-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px} .recent-head h2{margin:0;font-size:16px} .recent-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px} .recent-list li{display:flex;align-items:center;gap:10px;font-size:14px} .cl-date{font-variant-numeric:tabular-nums;color:var(--dim);font-size:12px;font-weight:600;min-width:82px} .changelog{display:flex;flex-direction:column;gap:20px} .cl-entry{border-left:3px solid var(--accent);padding:2px 0 2px 16px} .cl-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:6px} .cl-doc{font-weight:700;color:var(--text)} .cl-doc.app,.recent-list .app{color:var(--accent);font-weight:700} .cl-body{font-size:14px;line-height:1.6;color:var(--muted)} .cl-body ul{margin:4px 0;padding-left:20px} /* activity log */ .gov-log{display:flex;flex-direction:column;gap:2px} .log-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:9px 4px;border-bottom:1px solid var(--bd);font-size:14px} .log-ts{color:var(--dim);font-size:12px;min-width:120px} .log-doc{flex:1;min-width:200px} .log-field{color:var(--muted);font-size:13px} /* flash + footer + forms */ .flash{margin-bottom:18px} .msg{padding:10px 14px;border-radius:9px;margin-bottom:8px;font-size:14px;background:var(--surface);border:1px solid var(--bd)} .msg.success{background:var(--ok-bg);color:var(--ok)} .msg.error{background:rgba(224,133,133,.14);color:#e08585} .foot{margin-top:60px;padding-top:20px;border-top:1px solid var(--bd);color:var(--dim);font-size:12px} .auth-card{max-width:400px;margin:8vh auto;background:var(--card);border:1px solid var(--bd);border-radius:var(--radius);padding:30px} .auth-card input{width:100%;background:var(--bg);border:1px solid var(--bd);border-radius:8px;color:var(--text);padding:10px;margin:6px 0 14px;font-family:var(--body)} .auth-card label{font-size:13px;color:var(--muted)} @media(max-width:820px){ .sidebar{transform:translateX(-100%);transition:transform .2s;width:270px} body.nav-open .sidebar{transform:none} .content{margin-left:0;padding:64px 20px 60px} .menu-btn{display:block} .doc{padding:28px 22px} } /* ── Entity registers (People / Vendors / Software / Equipment) ──────────────── */ /* Attribute chips are NOT status: they render as quiet neutral labels, never colored pills. This is what keeps a card from becoming pill salad — only the ONE status pill carries color. */ .pill.type,.pill.role,.pill.space{background:var(--muted-bg);color:var(--muted);font-weight:500} .avatar{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto; width:36px;height:36px;border-radius:50%;background:var(--elevated);border:1px solid var(--bd); color:var(--accent);font-family:var(--head,inherit);font-weight:700;font-size:13px;letter-spacing:.02em} .avatar.sm{width:26px;height:26px;font-size:11px} .avatar.lg{width:60px;height:60px;font-size:21px} /* Live search + type-ahead */ .people-search{position:relative;max-width:520px;margin:14px 0 12px} .people-search input{width:100%;background:var(--surface);border:1px solid var(--bd);border-radius:9px; color:var(--text);padding:11px 14px;font-size:15px;font-family:inherit} .people-search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)} .ac-list{position:absolute;z-index:20;top:calc(100% + 6px);left:0;right:0;max-height:340px;overflow-y:auto; background:var(--elevated);border:1px solid var(--bd);border-radius:10px;box-shadow:var(--shadow,0 10px 30px rgba(0,0,0,.5));padding:5px} .ac-item{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:7px;color:var(--text)} .ac-item:hover,.ac-item.on{background:var(--accent-glow);text-decoration:none} .ac-txt{display:flex;flex-direction:column;min-width:0} .ac-alias,.ac-meta{font-size:11.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ac-alias{color:var(--muted)} /* Filter chips */ .people-filters{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:12px 0 16px} .fchip{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--bd); border-radius:20px;padding:5px 12px;font-size:12.5px;color:var(--muted)} .fchip:hover{border-color:var(--accent);color:var(--text);text-decoration:none} .fchip.on{background:var(--accent-glow);border-color:var(--accent);color:var(--accent);font-weight:600} .fsep{width:1px;height:20px;background:var(--bd);margin:0 4px} .filter-note{margin:-6px 0 14px} /* Person cards */ .people-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;padding:4px 0 8px} .pcard{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--bd); border-radius:var(--radius,10px);padding:11px 12px;color:var(--text);transition:.14s} .pcard:hover{border-color:var(--accent);transform:translateY(-2px);text-decoration:none;box-shadow:var(--shadow)} .pc-main{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1} .pc-name{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pc-alias{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pc-tags{display:flex;flex-wrap:wrap;gap:4px} .pc-tags .pill{font-size:10.5px;padding:2px 8px} .pc-id{font-size:10.5px;color:var(--dim);font-weight:700;letter-spacing:.04em;align-self:flex-start} .pc-id.big{font-size:13px;color:var(--accent);margin-left:auto} .pronouns{font-weight:400;font-size:.72em;color:var(--muted)} .empty{color:var(--muted);background:var(--card);border:1px dashed var(--bd);border-radius:10px;padding:20px;text-align:center} /* Profile */ .profile-head{display:flex;align-items:center;gap:16px;margin:6px 0 18px} .profile-head .page-title{margin:0} .p-alias{color:var(--muted);font-size:13px;margin:4px 0 0} .p-tags{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 0} .p-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;align-items:start} .p-card{background:var(--card);border:1px solid var(--bd);border-radius:var(--radius,10px);padding:14px 16px} .p-card h2{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin:0 0 10px} .p-dl{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;margin:0;font-size:13.5px} .p-dl dt{color:var(--dim);font-size:12px;padding-top:2px} .p-dl dd{margin:0;word-break:break-word} .p-card .tracker{width:100%;font-size:13px} .p-card+.p-card{margin-top:12px} /* Finance statement profile: PDF embed + wide (monthly) figure tables scroll inside the card. */ .pdf-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 10px} .pdf-head h2{margin:0} .pdf-embed{border:1px solid var(--bd);border-radius:var(--r-sm,8px);overflow:hidden;background:var(--elevated)} .pdf-embed object{display:block;border:0;width:100%} .p-card .doc-body{overflow-x:auto} .p-card .doc-body table{font-size:12.5px} .back-lnk{font-size:13px;color:var(--muted)} /* ---- document breadcrumbs ----------------------------------------------- The register first — that crumb is a destination, not a history entry, so "all documents" sits in the same place on every document. Then the documents the reader clicked through to get here. Wraps rather than scrolls: on a narrow screen a second line of crumbs is readable and a horizontally-scrolled one is not. Long titles ellipsize so one verbose policy name can't push the rest off the row; the full title is on the link's tooltip. */ .doc-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px; font-size:13px;line-height:1.5;margin:0 0 var(--s2)} .doc-crumbs a{color:var(--muted);text-decoration:none; max-width:26ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .doc-crumbs a:hover{color:var(--accent);text-decoration:underline} .doc-crumbs a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px} .doc-crumbs .sep{color:var(--dim);flex:none} .prov{margin-top:16px;font-size:12px;color:var(--dim);border-top:1px solid var(--bd);padding-top:10px;line-height:1.6} /* ════════ THE SHARED ENTITY SYSTEM ════════ One list card (.ecard) and one profile frame (.entity-head + .key-facts + .relations) used by every register, so moving between them feels like one system. Strict slots; the anti-pill-salad rule lives in the templates (one status pill per card), not here. */ /* the one list card — leading mark · name+subtitle · ONE status · optional metric */ .reg-list{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s1) 0 var(--s2)} .ecard{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s3); background:var(--card);border:1px solid var(--bd);border-radius:var(--r-md);padding:var(--s3) var(--s4); color:var(--text);transition:border-color .12s,transform .12s,box-shadow .12s;position:relative} .ecard:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow);text-decoration:none} /* the lit-desk bookmark ribbon — the one flourish, brand amber on hover */ .ecard::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0; background:var(--accent);opacity:0;transition:opacity .12s} .ecard:hover::before{opacity:1} .ecard-main{display:flex;flex-direction:column;min-width:0;gap:1px} .ecard-name{font-weight:600;font-size:var(--t-body);white-space:normal;overflow-wrap:anywhere} .ecard-sub{font-size:var(--t-meta);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ecard-sub .rid{font-family:var(--mono);font-size:var(--t-micro);color:var(--dim);margin-right:6px} .ecard-right{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s1);white-space:nowrap} .ecard-metric{font-variant-numeric:tabular-nums;font-weight:700;font-size:var(--t-meta);color:var(--text)} /* the one profile frame — identity header → key-facts → relationships → body → provenance */ .entity-head{display:flex;align-items:center;gap:var(--s4);margin:6px 0 var(--s4);flex-wrap:wrap} .entity-head .avatar.lg,.entity-head .entity-mark{flex:0 0 auto} .entity-mark{display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px; border-radius:var(--r-md);background:var(--elevated);border:1px solid var(--bd);font-size:30px;line-height:1} .entity-mark.card-mark{width:36px;height:36px;font-size:19px;border-radius:var(--r-sm)} .entity-head .page-title{margin:0} .entity-head .head-id{margin-left:auto;align-self:flex-start;font-family:var(--mono);font-size:var(--t-meta); color:var(--accent);font-weight:700} .entity-context{color:var(--muted);font-size:var(--t-meta);margin:4px 0 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center} .key-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--s2) var(--s5); background:var(--card);border:1px solid var(--bd);border-radius:var(--r-md);padding:var(--s4);margin:0 0 var(--s4)} .key-facts div{display:flex;flex-direction:column;gap:2px;min-width:0} .key-facts dt{font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.08em;color:var(--dim)} .key-facts dd{margin:0;font-size:var(--t-meta);color:var(--text);word-break:break-word} /* relationships — the cross-register links that make it a graph, not eight lists */ .relations{background:var(--card);border:1px solid var(--bd);border-radius:var(--r-md);padding:var(--s4);margin:0 0 var(--s4)} .relations h2{font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin:0 0 var(--s3)} .rel-row{display:flex;gap:var(--s3);align-items:baseline;padding:var(--s1) 0;border-top:1px solid var(--bd);font-size:var(--t-meta)} .rel-row:first-of-type{border-top:none} .rel-label{color:var(--dim);min-width:96px;flex:0 0 auto} .rel-vals{display:flex;flex-wrap:wrap;gap:6px} .rel-link{display:inline-flex;align-items:center;gap:4px;background:var(--elevated);border:1px solid var(--bd); border-radius:var(--r-sm);padding:2px 9px;color:var(--accent);font-weight:600} .rel-link:hover{border-color:var(--accent);text-decoration:none} .rel-link .rid{font-family:var(--mono);font-size:var(--t-micro);color:var(--dim);font-weight:500} .rel-plain{color:var(--muted)} /* theme toggle in the sidebar footer */ .theme-toggle{display:inline-flex;align-items:center;gap:6px;background:var(--elevated);border:1px solid var(--bd); color:var(--muted);border-radius:var(--r-pill);padding:5px 12px;font-size:12px;cursor:pointer;font-family:var(--body)} .theme-toggle:hover{border-color:var(--accent);color:var(--text)} /* document approval ladder — a compact track in the key-facts strip, not four colored pills */ .ladder{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:var(--t-meta);align-items:center} .ladder span{color:var(--dim)} .ladder span.on{color:var(--ok)} .ladder-f{margin:0} .ladder-btn{background:none;border:1px solid transparent;border-radius:6px;color:var(--dim); cursor:pointer;font:inherit;font-size:var(--t-meta);padding:1px 6px} .ladder-btn:hover{border-color:var(--bd);color:var(--text)} .ladder-btn.on{color:var(--ok)} /* inline color swatch — rendered before a `#hex` code span (e.g. guild color codes) */ .swatch{display:inline-block;width:.75em;height:.75em;border-radius:3px;margin-right:.35em; vertical-align:baseline;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)} /* people hover-cards — a name gets a dotted underline; hover/focus shows a mini contact card */ .person-ref{border-bottom:1px dotted var(--accent);cursor:help} .person-ref:hover,.person-ref:focus{color:var(--accent);outline:none} #person-card{position:fixed;z-index:1200;max-width:290px;background:var(--card);color:var(--text); border:1px solid var(--bd2);border-radius:var(--r-md);box-shadow:var(--shadow); padding:10px 13px;font-size:var(--t-meta);line-height:1.45} #person-card .pc-name{font-weight:700;font-size:var(--t-h3)} #person-card .pc-pro{font-weight:400;color:var(--dim);font-size:var(--t-micro)} #person-card .pc-role{color:var(--muted);margin-top:1px} #person-card .pc-contact{margin-top:7px;word-break:break-word} #person-card .pc-contact a{color:var(--accent)} #person-card .pc-phone{color:var(--muted)} #person-card .pc-link{display:inline-block;margin-top:8px;font-size:var(--t-micro);color:var(--accent)} /* Accessibility section — labeled Theme + Text-size rows in the sidebar */ .a11y{margin-top:6px} .a11y-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 2px} .a11y-label{font-size:12.5px;color:var(--muted);font-weight:500} .fs-controls{display:inline-flex;gap:4px} .fs-btn{display:inline-flex;align-items:center;justify-content:center;min-width:30px;background:var(--elevated); border:1px solid var(--bd);color:var(--muted);border-radius:var(--r-pill);padding:5px 8px;cursor:pointer; font-family:var(--body);line-height:1;font-weight:600} .fs-btn:hover{border-color:var(--accent);color:var(--text)} .fs-btn .fs-minus,.fs-btn .fs-plus{margin-left:1px} .fs-btn:first-child{font-size:11px} /* A− smaller glyph */ .fs-reset{font-size:13px} /* A baseline */ .fs-btn:last-child{font-size:15px} /* A+ larger glyph */ /* version pills + before/after hover card + historical version view The pill stays .pill.muted — colour on a pill encodes STATE (see the pill rule above), and a version number is a neutral label. The interactive affordance is therefore the same dotted underline .person-ref uses, not a colour. */ .vpill{cursor:pointer;text-decoration:none} .vpill:hover,.vpill:focus{background:var(--accent);color:var(--navy);outline:none} /* Changelog bullets are drawn, not left to the browser: each one is the hover target for "what did this change actually do?", and a default 4px disc is too small to aim at and can't take an event anyway. `.dots` is set by changelog.js, so without it the native bullets survive. */ .changelog.dots .cl-body ul{list-style:none;padding-left:0} .changelog.dots .cl-body li{position:relative;padding-left:25px;margin:9px 0} .cl-dot{position:absolute;left:1px;top:.42em;width:11px;height:11px;border-radius:50%; box-sizing:border-box;border:2px solid var(--bd2);background:transparent} /* Only bullets with a stored snapshot behind them can answer anything — those are the live ones. */ .cl-dot-live{border-color:var(--accent);cursor:help; transition:transform .12s ease,background .12s ease,box-shadow .12s ease} .cl-dot-live:hover,.cl-dot-live:focus{background:var(--accent);transform:scale(1.35); box-shadow:0 0 0 4px var(--accent-glow);outline:none} #version-card{position:fixed;z-index:1200;width:min(460px,calc(100vw - 24px));max-height:min(70vh,540px); overflow-y:auto;background:var(--card);color:var(--text);border:1px solid var(--bd2); border-radius:var(--r-md);box-shadow:var(--shadow);padding:12px 14px;font-size:var(--t-meta);line-height:1.5} #version-card .vc-head{font-weight:700;font-family:var(--head);margin-bottom:8px} #version-card .vc-from{font-weight:400;color:var(--dim);font-size:var(--t-micro)} #version-card .vc-empty{color:var(--muted);padding:4px 0} #version-card .vc-sec{margin-bottom:11px;padding-bottom:9px;border-bottom:1px solid var(--bd)} #version-card .vc-sec:last-of-type{border-bottom:0} #version-card .vc-name{font-weight:600;font-size:var(--t-micro);letter-spacing:.04em; text-transform:uppercase;color:var(--muted);margin-bottom:5px} /* Before/after pair. Stacked by default — the phone case is the constrained one, so it's the base rule and the wide screen is the enhancement. `grid-auto-flow` (not fixed columns) so a section with only one side fills the width instead of sitting beside an empty column. */ #version-card .vc-pair{display:grid;grid-auto-flow:row;gap:5px} /* .q.del / .q.ins are the established removed/added vocabulary — same borders, same intent. */ #version-card .vc-side{padding:5px 9px;border-left:3px solid;border-radius:0 var(--r-sm) var(--r-sm) 0; margin-bottom:5px;background:var(--elevated);font-size:12.5px} #version-card .vc-before{border-color:var(--bad);color:var(--muted)} #version-card .vc-after{border-color:var(--ok)} /* BEFORE / AFTER headings: centered, bold, and bigger than the text they label — they're the card's orientation, and at micro size with .7 opacity they read as a footnote instead. */ #version-card .vc-tag{display:block;text-align:center;font-weight:800;font-size:13px; font-family:var(--head);text-transform:uppercase;letter-spacing:.09em;opacity:1; margin:0 0 5px;padding-bottom:4px;border-bottom:1px solid var(--bd)} #version-card .vc-before .vc-tag{color:var(--bad)} #version-card .vc-after .vc-tag{color:var(--ok)} /* The words that actually changed, marked on BOTH sides: struck where they were removed, solid where they were added. Without this you get two blocks of prose and have to diff by eye. */ #version-card mark.vc-del,#version-card mark.vc-ins{border-radius:3px;padding:0 2px;color:inherit; box-decoration-break:clone;-webkit-box-decoration-break:clone} #version-card mark.vc-del{background:var(--bad-bg);text-decoration:line-through; text-decoration-thickness:1px;text-decoration-color:var(--bad)} #version-card mark.vc-ins{background:var(--ok-bg);font-weight:600} #version-card .vc-side p{margin:.3em 0} #version-card .vc-side ul,#version-card .vc-side ol{margin:.3em 0;padding-left:1.1em} #version-card .vc-more{color:var(--dim);font-size:var(--t-micro);margin:6px 0} #version-card .vc-btn{display:inline-block;margin-top:4px;padding:5px 11px;font-size:var(--t-micro)} /* Wide screens: before and after side by side, which is what makes them comparable at a glance — the eye tracks across a line instead of holding the top block in memory while reading the bottom. The card widens to pay for the second column; two 215px columns inside the narrow card would be worse than stacking. 900px so a portrait tablet keeps the stacked layout. `place()` reads offsetWidth and clamps to the viewport, so nothing here can push the card off-screen. */ @media(min-width:900px){ #version-card{width:min(720px,calc(100vw - 24px))} #version-card .vc-pair{grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;align-items:stretch} #version-card .vc-side{margin-bottom:0} } /* historical version page — changed sections called out inside the cream-paper .doc */ .doc h2.chg{position:relative} .doc h2.chg .chg-badge{display:inline-block;margin-left:9px;padding:2px 8px;border-radius:var(--r-pill); background:var(--brand-amber);color:var(--navy);font-family:var(--body);font-size:11px; font-weight:700;letter-spacing:.03em;text-transform:uppercase;vertical-align:middle} /* "How to read this" note on the changelog pages. Collapsible and open by default: useful the first time, and one click out of the way forever after. */ .cl-help{background:var(--card);border:1px solid var(--bd);border-radius:var(--radius); padding:11px 15px;margin:0 0 22px;font-size:var(--t-meta);max-width:70ch} .cl-help>summary{cursor:pointer;font-weight:600;color:var(--text);list-style:none; font-family:var(--head);letter-spacing:.01em} .cl-help>summary::-webkit-details-marker{display:none} .cl-help>summary::before{content:"▸ ";color:var(--accent)} .cl-help[open]>summary::before{content:"▾ "} .cl-help[open]>summary{margin-bottom:9px} .cl-help-body p{margin:0 0 7px;color:var(--muted);line-height:1.55;position:relative} .cl-help-body p:last-child{margin-bottom:0} .cl-help-why{font-size:var(--t-micro);color:var(--dim);border-top:1px solid var(--bd);padding-top:8px} .cl-help-why+.cl-help-why{border-top:0;padding-top:0} /* Inline specimens of the two controls, so the note points at the real thing. */ .cl-help-dot{position:static;display:inline-block;vertical-align:middle;margin-right:7px;cursor:default} .cl-help-dot:hover{background:transparent;transform:none;box-shadow:none} .cl-help-pill{margin-right:7px;vertical-align:middle} /* ---- inline editing (superuser only; nothing below renders for anyone else) ---- */ .doc.editable p.ie-target { position: relative; } .ie-pencil { position: absolute; left: -1.55rem; top: 0.15rem; border: 0; background: none; cursor: pointer; font-size: 0.95rem; line-height: 1; padding: 0.1rem 0.2rem; color: var(--muted, #8a8a8a); opacity: 0; transition: opacity .12s ease; } /* Hidden until you go looking for it. An editing affordance on every paragraph of a policy is visual noise on a page whose main job is being read. */ .doc.editable p.ie-target:hover .ie-pencil, .ie-pencil:focus-visible { opacity: 1; } .ie-pencil:hover { color: var(--fg, #222); } .inline-edit { margin: 0.4rem 0 0.9rem; } .inline-edit textarea { width: 100%; box-sizing: border-box; min-height: 90px; font: 0.86rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: 0.6rem 0.7rem; border: 1px solid var(--rule, #d8d8d8); border-radius: 6px; background: var(--card, #fff); color: inherit; resize: vertical; } .inline-edit textarea:focus { outline: 2px solid var(--accent, #54748D); outline-offset: 1px; } .ie-bar { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; flex-wrap: wrap; } .ie-save, .ie-cancel { font: inherit; font-size: 0.82rem; padding: 0.28rem 0.7rem; border-radius: 5px; cursor: pointer; border: 1px solid var(--rule, #d8d8d8); background: var(--card, #fff); color: inherit; } .ie-save { background: var(--accent, #54748D); border-color: var(--accent, #54748D); color: #fff; } .ie-save[disabled] { opacity: 0.6; cursor: default; } .ie-msg { font-size: 0.8rem; color: var(--muted, #777); } .ie-msg.bad { color: #b3261e; font-weight: 600; } .ie-hint { font-size: 0.74rem; color: var(--muted, #999); margin-left: auto; } /* A save is silent otherwise — the paragraph just swaps. This says "that landed." */ @keyframes ie-saved { from { background: rgba(227, 164, 60, 0.28); } to { background: transparent; } } p.ie-saved { animation: ie-saved 1.2s ease-out; } /* ---- document details, behind a button ---------------------------------- The key-facts strip used to sit open between the title and the first line of the document. It is working state — who has approved it, where the markdown lives, when it last synced — and a reader is here for the text.
does the whole job natively: keyboard-operable, no JS, no ARIA to get wrong. The panel stays in normal flow and PUSHES the document down (Morlock, 2026-09-11). It was absolutely positioned to overlay, on the reasoning that someone who opens it is looking at it rather than reading past it. In use that is not how it reads: the panel lands on top of the first paragraph, so opening it hides the thing you are trying to keep your place in, and closing it is the only way to see the text again. Pushing down is also what the narrow-screen fallback already did — one behaviour at every width now, instead of two. */ .key-facts-wrap{margin:0 0 var(--s4)} .key-facts-wrap > summary{ display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none; font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.08em;color:var(--dim); background:var(--card);border:1px solid var(--bd);border-radius:var(--r-sm);padding:4px 10px} .key-facts-wrap > summary::-webkit-details-marker{display:none} .key-facts-wrap > summary::before{content:"▸";font-size:.9em;line-height:1} .key-facts-wrap[open] > summary::before{content:"▾"} .key-facts-wrap > summary:hover{border-color:var(--accent);color:var(--accent)} .key-facts-wrap > summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .key-facts-wrap[open] > .key-facts{margin:6px 0 0}