/* ============================================================
   Ivy components — the shared layer (step 2 of docs/design-overhaul.md)
   Loads right after ivy-refresh.css and before every *-next.css area
   stylesheet. Two jobs:

   1. Tokens the refresh does not name yet: the type scale (--fs-*),
      the radius scale (--r-*), control sizes (--ctl-*), and the info /
      line / surface colors every area used to re-declare under its own
      prefix (--hx-hover, --dn-hover, --pn-hover ... are all --surface-hover).
   2. Components: .ivy-head, .ivy-btn, .ivy-chip, .ivy-status, .ivy-kpis,
      .ivy-tabs, .ivy-seg, .ivy-filters, .ivy-card, .ivy-empty,
      .ivy-banner, .ivy-table. New markup uses these classes.

   Older area classes that are the same control (.dn-btn, .pn-btn, .sv-btn,
   .hb-btn ...) take their size from the tokens below. Their selectors sit
   in the "area aliases" lists further down, so one rule gives every
   screen the same height, radius and type; an area stylesheet keeps only
   what is genuinely its own (colors of a variant, a layout tweak).

   Breakpoints: 720px (phone) and 1100px (narrow desktop / tablet). Colors
   only from tokens; hex values live in :root only (tests/next-css-tokens).
   ============================================================ */

:root {
  /* Type scale. Every font-size in ivy-components.css and *-next.css
     comes from here (see tests/next-css-tokens.test.mjs for the few
     display numbers that are allowed to stay literal). */
  --fs-3xs: 9.5px;    /* initials in a small avatar, schedule cell marks */
  --fs-2xs: 10.5px;   /* tiny counters, axis ticks */
  --fs-xs: 11.5px;    /* chips, eyebrows, table heads, foot notes */
  --fs-sm: 12.5px;    /* secondary text, small buttons, status words */
  --fs-base: 13.5px;  /* controls: buttons, tabs, inputs, dense rows */
  --fs-md: 14px;      /* body text */
  --fs-lead: 15px;    /* ledes, card titles */
  --fs-lg: 16px;      /* section titles */
  --fs-xl: 18px;      /* sub-page titles */
  --fs-2xl: 20px;     /* card hero words */
  --fs-3xl: 22px;     /* phone KPI values */
  --fs-kpi: 26px;     /* KPI values, phone page titles */
  --fs-title: 30px;   /* page titles */

  /* Radius scale */
  --r-xs: 6px;        /* small chips, segmented buttons */
  --r-sm: 8px;        /* buttons, inputs (same value styles.css already uses) */
  --r-field: 10px;    /* filters, search, small panels */
  --r-card: 12px;     /* cards, KPI strips, tables */
  --r-panel: 14px;    /* sheets and big panels */
  --r-pill: 999px;

  /* Control sizes */
  --ctl-h: 36px;      /* every button, select and filter (40px on a touch screen, below) */
  --ctl-h-sm: 32px;   /* the small button (36px on a touch screen) */
  --ctl-h-lg: 44px;   /* a floor-use CTA (tap with gloves), the employee portal's row buttons */
  --ctl-px: 14px;
  --ctl-px-sm: 10px;
  --chip-h: 22px;
  --tab-h: 40px;

  /* Surfaces and lines the refresh does not name */
  --surface-2: #F9FAFA;      /* table heads, quiet panels */
  --surface-hover: #F1F5F5;  /* row and button hover */
  --surface-sunk: #EDF1F1;   /* wells, tracks, segmented background */
  --line-strong: #CCD6D6;    /* dashed empty slots, inputs */
  --faint: #8C9CA1;          /* targets and placeholders, never body text */
  --brand-ink: #0A4A50;      /* teal text on teal-soft */
  --on-solid: #FFFFFF;       /* text on a solid teal / red fill */

  /* Status lines and info */
  --danger-line: #F5C2BC;
  --warn-line: #F2D3A6;
  --ok-line: #B6E0C9;
  --info: #2457B8;
  --info-soft: #E8EFFC;
  --info-ink: #1C4796;
  --info-line: #C2D4F5;

  /* Avatar palette (initials circles): one set for every screen */
  --av-0: #0C5F66; --av-1: #C4492A; --av-2: #5B6BD6;
  --av-3: #7E3AF2; --av-4: #0E7490; --av-5: #A16207;

  /* Resident event categories (huddle board, clinical): one color each */
  --cat-fall: #C2410C; --cat-infection: #7E3AF2; --cat-skin: #BE185D;
  --cat-weight: #A16207; --cat-behavior: #2563EB; --cat-meds: #0E7490;
  --cat-hospital: #B42318; --cat-condition: #4D7C0F; --cat-abuse: #9A2014;

  --shadow-pop: 0 2px 6px rgba(16, 32, 36, 0.06), 0 24px 48px -12px rgba(16, 32, 36, 0.24);
}
/* Touch screens: every control grows by the same 4px, so tap targets reach
   40px without each area adding its own phone bump. */
