/* ============================================================================
   Warm Quiet Power — the instrument's design tokens.
   Dark-first: an Aston Martin cockpit at night, warm not icy. The company's
   brand color becomes a glowing jewel light source (applyBrand() emits the glow
   ramp at runtime). Every legacy variable name is kept/aliased so no render
   function breaks; new tokens layer the depth, glow, and warmth on top.
   ============================================================================ */
:root {
  color-scheme: dark;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Brand jewel ramp. Overwritten at runtime by applyBrand() from brand_color. */
  --brand: #37dca0;
  --brand-strong: #1f9e75;
  --brand-soft: rgba(55, 220, 160, 0.14);
  --brand-ink: #0d0a07;
  --brand-glow: rgba(55, 220, 160, 0.55);
  --brand-glow-far: rgba(55, 220, 160, 0.20);
  --brand-line: rgba(55, 220, 160, 0.42);
  --brand-lift: #6fe8bf;
  --brand-deep: #11543f;

  /* Warm-dark cockpit substrate — an elevation ladder of machined surfaces. */
  --bg-abyss: #0c0906;
  --bg-base: #120e09;
  --surface-1: #1a140d;
  --surface-2: #221b12;
  --surface-3: #2c2418;
  --hairline: #3a2f1e;
  --hairline-lit: rgba(255, 214, 150, 0.10);

  /* Ambient warmth tier, independent of brand, so warm survives a cool brand. */
  --gold: #e0b25e;
  --gold-soft: rgba(224, 178, 94, 0.14);
  --ember: #c8762e;

  /* Legacy aliases — kept alive so every existing render function still styles. */
  --ink: #f3ecdf;
  --muted: #b6a991;
  --line: var(--hairline);
  --paper: var(--bg-base);
  --white: #1f1810;
  --surface: var(--surface-1);
  --surface-soft: var(--surface-2);
  --surface-warm: var(--surface-3);
  --grid-line: transparent;
  --frame-line: transparent;
  --readout-bg: rgba(26, 20, 13, 0.92);
  --signal-bg: #110d08;
  --signal-line: rgba(243, 236, 223, 0.05);
  --signal-sweep: var(--brand-glow);
  --mint: var(--brand);
  --cyan: var(--brand);
  --blue: var(--brand);
  --amber: var(--gold);
  --red: #f0837a;
  --graphite: #f3ecdf;
  --panel: var(--surface-1);
  --rail: #0e0b07;

  /* Elevation: an inset top-light bevel paired with a cast shadow + brand glow. */
  --elev-1: inset 0 1px 0 var(--hairline-lit), 0 2px 8px rgba(0, 0, 0, 0.45);
  --elev-2: inset 0 1px 0 var(--hairline-lit), 0 10px 30px rgba(0, 0, 0, 0.55);
  --elev-3: inset 0 1px 0 var(--hairline-lit), 0 26px 70px rgba(0, 0, 0, 0.66);
  --glow-brand: 0 0 0 1px var(--brand-line), 0 0 26px -6px var(--brand-glow), 0 0 64px -20px var(--brand-glow);
  --glow-brand-strong: 0 0 0 1px var(--brand-line), 0 0 44px -4px var(--brand-glow), 0 0 120px -12px var(--brand-glow-far);
  --shadow: var(--elev-2);

  --radius: 16px;
  --radius-sm: 11px;

  /* Motion grammar, traced to the products that feel legendary. Ease-out for
     entrances, faster exits, never over 300ms on routine interactions. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-micro: 120ms;
  --dur-in: 240ms;
  --dur-out: 180ms;

  /* Daypart warmth: the room warms toward evening (set by setDaypart()). */
  --daywarm: 0;
}

/* Light theme — a complete, equally finished warm-cream parallel. The rail and
   the jewel glow carry the cockpit feeling through into daylight. */
:root[data-theme="light"] {
  color-scheme: light;
  --brand-ink: #ffffff;
  --bg-abyss: #efe7d8;
  --bg-base: #f6f1e7;
  --surface-1: #fffdf8;
  --surface-2: #f3ecdf;
  --surface-3: #efe6d5;
  --hairline: #e4dac8;
  --hairline-lit: rgba(120, 90, 40, 0.06);
  --gold: #9c6a12;
  --gold-soft: rgba(156, 106, 18, 0.12);
  --ember: #b4532a;
  --ink: #211c15;
  --muted: #7c7163;
  --line: var(--hairline);
  --paper: var(--bg-base);
  --white: #ffffff;
  --surface: var(--surface-1);
  --surface-soft: var(--surface-2);
  --surface-warm: var(--surface-3);
  --readout-bg: rgba(255, 255, 255, 0.92);
  --signal-bg: #f6f1e7;
  --signal-line: rgba(31, 28, 23, 0.06);
  --signal-sweep: var(--brand-glow);
  --amber: var(--gold);
  --red: #b4453a;
  --graphite: #2a241b;
  --panel: #fffdf9;
  --rail: #1a150e;
  --elev-1: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 8px rgba(58, 42, 20, 0.08);
  --elev-2: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 12px 34px rgba(58, 42, 20, 0.12);
  --elev-3: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 26px 70px rgba(58, 42, 20, 0.16);
  --shadow: var(--elev-2);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background:
    radial-gradient(120% 90% at 82% -12%, var(--brand-glow-far), transparent 58%),
    radial-gradient(90% 80% at 6% 112%, rgba(200, 118, 46, 0.10), transparent 60%),
    var(--bg-base);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-ui);
  letter-spacing: 0;
  position: relative;
}

