/* 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; /* sidebar is ALWAYS the dark navy desk-rail, so its text uses fixed light/branded colors in BOTH themes (theme vars flip dark in light mode and would vanish against the navy). */ --nav-ink:#d7dfe8; /* readable light slate for nav labels */ --nav-ink-strong:#f4efdd; /* cream — brand/home/hover */ --nav-head:#eab24e; /* warm amber — section headers */ --nav-dim:#9aa8ba; /* quieter meta text */ --nav-hover-bg:rgba(244,239,221,.08); --nav-active-bg:rgba(227,164,60,.12); /* 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; /* fine warm paper grain layered over the cream — subtle "tooth", not a medieval scroll */ --paper-tex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.045'/%3E%3C/svg%3E"); } /* 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 — cream documents on a PL slate-blue desk */ :root[data-theme="light"]{ --bg:#ccd7e0; --surface:#f1ead9; --card:#f7f2e4; --elevated:#ece4d1; --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:#ccd7e0; --surface:#f1ead9; --card:#f7f2e4; --elevated:#ece4d1; --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} .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:11px;margin-bottom:18px;text-decoration:none; padding:11px 13px;border-radius:12px;background:var(--nav-hover-bg);border:1px solid rgba(244,239,221,.14); transition:border-color .15s,background .15s,box-shadow .15s,transform .05s} .brand:hover{background:rgba(244,239,221,.12);border-color:var(--brand-amber); box-shadow:0 0 0 3px var(--accent-glow);text-decoration:none} .brand:active{transform:translateY(1px)} .brand-mark{flex:0 0 auto;border-radius:7px} .brand-text strong{display:block;font-family:var(--head);font-size:18.5px;color:var(--nav-ink-strong);letter-spacing:.2px} .brand-text small{display:block;font-size:12px;color:var(--brand-amber);letter-spacing:.14em;text-transform:uppercase;margin-top:2px} .search input{width:100%;background:rgba(244,239,221,.07);border:1px solid rgba(244,239,221,.16);border-radius:9px; color:var(--nav-ink-strong);padding:9px 12px;font-size:14.5px;font-family:var(--body)} .search input::placeholder{color:var(--nav-dim)} .search input:focus{outline:none;border-color:var(--brand-amber);box-shadow:0 0 0 3px var(--accent-glow)} .nav{margin-top:18px} .home-link{display:block;font-weight:600;font-size:15.5px;color:var(--nav-ink-strong);padding:7px 8px;border-radius:7px;margin-bottom:6px} .home-link:hover{background:var(--nav-hover-bg);text-decoration:none} .nav-section{margin:14px 0} .nav-h{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--nav-head); font-weight:700;padding:0 8px;margin-bottom:6px;text-align:center} .nav-item{display:block;color:var(--nav-ink);padding:7px 8px;border-radius:7px;font-size:15px; text-decoration:none;border:none;background:none;width:100%;text-align:left;cursor:pointer;font-family:var(--body)} .nav-item:hover{background:var(--nav-hover-bg);color:var(--nav-ink-strong);text-decoration:none} .nav-item.active{background:var(--nav-active-bg);color:var(--brand-amber);font-weight:600;box-shadow:inset 3px 0 0 var(--brand-amber);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 rgba(244,239,221,.12);font-size:12.5px;color:var(--nav-dim)} .who a{color:var(--nav-ink)} .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{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:26px;align-items:start} @media(max-width:1000px){.doc-layout{grid-template-columns:1fr}} .doc{background-color:var(--paper);background-image:var(--paper-tex);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 sidebar */ .comments{background:var(--card);border:1px solid var(--bd);border-radius:var(--radius);padding:18px;position:sticky;top:20px} .comments h3{font-size:15px;margin:0 0 6px;display:flex;justify-content:space-between} .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.resolved{opacity:.55} .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} .c-meta{font-size:12px;color:var(--dim);margin-top:5px} .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-color:var(--card);background-image:var(--paper-tex);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)} .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 + text-size chips in the sidebar — fixed dark-rail styling in both themes */ .theme-toggle{display:inline-flex;align-items:center;gap:6px;background:var(--nav-hover-bg);border:1px solid rgba(244,239,221,.16); color:var(--nav-ink);border-radius:var(--r-pill);padding:5px 12px;font-size:12.5px;cursor:pointer;font-family:var(--body)} .theme-toggle:hover{border-color:var(--brand-amber);color:var(--nav-ink-strong)} /* signed home-page note */ .note-sig{font-style:italic;color:var(--muted);margin-top:2px} /* 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:14px;color:var(--nav-ink);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(--nav-hover-bg); border:1px solid rgba(244,239,221,.16);color:var(--nav-ink);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(--brand-amber);color:var(--nav-ink-strong)} .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 */ /* 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)} .ladder span{color:var(--dim)} .ladder span.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)}