/* Layout: a rail of sections on the left (a bottom bar on a phone), one section per tab on the right. The Org chart tab has a summary strip and search, then an org tree (owner > President > services > the division cards joined by drawn connectors), then the selected division's team panel. Single dark look by choice, with a faint blueprint grid. Light, glow and motion are in the last part of this file. */
:root{
  --bg:#0a111d; --surface:#0f1a2b; --surface-2:#142238; --line:#22344f; --line-2:#2f4768;
  --fg:#dbe6f5; --fg-dim:#8ea3c0; --fg-faint:#5f7595;
  --ok:#35d39a; --bad:#ff7a7a; --stale:#f0b94f; --planned:#5f7595; --skill:#5aa8ff; --gold:#f0b94f; --purple:#b690ff; --lime:#e0e36a;
  --font-display:"Barlow Semi Condensed","Arial Narrow",sans-serif;
  --font-body:"IBM Plex Sans",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
[hidden]{display:none!important}
body{background-color:var(--bg);background-image:linear-gradient(rgba(90,168,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(90,168,255,.045) 1px,transparent 1px);background-size:32px 32px;color:var(--fg);font:15px/1.5 var(--font-body);}
.wrap{max-width:1180px;margin:0 auto}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--skill);outline-offset:2px}
.eyebrow{font:500 11px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint)}
h1{font:600 32px/1.1 var(--font-display);margin:6px 0 12px;letter-spacing:.01em;text-wrap:balance}
.sub{color:var(--fg-dim);margin:0 0 14px;font-size:14px}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));border:1px solid var(--line);background:var(--surface);border-radius:6px;overflow:hidden;margin-bottom:14px}
.stat{padding:10px 16px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 -1px -1px 0}
.stat b{display:block;font:600 24px/1.1 var(--font-display);color:var(--fg)}
.stat span{font:500 10px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint)}
.stat.g b{color:var(--ok)} .stat.a b{color:var(--stale)}

.searchbar{display:flex;gap:10px;align-items:center;margin-bottom:26px}
.searchbar input{flex:1;min-width:0;background:var(--surface);color:var(--fg);border:1px solid var(--line-2);border-radius:4px;padding:10px 12px;font:400 14px var(--font-mono)}
.searchbar input::placeholder{color:var(--fg-faint)}

.org{position:relative}
#links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.tree{display:flex;flex-direction:column;align-items:center}
.node{display:block;border:1px solid var(--line-2);background:var(--surface);border-radius:6px;padding:10px 20px;text-align:center;min-width:200px;position:relative}
.node .t{font:600 18px/1.2 var(--font-display)}
.node .d{font-size:12px;color:var(--fg-dim)}
a.node:hover{background:var(--surface-2)}
.stem{width:1px;height:18px;background:var(--line-2)}

.grid{display:grid;grid-template-columns:repeat(var(--n,7),minmax(0,1fr));gap:34px 10px;margin-top:46px}
#panel{grid-column:1/-1;min-width:0}
.div:focus-visible{outline:2px solid var(--skill);outline-offset:2px}
.div .m em{font-style:normal;color:var(--ok)}
.bd{width:30px;height:30px;border-radius:6px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c);border:1px solid color-mix(in srgb,var(--c) 40%,transparent);flex:none}
.bd .ic{display:none;font-family:"Material Symbols Outlined";font-size:18px;line-height:1;font-weight:400;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";text-transform:none;letter-spacing:normal;white-space:nowrap;direction:ltr}
.bd .mg{font:600 15px var(--font-display)}
.icons .bd .ic{display:block}.icons .bd .mg{display:none}
.bd.lg{width:38px;height:38px}.bd.lg .ic{font-size:24px}

.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none;box-shadow:0 0 6px color-mix(in srgb,var(--ok) 55%,transparent)}
.dot.stale{background:var(--stale);box-shadow:0 0 6px color-mix(in srgb,var(--stale) 45%,transparent)}
.dot.planned{background:transparent;border:1.5px solid var(--planned);box-shadow:none}
.dot.sq{border-radius:2px}
.dot.sq.ok{background:var(--skill);box-shadow:0 0 6px color-mix(in srgb,var(--skill) 50%,transparent)}

