/* Mentra Web — design system.
   Obsidian. Holographic minimalism. Elite football heritage. Every colour, font, radius and timing lives here.
   One accent per mode ("atmosphere"): Companion & Coach = lime (personal), Team = cyan (analysis / precision),
   Arena = violet (immersive). Amber = simulated or needs attention, red = errors / destructive. Panels carry small
   bracket corners instead of boxes; reading text is the system face; Chakra Petch only for numerals and status tags. */
[hidden] { display: none !important; }
@font-face { font-family: "Chakra Petch"; src: url("fonts/chakra-petch-medium.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url("fonts/chakra-petch-semibold.woff") format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url("fonts/chakra-petch-bold.woff") format("woff"); font-weight: 700; font-display: swap; }
:root {
  /* palette */
  --obsidian: #080A0D; --graphite: #11151B; --graphite-2: #181E26; --text: #F5F7FA; --silver: #A5AFBD; --dim: #5D6672;
  --lime: 185, 255, 113; --cyan: 128, 191, 255; --violet: 208, 162, 255;
  --amber: #FFB648; --red: #FF6A5F;
  /* surfaces + lines */
  --surface: rgba(17, 21, 27, .78); --surface-2: rgba(24, 30, 38, .9); --line: rgba(255, 255, 255, .08);
  /* type */
  --display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
  --read: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  --num: "Chakra Petch", "SF Pro Display", -apple-system, system-ui, sans-serif;
  /* shape + rhythm */
  --bl: 12px; --gap: 22px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* atmosphere (default = personal / lime) */
  --accent-rgb: var(--lime); --accent: rgb(var(--accent-rgb)); --accent-ink: #0D1A04;
  --accent-soft: rgba(var(--accent-rgb), .09); --bk: rgba(var(--accent-rgb), .42);
  --ok: rgb(var(--lime));
  font-family: var(--read); -webkit-font-smoothing: antialiased;
}
body[data-mode="team"] { --accent-rgb: var(--cyan); --accent-ink: #04162B; }
body[data-mode="arena"] { --accent-rgb: var(--violet); --accent-ink: #1E0B33; }
body[data-mode] { --accent: rgb(var(--accent-rgb)); --accent-soft: rgba(var(--accent-rgb), .09); --bk: rgba(var(--accent-rgb), .42); }
* { box-sizing: border-box; }
html, body { margin: 0; color: var(--text); background: var(--obsidian); }
body { min-height: 100dvh; padding: env(safe-area-inset-top) 0 calc(82px + env(safe-area-inset-bottom)); line-height: 1.45;
  background:
    radial-gradient(90% 60% at 50% -10%, rgba(var(--accent-rgb), .10), transparent 70%),
    linear-gradient(rgba(var(--accent-rgb), .035) 1px, transparent 1px) 0 0 / 100% 40px,
    linear-gradient(90deg, rgba(var(--accent-rgb), .035) 1px, transparent 1px) 0 0 / 40px 100%,
    var(--obsidian);
  background-attachment: fixed; }
a { color: var(--accent); text-underline-offset: 3px; }
::selection { background: rgba(var(--accent-rgb), .3); }

/* ── header: wordmark left, system readout right ── */
.top { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 20px 12px; background: linear-gradient(var(--obsidian) 70%, rgba(8, 10, 13, 0)); }
.top::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 4px; height: 1px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), .5), rgba(var(--accent-rgb), .08) 40%, transparent); }
.brand { display: flex; align-items: center; gap: 10px; font: 700 16px/1 var(--display); letter-spacing: .28em; text-transform: uppercase; }
.dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb), .7), inset 0 0 4px rgba(var(--accent-rgb), .8); }
.sys { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.who { color: var(--silver); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.clock { white-space: nowrap; font: 600 14px var(--display); color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.demo-pill { font: 600 11px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--amber);
  padding: 4px 7px; border: 1px solid rgba(255, 182, 72, .45); }

/* ── layout + type ── */
main { max-width: 560px; margin: 0 auto; padding: 10px 20px 28px; }
.view { display: flex; flex-direction: column; gap: var(--gap); }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; gap: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grow { flex: 1; }
.eyebrow { margin: 4px 0 -12px; color: var(--silver); font: 500 14px var(--display); letter-spacing: .04em; }
.eyebrow:first-letter { text-transform: uppercase; }
h1 { margin: 0; font: 600 30px/1.12 var(--display); letter-spacing: -.005em; }
h2 { margin: 0; font: 600 21px/1.2 var(--display); }
.label { margin: 0 0 10px; color: var(--silver); font: 600 13px var(--display); letter-spacing: .05em; }
.big { margin: 0; font-size: 19px; line-height: 1.4; }
.muted { color: var(--silver); }
.small { font-size: 14px; margin: 6px 0 0; }
.meta { color: var(--silver); font-size: 13px; margin: 0; }
.ok { color: var(--ok); text-align: center; margin: 0; font-family: var(--display); }
.danger-text { color: var(--red); margin: 0; }

/* ── panels: glass + targeting brackets ── */
.card, details.add, .challenge, #tm-squad, #tm-events, #a-hist, #a-scen, #j-entries {
  position: relative; background:
    linear-gradient(var(--bk), var(--bk)) left top / var(--bl) 1px no-repeat,
    linear-gradient(var(--bk), var(--bk)) left top / 1px var(--bl) no-repeat,
    linear-gradient(var(--bk), var(--bk)) right top / var(--bl) 1px no-repeat,
    linear-gradient(var(--bk), var(--bk)) right top / 1px var(--bl) no-repeat,
    linear-gradient(var(--bk), var(--bk)) left bottom / var(--bl) 1px no-repeat,
    linear-gradient(var(--bk), var(--bk)) left bottom / 1px var(--bl) no-repeat,
    linear-gradient(var(--bk), var(--bk)) right bottom / var(--bl) 1px no-repeat,
    linear-gradient(var(--bk), var(--bk)) right bottom / 1px var(--bl) no-repeat,
    var(--surface);
  border-radius: 3px; box-shadow: inset 0 0 0 1px var(--line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.card { padding: 20px; }
.section { padding: 0; }
.hero { margin-top: 16vh; }

/* Today: the reticle is the one big moment */
.focus { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding-top: 4px; }
.focus h1 { font-size: 30px; max-width: 18ch; }
.focus .small { margin: 0; max-width: 34ch; }
.reticle { width: min(62vw, 230px); aspect-ratio: 1; }
.ret { width: 100%; height: 100%; overflow: visible; }
.ret .tk { stroke: rgba(var(--accent-rgb), .28); stroke-width: 1; }
.ret .tk.l { stroke: rgba(var(--accent-rgb), .7); stroke-width: 1.4; }
.ret .inner { fill: rgba(var(--accent-rgb), .04); stroke: rgba(var(--accent-rgb), .2); stroke-width: 1; stroke-dasharray: 2 4; }
.ret .seg { fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: butt; filter: drop-shadow(0 0 5px rgba(var(--accent-rgb), .35)); opacity: .9; }
.ret.done .seg { stroke: var(--ok); filter: drop-shadow(0 0 5px rgba(111, 240, 176, .55)); }
.ret .num { font: 700 46px var(--display); fill: var(--text); text-anchor: middle; font-variant-numeric: tabular-nums; }
.ret .unit { font: 500 12px var(--display); fill: var(--silver); text-anchor: middle; letter-spacing: .12em; }
blockquote.mental { margin: 0; padding: 4px 0 4px 16px; border-left: 2px solid var(--amber); }
blockquote.mental p { margin: 0; font-size: 18px; line-height: 1.45; }
.card.mental { box-shadow: inset 2px 0 0 var(--amber), inset 0 0 0 1px var(--line); }
.card.focus { display: block; text-align: left; }
.blocks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.blocks li { display: grid; grid-template-columns: 58px 1fr; gap: 10px; align-items: baseline; font-size: 16px; padding: 12px 0;
  border-top: 1px solid var(--line); }
.blocks li:first-child { border-top: 0; padding-top: 2px; }
.blocks li b { color: var(--accent); font: 600 15px var(--display); font-variant-numeric: tabular-nums; }

/* ── controls ── */
button { font: 500 16px var(--display); letter-spacing: .02em; border: 0; border-radius: 2px; background: var(--surface-2); color: var(--text);
  min-height: 50px; padding: 0 18px; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line);
  transition: background .15s, color .15s, box-shadow .15s; }
button:hover { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .4); }
button.primary { background: var(--accent); color: var(--accent-ink); font-weight: 700; letter-spacing: .04em; box-shadow: 0 6px 18px rgba(var(--accent-rgb), .16);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
button.primary:hover { filter: brightness(1.08); }
button.primary:active { filter: brightness(.92); }
button.ghost { background: var(--surface-2); }
button.link, button.ghost.link { background: none; box-shadow: none; color: var(--silver); min-height: 44px; padding: 0 4px; font-size: 15px; }
button.link:hover { color: var(--accent); }
button.back { align-self: flex-start; }
button.back::before { content: "‹  "; }
button:disabled { opacity: .45; }
button.danger { color: var(--red); background: rgba(255, 106, 95, .07); box-shadow: inset 0 0 0 1px rgba(255, 106, 95, .3); }
button.danger[type="submit"] { background: rgba(255, 106, 95, .16); font-weight: 700; }
:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 3px; }
label { display: flex; flex-direction: column; gap: 6px; font: 500 13px var(--display); letter-spacing: .04em; color: var(--silver); }
label.inline { width: 110px; }
label.check { flex-direction: row; align-items: center; gap: 10px; color: var(--text); font: 400 15px var(--read); letter-spacing: 0; min-height: 44px; }
input, select, textarea { font: 400 16px var(--read); color: var(--text); background: rgba(8, 10, 13, .7); border: 0; border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--line), inset 0 -1px 0 rgba(var(--accent-rgb), .35); min-height: 48px; padding: 0 14px; }
textarea { padding: 12px 14px; resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus { outline: none; box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .55), 0 0 14px rgba(var(--accent-rgb), .15); }
input::placeholder, textarea::placeholder { color: var(--dim); }
input[type=checkbox] { min-height: 0; width: 20px; height: 20px; accent-color: var(--accent); flex: none; box-shadow: none; }
.scale { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.scale span { font-size: 15px; }
.scale output { color: var(--accent); font: 700 18px var(--display); font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
.scale input { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); min-height: 30px; padding: 0; background: none; box-shadow: none; }
.row label.inline { flex: none; width: 120px; }
.row > label { min-width: 0; }
.row > label input, .row > label select, .row > select { width: 100%; min-width: 0; }
.row > select.grow { width: auto; }
.row > input { min-width: 0; flex: 1; width: auto; }
.row > button { flex: none; }

/* folded forms */
details.add > summary { list-style: none; cursor: pointer; padding: 16px 20px; color: var(--accent); font: 600 15px var(--display); letter-spacing: .04em;
  display: flex; align-items: center; gap: 12px; }
details.add > summary::-webkit-details-marker, details.more > summary::-webkit-details-marker { display: none; }
details.add > summary::before { content: "+"; display: grid; place-items: center; width: 22px; height: 22px; font-size: 16px;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .55); }
details.add[open] > summary::before { content: "–"; }
details.add > form { padding: 0 20px 20px; }
.card details.add { background: rgba(8, 10, 13, .4); }
details.more > summary { list-style: none; cursor: pointer; color: var(--silver); font: 500 14px var(--display); letter-spacing: .04em; padding: 8px 0; }
details.more > summary::after { content: "  ›"; color: var(--accent); }
details.more[open] > summary::after { content: "  ⌄"; }
details.more > .stack { padding-top: 6px; }

/* lists: rows inside one bracketed panel */
#tm-squad, #tm-events, #a-hist, #a-scen, #tm-pending { gap: 0; overflow: hidden; }
#tm-squad > p, #tm-events > p, #a-hist > p { margin: 0; padding: 16px 20px; }
.hrow, .scen { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left;
  padding: 14px 40px 14px 20px; min-height: 0; border-radius: 0; background: none; box-shadow: none; border-top: 1px solid var(--line);
  width: 100%; font: 400 16px var(--read); letter-spacing: 0; }
.hrow::after, .scen::after { content: "›"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--dim); font: 500 20px var(--display); }
.hrow:first-child, .scen:first-child { border-top: 0; }
.hrow:hover, .scen:hover { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.hrow:hover::after, .scen:hover::after { color: var(--accent); }
.hrow > span:first-child { font: 500 16px var(--display); letter-spacing: .02em; }
.scen b { font: 600 16px var(--display); letter-spacing: .02em; }
.scen .small { margin: 0; }
.scen.suggested { box-shadow: inset 2px 0 0 var(--accent); }
.understood { margin: 0; padding: 0; list-style: none; font-size: 14px; display: flex; flex-direction: column; gap: 4px; color: var(--silver); }

/* ── coach chat ── */
.chat { display: flex; flex-direction: column; gap: 10px; padding-bottom: 84px; }
.msg { max-width: 86%; padding: 12px 15px; line-height: 1.45; font-size: 16px; white-space: pre-wrap; border-radius: 2px; }
.msg.me { align-self: flex-end; background: rgba(var(--accent-rgb), .14); box-shadow: inset -2px 0 0 var(--accent); }
.msg.mentra { align-self: flex-start; background: var(--surface); box-shadow: inset 2px 0 0 rgba(var(--accent-rgb), .5), inset 0 0 0 1px var(--line); }
.msg .rate { display: flex; gap: 6px; margin-top: 8px; }
.msg .rate button { min-height: 30px; padding: 0 10px; font-size: 13px; }
.composer { position: fixed; left: 0; right: 0; bottom: calc(62px + env(safe-area-inset-bottom)); display: flex; gap: 8px;
  background: linear-gradient(rgba(8, 10, 13, 0), var(--obsidian) 30%); padding: 14px max(16px, calc((100vw - 528px) / 2)) 10px; }
.composer input { flex: 1; min-width: 0; width: auto; }
.composer button { flex: none; min-width: 52px; padding: 0 16px; }
.mic { min-width: 52px; padding: 0; display: grid; place-items: center; color: var(--accent); touch-action: none; user-select: none;
  -webkit-user-select: none; -webkit-touch-callout: none; }
.mic.rec { background: var(--red); color: #2a0703; box-shadow: 0 0 18px rgba(255, 106, 95, .5); }

/* ── journal + plan ── */
.trends { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.trends li::marker { color: var(--accent); }
#j-entries:empty { display: none; }
.entry { border-top: 1px solid var(--line); padding: 16px 20px; }
.entry:first-child { border-top: 0; }
.entry .meta { color: var(--silver); font: 500 13px var(--display); letter-spacing: .03em; }
.plan { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.plan.current { --bk: var(--accent); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .35), 0 0 24px rgba(var(--accent-rgb), .08); }
.plan h2 { margin: 0; font-size: 19px; }
#p-data .label, #p-data p { margin: 0; }
#v-consent .card p { margin: 0; line-height: 1.5; }
#v-consent .card a { font-size: 14px; }
#v-consent label.check { align-items: flex-start; font-size: 14px; line-height: 1.45; }
#v-consent label.check input { margin-top: 3px; }

/* ── tab bar ── */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: rgba(8, 10, 13, .9); box-shadow: 0 -1px 0 var(--line); padding-bottom: env(safe-area-inset-bottom);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.tabs button { border-radius: 0; background: none; box-shadow: none; min-height: 60px; color: var(--silver); font: 500 13px var(--display);
  letter-spacing: .06em; padding: 0 2px; min-width: 0; position: relative; }
.tabs button.on { color: var(--accent); }
.tabs button.on::before, .tabs button.on::after { content: ""; position: absolute; top: 12px; bottom: 12px; width: 5px;
  border: 1px solid var(--accent); }
.tabs button.on::before { left: calc(50% - 36px); border-right: 0; }
.tabs button.on::after { right: calc(50% - 36px); border-left: 0; }
.toast { position: fixed; left: 50%; bottom: calc(140px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: rgba(17, 21, 27, .95); padding: 12px 16px; width: max-content; max-width: calc(100vw - 32px); font-size: 15px;
  box-shadow: inset 2px 0 0 var(--accent), inset 0 0 0 1px var(--line), 0 10px 30px rgba(0, 0, 0, .5); }

/* ── Arena ── */
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.chip { min-height: 36px; padding: 0 14px; font-size: 14px; white-space: nowrap; color: var(--silver); }
.chip.on { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; box-shadow: inset 0 0 0 1px var(--line); background: rgba(8, 10, 13, .5); }
.seg button { min-height: 44px; font-size: 14px; color: var(--silver); background: none; box-shadow: none; border-radius: 0; }
.seg button.on { color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 -2px 0 var(--accent); }
#a-exp-text { margin-top: -12px; }
.studio { display: flex; flex-direction: column; gap: 10px; }
.studio .label { margin: 0; }
.stats { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 12px; }
.stats > div { display: flex; flex-direction: column; }
.stats b { font: 700 30px/1 var(--display); color: var(--text); font-variant-numeric: tabular-nums; }
.stats span { font: 500 13px var(--display); color: var(--silver); letter-spacing: .05em; margin-top: 6px; }
.gauge { position: relative; width: 92px; height: 92px; align-items: center; justify-content: center; text-align: center; }
.gauge .ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.gauge b { font-size: 21px; position: relative; }
.gauge span { position: relative; margin-top: 2px; font-size: 11px; }
.ring .track { fill: none; stroke: rgba(var(--accent-rgb), .14); stroke-width: 3; }
.ring .val { fill: none; stroke: var(--accent); stroke-width: 3; filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), .35)); }
.challenge { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; min-height: 0; padding: 18px 20px;
  --bk: rgba(255, 182, 72, .7); font: 400 16px var(--read); letter-spacing: 0; }
.challenge .label { margin: 0; color: var(--amber); }
.challenge b { font: 600 18px var(--display); }
.challenge .small { margin: 0; }
.spark { width: 120px; height: 26px; margin-top: 4px; }
.spark polyline { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.spark circle { fill: var(--accent); }
.badge { font: 600 11px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; padding: 6px 9px; color: var(--silver);
  box-shadow: inset 0 0 0 1px var(--line); }
.badge.simulated { color: var(--amber); box-shadow: inset 0 0 0 1px rgba(255, 182, 72, .5); }
.badge.manual { color: var(--ok); box-shadow: inset 0 0 0 1px rgba(111, 240, 176, .45); }
.badge.cyan, .badge.device { color: #6FE4FF; box-shadow: inset 0 0 0 1px rgba(111, 228, 255, .45); }
.badge.danger { color: #FF6F6F; box-shadow: inset 0 0 0 1px rgba(255, 111, 111, .45); }
.ci-seg { display: flex; gap: 4px; margin: 6px 0 12px; width: 100%; overflow-x: auto; }
.ci-seg-btn { flex: 1; min-width: 36px; height: 38px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--text);
  font: 600 14px var(--display); border-radius: 4px; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.ci-seg-btn.on { background: var(--accent); color: #080A0D; border-color: var(--accent); font-weight: 700; box-shadow: 0 0 10px rgba(var(--accent-rgb), .3); }
.ci-hyd-btn { flex: 1; height: 34px; border: 2px solid transparent; border-radius: 4px; cursor: pointer; transition: transform .15s; }
.ci-hyd-btn.on { border-color: #FFF; transform: scale(1.1); box-shadow: 0 0 8px rgba(255,255,255,.5); }
#v-arenarun .eyebrow { margin: 4px 0 0; }
/* the commentary line is a broadcast lower-third */
.broadcast { position: relative; min-height: 96px; padding: 20px 20px 18px 24px; display: flex; align-items: center; overflow: hidden;
  background: linear-gradient(100deg, rgba(var(--accent-rgb), .16), rgba(17, 21, 27, .7) 45%, rgba(17, 21, 27, .5));
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .25); clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
.broadcast::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); box-shadow: 0 0 16px var(--accent); }
.broadcast .live { position: absolute; top: 9px; right: 22px; font: 700 10px var(--display); letter-spacing: .22em; color: var(--red); }
.broadcast .live::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--red); margin-right: 6px;
  vertical-align: 1px; box-shadow: 0 0 6px var(--red); }
.broadcast p { margin: 0; font: 600 21px/1.3 var(--display); }
.broadcast p.pop { animation: pop .35s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateX(-8px); } }
.toggles { gap: 18px; margin: -10px 0 -6px; }
/* options: a choice set the voice also reads as 1, 2, 3 */
#a-r-body { counter-reset: opt; }
.opt { counter-increment: opt; position: relative; text-align: left; padding: 15px 18px 15px 58px; line-height: 1.4; min-height: 58px;
  font: 400 16px var(--read); letter-spacing: 0; }
.opt::before { content: counter(opt); position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px;
  display: grid; place-items: center; font: 700 14px var(--display); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .55); }
.opt:hover { background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .5); }
.outcome { box-shadow: inset 3px 0 0 var(--silver), inset 0 0 0 1px var(--line); }
.outcome.good { --bk: var(--ok); box-shadow: inset 3px 0 0 var(--ok), inset 0 0 0 1px var(--line); }
.outcome.bad { --bk: var(--red); box-shadow: inset 3px 0 0 var(--red), inset 0 0 0 1px var(--line); }
.outcome p, .coachpt p { margin: 0; }
.outcome p:last-child { font: 600 19px var(--display); }
.coachpt { display: flex; flex-direction: column; gap: 6px; background: rgba(var(--accent-rgb), .07); }
.actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.act { min-height: 62px; font-size: 15px; padding: 0 10px; }
.act.hit { animation: hit .35s ease-out; }
@keyframes hit { 40% { background: rgba(var(--accent-rgb), .25); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), 0 0 18px rgba(var(--accent-rgb), .35); } }
#a-recap .card p { margin: 0; }
#a-recap .card { display: flex; flex-direction: column; gap: 8px; }
.pb { --bk: var(--amber); }
.pb .label { color: var(--amber); }

