/* ============================================================
   Dashboard — authenticated home screen
   All colors via tokens.css semantic tokens.
   ============================================================ */

.dashboard-state {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
    padding: var(--space-32) var(--space-24) var(--space-48);
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* ── Greeting ─────────────────────────────────────────────── */

.dashboard-greeting {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.dashboard-greeting-name {
    font-size: clamp(2rem, 3.2vw, 3rem);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    letter-spacing: var(--tracking-tightest);
    line-height: var(--text-hero-line-height);
    margin: 0;
}

.dashboard-greeting-name-user {
    color: var(--text-disabled);
}

.dashboard-greeting-sub-row {
    display: flex;
    align-items: center;
    gap: var(--gap-task-header-main);
    max-width: 100%;
    overflow: hidden;
}

/* Line only shown on mobile where it matches the welcome-page pattern */
.dashboard-greeting-sub-row .reading-home-task-header-line {
    display: none;
}

.dashboard-greeting-sub {
    margin: 0;
    color: var(--text-eyebrow);
    font-size: var(--text-home-header-label-size);
    font-weight: var(--text-home-header-label-weight);
    letter-spacing: var(--text-home-header-label-tracking);
    text-transform: uppercase;
}

/* ── Overview row (blue line + label + period tabs) ───────── */

/* Label left, period tabs right, with the blue accent rule running full-width underneath. */
.dashboard-overview-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--gap-task-header);
    padding-bottom: var(--space-10);
    border-bottom: 2px solid var(--accent-action);
}

/* ── Period switcher — inline with separators ─────────────── */

.dashboard-period-tabs {
    display: flex;
    align-items: center;
    gap: var(--space-24);
}

.dashboard-period-tab {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-090);
    line-height: 1;
    padding: 0;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--motion-duration-fast) var(--motion-ease-standard);
}

.dashboard-period-tab:hover {
    color: var(--text-primary);
}

/* No underline — the active state reads through the darker, heavier text only
   (the underline conflicted with the blue Overview rule right below it). */
.dashboard-period-tab[aria-pressed="true"],
.dashboard-period-tab.active {
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
}

/* ── Content-first rhythm (no boxes; thin rules separate blocks) ── */

/* Each major block after the score section gets a thin grey rule on top — the
   horizontal "dash" that separates content instead of a bordered card. */
.dashboard-section {
    border-top: var(--border-default-width) solid var(--border-subtle);
    padding-top: var(--space-28);
}

/* Thin grey vertical dash between inline items (Reading|Writing, the metrics). */
.dashboard-vrule {
    width: var(--border-default-width);
    align-self: stretch;
    background: var(--border-subtle);
    flex: 0 0 auto;
}

/* ── Score section — two big numbers, no card ── */
.dashboard-scores {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: var(--space-32);
    /* Sit a touch closer to the blue Overview rule directly above it. */
    margin-top: calc(-1 * var(--space-12));
}

.dashboard-score {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    justify-content: center;
}

.dashboard-score-value {
    font-size: clamp(1.8rem, 2.8vw, 2.2rem);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    letter-spacing: var(--tracking-tightest);
    line-height: 1;
}

.dashboard-score-value sup {
    font-size: 0.38em;
    font-weight: var(--font-weight-regular);
    color: var(--text-muted);
    vertical-align: super;
    letter-spacing: 0;
}

.dashboard-score-label {
    font-size: var(--font-size-090);
    color: var(--text-muted);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-soft-tight);
}

.dashboard-score-approx {
    color: var(--text-faint);
    font-weight: var(--font-weight-regular);
}

/* Quiet "i" next to a score label — opens the plain-language info popover
   (js/shared/info-popover.js). Deliberately faint; not icon-heroics. */
.dashboard-info-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: var(--space-4);
    padding: 0;
    border: none;
    background: none;
    color: var(--text-faint);
    cursor: pointer;
    vertical-align: middle;
    border-radius: var(--radius-pill);
}

.dashboard-info-trigger:hover,
.dashboard-info-trigger:focus-visible {
    color: var(--text-eyebrow);
}

.dashboard-info-trigger svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Reusable plain-language info popover. Shares the spell popover's visual language via tokens
   but is a separate, semantically generic class (not about spelling). Driven by
   js/shared/info-popover.js. */
.info-popover {
    position: absolute;
    z-index: 1000;
    max-width: var(--size-info-popover-width);
    padding: var(--space-10) var(--space-12);
    background: var(--bg-surface);
    border: var(--border-width-hairline) solid var(--border-default);
    border-radius: var(--radius-field);
    box-shadow: var(--shadow-dropdown-soft);
    font-size: var(--font-size-08125);
    line-height: var(--line-height-140);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
}

