/*
  HHC design system: the Harper brand (concept C, chosen 7 Nov 2026) for the apps, matching the websites
  (HHC.Site/wwwroot/site.css). Harper Green, limewash, stone and brass; Source Serif 4 for headings and the HARPER
  wordmark, Inter for text; the house-badge mark. Light and dark.

  Every colour is a token. Components use the role tokens (--hhc-brand, --hhc-division-text, --hhc-surface...), never a
  hex value, so a change of colour is a change here only.

  Divisions (the owner's decision, 9 Nov 2026): inside one job, the app takes that job's division colour (the top bar,
  primary buttons, links and highlights) and the bar names the division under HARPER. Lists of jobs give each job a
  coloured edge and the division's name. Everything else stays Harper Green. Colour is never the only signal: the
  division's name always appears with it (WCAG 1.4.1). See "Divisions" below for how.

  Accessibility (WCAG 2.2 AA): text contrast at least 4.5:1 in light and dark (the checked pairs are in
  docs/questions.md, "Look and feel"), focus always visible (a yellow and ink ring, as on the websites), targets at
  least 44px (56px+ on site screens), motion off for people who ask for less.
*/

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/InterVariable.woff2") format("woff2");
}

@font-face {
    font-family: "Source Serif 4";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("fonts/SourceSerif4Variable.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
    color-scheme: light dark;

    /* The Harper palette (as on the websites) */
    --hhc-green: #1f3b2d;            /* Harper Green: the company, and any screen not about one job */
    --hhc-green-deep: #142a1f;
    --hhc-limewash: #f4f1ea;
    --hhc-stone: #d9d2c4;
    --hhc-paper: #fbfaf6;
    --hhc-ink: #1b211d;
    --hhc-brass: #b08a52;            /* details only (rules, dots, marks); never text on a light ground */
    --hhc-brass-light: #dcbd84;      /* details on a dark or coloured ground */
    --hhc-brass-text: #7a5826;       /* brass as text on a light ground */
    --hhc-on-brand: #ffffff;         /* text on the bar and on primary buttons, whatever the division */
    --hhc-focus-ring: #ffbf47;       /* the websites' focus yellow */

    /* Surfaces (warm neutrals) */
    --hhc-bg: var(--hhc-limewash);
    --hhc-surface: #ffffff;
    --hhc-surface-2: #ece7dc;
    --hhc-border: var(--hhc-stone);
    --hhc-border-strong: #8a8273;    /* form fields and quiet buttons: 3:1 against every light surface */

    /* Text */
    --hhc-text: var(--hhc-ink);
    --hhc-text-soft: #4b544e;
    --hhc-text-faint: #5f6862;

    /* Meaning */
    --hhc-info: #2456c9;
    --hhc-info-bg: #e8effc;
    --hhc-success: #187a4d;
    --hhc-success-bg: #e4f4ec;
    --hhc-warning: #9a5b00;
    --hhc-warning-bg: #fdf1dc;
    --hhc-danger: #b3261e;
    --hhc-danger-bg: #fbe9e7;

    /* Shape and depth: crisp, like the websites */
    --hhc-radius-sm: 4px;
    --hhc-radius: 6px;
    --hhc-radius-lg: 10px;
    --hhc-radius-pill: 999px;
    --hhc-shadow-1: 0 1px 2px rgb(27 33 29 / 7%), 0 1px 1px rgb(27 33 29 / 4%);
    --hhc-shadow-2: 0 2px 4px rgb(27 33 29 / 6%), 0 8px 24px rgb(27 33 29 / 9%);
    --hhc-shadow-3: 0 12px 40px rgb(27 33 29 / 18%);

    /* Yellow next to the thing, ink around it: one of the two stands out on any ground, light, dark or coloured. */
    --hhc-focus: 0 0 0 3px var(--hhc-focus-ring), 0 0 0 6px var(--hhc-ink);

    /* The websites' drawing-board grid, laid over a deep colour. */
    --hhc-blueprint: linear-gradient(rgb(255 255 255 / 4.5%) 1px, transparent 1px) 0 0 / 32px 32px,
                     linear-gradient(90deg, rgb(255 255 255 / 4.5%) 1px, transparent 1px) 0 0 / 32px 32px;

    /* Type */
    --hhc-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --hhc-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
    --hhc-step--1: 0.875rem;
    --hhc-step-0: 1rem;
    --hhc-step-1: 1.125rem;
    --hhc-step-2: 1.375rem;
    --hhc-step-3: 1.75rem;
    --hhc-step-4: 2.25rem;

    /* Space (4px grid) */
    --hhc-space-1: 0.25rem;
    --hhc-space-2: 0.5rem;
    --hhc-space-3: 0.75rem;
    --hhc-space-4: 1rem;
    --hhc-space-5: 1.5rem;
    --hhc-space-6: 2rem;
    --hhc-space-7: 3rem;

    /* Motion */
    --hhc-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --hhc-fast: 140ms;
    --hhc-slow: 260ms;
}

/* ---------- Divisions ----------
   --hhc-division is the one colour that changes; everything that takes a division's colour is worked out from it.
   It is set in two ways:
   - For the whole app, on one job's screens: the page drops in <DivisionTheme>, which puts the division's name,
     marked data-hhc-theme="<key>", into the top bar (Brand's SectionOutlet). ":root:has([data-hhc-theme=...])" then
     sets the division at the root. No state is passed up to the layout, so it works the same in server-rendered pages
     (office, portal) and in WebAssembly (field app), and the colour can't appear without the name.
   - For one job in a list: the class hhc-division-<key> (BrandDivisions.CssClass) on the item, hhc-division-edge for
     its coloured edge, and <DivisionTag> for its name.
   The keys and the colours are the websites' (HHC.Site/Content/sites.json): this is the one place they are set. */
:root { --hhc-division: var(--hhc-green); }
:root:has([data-hhc-theme="small-works"]), .hhc-division-small-works { --hhc-division: #a3401c; }
:root:has([data-hhc-theme="projects"]), .hhc-division-projects { --hhc-division: #2f6b3a; }
:root:has([data-hhc-theme="care-homes"]), .hhc-division-care-homes { --hhc-division: #7b3a72; }
:root:has([data-hhc-theme="commercial"]), .hhc-division-commercial { --hhc-division: #1d5c8c; }
.hhc-division-harper { --hhc-division: var(--hhc-green); }

/* Worked out wherever the colour is set: a custom property's var() resolves where it is declared, so each scope works
   out its own. White on every division colour is 6.3:1 or better; each colour as text on a light ground 5.1:1 or better. */
:root, .hhc-division-harper, .hhc-division-small-works, .hhc-division-projects, .hhc-division-care-homes, .hhc-division-commercial {
    --hhc-division-strong: color-mix(in srgb, var(--hhc-division) 82%, #000);
    --hhc-division-deep: color-mix(in srgb, var(--hhc-division) 50%, #0a0f0c);
    --hhc-division-text: var(--hhc-division);
    --hhc-division-line: var(--hhc-division);
    --hhc-division-tint: color-mix(in srgb, var(--hhc-division) 8%, var(--hhc-surface));

    /* The app's frame, its main actions and its links follow the division. */
    --hhc-brand: var(--hhc-division);
    --hhc-brand-strong: var(--hhc-division-strong);
    --hhc-link: var(--hhc-division-text);
}

/* ---------- Dark ---------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --hhc-bg: #0f1512;
        --hhc-surface: #161e1a;
        --hhc-surface-2: #1d2722;
        --hhc-border: #2b3832;
        --hhc-border-strong: #66776d;
        --hhc-text: #eef0ea;
        --hhc-text-soft: #bcc4bd;
        --hhc-text-faint: #909b93;
        --hhc-info: #8cb4ff;
        --hhc-info-bg: #16264a;
        --hhc-success: #5fd39a;
        --hhc-success-bg: #10302a;
        --hhc-warning: #f5bf68;
        --hhc-warning-bg: #33260f;
        --hhc-danger: #ff8a80;
        --hhc-danger-bg: #3a1716;
        --hhc-shadow-1: 0 1px 2px rgb(0 0 0 / 40%);
        --hhc-shadow-2: 0 2px 6px rgb(0 0 0 / 35%), 0 10px 30px rgb(0 0 0 / 30%);
        --hhc-shadow-3: 0 16px 48px rgb(0 0 0 / 50%);
    }

    /* A division's colour is too dark to read on a dark surface: its text and edges take a lighter mix (5.4:1 or better). */
    :root:not([data-theme="light"]),
    :root:not([data-theme="light"]) :is(.hhc-division-harper, .hhc-division-small-works, .hhc-division-projects, .hhc-division-care-homes, .hhc-division-commercial) {
        --hhc-division-text: color-mix(in srgb, var(--hhc-division) 50%, #fff);
        --hhc-division-line: var(--hhc-division-text);
    }
}

:root[data-theme="dark"] {
    --hhc-bg: #0f1512;
    --hhc-surface: #161e1a;
    --hhc-surface-2: #1d2722;
    --hhc-border: #2b3832;
    --hhc-border-strong: #66776d;
    --hhc-text: #eef0ea;
    --hhc-text-soft: #bcc4bd;
    --hhc-text-faint: #909b93;
}

:root[data-theme="dark"],
:root[data-theme="dark"] :is(.hhc-division-harper, .hhc-division-small-works, .hhc-division-projects, .hhc-division-care-homes, .hhc-division-commercial) {
    --hhc-division-text: color-mix(in srgb, var(--hhc-division) 50%, #fff);
    --hhc-division-line: var(--hhc-division-text);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    font-family: var(--hhc-font);
    font-size: 100%;
    font-feature-settings: "cv11", "ss01";
    line-height: 1.55;
    color: var(--hhc-text);
    background: var(--hhc-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body { margin: 0; min-height: 100dvh; }

h1, h2, h3 { font-family: var(--hhc-font-serif); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 var(--hhc-space-3); color: var(--hhc-text); text-wrap: balance; }
h1 { font-size: var(--hhc-step-4); }
h2 { font-size: var(--hhc-step-2); }
h3 { font-size: var(--hhc-step-1); }
p { margin: 0 0 var(--hhc-space-3); }
a { color: var(--hhc-link); text-underline-offset: 3px; }
small { font-size: var(--hhc-step--1); }
strong { font-weight: 650; }
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--hhc-focus); border-radius: var(--hhc-radius-sm); }
h1:focus, h1:focus-visible { box-shadow: none; }
::selection { background: color-mix(in srgb, var(--hhc-division) 25%, transparent); }

.hhc-num, table td.num { font-variant-numeric: tabular-nums; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The hidden attribute always wins, even over a class that sets display (a .btn a script shows later). */
[hidden] { display: none !important; }

.hhc-skip { position: absolute; left: -999px; top: var(--hhc-space-3); z-index: 100; padding: var(--hhc-space-2) var(--hhc-space-4); background: var(--hhc-focus-ring); color: var(--hhc-ink); border-radius: var(--hhc-radius-sm); font-weight: 700; }
.hhc-skip:focus { left: var(--hhc-space-3); }

/* ---------- Layout ---------- */
.hhc-container { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: var(--hhc-space-5); }
.hhc-container-narrow { max-width: 36rem; }
.hhc-stack > * + * { margin-top: var(--hhc-space-4); }
.hhc-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hhc-space-3); }
.hhc-grid { display: grid; gap: var(--hhc-space-4); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

/* ---------- Brand: the lockup (house badge, HARPER, and the division or "Homes & Construction" under it) ---------- */
.hhc-brand { display: inline-flex; align-items: center; gap: var(--hhc-space-3); color: var(--hhc-green); text-decoration: none; }
.hhc-brand-mark { flex: none; width: 2.25rem; height: 2.25rem; }
.hhc-lockup-words { display: flex; flex-direction: column; line-height: 1; }
.hhc-brand-name { font: 600 1.3rem/1 var(--hhc-font-serif); letter-spacing: 0.16em; text-transform: uppercase; margin-right: -0.16em; }
.hhc-lockup-sub { margin-top: 0.4rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; }
/* Inside a job the division's name takes the line's place. */
.hhc-lockup-sub:has(.hhc-lockup-division) .hhc-lockup-default { display: none; }
.hhc-brand-product { align-self: stretch; display: inline-flex; align-items: center; padding-left: var(--hhc-space-3); border-left: 1px solid currentColor; font-weight: 550; opacity: 0.9; }

/* ---------- App shell: the bar along the top, in the division's colour, with a brass rule under it ---------- */
.hhc-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--hhc-blueprint), var(--hhc-brand);
    color: var(--hhc-on-brand);
    border-bottom: 2px solid var(--hhc-brass);
    padding-top: env(safe-area-inset-top);
    transition: background-color var(--hhc-slow) var(--hhc-ease);
}
.hhc-topbar-inner { display: flex; align-items: center; gap: var(--hhc-space-5); min-height: 64px; }
.hhc-topbar .hhc-brand { color: var(--hhc-on-brand); }
.hhc-topbar .hhc-lockup-sub { color: var(--hhc-limewash); }
.hhc-nav { display: flex; gap: var(--hhc-space-1); overflow-x: auto; }
.hhc-nav a {
    display: inline-flex; align-items: center; gap: var(--hhc-space-2);
    min-height: 44px; padding: var(--hhc-space-2) var(--hhc-space-3);
    border-radius: var(--hhc-radius-sm);
    color: var(--hhc-on-brand); font-weight: 550; text-decoration: none; white-space: nowrap;
    transition: background var(--hhc-fast) var(--hhc-ease);
}
.hhc-nav a:hover { background: rgb(255 255 255 / 10%); }
.hhc-nav a.active { background: rgb(255 255 255 / 14%); box-shadow: inset 0 -3px 0 var(--hhc-brass-light); }
.hhc-topbar-end { margin-left: auto; display: flex; align-items: center; gap: var(--hhc-space-3); }
.hhc-avatar {
    display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    background: var(--hhc-brass-light); color: var(--hhc-ink); font-weight: 750; font-size: 0.85rem;
}
.hhc-main { padding-block: var(--hhc-space-6) var(--hhc-space-7); }

/* ---------- Page header ---------- */
.hhc-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--hhc-space-4); margin-bottom: var(--hhc-space-6); }
.hhc-page-header h1 { margin: 0; }
.hhc-eyebrow { margin: 0 0 var(--hhc-space-2); color: var(--hhc-division-text); font-size: var(--hhc-step--1); font-weight: 650; text-transform: uppercase; letter-spacing: 0.12em; }
.hhc-lead { margin: var(--hhc-space-2) 0 0; color: var(--hhc-text-soft); font-size: var(--hhc-step-1); max-width: 46rem; }
.hhc-back { display: inline-flex; align-items: center; gap: var(--hhc-space-1); min-height: 44px; margin-bottom: var(--hhc-space-2); color: var(--hhc-text-soft); font-weight: 550; text-decoration: none; }
.hhc-back:hover { color: var(--hhc-text); }

/* ---------- Buttons: the main action in the division's colour with white words, as on the websites ----------
   Anything that does something, or opens a form or a page to print, looks like a button (UAT, 10 Nov 2026: links were
   missed). One .btn-primary per section for its main action; plain .btn (outlined) for the rest; .btn-danger-quiet for
   taking something away (remove, archive, reject, delete), and .btn-danger only to confirm it. Moving between places
   (menus, tabs, back links, words in a sentence) stays a link. An <a> that only goes somewhere stays an <a>, whatever
   it looks like; anything that changes data is a <button> in a form. */
.btn {
    --btn-bg: var(--hhc-surface); --btn-fg: var(--hhc-text); --btn-border: var(--hhc-border-strong);
    display: inline-flex; align-items: center; justify-content: center; gap: var(--hhc-space-2);
    min-height: 44px; padding: 0 var(--hhc-space-4);
    font: inherit; font-weight: 650; line-height: 1.2; text-decoration: none; cursor: pointer;
    color: var(--btn-fg); background: var(--btn-bg);
    border: 1px solid var(--btn-border); border-radius: var(--hhc-radius);
    box-shadow: var(--hhc-shadow-1);
    transition: transform var(--hhc-fast) var(--hhc-ease), box-shadow var(--hhc-fast) var(--hhc-ease), background var(--hhc-fast) var(--hhc-ease);
}
.btn:hover { box-shadow: var(--hhc-shadow-2); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: default; box-shadow: none; transform: none; }
.btn-primary { --btn-bg: var(--hhc-brand); --btn-fg: var(--hhc-on-brand); --btn-border: transparent; }
.btn-primary:hover { --btn-bg: var(--hhc-brand-strong); }
.btn-success { --btn-bg: var(--hhc-success); --btn-fg: #fff; --btn-border: transparent; }
.btn-danger { --btn-bg: var(--hhc-danger); --btn-fg: #fff; --btn-border: transparent; }
.btn-ghost { --btn-bg: transparent; --btn-border: transparent; box-shadow: none; }
.btn-ghost:hover { --btn-bg: var(--hhc-surface-2); box-shadow: none; }
.btn-danger-quiet { --btn-fg: var(--hhc-danger); --btn-border: var(--hhc-danger); }
.btn-danger-quiet:hover { --btn-bg: var(--hhc-danger-bg); }
.btn-lg { min-height: 56px; padding: 0 var(--hhc-space-5); font-size: var(--hhc-step-1); border-radius: var(--hhc-radius-lg); }
.btn-xl { min-height: 76px; padding: 0 var(--hhc-space-6); font-size: var(--hhc-step-2); font-weight: 750; border-radius: var(--hhc-radius-lg); }
.btn-block { display: flex; width: 100%; }

/* ---------- Adding photos: the camera or the gallery, two big plain choices (PhotoPicker, PhotoFields) ---------- */
.hhc-photo-pick { display: grid; gap: var(--hhc-space-3); margin-top: var(--hhc-space-4); }
.hhc-photo-pick label { position: relative; }
.hhc-photo-pick label:focus-within { box-shadow: var(--hhc-focus); }
.hhc-photo-choose { --btn-border: var(--hhc-text-soft); border-width: 2px; }
.hhc-photo-fields { display: grid; gap: var(--hhc-space-3); margin: 0; padding: 0; border: 0; min-width: 0; }
.hhc-photo-fields legend { margin-bottom: var(--hhc-space-1); padding: 0; font-weight: 600; font-size: var(--hhc-step--1); color: var(--hhc-text-soft); }
.hhc-photo-field { display: grid; gap: var(--hhc-space-1); }
.hhc-photo-field label { display: inline-flex; align-items: center; gap: var(--hhc-space-2); font-weight: 650; color: var(--hhc-text); }
.hhc-photo-field input[type="file"] { cursor: pointer; }
/* On a computer with a mouse there is usually no camera to open, and both inputs would just open the file picker: show
   only "Choose". Phones and tablets (a touch screen as the main pointer) keep both. */
@media (hover: hover) and (pointer: fine) { .hhc-photo-take, .hhc-photo-field-take { display: none; } }
/* The file box's own button looks like ours, so "choose a photo" reads as an action; the chosen file's name stays beside it. */
.hhc-photo-field input[type="file"]::file-selector-button {
    min-height: 40px; margin-right: var(--hhc-space-3); padding: 0 var(--hhc-space-4);
    font: inherit; font-weight: 650; color: var(--hhc-text); cursor: pointer;
    background: var(--hhc-surface); border: 1px solid var(--hhc-border-strong); border-radius: var(--hhc-radius);
    box-shadow: var(--hhc-shadow-1);
}
.hhc-photo-field input[type="file"]:hover::file-selector-button { box-shadow: var(--hhc-shadow-2); }

/* ---------- Forms ---------- */
.hhc-form { display: grid; gap: var(--hhc-space-4); max-width: 34rem; }
.hhc-field { display: grid; gap: var(--hhc-space-1); }
.hhc-field label, .hhc-label { font-weight: 600; font-size: var(--hhc-step--1); color: var(--hhc-text-soft); }
.hhc-hint { font-size: var(--hhc-step--1); color: var(--hhc-text-faint); margin: 0; }
.hhc-input, .hhc-select, .hhc-textarea {
    width: 100%; min-height: 44px; padding: var(--hhc-space-2) var(--hhc-space-3);
    font: inherit; color: var(--hhc-text); background: var(--hhc-surface);
    border: 1px solid var(--hhc-border-strong); border-radius: var(--hhc-radius-sm);
    transition: border-color var(--hhc-fast) var(--hhc-ease), box-shadow var(--hhc-fast) var(--hhc-ease);
}
.hhc-input:focus-visible, .hhc-select:focus-visible, .hhc-textarea:focus-visible { border-color: var(--hhc-division-text); box-shadow: var(--hhc-focus); }
.hhc-textarea { min-height: 6rem; resize: vertical; }
.hhc-inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--hhc-space-3); }
.hhc-inline-form .hhc-field { min-width: 12rem; }
.hhc-choices { display: flex; flex-wrap: wrap; gap: var(--hhc-space-2); border: 0; padding: 0; margin: 0; }
.hhc-choices legend { width: 100%; margin-bottom: var(--hhc-space-2); font-weight: 600; color: var(--hhc-text-soft); font-size: var(--hhc-step--1); }
.hhc-choice {
    min-height: 52px; min-width: 4.75rem; padding: 0 var(--hhc-space-4);
    font: inherit; font-weight: 600; color: var(--hhc-text); cursor: pointer;
    background: var(--hhc-surface); border: 1px solid var(--hhc-border-strong); border-radius: var(--hhc-radius);
    transition: background var(--hhc-fast) var(--hhc-ease), border-color var(--hhc-fast) var(--hhc-ease);
}
.hhc-choice[aria-pressed="true"] { background: var(--hhc-brand); border-color: var(--hhc-brand); color: var(--hhc-on-brand); box-shadow: inset 0 0 0 2px var(--hhc-brass-light); }

/* ---------- Cards ---------- */
.hhc-card {
    display: block; background: var(--hhc-surface); color: var(--hhc-text);
    border: 1px solid var(--hhc-border); border-radius: var(--hhc-radius-lg);
    padding: var(--hhc-space-5); box-shadow: var(--hhc-shadow-1);
}
.hhc-card + .hhc-card { margin-top: var(--hhc-space-4); }
.hhc-grid > .hhc-card + .hhc-card { margin-top: 0; }
.hhc-card-title { display: flex; align-items: center; gap: var(--hhc-space-2); margin-bottom: var(--hhc-space-3); color: var(--hhc-division-text); }
.hhc-card-title h2 { font-size: var(--hhc-step-2); margin: 0; color: var(--hhc-text); }
.hhc-card-actions { display: flex; flex-wrap: wrap; gap: var(--hhc-space-3); margin-top: var(--hhc-space-4); }
.hhc-card-link { text-decoration: none; transition: transform var(--hhc-slow) var(--hhc-ease), box-shadow var(--hhc-slow) var(--hhc-ease), border-color var(--hhc-slow) var(--hhc-ease); }
.hhc-card-link:hover { transform: translateY(-2px); box-shadow: var(--hhc-shadow-2); border-color: var(--hhc-border-strong); }

/* ---------- Stats ---------- */
.hhc-stat {
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--hhc-space-3);
    padding: var(--hhc-space-5); background: var(--hhc-surface); color: var(--hhc-text);
    border: 1px solid var(--hhc-border); border-radius: var(--hhc-radius-lg); box-shadow: var(--hhc-shadow-1); text-decoration: none;
}
.hhc-stat-link { transition: transform var(--hhc-slow) var(--hhc-ease), box-shadow var(--hhc-slow) var(--hhc-ease); }
.hhc-stat-link:hover { transform: translateY(-2px); box-shadow: var(--hhc-shadow-2); }
.hhc-stat-icon { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--hhc-radius); background: var(--hhc-surface-2); color: var(--hhc-text-soft); }
.hhc-stat-value { font: 600 var(--hhc-step-4)/1.05 var(--hhc-font-serif); letter-spacing: -0.01em; font-variant-numeric: tabular-nums lining-nums; }
.hhc-stat-label { color: var(--hhc-text-soft); font-weight: 550; }
.hhc-stat.hhc-tone-warning .hhc-stat-icon { background: var(--hhc-warning-bg); color: var(--hhc-warning); }
.hhc-stat.hhc-tone-success .hhc-stat-icon { background: var(--hhc-success-bg); color: var(--hhc-success); }
.hhc-stat.hhc-tone-info .hhc-stat-icon { background: var(--hhc-info-bg); color: var(--hhc-info); }

/* ---------- Badges ---------- */
.hhc-badge {
    display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.6rem;
    font-size: var(--hhc-step--1); font-weight: 650; line-height: 1.5; white-space: nowrap;
    border-radius: var(--hhc-radius-pill); background: var(--hhc-surface-2); color: var(--hhc-text-soft);
}
.hhc-badge.hhc-tone-info { background: var(--hhc-info-bg); color: var(--hhc-info); }
.hhc-badge.hhc-tone-success { background: var(--hhc-success-bg); color: var(--hhc-success); }
.hhc-badge.hhc-tone-warning { background: var(--hhc-warning-bg); color: var(--hhc-warning); }
.hhc-badge.hhc-tone-danger { background: var(--hhc-danger-bg); color: var(--hhc-danger); }

/* ---------- Notices ---------- */
.hhc-notice {
    display: flex; gap: var(--hhc-space-3); align-items: flex-start;
    padding: var(--hhc-space-3) var(--hhc-space-4); margin-bottom: var(--hhc-space-4);
    border-radius: var(--hhc-radius); border: 1px solid transparent;
    background: var(--hhc-info-bg); color: var(--hhc-text);
    animation: hhc-rise var(--hhc-slow) var(--hhc-ease);
}
.hhc-notice > .hhc-icon { flex: none; margin-top: 2px; color: var(--hhc-info); }
.hhc-notice-body > :last-child { margin-bottom: 0; }
.hhc-notice-body strong { display: block; }
.hhc-notice.hhc-tone-success { background: var(--hhc-success-bg); }
.hhc-notice.hhc-tone-success > .hhc-icon { color: var(--hhc-success); }
.hhc-notice.hhc-tone-warning { background: var(--hhc-warning-bg); }
.hhc-notice.hhc-tone-warning > .hhc-icon { color: var(--hhc-warning); }
.hhc-notice.hhc-tone-danger { background: var(--hhc-danger-bg); }
.hhc-notice.hhc-tone-danger > .hhc-icon { color: var(--hhc-danger); }

/* ---------- Empty states ---------- */
.hhc-empty { display: grid; justify-items: center; text-align: center; gap: var(--hhc-space-2); padding: var(--hhc-space-7) var(--hhc-space-5); color: var(--hhc-text-soft); border: 1px dashed var(--hhc-border-strong); border-radius: var(--hhc-radius-lg); }
.hhc-empty-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--hhc-surface-2); color: var(--hhc-text-faint); }
.hhc-empty-title { margin: 0; font: 600 var(--hhc-step-2)/1.2 var(--hhc-font-serif); color: var(--hhc-text); }