/* A whisper of film grain over the whole instrument — static, GPU-cheap, the
   difference between a flat screen and a machined surface. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  min-height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

button:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: #9ba695;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.primary {
  background: var(--brand);
  color: var(--brand-ink);
  border-color: var(--brand);
}

.primary:hover:not(:disabled) {
  background: var(--brand-strong);
  border-color: var(--brand-strong);
}

.ghost {
  background: transparent;
}

.danger {
  color: var(--red);
  border-color: rgba(180, 61, 50, 0.28);
}

select,
input,
textarea {
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  min-height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  width: 100%;
}

textarea {
  min-height: 92px;
  padding-top: 10px;
  resize: vertical;
}

.app-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
}

.rail {
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--rail);
  color: #e8edef;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 14px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 4px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.brand-lockup strong,
.brand-lockup span {
  display: block;
}

.brand-lockup strong {
  color: #fffdf7;
}

.brand-lockup span {
  color: #aeb9ad;
  font-size: 12px;
}

.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--brand);
  color: var(--brand-ink);
  font-weight: 800;
  font-size: 13px;
  flex: 0 0 auto;
}

.main-nav {
  display: grid;
  gap: 4px;
  overflow: auto;
  padding-bottom: 20px;
}

.nav-room {
  display: grid;
  gap: 2px;
  margin-bottom: 10px;
}

.nav-room-label {
  margin: 6px 10px 4px;
  color: rgba(239, 233, 221, 0.42);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.nav-button {
  min-height: 40px;
  width: 100%;
  border-color: transparent;
  background: transparent;
  color: #efe9dd;
  display: grid;
  align-items: center;
  text-align: left;
  padding: 6px 12px;
  border-radius: 10px;
  line-height: 1.25;
}

.nav-button:hover:not(:disabled) {
  transform: none;
  border-color: transparent;
}

.nav-button:hover:not(.active) {
  background: rgba(255, 255, 255, 0.05);
}

.nav-button strong {
  font-weight: 600;
  font-size: 14px;
}

.nav-button span {
  font-size: 11px;
  color: rgba(239, 233, 221, 0.48);
}

.nav-button.active {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  box-shadow: inset 3px 0 0 var(--brand);
}

.nav-button.active span {
  color: rgba(255, 255, 255, 0.62);
}

.workspace {
  padding: clamp(18px, 3vw, 34px);
  display: grid;
  gap: 22px;
}

.command-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #efe9dd;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px;
}

.command-trigger:hover:not(:disabled) {
  transform: none;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.16);
}

.command-trigger span {
  color: rgba(239, 233, 221, 0.5);
  font-size: 11px;
}

.command-palette {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(31, 28, 23, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 16px 16px;
}

.command-palette[hidden] {
  display: none;
}

.command-panel {
  width: min(580px, 96vw);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.command-input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 16px 18px;
  font-size: 16px;
  background: transparent;
  color: var(--ink);
  border-radius: 0;
}

.command-input:focus {
  outline: none;
}

.command-results {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 52vh;
  overflow: auto;
}

.command-results li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
}

.command-results li.selected,
.command-results li:hover {
  background: var(--brand-soft);
}

.command-results li strong {
  font-weight: 600;
}

.command-results li span {
  color: var(--muted);
  font-size: 12px;
}

.command-empty {
  color: var(--muted);
  justify-content: center !important;
  cursor: default !important;
}

.setup-wizard {
  max-width: 720px;
}

.setup-progress {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
}

.setup-wizard h2 {
  font-size: clamp(22px, 2.6vw, 28px);
  margin-bottom: 8px;
}

.setup-wizard .lede {
  margin-bottom: 22px;
}

.setup-options {
  display: grid;
  gap: 12px;
  margin-bottom: 24px;
}

.setup-option {
  display: grid;
  gap: 4px;
  text-align: left;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  min-height: 0;
}

.setup-option:hover:not(:disabled) {
  transform: none;
  border-color: var(--brand);
}

.setup-option.selected {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand), var(--shadow);
  background: var(--brand-soft);
}

.setup-option strong {
  font-size: 16px;
  font-weight: 600;
}

.setup-option span {
  color: var(--muted);
  font-size: 13px;
}

.platform-footer {
  color: var(--muted);
  font-size: 12px;
  padding: 8px 2px 2px;
  text-align: center;
}

.platform-footer a {
  color: var(--ink);
  font-weight: 900;
  text-decoration: none;
  border-bottom: 1px solid var(--mint);
}

.platform-footer a:hover {
  color: var(--mint);
}

.command {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 30vw);
  align-items: center;
  gap: 24px;
  padding: clamp(20px, 2.4vw, 30px) clamp(22px, 3vw, 34px);
  box-shadow: var(--shadow);
}

#signalCanvas {
  display: none;
}

.command-copy,
.readout-grid {
  position: relative;
  z-index: 1;
}

.eyebrow,
.kicker {
  margin: 0 0 8px;
  color: var(--blue);
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 800;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 820px;
  font-size: clamp(24px, 2.6vw, 31px);
  line-height: 1.1;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.lede {
  max-width: 760px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}

.readout-grid {
  display: grid;
  gap: 10px;
}

.readout {
  border: 1px solid var(--line);
  background: var(--readout-bg);
  padding: 16px;
  min-height: 78px;
}

.readout span {
  display: block;
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
}

.readout label {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 800;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.panel,
.metric-card,
.portal-phone {
  background: var(--panel);
  border: 1px solid var(--line);
  min-width: 0;
  box-shadow: 0 8px 24px rgba(12, 18, 24, 0.06);
}

.panel-head {
  min-height: 72px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.panel-head h2,
.panel-head h3 {
  margin: 0;
  font-size: 18px;
}

.panel-body {
  padding: 16px;
}

.command-band,
.ops-ribbon {
  display: grid;
  gap: 12px;
}

.ops-ribbon {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-column: 1 / -1;
}

.ops-node {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 14px;
  min-height: 102px;
}

.ops-node strong {
  display: block;
  font-size: 18px;
  margin-bottom: 6px;
}

.ops-node span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.dashboard-grid,
.module-grid,
.portal-grid,
.settings-grid {
  display: grid;
  gap: 16px;
}

.dashboard-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.module-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wide {
  grid-column: 1 / -1;
}

.metric-card {
  padding: 16px;
  min-height: 128px;
  position: relative;
  overflow: hidden;
}

.metric-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--mint);
}

.metric-card strong {
  display: block;
  font-size: 32px;
  line-height: 1;
  margin-bottom: 10px;
}

.metric-card span {
  display: block;
  color: var(--muted);
  line-height: 1.45;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.toolbar input {
  max-width: 320px;
}

.tab-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.tab-button {
  min-height: 34px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
}

.tab-button.active {
  background: var(--surface-3);
  color: var(--brand-lift);
  border-color: var(--brand-line);
  box-shadow: var(--glow-brand);
}

.record-table-wrap {
  overflow: auto;
  max-height: 560px;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 10px;
  text-align: left;
  vertical-align: top;
  font-size: 13px;
}

th {
  position: sticky;
  top: 0;
  background: var(--surface-soft);
  z-index: 1;
}

.list-stack {
  display: grid;
  gap: 10px;
}

.list-item,
.work-card,
.portal-request {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 12px;
}

.list-item strong,
.work-card strong,
.portal-request strong {
  display: block;
  margin-bottom: 5px;
}

.meta-line {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.kanban {
  display: grid;
  grid-template-columns: repeat(5, minmax(200px, 1fr));
  gap: 12px;
  overflow-x: auto;
}

.dispatch-hint {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 10px;
}

.dispatch-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(150px, 1fr));
  gap: 10px;
  overflow: auto;
  margin-bottom: 14px;
}

.calendar-day {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  min-height: 138px;
  padding: 10px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.calendar-day.drop-target {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.calendar-day-head strong,
.calendar-day-head span,
.calendar-job small {
  display: block;
}

.calendar-day-head span {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 8px;
}

.calendar-day-jobs {
  display: grid;
  gap: 7px;
  min-height: 40px;
}

.calendar-job {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  padding: 8px 9px;
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.calendar-job:active {
  cursor: grabbing;
}

.calendar-job.dragging {
  opacity: 0.4;
}

.calendar-job small {
  color: var(--muted);
  font-weight: 700;
  margin-top: 2px;
}

.calendar-ghost {
  position: fixed;
  z-index: 70;
  pointer-events: none;
  width: 150px;
  box-shadow: var(--shadow);
  background: var(--surface);
  opacity: 0.95;
}

.dispatch-dragging {
  cursor: grabbing;
}

.kanban-column {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  min-height: 260px;
  padding: 10px;
}

.kanban-column h3 {
  font-size: 13px;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: var(--muted);
}

.status {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 11px;
  text-transform: uppercase;
}

.status.ready,
.status.paid,
.status.active,
.status.completed {
  color: #0b513a;
  background: #dff8ed;
}

.status.needs_review,
.status.sent,
.status.scheduled,
.status.in_progress,
.status.service_due {
  color: #7a4407;
  background: #fff1d8;
}

.record-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* Inside a narrow kanban card the three quick actions must wrap, never spill past the card edge. */
.work-card .record-actions {
  flex-wrap: wrap;
  margin-top: 10px;
}

