/* App refresh: one calm visual foundation for the signed-in pages (loaded after navy.css).
   Light warm-gray page, white cards, navy text, muted teal for selected states, small gold highlights. Navy stays in the sidebar and top bar only. */
:root{ --ui-bg:#F1EEE9; --ui-card:#FFFFFF; --ui-cream:#FFFBF1; --ui-ink:#12274A; --ui-soft:#4B5E73; --ui-line:rgba(18,39,74,.11); --ui-teal:#177E89; --ui-teal-soft:#E3F2F3; --ui-gold:#E8A43D; --ui-gold-deep:#B97A12; --ui-r:14px;
  --ui-shadow:0 1px 2px rgba(18,39,74,.06), 0 6px 18px rgba(18,39,74,.07); --ui-shadow-up:0 2px 4px rgba(18,39,74,.08), 0 12px 26px rgba(18,39,74,.12); }
body{ background:var(--ui-bg); }
.page.is-dash{ max-width:1040px; gap:12px; color:var(--ui-ink); }
.page.is-dash .box{ background:var(--ui-card); border:1px solid var(--ui-line); border-radius:var(--ui-r); box-shadow:var(--ui-shadow); }

/* ---- the header: name + purpose on the left, the six-piece artwork on the right, one slim band */
.page.is-dash .d-banner{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 16px; text-align:left; background:var(--ui-card); overflow:hidden; }
.d-banner .d-titlebar{ flex:1 1 auto; min-width:0; }
.d-banner .d-title{ font-size:clamp(19px,2.8vw,28px); line-height:1.08; text-shadow:none; color:var(--ui-ink); }
.d-banner .d-title::after{ height:4px; width:min(70%,230px); margin:5px 0 0; transform:none; border-radius:4px; background:var(--ui-gold); }
.d-banner .d-sub{ margin:6px 0 0; font-size:clamp(10px,1.25vw,12px); letter-spacing:.12em; color:var(--ui-soft); }
.d-banner .d-skyline{ flex:0 0 auto; width:auto; height:clamp(62px,8.5vw,88px); max-width:50%; margin:0; object-fit:contain; }

/* ---- navy panels become white cards */
.page.is-dash .d-start,.page.is-dash .d-ring,.page.is-dash .review-card,.page.is-dash .start-card,.page.is-dash .welcome-bar,.page.is-dash .panel.framed{ background:var(--ui-card); color:var(--ui-ink); border:1px solid var(--ui-line); border-radius:var(--ui-r); box-shadow:var(--ui-shadow); }
.page.is-dash .panel.framed{ padding:14px 18px; }
.page.is-dash .d-start .d-lede p,.page.is-dash .start-card h2,.page.is-dash .start-card .start-head h2,.page.is-dash .welcome-bar b{ color:var(--ui-ink); }
.page.is-dash .welcome-text span,.page.is-dash .start-lede{ color:var(--ui-soft); }
.page.is-dash .start-count{ color:var(--ui-gold-deep); }
.page.is-dash .d-start .d-lede img{ background:var(--ui-cream); }
.page.is-dash .d-start .btn-quiet,.page.is-dash .start-card .btn-quiet{ background:transparent; color:var(--ui-ink); border:1px solid var(--ui-line); }
.page.is-dash .d-start .btn-quiet:hover,.page.is-dash .start-card .btn-quiet:hover{ background:var(--ui-teal-soft); }
.page.is-dash .start-step{ background:var(--ui-cream); border:1px solid var(--ui-line); border-radius:12px; }
.page.is-dash .welcome-avatar{ background:var(--ui-ink); box-shadow:0 0 0 2px var(--ui-gold); }
.page.is-dash .welcome-profile{ background:var(--ui-cream); color:var(--ui-ink); border:1px solid var(--ui-line); }
.page.is-dash .btn-brass,.page.is-dash .d-start .btn-brass{ background:var(--ui-gold); color:var(--ui-ink); border:0; border-radius:999px; box-shadow:none; }

/* ---- the big call-to-action cards: white, a gold edge, a gold arrow */
.page.is-dash .student-cta{ background:var(--ui-card); color:var(--ui-ink); border:1px solid var(--ui-line); border-left:5px solid var(--ui-gold); border-radius:var(--ui-r); box-shadow:var(--ui-shadow); padding:12px 16px; transition:transform .16s ease, box-shadow .16s ease; }
.page.is-dash .student-cta:hover,.page.is-dash .student-cta:focus-visible{ transform:translateY(-1px); box-shadow:var(--ui-shadow-up); }
.page.is-dash .student-cta:focus-visible{ outline:3px solid var(--ui-teal); outline-offset:2px; }
.page.is-dash .student-cta-text h2{ color:var(--ui-ink); font-size:clamp(17px,2vw,20px); margin:0; }
.page.is-dash .student-cta-text p,.page.is-dash .student-cta .small{ color:var(--ui-soft); margin:2px 0 0; }
.page.is-dash .student-cta-arrow{ background:var(--ui-gold); color:var(--ui-ink); border-radius:999px; width:44px; height:36px; font-weight:800; }
.page.is-dash .student-cta-icon{ background:var(--ui-gold); }