/* ---------- Tables ---------- */
.hhc-table-wrap { overflow-x: auto; background: var(--hhc-surface); border: 1px solid var(--hhc-border); border-radius: var(--hhc-radius-lg); box-shadow: var(--hhc-shadow-1); }
.hhc-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.hhc-table th, .hhc-table td { text-align: left; padding: var(--hhc-space-3) var(--hhc-space-4); border-bottom: 1px solid var(--hhc-border); vertical-align: middle; }
.hhc-table thead th { font-size: var(--hhc-step--1); font-weight: 650; color: var(--hhc-text-faint); text-transform: uppercase; letter-spacing: 0.06em; background: var(--hhc-surface-2); }
.hhc-table tbody tr { transition: background var(--hhc-fast) var(--hhc-ease); }
.hhc-table tbody tr:hover { background: color-mix(in srgb, var(--hhc-surface-2) 60%, transparent); }
.hhc-table tbody tr:last-child td { border-bottom: 0; }
.hhc-table tfoot th, .hhc-table tfoot td { font-weight: 700; background: var(--hhc-surface-2); border-bottom: 0; }
.hhc-table td.num, .hhc-table th.num { text-align: right; white-space: nowrap; }
.hhc-table .hhc-num, .hhc-table td:first-child { white-space: nowrap; }
.hhc-table a { font-weight: 600; text-decoration: none; }
.hhc-table a:hover { text-decoration: underline; }
.hhc-table a.btn { font-weight: 650; }
.hhc-table a.btn:hover { text-decoration: none; }
.hhc-row-actions { display: flex; gap: var(--hhc-space-3); justify-content: flex-end; }