.work-card .record-actions button {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 10px;
  font-size: 12px;
  white-space: nowrap;
}

.launch-manifest {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.launch-score {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 16px;
}

.checklist-grid,
.guardrail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  padding: 16px;
}

.checklist-item,
.guardrail-item {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 12px;
  display: grid;
  gap: 8px;
  border-left: 4px solid var(--line);
}

.checklist-item.ready,
.guardrail-item.ready {
  border-left-color: var(--mint);
}

.checklist-item.warning,
.guardrail-item.warning {
  border-left-color: var(--amber);
}

.checklist-item.blocker,
.guardrail-item.blocker {
  border-left-color: var(--red);
}

.checklist-item strong,
.guardrail-item strong {
  display: block;
}

.checklist-item span,
.guardrail-item span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.guardrail-item > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.guardrail-item progress {
  width: 100%;
  height: 10px;
  accent-color: var(--mint);
}

.launch-item {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 12px;
}

.launch-item strong {
  display: block;
  margin-bottom: 5px;
}

.status.high,
.status.critical,
.status.new,
.status.open {
  color: #7c201b;
  background: #ffe6e2;
}

.control-band {
  display: grid;
  grid-template-columns: minmax(320px, 1.3fr) minmax(300px, 0.7fr);
  gap: 16px;
  margin-bottom: 16px;
}

.drop-zone,
.sheet-form {
  border: 1px dashed #9ba695;
  background: var(--readout-bg);
  min-height: 118px;
  padding: 20px;
  display: grid;
  align-content: center;
  gap: 8px;
  cursor: pointer;
}

.drop-zone.dragover {
  border-color: var(--cyan);
  background: var(--surface-soft);
}

.drop-zone input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.drop-title {
  font-weight: 900;
  font-size: 18px;
}

.drop-copy,
.sheet-form label {
  color: var(--muted);
  line-height: 1.45;
}

.inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.cockpit-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(360px, 1.2fr);
  grid-auto-rows: minmax(220px, auto);
  gap: 16px;
}

.source-panel {
  grid-row: span 2;
}

.preview-panel {
  grid-column: 2;
}

.full-panel {
  min-height: 460px;
}

.file-list,
.sheet-plans,
.preview-table,
.history-list,
.model-grid,
.warning-stack {
  padding: 16px;
}

.empty {
  color: var(--muted);
}

.file-item,
.history-item {
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}

.file-item:last-child,
.history-item:last-child {
  border-bottom: 0;
}

.file-item strong,
.history-item strong {
  display: block;
  margin-bottom: 4px;
}

.warning-stack {
  padding-top: 0;
}

.warning {
  border-left: 4px solid var(--amber);
  background: var(--surface-warm);
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 13px;
}

