/* ─── License & Insurance Verification Card (.hzo-credentials) ──────────────
   W-060 — a structured credentials card: one row per license / certification /
   insurance / bond, each with a server-computed status pill (Active / Expires
   soon / Expired), an optional masked number + click-to-copy, and a
   "Verify on {board}" deep link. Markup is emitted by credentials.php
   ([hzo_credentials] > [hzo_credential] rows); this sheet styles ONLY the
   classes that handler outputs.

   The card is fully functional WITHOUT JS — status pills, verify links and the
   full (sr-only) number are all server-rendered. credentials.js only adds the
   copy + mask-reveal convenience; the reduced-motion / forced-colors passes at
   the foot keep the card readable when either is active.

   Tokens only: --surface / --border / --text-* / state --*-bg + --*-ink (pills),
   --brand-text / --accent-text (ink + icon tint), --space-* (rhythm),
   --radius-* (panel + pill + control), --shadow-sm (rest elevation), --fs-* /
   --fw-* / --tracking-* (type), --dur-* / --ease-* (transitions). No hardcoded
   hex, no bare z-index (the card claims none). */

.hzo-credentials-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Optional card heading (a real <h2>, styled by base.css) — only owns rhythm. */
.hzo-credentials__heading {
    margin: 0;
}

/* ── Layouts ────────────────────────────────────────────────────────────────
   grid  (default) — responsive card grid, one credential per card.
   list  — a single column of the same cards, full width.
   table — compact divided rows inside one bordered panel (no per-row chrome). */
.hzo-credentials {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: var(--space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
}
.hzo-credentials--list {
    grid-template-columns: 1fr;
}
.hzo-credentials--table {
    display: block;
    border: var(--border-1) solid var(--surface-border);
    border-radius: var(--radius-panel);
    overflow: hidden;
}

/* ── Item (the credential card) ─────────────────────────────────────────────
   container-type lets the label/value rows collapse to a stack on a narrow
   card (no media query, no JS). */
.hzo-credentials__item {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--surface);
    border: var(--border-1) solid var(--surface-border);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-sm);
}
/* Table layout strips the card chrome down to divided rows. */
.hzo-credentials--table .hzo-credentials__item {
    background: transparent;
    border: 0;
    border-bottom: var(--border-1) solid var(--border);
    border-radius: 0;
    box-shadow: none;
    padding: var(--space-md) var(--space-lg);
}
.hzo-credentials--table .hzo-credentials__item:last-child {
    border-bottom: 0;
}

/* ── Head: type icon + label + status pill ──────────────────────────────── */
.hzo-credentials__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}
.hzo-credentials__type {
    margin-inline-end: auto;          /* push the status pill to the far edge */
    color: var(--text-heading);
    font-weight: var(--fw-600);
}

/* Shared icon base (every SVG the handler emits carries this class). */
.hzo-credentials__icon {
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
}
/* The type glyph (direct child of head) reads at the trust-icon accent tint,
   a step larger than the inline icons. */
.hzo-credentials__head > .hzo-credentials__icon {
    width: 1.5em;
    height: 1.5em;
    color: var(--accent-text);
}

/* ── Status pill (server-computed; word + glyph carry meaning, never colour
   alone — the icon is decorative reinforcement) ─────────────────────────── */
.hzo-credentials__status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-75);
    font-weight: var(--fw-600);
    line-height: var(--lh-none);
    /* neutral fallback; the data-status variants below tint per state */
    background: var(--bg-alt);
    color: var(--text-body);
}
.hzo-credentials__status .hzo-credentials__icon {
    width: 1em;
    height: 1em;
}
.hzo-credentials__status[data-status="active"] {
    background: var(--success-bg);
    color: var(--success-ink);
}
.hzo-credentials__status[data-status="expiring"] {
    background: var(--warning-bg);
    color: var(--warning-ink);
}
.hzo-credentials__status[data-status="expired"] {
    background: var(--error-bg);
    color: var(--error-ink);
}

/* ── Meta (definition list: number / issued by / expires) ───────────────── */
.hzo-credentials__meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin: 0;
}
.hzo-credentials__field {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: var(--space-sm);
    align-items: baseline;
}
.hzo-credentials__label {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--fs-75);
    font-weight: var(--fw-600);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}
.hzo-credentials__meta dd {
    margin: 0;
    color: var(--text-body);
}
.hzo-credentials__meta time {
    font-variant-numeric: tabular-nums;
}

