/* ═══════════════════════════════════════════════════════════════════════════
   YORKSHIRE GAMBIT v24 — STYLES
   Loaded by index.html via <link rel="stylesheet" href="styles.css">.
   Edit this file directly; no inline <style> block exists in the HTML anymore.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Design tokens ─────────────────────────────────────────────────────── */
:root{
  /* v23 — Chess.com inspired flat dark palette. Crisp neutral surfaces,
     no decorative warm tints. White text on dark surfaces.
     Backgrounds layered from black-coffee through cool dark grey. */
  --bg:#1A1817;--bg2:#1F1D1B;
  --surface:#262421;--surface2:#2C2A27;--surface3:#36332F;
  /* Borders — neutral greys */
  --border:#3A3633;--border2:#46423E;--border3:#56524D;
  /* Brand accent — kept gold but slightly cooler */
  --gold:#E87722;--gold-dim:#c46318;--gold-bright:#FF9748;
  --gold-glow:rgba(232,119,34,.18);--gold-glow2:rgba(232,119,34,.30);
  /* Chess accent — chess.com green */
  --chess-green:#81B64C;--chess-green-dim:#5D8033;--chess-green-glow:rgba(129,182,76,.16);
  /* Text — high contrast crisp white-ish */
  --text:#E8E6E3;--muted:#9E9B96;--faint:#6B6864;
  /* Status — chess.com palette */
  --green:#81B64C;--red:#FA412D;--blue:#56A1E5;--amber:#E5A046;
  /* Flat surfaces — no gradients. Cards use a plain --surface2 fill. */
  --grad-gold:#E87722;
  --grad-surface:var(--surface2);
  --grad-card:var(--surface2);
  --grad-win:rgba(129,182,76,.10);
  --grad-loss:rgba(250,65,45,.10);
  --grad-draw:rgba(86,161,229,.10);
  /* Shadows — flat, just subtle depth for raised elements */
  --shadow-xs:0 1px 2px rgba(0,0,0,.25);
  --shadow-sm:0 2px 4px rgba(0,0,0,.30);
  --shadow-md:0 4px 12px rgba(0,0,0,.35);
  --shadow-lg:0 12px 32px rgba(0,0,0,.45);
  --shadow-gold:0 0 0 1px rgba(232,119,34,.35);
  /* Layout */
  --radius-sm:6px;--radius:8px;--radius-lg:10px;--radius-xl:14px;
  --font-base:17px;
  /* Type system */
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --font-mono:'DM Mono',ui-monospace,'SF Mono',Menlo,monospace;
}

/* ── Light theme override ──────────────────────────────────────────────── */
body.light{
  --bg:#F7F5F0;--bg2:#EEEBE4;
  --surface:#FFFFFF;--surface2:#F9F7F3;--surface3:#F0EDE6;
  --border:#E4E1DA;--border2:#D2CFC7;--border3:#B5B1A8;
  --text:#1F1D1B;--muted:#5C5853;--faint:#9B968D;
  --gold:#B85E0E;--gold-dim:#8a4208;--gold-bright:#D6701F;
  --gold-glow:rgba(184,94,14,.12);
  --chess-green:#5D8033;--chess-green-dim:#456026;
  --green:#5D8033;--red:#C13524;
  --grad-card:#FFFFFF;
  --grad-win:rgba(93,128,51,.08);
  --grad-loss:rgba(193,53,36,.08);
  --grad-draw:rgba(60,110,180,.08);
  --shadow-sm:0 1px 3px rgba(0,0,0,.08);
  --shadow-md:0 4px 12px rgba(0,0,0,.10);
}

/* ── Animations ────────────────────────────────────────────────────────── */
@keyframes fadeInUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}
@keyframes fillBar{from{width:0%}}
@keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes pulseCritical{0%,100%{box-shadow:0 0 0 0 rgba(196,85,85,.4)}50%{box-shadow:0 0 0 6px rgba(196,85,85,0)}}
@keyframes glowGold{0%,100%{box-shadow:0 0 8px rgba(232,119,34,.2)}50%{box-shadow:0 0 18px rgba(232,119,34,.45)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes rotate{to{transform:rotate(360deg)}}
@keyframes countUp{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
@keyframes boardFlash{0%{opacity:0}50%{opacity:.08}100%{opacity:.04}}
@keyframes pieceEntrance{0%{transform:scale(0) rotate(-180deg);opacity:0}80%{transform:scale(1.1) rotate(5deg)}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes progressGlow{0%{filter:brightness(1) drop-shadow(0 0 4px var(--gold))}50%{filter:brightness(1.2) drop-shadow(0 0 8px var(--gold))}100%{filter:brightness(1) drop-shadow(0 0 4px var(--gold))}}

/* ── Base ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;font-size:var(--font-base);line-height:1.55;-webkit-font-smoothing:antialiased}
input,select,textarea,button{font-family:inherit}
a{color:var(--blue);text-decoration:none}

/* ── App shell ─────────────────────────────────────────────────────────── */
.app{display:flex;flex-direction:column;height:100vh;overflow:hidden;background:var(--bg)}

/* ── Top bar ───────────────────────────────────────────────────────────── */
.top-bar{
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  padding:.45rem 1.4rem;
  display:flex;align-items:center;gap:1.2rem;
  position:relative;flex-shrink:0;
}
.top-bar::before,.top-bar::after{display:none}
.top-logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;position:relative;z-index:1;flex-shrink:0}
.top-logo img{border-radius:6px;height:34px;width:34px;object-fit:cover;border:1px solid var(--border);transition:border-color .15s}
.top-logo:hover img{border-color:var(--gold)}
.top-name{font-size:1rem;font-weight:600;color:var(--text);letter-spacing:-.01em}
.top-sub{font-size:11px;color:var(--muted);font-weight:400}
.top-nav{display:flex;gap:.1rem;flex-wrap:wrap;position:relative;z-index:1}

/* ── Burger menu button ──────────────────────────────────────────── */
.burger-btn{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;
  background:transparent;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  cursor:pointer;flex-shrink:0;position:relative;z-index:1;
  transition:all .15s;padding:0;
}
.burger-btn:hover{
  background:var(--surface2);
  border-color:var(--border2);
}
.burger-btn:active{transform:scale(.96)}
.burger-icon{
  display:flex;flex-direction:column;justify-content:space-between;
  width:18px;height:13px;
}
.burger-icon span{
  display:block;height:2px;width:100%;
  background:var(--gold);
  border-radius:1px;
  transition:transform .2s,opacity .2s;
}
.burger-btn.open .burger-icon span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger-btn.open .burger-icon span:nth-child(2){opacity:0}
.burger-btn.open .burger-icon span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

.current-tab-label{
  font-family:'DM Mono',monospace;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);margin-left:.85rem;
  position:relative;z-index:1;
}

/* ── Left side drawer ──────────────────────────────────────────── */
.drawer-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.5);
  z-index:1500;opacity:0;pointer-events:none;
  transition:opacity .2s ease-out;
}
.drawer-overlay.open{opacity:1;pointer-events:auto}
/* Overlay only shows in 'hidden' mode (popover-style). Pinned and rail don't use it. */
body.drawer-mode-pinned .drawer-overlay,
body.drawer-mode-rail .drawer-overlay{display:none}

.drawer{
  position:fixed;top:0;left:0;bottom:0;
  width:280px;max-width:85vw;
  background:var(--bg2);
  border-right:1px solid var(--border);
  box-shadow:none;
  z-index:1501;
  transform:translateX(-100%);
  transition:transform .25s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;
  overflow:hidden;
}
.drawer.open{transform:translateX(0)}

/* ── Mode: PINNED — always visible, full width, body content shifted ──── */
body.drawer-mode-pinned .drawer{
  transform:translateX(0);
  box-shadow:none;
}
body.drawer-mode-pinned .app{padding-left:280px;transition:padding-left .25s cubic-bezier(.4,0,.2,1)}
body.drawer-mode-pinned .burger-btn{display:none}

/* ── Mode: RAIL — narrow strip with just icons, hover/click expands ──── */
body.drawer-mode-rail .drawer{
  transform:translateX(0);
  width:60px;
  box-shadow:none;
}
body.drawer-mode-rail .drawer:hover,
body.drawer-mode-rail .drawer.expanded{
  width:280px;
  box-shadow:4px 0 24px rgba(0,0,0,.5);
}
body.drawer-mode-rail .app{padding-left:60px;transition:padding-left .25s cubic-bezier(.4,0,.2,1)}
body.drawer-mode-rail .burger-btn{display:none}
body.drawer-mode-rail .drawer-title,
body.drawer-mode-rail .drawer-tab-label,
body.drawer-mode-rail .drawer-footer{
  opacity:0;transition:opacity .15s;pointer-events:none;
}
body.drawer-mode-rail .drawer:hover .drawer-title,
body.drawer-mode-rail .drawer:hover .drawer-tab-label,
body.drawer-mode-rail .drawer:hover .drawer-footer,
body.drawer-mode-rail .drawer.expanded .drawer-title,
body.drawer-mode-rail .drawer.expanded .drawer-tab-label,
body.drawer-mode-rail .drawer.expanded .drawer-footer{
  opacity:1;pointer-events:auto;
}
body.drawer-mode-rail .drawer-tab{justify-content:center}
body.drawer-mode-rail .drawer:hover .drawer-tab,
body.drawer-mode-rail .drawer.expanded .drawer-tab{justify-content:flex-start}