.sheet-plan {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(180px, 0.7fr);
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.sheet-plan:last-child {
  border-bottom: 0;
}

.sheet-meta strong,
.sheet-meta span {
  display: block;
}

.sheet-meta span {
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}

.field-map,
.record-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.field-map {
  grid-column: 1 / -1;
}

.map-row,
.form-row {
  display: grid;
  gap: 5px;
}

.map-row label,
.form-row label,
.form-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.action-row,
.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.summary-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.summary-strip span {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.table-scroll {
  overflow: auto;
  max-height: 440px;
}

.error-list {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  color: var(--red);
}

.model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}

.model-tile {
  border: 1px solid var(--line);
  padding: 14px;
  background: var(--surface);
}

.model-tile strong {
  display: block;
  margin-bottom: 8px;
}

.model-tile p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.portal-grid {
  grid-template-columns: minmax(320px, 0.85fr) minmax(360px, 1.15fr);
}

.portal-phone {
  max-width: 430px;
  min-height: 640px;
  padding: 18px;
  border-radius: 8px;
  background: var(--rail);
  color: var(--ink);
}

.portal-screen {
  min-height: 600px;
  background: var(--white);
  color: var(--ink);
  border-radius: 6px;
  padding: 18px;
  display: grid;
  align-content: start;
  gap: 14px;
}

.portal-screen h2 {
  margin-bottom: 4px;
}

.settings-card {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 16px;
}

.gate-mode .rail,
.portal-only .rail {
  display: none;
}

.gate-mode .app-shell,
.portal-only .app-shell {
  grid-template-columns: 1fr;
}

.gate-panel {
  min-height: 420px;
  display: grid;
  place-items: center;
}

.auth-card {
  width: min(620px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 22px;
  display: grid;
  gap: 14px;
}

.compact-card {
  width: min(420px, 100%);
}

.auth-card h2 {
  margin-bottom: 2px;
}

.system-alert {
  border-color: rgba(156, 106, 18, 0.44);
}

.module-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.module-toggle {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.module-toggle input {
  width: auto;
  min-height: auto;
}

.upload-panel {
  margin-bottom: 16px;
}

.upload-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 0.6fr) minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.portal-public {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(280px, 0.8fr);
  gap: 16px;
}

.service-stack {
  display: grid;
  gap: 14px;
}

.service-order {
  border: 1px solid var(--line);
  background: var(--surface);
}

.service-order-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid var(--line);
}

.service-order-head h3 {
  margin-bottom: 4px;
}

.service-order-grid {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(240px, 0.72fr);
  gap: 12px;
  padding: 14px;
}

.portal-only .command {
  min-height: 220px;
}

.service-command {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.portal-public .panel {
  min-height: 100%;
}

.mini-form {
  padding: 0;
}

.mini-inline {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(120px, 0.4fr) minmax(180px, 1fr) auto minmax(120px, 0.5fr);
  gap: 8px;
  align-items: center;
}

.mini-inline input {
  min-width: 0;
}

.ai-inline .meta-line {
  grid-column: 1 / -1;
  color: var(--ink);
}

.company-day {
  border-color: rgba(15, 122, 149, 0.3);
}

.company-day-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.runway-step {
  border: 1px solid var(--line);
  background: var(--surface);
  min-height: 168px;
  padding: 12px;
  display: grid;
  align-content: start;
  gap: 10px;
}

.runway-step strong {
  text-transform: uppercase;
  font-size: 12px;
  color: var(--blue);
}

.mini-record {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.mini-record span {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 800;
}

.knowledge-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.mini-task-stack {
  display: grid;
  gap: 8px;
}

.task-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.task-check button {
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
}

.task-check span {
  overflow-wrap: anywhere;
  font-size: 13px;
}

/* ============ Technician phone door — one job at a time ============ */
.tech-portal {
  width: min(560px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 16px;
}

.tech-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tech-bar h2 {
  font-size: 24px;
  margin: 2px 0 0;
}

.tech-signout {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-weight: 700;
}

.tech-empty {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 40px 24px;
  text-align: center;
  display: grid;
  gap: 8px;
}

.tech-empty strong {
  font-size: 22px;
}

.tech-empty p {
  color: var(--muted);
  max-width: 32ch;
  margin: 0 auto;
}

.tech-switch {
  position: sticky;
  top: 8px;
  z-index: 3;
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px;
  box-shadow: var(--shadow);
}

.tech-arrow {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 30px;
  line-height: 1;
  display: grid;
  place-items: center;
}

.tech-arrow:disabled {
  opacity: 0.3;
}

.tech-switch-mid {
  display: grid;
  gap: 8px;
  justify-items: center;
}

.tech-count {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.01em;
}

.tech-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
}

.tech-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 0;
}

.tech-dot.done {
  background: var(--brand-soft);
  border-color: var(--brand);
}

.tech-dot.on {
  background: var(--brand);
  border-color: var(--brand);
  transform: scale(1.25);
}

.tech-job {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 22px 20px 20px;
  display: grid;
  gap: 16px;
}

.tech-job-top h1 {
  font-size: 28px;
  line-height: 1.1;
  margin: 4px 0 10px;
}

.tech-where {
  color: var(--ink);
  font-weight: 600;
  margin: 0;
}

.tech-when {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  margin: 6px 0 0;
}

.tech-prio {
  text-transform: capitalize;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-strong);
  border: 1px solid var(--brand);
}

.tech-prio.high,
.tech-prio.critical {
  background: rgba(176, 32, 32, 0.12);
  color: #8a1c1c;
  border-color: rgba(176, 32, 32, 0.4);
}

.tech-stage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.tech-stage-btn {
  display: grid;
  gap: 0;
}

.tech-stage-btn button {
  width: 100%;
  min-height: 58px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted);
  font-weight: 800;
  font-size: 15px;
}

.tech-stage-btn.on button {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
  box-shadow: var(--shadow);
}

.tech-stage-status {
  display: none;
}

.turnstile-row {
  margin: 4px 0;
  min-height: 65px;
}