/* ---- tiles: white, a thin colored top edge, teal tag */
.page.is-dash .tile{ background:var(--ui-card); color:var(--ui-ink); border:1px solid var(--ui-line); border-top:3px solid var(--ui-gold); border-radius:var(--ui-r); box-shadow:var(--ui-shadow); transition:transform .16s ease, box-shadow .16s ease; }
.page.is-dash .tile:hover,.page.is-dash .tile:focus-visible{ transform:translateY(-2px); box-shadow:var(--ui-shadow-up); }
.page.is-dash .tile:focus-visible{ outline:3px solid var(--ui-teal); outline-offset:2px; }
.page.is-dash .tile h3{ color:var(--ui-ink); } .page.is-dash .tile p{ color:var(--ui-soft); }
.page.is-dash .tile .foot,.page.is-dash .tile .foot *{ color:var(--ui-teal); font-weight:700; }
.page.is-dash .tile .l-icon{ background:var(--ui-teal-soft); color:var(--ui-ink); }
.page.is-dash .tile .cat-tag,.page.is-dash .tile.cat-first .cat-tag,.page.is-dash .tile.cat-power .cat-tag{ background:var(--ui-teal-soft); color:var(--ui-teal); }
.page.is-dash .tile.cat-first,.page.is-dash .tile.cat-power,.page.is-dash .tile.cat-play,.page.is-dash .tile.cat-puzzle,.page.is-dash .tile.cat-tools,.page.is-dash .tile.cat-test,.page.is-dash .tile.cat-path{ border-top-color:var(--ui-gold); }
.page.is-dash .meter{ background:#E7E2D9; height:8px; } .page.is-dash .meter span{ background:var(--ui-teal); }
.page.is-dash .d-ring .ring-fg{ stroke:var(--ui-teal); } .page.is-dash .d-ring .ring-bg{ stroke:#E7E2D9; }
.page.is-dash .grid{ gap:12px; }
.page.is-dash h2{ font-size:clamp(17px,2vw,20px); margin:0; color:var(--ui-ink); }
@media (prefers-reduced-motion:reduce){ .page.is-dash .student-cta,.page.is-dash .tile{ transition:none; } .page.is-dash .student-cta:hover,.page.is-dash .tile:hover{ transform:none; } }

/* ---- the learner's home */
.lh-hello{ margin:4px 0 0!important; font-size:clamp(22px,3vw,28px); line-height:1.1; color:var(--ui-ink); }
.lh-lede{ margin:0!important; font-size:15.5px; color:var(--ui-soft); }
.page.is-dash .student-cta.continue-card{ border-left-color:var(--ui-teal); padding:14px 18px; }
.page.is-dash .student-cta.continue-card .student-cta-text h2{ font-size:clamp(19px,2.3vw,23px); }
.lh-quick{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.lh-q{ display:flex; align-items:center; gap:10px; padding:10px 12px; min-height:64px; text-decoration:none; color:var(--ui-ink); background:var(--ui-card); border:1px solid var(--ui-line); border-radius:var(--ui-r); box-shadow:var(--ui-shadow); transition:transform .16s ease, box-shadow .16s ease; }
.lh-q:hover,.lh-q:focus-visible{ transform:translateY(-2px); box-shadow:var(--ui-shadow-up); }
.lh-q:focus-visible{ outline:3px solid var(--ui-teal); outline-offset:2px; }
.lh-q img{ width:54px; height:auto; flex:0 0 54px; border-radius:8px; }
.lh-q-ic{ width:44px; height:44px; flex:0 0 44px; display:flex; align-items:center; justify-content:center; background:var(--ui-teal-soft); border-radius:10px; }
.lh-q-ic svg{ width:30px; height:30px; }
.lh-q-t{ display:flex; flex-direction:column; min-width:0; } .lh-q-t b{ font-size:16px; line-height:1.15; } .lh-q-t small{ color:var(--ui-soft); font-size:13px; }
.lh-row{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:12px; align-items:stretch; }
.lh-progress{ padding:12px 16px; display:flex; flex-direction:column; gap:6px; }
.lh-prog-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.lh-big b{ font-size:clamp(26px,3.4vw,34px); font-family:var(--display); color:var(--ui-ink); } .lh-big span{ color:var(--ui-soft); font-size:15px; }
.lh-link{ color:var(--ui-teal); font-weight:700; text-decoration:none; font-size:14.5px; padding:10px 0; } .lh-link:hover{ text-decoration:underline; }
.lh-prog-foot{ display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; color:var(--ui-soft); font-size:14px; }
.lh-chip{ display:inline-block; background:var(--ui-teal-soft); color:var(--ui-ink); border-radius:999px; padding:2px 10px; font-weight:700; font-size:13px; } .lh-chip.gold{ background:#FBEBCB; }
.lh-daily{ display:flex; flex-direction:column; gap:3px; padding:12px 16px; text-decoration:none; color:var(--ui-ink); border-left:5px solid var(--ui-teal)!important; transition:transform .16s ease, box-shadow .16s ease; }
.lh-daily:hover,.lh-daily:focus-visible{ transform:translateY(-2px); box-shadow:var(--ui-shadow-up); }
.lh-daily:focus-visible{ outline:3px solid var(--ui-teal); outline-offset:2px; }
.lh-tag{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ui-teal); } .lh-daily b{ font-size:18px; } .lh-sub{ color:var(--ui-soft); font-size:14px; }
.lh-go{ margin-top:auto; align-self:flex-start; background:var(--ui-gold); color:var(--ui-ink); font-weight:800; border-radius:999px; padding:6px 16px; font-size:14.5px; position:relative; }
.lh-go::after{ content:""; position:absolute; inset:-5px -8px; }
.lh-more{ display:flex; flex-wrap:wrap; gap:8px; }
.lh-more a{ display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:999px; background:var(--ui-card); border:1px solid var(--ui-line); color:var(--ui-ink); font-weight:700; text-decoration:none; box-shadow:var(--ui-shadow); }
.lh-more a:hover,.lh-more a:focus-visible{ background:var(--ui-teal-soft); }
@media (max-width:760px){
  .lh-quick{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .lh-q{ padding:8px 10px; min-height:60px; } .lh-q img{ width:46px; flex-basis:46px; }
  .lh-row{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){ .lh-q,.lh-daily{ transition:none; } .lh-q:hover,.lh-daily:hover{ transform:none; } }

/* ---- learners on phones: a persistent bottom bar with four places; learners on desktop keep the sidebar (a little narrower) */
.bottom-nav{ display:none; }
@media (max-width:760px){
  body.student-mode .bottom-nav{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40; background:var(--ui-card); border-top:1px solid var(--ui-line); box-shadow:0 -4px 16px rgba(18,39,74,.08); padding:0 4px env(safe-area-inset-bottom,0px); }
  .bottom-nav a{ flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:58px; color:var(--ui-soft); text-decoration:none; font-size:12px; font-weight:700; position:relative; }
  .bottom-nav a svg{ width:24px; height:24px; }
  .bottom-nav a[aria-current=page]{ color:var(--ui-teal); }
  .bottom-nav a[aria-current=page]::before{ content:""; position:absolute; top:0; left:22%; right:22%; height:3px; border-radius:0 0 3px 3px; background:var(--ui-gold); }
  .bottom-nav a:focus-visible{ outline:3px solid var(--ui-teal); outline-offset:-3px; border-radius:8px; }
  body.student-mode .main{ padding-bottom:calc(76px + env(safe-area-inset-bottom,0px)); }
  body.student-mode .sitefoot{ margin-bottom:64px; }
}
@media (min-width:761px){ body.student-mode{ --nav-w:228px; } }
.lh-q-t b{ white-space:nowrap; }

/* ---- sidebar: same navy, thinner lines, smaller mark ---- */
.nav a.wordmark{ border-width:1px; padding:6px 8px; }
.nav .wordmark .emblem{ height:52px; }
.nav .wordmark .wm-tag{ font-size:13px; }
.nav .wordmark .wm-tag::after{ width:96px; height:7px; background-size:14px 7px; }
.nav a[data-nav]:not([data-nav=me-chip]),.nav .owner-logout-link{ border:1px solid rgba(255,255,255,.14); border-bottom:2px solid var(--acc); min-height:44px; margin-bottom:5px; font-size:15px; }
.nav a[data-nav]:not([data-nav=me-chip])[aria-current="page"]{ background:rgba(23,126,137,.28); border-color:rgba(255,255,255,.14); border-bottom-color:var(--ui-gold); }
.nav h2,.nav-group h2{ font-size:11px; letter-spacing:.14em; opacity:.8; }
@media (max-width:420px){ .lh-q-t b{ font-size:15px; } .lh-q{ gap:8px; padding:8px; } .lh-q img{ width:40px; flex-basis:40px; } .lh-q-ic{ width:40px; height:40px; flex-basis:40px; } }
.page.is-dash .tile[data-tile]{ border-color:var(--ui-line); border-top-color:var(--ui-gold); box-shadow:var(--ui-shadow); }
@media (max-width:480px){ .d-banner .d-skyline{ height:auto; width:46%; max-width:none; } }
@media (min-width:761px) and (max-width:960px){ .lh-quick{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Scholar's Mate trainer on a phone: the question stays visible above the board, the buttons and messages come right under it */
@media (max-width:760px){
  .opn-page .eg-practice .eg-how{ display:block !important; order:0; font-weight:600; margin:0; }
  .opn-page .eg-practice .side > .btn-row{ order:3; } .opn-page .eg-practice .fbk{ order:4; } .opn-page .eg-practice .why-slot{ order:5; }
}

/* Study lines (Scholar's Mate trainer): tagged move list */
.lines-moves{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }
.lines-mv{ font:inherit; font-size:14px; min-height:36px; padding:4px 10px; border-radius:8px; border:1px solid var(--ui-line); background:#fff; color:var(--ui-ink); cursor:pointer; }
.lines-mv.on{ outline:3px solid var(--ui-teal); outline-offset:1px; }
.lines-mv.sound{ border-bottom:3px solid var(--ui-teal); } .lines-mv.top{ border-bottom:3px solid #1E9E5A; }
.lines-mv.worse{ border-bottom:3px solid var(--ui-gold); background:#FFF6E3; } .lines-mv.material,.lines-mv.mate{ border-bottom:3px solid #C4293F; background:#FDECEE; }
.lines-summary{ margin:8px 0; }
@media (max-width:760px){ .opn-page .eg-learn .lines-moves{ order:6; } .opn-page .eg-learn .lines-flags{ order:7; } .lines-mv{ min-height:44px; } }

/* Six-unit module inside Learn / Practice / Mastery */
.opn-units .eg-chip{ text-decoration:none; display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; }
.opn-units .eg-chip.wide{ padding:0 14px; } .eg-chip.lock{ opacity:.6; } .eg-chip.done{ border-bottom:3px solid #1E9E5A; }
.opn-layer{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:8px 0; }
.opn-layer button{ font:inherit; min-height:44px; padding:6px 14px; border-radius:999px; border:1px solid var(--ui-line); background:#fff; color:var(--ui-ink); cursor:pointer; }
.opn-layer button.on{ background:var(--ui-ink); color:#fff; border-color:var(--ui-ink); }
.opn-unit-h{ margin:12px 0 4px; font-size:20px; } .opn-obj{ margin:0 0 8px; } .opn-eng{ margin:6px 0 0; color:var(--ui-soft); }
.jg{ display:block; margin-top:4px; font-weight:400; }
.opn-opts{ display:flex; flex-direction:column; gap:8px; margin:8px 0; } .opn-opt{ text-align:left; min-height:44px; } .opn-opt.good{ border-color:#1E9E5A; background:#E8F6EE; } .opn-opt.bad{ border-color:#C4293F; background:#FDECEE; }
.opn-pathlist{ list-style:none; margin:8px 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.opn-unit{ display:grid; grid-template-columns:auto 1fr; gap:2px 10px; align-items:center; min-height:56px; padding:8px 12px; border:1px solid var(--ui-line); border-left:5px solid var(--ui-gold); border-radius:var(--ui-r); background:#fff; color:var(--ui-ink); text-decoration:none; }
.opn-unit .opn-un{ font-weight:800; grid-row:1 / span 2; } .opn-unit .opn-st{ font-size:13px; color:var(--ui-soft); }
.opn-unit.st-passed{ border-left-color:#1E9E5A; } .opn-unit.st-locked{ border-left-color:#B8B2A6; opacity:.75; } .opn-unit.st-ready{ border-left-color:var(--ui-teal); }
.opn-coach{ margin-top:12px; } .opn-guide .btn{ margin:2px 4px 2px 0; }
@media (max-width:760px){ .opn-pathlist{ grid-template-columns:1fr; } .opn-page .eg-practice .opn-opts{ order:3; } .opn-page .eg-practice .opn-obj{ order:0; } }

.opn-ovr{ list-style:none; padding:0; margin:6px 0; } .opn-ovr label{ display:flex; gap:10px; align-items:center; min-height:44px; } .opn-ovr input{ width:22px; height:22px; }