/* ============================================================
   Ivy Intelligence — warm healthcare theme
   Deep teal + coral. Distinct from the old Altura cream/gold/Tenor look
   (#f7f5f1, #0f3c47, #fbbd12). Every screen should read these tokens.
   ============================================================ */

:root {
  /* Surfaces — warm off-white, teal-tinted secondary */
  --bg:            #F4F1EC;
  --card:          #FFFCF8;
  --card-2:        #FFFFFF;
  --muted-surface: #E5F3F1;

  /* Ink — dark slate */
  --fg:            #1C2A32;
  --fg-soft:       #334155;
  --muted:         #4E616C;
  --muted-2:       #5C6F78;

  /* Lines */
  --line:          #D5E3E0;
  --card-line:     #E1EEEC;
  --line-soft:     #EEF5F4;
  --input-line:    #C5D6D3;

  /* Deep teal primary. More saturated than the old #0f3c47. */
  --teal:          #0C5F66;
  --teal-2:        #14747C;
  --teal-deep:     #08474D;
  --teal-sidebar:  #0A555C;
  --teal-sidebar-deep: #073F45;
  --teal-ink:      #123238;
  --teal-on:       #F3FBFA;
  --teal-soft:     #E5F4F2;
  --teal-line:     #B7D9D5;

  /* Coral accent. Orange-coral, kept apart from status red. */
  --coral:         #C4492A;
  --coral-hover:   #A83B20;
  --coral-on:      #FFFFFF;
  --coral-bright:  #FFC7B3; /* icons and labels on deep teal */
  --coral-soft:    #FDE8E1;
  --coral-line:    #F3C4B6;
  --coral-ink:     #8A3018;

  /* Legacy accent names now track coral so older rules inherit. */
  --gold:          var(--coral);
  --gold-soft:     var(--coral-soft);
  --gold-line:     var(--coral-line);

  --sage:          #5F7A76;
  --sand:          #A89888;
  --green:         #0F5C56;

  /* Status — crimson, amber, green. Not coral. */
  --danger:        #B42318;
  --danger-soft:   #FDECEC;
  --danger-ink:    #912018;
  --warn:          #B45309;
  --warn-soft:     #FEF3C7;
  --warn-ink:      #92400E;
  --warning:       var(--warn);
  --ok:            #067647;
  --ok-soft:       #DCF5E8;
  --ok-ink:        #05603A;
  --good:          var(--ok);

  /* Aliases used by later modules (QAPI glance, etc.) */
  --surface:       var(--card-2);
  --surface-sunken: var(--teal-soft);
  --text:          var(--fg);
  --text-muted:    var(--muted);
  --border:        var(--line);
  --accent:        var(--coral);
  --accent-strong: var(--coral-ink);

  /* Type — Plus Jakarta Sans, with a system sans fallback */
  --font-sans: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Radius / shadow — a little rounder, a little softer */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --shadow-sm: 0 1px 2px rgba(18, 50, 56, 0.05), 0 1px 3px rgba(18, 50, 56, 0.04);
  --shadow:    0 8px 20px rgba(18, 50, 56, 0.06), 0 1px 3px rgba(18, 50, 56, 0.04);
  --shadow-lg: 0 18px 44px rgba(18, 50, 56, 0.12);

  /* Spacing */
  --sidebar-w: 252px;
  --sidebar-w-collapsed: 60px;
  --topbar-h: 60px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: inherit; cursor: pointer; }

.skip-link {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus { left: 12px; top: 12px; width: auto; height: auto; padding: 8px 12px; background: var(--coral); color: var(--coral-on); border-radius: 8px; z-index: 9999; }

/* ============================================================
   Shell layout
   ============================================================ */
.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: 100vh;
  overflow: hidden;
  transition: grid-template-columns 200ms ease;
}
body.sidebar-collapsed .shell {
  grid-template-columns: var(--sidebar-w-collapsed) 1fr;
}
body.sidebar-collapsed .sidebar { padding-left: 8px; padding-right: 8px; }
body.sidebar-collapsed .sidebar-brand-text,
body.sidebar-collapsed .ni-label,
body.sidebar-collapsed .ni-group-label,
body.sidebar-collapsed .sidebar-foot,
body.sidebar-collapsed .sidebar-group-label { display: none !important; }
body.sidebar-collapsed .sidebar-nav .ni { justify-content: center; padding: 8px 6px; }
body.sidebar-collapsed .sidebar-nav .ni-icon { margin: 0; }
body.sidebar-collapsed .sidebar-brand { justify-content: center; gap: 0; }

/* Collapsed sidebar — icon-only buttons with hover tooltip */
body.sidebar-collapsed .sidebar-nav .nav-item {
  justify-content: center;
  padding: 10px 0;
  width: 44px;
  height: 44px;
  margin: 2px auto;
  border-radius: 10px;
  position: relative;
  overflow: visible;
}
body.sidebar-collapsed .sidebar-nav .nav-item .ni-icon {
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.sidebar-collapsed .sidebar-nav .nav-item .ni-icon svg {
  width: 20px;
  height: 20px;
}
body.sidebar-collapsed .sidebar-nav .ni-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  font-size: 10px;
  line-height: 16px;
  padding: 0 4px;
  border-radius: 8px;
}
body.sidebar-collapsed .sidebar-nav .nav-group {
  margin-bottom: 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 6px;
}
body.sidebar-collapsed .sidebar-nav .nav-group:first-child {
  border-top: none;
  padding-top: 0;
}
/* In icon-only mode the group header is hidden, so keep items visible to
   avoid locking a section-collapsed group shut with no way to reopen it. */
body.sidebar-collapsed .sidebar-nav .nav-group-items {
  max-height: none;
  opacity: 1;
  pointer-events: auto;
}
/* Tooltip on hover */
body.sidebar-collapsed .sidebar-nav .nav-item::after {
  content: attr(title);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: #1f2937;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 9px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  z-index: 2000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
body.sidebar-collapsed .sidebar-nav .nav-item:hover::after {
  opacity: 1;
}

/* ============================================================
   Sidebar
   ============================================================ */
.sidebar {
  background: linear-gradient(180deg, var(--teal-sidebar) 0%, var(--teal-sidebar-deep) 100%);
  color: var(--teal-on);
  padding: 20px 14px 16px;
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: sticky;
  top: 0;
  border-right: 1px solid var(--teal-sidebar-deep);
  overflow: hidden;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px 16px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #0a2730;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.brand-mark svg { width: 28px; height: 28px; display: block; }
.brand-text { line-height: 1.15; }
.brand-eyebrow {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #97aab0;
  margin-bottom: 2px;
}
.brand-name {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--teal-on);
  letter-spacing: 0.01em;
}

/* Sidebar nav */
.sidebar-nav { flex: 1; overflow-y: auto; }
.nav-group { margin-bottom: 18px; }
.nav-group-label {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8aa1a8;
  padding: 0 10px 8px;
  cursor: pointer;
  text-align: left;
  transition: color 0.12s;
}
.nav-group-label:hover { color: #d9e2e4; }
.nav-group-label-text { flex: 1; line-height: 1.25; }
.nav-group-chevron {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}
.nav-group.is-collapsed .nav-group-chevron { transform: rotate(-90deg); }
.nav-group-items {
  overflow: hidden;
  transition: max-height 0.2s ease, opacity 0.15s ease;
  max-height: 1600px;
  opacity: 1;
}
.nav-group.is-collapsed .nav-group-items {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: 0;
  color: #d9e2e4;
  padding: 8px 10px;
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  border-radius: 6px;
  margin-bottom: 2px;
  position: relative;
  transition: background 0.12s, color 0.12s;
}
.nav-item:hover { background: rgba(255,255,255,0.05); color: #fff; }
.nav-item .ni-icon {
  width: 18px; height: 18px; flex-shrink: 0;
  color: #8aa1a8;
}
.nav-item:hover .ni-icon { color: var(--coral-bright); }
.nav-item.is-active {
  background: rgba(255,255,255,0.10);
  color: #fff;
}
.nav-item.is-active .ni-icon { color: var(--coral-bright); }
.nav-item.is-active::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--coral-bright);
  border-radius: 0 3px 3px 0;
}
.nav-item .ni-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  background: var(--danger);
  color: #fff;
  padding: 2px 6px;
  border-radius: 10px;
}

.sidebar-foot {
  padding: 12px 8px 4px;
  border-top: 1px solid rgba(255,255,255,0.10);
  margin-top: 8px;
}
.sidebar-foot-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8aa1a8;
  margin-bottom: 6px;
}
.role-pill {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--teal-on);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
}
.role-pill:hover { background: rgba(255,255,255,0.10); }
.role-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--coral-bright);
}
.role-caret { margin-left: auto; color: #97aab0; }

/* ============================================================
   Topbar + Main
   ============================================================ */
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}
.topbar {
  height: var(--topbar-h);
  background: var(--card);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar-left { display: flex; align-items: center; gap: 12px; }
.icon-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  width: 34px; height: 34px;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover { background: var(--muted-surface); color: var(--fg); }

.crumb { display: flex; align-items: baseline; gap: 8px; }
.crumb-section {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--fg);
  letter-spacing: 0.01em;
}
.crumb-sub {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.crumb-sub::before {
  content: "›";
  margin-right: 6px;
  color: var(--muted-2);
}

.topbar-right { display: flex; align-items: center; gap: 8px; }
.facility-switcher {
  display: flex;
  gap: 4px;
  background: var(--muted-surface);
  padding: 3px;
  border-radius: 8px;
}
.fac-pill {
  background: transparent;
  border: 0;
  color: var(--muted);
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
}
.fac-pill:hover { color: var(--fg); }
.fac-pill.is-active {
  background: var(--coral);
  color: var(--coral-on);
  font-weight: 600;
}
/* Building chips under a page title (toolShell in tools.js). Same look as
   the pills above: the building on screen is filled. */
.page-shell .facility-switcher {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  margin: 0 0 16px;
}
.facility-chip {
  background: transparent;
  border: 0;
  color: var(--muted);
  padding: 7px 14px;
  min-height: 34px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.facility-chip:hover { color: var(--fg); background: var(--card); }
.facility-chip.is-active {
  background: var(--coral);
  color: var(--coral-on);
  font-weight: 600;
}
.facility-chip:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.app-root {
  padding: 28px 28px 60px;
  outline: none;
  max-width: 1440px;
  width: 100%;
}

/* ============================================================
   Page header / shell
   ============================================================ */
.page-head { margin-bottom: 24px; }
.page-eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 600;
  margin-bottom: 6px;
}
.page-title {
  font-family: var(--font-display);
  font-size: 28px;
  margin: 0 0 8px;
  color: var(--fg);
  letter-spacing: 0.005em;
  font-weight: 400;
}
.page-lede {
  color: var(--muted);
  font-size: 14px;
  max-width: 720px;
  margin: 0;
}
.page-head .head-actions {
  display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap;
}

/* ============================================================
   Cards
   ============================================================ */
.card {
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--r-lg);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.card-tight { padding: 14px 16px; }
.card-elev { box-shadow: var(--shadow); background: var(--card-2); }

.card > h2,
.card > .card-head h2 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 400;
  margin: 0 0 14px;
  color: var(--fg);
  letter-spacing: 0.005em;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.card-head h2 { margin: 0; }
.card-head .head-meta { font-size: 12px; color: var(--muted); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.card-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 880px) {
  .card-grid-2 { grid-template-columns: 1fr; }
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--teal);
  color: var(--teal-on);
  border: 1px solid var(--teal);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--r-sm);
  transition: background 0.12s, transform 0.05s;
}
.btn:hover { background: var(--teal-2); }
.btn:active { transform: translateY(1px); }
.btn-cta {
  background: var(--coral);
  color: var(--coral-on);
  border-color: var(--coral);
  font-weight: 650;
}
.btn-cta:hover { background: var(--coral-hover); border-color: var(--coral-hover); }
.ivy-quick { display: grid; gap: 8px; margin: 0 0 16px; }
.ivy-scan {
  position: relative;
  display: flex;
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
  margin: 0;
  padding: 18px 16px;
  font-size: 18px;
  line-height: 1.2;
  cursor: pointer;
}
.ivy-scan input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
}
.btn-secondary {
  background: var(--muted-surface);
  color: var(--fg);
  border-color: var(--teal-line);
}
.btn-secondary:hover { background: #D3EBE8; }
.btn-ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--line);
}
.btn-ghost:hover { background: var(--muted-surface); }
.btn-danger {
  background: var(--danger); color: #fff; border-color: var(--danger);
}
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-lg { padding: 10px 18px; font-size: 14px; }

/* ============================================================
   Tables
   ============================================================ */
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tbl th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--card);
}
.tbl td {
  padding: 12px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  color: var(--fg);
}
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr.is-clickable { cursor: pointer; }
.tbl tr.is-clickable:hover td { background: var(--bg); }

/* ============================================================
   Status / badges
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  background: var(--muted-surface);
  color: var(--fg-soft);
  border: 1px solid var(--line);
}
.badge-danger  { background: var(--danger-soft); color: var(--danger); border-color: #F3C7C7; }
.badge-warn    { background: var(--warn-soft); color: var(--warn-ink); border-color: #F5DE9A; }
.badge-ok      { background: var(--ok-soft); color: var(--ok); border-color: #B7E4CB; }
.badge-info    { background: var(--teal-soft); color: var(--teal); border-color: var(--teal-line); }
.badge-gold    { background: var(--coral-soft); color: var(--coral-ink); border-color: var(--coral-line); }

.status-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted);
  margin-right: 6px;
  vertical-align: middle;
}
.status-dot.is-red { background: var(--danger); }
.status-dot.is-amber { background: var(--warn); }
.status-dot.is-green { background: var(--ok); }

/* ============================================================
   Hero block (dashboard intent strip)
   ============================================================ */
.hero {
  background: var(--teal);
  color: var(--teal-on);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(255,199,179,0.22), transparent 60%);
  pointer-events: none;
}
.hero-eyebrow {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--coral-bright); font-weight: 600; margin-bottom: 8px;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  margin: 0 0 10px;
  color: #fff;
}
.hero p { margin: 0; color: rgba(248,245,240,0.85); max-width: 720px; font-size: 13.5px; }
.hero-meta {
  display: flex; gap: 16px; margin-top: 16px; flex-wrap: wrap;
}
.hero-stat {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  padding: 10px 14px;
  min-width: 130px;
}
.hero-stat-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--coral-bright); }
.hero-stat-value { font-family: var(--font-display); font-size: 22px; color: #fff; margin-top: 4px; }
.hero-stat-sub { font-size: 11px; color: rgba(248,245,240,0.65); margin-top: 2px; }

/* ============================================================
   "Are they doing it" — accountability table
   ============================================================ */
.acct-card { border-left: 3px solid var(--danger); }
.acct-card.is-ok { border-left-color: var(--ok); }
.acct-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.acct-item:last-child { border-bottom: 0; padding-bottom: 0; }
.acct-item:first-child { padding-top: 0; }
.acct-title { font-weight: 600; color: var(--fg); font-size: 14px; }
.acct-sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.acct-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 12px; color: var(--muted); }

/* Owner script (yellow callout) */
.owner-script {
  background: var(--gold-soft);
  border-left: 3px solid var(--gold);
  border-radius: 0 6px 6px 0;
  padding: 10px 14px;
  margin-top: 10px;
}
.owner-script-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--coral-ink);
  margin-bottom: 4px;
}
.owner-script-body { font-size: 13px; color: var(--teal-ink); line-height: 1.5; font-style: italic; }
.owner-script-actions { display: flex; gap: 6px; margin-top: 10px; }

/* ============================================================
   PIP cards
   ============================================================ */
.pip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.pip-card {
  background: var(--card-2);
  border: 1px solid var(--card-line);
  border-radius: var(--r);
  padding: 14px;
  transition: border-color 0.12s, box-shadow 0.12s;
  cursor: pointer;
}
.pip-card:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow);
}
.pip-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.pip-card-title { font-weight: 600; color: var(--fg); font-size: 13.5px; line-height: 1.35; }
.pip-card-meta { font-size: 11.5px; color: var(--muted); margin-bottom: 10px; }
.pip-card-actions { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.pip-card-ai { border-left: 3px solid var(--gold, #C69A4B); }
.pip-card-locked { background: rgba(120, 113, 108, 0.08); }
.pip-card-locked .pip-card-head h3 { color: var(--muted); }
.pip-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 4px;
  vertical-align: middle;
}
.pip-badge-ai { background: #1e3a8a; color: #fff; }
.pip-badge-draft { background: #d97706; color: #fff; }
.pip-badge-locked { background: #166534; color: #fff; }

/* PIP edit modal */
.pip-edit-form { display: flex; flex-direction: column; gap: 14px; max-width: 1120px; }
.pip-edit-form h3 {
  margin: 0;
  max-width: 980px;
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.2;
}
.pip-edit-form > .muted.small { max-width: 880px; line-height: 1.45; }
.pip-edit-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 700; color: var(--muted); }
.pip-edit-form input[type="text"], .pip-edit-form input[type="date"], .pip-edit-form textarea, .pip-edit-form select {
  font-family: inherit; font-size: 14px; line-height: 1.45; padding: 9px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--fg);
}
.pip-edit-form textarea { resize: vertical; min-height: 82px; }
.edit-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.edit-iv { border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: rgba(255,255,255,.62); }
.edit-iv legend { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 0 6px; color: var(--fg); }
.edit-iv-row { display: grid; grid-template-columns: minmax(420px, 1fr) minmax(180px, 230px) minmax(130px, 160px) auto; gap: 8px; align-items: start; margin-bottom: 8px; }
.edit-iv-row textarea { min-height: 66px; }
.edit-iv-row input,
.edit-iv-row select { min-height: 39px; }
.edit-iv-row .tiny { min-height: 36px; align-self: start; }
@media (max-width: 900px) {
  .edit-grid-2,
  .edit-iv-row { grid-template-columns: 1fr; }
}

/* Survey-manager toasts */
.sm-toast-success { background: #166534; color: #fff; }
.sm-toast-success a { color: #d1fae5; font-weight: 700; }
.sm-toast-error { background: #b91c1c; color: #fff; }
.sm-doc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.sm-doc-chip {
  border: 1px solid #dbe4e5;
  border-radius: 999px;
  padding: 4px 10px;
  background: #f6faf9;
  color: var(--teal, #0C5F66);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.sm-doc-chip:hover { background: #eef7f5; }
.sm-doc-chip.is-dead { background: #fdf6e3; border-color: #f0d28a; color: #8a5b04; cursor: default; }

/* ============================================================
   Tabs (inside a page, for PIP detail etc.)
   ============================================================ */
.page-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.page-tab {
  background: transparent;
  border: 0;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.page-tab:hover { color: var(--fg); }
.page-tab.is-active {
  color: var(--teal);
  border-bottom-color: var(--gold);
  font-weight: 600;
}

/* ============================================================
   Form / inputs
   ============================================================ */
input[type="text"], input[type="number"], input[type="date"],
input[type="email"], input[type="tel"], input[type="url"], input[type="search"], textarea, select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--input-line);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 13px;
  background: #fff;
  color: var(--fg);
  transition: border-color 0.12s, box-shadow 0.12s;
}
input:focus, textarea:focus, select:focus {
  outline: 0;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(12,95,102,0.16);
}
textarea { resize: vertical; min-height: 80px; }
label { font-size: 12.5px; font-weight: 500; color: var(--fg); display: block; margin-bottom: 4px; }
.field { margin-bottom: 12px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ============================================================
   Upload zone
   ============================================================ */
.upload-zone {
  background: #fff;
  border: 2px dashed var(--input-line);
  border-radius: var(--r-lg);
  padding: 28px 20px;
  text-align: center;
  transition: border-color 0.12s, background 0.12s;
  cursor: pointer;
}
.upload-zone:hover, .upload-zone.is-drag {
  border-color: var(--gold);
  background: var(--coral-soft);
}
.upload-zone-icon {
  width: 36px; height: 36px;
  color: var(--muted-2);
  margin: 0 auto 10px;
}
.upload-zone-title { font-weight: 600; color: var(--fg); margin-bottom: 4px; font-size: 14px; }
.upload-zone-sub { font-size: 12px; color: var(--muted); }

/* ============================================================
   Meeting / agenda
   ============================================================ */
.agenda-list { list-style: none; padding: 0; margin: 0; }
.agenda-item {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}
.agenda-item:last-child { border-bottom: 0; }
.agenda-check {
  width: 18px; height: 18px;
  border: 1.5px solid var(--input-line);
  border-radius: 4px;
  cursor: pointer;
}
.agenda-check.is-done {
  background: var(--ok);
  border-color: var(--ok);
  position: relative;
}
.agenda-check.is-done::after {
  content: "✓"; color: #fff; position: absolute; top: -3px; left: 2px; font-size: 14px; font-weight: 700;
}
.agenda-text { font-size: 13.5px; }
.agenda-text.is-done { color: var(--muted-2); text-decoration: line-through; }
.agenda-owner {
  font-size: 11px;
  background: var(--muted-surface);
  color: var(--fg-soft);
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 500;
}

/* ============================================================
   F-tag library
   ============================================================ */
/* Legacy .ftag-row grid styles removed — the rebuild uses <table.ftag-table> */
.ftag-tag {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  color: var(--teal);
}
.ftag-name { font-size: 13.5px; color: var(--fg); font-weight: 500; }
.ftag-mean { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ============================================================
   Modal
   ============================================================ */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15,39,45,0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  padding: 24px;
}
.modal-card {
  background: var(--card-2);
  border-radius: var(--r-lg);
  width: min(640px, 100%);
  max-height: 86vh;
  overflow: auto;
  border-top: 3px solid var(--gold);
  box-shadow: var(--shadow-lg);
}
.modal-card.is-wide { width: min(1180px, 100%); }
.modal-head {
  padding: 18px 22px 12px;
  border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px;
}
.modal-head h3 {
  margin: 0;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.35;
  color: var(--fg);
  overflow-wrap: anywhere;
}
.modal-head [data-modal-close] { flex: 0 0 auto; }
.modal-body { padding: 20px 22px; min-width: 0; }
.modal-close {
  background: transparent; border: 0;
  font-size: 22px; line-height: 1; color: var(--muted);
  padding: 0; width: 28px; height: 28px;
  border-radius: 6px;
}
.modal-close:hover { background: var(--muted-surface); color: var(--fg); }

/* ============================================================
   Empty state
   ============================================================ */
.empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
}
.empty h3 { font-family: var(--font-display); font-weight: 400; color: var(--fg); margin: 0 0 6px; }
.empty p { margin: 0 0 14px; font-size: 13px; }

/* ============================================================
   Misc
   ============================================================ */
.storage-banner {
  background: var(--warn-soft);
  border-bottom: 1px solid #F5DE9A;
  color: var(--warn-ink);
  padding: 8px 24px;
  font-size: 12.5px;
}
.save-toast {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--teal);
  color: var(--teal-on);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: opacity 0.16s;
}
.save-toast.is-visible { opacity: 1; }

.floating-tooltip {
  position: fixed;
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
  box-shadow: var(--shadow);
  pointer-events: none;
  z-index: 999;
  max-width: 280px;
}

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted-2);
}

.kv {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 4px 16px;
  font-size: 13px;
}
.kv dt { color: var(--muted); font-weight: 500; }
.kv dd { margin: 0; color: var(--fg); }

/* Two-column layouts */
.split-2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
@media (max-width: 1024px) { .split-2 { grid-template-columns: 1fr; } }

/* ============================================================
   Sidebar collapsed (mobile)
   ============================================================ */
@media (max-width: 880px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0;
    width: var(--sidebar-w);
    transform: translateX(-100%);
    transition: transform 0.18s ease;
    z-index: 100;
  }
  body.nav-open .sidebar { transform: translateX(0); }
  body.nav-open::after {
    content: ""; position: fixed; inset: 0;
    background: rgba(15,39,45,0.40); z-index: 50;
  }
  .app-root { padding: 18px; }
}

/* ============================================================
   Legacy shim — old route renderers still emit .page-shell markup.
   Make them look at home on the new Altura theme until rewritten.
   ============================================================ */
.page-shell { padding: 0; background: transparent; }
.page-shell-inner, .container { max-width: 1440px; }
.page-shell .page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 22px;
}
.page-shell .page-header .eyebrow { margin: 0 0 4px; }
.page-shell .page-header .page-title {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 400; letter-spacing: 0.005em;
  margin: 0 0 6px; color: var(--fg);
}
.page-shell .page-header .page-lede { margin: 0; color: var(--muted); font-size: 13.5px; max-width: 720px; }
.page-shell .page-actions { display: flex; gap: 8px; }
.page-shell .page-actions button,
.page-shell .page-actions .button {
  background: var(--coral); color: var(--coral-on);
  border: 1px solid var(--coral);
  padding: 8px 14px; font-size: 13px; font-weight: 600;
  border-radius: var(--r-sm); cursor: pointer;
}

/* legacy button-primary etc. */
.button { font-family: var(--font-sans); font-weight: 500; font-size: 13px; cursor: pointer; }
.button-primary {
  background: var(--teal); color: var(--teal-on); border: 1px solid var(--teal);
  padding: 8px 14px; border-radius: var(--r-sm);
}
.button-primary:hover { background: var(--teal-2); }
.button-secondary {
  background: var(--muted-surface); color: var(--fg); border: 1px solid var(--muted-surface);
  padding: 8px 14px; border-radius: var(--r-sm);
}
.button-ghost {
  background: transparent; color: var(--fg); border: 1px solid var(--line);
  padding: 8px 14px; border-radius: var(--r-sm);
}

/* Premium-card / facility-card / dash variants (used by many legacy files) */
.premium-card, .facility-card, .facility-card-deep,
.spend-card, .top-red-card, .acct-list > article, .dash-deep,
.empty-state-card {
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--r-lg);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.premium-card h2, .premium-card h3,
.facility-card h2, .facility-card h3,
.facility-card-deep h2, .facility-card-deep h3,
.spend-card h2, .spend-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--fg);
  letter-spacing: 0.005em;
  margin: 0 0 10px;
}

.card-head-inline {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; gap: 12px;
}
.card-head-inline h3 {
  font-family: var(--font-display); font-weight: 400; margin: 0;
  font-size: 17px; color: var(--fg);
}
.muted { color: var(--muted); }
.small { font-size: 12px; }

.facility-deep-grid, .top-red-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px;
}
.spend-table, .tbl-legacy { width: 100%; border-collapse: collapse; font-size: 13px; }
.spend-table th, .tbl-legacy th {
  text-align: left; font-size: 11px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted-2);
  padding: 10px 12px; border-bottom: 1px solid var(--line);
}
.spend-table td, .tbl-legacy td {
  padding: 12px; border-bottom: 1px solid var(--line-soft);
  color: var(--fg);
}

.facility-tabs, .facility-tab-row {
  display: flex; gap: 4px; padding: 3px;
  background: var(--muted-surface); border-radius: 8px;
  width: fit-content; margin-bottom: 18px;
}
.facility-tab {
  background: transparent; border: 0; color: var(--muted);
  padding: 6px 14px; font-size: 12.5px; font-weight: 500;
  border-radius: 6px; cursor: pointer;
}
.facility-tab.is-active {
  background: var(--coral); color: var(--coral-on); font-weight: 600;
}

.status-dot.status-red { background: var(--danger); }
.status-dot.status-yellow { background: var(--warn); }
.status-dot.status-green { background: var(--ok); }
.acct-pill {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: 999px;
}
.acct-pill.acct-red { background: var(--danger-soft); color: var(--danger); }
.acct-pill.acct-yellow { background: var(--warn-soft); color: var(--warn-ink); }
.acct-pill.acct-green { background: var(--ok-soft); color: var(--ok); }

.risk-score-block { text-align: right; }
.risk-score {
  font-family: var(--font-display);
  font-size: 28px; color: var(--fg);
}
.risk-band-label { font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted-2); }
.sff-alert {
  background: var(--danger-soft); border: 1px solid #f0c8c8;
  color: var(--danger); padding: 6px 10px; border-radius: 6px;
  font-size: 12px; margin: 10px 0;
}
.dash-stats-row {
  display: flex; gap: 16px; flex-wrap: wrap; margin: 12px 0;
  font-size: 12.5px; color: var(--muted);
}
.dash-stats-row strong { display: block; color: var(--fg); font-size: 16px; }
.dash-stats-row .is-bad { color: var(--danger); }
.acct-summary { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0 14px; }
.acct-tone { font-size: 12px; color: var(--muted); }
.facility-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }

/* knowledge / library / qapi modules generally use these */
.knowledge-grid, .qapi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px;
}

.empty-state-card { text-align: center; padding: 40px 20px; color: var(--muted); }
.empty-state-card h3 { font-family: var(--font-display); color: var(--fg); font-weight: 400; }
.empty-state-icon { font-size: 32px; color: var(--muted-2); margin-bottom: 8px; }

/* ============================================================
   REBUILD PASS — pages added by rebuild.js
   ============================================================ */

/* Tighter app padding — page felt airy/strange */
.app-root { padding: 20px 24px 48px; max-width: 1380px; }
.page-head { margin-bottom: 18px; }
.page-title { font-size: 26px; margin: 0 0 6px; }
.card { padding: 18px 18px; margin-bottom: 14px; }
.card > h2, .card > .card-head h2, .card-head-inline h2 { font-size: 15px; margin-bottom: 12px; }
.card-head-inline { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card-head-inline h2, .card-head-inline h3 {
  font-family: var(--font-display);
  font-size: 15px;
  margin: 0;
  letter-spacing: 0.01em;
  font-weight: 400;
  color: var(--fg);
  display: inline-flex; align-items: center; gap: 8px;
}
.card-head-inline h3 { font-size: 13.5px; }

/* Drop zone v2 — proper, professional drop affordance */
.upload-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.upload-row.single { grid-template-columns: 1fr; }
.upload-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 16px; }
.drop-zone-v2 {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--card);
  border: 1.5px dashed #c9bfb0;
  border-radius: var(--r-lg);
  padding: 18px 18px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  min-height: 100px;
}
.drop-zone-v2:hover {
  border-color: var(--coral);
  background: var(--coral-soft);
  box-shadow: 0 1px 0 rgba(12,95,102,0.04);
}
.drop-zone-v2.has-file {
  border-style: solid;
  border-color: #c9c0b1;
  background: var(--card);
}
.drop-zone-v2 .dz-icon {
  width: 42px; height: 42px;
  border-radius: 10px;
  background: var(--muted-surface);
  color: var(--teal);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.drop-zone-v2.has-file .dz-icon { background: var(--gold-soft); color: var(--teal); }
.dz-main { flex: 1; min-width: 0; }
.dz-title { font-weight: 600; font-size: 14px; color: var(--fg); margin-bottom: 3px; }
.dz-help { margin-bottom: 6px; }
.dz-cta {
  color: var(--teal);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
}
.dz-file { font-size: 12.5px; color: var(--fg); display: flex; align-items: center; gap: 8px; }
.dz-file .dot.ok { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }

/* ---- Weekly calendar (Clinical Week) ---- */
.week-cal-card .card-head-inline svg { color: var(--teal); }
.week-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.wk-col {
  background: #fdfbf6;
  border: 1px solid var(--card-line);
  border-radius: var(--r-md);
  min-height: 150px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.wk-col.is-today { border-color: var(--coral); background: var(--coral-soft); box-shadow: 0 0 0 1px var(--coral) inset; }
.wk-col-head {
  display: flex; align-items: baseline; gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--card-line);
  background: var(--card);
}
.wk-dow { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); font-weight: 600; }
.wk-day { font-family: var(--font-display); font-size: 15px; color: var(--fg); }
.wk-today-pill { margin-left: auto; font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; background: var(--coral); color: var(--coral-on); padding: 1px 6px; border-radius: 10px; }
.wk-col-body { padding: 6px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.wk-empty { color: var(--muted-2); font-size: 12px; text-align: center; padding: 12px 0; }
.wk-mtg {
  text-align: left;
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: 6px;
  padding: 6px 8px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.wk-mtg:hover { border-color: var(--coral); background: var(--coral-soft); }
.wk-mtg-time { font-size: 10.5px; font-weight: 600; color: var(--teal); margin-bottom: 1px; }
.wk-mtg-title { font-size: 11.5px; color: var(--fg); line-height: 1.3; }

/* Today meeting list */
.today-mtg-list { display: flex; flex-direction: column; gap: 8px; }
.today-mtg-row {
  display: grid; grid-template-columns: 70px 1fr auto auto; gap: 14px; align-items: center;
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--r-md);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  text-align: left;
}
.today-mtg-row:hover { border-color: var(--coral); background: var(--coral-soft); }
.tmr-time { font-family: var(--font-display); font-size: 16px; color: var(--teal); }
.tmr-title { font-weight: 600; font-size: 13.5px; color: var(--fg); }
.tmr-cadence { font-size: 11.5px; margin-top: 2px; }
.tmr-attendees { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tmr-cta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--teal); font-weight: 500; }

/* ============================================================
   HR launch pass - responsive admin + employee portal
   ============================================================ */