.drawer::before{display:none}
.drawer-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:.85rem 1.1rem;
  border-bottom:1px solid var(--border);
  position:relative;z-index:1;gap:.4rem;
}
.drawer-title{
  font-size:13px;font-weight:500;
  color:var(--text);flex:1;
}
.drawer-pin{
  background:transparent;border:1px solid transparent;
  color:var(--muted);cursor:pointer;
  font-size:14px;line-height:1;padding:.3rem .45rem;
  border-radius:var(--radius-sm);
  transition:all .15s;
}
.drawer-pin:hover{color:var(--gold);border-color:var(--gold-dim);background:rgba(232,119,34,.08)}
.drawer-pin.active{color:var(--gold);border-color:var(--gold-dim);background:rgba(232,119,34,.12)}
.drawer-close{
  background:transparent;border:none;
  color:var(--muted);cursor:pointer;
  font-size:18px;line-height:1;padding:.2rem .4rem;
  border-radius:var(--radius-sm);
}
.drawer-close:hover{color:var(--gold);background:rgba(232,119,34,.1)}
body.drawer-mode-pinned .drawer-close,
body.drawer-mode-rail .drawer-close{display:none}
.drawer-nav{
  flex:1;overflow-y:auto;padding:.5rem .35rem;
  position:relative;z-index:1;
}
.drawer-nav::-webkit-scrollbar{width:4px}
.drawer-nav::-webkit-scrollbar-thumb{background:var(--border3);border-radius:2px}

.drawer-tab{
  display:flex;align-items:center;gap:.7rem;
  width:100%;text-align:left;
  font-size:1rem;font-weight:500;color:var(--muted);
  padding:.75rem .95rem;cursor:pointer;
  border:none;background:transparent;
  border-radius:var(--radius-sm);
  transition:color .15s,background .15s;
  margin-bottom:.18rem;
  white-space:nowrap;overflow:hidden;
}
.drawer-tab:hover{color:var(--text);background:rgba(255,255,255,.04)}
.drawer-tab.active{
  color:var(--gold);
  background:rgba(232,119,34,.12);
  box-shadow:inset 3px 0 0 var(--gold);
}
.drawer-tab-icon{
  width:1.5rem;text-align:center;font-size:1.15rem;flex-shrink:0;
}
.drawer-tab-label{flex:1;overflow:hidden;text-overflow:ellipsis}
.drawer-footer{
  padding:.7rem 1rem;
  border-top:1px solid var(--border2);
  font-family:'DM Mono',monospace;font-size:10px;
  color:var(--faint);letter-spacing:.06em;
  position:relative;z-index:1;
}

/* ── History popout modal ─────────────────────────────────────── */
.hist-popout-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.75);
  z-index:2000;
  display:flex;align-items:center;justify-content:center;
  padding:1.5rem;
  animation:fadeIn .2s ease-out;
}
.hist-popout-modal{
  background:var(--surface);
  border:1px solid var(--border2);
  border-radius:var(--radius);
  box-shadow:0 24px 64px rgba(0,0,0,.8);
  width:100%;max-width:1100px;
  max-height:calc(100vh - 3rem);
  display:flex;flex-direction:column;
  overflow:hidden;
  animation:slideUp .25s cubic-bezier(.4,0,.2,1);
}
@keyframes slideUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.hist-popout-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:.85rem 1.2rem;
  border-bottom:1px solid var(--border2);
  flex-shrink:0;gap:1rem;
}
.hist-popout-title{
  font-family:'DM Mono',monospace;font-size:12px;
  text-transform:uppercase;letter-spacing:.12em;
  color:var(--gold);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex:1;
}
.hist-popout-body{
  flex:1;overflow-y:auto;
  padding:1.2rem 1.5rem;
}
.hist-popout-body::-webkit-scrollbar{width:8px}
.hist-popout-body::-webkit-scrollbar-thumb{background:var(--border3);border-radius:4px}

.tab-btn{
  font-size:calc(var(--font-base)*.9);font-weight:500;color:var(--muted);
  padding:.45rem .9rem;cursor:pointer;border:none;background:none;
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;
  transition:color .15s,background .15s;white-space:nowrap;position:relative;
}
.tab-btn:hover{color:var(--text);background:rgba(255,255,255,.04)}
.tab-btn.active{
  color:var(--gold);
  background:rgba(232,119,34,.1);
  border-bottom:2px solid var(--gold);
  box-shadow:0 0 12px rgba(232,119,34,.1);
}
.top-actions{margin-left:auto;position:relative;z-index:1}
.icon-btn{
  background:rgba(255,255,255,.05);
  border:1px solid var(--border2);border-radius:var(--radius-sm);
  color:var(--muted);font-size:12px;padding:.32rem .65rem;cursor:pointer;
  transition:all .15s;
}
.icon-btn:hover{border-color:var(--gold-dim);color:var(--gold);background:rgba(232,119,34,.08)}

/* ── Content & tabs ────────────────────────────────────────────────────── */
.content{flex:1;overflow:hidden}
.tab-panel{display:none;height:calc(100vh - 52px);overflow-y:auto;padding:1.6rem 2rem}
.tab-panel.active{display:block;animation:fadeInUp .22s ease-out}
.tab-panel::-webkit-scrollbar{width:5px}
.tab-panel::-webkit-scrollbar-track{background:var(--bg)}
.tab-panel::-webkit-scrollbar-thumb{background:var(--border3);border-radius:3px}
.tab-panel::-webkit-scrollbar-thumb:hover{background:var(--gold-dim)}

/* ── Page headers ──────────────────────────────────────────────────────── */
.page-eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.25rem;font-weight:500}
.page-title{font-size:1.65rem;font-weight:600;color:var(--text);letter-spacing:-.02em;line-height:1.2}
.page-sub{font-size:calc(var(--font-base)*.95);color:var(--muted);margin-top:.3rem;margin-bottom:1.35rem}
.sec-hdr{
  font-size:13px;font-weight:500;
  color:var(--text);
  margin-bottom:.7rem;padding-bottom:.45rem;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
}

/* ── Cards — flat surface, no gradient, no transform-on-hover ─────────── */
.card{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:.85rem 1.05rem;
  box-shadow:none;
  transition:border-color .15s ease,background .15s ease;
}
.card:hover{border-color:var(--border2);background:var(--surface3)}

