/* ==========================================================================
   SLB PCP Operation - design system
   --------------------------------------------------------------------------
   1. Tokens (colour, type, space, radius, elevation, motion)
   2. Base + layout shell
   3. Navigation (sidebar, topbar)
   4. Primitives (button, input, badge, card, table, ...)
   5. Patterns (KPI, stepper, timeline, drawer, toast, empty, skeleton)
   6. Responsive + accessibility
   Every colour used in a component references a token. No page-level colours.
   ========================================================================== */

/* ============================================================ 1. TOKENS === */
:root {
  /* Brand ---------------------------------------------------------------- */
  --slb-navy-950: #050d18;
  --slb-navy-900: #071523;
  --slb-navy-850: #0b1c2e;
  --slb-navy-800: #102438;
  --slb-navy-700: #17324b;
  --slb-blue-700: #1442a8;
  --slb-blue-600: #1a56d6;
  --slb-blue-500: #2f6ff0;
  --slb-blue-400: #5b8ef7;
  --slb-blue-100: #e3edff;

  /* Semantic families ---------------------------------------------------- */
  --green-700: #0f6b4b;
  --green-600: #12855c;
  --green-500: #1aa376;
  --green-100: #e2f6ee;
  --amber-700: #8a5300;
  --amber-600: #b06c00;
  --amber-500: #dc8b04;
  --amber-100: #fdf0da;
  --red-700: #9f2b25;
  --red-600: #c53b34;
  --red-500: #e05a52;
  --red-100: #fdeae9;
  --slate-700: #3d4c60;
  --slate-600: #56657a;
  --slate-500: #718096;
  --slate-100: #eef1f5;

  /* Typography ----------------------------------------------------------- */
  --font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SFMono-Regular", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --text-display: 1.75rem;   /* page title */
  --text-title: 1.25rem;     /* section title */
  --text-metric: 1.875rem;   /* KPI number */
  --text-body: 0.9375rem;
  --text-sm: 0.8125rem;
  --text-label: 0.75rem;
  --text-caption: 0.6875rem;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.25;
  --leading-normal: 1.5;

  /* Spacing scale (4px base) --------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Radius + elevation --------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(7, 21, 35, 0.06), 0 1px 3px rgba(7, 21, 35, 0.04);
  --shadow-md: 0 4px 12px rgba(7, 21, 35, 0.08);
  --shadow-lg: 0 16px 40px rgba(7, 21, 35, 0.16);

  /* Motion --------------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0, 0.15, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 240ms;

  /* Layout --------------------------------------------------------------- */
  --sidebar-width: 258px;
  --sidebar-collapsed: 76px;
  --topbar-height: 60px;
  --content-max: 1560px;
}

/* Light theme ------------------------------------------------------------ */
:root,
[data-theme="light"] {
  --bg-canvas: #f4f6fa;
  --bg-surface: #ffffff;
  --bg-surface-raised: #ffffff;
  --bg-subtle: #f7f9fc;
  --bg-inset: #eef2f7;
  --bg-hover: #f1f5fb;
  --bg-selected: #e8f0ff;

  --nav-bg: var(--slb-navy-900);
  --nav-bg-hover: rgba(255, 255, 255, 0.06);
  --nav-bg-active: rgba(47, 111, 240, 0.18);
  --nav-text: #a9b8cc;
  --nav-text-strong: #ffffff;
  --nav-border: rgba(255, 255, 255, 0.08);

  --text-primary: #101c2e;
  --text-secondary: #4a5b73;
  --text-muted: #6b7b93;
  --text-inverse: #ffffff;
  --text-link: var(--slb-blue-600);

  --border: #dde3ec;
  --border-strong: #c6cfdc;
  --border-focus: var(--slb-blue-500);

  --accent: var(--slb-blue-600);
  --accent-hover: var(--slb-blue-700);
  --accent-soft: var(--slb-blue-100);
  --accent-text: #ffffff;

  --success: var(--green-600);
  --success-soft: var(--green-100);
  --success-text: var(--green-700);
  --warning: var(--amber-600);
  --warning-soft: var(--amber-100);
  --warning-text: var(--amber-700);
  --danger: var(--red-600);
  --danger-soft: var(--red-100);
  --danger-text: var(--red-700);
  --info: var(--slb-blue-600);
  --info-soft: var(--slb-blue-100);
  --info-text: var(--slb-blue-700);
  --neutral: var(--slate-500);
  --neutral-soft: var(--slate-100);
  --neutral-text: var(--slate-700);

  --skeleton-base: #e7ecf3;
  --skeleton-shine: #f3f6fa;
  --overlay: rgba(7, 21, 35, 0.45);
  color-scheme: light;
}

/* Dark theme ------------------------------------------------------------- */
[data-theme="dark"] {
  --bg-canvas: #020812;
  --bg-surface: #071421;
  --bg-surface-raised: #0a1b2d;
  --bg-subtle: #06111f;
  --bg-inset: #081827;
  --bg-hover: #0a1d30;
  --bg-selected: #0c2440;

  --nav-bg: #020916;
  --nav-bg-hover: rgba(31, 124, 255, 0.08);
  --nav-bg-active: rgba(23, 107, 255, 0.16);
  --nav-text: #8da0b8;
  --nav-text-strong: #f6f9ff;
  --nav-border: rgba(68, 129, 215, 0.14);

  --text-primary: #f6f9ff;
  --text-secondary: #b8c6d8;
  --text-muted: #7f94ae;
  --text-inverse: #06111d;
  --text-link: var(--slb-blue-400);

  --border: rgba(58, 115, 190, 0.18);
  --border-strong: rgba(68, 129, 215, 0.3);
  --border-focus: #2a8cff;

  --accent: #176bff;
  --accent-hover: #2a8cff;
  --accent-soft: rgba(23, 107, 255, 0.16);
  --accent-text: #ffffff;

  --success: #00c982;
  --success-soft: rgba(0, 201, 130, 0.14);
  --success-text: #19e18c;
  --warning: #ffb020;
  --warning-soft: rgba(255, 176, 32, 0.14);
  --warning-text: #ffc45b;
  --danger: #ff4545;
  --danger-soft: rgba(255, 69, 69, 0.14);
  --danger-text: #ff746f;
  --info: var(--slb-blue-400);
  --info-soft: rgba(91, 142, 247, 0.16);
  --info-text: #8fb4fb;
  --neutral: var(--slate-500);
  --neutral-soft: rgba(113, 128, 150, 0.18);
  --neutral-text: #a5b3c6;

  --skeleton-base: #0b1d2e;
  --skeleton-shine: rgba(55, 110, 180, 0.18);
  --overlay: rgba(2, 7, 13, 0.62);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

/* ====================================================== 2. BASE + SHELL === */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.app {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
  transition: grid-template-columns var(--duration-base) var(--ease);
}
.app[data-sidebar="collapsed"] { grid-template-columns: var(--sidebar-collapsed) minmax(0, 1fr); }

.app-body { display: flex; flex-direction: column; min-width: 0; }

.app-content {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-6) var(--space-8) var(--space-12);
}

/* ================================================== 3. NAVIGATION SHELL === */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--nav-bg);
  border-right: 1px solid var(--nav-border);
  overflow: hidden;
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--topbar-height);
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--nav-border);
  flex-shrink: 0;
}
.sidebar__brand {
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease);
}
.sidebar__brand:hover { background: var(--nav-bg-hover); text-decoration: none; }

.sidebar__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
/* The mark is a vector: it renders from the same file at 1x, 2x and 3x. */
.slb-logo { display: block; height: auto; }
.sidebar__logo .slb-logo { width: 46px; }

/* Hairline that keeps the company mark visually separate from the product name. */
.sidebar__divider {
  width: 1px;
  height: 22px;
  flex-shrink: 0;
  background: var(--nav-border);
}
.sidebar__product {
  display: flex; flex-direction: column; min-width: 0;
}
.sidebar__product strong {
  color: var(--nav-text-strong);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.sidebar__product span {
  color: var(--nav-text);
  font-size: var(--text-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sidebar__nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) var(--space-3);
  scrollbar-width: thin;
}
.sidebar__nav::-webkit-scrollbar { width: 6px; }
.sidebar__nav::-webkit-scrollbar-thumb { background: var(--nav-border); border-radius: var(--radius-pill); }

.nav-group + .nav-group { margin-top: var(--space-4); }
.nav-group__label {
  display: block;
  padding: 0 var(--space-3) var(--space-2);
  color: var(--nav-text);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.75;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  margin-bottom: 1px;
  border-radius: var(--radius-sm);
  color: var(--nav-text);
  /* A shade below body size: the longest entry, "Backload Equipment (BL)",
     has to fit beside its icon and its badge without being cut. */
  font-size: 0.875rem;
  font-weight: var(--weight-medium);
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
  position: relative;
}
.nav-item:hover { background: var(--nav-bg-hover); color: var(--nav-text-strong); text-decoration: none; }
.nav-item[aria-current="page"] {
  background: var(--nav-bg-active);
  color: var(--nav-text-strong);
  font-weight: var(--weight-semibold);
}
.nav-item[aria-current="page"] .nav-item__icon { opacity: 1; color: var(--slb-blue-400); }
.nav-item[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 20px;
  transform: translateY(-50%);
  border-radius: 0 2px 2px 0;
  background: var(--slb-blue-400);
}
.nav-item > span:not(.nav-item__icon) {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
}
.nav-item__icon {
  flex-shrink: 0;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0.9;
}
.nav-item__icon svg { width: 18px; height: 18px; }
.nav-item__count {
  margin-left: auto;
  flex-shrink: 0;
  min-width: 19px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--danger);
  color: #fff;
  font-size: 10.5px;
  line-height: 1.5;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.nav-group__label {
  font-size: 10px;
  letter-spacing: 0.12em;
  opacity: 0.6;
}

.sidebar__footer {
  flex-shrink: 0;
  border-top: 1px solid var(--nav-border);
  padding: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.sidebar__user { display: flex; flex-direction: column; min-width: 0; }
.sidebar__user strong {
  color: var(--nav-text-strong); font-size: var(--text-sm);
  font-weight: var(--weight-semibold); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.sidebar__user span { color: var(--nav-text); font-size: var(--text-caption); }

/* Collapsed state --------------------------------------------------------- */
.app[data-sidebar="collapsed"] .sidebar__divider,
.app[data-sidebar="collapsed"] .sidebar__product,
.app[data-sidebar="collapsed"] .nav-group__label,
.app[data-sidebar="collapsed"] .nav-item span:not(.nav-item__icon):not(.nav-item__count),
.app[data-sidebar="collapsed"] .sidebar__user { display: none; }
.app[data-sidebar="collapsed"] .nav-item { justify-content: center; padding-inline: 0; }
.app[data-sidebar="collapsed"] .sidebar__brand { justify-content: center; padding-inline: 0; }
.app[data-sidebar="collapsed"] .sidebar__footer { justify-content: center; }
.app[data-sidebar="collapsed"] .nav-item:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 10px);
  padding: var(--space-1) var(--space-2);
  background: var(--slb-navy-800);
  color: var(--nav-text-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-md);
  z-index: 40;
}

/* Topbar ------------------------------------------------------------------ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: var(--topbar-height);
  padding: 0 var(--space-6);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}
.topbar__search { position: relative; flex: 1; max-width: 460px; }
.topbar__search svg {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--text-muted); pointer-events: none;
}
.topbar__search input[type="search"] { padding-left: 38px; padding-right: 62px; }
.topbar__search-trigger {
  width: 100%; min-height: 38px; padding: 0 62px 0 38px;
  display: flex; align-items: center; text-align: left;
  color: var(--text-muted); background: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  font: inherit; cursor: text; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.topbar__search-trigger:hover,
.topbar__search-trigger:focus-visible {
  color: var(--text-secondary); border-color: var(--primary); outline: 0;
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.topbar__search kbd {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  padding: 2px 6px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg-inset); color: var(--text-muted);
  font-family: var(--font-mono); font-size: var(--text-caption);
}
.topbar__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }

.icon-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  position: relative;
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.icon-button:hover { background: var(--bg-hover); color: var(--text-primary); }
.icon-button svg { width: 18px; height: 18px; }
.icon-button__dot {
  position: absolute; top: 6px; right: 6px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--danger); color: #fff;
  font-size: 10px; font-weight: var(--weight-bold);
  display: inline-flex; align-items: center; justify-content: center;
}

.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.sidebar .avatar { background: rgba(255,255,255,0.1); color: var(--nav-text-strong); }

/* ================================================= 4. CORE PRIMITIVES ==== */

/* Page header ------------------------------------------------------------- */
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.page-head__title {
  font-size: var(--text-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}
.page-head__description {
  margin-top: var(--space-1);
  color: var(--text-secondary);
  max-width: 70ch;
}
.page-head__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.breadcrumb {
  display: flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--text-link); }
.breadcrumb__sep { opacity: 0.5; }

/* Buttons ----------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 38px;
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease),
              transform var(--duration-fast) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

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

.btn--secondary { background: var(--bg-surface); border-color: var(--border-strong); color: var(--text-primary); }
.btn--secondary:hover { background: var(--bg-hover); }

.btn--ghost { background: transparent; color: var(--text-secondary); }
.btn--ghost:hover { background: var(--bg-hover); color: var(--text-primary); }

.btn--danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn--danger:hover { filter: brightness(0.94); }

/* A destructive action that sits inside a card next to ordinary ones. It reads
   as red - icon and label both - without shouting like a solid red button. */
.btn--ghost-danger { background: transparent; border-color: transparent; color: var(--danger-text); }
.btn--ghost-danger svg { color: var(--danger); }
.btn--ghost-danger:hover {
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
  color: var(--danger-text);
}
.btn--ghost-danger:hover svg { color: var(--danger-text); }

.btn--success { background: var(--success); border-color: var(--success); color: #fff; }
.btn--success:hover { filter: brightness(0.94); }

.btn--sm { min-height: 30px; padding: 0 var(--space-3); font-size: var(--text-sm); }
.btn--lg { min-height: 44px; padding: 0 var(--space-6); }
.btn--block { width: 100%; }

.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 16px; height: 16px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
  color: var(--accent-text);
}
.btn--secondary.is-loading::after, .btn--ghost.is-loading::after { color: var(--text-secondary); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Cards ------------------------------------------------------------------- */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: var(--space-5); }
.card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
}
.card__title { font-size: var(--text-title); font-weight: var(--weight-semibold); }
.card__subtitle { color: var(--text-muted); font-size: var(--text-sm); margin-top: 2px; }
.card__body { padding: var(--space-5); }
.card__body--flush { padding: 0; }
.card__foot {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
  /* Wraps rather than pushing the card wider than the screen on a phone. */
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2);
  background: var(--bg-subtle);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.stack { display: flex; flex-direction: column; gap: var(--space-5); }
.row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.spacer { flex: 1; }

/* Forms ------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.field__label {
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.field__label .required { color: var(--danger); margin-left: 2px; }
/* The hidden attribute has to win over a component's own display rule. */
[hidden] { display: none !important; }

.field__hint { font-size: var(--text-sm); color: var(--text-muted); }
.field__error { font-size: var(--text-sm); color: var(--danger-text); display: flex; align-items: center; gap: var(--space-1); }

/* The well / rig / location a job inherited from its call-out - read, not typed. */
.callout-summary {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  color: var(--text-primary);
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="search"],
select, textarea {
  width: 100%;
  min-height: 38px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--text-body);
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
textarea { min-height: 96px; resize: vertical; line-height: var(--leading-normal); }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--space-8);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
input[readonly], input[disabled], select[disabled], textarea[disabled] {
  background: var(--bg-inset); color: var(--text-muted); cursor: not-allowed;
}
.input-group { display: flex; gap: var(--space-2); align-items: center; }
.char-count { font-size: var(--text-caption); color: var(--text-muted); text-align: right; }

.check {
  display: inline-flex; align-items: center; gap: var(--space-2);
  cursor: pointer; user-select: none;
  min-height: 32px;
}
.check input[type="checkbox"], .check input[type="radio"] {
  width: 18px; height: 18px; margin: 0; flex-shrink: 0;
  accent-color: var(--accent); cursor: pointer;
}
.check--card {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  transition: border-color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}
.check--card:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.check--card:has(input:checked) { border-color: var(--accent); background: var(--bg-selected); }
.check--card:has(input:disabled) { opacity: 0.62; cursor: not-allowed; background: var(--bg-inset); }

.segmented {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--bg-inset); border-radius: var(--radius-sm);
}
.segmented a, .segmented button {
  padding: var(--space-1) var(--space-3);
  border: 0; border-radius: 5px;
  background: transparent; color: var(--text-secondary);
  font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium);
  cursor: pointer;
}
.segmented a:hover, .segmented button:hover { color: var(--text-primary); text-decoration: none; }
.segmented [aria-pressed="true"], .segmented .is-active {
  background: var(--bg-surface); color: var(--text-primary); box-shadow: var(--shadow-sm);
}

/* Filter bar -------------------------------------------------------------- */
.filters {
  display: grid;
  grid-template-columns: minmax(200px, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
  align-items: end;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
}
.filters .field { margin-bottom: 0; }
/*
 * Apply and Clear sit on their own line: with six filters on a page they were
 * being squeezed into a 150px track and clipped. Their own row always fits.
 */
.filters__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); grid-column: 1 / -1; justify-content: flex-end; }

/* Badges / status --------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  line-height: 1.6;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge svg { width: 12px; height: 12px; flex-shrink: 0; }
.badge--success { background: var(--success-soft); color: var(--success-text); border-color: color-mix(in srgb, var(--success) 26%, transparent); }
.badge--warning { background: var(--warning-soft); color: var(--warning-text); border-color: color-mix(in srgb, var(--warning) 26%, transparent); }
.badge--danger  { background: var(--danger-soft);  color: var(--danger-text);  border-color: color-mix(in srgb, var(--danger) 26%, transparent); }
.badge--info    { background: var(--info-soft);    color: var(--info-text);    border-color: color-mix(in srgb, var(--info) 26%, transparent); }
.badge--neutral { background: var(--neutral-soft); color: var(--neutral-text); border-color: color-mix(in srgb, var(--neutral) 26%, transparent); }

.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: var(--text-caption);
  font-family: var(--font-mono);
}

/* Tables ------------------------------------------------------------------ */
.table-wrap { width: 100%; overflow-x: auto; }
table.data {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
}
table.data thead th {
  position: sticky; top: 0; z-index: 2;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}
table.data thead th a { color: inherit; display: inline-flex; align-items: center; gap: 4px; }
table.data tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text-primary);
  white-space: nowrap;
}
/* Only free-text columns wrap; identifiers, dates and serials stay on one line. */
table.data tbody td.wrap,
table.data tbody td.cell-muted:not(.cell-mono) { white-space: normal; }
table.data tbody td .cell-stack { white-space: normal; }
table.data tbody tr { transition: background var(--duration-fast) var(--ease); }
table.data tbody tr:hover { background: var(--bg-hover); }
table.data tbody tr[data-selected="true"] { background: var(--bg-selected); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.numeric, table.data th.numeric { text-align: right; font-variant-numeric: tabular-nums; }
table.data td.actions { text-align: right; white-space: nowrap; }

/*
 * A wide table scrolls sideways, but the action it exists for must never scroll
 * out of reach: the last column stays pinned to the right edge.
 */
table.data.sticky-actions th.actions,
table.data.sticky-actions td.actions {
  position: sticky;
  right: 0;
  z-index: 1;
  background: var(--bg-surface);
  box-shadow: -8px 0 8px -8px rgba(16, 28, 46, 0.25);
}
table.data.sticky-actions thead th.actions { z-index: 3; background: var(--bg-subtle); }
table.data.sticky-actions tbody tr:hover td.actions { background: var(--bg-hover); }

/* An inline editor that opens under its own row, so nobody loses their place. */
table.data tr.row-panel > td {
  background: var(--bg-subtle);
  border-top: 0;
  padding: var(--space-4);
  white-space: normal;
}
.cell-strong { font-weight: var(--weight-semibold); color: var(--text-primary); }
.cell-muted { color: var(--text-muted); font-size: var(--text-sm); }
.cell-mono { font-family: var(--font-mono); font-size: var(--text-sm); }
.cell-stack { display: flex; flex-direction: column; gap: 2px; }
/* Free text in a dense table: one line, cut cleanly, full text on hover. */
.cell-clip { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }

.pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border);
  color: var(--text-muted); font-size: var(--text-sm);
}
.pagination__pages { display: flex; gap: var(--space-1); }
.pagination__pages a, .pagination__pages span {
  min-width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}
.pagination__pages a:hover { background: var(--bg-hover); text-decoration: none; }
.pagination__pages [aria-current="page"] {
  background: var(--accent); border-color: var(--accent); color: var(--accent-text);
  font-weight: var(--weight-semibold);
}

/* Action menu ------------------------------------------------------------- */
.menu { position: relative; display: inline-block; }
.menu__panel {
  position: absolute; right: 0; top: calc(100% + 4px);
  min-width: 200px; padding: var(--space-1);
  background: var(--bg-surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 40;
  display: none;
}
.menu[data-open="true"] .menu__panel { display: block; animation: menu-in var(--duration-fast) var(--ease); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.menu__item {
  display: flex; align-items: center; gap: var(--space-2);
  width: 100%; padding: var(--space-2) var(--space-3);
  border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-primary);
  font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer;
}
.menu__item:hover { background: var(--bg-hover); text-decoration: none; }
.menu__item svg { width: 15px; height: 15px; color: var(--text-muted); }
.menu__item--danger { color: var(--danger-text); }
.menu__sep { height: 1px; margin: var(--space-1) 0; background: var(--border); }

/* ==================================================== 5. UI PATTERNS ===== */

/* KPI cards --------------------------------------------------------------- */
.kpi {
  display: block;
  padding: var(--space-4) var(--space-5);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
  position: relative;
  overflow: hidden;
}
a.kpi:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-1px); }
.kpi::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--tone, var(--accent)); opacity: 0.9;
}
.kpi--success { --tone: var(--success); }
.kpi--warning { --tone: var(--warning); }
.kpi--danger  { --tone: var(--danger); }
.kpi--info    { --tone: var(--info); }
.kpi--neutral { --tone: var(--neutral); }
.kpi__label {
  display: flex; align-items: center; gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.kpi__value {
  margin-top: var(--space-2);
  font-size: var(--text-metric);
  font-weight: var(--weight-semibold);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.kpi__meta { margin-top: var(--space-1); color: var(--text-muted); font-size: var(--text-sm); }

/* Stepper ----------------------------------------------------------------- */
.stepper {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.step { display: flex; align-items: center; gap: var(--space-3); flex: 0 1 auto; min-width: 0; }
.step__marker {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: var(--bg-surface);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.step__text { display: flex; flex-direction: column; min-width: 0; }
.step__name {
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--text-secondary); white-space: nowrap;
}
.step__hint { font-size: var(--text-caption); color: var(--text-muted); white-space: nowrap; }
.step__line { flex: 1 1 12px; height: 2px; background: var(--border); border-radius: 2px; min-width: 12px; }
.step[data-state="current"] .step__marker { border-color: var(--accent); background: var(--accent); color: var(--accent-text); }
.step[data-state="current"] .step__name { color: var(--text-primary); }
.step[data-state="done"] .step__marker { border-color: var(--success); background: var(--success); color: #fff; }
.step[data-state="done"] .step__name { color: var(--text-primary); }
.step[data-state="done"] + .step__line { background: var(--success); }

/* Timeline ---------------------------------------------------------------- */
.timeline { position: relative; padding-left: var(--space-6); }
.timeline::before {
  content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px;
  width: 2px; background: var(--border);
}
.timeline__item { position: relative; padding-bottom: var(--space-5); }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__dot {
  position: absolute; left: calc(-1 * var(--space-6) + 4px); top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg-surface);
  border: 2px solid var(--border-strong);
}
.timeline__item[data-tone="success"] .timeline__dot { border-color: var(--success); background: var(--success); }
.timeline__item[data-tone="warning"] .timeline__dot { border-color: var(--warning); background: var(--warning); }
.timeline__item[data-tone="danger"] .timeline__dot { border-color: var(--danger); background: var(--danger); }
.timeline__item[data-tone="info"] .timeline__dot { border-color: var(--info); background: var(--info); }
.timeline__title { font-size: var(--text-body); font-weight: var(--weight-medium); }
.timeline__meta { color: var(--text-muted); font-size: var(--text-sm); margin-top: 2px; }

/* Notices / alerts -------------------------------------------------------- */
.notice {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  margin-bottom: var(--space-4);
}
.notice svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.notice__title { font-weight: var(--weight-semibold); }
.notice__body { color: var(--text-secondary); font-size: var(--text-sm); }
.notice--success { border-left-color: var(--success); background: var(--success-soft); }
.notice--success svg { color: var(--success); }
.notice--warning { border-left-color: var(--warning); background: var(--warning-soft); }
.notice--warning svg { color: var(--warning); }
.notice--error, .notice--danger { border-left-color: var(--danger); background: var(--danger-soft); }
.notice--error svg, .notice--danger svg { color: var(--danger); }
.notice--info { border-left-color: var(--info); background: var(--info-soft); }
.notice--info svg { color: var(--info); }

/* Toasts ------------------------------------------------------------------ */
.toasts {
  position: fixed; right: var(--space-5); bottom: var(--space-5);
  z-index: 90; display: flex; flex-direction: column; gap: var(--space-2);
  max-width: 380px;
}
.toast {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface-raised);
  border: 1px solid var(--border);
  border-left: 3px solid var(--tone, var(--accent));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  animation: toast-in var(--duration-slow) var(--ease);
}
.toast--success { --tone: var(--success); }
.toast--error { --tone: var(--danger); }
.toast--warning { --tone: var(--warning); }
.toast--info { --tone: var(--info); }
.toast__close { margin-left: auto; background: none; border: 0; color: var(--text-muted); cursor: pointer; font-size: 16px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Drawer + modal ---------------------------------------------------------- */
.scrim {
  position: fixed; inset: 0; z-index: 60;
  background: var(--overlay);
  animation: fade-in var(--duration-base) var(--ease);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 70;
  width: min(560px, 100%);
  display: flex; flex-direction: column;
  background: var(--bg-surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  animation: drawer-in var(--duration-slow) var(--ease);
}
@keyframes drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer__head, .modal__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
}
.drawer__body { flex: 1; overflow-y: auto; padding: var(--space-5); }
.drawer__foot, .modal__foot {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: var(--space-2);
}

.modal {
  position: fixed; z-index: 70;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 32px));
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: modal-in var(--duration-base) var(--ease);
}
@keyframes modal-in {
  from { opacity: 0; transform: translate(-50%, -48%) scale(0.98); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.modal__body { padding: var(--space-5); }

/* Tabs -------------------------------------------------------------------- */
.tabs {
  display: flex; gap: var(--space-1);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  padding: 0 var(--space-5);
}
.tabs a {
  padding: var(--space-3) var(--space-3);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.tabs a:hover { color: var(--text-primary); text-decoration: none; }
.tabs a[aria-current="page"] { color: var(--text-link); border-bottom-color: var(--accent); }
.tabs__count {
  margin-left: 6px; padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--bg-inset); color: var(--text-muted);
  font-size: var(--text-caption);
}

/* Definition list --------------------------------------------------------- */
.details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-4) var(--space-5);
}
.details__item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.details__label {
  font-size: var(--text-label); font-weight: var(--weight-semibold);
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted);
}
.details__value { font-size: var(--text-body); color: var(--text-primary); word-break: break-word; }

/* Empty + loading --------------------------------------------------------- */
.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3); padding: var(--space-12) var(--space-5);
  text-align: center; color: var(--text-muted);
}
.empty__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--bg-inset); color: var(--text-muted);
}
.empty__icon svg { width: 22px; height: 22px; }
.empty__title { color: var(--text-primary); font-weight: var(--weight-semibold); font-size: var(--text-body); }
.empty__text { max-width: 46ch; font-size: var(--text-sm); }

.skeleton {
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 37%, var(--skeleton-base) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }
.skeleton--text { height: 12px; margin: 6px 0; }
.skeleton--row { height: 44px; margin-bottom: 1px; }

/* Upload ------------------------------------------------------------------ */
.upload {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-8) var(--space-5);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}
.upload:hover, .upload.is-dragging { border-color: var(--accent); background: var(--bg-selected); }
.upload input[type="file"] { display: none; }
.upload__icon { color: var(--text-muted); }
.upload__title { font-weight: var(--weight-medium); }
.upload__hint { font-size: var(--text-sm); color: var(--text-muted); }

