/* Fieldhouse "Field Precision 2026" look. Linked after the classic sheets by FieldhouseStyles,
 * TaskStyles and ManagerStyles (components/fieldhouse/uiMode.ts).
 *
 * EVERY rule lives inside `:root:not(.fh-classic) .fh-root { ... }` (native CSS nesting):
 *   - it out-ranks the classic files whatever the load order (two extra selector parts);
 *   - `?ui=classic` (or NEXT_PUBLIC_FH_UI_CLASSIC=1) puts .fh-classic on <html> and turns it off;
 *   - a browser without nesting drops the block and shows the classic look.
 * Visual properties only: colour, background, border, radius, shadow, spacing polish, type,
 * transitions. Nothing here hides, reorders or changes what is clickable.
 *
 * Cascade note: because these selectors are stronger than the classic ones, a base override
 * (say `.fh-chip { background }`) also beats the classic state rule (`.fh-chip.fh-on`). Every
 * state variant whose property is touched below is therefore restated right next to its base. */

:root:not(.fh-classic) .fh-root {
  /* ---------- tokens ---------- */
  --fh-bg: #f3f6f9;
  --fh-card: #fff;
  --fh-line: rgba(7, 55, 85, 0.1);
  --fh-line-soft: rgba(7, 55, 85, 0.06);
  --fh-hair: rgba(7, 55, 85, 0.08);
  --fh-card-br: rgba(7, 55, 85, 0.07);
  --fh-field-br: rgba(7, 55, 85, 0.16);
  --fh-e1: 0 1px 0 rgba(7, 55, 85, 0.04), 0 1px 2px rgba(7, 55, 85, 0.06);
  --fh-e2: 0 1px 2px rgba(7, 55, 85, 0.05), 0 8px 24px -12px rgba(7, 55, 85, 0.18);
  --fh-e2-hover: 0 1px 2px rgba(7, 55, 85, 0.06), 0 14px 32px -14px rgba(7, 55, 85, 0.3);
  --fh-e3: 0 24px 64px -24px rgba(7, 25, 38, 0.45);
  --fh-shadow: var(--fh-e2);
  --fh-r-sm: 10px;
  --fh-r: 16px;
  --fh-r-lg: 22px;
  --fh-ring: 0 0 0 3px rgba(73, 149, 209, 0.28);
  --fh-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --fh-dur: 160ms;
  --fh-navy-2: #0b4466;
  --fh-navy-press: #052b44;
  --fh-alert-red: #d92d20;

  /* Icon masks, one family with components/fieldhouse/Icons.tsx: 24 viewBox, stroke 1.75, round caps. */
  --fh-i-chev-down: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");

  background:
    radial-gradient(120% 55% at 100% 0%, rgba(187, 213, 49, 0.03) 0%, rgba(187, 213, 49, 0) 62%),
    radial-gradient(90% 45% at 0% 0%, rgba(7, 55, 85, 0.02) 0%, rgba(7, 55, 85, 0) 62%),
    var(--fh-bg);
  text-rendering: optimizeLegibility;

  /* ---------- numbers: tabular everywhere a figure is read ---------- */
  & :is(.fh-md-big, .fh-stat-val, .fh-mg-num-val, .fh-mg-row-count, .fh-closing-val, .fh-chip-n,
      .fh-tab-badge, .fh-range-label, .fh-ccard-when, .fh-ccard-count, .fh-ccard-money,
      .fh-md-install-date, .fh-tk-card-n, .fh-tk-bar-n, .fh-tk-meta, .fh-mg-detail dd,
      .fh-md-stage-count, .fh-wd-count, .fh-md-group-title span, .fh-mg-stage-hd span, .fh-tally,
      .fh-tk-count, .fh-mg-delta, .fh-md-date, .fh-mg-hd-sub, .fh-md-tile-sub, .fh-md-breakdown,
      .fh-mg-num-sub, .fh-mg-meta, .fh-row-time, .fh-mg-goals, .fh-md-daycol-title span) {
    font-variant-numeric: tabular-nums;
  }

  /* ---------- display headings ---------- */
  & :is(.fh-header h1, .fh-md-sheet-hd h2, .fh-sheet-head h2, .fh-ccard-name, .fh-mg-detail-title,
      .fh-tk-proj h2, .fh-md-daycol-title, .fh-mg-kind, .fh-md-home-link) {
    letter-spacing: -0.01em;
  }

  /* ---------- uppercase micro-labels ---------- */
  & :is(.fh-md-tile-label, .fh-stat .fh-stat-label, .fh-mg-num-label, .fh-field-label,
      .fh-section-title, .fh-tk-section, .fh-mg-group-title, .fh-mg-detail dt,
      .fh-project-row .fh-project-k, .fh-table thead th, .fh-mg-goals thead th,
      .fh-tk-done-group summary, .fh-md-day-title) {
    font-family: var(--fh-display);
    font-size: 11px;
    letter-spacing: 0.09em;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--fh-muted);
  }
  & .fh-md-day-today .fh-md-day-title { color: var(--fh-navy); }

  /* =====================================================================
     Header
     ===================================================================== */
  & .fh-header {
    background: linear-gradient(135deg, var(--fh-navy) 0%, var(--fh-navy-2) 100%);
    border-bottom: 2px solid var(--fh-lime);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 18px -12px rgba(7, 25, 38, 0.55);
  }
  & .fh-header h1 { font-size: 20px; }
  & .fh-md-title h1 { font-size: 22px; line-height: 1.15; }
  & .fh-md-date { color: rgba(255, 255, 255, 0.74); font-size: 13px; letter-spacing: 0.01em; }
  @media (max-width: 480px) {
    & .fh-header h1 { font-size: 18px; }
    & .fh-md-title h1 { font-size: 21px; }
  }

  & .fh-header-closing { gap: 8px; }
  & .fh-header-closing .fh-closing-label {
    font-size: 10.5px;
    letter-spacing: 0.14em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.62);
  }
  & .fh-header-closing .fh-closing-val {
    font-size: 24px;
    letter-spacing: -0.01em;
    color: var(--fh-lime);
    text-shadow: 0 0 18px rgba(187, 213, 49, 0.18);
  }
  & .fh-header-closing .fh-closing-val.fh-err {
    color: #ffb4b4;
    font-size: 13px;
    text-shadow: none;
  }

  /* "‹ My Day" back to home */
  & .fh-md-home-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: -4px;
    font-size: 20px;
    border-radius: 12px;
    padding: 0 6px 0 2px;
    transition: background-color var(--fh-dur) var(--fh-ease);
    & svg { width: 22px; height: 22px; flex: none; }
  }
  @media (hover: hover) {
    & .fh-md-home-link:hover { background: rgba(255, 255, 255, 0.08); }
  }

  /* "Full view ›" and the calendar / team buttons: glass pills on navy */
  & :is(.fh-md-full, .fh-md-cal) {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    align-items: center;
    gap: 6px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background-color var(--fh-dur) var(--fh-ease), border-color var(--fh-dur) var(--fh-ease), transform var(--fh-dur) var(--fh-ease);
  }
  & .fh-md-full {
    border-radius: 999px;
    padding: 0 12px 0 16px;
    font-weight: 700;
    letter-spacing: 0.01em;
    & svg { width: 16px; height: 16px; flex: none; }
  }
  & .fh-md-cal {
    border-radius: 12px;
    & svg { width: 20px; height: 20px; flex: none; }
  }
  @media (hover: hover) {
    & :is(.fh-md-full, .fh-md-cal):hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.26); }
  }
  & :is(.fh-md-full, .fh-md-cal):active { transform: scale(0.98); }

  & .fh-header-link {
    border-radius: 8px;
    text-underline-offset: 3px;
  }
  @media (hover: hover) {
    & .fh-header-link:hover { text-decoration: underline; }
  }

  /* ---------- scope switch (dark) ---------- */
  & .fh-seg {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    padding: 3px;
    gap: 2px;
    box-shadow: inset 0 1px 2px rgba(7, 25, 38, 0.25);
  }
  & .fh-seg button {
    border-radius: 9px;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: background-color var(--fh-dur) var(--fh-ease), color var(--fh-dur) var(--fh-ease), box-shadow var(--fh-dur) var(--fh-ease);
  }
  & .fh-seg button + button { border-left: 0; }
  @media (hover: hover) {
    & .fh-seg button:not(.fh-on):not(:disabled):hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
  }
  & .fh-seg button.fh-on {
    background: var(--fh-lime);
    color: var(--fh-navy);
    box-shadow: var(--fh-e1);
  }

  /* ---------- scope / period switch (light) ---------- */
  & .fh-seg.fh-seg-light {
    background: #eaf0f5;
    border-color: transparent;
    box-shadow: inset 0 1px 2px rgba(7, 55, 85, 0.06);
  }
  & .fh-seg.fh-seg-light button { color: var(--fh-navy); }
  @media (hover: hover) {
    & .fh-seg.fh-seg-light button:not(.fh-on):not(:disabled):hover { background: rgba(255, 255, 255, 0.55); color: var(--fh-navy); }
  }
  & .fh-seg.fh-seg-light button.fh-on {
    background: #fff;
    color: var(--fh-navy);
    box-shadow: 0 1px 0 rgba(7, 55, 85, 0.04), 0 1px 3px rgba(7, 55, 85, 0.14);
  }

  /* ---------- primary tabs ---------- */
  & .fh-tabs { border-top: 1px solid rgba(255, 255, 255, 0.08); }
  & .fh-tab {
    position: relative;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.7);
    border-bottom-color: transparent;
    letter-spacing: 0.01em;
    transition: color var(--fh-dur) var(--fh-ease);
  }
  & .fh-tab.fh-on {
    color: #fff;
    border-bottom-color: transparent;
  }
  /* The active bar: 3px lime, rounded ends, sitting under the label. */
  & .fh-tab::after {
    content: "";
    position: absolute;
    left: 22%;
    right: 22%;
    bottom: 5px;
    height: 3px;
    border-radius: 3px;
    background: var(--fh-lime);
    box-shadow: 0 0 10px rgba(187, 213, 49, 0.35);
    transform: scaleX(0);
    opacity: 0;
    transition: transform 200ms var(--fh-ease), opacity 200ms var(--fh-ease);
    pointer-events: none;
  }
  & .fh-tab.fh-on::after { transform: scaleX(1); opacity: 1; }
  @media (hover: hover) {
    & .fh-tab:not(.fh-on):hover { color: rgba(255, 255, 255, 0.9); }
  }
  & .fh-tab-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    /* 2px stroke: the labels are bold, a 1.75 stroke read hairline next to them at 1x. */
    & svg { width: 19px; height: 19px; flex: none; stroke-width: 2; }
  }
  & .fh-tab:not(.fh-on) .fh-tab-ic { opacity: 0.85; }
  /* Phone: icon over label, so four tabs still fit 390px with no sideways scroll. */
  @media (max-width: 560px) {
    & .fh-tab {
      flex-wrap: wrap;
      align-content: center;
      row-gap: 3px;
      column-gap: 5px;
      min-height: 58px;
      font-size: 13px;
      padding: 4px 4px 10px;
    }
    & .fh-tab-ic { flex: 0 0 100%; }
    & .fh-tab-ic svg { width: 21px; height: 21px; }
    & .fh-tab::after { bottom: 4px; left: 26%; right: 26%; }
  }

  & .fh-tab-badge {
    background: var(--fh-alert-red);
    font: 700 11px/1 var(--fh-body);
    border-radius: 999px;
    padding: 4px 6px;
    min-width: 20px;
    box-shadow: 0 0 0 2px rgba(7, 55, 85, 0.6);
  }

  /* =====================================================================
     Cards and surfaces
     ===================================================================== */
  & :is(.fh-card, .fh-mg-card, .fh-ccard, .fh-filterbar, .fh-tk-form, .fh-tk-proj) {
    border-radius: var(--fh-r);
    border-color: var(--fh-card-br);
    box-shadow: var(--fh-e2);
  }
  & .fh-card-hd { border-bottom-color: var(--fh-hair); }
  & .fh-card-hd h2 { letter-spacing: 0.08em; font-size: 12.5px; }
  & .fh-mg-hd h2 { letter-spacing: 0.09em; font-size: 12.5px; font-weight: 700; }
  & .fh-mg-hd-sub { color: var(--fh-muted); }

  /* ---------- home tiles ---------- */
  & .fh-md-tiles { gap: 12px; }
  & .fh-md-tile {
    border-radius: var(--fh-r);
    border-color: var(--fh-card-br);
    background: var(--fh-card);
    box-shadow: var(--fh-e2);
    transition: transform var(--fh-dur) var(--fh-ease), box-shadow var(--fh-dur) var(--fh-ease);
  }
  & .fh-md-tile:active:not(:disabled) { transform: scale(0.985); }
  @media (hover: hover) {
    & .fh-md-tile:hover:not(:disabled) { box-shadow: var(--fh-e2-hover); }
  }
  & .fh-md-tile.fh-md-tile-alert {
    border-color: var(--fh-bad-br);
    background: linear-gradient(180deg, #fff 45%, #fff7f7 100%);
    box-shadow: inset 3px 0 0 var(--fh-alert-red), var(--fh-e2);
  }
  @media (hover: hover) {
    & .fh-md-tile.fh-md-tile-alert:hover:not(:disabled) { box-shadow: inset 3px 0 0 var(--fh-alert-red), var(--fh-e2-hover); }
  }
  & .fh-md-big {
    font-size: 48px;
    line-height: 1;
    letter-spacing: -0.02em;
  }
  & .fh-md-tile-sub { color: var(--fh-muted); font-weight: 600; }
  & .fh-md-tile-sub strong { color: var(--fh-navy); }
  & .fh-md-breakdown { font-weight: 600; }
  & .fh-md-breakdown span::before { width: 7px; height: 7px; margin-right: 7px; }
  & .fh-md-b-cancelled::before { background: rgba(7, 55, 85, 0.22); }
  & .fh-md-skel {
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(7, 55, 85, 0.04), rgba(7, 55, 85, 0.08), rgba(7, 55, 85, 0.04));
    background-size: 200% 100%;
  }
  & .fh-mg-skel { background: rgba(7, 55, 85, 0.06); border-radius: 8px; }

  /* Tasks tile (a tile wrapping two buttons) */
  & .fh-tk-tile-main { border-radius: var(--fh-r) var(--fh-r) 0 0; }
  & .fh-tk-tile-team {
    border-top-color: var(--fh-hair);
    background: rgba(243, 246, 249, 0.6);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background-color var(--fh-dur) var(--fh-ease);
    & svg { width: 16px; height: 16px; flex: none; margin-left: auto; opacity: 0.75; }
  }
  @media (hover: hover) {
    & .fh-tk-tile-team:hover { background: rgba(7, 55, 85, 0.04); }
  }
  & .fh-tk-count {
    font: 600 12px/1.25 var(--fh-body);
    padding: 5px 10px;
    border-radius: 999px;
    border-color: var(--fh-hair);
  }
  & .fh-tk-count.fh-tk-count-late { border-color: var(--fh-warn-br); }
  & .fh-tk-count.fh-tk-count-urgent { border-color: var(--fh-bad-br); }

  /* ---------- stat tiles ---------- */
  & .fh-stat {
    border-radius: 14px;
    border-color: var(--fh-hair);
    box-shadow: var(--fh-e1);
  }
  & .fh-stat .fh-stat-val { font-size: 28px; letter-spacing: -0.01em; }

  & .fh-mg-num {
    background: #fff;
    border-color: var(--fh-hair);
    border-radius: 14px;
    box-shadow: var(--fh-e1);
    transition: box-shadow var(--fh-dur) var(--fh-ease), border-color var(--fh-dur) var(--fh-ease), transform var(--fh-dur) var(--fh-ease);
  }
  & .fh-mg-num-label { font: 600 11px var(--fh-display); letter-spacing: 0.09em; }
  & .fh-mg-num-val { letter-spacing: -0.01em; }
  @media (hover: hover) {
    & .fh-mg-num:hover:not(:disabled) { border-color: rgba(33, 121, 191, 0.35); box-shadow: var(--fh-e2-hover); }
  }
  & .fh-mg-num:active:not(:disabled) { transform: scale(0.985); }
  & .fh-mg-num.fh-mg-num-alert {
    background: var(--fh-warn-bg);
    border-color: var(--fh-warn-br);
    box-shadow: inset 3px 0 0 #d98a1c, var(--fh-e1);
  }
  @media (hover: hover) {
    & .fh-mg-num.fh-mg-num-alert:hover:not(:disabled) { border-color: #e9c98f; box-shadow: inset 3px 0 0 #d98a1c, var(--fh-e2-hover); }
  }

  /* ---------- pills ---------- */
  & .fh-pill {
    border-radius: 999px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.01em;
  }
  & .fh-pill::before { width: 6px; height: 6px; }
  & .fh-ccard-sub .fh-pill { font-size: 11px; }
  & .fh-pill.fh-vertical { font-weight: 600; }

  /* the status button on a contact card: a pill with a chevron */
  & .fh-pill.fh-ccard-statusbtn {
    font: 600 15px/1.25 var(--fh-body);
    letter-spacing: 0;
    min-height: 40px;
    padding: 6px 12px 6px 14px;
    gap: 8px;
    transition: filter var(--fh-dur) var(--fh-ease), transform var(--fh-dur) var(--fh-ease);
  }
  & .fh-pill.fh-ccard-statusbtn::after {
    width: 16px;
    height: 16px;
    margin-left: 0;
    border: 0;
    background: currentColor;
    opacity: 0.75;
    -webkit-mask: var(--fh-i-chev-down) center / contain no-repeat;
    mask: var(--fh-i-chev-down) center / contain no-repeat;
  }
  @media (hover: hover) {
    & .fh-pill.fh-ccard-statusbtn:hover { filter: brightness(0.97) saturate(1.05); }
  }
  & .fh-pill.fh-ccard-statusbtn:active { transform: scale(0.98); }

  & .fh-tally {
    padding: 2px 8px 2px 6px;
    box-shadow: inset 0 0 0 1px var(--fh-hair);
    font-weight: 600;
  }
  & .fh-tally.fh-tally-bad { box-shadow: inset 0 0 0 1px var(--fh-bad-br); }
  & .fh-tally.fh-tally-urgent { box-shadow: inset 0 0 0 1px var(--fh-warn-br); }
  & .fh-md-group-title span,
  & .fh-mg-stage-hd span {
    box-shadow: inset 0 0 0 1px var(--fh-neutral-br);
    font-weight: 600;
  }
  & .fh-md-cat-status .fh-md-group-title span { box-shadow: inset 0 0 0 1px var(--fh-bad-br); }
  & .fh-md-cat-team .fh-md-group-title span { box-shadow: inset 0 0 0 1px var(--fh-warn-br); }
  & .fh-mg-delta { font-weight: 600; font-size: 12px; }
  & .fh-mg-flag { font-weight: 600; font-size: 11.5px; }
  & .fh-tk-podio {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    & svg { width: 13px; height: 13px; flex: none; }
  }

  /* ---------- chips ---------- */
  & :is(.fh-chip, .fh-tk-chip, .fh-mg-chip, .fh-md-chip) {
    border-radius: 999px;
    border-color: var(--fh-hair);
    background: #fff;
    color: var(--fh-navy);
    box-shadow: var(--fh-e1);
    transition: background-color var(--fh-dur) var(--fh-ease), border-color var(--fh-dur) var(--fh-ease), color var(--fh-dur) var(--fh-ease), transform var(--fh-dur) var(--fh-ease);
  }
  & .fh-chip { min-height: 40px; font-weight: 600; letter-spacing: 0.005em; }
  & .fh-mg-chip { min-height: 36px; font-weight: 600; color: var(--fh-ink); }
  & .fh-md-chip {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    & svg { width: 14px; height: 14px; flex: none; opacity: 0.7; }
  }
  @media (hover: hover) {
    & :is(.fh-chip, .fh-tk-chip, .fh-mg-chip, .fh-md-chip):hover { border-color: rgba(7, 55, 85, 0.22); }
  }
  & :is(.fh-chip, .fh-tk-chip, .fh-mg-chip, .fh-md-chip):active { transform: scale(0.97); }
  & .fh-chip .fh-chip-n { color: var(--fh-muted); font-weight: 600; }
  & .fh-chip.fh-on,
  & .fh-tk-chip[aria-pressed="true"] {
    background: var(--fh-navy);
    border-color: var(--fh-navy);
    color: #fff;
    box-shadow: 0 1px 2px rgba(7, 55, 85, 0.2), 0 4px 12px -6px rgba(7, 55, 85, 0.45);
  }
  & .fh-chip.fh-on .fh-chip-n { color: var(--fh-lime); }
  & .fh-chip.fh-chip-alert {
    border-color: var(--fh-bad-br);
    background: var(--fh-bad-bg);
    color: var(--fh-bad-tx);
  }
  & .fh-chip.fh-chip-alert .fh-chip-n { color: var(--fh-bad-tx); }
  & .fh-chip.fh-chip-alert.fh-on {
    background: #b42318;
    border-color: #b42318;
    color: #fff;
  }
  & .fh-chip.fh-chip-alert.fh-on .fh-chip-n { color: #fff; }

  /* =====================================================================
     Buttons
     ===================================================================== */
  & .fh-btn {
    border-radius: 12px;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    letter-spacing: 0.01em;
    background: var(--fh-navy);
    border-color: var(--fh-navy);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 2px rgba(7, 55, 85, 0.18), 0 6px 16px -10px rgba(7, 55, 85, 0.5);
    transition: background-color var(--fh-dur) var(--fh-ease), border-color var(--fh-dur) var(--fh-ease), box-shadow var(--fh-dur) var(--fh-ease), transform var(--fh-dur) var(--fh-ease);
    & svg { width: 18px; height: 18px; flex: none; }
  }
  @media (hover: hover) {
    & .fh-btn:hover:not(:disabled) { background: var(--fh-navy-press); border-color: var(--fh-navy-press); }
  }
  & .fh-btn:active:not(:disabled) { transform: scale(0.98); }
  & .fh-btn.fh-btn-quiet {
    background: #fff;
    color: var(--fh-navy);
    border-color: var(--fh-field-br);
    box-shadow: var(--fh-e1);
  }
  @media (hover: hover) {
    & .fh-btn.fh-btn-quiet:hover:not(:disabled) { background: #f6f9fb; border-color: rgba(7, 55, 85, 0.24); }
  }
  & .fh-btn.fh-btn-alert {
    background: #b42318;
    border-color: #b42318;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(180, 35, 24, 0.25), 0 6px 16px -10px rgba(180, 35, 24, 0.6);
  }
  @media (hover: hover) {
    & .fh-btn.fh-btn-alert:hover:not(:disabled) { background: #9b1c13; border-color: #9b1c13; }
  }
  & .fh-md-action { font-weight: 700; }
  @media (max-width: 480px) {
    & .fh-btn { min-height: 48px; }
  }

  & .fh-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 12px;
    border-color: var(--fh-field-br);
    background: #fff;
    color: var(--fh-navy);
    box-shadow: var(--fh-e1);
    transition: background-color var(--fh-dur) var(--fh-ease), border-color var(--fh-dur) var(--fh-ease), transform var(--fh-dur) var(--fh-ease);
    & svg { width: 20px; height: 20px; flex: none; }
  }
  @media (hover: hover) {
    & .fh-iconbtn:hover:not(:disabled) { background: #f6f9fb; border-color: rgba(7, 55, 85, 0.24); }
  }
  & .fh-iconbtn:active:not(:disabled) { transform: scale(0.96); }
  & .fh-mg-goals-month .fh-iconbtn svg { width: 18px; height: 18px; }

  & .fh-linkbtn {
    font-weight: 600;
    text-decoration: none;
    text-underline-offset: 3px;
    border-radius: 6px;
  }
  @media (hover: hover) {
    & .fh-linkbtn:hover { text-decoration: underline; }
  }
  & .fh-preview-bar .fh-linkbtn { text-decoration: underline; }
  /* "‹ All stages", "‹ Back to …": icon + words with breathing room */
  & .fh-linkbtn:has(> svg) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    & svg { width: 16px; height: 16px; flex: none; margin-left: -2px; }
  }
  & .fh-ccard-more { font-weight: 600; }
  & .fh-tk-link { font-weight: 600; text-underline-offset: 3px; }

  & .fh-alertbtn {
    border-radius: 999px;
    border-color: var(--fh-hair);
    box-shadow: var(--fh-e1);
    font-weight: 600;
    transition: background-color var(--fh-dur) var(--fh-ease), border-color var(--fh-dur) var(--fh-ease);
  }
  & .fh-alertbtn.fh-on { border-color: var(--fh-ok-br); }
  @media (hover: hover) {
    & .fh-alertbtn:hover:not(:disabled) { border-color: rgba(7, 55, 85, 0.22); }
  }
  /* The bell is an SVG now; drop the classic mask so its strokes show. */
  & .fh-bell:has(svg) {
    width: auto;
    height: auto;
    background: none;
    -webkit-mask: none;
    mask: none;
    display: inline-flex;
    align-items: center;
    line-height: 0;
    & svg { width: 16px; height: 16px; flex: none; }
  }

  /* =====================================================================
     Inputs
     ===================================================================== */
  & :is(.fh-select, .fh-search, .fh-md-form input, .fh-md-form select, .fh-md-form textarea,
      .fh-tk-form input, .fh-tk-form textarea, .fh-tk-form select, .fh-tk-note input,
      .fh-tk-edit input, .fh-tk-edit select, .fh-mg-goals-editor input) {
    min-height: 46px;
    border-radius: 12px;
    border: 1px solid var(--fh-field-br);
    background-color: #fff;
    box-shadow: inset 0 1px 1px rgba(7, 55, 85, 0.03);
    transition: border-color var(--fh-dur) var(--fh-ease), box-shadow var(--fh-dur) var(--fh-ease);
  }
  & :is(.fh-select, .fh-search, .fh-md-form input, .fh-md-form select, .fh-md-form textarea,
      .fh-tk-form input, .fh-tk-form textarea, .fh-tk-form select, .fh-tk-note input,
      .fh-tk-edit input, .fh-tk-edit select, .fh-mg-goals-editor input)::placeholder {
    color: #66778a; /* 4.6:1 on white; the placeholder is the only label on the search box */
  }
  @media (hover: hover) {
    & :is(.fh-select, .fh-search, .fh-md-form input, .fh-md-form select, .fh-md-form textarea,
        .fh-tk-form input, .fh-tk-form textarea, .fh-tk-form select, .fh-tk-note input,
        .fh-tk-edit input, .fh-tk-edit select, .fh-mg-goals-editor input):hover {
      border-color: rgba(7, 55, 85, 0.26);
    }
  }
  & :is(.fh-select, .fh-search, .fh-md-form input, .fh-md-form select, .fh-md-form textarea,
      .fh-tk-form input, .fh-tk-form textarea, .fh-tk-form select, .fh-tk-note input,
      .fh-tk-edit input, .fh-tk-edit select, .fh-mg-goals-editor input):focus {
    outline: none;
    border-color: var(--fh-mid);
    box-shadow: var(--fh-ring);
  }
  /* checkboxes inside the forms keep their native size (classic sets it with !important) */
  & :is(.fh-md-form, .fh-tk-form, .fh-tk-edit) input[type="checkbox"] {
    box-shadow: none;
    accent-color: var(--fh-navy);
  }
  & .fh-select {
    padding-right: 38px;
    background-image: var(--fh-i-select);
    background-size: 16px 16px;
    background-position: right 12px center;
    --fh-i-select: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23073755' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  }
  & .fh-search {
    padding-left: 40px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6b7d' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>");
    background-repeat: no-repeat;
    background-size: 18px 18px;
    background-position: left 13px center;
  }
  & .fh-tk-form .fh-tk-title-input { font-weight: 600; }
  /* Rep picker next to the search box: share its edges instead of stopping at 320px. */
  & :is(.fh-filter-row, .fh-tk-filters) .fh-select { max-width: none; }

  /* project picker on the add form */
  & .fh-tk-pp-list {
    border-radius: 12px;
    border-color: var(--fh-card-br);
    box-shadow: var(--fh-e2);
    padding: 6px;
  }
  & .fh-tk-pp-list > li {
    border-radius: 8px;
    transition: background-color var(--fh-dur) var(--fh-ease);
  }
  & .fh-tk-pp-chosen { border-radius: 12px; border-color: var(--fh-hair); }

  /* self-gen / sale form option lists */
  & .fh-md-options { border-radius: 12px; border-color: var(--fh-field-br); }
  & .fh-md-option { border-bottom-color: var(--fh-line-soft); }
  @media (hover: hover) {
    & .fh-md-option:hover { background: #f6f9fb; }
  }
  & .fh-md-locked { border-radius: 12px; }

  /* =====================================================================
     Contact cards
     ===================================================================== */
  & .fh-ccard {
    padding: 16px;
    transition: box-shadow var(--fh-dur) var(--fh-ease);
  }
  & .fh-ccard.fh-ccard-stale {
    border-color: var(--fh-bad-br);
    box-shadow: inset 3px 0 0 var(--fh-alert-red), var(--fh-e2);
  }
  & .fh-ccard-name { font-size: 17px; }
  & .fh-ccard-addr {
    text-decoration-color: rgba(7, 55, 85, 0.35);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--fh-dur) var(--fh-ease);
  }
  @media (hover: hover) {
    & .fh-ccard-addr:hover { text-decoration-color: currentColor; }
  }
  & .fh-ccard-meta { margin-top: 12px; }
  & .fh-ccard-history { border-top-color: var(--fh-hair); }
  & .fh-ccard-actions { margin-top: 14px; }

  & .fh-banner {
    border-radius: 14px;
    box-shadow: inset 3px 0 0 var(--fh-alert-red);
  }
  & .fh-stale { border-radius: 12px; }
  & :is(.fh-md-error, .fh-mg-err, .fh-tk-msg, .fh-sheet-result, .fh-tray, .fh-org-err, .fh-org-hint) { border-radius: 12px; }
  & .fh-org-row { border-radius: 14px; border-color: var(--fh-hair); box-shadow: var(--fh-e1); }
  & .fh-week-day { border-radius: 10px; border-color: var(--fh-hair); }
  & .fh-project-card { border-radius: 12px; border-color: var(--fh-hair); }
  & .fh-table thead th { background: #f7f9fb; border-bottom-color: var(--fh-hair); }
  & .fh-table tbody td { border-bottom-color: var(--fh-line-soft); }
  & .fh-footer { border-top-color: var(--fh-hair); }

  /* =====================================================================
     Leads by status, projects, installs
     ===================================================================== */
  & .fh-md-stage {
    border-radius: 14px;
    border-color: var(--fh-hair);
    box-shadow: var(--fh-e1);
    transition: box-shadow var(--fh-dur) var(--fh-ease), transform var(--fh-dur) var(--fh-ease);
  }
  @media (hover: hover) {
    & .fh-md-stage:hover { box-shadow: var(--fh-e2-hover); }
  }
  & .fh-md-stage:active { transform: scale(0.99); }
  & .fh-md-stage-count { letter-spacing: -0.01em; }
  & .fh-md-stage-bar { height: 6px; background: rgba(7, 55, 85, 0.06); }
  & .fh-md-stage-bar span { background: linear-gradient(90deg, var(--fh-blue), var(--fh-mid)); }

  & .fh-md-projects li { border-radius: 14px; border-color: var(--fh-hair); box-shadow: var(--fh-e1); }

  & .fh-md-install {
    border-radius: 14px;
    border-color: var(--fh-hair);
    box-shadow: var(--fh-e1);
  }
  & .fh-md-install-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 12px;
    color: var(--fh-mid);
    transition: background-color var(--fh-dur) var(--fh-ease);
    & svg { width: 20px; height: 20px; flex: none; }
  }
  @media (hover: hover) {
    & .fh-md-install-link:hover { background: var(--fh-info-bg); }
  }

  & .fh-md-day-empty {
    border-radius: 12px;
    border-color: rgba(7, 55, 85, 0.16);
    background: rgba(255, 255, 255, 0.5);
  }
  & .fh-md-group-title { letter-spacing: 0.08em; font-size: 12.5px; }
  & .fh-md-cat-status { border-left-width: 3px; border-left-color: var(--fh-alert-red); }
  & .fh-md-cat-team { border-left-width: 3px; }

  /* =====================================================================
     Manager view
     ===================================================================== */
  & .fh-mg-row {
    border-radius: 12px;
    border-color: var(--fh-hair);
    box-shadow: var(--fh-e1);
    transition: background-color var(--fh-dur) var(--fh-ease), border-color var(--fh-dur) var(--fh-ease);
  }
  @media (hover: hover) {
    & .fh-mg-row:hover { background: #f8fafc; border-color: rgba(7, 55, 85, 0.16); }
  }
  & .fh-mg-row-count { letter-spacing: -0.01em; }

  & :is(.fh-mg-name, .fh-mg-name-btn) {
    border-radius: 14px;
    border-color: var(--fh-hair);
    box-shadow: var(--fh-e1);
  }
  & .fh-mg-name-btn {
    transition: box-shadow var(--fh-dur) var(--fh-ease), border-color var(--fh-dur) var(--fh-ease), transform var(--fh-dur) var(--fh-ease);
  }
  @media (hover: hover) {
    & .fh-mg-name-btn:hover { border-color: rgba(33, 121, 191, 0.3); box-shadow: var(--fh-e2-hover); }
    & .fh-mg-name-btn:hover .fh-mg-name-go { transform: translateX(2px); }
  }
  & .fh-mg-name-btn:active { transform: scale(0.99); }
  & .fh-mg-name-go {
    display: inline-flex;
    align-items: center;
    align-self: center;
    line-height: 0;
    color: var(--fh-mid);
    transition: transform var(--fh-dur) var(--fh-ease);
    & svg { width: 18px; height: 18px; flex: none; }
  }

  & .fh-mg-detail > div {
    border-radius: 12px;
    border-color: var(--fh-hair);
    box-shadow: var(--fh-e1);
  }
  & .fh-mg-detail dd { font-weight: 700; letter-spacing: -0.005em; }
  /* "Podio item 2001" and "Open in Podio" sit on one baseline */
  & .fh-mg-detail-actions { align-items: baseline; }
  & .fh-mg-src { color: var(--fh-faint); }

  /* monthly goals table: zebra-free, hairline rows */
  & .fh-mg-goals :is(th, td) { border-bottom-color: var(--fh-line-soft); }
  /* Phone: the header keeps the narrow body face so the four number columns stay as tight as
     classic and rep names fit one line; the display face returns once there is room.
     (Doubled class: out-ranks the shared micro-label :is() rule above.) */
  & .fh-mg-goals.fh-mg-goals thead th {
    border-bottom-color: var(--fh-hair);
    font-family: var(--fh-body);
    font-size: 10.5px;
    letter-spacing: 0.02em;
  }
  @media (min-width: 560px) {
    & .fh-mg-goals.fh-mg-goals thead th { font-family: var(--fh-display); letter-spacing: 0.08em; }
  }
  & .fh-mg-goals :is(tfoot th, tfoot td) { border-top-color: var(--fh-hair); }
  & :is(.fh-mg-goals-set, .fh-mg-goals-count) {
    border-radius: 10px;
    transition: border-color var(--fh-dur) var(--fh-ease), background-color var(--fh-dur) var(--fh-ease);
  }
  & .fh-mg-goals-count { border-color: var(--fh-hair); box-shadow: var(--fh-e1); }
  @media (hover: hover) {
    & :is(.fh-mg-goals-set, .fh-mg-goals-count):hover { border-color: var(--fh-blue); background: #f8fbfd; }
  }

  /* =====================================================================
     Tasks
     ===================================================================== */
  & .fh-tk-row {
    border-radius: 14px;
    border: 1px solid var(--fh-hair);
    box-shadow: var(--fh-e1);
    transition: box-shadow var(--fh-dur) var(--fh-ease);
  }
  & .fh-tk-row.fh-tk-is-urgent { border-left: 1px solid var(--fh-hair); box-shadow: inset 3px 0 0 #b42318, var(--fh-e1); }
  & .fh-tk-row.fh-tk-is-late { border-left: 1px solid var(--fh-hair); box-shadow: inset 3px 0 0 #d08a1c, var(--fh-e1); }
  & .fh-tk-head { padding: 10px 6px 10px 14px; }
  & .fh-tk-title { letter-spacing: -0.003em; }
  & .fh-tk-more { border-top-color: var(--fh-hair); }

  /* status badges: 24px circles holding the icons */
  & .fh-tk-icon {
    width: 24px;
    height: 24px;
    line-height: 0;
    & svg { width: 14px; height: 14px; flex: none; }
  }
  & .fh-tk-icon.fh-tk-icon-urgent { box-shadow: 0 2px 6px -2px rgba(180, 35, 24, 0.55); }
  & .fh-tk-icon.fh-tk-icon-late { box-shadow: none; }
  & .fh-tk-icon.fh-tk-icon-done { box-shadow: inset 0 0 0 1px var(--fh-ok-br); }
  & .fh-tk-icon:not(.fh-tk-icon-urgent):not(.fh-tk-icon-late):not(.fh-tk-icon-done) { box-shadow: inset 0 0 0 1px var(--fh-neutral-br); }

  & .fh-tk-check { transition: background-color var(--fh-dur) var(--fh-ease); }
  @media (hover: hover) {
    & .fh-tk-check:hover:not(:disabled) { background: rgba(7, 55, 85, 0.04); }
    & .fh-tk-check:hover:not(:disabled) .fh-tk-box { border-color: var(--fh-navy); }
  }
  & .fh-tk-box {
    border-radius: 8px;
    transition: background-color var(--fh-dur) var(--fh-ease), border-color var(--fh-dur) var(--fh-ease);
    line-height: 0;
    & svg { width: 16px; height: 16px; flex: none; stroke-width: 2.5; }
  }
  & .fh-tk-check[aria-checked="true"] .fh-tk-box {
    background: var(--fh-ok-tx);
    border-color: var(--fh-ok-tx);
  }

  /* collapsible groups (Overdue / Open / Cancelled) */
  & .fh-tk-bar {
    border-radius: 14px;
    border-color: var(--fh-hair);
    box-shadow: var(--fh-e1);
  }
  & .fh-tk-bar > summary { letter-spacing: 0.08em; border-radius: 10px; }
  & .fh-tk-bar > summary::after {
    width: 18px;
    height: 18px;
    border: 0;
    margin: 0 0 0 auto;
    background: currentColor;
    -webkit-mask: var(--fh-i-chev-down) center / contain no-repeat;
    mask: var(--fh-i-chev-down) center / contain no-repeat;
    transform: rotate(0deg);
    transition: transform 200ms var(--fh-ease);
  }
  & .fh-tk-bar[open] > summary::after { transform: rotate(180deg); margin-top: 0; }
  & .fh-tk-bar-n { box-shadow: inset 0 0 0 1px var(--fh-hair); font-weight: 700; }
  & .fh-tk-bar.fh-tk-bar-bad .fh-tk-bar-n { box-shadow: inset 0 0 0 1px var(--fh-bad-br); }

  /* team board count cards */
  & .fh-tk-card {
    border-radius: 14px;
    border-color: var(--fh-hair);
    box-shadow: var(--fh-e1);
    transition: box-shadow var(--fh-dur) var(--fh-ease), border-color var(--fh-dur) var(--fh-ease), transform var(--fh-dur) var(--fh-ease);
  }
  @media (hover: hover) {
    & .fh-tk-card:hover { box-shadow: var(--fh-e2-hover); }
  }
  & .fh-tk-card:active { transform: scale(0.985); }
  & .fh-tk-card[aria-pressed="true"] {
    border-color: var(--fh-navy);
    box-shadow: inset 0 0 0 1px var(--fh-navy), var(--fh-e2);
  }
  & .fh-tk-card-n { letter-spacing: -0.01em; }

  /* =====================================================================
     Sheets
     ===================================================================== */
  & .fh-md-sheet-hd {
    /* the back button now has a visible round fill, so it needs the same gutter as the page */
    padding-left: 10px;
    gap: 8px;
    background: linear-gradient(135deg, var(--fh-navy) 0%, var(--fh-navy-2) 100%);
    border-bottom: 2px solid var(--fh-lime);
    box-shadow: 0 6px 18px -12px rgba(7, 25, 38, 0.55);
  }
  & .fh-md-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    transition: background-color var(--fh-dur) var(--fh-ease), transform var(--fh-dur) var(--fh-ease);
    & svg { width: 22px; height: 22px; flex: none; }
  }
  @media (hover: hover) {
    & .fh-md-back:hover { background: rgba(255, 255, 255, 0.16); }
  }
  & .fh-md-back:active { transform: scale(0.95); }

  & .fh-sheet-overlay {
    background: rgba(7, 25, 38, 0.45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  & .fh-sheet {
    border-radius: var(--fh-r-lg) var(--fh-r-lg) 0 0;
    box-shadow: var(--fh-e3);
  }
  @media (min-width: 640px) {
    & .fh-sheet { border-radius: var(--fh-r-lg); }
  }
  & .fh-sheet-handle {
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: rgba(7, 55, 85, 0.18);
  }
  & .fh-sheet-head { border-bottom-color: var(--fh-hair); }
  & .fh-sheet-head .fh-iconbtn { border-radius: 999px; }

  /* =====================================================================
     MUI alerts inside Fieldhouse
     ===================================================================== */
  & .MuiAlert-root {
    border-radius: 12px;
    border: 1px solid var(--fh-neutral-br);
    box-shadow: none;
    font-family: var(--fh-body);
  }
  & .MuiAlert-root .MuiAlert-message { font-family: var(--fh-body); }
  & :is(.MuiAlert-standardWarning, .MuiAlert-colorWarning) { border-color: var(--fh-warn-br); }
  & :is(.MuiAlert-standardError, .MuiAlert-colorError) { border-color: var(--fh-bad-br); }
  & :is(.MuiAlert-standardInfo, .MuiAlert-colorInfo) { border-color: var(--fh-info-br); }
  & :is(.MuiAlert-standardSuccess, .MuiAlert-colorSuccess) { border-color: var(--fh-ok-br); }

  /* =====================================================================
     Preview-only chrome: never wider than the phone
     ===================================================================== */
  & .fh-preview-bar {
    background: linear-gradient(180deg, #0b2233 0%, #0d2a3e 100%);
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }
  & .fh-preview-bar label { min-width: 0; max-width: 100%; }
  & .fh-preview-bar select {
    max-width: 100%;
    min-width: 0;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
  @media (max-width: 560px) {
    & .fh-preview-bar label { flex: 1 1 100%; margin-left: 0; white-space: nowrap; }
    & .fh-preview-bar select { flex: 1 1 0; width: 0; }
  }

  /* =====================================================================
     Focus: a visible ring on every interactive element
     ===================================================================== */
  & :is(button, a, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 2px solid var(--fh-mid);
    outline-offset: 2px;
  }
  & :is(.fh-header, .fh-md-sheet-hd, .fh-preview-bar) :is(button, a, select, summary, [tabindex]):focus-visible {
    outline-color: var(--fh-lime);
  }
  & .fh-preview-bar select:focus-visible { outline: 2px solid var(--fh-lime); outline-offset: 2px; }
  /* elements inside clipped containers keep an inner ring */
  & .fh-seg button:focus-visible { outline-offset: -2px; }
  & .fh-seg button.fh-on:focus-visible { outline-color: var(--fh-navy); }
  & .fh-seg.fh-seg-light button:focus-visible { outline-color: var(--fh-mid); }
  & .fh-tab:focus-visible { outline-offset: -4px; border-radius: 10px; }
  & :is(.fh-tk-check, .fh-tk-tile-main, .fh-tk-tile-team):focus-visible { outline-offset: -3px; }
  & .fh-chips .fh-chip:focus-visible { outline-offset: -1px; }
  & .fh-tk-open:focus-visible { border-radius: 8px; }

  /* =====================================================================
     Reduced motion: nothing moves
     ===================================================================== */
  @media (prefers-reduced-motion: reduce) {
    & *,
    & *::before,
    & *::after {
      transition: none !important;
      animation: none !important;
    }
    & :is(button, a, summary, .fh-md-tile, .fh-mg-num, .fh-tk-card):active,
    & .fh-mg-name-btn:hover .fh-mg-name-go {
      transform: none !important;
    }
    & .fh-tab::after { transform: none; }
  }
}