/* learn/_pml-levels.css — the ONE level table, on / and /learn/ (UXUI-3, 2 Oct 2026).
   Markup: _partials/levels.html (copied in by build-home.js). Behaviour: _pml-levels.js.
   Tokens only (--fs-* / --sp-* / --radius* / --ease from _pml-theme.css). No orange fill here:
   the page's own main action keeps the one orange on the screen. Hover = colour only. */
.pml-levels{margin:0;scroll-margin-top:72px;}
.pml-levels .lv-title{margin:0 0 var(--sp-3);font-size:var(--fs-5);line-height:1.2;color:var(--navy);}
.lv-pick{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--sp-2);margin:0 0 var(--sp-3);}
.lv-pick button{font:inherit;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;
  padding:var(--sp-3) var(--sp-4);border:1.5px solid var(--line);border-radius:var(--radius-lg);background:#fff;
  color:var(--navy);cursor:pointer;text-align:left;
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease),color var(--dur) var(--ease);}
.lv-pick button b{font-size:var(--fs-3);font-weight:800;line-height:1.25;}
.lv-pick button small{font-size:var(--fs-1);font-weight:600;color:var(--muted);line-height:1.3;}
.lv-pick button:hover{border-color:var(--navy-3);}
.lv-pick button:focus-visible{outline:2px solid var(--navy-3);outline-offset:2px;}
.lv-pick button:active{transform:scale(.98);}
.lv-pick button[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:#fff;}
.lv-pick button[aria-selected="true"] small{color:#c7d0e6;}

.lv-row{padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#fff;border:1.5px solid var(--line);
  border-radius:var(--radius-lg);margin:0 0 var(--sp-3);overflow:hidden;}
.lv-row.lv-two{grid-template-columns:repeat(2,minmax(0,1fr));}   /* Physics: Learn + Check only (MECH-4) */
.pml-levels.lv-js .lv-row:not(.on){display:none;}
.lv-name{grid-column:1/-1;margin:0;padding:var(--sp-3) var(--sp-4);font-size:var(--fs-3);font-weight:800;color:var(--navy);
  background:var(--paper-2);border-bottom:1px solid var(--line);line-height:1.3;}
.lv-name small{font-size:var(--fs-1);font-weight:600;color:var(--muted);margin-left:var(--sp-2);}
.lv-col{padding:var(--sp-3) var(--sp-4) var(--sp-4);border-right:1px solid var(--line);min-width:0;}
.lv-col:last-child{border-right:0;}
.lv-col h4{margin:0 0 var(--sp-2);display:flex;flex-direction:column;gap:2px;font-size:var(--fs-2);font-weight:800;color:var(--navy);line-height:1.3;}
.lv-col h4 small{font-size:var(--fs-1);font-weight:600;color:var(--muted);}
.lv-links{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-1);}
.lv-links a{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-2);font-weight:700;color:var(--navy);
  text-decoration:none;padding:var(--sp-2) var(--sp-3);border-radius:var(--radius);background:var(--paper-2);border:1px solid transparent;
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease);}
.lv-links a:hover,.lv-links a:focus-visible{border-color:var(--navy-3);background:#fff;}
.lv-links a.pri{background:var(--navy);color:#fff;}
.lv-links a.pri:hover,.lv-links a.pri:focus-visible{background:var(--navy-2);border-color:transparent;}
.lv-links a .n{font-size:var(--fs-1);font-weight:600;opacity:.75;}

.lv-more{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-4) 0 0;}
.lv-more a{display:inline-flex;align-items:center;font-size:var(--fs-2);font-weight:700;color:var(--navy);text-decoration:none;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--sp-2) var(--sp-3);
  transition:border-color var(--dur) var(--ease);}
.lv-more a:hover,.lv-more a:focus-visible{border-color:var(--navy-3);}
/* CURR-7: every live /learn/course/<code>, the only static links into the course pages */
.lv-codes{align-items:center;}
.lv-codes-h{flex-basis:100%;font-size:var(--fs-2);font-weight:700;color:var(--muted);}
.lv-codes a b{font-variant-numeric:tabular-nums;}
@media(max-width:640px){.lv-codes .lv-cb{display:none;}}   /* phone: the code alone, 8 chips in ~2 rows */

@media(max-width:640px){
  .lv-pick{gap:var(--sp-1);grid-template-columns:repeat(3,minmax(0,1fr));}   /* 6 levels = 3 x 2 on a phone */
  .lv-pick button{align-items:center;text-align:center;padding:var(--sp-2) var(--sp-1);}
  .lv-pick button b{font-size:var(--fs-2);}
  .lv-row,.lv-row.lv-two{grid-template-columns:1fr;}
  .lv-name small{display:block;margin:2px 0 0;}
  .lv-col{display:grid;grid-template-columns:72px minmax(0,1fr);gap:var(--sp-2);align-items:start;
    border-right:0;border-top:1px dashed var(--line);padding:var(--sp-3);}
  .lv-name + .lv-col{border-top:0;}
  .lv-col h4{margin:var(--sp-2) 0 0;}
  .lv-col h4 small{display:none;}
  .lv-links{flex-direction:row;flex-wrap:wrap;}
}