/* StorageStack Manage — shared stylesheet.
 *
 * Light theme, matched to LockEngine's SuperStorage brand palette so the
 * two apps sit side by side in nav without a jarring theme switch.
 * Token-driven: every component style below reads from the :root vars,
 * so the theme is entirely defined here. (Migrated from the original
 * dark theme 2026-05-15 at Andre's request.)
 */

:root {
  /* Brand palette — extracted from the SuperStorage logo, same as LockEngine */
  --brand-navy:      #1861a0;
  --brand-navy-dark: #134e80;
  --brand-blue-soft: #8cb0d0;
  --brand-red:       #e33642;

  /* Surface tokens — light theme */
  --bg:       #f6f7fa;  /* page background — soft warm gray */
  --panel:    #ffffff;  /* cards, top bar, modals */
  --panel-2:  #f1f3f7;  /* subtle surface — table headers, chips, active tab */
  --border:   #e4e7ec;  /* hairline dividers */
  --text:     #1f2937;  /* primary text — dark slate */
  --muted:    #6b7280;  /* secondary text */

  /* Action tokens */
  --accent:   var(--brand-navy);       /* primary button, focus base */
  --accent-2: var(--brand-navy-dark);  /* primary-button hover, link color */
  --success:  #1f9d6e;
  --warn:     #b45309;  /* amber dark enough to read as text on white */
  --danger:   var(--brand-red);
  --info:     #2563eb;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  background: var(--color-surface-app, #F7F5F0);
  color: var(--color-text-primary, var(--text));
  font-size: var(--text-body, 16px);
  line-height: 1.5;
}

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

button, .btn {
  font: inherit;
  cursor: pointer;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
}
button:hover, .btn:hover { background: var(--panel); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); }

.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-success { background: var(--success); border-color: var(--success); color: #fff; }

input, select, textarea {
  font: inherit;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent-2);
}

/* ----- Top bar ----- */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  padding: 10px 20px;
}
.top-bar .brand {
  display: flex;
  align-items: center;
  gap: 16px;
}
.top-bar .logo {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-weight: 600;
}
.logo-brand { color: var(--text); }
.logo-tool { color: var(--muted); font-weight: 400; }

.top-bar nav {
  display: flex;
  gap: 4px;
}
.top-bar nav a {
  padding: 6px 12px;
  border-radius: 6px;
  color: var(--muted);
}
.top-bar nav a.active { background: var(--panel-2); color: var(--text); }
.top-bar nav a:hover { background: var(--panel-2); color: var(--text); text-decoration: none; }

.top-bar .user-area {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px;
  color: var(--muted);
}