.ops-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 16px);
  z-index: 70;
  max-width: min(540px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px 12px 18px;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
  backdrop-filter: blur(12px);
  color: var(--ink);
  font-weight: 500;
  font-size: 14px;
  box-shadow: var(--elev-3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.ops-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.ops-toast-msg { flex: 1; min-width: 0; }
.ops-toast-act,
.ops-toast-ghost {
  min-height: 0;
  padding: 8px 15px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.ops-toast-act {
  background: linear-gradient(180deg, var(--brand-lift), var(--brand));
  color: var(--brand-ink);
  border: 1px solid transparent;
  box-shadow: var(--glow-brand);
}
.ops-toast-ghost { background: transparent; border: 1px solid var(--hairline); color: var(--muted); }
.ops-toast-good { border-color: var(--brand-line); box-shadow: var(--elev-3), 0 0 44px -16px var(--brand-glow); }
.ops-toast-error { border-color: rgba(240, 131, 122, 0.4); }
.ops-toast-error .ops-toast-msg { color: #f0a097; }
.ops-toast-confirm .ops-toast-act {
  background: rgba(240, 131, 122, 0.16);
  color: #f0a097;
  border-color: rgba(240, 131, 122, 0.4);
  box-shadow: none;
}

/* ---- The sign-off: the light dims and the instrument says goodnight ---- */
.signoff-veil {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  text-align: center;
  background:
    radial-gradient(120% 100% at 50% 48%, var(--brand-glow-far), transparent 60%),
    var(--bg-abyss);
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
}
.signoff-veil.show { opacity: 1; }
.signoff-line {
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 54px);
  line-height: 1.08;
  color: var(--ink);
  text-shadow: 0 0 60px var(--brand-glow-far);
}
.signoff-line span { color: var(--muted); font-size: 0.6em; }

.sched-summary {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  margin-bottom: 4px;
}

.sched-summary strong {
  font-size: 16px;
}

.sched-summary span {
  color: var(--muted);
  font-size: 13px;
}

.sched-third {
  display: grid;
  gap: 10px;
}

.sched-accept {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

.sched-accept input {
  width: 20px;
  height: 20px;
  accent-color: var(--brand);
}

.tech-accept {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
}

.tech-accept-h {
  margin: 0;
  font-weight: 800;
  font-size: 15px;
  color: var(--brand-strong);
}

.tech-accept-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 10px;
}

.tech-accept-yes button {
  width: 100%;
  min-height: 56px;
  border-radius: 10px;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: var(--brand-ink);
  font-weight: 800;
  font-size: 16px;
}

.tech-accept-no button {
  width: 100%;
  min-height: 56px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-weight: 700;
  font-size: 15px;
}

.tech-onway {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
}

.tech-onway-window {
  display: grid;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brand-strong);
}

.tech-onway-window select {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  padding: 0 10px;
  font-size: 15px;
  font-family: inherit;
}

.tech-onway-btn {
  min-height: 54px;
  border-radius: 10px;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: var(--brand-ink);
  font-weight: 800;
  font-size: 16px;
}

.tech-onway-status {
  grid-column: 1 / -1;
  color: var(--brand-strong);
  font-weight: 600;
}

.tech-onway.sent .tech-onway-btn {
  opacity: 0.65;
}

.tech-block-h {
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 10px;
}

.tech-tasks {
  display: grid;
  gap: 8px;
}

.tech-task {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
}

.tech-task span {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.tech-task.done span {
  color: var(--muted);
  text-decoration: line-through;
}

.tech-check {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 2px solid var(--line);
  background: var(--surface);
  color: var(--brand-ink);
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  display: grid;
  place-items: center;
}

.tech-task.done .tech-check {
  background: var(--brand);
  border-color: var(--brand);
}

.tech-tool {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  overflow: hidden;
}

.tech-tool > summary {
  list-style: none;
  cursor: pointer;
  min-height: 54px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-weight: 700;
  font-size: 15px;
}

.tech-tool > summary::-webkit-details-marker {
  display: none;
}

.tech-tool > summary::after {
  content: '+';
  margin-left: auto;
  font-size: 22px;
  color: var(--muted);
  font-weight: 400;
}

.tech-tool[open] > summary::after {
  content: '\2212';
}

.tech-tool[open] > summary {
  border-bottom: 1px solid var(--line);
}

.tech-form {
  display: grid;
  gap: 10px;
  padding: 14px 16px 16px;
}

.tech-form label {
  display: grid;
  gap: 6px;
  font-weight: 700;
  font-size: 13px;
  color: var(--muted);
}

.tech-form input,
.tech-form textarea,
.tech-form select {
  width: 100%;
  min-height: 50px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  padding: 12px 14px;
  font-size: 16px;
  font-family: inherit;
}

.tech-form textarea {
  min-height: 64px;
  resize: vertical;
}

.tech-form-row {
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
}

.tech-form-row .tech-ai-out,
.tech-form-row .meta-line {
  grid-column: 1 / -1;
}

.tech-save {
  min-height: 50px;
  padding: 0 22px;
  border-radius: 10px;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: var(--brand-ink);
  font-weight: 800;
  font-size: 15px;
}

.tech-listed {
  padding: 0 16px 14px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.tech-ai-out {
  color: var(--ink);
}

.tech-invoice button {
  width: 100%;
  min-height: 56px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--brand);
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-weight: 800;
  font-size: 16px;
}

.tech-invoice.sent button {
  border-style: solid;
  opacity: 0.7;
}

/* ============ Customer door — lead with one clear ask ============ */
.client-portal {
  width: min(720px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 18px;
}

.client-request {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 90% at 90% -20%, var(--brand-soft), transparent 60%),
    var(--surface);
  box-shadow: var(--shadow);
  padding: 26px 24px 24px;
  display: grid;
  gap: 18px;
}

.client-request-copy h2 {
  font-size: 28px;
  margin: 4px 0 6px;
}

.client-request-copy p {
  color: var(--muted);
  margin: 0;
  max-width: 46ch;
}

.client-request .record-fields {
  padding: 0;
}

.client-request .primary {
  min-height: 54px;
  font-size: 16px;
}

.client-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.client-stat {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 16px 18px;
  display: grid;
  gap: 4px;
}

.client-stat strong {
  font-size: 26px;
  line-height: 1;
}

.client-stat span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.client-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.client-extra {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.client-extra > summary {
  list-style: none;
  cursor: pointer;
  min-height: 54px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  font-weight: 700;
}

.client-extra > summary::-webkit-details-marker {
  display: none;
}

.client-extra .panel {
  border: 0;
  box-shadow: none;
}

@media (max-width: 620px) {
  .client-panels {
    grid-template-columns: 1fr;
  }

  .client-stat strong {
    font-size: 22px;
  }

  .tech-form-row {
    grid-template-columns: 1fr;
  }
}

.hidden {
  display: none !important;
}

.record-dialog {
  width: min(760px, calc(100vw - 28px));
  border: 1px solid var(--line);
  padding: 0;
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.record-dialog::backdrop {
  background: rgba(15, 18, 15, 0.42);
}

.dialog-head {
  padding: 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dialog-head h2 {
  margin: 0;
}

.record-fields {
  padding: 16px;
}

.dialog-actions {
  padding: 16px;
  border-top: 1px solid var(--line);
}

.integration-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  padding: 0 16px 16px;
}

.integration-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 14px;
  border-radius: 6px;
}

.integration-card.connected {
  border-color: rgba(24, 183, 122, 0.48);
  box-shadow: inset 4px 0 0 var(--mint);
}

.integration-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.integration-head h3 {
  margin: 0;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.compact-fields {
  padding: 0;
  display: grid;
  gap: 10px;
}

.template-list {
  display: grid;
  gap: 8px;
  padding: 16px;
}

.template-list article {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 10px;
  border-radius: 6px;
}

.email-composer {
  border-top: 1px solid var(--line);
}

.detail-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(680px, 100vw);
  transform: translateX(104%);
  transition: transform 220ms ease;
  z-index: 40;
  background: rgba(17, 20, 23, 0.26);
  display: grid;
  justify-items: end;
  pointer-events: none;
}

.detail-drawer.open {
  transform: translateX(0);
  pointer-events: auto;
}

.detail-panel {
  width: min(680px, 100vw);
  height: 100vh;
  overflow: auto;
  background: var(--white);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 18px;
  display: grid;
  align-content: start;
  gap: 16px;
}

.detail-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}

.detail-head h2 {
  margin: 0;
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.detail-section {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 6px;
  padding: 14px;
}

.detail-section h3 {
  margin: 0;
}

.detail-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.detail-fields div,
.detail-list article {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 5px;
  padding: 10px;
  min-width: 0;
}

.detail-fields span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}

.detail-fields strong {
  display: block;
  overflow-wrap: anywhere;
}

.detail-list {
  display: grid;
  gap: 8px;
}

@media (max-width: 1100px) {
  .dashboard-grid,
  .module-grid,
  .ops-ribbon,
  .service-command,
  .portal-grid,
  .portal-public,
  .cockpit-grid,
  .control-band {
    grid-template-columns: 1fr;
  }

  .upload-grid {
    grid-template-columns: 1fr;
  }

  .company-day-grid,
  .knowledge-search,
  .launch-score {
    grid-template-columns: 1fr;
  }

  .service-order-grid,
  .mini-inline,
  .integration-grid {
    grid-template-columns: 1fr;
  }

  .service-order {
    border-radius: 8px;
    overflow: hidden;
  }

  .service-order-head {
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 2;
  }

  .preview-panel {
    grid-column: auto;
  }

  .kanban {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

@media (max-width: 780px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .rail {
    position: fixed;
    z-index: 20;
    bottom: 0;
    top: auto;
    height: 76px;
    width: 100%;
    padding: 8px;
  }

  .brand-lockup {
    display: none;
  }

  .main-nav {
    grid-auto-flow: column;
    grid-auto-columns: minmax(74px, 1fr);
    overflow-x: auto;
    padding-bottom: 0;
  }

  .nav-button {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 2px;
    min-height: 58px;
    font-size: 12px;
  }

  .nav-button span {
    display: none;
  }

  .workspace {
    padding-bottom: 98px;
  }

  .portal-only .workspace {
    padding: 12px;
  }

  .command {
    grid-template-columns: 1fr;
    min-height: 320px;
  }

  .portal-only .command {
    min-height: auto;
    padding: 18px;
  }

  h1 {
    font-size: 42px;
  }

  .kanban {
    grid-template-columns: minmax(240px, 1fr);
  }

  .toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .toolbar input {
    max-width: none;
  }

  .launch-manifest,
  .ops-ribbon,
  .service-command {
    grid-template-columns: 1fr;
  }

  .record-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .detail-panel {
    padding-bottom: 98px;
  }
}

/* Below 780px, record tables collapse into calm stacked cards. */
@media (max-width: 780px) {
  .record-table-wrap {
    overflow: visible;
    max-height: none;
  }
  table {
    min-width: 0;
  }
  .record-table-wrap thead {
    display: none;
  }
  .record-table-wrap tr {
    display: block;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: var(--surface);
  }
  .record-table-wrap td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    border: 0;
    padding: 7px 0;
    text-align: right;
  }
  .record-table-wrap td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    text-align: left;
  }
  .record-table-wrap td[data-label="Actions"] {
    display: block;
    text-align: left;
    padding-top: 10px;
  }
  .record-table-wrap td[data-label="Actions"]::before {
    display: block;
    margin-bottom: 6px;
  }
  .record-table-wrap td[data-label="Actions"] .record-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

/* ============ Living-line home (gray28) ============ */
/* The big page-header hero belongs only on the sign-in screen and the public portals.
   Inside the authenticated admin every view has its own header, so the hero is pure
   waste on every page, not just Today. Hide it across the whole admin. */
body:not(.gate-mode):not(.portal-only) .command { display: none; }
.home { display: grid; gap: 18px; }
.home-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.home-eyebrow { color: var(--brand); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 4px; }
.home-h1 { font-size: clamp(20px, 2.4vw, 26px); margin: 0; }
.home-command { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; min-height: 64px; }
.home-command:hover:not(:disabled) { transform: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.home-command .hc-ai { font-size: 11px; font-weight: 600; color: var(--brand-ink); background: var(--brand); border-radius: 7px; padding: 5px 10px; }
.home-command .hc-ph { color: var(--muted); font-size: 15px; }
.home-command .hc-k { margin-left: auto; color: var(--muted); font-size: 11px; border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; }
.home-lbl { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin: 6px 2px -4px; }
.ops-line-wrap { overflow-x: auto; padding: 6px 0 2px; }
.ops-line { position: relative; display: grid; grid-template-columns: repeat(5, minmax(108px, 1fr)); gap: 8px; min-width: 560px; }
.ops-line::before { content: ''; position: absolute; top: 20px; left: 5%; right: 5%; height: 2px; background: var(--line); }
.ops-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.ops-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--line); border: 3px solid var(--paper); margin-top: 13px; flex: 0 0 auto; }
.ops-dot.on { background: var(--brand); }
.ops-sname { font-size: 11px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.ops-count { font-size: 22px; font-weight: 500; line-height: 1; }
.ops-count.on { color: var(--brand); }
.ops-beads { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 2px; }
.ops-bead { font-size: 11px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 7px 9px; line-height: 1.25; text-align: left; width: 100%; }
.ops-bead.on { color: var(--brand-strong); background: var(--brand-soft); border-color: transparent; }
.ops-bead:hover:not(:disabled) { transform: none; border-color: var(--brand); }
.ops-more { font-size: 11px; color: var(--muted); padding-left: 2px; }
.ops-empty { font-size: 11px; color: var(--muted); opacity: 0.55; }
.ops-signals { display: flex; gap: 10px; flex-wrap: wrap; }
.ops-chip { display: inline-flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: 10px 14px; font-size: 13px; color: var(--ink); }
.ops-chip:hover:not(:disabled) { transform: none; border-color: var(--brand); }
.ops-chip-clear { color: var(--muted); }
.ops-cd { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.home-board { margin-top: 4px; }
.install-toast {
  position: fixed; right: 24px; bottom: 24px;
  transform: translateY(12px);
  z-index: 60; display: flex; align-items: center; gap: 12px;
  max-width: min(420px, calc(100vw - 24px));
  padding: 12px 14px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 18px 50px rgba(20, 30, 24, 0.28);
  opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease;
}
.install-toast.show { opacity: 1; transform: translateY(0); }
.install-toast .it-mark {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--brand); color: var(--brand-ink);
  font-weight: 700; font-size: 14px; letter-spacing: 0.04em;
}
.install-toast .it-copy { display: flex; flex-direction: column; line-height: 1.25; }
.install-toast .it-copy strong { font-size: 14px; }
.install-toast .it-sub { color: var(--muted); font-size: 12px; }
.install-toast .it-go {
  flex: 0 0 auto; margin-left: auto;
  background: var(--brand); color: var(--brand-ink); border-color: var(--brand);
  font-weight: 600; border-radius: 10px; padding: 8px 14px;
}
.install-toast .it-x {
  flex: 0 0 auto; background: transparent; border: none; color: var(--muted);
  font-size: 20px; line-height: 1; padding: 4px 6px; cursor: pointer;
}
@media (max-width: 780px) {
  .install-toast {
    left: 12px; right: 12px; max-width: none;
    transform: translateY(12px);
    bottom: calc(76px + env(safe-area-inset-bottom, 0px) + 12px);
  }
  .install-toast.show { transform: translateY(0); }
}

/* AI command bar: the AI offer row, thinking state, and confirm card */
.cmd-ai { display: flex; align-items: center; gap: 10px; }
.cmd-ai-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; color: var(--brand-ink); background: var(--brand); border-radius: 6px; padding: 3px 7px; flex: 0 0 auto; }
.cmd-ai strong { flex: 1 1 auto; }
.cmd-thinking { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.cmd-proposal { display: flex; gap: 12px; align-items: flex-start; }
.cmd-prop-body { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }
.cmd-prop-body strong { font-size: 15px; line-height: 1.4; }
.cmd-note { color: var(--amber, #c98a12); font-size: 12px; margin: 0; }
.cmd-prop-actions { display: flex; gap: 8px; margin-top: 2px; }
.cmd-note-row { color: var(--muted); font-size: 12px; font-style: italic; }

/* Import cockpit: AI mapping status + per-column review flags */
.sheet-ai-status { display: inline-flex; align-items: center; font-size: 11px; color: var(--muted); }
.sheet-ai-status.ok { color: var(--brand-strong); }
.sheet-ai-status.pending::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--brand); animation: aiPulse 1s ease-in-out infinite; }
@keyframes aiPulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
.map-row.map-review > label { color: var(--amber, #c98a12); }
.map-flag { margin-left: 6px; font-size: 10px; font-weight: 700; color: var(--brand-ink); background: var(--amber, #c98a12); border-radius: 5px; padding: 1px 6px; vertical-align: middle; }

@media (max-width: 780px) {
  .ops-line { grid-template-columns: 1fr; min-width: 0; gap: 2px; }
  .ops-line::before { left: 19px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto; }
  .ops-stage { flex-direction: row; align-items: center; gap: 12px; text-align: left; padding: 9px 0; }
  .ops-dot { margin-top: 0; margin-left: 13px; }
  .ops-sname { width: 84px; flex: 0 0 auto; }
  .ops-count { font-size: 18px; min-width: 22px; text-align: right; }
  .ops-beads { margin-top: 0; }
  .home-command { min-height: 58px; padding: 15px 16px; }
  .home-command .hc-ph { font-size: 14px; }
}

/* ============================================================================
   WARM QUIET POWER — primitives pass. The machined-cockpit craft layered over
   the token base: editorial display type, glowing focus, jewel buttons, light
   on every surface. Appended last so it carries the cascade.
   ============================================================================ */

/* Editorial display type for headlines; UI type stays Inter. */
h1, h2, h3,
.panel-head h2, .panel-head h3,
.dialog-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.eyebrow, .kicker {
  color: var(--gold);
  letter-spacing: 0.18em;
  font-weight: 600;
  font-size: 11px;
}

/* Buttons become machined controls; the primary is the jewel. */
button {
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--hairline);
  color: var(--ink);
  border-radius: var(--radius-sm);
  box-shadow: var(--elev-1);
  transition: transform 180ms cubic-bezier(.22,1,.36,1), border-color 200ms ease, box-shadow 220ms ease, background 200ms ease;
}
button:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: var(--brand-line);
  box-shadow: var(--elev-2);
}
.primary {
  background: linear-gradient(180deg, var(--brand-lift), var(--brand));
  color: var(--brand-ink);
  border: 1px solid transparent;
  box-shadow: var(--glow-brand);
}
.primary:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--brand-lift), var(--brand));
  filter: brightness(1.04);
  box-shadow: var(--glow-brand-strong);
}
.ghost { background: transparent; box-shadow: none; }
.danger { color: var(--red); border-color: rgba(240, 131, 122, 0.30); background: rgba(240, 131, 122, 0.06); }

/* Glowing keyboard focus — the cheapest, clearest signal of craft. */
:focus-visible {
  outline: none;
  box-shadow: var(--glow-brand);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: transparent; }

/* Inputs as dark instrument fields. */
select, input, textarea {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  color: var(--ink);
  border-radius: var(--radius-sm);
  transition: border-color 180ms ease, box-shadow 220ms ease;
}
select:focus, input:focus, textarea:focus {
  outline: none;
  border-color: var(--brand-line);
  box-shadow: 0 0 0 3px var(--brand-soft), 0 0 26px -10px var(--brand-glow);
}
::selection { background: var(--brand-line); color: var(--brand-ink); }
::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }

/* Surfaces: real depth and a lit top edge. */
.command, .command-panel, .panel, .metric-card, .settings-card, .portal-phone {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--elev-2);
}
.panel, .metric-card, .portal-phone { box-shadow: var(--elev-1); }
.command { background: linear-gradient(180deg, var(--surface-2), var(--surface-1)); }

/* The rail: a deep cockpit console. */
.rail {
  background: linear-gradient(180deg, #15110b, #0b0805);
  border-right: 1px solid var(--hairline);
}
.brand-mark { box-shadow: var(--glow-brand); }
.command-trigger { background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--radius-sm); }
.command-trigger:hover:not(:disabled) { border-color: var(--brand-line); background: var(--surface-3); }
.nav-button.active {
  background: var(--surface-2);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--brand), 0 0 30px -14px var(--brand-glow);
}
.nav-button.active strong { color: var(--brand-lift); }