/* ── Badges — flat tinted backgrounds, sentence-case sans-serif ────────── */
.badge{display:inline-flex;align-items:center;padding:.22rem .6rem;border-radius:4px;font-size:11px;font-weight:500;letter-spacing:.02em;border:none}
.bw{background:rgba(129,182,76,.16);color:#A5D470}
.bl{background:rgba(250,65,45,.16);color:#FF8B7A}
.bd{background:rgba(158,155,150,.18);color:#C8C5C0}
.bn{background:var(--surface3);color:var(--muted);border:1px solid var(--border)}
.br{background:rgba(129,182,76,.14);color:#9DCB66}
.bx{background:rgba(250,65,45,.14);color:#FF8B7A}

/* ── Buttons — flat with subtle border, no glow shadows ──────────────── */
.btn-primary{
  background:var(--gold);
  color:#FFFFFF;border:none;border-radius:var(--radius-sm);
  font-size:calc(var(--font-base)*.93);font-weight:500;
  padding:.5rem 1.1rem;cursor:pointer;
  box-shadow:none;
  transition:background .15s, transform .08s;letter-spacing:0;
}
.btn-primary:hover{background:var(--gold-bright);box-shadow:none}
.btn-primary:active{transform:scale(.98);box-shadow:none}
.btn-secondary{
  background:transparent;
  color:var(--text);
  border:1px solid var(--border2);
  border-radius:var(--radius-sm);
  font-size:calc(var(--font-base)*.93);
  padding:.5rem 1.05rem;cursor:pointer;
  transition:all .15s;
}
.btn-secondary:hover{color:var(--text);border-color:var(--muted);background:rgba(255,255,255,.04)}

/* ── Grade pill ────────────────────────────────────────────────────────── */
.grade-pill{
  background:rgba(55,50,45,.8);border:1px solid var(--border3);
  border-radius:20px;font-family:'DM Mono',monospace;
  font-size:11px;padding:.18rem .6rem;color:var(--muted);
}

/* ── Input card / forms ────────────────────────────────────────────────── */
.input-card{
  background:var(--surface2);border:1px solid var(--border2);
  border-radius:var(--radius-lg);padding:1rem 1.2rem;
  box-shadow:var(--shadow-xs);
}
.inp-lbl{font-family:'DM Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);display:block;margin-bottom:.5rem}
.settings-input{
  background:var(--surface3);border:1px solid var(--border2);border-radius:var(--radius-sm);
  color:var(--text);font-size:13px;padding:.4rem .75rem;
  transition:border-color .15s;outline:none;width:100%;
}
.settings-input:focus{border-color:var(--gold-dim);box-shadow:0 0 0 2px rgba(232,119,34,.1)}
textarea.settings-input{min-height:80px;resize:vertical}

/* ── Coach loading ─────────────────────────────────────────────────────── */
.coach-load{text-align:center;padding:3rem 1rem}
.chess-loader{display:flex;gap:6px;justify-content:center;margin-bottom:1.2rem}
.chess-sq{
  width:14px;height:14px;border-radius:2px;
  background:var(--border3);
  animation:rotate .8s ease-in-out infinite;
  transform-origin:center;
}
.chess-sq:nth-child(1){animation-delay:0s;background:var(--gold)}
.chess-sq:nth-child(2){animation-delay:.1s;background:var(--chess-green)}
.chess-sq:nth-child(3){animation-delay:.2s;background:var(--blue)}
.chess-sq:nth-child(4){animation-delay:.3s;background:var(--gold)}
.load-msg{font-family:'DM Mono',monospace;font-size:12px;color:var(--muted);letter-spacing:.06em}
.load-sub{font-size:11px;color:var(--faint);margin-top:.35rem}
.err-box{
  background:rgba(196,85,85,.08);border:1px solid rgba(196,85,85,.3);
  border-radius:var(--radius);padding:.65rem 1rem;
  color:var(--red);font-size:13px;margin-top:1rem;
}

/* ── Report / coaching output ──────────────────────────────────────────── */
.report{animation:fadeIn .3s ease-out}
.result-banner{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--radius);padding:1rem 1.3rem;
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  margin-bottom:1.1rem;box-shadow:none;
  border-left:3px solid var(--gold);
}
.banner-left{flex:1}
.banner-meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.4rem}
.mmuted{color:var(--muted);font-size:13px}
.opp-link{color:var(--muted);font-size:13px;text-decoration:none;border-bottom:1px dotted var(--border2);transition:color .15s, border-color .15s}
.opp-link:hover{color:var(--gold);border-bottom-color:var(--gold)}
.banner-headline{font-style:italic;color:var(--text);font-size:calc(var(--font-base)*.95);line-height:1.45;opacity:.85}
.banner-score{text-align:right;flex-shrink:0}
.score-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.15rem;text-align:right;font-weight:500}
.score-big{font-size:2.6rem;font-weight:600;line-height:1;letter-spacing:-.04em}
.score-den{font-size:12px;color:var(--muted);text-align:right}

.details-toggle-wrap{margin:-.3rem 0 1rem 0;text-align:center}
.details-toggle-btn{
  background:transparent;border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:.45rem 1.1rem;
  font-size:12px;letter-spacing:0;
  color:var(--muted);cursor:pointer;transition:all .15s;
}
.details-toggle-btn:hover{color:var(--text);border-color:var(--border2);background:var(--surface2)}
.report-details{animation:fadeIn .25s ease-out}
.phase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-bottom:1.1rem}
.phase-box{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--radius);padding:.85rem 1rem;text-align:center;
  box-shadow:none;transition:border-color .15s;
}
.phase-box:hover{border-color:var(--border2)}
.ph-name{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.35rem;font-weight:500}
.ph-grade{font-size:1.55rem;font-weight:600;line-height:1.1;letter-spacing:-.02em}
.ph-na{color:var(--faint);font-weight:500;font-size:1.2rem;letter-spacing:.02em}
.phase-box.phase-na{opacity:.65;border-style:dashed}
.ph-sum{font-size:calc(var(--font-base)*.8);color:var(--muted);margin-top:.35rem;line-height:1.4}
.sec{margin-bottom:1.5rem}
.ct{font-size:11px;font-weight:500;letter-spacing:.02em;margin-bottom:.4rem;padding:.2rem .55rem;border-radius:4px;display:inline-block}
.ct-g{color:#A5D470;background:rgba(129,182,76,.14)}
.ct-b{color:#FF8B7A;background:rgba(250,65,45,.14)}
.ct-p{color:#F0B66B;background:rgba(229,160,70,.14)}
.ct-n{color:#7BB8E5;background:rgba(86,161,229,.14)}
.ct-k{color:#FFB07A;background:rgba(232,119,34,.14)}
.cmv{font-size:1.05rem;font-weight:500;color:var(--gold);font-family:var(--font-mono);margin-bottom:.35rem;letter-spacing:0}
.cbody{font-size:calc(var(--font-base)*.92);color:var(--text);line-height:1.55;opacity:.85}
.correct-line{margin-top:.65rem;padding:.6rem .85rem;background:rgba(129,182,76,.07);border-left:2px solid var(--chess-green);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.correct-mv{font-family:var(--font-mono);font-size:12px;color:var(--chess-green);margin-bottom:.25rem;font-weight:500}
.correct-plan{font-size:calc(var(--font-base)*.88);color:var(--muted)}

/* ── Patterns / tags ───────────────────────────────────────────────────── */
.patterns-wrap{display:flex;flex-wrap:wrap;gap:.4rem}
.ptag{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.25rem .7rem;border-radius:20px;
  border:1px solid var(--border3);
  font-size:calc(var(--font-base)*.82);color:var(--muted);
  cursor:default;transition:all .15s;
}
.ptag:hover{border-color:var(--gold-dim);color:var(--gold);background:rgba(232,119,34,.06)}
.ptag.rec{border-color:rgba(196,85,85,.35);color:#e88080;background:rgba(196,85,85,.06)}
/* v25.6 Phase 1 — severity tints for theme tags. Apply ON TOP of .rec so a
   recurring blunder is still red (which the .rec rule also produces — these
   reinforce). For non-recurring themes, severity provides the colour signal. */
.ptag.ptag-sev-blunder{border-color:rgba(196,85,85,.40);color:#e88080;background:rgba(196,85,85,.07)}
.ptag.ptag-sev-mistake{border-color:rgba(201,168,76,.40);color:var(--gold);background:rgba(201,168,76,.06)}
.ptag-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}

/* ── Error log box ─────────────────────────────────────────────────────── */
.errlog-box{
  background:var(--surface2);border:1px solid var(--border2);
  border-radius:var(--radius);padding:.75rem 1rem;
  font-family:'DM Mono',monospace;font-size:12px;color:var(--muted);line-height:1.7;
  border-left:3px solid var(--red);
}

/* ── Priority items ────────────────────────────────────────────────────── */
.priority{display:flex;gap:.75rem;margin-bottom:.75rem;align-items:flex-start}
.pri-num{
  font-family:'DM Mono',monospace;font-size:11px;
  background:rgba(232,119,34,.15);border:1px solid rgba(232,119,34,.3);
  border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  color:var(--gold);flex-shrink:0;margin-top:1px;font-weight:600;
}
.pri-topic{font-size:calc(var(--font-base)*.92);font-weight:600;color:var(--text);margin-bottom:.15rem}
.pri-reason{font-size:calc(var(--font-base)*.85);color:var(--muted);line-height:1.4}
.pri-res{font-family:'DM Mono',monospace;font-size:11px;color:var(--chess-green);margin-top:.2rem}

/* ── Coach verdict ─────────────────────────────────────────────────────── */
.verdict-box{
  background:linear-gradient(135deg,rgba(232,119,34,.08),rgba(232,119,34,.03));
  border:1px solid rgba(232,119,34,.2);
  border-radius:var(--radius-lg);padding:1rem 1.3rem;
  font-style:italic;color:var(--muted);font-size:calc(var(--font-base)*.95);line-height:1.6;
  border-left:3px solid var(--gold);
  box-shadow:var(--shadow-gold);
}

/* ── Cheat panel ───────────────────────────────────────────────────────── */
.cheat-panel{
  background:rgba(232,119,34,.06);
  border:1px solid rgba(232,119,34,.2);border-radius:var(--radius-lg);
  padding:.85rem 1.1rem;margin-top:1rem;
}
.cheat-title{font-family:'DM Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--blue);margin-bottom:.6rem}

/* ── History cards ─────────────────────────────────────────────────────── */
.hcard{
  background:var(--grad-card);border:1px solid var(--border2);
  border-radius:var(--radius-lg);padding:.85rem 1.1rem;margin-bottom:.5rem;
  cursor:pointer;transition:all .18s;
  box-shadow:var(--shadow-xs);
}
.hcard:hover{border-color:var(--border3);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.hcard.expanded{border-color:rgba(232,119,34,.25);box-shadow:var(--shadow-gold)}
.hcard-meta{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;margin-bottom:.25rem}
.hcard-date{font-family:'DM Mono',monospace;font-size:11px;color:var(--faint)}
.hcard-opp{font-weight:600;font-size:calc(var(--font-base)*.95);color:var(--text)}
.hcard-opening{font-size:calc(var(--font-base)*.87);color:var(--muted)}
.hcard-grades{font-size:calc(var(--font-base)*.82);color:var(--faint);margin-top:.2rem}
.hcard-headline{font-style:italic;font-size:calc(var(--font-base)*.9);color:var(--muted);margin-top:.2rem;line-height:1.4}
.hcard-patterns{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.5rem}
.hbody{display:none;margin-top:.85rem;padding-top:.85rem;border-top:1px solid var(--border)}

/* ── Error log ─────────────────────────────────────────────────────────── */
.el-row{
  background:var(--grad-card);border:1px solid var(--border2);
  border-radius:var(--radius);padding:.65rem .9rem;margin-bottom:.4rem;
  display:grid;grid-template-columns:100px 1fr 1fr 80px;
  gap:.5rem;align-items:start;font-size:calc(var(--font-base)*.87);
  transition:all .15s;
}
.el-row:hover{border-color:var(--border3);transform:translateX(2px)}
.el-d{font-family:'DM Mono',monospace;font-size:10px;color:var(--faint)}
.el-op{font-weight:500;color:var(--text)}
.el-played{color:var(--red)}
.el-correct{color:var(--chess-green)}
.el-why{color:var(--muted)}
.el-pat{font-family:'DM Mono',monospace;font-size:10px;padding:.15rem .45rem;border-radius:12px;background:rgba(232,119,34,.1);border:1px solid rgba(232,119,34,.2);color:var(--gold)}

/* ── Games table ───────────────────────────────────────────────────────── */
.gtbl{width:100%;border-collapse:collapse;font-size:calc(var(--font-base)*.88)}
.gtbl thead th{font-family:'DM Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);padding:.55rem .5rem;border-bottom:1px solid var(--border2);text-align:left}
.gtbl tbody tr{
  border-bottom:1px solid var(--border);cursor:pointer;
  transition:background .12s,transform .12s;
}
.gtbl tbody tr:hover{background:rgba(255,255,255,.025);transform:translateX(1px)}
.gtbl td{padding:.55rem .5rem;vertical-align:middle}
.tmuted{color:var(--muted)}
.topen{color:var(--text);font-weight:500}
.tr{display:inline-flex;align-items:center;padding:.18rem .6rem;border-radius:20px;font-family:'DM Mono',monospace;font-size:11px;font-weight:600;border:1px solid transparent}
.trw{background:var(--grad-win);border-color:rgba(74,156,109,.4);color:#7de8b0;box-shadow:0 0 6px rgba(74,156,109,.12)}
.trl{background:var(--grad-loss);border-color:rgba(196,85,85,.4);color:#e88080;box-shadow:0 0 6px rgba(196,85,85,.12)}
.trd{background:var(--grad-draw);border-color:rgba(90,143,199,.4);color:#8abde8;box-shadow:0 0 6px rgba(90,143,199,.08)}
.tc-btn{
  font-size:11px;padding:.25rem .7rem;border-radius:20px;cursor:pointer;
  border:1px solid var(--border3);background:transparent;color:var(--muted);
  white-space:nowrap;transition:all .15s;
}
.tc-btn:hover{border-color:var(--gold-dim);color:var(--gold);background:rgba(232,119,34,.06)}

/* ── Training plan ─────────────────────────────────────────────────────── */
.tp-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1rem;flex-wrap:wrap;gap:.5rem}
.tp-day-badge{
  background:var(--surface2);border:1px solid var(--border2);
  border-radius:var(--radius);padding:.35rem .85rem;
  font-family:'DM Mono',monospace;font-size:11px;color:var(--muted);white-space:nowrap;
}
.tp-task{display:flex;gap:.75rem;padding:.65rem .5rem;border-bottom:1px solid var(--border);align-items:flex-start;transition:background .12s}
.tp-task:hover{background:rgba(255,255,255,.02)}
.tp-task.critical{background:rgba(196,85,85,.04);border-bottom-color:rgba(196,85,85,.1)}
.tp-task.critical .tp-task-title{color:var(--red)}
.tp-check{
  width:20px;height:20px;border-radius:5px;border:2px solid var(--border3);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;margin-top:1px;
  font-size:11px;color:transparent;transition:all .18s;
}
.tp-check:hover{border-color:var(--gold);background:rgba(232,119,34,.06)}
.tp-check.done{background:var(--chess-green);border-color:var(--chess-green);color:#fff;box-shadow:0 0 8px rgba(92,158,74,.3)}
.tp-task-title{font-size:calc(var(--font-base)*.92);font-weight:500;color:var(--text)}
.tp-task-detail{font-size:calc(var(--font-base)*.82);color:var(--muted);margin-top:.18rem;line-height:1.45}
.tp-task-body{flex:1}
.tp-error-item{display:flex;gap:.65rem;padding:.5rem 0;border-bottom:1px solid var(--border);align-items:center}
.tp-error-count{font-family:'DM Mono',monospace;font-size:1.1rem;font-weight:700;color:var(--red);min-width:2.5rem}
.tp-error-name{font-size:calc(var(--font-base)*.9);color:var(--text);font-weight:500}
.tp-error-action{font-size:calc(var(--font-base)*.8);color:var(--muted)}
.critical-label{
  font-family:'DM Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--red);border:1px solid rgba(196,85,85,.35);background:rgba(196,85,85,.1);
  border-radius:4px;padding:.1rem .4rem;margin-left:.4rem;
  animation:pulseCritical 2s ease-in-out infinite;
}

/* ── Vault cards ───────────────────────────────────────────────────────── */
.vault-card{
  background:var(--grad-card);border:1px solid var(--border2);
  border-radius:var(--radius-lg);padding:1rem 1.1rem;
  box-shadow:var(--shadow-sm);transition:all .18s;
}
.vault-card:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);border-color:var(--border3)}
.vault-front,.vault-back{display:flex;flex-direction:column;gap:.5rem}
.vault-position{font-family:'DM Mono',monospace;font-size:12px;color:var(--muted);line-height:1.5}
.vault-move{font-family:'DM Mono',monospace;font-size:1.2rem;font-weight:700;color:var(--gold)}
.vault-correct{font-family:'DM Mono',monospace;font-size:1.2rem;font-weight:700;color:var(--chess-green)}
.vault-explain{font-size:calc(var(--font-base)*.87);color:var(--muted);line-height:1.45}
.vault-meta{font-family:'DM Mono',monospace;font-size:10px;color:var(--faint)}
.vault-grade-btn{
  padding:.4rem 1rem;border-radius:var(--radius);font-size:12px;
  font-weight:600;cursor:pointer;border:none;transition:all .15s;
}
.vault-pass{background:rgba(92,158,74,.15);color:var(--chess-green);border:1px solid rgba(92,158,74,.3)}
.vault-pass:hover{background:rgba(92,158,74,.25);transform:scale(1.02)}
.vault-fail{background:rgba(196,85,85,.12);color:var(--red);border:1px solid rgba(196,85,85,.3)}
.vault-fail:hover{background:rgba(196,85,85,.22);transform:scale(1.02)}

/* ── Chart grid ────────────────────────────────────────────────────────── */
.chart-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;margin-bottom:.85rem}
.chart-grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.85rem;margin-bottom:.85rem}
.chart-grid-1{margin-bottom:.85rem}
/* Wider mode: rating chart spans 2 cols, side widget spans 1 col */
.chart-grid-rt{display:grid;grid-template-columns:2fr 1fr;gap:.85rem;margin-bottom:.85rem}
@media (max-width:980px){
  .chart-grid-rt{grid-template-columns:1fr}
}
.chart-card{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--radius);padding:1rem 1.1rem;
  box-shadow:none;
}
/* When a chart-card sits inside a 3-col tile grid, treat it as compact:
   smaller height, slightly tighter padding, but BIGGER label text (this is
   what user asked for — denser layout with bigger numbers). */
.chart-grid-3 .chart-card{padding:1.1rem 1.2rem}
.chart-grid-3 .chart-card .chart-card-title{font-size:13px !important;margin-bottom:.55rem}
.chart-grid-3 .chart-card canvas{max-height:180px}
.chart-card-title{
  font-size:13px;font-weight:500;
  color:var(--text);
  margin-bottom:.75rem;display:flex;align-items:center;justify-content:space-between;
}
.chart-card canvas{border-radius:var(--radius-sm)}
.chart-empty{color:var(--muted);font-size:12px;font-style:italic;padding:.4rem 0}

/* ── Summary cards — flat dark surface, compact tile sizing for density ─ */
.summary-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.4rem;margin-bottom:.65rem}
.sum-card{
  background:var(--surface2);
  border:1px solid var(--border);border-radius:var(--radius);
  padding:.65rem .85rem;box-shadow:none;transition:border-color .15s, background .15s;
}
.sum-card:hover{border-color:var(--border2);background:var(--surface3)}
.sum-label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem;font-weight:500}
.sum-val{font-size:1.5rem;font-weight:600;color:var(--text);line-height:1.1;letter-spacing:-.02em}
.sum-sub{font-size:calc(var(--font-base)*.83);color:var(--muted);margin-top:.25rem}
.sum-win{color:var(--chess-green)}.sum-loss{color:var(--red)}.sum-draw{color:var(--blue)}
.sum-gold{color:var(--gold)}
.compliance-card{grid-column:span 2}

/* ── Filter bar ────────────────────────────────────────────────────────── */
.filter-bar{
  background:var(--surface2);border:1px solid var(--border2);
  border-radius:var(--radius-lg);padding:.5rem 1rem;
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  margin-bottom:.95rem;box-shadow:var(--shadow-xs);
}
.filter-label{font-family:'DM Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:.04em}
.filter-sep{color:var(--border3)}
.filter-count{font-family:'DM Mono',monospace;font-size:11px;color:var(--muted);margin-left:auto}
.filter-bar select{
  background:var(--surface3);border:1px solid var(--border2);
  border-radius:var(--radius-sm);color:var(--text);font-size:12px;
  padding:.28rem .65rem;cursor:pointer;outline:none;transition:border-color .15s;
  font-family:'DM Mono',monospace;
}
.filter-bar select:focus{border-color:var(--gold-dim)}

/* ── Endgame grid ──────────────────────────────────────────────────────── */
.endgame-grid-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}

/* ── Positional training ───────────────────────────────────────────────── */
.pos-input-row{display:flex;align-items:flex-end;gap:.6rem;flex-wrap:wrap;margin-top:.6rem}

/* ── Help ──────────────────────────────────────────────────────────────── */
.help-q{padding:.65rem 1rem;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:.75rem;user-select:none;transition:background .12s}
.help-q:hover{background:rgba(255,255,255,.025)}

/* ── Settings ──────────────────────────────────────────────────────────── */
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.settings-section{
  background:var(--grad-card);border:1px solid var(--border2);
  border-radius:var(--radius-lg);padding:1rem 1.2rem;box-shadow:var(--shadow-xs);
}
.settings-section.full{grid-column:1/-1}
.settings-title{font-weight:600;font-size:calc(var(--font-base)*1.02);color:var(--text);margin-bottom:.3rem}
.settings-sub{font-size:calc(var(--font-base)*.85);color:var(--muted);margin-bottom:.65rem;line-height:1.45}

/* ── No-data state ─────────────────────────────────────────────────────── */
.no-data{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:3rem 1rem;color:var(--muted);text-align:center;gap:.75rem;
  font-size:calc(var(--font-base)*.95);
}

/* ── Thinking section ──────────────────────────────────────────────────── */
.thinking-section{margin-top:.75rem}
.thinking-toggle{
  background:transparent;border:1px solid var(--border3);
  border-radius:var(--radius-sm);color:var(--muted);font-size:12px;
  padding:.3rem .75rem;cursor:pointer;transition:all .15s;
}
.thinking-toggle:hover{border-color:var(--gold-dim);color:var(--gold);background:rgba(232,119,34,.06)}
.thinking-input{display:none;margin-top:.5rem;animation:fadeInUp .15s ease-out}
.thinking-result{margin-top:.5rem}

/* ── Moment cards ──────────────────────────────────────────────────────── */
.moment{
  display:flex;gap:.85rem;padding:.8rem 0;
  border-bottom:1px solid var(--border);align-items:flex-start;
}
.m-num{
  font-family:'DM Mono',monospace;font-size:13px;font-weight:700;
  color:var(--gold);min-width:2rem;padding-top:.1rem;
}
.m-pos{font-size:calc(var(--font-base)*.87);color:var(--muted);margin-bottom:.25rem}
.m-played{font-size:calc(var(--font-base)*.85);color:var(--red);font-family:'DM Mono',monospace}
.m-correct{font-size:calc(var(--font-base)*.85);color:var(--chess-green);font-family:'DM Mono',monospace}
.m-eval{font-size:calc(var(--font-base)*.8);color:var(--blue);font-family:'DM Mono',monospace;margin-top:.15rem}
.m-think{font-size:calc(var(--font-base)*.82);color:var(--amber);margin-top:.2rem}
.m-link{display:inline-block;margin-top:.4rem;font-size:11px;color:var(--blue);transition:color .12s}
.m-link:hover{color:var(--gold)}

/* ── Reset / util ──────────────────────────────────────────────────────── */
.reset-wrap{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--border)}
.btn-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem}
.char-count{font-family:'DM Mono',monospace;font-size:11px;color:var(--muted)}

/* ── Wizard ────────────────────────────────────────────────────────────── */
.wiz-box{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem;background:var(--bg)}
.wiz-step{background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius-xl);padding:2rem;max-width:500px;width:100%;box-shadow:var(--shadow-lg);animation:fadeInUp .3s ease-out}
.active.wiz-step{display:block}.wiz-step{display:none}
.wiz-logo{text-align:center;font-size:3rem;margin-bottom:.5rem;animation:float 3s ease-in-out infinite}
.wiz-title{font-size:1.5rem;font-weight:700;color:var(--text);text-align:center;margin-bottom:.25rem}
.wiz-sub{font-size:calc(var(--font-base)*.9);color:var(--muted);text-align:center;margin-bottom:1.25rem;line-height:1.5}
.wiz-label{font-size:calc(var(--font-base)*.88);color:var(--muted);display:block;margin-bottom:.35rem}
.wiz-input{width:100%;background:var(--surface3);border:1px solid var(--border2);border-radius:var(--radius);color:var(--text);font-size:13px;padding:.5rem .85rem;outline:none;transition:border-color .15s;margin-bottom:.85rem}
.wiz-input:focus{border-color:var(--gold-dim);box-shadow:0 0 0 2px rgba(232,119,34,.1)}
.wiz-hint{font-size:11px;color:var(--faint);margin-top:-.6rem;margin-bottom:.85rem}
.wiz-dots{display:flex;justify-content:center;gap:.4rem;margin-top:1rem}
.wiz-dot{width:7px;height:7px;border-radius:50%;background:var(--border3);transition:background .15s}
.wiz-dot.done{background:var(--chess-green)}
.wiz-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}
.wiz-prog{margin-top:.75rem;font-family:'DM Mono',monospace;font-size:11px;color:var(--muted)}
.wiz-status{font-size:12px;margin-top:.35rem}
.wiz-status.ok{color:var(--chess-green)}.wiz-status.err{color:var(--red)}

/* ── MPS goal section ──────────────────────────────────────────────────── */
#mps-goal-section{display:none}

/* ── Boot overlay ──────────────────────────────────────────────────────── */
#boot-overlay{background:linear-gradient(135deg,#0f0e0c,#161512)!important}
#boot-overlay img{animation:float 2.5s ease-in-out infinite}

/* ── TP phase banner ───────────────────────────────────────────────────── */
#tp-category-banner > div{
  box-shadow:var(--shadow-sm);
}

/* ── Opening tracker ───────────────────────────────────────────────────── */
.open-line{
  background:var(--grad-card);border:1px solid var(--border2);
  border-radius:var(--radius);padding:.55rem .85rem;margin-bottom:.35rem;
  display:flex;align-items:center;justify-content:space-between;
  transition:all .15s;
}
.open-line:hover{border-color:var(--border3);transform:translateX(2px)}

/* ── Textarea ──────────────────────────────────────────────────────────── */
textarea{
  background:var(--surface3);border:1px solid var(--border2);
  border-radius:var(--radius);color:var(--text);font-size:13px;
  padding:.55rem .8rem;outline:none;resize:vertical;
  transition:border-color .15s;width:100%;min-height:180px;
  font-family:'DM Mono',monospace;line-height:1.6;
}
textarea:focus{border-color:var(--gold-dim);box-shadow:0 0 0 2px rgba(232,119,34,.08)}

/* ── Scrollable sections ───────────────────────────────────────────────── */
.scroll-x{overflow-x:auto}
.scroll-x::-webkit-scrollbar{height:4px}
.scroll-x::-webkit-scrollbar-track{background:var(--bg)}
.scroll-x::-webkit-scrollbar-thumb{background:var(--border3);border-radius:2px}


/* ── Recent form dots ──────────────────────────────────────────────────── */
.form-dots{display:flex;flex-wrap:wrap;gap:4px;padding:.25rem 0}
.form-dot{width:26px;height:26px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;cursor:default;transition:transform .1s}
.form-dot:hover{transform:scale(1.15)}
.form-dot-latest{box-shadow:0 0 0 2px var(--gold); position:relative}
.form-dot-latest::after{content:'';position:absolute;top:-3px;right:-3px;width:6px;height:6px;background:var(--gold);border-radius:50%}
.form-dot.w{background:rgba(129,182,76,.18);color:#A5D470}
.form-dot.l{background:rgba(250,65,45,.18);color:#FF8B7A}
.form-dot.d{background:rgba(158,155,150,.18);color:#C8C5C0}
.form-legend{display:flex;gap:1rem;font-size:11px;color:var(--muted);margin-top:.35rem}
.fdot{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:3px;vertical-align:middle}

/* ── Filter bar selects — explicit dark bg ─────────────────────────────── */
.filter-bar select,.filter-bar select option{background:var(--surface2);color:var(--text)}
select{background:var(--surface2)!important;color:var(--text)!important}

/* ── History card — flat surface, subtle hover ─────────────────────────── */
.hist-card{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--radius);padding:.9rem 1.1rem;margin-bottom:.5rem;
  cursor:pointer;transition:border-color .15s, background .15s;border-left:3px solid transparent;
}
.hist-card:hover{border-color:var(--border2);background:var(--surface3)}
.hist-card.expanded{border-left-color:var(--gold);background:var(--surface3);border-color:var(--border2)}
.hist-top{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.3rem}
.hist-date{font-size:12px;color:var(--muted);white-space:nowrap;font-weight:500}
.hist-opp{font-weight:500;color:var(--text);font-size:calc(var(--font-base)*.95)}
.hist-opening{font-size:calc(var(--font-base)*.87);color:var(--muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hist-score{font-size:1.1rem;font-weight:600;margin-left:auto;flex-shrink:0}
.hist-grades{font-size:calc(var(--font-base)*.82);color:var(--faint);margin-top:.15rem}
.hist-headline{font-style:italic;font-size:calc(var(--font-base)*.88);color:var(--muted);margin-top:.25rem;line-height:1.45}
.hist-patterns{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.45rem}
.hist-body{display:none;margin-top:.85rem;padding-top:.85rem;border-top:1px solid var(--border);animation:fadeInUp .15s ease-out}
.hist-empty{color:var(--muted);font-style:italic;padding:2rem;text-align:center}

/* ── Coach loading — hidden by default ─────────────────────────────────── */
#coach-loading{display:none}

/* ── Dashboard header fix ──────────────────────────────────────────────── */
#dash-header{margin-bottom:.75rem}
#dash-header .page-title{display:inline}
#dash-status{font-size:12px;color:var(--muted);margin-top:.15rem}
.refresh-row{display:flex;align-items:center;gap:.75rem;margin-top:.4rem;flex-wrap:wrap}

/* ═══════════════════════════════════════════════════════════════════════
   v23 AESTHETIC OVERRIDES — chess.com-inspired flat, sentence-case look.
   Applied last so they win specificity battles against earlier rules.
   These selectors target the recurring "DM Mono caps eyebrow" pattern and
   replace it with plain sans-serif. Mono is preserved only where explicitly
   intentional (move notation cells, FEN strings, log timestamps).
   ═══════════════════════════════════════════════════════════════════════ */

/* All eyebrow/caps/label text in panels — use sans-serif, lighter weight,
   tighter tracking. Loses the typewriter feel. */
.chart-card-title,
.sec-hdr,
.page-eyebrow,
.score-label,
.ph-name,
.sum-label,
.ct,
.drawer-title,
.drawer-footer,
.help-section h3,
.settings-title,
.errlog-section .errlog-heading,
.training-section h3 {
  font-family:var(--font-sans) !important;
  letter-spacing:.06em;
  font-weight:500;
}

/* Bigger, bolder numeric stats — closer to chess.com presentation */
.score-big { font-size:3.4rem !important; font-weight:700 !important; letter-spacing:-.03em !important; }
.ph-grade  { font-size:1.9rem !important; font-weight:700 !important; letter-spacing:-.02em !important; }
.sum-val   { font-size:1.5rem !important; font-weight:700 !important; letter-spacing:-.02em !important; }
.hist-score{ font-size:1.35rem !important; font-weight:700 !important; letter-spacing:-.02em !important; font-family:var(--font-sans) !important; }

/* Page title slightly less imposing so it doesn't dominate the new compact tiles */
.page-title { font-size:1.75rem !important; font-weight:700 !important; letter-spacing:-.02em !important; }
.page-eyebrow { font-size:11px !important; letter-spacing:.08em !important; }
.sec-hdr { font-size:13px !important; }
.chart-card-title { font-size:13px !important; }
.sum-label { font-size:11px !important; margin-bottom:.3rem !important; }

/* Larger card padding for breathing room */
/* Tight compact tiles — chess.com-style density. Smaller min-width per card,
   tighter inter-card gap, padding scaled to value/label proportions. */
.sum-card { padding:.65rem .85rem !important; }
.phase-box { padding:.75rem .85rem !important; }
.chart-card { padding:.85rem 1rem !important; }
.result-banner { padding:1.25rem 1.5rem !important; }

/* Form dots a bit bigger and clearer */
.form-dot { width:30px !important; height:30px !important; font-size:13px !important; border-radius:6px !important; }

/* History card bigger */
.hist-card { padding:1.1rem 1.3rem !important; }
.hist-opp { font-size:1.02rem !important; }
.hist-headline { font-size:.95rem !important; }

/* Move notation, ECO codes, FEN, clock times — keep mono explicitly */
.cmv,
.correct-mv,
.errlog-box,
.m-num,
.pri-num,
code,
pre,
.pgn-input-wrap textarea {
  font-family:var(--font-mono) !important;
}
.cmv { font-size:1.25rem !important; font-weight:600 !important; }

/* Top bar tighter, no bold gold name — chess.com top is restrained */
.top-name { color:var(--text) !important; font-weight:600 !important; font-size:1.1rem !important; }
.top-sub { font-size:12px !important; }

/* Settings inputs / form fields — modernise */
input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
select,
textarea {
  font-family:var(--font-sans);
  font-size:14px;
}

/* Buttons that still try to be heavy — soften */
button { font-family:var(--font-sans) }
.btn-primary { font-size:14px !important; padding:.55rem 1.2rem !important; }
.btn-secondary { font-size:13px !important; }

/* Hover states should never lift cards visually in v23 */
.sum-card:hover, .phase-box:hover, .card:hover, .hist-card:hover, .chart-card:hover {
  transform:none !important;
}

/* Recent Games table — bigger cells */
#games-tbody tr td { padding:.7rem .6rem !important; font-size:13px !important; }

/* v25.3.1 — Global readability lift. Many small text bits in the app were
   hardcoded at 10-12px. Rather than refactor every one to rem, push the
   floor up. This selector targets common small-text use sites without
   touching code/monospace blocks where small density is intentional. */
.banner-meta, .banner-headline, .ph-name, .ph-sum,
.hist-date, .hist-opp, .hist-opening, .hist-score, .hist-grades,
.hist-headline, .hist-patterns, .ptag, .badge,
.score-label, .score-den,
.settings-sub, .settings-label, .inp-lbl,
.load-msg, .load-sub,
.report-action-btn, .btn-secondary, .btn-primary {
  font-size: max(.85em, 13px) !important;
}
.hist-headline { font-size: max(.95em, 14px) !important; }
.banner-headline { font-size: max(1em, 15px) !important; }
.ph-grade { font-size: max(1.6em, 28px) !important; }
.score-big { font-size: max(2.4em, 44px) !important; }

/* v25.3 Bundle B — Win% graph hover affordance. Circles enlarge slightly
   on hover so the user has a clear hit target without cluttering the chart
   with permanent dots. */
.winpct-svg circle:hover { fill:var(--gold) !important; opacity:0.6; }
.winpct-graph-header:hover > div:first-child { color:var(--text); }

/* ═══════════════════════════════════════════════════════════════════════════
   v25.4 — NOTIFICATIONS, TOASTS, MODALS, ANALYSIS STATE BADGES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Notification bell + badge in top bar ──────────────────────────────── */
.notif-bell { position: relative; }
.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--red, #c45555);
  color: #fff;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  border: 1.5px solid var(--bg);
  pointer-events: none;
  letter-spacing: 0;
}

/* ─── Notification panel (dropdown from bell) ───────────────────────────── */
.notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 340px;
  max-height: 500px;
  background: var(--surface2, var(--surface));
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  display: none;
  flex-direction: column;
  z-index: 9000;
  font-size: 13px;
}
.notif-panel.open { display: flex; }
.notif-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border);
}
.notif-panel-title {
  font-weight: 600;
  color: var(--text);
  font-size: 14px;
}
.notif-panel-action {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  padding: .2rem .4rem;
  border-radius: 3px;
}
.notif-panel-action:hover { color: var(--text); background: var(--surface); }
.rm-filter {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
  padding: .25rem .55rem;
  border-radius: 4px;
  transition: all .15s;
}
.rm-filter:hover { color: var(--text); border-color: var(--border3); }
.rm-filter.active { color: var(--text); background: var(--surface); border-color: var(--border2); }

/* v25.8 — Study markdown rendering. Keeps marked.js output legible against
   the dark theme without imposing heavy chrome. Body copy gets generous
   line-height; headings step down clearly; links use the brand blue. */
.study-md { color: var(--text); line-height: 1.65; font-size: calc(var(--font-base)*0.95); }
.study-md h1 { font-size: 1.4rem; margin: 1.2rem 0 .6rem; color: var(--text); border-bottom: 1px solid var(--border); padding-bottom: .3rem; }
.study-md h2 { font-size: 1.15rem; margin: 1.1rem 0 .5rem; color: var(--text); }
.study-md h3 { font-size: 1rem; margin: .9rem 0 .4rem; color: var(--text); }
.study-md p { margin: .5rem 0; }
.study-md ul, .study-md ol { margin: .5rem 0 .5rem 1.4rem; }
.study-md li { margin: .2rem 0; }
.study-md a { color: var(--blue); text-decoration: none; border-bottom: 1px dotted var(--blue); }
.study-md a:hover { border-bottom-style: solid; }
.study-md code { background: var(--surface); padding: .1rem .3rem; border-radius: 3px; font-family: monospace; font-size: 0.9em; color: var(--gold); }
.study-md pre { background: var(--surface); padding: .8rem; border-radius: 4px; overflow-x: auto; margin: .6rem 0; }
.study-md pre code { background: transparent; padding: 0; color: var(--text); }
.study-md blockquote { border-left: 3px solid var(--border2); padding-left: .8rem; margin: .6rem 0; color: var(--muted); }
.study-md strong { color: var(--text); font-weight: 600; }
.study-md hr { border: 0; border-top: 1px solid var(--border); margin: 1rem 0; }
.notif-panel-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  padding: .15rem .35rem;
  line-height: 1;
}
.notif-panel-close:hover { color: var(--text); }
.notif-list {
  flex: 1;
  overflow-y: auto;
  max-height: 380px;
}
.notif-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.notif-item {
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s;
  position: relative;
}
.notif-item:hover { background: var(--surface); }
.notif-item.unread::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
}
.notif-item.unread { padding-left: 1.4rem; }
.notif-title {
  font-weight: 600;
  color: var(--text);
  font-size: 13px;
  margin-bottom: .2rem;
}
.notif-msg {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  margin-bottom: .25rem;
}
.notif-time {
  color: var(--faint);
  font-size: 10px;
  font-family: var(--font-mono);
}
.notif-panel-footer {
  padding: .6rem 1rem;
  border-top: 1px solid var(--border);
  font-size: 11px;
}
.notif-mute-toggle {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--muted);
  cursor: pointer;
}
.notif-mute-toggle input { margin: 0; }