/* ----- Top nav — StorageStack brand (v0.25.20+) ----- */
.app-nav {
  display: flex; align-items: center; gap: var(--space-5, 24px);
  background: var(--ss-paper, #fff);
  border-bottom: 1px solid var(--color-border-default, #eeeae0);
  padding: 10px var(--space-5, 24px);
}
.app-nav__brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; flex-shrink: 0;
}
.app-nav__wordmark { display: flex; flex-direction: column; line-height: 1; }
.app-nav__suite {
  font-weight: 700; font-size: 15px; letter-spacing: -0.02em;
  color: var(--ss-ink, #1f1b2e);
}
.app-nav__suite .accent { color: var(--ss-sunset, #ff6b1a); }
.app-nav__product {
  font-family: var(--font-mono, monospace); font-size: 10px;
  color: var(--color-text-secondary, #5c5870);
  letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px;
}
.app-nav__divider {
  width: 1px; height: 24px;
  background: var(--color-border-default, #eeeae0); flex-shrink: 0;
}
.app-nav__links { display: flex; gap: 2px; flex-wrap: nowrap; }
.app-nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--radius-pill, 999px);
  color: var(--color-text-secondary, #5c5870); text-decoration: none;
  font-weight: 700; font-size: var(--text-small, 14px);
  transition: color 120ms ease, background 120ms ease;
  white-space: nowrap;
}
.app-nav__link:hover {
  color: var(--ss-ink, #1f1b2e); background: var(--ss-cream, #fff4e1);
  text-decoration: none;
}
.app-nav__link.is-active { color: var(--ss-ink, #1f1b2e); background: var(--ss-cream, #fff4e1); }
.app-nav__link i { font-size: 16px; line-height: 1; }

/* Priority+ overflow (>768px): the links row keeps the tabs that fit and the
   rest fold into a "More ▾" menu — js/header.js _fitNav remeasures on resize
   and whenever a badge widens a tab. Under 768px the burger drawer owns
   everything, so More is hidden and all links return to the row. */
@media (min-width: 769px) {
  .app-nav__links { flex: 1 1 auto; min-width: 0; overflow: hidden; }
}
.app-nav__more { position: relative; flex-shrink: 0; }
.app-nav__more-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px; border-radius: var(--radius-pill, 999px);
  color: var(--color-text-secondary, #5c5870);
  font-family: inherit; font-weight: 700; font-size: var(--text-small, 14px);
  background: none; border: 0; cursor: pointer; white-space: nowrap;
}
.app-nav__more-btn i { font-size: 13px; }
.app-nav__more-btn:hover,
.app-nav__more.is-open .app-nav__more-btn,
.app-nav__more-btn.is-active { color: var(--ss-ink, #1f1b2e); background: var(--ss-cream, #fff4e1); }
.app-nav__more-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 80;
  min-width: 200px; padding: 6px;
  background: var(--ss-paper, #fff);
  border: 1px solid var(--color-border-default, #eeeae0);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 14px 28px rgba(31, 27, 46, 0.14);
  display: none; flex-direction: column; gap: 2px;
}
.app-nav__more.is-open .app-nav__more-menu { display: flex; }
.app-nav__more-menu .app-nav__link { border-radius: var(--radius-md, 10px); }
@media (max-width: 768px) { .app-nav__more { display: none !important; } }
.app-nav__right {
  margin-left: auto; display: flex; align-items: center;
  gap: var(--space-3, 12px); flex-shrink: 0;
}
.app-nav__email {
  font-size: var(--text-small, 14px); color: var(--color-text-secondary, #5c5870);
}
.app-nav__avatar {
  width: 32px; height: 32px; border-radius: 999px; flex-shrink: 0;
  background: var(--ss-lavender, #a89ee8); color: var(--ss-ink, #1f1b2e);
  display: grid; place-items: center;
  font-weight: 700; font-size: var(--text-caption, 12px);
}
.client-select {
  appearance: none;
  background: var(--ss-cream, #fff4e1);
  border: 1.5px solid var(--color-border-default, #eeeae0);
  border-radius: var(--radius-pill, 999px);
  padding: 6px 28px 6px 14px;
  font-family: inherit; font-weight: 700; font-size: var(--text-small, 14px);
  color: var(--ss-ink, #1f1b2e); cursor: pointer;
}
.client-select:focus-visible {
  outline: none; border-color: var(--ss-iris, #6b5fcf);
  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(107,95,207,0.3));
}

/* Unread-notification badge in the top bar */
.notif-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}
.notif-badge:hover { text-decoration: none; opacity: 0.9; }

/* ----- Page layout ----- */
.page {
  padding: var(--space-6, 24px);
  max-width: 1400px;
  margin: 0 auto;
}
.page__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--space-4, 16px); margin-bottom: var(--space-6, 24px);
  flex-wrap: wrap;
}
.page__title {
  font-size: var(--text-h2, 28px); font-weight: 700;
  color: var(--ss-ink, var(--text)); margin: 0;
  letter-spacing: -0.02em; line-height: 1.2;
  text-wrap: balance;
}
.page__crumb {
  font-family: var(--font-mono, monospace); font-size: var(--text-caption, 12px);
  color: var(--color-text-secondary, var(--muted));
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px;
}
.page__meta {
  display: flex; align-items: center; gap: var(--space-3, 12px);
  font-size: var(--text-small, 14px); color: var(--color-text-secondary, var(--muted));
  flex-shrink: 0;
}
.section-title {
  font-size: var(--text-eyebrow, 12px); font-weight: 700;
  letter-spacing: var(--ls-eyebrow, 0.10em); text-transform: uppercase;
  color: var(--color-text-secondary, var(--muted));
  margin-bottom: var(--space-3, 12px);
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
}
.panel-title {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin: 0 0 12px 0;
}

/* ----- Card-sec (section card: bordered, rounded, shadow) ----- */
.card-sec {
  background: var(--ss-paper, var(--panel));
  border: 1px solid var(--color-border-default, var(--border));
  border-radius: var(--radius-xl, 24px);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card-sec__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-4, 16px) var(--space-5, 24px);
  border-bottom: 1px solid var(--color-border-default, var(--border));
}
.card-sec__title {
  font-size: var(--text-eyebrow, 12px); font-weight: 700;
  letter-spacing: var(--ls-eyebrow, 0.10em); text-transform: uppercase;
  color: var(--color-text-secondary, var(--muted));
}
.card-sec__body { padding: var(--space-5, 24px); }
.card-sec__body--tight { padding: var(--space-4, 16px) var(--space-5, 24px); }

/* ----- Hub layout (StorageStack brand) ----- */
.hub {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-5, 24px);
  align-items: start;
}
@media (max-width: 1100px) { .hub { grid-template-columns: 1fr; } }
.hub__side { display: flex; flex-direction: column; gap: var(--space-4, 16px); }
/* Phone: when the Hub stacks, the task column is the primary work — it goes
   first; My status / In line / Team follow. */
@media (max-width: 900px) {
  .hub__side { order: 2; }
  /* The "Go live / Pop out calls" pill (call-popout.js, inline-positioned at
     bottom:16px) must clear the 56px COMMS bottom bar. */
  body.has-gcb-sidebar #cp-control { bottom: 72px !important; }
}

/* ----- Hub three-pane layout (legacy — kept for compat) ----- */
.hub-grid {
  display: grid;
  grid-template-columns: 280px 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.hub-grid .pane { min-width: 0; }

/* Hub — In-line queue rows (brand reference) */
.queue-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px;
  background: var(--ss-cream, #fff4e1);
  border-radius: var(--radius-md, 8px);
  gap: var(--space-3, 12px);
}
.queue-row__num  { font-family: var(--font-mono, monospace); font-weight: 700; color: var(--ss-iris, #6b5fcf); font-size: var(--text-small, 14px); }
.queue-row__meta { font-size: var(--text-caption, 12px); color: var(--color-text-secondary, var(--muted)); margin-top: 2px; }
.queue-row__wait {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono, monospace); font-weight: 700; font-size: var(--text-small, 14px);
  color: var(--ss-ink, #1f1b2e); white-space: nowrap;
}
.queue-row__wait--alert { color: var(--color-state-danger, #e33642); }

/* Legacy task-row */
.task-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  margin-bottom: 8px;
  align-items: center;
}
.task-row .meta { font-size: 12px; color: var(--muted); }
.task-row .title { font-weight: 600; }

.priority-urgent { border-left: 3px solid var(--danger); }
.priority-normal { border-left: 3px solid var(--border); }
.priority-low    { border-left: 3px solid var(--muted); }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-pill, 999px);
  font-size: var(--text-caption, 12px);
  font-weight: 700;
  background: var(--ss-mist, var(--panel-2));
  border: 1px solid var(--color-border-default, var(--border));
  color: var(--color-text-secondary, var(--muted));
}
.status-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-text-secondary, var(--muted)); }
.status-pill.available  { background: var(--color-state-success-bg, rgba(31,157,110,0.1)); border-color: rgba(31,157,110,0.25); color: var(--color-state-success, var(--success)); }
.status-pill.available .dot  { background: var(--color-state-success, var(--success)); }
.status-pill.heads_down .dot { background: var(--color-state-warning, var(--warn)); }
.status-pill.on_break .dot   { background: var(--ss-iris, var(--info)); }
.status-pill.offline .dot    { background: var(--color-text-secondary, var(--muted)); }
/* Activity overlays (system-set via custom_message, not agent-chosen) */
.status-pill.on_call .dot { background: var(--ss-lavender, #8b5cf6); }
.status-pill.on_chat .dot { background: var(--ss-iris, #0ea5e9); }
.status-pill.on_text .dot { background: var(--ss-sun, #f59e0b); }

/* ----- KPI tiles ----- */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.kpi-tile {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 18px;
}
.kpi-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin: 0 0 8px 0;
}
.kpi-value {
  font-size: 28px;
  font-weight: 600;
  margin: 0;
}
.kpi-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.kpi-pending {
  color: var(--muted);
  font-style: italic;
}

/* ----- Tables ----- */
table.table {
  width: 100%;
  border-collapse: collapse;
}
table.table th, table.table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
table.table th {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
}
table.table tbody tr:hover { background: var(--ss-cream, var(--panel-2)); cursor: pointer; }

/* ----- Misc ----- */
.empty {
  padding: 24px;
  text-align: center;
  color: var(--muted);
}
.err { color: var(--danger); font-size: 12px; }
.muted { color: var(--muted); }
.row-gap { display: flex; gap: 12px; align-items: center; }
.spacer { flex: 1; }

/* ===== Customer detail layout ===== */
.cust {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: var(--space-5, 24px);
  align-items: start;
}
@media (max-width: 1100px) { .cust { grid-template-columns: 1fr; } }
.cust__side  { display: flex; flex-direction: column; gap: var(--space-4, 16px); }
.cust__main  { display: flex; flex-direction: column; gap: var(--space-4, 16px); }
.cust__name  {
  font-size: var(--text-h2, 24px); font-weight: 700;
  color: var(--ss-ink, var(--text)); letter-spacing: -0.02em; line-height: 1.2;
  margin: 0 0 var(--space-3, 12px);
}
/* Unit chips shown right under the tenant's name in the left rail card. */
.cust__units {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: -6px 0 8px;   /* tighten to the name, breathe before contact line */
}
.cust__units:empty { margin: 0; }   /* no gap when there are no units */
.cust__unit-chip {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: 999px;
  font-family: var(--font-mono, monospace);
  font-size: 12px; font-weight: 700;
  background: rgba(107, 95, 207, 0.10);
  color: var(--ss-iris, #6b5fcf);
}

/* ===== Pills (StorageStack-tinted status badges) ===== */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  font-size: var(--text-caption, 12px); font-weight: 700;
  border-radius: var(--radius-pill, 999px); line-height: 1.4;
}
.pill--success { background: var(--color-state-success-bg, rgba(31,157,110,0.12)); color: var(--color-state-success, #1f9d6e); }
.pill--warning { background: var(--color-state-warning-bg, rgba(180,83,9,0.12));   color: var(--color-state-warning, #b45309); }
.pill--danger  { background: var(--color-state-danger-bg,  rgba(227,54,66,0.12));  color: var(--color-state-danger,  #e33642); }
.pill--info    { background: var(--color-state-info-bg,    rgba(107,95,207,0.12)); color: var(--color-state-info,    #6b5fcf); }
.pill--neutral { background: var(--ss-mist, #eeeae0); color: var(--ss-slate, #5c5870); }

/* ===== Tabs (underline-style navigation row) ===== */
.tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--color-border-default, var(--border));
  margin-bottom: var(--space-5, 24px);
}
.tabs__btn {
  background: none; border: none;
  padding: 12px 16px 14px; margin-bottom: -1px;
  font-family: var(--font-sans, inherit); font-weight: 700;
  font-size: var(--text-small, 14px);
  color: var(--color-text-secondary, var(--muted));
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  display: inline-flex; align-items: center; gap: 8px;
}
.tabs__btn:hover { color: var(--ss-ink, var(--text)); }
.tabs__btn.is-active { color: var(--ss-ink, var(--text)); border-bottom-color: var(--ss-sunset, #ff6b1a); }
.tabs__count {
  display: inline-grid; place-items: center;
  background: var(--ss-mist, #eeeae0); color: var(--ss-slate, #5c5870);
  font-size: 10px; font-weight: 700;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
}
.tabs__count--alert { background: var(--color-state-danger, var(--danger)); color: #fff; }

/* ===== Console stat cards ===== */
.stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3, 12px);
  margin-bottom: var(--space-5, 24px);
}
@media (max-width: 1100px) { .stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px)  { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat {
  background: var(--ss-paper, var(--panel));
  border: 1px solid var(--color-border-default, var(--border));
  border-radius: var(--radius-xl, 24px);
  padding: var(--space-5, 24px);
  box-shadow: var(--shadow-sm);
}
.stat__label {
  font-size: var(--text-eyebrow, 12px); font-weight: 700;
  letter-spacing: var(--ls-eyebrow, 0.10em); text-transform: uppercase;
  color: var(--color-text-secondary, var(--muted));
}
.stat__value {
  font-size: 40px; font-weight: 700; line-height: 1;
  letter-spacing: -0.02em; color: var(--ss-ink, var(--text));
  margin: var(--space-3, 12px) 0 4px;
}
.kpi-pending, .stat__value--pending {
  font-size: 22px; color: var(--color-text-secondary, var(--muted));
  font-style: italic; font-weight: 400; letter-spacing: 0;
}
.stat__sub { font-size: var(--text-small, 14px); color: var(--color-text-secondary, var(--muted)); }

/* ===== Button variants (--modifier form) ===== */
.btn--primary   { background: var(--ss-sunset, var(--accent)); border-color: var(--ss-sunset, var(--accent)); color: #fff; font-weight: 700; }
.btn--primary:hover { background: #e55a10; border-color: #e55a10; }
.btn--ghost     { background: none; border: 1.5px solid var(--color-border-default, var(--border)); color: var(--color-text-secondary, var(--muted)); }
.btn--ghost:hover { background: var(--ss-mist, var(--panel-2)); color: var(--ss-ink, var(--text)); }
.btn--secondary { background: var(--ss-mist, var(--panel-2)); border: 1.5px solid var(--color-border-default, var(--border)); color: var(--ss-ink, var(--text)); }
.btn--secondary:hover { background: var(--ss-cream, #fff4e1); }
.btn--sm { font-size: 12px; padding: 5px 12px; border-radius: var(--radius-pill, 999px); font-weight: 700; }

/* ===== Page sub-heading ===== */
.page__sub {
  font-size: var(--text-small, 14px); color: var(--color-text-secondary, var(--muted));
  margin: 4px 0 0; max-width: 720px;
}

/* ===== Table card ===== */
.table-card {
  background: var(--ss-paper, var(--panel));
  border: 1px solid var(--color-border-default, var(--border));
  border-radius: var(--radius-xl, 24px);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* ===== Search input (pill with embedded icon) ===== */
.search {
  width: 100%;
  background: var(--ss-paper, #fff);
  border: 1.5px solid var(--color-border-default, var(--border));
  border-radius: var(--radius-pill, 999px);
  padding: 12px 16px 12px 44px;
  font-family: var(--font-sans, inherit); font-size: var(--text-body, 16px);
  color: var(--ss-ink, var(--text));
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M11.5 11l3 3M7.5 13a5.5 5.5 0 100-11 5.5 5.5 0 000 11z' stroke='%235C5870' stroke-width='1.5' fill='none'/></svg>");
  background-repeat: no-repeat; background-position: 16px center; background-size: 16px;
}
.search:focus-visible {
  outline: none;
  border-color: var(--color-border-focus, var(--ss-iris, var(--accent)));
  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(107,95,207,0.3));
}

/* ===== Login page */
body.login-page {
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.login-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px 28px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
}
.login-card h1 { margin: 0 0 4px 0; font-size: 22px; }
.login-card .sub { color: var(--muted); font-size: 13px; margin-bottom: 22px; }
.login-card label { display: block; font-size: 12px; color: var(--muted); margin: 12px 0 4px 0; }
.login-card input { width: 100%; }
.login-card .btn-primary { width: 100%; margin-top: 18px; padding: 11px; font-size: 14px; }
.login-card .err { min-height: 18px; margin-top: 12px; }
.login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }

/* ===== Hub — Status picker (.status-opt buttons, My status card) ===== */
.status-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: none; border: none;
  font-family: var(--font-sans, inherit); font-size: var(--text-small, 14px); font-weight: 700;
  color: var(--ss-ink, #1f1b2e);
  border-radius: var(--radius-md, 8px);
  cursor: pointer; text-align: left; width: 100%;
  transition: background var(--duration-fast, 120ms) ease;
}
.status-opt:hover { background: var(--ss-cream, #fff4e1); }
.status-opt.is-active { background: var(--ss-cream, #fff4e1); }
/* Hidden by default on every button — only shown on the active one. */
.status-opt .ph-check { display: none; }
.status-opt.is-active .ph-check { display: inline-flex; color: var(--ss-sunset, #ff6b1a); margin-left: auto; }
.status-opt__dot   { width: 10px; height: 10px; border-radius: 999px; flex-shrink: 0; }
.status-opt__label { flex: 1; }
.status-opt__meta  { font-weight: 400; font-size: var(--text-caption, 12px); color: var(--color-text-secondary, var(--muted)); }

/* ===== Hub — Team rows (.team-row, Team card) ===== */
.team-row { display: flex; align-items: flex-start; gap: 10px; }
.team-row__avatar {
  width: 32px; height: 32px; border-radius: 999px;
  color: var(--ss-ink, #1f1b2e);
  display: grid; place-items: center;
  font-weight: 700; font-size: 11px; flex-shrink: 0;
  overflow: hidden;  /* clip the <img> to the circle */
  position: relative;
}
.team-row__avatar img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* When the inline onerror handler kicks in (broken URL / 404), the <img>
   is removed and `--imgfail` flag is added — fall back to showing the
   initials via the data-fallback attribute. */
.team-row__avatar--imgfail::before {
  content: attr(data-fallback);
  display: block;
  text-align: center;
  line-height: 32px;
}
.team-row__body { flex: 1; min-width: 0; }
.team-row__name {
  font-size: var(--text-small, 14px); font-weight: 700; color: var(--ss-ink, #1f1b2e);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.team-row__activity {
  font-size: var(--text-caption, 12px); color: var(--color-text-secondary, var(--muted));
  margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.team-row__dot { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; }
.team-row--off { opacity: 0.55; }

/* ===== Comms rail card (.commscard, used in gcb-sidebar when call is active) ===== */
.commscard {
  border-radius: var(--radius-xl, 24px);
  padding: var(--space-5, 24px);
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.12));
  display: flex; flex-direction: column; gap: var(--space-3, 12px);
  position: relative; overflow: hidden;
}
.commscard--ringing { background: linear-gradient(160deg, #4FB67A 0%, #2E8757 100%); color: white; }
.commscard--active  { background: linear-gradient(160deg, #1F1B2E 0%, #2C2640 100%); color: var(--ss-cream, #fff4e1); }
.commscard__status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono, monospace); font-size: var(--text-caption, 12px);
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700;
}
.commscard__status .dot {
  width: 8px; height: 8px; border-radius: 999px; background: currentColor;
  animation: commsPulse 1.2s ease-in-out infinite;
}
.commscard--active .commscard__status { color: var(--ss-sunset, #ff6b1a); }
.commscard--active .commscard__status .dot { background: var(--ss-sunset, #ff6b1a); }
@keyframes commsPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.9); }
}
.commscard__num {
  font-family: var(--font-mono, monospace); font-weight: 700;
  font-size: 20px; letter-spacing: -0.01em; line-height: 1.1;
}
.commscard__facility { font-size: var(--text-small, 14px); opacity: 0.85; }
.commscard__timer {
  font-family: var(--font-mono, monospace);
  font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; margin-top: 4px;
}
.commscard__actions { display: flex; flex-direction: column; gap: 8px; margin-top: var(--space-2, 8px); }
.commscard__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 16px; border-radius: var(--radius-pill, 999px);
  border: none; cursor: pointer;
  font-family: var(--font-sans, inherit); font-weight: 700; font-size: var(--text-small, 14px);
  min-height: 44px;
  transition: transform var(--duration-fast, 120ms) ease;
}
.commscard__btn:hover  { transform: translateY(-1px); }
.commscard__btn--answer { background: var(--ss-paper, #fff); color: var(--color-state-success, #1f9d6e); }
.commscard__btn--answer:hover { background: #F0FAF4; }
.commscard__btn--skip   { background: rgba(255,255,255,0.18); color: white; }
.commscard__btn--skip:hover { background: rgba(255,255,255,0.28); }
.commscard__btn--mute   { background: rgba(255,244,225,0.12); color: var(--ss-cream, #fff4e1); }
.commscard__btn--mute:hover { background: rgba(255,244,225,0.22); }
.commscard__btn--mute.is-on { background: var(--ss-sun, #ff9f1c); color: var(--ss-ink, #1f1b2e); }
.commscard__btn--end    { background: var(--color-state-danger, #e33642); color: white; }
.commscard__btn--end:hover { background: #C82B37; }

/* ============================================================================
   User settings modal (js/user-settings.js).
   Opened from the header avatar chip; available on every page that includes
   header.js. Self-contained styles — don't rely on hub-specific selectors.
   ============================================================================ */
.us-overlay {
  position: fixed; inset: 0;
  background: rgba(31,27,46,0.5);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  z-index: 10001;
}
.us-modal {
  width: min(560px, 94vw); max-height: 90vh;
  background: var(--ss-paper, #fff);
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(31,27,46,0.32);
  display: flex; flex-direction: column; overflow: hidden;
}
.us-modal__head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border-default, #eeeae0);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.us-modal__title {
  font-weight: 700; font-size: 15px;
  color: var(--ss-ink, #1f1b2e);
  display: flex; align-items: center; gap: 6px;
}
.us-modal__sub {
  font-size: 12px; color: var(--color-text-secondary, #5c5870);
  margin-top: 2px;
}
.us-btn-close {
  width: 28px; height: 28px; border-radius: 8px;
  background: transparent; color: var(--color-text-secondary, #5c5870);
  border: 1px solid var(--color-border-default, #eeeae0);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.us-btn-close:hover { background: var(--ss-mist, #f7f4ed); }
.us-modal__body {
  padding: 18px; overflow-y: auto;
  background: var(--ss-mist, #f7f4ed);
  display: flex; flex-direction: column; gap: 16px;
}
.us-section {
  background: var(--ss-paper, #fff);
  border: 1px solid var(--color-border-default, #eeeae0);
  border-radius: 12px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.us-section__head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.us-section__title {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 14px;
  color: var(--ss-ink, #1f1b2e);
}
.us-section__title-label {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; cursor: pointer;
}
.us-section__msg {
  font-size: 12px;
  color: var(--color-text-secondary, #5c5870);
}
.us-section__msg a { color: var(--ss-iris, #6b5fcf); text-decoration: none; }
.us-chip {
  display: inline-block;
  padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}
.us-chip--rec { background: #ede9f9; color: #4527a0; }
.us-avatar-row {
  display: flex; align-items: center; gap: 12px;
}
.us-avatar-controls { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.us-avatar-controls__row {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
#usAvatarPreview {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--color-border-default, #eeeae0);
  flex-shrink: 0;
}
.us-cell-row { display: flex; gap: 6px; align-items: center; }
.us-or { font-size: 12px; color: var(--color-text-secondary, #5c5870); }
.us-modal input[type="text"],
.us-modal input[type="tel"],
.us-modal input[type="url"] {
  flex: 1; min-width: 0;
  padding: 8px 10px; font-size: 14px;
  border: 1px solid var(--color-border-default, #eeeae0); border-radius: 8px;
  color: var(--ss-ink, #1f1b2e);
}
.us-btn {
  white-space: nowrap;
  padding: 8px 12px; border-radius: 8px;
  font-weight: 600; font-size: 14px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.us-btn--primary { background: var(--ss-iris, #6b5fcf); color: #fff; border: 0; }
.us-btn--primary:hover { filter: brightness(.95); }
.us-btn--outline {
  background: var(--ss-paper, #fff); color: var(--ss-ink, #1f1b2e);
  border: 1px solid var(--color-border-default, #eeeae0);
}
.us-btn--outline:hover { background: var(--ss-mist, #f7f4ed); }
.us-flash {
  font-size: 12px; font-weight: 600;
  transition: opacity .25s ease;
  opacity: 0;
  min-height: 16px;
}
/* Header avatar chip when it carries an uploaded image rather than initials. */
.app-nav__avatar img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 50%; display: block;
}
.app-nav__avatar.app-nav__avatar--btn {
  cursor: pointer; padding: 0;
  border: 0; background: transparent;
}
.app-nav__avatar.app-nav__avatar--btn:hover { filter: brightness(.92); }

/* ============================================================
   conversation — unified channel-agnostic conversation surface.
   Powers: Hub In-line queue card (.qcard), SMS takeover overlay
   (.scrim + .overlay + .composer), and the customer-profile
   timeline (.conv--chat .ev). Direction A (chat) only — single
   language across all three surfaces.

   Tokens (§1 of CONVERSATION_SURFACE_SPEC.md). Everything else
   derives from tokens.css. All numbers snap to the 8px grid.
   ============================================================ */
:root {
  --ss-voicemail-bg: #FCE9CC;
  --ss-voicemail-fg: #8A5A00;
  --ss-ai-bg:        #FFE2D0;
  --ss-bubble-out:   var(--ss-iris);
  --ss-bubble-in:    var(--ss-bone);
  --ss-vivi-bg:      #FFFAF6;
  --ss-vivi-border:  #FFD3B8;
  --ss-note-border:  #F0D89A;
  --ss-note-fg:      #8A6A1E;
}

/* Channel chip — tinted pill: icon + label. One source of channel identity. */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px 2px 7px;
  font-size: 11px; font-weight: 700; line-height: 1.5;
  letter-spacing: 0.01em; border-radius: var(--radius-pill, 999px);
  white-space: nowrap;
}
.chip i { font-size: 11px; }
.chip--sms       { background: var(--color-state-info-bg, #ECE9FA);    color: var(--color-state-info, #6B5FCF); }
.chip--call      { background: var(--ss-mist, #EEEAE0);                color: var(--ss-slate, #5C5870); }
.chip--missed    { background: var(--color-state-danger-bg, #FBE5E1);  color: var(--color-state-danger, #C8362B); }
.chip--voicemail { background: var(--ss-voicemail-bg, #FCE9CC);        color: var(--ss-voicemail-fg, #8A5A00); }
.chip--vivi      { background: var(--ss-ai-bg, #FFE2D0);               color: var(--ss-sunset, #FF6B1A); }
.chip--note      { background: var(--color-state-warning-bg, #FFF1CC); color: var(--color-state-warning, #B07A00); }
.chip--system    { background: var(--ss-mist, #EEEAE0);                color: var(--ss-slate, #5C5870); }
.chip--payment   { background: var(--ss-cream, #FFF4E1);               color: var(--ss-sunset, #FF6B1A); }
.chip--chat      { background: var(--color-state-info-bg, #ECE9FA);    color: var(--color-state-info, #6B5FCF); }
.chip--email     { background: var(--ss-mist, #EEEAE0);                color: var(--ss-slate, #5C5870); }
.chip--notice    { background: var(--color-state-warning-bg, #FFF1CC); color: var(--color-state-warning, #B07A00); }

/* Avatar — 32px (small 26px). Initials on palette-tinted fills. */
.av {
  width: 32px; height: 32px; border-radius: 999px;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
  color: var(--ss-ink, #1F1B2E); flex: none;
}
.av--sm { width: 26px; height: 26px; font-size: 11px; }
.av--lav   { background: var(--ss-lavender, #A89EE8); }
.av--sun   { background: var(--ss-sun, #FF9F1C); }
.av--honey { background: var(--ss-honey, #FFC233); }
.av--iris  { background: var(--ss-iris, #6B5FCF); color: #fff; }
.av--mist  { background: var(--ss-mist, #EEEAE0); color: var(--ss-slate, #5C5870); }
.av--ai    { background: var(--ss-ai-bg, #FFE2D0); color: var(--ss-sunset, #FF6B1A); }

/* Pill — small status badge used in overlay/queue headers. */
.cs-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; font-size: 12px; font-weight: 700; border-radius: var(--radius-pill, 999px); line-height: 1.4; }
.cs-pill--success { background: var(--color-state-success-bg, #E3F2E9); color: var(--color-state-success, #2E8757); }
.cs-pill--neutral { background: var(--ss-mist, #EEEAE0); color: var(--ss-slate, #5C5870); }

/* ----- Timeline scaffold (Direction A: chat) ----- */
.conv { display: flex; flex-direction: column; gap: 18px; }
.conv--compact { gap: 12px; }

/* Day divider — centered label between hairlines. */
.cs-day { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 6px 0; }
.cs-day::before, .cs-day::after { content: ""; height: 1px; background: var(--color-border-default, #EEEAE0); flex: 1; }
.cs-day span { font-size: 11px; font-weight: 700; color: var(--color-text-secondary, #5C5870); letter-spacing: 0.04em; }

/* Closed-session divider — dashed mono rule. */
.cs-closed { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px 0 4px; }
.cs-closed::before, .cs-closed::after { content: ""; flex: 1; border-top: 1.5px dashed var(--color-border-strong, #D7D2C4); }
.cs-closed span { font-family: var(--font-mono, monospace); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-secondary, #5C5870); }

/* ev — the atomic conversation row. */
.conv--chat .ev { display: flex; gap: 10px; align-items: flex-end; }
.conv--chat .ev--out { flex-direction: row-reverse; }
.conv--chat .ev__col { display: flex; flex-direction: column; max-width: 62%; min-width: 0; }
.conv--chat .ev--out .ev__col { align-items: flex-end; }
.conv--chat .ev__meta { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; flex-wrap: wrap; }
.conv--chat .ev--out .ev__meta { flex-direction: row-reverse; }
.conv--chat .ev__sender { font-size: 12px; font-weight: 700; color: var(--ss-ink, #1F1B2E); }
.conv--chat .ev__time { font-family: var(--font-mono, monospace); font-size: 10px; color: var(--color-text-secondary, #5C5870); }
.conv--chat .ev--center { justify-content: center; align-items: center; }

/* Dim prior session messages above the closed divider. */
.ev--dim { opacity: 0.55; }
.ev--dim .bubble--in, .ev--dim .bubble--out { filter: grayscale(0.35); }

/* Bubble — radius 12 with a 4px tail corner on the sender's side. */
.bubble {
  padding: 10px 14px; border-radius: var(--radius-md, 12px);
  font-size: var(--text-small, 14px); line-height: 1.5;
  max-width: 100%; word-wrap: break-word;
  white-space: pre-wrap;
}
.bubble--in  { background: var(--ss-bubble-in, #F7F5F0); color: var(--ss-ink, #1F1B2E); border: 1px solid var(--color-border-default, #EEEAE0); border-bottom-left-radius: 4px; }
.bubble--out { background: var(--ss-bubble-out, #6B5FCF); color: #fff; border-bottom-right-radius: 4px; }
.bubble--pay { background: var(--ss-cream, #FFF4E1); color: var(--ss-ink, #1F1B2E); border: 1.5px solid var(--ss-sunset, #FF6B1A); border-bottom-right-radius: 4px; }
.bubble--pay .pay__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 700; color: var(--ss-sunset, #FF6B1A); word-break: break-all; text-decoration: none; }
.bubble--pay .pay__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; background: var(--ss-sunset, #FF6B1A); color: #fff; padding: 7px 14px; border-radius: var(--radius-pill, 999px); font-weight: 700; font-size: 12px; text-decoration: none; }
.bubble a { color: inherit; }

/* Outbound status line — delivered / queued / failed. */
.evstatus { font-size: 11px; color: var(--color-text-secondary, #5C5870); display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; }
.evstatus--ok   { color: var(--color-state-success, #2E8757); }
.evstatus--fail { color: var(--color-state-danger, #C8362B); }
.evstatus .lnk  { color: var(--color-state-danger, #C8362B); font-weight: 700; cursor: pointer; text-decoration: underline; }
.cs-spin { width: 11px; height: 11px; border-radius: 999px; border: 1.5px solid currentColor; border-top-color: transparent; display: inline-block; animation: csSpin 0.7s linear infinite; }
@keyframes csSpin { to { transform: rotate(360deg); } }

/* Centered rows — call, voicemail, system. */
.callpill {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--ss-paper, #FFFFFF); border: 1px solid var(--color-border-default, #EEEAE0);
  border-radius: var(--radius-pill, 999px); padding: 8px 8px 8px 14px;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(31,27,46,0.05)); max-width: 100%;
}
.callpill__ic { width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; flex: none; }
.callpill__ic--in      { background: var(--ss-mist, #EEEAE0); color: var(--ss-slate, #5C5870); }
.callpill__ic--out     { background: var(--color-state-info-bg, #ECE9FA); color: var(--color-state-info, #6B5FCF); }
.callpill__ic--missed  { background: var(--color-state-danger-bg, #FBE5E1); color: var(--color-state-danger, #C8362B); }
.callpill__ic--vm      { background: var(--ss-voicemail-bg, #FCE9CC); color: var(--ss-voicemail-fg, #8A5A00); }
.callpill__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.callpill__title { font-size: var(--text-small, 14px); font-weight: 700; color: var(--ss-ink, #1F1B2E); }
.callpill--missed .callpill__title { color: var(--color-state-danger, #C8362B); }
.callpill__sub { font-size: 11px; color: var(--color-text-secondary, #5C5870); font-family: var(--font-mono, monospace); }
.callpill__play {
  width: 32px; height: 32px; border-radius: 999px; border: none;
  background: var(--ss-ink, #1F1B2E); color: #fff;
  display: grid; place-items: center; cursor: pointer; flex: none;
  transition: transform var(--duration-fast, 120ms) var(--ease-standard, ease);
}
.callpill__play:hover { transform: scale(1.06); }
.callpill__expand { background: none; border: none; cursor: pointer; color: var(--color-text-secondary, #5C5870); font-size: 16px; padding: 4px; display: grid; place-items: center; }
.cs-callwrap { display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%; }
.vm-transcript {
  margin-top: 8px; background: var(--ss-bone, #F7F5F0);
  border: 1px solid var(--color-border-default, #EEEAE0); border-radius: var(--radius-md, 12px);
  padding: 10px 12px; font-size: 12px; line-height: 1.5;
  color: var(--ss-slate, #5C5870); max-width: 520px;
}
.vm-transcript audio { width: 100%; height: 32px; margin-bottom: 8px; display: block; }
.vm-transcript__body { white-space: pre-wrap; }

/* System line — a small inline chip for system events. */
.syschip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; color: var(--color-text-secondary, #5C5870);
  background: var(--ss-bone, #F7F5F0); border: 1px solid var(--color-border-default, #EEEAE0);
  padding: 4px 12px; border-radius: var(--radius-pill, 999px);
}
.syschip i { font-size: 12px; }
.syschip time { font-family: var(--font-mono, monospace); opacity: 0.8; }

/* Note card — full-width honey card, 3px honey left-border. */
.conv--chat .ev--note { display: block; }
.notecard {
  background: var(--color-state-warning-bg, #FFF1CC);
  border: 1px solid var(--ss-note-border, #F0D89A);
  border-left: 3px solid var(--ss-honey, #FFC233);
  border-radius: var(--radius-md, 12px); padding: 12px 14px;
}
.notecard__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.notecard__head strong { font-size: 12px; font-weight: 700; color: var(--color-state-warning, #B07A00); display: inline-flex; align-items: center; gap: 5px; flex: none; white-space: nowrap; }
.notecard__head .who { font-size: 11px; color: var(--ss-note-fg, #8A6A1E); white-space: nowrap; }
.notecard__body { font-size: var(--text-small, 14px); color: var(--ss-ink, #1F1B2E); line-height: 1.5; white-space: pre-wrap; }
.notecard__time { font-family: var(--font-mono, monospace); font-size: 10px; color: var(--ss-note-fg, #8A6A1E); margin-left: auto; }

/* Vivi block — bordered warm card; can hold multiple turns or a link summary. */
.vivi {
  border: 1px solid var(--ss-vivi-border, #FFD3B8); border-radius: var(--radius-md, 12px); overflow: hidden;
  background: var(--ss-vivi-bg, #FFFAF6); max-width: 100%;
}
.vivi__head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--ss-ai-bg, #FFE2D0); }
.vivi__head strong { font-size: 12px; font-weight: 700; color: var(--ss-sunset, #FF6B1A); }
.vivi__head .sub { font-size: 11px; color: #B5571A; margin-left: auto; font-family: var(--font-mono, monospace); }
.vivi__body { padding: 10px 12px; font-size: 13px; line-height: 1.5; color: var(--ss-ink, #1F1B2E); }
.vivi__body a { color: var(--ss-sunset, #FF6B1A); text-decoration: none; font-weight: 700; }
.vivi__body a:hover { text-decoration: underline; }
.vivi__chips { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }

/* ----- Composer ----- */
.composer { border-top: 1px solid var(--color-border-default, #EEEAE0); background: var(--ss-paper, #FFFFFF); padding: var(--space-3, 12px) var(--space-4, 16px); }
.composer__route { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-text-secondary, #5C5870); margin-bottom: 10px; flex-wrap: wrap; }
.composer__route b { color: var(--ss-ink, #1F1B2E); font-weight: 700; }
.composer__sel {
  appearance: none; font-family: var(--font-mono, monospace); font-weight: 500;
  font-size: 12px; color: var(--ss-ink, #1F1B2E);
  background: var(--ss-bone, #F7F5F0); border: 1px solid var(--color-border-default, #EEEAE0);
  border-radius: var(--radius-sm, 8px); padding: 4px 24px 4px 10px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' stroke='%235C5870' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 8px center;
}
.composer__field { display: flex; align-items: flex-end; gap: 10px; }
.composer__input {
  flex: 1; font-family: var(--font-sans, sans-serif); font-size: var(--text-small, 14px); line-height: 1.5;
  color: var(--ss-ink, #1F1B2E); background: var(--ss-paper, #FFFFFF);
  border: 1.5px solid var(--color-border-default, #EEEAE0); border-radius: var(--radius-md, 12px);
  padding: 11px 14px; resize: none; min-height: 44px; max-height: 120px;
  transition: border-color var(--duration-fast, 120ms), box-shadow var(--duration-fast, 120ms);
}
.composer__input:focus-visible { outline: none; border-color: var(--color-border-focus, #6B5FCF); box-shadow: var(--shadow-focus, 0 0 0 3px rgba(107,95,207,0.35)); }
.composer__input::placeholder { color: var(--color-text-secondary, #5C5870); opacity: 0.7; }
.composer__send {
  width: 44px; height: 44px; border-radius: var(--radius-md, 12px); border: none; flex: none;
  background: var(--ss-sunset, #FF6B1A); color: #fff;
  display: grid; place-items: center; cursor: pointer; font-size: 18px;
  transition: background var(--duration-fast, 120ms), transform var(--duration-fast, 120ms);
}
.composer__send:hover { background: var(--color-action-primary-hover, #E85A0E); }
.composer__send:active { transform: translateY(1px); }
.composer__send:disabled { opacity: 0.4; cursor: not-allowed; }
.composer__count { font-family: var(--font-mono, monospace); font-size: 10px; color: var(--color-text-secondary, #5C5870); margin-top: 6px; text-align: right; }
.composer--resolved { background: var(--ss-bone, #F7F5F0); }
.composer__resolved { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 4px; flex-wrap: wrap; }
.composer__resolved .msg { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-small, 14px); color: var(--color-text-secondary, #5C5870); }
.composer__resolved .msg i { color: var(--color-state-success, #2E8757); font-size: 18px; }

/* ----- Queue card (Hub In-line) ----- */
.queue-list { display: flex; flex-direction: column; gap: 10px; }
.qcard {
  background: var(--ss-paper, #FFFFFF); border: 1px solid var(--color-border-default, #EEEAE0);
  border-radius: var(--radius-lg, 16px); padding: 12px 14px;
  cursor: pointer; text-align: left; width: 100%;
  display: flex; flex-direction: column; gap: 9px;
  font-family: inherit; color: inherit;
  transition: border-color var(--duration-fast, 120ms), box-shadow var(--duration-fast, 120ms), transform var(--duration-fast, 120ms);
  position: relative;
}
.qcard:hover { border-color: var(--color-border-strong, #D7D2C4); box-shadow: var(--shadow-sm, 0 1px 2px rgba(31,27,46,0.05)); transform: translateY(-1px); }
.qcard:focus-visible { outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(107,95,207,0.35)); }
.qcard.is-active { border-color: var(--ss-sunset, #FF6B1A); box-shadow: 0 0 0 1px var(--ss-sunset, #FF6B1A), var(--shadow-sm, 0 1px 2px rgba(31,27,46,0.05)); }
.qcard--ringing { border-color: var(--ss-iris, #6B5FCF); }
.qcard--dropped { background: rgba(200,54,43,0.04); }
.qcard__top { display: flex; align-items: center; gap: 10px; }
.qcard__id { min-width: 0; flex: 1; }
.qcard__name { font-size: var(--text-small, 14px); font-weight: 700; color: var(--ss-ink, #1F1B2E); display: flex; align-items: center; gap: 6px; }
.qcard__name.is-mono { font-family: var(--font-mono, monospace); }
.qcard__fac { font-size: 11px; color: var(--color-text-secondary, #5C5870); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qcard__unread {
  background: var(--ss-sunset, #FF6B1A); color: #fff;
  font-size: 10px; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 999px;
  display: grid; place-items: center; padding: 0 5px; flex: none;
}
.qcard__preview { font-size: var(--text-small, 14px); color: var(--ss-slate, #5C5870); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qcard__preview b { color: var(--ss-ink, #1F1B2E); font-weight: 700; }
.qcard__foot { display: flex; align-items: center; gap: 8px; }
.qcard__time { font-family: var(--font-mono, monospace); font-size: 10px; color: var(--color-text-secondary, #5C5870); margin-left: auto; }
.qcard__caveat { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--color-state-warning, #B07A00); }
.qcard__caveat i { font-size: 13px; }
.qcard__caveat--danger { color: var(--color-state-danger, #C8362B); }
.qcard__fresh { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--ss-iris, #6B5FCF); }
.qcard__fresh i { font-size: 13px; }

/* ----- Takeover overlay ----- */
.scrim {
  position: fixed; inset: 0;
  background: rgba(31,27,46,0.42); backdrop-filter: blur(2px);
  z-index: var(--z-modal, 1000);
  display: grid; place-items: center; padding: 32px;
  opacity: 1;
}
.cs-overlay {
  width: min(720px, 100%); height: min(86vh, 880px);
  background: var(--ss-paper, #FFFFFF); border-radius: var(--radius-xl, 24px);
  box-shadow: var(--shadow-md, 0 12px 32px rgba(31,27,46,0.16));
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .scrim--enter { animation: csScrimIn var(--duration-base, 200ms) var(--ease-standard, ease) both; }
  .scrim--enter .cs-overlay { animation: csOverlayIn var(--duration-slow, 320ms) var(--ease-emphasized, ease) both; }
}
@keyframes csScrimIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes csOverlayIn { from { opacity: 0; transform: translateY(12px) scale(0.985); } to { opacity: 1; transform: none; } }
.overlay__head {
  padding: var(--space-4, 16px) var(--space-5, 24px);
  border-bottom: 1px solid var(--color-border-default, #EEEAE0);
  display: flex; align-items: center; gap: 14px;
}
.overlay__identity { min-width: 0; flex: 1; }
.overlay__name { font-size: var(--text-h3, 24px); font-weight: 700; color: var(--ss-ink, #1F1B2E); display: flex; align-items: center; gap: 10px; line-height: 1.1; flex-wrap: wrap; }
.overlay__sub { display: flex; align-items: center; gap: 10px; margin-top: 5px; font-size: 12px; color: var(--color-text-secondary, #5C5870); flex-wrap: wrap; }
.overlay__sub .mono { font-family: var(--font-mono, monospace); }
.overlay__sub .dotsep { width: 3px; height: 3px; border-radius: 999px; background: var(--color-border-strong, #D7D2C4); }
.overlay__sub .nowrap { white-space: nowrap; }
.overlay__fac { font-size: 12px; color: var(--color-text-secondary, #5C5870); margin-top: 3px; }
.overlay__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.iconbtn {
  width: 38px; height: 38px; border-radius: var(--radius-md, 12px);
  border: 1px solid var(--color-border-default, #EEEAE0); background: var(--ss-paper, #FFFFFF);
  color: var(--ss-slate, #5C5870); display: grid; place-items: center;
  cursor: pointer; font-size: 18px;
  transition: background var(--duration-fast, 120ms);
}
.iconbtn:hover { background: var(--ss-bone, #F7F5F0); color: var(--ss-ink, #1F1B2E); }
.overlay__body { flex: 1; overflow-y: auto; padding: var(--space-5, 24px); background: var(--ss-bone, #F7F5F0); }
.overlay__poll {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-mono, monospace); font-size: 10px;
  color: var(--color-text-secondary, #5C5870);
  padding: 4px; margin-bottom: 10px;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.overlay__poll .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--color-state-success, #2E8757); animation: csPulse 1.4s ease-in-out infinite; }
@keyframes csPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

/* Empty state. */
.cs-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: var(--space-7, 48px) var(--space-5, 24px); height: 100%; }
.cs-empty__ic { width: 56px; height: 56px; border-radius: 999px; background: var(--ss-cream, #FFF4E1); color: var(--ss-sunset, #FF6B1A); display: grid; place-items: center; font-size: 26px; }
.cs-empty__title { font-size: var(--text-body-lg, 18px); font-weight: 700; color: var(--ss-ink, #1F1B2E); }
.cs-empty__sub { font-size: var(--text-small, 14px); color: var(--color-text-secondary, #5C5870); max-width: 320px; line-height: 1.5; }
.cs-empty--dashed { border: 1.5px dashed var(--color-border-strong, #D7D2C4); border-radius: var(--radius-lg, 16px); background: var(--ss-cream, #FFF4E1); margin: var(--space-4, 16px); }

/* Inline confirm popover (Mark resolved). */
.confirm-wrap { position: relative; }
.confirm {
  position: absolute; top: calc(100% + 10px); right: 0; width: 280px; z-index: 5;
  background: var(--ss-paper, #FFFFFF); border: 1px solid var(--color-border-default, #EEEAE0);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-md, 0 12px 32px rgba(31,27,46,0.16));
  padding: var(--space-4, 16px);
  animation: csConfirmIn var(--duration-base, 200ms) var(--ease-emphasized, ease);
}
@keyframes csConfirmIn { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: none; } }
.confirm__title { font-size: var(--text-small, 14px); font-weight: 700; color: var(--ss-ink, #1F1B2E); margin-bottom: 4px; }
.confirm__sub   { font-size: 12px; color: var(--color-text-secondary, #5C5870); line-height: 1.5; margin-bottom: 12px; }
.confirm__row   { display: flex; gap: 8px; }

/* Profile timeline section head + body. */
.cs-tl-head { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4, 16px) var(--space-5, 24px); border-bottom: 1px solid var(--color-border-default, #EEEAE0); gap: 12px; flex-wrap: wrap; }
.cs-tl-head__meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-text-secondary, #5C5870); }
.cs-tl-body { padding: var(--space-5, 24px); max-height: 640px; overflow-y: auto; }
.cs-tl-body::-webkit-scrollbar { width: 10px; }
.cs-tl-body::-webkit-scrollbar-thumb { background: var(--ss-mist, #EEEAE0); border-radius: 999px; border: 3px solid var(--ss-bone, #F7F5F0); }
.overlay__body::-webkit-scrollbar { width: 10px; }
.overlay__body::-webkit-scrollbar-thumb { background: var(--ss-mist, #EEEAE0); border-radius: 999px; border: 3px solid var(--ss-bone, #F7F5F0); }

/* ============================================================
   facility-settings — /facilities redesign per
   design_handoff_facility_settings/README.md. Nine collapsible
   .sec cards, .frow inherit/override model, .scope-chip/.scope-pill,
   sticky .secnav, redesigned .missing banner, .esc-* escalation
   list, .lien-* policy editor, .widget__* theme editor.
   No new tokens introduced; everything derives from tokens.css.
   ============================================================ */

/* Page layout — section nav off vs. on. */
.fs-page { max-width: 880px; margin: 0 auto; width: 100%; padding: var(--space-6, 32px) var(--space-7, 48px); }
.fs-page--nav { max-width: 1060px; display: grid; grid-template-columns: 196px 1fr; gap: var(--space-6, 32px); align-items: start; }
.fs-page--nav .fs-page__head { grid-column: 1 / -1; }
.fs-page__crumb { font-family: var(--font-mono, monospace); font-size: var(--text-caption, 12px); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-secondary, #5C5870); margin-bottom: 8px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.fs-page__crumb i { font-size: 12px; opacity: 0.6; }
.fs-page__title { font-size: var(--text-h2, 32px); line-height: var(--lh-h2, 1.15); letter-spacing: var(--ls-h2, -0.01em); color: var(--ss-ink, #1F1B2E); margin: 0; }
.fs-page__facility { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.facility-select {
  appearance: none; font-family: var(--font-sans, sans-serif); font-weight: 700;
  font-size: var(--text-small, 14px); color: var(--ss-ink, #1F1B2E);
  background: var(--ss-paper, #FFFFFF); border: 1.5px solid var(--color-border-default, #EEEAE0);
  border-radius: var(--radius-pill, 999px); padding: 7px 32px 7px 14px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' stroke='%231F1B2E' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
  transition: border-color var(--duration-fast, 120ms);
}
.facility-select:hover { border-color: var(--color-border-strong, #D7D2C4); }
.facility-select:focus-visible { outline: none; border-color: var(--color-border-focus, #6B5FCF); box-shadow: var(--shadow-focus, 0 0 0 3px rgba(107,95,207,0.35)); }
.fs-page__sections { display: flex; flex-direction: column; gap: var(--space-5, 24px); margin-top: var(--space-6, 32px); }
.fs-page--nav .fs-page__sections { margin-top: 0; }

/* Section nav — sticky left rail. */
.secnav { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 1px; }
.secnav__title { font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-secondary, #5C5870); padding: 0 10px 8px; }
.secnav__item {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px;
  border: none; background: transparent; text-align: left; width: 100%;
  border-radius: var(--radius-sm, 8px); cursor: pointer;
  font-family: var(--font-sans, sans-serif); font-size: 13px; font-weight: 600;
  color: var(--ss-slate, #5C5870);
  transition: background var(--duration-fast, 120ms), color var(--duration-fast, 120ms);
}
.secnav__item i { font-size: 15px; color: var(--color-text-secondary, #5C5870); }
.secnav__item:hover { background: var(--ss-cream, #FFF4E1); color: var(--ss-ink, #1F1B2E); }
.secnav__item.is-active { background: var(--ss-cream, #FFF4E1); color: var(--ss-ink, #1F1B2E); }
.secnav__item.is-active i { color: var(--ss-sunset, #FF6B1A); }
.secnav__flag { margin-left: auto; width: 7px; height: 7px; border-radius: 999px; background: var(--ss-sunset, #FF6B1A); flex: none; }

/* Required-missing banner — links into Section #1 fields. */
.missing {
  border: 1px solid rgba(255,159,28,0.5);
  background: var(--ss-cream, #FFF4E1);
  border-radius: var(--radius-xl, 24px);
  padding: var(--space-4, 16px) var(--space-5, 24px);
  margin-bottom: var(--space-5, 24px);
  display: flex; gap: var(--space-4, 16px); align-items: flex-start;
}
.missing__ic { width: 38px; height: 38px; border-radius: 999px; background: rgba(255,159,28,0.18); color: var(--ss-sunset, #FF6B1A); display: grid; place-items: center; font-size: 19px; flex: none; }
.missing__body { flex: 1; min-width: 0; }
.missing__head { font-size: var(--text-body, 16px); font-weight: 700; color: var(--ss-ink, #1F1B2E); display: flex; align-items: center; gap: 8px; }
.missing__count { font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 700; color: var(--ss-sunset, #FF6B1A); background: var(--ss-paper, #FFFFFF); border-radius: var(--radius-pill, 999px); padding: 2px 9px; }
.missing__sub { font-size: 12px; color: var(--ss-slate, #5C5870); line-height: 1.5; margin: 4px 0 12px; max-width: 60ch; }
.missing__list { display: flex; flex-wrap: wrap; gap: 7px; }
.missing-pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px;
  border-radius: var(--radius-pill, 999px); background: var(--ss-paper, #FFFFFF);
  border: 1px solid rgba(255,159,28,0.45); cursor: pointer;
  font-family: var(--font-sans, sans-serif); font-size: 12px; font-weight: 700; color: var(--ss-ink, #1F1B2E);
  transition: all var(--duration-fast, 120ms);
}
.missing-pill:hover { background: #FFF8F0; border-color: var(--ss-sunset, #FF6B1A); transform: translateY(-1px); }
.missing-pill:focus-visible { outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(107,95,207,0.35)); }
.missing-pill__behavior { font-family: var(--font-mono, monospace); font-size: 9px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-secondary, #5C5870); }
.missing-pill--block { border-color: rgba(227,54,66,0.5); }
.missing-pill--block .missing-pill__behavior { color: var(--color-state-danger, #C8362B); }

/* Collapsible section. */
.sec { background: var(--ss-paper, #FFFFFF); border: 1px solid var(--color-border-default, #EEEAE0); border-radius: var(--radius-xl, 24px); box-shadow: var(--shadow-sm, 0 1px 2px rgba(31,27,46,0.05)); overflow: hidden; scroll-margin-top: 80px; transition: box-shadow var(--duration-fast, 120ms); }
.sec.is-open { box-shadow: var(--shadow-md, 0 4px 12px rgba(31,27,46,0.08)); }
.sec.is-target { animation: secTarget 1.1s var(--ease-standard, ease); }
@keyframes secTarget { 0%,100% { box-shadow: var(--shadow-sm, 0 1px 2px rgba(31,27,46,0.05)); } 25% { box-shadow: 0 0 0 2px var(--ss-iris, #6B5FCF); } }
.sec__head {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3, 12px);
  width: 100%; padding: var(--space-4, 16px) var(--space-5, 24px); border: none; background: transparent;
  cursor: pointer; text-align: left; font-family: var(--font-sans, sans-serif);
  transition: background var(--duration-fast, 120ms);
}
.sec__head:hover { background: var(--ss-mist, #EEEAE0); }
.sec__head:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--color-border-focus, #6B5FCF); }
.sec__caret { font-size: 14px; color: var(--ss-slate, #5C5870); transition: transform var(--duration-base, 200ms) var(--ease-emphasized, ease); }
.sec.is-open .sec__caret { transform: rotate(90deg); }
.sec__titles { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sec__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sec__icon { font-size: 17px; color: var(--ss-slate, #5C5870); }
.sec__title { font-size: var(--text-eyebrow, 12px); font-weight: 700; letter-spacing: var(--ls-eyebrow, 0.10em); text-transform: uppercase; color: var(--color-text-secondary, #5C5870); }
.sec.is-open .sec__title { color: var(--ss-ink, #1F1B2E); }
.sec__summary { font-size: 12px; color: var(--ss-slate, #5C5870); line-height: 1.45; overflow: hidden; text-overflow: ellipsis; }
.sec.is-open .sec__summary { display: none; }
.sec__head-right { display: flex; align-items: center; gap: 10px; }
.sec__attn { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--ss-sunset, #FF6B1A); background: var(--ss-cream, #FFF4E1); border-radius: var(--radius-pill, 999px); padding: 4px 10px; white-space: nowrap; }
.sec__attn i { font-size: 12px; }
.sec__body { padding: 0 var(--space-5, 24px) var(--space-5, 24px); border-top: 1px solid var(--color-border-default, #EEEAE0); }
.sec.is-open .sec__body { display: block; animation: secBodyIn var(--duration-base, 200ms) var(--ease-emphasized, ease); }
.sec:not(.is-open) .sec__body { display: none; }
@keyframes secBodyIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sec__intro { font-size: var(--text-small, 14px); color: var(--ss-slate, #5C5870); line-height: 1.55; padding: var(--space-4, 16px) 0 var(--space-2, 8px); max-width: 64ch; }

/* Scope chip — header-level. Pill variant per README defaults. */
.scope-chip { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 10px; border-radius: var(--radius-pill, 999px); }
.scope-chip i { font-size: 12px; }
.scope-chip--facility { background: rgba(255,159,28,0.16); color: var(--ss-ink, #1F1B2E); }
.scope-chip--client   { background: rgba(107,95,207,0.14); color: var(--ss-iris, #6B5FCF); }
.scope-chip--mixed     { background: var(--ss-mist, #EEEAE0); color: var(--ss-slate, #5C5870); }

/* Field row — inherit/override model. */
.frow { display: grid; grid-template-columns: 1fr minmax(300px, 360px); gap: var(--space-5, 24px); align-items: start; padding: var(--space-4, 16px) 0; border-bottom: 1px solid var(--color-border-default, #EEEAE0); }
.frow:last-child { border-bottom: none; }
.frow--compact { padding: 11px 0; }
.frow.is-target-field .frow__label { animation: fsTargetPulse 1.1s var(--ease-standard, ease); border-radius: var(--radius-sm, 8px); }
@keyframes fsTargetPulse { 0%,100% { box-shadow: none; } 30% { box-shadow: 0 0 0 4px rgba(255,159,28,0.25); } }
.frow__main { min-width: 0; }
.frow__label { font-size: var(--text-small, 14px); font-weight: 700; color: var(--ss-ink, #1F1B2E); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.frow__req { font-family: var(--font-mono, monospace); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ss-sunset, #FF6B1A); background: var(--ss-cream, #FFF4E1); border-radius: var(--radius-pill, 999px); padding: 2px 7px; }
.frow__req--block { color: var(--color-state-danger, #C8362B); background: var(--color-state-danger-bg, #FBE5E1); }
.frow__desc { font-size: 12px; color: var(--ss-slate, #5C5870); line-height: 1.5; margin-top: 4px; max-width: 56ch; }
.frow__value { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.frow__control { display: flex; align-items: center; gap: 8px; }
.frow__control .input { min-height: 40px; padding: 9px 12px; }
.frow__select {
  appearance: none; font-family: var(--font-sans, sans-serif); font-weight: 600; font-size: var(--text-small, 14px);
  color: var(--ss-ink, #1F1B2E); background: var(--ss-paper, #FFFFFF);
  border: 1.5px solid var(--color-border-default, #EEEAE0);
  border-radius: var(--radius-sm, 8px); padding: 9px 32px 9px 12px; min-height: 40px; width: 100%; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' stroke='%235C5870' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 11px center;
  transition: border-color var(--duration-fast, 120ms), box-shadow var(--duration-fast, 120ms);
}
.frow__select:focus-visible { outline: none; border-color: var(--color-border-focus, #6B5FCF); box-shadow: var(--shadow-focus, 0 0 0 3px rgba(107,95,207,0.35)); }
.frow__meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; min-height: 18px; }
.scope-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 8px; border-radius: var(--radius-pill, 999px); }
.scope-pill i { font-size: 11px; }
.scope-pill--facility { background: rgba(255,159,28,0.16); color: var(--ss-ink, #1F1B2E); }
.scope-pill--inherited { background: var(--ss-mist, #EEEAE0); color: var(--ss-slate, #5C5870); }
.frow__link { border: none; background: transparent; padding: 0; cursor: pointer; font-family: var(--font-sans, sans-serif); font-size: 12px; font-weight: 700; color: var(--ss-iris, #6B5FCF); transition: color var(--duration-fast, 120ms); }
.frow__link:hover { color: var(--ss-ink, #1F1B2E); text-decoration: underline; }
.frow__link--muted { color: var(--ss-slate, #5C5870); }
.frow__inherited-note { font-size: 11px; color: var(--color-text-secondary, #5C5870); }
.frow__value--inherited .input,
.frow__value--inherited .textarea,
.frow__value--inherited .frow__select { background: var(--ss-mist, #EEEAE0); color: var(--ss-slate, #5C5870); border-style: dashed; }
.frow__value--missing .input,
.frow__value--missing .textarea,
.frow__value--missing .frow__select { border-color: rgba(255,159,28,0.55); background: #FFFBF4; }

/* Money input (left-padded $ prefix). */
.frow__money { display: inline-flex; align-items: center; position: relative; max-width: 140px; }
.frow__money-sign { position: absolute; left: 12px; font-family: var(--font-mono, monospace); font-size: var(--text-small, 14px); color: var(--ss-slate, #5C5870); pointer-events: none; }
.frow__money-input { padding-left: 24px !important; font-family: var(--font-mono, monospace); }
.frow__money-input.is-locked { background: var(--ss-mist, #EEEAE0); color: var(--ss-slate, #5C5870); cursor: not-allowed; }

/* Toggle row variant + sub-block (dependent fields under a master toggle). */
.frow--toggle { grid-template-columns: 1fr auto; align-items: center; }
.frow--toggle .frow__value { align-items: flex-end; }
.fsub { margin-top: var(--space-3, 12px); padding: var(--space-4, 16px); background: var(--ss-mist, #EEEAE0); border-radius: var(--radius-md, 12px); display: flex; flex-direction: column; }
.fsub .frow { border-bottom-color: rgba(0,0,0,0.05); }
.fsub--disabled { opacity: 0.5; pointer-events: none; }

/* Field primitives (used by inline forms — escalation, verification). */
.fs-field { display: flex; flex-direction: column; gap: 6px; }
.fs-field__label { font-size: var(--text-small, 14px); font-weight: 700; color: var(--color-text-primary, #1F1B2E); display: flex; align-items: center; gap: 6px; }
.fs-field__opt { font-family: var(--font-mono, monospace); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-secondary, #5C5870); }
.fs-field__help { font-size: 12px; color: var(--color-text-secondary, #5C5870); line-height: 1.45; }
.fs-field__error { font-size: 12px; color: var(--color-state-danger, #C8362B); display: inline-flex; align-items: center; gap: 5px; }
.fs-field--error .input,
.fs-field--error .textarea { border-color: var(--color-state-danger, #C8362B); }

/* Fact toggle chips (renamed from .chip to avoid collision with .chip channel chip). */
.fact-toggles { display: flex; flex-wrap: wrap; gap: 7px; }
.fact-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill, 999px); border: 1.5px solid var(--color-border-default, #EEEAE0); background: var(--ss-paper, #FFFFFF); cursor: pointer; font-size: 12px; font-weight: 700; color: var(--ss-slate, #5C5870); transition: all var(--duration-fast, 120ms); }
.fact-toggle:hover { border-color: var(--color-border-strong, #D7D2C4); }
.fact-toggle.is-on { background: var(--ss-iris, #6B5FCF); border-color: var(--ss-iris, #6B5FCF); color: #fff; }
.fact-toggle:focus-visible { outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(107,95,207,0.35)); }

/* 2FA scenario grid. */
.scn-head { font-size: var(--text-small, 14px); font-weight: 700; color: var(--ss-ink, #1F1B2E); margin: var(--space-4, 16px) 0 4px; }
.scn-sub { font-size: 12px; color: var(--ss-slate, #5C5870); line-height: 1.5; margin-bottom: var(--space-3, 12px); max-width: 60ch; }
.scn-always { font-size: 12px; line-height: 1.5; padding: 10px 12px; background: var(--ss-cream, #FFF4E1); border-left: 3px solid var(--ss-sunset, #FF6B1A); border-radius: var(--radius-sm, 8px); margin-bottom: var(--space-3, 12px); color: var(--ss-ink, #1F1B2E); }
.scn-always em { color: var(--ss-slate, #5C5870); font-style: normal; }
.scn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.scn-item {
  display: flex; align-items: center; gap: 10px; padding: 11px 13px;
  border: 1px solid var(--color-border-default, #EEEAE0); border-radius: var(--radius-md, 12px);
  cursor: pointer; transition: all var(--duration-fast, 120ms);
  background: var(--ss-paper, #FFFFFF);
}
.scn-item:hover { border-color: var(--color-border-strong, #D7D2C4); background: var(--ss-mist, #EEEAE0); }
.scn-item__check { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--color-border-strong, #D7D2C4); display: grid; place-items: center; color: #fff; flex: none; transition: all var(--duration-fast, 120ms); }
.scn-item__check i { font-size: 13px; opacity: 0; }
.scn-item.is-on { border-color: var(--ss-iris, #6B5FCF); background: #FCFBFF; }
.scn-item.is-on .scn-item__check { background: var(--ss-iris, #6B5FCF); border-color: var(--ss-iris, #6B5FCF); }
.scn-item.is-on .scn-item__check i { opacity: 1; }
.scn-item.is-locked { cursor: default; opacity: 0.85; }
.scn-item__txt { min-width: 0; flex: 1; }
.scn-item__name { font-size: var(--text-small, 14px); font-weight: 700; color: var(--ss-ink, #1F1B2E); }
.scn-item__desc { font-size: 11px; color: var(--ss-slate, #5C5870); margin-top: 1px; }
.scn-item__tag { margin-left: auto; font-family: var(--font-mono, monospace); font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ss-sunset, #FF6B1A); flex: none; display: inline-flex; align-items: center; gap: 4px; }

/* Inherit banner (Escalation State E) — also reusable for any inherit-scope state. */
.inherit-banner {
  display: flex; align-items: center; gap: var(--space-3, 12px);
  padding: 13px var(--space-4, 16px);
  background: var(--color-state-info-bg, #ECE9FA);
  border-radius: var(--radius-md, 12px);
  margin-bottom: var(--space-4, 16px);
}
.inherit-banner__ic { width: 34px; height: 34px; border-radius: 999px; background: rgba(107,95,207,0.16); color: var(--ss-iris, #6B5FCF); display: grid; place-items: center; font-size: 17px; flex: none; }
.inherit-banner__txt { flex: 1; min-width: 0; }
.inherit-banner__title { font-size: var(--text-small, 14px); font-weight: 700; color: var(--ss-ink, #1F1B2E); }
.inherit-banner__sub { font-size: 12px; color: var(--ss-slate, #5C5870); line-height: 1.45; margin-top: 1px; }

/* Escalation list rows. */
.esc-list { display: flex; flex-direction: column; gap: 10px; margin-top: var(--space-2, 8px); }
.esc-list--compact { gap: 6px; }
.esc-list--inherited { opacity: 0.9; }
.esc-row {
  display: grid; grid-template-columns: auto auto 1fr auto auto;
  align-items: center; gap: var(--space-3, 12px);
  padding: 12px 14px 12px 8px;
  background: var(--ss-paper, #FFFFFF); border: 1px solid var(--color-border-default, #EEEAE0);
  border-radius: var(--radius-md, 12px);
  transition: transform var(--duration-fast, 120ms), box-shadow var(--duration-fast, 120ms), border-color var(--duration-fast, 120ms), opacity var(--duration-fast, 120ms);
}
.esc-list--compact .esc-row { padding: 8px 12px 8px 6px; }
.esc-row:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm, 0 1px 2px rgba(31,27,46,0.05)); border-color: var(--color-border-strong, #D7D2C4); }
.esc-row.is-inactive { opacity: 0.55; }
.esc-row.is-dragging { opacity: 0.4; box-shadow: var(--shadow-md, 0 4px 12px rgba(31,27,46,0.08)); border-color: var(--ss-iris, #6B5FCF); }
.esc-row.is-drop-target { border-color: var(--ss-iris, #6B5FCF); box-shadow: 0 0 0 1px var(--ss-iris, #6B5FCF); }
.esc-grip { display: flex; flex-direction: column; align-items: center; gap: 1px; color: var(--color-text-secondary, #5C5870); }
.esc-grip__handle { width: 28px; height: 28px; border: none; background: transparent; color: var(--ss-slate, #5C5870); cursor: grab; display: grid; place-items: center; font-size: 18px; border-radius: var(--radius-xs, 4px); opacity: 0.55; transition: opacity var(--duration-fast, 120ms), background var(--duration-fast, 120ms), color var(--duration-fast, 120ms); }
.esc-row:hover .esc-grip__handle { opacity: 1; }
.esc-grip__handle:hover { background: var(--ss-bone, #F7F5F0); color: var(--ss-ink, #1F1B2E); }
.esc-grip__handle:active { cursor: grabbing; }
.esc-grip__handle:focus-visible { outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(107,95,207,0.35)); opacity: 1; }
.esc-grip__arrows { display: flex; flex-direction: column; gap: 0; }
.esc-arrow { width: 22px; height: 16px; border: none; background: transparent; cursor: pointer; color: var(--color-text-secondary, #5C5870); display: grid; place-items: center; font-size: 12px; border-radius: 3px; padding: 0; opacity: 0; transition: opacity var(--duration-fast, 120ms), color var(--duration-fast, 120ms), background var(--duration-fast, 120ms); }
.esc-row:hover .esc-arrow, .esc-arrow:focus-visible { opacity: 1; }
.esc-arrow:hover { color: var(--ss-ink, #1F1B2E); background: var(--ss-bone, #F7F5F0); }
.esc-arrow:disabled { opacity: 0 !important; pointer-events: none; }
.esc-arrow:focus-visible { outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(107,95,207,0.35)); }
.esc-priority { width: 26px; height: 26px; border-radius: 999px; flex: none; background: var(--ss-cream, #FFF4E1); color: var(--ss-sunset, #FF6B1A); display: grid; place-items: center; font-family: var(--font-mono, monospace); font-size: 12px; font-weight: 700; }
.esc-row.is-inactive .esc-priority { background: var(--ss-mist, #EEEAE0); color: var(--ss-slate, #5C5870); }
.esc-id { min-width: 0; display: flex; align-items: center; gap: 12px; }
.esc-id__text { min-width: 0; }
.esc-id__name { font-size: var(--text-body, 16px); font-weight: 700; color: var(--ss-ink, #1F1B2E); line-height: 1.25; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.esc-id__role { font-size: 12px; color: var(--color-text-secondary, #5C5870); margin-top: 2px; }
.esc-id__note { display: inline-flex; align-items: center; gap: 4px; width: fit-content; max-width: 100%; font-size: 11px; color: var(--ss-iris, #6B5FCF); margin-top: 4px; cursor: help; }
.esc-id__note i { font-size: 12px; }
.esc-phone { font-family: var(--font-mono, monospace); font-size: var(--text-small, 14px); color: var(--ss-ink, #1F1B2E); white-space: nowrap; letter-spacing: 0.01em; }
.esc-status { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px 4px 9px; font-size: 11px; font-weight: 700; border-radius: var(--radius-pill, 999px); line-height: 1.4; white-space: nowrap; }
.esc-status__dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; flex: none; }
.esc-status--active { background: var(--color-state-success-bg, #E3F2E9); color: var(--color-state-success, #2E8757); }
.esc-status--inactive { background: var(--ss-mist, #EEEAE0); color: var(--ss-slate, #5C5870); }
.esc-actions { display: flex; align-items: center; gap: 4px; }
.esc-iconbtn { width: 36px; height: 36px; border-radius: var(--radius-sm, 8px); border: 1px solid transparent; background: transparent; color: var(--ss-slate, #5C5870); display: grid; place-items: center; cursor: pointer; font-size: 17px; transition: all var(--duration-fast, 120ms); }
.esc-iconbtn:hover { background: var(--ss-bone, #F7F5F0); color: var(--ss-ink, #1F1B2E); border-color: var(--color-border-default, #EEEAE0); }
.esc-iconbtn:focus-visible { outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(107,95,207,0.35)); }
.esc-iconbtn--danger:hover { background: var(--color-state-danger-bg, #FBE5E1); color: var(--color-state-danger, #C8362B); border-color: transparent; }
.esc-add {
  margin-top: 12px; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px; min-height: 48px;
  background: transparent; color: var(--ss-slate, #5C5870);
  border: 1.5px dashed var(--color-border-strong, #D7D2C4); border-radius: var(--radius-md, 12px);
  font-family: var(--font-sans, sans-serif); font-size: var(--text-small, 14px); font-weight: 700;
  cursor: pointer; transition: all var(--duration-fast, 120ms);
}
.esc-add:hover { border-color: var(--ss-sunset, #FF6B1A); color: var(--ss-sunset, #FF6B1A); background: #FFF8F3; }
.esc-add:focus-visible { outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(107,95,207,0.35)); }
.esc-add i { font-size: 17px; }
.esc-form {
  border: 1.5px solid var(--ss-iris, #6B5FCF);
  border-radius: var(--radius-md, 12px);
  background: #FCFBFF;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(31,27,46,0.05));
  overflow: hidden;
  animation: escFormIn var(--duration-base, 200ms) var(--ease-emphasized, ease);
}
@keyframes escFormIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.esc-form__head { display: flex; align-items: center; gap: 8px; padding: 11px 16px; background: var(--color-state-info-bg, #ECE9FA); }
.esc-form__head i { color: var(--ss-iris, #6B5FCF); font-size: 16px; }
.esc-form__head strong { font-size: 12px; font-weight: 700; color: var(--ss-iris, #6B5FCF); letter-spacing: 0.02em; text-transform: uppercase; }
.esc-form__body { padding: var(--space-4, 16px) var(--space-5, 24px); display: flex; flex-direction: column; gap: var(--space-4, 16px); }
.esc-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4, 16px); }
.esc-form__grid--phone { grid-template-columns: 1.4fr 0.8fr; }
.esc-form__row-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4, 16px); padding: 11px 13px; background: var(--ss-paper, #FFFFFF); border: 1px solid var(--color-border-default, #EEEAE0); border-radius: var(--radius-sm, 8px); }
.esc-form__row-toggle .lbl { font-size: var(--text-small, 14px); font-weight: 700; color: var(--ss-ink, #1F1B2E); }
.esc-form__row-toggle .sub { font-size: 12px; color: var(--color-text-secondary, #5C5870); margin-top: 1px; }
.esc-form__foot { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-top: 1px solid var(--color-border-default, #EEEAE0); background: var(--ss-paper, #FFFFFF); }
.esc-form__foot .spacer { flex: 1; }
.esc-form__priority-sel {
  appearance: none; font-family: var(--font-mono, monospace); font-weight: 500; font-size: var(--text-small, 14px);
  color: var(--ss-ink, #1F1B2E); background: var(--ss-paper, #FFFFFF); border: 1.5px solid var(--color-border-default, #EEEAE0);
  border-radius: var(--radius-sm, 8px); padding: 11px 30px 11px 13px; min-height: 44px; width: 100%; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' stroke='%235C5870' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 11px center;
}
.esc-form__priority-sel:focus-visible { outline: none; border-color: var(--color-border-focus, #6B5FCF); box-shadow: var(--shadow-focus, 0 0 0 3px rgba(107,95,207,0.35)); }
.esc-confirm-wrap { position: relative; display: inline-flex; }
.esc-confirm {
  position: absolute; top: calc(100% + 8px); right: 0; width: 256px; z-index: var(--z-dropdown, 100);
  background: var(--ss-paper, #FFFFFF); border: 1px solid var(--color-border-default, #EEEAE0); border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-md, 0 12px 32px rgba(31,27,46,0.08)); padding: var(--space-4, 16px); text-align: left;
  animation: escConfirmIn var(--duration-base, 200ms) var(--ease-emphasized, ease);
}
@keyframes escConfirmIn { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: none; } }
.esc-confirm::after {
  content: ""; position: absolute; top: -6px; right: 16px; width: 11px; height: 11px;
  background: var(--ss-paper, #FFFFFF); border-left: 1px solid var(--color-border-default, #EEEAE0); border-top: 1px solid var(--color-border-default, #EEEAE0);
  transform: rotate(45deg);
}
.esc-confirm__title { font-size: var(--text-small, 14px); font-weight: 700; color: var(--ss-ink, #1F1B2E); margin-bottom: 4px; line-height: 1.35; }
.esc-confirm__sub { font-size: 12px; color: var(--color-text-secondary, #5C5870); line-height: 1.5; margin-bottom: 12px; }
.esc-confirm__row { display: flex; gap: 8px; }
.esc-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 6px; padding: var(--space-7, 48px) var(--space-5, 24px);
  border: 1.5px dashed var(--color-border-strong, #D7D2C4); border-radius: var(--radius-lg, 16px);
  background: var(--ss-cream, #FFF4E1);
}
.esc-empty__ic { width: 52px; height: 52px; border-radius: 999px; background: var(--ss-paper, #FFFFFF); color: var(--ss-sunset, #FF6B1A); display: grid; place-items: center; font-size: 24px; margin-bottom: 6px; box-shadow: var(--shadow-sm, 0 1px 2px rgba(31,27,46,0.05)); }
.esc-empty__title { font-size: var(--text-body-lg, 18px); font-weight: 700; color: var(--ss-ink, #1F1B2E); }
.esc-empty__sub { font-size: var(--text-small, 14px); color: var(--color-text-secondary, #5C5870); max-width: 340px; line-height: 1.5; margin-bottom: var(--space-3, 12px); }

/* Lien & late-fee policy editor. */
.lien { display: flex; flex-direction: column; gap: var(--space-4, 16px); padding-top: var(--space-2, 8px); }
.lien__state { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lien__state-name { font-size: var(--text-body, 16px); font-weight: 700; color: var(--ss-ink, #1F1B2E); }
.lien__statute { font-family: var(--font-mono, monospace); font-size: 11px; background: var(--ss-mist, #EEEAE0); color: var(--ss-iris, #6B5FCF); padding: 3px 8px; border-radius: var(--radius-xs, 4px); }
.lien__controls { display: flex; gap: var(--space-4, 16px); flex-wrap: wrap; padding: var(--space-4, 16px); background: var(--ss-mist, #EEEAE0); border-radius: var(--radius-md, 12px); }
.lien__ctl { display: flex; flex-direction: column; gap: 6px; min-width: 220px; flex: 1; }
.lien__ctl-label { font-size: 12px; font-weight: 700; color: var(--ss-ink, #1F1B2E); }
.lien__cat { border: 1px solid var(--color-border-default, #EEEAE0); border-radius: var(--radius-md, 12px); padding: var(--space-4, 16px); }
.lien__cat-head { display: flex; align-items: center; gap: 10px; }
.lien__cat-label { font-size: var(--text-small, 14px); font-weight: 700; color: var(--ss-ink, #1F1B2E); }
.lien__lock { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono, monospace); font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ss-slate, #5C5870); background: var(--ss-mist, #EEEAE0); padding: 3px 8px; border-radius: var(--radius-pill, 999px); }
.lien__lock i { font-size: 11px; }
.lien__cat-desc { font-size: 12px; color: var(--ss-slate, #5C5870); line-height: 1.5; margin: 4px 0 var(--space-3, 12px); }
.lien__tiers { display: flex; flex-direction: column; gap: 10px; }
.lien__tier { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lien__tier-label { font-size: 12px; color: var(--ss-ink, #1F1B2E); min-width: 200px; font-weight: 600; }
.lien__cap { font-size: 11px; color: var(--ss-slate, #5C5870); font-style: italic; }
.lien__timeline { padding: var(--space-4, 16px); background: var(--ss-cream, #FFF4E1); border-radius: var(--radius-md, 12px); }
.lien__timeline-title { display: flex; align-items: center; gap: 7px; font-size: var(--text-small, 14px); font-weight: 700; color: var(--ss-ink, #1F1B2E); margin-bottom: var(--space-3, 12px); }
.lien__timeline-title i { color: var(--ss-sunset, #FF6B1A); }
.lien__timeline-rows { display: flex; flex-direction: column; gap: 0; }
.lien__tl-row { display: grid; grid-template-columns: 80px auto 1fr; align-items: center; gap: 12px; padding: 7px 0; }
.lien__tl-day { font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 700; color: var(--ss-sunset, #FF6B1A); }
.lien__tl-line { width: 9px; height: 9px; border-radius: 999px; background: var(--ss-paper, #FFFFFF); border: 2px solid var(--ss-sunset, #FF6B1A); }
.lien__tl-event { font-size: 12px; color: var(--ss-ink, #1F1B2E); }
.lien__locks { border-top: 1px solid var(--color-border-default, #EEEAE0); padding-top: var(--space-2, 8px); margin-top: var(--space-2, 8px); }
.lien__locks-title { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ss-slate, #5C5870); margin-bottom: var(--space-2, 8px); }

/* Vivi chat widget theme editor. */
.widget { display: flex; flex-direction: column; }
.widget__preview { position: relative; display: flex; flex-direction: column; gap: 10px; padding: var(--space-5, 24px); background: var(--ss-mist, #EEEAE0); border-radius: var(--radius-lg, 16px); margin: var(--space-2, 8px) 0 var(--space-4, 16px); min-height: 120px; }
.widget__preview-chip { font-family: var(--font-mono, monospace); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ss-slate, #5C5870); }
.widget__bubble { align-self: flex-start; max-width: 70%; padding: 12px 16px; background: var(--w-primary, #FF6B1A); color: #fff; border-radius: 14px 14px 14px 4px; font-size: 13px; line-height: 1.45; box-shadow: var(--shadow-sm, 0 1px 2px rgba(31,27,46,0.05)); }
.widget__launcher { position: absolute; right: var(--space-5, 24px); bottom: var(--space-5, 24px); width: 46px; height: 46px; border-radius: 999px; display: grid; place-items: center; color: #fff; font-size: 22px; box-shadow: var(--shadow-md, 0 12px 32px rgba(31,27,46,0.08)); }
.wcolor { display: flex; align-items: center; gap: 8px; }
.wcolor__swatch { width: 42px; height: 40px; padding: 0; border: 1.5px solid var(--color-border-default, #EEEAE0); border-radius: var(--radius-sm, 8px); cursor: pointer; background: transparent; }
.wcolor__swatch:disabled { opacity: 0.6; cursor: not-allowed; }
.widget .frow:last-child { border-bottom: none; }

/* Section 1 — Profile footer (Management group + geocoding status badge) */
.profile-footer { margin-top: var(--space-4, 16px); padding-top: var(--space-4, 16px); border-top: 1px dashed var(--color-border-default, #EEEAE0); display: flex; flex-direction: column; gap: var(--space-3, 12px); }
.geocode-status {
  display: flex; align-items: flex-start; gap: var(--space-2, 8px);
  padding: var(--space-3, 12px) var(--space-3, 12px);
  border-radius: var(--radius-md, 10px);
  font-size: 13px; line-height: 1.5;
}
.geocode-status i { font-size: 18px; flex: none; margin-top: 1px; }
.geocode-status--ok    { background: rgba(34,139,80,0.07); color: #1F4F32; }
.geocode-status--ok i  { color: #228B50; }
.geocode-status--miss  { background: rgba(255,159,28,0.08); color: #6B4112; }
.geocode-status--miss i { color: #C77B16; }
.geocode-retry {
  margin-left: 6px; padding: 2px 10px;
  font: inherit; font-size: 12px; font-weight: 700;
  background: transparent; color: var(--ss-iris, #6B5FCF);
  border: 1px solid var(--ss-iris, #6B5FCF); border-radius: var(--radius-sm, 8px);
  cursor: pointer;
}
.geocode-retry:hover { background: var(--ss-iris, #6B5FCF); color: #fff; }
.geocode-retry:disabled { opacity: 0.6; cursor: not-allowed; }

/* Import-from-Google (Phase A enrichment) */
.gimport { display: flex; flex-direction: column; gap: var(--space-2, 8px); }
.gimport__btn {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 9px 16px; border-radius: var(--radius-md, 10px);
  border: 1px solid var(--color-border-strong, #D7D2C4); background: var(--ss-paper, #FFFDF8); color: var(--ss-ink, #1F1B2E);
  cursor: pointer; transition: background var(--duration-fast, 120ms), border-color var(--duration-fast, 120ms);
}
.gimport__btn:hover:not(:disabled) { background: var(--ss-mist, #EEEAE0); border-color: var(--ss-iris, #6B5FCF); }
.gimport__btn:disabled { opacity: 0.7; cursor: progress; }
.gimport__btn i { font-size: 15px; color: var(--ss-iris, #6B5FCF); }
.gimport__hint { font-size: 12px; color: var(--ss-slate, #5C5870); line-height: 1.5; }
.gimport__panel { border: 1px solid var(--color-border-default, #EEEAE0); border-radius: var(--radius-md, 10px); background: #FCFBFF; padding: var(--space-3, 12px) var(--space-4, 16px); }
.gimport__err { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #6B4112; }
.gimport__err i { color: #C77B16; font-size: 16px; }
.gimport__match { padding-bottom: var(--space-2, 8px); border-bottom: 1px solid var(--color-border-default, #EEEAE0); margin-bottom: var(--space-2, 8px); }
.gimport__match-name { font-size: var(--text-small, 14px); font-weight: 700; color: var(--ss-ink, #1F1B2E); }
.gimport__match-addr { font-size: 12px; color: var(--ss-slate, #5C5870); margin-top: 1px; }
.gimport__match-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; font-size: 12px; color: var(--ss-slate, #5C5870); }
.gimport__match-meta span { display: inline-flex; align-items: center; gap: 4px; }
.gimport__match-meta i { font-size: 13px; color: var(--ss-sunset, #FF6B1A); }
.gimport__status { font-family: var(--font-mono, monospace); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; background: rgba(34,139,80,0.1); color: #1F4F32; padding: 1px 7px; border-radius: 999px; }
.gimport__rows { display: flex; flex-direction: column; gap: var(--space-2, 8px); }
.gimport__row { display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: var(--space-3, 12px); padding: var(--space-2, 8px) 0; }
.gimport__row--ref { grid-template-columns: 1fr; gap: 4px; }
.gimport__row-label { font-size: var(--text-small, 14px); font-weight: 600; color: var(--ss-ink, #1F1B2E); }
.gimport__row-vals { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.gimport__cur { font-size: 13px; color: var(--ss-slate, #5C5870); text-decoration: line-through; }
.gimport__row-vals > i { font-size: 13px; color: var(--ss-slate, #5C5870); }
.gimport__new { font-size: 13px; font-weight: 600; color: var(--ss-ink, #1F1B2E); }
.gimport__accept {
  font: inherit; font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--ss-iris, #6B5FCF); background: var(--ss-iris, #6B5FCF); color: #fff; cursor: pointer;
}
.gimport__accept:hover:not(:disabled) { background: #574bc4; }
.gimport__accept:disabled { opacity: 0.6; cursor: progress; }
.gimport__match-ok { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: #228B50; }
.gimport__row--done { opacity: 0.7; }
.gimport__ref-tag { font-family: var(--font-mono, monospace); font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ss-slate, #5C5870); border: 1px solid var(--color-border-default, #EEEAE0); padding: 1px 6px; border-radius: 999px; margin-left: 6px; }
.gimport__row--hours { grid-template-columns: 1fr; gap: 6px; }
.gimport__row-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gimport__hours { font-size: 12.5px; color: var(--ss-ink, #1F1B2E); line-height: 1.6; font-family: var(--font-mono, monospace); }
.gimport__ref-note { font-size: 11.5px; color: var(--ss-slate, #5C5870); font-style: italic; }
.gimport__allmatch, .gimport__match-ok i { color: #228B50; }
.gimport__allmatch { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #1F4F32; }

@media (max-width: 880px) {
  .fs-page--nav { grid-template-columns: 1fr; }
  .secnav { display: none; }
  .frow, .frow--toggle { grid-template-columns: 1fr; gap: var(--space-3, 12px); }
  .scn-grid { grid-template-columns: 1fr; }
  .gimport__row { grid-template-columns: 1fr; gap: 6px; }
}

/* ============================================================
   facility-profile controls — richer inputs for Section 1
   per design_handoff_facility_profile/. Address autocomplete
   (Nominatim-backed), per-day hours editor, user-select for
   on-site manager. Wide-row variant for the hours editors.
   ============================================================ */

/* Wide field row — label/desc stack above a full-width control. Used
   for the hours editors where the per-day grid needs full width. */
.frow--wide { grid-template-columns: 1fr; gap: var(--space-3, 12px); }
.frow--wide .frow__value { width: 100%; }

/* ---------- Address autocomplete (.addr) ---------- */
.addr { position: relative; width: 100%; }
.addr__control { position: relative; display: flex; align-items: center; }
.addr__pin { position: absolute; left: 12px; color: var(--ss-sunset, #FF6B1A); font-size: 16px; pointer-events: none; }
.addr__input { padding-left: 36px !important; padding-right: 36px !important; }
.addr__clear {
  position: absolute; right: 8px; width: 24px; height: 24px;
  border: none; background: transparent; color: var(--ss-slate, #5C5870);
  cursor: pointer; border-radius: var(--radius-xs, 4px);
  display: grid; place-items: center;
}
.addr__clear:hover { background: var(--ss-mist, #EEEAE0); color: var(--ss-ink, #1F1B2E); }
.addr__menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  z-index: var(--z-dropdown, 100);
  background: var(--ss-paper, #FFFFFF); border: 1px solid var(--color-border-default, #EEEAE0);
  border-radius: var(--radius-md, 12px); box-shadow: var(--shadow-md, 0 12px 32px rgba(31,27,46,0.08));
  overflow: hidden;
  animation: escFormIn var(--duration-base, 200ms) var(--ease-emphasized, ease);
}
.addr__opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 13px; border: none; background: transparent;
  cursor: pointer; text-align: left;
  font-family: var(--font-sans, sans-serif); font-size: var(--text-small, 14px); color: var(--ss-ink, #1F1B2E);
}
.addr__opt i { color: var(--ss-slate, #5C5870); font-size: 15px; flex: none; }
.addr__opt.is-hi, .addr__opt:hover { background: var(--ss-cream, #FFF4E1); }
.addr__opt-text { min-width: 0; }
.addr__attr {
  display: flex; align-items: center; gap: 6px; padding: 8px 13px;
  border-top: 1px solid var(--color-border-default, #EEEAE0);
  font-size: 10px; color: var(--color-text-secondary, #5C5870);
  background: var(--ss-bone, #F7F5F0);
}
.addr__attr i { font-size: 13px; color: var(--ss-iris, #6B5FCF); }
.addr__loading {
  padding: 12px 13px; font-size: 12px; color: var(--ss-slate, #5C5870);
  display: flex; align-items: center; gap: 8px;
}
.addr__loading .cs-spin { color: var(--ss-iris, #6B5FCF); }
.addr__empty {
  padding: 12px 13px; font-size: 12px; color: var(--ss-slate, #5C5870); font-style: italic;
}

/* ---------- User select (on-site manager) ---------- */
.usel { display: flex; flex-direction: column; gap: 8px; }
.usel__card { display: flex; align-items: center; gap: 10px; padding: 9px 11px; background: var(--ss-mist, #EEEAE0); border-radius: var(--radius-md, 12px); }
.usel__meta { display: flex; flex-direction: column; min-width: 0; }
.usel__name { font-size: var(--text-small, 14px); font-weight: 700; color: var(--ss-ink, #1F1B2E); }
.usel__role { font-size: 11px; color: var(--ss-slate, #5C5870); }

/* ---------- Hours editor (.hrs) ---------- */
.hrs { display: flex; flex-direction: column; gap: var(--space-3, 12px); }
.hrs__mode {
  display: inline-flex; gap: 4px; background: var(--ss-mist, #EEEAE0);
  border-radius: var(--radius-pill, 999px); padding: 3px; align-self: flex-start;
}
.hrs__mode-btn {
  display: inline-flex; align-items: center; gap: 6px; border: none; background: transparent; cursor: pointer;
  font-family: var(--font-sans, sans-serif); font-size: 12px; font-weight: 700; color: var(--ss-slate, #5C5870);
  padding: 7px 14px; border-radius: var(--radius-pill, 999px);
  transition: all var(--duration-fast, 120ms) var(--ease-standard, ease);
}
.hrs__mode-btn i { font-size: 14px; }
.hrs__mode-btn:hover { color: var(--ss-ink, #1F1B2E); }
.hrs__mode-btn.is-on { background: var(--ss-paper, #FFFFFF); color: var(--ss-ink, #1F1B2E); box-shadow: var(--shadow-sm, 0 1px 2px rgba(31,27,46,0.05)); }
.hrs__default {
  padding: var(--space-3, 12px) var(--space-4, 16px); background: var(--ss-cream, #FFF4E1);
  border: 1px solid rgba(255,159,28,0.3); border-radius: var(--radius-md, 12px);
}
.hrs__default-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; color: var(--ss-ink, #1F1B2E); margin-bottom: 10px;
}
.hrs__default-head i { color: var(--ss-sunset, #FF6B1A); font-size: 14px; }
.hrs__default-note { font-weight: 500; color: var(--ss-slate, #5C5870); font-size: 11px; }
.hrs__days {
  display: flex; flex-direction: column;
  border: 1px solid var(--color-border-default, #EEEAE0); border-radius: var(--radius-md, 12px); overflow: hidden;
}
.hrs__day {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 11px 14px; border-bottom: 1px solid var(--color-border-default, #EEEAE0);
}
.hrs__day:last-child { border-bottom: none; }
.hrs__day:nth-child(even) { background: var(--ss-bone, #F7F5F0); }
.hrs__day--custom { background: #FCFBFF !important; }
.hrs__day--closed { opacity: 0.65; }
.hrs__day-name { width: 92px; flex: none; font-size: var(--text-small, 14px); font-weight: 700; color: var(--ss-ink, #1F1B2E); }
.hrs__seg { display: inline-flex; background: var(--ss-mist, #EEEAE0); border-radius: var(--radius-pill, 999px); padding: 2px; gap: 1px; flex: none; }
.hrs__seg-btn {
  border: none; background: transparent; cursor: pointer;
  font-family: var(--font-sans, sans-serif); font-size: 11px; font-weight: 700; color: var(--ss-slate, #5C5870);
  padding: 4px 12px; border-radius: var(--radius-pill, 999px);
  transition: all var(--duration-fast, 120ms) var(--ease-standard, ease);
}
.hrs__seg-btn:hover { color: var(--ss-ink, #1F1B2E); }
.hrs__seg-btn.is-on { background: var(--ss-paper, #FFFFFF); color: var(--ss-ink, #1F1B2E); box-shadow: var(--shadow-sm, 0 1px 2px rgba(31,27,46,0.05)); }
.hrs__muted { font-size: 12px; color: var(--ss-slate, #5C5870); }
.hrs__muted em { font-style: normal; color: var(--color-text-secondary, #5C5870); opacity: 0.8; }
.hrs__day-times { flex-basis: 100%; padding-left: 14px; }
.hrs__times { display: flex; align-items: center; gap: 6px 9px; flex-wrap: wrap; }
.hrs__tlabel { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ss-slate, #5C5870); }
.hrs__time {
  appearance: none; font-family: var(--font-mono, monospace); font-size: 12px; font-weight: 500; color: var(--ss-ink, #1F1B2E);
  background: var(--ss-paper, #FFFFFF); border: 1.5px solid var(--color-border-default, #EEEAE0);
  border-radius: var(--radius-sm, 8px); padding: 6px 24px 6px 9px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' stroke='%235C5870' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 7px center;
}
.hrs__time:focus-visible { outline: none; border-color: var(--color-border-focus, #6B5FCF); box-shadow: var(--shadow-focus, 0 0 0 3px rgba(107,95,207,0.35)); }
.hrs__break { display: inline-flex; align-items: center; gap: 5px; }
.hrs__dash { color: var(--ss-slate, #5C5870); }
.hrs__break-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--ss-slate, #5C5870); cursor: pointer; font-weight: 600; white-space: nowrap;
}
.hrs__break-toggle input { accent-color: var(--ss-iris, #6B5FCF); }

@media (max-width: 880px) {
  .hrs__day { gap: 8px; }
}

/* ---------- Management group chip-list (.mgrp) ---------- */
.mgrp { position: relative; display: flex; flex-direction: column; gap: 8px; }
.mgrp__chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 32px; align-items: center; }
.mgrp__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 6px 5px 11px;
  background: var(--ss-mist, #EEEAE0); color: var(--ss-ink, #1F1B2E);
  border-radius: var(--radius-pill, 999px);
  font-size: 12px; font-weight: 700; line-height: 1.4;
  white-space: nowrap; max-width: 100%;
}
.mgrp__chip-name { overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.mgrp__chip-x {
  width: 20px; height: 20px; border: none; background: transparent;
  color: var(--ss-slate, #5C5870); cursor: pointer; border-radius: 999px;
  display: grid; place-items: center; font-size: 12px; padding: 0;
  transition: background var(--duration-fast, 120ms), color var(--duration-fast, 120ms);
}
.mgrp__chip-x:hover { background: var(--color-state-danger-bg, #FBE5E1); color: var(--color-state-danger, #C8362B); }
.mgrp__empty { font-size: 12px; color: var(--ss-slate, #5C5870); font-style: italic; }
.mgrp__add {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; min-height: 32px;
  background: transparent; color: var(--ss-iris, #6B5FCF);
  border: 1.5px dashed var(--color-border-strong, #D7D2C4);
  border-radius: var(--radius-pill, 999px);
  font-family: var(--font-sans, sans-serif); font-size: 12px; font-weight: 700;
  cursor: pointer; transition: all var(--duration-fast, 120ms);
}
.mgrp__add:hover { border-color: var(--ss-iris, #6B5FCF); background: rgba(107,95,207,0.06); }
.mgrp__add:focus-visible { outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(107,95,207,0.35)); }
.mgrp__add:disabled { opacity: 0.5; cursor: not-allowed; }
.mgrp__menu {
  position: absolute; top: 100%; left: 0; right: 0;
  margin-top: 6px; max-height: 320px; overflow-y: auto;
  z-index: var(--z-dropdown, 100);
  background: var(--ss-paper, #FFFFFF); border: 1px solid var(--color-border-default, #EEEAE0);
  border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-md, 0 12px 32px rgba(31,27,46,0.08));
  animation: escFormIn var(--duration-base, 200ms) var(--ease-emphasized, ease);
}
.mgrp__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 10px 13px; border: none; background: transparent;
  cursor: pointer; text-align: left;
  font-family: var(--font-sans, sans-serif); font-size: var(--text-small, 14px);
  color: var(--ss-ink, #1F1B2E);
  transition: background var(--duration-fast, 120ms);
}
.mgrp__opt:hover { background: var(--ss-cream, #FFF4E1); }
.mgrp__opt-name { font-weight: 700; }
.mgrp__opt-ctx { font-size: 11px; color: var(--ss-slate, #5C5870); font-weight: 500; }
.mgrp__opt-ctx--ingroup { color: var(--ss-iris, #6B5FCF); }
.mgrp__empty-opt { padding: 12px 13px; font-size: 12px; color: var(--ss-slate, #5C5870); font-style: italic; }

/* ============================================================
   escalation-triggers — Section 2.5 (sits above Escalation contacts).
   Categories + severity + example phrases. Pattern: collapsed
   summary rows that expand to an inline iris-bordered editor,
   same idiom as the escalation contact form (.esc-form).
   ============================================================ */

.trg-list { display: flex; flex-direction: column; gap: 10px; margin-top: var(--space-2, 8px); }
.trg-list--compact { gap: 6px; }

.trg-item {
  border: 1px solid var(--color-border-default, #EEEAE0);
  border-radius: var(--radius-md, 12px);
  background: var(--ss-paper, #FFFFFF);
  overflow: hidden;
  transition: box-shadow var(--duration-fast, 120ms), border-color var(--duration-fast, 120ms), opacity var(--duration-fast, 120ms);
}
.trg-item.is-open { border-color: var(--ss-iris, #6B5FCF); box-shadow: var(--shadow-sm, 0 1px 2px rgba(31,27,46,0.05)); }
.trg-item.is-inactive { opacity: 0.6; }
.trg-item.is-inactive.is-open { opacity: 1; }
.trg-item.is-dragging { opacity: 0.4; box-shadow: var(--shadow-md, 0 4px 12px rgba(31,27,46,0.08)); border-color: var(--ss-iris, #6B5FCF); }
.trg-item.is-drop-target { border-color: var(--ss-iris, #6B5FCF); box-shadow: 0 0 0 1px var(--ss-iris, #6B5FCF); }
.trg-item.is-inherited:not(.is-open) { background: #FCFBF8; }

.trg-summary {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto auto;
  align-items: center; gap: var(--space-3, 12px);
  padding: 11px 12px 11px 8px;
  cursor: pointer; width: 100%; text-align: left;
  background: transparent; border: none; font: inherit; color: inherit;
}
.trg-list--compact .trg-summary { padding: 8px 12px 8px 6px; }
.trg-summary:hover { background: var(--ss-bone, #F7F5F0); }
.trg-item.is-open .trg-summary { background: #FCFBFF; }
.trg-summary:focus-visible { outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(107,95,207,0.35)); border-radius: var(--radius-md, 12px); }

.trg-grip { display: flex; flex-direction: column; align-items: center; gap: 1px; color: var(--ss-slate, #5C5870); }
.trg-grip__handle {
  width: 26px; height: 26px; border: none; background: transparent;
  color: var(--ss-slate, #5C5870); cursor: grab;
  display: grid; place-items: center; font-size: 17px;
  border-radius: var(--radius-xs, 4px); opacity: 0.45;
  transition: opacity var(--duration-fast, 120ms), background var(--duration-fast, 120ms), color var(--duration-fast, 120ms);
}
.trg-summary:hover .trg-grip__handle { opacity: 1; }
.trg-grip__handle:hover { background: var(--ss-mist, #EEEAE0); color: var(--ss-ink, #1F1B2E); }
.trg-grip__handle:active { cursor: grabbing; }
.trg-grip__handle:focus-visible { outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(107,95,207,0.35)); opacity: 1; }
.trg-grip__arrows { display: flex; flex-direction: column; }
.trg-arrow {
  width: 20px; height: 15px; border: none; background: transparent; cursor: pointer;
  color: var(--ss-slate, #5C5870); display: grid; place-items: center; font-size: 11px;
  border-radius: 3px; padding: 0; opacity: 0;
  transition: opacity var(--duration-fast, 120ms), color var(--duration-fast, 120ms), background var(--duration-fast, 120ms);
}
.trg-summary:hover .trg-arrow, .trg-arrow:focus-visible { opacity: 1; }
.trg-arrow:hover { color: var(--ss-ink, #1F1B2E); background: var(--ss-mist, #EEEAE0); }
.trg-arrow:disabled { opacity: 0 !important; pointer-events: none; }
.trg-arrow:focus-visible { outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(107,95,207,0.35)); }

.trg-id { min-width: 0; }
.trg-id__name { font-size: var(--text-body, 16px); font-weight: 700; color: var(--ss-ink, #1F1B2E); line-height: 1.3; }
.trg-id__meta { display: flex; align-items: center; gap: 7px; margin-top: 3px; flex-wrap: wrap; }
.trg-id__count { font-size: 12px; color: var(--ss-slate, #5C5870); }
.trg-id__sample { font-size: 12px; color: var(--ss-slate, #5C5870); font-style: italic; min-width: 0; max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trg-id__dot { width: 3px; height: 3px; border-radius: 999px; background: var(--color-border-strong, #D7D2C4); flex: none; }
.trg-id__rings { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ss-sunset, #FF6B1A); font-weight: 700; }
.trg-id__rings i { font-size: 12px; }

.trg-summary__status { display: flex; align-items: center; }
.trg-chevron {
  width: 30px; height: 30px; border-radius: var(--radius-sm, 8px);
  display: grid; place-items: center;
  color: var(--ss-slate, #5C5870); font-size: 16px; flex: none;
  transition: transform var(--duration-base, 200ms) var(--ease-emphasized, ease), color var(--duration-fast, 120ms);
}
.trg-summary:hover .trg-chevron { color: var(--ss-ink, #1F1B2E); }
.trg-item.is-open .trg-chevron { transform: rotate(180deg); color: var(--ss-iris, #6B5FCF); }

/* Severity badge (collapsed row) — icon + label + color. */
.sev-badge {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 5px 11px 5px 9px; border-radius: var(--radius-pill, 999px);
  font-size: 12px; font-weight: 700; line-height: 1.3; white-space: nowrap;
  border: 1.5px solid transparent;
}
.sev-badge i { font-size: 14px; }
.sev-badge--lg { font-size: var(--text-small, 14px); padding: 6px 13px 6px 11px; }
.sev-badge--lg i { font-size: 16px; }
.sev--ring    { background: #FFE2D0; color: #C2410C; }
.sev--message { background: var(--color-state-info-bg, #ECE9FA); color: #5446B8; }
.sev--note    { background: var(--ss-mist, #EEEAE0); color: var(--ss-slate, #5C5870); }
.trg-item.is-inactive:not(.is-open) .sev-badge {
  background: var(--ss-mist, #EEEAE0); color: var(--ss-slate, #5C5870); border-color: transparent;
}

/* Expanded detail editor — iris-accented, like .esc-form. */
.trg-detail {
  border-top: 1px solid var(--color-border-default, #EEEAE0);
  background: #FCFBFF;
  padding: var(--space-5, 24px);
  display: flex; flex-direction: column; gap: var(--space-5, 24px);
}
@media (prefers-reduced-motion: no-preference) {
  .trg-detail { animation: trgDetailIn var(--duration-base, 200ms) var(--ease-emphasized, ease); }
}
@keyframes trgDetailIn { from { transform: translateY(-5px); } to { transform: none; } }

.trg-block { display: flex; flex-direction: column; gap: 10px; }
.trg-block__label { font-size: var(--text-small, 14px); font-weight: 700; color: var(--ss-ink, #1F1B2E); display: flex; align-items: center; gap: 7px; }
.trg-block__label .opt { font-family: var(--font-mono, monospace); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ss-slate, #5C5870); }
.trg-block__hint { font-size: 12px; color: var(--ss-slate, #5C5870); line-height: 1.45; }

/* Severity selector — three stacked option cards. */
.sev-pick { display: flex; flex-direction: column; gap: 8px; }
.sev-opt {
  display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 12px;
  padding: 12px 14px; text-align: left; cursor: pointer;
  background: var(--ss-paper, #FFFFFF); border: 1.5px solid var(--color-border-default, #EEEAE0);
  border-radius: var(--radius-md, 12px); width: 100%;
  transition: border-color var(--duration-fast, 120ms), background var(--duration-fast, 120ms), box-shadow var(--duration-fast, 120ms);
}
.sev-opt:hover { border-color: var(--color-border-strong, #D7D2C4); }
.sev-opt:focus-visible { outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(107,95,207,0.35)); }
.sev-opt__radio {
  width: 20px; height: 20px; border-radius: 999px;
  border: 1.5px solid var(--color-border-strong, #D7D2C4);
  display: grid; place-items: center; flex: none;
  transition: all var(--duration-fast, 120ms);
}
.sev-opt__radio::after { content: ""; width: 10px; height: 10px; border-radius: 999px; background: transparent; transition: background var(--duration-fast, 120ms); }
.sev-opt__ic { width: 34px; height: 34px; border-radius: var(--radius-sm, 8px); display: grid; place-items: center; font-size: 18px; flex: none; }
.sev-opt__ic.sev--ring    { background: #FFE2D0; color: #C2410C; }
.sev-opt__ic.sev--message { background: var(--color-state-info-bg, #ECE9FA); color: #5446B8; }
.sev-opt__ic.sev--note    { background: var(--ss-mist, #EEEAE0); color: var(--ss-slate, #5C5870); }
.sev-opt__text { min-width: 0; display: flex; flex-direction: column; }
.sev-opt__title { font-size: var(--text-small, 14px); font-weight: 700; color: var(--ss-ink, #1F1B2E); }
.sev-opt__action { font-size: 12px; color: var(--ss-slate, #5C5870); line-height: 1.45; margin-top: 1px; }
.sev-opt__rings { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--ss-ink, #1F1B2E); }
.sev-opt__rings i { color: var(--ss-sunset, #FF6B1A); font-size: 14px; }
.sev-opt__rings a { color: var(--ss-iris, #6B5FCF); font-weight: 700; text-decoration: none; cursor: pointer; }
.sev-opt__rings a:hover { text-decoration: underline; }
.sev-opt.is-sel.sev-opt--ring    { border-color: #E8703C; background: #FFF6F0; }
.sev-opt.is-sel.sev-opt--message { border-color: var(--ss-iris, #6B5FCF); background: #F6F4FE; }
.sev-opt.is-sel.sev-opt--note    { border-color: var(--color-border-strong, #D7D2C4); background: var(--ss-bone, #F7F5F0); }
.sev-opt.is-sel.sev-opt--ring    .sev-opt__radio { border-color: #C2410C; }
.sev-opt.is-sel.sev-opt--ring    .sev-opt__radio::after { background: #C2410C; }
.sev-opt.is-sel.sev-opt--message .sev-opt__radio { border-color: var(--ss-iris, #6B5FCF); }
.sev-opt.is-sel.sev-opt--message .sev-opt__radio::after { background: var(--ss-iris, #6B5FCF); }
.sev-opt.is-sel.sev-opt--note    .sev-opt__radio { border-color: var(--ss-slate, #5C5870); }
.sev-opt.is-sel.sev-opt--note    .sev-opt__radio::after { background: var(--ss-slate, #5C5870); }

/* Example phrases — chips + add input. */
.trg-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.trg-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 7px 6px 11px; border-radius: var(--radius-pill, 999px);
  background: var(--ss-cream, #FFF4E1); border: 1px solid #F0E4CC;
  font-size: 13px; color: var(--ss-ink, #1F1B2E); line-height: 1.3; max-width: 100%;
}
.trg-chip__txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trg-chip__x {
  width: 18px; height: 18px; border-radius: 999px; border: none; flex: none;
  background: rgba(31,27,46,0.06); color: var(--ss-slate, #5C5870); cursor: pointer;
  display: grid; place-items: center; font-size: 11px;
  transition: all var(--duration-fast, 120ms);
}
.trg-chip__x:hover { background: var(--color-state-danger-bg, #FBE5E1); color: var(--color-state-danger, #C8362B); }
.trg-chip__x:focus-visible { outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(107,95,207,0.35)); }
.trg-chip-input {
  flex: 1; min-width: 160px;
  font-family: var(--font-sans, sans-serif); font-size: 13px; color: var(--ss-ink, #1F1B2E);
  background: var(--ss-paper, #FFFFFF); border: 1.5px dashed var(--color-border-strong, #D7D2C4);
  border-radius: var(--radius-pill, 999px); padding: 6px 13px; min-height: 32px;
  transition: border-color var(--duration-fast, 120ms), box-shadow var(--duration-fast, 120ms);
}
.trg-chip-input::placeholder { color: var(--ss-slate, #5C5870); opacity: 0.7; }
.trg-chip-input:focus-visible { outline: none; border-style: solid; border-color: var(--color-border-focus, #6B5FCF); box-shadow: var(--shadow-focus, 0 0 0 3px rgba(107,95,207,0.35)); }

.trg-toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4, 16px);
  padding: 11px 13px; background: var(--ss-paper, #FFFFFF);
  border: 1px solid var(--color-border-default, #EEEAE0); border-radius: var(--radius-sm, 8px);
}
.trg-toggle-row .lbl { font-size: var(--text-small, 14px); font-weight: 700; color: var(--ss-ink, #1F1B2E); }
.trg-toggle-row .sub { font-size: 12px; color: var(--ss-slate, #5C5870); margin-top: 1px; }

.trg-detail__foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: var(--space-4, 16px); border-top: 1px solid var(--color-border-default, #EEEAE0); }
.trg-inherit { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.trg-detail__foot .spacer { flex: 1; }
.trg-inherit__link { border: none; background: transparent; padding: 0; cursor: pointer; font-family: var(--font-sans, sans-serif); font-size: 12px; font-weight: 700; color: var(--ss-iris, #6B5FCF); transition: color var(--duration-fast, 120ms); }
.trg-inherit__link:hover { color: var(--ss-ink, #1F1B2E); text-decoration: underline; }
.trg-inherit__link--muted { color: var(--ss-slate, #5C5870); }
.trg-summary .scope-pill { padding: 3px 8px; }

.trg-name-input {
  font-family: var(--font-sans, sans-serif); font-size: var(--text-body, 16px); font-weight: 700; line-height: 1.3;
  color: var(--ss-ink, #1F1B2E); background: var(--ss-paper, #FFFFFF);
  border: 1.5px solid var(--color-border-default, #EEEAE0); border-radius: var(--radius-sm, 8px);
  padding: 11px 13px; min-height: 44px; width: 100%;
  transition: border-color var(--duration-fast, 120ms), box-shadow var(--duration-fast, 120ms);
}
.trg-name-input:hover { border-color: var(--color-border-strong, #D7D2C4); }
.trg-name-input:focus-visible { outline: none; border-color: var(--color-border-focus, #6B5FCF); box-shadow: var(--shadow-focus, 0 0 0 3px rgba(107,95,207,0.35)); }

.trg-add {
  margin-top: 12px; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px; min-height: 48px;
  background: transparent; color: var(--ss-slate, #5C5870);
  border: 1.5px dashed var(--color-border-strong, #D7D2C4); border-radius: var(--radius-md, 12px);
  font-family: var(--font-sans, sans-serif); font-size: var(--text-small, 14px); font-weight: 700;
  cursor: pointer; transition: all var(--duration-fast, 120ms);
}
.trg-add:hover { border-color: var(--ss-sunset, #FF6B1A); color: var(--ss-sunset, #FF6B1A); background: #FFF8F3; }
.trg-add:focus-visible { outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(107,95,207,0.35)); }
.trg-add i { font-size: 17px; }

.trg-alloff {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px var(--space-4, 16px); margin-bottom: var(--space-4, 16px);
  background: var(--color-state-info-bg, #ECE9FA); border-radius: var(--radius-md, 12px);
}
.trg-alloff__ic { width: 32px; height: 32px; border-radius: 999px; background: rgba(107,95,207,0.16); color: var(--ss-iris, #6B5FCF); display: grid; place-items: center; font-size: 16px; flex: none; }
.trg-alloff__txt { min-width: 0; }
.trg-alloff__title { font-size: var(--text-small, 14px); font-weight: 700; color: var(--ss-ink, #1F1B2E); }
.trg-alloff__sub { font-size: 12px; color: var(--ss-slate, #5C5870); line-height: 1.5; margin-top: 1px; }

.trg-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 6px; padding: var(--space-7, 48px) var(--space-5, 24px);
  border: 1.5px dashed var(--color-border-strong, #D7D2C4); border-radius: var(--radius-lg, 16px);
  background: var(--ss-cream, #FFF4E1);
}
.trg-empty__ic { width: 52px; height: 52px; border-radius: 999px; background: var(--ss-paper, #FFFFFF); color: var(--ss-sunset, #FF6B1A); display: grid; place-items: center; font-size: 24px; margin-bottom: 6px; box-shadow: var(--shadow-sm, 0 1px 2px rgba(31,27,46,0.05)); }
.trg-empty__title { font-size: var(--text-body-lg, 18px); font-weight: 700; color: var(--ss-ink, #1F1B2E); }
.trg-empty__sub { font-size: var(--text-small, 14px); color: var(--ss-slate, #5C5870); max-width: 380px; line-height: 1.55; margin-bottom: var(--space-3, 12px); }
.trg-empty__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ============================================================
   Final Fallback — terminal tier (call center / answering service)
   ============================================================ */
.fb-wrap { display: flex; flex-direction: column; gap: var(--space-4, 16px); padding-top: var(--space-2, 8px); }

/* Waterfall flow indicator: Vivi → managers → fallback */
.wf {
  display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap;
  padding: 12px 14px; background: var(--ss-bone, #F7F5F0);
  border: 1px solid var(--color-border-default, #EEEAE0); border-radius: var(--radius-md, 12px);
}
.wf__step { display: flex; align-items: center; gap: 9px; padding: 6px 12px 6px 8px; border-radius: var(--radius-pill, 999px); background: var(--ss-paper, #FFFFFF); border: 1px solid var(--color-border-default, #EEEAE0); }
.wf__ic { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; font-size: 15px; flex: none; background: var(--ss-mist, #EEEAE0); color: var(--ss-slate, #5C5870); }
.wf__txt { display: flex; flex-direction: column; line-height: 1.15; }
.wf__title { font-size: var(--text-small, 14px); font-weight: 700; color: var(--ss-ink, #1F1B2E); }
.wf__sub { font-size: 11px; color: var(--ss-slate, #5C5870); }
.wf__arrow { align-self: center; color: var(--color-border-strong, #D7D2C4); font-size: 14px; }
.wf__step--done .wf__ic { background: var(--color-state-success-bg, #E3F2E9); color: var(--color-state-success, #2E8757); }
.wf__step--here { border-color: var(--ss-sunset, #FF6B1A); background: #FFF6F0; }
.wf__step--here .wf__ic { background: #FFE2D0; color: #C2410C; }

.fb-emptynote { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--ss-slate, #5C5870); line-height: 1.5; padding: 0 2px; }
.fb-emptynote i { color: var(--ss-iris, #6B5FCF); font-size: 15px; margin-top: 1px; flex: none; }

/* "Have Vivi answer this line" — per-line self-serve switch in the Final Fallback card */
.vivi-line { display: flex; align-items: flex-start; gap: 14px; padding: 13px 14px; background: var(--ss-paper, #FFFFFF); border: 1px solid var(--color-border-default, #EEEAE0); border-radius: var(--radius-md, 12px); }
.vivi-line__body { flex: 1 1 auto; min-width: 0; }
.vivi-line__title { font-size: var(--text-small, 14px); font-weight: 700; color: var(--ss-ink, #1F1B2E); display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.vivi-line__state { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 999px; }
.vivi-line__state--on { background: var(--color-state-success-bg, #E3F2E9); color: var(--color-state-success, #2E8757); }
.vivi-line__state--off { background: var(--ss-mist, #EEEAE0); color: var(--ss-slate, #5C5870); }
.vivi-line__desc { font-size: 12px; color: var(--ss-slate, #5C5870); line-height: 1.5; margin-top: 5px; }
.vivi-sw { flex: none; align-self: center; line-height: 0; }
.vivi-sw input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.vivi-sw__track { display: inline-block; width: 44px; height: 24px; border-radius: 999px; background: var(--color-border-strong, #D7D2C4); position: relative; cursor: pointer; transition: background .15s ease; }
.vivi-sw__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .15s ease; }
.vivi-sw input:checked + .vivi-sw__track { background: var(--color-state-success, #2E8757); }
.vivi-sw input:checked + .vivi-sw__track::after { transform: translateX(20px); }
.vivi-sw input:disabled + .vivi-sw__track { opacity: .45; cursor: not-allowed; }
.vivi-sw input:focus-visible + .vivi-sw__track { outline: 2px solid var(--ss-iris, #6B5FCF); outline-offset: 2px; }
/* Answer-mode chooser (shown only when Vivi is on the line) */
.vivi-mode { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: var(--ss-paper, #FFFFFF); border: 1px solid var(--color-border-default, #EEEAE0); border-radius: var(--radius-md, 12px); }
.vivi-mode__title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ss-slate, #5C5870); }
.vivi-mode__opt { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border: 1px solid var(--color-border-default, #EEEAE0); border-radius: var(--radius-sm, 9px); cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.vivi-mode__opt.is-on { border-color: var(--color-state-success, #2E8757); background: var(--color-state-success-bg, #E3F2E9); }
.vivi-mode__opt input { flex: none; margin-top: 2px; accent-color: var(--color-state-success, #2E8757); }
.vivi-mode__opt input:disabled { cursor: not-allowed; }
.vivi-mode__label { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-small, 14px); color: var(--ss-ink, #1F1B2E); line-height: 1.4; }
.vivi-mode__desc { font-size: 12px; font-weight: 400; color: var(--ss-slate, #5C5870); line-height: 1.45; }
/* Vivi waterfall step when the line is OFF — neutral/dimmed, no green */
.wf__step--off { opacity: .65; }
.wf__step--off .wf__ic { background: var(--ss-mist, #EEEAE0); color: var(--ss-slate, #5C5870); }

/* ============================================================
   OWNER CONSOLE — Phase 1 reframe (money-first cockpit)
   Ported from the owner-console redesign mock (oc-styles.css),
   Phase-1 surfaces only. Consumes tokens.css. Page chrome
   (nav + Comms rail) is provided by header.js, NOT here.
   Shared .page* overrides are scoped under `.oc` so other
   surfaces are untouched. LienEngine/Vision are out of scope.
   ============================================================ */

/* ----- Page head (scoped: this surface only) ----- */
.oc.page { padding: var(--space-6) var(--space-7) var(--space-8); max-width: 1380px; }
.oc .page__title { font-size: var(--text-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); margin: 8px 0 0; }
.oc .page__meta { flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; white-space: nowrap; }

.page__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: var(--text-caption);
  text-transform: uppercase; letter-spacing: 0.10em; font-weight: 700; color: var(--ss-sunset);
}
.page__eyebrow .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--ss-sunset); }
.page__sub { color: var(--color-text-secondary); font-size: var(--text-body-lg); margin-top: 6px; max-width: 56ch; }
.page__stamp { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-text-secondary); }
/* Freshness honesty: calm, NON-pulsing dot; reads as last read, never "live". */
.page__live { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-caption); font-weight: 700; color: var(--color-state-success); }
.page__live .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--color-state-success); }

/* ----- HERO: money first (prominent) ----- */
.heroband { margin-bottom: var(--space-5); }
.heroband__cap { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; }
.heroband__cap h2 { font-size: var(--text-eyebrow); font-weight: 700; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ss-ink); white-space: nowrap; }
.heroband__cap span { font-size: var(--text-small); color: var(--color-text-secondary); white-space: nowrap; }

.hero { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.herotile {
  background: var(--ss-paper); border: 1.5px solid var(--color-border-default);
  border-radius: var(--radius-xl); padding: var(--space-5);
  box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--space-2); min-height: 178px;
}
.herotile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ss-mist); }
.herotile--occ::before { background: var(--ss-iris); }
.herotile--rev::before { background: var(--color-state-success); }
.herotile--due::before { background: var(--ss-sun); }
.herotile--net::before { background: var(--color-state-success); }
.herotile--net.is-down::before { background: var(--color-state-danger); }

.herotile__label {
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: var(--text-eyebrow); font-weight: 700; letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--color-text-secondary);
}
.herotile__label i { font-size: 15px; }
.herotile--net .herotile__label i { color: var(--color-state-success); }
.herotile--net.is-down .herotile__label i { color: var(--color-state-danger); }
.herotile__value { font-size: 52px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--ss-ink); font-variant-numeric: tabular-nums; }
.herotile__value .unit { font-size: 26px; color: var(--color-text-secondary); letter-spacing: 0; margin-left: 2px; }
.herotile__value--mid { font-size: 42px; }
.herotile--net .herotile__value { color: var(--color-state-success); }
.herotile--net.is-down .herotile__value { color: var(--color-state-danger); }
.netval { display: inline-flex; align-items: center; gap: 4px; }
.netval i { font-size: 30px; }
.herotile__meter { height: 6px; border-radius: 999px; background: var(--ss-mist); overflow: hidden; margin-top: 2px; }
.herotile__meter > span { display: block; height: 100%; border-radius: 999px; background: var(--ss-iris); }
.herotile__sub { font-size: var(--text-small); color: var(--color-text-secondary); margin-top: auto; }
.herotile__sub strong { color: var(--ss-ink); font-family: var(--font-mono); }
.herotile__note { display: block; margin-top: 4px; font-size: var(--text-caption); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
/* Live-patched hero occupancy: "· live" indicator + report trio (SQ FT · Econ) */
.herotile__live { font-size: var(--text-caption); color: var(--ss-iris); font-weight: 700; text-transform: none; letter-spacing: 0; display: inline-flex; align-items: center; gap: 3px; }
.herotile__live i { font-size: 10px; }
/* occupancy tile: live-first loading state (no overnight→live flip) */
.herotile__live--pending { color: var(--color-text-secondary); }
.herotile__note--mirror { font-size: var(--text-caption); color: var(--color-text-secondary); font-weight: 600; text-transform: none; letter-spacing: 0; }
.oc-spin { display: inline-block; animation: oc-spin 0.8s linear infinite; }
@keyframes oc-spin { to { transform: rotate(360deg); } }
.oc-skel { display: inline-block; border-radius: 7px; background: linear-gradient(100deg, var(--ss-mist, #ECE7DF) 30%, rgba(255,255,255,0.65) 50%, var(--ss-mist, #ECE7DF) 70%); background-size: 200% 100%; animation: oc-shimmer 1.3s ease-in-out infinite; }
.oc-skel--val { width: 116px; height: 34px; vertical-align: -6px; }
@keyframes oc-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.oc-sronly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .oc-spin, .oc-skel { animation: none; } }
.herotile__trio { display: flex; gap: var(--space-4); margin-top: 6px; font-size: var(--text-caption); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.herotile__trio strong { color: var(--ss-ink); font-weight: 700; }
.herotile__delta { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-family: var(--font-mono); }
.herotile__delta--up { color: var(--color-state-success); }
.herotile__delta--down { color: var(--color-state-danger); }

/* Net move-ins flow bar (in vs out) — distinct momentum motif */
.flowbar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--ss-mist); margin-top: auto; }
.flowbar__in { background: var(--color-state-success); }
.flowbar__out { background: var(--ss-lavender); }
.herotile--net.is-down .flowbar__in { background: var(--color-state-danger); }
.herotile--net .herotile__sub { margin-top: 8px; }
.flowlegend { display: flex; align-items: center; gap: var(--space-3); }
.flowlegend i { font-size: 12px; }
.flowlegend__in { color: var(--color-state-success); font-weight: 700; display: inline-flex; align-items: center; gap: 3px; }
.herotile--net.is-down .flowlegend__in { color: var(--color-state-danger); }
.flowlegend__out { color: var(--ss-slate); font-weight: 700; display: inline-flex; align-items: center; gap: 3px; }
.flowlegend__t { color: var(--color-text-secondary); margin-left: auto; font-size: var(--text-caption); }

/* ----- AUTOMATION: demoted second row (smaller, muted) ----- */
.autoband { margin-bottom: var(--space-6); }
.autoband__cap { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.autoband__cap i { color: var(--ss-iris); font-size: 15px; }
.autoband__cap h2 { font-size: var(--text-eyebrow); font-weight: 700; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--color-text-secondary); }
.autoband__cap .by { font-size: var(--text-caption); color: var(--color-text-secondary); }
.autoband__cap .by strong { color: var(--ss-iris); }
.auto { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.autotile {
  background: var(--ss-bone); border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg); padding: var(--space-4);
  display: flex; flex-direction: column; gap: 4px;
}
.autotile__label { font-size: var(--text-caption); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-secondary); }
.autotile__value { font-size: 24px; font-weight: 700; line-height: 1.1; color: var(--ss-slate); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.autotile__sub { font-size: var(--text-caption); color: var(--color-text-secondary); margin-top: 2px; }
.autotile--pilot { border-style: dashed; border-color: var(--color-border-strong); background: repeating-linear-gradient(135deg, var(--ss-bone) 0 10px, #F2EFE7 10px 20px); }
.autotile--pilot .autotile__value { color: var(--ss-iris); font-size: 20px; }
.autotile__chip {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--radius-pill);
  background: var(--color-state-info-bg); color: var(--ss-iris); margin-top: 2px;
}
.autotile__chip i { font-size: 11px; }

/* ----- "Live now · from PMS" band (real-time HB tiles, between hero + automation) ----- */
.liveband { margin-bottom: var(--space-6); }
.liveband__cap { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap: wrap; }
.liveband__cap i { color: var(--ss-iris); font-size: 15px; }
.liveband__cap h2 { font-size: var(--text-eyebrow); font-weight: 700; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--color-text-secondary); margin: 0; }
.liveband__stamp { font-size: var(--text-caption); color: var(--color-text-secondary); white-space: nowrap; }
.live { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3); }
.livetile {
  position: relative;
  padding: var(--space-3) var(--space-4);
  background: var(--ss-paper);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
}
.livetile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ss-iris); border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.livetile__label { font-size: var(--text-caption); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-secondary); display: inline-flex; align-items: center; gap: 6px; }
.livetile__label i { font-size: 13px; }
.livetile__value { font-size: 28px; font-weight: 700; line-height: 1.1; color: var(--ss-slate); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; margin-top: 4px; }
.livetile__sub { font-size: var(--text-caption); color: var(--color-text-secondary); margin-top: 2px; }
.livetile--pending .livetile__value { font-size: 18px; font-weight: 400; color: var(--color-text-secondary); }
.livetile__value .unit { font-size: 16px; color: var(--color-text-secondary); letter-spacing: 0; margin-left: 2px; }
.livetile__warn { color: var(--color-state-warning, #cc8800); font-weight: 600; }
.livetile--occ::before { background: var(--ss-iris); }
.livetile--res::before { background: var(--ss-iris); }
/* Report trio: SQ FT % · Economic Occupancy % under the big Spaces % */
.livetile__trio { display: flex; gap: var(--space-4); margin-top: 6px; font-size: var(--text-caption); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.livetile__trio strong { color: var(--ss-slate); font-weight: 700; }
.herotile__note--warn { color: var(--color-state-warning, #cc8800); }

/* ----- "By facility" section rule ----- */
.section-rule { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-6) 0 var(--space-4); }
.section-rule h3 { font-size: var(--text-eyebrow); font-weight: 700; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--color-text-secondary); white-space: nowrap; }
.section-rule::after { content: ""; flex: 1; height: 1px; background: var(--color-border-default); }

/* ----- OWNER-GRADE facility table (sortable) ----- */
.tablecard { background: var(--ss-paper); border: 1px solid var(--color-border-default); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); overflow: hidden; }
.tablecard__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border-default); }
.tablecard__title { display: flex; align-items: baseline; gap: 10px; }
.tablecard__title h3 { font-size: var(--text-h3); letter-spacing: var(--ls-h3); }
.tablecard__title span { font-size: var(--text-small); color: var(--color-text-secondary); }
.tablecard__hint { font-size: var(--text-caption); color: var(--color-text-secondary); display: inline-flex; align-items: center; gap: 6px; }
.tablecard__hint i { font-size: 13px; }

.otable { width: 100%; border-collapse: collapse; table-layout: fixed; }
.otable col.c-fac { width: 202px; }
.otable col.c-occ { width: 128px; }
.otable col.c-due { width: 116px; }
.otable col.c-vac { width: 88px; }
.otable col.c-rev { width: 138px; }
.otable col.c-net { width: 122px; }
.otable thead th {
  position: sticky; top: 44px; z-index: 1; background: var(--color-surface-muted);
  padding: 0; text-align: left; border-bottom: 1px solid var(--color-border-strong); white-space: nowrap;
}
.otable thead th .sorth {
  width: 100%; background: none; border: none; cursor: pointer;
  font-family: var(--font-sans); font-size: var(--text-caption); font-weight: 700;
  color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.07em;
  padding: 11px 16px; display: inline-flex; align-items: center; gap: 5px;
  transition: color var(--duration-fast) var(--ease-standard);
}
.otable thead th.num .sorth { width: 100%; justify-content: flex-end; }
.otable thead th .sorth:hover { color: var(--ss-ink); }
.otable thead th.is-sorted .sorth { color: var(--ss-ink); }
.sortcaret { display: inline-flex; flex-direction: column; line-height: 0; font-size: 8px; color: var(--color-border-strong); }
.sortcaret i { display: block; }
.otable thead th.is-sorted.asc .sortcaret .up { color: var(--ss-sunset); }
.otable thead th.is-sorted.desc .sortcaret .down { color: var(--ss-sunset); }

.otable tbody td { padding: 12px 16px; font-size: var(--text-small); border-bottom: 1px solid var(--color-border-default); vertical-align: middle; font-variant-numeric: tabular-nums; }
.otable tbody td.num { text-align: right; font-family: var(--font-mono); }
.otable tbody tr:last-child td { border-bottom: none; }
.otable tbody tr:hover { background: var(--ss-cream); }
.otable tbody tr.is-attention { background: #FFFBF4; }
.otable tbody tr.is-attention:hover { background: #FFF6E8; }
.otable td:first-child { padding-left: 20px; }
.otable th:first-child .sorth { padding-left: 20px; }

.fcell { display: flex; align-items: flex-start; gap: 9px; }
.fcell__body { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; min-width: 0; }
.fcell__dot { width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; background: transparent; margin-top: 5px; }
.fcell.is-attention .fcell__dot { background: var(--ss-sunset); box-shadow: 0 0 0 3px rgba(255,107,26,0.18); }
.fcell__name { font-weight: 700; color: var(--ss-ink); white-space: nowrap; }
.fcell__pilot { font-size: 9px; font-family: var(--font-mono); white-space: nowrap; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ss-iris); background: var(--color-state-info-bg); padding: 1px 6px; border-radius: var(--radius-pill); }
.floc { color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attn-label { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; flex-basis: 100%; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ss-sunset); margin-top: 1px; }

.occ-wrap { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.occ-pct { font-weight: 700; color: var(--ss-ink); }
.occ-pct.is-low { color: var(--ss-sunset); }
.occ-bar { width: 64px; height: 4px; border-radius: 999px; background: var(--ss-mist); overflow: hidden; }
.occ-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--ss-iris); }
.occ-bar.is-low > span { background: var(--ss-sunset); }
.due-amt.is-high { color: var(--color-state-danger); font-weight: 700; }
.net { font-weight: 700; }
.net--up { color: var(--color-state-success); }
.net--down { color: var(--color-state-danger); }
.net--flat { color: var(--color-text-secondary); }
.tfoot td { background: var(--ss-bone); font-weight: 700; color: var(--ss-ink); border-top: 1.5px solid var(--color-border-strong); font-size: var(--text-small); }
.tfoot td.num { font-family: var(--font-mono); text-align: right; }
.tfoot .tfoot__label { text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--text-caption); color: var(--color-text-secondary); }

/* Owner Console states: pending / error / refresh control */
.oc-pending { color: var(--color-text-secondary); font-style: italic; }
.oc-refresh { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--color-border-default); border-radius: var(--radius-pill); padding: 5px 12px; font-family: var(--font-sans); font-weight: 700; font-size: var(--text-caption); color: var(--color-text-secondary); cursor: pointer; }
.oc-refresh:hover { color: var(--ss-ink); background: var(--ss-cream); }
.oc-error { background: var(--color-state-danger-bg); border: 1px solid var(--color-state-danger); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); color: var(--color-state-danger); font-size: var(--text-small); }

@media (max-width: 1100px) {
  .hero, .auto { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================================
   Phone chrome (design-handoff mobile pass, 2026-07): the 15-link nav collapses
   into a burger + dropdown drawer under 768px; the email drops (the avatar chip
   carries identity). Desktop is byte-identical — the burger is display:none and
   every rule below lives inside the media query. The COMMS-rail + platform-bar
   phone rules live in js/header.js's injected style blocks (they must, to win
   the cascade over this earlier stylesheet).
   ========================================================================== */
.app-nav__burger { display: none; background: none; border: 0; padding: 0; color: var(--ss-ink, #1f1b2e); cursor: pointer; border-radius: var(--radius-sm, 8px); }
.app-nav__burger i { font-size: 24px; display: block; }
@media (max-width: 768px) {
  .app-nav { position: relative; gap: 10px; padding: 8px 14px; }
  .app-nav__divider { display: none; }
  .app-nav__burger { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  .app-nav__links { display: none; }
  body.nav-open .app-nav__links {
    display: flex; flex-direction: column; gap: 2px;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--ss-paper, #fff);
    border-bottom: 1px solid var(--color-border-default, #eeeae0);
    box-shadow: 0 14px 28px rgba(31, 27, 46, 0.14);
    padding: 8px 10px 12px;
    max-height: calc(100vh - 140px); overflow-y: auto;
    z-index: 70;
  }
  body.nav-open .app-nav__links .app-nav__link { min-height: 44px; border-radius: var(--radius-md, 12px); }
  .app-nav__email { display: none; } /* the avatar chip carries identity on a phone */
}