/* BTW GBL Tracker: app styles.
   Ported from mockups/components.css (shared components). Needs tokens.css first.
   Fonts are self-hosted from ../fonts (no Google Fonts at runtime).
   Rules: dark only; no text under 11px; tap targets >= var(--tap); lists are rows. */

/* ═══ Fonts ═══ */
@font-face { font-family: 'Bebas Neue'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/bebas-neue-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/barlow-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/barlow-600.woff2') format('woff2'); }
@font-face { font-family: 'DM Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/dm-mono-400.woff2') format('woff2'); }

/* BTW GBL Tracker: shared components (mockups → app UI tasks match these)
   Needs tokens.css first. Rules: no text under 11px; small text uses
   var(--muted) or brighter; tap targets ≥ var(--tap); lists are rows. */

/* ═══ Base ═══ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overflow-x: hidden; }
img { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--cyan); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico.sm { width: 15px; height: 15px; }

/* League scoping: children read --lc */
.lg-great  { --lc: var(--lg-great); }
.lg-ultra  { --lc: var(--lg-ultra); }
.lg-master { --lc: var(--lg-master); }
.lg-little { --lc: var(--lg-little); }

/* ═══ App shell: phone column, centered on wide screens ═══ */
.app { position: relative; max-width: 480px; min-height: 100vh; min-height: 100dvh; margin: 0 auto; display: flex; flex-direction: column; background: var(--bg); }
@media (min-width: 520px) { .app { border-left: 1px solid var(--border); border-right: 1px solid var(--border); } }
.app-main { flex: 1; min-width: 0; padding: 0 16px 24px; }

.appbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0 16px; background: rgba(10,10,15,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.appbar-logo { width: 34px; height: 34px; object-fit: contain; }
.appbar-word { font-family: var(--font-head); font-size: 22px; letter-spacing: .06em; line-height: 1; color: var(--text-hi); white-space: nowrap; }
.appbar-word em { font-style: normal; color: var(--cyan); }
.appbar-sp { flex: 1; }
.appbar-back { display: grid; place-items: center; width: var(--tap); height: var(--tap); margin-left: -12px; color: var(--muted); border-radius: 10px; }

.lg-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 11px; border-radius: 999px; border: 1px solid rgba(var(--lc),.45); background: rgba(var(--lc),.1); color: rgb(var(--lc)); font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.lg-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--lc)); box-shadow: 0 0 8px rgba(var(--lc),.8); }

/* Active GBL format in the app bar: "Ultra League: Mega Edition · 2500" (name ellipsizes, CP never does) */
.fmt-pill { display: inline-flex; align-items: center; gap: 7px; min-width: 0; flex: 0 1 auto; min-height: 32px; padding: 0 11px; border-radius: 999px; border: 1px solid rgba(var(--lc),.45); background: rgba(var(--lc),.1); color: var(--text-hi); white-space: nowrap; }
.fmt-pill::before { content: ''; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--lc)); box-shadow: 0 0 8px rgba(var(--lc),.8); }
.fmt-pill b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 600; }
.fmt-pill span { flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; color: rgb(var(--lc)); }
.submit-btn { flex-shrink: 0; gap: 6px; border: 1px solid rgba(0,229,255,.55); background: rgba(0,229,255,.1); color: var(--cyan); }
.submit-btn .sb-long { margin-right: .4em; }
@media (max-width: 429px) { .submit-btn .sb-long { display: none; } .submit-btn { padding: 0 10px; } }
.submit-btn[aria-disabled="true"] { border-color: var(--border); background: var(--surface); color: var(--muted); }
.icon-btn { display: grid; place-items: center; flex-shrink: 0; width: var(--tap); height: var(--tap); border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }

/* CP badge in its league color */
.cp { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; padding: 2px 7px; border-radius: 5px; border: 1px solid rgba(var(--lc),.5); background: rgba(var(--lc),.12); color: rgb(var(--lc)); white-space: nowrap; }

/* Tab bar (Log / Meta / Settings) */
.tabbar { display: grid; grid-template-columns: repeat(3, 1fr); height: calc(58px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: rgba(10,10,15,.96); border-top: 1px solid var(--border); }
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: var(--tap); color: var(--muted); text-decoration: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.tabbar a.on { color: var(--cyan); }
.tabbar a.on .ico { filter: drop-shadow(0 0 6px rgba(0,229,255,.6)); }

/* Sticky bottom dock: primary actions + tab bar */
.dock { position: sticky; bottom: 0; z-index: 20; background: rgba(10,10,15,.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--border); }
.dock-in { padding: 12px 16px; display: grid; gap: 8px; }
.dock-in + .tabbar { border-top: 1px solid var(--border); }
.dock > .tabbar:first-child { border-top: 0; }
.dock-row { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.dock-row.even { grid-template-columns: 1fr 1fr; }
.dock-note { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--muted); text-align: center; text-transform: uppercase; }

/* ═══ Type: px-style headings and labels ═══ */
.kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); }
.kicker::before { content: ''; width: 24px; height: 1px; background: currentColor; box-shadow: 0 0 8px currentColor; }
.h1 { margin: 10px 0 0; font-family: var(--font-head); font-weight: 400; font-size: 48px; letter-spacing: .03em; line-height: .92; color: var(--text-hi); }
.h1 em { font-style: normal; color: var(--cyan); text-shadow: 0 0 22px rgba(0,229,255,.3); }
.h2 { margin: 0; font-family: var(--font-head); font-weight: 400; font-size: 28px; letter-spacing: .04em; line-height: 1; color: var(--text-hi); }
.sub { margin: 10px 0 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
.lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lbl b { font-weight: 500; color: var(--text); }
.num { font-family: var(--font-head); font-weight: 400; letter-spacing: .02em; line-height: 1; }
.w-c { color: var(--green); } .l-c { color: var(--pink); } .t-c { color: var(--yellow); } .m-c { color: var(--muted); }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 26px 0 10px; }

/* Hero band: grid texture + glow in --hc (r,g,b) */
.hero { --hc: 0,229,255; position: relative; margin: 0 -16px; padding: 26px 16px 22px; overflow: hidden; border-bottom: 1px solid var(--border); }
.hero::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 75% 15%, #000 0%, transparent 75%); mask-image: radial-gradient(ellipse 90% 80% at 75% 15%, #000 0%, transparent 75%); }
.hero::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 60% at 88% 12%, rgba(var(--hc),.16) 0%, transparent 70%),
              radial-gradient(ellipse 50% 40% at 0% 100%, rgba(255,61,113,.08) 0%, transparent 70%); }
.hero > * { position: relative; z-index: 1; }
.hero .kicker { color: rgb(var(--hc)); }

/* Stat strip (one size everywhere in the app) */
.statbar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); margin-top: 18px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.st { padding: 12px 0 12px 12px; border-left: 1px solid var(--border); min-width: 0; }
.st:first-child { border-left: 0; padding-left: 0; }
.st .num { font-size: 30px; color: var(--text-hi); white-space: nowrap; }
.st .num.c { color: rgb(var(--lc, 0,229,255)); }
.st .lbl { margin-top: 4px; }
.hero .statbar { border-bottom: 0; }

/* ═══ Panels (px-panel) ═══ */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.panel-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 0 16px; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.panel-h b { font-weight: 500; color: var(--text); }

