/* Additional controls use the same Arial, ink, white and Klein vocabulary. */
.vDialog{box-sizing:border-box;width:min(540px,calc(100vw - 32px));max-height:88dvh;padding:30px;border:1px solid #0a0a0a;background:#fff;color:#0a0a0a;font:15px/1.5 Arial,sans-serif;overflow:auto;margin:auto;border-radius:0}
.vDialog::backdrop{background:rgba(10,10,10,.24)}.vDialog h1{font:400 42px/1.02 'Arial Narrow','Helvetica Neue',Arial,sans-serif;margin:25px 0 10px;letter-spacing:.005em}.vDialog h2{font:400 26px/1.15 'Arial Narrow','Helvetica Neue',Arial,sans-serif;letter-spacing:.005em}.vDialog p{line-height:1.6}.vDialog button,.vDialog input,.vDialog a.btn{font:13px Arial;border:1px solid #ddd;background:white;color:#0a0a0a;border-radius:0;padding:12px;cursor:pointer}.vDialog button:hover{border-color:#002fa7;color:#002fa7}.vDialog button:focus-visible,.vDialog input:focus-visible{outline:2px solid #002fa7;outline-offset:3px}.vHead{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:10px;letter-spacing:1.1px}.vHead button{font-size:11px;letter-spacing:0;border:0}.vChoices{display:flex;gap:7px;flex-wrap:wrap;margin:15px 0}.vChoices button{flex:1;min-width:100px}.vDialog .foot{font:11px/1.5 Arial;color:#777;margin:20px 0 0}.vDialog .btn-solid{background:#002fa7;color:white;border-color:#002fa7}.vDialog .btn-solid:hover{color:white}.vDialog[open]{display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
#vStatus{position:fixed;z-index:12;left:24px;bottom:22px;background:#fff;border:1px solid #ddd;display:flex;align-items:center;padding-left:13px;font:11px Arial;gap:14px}#vPoints{background:white;color:#002fa7;font:11px Arial;border:0;border-left:1px solid #ddd;padding:13px;cursor:pointer}#vClock{white-space:nowrap}#vPeers{color:#002fa7;white-space:nowrap}#vPeers[hidden]{display:none}.roomNow{border-left:2px solid #002fa7;padding-left:14px;font-size:13px!important}
#meditationVisual{height:145px;display:grid;place-items:center}#meditationVisual[hidden]{display:none}#meditationOrb{width:72px;height:72px;border:1px solid #002fa7;border-radius:50%;background:#f4f7ff}#activityMeter{width:100%;height:5px;border:0;accent-color:#002fa7}#activityMeter::-webkit-progress-bar{background:#eee}#activityMeter::-webkit-progress-value{background:#002fa7}#activityResult{min-height:28px;color:#002fa7}.personRow{display:block;width:100%;border:0!important;border-bottom:1px solid #ddd!important;padding:17px 0!important;text-align:left}.personRow strong{display:block;font-size:17px;font-weight:400}.personRow span{display:block;color:#777;line-height:1.5;margin-top:5px;font-size:12px}
#rideHUD{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:14;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #ddd;padding:9px;font:12px Arial}#rideHUD[hidden]{display:none}#rideHUD button{font:12px Arial;padding:9px;background:#fff;border:1px solid #ddd;white-space:nowrap}#visitHour{width:100%;accent-color:#002fa7}#visitDay{font:14px Arial;padding:7px;border:1px solid #ddd;background:white}#hourLabel{font-size:13px;margin-bottom:9px}#notesVeil .card{max-height:88dvh;overflow:auto}#gradyPlayer iframe{border:0;width:100%;height:152px;margin-top:15px}.top{gap:7px}
@media(max-width:600px){.vDialog{padding:22px;max-height:86dvh}.vDialog h1{font-size:35px}#vStatus{left:12px;bottom:12px}.top{top:70px!important;left:12px;right:12px;justify-content:flex-start}.top .pill{font-size:11px;padding:10px 12px}.zone{max-width:52vw;overflow:hidden;text-overflow:ellipsis}.prompt{bottom:190px!important;max-width:calc(100vw - 36px)}#rideHUD{bottom:145px;width:calc(100vw - 24px);box-sizing:border-box;justify-content:space-between;gap:6px}#rideProgress{font-size:10px}}
@media(max-height:500px){.vDialog{max-height:94dvh;padding:18px}.vDialog h1{font-size:30px;margin-top:14px}#meditationVisual{height:65px}#meditationOrb{width:38px;height:38px}.top{top:14px!important;left:auto;right:14px}.prompt{bottom:90px!important}#vStatus{bottom:8px}#rideHUD{bottom:8px;left:48%;width:auto}}
.agendaRow{display:flex;gap:14px;border-top:1px solid #ddd;padding:14px 0;font:12px/1.45 Arial;align-items:flex-start}.agendaRow div{flex:1}.agendaRow b{font-weight:400;font-size:14px}.agendaRow small{display:block;color:#777;margin-top:5px}.agendaRow button{background:white;border:1px solid #ddd;padding:7px;font:11px Arial;cursor:pointer}#agendaTitle{font:400 28px/1.1 'Arial Narrow','Helvetica Neue',Arial,sans-serif;letter-spacing:.005em;margin:30px 0 12px}

@media(pointer:coarse){#vStatus{top:83px;bottom:auto;left:22px;gap:7px;padding-left:8px;font-size:10px}#vPoints{padding:9px;font-size:10px}}
@media(pointer:coarse) and (max-height:500px){#vStatus{top:68px;bottom:auto}}

@media(pointer:fine){body.riding #prompt{bottom:82px}}
/* The board keeps its own card. */
.community{width:min(640px,calc(100vw - 32px));max-height:85dvh;overflow:auto;color:#0a0a0a;background:white}
.community button,.community input{font:inherit;border:1px solid #ddd;background:#fff;color:#0a0a0a;padding:10px;border-radius:0}
.community button{cursor:pointer}.community button:disabled{opacity:.4;cursor:default}
.worldBoardTable small{display:block;color:#777;font-size:11px;margin-top:5px}
.worldTableWrap{overflow-x:auto}.worldBoardTable{border-collapse:collapse;width:100%;font-size:13px}.worldBoardTable th,.worldBoardTable td{text-align:left;padding:12px 6px;border-bottom:1px solid #eee;vertical-align:top}.worldBoardTable tr.me td{background:rgba(0,47,167,.05)}
@media(max-width:600px){.top{max-width:calc(100vw - 28px);flex-wrap:wrap;gap:4px!important;right:14px!important}.top .pill{padding:9px 10px!important;font-size:10px}.community{padding:20px!important}.worldBoardTable th,.worldBoardTable td{padding:10px 4px}.community .vChoices{flex-wrap:wrap}}
#vPoints::before{content:'Practice · ';color:#666}

/* ------------------------------------------ the chat panel, the campus's
   Copied from explore.html's talk section, class for class, so the village
   has the same panel (Arlin, 12 Sep). A side rail on a desktop, a bottom
   sheet on a phone, and the world keeps running behind it. */
.pill .badge{display:inline-block;min-width:16px;height:16px;line-height:16px;padding:0 4px;margin-left:8px;background:var(--klein);color:#fff;font-size:9px;letter-spacing:.06em;text-align:center;vertical-align:1px}
#talkPanel{position:fixed;top:0;right:0;bottom:0;width:min(330px,88vw);background:#fff;border-left:1px solid var(--border);z-index:44;display:none;flex-direction:column;font-family:Arial,Helvetica,sans-serif}
#talkPanel .talkHead{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border);flex:none}
#talkKick{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--klein);cursor:pointer;padding:8px 0}
#talkClose{background:none;border:none;cursor:pointer;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--ink-3);padding:12px 2px 12px 22px}
#talkFeed{flex:1;overflow-y:auto;padding:12px 16px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.tRow{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;border-bottom:1px solid var(--border);padding:12px 0;font:inherit;color:var(--ink)}
.tRow .tName{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--klein)}
.tRow .tLast{font-size:12px;color:var(--ink-2);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tRow .tCount{margin-left:auto;flex:none;background:var(--klein);color:#fff;font-size:9px;letter-spacing:.06em;min-width:16px;height:16px;line-height:16px;text-align:center;padding:0 4px}
.tRow.pin{border-left:2px solid var(--klein);background:rgba(0,47,167,0.045);padding:12px 12px;margin-bottom:14px}
.tRow.pin .tLast{color:var(--ink)}
.tHead{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin:16px 0 2px}
.tHead:first-child{margin-top:0}
#talkWho{flex:none;border-bottom:1px solid var(--border);padding:10px 16px 12px;display:none;background:#fff}
#talkWho.on{display:block}
#talkWho .wName{display:flex;align-items:center;gap:8px;width:100%;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--klein);background:none;border:0;padding:0;cursor:pointer;text-align:left}
#talkWho .wName .wChev{margin-left:auto;color:var(--ink-3);font-size:9px}
#talkWho .wWork{font-size:12px;color:var(--ink-2);margin-top:3px}
#talkWho .wBio,#talkWho .wMeta{display:none}
#talkWho.open .wBio{display:block;font-size:13px;line-height:1.5;color:var(--ink);margin-top:9px}
#talkWho.open .wMeta{display:block;font-size:11px;line-height:1.6;color:var(--ink-3);margin-top:7px}
#talkWho .wMeta a{color:var(--klein)}
#talkFoot{border-top:1px solid var(--border);padding:10px 16px 14px;flex:none;background:#fff}
#talkFoot .talkRow{display:flex;gap:10px;align-items:flex-end}
#talkIn{flex:1;min-width:0;border:none;border-bottom:1px solid rgba(10,10,10,.16);padding:10px 0;font-size:16px;font-family:inherit;color:var(--ink);background:transparent;outline:none;border-radius:0}
#talkIn:focus{border-bottom-color:var(--klein)}
#talkSend{flex:none;background:var(--klein);color:#fff;border:none;border-radius:0;font-family:var(--heading);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:12px 18px;cursor:pointer}
#talkSignin{background:none;border:none;cursor:pointer;padding:10px 0;font-size:16px;color:var(--klein);font-family:inherit}
@media (max-width:520px){
  #talkPanel{top:auto;left:0;right:0;bottom:0;width:100%;height:min(62dvh,520px);border-left:none;border-top:1px solid var(--border)}
  #talkFoot{padding:10px 16px calc(14px + env(safe-area-inset-bottom))}
}
/* the fight with Jesse: two bars and a clock in a white strip, the moves
   under them, and one word in the middle of the screen when something
   lands. Not a card: the two of them on the grass are the picture. */
#fightHUD{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:14;width:min(460px,calc(100vw - 28px));background:#fff;border:1px solid var(--border);padding:12px 14px 14px;font:12px Arial}
#fightHUD[hidden]{display:none}
#fightHUD .fightBars{display:flex;align-items:center;gap:12px}
#fightHUD .fightSide{flex:1}
#fightHUD .fightSide.his{text-align:right}
#fightHUD .fightName{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
#fightHUD .fightBar{height:8px;border:1px solid var(--ink);background:#fff;position:relative}
#fightHUD .fightBar i{position:absolute;top:0;bottom:0;left:0;background:var(--klein);width:100%;transition:width .12s}
#fightHUD .fightSide.his .fightBar i{left:auto;right:0;background:var(--ink)}
#fightClock{font:400 30px/1 'Arial Narrow','Helvetica Neue',Arial,sans-serif;min-width:44px;text-align:center;color:var(--ink);letter-spacing:0}
#fightLine{margin:10px 0 10px;font-size:13px;line-height:1.4;color:var(--ink-2);min-height:18px}
#fightHUD .fightKeys{display:flex;gap:8px}
#fightHUD .fightKeys button{flex:1;font:13px Arial;padding:13px 8px;background:#fff;border:1px solid var(--border);color:var(--ink);border-radius:0;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#fightHUD .fightKeys button small{display:block;font-family:var(--mono);font-size:8px;letter-spacing:.14em;color:var(--ink-3);margin-top:4px;text-transform:uppercase}
#fightHUD .fightKeys button.on{border-color:var(--klein);color:var(--klein);box-shadow:inset 0 0 0 1px var(--klein)}
#fightHUD .fightKeys button:not(:disabled):hover{border-color:var(--klein);color:var(--klein)}
#fightOut{margin-top:10px;font:11px Arial;padding:6px 0;background:none;border:0;color:var(--ink-3);cursor:pointer}
#fightOut .key{display:inline-block;border:1px solid var(--border);padding:0 5px;margin-left:4px;font-family:var(--mono);font-size:9px}
#fightCue{position:fixed;left:0;right:0;top:30%;text-align:center;z-index:15;pointer-events:none;font:400 88px/1 'Arial Narrow','Helvetica Neue',Arial,sans-serif;color:var(--ink);letter-spacing:0;opacity:0;transform:translateY(8px) scale(.94);transition:opacity .08s,transform .12s}
#fightCue.show{opacity:1;transform:none}
@media (pointer:coarse){#fightHUD .fightKeys button small,#fightOut .key{display:none}#fightHUD .fightKeys button{padding:16px 8px;font-size:15px}#fightHUD{bottom:calc(14px + env(safe-area-inset-bottom))}#fightCue{font-size:58px;top:26%}}
.card #gradyMusic{margin:0 0 16px}.card #gradyPlayer iframe{width:100%;height:152px;border:0;margin-top:10px}

.coffeeHUD{position:fixed;z-index:35;left:50%;bottom:30px;transform:translateX(-50%);display:flex;align-items:center;gap:24px;background:#fff;color:#0a0a0a;padding:16px 20px;border:1px solid #ddd;font:14px Arial;}
.coffeeHUD[hidden]{display:none}.coffeeHUD button{background:#fff;border:1px solid #ddd;color:#0a0a0a;font:12px Arial;padding:10px;cursor:pointer}
#pumpBtn{touch-action:none}#pumpBtn.on{background:#002fa7;color:white}
@media(pointer:coarse){.coffeeHUD{bottom:130px;gap:12px;min-width:260px}.coffeeHUD button{min-height:44px}}
@media(max-width:600px){#rideHUD{flex-wrap:wrap}#rideProgress{flex-basis:100%}#rideHUD button{flex:1;min-height:44px}}

/* The desk is an instrument beside the player, with real buttons for every step. */
.studioDialog{position:fixed;inset:auto 20px 20px auto;margin:0;width:min(580px,calc(100vw - 40px));max-width:none;max-height:calc(100dvh - 40px);overflow:auto;padding:24px;border:1px solid #ddd;background:#fff;color:#0a0a0a;font:14px/1.5 Arial,sans-serif;border-radius:0;box-shadow:none}
.studioDialog::backdrop{background:transparent}
.studioDialog header{display:flex;justify-content:space-between;align-items:start;gap:12px}
.studioDialog small{font-size:9px;letter-spacing:.14em}
.studioDialog h2{font:400 32px/1.05 'Arial Narrow',Arial,sans-serif;margin:9px 0 0}
.studioDialog button{font:12px Arial,sans-serif;border:1px solid #ddd;background:#fff;color:#0a0a0a;border-radius:0;min-height:44px;padding:8px 10px;cursor:pointer;touch-action:manipulation}
.studioDialog button:focus-visible,.studioImport:focus-within{outline:2px solid #002fa7;outline-offset:2px}
.studioDialog button:hover{border-color:#002fa7}
.studioIntro,.studioHelp{font-size:12px;color:#666;margin:16px 0}
.studioTempo{display:flex;align-items:center;gap:12px;border-top:1px solid #ddd;padding:12px 0}
.studioTempo label{white-space:nowrap;font-size:12px}.studioTempo input{min-width:0;flex:1;accent-color:#002fa7;min-height:44px}.studioTempo span{font-size:10px;color:#666}
.studioTrack{display:grid;grid-template-columns:42px 1fr;align-items:center;gap:10px;margin:8px 0}.studioTrack>span{font-size:12px}
.studioSteps{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}.studioSteps button{padding:0;position:relative;min-width:0}
.studioSteps button.on{background:#002fa7;color:white;border-color:#002fa7}.studioSteps button.beat:after{content:'';position:absolute;bottom:3px;left:25%;right:25%;height:2px;background:currentColor}
.studioActions{display:flex;gap:8px;flex-wrap:wrap}.studioActions [data-play]{background:#0a0a0a;color:#fff;border-color:#0a0a0a;min-width:76px}.studioActions [data-play]:hover{background:#002fa7}
.studioStatus{font-size:12px;min-height:36px;color:#555;margin:12px 0}
.studioDialog footer{border-top:1px solid #ddd;padding-top:10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:10px;color:#777}
.studioDialog footer button{border:0;padding:0;color:#002fa7;font-size:11px}.studioImport{position:relative;color:#002fa7;min-height:44px;display:flex;align-items:center;font-size:11px;cursor:pointer}.studioImport input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}
body.at-studio #prompt,body.at-studio #stick,body.at-studio #runBtn{visibility:hidden}
@media(max-width:620px){.studioDialog{inset:auto 8px max(8px,env(safe-area-inset-bottom)) 8px;width:auto;padding:16px;max-height:calc(100dvh - 24px)}.studioDialog h2{font-size:27px}.studioTrack{grid-template-columns:32px 1fr;gap:6px}.studioSteps{grid-template-columns:repeat(4,minmax(0,1fr))}.studioSteps button{min-height:44px}.studioIntro{display:none}.studioHelp{margin:10px 0;font-size:11px}.studioTempo{padding:4px 0;margin-top:12px}.studioTrack{margin:6px 0}.studioDialog header [data-close]{font-size:11px;white-space:nowrap}.studioDialog footer{gap:8px}.studioActions{gap:6px}.studioActions button{font-size:11px}.studioStatus{min-height:0}.studioTrack:nth-child(even){border-top:1px solid #eee;padding-top:6px}}

.studioSteps button:before{content:attr(data-number);position:absolute;top:3px;left:4px;font-size:8px;opacity:.6}.studioSteps button:nth-child(5){border-left-width:2px}