.panel{margin-top:0;border:1px solid var(--line);border-left:3px solid var(--c);background:color-mix(in srgb,var(--c) 5%,var(--surface));border-radius:4px;padding:18px clamp(14px,3vw,22px)}
.ph{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-bottom:14px}
.ph .ttl{display:flex;align-items:center;gap:12px}
.ph h2{font:600 24px/1.1 var(--font-display);margin:0}
.ph .when{font:400 12px var(--font-mono);color:var(--fg-faint);display:block;margin-top:2px}
.links{display:flex;flex-wrap:wrap;gap:8px}
.btn{font:500 12px var(--font-body);border:1px solid var(--line-2);border-radius:4px;padding:5px 10px;color:var(--fg);background:var(--bg);display:inline-flex;gap:6px;align-items:center}
.btn:hover{border-color:var(--fg-dim);background:var(--surface-2)}
.btn.pri{border-color:var(--c);color:var(--c)}
.sh{display:flex;align-items:center;gap:10px;margin:26px 0 12px}
.sh:first-of-type{margin-top:6px}
.sh .st{font:600 15px/1 var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--sc,var(--c))}
.sh .ct{font:500 11px var(--font-mono);color:var(--fg-dim);border:1px solid var(--line-2);border-radius:10px;padding:1px 8px}
.sh .hr{flex:1;height:1px;background:linear-gradient(90deg,var(--sc,var(--c)),transparent);opacity:.45}
.sh .nt{font-size:12px;color:var(--fg-faint)}
.bd.sm{width:26px;height:26px;border-radius:6px;background:color-mix(in srgb,var(--sc,var(--c)) 16%,transparent);color:var(--sc,var(--c));border-color:color-mix(in srgb,var(--sc,var(--c)) 40%,transparent)}
.bd.sm .ic{font-size:18px}.bd.sm .mg{font-size:13px}
.person{--rc:var(--ok);display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:3px;border:1px solid var(--line-2);background:var(--surface-2);border-radius:8px;padding:14px;min-width:0}
.person.stale{--rc:var(--stale)}
.person.planned{--rc:var(--planned);background:transparent;border:1px dashed var(--line-2)}
.av{grid-row:1/3;width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:600 18px var(--font-display);letter-spacing:.02em;color:var(--c);background:color-mix(in srgb,var(--c) 18%,var(--bg));border:2px solid var(--rc);box-shadow:0 0 12px -3px var(--rc)}
.person.planned .av{background:transparent;border-style:dashed;box-shadow:none;color:var(--fg-faint)}
.person .nm{font:600 18px/1.15 var(--font-display);align-self:end;overflow-wrap:anywhere;color:var(--fg)}
.person.planned .nm{color:var(--fg-faint)}
.person .ss{font:400 11px var(--font-mono);color:var(--rc);align-self:start}
.person .rl,.tool .rl{font-size:13px;color:var(--fg-dim);line-height:1.4;position:relative;cursor:help}
.person .rl{grid-column:1/-1;margin-top:8px}
.person.planned .rl{color:var(--fg-faint)}
.person .links,.person .fl{grid-column:1/-1;margin-top:8px}
.tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;align-items:start}
.tool{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:3px;border:1px solid color-mix(in srgb,var(--skill) 45%,var(--line-2));background:color-mix(in srgb,var(--skill) 8%,var(--bg));border-radius:4px;padding:10px 12px;min-width:0}
.tool .tb{grid-row:1/3;width:40px;height:40px;border-radius:4px;background:var(--skill);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font:600 16px var(--font-mono)}
.tool .tb .ic{display:none;font-family:"Material Symbols Outlined";font-size:24px;line-height:1;font-feature-settings:"liga";text-transform:none;letter-spacing:normal;white-space:nowrap;direction:ltr}
.icons .tool .tb .ic{display:block}.icons .tool .tb .mg{display:none}
.tool .nm{font:500 14px var(--font-mono);color:var(--fg);align-self:end;overflow-wrap:anywhere}
.tool .tk{font:500 10px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--skill);align-self:start}
.tool .rl{grid-column:1/-1;margin-top:6px;font-size:13px}
.tool .links{grid-column:1/-1;margin-top:8px}
.rl[data-full]:hover::after,.rl[data-full]:focus::after,.pc[data-full]:hover::after{content:attr(data-full);position:absolute;left:0;top:calc(100% + 6px);z-index:20;width:max-content;max-width:min(320px,80vw);background:var(--pop-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--pop-fg);border:1px solid var(--line-2);border-radius:8px;padding:8px 11px;font:400 12px/1.45 var(--font-body);text-align:left;box-shadow:0 6px 18px rgba(var(--shade),.28);pointer-events:none}
.pc[data-full]:hover::after{left:0;top:calc(100% + 2px);max-width:240px}
.pc.er[data-full]:hover::after{left:auto;right:0}
.pc[aria-pressed="true"]::after{display:none!important}
.tt{position:relative}
.tl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.troot-wrap{display:flex;justify-content:center}
.troot{display:flex;align-items:center;gap:10px;border:1px solid color-mix(in srgb,var(--c) 55%,var(--line-2));background:var(--surface-2);border-radius:8px;padding:8px 16px 8px 10px;text-align:left}
.troot:hover{background:var(--surface)}
.troot b{display:block;font:600 16px/1.1 var(--font-display)}
.troot i{font:400 11px var(--font-mono);color:var(--fg-dim);font-style:normal}
.tgrid{display:grid;grid-template-columns:repeat(var(--tn,5),minmax(0,1fr));gap:30px 10px;margin-top:46px}
#tdetail{grid-column:1/-1;min-width:0}
.pc{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;padding:2px 2px 4px;min-width:0;--rc:var(--ok)}
.pc.stale{--rc:var(--stale)}
.pc.planned{--rc:var(--planned)}
.pc:focus-visible{outline:2px solid var(--skill);outline-offset:3px;border-radius:8px}
.pc .av{grid-row:auto;width:62px;height:62px;font-size:20px;position:relative;z-index:1;transition:transform .18s,box-shadow .18s}
.pc:hover .av{transform:scale(1.06)}
.pc[aria-pressed="true"] .av{transform:scale(1.22);box-shadow:0 0 22px -2px var(--rc);background:color-mix(in srgb,var(--c) 30%,var(--bg))}
.pc .pn{font:600 14px/1.15 var(--font-display);overflow-wrap:anywhere;margin-top:4px}
.pc[aria-pressed="true"] .pn{margin-top:10px;color:var(--fg)}
.pc .ps{font:400 10px var(--font-mono);color:var(--rc)}
.pc.planned .pn{color:var(--fg-faint)}
.pc .fb{position:absolute;top:-2px;right:calc(50% - 40px);z-index:2;min-width:18px;height:18px;border-radius:9px;background:var(--bg);border:1px solid var(--line-2);color:var(--gold);font:500 10px/16px var(--font-mono);text-align:center;padding:0 4px}
.person.big .av{width:64px;height:64px;font-size:20px}
.person.big{margin-top:2px;border-color:color-mix(in srgb,var(--c) 45%,var(--line-2))}
.rl.open{cursor:auto;font-size:14px;color:var(--fg)}
.tag{font:500 10px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;border:1px solid;border-radius:4px;padding:1px 5px}
.fl{border-top:1px solid var(--line);padding-top:9px;display:flex;flex-direction:column;gap:6px}
.fl .lb{font:500 10px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint)}
.glc{display:flex;flex-wrap:wrap;gap:8px}
.glc input{flex:1 1 180px;min-width:0;background:var(--bg);color:var(--fg);border:1px solid var(--line-2);border-radius:4px;padding:7px 10px;font:400 13px var(--font-body)}
.glc select{flex:0 1 150px;min-width:0;background:var(--bg);color:var(--fg);border:1px solid var(--line-2);border-radius:4px;padding:6px 8px;font:500 12px var(--font-body)}
.glr{display:flex;flex-direction:column}
.glr .gm{font:400 11px var(--font-mono);color:var(--fg-faint);padding:6px 0 2px}
.glr .gg{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;border-top:1px solid var(--line);padding:6px 0;font-size:14px}
.glr .gg small{grid-column:1/-1;font:400 11px var(--font-mono);color:var(--fg-dim)}
.glr .gg span{font:400 11px var(--font-mono);color:var(--fg-dim);text-align:right}
.glr .chip{align-self:flex-start;margin-top:8px}
.glr .gg span a{color:var(--skill);text-decoration:underline}
.band[data-sub]{margin:10px 0 6px}
.band[data-sub]>.bh{font-size:12px;margin-bottom:8px}
.band[data-sub] .band[data-sub]{margin-left:12px}
.band[data-sub] .mh{font:400 11px var(--font-mono);color:var(--fg-faint);letter-spacing:0;text-transform:none}
.band[data-sub]>.glr,.band[data-sub]>.fgrid{margin:0 0 6px}
.band[data-sub] .pjr{opacity:.75}
.band[data-sub] .it{margin-bottom:6px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:8px}
.f{display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--bg);border-radius:6px;padding:5px 6px 5px 5px;min-width:0}
.f:hover{border-color:var(--line-2)}
.ft{flex:none;width:36px;height:24px;border-radius:4px;display:flex;align-items:center;justify-content:center;font:600 10px var(--font-mono);color:#0a111d;background:var(--k,#8ea3c0)}
.f .fnm{flex:1;min-width:0;font-size:13px;line-height:1.3;overflow-wrap:anywhere}
.f .fnm:hover{text-decoration:underline}
.f .fa{display:flex;gap:4px;flex:none}
.f .fa a{font:500 11px var(--font-mono);color:var(--fg-dim);border:1px solid var(--line-2);border-radius:4px;padding:2px 7px}
.f .fa a:hover{color:var(--fg);background:var(--surface-2)}
.res{border-top:1px solid var(--line);padding:10px 0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;align-items:center}
.res:first-of-type{border-top:0}
.res .rn{font-size:14px;overflow-wrap:anywhere}
.res .rc{font:400 11px var(--font-mono);color:var(--fg-faint);margin-top:1px}
.res mark{background:transparent;color:var(--gold);font-weight:500}
.empty{color:var(--fg-dim);font-size:14px;padding:6px 0}

.band{margin-bottom:22px}
.bh{display:flex;align-items:center;gap:10px;font:600 13px var(--font-display);letter-spacing:.14em;text-transform:uppercase;margin:0 0 10px;color:var(--bc)}
.bh i{width:9px;height:9px;border-radius:50%;display:inline-block;background:var(--bc)}
.bh .ct{font:500 11px var(--font-mono);color:var(--fg-dim);border:1px solid var(--line-2);border-radius:10px;padding:1px 8px;letter-spacing:0}
.bh .hr{flex:1;height:1px;background:linear-gradient(90deg,var(--bc),transparent);opacity:.4}
.it{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:6px 14px;align-items:center;border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:10px 14px;margin-bottom:8px}
.it:hover{border-color:var(--line-2)}
.it .dt b{display:block;font:600 16px/1.1 var(--font-display)}
.it .dt span{font:400 11px var(--font-mono);color:var(--fg-dim)}
.it .tt2{font-size:14px;min-width:0;overflow-wrap:anywhere}
.it .tt2 small{display:block;font-size:12px;color:var(--fg-dim);margin-top:2px}
.tg2{font:500 10px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;border:1px solid;border-radius:4px;padding:1px 6px;margin-left:8px;white-space:nowrap}
.it .rt{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.dvc{display:inline-flex;align-items:center;gap:6px;font:400 12px var(--font-mono);color:var(--fg-dim)}
.dvc b{width:9px;height:9px;border-radius:2px;background:var(--dc);display:inline-block}
.ok0{color:var(--fg-faint);font-size:13px;padding:2px 0 8px}
.fchips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;align-items:center}
.chip{all:unset;box-sizing:border-box;cursor:pointer;font:500 12px var(--font-body);border:1px solid var(--line-2);border-radius:4px;padding:5px 10px;color:var(--fg-dim);background:var(--bg)}
.chip:hover{color:var(--fg);border-color:var(--fg-dim)}
.chip[aria-pressed="true"]{color:var(--fg);background:var(--surface-2);border-color:var(--skill)}
.chip:focus-visible{outline:2px solid var(--skill);outline-offset:2px}
.fchips .sp{flex:1}
.btn.cal.done{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 50%,var(--line-2))}
#pjstats:empty{display:none}
.pjorg{margin-bottom:18px}
.pjgrid{display:grid;grid-template-columns:repeat(var(--pn,3),minmax(0,1fr));gap:34px 10px;margin-top:46px}
#pjdetail,#pjtdetail{grid-column:1/-1;min-width:0}
#pjdetail[hidden],#pjtdetail[hidden]{display:none}
.pjc:focus-visible{outline:2px solid var(--skill);outline-offset:2px}
.pjc .pn{font:600 18px/1.2 var(--font-display);overflow-wrap:anywhere}
.pjc .pi{font-size:12px;color:var(--fg-dim);line-height:1.35;overflow-wrap:anywhere}
.pjc .pm{font:400 11px/1.4 var(--font-mono);color:var(--fg-faint);margin-top:4px}
.pjc .pm em{font-style:normal;color:var(--ok)}
/* Count badge on the corner of a Division or project card */
.bg2{position:absolute;top:-9px;right:8px;min-width:20px;height:20px;border-radius:10px;background:var(--bb);color:var(--on-accent);font:600 11px/20px var(--font-mono);text-align:center;padding:0 6px;z-index:2}
.pjpanel{--c:var(--skill)}
.pp{align-self:flex-start;font:500 10px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--pc);border:1px solid var(--pc);border-radius:4px;padding:1px 6px;margin-top:4px}
.pjph{display:inline-flex;align-items:center;gap:6px;font:500 12px var(--font-body);color:var(--fg-dim)}
.pjph select{background:var(--bg);color:var(--fg);border:1px solid var(--line-2);border-radius:4px;padding:4px 8px;font:500 12px var(--font-body)}
.pjpanel .pjb{margin-top:20px}
.pjpanel .pjb:first-of-type{margin-top:6px}
.av.hasimg{position:relative;overflow:hidden}
.av.hasimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;padding:14%;box-sizing:border-box}
.pjb{margin-top:12px}
.pjb h3{display:flex;align-items:center;gap:10px;font:600 12px var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);margin:0 0 6px}
.pjb h3 .hr{flex:1;height:1px;background:var(--line)}
.pjb h3 .ct{font:500 11px var(--font-mono);letter-spacing:0;border:1px solid var(--line-2);border-radius:10px;padding:1px 8px}
.pjr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;border-top:1px solid var(--line);padding:8px 0;font-size:14px}
.person .mhs{grid-column:1/-1;margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
.mhs .mhn{font:500 10px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:4px}
.mhs .co{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;font:400 13px var(--font-mono);padding:3px 0;color:var(--fg-dim)}
.mhs .co span:last-child{color:var(--fg)}
.mhs small{display:block;font:400 11px var(--font-mono);color:var(--fg-faint);margin-top:4px}
.mhs .mht small{display:inline;margin:0 0 0 6px}
.mhr{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:4px 10px;align-items:center;border-top:1px solid var(--line);padding:8px 4px;font-size:14px;width:100%}
.mhr:hover{background:var(--surface-2)}
.mhr:focus-visible{outline:2px solid var(--skill);outline-offset:-2px}
.mhr .chev{font:500 12px var(--font-mono);color:var(--fg-dim)}
.mhr .dd{font:500 12px var(--font-mono)}
.mhd{padding:4px 4px 10px 30px;background:color-mix(in srgb,var(--skill) 5%,transparent)}
.mhd .mhn{font:400 11px var(--font-mono);color:var(--fg-faint);margin-bottom:4px}
.mhd .co{display:grid;grid-template-columns:minmax(0,1fr) auto 44px;gap:12px;font:400 13px var(--font-mono);padding:3px 0;color:var(--fg-dim)}
.mhd .co span:nth-child(2){color:var(--fg)}
.mhd .co span:last-child{text-align:right}
.mht{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid var(--line-2);margin-top:6px;padding:10px 4px 2px;font:600 15px var(--font-display);letter-spacing:.08em;text-transform:uppercase}
.pjmhs{font:400 12px var(--font-mono);color:var(--fg-dim);margin:0 0 6px}
.pjr small{display:block;font-size:12px;color:var(--fg-dim)}
.pjr .ra{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.pjr .dd{font:500 12px var(--font-mono)}
.pjf{border:1px dashed var(--line-2);border-radius:6px;padding:10px 12px;margin:8px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
.pjf label{display:flex;flex-direction:column;gap:3px;font:500 11px var(--font-body);color:var(--fg-dim)}
.pjf input{background:var(--bg);color:var(--fg);border:1px solid var(--line-2);border-radius:4px;padding:6px 8px;font:400 13px var(--font-body);min-width:0}
.pjf .fa2{grid-column:1/-1;display:flex;gap:8px}
.pjmsg{border:1px dashed var(--line-2);border-radius:6px;padding:12px 14px;font-size:13px;color:var(--fg-dim);margin-bottom:14px}
.btn.dng{color:var(--bad);border-color:var(--bad)}
.dec{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:6px 14px;align-items:start;border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:12px 14px;margin-bottom:8px}
.dec .dn{font:600 20px/1 var(--font-display);color:var(--fg-dim)}
.dec .dtt{font-size:14px;min-width:0;overflow-wrap:anywhere}
.dec .dtt small{display:block;font-size:12px;color:var(--fg-dim);margin-top:3px}
.dec .dtt .oc{color:var(--fg);margin-top:5px}
.howto{border:1px dashed var(--line-2);border-radius:6px;padding:9px 14px;font-size:13px;color:var(--fg-dim)}
.howto code{font-family:var(--font-mono);font-size:12px;color:var(--fg)}
.todhead{margin:0 0 12px}
.todhead h2{font:600 24px/1.1 var(--font-display);margin:6px 0 0}
.stat.r b{color:var(--bad)}
.btn.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 50%,var(--line-2));cursor:pointer}
.doneform{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:-4px 0 12px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--ok) 40%,var(--line-2));border-radius:6px;background:var(--surface)}
.doneform label{font:500 12px var(--font-body);color:var(--fg-dim);display:inline-flex;align-items:center;gap:6px}
.doneform input{background:var(--bg);color:var(--fg);border:1px solid var(--line-2);border-radius:4px;padding:5px 8px;font:400 13px var(--font-mono)}
.doneform input[type=text]{flex:1;min-width:160px}
.doneform .btn{cursor:pointer}
select.snz{background:var(--bg);color:var(--fg-dim);border:1px solid var(--line-2);border-radius:4px;padding:5px 8px;font:500 12px var(--font-body);cursor:pointer}
select.snz:hover{color:var(--fg);border-color:var(--fg-dim)}
.it.mini{opacity:.85}
.allclear{border:1px solid color-mix(in srgb,var(--ok) 40%,var(--line-2));border-radius:6px;padding:12px 14px;color:var(--ok);font-size:14px;margin-bottom:18px}
.stline{font:400 12px var(--font-mono);color:var(--fg-faint);margin:10px 0 0;overflow-wrap:anywhere}
.stline a{color:var(--fg-dim);text-decoration:underline}
#cap.band{margin:0 0 16px}
.capbox{border:1px solid var(--line-2);border-radius:6px;background:var(--surface)}
.capf{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;padding:12px 14px}
.capf label{display:flex;flex-direction:column;gap:3px;font:500 11px var(--font-body);color:var(--fg-dim);min-width:0}
.capf label.wide{grid-column:1/-1}
.capf [hidden]{display:none}
.capf label.chk{flex-direction:row;align-items:center;gap:8px;align-self:end;padding-bottom:6px}
.capf input[type=text],.capf input[type=date],.capf select{background:var(--bg);color:var(--fg);border:1px solid var(--line-2);border-radius:4px;padding:7px 9px;font:400 13px var(--font-body);min-width:0}
.cap-out{padding:0 14px 14px;display:flex;flex-direction:column;gap:12px}
.cap-where{font:500 11px var(--font-mono);color:var(--fg-dim);margin-bottom:5px;overflow-wrap:anywhere}
.cap-part pre{margin:0 0 8px;background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:10px 12px;font:12px/1.55 var(--font-mono);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--fg)}
.cap-hint{font-size:12px;color:var(--fg-dim)}
.div .hl{font:400 11px/1.45 var(--font-mono);color:var(--fg-faint);margin-top:6px;border-top:1px solid var(--line);padding-top:6px}
.div .hl b{font-weight:500;color:var(--fg-dim)}
.div .hl .gap{color:var(--fg-faint);font-style:italic}
.hbox{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin:0 0 6px}
.hb{border:1px solid var(--line);background:var(--bg);border-radius:6px;padding:10px 12px;min-width:0}
.hb .lb{display:block;font:500 10px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:6px}
.hb .hi{font-size:13px;line-height:1.35;padding:3px 0;overflow-wrap:anywhere}
.hb .hi small{display:block;font:400 11px var(--font-mono);color:var(--fg-dim)}
.hb a{color:var(--skill);text-decoration:underline}
.hb .more{font:400 11px var(--font-mono);color:var(--fg-faint)}
.goal{border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:14px 16px;margin-bottom:10px;display:flex;flex-direction:column;gap:10px;min-width:0}
.goal .gh{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:8px 14px}
.goal .gt{font:600 18px/1.25 var(--font-display);min-width:0;overflow-wrap:anywhere;flex:1 1 260px}
.goal .gm{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.goal .gw{font:500 12px var(--font-mono)}
.goal .gr{display:grid;grid-template-columns:104px minmax(0,1fr);gap:4px 14px;font-size:14px;border-top:1px solid var(--line);padding-top:8px}
.goal .gr>span{font:500 10px/1.8 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint)}
.goal .gr>div{min-width:0;overflow-wrap:anywhere}
.goal .gr a{color:var(--skill);text-decoration:underline}
.goal .gmiss{color:var(--stale);font-style:normal}
.gbar{height:6px;border-radius:4px;background:var(--line);overflow:hidden;margin-top:5px;max-width:320px}
.gbar i{display:block;height:100%;background:var(--ok)}
.prbar{height:6px;border-radius:4px;background:var(--line);overflow:hidden;margin:4px 0 8px}
.prbar i{display:block;height:100%}
.prk{display:flex;justify-content:space-between;font:400 12px var(--font-mono);color:var(--fg-dim);padding:1px 0}
.prk b{font-weight:500;color:var(--fg)}
.prtiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px;max-width:520px}
.prt{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;border:1px solid var(--line);border-top:3px solid var(--pc);background:var(--surface);border-radius:6px;padding:10px 6px;text-align:center;min-width:0;transition:background .15s}
.prt:hover{background:var(--surface-2)}
.prt[aria-pressed="true"]{background:var(--surface-2);box-shadow:0 0 0 1px var(--pc) inset,0 0 16px -6px var(--pc)}
.prt:focus-visible,.prs:focus-visible{outline:2px solid var(--skill);outline-offset:2px}
.prt .pi{position:relative;width:38px;height:38px;color:var(--pc);margin-bottom:2px}
.prt .pi svg{width:100%;height:100%;display:block}
.pdot{position:absolute;top:-2px;right:-5px;width:9px;height:9px;border-radius:50%;background:var(--bad)}
.prt .pn{font:600 14px/1.2 var(--font-display)}
.prt .pv{font:500 11px var(--font-mono);color:var(--fg-dim)}
.prr[draggable="true"]{cursor:grab}
.prr.dragging{opacity:.4}
.prs.drop,.prt.drop{outline:2px dashed var(--skill);outline-offset:2px;background:var(--surface-2)}
.prlh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.prlh .prcat{margin:0}
.pjf select{background:var(--bg);color:var(--fg);border:1px solid var(--line-2);border-radius:4px;padding:6px 8px;font:400 13px var(--font-body);min-width:0}
.prf{margin:8px 0}
.prpick{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.prpick input{background:var(--bg);color:var(--fg);border:1px solid var(--line-2);border-radius:4px;padding:5px 8px;font:400 13px var(--font-body);min-width:0;flex:1 1 140px}
.sup{border:1px solid var(--line);border-left:3px solid var(--skill);background:var(--surface);border-radius:4px;padding:10px 14px;margin-bottom:8px}
.sup .sh1{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.sup .sn2{font:600 16px/1.2 var(--font-display)}
.sup .sd{font:500 13px var(--font-mono)}
.sup .ss2{font:400 12px var(--font-mono);color:var(--fg-dim);margin-top:2px;overflow-wrap:anywhere}
.prs.addb{border-style:dashed;border-left-style:dashed;border-left-color:var(--line-2)}
.prs.addf{cursor:default}
.prs.addf:hover{background:var(--bg)}
.prs .sa{display:flex;gap:6px;margin-top:4px}
.prlb{display:flex;gap:6px;flex-wrap:wrap}
.prs input,.prlist input{background:var(--bg);color:var(--fg);border:1px solid var(--line-2);border-radius:4px;padding:5px 8px;font:400 13px var(--font-body);min-width:0}
.prx{margin-bottom:18px}
.prsubs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.prs{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-left:3px solid var(--ok);background:var(--bg);border-radius:4px;padding:8px 10px;min-width:0}
.prs.gap{border-left-color:var(--stale)}.prs.crit{border-left-color:var(--bad)}
.prs:hover{background:var(--surface-2)}
.prs[aria-pressed="true"]{background:var(--surface-2);outline:1px solid var(--fg-dim);outline-offset:-1px}
.prs .sn{font:600 14px/1.2 var(--font-display);overflow-wrap:anywhere}
.prs .sc{font:400 11px var(--font-mono);color:var(--fg-dim)}
.prlist{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.prr{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:2px 10px;align-items:start;border-top:1px solid var(--line);padding:7px 0;font-size:14px}
.prr .d{width:9px;height:9px;border-radius:50%;margin-top:6px;background:var(--ok)}
.prr .d.g{background:var(--bad)}.prr .d.t{background:var(--stale)}
.prr .nm{min-width:0;overflow-wrap:anywhere}
.prr small{display:block;font:400 11px var(--font-mono);color:var(--fg-dim);margin-top:1px}
.prr .ra{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.prr .q{font:400 11px var(--font-mono);color:var(--fg-faint)}
.prr select{background:var(--bg);color:var(--fg-dim);border:1px solid var(--line-2);border-radius:4px;padding:3px 6px;font:500 11px var(--font-body)}
.prl{font:500 10px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;border:1px solid;border-radius:4px;padding:0 5px;margin-left:6px;white-space:nowrap;vertical-align:1px}
.prcat{font:500 10px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);margin:14px 0 2px}
.prcat:first-child{margin-top:0}
.prsum{grid-column:1/-1;margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
.prsum .lb{display:block;font:500 10px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:4px}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:26px;font-size:12px;color:var(--fg-dim)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.foot{margin-top:10px;font-size:12px;color:var(--fg-faint)}
/* Buttons: the main action is tinted, Delete stays quiet until pointed at, every button shows a hand cursor. */
button.btn,a.btn{cursor:pointer}
.btn.ok{background:color-mix(in srgb,var(--ok) 12%,var(--bg))}
.btn.pri{background:color-mix(in srgb,var(--c) 12%,var(--bg))}
.btn[data-act="del"]:not(.dng){color:var(--fg-dim);margin-left:6px}
.btn[data-act="del"]:not(.dng):hover{color:var(--bad);border-color:var(--bad);background:var(--bg)}
.btn.dng{background:color-mix(in srgb,var(--bad) 10%,var(--bg))}
.goal .gm .tg2{margin-left:0}
/* Band headings and row buttons wrap instead of pushing the page wider. */
.bh,.pjb h3{flex-wrap:wrap}
.bh .hr,.pjb h3 .hr{min-width:16px}
/* Help text and long file lists open on request. */
/* App shell: a fixed rail of sections on a wide screen, a bottom bar on a narrow one. */
.shell{display:flex;align-items:flex-start;min-height:100vh}
.rail{position:sticky;top:0;height:100vh;flex:none;width:248px;box-sizing:border-box;overflow-y:auto;display:flex;flex-direction:column;gap:16px;background:var(--surface);border-right:1px solid var(--line);padding:20px 12px 16px max(12px,env(safe-area-inset-left,0px))}
.brand{display:flex;flex-direction:column;gap:2px;padding:0 10px}
.brand b{font:600 24px/1.1 var(--font-display)}
.brand span{font:500 10px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-dim)}
.gsbtn{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:40px;padding:0 10px;background:var(--bg);color:var(--fg-dim);border:1px solid var(--line-2);border-radius:6px;font:400 13px var(--font-body);white-space:nowrap}
.gsbtn:hover{color:var(--fg);border-color:var(--fg-dim)}
.gsbtn:focus-visible{outline:2px solid var(--skill);outline-offset:2px}
.gsbtn span{flex:1}
.gsbtn kbd{font:500 11px var(--font-mono);border:1px solid var(--line-2);border-radius:4px;padding:1px 5px}
.gsbtn svg,.tab svg{width:18px;height:18px;flex:none}
.tabs{display:flex;flex-direction:column;gap:2px}
.tab{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:40px;padding:0 10px;border-radius:6px;font:400 14px var(--font-body);color:var(--fg-dim)}
.tab:hover{color:var(--fg);background:var(--surface-2)}
.tab[aria-selected="true"]{color:var(--fg);font-weight:500;background:var(--surface-2);box-shadow:inset 2px 0 0 var(--skill)}
.tab[aria-selected="true"] svg{color:var(--skill)}
.tab:focus-visible{outline:2px solid var(--skill);outline-offset:-2px}
.tab .tx{flex:1}
.tab .n{font:600 11px/1 var(--font-mono);border-radius:9px;padding:3px 7px;background:var(--stale);color:var(--on-accent)}
.tab .n.red{background:var(--bad)}
.tab .c{font:400 11px var(--font-mono);color:var(--fg-dim)}
.live{margin-top:auto;display:flex;flex-direction:column;gap:5px;padding:12px 10px 0;border-top:1px solid var(--line);font:400 11px var(--font-mono);color:var(--fg-dim)}
.live .on{display:flex;align-items:center;gap:8px;color:var(--ok)}
.live .on.off{color:var(--fg-dim)}
.live .on i{width:8px;height:8px;border-radius:50%;background:currentColor}
.live .old{color:var(--stale)}
.main{flex:1;min-width:0;box-sizing:border-box;padding-block:26px 48px;padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px))}
.top{display:none}
/* Search everything */
.gs{position:fixed;inset:0;z-index:50;background:var(--scrim);display:flex;justify-content:center;align-items:flex-start;padding:max(10vh,env(safe-area-inset-top,0px)) 16px 16px}
.gsbox{width:min(640px,100%);max-height:76vh;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line-2);border-radius:8px;box-shadow:0 18px 50px rgba(var(--shade),.5);overflow:hidden}
.gsbox input{all:unset;box-sizing:border-box;width:100%;padding:14px 16px;font:400 16px var(--font-body);color:var(--fg);border-bottom:1px solid var(--line)}
.gsbox input::placeholder{color:var(--fg-dim)}
#gsr{overflow-y:auto;min-height:0;padding:6px}
.gsi{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:2px;width:100%;padding:7px 10px;border-radius:6px;font-size:14px;overflow-wrap:anywhere}
.gsi:hover,.gsi:focus-visible{background:var(--surface-2)}
.gsi:focus-visible{box-shadow:inset 2px 0 0 var(--skill)}
.gsi small{font:400 11px var(--font-mono);color:var(--fg-dim)}
.gsi mark{background:transparent;color:var(--gold);font-weight:500}
.gsh{padding:12px 14px;font-size:13px;color:var(--fg-dim)}
/* Today board: the queue on the left, charts on the right */
.board{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:20px;align-items:start;margin-bottom:22px}
.board>div{min-width:0;display:flex;flex-direction:column;gap:14px}
.board .band{margin-bottom:0}
.board .it{grid-template-columns:92px minmax(0,1fr)}
.board .it .rt{grid-column:2;justify-content:flex-start}
.it.qb{box-shadow:inset 3px 0 0 var(--bad)}
.it.qw{box-shadow:inset 3px 0 0 var(--stale)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.card h3{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;margin:0;font:600 14px var(--font-display);letter-spacing:.12em;text-transform:uppercase}
.card h3 small{font:400 11px var(--font-mono);letter-spacing:0;text-transform:none;color:var(--fg-dim)}
.d14{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:3px;font:400 11px var(--font-mono);text-align:center}
.d14>button{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;padding:5px 0;min-height:58px;box-sizing:border-box;border-radius:4px;background:var(--bg);border:1px solid var(--line)}
.d14>button.now{background:var(--surface-2);border-color:var(--skill)}
.d14 .wd{color:var(--fg-dim)}
.d14 .mk{display:flex;gap:2px;flex-wrap:wrap;justify-content:center}
.d14 .mk i,.key i{width:6px;height:6px;border-radius:50%;background:var(--skill)}
.d14 .mk i.sq,.key i.sq{border-radius:1px}
.d14 .mk i.w{background:var(--stale)}
.d14 .mk i.b{background:var(--bad)}
.key{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--fg-dim)}
.key span{display:inline-flex;align-items:center;gap:6px}
.key i{background:var(--fg-dim)}
.rw{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.5fr) auto;gap:8px 10px;align-items:center;font-size:13px}
.rw .nm{min-width:0;overflow-wrap:anywhere}
.rw .nm small{display:block;font:400 11px var(--font-mono);color:var(--fg-dim)}
.rw .tr{height:8px;border-radius:4px;background:var(--line)}
.rw .tr i{display:block;height:100%;min-width:4px;border-radius:4px;background:currentColor}
.rw .dl{font:400 11px var(--font-mono);text-align:right;white-space:nowrap}
.wk{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;height:124px;font:400 10px var(--font-mono);text-align:center;color:var(--fg-dim)}
.wk>div{display:flex;flex-direction:column;justify-content:flex-end;gap:3px;min-width:0}
.wk i{display:block;min-height:2px;border-radius:4px 4px 0 0;background:color-mix(in srgb,var(--skill) 50%,var(--surface))}
.wk>div:last-child i{background:var(--skill)}
.wk>div:last-child span{color:var(--fg)}
.wkx{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;font:400 10px var(--font-mono);text-align:center;color:var(--fg-dim);border-top:1px solid var(--line);padding-top:4px}
.rings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;text-align:center;font-size:13px}
.rings>div{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.rings svg{width:56px;height:56px}
.rings small{font:400 11px var(--font-mono);color:var(--fg-dim)}
.rbar{flex:none;width:120px;height:8px;border-radius:4px;background:var(--line)}
.rbar i{display:block;height:100%;min-width:4px;border-radius:4px;background:currentColor}
/* Projects tab charts, and the bars inside a project's Manhours block */
.pjcharts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;align-items:start;margin-bottom:22px}
.pjcharts:empty{display:none}
.pjb .wk,.pjb .wkx{max-width:440px}
.pjb .wkx{margin-bottom:10px}
.mbar{display:block;height:4px;margin-top:5px;border-radius:2px;background:var(--line)}
.mbar i{display:block;height:100%;min-width:2px;border-radius:2px;background:var(--skill)}
@media (max-width:1100px){.board{grid-template-columns:1fr}}
/* Narrow screens: the rail becomes a bottom bar and the title moves to the top of the page. */
@media (max-width:899px){
  .shell{display:block}
  .rail{position:fixed;inset:auto 0 0 0;z-index:30;width:auto;height:auto;overflow:visible;flex-direction:row;gap:0;border-right:0;border-top:1px solid var(--line);padding:4px max(4px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(4px,env(safe-area-inset-left,0px))}
  .rail .brand,.rail .gsbtn,.rail .live{display:none}
  .tabs{flex:1;flex-direction:row;gap:0;overflow-x:auto;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  /* More sections than fit: the bar slides, and the edge with more behind it fades (classes set by tabsHint in 80-shell.js). */
  .tabs{--ml:#000;--mr:#000;-webkit-mask-image:linear-gradient(90deg,var(--ml),#000 36px,#000 calc(100% - 36px),var(--mr));mask-image:linear-gradient(90deg,var(--ml),#000 36px,#000 calc(100% - 36px),var(--mr))}
  .tabs.ml{--ml:transparent}
  .tabs.mr{--mr:transparent}
  .tab{position:relative;flex:1 0 50px;flex-direction:column;justify-content:center;gap:2px;min-height:50px;padding:0 2px;font-size:10px;text-align:center;white-space:nowrap}
  .tab[aria-selected="true"]{background:transparent;box-shadow:none;color:var(--skill)}
  .tab .tx{flex:none}
  .tab .n{position:absolute;top:2px;left:calc(50% + 5px);padding:2px 5px;font-size:10px}
  .tab .c{display:none}
  .main{padding-block:16px calc(84px + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
  .top h1{margin:2px 0 0;font-size:24px}
  .top .gsbtn{justify-content:center;min-width:44px;min-height:44px;padding:0;color:var(--fg)}
}
/* Phone width */
@media (max-width:520px){
  .dec{grid-template-columns:1fr}
  .goal .gr{grid-template-columns:1fr}
  .it{grid-template-columns:1fr}
  .it .rt{justify-content:flex-start}
  .prr{grid-template-columns:10px minmax(0,1fr)}
  .prr .ra{grid-column:2;justify-content:flex-start}
  .res{grid-template-columns:1fr}
  .d14{grid-template-columns:repeat(7,minmax(0,1fr))}
  .pjr{grid-template-columns:1fr}
  .pjr .ra{justify-content:flex-start}
  h1{font-size:24px}
  .node{min-width:0;width:100%}
}

/* ================= Light, glow and motion =================
   Everything below is the look layered over the layout above: ambient light behind the page, glass rail, lit cards,
   glowing status color, and movement (tab entrances, the sliding section highlight, charts that draw in).
   Entrance animations hang off "section.enter", which showTab adds for a moment, so live redraws never replay them.
   All of it switches off under prefers-reduced-motion (last rule). */
:root{
  --ease:cubic-bezier(.2,.8,.2,1);
  --on-accent:#06101f;--hi:255,255,255;--shade:0,0,0;--amb:1;--glow:1;--brand-a:#fff;--scrim:rgba(5,9,16,.72);--pop-bg:rgba(8,14,24,.82);--pop-fg:#b9c8de;--strip:#15243c;--flow:#fff;
  --sp1:4px;--sp2:8px;--sp3:12px;--sp4:16px;--sp5:24px;--sp6:32px;
  --card:linear-gradient(180deg,rgba(var(--hi),.04),rgba(var(--hi),0) 46%);
  --lift:0 1px 0 rgba(var(--hi),.05) inset,0 14px 34px -22px rgba(var(--shade),.9);
  --spot:radial-gradient(280px circle at var(--mx,-999px) var(--my,-999px),color-mix(in srgb,var(--skill) 13%,transparent),transparent 70%);
}
::selection{background:color-mix(in srgb,var(--skill) 40%,transparent)}
html{scrollbar-color:var(--line-2) transparent;scrollbar-width:thin}
/* Ambient light: three soft color fields drifting behind the page, and the blueprint grid fading out with distance from the top. */
body{background-image:none}
.shell{position:relative;isolation:isolate}
.shell::before,.shell::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none}
.shell::before{inset:-12%;background:radial-gradient(46% 42% at 16% 4%,color-mix(in srgb,var(--skill) calc(var(--amb)*20%),transparent),transparent 70%),radial-gradient(40% 44% at 96% 96%,color-mix(in srgb,var(--purple) calc(var(--amb)*13%),transparent),transparent 70%),radial-gradient(34% 34% at 78% 6%,color-mix(in srgb,var(--ok) calc(var(--amb)*9%),transparent),transparent 70%);animation:drift 26s ease-in-out infinite alternate}
.shell::after{background-image:linear-gradient(color-mix(in srgb,var(--skill) 6%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--skill) 6%,transparent) 1px,transparent 1px);background-size:32px 32px;-webkit-mask-image:radial-gradient(120% 80% at 50% 0,#000 10%,transparent 78%);mask-image:radial-gradient(120% 80% at 50% 0,#000 10%,transparent 78%)}
/* Background art: part of a theme (data-pat on <html>, plus the --p-* settings, both set by 85-theme.js). Each pattern is a template whose size, angle, thickness and strength are variables, so one template gives many looks. The same rules draw the small previews (.artsw) in the Theme dialog. With no data-pat the base rule above (the original grid) applies. */
:root[data-pat] .shell::after,.artsw[data-pat]{--pc:color-mix(in srgb,var(--skill) var(--p-str,8%),transparent)}
:root[data-pat="grid"] .shell::after,.artsw[data-pat="grid"]{background-image:linear-gradient(var(--pc) var(--p-th,1px),transparent var(--p-th,1px)),linear-gradient(90deg,var(--pc) var(--p-th,1px),transparent var(--p-th,1px));background-size:var(--p-sz,32px) var(--p-sz,32px)}
:root[data-pat="dots"] .shell::after,.artsw[data-pat="dots"]{background-image:radial-gradient(var(--pc) var(--p-th,1.3px),transparent calc(var(--p-th,1.3px) + .5px));background-size:var(--p-sz,24px) var(--p-sz,24px)}
:root[data-pat="lines"] .shell::after,.artsw[data-pat="lines"]{background-image:repeating-linear-gradient(var(--p-ang,45deg),var(--pc) 0,var(--pc) var(--p-th,1px),transparent var(--p-th,1px),transparent var(--p-sz,16px));background-size:auto}
:root[data-pat="hatch"] .shell::after,.artsw[data-pat="hatch"]{background-image:repeating-linear-gradient(var(--p-ang,45deg),var(--pc) 0,var(--pc) 1px,transparent 1px,transparent var(--p-sz,16px)),repeating-linear-gradient(calc(var(--p-ang,45deg) + 90deg),var(--pc) 0,var(--pc) 1px,transparent 1px,transparent var(--p-sz,16px));background-size:auto}
:root[data-pat="checks"] .shell::after,.artsw[data-pat="checks"]{background-image:conic-gradient(var(--pc) 25%,transparent 0 50%,var(--pc) 0 75%,transparent 0);background-size:var(--p-sz,56px) var(--p-sz,56px)}
:root[data-pat="rings"] .shell::after,.artsw[data-pat="rings"]{background-image:repeating-radial-gradient(circle at var(--p-x,20%) var(--p-y,0%),var(--pc) 0,var(--pc) var(--p-th,1px),transparent var(--p-th,1px),transparent var(--p-sz,24px));background-size:auto}
:root[data-pat="none"] .shell::after,.artsw[data-pat="none"]{background-image:none}
/* An uploaded picture: no fade mask, and its own strength (--art-op) in both modes. */
:root[data-pat="image"] .shell::after{background-image:var(--art-img);background-size:var(--art-fit,cover);background-repeat:var(--art-rep,no-repeat);background-position:center;-webkit-mask-image:none;mask-image:none;filter:blur(var(--art-blur,0px))}
:root[data-pat="image"][data-mode] .shell::after{opacity:var(--art-op,.3)}
.artsw{display:block;width:64px;height:38px;flex:none;border-radius:8px;border:1px solid var(--line-2);background-color:var(--bg);background-position:center}
.artsw[data-pat="image"]{background-size:cover}
@keyframes drift{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.08)}}

/* Rail: glass over the ambient light, a lit edge, and a highlight that slides to the selected section. */
.rail{background:color-mix(in srgb,var(--surface) 62%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border-right-color:transparent;box-shadow:1px 0 0 color-mix(in srgb,var(--skill) 18%,var(--line)),18px 0 40px -30px var(--skill)}
.brand b{background:linear-gradient(92deg,var(--brand-a) 10%,var(--skill) 120%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px color-mix(in srgb,var(--skill) calc(var(--glow)*35%),transparent))}
.tabs{position:relative}
.tabs::before{content:"";position:absolute;left:0;top:0;width:100%;height:var(--ih,40px);transform:translateY(var(--iy,0px));border-radius:8px;pointer-events:none;
  background:linear-gradient(90deg,color-mix(in srgb,var(--skill) 26%,transparent),color-mix(in srgb,var(--skill) 4%,transparent));
  box-shadow:inset 2px 0 0 var(--skill),inset 0 0 0 1px color-mix(in srgb,var(--skill) 22%,transparent),-10px 0 26px -8px var(--skill);
  transition:transform .42s var(--ease),height .2s}
.tab{position:relative;z-index:1;border-radius:8px;transition:color .2s,background-color .2s}
.tab svg{transition:transform .3s var(--ease),color .2s,filter .2s}
.tab:hover svg{transform:scale(1.12)}
.tab[aria-selected="true"]{background:transparent;box-shadow:none}
.tab[aria-selected="true"] svg{filter:drop-shadow(0 0 6px var(--skill))}
.tab .n{box-shadow:0 0 14px -2px var(--stale)}
.tab .n.red{box-shadow:0 0 14px -2px var(--bad);animation:beat 2.4s ease-in-out infinite}
@keyframes beat{0%,100%{box-shadow:0 0 10px -3px var(--bad)}50%{box-shadow:0 0 20px 1px var(--bad)}}
.gsbtn{transition:border-color .2s,box-shadow .25s,color .2s}
.gsbtn:hover{border-color:var(--skill);box-shadow:0 0 0 3px color-mix(in srgb,var(--skill) 14%,transparent),0 0 22px -8px var(--skill)}
.live .on i{position:relative;box-shadow:0 0 8px currentColor}
.live .on:not(.off) i::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid currentColor;animation:ping 2.4s ease-out infinite}
@keyframes ping{from{transform:scale(1);opacity:.9}to{transform:scale(3.2);opacity:0}}

/* Cards: a soft top light, depth, and a light that follows the pointer while it is over the card. */
.it,.card,.goal,.dec,.sup,.capbox,.stats,.rows,.hb,.f{border-radius:10px}
.it,.card,.goal,.dec,.sup,.capbox,.stats,.rows{background-image:var(--card);box-shadow:var(--edge,0 0 #0000),var(--lift)}
.it,.card,.goal,.dec,.sup{transition:border-color .25s,box-shadow .3s,background-color .25s}
.it:hover,.card:hover,.goal:hover,.dec:hover,.sup:hover{border-color:color-mix(in srgb,var(--skill) 42%,var(--line-2));background-image:var(--spot),var(--card);background-attachment:fixed,scroll;
  box-shadow:var(--edge,0 0 #0000),var(--lift),0 0 0 1px color-mix(in srgb,var(--skill) 10%,transparent),0 0 34px -16px var(--skill)}
/* Urgent rows: the colored edge glows, and an overdue one breathes. */
.it.qb{--edge:inset 3px 0 0 var(--bad),-10px 0 26px -14px var(--bad);border-color:color-mix(in srgb,var(--bad) 30%,var(--line))}
.it.qw{--edge:inset 3px 0 0 var(--stale),-10px 0 26px -14px var(--stale)}
.it.qb::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;box-shadow:0 0 22px -6px var(--bad);animation:breathe 3s ease-in-out infinite}
.it{position:relative}
@keyframes breathe{0%,100%{opacity:.15}50%{opacity:.9}}
.it .dt b{letter-spacing:.01em}
.tg2,.tag,.pp,.prl{border-radius:5px;background:color-mix(in srgb,currentColor 9%,transparent);border-color:color-mix(in srgb,currentColor 45%,transparent)}
.rep{display:inline-flex;vertical-align:-2px;margin-left:8px;color:var(--purple);opacity:.85}
.rep svg{width:13px;height:13px}
.dvc b{box-shadow:0 0 8px var(--dc)}

/* Stat tiles: the number carries the color and its glow; a tile with a target lights up and points where it goes. */
.stats{border-color:var(--line-2)}
.stat{appearance:none;-webkit-appearance:none;background:none;border-width:0 1px 1px 0;border-style:solid;border-color:var(--line);font:inherit;color:inherit;text-align:left;min-width:0;position:relative;transition:background-color .2s}
.stat b{transition:text-shadow .3s}
.stat.g b{text-shadow:0 0 22px color-mix(in srgb,var(--ok) calc(var(--glow)*60%),transparent)}
.stat.a b{text-shadow:0 0 22px color-mix(in srgb,var(--stale) calc(var(--glow)*65%),transparent)}
.stat.r b{text-shadow:0 0 22px color-mix(in srgb,var(--bad) calc(var(--glow)*70%),transparent)}
.stat.z b{color:var(--fg-faint)}
.stat.go{cursor:pointer}
.stat.go::after{content:"\2192";position:absolute;right:12px;top:10px;font:500 13px var(--font-mono);color:var(--fg-faint);opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .25s var(--ease)}
.stat.go:hover{background-color:color-mix(in srgb,var(--skill) 9%,transparent)}
.stat.go:hover::after{opacity:1;transform:none}
.stat.go:focus-visible{outline:2px solid var(--skill);outline-offset:-2px}
.stat.go:active b{transform:scale(.96)}
.todhead h2{font-size:30px;text-shadow:0 0 30px color-mix(in srgb,var(--skill) calc(var(--glow)*28%),transparent)}

/* Section headings: lit dot, and Coming up groups that fold. */
.bh i{box-shadow:0 0 10px var(--bc),0 0 2px var(--bc)}
.sh .st{text-shadow:0 0 18px color-mix(in srgb,var(--sc,var(--c)) calc(var(--glow)*50%),transparent)}
.lay>.bh,.lay>h3{cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:6px}
.lay>.bh:focus-visible,.lay>h3:focus-visible{outline:2px solid var(--skill);outline-offset:4px}
.lay>.bh::after,.lay>h3::after{content:"";flex:none;width:7px;height:7px;border-right:1.5px solid var(--fg-dim);border-bottom:1.5px solid var(--fg-dim);transform:rotate(45deg);transition:transform .25s var(--ease);margin:0 4px 0 2px}
.lay.shut>.bh::after,.lay.shut>h3::after{transform:rotate(-45deg)}
.lay.shut>:not(.bh):not(h3){display:none}
.lay.shut>.bh{margin-bottom:0}
.lay>.bh:hover .ct{border-color:var(--bc);color:var(--fg)}
.lay.opening>:not(.bh):not(h3){animation:unfold .3s var(--ease)}
.card.lay>h3{justify-content:flex-start}
.card.lay>h3 small{margin-left:auto}
.card.lay.shut{gap:0}
/* The quiet bands (How this works) and the small nested ones. */
.band[data-quiet]{opacity:.78;transition:opacity .2s}
.band[data-quiet]:hover,.band[data-quiet]:not(.shut){opacity:1}
.band[data-quiet]>.bh{font:500 12px var(--font-body);letter-spacing:0;text-transform:none;color:var(--fg-dim)}
.band[data-quiet]>.bh i{display:none}
.band[data-quiet]>.bh .hr{background:var(--line);opacity:1}
@keyframes unfold{from{opacity:0;transform:translateY(-6px)}}
/* Compact rows: one frame per group, a line per item, the item's buttons shown when the row is pointed at (or tapped). */
.rows{border:1px solid var(--line);background-color:var(--surface);overflow:hidden}
.rows .it.c{border:0;border-top:1px solid var(--line);border-radius:0;margin:0;padding:7px 14px;background:none;box-shadow:none;grid-template-columns:150px minmax(0,1fr) auto;transition:background-color .15s}
.rows .it.c:first-child,.rows .mhd2+.it.c{border-top:0}
.rows .it.c:hover,.rows .it.c.on{background:linear-gradient(90deg,color-mix(in srgb,var(--skill) 10%,transparent),transparent 70%);box-shadow:inset 2px 0 0 var(--skill)}
.it.c .dt{display:flex;align-items:baseline;gap:8px}
.it.c .dt b{font-size:15px;min-width:52px}
.it.c .rt{flex-wrap:nowrap;gap:6px}
.it.c .rt .btn,.it.c .rt select{padding:3px 8px}
.mhd2{font:500 10px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);padding:9px 14px 5px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--bg) 55%,transparent)}
.mhd2:first-child{border-top:0}
.rows+.doneform,.rows .doneform{margin:6px 14px 10px}
.it.c .dvc{min-width:96px}
@media (hover:hover) and (min-width:521px){
  /* Hidden but still reachable with Tab; shown as a strip over the right end of the row. */
  .it.c .rt .btn,.it.c .rt select{position:absolute;opacity:0;pointer-events:none}
  .it.c:hover .rt,.it.c:focus-within .rt,.it.c.on .rt{position:absolute;right:0;top:0;bottom:0;padding:0 14px 0 56px;background:linear-gradient(90deg,transparent,var(--strip) 48px)}
  .it.c:hover .rt .btn,.it.c:hover .rt select,.it.c:focus-within .rt .btn,.it.c:focus-within .rt select,.it.c.on .rt .btn,.it.c.on .rt select{position:static;opacity:1;pointer-events:auto}
  .it.c:hover .dvc,.it.c:focus-within .dvc,.it.c.on .dvc{min-width:0}
}
@media (hover:none),(max-width:520px){
  .it.c{cursor:pointer}
  .it.c .rt .btn,.it.c .rt select{display:none}
  .it.c.on .rt .btn,.it.c.on .rt select{display:inline-flex}
}
.flash{animation:flash 1.5s ease-out}
@keyframes flash{0%,35%{box-shadow:0 0 0 2px var(--skill),0 0 34px -2px var(--skill)}100%{box-shadow:0 0 0 2px transparent,0 0 0 0 transparent}}

/* Buttons, chips and fields: quick feedback, a glow in the control's own color. */
.btn,.chip,select.snz{border-radius:6px;transition:border-color .15s,background-color .15s,color .15s,box-shadow .2s,transform .1s}
.btn:hover{border-color:color-mix(in srgb,currentColor 55%,var(--line-2));box-shadow:0 0 0 3px color-mix(in srgb,currentColor 8%,transparent),0 0 18px -6px currentColor}
.btn:active,.chip:active{transform:scale(.96)}
.btn.ok:hover{background:color-mix(in srgb,var(--ok) 22%,var(--bg))}
.btn.dng:hover{background:color-mix(in srgb,var(--bad) 20%,var(--bg))}
.chip[aria-pressed="true"]{background:color-mix(in srgb,var(--skill) 14%,var(--surface));box-shadow:0 0 0 3px color-mix(in srgb,var(--skill) 10%,transparent),0 0 20px -8px var(--skill)}
input,select,textarea{transition:border-color .15s,box-shadow .2s}
input:not([type=checkbox]):focus,select:focus,textarea:focus{outline:none;border-color:var(--skill);box-shadow:0 0 0 3px color-mix(in srgb,var(--skill) 16%,transparent),0 0 20px -8px var(--skill)}
.gsbox input:focus{box-shadow:none}
.searchbar input{border-radius:8px}
#cap.band:not(.shut) .capbox{border-color:color-mix(in srgb,var(--skill) 40%,var(--line-2));box-shadow:var(--lift),0 0 34px -18px var(--skill)}
.howto{border-color:var(--line)}
.foot{opacity:.7}
.allclear{background:color-mix(in srgb,var(--ok) 7%,transparent);box-shadow:0 0 30px -14px var(--ok)}

/* Charts: bars and rings glow in their own color. */
.rw .tr,.rbar,.gbar,.prbar,.mbar{background:color-mix(in srgb,var(--line) 70%,transparent)}
.rw .tr i,.rbar i{box-shadow:0 0 12px -1px currentColor;transform-origin:left}
.gbar i{box-shadow:0 0 10px -1px var(--ok)}
.mbar i{box-shadow:0 0 8px -1px var(--skill);transform-origin:left}
.wk i{background:linear-gradient(180deg,color-mix(in srgb,var(--skill) 75%,var(--surface)),color-mix(in srgb,var(--skill) 22%,var(--surface)));transform-origin:bottom}
.wk>div:last-child i{background:linear-gradient(180deg,color-mix(in srgb,var(--skill) 62%,#fff),var(--skill));box-shadow:0 0 22px -4px var(--skill)}
.rings .arc{filter:drop-shadow(0 0 4px currentColor)}
.d14>button{transition:border-color .15s,background-color .15s,transform .15s var(--ease),box-shadow .2s}
.d14>button:hover{border-color:var(--line-2);transform:translateY(-2px)}
.d14>button.now{box-shadow:0 0 18px -6px var(--skill),inset 0 0 12px -8px var(--skill)}
.d14>button[aria-pressed="true"]{border-color:var(--skill);background:color-mix(in srgb,var(--skill) 16%,var(--bg))}
.d14>button:focus-visible{outline:2px solid var(--skill);outline-offset:1px}
.d14 .mk i{box-shadow:0 0 6px currentColor;color:var(--skill)}
.d14 .mk i.w{color:var(--stale)}.d14 .mk i.b{color:var(--bad)}
.d14info{display:flex;flex-direction:column;gap:3px;font-size:13px;border-left:2px solid var(--skill);padding:2px 0 2px 10px;animation:unfold .25s var(--ease)}
.d14info b{font:600 13px var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-dim)}
.d14info .no{color:var(--fg-faint)}
.pdot{box-shadow:0 0 8px var(--bad)}
.prr .d{box-shadow:0 0 7px currentColor;color:var(--ok)}.prr .d.g{color:var(--bad)}.prr .d.t{color:var(--stale)}

/* Org chart and project trees: lit nodes, cards that glow in their Division color, a selected path with light running along it. */
.node{border-radius:10px;background-image:var(--card);transition:box-shadow .3s,background-color .2s}
#tree>.node:first-child{box-shadow:var(--lift),0 0 34px -12px var(--gold)}
#president{box-shadow:var(--lift),0 0 34px -12px var(--skill)}
#president:hover{box-shadow:var(--lift),0 0 40px -8px var(--skill)}
.prt{box-shadow:0 -8px 18px -14px var(--pc),var(--lift)}
.prt:hover{transform:translateY(-2px);box-shadow:0 0 30px -10px var(--pc),var(--lift)}
.bd{transition:box-shadow .3s}
.div:hover .bd,.div[aria-pressed="true"] .bd{box-shadow:0 0 16px -2px var(--c)}
.bg2{box-shadow:0 0 14px -1px var(--bb)}
.panel{border-radius:8px;box-shadow:-12px 0 34px -20px var(--c),var(--lift)}
#panel>.panel,#tdetail>*{animation:reveal .4s var(--ease)}
@keyframes reveal{from{opacity:0;transform:translateY(-10px)}}
.person,.tool{border-radius:10px}
.pc .av{transition:transform .3s var(--ease),box-shadow .3s}
.pc:hover .av{box-shadow:0 0 22px -2px var(--rc)}
.f{transition:border-color .15s,box-shadow .2s}
.f:hover{box-shadow:0 0 18px -10px var(--skill)}
#links path.hot,.tl path.hot{filter:drop-shadow(0 0 4px currentColor)}
#links path.hot,.tl path.hot{stroke:currentColor}
#links path.flow,.tl path.flow{stroke:var(--flow);stroke-opacity:.95;stroke-width:2.5;stroke-dasharray:4 20;stroke-linecap:round;animation:flow 1.1s linear infinite;filter:drop-shadow(0 0 4px var(--flow))}
@keyframes flow{to{stroke-dashoffset:-25}}
#links .hub,.tl .hub{filter:drop-shadow(0 0 5px var(--skill))}

/* Search everything: the page blurs behind it and the box arrives. */
.gs{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:fade .18s ease-out}
.gsbox{border-radius:12px;border-color:color-mix(in srgb,var(--skill) 40%,var(--line-2));box-shadow:0 24px 70px rgba(var(--shade),.6),0 0 60px -20px var(--skill);animation:pop .26s var(--ease)}
.gsi{transition:background-color .12s}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(-14px) scale(.97)}}

/* Arriving on a section: the blocks rise in turn, bars grow and rings draw. */
section.enter>*{animation:rise .5s var(--ease) both}
section.enter>*:nth-child(2){animation-delay:.05s}section.enter>*:nth-child(3){animation-delay:.1s}section.enter>*:nth-child(n+4){animation-delay:.15s}
section.enter :is(.board .it,.card,.goal,.dec,.band>.it,.bb>.it){animation:rise .5s var(--ease) both}
section.enter :is(.board .it,.card,.goal,.dec,.band>.it,.bb>.it):nth-child(2){animation-delay:.06s}
section.enter :is(.board .it,.card,.goal,.dec,.band>.it,.bb>.it):nth-child(3){animation-delay:.12s}
section.enter :is(.board .it,.card,.goal,.dec,.band>.it,.bb>.it):nth-child(4){animation-delay:.18s}
section.enter :is(.board .it,.card,.goal,.dec,.band>.it,.bb>.it):nth-child(5){animation-delay:.24s}
section.enter :is(.board .it,.card,.goal,.dec,.band>.it,.bb>.it):nth-child(n+6){animation-delay:.3s}
section.enter .stat b{animation:rise .55s var(--ease) both}
section.enter .stat:nth-child(2) b{animation-delay:.05s}section.enter .stat:nth-child(3) b{animation-delay:.1s}section.enter .stat:nth-child(4) b{animation-delay:.15s}section.enter .stat:nth-child(5) b{animation-delay:.2s}section.enter .stat:nth-child(n+6) b{animation-delay:.25s}
section.enter :is(.div,.pjc,.prt,.pc,.node){animation:fade .6s ease-out both}
section.enter :is(.rw .tr i,.rbar i,.mbar i){animation:growx .9s var(--ease) .15s both}
section.enter .wk i{animation:growy .8s var(--ease) .15s both}
section.enter .rings .arc{animation:draw 1.1s var(--ease) .15s both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
@keyframes growx{from{transform:scaleX(0)}}
@keyframes growy{from{transform:scaleY(0)}}
@keyframes draw{from{stroke-dasharray:0 139}}

/* Narrow screens: the bottom bar is glass, the highlight is a lit line that slides along its top edge. */
@media (max-width:899px){
  .rail{box-shadow:0 -1px 0 color-mix(in srgb,var(--skill) 22%,var(--line)),0 -18px 40px -30px var(--skill)}
  .tabs::before{height:2px;width:var(--iw,50px);transform:translateX(var(--ix,0px));top:-4px;border-radius:2px;background:var(--skill);box-shadow:0 0 14px 1px var(--skill),0 6px 22px 2px color-mix(in srgb,var(--skill) 50%,transparent);transition:transform .42s var(--ease),width .2s}
  .todhead h2{font-size:26px}
}
@media (max-width:520px){
  /* An item's Division sits on its own line; its buttons stay on one row. */
  .it .rt{gap:6px}
  .it .rt .dvc{flex-basis:100%}
  .it .rt .btn,.it .rt select.snz{padding:6px 9px}
  .it .rt select.snz{max-width:92px}
  /* Compact row on a phone: date and Division on one line, title under it, buttons on a third line once tapped. */
  .rows .it.c{grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:9px 12px}
  .it.c .tt2{grid-column:1/-1;grid-row:2}
  .it.c .rt{grid-column:2;grid-row:1}
  .it.c.on .rt{grid-column:1/-1;grid-row:3;justify-content:flex-start;margin-top:4px}
  .it.c .dvc{min-width:0}
  .board .it{grid-template-columns:minmax(0,1fr)}
  .board .it .rt{grid-column:1}
  .board .it .dt{display:flex;align-items:baseline;gap:8px}
  .it.c .rt .dvc{flex-basis:auto}
  .it.c .rt{flex-wrap:wrap}
}

/* ================= Themes =================
   The colors above are the Dark theme. Light replaces the color tokens; the generator and saved themes set the same tokens inline from 85-theme.js
   (data-mode on <html> picks which of the two bases a theme builds on). Glow is turned down on light backgrounds. */
:root[data-mode="light"]{
  --bg:#eef2f8;--surface:#ffffff;--surface-2:#f4f7fc;--line:#dbe3ee;--line-2:#c5d1e2;
  --fg:#14213a;--fg-dim:#4a5d7a;--fg-faint:#6e7f9a;
  --ok:#0b8a5e;--bad:#d23a3a;--stale:#b5700a;--planned:#6e7f9a;--skill:#1f6fe0;--gold:#b5700a;--purple:#7a4fe0;--lime:#6b7a0f;
  --on-accent:#fff;--shade:30,48,80;--amb:.5;--glow:0;--brand-a:#14213a;--scrim:rgba(20,33,58,.38);--pop-bg:rgba(255,255,255,.94);--pop-fg:#2a3b57;--strip:#f4f7fc;--flow:#fff;
  --card:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0) 46%);
  --lift:0 1px 2px rgba(var(--shade),.06),0 12px 28px -20px rgba(var(--shade),.4);
  color-scheme:light;
}
:root[data-mode="light"] .shell::after{opacity:.55}
:root[data-mode="light"] .gsbox{box-shadow:0 24px 60px -20px rgba(var(--shade),.45),0 0 0 1px rgba(var(--shade),.04)}
:root[data-mode="light"] .it.qb::after{animation-name:breatheLight}
@keyframes breatheLight{0%,100%{opacity:0}50%{opacity:.55}}

/* ================= Polish pass =================
   Type and numerals, depth levels, one pill language, icon buttons, check-off motion, empty and loading states, spacing rhythm, tree and search touches. */
.stat b,.it .dt b,.it .dt span,.dl,.dd,.ct,.wk,.wkx,.rings,.prk,.mhd .co,.mhs .co,.d14,.tab .n,.tab .c,.bg2,.prr .q,.live,.dn,.gbar,.sup .sd{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum","lnum"}
/* Stat tiles: a quiet number on most tabs, a hero number on Today, and a one-line hint underneath. */
.stat{padding:14px 18px 12px}
.stat b{font-size:28px;line-height:1;letter-spacing:-.01em}
.stat>span:first-of-type{display:block;margin-top:8px}
.todhead+.stats .stat b{font-size:40px}
.stat span.hint{display:block;margin-top:5px;font:400 11px/1.3 var(--font-mono);letter-spacing:0;text-transform:none;color:var(--fg-faint)}
.stat.r span.hint{color:color-mix(in srgb,var(--bad) 75%,var(--fg-dim))}
.stat.a span.hint{color:color-mix(in srgb,var(--stale) 75%,var(--fg-dim))}
.stat b.tick{animation:tick .45s var(--ease)}
@keyframes tick{0%{transform:scale(1.18);filter:brightness(1.4)}100%{transform:none;filter:none}}
.stats{background-color:color-mix(in srgb,var(--surface) 82%,var(--bg))}
.stat{border-color:color-mix(in srgb,var(--line) 60%,transparent)}

/* Depth: urgent rows lift, everything routine sits back. */
.it:not(.qb):not(.qw){background-image:none;background-color:color-mix(in srgb,var(--surface) 74%,var(--bg));border-color:color-mix(in srgb,var(--line) 70%,transparent);box-shadow:var(--edge,0 0 #0000)}
.it:not(.qb):not(.qw):hover{background-image:var(--spot);background-attachment:fixed;box-shadow:var(--edge,0 0 #0000),0 0 34px -18px var(--skill)}
.it.qb,.it.qw{background-color:var(--surface);box-shadow:var(--edge,0 0 #0000),0 1px 0 rgba(var(--hi),.08) inset,0 20px 42px -22px rgba(var(--shade),.95)}
.rows{background-image:none;background-color:color-mix(in srgb,var(--surface) 58%,var(--bg));box-shadow:none}
.it.mini{background-color:transparent}

/* One pill language for every status: a lit dot, a soft fill, the status color. */
.tg2,.tag,.pp,.prl{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:2px 9px 2px 7px;line-height:1.3;vertical-align:1px;background:color-mix(in srgb,currentColor 12%,transparent);border-color:color-mix(in srgb,currentColor 30%,transparent)}
.tg2::before,.pp::before,.prl::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;box-shadow:0 0 6px color-mix(in srgb,currentColor calc(var(--glow)*100%),transparent)}
.tag{padding:2px 8px}
.pp{margin-top:6px}

/* Icon buttons: the glyph shows, the word slides out when the button is pointed at (always shown where there is no hover). */
.btn.ic{gap:0;padding:5px 8px}
.btn.ic>svg{width:15px;height:15px;flex:none;display:block}
.btn.ic .bl{display:inline-block;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;transition:max-width .28s var(--ease),opacity .2s,margin .28s var(--ease)}
.btn.ic:hover .bl,.btn.ic:focus-visible .bl{max-width:90px;opacity:1;margin-left:6px}
@media (hover:none){.btn.ic .bl{max-width:90px;opacity:1;margin-left:6px}}

/* Check-off: the row turns green, a check draws, then it slides away and closes up. */
.it.leaving,.doneform.leaving{pointer-events:none;overflow:hidden;max-height:var(--h,120px);animation:leave .62s var(--ease) .12s forwards}
.it.leaving{background-color:color-mix(in srgb,var(--ok) 14%,var(--surface));border-color:color-mix(in srgb,var(--ok) 55%,var(--line));box-shadow:0 0 36px -10px var(--ok)}
.it.leaving .tt2,.it.leaving .dt{opacity:.45;transition:opacity .25s}
.ckdraw{position:absolute;right:18px;top:50%;width:30px;height:30px;margin-top:-15px;color:var(--ok);pointer-events:none;z-index:3;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--ok) calc(var(--glow)*80%),transparent))}
.ckdraw svg{width:100%;height:100%;display:block}
.ckdraw path{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;animation:ckline .32s ease-out .05s forwards}
.ckdraw circle{fill:color-mix(in srgb,var(--ok) 14%,transparent);stroke:currentColor;stroke-width:1.5}
@keyframes ckline{to{stroke-dashoffset:0}}
@keyframes leave{to{opacity:0;transform:translateX(28px);max-height:0;padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0;border-width:0}}

/* Empty and loading states */
.allclear{display:flex;align-items:center;gap:16px;padding:18px 20px;color:var(--fg)}
.allclear .okring{flex:none;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent);border:1px solid color-mix(in srgb,var(--ok) 45%,transparent);box-shadow:0 0 24px -6px color-mix(in srgb,var(--ok) calc(var(--glow)*100%),transparent)}
.allclear .okring svg{width:24px;height:24px}
.allclear b{display:block;font:600 18px/1.2 var(--font-display);color:var(--ok)}
.allclear span{display:block;font-size:13px;color:var(--fg-dim);margin-top:1px}
.allclear small{display:block;font:400 12px var(--font-mono);color:var(--fg-faint);margin-top:6px}
.sk{display:block;height:14px;border-radius:6px;background:linear-gradient(90deg,var(--line) 0%,color-mix(in srgb,var(--line-2) 60%,var(--surface)) 50%,var(--line) 100%);background-size:220% 100%;animation:shimmer 1.5s linear infinite;opacity:.65}
.sk.w1{width:34%}.sk.w2{width:62%}.sk.w3{width:48%}.sk.h{height:22px;width:26%}
.skc{display:grid;gap:10px;border:1px solid var(--line);border-radius:10px;background:color-mix(in srgb,var(--surface) 74%,var(--bg));padding:var(--sp4);margin-bottom:var(--sp2)}
@keyframes shimmer{to{background-position:-220% 0}}

/* Spacing rhythm (4 / 8 / 12 / 16 / 24 / 32) and softer hairlines. */
.it{padding:var(--sp3) var(--sp4);margin-bottom:var(--sp2)}
.band{margin-bottom:var(--sp5)}
.card{padding:var(--sp4);gap:var(--sp3)}
.board{gap:var(--sp5)}
.board>div{gap:var(--sp4)}
.sh{margin:var(--sp5) 0 var(--sp3)}
.res,.pjr,.prr,.glr .gg,.rows .it.c,.mhr{border-top-color:color-mix(in srgb,var(--line) 55%,transparent)}
.fl,.mhs,.prlist,.person .mhs,.prsum{border-top-color:color-mix(in srgb,var(--line) 60%,transparent)}

/* Org chart: lines draw in on arrival, a Division with open items pulses, Division badges get a tinted gradient. */
.bd{background:linear-gradient(145deg,color-mix(in srgb,var(--c) 34%,transparent),color-mix(in srgb,var(--c) 8%,transparent))}
.bd.sm{background:linear-gradient(145deg,color-mix(in srgb,var(--sc,var(--c)) 34%,transparent),color-mix(in srgb,var(--sc,var(--c)) 8%,transparent))}
.div.pulse::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;border:1px solid var(--bb);animation:pulse 2.8s ease-out infinite}
@keyframes pulse{0%{opacity:.9;box-shadow:0 0 0 0 color-mix(in srgb,var(--bb) 45%,transparent)}70%,100%{opacity:0;box-shadow:0 0 0 12px transparent}}
section.enter #links .ln,section.enter .tl .ln{stroke-dasharray:1;stroke-dashoffset:1;animation:lineIn .9s var(--ease) .1s forwards}
@keyframes lineIn{to{stroke-dashoffset:0}}

/* Search everything: grouped results, a hint bar, recent searches. */
.gsg{display:flex;align-items:center;gap:8px;font:500 10px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);padding:12px 10px 4px}
.gsg:first-child{padding-top:6px}
.gsg i{flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent);opacity:.6}
.gsg b{font-weight:500;color:var(--fg-dim)}
.gsf{display:flex;flex-wrap:wrap;gap:6px 16px;padding:9px 16px;border-top:1px solid var(--line);font:400 11px var(--font-mono);color:var(--fg-faint);background:color-mix(in srgb,var(--bg) 45%,transparent)}
.gsf kbd{font:500 10px var(--font-mono);border:1px solid var(--line-2);border-radius:4px;padding:0 5px;margin-right:4px;color:var(--fg-dim)}
.gsrec{display:flex;flex-wrap:wrap;gap:6px;padding:0 10px 10px}
.gsrec .chip{padding:3px 9px}
.gsrh{font:500 10px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);padding:12px 10px 6px}

