/* ============================================================================
   H+C design tokens
   ----------------------------------------------------------------------------
   The single place brand values are written down. Everything else in the app
   references these variables; no view and no other stylesheet should contain a
   raw hex value.

   Source: docs/Brand/Brand Standards Guide - FINAL.pdf. Pantone equivalents are
   noted so a print job and a screen can be checked against each other.

   Why this file exists at all, beyond tidiness: on 2026-07-21 the submittal
   register shipped state badges that were white on white. The proximate cause
   was a Bootstrap version mismatch, but the reason it was *possible* is that
   badge colours were being chosen ad hoc at each call site, where nothing could
   check them. Chip colours are defined once here, as pairs that are known to
   meet contrast — see .hc-chip at the bottom.
   ============================================================================ */

:root {
    /* ---- Brand palette -----------------------------------------------------
       Weighting is roughly 60% primary / 30% neutral / 10% accent. The accents
       are for emphasis on a small number of elements; they are not a second
       palette to build screens out of. */

    --hc-navy: #1e315f;         /* Pantone 295 — the primary. Headers, headings. */
    --hc-blue: #107dc0;         /* Pantone 279 — links, primary actions, active state. */
    --hc-blue-light: #a4c8e0;   /* Pantone 543 — subtle fills: row hover, selected filter. */

    --hc-green: #a5bf94;
    --hc-orange: #ee6c4d;
    --hc-gold: #ffb706;

    /* Darkened accents, for text and small marks only. The brand accents are
       mid-tones: correct as fills, but below 4.5:1 on white as text or as a
       background behind dark text. These keep the hue and buy the contrast. */
    --hc-green-ink: #4a6b38;
    --hc-orange-ink: #b8391a;
    --hc-gold-ink: #8a5f00;

    /* ---- Neutrals ---------------------------------------------------------
       Body copy is near-black on white rather than navy on white: navy at body
       size is tiring to read, and the brand reads more strongly when it is the
       headings and the furniture rather than every word. */

    --hc-ink: #1a1c20;          /* body text — 16.4:1 on white */
    --hc-ink-muted: #5c626d;    /* secondary text — 6.1:1 on white */
    --hc-line: #d8dbe0;
    --hc-surface: #ffffff;
    --hc-surface-sunken: #f5f6f8;

    /* ---- Semantic aliases -------------------------------------------------
       Views reference these, not the palette above, so a brand change is one
       edit here rather than a search across the app. */

    --hc-header-bg: var(--hc-navy);
    --hc-header-ink: #ffffff;
    --hc-heading-ink: var(--hc-navy);
    --hc-link: var(--hc-blue);
    --hc-link-hover: var(--hc-navy);
    --hc-focus-ring: #107dc0;
    --hc-row-hover: rgba(164, 200, 224, 0.28);   /* light blue, kept subtle */
    --hc-selected: rgba(164, 200, 224, 0.45);

    /* ---- Type -------------------------------------------------------------
       Body is Gotham, falling back to Proxima Nova, then the system stack. Both
       brand faces are Adobe Fonts, which needs a kit and a third-party request;
       they are named here so a machine that has them licensed will use them,
       and the system stack carries everyone else at no network cost. The brand
       guide permits exactly this.

       Playfair Display is NOT optional and is not substituted — it is what
       carries the brand at page level. It is self-hosted (23 KB, latin subset)
       rather than loaded from Google, because a render-blocking third-party
       request is the wrong trade on a job-site phone. */

    --hc-font-body: "Gotham", "Proxima Nova", -apple-system, BlinkMacSystemFont,
                    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --hc-font-display: "Playfair Display", Georgia, "Times New Roman", serif;

    /* Section labels and subheads: Gotham Book, all caps, letter-spaced. */
    --hc-font-label: var(--hc-font-body);
    --hc-label-tracking: 0.08em;

    /* Body floor is 16px — the guide's ">= 11pt equivalent" — with 1.5
       line-height, inside the 1.4-1.6 the guide asks for. */
    --hc-text-body: 1rem;
    --hc-text-small: 0.875rem;
    --hc-leading-body: 1.5;
    --hc-leading-tight: 1.25;

    /* ---- Shape ------------------------------------------------------------ */
    --hc-radius: 4px;
    --hc-radius-lg: 8px;
}

