:root {
  --ink: #1d2433; --ink-soft: #566074; --paper: rgba(252, 249, 243, 0.94); --paper-solid: #fcf9f3; --line: rgba(29, 36, 51, 0.1);
  --navy: #08488f; --navy-deep: #0b2c55; --gold: #fcbc04; --red: #d94b3f; --green: #2e9a63; --amber: #e39b21;
  --email: #7a4fb0; --census: #2e9a63; --quote: #2f6fb5; --deck: #d69b12; --check: #e0822c; --reject: #c8413b; --teal: #16a894;
  --shadow: 0 12px 32px rgba(30, 24, 18, 0.16), 0 2px 6px rgba(30, 24, 18, 0.1);
  --r: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #f3dcc3; font-family: Inter, system-ui, sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; user-select: none; }
canvas#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; outline: none; }
.hidden { display: none !important; }
kbd { font: 700 11px/1 Inter, sans-serif; background: #fff; border: 1px solid rgba(29, 36, 51, 0.18); border-bottom-width: 2px; border-radius: 6px; padding: 4px 6px; color: var(--ink); white-space: nowrap; }
b { font-weight: 700; }

/* loader */
#loader { position: fixed; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at center, #fbe7cf 0%, #f1c9a5 100%); z-index: 50; transition: opacity .8s ease; }
#loader.gone { opacity: 0; pointer-events: none; }
.loader-inner { text-align: center; }
.loader-title { font-family: Fraunces, serif; font-weight: 800; font-size: 34px; letter-spacing: -0.02em; color: var(--navy-deep); }
.loader-bar { width: 220px; height: 4px; border-radius: 4px; background: rgba(11, 44, 85, .12); margin: 18px auto 10px; overflow: hidden; }
.loader-bar i { display: block; height: 100%; width: 40%; background: var(--navy); border-radius: 4px; animation: load 1.2s ease-in-out infinite; }
@keyframes load { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
.loader-note { font-size: 13px; color: var(--ink-soft); }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud > * { pointer-events: auto; }
.date-card { position: absolute; top: 18px; left: 18px; display: flex; gap: 12px; align-items: stretch; background: var(--paper); border-radius: var(--r); box-shadow: var(--shadow); padding: 10px 14px 10px 10px; backdrop-filter: blur(6px); }
.dc-cal { width: 54px; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--line); text-align: center; display: flex; flex-direction: column; }
.dc-mon { background: var(--red); color: #fff; font: 800 11px/1 Inter; letter-spacing: .12em; padding: 5px 0 4px; }
.dc-day { font: 800 24px/1 Fraunces, serif; padding: 5px 0 6px; color: var(--ink); }
.dc-body { display: flex; flex-direction: column; justify-content: center; min-width: 150px; }
.dc-week { font: 700 14px/1.2 Inter; }
.dc-bar { height: 5px; border-radius: 5px; background: rgba(29, 36, 51, 0.1); margin: 6px 0 5px; overflow: hidden; }
.dc-bar i { display: block; height: 100%; background: linear-gradient(90deg, #e0822c, #d94b3f 55%, #2f3f73); border-radius: 5px; transition: width .3s linear; }
.dc-note { font: 500 12px/1 Inter; color: var(--ink-soft); }

.clients { position: absolute; top: 18px; right: 18px; width: 318px; background: var(--paper); border-radius: var(--r); box-shadow: var(--shadow); padding: 10px 12px 8px; backdrop-filter: blur(6px); }
.cl-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.cl-head span:first-child { font: 800 13px/1 Fraunces, serif; letter-spacing: .01em; }
.cl-kept { font: 600 11px/1 Inter; color: var(--ink-soft); }
.cl-row { display: grid; grid-template-columns: 9px 1fr 34px 52px 92px; align-items: center; gap: 7px; padding: 3.5px 0; border-top: 1px solid var(--line); font-size: 12px; }
.cl-row:first-child { border-top: 0; }
.cl-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.cl-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-bar { height: 6px; background: rgba(29, 36, 51, 0.09); border-radius: 6px; overflow: hidden; }
.cl-bar i { display: block; height: 100%; background: var(--green); border-radius: 6px; transition: width .35s ease, background .3s; }
.cl-row.warn .cl-bar i { background: var(--amber); }
.cl-row.danger .cl-bar i { background: var(--red); }
.cl-row.danger .cl-name { color: var(--red); }
.cl-st { text-align: right; font-size: 10.5px; white-space: nowrap; }
.cl-st .ok { color: #9a6f00; } .cl-st .lost { color: #8b93a3; } .cl-st .meet { color: var(--navy); } .cl-st .deck { color: #b07e0a; }
.cl-row.st-renewed .cl-bar i { background: linear-gradient(90deg, #f5c542, #fcbc04); }
.cl-row.st-lost { opacity: .55; } .cl-row.st-lost .cl-name { text-decoration: line-through; color: var(--ink-soft); }
.cl-row.hit { animation: hit .6s ease; }
@keyframes hit { 0% { background: rgba(217, 75, 63, 0.25); } 100% { background: transparent; } }

.me { position: absolute; left: 18px; bottom: 18px; background: var(--paper); border-radius: var(--r); box-shadow: var(--shadow); padding: 11px 14px; min-width: 250px; backdrop-filter: blur(6px); }
.me-row { display: flex; align-items: center; gap: 10px; }
.me-label { font: 700 12px/1 Inter; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .08em; }
.energy { flex: 1; height: 10px; border-radius: 10px; background: rgba(29, 36, 51, 0.1); overflow: hidden; }
.energy i { display: block; height: 100%; border-radius: 10px; background: linear-gradient(90deg, #2e9a63, #6cc38a); transition: width .25s linear; }
.energy.mid i { background: linear-gradient(90deg, #e39b21, #f2c14e); }
.energy.low i { background: linear-gradient(90deg, #c8413b, #e36a5f); animation: pulse .8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }
.me-carry { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.me-empty { font-size: 12px; color: var(--ink-soft); }
.me-full { flex-basis: 100%; contain: inline-size; font: 700 11.5px/1.2 Inter; color: #b3261e; }
.carry-chip { display: inline-flex; align-items: center; gap: 5px; font: 600 11.5px/1 Inter; padding: 5px 8px 5px 6px; border-radius: 8px; color: #fff; }
.carry-chip svg { width: 14px; height: 14px; }
.carry-chip.late { box-shadow: 0 0 0 2px var(--red); }
.c-email { background: var(--email); } .c-census { background: var(--census); } .c-quote { background: var(--quote); } .c-deck { background: var(--deck); } .c-check { background: var(--check); } .c-reject { background: var(--reject); }

.team { position: absolute; right: 18px; bottom: 18px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: 420px; }
.btn-staff { display: flex; align-items: center; gap: 10px; border: 0; cursor: pointer; background: var(--navy-deep); color: #fff; font: 700 14px/1 Inter; padding: 12px 14px 12px 18px; border-radius: 12px; box-shadow: var(--shadow); transition: transform .15s ease, background .2s; }
.btn-staff:hover { transform: translateY(-1px); background: var(--navy); }
.btn-staff kbd { background: rgba(255, 255, 255, 0.14); color: #fff; border-color: rgba(255, 255, 255, 0.25); }
.team-status { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.ts { display: inline-flex; align-items: center; gap: 5px; background: var(--paper); border-radius: 999px; padding: 5px 10px 5px 7px; font: 600 11.5px/1 Inter; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.ts svg { width: 14px; height: 14px; }
.ts.agent { color: #0f7d6e; } .ts.agent.pending { color: #a8680a; }

.prompt { position: absolute; left: 50%; bottom: 22px; transform: translate(-50%, 12px); opacity: 0; display: flex; align-items: center; gap: 9px; background: rgba(20, 26, 40, 0.86); color: #fff; padding: 10px 16px; border-radius: 12px; font: 600 14px/1 Inter; transition: opacity .15s, transform .15s; white-space: nowrap; pointer-events: none !important; box-shadow: 0 8px 22px rgba(0,0,0,.2); }
.prompt.show { opacity: 1; transform: translate(-50%, 0); }
.prompt kbd { background: var(--gold); border-color: #d9a000; color: #2a1f00; }
.prompt kbd.held { animation: held .5s ease-in-out infinite alternate; }
@keyframes held { to { transform: translateY(1px); background: #ffd24a; } }
.prompt .p-dim { opacity: .75; } .prompt .p-bad { color: #ffb4a8; }
.prompt .sep { width: 1px; height: 16px; background: rgba(255,255,255,.25); margin: 0 3px; }

.toasts { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 7px; pointer-events: none !important; width: min(560px, 60vw); }
.toast { display: flex; align-items: center; gap: 9px; background: var(--paper-solid); padding: 9px 14px; border-radius: 11px; box-shadow: var(--shadow); font: 600 13px/1.3 Inter; animation: tin .35s cubic-bezier(.2,1.4,.4,1); transition: opacity .35s, transform .35s; }
.toast.out { opacity: 0; transform: translateY(-8px); }
.toast .t-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.toast.t-bad { border-left: 4px solid var(--red); }
.toast.t-good { border-left: 4px solid var(--green); }
.toast.t-agent { border-left: 4px solid var(--teal); }
.toast.t-renewed { background: linear-gradient(90deg, #fff6d6, #fffdf6); border-left: 4px solid var(--gold); font-size: 14px; }
.toast.t-lost { background: #fff0ee; border-left: 4px solid var(--red); font-size: 14px; }
@keyframes tin { from { opacity: 0; transform: translateY(-10px) scale(.96); } }

.hint { position: absolute; left: 18px; top: 50%; transform: translate(-24px, -50%); opacity: 0; width: 290px; background: var(--navy-deep); color: #fff; border-radius: var(--r); padding: 13px 16px 14px; box-shadow: var(--shadow); transition: opacity .35s ease, transform .35s ease; pointer-events: none !important; }
.hint.show { opacity: 1; transform: translate(0, -50%); }
.hint-tag { font: 800 10px/1 Inter; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.hint-text { font: 500 14px/1.45 Inter; }
.hint-text b { color: #ffe08a; }
.hint kbd { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.3); }

.icon-btn { position: absolute; top: 96px; left: 18px; width: 36px; height: 36px; border-radius: 10px; border: 0; background: var(--paper); box-shadow: var(--shadow); cursor: pointer; display: grid; place-items: center; color: var(--ink-soft); }
.icon-btn svg { width: 18px; height: 18px; }

/* ---------- world markers ---------- */
#world-ui { position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.wm { position: absolute; left: 0; top: 0; will-change: transform; display: flex; flex-direction: column; align-items: center; }
.wm > * { transform: translate(0, -100%); }
.bubble { position: relative; transform: translate(-50%, -100%) !important; background: var(--paper-solid); border-radius: 12px; box-shadow: 0 6px 16px rgba(30, 24, 18, 0.2); display: flex; align-items: center; gap: 4px; padding: 3px; }
.bubble::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.tag { position: absolute; top: 0; transform: translate(-50%, 6px) !important; font: 700 10.5px/1 Inter; color: #fff; background: rgba(20, 26, 40, 0.72); padding: 3px 6px; border-radius: 6px; white-space: nowrap; }
.bubble .ring { width: 30px; height: 30px; flex: none; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: rgba(29, 36, 51, 0.1); stroke-width: 4; }
.ring-fg { fill: none; stroke: var(--green); stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset .12s linear; }
.u-amber .ring-fg { stroke: var(--amber); } .u-red .ring-fg { stroke: var(--red); }
.ring.prog .ring-fg { stroke: var(--navy); }
.chips { display: flex; gap: 3px; padding-right: 3px; }
.chip { display: inline-flex; align-items: center; gap: 2px; color: #fff; border-radius: 8px; padding: 4px 5px; font: 800 11px/1 Inter; }
.chip svg { width: 14px; height: 14px; }
.bubble.pile { padding: 3px 4px 3px 3px; }
.bubble.pile .ring { margin-right: 1px; }
.wm.late .bubble { box-shadow: 0 0 0 2.5px var(--red), 0 6px 16px rgba(30, 24, 18, 0.25); animation: wob 1s ease-in-out infinite; }
@keyframes wob { 50% { transform: translate(-50%, -100%) scale(1.07) !important; } }
.icon-b { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; }
.icon-b .ring { position: absolute; inset: 3px; width: 34px; height: 34px; }
.icon-b i { width: 18px; height: 18px; display: grid; place-items: center; color: var(--ink); z-index: 1; }
.icon-b i svg { width: 18px; height: 18px; }
.icon-b.ringing { animation: ringing .35s ease-in-out infinite; }
.icon-b.ringing i { color: var(--red); }
@keyframes ringing { 0%, 100% { transform: translate(-50%, -100%) rotate(-7deg) !important; } 50% { transform: translate(-50%, -100%) rotate(7deg) !important; } }
.icon-b.visitor i { color: var(--navy); }
.icon-b.meeting { background: #fff6d6; } .icon-b.meeting i { color: #9a6f00; }
.icon-b.question { background: var(--navy-deep); animation: bob 1s ease-in-out infinite; } .icon-b.question i { color: #fff; }
.icon-b.training i { color: var(--navy); }
.icon-b.handoff { background: #fff6d6; animation: bob 1s ease-in-out infinite; } .icon-b.handoff i { color: #b07e0a; }
.icon-b.setup { background: #fff3dc; animation: bob 1s ease-in-out infinite; } .icon-b.setup i { color: #b06f00; }
@keyframes bob { 50% { transform: translate(-50%, -112%) !important; } }
.icon-b.small { width: 30px; height: 30px; } .icon-b.small .ring { inset: 2px; width: 26px; height: 26px; } .icon-b.small i svg { width: 13px; height: 13px; }
.icon-b.c-email, .icon-b.c-census, .icon-b.c-quote, .icon-b.c-deck, .icon-b.c-check, .icon-b.c-reject { color: #fff; }
.bubble.c-email { background: var(--email); } .bubble.c-census { background: var(--census); } .bubble.c-quote { background: var(--quote); } .bubble.c-deck { background: var(--deck); } .bubble.c-check { background: var(--check); } .bubble.c-reject { background: var(--reject); }
.icon-b.small i, .icon-b.hold i { color: #fff; }
.icon-b.hold { width: 46px; height: 46px; } .icon-b.hold .ring { inset: 3px; width: 40px; height: 40px; }
.icon-b.hold.c-handoff, .icon-b.hold.c-call, .icon-b.hold.c-visitor, .icon-b.hold.c-question, .icon-b.hold.c-present, .icon-b.hold.c-coffee, .icon-b.hold.c-agent { background: var(--navy-deep); }
.icon-b.c-email .ring-fg, .icon-b.c-census .ring-fg, .icon-b.c-quote .ring-fg, .icon-b.c-deck .ring-fg, .icon-b.c-check .ring-fg, .icon-b.c-reject .ring-fg, .icon-b.hold .ring-fg { stroke: #fff; }
.icon-b.hold .ring-bg, .icon-b.small .ring-bg { stroke: rgba(255,255,255,.25); }

/* ---------- screens ---------- */
#screens { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.screen { position: absolute; inset: 0; pointer-events: auto; display: grid; place-items: center; animation: fade .5s ease; }
@keyframes fade { from { opacity: 0; } }
.title-screen { place-items: center start; padding-left: clamp(24px, 7vw, 120px); background: linear-gradient(90deg, rgba(251, 240, 226, 0.92) 0%, rgba(251, 240, 226, 0.55) 38%, rgba(251, 240, 226, 0) 62%); }
.title-card { max-width: 470px; }
.eyebrow { font: 800 12px/1 Inter; letter-spacing: .16em; text-transform: uppercase; color: #b0551f; margin-bottom: 16px; }
.title-card h1 { font: 800 clamp(44px, 6vw, 74px)/0.95 Fraunces, serif; letter-spacing: -0.03em; margin: 0 0 18px; color: var(--navy-deep); font-variation-settings: "opsz" 144; }
.lede { font: 400 17px/1.55 Inter; color: #3b4458; margin: 0 0 24px; }
.name-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; max-width: 360px; }
.name-field span { font: 700 11px/1 Inter; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.name-field input { font: 600 17px/1 Inter; padding: 13px 14px; border-radius: 11px; border: 1.5px solid rgba(29, 36, 51, 0.16); background: rgba(255,255,255,.85); color: var(--ink); outline: none; }
.name-field input:focus { border-color: var(--navy); box-shadow: 0 0 0 4px rgba(8, 72, 143, 0.12); }
.btn-primary { font: 800 16px/1 Inter; background: var(--navy-deep); color: #fff; border: 0; border-radius: 12px; padding: 16px 26px; cursor: pointer; box-shadow: 0 10px 24px rgba(11, 44, 85, 0.3); transition: transform .15s, box-shadow .15s, background .2s; }
.btn-primary:hover:not(:disabled) { transform: translateY(-2px); background: var(--navy); box-shadow: 0 14px 30px rgba(11, 44, 85, 0.35); }
.btn-primary:disabled { opacity: .4; cursor: not-allowed; }
.btn-primary.sm { font-size: 14px; padding: 12px 18px; }
.btn-ghost { font: 700 14px/1 Inter; background: transparent; border: 1.5px solid rgba(29, 36, 51, 0.16); border-radius: 11px; padding: 11px 16px; cursor: pointer; color: var(--ink); }
.btn-ghost:hover { background: rgba(29, 36, 51, 0.05); }
.controls { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 26px; font: 500 13px/1 Inter; color: var(--ink-soft); }
.controls span { display: inline-flex; align-items: center; gap: 4px; }
.controls.compact { margin-top: 18px; justify-content: center; font-size: 12px; }
.made-by { position: absolute; left: clamp(24px, 7vw, 120px); bottom: 26px; font: 500 12px/1 Inter; color: var(--ink-soft); letter-spacing: .02em; }

.panel-screen { background: rgba(24, 20, 16, 0.32); backdrop-filter: blur(3px); }
.panel { width: min(860px, 94vw); background: var(--paper-solid); border-radius: 20px; box-shadow: 0 30px 80px rgba(0,0,0,.3); padding: 22px 24px 24px; animation: pop .35s cubic-bezier(.2,1.3,.4,1); }
.panel.small { width: min(420px, 92vw); text-align: center; }
@keyframes pop { from { transform: scale(.94); opacity: 0; } }
.panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.panel-head h2 { font: 800 26px/1 Fraunces, serif; margin: 0; letter-spacing: -0.01em; }
.panel.small .panel-head { justify-content: center; }
.paused-pill { font: 700 11px/1 Inter; background: rgba(29, 36, 51, 0.07); padding: 5px 9px; border-radius: 99px; color: var(--ink-soft); letter-spacing: .06em; text-transform: uppercase; }
.panel-head .x { margin-left: auto; font: 700 12px/1 Inter; border: 1.5px solid rgba(29, 36, 51, 0.16); background: transparent; border-radius: 9px; padding: 7px 10px; cursor: pointer; color: var(--ink-soft); }
.panel-cols { display: grid; grid-template-columns: 1fr 1.15fr; gap: 16px; }
.sp-col { background: #fff; border-radius: 16px; padding: 18px; box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; }
.sp-col.agents { background: linear-gradient(180deg, #effaf8, #fff 60%); box-shadow: inset 0 0 0 1px rgba(22, 168, 148, 0.2); }
.sp-kicker { font: 800 10.5px/1 Inter; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 7px; }
.sp-col.agents .sp-kicker { color: #0f7d6e; }
.sp-col h3 { font: 800 19px/1.2 Fraunces, serif; margin: 0 0 12px; }
.sp-facts { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 7px; font: 500 13.5px/1.35 Inter; color: #3b4458; }
.sp-facts li { padding-left: 16px; position: relative; }
.sp-facts li::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--navy); opacity: .5; }
.sp-people { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.sp-person { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.sp-person span:last-child { margin-left: auto; color: var(--ink-soft); font-size: 12px; }
.sp-av { width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font: 800 11px/1 Inter; }
.sp-col .btn-primary { margin-top: auto; align-self: flex-start; }
.sp-agents { display: flex; flex-direction: column; gap: 8px; }
.sp-agent { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border-radius: 12px; padding: 11px 12px; box-shadow: inset 0 0 0 1px var(--line); }
.sp-agent b { display: block; font: 700 14px/1.2 Inter; margin-bottom: 3px; }
.sp-agent span { font: 500 12px/1.35 Inter; color: var(--ink-soft); }
.sp-agent.on { box-shadow: inset 0 0 0 1.5px rgba(22, 168, 148, 0.45); }
.btn-sm { font: 700 13px/1 Inter; background: var(--teal); color: #fff; border: 0; border-radius: 9px; padding: 10px 13px; cursor: pointer; white-space: nowrap; }
.btn-sm:hover { filter: brightness(1.08); }
.pill { font: 700 11.5px/1 Inter; padding: 7px 10px; border-radius: 99px; white-space: nowrap; }
.pill.amber { background: #fff1d6; color: #9a5e00; } .pill.teal { background: #d9f5f0; color: #0f7d6e; }
.sp-note { font: 500 12.5px/1.5 Inter; color: var(--ink-soft); margin: 12px 2px 0; }
.pause-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }

.timebar { display: flex; height: 22px; border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.timebar i { display: block; height: 100%; }
.legend { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px 20px; margin: 12px 0 16px; font: 500 13px/1.3 Inter; }
.lg { display: flex; align-items: center; gap: 8px; }
.lg span { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.lg b { margin-left: auto; font-weight: 700; }
.end-clients { margin-bottom: 18px; font: 500 13px/1.3 Inter; }
.end-clients summary { cursor: pointer; font-weight: 700; margin-bottom: 8px; }
.ec { display: grid; grid-template-columns: 10px 1fr auto 70px; gap: 10px; align-items: center; padding: 5px 0; border-top: 1px solid var(--line); }
.ec-s { color: var(--ink-soft); font-size: 12px; } .ec.renewed .ec-s { color: #9a6f00; font-weight: 700; } .ec.lost { opacity: .7; }
.ec-m { text-align: right; font-weight: 700; }

@media (max-width: 900px) {
  .clients { width: 220px; } .cl-row { grid-template-columns: 9px 1fr 34px 44px; } .cl-st { display: none; }
  .panel-cols { grid-template-columns: 1fr; }
  .legend { grid-template-columns: 1fr; }
}

/* ---- practice round ---- */
.title-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.title-sub { margin: 12px 0 0; font: 500 14px/1.4 Inter; color: var(--ink-soft); }
.practice-note { margin: -4px 0 14px; padding: 10px 14px; border-radius: 10px; background: #fff6d6; border-left: 4px solid var(--gold); font: 600 13px/1.4 Inter; color: #5a4300; }
body.practicing .toasts { top: 168px; }
#tut-card { position: fixed; top: 16px; left: 50%; transform: translate(-50%, -12px); width: min(580px, calc(100vw - 32px)); z-index: 15; opacity: 0; pointer-events: none;
  background: var(--navy-deep); color: #fff; border-radius: 16px; padding: 14px 20px 16px; box-shadow: 0 14px 34px rgba(11, 20, 40, 0.35); transition: opacity .3s ease, transform .3s ease, background .3s ease; }
#tut-card.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#tut-card.done { background: #1f6f47; }
.tut-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.tut-tag { font: 800 11px/1 Inter; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
#tut-card.done .tut-tag { color: #c9f2d9; }
.tut-skip { font: 600 12px/1 Inter; color: rgba(255,255,255,.7); background: transparent; border: 1px solid rgba(255,255,255,.25); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.tut-skip:hover { color: #fff; border-color: rgba(255,255,255,.5); }
.tut-title { font: 800 24px/1.15 Fraunces, serif; margin-bottom: 6px; }
.tut-how { font: 500 16px/1.45 Inter; color: #e6ebf5; }
.tut-how kbd { background: var(--gold); border-color: #d9a000; color: #2a1f00; font-size: 13px; }
.tut-check { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: #1f6f47; font-weight: 900; margin-right: 4px; }
.tut-dots { display: flex; gap: 6px; margin-top: 12px; }
.tut-dots i { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,.18); }
.tut-dots i.on { background: var(--gold); }
.tut-dots i.now { background: rgba(252, 188, 4, .55); }
.tut-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.tut-actions .btn-primary { background: var(--gold); color: #2a1f00; box-shadow: none; }
.tut-actions .btn-primary:hover { background: #ffcd33; }
.tut-again { color: #fff; border-color: rgba(255,255,255,.35); }
.tut-again:hover { background: rgba(255,255,255,.08); }
.tut-hud-arrow { position: fixed; z-index: 16; width: 54px; height: 72px; transform: translate(-50%, -100%); pointer-events: none; opacity: 0; transition: opacity .25s; }
.tut-hud-arrow.show { opacity: 1; animation: tutBob .8s ease-in-out infinite alternate; }
.tut-hud-arrow svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 8px rgba(0,0,0,.3)); }
@keyframes tutBob { from { margin-top: -14px; } to { margin-top: 0; } }
.tut-glow { outline: 3px solid var(--gold); outline-offset: 3px; animation: tutGlow 1s ease-in-out infinite alternate; }
@keyframes tutGlow { from { box-shadow: 0 0 0 0 rgba(252, 188, 4, .7); } to { box-shadow: 0 0 0 10px rgba(252, 188, 4, 0); } }
.prompt kbd.dim { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); color: #fff; }

/* ---------- phones & tablets (body.touch, set by touch.js; added 9/28) ---------- */
/* no page zoom on double-tap, no long-press callout, no text selection while holding a button */
html, body { touch-action: manipulation; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
canvas#gl, #hud button { touch-action: none; }
input { user-select: text; -webkit-user-select: text; }
.panel-screen { overflow-y: auto; }

body.touch .date-card { top: calc(10px + env(safe-area-inset-top)); left: calc(10px + env(safe-area-inset-left)); padding: 7px 12px 7px 7px; gap: 9px; cursor: pointer; }
body.touch .dc-cal { width: 40px; border-radius: 8px; }
body.touch .dc-mon { font-size: 9px; padding: 4px 0 3px; }
body.touch .dc-day { font-size: 18px; padding: 4px 0 5px; }
body.touch .dc-body { min-width: 96px; }
body.touch .dc-week { font-size: 12.5px; }
body.touch .dc-bar { margin: 5px 0 4px; }
body.touch .dc-note { font-size: 10.5px; }
.dc-pause { align-self: center; display: flex; gap: 3px; padding: 7px 6px; border-radius: 7px; background: rgba(29, 36, 51, 0.07); }
.dc-pause i { width: 3.5px; height: 12px; border-radius: 2px; background: var(--ink-soft); }
body.touch .icon-btn { top: calc(78px + env(safe-area-inset-top)); left: calc(10px + env(safe-area-inset-left)); }
body.touch .team { top: calc(78px + env(safe-area-inset-top)); left: calc(54px + env(safe-area-inset-left)); right: auto; bottom: auto; flex-direction: row; flex-wrap: wrap; align-items: flex-start; max-width: calc(100vw - 260px); }
body.touch .btn-staff { height: 36px; padding: 0 14px; font-size: 13.5px; border-radius: 10px; }
body.touch .btn-staff kbd { display: none; }
body.touch .team-status { justify-content: flex-start; flex-basis: 100%; }
body.touch .ts { font-size: 10.5px; padding: 4px 8px 4px 6px; }

body.touch .clients { top: calc(10px + env(safe-area-inset-top)); right: calc(10px + env(safe-area-inset-right)); width: 224px; padding: 7px 10px 5px; }
body.touch .cl-head { flex-direction: column; align-items: flex-start; gap: 3px; margin-bottom: 3px; }
body.touch .cl-kept { font-size: 10px; }
body.touch .cl-row { grid-template-columns: 8px 1fr 30px 84px; gap: 5px; padding: 2px 0; font-size: 11px; }
body.touch .cl-st { display: block; font-size: 9.5px; }
body.touch .toasts { top: calc(10px + env(safe-area-inset-top)); width: min(360px, calc(100vw - 480px)); }
body.touch .toast { font-size: 12px; padding: 7px 11px; }

/* the dock: tip, caption and energy card, with the Drop and gold action buttons under the right thumb */
.dock { position: absolute; left: calc(10px + env(safe-area-inset-left)); right: calc(10px + env(safe-area-inset-right)); bottom: calc(10px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr) auto; grid-template-areas: "me cap btns"; align-items: end; gap: 10px; pointer-events: none !important; }
.dock .me { grid-area: me; position: static; min-width: 0; padding: 9px 12px; pointer-events: auto; }
.dock .me-carry { margin-top: 7px; gap: 5px; }
.dock .carry-chip { font-size: 10.5px; }
.dock .prompt { grid-area: cap; position: static; transform: none; justify-self: center; white-space: normal; font: 600 13px/1.3 Inter; padding: 8px 12px; gap: 7px; flex-wrap: wrap; row-gap: 5px; max-width: 100%; }
.dock .prompt:not(.show) { display: none; }
.dock .prompt .sep { height: 12px; }
.p-tag { font: 800 10px/1 Inter; letter-spacing: .08em; text-transform: uppercase; background: var(--gold); color: #2a1f00; padding: 4px 6px; border-radius: 5px; }
.dock .hint { position: absolute; left: 0; top: auto; bottom: calc(100% + 8px); width: min(320px, 100%); transform: translateY(8px); padding: 11px 14px 12px; }
.dock .hint.show { transform: none; }
.dock .hint-text { font-size: 13px; }
.dock-btns { grid-area: btns; display: flex; align-items: flex-end; gap: 12px; pointer-events: none; }

.act { position: relative; width: 96px; height: 96px; border-radius: 50%; border: 0; padding: 0 10px; pointer-events: auto; cursor: pointer;
  background: radial-gradient(circle at 50% 35%, #ffd54a, var(--gold) 70%); color: #2a1f00; display: grid; place-items: center; text-align: center;
  box-shadow: 0 10px 24px rgba(30, 24, 18, 0.28), inset 0 -4px 0 rgba(120, 80, 0, 0.18); transition: transform .08s ease, background .2s, color .2s; -webkit-user-select: none; user-select: none; }
.act.down { transform: scale(.93); }
.act.off { background: #d5d9e0; color: #4a5263; box-shadow: 0 8px 20px rgba(30, 24, 18, 0.2), inset 0 -4px 0 rgba(0, 0, 0, 0.08); }
.act.off.bad { background: #f6dcd7; color: #a3291f; }
.act.holding { background: radial-gradient(circle at 50% 35%, #ffe07a, #f5c33b 70%); }
.act-l { display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; }
.act-mode { font: 800 9.5px/1 Inter; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.act-verb { font: 800 14px/1.1 Inter; }
.act.off .act-verb { font-size: 12.5px; font-weight: 700; }
.act-sub { font: 700 9.5px/1.1 Inter; opacity: .72; }
.act-ring { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); transform: rotate(-90deg); pointer-events: none; overflow: visible; }
.act-ring circle { fill: none; stroke-width: 5; }
.act-ring .bg { stroke: transparent; }
.act.holding .act-ring .bg { stroke: rgba(11, 44, 85, 0.18); }
.act-ring .fg { stroke: var(--navy-deep); stroke-linecap: round; }
.drop { width: 62px; height: 62px; border-radius: 50%; border: 0; pointer-events: auto; cursor: pointer; background: var(--paper-solid); color: var(--ink); font: 800 13px/1.1 Inter; padding: 0 6px;
  box-shadow: var(--shadow), inset 0 0 0 1.5px rgba(29, 36, 51, 0.12); -webkit-user-select: none; user-select: none; transition: transform .08s ease; }
.drop.down { transform: scale(.92); }
/* you arrived at something you tapped that needs a hold: the gold button pulses (touchplay.js, 9/28 v2) */
.act.ready:not(.holding) { animation: act-ready 0.8s ease-out 2; }
@keyframes act-ready { 0% { box-shadow: 0 0 0 0 rgba(252, 188, 4, .75), 0 10px 24px rgba(30,24,18,.28); } 100% { box-shadow: 0 0 0 22px rgba(252, 188, 4, 0), 0 10px 24px rgba(30,24,18,.28); } }

/* phone portrait: caption on its own row above the energy card and buttons; toasts under the top cards */
@media (max-aspect-ratio: 1/1) {
  .dock { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cap cap" "me btns"; }
  .dock .prompt { justify-self: stretch; }
  body.touch .team { max-width: calc(100vw - 266px); }
  body.touch .toasts { top: calc(236px + env(safe-area-inset-top)); width: calc(100vw - 24px); }
  body.touch .clients { width: 236px; }
  body.touch .cl-row { grid-template-columns: 8px 1fr 30px 84px; }
  body.touch .dc-body { min-width: 0; }
  body.touch .dc-note { font-size: 9.5px; }
  body.touch .date-card { gap: 8px; padding-right: 9px; }
  .dc-pause { padding: 6px 4px; }
  body.touch .cl-st { display: none; }
  body.touch .toasts, body.touch.practicing .toasts { top: calc(126px + env(safe-area-inset-top)); }
}

/* phones and tablets, 9/28 v2: the client list folds to a row of dots so the zoomed-in office has room; tap it to open or fold it */
body.touch .clients { cursor: pointer; }
body.touch .cl-head span:first-child::after { content: ' ▾'; font: 700 10px/1 Inter; color: var(--ink-soft); }
body.touch .clients.open .cl-head span:first-child::after { content: ' ▴'; }
body.touch .clients:not(.open) { width: auto; max-width: 150px; }
body.touch .clients:not(.open) .cl-rows { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
body.touch .clients:not(.open) .cl-row { display: block; border: 0; padding: 0; }
body.touch .clients:not(.open) .cl-name, body.touch .clients:not(.open) .cl-bar, body.touch .clients:not(.open) .cl-st { display: none !important; }
body.touch .clients:not(.open) .cl-dot { width: 11px; height: 11px; box-shadow: 0 0 0 1.5px #fff; }
body.touch .clients:not(.open) .cl-row.danger .cl-dot { box-shadow: 0 0 0 2px var(--red); }
body.touch .clients:not(.open) .cl-row.st-renewed .cl-dot { box-shadow: 0 0 0 2px var(--gold); }
/* short screens (phone landscape): title, pause and staffing screens scroll instead of clipping */
@media (max-height: 560px) {
  .title-screen { overflow-y: auto; align-content: start; padding-top: 18px; padding-bottom: 18px; }
  .title-card h1 { font-size: 36px; margin-bottom: 10px; }
  .eyebrow { margin-bottom: 10px; }
  .lede { font-size: 14px; margin-bottom: 14px; }
  .controls { margin-top: 14px; }
  .made-by { display: none; }
  .panel-screen { place-items: start center; padding: 12px 0; }
  .panel { padding: 16px 18px 18px; }
}
@media (max-width: 600px) {
  .title-screen { padding: 22px 20px; background: rgba(251, 240, 226, 0.88); overflow-y: auto; }
  .title-card h1 { font-size: 40px; }
  .lede { font-size: 15px; }
  .made-by { left: 20px; }
  .panel-screen { place-items: start center; padding: 12px 0; }
  .panel { padding: 16px 16px 18px; }
  #tut-card { padding: 11px 14px 13px; }
  .tut-title { font-size: 19px; }
  .tut-how { font-size: 14px; }
}
/* phone landscape: keep the staffing panel's two columns side by side */
@media (max-width: 900px) and (min-aspect-ratio: 3/2) {
  .panel-cols { grid-template-columns: 1fr 1.15fr; gap: 10px; }
  .sp-col { padding: 12px 14px; }
  .sp-facts { gap: 4px; font-size: 12.5px; margin-bottom: 10px; }
  .sp-col h3 { font-size: 16px; margin-bottom: 8px; }
  .sp-agent { padding: 8px 10px; }
  .sp-note { font-size: 11.5px; margin-top: 8px; }
  .panel-head { margin-bottom: 10px; }
}
body.touch .controls span { display: inline; }
@media (max-height: 560px) and (min-aspect-ratio: 1/1) {
  .title-screen { background: linear-gradient(90deg, rgba(251, 240, 226, 0.95) 0%, rgba(251, 240, 226, 0.85) 55%, rgba(251, 240, 226, 0) 80%); }
}

/* ---------- big screens (--ui set by touch.js applyUIScale; 1 at 1440x900, ~1.5 at 2560x1440) ---------- */
#hud > *, .wm > *, .co-in, #tut-card, .title-card, .made-by, .panel, .es-card { zoom: var(--ui, 1); }

/* toasts beside the player (desktop; hud.js placeToasts) */
.toasts.near { transform: none; align-items: flex-start; width: 340px; }

/* ---------- in-world callouts (callouts.js + worldui.js renderCallouts) ---------- */
#callouts { position: fixed; inset: 0; pointer-events: none; z-index: 12; overflow: hidden; }
.co { position: absolute; left: 0; top: 0; will-change: transform; }
.co-in { display: flex; flex-direction: column; align-items: flex-start; width: max-content; max-width: 340px; }
.co.below .co-in { flex-direction: column-reverse; }
.co-pin { position: relative; left: var(--ax, 50%); transform: translateX(-50%); line-height: 0; }
.co.below .co-pin { transform: translateX(-50%) rotate(180deg); }
.co-in.pop .co-box { animation: coPop .45s cubic-bezier(.2, 1.5, .4, 1) both; transform-origin: 50% 100%; }
@keyframes coPop { from { transform: scale(.55); opacity: 0; } }
.co-tag { font: 800 10.5px/1 Inter; letter-spacing: .12em; text-transform: uppercase; }
.co-title { font: 800 19px/1.15 Fraunces, serif; letter-spacing: -0.01em; }
.co-text { font: 500 14px/1.42 Inter; }
.co-text kbd { font-size: 12px; background: var(--gold); border-color: #d9a000; color: #2a1f00; }

/* smart-placed step cards and tips (worldui.js renderCallouts): no bouncing pin; a tail with an arrowhead points at the target instead */
.co.smart .co-pin { display: none; }
.co.smart .co-in.pop .co-box { transform-origin: 50% 50%; }
.co.smart.at .co-in { max-width: 270px; }
/* Practice-step cards (9/28, Chris: "every card a different size" and "too big"): one fixed size for every step's
   full card and "Nice!", and one smaller fixed size for the compact card you get when you're standing at the spot.
   The step text is written to fit two lines (one sentence + the key chip). Heights are minimums: never clipped. */
.co.step .co-in { width: 262px; max-width: none; }
.co.step .co-box { width: 262px; min-height: 108px; box-sizing: border-box; display: flex; flex-direction: column; padding-bottom: 10px; }
.co.step.at .co-in, .co.step.at .co-box { width: 232px; }
.co.step.at .co-box { min-height: 84px; }
body.touch .co.step .co-box { min-height: 124px; } /* the phone chips ("Hold the gold button") are longer: room for 3 lines */
body.touch .co.step.at .co-box { min-height: 84px; }
/* 9/28 v4: width is fixed, height is a floor, never a ceiling: text is never clipped. "Nice!" always uses the full card. */
.co.step .co-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co.look-a.step .co-tag { font-size: 9.5px; padding: 5px 12px 4px; }
.co.look-a.step .co-box::before { top: 4px; width: 9px; height: 9px; }
.co.look-a.step .co-title { font-size: 16.5px; padding: 7px 12px 1px; }
.co.look-a.step .co-text { font: 500 13px/1.5 Inter; padding: 2px 12px 0; }
.co.look-a.step .co-text kbd { font-size: 11px; padding: 2px 5px; }
.co.look-a.step.at .co-title { font-size: 15px; }
.co-tail { position: absolute; left: 0; top: 0; height: calc(3.5px * var(--ui, 1)); margin-top: calc(-1.75px * var(--ui, 1)); background: var(--navy-deep); border-radius: 3px; transform-origin: 0 50%; will-change: transform; box-shadow: 0 0 0 calc(1px * var(--ui, 1)) rgba(255, 253, 246, .7); }
.co-tail i { position: absolute; right: calc(-4px * var(--ui, 1)); top: 50%; width: 0; height: 0; border-top: calc(9px * var(--ui, 1)) solid transparent; border-bottom: calc(9px * var(--ui, 1)) solid transparent; border-left: calc(15px * var(--ui, 1)) solid var(--gold); transform: translateY(-50%); filter: drop-shadow(0 0 1.2px #0b2c55) drop-shadow(0 0 1.2px #0b2c55); animation: tailBob .6s ease-in-out infinite alternate; }
@keyframes tailBob { to { transform: translate(calc(-5px * var(--ui, 1)), -50%); } }
.co-tail.done { background: #1f6f47; } .co-tail.done i { border-left-color: #2e9a63; animation: none; }
.co-tail.look-b i { border-left-color: #fff; }
.co-tail.look-c { background: var(--gold); box-shadow: 0 0 0 calc(1px * var(--ui, 1)) rgba(11, 44, 85, .8); }

/* what Space does, under the player's feet (desktop) */
.co-ctx .co-in { align-items: center; max-width: none; }
.co-ctx .co-pin { display: none; }
.ctx-pill { display: flex; align-items: center; gap: 8px; background: rgba(20, 26, 40, 0.88); color: #fff; padding: 7px 12px; border-radius: 11px; font: 600 13.5px/1 Inter; white-space: nowrap; box-shadow: 0 6px 16px rgba(0, 0, 0, .22); }
.ctx-pill kbd { background: var(--gold); border-color: #d9a000; color: #2a1f00; }
.ctx-pill kbd.held { animation: held .5s ease-in-out infinite alternate; }
.ctx-pill kbd.dim { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); color: #fff; }
.ctx-pill .p-dim { opacity: .75; } .ctx-pill .p-bad { color: #ffb4a8; }
.ctx-pill .sep { width: 1px; height: 15px; background: rgba(255,255,255,.25); margin: 0 2px; }

/* look A: a pinned sign with a bouncing arrow */
.co.look-a .co-box { background: #fffdf6; border: 3px solid var(--navy-deep); border-radius: 14px; overflow: hidden; box-shadow: 0 7px 0 rgba(11, 44, 85, 0.2), 0 16px 34px rgba(20, 16, 10, 0.3); position: relative; }
.co.look-a .co-box::before { content: ''; position: absolute; top: 5px; right: 8px; width: 11px; height: 11px; border-radius: 50%; background: var(--red); box-shadow: inset -2px -2px 0 rgba(0,0,0,.2); }
.co.look-a .co-tag { background: var(--gold); color: var(--navy-deep); padding: 7px 14px 6px; }
.co.look-a .co-title { color: var(--navy-deep); padding: 10px 14px 2px; font-size: 20px; }
.co.look-a .co-text { color: #2b3345; padding: 4px 14px 12px; }
.co.look-a .co-pin svg { width: 34px; height: 40px; margin-top: 2px; filter: drop-shadow(0 3px 4px rgba(0,0,0,.3)); animation: coBob .7s ease-in-out infinite alternate; }
.co.look-a.done .co-box { border-color: #1f6f47; } .co.look-a.done .co-tag { background: #2e9a63; color: #fff; }
.co.look-a.done .co-title { color: #1f6f47; }
@keyframes coBob { to { transform: translateY(8px); } }

/* look B: the DoBetter buddy pops up and says it */
.co.look-b .co-box { display: flex; align-items: flex-end; gap: 6px; }
.co-buddy { width: 62px; height: 62px; flex: none; margin-bottom: -6px; filter: drop-shadow(0 5px 6px rgba(0,0,0,.28)); animation: buddyBob 1.1s ease-in-out infinite alternate; }
@keyframes buddyBob { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-5px) rotate(4deg); } }
.co.look-b .co-body { position: relative; background: #fff; border: 2.5px solid var(--navy-deep); border-radius: 18px; padding: 10px 15px 12px; box-shadow: 0 12px 28px rgba(20, 16, 10, 0.28); }
.co.look-b .co-body::before { content: ''; position: absolute; left: -10px; bottom: 14px; width: 14px; height: 14px; background: #fff; border-left: 2.5px solid var(--navy-deep); border-bottom: 2.5px solid var(--navy-deep); transform: rotate(45deg); border-radius: 0 0 0 3px; }
.co.look-b .co-tag { display: inline-block; background: var(--gold); color: var(--navy-deep); padding: 4px 8px 3px; border-radius: 99px; margin-bottom: 6px; font-size: 9.5px; }
.co.look-b .co-title { color: var(--navy-deep); font: 800 17px/1.2 Inter; margin-bottom: 3px; }
.co.look-b .co-text { color: #2b3345; }
.co.look-b .co-pin svg { width: 26px; height: 19px; margin-top: 3px; animation: coBob .7s ease-in-out infinite alternate; }
.co.look-b.done .co-body, .co.look-b.done .co-body::before { border-color: #2e9a63; }
.co.look-b.done .co-title { color: #1f6f47; } .co.look-b.done .co-tag { background: #2e9a63; color: #fff; }
.co.look-b.tip .co-buddy { width: 52px; height: 52px; }

/* look C: a chunky game banner with a pulse */
.co.look-c .co-box { position: relative; background: linear-gradient(180deg, #0f3a6e, var(--navy-deep)); color: #fff; border: 3px solid var(--gold); border-radius: 12px; padding: 11px 20px 13px; text-align: center; animation: bannerPulse 1.3s ease-in-out infinite; }
.co.look-c .co-box::before, .co.look-c .co-box::after { content: ''; position: absolute; top: 12px; width: 18px; height: calc(100% - 18px); background: #0a2447; border: 3px solid var(--gold); z-index: -1; }
.co.look-c .co-box::before { left: -16px; border-right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 45% 50%); }
.co.look-c .co-box::after { right: -16px; border-left: 0; clip-path: polygon(0 0, 100% 0, 55% 50%, 100% 100%, 0 100%); }
.co.look-c .co-tag { color: var(--gold); margin-bottom: 5px; }
.co.look-c .co-title { font: 900 21px/1.1 Fraunces, serif; text-transform: uppercase; letter-spacing: .01em; color: #fff; margin-bottom: 4px; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.co.look-c .co-text { color: #e6ebf5; }
.co.look-c .co-text kbd { font-size: 12.5px; }
.co.look-c .co-pin svg { width: 34px; height: 26px; margin-top: 3px; animation: coBob .5s ease-in-out infinite alternate; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
@keyframes bannerPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(252, 188, 4, 0.55), 0 14px 30px rgba(10, 20, 40, 0.35); } 50% { box-shadow: 0 0 0 9px rgba(252, 188, 4, 0), 0 14px 30px rgba(10, 20, 40, 0.35); } }
.co.look-c.done .co-box { background: linear-gradient(180deg, #2e9a63, #1f6f47); animation: none; }
.co.look-c.done .co-box::before, .co.look-c.done .co-box::after { background: #17573a; }

/* practice: the top card is now a slim progress strip (the step itself pops up at its target) */
#tut-card.strip { width: auto; max-width: calc(100vw - 32px); display: flex; align-items: center; gap: 14px; padding: 8px 10px 8px 16px; border-radius: 12px; }
#tut-card.strip .tut-dots { margin-top: 0; width: 150px; flex: none; }
#tut-card.strip .tut-dots i { height: 4px; }
.tut-hud-arrow { display: none !important; }
body.practicing .toasts:not(.near) { top: 64px; }
@media (max-width: 600px) { #tut-card.strip .tut-dots { display: none; } #tut-card.strip { gap: 10px; } }
@media (max-aspect-ratio: 1/1) { body.touch.practicing .toasts { top: calc(126px + env(safe-area-inset-top)); } }
/* phones: the step count is on the callout itself; landscape keeps a short strip, portrait has no room for it
   (Skip to the real quarter is still in the pause menu: tap the date) */
body.touch #tut-card.strip { top: calc(10px + env(safe-area-inset-top)); padding: 6px 6px 6px 12px; gap: 10px; }
body.touch #tut-card.strip .tut-dots { display: none; }
body.touch #tut-card.strip .tut-tag { font-size: 10px; white-space: nowrap; }
body.touch #tut-card.strip .tut-skip { white-space: nowrap; padding: 5px 8px; font-size: 11px; }
@media (max-aspect-ratio: 1/1) { body.touch #tut-card.strip { display: none; } }

/* ---------- end-of-quarter report screen (endscreen.js; ?endscreen=a|b|c, default a) ---------- */
.end-screen { display: flex; overflow-y: auto; padding: 28px 16px; background: rgba(12, 20, 36, 0.5); backdrop-filter: blur(5px); user-select: text; -webkit-user-select: text; }
.es-card { margin: auto; width: min(760px, 100%); position: relative; border-radius: 24px; box-shadow: 0 30px 80px rgba(0,0,0,.4); animation: pop .5s cubic-bezier(.2,1.2,.4,1); overflow: hidden; }
.es-full .es-card { width: min(880px, 100%); }
.es-head h1 { font: 800 clamp(30px, 4vw, 44px)/1.04 Fraunces, serif; letter-spacing: -0.02em; margin: 0 0 8px; }
.es-sub { font: 500 16px/1.45 Inter; margin: 0; }
.es-head .eyebrow { margin-bottom: 12px; }
.es-tiles { display: grid; gap: 10px; margin-bottom: 20px; }
.es-tile { display: flex; align-items: center; gap: 14px; position: relative; }
.es-ico { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; }
.es-ico svg { width: 21px; height: 21px; }
.es-tt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.es-tt b { font: 800 16px/1.2 Inter; }
.es-tt span { font: 500 13.5px/1.35 Inter; }
.es-val { font: 600 15px/1.3 Inter !important; }
.es-val em { font: 800 22px/1 Fraunces, serif; font-style: normal; }
.es-val i { font-style: normal; opacity: .45; margin: 0 3px; }
.es-lock { flex: none; width: 20px; height: 20px; margin-left: auto; }
.es-num, .es-leader { display: none; }

.es-form label[for] { display: block; font: 800 15px/1.3 Inter; margin-bottom: 9px; }
.es-row { display: flex; gap: 8px; }
.es-row input { flex: 1; min-width: 0; height: 52px; padding: 0 16px; font: 600 16px/1 Inter; border-radius: 12px; border: 1.5px solid rgba(29, 36, 51, 0.2); background: #fff; color: var(--ink); outline: none; }
.es-row input:focus { border-color: var(--navy); box-shadow: 0 0 0 4px rgba(8, 72, 143, 0.15); }
.es-form.bad .es-row input { border-color: var(--red); box-shadow: 0 0 0 4px rgba(217, 75, 63, 0.15); }
.es-go { flex: none; height: 52px; padding: 0 22px; border: 0; border-radius: 12px; font: 800 15.5px/1 Inter; cursor: pointer; transition: transform .15s, filter .15s; }
.es-go:hover { transform: translateY(-1px); filter: brightness(1.06); }
.es-err { min-height: 18px; font: 600 13px/1.3 Inter; color: #e0584c; margin-top: 6px; }
.es-check { display: flex; align-items: center; gap: 9px; font: 500 13.5px/1.3 Inter; cursor: pointer; width: fit-content; }
.es-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--navy); flex: none; cursor: pointer; }
.es-skip { display: block; margin: 16px auto 0; background: none; border: 0; padding: 6px 10px; font: 600 13px/1 Inter; cursor: pointer; opacity: .7; text-decoration: underline; text-underline-offset: 3px; }
.es-skip:hover { opacity: 1; }
.es-actions { display: flex; gap: 10px; margin-top: 18px; }
.es-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; margin-top: 22px; padding-top: 16px; font: 500 14px/1.3 Inter; }
.es-foot a { color: inherit; text-decoration: none; }
.es-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.es-talk b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.es-fine { margin-top: 10px; font: 500 11.5px/1.4 Inter; opacity: .65; }
/* "How can this game be better?" box (9/29) */
.es-fb { margin-top: 22px; }
.es-fb label { display: block; font: 800 15px/1.3 Inter; margin-bottom: 9px; }
.es-fb textarea { display: block; width: 100%; box-sizing: border-box; min-height: 84px; padding: 12px 14px; font: 500 15px/1.4 Inter; border-radius: 12px; border: 1.5px solid rgba(29, 36, 51, 0.2); background: #fff; color: var(--ink); outline: none; resize: vertical; }
.es-fb textarea:focus { border-color: var(--navy); box-shadow: 0 0 0 4px rgba(8, 72, 143, 0.15); }
.es-fb-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.es-fb .es-go { height: 44px; background: var(--navy-deep, #0b2c55); color: #fff; }
.es-fb .es-go:disabled { opacity: .5; cursor: default; transform: none; }
.es-fb-msg { font: 600 13.5px/1.3 Inter; opacity: .8; }
.es-fb.sent .es-go { display: none; }
.es-trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.es-b .es-fb label, .es-c .es-fb label { color: inherit; }

/* full report (same in every look: light section cards) */
.es-report { display: grid; gap: 14px; }
.es-sec { background: var(--paper-solid); color: var(--ink); border-radius: 16px; padding: 18px 20px; box-shadow: inset 0 0 0 1px var(--line); }
.es-sec h3 { display: flex; align-items: center; gap: 10px; font: 800 13px/1 Inter; letter-spacing: .12em; text-transform: uppercase; color: #b0551f; margin: 0 0 12px; }
.es-sec h3 .es-num { display: inline; font: 800 13px/1 Inter; color: var(--ink-soft); }
.es-sec h4 { font: 800 14px/1 Inter; margin: 16px 0 8px; }
.es-sec p { font: 500 15px/1.5 Inter; margin: 0 0 8px; color: #2b3345; }
.es-sec p.es-lead { font: 800 22px/1.2 Fraunces, serif; color: var(--navy-deep); margin-bottom: 8px; }
.es-sec p.es-small { font-size: 13.5px; color: var(--ink-soft); }
.es-sec p.es-note { font-size: 12px; line-height: 1.45; color: var(--ink-soft); margin: 10px 0 0; }
.es-big { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 10px; margin-bottom: 12px; }
.es-big.three { grid-template-columns: repeat(3, 1fr); }
.es-big div { background: #fff; border-radius: 12px; padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--line); }
.es-big b { display: block; font: 800 28px/1 Fraunces, serif; color: var(--navy-deep); margin-bottom: 5px; }
.es-big span { font: 500 12.5px/1.3 Inter; color: var(--ink-soft); }
.es-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.es-chip { display: inline-flex; align-items: center; gap: 6px; font: 700 12.5px/1 Inter; padding: 6px 10px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.es-chip i { width: 8px; height: 8px; border-radius: 50%; }
.es-chip.ok { background: #fff4cc; box-shadow: inset 0 0 0 1px rgba(214, 155, 18, .45); }
.es-chip.no { opacity: .6; text-decoration: line-through; text-decoration-color: rgba(217, 75, 63, .7); }
.es-sec .end-clients { margin: 0; }
.es-table { width: 100%; border-collapse: collapse; font: 500 14px/1.3 Inter; margin-top: 4px; }
.es-table th, .es-table td { padding: 9px 8px; text-align: right; border-top: 1px solid var(--line); }
.es-table thead th { border-top: 0; font: 700 11.5px/1.25 Inter; color: var(--ink-soft); vertical-align: bottom; }
.es-table tbody th { text-align: left; font-weight: 600; color: #2b3345; }
.es-table td { font-weight: 800; color: var(--navy-deep); }
.es-table .ai { background: rgba(252, 188, 4, .16); }
.es-table thead .ai { color: #7a5a00; border-radius: 10px 10px 0 0; }

/* Look B: locked scoreboard, navy with gold */
.es-b .es-card { background: radial-gradient(120% 90% at 50% 0%, #123d70 0%, #0b2c55 55%, #09223f 100%); color: #fff; padding: 34px 36px 24px; box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 0 0 1px rgba(252, 188, 4, .25); }
.es-b .es-head { text-align: center; margin-bottom: 22px; }
.es-b .eyebrow { color: var(--gold); }
.es-b .es-head h1 { color: #fff; }
.es-b .es-sub { color: #b9c7dc; }
.es-b .es-tiles { grid-template-columns: 1fr 1fr; }
.es-b .es-tile { align-items: flex-start; background: rgba(255,255,255,.06); border-radius: 16px; padding: 16px 16px 16px 14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.es-b .es-ico { background: rgba(252, 188, 4, .16); color: var(--gold); }
.es-b .es-tt b { color: #fff; padding-right: 22px; }
.es-b .es-tt span { color: #a9b8cf; }
.es-b .es-tile:not(.open) .es-tt::after { content: ''; display: block; height: 11px; width: 70%; margin-top: 8px; border-radius: 6px; background: repeating-linear-gradient(90deg, rgba(252,188,4,.5) 0 26px, transparent 26px 34px); filter: blur(2.5px); }
.es-b .es-lock { position: absolute; top: 14px; right: 14px; color: var(--gold); opacity: .85; }
.es-b .es-tile.open { grid-column: 1 / -1; background: rgba(252, 188, 4, .12); box-shadow: inset 0 0 0 1.5px rgba(252, 188, 4, .6); align-items: center; }
.es-b .es-tile.open .es-ico { background: var(--gold); color: var(--navy-deep); }
.es-b .es-val { color: #fff !important; }
.es-b .es-val em { color: var(--gold); }

.es-b .es-form { background: rgba(255,255,255,.07); border-radius: 18px; padding: 18px 18px 14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.es-b .es-form label[for] { color: #fff; }
.es-b .es-row input { border-color: transparent; }
.es-b .es-go { background: var(--gold); color: var(--navy-deep); box-shadow: 0 8px 22px rgba(252, 188, 4, .3); }
.es-b .es-check { color: #c9d4e5; }
.es-b .es-check input { accent-color: var(--gold); }
.es-b .es-skip { color: #9fb0c9; }
.es-b .es-foot { border-top: 1px solid rgba(255,255,255,.12); color: #c9d4e5; }
.es-b .es-foot b { color: #fff; }
.es-b .es-talk b { color: var(--gold); }
.es-b .es-fine { color: #9fb0c9; }
.es-b .btn-ghost { color: #fff; border-color: rgba(255,255,255,.3); }
.es-b .btn-ghost:hover { background: rgba(255,255,255,.08); }
.es-b.es-full .btn-primary { background: var(--gold); color: var(--navy-deep); }

/* Look A (default, Chris's pick 9/28): the report cover, cream paper with a navy band and a table of contents */
.es-a .es-card { background: var(--paper-solid); color: var(--ink); }
.es-a .es-head { background: var(--navy-deep); color: #fff; padding: 30px 36px 26px; border-bottom: 6px solid var(--gold); background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 12px, transparent 12px 24px); }
.es-a .eyebrow { color: var(--gold); }
.es-a .es-head h1 { color: #fff; }
.es-a .es-sub { color: #c3cfe0; }
.es-a .es-body { padding: 18px 36px 24px; }
.es-a .es-tiles { gap: 0; margin-bottom: 18px; }
.es-a .es-tile { padding: 14px 0; border-bottom: 1.5px dotted rgba(29, 36, 51, 0.22); gap: 14px; }
.es-a .es-ico { display: none; }
.es-a .es-num { display: block; flex: none; font: 800 26px/1 Fraunces, serif; color: #c89400; width: 34px; }
.es-a .es-tt b { color: var(--navy-deep); font-size: 17px; }
.es-a .es-tt span { color: var(--ink-soft); }
.es-a .es-leader { display: block; flex: 1; min-width: 12px; height: 0; border-bottom: 2px dotted rgba(29, 36, 51, .25); margin: 0 4px; align-self: center; }
.es-a .es-lock { margin-left: 0; color: var(--navy-deep); opacity: .75; }
.es-a .es-tile.open { background: #fff4cc; border-radius: 12px; padding: 14px; border-bottom: 0; margin-bottom: 6px; }
.es-a .es-val em { color: var(--navy-deep); }
.es-a .es-form { background: #fff; border-radius: 14px; padding: 18px 18px 14px; box-shadow: inset 0 0 0 1px var(--line), 0 6px 18px rgba(30, 24, 18, .06); border-left: 5px solid var(--gold); }
.es-a .es-form label[for] { color: var(--navy-deep); }
.es-a .es-go { background: var(--navy-deep); color: #fff; box-shadow: 0 8px 20px rgba(11, 44, 85, .25); }
.es-a .es-check { color: var(--ink-soft); }
.es-a .es-skip { color: var(--ink-soft); }
.es-a .es-foot { border-top: 1px solid var(--line); color: var(--ink-soft); }
.es-a .es-foot b { color: var(--navy-deep); }
.es-a .es-talk b { color: var(--navy); text-decoration-color: var(--gold); }
.es-a .es-sec { background: #fff; }
/* A's unlocked report reads like the contents page it came from: gold Fraunces numerals, navy titles, dotted rule */
.es-a .es-sec h3 { font: 800 19px/1.2 Inter; letter-spacing: -0.005em; text-transform: none; color: var(--navy-deep); gap: 12px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1.5px dotted rgba(29, 36, 51, 0.22); }
.es-a .es-sec h3 .es-num { font: 800 26px/1 Fraunces, serif; color: #c89400; width: 34px; flex: none; }
.es-a .es-lock { margin-left: auto; }

/* Look C: split card, gold panel with a seal beside the form */
.es-c .es-card { display: grid; grid-template-columns: 290px 1fr; background: var(--paper-solid); color: var(--ink); width: min(880px, 100%); }
.es-c .es-head { background: var(--gold); color: var(--navy-deep); padding: 34px 28px 28px; display: flex; flex-direction: column; background-image: radial-gradient(circle at 110% -10%, rgba(255,255,255,.35) 0 40%, transparent 41%); }
.es-c .eyebrow { color: #7a4b00; }
.es-c .es-head h1 { color: var(--navy-deep); font-size: clamp(30px, 3.4vw, 38px); }
.es-c .es-sub { color: #4a3a10; }
.es-c .es-seal { margin-top: auto; align-self: flex-start; width: 92px; height: 92px; border-radius: 50%; background: var(--navy-deep); color: var(--gold); display: grid; place-items: center; box-shadow: 0 0 0 6px rgba(11, 44, 85, .15), 0 10px 24px rgba(11, 44, 85, .3); margin-top: 26px; }
.es-c .es-seal svg { width: 40px; height: 40px; }
.es-c .es-body { padding: 30px 32px 22px; }
.es-c .es-tiles { gap: 12px; }
.es-c .es-ico { background: var(--navy-deep); color: var(--gold); width: 34px; height: 34px; }
.es-c .es-ico svg { width: 18px; height: 18px; }
.es-c .es-tt b { color: var(--navy-deep); }
.es-c .es-tt span { color: var(--ink-soft); }
.es-c .es-lock { color: #c89400; }
.es-c .es-tile.open { background: #fff4cc; border-radius: 12px; padding: 10px 12px; }
.es-c .es-val em { color: var(--navy-deep); }
.es-c .es-form label[for] { color: var(--navy-deep); }
.es-c .es-go { background: var(--navy-deep); color: #fff; }
.es-c .es-go::after { content: ' \2192'; }
.es-c .es-check { color: var(--ink-soft); }
.es-c .es-skip { color: var(--ink-soft); margin-left: 0; }
.es-c .es-foot { border-top: 1px solid var(--line); color: var(--ink-soft); }
.es-c .es-foot b { color: var(--navy-deep); }
.es-c .es-talk b { text-decoration-color: var(--gold); }
.es-c.es-full .es-card { grid-template-columns: 240px 1fr; width: min(980px, 100%); }
.es-c.es-full .es-body { padding: 24px 24px 20px; }
.es-c .es-sec { background: #fff; }

/* phones and narrow windows */
@media (max-width: 720px) {
  .end-screen { padding: calc(12px + env(safe-area-inset-top)) 10px calc(12px + env(safe-area-inset-bottom)); }
  .es-card { border-radius: 20px; }
  .es-head h1 { font-size: 30px; }
  .es-sub { font-size: 14.5px; }
  .es-row { flex-direction: column; }
  .es-go { width: 100%; }
  .es-big { grid-template-columns: 1fr 1fr; } .es-big > div:last-child:nth-child(3) { grid-column: 1 / -1; }
  .es-big.three { grid-template-columns: 1fr 1fr 1fr; }
  .es-big.three b { font-size: 22px; }
  .es-sec { padding: 14px 14px; }
  .es-sec p.es-lead { font-size: 19px; }
  .es-table { font-size: 12.5px; } .es-table th, .es-table td { padding: 8px 4px; }
  .legend { grid-template-columns: 1fr; }
  .es-foot { flex-direction: column; align-items: flex-start; }
  .es-b .es-card { padding: 24px 16px 18px; }
  .es-b .es-tiles { grid-template-columns: 1fr; gap: 8px; }
  .es-b .es-tile { padding: 12px 12px 12px 12px; }
  .es-b .es-tile:not(.open) .es-tt::after { margin-top: 6px; height: 9px; }
  .es-b .es-head { margin-bottom: 16px; }
  .es-b .es-form { padding: 14px; }
  .es-a .es-head { padding: 22px 18px 18px; }
  .es-a .es-body { padding: 10px 16px 18px; }
  .es-a .es-leader { display: none; }
  .es-a .es-num, .es-a .es-sec h3 .es-num { font-size: 20px; width: 26px; }
  .es-a .es-sec h3 { font-size: 16.5px; gap: 10px; }
  .es-c .es-card, .es-c.es-full .es-card { grid-template-columns: 1fr; }
  .es-c .es-head { padding: 22px 18px 18px; }
  .es-c .es-seal { display: none; }
  .es-c .es-body, .es-c.es-full .es-body { padding: 18px 16px 18px; }
}
/* phone landscape: short screen, keep the tiles two across and trim the space */
@media (max-height: 560px) and (min-aspect-ratio: 3/2) {
  .end-screen { padding: 10px; }
  .es-head h1 { font-size: 28px; }
  .es-b .es-card { padding: 20px 22px 16px; }
  .es-b .es-head { margin-bottom: 14px; }
  .es-b .es-tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
  .es-row { flex-direction: row; } .es-go { width: auto; }
  .es-foot { flex-direction: row; align-items: center; }
  .es-c .es-card { grid-template-columns: 220px 1fr; }
  .es-a .es-head { padding: 16px 22px 14px; border-bottom-width: 5px; }
  .es-a .es-head .eyebrow { margin-bottom: 8px; }
  .es-a .es-body { padding: 8px 22px 16px; }
  .es-a.es-locked .es-tiles, .es-a.es-skipped .es-tiles { grid-template-columns: 1fr 1fr; column-gap: 28px; margin-bottom: 12px; }
  .es-a .es-tile.open { grid-column: 1 / -1; padding: 10px 14px; }
  .es-a .es-leader { display: none; }
  .es-a .es-num { font-size: 20px; width: 26px; }
  .es-c .es-seal { display: grid; width: 64px; height: 64px; margin-top: 16px; }
}
.es-seal .es-lock { margin: 0; }
.es-b.es-skipped .es-tiles { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .es-b.es-skipped .es-tiles { grid-template-columns: 1fr; } }
/* phones: stacked email box keeps its height; locked tiles drop the blurb so the email box sits higher */
@media (max-width: 720px), (max-height: 560px) {
  .es-row input { flex: none; width: 100%; }
  .es-tile:not(.open) .es-tt > span { display: none; }
  .es-b .es-tile { align-items: center; }
  .es-b .es-tile:not(.open) .es-tt::after { width: 55%; }
  .es-ico { width: 34px; height: 34px; }
  .es-a .es-tile { padding: 11px 0; }
}
@media (max-height: 560px) and (min-aspect-ratio: 3/2) {
  .es-row input { flex: 1; width: auto; }
  .es-b .es-tile:not(.open) .es-tt::after { display: none; }
  .es-b .es-tile { padding: 10px 12px; }
}

/* eye-level swoop (9/28 v4): world labels and callouts step aside while the camera is down low */
#world-ui, #callouts { transition: opacity .35s ease; }
body.cine #world-ui, body.cine #callouts { opacity: 0; }
/* practice on phones: when the step's target is off screen, the card says it can take you there (9/28 v4) */
body.tut-off #callouts .co.step .co-box::after { content: 'Tap this card to walk there, or drag to look around'; display: block; margin: 6px 10px 0; font-size: 12px; font-weight: 700; color: #0b2c55; opacity: .8; }

/* 9/28 v5: client dollar value + renewal stage, money tags on piles/meetings */
.cl-val { font: 700 11px/1 Inter; color: #1f6b3d; text-align: right; }
.cl-row.st-lost .cl-val { color: var(--ink-soft); text-decoration: line-through; }
.cl-st .q { color: #2c5fa8; } .cl-st .q.late { color: var(--red); } .cl-st .wait { color: var(--ink-soft); }
.wm .tag.money { background: rgba(22, 105, 58, 0.9); }
.wm-pile .tag { top: auto; bottom: -18px; }
body.touch .cl-bar { display: none; } /* phones: dollars + stage beat the happiness bar (the row name still turns red) */
body.touch .clients:not(.open) .cl-val { display: none !important; }
.es-left { margin: 14px 0 6px; padding: 12px 14px; border-radius: 12px; background: rgba(191, 58, 43, 0.06); border: 1px solid rgba(191, 58, 43, 0.18); }
.es-left h4 { margin: 0 0 8px; font: 800 14px/1.2 Inter; color: #9b2f22; }
.el { display: grid; grid-template-columns: 10px 58px minmax(70px, auto) 1fr; gap: 8px; align-items: baseline; padding: 4px 0; border-top: 1px solid var(--line); font-size: 13px; }
.el:first-of-type { border-top: 0; }
.el-n { font-weight: 700; } .el-w { color: var(--ink-soft); } .el-w i { font-style: normal; opacity: .8; }
@media (max-width: 560px) { .el { grid-template-columns: 10px 52px 1fr; } .el-w { grid-column: 2 / -1; } }