.hr-admin-shell { min-width: 0; }
.hr-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 24px;
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--bg, #f7f5f0);
  padding-top: 4px;
}
.hr-tab {
  flex: 0 0 auto;
  padding: 10px 18px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #555;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}
.hr-tab.is-active {
  color: #0b5cab;
  border-bottom-color: #0b5cab;
  font-weight: 700;
}
.hr-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}
.hr-panel-head h3 { margin: 0 0 4px; font-size: 16px; }
.hr-panel-head p { margin: 0; color: #666; font-size: 13px; }
.hr-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.hr-kpi-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 14px;
}
.hr-kpi-card div { font-size: 12px; color: #667085; }
.hr-kpi-card strong { display: block; font-size: 24px; line-height: 1.2; }
.hr-card-table {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: auto;
}
.hr-card-table table { width: 100%; border-collapse: collapse; }
.hr-card-table th {
  text-align: left;
  padding: 11px 14px;
  font-size: 11px;
  color: #667085;
  text-transform: uppercase;
  background: #f9fafb;
}
.hr-card-table td {
  padding: 13px 14px;
  border-top: 1px solid #f0f0f0;
  vertical-align: top;
  font-size: 13px;
}
.hr-muted { font-size: 12px; color: #667085; margin-top: 2px; }
.hr-empty { padding: 28px; text-align: center; color: #888; background: #f9fafb; border-radius: 8px; }
.hr-pill {
  display: inline-block;
  background: #e7f1ff;
  color: #0b5cab;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.hr-pill.is-bad { background: #fdecea; color: #a01010; }
.hr-pill.is-warn { background: #fff4e5; color: #9a5b00; }
.hr-pill.is-ok { background: #e6f7ec; color: #1f7a3a; }
.hr-actions-cell { white-space: nowrap; }
.hr-actions-cell .btn { font-size: 12px; padding: 7px 10px; margin: 0 4px 4px 0; }

/* ============ HR v2 modern design system ============ */
.hr-kpi-card.is-clickable { cursor: pointer; transition: box-shadow .15s ease, transform .1s ease, border-color .15s ease; }
.hr-kpi-card.is-clickable:hover { box-shadow: 0 4px 14px rgba(16,24,40,.10); transform: translateY(-1px); border-color: #cdd5e0; }
.hr-kpi-card.is-active { border-color: #0b5cab; box-shadow: 0 0 0 2px rgba(11,92,171,.18); }
.hr-kpi-card .kpi-label { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:#667085; letter-spacing:.2px; }
.hr-kpi-card .kpi-hint { font-size:11px; color:#98a2b3; margin-top:6px; }

/* ============ HR Overview dashboard (default landing) ============ */
.hr-ov-header { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
#ov-kpis { margin-bottom:14px; }
.hr-kpi-card.hr-ov-warn { border-left:3px solid #9a5b00; }
.hr-kpi-card.hr-ov-bad  { border-left:3px solid #a01010; }
.hr-ov-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:14px; }
.hr-ov-c7 { grid-column:span 7; } .hr-ov-c6 { grid-column:span 6; } .hr-ov-c5 { grid-column:span 5; }
@media (max-width: 860px){ .hr-ov-c7,.hr-ov-c6,.hr-ov-c5 { grid-column:span 12; } }
.hr-ov-card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 1px 2px rgba(16,24,40,.04); display:flex; flex-direction:column; }
.hr-ov-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 16px; border-bottom:1px solid #eef1f5; }
.hr-ov-head h4 { margin:0; font-size:13px; font-weight:800; color:#101828; }
.hr-ov-head .k-sub { font-size:11.5px; color:#98a2b3; }
.hr-ov-link { font-size:12px; color:#0b5cab; font-weight:600; cursor:pointer; white-space:nowrap; }
.hr-ov-link:hover { text-decoration:underline; }
.hr-ov-body { padding:14px 16px; }
.hr-ov-stats { display:flex; gap:22px; flex-wrap:wrap; margin-bottom:8px; }
.hr-ov-stats .big { font-size:24px; font-weight:800; color:#101828; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.1; }
.hr-ov-stats .cap { font-size:11.5px; color:#667085; }
.hr-ov-legend { display:flex; gap:16px; flex-wrap:wrap; margin-top:8px; font-size:11.5px; color:#667085; align-items:center; }
.hr-ov-legend .sw { display:inline-block; width:10px; height:10px; border-radius:3px; background:#0b5cab; margin-right:5px; vertical-align:middle; }
.hr-ov-list { display:flex; flex-direction:column; }
.hr-ov-prow { display:flex; align-items:center; gap:11px; padding:9px 0; border-top:1px solid #f0f2f5; cursor:pointer; }
.hr-ov-prow:first-child { border-top:0; }
.hr-ov-prow:hover { background:#f9fafb; margin:0 -8px; padding-left:8px; padding-right:8px; border-radius:8px; }
.hr-ov-avatar { flex:0 0 auto; width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#0b5cab,#3b82f6); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; }
.hr-ov-avatar.g2 { background:linear-gradient(135deg,#7c3aed,#a855f7); }
.hr-ov-avatar.g3 { background:linear-gradient(135deg,#0891b2,#22d3ee); }
.hr-ov-avatar.g4 { background:linear-gradient(135deg,#c2410c,#f97316); }
.hr-ov-meta { min-width:0; flex:1; }
.hr-ov-meta .nm { font-size:13.5px; font-weight:700; color:#101828; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hr-ov-meta .rl { font-size:11.5px; color:#667085; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hr-ov-date { font-size:12.5px; font-weight:700; color:#475467; white-space:nowrap; font-variant-numeric:tabular-nums; }
.hr-ov-yrs { font-size:11px; font-weight:800; color:#0b5cab; background:#e7f1ff; padding:2px 9px; border-radius:999px; white-space:nowrap; }
.hr-ov-miss { display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end; max-width:52%; }
.hr-ov-miss .miss { font-size:10px; font-weight:600; color:#9a5b00; background:#fff4e5; padding:1px 6px; border-radius:5px; white-space:nowrap; }
.hr-ov-miss .miss.more { color:#667085; background:#eef1f5; }
.hr-ov-foot { display:flex; justify-content:space-between; align-items:center; gap:8px; margin:6px 0 0; padding:10px 0 0; border-top:1px solid #f0f2f5; font-size:11.5px; color:#98a2b3; }
.hr-ov-foot a { color:#0b5cab; font-weight:600; cursor:pointer; }
.hr-ov-foot a:hover { text-decoration:underline; }

/* Employee profile card + sections */
.hr-prof-wrap { display:grid; grid-template-columns: 320px 1fr; gap:24px; align-items:start; }
@media (max-width: 900px){ .hr-prof-wrap { grid-template-columns: 1fr; } }
.hr-prof-card { background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:20px; box-shadow:0 1px 2px rgba(16,24,40,.04); }
.hr-prof-hero { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.hr-avatar { flex:0 0 auto; width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg,#0b5cab,#3b82f6); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:20px; letter-spacing:.5px; }
.hr-prof-hero .nm { font-size:18px; font-weight:800; color:#101828; line-height:1.2; }
.hr-prof-hero .sub { font-size:13px; color:#667085; margin-top:2px; }
.hr-section { border:1px solid #e9edf2; border-radius:12px; margin-bottom:16px; overflow:hidden; background:#fff; }
.hr-section > .hr-section-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; background:#f8fafc; border-bottom:1px solid #eef1f5; }
.hr-section-head h4 { margin:0; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:#475467; font-weight:800; }
.hr-field-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:2px 24px; padding:8px 16px 14px; }
@media (max-width:600px){ .hr-field-grid { grid-template-columns:1fr; } }
.hr-field { display:flex; flex-direction:column; gap:2px; padding:9px 0; border-bottom:1px solid #f2f4f7; min-width:0; }
.hr-field:last-child { border-bottom:0; }
.hr-field .lbl { font-size:11px; font-weight:700; color:#98a2b3; text-transform:uppercase; letter-spacing:.04em; }
.hr-field .val { font-size:14px; color:#101828; word-break:break-word; }
.hr-field .val.editable { cursor:text; border-radius:6px; padding:3px 6px; margin:-3px -6px; transition:background .12s; }
.hr-field .val.editable:hover { background:#eef4fc; box-shadow: inset 0 0 0 1px #dbe6f5; }
.hr-field .val.editable::after { content:"\270E"; font-size:11px; color:#b0b8c4; margin-left:7px; opacity:0; transition:opacity .12s; }
.hr-field .val.editable:hover::after { opacity:1; }
.hr-inline-input { width:100%; font-size:14px; padding:6px 8px; border:1px solid #0b5cab; border-radius:6px; outline:none; box-shadow:0 0 0 3px rgba(11,92,171,.12); }
.hr-inline-select { width:100%; font-size:14px; padding:6px 8px; border:1px solid #0b5cab; border-radius:6px; }
.hr-save-toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:#101828; color:#fff; padding:10px 18px; border-radius:999px; font-size:13px; font-weight:600; z-index:9999; box-shadow:0 8px 24px rgba(16,24,40,.28); opacity:0; transition:opacity .2s, transform .2s; }
.hr-save-toast.show { opacity:1; transform:translateX(-50%) translateY(-4px); }
.hr-save-toast.err { background:#a01010; }
.hr-linkname { color:#0b5cab; font-weight:700; cursor:pointer; text-decoration:none; }
.hr-linkname:hover { text-decoration:underline; }
.hr-chip-row { display:flex; flex-wrap:wrap; gap:6px; }
.hr-miss-chip { display:inline-block; background:#fdecea; color:#a01010; border-radius:999px; padding:2px 9px; font-size:11px; font-weight:700; }
.hr-employee-portal { max-width: 880px; margin: 0 auto; padding: 24px 20px; }
.hr-check-section { margin-bottom: 18px; }
.hr-check-section h4 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #667085; }
.hr-check-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 8px;
}
.hr-check-card-body { flex: 1; min-width: 0; }
.hr-check-title { font-weight: 700; font-size: 14px; color: #111827; }
.hr-check-desc { font-size: 12px; color: #667085; margin-top: 2px; }
.hr-check-owner { display: inline-block; margin-top: 6px; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #64748b; font-weight: 800; }

/* Financials action-first view */
.fin-action-layout { display: grid; gap: 14px; }
.fin-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.fin-action-card {
  border: 1px solid #e6e1d6;
  border-left: 4px solid #d18419;
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}
.fin-action-card.is-high { border-left-color: #c33035; }
.fin-action-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #667085;
  font-weight: 800;
}
.fin-action-meta strong { font-size: 13px; color: var(--teal); letter-spacing: 0; text-transform: none; }
.fin-action-card h3 { margin: 0 0 8px; font-size: 15px; color: #111827; }
.fin-action-card p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.45; color: #334155; }
.fin-action-next {
  background: #fff8e6;
  border: 1px solid #f2d48a;
  border-radius: 7px;
  padding: 9px 10px;
  font-size: 12.5px;
  line-height: 1.45;
  margin-bottom: 10px;
}
.fin-action-card dl { margin: 0 0 12px; display: grid; gap: 6px; }
.fin-action-card dl div { display: grid; grid-template-columns: 56px 1fr; gap: 8px; font-size: 12px; }
.fin-action-card dt { color: #667085; font-weight: 800; }
.fin-action-card dd { margin: 0; color: #111827; }
.fin-step-list { display: grid; gap: 10px; }
.fin-step-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
  border: 1px solid #e6e1d6;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}
.fin-step-row p { margin: 6px 0 0; font-size: 12.5px; color: #334155; }
.fin-step-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 760px) {
  .hr-tabs { margin-left: -2px; margin-right: -2px; padding-bottom: 2px; }
  .hr-tab { padding: 10px 12px; font-size: 13px; }
  .hr-panel-head { flex-direction: column; align-items: stretch; }
  .hr-panel-head .btn, .hr-panel-head button { width: 100%; }
  .hr-admin-shell table,
  .hr-admin-shell thead,
  .hr-admin-shell tbody,
  .hr-admin-shell tr,
  .hr-admin-shell td {
    display: block;
    width: 100%;
  }
  .hr-admin-shell thead { display: none; }
  .hr-admin-shell tr {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin: 0 0 10px;
    overflow: hidden;
    background: #fff;
  }
  .hr-admin-shell td {
    box-sizing: border-box;
    padding: 10px 12px !important;
    text-align: left !important;
    white-space: normal !important;
  }
  .hr-admin-shell td::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #667085;
    font-weight: 800;
    margin-bottom: 4px;
  }
  .hr-card-table { border: 0; background: transparent; overflow: visible; }
  .hr-actions-cell .btn { width: 100%; margin-right: 0; }
  .hr-employee-detail-grid { display: block !important; }
  .hr-employee-portal { padding: 18px 14px 80px; }
  .hr-check-card { align-items: flex-start; flex-wrap: wrap; }
  .hr-check-card button { width: 100%; }
  .modal-backdrop { padding: 10px; align-items: stretch; }
  .modal-card { max-height: calc(100vh - 20px); width: 100%; }
  .fin-step-row { grid-template-columns: 1fr; }
  .fin-step-actions { justify-content: stretch; }
  .fin-step-actions button { flex: 1 1 100%; }
}

/* Meeting templates grid */
.mt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.mt-card {
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--r-md);
  padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.mt-card-head .eyebrow { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 2px; font-weight: 600; }
.mt-card-head h3 { font-family: var(--font-display); font-size: 14.5px; margin: 0; font-weight: 400; color: var(--fg); }
.mt-attendees { line-height: 1.45; }

/* ---- AI summary card (Daily Standup) ---- */
.ai-summary-card .card-head-inline svg { color: var(--gold); }
.ai-sum-block { padding: 10px 0; border-bottom: 1px solid var(--card-line); }
.ai-sum-block:last-child { border-bottom: 0; }
.ai-sum-block-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.ai-sum-block-head strong { font-size: 13px; color: var(--fg); }
.ai-sum-list { margin: 0; padding-left: 18px; font-size: 13px; color: var(--fg); line-height: 1.55; }
.ai-sum-list li { margin-bottom: 3px; }

/* Workflow card */
.workflow-card { background: #fdfbf6; }
.workflow-steps { margin: 0; padding-left: 20px; font-size: 13px; color: var(--fg); line-height: 1.6; }
.workflow-steps li { margin-bottom: 4px; }
.bullet-list { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.6; }
.bullet-list li { margin-bottom: 3px; }

/* Empty card */
.empty-card { padding: 18px; text-align: center; }
.empty-card-inline { padding: 14px; background: #fdfbf6; border-radius: 8px; border: 1px dashed var(--card-line); margin: 8px 0; text-align: center; }

/* Glance stats */
.glance-card { padding: 14px 18px; }
.glance-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gs { display: flex; flex-direction: column; gap: 2px; }
.gs-num { font-family: var(--font-display); font-size: 26px; color: var(--teal); line-height: 1; }
.gs-lbl { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 500; }

/* ---- Hall Audit cards + table ---- */
.hall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.hall-card {
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--r-md);
  padding: 14px;
}
.hall-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.hall-card-head h3 { font-family: var(--font-display); font-size: 16px; margin: 0; font-weight: 400; color: var(--fg); }
.hall-card-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }

.ha-detail { display: flex; flex-direction: column; gap: 14px; max-height: 78vh; }
.ha-detail-head h2 { font-family: var(--font-display); font-size: 18px; margin: 4px 0; font-weight: 400; }
.ha-table-wrap { overflow: auto; border: 1px solid var(--card-line); border-radius: 8px; max-height: 60vh; }
.ha-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ha-table th { background: #fdfbf6; padding: 8px 6px; text-align: left; border-bottom: 1px solid var(--card-line); font-weight: 600; font-size: 10.5px; letter-spacing: 0.04em; }
.ha-table th.ha-col { writing-mode: vertical-rl; transform: rotate(180deg); height: 130px; padding: 6px 4px; font-weight: 500; vertical-align: bottom; }
.ha-table td { padding: 8px 6px; border-bottom: 1px solid var(--card-line); vertical-align: middle; }
.ha-table .ha-cell { text-align: center; padding: 4px 2px; }
.ha-tri {
  width: 24px; height: 24px;
  border-radius: 4px;
  border: 1px solid var(--card-line);
  background: var(--card);
  font-size: 13px; font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  margin: 0 1px;
  line-height: 1;
}
.ha-tri:hover { border-color: var(--teal); }
.ha-tri.is-pass { background: rgba(46,125,95,0.15); color: var(--ok); border-color: var(--ok); }
.ha-tri.is-fail { background: rgba(195,48,53,0.15); color: var(--danger); border-color: var(--danger); }
.ha-note { width: 100%; font-size: 12px; padding: 4px 6px; border: 1px solid var(--card-line); border-radius: 4px; }
.ha-detail-foot { display: flex; gap: 8px; justify-content: flex-end; }

/* ---- KPI row ---- */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi-card {
  background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r-md);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.kpi-num { font-family: var(--font-display); font-size: 26px; color: var(--teal); line-height: 1; font-weight: 400; }
.kpi-lbl { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 500; }

/* ---- QAPI template fit ---- */
.qapi-template-fit-card { display: flex; flex-direction: column; gap: 14px; }
.qapi-fit-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}
.qapi-fit-summary > div {
  border: 1px solid var(--card-line);
  border-radius: 8px;
  background: #fffdf8;
  padding: 12px;
}
.qapi-fit-kicker {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.qapi-fit-summary strong {
  display: block;
  color: var(--teal);
  font-size: 14px;
  margin-bottom: 5px;
}
.qapi-fit-summary p,
.qapi-template-map-card p {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
}
.qapi-template-map summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--teal);
}
.qapi-template-map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.qapi-template-map-card {
  border: 1px solid var(--card-line);
  border-radius: 8px;
  background: var(--card);
  padding: 12px;
}
.qapi-template-map-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.qapi-template-section {
  color: var(--fg);
  font-weight: 700;
  line-height: 1.3;
}
.qapi-template-tab {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.qapi-template-map-card ul {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--fg-soft);
  font-size: 12px;
  line-height: 1.45;
}
.qapi-review-panel { display: flex; flex-direction: column; gap: 14px; }
.qapi-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}
.qapi-review-card {
  border: 1px solid var(--card-line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qapi-review-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.qapi-review-card-head h3 {
  margin: 2px 0 4px;
  color: var(--fg);
  font-size: 15px;
  line-height: 1.25;
}
.qapi-review-card-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.qapi-review-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.qapi-review-meta span {
  border: 1px solid var(--card-line);
  border-radius: 999px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
}
.qapi-review-items {
  margin: 0;
  padding-left: 18px;
  color: var(--fg-soft);
  font-size: 12px;
  line-height: 1.45;
}
.qapi-review-items li { margin: 2px 0; }
.qapi-review-items .is-muted { color: var(--muted); }
.qapi-review-pips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 26px;
  align-items: center;
}
.qapi-review-pip {
  border: 1px solid var(--teal);
  border-radius: 999px;
  background: #fff;
  color: var(--teal);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 8px;
}
.qapi-worksheet-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.qapi-current-dept-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.qapi-current-dept-panel {
  border: 1px solid var(--card-line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.qapi-current-dept-panel[open] {
  box-shadow: 0 1px 0 rgba(15, 60, 71, 0.04);
}
.qapi-current-dept-summary {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 42px 13px 14px;
  cursor: pointer;
  list-style: none;
}
.qapi-current-dept-summary::-webkit-details-marker {
  display: none;
}
.qapi-current-dept-summary::after {
  content: '+';
  position: absolute;
  top: 13px;
  right: 14px;
  color: var(--teal);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}
.qapi-current-dept-panel[open] > .qapi-current-dept-summary::after {
  content: '-';
}
.qapi-current-dept-summary > div > span {
  display: block;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.qapi-current-dept-summary strong {
  display: block;
  margin-top: 2px;
  color: var(--fg);
  font-size: 15px;
  line-height: 1.25;
}
.qapi-current-dept-summary p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.qapi-current-dept-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.qapi-current-dept-meta span {
  border: 1px solid var(--card-line);
  border-radius: 999px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 10.5px;
  letter-spacing: 0;
  padding: 3px 7px;
  text-transform: none;
}
.qapi-current-dept-body {
  border-top: 1px solid var(--card-line);
  padding: 0 14px 14px;
}
.qapi-current-dept-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--card-line);
  padding: 12px 0;
}
.qapi-current-dept-toolbar strong {
  display: block;
  color: var(--fg);
  font-size: 13px;
}
.qapi-current-dept-toolbar span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
}
.qapi-current-dept-notes {
  display: block;
  margin: 12px 0;
}
.qapi-current-dept-notes span {
  display: block;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.qapi-current-dept-notes em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
  margin-left: 6px;
  text-transform: none;
}
.qapi-current-dept-notes textarea {
  width: 100%;
  border: 1px solid var(--card-line);
  border-radius: 7px;
  background: #fff;
  color: var(--fg);
  font: inherit;
  font-size: 12.5px;
  line-height: 1.45;
  padding: 9px 10px;
  resize: vertical;
}
.qapi-current-dept-body .qapi-meeting-dept-worksheet {
  border-top: 0;
  margin-top: 0;
  padding-top: 12px;
}
.qapi-settings-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.qapi-settings-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.qapi-settings-intro h2 {
  margin: 0 0 4px;
}
.qapi-settings-intro p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}
.qapi-settings-steps {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.qapi-email-settings-panel {
  border: 1px solid var(--card-line);
  border-radius: 8px;
  background: #fbfaf7;
  padding: 13px;
}
.qapi-email-settings-panel.is-warning {
  border-color: #f4d999;
  background: #fffaf0;
}
.qapi-email-settings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.qapi-email-settings-head h3 {
  margin: 0 0 4px;
  font-size: 15px;
}
.qapi-email-settings-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.4;
}
.qapi-email-settings-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.qapi-email-settings-grid > div {
  min-width: 0;
  border: 1px solid var(--card-line);
  border-radius: 7px;
  background: #fff;
  padding: 9px;
}
.qapi-email-settings-grid span,
.qapi-email-test-row label span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.qapi-email-settings-grid strong {
  display: block;
  margin-top: 4px;
  color: var(--fg);
  font-size: 12px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.qapi-email-env-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.qapi-email-env-list code {
  border: 1px solid var(--card-line);
  border-radius: 999px;
  background: #fff;
  color: var(--teal);
  font-size: 11px;
  padding: 4px 8px;
}
.qapi-email-test-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 8px;
  align-items: end;
  margin-top: 12px;
}
.qapi-email-test-row input {
  width: 100%;
  border: 1px solid var(--card-line);
  border-radius: 7px;
  background: #fff;
  color: var(--fg);
  font: inherit;
  font-size: 12.5px;
  padding: 8px 10px;
}
.qapi-empty-state-inline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 12px 14px;
  margin-bottom: 4px;
  border: 1px solid var(--card-line);
  border-radius: 10px;
  background: var(--surface-muted, rgba(0, 0, 0, 0.03));
}
.qapi-empty-state-inline h3 {
  margin: 0;
  font-size: 14px;
}
.qapi-empty-state-inline p {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
}
.qapi-owner-assignment-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--card-line);
}
.qapi-owner-assignment-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(320px, 1.2fr);
  gap: 16px;
  align-items: center;
  border-bottom: 1px solid var(--card-line);
  padding: 14px 0;
}
.qapi-owner-assignment-main span,
.qapi-owner-assignment-controls label span {
  display: block;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.qapi-owner-assignment-main strong {
  display: block;
  margin-top: 3px;
  color: var(--fg);
  font-size: 14px;
  line-height: 1.3;
}
.qapi-owner-assignment-main p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.qapi-owner-assignment-controls {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  gap: 8px;
  align-items: end;
}
.qapi-owner-assignment-controls input {
  width: 100%;
  border: 1px solid var(--card-line);
  border-radius: 7px;
  background: #fff;
  color: var(--fg);
  font: inherit;
  font-size: 12.5px;
  padding: 8px 10px;
}
.qapi-combo {
  position: relative;
  width: 100%;
}
.qapi-combo-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--card-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14);
  padding: 4px;
}
.qapi-combo-option {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 9px;
  border-radius: 6px;
  cursor: pointer;
}
.qapi-combo-option:hover {
  background: #f1f5f9;
}
.qapi-combo-option-name {
  color: var(--fg);
  font-size: 13px;
  font-weight: 600;
}
.qapi-combo-option-meta {
  color: var(--muted);
  font-size: 11.5px;
}
.qapi-combo-empty {
  padding: 9px 10px;
  color: var(--muted);
  font-size: 12px;
}
.qapi-combo-add {
  margin-top: 2px;
  padding: 8px 10px;
  border-top: 1px solid var(--card-line);
  border-radius: 0 0 6px 6px;
  color: var(--accent, #0f766e);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.qapi-combo-add:hover {
  background: #f0fdfa;
}
.qapi-worksheet-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.qapi-worksheet-summary span {
  border: 1px solid var(--card-line);
  border-radius: 999px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 9px;
}
.qapi-worksheet-table-wrap {
  border: 1px solid #1f2937;
  border-radius: 3px;
  background: #fff;
  overflow-x: auto;
}
.qapi-worksheet-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
  color: var(--fg);
  font-size: 12px;
}
.qapi-worksheet-table th,
.qapi-worksheet-table td {
  border: 1px solid #1f2937;
  padding: 0;
  text-align: left;
  vertical-align: top;
}
.qapi-worksheet-table thead th {
  background: #f8fafc;
  color: #111827;
  font-size: 12px;
  font-style: italic;
  font-weight: 800;
  padding: 8px 10px;
  text-align: center;
}
.qapi-worksheet-table thead th:nth-child(1) { width: 29%; }
.qapi-worksheet-table thead th:nth-child(2) { width: 22%; }
.qapi-worksheet-table thead th:nth-child(3) { width: 22%; }
.qapi-worksheet-table thead th:nth-child(4) { width: 27%; }
.qapi-worksheet-table-compact {
  min-width: 980px;
  font-size: 11.5px;
}
.qapi-worksheet-section-row th {
  background: #fff34d;
  padding: 0;
}
.qapi-worksheet-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
}
.qapi-worksheet-section-head strong {
  display: block;
  color: #111827;
  font-size: 14px;
  line-height: 1.2;
}
.qapi-worksheet-section-head span {
  color: #334155;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.qapi-worksheet-section-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.qapi-worksheet-section-meta span,
.qapi-worksheet-section-meta .badge {
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(17,24,39,0.28);
  border-radius: 999px;
  color: #1f2937;
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0;
  padding: 3px 7px;
  text-transform: none;
}
.qapi-agenda-cell {
  background: #fff;
  padding: 8px 10px;
}
.qapi-agenda-cell strong {
  display: block;
  color: #111827;
  font-size: 13px;
  line-height: 1.25;
}
.qapi-agenda-cell span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.qapi-findings-cell {
  background: #fff;
}
.qapi-metric-cell {
  background: #fff;
  padding: 8px;
}
.qapi-metric-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.qapi-metric-fields label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.qapi-metric-fields input {
  display: block;
  width: 100%;
  min-width: 0;
  margin-top: 4px;
  border: 1px solid var(--card-line);
  border-radius: 5px;
  background: #fff;
  color: #111827;
  font: inherit;
  font-size: 11.5px;
  padding: 7px 8px;
}
.qapi-score-chip {
  display: inline-flex;
  align-items: center;
  margin-top: 7px;
  border: 1px solid var(--card-line);
  border-radius: 999px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 8px;
}
.qapi-score-chip.is-low {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}
.qapi-score-chip.is-gap {
  border-color: #fde68a;
  background: #fffbeb;
  color: #92400e;
}
.qapi-score-chip.is-medium {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #9a3412;
}
.qapi-score-chip.is-high {
  border-color: #fecaca;
  background: #fff1f2;
  color: #991b1b;
}
.qapi-finding-options {
  display: grid;
}
.qapi-finding-options label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  border-bottom: 1px solid #1f2937;
  color: #111827;
  font-size: 11px;
  line-height: 1.2;
  padding: 6px 8px;
}
.qapi-finding-options label:last-child { border-bottom: 0; }
.qapi-finding-options input {
  appearance: none;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border: 2px solid #111827;
  border-radius: 2px;
  background: #fff;
}
.qapi-finding-options input:checked {
  background:
    linear-gradient(45deg, transparent 42%, #111827 42%, #111827 58%, transparent 58%),
    linear-gradient(-45deg, transparent 44%, #111827 44%, #111827 60%, transparent 60%),
    #fff;
}
.qapi-comments-cell {
  background: #eef2ff;
}
.qapi-worksheet-section:nth-of-type(even) .qapi-comments-cell {
  background: #e5e9f6;
}
.qapi-comments-cell textarea {
  display: block;
  width: 100%;
  min-height: 100px;
  border: 0;
  background: transparent;
  color: #111827;
  font: inherit;
  line-height: 1.35;
  padding: 8px 9px;
  resize: vertical;
}
.qapi-comments-cell textarea:focus,
.qapi-finding-options input:focus {
  outline: 2px solid rgba(13, 148, 136, 0.36);
  outline-offset: -2px;
}
.qapi-worksheet-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
}
.qapi-worksheet-summary.compact {
  margin: 8px 0;
}
.qapi-worksheet-summary.compact span {
  font-size: 10.5px;
  padding: 3px 7px;
}
.qapi-meeting-dept-worksheet {
  border-top: 1px solid var(--card-line);
  margin-top: 12px;
  padding-top: 12px;
}
.qapi-meeting-dept-worksheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.qapi-meeting-dept-worksheet-head span {
  display: block;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.qapi-meeting-dept-worksheet-head strong {
  display: block;
  margin-top: 2px;
  color: var(--fg);
  font-size: 13px;
}
.qapi-meeting-dept-worksheet-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.qapi-no-pip {
  color: var(--muted);
  font-size: 12px;
}
.qapi-additional-pips td:first-child span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}
.qapi-support-drawer {
  border: 1px solid var(--card-line);
  border-radius: var(--r-md);
  background: #fff;
  padding: 12px 14px;
}
.qapi-support-drawer > summary {
  cursor: pointer;
  color: var(--teal);
  font-size: 13px;
  font-weight: 800;
}
.qapi-support-drawer-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 12px;
}
.qapi-data-engine-card { display: flex; flex-direction: column; gap: 16px; }
.qapi-engine-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr);
  gap: 14px;
}
.qapi-engine-grid h3,
.qapi-analysis-layout h3 {
  margin: 0 0 8px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg);
}
.qapi-source-list { display: flex; flex-direction: column; gap: 8px; }
.qapi-source-row {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 9px;
  align-items: start;
  border: 1px solid var(--card-line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}
.qapi-source-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 4px;
  background: var(--muted-2);
}
.qapi-source-row.is-live .qapi-source-dot { background: var(--ok); }
.qapi-source-row.is-needs-work .qapi-source-dot,
.qapi-source-row.is-stale .qapi-source-dot { background: var(--warn); }
.qapi-source-row.is-missing .qapi-source-dot { background: var(--danger); }
.qapi-source-row strong { display: block; font-size: 13px; color: var(--fg); }
.qapi-source-row p { margin: 2px 0 0; font-size: 12px; color: var(--muted); line-height: 1.4; }
.qapi-command-card { display: flex; flex-direction: column; gap: 16px; }
.qapi-command-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.qapi-command-stat {
  border: 1px solid var(--card-line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}
.qapi-command-stat strong {
  display: block;
  color: var(--teal);
  font-size: 24px;
  line-height: 1;
}
.qapi-command-stat span {
  display: block;
  margin-top: 5px;
  color: var(--fg);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.qapi-command-stat p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.qapi-command-work {
  display: grid;
  grid-template-columns: minmax(360px, 1.5fr) minmax(220px, 0.7fr);
  gap: 14px;
}
.qapi-command-work h3 {
  margin: 0 0 8px;
  color: var(--fg);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.qapi-command-table-wrap { overflow-x: auto; }
.qapi-command-work td span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.qapi-evidence-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.qapi-evidence-list li {
  border: 1px solid var(--card-line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}
.qapi-evidence-list strong {
  display: block;
  color: var(--fg);
  font-size: 13px;
}
.qapi-evidence-list span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}
.qapi-analysis-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}
.qapi-analysis-stats > div {
  border: 1px solid var(--card-line);
  border-radius: 8px;
  background: #fffdf8;
  padding: 10px;
}
.qapi-analysis-stats strong {
  display: block;
  color: var(--teal);
  font-size: 22px;
  line-height: 1;
}
.qapi-analysis-stats span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}
.qapi-repeat-tags,
.qapi-signal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.qapi-repeat-tag {
  display: inline-flex;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  background: #fff7ed;
  color: #9a3412;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 700;
}
.qapi-analysis-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.85fr) minmax(360px, 1.15fr);
  gap: 14px;
}
.qapi-recommendation-list { display: flex; flex-direction: column; gap: 10px; }
.qapi-recommendation {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: start;
  border: 1px solid var(--card-line);
  border-left-width: 4px;
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}
.qapi-recommendation.is-high { border-left-color: var(--danger); }
.qapi-recommendation.is-medium { border-left-color: var(--warn); }
.qapi-recommendation.is-low { border-left-color: var(--ok); }
.qapi-priority {
  display: inline-flex;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.qapi-recommendation h3 {
  margin: 0 0 4px;
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
}
.qapi-recommendation p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.qapi-rec-action { margin-top: 6px !important; color: var(--fg-soft) !important; font-weight: 700; }
.qapi-section-signal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
.qapi-section-signal {
  border: 1px solid var(--card-line);
  border-top-width: 4px;
  border-radius: 8px;
  background: #fff;
  padding: 11px;
}
.qapi-section-signal.is-high { border-top-color: var(--danger); }
.qapi-section-signal.is-medium { border-top-color: var(--warn); }
.qapi-section-signal.is-low { border-top-color: var(--ok); }
.qapi-section-signal-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
}
.qapi-section-signal-head strong { display: block; font-size: 13px; color: var(--fg); }
.qapi-risk-score {
  min-width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--muted-surface);
  color: var(--teal);
  font-weight: 800;
  font-size: 13px;
}
.qapi-section-signal p { margin: 8px 0 0; font-size: 12px; color: var(--muted); line-height: 1.45; }
.qapi-section-signal ul { margin: 6px 0 0; padding-left: 18px; font-size: 12px; color: var(--fg-soft); }
.qapi-indicator-empty {
  border: 1px dashed var(--card-line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}
.qapi-indicator-empty.is-error {
  border-color: #fecaca;
  background: #fff7f7;
}
.qapi-indicator-empty strong {
  display: block;
  color: var(--fg);
  font-size: 13px;
}
.qapi-indicator-empty p { margin: 4px 0 0; }
.qapi-indicator-form {
  border: 1px solid var(--card-line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.qapi-indicator-form-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--card-line);
  background: #fbfaf7;
}
.qapi-indicator-form-head h3 {
  margin: 0 0 2px;
  font-size: 14px;
}
.qapi-indicator-table-wrap {
  max-height: 360px;
  overflow: auto;
}
.qapi-indicator-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 12px;
}
.qapi-indicator-table th,
.qapi-indicator-table td {
  border-bottom: 1px solid var(--card-line);
  padding: 9px;
  text-align: left;
  vertical-align: top;
}
.qapi-indicator-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafc;
  color: var(--muted);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.qapi-indicator-table td:first-child {
  min-width: 230px;
}
.qapi-indicator-table td:first-child strong {
  display: block;
  color: var(--fg);
  font-size: 12.5px;
}
.qapi-indicator-table td:first-child span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}
.qapi-indicator-table input {
  width: 100%;
  min-width: 86px;
  border: 1px solid var(--card-line);
  border-radius: 6px;
  padding: 7px 8px;
  font: inherit;
}
.qapi-indicator-table input[type="text"] {
  min-width: 190px;
}
@media (max-width: 980px) {
  .qapi-engine-grid,
  .qapi-analysis-layout,
  .qapi-command-work { grid-template-columns: 1fr; }
  .qapi-analysis-stats { grid-template-columns: repeat(2, minmax(110px, 1fr)); }
  .qapi-indicator-form-head { align-items: flex-start; flex-direction: column; }
  .qapi-current-dept-summary { flex-direction: column; }
  .qapi-current-dept-toolbar { align-items: flex-start; flex-direction: column; }
  .qapi-email-settings-head { align-items: flex-start; flex-direction: column; }
  .qapi-email-settings-grid { grid-template-columns: 1fr; }
  .qapi-email-test-row { grid-template-columns: 1fr; }
  .qapi-settings-intro { align-items: flex-start; flex-direction: column; }
  .qapi-owner-assignment-row { grid-template-columns: 1fr; }
  .qapi-owner-assignment-controls { grid-template-columns: 1fr; }
  .qapi-worksheet-section-head { align-items: flex-start; flex-direction: column; }
  .qapi-worksheet-section-meta { justify-content: flex-start; }
  .qapi-meeting-dept-worksheet-head { flex-direction: column; }
  .qapi-metric-fields { grid-template-columns: 1fr; }
}

@media print {
  .sidebar,
  .topbar,
  .help-fab,
  .qapi-current-dept-toolbar .button,
  .qapi-worksheet-actions,
  .qapi-meeting-dept-worksheet-head .button,
  .sub-tabs {
    display: none !important;
  }
  .app-root {
    padding: 0 !important;
  }
  .card,
  .qapi-current-dept-panel {
    box-shadow: none !important;
    break-inside: avoid;
  }
  .qapi-current-dept-panel {
    margin-bottom: 12px;
  }
  .qapi-worksheet-table-wrap {
    overflow: visible;
  }
}

/* ---- Modern PIP cards ---- */
.pip-modern-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.pip-modern-card {
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--r-md);
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.pip-modern-card:hover { border-color: var(--teal); box-shadow: 0 1px 0 rgba(15,60,71,0.04); }
.pip-modern-tag-row { display: flex; gap: 6px; align-items: center; }
.pip-tag-chip {
  background: var(--teal); color: var(--teal-on);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  padding: 3px 7px; border-radius: 4px;
}
.pip-status-chip {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em;
  padding: 2px 7px; border-radius: 3px; text-transform: uppercase;
}
.pip-status-chip.is-active { background: var(--gold-soft); color: var(--warn); border: 1px solid #f0d28a; }
.pip-status-chip.is-other { background: #eee; color: var(--muted); }
.pip-modern-title { font-family: var(--font-display); font-size: 16px; margin: 0; font-weight: 400; color: var(--fg); line-height: 1.25; }
.pip-modern-problem { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0; }
.pip-modern-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 10px 0;
  border-top: 1px solid var(--card-line);
  border-bottom: 1px solid var(--card-line);
}
.pip-modern-stats > div { display: flex; flex-direction: column; gap: 1px; align-items: center; }
.ps-num { font-family: var(--font-display); font-size: 18px; color: var(--teal); }
.ps-lbl { font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 500; }

/* ---- PIP detail (modal) — tabs ---- */
.pip-detail { display: flex; flex-direction: column; gap: 14px; max-height: 78vh; min-width: 0; }
.pip-detail-head h2 { font-family: var(--font-display); font-size: 20px; margin: 4px 0; font-weight: 400; }
.qapi-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.qapi-detail-head > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}
.qapi-detail-title {
  width: 100%;
  min-height: 68px;
  border: 0;
  border-bottom: 1px solid #e5e7eb;
  padding: 4px 0 8px;
  margin: 0 0 8px;
  background: transparent;
  color: var(--fg);
  font-family: inherit;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.22;
  resize: vertical;
}
.pip-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--card-line); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pip-tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 0.12s, border-color 0.12s;
}
.pip-tab:hover { color: var(--fg); }
.pip-tab.is-active { color: var(--teal); border-bottom-color: var(--gold); }
.pip-tab-bodies { flex: 1; overflow-y: auto; padding: 4px 2px; }
.pip-tab-body { display: block; }
.pip-tab-body.hidden { display: none; }
.pip-section { margin-bottom: 18px; }
.pip-section h4 { font-family: var(--font-display); font-size: 13.5px; margin: 0 0 6px; font-weight: 500; color: var(--fg); text-transform: uppercase; letter-spacing: 0.05em; }
.pip-section p { font-size: 13px; color: var(--fg); line-height: 1.55; margin: 0 0 6px; }
.qapi-jargon-hint { font-size: 10.5px; font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--muted); }
.qapi-audit-headline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.qapi-audit-score {
  min-width: 88px;
  border: 1px solid var(--card-line);
  border-radius: 6px;
  padding: 8px 10px;
  text-align: center;
  background: #fffdf7;
}
.qapi-audit-score strong { display: block; font-size: 22px; line-height: 1; color: var(--teal); }
.qapi-audit-score span { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); }
.qapi-template-builder {
  border: 1px solid var(--card-line);
  border-radius: 8px;
  background: #fbfaf7;
  padding: 12px;
  margin: 10px 0 12px;
}
.qapi-template-builder-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.qapi-template-builder-head h4 { margin: 0 0 4px; }
.qapi-template-pill,
.qapi-audit-type {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border: 1px solid #d9e4e2;
  border-radius: 999px;
  background: #eef7f5;
  color: var(--teal);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  white-space: nowrap;
}
.qapi-template-fields {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) minmax(160px, 0.9fr);
  gap: 8px;
}
.qapi-template-fields label,
.pdsa-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}
.qapi-template-fields label:first-child,
.qapi-template-fields label:nth-child(4) {
  grid-row: span 2;
}
.qapi-template-fields label:last-child { grid-column: 1 / -1; }
.qapi-template-fields input,
.qapi-template-fields textarea,
.pdsa-form input,
.pdsa-form select,
.pdsa-form textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--card-line);
  border-radius: 6px;
  padding: 8px 9px;
  font-size: 13px;
  font-family: inherit;
  color: var(--fg);
  background: #fff;
}
.qapi-template-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.qapi-audit-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
  margin: 10px 0 12px;
}
.qapi-audit-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  flex: 1 1 160px;
  min-width: 140px;
}
.qapi-audit-toolbar input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--card-line);
  border-radius: 6px;
  padding: 8px 9px;
  font-size: 13px;
  color: var(--fg);
  background: #fff;
}
.qapi-audit-toolbar .button { flex: 0 0 auto; }
/* Spreadsheet-style checklist: one compact row per audit item instead of a stacked card. */
.qapi-template-collapse { margin: 10px 0 12px; }
.qapi-template-collapse > summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--teal);
  padding: 6px 0;
}
.qapi-template-collapse[open] > summary { margin-bottom: 6px; }
.qapi-audit-table { border: 1px solid var(--card-line); border-radius: 8px; overflow-x: auto; background: #fff; }
.qapi-audit-list { display: flex; flex-direction: column; }
.qapi-audit-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1.6fr) 118px 132px minmax(0, 1fr) minmax(0, 1fr) 32px;
  gap: 8px;
  align-items: center;
  padding: 7px 10px;
  border-top: 1px solid var(--card-line);
}
.qapi-audit-list .qapi-audit-row:first-child { border-top: none; }
.qapi-week-readonly {
  margin: 0 0 10px;
  padding: 8px 12px;
  border: 1px solid #f0d28a;
  border-radius: 8px;
  background: var(--gold-soft, #fdf6e3);
  color: #8a5b04;
  font-size: 12.5px;
}
/* Spot-check audit sheet — the digital Excel audit tool */
.qapi-sheet-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-bottom: 10px; }
.qapi-sheet-toolbar label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; font-weight: 600; color: var(--muted);
  flex: 1 1 170px; min-width: 150px;
}
.qapi-sheet-toolbar input {
  border: 1px solid var(--card-line); border-radius: 6px;
  padding: 8px 9px; font-size: 13px; color: var(--fg); background: #fff;
}
.qapi-sheet-score {
  margin-left: auto; text-align: center;
  border: 1px solid var(--card-line); border-radius: 8px;
  padding: 8px 16px; background: #fff;
}
.qapi-sheet-score strong { display: block; font-size: 20px; line-height: 1.1; color: var(--teal); }
.qapi-sheet-score span { font-size: 11px; color: var(--muted); }
.qapi-sheet-scroll { overflow-x: auto; border: 1px solid var(--card-line); border-radius: 8px; background: #fff; }
.qapi-sheet-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 13px; }
.qapi-sheet-table thead th {
  background: var(--muted-surface); color: var(--muted);
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--card-line);
  max-width: 150px;
}
.qapi-sheet-table td { padding: 6px 8px; border-top: 1px solid var(--card-line); vertical-align: middle; }
.qapi-sheet-table tbody tr:first-child td { border-top: none; }
.qapi-sheet-table input[type="text"] {
  width: 100%; min-width: 120px; border: 1px solid var(--card-line); border-radius: 6px;
  padding: 6px 8px; font-size: 13px; color: var(--fg); background: #fff;
}
.qapi-sheet-cell { text-align: center; white-space: nowrap; }
.qapi-pf {
  width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid var(--card-line); background: #fff;
  font-size: 15px; font-weight: 700; color: var(--muted);
  cursor: pointer; margin: 0 2px;
}
.qapi-pf:hover { border-color: var(--teal); }
.qapi-pf-pass.is-on { background: var(--ok-soft, #e7f3ee); border-color: #1f6a4f; color: #1f6a4f; }
.qapi-pf-fail.is-on { background: var(--danger-soft, #fbeaea); border-color: var(--danger, #c33035); color: var(--danger, #c33035); }
.qapi-pf[disabled] { opacity: 0.5; cursor: default; }
.qapi-sheet-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.qapi-sheet-scanbtn { cursor: pointer; display: inline-flex; align-items: center; }
.qapi-plan-ai-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  border: 1px solid #d9e4e2;
  border-left: 3px solid var(--teal);
  border-radius: 8px;
  background: #f6faf9;
  padding: 10px 14px;
  margin-bottom: 10px;
}
.qapi-plan-ai-bar strong { display: block; margin-bottom: 2px; color: var(--teal); }
.qapi-plan-ai-bar .button { flex: 0 0 auto; }
/* Weekly "POC promises" checklist on the QAPI home */
.qapi-poc-week-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.qapi-poc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--card-line);
  border-radius: 8px;
  margin-bottom: 8px;
  background: #fff;
}
.qapi-poc-row.is-due { border-left: 3px solid #d97706; background: #fffbf3; }
.qapi-poc-row.is-done { border-left: 3px solid #1f6a4f; }
.qapi-poc-mark {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-weight: 800;
}
.qapi-poc-row.is-done .qapi-poc-mark { background: var(--ok-soft, #e7f3ee); color: #1f6a4f; }
.qapi-poc-row.is-due .qapi-poc-mark { background: #fdf0d7; color: #8a5b04; }
.qapi-poc-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qapi-poc-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qapi-poc-banner {
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  border: 1px solid var(--card-line);
}
.qapi-poc-banner.is-due { border-color: #f0d28a; background: #fffbf3; color: #8a5b04; }
.qapi-poc-banner.is-done { border-color: #cde5db; background: #f3faf7; color: #1f6a4f; }
.qapi-poc-elements {
  border: 1px solid #d9e4e2;
  border-left: 3px solid var(--teal);
  border-radius: 8px;
  background: #f6faf9;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.qapi-poc-elements > summary { cursor: pointer; font-weight: 600; color: var(--teal); font-size: 13px; }
.qapi-poc-el { margin-top: 10px; }
.qapi-poc-el strong { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--teal); margin-bottom: 3px; }
.qapi-poc-el p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--fg-soft); white-space: pre-wrap; }
@media (max-width: 720px) {
  .qapi-poc-row { flex-wrap: wrap; }
  .qapi-poc-actions { width: 100%; justify-content: flex-end; }
}
.qapi-sheet-src .button { vertical-align: middle; }
.qapi-audit-row:hover { background: #f9fbfa; }
.qapi-audit-row-head {
  border-top: none;
  border-bottom: 1px solid var(--card-line);
  background: var(--muted-surface);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 10px;
}
.qapi-audit-row.is-generated { background: #fbfdfc; }
.qapi-audit-done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.qapi-audit-done input { width: 18px; height: 18px; accent-color: var(--teal); cursor: pointer; }
.qapi-audit-text { min-width: 0; cursor: default; }
.qapi-audit-title {
  font-size: 13px;
  line-height: 1.35;
  color: var(--fg);
}
.qapi-audit-meta { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qapi-audit-cell {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--card-line);
  border-radius: 6px;
  padding: 5px 7px;
  font-size: 12.5px;
  color: var(--fg);
  background: #fff;
}
.qapi-audit-cell-note {
  resize: none;
  min-height: 28px;
  line-height: 1.3;
  font-family: inherit;
  transition: min-height 0.12s ease;
}
.qapi-audit-cell-note:focus { min-height: 56px; resize: vertical; }
.qapi-audit-file-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--card-line);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  background: #fff;
}
.qapi-audit-file-btn:hover { background: #f6faf9; }
.qapi-audit-file-btn input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.qapi-proof-files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 10px 8px 42px;
  font-size: 12px;
  color: var(--muted);
}
.qapi-proof-files span,
.qapi-proof-chip {
  border: 1px solid #dbe4e5;
  border-radius: 999px;
  padding: 3px 7px;
  background: #f6faf9;
  color: var(--teal);
}
.qapi-proof-chip {
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}
.qapi-proof-chip:hover { background: #eef7f5; }
.qapi-audit-last {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}
.qapi-audit-ai { margin-top: 14px; border-top: 1px dashed var(--card-line); padding-top: 12px; }
.qapi-ai-insight {
  margin-top: 10px;
  border: 1px solid #d9e4e2;
  border-left: 3px solid var(--teal);
  border-radius: 8px;
  background: #f6faf9;
  padding: 12px 14px;
}
.qapi-ai-insight-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qapi-ai-insight-headline { margin: 0; font-size: 14px; font-weight: 600; color: var(--fg); }
.qapi-ai-insight-block { margin-top: 10px; }
.qapi-ai-insight-block strong { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--teal); margin-bottom: 4px; }
.qapi-ai-insight-block ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--fg-soft); line-height: 1.5; }
.qapi-ai-insight-block p { margin: 0; font-size: 13px; color: var(--fg-soft); line-height: 1.5; }
.qapi-ai-insight > .button { margin-top: 12px; }
.qapi-explain-box {
  border: 1px solid #d9e4e2;
  border-left: 3px solid var(--teal);
  border-radius: 8px;
  background: #f6faf9;
  padding: 10px 12px;
  margin: 8px 0 12px;
}
.qapi-explain-box strong {
  display: block;
  margin-bottom: 4px;
  color: var(--teal);
}
.qapi-explain-box p { margin: 0; color: var(--fg-soft); }
.qapi-run-chart-card {
  border: 1px solid var(--card-line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  margin-bottom: 12px;
}
.qapi-run-chart-svg {
  display: block;
  width: 100%;
  max-width: 620px;
  height: auto;
}
.qapi-run-chart-svg .axis {
  stroke: #cbd5d8;
  stroke-width: 1;
}
.qapi-run-chart-svg .threshold {
  stroke: #d18419;
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
}
.qapi-run-chart-svg polyline {
  fill: none;
  stroke: var(--teal);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.qapi-run-chart-svg circle {
  fill: var(--gold);
  stroke: #fff;
  stroke-width: 2;
}
.qapi-run-chart-svg text {
  fill: var(--muted);
  font-size: 12px;
}
.qapi-run-chart-summary {
  margin-top: 8px !important;
  color: var(--fg-soft) !important;
  font-weight: 600;
}
.qapi-pdsa-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
}
.qapi-pdsa-steps > div {
  border: 1px solid var(--card-line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}
.qapi-pdsa-steps strong {
  display: block;
  color: var(--teal);
  margin-bottom: 3px;
}
.qapi-pdsa-steps span {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}
.pdsa-form {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 12px;
}
.qapi-closure-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.qapi-closure-badge {
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.qapi-closure-badge.is-ready { background: #e6f7ec; color: #1f7a3a; }
.qapi-closure-badge.is-open { background: #fff4e5; color: #9a5b00; }
.qapi-closure-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qapi-closure-list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  border: 1px solid var(--card-line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}
.qapi-closure-list span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}
.qapi-closure-list .is-met span { background: #e6f7ec; color: #1f7a3a; }
.qapi-closure-list .is-open span { background: #fff4e5; color: #9a5b00; }
.qapi-closure-list strong { display: block; color: var(--fg); }
.qapi-closure-list p { margin: 3px 0 0; color: var(--muted); }
.qapi-closure-summary {
  border: 1px solid #d9e4e2;
  border-left: 3px solid var(--teal);
  border-radius: 8px;
  background: #f6faf9;
  padding: 12px;
  margin-bottom: 12px;
}
.qapi-closure-summary strong { color: var(--teal); }
.qapi-closure-summary ul {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--fg-soft);
  line-height: 1.45;
}
.root-cause-list { margin: 0; padding-left: 20px; font-size: 13px; color: var(--fg); line-height: 1.6; }
.root-cause-list li { margin-bottom: 3px; }
.row-actions { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.row-actions input { padding: 6px 8px; border: 1px solid var(--card-line); border-radius: 4px; font-size: 12.5px; }
.closure-list { list-style: none; padding: 0; margin: 0; }
.closure-list li { padding: 6px 0; font-size: 13px; }

/* ---- Heat map ---- */
.heat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.heat-cell {
  border: 1px solid rgba(195,48,53,0.3);
  border-radius: var(--r-md);
  padding: 12px;
  text-align: left;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 3px;
  transition: transform 0.12s;
}
.heat-cell:hover { transform: translateY(-1px); }
.heat-tag { font-family: var(--font-display); font-size: 15px; color: var(--danger); font-weight: 600; }
.heat-count { font-size: 12px; font-weight: 600; color: var(--fg); }
.heat-name { font-size: 11.5px; color: var(--muted); line-height: 1.3; }

/* ---- F-tag library rows ---- */
.ftag-table tr.ftag-row { cursor: pointer; transition: background 0.1s; }
.ftag-table tr.ftag-row:hover { background: var(--teal-soft); }
.link-text { color: var(--teal); font-weight: 500; font-size: 12.5px; display: inline-flex; align-items: center; gap: 4px; }
.link-button { background: transparent; border: 0; color: var(--teal); font-weight: 600; cursor: pointer; padding: 0; font-size: inherit; }
.link-button:hover { text-decoration: underline; }
.head-search {
  padding: 7px 12px;
  border: 1px solid var(--card-line);
  border-radius: 6px;
  font-size: 13px;
  width: 280px;
  max-width: 280px;
  background: var(--card);
}
.page-head .head-actions input.head-search { flex: 0 0 280px; }

/* Generic data table — used across rebuild routes */
table.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data-table thead th {
  text-align: left; font-weight: 600; color: var(--muted-2);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 8px 10px; border-bottom: 1px solid var(--card-line);
}
table.data-table tbody td {
  padding: 9px 10px; border-bottom: 1px solid #f2ece1; vertical-align: top;
  color: var(--fg);
}
table.data-table tbody tr:last-child td { border-bottom: none; }
table.data-table tbody tr:hover { background: var(--teal-soft); }

/* F-tag table column hygiene */
.ftag-table { table-layout: fixed; width: 100%; }
.ftag-table th, .ftag-table td { vertical-align: top; padding: 10px 12px; }
.ftag-table td.muted { color: var(--muted); }
.ftag-table .link-text { color: var(--teal); font-size: 12.5px; white-space: nowrap; }

/* ---- Alert card (Direct Supply reality) ---- */
.alert-card { background: #fdfbf6; border-left: 3px solid var(--gold); }

/* ---- Daily Brief font fix (admin-portal renderer) ---- */
.ai-brief-panel { padding: 16px 18px; }
.ai-brief-panel h3 { font-family: var(--font-display); font-size: 15px; font-weight: 400; margin: 0; }
.ai-brief-body { margin-top: 10px; }
.ai-brief-body .brief-loading { font-size: 13px; color: var(--muted); font-style: italic; }
.ai-brief-text {
  font-family: var(--font-body) !important;
  font-size: 13px;
  color: var(--fg);
  line-height: 1.6;
  white-space: pre-wrap;
  margin: 0;
  padding: 12px 14px;
  background: var(--muted-surface);
  border-radius: 8px;
  border-left: 3px solid var(--gold);
}

/* ---- Form stack (used in QAPI new-PIP modal) ---- */
.form-stack { display: flex; flex-direction: column; gap: 10px; }
.form-stack label { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.form-stack label input { padding: 8px 10px; border: 1px solid var(--card-line); border-radius: 6px; font-size: 13px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.import-result h3 { font-family: var(--font-display); font-size: 17px; margin: 4px 0 8px; font-weight: 400; }

/* ---- Badge tones used by rebuild ---- */
.badge-ok { background: var(--ok-soft); color: var(--ok); border: 1px solid #B7E4CB; }
.badge-warn { background: var(--warn-soft); color: var(--warn-ink); border: 1px solid #F5DE9A; }
.badge-danger { background: var(--danger-soft); color: var(--danger); border: 1px solid #F3C7C7; }
.badge-info { background: var(--teal-soft); color: var(--teal); border: 1px solid var(--teal-line); }
.badge { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 10px; }

/* ---- Make sure modal card never traps clicks (safety net) ---- */
.modal-card input,
.modal-card textarea,
.modal-card select,
.modal-card button { pointer-events: auto; }

/* Mobile: hide vertical text on hall audit columns */
@media (max-width: 720px) {
  .ha-table th.ha-col { writing-mode: horizontal-tb; transform: none; height: auto; }
  .upload-row { grid-template-columns: 1fr; }
  .week-cal { grid-template-columns: repeat(7, minmax(80px, 1fr)); overflow-x: auto; }
  .qapi-audit-headline { grid-template-columns: 1fr; display: grid; }
  .qapi-audit-score { width: 100%; }
  .qapi-audit-toolbar .button { width: 100%; }
  .qapi-audit-row { min-width: 720px; }
}

/* ============================================================
   QAPI ENGINE — sub-tabs, glance cards, packet preview
   ============================================================ */
.sub-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 20px;
  padding: 4px;
  background: var(--surface-sunken, #f3f1ec);
  border-radius: 10px;
  width: fit-content;
}
.sub-tab {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 7px;
  text-decoration: none;
  color: var(--text-muted, #6b6760);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.15s;
  background: transparent;
}
.sub-tab:hover { color: var(--text, #2a2823); background: rgba(0,0,0,0.04); }
.sub-tab.is-active {
  background: var(--surface, #fff);
  color: var(--text, #2a2823);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* QAPI glance grid */
.qapi-glance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.qapi-glance-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e8e4dc);
  border-radius: 12px;
  text-decoration: none;
  color: var(--text, #2a2823);
  transition: all 0.15s;
}
.qapi-glance-card:not(.is-static):hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  border-color: var(--accent, #C4492A);
}
.qapi-glance-card .qg-eyebrow {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, #6b6760);
  font-weight: 600;
}
.qapi-glance-card .qg-num {
  font-size: 32px;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  line-height: 1;
}
.qapi-glance-card .qg-lbl { color: var(--text-muted, #6b6760); font-size: 13px; }
.qapi-glance-card .qg-cta {
  margin-top: 4px;
  color: var(--accent-strong, #b8870c);
  font-size: 13px;
  font-weight: 500;
}
.qapi-glance-card.is-static { background: var(--surface-sunken, #faf8f3); }

/* QAPI flow steps */
.qapi-flow {
  margin: 8px 0 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--text, #2a2823);
}
.qapi-flow li { line-height: 1.55; }

/* Progress mini bar */
.progress-mini {
  width: 120px;
  height: 6px;
  background: var(--surface-sunken, #f3f1ec);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}
.progress-mini-fill {
  height: 100%;
  background: var(--accent, #C4492A);
  transition: width 0.3s ease;
}

/* QAPI packet preview */
.qapi-packet-preview {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
.packet-section {
  border: 1px solid var(--border, #e8e4dc);
  border-radius: 10px;
  padding: 16px;
  background: var(--surface, #fff);
}
.packet-section.is-submitted {
  border-color: #c8e6c9;
  background: linear-gradient(to bottom right, #f7fbf7, #fff);
}
.packet-section.is-pending { background: var(--surface-sunken, #faf8f3); }
.packet-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border, #e8e4dc);
}
.packet-section-head h3 { margin: 2px 0; font-size: 17px; }
.packet-section-head .eyebrow {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted, #6b6760);
  font-weight: 600;
}
.packet-content {
  line-height: 1.55;
  white-space: pre-wrap;
  font-size: 14px;
}
.packet-auto ul {
  margin: 8px 0;
  padding-left: 18px;
  font-size: 13px;
}
.packet-auto li { margin: 3px 0; color: var(--text-muted, #6b6760); }

/* Section title in admin table */
.section-title { font-weight: 600; }

/* Row layout helpers used in QAPI */
.row-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.row-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 8px 0;
}
textarea.full {
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border, #e8e4dc);
  resize: vertical;
  line-height: 1.5;
}
textarea.full:focus {
  outline: none;
  border-color: var(--accent, #C4492A);
  box-shadow: 0 0 0 3px rgba(251, 189, 18, 0.12);
}

/* QAPI auto list */
.qapi-auto-list {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.6;
}
.qapi-auto-list li { color: var(--text, #2a2823); margin: 4px 0; }

/* Badges - additional variants */
.badge-danger {
  background: #fdecec;
  color: #b3261e;
  border-color: #f5c6c6;
}
.badge-muted {
  background: var(--surface-sunken, #f3f1ec);
  color: var(--text-muted, #6b6760);
  border-color: var(--border, #e8e4dc);
}

/* Print-friendly export */
@media print {
  .sidebar, .facility-tabs, .page-head .head-actions, .sub-tabs,
  .row-actions, .button { display: none !important; }
  .main, .shell { overflow: visible !important; height: auto !important; }
  .card { break-inside: avoid; page-break-inside: avoid; }
}

/* ============================================================
   Financials module
   ============================================================ */
.fin-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e8e4dc);
  border-radius: 12px;
  margin-bottom: 16px;
}
.fin-filters { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.fin-filters label { display: flex; flex-direction: column; font-size: 11px; color: var(--text-muted, #6b6760); font-weight: 500; gap: 4px; }
.fin-filters select { padding: 7px 10px; border: 1px solid var(--border, #e8e4dc); border-radius: 8px; background: #fff; font-size: 13px; min-width: 180px; }
.fin-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.fin-tab {
  padding: 8px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-muted, #6b6760);
  font-weight: 500;
  transition: all 0.15s;
}
.fin-tab:hover { background: var(--surface-sunken, #f5f3ee); color: var(--text, #28251d); }
.fin-tab.is-active {
  background: var(--surface-sunken, #f5f3ee);
  border-color: var(--border, #e8e4dc);
  color: var(--text, #28251d);
}

.fin-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.fin-tile {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e8e4dc);
  border-radius: 12px;
  padding: 16px 18px;
}
.fin-tile-label { font-size: 11px; text-transform: uppercase; color: var(--text-muted, #6b6760); letter-spacing: 0.05em; font-weight: 600; }
.fin-tile-value {
  font-size: 26px;
  font-weight: 700;
  margin-top: 6px;
  color: var(--text, #28251d);
  font-variant-numeric: tabular-nums;
}
.fin-tile-sub { font-size: 12px; margin-top: 4px; }

.fin-fac-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.fin-fac-chip {
  border: 1px solid var(--border, #e8e4dc);
  background: #fff;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: #3d3a35;
}
.fin-fac-chip.is-active { background: var(--teal); border-color: var(--teal); color: var(--teal-on); }
.fin-wd-fresh {
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #f1f7f3;
  border: 1px solid #cfe0d6;
  font-size: 13px;
  font-weight: 650;
  color: #1f5c45;
}
.fin-wd-fresh.is-preliminary {
  background: #fdf6e3;
  border-color: #ecd9a0;
  color: #7a5a00;
}

.delta-pos { color: #437A22; font-weight: 600; }
.delta-neg { color: #A12C7B; font-weight: 600; }
.delta-flat { color: var(--text-muted, #6b6760); }

.fin-chart-wrap { position: relative; height: 320px; padding: 8px 0; }

.fin-tbl { font-size: 13px; }
.fin-tbl th, .fin-tbl td { vertical-align: top; }
.fin-tbl td.num, .fin-tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.fin-tbl .small { font-size: 11px; }
.fin-tbl .muted { color: var(--text-muted, #6b6760); }

.fin-bar { background: var(--surface-sunken, #f5f3ee); height: 6px; border-radius: 3px; overflow: hidden; min-width: 80px; }
.fin-bar-fill { background: #20808D; height: 100%; border-radius: 3px; }

/* ============================================================
   Financials v2 — new component styles
   ============================================================ */

/* Insights panel */
.fin-insights-panel {
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--r-lg);
  padding: 12px 16px;
  margin-bottom: 16px;
}
.fin-insights-toggle { cursor: pointer; }
.fin-insight-card[data-severity="high"] { border-left-color: #c33035 !important; }
.fin-insight-card[data-severity="med"]  { border-left-color: #d18419 !important; }
.fin-insight-card[data-severity="low"]  { border-left-color: #2e7d5f !important; }

/* Drill drawer — non-modal docked side panel (report stays visible & interactive) */
.fin-drill-drawer { position: fixed; inset: 0; z-index: 1200; pointer-events: none; }
/* No page dimming: the overlay is inert so the report behind stays fully visible. */
.fin-drawer-overlay { display: none; }
.fin-drawer-panel {
  position: fixed; right: 0; top: var(--topbar-h); bottom: 0;
  width: 560px; max-width: 96vw;
  background: var(--card-2);
  border-left: 1px solid var(--card-line);
  box-shadow: -4px 0 32px rgba(15,39,45,0.12);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  pointer-events: all;
  z-index: 1200;
}
.fin-drill-drawer.is-open .fin-drawer-panel { transform: translateX(0); }
/* When the panel is docked, shift the page so it isn't covered. */
body.fin-drawer-docked { padding-right: 560px; transition: padding-right 0.25s ease; }
@media (max-width: 1100px) {
  body.fin-drawer-docked { padding-right: 0; }
  .fin-drawer-panel { box-shadow: -8px 0 48px rgba(15,39,45,0.22); }
}
.fin-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--card-line);
  flex-shrink: 0;
}
.fin-drawer-close {
  background: none; border: none; font-size: 22px; cursor: pointer;
  color: var(--muted); padding: 0 4px; line-height: 1;
}
.fin-drawer-body {
  flex: 1; overflow-y: auto; padding: 16px 20px;
}

/* AI Chat panel */
.fin-chat-panel {
  position: fixed; right: 0; bottom: 0; top: var(--topbar-h);
  width: 360px;
  background: var(--card-2);
  border-left: 1px solid var(--card-line);
  box-shadow: -4px 0 20px rgba(15,39,45,0.08);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  z-index: 900;
}
.fin-chat-panel.is-open { transform: translateX(0); }
.fin-chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--card-line);
  flex-shrink: 0;
}
.fin-chat-toggle { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--muted); }
.fin-chat-messages {
  flex: 1; overflow-y: auto; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.fin-chat-bubble {
  padding: 8px 12px; border-radius: 8px;
  font-size: 12.5px; line-height: 1.5;
  max-width: 90%;
}
.fin-chat-user {
  background: var(--teal); color: var(--teal-on);
  align-self: flex-end;
  border-radius: 8px 8px 2px 8px;
}
.fin-chat-ai {
  background: var(--muted-surface);
  align-self: flex-start;
  border-radius: 8px 8px 8px 2px;
}
.fin-chat-suggestions { display: flex; flex-direction: column; gap: 6px; }
.fin-chat-sugg {
  background: none; border: 1px solid var(--card-line);
  border-radius: 6px; padding: 6px 10px;
  font-size: 12px; cursor: pointer; text-align: left;
  color: var(--teal);
  transition: background 0.15s;
}
.fin-chat-sugg:hover { background: var(--muted-surface); }
.fin-chat-input-row {
  display: flex; gap: 8px; padding: 10px 12px;
  border-top: 1px solid var(--card-line); flex-shrink: 0;
}
.fin-chat-input {
  flex: 1; padding: 8px 10px;
  border: 1px solid var(--input-line); border-radius: 6px;
  font-size: 13px; font-family: var(--font-sans);
}
.fin-chat-send {
  background: var(--teal); color: var(--teal-on);
  border: none; border-radius: 6px; padding: 8px 14px;
  font-size: 13px; cursor: pointer;
}
.fin-chat-fab {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--teal); color: var(--teal-on);
  border: none; border-radius: 24px; padding: 10px 18px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  box-shadow: var(--shadow-lg); z-index: 899;
  display: flex; align-items: center; gap: 6px;
  transition: transform 0.15s;
}
.fin-chat-fab:hover { transform: translateY(-2px); }

/* Sortable table */
.fin-table-sortable-wrap { }
.fin-table-sortable-scroll { overflow-x: auto; }
.fin-table-sortable { width: 100%; border-collapse: collapse; }
.fin-table-sortable thead th { position: sticky; top: 0; background: var(--card); z-index: 1; }
.fin-st-th:hover { background: var(--muted-surface) !important; }
.fin-table-totals {
  font-weight: 700;
  border-top: 2px solid var(--line);
}
.fin-totals-row td { font-weight: 700; border-top: 2px solid var(--line); padding-top: 8px !important; }
.fin-search-bar {
  font-family: var(--font-sans);
}
.fin-col-filter-input { font-family: var(--font-sans); }
.fin-filter-row td { background: var(--muted-surface); }

/* KPI Tiles v2 */
.fin-tile-clickable { cursor: pointer; transition: box-shadow 0.15s, transform 0.1s; }
.fin-tile-clickable:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.fin-tile-census { background: linear-gradient(135deg, #f7f5f1, #e6f2f3) !important; }

/* Unit economics */
.fin-unit-econ-grid { font-size: 12px; }

/* Correlation heatmap */
.fin-correlation-heatmap { overflow-x: auto; }

/* Upload zone */
.fin-upload-zone {
  border: 2px dashed var(--line);
  border-radius: var(--r-lg);
  padding: 32px;
  text-align: center;
  transition: border-color 0.2s, background 0.2s;
  margin-bottom: 16px;
}
.fin-upload-zone.drag-over {
  border-color: var(--teal);
  background: var(--muted-surface);
}

/* Variance table */
.fin-var-row:hover { background: var(--muted-surface); }

/* Delta */
.delta-pos { color: #2e7d5f; }
.delta-neg { color: #c33035; }
.delta-flat { color: var(--muted); }

/* ---- QAPI Engine — AI Systemic Suggestions ---- */
.qapi-systemic-panel {
  background: linear-gradient(135deg, #f4f9f7 0%, #f7f4ef 100%);
  border: 1px solid #d8e6e0;
  border-left: 4px solid #0f766e;
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 20px;
}
.qapi-systemic-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.qapi-systemic-head h3 {
  margin: 0 0 2px;
  font-size: 1.05rem;
  color: #0f766e;
}
.qapi-systemic-head p { margin: 0; }
.qapi-systemic-head-actions { display: flex; gap: 6px; }
.qapi-systemic-headline {
  font-size: 0.98rem;
  font-weight: 600;
  margin: 6px 0 4px;
  color: var(--text, #1f2a37);
}
.qapi-systemic-loading {
  display: flex; align-items: center; gap: 10px;
  padding: 14px; color: #555;
}
.qapi-systemic-loading .spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid #cbd5e1; border-top-color: #0f766e;
  animation: qapi-spin 0.8s linear infinite;
  display: inline-block;
}
@keyframes qapi-spin { to { transform: rotate(360deg); } }
.qapi-systemic-error {
  background: #fef2f2; border: 1px solid #fecaca;
  padding: 10px 12px; border-radius: 8px; color: #991b1b;
}
.qapi-systemic-error p { margin: 0 0 6px; }
.systemic-issue-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px; margin-top: 10px;
}
.systemic-issue-card {
  background: #fff; border: 1px solid #e5ebe9; border-left: 3px solid #0f766e;
  border-radius: 10px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.systemic-issue-card.priority-high { border-left-color: #c33035; }
.systemic-issue-card.priority-medium { border-left-color: #d97706; }
.systemic-issue-card.priority-low { border-left-color: #6b7280; }
.systemic-issue-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
}
.systemic-issue-head h4 {
  margin: 0; font-size: 0.98rem; line-height: 1.3; color: #1f2a37;
}
.systemic-priority {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 999px; background: #f1f5f4; color: #4b5563;
  white-space: nowrap; flex-shrink: 0;
}
.priority-high .systemic-priority { background: #fee2e2; color: #991b1b; }
.priority-medium .systemic-priority { background: #fef3c7; color: #92400e; }
.priority-low .systemic-priority { background: #f3f4f6; color: #4b5563; }
.systemic-issue-meta {
  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center;
  font-size: 0.78rem;
}
.systemic-ftag {
  background: #eef2ff; color: #3730a3;
  padding: 1px 6px; border-radius: 4px; font-weight: 600;
  font-size: 0.72rem; margin-right: 4px;
}
.trend-escalating { color: #c33035 !important; }
.trend-improving { color: #2e7d5f !important; }
.trend-stable { color: #6b7280 !important; }
.systemic-rootcause, .systemic-focus {
  font-size: 0.85rem; line-height: 1.4; margin: 0; color: #374151;
}
.systemic-rootcause strong, .systemic-focus strong { color: #0f766e; }
.systemic-samples summary {
  cursor: pointer; font-size: 0.82rem; color: #0f766e; font-weight: 500;
}
.systemic-samples ul {
  margin: 6px 0 0 18px; padding: 0; font-size: 0.82rem; color: #4b5563;
}
.systemic-samples li { margin-bottom: 4px; }
.systemic-actions {
  margin-top: 4px; display: flex; justify-content: flex-end;
}
.qapi-quick-wins {
  margin-top: 14px; background: #fff; border: 1px solid #e5ebe9;
  border-radius: 8px; padding: 8px 12px;
}
.qapi-quick-wins summary {
  cursor: pointer; font-weight: 600; color: #0f766e;
}
.qapi-quick-wins ul {
  margin: 8px 0 0 18px; padding: 0; font-size: 0.88rem;
}
.qapi-quick-wins li { margin-bottom: 4px; color: #374151; }

/* ---- QAPI Engine v2 — rebuild.js port additions ---- */
.systemic-issue-title {
  margin: 0; font-size: 1.0rem; line-height: 1.3; color: #1f2a37;
}
.priority-chip {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 999px; background: #f1f5f4; color: #4b5563;
  white-space: nowrap; font-weight: 600;
}
.priority-high .priority-chip { background: #fee2e2; color: #991b1b; }
.priority-medium .priority-chip { background: #fef3c7; color: #92400e; }
.priority-low .priority-chip { background: #f3f4f6; color: #4b5563; }
.trend-chip {
  font-size: 0.72rem; padding: 2px 8px; border-radius: 999px;
  background: #f1f5f9; color: #475569; font-weight: 600;
}
.trend-chip.trend-escalating { background: #fee2e2; color: #b91c1c; }
.trend-chip.trend-improving { background: #dcfce7; color: #15803d; }
.trend-chip.trend-stable, .trend-chip.trend-flat { background: #f1f5f9; color: #475569; }
.ftag-chip-row { display: flex; flex-wrap: wrap; gap: 4px; }
.ftag-chip {
  background: #eef2ff; color: #3730a3;
  padding: 1px 6px; border-radius: 4px; font-weight: 600;
  font-size: 0.72rem;
}
.systemic-root, .systemic-focus {
  font-size: 0.85rem; line-height: 1.4; margin: 0; color: #374151;
}
.systemic-root strong, .systemic-focus strong { color: #0f766e; }
.systemic-observations summary {
  cursor: pointer; font-size: 0.82rem; color: #0f766e; font-weight: 500;
}
.systemic-observations ul {
  margin: 6px 0 0 18px; padding: 0; font-size: 0.82rem; color: #4b5563;
}
.systemic-observations li { margin-bottom: 4px; }
.systemic-issue-actions {
  margin-top: 4px; display: flex; justify-content: flex-end;
}
.systemic-exec-summary {
  background: #fff; border: 1px solid #e5ebe9;
  border-left: 3px solid #0f766e;
  border-radius: 8px; padding: 10px 14px;
  margin: 8px 0 4px; font-size: 0.92rem; line-height: 1.5; color: #1f2a37;
}
.systemic-exec-summary strong { color: #0f766e; }

/* QAPI PIP edit modal */
.qapi-pip-edit-form { display: flex; flex-direction: column; gap: 12px; }
.qapi-pip-edit-form label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.82rem; font-weight: 600; color: #374151;
}
.qapi-pip-edit-form label input,
.qapi-pip-edit-form label textarea,
.qapi-pip-edit-form label select {
  font-weight: 400; font-size: 0.92rem;
  padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 6px;
  font-family: inherit;
}
.qapi-pip-edit-form textarea { resize: vertical; min-height: 60px; }
.form-row-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.qapi-iv-list { display: flex; flex-direction: column; gap: 6px; }
.qapi-iv-row {
  display: grid;
  grid-template-columns: minmax(260px, 2fr) minmax(140px, 1fr) minmax(130px, 160px) 36px;
  gap: 6px; align-items: center;
}
.qapi-iv-row input, .qapi-iv-row select, .qapi-iv-row textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 5px;
  font-size: 0.88rem; font-family: inherit;
}
.qapi-iv-row textarea {
  min-height: 42px;
  line-height: 1.35;
  resize: vertical;
}
.qapi-iv-row button {
  min-width: 32px;
  min-height: 34px;
}

@media (max-width: 720px) {
  .modal-head {
    padding: 14px 14px 10px;
  }
  .modal-head h3 {
    font-size: 16px;
  }
  .modal-body {
    padding: 16px 14px;
  }
  .pip-detail {
    max-height: none;
  }
  .qapi-detail-head {
    display: block;
  }
  .qapi-detail-title {
    min-height: 78px;
    font-size: 20px;
    line-height: 1.25;
  }
  .qapi-detail-head > .row-inline {
    display: flex;
    width: 100%;
    margin-top: 8px;
  }
  .qapi-detail-head > .row-inline .button {
    flex: 1 1 130px;
  }
  .qapi-template-builder-head,
  .qapi-closure-head {
    display: block;
  }
  .qapi-template-pill,
  .qapi-closure-badge {
    margin-top: 8px;
  }
  .qapi-template-fields {
    grid-template-columns: 1fr;
  }
  .qapi-template-fields label:first-child,
  .qapi-template-fields label:nth-child(4) {
    grid-row: auto;
  }
  .qapi-pdsa-steps {
    grid-template-columns: 1fr;
  }
  .qapi-closure-list li {
    grid-template-columns: 30px minmax(0, 1fr);
  }
  .form-row-2 {
    grid-template-columns: 1fr;
  }
  .pip-tabs {
    flex-wrap: wrap;
    margin: 0 -2px;
    padding-bottom: 2px;
    overflow-x: visible;
  }
  .pip-tab {
    flex: 1 1 96px;
    min-width: 96px;
    padding: 9px 12px;
    text-align: center;
    white-space: nowrap;
  }
  .qapi-iv-list {
    gap: 10px;
  }
  .qapi-iv-row {
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 7px;
    align-items: stretch;
    padding: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
  }
  .qapi-iv-row .qapi-iv-label,
  .qapi-iv-row .qapi-detail-iv-label,
  .qapi-iv-row .qapi-iv-owner,
  .qapi-iv-row .qapi-detail-iv-owner {
    grid-column: 1 / -1;
  }
  .qapi-iv-row .qapi-iv-label,
  .qapi-iv-row .qapi-detail-iv-label {
    min-height: 96px;
  }
  .qapi-iv-row .qapi-iv-status,
  .qapi-iv-row .qapi-detail-iv-status {
    grid-column: 1;
  }
  .qapi-iv-row button {
    grid-column: 2;
    width: 100%;
    height: 100%;
  }
}

/* AI Draft / Locked badges on PIP cards */
.pip-modern-card.is-locked {
  background: #fafaf6; border-color: #d4d4aa;
}
.pip-modern-tag-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ============================================================
   Dashboard v3 — Simplified KPI view (mobile-first, polished)
   ============================================================ */

/* Section eyebrows */
.dash-section-eyebrow {
  font-size: 11px; text-transform: uppercase; letter-spacing: .8px;
  color: #64748b; font-weight: 700;
}
.dash-section-hint {
  font-size: 11px; color: #94a3b8; font-weight: 500;
}

/* Upload reminders strip — compact rows on mobile, grid on desktop */
.dash-upload-strip {
  background: #fff;
  border: 1px solid #e2e8f0; border-radius: 14px;
  padding: 14px; margin: 12px 0 18px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.dash-upload-strip-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 10px; padding: 0 2px;
}
.dash-upload-grid {
  display: grid; gap: 8px;
  grid-template-columns: 1fr; /* mobile: stacked rows */
}
@media (min-width: 640px) { .dash-upload-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .dash-upload-grid { grid-template-columns: repeat(4, 1fr); } }

.dash-up {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 10px 12px; border: 1px solid #e2e8f0;
  background: #fff; border-radius: 10px; cursor: pointer;
  text-align: left; transition: all .15s ease;
  font-family: inherit;
}
.dash-up:hover, .dash-up:active {
  border-color: #94a3b8; background: #f8fafc;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(15,23,42,.06);
}
.dash-up-icon {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
}
.dash-up-icon svg { width: 18px; height: 18px; }
.dash-up-body { flex: 1; min-width: 0; }
.dash-up-label {
  font-size: 14px; font-weight: 700; color: #0f172a; line-height: 1.2;
}
.dash-up-sub {
  font-size: 11.5px; color: #64748b; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-up-status {
  flex-shrink: 0; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px;
  padding: 4px 8px; border-radius: 999px; line-height: 1;
}
.dash-up-green { background: #dcfce7; color: #15803d; }
.dash-up-amber { background: #fef3c7; color: #b45309; }
.dash-up-red   { background: #fee2e2; color: #b91c1c; }

/* CEO daily action recommendation */
.dash-today-move {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: #fff;
  border: 1px solid #e2e8f0; border-left: 4px solid #2563eb; border-radius: 14px;
  padding: 16px 18px; margin: 0 0 18px;
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
}
.dash-today-move[data-tone="red"] { border-left-color: #dc2626; }
.dash-today-move[data-tone="amber"] { border-left-color: #d97706; }
.dash-today-move[data-tone="green"] { border-left-color: #16a34a; }
.dash-today-main { min-width: 0; }
.dash-today-main h2 {
  margin: 4px 0 6px; color: #0f172a; font-size: 20px; line-height: 1.15;
  letter-spacing: 0; font-weight: 800;
}
.dash-today-main p {
  margin: 0; color: #334155; font-size: 14px; line-height: 1.45;
}
.dash-today-why {
  margin-top: 8px; color: #64748b; font-size: 12px; line-height: 1.35;
}
.dash-today-btn {
  flex: 0 0 auto; white-space: nowrap;
}
@media (max-width: 720px) {
  .dash-today-move { align-items: stretch; flex-direction: column; gap: 12px; }
  .dash-today-btn { width: 100%; }
  .dash-today-main h2 { font-size: 18px; }
}

/* Survey launch guide */
.dash-survey-guide {
  margin: 14px 0 16px;
  background: #fff;
  border: 1px solid #dbeafe;
  border-left: 4px solid #2563eb;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}
.dash-survey-guide-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.dash-survey-guide-head h2 {
  margin: 3px 0 5px;
  font-size: 20px;
  line-height: 1.2;
  color: #0f172a;
}
.dash-survey-guide-head p {
  margin: 0;
  max-width: 780px;
  color: #475569;
  font-size: 13.5px;
  line-height: 1.5;
}
.dash-survey-guide-grid {
  display: grid;
  gap: 10px;
}
@media (min-width: 860px) {
  .dash-survey-guide-grid { grid-template-columns: repeat(4, 1fr); }
}
.dash-survey-step {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-align: left;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
  min-height: 132px;
}
.dash-survey-step:hover,
.dash-survey-step:focus-visible {
  background: #eff6ff;
  border-color: #93c5fd;
  transform: translateY(-1px);
}
.dash-survey-step-num {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #1d4ed8;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
.dash-survey-step-body {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.dash-survey-step-body strong {
  color: #0f172a;
  font-size: 13.5px;
  line-height: 1.25;
}
.dash-survey-step-body span {
  color: #475569;
  font-size: 12.5px;
  line-height: 1.4;
}
.dash-survey-step-body em {
  color: #1d4ed8;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}
@media (max-width: 720px) {
  .dash-survey-guide-head { flex-direction: column; }
  .dash-survey-guide-head .button { width: 100%; }
  .dash-survey-step { min-height: 0; }
}

/* KPI tiles grid */
.dash-grid {
  display: grid; gap: 12px;
  grid-template-columns: 1fr; /* mobile: 1 col */
  margin-top: 4px;
}
@media (min-width: 720px) { .dash-grid { grid-template-columns: 1fr 1fr; gap: 16px; } }

.dash-tile {
  position: relative;
  background: #fff;
  border: 1px solid #e2e8f0; border-radius: 14px;
  padding: 16px 16px 12px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
  overflow: hidden;
}
.dash-tile.dash-skel { padding: 14px; }
.dash-tile-accent {
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
}
.dash-tile-payroll    .dash-tile-accent { background: linear-gradient(90deg, #16a34a, #22c55e); }
.dash-tile-financials .dash-tile-accent { background: linear-gradient(90deg, #db2777, #ec4899); }
.dash-tile-hr         .dash-tile-accent { background: linear-gradient(90deg, #2563eb, #3b82f6); }
.dash-tile-clinical   .dash-tile-accent { background: linear-gradient(90deg, #0891b2, #06b6d4); }

.dash-tile-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  margin-top: 4px;
}
.dash-tile-head h3 {
  margin: 0; font-size: 13px; color: #475569; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px;
}
.dash-tile-period {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px;
  color: #94a3b8; font-weight: 600;
}
.dash-tile-stat {
  font-size: 34px; font-weight: 800; color: #0f172a; line-height: 1;
  letter-spacing: -.02em;
  padding: 2px 0;
}
.dash-tile-stat .dash-empty-stat { color: #cbd5e1; }
.dash-tile-footer {
  font-size: 12.5px; color: #475569; line-height: 1.4;
}
.dash-muted { color: #94a3b8; font-size: 12px; }
.dash-trend { font-weight: 700; }
.dash-trend.is-up { color: #16a34a; }
.dash-trend.is-down { color: #dc2626; }
.is-up { color: #16a34a; }
.is-down { color: #dc2626; }

/* Financials & Clinical 3-stat rows */
.dash-fin-row, .dash-clin-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.dash-fin-row > div, .dash-clin-row > div {
  display: flex; flex-direction: column; gap: 2px;
  background: #f8fafc; border-radius: 8px; padding: 8px 10px;
}
.dash-fin-lbl {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px;
  color: #64748b; font-weight: 700;
}
.dash-fin-val {
  font-size: 17px; font-weight: 800; color: #0f172a;
  letter-spacing: -.01em; line-height: 1.1;
}
.dash-clin-sub { font-size: 10px; color: #94a3b8; font-weight: 500; }

/* AI commentary block */
.dash-ai-block {
  background: linear-gradient(135deg, #fdf2f8 0%, #fff 100%);
  border: 1px solid #fbcfe8; border-left: 3px solid #db2777;
  border-radius: 8px; padding: 10px 12px; font-size: 12.5px; color: #1e293b;
}
.dash-ai-head {
  font-weight: 700; color: #9d174d; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px;
}
.dash-ai-body ul { margin: 2px 0 0 14px; padding: 0; }
.dash-ai-body li { margin: 3px 0; line-height: 1.45; }
.dash-ai-loading { color: #94a3b8; font-style: italic; font-size: 12px; }

/* Toggle button */
.dash-tile-toggle {
  background: transparent; border: 0;
  margin-top: 4px; padding: 8px 0 2px;
  cursor: pointer; color: #2563eb; font-size: 12px;
  font-weight: 700; text-align: left;
  border-top: 1px solid #f1f5f9;
}
.dash-tile-toggle:hover { color: #1d4ed8; }

/* Expand area */
.dash-tile-expand {
  margin-top: 8px; padding-top: 10px;
  border-top: 1px dashed #e2e8f0;
}
.dash-fac-block { margin-bottom: 14px; }
.dash-fac-block:last-child { margin-bottom: 0; }
.dash-fac-head {
  font-size: 12px; font-weight: 700; color: #334155;
  padding: 6px 0; margin-bottom: 4px;
}

.tbl-compact { width: 100%; border-collapse: collapse; font-size: 12px; }
.tbl-compact th {
  font-size: 10px; text-transform: uppercase; letter-spacing: .4px;
  padding: 6px 8px; text-align: left; color: #64748b;
  border-bottom: 1px solid #e2e8f0; background: #f8fafc;
}
.tbl-compact td {
  padding: 7px 8px; border-bottom: 1px solid #f1f5f9;
  color: #334155;
}
.tbl-compact tr:last-child td { border-bottom: 0; }

/* HR progress bar */
.dash-pct-bar {
  position: relative; background: #f1f5f9; border-radius: 4px;
  height: 18px; min-width: 100px;
}
.dash-pct-fill {
  background: linear-gradient(90deg, #2563eb, #3b82f6);
  height: 100%; border-radius: 4px; transition: width .3s ease;
}
.dash-pct-bar span {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; color: #0f172a;
}

/* Skeleton loader */
.skel {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%; border-radius: 6px;
  animation: dash-skel-pulse 1.4s ease-in-out infinite;
}
@keyframes dash-skel-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Mobile: tighter tile padding */
@media (max-width: 540px) {
  .dash-tile { padding: 14px 14px 10px; }
  .dash-tile-stat { font-size: 28px; }
  .dash-fin-val { font-size: 15px; }
}

/* ============================================================
   CUBE UPLOAD PAGE (v3)
   ============================================================ */
.cube-up-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 20px; margin: 16px 0;
  box-shadow: 0 1px 3px rgba(15,23,42,.04);
}
.cube-up-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 10px;
  border: 2px dashed #fcd34d; border-radius: 10px;
  background: #fffbeb;
  padding: 32px 16px;
  transition: background .15s ease, border-color .15s ease;
}
.cube-up-drop.is-drag { background: #fef3c7; border-color: #f59e0b; }
.cube-up-title { font-size: 16px; font-weight: 700; color: #78350f; }
.cube-up-sub { font-size: 13px; color: #57534e; max-width: 460px; line-height: 1.5; }
.cube-up-drop .btn-primary {
  margin-top: 4px; background: #b45309; color: #fff; border: none;
  padding: 8px 18px; border-radius: 6px; font-weight: 600; cursor: pointer;
}
.cube-up-drop .btn-primary:hover { background: #92400e; }
.cube-up-status { margin-top: 14px; font-size: 13px; }
.cube-up-ok { color: #166534; }
.cube-up-notes { margin: 6px 0 0; padding-left: 20px; font-size: 12px; color: #57534e; }

/* Structured clinical meeting trackers */
.agenda-row-structured {
  display: block;
  padding: 12px 0;
}
.structured-agenda-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.structured-table-wrap {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.structured-agenda-table {
  min-width: 880px;
}
.structured-agenda-table th {
  white-space: nowrap;
}
.structured-agenda-table td {
  vertical-align: top;
}
.structured-agenda-table .meeting-input {
  width: 100%;
  min-width: 120px;
}

.cube-snap-card, .cube-snap-block {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 14px 16px; margin: 12px 0;
}
.cube-snap-head {
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: #64748b; font-weight: 700; margin-bottom: 8px;
}
.cube-snap-big {
  font-size: 28px; font-weight: 700; color: #0f172a;
  margin-bottom: 10px;
}
.cube-snap-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-bottom: 6px;
}
.cube-snap-grid > div { display: flex; flex-direction: column; gap: 2px; }
.cube-snap-grid .muted { font-size: 11px; }
.cube-snap-grid strong { font-size: 16px; }
@media (max-width: 560px) {
  .cube-snap-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================ */
/* QAPI PIP monitoring — create form, monthly grid, status board, print */
/* ============================================================ */

/* ---- Create form ---- */
.qapi-create-card { max-width: 820px; }
.qapi-create-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
}
.qapi-create-grid label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 0.85rem; color: #374151; }
.qapi-create-grid input, .qapi-create-grid select { font-weight: 400; }
.qapi-create-check { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9rem; }
.qapi-create-check input { width: auto; }
.qapi-audit-picker { display: flex; flex-direction: column; gap: 4px; }
.qapi-audit-picker.hidden { display: none; }
.qapi-create-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
@media (max-width: 640px) {
  .qapi-create-grid { grid-template-columns: 1fr; }
}

/* ---- Monthly grid (spreadsheet) ---- */
.qapi-grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.qapi-grid-table { border-collapse: collapse; width: 100%; min-width: 720px; font-size: 0.85rem; }
.qapi-grid-table th, .qapi-grid-table td { border: 1px solid #e2e8f0; padding: 6px 8px; text-align: center; }
.qapi-grid-table thead th { background: #f8fafc; font-weight: 600; color: #475569; white-space: nowrap; }
.qapi-grid-month.is-current { background: #eef6f5; color: #0f766e; }
.qapi-grid-name {
  position: sticky; left: 0; z-index: 2; background: #fff; text-align: left;
  min-width: 190px; box-shadow: 1px 0 0 #e2e8f0;
}
.qapi-grid-corner { z-index: 3; background: #f8fafc; }
.qapi-grid-pip-title { display: block; font-weight: 600; color: #1f2a37; }
.qapi-grid-pip-metric { display: block; }
.qapi-grid-empty { text-align: left; color: #64748b; font-style: italic; }
.qapi-grid-cell { cursor: pointer; min-width: 60px; position: relative; }
.qapi-grid-cell:focus { outline: 2px solid #0f766e; outline-offset: -2px; }
.qapi-grid-cell.is-green { background: #dcfce7; color: #14532d; }
.qapi-grid-cell.is-amber { background: #fef3c7; color: #78350f; }
.qapi-grid-cell.is-red   { background: #fee2e2; color: #7f1d1d; }
.qapi-cell-src { font-size: 0.7rem; opacity: 0.6; margin-left: 2px; }
.qapi-cell-input { width: 100%; box-sizing: border-box; border: 1px solid #0f766e; border-radius: 3px; padding: 3px 4px; font-size: 0.85rem; text-align: center; }
.qapi-grid-legend { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.qapi-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; }
.qapi-swatch.is-green { background: #86efac; }
.qapi-swatch.is-amber { background: #fcd34d; }
.qapi-swatch.is-red   { background: #fca5a5; }

/* Grid mobile cards — hidden on wide screens */
.qapi-grid-cards { display: none; }
.qapi-grid-card { border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; margin-bottom: 10px; }
.qapi-grid-card-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.qapi-grid-card-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; font-weight: 600; color: #374151; }
.qapi-measure-input { padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 6px; }
.qapi-measure-input.is-green { border-color: #16a34a; background: #f0fdf4; }
.qapi-measure-input.is-amber { border-color: #d97706; background: #fffbeb; }
.qapi-measure-input.is-red   { border-color: #dc2626; background: #fef2f2; }
@media (max-width: 720px) {
  .qapi-grid-wrap { display: none; }
  .qapi-grid-cards { display: block; }
}

/* ---- Status board ---- */
.qapi-board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.qapi-board-card { border: 1px solid #e2e8f0; border-left: 4px solid #cbd5e1; border-radius: 10px; padding: 14px; background: #fff; }
.qapi-board-red   { border-left-color: #dc2626; }
.qapi-board-amber { border-left-color: #d97706; }
.qapi-board-green { border-left-color: #16a34a; }
.qapi-board-none  { border-left-color: #94a3b8; }
.qapi-board-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.qapi-board-head h3 { margin: 0 0 2px; font-size: 1rem; color: #1f2a37; }
.qapi-badge { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.qapi-badge.is-green { background: #dcfce7; color: #15803d; }
.qapi-badge.is-amber { background: #fef3c7; color: #92400e; }
.qapi-badge.is-red   { background: #fee2e2; color: #b91c1c; }
.qapi-badge.is-none  { background: #f1f5f9; color: #64748b; }
.qapi-board-nums { display: flex; gap: 14px; margin: 12px 0 8px; }
.qapi-board-nums > div { display: flex; flex-direction: column; }
.qb-lbl { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; color: #94a3b8; }
.qb-num { font-size: 1.15rem; font-weight: 700; color: #1f2a37; }
.qb-latest { color: #0f766e; }
.qapi-board-spark { margin: 4px 0; }
.qapi-board-foot { margin: 6px 0 10px; }
.qapi-board-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.button.tiny { font-size: 0.75rem; padding: 4px 10px; }

/* ---- Print one-pager ---- */
.qapi-print-root { display: none; }
.qapi-print-page { page-break-after: always; }
.qapi-print-page:last-child { page-break-after: auto; }
.qapi-print-head h1 { margin: 0; font-size: 1.4rem; }
.qapi-print-fac { margin: 2px 0 12px; font-size: 0.85rem; color: #333; }
.qapi-print-title { font-size: 1.15rem; margin: 0 0 10px; }
.qapi-print-status { font-size: 0.75rem; font-weight: 700; padding: 2px 8px; border-radius: 4px; border: 1px solid #000; }
.qapi-print-block { margin: 8px 0; }
.qapi-print-block h3 { margin: 0 0 2px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
.qapi-print-block p { margin: 0; font-size: 0.9rem; }
.qapi-print-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.qapi-print-metrics > div { display: flex; flex-direction: column; border: 1px solid #000; padding: 6px 8px; }
.qapi-print-metrics span { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; }
.qapi-print-metrics strong { font-size: 1rem; }
.qapi-print-chart { margin: 10px 0; }
.qapi-print-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.qapi-print-table th, .qapi-print-table td { border: 1px solid #000; padding: 4px 8px; font-size: 0.8rem; text-align: left; }

@media print {
  body.qapi-printing > *:not(#qapi-print-root) { display: none !important; }
  body.qapi-printing #qapi-print-root { display: block !important; }
  .qapi-print-root { color: #000; background: #fff; }
  .qapi-print-status { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ============================================================
   QAPI GUIDED SIMPLE FLOW — Home / New Fix / This Week / Advanced
   ============================================================ */
/* Calm, consistent building blocks for the guided flow.
   Colours derive from the app theme (warm cream / teal / gold) so the
   simple screens never clash with the rest of the product. */
.button-lg { font-size: 1.02rem; padding: 14px 26px; border-radius: var(--r); min-height: 48px; }
.qapi-simple-link { font-weight: 600; }

/* Working chip — never colour-only: an arrow AND a word, always. */
.qapi-work { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; font-weight: 700; white-space: nowrap; padding: 4px 12px; border-radius: 999px; text-transform: capitalize; letter-spacing: .01em; }
.qapi-work-better { background: var(--ok-soft); color: #1f6a4f; }
.qapi-work-worse { background: var(--danger-soft); color: var(--danger); }
.qapi-work-same { background: var(--gold-soft); color: #8a5b04; }
.qapi-work-none { background: var(--muted-surface); color: var(--muted); font-weight: 600; text-transform: none; }

/* Welcome — calm two-choice landing */
.qapi-welcome { display: flex; flex-direction: column; gap: 20px; max-width: 760px; margin: 20px auto 0; }
.qapi-welcome-card {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 10px;
  min-height: 160px; text-decoration: none; color: var(--fg);
  border: 1px solid var(--card-line); border-radius: var(--r-xl); padding: 32px 30px 32px 34px;
  background: var(--card-2); box-shadow: var(--shadow-sm);
  transition: box-shadow .15s ease, border-color .15s ease, transform .1s ease;
}
.qapi-welcome-card::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 5px;
  border-radius: 999px; background: var(--line);
}
.qapi-welcome-card:hover { border-color: var(--teal); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.qapi-welcome-card:focus-visible { outline: 3px solid var(--gold-line); outline-offset: 2px; }
.qapi-welcome-card:active { transform: translateY(0); }
.qapi-welcome-card-primary::before { background: var(--gold); }
.qapi-welcome-card-primary:hover { border-color: var(--gold-line); }
.qapi-welcome-card-alt { background: var(--card); }
.qapi-welcome-title { font-family: var(--font-display); font-weight: 400; font-size: 1.55rem; line-height: 1.2; color: var(--fg); }
.qapi-welcome-sub { font-size: 1.02rem; color: var(--muted); line-height: 1.45; }
.qapi-back-link { margin: 0 0 10px; }
@media (min-width: 720px) { .qapi-welcome { flex-direction: row; } .qapi-welcome-card { flex: 1; } }

/* Home — "What are we fixing?" */
.qapi-home-empty { text-align: center; padding: 40px 16px; }
.qapi-home-empty p { font-size: 1.05rem; margin-bottom: 18px; color: var(--muted); }
.qapi-fix-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.qapi-fix-card {
  display: block; text-decoration: none; color: var(--fg);
  border: 1px solid var(--card-line); border-radius: var(--r-lg); padding: 22px 22px;
  background: var(--card-2); box-shadow: var(--shadow-sm);
  transition: box-shadow .15s ease, border-color .15s ease, transform .1s ease;
}
.qapi-fix-card:hover { border-color: var(--teal); box-shadow: var(--shadow); transform: translateY(-1px); }
.qapi-fix-card:focus-visible { outline: 3px solid var(--gold-line); outline-offset: 2px; }
.qapi-fix-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.qapi-fix-card-head h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; line-height: 1.3; color: var(--fg); }
.qapi-fix-progress { margin-top: 18px; }
.qapi-fix-progress-bar { height: 10px; border-radius: 999px; background: var(--muted-surface); overflow: hidden; }
.qapi-fix-progress-bar span { display: block; height: 100%; border-radius: 999px; background: var(--ok); transition: width .2s ease; }
.qapi-fix-week { margin: 8px 0 0; font-size: 1rem; color: var(--fg-soft); }
.qapi-fix-week strong { font-size: 1.08rem; color: var(--fg); }
.qapi-advanced-link { text-align: center; margin: 28px 0 8px; }

/* New fix — guided 3 steps */
.qapi-newfix-card { max-width: 720px; }
.qapi-step { padding: 4px 0 26px; border-bottom: 1px solid var(--line-soft); margin-bottom: 22px; }
.qapi-step:last-of-type { border-bottom: none; padding-bottom: 8px; margin-bottom: 0; }
.qapi-step-title { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; color: var(--fg); margin: 0 0 16px; }
.qapi-step-num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; background: var(--teal); color: var(--teal-on); font-family: var(--font-sans); font-weight: 700; font-size: 1rem; }
.qapi-optional { font-size: 0.85rem; font-weight: 500; color: var(--muted-2); }
/* Bigger, calmer fields on the guided screens */
.qapi-newfix-card .form-stack label,
.qapi-week-card .form-stack label,
.qapi-week-edit .form-stack label { font-size: 1rem; color: var(--fg-soft); gap: 6px; }
.qapi-newfix-card input,
.qapi-newfix-card select,
.qapi-week-edit input {
  font-size: 1rem; min-height: 48px; padding: 12px 14px;
  border-radius: var(--r); border: 1px solid var(--input-line); background: var(--card-2);
}
.qapi-newfix-card input:focus,
.qapi-newfix-card select:focus,
.qapi-week-edit input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(15,60,71,.12); }
.qapi-action-lines { display: flex; flex-direction: column; gap: 14px; }
.qapi-action-line { display: flex; align-items: center; gap: 12px; }
.qapi-action-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; background: var(--gold-soft); color: #8a5b04; font-weight: 700; font-size: 0.9rem; }
.qapi-action-line input { flex: 1; }
.qapi-newfix-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.qapi-newfix-actions { margin-top: 24px; }

/* This Week */
.qapi-week-card { max-width: 760px; }
.qapi-week-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.qapi-week-now { font-weight: 700; color: var(--fg); }
.button-ghost.is-disabled { opacity: 0.4; pointer-events: none; }
.qapi-week-heading { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; color: var(--fg); margin: 24px 0 12px; }
.qapi-week-rows { display: flex; flex-direction: column; gap: 10px; }
.qapi-week-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border: 1px solid var(--card-line); border-radius: var(--r-lg); background: var(--card); }
.qapi-week-label { font-size: 1.02rem; color: var(--fg); line-height: 1.35; }
.qapi-week-toggle { display: inline-flex; gap: 8px; flex: 0 0 auto; }
.qapi-yn { min-width: 68px; min-height: 48px; border: 1.5px solid var(--input-line); background: var(--card-2); color: var(--fg); padding: 10px 22px; border-radius: var(--r); font-weight: 700; cursor: pointer; font-size: 1rem; transition: background .12s ease, border-color .12s ease, color .12s ease; }
.qapi-yn:hover:not(:disabled):not(.is-on) { border-color: var(--teal); }
.qapi-yn-yes.is-on { background: var(--ok); color: #fff; border-color: var(--ok); }
.qapi-yn-no.is-on { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.qapi-yn:disabled { opacity: 0.5; cursor: default; }
.qapi-week-number { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; padding: 16px; border: 1px solid var(--card-line); border-radius: var(--r-lg); background: var(--card); }
.qapi-week-num-input { max-width: 150px; min-height: 52px; font-size: 1.4rem; font-weight: 700; padding: 10px 14px; border-radius: var(--r); border: 1px solid var(--input-line); }
.qapi-week-num-input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(15,60,71,.12); }
.qapi-week-compare { display: flex; align-items: center; gap: 12px; padding-bottom: 8px; }
.qapi-week-actions { margin-top: 24px; display: flex; align-items: center; gap: 14px; }
.qapi-week-edit { margin-top: 18px; }
.qapi-week-edit summary { cursor: pointer; font-weight: 600; color: var(--teal); }

/* Advanced menu */
.qapi-adv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.qapi-adv-card { display: block; text-decoration: none; color: var(--fg); border: 1px solid var(--card-line); border-radius: var(--r-lg); padding: 18px 20px; background: var(--card-2); box-shadow: var(--shadow-sm); transition: border-color .15s ease, box-shadow .15s ease; }
.qapi-adv-card:hover { border-color: var(--teal); box-shadow: var(--shadow); }
.qapi-adv-card h3 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 400; font-size: 1.08rem; color: var(--fg); }

.qapi-print-actname { font-weight: 600; }

@media (max-width: 640px) {
  .qapi-newfix-grid { grid-template-columns: 1fr; }
  .qapi-week-row { flex-direction: column; align-items: stretch; }
  .qapi-week-toggle { justify-content: stretch; }
  .qapi-yn { flex: 1; }
}

/* ---- Collapsible HR report sections ---- */
.hr-report-sec { margin-top: 14px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; overflow: hidden; }
.hr-report-sec > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; font-size: 14px; font-weight: 700; color: #1f2937;
  background: #fafbfc;
}
.hr-report-sec > summary::-webkit-details-marker { display: none; }
.hr-report-sec > summary .hr-sec-caret {
  transition: transform .18s ease; color: #98a2b3; font-size: 12px; flex: 0 0 auto;
}
.hr-report-sec[open] > summary .hr-sec-caret { transform: rotate(90deg); }
.hr-report-sec > summary .hr-sec-title { flex: 1 1 auto; }
.hr-report-sec > summary .hr-sec-sub { font-weight: 400; color: #98a2b3; font-size: 12px; margin-left: 4px; }
.hr-report-sec > summary .hr-sec-actions { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }
.hr-report-sec .hr-sec-body { padding: 0 16px 16px; }
.hr-report-sec:not([open]) .hr-sec-body { display: none; }

/* Count badge on the section header */
.hr-sec-badge {
  flex: 0 0 auto; min-width: 22px; height: 22px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1;
}
.hr-sec-badge.is-issue { background: #e11d1d; color: #fff; }          /* red — needs attention */
.hr-sec-badge.is-neutral { background: #eef2f6; color: #475467; }      /* gray — informational */
.hr-sec-badge.is-clear { background: #e7f6ec; color: #1f7a3a; }        /* green — all clear */
.hr-sec-badge.is-loading { background: #eef2f6; color: #98a2b3; }

/* ---- Document coverage matrix (Reports → Document Coverage) ----
   Employees down the side, required document types across the top. Headers are
   rotated so ~20 document columns stay readable without a horizontal marathon. */
.hr-cov-wrap { overflow: auto; max-height: 620px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; }
.hr-cov-table { border-collapse: separate; border-spacing: 0; font-size: 12px; }
.hr-cov-table th, .hr-cov-table td { border-bottom: 1px solid #f0f0f0; }
.hr-cov-table thead th { position: sticky; top: 0; background: #f9fafb; z-index: 3; border-bottom: 1px solid #e5e7eb; }
.hr-cov-table th.hr-cov-name, .hr-cov-table td.hr-cov-name {
  position: sticky; left: 0; background: #fff; z-index: 2;
  text-align: left; padding: 8px 12px; min-width: 190px; box-shadow: 1px 0 0 #f0f0f0;
}
.hr-cov-table thead th.hr-cov-name { background: #f9fafb; z-index: 4; vertical-align: bottom; }
.hr-cov-table tfoot th.hr-cov-name { background: #f9fafb; }
.hr-cov-table th.hr-cov-score, .hr-cov-table td.hr-cov-score {
  padding: 8px 10px; text-align: right; white-space: nowrap; min-width: 74px;
}
.hr-cov-table thead th.hr-cov-score { vertical-align: bottom; }
.hr-cov-table th.hr-cov-col { height: 196px; padding: 6px 0 8px; vertical-align: bottom; min-width: 30px; }
.hr-cov-table th.hr-cov-col > span {
  writing-mode: vertical-rl; transform: rotate(180deg);
  display: inline-block; max-height: 182px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 11px; font-weight: 600; color: #475467;
}
.hr-cov-table th.hr-cov-col.is-rolescoped > span { color: #7a5b18; font-style: italic; }
.hr-cov-cell {
  text-align: center; padding: 8px 2px; font-size: 12px; font-weight: 800; line-height: 1;
}
.hr-cov-cell.is-ok { background: #eef8f1; color: #1f7a3a; }
.hr-cov-cell.is-warn { background: #fff5e6; color: #9a5b00; }
.hr-cov-cell.is-bad { background: #fdecea; color: #a01010; }
.hr-cov-cell.is-missing { background: #fff; color: #d0d5dd; }
.hr-cov-cell.is-extra { background: #fff; color: #98a2b3; font-weight: 500; }
.hr-cov-cell.is-na { background: #fbfbfc; color: #e4e7ec; }
.hr-cov-table tfoot td, .hr-cov-table tfoot th {
  position: sticky; bottom: 0; background: #f9fafb; z-index: 2;
  border-top: 2px solid #e5e7eb; font-size: 11px; text-align: center; padding: 8px 2px; font-weight: 700;
}
.hr-cov-table tfoot .hr-cov-den { color: #98a2b3; font-weight: 500; }
.hr-cov-empty-row { color: #a01010; font-size: 11px; font-weight: 700; }
.hr-cov-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0; font-size: 11px; color: #667085; }
.hr-cov-legend b { font-weight: 800; margin-right: 4px; }
.hr-cov-stats { display: flex; flex-wrap: wrap; gap: 18px; padding: 10px 0 12px; font-size: 13px; color: #475467; }
.hr-cov-stats strong { font-size: 18px; display: block; color: #101828; line-height: 1.2; }
.hr-cov-warn {
  border: 1px solid #f5c26b; background: #fffaf0; border-radius: 8px;
  padding: 12px 14px; margin: 0 0 12px; font-size: 12px; color: #7a5b18;
}
.hr-cov-warn ul { margin: 8px 0 0; padding-left: 18px; }
.hr-cov-warn li { margin: 3px 0; }

/* ============================================================
   Audit Capture (route #/audits) — mobile-first
   ============================================================ */
.audit-tabs { display: flex; gap: 8px; margin: 0 0 14px; }
.audit-tab {
  flex: 1; padding: 11px 14px; border: 1px solid var(--card-line);
  background: var(--card); border-radius: var(--r-md); font-weight: 600;
  font-size: 14px; color: var(--muted); cursor: pointer;
}
.audit-tab.active { background: var(--danger); color: #fff; border-color: var(--danger); }

.audit-summary {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  padding: 16px; margin-bottom: 14px; text-align: center;
}
.audit-summary > div { display: flex; flex-direction: column; gap: 2px; }
.audit-summary strong { font-size: 22px; font-family: var(--font-display); color: var(--fg); }
.audit-summary span { font-size: 11.5px; color: var(--muted); }
.audit-summary .audit-week strong { font-size: 14px; }

.audit-chip-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.chip {
  padding: 7px 13px; border-radius: 999px; border: 1px solid var(--card-line);
  background: var(--card); font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer;
}
.chip-active { background: var(--fg); color: #fff; border-color: var(--fg); }

.audit-list { display: flex; flex-direction: column; gap: 12px; }
.audit-card { padding: 16px; }
.audit-card.audit-overdue { border-left: 4px solid var(--danger); }
.audit-card.audit-submitted { border-left: 4px solid var(--ok); }
.audit-card.audit-owed { border-left: 4px solid var(--warn, #e0a53a); }
.audit-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.audit-card-head h3 { margin: 2px 0 0; font-size: 17px; }
.audit-card-meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 12px; font-size: 12.5px; color: var(--muted); }
.audit-photo-req { color: var(--danger); font-weight: 600; }
.audit-card-actions { display: flex; gap: 8px; }
.audit-card-actions .button { min-height: 44px; }

/* Tracker grid */
.audit-tracker-table td { text-align: center; padding: 6px; }
.audit-tracker-table td:first-child { text-align: left; }
.audit-cell {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--card-line);
  background: var(--muted-surface); font-weight: 700; cursor: default; color: var(--muted);
}
.audit-cell-submitted { background: var(--ok-soft); color: var(--ok); border-color: #c7e6d4; cursor: pointer; }
.audit-cell-overdue { background: var(--danger-soft); color: var(--danger); border-color: #f0c8c8; }
.audit-cell-owed { background: var(--card); color: #c9ccd1; }

@media (max-width: 720px) {
  .audit-summary { grid-template-columns: repeat(2, 1fr); }
  .audit-card-head h3 { font-size: 16px; }
  .audit-tracker-table { font-size: 12px; }
  .audit-cell { width: 28px; height: 28px; }
}

/* ============================================================
   Owner board (route #/board) — three rows, a colour, a sentence
   ============================================================ */
.board-list { display: flex; flex-direction: column; gap: 14px; }
.board-row { padding: 18px; border-left: 4px solid var(--card-line); }
.board-row.board-red   { border-left-color: var(--danger); }
.board-row.board-amber { border-left-color: var(--warn); }
.board-row.board-green { border-left-color: var(--ok); }
.board-row-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.board-row-head h3 { margin: 0; font-size: 19px; display: flex; align-items: center; gap: 8px; }
.board-row-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.board-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 14px 0 12px; }
.board-facts > div { display: flex; flex-direction: column; gap: 2px; }
.board-facts strong { font-family: var(--font-display); font-size: 21px; color: var(--fg); line-height: 1; }
.board-facts span { font-size: 11.5px; color: var(--muted); }
.board-say { margin: 0; padding: 12px 14px; border-radius: var(--r-sm); background: var(--muted-surface); font-size: 14.5px; line-height: 1.5; }
@media (max-width: 720px) {
  .board-facts { grid-template-columns: repeat(2, 1fr); }
  .board-row-head h3 { font-size: 17px; }
}

/* ============================================================
   F-Tag Knowledge Library (route #/knowledge)
   ------------------------------------------------------------
   knowledge-library.js shipped 2026-07-10 but never rendered: rebuild.js
   loaded later and re-registered the same two routes onto a plain static
   table. With that clobber removed the real screen paints, and these are the
   rules it always expected — without them 280 buttons and 17 category pills
   fall back to native OS chrome (outset borders, grey, square corners), which
   reads as broken next to the rest of the portal.
   Tokens only, so it follows both themes like everything else.
   ============================================================ */
.kn-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 0 14px;
}
.kn-search-wrap { flex: 1 1 240px; min-width: 200px; }
.kn-search-wrap input {
  width: 100%; padding: 8px 12px; font-size: 13.5px;
  border: 1px solid var(--card-line); border-radius: var(--r-sm);
  background: var(--card); color: var(--fg);
}
.kn-cat-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }

/* Category filter pills and the small inline actions share one resting style
   so the row reads as one control group rather than a mix of widgets. */
.cat-pill,
.button-mini {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 99px; cursor: pointer;
  background: var(--muted-surface); color: var(--fg);
  border: 1px solid transparent; line-height: 1.4;
}
.cat-pill:hover,
.button-mini:hover { border-color: var(--teal); color: var(--teal); }
.cat-pill[aria-pressed="true"],
.cat-pill.is-active { background: var(--teal); color: var(--teal-on); }

/* A citation reference inside prose — must not look clickable. */
.cite-pill {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 1px 6px; border-radius: 4px; margin: 0 2px;
  background: var(--muted-surface); color: var(--muted);
}

.tag-what { color: var(--fg); }
.tag-what strong { display: block; margin-bottom: 2px; }

/* The AI explanation panel, revealed under a tag row on demand. */
.ai-answer {
  margin-top: 8px; padding: 11px 13px; border-radius: var(--r-sm);
  background: var(--muted-surface); color: var(--fg);
  font-size: 13.5px; line-height: 1.5;
  border-left: 3px solid var(--teal);
}
@media (max-width: 640px) {
  .kn-toolbar { gap: 8px; }
  .kn-cat-nav { gap: 5px; }
  .cat-pill, .button-mini { font-size: 11.5px; padding: 4px 9px; }
}

/* ============================================================
   Operations — Housekeeping + Dietary boards
   ============================================================ */
.ops-toolbar,
.ops-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 14px;
}
.ops-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
  font-size: 12px;
  color: var(--muted);
}
.ops-field input,
.ops-field select,
.ops-field textarea { width: 100%; }
.ops-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--fg-soft);
  padding-bottom: 6px;
}
.ops-check input { width: auto; }
.ops-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.ops-summary-cell {
  background: var(--card-2);
  border: 1px solid var(--card-line);
  border-radius: var(--r);
  padding: 12px 14px;
}
.ops-summary-cell strong {
  display: block;
  font-size: 22px;
  line-height: 1.1;
  color: var(--fg);
}
.ops-summary-cell span {
  font-size: 12px;
  color: var(--muted);
}
.ops-tone-ok strong { color: var(--ok); }
.ops-tone-gold strong { color: #8a5b04; }
.ops-tone-info strong { color: var(--teal); }
.ops-tone-warn strong { color: var(--warn); }
.ops-tone-danger strong { color: var(--danger); }
.ops-hint {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 12px;
}
.ops-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.ops-card { padding: 14px 16px; }
.ops-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.ops-card-head h3 { margin: 2px 0 0; font-size: 16px; }
.ops-status-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.ops-status-btn {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
}
.ops-status-btn.is-active.is-done { background: var(--ok-soft); color: var(--ok); border-color: #c7e6d4; }
.ops-status-btn.is-active.is-in_progress { background: var(--coral-soft); color: var(--coral-ink); border-color: var(--coral-line); }
.ops-status-btn.is-active.is-pending { background: #e8eff3; color: var(--teal); border-color: #cfdfe6; }
.ops-status-btn.is-active.is-skipped { background: var(--warn-soft); color: var(--warn-ink); border-color: #F5DE9A; }
.ops-status-btn.is-active.is-issue { background: var(--danger-soft); color: var(--danger); border-color: #f0c8c8; }
.ops-exception {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--danger);
}
.ops-empty-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.ops-exception-form { display: grid; gap: 12px; }
.ops-unassigned { margin: 0; padding-left: 18px; }
.ops-unassigned li { margin: 4px 0; }
.table-wrap { overflow-x: auto; }
@media (max-width: 800px) {
  .ops-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ops-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops-field { min-width: 100%; }
}

/* ============================================================
   Staffing log (Operations → Staffing Log)
   Ported from the Ivy Staffing artifact. Do not put display:flex
   on th/td, and keep table-layout:fixed with a colgroup.
   ============================================================ */
.staff-root {
  --staff-accent: #2a78d6;
  --staff-over: #d03b3b;
  --staff-under: #0ca30c;
  --staff-warn: #eb6834;
  --staff-over-ink: #9c2020;
  --staff-under-ink: #086b08;
  --staff-warn-ink: #a8481a;
  --staff-chip: #e4ede7;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.staff-root .staff-draft {
  font-size: 13px;
  color: var(--muted);
}
.staff-root .staff-start {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 8px;
  padding: 18px 18px 16px;
}
.staff-root .staff-start h2 {
  margin: 0 0 6px;
  font-size: 20px;
  letter-spacing: -.02em;
}
.staff-root .staff-start p {
  margin: 0 0 12px;
  color: var(--fg-soft);
  font-size: 14.5px;
}
.staff-root .staff-start .button-primary {
  min-height: 42px;
  padding: 10px 18px;
  font-size: 15px;
}
.staff-root .staff-import {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.staff-root .staff-import .staff-hint {
  flex: 1 1 100%;
  margin: 0;
}
.staff-root.staff-empty-week #staff-weekwork { display: none; }
.staff-root .staff-need-csv {
  outline: 2px solid var(--staff-accent);
  outline-offset: 1px;
}
.staff-root .staff-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  justify-content: space-between;
}
.staff-root .staff-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
.staff-root .staff-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--line);
}
.staff-root .staff-tabs button {
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  padding: 10px 22px 9px;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}
.staff-root .staff-tabs button[aria-selected="true"] {
  color: var(--fg);
  border-bottom-color: var(--staff-accent);
}
.staff-root .staff-tabs button:focus-visible {
  outline: 2px solid var(--staff-accent);
  outline-offset: 2px;
}
.staff-root .staff-facfilter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.staff-root .staff-faclabel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.staff-root .staff-seg {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--card);
}
.staff-root .staff-seg button {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 13px;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}
.staff-root .staff-seg button[aria-selected="true"] {
  background: var(--fg);
  color: var(--card);
}
.staff-root .staff-seg .staff-facgap {
  width: 1px;
  align-self: stretch;
  background: var(--line);
  margin: 6px 2px;
}
.staff-root .staff-seg button.staff-all {
  font-weight: 500;
}
.staff-root .staff-seg button.staff-all[aria-selected="true"] {
  background: var(--muted-surface);
  color: var(--fg);
}
.staff-root .staff-wknav { display: flex; align-items: center; gap: 6px; }
.staff-root .staff-wknav .staff-lbl { font-weight: 600; font-size: 13.5px; min-width: 158px; text-align: center; }
.staff-root .staff-status { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.staff-root .staff-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--staff-under); flex: none; }
.staff-root .staff-dot.busy { background: var(--staff-warn); }
.staff-root .staff-dot.off { background: var(--muted); }
.staff-root .staff-dot.bad { background: var(--staff-over); }
.staff-root .staff-head {
  padding: 14px 16px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--card);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  align-items: center;
}
.staff-root .staff-head.over {
  background: color-mix(in srgb, var(--staff-over) 13%, var(--card));
  border-color: color-mix(in srgb, var(--staff-over) 45%, var(--line));
}
.staff-root .staff-head.ok {
  background: color-mix(in srgb, var(--staff-under) 13%, var(--card));
  border-color: color-mix(in srgb, var(--staff-under) 40%, var(--line));
}
.staff-root .staff-head .big {
  font-size: clamp(18px, 4.4vw, 24px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.25;
  flex: 1 1 280px;
}
.staff-root .staff-head .big em { font-style: normal; color: var(--staff-over-ink); }
.staff-root .staff-head .big i { font-style: normal; color: var(--staff-under-ink); }
.staff-root .staff-mini { display: flex; gap: 18px; flex-wrap: wrap; }
.staff-root .staff-mini div { display: flex; flex-direction: column; }
.staff-root .staff-mini .v { font-size: 19px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.staff-root .staff-mini .l { font-size: 11px; color: var(--muted); }
.staff-root .staff-panel-card {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 6px;
  padding: 12px 14px;
}
.staff-root .staff-panel-card h3 { margin: 0 0 6px; font-size: 15px; }
.staff-root #staff-picture { margin-top: 12px; }
.staff-root #staff-otbox { margin-top: 12px; }
.staff-root .staff-setrow { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.staff-root .staff-setrow label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 11px; color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em;
}
.staff-root .staff-setrow input { width: 96px; }
.staff-root .staff-btns { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.staff-root .staff-panel { border: 1px solid var(--line); background: var(--card); }
.staff-root .staff-scrollx { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.staff-root table { border-collapse: collapse; width: 100%; font-size: 14px; }
.staff-root th {
  text-transform: uppercase; letter-spacing: .07em;
  font-size: 10px; font-weight: 600; color: var(--muted);
  padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left;
}
.staff-root td { padding: 4px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.staff-root th.r, .staff-root td.r { text-align: right; }
.staff-root #staff-g { table-layout: fixed; width: 100%; min-width: 430px; }
.staff-root #staff-g col.cper { width: 22%; }
.staff-root #staff-g col.cday { width: 8.6%; }
.staff-root #staff-g col.chrs { width: 7%; }
.staff-root #staff-g col.crm { width: 3.4%; }
.staff-root #staff-g th.stick,
.staff-root #staff-g td.stick {
  position: sticky; left: 0; background: var(--card); z-index: 2;
  border-right: 1px solid var(--line); padding-left: 9px; padding-right: 7px;
}
.staff-root #staff-g tr.ft td.stick { background: var(--muted-surface); }
.staff-root #staff-g th.dcol { text-align: center; padding: 0; }
.staff-root #staff-g th.dcol.selday { background: var(--fg); }
.staff-root #staff-g th.dcol.selday .dh { color: var(--card); }
.staff-root .dh {
  font: inherit; font-weight: 600; font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); background: none; border: 0;
  cursor: pointer; width: 100%; padding: 6px 1px; line-height: 1.1;
}
.staff-root .dh span { display: block; font-size: 13px; letter-spacing: 0; font-weight: 700; }
.staff-root .pname {
  font: inherit; font-weight: 600; font-size: 13.5px; background: none; border: 0;
  color: inherit; cursor: pointer; text-align: left; padding: 0; line-height: 1.2; width: 100%;
}
.staff-root .pname:hover { text-decoration: underline; }
.staff-root .prow { display: flex; align-items: center; gap: 6px; margin-top: 2px; justify-content: space-between; }
.staff-root .prow .rl { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.staff-root #staff-g td.c { text-align: center; padding: 2px 1px; }
.staff-root .cell {
  width: 100%; min-width: 0; height: 32px; font: inherit; font-size: 15px; font-weight: 700;
  line-height: 1; border: 1px solid var(--line-soft); background: var(--card); color: var(--muted);
  border-radius: 3px; cursor: pointer; touch-action: none; user-select: none;
}
.staff-root .cell.s-sched { background: var(--card); color: var(--fg-soft); border: 1px dashed var(--muted); }
.staff-root .cell.s-worked { background: var(--staff-chip); color: var(--fg); border-color: var(--line); font-size: 16px; }
.staff-root .cell.s-calloff, .staff-root .cell.s-noshow {
  background: color-mix(in srgb, var(--staff-over) 26%, var(--card));
  color: var(--staff-over-ink);
  border-color: color-mix(in srgb, var(--staff-over) 50%, var(--line));
}
.staff-root .cell.s-early, .staff-root .cell.s-over, .staff-root .cell.s-pickup {
  background: color-mix(in srgb, var(--staff-warn) 26%, var(--card));
  color: var(--staff-warn-ink);
  border-color: color-mix(in srgb, var(--staff-warn) 50%, var(--line));
}
.staff-root .cell.s-here {
  background: color-mix(in srgb, var(--staff-warn) 18%, var(--card));
  color: var(--staff-warn-ink);
  border-color: color-mix(in srgb, var(--staff-warn) 55%, var(--line));
}
.staff-root .cell.s-pto { background: var(--muted-surface); color: var(--muted); }
.staff-root input.sh { width: 58px; min-width: 0; max-width: 58px; flex: 0 0 58px; padding: 4px 5px; font-size: 13px; text-align: right; height: 28px; }
.staff-root input.cen {
  width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
  padding: 5px 2px; font-size: 14px; text-align: center; height: 30px;
  overflow: hidden; text-overflow: ellipsis;
}
.staff-root #staff-g tr.ft td {
  background: var(--muted-surface); font-weight: 600; font-size: 12.5px;
  border-bottom: 1px solid var(--line-soft); padding: 4px 2px; text-align: center;
  overflow: hidden;
}
.staff-root #staff-g .staff-ppd-over { color: var(--staff-over-ink); }
.staff-root #staff-g .staff-ppd-under { color: var(--staff-under-ink); }
.staff-root #staff-g tr.ft td.stick { text-align: left; }
.staff-root #staff-g tr.ft.top td { border-top: 1.5px solid var(--fg); }
.staff-root #staff-g tr.ft.big td { font-weight: 700; font-size: 14px; }
.staff-root #staff-g td .sub { font-size: 10.5px; color: var(--muted); font-weight: 400; }
.staff-root .xbtn { font: inherit; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 17px; line-height: 1; padding: 3px 6px; border-radius: 4px; }
.staff-root .xbtn:hover { background: var(--line); color: var(--fg); }
.staff-root .staff-legend { display: flex; flex-wrap: wrap; gap: 3px 13px; margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.staff-root .staff-legend b { color: var(--fg); font-weight: 700; margin-right: 3px; }
.staff-root .staff-hint { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.staff-root .staff-gcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.staff-root .staff-gcard { border: 1px solid var(--line); background: var(--card); padding: 12px 14px; border-radius: 6px; }
.staff-root .staff-gcard h3 { margin: 0; font-size: 14.5px; }
.staff-root .staff-gcard .n { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.staff-root #staff-grp tr.b td { border-top: 1.5px solid var(--fg); }
.staff-root #staff-grp .bn { font-weight: 700; }
.staff-root #staff-grp .ok { color: var(--staff-under-ink); font-weight: 700; }
.staff-root #staff-grp .bad { color: var(--staff-over-ink); font-weight: 700; }
.staff-root details.staff-box { border: 1px solid var(--line); background: var(--card); border-radius: 6px; }
.staff-root details.staff-box summary {
  cursor: pointer; font-weight: 600; font-size: 14px; padding: 11px 14px; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.staff-root details.staff-box summary::-webkit-details-marker { display: none; }
.staff-root details.staff-box summary::after { content: "+"; font-size: 17px; color: var(--muted); font-weight: 400; }
.staff-root details.staff-box[open] summary::after { content: "\2212"; }
.staff-root .staff-dbody { padding: 0 14px 14px; }
.staff-root .staff-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 3px 0; border-bottom: 1px solid var(--line-soft); }
.staff-root .staff-row:last-child { border-bottom: 0; }
.staff-root .staff-row b { font-variant-numeric: tabular-nums; }
.staff-root .staff-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.staff-root .staff-note {
  background: var(--muted-surface); border-left: 3px solid var(--staff-accent);
  padding: 10px 13px; font-size: 13.5px; color: var(--fg-soft); border-radius: 0 5px 5px 0;
}
.staff-root .staff-note.warn { border-left-color: var(--staff-warn); }
.staff-root .staff-empty { padding: 15px; color: var(--muted); font-size: 14px; }
.staff-root tr.off td { background: color-mix(in srgb, var(--staff-over) 8%, transparent); }
.staff-root tr.extra td { background: color-mix(in srgb, var(--staff-warn) 10%, transparent); }
.staff-root tr.sum td { background: var(--muted-surface); font-weight: 700; border-top: 1.5px solid var(--fg); }
.staff-root .staff-addbar { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.staff-root .staff-hide { display: none !important; }
.staff-root .staff-open-day { font-size: 12px; color: var(--staff-warn-ink); font-weight: 600; }
@media (max-width: 780px) { .staff-root .staff-two { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .staff-root .staff-tabs { width: 100%; }
  .staff-root .staff-tabs button { flex: 1; padding: 10px 4px; font-size: 14px; }
  .staff-root .staff-facfilter { width: 100%; }
  .staff-root .staff-facfilter .staff-seg { flex: 1; }
  .staff-root .staff-seg { width: 100%; }
  .staff-root .staff-seg button { flex: 1; padding: 9px 4px; font-size: 12px; }
  .staff-root .staff-wknav { width: 100%; justify-content: space-between; }
  .staff-root .staff-wknav .staff-lbl { min-width: 0; flex: 1; }
  .staff-root #staff-g { min-width: 0; }
  .staff-root #staff-g col.cper { width: 96px; }
  .staff-root #staff-g col.cday { width: 31px; }
  .staff-root #staff-g col.chrs { width: 38px; }
  .staff-root #staff-g col.crm { width: 20px; }
  .staff-root #staff-g tr.ft td.num,
  .staff-root #staff-g tr.ft td.hrs { font-size: 11px; padding-left: 0; padding-right: 0; }
  .staff-root .lg { display: none; }
  .staff-root .sm-lbl { display: inline; }
}
@media (min-width: 701px) { .staff-root .sm-lbl { display: none; } }

/* Payroll-style Staffing Log. Scoped so the rest of the portal stays as it is. */
.staff-root {
  --staff-accent: #0f766e;
  gap: 16px;
}
.staff-root .staff-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 18px;
}
.staff-root .staff-top-cluster,
.staff-root .staff-top-actions,
.staff-root .staff-wknav,
.staff-root .staff-gridtools,
.staff-root .staff-gridhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.staff-root .staff-gridhead { justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.staff-root .staff-facdrop {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 196px;
  min-height: 58px;
  padding: 8px 34px 8px 42px;
  background: #fff;
  border: 1px solid #e6e8eb;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 32, .04);
}
.staff-root .staff-facdrop > .staff-ico {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  color: #5d6b73;
}
.staff-root .staff-faclabel {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #7b868d;
}
.staff-root .staff-facdrop select {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
  padding: 0;
  width: 100%;
  cursor: pointer;
}
.staff-root .staff-facdrop::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border-right: 1.8px solid #667077;
  border-bottom: 1.8px solid #667077;
  transform: rotate(45deg);
  pointer-events: none;
}
.staff-root .staff-wknav button,
.staff-root .staff-action,
.staff-root .staff-wkpill {
  background: #fff;
  border: 1px solid #e6e8eb;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 32, .04);
  color: var(--fg);
}
.staff-root .staff-wknav button {
  width: 40px;
  height: 40px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.staff-root .staff-wkpill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  font-weight: 700;
  font-size: 14.5px;
}
.staff-root .staff-wkthis {
  width: auto !important;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 650;
}
.staff-root .staff-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}
.staff-root .staff-action-quiet { font-weight: 600; color: #3e4c53; box-shadow: none; }
.staff-root .staff-ico { width: 16px; height: 16px; flex: none; }
.staff-root .staff-status { font-size: 12px; }
.staff-root:not(.staff-empty-week) #staff-htnote { display: none; }
.staff-root .staff-tabs {
  gap: 8px;
  border-bottom: 1px solid #e6e8eb;
}
.staff-root .staff-tabs button {
  font-size: 15px;
  font-weight: 650;
  color: #8b969c;
  padding: 8px 14px 10px;
  border-bottom-width: 2px;
}
.staff-root .staff-tabs button[aria-selected="true"] {
  color: #0f766e;
  border-bottom-color: #0f766e;
}
.staff-root .staff-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 12px;
  align-items: stretch;
}
.staff-root .staff-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.staff-root .staff-metrics.staff-metrics-all {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.staff-root .staff-metric.staff-metric-breakout .staff-metric-v {
  font-size: 22px;
}
.staff-root .staff-all-mode .staff-gridcard .staff-hint strong {
  font-weight: 600;
}
.staff-root .staff-metric,
.staff-root .staff-rail,
.staff-root .staff-gridcard,
.staff-root .staff-chartcard,
.staff-root .staff-start,
.staff-root #staff-gview .staff-panel,
.staff-root #staff-gview .staff-head {
  background: #fff;
  border: 1px solid #e7eaed;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 32, .04);
}
.staff-root .staff-metric { padding: 12px 12px 11px; min-width: 0; }
.staff-root .staff-metric-k { font-size: 12.5px; font-weight: 600; color: #7b868d; }
.staff-root .staff-metric-v {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 2px;
  font-size: 26px;
  font-weight: 750;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: #1c2b31;
  font-variant-numeric: tabular-nums;
}
.staff-root .staff-metric-s { font-size: 12px; color: #8b969c; line-height: 1.35; }
.staff-root .staff-metric.is-ppd .staff-metric-v { color: #0f766e; }
.staff-root .staff-metric.is-under .staff-metric-v,
.staff-root .staff-metric.is-over .staff-metric-v { color: #c2410c; font-size: 20px; }
.staff-root .staff-metric .staff-ico { width: 18px; height: 18px; }
.staff-root .staff-rail { padding: 14px 14px 8px; }
.staff-root .staff-rail h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 15px;
}
.staff-root .staff-otperson {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid #f0f2f4;
}
.staff-root .staff-otwho { display: flex; align-items: center; gap: 8px; min-width: 0; }
.staff-root .staff-otname { font-weight: 700; font-size: 13.5px; }
.staff-root .staff-otrole { font-size: 12px; color: #7b868d; }
.staff-root .staff-otfig { text-align: right; flex: none; }
.staff-root .staff-otfig b { display: block; font-size: 16px; letter-spacing: -.02em; }
.staff-root .staff-otfig span { display: block; font-size: 11px; color: #8b969c; max-width: 110px; }
.staff-root .staff-otfig.is-ot b { color: #c2410c; }
.staff-root .staff-otfig.is-soon b { color: #b45309; }
.staff-root .staff-otmore {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-top: 4px;
  padding: 8px 0 4px;
  border: 0;
  background: none;
  color: #0f766e;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.staff-root .staff-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex: none;
}
.staff-root .staff-split {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 12.5px;
  color: #5d6b73;
}
.staff-root .staff-split b { color: var(--fg); }
.staff-root .staff-gridcard { padding: 14px 14px 12px; }
.staff-root .staff-gridcard h3 { margin: 0; font-size: 16px; }
.staff-root .staff-setrow label { text-transform: none; letter-spacing: 0; font-size: 12px; }
.staff-root .staff-setrow input {
  background: #fff;
  border: 1px solid #e6e8eb;
  border-radius: 8px;
  height: 32px;
}
.staff-root #staff-g { min-width: 880px; }
.staff-root #staff-g col.cper { width: 250px; }
.staff-root #staff-g th { border-bottom-color: #eef1f3; }
.staff-root #staff-g th.dcol.selday,
.staff-root #staff-g th.dcol.selday .dh { background: transparent; color: #0f766e; }
.staff-root .dh .dow { font-size: 11px; letter-spacing: .04em; }
.staff-root .dh .date { font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.staff-root .staff-person { display: flex; align-items: center; gap: 10px; }
.staff-root .staff-person .nm { font-size: 14px; }
.staff-root .cell {
  min-width: 42px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid #e6e8eb;
  background: #f7f8f9;
  color: #243038;
  font-size: 14px;
  font-weight: 700;
}
.staff-root .cell.is-zero { color: #c5ced2; background: #fbfcfc; }
.staff-root .cell.is-unbuilt,
.staff-root td.staff-unbuilt {
  color: #667085;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.15;
  white-space: normal;
  height: auto;
  min-height: 34px;
}
.staff-root .cell.s-sched { background: #fff; border-style: dashed; color: #5c6b72; }
.staff-root .cell.s-worked { background: #f4f8f7; border-color: #d5e4df; color: #16343a; }
.staff-root .cell.s-calloff,
.staff-root .cell.s-noshow { background: #fdecec; color: #9c2020; border-color: #f3c9c9; }
.staff-root .cell.s-early,
.staff-root .cell.s-over,
.staff-root .cell.s-pickup { background: #fff4e8; color: #9a4b12; border-color: #f3d7bc; }
.staff-root .cell.s-here {
  background: #fff7ed;
  color: #9a3412;
  border-color: #fdba74;
  border-style: solid;
  position: relative;
  padding-left: 14px;
}
.staff-root .cell .staff-here-badge {
  position: absolute;
  left: 3px;
  top: 2px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0;
  color: #c2410c;
  line-height: 1;
}
.staff-root .cell.s-pto { background: #f3f4f5; color: #7b868d; }
.staff-root .staff-legend .sw.s-here {
  background: #fff7ed;
  border-color: #fdba74;
}
.staff-root .staff-here-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #fff7ed;
  border: 1px solid #fdba74;
  color: #9a3412;
  font-size: 11px;
  font-weight: 700;
}
.staff-root #staff-daytbl tr.is-here td { background: #fffaf5; }
.staff-root .staff-forecast {
  margin: 4px 0 14px;
  padding: 12px 14px;
  border: 1px solid #e6e8eb;
  border-radius: 10px;
  background: linear-gradient(180deg, #fbfcfc 0%, #f4f7f8 100%);
}
.staff-root .staff-fc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.staff-root .staff-fc-head strong { font-size: 15px; }
.staff-root .staff-fc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px 14px;
}
.staff-root .staff-fc-week {
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #eef1f3;
}
.staff-root .staff-fc-k {
  font-size: 11px;
  color: #7b868d;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
}
.staff-root .staff-fc-v {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 2px 0 6px;
  color: #16343a;
}
.staff-root .staff-fc-days {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 12px;
  color: #5d6b73;
}
.staff-root .staff-fc-day b {
  color: #243038;
  font-weight: 700;
  margin-right: 2px;
}
.staff-root .staff-chartcard {
  margin: 4px 0 14px;
  padding: 14px 16px 10px;
}
.staff-root .staff-charthead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 8px;
}
.staff-root .staff-charthead h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #1c2b31;
}
.staff-root .staff-chartseg {
  display: inline-flex;
  gap: 0;
  border: 1px solid #e6e8eb;
  border-radius: 10px;
  overflow: hidden;
  background: #f7f9fa;
}
.staff-root .staff-chartseg button {
  border: 0;
  background: transparent;
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  color: #5d6b73;
  cursor: pointer;
}
.staff-root .staff-chartseg button[aria-pressed="true"] {
  background: #0f766e;
  color: #fff;
}
.staff-root .staff-chartwrap {
  position: relative;
  height: 260px;
  width: 100%;
}
.staff-root .staff-chartwrap canvas {
  width: 100% !important;
  height: 100% !important;
}
@media (max-width: 900px) {
  .staff-root .staff-chartwrap { height: 220px; }
}
@media (max-width: 720px) {
  .staff-root .staff-fc-head { align-items: flex-start; }
}
.staff-root .staff-total {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-weight: 750;
  font-size: 13px;
}
.staff-root .staff-total.is-ok { background: #e7f5f2; color: #0f766e; }
.staff-root .staff-total.is-ot { background: #fff1e8; color: #c2410c; }
.staff-root input.sh { width: 42px; height: 22px; font-size: 11px; border-radius: 6px; }
.staff-root .staff-legend .sw {
  display: inline-block;
  width: 14px;
  height: 10px;
  margin-right: 5px;
  border-radius: 3px;
  border: 1px solid #d5dbde;
  vertical-align: -1px;
}
.staff-root .staff-legend .sw.s-sched { background: #fff; border-style: dashed; }
.staff-root .staff-legend .sw.s-worked { background: #f4f8f7; border-color: #d5e4df; }
.staff-root .staff-legend .sw.s-calloff { background: #fdecec; border-color: #f3c9c9; }
.staff-root .staff-legend .sw.s-over { background: #fff4e8; border-color: #f3d7bc; }
.staff-root .staff-legend .sw.s-pto { background: #f3f4f5; }
.staff-root #staff-gview .staff-head { padding: 14px 16px; margin-bottom: 12px; }
@media (max-width: 1100px) {
  .staff-root .staff-hero { grid-template-columns: 1fr; }
  .staff-root .staff-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .staff-root .staff-metrics.staff-metrics-all { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .staff-root .staff-metrics { grid-template-columns: 1fr 1fr; }
  .staff-root .staff-metric-v { font-size: 22px; }
  .staff-root .staff-facdrop { width: 100%; }
}

/* Employee file slots (HR employee record) — one readable list, one
   group per kind of paper, actions on the same line as the file. */
.hr-slots {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hr-slot {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 14px 8px;
  background: #fff;
  min-width: 0;
}
.hr-slot.is-over {
  border-color: #2a78d6;
  background: #eef5fd;
}
.hr-slot-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 4px;
}
.hr-slot-title { font-weight: 700; font-size: 13.5px; color: #1d2939; }
.hr-slot-hint { font-size: 11.5px; color: #667085; line-height: 1.4; margin-top: 2px; }
.hr-slot-count { font-size: 11px; font-weight: 700; color: #475467; white-space: nowrap; }
.hr-slot-file {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 16px;
  padding: 10px 0;
  border-top: 1px solid #eef0f3;
}
.hr-slot-file-main { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.hr-slot-file-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  flex: 0 1 auto;
}
.hr-slot-open { color: var(--teal); font-size: 12.5px; font-weight: 700; }
.hr-slot-drop {
  display: inline-block;
  margin: 6px 0 2px;
  padding: 4px 0;
  font-size: 12px;
  font-weight: 600;
  color: #667085;
  cursor: pointer;
}
.hr-slot-drop:hover { color: #2a78d6; }

/* Bulk upload (employee file): pick → read → review → file */
.bulk-up { min-width: 0; }
.bulk-up [hidden] { display: none !important; }
.bulk-lede { font-size: 13.5px; color: #344054; line-height: 1.5; margin: 0 0 14px; }
.bulk-quiet { font-size: 12px; color: #667085; margin: 10px 0 0; }
.bulk-drop {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 2px dashed #cbd5e1; border-radius: 10px; padding: 26px 16px;
  background: #fafbfc; cursor: pointer; text-align: center;
}
.bulk-drop strong { font-size: 14px; color: var(--teal); }
.bulk-drop span { font-size: 12px; color: #667085; }
.bulk-drop.is-over { border-color: #2a78d6; background: #eef5fd; }
.bulk-picked { font-size: 12.5px; color: #344054; margin-top: 10px; overflow-wrap: anywhere; }
.bulk-err { color: #a01010; font-size: 13px; margin: 10px 0 0; }
.bulk-warn { color: #9a5b00; font-size: 12px; font-weight: 600; margin-top: 3px; }
.bulk-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.bulk-bar { height: 8px; border-radius: 999px; background: #eef0f3; overflow: hidden; }
.bulk-bar span { display: block; height: 100%; background: var(--teal); transition: width .3s ease; }
.bulk-docs { display: flex; flex-direction: column; gap: 8px; }
.bulk-doc {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px; background: #fff; min-width: 0;
}
.bulk-doc.is-off { opacity: .55; }
.bulk-thumb {
  position: relative; flex: 0 0 64px; width: 64px; height: 82px; padding: 0;
  border: 1px solid #d0d5dd; border-radius: 6px; background: #f8fafc; overflow: hidden; cursor: zoom-in;
}
.bulk-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.bulk-thumb span {
  position: absolute; right: 3px; bottom: 3px; font-size: 10.5px; font-weight: 800;
  background: rgba(16,24,40,.75); color: #fff; border-radius: 999px; padding: 1px 6px;
}
.bulk-doc-main { flex: 1 1 auto; min-width: 0; }
.bulk-doc-top { display: flex; gap: 8px; align-items: center; }
.bulk-include { display: inline-flex; gap: 5px; align-items: center; font-size: 12px; font-weight: 700; color: #475467; white-space: nowrap; }
.bulk-title {
  flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 700; color: #101828;
  border: 1px solid transparent; border-radius: 6px; padding: 4px 6px; background: transparent;
}
.bulk-title:hover, .bulk-title:focus { border-color: #d0d5dd; background: #fff; }
.bulk-meta { font-size: 12px; color: #667085; margin: 2px 0 0 6px; }
.bulk-doc-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; margin-top: 8px; }
.bulk-dest { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 700; color: #475467; min-width: 0; white-space: nowrap; }
.bulk-dest select { font-size: 12.5px; padding: 6px 8px; border: 1px solid #d0d5dd; border-radius: 6px; background: #fff; max-width: 280px; min-width: 0; }
.bulk-doc-tools { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.bulk-doc-tools .btn { font-size: 12px; padding: 5px 10px; }
.bulk-peek { display: flex; gap: 10px; overflow-x: auto; margin-top: 10px; padding-bottom: 4px; }
.bulk-peek figure { margin: 0; flex: 0 0 auto; }
.bulk-peek img { display: block; max-height: 420px; max-width: min(340px, 70vw); border: 1px solid #d0d5dd; border-radius: 6px; }
.bulk-peek figcaption { font-size: 11px; color: #667085; margin-top: 3px; }
.bulk-options { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; font-size: 13px; color: #344054; }
.bulk-options label { display: inline-flex; gap: 8px; align-items: center; }
.bulk-results { list-style: none; padding: 0; margin: 14px 0 0; font-size: 13px; max-height: 50vh; overflow: auto; }
.bulk-results li { padding: 4px 0; border-bottom: 1px solid #f2f4f7; }
.bulk-results li.ok { color: #1f7a3a; }
.bulk-results li.bad { color: #a01010; }
.bulk-results li.bulk-results-head { color: #101828; font-weight: 800; padding-top: 10px; border-bottom: 1px solid #e4e7ec; }
.bulk-people { display: flex; flex-direction: column; gap: 10px; }
.bulk-person { border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px 12px; background: #fff; min-width: 0; }
.bulk-person.needs-pick { border-color: #f5c26b; background: #fffaf0; }
.bulk-person.is-off { opacity: .55; }
.bulk-person-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-start; }
.bulk-person-who { flex: 1 1 260px; min-width: 0; font-size: 14px; color: #101828; }
.bulk-person-who .bulk-meta { margin: 2px 0 0; }
.bulk-person-select { font-size: 13px; padding: 7px 8px; border: 1px solid #d0d5dd; border-radius: 6px; background: #fff; max-width: 100%; width: 340px; }
.bulk-person-toggle { font-size: 12px; padding: 6px 10px; }
.bulk-person .bulk-docs { margin-top: 10px; }
.bulk-link { background: none; border: none; padding: 0 0 0 6px; color: var(--teal); font-size: 12.5px; font-weight: 700; cursor: pointer; }
@media (max-width: 560px) {
  .bulk-doc { flex-direction: column; }
  .bulk-thumb { width: 100%; height: 120px; flex-basis: auto; }
  .bulk-dest select { max-width: 100%; }
}

/* Bulk upload, everyone at once: bigger page pictures with name + page */
.bulk-pages { display: flex; gap: 10px; overflow-x: auto; margin-top: 10px; padding-bottom: 4px; }
.bulk-pg {
  flex: 0 0 auto; width: 132px; padding: 0; border: 1px solid #d0d5dd; border-radius: 8px;
  background: var(--card-2, #fff); cursor: zoom-in; text-align: left; overflow: hidden;
}
.bulk-pg img { display: block; width: 100%; height: 170px; object-fit: cover; object-position: top; background: #f8fafc; }
/* Under every page picture: the file name, then the page. */
.thumb-cap { display: block; padding: 3px 5px; text-align: left; min-width: 0; }
.thumb-cap > span { display: block; font-size: 11px; line-height: 1.3; color: #475467; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thumb-cap > span + span { font-weight: 700; color: #344054; }
.bulk-pg:hover, .bulk-pg:focus-visible { border-color: var(--teal); }
.bulk-sent { font-size: 12px; font-weight: 700; color: #1f7a3a; margin-left: 6px; }

/* File viewer (file-viewer.js): full screen, or inside a box on Sort files */
body.ivv-open { overflow: hidden; }
.ivv-overlay {
  position: fixed; inset: 0; z-index: 10050; background: rgba(16,24,40,.72);
  display: flex; align-items: stretch; justify-content: center; padding: 16px;
}
.ivv-sheet { flex: 1 1 auto; max-width: 1200px; min-width: 0; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; }
.ivv-box { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--card-2, #fff); border: 1px solid var(--card-line, #e5e7eb); border-radius: 12px; }
.ivv-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  padding: 10px 12px; border-bottom: 1px solid var(--card-line, #e5e7eb); background: var(--card, #fff);
}
.ivv-name { min-width: 0; display: flex; flex-direction: column; }
.ivv-name b { font-size: 14px; color: var(--fg, #101828); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ivv-name span { font-size: 12px; color: var(--muted, #667085); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ivv-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ivv-btn {
  min-height: 34px; padding: 0 12px; border: 1px solid var(--line, #d0d5dd); border-radius: 8px;
  background: var(--card-2, #fff); color: var(--fg, #101828); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.ivv-btn:hover:not([disabled]) { border-color: var(--teal); color: var(--teal); }
.ivv-btn[disabled] { opacity: .45; cursor: default; }
.ivv-zoom { min-width: 62px; }
.ivv-close { font-size: 20px; line-height: 1; padding: 0 12px; }
.ivv-count { font-size: 13px; font-weight: 700; color: var(--muted, #475467); min-width: 52px; text-align: center; }
.ivv-sep { width: 1px; height: 22px; background: var(--card-line, #e5e7eb); margin: 0 2px; }
.ivv-stage { flex: 1 1 auto; overflow: auto; background: #eef0f3; padding: 12px; min-height: 260px; outline: none; }
.ivv-page { display: flex; justify-content: center; min-width: min-content; }
.ivv-canvas { display: block; background: #fff; box-shadow: 0 2px 10px rgba(16,24,40,.18); }
.ivv-err { margin: 0; padding: 8px 12px; color: #a01010; font-size: 13px; background: var(--card, #fff); }
.ivv-quiet { font-size: 13px; color: #475467; padding: 24px; text-align: center; }
@media (max-width: 720px) {
  .ivv-overlay { padding: 0; }
  .ivv-sheet { border-radius: 0; }
  .ivv-sep { display: none; }
}

/* Bulk upload window (hr-sort-files.js): who, files, Upload */
.up { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.up [hidden] { display: none !important; }
.up-step { display: flex; flex-direction: column; gap: 8px; }
.up-h { margin: 6px 0 0; font-size: 15px; color: #101828; }
.up-search-label { font-size: 12px; font-weight: 700; color: #475467; }
.up-search { font: inherit; font-size: 15px; padding: 11px 12px; border: 1px solid #d0d5dd; border-radius: 8px; width: 100%; box-sizing: border-box; }
.up-results { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow: auto; }
.up-person, .up-chosen {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left;
  padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; font: inherit; cursor: pointer;
}
.up-person b, .up-chosen b { display: block; font-size: 14px; color: #101828; }
.up-person span, .up-chosen span { display: block; font-size: 12px; color: #667085; }
.up-person:hover, .up-person:focus-visible { border-color: var(--teal); background: var(--teal-soft, #f0fdfa); }
.up-chosen { cursor: default; border-color: var(--teal); background: var(--teal-soft, #f0fdfa); }
.up-drop { padding: 22px 14px; }
.up-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.up-tile { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.up-thumb {
  padding: 0; height: 170px; border: 1px solid #d0d5dd; border-radius: 8px; overflow: hidden;
  background: #f8fafc; cursor: zoom-in;
}
.up-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.up-thumb img:not([src]) { visibility: hidden; }
.up-thumb.no-pic { cursor: default; }
.up-name { font-size: 12px; font-weight: 700; color: #344054; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-meta { font-size: 11px; color: #667085; }
.up-x {
  position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 999px; border: none;
  background: rgba(16,24,40,.72); color: #fff; font-size: 16px; line-height: 1; cursor: pointer;
}
.up-many { font-size: 12.5px; color: #667085; margin: 0; }
.up-done-line { font-size: 15px; line-height: 1.5; color: #101828; margin: 0; }

/* Bulk upload, match by file name (hr-sort-files.js openByName) */
.bn-list { display: flex; flex-direction: column; gap: 8px; }
.bn-group { display: flex; gap: 10px; align-items: flex-start; border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px 12px; background: #fff; min-width: 0; }
.bn-group.is-open { border-color: #f5c26b; background: #fffbf2; }
.bn-group.is-off { opacity: .55; }
.bn-inc { padding-top: 2px; }
.bn-inc input { width: 18px; height: 18px; }
.bn-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bn-top b { display: block; font-size: 14px; color: #101828; overflow-wrap: anywhere; }
.bn-top span { display: block; font-size: 12px; color: #667085; }
.bn-who { display: flex; flex-direction: column; gap: 4px; }
.bn-pick { font-size: 14px; padding: 8px 10px; }
.bn-sugg { font-size: 12.5px; color: #475467; }
.bn-files summary { font-size: 12px; color: var(--teal); cursor: pointer; }
.bn-files ul { margin: 6px 0 0; padding-left: 18px; font-size: 12px; color: #475467; max-height: 180px; overflow: auto; overflow-wrap: anywhere; }
.bn-sticky { position: sticky; bottom: 0; background: #fff; padding: 10px 0 2px; margin-top: 8px; border-top: 1px solid #eef0f3; }

/* Sort files (hr-sort-files.js) */
.srt { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.srt [hidden] { display: none !important; }
.srt-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.srt-head h3 { margin: 0 0 4px; font-size: 16px; }
.srt-head p { margin: 0; font-size: 13px; color: #667085; max-width: 640px; line-height: 1.45; }
.srt-head-acts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.srt-count { font-size: 13px; font-weight: 700; color: #344054; }
.srt-reading { margin: 0; font-size: 13px; color: #1f5f8b; background: #eef5fd; border: 1px solid #cfe2f7; border-radius: 8px; padding: 8px 12px; }
.srt-bldg { border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; overflow: hidden; }
.srt-bldg h4 { margin: 0; padding: 10px 14px; font-size: 14px; background: #f8fafc; border-bottom: 1px solid #e5e7eb; }
.srt-bldg h4 span { font-weight: 600; color: #667085; font-size: 12.5px; margin-left: 6px; }
.srt-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px;
  border-top: 1px solid #f2f4f7; color: inherit; text-decoration: none; flex-wrap: wrap;
}
.srt-row:first-of-type { border-top: none; }
a.srt-row:hover { background: var(--teal-soft, #f0fdfa); text-decoration: none; }
.srt-row b { display: block; font-size: 14px; color: #101828; }
.srt-row span { display: block; font-size: 12px; color: #667085; margin-top: 2px; }
.srt-go { font-size: 13px; font-weight: 700; color: var(--teal) !important; }
.srt-row-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.srt-row-acts .btn { font-size: 12.5px; padding: 6px 10px; }
.srt-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 24px; border: 1px dashed #d0d5dd; border-radius: 12px; font-size: 13.5px; color: #475467; }
.srt-empty b { font-size: 15px; color: #101828; }
.srt-top { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; justify-content: space-between; }
.srt-back { flex: 1 0 100%; font-size: 13px; font-weight: 700; color: var(--teal); text-decoration: none; }
.srt-who h3 { margin: 0; font-size: 18px; }
.srt-who p { margin: 2px 0 0; font-size: 13px; color: #667085; }
.srt-top-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.srt-top-acts .btn { font-size: 13px; padding: 8px 12px; text-decoration: none; }
.srt-status { margin: 0; min-height: 1em; font-size: 13px; color: #1f7a3a; font-weight: 600; }
.srt-status.bad { color: #a01010; }
.srt-work { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 14px; align-items: start; }
.srt-view { position: sticky; top: 72px; height: calc(100vh - 110px); min-height: 480px; }
.srt-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.srt-pick { border: 2px solid var(--teal); border-radius: 12px; padding: 12px 14px; background: #fff; display: flex; flex-direction: column; gap: 10px; }
.srt-k { font-size: 12px; font-weight: 700; color: #475467; text-transform: none; }
.srt-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: #344054; }
.srt-field input, .srt-field select { font: inherit; font-size: 14px; font-weight: 400; padding: 9px 10px; border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; min-width: 0; max-width: 100%; }
.srt-sugg, .srt-note { margin: 0; font-size: 12.5px; color: #475467; line-height: 1.4; }
.srt-note { color: #9a5b00; }
.srt-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.srt-btns .btn-primary { min-width: 120px; }
.srt-opt { display: inline-flex; gap: 8px; align-items: center; font-size: 12.5px; color: #475467; }
.srt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 70vh; overflow: auto; }
.srt-card { display: flex; gap: 10px; align-items: stretch; border: 1px solid #e5e7eb; border-radius: 10px; padding: 8px; background: #fff; }
.srt-card.is-active { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal-soft, #ccfbf1); }
.srt-card.is-waiting { background: #fffaf0; }
.srt-thumb { flex: 0 0 96px; width: 96px; padding: 0; border: 1px solid #d0d5dd; border-radius: 6px; overflow: hidden; background: #f8fafc; cursor: zoom-in; display: flex; flex-direction: column; }
.srt-thumb img { display: block; width: 100%; height: 124px; object-fit: cover; object-position: top; }
.srt-thumb img:not([src]) { visibility: hidden; }
.srt-thumb.no-pic { cursor: default; }
.srt-card-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left; border: none; background: none; padding: 2px; font: inherit; cursor: pointer; }
.srt-card-main b { font-size: 13.5px; color: #101828; overflow-wrap: anywhere; }
.srt-card-main span { font-size: 12px; color: #667085; }
.srt-pill { display: inline-block; font-size: 11px !important; font-weight: 700; border-radius: 999px; padding: 1px 8px; }
.srt-pill.wait { background: var(--warn-soft, #fef3c7); color: var(--warn-ink, #92400e) !important; }
.srt-pill.sugg { background: #eef5fd; color: #1f5f8b !important; }
.srt-done { font-size: 13px; color: #475467; }
.srt-done summary { cursor: pointer; font-weight: 700; }
.srt-done ul { margin: 8px 0 0; padding-left: 18px; line-height: 1.6; }
.srt-banner {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 10px 14px; border: 1px solid #f5c26b; border-radius: 10px; background: #fffaf0;
  font-size: 13.5px; color: #5b4a2f;
}
.srt-banner[hidden] { display: none !important; }
.srt-banner-go { font-weight: 800; color: var(--teal); }
@media (max-width: 1100px) {
  .srt-work { grid-template-columns: minmax(0, 1fr); }
  .srt-view { position: static; height: 70vh; min-height: 360px; }
  .srt-list { max-height: none; }
}

/* Documents drawer: a picture of each file that opens it full size */
.hr-slot-file .hr-file-thumb {
  flex: 0 0 auto; width: 92px; padding: 0; border: 1px solid #d0d5dd; border-radius: 6px; overflow: hidden;
  background: #f8fafc; cursor: zoom-in; display: flex; flex-direction: column; text-align: left;
}
.hr-file-thumb img { display: block; width: 100%; height: 118px; object-fit: cover; object-position: top; }
.hr-file-thumb img:not([src]) { visibility: hidden; }
.hr-file-thumb > b { display: grid; place-items: center; height: 118px; font-size: 13px; color: #667085; }
.hr-file-thumb.no-pic { cursor: pointer; }
.hr-sort-line { margin-top: 4px; font-size: 12px; }
.hr-sort-pill { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 8px; }
.hr-sort-pill.wait { background: var(--warn-soft, #fef3c7); color: var(--warn-ink, #92400e); }
.hr-sort-pill.sugg { background: #eef5fd; color: #1f5f8b; }
.hr-sort-pill.done { background: var(--ok-soft, #dcf5e8); color: #1f7a3a; }
.hr-sort-now { font-weight: 700; color: var(--teal); margin-left: 6px; }

/* Corporate home — #/dashboard staffing + HR */
.corp-home { display: flex; flex-direction: column; gap: 18px; }
.corp-panel {
  background: var(--card, #fff);
  border: 1px solid var(--card-line, #e5e7eb);
  border-radius: 12px;
  padding: 18px 18px 14px;
}
.corp-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}
.corp-panel-head h2 { margin: 2px 0 4px; font-size: 20px; }
.corp-panel-head p { margin: 0; color: var(--muted, #667085); font-size: 13.5px; max-width: 640px; }
.corp-sub { color: var(--muted, #667085); font-size: 12px; margin-top: 4px; }
.corp-spread { margin: 0 0 12px; }
.corp-empty { color: var(--muted, #667085); font-size: 13px; padding: 8px 0; }
.corp-table-wrap { overflow-x: auto; }
.corp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 4px 0 8px; }
.corp-split h3 { margin: 0 0 8px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: #475467; }
.corp-list { list-style: none; margin: 0; padding: 0; }
.corp-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid #eef0f3;
}
.corp-person {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.corp-person span { color: var(--muted, #667085); font-size: 12px; }
.corp-list em { font-style: normal; font-size: 12px; color: #475467; white-space: nowrap; }
.corp-status {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  background: #f2f4f7;
  color: #475467;
}
.corp-status.is-good { background: #e7f6ee; color: #17663a; }
.corp-status.is-warn { background: #fff6e0; color: #8a5a00; }
.corp-status.is-bad { background: #fdecea; color: #a01010; }
.corp-status.is-muted { background: #f2f4f7; color: #667085; }
@media (max-width: 800px) {
  .corp-panel-head { flex-direction: column; }
  .corp-split { grid-template-columns: 1fr; }
}

/* Ask Ivy — header control + side panel */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
html.pre-auth .ask-ivy-launch,
html.pre-auth #ask-ivy-root,
html.ask-ivy-off .ask-ivy-launch,
html.ask-ivy-off #ask-ivy-root { display: none !important; }

.ask-ivy-launch {
  background: var(--teal);
  color: var(--teal-on);
  border: 1px solid var(--teal);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  flex-shrink: 0;
}
.ask-ivy-launch:hover { background: var(--teal-2); }

/* Sits above the "? Ask / report" button (app-feedback.js), which owns the
   bottom-right corner and the photo / screenshot upload. */
.ask-ivy-fab {
  display: none;
  position: fixed;
  right: 18px;
  bottom: 76px;
  z-index: 1600;
  background: var(--teal);
  color: var(--teal-on);
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
}
body.hr-employee-locked .ask-ivy-fab { display: inline-flex; }
body.ask-ivy-open .ask-ivy-fab { display: none !important; }
body.ask-ivy-open .ivy-feedback-fab { display: none !important; }
/* A form or upload dialog is open: the floating buttons sat on top of its
   Sign & Submit / Upload buttons on phones. They come back when it closes. */
body.modal-open .ask-ivy-fab,
body.modal-open .ivy-feedback-fab { display: none !important; }

.ask-ivy-panel {
  position: fixed;
  top: var(--topbar-h);
  right: 0;
  bottom: 0;
  width: min(400px, 100vw);
  background: var(--card);
  border-left: 1px solid var(--card-line);
  box-shadow: -8px 0 28px rgba(15, 39, 45, 0.12);
  z-index: 1600;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.2s ease;
  pointer-events: none;
}
.ask-ivy-panel.is-open { transform: translateX(0); pointer-events: auto; }
.ask-ivy-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--line-soft);
}
.ask-ivy-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--fg);
}
.ask-ivy-chip {
  margin: 4px 0 0;
  display: inline-block;
  background: var(--gold-soft);
  color: var(--teal-ink);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
}
.ask-ivy-close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
  padding: 0 4px;
}
.ask-ivy-thread {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ask-ivy-welcome p { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.ask-ivy-suggestions { display: flex; flex-direction: column; gap: 6px; }
.ask-ivy-sugg {
  text-align: left;
  background: var(--card-2);
  border: 1px solid var(--card-line);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--teal);
  font-size: 13px;
}
.ask-ivy-sugg:hover { background: var(--muted-surface); }
.ask-ivy-bubble {
  max-width: 92%;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.45;
}
.ask-ivy-bubble.is-user {
  align-self: flex-end;
  background: var(--teal);
  color: var(--teal-on);
}
.ask-ivy-bubble.is-ivy {
  align-self: flex-start;
  background: var(--card-2);
  border: 1px solid var(--card-line);
  color: var(--fg);
}
.ask-ivy-via { margin-top: 6px; font-size: 11px; color: var(--muted); }
.ask-ivy-form {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--line-soft);
  align-items: flex-end;
}
.ask-ivy-form textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--input-line);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13.5px;
  color: var(--fg);
  background: var(--card-2);
}
.ask-ivy-send {
  background: var(--coral);
  color: var(--coral-on);
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 650;
}
.ask-ivy-foot {
  margin: 0;
  padding: 0 16px 12px;
  font-size: 11px;
  color: var(--muted-2);
}
.ask-ivy-report {
  margin: 0 16px 14px;
  align-self: flex-start;
  background: none;
  border: 1px solid var(--card-line);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg);
  cursor: pointer;
}
.ask-ivy-report:hover { background: var(--muted-surface); }
.today-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-end; margin-bottom: 18px; flex-wrap: wrap; }
.today-head .page-title { margin: 0; }
.today-head .page-lede { margin: 6px 0 0; }
.ivy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.ivy-grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ivy-stack { display: grid; gap: 12px; }
.ivy-flag { background: var(--card); border: 1px solid var(--card-line); border-radius: 16px; padding: 16px 18px; }
.ivy-flag h3 { margin: 0 0 6px; font-size: 18px; }
.ivy-flag.bad { background: var(--danger-soft); border-color: #F3C7C7; }
.ivy-flag.wait { background: var(--warn-soft); border-color: #F5DE9A; }
.ivy-flag.ok { background: var(--ok-soft); border-color: #B7E4CB; }
.ivy-ppd { margin: 2px 0 0; font-size: 15px; font-weight: 750; line-height: 1.35; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ivy-ppd .ppd-over,
.ivy-ppd .ppd-under { color: var(--danger); }
.ivy-ppd .ppd-ok,
.ivy-ppd .ppd-under-ok { color: var(--ok); }
.ivy-ppd .ppd-neutral { color: var(--muted); font-weight: 650; }
.ivy-tone { margin: 0 0 4px; font-size: 12px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ivy-flag.bad .ivy-tone, .ivy-bad { color: var(--danger); }
.ivy-flag.wait .ivy-tone { color: var(--warning); }
.ivy-flag.ok .ivy-tone { color: var(--good); }
.ivy-big { margin: 4px 0; font-size: 28px; font-weight: 750; letter-spacing: -0.03em; line-height: 1.1; }
.ivy-big span, .ivy-sub, .ivy-quiet, .ivy-kicker { font-size: 14px; font-weight: 500; color: var(--muted); }
.ivy-kicker { margin: 8px 0 4px; font-weight: 700; color: var(--fg); }
.ivy-sub { margin: 0; }
.ivy-quiet { margin: 6px 0; }
.ivy-names, .ivy-steps { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; }
.ivy-names li, .ivy-steps li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ivy-steps li.is-done span { text-decoration: line-through; color: var(--muted); }
.ivy-steps li.is-overdue em { color: var(--danger); font-style: normal; font-weight: 700; }
.ivy-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.ivy-form, .ivy-flag label { display: grid; gap: 4px; font-size: 13px; font-weight: 650; }
.ivy-form { gap: 12px; max-width: 520px; }
.ivy-form input, .ivy-form select, .ivy-flag input, .ivy-flag select {
  font: inherit; font-weight: 500; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--card);
}
.ivy-row, .ivy-switch { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.applicants-page .btn, .dept-training .btn { min-height: 44px; }
.applicants-page .ivy-form { max-width: 100%; }
.applicants-page .ivy-form input,
.applicants-page .ivy-form select,
.applicants-page .ivy-form textarea { min-height: 44px; font-size: 16px; }
.hiring-pipeline { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; }
.hiring-pipeline li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.hiring-pipeline li.is-current { font-weight: 750; color: var(--teal-deep); }
.hiring-pipeline li.is-done { color: var(--muted); }
.hiring-pipeline em { font-style: normal; color: var(--muted); font-size: 13px; }
.out-of-range { color: var(--coral-ink); background: var(--coral-soft); border: 1px solid var(--coral-line); border-radius: 10px; padding: 10px 12px; }
.ivy-switch .is-on { background: var(--teal); color: var(--teal-on); border-color: var(--teal); }
.btn-sm { padding: 4px 10px; font-size: 13px; }
.ivy-back { margin: 0 0 10px; }
.ivy-fold { margin: 8px 0; position: relative; z-index: 2; }
.ivy-fold summary {
  cursor: pointer;
  font-weight: 700;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 252, 248, 0.72);
  touch-action: manipulation;
  list-style: none;
}
.ivy-fold summary::-webkit-details-marker { display: none; }
.ivy-fold summary::before {
  content: '▶';
  font-size: 12px;
  flex: 0 0 auto;
  width: 1em;
}
.ivy-fold[open] summary::before { content: '▼'; }
.ivy-fold[open] summary { margin-bottom: 4px; }
.ivy-flag.is-tappable { position: relative; }
.ivy-flag h3 a.ivy-dept-hit { color: inherit; text-decoration: none; }
.ivy-flag h3 a.ivy-dept-hit:hover { text-decoration: none; }
.ivy-dept-hit .ivy-stretch { position: absolute; inset: 0; z-index: 1; }
.ivy-dept-cue { margin: 8px 0 0; color: var(--teal); font-weight: 750; }
.ivy-flag.is-tappable .btn,
.ivy-flag.is-tappable a.btn,
.ivy-flag.is-tappable button { position: relative; z-index: 2; }
.dept-page { overflow-x: clip; }
.dept-page .page-shell-inner { min-width: 0; }
.dept-detail { display: grid; gap: 14px; max-width: 720px; min-width: 0; }
.dept-example {
  background: var(--warn-soft);
  border: 1px solid #F5DE9A;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 750;
}
.dept-back { min-height: 44px; display: inline-flex; align-items: center; }
.dept-day, .dept-drivers {
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: 16px;
  padding: 14px;
  min-width: 0;
}
.dept-day.is-worst { border-color: var(--coral-line); box-shadow: inset 4px 0 0 var(--coral); }
.dept-day.is-low-census { border-color: var(--coral-line); background: var(--coral-soft); }
.dept-low {
  background: var(--coral-soft);
  border: 1px solid var(--coral-line);
  color: var(--coral-ink);
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 750;
  margin: 10px 0 0;
}
.dept-low p { margin: 0 0 6px; }
.dept-ot, .dept-census, .dept-calloffs, .dept-week {
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: 16px;
  padding: 14px;
  min-width: 0;
}
.dept-ot { display: grid; gap: 12px; }
.dept-week h4, .dept-ot h3, .dept-census h3, .dept-calloffs h3 { margin: 0 0 6px; }
.dept-week + .dept-week { margin-top: 8px; }
.ot-offer, .dept-week h4.ot-offer { color: var(--teal-deep); }
.ot-position {
  margin: 12px 0 4px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.dept-week .ot-person {
  display: grid;
  gap: 2px;
  align-items: start;
  padding: 8px 0;
  border-bottom: 1px solid var(--card-line);
}
.dept-week .ot-person .ivy-fold { margin: 2px 0 0; width: 100%; }
.staff-controls { display: grid; gap: 14px; max-width: 720px; }
.staff-page .btn,
.staff-page input,
.staff-page select,
.staff-controls .btn,
.staff-controls input,
.staff-controls select,
.today-page .ivy-form .btn,
.today-page .ivy-form input,
.today-page .ivy-form select,
.staff-controls .ivy-check,
.staff-page .ivy-check,
.today-page .ivy-check {
  min-height: 44px;
}
.staff-controls .ivy-check { align-items: center; }
.staff-people { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.dept-day-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.dept-day-top h3 { margin: 0; font-size: 17px; }
.dept-worst-tag {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--coral-ink);
}
.dept-gap { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.dept-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 0; }
.dept-stats div { background: rgba(255, 255, 255, 0.72); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.dept-stats dt { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.dept-stats dd { margin: 2px 0 0; font-size: 18px; font-weight: 750; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dept-drivers h3 { margin: 0 0 8px; }
.dept-drivers ol { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.dept-days { display: grid; gap: 12px; min-width: 0; }
.dept-detail, .dept-day, .dept-event, .ivy-names { overflow-wrap: anywhere; }
.ivy-fold .ivy-names li,
.dept-day .ivy-names li {
  display: grid;
  gap: 2px;
  align-items: start;
  padding: 8px 0;
  border-bottom: 1px solid var(--card-line);
}
.ivy-table-wrap { overflow-x: auto; }
.ivy-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ivy-table th, .ivy-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ivy-check { display: flex; gap: 8px; align-items: center; font-weight: 500; margin: 6px 0; }
@media (max-width: 720px) {
  .ivy-grid, .ivy-grid-3 { grid-template-columns: 1fr; }
  .today-head { align-items: stretch; }
  .today-head .page-actions { width: 100%; }
  .ivy-flag { padding: 14px; }
  .ivy-big { font-size: 24px; }
  .ask-ivy-launch { display: none !important; }
  html:not(.pre-auth):not(.ask-ivy-off) .ask-ivy-fab { display: inline-flex; }
  .ask-ivy-panel {
    top: auto;
    height: min(78vh, 640px);
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--card-line);
    border-radius: 16px 16px 0 0;
  }
}

.duty-grid { width: 100%; border-collapse: collapse; font-size: 13px; }
.duty-grid th, .duty-grid td { border: 1px solid var(--card-line); padding: 8px; vertical-align: top; }
.duty-grid td.bad, .duty-grid th.bad { background: var(--danger-soft); color: var(--fg); }
.duty-grid td.wait, .duty-grid th.wait { background: var(--warn-soft); color: var(--fg); }
.duty-grid td.ok, .duty-grid th.ok { background: var(--ok-soft); color: var(--fg); }
.duty-scroll { overflow-x: auto; }

/* ============================================================
   Warm healthcare — type, chrome, and auth
   Later rules so headings, tables, and the sign-in shell
   pick up Plus Jakarta Sans and the coral / teal tokens.
   ============================================================ */
body { font-size: 14.5px; line-height: 1.55; }

.page-title,
.page-shell .page-header .page-title,
.hero h1,
.brand-name {
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.page-title { font-size: 28px; }
.crumb-section,
.card > h2,
.card > .card-head h2,
.card-head-inline h2,
.card-head-inline h3,
.premium-card h2, .premium-card h3,
.facility-card h2, .facility-card h3,
.facility-card-deep h2, .facility-card-deep h3,
.spend-card h2, .spend-card h3,
.empty h3,
.empty-state-card h3,
.ask-ivy-head h2,
.qapi-welcome-title,
.qapi-fix-card-head h3,
.qapi-step-title,
.qapi-week-heading,
.qapi-adv-card h3 {
  font-weight: 650;
  letter-spacing: -0.02em;
}

.topbar {
  background: var(--card-2);
  box-shadow: var(--shadow-sm);
}
.tbl th, .ivy-table th, .spend-table th, .tbl-legacy th {
  background: var(--teal-soft);
  color: var(--teal);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.tbl tr.is-clickable:hover td,
.ivy-table tbody tr:hover td { background: var(--teal-soft); }
.card, .premium-card, .facility-card, .ivy-flag {
  box-shadow: var(--shadow-sm);
}
.btn:focus-visible,
.button:focus-visible,
.nav-item:focus-visible,
.fac-pill:focus-visible,
.icon-btn:focus-visible,
a.btn:focus-visible {
  outline: 2px solid var(--teal-2);
  outline-offset: 2px;
}
.btn-cta:focus-visible { outline-color: var(--coral-ink); }

/* Employee / operator sign-in. brandedShell paints these classes. */
.portal-auth {
  min-height: 100vh;
  background:
    radial-gradient(900px 420px at 50% -8%, rgba(196, 73, 42, 0.16), transparent 60%),
    linear-gradient(180deg, var(--teal-soft) 0%, var(--bg) 48%);
  padding: 48px 16px 80px;
  margin: -20px 0 0 0;
}
.portal-auth-brand {
  max-width: 460px;
  margin: 0 auto 18px;
  text-align: center;
}
.portal-auth-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: var(--card-2);
  border-radius: 999px;
  box-shadow: var(--shadow);
  border: 1px solid var(--card-line);
  margin-bottom: 10px;
}
.portal-auth-lockup img { width: 32px; height: 32px; object-fit: contain; display: block; }
.portal-auth-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.01em;
  text-align: left;
}
.portal-auth-sub {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-align: left;
}
.portal-auth-sites { font-size: 12px; color: var(--muted); }
.portal-auth-foot {
  max-width: 460px;
  margin: 24px auto 0;
  text-align: center;
  font-size: 12px;
  color: var(--muted-2);
}
.auth-card {
  max-width: 420px;
  margin: 0 auto;
  padding: 32px 32px 28px;
  background: var(--card-2);
  border: 1px solid var(--card-line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}
.auth-card h3 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--teal);
  text-align: center;
}
.auth-lede {
  color: var(--muted);
  font-size: 14px;
  margin: 6px 0 22px;
  text-align: center;
}
.auth-field { margin-bottom: 14px; }
.auth-field label {
  display: block;
  font-size: 12px;
  font-weight: 650;
  color: var(--fg-soft);
  margin-bottom: 6px;
}
.auth-field input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--input-line);
  border-radius: var(--r);
  font-size: 14px;
  box-sizing: border-box;
  background: #fff;
}
.auth-submit {
  width: 100%;
  padding: 12px;
  background: var(--coral);
  color: var(--coral-on);
  border: none;
  border-radius: var(--r);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}
.auth-submit:hover { background: var(--coral-hover); }
.auth-alt {
  flex: 1;
  padding: 10px;
  background: #fff;
  color: var(--teal);
  border: 1px solid var(--teal);
  border-radius: var(--r);
  font-weight: 650;
  font-size: 13.5px;
  cursor: pointer;
}
.auth-alt:hover { background: var(--teal-soft); }
.auth-link { color: var(--teal); font-weight: 650; text-decoration: none; }
.auth-link:hover { text-decoration: underline; }
.auth-error { color: var(--danger); font-size: 13px; margin: 12px 0 0; display: none; }
.auth-note { font-size: 12.5px; color: var(--muted); margin: 0 0 10px; text-align: center; }
.auth-split { border-top: 1px solid var(--line-soft); margin: 20px 0 0; padding-top: 16px; }

/* Public survey form (feedback-respond.html also loads styles.css) */
.survey-public {
  min-height: 100vh;
  background:
    radial-gradient(700px 280px at 50% -10%, rgba(196, 73, 42, 0.14), transparent 60%),
    var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
}
.survey-public main { max-width: 34rem; margin: 0 auto; padding: 2rem 1.25rem 3rem; }
.survey-public .kicker {
  margin: 0 0 0.4rem;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}
.survey-public h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 0.6rem;
}
.survey-public p { line-height: 1.5; color: var(--fg-soft); }
.survey-public fieldset {
  border: 1px solid var(--card-line);
  background: var(--card-2);
  border-radius: var(--r-lg);
  margin: 0 0 1rem;
  padding: 0.9rem 1rem 0.7rem;
  box-shadow: var(--shadow-sm);
}
.survey-public legend { float: left; width: 100%; padding: 0; font-weight: 700; margin: 0 0 0.6rem; color: var(--fg); line-height: 1.4; }
.survey-public legend + * { clear: both; }
.survey-public label { display: block; margin: 0.4rem 0; font-weight: 550; }
.survey-public textarea, .survey-public button { font: inherit; }
.survey-public textarea {
  width: 100%;
  min-height: 6rem;
  border: 1px solid var(--input-line);
  border-radius: var(--r);
  padding: 10px 12px;
}
.survey-public button {
  background: var(--coral);
  color: var(--coral-on);
  border: 0;
  border-radius: 999px;
  padding: 0.85rem 1.4rem;
  font-weight: 700;
  cursor: pointer;
}
.survey-public button:hover { background: var(--coral-hover); }
.survey-public .err { color: var(--danger); font-weight: 650; }

.staff-root.is-sheet .staff-wknav { display: none; }
.sched-sheet { display: grid; gap: 12px; }
.sched-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: end; }
.sched-depts { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.sched-dept { border: 1px solid var(--line, #d7d2c8); background: #fff; border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 650; cursor: pointer; }
.sched-dept.is-on { background: #14343a; color: #fff; border-color: #14343a; }
.sched-kicker { margin: 0; text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; font-weight: 750; color: var(--teal, #0f6e6e); }
.sched-head h3 { margin: 0; font-size: 1.4rem; }
.sched-note { margin: 4px 0 0; color: var(--fg-soft, #555); }
.sched-tools, .sched-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sched-range { font-size: 1rem; }
.sched-scroll { overflow-x: auto; border: 1px solid var(--card-line, #ddd); border-radius: 12px; background: #fff; }
.sched-grid { border-collapse: collapse; width: max-content; min-width: 100%; font-size: 13px; }
.sched-grid th, .sched-grid td { border: 1px solid #d7d7d7; padding: 4px; text-align: center; }
.sched-grid td.sched-cell, .sched-grid th.sched-day { min-width: 108px; }
.sched-grid td.sched-cell { padding: 0; }
.sched-name { text-align: left; position: sticky; left: 0; background: #fff; min-width: 148px; z-index: 1; }
.sched-grid thead th { background: #f4f4f4; font-size: 11px; }
.sched-day span { display: block; }
.sched-group th { background: #111; color: #fff; text-align: left; letter-spacing: 0.04em; }
.sched-hit, .sched-input { width: 100%; min-width: 104px; min-height: 44px; border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 700; text-align: center; color: inherit; padding: 8px 6px; box-sizing: border-box; border-radius: 4px; white-space: nowrap; }
.sched-input:focus { outline: none; background: #fff; }
.sched-cell.is-range { background: #e5f4f4; }
.sched-cell.is-anchor, .sched-cell.is-editing { outline: 2px solid #0f6e6e; outline-offset: -2px; background: #fff; }
.sched-scroll { position: relative; }
.sched-fill { position: absolute; width: 16px; height: 16px; background: #0f6e6e; border: 2px solid #fff; border-radius: 3px; z-index: 4; touch-action: none; cursor: crosshair; box-sizing: border-box; }
.sched-fill[hidden] { display: none !important; }
.sched-grip { border: 0; background: transparent; color: #667; cursor: grab; touch-action: none; padding: 6px 4px; font-size: 14px; line-height: 1; }
.sched-name.is-drop { outline: 2px solid #0f6e6e; background: #e5f4f4; }
.sched-week-sep { color: #888; margin: 0 2px; }
.sched-ot { background: #fff4cc; color: #8a5a00; font-weight: 800; border-radius: 4px; padding: 1px 4px; }
.sched-save { min-width: 4.5rem; font-size: 13px; font-weight: 750; color: #667; }
.sched-save.is-saved { color: #0f6b3c; }
.sched-save.is-saved::before { content: "✓ "; }
.sched-drop summary { cursor: pointer; min-height: 36px; padding: 6px 2px; font-weight: 700; }
.sched-drop[open] { background: #fff; }
.sched-match { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; width: max-content; max-width: 100%; background: #fff8e8; border: 1px solid #e4c56a; border-radius: 12px; padding: 10px 12px; }
.sched-match[hidden] { display: none !important; }
.sched-match p { margin: 0; }
.sched-totals th, .sched-totals td { background: #f6f6f6; font-weight: 750; font-variant-numeric: tabular-nums; }
.sched-cell.is-invalid { background: #fdecea; outline: 2px solid #a01010; outline-offset: -2px; }
.sched-bad { display: block; font-size: 11px; font-weight: 700; color: #a01010; line-height: 1.1; padding: 0 2px 4px; text-align: center; }
.sched-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 12px; background: #fff6e8; border: 1px solid #e2b15a; border-radius: 8px; }
.sched-confirm p { margin: 0; font-weight: 700; }
.sched-cell.is-off { color: #666; background: #f7f7f7; }
.sched-cell.is-on { font-weight: 700; }
.sched-total { font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 148px; vertical-align: middle; }
.sched-total-head { min-width: 148px; white-space: normal; line-height: 1.25; font-size: 11px; }
.sched-load { display: block; font-weight: 800; }
.sched-weeks { display: block; margin-top: 2px; font-size: 11px; font-weight: 650; color: #555; }
.sched-ot-note { display: block; margin-top: 2px; font-size: 11px; font-weight: 800; color: #8a5a00; }
.sched-ot-note[hidden] { display: none !important; }
.sched-total.is-ot { background: #fff4cc; }
.sched-hint { margin: 0; font-weight: 750; }
.sched-rule { margin: 0; max-width: 68rem; color: var(--fg-soft, #334155); }
.sched-how { margin-top: 8px; background: #f7f7f7; border-radius: 10px; padding: 8px 12px; }
.sched-how summary { cursor: pointer; font-weight: 750; min-height: 32px; }
.sched-how ul { margin: 8px 0 0; padding-left: 18px; }
.sched-how li { margin: 4px 0; }
.sched-cell.is-empty { background: #fbfbfb; }
.sched-cell.is-bare { background: #fff8e8; }
.sched-bare-note { display: block; font-size: 10px; font-weight: 750; color: #6a5420; line-height: 1.15; padding: 0 4px 4px; text-align: center; }
.sched-flagnote { display: block; font-size: 10px; font-weight: 750; line-height: 1.15; padding: 1px 4px 3px; text-align: center; border-radius: 4px; }
.sched-flags .sched-flagnote { display: inline-block; margin: 0 4px 0 0; padding: 2px 6px; font-size: 11px; }
.sched-flags { margin: 4px 0 0; font-size: 12px; color: var(--muted, #555); }
.sched-flagnote.flag-noshow { color: #8a1c1c; background: #fdeaea; }
.sched-flagnote.flag-unsched { color: #6a3d00; background: #fff1d6; }
.sched-flagnote.flag-over, .sched-flagnote.flag-under { color: #23466e; background: #e7f0fb; }
.sched-cell.has-flag.flag-noshow { box-shadow: inset 0 0 0 2px #e3a3a3; }
.sched-cell.has-flag.flag-unsched { box-shadow: inset 0 0 0 2px #e8c27a; }
.sched-input::placeholder { color: #9aa3a8; font-weight: 700; }
.sched-pop { position: fixed; z-index: 40; max-width: 320px; padding: 8px; background: #fff; border: 1px solid #c9c9c9; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); }
.sched-pop[hidden] { display: none !important; }
.sched-pop-row, .sched-pop-custom { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sched-pop-custom { margin-top: 8px; }
.sched-pop button, .sched-pop-custom input { min-height: 40px; }
.sched-pop button { padding: 6px 10px; border-radius: 8px; border: 1px solid #cfcfcf; background: #f7f7f7; font-weight: 750; cursor: pointer; }
.sched-pop button:hover, .sched-pop button:focus { background: #e5f4f4; border-color: #0f6e6e; }
.sched-pop-custom input { width: 88px; font: inherit; padding: 6px 8px; border: 1px solid #c5d6d3; border-radius: 8px; }
.sched-pop-bad { flex-basis: 100%; margin: 0; color: #a01010; font-size: 12px; font-weight: 700; }
.sched-pop-bad[hidden] { display: none !important; }
.sched-find { position: relative; min-width: 240px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sched-find [data-sched-find] { min-width: 220px; min-height: 40px; font: inherit; padding: 6px 10px; border: 1px solid #c5d6d3; border-radius: 8px; }
.sched-other { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; min-height: 40px; }
.sched-results { position: absolute; z-index: 25; left: 0; top: calc(100% + 4px); width: min(360px, 80vw); max-height: 260px; overflow: auto; background: #fff; border: 1px solid #ccc; border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }
.sched-results[hidden] { display: none !important; }
.sched-cand { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; border: 0; border-bottom: 1px solid #eee; background: #fff; padding: 8px 10px; min-height: 44px; cursor: pointer; }
.sched-cand[hidden] { display: none !important; }
.sched-cand:hover, .sched-cand:focus { background: #e5f4f4; }
.sched-cand-name { font-weight: 750; }
.sched-cand-pos { font-size: 12px; color: #555; font-weight: 650; }
.sched-cand-empty { margin: 0; padding: 10px; color: #555; }
.sched-notin { flex-basis: 100%; }
.sched-notin summary { cursor: pointer; font-weight: 750; color: #8a5a00; min-height: 32px; }
.sched-notin form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.sched-remove { border: 0; background: transparent; color: #8a3030; font-size: 20px; line-height: 1; min-width: 32px; min-height: 32px; cursor: pointer; font-weight: 700; vertical-align: middle; }
.sched-grid .sched-name { min-width: 180px; white-space: normal; }
.sched-ok { background: #e7f6ec; color: #0f6b3c; }
.sched-wait { background: #fff4cc; color: #8a5a00; }
.sched-bad { background: #fde8e8; color: #9c1c1c; }
.sched-muted { background: #f2f2f2; color: #5c6570; }
.sched-flag { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; color: #8a5a00; }
.sched-picker { display: grid; gap: 8px; padding: 12px; border: 1px solid #e4c56a; border-radius: 12px; background: #fff8e8; }
.sched-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.sched-presets button, .sched-picker button { min-height: 36px; }
.sched-empty { padding: 18px; text-align: left; }
.dept-schedule { background: var(--card, #fff); border: 1px solid var(--card-line, #ddd); border-radius: 16px; padding: 14px; display: grid; gap: 8px; }
.dept-schedule h3, .dept-schedule h4 { margin: 0; }
.dept-schedule .sched-bad,
.dept-schedule .sched-wait,
.dept-schedule .sched-ok { border-radius: 10px; padding: 8px 10px; }
.dept-schedule .ivy-names { display: grid; gap: 6px; list-style: none; padding: 0; margin: 0; }
.dept-schedule .ivy-names li { display: grid; gap: 2px; }
.er-page { display: grid; gap: 14px; max-width: 40rem; }
.er-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.er-nav a, .er-page .btn, .er-page button, .er-page input, .er-page select, .er-page textarea {
  min-height: 44px;
}
.er-page textarea { min-height: 88px; width: 100%; }
.er-page input, .er-page select { width: 100%; }
.er-q, .er-card {
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: 16px;
  padding: 12px;
  display: grid;
  gap: 8px;
}
.er-q p { margin: 0; }
.er-note {
  background: var(--teal-soft);
  border: 1px solid var(--teal-line);
  border-radius: 12px;
  padding: 10px 12px;
}
.er-example {
  background: var(--coral-soft);
  border: 1px solid var(--coral-line);
  color: var(--coral-ink);
  font-weight: 750;
  border-radius: 12px;
  padding: 10px 12px;
}
.er-expired, .er-soon { display: block; margin: 6px 0; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; }
.er-expired { background: var(--coral-soft); border-color: var(--coral-line); color: var(--coral-ink); }
.er-soon { background: #FBF3D8; border-color: #F5DE9A; color: #6B4E12; }
.er-miss { color: var(--coral-ink); font-weight: 700; }
.er-switch { display: flex; gap: 8px; align-items: center; font-weight: 650; min-height: 44px; }
.er-switch input { width: auto; min-height: 24px; }
.er-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.er-section { margin: 0; font-size: 1.05rem; }

/* Mock Survey */
.ms { display: grid; gap: 14px; min-width: 0; }
.ms-headline { margin: 0; font-size: 1.15rem; font-weight: 750; color: var(--fg); }
.ms-disclaimer, .ms-fresh, .ms-links, .ms-signals, .ms-why { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.ms-links a { color: var(--teal); font-weight: 650; }
.ms-scorecards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.ms-card {
  display: grid; gap: 4px; text-align: left; width: 100%;
  background: var(--card); color: var(--fg);
  border: 1px solid var(--line); border-left: 4px solid var(--teal);
  border-radius: 12px; padding: 12px 14px; cursor: pointer;
  font: inherit;
}
.ms-card.is-high { border-left-color: var(--danger); }
.ms-card.is-elevated { border-left-color: var(--coral); }
.ms-card.is-watch { border-left-color: #C9A227; }
.ms-card.is-quiet { border-left-color: var(--teal); }
.ms-card.is-none { border-left-color: var(--muted); }
.ms-card.is-on { outline: 2px solid var(--teal); }
.ms-rank { color: var(--muted); font-size: 12px; font-weight: 700; }
.ms-name { font-weight: 750; font-size: 1.05rem; }
.ms-score { font-size: 1.8rem; font-weight: 800; line-height: 1; }
.ms-band { font-weight: 700; }
.ms-counts, .ms-signals { font-size: 12px; color: var(--muted); }
.ms-tags, .ms-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ms-mini {
  display: inline-block; padding: 2px 6px; border-radius: 999px;
  background: var(--teal-soft); color: var(--teal-ink); font-size: 12px; font-weight: 700;
}
.ms-filters { display: grid; gap: 8px; }
.ms-chip.is-on { background: var(--teal); color: var(--teal-on); border-color: var(--teal); }
.ms-select { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--muted); max-width: 280px; }
.ms-select input, .ms-select select { font: inherit; font-weight: 500; color: var(--fg); padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.ms-list { display: grid; gap: 10px; }
.ms-finding, .ms-resident {
  background: var(--card); border: 1px solid var(--card-line); border-radius: 12px; padding: 12px 14px;
  display: grid; gap: 6px;
}
.ms-resident .ms-finding { background: var(--bg); }
.ms-finding header, .ms-resident header { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ms-ftag { font-weight: 800; letter-spacing: 0.02em; }
.ms-ftag-title, .ms-who, .ms-reason, .ms-cited, .ms-pull { margin: 0; }
.ms-reason { line-height: 1.45; }
.ms-cited { color: var(--coral-ink); font-weight: 650; }
.ms-fac, .ms-count { color: var(--muted); font-size: 13px; }
.ms-count { font-weight: 700; }
.ms-evidence, .ms-records { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.ms-evidence li, .ms-records li { display: grid; gap: 2px; }
.ms-ev-meta, .ms-ev-id { color: var(--muted); font-size: 12px; }
.ms-ev-text { font-size: 13px; }
.ms-gaps, .ms-sources { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.ms-gaps h3, .ms-sources h3 { margin: 0 0 6px; font-size: 1rem; }
.ms-gaps ul, .ms-sources ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 8px; }
.ms-gaps li, .ms-sources li { line-height: 1.45; overflow-wrap: anywhere; }
.ms-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; justify-content: space-between; }
.ms-toolbar-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ms-report-title { margin: 0; font-size: 1.25rem; }
.ms-def { background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.ms-def-head {
  display: flex; gap: 12px; align-items: flex-start; width: 100%;
  text-align: left; background: transparent; border: 0; color: inherit;
  font: inherit; padding: 14px 16px; cursor: pointer;
}
.ms-def-copy { display: grid; gap: 4px; }
.ms-def-title { font-weight: 750; font-size: 1.02rem; line-height: 1.35; }
.ms-def-meta { color: var(--muted); font-size: 13px; }
.ms-detail { display: grid; gap: 8px; padding: 0 16px 16px; }
.ms-kicker { margin: 4px 0 0; font-size: 12px; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.ms-scope { margin: 0; }
.ms-tag-print { margin: 0; color: var(--muted); font-size: 13px; }
.ms-confidence { margin: 0; font-weight: 700; font-size: 13px; }
.ms-confidence.is-confirmed { color: var(--teal-ink, var(--teal)); }
.ms-confidence.is-likely { color: var(--coral-ink, var(--coral)); }
.ms-confidence.is-missing { color: var(--muted); }
.ms-people, .ms-fixes { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.ms-person { display: inline; padding: 0; border: 0; background: none; color: var(--teal-ink, var(--teal)); font: inherit; font-weight: 700; text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.ms-person.is-on { color: var(--ink, #1c1917); }
.ms-drill { margin: 8px 0 4px; padding: 10px 12px; border: 1px solid var(--line, #e4ddd2); border-radius: 10px; background: #fff; display: grid; gap: 8px; }
.ms-records { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ms-record { display: grid; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--line, #e4ddd2); }
.ms-record .ms-ev-text { white-space: pre-wrap; }
.ms-verify { margin: 0; font-size: 13px; color: var(--muted, #57534e); }
.ms-ask { margin: 0; }
.ms-charts { display: grid; gap: 14px; margin: 8px 0 18px; }
.ms-chart, .ms-tile { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--card, #fff); display: grid; gap: 8px; }
.ms-chart h3, .ms-charts > h3 { margin: 0; font-size: 18px; }
.ms-chart-caption, .ms-chart-tip, .ms-chart-empty, .ms-draft-note { margin: 0; color: var(--muted, #57534e); font-size: 14px; }
.ms-chart-actions, .ms-drafts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ms-chart-scroll { overflow-x: auto; }
.ms-chart-svg { width: 100%; min-width: 520px; height: auto; display: block; }
.ms-unit-heat, .ms-matrix { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 13px; }
.ms-unit-heat th, .ms-unit-heat td, .ms-matrix th, .ms-matrix td { padding: 4px; text-align: center; }
.ms-matrix-cell { min-width: 28px; min-height: 28px; border-radius: 6px; border: 1px solid var(--line); background: #fff; }
.ms-matrix-cell.is-again { background: #ffedd5; border-color: #c2410c; font-weight: 700; }
.ms-psych-row { display: grid; grid-template-columns: 9rem 1fr auto; gap: 8px; align-items: center; width: 100%; text-align: left; background: transparent; border: 0; padding: 4px 0; }
.ms-psych-track { display: block; height: 10px; background: #f1efe9; border-radius: 99px; }
.ms-psych-track span { display: block; height: 10px; background: #0C5F66; border-radius: 99px; }
.ms-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ms-legend-inline .is-weak-swatch { background: rgba(12, 95, 102, 0.4); }
@media (max-width: 720px) {
  .ms-tiles { grid-template-columns: 1fr; }
  .ms-psych-row { grid-template-columns: 1fr; }
  .ms-chart-svg, .ms-unit-heat, .ms-matrix { min-width: 480px; }
}
.ms-cell small { display: block; font-size: 11px; font-weight: 650; line-height: 1.3; }
.ms-fix-meta { display: block; color: var(--muted); font-size: 13px; }
.ms-owner { display: grid; gap: 10px; min-width: 0; }
.ms-heat-wrap, .ms-trend-scroll { overflow-x: auto; max-width: 100%; min-width: 0; -webkit-overflow-scrolling: touch; }
.ms-heat-wrap { border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.ms-heat { border-collapse: separate; border-spacing: 0; min-width: 860px; width: 100%; }
.ms-heat th, .ms-heat td { padding: 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ms-heat thead th { font-size: 12px; font-weight: 700; text-align: left; padding: 8px; color: var(--fg); background: var(--card); line-height: 1.25; white-space: normal; max-width: 96px; }
.ms-heat th:first-child { position: sticky; left: 0; z-index: 1; background: var(--card); min-width: 108px; padding: 8px; text-align: left; }
.ms-cell {
  display: grid; gap: 1px; justify-items: center; align-content: center;
  width: 100%; min-width: 76px; min-height: 64px; border: 0; cursor: pointer;
  font: inherit; padding: 6px 4px;
}
.ms-cell b { font-size: 1.15rem; line-height: 1; }
.ms-cell span, .ms-cell small { font-size: 10px; font-weight: 650; letter-spacing: 0; }
.ms-cell.is-missing { background: #e6e1d8; color: #5c564c; }
.ms-cell.is-clear { background: #e7f2ef; color: #0c5f66; }
.ms-cell.is-watch { background: #f8e7c2; color: #6b4e12; }
.ms-cell.is-high { background: #f6c7a8; color: #7c2d12; }
.ms-cell.is-severe { background: #e07a5f; color: #3f1210; }
.ms-legend-inline { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0; color: var(--muted); font-size: 12px; }
.ms-legend-inline i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.ms-legend-inline i.is-clear { background: #e7f2ef; }
.ms-legend-inline i.is-watch { background: #f8e7c2; }
.ms-legend-inline i.is-high { background: #f6c7a8; }
.ms-legend-inline i.is-severe { background: #e07a5f; }
.ms-legend-inline i.is-missing { background: #e6e1d8; }
.ms-trend { display: grid; gap: 6px; min-width: 0; }
.ms-trend-caption { margin: 0; font-size: 14px; line-height: 1.4; }
.ms-trend-note, .ms-trend-summary { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.ms-trend-tip { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 13px; line-height: 1.45; min-height: 2.6em; }
.ms-yaxis-label { display: none; margin: 0; font-size: 13px; font-weight: 700; }
.ms-trend-svg { width: 100%; min-width: 0; height: auto; background: var(--card); border: 1px solid var(--line); border-radius: 12px; display: block; }
.ms-axis, .ms-tick { fill: var(--muted); font-size: 12px; }
.ms-axis.is-gap, .ms-gap-label { fill: #8a8378; font-size: 11px; }
.ms-yaxis { fill: var(--fg); font-size: 11px; }
.ms-grid { stroke: #e4ddd2; stroke-width: 1; }
.ms-latest { font-size: 13px; font-weight: 750; }
.ms-trend-legend { display: flex; flex-wrap: wrap; gap: 8px; }
.ms-legend-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 6px 10px; font: inherit; cursor: pointer; }
.ms-legend-btn.is-on { border-color: var(--teal); font-weight: 750; }
.ms-legend-btn i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ms-onepage { display: none; }
.ms-details { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
@media (max-width: 720px) {
  .ms-score { font-size: 1.5rem; }
  .ms-card, .ms-finding, .ms-resident, .ms-def-head { padding: 12px; }
  .ms-toolbar { align-items: stretch; }
  .ms-yaxis { display: none; }
  .ms-yaxis-label { display: block; }
}
@media print {
  .sidebar, .topbar, .page-header, .ms-noprint, .ms-def, .ms-sample, .ms-gaps, .ms-sources, .ms-disclaimer, .ms-owner { display: none !important; }
  .ms-onepage { display: block; }
  .ms-onepage li { margin: 0 0 8px; }
  .ms { gap: 8px; }
  /* Mock Survey one-pager: black on white, one table, nothing that needs colour. */
  .ms-onepage { color: #000; font-size: 10pt; line-height: 1.35; }
  .ms-onepage h2 { margin: 0 0 2pt; font-size: 15pt; font-weight: 800; }
  .ms-onepage p { margin: 0 0 5pt; }
  .ms-onepage .ms-op-meta { color: #333; font-size: 9pt; }
  .ms-onepage .ms-op-risk { font-size: 11pt; }
  .ms-onepage .ms-op-head { font-weight: 700; }
  .ms-op-table { width: 100%; border-collapse: collapse; margin: 4pt 0 8pt; font-size: 9.5pt; }
  .ms-op-table th { text-align: left; font-size: 8.5pt; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1.5pt solid #000; padding: 3pt 5pt 3pt 0; }
  .ms-op-table td { border-bottom: .75pt solid #999; padding: 4pt 5pt 4pt 0; vertical-align: top; }
  .ms-op-table tr { break-inside: avoid; }
  .ms-op-table .ms-op-l { white-space: nowrap; }
  .ms-op-table .ms-op-l b { font-size: 13pt; display: block; }
  .ms-op-table .ms-op-l span, .ms-op-table .ms-op-cited { display: block; font-size: 8.5pt; }
  .ms-op-table .ms-op-cited { font-style: italic; margin-top: 2pt; }
  .ms-onepage .ms-op-cov, .ms-onepage .ms-op-foot { font-size: 8.5pt; color: #222; }
  .ms-onepage .ms-op-foot { border-top: .75pt solid #999; padding-top: 4pt; }
}

/* Employee file: put the name on its own line above the button row so it never squeezes into one-word lines. */
.page-shell .page-header:has(#btn-preview-portal) { flex-direction: column; align-items: stretch; gap: 12px; }
.page-shell .page-header:has(#btn-preview-portal) .page-actions { flex-wrap: wrap; }
/* Employee file: let the right column shrink so nothing runs off the side on a phone. */
.hr-prof-wrap { grid-template-columns: 320px minmax(0, 1fr); }
.hr-prof-wrap > * { min-width: 0; }
@media (max-width: 900px) { .hr-prof-wrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .page-shell .page-header:has(#btn-preview-portal) select { min-width: 160px; } }
/* Employee file buttons: wrap inside the screen width on a phone. */
.page-shell .page-header:has(#btn-preview-portal) .page-actions > div { min-width: 0; flex: 1 1 100%; }
.page-shell .page-header:has(#btn-preview-portal) .page-actions > div > span { flex-wrap: wrap; max-width: 100%; }
@media (max-width: 700px) { .page-shell .page-header:has(#btn-preview-portal) .page-actions > div > span { margin-left: 0 !important; } }

/* HR & Onboarding: four tabs + a More menu. */
.hr-tab-more { position: relative; display: inline-block; }
.hr-tab-more > summary { list-style: none; cursor: pointer; }
.hr-tab-more > summary::-webkit-details-marker { display: none; }
.hr-tab-more-menu { position: absolute; left: 0; top: calc(100% + 4px); z-index: 30; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 6px; display: flex; flex-direction: column; min-width: 200px; }
.hr-tab-more-item { text-align: left; background: none; border: 0; padding: 9px 12px; border-radius: 8px; font-size: 14px; cursor: pointer; color: inherit; }
.hr-tab-more-item:hover, .hr-tab-more-item.is-active { background: #eef5f4; font-weight: 700; }
@media (max-width: 700px) { .hr-tab-more-menu { left: 0; right: auto; max-width: calc(100vw - 32px); } }

/* Employee file: Offer letter / Print packet / Close onboarding up front; the rest under More; Terminate/Delete under Remove. */
.emp-more, .emp-danger { position: relative; display: inline-block; }
.emp-more > summary::-webkit-details-marker, .emp-danger > summary::-webkit-details-marker { display: none; }
.emp-more-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 40; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 240px; max-width: min(92vw, 420px); }
.emp-more-menu > button { text-align: left; }
.emp-more-menu > span { flex-wrap: wrap; }
.emp-more-right { left: auto; right: 0; }
.emp-more-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #98a2b3; font-weight: 800; margin-top: 4px; }
@media (max-width: 700px) {
  .page-shell .page-header:has(#btn-preview-portal) .page-actions > div { position: relative; }
  .emp-more, .emp-danger { position: static; }
  .emp-more-menu, .emp-more-right { left: 0; right: 0; max-width: none; min-width: 0; }
}

/* One floating button: "? Ask / report" opens a panel that also offers Ask Ivy. */
body:has(.ivy-feedback-fab) .ask-ivy-fab { display: none !important; }

/* HR & Onboarding: all tabs visible; one scrolling row on narrow screens. */
.hr-tabs.hr-tabs-all { flex-wrap: wrap; }
@media (max-width: 760px) {
  .hr-tabs.hr-tabs-all { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .hr-tabs.hr-tabs-all::-webkit-scrollbar { display: none; }
  .hr-tabs.hr-tabs-all .hr-tab { flex: none; white-space: nowrap; }
}

/* Schedule import preview */
.imp-modal{position:fixed;inset:0;z-index:2000;background:rgba(15,23,42,.45);display:flex;align-items:flex-start;justify-content:center;padding:4vh 10px;overflow:auto}
.imp-box{background:#fff;border-radius:14px;max-width:1100px;width:100%;padding:18px 18px 14px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.imp-top{display:flex;justify-content:space-between;align-items:center}
.imp-top h3{margin:0;font-size:19px}
.imp-x{border:none;background:none;font-size:26px;line-height:1;cursor:pointer;color:#475467}
.imp-help{color:#475467;font-size:13.5px;margin:6px 0 12px}
.imp-pick{display:flex;gap:8px;flex-wrap:wrap}
.imp-pick label{cursor:pointer}
.imp-status{font-size:13px;color:#344054;min-height:18px;margin:10px 0}
.imp-sum{font-size:13px;margin:0 0 8px;line-height:1.6}
.imp-k{display:inline-block;border-radius:6px;padding:1px 7px;margin:2px 4px 2px 0}
.imp-scroll{overflow:auto;max-height:58vh;border:1px solid #e4e7ec;border-radius:10px}
.imp-grid{border-collapse:collapse;font-size:12px;min-width:100%}
.imp-grid th,.imp-grid td{border-bottom:1px solid #f2f4f7;padding:5px 6px;text-align:center;white-space:nowrap}
.imp-grid thead th{position:sticky;top:0;background:#f9fafb;font-weight:700;color:#475467;z-index:1}
.imp-grid .imp-name{text-align:left;position:sticky;left:0;background:#fff;min-width:130px;z-index:2}
.imp-grid thead .imp-name{background:#f9fafb;z-index:3}
.imp-name small{display:block;color:#667085;font-weight:400}
.imp-name select{max-width:170px;font-size:12px;margin-top:2px}
.imp-name.is-unmatched,.imp-k.is-unmatched{background:#fef3f2;color:#b42318}
.imp-cell{border-radius:4px}
.imp-cell.is-new{background:#e6f4f1;color:#0b5f55;font-weight:600}
.imp-cell.is-replace,.imp-k.is-replace{background:#eef4ff;color:#3538cd;font-weight:600}
.imp-cell.is-same{color:#98a2b3}
.imp-cell.is-bad,.imp-k.is-bad{background:#fffaeb;color:#b54708;outline:1px dashed #f79009}
.imp-cell.is-skip{color:#98a2b3;text-decoration:line-through}
.imp-legend{font-size:12px;color:#667085;margin:8px 0 0}
.imp-legend .imp-cell{display:inline-block;padding:1px 6px}
.imp-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
@media (max-width:600px){.imp-box{padding:14px 12px}.imp-grid .imp-name{min-width:96px}}

/* PPD: HostedTime-sourced worked hours, and punch days that miss HT */
.staff-ht-src { text-decoration: underline dotted; text-underline-offset: 3px; }
.staff-punch-gap { background: var(--staff-warn-bg, #fff4d6); color: var(--staff-warn-ink, #8a5a00); font-weight: 600; }

/* Employee file checklist on a phone: stack Item, Status, and Action so the
   Action buttons wrap instead of running off the right edge. Collapse still
   works: the toggle sets an inline display that overrides these rules. */
@media (max-width: 640px) {
  .hr-checklist-table thead { display: none; }
  .hr-checklist-table, .hr-checklist-table tbody, .hr-checklist-table tr { display: block; width: 100%; }
  .hr-checklist-table td { display: block; padding: 4px 12px !important; text-align: left !important; overflow-wrap: anywhere; }
  .hr-checklist-table tr[data-group-row] td:first-child { padding-top: 12px !important; }
  .hr-checklist-table tr[data-group-row] td:last-child { padding-bottom: 12px !important; }
  .hr-checklist-table tr.checklist-group-header td { padding: 10px 12px !important; }
  .hr-checklist-table td .btn, .hr-checklist-table td button { margin: 4px 6px 0 0 !important; }
}

/* ---- Missing paperwork card (employee page) + everyone list ------------- */
.paper-card { background: var(--card-2); border: 1px solid var(--card-line); border-radius: 12px; padding: 16px; margin: 0 0 16px; display: flex; flex-direction: column; gap: 14px; }
.paper-card [hidden] { display: none !important; }
.paper-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.paper-head h4 { margin: 0; font-size: 15px; }
.paper-muted { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.paper-pill { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.paper-pill.bad { background: var(--danger-soft); color: var(--danger-ink); }
.paper-pill.ok { background: var(--ok-soft); color: var(--ok-ink); }
.paper-pill.wait { background: var(--warn-soft); color: var(--warn-ink); }
.paper-pill.muted { background: var(--line-soft); color: var(--muted); }
.paper-list { display: flex; flex-direction: column; border: 1px solid var(--line-soft); border-radius: 10px; overflow: hidden; }
.paper-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.paper-row:last-child { border-bottom: 0; }
.paper-row-static { cursor: default; }
.paper-row input { width: 18px; height: 18px; margin: 0; accent-color: var(--teal); }
.paper-row b { display: block; font-size: 14px; }
.paper-row span { font-size: 12px; color: var(--muted); }
.paper-row .paper-pill { font-size: 11.5px; }
.paper-send { display: flex; flex-direction: column; gap: 8px; }
.paper-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.paper-how button { border: 1px solid var(--line); background: var(--card); color: var(--fg); border-radius: 10px; padding: 9px 8px; font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 2px; text-align: left; min-width: 0; }
.paper-how button b { font-size: 13px; }
.paper-how button span { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.paper-how button[aria-pressed="true"] { border-color: var(--teal); background: var(--teal-soft); box-shadow: inset 0 0 0 1px var(--teal); }
.paper-how button:disabled { opacity: .5; cursor: not-allowed; }
.paper-send .btn-primary { background: var(--teal); color: var(--teal-on); border: 0; border-radius: 10px; padding: 11px 16px; font-weight: 800; font-size: 14px; cursor: pointer; }
.paper-send .btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.paper-open { background: var(--teal-soft); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.paper-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.paper-timeline li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 4px 0; font-size: 13px; }
.paper-timeline .dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--teal-line); background: var(--card-2); }
.paper-timeline li.done .dot { background: var(--ok); border-color: var(--ok); }
.paper-timeline .t { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.paper-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.paper-actions .btn { font-size: 12.5px; padding: 7px 12px; }
.paper-code { border: 2px solid var(--teal); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.paper-code strong { font-size: 30px; letter-spacing: .12em; color: var(--teal); font-variant-numeric: tabular-nums; }
.paper-msg { font-size: 13px; font-weight: 600; min-height: 0; }
.paper-msg.ok { color: var(--ok-ink); }
.paper-msg.bad { color: var(--danger-ink); }
.paper-table-wrap { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: 10px; }
.paper-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 560px; }
.paper-table th, .paper-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.paper-table th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--card); }
.paper-table input { width: 18px; height: 18px; accent-color: var(--teal); margin: 0; }
@media (max-width: 560px) { .paper-how { grid-template-columns: minmax(0, 1fr); } }

/* PBJ Staffing (pbj.js) */
.pbj-pickers { display: flex; flex-wrap: wrap; gap: 10px; }
.pbj-pickers label { display: grid; gap: 4px; font-size: 13px; font-weight: 650; }
.pbj-pickers select { font: inherit; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); max-width: 100%; }
.pbj-step { background: var(--card); border: 1px solid var(--card-line); border-radius: 16px; padding: 16px 18px; margin-top: 14px; min-width: 0; }
.pbj-step h3 { margin: 0 0 6px; font-size: 18px; display: flex; align-items: center; gap: 10px; }
.pbj-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--teal); color: var(--teal-on); font-size: 14px; flex: none; }
.pbj-import { max-width: 640px; }
.pbj-import input[type="file"] { padding: 6px 0; border: 0; }
.pbj-strip { display: flex; align-items: flex-end; gap: 1px; height: 120px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.pbj-bar { flex: 1 1 0; min-width: 0; background: var(--teal); border-radius: 2px 2px 0 0; opacity: .85; }
.pbj-bar.short-rn, .pbj-key.short-rn { background: var(--warning); }
.pbj-bar.zero-rn, .pbj-key.zero-rn { background: var(--danger); }
.pbj-bar.none, .pbj-key.none { background: var(--line); }
.pbj-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--teal); margin: 0 2px 0 8px; vertical-align: -1px; }
.pbj-legend .pbj-key:first-child { margin-left: 0; }
.pbj-table-wrap { overflow-x: auto; max-width: 100%; }
.pbj-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pbj-table th, .pbj-table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.pbj-table select { font: inherit; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); max-width: 260px; }
.pbj-table small { color: var(--muted); }
.pbj-unsaved td:first-child { font-weight: 700; }
.pbj-issues { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pbj-issue { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); line-height: 1.45; overflow-wrap: anywhere; }
.pbj-issue strong { margin-right: 6px; }
.pbj-issue.error { background: var(--danger-soft); border-color: #F3C7C7; }
.pbj-issue.error strong { color: var(--danger); }
.pbj-issue.warning { background: var(--warn-soft); border-color: #F5DE9A; }
.pbj-issue.warning strong { color: var(--warning); }
.pbj-imports li { gap: 6px 10px; }
@media (min-width: 1280px) { .pbj-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pbj-import[hidden], .pbj-agency[hidden], .pbj-meals[hidden] { display: none; }
@media (max-width: 640px) {
  #pbj-mapping .pbj-table thead { display: none; }
  #pbj-mapping .pbj-table tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  #pbj-mapping .pbj-table td { border: 0; padding: 0; }
  #pbj-mapping .pbj-table td:nth-child(2) { color: var(--muted); font-size: 13px; }
  #pbj-mapping .pbj-table select { width: 100%; max-width: none; min-height: 44px; font-size: 16px; }
}
/* Star Rating (star-rating.js) */
.sr-stars { color: #E2A50B; letter-spacing: 2px; font-size: 26px; }
.sr-stars .sr-off { color: var(--line); }
.sr-none { color: var(--muted); }
.sr-moves { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 6px; line-height: 1.45; }
.sr-table td small { display: block; color: var(--muted); font-size: 12px; }
.sr-foot { margin-top: 14px; }
#sr-mds[hidden] { display: none; }
/* Automatic employee surveys (feedback-surveys.js) */
/* ---- Feedback Surveys (feedback-surveys.js) ---------------------------- */
.fx { --fx-r: 14px; display: grid; gap: 16px; min-width: 0; }
.fx svg { width: 1em; height: 1em; flex: none; }
.fx-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.fx-head .page-lede { max-width: 62ch; margin-bottom: 0; }
.fx-loading, .fx-empty-line { color: var(--muted); padding: 24px 0; }
.fx-muted { color: var(--muted); font-size: 13px; }
.fx-bad { color: var(--danger); font-weight: 650; }
.fx-crumb { display: inline-flex; align-items: center; gap: 6px; color: var(--teal); font-weight: 650; font-size: 14px; text-decoration: none; width: fit-content; }

/* Tabs */
.fx-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.fx-tab { appearance: none; background: none; border: 0; border-bottom: 2.5px solid transparent; margin-bottom: -1px; padding: 10px 14px; font: inherit; font-weight: 650; font-size: 14.5px; color: var(--muted); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.fx-tab:hover { color: var(--fg); }
.fx-tab[aria-selected="true"] { color: var(--teal-deep); border-bottom-color: var(--teal); }
.fx-tab-n:empty { display: none; }
.fx-tab-n { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--teal-soft); color: var(--teal); font-size: 12px; font-weight: 750; display: inline-grid; place-items: center; }
.fx-tab-n.is-hot { background: var(--coral); color: #fff; }

/* Stat tiles */
.fx-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fx-stat { appearance: none; text-align: left; font: inherit; cursor: pointer; display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--fx-r); border: 1px solid var(--card-line); background: var(--card-2); box-shadow: var(--shadow-sm); transition: border-color .15s, transform .15s; }
.fx-stat:hover { border-color: var(--teal-line); transform: translateY(-1px); }
.fx-stat-n { font-size: 28px; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: var(--fg); }
.fx-stat-l { font-weight: 700; font-size: 14px; }
.fx-stat-s { font-size: 12.5px; color: var(--muted); }
.fx-stat-new .fx-stat-n { color: var(--teal); }
.fx-stat-flagged .fx-stat-n { color: var(--coral); }

/* Filters */
.fx-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fx-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 11px; background: var(--muted-surface); border: 1px solid var(--line); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.fx-seg button { appearance: none; border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 650; color: var(--muted); padding: 6px 11px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.fx-seg button[aria-pressed="true"] { background: var(--card-2); color: var(--teal-deep); box-shadow: 0 1px 3px rgba(18, 50, 56, .12); }
.fx-seg button:disabled { cursor: default; opacity: .7; }
.fx-select, .fx-search, .fx-toggle { font: inherit; font-size: 13px; height: 36px; border-radius: 10px; border: 1px solid var(--input-line); background: var(--card-2); color: var(--fg); padding: 0 10px; }
.fx-select { width: auto; max-width: 100%; flex: 0 1 auto; }
.fx-survey-chip[hidden] { display: none; }
.fx-toggle { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--muted); cursor: pointer; }
.fx-toggle[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: #fff; }
.fx-search { flex: 1 1 200px; min-width: 0; }
.fx-survey-chip { display: inline-flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; padding: 6px 6px 6px 12px; border-radius: 999px; background: var(--teal-soft); border: 1px solid var(--teal-line); font-size: 13px; color: var(--teal-ink); }
.fx-survey-chip button { appearance: none; border: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--card-2); cursor: pointer; font-size: 16px; line-height: 1; color: var(--teal-ink); }

/* Inbox: list + detail */
.fx-inbox { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 16px; align-items: start; }
.fx-list { display: grid; gap: 8px; align-content: start; max-height: calc(100vh - 160px); overflow-y: auto; padding: 2px; }
.fx-item { appearance: none; font: inherit; color: inherit; text-align: left; width: 100%; display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--fx-r); background: var(--card-2); border: 1px solid var(--card-line); cursor: pointer; position: relative; transition: border-color .15s, box-shadow .15s; }
.fx-item:hover { border-color: var(--teal-line); box-shadow: var(--shadow-sm); }
.fx-item.is-active { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(12, 95, 102, .12); }
.fx-item.is-new::before { content: ''; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--coral); }
.fx-score { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 15px; background: var(--muted-surface); color: var(--muted); }
.fx-score svg { width: 18px; height: 18px; }
.fx-tone-ok.fx-score, .fx-tone-ok.fx-d-score { background: var(--ok-soft); color: var(--ok-ink); }
.fx-tone-warn.fx-score, .fx-tone-warn.fx-d-score { background: var(--warn-soft); color: var(--warn-ink); }
.fx-tone-bad.fx-score, .fx-tone-bad.fx-d-score { background: var(--danger-soft); color: var(--danger-ink); }
.fx-item-main { min-width: 0; flex: 1; display: grid; gap: 3px; }
.fx-item-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.fx-who { display: inline-flex; align-items: center; gap: 5px; font-size: 14.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-lock { color: var(--muted); display: inline-flex; }
.fx-item-top time { font-size: 12px; color: var(--muted); white-space: nowrap; }
.fx-item-sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-item-snip { font-size: 13.5px; color: var(--fg-soft); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.fx-item-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.fx-meta-n { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--muted); font-weight: 650; }

/* Pills */
.fx-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 1.6; border: 1px solid transparent; white-space: nowrap; background: var(--muted-surface); color: var(--muted); }
.fx-st-new { background: var(--coral-soft); color: var(--coral-ink); border-color: var(--coral-line); }
.fx-st-in_progress { background: var(--warn-soft); color: var(--warn-ink); border-color: #F5DE9A; }
.fx-st-resolved, .fx-on, .fx-yes { background: var(--ok-soft); color: var(--ok-ink); border-color: #B7E4CB; }
.fx-no { background: var(--danger-soft); color: var(--danger-ink); border-color: #F3C7C7; }
.fx-off { background: var(--muted-surface); color: var(--muted); border-color: var(--line); }
.fx-flag { background: var(--danger-soft); color: var(--danger-ink); }
.fx-aud-staff { background: #EEF0FB; color: #3B3F8F; }
.fx-aud-family { background: var(--teal-soft); color: var(--teal); }
.fx-aud-resident { background: #F3EEF9; color: #5B3B86; }
.fx-ss-pending_approval { background: var(--warn-soft); color: var(--warn-ink); }
.fx-ss-approved { background: var(--teal-soft); color: var(--teal); }
.fx-ss-sent, .fx-ss-sending, .fx-ss-closed { background: var(--ok-soft); color: var(--ok-ink); }
.fx-pill.fx-tone-ok { background: var(--ok-soft); color: var(--ok-ink); }
.fx-pill.fx-tone-warn { background: var(--warn-soft); color: var(--warn-ink); }
.fx-pill.fx-tone-bad { background: var(--danger-soft); color: var(--danger-ink); }

/* Avatars */
.fx-av { flex: none; width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--teal); color: var(--teal-on); font-size: 12px; font-weight: 750; letter-spacing: .02em; }
.fx-av-sm { width: 22px; height: 22px; font-size: 10px; }
.fx-av-lg { width: 48px; height: 48px; font-size: 16px; }
.fx-av-lock { background: var(--fg); }
.fx-av-lock svg { width: 20px; height: 20px; }

/* Cards */
.fx-card { background: var(--card-2); border: 1px solid var(--card-line); border-radius: 18px; box-shadow: var(--shadow-sm); padding: 20px; min-width: 0; }
.fx-card h3 { margin: 0 0 4px; font-size: 18px; letter-spacing: -0.01em; }
.fx-card h4 { margin: 0 0 10px; font-size: 12px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* Detail */
.fx-detail { min-width: 0; position: sticky; top: 12px; scroll-margin-top: 84px; }
.fx-back { display: none; appearance: none; border: 0; background: none; font: inherit; font-weight: 650; color: var(--teal); padding: 0 0 12px; cursor: pointer; align-items: center; gap: 6px; }
.fx-d-head { display: flex; gap: 14px; align-items: flex-start; }
.fx-d-title { flex: 1; min-width: 0; }
.fx-d-title p { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; }
.fx-d-contact { font-size: 13px !important; color: var(--fg-soft) !important; overflow-wrap: anywhere; }
.fx-d-score { flex: none; border-radius: 14px; padding: 8px 14px; text-align: center; display: grid; background: var(--muted-surface); }
.fx-d-score strong { font-size: 26px; line-height: 1.05; font-weight: 800; }
.fx-d-score span { font-size: 11px; font-weight: 650; opacity: .8; }
.fx-confidential { margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; background: #F1F3F8; color: #3B4256; font-size: 13px; line-height: 1.45; }
.fx-flags { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--danger-soft); color: var(--danger-ink); font-size: 13.5px; }
.fx-flags strong { display: inline-flex; align-items: center; gap: 6px; }
.fx-flags ul { margin: 6px 0 0; padding-left: 20px; line-height: 1.45; }
.fx-work { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; margin: 16px 0 4px; padding: 12px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.fx-assign { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; color: var(--muted); }
.fx-assign select { font: inherit; font-size: 13.5px; height: 36px; border-radius: 10px; border: 1px solid var(--input-line); background: var(--card-2); padding: 0 8px; color: var(--fg); max-width: 220px; }
.fx-answers, .fx-activity { margin-top: 18px; }
.fx-answers ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fx-ans { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.fx-ans:last-child { border-bottom: 0; }
.fx-ans-q { margin: 0 0 6px; font-weight: 650; font-size: 14px; line-height: 1.4; color: var(--fg); }
.fx-ans-a { display: flex; align-items: center; gap: 10px; }
.fx-ans-none { color: var(--muted-2); font-size: 13px; font-style: italic; }
.fx-ans-n { font-size: 15px; font-weight: 800; }
.fx-ans-n small { font-weight: 600; color: var(--muted); }
.fx-meter { flex: 0 1 180px; height: 8px; border-radius: 99px; background: var(--line-soft); overflow: hidden; }
.fx-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--teal); }
.fx-meter.fx-tone-ok > span { background: var(--ok); }
.fx-meter.fx-tone-warn > span { background: #D9911A; }
.fx-meter.fx-tone-bad > span { background: var(--danger); }
.fx-meter-wide { flex: 1 1 auto; }
.fx-quote { margin: 0; padding: 10px 14px; border-left: 3px solid var(--teal-line); background: var(--bg); border-radius: 0 10px 10px 0; font-size: 14px; line-height: 1.5; color: var(--fg-soft); overflow-wrap: anywhere; flex: 1; }

/* Thread */
.fx-thread { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 12px; }
.fx-thread-empty { color: var(--muted); font-size: 13.5px; margin: 0 0 12px; }
.fx-ev { display: flex; gap: 10px; }
.fx-ev-body { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 4px 14px 14px 14px; background: var(--bg); }
.fx-ev-reply .fx-ev-body { background: var(--coral-soft); }
.fx-ev-reply .fx-av { background: var(--coral); }
.fx-ev-head { margin: 0 0 4px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; font-size: 13px; }
.fx-ev-kind { color: var(--muted); }
.fx-ev-head time { color: var(--muted-2); font-size: 12px; margin-left: auto; }
.fx-ev-text { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.fx-ev-tags { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.fx-ev-status { justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--muted); padding: 0 4px 0 42px; }
.fx-mention { color: var(--teal); font-weight: 700; background: var(--teal-soft); border-radius: 6px; padding: 0 4px; }

/* Composer */
.fx-compose { border: 1px solid var(--input-line); border-radius: 14px; background: var(--card-2); overflow: visible; transition: border-color .15s, box-shadow .15s; }
.fx-compose:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(12, 95, 102, .12); }
.fx-compose.is-reply:focus-within { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(196, 73, 42, .12); }
.fx-compose-tabs { display: flex; gap: 2px; padding: 6px 6px 0; border-bottom: 1px solid var(--line-soft); }
.fx-compose-tabs button { appearance: none; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 700; color: var(--muted); padding: 7px 10px 9px; border-bottom: 2px solid transparent; cursor: pointer; }
.fx-compose-tabs button[aria-selected="true"] { color: var(--teal-deep); border-bottom-color: var(--teal); }
.fx-compose.is-reply .fx-compose-tabs button[aria-selected="true"] { color: var(--coral-ink); border-bottom-color: var(--coral); }
.fx-compose-tabs button:disabled { opacity: .5; cursor: not-allowed; }
.fx-compose-box { position: relative; }
.fx-compose textarea:focus, .fx-compose textarea:focus-visible { outline: none; border: 0; box-shadow: none; }
.fx-compose textarea { display: block; width: 100%; border: 0; resize: vertical; min-height: 84px; padding: 12px 14px; font: inherit; font-size: 14.5px; line-height: 1.5; background: transparent; color: var(--fg); outline: none; box-sizing: border-box; }
.fx-compose-foot { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-top: 1px solid var(--line-soft); }
.fx-compose-hint { flex: 1; min-width: 0; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.fx-icon-btn { appearance: none; border: 1px solid var(--line); background: var(--card-2); border-radius: 10px; height: 36px; padding: 0 10px; display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 13px; font-weight: 650; color: var(--fg-soft); cursor: pointer; }
.fx-icon-btn:hover { border-color: var(--teal-line); color: var(--teal); }
.fx-send { display: inline-flex; align-items: center; gap: 6px; }
.fx-compose-msg { margin: 0; padding: 0 14px; font-size: 13px; color: var(--danger-ink); }
.fx-compose-msg:empty { display: none; }
.fx-compose-msg:not(:empty) { padding-bottom: 10px; }
.fx-mention-menu { position: absolute; left: 12px; top: calc(100% - 6px); z-index: 30; list-style: none; margin: 0; padding: 6px; min-width: 260px; max-width: calc(100% - 24px); background: var(--card-2); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.fx-mention-menu li { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.fx-mention-menu li span:last-child { display: grid; min-width: 0; }
.fx-mention-menu li small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-mention-menu li[aria-selected="true"] { background: var(--teal-soft); }
.fx-mm-none { color: var(--muted); font-size: 13px; cursor: default !important; }

/* Empty and loading */
.fx-empty { text-align: center; padding: 40px 20px; border: 1.5px dashed var(--line); border-radius: 18px; color: var(--muted); background: rgba(255, 255, 255, .5); }
.fx-empty h3 { margin: 10px 0 4px; color: var(--fg); font-size: 17px; }
.fx-empty p { margin: 0 auto; max-width: 36ch; font-size: 14px; line-height: 1.45; }
.fx-empty-ico { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--teal-soft); color: var(--teal); }
.fx-empty-ico svg { width: 26px; height: 26px; }
.fx-empty-detail { min-height: 320px; display: grid; place-content: center; }
.fx-skel { height: 92px; border-radius: var(--fx-r); background: linear-gradient(90deg, var(--line-soft) 0%, #fff 50%, var(--line-soft) 100%); background-size: 200% 100%; animation: fx-shimmer 1.2s infinite linear; }
.fx-skel-tall { height: 420px; }
@keyframes fx-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .fx-skel { animation: none; } }

/* Surveys tab */
.fx-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.fx-toolbar-lede { margin: 0; color: var(--muted); max-width: 62ch; font-size: 14px; line-height: 1.45; }
.fx-group { display: flex; align-items: center; gap: 8px; margin: 8px 0 -4px; font-size: 13px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fx-group span { font-size: 12px; background: var(--muted-surface); border-radius: 999px; padding: 1px 8px; letter-spacing: 0; }
.fx-sgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.fx-scard { display: grid; gap: 8px; padding: 16px; border-radius: 16px; background: var(--card-2); border: 1px solid var(--card-line); box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; min-width: 0; }
.fx-scard:hover { border-color: var(--teal-line); transform: translateY(-1px); }
.fx-scard-top { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-scard-title { font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.fx-scard-sub { font-size: 13px; color: var(--muted); }
.fx-scard-go { font-size: 13px; font-weight: 700; color: var(--teal); }

/* Create form */
.fx-create { display: grid; gap: 14px; }
.fx-grid2 { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.fx-field { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: var(--fg-soft); min-width: 0; }
.fx-field small { font-weight: 500; color: var(--muted); }
.fx-field input:not([type="checkbox"]), .fx-field select, .fx-col textarea, .fx-qrow input, .fx-qrow select { font: inherit; font-size: 14px; font-weight: 500; height: 40px; border-radius: 10px; border: 1px solid var(--input-line); background: var(--card-2); padding: 0 12px; color: var(--fg); min-width: 0; box-sizing: border-box; }
.fx-col textarea { height: auto; padding: 10px 12px; }
.fx-field input:focus, .fx-field select:focus, .fx-qrow input:focus, .fx-qrow select:focus, .fx-col textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(12, 95, 102, .12); }
.fx-inline { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.fx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-chip { position: relative; cursor: pointer; }
.fx-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.fx-chip span { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--input-line); background: var(--card-2); font-weight: 650; font-size: 13px; color: var(--fg-soft); }
.fx-chip input:checked + span { background: var(--teal); border-color: var(--teal); color: #fff; }
.fx-chip input:focus-visible + span { outline: 3px solid var(--coral-line); outline-offset: 1px; }
.fx-chip input:disabled + span { opacity: .65; cursor: default; }
.fx-qb { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fx-qrow { display: grid; grid-template-columns: 28px minmax(0, 1fr) 140px 32px; gap: 8px; align-items: center; }
.fx-qn { width: 28px; height: 28px; border-radius: 50%; background: var(--teal-soft); color: var(--teal); display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.fx-qx { appearance: none; border: 0; background: none; width: 32px; height: 32px; border-radius: 8px; font-size: 20px; color: var(--muted); cursor: pointer; }
.fx-qx:hover { background: var(--danger-soft); color: var(--danger); }
.fx-add { appearance: none; border: 1.5px dashed var(--teal-line); background: transparent; border-radius: 10px; height: 40px; font: inherit; font-weight: 700; font-size: 13.5px; color: var(--teal); cursor: pointer; }
.fx-add:hover { background: var(--teal-soft); }
.fx-create-foot { display: flex; justify-content: flex-end; gap: 8px; }

/* Automatic surveys */
.fx-progs { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; align-items: start; }
.fx-prog { display: grid; gap: 12px; }
.fx-prog.is-on { border-top: 3px solid var(--teal); }
.fx-prog-head { display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; }
.fx-prog-head p { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.fx-mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.fx-mini span { background: var(--bg); border-radius: 10px; padding: 8px 10px; font-size: 12px; color: var(--muted); display: grid; }
.fx-mini strong { font-size: 18px; color: var(--fg); }
.fx-prog-form { display: grid; gap: 12px; }
.fx-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fx-col { display: grid; gap: 8px; }
.fx-fold summary { cursor: pointer; font-weight: 700; font-size: 13.5px; color: var(--teal); padding: 4px 0; }
.fx-qlist { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: 13.5px; line-height: 1.45; }
.fx-hist-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; border-top: 1px solid var(--line-soft); padding-top: 10px; }
.fx-hist { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 13px; }
.fx-hist a { color: var(--teal); font-weight: 700; }
.fx-rate { width: 70px; height: 6px; border-radius: 99px; background: var(--line-soft); overflow: hidden; }
.fx-rate span { display: block; height: 100%; background: var(--teal); }
.fx-alert { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--danger-soft); color: var(--danger-ink); font-size: 14px; }
.fx-note { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--warn-soft); color: var(--warn-ink); font-size: 13.5px; }

/* One survey */
.fx-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.fx-steps li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line); font-size: 13px; font-weight: 650; color: var(--muted); }
.fx-steps li span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--muted-surface); font-size: 12px; font-weight: 800; }
.fx-steps li.is-done span { background: var(--ok); color: #fff; }
.fx-steps li.is-now { border-color: var(--teal); color: var(--teal-deep); }
.fx-steps li.is-now span { background: var(--teal); color: #fff; }
.fx-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.fx-kpi { background: var(--card-2); border: 1px solid var(--card-line); border-radius: 16px; padding: 14px 16px; display: grid; gap: 2px; box-shadow: var(--shadow-sm); }
.fx-kpi-n { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.fx-kpi-n small { font-size: 15px; font-weight: 650; color: var(--muted); }
.fx-kpi-l { font-size: 12.5px; color: var(--muted); font-weight: 650; }
.fx-kpi.fx-tone-ok .fx-kpi-n { color: var(--ok); }
.fx-kpi.fx-tone-warn .fx-kpi-n { color: var(--warn); }
.fx-kpi.fx-tone-bad .fx-kpi-n { color: var(--danger); }
.fx-two { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.fx-results { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; }
.fx-results > li { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.fx-results > li:last-child { border-bottom: 0; }
.fx-qbar { display: flex; align-items: center; gap: 10px; }
.fx-qbar strong { font-size: 16px; }
.fx-comments { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fx-comments li { padding: 8px 12px; background: var(--bg); border-radius: 10px; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.fx-sendcard { display: grid; gap: 10px; position: sticky; top: 12px; }
.fx-sendcard p { margin: 0; }
.fx-out { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12.5px; color: var(--fg-soft); }
.fx-out:empty { display: none; }

@media (max-width: 979px) {
  .fx-inbox { grid-template-columns: minmax(0, 1fr); }
  .fx-list { max-height: none; overflow: visible; }
  .fx-detail { position: static; display: none; }
  .fx-inbox.has-selection .fx-detail { display: block; }
  .fx-inbox.has-selection .fx-list { display: none; }
  .fx-back { display: inline-flex; }
  .fx-two { grid-template-columns: minmax(0, 1fr); }
  .fx-sendcard { position: static; }
}
@media (max-width: 640px) {
  .fx-card { padding: 16px; border-radius: 16px; }
  .fx-stats { gap: 8px; }
  .fx-stat { padding: 10px 12px; }
  .fx-stat-n { font-size: 22px; }
  .fx-stat-s { display: none; }
  .fx-stat-l { font-size: 12.5px; line-height: 1.25; }
  .fx-filters .fx-seg { width: 100%; }
  .fx-filters .fx-seg button { flex: 1; }
  .fx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-grid2 { grid-template-columns: minmax(0, 1fr); }
  .fx-qrow { grid-template-columns: 28px minmax(0, 1fr) 32px; }
  .fx-qrow select { grid-column: 2 / 3; }
  .fx-qrow .fx-qx { grid-column: 3; grid-row: 1; }
  .fx-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-work { flex-direction: column; align-items: stretch; }
  .fx-seg-work { width: 100%; }
  .fx-seg-work button { flex: 1; }
  .fx-assign select { flex: 1; max-width: none; }
  .fx-d-title h3 { font-size: 16px; }
  .fx-compose-hint { display: none; }
  .fx-icon-btn span { display: none; }
}