/* Self-hosted, latin subset. swap so a slow font never blocks the headline. */
@font-face {
    font-family: "Playfair Display";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/playfair-display-700-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================================
   Base typography
   ============================================================================ */

body {
    font-family: var(--hc-font-body);
    font-size: var(--hc-text-body);
    line-height: var(--hc-leading-body);
    color: var(--hc-ink);
    background-color: var(--hc-surface);
}

/* Left-justified, always. The guide is explicit that type is not centred, and
   ragged-right is easier to scan on a phone in the field. */
body,
h1, h2, h3, h4, h5, h6,
p, li, td, th {
    text-align: left;
}

/* Page-level headlines carry the brand. h1 only — h2 and below stay in the body
   face, because a page of serif headings reads as a magazine, not a tool. */
h1, .hc-display {
    font-family: var(--hc-font-display);
    font-weight: 700;
    line-height: var(--hc-leading-tight);
    color: var(--hc-heading-ink);
}

h2, h3, h4, h5, h6 {
    font-family: var(--hc-font-body);
    font-weight: 600;
    line-height: var(--hc-leading-tight);
    color: var(--hc-heading-ink);
}

a {
    color: var(--hc-link);
}

a:hover,
a:focus {
    color: var(--hc-link-hover);
}

/* Section labels / subheads: Gotham Book, all caps, tracked out. */
.hc-label {
    font-family: var(--hc-font-label);
    font-size: var(--hc-text-small);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--hc-label-tracking);
    color: var(--hc-ink-muted);
}

/* ============================================================================
   The masthead
   ============================================================================ */

.hc-masthead {
    background-color: var(--hc-header-bg);
    color: var(--hc-header-ink);
}

/* .navbar-nav is in these selectors to outrank Bootstrap's own
   `.navbar-dark .navbar-nav .nav-link`, which is rgba(255,255,255,.55) — about
   3.6:1 on this navy, under the 4.5:1 the brand guide requires. Dropping
   .navbar-nav here silently reverts the nav to failing contrast. */
.hc-masthead .navbar-brand,
.hc-masthead .navbar-nav .nav-link {
    color: var(--hc-header-ink);
}

.hc-masthead .navbar-nav .nav-link:hover,
.hc-masthead .navbar-nav .nav-link:focus {
    color: var(--hc-blue-light);
}

/* The mark is never redrawn or traced — this scales the supplied file and
   nothing else. Height is set rather than width so the bar stays a fixed
   height whatever logo lockup is used. */
.hc-logo {
    height: 30px;
    width: auto;
    display: block;
}

.hc-wordmark {
    font-family: var(--hc-font-display);
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--hc-header-ink);
    white-space: nowrap;
}

/* Bootstrap 5.1 draws the toggler icon as a dark SVG data-URI; on navy it is
   invisible. This is the light variant. */
.hc-masthead .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.35);
}

.hc-masthead .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ============================================================================
   Chips
   ----------------------------------------------------------------------------
   The permanent fix for the white-on-white badge. Each modifier sets BOTH
   background and foreground — never one of the two — so a chip cannot inherit a
   colour from somewhere else and disappear. Every pair below COMPUTES >= 4.5:1
   — but a computed ratio assumes the glyphs render clean. At sub-12px semibold
   the antialiasing thinned and filled strokes, and delivered contrast sat well
   below the computed figure (found 07-30): the contrast work was right, the
   size undid it. Hence the sizing rules on .hc-chip — rem not em (an em
   compounds with any reduced parent, so the same chip rendered 12.5px in a
   table cell and 10.9px nested in a small-text context, 9.6px on a phone under
   site.css's 14px root; a chip's size must not depend on where it is nested),
   weight 500 not 600 (at this size added stroke puts ink into the counters —
   the e in "Active" closes to a blob), line-height inside the brand guide's
   1.4–1.6×, and a whisper of letter-spacing so adjacent letters stop merging.
   Do not re-tighten the size trusting the ratios alone; StylesheetClassTests
   holds the floor.
   ============================================================================ */

.hc-chip {
    display: inline-block;
    padding: 0.25em 0.6em;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0.01em;
    border-radius: var(--hc-radius);
    border: 1px solid transparent;
    white-space: nowrap;
    vertical-align: baseline;
}

/* Neutral: the default workflow state. */
.hc-chip--state {
    background-color: var(--hc-surface-sunken);
    color: var(--hc-ink);
    border-color: var(--hc-line);
}

/* The state a record is in right now, on its own detail page. */
.hc-chip--current {
    background-color: var(--hc-navy);
    color: #ffffff;
}

/* A review outcome. Deliberately not colour-coded by approve/reject: the code
   text says which, and tinting it green or red invites reading the colour
   instead of the words on a register scanned at speed. */