/* ── Coach Mode (team) ── */
.report { margin: 0; white-space: pre-wrap; font: 400 15px/1.6 var(--read); color: var(--text); font-variant-numeric: tabular-nums; }
.report:empty { display: none; }
.attrow { display: flex; align-items: center; gap: 10px; }
.attrow select { min-width: 132px; }
.statgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.statgrid label.inline { width: auto; }
.statgrid input { width: 100%; }
.obj { background: rgba(8, 10, 13, .45); box-shadow: inset 0 0 0 1px var(--line); padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.obj p { margin: 0; }
.obj.achieved { box-shadow: inset 3px 0 0 var(--ok), inset 0 0 0 1px var(--line); }
.obj.dropped { opacity: .55; }
#tm-pending-card { --bk: var(--amber); }
#tm-pending { background: none; gap: 12px; }
#tm-pending .row > span { flex-basis: 100%; margin: 0; }
#tm-pending .row > button { flex: 1; }

/* ── the one orchestrated moment: systems come online when a screen opens ── */
@media (prefers-reduced-motion: no-preference) {
  .view { animation: bootin .28s ease-out; }
  @keyframes bootin { from { opacity: 0; } }
  .ret .tk { animation: tick .5s ease-out both; }
  .ret .seg { stroke-dasharray: 520; stroke-dashoffset: 520; animation: draw .7s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(.25s + var(--i) * .16s); }
  .ret { animation: spinin .9s cubic-bezier(.2, .7, .2, 1); }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes tick { from { opacity: 0; } }
  @keyframes spinin { from { transform: rotate(-40deg); opacity: 0; } }
  .ring .val { stroke-dasharray: 220; stroke-dashoffset: 220; animation: draw .9s .2s cubic-bezier(.2, .7, .2, 1) forwards; }
}
@media (prefers-reduced-motion: reduce) { .broadcast p.pop, .act.hit { animation: none; } }

/* ── reports as readouts ── */
.report { display: flex; flex-direction: column; }
.rp-head { margin: 0 0 10px; color: var(--silver); font: 500 14px/1.45 var(--read); }
.rp-head + .rp-row { border-top: 0; }
.rp-note { margin: 10px 0 0; color: var(--silver); font-size: 14px; }
.rp-row { position: relative; display: grid; grid-template-columns: 1fr auto 86px; align-items: baseline; gap: 10px; padding: 9px 0;
  border-top: 1px solid var(--line); }
.rp-k { font-size: 15px; color: var(--text); }
.rp-k:first-letter { text-transform: uppercase; }
.rp-v { font: 700 18px var(--display); color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
.rp-s { font: 500 12px var(--display); color: var(--silver); letter-spacing: .03em; text-align: right; }
.rp-row.rate::after, .rp-row.rank::after, .rp-row.stat::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: var(--w, 0);
  background: linear-gradient(90deg, rgba(var(--accent-rgb), .2), var(--accent)); box-shadow: 0 0 8px rgba(var(--accent-rgb), .5); }
.rp-row.delta { grid-template-columns: 1fr auto auto 64px; }
.rp-d { font: 600 13px var(--display); color: var(--silver); text-align: right; font-variant-numeric: tabular-nums; }
.rp-d.up, .rp-d.down { color: var(--text); }
.rp-row.rank { grid-template-columns: 26px 1fr auto; }
.rp-row.rank .rp-s { grid-column: 2 / -1; text-align: left; margin-top: -4px; }
.rp-n { font: 600 13px var(--display); color: var(--accent); }
.rp-line { display: flex; flex-direction: column; gap: 2px; padding: 9px 0; border-top: 1px solid var(--line); }
.rp-line b { font: 500 15px var(--display); letter-spacing: .02em; }
.rp-line .rp-s { text-align: left; word-spacing: .1em; }

.card.focus { align-items: stretch; text-align: left; gap: 6px; }
.card.readout { display: grid !important; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: center; }
.card.readout > :not(.gauge):not(.stack) { grid-column: 1 / -1; }
.card.readout .stack { gap: 4px; }
.card.readout .label { margin: 0; }
.gauge.big { width: 104px; height: 104px; display: flex; flex-direction: column; }
.gauge.big b { font: 700 24px var(--display); }
.gauge.big span { font: 500 11px var(--display); color: var(--silver); letter-spacing: .05em; }

/* coach ↔ player link */
.onapp { font: 600 11px var(--display); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
  margin-left: 10px; padding: 2px 6px; box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .45); vertical-align: 2px; }
.linkbox { display: flex; flex-direction: column; gap: 10px; }
.linkbox code { font: 500 13px/1.5 var(--display); color: var(--accent); word-break: break-all; padding: 10px 12px; background: rgba(8, 10, 13, .7);
  box-shadow: inset 0 0 0 1px var(--line); user-select: all; -webkit-user-select: all; }
.obj-area { font: 600 12px var(--display); letter-spacing: .06em; color: var(--accent); }
.obj-area:first-letter { text-transform: uppercase; }
#t-coach { --bk: rgba(var(--accent-rgb), .8); }

/* ── numerals + status tags in the HUD face; everything else reads in the system face ── */
.brand, .clock, .demo-pill, .badge, .broadcast .live, .ret .num, .ret .unit, .stats b, .gauge b, .gauge span, .rp-v, .rp-n,
.blocks li b, .scale output, .opt::before, .onapp, .linkbox code, .rp-s, .stats span { font-family: var(--num); }
h1 { font-weight: 700; letter-spacing: -.022em; }
h2 { font-weight: 650; letter-spacing: -.015em; }
.label { font-weight: 600; letter-spacing: .01em; }
.tabs button { letter-spacing: .01em; font-size: 12px; }
.broadcast p { font-family: var(--display); font-weight: 650; letter-spacing: -.01em; }
.dot { border-color: var(--accent); box-shadow: 0 0 8px rgba(var(--accent-rgb), .55); }
body { transition: background-color .4s var(--ease); }

/* ── home: greeting + next-up row ── */
.greet { margin: 0 0 -6px; font: 600 15px var(--display); color: var(--text); }
#t-date { margin-bottom: -18px; }
.next-row { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; align-items: center;
  text-align: left; padding: 14px 44px 14px 18px; min-height: 64px; position: relative; background: var(--surface);
  box-shadow: inset 2px 0 0 rgb(var(--violet)), inset 0 0 0 1px var(--line); font: 400 15px var(--read); }
.next-row::after { content: "›"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font: 500 20px var(--num); color: rgb(var(--violet)); }
.next-row .nr-k { grid-row: 1 / 3; font: 600 11px var(--num); letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--violet)); }
.next-row b { font: 600 16px var(--display); }
.next-row .meta { grid-column: 2; }

/* ── desktop: the tab bar becomes a side rail; content gets a real column, not a stretched phone ── */
@media (min-width: 960px) {
  body { padding: 0 0 40px 232px; }
  .top { padding-left: 32px; padding-right: 32px; }
  .top::after { left: 32px; right: 32px; }
  main { max-width: 760px; padding: 18px 40px 40px; margin: 0; }
  .tabs { top: 0; bottom: 0; left: 0; right: auto; width: 232px; grid-auto-flow: row; grid-auto-rows: 52px; align-content: start;
    padding: 84px 16px 24px; box-shadow: 1px 0 0 var(--line); background: rgba(8, 10, 13, .96); }
  .tabs button { text-align: left; padding: 0 18px; font-size: 15px; min-height: 48px; border-radius: 2px; }
  .tabs button.on { background: var(--accent-soft); color: var(--text); }
  .tabs button.on::before { left: 0; top: 10px; bottom: 10px; width: 2px; border: 0; background: var(--accent); }
  .tabs button.on::after { display: none; }
  .composer { left: 232px; padding: 14px 40px 18px; bottom: 0; max-width: 760px; }
  .chat { padding-bottom: 96px; }
  .toast { bottom: 32px; left: calc(50% + 116px); }
  #v-today .focus { flex-direction: row; text-align: left; align-items: center; gap: 32px; }
  #v-today .focus h1 { max-width: none; }
  #v-today .focus-txt { align-items: flex-start; text-align: left; }
  .reticle { width: 200px; flex: none; }
}
.focus-txt { display: flex; flex-direction: column; gap: 8px; align-items: inherit; }

/* Arena → Coach pattern card */
.insight { --bk: rgba(var(--accent-rgb), .7); }
.insight .label { margin: 0; }
.insight p { margin: 0; }
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vs p { display: flex; flex-direction: column; gap: 4px; padding: 12px; background: rgba(8, 10, 13, .5); box-shadow: inset 0 0 0 1px var(--line); }
.vs p:last-child { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .45); }
.vs .k { font: 600 11px var(--num); letter-spacing: .1em; text-transform: uppercase; color: var(--silver); }
.vs b { font: 600 15px/1.35 var(--display); }

/* Scout */
#sc-list { gap: 0; overflow: hidden; position: relative; background:
    linear-gradient(var(--bk), var(--bk)) left top / var(--bl) 1px no-repeat, linear-gradient(var(--bk), var(--bk)) left top / 1px var(--bl) no-repeat,
    linear-gradient(var(--bk), var(--bk)) right bottom / var(--bl) 1px no-repeat, linear-gradient(var(--bk), var(--bk)) right bottom / 1px var(--bl) no-repeat,
    var(--surface); box-shadow: inset 0 0 0 1px var(--line); border-radius: 3px; }
#sc-list > p { margin: 0; padding: 16px 20px; }
.scard h2 { font-size: 24px; }
.scard p { margin: 0; }
.scard .k { font: 600 11px var(--num); letter-spacing: .1em; text-transform: uppercase; color: var(--silver); }
.sc-arena .label { margin: 6px 0 0; }
.ps-sections { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; }
#ps-sections:disabled { opacity: .5; }
.row > #sc-foot { flex: none; width: 132px; }

/* training-session builder */
.plan-row { box-shadow: inset 2px 0 0 var(--accent), inset 0 0 0 1px var(--line); }
.plan-row::after, .plan-row .nr-k { color: var(--accent); }
.ts-total { display: flex; align-items: baseline; gap: 10px; margin-bottom: -10px; }
#ts-total { font: 700 26px var(--num); font-variant-numeric: tabular-nums; }
.ts-blocks { margin: 0; padding: 0; list-style: none; counter-reset: ts; }
.ts-block { counter-increment: ts; display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 14px 16px; }
.ts-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ts-head b { font: 600 16px var(--display); }
.ts-head b::before { content: counter(ts) "  "; font: 700 13px var(--num); color: var(--accent); }
.ts-cat { font: 600 11px var(--num); letter-spacing: .12em; text-transform: uppercase; color: var(--silver); }
.ts-min { flex-direction: row; align-items: center; gap: 6px; justify-self: end; }
.ts-min input { width: 64px; min-height: 40px; text-align: center; font: 600 16px var(--num); padding: 0 6px; }
.ts-tools { grid-column: 1 / -1; display: flex; gap: 6px; justify-content: flex-end; margin-top: -4px; }
.ts-tools button { min-height: 36px; min-width: 40px; padding: 0 10px; font-size: 14px; }
.ts-block details { grid-column: 1 / -1; }
.ts-block details p { margin: 6px 0 0; }
.coach-next { margin: 0; padding: 12px 14px; background: rgba(8, 10, 13, .5); box-shadow: inset 2px 0 0 rgb(var(--cyan)), inset 0 0 0 1px var(--line); }
.coach-next b { display: block; font: 600 15px var(--display); }

/* tactics board */
.pitch-wrap { display: flex; justify-content: center; }
.pitch { width: min(100%, 440px); aspect-ratio: 68 / 105; touch-action: none; user-select: none; -webkit-user-select: none;
  background: linear-gradient(rgba(var(--accent-rgb), .045) 50%, transparent 50%) 0 0 / 100% 10.5%,
              radial-gradient(120% 80% at 50% 50%, #0F1A14, #0A0F0C); border-radius: 3px; box-shadow: inset 0 0 0 1px var(--line); }
.pitch.small { width: 100%; max-width: 260px; margin: 8px auto 0; display: block; touch-action: auto; }
.pitch .lines { fill: none; stroke: rgba(255, 255, 255, .28); stroke-width: .35; }
.pitch .lines .spot { fill: rgba(255, 255, 255, .4); stroke: none; }
.pitch .tok { cursor: grab; }
.pitch .tok circle { fill: var(--graphite-2); stroke: rgba(255, 255, 255, .45); stroke-width: .45; }
.pitch .tok.filled circle { fill: rgba(var(--accent-rgb), .9); stroke: rgba(var(--accent-rgb), 1); }
.pitch .tok.me circle { fill: rgb(var(--lime)); stroke: #fff; stroke-width: .6; }
.pitch .tok text { text-anchor: middle; font-family: var(--num); pointer-events: none; }
.pitch .tok .in { font-size: 3px; font-weight: 700; fill: var(--text); }
.pitch .tok.filled .in, .pitch .tok.me .in { fill: var(--accent-ink); }
.pitch .tok .slot { font-size: 2.3px; font-weight: 600; fill: rgba(245, 247, 250, .8); letter-spacing: .05px; }
.pitch .tok:focus-visible circle { stroke: #fff; stroke-width: .9; }
.pitch .arrow { stroke-width: .7; stroke-linecap: round; }
.pitch .arrow.run { stroke: rgb(var(--lime)); stroke-dasharray: 1.6 1.2; }
.pitch .arrow.pass { stroke: #fff; }
.pitch .arrow.tmp { opacity: .6; }
.pitch .head.run { fill: rgb(var(--lime)); } .pitch .head.pass { fill: #fff; }
.pitch.drawing { cursor: crosshair; }
.coach-board { padding: 12px 14px; background: rgba(8, 10, 13, .5); box-shadow: inset 2px 0 0 rgb(var(--cyan)), inset 0 0 0 1px var(--line); }
.coach-board b { display: block; font: 600 15px var(--display); margin-top: 2px; }
.danger-link { color: var(--red) !important; margin-left: auto; }
.tb-assign { position: sticky; bottom: 76px; z-index: 4; box-shadow: 0 12px 30px rgba(0,0,0,.5), inset 0 0 0 1px rgba(var(--accent-rgb), .4); }
.pitch.small .tok.filled circle { fill: var(--graphite-2); stroke: rgba(255, 255, 255, .4); }
.pitch.small .tok.filled .in { fill: var(--text); }
.pitch .tok.me circle, .pitch.small .tok.me circle { fill: #fff; stroke: rgb(var(--lime)); stroke-width: .9; }
.pitch .tok.me .in { fill: #0D1A04; }

/* Arena Live */
.live-entry { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; text-align: left;
  padding: 18px 20px; min-height: 0; font: 400 15px var(--read);
  background: linear-gradient(110deg, rgba(var(--violet), .22), rgba(17, 21, 27, .85) 60%);
  box-shadow: inset 0 0 0 1px rgba(var(--violet), .45); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.live-entry .le-dot { grid-row: 1 / 4; align-self: center; width: 12px; height: 12px; border-radius: 50%; background: var(--red);
  box-shadow: 0 0 10px var(--red); }
@media (prefers-reduced-motion: no-preference) { .live-entry .le-dot { animation: lvpulse 1.6s ease-in-out infinite; } }
@keyframes lvpulse { 50% { opacity: .35; } }
.live-entry .le-k { font: 700 11px var(--num); letter-spacing: .16em; text-transform: uppercase; color: rgb(var(--violet)); }
.live-entry b { font: 650 17px var(--display); }
.lr-stage { position: relative; width: min(64vw, 240px); aspect-ratio: 1; margin: 0 auto; }
.lr-ring, .lr-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lr-ring .track { fill: none; stroke: rgba(var(--accent-rgb), .14); stroke-width: 4; }
.lr-ring .val { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(var(--accent-rgb), .5)); }
.lr-mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lr-mid b { font: 700 58px var(--num); font-variant-numeric: tabular-nums; line-height: 1; }
.lr-mid span { font: 600 12px var(--num); letter-spacing: .16em; text-transform: uppercase; color: var(--silver); margin-top: 6px; }
.lr-count { margin: -8px 0 -14px; text-align: center; font: 600 12px var(--num); letter-spacing: .12em; color: var(--silver); text-transform: uppercase; }
#v-liverun h2 { text-align: center; font-size: 24px; }
#lr-call { margin: -12px 0 0; text-align: center; color: var(--silver); }
.lr-line { min-height: 64px; }
.lr-line p { font-size: 18px; }
.lr-actions .act { min-height: 78px; font: 650 17px var(--display); }
.lr-actions .act.primary { grid-column: 1 / -1; }
.lr-reps { display: flex; align-items: center; justify-content: center; gap: 22px; }
.lr-reps button { width: 64px; min-height: 56px; font: 700 26px var(--num); }
.lr-reps b { font: 700 34px var(--num); }
.lr-cam { position: relative; display: flex; align-items: center; gap: 12px; }
.lr-cam video { width: 120px; height: 90px; object-fit: cover; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--line); background: #000; }
.lr-cam canvas { position: absolute; left: 0; top: 0; width: 120px; height: 90px; pointer-events: none; }
.lr-ctl button { min-height: 52px; }
.lv-row { grid-template-columns: 1fr auto 1fr; }
.lv-row .rp-s { text-align: right; }
.lv-moves { grid-column: 1 / -1; font: 500 12px var(--num); color: rgb(var(--cyan)); letter-spacing: .02em; }
#v-live #lv-setup .seg { margin-top: -4px; }
.lv-camera-guide { padding: 12px; }
.lv-camera-guide summary { cursor: pointer; font: 600 15px var(--display); }
.lv-camera-guide ul { margin: 0; padding-left: 20px; color: var(--silver); }
.lv-camera-guide li + li { margin-top: 6px; }
.lv-camera-preview { width: min(100%, 320px); max-height: 220px; object-fit: contain; background: #000; border-radius: 4px; }

/* consent: age + parent link */
fieldset.age { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; }
fieldset.age legend { font: 600 15px var(--display); margin-bottom: 4px; padding: 0; color: var(--text); }
input[type=radio] { width: 20px; height: 20px; accent-color: var(--accent); flex: none; min-height: 0; box-shadow: none; }
.linkbox-code { font: 500 13px/1.5 var(--num); color: var(--accent); word-break: break-all; padding: 10px 12px; background: rgba(8, 10, 13, .7);
  box-shadow: inset 0 0 0 1px var(--line); user-select: all; -webkit-user-select: all; }
#lr-title[data-level="up"]::after { content: "  ▲ LEVEL UP"; font: 700 11px var(--num); letter-spacing: .12em; color: rgb(var(--lime)); vertical-align: 3px; }
:lang(es) #lr-title[data-level="up"]::after { content: "  ▲ SUBE NIVEL"; }
#lr-title[data-level="focus"]::after { content: "  ● TECHNIQUE"; font: 700 11px var(--num); letter-spacing: .12em; color: var(--amber); vertical-align: 3px; }
:lang(es) #lr-title[data-level="focus"]::after { content: "  ● TÉCNICA"; }

/* replays */
.rv-stage { display: flex; justify-content: center; }
#rv-canvas { width: 100%; max-width: 560px; aspect-ratio: 4 / 3; border-radius: 3px; background: #05080B; box-shadow: inset 0 0 0 1px var(--line); }
#rv-slider { width: 100%; accent-color: var(--accent); min-height: 30px; padding: 0; background: none; box-shadow: none; }
.rv-tools button { min-height: 44px; padding: 0 14px; font-size: 14px; }
.rv-tools button.on { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }
.rv-check { margin: 0; display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; }
.rv-check b { font: 700 16px var(--num); }
.rv-check.ok b { color: rgb(var(--lime)); } .rv-check.x b { color: var(--amber); }
#v-replay h2 { margin: 0; }
.rv-legend { margin: -12px 0 -10px; } .lg-you { color: rgb(var(--lime)); } .lg-ghost { color: rgb(var(--cyan)); }

/* ── development layer (develop.js): bell + notification centre, profile with sources, progress, challenges ── */
.bell { position: relative; align-self: center; width: 34px; height: 34px; min-height: 0; padding: 0; display: grid; place-items: center;
  background: none; box-shadow: none; color: var(--silver); border-radius: 0; }
.bell svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.bell.on { color: var(--accent); }
#bell-n { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; display: grid; place-items: center;
  font: 700 10px/1 var(--num); color: var(--accent-ink); background: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb), .6); }
.nt-item { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; text-align: left; padding: 14px 16px;
  min-height: 0; border-radius: 0; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); }
.nt-item.unread { box-shadow: inset 2px 0 0 var(--accent), inset 0 0 0 1px var(--line); }
.nt-item b { font: 600 15px var(--display); }
.nt-item.digest { gap: 4px; }
.nt-cat { font: 600 11px var(--num); letter-spacing: .12em; text-transform: uppercase; color: var(--silver); }
.nt-pref { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; font-size: 14px; }
.nt-pref.off { color: var(--dim); }

/* where each fact came from — never colour alone: every chip carries its word */
.src { display: inline-block; font: 600 10px/1 var(--num); letter-spacing: .1em; text-transform: uppercase; padding: 4px 6px;
  color: var(--silver); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.src.measured { color: rgb(var(--cyan)); box-shadow: inset 0 0 0 1px rgba(var(--cyan), .45); }
.src.coach { color: rgb(var(--lime)); box-shadow: inset 0 0 0 1px rgba(var(--lime), .45); }
.src.self { color: var(--text); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.src.camera, .src.simulated { color: var(--amber); box-shadow: inset 0 0 0 1px rgba(255, 182, 72, .45); }
.src.ai { color: rgb(var(--violet)); box-shadow: inset 0 0 0 1px rgba(var(--violet), .45); }
.dv-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.dv-sec { gap: 0 !important; }
.dv-item { padding: 12px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.dv-sec .label + .dv-item { border-top: 0; padding-top: 2px; }
.dv-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dv-k { color: var(--silver); font-size: 13px; text-transform: capitalize; }
.dv-v { margin: 0; font-size: 15px; }
.dv-meta { display: flex; align-items: center; gap: 14px; }
.dv-meta .link { font-size: 13px; padding: 0; min-height: 0; }
.dv-item.corrected .dv-v { color: var(--dim); text-decoration: line-through; }
.dv-fix { margin-top: 6px; }
.conf { font: 600 11px var(--num); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.conf::before { content: ""; display: inline-block; width: 18px; height: 4px; margin-right: 6px; vertical-align: middle;
  background: linear-gradient(90deg, var(--silver) 33%, transparent 33%) 0 0 / 100% 100%; box-shadow: inset 0 0 0 1px var(--line); }
.conf.c-medium::before { background: linear-gradient(90deg, var(--silver) 66%, transparent 66%); }
.conf.c-high::before { background: var(--accent); }
.dv-svg { width: 100%; height: auto; display: block; }
.dv-svg .grid { stroke: var(--line); stroke-width: 1; }
.dv-svg .b-s { fill: rgba(var(--accent-rgb), .75); }
.dv-svg .b-l { fill: rgb(var(--violet)); }
.dv-svg .ev { fill: var(--amber); }
.dv-svg .ax { fill: var(--dim); font: 600 9px var(--num); text-anchor: middle; }
.dv-ms { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.ms { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; box-shadow: inset 0 0 0 1px var(--line); color: var(--dim); }
.ms b { font: 600 14px var(--display); }
.ms.earned { color: var(--text); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .45), 0 0 18px rgba(var(--accent-rgb), .08); }
.ms.earned .meta { color: var(--accent); }
.ch { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line); }
.ch:first-child { border-top: 0; }
.ch.ended, .ch.done { opacity: .7; }
.ch-bar { height: 4px; background: rgba(255, 255, 255, .06); }
.ch-bar i { display: block; height: 100%; background: var(--accent); box-shadow: 0 0 8px rgba(var(--accent-rgb), .6); transition: width .6s var(--ease); }
.ch .link { align-self: flex-start; padding: 0; min-height: 0; font-size: 13px; }
.comeback { box-shadow: inset 2px 0 0 rgb(var(--cyan)), inset 0 0 0 1px var(--line); }
.warn { color: var(--amber) !important; }

/* Arena Live: today's plan with levels, the one changed variable and why */
#lv-brief:empty { display: none; }
.lv-lvl { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; border-top: 1px solid var(--line); }
.lv-lvl b { font: 600 15px var(--display); }
.lv-lvl.up b::after { content: " ▲"; color: rgb(var(--lime)); font-size: 12px; }
.lv-lvl.focus b::after { content: " ▼"; color: rgb(var(--cyan)); font-size: 12px; }
.lv-lvl .why { color: var(--dim); }
.pips { display: inline-flex; gap: 3px; }
.pips i { width: 10px; height: 4px; background: rgba(255, 255, 255, .1); }
.pips i.on { background: var(--accent); box-shadow: 0 0 6px rgba(var(--accent-rgb), .6); }
.lv-diff { margin-top: 6px; }
.lv-review .rv-ok li::marker { color: rgb(var(--lime)); }
.lv-review .rv-todo li::marker { color: var(--amber); }
.lv-review li.flagged { text-decoration: line-through; color: var(--dim); }
.coachnote { margin: 0; padding: 12px 14px; box-shadow: inset 2px 0 0 rgb(var(--lime)); background: rgba(var(--lime), .05); }
.coachnote p { margin: 0; }
.tp-lvl { gap: 10px; font-size: 14px; }
.tp-lvl select { max-width: 46%; }
.card.inner { padding: 14px; background: rgba(8, 10, 13, .45); }
#t-dev, #j-dev { box-shadow: inset 2px 0 0 var(--accent), inset 0 0 0 1px var(--line); }
#t-dev .nr-k, #j-dev .nr-k, #t-dev::after, #j-dev::after { color: var(--accent); }
#bell-n { top: -2px; right: -6px; min-width: 15px; height: 15px; font-size: 9.5px; }
.ch .row b { min-width: 0; } .ch .row .meta { white-space: nowrap; font-family: var(--num); }
#dv-chart-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.key { display: inline-flex; align-items: center; gap: 6px; } .key i { width: 10px; height: 10px; display: inline-block; }
.key.k-s i { background: rgba(var(--accent-rgb), .75); } .key.k-l i { background: rgb(var(--violet)); } .key.k-e i { background: var(--amber); border-radius: 50%; width: 7px; height: 7px; }

/* ── first journey (onboard.js): promise, quiz, plan, paywall, first drill; share sheet (share.js) ── */
.promise-hero { position: relative; padding: 34px 0 6px; display: flex; flex-direction: column; gap: 14px; }
.promise-hero::before { content: ""; position: absolute; inset: -40px -20px auto; height: 320px; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 70% at 30% 20%, rgba(var(--accent-rgb), .16), transparent 70%); }
.promise-h { font: 700 clamp(36px, 10vw, 54px)/1.02 var(--display); letter-spacing: -.02em; margin: 0; }
.promise-l { font-size: 17px; color: var(--silver); margin: 0; max-width: 34ch; }
.roles { margin-top: 8px; }
.promise-points { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 10px; }
.promise-points li { padding-left: 22px; position: relative; font-size: 15px; }
.promise-points li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 2px; background: var(--accent);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), .8); }
.qz-top { display: flex; justify-content: space-between; align-items: center; }
.qz-top .link { padding: 0; min-height: 0; }
.qz-n { font: 600 12px var(--num); letter-spacing: .14em; color: var(--silver); }
.qz-bar { height: 3px; background: rgba(255, 255, 255, .07); margin-top: -10px; }
.qz-bar i { display: block; height: 100%; background: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb), .7); transition: width .4s var(--ease); }
.qz-q { font: 700 30px/1.15 var(--display); margin: 8px 0 0; }
#qz-opts { display: flex; flex-wrap: wrap; gap: 10px; overflow: visible; }
#qz-opts .chip { white-space: normal; text-align: left; min-height: 48px; padding: 0 18px; font-size: 15px; color: var(--text); background: var(--surface); border-radius: 0;
  box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .15s var(--ease), background .15s var(--ease); }
#qz-opts .chip.on { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent); }
#qz-opts.shake { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.qz-text { width: 100%; }
.fp-prio { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.fp-prio li::marker { color: var(--accent); font-family: var(--num); }
.fp-day { display: grid; grid-template-columns: 64px 1fr; column-gap: 12px; row-gap: 2px; padding: 10px 0; border-top: 1px solid var(--line); }
.card .label + .fp-day { border-top: 0; }
.fp-day .fp-d { grid-row: 1 / 3; font: 600 12px var(--num); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); padding-top: 3px; }
.fp-day.live .fp-d { color: rgb(var(--violet)); }
.fp-day.recovery .fp-d { color: rgb(var(--cyan)); }
.fp-day b { font: 600 15px var(--display); }
.fp-first { box-shadow: inset 2px 0 0 var(--accent), inset 0 0 0 1px var(--line); }
.fp-first h2 { margin: 0; }
.fp-rec { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid var(--line); }
.card .label + .fp-rec { border-top: 0; }
.pw-plan h2 { margin: 0; font-size: 20px; }
.pw-price { font: 600 16px var(--num); color: var(--accent); }
.pw-plan.current { box-shadow: inset 0 0 0 1.5px rgba(var(--accent-rgb), .55); }
.pw-up { display: grid; place-items: center; min-height: 48px; text-decoration: none; color: var(--text); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .5); }
.pw-facts p { margin: 0; color: var(--silver); }
.fd-stage { position: relative; width: 210px; height: 210px; margin: 6px auto; }
.fd-stage .lr-ring, .fd-stage .lr-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fd-stage .lr-mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.fd-stage .lr-mid b { font: 700 46px var(--num); }
.fd-stage .lr-mid span { font: 600 12px var(--num); letter-spacing: .14em; color: var(--silver); }
.fd-block { text-align: center; font-size: 17px; min-height: 2.6em; margin: 0; }
#fd-blocks li.on { color: var(--accent); }
.share-sheet { position: fixed; inset: 0; z-index: 30; background: rgba(4, 5, 7, .82); display: grid; place-items: center; padding: 20px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sh-in { width: min(420px, 100%); display: flex; flex-direction: column; gap: 14px; }
.sh-in img { width: 100%; height: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, .6), 0 0 0 1px var(--line); }