/* ─── Toast notification stack (bottom-right) ───────────────────────────── */
.toast-stack {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  flex-direction: column-reverse;
  gap: .6rem;
  z-index: 10000;
  pointer-events: none;
  max-width: 360px;
}
.toast {
  pointer-events: auto;
  background: var(--surface2, var(--surface));
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: 8px;
  padding: .75rem .9rem;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  cursor: pointer;
  transform: translateX(0);
  opacity: 1;
  transition: transform .3s ease-out, opacity .3s ease-out;
}
.toast.toast-enter {
  animation: toastEnter .3s ease-out;
}
.toast.toast-exit {
  transform: translateX(120%);
  opacity: 0;
}
@keyframes toastEnter {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
.toast-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(74,156,109,.18);
  color: var(--green);
  border-radius: 50%;
  margin-top: 1px;
}
.toast-body {
  flex: 1;
  min-width: 0;
}
.toast-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: .15rem;
}
.toast-msg {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.toast-close {
  background: none;
  border: none;
  color: var(--faint);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  width: 18px;
  height: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.toast-close:hover { color: var(--text); }
/* Toast colour variants by type */
.toast.toast-info { border-left-color: var(--blue); }
.toast.toast-info .toast-icon { background: rgba(110,135,190,.18); color: var(--blue); }
.toast.toast-warn { border-left-color: var(--amber); }
.toast.toast-warn .toast-icon { background: rgba(201,168,76,.18); color: var(--amber); }
.toast.toast-error { border-left-color: var(--red); }
.toast.toast-error .toast-icon { background: rgba(196,85,85,.18); color: var(--red); }

/* ─── Generic modal (re-enrich confirmation, etc) ──────────────────────── */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal-card {
  background: var(--surface2, var(--surface));
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.5);
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.modal-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.modal-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  padding: .15rem .4rem;
  line-height: 1;
}
.modal-close:hover { color: var(--text); }
.modal-body {
  padding: 1.1rem 1.25rem;
  overflow-y: auto;
  font-size: 13px;
  color: var(--text);
}
.modal-body code {
  font-family: var(--font-mono);
  background: var(--surface);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
  color: var(--gold);
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  padding: .9rem 1.25rem;
  border-top: 1px solid var(--border);
}
/* v25.5.1 — .modal-actions sits inside .modal-body for short confirm
   dialogs that don't need a separate footer bar. Three buttons typical
   (cancel / secondary / primary); they wrap on narrow screens. */
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: 1.1rem;
  padding-top: .85rem;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
@media (max-width: 480px) {
  .modal-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .modal-actions .btn-primary,
  .modal-actions .btn-secondary {
    width: 100%;
  }
}

/* ─── Analysis state badges on dashboard rows ───────────────────────────── */
.state-badge {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  font-size: 10px;
  padding: .12rem .4rem;
  border-radius: 3px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-left: .25rem;
  white-space: nowrap;
}
.state-badge.state-pending {
  background: rgba(201,168,76,.15);
  color: var(--amber);
  border: 1px solid rgba(201,168,76,.25);
}
.state-badge.state-running {
  background: rgba(110,135,190,.15);
  color: var(--blue);
  border: 1px solid rgba(110,135,190,.25);
}
.state-badge.state-done-engine {
  background: rgba(74,156,109,.15);
  color: var(--green);
  border: 1px solid rgba(74,156,109,.25);
}
.state-badge.state-done-lichess {
  background: rgba(74,156,109,.2);
  color: var(--green);
  border: 1px solid rgba(74,156,109,.35);
}
.state-badge.state-legacy {
  background: rgba(140,140,140,.12);
  color: var(--muted);
  border: 1px solid var(--border);
}
.state-badge.state-stale {
  background: rgba(201,168,76,.1);
  color: var(--amber);
  border: 1px dashed rgba(201,168,76,.3);
}

/* Subtle pulsing animation for running state */
@keyframes statePulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.state-badge.state-running,
.state-badge.state-pending {
  animation: statePulse 1.8s ease-in-out infinite;
}

/* v25.5 — inline SVG icons inside Engine column badges. Sized to sit
   naturally beside the badge text without forcing the badge taller. */
.src-icon {
  width: 12px;
  height: 12px;
  vertical-align: -1px;
  margin-right: 2px;
  fill: currentColor;
  flex-shrink: 0;
}
.state-badge.state-done-lichess .src-icon {
  /* The Lichess knight glyph reads better with a tiny bit more weight */
  width: 11px;
  height: 11px;
}

/* Make sure the notif wrap doesn't expand the topbar */
.notif-wrap { display: inline-flex; align-items: center; }


/* ═════════════════════════════════════════════════════════════════════════════
   v25.5.1 — Coaching-on-VPS UI additions
   ═════════════════════════════════════════════════════════════════════════════ */

/* Sticky bulk-progress banner.
   Sits at the top of #app, above the top-bar. Shown when N>0 games are
   in-flight in either game_evals (pending/wasm_in_progress) or
   coaching_queue (queued/processing/retrying). renderBulkProgressBanner()
   sets display:flex or display:none. */
#bulk-progress-banner {
  position: sticky;
  top: 0;
  z-index: 50;
  display: none;             /* JS toggles to flex when work in-flight */
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1rem;
  background: linear-gradient(90deg,
              rgba(232,119,34,0.18) 0%,
              rgba(232,119,34,0.10) 100%);
  border-bottom: 1px solid rgba(232,119,34,0.35);
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  color: var(--text);
  letter-spacing: 0.02em;
}
#bulk-progress-banner .bpb-spinner {
  display: inline-block;
  color: var(--gold);
  font-size: 16px;
  animation: bpb-spin 2.2s linear infinite;
  flex-shrink: 0;
}
#bulk-progress-banner .bpb-msg {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@keyframes bpb-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* On narrow mobile, soften the contrast and allow wrapping to two lines */
@media (max-width: 600px) {
  #bulk-progress-banner {
    font-size: 12px;
    padding: 0.45rem 0.75rem;
  }
  #bulk-progress-banner .bpb-msg {
    white-space: normal;
  }
}


