/* learn-hub.css — the /learn/ hub (plan C, task C5): templates/learn/index.html, on top of the studio kit
   (studio.css, frozen) and learn-course.css (the course root, the strip's LED dots reused as the progress rail).

   Look: the hero is the instrument and the one loud thing on the page. The Sub guide's title in Archivo's width
   axis, each word at its own width (sub wide and heavy, stab narrow, swing wide again); three 808 genre keys over
   16 step LEDs in a charcoal well; the Grid guide's 4 x 4 MPC pads on a hardware panel. Below it everything is
   quiet: a charcoal progress rail (15 LEDs, the continue key in the target lesson's part color) and the course map,
   one row per part, its lesson tiles numbered on a pad that lights in the part color when the lesson is done.
   Hardware stays charcoal in both themes; surfaces follow brizm's theme through the kit tokens.

   Layout answers the hub's own width (container query on .learn-hub), not the viewport: the sidebar changes it. */

.learn-hub {
    container-type: inline-size;
    --hub-on-accent: #16171A;
}

/* ── hero ────────────────────────────────────────────────────────────── */
.learn-hub .hub-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.9rem;
    margin: 0.4rem 0 2.6rem;
}
.hub-title {
    margin: 0;
    font-family: var(--st-font);
    font-size: 3.4rem;
    font-size: clamp(3rem, 18.5cqi, 4.6rem);
    font-weight: 850;
    line-height: 0.84;
    letter-spacing: -0.04em;
    color: var(--st-ink);
}
.hub-line { display: block; white-space: nowrap; }
.hub-w--sub { font-stretch: 125%; font-weight: 900; }
.hub-w--stab { font-stretch: 62%; font-weight: 850; letter-spacing: -0.02em; }
.hub-w--and { font-stretch: 72%; font-weight: 450; letter-spacing: -0.02em; }
.hub-w--swing { font-stretch: 125%; font-weight: 850; }
.hub-lede {
    max-width: 40ch;
    margin: 1.35rem 0 1.5rem;
    font-size: 1.2rem;
    line-height: 1.45;
    color: var(--st-ink);
}

/* the three 808 genre keys, then the step LEDs that run with them */
.hub-genres {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    max-width: 34rem;
}
.hub-genre { min-height: 6.4rem; }
.hub-genre .st-pad-name { font-size: 1.32rem; font-stretch: 116%; }
.hub-genre .st-pad-meta { margin-top: 0.3rem; }
.hub-leds {
    --st-n: 16;
    max-width: 34rem;
    margin: 0.75rem 0 0;
    padding: 7px;
    gap: 4px;
    border-radius: 9px;
    background: var(--st-well);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
    list-style: none;
}
.hub-leds .st-led {
    --hub-g: var(--st-808-red);
    height: 9px;
    min-height: 9px;
    border-radius: 2px;
    background: var(--hub-g);
    opacity: 0.26;
    box-shadow: none;
}
.hub-leds .st-led[data-group="1"] { --hub-g: var(--st-808-orange); }
.hub-leds .st-led[data-group="2"] { --hub-g: var(--st-808-yellow); }
.hub-leds .st-led[data-group="3"] { --hub-g: var(--st-808-ivory); }
.hub-leds .st-led.is-on {
    background: var(--hub-g);
    opacity: 1;
    box-shadow: 0 0 10px 1px var(--hub-g);
}
.hub-note {
    max-width: 60ch;
    margin: 1rem 0 0;
    color: var(--st-muted);
    font-size: 0.93rem;
    line-height: 1.5;
}

