/* skin.css: owned by the UI Designer. Loaded after app.css. Visual overrides only:
   no layout-breaking position changes, no JS hooks renamed. Tokens: css/theme.css.
   Look: BPDA "Phase 1 massing" clarity (white massing, thick ink lines, one accent),
   CRS Dorchester map language, Inter UI + Source Serif 4 explanations. */

/* ---------- base ---------- */
html,body{font-family:var(--rd-font);color:var(--rd-ink);-webkit-font-smoothing:antialiased}
.panel-title,.tray__head,.sheet__head .panel-title{font-size:var(--rd-title-size);font-weight:800;text-transform:uppercase;letter-spacing:var(--rd-title-tracking);color:var(--rd-ink)}
:where(button,[role=button],a,input,select,summary,.piece-card):focus-visible{outline:2.5px solid var(--rd-ink)!important;outline-offset:2px;box-shadow:0 0 0 5px rgba(185,86,26,.28)!important}
button{border-radius:var(--rd-radius-sm);transition:background var(--rd-dur-fast),border-color var(--rd-dur-fast)}
/* hover tint only where a real pointer hovers: on touch, WebKit keeps :hover "stuck" on whatever ends up under the finger after a tap */
@media (hover:hover){button:not(.is-primary):not(.run-btn):not(.is-on):hover{background:var(--rd-surface-2)}}
.tag{font-size:9.5px;letter-spacing:.07em;padding:1px 6px;border-radius:3px;border-style:dashed}
.tag--placeholder{color:var(--rd-ink-2);border-color:var(--rd-ink-2)}
.teach-label{border:1px dashed var(--rd-ink-2);border-radius:4px;background:#fff;color:var(--rd-ink-2);font-size:10px;letter-spacing:.1em;padding:1px 7px}

/* ---------- top bar ---------- */
.topbar{border-bottom:1px solid var(--rd-ink)}
.topbar__title{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:8px}
.topbar__name{font-size:17px;font-weight:800;letter-spacing:-.01em}
.topbar__mode{font-size:var(--rd-fs-xs);color:var(--rd-ink-2);text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.topbar .teach-label{margin-left:0;flex-basis:auto}
.topbar .seg{border-width:1px}
.seg{border:1px solid var(--rd-ink)}
.seg__btn,.seg button{font-weight:600}
.icon-btn{font-weight:600;border-radius:var(--rd-radius-sm)}

/* ---------- tray ---------- */
.tray{background:#fff}
@media (min-width:900px){.tray,.tray[data-height]{border-right:1px solid var(--rd-ink)}}
.tray__head{margin:2px 0 8px}
.tray__tabs{gap:0;border-bottom:1px solid var(--rd-hair);margin-bottom:10px;padding-bottom:0;flex-wrap:nowrap!important;overflow-x:auto}
.tray__tab{min-height:var(--rd-tap);border:0;border-radius:0;background:none;padding:0 10px;color:var(--rd-ink-2);font-weight:600;border-bottom:2.5px solid transparent;margin-bottom:-1px;flex:0 0 auto}
.tray__tab:hover{color:var(--rd-ink);background:none!important}
.tray__tab.is-on{background:none;color:var(--rd-ink);border-bottom-color:var(--rd-ink);font-weight:700}
.tray__tab[data-tab="play"]::before{content:"";display:inline-block;width:14px;height:14px;margin-right:5px;vertical-align:-2px;background:url(../img/icons/play/play-badge.svg) center/contain no-repeat}
.tray__cards{gap:8px}
.piece-card{border:1px solid var(--rd-hair);border-radius:var(--rd-radius-md);padding:8px 8px 9px;min-height:108px;background:#fff}
.piece-card:hover{border-color:var(--rd-ink);box-shadow:none}
.piece-card.is-armed{border-color:var(--rd-ink);box-shadow:0 0 0 1.5px var(--rd-ink);background:#fff}
.piece-card.is-armed::after{content:"Tap the map";position:absolute;left:8px;bottom:-9px;font-size:10px;font-weight:700;background:var(--rd-ink);color:#fff;border-radius:3px;padding:1px 6px}
.piece-card.is-dragging{opacity:.75;border:1px dashed var(--rd-accent);background:var(--rd-accent-tint)}
.piece-card.is-explain{background:#fafafa;border-style:dashed}
.piece-card.is-explain .piece-card__icon{opacity:.7}
.piece-card__icon{height:60px}
.piece-card__icon img{width:60px;height:60px}
.piece-card__ph{border:1px dashed var(--rd-line);color:var(--rd-ink-2);background:#fff}
.piece-card__name{font-size:13.5px;font-weight:700;line-height:1.2;margin-top:2px}
.piece-card__hint{font-size:11.5px;color:var(--rd-ink-2)}
.piece-card__info{min-height:28px;width:28px;top:4px;right:4px;border:1px solid var(--rd-hair);background:#fff}
.piece-card__info::after{content:"";position:absolute;inset:-8px}
.piece-card__count{background:var(--rd-accent);font-size:10.5px;top:6px;left:6px}
/* play pieces: same accent, ink ball badge (no new colour) */
.piece-card:is([data-strategy-id="play-mound"],[data-strategy-id="water-play"],[data-strategy-id="marsh-boardwalk"],[data-strategy-id="nature-play"]) .piece-card__icon{position:relative}
.piece-card:is([data-strategy-id="play-mound"],[data-strategy-id="water-play"],[data-strategy-id="marsh-boardwalk"],[data-strategy-id="nature-play"]) .piece-card__icon::after{content:"";position:absolute;left:calc(50% + 16px);top:38px;width:16px;height:16px;background:url(../img/icons/play/play-badge.svg) center/contain no-repeat}
.tray__tools{font-size:12px;color:var(--rd-ink-2);font-weight:600}
.tray__tools button{min-height:var(--rd-tap);border:1px solid var(--rd-ink);font-weight:600;color:var(--rd-ink)}
.placed .panel-title{margin-top:6px}
.placed__item{min-height:var(--rd-tap)}
.placed__name{min-height:var(--rd-tap)}
.placed__item.is-selected .placed__name{color:var(--rd-ink)}
.placed__item.is-selected{box-shadow:inset 3px 0 0 var(--rd-accent);padding-left:8px}
.editor{border:1px solid var(--rd-ink);border-radius:var(--rd-radius-md)}
.editor p,.editor__head + p{font-family:var(--rd-font-serif)}

/* info card (also the play-zone card) */
.info-card{border:1px solid var(--rd-ink);border-radius:var(--rd-radius-md);padding:14px}
.info-card h3{font-family:var(--rd-font-serif);font-weight:600;font-size:19px;line-height:1.2}
.info-card h4{font-family:var(--rd-font);font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--rd-ink);margin-top:12px}
.info-card__model{color:var(--rd-ink)!important;background:rgba(158,195,232,.25);border-radius:6px;padding:6px 8px}
.play-ideas{list-style:none;padding:0!important;margin:4px 0 0}
.play-ideas li{position:relative;padding:7px 0 7px 22px!important;border-top:1px solid var(--rd-hair);margin:0!important}
.play-ideas li::before{content:"";position:absolute;left:0;top:10px;width:14px;height:14px;background:url(../img/icons/play/play-badge.svg) center/contain no-repeat}
.play-ideas li b{font-family:var(--rd-font);font-size:13px;display:block}

/* ---------- map overlays ---------- */
.ctx-toolbar{border:1px solid var(--rd-ink);border-radius:var(--rd-radius-md);box-shadow:var(--rd-shadow-2);padding:3px}
.ctx-toolbar__name{font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:800}
.ctx-toolbar button{min-height:var(--rd-tap);font-weight:600;background:#fff}
.ctx-toolbar button+button{border-left:1px solid var(--rd-hair);border-radius:0}
.ghost__chip{background:#fff;color:var(--rd-ink);border:2px solid var(--rd-accent)}
.elev-chip{background:var(--rd-ink);font-weight:600}
.hint{font-weight:600}
.handle{border-width:2.5px;border-color:var(--rd-ink)}
.water-key{border:1px solid var(--rd-ink);border-radius:4px;box-shadow:none;padding:8px 10px;background:rgba(255,255,255,.96)}
.water-key__title{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;margin-bottom:4px}
.water-key__row{font-family:var(--rd-font-serif);font-style:italic;font-size:12px}
.mode-bar{border-bottom:1px solid var(--rd-ink)}
.tool-sheet{border:1px solid var(--rd-ink)}
.maplibregl-ctrl-group{border-radius:var(--rd-radius-sm)!important;box-shadow:none!important;border:1px solid var(--rd-ink)}
.maplibregl-ctrl-group button{min-height:0;border-radius:0}
.maplibregl-ctrl-scale{border-color:var(--rd-ink)!important;font-family:var(--rd-font);font-size:10px}

/* ---------- dock: play, year, scrub, Run ---------- */
.dock{border-top:1px solid var(--rd-ink)}
.play-btn{border:1px solid var(--rd-ink);background:#fff;font-size:14px}
.time-picker{border:1px solid var(--rd-ink)}
.time-picker__btn{font-weight:800;font-size:14px;letter-spacing:-.01em}
.time-picker__btn small{font-size:10.5px;font-weight:500;color:var(--rd-ink-2);letter-spacing:0;margin-top:1px}
.time-picker__btn.is-on small{color:#cfcfcf}
.time-scrub{accent-color:var(--rd-ink)}
.dock__readout{font-size:11.5px}
.run-btn{background:var(--rd-ink);color:#fff;border-radius:12px;font-size:16px;font-weight:800;padding:0 20px 0 12px;min-height:var(--rd-run-h)}
.run-btn__icon{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;color:var(--rd-ink);font-size:12px;padding-left:2px}
.run-btn:hover{background:#000}
.button.is-primary,button.is-primary{background:var(--rd-ink);border-color:var(--rd-ink)}

/* ---------- results: N equal-weight scores ---------- */
.score-card{border:1px solid var(--rd-ink);box-shadow:var(--rd-shadow-2);display:flex;flex-direction:column}
.score-card > *{order:5}
.score-card__head{order:0;font-weight:800}
.score-card .metric--scores{order:1;margin-top:8px}
.score-card .seg{order:2;align-self:flex-start}
/* the single big headline duplicates the flood score; equal weight means the list leads */
.score-card__big,.score-card__sub{display:none}
.score-card .metric--scores > .metric__label{display:flex;justify-content:space-between;align-items:center;font-size:0}
.score-card .metric--scores > .metric__label small{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--rd-ink-2);border:1px dashed var(--rd-ink-2);border-radius:4px;padding:1px 6px;order:2}
.score-list{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--rd-score-gap);margin-top:6px}
.score-list:has(> :nth-child(3)){grid-auto-flow:row}
.score-list__item{display:flex;flex-direction:column;gap:2px;border:1px solid var(--rd-hair);border-radius:var(--rd-radius-md);padding:8px 9px;min-width:0}
.score-list__label{font-size:12.5px;font-weight:700;line-height:1.2}
.score-list__value{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums;order:2}
.score-list__item--coming_soon .score-list__value,.score-list__item--no_rule .score-list__value,.score-list__item--na .score-list__value{font-size:15px;font-weight:600;font-style:italic;color:var(--rd-ink-2);font-family:var(--rd-font-serif)}
.score-list__item--coming_soon{border-style:dashed}
.score-list__note{font-family:var(--rd-font-serif);font-size:11.5px;line-height:1.3;order:3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.metric__label{font-size:11.5px;font-weight:600;color:var(--rd-ink-2)}
.metric__value{font-size:15px}
.metric__note,.score-card__level{font-family:var(--rd-font-serif);font-size:11.5px}
.bar{height:6px;background:#e4e4e4}
.bar--before{background:#C9C9C9!important}
.bar--after{background:var(--rd-ink)!important}
.score-card__warn{font-family:var(--rd-font-serif);font-style:italic}
.play-wet{font-family:var(--rd-font-serif);font-size:12px}
.play-wet li.is-wet::marker{color:var(--rd-water-today)}
.score-card .seg button{min-height:34px;font-size:12px}
.score-table th{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--rd-ink-2)}

/* ---------- popovers, sheets, options, compare ---------- */
.popover,.sheet{border:1px solid var(--rd-ink);box-shadow:var(--rd-shadow-2)}
.popover label{min-height:36px}
.popover input[type=checkbox],.sheet input[type=checkbox]{width:18px;height:18px;accent-color:var(--rd-ink)}
.opt-list__item{min-height:var(--rd-tap)}
.opt-list__thumb{border:1px solid var(--rd-ink);border-radius:0}
#compareBtn{border:1px solid var(--rd-ink);font-weight:700;min-height:var(--rd-tap)}
.compare__body{border:1px solid var(--rd-ink);padding:22px 24px}
.compare__body > .panel-title{font-size:15px;display:flex;gap:10px;align-items:center;margin-bottom:14px}
.compare__card{border:1px solid var(--rd-hair);border-radius:var(--rd-radius-md)}
.compare__card h4{font-family:var(--rd-font-serif);font-style:italic;font-weight:600;font-size:17px;display:flex;align-items:center;gap:8px}
.compare__card h4::before{content:"";width:14px;height:14px;flex:0 0 14px;background:var(--rd-accent)}
.compare__thumbs img{border:1px solid var(--rd-ink);border-radius:0}
.compare__thumbs figcaption{font-weight:700;color:var(--rd-ink);font-size:11px}
.compare__card .score-table td:last-child,.compare__card .score-table th:last-child{border-left:1px solid var(--rd-hair)}
.toast{font-weight:600}

/* ---------- touch ---------- */
@media (pointer:coarse){
  button,select,.seg__btn,.seg button,.score-card .seg button{min-height:var(--rd-tap)}
  .piece-card__info{min-height:32px;width:32px}
}
/* ---------- phone ---------- */
@media (max-width:899px){
  .topbar .teach-label{display:none}
  .topbar__mode{display:none}
  .stage::after{content:"Simplified teaching model";position:absolute;left:8px;top:8px;z-index:4;font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--rd-ink-2);background:#fff;border:1px dashed var(--rd-ink-2);border-radius:4px;padding:1px 6px;pointer-events:none}
  .score-card{max-height:46%;top:30px}
  .tray{border-top:1px solid var(--rd-ink)}
  .tray__grab::after{background:var(--rd-ink);opacity:.35}
  .run-btn{font-size:15px;padding:0 14px 0 10px}
  .time-picker__btn{font-size:13px}
}

/* ================= usability fixes (student test, Oct 25) ================= */
/* (g) 13px minimum text */
.small,small,.tag,.teach-label,.piece-card__hint,.dock__readout,.dock__readout small,.metric__label,.metric__note,.score-card__level,.score-list__note,
.water-key,.water-key__row,.water-key__title,.time-picker__btn small,.compare__thumbs figcaption,.score-table,.score-table th,.chip,.field,.unit,
.tool-sheet__readout,.stepper__m,.piece-card__count,.ctx-toolbar__name,.play-wet,.score-card__warn,.info-card h4,.opt-list__body,.progress,.hint,.elev-chip,
.score-card .seg button,.score-card .metric--scores > .metric__label small,.piece-card__hint .tag,.topbar__mode{font-size:13px!important}
.tag,.teach-label{letter-spacing:.04em}
.time-picker__btn small{line-height:1.1}
/* (a) sidebar never scrolls sideways; long text wraps */
.tray,.tray[data-height]{overflow-x:hidden}
@media (min-width:900px){.tray__tabs{flex-wrap:wrap!important;overflow:visible}}
.tray *{min-width:0}
.tray :is(p,li,h3,h4,span,div,label,b,small){overflow-wrap:anywhere}
.piece-card__name,.piece-card__hint{white-space:normal;overflow-wrap:anywhere}
.editor__fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.field input{width:100%;max-width:96px}
/* grouped tray (GIS adding) */
.tray__hint{font-family:var(--rd-font-serif);font-size:14px;line-height:1.35;color:var(--rd-ink);background:var(--rd-surface-2);border-left:3px solid var(--rd-ink);padding:8px 10px;margin:0 0 10px}
.tray__group{margin:0 0 12px}
.tray__group > :is(h3,h4,.panel-title,header){font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin:6px 0}
.tray__group--explain{opacity:.85}
.tray__group--explain > :is(h3,h4,.panel-title,header){color:var(--rd-ink-2)}
.tray__group--explain .piece-card{border-style:dashed;background:#fafafa}
.piece-note{font-family:var(--rd-font-serif);font-style:italic;font-size:13px;color:var(--rd-ink-2);line-height:1.3}
/* (d) 3D: say why the tray is greyed out */
.tray:has(.piece-card.is-disabled) .tray__cards{position:relative;padding-top:44px}
.tray:has(.piece-card.is-disabled) .tray__cards::before{content:"Switch to 2D to place pieces";position:absolute;left:2px;right:2px;top:2px;height:36px;display:flex;align-items:center;justify-content:center;gap:6px;background:var(--rd-ink);color:#fff;font-size:13px;font-weight:700;border-radius:var(--rd-radius-sm);z-index:2}
.piece-card.is-disabled{opacity:.5}
/* (b) info card = slide-over (desktop) / bottom sheet (phone), "what it does" first */
#infoCard.info-card{position:fixed;z-index:65;margin:0;background:#fff;box-shadow:0 10px 40px rgba(0,0,0,.25);overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:10px;animation:rd-slide var(--rd-dur-med) var(--rd-ease)}
#infoCard .info-card__body{order:1}#infoCard .info-card__fig{order:2;align-self:center}
#infoCard .info-card__fig img{width:96px;height:96px}
#infoCard .info-card__body > p:first-of-type{font-size:15px;line-height:1.45}
#infoCard .info-card__close{position:sticky;bottom:0;align-self:stretch;min-height:var(--rd-tap);background:var(--rd-ink);color:#fff;font-weight:700;border:0}
@media (min-width:900px){#infoCard.info-card{top:calc(var(--rd-topbar-h) + 10px);left:calc(var(--rd-tray-w) + 10px);width:380px;max-height:calc(100vh - var(--rd-topbar-h) - var(--rd-run-h) - 44px);border-radius:var(--rd-radius-md)}}
@media (max-width:899px){#infoCard.info-card{left:0;right:0;bottom:0;max-height:70vh;border-radius:16px 16px 0 0;border-bottom:0}}
@keyframes rd-slide{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){#infoCard.info-card{animation:none}}
/* (c) compact, collapsible score panel */
.score-card{padding:10px 12px;gap:6px}
@media (min-width:900px){.score-card{width:288px;max-height:min(62%,460px)}}
@media (max-width:899px){.score-card{max-height:36%}}
.score-card__head{font-size:12px}
.score-card__takeaway{order:1;font-family:var(--rd-font-serif);font-size:14px;line-height:1.35;margin:2px 0 0;color:var(--rd-ink)}
.score-card .metric--scores{order:1}
.score-card__details{order:3;border-top:1px solid var(--rd-hair);padding-top:4px}
.score-card__details > summary{min-height:36px;display:flex;align-items:center;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;list-style:none}
.score-card__details > summary::-webkit-details-marker{display:none}
.score-card__details > summary::after{content:"▸";margin-left:6px}.score-card__details[open] > summary::after{content:"▾"}
.score-card__details:not([open]) ~ *:not(.seg):not(footer){}
.score-list__item{padding:7px 8px}
.score-list__value{font-size:26px}
.score-card footer,.score-card > p:last-child{font-size:13px;color:var(--rd-ink-2)}
/* warning callout: calm, ink text + thin accent bar */
.callout{border-left:3px solid var(--rd-ink);background:var(--rd-surface-2);padding:7px 10px;border-radius:0 6px 6px 0;font-family:var(--rd-font-serif);font-size:13.5px;line-height:1.35;color:var(--rd-ink)}
.callout--warn{border-left-color:var(--rd-accent);background:#FBF5F0}
.callout--warn b,.callout--warn strong{font-family:var(--rd-font)}
.score-card__warn{border-left:3px solid var(--rd-accent);padding:4px 8px;background:#FBF5F0;color:var(--rd-ink)!important;font-style:normal}
/* event segmented control next to the time picker */
.seg--event{border:1px solid var(--rd-ink)}
.seg--event button,.seg--event .seg__btn{min-height:var(--rd-tap);font-size:13px;font-weight:700;padding:0 12px}
.dock:has(.seg--event){grid-template-areas:"play picker run" "event event event" "scrub scrub scrub" "read read read"}
.dock .seg--event{grid-area:event;justify-self:start}
@media (min-width:900px){.dock:has(.seg--event){grid-template-columns:auto auto auto 1fr auto;grid-template-areas:"play picker event scrub run" "read read read read run"}.dock .seg--event{justify-self:auto}}
details.advanced{border-top:1px solid var(--rd-hair);padding-top:6px}
details.advanced > summary{min-height:var(--rd-tap);display:flex;align-items:center;font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
/* (f) Run is the one obvious primary */
.run-btn{min-width:180px;justify-content:center;box-shadow:0 3px 0 #000,0 8px 22px rgba(0,0,0,.22)}
.run-btn:not(.run-btn--busy){animation:none}
.run-btn--busy{opacity:1;background:#3a3a3a}
.topbar button.is-primary,.sheet button.is-primary{box-shadow:none}
/* first-run overlay (DOM requested from GIS: .onboard) */
.onboard{position:fixed;inset:0;z-index:90;background:rgba(26,26,26,.45);display:flex;align-items:center;justify-content:center;padding:16px}
.onboard__card{width:min(460px,100%);background:#fff;border:1px solid var(--rd-ink);border-radius:var(--rd-radius-lg);padding:22px 24px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.onboard__kicker{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--rd-ink-2)}
.onboard__title{font-size:22px;font-weight:800;margin:6px 0 8px}
.onboard__text{font-family:var(--rd-font-serif);font-size:16px;line-height:1.45;margin:0 0 16px}
.onboard__dots{display:flex;gap:6px}.onboard__dots i{width:8px;height:8px;border-radius:50%;background:#d0d0d0}.onboard__dots i.is-on{background:var(--rd-ink)}
.onboard__foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.onboard__skip{border:0;background:none;color:var(--rd-ink-2);font-weight:600;min-height:var(--rd-tap)}
.onboard__next{background:var(--rd-ink);color:#fff;border:0;min-height:var(--rd-tap);padding:0 20px;font-weight:800;border-radius:10px}
.onboard-spot{position:relative;z-index:91;box-shadow:0 0 0 3px #fff,0 0 0 6px var(--rd-accent)!important;border-radius:12px}
/* (g) plain labels + tooltips for icon buttons */
.topbar .icon-btn[aria-label],.ctx-toolbar button[title]{position:relative}
.topbar .icon-btn[aria-label]:is(:hover,:focus-visible)::after,.ctx-toolbar button[title]:is(:hover,:focus-visible)::after{content:attr(title);position:absolute;top:calc(100% + 6px);right:0;z-index:100;white-space:nowrap;background:var(--rd-ink);color:#fff;font-size:13px;font-weight:600;padding:5px 9px;border-radius:6px;pointer-events:none}
#btnMore:is(:hover,:focus-visible)::after{content:"More: study zone, storm, settings, play, about"}
#btnUndo:not([title]):is(:hover,:focus-visible)::after,#btnRedo:not([title]):is(:hover,:focus-visible)::after{content:attr(aria-label)}
#btnReset:is(:hover,:focus-visible)::after{content:"Remove all pieces and start over";position:absolute;top:calc(100% + 6px);right:0;z-index:100;white-space:nowrap;background:var(--rd-ink);color:#fff;font-size:13px;font-weight:600;padding:5px 9px;border-radius:6px}
#btnReset{position:relative}
@media (min-width:900px){
  #btnUndo::before{content:"Undo";font-size:13px;margin-right:4px;order:2}
  #btnRedo::before{content:"Redo";font-size:13px;margin-right:4px;order:2}
  #btnMore::before{content:"More";font-size:13px;margin-right:4px}
  #btnUndo,#btnRedo,#btnMore{display:inline-flex;align-items:center;flex-direction:row-reverse;gap:4px}
}
/* ================= Albus round: thin lines, editor in view, 3D compact ================= */
.piece-card__icon img,.piece-card img{min-width:40px;min-height:40px;filter:none!important;image-rendering:auto}
/* sizing controls stay inside the viewport */
.ctx-toolbar{max-width:calc(100vw - 16px);overflow-x:auto;scrollbar-width:none}
@media (min-width:900px){
  .editor{position:sticky;bottom:0;z-index:3;background:#fff;max-height:calc(100vh - var(--rd-topbar-h) - 24px);overflow-y:auto;box-shadow:0 -6px 16px rgba(0,0,0,.08)}
}
@media (max-width:899px){
  /* editor placement on phones: app.js clamps it to the viewport (GIS) */
  .tool-sheet{max-height:calc(100% - 16px);overflow-y:auto}
}
.stepper{flex-wrap:wrap}
/* event control = same look as the year picker */
.seg--event{border:1px solid var(--rd-ink);border-radius:var(--rd-radius-pill);background:#fff}
.seg--event button.is-on,.seg--event .seg__btn.is-on{background:var(--rd-ink);color:#fff}
/* 3D tilt: score card shrinks to scores + takeaway */
body.is-3d .score-card,body:has(#btn3d.is-on) .score-card{max-height:min(40%,300px)}
body.is-3d .score-card > :not(.score-card__head):not(.metric--scores):not(.score-card__takeaway):not(.seg),
body:has(#btn3d.is-on) .score-card > :not(.score-card__head):not(.metric--scores):not(.score-card__takeaway):not(.seg){display:none}
body.is-3d .score-list__note,body:has(#btn3d.is-on) .score-list__note{display:none}
/* info sheet lives inside the tray's stacking context on phones: sit above the dock */
@media (max-width:899px){#infoCard.info-card{bottom:calc(var(--rd-run-h) + 52px);max-height:min(62vh,calc(100vh - var(--rd-topbar-h) - var(--rd-run-h) - 70px))}}
/* polish pass 2 */
.piece-card__hint .tag{text-transform:none;letter-spacing:0;font-weight:600;border:0;padding:0;display:block;color:var(--rd-ink-2);font-style:italic;font-family:var(--rd-font-serif);white-space:normal}
.tray__tab{padding:0 8px}
.ctx-toolbar__name{max-width:200px;text-transform:none;letter-spacing:0;font-size:14px!important}
.score-list__value{font-size:22px;line-height:1.1}
.score-list__label{font-size:13px}
/* ================= audit round (usability/audit/AUDIT.md) ================= */
/* #1 phone: score card docks to the bottom of the map, compact */
@media (max-width:899px){
  .score-card{top:auto;bottom:8px;max-height:38vh}
  .score-card:not(.is-open) > :not(.score-card__head):not(.metric--scores):not(.score-card__takeaway):not(.score-card__details):not(.score-card__more){display:none}
  .score-card:not(.is-open) .score-list__note{display:none}
  .score-card__more{min-height:var(--rd-tap);font-weight:700;border:1px solid var(--rd-ink);background:#fff;margin-left:auto}
}
/* 3D (body.is-3d from app.js): compact card + tray note keyed to it */
body.is-3d .tray__cards{position:relative;padding-top:44px}
body.is-3d .tray__cards::before{content:"Switch to 2D to place pieces";position:absolute;left:2px;right:2px;top:2px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--rd-ink);color:#fff;font-size:13px;font-weight:700;border-radius:var(--rd-radius-sm);z-index:2}
/* #5 tap targets >= 44px */
.seg__btn,.seg button,.tray__tab,.compare button,.compare__body .close,.opt-list__acts button,.time-picker__btn{min-height:var(--rd-tap)}
.piece-card__info::after{content:"";position:absolute;inset:-10px}
.tray__grab{height:28px;min-height:28px}
.score-card summary{min-height:var(--rd-tap);display:flex;align-items:center}
.score-card input[type=checkbox]{width:24px;height:24px}
.maplibregl-ctrl-group button{width:44px!important;height:44px!important}
.maplibregl-ctrl-attrib a{text-decoration:underline}
/* #6 small phones */
.teach-label{white-space:nowrap}
@media (max-width:599px){
  .topbar .teach-label{display:none}
  .topbar__title{flex:1 1 auto;min-width:0}
  .topbar__name{font-size:13px}
  .seg--view .seg__btn{padding:0 var(--rd-space-2)}
}
/* #8 text floors: body/control 13px (set above), tags/notes >= 12px */
.tag,.piece-card__hint .tag,.score-list__note,.maplibregl-ctrl-attrib{font-size:12px!important}
.tray__cards{min-height:150px}
/* phone: while a piece is armed, the info sheet is a short peek so the map stays tappable */
@media (max-width:899px){
  body:has(.piece-card.is-armed) #infoCard.info-card{max-height:30vh}
}
/* phone dock: keep Today/2076/2096 + sublabels on one line each */
@media (max-width:599px){
  .run-btn{min-width:0;padding-left:10px;padding-right:12px}
  .time-picker__btn{padding:0 2px;min-width:52px}
  .time-picker__btn small{white-space:nowrap}
}
.time-picker__btn{overflow:hidden;min-width:0}
.time-picker__btn small{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#infoCard .info-card__close{order:9;width:100%;flex:0 0 auto;margin-top:6px;box-shadow:0 -14px 14px #fff}
/* phone: score card sits just above the tray sheet (stage runs under the tray) */
@media (max-width:899px){
  .score-card{bottom:calc(var(--rd-sheet-default) + 8px);max-height:min(38vh,calc(100% - var(--rd-sheet-default) - 72px));overflow-y:auto}
  body:has(.tray[data-height=peek]) .score-card{bottom:calc(var(--rd-sheet-peek) + 8px);max-height:38vh}
  body:has(.tray[data-height=full]) .score-card{display:none}
}
/* explain "?" chips: small round visual, 44px hit area */
.explain-q{position:relative;display:inline-flex;align-items:center;justify-content:center;width:22px!important;height:22px!important;min-height:22px!important;min-width:22px!important;padding:0!important;border-radius:50%!important;border:1px solid var(--rd-hair);background:#fff;font:italic 600 13px/1 var(--rd-font-serif);vertical-align:middle;margin-left:4px}
.explain-q::after{content:"";position:absolute;inset:-11px}
.score-card summary{border:0!important;padding:0 4px;font-size:13px;font-weight:600;width:auto}