@media (pointer: coarse) {
  :root { --ctl-h: 40px; --ctl-h-sm: 36px; }
}

/* ---------- Page header: eyebrow, title, lede, actions ----------
   Area aliases: every redesigned page header shares the eyebrow, title and
   lede type; each area keeps its own layout and margins. */
.ivy-head { display: flex; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 20px; }
.ivy-head-text { flex: 1 1 420px; min-width: 0; }
.ivy-eyebrow { margin-bottom: 4px; }
.ivy-eyebrow,
.cln-eyebrow, .dn-eyebrow, .er-eyebrow, .ins-eyebrow, .lib .lib-eyebrow, .lsv .lsv-eyebrow,
.mtgx-shell .page-header .eyebrow, .mtgx-week .page-eyebrow, .mtgx-land .page-eyebrow,
.ops-dept .today-head .eyebrow, .ops-head .page-eyebrow, .pn-eyebrow, .pn-tickets .page-header .eyebrow,
.pt-eyebrow, .sv-eyebrow {
  font-size: var(--fs-xs); font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.ivy-title { margin: 0; }
.ivy-title,
.cln-head h1, .dn-head h1, .er-title, .page-shell:has(.hrx) .page-header .page-title, .ins-head h1,
.lib .lib-title, .lsv .lsv-head .page-title, .mtgx-shell .page-header .page-title,
.mtgx-week .page-title, .mtgx-land .page-title, .ops-dept .today-head .page-title, .ops-head .page-title,
.pn-title, .pn-tickets .page-header .page-title, .pt-head h1, .sv-head h1 {
  font-family: var(--font-display); font-size: var(--fs-title); font-weight: 750; letter-spacing: -0.02em; line-height: 1.15; color: var(--fg);
}
.ivy-lede { margin: 6px 0 0; max-width: 760px; }
.ivy-lede,
.cln-sub, .dn-sub, .er-lede, .page-shell:has(.hrx) .page-header .page-lede, .ins-sub, .lib .lib-lede,
.mtgx-shell .page-header .page-lede, .mtgx-week .page-lede, .mtgx-land .page-lede, .pn-lede, .pt-sub {
  font-size: var(--fs-lead); color: var(--fg-soft);
}
.ivy-head-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Buttons ----------
   One height (36px, 32px small), one radius (8px), one type size.
   Area aliases: the same control under its older area name. */
.ivy-btn,
.dn-btn, .pn-btn, .pt-btn, .ops-btn, .hxo-btn, .apr-btn, .hrx-gbtn, .ins .ins-btn,
.sv .sv-btn, .lib .lib-btn, .er-screen .er-btn, .cln .cln-btn, .msv .msv-btn,
.hb .hb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box;
  height: var(--ctl-h); min-height: var(--ctl-h); padding: 0 var(--ctl-px);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--card); color: var(--fg);
  font: inherit; font-size: var(--fs-base); font-weight: 600; line-height: 1; white-space: nowrap;
  cursor: pointer; text-decoration: none; transition: background 120ms, border-color 120ms, color 120ms;
}
.ivy-btn:hover { background: var(--surface-hover); text-decoration: none; }
.ivy-btn[disabled], .ivy-btn.is-disabled { opacity: 0.5; pointer-events: none; }
.ivy-btn svg, .ivy-btn .ivy-i { width: 16px; height: 16px; flex: none; }
.ivy-btn--primary { background: var(--teal); border-color: var(--teal); color: var(--on-solid); box-shadow: var(--shadow-sm); }
.ivy-btn--primary:hover { background: var(--teal-deep); border-color: var(--teal-deep); }
.ivy-btn--quiet { background: transparent; border-color: transparent; color: var(--fg-soft); }
.ivy-btn--quiet:hover { background: var(--surface-hover); color: var(--fg); }
.ivy-btn--danger { background: var(--card); border-color: var(--danger-line); color: var(--danger-ink); }
.ivy-btn--danger:hover { background: var(--danger-soft); }
.ivy-btn--block { width: 100%; }
.ivy-btn--icon { width: var(--ctl-h); padding: 0; }

