/* Layout: brand-dark shell, gold used sparingly; one column of sections with a 4-up tile row, collapsing to 1-2 columns on phones */
:root{
  --obsidian:#0E0E0E; --charcoal:#1C1C1C; --panel:#151515; --line:rgba(245,242,236,.10); --line2:rgba(245,242,236,.18);
  --ivory:#F5F2EC; --ivory-2:rgba(245,242,236,.72); --graphite:#8A8783; --graphite-2:#5A5A5A;
  --gold:#B8976A; --gold-soft:rgba(184,151,106,.16); --gold-line:rgba(184,151,106,.45);
  --display:"Lora",Georgia,"Times New Roman",serif; --ui:"Poppins",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{background:var(--obsidian);color:var(--ivory)}
body{font-family:var(--ui);font-weight:300;font-size:14px;line-height:1.7;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--obsidian)}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);font-weight:400;text-wrap:balance;margin:0}
.label{font-size:10.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--graphite)}
.gold{color:var(--gold)}
.num{font-variant-numeric:tabular-nums}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* sign in */
#signin{min-height:100vh;display:grid;place-items:center;padding-block:40px;background:
  radial-gradient(1200px 600px at 80% -10%,rgba(184,151,106,.10),transparent 60%),var(--obsidian)}
.card-in{width:min(440px,100%);border:1px solid var(--line);background:linear-gradient(180deg,#141414,#101010);padding:36px 32px;border-radius:4px}
.mark{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:28px}
.mark .word{font-family:var(--ui);font-weight:500;letter-spacing:.42em;font-size:15px;padding-left:.42em}
.mark .rule{display:flex;align-items:center;gap:10px;color:var(--gold);font-size:9px;letter-spacing:.4em}
.mark .rule::before,.mark .rule::after{content:"";width:34px;height:1px;background:var(--gold-line)}
.card-in h1{font-size:28px;text-align:center;margin-bottom:6px}
.card-in p.sub{text-align:center;color:var(--ivory-2);margin:0 0 24px;font-size:13px}
.seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line2);border-radius:3px;margin-bottom:20px}
.seg button{background:none;border:0;padding:10px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;color:var(--graphite)}
.seg button[aria-pressed="true"]{background:var(--gold-soft);color:var(--ivory)}
.field{display:grid;gap:6px;margin-bottom:14px}
.field input,.field select{background:#0B0B0B;border:1px solid var(--line2);border-radius:3px;padding:11px 12px;font-size:14px;width:100%}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--gold);background:var(--gold);color:var(--obsidian);font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:12px;padding:12px 18px;border-radius:3px;cursor:pointer;width:100%}
.btn.ghost{background:none;color:var(--ivory);border-color:var(--line2)}
.demo{margin-top:22px;border-top:1px solid var(--line);padding-top:18px}
.demo .row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{border:1px solid var(--line2);border-radius:99px;padding:6px 12px;font-size:12px;background:none;cursor:pointer}
.chip:hover{border-color:var(--gold)}
.note{font-size:11.5px;color:var(--graphite);margin-top:14px;text-align:center}

/* app */
#app header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:rgba(14,14,14,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:18px;padding-block:14px;flex-wrap:wrap}
.bar .word{font-weight:500;letter-spacing:.36em;font-size:12.5px}
.bar .venue{color:var(--ivory-2);font-size:12.5px;border-left:1px solid var(--line2);padding-left:18px}
.bar .sp{flex:1}
.role{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--gold-line);color:var(--gold);padding:4px 10px;border-radius:99px}
.linkbtn{background:none;border:0;color:var(--graphite);cursor:pointer;font-size:12px}
nav.tabs{display:flex;gap:4px;overflow-x:auto;padding-bottom:0;scrollbar-width:none}
nav.tabs a{color:var(--graphite);text-decoration:none;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:10px 12px;border-bottom:2px solid transparent;white-space:nowrap}
nav.tabs a[aria-current="page"]{color:var(--ivory);border-bottom-color:var(--gold)}
main{padding-block:28px 64px}
section.view{display:grid;gap:28px}
.hero{display:grid;gap:8px;padding-block:6px 4px}
.hero h2{font-size:clamp(26px,3.4vw,38px);line-height:1.15}
.hero p{margin:0;color:var(--ivory-2);max-width:68ch}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.tile{background:var(--panel);padding:18px 18px 16px;display:grid;gap:6px;min-width:0}
.tile .v{font-family:var(--display);font-size:clamp(24px,2.6vw,32px);line-height:1.1}
.tile .s{font-size:12px;color:var(--ivory-2)}
.up{color:var(--gold)} .down{color:var(--graphite)}
.panel{border:1px solid var(--line);background:var(--panel);padding:20px;min-width:0}
.panel h3{font-size:20px;margin-bottom:4px}
.panel .cap{color:var(--graphite);font-size:12px;margin:0 0 14px}
.grid2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px}
.grid2e{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.read{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.read li{display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:start}
.read li::before{content:"";width:8px;height:8px;margin-top:8px;border-radius:50%;background:var(--gold)}
.read.work li::before{background:transparent;border:1px solid var(--ivory-2)}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite);font-weight:500;text-align:right;padding:8px 10px;border-bottom:1px solid var(--line2);white-space:nowrap}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl tr.hl td{background:var(--gold-soft)}
.scroll{overflow-x:auto}
.pill{display:inline-block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:3px 9px;border-radius:99px;border:1px solid var(--line2);color:var(--ivory-2)}
.pill.ok{border-color:var(--gold-line);color:var(--gold)}
.pill.due{border-color:var(--ivory-2);color:var(--ivory)}
.pill.late{background:var(--ivory);color:var(--obsidian);border-color:var(--ivory)}
svg text{font-family:var(--ui);fill:var(--graphite);font-size:11px}
.legend{display:flex;gap:16px;font-size:12px;color:var(--ivory-2);flex-wrap:wrap;margin-top:8px}
.legend i{display:inline-block;width:14px;height:3px;vertical-align:middle;margin-right:6px}
.gauge{height:10px;background:#0B0B0B;border:1px solid var(--line2);border-radius:99px;position:relative;overflow:hidden}
.gauge b{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,rgba(184,151,106,.55),var(--gold));border-radius:99px}
.ladder{display:grid;gap:8px}
.rung{display:grid;grid-template-columns:150px 1fr 90px;gap:12px;align-items:center;font-size:13px}
.rung .track{height:8px;background:#0B0B0B;border:1px solid var(--line);border-radius:99px;position:relative}
.rung.on .track{border-color:var(--gold-line)}
.rung.on{color:var(--ivory)} .rung{color:var(--graphite)}
.init{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.init .it{background:var(--panel);display:grid;grid-template-columns:minmax(0,1fr) 110px 110px;gap:14px;padding:14px 16px;align-items:center}
.init .it h4{margin:0;font-weight:500;font-size:14px}
.init .it p{margin:2px 0 0;color:var(--ivory-2);font-size:12.5px}
.checks{display:grid;grid-template-columns:110px repeat(7,minmax(0,1fr));gap:4px;font-size:11px;align-items:center}
.checks .c{height:28px;border:1px solid var(--line2);display:grid;place-items:center;border-radius:2px;color:var(--graphite)}
.checks .c.y{border-color:var(--gold-line);background:var(--gold-soft);color:var(--gold)}
.checks .c.n{border-style:dashed}
.foot{border-top:1px solid var(--line);padding-block:22px;color:var(--graphite);font-size:11.5px}
.only{display:none}
/* weak spots: two cards a row, one on phones */
.spots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}
.spots .panel{margin:0}
.spot-h{display:flex;justify-content:space-between;align-items:center;gap:10px}
.spot-v{font:400 34px/1.1 Lora,Georgia,serif;margin:10px 0 2px}
.spot-c{margin:14px 0 6px}
.spot-w{font-size:13px;color:var(--ivory-2);line-height:1.6;margin:8px 0 8px}
/* growth plan */
.agenda{margin:0;padding:0;list-style:none;counter-reset:a;display:grid;gap:0}
.agenda li{counter-increment:a;display:grid;grid-template-columns:28px 92px 1fr;gap:10px;align-items:baseline;padding:11px 0;border-top:1px solid var(--line)}
.agenda li::before{content:counter(a);font-family:var(--display);color:var(--gold);font-size:16px}
.agenda .tag{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ivory-2)}
.goal{margin-top:26px}
.inis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
.ini{border:1px solid var(--line);background:#121212;padding:14px 16px;min-width:0}
.ini-h{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.ini h4{margin:0;font-weight:500;font-size:14.5px}
.ini p{margin:6px 0 8px;color:var(--ivory-2);font-size:12.5px;line-height:1.6}
.ini-m{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--ivory)}
.ini-m .label,.ini-n .label{margin-right:4px}
.ini-n{margin-top:8px;font-size:12.5px;color:var(--ivory)}
.sub-panel{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
/* what we need */
.reqs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.reqs .panel{margin:0}
.req h4{margin:0;font-weight:500;font-size:15px}
.req p{font-size:13px;line-height:1.6;color:var(--ivory-2);margin:0 0 10px}
.req p .label{color:var(--gold)}
.req .reply{border-left:2px solid var(--gold-line);padding-left:10px;margin:6px 0 10px}
.req-f{display:grid;gap:8px;margin-top:10px}
.req-f textarea{min-height:64px}
/* item analysis */
.bars{display:grid;gap:8px}
.brow{display:grid;grid-template-columns:130px 1fr 80px;gap:10px;align-items:center;font-size:12.5px}
.brow .track{height:8px;background:#0B0B0B;border:1px solid var(--line2);border-radius:99px;position:relative;overflow:hidden}
.brow .track b{position:absolute;inset:0 auto 0 0;background:var(--gold);border-radius:99px}
.brow .num{text-align:right}
.hours{display:flex;gap:4px;align-items:flex-end;height:160px;margin-top:10px}
.hours .h{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end}
.hours .stack{width:100%;background:var(--gold);position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:2px}
.hours .stack i{display:block;background:var(--ivory-2);width:100%}
@media (max-width:860px){.inis,.reqs{grid-template-columns:1fr}.agenda li{grid-template-columns:22px 1fr}.agenda .tag{grid-column:2}.agenda li>span:last-child{grid-column:2}}
@media (max-width:860px){.spots{grid-template-columns:1fr}.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.grid2,.grid2e{grid-template-columns:1fr}.bar .venue{border:0;padding:0;width:100%;order:3}}
@media (max-width:520px){.init .it{grid-template-columns:1fr 1fr}.init .it>div:first-child{grid-column:1/-1}.rung{grid-template-columns:110px 1fr 70px}.checks{grid-template-columns:70px repeat(7,minmax(0,1fr))}.card-in{padding:28px 20px}}
@media (prefers-reduced-motion:no-preference){.gauge b,.rung .track b{transition:width .8s ease}}

.mono{width:54px;height:54px;margin-bottom:6px}
.mono text{font-family:var(--display);font-size:30px;fill:var(--gold);letter-spacing:1px}
.msg{min-height:1.4em;font-size:12.5px;color:var(--ivory-2);margin:12px 0 0;text-align:center}
.viewas{display:flex;align-items:center;gap:8px}
.viewas select{background:#0B0B0B;border:1px solid var(--line2);border-radius:3px;padding:4px 8px;font-size:12px}
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--ivory);color:var(--obsidian);padding:10px 16px;border-radius:3px;font-size:13px;z-index:20;max-width:calc(100% - 32px)}
.doc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 16px;background:var(--panel)}
.docs{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.doc h4{margin:0;font-weight:500;font-size:14px}
.doc p{margin:2px 0 0;color:var(--ivory-2);font-size:12.5px}
.doc .acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.btn.sm{width:auto;padding:8px 12px;font-size:11px}
.drop{border:1px dashed var(--gold-line);padding:22px;text-align:center;color:var(--ivory-2);border-radius:3px}
.drop.over{background:var(--gold-soft)}
.formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.formgrid .full{grid-column:1/-1}
textarea{background:#0B0B0B;border:1px solid var(--line2);border-radius:3px;padding:10px 12px;width:100%;min-height:90px;font:inherit;color:inherit}
.field select{appearance:auto}
.sub-band{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.sub-band>div{background:var(--panel);padding:16px}
.big{font-family:var(--display);font-size:26px;line-height:1.15}
.small{font-size:12px;color:var(--graphite)}
.bar2{height:12px;background:#0B0B0B;border:1px solid var(--line2);border-radius:99px;position:relative;overflow:hidden;margin-top:8px}
.bar2 b{position:absolute;top:0;bottom:0;left:0;background:var(--gold)}
.bar2 i{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ivory)}
@media (max-width:860px){.sub-band{grid-template-columns:1fr}.formgrid{grid-template-columns:1fr}.doc{grid-template-columns:1fr}.doc .acts{justify-content:flex-start}}

a.chip{color:var(--ivory);text-decoration:none;display:inline-block}
a.chip:hover{color:var(--gold)}
details.more{margin-top:12px}
details.more summary{cursor:pointer;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);padding:8px 0}
.panel a:not(.btn):not(.chip){color:var(--gold)}
/* directors' forum */
.fi-k{display:flex;gap:26px;flex-wrap:wrap;margin-top:16px}.fi-k b{display:block;font-family:var(--display);font-size:26px;font-weight:400;color:var(--ivory)}
details.fi{margin:0 0 10px;padding:0}
details.fi>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:78px 1fr auto;gap:14px;align-items:center;padding:14px 18px}
details.fi>summary::-webkit-details-marker{display:none}
details.fi[open]>summary{border-bottom:1px solid var(--line)}
.fi-t{display:grid;gap:3px;min-width:0}.fi-t b{font-weight:500;font-size:15px}.fi-t .small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fi-m{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.fi-p{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:4px 0;border:1px solid var(--line2);border-radius:99px;color:var(--ivory-2)}
.fi-p.fi-high{background:var(--gold);border-color:var(--gold);color:var(--obsidian)}.fi-p.fi-medium{border-color:var(--gold-line);color:var(--gold)}
.fi-b{padding:14px 18px 18px}.fi-b p{font-size:13px;line-height:1.6;color:var(--ivory-2);margin:0 0 10px}.fi-b p .label{color:var(--gold)}
.fi-c{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:12px 0;padding:12px;border:1px solid var(--line);border-radius:10px}.fi-c .full{grid-column:1/-1}
.ticks{display:flex;gap:8px 16px;flex-wrap:wrap}.tick{display:inline-flex;gap:6px;align-items:center;font-size:13px;color:var(--ivory-2);cursor:pointer}
.fi-n{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:8px}.fi-n li{border-left:2px solid var(--gold-line);padding-left:10px;font-size:13px;line-height:1.55;color:var(--ivory)}.fi-n li .small{display:block}
@media (max-width:860px){details.fi>summary{grid-template-columns:64px 1fr}.fi-m{grid-column:1/-1;justify-content:flex-start}.fi-c{grid-template-columns:1fr 1fr}}
.tick input{width:auto;min-height:0;margin:0;padding:0;accent-color:var(--gold)}.tick{white-space:nowrap}
details.fi.panel{margin:0 0 10px}
input[type=color]{height:44px;padding:4px;cursor:pointer;background:none}
@media (min-width:861px){nav.tabs{flex-wrap:wrap;overflow-x:visible}}