/* Lacuna v0.6.19 — Sprint 33 visual identity layer.
 *
 * Loaded AFTER login.css from base.html so utility classes here win
 * over the existing component-level CSS without needing !important.
 *
 * Responsibilities:
 *   - .icon utility (size + alignment variants) for the inline SVG set
 *     under /static/img/icons/.
 *   - Print stylesheet hardening (banker prints briefs to PDF + paper).
 *   - prefers-reduced-motion extension to the new Sprint 33 surfaces.
 *
 * The icon set lives at /static/img/icons/{name}.svg, each is a 24x24
 * viewBox using currentColor stroke — so the icon picks up the parent
 * text-color, including the gold .icon--brand variant below.
 *
 * Discipline reference: this file is intentionally THIN. login.css owns
 * structure + color; visual.css owns the iconography + print + a11y
 * affordances. Splitting these prevents the 1940-line login.css from
 * exploding further during future polish rounds.
 */

@layer utilities {

    /* -- Icon base + size scale ---------------------------------------- */

    .icon {
        display: inline-block;
        width: 1.25em;          /* default: scales with surrounding text */
        height: 1.25em;
        vertical-align: -0.2em;
        flex: 0 0 auto;
        color: currentColor;    /* inherit from text-color */
        line-height: 1;
        stroke: currentColor;
        fill: none;
    }

    .icon img,
    .icon svg {
        width: 100%;
        height: 100%;
        display: block;
    }

    .icon--sm { width: 16px;  height: 16px; }
    .icon--md { width: 20px;  height: 20px; }
    .icon--lg { width: 28px;  height: 28px; }
    .icon--xl { width: 40px;  height: 40px; }

    /* Inline icons inside a button/CTA/link sit on the text baseline. */
    .icon--inline {
        vertical-align: baseline;
        margin-right: 0.5em;
    }

    /* Gold-stroke variant for brand-emphasis icons (footer headings, PDF). */
    .icon--brand { color: var(--color-brand, var(--accent, #c9a86a)); }

    /* Muted variant for chrome icons (footer body, status). */
    .icon--muted { color: var(--color-text-faint, var(--slate-400, #6b7280)); }

    /* State-tinted variants for status chips + connector outcomes. */
    .icon--good { color: var(--color-state-good, var(--gold-500, #c9a86a)); }
    .icon--warn { color: var(--color-state-warn, var(--amber-500, #d4a85a)); }
    .icon--bad  { color: var(--color-state-bad,  var(--red-500,   #f08080)); }
    .icon--info { color: var(--color-state-info, var(--teal-500,  #7ab8d9)); }

    /* When an icon is used as the only child of a link, the link should
       not show the default underline border-bottom that the footer-nav
       links inherit. */
    a.icon-link {
        text-decoration: none;
        border-bottom: none;
        display: inline-flex;
        align-items: center;
        gap: 0.5em;
    }
}

@layer base {

    /* -- Print stylesheet (Sprint 33 Phase 6) -------------------------- */
    /*
     * Bankers print briefs to PDF or paper. The dark navy background
     * + gold accent burns ink and hurts copier contrast. Print rules:
     *
     *   1. Hide chrome (header, footer, login footer) — print only the
     *      content the operator wants on paper.
     *   2. Flip body to white-on-black so links + tables read.
     *   3. Expand `<a href>` text so the printout shows the URL inline.
     *   4. Force-page-break for major sections in brief_detail so a
     *      committee packet doesn't split the verdict mid-chip.
     */
    @media print {
        :root {
            color-scheme: light;
        }

        body {
            background: #ffffff !important;
            color: #000000 !important;
            font-size: 11pt;
        }

        #bg-canvas,
        .app-header,
        .app-footer,
        .skip-link,
        .logout-form,
        .page-hero__decoration,
        .empty-state__illustration {
            display: none !important;
        }

        /* Inline-URL annotation — operator's print can see the link target. */
        a[href]::after {
            content: " (" attr(href) ")";
            font-size: 0.85em;
            color: #555;
            font-style: italic;
        }
        /* Skip the annotation on intra-page anchors + mailto. */
        a[href^="#"]::after,
        a[href^="mailto:"]::after,
        a[href=""]::after {
            content: "";
        }

        /* Strong color reset for tables + chips. */
        table, .chip, .indicator {
            background: transparent !important;
            color: #000 !important;
            border-color: #999 !important;
        }

        /* Hero-strip is a single row of tiles — keep on one page. */
        .hero-strip,
        .page-hero {
            break-inside: avoid;
            page-break-inside: avoid;
        }

        /* Force a page-break BEFORE major review-blocks in brief-detail. */
        .review-block + .review-block {
            break-before: page;
            page-break-before: always;
        }
    }

    /* -- Prefers-reduced-motion extension ------------------------------ */
    @media (prefers-reduced-motion: reduce) {
        .page-hero__decoration {
            /* Static pattern, no animation in baseline — but kill any
               future transition if the decoration ever animates. */
            transition: none !important;
            animation: none !important;
        }

        .app-footer__nav-list a,
        .empty-state__illustration {
            transition: none !important;
        }
    }
}