/* ── the Core (companion.js): Mentra's presence. Canvas inside; state shown by light, never by a fake animation ── */
.core { position: relative; display: block; }
.core canvas { position: absolute; inset: 0; display: block; }
.core-head { display: flex; align-items: center; gap: 14px; }
.core-head .core-host { width: 76px; height: 76px; flex: none; }
.core-head.small .core-host { width: 54px; height: 54px; }
.core-head .eyebrow { margin: 0; }
.core-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.core-id b { font: 700 15px/1 var(--display); letter-spacing: .28em; text-transform: uppercase; }
.core-cap { font: 600 12px var(--num); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); transition: color .4s var(--ease); }
.core-cap[data-state="thinking"] { color: rgb(var(--cyan)); }
.core-cap[data-state="listening"] { color: #E2EEFF; }
.core-cap[data-state="celebrating"] { color: #FFCE78; }
.core-cap[data-state="unavailable"] { color: var(--silver); }
#v-coach .core-head { position: sticky; top: 52px; z-index: 3; padding: 6px 0 10px; background: linear-gradient(var(--obsidian) 75%, transparent); }
.msg.mentra.thinking { color: var(--silver); }
.core-row { grid-template-columns: 44px 1fr; }
.core-mini { width: 44px; height: 44px; grid-row: 1 / 3; align-self: center; }
.pr-core { width: min(64vw, 260px); aspect-ratio: 1; margin: 6px auto -18px; }

/* ── landing: one object, scroll-told (the Core stays on stage while chapters pass over it) ── */
.landing { display: block; --ld-p: 0; }
.landing[data-form="arena"] { --accent-rgb: var(--violet); --accent-ink: #1E0B33; }
.landing[data-form="progress"], .landing[data-form="scan"] { --accent-rgb: var(--cyan); --accent-ink: #04162B; }
.landing { --accent: rgb(var(--accent-rgb)); --accent-soft: rgba(var(--accent-rgb), .09); --bk: rgba(var(--accent-rgb), .42); }
.ld-stage { position: sticky; top: 0; height: 100dvh; margin: -60px -20px calc(-100dvh + 60px); pointer-events: none; z-index: 0; overflow: hidden; }
.ld-stage::after { content: ""; position: absolute; inset: auto 0 0; height: 46%; background: linear-gradient(transparent, rgba(8, 10, 13, .82) 70%); }
.ld-core { position: absolute; left: 50%; top: 36%; width: min(92vw, 470px); aspect-ratio: 1; transform: translate(-50%, -50%) scale(1);
  transition: transform 1.1s var(--ease), opacity .8s var(--ease), top 1.1s var(--ease); }
.landing[data-form="plan"] .ld-core { transform: translate(-50%, -50%) scale(.88); }
.landing[data-form="arena"] .ld-core { transform: translate(-50%, -50%) scale(1.08); }
.landing[data-form="progress"] .ld-core, .landing[data-form="trust"] .ld-core { top: 32%; }
.landing[data-form="join"] .ld-core { top: 24%; opacity: .45; transform: translate(-50%, -50%) scale(.8); }
.ld-ch { position: relative; z-index: 1; min-height: 88dvh; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding-bottom: 9dvh; }
.ld-intro { min-height: calc(100dvh - 70px); padding-bottom: 6dvh; }
.ld-eye { margin: 0; font: 600 12px var(--num); letter-spacing: .3em; text-transform: uppercase; color: var(--accent); }
.ld-k { margin: 0; display: flex; gap: 12px; align-items: baseline; font: 600 12px var(--num); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.ld-n { color: var(--silver); }
.ld-big { margin: 0; font: 700 clamp(34px, 9.6vw, 64px)/1.02 var(--display); letter-spacing: -.025em; max-width: 14ch; text-wrap: balance; }
.ld-cta { gap: 16px; margin-top: 6px; }
a.primary.ld-go { display: inline-grid; place-items: center; min-height: 52px; padding: 0 26px; text-decoration: none;
  font: 700 16px var(--display); letter-spacing: .04em; background: var(--accent); color: var(--accent-ink); transition: filter .15s, background .6s var(--ease);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
a.primary.ld-go:hover { filter: brightness(1.08); } a.primary.ld-go:active { filter: brightness(.92); }
a.primary.ld-go:focus-visible, .ld-ch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ld-hint { font: 600 11px var(--num); letter-spacing: .3em; text-transform: uppercase; color: var(--dim); }
.ld-join { min-height: 0; padding: 30dvh 0 40px; justify-content: flex-start; }
.ld-join .card { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
@media (prefers-reduced-motion: no-preference) {
  .ld-ch .ld-big, .ld-ch .ld-k { opacity: .18; transform: translateY(18px); transition: opacity .7s var(--ease), transform .9s var(--ease); }
  .ld-ch.in .ld-big, .ld-ch.in .ld-k { opacity: 1; transform: none; }
  .ld-hint::after { content: ""; display: inline-block; width: 18px; height: 1px; margin-left: 10px; vertical-align: middle; background: currentColor; animation: ldhint 2.2s var(--ease) infinite; transform-origin: left; }
  @keyframes ldhint { 0% { transform: scaleX(0); } 60% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
}
/* progress hairline along the right edge while reading the landing */
.landing::after { content: ""; position: fixed; right: 0; top: 0; width: 2px; height: calc(var(--ld-p) * 100dvh); background: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb), .8); z-index: 6; }

/* desktop: the stage gets its own column — a command-center layout instead of a stretched phone */
@media (min-width: 960px) {
  body:has(#v-signin:not([hidden])) main { max-width: 1180px; }
  .landing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: 48px; }
  .ld-stage { grid-column: 2; grid-row: 1 / span 6; position: sticky; top: 70px; height: calc(100dvh - 90px); margin: 0; overflow: visible; }
  .ld-stage::after { display: none; }
  .ld-core, .landing[data-form] .ld-core { top: 50%; width: min(38vw, 540px); }
  .ld-ch { grid-column: 1; min-height: 86dvh; justify-content: center; padding-bottom: 0; }
  .ld-intro { min-height: calc(100dvh - 90px); }
  .ld-join { padding: 10dvh 0 80px; }
  #ld-points { display: contents; }
  .ld-big { font-size: clamp(44px, 4.6vw, 72px); }
}

/* ── Arena Live: the Core sits inside the timer ring and coaches the round ── */
.lr-core { position: absolute; inset: 9%; opacity: .9; }
.lr-stage .lr-ring, .lr-stage .lr-mid { z-index: 1; }
.lr-mid b { text-shadow: 0 0 18px var(--obsidian), 0 0 6px var(--obsidian); }
#v-arenarecap .core-head { margin-bottom: -4px; }

/* ── screen changes: a short entrance instead of an instant swap ── */
@media (prefers-reduced-motion: no-preference) {
  .view.enter { animation: viewin .32s var(--ease) both; }
  @keyframes viewin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .view.landing.enter { animation-name: viewfade; }
  @keyframes viewfade { from { opacity: 0; } to { opacity: 1; } }
}

/* ══ Landing stage, after the reference: one object under a light, huge ghost word behind it, a colour field per
   chapter, labels pinned to the object, a chapter rail, and text that arrives with an echo. ══ */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ld-stage > * { position: absolute; }
.ld-field { inset: 0; background-color: rgb(var(--accent-rgb)); opacity: .14;
  -webkit-mask-image: radial-gradient(70% 46% at 50% 36%, #000 0, rgba(0,0,0,.4) 42%, transparent 74%);
          mask-image: radial-gradient(70% 46% at 50% 36%, #000 0, rgba(0,0,0,.4) 42%, transparent 74%);
  transition: background-color .9s var(--ease), opacity .9s var(--ease); }
.landing[data-form="arena"] .ld-field { opacity: .3; }
.landing[data-form="join"] .ld-field { opacity: .07; }
.ld-beam { left: 50%; top: 0; width: min(130vw, 760px); height: 50%; transform: translateX(-50%); transform-origin: top;
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(var(--accent-rgb), .07) 55%, transparent);
  clip-path: polygon(45% 0, 55% 0, 82% 100%, 18% 100%); filter: blur(5px); mix-blend-mode: screen; transition: opacity .9s var(--ease); }
.landing[data-form="join"] .ld-beam { opacity: .35; }
.ld-fixture { position: absolute; left: 50%; top: 2px; width: 92px; height: 10px; transform: translateX(-50%); border-radius: 50%;
  border: 1px solid rgba(255,255,255,.45); box-shadow: 0 0 18px rgba(255,255,255,.35), 0 4px 22px rgba(var(--accent-rgb), .45); }
.ld-ghost { left: 50%; top: 36%; margin: 0; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none;
  font: 800 calc(min(100vw, 640px) / (var(--n, 6) * .62)) / .9 var(--display); letter-spacing: -.035em;
  color: transparent; -webkit-text-stroke: 1px rgba(var(--accent-rgb), .38);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(var(--accent-rgb), .03) 80%); -webkit-background-clip: text; background-clip: text;
  transition: -webkit-text-stroke-color .9s var(--ease), top 1.1s var(--ease); }
.landing[data-form="progress"] .ld-ghost, .landing[data-form="trust"] .ld-ghost { top: 32%; }
.landing[data-form="join"] .ld-ghost { top: 24%; opacity: .5; }
.ld-floor { left: 50%; top: calc(36% + min(92vw, 470px) * .36); width: min(66vw, 340px); height: 30px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), .3), rgba(var(--accent-rgb), .06) 60%, transparent); filter: blur(3px);
  transition: top 1.1s var(--ease), opacity .8s var(--ease); }
.landing[data-form="join"] .ld-floor { opacity: 0; }
.ld-ghost, .ld-floor, .ld-field, .ld-beam { z-index: 0; } .ld-core { z-index: 1; }

/* labels pinned to the Core */
.ld-tags { position: absolute; inset: 0; }
.ld-tag { position: absolute; display: flex; align-items: center; gap: 8px; max-width: 46%;
  font: 600 11px/1.25 var(--num); letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
.ld-tag b { font: inherit; padding: 5px 8px; background: rgba(8, 10, 13, .66); box-shadow: inset 1px 0 0 rgb(var(--accent-rgb));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ld-tag i { flex: none; position: relative; width: 30px; height: 1px; background: rgba(var(--accent-rgb), .8); }
.ld-tag i::after { content: ""; position: absolute; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--accent-rgb));
  box-shadow: 0 0 10px rgb(var(--accent-rgb)); }
.ld-tag.t1 { left: 3%; top: 13%; } .ld-tag.t1 i { order: 2; } .ld-tag.t1 i::after { right: -4px; }
.ld-tag.t2 { right: 3%; bottom: 17%; flex-direction: row; } .ld-tag.t2 i::after { left: -4px; }
.ld-tag.t2 b { box-shadow: inset -1px 0 0 rgb(var(--accent-rgb)); text-align: right; }
.landing[data-form="join"] .ld-tags { display: none; }

/* chapter rail */
.ld-rail { position: fixed; right: 4px; top: 74%; transform: translateY(-50%); z-index: 6; display: flex; flex-direction: column; gap: 2px; }
.ld-rail button { position: relative; min-height: 34px; min-width: 34px; padding: 0 4px; background: none; border: 0; box-shadow: none;
  font: 600 10px var(--num); letter-spacing: .1em; color: var(--dim); transition: color .3s var(--ease); }
.ld-rail button::before { content: ""; position: absolute; right: 100%; top: 50%; width: 0; height: 1px; background: var(--accent); transition: width .4s var(--ease); }
.ld-rail button.on { color: var(--accent); } .ld-rail button.on::before { width: 14px; }
.ld-rail button:hover { color: var(--text); }
.ld-rail button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.landing .ld-ch { padding-right: 34px; }
/* progress: a hairline across the top instead of the right edge (the rail lives there now) */
.landing::after { right: auto; left: 0; top: 0; width: calc(var(--ld-p) * 100%); height: 2px; }

/* big chapter type arrives with an echo trail */
.ld-big { position: relative; }
.ld-big::before, .ld-big::after { content: attr(data-echo); position: absolute; inset: 0; color: transparent; pointer-events: none; opacity: 0;
  -webkit-text-stroke: .8px rgba(var(--accent-rgb), .7); }
@media (prefers-reduced-motion: no-preference) {
  .ld-ch.in .ld-big::before { animation: echo .9s var(--ease) both; }
  .ld-ch.in .ld-big::after { animation: echo2 1.05s var(--ease) both; }
  @keyframes echo { from { opacity: .75; transform: translateY(-.42em); } to { opacity: 0; transform: none; } }
  @keyframes echo2 { from { opacity: .45; transform: translateY(-.84em); } to { opacity: 0; transform: none; } }
  .ld-ghost.swap { animation: ghostin 1s var(--ease) both; }
  @keyframes ghostin { from { opacity: 0; letter-spacing: .12em; filter: blur(10px); } }
  .ld-tag { animation: tagin .7s var(--ease) both; } .ld-tag.t2 { animation-delay: .12s; }
  .ld-tag i { animation: linein .6s .15s var(--ease) both; transform-origin: right; } .ld-tag.t2 i { transform-origin: left; }
  @keyframes tagin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  @keyframes linein { from { transform: scaleX(0); } to { transform: scaleX(1); } }

  /* opening — first visit: light comes on, the Core assembles, the name and words arrive (≈2.4 s) */
  .boot .ld-stage::before { content: ""; position: absolute; left: 0; right: 0; top: 36%; height: 1px; z-index: 2;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .9), transparent); animation: scan 1s var(--ease) both; }
  @keyframes scan { 0% { transform: scaleX(0); opacity: 1; } 60% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1) translateY(0); opacity: 0; } }
  .boot-full .ld-beam { animation: beam 1.3s .15s var(--ease) both; }
  .boot-full .ld-fixture { animation: flick .9s .05s steps(1) both; }
  .boot-full .ld-field { animation: fade 1.4s .5s var(--ease) both; }
  .boot-full .ld-floor { animation: fade 1s 1.1s var(--ease) both; }
  .boot-full .ld-ghost { animation: ghostin 1.2s 1s var(--ease) both; }
  .boot-full .ld-tags { animation: fade .6s 2s var(--ease) both; }
  .boot-full .ld-intro > * { animation: rise .7s var(--ease) both; }
  .boot-full .ld-intro > :nth-child(1) { animation-delay: 1.45s; } .boot-full .ld-intro > :nth-child(2) { animation-delay: 1.58s; }
  .boot-full .ld-intro > :nth-child(3) { animation-delay: 1.72s; } .boot-full .ld-intro > :nth-child(4) { animation-delay: 1.86s; }
  .boot-full .ld-intro > :nth-child(5) { animation-delay: 2s; }
  body:has(#v-signin.boot-full) .top, .boot-full .ld-rail { animation: fade .8s 1.9s var(--ease) both; }
  /* returning visitor: the same moment, compressed */
  .boot-fast .ld-beam, .boot-fast .ld-field, .boot-fast .ld-ghost { animation: fade .6s var(--ease) both; }
  .boot-fast .ld-intro > * { animation: rise .5s .2s var(--ease) both; }
  @keyframes beam { from { opacity: 0; transform: translateX(-50%) scaleY(.2); } }
  @keyframes flick { 0% { opacity: 0; } 20% { opacity: 1; } 30% { opacity: .2; } 45% { opacity: 1; } 100% { opacity: 1; } }
  @keyframes fade { from { opacity: 0; } }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* desktop: the stage column carries the light, the word and the labels */
@media (min-width: 960px) {
  .ld-field { -webkit-mask-image: radial-gradient(60% 50% at 50% 50%, #000 0, rgba(0,0,0,.4) 42%, transparent 74%);
                      mask-image: radial-gradient(60% 50% at 50% 50%, #000 0, rgba(0,0,0,.4) 42%, transparent 74%); inset: -10% -20%; }
  .ld-beam { height: 50%; top: -70px; }
  .ld-ghost, .landing[data-form] .ld-ghost { top: 50%; font-size: calc(min(44vw, 620px) / (var(--n, 6) * .62)); }
  .ld-floor, .landing[data-form] .ld-floor { top: calc(50% + min(38vw, 540px) * .36); width: min(26vw, 380px); }
  .boot .ld-stage::before { top: 50%; }
  .ld-tag { font-size: 12px; }
  .ld-rail { right: 10px; top: 50%; }
  .landing .ld-ch { padding-right: 0; }
}

/* ── companion: concerned (today's own check-in was RED) ── */
.core-cap[data-state="concerned"] { color: #FFB254; }
.next-row.core-row.concern { box-shadow: inset 2px 0 0 #FFB254; }
.ld-tags { z-index: 1; }
.core canvas.holo { width: 100%; height: 100%; }

/* ══ 15 Oct (4): the hologram is the hero object (as the can is in the reference). Bold colour wash per section,
   matched to the head's own colour; solid lettering behind it; projector light rising from the base. ══ */
.landing { --field-rgb: 0, 87, 255; }
.landing[data-form="plan"], .landing[data-form="trust"] { --field-rgb: 0, 229, 255; }
.landing[data-form="arena"], .landing[data-form="scan"] { --field-rgb: 95, 0, 255; }
.landing[data-form="progress"] { --field-rgb: 255, 170, 30; }
.landing[data-form="join"] { --field-rgb: 0, 87, 255; }
.ld-field { background-color: rgb(var(--field-rgb)); opacity: .5;
  -webkit-mask-image: radial-gradient(95% 62% at 50% 34%, #000 0, rgba(0,0,0,.55) 38%, rgba(0,0,0,.12) 66%, transparent 86%);
          mask-image: radial-gradient(95% 62% at 50% 34%, #000 0, rgba(0,0,0,.55) 38%, rgba(0,0,0,.12) 66%, transparent 86%); }
.landing[data-form="arena"] .ld-field, .landing[data-form="scan"] .ld-field { opacity: .62; }
.landing[data-form="join"] .ld-field { opacity: .2; }
.ld-stage::after { height: 52%; background: linear-gradient(transparent, rgba(8, 10, 13, .9) 62%); }
/* projector light: a cone rising from the base, not a spotlight from above */
.ld-beam { top: auto; bottom: calc(100% - 36% - min(104vw, 560px) * .36); height: min(104vw, 560px) * .9; height: calc(min(104vw, 560px) * .9);
  width: min(104vw, 560px); transform-origin: bottom;
  background: linear-gradient(0deg, rgba(var(--field-rgb), .34), rgba(0, 229, 255, .08) 55%, transparent);
  clip-path: polygon(38% 100%, 62% 100%, 92% 0, 8% 0); filter: blur(6px); }
.ld-core { width: min(104vw, 560px); }
/* lettering behind the head: solid, heavy, light — like the reference's word behind the can */
.ld-ghost { font-weight: 800; color: rgba(255, 255, 255, .13); background: none; -webkit-text-fill-color: rgba(255, 255, 255, .13);
  -webkit-text-stroke: 1px rgba(255, 255, 255, .22); letter-spacing: -.045em; text-shadow: 0 0 40px rgba(var(--field-rgb), .45);
  font-size: calc(min(100vw, 640px) / (var(--n, 6) * .6)); }
/* instrument rings around the head (the Mac projection bay's rings, quieter) */
.ld-rings { left: 50%; top: 36%; width: min(84vw, 450px); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none;
  transition: top 1.1s var(--ease), transform 1.1s var(--ease); }
.ld-rings i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(0, 229, 255, .22); }
.ld-rings i + i { inset: -5%; border: 0; background: repeating-conic-gradient(rgba(0, 229, 255, .45) 0 .6deg, transparent .6deg 6deg);
  -webkit-mask: radial-gradient(closest-side, transparent 96%, #000 96.5%); mask: radial-gradient(closest-side, transparent 96%, #000 96.5%); opacity: .5; }
.ld-rings b { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #D9F4FF; box-shadow: 0 0 10px #00E5FF; }
.ld-rings b:nth-of-type(1) { left: 6%; top: 24%; } .ld-rings b:nth-of-type(2) { right: 3%; top: 62%; }
@media (prefers-reduced-motion: no-preference) {
  .ld-rings { animation: ringturn 60s linear infinite; }
  @keyframes ringturn { to { transform: translate(-50%, -50%) rotate(360deg); } }
}
.ld-tag i { background: rgba(var(--field-rgb), .9); } .ld-tag i::after { background: #D9F4FF; box-shadow: 0 0 10px rgb(var(--field-rgb)); }
.ld-tag b { box-shadow: inset 1px 0 0 rgb(var(--field-rgb)); } .ld-tag.t2 b { box-shadow: inset -1px 0 0 rgb(var(--field-rgb)); }
/* the head moves between chapters, like the object in the reference */
.landing[data-form="plan"] .ld-core { transform: translate(-44%, -50%) scale(.94); }
.landing[data-form="arena"] .ld-core { transform: translate(-50%, -52%) scale(1.1); }
.landing[data-form="progress"] .ld-core, .landing[data-form="trust"] .ld-core { transform: translate(-56%, -50%) scale(.96); }
.landing[data-form="join"] .ld-rings, .landing[data-form="join"] .ld-beam { opacity: .3; }
.landing[data-form="progress"] .ld-rings, .landing[data-form="trust"] .ld-rings { top: 32%; }
.landing[data-form="join"] .ld-rings { top: 24%; }
.boot-full .ld-rings { animation: fade 1s 1.2s var(--ease) both; }
.boot-full .ld-beam { animation: beam 1.1s .2s var(--ease) both; }
@media (min-width: 960px) {
  .ld-core, .landing[data-form] .ld-core { width: min(44vw, 640px); }
  .ld-rings { top: 50%; width: min(36vw, 520px); } .landing[data-form] .ld-rings { top: 50%; }
  .ld-beam { bottom: auto; top: calc(50% - min(44vw, 640px) * .5); height: calc(min(44vw, 640px) * .9); width: min(44vw, 640px); }
  .ld-ghost, .landing[data-form] .ld-ghost { font-size: calc(min(52vw, 760px) / (var(--n, 6) * .6)); }
  .ld-field { -webkit-mask-image: radial-gradient(70% 70% at 62% 50%, #000 0, rgba(0,0,0,.5) 40%, transparent 80%);
                      mask-image: radial-gradient(70% 70% at 62% 50%, #000 0, rgba(0,0,0,.5) 40%, transparent 80%); }
}
/* fit: labels never leave the screen while the head moves; softer projector light; desktop sizing */
.ld-core { width: min(94vw, 520px); }
.ld-tag.t1 { left: 7%; } .ld-tag.t2 { right: 7%; }
.landing[data-form="plan"] .ld-core { transform: translate(-47%, -50%) scale(.96); }
.landing[data-form="arena"] .ld-core { transform: translate(-50%, -51%) scale(1.03); }
.landing[data-form="progress"] .ld-core, .landing[data-form="trust"] .ld-core { transform: translate(-53%, -50%) scale(.97); }
.ld-beam { opacity: .75; filter: blur(14px); bottom: calc(100% - 36% - min(94vw, 520px) * .36); height: calc(min(94vw, 520px) * .9); width: min(94vw, 520px); }
@media (min-width: 960px) {
  .ld-core, .landing[data-form] .ld-core { width: min(36vw, 520px); }
  .ld-rings, .landing[data-form] .ld-rings { width: min(30vw, 430px); }
  .ld-beam { top: calc(50% - min(36vw, 520px) * .5); height: calc(min(36vw, 520px) * .9); width: min(36vw, 520px); bottom: auto; }
  .ld-ghost, .landing[data-form] .ld-ghost { font-size: calc(min(46vw, 680px) / (var(--n, 6) * .6)); }
  .ld-field { -webkit-mask-image: radial-gradient(60% 75% at 60% 50%, #000 0, rgba(0,0,0,.5) 40%, transparent 82%);
                      mask-image: radial-gradient(60% 75% at 60% 50%, #000 0, rgba(0,0,0,.5) 40%, transparent 82%); }
}
@media (min-width: 960px) {
  .ld-field { position: fixed; inset: 0;
    -webkit-mask-image: radial-gradient(48% 80% at 70% 52%, #000 0, rgba(0,0,0,.45) 42%, transparent 85%);
            mask-image: radial-gradient(48% 80% at 70% 52%, #000 0, rgba(0,0,0,.45) 42%, transparent 85%); }
  .ld-ghost { color: rgba(255,255,255,.09); -webkit-text-fill-color: rgba(255,255,255,.09); }
}
/* Coach: the head is a presence at the top of the conversation, not an icon */
#v-coach .core-head .core-host { width: 128px; height: 128px; margin: -10px -14px -14px -18px; }
#v-coach .core-head { gap: 6px; }

/* ── accessibility pass (15 Oct): readable "quiet" text, 44 px touch targets ── */
:root { --muted: #87919E; }                      /* quiet text that still passes 4.5:1 on the dark surfaces (was --dim, 3.2:1) */
.ms { color: var(--muted); }
.conf { color: var(--muted); }
.nt-pref.off span { color: var(--muted); }
.bell { width: 44px; height: 44px; }
.dv-meta .link, .ch .link, .qz-top .link { min-height: 44px; padding: 0 6px; display: inline-flex; align-items: center; }
details.more > summary { min-height: 44px; display: flex; align-items: center; padding: 0; }
.scale input { min-height: 44px; }
.bell { flex: none; min-width: 44px; }
.dv-meta .link, .ch .link, .qz-top .link, button.link { min-width: 44px; justify-content: center; }
#ld-roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } #ld-roles button { padding-left: 4px; padding-right: 4px; }

/* ══ Coach command center (15 Oct): squad at a glance + panels on wide screens; same order on the phone ══ */
.tm-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 1px; background: var(--line); box-shadow: inset 0 0 0 1px var(--line); }
.tm-kpi .kp { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--obsidian); }
.tm-kpi b { font: 700 24px/1 var(--num); font-variant-numeric: tabular-nums; color: var(--text); }
.tm-kpi span { font: 600 11px var(--num); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tm-kpi .kp.warn b { color: var(--amber); }
.tm-grid { display: flex; flex-direction: column; gap: var(--gap); }
.tm-blk { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tm-blk:empty, .tm-pend:has(> [hidden]:only-child) { display: none; }
#tm-counts { display: none; }                       /* the figures row replaces the one-line count */
@media (prefers-reduced-motion: no-preference) {
  .view.enter .tm-kpi .kp { animation: rise .5s var(--ease) both; }
  .view.enter .tm-kpi .kp:nth-child(2) { animation-delay: .04s; } .view.enter .tm-kpi .kp:nth-child(3) { animation-delay: .08s; }
  .view.enter .tm-kpi .kp:nth-child(4) { animation-delay: .12s; } .view.enter .tm-kpi .kp:nth-child(5) { animation-delay: .16s; }
  .view.enter .tm-kpi .kp:nth-child(6) { animation-delay: .2s; } .view.enter .tm-kpi .kp:nth-child(7) { animation-delay: .24s; }
}
@media (min-width: 1200px) {
  body:has(#v-team:not([hidden])) main, body:has(#v-teamplayer:not([hidden])) main, body:has(#v-scout:not([hidden])) main { max-width: 1240px; }
  .tm-kpi { grid-template-columns: repeat(7, 1fr); }
  .tm-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 28px;
    grid-template-areas: "squad act pend" "squad ev cmp" "squad ev ."; }
  .tm-squad { grid-area: squad; } .tm-act { grid-area: act; } .tm-pend { grid-area: pend; } .tm-ev { grid-area: ev; } .tm-cmp { grid-area: cmp; }
  .tm-grid .tm-blk { padding: 16px; box-shadow: inset 0 0 0 1px var(--line); background: rgba(17, 21, 27, .55); position: relative; }
  .tm-grid .tm-blk::before { content: ""; position: absolute; left: -1px; top: -1px; width: 10px; height: 10px; border-left: 1px solid var(--bk); border-top: 1px solid var(--bk); }
  .tm-grid .section { margin: 0; padding: 0; border: 0; }
  #tm-squad { max-height: 62vh; overflow: auto; }
  /* one player: two columns of panels */
  #v-teamplayer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap) 28px; align-items: start; }
  #v-teamplayer > :not(.card) { grid-column: 1 / -1; }
  /* scout: cards in a grid */
  #v-scout #sc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
}
#tm-squad > * { flex-shrink: 0; }

/* ── Scout: shortlist filter + side-by-side comparison (only what each player chose to share) ── */
.sc-row { display: grid; grid-template-columns: minmax(0, 1fr) 52px; gap: 6px; align-items: stretch; }
.sc-row .hrow { min-width: 0; }
.sc-pick { min-height: 44px; padding: 0; font: 700 18px var(--num); color: var(--muted); }
.sc-pick.on { color: var(--accent-ink, #0B0F06); background: var(--accent); }
.chip { min-height: 44px; padding: 0 16px; background: none; box-shadow: inset 0 0 0 1px var(--line); color: var(--silver); font: 600 13px var(--display); }
.chip.on { color: var(--text); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.sc-tools { align-items: center; gap: 12px; }
.sc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sc-table th, .sc-table td { text-align: left; padding: 9px 8px; border-top: 1px solid var(--line); vertical-align: top; }
.sc-table tr:first-child th { border-top: 0; font: 600 13px var(--display); color: var(--text); }
.sc-table th { font: 600 11px var(--num); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); width: 30%; }
.sc-table td { font-variant-numeric: tabular-nums; }
@media (min-width: 1200px) { #v-scout #sc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; } }

/* ── loading: a scan line under the header while a request is slow (never for quick ones) ── */
.top::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(var(--accent-rgb)), transparent); background-size: 40% 100%; background-repeat: no-repeat;
  transition: opacity .2s var(--ease); }
body.busy .top::before { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  body.busy .top::before { animation: busyscan 1.1s linear infinite; }
  @keyframes busyscan { from { background-position: -40% 0; } to { background-position: 140% 0; } }
}
@media (prefers-reduced-motion: reduce) { body.busy .top::before { background: rgb(var(--accent-rgb)); opacity: .6; } }

/* ══ Jarvis Glass polish (15 Oct 2026) ══════════════════════════════════════════════════════════════════════════
   Chosen by Taison from three concepts. One layer on top of the system above: holographic glass panels, a floating
   glass dock, HUD labels, glow on the key numbers, staggered entrances. Colours, fonts and mode accents unchanged.
   Delete this block to return to the previous look. */
:root { --bl: 10px; --surface: rgba(16, 22, 30, .58); --line: rgba(255, 255, 255, .07); --r: 14px;
  --glass: blur(16px) saturate(130%); --dock-h: 64px; }
body { padding-bottom: calc(var(--dock-h) + 34px + env(safe-area-inset-bottom));
  background:
    radial-gradient(70% 45% at 50% -8%, rgba(var(--accent-rgb), .16), transparent 70%),
    radial-gradient(60% 40% at 100% 100%, rgba(var(--cyan), .06), transparent 70%),
    linear-gradient(rgba(var(--accent-rgb), .028) 1px, transparent 1px) 0 0 / 100% 32px,
    linear-gradient(90deg, rgba(var(--accent-rgb), .028) 1px, transparent 1px) 0 0 / 32px 100%,
    #06080B;
  background-attachment: fixed; }

/* header: frosted, readable over anything that scrolls under it */
.top { background: rgba(6, 8, 11, .62); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); }
@media (max-width: 430px) { .who { display: none; } }          /* a clipped "Leo..." helped nobody on a phone */
#bell-n { border-radius: 8px; }

/* panels: glass with a lit top edge, brackets kept as the HUD signature */
.card, details.add, .challenge, #tm-squad, #tm-events, #a-hist, #a-scen, #j-entries {
  border-radius: var(--r);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .10), inset 0 1px 0 rgba(255, 255, 255, .06),
              0 18px 40px -18px rgba(0, 0, 0, .8);
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); }
.card.mental { box-shadow: inset 2px 0 0 var(--amber), inset 0 0 0 1px var(--line), 0 18px 40px -18px rgba(0, 0, 0, .8); }

/* type: HUD labels, headline glow */
h1 { font-weight: 700; letter-spacing: -.02em; text-shadow: 0 0 28px rgba(var(--accent-rgb), .18); }
h2 { letter-spacing: -.01em; }
.eyebrow, .label { font: 600 12px var(--num); text-transform: uppercase; letter-spacing: .16em; color: rgba(var(--accent-rgb), .88); }
.eyebrow:first-letter { text-transform: none; }
.ret .num { filter: drop-shadow(0 0 14px rgba(var(--accent-rgb), .45)); }
.ret .seg { filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), .6)); }
.stats b { text-shadow: 0 0 18px rgba(var(--accent-rgb), .25); }

/* controls */
button { border-radius: 10px; transition: background .15s, color .15s, box-shadow .2s, transform .12s var(--ease), filter .15s; }
button:active:not(:disabled) { transform: scale(.98); }
button.primary { background: linear-gradient(180deg, rgb(var(--accent-rgb)), rgba(var(--accent-rgb), .84));
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .5), 0 10px 30px -6px rgba(var(--accent-rgb), .45); }
button.primary:hover { box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .7), 0 12px 36px -4px rgba(var(--accent-rgb), .6); }
input, select, textarea { border-radius: 10px; }
input:focus, select:focus, textarea:focus { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .55), 0 0 0 4px rgba(var(--accent-rgb), .08); }

/* phone: floating glass dock instead of a flat bar */
@media (max-width: 959px) {
  .tabs { left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); padding: 4px; border-radius: 20px;
    background: rgba(14, 19, 26, .74); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .06), 0 20px 50px -10px rgba(0, 0, 0, .9); }
  .tabs button { min-height: 56px; border-radius: 16px; transition: color .2s, background .25s var(--ease); }
  .tabs button.on::before, .tabs button.on::after { display: none; }
  .tabs button.on { background: radial-gradient(70% 80% at 50% 100%, rgba(var(--accent-rgb), .24), transparent 72%), rgba(var(--accent-rgb), .06);
    text-shadow: 0 0 14px rgba(var(--accent-rgb), .7); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .22); }
  .composer { bottom: calc(var(--dock-h) + 22px + env(safe-area-inset-bottom)); }
  .chat { padding-bottom: 150px; }
  .toast { bottom: calc(var(--dock-h) + 90px + env(safe-area-inset-bottom)); border-radius: 12px; }
}
/* desktop: glass side rail */
@media (min-width: 960px) {
  .tabs { background: rgba(8, 11, 15, .72); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
  .tabs button { border-radius: 10px; }
  .tabs button.on { background: linear-gradient(90deg, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), .03)); }
  .card:is(button, a):hover, button.card:hover { transform: translateY(-2px); }
}

/* motion: content arrives in a short cascade (skipped under reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .view.enter > * { animation: glassin .5s var(--ease) both; }
  .view.enter > :nth-child(2) { animation-delay: .04s; } .view.enter > :nth-child(3) { animation-delay: .08s; }
  .view.enter > :nth-child(4) { animation-delay: .12s; } .view.enter > :nth-child(5) { animation-delay: .16s; }
  .view.enter > :nth-child(n+6) { animation-delay: .2s; }
  .view.landing.enter > * { animation: none; }
  @keyframes glassin { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
}
/* landing: chapter words stay readable as they scroll across the hologram; tags get the glass treatment */
@media (max-width: 959px) {
  .ld-ch h1, .ld-ch h2, .ld-ch p { text-shadow: 0 2px 18px rgba(6, 8, 11, .95), 0 0 3px rgba(6, 8, 11, .9); }
}
.ld-tag b { border-radius: 6px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.seg.roles { border-radius: 12px; overflow: hidden; }
a.primary { border-radius: 10px; }
@media (max-width: 959px) {
  .tabs { z-index: 6; background: rgba(12, 16, 22, .88); }
  body:has(#tabs:not([hidden]))::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; pointer-events: none;
    height: calc(var(--dock-h) + 60px + env(safe-area-inset-bottom)); background: linear-gradient(rgba(6, 8, 11, 0), rgba(6, 8, 11, .92) 55%); }
  .composer { z-index: 5; }
}

/* ══ Locker room (Coach → Team, Scout) — a club dressing room: shirts side-on along a chrome rail, the chosen one
   slides out and turns to face you; squad sheet beside it. locker.js places the shirts (CSS 3D, no 3D engine). ══ */
.locker { position: relative; display: grid; gap: 12px; --lk-c: rgb(var(--accent-rgb)); --lk-c-rgb: var(--accent-rgb); }
.locker:has(.lk-scene[data-kit="green"]) { --lk-c: #2BD37A; --lk-c-rgb: 43, 211, 122; }
.lk-scene { position: relative; height: 500px; border-radius: var(--r); overflow: hidden; overflow: clip; isolation: isolate; background: #0A0705;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 60px -30px rgba(0, 0, 0, .95); user-select: none; -webkit-user-select: none; }
.lk-wall { position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(46% 52% at 50% 34%, rgba(255, 220, 170, .22), transparent 72%),
    radial-gradient(120% 90% at 50% 40%, transparent 50%, rgba(0, 0, 0, .75) 100%),
    repeating-linear-gradient(90deg, #24160D 0 2px, #3A2515 2px 40px, #2B1A0F 40px 42px, #43301C 42px 84px),
    #2A1A0E; }
.lk-wall::after { content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .08) 0 1px, transparent 1px 7px); mix-blend-mode: multiply; }
.lk-shelf { position: absolute; left: 0; right: 0; top: 0; height: 74px; z-index: 1;
  background: linear-gradient(#0D0906, #1C130C 70%, #2A1C11); box-shadow: 0 10px 24px rgba(0, 0, 0, .6); }
.lk-shelf::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: -2px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, #FFE3B8 12%, #FFF2DC 50%, #FFE3B8 88%, transparent);
  box-shadow: 0 0 18px 4px rgba(255, 214, 160, .45), 0 18px 60px 10px rgba(255, 214, 160, .18); }
.lk-brand { position: absolute; left: 20px; top: 16px; z-index: 6; display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.lk-brand b { font: 800 italic 20px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.lk-brand span { font: 600 11px var(--num); letter-spacing: .18em; text-transform: uppercase; color: var(--lk-c); }
.lk-pills { position: absolute; right: 14px; top: 14px; z-index: 6; display: flex; gap: 6px; max-width: 62%; overflow-x: auto; scrollbar-width: none; }
.lk-pills::-webkit-scrollbar { display: none; }
.lk-pill { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 11px; border-radius: 999px;
  font: 600 11px var(--num); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .78);
  background: rgba(10, 8, 6, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.lk-pill i { font-style: normal; opacity: .6; }
.lk-pill.on { color: #04150B; background: var(--lk-c); box-shadow: 0 0 18px rgba(var(--lk-c-rgb), .45); }
.lk-pill.on i { opacity: .8; }
.lk-stage { position: absolute; left: 0; right: 0; top: 74px; bottom: 66px; z-index: 3; perspective: 1500px; perspective-origin: 50% 20%;
  cursor: grab; touch-action: pan-y; outline: none; }
.lk-stage:active { cursor: grabbing; }
.lk-stage:focus-visible { box-shadow: inset 0 0 0 2px var(--lk-c); }
.lk-rail { position: absolute; left: -2%; right: -2%; top: 26px; height: 7px; border-radius: 4px; z-index: 0;
  background: linear-gradient(#FFFFFF, #B9C1CB 35%, #6B7480 70%, #3B424B); box-shadow: 0 4px 10px rgba(0, 0, 0, .7), 0 -1px 0 rgba(255, 255, 255, .4); }
.lk-track { position: absolute; left: 50%; top: 2px; width: 0; height: 100%; transform-style: preserve-3d; }
.lk-shirt { position: absolute; top: 0; left: calc(var(--lk-shirt, 260px) / -2); width: var(--lk-shirt, 260px); min-height: 0; padding: 0;
  background: none; box-shadow: none; border-radius: 0; transform-origin: 50% 4%; transform-style: preserve-3d; will-change: transform;
  transition: none; cursor: pointer; }
.lk-shirt:hover { box-shadow: none; }
.lk-shirt:active:not(:disabled) { transform: none; }
.lk-turn { transform-style: preserve-3d; filter: brightness(calc(1 - var(--shade, 0))) saturate(calc(1 - var(--shade, 0) * .4)); }
.lk-turn.spin { animation: lkspin .52s var(--ease); }
@keyframes lkspin { 0% { transform: rotateY(0); } 49.9% { transform: rotateY(90deg); } 50% { transform: rotateY(-90deg); } 100% { transform: rotateY(0); } }
.lk-shade { display: none; }
.lk-svg { display: block; width: 100%; height: auto; overflow: visible; }
.lk-shirt.on .lk-svg { filter: drop-shadow(0 34px 30px rgba(0, 0, 0, .7)) drop-shadow(0 0 40px rgba(255, 220, 170, .12)); }
.lk-svg .lk-front { display: none; } .lk-shirt.flipped .lk-front { display: inline; } .lk-shirt.flipped .lk-back { display: none; }
.lk-name { font: 700 27px var(--num); letter-spacing: .07em; }
.lk-num { font-family: var(--num); font-weight: 700; letter-spacing: -.02em; }
.lk-crest { font: 700 10px var(--num); letter-spacing: .02em; }
.lk-chest { font: 700 24px var(--num); }
.lk-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 96px; z-index: 2; pointer-events: none;
  background: linear-gradient(rgba(255, 220, 170, .10) 0 1px, #1B120B 1px, #0B0705 70%);
  box-shadow: 0 -30px 50px -10px rgba(0, 0, 0, .6); }
.lk-floor::before { content: ""; position: absolute; left: 50%; top: 6px; width: 46%; height: 30px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(0, 0, 0, .7), transparent); }
.lk-ticker { position: absolute; left: 0; right: 0; bottom: 0; height: 28px; z-index: 6; overflow: hidden; display: flex; align-items: center;
  background: linear-gradient(90deg, rgba(var(--lk-c-rgb), .92), rgba(var(--lk-c-rgb), .75)); color: #04150B;
  font: 700 11px var(--num); letter-spacing: .22em; white-space: nowrap; box-shadow: 0 -1px 0 rgba(255, 255, 255, .25); }
.lk-tk { display: flex; width: max-content; }
.lk-tk span { padding-right: 0; }
@media (prefers-reduced-motion: no-preference) { .lk-tk { animation: lkmarq 60s linear infinite; } }
@keyframes lkmarq { to { transform: translateX(-50%); } }
.lk-hint, .lk-count { position: absolute; bottom: 38px; z-index: 6; margin: 0; font: 600 10px var(--num); letter-spacing: .2em;
  text-transform: uppercase; color: rgba(255, 255, 255, .55); pointer-events: none; }
.lk-hint { left: 20px; } .lk-count { right: 20px; color: rgba(255, 255, 255, .8); }
.lk-nav { position: absolute; top: 46%; z-index: 7; width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: 50%; font-size: 24px; line-height: 1;
  background: rgba(10, 8, 6, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.lk-nav.prev { left: 12px; } .lk-nav.next { right: 12px; }
.lk-nav:disabled { opacity: 0; pointer-events: none; }
/* squad sheet — a HUD card like a match-programme page */
.lk-sheet { display: grid; gap: 12px; padding: 18px; border-radius: var(--r); background: rgba(9, 12, 16, .82);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 50px -20px rgba(0, 0, 0, .9); }
.lk-sheet.swap { animation: glassin .42s var(--ease) both; }
.lk-sh-top { display: flex; justify-content: space-between; align-items: center; font: 600 11px var(--num); letter-spacing: .2em; text-transform: uppercase; }
.lk-sh-k { color: rgba(255, 255, 255, .7); }
.lk-sh-tag { color: var(--lk-c); padding: 4px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(var(--lk-c-rgb), .5); letter-spacing: .14em; }
.lk-sh-who { display: grid; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.lk-sh-role { margin: 0; font: 600 11px var(--num); letter-spacing: .22em; color: var(--lk-c); }
.lk-sh-line { display: flex; align-items: center; gap: 12px; }
.lk-sh-n { font: 700 46px/1 var(--num); color: #fff; min-width: 52px; text-shadow: 0 0 24px rgba(var(--lk-c-rgb), .45); }
.lk-sh-name { display: flex; flex-direction: column; gap: 4px; font: 700 22px/1.1 var(--display); letter-spacing: -.01em; }
.lk-sh-name .onapp { align-self: flex-start; }
.lk-sh-dl { display: grid; grid-template-columns: auto 1fr; margin: 0; }
.lk-sh-dl dt, .lk-sh-dl dd { padding: 5px 0; border-bottom: 1px dashed rgba(255, 255, 255, .08); }
.lk-sh-dl dt { font: 600 11px var(--num); letter-spacing: .18em; color: rgba(255, 255, 255, .55); padding-top: 9px; }
.lk-sh-dl dd { margin: 0; text-align: right; font-size: 15px; }
.lk-sh-dl dd small { display: block; color: var(--silver); font-size: 12px; margin-top: 3px; }
.lk-fig { display: grid; gap: 8px; padding: 12px; border-radius: 10px; background: rgba(var(--lk-c-rgb), .05); box-shadow: inset 0 0 0 1px rgba(var(--lk-c-rgb), .16); }
.lk-fig-h { margin: 0 0 2px; font: 600 10px var(--num); letter-spacing: .18em; color: var(--lk-c); }
.lk-bar { display: grid; grid-template-columns: 62px 1fr auto; gap: 10px; align-items: center; font: 600 10px var(--num); letter-spacing: .14em; color: rgba(255, 255, 255, .6); }
.lk-bar i { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.lk-bar b { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, rgba(var(--lk-c-rgb), .6), var(--lk-c)); box-shadow: 0 0 10px rgba(var(--lk-c-rgb), .5); }
.lk-bar em { font-style: normal; color: #fff; font-size: 11px; letter-spacing: .06em; }
.lk-fig-row { display: flex; gap: 8px; margin-top: 2px; }
.lk-st { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 8px; background: rgba(0, 0, 0, .25); }
.lk-st b { font: 700 22px/1 var(--num); color: #fff; }
.lk-st span { font: 600 10px var(--num); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.lk-src { margin: 0; font: 600 10px var(--num); letter-spacing: .14em; color: rgba(255, 255, 255, .6); }
.lk-open { width: 100%; }
@media (max-width: 699px) { .lk-pills { top: 56px; left: 14px; right: 14px; max-width: none; } .lk-stage { top: 104px; } .lk-hint { display: none; } .lk-scene { height: 520px; } .lk-scene.gl { height: 470px; } }
@media (min-width: 1100px) {
  .lk-scene { height: 680px; }
  .lk-sheet { position: absolute; right: 18px; top: 66px; width: 320px; max-height: calc(680px - 110px); overflow: auto; z-index: 20; }
  .lk-track { left: calc((100% - 340px) / 2); }
  .lk-nav.next { right: 356px; }
  .lk-count { right: 356px; }
  .locker { gap: 0; }
}
.locker:has(.lk-scene[data-kit="green"]) .lk-open { background: linear-gradient(180deg, #34DB82, #1FA35A); color: #04150B;
  box-shadow: 0 0 0 1px rgba(43, 211, 122, .5), 0 10px 30px -6px rgba(43, 211, 122, .45); }
.lk-stage:focus-visible { box-shadow: inset 0 0 0 2px rgba(var(--lk-c-rgb), .6); }
/* real-3D room (locker3d.js): the canvas draws wall, shelf, rail, floor and shirts; DOM shirts stay for screen readers */
.lk-scene.gl .lk-wall, .lk-scene.gl .lk-shelf, .lk-scene.gl .lk-floor, .lk-scene.gl .lk-rail { display: none; }
.lk-scene.gl .lk-stage { top: 0; bottom: 28px; }
.lk-scene.gl .lk-track { opacity: 0; pointer-events: none; }
.lk-gl { position: absolute; inset: 0; display: block; width: 100%; height: 100%; animation: fade .6s var(--ease) both; }

.lk-scene.gl::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 120px; z-index: 5; pointer-events: none;
  background: linear-gradient(rgba(10, 7, 5, .92), rgba(10, 7, 5, .55) 60%, transparent); }

/* ══ fx.js — Vanta net behind the Arena header · React Bits "Shiny Text" ══ */
#v-arena { position: relative; }
#v-arena > :not(.ar-vanta) { position: relative; z-index: 1; }
.ar-vanta { position: absolute; left: -20px; right: -20px; top: -14px; height: 320px; z-index: 0; pointer-events: none; opacity: 0;
  transition: opacity .9s var(--ease); -webkit-mask-image: linear-gradient(#000 45%, transparent); mask-image: linear-gradient(#000 45%, transparent); }
.ar-vanta.on { opacity: .6; }
.ar-vanta canvas { pointer-events: none; }
@media (min-width: 960px) { .ar-vanta { left: -40px; right: -40px; } }
.shiny { background: linear-gradient(110deg, var(--text) 38%, #fff 48%, rgb(var(--accent-rgb)) 52%, var(--text) 62%) 0 0 / 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  text-shadow: none; filter: drop-shadow(0 0 22px rgba(var(--accent-rgb), .22)); }
@media (prefers-reduced-motion: no-preference) { .shiny { animation: shine 5s linear infinite; } }
@keyframes shine { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.lk-brand b { background: linear-gradient(110deg, #fff 40%, #c9ffe0 50%, #fff 60%) 0 0 / 260% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; }
@media (prefers-reduced-motion: no-preference) { .lk-brand b { animation: shine 6s linear infinite; } }
.lk-credit { position: absolute; right: 20px; bottom: 52px; z-index: 6; margin: 0; font: 500 10px var(--read); color: rgba(255, 255, 255, .6); pointer-events: none; }
@media (min-width: 1100px) { .lk-credit { right: 356px; bottom: 54px; } }
@media (max-width: 699px) { .lk-credit { left: 14px; right: auto; bottom: 34px; } }
.lk-brand.has-crest { padding-left: 50px; min-height: 44px; justify-content: center; }
.lk-crest-img { position: absolute; left: 0; top: -2px; width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6)); }

/* ══ Pro pass (15 Oct) — every screen to the locker-room standard ══════════════════════════════════════════ */
/* Coach chat: a real conversation surface, never an empty box */
#v-coach.fresh .core-head { flex-direction: column; text-align: center; padding: 18px 0 4px; }
#v-coach.fresh .core-head .core-host { width: 150px; height: 150px; }
#v-coach.fresh .core-id { align-items: center; }
.msg { border-radius: 18px; font-size: 16px; }
.msg.mentra { border-bottom-left-radius: 6px; background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .025));
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .14), 0 10px 24px -14px rgba(0, 0, 0, .8); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); }
.msg.me { border-bottom-right-radius: 6px; background: linear-gradient(180deg, rgba(var(--accent-rgb), .26), rgba(var(--accent-rgb), .16));
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .35); }
.msg .rate button { min-height: 32px; width: 36px; padding: 0; border-radius: 10px; display: inline-grid; place-items: center; color: var(--silver); background: rgba(255, 255, 255, .04); }
.msg .rate button.down svg { transform: rotate(180deg); }
.msg .rate button:hover { color: var(--accent); }
.starters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.starter { min-height: 52px; padding: 10px 14px; border-radius: 14px; text-align: left; font: 500 14px/1.3 var(--display); color: var(--text);
  background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .18); }
.starter:hover { background: rgba(var(--accent-rgb), .08); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .45); }
.composer { border-radius: 18px; }
.composer input { border-radius: 14px; }

/* Journal: a timeline — date tile, focus, meters, labelled lines */
.je { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: start; padding: 16px 18px; }
.je-date { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 0; border-radius: 12px;
  background: rgba(var(--accent-rgb), .07); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .2); }
.je-date b { font: 700 22px/1 var(--num); color: var(--text); }
.je-date span { font: 600 10px var(--num); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.je-date i { font: 500 10px var(--num); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--silver); }
.je-main { display: grid; gap: 8px; min-width: 0; }
.je-focus { margin: 0; font: 600 16px/1.3 var(--display); }
.je-meters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.je-meter { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; font: 600 10px var(--num); letter-spacing: .1em; text-transform: uppercase; color: var(--silver); }
.je-meter i { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.je-meter b { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, rgba(var(--accent-rgb), .55), var(--accent)); }
.je-meter em { font-style: normal; color: var(--text); letter-spacing: .04em; }
.je-line { margin: 0; display: grid; grid-template-columns: 74px 1fr; gap: 10px; font-size: 15px; line-height: 1.4; }
.je-k { font: 600 10px/1.9 var(--num); letter-spacing: .12em; text-transform: uppercase; }
.je-line.good .je-k { color: rgb(var(--lime)); } .je-line.hard .je-k { color: var(--amber); } .je-line.next .je-k { color: rgb(var(--cyan)); }

/* Plans: proper pricing cards */
.plans { display: grid; gap: 12px; }
@media (min-width: 960px) { .plans { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
.card.plan { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.plan-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.plan-badge { font: 600 10px var(--num); letter-spacing: .16em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px;
  color: var(--accent-ink); background: var(--accent); }
.plan-badge.alt { color: var(--accent); background: transparent; box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .55); }
.plan-price { margin: 0; display: flex; align-items: baseline; gap: 4px; }
.plan-price b { font: 700 34px/1 var(--num); letter-spacing: -.01em; }
.plan-price span { color: var(--silver); font-size: 14px; }
.plan-inc { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: 14px; color: var(--silver); }
.plan-inc li { display: grid; grid-template-columns: 18px 1fr; gap: 6px; }
.plan-inc li::before { content: ""; width: 14px; height: 14px; margin-top: 2px; border-radius: 50%;
  background: radial-gradient(circle, var(--accent) 0 3px, transparent 3.5px), rgba(var(--accent-rgb), .14); }
.plan-go { display: grid; place-items: center; min-height: 48px; margin-top: auto; border-radius: 12px; text-decoration: none; font-weight: 700;
  color: var(--accent-ink); background: linear-gradient(180deg, rgb(var(--accent-rgb)), rgba(var(--accent-rgb), .84)); }
.card.plan.current { box-shadow: inset 0 0 0 1.5px rgba(var(--accent-rgb), .6), 0 0 40px -10px rgba(var(--accent-rgb), .35), 0 18px 40px -18px rgba(0, 0, 0, .8); }
.card.plan.tier-elite:not(.current) { background: linear-gradient(160deg, rgba(var(--violet), .14), rgba(16, 22, 30, .6) 55%) !important; }

/* Milestones: achievement tiles with progress */
.ms { gap: 6px; padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, .025); }
.ms-bar { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.ms-bar b { display: block; height: 100%; background: rgba(var(--accent-rgb), .7); }
.ms.earned { background: linear-gradient(160deg, rgba(var(--accent-rgb), .14), rgba(var(--accent-rgb), .03)); }
.ms.earned .ms-bar b { background: var(--accent); box-shadow: 0 0 8px rgba(var(--accent-rgb), .7); }

/* Squad list: shirt-number tile */
.hrow.sq-row { display: grid; grid-template-columns: 44px 44px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: center; }
.sq-row .sq-num { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; font: 700 18px var(--num); font-style: normal;
  color: var(--text); background: linear-gradient(160deg, rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), .06)); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .28); }
.team-headshot, .tp-headshot { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: rgba(var(--accent-rgb), .12);
  box-shadow: 0 0 20px rgba(var(--accent-rgb), .15); }
.team-headshot { grid-row: span 2; }
.team-headshot.fallback { display: grid; place-items: center; color: var(--silver); font: 700 13px var(--num); font-style: normal; }
.sq-info { min-width: 0; display: grid; gap: 2px; }
.tp-headshot { width: 64px; height: 64px; box-shadow: 0 0 24px rgba(var(--accent-rgb), .22); }
.tp-hero.has-headshot { grid-template-columns: 64px 74px minmax(0, 1fr); }

/* Today: mission as numbered steps */
.blocks { counter-reset: step; }
.blocks li { grid-template-columns: 28px 58px 1fr; }
.blocks li::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px;
  font: 700 12px var(--num); color: var(--accent-ink); background: var(--accent); align-self: center; }

/* Notifications: unread dot + calmer cards */
.nt-item { border-radius: 14px; position: relative; padding-right: 30px; }
.nt-item.unread::after { content: ""; position: absolute; right: 14px; top: 18px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), .8); }
.nt-cat { font: 600 10px var(--num); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }

/* Settings buttons in cards: tidy list rhythm */
.card > button:not(.primary):not(.link):not(.danger), .card > .row > button:not(.primary):not(.link) { border-radius: 12px; }
button.danger { border-radius: 12px; }
/* Matches: date tile + result chip */
.hrow.ev-row { display: grid; grid-template-columns: 44px 1fr auto; column-gap: 14px; row-gap: 2px; align-items: center; padding-right: 40px; }
.ev-row .ev-date { grid-row: span 2; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px;
  font-style: normal; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--line); }
.ev-date b { font: 700 16px/1 var(--num); } .ev-date span { font: 600 10px var(--num); letter-spacing: .14em; text-transform: uppercase; color: var(--silver); }
.ev-row > span { grid-column: 2; } .ev-row > span:first-of-type { font: 600 16px var(--display); }
.ev-res { grid-column: 3; grid-row: 1 / span 2; min-width: 52px; padding: 6px 8px; border-radius: 10px; text-align: center; font: 700 14px var(--num); }
.ev-res.w { color: #04150B; background: rgb(var(--lime)); } .ev-res.d { color: var(--text); background: rgba(255, 255, 255, .1); }
.ev-res.l { color: #2B0805; background: var(--red); } .ev-res.next { color: var(--accent); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .5); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.ev-row.upcoming .ev-date { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .45); }
.sq-row .sq-num { font-size: 15px; }
/* Arena hero: the player's shirt in a floodlit stadium (locker3d.js → Locker3D.arena) */
.ar-stage { position: relative; height: 380px; margin: 0 calc(-1 * var(--pad-x, 20px)); overflow: hidden; overflow: clip; background: #05040a;
  -webkit-mask-image: linear-gradient(transparent, #000 8%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 8%, #000 88%, transparent); }
.ar-gl { position: absolute; inset: 0; display: block; cursor: grab; touch-action: pan-y; animation: fade .8s var(--ease) both; }
.ar-tag { position: absolute; left: 20px; top: 26px; z-index: 2; display: flex; flex-direction: column; gap: 2px; pointer-events: none; }
.ar-tag span { font: 600 10px var(--num); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.ar-tag b { font: 700 italic 22px var(--display); letter-spacing: .04em; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .8); }
.ar-stage .lk-credit { left: auto; right: 16px; top: 30px; bottom: auto; max-width: 46%; text-align: right; opacity: .6; }
.ar-stage:not([hidden]) ~ .stats { margin-top: -6px; }
@media (min-width: 960px) { .ar-stage { height: 460px; margin: 0; border-radius: var(--r); -webkit-mask-image: none; mask-image: none; box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .18); } }

/* coach · player report hero */
.tp-hero { display: grid; grid-template-columns: 74px 1fr; gap: 14px; align-items: center; margin: 14px 0 18px; }
.tp-shirt { position: relative; width: 74px; height: 84px; border-radius: 14px; display: grid; place-content: center; text-align: center;
  background: linear-gradient(160deg, rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), .04)); 
  box-shadow: 0 10px 30px rgba(var(--accent-rgb), .18); }
.tp-shirt b { font: 700 34px/1 var(--display); color: var(--text); font-variant-numeric: tabular-nums; }
.tp-shirt span { font: 600 11px var(--display); letter-spacing: .14em; color: var(--accent); margin-top: 4px; }
.tp-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.tp-kp { padding: 9px 11px; border-radius: 12px; background: rgba(255,255,255,.045); }
.tp-kp b { display: block; font: 700 20px/1.1 var(--display); color: var(--text); font-variant-numeric: tabular-nums; }
.tp-kp span { display: block; font-family: inherit; font-weight: 400; font-size: 12px; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--silver); }
.tp-kp.src { background: rgba(var(--accent-rgb), .07); }
.tp-src { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--silver); }

/* coach · match scoreboard */
.te-board { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 12px 0 18px; padding: 18px 14px 14px;
  border-radius: var(--r);
  background: radial-gradient(120% 90% at 50% 0%, rgba(var(--accent-rgb), .16), transparent 70%), rgba(255,255,255,.025); }
.tb-side { display: grid; justify-items: center; gap: 8px; text-align: center; min-width: 0; }
.tb-side img, .tb-init { width: 52px; height: 52px; object-fit: contain; }
.tb-init { display: grid; place-content: center; border-radius: 50%; font: 700 16px var(--display); color: var(--silver);
  background: rgba(255,255,255,.04); }
.tb-side b { font-size: 14px; font-weight: 600; color: var(--silver); line-height: 1.25; overflow-wrap: anywhere; }
.tb-side.mine b { color: var(--text); }
.tb-mid { display: grid; justify-items: center; gap: 8px; }
.tb-mid strong { font: 700 38px/1 var(--display); color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap; }
.tb-meta { grid-column: 1 / -1; margin: 6px 0 0; text-align: center; font-size: 12px; color: var(--silver); }
.tb-mid .ev-res { grid-column: auto; grid-row: auto; font-size: 12px; letter-spacing: .06em; }

/* Arena: scenario + session rows with a role tile and a score chip */
.scen.sc-tile { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; row-gap: 3px; align-items: start; padding-right: 40px; }
.scen.sc-tile > :not(.sq-num) { grid-column: 2; }
.scen.sc-tile .sq-num { grid-row: 1 / span 4; align-self: center; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  font: 700 15px var(--num); font-style: normal; color: var(--text);
  background: linear-gradient(160deg, rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), .06)); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .28); }
.scen.sc-tile.suggested .sq-num { background: linear-gradient(160deg, rgba(var(--accent-rgb), .55), rgba(var(--accent-rgb), .18)); }
.ar-hist .sq-num { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; font: 700 15px var(--num); font-style: normal;
  color: var(--text); background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--line); }
.ar-hist > span:not(.ev-res) { grid-column: 2; min-width: 0; }

/* ── My locker (mylocker.js): his shirt first on his club's rail, the shelf underneath ── */
.ml-head { display: grid; gap: 8px; }
.ml-head h1 { font: 700 clamp(30px, 7vw, 46px)/1.04 var(--display); letter-spacing: -.02em; }
.ml-head .muted { margin: 0; font: 600 13px var(--num); letter-spacing: .12em; text-transform: uppercase; }
.ml-confirm p { margin: 0; font: 600 16px var(--display); }
.ml-photo { max-width: 760px; margin: 22px auto; background: radial-gradient(100% 100% at 0 0, rgba(var(--accent-rgb), .10), transparent 70%), var(--surface); }
.ml-photo h2 { margin: 0 0 6px; font: 650 21px var(--display); }
.ml-photo-row { display: flex; align-items: center; gap: 16px; }
.ml-photo-row > img { width: 88px; height: 88px; object-fit: cover; border-radius: 50%; background: rgba(255,255,255,.06); box-shadow: 0 0 28px rgba(var(--accent-rgb), .25); }
.ml-share-choice { padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.035); }
.ml-shelf { display: grid; gap: 10px; }
.ml-shelf .next-row { margin: 0; }
@media (min-width: 960px) {
  body:has(#v-locker:not([hidden])) main { max-width: 1240px; }
  .ml-shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ml-shelf .next-row { min-height: 96px; align-content: center; }
}

/* ══ Full-screen shell (15 Oct): every screen gets the whole window. No side rail, no dock, no frames or outlines —
   navigation, settings and sign-out live behind the three-line menu. Separation comes from light and fill, not lines. ══ */
:root { --pad-x: clamp(16px, 4vw, 56px); --top-h: 68px; }
body { padding: env(safe-area-inset-top) 0 calc(28px + env(safe-area-inset-bottom)); }
body:has(#tabs:not([hidden]))::after { display: none; }
body main, body:has(.view) main { max-width: none !important; margin: 0; padding: 12px var(--pad-x) 40px; }
.top { min-height: var(--top-h); padding: 12px var(--pad-x); justify-content: flex-start; gap: 14px;
  background: rgba(6, 8, 11, .55); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); }
.top::after { display: none; }
.top .sys { margin-left: auto; }
.menu-btn { width: 44px; height: 44px; min-height: 0; padding: 0; display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  background: none; box-shadow: none; border-radius: 12px; }
body:has(#tabs:not([hidden])) .menu-btn { display: inline-flex; }
.menu-btn i { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--text); transition: transform .3s var(--ease), opacity .2s; }
.menu-btn:hover { background: rgba(255, 255, 255, .06); box-shadow: none; }
body.menu-open .top { z-index: 32; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.menu-open .menu-btn i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .menu-btn i:nth-child(2) { opacity: 0; }
body.menu-open .menu-btn i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* the drawer (it is the old #tabs, so show()/coachTabs()/scoutTabs() keep working unchanged) */
#tabs.tabs { position: fixed; top: 0; bottom: 0; left: 0; right: auto; width: min(320px, 86vw); z-index: 31; margin: 0;
  display: flex; flex-direction: column; gap: 4px; padding: calc(var(--top-h) + 20px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
  border-radius: 0; background: rgba(8, 11, 15, .97);
  box-shadow: 40px 0 90px -30px rgba(0, 0, 0, .9); transform: translateX(-104%); visibility: hidden;
  transition: transform .34s var(--ease), visibility 0s linear .34s; }
body.menu-open #tabs.tabs { transform: none; visibility: visible; transition: transform .34s var(--ease); }
#tabs.tabs button { flex: none; text-align: left; min-height: 52px; padding: 0 18px; border-radius: 12px; font: 500 17px var(--display);
  letter-spacing: .01em; color: var(--silver); background: none; box-shadow: none; text-shadow: none; }
#tabs.tabs button:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
#tabs.tabs button.on { color: var(--text); background: linear-gradient(90deg, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), .02)); box-shadow: none; }
#tabs.tabs button.on::before, #tabs.tabs button.on::after { display: none; }
#tabs .menu-sep { flex: 1; }
#tabs.tabs .menu-out { color: var(--silver); font-size: 15px; }
#menu-scrim { position: fixed; inset: 0; z-index: 30; background: rgba(4, 5, 7, .62); display: none; }
body.menu-open #menu-scrim { display: block; }               /* no blur layer at all while closed: it would cost every frame */
@media (prefers-reduced-motion: reduce) { #tabs.tabs, body.menu-open #tabs.tabs, #menu-scrim, .menu-btn i { transition: none; } }

/* no outlines: panels, rows, buttons and fields separate by fill and light */
.card, details.add, .challenge, #tm-squad, #tm-events, #a-hist, #a-scen, #j-entries, .card.mental {
  background-image: none; box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .85); }
.next-row { background: rgba(255, 255, 255, .035); box-shadow: none; border-radius: 14px; }
.next-row:hover { background: rgba(255, 255, 255, .06); }
button:not(.primary), button:not(.primary):hover, .chip, .seg, .seg button { box-shadow: none; }
input, select, textarea { box-shadow: none; background: rgba(255, 255, 255, .05); }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .45); }
:focus-visible { outline: 2px solid rgba(var(--accent-rgb), .8); outline-offset: 2px; }
#tabs.tabs button:focus-visible { outline-offset: -2px; }

/* composer and toast: the full width, nothing reserved for a rail or a dock */
.composer, body .composer { left: 0; right: 0; max-width: none; bottom: 0; padding: 12px var(--pad-x) calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(rgba(6, 8, 11, 0), rgba(6, 8, 11, .92) 40%); }
.chat, body .chat { padding-bottom: 110px; }
.toast, body .toast { left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); }

/* locker rooms fill the window edge to edge (My locker, Coach → Team, Scout) */
.locker { margin-left: calc(-1 * var(--pad-x)); margin-right: calc(-1 * var(--pad-x)); }
.locker .lk-scene, .locker .lk-scene.gl { border-radius: 0; box-shadow: none; height: calc(100dvh - var(--top-h) - env(safe-area-inset-top)); min-height: 460px; }
#v-locker { margin-top: -12px; gap: 18px; }
#v-locker .ml-head { display: none; }                  /* the room's own crest and the squad sheet already say who and where */
#v-locker .ml-confirm { position: fixed; z-index: 20; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(560px, calc(100vw - 32px)); background: rgba(10, 13, 18, .9); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .95); }
/* no edge lines either: decoration goes; where the line carried meaning (unread, good/bad, achieved) a soft tint carries it */
#t-dev, #j-dev, .plan-row, .card.mental, .msg.mentra, .comeback, .coach-next, .coach-board, .coachnote, .scen.suggested,
.hrow:hover, .scen:hover, .outcome, .obj.achieved, .nt-item.unread { box-shadow: none; }
blockquote.mental { border-left: 0; padding-left: 0; }
.msg.mentra { background: rgba(255, 255, 255, .05); }
.outcome.good, .obj.achieved { background: rgba(185, 255, 113, .07); }
.outcome.bad { background: rgba(255, 106, 95, .08); }
.nt-item.unread { background: rgba(var(--accent-rgb), .08); }
.scen.suggested, .plan-row, #t-dev, #j-dev { background: rgba(var(--accent-rgb), .06); }

/* ══ Player space (space.js) · pitch (pitch.js) · tagger (tagger.js) · team leaders ══ */
.sp-tabs { display: flex; overflow-x: auto; scrollbar-width: none; border-radius: 12px; }
.sp-tabs button { flex: 1 0 auto; white-space: nowrap; }
.sp-panel { display: flex; flex-direction: column; gap: 14px; }
.sp-ctl { gap: 12px; align-items: center; }
.sp-ctl select { width: auto; min-width: 200px; }
.sp-ctl label.check { display: inline-flex; flex: none; width: auto; justify-content: flex-start; align-items: center; gap: 8px; white-space: nowrap; margin: 0; }
.sp-ctl label.check { flex-direction: row; }
.sp-ctl label.check input { margin: 0; width: 20px; height: 20px; min-height: 0; flex: none; padding: 0; }
.sp-pitch, .tg-field { width: 100%; }
.pitch-svg { display: block; width: 100%; height: auto; max-height: calc(100dvh - 330px); min-height: 220px; border-radius: 14px; }
.p-turf { fill: #0B1A10; } .p-stripe { fill: #0E2214; } .p-stripe.b { fill: #0C1E12; }
.p-lines * { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: .3; }
.p-lines .p-dot { fill: rgba(255, 255, 255, .7); stroke: none; }
.p-lines .p-goal { fill: rgba(255, 255, 255, .25); }
.p-dir { fill: rgba(255, 255, 255, .45); font: 600 2.1px var(--num); letter-spacing: .3px; }
.p-heat rect { fill: rgba(var(--accent-rgb), var(--a)); }
.p-heat.target rect { fill: rgba(var(--cyan), var(--a)); }
.p-n { fill: #fff; font: 600 2.6px var(--num); paint-order: stroke; stroke: rgba(0, 0, 0, .55); stroke-width: .5px; }
.p-n.s { font-size: 1.9px; fill: rgba(255, 255, 255, .8); }
.p-zones .z-hot { fill: rgba(43, 211, 122, .55); } .p-zones .z-cold { fill: rgba(96, 150, 255, .5); }
.p-zones .z-even { fill: rgba(255, 255, 255, .12); } .p-zones .z-few { fill: rgba(255, 255, 255, .05); }
.p-pass line { stroke-width: .35; } .p-pass line.ok { stroke: rgba(255, 255, 255, .85); } .p-pass line.f { stroke: rgba(255, 106, 95, .85); stroke-dasharray: .8 .6; }
.p-pass circle.ok { fill: #fff; } .p-pass circle.f { fill: var(--red); }
.p-arrow { fill: rgba(255, 255, 255, .85); } .p-arrow.f { fill: rgba(255, 106, 95, .85); }
.p-pts circle { fill: rgba(255, 255, 255, .9); stroke: rgba(0, 0, 0, .5); stroke-width: .25; }
.p-pts .shot { fill: var(--amber); } .p-pts .shot.fail { fill: rgba(255, 182, 72, .35); }
.p-tap { fill: rgba(var(--accent-rgb), .9); } .p-tap.f { fill: var(--red); } .p-tap.start { fill: #fff; }
.p-tapline { stroke: rgba(var(--accent-rgb), .95); stroke-width: .5; }
.sp-sum { margin: 0; font: 600 15px var(--display); }
.prov { font: 600 11px/1 var(--num); letter-spacing: .1em; text-transform: uppercase; font-style: normal; padding: 4px 7px; border-radius: 6px;
  background: rgba(255, 255, 255, .07); color: var(--silver); vertical-align: middle; }
.prov-measured { color: rgb(var(--cyan)); background: rgba(var(--cyan), .12); }
.prov-coach { color: rgb(var(--lime)); background: rgba(var(--lime), .1); }
.prov-recorder, .prov-self { color: var(--amber); background: rgba(255, 182, 72, .1); }
.prov.pend::after { content: " · ?"; }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sp-st { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.sp-st b { font: 700 26px var(--num); } .sp-st span { color: var(--silver); font-size: 13px; text-transform: capitalize; }
.sp-pv { margin: 4px 0 0; display: flex; gap: 4px; flex-wrap: wrap; }
.sp-goal { margin: 0; font: 600 16px var(--display); }
.sp-ms { display: flex; flex-wrap: wrap; gap: 8px; } .sp-m { padding: 6px 10px; border-radius: 10px; background: rgba(255, 206, 120, .12); color: #FFCE78; font: 600 13px var(--display); }
/* tagger */
.tagger { display: flex; flex-direction: column; gap: 12px; }
.tg-players { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.tg-p { flex: none; display: grid; justify-items: center; gap: 2px; min-width: 64px; min-height: 60px; padding: 8px 10px; border-radius: 12px; }
.tg-p b { font: 700 20px var(--num); } .tg-p span { font-size: 11px; color: var(--silver); max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-p.on, .tg-k.on { background: rgba(var(--accent-rgb), .2); color: var(--text); }
.tg-kinds { display: flex; flex-wrap: wrap; gap: 8px; } .tg-k { min-height: 44px; border-radius: 10px; padding: 0 14px; }
.tg-out button.on { background: rgba(var(--accent-rgb), .2); }
.tg-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.tg-min { display: grid; gap: 4px; } .tg-min input { width: 90px; }
#tabs ~ main .tg-bar .ghost.on, .tg-bar .ghost.on { background: rgba(var(--accent-rgb), .18); }
.tg-hint { margin: 0; font: 600 15px var(--display); color: var(--accent); min-height: 1.4em; }
.tg-field .pitch-svg { cursor: crosshair; touch-action: manipulation; }
.tg-last { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.tg-last li { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; border-radius: 10px; background: rgba(255, 255, 255, .04); font-size: 14px; }
.tg-last .link { min-height: 32px; }
/* team leaders + data desk */
.tm-leaders { display: grid; gap: 10px; }
.tl-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.tl-card { display: grid; gap: 6px; align-content: start; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .04); }
.tl-k { margin: 0; font: 600 12px var(--num); letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--accent-rgb), .9); }
.tl-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; align-items: center; min-height: 40px; padding: 0 10px; border-radius: 10px; text-align: left; background: none; }
.tl-row i { font: 600 13px var(--num); font-style: normal; color: var(--silver); } .tl-row b { font: 700 18px var(--num); }
.tl-row.first { background: rgba(var(--accent-rgb), .1); } .tl-row.first b { color: var(--accent); }
.tl-src { margin: 2px 0 0; font-size: 12px; color: var(--dim); }
.tm-data-act { gap: 10px; } .tm-queue { margin-top: 6px; } .tm-q { display: grid; gap: 4px; padding: 10px 0; }
.tm-q-who { margin: 0; font: 600 15px var(--display); } .tm-q-what { margin: 0; color: var(--silver); font-size: 14px; }
.tm-q-btns { gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.rec-page main { padding-bottom: 60px; }
/* player: my match log */
.mm-card { gap: 6px; }
.mm-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; border-radius: 12px; text-align: left; background: rgba(255, 255, 255, .04); }
.mm-when { display: grid; gap: 2px; } .mm-when b { font: 600 15px var(--display); } .mm-when span { font-size: 13px; color: var(--silver); }
.mm-st { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; font-size: 12px; } .mm-st i { font-style: normal; }
.mm-b { padding: 3px 8px; border-radius: 8px; background: rgba(255, 255, 255, .06); }
.mm-b.pend { background: rgba(255, 206, 120, .14); color: #FFCE78; } .mm-b.ok { background: rgba(var(--accent-rgb), .16); color: var(--text); }
.mm-b.no { color: var(--dim); }
#b-mymatch { justify-self: start; min-height: 44px; }

/* ══ Calm layer (15 Oct, from the taste + redesign skills): less to read, clearer groups, one accent.
   No tiny tracked uppercase labels (sentence case at a readable size), no glows or gradient buttons, no
   per-row tags that repeat the title, one-line subtitles, KPI tiles as tone steps instead of a lined grid. ══ */
.eyebrow, .label, .core-cap, .qz-n, .lk-sh-k, .tl-k, .plan-badge, .prov, .ld-eye, .ld-k, .tm-kpi span, .stats span, .sp-st span {
  text-transform: none; letter-spacing: 0; }
.eyebrow { margin: 0 0 -10px; font: 500 15px var(--display); color: var(--silver); }
.label { margin: 0 0 12px; font: 600 17px var(--display); color: var(--text); }
.card > .label:first-child { margin-top: 0; }
.core-cap { font: 500 13px var(--display); }
.prov { font: 600 12px/1 var(--display); }
.plan-badge { font: 600 12px var(--display); }
.tl-k { font: 600 14px var(--display); color: var(--silver); }
/* rows: the title says what it is — no extra tag, one line of detail */
.next-row { grid-template-columns: 1fr; padding: 16px 44px 16px 18px; }
.next-row .nr-k { display: none; }
.next-row .meta { grid-column: 1; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.next-row.core-row { grid-template-columns: 44px 1fr; } .next-row.core-row .meta { grid-column: 2; }
.next-row::after { color: var(--silver); }
/* no glows, no gradients on controls */
h1, .stats b, .lr-mid b { text-shadow: none; }
.ret .num, .ret .seg { filter: none; }
.dot { box-shadow: none; }
button.primary, a.primary, button.primary:hover { background: var(--accent); box-shadow: none; }
button.primary:hover, a.primary:hover { filter: brightness(1.06); }
/* numbers as tiles: a step in tone, no lines */
.tm-kpi { gap: 10px; background: none; box-shadow: none; }
.tm-kpi .kp { background: rgba(255, 255, 255, .04); border-radius: 12px; }
.tm-kpi span { font: 500 13px var(--display); color: var(--silver); }
/* long lists: a few on show, the rest one tap away */
#dv-ms:not(.all) .ms-more { display: none; }
.ms-all { grid-column: 1 / -1; justify-self: start; }
.plan-inc.short li:nth-child(n+4) { display: none; }
.plan-more { justify-self: start; padding: 0; min-height: 36px; }
/* scenario list: title + level, the objective on hover and when opened */
.sc-tile .meta { margin-top: 2px; }
/* source tags + confidence: sentence case, tinted fill instead of an outline, quieter */
.src { font: 600 12px/1 var(--display); letter-spacing: 0; text-transform: none; padding: 5px 8px; border-radius: 6px; box-shadow: none; }
.src.measured { background: rgba(var(--cyan), .12); } .src.coach { background: rgba(var(--lime), .1); } .src.self { background: rgba(255, 255, 255, .07); }
.src.camera, .src.simulated { background: rgba(255, 182, 72, .1); } .src.ai { background: rgba(var(--violet), .12); }
.conf { font: 500 13px var(--display); letter-spacing: 0; text-transform: none; }
.live-entry .le-k { font: 600 13px var(--display); letter-spacing: 0; text-transform: none; }
/* desktop: immersive screens stay edge to edge; reading screens get one centred column, cards in two columns */
@media (min-width: 960px) {
  :is(#v-today, #v-develop, #v-journal, #v-plan, #v-arena, #v-teamevent, #v-teamsession, #v-notifs, #v-mymatch, #v-review,
      #v-consent, #v-onboard, #v-quiz, #v-firstplan, #v-paywall, #v-firstdrill, #v-promise, #v-scout, #v-scoutplayer, #v-live,
      #v-replays, #v-arenarecap) { max-width: 1180px; margin-left: auto; margin-right: auto; }
  #v-coach { max-width: 860px; margin-left: auto; margin-right: auto; }
  .view > .seg, .view > .row > .seg { max-width: 560px; }
  .view > button.primary, .view > a.primary, .view .stack > button.primary, .view form > button.primary { align-self: flex-start; min-width: 260px; }
  .dk-cols { columns: 2 420px; column-gap: 20px; }
  .dk-cols > * { break-inside: avoid; margin-bottom: 20px; display: flex; }
  .dk-cols > .card { display: flex; flex-direction: column; }
  .dk-cols > [hidden] { display: none; }
}

/* ── scout contact + opportunities (contact.js, 16 Oct 2026) ── */
.ct-links { gap: 8px; flex-wrap: nowrap; }
.ct-links > button { flex: 1 1 0; min-width: 0; min-height: 44px; }
.ct-n { font: 600 11px var(--num); font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px;
  display: inline-grid; place-items: center; background: var(--accent); color: #080A0D; }
.ct-safety { margin: 0; padding: 10px 12px; border-radius: 12px; color: var(--silver);
  background: rgba(255, 196, 87, .07); box-shadow: inset 0 0 0 1px rgba(255, 196, 87, .28); }
.ct-list { padding: 0; overflow: hidden; }
.ct-row.unread > span:first-child::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px var(--accent); vertical-align: middle; }
.ct-row .onapp { margin-left: 8px; }
.ct-thread { display: flex; flex-direction: column; gap: 8px; }
.ct-bubble { max-width: 84%; padding: 10px 13px 7px; border-radius: 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ct-bubble p { margin: 0 0 3px; }
.ct-bubble .meta { font-size: 11px; }
.ct-bubble.theirs { align-self: flex-start; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  border-bottom-left-radius: 5px; }
.ct-bubble.mine { align-self: flex-end; background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent);
  border-bottom-right-radius: 5px; }
.ct-compose { position: sticky; bottom: calc(env(safe-area-inset-bottom) + 76px); display: flex; gap: 8px; align-items: flex-end;
  padding: 8px; border-radius: 16px; background: rgba(8, 10, 13, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.ct-compose textarea { flex: 1; min-height: 44px; resize: vertical; }
.ct-compose button { min-height: 44px; }
.op-card.closed { opacity: .6; }
.op-card h2 { margin: 0; }
.op-card .eyebrow { margin: 0; }
@media (prefers-reduced-motion: reduce) { .ct-row.unread > span:first-child::before { box-shadow: none; } }
.club-directory { margin: 1rem 0; }
.club-directory h2 { margin: .15rem 0; font-size: 1.25rem; }
.club-result { display: flex; align-items: center; gap: .8rem; padding: .8rem; }
.club-result img { width: 2.5rem; height: 2.5rem; object-fit: contain; }
.club-result p { margin: .25rem 0 0; }
.club-result button { flex: 0 0 auto; }

/* ══ The coach hologram (companion.js coach()): a portrait read as a projection. State = light, not decoration:
   listening brightens with the real mic level, thinking cools, speaking pulses on each spoken word, celebrating warms,
   concerned turns amber, unavailable greys out. Transform/opacity only for motion; one still frame under reduced motion. ══ */
.core.is-coach { overflow: visible; }
.coach-holo { --lvl: 0; --blip: 0; --rx: 0deg; --ry: 0deg; --holo: 120, 200, 255;
  position: absolute; inset: 0; pointer-events: none; perspective: 900px; }
.coach-holo .ch-tilt, .coach-holo .ch-sway, .coach-holo .ch-body { position: absolute; inset: 0; }
.coach-holo .ch-body { will-change: transform; }
.coach-holo .ch-tilt { transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .9s var(--ease); }
.coach-holo .ch-body { transform-origin: 50% 100%; }
.coach-holo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%;
  -webkit-user-drag: none; user-select: none; }
/* main projection: screen blend so the dark folds are see-through light, not a photo */
.coach-holo .ch-img { mix-blend-mode: screen; opacity: calc(.94 + var(--blip) * .06);
  filter: brightness(calc(1.04 + var(--lvl) * .35 + var(--blip) * .22)) contrast(1.06) saturate(1.08);
  transition: filter .35s var(--ease); }
/* the light it throws: a soft blurred copy behind */
.coach-holo .ch-glow { opacity: calc(.42 + var(--lvl) * .4); transform: scale(1.05); mix-blend-mode: screen; }
/* faint chromatic split, a few px off-axis — what makes it read as projected light */
.coach-holo .ch-ghost { mix-blend-mode: screen; opacity: .16; transform: translate(-3px, 0);
  }
.coach-holo .ch-scan, .coach-holo .ch-beam { position: absolute; inset: 0;
  -webkit-mask: url(/static/coach/coach.webp) center bottom / contain no-repeat; mask: url(/static/coach/coach.webp) center bottom / contain no-repeat; }
.coach-holo .ch-scan, .coach-holo .ch-beam { overflow: hidden; }
.coach-holo .ch-scan { mix-blend-mode: overlay; opacity: .3; }
.coach-holo .ch-scan::before { content: ""; position: absolute; left: 0; right: 0; top: -60px; bottom: 0;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .2) 0 1px, transparent 1px 3px); }
.coach-holo .ch-beam { mix-blend-mode: screen; }
.coach-holo .ch-beam::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18%; opacity: 0; will-change: transform, opacity;
  background: linear-gradient(transparent, rgba(190, 235, 255, .5) 50%, transparent); transform: translateY(-100%); }
/* projector: a lit disc at the feet and a light cone rising into the figure */
.coach-holo .ch-base { position: absolute; left: 50%; bottom: -2%; width: 74%; height: 34%; transform: translateX(-50%); }
.coach-holo .ch-cone { position: absolute; inset: 0; border-radius: 50% 50% 0 0;
  background: radial-gradient(60% 100% at 50% 100%, rgba(var(--holo), .22), rgba(var(--holo), .06) 55%, transparent 75%);
  opacity: calc(.75 + var(--lvl) * .5); }
.coach-holo .ch-disc { position: absolute; left: 6%; right: 6%; bottom: 0; height: 16%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(200, 238, 255, .55), rgba(var(--holo), .25) 45%, transparent 70%);
  box-shadow: 0 0 0 1px rgba(var(--holo), .35), 0 0 0 7px rgba(var(--holo), .05), 0 0 40px rgba(var(--holo), .35);
  transform: scale(calc(1 + var(--lvl) * .08)); transition: transform .2s; }
/* dust motes drifting up through the cone */
.coach-holo .ch-dust { position: absolute; left: 22%; right: 22%; bottom: 4%; height: 70%; overflow: hidden;
}
.coach-holo .ch-dust i { position: absolute; bottom: -4px; left: calc(var(--k) * 11.5% + 2%); width: 2px; height: 2px; border-radius: 50%;
  background: rgb(200, 238, 255); box-shadow: 0 0 6px rgba(var(--holo), .9); opacity: 0; }
/* small placements (header, rows): head and shoulders, framed as a round portrait — no stage */
.core-host .coach-holo, .core-mini .coach-holo { border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, rgba(var(--holo), .18), rgba(8, 14, 22, .9) 70%); perspective: none; }
.core-host .coach-holo img, .core-mini .coach-holo img { object-fit: cover; object-position: 50% 6%; transform: scale(1.65); transform-origin: 50% 10%; }
.core-host .coach-holo .ch-scan, .core-mini .coach-holo .ch-scan, .core-host .coach-holo .ch-beam, .core-mini .coach-holo .ch-beam { -webkit-mask: none; mask: none; border-radius: 50%; }
.core-host .coach-holo :is(.ch-base, .ch-dust, .ch-glow, .ch-ghost), .core-mini .coach-holo :is(.ch-base, .ch-dust, .ch-glow, .ch-ghost) { display: none; }
/* states drive light */
.core[data-state="thinking"] .coach-holo .ch-img { filter: hue-rotate(-12deg) brightness(.95) saturate(1.2); }
.core[data-state="celebrating"] .coach-holo .ch-img { filter: sepia(.35) hue-rotate(-25deg) saturate(1.5) brightness(1.15); }
.core[data-state="concerned"] .coach-holo .ch-img { filter: sepia(.6) hue-rotate(-30deg) saturate(1.3); }
.core[data-state="unavailable"] .coach-holo .ch-img { filter: grayscale(1) brightness(.55); opacity: .6; }
.core[data-state="unavailable"] .coach-holo :is(.ch-base, .ch-dust, .ch-glow, .ch-ghost, .ch-beam) { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .coach-holo .ch-sway { animation: ch-sway 15s ease-in-out infinite; }
  .coach-holo .ch-body { animation: ch-breath 5.6s cubic-bezier(.45, 0, .55, 1) infinite; }
  .coach-holo .ch-glow { animation: ch-glow 5.6s cubic-bezier(.45, 0, .55, 1) infinite; }
  .coach-holo .ch-img { animation: ch-flick 9s steps(1, end) infinite; }
  .coach-holo .ch-ghost { animation: ch-split 9s steps(1, end) infinite; }
  .coach-holo .ch-beam::before { animation: ch-beam 7.5s cubic-bezier(.5, 0, .5, 1) infinite 1.2s; }
  .coach-holo .ch-disc { animation: ch-disc 5.6s cubic-bezier(.45, 0, .55, 1) infinite; }
  .coach-holo .ch-dust i { animation: ch-rise calc(5s + var(--k) * .7s) linear infinite calc(var(--k) * -.9s); }
  .core[data-state="thinking"] .coach-holo .ch-scan { opacity: .5; }
  .core[data-state="thinking"] .coach-holo .ch-beam::before { animation-duration: 2.2s; }
  .core[data-state="listening"] .coach-holo .ch-beam::before { animation-duration: 4s; }
  .core[data-state="unavailable"] .coach-holo :is(.ch-sway, .ch-body, .ch-img, .ch-dust i), .core[data-state="unavailable"] .coach-holo .ch-beam::before { animation: none; }
}
@keyframes ch-breath { 0%, 100% { transform: translateY(0) scale(1); } 45% { transform: translateY(-.8%) scale(1.012, 1.016); } }
@keyframes ch-glow { 0%, 100% { opacity: .38; } 45% { opacity: .6; } }
@keyframes ch-sway { 0%, 100% { transform: rotateY(-4deg) rotateZ(-.3deg); } 50% { transform: rotateY(4deg) rotateZ(.3deg); } }
@keyframes ch-flick { 0%, 71%, 72.4%, 100% { opacity: .95; } 71.2% { opacity: .74; } 71.8% { opacity: .9; } }
@keyframes ch-split { 0%, 71%, 72.4%, 100% { transform: translate(-3px, 0); opacity: .16; }
  71.2% { transform: translate(-9px, 1px); opacity: .45; } 71.8% { transform: translate(6px, 0); opacity: .3; } }
@keyframes ch-scan { to { transform: translateY(60px); } }
@keyframes ch-beam { 0% { opacity: 0; transform: translateY(-100%); } 8% { opacity: 1; } 55% { opacity: 1; transform: translateY(560%); } 60%, 100% { opacity: 0; transform: translateY(560%); } }
@keyframes ch-disc { 0%, 100% { opacity: .85; } 45% { opacity: 1; } }
@keyframes ch-rise { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .8; } 85% { opacity: .5; } 100% { transform: translateY(-420px); opacity: 0; } }

/* launch: Scout mode is "coming soon" — its entry points stay out of sight until MENTRA_SCOUT_OPEN=1 */
body:not(.scout-open) #p-scout, body:not(.scout-open) #ld-roles button[data-r="scout"] { display: none !important; }

/* ══ Home hero (21 Oct): the coach hologram is the hero — greeting, his line from today's real mission, four doors
   (Performance · Mindset · Development · Arena) and the mic. Hologram blue belongs to the coach; the page accent stays
   the mode's. Phone: stacked, the doors overlap the foot of the projection. Wide: doors left, coach centre, line right. ══ */
.home-hero { --holo: 120, 200, 255; position: relative; display: grid; grid-template-columns: 1fr; gap: 0;
  margin: -4px calc(-1 * var(--pad-x)) 8px; padding: 0 var(--pad-x); isolation: isolate; }
.home-hero::before { content: ""; position: absolute; inset: 8% -10% 6%; z-index: -1; pointer-events: none;
  background: radial-gradient(48% 52% at 50% 46%, rgba(var(--holo), .16), transparent 72%); }
.hh-copy { display: flex; flex-direction: column; gap: 6px; position: relative; z-index: 2; }
.hh-copy .eyebrow, .hh-copy #t-date { margin: 0; }
.hh-greet { font: 700 clamp(28px, 7.6vw, 40px)/1.08 var(--display); letter-spacing: -.025em; text-shadow: none; margin: 0; }
.hh-sub { margin: 0; color: rgba(var(--holo), .9); font: 500 17px/1.35 var(--display); letter-spacing: -.005em; }

.hh-stage { position: relative; height: min(112vw, 470px); margin-top: -18px; }
.hh-coach { position: absolute; inset: 0 -4% 0; }
.hh-coach .coach-holo img { object-position: 50% 100%;
  -webkit-mask: linear-gradient(#000 70%, transparent 99%); mask: linear-gradient(#000 70%, transparent 99%); }
.hh-bubble { position: absolute; z-index: 3; right: 0; top: 4%; max-width: min(56%, 300px); margin: 0;
  padding: 12px 14px; border-radius: 16px 16px 4px 16px; font: 500 15px/1.4 var(--display); color: var(--text);
  background: rgba(10, 26, 44, .62); box-shadow: inset 0 0 0 1px rgba(var(--holo), .28), 0 18px 40px -18px rgba(0, 0, 0, .9);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }

.hh-panel { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: -84px;
  border-radius: 18px; overflow: hidden; background: rgba(var(--holo), .14);
  box-shadow: inset 0 0 0 1px rgba(var(--holo), .2), 0 24px 60px -28px rgba(0, 0, 0, .95);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
.hh-panel button { display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px;
  align-items: center; text-align: left; min-height: 64px; padding: 12px 14px; border-radius: 0; margin: 0;
  background: rgba(8, 16, 26, .82); color: var(--text); box-shadow: none; text-shadow: none; font: inherit; }
.hh-panel button:hover { background: rgba(14, 28, 44, .9); }
.hh-panel button:active { background: rgba(20, 40, 62, .92); }
.hh-panel svg { grid-row: 1 / 3; width: 24px; height: 24px; fill: none; stroke: rgb(var(--holo)); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
.hh-panel b { font: 600 15px/1.2 var(--display); letter-spacing: -.005em; }
.hh-panel span { font: 400 13px/1.25 var(--read); color: var(--muted, #87919E); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.hh-talk { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 0 6px; }
.hh-mic { position: relative; width: 72px; height: 72px; min-height: 0; padding: 0; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, rgba(var(--holo), .22), rgba(8, 16, 26, .9) 70%); color: rgb(var(--holo));
  box-shadow: inset 0 0 0 1.5px rgba(var(--holo), .7), 0 0 0 6px rgba(var(--holo), .06), 0 0 30px rgba(var(--holo), .28);
  touch-action: none; -webkit-user-select: none; user-select: none; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.hh-mic svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hh-mic:active, .hh-mic.rec { transform: scale(.95); box-shadow: inset 0 0 0 2px rgb(var(--holo)), 0 0 0 10px rgba(var(--holo), .12), 0 0 44px rgba(var(--holo), .45); }
.hh-hint { font: 500 13px var(--read); color: var(--muted, #87919E); }
@media (prefers-reduced-motion: no-preference) {
  .hh-mic::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(var(--holo), .35);
    animation: hh-ring 3.2s var(--ease) infinite; pointer-events: none; }
  .hh-bubble:not([hidden]) { animation: hh-in .6s var(--ease) both .25s; }
}
@keyframes hh-ring { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(1.35); opacity: 0; } }
@keyframes hh-in { from { opacity: 0; transform: translateY(6px); } }

/* the rest of Today under the hero: a compact focus row instead of the big dial, and no duplicates of the hero */
#v-today > .focus { flex-direction: row; text-align: left; align-items: center; gap: 16px; }
#v-today > .focus .reticle { width: 92px; flex: none; }
#v-today > .focus h1 { font-size: 22px; max-width: none; }
#v-today > .focus .focus-txt { align-items: flex-start; }
#v-today > .mental, #v-today > #t-talk { display: none; }

@media (min-width: 760px) {
  .home-hero { grid-template-columns: minmax(260px, 340px) 1fr; grid-template-areas: "copy stage" "panel stage" "talk talk";
    column-gap: 24px; min-height: 600px; }
  .hh-copy { grid-area: copy; padding-top: 24px; }
  .hh-stage { grid-area: stage; height: 600px; margin: 0; }
  .hh-coach { inset: 0 18% 0 0; }
  .hh-bubble { top: 16%; right: 0; max-width: 280px; font-size: 17px; padding: 16px 18px; }
  .hh-panel { grid-area: panel; align-self: start; grid-template-columns: 1fr; margin: 28px 0 0; }
  .hh-talk { grid-area: talk; margin-top: -120px; z-index: 3; }
}

/* ══ Phone dock (21 Oct): Home · Stats · Coach · Arena · Profile for football players. Glass, label under icon,
   active = mode accent. The three-line menu still holds everything else. ══ */
.dock { position: fixed; z-index: 25; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 560px;
  display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: rgba(7, 10, 14, .82); box-shadow: 0 -1px 0 rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); }
.dock[hidden] { display: none; }
.dock button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px;
  padding: 4px 0; margin: 0; border-radius: 12px; background: none; box-shadow: none; text-shadow: none; color: var(--muted, #87919E);
  font: 500 11px var(--read); letter-spacing: .01em; transition: color .2s var(--ease); }
.dock svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dock button:hover { color: var(--silver); background: none; }
.dock button.on { color: var(--accent); }
.dock button:focus-visible { outline-offset: -3px; }
@media (min-width: 760px) { .dock { bottom: 14px; width: auto; min-width: 440px; border-radius: 20px; padding: 6px 10px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 20px 50px -20px rgba(0, 0, 0, .9); } }
body.has-dock { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
body.has-dock .composer { bottom: calc(64px + env(safe-area-inset-bottom)); padding-bottom: 12px; }
body.has-dock .chat { padding-bottom: 180px; }
body.has-dock .toast { bottom: calc(90px + env(safe-area-inset-bottom)); }
body.menu-open .dock { visibility: hidden; }
/* Coach screen with the dock: suggestions sit above the composer; the portrait doesn't run into its name */
body.has-dock #v-coach.fresh .chat { padding-bottom: 0; }
body.has-dock #chat-starters { margin-bottom: 96px; }
#v-coach.fresh .core-head .core-host { margin: 0 0 8px; }
/* a reply still being written: a soft caret after the last word (no caret under reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .msg.mentra.streaming::after { content: ""; display: inline-block; width: 7px; height: 1em; margin-left: 3px; vertical-align: -2px;
    border-radius: 2px; background: rgba(var(--accent-rgb), .7); animation: st-caret 1s steps(1, end) infinite; }
}
.msg.mentra.streaming .rate { display: none; }
@keyframes st-caret { 50% { opacity: 0; } }

/* ══ Design pass (21 Oct, evening) — Refactoring UI rules applied to Mentra. One family of colour, the hologram is
   the only thing that glows, hierarchy through weight and grey (not more colour), no decorative HUD noise.
   Palette: cool blue-tinted greys + hologram blue as THE accent (personal mode). Team = teal, Arena = violet stay as
   mode accents. "Positive" (was lime) becomes mint so it sits in the same family. Additive: overrides only. ══ */
:root {
  --obsidian: #05070B; --graphite: #0A0E14; --graphite-2: #111721; --text: #EEF3F8; --silver: #98A4B3; --dim: #5C6775; --muted: #7D8896;
  --holo-rgb: 120, 200, 255;
  --lime: 112, 228, 170;           /* positive / "you" — mint, same family as the hologram */
  --cyan: 92, 224, 206;            /* team mode — teal, clearly apart from the hologram blue */
  --surface: rgba(12, 17, 24, .72); --surface-2: rgba(18, 24, 33, .9); --line: rgba(160, 200, 240, .09);
  --accent-rgb: var(--holo-rgb); --accent: rgb(var(--accent-rgb)); --accent-ink: #03111F;
  --accent-soft: rgba(var(--accent-rgb), .08); --bk: rgba(var(--accent-rgb), .32); --ok: rgb(var(--lime));
}
body[data-mode="team"] { --accent-rgb: var(--cyan); --accent-ink: #02171A; }
body:not([data-mode]), body[data-mode="personal"], body[data-mode="companion"], body[data-mode="coach"] { --accent-rgb: var(--holo-rgb); --accent-ink: #03111F; }
/* calm ground: one soft light from above, no grid paper */
body { background: radial-gradient(120% 70% at 50% -20%, rgba(var(--accent-rgb), .09), transparent 60%), var(--obsidian); background-attachment: fixed; }
/* header: quieter — no accent rule, no glowing dot, no clock duplicating the phone's own */
.top { background: linear-gradient(var(--obsidian) 60%, rgba(5, 7, 11, 0)); }
.top::after { background: var(--line); left: 0; right: 0; bottom: 0; opacity: 0; }
.dot { box-shadow: none; border-color: rgba(var(--accent-rgb), .9); }
.brand { font-size: 15px; letter-spacing: .32em; }
@media (max-width: 759px) { .clock { display: none; } }
.clock { color: var(--silver); font-weight: 500; }
.demo-pill { color: var(--silver); border-color: rgba(255, 255, 255, .16); border-radius: 999px; padding: 5px 9px; letter-spacing: .12em; }
/* buttons: by hierarchy, not decoration — solid primary, quiet secondary, soft radius instead of clipped corners */
button { border-radius: 12px; }
button.primary, a.primary.ld-go { clip-path: none; border-radius: 999px; box-shadow: 0 8px 24px -10px rgba(var(--accent-rgb), .55); letter-spacing: .01em; font-weight: 650; }
button.ghost { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--line); }
button:hover { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .3); }
/* type: one scale, weight + grey for hierarchy */
h1 { font-weight: 650; letter-spacing: -.02em; }
.eyebrow, .label { color: var(--silver); }

/* Home hero — hierarchy: date (grey) → greeting (white, heavy) → line (grey). The coach speaks as a subtitle under
   him, never on his face. Doors are four calm tiles; text wraps instead of being cut. */
.home-hero::before { background: radial-gradient(46% 50% at 50% 50%, rgba(var(--holo), .12), transparent 72%); }
.hh-copy #t-date { font: 500 13px var(--read); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.hh-greet { font-weight: 700; letter-spacing: -.03em; }
.hh-sub { color: var(--silver); font: 400 17px/1.4 var(--read); letter-spacing: 0; }
.hh-stage { height: min(108vw, 480px); margin-top: -6px; }
.hh-coach { inset: 0 2% 4%; }
.hh-coach .coach-holo img { -webkit-mask: none; mask: none; }
.hh-bubble { left: 50%; right: auto; top: auto; bottom: 96px; transform: translateX(-50%); width: min(88%, 340px); max-width: none;
  padding: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  text-align: center; font: 500 16px/1.45 var(--read); color: #DDEBF7; text-shadow: 0 1px 12px rgba(0, 0, 0, .9), 0 0 2px rgba(0, 0, 0, .8); }
.hh-bubble::before { content: "Coach"; display: block; margin-bottom: 4px; font: 600 11px var(--read); letter-spacing: .16em; text-transform: uppercase; color: rgba(var(--holo), .85); }
html[lang="es"] .hh-bubble::before { content: "Entrenador"; }
.hh-panel { gap: 8px; margin-top: -64px; padding: 0; border-radius: 0; overflow: visible; background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; }
.hh-panel button { min-height: 72px; padding: 14px; border-radius: 16px; align-items: start;
  background: rgba(12, 18, 26, .78); box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -24px rgba(0, 0, 0, .95);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: background .2s var(--ease), transform .2s var(--ease); }
.hh-panel button:hover { background: rgba(18, 27, 38, .86); box-shadow: inset 0 0 0 1px rgba(var(--holo), .22); }
.hh-panel button:active { transform: scale(.98); }
.hh-panel svg { width: 22px; height: 22px; margin-top: 1px; stroke: rgba(var(--holo), .85); }
.hh-panel b { font: 600 15px/1.25 var(--read); }
.hh-panel span { white-space: normal; overflow: visible; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--muted); }
.hh-mic { width: 64px; height: 64px; background: rgba(12, 20, 30, .9);
  box-shadow: inset 0 0 0 1px rgba(var(--holo), .45), 0 0 0 8px rgba(var(--holo), .04); }
.hh-hint { color: var(--dim); }
@media (min-width: 760px) {
  .hh-stage { height: 620px; }
  .hh-coach { inset: 0 6% 4% 0; }
  .hh-bubble { bottom: 70px; left: 46%; font-size: 18px; width: 380px; }
  .hh-panel { margin: 28px 0 0; }
  .hh-panel button { min-height: 68px; }
}

/* Landing — one accent, roles bar sized to its three choices, quieter ghost word, labels as hairlines */
#ld-roles { grid-template-columns: repeat(3, minmax(0, 1fr)); width: fit-content; min-width: min(100%, 360px); border-radius: 14px; overflow: hidden; }
body.scout-open #ld-roles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#ld-roles button { border-radius: 10px; }
.ld-ghost { -webkit-text-stroke: 1px rgba(var(--accent-rgb), .16); background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 80%); -webkit-background-clip: text; background-clip: text; }
.ld-field { opacity: .08; }
.ld-tag b { border-radius: 8px; background: rgba(5, 7, 11, .7); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .22); letter-spacing: .12em; }
.ld-eye, .ld-k { color: rgba(var(--accent-rgb), .9); }
.landing::after { width: 1px; box-shadow: none; opacity: .7; }
.ld-rail button { color: var(--dim); }
/* the coach on the landing stands on the same projector */
.ld-core .coach-holo .ch-base { bottom: 2%; }
/* landing, second look: ghost word sits far back, labels point at the coach's shoulders (never his face) */
.ld-ghost, .landing[data-form] .ld-ghost { color: rgba(255, 255, 255, .045); -webkit-text-fill-color: rgba(255, 255, 255, .045);
  -webkit-text-stroke: 1px rgba(var(--accent-rgb), .1); }
.ld-tag.t1 { top: 40%; left: 0; } .ld-tag.t2 { bottom: 20%; right: 0; }
.ld-intro > .ld-eye { color: var(--dim); font: 600 12px var(--read); letter-spacing: .24em; text-transform: uppercase; }
/* slow device (companion.js liteCheck): keep coach, breath, glow, projector; drop the extras */
.holo-lite .coach-holo :is(.ch-ghost, .ch-dust, .ch-beam) { display: none; }
.holo-lite .coach-holo .ch-sway { animation: none; }
/* status tags: small pills on a tinted ground (Refactoring UI: soft background + strong text), not boxed outlines */
.badge { border-radius: 999px; padding: 5px 10px; letter-spacing: .08em; box-shadow: none; background: rgba(255, 255, 255, .06); color: var(--silver); white-space: nowrap; }
.badge.simulated { background: rgba(255, 182, 72, .12); box-shadow: none; }
.badge.manual { background: rgba(var(--lime), .12); box-shadow: none; }
.badge.cyan, .badge.device { background: rgba(var(--holo-rgb), .12); color: rgb(var(--holo-rgb)); box-shadow: none; }
.badge.danger { background: rgba(255, 106, 95, .12); color: #FF8A80; box-shadow: none; }

/* ══ One navigation (21 Oct, UX audit U2/U4): players get the tab bar only — the three-line menu stays for coaches,
   scouts and the fitness/wellbeing experiences, which have no tab bar. Profile is the hub for everything else. ══ */
body.has-dock #b-menu, body.has-dock #menu-scrim { display: none !important; }
.pf-title { margin: 8px 0 0; }
.pf-list { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.pf-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; margin: 0; padding: 12px 16px;
  border-radius: 0; background: none; box-shadow: none; text-align: left; color: var(--text); font: inherit; }
.pf-row + .pf-row:not([hidden]), .pf-row[hidden] + .pf-row { box-shadow: inset 0 1px 0 var(--line); }
.pf-row:hover { background: rgba(255, 255, 255, .03); box-shadow: inset 0 1px 0 var(--line); }
.pf-row:first-child:hover { box-shadow: none; }
.pf-row span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-row b { font: 600 16px/1.25 var(--read); }
.pf-row small { font: 400 14px/1.3 var(--read); color: var(--muted); }
.pf-chev { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--dim); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* check-in scales (UX audit U1): good end always left, words under both ends, 44px steps, selected step fills */
.ci-seg { gap: 6px; margin: 8px 0 4px; overflow: visible; }
.ci-seg-btn { min-width: 0; height: 44px; border: 0; border-radius: 10px; font: 600 15px var(--num);
  background: color-mix(in srgb, rgb(var(--lime)) calc((1 - var(--g, .5)) * 10%), color-mix(in srgb, var(--amber) calc(var(--g, .5) * 10%), rgba(255, 255, 255, .04)));
  box-shadow: inset 0 0 0 1px var(--line); color: var(--silver); }
.ci-seg-btn.on { background: var(--text); color: #05070B; box-shadow: none; }
.ci-ends { display: flex; justify-content: space-between; margin: 0 0 14px; font: 500 13px var(--read); color: var(--muted); }
.ci-row > label { font: 600 15px var(--read); color: var(--text); }

/* ══ Platform polish (UX audit: HIG + Web Interface Guidelines) ══ */
html { color-scheme: dark; -webkit-tap-highlight-color: transparent; }
button, a, input, select, textarea, [role="button"] { touch-action: manipulation; }
select { background-color: var(--graphite-2); color: var(--text); }
.menu, #tabs, .modal, [role="dialog"], .sheet, .chat { overscroll-behavior: contain; }
h1, h2, .hh-greet, .ld-big { text-wrap: balance; }
.stats b, .num, .ret .num, .ci-hours, #ci-sleep-val { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid rgba(var(--accent-rgb), .9); outline-offset: 2px; }
/* Home "since last time" line: real news reads as a link in hologram blue; otherwise today's plan in grey */
.hh-sub.is-new { color: rgba(var(--holo), .95); cursor: pointer; text-decoration: underline; text-decoration-color: rgba(var(--holo), .35); text-underline-offset: 4px; }
#ci-hyd-wrap { display: grid !important; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px !important; }
#ci-hyd-wrap > button { width: auto !important; min-width: 0; height: 44px; }

/* ══ UX audit, part 2 (21 Oct) ══ */
/* U7 journal: sentence-case grey labels; colour stays off the labels */
.je-k { font: 500 13px/1.6 var(--read); letter-spacing: 0; text-transform: none; color: var(--muted) !important; }
/* U5 communities: search first; creating a community is one tap away, not a form shown to everyone */
.cm-create > summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; justify-content: space-between;
  font: 600 16px var(--read); color: var(--text); }
.cm-create > summary::-webkit-details-marker { display: none; }
.cm-create > summary::after { content: "+"; font: 400 24px/1 var(--read); color: var(--silver); transition: transform .2s var(--ease); }
.cm-create[open] > summary::after { transform: rotate(45deg); }
/* U8 small iPhones (SE): shorter stage so the mic clears the tab bar */
@media (max-height: 700px) and (max-width: 759px) { .hh-stage { height: min(88vw, 340px); } .hh-panel button { min-height: 64px; } }
/* iOS sheets (HIG): the add-session / add-metric / import forms rise from the bottom, grabber on top, swipe down (or Escape)
   to close, safe area respected. Replaces the floating centred cards. */
.modal-overlay:not([hidden]) { inset: auto 0 0 0 !important; margin: 0 auto !important; max-width: 560px !important; max-height: 88dvh !important;
  border: 0 !important; border-radius: 22px 22px 0 0 !important; padding: 28px 20px calc(20px + env(safe-area-inset-bottom)) !important;
  background: var(--graphite) !important; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .62), 0 -10px 40px rgba(0, 0, 0, .6) !important;
  overscroll-behavior: contain; touch-action: pan-y; }
.modal-overlay .sheet-grab { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 120px; height: 28px; padding: 0; margin: 0;
  background: none; box-shadow: none; border-radius: 0; min-height: 0; }
.modal-overlay .sheet-grab::before { content: ""; position: absolute; left: 42px; right: 42px; top: 10px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .28); }
@media (prefers-reduced-motion: no-preference) {
  .modal-overlay:not([hidden]) { animation: sheet-up .38s cubic-bezier(.2, .8, .2, 1) both; }
  .modal-overlay.dragging { animation: none; }
}
@keyframes sheet-up { from { transform: translateY(100%); } }
@media (min-width: 760px) { .modal-overlay:not([hidden]) { inset: 0 !important; margin: auto !important; height: fit-content; border-radius: 22px !important; } }
/* U9 Arena: the licence credit is required, but it shouldn't compete with the kit — bottom corner, quiet */
.ar-stage .lk-credit { top: auto; bottom: 12px; left: 16px; right: auto; max-width: 70%; text-align: left; opacity: .5; }
@media (max-width: 699px) { #v-locker .lk-credit { bottom: 58px; max-width: 60%; } }

/* ══ Editorial direction (21 Oct, final UI) — a matchday programme lit by a hologram.
   ONE bold move: Archivo, condensed and heavy, for titles and big numbers. Everything else is quiet: system text for
   reading (follows the iPhone's text size), sentence case everywhere (no tracked-out caps labels), left-aligned, one big
   title per screen with no label above it, generous space. The hologram is the only light. Full rules: DESIGN.md. ══ */
@font-face { font-family: "Archivo"; src: url("fonts/archivo-var.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
:root {
  --display: "Archivo", "SF Pro Display", -apple-system, system-ui, sans-serif;
  --num: "Archivo", "SF Pro Display", -apple-system, system-ui, sans-serif;
}
/* titles: condensed, heavy, tight — the voice of the app */
h1, .hh-greet, .ld-big, .promise-h, .pf-title {
  font-family: var(--display); font-weight: 800; font-stretch: 72%; letter-spacing: -.012em; line-height: .98; }
h1 { font-size: clamp(36px, 10vw, 52px); }
.hh-greet { font-size: clamp(42px, 12.4vw, 64px); }
.ld-big, .promise-h { font-size: clamp(48px, 14vw, 104px); line-height: .92; }
h2 { font-family: var(--display); font-weight: 700; font-stretch: 85%; font-size: 24px; letter-spacing: -.005em; line-height: 1.1; }
/* numbers: same family, wide enough to read at a glance, tabular */
.stats b, .num, .ret .num, .gauge b, .rp-v, .ci-hours, #ci-sleep-val, .ar-stat b, [class*="stat"] b {
  font-family: var(--num); font-stretch: 80%; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
/* no label above a title — the title is the orientation (Trunk test still passes: tab bar shows where you are) */
.view > .eyebrow:has(+ h1), .view > .eyebrow:has(+ .pf-title) { display: none; }
/* sentence case, no tracking: labels, tags, pills, kicker lines */
.label, .badge, .eyebrow, .ld-eye, .ld-k, .ld-hint, .ld-tag b, .demo-pill, .hh-copy #t-date, .hh-bubble::before, .lk-pill, .tabs button {
  text-transform: none; letter-spacing: .005em; }
.label { font: 600 15px var(--read); color: var(--silver); }
.badge { font: 600 12px/1 var(--read); }
.hh-copy #t-date { font: 500 15px var(--read); color: var(--muted); }
.hh-copy #t-date:first-letter { text-transform: uppercase; }
.hh-bubble::before { font: 600 13px var(--read); }
.ld-tag b { font: 600 13px var(--read); }
.ld-eye, .ld-k { font: 600 14px var(--read); }
/* rhythm: more air between blocks, titles sit lower and alone */
.view { gap: 26px; }
.view > h1:first-child, .view > .pf-title { margin-top: 18px; }
main { padding-top: 6px; }
/* the wordmark stays the one place with tracking — it's a logo, not a label */
.brand { font-family: var(--display); font-weight: 800; font-stretch: 100%; letter-spacing: .3em; }
/* editorial clean-up: small labels in sentence case, no colour on dates, Home "new" line reads as a quiet link */
.nt-cat, .je-meter, .je-date span, .je-date i { text-transform: none; letter-spacing: 0; font-family: var(--read); font-size: 12px; }
.je-date span { color: var(--silver); }
.hh-sub.is-new { text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hh-sub.is-new::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-right: 1.6px solid currentColor; border-top: 1.6px solid currentColor; transform: rotate(45deg) translateY(-1px); }
#v-notifs > .row.between h1 { margin-top: 18px; }
.ar-tag span:first-child { text-transform: none; letter-spacing: 0; font: 600 13px var(--read); color: var(--silver); }
.ar-tag b, .ar-tag strong { font-family: var(--display); font-stretch: 72%; font-weight: 800; font-style: normal; letter-spacing: 0; }
.nt-cat::first-letter { text-transform: uppercase; }
.ld-intro > .ld-eye { display: none; }

/* ══ Screen transitions (transitions.js) — 21 Oct: motion that answers a tap. The screen you leave glides out (.2s) just
   before the next one arrives from the side you're heading to; dock tabs slide by tab order, detail screens push in.
   transform + opacity only, ≤ .42s, nothing under reduced motion. ══ */
.view.leaving[hidden] { display: flex !important; position: fixed !important; z-index: 1; margin: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .view.leaving.out-fwd  { animation: tr-out-l .18s ease-out both; }
  .view.leaving.out-back { animation: tr-out-r .18s ease-out both; }
  .view.leaving.out-fade { animation: tr-out-f .18s ease-out both; }
  @keyframes tr-out-l { to { opacity: 0; transform: translateX(-28px); } }
  @keyframes tr-out-r { to { opacity: 0; transform: translateX(28px); } }
  @keyframes tr-out-f { to { opacity: 0; } }
  .view.enter.in-fwd  { animation: tr-in-r .44s var(--ease) both .1s; }
  .view.enter.in-back { animation: tr-in-l .44s var(--ease) both .1s; }
  .view.enter.in-fade { animation: viewfade .36s var(--ease) both; }
  @keyframes tr-in-r { from { opacity: 0; transform: translateX(44px); } to { opacity: 1; transform: none; } }
  @keyframes tr-in-l { from { opacity: 0; transform: translateX(-44px); } to { opacity: 1; transform: none; } }
  /* the cascade inside a screen: lighter when the screen itself is already moving (no blur — cheaper on phones) */
  .view.enter:is(.in-fwd, .in-back) > * { animation-name: tr-rise; animation-duration: .46s; }
  @keyframes tr-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

  /* chat: each new message rises in instead of popping */
  .chat .msg { animation: tr-msg .34s var(--ease) both; }
  .chat .msg.me, .chat .msg.user { transform-origin: 100% 100%; }
  .chat .msg.mentra { transform-origin: 0 100%; }
  @keyframes tr-msg { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

  /* tap feedback on tappable cards: a soft press, released with the house ease */
  .card:is(button, a), button.card, .dock button { transition: transform .22s var(--ease), color .2s; }
  .card:is(button, a):active, button.card:active { transform: scale(.985); transition-duration: .08s; }
  .dock button:active svg { transform: scale(.88); }
  .dock button svg { transition: transform .25s cubic-bezier(.34, 1.5, .5, 1); }
}
/* dock: one glowing marker glides to the active tab */
.dock { isolation: isolate; }
.dock .dock-ind { position: absolute; z-index: -1; top: 6px; bottom: 6px; left: 0; width: 0; opacity: 0; pointer-events: none;
  border-radius: 14px;
  background: radial-gradient(60% 70% at 50% 100%, rgba(var(--accent-rgb), .22), transparent 72%), rgba(var(--accent-rgb), .07);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .16);
  transition: transform .46s cubic-bezier(.34, 1.25, .5, 1), width .46s var(--ease), opacity .3s; }
.dock .dock-ind::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 18px; height: 2px; margin-left: -9px;
  border-radius: 2px; background: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb), .9); }
.dock .dock-ind.snap { transition: none; }
@media (prefers-reduced-motion: reduce) { .dock .dock-ind { transition: none; } }

/* ══ Boot screen — the M stitched onto fabric (stitch.js, 21 Oct). Obsidian weave, hologram-blue satin thread, one
   sheen pass, then it lifts away. transform/opacity + stroke-dashoffset only; reduced motion = finished emblem. ══ */
.stitch { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 6px;
  background-color: #05070B;
  background-image: radial-gradient(55% 42% at 50% 44%, rgba(120, 200, 255, .09), transparent 72%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .35) 0 1px, transparent 1px 3px);
  transition: opacity .48s var(--ease), visibility .48s; }
.stitch.out { opacity: 0; visibility: hidden; pointer-events: none; }
.st-svg { width: min(66vw, 300px); height: auto; overflow: visible; transition: transform .5s var(--ease); }
.stitch.out .st-svg { transform: scale(1.06); }
.st-ring { fill: none; stroke: rgba(120, 200, 255, .75); stroke-width: 3; stroke-dasharray: 7 6; }
.st-ring2 { stroke: rgba(120, 200, 255, .32); stroke-width: 1.6; stroke-dasharray: 4 6; }
.st-needle { fill: #e8f6ff; opacity: 0; filter: drop-shadow(0 0 6px rgb(120, 200, 255)); }
.st-tail { fill: none; stroke: rgba(232, 246, 255, .8); stroke-width: 1.4; stroke-linecap: round; opacity: 0; }
.st-word { font: 700 15px var(--display, system-ui); letter-spacing: .55em; padding-left: .55em; color: rgba(232, 246, 255, .92);
  text-shadow: 0 0 18px rgba(120, 200, 255, .45); opacity: 0; }
.st-sheen { opacity: 0; }
.stitch.still .st-word { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  /* running stitch around the badge: drawn by a moving gap in the dashes */
  .stitch.go .st-ring { stroke-dasharray: 7 6; animation: st-ring .55s cubic-bezier(.3, 0, .2, 1) both; }
  .stitch.go .st-ring2 { animation: st-fade .5s .25s ease-out both; }
  @keyframes st-ring { from { opacity: 0; transform: rotate(-40deg); } to { opacity: 1; transform: none; } }
  .st-ring { transform-origin: 256px 258px; }
  /* satin M laid down along the stroke, needle + loose thread ride ahead of it */
  .st-m { stroke-dasharray: 700; stroke-dashoffset: 700; }
  .stitch.go .st-m { animation: st-draw 1.1s .35s cubic-bezier(.2, .6, .4, 1) forwards; }
  @keyframes st-draw { to { stroke-dashoffset: 0; } }
  .stitch.go .st-needle, .stitch.go .st-tail { animation: st-fade .15s .35s both; }
  .stitch.tied .st-needle, .stitch.tied .st-tail { animation: st-gone .25s both; }
  @keyframes st-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes st-gone { to { opacity: 0; } }
  /* finished: one sheen across the thread, the badge breathes once, the wordmark arrives */
  .stitch.tied .st-sheen { opacity: 1; animation: st-sheen .8s cubic-bezier(.4, 0, .2, 1) both; }
  @keyframes st-sheen { from { transform: translateX(0); } to { transform: translateX(560px); } }
  .stitch.tied .st-svg { animation: st-glow 1s ease-out both; }
  @keyframes st-glow { 40% { filter: drop-shadow(0 0 22px rgba(120, 200, 255, .55)); } to { filter: drop-shadow(0 0 10px rgba(120, 200, 255, .25)); } }
  .stitch.go .st-word { animation: st-word .7s 1.35s var(--ease) both; }
  @keyframes st-word { from { opacity: 0; letter-spacing: .9em; } to { opacity: 1; letter-spacing: .55em; } }
}
.stitch.still .st-m { stroke-dasharray: none; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .st-m { stroke-dasharray: none; stroke-dashoffset: 0; } }


/* 22 Oct — one signature presence: the orb (orb.js) is Mentra's mind on every screen; the coach is projected from it.
   The coach is now a real alpha cut-out (coach_cut.webp) — no chromatic ghost, no dust: cleaner. */
:where(.core-host, .core-mini).core.is-orb { position: relative; }
.core.is-orb .orb-cv { position: absolute; inset: 0; display: block; }
.coach-holo .ch-orb { position: absolute; left: 50%; bottom: 0; width: 50%; aspect-ratio: 1; transform: translate(-50%, 46%); pointer-events: none; }
.coach-holo .ch-cone { opacity: .55; }
.coach-holo .ch-img { mix-blend-mode: normal; }
.coach-holo .ch-scan { opacity: .16; }
.core[data-state="unavailable"] .coach-holo .ch-orb { opacity: .5; }
/* Home: the orb is the talk button — hold it and Mentra listens (the real mic state drives it). */
.hh-coach .ch-orb { display: none; }
.hh-mic-orb { position: absolute; inset: -22px; pointer-events: none; z-index: 0; border-radius: 50%; }
.hh-mic svg { position: relative; z-index: 1; }
.hh-mic { background: rgba(6, 10, 16, .55); }
/* the core on the coach's chest (replaces the base orb) */
.coach-holo .ch-core { position: absolute; pointer-events: none; mix-blend-mode: screen; }
.core-host .coach-holo .ch-core, .core-mini .coach-holo .ch-core { display: none; }