/* home-task-map.css — the Profile Home's inline site map (the whole Task
   catalogue as page content, below the scores).

   It mirrors the Practice sheet's visual language rather than sharing its
   rules, because those rules are scoped to the chrome elements
   (:is(practice-page-frame, practice-chrome)) and every one of them carries a
   piece of the overlay's geometry with it. What is genuinely shared is what
   should be: the tokens — the chrome palette and the accessible skill
   palette — so the map cannot drift in colour from the sheet it echoes. No
   hex literals live here.

   It keeps the chrome's type scale for the same reason it keeps the chrome's
   palette (STYLE_GUIDE's chrome exemption): the map is the Practice sheet's
   catalogue standing in the page. Its clamps therefore measure in cqi, never
   vw — resolved against <main>, which is already a size container. */

.home-task-map {
    box-sizing: border-box;
    width: min(100%, 1120px);
    margin: 0 auto;
    padding: 26px clamp(18px, 3.65cqi, 41px) 40px;
}

/* The small uppercase caption the app uses over a block of content: the h1
   already named the page, so this names the list. */
.home-task-map-caption {
    margin: 0 0 14px;
    color: var(--chrome-ink-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* Four columns in the order of the test, collapsing by tier rather than by
   auto-fit packing, so Listening never lands under Speaking. */
.home-task-map-columns {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px clamp(12px, 1.6cqi, 26px);
}

.home-task-map-group {
    min-width: 0;
}

.home-task-map-group[data-skill="speaking"] {
    --home-map-skill: var(--skill-dot-speaking);
    --home-map-skill-ink: var(--skill-label-speaking);
}

.home-task-map-group[data-skill="writing"] {
    --home-map-skill: var(--skill-dot-writing);
    --home-map-skill-ink: var(--skill-label-writing);
    --home-map-accent: var(--skill-accent-writing);
    --home-map-accent-deep: var(--skill-accent-deep-writing);
    --home-map-accent-tint: var(--skill-accent-tint-writing);
}

.home-task-map-group[data-skill="reading"] {
    --home-map-skill: var(--skill-dot-reading);
    --home-map-skill-ink: var(--skill-label-reading);
    --home-map-accent: var(--skill-accent-reading);
    --home-map-accent-deep: var(--skill-accent-deep-reading);
    --home-map-accent-tint: var(--skill-accent-tint-reading);
}

.home-task-map-group[data-skill="listening"] {
    --home-map-skill: var(--skill-dot-listening);
    --home-map-skill-ink: var(--skill-label-listening);
    --home-map-accent: var(--skill-accent-listening);
    --home-map-accent-deep: var(--skill-accent-deep-listening);
    --home-map-accent-tint: var(--skill-accent-tint-listening);
}

.home-task-map-group-name {
    display: flex;
    align-items: center;
    padding: 0 0 6px;
    border-bottom: 2px solid var(--home-map-skill, var(--chrome-line-muted));
    margin: 0 0 5px;
    color: var(--home-map-skill-ink, var(--chrome-ink));
    font-size: 11.5px;
    font-weight: 800;
    gap: 7px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.home-task-map-dot {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: var(--home-map-skill, var(--chrome-line-muted));
}

.home-task-map-tasks {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    gap: 2px;
    list-style: none;
}

.home-task-map-task {
    display: flex;
    align-items: center;
    padding: 9px 10px;
    border-radius: var(--chrome-radius-pill);
    color: var(--chrome-ink-soft);
    font-size: 12.5px;
    font-weight: 600;
    gap: 8px;
    text-decoration: none;
}

/* A link warms to its own Skill on hover — the same ramp the Task's page
   wears once opened — with the brand purple standing in for Speaking. */
.home-task-map-task:hover {
    background: var(--home-map-accent-tint, var(--chrome-accent-tint));
    color: var(--home-map-accent-deep, var(--chrome-accent-deep));
}

.home-task-map-task:focus-visible {
    outline: 2px solid var(--home-map-accent, var(--chrome-accent));
    outline-offset: 2px;
}

.home-task-map-task-name {
    min-width: 0;
    flex: 1 1 auto;
}

.home-task-map-task-count {
    flex: none;
    padding: 2px 7px;
    border-radius: var(--pill);
    background: var(--chrome-canvas);
    color: var(--chrome-ink-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/* Two columns, then one: the same tiers the sheet steps through, stated
   rather than packed. */
@media (max-width: 900px) {
    .home-task-map-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
    .home-task-map-columns { grid-template-columns: minmax(0, 1fr); }
    .home-task-map { padding-inline: 18px; }
}