/* Coach-state buttons in the dashboard Analyse column (renderGamesTable
   inlines colours, but we add hover/focus polish here so the in-flight
   and failed states feel deliberate rather than malformed.) */
.tc-btn[title*="VPS is processing"] {
  /* In-flight (🔄 Coaching/Retrying/Queued) — non-clickable */
  cursor: default !important;
  opacity: 0.85;
}
.tc-btn[title*="VPS is processing"]:hover {
  opacity: 1;
  background: rgba(232, 119, 34, 0.12);
}
.tc-btn[title^="Coaching failed"] {
  /* Failed coaching — clickable, takes user to Settings → Diagnostics */
  cursor: help;
}
.tc-btn[title^="Coaching failed"]:hover {
  background: rgba(196, 85, 85, 0.12);
}

/* Settings → Coaching Diagnostics section — minimal, sits alongside the
   existing engine-library section. Just enough chrome to make the retry
   button discoverable without competing with the rest of Settings. */
.coaching-diag-section {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border);
}
.coaching-diag-section .diag-status {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: var(--muted);
  margin: 0.4rem 0 0.75rem 0;
}
.coaching-diag-section .diag-status.has-failed {
  color: var(--red);
}

/* ═════════════════════════════════════════════════════════════════════════════
   v25.5.1.1 — History card stat tiles + top-row Lichess button
   ═════════════════════════════════════════════════════════════════════════════
   The history card top row now packs four elements on the right: Score tile,
   Accuracy tile, View-on-Lichess button, expand chevron. The grouping flex
   container keeps them visually unified and breaks cleanly on narrow screens.
*/
.hist-stats-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-left: auto;
  flex-shrink: 0;
  flex-wrap: wrap;
}
/* v25.5.1.4 — Stat tiles enlarged. The previous 64px min-width left huge
   gaps to the right of the opening name in roomy cards. Bumped to 92px
   minimum with bigger value font so the numbers read at a glance and the
   tiles act as visual anchors on the right side of the card. */