/* the MPC: 4 x 4 square pads, each row tinted by its pad color, lit in it on a hit */
.hub-mpc {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}
.hub-pad {
    aspect-ratio: 1;
    min-height: 0;
    padding: 0.55rem 0.5rem 0.5rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--st-pc) 13%, var(--st-key));
}
.hub-pad::before {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--st-pc);
    box-shadow: none;
}
.hub-pad-name {
    font-size: 0.8rem;
    font-weight: 700;
    font-stretch: 86%;
    line-height: 1.08;
    overflow-wrap: anywhere;
}
.hub-pad-key {
    position: absolute;
    top: 0.42rem;
    right: 0.5rem;
    font: inherit;
    font-size: 0.74rem;
    font-weight: 700;
    font-stretch: 118%;
    line-height: 1;
    color: var(--st-panel-muted);
}
.hub-pad[data-pad="guach"] .hub-pad-name { font-stretch: 66%; }   /* the longest name fits a 75 px pad on one line */
.hub-pad.is-hit .hub-pad-key { color: #fff; }
.hub-hint {
    margin: 0.7rem 0 0;
    color: var(--st-muted);
    font-size: 0.88rem;
    line-height: 1.45;
}
@media (hover: none) {
    .hub-pad-key,
    .hub-hint-keys { display: none; }
}

/* ── how the course works ────────────────────────────────────────────── */
.hub-howto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: 0.9rem 1.7rem;
    margin: 0 0 3.2rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--st-line);
}
.hub-howto p {
    margin: 0;
    color: var(--st-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}
.hub-howto strong {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--st-ink);
    font-size: 1.02rem;
    font-weight: 760;
    font-stretch: 106%;
}

/* ── course map ──────────────────────────────────────────────────────── */
.learn-hub .hub-map { margin: 0; }
.hub-map-title {
    margin: 0 0 1rem;
    font-family: var(--st-font);
    font-size: clamp(1.7rem, 4.4cqi, 2.4rem);
    font-weight: 820;
    font-stretch: 114%;
    line-height: 1;
    letter-spacing: -0.025em;
}