/* Theme picker */
.thbox{width:min(600px,100%);overflow:auto;max-height:84vh}
.thh{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.thh b{font:600 20px/1 var(--font-display)}
.thh .btn{cursor:pointer}
.thb{padding:6px 18px 18px;display:flex;flex-direction:column;gap:14px}
.thl{font:500 10px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);margin:12px 0 -4px}
.thgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.thc{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:10px;padding:8px 8px 10px;background:var(--bg);transition:border-color .15s,box-shadow .2s,transform .15s var(--ease);min-width:0}
.thc:hover{border-color:var(--line-2);transform:translateY(-1px)}
.thc[aria-pressed="true"]{border-color:var(--skill);box-shadow:0 0 0 1px var(--skill) inset,0 0 22px -8px var(--skill)}
.thc:focus-visible{outline:2px solid var(--skill);outline-offset:2px}
.thc .nm{font:600 14px var(--font-display);padding:0 2px;overflow-wrap:anywhere}
.thc .nm small{display:block;font:400 11px var(--font-mono);color:var(--fg-faint)}
.thsw{display:grid;grid-template-columns:1fr;gap:5px;height:56px;border-radius:7px;border:1px solid;padding:6px}
.thsw i{display:flex;align-items:center;gap:5px;border:1px solid;border-radius:5px;padding:0 6px;font-style:normal}
.thsw i b{height:5px;border-radius:3px;flex:1}
.thsw i b+b{flex:.6}
.thsw em{display:flex;gap:4px}
.thsw em u{width:12px;height:5px;border-radius:3px}
.thgen{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;align-items:end;border:1px dashed var(--line-2);border-radius:10px;padding:14px}
.thgen label{display:flex;flex-direction:column;gap:6px;font:500 11px var(--font-body);color:var(--fg-dim);min-width:0}
.thgen select{background:var(--bg);color:var(--fg);border:1px solid var(--line-2);border-radius:6px;padding:7px 9px;font:400 13px var(--font-body)}
.thgen input[type=range]{width:100%;accent-color:var(--skill);height:28px;margin:0}
.thgen .wide{grid-column:1/-1}
.thgen .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.thgen input[type=text]{flex:1 1 160px;min-width:0;background:var(--bg);color:var(--fg);border:1px solid var(--line-2);border-radius:6px;padding:7px 10px;font:400 13px var(--font-body)}
.thnote{font-size:12px;color:var(--fg-dim);min-height:1.4em}
.thnote b{color:var(--skill);font-weight:500}
.thsaved{display:flex;flex-direction:column;gap:6px}
.ths{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:color-mix(in srgb,var(--surface) 70%,var(--bg))}
.ths .thsw{width:64px;height:38px;padding:4px;gap:3px}
.ths .thsw i{padding:0 4px}
.ths .nm{font:600 14px var(--font-display);overflow-wrap:anywhere}
.ths .nm small{display:block;font:400 11px var(--font-mono);color:var(--fg-faint)}
.ths .btn{cursor:pointer}
.ths .acts{display:flex;gap:6px}
.thbtn svg{width:18px;height:18px;flex:none}
.thbtn .tn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.topbtns{display:flex;gap:8px}

