/* TRELLAN: the product's look, for every firm. Report 258.

   SOURCE: the Trellan brand brief (23 Oct 2026) and the component sheet
   `design/trellan-canvas/project/Main.dc.html`. The brief's CSS (its pages
   8-9) was written for another codebase; here every value is set on THIS
   app's own token names (adealia-tokens.css, app.css, components.css,
   design-system.css, openflow.css, redesign.css) and its own classes.

   LOAD ORDER. Last of the shared sheets in base.html: after redesign.css,
   before trellan-shell.css and the per-area `trellan-<area>.css` sheets,
   and before the firm's own colours (<style id="brand-colors">).

   THE FIRM'S COLOURS UNDER TRELLAN (the rule, decided here):
     * The firm's PRIMARY is used only where the brief allows green: fills,
       progress, the hover of a primary button, the accent (commit) button,
       the current item's rule, and the logo's bud. It reaches this sheet as
       `--firm-green` (and the words on it as `--firm-on-green`), which
       `model/domain/brand_colors.py` writes. `--green` falls back to
       Trellan's #76BE42 when the firm has chosen none.
     * It is NEVER text on white. Links, focus and small green text are
       Leaf #3F7A1E for every firm.
     * The firm's INK does not apply: headings, body and the rail are the
       product's ink and charcoal.
     To make that hold, the product tokens below are set on `html:root`,
     which outranks the firm's `:root{…}` <style> that comes after. */


