/* ============================================================
   KRIZIA LEARNING HUB — Hub-specific styles
   Uses the same design-system tokens as the reference manual
   ============================================================ */

:root { --topbar-h: 64px; --maxw: 1160px; }

/* ---------- DARK THEME (token overrides) ---------- */
[data-theme="dark"] {
  --color-bg:#0d1117; --color-bg-raised:#161b22; --color-bg-sunken:#161b22;
  --color-bg-overlay:rgba(0,0,0,.6); --color-surface:#161b22; --color-surface-alt:#0d1117;
  --color-border:#30363d; --color-border-strong:#484f58;
  --color-text:#e6edf3; --color-text-secondary:#8b949e; --color-text-tertiary:#6e7681;
  --color-text-inverse:#0d1117; --color-text-link:#58a6ff; --color-text-link-hover:#79c0ff;
  --color-brand:#2f81f7; --color-brand-hover:#1f6feb; --color-brand-text:#fff;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow-md:0 4px 8px rgba(0,0,0,.5);
  --shadow-lg:0 10px 24px rgba(0,0,0,.6);
  color-scheme: dark;
}

/* accent palettes (path colours) */
.a-blue   { --acc:#2f6feb; --acc-bg:rgba(47,111,235,.10); }
.a-violet { --acc:#7c5cff; --acc-bg:rgba(124,92,255,.10); }
.a-green  { --acc:#12a150; --acc-bg:rgba(18,161,80,.10); }
.a-amber  { --acc:#d98324; --acc-bg:rgba(217,131,36,.10); }
.a-cyan   { --acc:#0e9aa7; --acc-bg:rgba(14,154,167,.10); }
.a-rose   { --acc:#d6409f; --acc-bg:rgba(214,64,159,.10); }
[data-theme="dark"] .a-blue  { --acc:#58a6ff }
[data-theme="dark"] .a-violet{ --acc:#a78bfa }
[data-theme="dark"] .a-green { --acc:#3fb950 }
[data-theme="dark"] .a-amber { --acc:#d29922 }
[data-theme="dark"] .a-cyan  { --acc:#39c5cf }
[data-theme="dark"] .a-rose  { --acc:#f778ba }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar-h) + 20px); }
body {
  margin:0; background:var(--color-bg); color:var(--color-text);
  font-family:var(--font-sans); font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--color-text-link); text-decoration:none; }
a:hover { color:var(--color-text-link-hover); }
h1,h2,h3,h4 { line-height:1.25; letter-spacing:-0.015em; margin:0; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 var(--space-6); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ---------- TOPBAR ---------- */
.tb {
  position:sticky; top:0; z-index:100; background:var(--color-surface);
  border-bottom:1px solid var(--color-border); min-height:var(--topbar-h);
  display:flex; align-items:center; gap:var(--space-4);
  padding:var(--space-2) 0;
}
.tb__in { max-width:var(--maxw); margin:0 auto; padding:0 var(--space-6);
  width:100%; display:flex; align-items:center; gap:var(--space-4); }

/* brand logo — two images, swapped by theme (the site uses a manual toggle,
   not just the OS preference, so attribute selectors are correct here) */
.tb__logo { display:block; line-height:0; border-radius: var(--radius-sm); }
.tb__logo-i { display:block; height:36px; width:auto; }
.tb__logo-i--dark { display:none; }
[data-theme="dark"] .tb__logo-i--light,
[data-theme="dark"] .tb__logo-i:not(.tb__logo-i--dark) { display:none; }
[data-theme="dark"] .tb__logo-i--dark { display:block; }
.tb__logo:focus-visible { outline:2px solid var(--color-brand); outline-offset:3px; }
.tb__nav { display:flex; gap:var(--space-1); margin-left:var(--space-4); }
.tb__nav a { padding:6px 12px; border-radius:var(--radius-md); font-size:var(--text-sm);
  color:var(--color-text-secondary); font-weight:500; }
.tb__nav a:hover { background:var(--color-bg-sunken); color:var(--color-text); }
.tb__nav a.on { background:var(--color-bg-sunken); color:var(--color-brand); }
.tb__sp { flex:1; }
.tb__btn { height:36px; padding:0 var(--space-3); border-radius:var(--radius-md);
  border:1px solid var(--color-border); background:var(--color-surface);
  color:var(--color-text-secondary); font-size:var(--text-sm); font-weight:500;
  cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; gap:6px; }
.tb__btn:hover { background:var(--color-bg-sunken); color:var(--color-text); }
.tb__burger { display:none; }

/* ---------- HERO ---------- */
.hero { padding:var(--space-16) 0 var(--space-12); text-align:center; }
.hero__eyebrow { display:inline-flex; align-items:center; gap:8px; padding:5px 14px;
  border-radius:999px; background:var(--color-bg-sunken); border:1px solid var(--color-border);
  font-size:var(--text-xs); font-weight:600; color:var(--color-text-secondary);
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:var(--space-5); }
.hero h1 { font-size:clamp(1.9rem,5vw,3.1rem); margin-bottom:var(--space-4); }
.hero h1 em { font-style:normal; color:var(--color-brand); }
.hero__sub { font-size:var(--text-lg); color:var(--color-text-secondary);
  max-width:640px; margin:0 auto var(--space-6); }
.hero__cta { display:flex; gap:var(--space-3); justify-content:center; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 var(--space-5);
  border-radius:var(--radius-lg); font-weight:600; font-size:var(--text-sm); cursor:pointer;
  border:1px solid transparent; font-family:inherit; transition:all var(--duration-fast) var(--ease-default); }
.btn--p { background:var(--color-brand); color:#fff; }
.btn--p:hover { background:var(--color-brand-hover); color:#fff; }
.btn--s { background:var(--color-surface); border-color:var(--color-border); color:var(--color-text); }
.btn--s:hover { background:var(--color-bg-sunken); }
.btn--g { background:transparent; color:var(--color-text-secondary); }
.btn--g:hover { background:var(--color-bg-sunken); color:var(--color-text); }

/* ---------- PROGRESS DASHBOARD ---------- */
.dash { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-3);
  margin-top:var(--space-10); }
.dash__c { background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-xl); padding:var(--space-4) var(--space-5); text-align:left; }
.dash__l { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.06em;
  color:var(--color-text-tertiary); font-weight:600; }
.dash__v { font-size:var(--text-2xl); font-weight:700; line-height:1.2; margin-top:2px; }
.dash__s { font-size:var(--text-xs); color:var(--color-text-secondary); }
.bar { height:6px; border-radius:999px; background:var(--color-bg-sunken); overflow:hidden; margin-top:8px; }
.bar__f { height:100%; background:var(--color-brand); border-radius:999px; transition:width .4s var(--ease-default); }

/* ---------- SECTION SHELL ---------- */
.sec { padding:var(--space-16) 0; border-top:1px solid var(--color-border); }
.sec__h { text-align:center; margin-bottom:var(--space-10); }
.sec__h .eyebrow { font-size:var(--text-xs); font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--color-brand); margin-bottom:var(--space-2); }
.sec__h h2 { font-size:var(--text-2xl); margin-bottom:var(--space-3); }
.sec__h p { color:var(--color-text-secondary); max-width:620px; margin:0 auto; }

/* ---------- RECOMMENDER ---------- */
.rec { background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-2xl); padding:var(--space-8); max-width:900px; margin:0 auto; }
.rec__q + .rec__q { margin-top:var(--space-6); }
.rec__ql { font-weight:600; margin-bottom:var(--space-1); }
.rec__qh { font-size:var(--text-sm); color:var(--color-text-tertiary); margin-bottom:var(--space-3); }
.rec__opts { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.opt { padding:9px 16px; border-radius:999px; border:1px solid var(--color-border);
  background:var(--color-surface); font-size:var(--text-sm); font-weight:500; cursor:pointer;
  font-family:inherit; color:var(--color-text-secondary); transition:all var(--duration-fast) var(--ease-default); }
.opt:hover { border-color:var(--color-brand); color:var(--color-brand); }
.opt.on { background:var(--color-brand); border-color:var(--color-brand); color:#fff; }
.rec__go { margin-top:var(--space-6); display:flex; align-items:center; gap:var(--space-4); flex-wrap:wrap; }
.rec__go button { opacity:.4; pointer-events:none; }
.rec__go button.ready { opacity:1; pointer-events:auto; }
.rec__note { font-size:var(--text-sm); color:var(--color-text-tertiary); }

.result { display:none; margin-top:var(--space-6); padding-top:var(--space-6); border-top:1px dashed var(--color-border); }
.result.show { display:block; }
.result__l { font-size:var(--text-xs); font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--color-brand); margin-bottom:var(--space-3); }
.result__top { display:flex; align-items:center; gap:var(--space-4); margin-bottom:var(--space-3); }
.result__ico { width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  font-size:22px; background:var(--acc-bg); color:var(--acc); flex-shrink:0; }
.result__top h3 { font-size:var(--text-xl); }
.result__why { color:var(--color-text-secondary); margin-bottom:var(--space-5); }
.result__alts { font-size:var(--text-sm); color:var(--color-text-secondary); margin-bottom:var(--space-4); }
.result__alts b { color:var(--color-text); }

/* ---------- PATH CARDS ---------- */
.paths { display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:var(--space-4); }
.pcard { background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-2xl); padding:var(--space-6); position:relative; overflow:hidden;
  transition:border-color var(--duration-fast) var(--ease-default), transform var(--duration-fast) var(--ease-default); }
.pcard::before { content:''; position:absolute; inset:0 0 auto 0; height:3px; background:var(--acc); }
.pcard:hover { border-color:var(--acc); transform:translateY(-2px); }
.pcard__top { display:flex; gap:var(--space-3); align-items:flex-start; margin-bottom:var(--space-3); }
.pcard__ico { width:42px; height:42px; border-radius:11px; display:grid; place-items:center;
  font-size:20px; background:var(--acc-bg); color:var(--acc); flex-shrink:0; }
.pcard__t { font-size:var(--text-lg); font-weight:700; margin-bottom:2px; }
.pcard__tag { font-size:var(--text-sm); color:var(--color-text-secondary); }
.pcard__meta { display:flex; flex-wrap:wrap; gap:6px; margin:var(--space-3) 0; }
.chip { font-size:var(--text-xs); padding:3px 10px; border-radius:999px;
  background:var(--color-bg-sunken); color:var(--color-text-secondary);
  border:1px solid var(--color-border); font-weight:500; white-space:nowrap; }
.chip--acc { background:var(--acc-bg); color:var(--acc); border-color:transparent; font-weight:600; }
.pcard__for { font-size:var(--text-sm); color:var(--color-text-secondary);
  margin:var(--space-3) 0; padding-left:12px; border-left:2px solid var(--acc); }
.pcard__nf { font-size:var(--text-sm); color:var(--color-text-tertiary); margin-bottom:var(--space-4); }
.pcard__acts { display:flex; gap:var(--space-2); }
.pcard__acts .btn { height:36px; padding:0 var(--space-4); font-size:var(--text-sm); }
.pcard__prog { position:absolute; top:14px; right:14px; font-size:var(--text-xs);
  font-weight:700; color:var(--acc); }

/* ---------- PATH DETAIL VIEW ---------- */
.detail { display:none; }
.detail.on { display:block; }
.dh { display:flex; align-items:flex-start; gap:var(--space-4); margin-bottom:var(--space-6); flex-wrap:wrap; }
.dh__ico { width:56px; height:56px; border-radius:14px; display:grid; place-items:center;
  font-size:26px; background:var(--acc-bg); color:var(--acc); flex-shrink:0; }
.dh__t { flex:1; min-width:240px; }
.dh__t h2 { font-size:var(--text-2xl); margin-bottom:4px; }
.dh__t p { color:var(--color-text-secondary); margin:0; }
.dstat { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:var(--space-3); margin-bottom:var(--space-6); }
.dstat__c { background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); padding:var(--space-4); }
.dstat__l { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.05em;
  color:var(--color-text-tertiary); font-weight:600; }
.dstat__v { font-weight:700; font-size:var(--text-base); margin-top:2px; }

/* stage accordion */
.stage { border:1px solid var(--color-border); border-radius:var(--radius-xl);
  margin-bottom:var(--space-3); background:var(--color-surface); overflow:hidden; }
.stage.done { border-color:var(--acc); }
.stage__h { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-4) var(--space-5);
  cursor:pointer; user-select:none; }
.stage__h:hover { background:var(--color-bg-sunken); }
.stage__n { width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  font-size:var(--text-xs); font-weight:700; flex-shrink:0;
  background:var(--color-bg-sunken); color:var(--color-text-secondary);
  border:1px solid var(--color-border); }
.stage.done .stage__n { background:var(--acc); color:#fff; border-color:var(--acc); }
.stage__t { flex:1; font-weight:600; }
.stage__t small { display:block; font-weight:400; color:var(--color-text-tertiary);
  font-size:var(--text-xs); margin-top:1px; }
.stage__h > .hrs { font-size:var(--text-xs); color:var(--color-text-tertiary);
  font-weight:600; white-space:nowrap; }
.stage__ar { color:var(--color-text-tertiary); font-size:11px; transition:transform var(--duration-fast) var(--ease-default); }
.stage.open .stage__ar { transform:rotate(90deg); }
.stage__b { display:none; padding:0 var(--space-5) var(--space-5); border-top:1px solid var(--color-border); }
.stage.open .stage__b { display:block; }
.stage__why { font-size:var(--text-sm); color:var(--color-text-secondary);
  background:var(--acc-bg); border-left:3px solid var(--acc);
  padding:var(--space-3) var(--space-4); border-radius:0 var(--radius-md) var(--radius-md) 0;
  margin:var(--space-4) 0; }
.stage h5 { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.06em;
  color:var(--color-text-tertiary); font-weight:700; margin:var(--space-5) 0 var(--space-2); }
.stage ul { margin:0; padding-left:20px; }
.stage li { margin-bottom:5px; font-size:var(--text-sm); }
.stage__proj { background:var(--color-bg-sunken); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); padding:var(--space-4); margin-top:var(--space-2); }
.stage__proj b { font-size:var(--text-sm); }
.stage__proj p { margin:2px 0 0; font-size:var(--text-sm); color:var(--color-text-secondary); }
.res { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.res a { font-size:var(--text-sm); padding:6px 12px; border-radius:var(--radius-md);
  border:1px solid var(--color-border); background:var(--color-surface);
  color:var(--color-text-secondary); display:inline-flex; align-items:center; gap:6px; }
.res a:hover { border-color:var(--acc); color:var(--acc); }
.res a .tag { font-size:10px; padding:1px 6px; border-radius:999px; font-weight:700;
  background:var(--acc-bg); color:var(--acc); }
.stage__foot { margin-top:var(--space-5); padding-top:var(--space-4);
  border-top:1px dashed var(--color-border); display:flex; gap:var(--space-3); flex-wrap:wrap; align-items:center; }

/* checklist */
.chk { display:flex; align-items:flex-start; gap:10px; padding:8px 0; cursor:pointer; }
.chk input { display:none; }
.chk__bx { width:18px; height:18px; border-radius:5px; border:1.5px solid var(--color-border-strong);
  flex-shrink:0; margin-top:2px; display:grid; place-items:center;
  transition:all var(--duration-fast) var(--ease-default); }
.chk input:checked + .chk__bx { background:var(--acc); border-color:var(--acc); }
.chk__bx::after { content:'✓'; color:#fff; font-size:11px; font-weight:700; opacity:0; }
.chk input:checked + .chk__bx::after { opacity:1; }
.chk__tx { font-size:var(--text-sm); color:var(--color-text-secondary); }
.chk input:checked ~ .chk__tx { color:var(--color-text-tertiary); text-decoration:line-through; }

/* ---------- SKILL MATRIX ---------- */
#matrix-sec .sec__h { margin-bottom: var(--space-6); }
#matrix-sec .sec__h h2 { font-weight: 700; }
#matrix-sec .sec__h p { font-size: var(--text-sm); margin-top: var(--space-2); }

/* legend sits between the section heading and the table, outside the scroll box */
.mx__legend {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  justify-content: center;
  max-width: 1040px; margin: 0 auto var(--space-3);
  font-size: var(--text-xs); color: var(--color-text-tertiary);
}
.mx__legend-i { display: inline-flex; align-items: center; gap: 6px; }
.mx__legend-i b { color: var(--color-text-secondary); font-weight: 700; }
.mx__legend-i--hint { display: none; }

/* scroll container — the ONLY place that scrolls, so the page never does */
.mx {
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  /* equal left/right margins, not stretched on wide screens */
  max-width: 1040px; margin: 0 auto;
}

table.mx__t {
  width: 100%;
  min-width: 900px;          /* below this → scroll, never squeeze */
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;        /* equal score-column widths */
  font-size: var(--text-sm);
}

/* --- column widths: skill wide, scores equal (table-layout:fixed) --- */
.mx__t tr > :first-child { width: 260px; }

/* --- header row --- */
.mx__t thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--color-bg-sunken);
  color: var(--color-text-secondary);   /* was --color-text-tertiary: too faint */
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;                  /* matches the score cells */
  vertical-align: middle;
  padding: var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.mx__t thead th.mx__th--skill { text-align: left; padding-left: var(--space-5); }

.mx__th-i { display: block; font-size: 15px; line-height: 1.2; margin-bottom: 3px;
            filter: grayscale(.25); }
.mx__th-l { display: block; }
/* per-path accent on the icon, so each column keeps its identity */
.mx__th--blue  .mx__th-i { color: #2f6feb; }
.mx__th--violet .mx__th-i { color: #7c5cff; }
.mx__th--green .mx__th-i { color: #12a150; }
.mx__th--amber .mx__th-i { color: #d98324; }
.mx__th--cyan  .mx__th-i { color: #0e9aa7; }
.mx__th--rose  .mx__th-i { color: #d6409f; }
[data-theme="dark"] .mx__th--blue   .mx__th-i { color: #58a6ff; }
[data-theme="dark"] .mx__th--violet .mx__th-i { color: #a78bfa; }
[data-theme="dark"] .mx__th--green  .mx__th-i { color: #3fb950; }
[data-theme="dark"] .mx__th--amber  .mx__th-i { color: #d29922; }
[data-theme="dark"] .mx__th--cyan   .mx__th-i { color: #39c5cf; }
[data-theme="dark"] .mx__th--rose   .mx__th-i { color: #f778ba; }

/* --- skill column (sticky on horizontal scroll) --- */
.mx__t tbody th.mx__sk {
  position: sticky; left: 0; z-index: 2;
  background: var(--color-surface);
  text-align: left;
  vertical-align: middle;
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--color-text);
  padding: var(--space-4) var(--space-5);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  box-shadow: 1px 0 0 var(--color-border);
}
.mx__t thead th.mx__th--skill { left: 0; z-index: 4; }

/* --- score cells --- */
.mx__t tbody td {
  text-align: center;
  vertical-align: middle;
  padding: var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--color-border);
  /* consistent row height */
  height: 52px;
  box-sizing: border-box;
}
.mx__t tbody tr:last-child th.mx__sk,
.mx__t tbody tr:last-child td { border-bottom: none; }
.mx__t tbody tr:hover th.mx__sk,
.mx__t tbody tr:hover td { background: var(--color-bg-sunken); }
.mx__t tbody tr:hover th.mx__sk { box-shadow: 1px 0 0 var(--color-border); }

.lvl__n { display: inline-block; font-weight: 700; font-size: var(--text-base);
          line-height: 1; min-width: 20px; }
/* importance ramp — uses only palette tokens (green / amber / neutral) */
.lv0 { color: var(--color-text-tertiary); }   /* the "–" dash: not required */
.lv0 .lvl__n { font-weight: 500; }
.lv1 { color: var(--color-text-secondary); }  /* peripheral */
.lv2 { color: var(--amber-500); }             /* supporting */
.lv3 { color: var(--amber-600); }             /* important */
.lv4 { color: var(--green-500); }             /* core of the path */

/* bottom note */
#matrix-sec .mx__note {
  text-align: center;
  margin: var(--space-5) auto 0;
  max-width: 620px;
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  line-height: 1.6;
}

/* ---------- RESOURCES ---------- */
.rgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--space-3); }
.rcard { background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-xl); padding:var(--space-5); }
.rcard h4 { font-size:var(--text-base); margin-bottom:var(--space-1); }
.rcard > p { font-size:var(--text-sm); color:var(--color-text-tertiary); margin-bottom:var(--space-3); }
.rcard a { font-size:var(--text-sm); display:flex; justify-content:space-between;
  padding:7px 0; border-top:1px solid var(--color-border); color:var(--color-text-secondary); }
.rcard a:hover { color:var(--color-brand); }
.rcard a .t { font-size:10px; color:var(--color-text-tertiary); font-weight:700; }

/* ---------- FOOTER ---------- */
.ft { border-top:1px solid var(--color-border); padding:var(--space-10) 0;
  text-align:center; color:var(--color-text-tertiary); font-size:var(--text-sm); }
.ft a { color:var(--color-text-secondary); }

/* ---------- TOAST ---------- */
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(80px);
  background:var(--color-text); color:var(--color-bg); padding:10px 20px; border-radius:999px;
  font-size:var(--text-sm); font-weight:600; z-index:200; opacity:0;
  transition:all var(--duration-normal) var(--ease-default); pointer-events:none; }
.toast.on { opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .dash { grid-template-columns:repeat(2,1fr); }
  .tb__nav { display:none; }
  .tb__burger { display:inline-flex; }
  .tb__nav.open { display:flex; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; background:var(--color-surface); border-bottom:1px solid var(--color-border);
    padding:var(--space-3) var(--space-6); }
  .hero { padding:var(--space-12) 0 var(--space-8); }
  .sec { padding:var(--space-12) 0; }
  .rec { padding:var(--space-5); }
  .wrap, .tb__in { padding-left:var(--space-4); padding-right:var(--space-4); }

  /* matrix: scroll instead of squeeze, show the hint, keep skill col sticky */
  .mx { max-width: 100%; border-radius: var(--radius-lg); }
  .mx__legend-i--hint { display: inline-flex; }
  .mx__t tr > :first-child { width: 200px; }
  .mx__t tbody th.mx__sk { padding: var(--space-3) var(--space-4); font-size: var(--text-xs); }
  .mx__t tbody td { height: 48px; }
  .mx__t thead th { padding: var(--space-3) var(--space-2); }
}
@media (max-width: 520px) {
  .dash { grid-template-columns:1fr 1fr; }
  .btn { width:100%; justify-content:center; }
  .hero__cta { flex-direction:column; }
  .pcard__acts { flex-direction:column; }
  .tb__logo-i { height:30px; }
  .mx__legend { gap: var(--space-1) var(--space-4); font-size: 11px; }
  .mx__t tr > :first-child { width: 168px; }
  .mx__t tbody th.mx__sk { padding: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
@media print {
  .tb, .toast { display:none !important; }
  .stage__b { display:block !important; }
  .mx { overflow:visible !important; }
  .mx__t { min-width:0 !important; }
  .mx__t tbody th.mx__sk { position:static !important; }
  body { font-size:11pt; }
}