/* ---------- Definition lists ---------- */
.hhc-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--hhc-space-2) var(--hhc-space-5); margin: 0; }
.hhc-facts dt { color: var(--hhc-text-faint); font-weight: 550; }
.hhc-facts dd { margin: 0; font-weight: 550; }

/* ---------- A job's division: its name with a swatch, and a coloured edge (see "Divisions" above) ---------- */
.hhc-division-tag {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: var(--hhc-step--1); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3;
    color: var(--hhc-division-text); white-space: nowrap;
}
.hhc-division-tag::before { content: ""; flex: none; width: 0.7rem; height: 0.7rem; border-radius: 2px; background: currentColor; }
/* A utility that has to win over any component's own border (cards, rows, table cells), so it is marked important. */
.hhc-division-edge { border-left: 5px solid var(--hhc-division-line) !important; }

/* ---------- Help: the round ? on every screen (HelpLink), each app's help page (HelpTopics), and the contractors'
   app's help over the screen (HelpPanel) ---------- */
.hhc-help {
    flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
    font: 700 1.25rem/1 var(--hhc-font); color: var(--hhc-text); text-decoration: none; cursor: pointer;
    background: var(--hhc-surface); border: 2px solid var(--hhc-border-strong); border-radius: 50%;
    transition: background var(--hhc-fast) var(--hhc-ease);
}
.hhc-help:hover { background: var(--hhc-surface-2); }
.hhc-help:focus-visible { border-radius: 50%; }
/* On the bar along the top: white on the division's colour (6.3:1 or better), like the menu. */
.hhc-topbar .hhc-help { background: transparent; color: var(--hhc-on-brand); border-color: var(--hhc-on-brand); }
.hhc-topbar .hhc-help:hover { background: rgb(255 255 255 / 14%); }