/* the progress rail: the strip's LEDs, the count, the continue key */
.hub-progress {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem 1.4rem;
    margin: 0 0 2.6rem;
    padding: 10px 10px 10px 18px;
    border: 1px solid rgba(0, 0, 0, 0.55);
    border-radius: 14px;
    background: linear-gradient(180deg, var(--st-panel-2), var(--st-panel));
    color: var(--st-panel-ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 18px 34px -26px rgba(0, 0, 0, 0.9);
}
.hub-progress-read { min-width: 0; }
.hub-progress-count {
    margin: 0 0 0.55rem;
    font-size: 1.02rem;
    font-weight: 800;
    font-stretch: 110%;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.hub-dots { justify-content: flex-start; gap: 5px; padding: 0; }
.hub-dots .learn-dot { width: 14px; height: 14px; }
.hub-dots .learn-dot.is-part-start { margin-inline-start: 10px; }
.learn-hub a.hub-continue {
    --to: var(--st-808-orange);
    display: inline-grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.9rem;
    min-height: 3.6rem;
    padding: 0.5rem 0.7rem 0.6rem 1.05rem;
    border-radius: 10px;
    background: var(--to);
    color: var(--hub-on-accent);
    font-family: var(--st-font);
    text-decoration: none;
    box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.learn-hub a.hub-continue:hover { color: var(--hub-on-accent); filter: brightness(1.07); }
.learn-hub a.hub-continue:active { transform: translateY(2px); box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.26); }
.hub-continue-verb {
    grid-column: 1;
    font-size: 0.82rem;
    font-weight: 700;
    font-stretch: 92%;
    line-height: 1.2;
    opacity: 0.8;
}
.hub-continue-to {
    grid-column: 1;
    font-size: 1.12rem;
    font-weight: 820;
    font-stretch: 110%;
    line-height: 1.15;
    letter-spacing: -0.01em;
}
.hub-continue-n { opacity: 0.62; font-variant-numeric: tabular-nums; }
.hub-continue-icon {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.16);
}

/* one row per part: the part's pad and words, then its lessons */
.hub-part {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin: 0 0 2.6rem;
}
.hub-part-head {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
}
.hub-part-n {
    flex: none;
    display: flex;
    align-items: flex-end;
    width: 3rem;
    height: 3rem;
    padding: 0 0.42rem 0.36rem;
    border-radius: 8px;
    background: var(--part);
    color: var(--hub-on-accent);
    font-size: 1.55rem;
    font-weight: 850;
    font-stretch: 125%;
    line-height: 1;
    font-variant-numeric: tabular-nums lining-nums;
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.hub-part-title {
    margin: 0.05rem 0 0.3rem;
    font-family: var(--st-font);
    font-size: 1.3rem;
    font-weight: 800;
    font-stretch: 112%;
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.hub-part-desc {
    max-width: 46ch;
    margin: 0;
    color: var(--st-muted);
    font-size: 0.92rem;
    line-height: 1.45;
}
.hub-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr));
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.hub-cards > li { margin: 0; }
.learn-hub a.hub-card {
    --part: var(--learn-accent);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: 0.8rem;
    height: 100%;
    min-height: var(--st-target);
    padding: 0.75rem 0.85rem 0.8rem;
    border: 1px solid var(--st-line);
    border-radius: 12px;
    background: var(--st-surface);
    color: var(--st-ink);
    text-decoration: none;
    transition: border-color 0.15s;
}
.learn-hub a.hub-card:hover { border-color: var(--part); color: var(--st-ink); }
.learn-hub a.hub-card.is-next { border-color: var(--part); box-shadow: inset 0 0 0 1px var(--part); }
.hub-card-n {                    /* the lesson number on a pad: dim in the part tint, lit in it when done */
    position: relative;
    display: flex;
    align-items: flex-end;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0 0.3rem 0.28rem;
    border-radius: 7px;
    background: #34383D;
    background: color-mix(in srgb, var(--part) 24%, #34383D);
    color: #ECEAE3;
    font-size: 1.02rem;
    font-weight: 850;
    font-stretch: 122%;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums lining-nums;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.hub-card-n::before {
    content: "";
    position: absolute;
    top: 0.38rem;
    left: 0.4rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
}
.hub-card.is-done .hub-card-n {
    background: var(--part);
    color: var(--hub-on-accent);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.hub-card.is-done .hub-card-n::before { background: var(--st-led); box-shadow: 0 0 7px 2px var(--st-led); }
.hub-card-text { min-width: 0; }
.hub-card-title {
    display: block;
    font-size: 1rem;
    font-weight: 760;
    font-stretch: 106%;
    line-height: 1.22;
}
.hub-card-does {
    display: block;
    margin-top: 0.2rem;
    color: var(--st-muted);
    font-size: 0.86rem;
    line-height: 1.38;
}

/* ── taking it to an MPC ─────────────────────────────────────────────── */
.hub-mpcnote {
    max-width: 66ch;
    margin: 3.2rem 0 0.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--st-line);
}
.hub-mpcnote-title {
    margin: 0 0 0.6rem;
    font-family: var(--st-font);
    font-size: 1.3rem;
    font-weight: 780;
    font-stretch: 110%;
    line-height: 1.15;
}
.hub-mpcnote p {
    margin: 0 0 0.9em;
    color: var(--st-muted);
    font-size: 0.98rem;
}

/* ── wider hub: the pads beside the title, parts beside their lessons ── */
@container (min-width: 600px) {
    .learn-hub .hub-hero {
        grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
        align-items: center;
        gap: 2.2rem;
    }
    .hub-title { font-size: clamp(3.6rem, 11.2cqi, 6rem); }
    .hub-genre { min-height: 6.6rem; }
}
@container (min-width: 760px) {
    .hub-part {
        grid-template-columns: 15.5rem minmax(0, 1fr);
        gap: 1.6rem;
    }
}
@container (max-width: 420px) {
    .hub-genre { min-height: 5.6rem; padding-inline: 0.6rem; }
    .hub-genre .st-pad-name { font-size: 1.08rem; font-stretch: 108%; }
    .hub-genre .st-pad-meta { font-size: 0.72rem; }
    .hub-lede { font-size: 1.1rem; }
    .hub-progress { padding-left: 14px; }
    .learn-hub a.hub-continue { width: 100%; }
    .hub-dots { gap: 4px; }
    .hub-dots .learn-dot { width: 12px; height: 12px; }
    .hub-dots .learn-dot.is-part-start { margin-inline-start: 7px; }
}

@media print {
    .hub-mpc-wrap,
    .hub-genres,
    .hub-leds,
    .hub-note,
    .hub-progress { display: none !important; }
}