.ivy-btn--sm,
.dn-btn-sm, .pn-btn-sm, .pt-btn-sm, .ins .ins-btn-sm, .ops-btn-sm,
.sv .sv-btn-sm, .lib .lib-btn.lib-btn-sm, .er-screen .er-btn-sm, .cln .cln-btn-sm, .hb .hb-btn.sm, .hrx-gbtn {
  height: var(--ctl-h-sm); min-height: var(--ctl-h-sm); padding: 0 var(--ctl-px-sm);
  font-size: var(--fs-sm); border-radius: var(--r-sm);
}
.ivy-btn--icon.ivy-btn--sm { width: var(--ctl-h-sm); }
.ivy-btn--lg { height: var(--ctl-h-lg); min-height: var(--ctl-h-lg); padding: 0 18px; font-size: var(--fs-md); }

/* ---------- Chips: a label, a tag, a count ----------
   One height (22px) and one type size. Two shapes: a pill for labels and
   states, a squared tag (--ivy-chip--tag) for codes and categories (F-tags,
   event types, buildings). Counts are the 20px number badge.
   The area lists below get the shared size and shape; their colors stay in
   the area stylesheet. */
.ivy-chip,
.dn-chip, .er-chip, .hrx-chip, .hrx-file .hr-slot-count, .hrx-file .hr-miss-chip, .hrx-file .ck-gh-count,
.hxo .hr-ov-miss .miss, .hxo .hr-ov-yrs, .ins-chip, .lib .lib-chip, .lsv .sm-pill, .lsv-si .si-pill, .ops-chip,
.pn-chip, .pn-tickets .badge, .pt-chip, .sv-chip, .sc-pill, .pt-auth-new-tag,
.ivy-chip--tag,
.cln .cln-tagchip, .qmx-chip, .ax-chip, .ax-tag, .dn-bchip, .hb .hb-chip, .hb .hb-ftag, .msv .msv-chip {
  display: inline-flex; align-items: center; gap: 5px; height: var(--chip-h); min-height: 0; padding: 0 8px; box-sizing: border-box;
  border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 650; line-height: 1; white-space: nowrap;
}
.ivy-chip--tag,
.cln .cln-tagchip, .qmx-chip, .ax-chip, .ax-tag, .dn-bchip, .hb .hb-chip, .hb .hb-ftag, .msv .msv-chip {
  border-radius: var(--r-xs);
}
.ivy-chip { border: 1px solid var(--line); background: var(--surface-sunk); color: var(--fg-soft); }
.ivy-chip svg { width: 13px; height: 13px; flex: none; }
.ivy-chip[data-tone="bad"], .ivy-chip--bad { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger-ink); }
.ivy-chip[data-tone="warn"], .ivy-chip--warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn-ink); }
.ivy-chip[data-tone="ok"], .ivy-chip--ok { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok-ink); }
.ivy-chip[data-tone="info"], .ivy-chip--info { background: var(--info-soft); border-color: var(--info-line); color: var(--info-ink); }
.ivy-chip[data-tone="brand"], .ivy-chip--brand { background: var(--teal-soft); border-color: var(--teal-line); color: var(--brand-ink); }

