/* Live commitments board — an unlisted page meant for a TV at events.
   The groups are equal columns; a column with more names than fit scrolls through
   them continuously (js/live.js), the others stay still. The page never scrolls. */
html,body{margin:0;height:100%}
body{background:#061427;color:#F1F4F8;font-family:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;height:100vh;overflow:hidden;position:relative}
*{box-sizing:border-box}
.disp{font-family:'Archivo','Helvetica Neue',system-ui,sans-serif}
.mono{font-family:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace}
.bar{position:fixed;top:0;left:0;right:0;height:8px;display:flex;z-index:3}
.bar span{flex:1}
.grid-bg{position:fixed;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:48px 48px;pointer-events:none}

/* header: one row */
.top{position:relative;z-index:2;flex:none;display:flex;align-items:center;gap:clamp(20px,2.5vw,48px);padding:clamp(24px,2.6vw,40px) clamp(24px,3vw,56px) clamp(14px,1.6vw,24px)}
.brand{display:flex;align-items:center;gap:14px;flex:none;color:inherit;text-decoration:none}
.brand img{width:clamp(44px,3.2vw,60px);height:auto;display:block}
.wm{display:flex;flex-direction:column;gap:5px;line-height:1}
.wm .disp{font-size:clamp(14px,1.15vw,20px);font-weight:800;font-stretch:112%;letter-spacing:.02em}
.wm .mono{font-size:clamp(9px,.7vw,11px);letter-spacing:.3em;color:#A8B5C7}
.headline{flex:1;margin:0;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;line-height:1;font-weight:800;font-stretch:112%;letter-spacing:-.01em;text-transform:uppercase}
.stats{display:flex;align-items:baseline;gap:clamp(16px,1.8vw,36px)}
.stat{display:flex;align-items:baseline;gap:.3em}
.sep{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35);align-self:center}
.tail{font-size:clamp(10px,.8vw,14px);font-weight:500;letter-spacing:.22em;color:#A8B5C7}
.count{font-size:clamp(40px,5vw,88px);color:#F2B134;font-variant-numeric:tabular-nums}
.count.bump{animation:bump .6s cubic-bezier(.16,1,.3,1)}
@keyframes bump{30%{transform:scale(1.1)}}
.count-label{font-size:clamp(16px,1.8vw,32px);color:#F1F4F8;white-space:nowrap}
.live{display:inline-flex;align-items:center;gap:10px;height:38px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#DCE3EC;flex:none}
.live .dot{width:10px;height:10px;border-radius:50%;background:#3C8C4B;box-shadow:0 0 0 0 rgba(60,140,75,.7);animation:pulse 2s ease-out infinite}
.live.stale .dot{background:#F47C20;animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(60,140,75,.7)}70%{box-shadow:0 0 0 12px rgba(60,140,75,0)}100%{box-shadow:0 0 0 0 rgba(60,140,75,0)}}

/* body: the groups fill whatever height is left */
main{position:relative;z-index:2;flex:1;min-height:0;display:flex;flex-direction:column;padding:0 clamp(24px,3vw,56px) clamp(16px,1.8vw,28px)}
.status{margin:0 0 10px;font-size:15px;color:#F47C20;flex:none}
.empty{margin:auto;font-size:clamp(20px,2.2vw,36px);color:#8FA0B5;text-align:center}
.groups{flex:1;min-height:0;display:flex;gap:clamp(12px,1.2vw,20px);align-items:stretch;--org:clamp(18px,1.3vw,26px)}
.groups:empty{display:none}
.group{flex:1 1 0;min-width:0;display:flex;flex-direction:column;border-radius:20px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.045);padding:clamp(14px,1.4vw,24px) clamp(14px,1.4vw,24px) clamp(10px,1vw,16px);border-top:4px solid var(--c,#F2B134);overflow:hidden}
.group h2{flex:none;margin:0 0 10px;display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:clamp(11px,.85vw,15px);letter-spacing:.14em;text-transform:uppercase;color:var(--c,#F2B134);font-weight:600;line-height:1.25}
.group h2 .n{font-size:clamp(18px,1.6vw,28px);letter-spacing:0;color:#F1F4F8;font-family:'Archivo','Helvetica Neue',sans-serif;font-weight:800}
.group ul{flex:1;min-height:0;list-style:none;margin:0;padding:0;overflow:hidden;position:relative}
.group .list{display:flex;flex-direction:column;gap:2px;will-change:transform}
.group.scrolls .list{padding-bottom:1.2em}
.group li{display:flex;align-items:baseline;gap:10px;padding:.28em .4em;border-radius:10px;font-size:var(--org);line-height:1.18;font-weight:700;overflow-wrap:anywhere}
.group li::before{content:"";width:.28em;height:.28em;border-radius:50%;background:var(--c,#F2B134);flex:none;transform:translateY(-.1em)}
.group li .x{font-size:.72em;font-weight:600;color:var(--c,#F2B134);font-variant-numeric:tabular-nums;white-space:nowrap}
.group li.bump{animation:bumpRow 1.1s cubic-bezier(.16,1,.3,1) both}
.group li.bump .x{display:inline-block;animation:bump .7s cubic-bezier(.16,1,.3,1)}
@keyframes bumpRow{0%{background:rgba(242,177,52,.32)}100%{background:rgba(242,177,52,0)}}
.group li.new{animation:arrive 1.1s cubic-bezier(.16,1,.3,1) both}
@keyframes arrive{0%{opacity:0;transform:translateY(-12px);background:rgba(242,177,52,.35)}40%{opacity:1;background:rgba(242,177,52,.28)}100%{background:rgba(242,177,52,0)}}
.group.scrolls ul::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.4em;background:linear-gradient(180deg,rgba(11,29,54,0),rgba(11,29,54,.96));pointer-events:none;z-index:1}

.foot a{color:inherit;text-decoration:none}
.foot a:hover{color:#F2B134}
.foot{position:relative;z-index:2;flex:none;display:flex;justify-content:space-between;gap:24px;padding:12px clamp(24px,3vw,56px) 16px;border-top:1px solid rgba(255,255,255,.1);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8FA0B5}

@media (max-width: 1100px){
body{height:auto;min-height:100vh;overflow:auto}
.top{flex-wrap:wrap}
.headline{flex-basis:100%;align-items:flex-start;order:3}
.groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));flex:none}
.group{min-height:0}
.group ul{overflow:visible}
}
@media (max-width: 640px){.groups{grid-template-columns:1fr}.foot{flex-direction:column;gap:6px}.count-label{white-space:normal}}
@media (prefers-reduced-motion: reduce){.live .dot,.count.bump,.group li.new,.group li.bump,.group li.bump .x{animation:none}}