/* Per-screen SummitKin treatment. Tokens stay in app.css. This file only paints. */
h1{font-size:clamp(1.875rem,1.35rem + 1.6vw,2.5rem);font-weight:500;letter-spacing:-.025em;line-height:1.08;text-wrap:balance}
h2{font-weight:500;letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
h3{font-size:20px;font-weight:500;letter-spacing:-.012em;line-height:1.3}
main>h2{font-size:28px;margin:32px 0 12px}
p{text-wrap:pretty}
.mono,.cval,.big.mono,table .mono,output{font-family:var(--f-text);font-variant-numeric:tabular-nums;letter-spacing:0}
:focus-visible{outline:2px solid var(--c-mint);outline-offset:3px;box-shadow:0 0 0 2px var(--c-ground)}
button:disabled,.btn:disabled,input:disabled,select:disabled,textarea:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
[role=alert],.notice[role=alert]{color:var(--c-danger)}
input:user-invalid,select:user-invalid,textarea:user-invalid{border-color:var(--c-line-ui)}
.counter.saved .cval{box-shadow:inset 0 -1px 0 var(--c-mint);transition:box-shadow 600ms var(--ease-ui)}
/* Loading: the ellipsis stays in the text (tests wait on it) and bars carry the wait. */
.skel-live{position:relative;color:var(--c-ground);min-height:132px;overflow:hidden}
.skel-live::before,.skel-live::after{content:"";display:block;height:16px;margin:0 0 12px;background:var(--c-s2);animation:skel 1.2s var(--ease-ui) infinite}
.skel-live::before{width:42%;height:28px}
.skel-live::after{width:78%}
@keyframes skel{50%{opacity:.55}}
/* One mint fill: repeated row actions and later cards step down to an outline. */
ul.list>li .btn,ul.list>li a.btn,.aitem .btn,.cands .btn,.cands a.btn,main .card~.card .btn,main .card~.card a.btn{
background:transparent;color:var(--c-text);border-color:var(--c-line-ui);box-shadow:none
}
body[data-screen=shop] .card a.btn,body[data-screen=journal] form[data-form] .btn,
body[data-screen=events] h2+.card .btn,body[data-screen=events] h2+.card a.btn,
body[data-screen=live] form[data-form] .btn,body[data-screen=invites] form[data-form] .btn,
body[data-screen=audio] .card:first-of-type .btn,body[data-screen=audio] #libl>.aitem:first-child .btn,
body[data-screen=candidates] .cands>li:first-child .btn,
body[data-screen=core] .card .row .btn,body[data-screen=people] main>.row .btn,body[data-screen=team] main>p>.btn,
form[data-form]>p>.btn,dialog .btn{
background:var(--c-mint);color:var(--c-mint-ink);border-color:transparent
}
/* Active tab is text, so mint stays free for the one action. */
nav#nav a[aria-current=page]{color:var(--c-text);box-shadow:inset 0 -2px 0 var(--c-text)}
@media(min-width:900px){
nav#nav a[aria-current=page]{background:var(--c-mask);box-shadow:inset 2px 0 0 var(--c-text)}
}
.seg button[aria-pressed=true],.seg button[aria-selected=true],.seg.wrap a.on,.hubtabs a[aria-current=true]{
background:var(--c-s2);color:var(--c-text);box-shadow:inset 0 -2px 0 var(--c-text);border-color:transparent
}
/* Done ticks are text-on-navy, not a mint fill. The mint ring is only the moment of done. */
.tick.on{background:var(--c-text);border-color:var(--c-text);color:var(--c-mint-ink)}
.tick.on::after{color:var(--c-ground)}
li.just-ticked .tick.on{animation:tickring 220ms var(--ease-ui) both}
@keyframes tickring{from{box-shadow:0 0 0 0 var(--c-mint)}to{box-shadow:0 0 0 2px var(--c-mint)}}
.chip.ok,.chip.b,.chip.live{background:transparent;border-color:var(--c-line);color:var(--c-text-2)}
.chip.ok::before,.chip.live::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--c-mint);flex:none}
.chip.b::before{content:"";width:8px;height:8px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--c-line-ui);flex:none}
/* Empty: a calm line, and the action that already follows it reads as a text link. */
.empty{display:block;margin:8px 0 0;padding:28px 0 4px;border:0;border-top:1px solid var(--c-line);background:transparent;color:var(--c-text-2);font:400 15px/1.5 var(--f-text);border-radius:0}
td.empty{display:table-cell;padding:28px 12px;color:var(--c-text-2);font-weight:400}
.empty.has-act+a,.empty.has-act+button,.empty.has-act+p>a,.empty.has-act+p>button{
background:transparent;border-color:transparent;color:var(--c-text);text-decoration:underline;text-underline-offset:4px;box-shadow:none;padding-left:0;justify-content:flex-start;min-height:44px
}
/* Tables, sheets, inputs. */
table thead th{position:sticky;top:0;background:var(--c-ground);z-index:1}
th,td{min-height:48px}
dialog{border-radius:12px}
input,select,textarea{background:var(--c-ground);border-color:var(--c-line-ui)}
label{font-size:13px;color:var(--c-muted)}
/* Player: a real scrubber, not bars drawn from a sine wave. */
.pc-wave{height:28px;position:relative}
.pc-wave i{display:none}
.pc-wave::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--c-line);transform:translateY(-50%)}
.pc-wave b{position:absolute;left:0;top:50%;bottom:auto;height:2px;width:var(--p);margin-top:-1px;background:var(--c-text-2);inset:auto auto auto 0}
.pc-mark{background:var(--c-plate);border:1px solid var(--c-line)}
.pc-mark::after{background:var(--c-text-2)}
#mini{background:var(--c-mask)}
.mplay{background:var(--c-mint);color:var(--c-mint-ink)}
/* Celebration stays navy. The old amber stops do not paint. */
.campsc .beam stop{stop-color:var(--c-mint)}
.campsc .flare{fill:rgba(168,230,196,.2)}
.campsc .beam path:first-of-type{fill:rgba(168,230,196,.1)}
.campsc .beam path:last-of-type{fill:var(--c-mass)}
/* ---- Welcome ---- */
@media(min-width:1200px){
}
/* ---- Auth: reset shares the narrow card. Activate and login already do. ---- */
body[data-screen=reset] main,body[data-screen=device] main,body[data-screen=c] .calm{max-width:440px;margin-left:auto;margin-right:auto}
body[data-screen=reset] .card,body[data-screen=device] .card{padding:24px}
body[data-screen=reset] form .btn,body[data-screen=device] .btn{width:100%}
body[data-screen=activate] main,body[data-screen=login] main{width:100%}
/* ---- Today: the rail and the list already have a layout. Quiet the next-move rows. ---- */
body[data-screen=today] #ascent h2,body[data-screen=today] .card>h2{font-size:20px}
body[data-screen=today] .card{margin-bottom:16px}
body[data-screen=today] section.card:has(h2) .list>li{min-height:56px;padding:12px 0}
/* ---- People and contacts ---- */
body[data-screen=people] main>.row.sp{align-items:flex-end;gap:12px;margin-bottom:8px}
body[data-screen=people] main>.row.sp h1{margin:0}
body[data-screen=people] #q{margin-bottom:8px}
body[data-screen=people] .stagehead{font:500 13px/1.3 var(--f-text);color:var(--c-muted);letter-spacing:0;margin:28px 0 0;padding-top:12px;border-top:1px solid var(--c-line)}
body[data-screen=people] .stagehead:first-of-type{margin-top:8px}
body[data-screen=people] .list>li.row{min-height:64px;padding:12px 0;gap:16px;border-bottom:0}
body[data-screen=people] .av{width:40px;height:40px}
body[data-screen=people] .list .btn2{background:transparent;border-color:transparent;color:var(--c-text-2);text-decoration:underline;text-underline-offset:3px;padding:0 4px}
body[data-screen=contact] main>a:first-child{display:inline-block;margin:4px 0 16px}
body[data-screen=contact] h1{margin-bottom:16px}
body[data-screen=contact] .card{margin-bottom:16px}
body[data-screen=contact] .card h2{font-size:20px}
body[data-screen=customers] .list>li{min-height:56px}
body[data-screen=customers] .bar{margin:8px 0 12px}
/* ---- CORE ---- */
body[data-screen=core] #run{margin-bottom:8px}
body[data-screen=core] #run .big{font-size:40px;line-height:1;letter-spacing:-.025em;margin:4px 0 12px}
body[data-screen=core] #coreHabits{background:transparent;border:0;padding:8px 0 0}
body[data-screen=core] .card{margin-bottom:16px}
body[data-screen=core] .card>h2{font-size:20px}
body[data-screen=core] .cal{gap:4px;margin:16px 0}
body[data-screen=core] .cal span{background:var(--c-s2);color:var(--c-muted);border-radius:0}
body[data-screen=core] .cal span.d{background:var(--c-text-2);color:var(--c-ground)}
body[data-screen=core] .cal span.missed{background:transparent;box-shadow:inset 0 0 0 1px var(--c-line-ui);color:var(--c-muted)}
body[data-screen=core] .cal span.future{background:var(--c-s2)}
body[data-screen=core] .cal span.is-today{box-shadow:inset 0 0 0 2px var(--c-mint)}
body[data-screen=core] .big{font-size:28px;letter-spacing:-.02em}
@media(min-width:1024px){
body[data-screen=core] .cal{grid-template-columns:repeat(15,minmax(0,1fr))}
}
/* ---- Climb and Team ---- */
body[data-screen=climb] .seg{margin-bottom:16px}
body[data-screen=climb] .nextcard h2{font-size:28px}
body[data-screen=team] .seg{margin:8px 0 16px}
body[data-screen=team] .row.wrap>.chip{border-radius:0;border:0;border-top:1px solid var(--c-line);padding:12px 0;min-height:48px;background:transparent}
body[data-screen=team] form.card{margin:16px 0}
body[data-screen=team] table tbody tr{min-height:48px}
/* ---- More and settings ---- */
body[data-screen=more] .list>li{min-height:56px;display:flex;align-items:center}
body[data-screen=more] .list>li>a{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;text-decoration:none;color:var(--c-text);font-size:16px}
body[data-screen=more] .list>li>a::after{content:"";width:8px;height:8px;border-right:1.5px solid var(--c-muted);border-bottom:1.5px solid var(--c-muted);transform:rotate(-45deg);flex:none}
body[data-screen=settings] .card{margin-bottom:16px;padding:16px 16px 8px}
body[data-screen=settings] .card h2{font-size:20px}
body[data-screen=settings] .check{border-top:1px solid var(--c-line);padding:8px 0;font-size:16px;color:var(--c-text)}
body[data-screen=settings] .card .check:first-of-type{border-top:0}
/* ---- Audio, books, reader ---- */
body[data-screen=audio] .seg{margin:8px 0 16px}
body[data-screen=audio] .aitem{padding:16px 0}
body[data-screen=audio] .aitem .playc{width:48px;min-width:48px;height:48px;padding:0;border-radius:999px}
body[data-screen=audio] .aitem .grow strong{font-size:16px;font-weight:500}
body[data-screen=audio] .filters{padding:12px;background:var(--c-mask);border:1px solid var(--c-line);border-radius:12px}
body[data-screen=audio] .bitem{min-height:96px;padding:16px 0}
body[data-screen=reader] .reader,body[data-screen=book] .ereader{max-width:60ch;font-size:16px;line-height:1.6;letter-spacing:-.005em}
body[data-screen=book] .readhead{margin-bottom:8px}
body[data-screen=book] h1.btitle{font-size:clamp(1.75rem,1.2rem + 1.2vw,2.25rem);margin-bottom:4px}
body[data-screen=book] .ertools{margin:12px 0 0;padding:8px 0;border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line)}
body[data-screen=book] .ereader{margin-top:20px;border:0;background:transparent;padding:0 8px 24px;min-height:52vh}
body[data-screen=book] .erfoot{margin-top:12px}
body[data-screen=reader] #rt,body[data-screen=book] #erPos{font-variant-numeric:tabular-nums}
body[data-screen=book] .ertools{margin-bottom:12px}
body[data-screen=downloads] .list>li,body[data-screen=audio] #dll>li{min-height:64px}
/* ---- Journal and chat ---- */
body[data-screen=journal] textarea{min-height:128px}
body[data-screen=journal] .entry{border-radius:0;border:0;border-top:1px solid var(--c-line);background:transparent;padding:16px 0;margin:0}
body[data-screen=journal] .comments{margin-top:8px}
body[data-screen=chat] .list>li.row{min-height:64px}
body[data-screen=chat] .msgs{gap:12px;padding:16px 0}
body[data-screen=chat] .msg{padding:12px 16px}
body[data-screen=chat] .composer{padding:12px 0;gap:12px}
body[data-screen=chat] .composer textarea{min-height:48px}
/* ---- Live ---- */
body[data-screen=live] .list>li.card{margin:0 0 12px}
body[data-screen=live] .livewrap video,body[data-screen=live] .vbox{border-radius:12px;background:var(--c-abyss)}
body[data-screen=live] .livechat{padding:12px}
@media(max-width:720px){
body[data-screen=live] .livewrap video{border-radius:0;max-height:none}
}
/* ---- Events, tickets, check-in ---- */
body[data-screen=events] .hubcard{border-radius:0;border:0;border-top:1px solid var(--c-line);background:transparent;padding:16px 0}
body[data-screen=events] .hubgrid{gap:0}
body[data-screen=events] .card:not(.hubcard){margin-bottom:16px}
body[data-screen=events] .testmode{border-style:solid;border-width:0 0 0 2px;border-radius:0;background:var(--c-s2)}
body[data-screen=event] .hubhead{margin:8px 0 16px}
body[data-screen=event] .hubhead h1{margin:4px 0}
body[data-screen=event] .hubtabs{margin-bottom:16px}
body[data-screen=event] .wallet{align-items:center}
body[data-screen=event] .qr,body[data-screen=tickets] .qr{background:#fff;padding:8px;border-radius:8px}
body[data-screen=event] .sess .time,body[data-screen=tickets] .mono{font-variant-numeric:tabular-nums}
body[data-screen=checkin] #ciVid{background:var(--c-abyss);border:1px solid var(--c-line)}
body[data-screen=checkin] #ciMsg.ok{color:var(--c-mint)}
body[data-screen=checkin] #ciMsg.bad{color:var(--c-danger)}
body[data-screen=tickets] .list>li{min-height:64px}
/* ---- Shop, catalog, invites, candidates, TV ---- */
body[data-screen=shop] .card p:first-child{font-size:16px;line-height:1.6;max-width:60ch}
body[data-screen=catalog] .list>li{min-height:64px;align-items:flex-start;padding:16px 0}
body[data-screen=invites] fieldset{margin:16px 0}
body[data-screen=invites] .grid2 .check{min-height:48px;align-items:flex-start;padding:8px 0}
body[data-screen=candidates] .cands{gap:0}
body[data-screen=candidates] .cands>li{border:0;border-top:1px solid var(--c-line);border-radius:0;background:transparent;padding:16px 0;margin:0}
body[data-screen=candidates] .filters{background:transparent;padding:8px 0 16px}
body[data-screen=tv] .tvrow{gap:16px;padding-bottom:16px}
body[data-screen=tv] .tvc{flex-basis:240px}
body[data-screen=tv] .tvph,body[data-screen=tv] .tvc img{border-radius:12px;border:1px solid var(--c-line)}
body[data-screen=tv] .vbox{border-radius:12px}
/* ---- Reports, orders, office contact ---- */
body[data-screen=reports] .list>li{min-height:56px}
body[data-screen=reports] .card{margin-top:16px}
body[data-screen=standing-orders] .list>li{min-height:64px;padding:16px 0}
body[data-screen=standing-orders] form.card{margin-top:24px}
body[data-screen=contact-office] form.card{margin:8px 0 24px}
body[data-screen=contact-office] .list>li{padding:16px 0}
/* ---- Staff: network, finance, office, BSM, admin, desk ---- */
body[data-screen=network] table,body[data-screen=finance] table,body[data-screen=office] table,body[data-screen=admin] details{font-size:15px}
body[data-screen=network] h1,body[data-screen=finance] h1,body[data-screen=office] h1,body[data-screen=bsm-plan] h1,body[data-screen=admin] h1,body[data-screen=admin-tools] h1,body[data-screen=desk] h1{margin-bottom:8px}
body[data-screen=network] .card,body[data-screen=finance] .card,body[data-screen=office] .card,body[data-screen=bsm-plan] .card,body[data-screen=admin-tools] .card,body[data-screen=audio-rules] .card{margin-bottom:16px}
body[data-screen=network] ul.tree{border-left-color:var(--c-line)}
body[data-screen=network] ul.tree li{min-height:48px;display:flex;align-items:center;flex-wrap:wrap;gap:8px}
body[data-screen=admin] details.card{border-radius:0;border:0;border-top:1px solid var(--c-line);background:transparent;padding:8px 0}
body[data-screen=admin] details.hot{border-left:2px solid var(--c-line-ui);padding-left:12px}
body[data-screen=desk] nav.seg{margin:8px 0 20px}
body[data-screen=desk] .hubgrid{gap:0}
body[data-screen=desk] .hubgrid>.card{border:0;border-top:1px solid var(--c-line);border-radius:0;background:transparent;padding:16px 0;margin:0;text-decoration:none;color:inherit}
body[data-screen=desk] .list>li{min-height:56px}
body[data-screen=audio-rules] input[type=number]{max-width:8rem}
/* Candidate portal: current step is a mint rule plus the word, not a filled card. */
body[data-screen=c] .step.cur{border:0;border-left:2px solid var(--c-mint);border-radius:0;background:transparent;padding-left:16px}
body[data-screen=c] .card.locked{border-style:solid;border-color:var(--c-line);opacity:1}
body[data-screen=c] .mat{padding:16px 0}
/* 390 is its own layout: stack page headers, keep 48px taps, clear the tab bar. */
@media(max-width:820px){
main>h2{font-size:22px;margin:24px 0 8px}
body[data-screen=people] main>.row.sp,body[data-screen=audio] main>.row.sp,body[data-screen=chat] main>.row.sp,body[data-screen=journal] main>.row.sp{flex-wrap:wrap}
body[data-screen=people] main>.row.sp .btn,body[data-screen=audio] main>.row.sp .btn2{width:100%}
body[data-screen=events] .hubcard strong,body[data-screen=tv] .tvt{font-size:16px}
body[data-screen=team] .tw,body[data-screen=finance] .tw,body[data-screen=network] .tw,body[data-screen=desk] .tw{margin:0 -16px;padding:0 16px}
table.stack tr{border-radius:0;background:transparent;border-width:0 0 1px}
}
/* 1440: the column has room, and staff tables use it. */
@media(min-width:1200px){
body[data-screen=people] main,body[data-screen=audio] main,body[data-screen=events] main,body[data-screen=journal] main,body[data-screen=chat] main{max-width:880px}
body[data-screen=team] main,body[data-screen=network] main,body[data-screen=finance] main,body[data-screen=office] main,body[data-screen=desk] main,body[data-screen=reports] main,body[data-screen=admin] main{max-width:1100px}
}
/* Hover only where a pointer can hover. Touch keeps the resting style. */
@media(hover:hover) and (pointer:fine){
a:hover{color:var(--c-mint)}
.btn:hover{box-shadow:inset 0 -2px 0 var(--c-mint-ink)}
.btn2:hover,.hact:hover{box-shadow:inset 0 -2px 0 var(--c-mint);color:var(--c-text)}
.link:hover,button.link:hover{color:var(--c-mint)}
ul.list>li .btn:hover,ul.list>li a.btn:hover,.aitem .btn:hover,.cands .btn:hover,main .card~.card .btn:hover,main .card~.card a.btn:hover{background:var(--c-mask);color:var(--c-text);box-shadow:inset 0 -2px 0 var(--c-mint)}
body[data-screen=events] h2+.card .btn:hover,body[data-screen=events] h2+.card a.btn:hover,body[data-screen=shop] .card a.btn:hover,body[data-screen=journal] form .btn:hover,body[data-screen=audio] #libl>.aitem:first-child .btn:hover,dialog .btn:hover,form[data-form]>p>.btn:hover{background:var(--c-mint);color:var(--c-mint-ink);box-shadow:inset 0 -2px 0 var(--c-mint-ink)}
ul.list>li.row:has(>a[href^="#/contact/"]):hover{background:transparent}
body[data-screen=more] .list>li>a:hover{color:var(--c-text)}
body[data-screen=desk] .hubgrid>.card:hover{background:var(--c-mask)}
body[data-screen=events] .hubcard:hover{background:transparent}
}
@media(hover:none){
a:hover,.btn:hover,.btn2:hover,.hact:hover,.link:hover,button.link:hover{box-shadow:none}
.btn:hover{background:var(--c-mint);color:var(--c-mint-ink)}
ul.list>li .btn:hover,.aitem .btn:hover,main .card~.card .btn:hover,main .card~.card a.btn:hover{background:transparent;color:var(--c-text)}
}
@media(prefers-reduced-motion:reduce){
.skel-live::before,.skel-live::after,li.just-ticked .tick.on,.counter.saved .cval{animation:none;transition:none}
.skel-live::before,.skel-live::after{opacity:.8}
}
/* r2. Ruled sections, one surface, text tabs, calendar, capture. */
.card{background:transparent;border:0;border-radius:0;box-shadow:none;padding:20px 0 4px;margin:0;border-top:1px solid var(--c-line)}
main:has(form[data-form=login])>.card,main:has(form[data-form=activate])>.card,body[data-screen=reset] .card,body[data-screen=device] .card,body[data-screen=c] .calm>.card,dialog{background:var(--c-mask);border:1px solid var(--c-line);border-radius:12px;padding:24px;border-top:1px solid var(--c-line)}
.sky{border-radius:12px}
#ascent.card,#coreHabits.card{border-top:0;padding-top:8px}
.seg,.hubtabs,body[data-screen=desk] nav.seg{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:0;margin:0 0 16px;padding:0;background:transparent;border:0;border-bottom:1px solid var(--c-line);border-radius:0;box-shadow:none;mask-image:none;-webkit-mask-image:none}
.seg button,.hubtabs a,body[data-screen=desk] nav.seg a{flex:0 0 auto;white-space:nowrap;border:0;border-radius:0;background:transparent;color:var(--c-muted);box-shadow:none;min-height:48px;height:48px;padding:0 16px;line-height:48px}
.seg button[aria-pressed=true],.seg button[aria-selected=true],.hubtabs a[aria-current=true],body[data-screen=desk] nav.seg a.on{background:transparent;color:var(--c-text);border:0;box-shadow:inset 0 -2px 0 var(--c-text)}
body[data-screen=event] .hubhead h1{text-transform:none;font-size:clamp(1.75rem,1.1rem + 1.1vw,2.5rem);line-height:1.12;letter-spacing:-.02em}
@media(max-width:820px){body[data-screen=event] .hubhead h1{font-size:32px}}
body[data-screen=event] .hubcard strong,body[data-screen=events] .hubcard strong{text-transform:none;font-size:20px;font-weight:500}
body[data-screen=event] #hub{min-height:0}
body[data-screen=event] #hub .empty{margin-top:8px}
body[data-screen=core] .cal span{background:var(--c-s2);color:var(--c-text-2);box-shadow:none}
body[data-screen=core] .cal span.d{background:rgba(168,230,196,.22);color:var(--c-text)}
body[data-screen=core] .cal span.missed{background:transparent;color:var(--c-text);box-shadow:inset 0 0 0 1px var(--c-line-ui)}
body[data-screen=core] .cal span.future{background:var(--c-s2);color:var(--c-text-2);box-shadow:none}
body[data-screen=core] .cal span.is-today{box-shadow:inset 0 0 0 2px var(--c-mint);color:var(--c-text)}
body[data-screen=core] #run p:has(> .tick){display:flex;align-items:center;gap:12px;min-height:56px;margin:8px 0 12px}
body[data-screen=people] .stagehead{color:var(--c-text-2);text-transform:none;letter-spacing:0;font:500 15px/1.3 var(--f-text)}
body[data-screen=people] .stagehead .n{font-weight:400;font-variant-numeric:tabular-nums;color:var(--c-muted);margin-left:8px}
@media(min-width:1100px){
}
body[data-screen=desk] main{max-width:none}
body[data-screen=desk] .hubgrid{display:grid;grid-template-columns:1fr;gap:0;background:transparent;border:0}
body[data-screen=desk] .hubgrid>.card{background:transparent;border:0;border-top:1px solid var(--c-line);border-radius:0;margin:0;padding:20px 16px 24px;min-height:112px}
.notice{background:transparent;border:0;border-left:2px solid var(--c-line-ui);border-radius:0}
body[data-screen=people] .list>li.row{background:transparent;border-radius:0}
@media(min-width:1100px){
body[data-screen=desk] .hubgrid{grid-template-columns:1fr 1fr 1fr}
body[data-screen=desk] .hubgrid>.card{border-right:1px solid var(--c-line)}
body[data-screen=desk] .hubgrid>.card:nth-child(3n){border-right:0}
body[data-screen=team] main,body[data-screen=network] main,body[data-screen=finance] main,body[data-screen=office] main,body[data-screen=reports] main,body[data-screen=admin] main,body[data-screen=events] main{max-width:none}
}
#ascent ul.list:not(.counters)>li.row{border:0;border-bottom:1px solid var(--c-line);border-radius:0;background:transparent;box-shadow:none}
#ascent ul.list:not(.counters)>li.row:has(.tick.on){background:rgba(168,230,196,.08)}
.rail-indicators .counters{background:transparent;border:0;border-radius:0;padding:0}
body.shot-nav-off nav#nav{display:none!important}
body.shot-nav-off main{padding-bottom:32px!important}
/* r3. Broken states, mobile rows, presence. */
.ico{width:16px;height:16px;flex:none;display:inline-block;vertical-align:-3px;fill:none;stroke:currentColor}
.hact svg.ico,.btn svg.ico,.small svg.ico{width:16px;height:16px;fill:none;stroke:currentColor}
.notice,.testmode{background:var(--c-s2);border:0;border-left:2px solid var(--c-line-ui);border-radius:0;color:var(--c-text-2);font:400 15px/1.5 var(--f-text);letter-spacing:0;text-transform:none;padding:12px 16px 12px 40px;position:relative}
.notice::before,.testmode::before{content:"";position:absolute;left:14px;top:14px;width:16px;height:16px;background:url("data:image/svg+xml;utf8,") center/16px 16px no-repeat}
.empty a,.empty button.link{color:var(--c-text);background:none;border:0;box-shadow:none;padding:0;min-height:0;font:inherit;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
input[type=file]{width:auto;max-width:100%;min-height:0;height:auto;padding:0;border:0;background:transparent;color:var(--c-text-2);font:400 15px/1.4 var(--f-text)}
input[type=file]::file-selector-button,input[type=file]::-webkit-file-upload-button{font:500 15px/1 var(--f-text);min-height:48px;padding:0 16px;margin:0 12px 0 0;border-radius:8px;border:1px solid var(--c-line-ui);background:transparent;color:var(--c-text);cursor:pointer}
body[data-screen=audio] .bcover.gen{width:92px;height:auto;min-height:96px;overflow:visible}
body[data-screen=audio] .bcover.gen b,body[data-screen=audio] .bcover.gen s,body[data-screen=audio] .bcover.gen i{display:block;-webkit-line-clamp:unset;overflow:visible;white-space:normal;overflow-wrap:break-word;text-overflow:unset}
body[data-screen=audio] .filters,body[data-screen=audio] .filters.card{background:transparent;border:0;border-radius:0;border-top:1px solid var(--c-line);box-shadow:none;padding:12px 0}
body[data-screen=audio-rules] form label:not(.check){display:flex;flex-direction:column;align-items:flex-start;gap:6px}
body[data-screen=audio-rules] form label:not(.check) input{width:8rem}
body[data-screen=reader] .reader{white-space:pre-wrap;max-height:none;overflow:visible;border:0;background:transparent;padding:8px 0 24px;max-width:60ch;border-radius:0;font:400 16px/1.6 var(--f-text);color:var(--c-text)}
body[data-screen=book] .ereader .erlabel{text-indent:0;text-transform:none;font-family:var(--f-text);font-size:15px;letter-spacing:0;color:var(--c-text-2);background:var(--c-s2);border:0;border-left:2px solid var(--c-line-ui);border-radius:0;padding:12px 16px 12px 40px;position:relative}
body[data-screen=book] .ereader .erlabel::before{content:"";position:absolute;left:14px;top:14px;width:16px;height:16px;background:url("data:image/svg+xml;utf8,") center/16px 16px no-repeat}
body[data-screen=people] .stagehead .n::before{content:"ยท ";margin-right:2px}
body[data-screen=people] .list>li.row,body[data-screen=people] .list>li.row:hover,body[data-screen=events] .hubcard,body[data-screen=events] .hubcard:hover{background:transparent}
body[data-screen=admin] details>summary{display:block;white-space:normal}
body[data-screen=admin] details>summary .q,body[data-screen=admin] .adm-note .q{display:block;white-space:normal;overflow-wrap:anywhere}
body[data-screen=admin] .adm-note .q[hidden],body[data-screen=admin] .adm-note .note-full[hidden]{display:none}
body[data-screen=admin] details>summary .path{display:block;margin-top:4px}
body[data-screen=desk][data-sub=catalog] .list>li.row{align-items:flex-start}
body[data-screen=desk][data-sub=catalog] .list>li.row strong{display:block;white-space:normal;overflow:visible;text-overflow:unset;overflow-wrap:break-word}
body[data-screen=desk][data-sub=audit] td.when .nw{white-space:nowrap}
@media(max-width:640px){
table.stack tr>*:first-child:not([data-label])::before,table.stack tr>*:first-child[data-label=""]::before{content:none;display:none}
table.stack td.empty{display:block}
body[data-screen=climb] .miss .row.sp{flex-wrap:wrap;align-items:baseline}
body[data-screen=climb] .miss .row.sp>.mono{white-space:nowrap;margin-left:auto}
body[data-screen=climb] .miss .row.sp>span.small{flex:1 0 100%}
body[data-screen=climb] .miss .row.sp>span:first-child{flex:1 1 12rem;min-width:0}
}
@media(min-width:900px){
#shell{position:relative}
/* No full-height rail or divider line (Johan + Desi, Nov 4 2026): the old #shell::before hairline at left:220px ran through the signed-out page. */
nav#nav{border-right:0;height:auto;min-height:100vh;align-self:stretch}
body[data-screen=desk] nav.seg{flex-wrap:wrap;overflow:visible;height:auto;mask-image:none;-webkit-mask-image:none}
}
@media(max-width:899px){
body[data-screen=desk] nav.seg{flex-wrap:nowrap;overflow-x:auto;scroll-behavior:smooth;-webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 28px),transparent)}
}
@media(min-width:1100px){
body[data-screen=today] main{flex:1 1 auto;width:auto;max-width:1220px;margin-left:0;margin-right:0}
body[data-screen=desk] main,body[data-screen=team] main,body[data-screen=network] main,body[data-screen=finance] main,body[data-screen=office] main,body[data-screen=reports] main,body[data-screen=admin] main,body[data-screen=admin-tools] main,body[data-screen=bsm-plan] main{flex:1 1 auto;width:auto;max-width:none;margin-left:0;margin-right:0}
body[data-screen=event] main,body[data-screen=events] main,body[data-screen=checkin] main,body[data-screen=tickets] main,body[data-screen=reader] main,body[data-screen=book] main,body[data-screen=downloads] main,body[data-screen=chat] main,body[data-screen=journal] main,body[data-screen=live] main,body[data-screen=shop] main,body[data-screen=customers] main,body[data-screen=standing-orders] main,body[data-screen=contact-office] main,body[data-screen=catalog] main,body[data-screen=invites] main,body[data-screen=candidates] main,body[data-screen=audio-rules] main,body[data-screen=settings] main,body[data-screen=more] main{flex:0 1 760px;width:100%;max-width:760px;margin-left:auto;margin-right:auto}
body[data-screen=audio] main,body[data-screen=people] main,body[data-screen=climb] main,body[data-screen=core] main{flex:0 1 880px;width:100%;max-width:880px;margin-left:auto;margin-right:auto}
}
/* r4. Report rows, plan ranks, file buttons. */
.rep-narrow{display:none}
.filehide{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;border:0!important;white-space:nowrap!important}
.filepick{position:relative;display:inline-flex}
.filepick .btn2{position:relative;z-index:1}
body[data-screen=reports] table{border-collapse:separate;border-spacing:0}
body[data-screen=reports] thead th,body[data-screen=reports] table.stack thead th:nth-child(5){position:static;white-space:nowrap;overflow:visible;text-overflow:clip;text-align:left}
.dl-rows{list-style:none;margin:0;padding:0}
.dl-rows li{padding:12px 0;border-bottom:1px solid var(--c-line)}
.dl-top{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.dl-top strong{font-weight:500;color:var(--c-text)}
.dl-ibo{font-variant-numeric:tabular-nums;color:var(--c-text-2)}
.dl-meta{margin:2px 0 0;color:var(--c-text-2);font:400 13px/1.5 var(--f-text);overflow-wrap:anywhere}
body[data-screen=reports] section.card .empty{border-top:0;margin-top:0;padding-top:8px}
body[data-screen=admin] h2[id]{scroll-margin-top:72px}
.jumps{display:flex;flex-wrap:wrap;gap:8px 16px;margin:4px 0 20px}
.jumps button{background:transparent;border:0;box-shadow:none;padding:0;min-height:0;height:auto;border-radius:0;color:var(--c-text);text-decoration:underline;text-underline-offset:4px;font:400 15px/1.5 var(--f-text);cursor:pointer}
.jumps button:active{transform:none}
.note-full{margin:0}
body[data-screen=admin] .adm-note .note-more{display:block;margin:4px 0 0}
.rep-leg{list-style:none;margin:16px 0 0;padding:0;max-width:40rem}
.rep-leg li{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:12px;align-items:baseline;padding:4px 0;font:400 13px/1.45 var(--f-text);color:var(--c-text-2)}
.rep-leg .k{color:var(--c-text);font-variant-numeric:tabular-nums;white-space:nowrap}
body[data-screen=reports] .rep-growth th,body[data-screen=reports] .rep-growth td{padding-left:4px;padding-right:4px}
body[data-screen=reports] .rep-growth th:first-child,body[data-screen=reports] .rep-growth td:first-child{white-space:nowrap;min-width:150px}
body[data-screen=reports] .rep-growth .tw{overflow-x:auto}
.drop{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:8px 0 12px;padding:20px;border:1px dashed var(--c-line);background:transparent}
.drop.over{border-color:var(--c-line-ui);background:var(--c-s2)}
.drop-hint,.drop-count{margin:0;font:400 15px/1.5 var(--f-text)}
.drop-hint{color:var(--c-text-2)}
.drop-count{color:var(--c-text)}
.drop-go{align-self:stretch;display:flex;justify-content:flex-end;margin:4px 0 0}
form[data-form=libBulk] .drop .btn[disabled]{background:transparent;color:var(--c-muted);border-color:var(--c-line);box-shadow:none;cursor:default}
body[data-screen=reports] form[data-form=repRun]{align-items:flex-end}
body[data-screen=reports] form[data-form=repRun]>button,body[data-screen=reports] form[data-form=repRun]>a.btn2{margin-bottom:8px}
body[data-screen=bsm-plan] .ranks{margin:0}
body[data-screen=bsm-plan] .rk{padding:12px 0;border-bottom:1px solid var(--c-line)}
body[data-screen=bsm-plan] .gens{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:8px}
body[data-screen=bsm-plan] .gen{width:4.75rem;margin:0}
body[data-screen=bsm-plan] .gen span{display:block;font-size:13px;color:var(--c-muted)}
body[data-screen=bsm-plan] .gen input{width:100%;min-height:48px}
@media(min-width:900px){
body[data-screen=reports] .rep-wide td:nth-child(2),body[data-screen=reports] .rep-wide th:nth-child(2){white-space:nowrap}
body[data-screen=bsm-plan] .rk{display:grid;grid-template-columns:11rem minmax(0,1fr);gap:8px 16px;align-items:center}
body[data-screen=bsm-plan] .gens{margin-top:0;flex-wrap:nowrap}
}
@media(max-width:640px){
.rep-wide{display:none}
.rep-narrow{display:block}
body[data-screen=reports] .rep-growth{display:block}
body[data-screen=reports] .rep-growth+.rep-narrow{display:none}
body[data-screen=reports] .rep-growth table.stack{display:table;width:max-content;min-width:100%}
body[data-screen=reports] .rep-growth table.stack thead{position:static;width:auto;height:auto;overflow:visible;clip:auto}
body[data-screen=reports] .rep-growth table.stack tbody{display:table-row-group;width:auto}
body[data-screen=reports] .rep-growth table.stack tr{display:table-row;width:auto;border:0;padding:0;margin:0}
body[data-screen=reports] .rep-growth table.stack th,body[data-screen=reports] .rep-growth table.stack td{display:table-cell;width:auto;padding:8px 4px;border-bottom:1px solid var(--c-line)}
body[data-screen=reports] .rep-growth table.stack tr>*::before,body[data-screen=reports] .rep-growth table.stack tr>*::after{content:none;display:none}
.repitem .ttl{margin-left:auto;font-variant-numeric:tabular-nums;font-size:20px;font-weight:500}
.repm details summary{display:inline;font:400 15px/1.5 var(--f-text);color:var(--c-text);text-decoration:underline;text-underline-offset:4px;min-height:0;cursor:pointer}
}
/* ---- Sign-in only (Nov 4 2026). Navy ground, mint the only accent, no card, no illustration. ---- */
.signin{width:min(400px,100%);margin:0 auto;padding:72px 0 48px}
.signin .wordmark{display:flex;align-items:center;gap:10px;margin:0 0 48px;font:500 20px/1 var(--f-display);font-stretch:106%;letter-spacing:-.02em;color:var(--c-text)}
.signin .wordmark:not(:has(img))::before{content:"";width:28px;height:28px;background:url(/icon.svg) center/contain no-repeat;flex:none}
.signin h1{display:block;font:500 32px/1.15 var(--f-display);font-stretch:106%;letter-spacing:-.02em;margin:0 0 24px;color:var(--c-text)}
.signin form{margin:0;padding:0;background:transparent;border:0;box-shadow:none}
.signin label{display:block;margin:16px 0 6px;font:500 15px/1.3 var(--f-text);color:var(--c-text)}
.signin input{width:100%;font-family:var(--f-text)}
.signin .btn{width:100%;margin-top:24px}
.signin p.small{margin:20px 0 0}
.signin .form-err{display:flex;align-items:flex-start;gap:8px;margin:16px 0 0;color:var(--c-danger);font:500 15px/1.4 var(--f-text)}
.signin .form-err svg{flex:none;margin-top:1px}
.signin input[aria-invalid=true]{border-color:var(--c-line-ui)}
.signin a:focus-visible,.signin input:focus-visible,.signin button:focus-visible,.langglobe:focus-visible{outline:2px solid var(--c-mint);outline-offset:3px}
@media (max-width:599px){.signin{padding:40px 4px 32px}.signin .wordmark{margin-bottom:36px}.signin h1{font-size:28px}}
@media (min-width:900px){main:has(.signin){min-height:100vh;box-sizing:border-box;justify-content:center;padding-top:24px;padding-bottom:max(10vh,152px)}.signin{padding:0}}
.signin{position:relative;z-index:1}
.signin .pwwrap{position:relative;display:block}
.signin .pwwrap input{padding-right:52px}
.signin .pwtoggle{position:absolute;right:2px;top:50%;transform:translateY(-50%);width:44px;height:44px;min-width:44px;min-height:44px;padding:0;margin:0;border:0;border-radius:8px;background:transparent;box-shadow:none;color:var(--c-text-2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.signin .pwtoggle[aria-pressed=true] .pwslash{display:none}
.signin-horizon{position:fixed;left:0;right:0;bottom:0;width:100%;height:120px;opacity:.18;pointer-events:none;z-index:0;display:block}
@media (max-width:899px){.signin-horizon{height:72px}main:has(.signin){padding-bottom:104px}}