.ivy-count,
.dn-count, .ins-count, .lib .lib-count, .lsv .lsv-count, .mtgx .mtgx-count, .sv-count, .sv-lane-count, .hb .hb-count-pill {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
.ivy-count { background: var(--surface-sunk); color: var(--fg-soft); }

/* ---------- Status: icon + word, never color alone ----------
   Area aliases share the size and weight; each keeps its own tone classes. */
.ivy-status,
.dn-status, .cln-status, .er-status, .hxo-st, .ins-status, .lsv .lsv-status, .ops-status, .pn-status, .pt-status, .sv-status {
  display: inline-flex; gap: 6px; font-size: var(--fs-sm); font-weight: 600;
}
.ivy-status { align-items: center; color: var(--fg-soft); white-space: nowrap; }
.ivy-status svg, .ivy-status .ivy-i { width: 15px; height: 15px; flex: none; color: var(--muted); }
.ivy-status[data-tone="bad"] { color: var(--danger-ink); }
.ivy-status[data-tone="bad"] svg, .ivy-status[data-tone="bad"] .ivy-i { color: var(--danger); }
.ivy-status[data-tone="warn"] { color: var(--warn-ink); }
.ivy-status[data-tone="warn"] svg, .ivy-status[data-tone="warn"] .ivy-i { color: var(--warn); }
.ivy-status[data-tone="ok"] { color: var(--ok-ink); }
.ivy-status[data-tone="ok"] svg, .ivy-status[data-tone="ok"] .ivy-i { color: var(--ok); }
.ivy-status[data-tone="info"] { color: var(--info-ink); }
.ivy-status[data-tone="info"] svg, .ivy-status[data-tone="info"] .ivy-i { color: var(--info); }

/* ---------- KPI strip: one joined band of tiles ----------
   The tile padding, label and number are shared; area strips keep their
   own grid (joined band or separate cards). Area aliases: Dashboard, Huddle,
   Audits, Write-ups, HR overview, Insight, Hiring, Surveys, This Week,
   Schedule / department, Financials / Payroll / AR, Survey Manager, Inbox,
   Knowledge library, Mock Survey. */
.ivy-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-sm);
}
.ivy-kpi { display: flex; flex-direction: column; gap: 4px; min-width: 0; background: var(--card); color: var(--fg); text-align: left; }
.ivy-kpi,
.dn-kpi, .cln-kpi, .ax .ax-kpi, .er-kpi, .hxo-kpi, .ins-kpi, .pn-kpi, .sc-stat, .sv-kpi, .mtgx-week .wk-kpi, .ops-st,
.ops-fin .fin-tile, .ops-kpi, .lsv-mgr .sm-kpi, .lsv-inbox .lsv-kpi, .lib .lib-kpi, .msv .msv-hs {
  padding: 14px 16px;
}
a.ivy-kpi, button.ivy-kpi { border: 0; font: inherit; cursor: pointer; text-decoration: none; transition: background 120ms; }
a.ivy-kpi:hover, button.ivy-kpi:hover { background: var(--surface-hover); }
.ivy-kpi-label,
.dn-kpi-label, .cln-kpi-label, .ax .ax-kpi .ax-kpi-l, .er-kpi-l, .hxo-kpi-l, .ins-kpi-label, .pn-kpi-l, .sc-stat-label, .sv-kpi-label,
.mtgx-week .wk-kpi-l, .ops-st-k, .ops-fin .fin-tile-label, .ops-kpi-k, .lsv-mgr .sm-kpi-lbl, .lsv-inbox .lsv-kpi-label,
.lib .lib-kpi .lib-kpi-l, .msv .msv-hs .l {
  font-size: var(--fs-sm); font-weight: 600; color: var(--fg-soft);
}
.ivy-kpi-label { display: flex; align-items: center; gap: 6px; }
.ivy-kpi-value,
.dn-kpi-value, .cln-kpi-value, .ax .ax-kpi strong, .er-kpi-v, .hxo-kpi-v, .ins-kpi-value, .pn-kpi-v, .sc-stat-value, .sv-kpi-value,
.mtgx-week .wk-kpi-v, .ops-st-v, .ops-fin .fin-tile-value, .ops-kpi-v, .lsv-mgr .sm-kpi-num, .lsv-inbox .lsv-kpi-value,
.lib .lib-kpi .lib-kpi-n, .msv .msv-hs .v {
  font-family: var(--font-display); font-size: var(--fs-kpi); font-weight: 750; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums;
}
.ivy-kpi-value small { margin-left: 2px; font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 600; color: var(--muted); letter-spacing: 0; }
.ivy-kpi[data-tone="bad"] .ivy-kpi-value { color: var(--danger-ink); }
.ivy-kpi[data-tone="warn"] .ivy-kpi-value { color: var(--warn-ink); }
.ivy-kpi[data-tone="ok"] .ivy-kpi-value { color: var(--ok-ink); }
.ivy-kpi-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: var(--fs-xs); color: var(--muted); }

