/* Atlas Revealed visual direction: a modern editorial atlas, not a SaaS dashboard.

   This file is the approved interface layer and it loads last, so it owns the
   final appearance of every shared surface. Everything below is driven by the
   --pr-* tokens declared in this file. Two rules keep light and dark honest:

     1. No hardcoded color may appear outside the two token blocks.
     2. app.css and experience.css must not carry html[data-theme="light"]
        rules for any selector styled here, because those out-specify this
        file and silently reintroduce the dark treatment.

   Map and globe colors live in the --geo-* tokens in app.css. */

:root{
  --bg:#050c15;
  --panel:#0a1625;
  --panel2:#0e1d2f;
  --line:#263a51;
  --text:#f7f5ef;
  --muted:#9caec0;
  --accent:#7de5cf;
  --atlas-blue:#69a9ff;
  --atlas-gold:#f0b86c;
  --display:ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --shadow:0 18px 48px rgba(0,0,0,.28);

  /* ---- app canvas ---- */
  --pr-app-bg:
    radial-gradient(circle at 12% -12%,rgba(38,77,109,.48),transparent 31%),
    linear-gradient(150deg,#07111d 0,#040a12 72%);

  /* ---- surfaces ---- */
  --pr-surface:rgba(7,17,29,.88);
  --pr-surface-line:#21364d;
  --pr-surface-shadow:0 12px 38px rgba(0,0,0,.2);
  --pr-panel-bg:rgba(8,18,31,.76);
  --pr-chrome:rgba(5,13,22,.42);
  --pr-chrome-line:rgba(43,66,90,.62);
  --pr-tray:rgba(6,15,25,.54);
  --pr-tray-line:rgba(43,66,90,.7);
  --pr-rail:#07121e;
  --pr-rail-line:#1d3045;
  --pr-rail-text:#8fa4b9;

  /* ---- ghost controls ---- */
  --pr-hover:#102438;
  --pr-hover-strong:#162a40;
  --pr-ghost:#a9bacb;
  --pr-ghost-hi:#ffffff;
  --pr-quiet:#7e91a5;

  /* ---- segmented control ---- */
  --pr-seg-bg:rgba(8,20,33,.7);
  --pr-seg-text:#8699ae;
  --pr-seg-active:#1b3148;
  --pr-seg-active-text:#ffffff;
  --pr-seg-active-shadow:none;
  --pr-seg-accent-bg:#173c3a;
  --pr-seg-accent-text:#c9fff3;
  --pr-on-bg:#12302f;

  /* ---- accent ---- */
  --pr-accent-solid:var(--accent);
  --pr-accent-solid-hover:#9af0df;
  --pr-accent-ink:#06131d;
  --pr-accent-soft:#73cdbd;
  --pr-accent-line:#4d776f;

  /* ---- search ---- */
  --pr-search-bg:rgba(10,23,38,.78);
  --pr-search-line:#294057;
  --pr-search-focus-bg:#0c1c2d;
  --pr-search-focus-line:#579789;
  --pr-search-ring:rgba(125,229,207,.08);
  --pr-search-placeholder:#7f91a5;

  /* ---- navigation ---- */
  --pr-nav-bg:rgba(6,16,27,.96);
  --pr-nav-line:#263a50;
  --pr-nav-text:#91a4b7;
  --pr-nav-shadow:0 -12px 30px rgba(0,0,0,.24);
  --pr-daily:#e9c78b;
  --pr-daily-hi:#ffe0a7;
  --pr-daily-hover:rgba(126,89,38,.18);
  --pr-learn:#91e8d7;
  --pr-learn-hi:#c7fff4;
  --pr-learn-hover:rgba(46,113,103,.18);
  --pr-brand-quiet:#7faaa6;

  /* ---- compare bar ---- */
  --pr-capacity-line:rgba(63,86,110,.52);
  --pr-capacity-hover:linear-gradient(90deg,rgba(29,83,76,.12),transparent 58%);
  --pr-capacity-hover-line:#587b83;
  --pr-capacity-kicker:#6dbbad;
  --pr-capacity-count:#a8c1bf;
  --pr-capacity-full-line:rgba(157,123,72,.55);
  --pr-capacity-full-bg:linear-gradient(90deg,rgba(157,123,72,.14),transparent 58%);
  --pr-slot-line:#4c6378;

  /* ---- selection tray ---- */
  --pr-tray-text:#c9d5e0;
  --pr-tray-hover:#11263a;
  --pr-tray-mix:#2b4056;
  --pr-tray-add:#82d8c8;
  --pr-dash:#365069;

  /* ---- map furniture ---- */
  --pr-round-bg:rgba(6,17,29,.86);
  --pr-round-line:#2a425a;
  --pr-round-shadow:0 6px 18px rgba(0,0,0,.2);
  --pr-preset-text:#91a6bb;
  --pr-preset-hover-bg:#11243a;
  --pr-preset-hover-text:#e8faf7;
  --pr-preset-kicker:#6f8a9f;

  /* ---- analysis panel ---- */
  --pr-tab:#7f94aa;
  --pr-tab-active:#f4f6f4;
  --pr-tab-line:#20344a;
  --pr-entity-bg:rgba(12,28,45,.7);
  --pr-entity-line:#243a51;
  --pr-stat-bg:#081522;
  --pr-datanote:#8499ae;
  --pr-sheet-bg:#081522;
  --pr-sheet-line:#1f3046;
  --pr-sheet-text:#9bb0c6;
  --pr-sheet-grip:#496078;
  --pr-sheet-shadow:0 -18px 55px rgba(0,0,0,.42);

  /* ---- modals, daily, lessons ---- */
  --pr-modal-bg:#091726;
  --pr-modal-line:#233a50;
  --pr-modal-shadow:0 30px 90px rgba(0,0,0,.46);
  --pr-modal-close-bg:#12243a;
  --pr-modal-close-text:#b9cad8;
  --pr-onboard-bg:radial-gradient(circle at 50% 18%,#17394d,#0a1a2a 50%,#07121f);
  --pr-silhouette:radial-gradient(circle,rgba(33,84,105,.66),rgba(7,20,33,.7) 68%);
  --pr-input-bg:#071522;
  --pr-rule:#34566b;
  --pr-daily-meta:#879caf;
  --pr-daily-meta-hi:#b8c9d5;
  --pr-daily-meta-sep:#496278;
  --pr-course-bg:rgba(10,27,44,.74);
  --pr-course-line:#223950;
  --pr-course-hover-bg:#0f2438;
  --pr-course-all-bg:linear-gradient(100deg,rgba(23,69,65,.46),rgba(10,27,44,.76) 70%);
  --pr-course-map:#14283b;
  --pr-course-map-line:#355067;
  --pr-course-map-mix:#173047;
  --pr-index:#637c91;
  --pr-ring-track:#1a3044;
  --pr-ring-hole:#0b1b2c;
}

/* =================================================================
   Light theme. Same structure, paper-and-ink values. Contrast target
   is 4.5:1 for body copy and 3:1 for control borders and icons.
   ================================================================= */
html[data-theme="light"]{
  --pr-app-bg:
    radial-gradient(circle at 12% -12%,rgba(158,205,238,.34),transparent 34%),
    linear-gradient(150deg,#f2f6fb 0,#e9eff7 72%);

  --pr-surface:#ffffff;
  --pr-surface-line:#dce4ed;
  --pr-surface-shadow:0 12px 34px rgba(23,45,68,.08);
  --pr-panel-bg:#ffffff;
  --pr-chrome:rgba(249,251,253,.92);
  --pr-chrome-line:#e3e9f0;
  --pr-tray:rgba(249,251,253,.94);
  --pr-tray-line:#e3e9f0;
  --pr-rail:#f5f8fb;
  --pr-rail-line:#e3e9f0;
  --pr-rail-text:#55697d;

  --pr-hover:#ebf1f7;
  --pr-hover-strong:#e0e8f2;
  --pr-ghost:#4c6379;
  --pr-ghost-hi:#0c2237;
  --pr-quiet:#5f7285;

  --pr-seg-bg:#eef2f7;
  --pr-seg-text:#55697d;
  --pr-seg-active:#ffffff;
  --pr-seg-active-text:#0c2237;
  --pr-seg-active-shadow:0 1px 3px rgba(23,45,68,.14);
  --pr-seg-accent-bg:#d2f0e8;
  --pr-seg-accent-text:#0b5f51;
  --pr-on-bg:#d2f0e8;

  --pr-accent-solid:#12806f;
  --pr-accent-solid-hover:#0d6a5b;
  --pr-accent-ink:#ffffff;
  --pr-accent-soft:#0c7060;
  --pr-accent-line:#66bcaa;

  --pr-search-bg:#ffffff;
  --pr-search-line:#d3dce7;
  --pr-search-focus-bg:#ffffff;
  --pr-search-focus-line:#3fa48f;
  --pr-search-ring:rgba(18,128,111,.12);
  --pr-search-placeholder:#5e7691;

  --pr-nav-bg:rgba(255,255,255,.96);
  --pr-nav-line:#e0e7ee;
  --pr-nav-text:#55697d;
  --pr-nav-shadow:0 -10px 26px rgba(23,45,68,.08);
  --pr-daily:#8f6217;
  --pr-daily-hi:#6f4b0e;
  --pr-daily-hover:rgba(240,184,108,.24);
  --pr-learn:#0c7060;
  --pr-learn-hi:#09564a;
  --pr-learn-hover:rgba(18,128,111,.13);
  --pr-brand-quiet:#4f7f79;

  --pr-capacity-line:#e3e9f0;
  --pr-capacity-hover:linear-gradient(90deg,rgba(18,128,111,.08),transparent 58%);
  --pr-capacity-hover-line:#8ac6b9;
  --pr-capacity-kicker:#0c7060;
  --pr-capacity-count:#4c6379;
  --pr-capacity-full-line:#e0cba6;
  --pr-capacity-full-bg:linear-gradient(90deg,rgba(214,164,88,.16),transparent 58%);
  --pr-slot-line:#c1ccd9;

  --pr-tray-text:#31485d;
  --pr-tray-hover:#eaf1f7;
  --pr-tray-mix:#c6d3e0;
  --pr-tray-add:#0c7060;
  --pr-dash:#b4c4d2;

  --pr-round-bg:rgba(255,255,255,.94);
  --pr-round-line:#d3dce7;
  --pr-round-shadow:0 4px 14px rgba(23,45,68,.12);
  --pr-preset-text:#51677c;
  --pr-preset-hover-bg:#e6eef6;
  --pr-preset-hover-text:#0a4a40;
  --pr-preset-kicker:#7e91a5;

  --pr-tab:#55697d;
  --pr-tab-active:#0c2237;
  --pr-tab-line:#e3e9f0;
  --pr-entity-bg:#f7f9fc;
  --pr-entity-line:#e3e9f0;
  --pr-stat-bg:#f1f5f9;
  --pr-datanote:#5d7186;
  --pr-sheet-bg:#f5f8fb;
  --pr-sheet-line:#e3e9f0;
  --pr-sheet-text:#4c6379;
  --pr-sheet-grip:#b9c6d3;
  --pr-sheet-shadow:0 -14px 40px rgba(23,45,68,.14);

  --pr-modal-bg:#ffffff;
  --pr-modal-line:#e3e9f0;
  --pr-modal-shadow:0 26px 70px rgba(23,45,68,.18);
  --pr-modal-close-bg:#eef2f7;
  --pr-modal-close-text:#3e556a;
  --pr-onboard-bg:radial-gradient(circle at 50% 18%,#e4f2f5,#f2f7fb 52%,#ffffff);
  --pr-silhouette:radial-gradient(circle,#d6ebf5,#eef4fa 68%);
  --pr-input-bg:#ffffff;
  --pr-rule:#b7cdd7;
  --pr-daily-meta:#5d7186;
  --pr-daily-meta-hi:#22374b;
  --pr-daily-meta-sep:#b4c2ce;
  --pr-course-bg:#f7f9fc;
  --pr-course-line:#e3e9f0;
  --pr-course-hover-bg:#eef3f9;
  --pr-course-all-bg:linear-gradient(100deg,rgba(18,128,111,.1),#f7f9fc 70%);
  --pr-course-map:#e7edf4;
  --pr-course-map-line:#b5c5d3;
  --pr-course-map-mix:#ffffff;
  --pr-index:#6f8294;
  --pr-ring-track:#e3e9f0;
  --pr-ring-hole:#ffffff;
}

html,body{background:var(--pr-app-bg);color:var(--text)}

button,.result,.searchbox,.map-card,.side-panel{transition:border-color .18s ease,background-color .18s ease,color .18s ease,transform .18s ease}

.app{
  max-width:1760px;
  grid-template-rows:58px auto minmax(0,1fr) auto;
  gap:8px;
  padding:max(10px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(9px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
}

/* Brand and navigation */
.topbar{min-height:58px;gap:16px}
.brand{gap:11px;min-width:max-content}
.logo{width:42px;height:42px}
.brand strong{font-size:18px;letter-spacing:-.025em}
.brand-copy{gap:9px}
.beta{
  padding:0;border:0;border-radius:0;background:none;
  color:var(--pr-brand-quiet);font-size:8px;letter-spacing:.16em;
}
.beta::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;margin:0 6px 2px 0;background:var(--pr-accent-soft)}
.search-wrap{max-width:680px}
.searchbox{height:46px;border-color:var(--pr-search-line);border-radius:12px;background:var(--pr-search-bg);box-shadow:inset 0 1px rgba(255,255,255,.025)}
.searchbox:focus-within{border-color:var(--pr-search-focus-line);background:var(--pr-search-focus-bg);box-shadow:0 0 0 3px var(--pr-search-ring)}
.searchbox svg{color:var(--pr-quiet)}
#search{font-size:15px;color:var(--text)}
#search::placeholder{color:var(--pr-search-placeholder)}
.header-actions{gap:4px}
.pill-btn{
  height:42px;border-color:transparent;border-radius:9px;background:transparent;padding:0 11px;
  color:var(--pr-ghost);font-size:13px;font-weight:720;
}
.pill-btn:hover{background:var(--pr-hover);color:var(--pr-ghost-hi)}
.pill-btn svg,.nav-icon{width:18px;height:18px;display:block}
.nav-icon svg{width:100%;height:100%}
.daily-btn{border-color:transparent;background:transparent;color:var(--pr-daily)}
.daily-btn:hover{background:var(--pr-daily-hover);color:var(--pr-daily-hi)}
.learn-btn{border-color:transparent;background:transparent;color:var(--pr-learn)}
.learn-btn:hover{background:var(--pr-learn-hover);color:var(--pr-learn-hi)}

/* One compact comparison prompt instead of a second hero card. */
.capacity-bar{
  min-height:46px;padding:5px 4px 7px;border:0;border-bottom:1px solid var(--pr-capacity-line);border-radius:0;
  background:transparent;box-shadow:none;cursor:pointer;
}
.capacity-bar:hover{border-color:var(--pr-capacity-hover-line);background:var(--pr-capacity-hover)}
.capacity-bar.is-full{border-color:var(--pr-capacity-full-line);background:var(--pr-capacity-full-bg);box-shadow:none}
.capacity-icon{display:none}
.capacity-copy{display:flex;align-items:baseline;gap:10px}
.capacity-kicker{font-size:8px;color:var(--pr-capacity-kicker)}
.capacity-copy strong{font-size:14px;font-weight:720;letter-spacing:-.01em;color:var(--text)}
.capacity-hint{color:var(--pr-quiet)}
.capacity-slots i{width:7px;height:7px;border-color:var(--pr-slot-line);background:transparent}
.capacity-count{border:0;background:transparent;padding:3px 2px;color:var(--pr-capacity-count);font-size:10px}
.capacity-actions{gap:5px}
.capacity-action{min-height:34px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--pr-ghost);padding:0 10px}
.capacity-action:hover{background:var(--pr-hover);border-color:transparent;color:var(--pr-ghost-hi)}
.reveal-action{border:0;background:var(--pr-accent-solid);color:var(--pr-accent-ink);box-shadow:none;padding-inline:15px}
.reveal-action:hover{background:var(--pr-accent-solid-hover);color:var(--pr-accent-ink);transform:translateY(-1px)}

/* Give geography the largest, quietest surface. */
.workspace{grid-template-columns:minmax(0,1fr) 340px;gap:10px}
.map-card,.side-panel{border-color:var(--pr-surface-line);border-radius:16px;background:var(--pr-surface);box-shadow:var(--pr-surface-shadow)}
.map-card{isolation:isolate}
.selection-tray{min-height:40px;padding:4px 10px;border-bottom:1px solid var(--pr-tray-line);background:var(--pr-tray)}
.tray-place,.tray-add{
  height:30px;border:1px solid transparent;border-radius:8px;background:transparent;padding:0 8px;color:var(--pr-tray-text);
}
.tray-place:hover,.tray-place.active{background:var(--pr-tray-hover);border-color:color-mix(in srgb,var(--place-color) 62%,var(--pr-tray-mix))}
.tray-add{border:1px dashed var(--pr-dash);color:var(--pr-tray-add);background:transparent}
.tray-slot{width:22px;height:22px;border-radius:7px;border-color:var(--pr-slot-line)}
.map-toolbar{padding:6px 9px;gap:5px;border-bottom:1px solid var(--pr-chrome-line);background:var(--pr-chrome)}
.segmented{padding:2px;border:0;border-radius:9px;background:var(--pr-seg-bg);gap:1px}
.seg{border-radius:7px;padding:7px 10px;color:var(--pr-seg-text);font-size:12px}
.seg.active{background:var(--pr-seg-active);color:var(--pr-seg-active-text);box-shadow:var(--pr-seg-active-shadow)}
.seg-btn[aria-pressed="true"]{background:var(--pr-seg-active);color:var(--pr-seg-active-text);box-shadow:var(--pr-seg-active-shadow)}
.seg-accent .seg.active{background:var(--pr-seg-accent-bg);color:var(--pr-seg-accent-text)}
.small-btn{border:1px solid transparent;border-radius:8px;background:transparent;color:var(--pr-ghost)}
.small-btn:hover{background:var(--pr-hover-strong);color:var(--pr-ghost-hi)}
.small-btn.on{border-color:transparent;background:var(--pr-on-bg);color:var(--pr-accent-soft)}
.overlay-label{font-size:14px;stroke-width:5px;letter-spacing:.005em}
.zoom-stack{right:11px;bottom:11px;gap:5px}
.round-btn{width:37px;height:37px;border-color:var(--pr-round-line);border-radius:9px;background:var(--pr-round-bg);color:var(--pr-ghost);box-shadow:var(--pr-round-shadow)}
.round-btn:hover{background:var(--pr-hover);color:var(--pr-ghost-hi)}
.stage-note{min-height:28px;padding:6px 12px;border-top:1px solid var(--pr-rail-line);background:var(--pr-rail);color:var(--pr-rail-text);font-size:11px}
.preset-strip{gap:2px;padding:6px 9px;border-top:1px solid var(--pr-rail-line);background:var(--pr-rail)}
.preset-strip::before{
  content:"Discover";position:sticky;left:0;z-index:2;align-self:center;padding:7px 11px 7px 3px;
  background:var(--pr-rail);color:var(--pr-preset-kicker);font-size:8px;font-weight:850;letter-spacing:.15em;text-transform:uppercase;
}
.preset{border:0;border-radius:7px;background:transparent;padding:7px 10px;color:var(--pr-preset-text);font-size:11px}
.preset:hover,.preset.active{background:var(--pr-preset-hover-bg);color:var(--pr-preset-hover-text);border-color:transparent}

/* Editorial analysis panel. */
.side-panel{background:var(--pr-panel-bg)}
.panel-tabs{padding:7px 10px 0;border-bottom:1px solid var(--pr-tab-line)}
.tab{border-radius:0;padding:9px 6px 10px;color:var(--pr-tab);background:transparent}
.tab.active{background:transparent;color:var(--pr-tab-active);box-shadow:inset 0 -2px var(--pr-accent-solid)}
.panel-scroll{padding:17px 15px 22px}
.insight{margin-bottom:15px;padding:6px 4px 12px 14px;border:0;border-left:2px solid var(--pr-accent-solid);border-radius:0;background:transparent}
.insight-kicker{font-size:8px;color:var(--pr-accent-soft)}
.insight-main{margin-top:7px;font-family:var(--display);font-size:20px;line-height:1.28;font-weight:650;letter-spacing:-.018em;color:var(--text)}
.insight-sub{font-size:12.5px;line-height:1.58;color:var(--muted)}
.data-note{color:var(--pr-datanote);font-size:11px;line-height:1.62}
.entity-card,.block{border-color:var(--pr-entity-line);border-radius:12px;background:var(--pr-entity-bg)}
.stat{border:0;border-radius:8px;background:var(--pr-stat-bg)}

/* Editorial typography belongs to discoveries and learning, not controls. */
.onboarding-page h2,.daily-head h2,.lesson-head h2,.lesson-question h3,.lesson-result h3,.modal-head h2{
  font-family:var(--display);font-weight:650;letter-spacing:-.035em;
}
.onboarding-card{border-radius:20px;border-color:var(--pr-modal-line);background:var(--pr-onboard-bg);box-shadow:var(--pr-modal-shadow)}
.onboarding-page h2{font-size:clamp(31px,5vw,50px);line-height:1.01}

/* Daily becomes a calm daily ritual rather than a pile of status pills. */
.daily-card{width:min(660px,100%);border-radius:20px;border-color:var(--pr-modal-line);background:var(--pr-modal-bg);padding:25px;box-shadow:var(--pr-modal-shadow)}
.daily-head{padding-bottom:14px;border-bottom:1px solid var(--pr-modal-line)}
.daily-head h2{font-size:clamp(31px,5vw,42px);line-height:1.05}
.daily-meta{gap:0;margin:10px 0 14px;align-items:center}
.daily-meta span,.daily-meta button{
  position:relative;border:0;border-radius:0;background:transparent;padding:5px 10px;color:var(--pr-daily-meta);font-size:9px;
}
.daily-meta span:first-child{padding-left:0;color:var(--pr-daily-meta-hi)}
.daily-meta span+span::before{content:"·";position:absolute;left:-2px;color:var(--pr-daily-meta-sep)}
.daily-meta button{margin-left:auto;color:var(--pr-accent-soft);text-decoration:underline;text-underline-offset:3px;background:transparent}
.daily-meta button:hover{border:0;color:var(--pr-accent-solid-hover);background:transparent}
.daily-silhouette{height:270px;border:0;border-radius:14px;background:var(--pr-silhouette)}
.daily-silhouette svg{width:82%;height:82%}
.daily-prompt{font-size:13px;line-height:1.5}
.daily-guess-row input,.daily-guess-select{border-radius:9px;background:var(--pr-input-bg)}
.daily-guesses{gap:8px}
.daily-guess{height:38px;border-width:0 0 2px;border-radius:3px;background:transparent}
.daily-clues{border-radius:0;border-left:2px solid var(--pr-rule);background:transparent;padding:8px 12px;font-size:12px;line-height:1.6}
.lesson-primary{border:0;border-radius:8px;background:var(--pr-accent-solid);color:var(--pr-accent-ink);box-shadow:none}
.lesson-primary:hover{background:var(--pr-accent-solid-hover);color:var(--pr-accent-ink)}
.modal-close{border-radius:8px;background:var(--pr-modal-close-bg);color:var(--pr-modal-close-text)}

/* Lessons now show real geography before a learner even opens a course. */
.lesson-shell{border-radius:20px;border-color:var(--pr-modal-line);background:var(--pr-modal-bg);box-shadow:var(--pr-modal-shadow)}
.lesson-head{border-bottom-color:var(--pr-modal-line)}
.lesson-head h2{font-size:clamp(28px,4vw,42px);line-height:1.05}
.lesson-pill{border:0;border-radius:0;background:transparent;padding:0;color:var(--pr-accent-soft)}
.lesson-courses{gap:8px}
.lesson-course{
  min-height:112px;display:grid;grid-template-columns:4px 28px minmax(145px,1fr) 116px 104px;
  gap:12px;padding:13px 15px;border-color:var(--pr-course-line);border-radius:12px;background:var(--pr-course-bg);
}
.lesson-course:hover{border-color:var(--pr-accent-line);background:var(--pr-course-hover-bg);transform:translateY(-1px)}
.lesson-course-all{background:var(--pr-course-all-bg)}
.lesson-course-mark{width:4px;border-radius:3px;box-shadow:none}
.lesson-course-index{align-self:start;color:var(--pr-index);font-family:var(--display);font-size:13px;font-style:italic}
.lesson-course-copy strong{font-family:var(--display);font-size:20px;font-weight:650;letter-spacing:-.015em}
.lesson-course-copy small{max-width:230px;font-size:11px;line-height:1.45}
.lesson-course-map{width:116px;height:70px;align-self:center;overflow:visible}
.lesson-course-map path{fill:var(--pr-course-map);stroke:var(--pr-course-map-line);stroke-width:.8}
.lesson-course-map path.is-course{fill:color-mix(in srgb,var(--course,#78e8d1) 45%,var(--pr-course-map-mix));stroke:var(--course,#78e8d1)}
.lesson-course-progress{display:flex;justify-content:flex-end;align-items:center;gap:9px;text-align:left}
.lesson-course-progress>span:last-child{min-width:43px}
.lesson-course-ring{position:relative;width:35px;height:35px;border-radius:50%;background:conic-gradient(var(--course) var(--progress),var(--pr-ring-track) 0);display:grid;place-items:center}
.lesson-course-ring::after{content:"";width:27px;height:27px;border-radius:50%;background:var(--pr-ring-hole)}
.lesson-course-ring i{display:none}
.lesson-course-progress b{font-size:13px}
.lesson-course-progress small{font-size:8px}
.lesson-map-wrap{border-color:var(--pr-surface-line);border-radius:14px}

@media(max-width:1180px){
  .workspace{grid-template-columns:minmax(0,1fr) 310px}
  .lesson-course{grid-template-columns:4px 24px minmax(130px,1fr) 100px 94px}
  .lesson-course-map{width:100px}
}

/* Mobile is an intentional map-first product with real primary navigation. */
@media(max-width:900px){
  .app{
    grid-template-rows:50px auto minmax(0,1fr);gap:6px;
    padding:max(7px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) calc(72px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
  }
  .topbar{min-height:50px;gap:7px;background:transparent}
  .logo{width:39px;height:39px}
  .search-wrap{min-width:0}
  .searchbox{height:42px;border-radius:10px;padding:0 8px}
  #search{font-size:14px;padding-inline:7px}
  .header-actions{
    position:fixed;z-index:60;left:0;right:0;bottom:0;height:calc(66px + env(safe-area-inset-bottom));
    display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:4px 18px env(safe-area-inset-bottom);
    border-top:1px solid var(--pr-nav-line);background:var(--pr-nav-bg);backdrop-filter:blur(16px);box-shadow:var(--pr-nav-shadow);
  }
  .header-actions #infoBtn,.header-actions #exportBtn{display:none}
  .header-actions .pill-btn{height:58px;min-height:0;justify-content:center;flex-direction:column;gap:4px;border:0;border-radius:8px;background:transparent;padding:4px;color:var(--pr-nav-text);font-size:10px}
  .header-actions .pill-btn:hover,.header-actions .pill-btn:active{background:transparent;color:var(--pr-ghost-hi)}
  .header-actions .pill-btn .btn-label{display:block}
  .header-actions .pill-btn svg,.header-actions .nav-icon{width:21px;height:21px}
  .header-actions .daily-btn,.header-actions .daily-btn:hover{color:var(--pr-daily);background:transparent}
  .header-actions .learn-btn,.header-actions .learn-btn:hover{color:var(--pr-learn);background:transparent}
  .site-footer{display:none}
  .capacity-bar{min-height:43px;padding:3px 2px 5px}
  .capacity-count{margin-right:3px!important;font-size:9px;color:var(--pr-capacity-count)}
  .capacity-action{min-height:34px;font-size:10px}
  .capacity-actions{margin-left:auto}
  .workspace{height:100%;display:block}
  .map-card{height:100%;border-radius:12px}
  .selection-tray{min-height:38px;padding:4px 7px}
  .map-toolbar{min-height:42px;padding:4px 6px}
  .seg{padding:6px 9px;font-size:11px}
  .side-panel{border-radius:15px 15px 0 0!important;box-shadow:var(--pr-sheet-shadow)}
  .sheet-handle{height:38px;border-bottom:1px solid var(--pr-sheet-line);background:var(--pr-sheet-bg);color:var(--pr-sheet-text)}
  .sheet-handle i{background:var(--pr-sheet-grip)}
  .preset-strip{min-height:39px;padding-block:4px}
  .preset-strip::before{padding-left:1px}
  .preset{font-size:10px;padding:6px 8px}
  .zoom-stack{bottom:52px}
  .daily-card,.lesson-shell{border-radius:0}
  .daily-card{padding:max(20px,env(safe-area-inset-top)) 16px max(22px,env(safe-area-inset-bottom))}
  .daily-head h2{font-size:33px}
  .daily-silhouette{height:min(32dvh,255px)}
  .lesson-head h2{font-size:33px}
  .lesson-courses{grid-template-columns:1fr}
  .lesson-course,.lesson-course-all{grid-column:auto;grid-template-columns:4px 22px minmax(120px,1fr) 90px;min-height:102px;padding:12px}
  .lesson-course-map{width:90px}
  .lesson-course-progress{grid-column:3/5;justify-self:stretch;justify-content:flex-start;border-top:1px solid var(--pr-course-line);padding-top:8px}
  .lesson-course-ring{width:26px;height:26px}
  .lesson-course-ring::after{width:20px;height:20px}
}

/* iPad portrait — toolbar wraps to two rows instead of hidden scroll */
@media(min-width:600px) and (max-width:900px){
  .map-toolbar{flex-wrap:wrap}
  .toolbar-spacer{flex:none;width:100%;height:0}
}

@media(max-width:520px){
  .capacity-copy,.capacity-slots{display:none}
  .capacity-count::before{content:"Compare "}
  .capacity-actions{flex:1;justify-content:flex-end}
  .reveal-action{flex:0 1 auto}
  .tray-place,.tray-add{border-radius:7px}
  .map-toolbar #metricSeg{margin-left:7px}
  .onboarding-card{padding-inline:22px}
  .onboarding-page h2{font-size:35px}
  .daily-meta span,.daily-meta button{padding-inline:7px}
  .daily-meta span:first-child{padding-left:0}
  .daily-silhouette{height:min(30dvh,240px)}
  .lesson-course{grid-template-columns:4px 20px minmax(112px,1fr) 82px;gap:9px}
  .lesson-course-map{width:82px}
  .lesson-course-copy strong{font-size:18px}
  .lesson-course-index{font-size:11px}
}

@media(prefers-reduced-motion:reduce){button,.result,.searchbox,.map-card,.side-panel{transition:none}}