/* Quick capture button for the phone, above the bottom bar */
.fab{display:none;position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(78px + env(safe-area-inset-bottom,0px));z-index:29;width:52px;height:52px;border-radius:50%;border:0;padding:0;cursor:pointer;align-items:center;justify-content:center;background:var(--skill);color:var(--on-accent);box-shadow:0 12px 28px -8px color-mix(in srgb,var(--skill) 75%,transparent),0 2px 6px rgba(var(--shade),.3);transition:transform .15s var(--ease),box-shadow .2s}
.fab svg{width:24px;height:24px}
.fab:active{transform:scale(.9)}
.fab:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
@media (max-width:899px){
  .fab{display:flex}
  .tab{transition:color .2s,background-color .2s,transform .12s var(--ease)}
  .tab:active{transform:scale(.9)}
  .rail .thbtn{display:none}
}
@media (max-width:520px){
  .todhead+.stats .stat b{font-size:30px}
  .stat{padding:12px 14px 10px}
  .ths{grid-template-columns:auto minmax(0,1fr)}
  .ths .acts{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.pjmsg:has(.skc){border:0;padding:0;background:none}
.thgen input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
.thgen input[type=range]::-webkit-slider-runnable-track{height:10px;border-radius:6px;background:linear-gradient(90deg,hsl(0 70% 55%),hsl(60 70% 50%),hsl(120 60% 45%),hsl(180 65% 45%),hsl(240 70% 60%),hsl(300 65% 55%),hsl(360 70% 55%));border:1px solid var(--line-2)}
.thgen input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-6px;border-radius:50%;background:var(--fg);border:3px solid var(--bg);box-shadow:0 0 0 1px var(--line-2),0 2px 8px rgba(var(--shade),.4)}
.thgen input[type=range]::-moz-range-track{height:10px;border-radius:6px;background:linear-gradient(90deg,hsl(0 70% 55%),hsl(60 70% 50%),hsl(120 60% 45%),hsl(180 65% 45%),hsl(240 70% 60%),hsl(300 65% 55%),hsl(360 70% 55%));border:1px solid var(--line-2)}
.thgen input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--fg);border:3px solid var(--bg)}
.thtune{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;align-items:end}
.thgen input.plain[type=range]::-webkit-slider-runnable-track{background:var(--line-2)}
.thgen input.plain[type=range]::-moz-range-track{background:var(--line-2)}
.thgen .btn:disabled{opacity:.4;cursor:default}
.thgen input[type=file]{display:none}
.thgen label.btn{cursor:pointer}
/* Live preview at the top of the Theme dialog: the applied background and colors on a sample card (the dialog's own scrim hides the page behind it). The art settings sit on <html> and inherit, so the preview only carries data-pat. */
.thprev{position:sticky;top:0;z-index:3;display:grid;min-height:104px;border:1px solid var(--line-2);border-radius:10px;overflow:hidden;background:var(--bg);box-shadow:0 10px 22px -14px rgba(var(--shade),.7);pointer-events:none}
.thprev>*{grid-area:1/1}
.thpv{width:auto;height:auto;border:0;border-radius:0}
:root[data-mode="light"] .thpv{opacity:.55}
:root[data-mode] .thpv[data-pat="image"]{background-image:var(--art-img);background-size:var(--art-fit,cover);background-repeat:var(--art-rep,no-repeat);opacity:var(--art-op,.3);filter:blur(var(--art-blur,0px))}
.thpc{position:relative;display:flex;align-items:center;gap:16px;padding:12px 14px;min-width:0}
.thpcard{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 12px;box-shadow:0 6px 16px -10px rgba(var(--shade),.7)}
.thpcard b{font:600 15px var(--font-display);color:var(--fg)}
.thpcard .t{font:400 12px/1.4 var(--font-body);color:var(--fg-dim)}
.thpcard u{color:var(--skill)}
.thpr{display:flex;align-items:center;gap:6px}
.thpr i{width:9px;height:9px;border-radius:50%}
.thpr .btn{margin-left:auto;padding:3px 10px}
.thpt{display:flex;flex-direction:column;gap:2px;min-width:0}
.thpt b{font:600 20px var(--font-display);color:var(--fg)}
.thpt small{font:400 11px var(--font-mono);color:var(--fg-faint)}
@media (max-width:460px){.thpt{display:none}}