.hhc-help-contents { margin-bottom: var(--hhc-space-6); padding: var(--hhc-space-5); background: var(--hhc-surface); border: 1px solid var(--hhc-border); border-radius: var(--hhc-radius-lg); }
.hhc-help-contents h2 { font-size: var(--hhc-step-1); }
.hhc-help-contents ul { margin: 0; padding-left: var(--hhc-space-5); columns: 2 18rem; column-gap: var(--hhc-space-6); }
.hhc-help-contents li { break-inside: avoid; padding: var(--hhc-space-1) 0; }
.hhc-help-contents a { font-weight: 600; }
.hhc-help-section {
    max-width: 46rem; margin-bottom: var(--hhc-space-4); padding: var(--hhc-space-5);
    background: var(--hhc-surface); border: 1px solid var(--hhc-border); border-radius: var(--hhc-radius-lg);
    scroll-margin-top: 88px; font-size: var(--hhc-step-1); line-height: 1.6;
}
/* The part a ? opened: marked with the division's colour, as well as being scrolled to. */
.hhc-help-section:target { border-color: var(--hhc-division-line); box-shadow: inset 4px 0 0 var(--hhc-division-line), var(--hhc-shadow-2); }
.hhc-help-section h2 { font-size: var(--hhc-step-3); }
.hhc-help-summary { color: var(--hhc-text-soft); }
.hhc-help-steps, .hhc-help-notes { margin: var(--hhc-space-3) 0; padding-left: var(--hhc-space-5); }
.hhc-help-steps li, .hhc-help-notes li { margin-bottom: var(--hhc-space-2); padding-left: var(--hhc-space-1); }
.hhc-help-steps li::marker { font-weight: 750; color: var(--hhc-division-text); }
.hhc-help-why { padding: var(--hhc-space-3) var(--hhc-space-4); background: var(--hhc-info-bg); border-radius: var(--hhc-radius); }
.hhc-help-section > :last-child { margin-bottom: 0; }