/* Gauges: the numbers glow. */
.readout {
  background: var(--readout-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  box-shadow: var(--elev-1);
}
.readout span {
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 22px var(--brand-glow);
}

/* Overlays read as glass over the cockpit. */
.command-palette { background: rgba(8, 6, 4, 0.62); backdrop-filter: blur(7px); }
.command-panel { box-shadow: var(--elev-3); }
.detail-panel { background: var(--surface-1); border-left: 1px solid var(--hairline); box-shadow: var(--elev-3); }
.record-dialog { background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: var(--elev-3); color: var(--ink); }
.record-dialog::backdrop { background: rgba(8, 6, 4, 0.62); backdrop-filter: blur(6px); }

/* Status pills, warm-dark and legible, with a faint glow on live states. */
.status, .status-pill {
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}
.status.ready, .status.paid, .status.active, .status.completed {
  background: var(--brand-soft); color: var(--brand-lift); border-color: var(--brand-line);
}
.status.needs_review, .status.sent, .status.scheduled, .status.in_progress, .status.service_due {
  background: var(--gold-soft); color: var(--gold); border-color: rgba(224, 178, 94, 0.34);
}
.status.high, .status.critical, .status.new, .status.open {
  background: rgba(240, 131, 122, 0.12); color: #f0a097; border-color: rgba(240, 131, 122, 0.30);
}

/* The Bridge stage: where the living horizon renders. */
.bridge-stage {
  position: relative;
  height: clamp(150px, 22vh, 232px);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: #0c0906;
  box-shadow: var(--elev-2), inset 0 0 80px -40px var(--brand-glow);
  margin-bottom: 20px;
}
body:not(.home-view) .bridge-stage { display: none; }
.bridge-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Home gauges: glowing cockpit readouts. */
.home-gauges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 4px 0 22px;
}
.gauge {
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--elev-1);
}
.gauge .gv {
  display: block;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 500;
  line-height: 1;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 26px var(--brand-glow);
}
.gauge .gl {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.home-eyebrow {
  color: var(--gold);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
  margin: 0 0 6px;
}
.home-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.02;
  letter-spacing: -0.015em;
}
.home-lbl {
  color: var(--muted);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
  margin: 22px 0 10px;
}
.home-command {
  box-shadow: var(--elev-1);
}
.home-command .hc-ai {
  background: linear-gradient(180deg, var(--brand-lift), var(--brand));
  color: var(--brand-ink);
  box-shadow: var(--glow-brand);
}
@media (max-width: 620px) {
  .home-gauges { grid-template-columns: 1fr; gap: 10px; }
}