/* The shelf under BonesOS: rules and process, your data, and skills, each in its own tinted column (stacked on a narrow screen). */
.shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,1000px);border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--surface) 72%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--lift);overflow:hidden}
.sg{padding:12px 14px 14px;border-left:1px solid var(--line);min-width:0;background:linear-gradient(180deg,color-mix(in srgb,var(--g) 8%,transparent),transparent 62%)}
.sg:first-child{border-left:0}
.sgh{display:flex;align-items:center;gap:8px;font:600 12px var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--g);margin-bottom:10px;text-shadow:0 0 16px color-mix(in srgb,var(--g) calc(var(--glow)*45%),transparent)}
.sgh svg{width:16px;height:16px;flex:none}
.sgh .ct{margin-left:auto;font:500 11px var(--font-mono);letter-spacing:0;text-shadow:none;color:var(--fg-dim);border:1px solid var(--line-2);border-radius:10px;padding:0 7px}
.sgc{display:flex;flex-wrap:wrap;gap:6px}
.sgc a{font:400 12px var(--font-mono);color:var(--fg-dim);border:1px solid color-mix(in srgb,var(--g) 28%,var(--line-2));border-radius:6px;padding:4px 9px;background:color-mix(in srgb,var(--g) 7%,var(--bg));transition:color .15s,border-color .15s,box-shadow .2s,background-color .15s}
.sgc a:hover{color:var(--fg);border-color:var(--g);background:color-mix(in srgb,var(--g) 14%,var(--bg));box-shadow:0 0 14px -6px var(--g)}
.sgc a:focus-visible{outline:2px solid var(--g);outline-offset:2px}
@media (max-width:820px){
  .shelf{grid-template-columns:1fr}
  .sg{border-left:0;border-top:1px solid var(--line)}
  .sg:first-child{border-top:0}
}