.file-chip {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}
.file-chip__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent);
}
.file-chip__meta { color: var(--text-muted); font-size: var(--text-sm); }

/* Selection summary bar --------------------------------------------------- */
.selection-bar {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: var(--bg-surface-raised);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 16px rgba(7, 21, 35, 0.08);
}
.selection-bar strong { font-variant-numeric: tabular-nums; }

/* Login ------------------------------------------------------------------- */
.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: var(--bg-canvas);
}
.auth__brandside {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--space-10);
  background:
    radial-gradient(1000px 600px at 15% -10%, rgba(47, 111, 240, 0.28), transparent 60%),
    linear-gradient(160deg, var(--slb-navy-900), var(--slb-navy-950));
  color: #fff;
  overflow: hidden;
}
.auth__brandside::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 30% 40%, #000 0%, transparent 72%);
  pointer-events: none;
}
.auth__tagline { font-size: 2rem; font-weight: var(--weight-semibold); line-height: 1.2; max-width: 18ch; }
.auth__points { display: flex; flex-direction: column; gap: var(--space-3); color: #b9c8dc; font-size: var(--text-sm); position: relative; }
.auth__panel { display: flex; align-items: center; justify-content: center; padding: var(--space-8); }
.auth__form { width: min(400px, 100%); }

/* ============================================ 6. RESPONSIVE + A11Y ======= */
.sidebar__scrim { display: none; }

@media (max-width: 1180px) {
  .app-content { padding: var(--space-5) var(--space-5) var(--space-10); }
}

@media (max-width: 1024px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 80;
    width: var(--sidebar-width);
    transform: translateX(-100%);
    transition: transform var(--duration-base) var(--ease);
  }
  .app[data-mobile-nav="open"] .sidebar { transform: none; }
  .app[data-mobile-nav="open"] .sidebar__scrim {
    display: block; position: fixed; inset: 0; z-index: 75; background: var(--overlay);
  }
  .topbar__search { max-width: none; }
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth__brandside { display: none; }
}

@media (max-width: 1400px) {
  .step__hint { display: none; }
}

@media (max-width: 900px) {
  /* Four KPI cards wrap to an orphaned 3+1 at tablet width; 2x2 reads better. */
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  :root { --text-display: 1.5rem; --text-metric: 1.625rem; }
  .app-content { padding: var(--space-4) var(--space-4) var(--space-8); }
  /* On a phone every KPI row becomes a single column, so nothing is cut off. */
  .grid--4, .grid--3, .grid--2 { grid-template-columns: minmax(0, 1fr); }
  .card__foot { justify-content: stretch; }
  .card__foot .btn, .card__foot form, .card__foot .row { width: 100%; }
  .card__foot .row .btn { flex: 1 1 auto; }
  .page-head { flex-direction: column; align-items: stretch; }
  .page-head__actions .btn { flex: 1; }
  .filters { grid-template-columns: minmax(0, 1fr); }
  .card__head { flex-direction: column; align-items: flex-start; }
  .toasts { left: var(--space-4); right: var(--space-4); max-width: none; }

  /* Dense operational tables become readable stacked rows on phones. */
  table.data.responsive thead { display: none; }
  table.data.responsive tbody tr {
    display: block; padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
  }
  table.data.responsive tbody td {
    display: flex; justify-content: space-between; gap: var(--space-4);
    padding: var(--space-1) 0; border: 0; text-align: right;
  }
  table.data.responsive tbody td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: var(--text-label);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: left;
  }
  table.data.responsive td.actions { justify-content: flex-end; }
}

@media print {
  .sidebar, .topbar, .page-head__actions, .filters__actions, .selection-bar { display: none !important; }
  .app { grid-template-columns: minmax(0, 1fr); }
  .card { break-inside: avoid; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================ 7. OPERATIONS COMMAND CENTER ==
   The dashboard, and only the dashboard. Everything here is scoped under .cc
   so no other page's layout can be affected by it.

   Density is the point: a shift manager reads this standing up, so cards are
   compact, numbers are tabular, and nothing is bigger than the information
   inside it.
   ========================================================================== */

.cc {
  --cc-gap: 14px;
  --cc-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: var(--cc-gap);
}

/* A deeper canvas than the rest of the app: the command center reads as one
   dark surface with cards sitting on it. */
[data-theme="dark"] .cc { --cc-card: #101d2e; --cc-card-2: #0d1826; }
:root .cc, [data-theme="light"] .cc { --cc-card: var(--bg-surface); --cc-card-2: var(--bg-subtle); }

.cc .card {
  background: var(--cc-card);
  border-radius: var(--cc-radius);
  overflow: hidden;
}
.cc .card + .card { margin-top: 0; }
.cc .card__head--tight { padding: 11px var(--space-4); }
.cc .card__body--tight { padding: var(--space-4); }
.cc .card__title { font-size: 0.9375rem; font-weight: var(--weight-semibold); letter-spacing: -0.005em; line-height: 1.3; }
.cc .card__head--tight > div { min-width: 0; }
.cc .card__subtitle { font-size: var(--text-caption); }
.cc .card__link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--text-caption); color: var(--text-muted); white-space: nowrap;
}
.cc .card__link:hover { color: var(--accent); text-decoration: none; }
.cc .card__badge {
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--bg-inset); color: var(--text-secondary);
  font-size: var(--text-caption); font-weight: var(--weight-semibold);
}
.cc .card__badge--danger { background: var(--danger-soft); color: var(--danger-text); }
.cc .card__badge--warning { background: var(--warning-soft); color: var(--warning-text); }
.cc .card__badge--success { background: var(--success-soft); color: var(--success-text); }

/* ---------------------------------------------------------------- header -- */
.cc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.cc-head__greeting {
  font-size: 1.625rem; font-weight: var(--weight-semibold);
  line-height: 1.2; letter-spacing: -0.02em;
}
.cc-head__wave { font-size: 1.25rem; }
.cc-head__subtitle { color: var(--text-secondary); font-size: var(--text-body); margin-top: 2px; }
.cc-head__meta {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  margin-top: 6px; color: var(--text-muted); font-size: var(--text-sm);
}
.cc-dot { opacity: 0.45; }
.cc-head__sync { font-variant-numeric: tabular-nums; }

.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px 2px 8px;
  border-radius: var(--radius-pill);
  font-size: var(--text-caption); font-weight: var(--weight-semibold);
}
.status-pill__led { width: 7px; height: 7px; border-radius: 50%; background: currentColor; position: relative; }
.status-pill__led::after {
  content: ""; position: absolute; inset: -3px;
  border-radius: 50%; border: 1px solid currentColor; opacity: 0.5;
  animation: led-pulse 2.4s var(--ease) infinite;
}
@keyframes led-pulse {
  0% { transform: scale(0.7); opacity: 0.7; }
  70% { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
.status-pill--success { background: var(--success-soft); color: var(--success-text); }
.status-pill--warning { background: var(--warning-soft); color: var(--warning-text); }
.status-pill--danger { background: var(--danger-soft); color: var(--danger-text); }

/* --------------------------------------------------------------- filters -- */
.cc-filters {
  display: flex; align-items: flex-end; gap: var(--space-2); flex-wrap: wrap;
  padding: 10px var(--space-4);
  background: var(--cc-card);
  border: 1px solid var(--border);
  border-radius: var(--cc-radius);
}
.cc-filter { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cc-filter__label {
  font-size: 9.5px; font-weight: var(--weight-semibold);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
}
.cc-filter select,
.cc-filter input[type="date"] {
  min-height: 32px; padding: 0 26px 0 9px;
  font-size: var(--text-sm);
  max-width: 168px;
}
.cc-filter input[type="date"] { padding-right: 9px; }
.cc-filters__actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.cc-filters__actions .btn { min-height: 32px; }

/* ---------------------------------------------------------------- layout -- */
.cc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: var(--cc-gap); align-items: start; }
.cc-main { display: flex; flex-direction: column; gap: var(--cc-gap); min-width: 0; }
.cc-side { display: flex; flex-direction: column; gap: var(--cc-gap); min-width: 0; position: sticky; top: calc(var(--topbar-height) + var(--cc-gap)); }

.cc-row { display: grid; gap: var(--cc-gap); }
.cc-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cc-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cc-row--chart { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); }
.cc-row--board { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }

/* ------------------------------------------------------------- KPI cards -- */
.cc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cc-gap); }

.mkpi {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 6px;
  min-height: 132px;
  padding: 13px var(--space-4) 0;
  background: var(--cc-card);
  border: 1px solid var(--border);
  border-radius: var(--cc-radius);
  color: inherit;
  transition: transform var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease),
              box-shadow var(--duration-base) var(--ease);
}
.mkpi:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--tone); box-shadow: var(--shadow-md); }
.mkpi::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--tone, var(--accent));
}
.mkpi--info { --tone: var(--slb-blue-500); --tone-soft: rgba(47, 111, 240, 0.13); }
.mkpi--success { --tone: var(--success); --tone-soft: var(--success-soft); }
.mkpi--warning { --tone: var(--warning); --tone-soft: var(--warning-soft); }
.mkpi--danger { --tone: var(--danger); --tone-soft: var(--danger-soft); }
.mkpi--purple { --tone: #8b5cf6; --tone-soft: rgba(139, 92, 246, 0.15); }

.mkpi__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.mkpi__label {
  font-size: var(--text-caption); font-weight: var(--weight-semibold);
  letter-spacing: 0.045em; text-transform: uppercase; color: var(--text-secondary);
}
.mkpi__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 8px; background: var(--tone-soft); color: var(--tone);
}
.mkpi__value {
  font-size: 2.125rem; font-weight: var(--weight-bold); line-height: 1;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.mkpi__foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.mkpi__meta { color: var(--text-muted); font-size: var(--text-caption); }
.mkpi__split { display: flex; gap: var(--space-4); flex-wrap: wrap; padding-bottom: var(--space-4); }
.mkpi__split-item {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--text-secondary); font-size: var(--text-sm);
}
.mkpi__split-item b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.mkpi .spark { margin: auto -1px -1px; width: calc(100% + 2px); height: 34px; }

.trend {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px; border-radius: 5px;
  font-size: var(--text-caption); font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}
.trend--up { background: var(--success-soft); color: var(--success-text); }
.trend--down { background: var(--danger-soft); color: var(--danger-text); }
.trend--flat { background: var(--neutral-soft); color: var(--neutral-text); }

