@layer components {
    /* =============================================================
       Dashboard — post-onboarding landing pages for Professional and
       Company personas. KPI tiles + task list + recent activity.

       Heading sizes consume the shared functional-area scale defined
       in tokens/app-typography.css:
         --fs-heading      24 px  page heading (greeting)
         --fs-subheading   20 px  section heading
       Body-tier sizes elsewhere (KPI value 36px, task title 16px) are
       not headings — they keep literal sizes or use --fs-body tokens.
       ============================================================= */

    .c-dashboard__header {
        margin-block-end: var(--space-7);
    }

    .c-dashboard__greeting {
        font-size: var(--fs-heading);
        font-weight: 500;
        color: var(--color-ink-h1);
        margin: 0 0 var(--space-2) 0;
    }

    .c-dashboard__subtitle {
        font-size: var(--fs-body-lg, 1.125rem);
        color: var(--color-ink-soft, var(--color-ink));
        margin: 0;
    }

    /* KPI tile grid ------------------------------------------------- */

    .c-dashboard__kpis {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
        gap: var(--space-4);
        margin-block-end: var(--space-8);
    }

    .c-kpi {
        background: var(--color-surface, #fff);
        border: 1px solid var(--color-line, #e5e7eb);
        border-radius: var(--radius-md, 0.5rem);
        padding: var(--space-5);
    }

    /* Clickable variant — outer element is an <a>. Strip default link
       chrome, declare focus-visible affordance for keyboard users, and
       lift slightly on hover so the whole tile reads as a target. */
    .c-kpi--clickable {
        display: block;
        color: inherit;
        text-decoration: none;
        cursor: pointer;
        transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
    }

    .c-kpi--clickable:hover {
        border-color: var(--color-ink-mute, var(--color-ink));
        box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.06));
    }

    .c-kpi--clickable:focus-visible {
        outline: 2px solid var(--color-accent, var(--color-ink));
        outline-offset: 2px;
    }

    .c-kpi__value {
        font-size: 2.25rem; /* 36px — fixed; see sizing note above */
        font-weight: 700;
        color: var(--color-ink);
        line-height: 1.1;
        margin-block-end: var(--space-2);
    }

    .c-kpi__label {
        font-size: var(--fs-ui-sm, 0.875rem);
        font-weight: 600;
        color: var(--color-ink-mute, var(--color-ink));
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .c-kpi__hint {
        font-size: var(--fs-ui-sm, 0.8125rem);
        color: var(--color-ink-mute, var(--color-ink-mute));
        margin-block-start: var(--space-2);
    }

    /* Section blocks ------------------------------------------------ */

    .c-dashboard__section {
        margin-block-end: var(--space-8);
    }

    .c-dashboard__section-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--space-3);
        margin-block-end: var(--space-4);
    }

    .c-dashboard__section-title {
        font-size: var(--fs-subheading);
        font-weight: 600;
        color: var(--color-ink-h2);
        margin: 0;
    }

    /* Task list ----------------------------------------------------- */

    .c-task-list {
        list-style: none;
        margin: 0;
        padding: 0;
        background: var(--color-surface, #fff);
        border: 1px solid var(--color-line, #e5e7eb);
        border-radius: var(--radius-md, 0.5rem);
        overflow: hidden;
    }

    /* Row container. When there's an action URL, .c-task__link inside is
       the flex row and carries hover/focus state. When there's no action
       URL the row content sits directly inside the <li> via the same
       flex layout — informational rows look identical, just not
       interactive. */
    .c-task {
        border-block-end: 1px solid var(--color-line, #e5e7eb);
    }

    .c-task:last-child {
        border-block-end: none;
    }

    /* Informational layout — no action URL. The <li>'s direct children
       (.c-task__main, .c-task__due) sit in a flex row. */
    .c-task:not(:has(> .c-task__link)) {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        padding: var(--space-4) var(--space-5);
    }

    /* Whole-row anchor. Catches the click for any pixel of the row
       (Fitts's-law win on wide monitors; entire-row touch target on
       mobile). The visible "action" span at the end is decorative —
       a child of this anchor, not a separate link — so there's only
       one focus stop per row and one click target per row. Native
       browser semantics carry middle-click / cmd-click / right-click. */
    .c-task__link {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        padding: var(--space-4) var(--space-5);
        color: inherit;
        text-decoration: none;
        cursor: pointer;
        transition: background-color 120ms ease-out;
    }

    /* Hover only on devices that genuinely hover with a fine pointer
       — keeps phones and hybrid touch-laptops from getting a sticky
       hover background after a tap. */
    @media (hover: hover) and (pointer: fine) {
        .c-task__link:hover {
            background: var(--color-surface-alt, #f8fafc);
        }
    }

    /* Keyboard focus ring on the link, not the <li> — keyboard users
       land here (one tab stop per row), Enter activates. */
    .c-task__link:focus-visible {
        outline: 2px solid var(--color-info, #2563eb);
        outline-offset: -2px;
        background: var(--color-surface-alt, #f8fafc);
    }

    .c-task__main {
        flex: 1 1 auto;
        min-width: 0;
    }

    .c-task__title {
        font-size: var(--fs-body, 1rem);
        font-weight: 600;
        color: var(--color-ink);
    }

    .c-task__meta {
        font-size: var(--fs-ui-sm, 0.875rem);
        color: var(--color-ink-mute, var(--color-ink));
        margin-block-start: var(--space-1);
    }

    .c-task__due {
        font-size: var(--fs-ui-sm, 0.875rem);
        font-weight: 600;
        color: var(--color-warn-deep, var(--color-ink));
        white-space: nowrap;
    }

    /* Action affordance — visually a ghost button, but it's a <span>
       since the whole row is already the anchor. Click is caught by
       the parent .c-task__link via hit-test bubbling, so the visible
       button stays "clickable" without being a real focusable element.
       Hovering the action specifically darkens it a touch more than
       the row hover, so users see they're aimed at the right thing. */
    .c-task__action {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: var(--space-1, 0.25rem);
        padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
        border: 1px solid var(--color-line, #e5e7eb);
        border-radius: var(--radius-sm, 4px);
        font-size: var(--fs-ui-sm, 0.875rem);
        font-weight: 600;
        color: var(--color-info, #2563eb);
        background: transparent;
        transition: background-color 120ms ease-out, border-color 120ms ease-out;
    }

    @media (hover: hover) and (pointer: fine) {
        .c-task__link:hover .c-task__action {
            background: var(--color-surface, #ffffff);
            border-color: var(--color-info, #2563eb);
        }
    }

    /* Quiet variant — recent-activity rows. Action becomes an
       understated text link (no border, no ghost-button chrome) so the
       whole row looks like a calm list entry, while still being fully
       clickable. */
    .c-task__action--quiet {
        padding: 0;
        border: none;
        font-weight: 500;
        color: var(--color-info, #2563eb);
        background: transparent;
    }

    .c-task--quiet .c-task__title {
        font-weight: 500;
    }

    .c-task--quiet .c-task__meta {
        color: var(--color-ink-mute, var(--color-ink-mute));
    }

    /* Mobile collapse ---------------------------------------------- */

    @media (max-width: 40rem) {
        .c-task__link,
        .c-task:not(:has(> .c-task__link)) {
            flex-wrap: wrap;
        }
    }
}