/* ---------- Tabs: navigation between a page's views ----------
   Underline style everywhere; the bar scrolls sideways (with a fade on
   phones) instead of wrapping. Area aliases: HR, Huddle, Audits, Mock
   Survey, Knowledge library, Schedule, Financials / Payroll, Survey Manager. */
.ivy-tabs,
.hrx .hr-tabs, .hb .hb-tabs, .ax-shell .audit-tabs, .msv .msv-tabs[role="tablist"], .lib .lib-tabs,
.staff-root .staff-tabs, .ops-fin .fin-tabs, .ops-pay .fin-tabs, .lsv-mgr .sm-subtabs {
  display: flex; gap: 2px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; scrollbar-width: none;
}
.ivy-tabs { flex-wrap: nowrap; margin-bottom: 20px; padding: 0; overflow-x: auto; }
.ivy-tabs::-webkit-scrollbar { display: none; }
.ivy-tab,
.hrx .hr-tab, .hb .hb-tab, .ax-shell .audit-tab, .msv .msv-tab, .lib .lib-tab,
.staff-root .staff-tabs button, .ops-fin .fin-tab, .ops-pay .fin-tab, .lsv-mgr .sm-subtab {
  display: inline-flex; flex: none; align-items: center; gap: 8px; height: var(--tab-h); min-height: var(--tab-h); padding: 0 12px; margin-bottom: -1px; box-sizing: border-box;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; box-shadow: none; color: var(--muted);
  font: inherit; font-size: var(--fs-base); font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none;
}
.ivy-tab:hover,
.hrx .hr-tab:hover, .hb .hb-tab:hover, .ax-shell .audit-tab:hover, .msv .msv-tab:hover, .lib .lib-tab:hover,
.staff-root .staff-tabs button:hover, .ops-fin .fin-tab:hover, .ops-pay .fin-tab:hover, .lsv-mgr .sm-subtab:hover {
  background: none; color: var(--fg); text-decoration: none;
}
.ivy-tab.is-active, .ivy-tab[aria-selected="true"],
.hrx .hr-tab.is-active, .hb .hb-tab[aria-selected="true"], .ax-shell .audit-tab.active, .msv .msv-tab[aria-selected="true"],
.lib .lib-tab.is-active, .staff-root .staff-tabs button[aria-selected="true"], .ops-fin .fin-tab.is-active, .ops-pay .fin-tab.is-active,
.lsv-mgr .sm-subtab.is-active {
  background: none; box-shadow: none; color: var(--fg); border-bottom-color: var(--teal);
}

/* ---------- Segmented toggle: a view switch inside a page, not navigation ---------- */
.ivy-seg, .dn-seg, .pn-seg, .pt-seg, .qmx-seg {
  display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: var(--r-field); background: var(--surface-sunk);
}
.ivy-seg > button, .ivy-seg > a,
.dn-seg button, .pn-seg button, .pn-seg a, .pt-seg.pt-seg.pt-seg > button, .qmx .qm-status {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border: 0; border-radius: var(--r-xs);
  background: transparent; color: var(--fg-soft); font: inherit; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none;
}
.ivy-seg > .is-active, .ivy-seg > [aria-pressed="true"], .ivy-seg > [aria-selected="true"],
.dn-seg button.is-on, .pn-seg button[aria-pressed="true"], .pn-seg button.is-on, .pn-seg a.is-on,
.pt-seg.pt-seg.pt-seg > button.is-active, .qmx .qm-status.is-on {
  background: var(--card); color: var(--fg); box-shadow: var(--shadow-sm);
}