/* Number row: value + optional mask toggle + optional copy, inline. */
.hzo-credentials__number {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}
.hzo-credentials__num {
    color: var(--text-heading);
    font-weight: var(--fw-600);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* Clipped full-number span — always in the DOM for AT + print (PROGRESSIVE
   ENHANCEMENT: the widget is complete without JS). */
.hzo-credentials__vh {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Inline action buttons (mask toggle + copy) ─────────────────────────── */
.hzo-credentials__mask-toggle,
.hzo-credentials__copy {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    min-height: 1.75em;
    padding: var(--space-2xs);
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--accent-text);
    font: inherit;
    font-size: var(--fs-75);
    line-height: var(--lh-none);
    cursor: pointer;
    transition: color var(--dur-1) var(--ease-standard),
                background-color var(--dur-1) var(--ease-standard);
}
.hzo-credentials__mask-toggle:hover,
.hzo-credentials__copy:hover {
    background: var(--bg-alt);
    color: var(--brand-text);
}
.hzo-credentials__mask-toggle:focus-visible,
.hzo-credentials__copy:focus-visible {
    outline: var(--border-2) solid var(--focus-ring);
    outline-offset: 2px;
}
/* Mask toggle carries BOTH glyphs (eye = masked, eye-off = revealed); CSS shows
   exactly one per aria-pressed state, so no JS icon swap is needed and the button
   is correct even mid-enhancement. */
.hzo-credentials__mask-toggle .hzo-credentials__icon:last-of-type,
.hzo-credentials__mask-toggle[aria-pressed="true"] .hzo-credentials__icon:first-of-type {
    display: none;
}
.hzo-credentials__mask-toggle[aria-pressed="true"] .hzo-credentials__icon:last-of-type {
    display: inline;
}

/* Brief "Copied" acknowledgement (credentials.js swaps the text + this class). */
.hzo-credentials__copy.is-copied {
    color: var(--success-ink);
}
/* Copy fell back to manual (clipboard blocked / insecure context): the number
   text is selected + the label reads "Press Ctrl+C" — a still-working recovery,
   never a dead end (never colour-only; the relabel carries the meaning). */
.hzo-credentials__copy.is-copy-failed {
    color: var(--warning-ink);
}

/* ── Verify deep link — pinned to the card foot so links align across cards
   of differing height ───────────────────────────────────────────────────── */
.hzo-credentials__verify {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    align-self: flex-start;
    margin-top: auto;
    color: var(--brand-text);
    font-size: var(--fs-100);
    font-weight: var(--fw-600);
    text-decoration: none;
    transition: color var(--dur-1) var(--ease-standard);
}
.hzo-credentials__verify:hover {
    color: var(--brand-hover-on-light);
    text-decoration: underline;
}
.hzo-credentials__verify:focus-visible {
    outline: var(--border-2) solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-control);
}

/* ── Narrow card: stack each label above its value (no JS) ───────────────── */
@container (max-width: 22rem) {
    .hzo-credentials__field {
        grid-template-columns: 1fr;
        gap: var(--space-2xs);
    }
}

/* ── Reduced motion — the card carries no essential motion; kill the hover /
   state transitions so nothing animates (content stays fully visible). ──── */
@media (prefers-reduced-motion: reduce) {
    .hzo-credentials__mask-toggle,
    .hzo-credentials__copy,
    .hzo-credentials__verify {
        transition: none;
    }
}

/* ── Forced colors — state is carried by the pill's WORD, not colour alone, so
   High Contrast stays correct. Restore a visible edge on pills + action
   buttons and underline the verify affordance. ─────────────────────────── */
@media (forced-colors: active) {
    .hzo-credentials__status {
        border: var(--border-1) solid currentColor;
    }
    .hzo-credentials__mask-toggle,
    .hzo-credentials__copy {
        border: var(--border-1) solid currentColor;
    }
    .hzo-credentials__verify {
        text-decoration: underline;
    }
}

/* ── Print / PDF (G13) — home-service customers routinely print or PDF an
   estimate / service page, so the credentials must survive it: force-reveal the
   card even if it was wrapped in scroll-reveal (opacity:0 below the fold), print
   the FULL number (drop the masked span, un-clip the sr-only full number), spell
   out the verify URL as visible text, and hide the copy / mask chrome (useless on
   paper). ─────────────────────────────────────────────────────────────────── */
@media print {
    .hzo-credentials.hzo-reveal,
    .hzo-credentials.hzo-reveal--init,
    .hzo-credentials .hzo-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
    .hzo-credentials__item {
        break-inside: avoid;
        box-shadow: none;
    }
    /* Show the full number: the masked visible span is aria-hidden decoration on
       paper; the clipped full-number span becomes the printed value. */
    .hzo-credentials__num[data-hzo-mask],
    .hzo-credentials__mask-toggle,
    .hzo-credentials__copy {
        display: none !important;
    }
    .hzo-credentials__vh {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: normal;
        color: var(--text-heading);
        font-weight: var(--fw-600);
    }
    /* Print the destination so a paper reader can still reach the board lookup. */
    .hzo-credentials__verify[href]::after {
        content: " (" attr(href) ")";
        font-weight: var(--fw-400);
        word-break: break-all;
    }
}