/* ================= Motion levels (see 86-motion.js) =================
   Off stops everything; the idle class (60 s without input, or a hidden tab) pauses every running animation until the next touch.
   The rest is the Alive extras: a pulse down the org lines, a light sweep on changed blocks. */
:root[data-motion="off"] *,:root[data-motion="off"] *::before,:root[data-motion="off"] *::after{animation:none!important;transition:none!important}
:root.idle *,:root.idle *::before,:root.idle *::after{animation-play-state:paused!important}
#links path.travel{stroke:currentColor;stroke-width:3;stroke-linecap:round;fill:none;stroke-dasharray:.06 1;stroke-dashoffset:.06;opacity:.95;filter:drop-shadow(0 0 5px currentColor);animation:travel 1.9s cubic-bezier(.45,.05,.35,1) forwards}
@keyframes travel{from{stroke-dashoffset:.06}to{stroke-dashoffset:-1}}
.div.hit{animation:hit .9s ease-out}
@keyframes hit{0%{box-shadow:0 0 0 1px var(--c) inset,0 0 34px -2px var(--c)}100%{box-shadow:var(--lift)}}
.card,.goal,.dec{position:relative}
.swp{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;overflow:hidden}
.swp::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,color-mix(in srgb,var(--skill) 30%,transparent) 50%,transparent 65%);transform:translateX(-100%);animation:sweep 1s var(--ease) forwards}
@keyframes sweep{to{transform:translateX(100%)}}

