/* HOP visual refresh — screen-only presentation layer.
   Keep selectors explicit: controls, charts, status indicators and print layouts
   retain their existing semantics. No data, routing or interaction changes. */
@media screen {
  :root {
    --bg:#f6f5f1; --surface:#fffefa; --surface-2:#eeefea; --surface-3:#e3e7e3;
    --border:#e0e4df; --border-strong:#9daaa7;
    --text:#233737; --text-muted:#536765; --text-faint:#657774;
    --accent-100:#e5eff1; --accent-400:#397b96; --accent-500:#286e89;
    --accent-600:#215c74; --accent-700:#19495e; --accent-line:#6692a3;
    --success:#276f5c; --success-100:#e4efe7;
    --warning:#8b6124; --warning-100:#f4ecdd;
    --danger:#b63e31; --danger-100:#f8e9e5;
    --shadow-sm:0 2px 8px rgba(38,53,45,.035);
    --shadow-md:0 12px 32px rgba(27,45,39,.12);
    --radius:15px; --radius-sm:11px; --radius-lg:20px;
    --font-body:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --font-display:var(--font-body);
    --refresh-action:#286e89; --refresh-action-ink:#fff;
  }
  :root[data-theme="dark"] {
    --bg:#172124; --surface:#202d30; --surface-2:#29383b; --surface-3:#344548;
    --border:#35474a; --border-strong:#718b8d;
    --text:#edf1eb; --text-muted:#b4c5c2; --text-faint:#9badab;
    --accent-100:#243d47; --accent-400:#8bbcd0; --accent-500:#8bbcd0;
    --accent-600:#a5cedc; --accent-700:#c3e1e9; --accent-line:#618e9d;
    --success:#91cbb3; --success-100:#253f36;
    --warning:#e2bb7c; --warning-100:#3c3529;
    --danger:#f29c8d; --danger-100:#432d2a;
    --shadow-sm:0 2px 8px rgba(0,0,0,.08);
    --shadow-md:0 14px 36px rgba(0,0,0,.26);
    --refresh-action:#a7d1df; --refresh-action-ink:#15323e;
  }
  @media (prefers-color-scheme:dark) {
    :root:not([data-theme="light"]) {
      --bg:#172124; --surface:#202d30; --surface-2:#29383b; --surface-3:#344548;
      --border:#35474a; --border-strong:#718b8d;
      --text:#edf1eb; --text-muted:#b4c5c2; --text-faint:#9badab;
      --accent-100:#243d47; --accent-400:#8bbcd0; --accent-500:#8bbcd0;
      --accent-600:#a5cedc; --accent-700:#c3e1e9; --accent-line:#618e9d;
      --success:#91cbb3; --success-100:#253f36;
      --warning:#e2bb7c; --warning-100:#3c3529;
      --danger:#f29c8d; --danger-100:#432d2a;
      --shadow-sm:0 2px 8px rgba(0,0,0,.08);
      --shadow-md:0 14px 36px rgba(0,0,0,.26);
      --refresh-action:#a7d1df; --refresh-action-ink:#15323e;
    }
  }
  :root[data-tone="soft"] {
    --bg:#eae6dd; --surface:#f6f2e9; --surface-2:#e5e2d8; --surface-3:#dcded3;
    --border:#d8d6ca; --border-strong:#969d8e;
    --text:#343a30; --text-muted:#606651; --text-faint:#6b705c;
    --accent-100:#dde8e8;
  }
  :root[data-tone="dim"] {
    --bg:#2b3638; --surface:#354346; --surface-2:#3e4f51; --surface-3:#485c5e;
    --border:#4b5e60; --border-strong:#8b9e9e;
    --text:#f0f2ec; --text-muted:#c6d1cc; --text-faint:#b4c2bb;
    --accent-100:#324c58;
  }
  body {line-height:1.5; -webkit-font-smoothing:antialiased;}
  .topbar {border-bottom-color:transparent; padding-bottom:15px;}
  .topbar-title h1 {font-weight:600; letter-spacing:-.025em;}
  .topbar-title .sub {line-height:1.4;}
  main {gap:20px;}
  .card,.e8-banner,.gl-banner,.gl-due-row,.m8-card,.ex-duo-card,
  .smp-card,.num-hero,.num-goal-box,.bk-card {
    border-color:transparent; border-radius:var(--radius); box-shadow:var(--shadow-sm);
  }
  /* Secondary content sits on the page instead of inside another outlined box. */
  .e8-worth,.e8-start,.e8-sure,.try-card,.hormone-block {
    border:0; border-radius:12px; box-shadow:none; background:var(--surface-2);
  }
  .e8-worth,.e8-start {padding:17px 18px;}
  .e8-sure {border-top:1px solid var(--border);border-radius:0;background:transparent;}
  .e8-sec h2,.section-label,.detail-label,.m8-card h3,.try-card-k {
    text-transform:none;letter-spacing:0;font-size:14px;font-weight:600;
  }
  .e8-banner-t,.e8-rn,.e8-big h2,.gl-h,.gl-b-t,.ex-h,.anchor-title,
  .hop-section-head h2,.recommend-name,.ex-tile-name {font-weight:600;}
  .e8-rl,.anchor-sub,.choice-copy span,.focus-card p {line-height:1.5;}
  .e8-main,.gl-main {gap:18px;}
  .e8-row {padding-top:15px;padding-bottom:15px;}
  .e8-area,.e8-snag {border-color:transparent;background:var(--surface-2);}
  .e8-ic,.e8-bi,.anchor-icon,.choice-dot,.focus-icon {border-radius:12px;}
  .focus-icon {background:var(--accent-100);color:var(--accent-600);}
  .anchor-card {border-color:transparent;border-radius:var(--radius);box-shadow:var(--shadow-sm);}
  .anchor-card.is-done {background:var(--success-100);border-color:transparent;}
  .anchor-card.is-done .anchor-state {background:var(--success);color:var(--bg);}
  .hop-mantra {background:transparent;border:0;border-radius:0;padding:5px 8px;color:var(--text-muted);font-weight:500;line-height:1.5;}
  .btn {font-size:17px;font-weight:600;border-radius:var(--radius-sm);min-height:46px;}
  .btn-primary {background:var(--refresh-action);color:var(--refresh-action-ink);box-shadow:none;}
  .btn-secondary {border-color:transparent;}
  .icon-btn {border-color:transparent;background:var(--surface-2);}
  .hop-home-actions .icon-btn {width:40px;height:40px;}
  .bottom-nav {background:var(--surface);box-shadow:0 -3px 18px rgba(20,35,35,.045);border-top-color:var(--border);backdrop-filter:none;}
  .gl-banner {background:var(--surface);}
  .gl-b-ic,.gl-b-n {background:var(--warning-100);color:var(--warning)!important;}
  .gl-due-tag {border:0;letter-spacing:0;font-weight:600;}
  .why-frame,.why-open {background:var(--surface);border:0;box-shadow:var(--shadow-sm);border-radius:var(--radius);padding:21px;}
  .why-kicker {text-transform:none;letter-spacing:0;color:var(--text-muted);font-weight:500;}
  .why-h {font-weight:600;font-size:22px;line-height:1.25;}
  .why-mine {border-top:1px solid var(--border);padding-top:16px;}
  .why-frame,.why-open {--why-quote:var(--accent-700);--why-ink:var(--text);--why-line:var(--border);}
  .ex-search {border-width:1px;border-color:var(--border-strong);box-shadow:none;border-radius:12px;}
  .ex-q {border-color:transparent;background:var(--surface-2);border-radius:9px;}
  .ex-go,.ex-mono,.recommend-badge,.e8-hero-ic {
    background:var(--refresh-action);color:var(--refresh-action-ink);box-shadow:none;
  }
  .is-ffs .e8-hero-ic {background:#b63e31;color:white;}
  .ex-tile {background:var(--dom-b,#286e89);box-shadow:none;border-radius:14px;}
  .ex-tile-name {text-shadow:none;}
  .ex-tile-count {letter-spacing:0;text-transform:none;}
  .recommend-card {background:var(--accent-100);border-color:transparent;}
  .hop-explore-cta,.curriculum-hero,.m8-hero {background:#286e89;color:white;box-shadow:none;}
  .ex-ev-card {border-left-width:2px;}
  .home-explore-btn {border-color:transparent;background:var(--surface-2);}
  /* Keep field edges and selection indicators clear and usable. */
  textarea,input[type="text"],input[type="number"],input[type="search"],input[type="date"],select,
  .why-note,.gl-due-entry input {border-color:var(--border-strong);border-radius:10px;}
  button:focus-visible,a:focus-visible,summary:focus-visible,
  input:focus-visible,textarea:focus-visible,select:focus-visible {
    outline:3px solid var(--accent-500);outline-offset:3px;
  }
  .theme-opt {border-width:1px;border-radius:12px;}
  .theme-opt.is-on {border-color:var(--accent-500);box-shadow:inset 3px 0 0 var(--accent-500);}
  /* Welcome retains Jack & Jacky and its existing fixed light artwork. */
  .ai-jj {background:#f4f4ed;color:#233737;}
  .kn-strip {background:#fffefa;border-radius:18px;box-shadow:0 5px 18px rgba(33,58,53,.07);}
  .kn-tile {background:#eef1ec;border-color:transparent;color:#233737;border-radius:11px;}
  .kn-strip-k {color:#536765;text-transform:none;letter-spacing:0;font-weight:500;}
  .jj-go,.kn-tile-more {background:#286e89;color:#fff;box-shadow:none;border-radius:14px;border-color:transparent;}
  .kn-tile-more:not(:disabled):active {background:#215c74;}
  .jj-link {color:#215c74;}
  .hm-story {border:1px solid #dadfd6;background:#f5f5ee;border-radius:12px;}
  .hm-goal {background:#286e89;box-shadow:none;}
  .nb-row {border-color:var(--border);}
  .nb-line {line-height:1.55;}
}
@media screen {
  /* The discovery game keeps its reels and lever, with the same quiet finish. */
  .ex-slot {background:var(--surface);color:var(--text);border-radius:18px;box-shadow:var(--shadow-sm);}
  .ex-slot-title,.ex-slot.is-done .ex-slot-title {color:var(--text);text-shadow:none;letter-spacing:0;text-transform:none;font-size:20px;font-weight:600;}
  .ex-slot-window {background:var(--surface-2);box-shadow:none;border-radius:12px;}
  .ex-slot-lights b,.ex-slot-lights b:nth-child(even) {background:var(--accent-400);box-shadow:none;}
  .ex-reel::before {background:linear-gradient(180deg,rgba(20,35,35,.08),transparent 22%,transparent 78%,rgba(20,35,35,.08));}
  .ex-slot-say {color:var(--text-muted);font-weight:400;}
  .ex-spin {background:var(--refresh-action);color:var(--refresh-action-ink);box-shadow:none;letter-spacing:.02em;font-size:18px;border-radius:11px;font-weight:600;}
  .ex-spin:active:not(:disabled),.ex-spin:disabled {box-shadow:none;}
  .ex-slot.is-done .ex-reel {box-shadow:0 0 0 2px var(--accent-500);}
  .ex-slot.is-picked .ex-reel:has(.is-chosen) {box-shadow:0 0 0 3px var(--success);}
  .ex-cell-hop img {box-shadow:none;border-radius:10px;}
  .ex-cell i {box-shadow:none;background:var(--dom-b,#286e89);}
  /* v93: the light backdrop sits on the logo picture itself, not on the animated button. On iPhones the button's
     backdrop could paint over the picture and leave a blank white box. The glint (a masked layer) is off in the
     dark looks for the same reason. */
  :root[data-theme="dark"] .hop-home-logo {background:#f6f5f1;border-radius:12px;padding:4px 8px;box-sizing:content-box;}
  :root[data-theme="dark"] .hop-logo-btn::after {display:none;}
  :root[data-theme="dark"] .hop-logo-btn.is-text {background:#f6f5f1;}
  @media(prefers-color-scheme:dark) {
    :root:not([data-theme="light"]) .hop-home-logo {background:#f6f5f1;border-radius:12px;padding:4px 8px;box-sizing:content-box;}
    :root:not([data-theme="light"]) .hop-logo-btn::after {display:none;}
    :root:not([data-theme="light"]) .hop-logo-btn.is-text {background:#f6f5f1;}
  }
}
@media screen {
  /* v89: anything that sat white-on-blue keeps readable contrast in every look. In the dark looks the
     refresh's blue is pale, so these use the action colour pair (teal with white in light, pale blue with
     deep ink in dark) instead of white on --accent-500. */
  .d8-toggle button.is-on,.e8-hero-ic,.ex-go,.ex-step.is-current .ex-step-n,.fq-pill.is-on,.anchor-go,
  .ph-cam-btn,.why-opt.is-on .why-opt-ic,.try-card-b .is-yes,.bk-ic,.item-form-chip.is-link:active,.hop-nb-n,
  .why-q,.den-step-number {
    background:var(--refresh-action); color:var(--refresh-action-ink); border-color:var(--refresh-action);
  }
}