/* ── 1. Tokens ─────────────────────────────────────────────────────── */
html:root {
  /* Trellan's own names (the brief, p.3). */
  --green:    var(--firm-green, #76BE42);   /* fills, progress, hover, bud */
  --on-green: var(--firm-on-green, #2F2F2E);/* words on --green */
  --charcoal: #565655;                      /* body, primary button, logo lines */
  --ink:      #2F2F2E;                      /* headings, text on green */
  --gray:     #6E6F6E;                      /* captions, labels, placeholders */
  --stone:    #A7A9AC;                      /* disabled, decorative lines */
  --mist:     #F5F5F5;                      /* panels, hover, alternate rows */
  --gold:     #D6B26C;                      /* the current step; never text */
  --leaf:     #3F7A1E;                      /* links, focus, small green text */
  --leaf-deep:#2F5E14;
  --bloom:    #D83C7A;                      /* one pink dot; never text */
  --pink:     #C2185B;                      /* pink text, the New tag */
  --on-pink:  #FFFFFF;
  --night:    #232322;
  --hairline: #E2E2E0;                      /* dividers only */
  --edge:     #8A8B8E;                      /* control borders, 3.4:1 */
  --menu-shadow: 0 8px 24px rgba(47, 47, 46, .12);

  /* adealia-tokens.css, as the brief's token map (p.8). */
  --ink-navy: #2F2F2E; --navy: #2F2F2E; --navy-deep: #2F2F2E; --navy-soft: #3C3C3B;
  --warm-paper: #FFFFFF; --steel-slate: #565655;
  --copper-amber: var(--green); --copper-cta: #565655; --copper-press: #3F7A1E;
  --copper-deep: #3F7A1E; --copper-lift: var(--green);
  --action-blue: #3F7A1E; --blue-deep: #3F7A1E;
  --peach: #3F7A1E; --peach-deep: #3F7A1E; --peach-soft: #EAF4E0;
  --signal-green: #3F7A1E; --green-deep: #2F5E14;
  --ink-1: #2F2F2E; --ink-2: #565655; --ink-3: #6E6F6E; --ink-4: #6E6F6E;
  --line-1: #E2E2E0; --line-2: #EEEEEC; --line-3: #8A8B8E;
  --surface-1: #FFFFFF; --surface-2: #F5F5F5; --surface-3: #FFFFFF; --surface-4: #2F2F2E;
  --border-hairline: #E2E2E0; --border-default: #E2E2E0; --border-strong: #8A8B8E;

  /* Status pairs (the brief, p.5). Problem is Adealia's alert pair, kept. */
  --ok-bg: #EAF4E0;    --ok-fg: #2F5E14;    --ok-dot: #3F7A1E;   --ok-bg-hover: #DDEDCD;
  --good-bg: #EAF4E0;  --good-fg: #2F5E14;  --good-dot: #3F7A1E;
  --warn-bg: #FAF1DC;  --warn-fg: #6B4E0E;  --warn-dot: #B8913F;
  --alert-bg: #F9E9E3; --alert-fg: #7A2E14; --alert-dot: #A33F1D;
  --info-bg: #F0F0EE;  --info-fg: #565655;  --info-dot: #A7A9AC;
  --muted-bg: #F5F5F5; --muted-fg: #6E6F6E; --muted-dot: #A7A9AC;
  --wait-bg: #F0F0EE;  --wait-fg: #565655;  --wait-fg-2: #565655;
  --new-bg: #FBE6EE;   --new-fg: #A3124F;   --new-dot: #D83C7A;
  --rd-info-bg: #F0F0EE;  --rd-info-fg: #565655;  --rd-info-dot: #A7A9AC;
  --rd-muted-bg: #F5F5F5; --rd-muted-fg: #6E6F6E; --rd-muted-dot: #A7A9AC;
  --ok-line: #CFE6BC; --warn-line: #EBD9AE; --alert-line: #E7C4BC;
  --due-calm: #6E6F6E; --due-near: #6B4E0E; --due-urgent: #6B4E0E; --due-past: #7A2E14;

  /* components.css grounds. White ground, Mist panels. */
  --page-bg: #FFFFFF; --rail-bg: #F5F5F5; --card-bg: #FFFFFF;
  --chip-bg: #E2E2E0; --tint-bg: #F5F5F5; --select-bg: #F5F5F5; --sunk-bg: #EEEEEC;
  --line: #E2E2E0; --line-input: #8A8B8E; --muted-ink: #6E6F6E;
  --anchor: #2F2F2E; --anchor-press: #2F2F2E; --on-anchor: #FFFFFF; --on-anchor-2: #D9D9D7;
  --row-tint: #F5F5F5; --rd-sunken: #F5F5F5;
  --hover-bg: #F5F5F5; --count-bg: #EEEEEC; --track-bg: #E2E2E0; --kind-bg: #F0F0EE;
  --skel-bg: #EEEEEC;

  /* The firm's tokens, held to the product (see the rule above). */
  --primary: #565655; --primary-press: var(--green); --on-primary: #FFFFFF;
  --accent: #3F7A1E; --accent-hi: #2F5E14;
  --brand-icon: #565655; --brand-edge: var(--green);
  --btn-edge: #2F2F2E; --btn-off-bg: #F5F5F5; --btn-off-fg: #A7A9AC; --btn-off-edge: #E2E2E0;

  /* The OpenFlow rail's tokens: a white rail (trellan-shell.css). */
  --of-rail-bg: #FFFFFF; --of-rail-hover: #F5F5F5; --of-rail-on: #F5F5F5;
  --of-rail-ink: #6E6F6E; --of-rail-dim: #6E6F6E; --of-rail-line: #E2E2E0;
  --of-rail-count: transparent;

  /* Type (the brief, p.6). */
  --font-display: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-sans: "Nunito Sans", "Segoe UI", Arial, sans-serif;
  --font-mono: var(--font-sans);
  --weight-display: 300; --weight-heading: 300;
  --tracking-display: 2px; --tracking-eyebrow: 3px;

  /* Square, and flat. Menus and dialogs are the only things with a shadow. */
  --radius: 0; --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-pill: 0;
  --radius-xs: 0; --radius-inner: 0; --radius-nav: 0; --shell-radius: 0;
  --radius-s: 0; --radius-m: 0; --radius-l: 0;
  --border-radius-md: 0; --border-radius-lg: 0;
  --shadow-1: none; --shadow-sm: none; --shadow-cta: none; --shadow-shell: none;
  --shadow-2: var(--menu-shadow); --shadow-md: var(--menu-shadow);
  --shadow-dialog: var(--menu-shadow); --shadow-panel: var(--menu-shadow);
  --shadow-focus: 0 0 0 2px #FFFFFF, 0 0 0 4px #3F7A1E;
  --focus-ring: 0 0 0 3px rgba(63, 122, 30, .22);
  --scrim: rgba(47, 47, 46, .45); --overlay: rgba(47, 47, 46, .45);
}

/* ── 2. Base type ──────────────────────────────────────────────────────
   Nunito Sans for everything read; Poppins for headings, labels and
   buttons. CAPITALS ONLY on headings, labels and buttons: never on a
   sentence, a name in running text, or a course title in a row. */
body {
  background: #FFFFFF;
  color: var(--charcoal);
  font-family: var(--font-sans);
}
::selection { background: #CFE6BC; color: var(--ink); }
a { color: var(--leaf); }
a:hover { color: var(--leaf-deep); }
:focus-visible { outline: 2px solid var(--leaf); outline-offset: 2px; }

h1, h2,
.of-head__title, .ui-page-title, .auth-title, .of-section__title, .ui-card__title {
  font-family: var(--font-display);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--ink);
  text-wrap: balance;
}
h1, .of-head__title, .ui-page-title { font-size: 32px; line-height: 1.15; }
.auth-title { font-size: 26px; line-height: 1.2; }
h2, .of-section__title, .ui-card__title { font-size: 22px; line-height: 1.2; }
h3 { font-family: var(--font-sans); font-weight: 600; color: var(--ink); letter-spacing: 0; text-transform: none; }
@media (max-width: 720px) {
  h1, .of-head__title, .ui-page-title { font-size: 26px; }
  h2, .of-section__title, .ui-card__title { font-size: 19px; }
}

/* The label style: Poppins 500, 11 px caps. Applied to the app's label
   CLASSES only, never to a bare <label> (a check box's label is a
   sentence). */
.ui-label, .ui-field__label, .field__label, .ofs-label, .of-field__label,
.of-group-label, .eyebrow, .ui-eyebrow, .tr-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--gray);
}
.field__label .opt { text-transform: none; letter-spacing: 0; font-family: var(--font-sans); }

/* Figures line up. */
.num, .ui-table__num, td.num, .tr-figure { font-variant-numeric: tabular-nums; }

/* ── 3. Square and flat, everywhere ────────────────────────────────────
   No rounded buttons, cards, inputs, chips, avatars or dots. The rule is
   global because the page sheets hard-code radii in about 600 places. A
   thing that must stay round (none today) takes `.tr-round`. */
*, *::before, *::after { border-radius: 0 !important; }
.tr-round { border-radius: 50% !important; }