.hc-chip--code {
    background-color: var(--hc-blue-light);
    color: var(--hc-navy);
    border-color: #86b3d2;
}

/* Superseded, and other "this is no longer the live one" marks. */
.hc-chip--stale {
    background-color: #fdf1d6;
    color: var(--hc-gold-ink);
    border-color: #e8cd8d;
}

.hc-chip--rev {
    background-color: var(--hc-surface-sunken);
    color: var(--hc-ink-muted);
    border-color: var(--hc-line);
}

/* Due-date state on the portfolio queue and KPI cards. TC1 uses green/amber/red
   on its in-progress bars; we carry only the two that mean act now, because a
   chip on everything is a chip that says nothing. "On time" is the absence of
   one. Both set foreground and background together, like every chip here — that
   pairing is what makes the 7/21 white-on-white badge bug unrepeatable. */
.hc-chip--overdue {
    background-color: #fde8e3;
    color: var(--hc-orange-ink);   /* 4.9:1 on the tint */
    border-color: #f3bfb2;
}

/* Amber shares the gold pair with --stale. They never appear on the same page:
   superseded records are excluded from the queue by construction, and the
   register has no due-date chip. */
.hc-chip--due-soon {
    background-color: #fdf1d6;
    color: var(--hc-gold-ink);
    border-color: #e8cd8d;
}

/* ============================================================================
   Sign-in chooser
   ----------------------------------------------------------------------------
   Its own page rather than a screen inside the app frame. Copy is left-aligned
   per the brand guide even though the card itself is centred in the viewport —
   centring the block is layout, centring the text is typography, and only the
   second one is ruled out.
   ============================================================================ */

.hc-signin-page {
    background-color: var(--hc-surface-sunken);
    /* This page has no app footer, so the layout's fixed-footer reservation
       would just leave a gap. */
    margin-bottom: 0;
}

.hc-signin {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.hc-signin__card {
    width: 100%;
    max-width: 26rem;
    background-color: var(--hc-surface);
    border-radius: var(--hc-radius-lg);
    box-shadow: 0 1px 3px rgba(30, 49, 95, 0.12), 0 8px 24px rgba(30, 49, 95, 0.1);
    overflow: hidden;
}

.hc-signin__brand {
    background-color: var(--hc-navy);
    padding: 1.75rem 2rem;
}

.hc-signin__logo {
    height: 34px;
    width: auto;
    display: block;
}

.hc-signin__body {
    padding: 1.75rem 2rem 2rem;
}

.hc-signin__title {
    font-family: var(--hc-font-display);
    font-weight: 700;
    font-size: 1.9rem;
    line-height: 1.15;
    color: var(--hc-navy);
    margin-bottom: 0.15rem;
}

/* Width-matched to the card so it sits on the card's left edge rather than
   floating centred under it — the guide rules out centred type, and a centred
   line under a left-aligned card looks unresolved regardless. */
.hc-signin__footnote {
    width: 100%;
    max-width: 26rem;
    margin-top: 1.5rem;
    margin-bottom: 0;
    font-size: var(--hc-text-small);
    color: var(--hc-ink-muted);
}

/* ============================================================================
   Tables and forms — token wiring only, not a restyle
   ============================================================================ */

.table > tbody > tr:hover > * {
    background-color: var(--hc-row-hover);
}

.btn-primary {
    background-color: var(--hc-blue);
    border-color: var(--hc-blue);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--hc-navy);
    border-color: var(--hc-navy);
}

.btn-outline-primary {
    color: var(--hc-blue);
    border-color: var(--hc-blue);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--hc-blue);
    border-color: var(--hc-blue);
    color: #ffffff;
}

/* Brand gold rather than Bootstrap's #ffc107. Used for the one action that
   starts something new off the back of a rejection — Create Revision — which is
   exactly the "sparingly" the guide means by a 10% accent. Ink stays near-black:
   gold is a mid-tone and only carries dark text. */
.btn-warning {
    background-color: var(--hc-gold);
    border-color: var(--hc-gold);
    color: var(--hc-ink);
}

.btn-warning:hover,
.btn-warning:focus {
    background-color: #e6a400;
    border-color: #e6a400;
    color: var(--hc-ink);
}

/* Focus ring in brand blue. The template shipped a white-then-blue double ring
   that disappears against the navy masthead. */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus, .form-select:focus {
    box-shadow: 0 0 0 0.25rem rgba(16, 125, 192, 0.45);
    border-color: var(--hc-focus-ring);
}