/* =============================================================================
   forms-catalog.css — the cards on /Home/Forms.
   Author: Sharmila Parthiban.  18 Sep 2026.

   WHY THIS FILE EXISTS RATHER THAN A <style> BLOCK IN THE VIEW
   The page it replaces carried sixty lines of CSS inside @section Styles. That
   is invisible to every tool that looks at stylesheets (the contrast checker in
   tools/theme-contrast.mjs reads .css files), it is re-sent on every request
   because inline style cannot be cached, and it puts layout decisions in the
   middle of markup where the next person editing the cards will not find them.

   IT LOADS AFTER brand.css, so the rules in brand.css's own header apply to this
   file and are honoured here:
     - NO font-family is declared anywhere below. The page inherits Inter.
     - Focus is expressed through var(--focus-ring) / var(--focus-line), never as
       a hard-coded width, so a change to the site-wide ring propagates in.

   THE LAYOUT PROBLEM THIS SOLVES
   The old grid was repeat(auto-fit, minmax(15rem, 1fr)) holding cards of a title,
   a code and a chip — so on a wide screen thirteen near-identical 15rem tiles sat
   in one undifferentiated block. Nothing told a visitor which forms were theirs,
   which they could start, or which needed an existing package. The cards are
   wider now (18rem) because each carries a sentence, and they are rendered in
   three titled GROUPS, so the shape of the page answers "where do I begin?"
   before any card is read.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   THE GROUPS
   -------------------------------------------------------------------------- */
.fc-group { margin-top: var(--sp-4); }
.fc-group:first-of-type { margin-top: var(--sp-3); }

.fc-group__head {
    /* The rule under a group heading is the cheapest way to make three groups
       read as three groups on a page that is otherwise one long scroll. */
    border-bottom: 1px solid var(--c-line, #dfe1e2);
    padding-bottom: var(--sp-1);
    margin-bottom: var(--sp-2);
}

.fc-group__head h2 {
    margin: 0;
    font-size: var(--fs-md);
    line-height: var(--lh-snug);
}

.fc-group__head p {
    margin: var(--sp-05) 0 0;
    color: var(--c-ink-muted);
    font-size: var(--fs-2xs);
    max-width: 70ch;   /* a measure, not the full page width — long lines lose the reader */
}

.fc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: var(--sp-2);
    align-items: stretch;
}

/* -----------------------------------------------------------------------------
   THE CARD

   --card-accent is set inline from FormTypeInfo.Accent, so each card wears its
   own form's colour. Every rule below has a fallback, so a card whose accent is
   missing still renders correctly rather than transparently.
   -------------------------------------------------------------------------- */
.fc-card {
    --card-accent: var(--c-primary);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-05);
    padding: var(--sp-2);
    background: var(--c-paper);
    border: 1px solid var(--c-line, #dfe1e2);
    border-top: 4px solid var(--card-accent);
    border-radius: var(--radius-lg);
    transition: box-shadow .12s ease, transform .12s ease, border-color .12s ease;
}

/*  HOVER IS FOR POINTERS ONLY. On a touch screen :hover sticks after a tap, so a
    card stays lifted until something else is tapped — which reads as "selected".
    The media query is what keeps that from happening. */
@media (hover: hover) {
    .fc-card:hover {
        box-shadow: var(--shadow-2);
        transform: translateY(-2px);
    }
}

/*  MOTION IS A PREFERENCE. The lift and the transition both go for anyone who
    has asked their system for reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .fc-card { transition: none; }
    .fc-card:hover { transform: none; }
}

/*  FOCUS ON THE CARD, NOT JUST ITS BUTTON. The whole card is clickable for a
    pointer (see forms-catalog.js), and the button inside it is what a keyboard
    reaches — so when that button has focus the ring is drawn around the WHOLE
    card. A 3px ring around a small button inside a large card leaves a keyboard
    user hunting for which card they are on. */
.fc-card:focus-within {
    box-shadow: var(--focus-ring);
    border-color: var(--focus-line);
}

.fc-card__top {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

/*  The accent dot. Decorative — aria-hidden in the markup — and the form's colour
    is never the only thing carrying a meaning (Section 508): the code beside it
    and the title below it say the same thing in words. */
.fc-dot {
    width: .7rem;
    height: .7rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--card-accent);
    border: 1px solid rgba(0, 0, 0, .25);
}

/*  THE CODE AND FORM NUMBER. Tabular figures so "Form 29" and "Form 39" are
    distinguishable in a column of thirteen — the same reasoning as .u-mono on
    licence numbers, and the reason the old card's bare two-letter code was not
    enough: a caller quotes the NUMBER to MDE, not the letters. */
.fc-card__code {
    margin: 0;
    font-size: var(--fs-4xs);
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
}

.fc-card__title {
    margin: 0;
    font-size: var(--fs-2xs);
    line-height: var(--lh-snug);
}

/*  The one-line summary. This is the thing the old card did not have and the
    reason it could not be used: the whole point of the form, in a sentence. */
.fc-card__summary {
    margin: 0;
    font-size: var(--fs-3xs);
    line-height: var(--lh-normal);
    color: var(--c-ink);
}