/* Shadows: the tokens are gone above; these are the surfaces that wrote
   their own. Menus and dialogs keep `--menu-shadow`. */
.ui-card, .of-card, .of-section, .of-list, .ui-table-wrap, .ui-rows, .ui-listcard,
.dt, .shell-top, .shell-rail, .tabbar, .ui-btn, .of-chip, .ui-chip,
.side-list a[aria-current], .ui-page, .shell, .app-shell, .main-col, .shell-col {
  box-shadow: none;
}
/* `.panel` is a card on every page that uses it (report 263): no shadow. */
.panel { box-shadow: none; border: 1px solid var(--hairline); background: #FFFFFF; }
.user-menu-dropdown, .of-menu, dialog, .ui-dialog, .side-panel, .admin-chip__panel {
  box-shadow: var(--menu-shadow);
}

/* ── 4. The logo (`templates/_brand_mark.html`) ────────────────────────
   Lines take the parent's colour; the bud is --bud. Charcoal on white or
   Mist, white on ink, ink on green with a white bud (the brief, p.3). */
html:root { --bud: var(--green); }
.tr-mark { display: inline-block; flex: none; color: var(--charcoal); vertical-align: middle; }
.tr-lockup { display: inline-flex; align-items: center; gap: calc(var(--tr-mark, 26px) * .45); color: var(--charcoal); }
.tr-wordmark {
  font-family: var(--font-display); font-weight: 300;
  text-transform: uppercase; letter-spacing: .3em; margin-right: -.3em;
  line-height: 1; color: inherit;
}
.tr-lockup .tr-wordmark { font-size: calc(var(--tr-mark, 26px) * .5); }
.tr-on-ink { color: #FFFFFF; }
.tr-on-green { color: var(--ink); --bud: #FFFFFF; }

/* The sign-in card's mark and product name. */
.auth-logo--mark { display: flex; justify-content: center; height: auto; width: auto; }
.auth-logo--mark .tr-mark { color: var(--charcoal); }
.auth-product.tr-wordmark { font-size: 22px; color: var(--charcoal); margin-right: 0; padding-left: .3em; }
.shell-rail__adealia .tr-mark { color: currentColor; }

/* ══ 5. Components, on this app's classes ═════════════════════════════ */

/* OpenFlow v2's own tokens (of-base.css), to the product's. */
html:root { --of-head-bg: #FFFFFF; --of-head-ink: #6E6F6E; --of-muted: #6E6F6E; --of-field: #8A8B8E; }

/* ── 5.1 Buttons (`ui-btn`) ────────────────────────────────────────────
   Poppins 500, 12 px caps, 2 px tracking, 44 px, square.
     --primary    charcoal, white words; hover green with ink words
     --secondary  ink outline; fills ink on hover
     --commit     green, ink words: THE ONE COMMIT on a screen (save, send,
                  approve, submit, register, confirm). Decision 2.
     --quiet      no edge; Mist on hover
     --danger     brick words, no fill; the Problem pair on hover
   A button that only opens a page is --primary or --secondary, never
   --commit. */
.ui-btn, .auth-btn, .jb-btn, .jr-btn, .jp-btn, .jl-btn {
  font-family: var(--font-display);
  font-weight: 500; font-size: 12px; letter-spacing: 2px;
  text-transform: uppercase; line-height: 1;
  border-radius: 0; box-shadow: none;
}
.ui-btn { padding: 0 22px; }
.ui-btn .ms { font-size: 18px; letter-spacing: 0; }
.ui-btn:focus-visible { outline: 2px solid var(--leaf); outline-offset: 2px; box-shadow: none; }

.ui-btn--primary, .auth-btn {
  background: var(--charcoal); border-color: var(--charcoal); color: #FFFFFF; font-weight: 500;
}
.ui-btn--primary:hover:not(:disabled):not([aria-disabled="true"]),
.auth-btn:hover:not(:disabled) {
  background: var(--green); border-color: var(--green); color: var(--on-green);
}
.ui-btn--secondary {
  background: #FFFFFF; border-color: var(--ink); color: var(--ink);
}
.ui-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--ink); border-color: var(--ink); color: #FFFFFF;
}
.ui-btn--commit, .ui-btn--primary.ui-btn--commit {
  background: var(--green); border-color: var(--green); color: var(--on-green); font-weight: 600;
}
.ui-btn--commit:hover:not(:disabled):not([aria-disabled="true"]),
.ui-btn--primary.ui-btn--commit:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--ink); border-color: var(--ink); color: #FFFFFF;
}
.ui-btn--quiet, .ui-btn--ghost { background: transparent; border-color: transparent; color: var(--ink); }
.ui-btn--quiet:hover:not(:disabled), .ui-btn--ghost:hover:not(:disabled) { background: var(--mist); color: var(--ink); }
.ui-btn--danger { background: transparent; border-color: transparent; color: var(--alert-fg); padding: 0 16px; }
.ui-btn--danger:hover:not(:disabled) { background: var(--alert-bg); color: var(--alert-fg); }
.ui-btn:disabled, .ui-btn[aria-disabled="true"] {
  background: var(--mist); border-color: var(--hairline); color: var(--stone); cursor: not-allowed;
}
.ui-btn--sm { font-size: 11px; padding: 0 14px; }
.of-head__actions .ui-btn { padding: 0 22px; }