.hist-stat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 0.42rem 0.85rem;
  min-width: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
  flex-shrink: 0;
}
.hist-stat-label {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--muted);
  margin-bottom: 0.28rem;
}
.hist-stat-val {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--text);
  font-family: var(--font-sans);
  letter-spacing: -0.025em;
}
.hist-stat-unit {
  font-size: 0.62em;
  color: var(--muted);
  font-weight: 500;
  margin-left: 0.08em;
}
.hist-stat-tile.hist-stat-acc .hist-stat-val { color: var(--blue); }

/* v25.5.1.4 — Lichess link rebalanced. v25.5.1.3 made this a full-width
   horizontal rule spanning the gap, which the user (rightly) thought was
   visually too heavy. New layout: shrink the rule to a compact inline
   element that sits BEFORE the stat tiles, with white text on a subtle
   dashed underline. The stat tiles get the big real estate; the link is
   a quiet accent.

   Width: now flex: 0 1 auto (was 1 1 auto with min 60px) — the link is
   only as wide as its text content, freeing the rest of the row's free
   space to be absorbed by the flex margin-left:auto on .hist-stats-row.
   Effect: opening name on left → small whitespace → "View on Lichess"
   compact pill → small whitespace → big stat tiles on right.

   Text colour: white (--text) instead of muted, so it reads at a glance
   on the dark surface. */