.hhc-help-panel { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--hhc-bg); animation: hhc-rise var(--hhc-slow) var(--hhc-ease); }
.hhc-help-panel-bar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--hhc-space-3);
    padding: calc(var(--hhc-space-2) + env(safe-area-inset-top)) var(--hhc-space-4) var(--hhc-space-2);
    background: var(--hhc-blueprint), var(--hhc-brand); color: var(--hhc-on-brand); border-bottom: 2px solid var(--hhc-brass);
}
.hhc-help-panel-title { margin: 0; font: 600 var(--hhc-step-2)/1.2 var(--hhc-font-serif); }
.hhc-help-panel-close { min-height: 52px; }
.hhc-help-panel-body { flex: 1; overflow-y: auto; width: 100%; max-width: 40rem; margin: 0 auto; padding: var(--hhc-space-4) var(--hhc-space-4) calc(var(--hhc-space-6) + env(safe-area-inset-bottom)); }
.hhc-help-panel .hhc-help-section { padding: var(--hhc-space-4); }
.hhc-help-more { margin: var(--hhc-space-5) 0; }
.hhc-help-more h2 { font-size: var(--hhc-step-2); }
.hhc-help-more details { border-top: 1px solid var(--hhc-border); }
.hhc-help-more details:last-child { border-bottom: 1px solid var(--hhc-border); }
.hhc-help-more summary { display: flex; align-items: center; min-height: 56px; font-weight: 650; font-size: var(--hhc-step-1); cursor: pointer; }
.hhc-help-more details .hhc-help-section { border: 0; padding: 0 0 var(--hhc-space-4); background: none; }
.hhc-help-more details h3 { display: none; } /* the summary above already says it */