/* ---------- Filters: a row of pill toggles ----------
   Area aliases: People / Hiring, Surveys, Audits, Write-ups, Huddle, Live Survey buildings. */
.ivy-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.ivy-filter,
.pn-fchip, .sv-fchip, .ax .chip, .er-screen .er-fchip, .hb .hb-fchip, .lsv .lsv-tab {
  display: inline-flex; align-items: center; gap: 6px; height: var(--ctl-h-sm); min-height: var(--ctl-h-sm); padding: 0 12px; box-sizing: border-box;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--card); color: var(--fg-soft);
  font: inherit; font-size: var(--fs-base); font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none;
}
.ivy-filter:hover,
.pn-fchip:hover, .sv-fchip:hover, .ax .chip:hover, .er-screen .er-fchip:hover, .hb .hb-fchip:hover, .lsv .lsv-tab:hover {
  border-color: var(--muted); background: var(--card); color: var(--fg);
}
.ivy-filter.is-active, .ivy-filter[aria-pressed="true"],
.pn-fchip.is-on, .pn-fchip[aria-pressed="true"], .sv-fchip.is-selected, .ax .chip-active, .ax .chip-active:hover,
.er-screen .er-fchip[aria-pressed="true"], .er-screen .er-fchip.is-on, .hb .hb-fchip[aria-pressed="true"], .lsv .lsv-tab.is-active {
  background: var(--teal); border-color: var(--teal); color: var(--on-solid);
}

/* ---------- Card ----------
   Area aliases: the cards of every redesigned area share the surface,
   line, radius and shadow; padding stays with each area. */
.ivy-card,
.dn-card, .pn-card-box, .er-panel, .pt-card, .cln-card, .msv .msv-card, .qmx-card, .qmx .qm-card, .ax-card,
.ax .premium-card, .hxo .hxo-card, .hb .hb-card, .ins-card, .lib .lib-card, .lsv .lsv-card, .lsv-si .si-card,
.mtgx .mtg2-card, .sv-card, .sc-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-sm);
}
.ivy-card { min-width: 0; }
.ivy-card-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.ivy-card-title { margin: 0; font-family: var(--font-display); font-size: var(--fs-lead); font-weight: 750; letter-spacing: -0.005em; color: var(--fg); }
.ivy-card-sub { font-size: var(--fs-sm); color: var(--muted); }
.ivy-card-body { padding: 14px 18px 16px; }

/* ---------- Empty state: what is missing, and the one thing to do ----------
   An icon, a one-line title, a sentence, at most one button. Area aliases:
   Huddle, Write-ups, Insight, Knowledge library, Hiring, Dashboard charts,
   Audits, Live Survey. (One-line notes inside a card, like "Nobody is
   missing paperwork", stay plain text.) */
.ivy-empty,
.cln-empty, .er-empty, .ins-empty, .lib .lib-empty, .pn-empty, .dn-chart-empty, .ax-empty, .lsv .lsv-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 32px 20px; color: var(--muted); font-size: var(--fs-base); text-align: center;
}
.ivy-empty > svg, .ivy-empty > .ivy-i,
.cln-empty > .cln-i, .er-empty > .er-i, .ins-empty > .ins-i, .lib .lib-empty > .lib-i, .pn-empty .pn-i, .dn-chart-empty .dn-i, .ax-empty .cx-ico {
  width: 26px; height: 26px; margin-bottom: 4px; color: var(--teal);
}
.ivy-empty-title,
.cln-empty strong, .er-empty-title, .ins-empty-title, .lib .lib-empty h3, .pn-empty b, .dn-chart-empty b, .ax-empty b, .lsv .lsv-empty h3 {
  margin: 0; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; color: var(--fg);
}
.ivy-empty p { margin: 0; max-width: 56ch; }
.ivy-empty > .ivy-btn { margin-top: 8px; }