/* A quiet green text link that does a row's one job: "Review ›". */
.tr-go {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--leaf); text-decoration: none; white-space: nowrap;
}
.tr-go:hover { color: var(--leaf-deep); text-decoration: underline; }

/* A check box that is a SUBMIT BUTTON: "Mark done" at the start of a row
   (decision 5). A real <button> in a real <form>, so no script is needed;
   its words are in a visually-hidden span and its title. */
.tr-check {
  position: relative; z-index: 2; flex: none;
  width: 20px; height: 20px; min-height: 0; padding: 0; margin: 0;
  border: 1px solid var(--edge); background: #FFFFFF; cursor: pointer;
}
.tr-check:hover { border-color: var(--leaf); background: var(--mist); }
.tr-check:hover::after {
  content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
  border: solid var(--leaf); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.tr-check:focus-visible { outline: 2px solid var(--leaf); outline-offset: 2px; }

/* ── 5.2 Fields, selects, file upload ─────────────────────────────────
   44 px, 1 px #8A8B8E, square; focus turns the edge Leaf with a 3 px soft
   Leaf halo; an error is brick with its message below. Placeholders are
   Gray (5.1:1), never Stone. */
.ui-input, .of-search, .of-select, .ofs-input,
.ui-page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="color"]),
.ui-page select:not([multiple]):not([size]), .ui-page textarea,
.auth-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
  border: 1px solid var(--edge); border-radius: 0; background-color: #FFFFFF;
  font-family: var(--font-sans); font-size: 15px; color: var(--ink); box-shadow: none;
}
::placeholder { color: var(--gray); opacity: 1; }
.ui-input:focus, .of-search:focus, .of-select:focus, .ofs-input:focus,
.ui-page input:focus, .ui-page select:focus, .ui-page textarea:focus,
.auth-form input:focus,
.ui-input:focus-visible, .ui-page input:focus-visible, .ui-page select:focus-visible,
.ui-page textarea:focus-visible, .of-search:focus-visible, .of-select:focus-visible {
  outline: none; border-color: var(--leaf); box-shadow: var(--focus-ring);
}
.ui-page [aria-invalid="true"], .ui-page .is-invalid { border-color: var(--alert-dot); box-shadow: none; }
.field__error, .ui-field__error { color: var(--alert-fg); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--leaf); }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--leaf); outline-offset: 2px; }
/* A search field's own wrapper (the top bar's, a toolbar's) is the edge. */
.topsearch__form, .of-search-wrap { border-radius: 0; }

/* File upload (Main.dc.html §5). The picker alone is the button and no
   box; where a board draws the dashed Mist box, `file_picker(drop=…)` puts
   the picker in `.ui-file-drop` (report 263). */
.ui-upload, .of-upload, .tr-drop {
  border: 1px dashed var(--edge); background: var(--mist);
}
.ui-file { border: 0; background: transparent; padding: 0; }
.ui-file__button {
  font-family: var(--font-display); font-weight: 500; font-size: 12px;
  letter-spacing: 2px; text-transform: uppercase;
  border: 1px solid var(--ink); background: #FFFFFF; color: var(--ink);
}
.upload__preview { border-radius: 0; }

/* ── 5.3 Filter chips (`of-chip`, `ui-chip`) ──────────────────────────
   Square, a hairline-dark edge, the count in bold; the chosen one ink. */