/* ---------- Motion ---------- */
@keyframes hhc-rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes hhc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.hhc-appear { animation: hhc-rise var(--hhc-slow) var(--hhc-ease) both; }
.hhc-live-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--hhc-success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--hhc-success) 25%, transparent); animation: hhc-pulse 1.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

@media (max-width: 40rem) {
    h1 { font-size: var(--hhc-step-3); }
    .hhc-container { padding-inline: var(--hhc-space-4); }
    .hhc-main { padding-block: var(--hhc-space-5) var(--hhc-space-7); }
    .hhc-brand-product { display: none; }
}

/* ---------- Month calendar (MonthCalendar.razor) ---------- */
/* A real table, Monday first. Each day is a link at least 44px tall; on small phones the figures shorten and the
   grid reaches into the page's side space so seven columns still fit at 320px. */
.hhc-cal { margin-block: var(--hhc-space-3) var(--hhc-space-4); }
.hhc-cal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--hhc-space-2); margin-bottom: var(--hhc-space-2); }
.hhc-cal-title { margin: 0; font-size: var(--hhc-step-1); font-weight: 650; text-align: center; }
.hhc-cal-nav { display: inline-flex; align-items: center; justify-content: center; gap: var(--hhc-space-1); min-width: 44px; min-height: 44px; padding-inline: var(--hhc-space-3);
    border: 1px solid var(--hhc-border-strong); border-radius: var(--hhc-radius); background: var(--hhc-surface); color: var(--hhc-text); font-weight: 600; text-decoration: none; }