/* Listening / Speaking — a quiet note pushed to the right, not a card. */
.dashboard-scores-soon {
    margin: 0 0 0 auto;
    align-self: center;
    text-align: right;
    font-size: var(--font-size-075);
    color: var(--text-faint);
    line-height: 1.35;
}

/* ── Supporting metrics — one strip with vertical dashes ── */
.dashboard-metrics {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: var(--space-28);
}

.dashboard-metric {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.dashboard-metric-label {
    font-size: var(--font-size-083);
    color: var(--text-muted);
    font-weight: var(--font-weight-regular);
    letter-spacing: var(--tracking-soft-tight);
}

.dashboard-stat-value {
    font-size: 1.15rem;
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    letter-spacing: var(--tracking-tightest);
    line-height: var(--line-height-110);
}

.dashboard-stat-value sup {
    font-size: 0.9rem;
    font-weight: var(--font-weight-regular);
    color: var(--text-muted);
    vertical-align: middle;
    letter-spacing: 0;
}

@media (min-width: 768px) {
    .dashboard-stat-value sup {
        font-size: inherit;
        font-weight: inherit;
    }

    .dashboard-stat-value.dashboard-stat-no-data {
        font-size: 1.15rem;
    }
}

.dashboard-stat-meta {
    font-size: var(--font-size-083);
    color: var(--text-muted);
    margin-top: 0;
}

.dashboard-stat-meta--positive {
    color: var(--success-text);
}

.dashboard-stat-meta--negative {
    color: var(--danger-text);
}

.dashboard-stat-no-data {
    font-size: var(--font-size-090);
    color: var(--text-faint);
}

/* ── Charts row ───────────────────────────────────────────── */

/* One Reading|Writing toggle for both charts, pinned to the right above them. */
.dashboard-charts-head {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--space-16);
}

.dashboard-charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-56);
    row-gap: var(--space-32);
}

/* Content-first: no box — just the heading + its grid of bars. */
.dashboard-chart-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.dashboard-chart-title {
    font-size: var(--text-home-header-label-size);
    font-weight: var(--text-home-header-label-weight);
    letter-spacing: var(--text-home-header-label-tracking);
    line-height: var(--text-home-header-label-line-height);
    color: var(--text-eyebrow);
    text-transform: uppercase;
    margin: 0;
}

/* Chart card header: title on the left, the section toggle on the right. */
.dashboard-chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
}

/* Reading | Writing toggle — underline tabs in grey, matching the period switcher. */
.dashboard-section-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-16);
}

.dashboard-section-tab {
    border: none;
    border-bottom: 1.5px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--text-muted);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-075);
    line-height: 1;
    padding: 0 0 var(--space-4);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--motion-duration-fast) var(--motion-ease-standard);
}

.dashboard-section-tab:hover {
    color: var(--text-primary);
}

.dashboard-section-tab.active {
    border-bottom-color: var(--text-primary);
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
}

/* By task type — horizontal bars */

.dashboard-task-bars {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}

.dashboard-task-bar-row {
    display: grid;
    grid-template-columns: 88px 1fr 34px;
    align-items: center;
    gap: var(--space-10);
}

.dashboard-task-bar-label {
    font-size: var(--font-size-087);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-task-bar-track {
    height: 7px;
    background: var(--color-paper-25);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.dashboard-task-bar-fill {
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--accent-action);
    transition: width 0.4s ease;
}

.dashboard-task-bar-fill--weak {
    background: var(--danger-text);
}

.dashboard-task-bar-pct {
    font-size: var(--font-size-086);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    text-align: right;
}

/* By skill — stacked bars */

.dashboard-skill-legend {
    display: flex;
    gap: var(--space-14);
    flex-wrap: wrap;
}

.dashboard-skill-legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    font-size: var(--font-size-082);
    color: var(--text-secondary);
}

.dashboard-skill-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Using exact outcome colors from reading-practice.css (qbi-dot) */
.dashboard-skill-legend-dot--correct   { background: var(--success-text); }
.dashboard-skill-legend-dot--partial   { background: var(--warning-accent); }
.dashboard-skill-legend-dot--incorrect { background: var(--danger-text); }

.dashboard-skill-bars {
    display: flex;
    flex-direction: column;
    gap: var(--space-14);
}

.dashboard-skill-bar-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.dashboard-skill-bar-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.dashboard-skill-bar-name {
    font-size: var(--font-size-090);
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
}

.dashboard-skill-bar-count {
    font-size: var(--font-size-082);
    color: var(--text-muted);
}