/* ---- The Arrival: the gate as a cinematic entrance ---- */
.gate-mode .workspace {
  max-width: 960px;
  margin: 0 auto;
  min-height: 100vh;
  align-content: center;
  gap: 8px;
  position: relative;
  text-align: center;
}
.gate-mode .workspace::before {
  content: "";
  position: fixed;
  left: 50%;
  top: 38%;
  width: min(120vw, 1100px);
  height: min(120vw, 1100px);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--brand-glow-far), transparent 62%);
  pointer-events: none;
  z-index: 0;
  animation: gateBreathe 7s ease-in-out infinite;
}
@keyframes gateBreathe {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.94); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
}
.gate-mode .command {
  background: transparent;
  border: 0;
  box-shadow: none;
  display: block;
  text-align: center;
  padding: 0 16px 8px;
  position: relative;
  z-index: 1;
}
.gate-mode .command .readout-grid { display: none; }
.gate-mode .command-copy { max-width: 720px; margin: 0 auto; }
.gate-mode .command h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 7vw, 70px);
  line-height: 1.0;
  margin: 6px auto 12px;
  text-shadow: 0 0 60px var(--brand-glow-far);
}
.gate-mode .command .eyebrow {
  color: var(--gold);
  letter-spacing: 0.34em;
}
.gate-mode .lede { margin: 0 auto; color: var(--muted); }
.gate-panel {
  position: relative;
  z-index: 1;
  min-height: auto;
  gap: 16px;
  padding-top: 18px;
}
.auth-card {
  background: color-mix(in srgb, var(--surface-1) 78%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius);
  box-shadow: var(--elev-3), 0 0 80px -30px var(--brand-glow);
  padding: 26px;
  text-align: left;
}
.auth-card h2 { font-family: var(--font-display); }