.hhc-cal-nav:hover { background: var(--hhc-surface-2); }
.hhc-cal-nav.is-off { visibility: hidden; }
.hhc-cal-grid { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 3px; }
.hhc-cal-grid th { padding-block: var(--hhc-space-1); font-size: var(--hhc-step--1); font-weight: 650; color: var(--hhc-text-faint); text-align: center; }
.hhc-cal-wd-short { display: none; }
.hhc-cal-grid td { padding: 0; vertical-align: top; }
.hhc-cal-day a { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 3.5rem; padding: var(--hhc-space-1) var(--hhc-space-2);
    border: 1px solid var(--hhc-border); border-radius: var(--hhc-radius); background: var(--hhc-surface); color: var(--hhc-text); text-decoration: none;
    transition: background var(--hhc-fast) var(--hhc-ease), border-color var(--hhc-fast) var(--hhc-ease); }
.hhc-cal-day a:hover { border-color: var(--hhc-border-strong); background: var(--hhc-surface-2); }
.hhc-cal-day.has-figure a { background: var(--hhc-division-tint, var(--hhc-surface)); }
.hhc-cal-num { font-size: var(--hhc-step--1); font-weight: 600; color: var(--hhc-text-soft); font-variant-numeric: tabular-nums; }
.hhc-cal-fig, .hhc-cal-fig-short { font-size: var(--hhc-step--1); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hhc-cal-fig-short { display: none; }
.hhc-cal-dot { position: absolute; top: 6px; right: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--hhc-text-faint); }
.hhc-cal-dot.hhc-tone-info { background: var(--hhc-info); }
.hhc-cal-dot.hhc-tone-success { background: var(--hhc-success); }
.hhc-cal-dot.hhc-tone-warning { background: var(--hhc-warning); }
.hhc-cal-dot.hhc-tone-danger { background: var(--hhc-danger); }
.hhc-cal-day.is-today a { border: 2px solid var(--hhc-link); }
.hhc-cal-day.is-today .hhc-cal-num { color: var(--hhc-link); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.hhc-cal-day.is-chosen a, .hhc-cal-day.is-chosen a:hover { background: var(--hhc-brand); border-color: var(--hhc-brand); color: var(--hhc-on-brand); }
.hhc-cal-day.is-chosen .hhc-cal-num { color: var(--hhc-on-brand); }
.hhc-cal-day.is-chosen .hhc-cal-dot { box-shadow: 0 0 0 2px var(--hhc-on-brand); }
.hhc-cal-foot { display: flex; flex-wrap: wrap; gap: var(--hhc-space-2) var(--hhc-space-4); margin-top: var(--hhc-space-2); font-size: var(--hhc-step--1); color: var(--hhc-text-soft); }
.hhc-cal-key { display: inline-flex; align-items: center; gap: var(--hhc-space-2); }
.hhc-cal-key .hhc-cal-dot { position: static; flex: none; }

@media (max-width: 40rem) {
    .hhc-cal-nav-text { display: none; }
    .hhc-cal-grid { border-spacing: 2px; }
    .hhc-cal-day a { min-height: 44px; padding: 3px; align-items: center; }
    .hhc-cal-fig { display: none; }
    .hhc-cal-fig-short { display: block; font-size: 0.75rem; }
    .hhc-cal-dot { top: 3px; right: 3px; width: 8px; height: 8px; }
}

@media (max-width: 26rem) {
    .hhc-cal-wd { display: none; }
    .hhc-cal-wd-short { display: inline; }
    .hhc-cal-grid { width: calc(100% + 2 * var(--hhc-space-4)); margin-inline: calc(-1 * var(--hhc-space-4)); border-spacing: 1px; }
    .hhc-cal-day a { padding: 2px 1px; }
}