/*  Pushes the chips and the button to a common baseline so a row of cards lines
    up however many lines a title or summary wraps to. */
.fc-card__spacer { flex: 1 1 auto; min-height: var(--sp-1); }

.fc-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-05);
    margin: 0;
}

/*  THE ACTION. Built by forms-catalog.js, replacing the <details> that is the
    no-JavaScript baseline. Left-aligned and full-width-on-its-own-line so it is
    a target rather than a word: the instruction was that clicking the card opens
    the explanation, and a visible button is what tells anyone that is possible. */
.fc-card__action {
    align-self: stretch;
    justify-content: center;
    margin-top: var(--sp-1);
}

/*  THE POINTER AFFORDANCE. Only applied once the script has made the card
    clickable — a cursor that promises a click on a card that does nothing is
    worse than no cursor at all. */
.fc-card[data-fc-clickable="true"] { cursor: pointer; }

/* -----------------------------------------------------------------------------
   THE NO-JAVASCRIPT BASELINE

   forms-catalog.js normally removes this <details> and puts a button in its
   place, so most people never see these rules. They still have to be right: with
   the script off (or blocked by a managed profile) this IS the explanation, and a
   page whose fallback is unstyled looks broken rather than plain — which is the
   difference between a visitor trusting the content and doubting it.

   The <summary> is deliberately styled to look like the button that replaces it,
   so the two paths are the same page and not two designs.
   -------------------------------------------------------------------------- */
.fc-brief { margin-top: var(--sp-1); }

.fc-brief > summary {
    /* list-style:none removes the disclosure triangle in Firefox/Chrome; the
       ::-webkit-details-marker rule is what removes it in older WebKit. */
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-05);
    padding: var(--sp-05) var(--sp-1);
    font-size: var(--fs-3xs);
    font-weight: 600;
    border: 1px solid var(--c-primary);
    border-radius: var(--radius-md);
    color: var(--c-primary);
    background: var(--c-paper);
    cursor: pointer;
}

.fc-brief > summary::-webkit-details-marker { display: none; }

/*  <summary> is focusable natively, so the ring must be drawn on it — a keyboard
    user with the script off reaches this control and nothing else on the card. */
.fc-brief > summary:focus-visible {
    outline: 0;
    box-shadow: var(--focus-ring);
}

.fc-brief__body { margin-top: var(--sp-1); }

.fc-brief__body dl { margin: 0; }

.fc-brief__body dt {
    font-size: var(--fs-4xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--c-ink-muted);
    margin-top: var(--sp-1);
}

.fc-brief__body dt:first-child { margin-top: 0; }

.fc-brief__body dd {
    margin: 2px 0 0;
    font-size: var(--fs-3xs);
    line-height: var(--lh-normal);
}

/* -----------------------------------------------------------------------------
   NOT AVAILABLE ONLINE YET

   Quieter, but NOT disabled and NOT dimmed to the point of failing contrast: the
   card still has to be readable, because the explanation behind it is the one
   that matters most (it says where the same information is collected today).
   -------------------------------------------------------------------------- */
.fc-card[data-fc-built="false"] { border-top-color: #a9aeb1; }
.fc-card[data-fc-built="false"] .fc-dot { opacity: .45; }

/* -----------------------------------------------------------------------------
   THE FILTER

   Thirteen cards is past the point where scanning beats searching, and the
   populations who need this page least often are the ones who know the fewest
   form names — so the box accepts a name, a code, or an ordinary word.
   -------------------------------------------------------------------------- */
.fc-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    padding: var(--sp-2);
    background: var(--c-paper-sunken);
    border: 1px solid var(--c-line, #dfe1e2);
    border-radius: var(--radius-lg);
}

.fc-filter__field { flex: 1 1 18rem; }

.fc-filter__field label {
    display: block;
    font-weight: 600;
    font-size: var(--fs-3xs);
    margin-bottom: var(--sp-05);
}

.fc-filter__field input {
    width: 100%;
    padding: var(--sp-1);
    font-size: var(--fs-2xs);
    border: 1px solid #565c65;
    border-radius: var(--radius-md);
    background: var(--c-paper);
    color: var(--c-ink);
}

.fc-filter__field input:focus-visible {
    outline: 0;
    box-shadow: var(--focus-ring);
    border-color: var(--focus-line);
}

.fc-filter__field .hint {
    display: block;
    margin-top: var(--sp-05);
    color: var(--c-ink-muted);
}

/*  THE LIVE COUNT. role="status" in the markup, so a screen-reader user hears
    "4 of 13 forms" as they type instead of silently losing cards off the page. */
.fc-filter__count {
    flex: 0 0 auto;
    font-size: var(--fs-3xs);
    color: var(--c-ink-muted);
    padding-bottom: var(--sp-1);
}

/*  A group whose every card was filtered out is hidden entirely, heading and all
    — a bare "Start here" over nothing reads as a fault. */
[data-fc-group][hidden] { display: none; }

.fc-empty { margin-top: var(--sp-3); }