.hist-lichess-rule {
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px dashed var(--border2);
  padding: 0.05rem 0.15rem 0.22rem 0.15rem;
  margin-left: 0.6rem;
  transition: color 0.15s, border-color 0.15s, transform 0.15s;
  cursor: pointer;
  white-space: nowrap;
  opacity: 0.78;
}
.hist-lichess-rule:hover,
.hist-lichess-rule:focus-visible {
  color: var(--blue);
  border-bottom-color: var(--blue);
  border-bottom-style: solid;
  opacity: 1;
  outline: none;
}
.hist-lichess-rule-text {
  display: inline-block;
  white-space: nowrap;
  transition: transform 0.15s, color 0.15s;
}
/* Spacer kept for the no-gameId case so the stats row still right-aligns */
.hist-lichess-rule-spacer {
  flex: 0 1 0;
  width: 0;
}

.hist-lichess-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.45rem 0.7rem;
  font-size: 12px;
  font-weight: 500;
  color: var(--blue);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  flex-shrink: 0;
  font-family: var(--font-sans);
  letter-spacing: 0.01em;
  align-self: stretch;
}
.hist-lichess-btn:hover {
  background: rgba(78, 154, 211, 0.10);
  border-color: rgba(78, 154, 211, 0.4);
  color: var(--text);
}
.hist-chevron {
  color: var(--muted);
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  transition: transform 0.2s;
  padding: 0 0.2rem;
  flex-shrink: 0;
}
.hist-card.expanded .hist-chevron { transform: rotate(180deg); }
@media (max-width: 720px) {
  .hist-stats-row { gap: 0.4rem; }
  .hist-stat-tile { min-width: 76px; padding: 0.34rem 0.6rem; }
  .hist-stat-val { font-size: 1.25rem; }
  .hist-lichess-btn { padding: 0.4rem 0.55rem; font-size: 11px; }
  /* Below this breakpoint the link text starts to crowd; hide it but keep
     the underline accent as a quiet separator. Card row is still clickable. */
  .hist-lichess-rule-text { display: none; }
  .hist-lichess-rule {
    padding: 0.05rem 0.15rem;
    margin-left: 0.4rem;
    border-bottom: none;
  }
}

/* ═════════════════════════════════════════════════════════════════════════════
   v25.5.3 — MPS per-format tabs + Recurring errors strip
   ═════════════════════════════════════════════════════════════════════════════ */

/* MPS format selector. Three pills (Rapid / Blitz / Bullet) sit above the
   radar; only one active at a time. Active pill fills with gold, inactive
   pills are quiet outlines that read as tabs without competing with the
   chart underneath. */