.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; background: var(--neutral); }
.dot--success { background: var(--success); }
.dot--info { background: var(--slb-blue-500); }
.dot--accent { background: var(--accent); }
.dot--warning { background: var(--warning); }
.dot--amber { background: #f0a020; }
.dot--danger { background: var(--danger); }
.dot--danger-deep { background: #8f2018; }
.dot--purple { background: #8b5cf6; }
.dot--neutral { background: var(--neutral); }

/* -------------------------------------------------------- summary strip -- */
.cc-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  padding: 0;
}
.cc-strip__col { padding: 12px var(--space-4); border-right: 1px solid var(--border); min-width: 0; }
.cc-strip__col:last-child { border-right: 0; }
.cc-strip__title {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 9px;
  color: var(--text-secondary);
  font-size: 10.5px; font-weight: var(--weight-bold);
  letter-spacing: 0.07em; text-transform: uppercase;
}
.cc-strip__title svg { color: var(--accent); opacity: 0.85; }
.cc-strip__list li + li { margin-top: 1px; }
.cc-strip__list a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: 3px 5px; margin: 0 -5px;
  border-radius: 5px;
  color: var(--text-secondary); font-size: var(--text-sm);
  transition: background var(--duration-fast) var(--ease);
}
.cc-strip__list a:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; }
.cc-strip__list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-strip__list b { color: var(--text-primary); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.cc-strip__list b.is-zero { color: var(--text-muted); font-weight: var(--weight-regular); }

/* ------------------------------------------------------------- pipeline -- */
.pipeline { display: flex; align-items: stretch; gap: 4px; }
.pipeline__stage { display: flex; align-items: center; gap: 4px; flex: 1 1 0; min-width: 0; }
.pipeline__link {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  flex: 1 1 0; min-width: 0;
  padding: 12px 6px;
  border-radius: 10px;
  background: var(--bg-inset);
  color: var(--text-secondary);
  text-align: center;
  transition: background var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);
}
.pipeline__link:hover { background: var(--accent-soft); color: var(--accent); text-decoration: none; transform: translateY(-2px); }
.pipeline__count {
  font-size: 1.5rem; font-weight: var(--weight-bold); line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--text-primary);
}
.pipeline__link:hover .pipeline__count { color: var(--accent); }
.pipeline__icon { opacity: 0.6; }
.pipeline__label {
  font-size: 11px; line-height: 1.25; letter-spacing: 0.01em;
  width: 100%;
  /* Two lines at most, then an ellipsis - never a column of single letters. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: normal; word-break: keep-all;
}
.pipeline__arrow { color: var(--text-muted); opacity: 0.4; flex-shrink: 0; }
.pipeline__total {
  margin-top: 10px; padding-top: 9px;
  border-top: 1px solid var(--border);
  color: var(--text-muted); font-size: var(--text-caption); text-align: center;
}

/* --------------------------------------------------------------- funnel -- */
.funnel li + li { margin-top: 9px; }
.funnel a {
  display: grid; grid-template-columns: 124px minmax(0, 1fr) auto 62px;
  align-items: center; gap: var(--space-2);
  padding: 3px 5px; margin: 0 -5px; border-radius: 6px;
  color: var(--text-secondary); font-size: var(--text-sm);
}
.funnel a:hover { background: var(--bg-hover); text-decoration: none; }
.funnel__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.funnel__value { text-align: right; color: var(--text-primary); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.funnel__value i { color: var(--text-muted); font-style: normal; font-weight: var(--weight-regular); font-size: var(--text-caption); }
.funnel__row.is-peak .funnel__label { color: var(--text-primary); font-weight: var(--weight-semibold); }
.funnel__flag:empty { display: none; }
.funnel__flag {
  padding: 0 5px; border-radius: 3px;
  background: var(--warning-soft); color: var(--warning-text);
  font-size: 9px; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.05em;
}

/* ------------------------------------------------------- equipment donut -- */
.equipment-health { display: flex; align-items: center; gap: var(--space-4); }
.donut-wrap { position: relative; flex-shrink: 0; width: 132px; height: 132px; }
.donut { width: 100%; height: 100%; }
.donut__track { fill: none; stroke: var(--bg-inset); stroke-width: 13; }
.donut__seg {
  fill: none; stroke-width: 13; stroke-linecap: butt;
  transition: stroke-width var(--duration-base) var(--ease);
}
.donut__seg:hover { stroke-width: 16; }
.donut__seg--success { stroke: var(--success); }
.donut__seg--info { stroke: var(--slb-blue-500); }
.donut__seg--warning { stroke: var(--warning); }
.donut__seg--amber { stroke: #f0a020; }
.donut__seg--danger { stroke: var(--danger); }
.donut__seg--danger-deep { stroke: #8f2018; }
.donut__seg--purple { stroke: #8b5cf6; }
.donut__centre {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; pointer-events: none;
}
.donut__centre strong {
  font-size: 1.375rem; font-weight: var(--weight-bold);
  line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.donut__centre span { margin-top: 3px; max-width: 82px; color: var(--text-muted); font-size: 9.5px; line-height: 1.2; }

.legend { flex: 1; min-width: 0; }
.legend li + li { margin-top: 1px; }
/* The grid lives on the link, never on the <li> that wraps it - otherwise the
   link lands in the 8px dot column and the label is clipped out of existence. */
.legend > li > a {
  display: grid; grid-template-columns: 8px minmax(0, 1fr) auto 38px;
  align-items: center; gap: 8px;
  color: var(--text-secondary); font-size: var(--text-sm);
}
.legend--inline li {
  display: flex; align-items: center; gap: 6px;
  color: var(--text-secondary); font-size: var(--text-sm);
}
.legend > li > a { padding: 3px 5px; margin: 0 -5px; border-radius: 5px; }
.legend > li > a:hover { background: var(--bg-hover); text-decoration: none; color: var(--text-primary); }
.legend span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.legend__pct { text-align: right; color: var(--text-muted); font-style: normal; font-size: var(--text-caption); }
.legend b { text-align: right; font-weight: var(--weight-semibold); }
.legend--inline { display: flex; gap: var(--space-4); margin-top: 6px; }
.legend--inline li { font-size: var(--text-caption); }

/* ---------------------------------------------------------------- charts -- */
.spark { display: block; }
.spark__line { fill: none; stroke: var(--tone, var(--accent)); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.spark__area { fill: var(--tone, var(--accent)); opacity: 0.11; stroke: none; }
.spark--info { --tone: var(--slb-blue-500); }
.spark--success { --tone: var(--success); }
.spark--purple { --tone: #8b5cf6; }
.spark--accent { --tone: var(--accent); }

.linechart { display: block; width: 100%; height: auto; }
.linechart__grid { stroke: var(--border); stroke-width: 1; }
.linechart__tick { fill: var(--text-muted); font-size: 9.5px; font-family: var(--font-sans); }
.linechart__line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.linechart__line--created { stroke: var(--slb-blue-500); }
.linechart__line--completed { stroke: var(--success); }
.linechart__dot--created { fill: var(--slb-blue-500); }
.linechart__dot--completed { fill: var(--success); }

.gauge { width: 100%; height: 100%; }
.gauge__track { fill: none; stroke: var(--bg-inset); stroke-width: 11; stroke-linecap: round; }
.gauge__value { fill: none; stroke-width: 11; stroke-linecap: round; stroke: var(--accent); }
.gauge--success .gauge__value { stroke: var(--success); }
.gauge--info .gauge__value { stroke: var(--slb-blue-500); }
.gauge--warning .gauge__value { stroke: var(--warning); }
.gauge--danger .gauge__value { stroke: var(--danger); }

.ring { width: 62px; height: 62px; }
.ring__track { fill: none; stroke: var(--bg-inset); stroke-width: 6; }
.ring__value { fill: none; stroke-width: 6; stroke-linecap: round; stroke: var(--accent); }
.ring--success .ring__value { stroke: var(--success); }
.ring--info .ring__value { stroke: var(--slb-blue-500); }
.ring--accent .ring__value { stroke: var(--accent); }
.ring__text { fill: var(--text-primary); font-size: 15px; font-weight: 700; font-family: var(--font-sans); }

.bar { display: block; width: 100%; height: 8px; }
.bar__track { fill: var(--bg-inset); }
.bar__value { fill: var(--tone, var(--accent)); }
.bar--success { --tone: var(--success); }
.bar--info { --tone: var(--slb-blue-500); }
.bar--accent { --tone: var(--accent); }
.bar--warning { --tone: var(--warning); }
.bar--danger { --tone: var(--danger); }
.bar--purple { --tone: #8b5cf6; }
.bar--neutral { --tone: var(--neutral); }

/* ------------------------------------------------------ operations health -- */
.health { display: flex; flex-direction: column; align-items: center; padding-bottom: var(--space-3); }
.health__gauge { position: relative; width: 132px; height: 132px; }
.health__score {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.health__score strong {
  font-size: 2.25rem; font-weight: var(--weight-bold); line-height: 1;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.health__score span { color: var(--text-muted); font-size: var(--text-caption); margin-top: 2px; }
.health__label { margin-top: 4px; font-size: var(--text-body); font-weight: var(--weight-semibold); }
.health__label--success { color: var(--success-text); }
.health__label--info { color: var(--info-text); }
.health__label--warning { color: var(--warning-text); }
.health__label--danger { color: var(--danger-text); }
.health__hint { color: var(--text-muted); font-size: var(--text-caption); text-align: center; }

.factors { border-top: 1px solid var(--border); padding-top: 9px; }
.factors a {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 4px 5px; margin: 0 -5px; border-radius: 5px;
  color: var(--text-secondary); font-size: var(--text-sm);
}
.factors a:hover { background: var(--bg-hover); text-decoration: none; color: var(--text-primary); }
.factors span { flex: 1; }
.factors b { color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------ attention center -- */
.attention__row { border-bottom: 1px solid var(--border); }
.attention__row:last-child { border-bottom: 0; }
/*
 * Two lines rather than five columns: in a 370px side panel the issue text is
 * the part that must stay readable, so it gets the full width of the row and
 * the team and elapsed time sit alongside the reference instead of squeezing it.
 */
.attention a {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto 12px;
  grid-template-areas:
    "sev ref  age go"
    "sev issue team go";
  align-items: center; gap: 2px 9px;
  padding: 9px var(--space-4);
  color: inherit;
  transition: background var(--duration-fast) var(--ease);
}
.attention .sev { grid-area: sev; align-self: center; }
.attention__ref { grid-area: ref; }
.attention__issue { grid-area: issue; }
.attention__team { grid-area: team; justify-self: end; }
.attention__age { grid-area: age; justify-self: end; }
.attention__go { grid-area: go; align-self: center; }
.attention a:hover { background: var(--bg-hover); text-decoration: none; }
.attention__body { display: contents; }
.attention__ref {
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--text-primary); font-family: var(--font-mono);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.attention__issue {
  display: flex; align-items: center; gap: 5px;
  color: var(--text-muted); font-size: var(--text-caption);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.attention__icon { display: inline-flex; flex-shrink: 0; opacity: 0.8; }
.attention__team { color: var(--text-muted); font-size: var(--text-caption); white-space: nowrap; }
.attention__age {
  color: var(--text-secondary); font-size: var(--text-caption);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.attention__row--critical .attention__age { color: var(--danger-text); font-weight: var(--weight-semibold); }
.attention__row--warning .attention__age { color: var(--warning-text); }
.attention__go { color: var(--text-muted); opacity: 0.5; display: inline-flex; }

.sev {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 0; border-radius: 4px;
  font-size: 9px; font-weight: var(--weight-bold); letter-spacing: 0.05em;
}
.sev--critical { background: var(--danger-soft); color: var(--danger-text); }
.sev--warning { background: var(--warning-soft); color: var(--warning-text); }
.sev--info { background: var(--info-soft); color: var(--info-text); }

/* ------------------------------------------------------------- pills etc -- */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 8px; border-radius: 5px;
  font-size: var(--text-caption); font-weight: var(--weight-semibold);
}
.pill--healthy { background: var(--success-soft); color: var(--success-text); }
.pill--slow { background: var(--warning-soft); color: var(--warning-text); }
.pill--critical { background: var(--danger-soft); color: var(--danger-text); }
.pill--no-data { background: var(--neutral-soft); color: var(--neutral-text); }

.chip {
  display: inline-block; padding: 1px 8px; border-radius: var(--radius-pill);
  font-size: var(--text-caption); font-weight: var(--weight-medium); white-space: nowrap;
}
.chip--success { background: var(--success-soft); color: var(--success-text); }
.chip--warning { background: var(--warning-soft); color: var(--warning-text); }
.chip--danger { background: var(--danger-soft); color: var(--danger-text); }
.chip--info { background: var(--info-soft); color: var(--info-text); }
.chip--neutral { background: var(--neutral-soft); color: var(--neutral-text); }

.cell-slow { color: var(--warning-text); font-weight: var(--weight-semibold); }
.cell-critical { color: var(--danger-text); font-weight: var(--weight-semibold); }
.cell-healthy { color: var(--success-text); }
.cell-num { text-align: right; font-variant-numeric: tabular-nums; }
.cc .data--compact th, .cc .data--compact td { padding: 7px var(--space-3); font-size: var(--text-sm); }
/* The side panel is narrow, so its table trades padding for a visible last column. */
.cc-side .data--compact th, .cc-side .data--compact td { padding: 7px 8px; font-size: 12px; }
.cc-side .data--compact th:first-child, .cc-side .data--compact td:first-child { padding-left: var(--space-4); }
.cc-side .data--compact th:last-child, .cc-side .data--compact td:last-child { padding-right: var(--space-4); }
.cc-side .data--compact th { font-size: 9px; letter-spacing: 0.04em; }
.cc-side .data--compact td:first-child { white-space: normal; line-height: 1.3; }
.cc-side .pill { padding: 1px 6px; font-size: 10px; }
.cc .data--compact th {
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted); font-weight: var(--weight-semibold);
}
.cc tr.is-clickable { cursor: pointer; }
.cc tr.is-clickable:hover { background: var(--bg-hover); }
.cell-clip { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-progress { min-width: 96px; }
.cell-progress .bar { height: 6px; margin-bottom: 2px; }
.cell-progress i { font-style: normal; font-size: 10px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------- small metric listings -- */
.metriclist li { border-bottom: 1px solid var(--border); }
.metriclist li:last-child { border-bottom: 0; }
.metriclist li > a, .metriclist li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  color: var(--text-secondary); font-size: var(--text-sm);
}
.metriclist li > a { padding: 5px 5px; margin: 0 -5px; border-radius: 5px; }
.metriclist li > a:hover { background: var(--bg-hover); text-decoration: none; color: var(--text-primary); }
.metriclist li:not(:has(> a)) { padding: 5px 0; }
.metriclist b { color: var(--text-primary); font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); }
.metriclist--split { margin-top: var(--space-3); border-top: 1px solid var(--border); padding-top: 4px; }

.glance li { border-bottom: 1px solid var(--border); }
.glance li:last-child { border-bottom: 0; }
.glance a {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 5px; margin: 0 -5px; border-radius: 5px;
  color: var(--text-secondary); font-size: var(--text-sm);
}
.glance a:hover { background: var(--bg-hover); text-decoration: none; color: var(--text-primary); }
.glance__icon { display: inline-flex; color: var(--text-muted); flex-shrink: 0; }
.glance__label { flex: 1; line-height: 1.3; }
.glance b { color: var(--text-primary); font-variant-numeric: tabular-nums; }

.bigstat { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.bigstat strong {
  font-size: 1.75rem; font-weight: var(--weight-bold);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.breakdown { margin-top: var(--space-3); }
.breakdown li {
  display: grid; grid-template-columns: 108px minmax(0, 1fr) 58px;
  align-items: center; gap: var(--space-2);
  padding: 3px 0;
  font-size: var(--text-sm); color: var(--text-secondary);
}
.breakdown__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.breakdown__value { text-align: right; color: var(--text-primary); font-variant-numeric: tabular-nums; font-size: var(--text-caption); }

/* ---------------------------------------------------- commissioning rings -- */
.rings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); text-align: center; }
.rings__item { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.rings__label { color: var(--text-muted); font-size: 9.5px; line-height: 1.2; }
.rings__item b { font-size: var(--text-sm); font-variant-numeric: tabular-nums; }

.delays { margin-top: var(--space-3); border-top: 1px solid var(--border); padding-top: var(--space-2); }
.delays__title {
  color: var(--text-muted); font-size: 9.5px; font-weight: var(--weight-bold);
  letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 5px;
}
.delays__row {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center; gap: var(--space-2);
  padding: 3px 5px; margin: 0 -5px; border-radius: 5px;
  font-size: var(--text-caption);
}
.delays__row:hover { background: var(--bg-hover); text-decoration: none; }
.elapsed { font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); }
.elapsed--warning { color: var(--warning-text); }
.elapsed--danger { color: var(--danger-text); }

/* -------------------------------------------------------------- activity -- */
.feed__row { display: flex; align-items: flex-start; gap: 9px; padding: 9px var(--space-4); border-bottom: 1px solid var(--border); }
.feed__row:last-child { border-bottom: 0; }
.feed__row--muted { opacity: 0.62; }
.feed__avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent);
  font-size: 10px; font-weight: var(--weight-bold);
}
.feed__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.feed__text { font-size: var(--text-sm); color: var(--text-primary); }
.feed__ref { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }
.feed__time { color: var(--text-muted); font-size: var(--text-caption); white-space: nowrap; flex-shrink: 0; }

.who { display: inline-flex; align-items: center; gap: 7px; }
.who__avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex-shrink: 0;
  border-radius: 50%; background: var(--bg-inset); color: var(--text-secondary);
  font-size: 9.5px; font-weight: var(--weight-bold);
}

/* --------------------------------------------------------- certification -- */
.certgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.certgrid__item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 11px var(--space-3);
  border: 1px solid var(--border);
  border-left: 3px solid var(--tone, var(--accent));
  border-radius: 8px;
  background: var(--cc-card-2);
  color: var(--text-secondary);
  transition: transform var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease);
}
.certgrid__item:hover { text-decoration: none; transform: translateY(-2px); }
.certgrid__item b {
  font-size: 1.5rem; font-weight: var(--weight-bold); line-height: 1.05;
  color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.certgrid__item span { font-size: var(--text-caption); }
.certgrid__item i { font-style: normal; font-size: 10px; color: var(--text-muted); }
.certgrid__item--success { --tone: var(--success); }
.certgrid__item--warning { --tone: var(--warning); }
.certgrid__item--amber { --tone: #f0a020; }
.certgrid__item--danger { --tone: var(--danger); }

/* ------------------------------------------------------------- conflicts -- */
.conflicts li { border-bottom: 1px solid var(--border); }
.conflicts li:last-child { border-bottom: 0; }
.conflicts a {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto;
  align-items: center; gap: var(--space-3);
  padding: 10px var(--space-4);
  color: inherit;
}
.conflicts a:hover { background: var(--bg-hover); text-decoration: none; }
.conflicts__serial { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.conflicts__serial b { font-size: var(--text-sm); }
.conflicts__serial span { font-size: var(--text-caption); }
.conflicts__jobs { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: var(--text-caption); }
.conflicts__jobs i { font-style: normal; color: var(--text-muted); }
.conflicts__jobs b { color: var(--text-primary); }

/* ------------------------------------------------------------- skeletons -- */
.cc.is-loading .mkpi__value,
.cc.is-loading .health__score strong { color: transparent; border-radius: 6px; background: var(--skeleton-base); }

/* ---------------------------------------------------------------- motion -- */
.cc .card, .cc .mkpi { animation: cc-enter 380ms var(--ease) both; }
.cc-layout .cc-main > *:nth-child(1) { animation-delay: 0ms; }
.cc-layout .cc-main > *:nth-child(2) { animation-delay: 40ms; }
.cc-layout .cc-main > *:nth-child(3) { animation-delay: 80ms; }
.cc-layout .cc-main > *:nth-child(4) { animation-delay: 120ms; }
@keyframes cc-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.cc .bar__value, .cc .gauge__value, .cc .ring__value, .cc .donut__seg {
  transition: width 420ms var(--ease), stroke-dasharray 520ms var(--ease);
}

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 1560px) {
  .cc-layout { grid-template-columns: minmax(0, 1fr) 340px; }
  .cc-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cc-strip__col:nth-child(3n) { border-right: 0; }
  .cc-strip__col:nth-child(-n+3) { border-bottom: 1px solid var(--border); }
}
@media (max-width: 1280px) {
  .cc-layout { grid-template-columns: minmax(0, 1fr); }
  .cc-side { position: static; }
  .cc-row--chart { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cc-row--chart > section:first-child { grid-column: 1 / -1; }
}
@media (max-width: 1024px) {
  .cc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-row--2, .cc-row--3, .cc-row--board { grid-template-columns: minmax(0, 1fr); }
  .cc-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-strip__col:nth-child(2n) { border-right: 0; }
  .cc-strip__col { border-bottom: 1px solid var(--border); }
}
@media (max-width: 720px) {
  .cc-kpis { grid-template-columns: minmax(0, 1fr); }
  .cc-row--2 { grid-template-columns: minmax(0, 1fr); }
  .cc-row--chart { grid-template-columns: minmax(0, 1fr); }
  .cc-strip { grid-template-columns: minmax(0, 1fr); }
  .cc-strip__col { border-right: 0; }
  .cc-head__greeting { font-size: 1.375rem; }
  .cc-filter select, .cc-filter input[type="date"] { max-width: none; width: 100%; }
  .cc-filter { flex: 1 1 140px; }
  .cc-filters__actions { width: 100%; margin-left: 0; }
  .certgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .equipment-health { flex-direction: column; align-items: stretch; }
  .donut-wrap { align-self: center; }
  .pipeline { overflow-x: auto; padding-bottom: 4px; }
  .pipeline__stage { min-width: 84px; }
  .attention a {
    grid-template-columns: 54px minmax(0, 1fr) auto;
    grid-template-areas: "sev ref age" "sev issue age";
  }
  .attention__team, .attention__go { display: none; }
  .conflicts a { grid-template-columns: minmax(0, 1fr); gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .cc .card, .cc .mkpi { animation: none; }
  .status-pill__led::after { animation: none; }
  .cc .bar__value, .cc .gauge__value, .cc .ring__value, .cc .donut__seg { transition: none; }
}

@media print {
  .cc-filters, .cc-head__sync, .attention__go { display: none !important; }
  .cc-layout { grid-template-columns: 1fr; }
  .cc .card { break-inside: avoid; }
}

/* A counter the background refresh has just changed, so the eye catches it. */
.cc [data-live].is-updated { animation: cc-updated 1.1s var(--ease); }
@keyframes cc-updated {
  0% { color: var(--accent); transform: scale(1.06); }
  100% { color: inherit; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .cc [data-live].is-updated { animation: none; } }

/* ========================================================================== 
   PHASE 2 · INDUSTRIAL MONITORING
   ========================================================================== */
.section-kicker,
.eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.data-stamp { color: var(--text-muted); font-size: var(--text-caption); }
.text-danger { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }
.live-dot {
  display: inline-block; width: 7px; height: 7px; margin-right: 6px;
  border-radius: 50%; background: #40d69a; box-shadow: 0 0 0 4px rgba(64,214,154,.12);
}

.monitor-hero {
  position: relative; min-height: 238px; margin-bottom: var(--space-5); overflow: hidden;
  border: 1px solid rgba(91,142,247,.25); border-radius: 18px; color: white;
  background: var(--slb-navy-900); box-shadow: var(--shadow-md);
}
.monitor-hero__media {
  position: absolute; inset: 0; background: url("img/phase2-monitoring-hero.png") center 57% / cover no-repeat;
  transform: scale(1.01); transition: transform 700ms var(--ease);
}
.monitor-hero:hover .monitor-hero__media { transform: scale(1.025); }
.monitor-hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,12,23,.98) 0%, rgba(4,17,33,.9) 37%, rgba(5,18,34,.28) 70%, rgba(5,18,34,.08) 100%); }
.monitor-hero__content { position: relative; z-index: 1; width: min(660px, 64%); padding: 34px 38px; }
.monitor-hero .eyebrow { color: #91b9ff; }
.monitor-hero h2 { margin: 0; max-width: 620px; font-size: clamp(1.55rem, 2.6vw, 2.35rem); line-height: 1.12; letter-spacing: -.035em; }
.monitor-hero p { max-width: 580px; margin: 12px 0 20px; color: #c5d4e6; line-height: 1.55; }
.monitor-hero__meta { display: flex; flex-wrap: wrap; gap: 10px 22px; color: #a8bad0; font-size: var(--text-sm); }
.monitor-hero__meta span { display: inline-flex; align-items: center; gap: 7px; }

.monitor-filterbar {
  display: flex; align-items: end; gap: 10px; margin-bottom: var(--space-5); padding: 10px;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  box-shadow: var(--shadow-sm); backdrop-filter: blur(14px);
}
.monitor-filterbar--sticky { position: sticky; top: calc(var(--topbar-height) + 8px); z-index: 35; }
.monitor-filterbar__label { display: flex; align-items: center; align-self: stretch; gap: 8px; padding: 0 10px; border-right: 1px solid var(--border); color: var(--text-secondary); font-size: var(--text-sm); }
.monitor-filterbar__label span { display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:var(--accent-soft); color:var(--accent); }
.monitor-select { display: grid; gap: 4px; min-width: 155px; }
.monitor-select > span,
.month-navigator label > span { padding-left: 3px; color: var(--text-muted); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.monitor-select select,
.monitor-select input,
.month-navigator input { height: 36px; min-width: 0; padding-block: 0; border-color: transparent; background: var(--bg-subtle); font-weight: 600; }
.filter-toggle { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px; border-radius: 8px; background: var(--bg-subtle); color: var(--text-secondary); font-size: var(--text-sm); cursor: pointer; }
.filter-toggle input { accent-color: var(--accent); }
.period-switch { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-subtle); }
.period-switch__item { min-height: 30px; padding: 6px 11px; border: 0; border-radius: 7px; color: var(--text-secondary); background: transparent; font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; text-decoration: none; }
.period-switch__item[aria-pressed="true"], .period-switch__item:hover { color: var(--accent); background: var(--bg-surface); box-shadow: var(--shadow-sm); }

.monitor-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: var(--space-5); }
.monitor-kpis .kpi { min-width: 0; }
.monitor-kpis .kpi__value { font-size: 1.7rem; }
.monitor-grid { display: grid; gap: 16px; margin-bottom: var(--space-5); }
.monitor-grid--overview { grid-template-columns: minmax(270px,.8fr) minmax(420px,1.35fr) minmax(360px,1.1fr); }
.monitor-grid--detail { grid-template-columns: minmax(0, 1.9fr) minmax(300px,.8fr); }
.monitor-grid--calendar { grid-template-columns: minmax(0, 1.8fr) minmax(280px,.65fr); }
.monitor-grid--generator { grid-template-columns: repeat(3, minmax(0,1fr)); }
.monitor-grid--company { grid-template-columns: minmax(270px,.7fr) minmax(0,1.7fr); }
.monitor-grid--company-lists { grid-template-columns: minmax(0,1.4fr) minmax(320px,.7fr); }
.monitor-grid--import { grid-template-columns: minmax(0,1.7fr) minmax(300px,.7fr); }
.monitor-card { min-width: 0; overflow: hidden; }
.monitor-card .card__head { padding-bottom: 12px; }
.chart-shell { width: 100%; height: 280px; }
.chart-shell--donut { height: 270px; }
.chart-shell--trend { height: 390px; }
.chart-shell--calendar { height: 390px; }
.chart-shell--timeline { height: clamp(320px, 48vw, 610px); }
.chart-shell.is-chart-loading { border-radius: 10px; background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 37%, var(--skeleton-base) 63%); background-size: 400% 100%; animation: skeleton 1.4s ease infinite; }

.alarm-clear-state { display: flex; align-items: center; gap: 14px; min-height: 150px; padding: 20px; border: 1px dashed color-mix(in srgb, var(--success) 35%, var(--border)); border-radius: 12px; background: var(--success-soft); }
.alarm-clear-state > span { display:grid; place-items:center; flex:0 0 auto; width:48px; height:48px; border-radius:50%; color:var(--success); background:var(--bg-surface); }
.alarm-clear-state strong { color: var(--success-text); }
.alarm-clear-state p { margin: 4px 0 0; color: var(--text-secondary); font-size: var(--text-sm); }
.alarm-list { display: grid; margin: 0 -16px -16px; }
.alarm-row { position: relative; display: grid; grid-template-columns: 4px minmax(130px,1fr) auto auto 16px; align-items: center; gap: 10px; min-height: 54px; padding: 8px 16px; border-top: 1px solid var(--border); color: inherit; text-decoration: none; transition: background var(--duration-base) var(--ease); }
.alarm-row:hover { background: var(--bg-hover); }
.alarm-row__tone { width: 4px; height: 34px; border-radius: 4px; background: var(--info); }
.alarm-row__tone--danger { background: var(--danger); }
.alarm-row__tone--warning { background: var(--warning); }
.alarm-row__main { display: grid; min-width: 0; }
.alarm-row__main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); }
.alarm-row__main span, .alarm-row__time { color: var(--text-muted); font-size: var(--text-caption); }
.alarm-row__value { font: 600 var(--text-sm)/1 var(--font-mono); }

.well-fleet { margin-bottom: var(--space-6); }
.well-card-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; padding: 0 16px 16px; }
.well-card { position:relative; display:grid; gap:10px; min-width:0; padding:16px; overflow:hidden; border:1px solid var(--border); border-radius:12px; color:inherit; background:linear-gradient(145deg,var(--bg-surface),var(--bg-subtle)); text-decoration:none; transition:transform var(--duration-base) var(--ease),border-color var(--duration-base) var(--ease),box-shadow var(--duration-base) var(--ease); }
.well-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb,var(--accent) 42%,var(--border)); box-shadow:var(--shadow-md); }
.well-card__signal { position:absolute; inset:0 auto 0 0; width:3px; background:var(--neutral); }
.well-card[data-status="running"] .well-card__signal { background:var(--success); box-shadow:0 0 18px var(--success); }
.well-card[data-status="shutdown"] .well-card__signal { background:var(--danger); }
.well-card[data-status="partial"] .well-card__signal { background:var(--warning); }
.well-card__head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.well-card__name { font-size:1.05rem; font-weight:700; letter-spacing:-.02em; }
.well-card__area { display:flex; align-items:center; gap:6px; color:var(--text-muted); font-size:var(--text-sm); }
.well-card__metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:11px 0; border-block:1px solid var(--border); }
.well-card__metrics span { display:grid; gap:3px; }
.well-card__metrics small { color:var(--text-muted); font-size:10px; text-transform:uppercase; }
.well-card__metrics strong { font-size:1rem; }
.well-card__foot { display:flex; justify-content:space-between; gap:8px; color:var(--text-muted); font-size:10px; }
.well-card__foot span:last-child { display:flex; align-items:center; gap:4px; color:var(--accent); font-weight:600; }

.well-identity { display:flex; align-items:center; gap:28px; margin-bottom:16px; padding:18px 22px; border:1px solid var(--border); border-left:4px solid var(--neutral); border-radius:14px; background:linear-gradient(115deg,var(--bg-surface),var(--bg-subtle)); box-shadow:var(--shadow-sm); }
.well-identity[data-status="running"] { border-left-color:var(--success); }
.well-identity[data-status="shutdown"] { border-left-color:var(--danger); }
.well-identity[data-status="partial"] { border-left-color:var(--warning); }
.well-identity__primary { display:flex; align-items:center; gap:14px; min-width:240px; margin-right:auto; }
.well-identity__pulse { flex:0 0 auto; width:14px; height:14px; border:3px solid var(--bg-surface); border-radius:50%; background:var(--neutral); box-shadow:0 0 0 4px var(--neutral-soft); }
.well-identity[data-status="running"] .well-identity__pulse { background:var(--success); box-shadow:0 0 0 4px var(--success-soft),0 0 20px color-mix(in srgb,var(--success) 55%,transparent); }
.well-identity[data-status="shutdown"] .well-identity__pulse { background:var(--danger); box-shadow:0 0 0 4px var(--danger-soft); }
.well-identity h2 { margin:0; font-size:1.55rem; }
.well-identity p { margin:3px 0 0; color:var(--text-muted); font-size:var(--text-sm); }
.well-identity__condition,.well-identity__stat { display:grid; gap:5px; min-width:100px; }
.well-identity__condition > span,.well-identity__stat > span { color:var(--text-muted); font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.well-identity__stat strong { font-size:1.35rem; }

.parameter-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin-bottom:16px; }
.parameter-card { position:relative; display:grid; gap:5px; min-width:0; padding:14px 15px; overflow:hidden; border:1px solid var(--border); border-radius:11px; color:inherit; text-align:left; background:var(--bg-surface); cursor:pointer; transition:all var(--duration-base) var(--ease); }
.parameter-card:hover,.parameter-card[aria-pressed="true"] { border-color:var(--accent); background:linear-gradient(145deg,var(--bg-surface),var(--accent-soft)); box-shadow:var(--shadow-sm); }
.parameter-card[aria-pressed="true"]::after { content:""; position:absolute; inset:auto 12px 0; height:2px; border-radius:2px; background:var(--accent); }
.parameter-card__label { color:var(--text-muted); font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.parameter-card__value { font-size:1.35rem; font-weight:700; letter-spacing:-.03em; }
.parameter-card__value small { margin-left:4px; color:var(--text-muted); font-size:.68rem; font-weight:600; }
.parameter-card__meta { overflow:hidden; color:var(--text-muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.parameter-card__spark { position:absolute; inset:auto 10px 7px auto; width:44px; height:14px; opacity:.45; }
.inline-empty { grid-column:1/-1; display:flex; align-items:center; gap:8px; padding:18px; border:1px dashed var(--border); border-radius:10px; color:var(--text-muted); }
.trend-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:28px; }
/* The parameter chooser: a tick per parameter, and the colour of the line it
   draws shown on the chip so the legend and the chart cannot disagree. */
.trend-legend { display:flex; flex-wrap:wrap; gap:8px; }
.trend-toolbar__lead { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; width:100%; margin-bottom:8px; }
.trend-toolbar__title { display:inline-flex; align-items:center; gap:6px; font-size:var(--text-sm); font-weight:600; color:var(--text-secondary); }

.trend-legend__item {
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 11px 5px 8px;
  border:1px solid var(--border); border-radius:999px;
  background:var(--bg-subtle);
  font:600 11px var(--font-sans); color:var(--text-secondary);
  cursor:pointer; user-select:none;
  transition:border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.trend-legend__item:hover { border-color:var(--border-strong); color:var(--text-primary); }
.trend-legend__item input { width:14px; height:14px; margin:0; accent-color:var(--series-color, var(--accent)); cursor:pointer; }
.trend-legend__item.is-on {
  color:var(--text-primary);
  border-color:var(--series-color, var(--accent));
  background:color-mix(in srgb, var(--series-color, var(--accent)) 14%, transparent);
}
.trend-legend__item.is-on span { position:relative; padding-left:12px; }
.trend-legend__item.is-on span::before {
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:7px; height:7px; border-radius:50%; background:var(--series-color, var(--accent));
}

.trend-legend__all {
  border:1px dashed var(--border-strong); border-radius:999px; padding:5px 11px;
  color:var(--text-muted); background:transparent; font:600 11px var(--font-sans); cursor:pointer;
}
.trend-legend__all:hover { color:var(--accent); border-color:var(--accent); }
.interaction-hint { color:var(--text-muted); font-size:10px; }
.analysis-list { display:grid; gap:9px; }
.analysis-item { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:9px; padding:11px; border:1px solid var(--border); border-radius:10px; background:var(--bg-subtle); }
.analysis-item__icon { display:grid; place-items:center; width:30px; height:30px; border-radius:8px; color:var(--accent); background:var(--accent-soft); }
.analysis-item strong { font-size:var(--text-sm); }
.analysis-item p { margin:3px 0 0; color:var(--text-muted); font-size:10px; line-height:1.4; }
.analysis-item__delta { font:700 11px var(--font-mono); color:var(--text-secondary); }
.analysis-note { display:flex; gap:6px; margin:12px 0 0; color:var(--text-muted); font-size:10px; }
.alarm-event-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; padding:0 16px 16px; }
.alarm-event { display:grid; grid-template-columns:9px minmax(0,1fr) auto; align-items:center; gap:10px; padding:12px; border:1px solid var(--border); border-radius:10px; color:inherit; text-align:left; background:var(--bg-subtle); cursor:pointer; }
.alarm-event:hover { border-color:var(--danger); }
.alarm-event__marker { width:8px; height:8px; border-radius:50%; background:var(--danger); box-shadow:0 0 0 4px var(--danger-soft); }
.alarm-event span:nth-child(2) { display:grid; }
.alarm-event small { color:var(--text-muted); }

.month-navigator { display:flex; align-items:end; gap:4px; }
.month-navigator label { display:grid; gap:4px; }
.custom-range-popover { position:relative; align-self:end; }
.custom-range-popover summary { min-height:36px; display:flex; align-items:center; gap:6px; padding:0 10px; border-radius:8px; color:var(--text-secondary); background:var(--bg-subtle); font-size:var(--text-sm); font-weight:600; cursor:pointer; list-style:none; }
.custom-range-popover > div { position:absolute; z-index:20; top:42px; right:0; display:grid; grid-template-columns:1fr 1fr; gap:8px; min-width:310px; padding:12px; border:1px solid var(--border); border-radius:10px; background:var(--bg-surface); box-shadow:var(--shadow-lg); }
.custom-range-popover label { display:grid; gap:4px; color:var(--text-muted); font-size:10px; }
.custom-range-popover button { grid-column:1/-1; }
.running-hero { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:14px; padding:18px 22px; border-radius:14px; color:white; background:radial-gradient(circle at 80% 0,rgba(47,111,240,.42),transparent 32%),linear-gradient(120deg,#061321,#102b49); }
.running-hero h2 { margin:0; font-size:1.5rem; }
.running-hero p { margin:4px 0 0; color:#a9bdd4; }
.running-hero .eyebrow { color:#81aef9; }
.running-hero__availability { display:grid; text-align:right; }
.running-hero__availability span,.running-hero__availability small { color:#a9bdd4; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.running-hero__availability strong { font-size:2rem; }
.heat-legend { display:flex; gap:8px; color:var(--text-muted); font-size:10px; }
.heat-legend span { display:flex; align-items:center; gap:4px; }
.heat-legend span::before { content:""; width:10px; height:10px; border-radius:3px; background:var(--bg-inset); }
.heat-legend [data-level="zero"]::before { background:var(--danger); }
.heat-legend [data-level="partial"]::before { background:var(--warning); }
.heat-legend [data-level="full"]::before { background:var(--success); }
.day-inspector__empty { display:grid; place-items:center; min-height:280px; padding:28px; color:var(--text-muted); text-align:center; }
.day-inspector__empty p { max-width:220px; }
.day-inspector__content { padding:12px 18px 18px; }
.day-gauge { display:grid; place-items:center; gap:7px; margin-bottom:16px; }
.day-gauge > span { display:grid; place-items:center; width:118px; height:118px; border-radius:50%; background:conic-gradient(var(--accent) var(--day-progress,0%),var(--bg-inset) 0); position:relative; }
.day-gauge > span::after { content:""; position:absolute; inset:9px; border-radius:50%; background:var(--bg-surface); }
.day-gauge strong { position:relative; z-index:1; font-size:1.45rem; }
.day-gauge small { color:var(--text-muted); text-transform:uppercase; font-size:10px; }
.day-inspector dl { display:grid; gap:0; margin:0; }
.day-inspector dl div { display:flex; justify-content:space-between; gap:8px; padding:9px 0; border-top:1px solid var(--border); }
.day-inspector dt { color:var(--text-muted); font-size:var(--text-sm); }
.day-inspector dd { margin:0; font-weight:600; }
.status-register__intro { margin:-4px 16px 15px; color:var(--text-secondary); font-size:var(--text-sm); }
.status-change-form { display:grid; grid-template-columns:180px minmax(260px,1fr) auto; align-items:end; gap:12px; padding:4px; }
.status-change-form label { display:grid; gap:5px; color:var(--text-muted); font-size:var(--text-sm); }

.generator-hero { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:14px; padding:24px 28px; border:1px solid rgba(47,111,240,.25); border-radius:16px; color:white; background:radial-gradient(circle at 85% 10%,rgba(60,130,255,.45),transparent 28%),linear-gradient(120deg,#061322,#0c2743 62%,#123a5e); overflow:hidden; }
.generator-hero h2 { margin:0; font-size:1.75rem; }
.generator-hero p { margin:7px 0 0; color:#aec1d6; }
.generator-hero .eyebrow { color:#80adf8; }
.generator-hero__metric { display:grid; flex:0 0 auto; min-width:170px; text-align:right; }
.generator-hero__metric span,.generator-hero__metric small { color:#a7bbd2; font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
.generator-hero__metric strong { font-size:2.4rem; }
.company-rail { display:flex; gap:10px; margin-bottom:14px; padding:2px 2px 8px; overflow-x:auto; scrollbar-width:thin; }
.company-card { display:grid; grid-template-columns:42px minmax(125px,1fr); grid-template-rows:auto auto auto; column-gap:10px; min-width:210px; padding:13px; border:1px solid var(--border); border-radius:12px; color:inherit; background:var(--bg-surface); text-decoration:none; transition:all var(--duration-base) var(--ease); }
.company-card:hover,.company-card[aria-current="page"] { border-color:var(--accent); box-shadow:var(--shadow-md); transform:translateY(-1px); }
.company-card > span:first-child,.company-card__monogram { grid-row:1/4; display:grid; place-items:center; width:40px; height:40px; border-radius:10px; color:var(--accent); background:var(--accent-soft); font-size:12px; font-weight:800; }
.company-card strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--text-sm); }
.company-card small { color:var(--text-muted); font-size:10px; }
.company-card__status { display:flex; gap:4px; margin-top:5px; }
.company-card__status i { padding:2px 5px; border-radius:999px; color:var(--text-secondary); background:var(--bg-inset); font:normal 700 9px var(--font-sans); }
.company-rail__empty { display:flex; align-items:center; gap:7px; padding:12px; color:var(--text-muted); font-size:var(--text-sm); }
.generator-reading-panel { margin-bottom:16px; }
.form-grid--3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:0 16px 16px; }
.field--full { grid-column:1/-1; }
.company-detail-hero { display:flex; align-items:center; gap:18px; margin-bottom:12px; padding:20px 22px; border-radius:14px; color:white; background:linear-gradient(120deg,#071726,#113452); }
.company-detail-hero__mark { display:grid; place-items:center; width:58px; height:58px; border:1px solid rgba(255,255,255,.18); border-radius:14px; color:#9fc2ff; background:rgba(47,111,240,.2); font-size:1.25rem; font-weight:800; }
.company-detail-hero h2 { margin:0; font-size:1.55rem; }
.company-detail-hero p { margin:4px 0 0; color:#a9bdd4; }
.company-detail-hero .eyebrow { color:#83aff8; }
.company-detail-hero__stats { display:flex; gap:22px; margin-left:auto; }
.company-detail-hero__stats span { display:grid; text-align:right; }
.company-detail-hero__stats small { color:#a9bdd4; font-size:9px; text-transform:uppercase; letter-spacing:.06em; }
.company-detail-hero__stats strong { font-size:1.35rem; }
.asset-pill-row { display:flex; gap:7px; margin-bottom:14px; padding-bottom:4px; overflow-x:auto; }
.asset-pill-row a { display:flex; align-items:center; gap:6px; flex:0 0 auto; padding:7px 11px; border:1px solid var(--border); border-radius:999px; color:var(--text-secondary); background:var(--bg-surface); text-decoration:none; font-size:var(--text-sm); font-weight:600; }
.asset-pill-row a[aria-current="page"],.asset-pill-row a:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.asset-pill__dot { width:7px;height:7px;border-radius:50%;background:var(--neutral); }
.asset-pill__dot[data-tone="success"] { background:var(--success); }.asset-pill__dot[data-tone="danger"]{background:var(--danger)}.asset-pill__dot[data-tone="warning"]{background:var(--warning)}
.generator-identity { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; padding:15px 18px; border:1px solid var(--border); border-radius:12px; background:var(--bg-surface); }
.generator-identity h2 { margin:0; }.generator-identity p{margin:3px 0 0;color:var(--text-muted)}
.maintenance-feed { display:grid; padding:0 16px 16px; }
.maintenance-feed article { display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:9px; padding:10px 0; border-top:1px solid var(--border); }
.maintenance-feed article > span:first-child { display:grid; place-items:center; width:28px;height:28px;border-radius:8px;color:var(--warning);background:var(--warning-soft); }
.maintenance-feed article div { display:grid; }.maintenance-feed small{color:var(--text-muted)}
.generator-status-timeline { margin:0 18px 16px; }

.import-steps { display:grid; grid-template-columns:repeat(6,1fr); gap:0; margin:0 0 16px; padding:0; list-style:none; }
.import-step { position:relative; display:grid; justify-items:center; gap:6px; color:var(--text-muted); font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
.import-step::before { content:""; position:absolute; z-index:0; top:15px; left:-50%; width:100%; height:1px; background:var(--border); }
.import-step:first-child::before { display:none; }
.import-step > span { z-index:1; display:grid; place-items:center; width:32px;height:32px;border:1px solid var(--border);border-radius:50%;background:var(--bg-surface); }
.import-step[data-state="complete"] > span { border-color:var(--success); color:var(--success); background:var(--success-soft); }
.import-step[data-state="current"] > span { border-color:var(--accent); color:white; background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.monitor-dropzone { display:grid; place-items:center; min-height:190px; margin:0 16px 14px; padding:24px; border:1.5px dashed var(--border-strong); border-radius:14px; text-align:center; background:linear-gradient(145deg,var(--bg-subtle),var(--bg-surface)); cursor:pointer; transition:all var(--duration-base) var(--ease); }
.monitor-dropzone:hover,.monitor-dropzone.is-dragging { border-color:var(--accent); background:var(--accent-soft); }
.monitor-dropzone input { position:absolute; width:1px;height:1px;opacity:0; }
.monitor-dropzone__icon { display:grid;place-items:center;width:58px;height:58px;margin-bottom:10px;border-radius:16px;color:var(--accent);background:var(--accent-soft); }
.monitor-dropzone span:last-child { margin-top:4px;color:var(--text-muted);font-size:var(--text-sm); }
.import-assurance { display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:0 16px 14px; }
.import-assurance > span { display:grid;grid-template-columns:24px 1fr;column-gap:7px;padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--bg-subtle); }
.import-assurance > span > svg { grid-row:1/3;color:var(--accent); }.import-assurance strong{font-size:var(--text-sm)}.import-assurance small{color:var(--text-muted);font-size:9px;line-height:1.35}
.import-upload-card form > .btn { margin:0 16px 16px; }
.contract-list { display:grid;padding:0 16px 16px; }
.contract-list > div { display:grid;grid-template-columns:70px minmax(0,1fr);column-gap:8px;padding:10px 0;border-top:1px solid var(--border); }
.contract-list > div > span { grid-row:1/3;color:var(--text-muted);font-size:9px;text-transform:uppercase; }.contract-list__required{color:var(--accent)!important;font-weight:700}.contract-list strong{font-size:var(--text-sm)}.contract-list small{color:var(--text-muted)}
.import-result__summary { display:grid;grid-template-columns:repeat(5,1fr);gap:1px;margin:0 16px 16px;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--border); }
.import-result__summary span { display:grid;gap:3px;padding:12px;background:var(--bg-subtle); }.import-result__summary small{color:var(--text-muted);font-size:9px;text-transform:uppercase}.import-result__summary strong{font-size:1.15rem}
.sheet-preview-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0 16px 16px; }
.sheet-preview { padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--bg-subtle); }
.sheet-preview__head { display:flex;align-items:center;gap:8px;margin-bottom:9px; }.sheet-preview__head>span{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;color:var(--success);background:var(--success-soft)}.sheet-preview__head div{display:grid}.sheet-preview__head small{color:var(--text-muted)}
.mapping-chips { display:flex;flex-wrap:wrap;gap:5px; }.mapping-chips span{padding:4px 7px;border-radius:6px;color:var(--text-secondary);background:var(--bg-inset);font-size:10px}.mapping-chips small{color:var(--text-muted)}
.publish-bar { display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 16px 16px;padding:14px;border:1px solid color-mix(in srgb,var(--success) 40%,var(--border));border-radius:11px;background:var(--success-soft); }.publish-bar>div{display:flex;align-items:center;gap:9px;color:var(--success-text)}.publish-bar>div>span{display:grid}.publish-bar small{font-weight:400}
.import-issues-head { margin-top:8px;border-top:1px solid var(--border); }

.startup-planner { margin-bottom:16px; overflow:hidden; }
.startup-planner__head { display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:16px 16px 10px; }.startup-planner__head p{margin:5px 0 0;max-width:690px;color:var(--text-muted);font-size:var(--text-sm)}
.planner-controls { display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end; }.planner-date-range{min-width:190px;text-align:center;color:var(--text-secondary);font-size:var(--text-sm);font-weight:600}
.planner-summary { display:flex;gap:1px;margin:0 16px 8px;border:1px solid var(--border);border-radius:9px;overflow:hidden;background:var(--border); }.planner-summary span{display:grid;min-width:110px;padding:8px 11px;background:var(--bg-subtle)}.planner-summary small{color:var(--text-muted);font-size:9px;text-transform:uppercase}.planner-summary strong{font-size:1rem}
.planner-legend { display:flex;gap:18px;padding:10px 16px 14px;border-top:1px solid var(--border);color:var(--text-muted);font-size:10px; }.planner-legend span{display:flex;align-items:center;gap:5px}.planner-mark{display:inline-block;width:18px;height:7px;border-radius:4px;background:var(--accent)}.planner-mark--diamond{width:9px;height:9px;border-radius:2px;transform:rotate(45deg);background:var(--warning)}

[data-reveal] { animation: phase2-in 360ms var(--ease) both; }
@keyframes phase2-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

@media (max-width: 1320px) {
  .monitor-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .monitor-grid--overview { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .monitor-card--alarms { grid-column:1/-1; }
  .well-card-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .monitor-grid--generator { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .monitor-grid--generator > :last-child { grid-column:1/-1; }
}
@media (max-width: 980px) {
  .monitor-hero__content { width:78%; }.monitor-hero__shade{background:linear-gradient(90deg,rgba(3,12,23,.98),rgba(4,17,33,.75))}
  .monitor-filterbar { position:relative;top:auto;flex-wrap:wrap;align-items:end; }.monitor-filterbar__label{display:none}.monitor-select{flex:1 1 160px}
  .monitor-grid--detail,.monitor-grid--calendar,.monitor-grid--company,.monitor-grid--company-lists,.monitor-grid--import { grid-template-columns:1fr; }
  .well-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .well-identity { flex-wrap:wrap; }.well-identity__primary{width:100%}
  .startup-planner__head { flex-direction:column; }.planner-controls{justify-content:flex-start}
  .form-grid--3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 680px) {
  .monitor-hero { min-height:300px; }.monitor-hero__content{width:100%;padding:26px 22px}.monitor-hero__shade{background:linear-gradient(90deg,rgba(3,12,23,.96),rgba(4,17,33,.72))}
  .monitor-kpis,.monitor-kpis--running { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .monitor-grid--overview,.monitor-grid--generator { grid-template-columns:1fr; }.monitor-card--alarms,.monitor-grid--generator>:last-child{grid-column:auto}
  .well-card-grid,.alarm-event-grid,.sheet-preview-grid { grid-template-columns:1fr; }
  .chart-shell--trend { height:330px; }.chart-shell--calendar{height:340px}.chart-shell--timeline{height:460px}
  .well-identity__condition,.well-identity__stat{flex:1}.well-identity{gap:14px}
  .interaction-hint { display:none; }.trend-toolbar{align-items:flex-start}
  .import-steps { overflow-x:auto;grid-template-columns:repeat(6,minmax(80px,1fr));padding-block:6px }.import-assurance,.import-result__summary{grid-template-columns:1fr}.import-result__summary{gap:1px}
  .publish-bar,.company-detail-hero,.generator-hero{align-items:flex-start;flex-direction:column}.company-detail-hero__stats{margin-left:0;flex-wrap:wrap}.generator-hero__metric{text-align:left}
  .form-grid--3,.status-change-form { grid-template-columns:1fr; }.field--full{grid-column:auto}
  .planner-controls{align-items:flex-start}.planner-date-range{min-width:0}.planner-summary{overflow-x:auto}.planner-legend{flex-wrap:wrap}
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal],.chart-shell.is-chart-loading { animation:none; }
  .monitor-hero__media,.well-card,.company-card { transition:none; }
}

/* Sign-in brand lockup: same rules as the sidebar - official mark, hairline,
   then the product name. */
.auth__brand { display: flex; align-items: center; gap: 12px; position: relative; }
.auth__brand .sidebar__logo .slb-logo { width: 58px; }
.auth__brand .sidebar__divider { height: 26px; background: rgba(255, 255, 255, 0.2); }
.auth__brand .sidebar__product strong { color: #fff; font-size: var(--text-body); }
.auth__brand .sidebar__product span { color: #9fb3cd; }

/* ========================================================================== 
   PCP OPERATIONS COMMAND CENTER · PREMIUM DARK REFERENCE
   ========================================================================== */

:root {
  --motion-fast: 140ms;
  --motion-normal: 240ms;
  --motion-medium: 380ms;
  --motion-slow: 650ms;
  --ease-premium: cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
}

[data-theme="dark"] body {
  background:
    radial-gradient(circle at 68% 8%, rgba(17,75,170,.09), transparent 32%),
    radial-gradient(circle at 22% 66%, rgba(0,125,255,.035), transparent 34%),
    linear-gradient(180deg, #020812, #030a15);
}

[data-theme="dark"] .sidebar {
  background:
    radial-gradient(circle at 35% 84%, rgba(10,81,191,.12), transparent 30%),
    linear-gradient(180deg, #020711 0%, #020916 50%, #03101d 100%);
  border-right-color: rgba(31,124,255,.28);
  box-shadow: 8px 0 34px rgba(0,41,102,.1), inset -1px 0 rgba(20,119,255,.08);
}
[data-theme="dark"] .topbar {
  background: rgba(2,10,20,.94);
  border-bottom-color: rgba(58,115,190,.17);
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
  backdrop-filter: blur(18px);
}
[data-theme="dark"] .topbar__search input {
  background: #05111f;
  border-color: rgba(90,130,180,.22);
  box-shadow: inset 0 1px rgba(255,255,255,.018);
}
[data-theme="dark"] .topbar__search-trigger {
  background:#05111f;border-color:rgba(90,130,180,.22);
  box-shadow:inset 0 1px rgba(255,255,255,.018);
}
[data-theme="dark"] .topbar__search-trigger:hover,
[data-theme="dark"] .topbar__search-trigger:focus-visible {
  border-color:rgba(42,140,255,.72);
  box-shadow:0 0 0 3px rgba(23,107,255,.11),0 0 22px rgba(23,107,255,.08);
}
[data-theme="dark"] .topbar__search input:focus {
  border-color: rgba(42,140,255,.72);
  box-shadow: 0 0 0 3px rgba(23,107,255,.11), 0 0 22px rgba(23,107,255,.08);
}
[data-theme="dark"] .topbar__search kbd { background:#071421; border-color:rgba(84,127,186,.22); }

.topbar__live {
  display:inline-flex;align-items:center;gap:6px;
  min-height:30px;padding:0 11px;border:1px solid rgba(0,201,130,.28);border-radius:999px;
  background:rgba(0,54,43,.2);color:#19e18c;font-size:11px;font-weight:700;
  letter-spacing:.02em;
}
.topbar__live i { width:6px;height:6px;border-radius:50%;background:#19e18c;box-shadow:0 0 12px rgba(25,225,140,.7);animation:system-live 3s ease-in-out infinite; }
/* The live dot in the topbar is the only thing left using this; it moved here
   when the sidebar status card was removed. */
@keyframes system-live { 0%,100%{opacity:.8;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)} }
.topbar__live svg { filter:drop-shadow(0 0 5px rgba(16,215,255,.35)); }

[data-theme="dark"] .nav-item {
  border:1px solid transparent;border-radius:8px;
  transition:transform var(--motion-normal) var(--ease-premium),background var(--motion-normal) var(--ease-premium),border-color var(--motion-normal) var(--ease-premium),color var(--motion-normal) var(--ease-premium);
}
[data-theme="dark"] .nav-item:hover { transform:translateX(2px); background:linear-gradient(90deg,rgba(20,80,210,.13),rgba(15,70,190,.025)); }
[data-theme="dark"] .nav-item::after {
  content:"";position:absolute;left:8px;right:8px;bottom:1px;height:1px;opacity:0;
  background:linear-gradient(90deg,transparent,#2a8cff,transparent);transform:scaleX(.2);transition:all var(--motion-normal) var(--ease-premium);
}
[data-theme="dark"] .nav-item:hover::after { opacity:.55;transform:scaleX(1); }
[data-theme="dark"] .nav-item[aria-current="page"] {
  background:linear-gradient(90deg,rgba(20,80,210,.25),rgba(15,70,190,.08));
  border-color:rgba(37,104,255,.75);
  box-shadow:0 0 18px rgba(25,96,255,.2),inset 0 0 12px rgba(35,100,255,.11);
}
[data-theme="dark"] .nav-item[aria-current="page"]::before { width:2px;height:70%;background:#10d7ff;box-shadow:0 0 9px #176bff; }
[data-theme="dark"] .nav-item__count { background:#ff3f45;box-shadow:0 0 11px rgba(255,63,69,.38);animation:badge-arrive 260ms var(--ease-premium) both; }
@keyframes badge-arrive { 0%{transform:scale(.7)}70%{transform:scale(1.15)}100%{transform:scale(1)} }

[data-theme="dark"] .sidebar__footer { margin:0 10px 10px;padding:9px;border:1px solid rgba(31,124,255,.24);border-radius:9px;background:linear-gradient(145deg,rgba(10,35,61,.78),rgba(4,17,31,.92)); }
[data-theme="dark"] .sidebar__footer .avatar { background:linear-gradient(145deg,#295cf0,#5143d9);border:1px solid #7ea9ff;box-shadow:0 0 15px rgba(42,108,255,.35); }

/* Command search */
.command-palette { position:fixed;inset:0;z-index:120;display:grid;place-items:start center;padding-top:min(14vh,130px); }
.command-palette[hidden] { display:none; }
.command-palette__backdrop { position:absolute;inset:0;border:0;background:rgba(0,0,0,.62);backdrop-filter:blur(8px);cursor:default; }
.command-palette__panel { position:relative;width:min(660px,calc(100vw - 32px));max-height:min(650px,74vh);overflow:hidden;border:1px solid rgba(45,117,255,.38);border-radius:14px;background:#071421;box-shadow:0 28px 80px rgba(0,0,0,.62),0 0 50px rgba(23,107,255,.12);animation:command-in var(--motion-normal) var(--ease-premium) both; }
@keyframes command-in { from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none} }
.command-palette__search { display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border); }
.command-palette__search>svg { color:#2a8cff; }
.command-palette__search input { min-height:38px;padding:0;border:0;background:transparent;font-size:15px;box-shadow:none!important; }
.command-palette__search kbd { padding:3px 7px;border:1px solid var(--border);border-radius:5px;background:#0a1b2d;color:var(--text-muted);font-size:10px; }
.command-palette__body { max-height:520px;overflow:auto;padding:10px; }
.command-palette__label { display:block;padding:3px 8px 8px;color:var(--text-muted);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; }
.command-palette__links { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px; }
.command-palette__links a { display:grid;grid-template-columns:30px minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:9px;padding:8px;border:1px solid transparent;border-radius:8px;color:var(--text-primary); }
.command-palette__links a:hover,.command-palette__links a:focus { text-decoration:none;background:#0a1d30;border-color:rgba(45,117,255,.3); }
.command-palette__links a>span { grid-row:1/3;display:grid;place-items:center;width:30px;height:30px;border-radius:7px;background:rgba(23,107,255,.12);color:#2a8cff; }
.command-palette__links b { font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.command-palette__links small { color:var(--text-muted);font-size:9px; }
.command-palette__links a>svg { grid-column:3;grid-row:1/3;color:var(--text-muted); }
.command-palette__empty { padding:24px;text-align:center;color:var(--text-muted);font-size:12px; }

/* Dashboard canvas and hero */
.route-dashboard .app-content { max-width:none;padding:14px 16px 34px; }
.route-dashboard .app-body {
  background:
    linear-gradient(rgba(44,99,170,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(44,99,170,.028) 1px,transparent 1px),
    radial-gradient(circle at 74% 0%,rgba(22,104,255,.16),transparent 38%),
    radial-gradient(circle at 12% 96%,rgba(74,44,190,.07),transparent 42%),
    #030a15;
  background-size:36px 36px,36px 36px,auto,auto;
}
.route-dashboard .cc { --cc-gap:10px;--cc-radius:10px;position:relative;isolation:isolate; }
/* The Command Center is a control room, not a document: it stays in the night
   palette whichever theme the user is in, so the readouts, the status colours and
   the digital twin always sit on the same deep navy the reference was built on.
   The toggle still drives every other page in the application. */
.route-dashboard .app-body {
  --bg-canvas:#030a15;--bg-surface:#08192a;--bg-surface-raised:#0a1c2e;--bg-subtle:#06111f;
  --bg-inset:#081827;--bg-hover:#0c2136;--bg-selected:#0e2743;
  --text-primary:#f6f9ff;--text-secondary:#b8c6d8;--text-muted:#7f94ae;--text-inverse:#06111d;--text-link:#5b8ef7;
  --border:rgba(58,115,190,.2);--border-strong:rgba(68,129,215,.32);--border-focus:#2a8cff;
  --accent:#176bff;--accent-hover:#2a8cff;--accent-soft:rgba(23,107,255,.16);--accent-text:#ffffff;
  --success:#00c982;--success-soft:rgba(0,201,130,.14);--success-text:#19e18c;
  --warning:#ffb020;--warning-soft:rgba(255,176,32,.14);--warning-text:#ffc45b;
  --danger:#ff4545;--danger-soft:rgba(255,69,69,.14);--danger-text:#ff746f;
  --info:#5b8ef7;--info-soft:rgba(91,142,247,.16);--info-text:#8fb4fb;
  --neutral:#718096;--neutral-soft:rgba(113,128,150,.18);--neutral-text:#a5b3c6;
  --skeleton-base:#0b1d2e;--skeleton-shine:rgba(55,110,180,.18);--overlay:rgba(2,7,13,.62);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);--shadow-md:0 6px 16px rgba(0,0,0,.45);--shadow-lg:0 20px 48px rgba(0,0,0,.55);
  color-scheme:dark;
  /* body computed its colour from the root tokens, so re-resolve it here or
     every element that merely inherits would keep the light-theme ink. */
  color:var(--text-primary);
}
.route-dashboard .topbar { background:rgba(4,12,22,.86);border-bottom-color:rgba(58,115,190,.22);backdrop-filter:blur(14px); }
.route-dashboard .cc { --cc-card:#08192a;--cc-card-2:#0a1c2e; }
.cc-ambient { position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden; }
.cc-ambient i { position:absolute;width:2px;height:2px;border-radius:50%;background:#176bff;box-shadow:0 0 8px #176bff;opacity:.35;animation:ambient-drift 18s linear infinite; }
.cc-ambient i:nth-child(1){left:7%;top:4%;animation-delay:-3s}.cc-ambient i:nth-child(2){left:15%;top:17%;background:#10d7ff}.cc-ambient i:nth-child(3){left:31%;top:8%;animation-delay:-8s}.cc-ambient i:nth-child(4){left:48%;top:14%;background:#8348ff}.cc-ambient i:nth-child(5){left:57%;top:3%;animation-delay:-11s}.cc-ambient i:nth-child(6){left:73%;top:21%;background:#10d7ff}.cc-ambient i:nth-child(7){left:89%;top:8%;animation-delay:-5s}.cc-ambient i:nth-child(8){left:95%;top:34%;background:#8348ff}.cc-ambient i:nth-child(9){left:12%;top:49%;animation-delay:-14s}.cc-ambient i:nth-child(10){left:25%;top:61%;background:#10d7ff}.cc-ambient i:nth-child(11){left:41%;top:42%;animation-delay:-2s}.cc-ambient i:nth-child(12){left:68%;top:52%;background:#8348ff}.cc-ambient i:nth-child(13){left:80%;top:68%;animation-delay:-7s}.cc-ambient i:nth-child(14){left:4%;top:83%;background:#10d7ff}.cc-ambient i:nth-child(15){left:38%;top:91%;animation-delay:-12s}.cc-ambient i:nth-child(16){left:61%;top:79%;background:#8348ff}.cc-ambient i:nth-child(17){left:87%;top:92%;animation-delay:-4s}.cc-ambient i:nth-child(18){left:98%;top:73%;background:#10d7ff}
@keyframes ambient-drift { 0%{transform:translate3d(0,0,0);opacity:.12}50%{transform:translate3d(18px,-12px,0);opacity:.55}100%{transform:translate3d(0,-24px,0);opacity:.12} }

.cc-hero { position:relative;min-height:206px;overflow:hidden;align-items:stretch;flex-wrap:nowrap;padding:6px 0 0; }
.cc-hero::after { content:"";position:absolute;left:30%;right:-2%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(16,215,255,.35),rgba(23,107,255,.08),transparent);box-shadow:0 0 12px rgba(23,107,255,.18); }
.cc-hero .cc-head__identity { position:relative;z-index:5;align-self:center;min-width:360px;padding-left:2px; }
.cc-head__greeting { color:#f7faff;font-size:1.65rem;font-weight:700; }
.cc-head__subtitle { color:#aab9cc;font-size:13px; }
.cc-head__meta { margin-top:7px;font-size:10px; }
.cc-head__wave { display:inline-block;transform-origin:70% 75%;animation:wave-hand 2.8s ease-in-out 1 550ms; }
@keyframes wave-hand { 0%,100%{transform:rotate(0)}20%{transform:rotate(14deg)}40%{transform:rotate(-8deg)}60%{transform:rotate(12deg)}80%{transform:rotate(-4deg)} }
/* ------------------------------------------- PCP digital twin (hero) --- */
.digital-twin { position:absolute;top:0;right:0;width:min(74%,900px);height:206px;overflow:visible;pointer-events:none; }
.digital-twin::before { content:"";position:absolute;left:22%;right:24%;bottom:6px;height:60px;background:radial-gradient(ellipse at 50% 100%,rgba(28,110,255,.26),transparent 70%);filter:blur(8px); }
.digital-twin__signals { position:absolute;inset:0;width:100%;height:100%;overflow:visible; }
.signal { fill:none;stroke:#176bff;stroke-width:1;opacity:.22;stroke-dasharray:3 9;animation:signal-flow 11s linear infinite; }
.signal--two { stroke:#10d7ff;opacity:.16;animation-duration:15s;animation-direction:reverse; }
.signal--three { stroke:#8348ff;opacity:.16;animation-duration:18s; }
@keyframes signal-flow { to{stroke-dashoffset:-160} }
.signal-nodes circle { fill:#10d7ff;opacity:.6;filter:drop-shadow(0 0 4px #10d7ff);animation:node-breathe 3.4s ease-in-out infinite; }
.signal-nodes circle:nth-child(2n){fill:#8348ff;animation-delay:-1.2s}.signal-nodes circle:nth-child(3n){animation-delay:-2.1s}
@keyframes node-breathe { 0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.25)} }
/* right-angle instrument traces running from the readouts back to the rig */
.trace { fill:none;stroke:rgba(70,155,255,.28);stroke-width:1;stroke-linejoin:round; }
.trace-run { fill:none;stroke:#38b6ff;stroke-width:1.4;stroke-linejoin:round;stroke-dasharray:5 118;filter:drop-shadow(0 0 4px rgba(56,182,255,.8));animation:trace-run 5.2s linear infinite; }
.trace-run--b{animation-duration:6.4s;animation-delay:-2.1s;stroke:#8b6cff}.trace-run--c{animation-duration:5.8s;animation-delay:-3.4s}.trace-run--d{animation-duration:7s;animation-delay:-1.2s;stroke:#8b6cff}
@keyframes trace-run { from{stroke-dashoffset:123}to{stroke-dashoffset:-123} }
.trace-pad { fill:#0a1b2e;stroke:rgba(90,180,255,.55);stroke-width:1; }

/* The pumpjack is a true four-bar linkage: the crank turns at a constant rate,
   the pitman drives the walking beam through the exact angle the geometry gives,
   and the polished rod travels the arc length the horsehead pays out. Every
   keyframe below was computed from that linkage, not eyeballed. */
.pumpjack { position:absolute;right:28%;bottom:2px;width:334px;height:208px;overflow:visible;filter:drop-shadow(0 0 20px rgba(28,110,255,.28)) drop-shadow(0 0 54px rgba(12,60,180,.2));transition:filter var(--motion-medium,320ms) var(--ease-premium,cubic-bezier(.22,1,.36,1));animation:pump-start 760ms var(--ease-premium,cubic-bezier(.22,1,.36,1)) 120ms both; }
@keyframes pump-start { from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none} }
.pumpjack * { vector-effect:non-scaling-stroke; }
.pumpjack *{vector-effect:non-scaling-stroke}

/* --- deck ------------------------------------------------------------------ */
.pj-deck__top{fill:rgba(20,74,180,.20);stroke:rgba(60,150,255,.45);stroke-width:1}
.pj-deck__face{fill:rgba(6,26,66,.60);stroke:rgba(50,130,240,.30);stroke-width:1}
.pj-deck__edge{stroke:#3ea8ff;stroke-width:1.6;opacity:.85;filter:url(#pjGlowS)}
.pj-deck__grid{stroke:rgba(70,160,255,.22);stroke-width:.8}

/* --- plant on the deck ----------------------------------------------------- */
.pj-tank__body{fill:rgba(16,58,140,.55);stroke:rgba(80,175,255,.6);stroke-width:1}
.pj-tank__top{fill:rgba(64,150,255,.38);stroke:rgba(120,205,255,.6);stroke-width:.9}
.pj-tank__side{fill:rgba(8,32,86,.7);stroke:rgba(70,150,250,.4);stroke-width:.9}
.pj-tank--b .pj-tank__body{fill:rgba(58,30,150,.5);stroke:rgba(150,110,255,.6)}
.pj-tank--b .pj-tank__top{fill:rgba(120,80,240,.36);stroke:rgba(180,150,255,.6)}
.pj-tank__cap{stroke:#7fd4ff;stroke-width:1.4;opacity:.9}
.pj-tank__led{fill:#22d9ff;filter:url(#pjGlowS)}
.pj-tank--b .pj-tank__led{fill:#a97bff}
.pj-rail{stroke:rgba(70,165,255,.42);stroke-width:1}
.pj-rail--post{stroke:rgba(70,165,255,.28)}

/* --- Samson post ----------------------------------------------------------- */
.pj-tower__web{fill:rgba(9,34,92,.55);stroke:none}
.pj-tower__back{opacity:.5}
.pj-tower__leg{stroke:url(#pjSteel);stroke-width:4;stroke-linecap:round}
.pj-tower__rung{stroke:#2f7bff;stroke-width:2}
.pj-tower__brace{stroke:rgba(70,150,255,.62);stroke-width:1.3}
.pj-tower__tie{stroke:rgba(60,135,240,.42);stroke-width:1.1}
.pj-tower__cap{fill:#123a8f;stroke:#4fb6ff;stroke-width:1.4}
.pj-tower__cap2{fill:#1e59d8;stroke:#7fd4ff;stroke-width:1.1}

/* --- walking beam ---------------------------------------------------------- */

.pj-beam__back{fill:rgba(8,30,84,.75);stroke:rgba(60,140,250,.35);stroke-width:1}
.pj-beam__top{fill:rgba(46,120,255,.42);stroke:rgba(120,205,255,.55);stroke-width:1}
.pj-beam__web{fill:url(#pjBeamFill);stroke:#57b3ff;stroke-width:1.4}
.pj-beam__window{fill:rgba(3,12,34,.66);stroke:rgba(90,180,255,.42);stroke-width:.8}
.pj-beam__edge{stroke:#8ad6ff;stroke-width:1.2;opacity:.75}
.pj-beam__led{fill:#ff8a2b;filter:url(#pjGlowS)}

/* --- horsehead ------------------------------------------------------------- */
.pj-head{fill:url(#pjHeadFill);stroke:#4aa8ff;stroke-width:1.6}
.pj-head__back{fill:rgba(10,34,96,.62);stroke:rgba(70,150,255,.3);stroke-width:1}
.pj-head__spoke{stroke:rgba(125,200,255,.55);stroke-width:1.5}
.pj-head__arc{fill:none;stroke:rgba(150,215,255,.45);stroke-width:1.2}
.pj-head__rim{fill:none;stroke:#7fe3ff;stroke-width:2.6;filter:url(#pjGlow)}
.pj-pin{fill:#0a1f4e;stroke:#ff5fa8;stroke-width:2}

/* --- saddle bearing -------------------------------------------------------- */
.pj-saddle__ring{fill:rgba(4,16,42,.9);stroke:#3ea8ff;stroke-width:3}
.pj-saddle__core{fill:#37e0ff;filter:url(#pjGlow)}

/* --- prime mover ----------------------------------------------------------- */
.pj-drive__box{fill:rgba(58,132,255,.34);stroke:rgba(120,200,255,.55);stroke-width:1}
.pj-drive__side{fill:rgba(7,26,72,.8);stroke:rgba(70,150,250,.4);stroke-width:1}
.pj-drive__face{fill:url(#pjDriveFill);stroke:#4fa5ff;stroke-width:1.3}
.pj-drive__vent{fill:rgba(3,12,34,.6);stroke:rgba(110,190,255,.4);stroke-width:.9}
.pj-drive__led{fill:#ff8a2b;filter:url(#pjGlowS)}

/* --- crank + counterweight ------------------------------------------------- */
.pj-crank__hub{fill:#06142f;stroke:#3ea8ff;stroke-width:2}
.pj-crank__disc{fill:rgba(12,38,105,.72);stroke:none}
.pj-crank__weight{fill:url(#pjWeightFill);stroke:rgba(210,140,255,.5);stroke-width:1}
.pj-crank__spoke{stroke:rgba(140,190,255,.45);stroke-width:1.4}
.pj-crank__rim{fill:none;stroke:#5fbcff;stroke-width:2.4;filter:url(#pjGlow)}
.pj-crank__pin{fill:#ff5fa8;stroke:#ffc3e0;stroke-width:1.2;filter:url(#pjGlowS)}

/* --- pitman ---------------------------------------------------------------- */
.pj-pitman{transform-origin:0 0}
.pj-pitman__bar{fill:url(#pjSteelFill);stroke:#63bcff;stroke-width:1.2}
.pj-pitman__bar--far{opacity:.45}
.pj-pitman__eye{fill:#08183c;stroke:#7fd4ff;stroke-width:1.6}

/* --- wellhead + polished rod ----------------------------------------------- */
.pj-bridle{stroke:rgba(160,220,255,.6);stroke-width:1.2}
.pj-rod__carrier{fill:#1a4fbe;stroke:#8ad6ff;stroke-width:1.4}
.pj-rod__stem{fill:#22d9ff;filter:url(#pjGlowS)}
.pj-well__box{fill:rgba(58,132,255,.32);stroke:rgba(120,200,255,.5);stroke-width:1}
.pj-well__side{fill:rgba(7,26,72,.8);stroke:rgba(70,150,250,.4);stroke-width:1}
.pj-well__face{fill:url(#pjDriveFill);stroke:#4fa5ff;stroke-width:1.2}
.pj-well__stuffing{fill:#0d2a6b;stroke:#7fd4ff;stroke-width:1.4}
.pj-well__flow{fill:none;stroke:#3ea8ff;stroke-width:2;opacity:.8}
.pj-well__led{fill:#22d9ff;filter:url(#pjGlowS)}

/* --- motion ------------------------------------------------------------- */
.pj-beam   { animation:pjBeam   var(--pj-cycle,5.6s) linear infinite; }
.pj-crank  { animation:pjCrank  var(--pj-cycle,5.6s) linear infinite; }
.pj-pitman { animation:pjPitman var(--pj-cycle,5.6s) linear infinite; }
.pj-rod    { animation:pjRod    var(--pj-cycle,5.6s) linear infinite; }
@keyframes pjBeam{0%{transform:rotate(1.92deg)}2.083%{transform:rotate(0.51deg)}4.167%{transform:rotate(-0.89deg)}6.25%{transform:rotate(-2.26deg)}8.333%{transform:rotate(-3.58deg)}10.42%{transform:rotate(-4.84deg)}12.5%{transform:rotate(-6.03deg)}14.58%{transform:rotate(-7.12deg)}16.67%{transform:rotate(-8.10deg)}18.75%{transform:rotate(-8.97deg)}20.83%{transform:rotate(-9.72deg)}22.92%{transform:rotate(-10.32deg)}25%{transform:rotate(-10.78deg)}27.08%{transform:rotate(-11.09deg)}29.17%{transform:rotate(-11.22deg)}31.25%{transform:rotate(-11.18deg)}33.33%{transform:rotate(-10.97deg)}35.42%{transform:rotate(-10.57deg)}37.5%{transform:rotate(-9.99deg)}39.58%{transform:rotate(-9.23deg)}41.67%{transform:rotate(-8.31deg)}43.75%{transform:rotate(-7.24deg)}45.83%{transform:rotate(-6.03deg)}47.92%{transform:rotate(-4.71deg)}50%{transform:rotate(-3.30deg)}52.08%{transform:rotate(-1.83deg)}54.17%{transform:rotate(-0.33deg)}56.25%{transform:rotate(1.19deg)}58.33%{transform:rotate(2.68deg)}60.42%{transform:rotate(4.12deg)}62.5%{transform:rotate(5.49deg)}64.58%{transform:rotate(6.76deg)}66.67%{transform:rotate(7.90deg)}68.75%{transform:rotate(8.90deg)}70.83%{transform:rotate(9.73deg)}72.92%{transform:rotate(10.38deg)}75%{transform:rotate(10.83deg)}77.08%{transform:rotate(11.07deg)}79.17%{transform:rotate(11.10deg)}81.25%{transform:rotate(10.92deg)}83.33%{transform:rotate(10.53deg)}85.42%{transform:rotate(9.94deg)}87.5%{transform:rotate(9.16deg)}89.58%{transform:rotate(8.23deg)}91.67%{transform:rotate(7.15deg)}93.75%{transform:rotate(5.95deg)}95.83%{transform:rotate(4.66deg)}97.92%{transform:rotate(3.31deg)}100%{transform:rotate(1.92deg)}}
@keyframes pjCrank{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes pjPitman{0%{transform:translate(0.0px,0.0px) rotate(-85.89deg)}2.083%{transform:translate(-0.2px,2.3px) rotate(-85.84deg)}4.167%{transform:translate(-0.6px,4.7px) rotate(-85.60deg)}6.25%{transform:translate(-1.4px,6.9px) rotate(-85.18deg)}8.333%{transform:translate(-2.4px,9.0px) rotate(-84.59deg)}10.42%{transform:translate(-3.7px,11.0px) rotate(-83.84deg)}12.5%{transform:translate(-5.3px,12.7px) rotate(-82.95deg)}14.58%{transform:translate(-7.0px,14.3px) rotate(-81.94deg)}16.67%{transform:translate(-9.0px,15.6px) rotate(-80.81deg)}18.75%{transform:translate(-11.1px,16.6px) rotate(-79.61deg)}20.83%{transform:translate(-13.3px,17.4px) rotate(-78.35deg)}22.92%{transform:translate(-15.7px,17.8px) rotate(-77.05deg)}25%{transform:translate(-18.0px,18.0px) rotate(-75.75deg)}27.08%{transform:translate(-20.3px,17.8px) rotate(-74.46deg)}29.17%{transform:translate(-22.7px,17.4px) rotate(-73.21deg)}31.25%{transform:translate(-24.9px,16.6px) rotate(-72.03deg)}33.33%{transform:translate(-27.0px,15.6px) rotate(-70.93deg)}35.42%{transform:translate(-29.0px,14.3px) rotate(-69.94deg)}37.5%{transform:translate(-30.7px,12.7px) rotate(-69.07deg)}39.58%{transform:translate(-32.3px,11.0px) rotate(-68.34deg)}41.67%{transform:translate(-33.6px,9.0px) rotate(-67.75deg)}43.75%{transform:translate(-34.6px,6.9px) rotate(-67.31deg)}45.83%{transform:translate(-35.4px,4.7px) rotate(-67.02deg)}47.92%{transform:translate(-35.8px,2.3px) rotate(-66.88deg)}50%{transform:translate(-36.0px,0.0px) rotate(-66.89deg)}52.08%{transform:translate(-35.8px,-2.3px) rotate(-67.03deg)}54.17%{transform:translate(-35.4px,-4.7px) rotate(-67.31deg)}56.25%{transform:translate(-34.6px,-6.9px) rotate(-67.72deg)}58.33%{transform:translate(-33.6px,-9.0px) rotate(-68.25deg)}60.42%{transform:translate(-32.3px,-11.0px) rotate(-68.88deg)}62.5%{transform:translate(-30.7px,-12.7px) rotate(-69.62deg)}64.58%{transform:translate(-29.0px,-14.3px) rotate(-70.46deg)}66.67%{transform:translate(-27.0px,-15.6px) rotate(-71.38deg)}68.75%{transform:translate(-24.9px,-16.6px) rotate(-72.39deg)}70.83%{transform:translate(-22.7px,-17.4px) rotate(-73.45deg)}72.92%{transform:translate(-20.3px,-17.8px) rotate(-74.58deg)}75%{transform:translate(-18.0px,-18.0px) rotate(-75.74deg)}77.08%{transform:translate(-15.7px,-17.8px) rotate(-76.93deg)}79.17%{transform:translate(-13.3px,-17.4px) rotate(-78.13deg)}81.25%{transform:translate(-11.1px,-16.6px) rotate(-79.32deg)}83.33%{transform:translate(-9.0px,-15.6px) rotate(-80.48deg)}85.42%{transform:translate(-7.0px,-14.3px) rotate(-81.58deg)}87.5%{transform:translate(-5.3px,-12.7px) rotate(-82.60deg)}89.58%{transform:translate(-3.7px,-11.0px) rotate(-83.51deg)}91.67%{transform:translate(-2.4px,-9.0px) rotate(-84.31deg)}93.75%{transform:translate(-1.4px,-6.9px) rotate(-84.96deg)}95.83%{transform:translate(-0.6px,-4.7px) rotate(-85.45deg)}97.92%{transform:translate(-0.2px,-2.3px) rotate(-85.76deg)}100%{transform:translate(0.0px,0.0px) rotate(-85.89deg)}}
@keyframes pjRod{0%{transform:translateY(6.0px)}2.083%{transform:translateY(1.6px)}4.167%{transform:translateY(-2.8px)}6.25%{transform:translateY(-7.0px)}8.333%{transform:translateY(-11.1px)}10.42%{transform:translateY(-15.0px)}12.5%{transform:translateY(-18.7px)}14.58%{transform:translateY(-22.1px)}16.67%{transform:translateY(-25.2px)}18.75%{transform:translateY(-27.9px)}20.83%{transform:translateY(-30.2px)}22.92%{transform:translateY(-32.1px)}25%{transform:translateY(-33.5px)}27.08%{transform:translateY(-34.4px)}29.17%{transform:translateY(-34.9px)}31.25%{transform:translateY(-34.7px)}33.33%{transform:translateY(-34.1px)}35.42%{transform:translateY(-32.8px)}37.5%{transform:translateY(-31.0px)}39.58%{transform:translateY(-28.7px)}41.67%{transform:translateY(-25.8px)}43.75%{transform:translateY(-22.5px)}45.83%{transform:translateY(-18.7px)}47.92%{transform:translateY(-14.6px)}50%{transform:translateY(-10.3px)}52.08%{transform:translateY(-5.7px)}54.17%{transform:translateY(-1.0px)}56.25%{transform:translateY(3.7px)}58.33%{transform:translateY(8.3px)}60.42%{transform:translateY(12.8px)}62.5%{transform:translateY(17.1px)}64.58%{transform:translateY(21.0px)}66.67%{transform:translateY(24.6px)}68.75%{transform:translateY(27.7px)}70.83%{transform:translateY(30.2px)}72.92%{transform:translateY(32.2px)}75%{transform:translateY(33.6px)}77.08%{transform:translateY(34.4px)}79.17%{transform:translateY(34.5px)}81.25%{transform:translateY(33.9px)}83.33%{transform:translateY(32.7px)}85.42%{transform:translateY(30.9px)}87.5%{transform:translateY(28.5px)}89.58%{transform:translateY(25.6px)}91.67%{transform:translateY(22.2px)}93.75%{transform:translateY(18.5px)}95.83%{transform:translateY(14.5px)}97.92%{transform:translateY(10.3px)}100%{transform:translateY(6.0px)}}

/* hover: the twin leans in, the rig lights up, the readouts lift */
.cc-hero:hover .pumpjack { filter:drop-shadow(0 0 30px rgba(40,140,255,.46)) drop-shadow(0 0 74px rgba(16,80,220,.3)); }
.cc-hero:hover .pj-head__rim,.cc-hero:hover .pj-crank__rim { stroke:#a8ecff; }
.cc-hero:hover .trace { stroke:rgba(90,180,255,.5); }
.cc-hero:hover .telemetry { border-color:rgba(52,150,255,.5);box-shadow:0 10px 26px rgba(0,0,0,.28),0 0 0 1px rgba(42,140,255,.1); }
.digital-twin__link { position:absolute;right:28%;bottom:2px;width:334px;height:208px;z-index:3;pointer-events:auto;border-radius:14px;cursor:pointer; }
.digital-twin__link:focus-visible { outline:2px solid var(--border-focus);outline-offset:-3px; }

/* tab hidden: stop every decorative loop rather than burn a background core */
.is-paused .pumpjack *,.is-paused .cc-ambient i,.is-paused .signal,.is-paused .trace-run,
.is-paused .signal-nodes circle,.is-paused .telemetry { animation-play-state:paused; }

.telemetry { position:absolute;z-index:4;display:grid;gap:1px;min-width:104px;padding:7px 10px;border:1px solid rgba(40,120,200,.28);border-radius:8px;background:rgba(5,17,30,.72);color:inherit;text-align:left;backdrop-filter:blur(9px);box-shadow:0 8px 22px rgba(0,0,0,.2),inset 0 1px rgba(180,220,255,.025);pointer-events:auto;cursor:help;animation:telemetry-in 420ms var(--ease-premium) both,telemetry-float 5.5s ease-in-out infinite 1s; }
.telemetry span { color:#5aa8ff;font-size:9.5px;letter-spacing:.02em;line-height:1.1; }.telemetry strong{color:#f6f9ff;font-size:13px;font-weight:650;line-height:1.3;white-space:nowrap;font-variant-numeric:tabular-nums}.telemetry small{color:#7890aa;font-size:9.5px}.telemetry small.is-up{color:#19e18c}.telemetry small.is-down{color:#ff746f}
.telemetry:hover { border-color:rgba(42,140,255,.62);box-shadow:0 0 18px rgba(23,107,255,.18); }
.telemetry--pressure{left:24%;top:22px;animation-delay:260ms,0s}.telemetry--load{left:12%;top:98px;animation-delay:320ms,-1.7s}.telemetry--runtime{right:9%;top:56px;animation-delay:380ms,-2.4s}.telemetry--efficiency{right:5%;top:124px;animation-delay:440ms,-.8s}
@keyframes telemetry-in { from{opacity:0;transform:translateY(5px) scale(.96)}to{opacity:1;transform:none} }
@keyframes telemetry-float { 0%,100%{translate:0 0}50%{translate:0 -2px} }
.cc-hero__cta { position:absolute;right:1%;top:6px;z-index:6;min-height:38px;gap:9px;padding-inline:16px;pointer-events:auto;background:linear-gradient(135deg,#1c66f2,#154be8);border-color:#2a70ff;box-shadow:0 0 24px rgba(23,107,255,.25),inset 0 1px rgba(255,255,255,.16); }
.cc-hero__cta:hover { transform:translateY(-1px);box-shadow:0 0 32px rgba(23,107,255,.34);text-decoration:none; }.cc-hero__cta:active{transform:scale(.97)}.cc-hero__cta svg:first-child{transition:transform var(--motion-normal) var(--ease-premium)}.cc-hero__cta:hover svg:first-child{transform:rotate(90deg)}

/* Dashboard surfaces and density */
.route-dashboard .cc .card,
.route-dashboard .cc .mkpi,
.route-dashboard .cc-filters {
  background:linear-gradient(145deg,rgba(9,27,46,.96),rgba(5,18,31,.97));
  border-color:rgba(70,120,175,.18);box-shadow:inset 0 1px rgba(150,190,255,.025),0 12px 26px rgba(0,0,0,.16);
}
.route-dashboard .cc .card,.route-dashboard .cc .mkpi { position:relative;transition:transform 220ms var(--ease-premium),border-color 220ms var(--ease-premium),box-shadow 220ms var(--ease-premium); }
.route-dashboard .cc .card::after,.route-dashboard .cc .mkpi::after { content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;border-radius:inherit;background:radial-gradient(400px circle at var(--spot-x,50%) var(--spot-y,50%),rgba(40,120,255,.075),transparent 42%);transition:opacity 220ms var(--ease-premium); }
.route-dashboard .cc .card:hover::after,.route-dashboard .cc .mkpi:hover::after { opacity:1; }
.route-dashboard .cc .card:hover { transform:translateY(-2px);border-color:rgba(50,120,255,.34);box-shadow:0 16px 34px rgba(0,0,0,.22); }
.route-dashboard .cc .card>*:not(.card-spotlight),.route-dashboard .cc .mkpi>* { position:relative;z-index:1; }
.route-dashboard .cc-layout { grid-template-columns:minmax(0,1fr) 302px;gap:10px; }
.route-dashboard .cc-main,.route-dashboard .cc-side { gap:10px; }
.route-dashboard .cc-side { top:70px; }
.route-dashboard .cc .card__head--tight { padding:9px 12px;min-height:38px; }
.route-dashboard .cc .card__body--tight { padding:10px 12px; }
.route-dashboard .cc .card__title { font-size:10px;letter-spacing:.055em;text-transform:uppercase; }

.route-dashboard .cc-filters { display:grid;grid-template-columns:repeat(6,minmax(100px,1fr)) auto;gap:0;padding:8px 10px;align-items:end; }
.route-dashboard .cc-filter { padding:0 10px;border-right:1px solid rgba(58,115,190,.14); }
.route-dashboard .cc-filter:first-of-type { padding-left:2px; }
.route-dashboard .cc-filter select,.route-dashboard .cc-filter input[type="date"] { width:100%;max-width:none;min-height:30px;border-color:rgba(90,130,180,.17);background:#06101c;font-size:10px; }
.route-dashboard .cc-filter select:hover,.route-dashboard .cc-filter input:hover { border-color:rgba(42,140,255,.5); }
.route-dashboard .cc-filters__actions { margin-left:9px;flex-wrap:nowrap; }
.route-dashboard .cc-filters__actions .btn { min-height:32px;padding-inline:10px;font-size:10px;white-space:nowrap; }

.route-dashboard .cc-kpis { gap:10px; }
.route-dashboard .mkpi { min-height:132px;padding:12px 13px 0;border-color:color-mix(in srgb,var(--tone) 46%,rgba(58,115,190,.18));box-shadow:inset 0 1px rgba(255,255,255,.025),0 10px 24px rgba(0,0,0,.18),0 0 20px color-mix(in srgb,var(--tone) 11%,transparent); }
.route-dashboard .mkpi::before { inset:0;width:100%;height:100%;opacity:.17;background:radial-gradient(circle at 4% 90%,var(--tone),transparent 38%); }
.route-dashboard .mkpi:hover { transform:translateY(-3px);border-color:color-mix(in srgb,var(--tone) 72%,transparent);box-shadow:0 16px 34px rgba(0,0,0,.24),0 0 24px color-mix(in srgb,var(--tone) 18%,transparent); }
.route-dashboard .mkpi__label { font-size:9.5px; }.route-dashboard .mkpi__value{font-size:2rem}.route-dashboard .mkpi__icon{width:28px;height:28px;border:1px solid color-mix(in srgb,var(--tone) 30%,transparent);box-shadow:0 0 14px color-mix(in srgb,var(--tone) 12%,transparent)}
.route-dashboard .mkpi__spark { height:34px;margin:auto -1px -1px;width:calc(100% + 2px); }.route-dashboard .mkpi__spark>svg{width:100%;height:100%}

.route-dashboard .cc-strip { border-color:rgba(41,104,184,.3);box-shadow:0 0 18px rgba(23,107,255,.07); }
.route-dashboard .cc-strip__col { padding:9px 10px; }.route-dashboard .cc-strip__title{min-height:21px;font-size:8.5px;line-height:1.15;margin-bottom:4px}.route-dashboard .cc-strip__list a{padding:1px 4px;font-size:9.5px;line-height:1.18}
.route-dashboard .cc-command-row { display:grid;grid-template-columns:minmax(300px,.9fr) minmax(0,1.5fr);gap:10px; }
.route-dashboard .cc-throughput-card,.route-dashboard .cc-pipeline { min-height:164px; }
.route-dashboard .cc-throughput-chart { width:100%;height:92px; }.route-dashboard .cc-throughput-chart>svg{width:100%;height:100%}
.route-dashboard .cc-pipeline .card__body { padding-top:5px; }
.route-dashboard .pipeline { position:relative;padding-top:4px;gap:0; }
.route-dashboard .pipeline::before { content:"";position:absolute;left:5%;right:5%;top:40px;height:2px;background:linear-gradient(90deg,#176bff,#10d7ff,#8348ff,#19e18c);box-shadow:0 0 9px rgba(16,215,255,.36); }
.route-dashboard .pipeline::after { content:"";position:absolute;left:5%;top:37px;width:7px;height:7px;border-radius:50%;background:#10d7ff;box-shadow:0 0 10px #10d7ff;animation:pipeline-particle 4.8s linear infinite; }
@keyframes pipeline-particle { from{left:5%}to{left:94%} }
.route-dashboard .pipeline__stage { position:relative;z-index:1;justify-content:center; }
.route-dashboard .pipeline__link { gap:2px;padding:4px 2px;background:transparent; }
.route-dashboard .pipeline__count { order:3;font-size:1rem;margin-top:1px; }
.route-dashboard .pipeline__icon { order:1;display:grid;place-items:center;width:43px;height:43px;border:2px solid rgba(58,115,190,.48);border-radius:50%;background:#06111f;color:#9fb9da;opacity:1;box-shadow:0 0 0 5px rgba(4,16,28,.88),inset 0 0 14px rgba(23,107,255,.11); }
.route-dashboard .pipeline__label { order:4;font-size:8.5px;white-space:nowrap;display:block;overflow:hidden;text-overflow:ellipsis; }
.route-dashboard .pipeline__arrow { display:none; }
.route-dashboard .pipeline__stage:nth-child(5) .pipeline__icon,.route-dashboard .pipeline__stage:nth-child(6) .pipeline__icon { border-color:#10d7ff;color:#10d7ff;box-shadow:0 0 0 5px rgba(4,16,28,.88),0 0 13px rgba(16,215,255,.24); }
.route-dashboard .pipeline__stage:nth-last-child(-n+2) .pipeline__icon { border-color:#8348ff;color:#b493ff; }
.route-dashboard .pipeline__total { margin-top:5px;padding-top:5px;text-align:left;font-size:9px; }

.route-dashboard .cc-row--recent { grid-template-columns:minmax(0,1.65fr) minmax(360px,.9fr);gap:10px; }
.route-dashboard .cc-row--recent .card { min-height:164px; }
.route-dashboard .cc-row--recent .data--compact th,.route-dashboard .cc-row--recent .data--compact td{padding:4px 8px;font-size:9.5px}.route-dashboard .cc-row--recent .data--compact th{font-size:8px}.route-dashboard .cc-row--recent .chip{font-size:8px}.route-dashboard .cc-row--recent .who__name{white-space:nowrap}
.route-dashboard .cc-lower-activity-workload>section:last-child,.route-dashboard .cc-lower-recent { display:none; }
.route-dashboard .cc-lower-activity-workload { grid-template-columns:minmax(0,1fr); }
.route-dashboard .who[data-work-profile] { position:relative;cursor:help; }
.route-dashboard .who[data-work-profile]::after { content:attr(data-work-profile);position:absolute;left:0;bottom:calc(100% + 8px);z-index:30;width:230px;padding:9px;border:1px solid rgba(45,117,255,.3);border-radius:7px;background:rgba(7,20,33,.97);box-shadow:0 15px 35px rgba(0,0,0,.45);color:#b8c6d8;font-size:9px;line-height:1.5;opacity:0;visibility:hidden;transform:translateY(4px);transition:all var(--motion-normal) var(--ease-premium); }
.route-dashboard .who[data-work-profile]:hover::after,.route-dashboard .who[data-work-profile]:focus::after { opacity:1;visibility:visible;transform:none; }

.route-dashboard .health__gauge { filter:drop-shadow(0 0 9px rgba(255,176,32,.12)); }
.route-dashboard .cc-side .health__gauge { width:110px;height:110px; }.route-dashboard .cc-side .health__score strong{font-size:2rem}.route-dashboard .cc-side .health{padding-bottom:5px}.route-dashboard .cc-side .health__hint{font-size:9px}.route-dashboard .cc-side .factors{padding-top:5px}.route-dashboard .cc-side .factors a{padding:2px 4px;font-size:10px}
.route-dashboard .gauge__value { stroke:url(#health-gauge-gradient);filter:drop-shadow(0 0 3px rgba(255,176,32,.35)); }
.route-dashboard .attention a:hover { transform:translateX(2px); }
.route-dashboard .attention a { transition:background var(--motion-fast) var(--ease-soft),transform var(--motion-fast) var(--ease-premium); }
.route-dashboard .data tbody tr { transition:background var(--motion-fast) var(--ease-soft),box-shadow var(--motion-fast) var(--ease-soft); }
.route-dashboard .data tbody tr:hover { background:#0a2034;box-shadow:inset 2px 0 #176bff; }
.route-dashboard .bar__value { filter:drop-shadow(1px 0 3px rgba(42,140,255,.7)); }
.route-dashboard .btn:active,.route-dashboard .icon-button:active { transform:scale(.97); }

.cc-drawer { position:fixed;inset:0;z-index:110;display:flex;justify-content:flex-end; }
.cc-drawer[hidden] { display:none; }
.cc-drawer__backdrop { position:absolute;inset:0;border:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px); }
.cc-drawer__panel { position:relative;width:min(390px,calc(100vw - 24px));height:100%;display:flex;flex-direction:column;border-left:1px solid rgba(42,140,255,.48);background:#071521;box-shadow:-24px 0 70px rgba(0,0,0,.48);animation:drawer-in var(--motion-medium) var(--ease-premium) both; }
@keyframes drawer-in { from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none} }
.cc-drawer__head { display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px;border-bottom:1px solid var(--border); }
.cc-drawer__head h2 { font-size:1.15rem; }.cc-drawer__body{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:20px}.cc-drawer__body>p{color:var(--text-secondary);font-size:13px;line-height:1.6}.cc-drawer__body dl{width:100%;margin:0}.cc-drawer__body dl>div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--border)}.cc-drawer__body dt{color:var(--text-muted);font-size:11px}.cc-drawer__body dd{margin:0;color:var(--text-primary);font-size:11px;font-weight:600}.cc-drawer__foot{margin-top:auto;padding:16px 20px;border-top:1px solid var(--border)}.cc-drawer__foot .btn{width:100%}

@media (max-width:1560px) {
  .route-dashboard .cc-layout { grid-template-columns:minmax(0,1fr) 292px; }
  .route-dashboard .cc-strip { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .route-dashboard .cc-strip__col:nth-child(-n+3) { border-bottom:0; }
  .route-dashboard .cc-strip__col:nth-child(3n) { border-right:1px solid var(--border); }
  .route-dashboard .cc-strip__col:last-child { border-right:0; }
}
@media (max-width:1180px) {
  .route-dashboard .cc-layout { grid-template-columns:minmax(0,1fr); }
  .route-dashboard .cc-side { position:static;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); }
  .route-dashboard .cc-filters { grid-template-columns:repeat(3,minmax(140px,1fr)); }
  .route-dashboard .cc-filters__actions { grid-column:1/-1;margin-left:0;padding-top:7px; }
  .route-dashboard .cc-command-row,.route-dashboard .cc-row--recent { grid-template-columns:minmax(0,1fr); }
  .digital-twin { width:74%; }.pumpjack{right:20%;width:296px;height:184px}.digital-twin__link{right:20%;width:296px;height:184px}.telemetry--pressure{left:22%}.telemetry--load{left:8%;top:112px}
}
@media (max-width:1024px) {
  .cc-hero { min-height:286px; }.cc-hero .cc-head__identity{align-self:flex-start;min-width:0}.digital-twin{top:96px;width:100%;height:190px}.pumpjack{right:14%;width:306px;height:190px}.digital-twin__link{right:14%;width:306px;height:190px}.telemetry--pressure{left:16%;top:14px}.telemetry--load{left:3%;top:92px}
  .route-dashboard .cc-side { grid-template-columns:minmax(0,1fr); }
  .route-dashboard .cc-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .route-dashboard .cc-strip__col { border-bottom:1px solid var(--border)!important; }
  .route-dashboard .cc-strip__col:nth-child(2n){border-right:0!important}
  .route-dashboard .cc-row--chart { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:720px) {
  .route-dashboard .app-content{padding:10px}.cc-hero{min-height:262px}.cc-hero .cc-head__identity{padding-top:2px}.cc-head__meta{max-width:82%}.digital-twin{opacity:.84;transform:scale(.88);transform-origin:right bottom}.cc-hero__cta{top:auto;bottom:5px;right:5px}.telemetry{display:none}
  .route-dashboard .cc-filters { grid-template-columns:minmax(0,1fr); }.route-dashboard .cc-filter{padding:4px 0;border-right:0}.route-dashboard .cc-filters__actions{grid-column:auto;overflow-x:auto}
  .route-dashboard .cc-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.route-dashboard .mkpi{min-height:124px}.route-dashboard .cc-row--recent{grid-template-columns:minmax(0,1fr)}
  .command-palette__links{grid-template-columns:minmax(0,1fr)}.topbar__live{display:none}
}

@media (prefers-reduced-motion:reduce) {
  .cc-ambient,.digital-twin__signals{display:none}.pj-beam,.pj-crank,.pj-pitman,.pj-rod,.telemetry,.topbar__live i,.pipeline::after{animation:none!important}.pumpjack{animation:none}.route-dashboard .cc .card:hover,.route-dashboard .cc .mkpi:hover{transform:none}
}

/* ==========================================================================
   8. PREMIUM LAYER  ·  applies to every page, both themes
   --------------------------------------------------------------------------
   Everything below is additive: it changes how the existing components feel,
   never what they are. Nothing here introduces a class the views do not
   already render, so no page markup had to change to receive it.

   Order matters — this section is last in the file, so where a rule ties on
   specificity with an earlier one it wins. Interaction states are written one
   step more specific than the resting state on purpose.
   ========================================================================== */

:root {
  /* Ambient canvas — the technical grid and the two light sources behind
     every page. Redefined per theme further down. */
  --amb-line: rgba(70, 130, 210, .05);
  --amb-cell: 44px;
  --amb-glow-1: rgba(23, 107, 255, .10);
  --amb-glow-2: rgba(120, 70, 240, .05);

  /* Elevation is a scale, not a decoration: rest → hover → floating. */
  --lift-1: 0 2px 6px rgba(6, 20, 40, .06);
  --lift-2: 0 10px 26px rgba(6, 20, 40, .10), 0 2px 6px rgba(6, 20, 40, .06);
  --lift-3: 0 22px 54px rgba(6, 20, 40, .16), 0 4px 12px rgba(6, 20, 40, .08);

  /* One hairline of light along the top of a raised surface — the single
     detail that separates a real card from a coloured rectangle. */
  --edge-light: rgba(255, 255, 255, .55);
  --sheen: rgba(255, 255, 255, .5);
}

[data-theme="dark"] {
  --amb-line: rgba(64, 122, 200, .035);
  --amb-glow-1: rgba(23, 107, 255, .16);
  --amb-glow-2: rgba(96, 56, 220, .07);
  --lift-1: 0 2px 6px rgba(0, 0, 0, .32);
  --lift-2: 0 12px 30px rgba(0, 0, 0, .42), 0 2px 6px rgba(0, 0, 0, .3);
  --lift-3: 0 26px 62px rgba(0, 0, 0, .55), 0 6px 16px rgba(0, 0, 0, .35);
  --edge-light: rgba(150, 200, 255, .10);
  --sheen: rgba(140, 200, 255, .16);
}

/* ---------------------------------------------------- 8.1 ambient canvas --
   A fixed grid and two slow light sources sit behind the content of every
   route. It is a pseudo-element on the content column, so the sidebar is
   never touched and no view had to gain a wrapper. */
.app-body { position: relative; isolation: isolate; }
.app-body::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(var(--amb-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--amb-line) 1px, transparent 1px),
    radial-gradient(circle at 78% -4%, var(--amb-glow-1), transparent 44%),
    radial-gradient(circle at 4% 102%, var(--amb-glow-2), transparent 46%);
  background-size: var(--amb-cell) var(--amb-cell), var(--amb-cell) var(--amb-cell), auto, auto;
  background-attachment: fixed, fixed, fixed, fixed;
}
/* The command centre paints its own canvas; it does not need a second one. */
.route-dashboard .app-body::before { display: none; }

/* ------------------------------------------------ 8.2 load choreography --
   The shell arrives first, then the page settles into place one block at a
   time. Everything is time-driven, never scroll-driven, so a page always
   reaches its resting state whether or not anyone scrolls. */
@keyframes shell-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise-in  { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes slide-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  .sidebar { animation: slide-in 420ms var(--ease-premium) both; }
  .topbar  { animation: shell-in 340ms var(--ease-soft) 70ms both; }
  .app-content > * { animation: rise-in 460ms var(--ease-premium) both; }
  .app-content > *:nth-child(1) { animation-delay: 130ms; }
  .app-content > *:nth-child(2) { animation-delay: 175ms; }
  .app-content > *:nth-child(3) { animation-delay: 215ms; }
  .app-content > *:nth-child(4) { animation-delay: 250ms; }
  .app-content > *:nth-child(5) { animation-delay: 280ms; }
  .app-content > *:nth-child(n+6) { animation-delay: 305ms; }
}

/* ------------------------------------------------------- 8.3 page head --- */
.app .page-head { position: relative; padding-bottom: 15px; }
.app .page-head::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 26%, transparent) 22%, transparent 58%);
  opacity: .7;
}
.app .page-head__title {
  font-size: 1.6rem; font-weight: var(--weight-bold);
  letter-spacing: -.016em; line-height: 1.18; text-wrap: balance;
}
.app .page-head__description { max-width: 78ch; }
.app .breadcrumb { font-size: var(--text-caption); letter-spacing: .045em; text-transform: uppercase; }
.app .breadcrumb a { transition: color var(--motion-fast) var(--ease-soft); }
.app .page-head__actions { align-items: center; }

/* Small uppercase kickers earn their letter-spacing. */
.app .section-kicker, .app .eyebrow {
  letter-spacing: .1em; text-transform: uppercase;
  font-size: var(--text-caption); font-weight: var(--weight-bold);
  color: var(--text-muted);
}

/* ----------------------------------------------------------- 8.4 cards ---
   Card = surface + a hairline of light on its top edge + a shadow that grows
   when you point at it. The cursor spotlight is the same one the command
   centre uses, promoted to every page. */
.app .card {
  position: relative;
  background: var(--cc-card, var(--bg-surface));
  box-shadow: var(--lift-1);
  transition: transform var(--motion-normal) var(--ease-premium),
              border-color var(--motion-normal) var(--ease-premium),
              box-shadow var(--motion-normal) var(--ease-premium);
}
.app .card::before {
  content: "";
  position: absolute; left: 14px; right: 14px; top: 0; height: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--edge-light), transparent);
  pointer-events: none;
}
.app .card::after {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; opacity: 0; border-radius: inherit;
  background: radial-gradient(420px circle at var(--spot-x, 50%) var(--spot-y, 50%),
              color-mix(in srgb, var(--accent) 9%, transparent), transparent 44%);
  transition: opacity var(--motion-normal) var(--ease-premium);
}
.app .card:hover::after { opacity: 1; }
.app .card > * { position: relative; z-index: 1; }
.app .card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  box-shadow: var(--lift-2);
}
/* A card that is itself a link gets the stronger affordance. */
.app a.card:hover, .app .card.is-clickable:hover { box-shadow: var(--lift-3); }

.app .card__head {
  position: relative;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, transparent), transparent);
}
.app .card__title {
  font-size: var(--text-body); font-weight: var(--weight-bold);
  letter-spacing: .01em; display: flex; align-items: center; gap: 8px;
}
.app .card__title::before {
  content: ""; width: 3px; height: 13px; border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 25%, transparent));
  flex: none;
}
.app .card__link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  transition: gap var(--motion-fast) var(--ease-premium);
}
.app .card__link:hover { gap: 8px; text-decoration: none; }

/* ---------------------------------------------------------- 8.5 tables ---
   Dense by necessity, so the work goes into legibility: a header that reads
   as a header, one hairline per row, a hover state that says "this row is a
   thing you can open", and figures that line up in columns. */
.app .table-wrap { border-radius: inherit; scrollbar-width: thin; }
.app .table-wrap::-webkit-scrollbar { height: 9px; }
.app .table-wrap::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius: 999px;
}
.app table.data thead th {
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--accent) 7%, var(--bg-subtle)), var(--bg-subtle));
  font-size: 10px; letter-spacing: .09em;
  border-bottom-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  backdrop-filter: blur(8px);
}
.app table.data thead th a:hover { color: var(--accent); text-decoration: none; }
.app table.data tbody tr {
  transition: background var(--motion-fast) var(--ease-soft),
              box-shadow var(--motion-fast) var(--ease-soft);
}
.app table.data tbody tr:hover {
  background: var(--bg-hover);
  box-shadow: inset 3px 0 0 var(--accent);
}
.app table.data tbody tr[data-selected="true"] { box-shadow: inset 3px 0 0 var(--accent); }
.app table.data tbody tr.is-clickable, .app table.data tbody tr[data-href] { cursor: pointer; }
.app table.data tbody td { border-bottom-color: color-mix(in srgb, var(--border) 78%, transparent); }
.app table.data td.numeric, .app table.data th.numeric,
.app .cell-num, .app .numeric { font-variant-numeric: tabular-nums; }
.app .cell-mono { letter-spacing: -.01em; }
.app .cell-strong { letter-spacing: -.005em; }

/* Rows arrive in sequence rather than all at once. Capped at twelve: past
   that the eye reads it as one block anyway and the delay would just feel
   like the page is slow. */
@media (prefers-reduced-motion: no-preference) {
  .app table.data tbody tr { animation: rise-in 320ms var(--ease-premium) both; }
  .app table.data tbody tr:nth-child(1)  { animation-delay: 20ms; }
  .app table.data tbody tr:nth-child(2)  { animation-delay: 40ms; }
  .app table.data tbody tr:nth-child(3)  { animation-delay: 60ms; }
  .app table.data tbody tr:nth-child(4)  { animation-delay: 78ms; }
  .app table.data tbody tr:nth-child(5)  { animation-delay: 94ms; }
  .app table.data tbody tr:nth-child(6)  { animation-delay: 108ms; }
  .app table.data tbody tr:nth-child(7)  { animation-delay: 120ms; }
  .app table.data tbody tr:nth-child(8)  { animation-delay: 130ms; }
  .app table.data tbody tr:nth-child(9)  { animation-delay: 138ms; }
  .app table.data tbody tr:nth-child(10) { animation-delay: 144ms; }
  .app table.data tbody tr:nth-child(11) { animation-delay: 148ms; }
  .app table.data tbody tr:nth-child(n+12) { animation-delay: 150ms; }
}

/* Every progress bar in the application draws itself from zero. The rect
   carries its real width from the server; scaleX about x=0 animates to it
   without JavaScript ever touching the value. */
@keyframes bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: no-preference) {
  .app .bar__value { transform-origin: 0 50%; animation: bar-grow 820ms var(--ease-premium) 180ms both; }
}
.app .cell-progress .bar { border-radius: 999px; overflow: hidden; }
.app .cell-progress i { font-size: 10px; font-weight: var(--weight-semibold); }

/* --------------------------------------------------------- 8.6 buttons ---
   Every control answers back: a light sweep on hover, a real press, a
   spinner that replaces the label without the button changing size. */
.app .btn, .auth .btn {
  position: relative; overflow: hidden;
  letter-spacing: .005em;
  transition: background var(--motion-fast) var(--ease-soft),
              border-color var(--motion-fast) var(--ease-soft),
              color var(--motion-fast) var(--ease-soft),
              box-shadow var(--motion-normal) var(--ease-premium),
              transform var(--motion-fast) var(--ease-premium);
}
.app .btn::after, .auth .btn::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 32%, var(--sheen) 50%, transparent 68%);
  transform: translateX(-115%);
  pointer-events: none;
}
.app .btn:hover::after, .auth .btn:hover::after {
  transition: transform 620ms var(--ease-soft);
  transform: translateX(115%);
}
.app .btn svg, .auth .btn svg { transition: transform var(--motion-normal) var(--ease-premium); }
.app .btn:hover svg:first-child, .auth .btn:hover svg:first-child { transform: translateX(1px) scale(1.06); }
.app .btn:active, .auth .btn:active { transform: scale(.975); }

.app .btn--primary, .auth .btn--primary {
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--accent) 88%, #4f9bff),
              var(--accent) 55%,
              color-mix(in srgb, var(--accent) 82%, #0b3fbe));
  border-color: color-mix(in srgb, var(--accent) 70%, #6cb0ff);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .16) inset,
              0 6px 18px color-mix(in srgb, var(--accent) 28%, transparent);
}
.app .btn--primary:hover, .auth .btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset,
              0 10px 26px color-mix(in srgb, var(--accent) 40%, transparent);
}
.app .btn--primary:active, .auth .btn--primary:active { transform: translateY(0) scale(.975); }
.app .btn--secondary:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong)); }
.app .btn--ghost:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); }
.app .btn--danger { box-shadow: 0 6px 18px color-mix(in srgb, var(--danger) 26%, transparent); }
.app .btn--success { box-shadow: 0 6px 18px color-mix(in srgb, var(--success) 26%, transparent); }
.app .btn.is-loading::after, .auth .btn.is-loading::after { display: none; }

.app .icon-button {
  position: relative;
  transition: background var(--motion-fast) var(--ease-soft),
              color var(--motion-fast) var(--ease-soft),
              transform var(--motion-fast) var(--ease-premium),
              box-shadow var(--motion-normal) var(--ease-premium);
}
.app .icon-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent),
              0 6px 16px rgba(0, 0, 0, .12);
}
.app .icon-button:active { transform: scale(.94); }
/* A new unread count announces itself once, then sits still. */
@keyframes count-pop { 0% { transform: scale(.8); } 55% { transform: scale(1.13); } 100% { transform: scale(1); } }
.app .icon-button__dot, .app .nav-item__count { animation: count-pop 280ms var(--ease-premium) both; }

/* ------------------------------------------------------ 8.7 form fields ---
   The focused field is the only lit thing on the screen. */
.app input[type="text"], .app input[type="email"], .app input[type="password"],
.app input[type="number"], .app input[type="date"], .app input[type="time"],
.app input[type="datetime-local"], .app input[type="search"],
.app select, .app textarea,
.auth input, .auth select, .auth textarea {
  transition: border-color var(--motion-fast) var(--ease-soft),
              box-shadow var(--motion-normal) var(--ease-premium),
              background var(--motion-fast) var(--ease-soft);
}
.app input:hover:not([disabled]):not([readonly]),
.app select:hover:not([disabled]), .app textarea:hover:not([disabled]) {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border-strong));
}
.app input:focus, .app select:focus, .app textarea:focus,
.auth input:focus, .auth select:focus, .auth textarea:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent),
              0 0 22px color-mix(in srgb, var(--accent) 14%, transparent);
}
.app .field { position: relative; }
.app .field__label { transition: color var(--motion-fast) var(--ease-soft); }
.app .field:focus-within .field__label { color: var(--accent); }
.app .field:focus-within .field__label .required { color: var(--danger); }
.app select { background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; }
.app .check--card { transition: border-color var(--motion-fast) var(--ease-soft), background var(--motion-fast) var(--ease-soft), transform var(--motion-fast) var(--ease-premium), box-shadow var(--motion-normal) var(--ease-premium); }
.app .check--card:hover { transform: translateY(-1px); box-shadow: var(--lift-1); }
.app .check--card:has(input:checked) { box-shadow: 0 0 0 1px var(--accent), var(--lift-1); }

.app .filters {
  position: relative;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, transparent), transparent);
}
.app .filters::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 45%, transparent), transparent);
  opacity: 0; transition: opacity var(--motion-medium) var(--ease-premium);
}
.app .filters:focus-within::after { opacity: 1; }

.app .segmented { border: 1px solid var(--border); }
.app .segmented a, .app .segmented button { transition: background var(--motion-fast) var(--ease-soft), color var(--motion-fast) var(--ease-soft); }
.app .segmented [aria-pressed="true"], .app .segmented .is-active {
  background: color-mix(in srgb, var(--accent) 16%, var(--bg-surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent), var(--lift-1);
}

/* ------------------------------------------------- 8.8 status semantics ---
   Colour never carries a state on its own: every badge has an icon, every
   dot has a label beside it, and the pill shape reinforces the family. */
.app .badge, .app .pill, .app .sev, .app .trend {
  transition: transform var(--motion-fast) var(--ease-premium), box-shadow var(--motion-fast) var(--ease-soft);
}
.app tr:hover .badge { transform: translateY(-1px); }
.app .badge--danger  { box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 18%, transparent); }
.app .status-pill__led, .app .dot {
  position: relative;
  box-shadow: 0 0 10px currentColor;
}
@keyframes led-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.app .status-pill--danger .status-pill__led { animation: led-breathe 2.2s var(--ease-soft) infinite; }

/* ------------------------------------------------- 8.9 KPI / stat blocks -- */
.app .kpi, .app .bigstat {
  position: relative; overflow: hidden;
  transition: transform var(--motion-normal) var(--ease-premium), box-shadow var(--motion-normal) var(--ease-premium), border-color var(--motion-normal) var(--ease-premium);
}
.app a.kpi:hover, .app .kpi.is-clickable:hover {
  transform: translateY(-2px); box-shadow: var(--lift-2); text-decoration: none;
}
.app .kpi__value, .app .bigstat b { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.app .metriclist b, .app .metriclist strong { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- 8.10 stepper ----- */
.app .step__marker { transition: all var(--motion-normal) var(--ease-premium); }
.app .step[data-state="current"] .step__marker {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent),
              0 0 20px color-mix(in srgb, var(--accent) 40%, transparent);
}
.app .step__line { overflow: hidden; position: relative; }
.app .step[data-state="done"] + .step__line { background: var(--success); }
@media (prefers-reduced-motion: no-preference) {
  .app .step[data-state="done"] + .step__line { animation: bar-grow 520ms var(--ease-premium) both; transform-origin: 0 50%; }
}

/* ------------------------------------- 8.11 notice, empty, skeleton, menu -- */
.app .notice { position: relative; overflow: hidden; box-shadow: var(--lift-1); }
.app .notice::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, currentColor, transparent 40%); opacity: .05;
}
.app .empty { position: relative; }
.app .empty__icon {
  position: relative;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 7%, transparent);
}
@keyframes empty-halo { 0%, 100% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 6%, transparent); } 50% { box-shadow: 0 0 0 11px color-mix(in srgb, var(--accent) 3%, transparent); } }
@media (prefers-reduced-motion: no-preference) {
  .app .empty__icon { animation: empty-halo 3.6s var(--ease-soft) infinite; }
}
.app .menu[data-open="true"] .menu__panel {
  animation: menu-rise var(--motion-normal) var(--ease-premium);
  box-shadow: var(--lift-3);
}
@keyframes menu-rise { from { opacity: 0; transform: translateY(-6px) scale(.985); } to { opacity: 1; transform: none; } }
.app .menu__item { transition: background var(--motion-fast) var(--ease-soft), padding-left var(--motion-fast) var(--ease-premium); }
.app .menu__item:hover { padding-left: calc(var(--space-3) + 3px); }

.app .pagination__pages a { transition: all var(--motion-fast) var(--ease-premium); }
.app .pagination__pages a:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.app .pagination__pages [aria-current="page"] { box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 34%, transparent); }

/* --------------------------------------------- 8.12 the light theme, lit ---
   Light is not "the dark theme with the lights on". It is pearl and cool
   blue-grey with real depth: tinted neutrals, glass surfaces, and shadows
   that carry a trace of the accent so nothing looks stamped on paper. */
:root:not([data-theme="dark"]), [data-theme="light"] {
  --bg-canvas: #eef2f9;
  --bg-surface: #ffffff;
  --bg-surface-raised: #ffffff;
  --bg-subtle: #f5f8fc;
  --bg-inset: #e9eff7;
  --bg-hover: #eff4fc;
  --bg-selected: #e4edff;
  --border: #dde5f0;
  --border-strong: #c4d0e2;
  --text-primary: #0d1b2d;
  --text-secondary: #47586f;
  --text-muted: #6a7c94;
  --skeleton-base: #e6ecf5;
  --skeleton-shine: #f4f7fc;
  --shadow-sm: 0 1px 2px rgba(19, 48, 92, .06), 0 1px 3px rgba(19, 48, 92, .04);
  --shadow-md: 0 6px 18px rgba(19, 48, 92, .09);
  --shadow-lg: 0 22px 52px rgba(19, 48, 92, .16);
  --lift-1: 0 1px 2px rgba(19, 48, 92, .05), 0 2px 8px rgba(19, 48, 92, .04);
  --lift-2: 0 10px 26px rgba(19, 48, 92, .10), 0 2px 6px rgba(19, 48, 92, .05);
  --lift-3: 0 22px 54px rgba(19, 48, 92, .16), 0 4px 12px rgba(19, 48, 92, .07);
  --amb-line: rgba(58, 110, 190, .055);
  --amb-glow-1: rgba(40, 118, 255, .10);
  --amb-glow-2: rgba(126, 84, 235, .06);
  --edge-light: rgba(255, 255, 255, .9);
  --sheen: rgba(255, 255, 255, .55);
}
:root:not([data-theme="dark"]) body, [data-theme="light"] body {
  background:
    radial-gradient(circle at 72% -4%, rgba(40, 118, 255, .08), transparent 38%),
    radial-gradient(circle at 6% 96%, rgba(126, 84, 235, .05), transparent 40%),
    linear-gradient(180deg, #f2f6fc, #eaeff8);
  background-attachment: fixed;
}
:root:not([data-theme="dark"]) .topbar, [data-theme="light"] .topbar {
  background: rgba(255, 255, 255, .82);
  border-bottom-color: rgba(150, 175, 210, .34);
  box-shadow: 0 6px 22px rgba(19, 48, 92, .05);
  backdrop-filter: blur(18px);
}
:root:not([data-theme="dark"]) .card, [data-theme="light"] .card,
:root:not([data-theme="dark"]) .kpi, [data-theme="light"] .kpi {
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  border-color: #dde5f0;
}
:root:not([data-theme="dark"]) .app table.data thead th, [data-theme="light"] .app table.data thead th {
  background: linear-gradient(180deg, #eef4fd, #e9f0fa);
  color: #46586f;
}
:root:not([data-theme="dark"]) .topbar__search-trigger, [data-theme="light"] .topbar__search-trigger,
:root:not([data-theme="dark"]) .topbar__search input, [data-theme="light"] .topbar__search input {
  background: #f3f7fd; border-color: #d3ddec;
}
:root:not([data-theme="dark"]) .topbar__search-trigger:hover, [data-theme="light"] .topbar__search-trigger:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

/* The sidebar is the brand panel and stays dark navy in both themes — that is
   how SLB uses the white mark — so it keeps the same treatment as dark. */
:root:not([data-theme="dark"]) .sidebar, [data-theme="light"] .sidebar {
  background:
    radial-gradient(circle at 35% 84%, rgba(10, 81, 191, .14), transparent 30%),
    linear-gradient(180deg, #041020 0%, #06182c 52%, #071f36 100%);
  border-right-color: rgba(31, 124, 255, .22);
  box-shadow: 10px 0 40px rgba(9, 34, 78, .14);
}
:root:not([data-theme="dark"]) .nav-item, [data-theme="light"] .nav-item {
  position: relative; border: 1px solid transparent; border-radius: 8px;
  transition: transform var(--motion-normal) var(--ease-premium),
              background var(--motion-normal) var(--ease-premium),
              border-color var(--motion-normal) var(--ease-premium),
              color var(--motion-normal) var(--ease-premium);
}
:root:not([data-theme="dark"]) .nav-item:hover, [data-theme="light"] .nav-item:hover {
  transform: translateX(2px);
  background: linear-gradient(90deg, rgba(20, 80, 210, .16), rgba(15, 70, 190, .03));
}
:root:not([data-theme="dark"]) .nav-item[aria-current="page"], [data-theme="light"] .nav-item[aria-current="page"] {
  background: linear-gradient(90deg, rgba(20, 80, 210, .3), rgba(15, 70, 190, .1));
  border-color: rgba(37, 104, 255, .7);
}

/* ------------------------------------------------------- 8.13 sign in -----
   The first screen anyone sees. Ambient field, a glass panel, and the mark
   given room — the same command-centre language as the rest of the product. */
.auth { position: relative; overflow: hidden; }
.auth::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 12% 12%, rgba(23, 107, 255, .22), transparent 34%),
    radial-gradient(circle at 88% 86%, rgba(120, 60, 240, .16), transparent 36%);
}
.auth__brandside { z-index: 1; }
.auth__brandside::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 30% 78%, rgba(16, 215, 255, .12), transparent 42%);
}
.auth__panel { position: relative; z-index: 1; }
.auth__form {
  position: relative;
  padding: 34px 32px 32px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
  box-shadow: var(--lift-3);
  backdrop-filter: blur(16px);
}
.auth__form::before {
  content: "";
  position: absolute; left: 22px; right: 22px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--edge-light), transparent);
}
.auth__tagline { letter-spacing: -.02em; text-wrap: balance; }
.auth__points li {
  padding: 9px 12px; border-radius: 10px;
  border: 1px solid rgba(120, 170, 240, .14);
  background: rgba(10, 32, 64, .3);
  transition: border-color var(--motion-normal) var(--ease-premium),
              transform var(--motion-normal) var(--ease-premium);
}
.auth__points li:hover { transform: translateX(3px); border-color: rgba(60, 150, 255, .42); }
.auth__points svg { color: #4aa8ff; flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .auth__brandside { animation: slide-in 560ms var(--ease-premium) both; }
  .auth__form { animation: rise-in 520ms var(--ease-premium) 120ms both; }
  .auth__points li { animation: rise-in 460ms var(--ease-premium) both; }
  .auth__points li:nth-child(1) { animation-delay: 260ms; }
  .auth__points li:nth-child(2) { animation-delay: 320ms; }
  .auth__points li:nth-child(3) { animation-delay: 380ms; }
}

/* ------------------------------------------------- 8.14 drawers + toasts --- */
.app .cc-drawer__panel, .command-palette__panel { box-shadow: var(--lift-3); }
.toast {
  box-shadow: var(--lift-3);
  animation: toast-in var(--motion-medium) var(--ease-premium) both;
}
@keyframes toast-in { from { opacity: 0; transform: translateX(16px) scale(.98); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------- 8.15 accessibility ---
   Reduced motion keeps every state change that carries meaning and drops
   every loop that is only atmosphere. */
@media (prefers-reduced-motion: reduce) {
  .app-body::before { background-attachment: scroll; }
  .sidebar, .topbar, .app-content > *, .app table.data tbody tr,
  .auth__brandside, .auth__form, .auth__points li,
  .app .bar__value, .app .empty__icon, .app .icon-button__dot,
  .app .nav-item__count, .app .status-pill--danger .status-pill__led,
  .toast { animation: none !important; }
  .app .card:hover, .app a.kpi:hover, .app .check--card:hover,
  .app .btn--primary:hover, .app .icon-button:hover,
  .app .pagination__pages a:hover { transform: none; }
  .app .btn::after, .auth .btn::after { display: none; }
}

/* Focus is never invisible and never only a colour change. */
.app a:focus-visible, .app button:focus-visible, .app [tabindex]:focus-visible,
.auth a:focus-visible, .auth button:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ------------------------------------------------------------ 8.16 print --
   Operations print job sheets and hand them to a rig. Ink on white, no
   ambient, no shadows, tables allowed to break across pages. */
@media print {
  .sidebar, .topbar, .toasts, .command-palette, .cc-ambient,
  .digital-twin, .page-head__actions, .pagination__pages,
  .app-body::before { display: none !important; }
  .app { grid-template-columns: minmax(0, 1fr) !important; }
  body, .app-body, .app-content, .card, table.data thead th {
    background: #fff !important; color: #000 !important; box-shadow: none !important;
  }
  .card { border: 1px solid #bbb !important; break-inside: avoid; }
  table.data tbody tr { break-inside: avoid; }
  a[href]::after { content: ""; }
}

/* A backgrounded tab keeps none of the atmosphere running. */
.is-paused .app .empty__icon,
.is-paused .app .status-pill--danger .status-pill__led,
.is-paused .topbar__live i { animation-play-state: paused; }

/* ------------------------------------------- 8.17 KPI tile, straightened ---
   .kpi was a block containing three inline spans, so the value's margin-top
   was ignored and the number ran straight into its caption ("23from last 7
   days"). A column with real gaps fixes it everywhere the tile is used. */
.app .kpi { display: flex; flex-direction: column; gap: 3px; }
.app .kpi__label { margin: 0; }
.app .kpi__value {
  margin-top: 2px;
  font-size: 1.75rem; font-weight: var(--weight-bold);
  line-height: 1.05; letter-spacing: -.022em;
}
.app .kpi__meta { color: var(--text-muted); font-size: var(--text-caption); line-height: 1.4; }
.app .kpi::after { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }

/* -------------------------------------------- 8.18 the remaining furniture -
   Small shared pieces that appear on many pages and were the last things
   still reading as default browser styling. */
.app .avatar, .app .who__avatar, .app .feed__avatar {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent),
              0 2px 8px rgba(0, 0, 0, .16);
}
.app .tag { transition: border-color var(--motion-fast) var(--ease-soft); }
.app .tag:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.app .metriclist > * { transition: background var(--motion-fast) var(--ease-soft); border-radius: 6px; }
.app .metriclist > *:hover { background: var(--bg-hover); }
.app .chart-shell { position: relative; border-radius: var(--radius-md); overflow: hidden; }
.app .legend { font-size: var(--text-caption); color: var(--text-muted); }
.app .feed__ref { font-weight: var(--weight-semibold); }
.app .callout-summary { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }

/* Skeletons shimmer once the way the real content will arrive, never faster. */
@keyframes skeleton-sweep { from { background-position: -180% 0; } to { background-position: 180% 0; } }
.app .skeleton, .app [data-skeleton] {
  background: linear-gradient(100deg, var(--skeleton-base) 40%, var(--skeleton-shine) 50%, var(--skeleton-base) 60%);
  background-size: 220% 100%;
  border-radius: var(--radius-sm);
}
@media (prefers-reduced-motion: no-preference) {
  .app .skeleton, .app [data-skeleton] { animation: skeleton-sweep 1.5s var(--ease-soft) infinite; }
}
.is-paused .app .skeleton, .is-paused .app [data-skeleton] { animation-play-state: paused; }

/* ==========================================================================
   9. HISTORICAL DATA + EMPLOYEE COMPLIANCE
   --------------------------------------------------------------------------
   Two features, one visual language: status is carried by a colour, an icon and
   a number of days together, never by colour alone.
   ========================================================================== */

/* --------------------------------------------------- employee cards ------ */
.compliance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-4);
}
.compliance-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--cc-card, var(--bg-surface));
  color: var(--text-primary);
  box-shadow: var(--lift-1);
  transition: transform var(--motion-normal) var(--ease-premium),
              box-shadow var(--motion-normal) var(--ease-premium),
              border-color var(--motion-normal) var(--ease-premium);
}
.compliance-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--tone, var(--accent));
}
.compliance-card--danger { --tone: var(--danger); }
.compliance-card--warning { --tone: var(--warning); }
.compliance-card--success { --tone: var(--success); }
.compliance-card--neutral { --tone: var(--neutral); }
.compliance-card:hover {
  transform: translateY(-2px); text-decoration: none;
  box-shadow: var(--lift-2);
  border-color: color-mix(in srgb, var(--tone) 45%, var(--border));
}
.compliance-card__head { display: flex; align-items: center; gap: var(--space-3); }
.compliance-card__identity { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.compliance-card__identity strong { font-size: var(--text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compliance-card__identity span { color: var(--text-muted); font-size: var(--text-caption); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compliance-card__docs { display: flex; flex-direction: column; gap: 3px; }

.compliance-doc {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: var(--space-2);
  padding: 6px var(--space-2);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--tone, var(--neutral)) 8%, transparent);
}
.compliance-doc--danger { --tone: var(--danger); }
.compliance-doc--warning { --tone: var(--warning); }
.compliance-doc--success { --tone: var(--success); }
.compliance-doc--neutral { --tone: var(--neutral); }
.compliance-doc__icon { grid-row: 1 / 3; display: grid; place-items: center; color: var(--tone); }
.compliance-doc__name { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.compliance-doc__date { font-size: var(--text-caption); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.compliance-doc__days {
  grid-column: 2 / 4; grid-row: 2;
  font-size: var(--text-caption); color: var(--tone); font-weight: var(--weight-semibold);
}

/* ------------------------------------------------ upcoming expirations --- */
.upcoming { display: flex; flex-direction: column; }
.upcoming__row { border-bottom: 1px solid var(--border); }
.upcoming__row:last-child { border-bottom: 0; }
.upcoming__row a {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 14px;
  align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--text-primary);
  transition: background var(--motion-fast) var(--ease-soft), padding-left var(--motion-fast) var(--ease-premium);
}
.upcoming__row a:hover { background: var(--bg-hover); text-decoration: none; padding-left: calc(var(--space-4) + 3px); }
.upcoming__icon {
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--tone, var(--accent)) 14%, transparent);
  color: var(--tone, var(--accent));
}
.upcoming__row--danger { --tone: var(--danger); }
.upcoming__row--warning { --tone: var(--warning); }
.upcoming__row--success { --tone: var(--success); }
.upcoming__row--neutral { --tone: var(--neutral); }
.upcoming__body { display: flex; flex-direction: column; min-width: 0; }
.upcoming__body strong { font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upcoming__body span { color: var(--text-muted); font-size: var(--text-caption); }
.upcoming__days { font-size: var(--text-caption); font-weight: var(--weight-semibold); color: var(--tone); white-space: nowrap; }

/* ----------------------------------------------------- expiry calendar --- */
.expiry-calendar {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px;
}
.expiry-calendar__weekday {
  padding: 4px 6px;
  font-size: 10px; font-weight: var(--weight-bold); letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-muted);
}
.expiry-calendar__day {
  display: flex; flex-direction: column; gap: 3px;
  min-height: 96px; padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}
.expiry-calendar__day--empty { background: transparent; border-color: transparent; }
.expiry-calendar__day.is-today {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 18px color-mix(in srgb, var(--accent) 22%, transparent);
}
.expiry-calendar__number {
  font-size: var(--text-caption); font-weight: var(--weight-semibold);
  color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.expiry-calendar__more { font-size: 10px; color: var(--text-muted); padding-left: 2px; }
.expiry-chip {
  display: flex; flex-direction: column; gap: 1px;
  padding: 3px 6px; border-radius: 5px;
  border-left: 2px solid var(--tone, var(--accent));
  background: color-mix(in srgb, var(--tone, var(--accent)) 12%, transparent);
  color: var(--text-primary);
  transition: transform var(--motion-fast) var(--ease-premium), background var(--motion-fast) var(--ease-soft);
}
.expiry-chip:hover { transform: translateX(2px); text-decoration: none; background: color-mix(in srgb, var(--tone) 22%, transparent); }
.expiry-chip b { font-size: 10.5px; line-height: 1.25; }
.expiry-chip span { font-size: 9.5px; color: var(--text-muted); line-height: 1.2; }
.expiry-chip--danger { --tone: var(--danger); }
.expiry-chip--warning { --tone: var(--warning); }
.expiry-chip--success { --tone: var(--success); }
.expiry-chip--neutral { --tone: var(--neutral); }

/* ---------------------------------------------------- document cards ----- */
.doc-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
}
.doc-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--tone, var(--accent));
}
.doc-card--danger { --tone: var(--danger); }
.doc-card--warning { --tone: var(--warning); }
.doc-card--success { --tone: var(--success); }
.doc-card--neutral { --tone: var(--neutral); }
.doc-card__head { display: flex; align-items: flex-start; gap: var(--space-3); }
.doc-card__head > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.doc-card__head span.cell-muted { font-size: var(--text-caption); }
.doc-card__icon {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border-radius: 9px;
  background: color-mix(in srgb, var(--tone) 14%, transparent);
  color: var(--tone);
}
.doc-card__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); margin: 0; }
.doc-card__facts dt { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); }
.doc-card__facts dd { margin: 0; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.doc-card__editor summary {
  cursor: pointer; padding: 7px 0;
  font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-link);
}
.doc-card__editor summary:hover { text-decoration: underline; }
.doc-card__editor[open] { border-top: 1px solid var(--border); padding-top: var(--space-2); }

/* -------------------------------------------------- document timeline ---- */
.doc-timeline { display: flex; flex-direction: column; gap: 2px; }
.doc-timeline__year {
  margin: var(--space-3) 0 var(--space-2);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: var(--weight-bold); color: var(--text-muted);
}
.doc-timeline__year:first-child { margin-top: 0; }
.doc-timeline__item {
  position: relative;
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--space-3);
  padding: var(--space-2) 0 var(--space-3);
}
.doc-timeline__item::before {
  content: ""; position: absolute; left: 12px; top: 30px; bottom: 0; width: 1px;
  background: var(--border);
}
.doc-timeline__item:last-child::before { display: none; }
.doc-timeline__dot {
  display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; border: 1px solid var(--border);
  background: var(--bg-surface); color: var(--text-muted);
}
.doc-timeline__item.is-current .doc-timeline__dot {
  border-color: var(--success); color: var(--success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 16%, transparent);
}
.doc-timeline__item strong { font-size: var(--text-sm); }
.doc-timeline__item p { font-size: var(--text-caption); margin-top: 2px; }

@media (max-width: 900px) {
  .compliance-grid { grid-template-columns: minmax(0, 1fr); }
  .doc-card__facts { grid-template-columns: minmax(0, 1fr); }
  .expiry-calendar__day { min-height: 72px; }
  .expiry-chip span { display: none; }
}

/* ------------------------------- compliance overview (dashboard widget) --- */
.compliance-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.compliance-overview__stat {
  display: flex; flex-direction: column; gap: 1px;
  padding: 9px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--tone, var(--accent)) 7%, transparent);
  color: var(--text-primary);
  transition: transform var(--motion-fast) var(--ease-premium), border-color var(--motion-fast) var(--ease-soft);
}
.compliance-overview__stat:hover {
  transform: translateY(-1px); text-decoration: none;
  border-color: color-mix(in srgb, var(--tone, var(--accent)) 50%, var(--border));
}
.compliance-overview__stat b {
  font-size: 1.25rem; line-height: 1.1; font-variant-numeric: tabular-nums;
  color: var(--tone, var(--text-primary));
}
.compliance-overview__stat span { font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.compliance-overview__stat--warning { --tone: var(--warning); }
.compliance-overview__stat--danger { --tone: var(--danger); }

/*
 * A flex item will not shrink below its content unless it is told it may. Without
 * min-height:0 the navigation grew past the sidebar instead of scrolling, and the
 * system-status card sat on top of the last menu entries. It only showed once the
 * menu got long enough — which is exactly the kind of bug a new feature exposes.
 */
.sidebar__nav { min-height: 0; }

/*
 * The menu is now long enough to scroll on a laptop. A hard clip at the edge of
 * the scroll area reads as a broken layout, so the last visible item fades out —
 * the same cue every scrollable list in the product uses.
 */
.sidebar { position: sticky; }
.sidebar__nav {
  position: relative;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 26px), transparent 100%);
  padding-bottom: var(--space-6);
}

/*
 * The sidebar status card is gone, and with five groups the menu is long. These
 * are the only two levers that buy height without shrinking a target: two pixels
 * off each row and a tighter gap between groups. Nothing loses legibility, and
 * the whole menu now fits a 1080p window.
 */
.nav-item { padding: 6px 10px; margin-bottom: 0; }
.nav-group + .nav-group { margin-top: var(--space-3); }
.nav-group__label { padding-bottom: 5px; }
.sidebar__nav { padding-top: var(--space-3); padding-bottom: var(--space-4); }
/* A slightly deeper fade now that the menu is the last thing in the column. */
.sidebar__nav {
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 32px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 32px), transparent 100%);
}

/* ================================================= OPERATIONS INTELLIGENCE === */
.oi-card { position: relative; overflow: hidden; margin-bottom: var(--space-5); }
.oi-card::after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(420px circle at var(--spot-x,-20%) var(--spot-y,-20%),color-mix(in srgb,var(--accent) 7%,transparent),transparent 48%); }
.section-kicker,.eyebrow,.fact-label { font-size:10px; line-height:1.2; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }
.fact-label { display:inline-flex; align-items:center; padding:4px 7px; border:1px solid var(--border); border-radius:999px; background:var(--bg-subtle); white-space:nowrap; }
.oi-layout { display:grid; gap:var(--space-5); align-items:start; }
.oi-layout--priority { grid-template-columns:minmax(0,1.45fr) minmax(300px,.85fr); }
.oi-layout--three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.oi-layout--well { grid-template-columns:minmax(320px,.82fr) minmax(560px,1.35fr); }
.oi-kpi-strip { margin-bottom:var(--space-5); }

.oi-periods { display:inline-flex; gap:3px; padding:4px; margin:0 0 var(--space-5); border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg-surface); }
.oi-periods__item { appearance:none; border:0; border-radius:7px; padding:7px 13px; background:transparent; color:var(--text-muted); font:600 var(--text-sm)/1 var(--font-sans); cursor:pointer; transition:background 180ms var(--ease),color 180ms var(--ease),transform 180ms var(--ease); }
.oi-periods__item:hover { background:var(--bg-hover); text-decoration:none; transform:translateY(-1px); }
.oi-periods__item.is-active { color:var(--accent-text); background:var(--accent); box-shadow:0 5px 16px color-mix(in srgb,var(--accent) 30%,transparent); }
.oi-brief-bar{display:grid;grid-template-columns:minmax(320px,1fr) auto auto;align-items:center;gap:16px;margin-bottom:var(--space-4);padding:11px 13px;border:1px solid var(--border);border-radius:10px;background:var(--bg-surface)}.oi-brief-bar>div{display:flex;flex-direction:column;gap:2px}.oi-brief-bar small{color:var(--text-muted);font-size:10px}.oi-brief-bar nav{display:flex;gap:5px}.oi-brief-bar nav a{padding:6px 8px;border-radius:7px;background:var(--bg-subtle);font-size:10px}.oi-brief-bar details{position:relative}.oi-brief-bar summary{color:var(--text-link);font-size:10px;font-weight:700;cursor:pointer}.oi-brief-bar details form{position:absolute;z-index:8;right:0;top:24px;display:grid;grid-template-columns:190px auto;gap:7px;min-width:330px;padding:10px;border:1px solid var(--border);border-radius:9px;background:var(--bg-surface);box-shadow:var(--shadow-lg)}.oi-brief-bar details form button{grid-column:1/3}

.oi-pulse { position:relative; overflow:hidden; padding:var(--space-5); margin-bottom:var(--space-5); border:1px solid color-mix(in srgb,var(--accent) 35%,var(--border)); border-radius:var(--radius-lg); background:linear-gradient(135deg,var(--bg-surface),color-mix(in srgb,var(--accent) 7%,var(--bg-surface))); box-shadow:var(--shadow-md); }
.oi-pulse::before { content:""; position:absolute; width:420px; height:420px; right:-160px; top:-250px; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--accent) 18%,transparent),transparent 66%); }
.oi-section-head,.oi-section-head>div,.card__head>div { min-width:0; }
.oi-section-head { position:relative; display:flex; justify-content:space-between; align-items:center; gap:var(--space-4); margin-bottom:var(--space-5); }
.oi-section-head h2 { margin:3px 0 0; font-size:1.1rem; }
.oi-confidence { display:flex; align-items:center; gap:8px; padding:6px 9px; border:1px solid var(--border); border-radius:8px; background:var(--bg-subtle); color:var(--text-primary); }
.oi-confidence span { color:var(--text-muted); font-size:var(--text-caption); }
.oi-pulse__story { position:relative; display:grid; grid-template-columns:1fr 42px 1fr 42px 1fr 42px 1fr; align-items:center; }
.oi-pulse-node { position:relative; min-height:92px; display:flex; justify-content:center; flex-direction:column; gap:7px; padding:14px; border:1px solid var(--border); border-radius:12px; background:color-mix(in srgb,var(--tone) 8%,var(--bg-surface)); color:var(--text-primary); transition:transform 200ms var(--ease),border-color 200ms var(--ease),box-shadow 200ms var(--ease); }
.oi-pulse-node:hover { transform:translateY(-3px); border-color:color-mix(in srgb,var(--tone) 58%,var(--border)); box-shadow:0 10px 28px color-mix(in srgb,var(--tone) 14%,transparent); text-decoration:none; }
.oi-pulse-node span { display:flex; align-items:center; gap:6px; color:var(--text-secondary); font-size:var(--text-sm); }
.oi-pulse-node strong { color:var(--tone); font-size:2rem; font-variant-numeric:tabular-nums; }
.oi-pulse-node.is-running { --tone:var(--success); }.oi-pulse-node.is-shutdown,.oi-pulse-node.is-critical { --tone:var(--danger); }.oi-pulse-node.is-action { --tone:var(--accent); }
.oi-pulse-link { height:1px; background:linear-gradient(90deg,var(--border),var(--accent),var(--border)); }
.oi-pulse-link::after { content:""; display:block; width:5px; height:5px; margin-top:-2px; border-radius:50%; background:var(--accent); animation:oiFlow 2.4s linear infinite; }
@keyframes oiFlow { from{translate:0} to{translate:38px} }
.oi-pulse__support { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:10px; }
.oi-pulse__support a,.oi-pulse__support>span { display:flex; justify-content:space-between; gap:8px; padding:8px 10px; border-radius:8px; background:var(--bg-subtle); color:var(--text-secondary); font-size:var(--text-caption); }
.oi-pulse__support a:hover { background:var(--bg-hover); text-decoration:none; }.oi-pulse__support strong { color:var(--text-primary); }

.oi-priority-list,.oi-action-list,.oi-handover-list,.oi-comment-list,.oi-decision-list,.oi-knowledge-list { display:flex; flex-direction:column; gap:8px; padding:0 var(--space-4) var(--space-4); }
.oi-priority { position:relative; display:grid; grid-template-columns:30px minmax(0,1fr) 54px; gap:12px; align-items:center; padding:12px; border:1px solid var(--border); border-left:3px solid var(--tone); border-radius:10px; background:var(--bg-subtle); --tone:var(--accent); }
.oi-priority[data-tone="danger"] { --tone:var(--danger); }.oi-priority[data-tone="warning"]{--tone:var(--warning)}.oi-priority[data-tone="success"]{--tone:var(--success)}
.oi-priority__rank { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:color-mix(in srgb,var(--tone) 14%,transparent); color:var(--tone); font-weight:800; }
.oi-priority__body { display:flex; flex-direction:column; min-width:0; }.oi-priority__body strong{font-size:var(--text-body)}.oi-priority__body p{margin:3px 0 0;color:var(--text-secondary);font-size:var(--text-caption)}
.oi-score-ring { --score:0; width:52px; aspect-ratio:1; display:grid; place-content:center; border-radius:50%; background:radial-gradient(circle at center,var(--bg-surface) 58%,transparent 60%),conic-gradient(var(--tone,var(--accent)) calc(var(--score)*1%),var(--border) 0); text-align:center; }
.oi-score-ring strong{font-size:1rem;line-height:1}.oi-score-ring span{font-size:8px;color:var(--text-muted)}
.oi-explain { grid-column:2 / 4; }.oi-explain summary,details.card>summary,.oi-comment details summary { color:var(--text-link); font-size:var(--text-caption); font-weight:600; cursor:pointer; }
.oi-explain div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:7px; }.oi-explain p,.oi-factor-list article { display:flex; flex-direction:column; gap:2px; margin:0; padding:8px; border-radius:7px; background:var(--bg-inset); font-size:var(--text-caption); }.oi-explain span,.oi-factor-list span{color:var(--text-muted)}

.oi-change-list,.oi-factor-list { display:flex; flex-direction:column; gap:7px; padding:0 var(--space-4); }
.oi-change { display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:10px; padding:8px; border-radius:8px; background:var(--bg-subtle); }.oi-change>span:first-child{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:color-mix(in srgb,var(--tone) 12%,transparent);color:var(--tone)}.oi-change[data-impact="negative"]{--tone:var(--danger)}.oi-change[data-impact="positive"]{--tone:var(--success)}.oi-change[data-impact="neutral"]{--tone:var(--neutral)}.oi-change p{margin:2px 0 0;font-size:var(--text-caption);color:var(--text-muted)}
.oi-change-chart,.oi-alarm-chart,.oi-exec-chart { min-height:260px; }.oi-map{min-height:250px}.oi-root-chart{min-height:280px}.oi-compare-chart{min-height:460px}
.oi-mini-list { display:flex; flex-direction:column; gap:2px; padding:0 var(--space-4) var(--space-4); }.oi-mini-list>a,.oi-mini-list>span { display:flex; align-items:center; gap:10px; padding:9px 8px; border-bottom:1px solid var(--border); color:var(--text-primary); }.oi-mini-list>a:hover{background:var(--bg-hover);text-decoration:none}.oi-mini-list div{display:flex;flex:1;flex-direction:column;min-width:0}.oi-mini-list small{color:var(--text-muted);font-size:var(--text-caption)}
.oi-activity-stream{display:flex;flex-direction:column}.oi-activity-stream article{display:grid;grid-template-columns:8px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px var(--space-4);border-top:1px solid var(--border)}.oi-activity-stream div{display:flex;flex-direction:column}.oi-activity-stream small,.oi-activity-stream>article>span:last-child{color:var(--text-muted);font-size:var(--text-caption)}

/* Well 360 */
.well360-selector{display:flex;justify-content:flex-end;margin:-55px 0 22px}.well360-selector label{display:flex;align-items:center;gap:8px}.well360-selector span{font-size:var(--text-caption);font-weight:700;color:var(--text-muted)}.well360-selector select{min-width:240px}
.well360-hero { --tone:var(--accent); position:relative; display:grid; grid-template-columns:1.5fr repeat(4,minmax(120px,.6fr)) auto; gap:1px; align-items:stretch; overflow:hidden; margin-bottom:var(--space-4); border:1px solid color-mix(in srgb,var(--tone) 45%,var(--border)); border-radius:var(--radius-lg); background:linear-gradient(135deg,color-mix(in srgb,var(--tone) 10%,var(--bg-surface)),var(--bg-surface)); box-shadow:var(--shadow-md); }.well360-hero[data-tone="danger"]{--tone:var(--danger)}.well360-hero[data-tone="warning"]{--tone:var(--warning)}.well360-hero[data-tone="success"]{--tone:var(--success)}
.well360-hero>*{padding:14px;border-right:1px solid var(--border)}.well360-hero__identity{display:flex;align-items:center;gap:12px}.well360-hero__pulse{width:13px;height:13px;border-radius:50%;background:var(--tone);box-shadow:0 0 0 8px color-mix(in srgb,var(--tone) 12%,transparent),0 0 18px var(--tone)}.well360-hero h2{margin:2px 0;font-size:1.35rem}.well360-hero p{margin:0;color:var(--text-muted);font-size:var(--text-caption)}.well360-score,.well360-stat{display:flex;flex-direction:column;justify-content:center;gap:3px}.well360-score span,.well360-stat span{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.well360-score strong{font-size:1.55rem;color:var(--tone)}.well360-score small{font-size:10px}.well360-stat strong{font-size:var(--text-sm);line-height:1.25}.well360-hero__tools{display:flex;flex-direction:column;gap:6px}.well360-hero__tools form{display:contents}.icon-button.is-active{color:var(--accent);background:var(--accent-soft)}
.well360-tabs{display:flex;overflow:auto;gap:3px;margin-bottom:var(--space-5);padding:4px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-surface)}.well360-tabs a{display:flex;align-items:center;gap:5px;padding:7px 11px;border-radius:7px;color:var(--text-muted);font-size:var(--text-caption);font-weight:600;white-space:nowrap}.well360-tabs a:hover{background:var(--bg-hover);text-decoration:none}.well360-tabs a.is-active{background:var(--bg-selected);color:var(--accent)}.well360-tabs a span{display:grid;place-items:center;min-width:17px;height:17px;border-radius:999px;background:var(--danger);color:#fff;font-size:9px}
.score-breakdown{display:flex;flex-direction:column;gap:7px;padding:0 var(--space-4)}.score-breakdown article{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:start;padding:9px;border-radius:8px;background:var(--bg-subtle)}.score-breakdown>article>span{font-weight:800;color:var(--danger)}.score-breakdown p{margin:2px 0 0;color:var(--text-muted);font-size:var(--text-caption)}.score-breakdown small{font-size:9px;color:var(--text-muted)}
.confidence-meter{padding:var(--space-4)}.confidence-meter{display:grid;grid-template-columns:1fr auto;gap:6px}.confidence-meter i{grid-column:1/3;height:5px;border-radius:999px;background:linear-gradient(90deg,var(--accent) var(--confidence),var(--border) 0)}.confidence-meter p{grid-column:1/3;margin:0;font-size:var(--text-caption);color:var(--text-muted)}
.digital-well__scene{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:20px;align-items:center;min-height:230px;padding:28px}.digital-component{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:5px;min-height:92px;padding:12px 8px;border:1px solid color-mix(in srgb,var(--tone) 55%,var(--border));border-radius:12px;background:var(--bg-surface);color:var(--text-primary);cursor:pointer;box-shadow:0 8px 26px color-mix(in srgb,var(--tone) 10%,transparent);--tone:var(--neutral)}.digital-component[data-tone="success"]{--tone:var(--success)}.digital-component[data-tone="danger"]{--tone:var(--danger)}.digital-component[data-tone="warning"]{--tone:var(--warning)}.digital-component i{width:20px;height:20px;border:5px solid color-mix(in srgb,var(--tone) 22%,transparent);border-radius:50%;background:var(--tone);box-shadow:0 0 15px var(--tone)}.digital-component span{font-size:9px;color:var(--text-muted)}.digital-component[aria-pressed="true"]{transform:translateY(-3px);box-shadow:0 10px 30px color-mix(in srgb,var(--tone) 25%,transparent)}
.digital-flow{position:absolute;top:50%;height:2px;width:15%;background:linear-gradient(90deg,var(--border),var(--accent),var(--border));background-size:200% 100%;animation:oiPipeline 2s linear infinite}.digital-flow--one{left:15%}.digital-flow--two{left:35%}.digital-flow--three{left:55%}.digital-flow--four{left:75%}@keyframes oiPipeline{to{background-position:-200% 0}}.digital-well__detail{margin:0 var(--space-4) var(--space-4);padding:10px 12px;border-left:3px solid var(--accent);background:var(--bg-subtle)}.digital-well__detail span{display:block;font-size:9px;text-transform:uppercase;color:var(--text-muted)}
.well-change-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:0 var(--space-4) var(--space-4)}.well-change-cards article{display:flex;flex-direction:column;gap:4px;padding:10px;border:1px solid var(--border);border-radius:8px;background:var(--bg-subtle)}.well-change-cards span{font-size:10px;color:var(--text-muted)}
.parameter-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-bottom:var(--space-4)}.parameter-card{text-align:left;padding:11px;border:1px solid var(--border);border-radius:10px;background:var(--bg-surface);color:var(--text-primary);cursor:pointer}.parameter-card[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 13%,transparent)}.parameter-card__label,.parameter-card__meta{display:block;font-size:10px;color:var(--text-muted)}.parameter-card__value{display:block;margin:4px 0;font-size:1.15rem;font-weight:700}.parameter-card__value small{font-size:10px;font-weight:500;color:var(--text-muted)}
.playback-control{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:0 var(--space-4)}.playback-control button{border:0;border-radius:8px;padding:8px 12px;background:var(--accent);color:var(--accent-text);font-weight:700}.playback-stage{margin:14px var(--space-4) var(--space-4);padding:18px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--border));border-radius:12px;background:linear-gradient(135deg,var(--bg-subtle),color-mix(in srgb,var(--accent) 8%,var(--bg-subtle)))}.playback-stage span{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent)}.playback-stage strong{display:block;margin:5px 0}.playback-stage p{margin:0;color:var(--text-muted);font-size:var(--text-sm)}
.unified-timeline{padding:0 var(--space-4) var(--space-4)}.unified-timeline article{display:grid;grid-template-columns:130px 14px 1fr;gap:12px;position:relative;padding:10px 0}.unified-timeline article::before{content:"";position:absolute;left:136px;top:27px;bottom:-10px;width:1px;background:var(--border)}.unified-timeline article:last-child::before{display:none}.unified-timeline time{font-size:10px;color:var(--text-muted)}.unified-timeline i{z-index:1;width:10px;height:10px;border:2px solid var(--bg-surface);border-radius:50%;background:var(--tone);box-shadow:0 0 0 3px color-mix(in srgb,var(--tone) 16%,transparent);--tone:var(--accent)}.unified-timeline article[data-tone="danger"] i{--tone:var(--danger)}.unified-timeline article[data-tone="warning"] i{--tone:var(--warning)}.unified-timeline article[data-tone="success"] i{--tone:var(--success)}.unified-timeline div{display:flex;flex-direction:column;gap:3px}.unified-timeline p{margin:0;color:var(--text-muted);font-size:var(--text-caption)}
.action-card-grid,.equipment360-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;padding:0 var(--space-4) var(--space-4)}.action-mini,.equipment360-grid a{position:relative;display:flex;flex-direction:column;gap:4px;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--bg-subtle);color:var(--text-primary)}.action-mini:hover,.equipment360-grid a:hover{text-decoration:none;transform:translateY(-2px);border-color:var(--accent)}.action-mini>b{position:absolute;right:10px;top:10px;color:var(--accent)}.action-mini span,.action-mini small,.equipment360-grid small{font-size:10px;color:var(--text-muted)}
.benchmark-list{padding:0 var(--space-4) var(--space-4)}.benchmark-list article{display:grid;grid-template-columns:140px 70px 1fr 120px;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}.benchmark-list div{height:5px;border-radius:999px;background:var(--border)}.benchmark-list i{display:block;width:var(--benchmark);height:100%;border-radius:inherit;background:var(--accent)}.benchmark-list small{color:var(--text-muted)}.before-after-result{margin-top:12px;padding:12px;border-radius:9px;background:var(--bg-subtle)}
.well-qr{display:flex;align-items:center;justify-content:space-between;padding:var(--space-5)}.well-qr p{margin:5px 0;color:var(--text-muted)}.well-qr canvas{width:144px;height:144px;padding:6px;border:1px solid var(--border);border-radius:10px;background:#fff}

/* Actions and handovers */
.oi-action-hero,.oi-handover-banner,.oi-handover-create,.oi-quality-hero{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);margin-bottom:var(--space-5);padding:var(--space-5);border:1px solid color-mix(in srgb,var(--tone,var(--accent)) 40%,var(--border));border-radius:var(--radius-lg);background:linear-gradient(135deg,color-mix(in srgb,var(--tone,var(--accent)) 10%,var(--bg-surface)),var(--bg-surface));box-shadow:var(--shadow-md)}.oi-action-hero h1,.oi-handover-banner h2,.oi-handover-create h2,.oi-quality-hero h2{margin:4px 0}.oi-action-hero p,.oi-handover-banner p,.oi-handover-create p,.oi-quality-hero p{margin:0;color:var(--text-muted)}.oi-action-hero__scores{display:flex;align-items:center;gap:16px}.oi-action-hero__scores>div{display:flex;flex-direction:column;gap:5px}.oi-action-hero[data-tone="critical"]{--tone:var(--danger)}.oi-action-hero[data-tone="high"]{--tone:var(--warning)}
.oi-definition{display:flex;flex-direction:column;margin:0;padding:0 var(--space-4) var(--space-4)}.oi-definition div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--border)}.oi-definition dt{color:var(--text-muted)}.oi-definition dd{margin:0;font-weight:600}.oi-comment{padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--bg-subtle)}.oi-comment.is-resolved{opacity:.65}.oi-comment__meta{display:flex;justify-content:space-between;gap:10px}.oi-comment__meta span{font-size:10px;color:var(--text-muted)}.oi-comment p{margin:8px 0;font-size:var(--text-sm)}.oi-comment form{display:grid;gap:7px;margin-top:8px}.oi-comment-compose,.oi-upload,.oi-stack-form{display:grid;gap:10px;padding:var(--space-4)}.oi-timeline{padding:0 var(--space-4)}.oi-timeline article{display:grid;grid-template-columns:8px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}.oi-timeline i{width:7px;height:7px;margin-top:5px;border-radius:50%;background:var(--accent)}.oi-timeline div{display:flex;flex-direction:column}.oi-timeline span{font-size:10px;color:var(--text-muted)}.oi-file{display:flex;align-items:center;gap:10px;margin:8px var(--space-4);padding:9px;border:1px solid var(--border);border-radius:8px}.oi-file span{display:flex;flex-direction:column}.oi-file small{color:var(--text-muted)}
.oi-action-list>a,.oi-handover-list>a{display:grid;grid-template-columns:54px minmax(0,1fr) auto 18px;align-items:center;gap:12px;padding:11px;border:1px solid var(--border);border-left:3px solid var(--tone,var(--accent));border-radius:10px;background:var(--bg-subtle);color:var(--text-primary)}.oi-action-list>a:hover,.oi-handover-list>a:hover{background:var(--bg-hover);text-decoration:none;transform:translateX(2px)}.oi-action-list>a[data-tone="critical"]{--tone:var(--danger)}.oi-action-list>a[data-tone="high"]{--tone:var(--warning)}.oi-action-list>a>div:nth-child(2),.oi-handover-list>a>div{display:flex;flex-direction:column;min-width:0}.oi-action-list small,.oi-handover-list small{color:var(--text-muted);font-size:10px}.oi-admin-panel{padding:var(--space-4)}
.oi-handover-create>div{max-width:560px}.oi-handover-create form{display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:10px;min-width:520px}.oi-handover-create button{grid-column:1/3}.oi-completeness{--value:0;width:52px;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,var(--bg-surface) 58%,transparent 60%),conic-gradient(var(--success) calc(var(--value)*1%),var(--border) 0)}.oi-completeness b{font-size:11px}.oi-completeness--large{width:92px;display:flex;flex-direction:column;justify-content:center}.oi-completeness--large b{font-size:1.4rem}.oi-completeness--large span{font-size:9px;color:var(--text-muted)}.oi-handover-banner h2 span{color:var(--accent)}.oi-handover-signoff{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:var(--space-5);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-surface)}.oi-handover-signoff p{margin:4px 0 0;color:var(--text-muted)}

.equipment-intelligence{--tone:var(--success);display:grid;grid-template-columns:112px minmax(260px,1fr) auto auto;align-items:center;gap:20px;margin-bottom:var(--space-5);padding:18px;border:1px solid color-mix(in srgb,var(--tone) 40%,var(--border));border-radius:var(--radius-lg);background:linear-gradient(135deg,color-mix(in srgb,var(--tone) 9%,var(--bg-surface)),var(--bg-surface));box-shadow:var(--shadow-md)}.equipment-intelligence[data-tone="danger"]{--tone:var(--danger)}.equipment-intelligence[data-tone="warning"]{--tone:var(--warning)}.equipment-intelligence h2{margin:4px 0}.equipment-intelligence p{margin:0;color:var(--text-muted)}.equipment-intelligence__facts{display:grid;grid-template-columns:1fr 1fr;gap:7px}.equipment-intelligence__facts span{display:flex;flex-direction:column;padding:8px;border:1px solid var(--border);border-radius:8px;background:var(--bg-subtle);font-size:9px;color:var(--text-muted)}.equipment-intelligence__facts b{font-size:1rem;color:var(--text-primary)}

/* Analytics, quality and management */
.oi-compare-builder form{display:grid;grid-template-columns:minmax(210px,.6fr) minmax(400px,1.4fr) 150px auto;align-items:end;gap:14px;padding:var(--space-4)}.oi-compare-builder h2{margin:3px 0}.oi-compare-builder p{margin:0;color:var(--text-muted);font-size:var(--text-caption)}.oi-well-picker{display:flex;gap:6px;overflow:auto;max-width:100%}.oi-well-picker label input{position:absolute;opacity:0}.oi-well-picker label span{display:flex;flex-direction:column;min-width:110px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--bg-subtle);cursor:pointer}.oi-well-picker label input:checked+span{border-color:var(--accent);background:var(--bg-selected);color:var(--accent)}.oi-well-picker small{color:var(--text-muted);font-size:9px}.oi-compare-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-bottom:var(--space-5)}.oi-compare-well{padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--bg-surface);color:var(--text-primary)}.oi-compare-well:hover{text-decoration:none;border-color:var(--accent);transform:translateY(-2px)}.oi-compare-well h3{margin:4px 0 10px}.oi-compare-well>div{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.oi-compare-well>div span{display:flex;flex-direction:column;font-size:8px;color:var(--text-muted)}.oi-compare-well>div b{color:var(--text-primary);font-size:13px}
.oi-alarm-list{display:flex;flex-direction:column}.oi-alarm-list article{display:grid;grid-template-columns:8px minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px var(--space-4);border-top:1px solid var(--border)}.oi-alarm-list article>div:nth-child(2){display:flex;flex-direction:column}.oi-alarm-list small{color:var(--text-muted);font-size:10px}.oi-alarm-actions{display:flex;align-items:center;gap:7px}
.oi-quality-hero{justify-content:flex-start}.oi-score-ring--hero{flex:none;width:112px;--tone:var(--success)}.oi-score-ring--hero strong{font-size:1.8rem}.oi-score-ring--hero span{font-size:10px}.oi-quality-legend{display:flex;flex-direction:column;gap:7px;margin-left:auto;font-size:var(--text-caption)}
.oi-month-nav{display:flex;justify-content:flex-end;align-items:end;gap:8px;margin:-62px 0 var(--space-5)}.oi-exec-story{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:0 var(--space-4)}.oi-exec-story article{display:flex;flex-direction:column;padding:10px;border:1px solid var(--border);border-radius:8px;background:var(--bg-subtle)}.oi-exec-story b{font-size:1.2rem;color:var(--accent)}.oi-exec-story span{font-size:9px;color:var(--text-muted)}.oi-target-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;padding:0 var(--space-4) var(--space-4)}.oi-target-grid article{display:flex;flex-direction:column;padding:11px;border:1px solid var(--border);border-radius:9px;background:var(--bg-subtle)}.oi-target-grid span,.oi-target-grid small{font-size:10px;color:var(--text-muted)}.oi-service-number{display:flex;align-items:baseline;gap:10px;padding:20px var(--space-4)}.oi-service-number strong{font-size:2.4rem;color:var(--accent)}
.oi-knowledge-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}.oi-knowledge-list article{display:flex;flex-direction:column;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--bg-subtle)}.oi-knowledge-list header,.oi-knowledge-list footer{display:flex;justify-content:space-between;gap:8px;color:var(--text-muted);font-size:9px}.oi-knowledge-list h3{margin:9px 0 5px}.oi-knowledge-list p,.oi-decision-list p{color:var(--text-secondary);font-size:var(--text-caption)}.oi-decision-list article{padding:11px;border-bottom:1px solid var(--border)}.oi-decision-list p{margin:5px 0}.oi-decision-list small{color:var(--text-muted)}
.oi-report-sheet{max-width:1100px;margin:0 auto;padding:42px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-surface);box-shadow:var(--shadow-md)}.oi-report-sheet>header{display:flex;justify-content:space-between;gap:20px;padding-bottom:28px;border-bottom:2px solid var(--accent)}.oi-report-sheet>header span{font-weight:800;letter-spacing:.12em;color:var(--accent)}.oi-report-sheet h1{margin:6px 0}.oi-report-mark{align-self:flex-start;padding:9px 12px;border:1px solid var(--accent);border-radius:8px;color:var(--accent);font-weight:700}.oi-report-sheet section{padding:24px 0;border-bottom:1px solid var(--border)}.oi-report-sheet section h2{font-size:1.05rem}.oi-report-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.oi-report-metrics div{display:flex;flex-direction:column;padding:13px;border-radius:8px;background:var(--bg-subtle)}.oi-report-metrics span{font-size:10px;color:var(--text-muted)}.oi-report-metrics b{font-size:1.2rem}.oi-report-sheet table{width:100%;border-collapse:collapse}.oi-report-sheet th,.oi-report-sheet td{padding:8px;border-bottom:1px solid var(--border);text-align:left}.oi-report-sheet ol li{margin:10px 0}.oi-report-sheet ol span{display:block;color:var(--text-muted)}.oi-report-sheet footer{display:flex;justify-content:space-between;padding-top:20px;color:var(--text-muted);font-size:10px}
.oi-system-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:var(--space-5)}.oi-system-service{--tone:var(--neutral);padding:15px;border:1px solid color-mix(in srgb,var(--tone) 35%,var(--border));border-radius:12px;background:linear-gradient(145deg,color-mix(in srgb,var(--tone) 7%,var(--bg-surface)),var(--bg-surface))}.oi-system-service[data-state="healthy"]{--tone:var(--success)}.oi-system-service[data-state="warning"]{--tone:var(--warning)}.oi-system-service[data-state="failed"]{--tone:var(--danger)}.oi-system-service header{display:flex;align-items:center;gap:8px}.oi-system-service header span{color:var(--tone)}.oi-system-service header i{margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--tone);box-shadow:0 0 10px var(--tone)}.oi-system-service>strong{display:block;margin:16px 0 3px;font-size:1.25rem}.oi-system-service p{margin:0;color:var(--text-muted);font-size:10px}.oi-readiness{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 var(--space-4) var(--space-4)}.oi-readiness article{--tone:var(--neutral);display:flex;justify-content:space-between;padding:12px;border-left:3px solid var(--tone);border-radius:8px;background:var(--bg-subtle)}.oi-readiness article[data-state="pass"]{--tone:var(--success)}.oi-readiness article[data-state="warn"]{--tone:var(--warning)}.oi-readiness article[data-state="fail"]{--tone:var(--danger)}.oi-readiness span{color:var(--tone);font-weight:700}

.oi-approval-hero{--tone:var(--warning);display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:var(--space-5);padding:20px;border:1px solid color-mix(in srgb,var(--tone) 45%,var(--border));border-radius:var(--radius-lg);background:linear-gradient(135deg,color-mix(in srgb,var(--tone) 9%,var(--bg-surface)),var(--bg-surface))}.oi-approval-hero[data-state="approved"]{--tone:var(--success)}.oi-approval-hero[data-state="rejected"]{--tone:var(--danger)}.oi-approval-hero h2{margin:5px 0}.oi-approval-hero p{margin:0;color:var(--text-muted)}

/* Full screen operations wall */
.route-command_center .app-content{max-width:none;padding:14px}.route-command_center .topbar{display:none}.route-command_center .sidebar{display:none}.route-command_center .app-body{margin-left:0}.command-wall{min-height:calc(100vh - 28px);padding:18px;border:1px solid rgba(47,111,240,.28);border-radius:16px;background:radial-gradient(circle at 70% 0,rgba(35,105,255,.14),transparent 32%),#020914;color:#eef6ff}.command-wall:fullscreen{overflow:auto;border-radius:0}.command-wall__head{display:flex;justify-content:space-between;align-items:start;margin-bottom:14px}.command-wall__head h1{margin:5px 0;font-size:1.6rem}.command-wall__head p{margin:0;color:#7f94ae}.command-wall__live{color:#19e18c;font-size:10px;font-weight:800;letter-spacing:.12em}.command-wall__live i{display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#19e18c;box-shadow:0 0 12px #19e18c}.command-wall__actions{display:flex;gap:8px}.command-wall__pulse{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:10px}.command-wall__pulse a{--tone:#2a8cff;display:flex;justify-content:space-between;align-items:center;padding:12px;border:1px solid color-mix(in srgb,var(--tone) 40%,#183451);border-radius:10px;background:color-mix(in srgb,var(--tone) 8%,#071421);color:#c7d5e8}.command-wall__pulse a[data-tone="success"]{--tone:#19e18c}.command-wall__pulse a[data-tone="danger"]{--tone:#ff5a52}.command-wall__pulse a[data-tone="warning"]{--tone:#f2a813}.command-wall__pulse a strong{font-size:1.5rem;color:var(--tone)}.command-wall__pulse a:hover{text-decoration:none;transform:translateY(-2px)}.command-wall__grid{display:grid;grid-template-columns:1.1fr 1.3fr .9fr;grid-template-rows:minmax(340px,1fr) minmax(230px,.6fr);gap:10px}.command-panel{overflow:hidden;border:1px solid #173651;border-radius:12px;background:rgba(6,21,35,.88)}.command-panel--priorities{grid-row:1/3}.command-panel--map{grid-column:2}.command-panel--alarms{grid-column:3;grid-row:1/3}.command-panel--activity{grid-column:2}.command-panel__head{display:flex;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #173651;color:#6e8dae;font-size:9px;font-weight:800;letter-spacing:.1em}.command-panel__head strong{color:#ddecff}.command-priority-list,.command-alarm-list,.command-activity{display:flex;flex-direction:column}.command-priority-list a{display:grid;grid-template-columns:26px 1fr auto;gap:9px;padding:10px 12px;border-bottom:1px solid #102b43;color:#eef6ff}.command-priority-list a:hover,.command-alarm-list a:hover{background:#0b2238;text-decoration:none}.command-priority-list a>span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#122f4d;color:#5da0ff}.command-priority-list div,.command-alarm-list div,.command-activity div{display:flex;flex-direction:column}.command-priority-list small,.command-alarm-list small,.command-activity small{color:#6e8dae;font-size:9px}.command-priority-list>a>strong{color:#5da0ff}.command-alarm-list a{display:flex;align-items:center;gap:9px;padding:10px 12px;border-bottom:1px solid #102b43;color:#eef6ff}.command-activity article{display:grid;grid-template-columns:40px 1fr;gap:9px;padding:8px 12px;border-bottom:1px solid #102b43}.command-activity time{font-family:var(--font-mono);font-size:10px;color:#5da0ff}.command-empty{display:grid;place-items:center;height:100%;min-height:160px;padding:20px;text-align:center;color:#6e8dae;font-size:11px}.command-map{height:330px}

@media (max-width:1150px){.oi-layout--three{grid-template-columns:1fr 1fr}.oi-layout--well,.oi-layout--priority{grid-template-columns:1fr}.well360-hero{grid-template-columns:1.5fr repeat(2,1fr)}.well360-hero__tools{flex-direction:row}.oi-compare-builder form{grid-template-columns:1fr 1fr}.oi-compare-builder form>div:nth-child(2){grid-column:1/3}.command-wall__grid{grid-template-columns:1fr 1fr}.command-panel--priorities{grid-row:auto}.command-panel--alarms{grid-column:auto;grid-row:auto}.command-panel--activity{grid-column:auto}.command-wall__pulse{grid-template-columns:repeat(3,1fr)}.oi-system-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.oi-layout--three,.oi-system-grid{grid-template-columns:1fr}.oi-pulse__story{grid-template-columns:1fr 1fr;gap:8px}.oi-pulse-link{display:none}.oi-pulse__support{grid-template-columns:1fr 1fr}.well360-selector{margin:0 0 12px;justify-content:stretch}.well360-selector label,.well360-selector select{width:100%}.well360-hero{grid-template-columns:1fr 1fr}.well360-hero__identity{grid-column:1/3}.digital-well__scene{grid-template-columns:1fr 1fr;padding:18px}.digital-flow{display:none}.well-change-cards,.oi-report-metrics,.oi-readiness{grid-template-columns:1fr}.benchmark-list{overflow:auto}.benchmark-list article{min-width:650px}.well-qr,.oi-action-hero,.oi-handover-banner,.oi-quality-hero{align-items:flex-start;flex-direction:column}.oi-handover-create{display:block}.oi-handover-create form{min-width:0;grid-template-columns:1fr;margin-top:16px}.oi-handover-create button{grid-column:auto}.oi-action-list>a,.oi-handover-list>a{grid-template-columns:45px 1fr}.oi-action-list>a>.badge,.oi-action-list>a>svg,.oi-handover-list>a>.badge,.oi-handover-list>a>svg{display:none}.oi-compare-builder form{display:flex;flex-direction:column;align-items:stretch}.oi-compare-builder form>div:nth-child(2){grid-column:auto}.oi-month-nav{margin:0 0 16px;justify-content:flex-start}.oi-report-sheet{padding:20px}.oi-report-sheet>header{flex-direction:column}.command-wall__grid,.command-wall__pulse{grid-template-columns:1fr}.command-panel--map,.command-panel--activity,.command-panel--alarms{grid-column:auto;grid-row:auto}.command-wall__head{flex-direction:column;gap:12px}.command-wall__pulse a{min-height:54px}.unified-timeline article{grid-template-columns:95px 12px 1fr}.unified-timeline article::before{left:100px}.oi-explain div{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.oi-pulse-link::after,.digital-flow{animation:none}}
.cc-intelligence-brief{margin:0 0 10px;padding:10px 12px;border:1px solid rgba(42,140,255,.24);border-radius:11px;background:linear-gradient(100deg,rgba(42,140,255,.09),rgba(8,24,39,.5))}.cc-intelligence-brief>header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.cc-intelligence-brief>header span{font-size:8px;font-weight:800;letter-spacing:.12em;color:var(--cc-blue,#2a8cff)}.cc-intelligence-brief h2{margin:2px 0;font-size:13px}.cc-intelligence-brief>header a{display:flex;align-items:center;gap:5px;font-size:10px}.cc-intelligence-brief>div{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.cc-intelligence-brief>div>a{--tone:var(--accent);display:grid;grid-template-columns:24px 1fr auto;gap:7px;align-items:center;padding:8px;border:1px solid color-mix(in srgb,var(--tone) 28%,var(--border));border-radius:8px;background:color-mix(in srgb,var(--tone) 5%,var(--bg-surface));color:var(--text-primary)}.cc-intelligence-brief>div>a:hover{text-decoration:none;transform:translateY(-1px)}.cc-intelligence-brief>div>a[data-tone="danger"]{--tone:var(--danger)}.cc-intelligence-brief>div>a[data-tone="warning"]{--tone:var(--warning)}.cc-intelligence-brief>div>a>b{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:color-mix(in srgb,var(--tone) 15%,transparent);color:var(--tone);font-size:10px}.cc-intelligence-brief>div>a>span{display:flex;flex-direction:column;min-width:0}.cc-intelligence-brief>div>a strong{font-size:10px}.cc-intelligence-brief>div>a small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-muted);font-size:8px}.cc-intelligence-brief>div>a em{font-style:normal;font-weight:800;color:var(--tone)}
@media(max-width:1000px){.cc-intelligence-brief>div{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.cc-intelligence-brief>div{grid-template-columns:1fr}.cc-intelligence-brief>header a{display:none}.oi-pulse__support>span{display:flex}}
@media(max-width:760px){.equipment-intelligence{grid-template-columns:1fr;justify-items:start}.equipment-intelligence__facts{width:100%}}
.mobile-field-bar{display:none}.offline-banner{position:fixed;z-index:1000;left:50%;bottom:14px;translate:-50% 0;padding:8px 13px;border:1px solid var(--warning);border-radius:999px;background:var(--warning-soft);color:var(--warning-text);font-size:11px;font-weight:700;box-shadow:var(--shadow-lg)}
@media(max-width:760px){.mobile-field-bar{position:fixed;z-index:70;left:8px;right:8px;bottom:8px;display:grid;grid-template-columns:repeat(5,1fr);padding:5px;border:1px solid var(--border);border-radius:13px;background:color-mix(in srgb,var(--bg-surface) 94%,transparent);box-shadow:var(--shadow-lg);backdrop-filter:blur(16px)}.mobile-field-bar a,.mobile-field-bar button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px;border:0;border-radius:8px;background:transparent;color:var(--text-muted);font:600 9px var(--font-sans)}.mobile-field-bar a:hover,.mobile-field-bar button:hover{background:var(--bg-hover);color:var(--accent);text-decoration:none}.route-dashboard .app-content,.route-intelligence .app-content,.route-well_360 .app-content,.route-actions .app-content,.route-handovers .app-content{padding-bottom:80px}.oi-brief-bar{grid-template-columns:1fr}.oi-brief-bar nav{overflow:auto}.oi-brief-bar details form{left:0;right:auto}}
@media print{.sidebar,.topbar,.page-head__actions,.oi-month-nav{display:none!important}.app-body{margin-left:0!important}.app-content{padding:0!important}.oi-report-sheet{max-width:none;border:0;box-shadow:none;color:#111;background:#fff}.oi-report-sheet *{color:#111!important}.oi-report-sheet section{break-inside:avoid}}

/* The command wall removes the application shell, so it must also opt out of
   the shell's two-column grid. Otherwise the wall inherits the hidden
   sidebar's 258px column and collapses into the left edge of large displays. */
.route-command_center .app{display:block}
.route-command_center .app-body{width:100%;margin-left:0}

/* ================================================= EMPLOYEE CERTIFICATIONS === */
/* Employee Compliance grew a second list per person: the core documents everyone
   needs, and the certifications only some of them hold. Everything below serves
   that split, plus the add-certificate sheet.

   The sheet is deliberately built on :target so the whole workflow — open, fill
   in, save — works with JavaScript switched off; the script layer only adds a
   scrim click, Esc, focus handling and the date conveniences. */

/* -- the employee card ------------------------------------------------------ */
/* The card used to be one big <a>. It now carries its own actions, so the link
   is a stretched overlay instead and the buttons sit above it. */
.compliance-card { position: relative; }
.compliance-card__link {
  position: absolute; inset: 0; z-index: 0;
  border-radius: inherit;
  text-decoration: none;
}
.compliance-card__link:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.compliance-card > *:not(.compliance-card__link) { position: relative; z-index: 1; }
.compliance-card__head { pointer-events: none; }
.compliance-card__head .quick-menu { pointer-events: auto; }

.compliance-card__section {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  pointer-events: none;
}
.compliance-card__count {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle, var(--accent-soft));
  color: var(--text-secondary);
}
.compliance-card__none {
  font-size: var(--text-caption);
  color: var(--text-muted);
  margin: 0 0 var(--space-2);
  pointer-events: none;
}

/* "+4 more certifications" expands the card in place rather than navigating. */
.compliance-card__more > summary {
  list-style: none;
  cursor: pointer;
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  color: var(--text-link);
  padding: var(--space-1) 0;
  transition: color var(--duration-base) var(--ease);
}
.compliance-card__more > summary::-webkit-details-marker { display: none; }
.compliance-card__more > summary:hover { color: var(--accent-hover); }
.compliance-card__more > summary .is-open,
.compliance-card__more[open] > summary .is-closed { display: none; }
.compliance-card__more[open] > summary .is-open { display: inline; }
.compliance-card__more[open] > ul { animation: cert-reveal var(--duration-base) var(--ease); }
@keyframes cert-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.compliance-card__add {
  align-self: flex-start;
  margin-top: var(--space-2);
}

/* -- the hover action menu -------------------------------------------------- */
.quick-menu { position: relative; }
.quick-menu > summary {
  list-style: none;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease), background var(--duration-base) var(--ease);
}
.quick-menu > summary::-webkit-details-marker { display: none; }
.compliance-card:hover .quick-menu > summary,
.quick-menu > summary:focus-visible,
.quick-menu[open] > summary { opacity: 1; }
.quick-menu > summary:hover { background: var(--bg-hover); color: var(--text-primary); }
.quick-menu__panel {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 20;
  min-width: 176px;
  display: flex; flex-direction: column;
  padding: var(--space-1);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  animation: quick-menu-in var(--duration-base) var(--ease);
}
@keyframes quick-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.quick-menu__panel a {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  white-space: nowrap;
}
.quick-menu__panel a:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; }

/* -- tones the new NO_EXPIRY status needs ----------------------------------- */
.compliance-doc--info { --tone: var(--info); }
.doc-card--info { --tone: var(--info); }
.upcoming__row--info { --tone: var(--info); }
.expiry-chip--info { --tone: var(--info); }

.tag--xs {
  font-size: 9.5px;
  padding: 0 5px;
  line-height: 15px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--text-link);
}

/* A record reached from the calendar or the upcoming panel announces itself. */
.doc-card.is-focused {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.doc-card__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.doc-card__actions:empty { display: none; }

tr.is-muted td { opacity: 0.62; }

/* -- calendar key ----------------------------------------------------------- */
.cal-key { display: inline-flex; align-items: center; gap: 6px; margin-right: var(--space-4); font-size: var(--text-caption); }
.cal-key__mark { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.cal-key__mark--doc { background: var(--neutral); }
.cal-key__mark--cert { background: var(--accent); }
.expiry-chip--cert { border-left: 2px solid var(--accent); padding-left: 5px; }

/* -- the add-certificate sheet ---------------------------------------------- */
/* Closed by default and opened by :target, so a plain anchor works. The script
   layer adds .is-open for Esc, the scrim and focus return. */
.sheet { display: none; }
.sheet:target,
.sheet.is-open {
  display: block;
  position: fixed; inset: 0; z-index: 80;
}
.sheet__scrim {
  position: absolute; inset: 0;
  background: rgba(4, 12, 24, 0.62);
  backdrop-filter: blur(2px);
  animation: sheet-fade var(--duration-base) var(--ease);
}
@keyframes sheet-fade { from { opacity: 0; } to { opacity: 1; } }
.sheet__panel {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: sheet-in var(--duration-slow) var(--ease);
}
@keyframes sheet-in {
  from { opacity: 0; transform: translate(-50%, -46%) scale(0.985); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.sheet__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
}
.sheet__close {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  flex: none;
}
.sheet__close:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; }
.sheet__body {
  padding: var(--space-5);
  overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--space-3);
}
.sheet__foot {
  position: sticky; bottom: calc(var(--space-5) * -1);
  margin: var(--space-2) calc(var(--space-5) * -1) calc(var(--space-5) * -1);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
  display: flex; justify-content: flex-end; gap: var(--space-2);
}

/* The "create a new type" form nested inside the sheet. */
.nested-form {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-subtle, transparent);
}
.nested-form > summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-link);
}
.nested-form > summary::-webkit-details-marker { display: none; }
.nested-form > summary:hover { color: var(--accent-hover); }
.nested-form[open] > summary { border-bottom: 1px dashed var(--border); }
.nested-form__body {
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-3);
  animation: cert-reveal var(--duration-base) var(--ease);
}

@media (max-width: 720px) {
  .sheet__panel { width: calc(100vw - 16px); max-height: calc(100vh - 24px); }
}

@media (prefers-reduced-motion: reduce) {
  .sheet__panel, .sheet__scrim, .quick-menu__panel,
  .compliance-card__more[open] > ul, .nested-form__body { animation: none; }
}


/* ==========================================================================
   The table search bar.

   Sits over a table whose rows are already on the page, so it can filter
   without a round trip and without losing the reader's place.
   ========================================================================== */

.tfilter {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}

.tfilter__search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 260px;
  min-width: 180px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-muted);
}

.tfilter__search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-sm);
  outline: none;
}

.tfilter__select { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--text-muted); }
.tfilter__select select { padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--text-primary); font: inherit; font-size: var(--text-sm); }
.tfilter__count { font-size: var(--text-caption); color: var(--text-muted); font-variant-numeric: tabular-nums; margin-left: auto; }
.tfilter__hint { font-size: var(--text-caption); color: var(--text-muted); }