/* Health: a Division's dot says what is open (green nothing, amber due within 7 days, red overdue); a role's ring says built or planned. Age is plain text. */
.dot.bad{background:var(--bad);box-shadow:0 0 6px color-mix(in srgb,var(--bad) 55%,transparent)}
.hdot{margin-left:auto;flex:none;width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px color-mix(in srgb,var(--ok) calc(var(--glow)*70%),transparent);align-self:center}
.hdot.warn{background:var(--stale);box-shadow:0 0 8px color-mix(in srgb,var(--stale) calc(var(--glow)*70%),transparent)}
.hdot.bad{background:var(--bad);box-shadow:0 0 8px color-mix(in srgb,var(--bad) calc(var(--glow)*70%),transparent)}
.person .ss{color:var(--ok)}
.person .ss .age{color:var(--fg-faint)}
.person.planned .ss{color:var(--fg-faint)}

/* ---- Layout: Arrange mode (87-layout.js). The move bar sits at the end of each heading and shows only while arranging. ---- */
.lbar{display:none;align-items:center;gap:4px;margin-left:8px;flex:none}
html[data-arrange] .lay[data-mv]>.bh>.lbar,html[data-arrange] .lay[data-mv]>h3>.lbar{display:inline-flex}
.lgrip{position:relative;width:22px;height:22px;box-sizing:border-box;border:1px solid var(--line-2);border-radius:5px;background:var(--surface);cursor:grab}
.lgrip::before{content:"";position:absolute;inset:5px;background:radial-gradient(circle,var(--fg-dim) 1.1px,transparent 1.5px) 0 0/5px 5px}
.lgrip:active{cursor:grabbing}
.lmv{all:unset;box-sizing:border-box;width:22px;height:22px;border:1px solid var(--line-2);border-radius:5px;background:var(--surface);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.lmv::before{content:"";width:6px;height:6px;border-left:1.5px solid var(--fg);border-top:1.5px solid var(--fg);transform:translateY(1px) rotate(45deg)}
.lmv[data-lm="1"]::before{transform:translateY(-1px) rotate(225deg)}
.lmv:hover{border-color:var(--skill)}
.lmv:focus-visible{outline:2px solid var(--skill);outline-offset:1px}
.lmv:disabled{opacity:.3;cursor:default;border-color:var(--line-2)}
html[data-arrange] .lay[data-mv]{outline:1px dashed color-mix(in srgb,var(--skill) 55%,transparent);outline-offset:5px}
.lay.dragging{opacity:.45}
.lay.drop-b{box-shadow:0 -3px 0 0 var(--skill)}
.lay.drop-a{box-shadow:0 3px 0 0 var(--skill)}
.pjcharts>.lay.drop-b{box-shadow:-3px 0 0 0 var(--skill)}
.pjcharts>.lay.drop-a{box-shadow:3px 0 0 0 var(--skill)}
.layfloat{position:fixed;left:50%;transform:translateX(-50%);bottom:max(18px,env(safe-area-inset-bottom,0px));z-index:40;white-space:nowrap;display:flex;align-items:center;gap:8px;padding:7px 8px 7px 16px;border-radius:999px;background:var(--surface);border:1px solid color-mix(in srgb,var(--skill) 50%,var(--line-2));box-shadow:0 10px 30px rgba(var(--shade),.4)}
.layfloat[hidden]{display:none}
.layfloat span{font:500 11px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim)}
.layfloat .btn{cursor:pointer;white-space:nowrap}
@media (max-width:899px){.layfloat{bottom:calc(140px + env(safe-area-inset-bottom,0px))}}
/* On a card the move buttons float over its top edge so the heading never wraps. */
.card.lay>h3>.lbar{position:absolute;top:-13px;right:40px;margin:0;padding:2px;border-radius:7px;background:var(--surface);border:1px solid color-mix(in srgb,var(--skill) 55%,var(--line-2))}
.layrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.layrow .btn{cursor:pointer}
.layt{border:1px solid var(--line);border-radius:6px;overflow:hidden}
.layr{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px;border-top:1px solid var(--line);font-size:14px}
.layr:first-child{border-top:0}
.layr .acts{display:flex;gap:6px}
.layr .btn{cursor:pointer;min-width:34px;text-align:center}
.layr .btn:disabled{opacity:.35;cursor:default}