.mps-format-tabs {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.75rem 0 0.9rem 0;
  flex-wrap: wrap;
}
.mps-fmt-tab {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.35rem 0.95rem;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-sans);
  letter-spacing: 0.02em;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mps-fmt-tab:hover {
  background: rgba(232, 119, 34, 0.06);
  color: var(--text);
  border-color: rgba(232, 119, 34, 0.3);
}
.mps-fmt-tab.active {
  background: var(--gold);
  color: #1a1a1a;
  border-color: var(--gold);
}
.mps-fmt-tab.active:hover {
  background: var(--gold);
  color: #1a1a1a;
  filter: brightness(1.1);
}
.mps-fmt-meta {
  margin-left: 0.6rem;
  font-size: 11px;
  color: var(--muted);
  font-family: 'DM Mono', monospace;
  letter-spacing: 0.02em;
  font-style: italic;
}
@media (max-width: 600px) {
  .mps-format-tabs { gap: 0.35rem; }
  .mps-fmt-tab { padding: 0.3rem 0.7rem; font-size: 11px; }
  .mps-fmt-meta {
    margin-left: 0;
    margin-top: 0.35rem;
    width: 100%;
    flex-basis: 100%;
  }
}

/* Recurring errors strip — horizontal list of severity-tinted pills.
   Lives at the bottom of the MPS card; surfaces patterns that have come up
   2+ times in the last 15 coached games. Same data the Training Plan uses
   but visible on the dashboard so the user sees the most pressing issues
   on app open. */
.recur-strip-header {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.55rem;
  flex-wrap: wrap;
}
.recur-strip-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.recur-strip-sub {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}
.recur-strip-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.recur-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.32rem 0.8rem;
  font-size: 12px;
  color: var(--text);
  cursor: help;
  transition: background 0.15s, border-color 0.15s;
}
.recur-pill:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border2);
}
.recur-pill-count {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.recur-pill-text { line-height: 1.2; }
/* Severity tints: 3-4× warm (amber), 5+× hot (red). Inherits text colour
   into the count too so the tint flows through both halves. */
.recur-pill-warm {
  background: rgba(201, 168, 76, 0.08);
  border-color: rgba(201, 168, 76, 0.35);
}
.recur-pill-warm .recur-pill-count { color: var(--gold); }
.recur-pill-hot {
  background: rgba(196, 85, 85, 0.10);
  border-color: rgba(196, 85, 85, 0.40);
  color: var(--red);
}
.recur-pill-hot .recur-pill-count { color: var(--red); }

/* ═══════════════════════════════════════════════════════════════════════
   v26.0 Stage 1 — Mobile drawer fix (append).
   On phones, the desktop "pinned" (280px) and "rail" (60px) drawer modes
   eat the screen and hide the burger, leaving content shoved right and
   unreachable (the drawer covers ~70% of a 400px viewport with no way to
   close it). Below 768px, force overlay mode regardless of the body's
   drawer-mode class: drawer slides off-screen, burger returns, .app uses
   full width. The runtime .drawer.open / .drawer-overlay.open classes that
   toggleDrawer() adds still work, so tapping the burger opens it as an
   overlay and the dim backdrop dismisses it.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body.drawer-mode-pinned .app,
  body.drawer-mode-rail .app {
    padding-left: 0 !important;
  }
  body.drawer-mode-pinned .drawer,
  body.drawer-mode-rail .drawer,
  .drawer {
    transform: translateX(-100%);
    width: 280px;
    transition: transform .25s cubic-bezier(.4,0,.2,1);
  }
  body.drawer-mode-pinned .drawer.open,
  body.drawer-mode-rail .drawer.open,
  .drawer.open {
    transform: translateX(0);
  }
  body.drawer-mode-pinned .burger-btn,
  body.drawer-mode-rail .burger-btn {
    display: inline-flex !important;
  }
  body.drawer-mode-pinned .drawer-overlay,
  body.drawer-mode-rail .drawer-overlay {
    display: block;
  }
  body.drawer-mode-rail .drawer-title,
  body.drawer-mode-rail .drawer-tab-label,
  body.drawer-mode-rail .drawer-footer {
    opacity: 1;
  }
  body.drawer-mode-pinned .drawer-close,
  body.drawer-mode-rail .drawer-close {
    display: inline-flex;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   v25.21.22 — MOBILE-NATIVE LAYER (≤768px)   [supersedes v25.21.21]
   Bottom tab bar is the primary nav. The desktop 3-mode drawer (rail/pinned/
   hidden) is FORCED into an off-canvas overlay on phones regardless of the
   saved drawer-mode class — this is what was shoving content sideways. The
   "More" button calls openMobileDrawer() (app.js) so it always opens.
   Desktop (>768px) is untouched: .mobile-nav is display:none above 768.
   ────────────────────────────────────────────────────────────────────────── */

.mobile-nav{display:none}

@media (max-width:768px){

  /* ── Kill horizontal overflow at the root ─────────────────────── */
  html,body{max-width:100%;overflow-x:hidden}

  /* ── Document-scroll model (desktop uses inner .tab-panel scroll; on
        mobile we let the page scroll so the sticky header + fixed bottom
        bar behave natively). Must override .app height/overflow. ─────── */
  .app{
    height:auto !important;min-height:100dvh;overflow:visible !important;
    width:100%;max-width:100vw;padding-left:0 !important;
  }

  /* ── Force the drawer to overlay mode in EVERY saved mode ──────── */
  body.drawer-mode-pinned .app,
  body.drawer-mode-rail .app,
  body.drawer-mode-hidden .app{padding-left:0 !important}
  body.drawer-mode-pinned .drawer,
  body.drawer-mode-rail .drawer,
  body.drawer-mode-hidden .drawer,
  .drawer{
    transform:translateX(-100%) !important;width:280px !important;max-width:85vw;
    z-index:1601;transition:transform .25s cubic-bezier(.4,0,.2,1) !important;
  }
  body.drawer-mode-pinned .drawer.open,
  body.drawer-mode-rail .drawer.open,
  body.drawer-mode-hidden .drawer.open,
  .drawer.open{transform:translateX(0) !important}
  .drawer-overlay{z-index:1600}
  body.drawer-mode-pinned .drawer-overlay,
  body.drawer-mode-rail .drawer-overlay,
  body.drawer-mode-hidden .drawer-overlay{display:block}
  /* rail mode hides labels on desktop — force them back for the overlay */
  body.drawer-mode-rail .drawer-title,
  body.drawer-mode-rail .drawer-tab-label,
  body.drawer-mode-rail .drawer-footer{opacity:1 !important;pointer-events:auto !important}
  body.drawer-mode-rail .drawer-tab{justify-content:flex-start !important}

  /* ── Compact sticky header ────────────────────────────────────── */
  .top-bar{
    padding:calc(env(safe-area-inset-top) + .35rem) .85rem .35rem;gap:.55rem;
    position:sticky;top:0;z-index:30;
    background:color-mix(in srgb, var(--bg2) 90%, transparent);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  }
  /* Burger is replaced by the "More" tab — hide it in ALL drawer modes
     (specificity must beat body.drawer-mode-* .burger-btn = 0,2,1) */
  body .top-bar .burger-btn,
  body.drawer-mode-pinned .burger-btn,
  body.drawer-mode-rail .burger-btn,
  body.drawer-mode-hidden .burger-btn{display:none !important}
  .top-logo img,.top-bar img[alt="Yorkshire Gambit"]{height:30px !important;width:30px !important}
  .top-name{font-size:.95rem}
  .top-sub{display:none}
  .current-tab-label{display:none}
  .top-actions{margin-left:auto;display:flex;gap:.3rem;flex-wrap:nowrap}
  .top-actions .icon-btn{width:36px;height:36px;flex:none}
  .top-actions .icon-btn[onclick*="signOut"]{font-size:0 !important;width:36px}
  .top-actions .icon-btn[onclick*="signOut"]::before{content:"⎋";font-size:15px}

  /* ── Content area: full-bleed, room for the bottom bar ────────── */
  .tab-panel{
    height:auto !important;min-height:0;overflow:visible;
    max-width:100vw;overflow-x:hidden;
    padding:.9rem .8rem calc(env(safe-area-inset-bottom) + 84px) !important;
  }
  /* Wide elements must never widen the page — clamp + internal scroll */
  .tab-panel table{display:block;width:max-content;max-width:100%;overflow-x:auto;white-space:nowrap}
  .tab-panel canvas{max-width:100% !important}
  .tab-panel img,.tab-panel svg{max-width:100%;height:auto}

  /* ── Dashboard cards: clean 2-up grid, bigger numbers ─────────── */
  .summary-grid{grid-template-columns:1fr 1fr;gap:.6rem}
  .sum-card{padding:.85rem .9rem !important;border-radius:14px}
  .sum-val{font-size:1.7rem}
  .compliance-card{grid-column:span 2}
  .chart-grid-2,.chart-grid-3,.chart-grid-rt,.settings-grid{grid-template-columns:1fr !important}
  .phase-grid{grid-template-columns:1fr}
  .endgame-grid-wrap{grid-template-columns:1fr 1fr}
  .modal,.modal-card,.study-modal{max-width:94vw !important}

  /* ── Bottom tab bar ───────────────────────────────────────────── */
  .mobile-nav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1400;
    justify-content:space-around;align-items:stretch;
    padding:.35rem .25rem calc(env(safe-area-inset-bottom) + .3rem);
    background:color-mix(in srgb, var(--bg2) 94%, transparent);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    border-top:1px solid var(--border);
  }
  .mnav-item{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:.4rem 0 .2rem;background:none;border:none;cursor:pointer;
    color:var(--faint);position:relative;transition:color .15s,transform .1s;font-family:inherit;
  }
  .mnav-item:active{transform:scale(.9)}
  .mnav-ic{font-size:21px;line-height:1}
  .mnav-lbl{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.04em}
  .mnav-item.active{color:var(--gold)}
  .mnav-item.active::before{
    content:"";position:absolute;top:0;width:24px;height:3px;border-radius:0 0 99px 99px;
    background:var(--gold);box-shadow:0 0 8px var(--gold-glow2);
  }
}

@media (max-width:380px){
  .sum-val{font-size:1.5rem}
  .mnav-lbl{font-size:8px}
}