/* ---------- Banner: one line of context above the content ---------- */
.ivy-banner {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r-field); background: var(--surface-2); color: var(--fg-soft); font-size: var(--fs-base);
}
.ivy-banner svg, .ivy-banner .ivy-i { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.ivy-banner[data-tone="bad"] { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger-ink); }
.ivy-banner[data-tone="warn"] { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn-ink); }
.ivy-banner[data-tone="ok"] { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok-ink); }
.ivy-banner[data-tone="info"] { background: var(--info-soft); border-color: var(--info-line); color: var(--info-ink); }

/* ---------- Table: rows on desktop, one card per row under 720px ----------
   Each td carries data-label; the phone layout prints it in front of the value. */
.ivy-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-base); }
.ivy-table th {
  padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); text-align: left; white-space: nowrap;
  font-size: var(--fs-xs); font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted);
}
.ivy-table td { padding: 11px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; color: var(--fg); }
.ivy-table tbody tr:last-child td { border-bottom: 0; }
.ivy-table tbody tr:hover td { background: var(--surface-hover); }
.ivy-table .num { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 1100px) {
  .ivy-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .ivy-head { align-items: stretch; flex-direction: column; gap: 12px; }
  .ivy-head-text { flex: none; }
  .ivy-title,
  .cln-head h1, .dn-head h1, .er-title, .page-shell:has(.hrx) .page-header .page-title, .ins-head h1,
  .lib .lib-title, .lsv .lsv-head .page-title, .mtgx-shell .page-header .page-title,
  .mtgx-week .page-title, .mtgx-land .page-title, .ops-dept .today-head .page-title, .ops-head .page-title,
  .pn-title, .pn-tickets .page-header .page-title, .pt-head h1, .sv-head h1 { font-size: var(--fs-kpi); }
  .ivy-lede,
  .cln-sub, .dn-sub, .er-lede, .page-shell:has(.hrx) .page-header .page-lede, .ins-sub, .lib .lib-lede,
  .mtgx-shell .page-header .page-lede, .mtgx-week .page-lede, .mtgx-land .page-lede, .pn-lede, .pt-sub { font-size: var(--fs-md); }
  .ivy-head-actions > .ivy-btn { flex: 1 1 auto; }
  .ivy-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ivy-kpis > .ivy-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .ivy-kpi,
  .dn-kpi, .cln-kpi, .ax .ax-kpi, .er-kpi, .hxo-kpi, .ins-kpi, .pn-kpi, .sc-stat, .sv-kpi, .mtgx-week .wk-kpi, .ops-st,
  .ops-fin .fin-tile, .ops-kpi, .lsv-mgr .sm-kpi, .lsv-inbox .lsv-kpi { padding: 12px 14px; }
  .ivy-kpi-value,
  .dn-kpi-value, .cln-kpi-value, .ax .ax-kpi strong, .er-kpi-v, .hxo-kpi-v, .ins-kpi-value, .pn-kpi-v, .sc-stat-value, .sv-kpi-value,
  .mtgx-week .wk-kpi-v, .ops-st-v, .ops-fin .fin-tile-value, .ops-kpi-v, .lsv-mgr .sm-kpi-num, .lsv-inbox .lsv-kpi-value,
  .lib .lib-kpi .lib-kpi-n, .msv .msv-hs .v { font-size: var(--fs-3xl); }
  .ivy-tabs,
  .hrx .hr-tabs, .hb .hb-tabs, .ax-shell .audit-tabs, .msv .msv-tabs[role="tablist"], .lib .lib-tabs,
  .staff-root .staff-tabs, .ops-fin .fin-tabs, .ops-pay .fin-tabs, .lsv-mgr .sm-subtabs {
    flex-wrap: nowrap; overflow-x: auto;
    -webkit-mask-image: linear-gradient(90deg, black 85%, transparent); mask-image: linear-gradient(90deg, black 85%, transparent);
  }
  .ivy-table, .ivy-table tbody, .ivy-table tr, .ivy-table td { display: block; width: 100%; }
  .ivy-table thead { display: none; }
  .ivy-table tr { margin-bottom: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-sm); }
  .ivy-table td { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border: 0; text-align: right; }
  .ivy-table td::before { content: attr(data-label); flex: none; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); text-align: left; }
  .ivy-table td:not([data-label])::before { content: none; }
  .ivy-table tbody tr:hover td { background: none; }
}