/* ---- Night watch: the room warms toward evening, drops to embers after dark ---- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: var(--daywarm);
  background: radial-gradient(130% 100% at 50% 122%, rgba(200, 108, 38, 0.16), transparent 58%);
  transition: opacity 1400ms ease;
}
:root[data-daypart="dusk"] { --daywarm: 0.55; }
:root[data-daypart="night"] { --daywarm: 1; }

/* ---- The held line: the whole truth of the business in one calm breath ---- */
.home-held {
  font-family: var(--font-display);
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.42;
  color: var(--ink);
  margin: 2px 0 18px;
  max-width: 780px;
}
.home-held .hl-soft { color: var(--muted); }
.home-held .hl-warm { color: var(--gold); }
.home-held .hl-glow { color: var(--brand); text-shadow: 0 0 22px var(--brand-glow); }

/* ---- Alive moments: a record blooms when something good happens, then fades ---- */
@keyframes ocBloom {
  0% { box-shadow: 0 0 0 0 transparent; }
  30% { box-shadow: var(--glow-brand-strong); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.oc-bloom { animation: ocBloom 900ms var(--ease-out); }
@keyframes ocTick {
  0% { background-color: var(--brand-soft); }
  100% { background-color: transparent; }
}
.oc-tick { animation: ocTick 820ms var(--ease-out); }

/* ---- Domain pills: the whole business as one glance; light only the exception ---- */
.home-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }
.hp {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 8px 16px;
  min-height: 0;
  box-shadow: none;
}
.hp:hover:not(:disabled) { transform: translateY(-1px); }
.hp-l { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.hp-v { font-size: 13px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.hp-rest .hp-v { color: var(--muted); }
.hp-watch { border-color: rgba(224, 178, 94, 0.34); }
.hp-watch .hp-v { color: var(--gold); }
.hp-warn { border-color: rgba(240, 131, 122, 0.42); box-shadow: 0 0 22px -8px rgba(240, 131, 122, 0.5); }
.hp-warn .hp-v { color: #f0a097; }