/* ═══ Buttons ═══ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 20px; border-radius: 12px; font-family: var(--font-head); font-size: 22px; letter-spacing: .08em; line-height: 1; text-decoration: none; white-space: nowrap; transition: transform .08s, background .2s, box-shadow .2s; }
.btn:active { transform: scale(.98); }
.btn-block { display: flex; width: 100%; }
.btn-primary { background: var(--cyan); color: var(--bg); box-shadow: 0 0 24px rgba(0,229,255,.28); }
.btn-ghost { border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.btn-ghost.cy { border-color: rgba(0,229,255,.45); color: var(--cyan); background: rgba(0,229,255,.06); }
.btn-danger { border: 1px solid rgba(255,61,113,.5); background: rgba(255,61,113,.08); color: var(--pink); }
.btn-sm { min-height: var(--tap); padding: 0 14px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; border-radius: 10px; }

/* ═══ Chips, segmented toggle, league tabs ═══ */
.chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; border: 1px solid rgba(var(--cc, 0,229,255),.4); background: rgba(var(--cc, 0,229,255),.08); color: rgb(var(--cc, 0,229,255)); white-space: nowrap; }
.chip.gr { --cc: 0,255,136; } .chip.pk { --cc: 255,61,113; } .chip.yl { --cc: 255,209,102; } .chip.pu { --cc: 162,89,255; } .chip.mu { --cc: 153,153,176; } .chip.lg { --cc: var(--lc); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse 1.8s infinite; flex-shrink: 0; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0,255,136,.55); } 70% { box-shadow: 0 0 0 7px rgba(0,255,136,0); } 100% { box-shadow: 0 0 0 0 rgba(0,255,136,0); } }

.seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); }
.seg button { min-height: var(--tap); min-width: 54px; padding: 0 12px; border-radius: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--surface2); color: var(--text-hi); box-shadow: inset 0 0 0 1px var(--border); }

.lg-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lg-tab { --lc: 153,153,176; position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 64px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); text-align: left; transition: border-color .2s, background .2s; }
.lg-tab .num { font-size: 24px; color: var(--text); }
.lg-tab::after { content: ''; position: absolute; top: 12px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--lc)); opacity: .5; }
.lg-tab.lg-great { --lc: var(--lg-great); } .lg-tab.lg-ultra { --lc: var(--lg-ultra); } .lg-tab.lg-master { --lc: var(--lg-master); } .lg-tab.lg-little { --lc: var(--lg-little); }
.lg-little { --lc: var(--lg-little); }
.lg-tab[aria-pressed="true"] { border-color: rgba(var(--lc),.7); background: linear-gradient(160deg, rgba(var(--lc),.18), rgba(var(--lc),.04)); box-shadow: 0 0 18px rgba(var(--lc),.15), inset 0 0 0 1px rgba(var(--lc),.25); }
.lg-tab[aria-pressed="true"] .num { color: rgb(var(--lc)); }
.lg-tab[aria-pressed="true"]::after { opacity: 1; box-shadow: 0 0 8px rgb(var(--lc)); }
.lg-tabs.slim .lg-tab { min-height: var(--tap); flex-direction: row; align-items: center; justify-content: center; padding: 0 8px; }
.lg-tabs.slim .lg-tab::after { display: none; }
.lg-tabs.slim .lg-tab .num { font-size: 20px; }

/* ═══ Pokémon bits ═══ */
.spr { position: relative; display: inline-grid; place-items: center; flex-shrink: 0; width: var(--s, 48px); height: var(--s, 48px); }
.spr img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.spr .sh { position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--bg); border: 1px solid rgba(162,89,255,.6); color: var(--purple); box-shadow: 0 0 8px rgba(162,89,255,.35); }
.spr .sh svg { width: 12px; height: 12px; fill: currentColor; }
.spr.unseen { border: 1.5px dashed var(--border); border-radius: 50%; color: var(--muted); font-family: var(--font-head); font-size: calc(var(--s, 48px) * .42); }