/* ---- Flip cards: Division and project cards ----
   Each card is a button holding two faces. The front is small (icon or name, status light); the back has the detail. Selecting the card
   turns it over with a small overshoot, like a switch snapping over, and the line to its panel charges (see "Charge" below).
   Only the inner .fi turns; the button itself never rotates, so the connector lines still measure it where it rests. */
.div,.pjc{all:unset;box-sizing:border-box;cursor:pointer;display:flex;min-width:0;position:relative;border-radius:8px;perspective:1100px;transition:transform .15s}
.div{z-index:1}
.div .fi,.pjc .fi{flex:1;min-width:0;display:grid;position:relative;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,1.3,.45,1)}
.div[aria-pressed="true"] .fi,.pjc[aria-pressed="true"] .fi{transform:rotateY(180deg)}
.div .face,.pjc .face{grid-area:1/1;box-sizing:border-box;min-width:0;display:flex;flex-direction:column;border:1px solid var(--line);border-top:3px solid var(--c,var(--skill));background:var(--surface) var(--card);border-radius:8px;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;transition:background-color .2s,box-shadow .3s,border-color .2s}
.div .face{padding:11px 11px 12px;gap:2px;--c:inherit}
.pjc .face{padding:12px 12px 13px;gap:3px;--c:var(--skill)}
.div .face{border-top-color:var(--c)}
.div .fb,.pjc .fb{transform:rotateY(180deg)}
.div .ff,.pjc .ff{align-items:center;justify-content:center;text-align:center;gap:9px}
.div .face{box-shadow:0 -8px 18px -14px var(--c),var(--lift)}
.pjc .face{box-shadow:0 -8px 18px -14px var(--skill),var(--lift)}
.div:hover,.pjc:hover{transform:translateY(-2px)}
.div:hover .face,.pjc:hover .face{background-color:var(--surface-2);border-color:color-mix(in srgb,var(--c,var(--skill)) 55%,var(--line));box-shadow:0 0 30px -10px var(--c,var(--skill)),var(--lift)}
.div:active,.pjc:active{transform:translateY(0) scale(.97)}
.div[aria-pressed="true"] .face,.pjc[aria-pressed="true"] .face{background-color:var(--surface-2);border-color:var(--c,var(--skill));box-shadow:0 0 0 1px var(--c,var(--skill)) inset,0 0 34px -8px var(--c,var(--skill))}
.div:focus-visible,.pjc:focus-visible{outline:2px solid var(--skill);outline-offset:2px}
.div .n,.pjc .pn{display:flex;align-items:center;justify-content:center;gap:7px;font:600 16px/1.2 var(--font-display);overflow-wrap:anywhere;text-align:center}
.pjc .pn{font-size:18px}
.div .n .hdot,.pjc .pn .hdot{margin:0}
.div .bt,.pjc .bt{font:600 14px/1.2 var(--font-display);letter-spacing:.04em;text-transform:uppercase;color:var(--c,var(--skill));margin-bottom:4px;overflow-wrap:anywhere}
.div .b{font-size:12px;color:var(--fg-dim);line-height:1.3}
.div .m{font:400 11px/1.4 var(--font-mono);color:var(--fg-faint);margin-top:4px}
.div .m em{font-style:normal;color:var(--ok)}
.div .face,.pjc .face{align-items:stretch}
.div .ff,.pjc .ff{align-items:center}
.div .fb,.pjc .fb{align-items:flex-start;text-align:left}
.div .bd.lg{transition:box-shadow .3s}
.div[aria-pressed="true"] .ff .bd{box-shadow:0 0 16px -2px var(--c)}
.pjc .pi{font-size:12px;color:var(--fg-dim);line-height:1.35;overflow-wrap:anywhere}
.pjc .pm{font:400 11px/1.4 var(--font-mono);color:var(--fg-faint);margin-top:4px}
.pjc .pm em{font-style:normal;color:var(--ok)}

/* ---- Charge: switching a card on sends the light on ----
   The selected line is drawn as two segments, a (root to card) and b (card to panel). On a fresh selection (the "charging" class, see charge() in 86-motion.js)
   a draws in, then b, then the moving dashes appear, and the panel powers up. Off stops all of it; Calm keeps it, since it is a response to a click, not ambient. */
@keyframes charge{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes powerup{0%{box-shadow:0 0 0 1px var(--c) inset,0 0 46px -4px var(--c),var(--lift)}100%{box-shadow:-12px 0 34px -20px var(--c),var(--lift)}}
.org.charging>#links path.hot.a,.pjorg.charging>.tl path.hot.a{stroke-dasharray:1;animation:charge .35s ease-out both}
.org.charging>#links path.hot.b,.pjorg.charging>.tl path.hot.b{stroke-dasharray:1;animation:charge .35s ease-out .3s both}
.org.charging>#links path.flow.a,.pjorg.charging>.tl path.flow.a{animation:flow 1.1s linear infinite,fade .3s linear .3s backwards}
.org.charging>#links path.flow.b,.pjorg.charging>.tl path.flow.b{animation:flow 1.1s linear infinite,fade .3s linear .6s backwards}
.org.charging #panel>.panel,.pjorg.charging #pjdetail>.panel{animation:reveal .45s var(--ease) .5s backwards,powerup 1s ease-out .5s}

/* Diagnose: the report preview */
.diagpre{margin:0;background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:10px 12px;font:12px/1.55 var(--font-mono);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--fg);-webkit-user-select:text;user-select:text}
.diagpre:focus-visible{outline:2px solid var(--skill);outline-offset:2px}