.dashboard-skill-stacked-track {
    height: 7px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    display: flex;
    background: var(--color-paper-25);
}

.dashboard-skill-stacked-segment {
    height: 100%;
    transition: width 0.4s ease;
}

.dashboard-skill-stacked-segment--correct   { background: var(--success-text); }
.dashboard-skill-stacked-segment--partial   { background: var(--warning-accent); }
.dashboard-skill-stacked-segment--incorrect { background: var(--danger-text); }

.dashboard-no-skill-data {
    font-size: var(--font-size-090);
    color: var(--text-faint);
    font-style: italic;
    padding: var(--space-8) 0;
}

/* ── Weekly activity ──────────────────────────────────────── */

/* Content-first: no box — heading + the trend SVG. */
.dashboard-trend {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

/* ── Score trend chart ────────────────────────────────────── */

.dashboard-trend-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
}

.dashboard-trend-legend {
    display: flex;
    gap: var(--space-14);
}

.dashboard-trend-legend-item {
    position: relative;
    padding-left: 18px;
    font-size: var(--font-size-075);
    color: var(--text-muted);
    letter-spacing: var(--tracking-soft-tight);
}

/* Coloured line swatch — uses the section colour set on the modifier below. */
.dashboard-trend-legend-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 12px;
    height: 2px;
    border-radius: 2px;
    transform: translateY(-50%);
    background: var(--section-color, currentColor);
}

.dashboard-trend-legend-item--reading { --section-color: var(--color-blue-600); }
.dashboard-trend-legend-item--writing { --section-color: var(--success-text); }

/* Reading swatch dashed to match the dashed Reading line (see the line rule below). */
.dashboard-trend-legend-item--reading::before {
    background: repeating-linear-gradient(
        to right,
        var(--color-blue-600) 0 4px,
        transparent 4px 6.5px
    );
}

.dashboard-trend-chart {
    width: 100%;
}

.dashboard-trend-svg {
    display: block;
    width: 100%;
    height: auto;
}

.dashboard-trend-grid {
    stroke: var(--border-default);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.dashboard-trend-axis {
    fill: var(--text-faint);
    font-size: 7px;
}

.dashboard-trend-line {
    fill: none;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.dashboard-trend-dot {
    stroke: none;
}

.dashboard-trend--reading { stroke: var(--color-blue-600); }
.dashboard-trend--writing { stroke: var(--success-text); }
.dashboard-trend-dot.dashboard-trend--reading { fill: var(--color-blue-600); }
.dashboard-trend-dot.dashboard-trend--writing { fill: var(--success-text); }

/* Reading line dashed so that when Reading and Writing estimates coincide — e.g. only the
   integrated Summarize Written Text has been practised, so both section estimates are equal —
   the solid Writing line shows through the gaps and both series stay legible, instead of the
   top-drawn line hiding the one beneath it. Dots are unaffected (dash applies to the line only).
   `stroke-linecap: butt` is required: the base line uses round caps, which extend each dash by the
   stroke radius at both ends and swallow small gaps — making the dashes read as a solid line when
   the two series overlap exactly. Gap wider than the dash so the green underneath clearly shows. */
.dashboard-trend-line.dashboard-trend--reading {
    stroke-dasharray: 4 5;
    stroke-linecap: butt;
}

/* ── Insight cards ────────────────────────────────────────── */

.dashboard-insights-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-14);
}

/* Content-first: no box or fill — just icon + title + text. */
.dashboard-insight-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.dashboard-insight-icon-wrap {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard-insight-icon-wrap svg {
    width: 22px;
    height: 22px;
}

.dashboard-insight-card--focus .dashboard-insight-icon-wrap   { color: var(--danger-text); }
.dashboard-insight-card--anchor .dashboard-insight-icon-wrap  { color: var(--warning-accent); }
.dashboard-insight-card--streak .dashboard-insight-icon-wrap  { color: var(--success-text); }

.dashboard-insight-title {
    font-size: var(--font-size-094);
    font-weight: var(--font-weight-medium);
    color: var(--text-strong);
    line-height: var(--line-height-130);
    margin: 0;
}

.dashboard-insight-body {
    font-size: var(--font-size-086);
    color: var(--text-secondary);
    line-height: var(--line-height-140);
    margin: 0;
}

/* ── Empty state ──────────────────────────────────────────── */

.dashboard-empty-state {
    padding: var(--space-20) var(--space-24);
    text-align: center;
    color: var(--text-faint);
    font-size: var(--font-size-090);
    margin: 0;
}

/* ── Empty state ──────────────────────────────────────────── */

.dashboard-period-tabs--empty {
    opacity: 0.4;
    pointer-events: none;
}

.dashboard-stat-value--faint {
    color: var(--text-faint) !important;
}

.dashboard-empty-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--space-12);
    padding: var(--space-32) var(--space-24);
    flex: 1;
    min-height: 140px;
}