.types { display: flex; gap: 4px; flex-wrap: wrap; }
.t { font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; padding: 0 5px; border-radius: 3px; font-weight: 500; white-space: nowrap; border: 1px solid; line-height: 1.5; }
.t-normal   { background: rgba(168,168,120,.25); color: #b8b88a; border-color: rgba(168,168,120,.4); }
.t-fire     { background: rgba(240,128,48,.25);  color: #f39050; border-color: rgba(240,128,48,.4); }
.t-water    { background: rgba(104,144,240,.25); color: #8aa8f5; border-color: rgba(104,144,240,.4); }
.t-grass    { background: rgba(120,200,80,.25);  color: #8fd36d; border-color: rgba(120,200,80,.4); }
.t-electric { background: rgba(248,208,48,.25);  color: #f8d030; border-color: rgba(248,208,48,.4); }
.t-ice      { background: rgba(152,216,216,.25); color: #a8e0e0; border-color: rgba(152,216,216,.4); }
.t-fighting { background: rgba(192,48,40,.25);   color: #ec7a72; border-color: rgba(192,48,40,.5); }
.t-poison   { background: rgba(160,64,160,.25);  color: #d27ed2; border-color: rgba(160,64,160,.5); }
.t-ground   { background: rgba(224,192,104,.25); color: #e6cb80; border-color: rgba(224,192,104,.4); }
.t-flying   { background: rgba(168,144,240,.25); color: #b9a6f4; border-color: rgba(168,144,240,.4); }
.t-psychic  { background: rgba(248,88,136,.25);  color: #fa79a0; border-color: rgba(248,88,136,.4); }
.t-bug      { background: rgba(168,184,32,.25);  color: #bccb3c; border-color: rgba(168,184,32,.4); }
.t-rock     { background: rgba(184,160,56,.25);  color: #cdb558; border-color: rgba(184,160,56,.4); }
.t-ghost    { background: rgba(112,88,152,.3);   color: #ae99d4; border-color: rgba(112,88,152,.55); }
.t-dragon   { background: rgba(112,56,248,.25);  color: #a688ff; border-color: rgba(112,56,248,.5); }
.t-dark     { background: rgba(112,88,72,.35);   color: #bca390; border-color: rgba(112,88,72,.6); }
.t-steel    { background: rgba(184,184,208,.25); color: #c4c4da; border-color: rgba(184,184,208,.4); }
.t-fairy    { background: rgba(238,153,172,.25); color: #f0a7b8; border-color: rgba(238,153,172,.4); }

/* Move label with a type dot (site .p2-move-chip) */
.mv { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-body); font-size: 13px; color: var(--muted); white-space: nowrap; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--c, #888); }
.d-normal{--c:#a8a878} .d-fire{--c:#f08030} .d-water{--c:#6890f0} .d-grass{--c:#78c850} .d-electric{--c:#f8d030} .d-ice{--c:#98d8d8} .d-fighting{--c:#e0574f} .d-poison{--c:#c062c0} .d-ground{--c:#e0c068} .d-flying{--c:#a890f0} .d-psychic{--c:#f85888} .d-bug{--c:#a8b820} .d-rock{--c:#b8a038} .d-ghost{--c:#9a82c4} .d-dragon{--c:#8f66ff} .d-dark{--c:#a88b76} .d-steel{--c:#b8b8d0} .d-fairy{--c:#ee99ac}

/* Outcome marks */
.oc { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; font-family: var(--font-head); font-size: 18px; line-height: 1; flex-shrink: 0; }
.oc.w { background: rgba(0,255,136,.12); color: var(--green); border: 1px solid rgba(0,255,136,.4); }
.oc.l { background: rgba(255,61,113,.12); color: var(--pink); border: 1px solid rgba(255,61,113,.4); }
.oc.tie { background: rgba(255,209,102,.12); color: var(--yellow); border: 1px solid rgba(255,209,102,.4); }
.oc.n { background: var(--surface2); color: var(--muted); border: 1px solid var(--border); }

/* ═══ Battle rows (set summary, review) ═══ */
.brow { display: grid; grid-template-columns: 24px 30px minmax(0,1fr) 18px; gap: 10px; align-items: center; min-height: 64px; padding: 8px 14px 8px 12px; border-bottom: 1px solid rgba(42,42,58,.6); color: inherit; text-decoration: none; }
.brow:last-child { border-bottom: 0; }
.bn { font-family: var(--font-head); font-size: 20px; color: var(--muted); text-align: center; }
.opp { display: block; min-width: 0; }
.opp-s { display: flex; gap: 2px; }
.opp-s .spr { --s: 40px; }
.opp-s .spr.unseen { --s: 34px; margin: 3px; }
.opp-n { display: block; margin-top: 1px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opp-n b { color: var(--text); font-weight: 400; }
.opp-m { display: flex; flex-wrap: wrap; gap: 0 10px; margin-top: 3px; }
.opp-m .who { font-family: var(--font-mono); font-size: 11px; line-height: 19px; color: var(--cyan); }
.chev { width: 18px; height: 18px; color: var(--muted); }

/* Set header line ("SET 1  4–1      ✎ Record") */
.set-h .rec { font-family: var(--font-head); font-size: 22px; letter-spacing: .04em; color: var(--text-hi); margin-left: 8px; }
.set-h .edit { min-height: var(--tap); display: inline-flex; align-items: center; gap: 6px; margin: -12px -8px -12px 0; padding: 0 8px; color: var(--cyan); font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }

/* ═══ Logger ═══ */
.setbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0 4px; }
.set-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.set-id .num { font-size: 26px; color: var(--text-hi); white-space: nowrap; }
.set-id .num small { font-size: 19px; color: var(--muted); margin-left: 6px; letter-spacing: .04em; }
.set-id .lbl { white-space: nowrap; }
.dots { display: flex; margin-right: -10px; }
.bdot { display: grid; place-items: center; width: var(--tap); height: var(--tap); }
.bdot i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--muted); opacity: .6; transition: all .2s; }
.bdot.w i { background: var(--green); border-color: var(--green); opacity: 1; box-shadow: 0 0 10px rgba(0,255,136,.55); }
.bdot.l i { background: var(--pink); border-color: var(--pink); opacity: 1; box-shadow: 0 0 10px rgba(255,61,113,.55); }
.bdot.tie i { background: var(--yellow); border-color: var(--yellow); opacity: 1; box-shadow: 0 0 10px rgba(255,209,102,.55); }
.bdot.n i { background: var(--muted); border-color: var(--muted); opacity: 1; }
.bdot.cur i { width: 18px; height: 18px; opacity: 1; border: 2px solid var(--cyan); box-shadow: 0 0 0 4px rgba(0,229,255,.12), 0 0 12px rgba(0,229,255,.5); }

.slots { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; }
.slot { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-height: 60px; padding: 6px 8px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); text-align: left; color: inherit; text-decoration: none; cursor: pointer; transition: border-color .15s, background .15s; }
.slot:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
/* Flame badge on a filled slot tab, on the sprite's corner: tap to swap that slot
   regular <-> shadow. The hit area (46×44) covers the sprite, so the name keeps its width. */
.slot-sh { position: absolute; left: 0; bottom: 0; width: 46px; height: var(--tap); display: grid; place-items: end; padding: 0 2px 3px 0; }
.slot-sh i { width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; border: 1px dashed var(--muted); background: var(--bg); color: var(--muted); }
.slot-sh svg { width: 11px; height: 11px; fill: currentColor; }
.slot-sh.on i { border: 1px solid rgba(162,89,255,.75); color: var(--purple); box-shadow: 0 0 8px rgba(162,89,255,.45); }
.spr.unseen.armed { border-color: var(--purple); color: #d2b5ff; }
.slot-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-v { display: flex; align-items: center; gap: 6px; min-width: 0; }
.slot-v .spr { --s: 30px; }
.slot-n { font-size: 14px; font-weight: 600; color: var(--text-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.slot-v.empty .slot-n { color: var(--muted); font-weight: 500; }
.slot.moves-on { box-shadow: inset 0 -2px 0 var(--cyan); }
.slot[aria-selected="true"] { border-color: var(--cyan); background: linear-gradient(180deg, rgba(0,229,255,.12), rgba(0,229,255,.03)); box-shadow: 0 0 16px rgba(0,229,255,.18); }
.slot[aria-selected="true"] .slot-k { color: var(--cyan); }
/* The slot the next pick fills, when it isn't the one being edited */
.slot.is-next { border-style: dashed; border-color: rgba(0,229,255,.55); }
.slot.is-next .slot-k { color: var(--cyan); }

.find { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; margin-top: 8px; }
.search { position: relative; }
.search .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); width: 17px; height: 17px; pointer-events: none; }
.search input { width: 100%; height: var(--tap); padding: 0 12px 0 38px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); font-size: 16px; color: var(--text); outline: none; }
.search input::placeholder { color: var(--muted); }
.search input:focus { border-color: rgba(0,229,255,.6); box-shadow: 0 0 0 3px rgba(0,229,255,.12); }
.shadow-tg { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 96px; height: var(--tap); padding: 0 10px; line-height: 1.1; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.shadow-tg svg { width: 15px; height: 15px; fill: currentColor; }
.shadow-tg .tg-l { display: inline-flex; align-items: center; gap: 6px; }
.shadow-tg .tg-hint { display: none; font-size: 11px; letter-spacing: .02em; color: #d2b5ff; }
.shadow-tg.armed .tg-hint { display: block; }
.shadow-tg[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.shadow-tg[aria-pressed="true"] { border-color: rgba(162,89,255,.7); background: rgba(162,89,255,.16); color: #d2b5ff; box-shadow: 0 0 14px rgba(162,89,255,.3); }

/* Inline move strip: fast row, then charged row. Optional, non-blocking. */
.mstrip { margin-top: 8px; padding: 5px 0; border: 1px solid rgba(0,229,255,.3); border-radius: 12px; background: linear-gradient(180deg, rgba(0,229,255,.06), var(--surface)); }
.mrow-k { display: grid; grid-template-columns: 70px minmax(0,1fr); align-items: start; padding: 4px 0; }
.mrow-k + .mrow-k { margin-top: 1px; border-top: 1px solid rgba(0,229,255,.16); padding-top: 6px; } /* fast and charged are two boxes: a charged chip never sits beside the Fast label */
.mk { padding: 6px 0 0 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; line-height: 1.25; text-transform: uppercase; color: var(--muted); }
.mk b { display: block; font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mscroll { display: flex; flex-wrap: wrap; gap: 6px; padding-right: 8px; } /* chips wrap onto rows: every move is visible and clickable without scrolling (mouse users can't side-scroll) */
.mchip { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; min-height: var(--tap); padding: 0 11px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface2); font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; transition: all .12s; }
.mchip .dot { width: 8px; height: 8px; }
.mchip .rec { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; padding: 0 4px; border-radius: 4px; color: var(--yellow); border: 1px solid rgba(255,209,102,.45); background: rgba(255,209,102,.08); }
.mchip .ck { display: none; width: 14px; height: 14px; }
.mchip[aria-pressed="true"] { color: var(--text-hi); border-color: var(--c); background: color-mix(in srgb, var(--c) 22%, var(--surface2)); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 30%, transparent); }
.mchip[aria-pressed="true"] .ck { display: block; }
.mchip[aria-pressed="true"] .dot { display: none; }
/* Move boxes (session.visibleMoves): closed = recommended or picked only; tap the box or the
   "+N more" chip to open that kind's whole pool, "Less" folds it back */
.mbox { cursor: pointer; }
.mbox.open { background: rgba(0,229,255,.05); }
.mchip.mmore { min-height: var(--tap); border-style: dashed; background: transparent; color: var(--muted); font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.mchip.mmore[aria-expanded="true"] { color: var(--cyan); border-color: rgba(0,229,255,.45); }

/* Faced this session strip */
.seen { display: flex; gap: 6px; align-items: center; overflow-x: auto; scrollbar-width: none; margin: 8px -16px 0; padding: 0 16px; }
.seen::-webkit-scrollbar { display: none; }
.seen .lbl { flex-shrink: 0; line-height: 1.2; }
.pill { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; height: var(--tap); padding: 0 12px 0 4px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; }
.pill .spr { --s: 34px; }
.pill .x { font-family: var(--font-mono); font-size: 11px; color: var(--cyan); font-weight: 400; margin-left: 2px; }

/* Quick-pick grid: 12 tiles */
.qp-h { margin: 8px 0 5px; }
.qp-h .lbl { letter-spacing: .05em; }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; }
.tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 74px; padding: 1px 4px 5px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); transition: border-color .12s, background .12s, transform .08s; }
.tile:active { transform: scale(.96); border-color: var(--cyan); background: rgba(0,229,255,.08); }
.tile .spr { --s: 48px; margin-bottom: 1px; }
.tile-n { max-width: 100%; font-size: 12.5px; font-weight: 600; line-height: 1.15; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile .form { position: absolute; top: 3px; left: 5px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); text-transform: uppercase; }
.tile .rk { position: absolute; top: 2px; right: 6px; font-family: var(--font-head); font-size: 15px; color: var(--muted); }

/* ═══ Logger search mode ═══
   Entered when the search field is focused or has text. Hides the grid, faced
   strip, move strip, outcome dock and tab bar; results fill the space between the
   search box and the keyboard top (--kb-h: real app sets it from visualViewport). */
.cancel { display: none; align-items: center; min-height: var(--tap); padding: 0 4px 0 6px; font-size: 16px; font-weight: 600; color: var(--cyan); }
.sm-head { display: none; }
.search-mode .appbar, .search-mode .setbar, .search-mode .tstrip-host, .search-mode .picks, .search-mode .mstrip, .search-mode .dock, .search-mode .find .shadow-tg { display: none !important; }
.search-mode .cancel { display: inline-flex; }
.search-mode .sm-head { display: flex; justify-content: space-between; gap: 8px; padding: 10px 0 8px; }
.search-mode .sm-head b { color: var(--cyan); font-weight: 500; }
.search-mode .slot { min-height: var(--tap); padding: 4px 8px; justify-content: center; }
.search-mode .slot-k { display: none; }
.search-mode .slot-v .spr { --s: 26px; }
body.search-mode { overflow: hidden; }
.sresults { display: none; }
.search-mode .sresults { display: block; position: fixed; z-index: 15; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; top: var(--res-top, 150px); bottom: var(--kb-h, 0px); overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 10px; }
.sr-h { display: flex; justify-content: space-between; margin: 2px 0 6px; }
.srow { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; min-height: 52px; padding: 0 10px 0 6px; border-bottom: 1px solid rgba(42,42,58,.6); }
.srow:last-child { border-bottom: 0; }
.srow-main { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 10px; align-items: center; min-height: 52px; text-align: left; min-width: 0; }
.srow-main .spr { --s: 40px; }
.srow-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.srow-n { font-weight: 600; font-size: 15px; line-height: 1.2; color: var(--text-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow-txt .types { flex-wrap: nowrap; }
.sh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: var(--tap); min-width: var(--tap); padding: 0 10px; border-radius: 10px; border: 1px solid rgba(162,89,255,.55); background: rgba(162,89,255,.12); color: #d2b5ff; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.sh-btn svg { width: 13px; height: 13px; fill: currentColor; }
/* The query said "shadow": the result's Shadow button is the one Enter picks */
.srow .sh-btn.on { border-color: #a259ff; background: rgba(162,89,255,.42); color: #fff; box-shadow: 0 0 0 2px rgba(162,89,255,.3); }
.sr-empty { padding: 18px 16px; }
.sr-empty b { display: block; font-size: 16px; font-weight: 600; color: var(--text-hi); }
.sr-empty p { margin: 6px 0 0; font-size: 14px; color: var(--muted); }

/* Outcome dock: Undo | WIN | TIE | LOSS | Skip outcome (Tie is the narrow one) */
.outcomes { display: grid; grid-template-columns: 50px 1fr 54px 1fr 50px; gap: 8px; }
/* Narrow phones (320 px): keep Win and Loss the widest buttons */
@media (max-width: 359px) { .outcomes { grid-template-columns: 44px 1fr 44px 1fr 44px; gap: 6px; } .outcomes .skip-word { display: none; } }
.oc-btn { display: flex; align-items: center; justify-content: center; min-height: 60px; border-radius: 14px; font-family: var(--font-head); font-size: 30px; letter-spacing: .1em; line-height: 1; text-decoration: none; transition: transform .08s; }
.oc-btn:active { transform: scale(.97); }
.oc-win { color: var(--bg); background: var(--green); box-shadow: 0 0 22px rgba(0,255,136,.3); }
.oc-loss { color: var(--text-hi); background: var(--pink); box-shadow: 0 0 22px rgba(255,61,113,.3); }
.oc-tie { color: var(--bg); background: var(--yellow); box-shadow: 0 0 22px rgba(255,209,102,.3); font-size: 24px; letter-spacing: .06em; }
.side { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 60px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em; line-height: 1.1; text-transform: uppercase; color: var(--text); text-align: center; text-decoration: none; }
.side .ico { width: 20px; height: 20px; }
.side.dim { color: var(--muted); }

.toast { position: absolute; left: 16px; right: 16px; bottom: calc(100% + 10px); display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,.5); font-size: 15px; opacity: 0; transform: translateY(6px); transition: all .2s; pointer-events: none; }
.toast.on { opacity: 1; transform: none; }

/* ═══ Banners, notes, disclaimer ═══ */
.banner { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 10px; align-items: start; margin-top: 16px; padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.45; }
.banner b { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; margin-bottom: 2px; }
.banner.ok { border: 1px solid rgba(0,255,136,.4); background: rgba(0,255,136,.07); }
.banner.ok b, .banner.ok .ico { color: var(--green); }
.banner .sent-more { display: block; margin-top: 6px; color: var(--yellow); }
.banner .sent-id { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--muted); }
.banner.q { border: 1px solid rgba(255,209,102,.45); background: rgba(255,209,102,.07); }
.banner.q b, .banner.q .ico { color: var(--yellow); }
.disclaimer { margin: 28px 0 0; padding-top: 16px; border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: 11px; letter-spacing: .03em; line-height: 1.6; color: var(--muted); text-align: center; }

/* ═══ App-only additions ═══ */
.app-main { padding-top: 0; }
.screen-stub { padding-top: 28px; }
.screen-stub .sub code { font-family: var(--font-mono); font-size: 13px; color: var(--text); }
#app-dock[hidden] { display: none; }
.boot-note { color: var(--muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 28px 0; }

/* Screens render their own app bar inside .app-main: bleed it to the column edges */
.app-main .appbar { margin: 0 -16px; }
a.fmt-pill { text-decoration: none; }
.ico.ico-xs { width: 11px; height: 11px; }
.fmt-btn, .ofrow, .brow, .resume { width: 100%; text-align: left; font: inherit; }

/* ═══ Start session (mockups/start.html) ═══ */
.season { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 -16px; padding: 9px 16px; border-bottom: 1px solid var(--border); background: linear-gradient(90deg, rgba(0,229,255,.08), transparent 70%); }
.season b { font-family: var(--font-head); font-weight: 400; font-size: 20px; letter-spacing: .05em; color: var(--text-hi); }
.intro { padding: 16px 0 2px; }
.intro .h1 { font-size: 40px; }
.fmts { display: grid; gap: 8px; margin-top: 14px; }
.fmt-btn { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 20px; align-items: center; gap: 10px; min-height: 78px; padding: 12px 14px 12px 18px; border-radius: 14px; border: 1px solid rgba(var(--lc),.45); background: linear-gradient(110deg, rgba(var(--lc),.16), rgba(var(--lc),.03) 60%), var(--surface); color: var(--text); text-decoration: none; overflow: hidden; }
.fmt-btn::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: rgb(var(--lc)); box-shadow: 0 0 14px rgb(var(--lc)); }
.fmt-btn:active { transform: scale(.99); }
.fmt-btn .ico { color: rgb(var(--lc)); }
.fmt-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fmt-n { font-family: var(--font-head); font-size: 27px; line-height: .95; letter-spacing: .03em; color: var(--text-hi); }
.fmt-meta { display: flex; align-items: center; gap: 10px; }
details.other { margin-top: 10px; }
details.below { margin-top: 12px; }
details.below > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 0 16px; cursor: pointer; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
details.below > summary::-webkit-details-marker { display: none; }
details.below > summary .ico { flex-shrink: 0; transition: transform .2s; }
details.below[open] > summary { border-bottom: 1px solid var(--border); }
details.below[open] > summary .ico { transform: rotate(90deg); }
.below-row { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; gap: 10px; align-items: center; min-height: 44px; padding: 4px 16px; border-bottom: 1px solid rgba(42,42,58,.6); }
.below-row:last-child { border-bottom: 0; }
.below-name { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.below-n { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
details.other > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 16px; cursor: pointer; font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
details.other > summary::-webkit-details-marker { display: none; }
details.other > summary .ico { transition: transform .2s; color: var(--muted); }
details.other[open] > summary { border-bottom: 1px solid var(--border); }
details.other[open] > summary .ico { transform: rotate(90deg); }
.grp { padding: 10px 16px 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: var(--surface2); border-bottom: 1px solid rgba(42,42,58,.6); }
.ofrow { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; min-height: 56px; padding: 8px 16px; border-bottom: 1px solid rgba(42,42,58,.6); color: var(--text); text-decoration: none; box-shadow: inset 3px 0 0 rgb(var(--lc)); }
.ofrow:last-child { border-bottom: 0; }
.ofn { font-weight: 600; font-size: 15px; }
.ofrow .cp { grid-row: 1 / 3; grid-column: 2; }
.ofrow .lbl { grid-column: 1; }
/* Unfinished session on this phone */
.resume { display: grid; grid-template-columns: minmax(0,1fr) 20px; align-items: center; gap: 10px; margin-top: 16px; min-height: 64px; padding: 10px 14px 10px 16px; color: var(--text); box-shadow: inset 3px 0 0 rgb(var(--lc)); }
.resume .ico { color: var(--cyan); }
.resume-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.resume-n { font-weight: 600; font-size: 16px; color: var(--text-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ═══ Logger: app-only bits ═══ */
body[data-screen="log"] .app-main { padding-bottom: 12px; }
/* The installed iPhone app draws under the status bar (black-translucent + viewport-fit=cover): the app bar
   adds env(safe-area-inset-top) above its content, and screens or modes without an app bar pad the page instead. */
body[data-screen="welcome"] .app-main, .search-mode .app-main { padding-top: env(safe-area-inset-top); }
.search-mode #disclaimer { display: none; }
.sm-head .sm-armed { color: #d2b5ff; }
.bdot:disabled { cursor: default; }

/* ═══ Set summary (mockups/set-summary.html) ═══ */
.summary .hero { --hc: 0,255,136; padding-top: 22px; }
.rec-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 6px; }
.big { font-family: var(--font-head); font-size: 104px; line-height: .85; letter-spacing: .01em; }
.big .w-c { text-shadow: 0 0 28px rgba(0,255,136,.35); }
.big .l-c { text-shadow: 0 0 28px rgba(255,61,113,.3); }
.big .m-c { margin: 0 4px; }
.big.has-t { font-size: 84px; } /* W–L–T is two glyphs longer */
.big .t-c { text-shadow: 0 0 28px rgba(255,209,102,.3); }
.rec-dots { display: flex; gap: 6px; padding-bottom: 8px; }
.rec-dots i { width: 14px; height: 14px; border-radius: 50%; }
.rec-dots .w { background: var(--green); box-shadow: 0 0 8px rgba(0,255,136,.5); }
.rec-dots .l { background: var(--pink); box-shadow: 0 0 8px rgba(255,61,113,.5); }
.rec-dots .tie { background: var(--yellow); box-shadow: 0 0 8px rgba(255,209,102,.5); }
.rec-dots .n { background: var(--muted); }
.auto { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.auto-note { font-size: 14px; color: var(--muted); line-height: 1.35; }
.steppers { display: grid; grid-template-columns: 1fr 1fr; }
.stp { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; }
.stp + .stp { border-left: 1px solid var(--border); }
/* Ties (only when the set has one) takes its own row under Wins | Losses, so every button keeps its 44 px */
.steppers.three .stp:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--border); }
.stp .num { font-size: 34px; min-width: 22px; text-align: center; }
.stp-in { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.sbtn { display: grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: 10px; border: 1px solid var(--border); background: var(--surface2); font-family: var(--font-head); font-size: 24px; }
.sbtn:disabled { opacity: .35; cursor: default; }
.sess { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; margin-top: 12px; }
.sess .chips { justify-content: flex-end; }

/* ═══ Edit-battle sheet (dots on the logger, rows on the set summary) ═══ */
body.sheet-open { overflow: hidden; }
.sheet-bg { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.62); }
.sheet { position: fixed; z-index: 61; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 480px; max-height: 88vh; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain; padding: 8px 16px calc(14px + env(safe-area-inset-bottom)); background: var(--bg); border: 1px solid var(--border); border-bottom: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -20px 50px rgba(0,0,0,.6); }
.sheet-grab { width: 40px; height: 4px; margin: 0 auto 10px; border-radius: 2px; background: var(--border); }
.sheet-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.es-lbl { margin: 16px 0 8px; }
.es-seg { display: grid; width: 100%; }
/* Team row: one chip per version plus None; wraps when a session has many versions */
.es-team { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)); }
.es-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 6px; padding: 4px 8px 4px 0; border-bottom: 1px solid rgba(42,42,58,.6); }
.es-row:last-child { border-bottom: 0; }
.es-row.sel { background: rgba(0,229,255,.06); box-shadow: inset 3px 0 0 var(--cyan); }
.es-pick { display: grid; grid-template-columns: 40px minmax(0,1fr); align-items: center; gap: 10px; min-height: 52px; min-width: 0; padding-left: 10px; text-align: left; }
.es-txt { display: flex; flex-direction: column; min-width: 0; }
.es-n { font-weight: 600; font-size: 15px; line-height: 1.2; color: var(--text-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-row .sh-btn:not(.on) { border-color: var(--border); background: var(--surface2); color: var(--muted); }
.es-clear { display: grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: 10px; border: 1px solid var(--border); color: var(--muted); }
.es-search { display: block; margin-top: 14px; }
.es-res { margin-top: 8px; }
.es-note { margin: 8px 0 0; font-size: 14px; color: var(--pink); }
.sheet-foot { display: flex; justify-content: flex-end; margin-top: 12px; }

/* Fix round 1: session-write failure banner, summary input lock */
.save-warn { position: sticky; top: 0; z-index: 30; display: block; margin: 0; border-radius: 0; background: #1d1a10; }
body.input-locked #app-dock .dock-in .btn { opacity: .55; }

/* ═══ Review & submit ═══ */
.review .intro .h1 { font-size: 46px; }
.sends { padding: 14px 16px; display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 10px; font-size: 14px; color: var(--muted); line-height: 1.5; margin-top: 12px; }
.sends b { color: var(--text); font-weight: 600; }
.sends .ico { color: var(--cyan); margin-top: 2px; }
.dl { padding: 0 16px; font-size: 18px; }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.brow.ro { cursor: default; }
.banner.err { border: 1px solid rgba(255,61,113,.45); background: rgba(255,61,113,.07); }
.banner.err b, .banner.err .ico { color: var(--pink); }
.ob-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 60px; padding: 8px 12px 8px 14px; border-bottom: 1px solid rgba(42,42,58,.6); }
.ob-row:last-child { border-bottom: 0; }
.ob-txt { display: flex; flex-direction: column; min-width: 0; }
.ob-n { font-weight: 600; font-size: 15px; color: var(--text-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-st { font-size: 13px; color: var(--muted); line-height: 1.4; }
.rv-empty { margin-top: 12px; }

/* Dialogs (forgotten-session prompt, set record) */
.dlg-p { margin: 12px 0 0; font-size: 16px; line-height: 1.5; color: var(--text); }
.dlg-sub { display: block; margin-top: 6px; }
.dlg-actions { display: grid; gap: 8px; margin-top: 18px; }
.sheet-body .steppers { margin-top: 14px; }

/* Turnstile host: takes no space; Cloudflare draws into it only if a challenge needs a tap */
.ts-host { position: fixed; z-index: 80; left: 50%; bottom: 96px; transform: translateX(-50%); }
.toast-fixed { position: fixed; left: 16px; right: 16px; bottom: 96px; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 90; }

/* ═══ Welcome (mockups/welcome.html) ═══ */
.welcome .hero { padding-top: 34px; }
.welcome .hero-logo { width: 92px; height: 92px; margin-bottom: 20px; filter: drop-shadow(0 0 18px rgba(255,61,113,.35)); }
.welcome .hero .h1 { font-size: 64px; }
.w-steps .row { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 14px; align-items: start; padding: 16px; border-bottom: 1px solid rgba(42,42,58,.6); }
.w-steps .row:last-child { border-bottom: 0; }
.w-steps .n { font-family: var(--font-head); font-size: 34px; line-height: .9; color: var(--cyan); text-shadow: 0 0 14px rgba(0,229,255,.35); }
.w-steps h3 { margin: 0; font-size: 17px; font-weight: 600; color: var(--text-hi); }
.w-steps p { margin: 4px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.ios-step { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 12px; padding: 16px; border-bottom: 1px solid rgba(42,42,58,.6); }
.ios-step:last-child { border-bottom: 0; }
.ios-step .n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,229,255,.1); border: 1px solid rgba(0,229,255,.4); color: var(--cyan); font-family: var(--font-head); font-size: 17px; }
.ios-step p { margin: 2px 0 10px; font-size: 15px; }
.ios-step p b { color: var(--text-hi); }
.ios-bar { display: flex; align-items: center; justify-content: space-around; height: 50px; border-radius: 12px; background: #1c1c22; border: 1px solid #2c2c36; color: #6b9dff; }
.ios-bar .ico { width: 22px; height: 22px; opacity: .45; }
.ios-bar .hl { position: relative; }
.ios-bar .hl .ico { opacity: 1; }
.ios-bar .hl::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--cyan); box-shadow: 0 0 14px rgba(0,229,255,.6); animation: ring 1.6s infinite; }
@keyframes ring { 50% { transform: scale(1.12); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .ios-bar .hl::after { animation: none; } }
.ios-sheet { border-radius: 12px; background: #1c1c22; border: 1px solid #2c2c36; overflow: hidden; font-size: 15px; }
.ios-sheet div { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 14px; border-bottom: 1px solid #2c2c36; color: var(--text); }
.ios-sheet div:last-child { border-bottom: 0; }
.ios-sheet .hl { background: rgba(0,229,255,.1); color: var(--text-hi); box-shadow: inset 3px 0 0 var(--cyan); }
.ios-add { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 14px; border-radius: 12px; background: #1c1c22; border: 1px solid #2c2c36; font-size: 15px; }
.ios-add span:last-child { color: #6b9dff; font-weight: 600; padding: 4px 10px; border-radius: 8px; box-shadow: 0 0 0 2px var(--cyan), 0 0 14px rgba(0,229,255,.5); }
.android { padding: 18px 16px; display: grid; gap: 12px; }
.android p { margin: 0; color: var(--muted); font-size: 15px; }

/* Notes pinned above the screen (Pokémon list unavailable offline) */
.app-note { margin: 12px 16px 0; }

.banner-act { margin-top: 10px; }

/* ═══ Live Meta (mockups/meta.html) ═══ */
.meta .m-hero { --hc: var(--lc); padding-top: 18px; padding-bottom: 0; border-bottom: 0; }
.meta .m-hero .h1 { font-size: 40px; color: rgb(var(--lc)); text-shadow: 0 0 22px rgba(var(--lc),.3); }
.meta .status { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.meta .status b { color: var(--green); font-weight: 500; }
.meta .status.off b { color: var(--yellow); }
.meta .status.off .live-dot { background: var(--yellow); animation: none; }
.meta .filters { display: grid; gap: 8px; margin-top: 16px; }
.meta .filters .lg-tab { min-height: 58px; padding: 8px 10px; min-width: 0; }
.meta .filters .lg-tab .num { font-size: 19px; line-height: 1.05; overflow-wrap: anywhere; }
.meta .filters .lg-tab::after { display: none; }   /* no room for the corner dot; the CP line carries the color */
.meta .filters .lg-tab .lbl { color: rgb(var(--lc)); }
.meta .frow { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.meta details.earlier { position: relative; min-width: 0; }
.meta details.earlier > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: var(--tap); padding: 0 12px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.meta details.earlier > summary::-webkit-details-marker { display: none; }
.meta details.earlier > summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta details.earlier > summary .ico { flex-shrink: 0; color: var(--muted); transform: rotate(90deg); width: 16px; height: 16px; }
.meta .elist { position: absolute; z-index: 25; left: 0; top: calc(100% + 6px); width: min(340px, calc(100vw - 32px)); max-height: 60vh; overflow-y: auto; box-shadow: 0 16px 40px rgba(0,0,0,.6); }
.meta .efrow { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; width: 100%; min-height: 56px; padding: 8px 16px; border-bottom: 1px solid rgba(42,42,58,.6); color: var(--text); text-align: left; box-shadow: inset 3px 0 0 rgb(var(--lc)); }
.meta .efrow:last-child { border-bottom: 0; }
.meta .efrow .ofn { font-weight: 600; font-size: 15px; }
.meta .efrow .cp { grid-row: 1 / 3; grid-column: 2; }
.meta .offline { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 11px; border: 1px solid rgba(255,209,102,.45); background: rgba(255,209,102,.07); font-size: 14px; }
.meta .offline .ico { color: var(--yellow); }
.meta .mlist { margin-top: 14px; }
@media (max-width: 440px) { .meta .mlist { margin-left: -16px; margin-right: -16px; border-radius: 0; border-left: 0; border-right: 0; } }
.meta .mhead, .meta .mrow { display: grid; grid-template-columns: 22px 44px minmax(0,1fr) 56px 56px; column-gap: 8px; align-items: center; padding: 0 12px 0 8px; }
.meta .mhead { min-height: 38px; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.meta .mhead span:nth-child(2) { grid-column: 2 / 4; }
.meta .mhead span:nth-child(3), .meta .mhead span:nth-child(4) { text-align: right; }
.meta .mrow { grid-template-rows: auto auto; row-gap: 4px; padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(42,42,58,.6); }
.meta .mrow:last-child { border-bottom: 0; }
.meta .mnum { grid-row: 1 / 3; font-family: var(--font-head); font-size: 20px; color: var(--muted); text-align: center; }
.meta .mrow > .spr { grid-row: 1 / 3; }
.meta .mid { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.meta .mname { font-weight: 600; font-size: 14.5px; line-height: 1.2; overflow-wrap: break-word; }
.meta .mstat { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.meta .mstat b { font-family: var(--font-head); font-weight: 400; font-size: 22px; line-height: 1; color: var(--text-hi); }
.meta .mstat b.na { font-family: var(--font-mono); font-size: 15px; color: var(--muted); padding: 3px 0 2px; }
.meta .mstat small { font-family: var(--font-mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
.meta .mstat .bar { width: 100%; height: 3px; border-radius: 2px; background: var(--border); overflow: hidden; }
.meta .mstat .bar i { display: block; height: 100%; background: rgb(var(--lc)); border-radius: 2px; }
.meta .mmoves { grid-column: 3 / 6; display: flex; flex-wrap: wrap; gap: 2px 12px; min-width: 0; }
.meta .mv-p { color: var(--text); font-family: var(--font-mono); font-size: 12px; }
.meta .mt-top { --md: 255,209,102; background: linear-gradient(90deg, rgba(var(--md),.12), rgba(var(--md),.02) 55%, transparent); box-shadow: inset 3px 0 0 rgb(var(--md)); }
.meta .mt-top2 { --md: 201,209,224; } .meta .mt-top3 { --md: 227,154,91; }
.meta .mt-top .mnum { justify-self: center; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; font-size: 16px; line-height: 1; color: var(--bg); background: rgb(var(--md)); box-shadow: 0 0 12px rgba(var(--md),.45); }
.meta .more { display: flex; justify-content: center; margin-top: 10px; }
.meta .more .btn { color: rgb(var(--lc)); border-color: rgba(var(--lc),.5); background: rgba(var(--lc),.06); }
.meta .notes { margin-top: 16px; padding: 14px 16px; display: grid; gap: 8px; }
.meta .notes p { margin: 0; display: grid; grid-template-columns: 16px minmax(0,1fr); gap: 8px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.meta .notes p:first-child { color: var(--text); }
.meta .notes .ico { width: 14px; height: 14px; margin-top: 3px; color: rgb(var(--lc)); }
.meta .rules { margin-top: 10px; font-family: var(--font-mono); font-size: 11px; line-height: 1.6; color: var(--muted); text-align: center; }
.meta .m-empty { margin-top: 14px; padding: 28px 18px; text-align: center; }
.meta .m-empty b { display: block; font-family: var(--font-head); font-weight: 400; font-size: 26px; letter-spacing: .03em; line-height: 1.05; color: var(--text-hi); }
.meta .m-empty p { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.meta .m-empty .btn { margin-top: 16px; }
.meta .m-body { padding-bottom: 4px; }

/* ═══ Settings (mockups/settings.html) ═══ */
.settings .intro .h1 { font-size: 44px; }
.settings .pad { padding: 14px 16px 16px; }
.settings .help { margin: 0 0 10px; font-size: 14px; color: var(--muted); line-height: 1.45; }
.settings .data-line { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.settings .code-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
/* Codes are case-sensitive on the server, so the field shows exactly what was typed (no uppercase styling). */
.settings .code-row input { height: var(--tap); padding: 0 12px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface2); font-family: var(--font-mono); font-size: 16px; letter-spacing: .06em; outline: none; min-width: 0; }
.settings .code-row input::placeholder { color: var(--muted); letter-spacing: .06em; font-family: var(--font-body); }
.settings .code-row input:focus { border-color: rgba(0,229,255,.6); box-shadow: 0 0 0 3px rgba(0,229,255,.12); }
.settings .code-msg { margin-top: 8px; font-size: 14px; }
.settings .code-msg:empty { display: none; }
.settings .kv { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; gap: 12px; align-items: center; min-height: 56px; padding: 8px 16px; border-bottom: 1px solid rgba(42,42,58,.6); }
.settings .kv:last-child { border-bottom: 0; }
.settings .kv .ico { color: var(--muted); }
.settings .kv-k { font-size: 15px; }
.settings .kv-k small { display: block; font-size: 13px; color: var(--muted); }
.settings .kv-v { font-family: var(--font-head); font-size: 26px; line-height: 1; color: var(--text-hi); }
.settings .kv-v.mono { font-family: var(--font-mono); font-size: 15px; letter-spacing: .06em; color: var(--text); }
.settings .kv-v.q { color: var(--yellow); }
.settings .kv-v.bad { color: var(--pink); }
.settings .danger p { margin: 0 0 12px; font-size: 14px; color: var(--muted); line-height: 1.45; }
.settings .clear-btn { font-size: 20px; }
.settings .links a { display: grid; grid-template-columns: minmax(0,1fr) 18px; align-items: center; min-height: 52px; padding: 0 16px; border-bottom: 1px solid rgba(42,42,58,.6); color: var(--text); text-decoration: none; font-size: 15px; }
.settings .links a:last-child { border-bottom: 0; }
.settings .mt-group + .mt-group { margin-top: 12px; }
.settings .mt-h { padding: 0 4px 6px; }
.settings .mt-del { color: var(--pink); }
.dlg-warn { padding: 10px 12px; border-radius: 11px; border: 1px solid rgba(255,61,113,.5); background: rgba(255,61,113,.08); color: var(--text-hi); font-weight: 600; }

/* ═══ Privacy page (privacy.html, static) ═══ */
.privacy .intro .h1 { font-size: 44px; }
.privacy .p-lead { margin: 14px 0 0; font-size: 16px; line-height: 1.5; color: var(--text); }
.privacy .p-row { padding: 14px 16px; border-bottom: 1px solid rgba(42,42,58,.6); }
.privacy .p-row:last-child { border-bottom: 0; }
.privacy .p-row h2 { margin: 0; font-size: 17px; font-weight: 600; color: var(--text-hi); }
.privacy .p-row p { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.privacy .p-row a { color: var(--cyan); }
.privacy .p-back { margin: 24px 0 0; }

/* ═══ Phase 2a: teams, team versions, notes (ported from mockups/components.css) ═══
   Ruling R12: the app's own .sheet / .sheet-bg / .sheet-grab (openDialog) replace the mockup's
   .scrim / .sheet / .grab. Switches and radio cards key on aria-checked (role=switch / radio). */
/* Team: three members side by side, each with its moves underneath */
.tm { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; }
.tm-p { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; min-height: var(--tap); padding: 8px 8px 9px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); text-align: left; color: inherit; font: inherit; }
button.tm-p:active { transform: scale(.98); }
.tm-p .role { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tm-p .spr { --s: 44px; }
.tm-p .nm { max-width: 100%; font-size: 14px; font-weight: 600; color: var(--text-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-p .mvs { display: flex; flex-direction: column; gap: 1px; max-width: 100%; margin-top: 2px; }
.tm-p .mv { font-size: 12.5px; max-width: 100%; white-space: normal; line-height: 1.25; align-items: baseline; }
.tm-p .mv.fast { color: var(--text); }
.tm-p .mv.add { color: var(--cyan); font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.tm-p .mv.add::before { content: '+'; width: 7px; text-align: center; }
.tm-p.chg { border-color: rgba(255,209,102,.6); background: linear-gradient(180deg, rgba(255,209,102,.1), var(--surface)); }
.tm-p .new { position: absolute; top: 6px; right: 6px; }
.tm-p.empty { border-style: dashed; border-color: rgba(0,229,255,.45); }
.tm-p.empty .nm { color: var(--cyan); font-weight: 500; }
.tm-p .spr.unseen { color: var(--cyan); border-color: rgba(0,229,255,.45); }
.mv.chg { color: var(--yellow); }
.mv.old { text-decoration: line-through; opacity: .6; }
.tm.compact .tm-p { padding: 6px 7px 7px; }
.tm.compact .tm-p .spr { --s: 36px; }
.tm.compact .tm-p .nm { font-size: 13px; }

/* Saved team rows on the team step */
.saved { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; min-height: 64px; padding: 8px 12px 8px 12px; border-bottom: 1px solid rgba(42,42,58,.6); }
.saved:last-child { border-bottom: 0; }
.saved .sv-t { min-width: 0; }
.saved .opp-s .spr { --s: 36px; }
.saved .sv-n { display: block; font-size: 14px; font-weight: 600; color: var(--text-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.saved .lbl { display: block; margin-top: 1px; }
.hint { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 8px; margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.hint .ico { color: var(--cyan); margin-top: 2px; }
.hint b { color: var(--text); font-weight: 600; }
.savetg { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; margin-top: 10px; padding: 0 14px; text-align: left; font: inherit; color: inherit; }
.savetg-t { display: block; color: var(--text-hi); font-weight: 600; }
.savetg .lbl { display: block; }
.sw { position: relative; width: 50px; height: 30px; border-radius: 999px; background: var(--cyan); box-shadow: 0 0 12px rgba(0,229,255,.35); flex-shrink: 0; transition: background .15s; }
.sw::after { content: ''; position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); transition: right .15s; }
.sw[aria-checked="false"], [role="switch"][aria-checked="false"] .sw { background: var(--border); box-shadow: none; }
.sw[aria-checked="false"]::after, [role="switch"][aria-checked="false"] .sw::after { right: 24px; background: var(--muted); }
.linkbtn { display: flex; align-items: center; justify-content: center; min-height: var(--tap); font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
button.linkbtn { width: 100%; }
.team-step .tm-host { min-width: 0; }

/* Team strip in the logger: one line, under the set bar */
.tstrip { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; align-items: center; min-height: 50px; margin: 4px 0 8px; padding: 4px 4px 4px 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); }
.tstrip.none { grid-template-columns: minmax(0,1fr) auto; }
.tstrip .who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tstrip .opp-s .spr { --s: 32px; }
.tstrip .tn { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tstrip .tn b { color: var(--text); font-weight: 400; }
.tstrip .chgbtn { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 10px; border-radius: 10px; color: var(--cyan); font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }

/* Version chip */
.ver { display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 6px; border-radius: 6px; border: 1px solid rgba(255,209,102,.5); background: rgba(255,209,102,.1); color: var(--yellow); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; }

/* Team sheets: the app's .sheet plus .tsheet (teamsheet.js) */
.tsheet .h2 { font-size: 30px; }
.tsheet .sub { margin-top: 4px; font-size: 14px; }
.tsheet .tm { margin-top: 12px; }
.tsheet .tm-p { background: var(--surface); }
.tsheet .tm-p.chg { background: linear-gradient(180deg, rgba(255,209,102,.1), var(--surface)); }
.swaprow { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 12px; border-radius: 12px; border: 1px dashed rgba(255,209,102,.5); font-size: 14px; color: var(--text); }
.swaprow .lbl { color: var(--yellow); }
.swaprow b { color: var(--text-hi); font-weight: 600; }
.swaprow .ico { color: var(--yellow); }
.apply { display: grid; gap: 8px; margin-top: 14px; }
.opt { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 10px; align-items: start; width: 100%; min-height: var(--tap); padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); text-align: left; font: inherit; color: inherit; }
.opt .rd { width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--muted); }
.opt[aria-checked="true"] { border-color: rgba(0,229,255,.6); background: linear-gradient(180deg, rgba(0,229,255,.1), var(--surface)); }
.opt[aria-checked="true"] .rd { border-color: var(--cyan); background: radial-gradient(circle, var(--cyan) 0 5px, transparent 6px); box-shadow: 0 0 10px rgba(0,229,255,.4); }
.opt b { display: block; font-size: 16px; font-weight: 600; color: var(--text-hi); }
.opt span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.sheet-btns { display: grid; grid-template-columns: auto 1fr; gap: 8px; margin-top: 14px; }
/* Member editor: species header, then move chips that wrap (same .mchip as the logger strip) */
.me-who { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.me-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.me-chips.mbox { padding: 6px; margin: 0 -6px; border-radius: 12px; }
.srow.taken .srow-main { opacity: .45; cursor: default; }
.srow.taken .lbl { padding-right: 6px; }
/* R24: a species already on the team swaps the two slots (moves kept) */
.srow.swap .swap-lbl { min-height: 44px; max-width: 104px; padding: 0 6px; text-align: right; line-height: 1.3; letter-spacing: .06em; color: var(--cyan); }

/* Recap: teams used */
.tver { padding: 12px 12px 12px; border-bottom: 1px solid rgba(42,42,58,.6); }
.tver:last-child { border-bottom: 0; }
.tver-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tver-h .where { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tver-h .where b { color: var(--text); font-weight: 500; }
.tver-h .rec { font-family: var(--font-head); font-size: 24px; letter-spacing: .04em; line-height: 1; }
.tver .what { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 14px; color: var(--yellow); }
.tver .what .ico { width: 16px; height: 16px; }
.one { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14px; color: var(--muted); }
.one b { color: var(--text-hi); font-weight: 600; }
/* Teams used: compact rows (mockups/session-notes.html · 2); tap opens the full team view */
.vrow { display: grid; grid-template-columns: auto minmax(0,1fr) auto 18px; gap: 10px; align-items: center; width: 100%; min-height: 56px; padding: 6px 12px; border-bottom: 1px solid rgba(42,42,58,.6); color: inherit; text-align: left; font: inherit; text-decoration: none; }
.vrow:last-child { border-bottom: 0; }
.vrow-m { min-width: 0; }
.vrow .opp-s .spr { --s: 32px; }
.vrow .opp-n { margin-top: 0; }
.vrow .what { display: block; font-size: 13px; color: var(--yellow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vrow .rec { font-family: var(--font-head); font-size: 22px; letter-spacing: .04em; }

/* Recap: version tag under the battle number, change marker between rows */
.brow .bn { display: flex; flex-direction: column; align-items: center; line-height: 1; gap: 3px; }
.brow .bn i { font-style: normal; font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em; color: var(--yellow); }
.tchg { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 8px; align-items: center; min-height: 44px; padding: 6px 14px 6px 12px; border-bottom: 1px solid rgba(42,42,58,.6); background: repeating-linear-gradient(135deg, rgba(255,209,102,.06) 0 6px, transparent 6px 12px); font-size: 14px; line-height: 1.35; color: var(--text); }
.tchg .ico { color: var(--yellow); }
.tchg b { color: var(--yellow); font-weight: 600; }
.set-team { display: flex; align-items: center; gap: 8px; margin: -4px 0 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.set-team .ico { width: 14px; height: 14px; }

/* Notes: a text box with a counter (set notes, session notes). Notes stay on the phone. */
.note-box { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; }
.note-box:focus-within { border-color: rgba(0,229,255,.6); box-shadow: 0 0 0 3px rgba(0,229,255,.12); }
.note-in { display: block; width: 100%; min-height: 84px; padding: 12px 14px 6px; border: 0; outline: none; resize: none; background: transparent; color: var(--text-hi); font: inherit; font-size: 16px; line-height: 1.45; }
.note-in::placeholder { color: var(--muted); }
.note-foot { display: flex; justify-content: space-between; gap: 10px; padding: 0 14px 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
/* A saved set note on the review screen; tap to edit */
.set-note { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 8px; width: 100%; min-height: var(--tap); margin: 0 0 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(162,89,255,.35); background: rgba(162,89,255,.07); text-align: left; font: inherit; font-size: 14px; line-height: 1.45; color: var(--text); }
.set-note .ico { width: 17px; height: 17px; margin-top: 1px; color: var(--purple); }

/* Auto recap: label left, answer right, one fact per row */
.recap .rc-row { display: grid; grid-template-columns: 104px minmax(0,1fr); gap: 10px; align-items: center; min-height: 52px; padding: 6px 14px; border-bottom: 1px solid rgba(42,42,58,.6); }
.rc-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rc-v { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; font-size: 15px; color: var(--text); }
.rc-v b { color: var(--text-hi); font-weight: 600; }
.rc-v .opp-s .spr { --s: 34px; }
.rc-n { font-family: var(--font-head); font-size: 22px; letter-spacing: .04em; line-height: 1; }
.rc-t { display: inline-flex; align-items: center; gap: 6px; }
.rc-foot { padding: 10px 14px 12px; font-size: 13px; color: var(--muted); }

/* Save image sheet */
.img-prev { display: grid; grid-template-columns: 56px minmax(0,1fr) 18px; gap: 12px; align-items: center; margin-top: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text-hi); text-decoration: none; }
.img-prev b { font-weight: 600; }
.ip-thumb { display: grid; place-items: center; width: 56px; height: 76px; border-radius: 6px; border: 1px solid var(--border); background: linear-gradient(180deg, rgba(59,139,235,.25), var(--bg) 60%); }
.ip-thumb img { width: 34px; height: 34px; }
.tg-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px; text-align: left; font: inherit; color: inherit; }
.tg-row b { display: block; font-size: 16px; font-weight: 600; color: var(--text-hi); }
.tg-row span span { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }

/* Review: recap, notes, image sheet (Task 9) */
.rc-ico { color: var(--cyan); }
.set-note span { white-space: pre-wrap; overflow-wrap: anywhere; }
.set-note.ro { cursor: default; }
.set-acts { display: inline-flex; align-items: center; gap: 14px; }
.set-h .edit.add-note { color: var(--muted); }
.review .note-box { margin: 0 0 8px; }
button.img-prev { width: 100%; text-align: left; font: inherit; }
button.img-prev:disabled { opacity: .55; cursor: default; }
.img-st { margin: 12px 0 0; }