.of-chip, .ui-chip {
  height: 38px; padding: 0 14px; gap: 8px;
  border: 1px solid var(--edge); background: #FFFFFF; color: var(--ink);
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
}
.of-chip:hover, .ui-chip:hover { border-color: var(--ink); color: var(--ink); background: var(--mist); }
.of-chip[aria-current], .of-chip.is-on, .ui-chip[aria-current], .ui-chip.is-on {
  background: var(--ink); border-color: var(--ink); color: #FFFFFF;
}
/* The segmented control (By due date / By person): ink when chosen. */
.of-seg { background: #FFFFFF; border: 1px solid var(--ink); padding: 0; gap: 0; }
.of-seg__opt {
  height: 42px; padding: 0 18px; color: var(--ink);
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: 2px; text-transform: uppercase;
}
.of-seg__opt:hover { background: var(--mist); color: var(--ink); }
.of-seg__opt[aria-current] { background: var(--ink); color: #FFFFFF; font-weight: 500; }

/* ── 5.4 Status pills (`ui-pill`, `ui-badge`, `of-pill`) ──────────────
   Square, an 8 px square dot, 12 px semibold words, 4 by 10 px. The dot is
   --pill-dot; each tone sets it (the brief, p.5). A word is always there. */
.ui-pill, .ui-badge, .of-pill {
  height: auto; min-height: 24px; padding: 4px 10px; gap: 7px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600; line-height: 1.2;
  background: var(--muted-bg); color: var(--muted-fg); --pill-dot: var(--muted-dot);
}
.ui-pill::before, .ui-badge::before, .of-pill::before {
  content: ""; width: 8px; height: 8px; flex: none; background: var(--pill-dot);
}
.ui-badge--bare::before { display: none; }
.ui-pill--done, .ui-badge--ok, .ui-badge--done, .of-pill--ok, .tr-pill--ok
  { background: var(--ok-bg); color: var(--ok-fg); --pill-dot: var(--ok-dot); }
.ui-pill--progress, .ui-badge--warn, .ui-badge--held, .of-pill--warn, .tr-pill--warn
  { background: var(--warn-bg); color: var(--warn-fg); --pill-dot: var(--warn-dot); }
.ui-pill--sent-back, .ui-badge--alert, .ui-badge--overdue, .of-pill--alert, .tr-pill--alert
  { background: var(--alert-bg); color: var(--alert-fg); --pill-dot: var(--alert-dot); }
.ui-pill--waiting, .ui-badge--waiting, .ui-badge--info, .ui-pill--kind, .tr-pill--wait
  { background: var(--wait-bg); color: var(--wait-fg); --pill-dot: var(--info-dot); }
.ui-pill--neutral, .ui-pill--locked, .ui-badge--neutral, .ui-badge--muted, .of-pill--neutral, .tr-pill--draft
  { background: var(--muted-bg); color: var(--muted-fg); --pill-dot: var(--muted-dot); }
.tr-pill--new { background: var(--new-bg); color: var(--new-fg); --pill-dot: var(--new-dot); }
/* The one pink tag: white on Bougainvillea, no dot. */
.tr-tag-new {
  display: inline-flex; align-items: center; padding: 3px 8px;
  background: var(--pink); color: var(--on-pink);
  font-size: 12px; font-weight: 700;
}
.badge { border-radius: 0; background: var(--mist); color: var(--gray); }

/* ── 5.5 Tables (`ui-table`, `dt`, `of-list`) ─────────────────────────
   Header: 11 px caps label, 1 px ink line under it. Rows: 1 px hairline,
   Mist on hover. Figures right-aligned and tabular. */
.ui-table-wrap, .dt, .of-list { border: 1px solid var(--hairline); background: #FFFFFF; }
.ui-table th, .dt__head, .of-list__head {
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: 2.4px; text-transform: uppercase; color: var(--gray);
  background: #FFFFFF; border-bottom: 1px solid var(--ink);
}
.dt__head a, .ui-table th a { color: var(--gray); font-weight: 500; }
.dt__head a:hover, .dt__head [aria-sort]:not([aria-sort="none"]) a,
.ui-table th[aria-sort]:not([aria-sort="none"]), .ui-table th[aria-sort]:not([aria-sort="none"]) a {
  color: var(--ink); font-weight: 500;
}
.ui-table td, .dt__row, .of-row { border-color: var(--hairline); color: var(--ink); }
.ui-table td { border-bottom: 1px solid var(--hairline); }
.ui-table tbody tr:hover td, .dt__row:hover, .of-row--opens:hover, a.of-row:hover { background: var(--mist); }
.dt__row.is-pinned, .ui-table tr.is-pinned td { background: #FFFBF9; box-shadow: inset 3px 0 0 var(--alert-dot); }
.ui-table__num, .dt .num { font-variant-numeric: tabular-nums; text-align: right; }
.dt__foot { background: var(--mist); color: var(--ink); }
.of-row__sub, .dt__two > :last-child:not(:first-child), .ui-table__sub { color: var(--gray); }
.of-row__avatar, .avatar { border-radius: 0; background: var(--charcoal); color: #FFFFFF; }

/* ── 5.6 Cards (`ui-card`, `of-card`, `of-section`) ───────────────────
   White, 1 px hairline, no shadow, no radius, 24 px (16 on a phone). */
.ui-card, .of-card, .of-section {
  background: #FFFFFF; border: 1px solid var(--hairline); box-shadow: none;
}
.of-section__line, .of-head__line, .ui-card__sub { color: var(--gray); }
.ui-card--flag, .ui-card--flag-alert, .ui-card--sent-back { box-shadow: inset 3px 0 0 var(--alert-dot); }

/* ── 5.7 Tabs and side lists ──────────────────────────────────────────
   Caps labels. The current tab has a 2 px green rule under it; the current
   side-list item a 2 px green rule on its left, on Mist. */
.tabs, .ui-tabs, .of-tabs { border-bottom: 1px solid var(--hairline); }
.tabs a, .ui-tabs a, .of-tabs a {
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--gray);
}
.tabs a:hover, .ui-tabs a:hover, .of-tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"], .ui-tabs a[aria-current], .of-tabs a[aria-current] {
  color: var(--ink); font-weight: 500; box-shadow: inset 0 -2px 0 var(--green);
}
.side-list, .of-settings__nav { gap: 0; border-top: 1px solid var(--hairline); }
.side-list a, .of-settings__link {
  min-height: 44px; padding: 0 12px; border-bottom: 1px solid var(--hairline);
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--gray); background: transparent;
}
.side-list a:hover, .of-settings__link:hover { background: var(--mist); color: var(--ink); }
.side-list a[aria-current="page"], .side-list a[aria-current="true"],
.of-settings__link[aria-current] {
  background: var(--mist); color: var(--ink); font-weight: 500; box-shadow: inset 2px 0 0 var(--green);
}
.of-settings__link .ms { display: none; }
.of-settings__link .of-settings__chev { display: inline-block; margin-left: auto; color: var(--stone); }

/* ── 5.8 Flash messages, toasts, notices ──────────────────────────────
   A 3 px rule on the left and the tone's ground; square; no shadow. */
.flash {
  border: 0; border-left: 3px solid var(--leaf); background: var(--mist);
  color: var(--ink); box-shadow: none;
}
.flash--success { border-left-color: var(--leaf); background: var(--ok-bg); color: var(--ok-fg); }
.flash--error, .flash--danger { border-left-color: var(--alert-dot); background: var(--alert-bg); color: var(--alert-fg); }
.flash--warning { border-left-color: var(--warn-dot); background: var(--warn-bg); color: var(--warn-fg); }
.of-toasts .of-toast.flash { background: var(--ink); color: #FFFFFF; border-left: 3px solid var(--green); box-shadow: var(--menu-shadow); }
.of-toasts .of-toast--error.flash, .of-toasts .of-toast--warning.flash { background: var(--alert-fg); border-left-color: var(--alert-dot); }
.of-note, .ui-callout, .tr-note {
  border: 0; border-left: 3px solid var(--green); background: var(--mist); color: var(--ink);
}

/* ── 5.9 Empty states ─────────────────────────────────────────────────── */
.ui-empty, .of-state { background: #FFFFFF; border: 1px dashed var(--hairline); color: var(--gray); }
.ui-empty__title, .of-state__title, .ui-empty > h2, .ui-empty > h3 {
  font-family: var(--font-display); font-weight: 300; text-transform: uppercase;
  letter-spacing: 2px; color: var(--ink);
}

/* ── 5.10 Progress: 4 px, square ───────────────────────────────────────
   Green done, gold current, the hairline still to come. */
.ui-progress, .of-meter, .mini-bar { height: 4px; background: var(--hairline); }
.ui-progress__bar, .of-meter__fill, .of-progress--done .of-meter__fill, .mini-bar > span { background: var(--green); }
.hours-bar { height: 8px; background: var(--hairline); }
.hours-bar > .approved { background: var(--leaf); }
.hours-bar > .waiting { background: repeating-linear-gradient(135deg, var(--green) 0 2px, #FFFFFF 2px 5px); }
.segs { gap: 3px; }
.segs > li { height: 4px; background: var(--hairline); }
.segs > [data-s="reached"] { background: var(--green); }
.segs > [data-s="progress"] { background: var(--gold); }
.stepper li::before { border-radius: 0; }
.stepper li.is-done::before { background: var(--green); border-color: var(--green); color: var(--on-green); }
.stepper li[aria-current="step"]::before { border-color: var(--leaf); color: var(--leaf); }
.choice:has(input:checked) { border-color: var(--leaf); background: var(--mist); }

/* Phone: full-width primary buttons in forms, 44 px targets. */
@media (max-width: 720px) {
  .of-formbar .ui-btn--primary, .of-formbar .ui-btn--commit { flex: 1 1 100%; }
}


/* ══ 6. Shared fixes after the area agents (report 263) ═══════════════
   Each item names the board it follows. Area sheets load after this one;
   their page-scoped rules still win where a page needs its own. */

/* ── 6.1 Every page title: Poppins 300, caps, 2 px tracking, ink ──────
   The older pages' `.ui-page-head h1` and `.ui-title` were 600 and
   -0.01em (components.css, design-system.css, rest-pages.css). */
.ui-page-head h1, .ui-page .ui-page-head h1, .ui-title, .ui-page .ui-title,
.welcome-title, .ui-page .of-head__title, .of-error__title {
  font-family: var(--font-display); font-weight: 300;
  text-transform: uppercase; letter-spacing: 2px; color: var(--ink);
  font-size: 32px; line-height: 1.15;
}
@media (max-width: 720px) {
  .ui-page-head h1, .ui-page .ui-page-head h1, .ui-title, .ui-page .ui-title,
  .welcome-title, .ui-page .of-head__title, .of-error__title { font-size: 26px; }
}

/* ── 6.2 Back links: Leaf caps with a chevron (ce-edit, m-comms-*) ────
   One look for every "back up" link. The arrow icon in the markup is
   hidden and a chevron drawn, so every back link looks the same. */
.ui-back, .of-head__back, .ofs-back, .jb-back, .jr-item-bar__back,
.ui-item-bar__back, .bx-back a,
.ui-page .ui-back, .ui-page .of-head__back, .jb a.jb-back, .jb .jb-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  line-height: 1.4; letter-spacing: 2px; text-transform: uppercase;
  color: var(--leaf); text-decoration: none;
}
.ui-back:hover, .of-head__back:hover, .ofs-back:hover, .jb-back:hover,
.jr-item-bar__back:hover, .ui-item-bar__back:hover, .bx-back a:hover,
.ui-page .ui-back:hover, .ui-page .of-head__back:hover, .jb a.jb-back:hover {
  color: var(--leaf-deep); text-decoration: underline; text-underline-offset: 3px;
}
.ui-back > .ms, .of-head__back > .ms, .ofs-back > .ms, .jb-back > .ms,
.jr-item-bar__back > .ms, .ui-item-bar__back > .ms, .bx-back a > .ms { display: none; }
.ui-back::before, .of-head__back::before, .ofs-back::before, .jb-back::before,
.jr-item-bar__back::before, .ui-item-bar__back::before, .bx-back a::before {
  content: ""; flex: none; width: 6px; height: 6px; margin: 0 2px 0 3px;
  border: solid currentColor; border-width: 0 0 1.5px 1.5px; transform: rotate(45deg);
}

/* ── 6.3 Facts (`of.facts`): Mist, caps labels (comms-message,
   admin-feedback-thread) ───────────────────────────────────────────── */
.of-facts, .of-card.of-facts { background: var(--mist); border: 0; padding: 24px; gap: 14px; }
.of-facts dt {
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: 2.4px; text-transform: uppercase; color: var(--gray);
}
.of-facts dd { font-size: 15px; color: var(--ink); }
@media (max-width: 720px) { .of-facts, .of-card.of-facts { padding: 16px; } }

/* ── 6.4 Feedback: the team's message is charcoal with white words; the
   person's is white with a hairline (decision 3) ───────────────────── */
.fb-msg { border-radius: 0; box-shadow: none; }
.fb-msg--admin { background: var(--charcoal); color: #FFFFFF; border: 0; }
.fb-msg--admin a, .fb-msg--admin .fb-msg__who { color: #FFFFFF; }
.fb-msg--user { background: #FFFFFF; color: var(--charcoal); border: 1px solid var(--hairline); }

/* ── 6.5 The file picker (`_file_picker.html`) ─────────────────────────
   The button is the board's secondary: ink edge, caps. The dashed Mist
   box, where a board draws one (ce-edit, admin-feedback-thread,
   ce-courses-staff): an icon, a line, a hint, the button. The input
   stays inside its label, so it works without script. */
.ui-file__button {
  min-height: 44px; padding: 0 22px; box-sizing: border-box;
  font-family: var(--font-display); font-weight: 500; font-size: 12px;
  letter-spacing: 2px; text-transform: uppercase; line-height: 1;
  border: 1px solid var(--ink); background: #FFFFFF; color: var(--ink);
}
.ui-file__button:hover { background: var(--ink); color: #FFFFFF; }
.ui-file input[type="file"]:focus-visible + .ui-file__button { outline: 2px solid var(--leaf); outline-offset: 2px; box-shadow: none; }
.ui-file-drop {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px; border: 1px dashed var(--edge); background: var(--mist);
}
.ui-file-drop__ico { flex: none; font-size: 24px; color: var(--charcoal); }
.ui-file-drop__text { display: flex; flex-direction: column; flex: 1 1 220px; min-width: 0; }
.ui-file-drop__title { font-size: 15px; font-weight: 700; color: var(--ink); }
.ui-file-drop__hint { font-size: 13px; color: var(--gray); }
.ui-file-drop .ui-file { flex: none; }

/* ── 6.6 The site-admin chip's panel stays in the window on a phone ──
   It hung from the chip's right edge, 360 px wide, so at 390 px it began
   at x −78. Under 760 px it sits under the top bar, 16 px from each side. */
@media (max-width: 759.98px) {
  .admin-chip__panel { position: fixed; left: 16px; right: 16px; top: 68px; width: auto; }
}

/* ── 6.7 The page's padding: 40 px, as the boards' <main> ───────────── */
@media (min-width: 760px) {
  .shell-col > .ui-page, .shell-col > .ui-page.of-t, .shell-col > .ui-page.of-home { --pg-g: 40px; }
  .shell-col > .ui-page { padding-top: 40px; padding-bottom: 72px; }
}

/* ── 6.8 `.ui-table` on a phone: the boards' two-line row ─────────────
   The course-table pattern (`.cc-table`, of-progress.css) for every
   table: the row's name on line one, the other cells after it as one
   line of small grey words, a pill where it falls. components.css §15
   made each row a card of "label  value" lines; the labels are no longer
   painted, and stay in `data-label` for screen readers.
     * The name is the first `td[data-label="—"]`, or the first cell when
       the row has none.
     * A cell that is only an action (a form, a button, "Review ›") sits
       at the right of line one, never on a line of its own.
   The tables with their own phone rows are left out: the queue
   (`.wq-table`), CE compliance (`.cc-table`), a broker's courses
   (`.ce-table`); Admin users' rules are more specific. */
@media (max-width: 720px) {
  .ui-table-wrap:not(:has(.wq-table, .cc-table, .ce-table)) { border: 0; border-top: 1px solid var(--ink); background: transparent; }
  .ui-table:not(.wq-table, .cc-table, .ce-table) tbody tr {
    display: flex; flex-wrap: wrap; align-items: baseline;
    column-gap: 12px; row-gap: 2px; padding: 12px 4px; width: auto;
    border-bottom: 1px solid var(--hairline);
  }
  .ui-table:not(.wq-table, .cc-table, .ce-table) tbody tr::after { content: ""; order: 2; flex: 0 0 100%; height: 0; }
  .ui-table:not(.wq-table, .cc-table, .ce-table) tbody td {
    order: 3; display: inline; flex: 0 1 auto; width: auto; min-width: 0;
    padding: 0; border: 0; font-size: 13px; line-height: 1.5; color: var(--gray);
    overflow-wrap: anywhere;
  }
  .ui-table:not(.wq-table, .cc-table, .ce-table) tbody td[data-label]::before { content: none; display: none; }
  /* Line one: the name. */
  .ui-table:not(.wq-table, .cc-table, .ce-table) tbody tr > td[data-label="—"]:not(td[data-label="—"] ~ td),
  .ui-table:not(.wq-table, .cc-table, .ce-table) tbody tr:not(:has(> td[data-label="—"])) > td:first-child {
    order: 0; flex: 1 1 0; min-width: 60%; font-size: 15px; color: var(--ink);
  }
  /* A cell that is only an action: at the right of line one. */
  .ui-table:not(.wq-table, .cc-table, .ce-table) tbody tr > td:last-child:not(:first-child):has(form, button, .ui-btn, .tr-go) {
    order: 1; flex: none; margin-left: auto; align-self: center;
  }
  .ui-table:not(.wq-table, .cc-table, .ce-table) tbody td:empty { display: none; }
  .ui-table:not(.wq-table, .cc-table, .ce-table) tbody td[colspan] { order: 0; flex: 1 1 100%; font-size: 14px; }
  .ui-table:not(.wq-table, .cc-table, .ce-table) tbody td .ui-pill, .ui-table:not(.wq-table, .cc-table, .ce-table) tbody td .ui-badge, .ui-table:not(.wq-table, .cc-table, .ce-table) tbody td .of-pill { vertical-align: middle; }
  .tra-users .ui-table tbody tr::after { content: none; }
}

/* ── 6.9 The shared row (`of.list`) on a phone: a check box and a
   Remove never take a line of their own (m-people-property-managers,
   m-people-group-detail) ─────────────────────────────────────────────
   The check box sits at the left of the row, centred; the words line up
   after it. A Remove (any cell holding a form or a button) sits at the
   right, centred, in place of the chevron. */
@media (max-width: 1023.98px) {
  .of-row:has(> .of-row__cell input[type="checkbox"]) { padding-left: 52px; }
  .of-row > .of-row__cell:has(> input[type="checkbox"]) {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; margin: 0;
  }
  .of-row > .of-row__cell:has(> input[type="checkbox"])::after { content: none !important; }
  .of-row > .of-row__cell > input[type="checkbox"] { width: 20px; height: 20px; margin: 0; }
  .of-row:has(> .of-row__cell form, > .of-row__cell button) { padding-right: 104px; }
  .of-row > .of-row__cell:has(form, button) {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%); margin: 0;
  }
  .of-row:has(> .of-row__cell form, > .of-row__cell button) > .of-row__chev { display: none; }
}

/* ── 6.10 The list toolbar folds on a phone (m-queue, m-journey-board,
   m-people-list) ──────────────────────────────────────────────────────
   `of.toolbar` writes a check box (`.of-fold`) before the form and a
   "Filters" label inside it. On a desktop neither shows and every field
   is in the row. Under 720 px: the search on its own line; "Filters" and
   a "Sort by" select side by side; the rest of the fields only while the
   box is ticked; the count under them. */
.of-fold, .of-fold__btn { display: none; }
.of-sort { display: contents; }
.of-sort__label { display: none; }
@media (max-width: 720px) {
  .of-fold {
    display: block; position: absolute; left: 0; width: 1px; height: 1px; margin: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; opacity: 0;
  }
  .of-fold + .of-toolbar:has(> :not(.of-search):not(.of-fold__btn):not(.of-toolbar__count):not(.of-toolbar__go):not(.of-sort):not(input[type="hidden"])) > .of-fold__btn {
    display: flex; order: 1; flex: 1 1 calc(50% - 4px); align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 12px; box-sizing: border-box; cursor: pointer;
    font-family: var(--font-display); font-weight: 500; font-size: 11px;
    letter-spacing: 1.8px; text-transform: uppercase;
  }
  .of-fold + .of-toolbar > .of-fold__btn { border: 1px solid var(--ink); background: #FFFFFF; color: var(--ink); }
  .of-fold__btn::before {
    content: ""; width: 14px; height: 10px; flex: none;
    background: linear-gradient(currentColor 0 0) top / 14px 1.5px no-repeat,
                linear-gradient(currentColor 0 0) center / 10px 1.5px no-repeat,
                linear-gradient(currentColor 0 0) bottom / 6px 1.5px no-repeat;
  }
  .of-fold:checked + .of-toolbar > .of-fold__btn { background: var(--ink); color: #FFFFFF; }
  .of-fold:focus-visible + .of-toolbar > .of-fold__btn { outline: 2px solid var(--leaf); outline-offset: 2px; }
  .of-fold + .of-toolbar > .of-search { order: 0; flex: 1 1 100%; }
  .of-fold + .of-toolbar > .of-sort {
    order: 1; flex: 1 1 calc(50% - 4px); display: flex; flex-direction: column; gap: 6px; min-width: 0;
  }
  .of-fold + .of-toolbar > .of-sort > .of-select { width: 100%; flex: none; height: 44px; }
  .of-fold + .of-toolbar > .of-sort > .of-sort__label {
    display: block; font-family: var(--font-display); font-weight: 500; font-size: 11px;
    letter-spacing: 2.4px; text-transform: uppercase; color: var(--gray);
  }
  /* With the sort select beside it, the button lines up with the select. */
  .of-fold + .of-toolbar:has(> .of-sort) > .of-fold__btn { align-self: flex-end; }
  .of-fold + .of-toolbar > :not(.of-search):not(.of-fold__btn):not(.of-toolbar__count):not(.of-toolbar__go):not(.of-sort) {
    order: 2; flex: 1 1 100%; max-width: none;
  }
  .of-fold:not(:checked) + .of-toolbar > :not(.of-search):not(.of-fold__btn):not(.of-toolbar__count):not(.of-toolbar__go):not(.of-sort):not(input[type="hidden"]) {
    display: none;
  }
  .of-fold + .of-toolbar > .of-toolbar__count { order: 3; flex: 1 1 100%; margin-left: 0; }
  .of-fold + .of-toolbar > .of-toolbar__go { order: 4; }
}