.dashboard-empty-placeholder-icon {
    width: 36px;
    height: 36px;
    color: var(--accent-action);
    opacity: 0.45;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard-empty-placeholder-icon svg {
    width: 36px;
    height: 36px;
}

.dashboard-empty-placeholder-title {
    font-size: var(--font-size-094);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    margin: 0;
}

.dashboard-empty-placeholder-body {
    font-size: var(--font-size-086);
    color: var(--text-secondary);
    line-height: var(--line-height-140);
    max-width: 220px;
    margin: 0;
}

/* Where to start grid — same as welcome page but narrower gap */
.dashboard-where-to-start-grid {
    grid-template-columns: 1fr 1fr;
}

/* Writing has only two tasks — keep them side by side on one line, on every width. */
.dashboard-where-to-start-grid--writing {
    grid-template-columns: 1fr 1fr;
}

/* ── Chart tab bar (mobile only) ─────────────────────────── */

.dashboard-chart-tab-bar {
    display: none; /* shown only on mobile via media query */
}

.dashboard-chart-tab {
    background: transparent;
    border: none;
    border-bottom: 1.5px solid transparent;
    border-radius: 0;
    padding: var(--space-12) 0 var(--space-10);
    color: var(--text-muted);
    font-size: var(--font-size-090);
    font-weight: var(--font-weight-regular);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--motion-duration-fast) var(--motion-ease-standard);
}

.dashboard-chart-tab:hover {
    color: var(--text-primary);
}

.dashboard-chart-tab.active,
.dashboard-chart-tab[aria-selected="true"] {
    color: var(--text-primary);
    border-bottom-color: var(--text-primary);
    font-weight: var(--font-weight-medium);
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 960px) {
    .dashboard-charts-row {
        grid-template-columns: 1fr;
    }

    .dashboard-insights-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .dashboard-state {
        gap: var(--space-16);
        padding: var(--space-20) var(--space-16) var(--space-36);
    }

    /* Tighter section rhythm on mobile — less air above each content block, e.g. score → metrics. */
    .dashboard-section {
        padding-top: var(--space-10);
    }

    .dashboard-greeting-name {
        font-size: 1.85rem;
    }

    /* Drop the greeting subtitle on a phone — it crowded the space above the filters. */
    .dashboard-greeting-sub {
        display: none;
    }

    /* Drop the "Overview" eyebrow — the period tabs alone read fine on a phone. */
    .dashboard-overview-row .reading-home-task-header-label {
        display: none;
    }

    .dashboard-overview-row {
        align-items: baseline;
        gap: var(--space-12);
    }

    /* Score: Reading + Writing stay on ONE line; drop the Listening/Speaking note and the
       "approximate" sub-text so the two numbers fit side by side. */
    .dashboard-scores-soon,
    .dashboard-score-approx {
        display: none;
    }

    .dashboard-scores {
        flex-wrap: nowrap;
        gap: var(--space-16);
    }

    .dashboard-score-value {
        font-size: 1.5rem;
    }

    /* Metrics: all three on one line too. */
    .dashboard-metrics {
        flex-wrap: nowrap;
        gap: var(--space-12);
    }

    .dashboard-stat-value {
        font-size: 1.05rem;
    }

    .dashboard-insights-row {
        grid-template-columns: 1fr;
    }

    .dashboard-task-bar-row {
        grid-template-columns: 72px 1fr 30px;
    }
}

@media (max-width: 767px) {
    /* Charts: stack BOTH blocks (By Task Type + By Skill), each with its own Reading|Writing
       toggle. No top-level Task/Skill switcher — that second filter hid half the data. */
    .dashboard-charts-row {
        display: flex;
        flex-direction: column;
        gap: var(--space-32);
    }

    .dashboard-chart-tab-bar {
        display: none;
    }

    /* 4. Weekly activity: hidden on mobile */
    #dashboardWeeklyActivityCard {
        display: none;
    }

    /* 5. Insights + product hints: hidden on mobile */
    #dashboardInsights {
        display: none;
    }

    /* Where to start: single column on mobile — Writing's two tasks stack too (not enough width). */
    .dashboard-where-to-start-grid,
    .dashboard-where-to-start-grid--writing {
        grid-template-columns: 1fr;
    }
}