/* SL Client Portal, layout v2 (docs/REDESIGN.md): Secret Location's style (secretlocation.com assets/site.css), always
   dark in every browser, with no light theme and no toggle (Ryan, 2026-11-11). Self-hosted fonts, no CDN. The header bar
   is dark too, so logos only ever sit on dark. No inline styles anywhere (the CSP blocks them): positions on timelines
   come from the generated l0..l100 / w1..w100 classes the build appends to this file. Smallest text 11px. */
@font-face{font-family:Jost;src:url('/assets/fonts/jost-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Inter;src:url('/assets/fonts/inter-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}

:root{color-scheme:dark;--page:#101924;--surface:#172330;--surface-2:#1d2b3a;--well:#080d15;--text:#f5f1e9;--muted:#b7c1c9;
  --line:#ffffff26;--line-2:#ffffff14;--accent:#9ce8dc;--accent-hover:#c9fff3;--accent-ink:#101924;--lilac:#c3b4ec;
  --done:#6CEA9E;--progress:#26A9E0;--moved:#f47f7f;--wait:#e3b04b;--star:#f3c74d;
  --body:Inter,Arial,sans-serif;--display:Jost,Arial,sans-serif;--header:72px;--radius:4px;--gutter:56px}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 16px)}
body{margin:0;background:var(--page);color:var(--text);font:400 15px/1.55 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,video,svg{max-width:100%;display:block}
img{height:auto}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:450;line-height:1.08;letter-spacing:-.035em;margin:0}
h1{font-size:clamp(30px,3.6vw,48px)}
h2{font-size:clamp(20px,1.8vw,26px)}
h3{font-size:18px;letter-spacing:-.02em}
p{margin:0 0 1em}
[hidden]{display:none!important}
.wrap{width:min(1320px,calc(100% - var(--gutter) * 2));margin-inline:auto}
.skip{position:fixed;top:8px;left:12px;z-index:100;background:var(--accent);color:var(--accent-ink);padding:10px;transform:translateY(-160%)}
.skip:focus{transform:none}
.muted{color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.n{font-size:11px;color:var(--muted);font-weight:600;margin-left:4px}
/* touch phones and narrow screens see .ph; desktops see .dt */
.ph{display:none!important}
@media (max-width:760px),(hover:none) and (pointer:coarse){.ph{display:inline-flex!important}.dt{display:none!important}
  ol.ph{display:block!important}}

/* ---------------------------------------------------------------- header: always dark */
.bar{position:sticky;top:0;z-index:40;height:var(--header);background:#101924ee;border-bottom:1px solid #ffffff14;backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);color:#f5f1e9}
.bar-in{height:100%;display:flex;align-items:center;gap:24px}
.lockup{display:flex;align-items:center;gap:18px;min-width:0;flex:none}
.lockup .sl-logo{width:200px;height:auto}
.lockup .sl-mark{display:none;width:28px;height:auto}
.lockup .divider{width:1px;height:28px;background:#ffffff26;flex:none}
.lockup .client-logo{width:auto;flex:none}
.logo-h38{height:36px}.logo-h28{height:28px}.logo-h26{height:24px}
.nav{display:flex;align-items:center;gap:6px;margin-left:auto;min-width:0}
.pill{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:6px 13px;border:1px solid #ffffff26;border-radius:999px;font-size:13px;
  color:#f5f1e9;white-space:nowrap;background:none;cursor:pointer}
.pill:hover{border-color:#9ce8dc}
.pill[aria-current],.pill.on{background:#f5f1e9;color:#101924;border-color:#f5f1e9}
main .pill{color:var(--text);border-color:var(--line)}
main .pill[aria-current],main .pill.on{background:var(--text);color:var(--page);border-color:var(--text)}
.who{display:flex;align-items:center;margin-left:8px;flex:none}
.acct{position:relative}
.acct summary{list-style:none;cursor:pointer;border-radius:50%}
.acct summary::-webkit-details-marker{display:none}
.acct-pop{position:absolute;right:0;top:calc(100% + 10px);min-width:220px;background:#172330;border:1px solid #ffffff26;border-radius:6px;
  padding:14px;display:flex;flex-direction:column;gap:10px;box-shadow:0 12px 40px #0008;color:#f5f1e9;z-index:50}
.acct-name{font-size:14px}
.acct-row{display:flex;align-items:center;gap:10px;background:none;border:0;color:#f5f1e9;cursor:pointer;padding:4px 0;font-size:13px;text-align:left}
.acct-row:hover{color:#9ce8dc}
.acct form{margin:0}
.level-chip{align-self:flex-start;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border:1px solid #9ce8dc;color:#9ce8dc;border-radius:2px}
.level-chip.lv-named{border-color:#c3b4ec;color:#c3b4ec}
.level-chip.lv-team{border-color:#b7c1c9;color:#b7c1c9}

/* avatars: initials drawn from data-i (an icon, not a word) */
.av{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#2a3b4d;color:#f5f1e9;flex:none;
  font:600 12px/1 var(--body);letter-spacing:.02em;border:2px solid var(--page)}
.av::before{content:attr(data-i)}
.av.sl{background:#9ce8dc;color:#101924}
.av.sm{width:26px;height:26px;font-size:11px}

@media (max-width:1000px){.lockup .sl-logo{width:170px}:root{--gutter:32px}}
@media (max-width:600px){:root{--header:60px;--gutter:16px}
  .bar{position:relative;height:auto}
  .bar-in{flex-wrap:wrap;gap:0 12px;padding:10px 0 8px;height:auto}
  .lockup{height:40px;gap:12px}.lockup .sl-logo{width:128px}.lockup .divider{height:22px}
  .logo-h38{height:28px}.logo-h28{height:22px}.logo-h26{height:20px}
  .who{margin-left:auto}
  .nav{order:3;width:100%;margin:8px 0 0;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .nav::-webkit-scrollbar{display:none}
  .nav:empty{display:none}}
@media (max-width:359px){.lockup .sl-logo{display:none}.lockup .sl-mark{display:block}}

/* ---------------------------------------------------------------- page frame */
main{padding:28px 0 72px;min-height:60vh}
.crumb{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);margin-bottom:12px}
.crumb svg{width:14px;height:14px}
.crumb:hover{color:var(--accent)}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.foot{border-top:1px solid var(--line-2);padding:18px 0;font-size:12px;color:var(--muted)}
.foot .wrap{display:flex;justify-content:space-between;gap:16px}
.priv{display:inline-flex;align-items:center;gap:6px}
.priv svg{width:13px;height:13px}

/* ---------------------------------------------------------------- chips, buttons */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.04em;padding:3px 9px;border:1px solid var(--line);
  color:var(--muted);border-radius:3px;white-space:nowrap;line-height:1.5;background:transparent}
a.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip svg{width:13px;height:13px}
.chip .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tone-done{color:var(--done);border-color:color-mix(in srgb,var(--done) 55%,transparent)}
.tone-progress{color:var(--progress);border-color:color-mix(in srgb,var(--progress) 55%,transparent)}
.tone-proposal{color:var(--lilac);border-color:color-mix(in srgb,var(--lilac) 55%,transparent)}
.tone-moved,.chip-hold,.chip-overdue{color:var(--moved);border-color:color-mix(in srgb,var(--moved) 60%,transparent)}
.chip-overdue{background:color-mix(in srgb,var(--moved) 14%,transparent)}
.chip-wait{color:var(--wait);border-color:color-mix(in srgb,var(--wait) 55%,transparent)}
.chip-grant{color:var(--lilac);border-color:color-mix(in srgb,var(--lilac) 55%,transparent)}
.chip-team,.chip-roles,.chip-more{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.chip-admin{color:var(--text);border-color:var(--text)}
.chip-ai{color:var(--muted)}
.chip-status{color:var(--text)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:8px 15px;min-height:38px;font-size:13px;font-weight:600;
  line-height:1.2;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);border-radius:2px;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn svg{width:15px;height:15px}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn.big{min-height:46px;padding:12px 20px;font-size:14px}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.icon-btn{display:inline-grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:3px;background:none;cursor:pointer;color:var(--text)}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.icon-btn.danger:hover{border-color:var(--moved);color:var(--moved)}
.icon-btn svg{width:16px;height:16px}
.icon-link{display:inline-grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:3px;color:var(--muted)}
.icon-link:hover{color:var(--accent);border-color:var(--accent)}
.icon-link svg{width:15px;height:15px}
.small-btn{background:none;border:1px solid var(--line);border-radius:2px;padding:5px 10px;font-size:12px;cursor:pointer;color:var(--text)}
.small-btn:hover{border-color:var(--accent);color:var(--accent)}

/* stars: a toggle at a card's top right (filled when starred) */
form.star{position:absolute;top:8px;right:8px;margin:0;z-index:3}
form.star button{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid #ffffff3a;background:#101924b3;color:#f5f1e9;
  cursor:pointer;backdrop-filter:blur(4px)}
form.star button:hover{border-color:var(--star);color:var(--star)}
form.star button svg{width:16px;height:16px}
form.star button[aria-pressed="true"]{color:#101924;background:var(--star);border-color:var(--star)}
form.star button[aria-pressed="true"] svg{fill:currentColor}

/* folds */
details.fold{margin-top:14px}
details.fold>summary,details.sec-fold>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
details.fold>summary::-webkit-details-marker,details.sec-fold>summary::-webkit-details-marker{display:none}
details.fold>summary::before,details.sec-fold>summary::before{content:'';width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg);transition:transform .15s}
details[open].fold>summary::before,details[open].sec-fold>summary::before{transform:rotate(45deg)}
details.fold>summary:hover{color:var(--accent)}
details.sec-fold>summary h2{color:var(--text)}
details.sec-fold[open]>summary{margin-bottom:14px}

/* ---------------------------------------------------------------- summary band */
.summary{margin-bottom:18px}
.title-row{display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap}
.title-row h1{overflow-wrap:break-word;hyphens:auto}
.title-chips{display:flex;gap:6px;flex-wrap:wrap}
.seg{display:inline-flex;margin-left:auto;border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.seg a,.seg button,.seg label{display:inline-flex;align-items:center;padding:6px 14px;border-radius:999px;font-size:13px;color:var(--muted);background:none;border:0;cursor:pointer}
.seg a[aria-current],.seg button[aria-pressed="true"]{background:var(--text);color:var(--page)}
.seg a[aria-current] .n,.seg button[aria-pressed="true"] .n{color:var(--page)}
.seg.small a,.seg.small button{padding:4px 11px;font-size:12px}
.numstrip{display:flex;align-items:center;flex-wrap:wrap;gap:12px 22px;margin:14px 0 18px}
.chip-place,.chip-range{font-size:12px;color:var(--text);padding:5px 10px}
.num{display:flex;flex-direction:column;line-height:1.1}
.num b{font:450 26px/1.05 var(--display);letter-spacing:-.03em}
.num span{font-size:11px;color:var(--muted);margin-top:3px;letter-spacing:.02em}
.num.team b{color:var(--accent)}
.band{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch}
.band:not(:has(>.who-card)){grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.band:not(:has(.next-card)):not(:has(>.who-card)){grid-template-columns:1fr}
.hero-card,.next-card,.who-card{position:relative;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden;min-width:0}
.hero-card .card-still{aspect-ratio:16/9}
.hero-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px}
.hero-t{font-size:22px}
.hero-act{display:flex;flex-wrap:wrap;gap:10px}
.hero-act .full{width:100%}
.hero-card.wide{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.hero-card.wide .card-still{aspect-ratio:auto;min-height:100%}
.hero-card.wide .hero-body{justify-content:center;padding:20px 22px}
.qr-box{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--muted)}
.qr-box svg.qr{width:200px;height:200px;border-radius:3px;flex:none}
.hero-card:not(.wide) .qr-box svg.qr{width:160px;height:160px}
.next-card,.who-card{padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.k{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0}
.k svg{width:13px;height:13px}
.next-main{display:flex;gap:14px;align-items:center}
.cal{width:78px;flex:none;border:1px solid var(--line);border-radius:6px;overflow:hidden;text-align:center;background:var(--surface-2)}
.cal .m{display:block;background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:3px 0}
.cal b{display:block;font:450 34px/1.15 var(--display)}
.cal .y{display:flex;justify-content:center;align-items:center;gap:4px;font-size:11px;color:var(--muted);padding-bottom:5px}
.cal .y svg{width:12px;height:12px;color:var(--done)}
.cal.done .m{background:var(--done);color:#101924}
.cal.tbd .m{background:var(--surface);color:var(--muted)}
.next-what{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.next-what b{font:450 20px/1.15 var(--display);letter-spacing:-.02em}
.road{list-style:none;margin:auto 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));position:relative}
.road::before{content:'';position:absolute;left:14px;right:14px;top:11px;height:1px;background:var(--line)}
.road li{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;font-size:12px;color:var(--muted);min-width:0}
.road .dot{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);display:grid;place-items:center}
.road .dot svg{width:12px;height:12px}
.road .done .dot{border-color:var(--done);color:var(--done)}
.road .now .dot{border-color:var(--accent);background:var(--accent)}
.road .now{color:var(--text)}
.road .lbl{overflow-wrap:normal;hyphens:auto;line-height:1.25}
.who-num{display:flex;align-items:center;gap:12px}
.who-num b{font:450 40px/1 var(--display)}
.avs{display:flex;flex-wrap:wrap}
.avs .av{margin-left:-6px}
.avs .av:first-child{margin-left:0}
.who-card.shared{border-color:color-mix(in srgb,var(--lilac) 50%,transparent)}
.who-card.shared .k{color:var(--lilac)}
.who-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13px}
.who-rows li{display:flex;align-items:center;gap:8px;min-width:0}
.who-rows .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who-rows .d{color:var(--muted);font-size:12px}
.more{font-size:13px;color:var(--accent);margin-top:auto}

/* ---------------------------------------------------------------- strips: starred, latest, shared */
.strip{display:flex;gap:28px;flex-wrap:wrap;margin:6px 0 22px;padding:14px 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.strip-seg{min-width:0;flex:1 1 auto}
.strip-h{display:flex;align-items:center;gap:8px;font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.strip-h svg{width:14px;height:14px;color:var(--star)}
.strip.shared{border-top:2px solid var(--lilac)}
.strip.shared .strip-h svg{color:var(--lilac)}
.minis{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.mini{position:relative;width:170px;flex:none}
.mini-in{display:flex;flex-direction:column;gap:5px}
.mini-still{position:relative;aspect-ratio:16/9;background:var(--well);border-radius:3px;overflow:hidden;display:block}
.mini-still img{width:100%;height:100%;object-fit:cover}
.mini-t{font-size:13px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mini-d{display:flex;gap:6px;align-items:center;font-size:11px;color:var(--muted)}
.mini form.star{top:4px;right:4px}
.mini form.star button{width:26px;height:26px}

/* ---------------------------------------------------------------- staff bands: team, admin numbers, where things are */
.team-band{display:flex;flex-direction:column;gap:12px;margin:0 0 18px;padding:14px 16px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius)}
.people-row{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center}
.side{display:inline-flex;align-items:center;gap:4px}
.side .av{margin-left:-6px}
.side-l{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:10px}
.roles{display:flex;flex-wrap:wrap;gap:8px}
.role{display:inline-flex;align-items:center;gap:6px;padding:5px 6px 5px 10px;border:1px solid var(--line);border-radius:4px;font-size:13px}
.role b{font-weight:500}
.team-band details.fold{margin-top:0}
.admin-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 18px}
.admin-strip .num{padding:12px 14px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius)}
.admin-strip .num:hover{border-color:var(--accent)}
.where{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.svc{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--line);border-radius:4px;font-size:13px;background:var(--surface)}
a.svc:hover{border-color:var(--accent)}
.svc-ico{display:grid;place-items:center;width:20px;height:20px}
.svc-ico svg{width:18px;height:18px}
.svc .ext{color:var(--muted);font-size:12px}
.chip-files{margin-top:12px;font-size:12px;padding:6px 12px}

/* ---------------------------------------------------------------- sections and cards */
.sec{margin-top:30px}
.sec-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.sec-x{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.grid{display:grid;gap:16px}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.g3{grid-template-columns:1fr}}
.card{position:relative;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius);display:flex;flex-direction:column;overflow:hidden;min-width:0}
.card-still{position:relative;display:block;aspect-ratio:16/9;background:var(--well);overflow:hidden}
.card-still img,.card-still video{width:100%;height:100%;object-fit:cover}
.card-still.contain img,.card-still.contain video{object-fit:contain}
.card-still .glyph,.tile-still .glyph,.mini-still .glyph{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted)}
.card-still .glyph svg{width:42px;height:42px;opacity:.7}
.badge{position:absolute;left:10px;bottom:10px;background:#101924d0;color:#f5f1e9;border-radius:3px;padding:2px 8px;font-size:11px;font-weight:600}
.card-body{padding:14px 16px 14px;display:flex;flex-direction:column;flex:1;gap:9px}
.card-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word;hyphens:auto}
.card-head{display:flex;gap:10px;align-items:flex-start;padding-right:30px}
.kind-ico{display:grid;place-items:center;width:30px;height:30px;border-radius:4px;background:var(--surface-2);color:var(--lilac);flex:none}
.kind-ico svg{width:17px;height:17px}
.card-foot{margin-top:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card.grant{border-color:color-mix(in srgb,var(--lilac) 40%,transparent)}
.card.grant .card-body{padding-top:16px}

/* ---------------------------------------------------------------- timeline */
.tl{position:relative;padding:10px 0 4px}
.tl-axis{position:relative;height:22px;margin:0 14px;border-bottom:1px solid var(--line)}
.tick{position:absolute;bottom:0;height:6px;border-left:1px solid var(--line)}
.tick span{position:absolute;bottom:8px;transform:translateX(-50%);font-size:11px;color:var(--muted);white-space:nowrap}
.tl-track{position:relative;height:72px;margin:0 14px}
.tl-phase{position:absolute;top:30px;height:12px;border-radius:3px;background:color-mix(in srgb,var(--progress) 35%,transparent);border:1px solid color-mix(in srgb,var(--progress) 60%,transparent)}
.tl-phase span{position:absolute;top:16px;left:0;font-size:11px;color:var(--muted);white-space:nowrap}
.tl-phase.ev{background:color-mix(in srgb,var(--accent) 50%,transparent);border-color:var(--accent)}
.tl-phase.pitch{background:color-mix(in srgb,var(--lilac) 30%,transparent);border-color:color-mix(in srgb,var(--lilac) 60%,transparent)}
.tl-dot{position:absolute;top:30px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--done);border:2px solid var(--page);z-index:2}
.tl-dot.next{background:var(--page);border:2px solid var(--accent);width:14px;height:14px;margin-left:-7px;top:29px}
.tl-dot.tbd{background:var(--page);border:2px dashed var(--muted)}
.tl-dot.moved{background:var(--moved)}
.tl-dot.staff{opacity:.75}
.tl-dot.staff.done{background:transparent;border:2px solid var(--done)}
.tl-dot.far::after{content:'//';position:absolute;left:-16px;top:-3px;font-size:11px;color:var(--muted)}
.tl-event{position:absolute;top:26px;width:20px;height:20px;margin-left:-10px;background:var(--accent);transform:rotate(45deg);z-index:3}
.tl-event span{position:absolute;transform:rotate(-45deg) translate(-40%,-30px);font-size:12px;color:var(--text);white-space:nowrap;top:-6px;left:0}
.tl-seat{position:absolute;top:2px;margin-left:-9px;color:var(--wait)}
.tl-seat svg{width:18px;height:18px}
.tl-today{position:absolute;top:0;bottom:0;width:0;border-left:2px solid var(--moved);z-index:1}
.tl-today span{position:absolute;top:-2px;left:4px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--moved)}
.tl-list{list-style:none;margin:0;padding:0;flex-direction:column;gap:8px}
.tl-list li{display:flex;align-items:center;gap:12px;font-size:14px;padding:4px 0}
.dtile{width:46px;flex:none;text-align:center;border:1px solid var(--line);border-radius:5px;overflow:hidden;font-size:11px}
.dtile span{display:block;background:var(--surface-2);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:1px 0}
.dtile b{display:block;font:450 18px/1.3 var(--display)}
.tl-list li.ev .dtile span{background:var(--accent);color:var(--accent-ink)}
.tl-list li.done{color:var(--muted)}
.dates{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px;font-size:13px}
.dates li{display:grid;grid-template-columns:110px 1fr auto;gap:12px;align-items:center}
.dates .d{color:var(--muted)}
.dates li.staff{color:var(--muted)}
.tl-board{display:flex;flex-direction:column;gap:2px}
.tl-board .tl-axis{margin-left:168px}
.tl-row{display:grid;grid-template-columns:154px minmax(0,1fr);gap:14px;align-items:center;min-height:38px;border-bottom:1px solid var(--line-2)}
.tl-row .tl-track{height:36px;margin:0 14px}
.tl-row .tl-phase{top:12px}
.tl-row .tl-event{top:9px;width:16px;height:16px;margin-left:-8px}
.tl-l{display:flex;align-items:center;gap:8px;font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.tl-l:hover{color:var(--accent)}
.pbar{background:color-mix(in srgb,var(--progress) 45%,transparent)}
.pbar.k2{background:color-mix(in srgb,var(--done) 40%,transparent);border-color:color-mix(in srgb,var(--done) 60%,transparent)}
.pbar.k3{background:color-mix(in srgb,var(--lilac) 40%,transparent);border-color:color-mix(in srgb,var(--lilac) 60%,transparent)}
.pbar.k4{background:color-mix(in srgb,var(--wait) 40%,transparent);border-color:color-mix(in srgb,var(--wait) 60%,transparent)}
.tl-toggle{margin-left:0}
.tl-toggle input{position:absolute;opacity:0;pointer-events:none}
.tl-toggle input:checked+label{background:var(--text);color:var(--page)}
.tl-toggle input:focus-visible+label{outline:3px solid var(--accent)}
.overview:not(:has(#tlv-r:checked)) .tl-board[data-view="person"]{display:none}
.overview:has(#tlv-r:checked) .tl-board[data-view="project"]{display:none}
@media (max-width:600px){.tl-board .tl-axis{margin-left:0}.tl-row{grid-template-columns:1fr;gap:0}.tl-row .tl-track{margin:0 4px}}

/* ---------------------------------------------------------------- files repo */
.repo-tools{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin:14px 0 6px}
.repo-tools input[type=search]{flex:1 1 260px;min-width:0;padding:9px 12px;background:var(--surface);border:1px solid var(--line);border-radius:3px}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.count{font-size:12px;color:var(--muted);margin-left:auto}
.repo-group{margin-top:22px}
.repo-h{font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line-2);padding-bottom:8px;margin-bottom:12px}
.tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
@media (max-width:1180px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:760px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile{position:relative;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius);min-width:0}
.tile:hover{border-color:var(--line)}
.tile-in{display:flex;flex-direction:column;gap:6px;padding:8px 8px 10px}
.tile-still{position:relative;display:block;aspect-ratio:16/10;background:var(--well);border-radius:3px;overflow:hidden}
.tile-still img{width:100%;height:100%;object-fit:cover}
.tile-still.contain img{object-fit:contain}
.tile-still .glyph svg{width:30px;height:30px;opacity:.7}
.tile-t{font-size:13px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding-right:4px}
.tile-m{display:flex;gap:6px;align-items:center;font-size:11px;color:var(--muted);flex-wrap:wrap;white-space:nowrap}
.tile form.star{top:12px;right:12px}
.tile form.star button{width:28px;height:28px}
.rows{display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden}
.rows+.rows,.tiles+.rows{margin-top:10px}
.row{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr) auto minmax(76px,auto) 64px;gap:10px;align-items:center;padding:8px 10px;background:var(--surface);font-size:13px}
.row+.row{border-top:1px solid var(--line-2)}
.row-ico{display:grid;place-items:center;color:var(--muted)}
.row-ico svg{width:17px;height:17px}
.row-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.row-t:hover{color:var(--accent)}
.row-d{font-size:12px;color:var(--muted);text-align:right;white-space:nowrap}
.row form.star{position:static}
.row form.star button{width:28px;height:28px;background:none;color:var(--muted);border-color:var(--line)}
.row form.star button[aria-pressed="true"]{color:#101924;background:var(--star)}
.row .chips{justify-content:flex-end}
details.mac{margin-top:10px}
.is-off{display:none!important}
@media (max-width:600px){.row{grid-template-columns:20px minmax(0,1fr) auto;grid-template-areas:"i t s" "i c c"}
  .row-ico{grid-area:i}.row-t{grid-area:t}.row .chips{grid-area:c;justify-content:flex-start}.row-d{display:none}.row-acts{grid-area:s}}

/* ---------------------------------------------------------------- item viewer */
.item-head{position:relative;display:flex;flex-direction:column;gap:12px;margin-bottom:18px;padding-right:44px}
.item-head form.star{top:0;right:0}
.item-head h1{overflow-wrap:anywhere}
.viewer-video video{width:100%;max-height:78vh;background:#000;border-radius:var(--radius)}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.gallery.one{grid-template-columns:minmax(0,1fr)}
.gallery.one .gal img{max-height:72vh;object-fit:contain}
.gal{display:block;background:var(--well);border-radius:3px;overflow:hidden}
.gal img{width:100%;height:100%;object-fit:contain;aspect-ratio:16/10}
.gal:hover{outline:2px solid var(--accent)}
@media (max-width:760px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pdf-view{display:flex;flex-direction:column;gap:12px}
.pdf-page{background:var(--well);border-radius:var(--radius);overflow:hidden}
.pdf-page img{width:100%;max-height:78vh;object-fit:contain}
.pdf-strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.pg{flex:none;width:120px;border:2px solid transparent;border-radius:3px;overflow:hidden;background:var(--well)}
.pg[aria-current],.pg:hover{border-color:var(--accent)}
.file-list{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-direction:column;gap:6px;font-size:13px}
.file-list a{display:inline-flex;align-items:center;gap:8px;overflow-wrap:anywhere}
.file-list svg{width:14px;height:14px;flex:none}

/* ---------------------------------------------------------------- client home and overview */
.shelf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.shelf.clients{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){.shelf.clients{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.shelf,.shelf.clients{grid-template-columns:1fr}}
.pcard,.ccard{position:relative;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.pcard-still{position:relative;display:block;aspect-ratio:16/9;background:var(--well)}
.pcard-still img{width:100%;height:100%;object-fit:cover}
.pcard-still .glyph{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted)}
.over{position:absolute;left:12px;top:12px}
.over .chip{background:#101924;border-color:#ffffff40;color:#f5f1e9;box-shadow:0 2px 10px #0008}
.over .chip.tone-done{color:#6CEA9E}.over .chip.tone-progress{color:#26A9E0}.over .chip.tone-proposal{color:#c3b4ec}
.pcard-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.pcard-body h2{font-size:28px}
.pcard-body h2 a:hover{color:var(--accent)}
.line{font-size:14px;color:var(--muted);margin:0}
.pcard-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:8px;flex-wrap:wrap}
.admin-chips{margin-top:2px}
.ccard-logo{display:grid;place-items:center;height:132px;background:#080d15;padding:20px}
.ccard-logo img{max-height:80px;width:auto}
.ccard-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:12px;flex:1}
.ccard-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;flex-wrap:wrap}
.seen{font-size:12px;color:var(--muted)}
.next-mini{display:flex;align-items:center;gap:12px}
.next-mini .cal{width:58px}
.next-mini .cal b{font-size:24px}
.next-mini span b{display:block;font:450 17px/1.2 var(--display);margin-bottom:4px}
.overview .sec{margin-top:34px}

/* ---------------------------------------------------------------- dialogs: video player and lightbox */
dialog{border:0;padding:0;background:transparent;color:#f5f1e9;max-width:none;max-height:none}
dialog::backdrop{background:#080d15ee}
dialog .x{position:fixed;top:16px;right:18px;width:40px;height:40px;border-radius:50%;border:1px solid #ffffff40;background:#101924;color:#f5f1e9;font-size:16px;cursor:pointer;z-index:2}
.player video{width:min(1200px,92vw);max-height:84vh;background:#000;border-radius:4px}
.lightbox figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px}
.lightbox img{max-width:88vw;max-height:80vh;object-fit:contain}
.lightbox figcaption{display:flex;align-items:center;gap:14px;font-size:13px}
.lb-n{color:#b7c1c9}
.nav-b{position:fixed;top:50%;transform:translateY(-50%);width:46px;height:64px;border:1px solid #ffffff30;background:#101924cc;color:#f5f1e9;font-size:28px;cursor:pointer;border-radius:3px}
.nav-b.prev{left:12px}.nav-b.next{right:12px}

/* ---------------------------------------------------------------- Admin: Access */
.nums{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px}
.nums .num{padding:12px 16px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius);min-width:120px}
.callout{padding:12px 16px;border:1px solid color-mix(in srgb,var(--done) 50%,transparent);border-radius:var(--radius);margin-bottom:16px;font-size:14px}
.callout.bad{border-color:color-mix(in srgb,var(--moved) 60%,transparent)}
.access-group{margin-top:26px}
.sec-title{font-size:20px;margin-bottom:12px}
.access-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:1000px){.access-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.access-grid{grid-template-columns:1fr}}
.ucard{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius);padding:12px 14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.ucard.off{opacity:.6}
.ucard-top{display:flex;align-items:center;gap:10px}
.ucard-id{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.ucard-id b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip.on{color:var(--done);border-color:color-mix(in srgb,var(--done) 50%,transparent)}
.chip.off{color:var(--moved)}
.when{font-size:12px;color:var(--muted);white-space:nowrap}
.ucard-grants{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.grant-chip{padding-right:3px}
.grant-chip form.inline{display:inline;margin:0}
.grant-chip button{background:none;border:0;color:inherit;cursor:pointer;padding:0 3px;display:inline-grid;place-items:center}
.grant-chip button svg{width:11px;height:11px}
.grant-menu{position:relative}
.grant-menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--accent);border:1px dashed var(--line);border-radius:3px;padding:3px 8px}
.grant-menu summary svg{width:12px;height:12px}
.grant-menu summary::-webkit-details-marker{display:none}
.menu{position:absolute;z-index:10;top:calc(100% + 4px);left:0;min-width:220px;background:var(--surface-2);border:1px solid var(--line);border-radius:4px;padding:6px;display:flex;flex-direction:column}
.menu form{margin:0}
.menu-row{display:flex;justify-content:space-between;width:100%;padding:7px 9px;background:none;border:0;color:var(--text);cursor:pointer;font-size:13px;text-align:left;border-radius:3px}
.menu-row:hover{background:var(--surface)}
.menu-row.off{color:var(--muted);cursor:default}
.acts{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.acts form{margin:0}
details.pw{display:flex;gap:6px}
details.pw summary{list-style:none}
details.pw summary::-webkit-details-marker{display:none}
details.pw[open]{flex-basis:100%}
details.pw form{display:flex;gap:6px;margin-top:6px}
details.pw input{flex:1;min-width:0;padding:6px 8px;background:var(--page);border:1px solid var(--line);border-radius:2px}
.staff-on{display:flex;align-items:center;gap:4px;margin-top:10px;font-size:12px}
.staff-on .muted{margin-right:8px}
.add-user{position:relative}
.add-user>summary{list-style:none}
.add-user>summary::-webkit-details-marker{display:none}
.add-user[open] .filters{position:absolute;right:0;top:calc(100% + 8px);z-index:20;width:min(560px,92vw);background:var(--surface-2);border:1px solid var(--line);padding:16px;border-radius:4px}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.filters label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.filters input,.filters select{padding:7px 9px;background:var(--page);border:1px solid var(--line);border-radius:2px;color:var(--text);min-width:150px}

/* ---------------------------------------------------------------- Admin: Log */
.seg-nav{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.filter-fold{margin:0 0 16px}
.filter-fold .filters{margin-top:10px}
.who-signed{margin:6px 0 20px}
.people-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:1000px){.people-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.people-cards{grid-template-columns:1fr}}
.person{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 10px;align-items:center;padding:10px 12px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius)}
.person-id{display:flex;flex-direction:column;min-width:0;font-size:13px}
.person-id b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.person-id .muted{font-size:12px}
.person-n{grid-column:2 / 4;font-size:12px;color:var(--muted)}
.day-h{font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:18px 0 8px}
.log-rows{list-style:none;margin:0;padding:0;border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden}
.log-rows li{display:grid;grid-template-columns:48px 28px minmax(110px,180px) 96px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 12px;background:var(--surface);font-size:13px}
.log-rows li+li{border-top:1px solid var(--line-2)}
.log-rows .t{color:var(--muted);font-variant-numeric:tabular-nums}
.log-rows .nm,.log-rows .what{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.log-ev{font-size:11px;font-weight:600;padding:2px 8px;border-radius:3px;border:1px solid var(--line);color:var(--muted);justify-self:start;white-space:nowrap}
.ev-sign-in{color:var(--done);border-color:color-mix(in srgb,var(--done) 50%,transparent)}
.ev-failed,.ev-throttled,.ev-refused{color:var(--moved);border-color:color-mix(in srgb,var(--moved) 50%,transparent)}
.ev-file,.ev-play{color:var(--progress);border-color:color-mix(in srgb,var(--progress) 50%,transparent)}
.ev-grant,.ev-revoke,.ev-star,.ev-unstar{color:var(--lilac);border-color:color-mix(in srgb,var(--lilac) 50%,transparent)}
.st{font-size:11px;color:var(--moved);font-weight:600}
.pager{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:13px;color:var(--muted)}
@media (max-width:600px){.log-rows li{grid-template-columns:44px 26px minmax(0,1fr) auto;grid-template-areas:"t a n e" "w w w s"}
  .log-rows .t{grid-area:t}.log-rows .av{grid-area:a}.log-rows .nm{grid-area:n}.log-rows .log-ev{grid-area:e}.log-rows .what{grid-area:w}.log-rows .st{grid-area:s}}

/* ---------------------------------------------------------------- sign-in and messages */
body.login{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-box{width:min(420px,100%);display:flex;flex-direction:column;gap:18px;align-items:stretch}
.login-box .sl-logo{width:min(330px,100%);margin:0 auto 18px}
.login-box h1{font-size:30px;text-align:center}
.login-form{display:flex;flex-direction:column;gap:8px}
.login-form label{font-size:13px;color:var(--muted)}
.login-form input{padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:2px;margin-bottom:8px}
.login-form .btn{min-height:48px;margin-top:8px}
.login-msg{padding:10px 14px;border:1px solid color-mix(in srgb,var(--moved) 60%,transparent);border-radius:3px;font-size:14px;margin:0}
.login-note{font-size:12px;color:var(--muted);text-align:center;margin:0}
.login-note a{color:var(--accent)}
.cf-turnstile{margin:8px 0}

/* ---------------------------------------------------------------- phones (390): one column, the hero first */
@media (max-width:760px){
  .band,.band:not(:has(>.who-card)){grid-template-columns:1fr}
  .hero-card.wide{display:flex;flex-direction:column}
  .hero-card.wide .card-still{aspect-ratio:16/9}
  .seg{margin-left:0}
  .title-row{gap:10px}
  .numstrip{gap:10px 16px}
  .numstrip .num{flex:1 1 40%}
  .admin-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .road li{font-size:11px}
  .dates li{grid-template-columns:80px 1fr}
  .dates li .chip{display:none}
  .pcard-body h2{font-size:24px}
  .tl.dt{display:none}
  main{padding-top:18px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* a small pitch: its one-card sections side by side */
.sec-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row dense;gap:16px;margin-top:30px}
.sec-row .sec{margin-top:0}
.sec-row .grid.g3{grid-template-columns:1fr}
@media (max-width:1000px){.sec-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.sec-row{grid-template-columns:1fr}}
.next-last{display:flex;align-items:center;gap:8px;margin:auto 0 0;font-size:13px;color:var(--muted)}
.next-last svg{width:14px;height:14px;color:var(--done)}
.mini-still .glyph svg,.tile-still .glyph svg{width:30px;height:30px;opacity:.7}
details.mac>summary svg{width:16px;height:16px}
.tl-board .tl-row~.tl-row .tl-today span{display:none}
.side{flex-wrap:wrap;row-gap:4px;max-width:100%;min-width:0}
.people-row{min-width:0}
.strip-seg{max-width:100%}
@media (max-width:760px){
  .hero-card.wide .card-still{min-height:0}
  .summary{display:flex;flex-direction:column}
  .summary .band{order:1}
  .summary .numstrip{order:2;margin:16px 0 0}
}
.roles-l{display:inline-flex;align-items:center}

/* ---------------------------------------------------------------- round 2 (checkers and critics) */
/* the sign-in page and the Worker's message pages are dark: the SL logo is white (UI round 2) */
body.login{color-scheme:dark;--page:#101924;--surface:#172330;--surface-2:#1d2b3a;--well:#080d15;--text:#f5f1e9;--muted:#b7c1c9;
  --line:#ffffff26;--line-2:#ffffff14;--accent:#9ce8dc;--accent-hover:#c9fff3;--accent-ink:#101924;--moved:#f47f7f;background:#101924;color:#f5f1e9}
/* focus rings in the always-dark header keep the dark theme's contrast (UI round 2) */
.bar :focus-visible,.acct-pop :focus-visible,body.login :focus-visible{outline-color:#9ce8dc}
main .pill.on .n,.seg button[aria-pressed="true"] .n{color:inherit;opacity:.8}
.ext{color:var(--muted);font-size:.9em;white-space:nowrap}
.chip-note{color:var(--text);border-style:dashed}
/* a still that is missing: a tinted panel with the kind's icon and word, never an empty black well */
.glyph.panel{display:flex!important;flex-direction:column;gap:8px;align-items:center;justify-content:center;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 16%,var(--surface-2)),var(--surface-2));color:var(--text)}
.glyph.panel.p-money{background:linear-gradient(135deg,color-mix(in srgb,var(--lilac) 22%,var(--surface-2)),var(--surface-2))}
.glyph.panel svg{width:44px!important;height:44px!important;opacity:.9!important}
.glyph.panel b{font:500 15px/1.2 var(--display);letter-spacing:.02em}
.tile-still .glyph.panel svg,.mini-still .glyph.panel svg{width:28px!important;height:28px!important}
.tile-still .glyph.panel b,.mini-still .glyph.panel b{font-size:12px}
/* portrait art on a blurred copy of itself instead of black bars */
.card-still img.bd{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(22px) brightness(.55);transform:scale(1.15)}
.card-still.contain img:not(.bd){position:relative}
/* a section with one card: the card lies wide (still beside its text), no two-thirds empty row */
@media (min-width:761px){
  .proj>.sec>.grid.g3:has(>.card:only-child:has(.filmstrip)){grid-template-columns:minmax(0,1fr)}
  .proj>.sec>.grid.g3>.card:only-child:has(.filmstrip){display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);max-width:1100px}
  .proj>.sec>.grid.g3>.card:only-child:has(.filmstrip) .card-still{aspect-ratio:16/9}
  .proj>.sec>.grid.g3>.card:only-child:has(.filmstrip) .card-body{padding:18px 20px}
  .proj>.sec>.grid.g3>.card:only-child .filmstrip{display:grid}
}
/* the summary band at tablet width: the hero across, then Next and Team side by side (UI round 2: nothing clipped) */
@media (min-width:761px) and (max-width:960px){
  .band,.band:not(:has(>.who-card)){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .band>.hero-card{grid-column:1/-1}
  .band:not(:has(>.who-card))>.next-card{grid-column:1/-1}
}
.next-what .chip{white-space:normal}
.next-card .chips,.who-card .chips{flex-wrap:wrap}
/* overdue rows under their own names, the next meeting as one line */
.late{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.late a{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--moved);padding:3px 8px;border-radius:3px;
  background:color-mix(in srgb,var(--moved) 12%,transparent);border:1px solid color-mix(in srgb,var(--moved) 50%,transparent)}
.late svg{width:13px;height:13px;flex:none}
.next-meet{display:flex;align-items:center;gap:8px;margin:0;font-size:12px;color:var(--muted)}
.next-meet svg{width:15px;height:15px;color:var(--accent)}
.road .tbc .dot{border-style:dashed}
.tl-dot.uc{background:var(--page)!important;border:2px dashed var(--wait)!important}
.tl-dot.uc::after{content:'?';position:absolute;top:-17px;left:1px;font-size:11px;font-weight:700;color:var(--wait)}
/* avatars and roles that name themselves on hover, keyboard focus or a tap (no hover-only title tips) */
button.av{padding:0;cursor:pointer;font:600 12px/1 var(--body);appearance:none}
button.av.sm{font-size:11px}
.av[data-tip],.role[data-tip]{position:relative}
.av[data-tip]:hover::after,.av[data-tip]:focus::after,.role[data-tip]:hover::after,.role[data-tip]:focus::after{content:attr(data-tip);position:absolute;
  z-index:30;left:50%;top:calc(100% + 8px);transform:translateX(-50%);width:max-content;max-width:260px;white-space:normal;text-align:left;
  background:#101924;color:#f5f1e9;border:1px solid #ffffff30;border-radius:4px;padding:7px 10px;font:500 12px/1.35 var(--body);letter-spacing:0;
  box-shadow:0 8px 24px #000a;pointer-events:none}
.role[data-tip]:hover::after,.role[data-tip]:focus::after{left:0;transform:none}
.who-leads{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.who-leads li{display:flex;align-items:center;gap:10px;min-width:0}
.who-leads li>span{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.who-leads b{font:500 16px/1.2 var(--display)}
.who-leads .muted{font-size:12px}
.who-leads .av{width:40px;height:40px;font-size:13px}
.crew-fold{margin-top:0}
.crew-sides{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px 22px;margin-top:10px}
.crew-side h3{font-family:var(--body);margin:0 0 6px}
.crew{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13px}
.crew li{display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:8px;align-items:center}
.crew li .av{grid-row:span 2;margin:0}
.crew li b{font-weight:600}
.crew li .muted{font-size:12px;grid-column:2}
.who-rows a{display:flex;align-items:center;gap:8px;min-width:0;width:100%}
.who-rows a:hover .t{color:var(--accent)}
/* Where things are: per project, a tile per address; SL's Mac folders in a fold that opens on a tap */
.wheres{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.wheres .where{margin:0}
.where-l{display:inline-flex;align-items:center;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:6px;min-width:84px}
details.svc{display:inline-block;padding:0}
details.svc>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:7px 12px}
details.svc>summary::-webkit-details-marker{display:none}
details.svc[open]{flex-basis:100%}
.mac-list{list-style:none;margin:0;padding:4px 12px 10px;display:flex;flex-direction:column;gap:4px;font-size:12px}
.mac-list li{display:flex;gap:10px;flex-wrap:wrap}
.mac-list .muted{overflow-wrap:anywhere}
/* the files repo: download and star on every tile or row; earlier versions dimmed; the source as its mark */
.tile-acts{position:absolute;top:12px;right:12px;display:flex;gap:6px;z-index:3}
.tile-acts form.star{position:static}
.act-dl{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid #ffffff3a;background:#101924b3;color:#f5f1e9;backdrop-filter:blur(4px)}
.act-dl:hover{border-color:var(--accent);color:var(--accent)}
.act-dl svg{width:14px;height:14px}
.row-acts{display:flex;gap:6px;align-items:center;justify-content:flex-end}
.row-acts .act-dl{background:none;color:var(--muted);border-color:var(--line)}
.row-acts form.star{position:static}
.svc-mini,.kind-mini{display:inline-grid;place-items:center;width:22px;height:22px;color:var(--muted)}
.svc-mini svg,.kind-mini svg{width:16px;height:16px}
.kind-mini{color:var(--text)}
.kind-mini.money{color:var(--lilac)}
[data-earlier] .tile-still img{opacity:.5}
[data-earlier] .row-ico{opacity:.55}
[data-earlier]:hover .tile-still img{opacity:1}
.repo-empty{margin:18px 0 0;font-size:13px}
/* the Overview: bars labelled with their project, tinted by client; open seats hollow */
.tl-row .pbar{height:16px;top:10px;overflow:hidden}
.pbar span{position:absolute;top:0;left:6px;font-size:11px;line-height:15px;color:var(--text);white-space:nowrap}
.tl-phase.seat{background:transparent;border:1.5px dashed var(--wait);top:12px}
.seat-av{background:transparent!important;border:1.5px dashed var(--wait)!important;color:var(--wait)!important}
.tl-row.seats .tl-l{color:var(--muted)}
.ccard-name{font:500 26px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:#f5f1e9}
/* phones: the lightbox arrows sit below the picture, never over it (game dev round 2) */
@media (max-width:600px){.nav-b{top:auto;bottom:18px;transform:none;height:48px}.lightbox img{max-height:72vh}.lightbox figure{margin-bottom:60px}}
.chip.tbc{border-style:dashed}
.chip-roles svg{width:13px;height:13px}
.band{align-items:start}
.road{margin:6px 0 0}
.who-rows li.earlier .t{color:var(--muted)}

/* ---------------------------------------------------------------- round 3 (checkers and critics) */
/* a lone image set: its frames beside the still, each opening the lightbox at that frame */
.filmstrip{display:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:2px 0 4px}
.filmstrip .fs{display:block;aspect-ratio:16/9;background:var(--well);border-radius:3px;overflow:hidden;border:1px solid var(--line-2)}
.filmstrip .fs img{width:100%;height:100%;object-fit:cover}
.filmstrip .fs:hover{border-color:var(--accent)}
.fs-more{display:grid;place-items:center;font-size:12px;color:var(--muted);border:1px dashed var(--line);border-radius:3px}
/* the summary band for staff and named users: the hero keeps two columns; Next and the who-card stack in the third */
@media (min-width:961px){
  .band:has(>.who-card){grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.95fr);grid-template-rows:auto 1fr}
  .band:has(>.who-card)>.hero-card{grid-column:1/3;grid-row:1/3;align-self:stretch;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
  .band:has(>.who-card)>.hero-card .card-still{aspect-ratio:auto;min-height:100%}
  .band:has(>.who-card)>.hero-card .hero-body{justify-content:center;padding:18px 20px}
  .band:has(>.who-card)>.next-card{grid-column:3;grid-row:1}
  .band:has(>.who-card)>.who-card{grid-column:3;grid-row:2}
}
/* the who-card's avatar bubbles open to the right of the avatar (the card clips its overflow) */
.who-card .av[data-tip]:hover::after,.who-card .av[data-tip]:focus::after{left:0;transform:none}
/* phones: the Overview | Files switch never touches the hero below it */
@media (max-width:760px){.summary .title-row{margin-bottom:14px}.summary .numstrip{margin-top:4px}}
/* timeline dots are buttons that name themselves on hover, focus or a tap; the next two carry their label */
button.tl-dot{padding:0;cursor:pointer;appearance:none}
.tl-dot[data-tip]:hover::after,.tl-dot[data-tip]:focus::after{content:attr(data-tip);position:absolute;z-index:30;left:50%;top:calc(100% + 8px);
  transform:translateX(-50%);width:max-content;max-width:240px;white-space:normal;text-align:left;background:#101924;color:#f5f1e9;
  border:1px solid #ffffff30;border-radius:4px;padding:7px 10px;font:500 12px/1.35 var(--body);box-shadow:0 8px 24px #000a;pointer-events:none}
.tl-lbl{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font:600 11px/1 var(--body);color:var(--text);white-space:nowrap;pointer-events:none}
.tl-dot.moved{background:var(--muted)!important;opacity:.45}
.tl-dot.flag{box-shadow:0 0 0 3px color-mix(in srgb,var(--moved) 45%,transparent)}
.dates li.moved>span:nth-child(2){text-decoration:line-through;color:var(--muted)}
.dates li.flag>span:nth-child(2){color:var(--moved);font-weight:600}
/* the road ahead: the undated steps in order, from today towards the event */
.tl-tbd{display:flex;align-items:flex-start;margin:2px 14px 0}
.tl-sp{flex:none}
.tl-tbd-in{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding-left:10px;border-left:2px dashed var(--line)}
.tl-tbd .k{margin-right:4px;display:inline-flex;align-items:center;gap:5px;color:var(--muted)}
.tl-tbd .k b{font:600 12px/1 var(--body);color:var(--text)}
.tl-tbd ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;counter-reset:s}
.tl-tbd li{position:relative;font-size:12px;padding:3px 9px;border:1px dashed var(--line);border-radius:3px;color:var(--text);white-space:nowrap}
.tl-tbd li+li::before{content:'→';position:absolute;left:-15px;top:3px;color:var(--muted)}
.tl-tbd li.staff{color:var(--muted)}
.dtile i{display:block;font-style:normal;font-size:11px;color:var(--muted);padding-bottom:2px}
.dtile.tbc{border-style:dashed}
.tl-list li.tbd{color:var(--muted)}
/* the Overview, by person: a wider name column, names cut with an ellipsis (the full name in the tip), lanes for overlaps */
.tl-board .tl-axis{margin-left:214px}
.tl-row{grid-template-columns:200px minmax(0,1fr)}
.tl-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-row .pbar{height:14px;top:4px;overflow:visible}
.tl-row .pbar.ln1{top:20px}.tl-row .pbar.ln2{top:36px}.tl-row .pbar.ln3{top:52px}
.tl-row.lanes1 .pbar{top:11px;height:16px}
.tl-row.lanes2 .tl-track{height:38px}.tl-row.lanes3 .tl-track{height:54px}.tl-row.lanes4 .tl-track{height:70px}
.pbar span{line-height:13px;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 8px)}
.pbar span.out{left:calc(100% + 6px);max-width:none;color:var(--muted)}
.tl-row.seats-h{min-height:30px;border-bottom:0}
.tl-row.seats-h .tl-name{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tl-row.seats-h .tl-track{height:24px}
.tl-seat-tbd{position:absolute;top:10px;width:14px;height:14px;margin-left:-7px;border:1.5px dashed var(--wait);transform:rotate(45deg)}
.tl-seat-tbd span{position:absolute;left:14px;top:-2px;transform:rotate(-45deg);transform-origin:left top;font-size:11px;color:var(--muted);white-space:nowrap}
@media (max-width:600px){.tl-board .tl-axis{margin-left:0}.tl-row{grid-template-columns:1fr}}
/* files repo: one row, several repositories */
.row-t.multi{display:flex;gap:6px;flex-wrap:wrap;white-space:normal}
.row-t.multi a:hover{color:var(--accent)}
.row-t.multi .sep{color:var(--muted)}
/* touch targets: the take-back (✕) on a grant chip */
.grant-chip form.inline>button{min-width:24px;min-height:24px}
/* a stand-in wordmark (no client logo yet): the name in spaced Jost capitals, the same everywhere */
.client-word{font:500 15px/1 var(--display);letter-spacing:.24em;text-transform:uppercase;color:#f5f1e9;white-space:nowrap}
@media (max-width:600px){.client-word{font-size:12px;letter-spacing:.18em}}
/* the Starred strip: portrait art contained on a blurred copy of itself */
.mini-still img.bd{position:absolute;inset:0;filter:blur(14px) brightness(.55);transform:scale(1.15)}
.mini-still.contain img:not(.bd){position:relative;object-fit:contain}
/* sign-in: show the password while typing it on a phone */
.pw-wrap{position:relative;display:flex;flex-direction:column}
.pw-wrap input{padding-right:84px}
.pw-show{position:absolute;right:6px;top:7px;min-height:32px;padding:4px 10px;font-size:12px;background:none;border:1px solid var(--line);border-radius:2px;color:var(--muted);cursor:pointer}
.pw-show:hover{color:var(--accent);border-color:var(--accent)}
/* a filtered files view names its filter (✕ goes back to All) */
.pill.filter-on{background:var(--text);color:var(--page);border-color:var(--text)}
/* Who signed in: the first eight, the rest folded */
.people-more{margin-top:8px}
.people-more .people-cards{margin-top:10px}
.next-what b.flag{color:var(--moved)}
/* the hero's video set (a film-first hero): the lead film, then every film of the set as a poster reel under it */
.hero-card .reel{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:8px;padding:0 16px 16px}
.hero-card.wide .reel{padding:0 22px 20px}
.reel-i{display:flex;flex-direction:column;gap:6px;min-width:0;color:var(--text)}
.reel-still{position:relative;display:block;aspect-ratio:16/9;background:var(--well);border:1px solid var(--line-2);border-radius:3px;overflow:hidden}
.reel-still img{width:100%;height:100%;object-fit:cover}
.reel-still .badge{left:6px;bottom:6px;padding:1px 6px}
.reel-i:hover .reel-still,.reel-i:focus-visible .reel-still{border-color:var(--accent)}
.reel-t{font-size:12px;line-height:1.3;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reel-i:hover .reel-t{color:var(--text)}
.band:has(>.who-card)>.hero-card.hero-set{grid-template-rows:auto auto}
/* a featured image set (event photos): one wide band right after the summary, a large lead frame and four more */
#featured .sec-h h2{margin:0}
.card.feature{padding:8px}
.gal-band{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.gb-i{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;border-radius:3px;background:var(--well)}
.gb-i.big{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.gb-i img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.gb-i:hover img{transform:scale(1.03)}
.gb-more{position:absolute;inset:0;display:grid;place-items:center;background:#101924a8;color:#f5f1e9;font:500 22px/1 var(--display)}
@media (max-width:600px){.gal-band{grid-template-columns:repeat(2,minmax(0,1fr))}.gb-i.big{grid-row:span 1;aspect-ratio:3/2}}
@media (max-width:600px){.hero-card .reel,.hero-card.wide .reel{grid-template-columns:repeat(3,minmax(0,1fr));padding:0 14px 14px;gap:6px}}

/* ---------------------------------------------------------------- round 4 (checkers and critics) */
/* a download names its format beside its icon (PDF, Sheet): readable at a glance and on a touch screen */
.icon-link.lbl{width:auto;display:inline-flex;align-items:center;gap:6px;padding:0 11px;font-size:12px;font-weight:600;color:var(--text)}
.icon-link.lbl svg{width:14px;height:14px}
/* the reel: the length beside the room's name, never a badge over the poster's question */
.reel-t{display:flex;align-items:baseline;gap:6px;min-width:0}
.reel-d{flex:none;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.reel-d::before{content:'▶';font-size:11px;margin-right:4px}
/* the player: the film's name and its place in the set under it, arrows through the set */
.pl-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px}
.pl-cap{display:flex;align-items:center;gap:14px;font-size:14px;font-weight:600;min-height:20px}
.pl-cap .lb-n{font-weight:500;color:#b7c1c9}
/* justified rows: every picture at its own shape, no letterbox (the viewer galleries, a lone image set) */
.jrow{display:flex;flex-wrap:wrap;gap:8px;--rh:230px}
.jrow::after{content:'';flex-grow:1000000}
.jc{position:relative;display:block;min-width:0;flex-basis:calc(var(--a,1.6) * var(--rh));flex-shrink:1;background:var(--well);border-radius:3px;overflow:hidden}
.jc img{display:block;width:100%;height:auto}
.gallery.jrow{display:flex}
.gal.jc img{height:auto;aspect-ratio:auto;object-fit:cover}
.jc:hover{outline:2px solid var(--accent)}
@media (max-width:760px){.jrow{--rh:120px;gap:6px}}
/* a section's lone image set across the page: title and View on one row, the pictures with their captions below */
.card.set-band{padding:16px 18px 18px;display:flex;flex-direction:column;gap:14px}
.sb-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding-right:44px}
.sb-head .card-t{margin:0}
.sb-head .card-foot{margin:0 0 0 auto}
.sb-row{--rh:250px}
.sb-row .jc{background:#080d15}
.jc-cap{display:block;padding:7px 9px;font-size:12px;line-height:1.3;color:var(--muted);background:var(--surface-2)}
@media (max-width:760px){.sb-head .card-foot{margin-left:0}.sb-row{--rh:130px}}
/* a lone card that lies wide: its star never sits on its title (UI round 4) */
@media (min-width:761px){.proj>.sec>.grid.g3>.card:only-child .card-t{padding-right:44px}}
/* every image-set card shows three more frames under its cover, the last one with '+N' */
.card .filmstrip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0}
.filmstrip .fs{position:relative}
.filmstrip .fs-more{position:absolute;inset:0;display:grid;place-items:center;background:#101924b0;color:#f5f1e9;border:0;border-radius:0;font:500 15px/1 var(--display)}
/* the road ahead names itself: '9 steps · dates to set' */
.chip-steps{gap:6px;border-style:dashed}
.chip-steps svg{width:13px;height:13px}
/* the last step done carries its label, to the left of its dot (the next steps' labels sit to the right of today) */
.tl-lbl.done-l{left:auto;right:50%;transform:none;color:var(--muted);font-weight:500}
/* phones: the dates in time order; done rows dimmed with a tick, a Today line, the undated steps numbered, the event last */
.tl-list li.done{opacity:1}
.tl-list .dtile{position:relative}
.tl-list .dtile .ck{position:absolute;right:-6px;top:-6px;width:16px;height:16px;border-radius:50%;background:var(--done);color:#101924;display:grid;place-items:center}
.tl-list .dtile .ck svg{width:10px;height:10px}
.tl-list li.today-l{display:flex;align-items:center;gap:8px;padding:2px 0;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--moved)}
.tl-list li.today-l::after{content:'';flex:1;border-top:1.5px solid var(--moved)}
.tl-list li.steps{align-items:flex-start}
.tl-list li.steps .dtile b{font-size:18px}
.tl-list li.steps>div{display:flex;flex-direction:column;gap:6px;min-width:0}
.step-n{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;counter-reset:st}
.step-n li{counter-increment:st;font-size:12px;padding:3px 8px;border:1px dashed var(--line);border-radius:3px;color:var(--text);display:inline-flex;gap:5px}
.step-n li::before{content:counter(st);font-weight:700;color:var(--muted)}
.step-n li.staff{color:var(--muted)}
.tl-list li.ev{border-color:var(--accent)}
/* the staff Next card: what of the plan has no date yet, and how old the plan is */
.next-plan{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:2px;font-size:12px}
.next-plan .muted{font-size:12px}
.cal.flag{border-color:var(--moved)}
.cal.flag .m{background:var(--moved);color:#fff}
/* a role's owner */
.av.xs{width:22px;height:22px;font-size:11px;margin-left:2px}
/* the Overview: a seat bar names its need-by; late seats red; a pause hatched, then dashed until re-staffed */
.tl-phase.seat span{position:absolute;left:6px;top:-2px;font-size:11px;line-height:12px;color:var(--wait);white-space:nowrap}
.tl-phase.seat.late{border-color:var(--moved)}
.tl-phase.seat.late span,.tl-seat-tbd.late span{color:var(--moved);font-weight:600}
.tl-seat-tbd.late{border-color:var(--moved)}
.tl-row .pbar.pause{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--muted) 55%,transparent) 0 3px,transparent 3px 7px);border:1px solid var(--line)}
.tl-row .pbar.after{background:transparent!important;border:1.5px dashed color-mix(in srgb,var(--muted) 70%,transparent)}
.tl-row.seats .tl-name{white-space:normal;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.next-mini b.flag{color:var(--moved)}
.tl-row .pbar.after span{color:var(--muted);left:8px}
.tl-phase.seat.end span{left:auto;right:calc(100% + 6px)}
.tl-seat-tbd{border:0!important;transform:none!important;width:0;height:0;margin-left:0;top:17px}
.tl-seat-tbd i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border:1.5px dashed var(--wait);transform:rotate(45deg)}
.tl-seat-tbd.late i{border-color:var(--moved)}
.tl-seat-tbd span{left:auto!important;right:12px;top:-7px!important;transform:none!important;line-height:14px}
.pbar span.out.left{left:auto;right:calc(100% + 6px)}
.tl-row .pbar.after span{left:52px}
/* the hero on a laptop: the still fills the card, the title, chips and buttons on a gradient over it (exec round 4: an
   880 x 500 card with its text floating in an empty half). Always light text on the dark gradient. */
@media (min-width:761px){
  .band>.hero-card.hero-over,.band:has(>.who-card)>.hero-card.hero-over{display:block;position:relative;align-self:stretch}
  .band>.hero-card.hero-over .card-still{display:block;aspect-ratio:16/9;min-height:0;height:auto}
  .band:has(>.who-card)>.hero-card.hero-over .card-still{position:absolute;inset:0;aspect-ratio:auto;height:100%;min-height:0}
  .band>.hero-card.hero-over .card-still img:not(.bd){width:100%;height:100%;object-fit:cover}
  .band>.hero-card.hero-over .card-still.contain img:not(.bd){object-fit:contain}
  .band>.hero-card.hero-over .hero-body{position:absolute;left:0;right:0;bottom:0;padding:90px 24px 20px;display:grid;grid-template-columns:minmax(0,1fr) auto;
    column-gap:20px;row-gap:10px;align-items:end;justify-content:stretch;pointer-events:none;
    background:linear-gradient(180deg,transparent 0,#101924b3 45%,#101924f2 100%);
    --text:#f5f1e9;--muted:#c3ccd3;--line:#ffffff4d;--line-2:#ffffff26;color:#f5f1e9}
  .band>.hero-card.hero-over .hero-body>*{grid-column:1;pointer-events:auto}
  .band>.hero-card.hero-over .hero-t{font-size:26px;text-shadow:0 1px 12px #0009}
  .band>.hero-card.hero-over .chips .chip{background:#10192499}
  .band>.hero-card.hero-over .qr-box{grid-column:2;grid-row:1/4;flex-direction:column;align-items:center;gap:6px;color:#c3ccd3}
  .band>.hero-card.hero-over .qr-box svg.qr{width:150px;height:150px}
  .band:has(>.who-card)>.hero-card.hero-over{min-height:420px}
}
@media (min-width:761px){
  .band>.hero-card.hero-over.txtbar{aspect-ratio:16/9;align-self:start;width:100%}
  .band:has(>.who-card)>.hero-card.hero-over.txtbar{aspect-ratio:auto;align-self:stretch}
  .band>.hero-card.hero-over.txtbar .card-still{position:absolute;inset:0 0 76px 0;aspect-ratio:auto;height:auto}
  .band>.hero-card.hero-over.txtbar .hero-body{padding:12px 20px;min-height:76px;background:#101924;grid-template-columns:auto minmax(0,1fr) auto;align-items:center}
  .band>.hero-card.hero-over.txtbar .hero-body>*{grid-column:auto}
  .band>.hero-card.hero-over.txtbar .hero-t{font-size:22px;text-shadow:none}
  .band>.hero-card.hero-over.txtbar .hero-act{justify-content:flex-end}
}
/* a quote, contract or invoice card shows its first page */
.card.grant.with-still .grant-still{aspect-ratio:16/10;background:#e9e6df}
.card.grant.with-still .grant-still img{width:100%;height:100%;object-fit:cover;object-position:top}
/* staff: the hero keeps a 16:10 shape (its button always in the first screen), Next and Team stacked beside it */
@media (min-width:961px){
  .band:has(>.who-card)>.hero-card.hero-over:not(.txtbar){align-self:start;aspect-ratio:16/10;min-height:0}
  .band:has(>.who-card)>.hero-card.hero-over.txtbar{align-self:start;aspect-ratio:16/10;min-height:0}
}
/* the pause label stays inside its dashed bar on every width (UI round 4: it ran off at 390) */
.tl-row .pbar.after span{left:8px;max-width:calc(100% - 12px);overflow:hidden;text-overflow:ellipsis}
@media (min-width:761px){.tl-row .pbar.after span{left:52px;max-width:calc(100% - 56px)}}

/* ---------------------------------------------------------------- round 5 (checkers and critics) */
/* clients: the right column holds Next, a named user's Shared-with-you card and the facts card, stretched to the hero's
   height (exec, creative round 5: a half-empty column beside the hero) */
.side-col{display:flex;flex-direction:column;gap:16px;min-width:0;align-self:stretch}
.side-col>.next-card,.side-col>.who-card{flex:none}
.numstrip.facts-card{flex:1;margin:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:12px;padding:16px 18px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius)}
.facts-card .nums4{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:14px 18px;width:100%;margin-top:auto}
.facts-card .num b{font-size:30px}
@media (min-width:761px){
  .band.two{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
  /* the hero takes its width from its grid column, never from the row's height (UI, simplicity, PM, creative round 6: a
     taller right column made a 16:9 hero 1083 px wide, under the Next, Shared-with-you and facts cards). At least 16:9 tall,
     and as tall as the right column; the still covers it */
  .band.two>.hero-card.hero-over:not(.txtbar){aspect-ratio:auto;min-height:0;align-self:stretch;width:100%;min-width:0}
  .band.two>.hero-card.hero-over:not(.txtbar)::before{content:"";display:block;padding-top:56.25%}
  .band.two>.hero-card.hero-over:not(.txtbar) .card-still{position:absolute;inset:0;aspect-ratio:auto;height:100%}
}
@media (min-width:761px) and (max-width:960px){
  .band.two{grid-template-columns:minmax(0,1fr)}
  .band.two .side-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){.side-col .numstrip.facts-card{margin:0}.facts-card .nums4{grid-template-columns:repeat(3,minmax(0,1fr))}
  .facts-card .num b{font-size:24px}}
/* the hero's film set: the reel fills the right half under the title, never an empty half beside the poster (creative r5) */
@media (min-width:761px){
  .hero-card.hero-set{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:auto 1fr;align-self:stretch}
  .hero-card.hero-set>.card-still{grid-column:1;grid-row:1/3;aspect-ratio:auto;min-height:100%}
  .hero-card.hero-set>.hero-body{grid-column:2;grid-row:1;justify-content:flex-start;padding:20px 56px 12px 22px}
  .hero-card.hero-set>.reel,.hero-card.wide.hero-set>.reel{grid-column:2;grid-row:2;grid-template-columns:repeat(3,minmax(0,1fr));padding:0 22px 20px;align-content:start}
}
/* phones: a reel caption wraps its length under the name, never cut (UI round 5) */
@media (max-width:420px){.reel-t{flex-wrap:wrap;white-space:normal;row-gap:0}}
/* tablets and phones: the length always under the name, so every caption takes the same two lines and none is cut
   ('Society ▶ 1:5' at 768: UI round 6; 'Agriculture' alone on two lines at 390: creative round 6) */
/* round 7 (UI): at every width (a 1024-1366 laptop cut 'Agriculture ▶ 2:0' too), the name on one line, the length under it */
.reel-t{flex-direction:column;align-items:flex-start;flex-wrap:nowrap;white-space:normal;row-gap:0;gap:1px;overflow:visible;text-overflow:clip}
.reel-t>.reel-d{margin:0}
/* staff timeline: role seats in their own lane under the bar and its labels (UI round 5: a seat sat on '15 Oct · Dates set') */
.tl-track:has(.tl-seat){height:92px}
.tl-seat{top:66px}
/* the today line passes behind labels: labels on a page-coloured chip above it (UI round 5) */
.tl-today span{background:var(--page);padding:0 4px;border-radius:2px}
.tl-phase.seat span,.tl-seat-tbd span{z-index:2;background:var(--page);padding:0 4px;border-radius:2px}
.tl-phase.seat{z-index:auto}
/* contrast: the flagged calendar tile in the dark theme (UI round 5: #fff on #f47f7f was 2.56:1) */
:root:not([data-theme="light"]) .cal.flag .m{color:#101924}
.tl-list li.done .dtile{border-color:var(--line-2)}
/* the undated steps after the event: their own lane at the right, under the event (PM, developer, producer round 5) */
.tl-tbd.after{justify-content:flex-end;margin-top:8px}
.tl-tbd.after .tl-tbd-in{flex:0 1 auto;border-left:0;border-right:2px dashed var(--line);padding:0 10px 0 0;justify-content:flex-end}
.chip-after .dia{width:9px;height:9px;background:var(--accent);transform:rotate(45deg);flex:none}
/* home and overview cards: every still is 16:9 and fills its frame, so titles and buttons line up (exec, creative r5) */
.pcard-still{overflow:hidden}
.pcard-still img{position:absolute;inset:0}
/* a quote, contract or invoice card shows its whole first page on a blurred copy of itself (UI round 5) */
.card.grant.with-still .grant-still{background:var(--well)}
.card.grant.with-still .grant-still img:not(.bd){object-fit:contain;object-position:center}
.tile-still img.bd{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(14px) brightness(.55);transform:scale(1.15)}
.tile-still.contain img:not(.bd){position:relative;object-fit:contain}
/* a viewer with nothing to preview: its kind as a 16:9 panel above the buttons (UI round 5) */
.viewer-panel{position:relative;aspect-ratio:16/9;max-height:56vh;border-radius:var(--radius);overflow:hidden;background:var(--well)}
.viewer-panel .glyph.panel{position:absolute;inset:0}
/* phones: Deliverables two to a row (an image set keeps the full width), so a delivered project is not seven screens long */
@media (max-width:600px){
  #deliverables .grid.g3{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #deliverables .grid.g3>.card:has(.filmstrip){grid-column:1/-1}
  #deliverables .grid.g3>.card:not(:has(.filmstrip)) .card-body{padding:10px 10px 12px;gap:7px}
  #deliverables .grid.g3>.card:not(:has(.filmstrip)) .card-t{font-size:15px}
  #deliverables .grid.g3>.card:not(:has(.filmstrip)) .btn{padding:7px 10px;min-height:34px}
}
/* late seats in red on the roles chip */
.chip-roles.is-late{color:var(--moved);border-color:color-mix(in srgb,var(--moved) 60%,transparent)}
/* sign-in: one lock chip, the help in its tip (simplicity round 5) */
.login-note .chip{font-size:12px;padding:5px 11px;color:var(--muted)}
.login-note .chip svg{width:13px;height:13px}
/* the grant menu: titles on one line, a gap between chips; a confirm step for a quote with moved dates */
.menu{min-width:340px}
.menu-row{gap:8px;align-items:center}
.menu-row .chip{margin-left:6px}
.callout.confirm{border-color:color-mix(in srgb,var(--wait) 60%,transparent);display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.callout.confirm form{margin:0}
/* the Log: events as icons with a tip, a page view as none, failures in words; a viewer row that opened its file */
.log-rows li{grid-template-columns:48px 28px minmax(110px,180px) 76px minmax(0,1fr) auto}
.log-ev.ico{display:inline-grid;place-items:center;width:26px;height:22px;padding:0}
.log-ev.ico svg{width:14px;height:14px}
.log-ev.none{border:0;padding:0}
.log-dl{display:inline-grid;place-items:center;vertical-align:middle;margin-left:6px;color:var(--progress)}
.log-dl svg{width:13px;height:13px}
@media (max-width:600px){.log-rows li{grid-template-columns:44px 26px minmax(0,1fr) auto}}
.warn-mini{display:inline-grid;place-items:center;color:var(--wait);margin-right:2px}
.warn-mini svg{width:12px;height:12px}
.callout.confirm svg{width:15px;height:15px;color:var(--wait);display:inline-block;vertical-align:-2px;margin-right:6px}
.badge.top{top:10px;bottom:auto}
/* mock captions: one line each, so a row of pictures keeps one height (creative round 5) */
.jc-cap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------------------------------------------------------------- round 6 (checkers and critics) */
/* the staff timeline: only the dot fades, never its label (UI round 6: '15 Oct · Dates confirmed' was 3.1:1 in the light
   theme, faded with its dot); a moved dot greys its fill, not its label */
.tl-dot.staff{opacity:1}
.tl-dot.staff:not(.done):not(.next):not(.tbd):not(.uc){background:color-mix(in srgb,var(--done) 70%,var(--page))}
.tl-dot.staff.done{border-color:color-mix(in srgb,var(--done) 70%,var(--page))}
.tl-dot.moved{opacity:1!important;background:color-mix(in srgb,var(--muted) 45%,var(--page))!important;border-color:var(--page)}
.tl-dot .tl-lbl{opacity:1}
/* keyboard focus on a timeline dot sits above its neighbours (UI round 6: the next dot hid the ring) */
.tl-dot:focus-visible{z-index:5}
/* phones: the full-width image sets first, then the single cards two to a row, so no card sits alone at half width (UI r6) */
@media (max-width:600px){#deliverables .grid.g3>.card:has(.filmstrip){order:-1}}
/* the client facts card: place and dates on one row, the big numbers right under them, the block centred in the card (creative,
   producer round 6: 80-110 px of nothing between the chips and the numbers) */
.numstrip.facts-card{justify-content:center}
.facts-card .fc-chips{display:flex;flex-wrap:wrap;gap:8px}
.facts-card .nums4{margin-top:6px}
/* Access: a message about one login sits in its card, across the grid, clear of the sticky header (PM round 6) */
.ucard{scroll-margin-top:96px}
.ucard.has-notice{grid-column:auto}
.ucard .callout{margin:0}
/* the grant menu: one line per title (exec, creative round 6: 'Event / estimate' wrapped) */
.menu{min-width:380px}
.menu-row>span:first-child{white-space:nowrap}
@media (max-width:600px){.menu{min-width:0;width:min(92vw,380px)}}
/* a phone-first demo's card on a laptop: its QR beside the buttons (PM round 6) */
.card .card-qr{margin-top:2px}
.card .card-qr svg.qr{width:112px;height:112px}
/* clients: the undated steps as one chip that opens their list (exec, PM, producer round 6) */
.tl-fold{display:block}
.tl-fold>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.tl-fold>summary::-webkit-details-marker{display:none}
.tl-fold>summary::after{content:'›';margin-left:2px;transition:transform .15s;display:inline-block}
.tl-fold[open]>summary::after{transform:rotate(90deg)}
.tl-fold>ol{margin-top:8px}
.tl-tbd.after .tl-fold>ol{justify-content:flex-end}
/* the named home's Shared-with-you strip: mini tiles, the earlier ones in a fold of the same tiles (UI, creative round 6) */
.strip.shared .mini-fold{margin-top:10px}
.strip.shared .mini-fold .minis{margin-top:10px}
.shared-mini .mini-d .chip{font-size:11px;padding:1px 6px}
.mini-still img.bd{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(12px) brightness(.55);transform:scale(1.15)}
.strip.shared .strip-seg{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;align-items:start}
.strip.shared .strip-h{grid-column:1/-1}
.strip.shared .mini-fold{margin-top:0}
.strip.shared .mini-fold .minis{margin-top:8px}
/* the film hero's poster fills its frame on a laptop (creative round 6: blurred bands above and below); narrower, it stays
   whole so the room's question is never cut */
/* round 7 (UI): it covers only a frame within 5% of the poster's 16:9 (a container query on the frame's own shape); a narrower
   frame (961-1366 px laptops) keeps the poster whole on its blurred backdrop, so the room's question is never cut
   ('What happ… / rural indus…' at 1024) */
@media (min-width:961px){
  .hero-card.hero-set>.card-still.contain{container-type:size}
  @container (min-aspect-ratio: 169/100){.hero-card.hero-set>.card-still.contain img:not(.bd){object-fit:cover;object-position:left center}}
}
/* staff: the undated chain fits one row at 1440 (producer round 6: '→ Load-in' alone on a second row) */
.tl-tbd ol{gap:6px 14px}
.tl-tbd li{padding:3px 7px}
.tl-tbd li+li::before{left:-12px}
/* merged timeline dots: a count above, every row on its own line in the tip (exec round 6) */
.tl-dot[data-tip]:hover::after,.tl-dot[data-tip]:focus::after{white-space:pre-line}
.tl-dot.many{width:16px;height:16px;margin-left:-8px;top:28px}
.tl-dot.many::before{content:attr(data-n);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:700 9px/1 var(--body);color:var(--page)}
.tl-dot.many.next::before,.tl-dot.many.tbd::before,.tl-dot.many.uc::before{color:var(--text)}
.admin-strip[data-compact]{display:block;margin:0 0 14px}
/* the screen mocks' captions: one fixed height, so every caption in a row sits on the same line (creative round 6: the
   Listening iPad caption sat 4 px low) */
.sb-row .jc-cap{height:30px;line-height:16px;box-sizing:border-box}
.sb-row .jc img{aspect-ratio:var(--a);object-fit:cover}
/* draft dates (Ryan, 2026-10-18): back-scheduled from the event, staff only, until Ryan confirms them: dashed, in lilac */
.chip-draft{color:var(--lilac);border-color:color-mix(in srgb,var(--lilac) 60%,transparent);border-style:dashed}
.tl-dot.draft{background:var(--page);border:2px dashed var(--lilac)}
.tl-dot.many.draft::before{color:var(--text)}
i.dr{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--lilac);margin-left:6px}
.tl-list li.draft .dtile{border-style:dashed;border-color:var(--lilac)}
.tl-list li.draft{color:var(--text)}
.dates li.draft .d{color:var(--lilac)}
.cal.draft{border-style:dashed;border-color:var(--lilac)}
.cal.draft .m{background:var(--lilac);color:#101924}
.road li.draft .dot{border-style:dashed;border-color:var(--lilac)}
/* a pitch's second lead beside its hero (catalog hero_side: the proposal leads, the demo sits beside it; Ryan, 2026-10-18):
   a compact card at the top of the side column, still beside its title on a laptop, its QR small */
.side-col>.side-card{flex:none}
.side-card .card-body{padding:12px 14px;gap:8px}
.side-card .card-t{font-size:16px;padding-right:34px}
.side-card .card-qr svg.qr{width:112px;height:112px}
.side-card .card-qr span{min-width:0}
/* a narrow laptop: the still a short strip above the title; a wide one: the still beside the title */
@media (min-width:961px) and (max-width:1399px){.side-card>.card-still{aspect-ratio:21/9}.side-card .card-qr svg.qr{width:96px;height:96px}}
@media (min-width:1400px){
  .side-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:stretch}
  .side-card>.card-still{aspect-ratio:auto;height:100%;min-height:120px}
  .side-card .card-foot .btn{padding:7px 12px}
}
@media (min-width:961px){
  /* beside a taller side column the document hero grows with it (at least 16:9), but never past the first screen, so its
     Open and Download stay in view; a still taller column (a named user's Shared-with-you card) scrolls past it while it
     stays in place */
  .band.two.with-side>.hero-card.hero-over.txtbar{aspect-ratio:auto;align-self:stretch;min-width:0;max-height:calc(100vh - 170px);
    position:sticky;top:calc(var(--header) + 12px)}
  .band.two.with-side>.hero-card.hero-over.txtbar::before{content:"";display:block;padding-top:56.25%}
}
/* round 7: a bar that restarts on a draft date after a pause */
.tl-row .pbar.draft{border:1.5px dashed var(--lilac)}
/* round 7 (UI): one picture on its viewer page at its own pixels at most, centred; the browser picks the still by sizes */
.gallery.one{justify-items:center}
.gallery.one .gal.jc{max-width:100%}
.gallery.one .gal.jc img{width:auto;height:auto;max-width:100%;max-height:72vh;aspect-ratio:auto}
/* round 7 (UI): phones wrap a mock's caption to two lines, every caption in the row the same height ('Check-in scr…' at 390) */
@media (max-width:600px){.jc-cap,.sb-row .jc-cap{white-space:normal;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  height:auto;min-height:calc(2 * 1.3em + 14px);line-height:1.3;overflow-wrap:break-word}}
/* round 7 (simplicity): a named filter (On hold 4 ✕) hides the section pills until it is cleared */
[data-repo-tools].filtered .pills .pill:not(.filter-on){display:none}
/* round 7 (simplicity): Shared with you as one band beside a side card (a pitch's demo), so the facts stay in the first screen */
.who-card.shared.compact{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px 12px;padding:10px 14px}
.who-card.shared.compact .k{margin:0;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.who-card.shared.compact .who-rows{gap:4px}
.who-card.shared.compact .more{margin:0;white-space:nowrap}
@media (max-width:420px){.who-card.shared.compact{grid-template-columns:minmax(0,1fr)}}
/* round 7 (exec, creative, producer): the column's spare height is shared by the Next card (its roadmap at the foot) and the
   facts card (place and dates at the top, the big numbers at the foot, larger), so neither card is one under-filled box */
@media (min-width:961px){
  .side-col>.next-card{flex:1 1 auto}
  .side-col>.next-card .road{margin-top:auto}
  .side-col>.numstrip.facts-card{flex:1 1 auto;justify-content:space-between}
  .side-col>.numstrip.facts-card .nums4{margin-top:0}
  .side-col>.numstrip.facts-card .num b{font-size:40px}
}
/* round 7 (UI): the Log's Who signed in never cuts a name ('Hana …' at 1024): names wrap, the time keeps one line, and below
   1180 px the client chip sits under the name, three cards to a row */
.person-id b{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.person-id .muted{white-space:nowrap}
@media (min-width:1001px) and (max-width:1180px){.people-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1180px){.person{grid-template-columns:auto minmax(0,1fr)}.person>.chip{grid-column:2;justify-self:start}.person-n{grid-column:2}}
/* round 7 (UI polish): a short page keeps its footer at the bottom of the screen, never mid-screen */
body:not(.login){min-height:100vh;display:flex;flex-direction:column}
body:not(.login)>main{flex:1 0 auto}
body:not(.login)>.foot{flex:none}
/* round 7 (UI polish): a flagged step that is not late reads amber ('Amend SOW + re-quote · in 43 d'); red is for late only */
.chip-flag{color:var(--wait);border-color:color-mix(in srgb,var(--wait) 60%,transparent);background:color-mix(in srgb,var(--wait) 12%,transparent)}
.next-what b.flag,.next-mini b.flag{color:var(--wait)}
.cal.flag{border-color:var(--wait)}
.cal.flag .m{background:var(--wait);color:#fff}
:root:not([data-theme="light"]) .cal.flag .m{color:#101924}
.tl-dot.flag{box-shadow:0 0 0 3px color-mix(in srgb,var(--wait) 45%,transparent)}
.dates li.flag>span:nth-child(2){color:var(--wait)}
/* round 7: a pitch's two-card section spans two columns of the packed row */
.sec-row .sec.span2{grid-column:span 2}
.sec-row .sec.span2 .grid.g3{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:600px){.sec-row .sec.span2{grid-column:auto}.sec-row .sec.span2 .grid.g3{grid-template-columns:1fr}}
/* a row in the catalog's section_order keeps that order at every width: no dense packing, so at two columns (601-1000 px)
   Paquin's Downloads stays last rather than filling the slot beside the player (page review, 2026-11-11) */
.sec-row.ordered{grid-auto-flow:row}
/* round 7 (UI polish): every client document hero grows with its side column (a slide hero at 1024 ended 95 px above it), at least 16:9,
   never past the first screen */
@media (min-width:961px){
  .band.two>.hero-card.hero-over.txtbar{aspect-ratio:auto;align-self:stretch;min-width:0;max-height:calc(100vh - 170px)}
  .band.two>.hero-card.hero-over.txtbar::before{content:"";display:block;padding-top:56.25%}
}
/* round 7 (creative, game dev): the answer stays inside its card, in its column (the grid no longer reflows under the cursor);
   the other cards keep their own height. A planned login (decided, created at go-live) is a dashed card with no buttons */
.access-grid{align-items:start}
.ucard.has-notice{outline:2px solid color-mix(in srgb,var(--accent) 60%,transparent);outline-offset:1px}
.ucard.planned{border-style:dashed;background:transparent}
.ucard.planned .av{opacity:.7}
/* round 7 (exec): staff Team card fills down to the hero's bottom (no empty patch under it), its chips at the foot */
@media (min-width:961px){
  .band:has(>.who-card)>.who-card.team{align-self:stretch}
  .band:has(>.who-card)>.who-card.team>.chips{margin-top:auto}
}

/* generated: timeline positions */
.l0{left:0%}.l1{left:1%}.l2{left:2%}.l3{left:3%}.l4{left:4%}.l5{left:5%}.l6{left:6%}.l7{left:7%}.l8{left:8%}.l9{left:9%}.l10{left:10%}.l11{left:11%}.l12{left:12%}.l13{left:13%}.l14{left:14%}.l15{left:15%}.l16{left:16%}.l17{left:17%}.l18{left:18%}.l19{left:19%}.l20{left:20%}.l21{left:21%}.l22{left:22%}.l23{left:23%}.l24{left:24%}.l25{left:25%}.l26{left:26%}.l27{left:27%}.l28{left:28%}.l29{left:29%}.l30{left:30%}.l31{left:31%}.l32{left:32%}.l33{left:33%}.l34{left:34%}.l35{left:35%}.l36{left:36%}.l37{left:37%}.l38{left:38%}.l39{left:39%}.l40{left:40%}.l41{left:41%}.l42{left:42%}.l43{left:43%}.l44{left:44%}.l45{left:45%}.l46{left:46%}.l47{left:47%}.l48{left:48%}.l49{left:49%}.l50{left:50%}.l51{left:51%}.l52{left:52%}.l53{left:53%}.l54{left:54%}.l55{left:55%}.l56{left:56%}.l57{left:57%}.l58{left:58%}.l59{left:59%}.l60{left:60%}.l61{left:61%}.l62{left:62%}.l63{left:63%}.l64{left:64%}.l65{left:65%}.l66{left:66%}.l67{left:67%}.l68{left:68%}.l69{left:69%}.l70{left:70%}.l71{left:71%}.l72{left:72%}.l73{left:73%}.l74{left:74%}.l75{left:75%}.l76{left:76%}.l77{left:77%}.l78{left:78%}.l79{left:79%}.l80{left:80%}.l81{left:81%}.l82{left:82%}.l83{left:83%}.l84{left:84%}.l85{left:85%}.l86{left:86%}.l87{left:87%}.l88{left:88%}.l89{left:89%}.l90{left:90%}.l91{left:91%}.l92{left:92%}.l93{left:93%}.l94{left:94%}.l95{left:95%}.l96{left:96%}.l97{left:97%}.l98{left:98%}.l99{left:99%}.l100{left:100%}.w1{width:1%}.w2{width:2%}.w3{width:3%}.w4{width:4%}.w5{width:5%}.w6{width:6%}.w7{width:7%}.w8{width:8%}.w9{width:9%}.w10{width:10%}.w11{width:11%}.w12{width:12%}.w13{width:13%}.w14{width:14%}.w15{width:15%}.w16{width:16%}.w17{width:17%}.w18{width:18%}.w19{width:19%}.w20{width:20%}.w21{width:21%}.w22{width:22%}.w23{width:23%}.w24{width:24%}.w25{width:25%}.w26{width:26%}.w27{width:27%}.w28{width:28%}.w29{width:29%}.w30{width:30%}.w31{width:31%}.w32{width:32%}.w33{width:33%}.w34{width:34%}.w35{width:35%}.w36{width:36%}.w37{width:37%}.w38{width:38%}.w39{width:39%}.w40{width:40%}.w41{width:41%}.w42{width:42%}.w43{width:43%}.w44{width:44%}.w45{width:45%}.w46{width:46%}.w47{width:47%}.w48{width:48%}.w49{width:49%}.w50{width:50%}.w51{width:51%}.w52{width:52%}.w53{width:53%}.w54{width:54%}.w55{width:55%}.w56{width:56%}.w57{width:57%}.w58{width:58%}.w59{width:59%}.w60{width:60%}.w61{width:61%}.w62{width:62%}.w63{width:63%}.w64{width:64%}.w65{width:65%}.w66{width:66%}.w67{width:67%}.w68{width:68%}.w69{width:69%}.w70{width:70%}.w71{width:71%}.w72{width:72%}.w73{width:73%}.w74{width:74%}.w75{width:75%}.w76{width:76%}.w77{width:77%}.w78{width:78%}.w79{width:79%}.w80{width:80%}.w81{width:81%}.w82{width:82%}.w83{width:83%}.w84{width:84%}.w85{width:85%}.w86{width:86%}.w87{width:87%}.w88{width:88%}.w89{width:89%}.w90{width:90%}.w91{width:91%}.w92{width:92%}.w93{width:93%}.w94{width:94%}.w95{width:95%}.w96{width:96%}.w97{width:97%}.w98{width:98%}.w99{width:99%}.w100{width:100%}
/* generated: picture shapes */
.ar20{--a:0.20;flex-grow:20}.ar37{--a:0.37;flex-grow:37}.ar46{--a:0.46;flex-grow:46}.ar56{--a:0.56;flex-grow:56}.ar67{--a:0.67;flex-grow:67}.ar70{--a:0.70;flex-grow:70}.ar97{--a:0.97;flex-grow:97}.ar102{--a:1.02;flex-grow:102}.ar105{--a:1.05;flex-grow:105}.ar140{--a:1.40;flex-grow:140}.ar146{--a:1.46;flex-grow:146}.ar150{--a:1.50;flex-grow:150}.ar178{--a:1.78;flex-grow:178}.ar204{--a:2.04;flex-grow:204}.ar250{--a:2.50;flex-grow:250}.ar333{--a:3.33;flex-grow:333}.ar335{--a:3.35;flex-grow:335}