/* ============================================================
   SET — THE FORGE · polish.css (v186, the Forge polish build)
   JT, October 10, 2026: the Focal direction, with Editorial's
   progress ring, the landing page's gold rail on the path, and
   focus mode on every practice trade. Loaded after the Ledger
   block on every app page; js/polish.js builds the pieces that
   need data. Gold means state or the one primary action.
   ============================================================ */
:root { --pg-gold:#EAAA00; --pg-gold-hi:#F7DC8A; --pg-ivory:#F4EFE4; --pg-muted:#8A8578; --pg-line:rgba(255,255,255,0.08); }

/* ---------- warm depth and grain (every app page) ---------- */
html { background:#0A0908; }
body { background:
  radial-gradient(1100px 620px at 50% -8%, rgba(234,170,0,0.10), rgba(234,170,0,0.03) 42%, rgba(0,0,0,0) 72%),
  radial-gradient(800px 700px at 105% 108%, rgba(140,80,10,0.09), rgba(0,0,0,0) 70%),
  #0B0A09 !important; background-attachment:fixed !important; }
body::after { content:''; position:fixed; inset:0; pointer-events:none; z-index:2147483000; opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }

/* ---------- the gold signature: a seam on every screen, a rule under each title ---------- */
header { position:relative; }
header::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; z-index:5; pointer-events:none;
  background:linear-gradient(90deg, rgba(234,170,0,0) 0%, #EAAA00 18%, #F7DC8A 50%, #EAAA00 82%, rgba(234,170,0,0) 100%); }
.tracks-title, .shelf-title, .section-title, .stage-title, #railBadges .bw-title, #feedHead, .eng-title {
  background-image:linear-gradient(90deg, #EAAA00, #F7DC8A); background-repeat:no-repeat; background-size:34px 2px;
  background-position:left bottom; padding-bottom:12px !important; }

/* ---------- earned states: gold foil, only on Complete and earned seals ---------- */
.badge.done, .sbadge.done { background:linear-gradient(100deg, #A97C0C 0%, #F7DC8A 38%, #EAAA00 55%, #FFF1C4 68%, #B8860B 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important; font-weight:700 !important; }
.bw-card.earned { position:relative; overflow:hidden; border:1px solid transparent !important;
  background:linear-gradient(#0E0C09, #0E0C09) padding-box, linear-gradient(135deg, #8C6508, #F7DC8A 35%, #EAAA00 55%, #FFF1C4 70%, #8C6508) border-box !important; }
.bw-card.earned::after { content:''; position:absolute; top:-40%; left:-60%; width:45%; height:180%; transform:rotate(22deg); pointer-events:none;
  background:linear-gradient(90deg, rgba(255,241,196,0), rgba(255,241,196,0.14), rgba(255,241,196,0)); }
.bw-card.earned .bw-art { filter:drop-shadow(0 0 14px rgba(234,170,0,0.32)); }

/* ---------- the gold rail with dots (the landing page's scroll rail), on the path and the lesson list ---------- */
.pg-rail { position:relative; }
.pg-rail::before, .pg-rail::after { content:''; position:absolute; left:var(--pg-x, 28px); width:2px; top:var(--pg-top, 30px); border-radius:2px; pointer-events:none; }
.pg-rail::before { bottom:var(--pg-bot, 30px); background:rgba(255,255,255,0.09); }
.pg-rail::after { height:var(--pg-fill, 0px); background:linear-gradient(180deg, #EAAA00, #F7DC8A); transition:height .9s cubic-bezier(.2,.7,.2,1); }
.pg-rail .pg-dot { position:absolute; left:calc(var(--pg-x, 28px) - 5px); width:12px; height:12px; border-radius:50%; z-index:2;
  background:#0B0A09; border:2px solid #4A463E; box-sizing:border-box; pointer-events:none; }
.pg-rail .pg-dot.done { background:radial-gradient(circle at 35% 30%, #FFF1C4, #EAAA00 55%, #8C6508); border-color:#EAAA00; }
.pg-rail .pg-dot.cur { width:16px; height:16px; left:calc(var(--pg-x, 28px) - 7px); border-color:#EAAA00; }
.pg-rail .pg-dot.now { width:34px; height:34px; left:calc(var(--pg-x, 28px) - 16px); border:none; background:#0B0A09; }
.pg-rail .pg-dot.now svg { position:absolute; inset:0; }
.pg-rail > .srung, .pg-rail > .rung { padding-left:58px !important; }
.pg-rail > .srung .num, .pg-rail > .rung .num { min-width:34px; }

/* ---------- the step page header: a big step numeral with its progress ring ---------- */
.pg-step { display:flex; align-items:center; gap:22px; margin:2px 0 8px; }
.pg-step .pg-big { font-family:'Bebas Neue', sans-serif; font-size:112px; line-height:.8; color:#EAAA00; letter-spacing:-0.01em; font-variant-numeric:tabular-nums; }
.pg-step .pg-ring { position:relative; width:68px; height:68px; flex:none; }
.pg-step .pg-ring svg { position:absolute; inset:0; }
.pg-step .pg-lab { font:600 12px 'DM Sans', sans-serif; letter-spacing:.1em; text-transform:uppercase; color:#8A8578; line-height:1.7; }
.pg-step .pg-lab b { color:#F4EFE4; font-weight:600; }

/* ---------- the dashboard: a stat strip and one focal card ---------- */
.pg-strip { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); margin:24px 0 28px;
  border-top:1px solid rgba(234,170,0,0.35); border-bottom:1px solid rgba(255,255,255,0.08); }
.pg-strip > div { padding:16px 4px 14px 0; min-width:0; }
.pg-strip > div + div { padding-left:22px; border-left:1px solid rgba(255,255,255,0.08); }
.pg-strip b { display:block; font-family:'Bebas Neue', sans-serif; font-weight:400; font-size:60px; line-height:.9; color:#F4EFE4; font-variant-numeric:tabular-nums; }
.pg-strip b i { font-style:normal; font-size:28px; color:#8A8578; margin-left:4px; }
.pg-strip b.g { color:#EAAA00; }
.pg-strip a.pg-adh { display:block; text-decoration:none; color:inherit; border-radius:4px; }
.pg-strip a.pg-adh:hover small, .pg-strip a.pg-adh:focus-visible small { color:#EAAA00; }
.pg-strip a.pg-adh:focus-visible { outline:2px solid #EAAA00; outline-offset:4px; }
.pg-strip small { display:block; margin-top:8px; font:600 11px 'DM Sans', sans-serif; letter-spacing:.08em; text-transform:uppercase; color:#8A8578; }
body.pg-has-strip #railStatus { display:none !important; }

.pg-focal { position:relative; margin:4px 0 32px; padding:24px 26px 22px; border:1px solid rgba(234,170,0,0.55); border-radius:4px;
  background:linear-gradient(180deg, rgba(234,170,0,0.07), rgba(234,170,0,0) 60%), #0D0C0A;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8); }
.pg-focal .row { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.3fr); gap:26px; align-items:end; }
.pg-focal .k { font:600 11px 'DM Sans', sans-serif; letter-spacing:.1em; color:#EAAA00; text-transform:uppercase; }
.pg-focal .t { font-family:'Bebas Neue', sans-serif; font-size:54px; line-height:.95; color:#F4EFE4; margin-top:6px; }
.pg-focal .s { font:400 14.5px/1.5 'DM Sans', sans-serif; color:#B8B2A6; margin-top:6px; max-width:420px; }
.pg-focal .go { display:inline-block; margin-top:18px; background:#EAAA00; color:#0A0A0A; font:700 13px 'DM Sans', sans-serif;
  letter-spacing:.05em; padding:14px 22px; border-radius:3px; text-decoration:none; text-transform:uppercase; }
.pg-focal .go:hover, .pg-focal .go:focus-visible { background:#F7C531; outline:none; }
.pg-focal .m { margin-top:12px; font:500 12px 'DM Sans', sans-serif; color:#8A8578; }
.pg-focal canvas { width:100%; height:180px; display:block; }
body.pg-has-focal #engRepLine { display:none !important; }
body.pg-has-focal .eng-cta { background:transparent !important; color:#EAAA00 !important; border:1px solid rgba(234,170,0,0.6) !important; }

@media (max-width:700px) {
  .pg-strip b { font-size:42px; } .pg-strip > div + div { padding-left:12px; }
  .pg-focal .row { grid-template-columns:1fr; } .pg-focal .t { font-size:44px; }
  .pg-step .pg-big { font-size:80px; } .pg-step .pg-ring { width:52px; height:52px; }
}

/* ---------- focus mode on a practice trade ---------- */
body.pg-focus #taglineEl { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
body.pg-focus #taglineEl.pg-open { white-space:normal; }
body.pg-focus #refresher:not(.pg-open) { display:none !important; }
.pg-ref { font:500 12.5px 'DM Sans', sans-serif; color:#EAAA00; background:none; border:0; padding:0 0 0 14px; cursor:pointer;
  text-decoration:underline; text-decoration-color:rgba(234,170,0,.4); text-underline-offset:3px; white-space:nowrap; }
body.pg-focus #treppTrack { display:none !important; }
.pg-track { display:flex; margin:2px 0 12px; border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); overflow-x:auto; }
.pg-track div { flex:1; min-width:max-content; padding:9px 12px; font:500 12px 'DM Sans', sans-serif; color:#5E5A52; display:flex; align-items:center; gap:8px; }
.pg-track div + div { border-left:1px solid rgba(255,255,255,.06); }
.pg-track b { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; border:1px solid #3A372F; font:700 11px 'DM Sans', sans-serif; color:#8A8578; }
.pg-track .now { color:#F4EFE4; } .pg-track .now b { border-color:#EAAA00; color:#EAAA00; }
.pg-track .done { color:#B8B2A6; } .pg-track .done b { background:#EAAA00; border-color:#EAAA00; color:#0A0A0A; }
.pg-track .skipped { color:#5E5A52; text-decoration:line-through; }
/* v188: on a phone the five-step track fits the screen. v186 gave every step min-width:max-content, so the row
   (and the page with it) grew past 390px and the trade scrolled sideways. Under 640px each step is a circle and
   only the live step keeps its name; every step keeps its name as a tooltip and for screen readers. */
@media (max-width: 640px) {
  .pg-track { overflow-x: visible; }
  .pg-track div { flex: 0 0 auto; min-width: 0; padding: 8px 9px; gap: 6px; }
  .pg-track div.now { flex: 1 1 auto; }
  header > div:has(> #signoutBtn) { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
  .shellnav { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
  .pg-track div:not(.now) .pg-tl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

body.pg-focus .stack > .card.pg-hide { display:none !important; }
body.pg-focus .stack > .card.pg-now { border:1px solid rgba(234,170,0,.6) !important; box-shadow:0 0 0 1px rgba(234,170,0,.08), 0 20px 40px -24px rgba(0,0,0,.9); }
.pg-receipt, .pg-next { padding:12px 16px; font:500 13px 'DM Sans', sans-serif; border:1px solid rgba(255,255,255,.07); border-radius:6px;
  margin-bottom:8px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.pg-receipt { color:#B8B2A6; } .pg-receipt b { color:#EAAA00; margin-right:8px; }
.pg-next { color:#5E5A52; border-style:dashed; } .pg-next span { color:#8A8578; }
.pg-chip { width:100%; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 16px; margin-bottom:10px;
  border:1px solid rgba(255,255,255,.08); border-radius:6px; background:transparent; font:500 13px 'DM Sans', sans-serif; color:#B8B2A6; cursor:pointer; text-align:left; }
.pg-chip b { color:#F4EFE4; font-weight:600; } .pg-chip i { font-style:normal; color:#8A8578; font-size:12px; }
.pg-chip:focus-visible, .pg-ref:focus-visible { outline:2px solid #EAAA00; outline-offset:2px; }

@media (prefers-reduced-motion: reduce) { .pg-rail::after { transition:none; } }

/* v188: text for screen readers only (the adherence link's name now carries the figure) */
.pg-sr { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }