/* ==========================================================================
   WATCHPOINT — shared design system
   One stylesheet for every page. Presentation only; no page behaviour depends
   on anything in here beyond the class names it applies.

   Palette is deliberately narrow: near-black, dark gray, white and a single
   blue family lifted from the WATCHPOINT shield (#0F57A0 → #2F84CF).
   ========================================================================== */

:root {
  /* --- neutrals: near-black through dark gray --- */
  --ink-000: #05070a;
  --ink-100: #0a0d12;
  --ink-200: #0f1319;
  --ink-300: #12171e;   /* card surface */
  --ink-400: #171d26;   /* raised surface */
  --ink-500: #1d242f;   /* controls, inputs */
  --ink-600: #252e3b;   /* control hover */

  --line: #1d242e;
  --line-2: #2a3441;
  --line-3: #384555;

  --text: #eaeff5;
  --text-2: #a7b3c2;
  /* Lifted until it clears 4.5:1 on every surface it lands on, including the
     control and hover fills (--ink-500 / --ink-600), not just the card. */
  --text-3: #8b98a7;

  /* --- brand blue --- */
  --blue-100: #dceaf9;
  --blue-200: #a9cdf7;
  --blue-300: #79b0f0;
  --blue-400: #3f8ee0;
  --blue-500: #2472c9;  /* primary action */
  --blue-600: #1b5da8;
  --blue-700: #14477f;
  --blue-900: #0c2843;
  --blue-glass: rgba(36, 114, 201, 0.14);

  /* --- status (desaturated so they sit inside the neutral palette) --- */
  --danger: #d94f5c;
  --danger-soft: rgba(217, 79, 92, 0.14);
  --success: #2e9c6b;
  --success-soft: rgba(46, 156, 107, 0.14);
  --warn: #c8901f;
  --warn-soft: rgba(200, 144, 31, 0.14);

  /* --- radii --- */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* --- spacing scale --- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 44px;

  /* --- elevation: soft, layered, never harsh --- */
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.30);
  --sh-2: 0 1px 2px rgba(0, 0, 0, 0.28), 0 4px 12px rgba(0, 0, 0, 0.22);
  --sh-3: 0 2px 4px rgba(0, 0, 0, 0.30), 0 12px 32px rgba(0, 0, 0, 0.34);
  --sh-4: 0 8px 20px rgba(0, 0, 0, 0.38), 0 32px 64px rgba(0, 0, 0, 0.42);
  --ring: 0 0 0 2px var(--ink-100), 0 0 0 4px rgba(63, 142, 224, 0.65);

  /* --- type --- */
  --font: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* --- motion --- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 120ms;
  --t: 180ms;
  --t-slow: 300ms;

  /* --- layout --- */
  --shell-w: 1680px;
  --header-h: 60px;

  /* Legacy aliases so any inline style="var(--accent)" left in a page still
     resolves to something on-palette instead of falling back to nothing. */
  --bg: var(--ink-100);
  --panel: var(--ink-300);
  --panel-2: var(--ink-500);
  --muted: var(--text-2);
  --accent: var(--blue-300);
  --accent-2: var(--blue-500);
  --border: var(--line-2);
  --shadow: var(--sh-2);
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background-color: var(--ink-100);
  /* Two very wide, very low-contrast blue washes give the page depth without
     ever competing with content. Fixed so scrolling stays cheap. */
  background-image:
    radial-gradient(900px 520px at 12% -8%, rgba(36, 114, 201, 0.13), transparent 62%),
    radial-gradient(1100px 620px at 92% 4%, rgba(20, 71, 127, 0.16), transparent 60%),
    linear-gradient(180deg, #0b0f15 0%, #0a0d12 40%, #080b10 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, textarea, select { font-family: inherit; font-size: inherit; }

h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
h1 { font-size: 1.55rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.0625rem; }
h4 { font-size: 0.9375rem; }
p { margin: 0 0 var(--s-3); }
p:last-child { margin-bottom: 0; }

a { color: var(--blue-300); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--blue-200); text-decoration: underline; text-underline-offset: 2px; }

hr { border: none; border-top: 1px solid var(--line); margin: var(--s-5) 0; }

code, .mono, .tabular {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
code {
  font-size: 0.85em;
  background: var(--ink-200);
  border: 1px solid var(--line);
  padding: 1px 6px;
  border-radius: var(--r-xs);
}

::selection { background: rgba(36, 114, 201, 0.4); }

/* Consistent focus treatment everywhere. Keyboard only, so pointer users never
   see a ring, but every interactive element has one. */
:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-sm);
}
.btn:focus-visible,
.wp-nav-link:focus-visible,
.acc-trigger:focus-visible,
.chip:focus-visible { box-shadow: var(--ring); }

/* Scrollbars, quietly on-theme. */
* { scrollbar-color: var(--line-3) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--line-3); background-clip: padding-box; }

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

/* Skip link: the header holds several nav links and a user menu, so keyboard
   users get a way past them straight to the page content. Hidden until focused. */
.skip-link {
  position: absolute; top: 0; left: 50%; z-index: 3000;
  transform: translate(-50%, -110%);
  padding: 9px var(--s-4);
  color: #fff; background: var(--blue-600);
  border: 1px solid var(--blue-400);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-size: 0.875rem; font-weight: 600; text-decoration: none;
  transition: transform var(--t) var(--ease-out);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ==========================================================================
   App shell + header / navigation
   ========================================================================== */

.wp-shell { min-height: 100vh; display: flex; flex-direction: column; }

.wp-main {
  flex: 1;
  width: 100%;
  max-width: var(--shell-w);
  margin: 0 auto;
  padding: var(--s-6) var(--s-6) var(--s-8);
}
/* The skip link focuses <main> to move the caret there. It is a landmark, not a
   control, so it should not draw a focus ring of its own. */
.wp-main:focus, .wp-main:focus-visible { outline: none; box-shadow: none; }

.wp-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(9, 12, 17, 0.86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), var(--sh-1);
}
.wp-header-inner {
  max-width: var(--shell-w);
  margin: 0 auto;
  min-height: var(--header-h);
  padding: 0 var(--s-6);
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

/* --- logo lockup --- */
.wp-brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: none;
  text-decoration: none;
  padding: 6px 2px;
  border-radius: var(--r-sm);
}
.wp-brand:hover { text-decoration: none; }
.wp-brand img {
  display: block;
  height: 26px;
  width: auto;
  /* The wordmark's own glow reads as haze on a near-black bar; a touch of
     contrast keeps the metal crisp. */
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)) contrast(1.06);
  transition: transform var(--t) var(--ease);
}
.wp-brand:hover img { transform: translateY(-1px); }
.wp-brand-divider { width: 1px; height: 26px; background: var(--line-2); flex: none; }
.wp-brand-context {
  display: flex; flex-direction: column; justify-content: center;
  min-width: 0;
}
.wp-brand-context .ctx-title {
  font-size: 0.9375rem; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wp-brand-context .ctx-sub {
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- primary nav --- */
.wp-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  padding: 3px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.wp-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.wp-nav-link:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); text-decoration: none; }
.wp-nav-link .ic { flex: none; opacity: 0.75; transition: opacity var(--t-fast) var(--ease); }
.wp-nav-link:hover .ic { opacity: 1; }
.wp-nav-link[aria-current="page"] {
  color: #fff;
  background: linear-gradient(180deg, var(--blue-500), var(--blue-600));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 2px 8px rgba(20, 71, 127, 0.5);
}
.wp-nav-link[aria-current="page"] .ic { opacity: 1; }

/* --- header actions --- */
.wp-header-actions { display: flex; align-items: center; gap: var(--s-2); flex: none; }

.wp-user {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 4px 10px 4px 4px;
  background: var(--ink-400);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.wp-avatar {
  width: 28px; height: 28px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--blue-400), var(--blue-700));
  color: #fff; font-size: 0.8125rem; font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.wp-user-meta { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.wp-user-meta .u-name {
  font-size: 0.8125rem; font-weight: 600; color: var(--text);
  max-width: 15ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wp-user-meta .u-role {
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-3);
}

/* --- mobile nav --- */
.wp-nav-toggle { display: none; }
.wp-nav-drawer { display: none; }

@media (max-width: 1080px) {
  .wp-brand-divider, .wp-brand-context { display: none; }
}
@media (max-width: 980px) {
  .wp-header-inner { padding: 0 var(--s-4); gap: var(--s-3); }
  .wp-nav { display: none; }
  .wp-user-meta { display: none; }
  .wp-user { padding: 3px; }
  .wp-nav-toggle { display: inline-flex; margin-left: auto; }
  .wp-nav-drawer {
    display: block;
    overflow: hidden;
    border-top: 1px solid var(--line);
    background: rgba(8, 11, 16, 0.97);
  }
  .wp-nav-drawer[hidden] { display: none; }
  .wp-nav-drawer-inner {
    padding: var(--s-3) var(--s-4) var(--s-4);
    display: grid;
    gap: var(--s-1);
  }
  .wp-nav-drawer .wp-nav-link {
    padding: 11px 12px;
    font-size: 0.9375rem;
    animation: wp-slide-in var(--t) var(--ease-out) backwards;
  }
  .wp-nav-drawer .wp-nav-link:nth-child(1) { animation-delay: 20ms; }
  .wp-nav-drawer .wp-nav-link:nth-child(2) { animation-delay: 45ms; }
  .wp-nav-drawer .wp-nav-link:nth-child(3) { animation-delay: 70ms; }
  .wp-nav-drawer .wp-nav-link:nth-child(4) { animation-delay: 95ms; }
  .wp-nav-drawer .wp-nav-link:nth-child(5) { animation-delay: 120ms; }
  .wp-nav-drawer .wp-nav-link:nth-child(6) { animation-delay: 145ms; }
  .wp-main { padding: var(--s-4) var(--s-4) var(--s-7); }
}

/* ==========================================================================
   Page heading strip
   ========================================================================== */

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
}
.page-head .ph-title { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.page-head h1 { font-size: 1.4rem; }
.page-head .ph-sub { color: var(--text-2); font-size: 0.875rem; }
.page-head .ph-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }

.eyebrow {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--blue-300);
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0)) var(--ink-300);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.card + .card { margin-top: var(--s-4); }
.card.pad { padding: var(--s-5); }
.card.flush { padding: 0; overflow: hidden; }
.card.hoverable:hover { border-color: var(--line-2); box-shadow: var(--sh-3); }
.card.accent { border-color: rgba(36, 114, 201, 0.4); }

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
}
.card-head h2, .card-head h3 { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.card-head .ch-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.card-body { padding: var(--s-5); }
.card-body.tight { padding: var(--s-3) var(--s-4); }
.card-foot {
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.16);
  font-size: 0.8125rem;
  color: var(--text-2);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  min-height: 38px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--ink-500);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.btn:hover { background: var(--ink-600); border-color: var(--line-3); text-decoration: none; color: var(--text); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.45; cursor: not-allowed; transform: none;
}
.btn .ic { flex: none; }

.btn.primary {
  background: linear-gradient(180deg, var(--blue-500), var(--blue-600));
  border-color: var(--blue-600);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 8px rgba(20, 71, 127, 0.42);
}
.btn.primary:hover {
  background: linear-gradient(180deg, #2a7ed8, var(--blue-500));
  border-color: var(--blue-500);
  color: #fff;
}
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.ghost:hover { background: rgba(255, 255, 255, 0.055); color: var(--text); }
.btn.outline { background: transparent; border-color: var(--line-2); color: var(--text-2); }
.btn.outline:hover { background: rgba(255, 255, 255, 0.04); border-color: var(--blue-500); color: var(--text); }
.btn.danger {
  background: var(--danger-soft); border-color: rgba(217, 79, 92, 0.45); color: #ffb8bf;
}
.btn.danger:hover { background: rgba(217, 79, 92, 0.24); border-color: var(--danger); color: #ffd3d8; }
.btn.success {
  background: var(--success-soft); border-color: rgba(46, 156, 107, 0.45); color: #96e2bd;
}
.btn.success:hover { background: rgba(46, 156, 107, 0.24); border-color: var(--success); }
.btn.warn {
  background: var(--warn-soft); border-color: rgba(200, 144, 31, 0.45); color: #ecc478;
}
.btn.warn:hover { background: rgba(200, 144, 31, 0.24); border-color: var(--warn); }

.btn.small, .btn.sm { padding: 6px 10px; min-height: 30px; font-size: 0.8125rem; gap: 5px; }
.btn.large, .btn.lg { padding: 12px 20px; min-height: 46px; font-size: 0.9375rem; }
.btn.block { width: 100%; }
.btn.icon-only { padding: 0; width: 38px; min-height: 38px; }
.btn.icon-only.small { width: 30px; min-height: 30px; }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; flex: none;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-sm);
  color: var(--text-3); cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.icon-btn:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }

/* A button that is waiting on the network keeps its label but grows a spinner,
   so the row never reflows mid-request. */
.btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-busy::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-top-color: #fff;
  animation: wp-spin 620ms linear infinite;
}

.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; margin-left: -1px; }
.btn-group .btn:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); margin-left: 0; }
.btn-group .btn:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }

.actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.actions.right { justify-content: flex-end; }
.actions.between { justify-content: space-between; }

/* ==========================================================================
   Forms
   ========================================================================== */

.field { display: grid; gap: 6px; min-width: 0; }
.field + .field { margin-top: var(--s-3); }

label, .label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-2);
}
.label .req { color: var(--danger); margin-left: 2px; }

.input, input[type="text"], input[type="search"], input[type="password"],
input[type="email"], input[type="number"], input[type="tel"], input[type="url"],
input:not([type]), textarea, select {
  width: 100%;
  min-height: 38px;
  padding: 8px 11px;
  color: var(--text);
  background: var(--ink-200);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--text-3); }
input:hover, textarea:hover, select:hover { border-color: var(--line-3); }
input:focus, textarea:focus, select:focus {
  border-color: var(--blue-500);
  background: var(--ink-300);
  box-shadow: 0 0 0 3px rgba(36, 114, 201, 0.2);
  outline: none;
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  box-shadow: 0 0 0 3px rgba(36, 114, 201, 0.28);
}
textarea { min-height: 92px; padding: 10px 11px; resize: vertical; line-height: 1.5; }
input[type="file"] {
  padding: 7px 9px;
  color: var(--text-2);
  font-size: 0.8125rem;
  cursor: pointer;
}
input[type="file"]::file-selector-button {
  margin-right: 10px; padding: 5px 11px;
  background: var(--ink-500); color: var(--text);
  border: 1px solid var(--line-2); border-radius: var(--r-xs);
  font: inherit; font-size: 0.8125rem; cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--ink-600); }
input[type="color"] { padding: 3px; cursor: pointer; min-height: 34px; }
input[type="checkbox"], input[type="radio"] {
  width: 16px; height: 16px; min-height: 0; padding: 0;
  accent-color: var(--blue-500);
  cursor: pointer;
}
select {
  appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a7b3c2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}
select:focus { background-color: var(--ink-300); }
option { background: var(--ink-300); color: var(--text); }

/* Inline validation. `.invalid` is applied by the page; the message element is
   always in the DOM so nothing shifts when it appears. */
.input.invalid, input.invalid, textarea.invalid, select.invalid {
  border-color: var(--danger);
  background: rgba(217, 79, 92, 0.06);
}
.input.invalid:focus, input.invalid:focus, textarea.invalid:focus {
  box-shadow: 0 0 0 3px rgba(217, 79, 92, 0.22);
}
.field-hint { font-size: 0.75rem; color: var(--text-3); }
.field-error {
  display: none;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #ff9ea7;
}
.field-error.show { display: flex; animation: wp-slide-in 160ms var(--ease-out); }
.field.has-error .field-hint { display: none; }

/* Field groups: related inputs framed together with one caption. */
.fieldset {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-4);
  background: rgba(0, 0, 0, 0.14);
}
.fieldset + .fieldset { margin-top: var(--s-3); }
.fieldset > .fs-legend {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-3);
  margin-bottom: var(--s-3);
}
.fieldset > .fs-legend .ic { color: var(--blue-300); opacity: 0.9; }

.field-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.field-grid.two { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.field-grid.wide { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* Search input with a leading glyph. */
.search-wrap { position: relative; flex: 1 1 220px; min-width: 0; }
.search-wrap .ic {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--text-3); pointer-events: none;
}
.search-wrap input { padding-left: 34px; }

.check {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.875rem; color: var(--text-2); cursor: pointer;
  padding: 7px 0;
}
.check input { flex: none; }
.check:hover { color: var(--text); }

.switch { position: relative; width: 38px; height: 21px; flex: none; display: inline-block; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch .slider {
  position: absolute; inset: 0; cursor: pointer;
  background: var(--ink-500); border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.switch .slider::before {
  content: ""; position: absolute;
  height: 15px; width: 15px; left: 2px; top: 2px;
  background: var(--text-3); border-radius: 50%;
  transition: transform var(--t) var(--ease), background var(--t) var(--ease);
}
.switch input:checked + .slider { background: var(--blue-500); border-color: var(--blue-500); }
.switch input:checked + .slider::before { transform: translateX(17px); background: #fff; }
.switch input:focus-visible + .slider { box-shadow: var(--ring); }

.toggle-label {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.8125rem; color: var(--text-2); cursor: pointer; user-select: none;
}
.toggle-label:hover { color: var(--text); }

/* ==========================================================================
   Chips, badges, pills
   ========================================================================== */

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px;
  font-size: 0.8125rem; font-weight: 500;
  color: var(--text-2);
  background: var(--ink-400);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.chip:hover {
  background: var(--blue-glass); border-color: var(--blue-600);
  color: var(--blue-100); transform: translateY(-1px);
}
.chip:active { transform: none; }
.chip.on { background: var(--blue-glass); border-color: var(--blue-500); color: var(--blue-100); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip-row-label {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 7px;
}

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-2);
  background: var(--ink-500);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xs);
  white-space: nowrap;
}
.badge.blue { color: var(--blue-200); background: var(--blue-glass); border-color: rgba(36, 114, 201, 0.42); }
.badge.green { color: #8fdcb6; background: var(--success-soft); border-color: rgba(46, 156, 107, 0.4); }
.badge.amber { color: #e8bf76; background: var(--warn-soft); border-color: rgba(200, 144, 31, 0.4); }
.badge.red { color: #ffa8b1; background: var(--danger-soft); border-color: rgba(217, 79, 92, 0.4); }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  font-size: 0.75rem; font-weight: 500;
  color: var(--text-2);
  background: var(--ink-500);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.pill.blue, .pill.admin { color: var(--blue-200); background: var(--blue-glass); border-color: rgba(36, 114, 201, 0.42); }
.pill.green, .pill.active { color: #8fdcb6; background: var(--success-soft); border-color: rgba(46, 156, 107, 0.4); }
.pill.amber { color: #e8bf76; background: var(--warn-soft); border-color: rgba(200, 144, 31, 0.4); }
.pill.red, .pill.disabled { color: #ffa8b1; background: var(--danger-soft); border-color: rgba(217, 79, 92, 0.4); }
.pill.editor { color: var(--blue-200); background: rgba(36, 114, 201, 0.10); border-color: rgba(36, 114, 201, 0.32); }
.pill.readonly { color: var(--text-2); }

.count {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 20px; padding: 0 6px;
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  background: var(--ink-500);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
}
.count.zero { color: var(--text-3); background: transparent; }
.count.hot { color: var(--blue-100); background: var(--blue-glass); border-color: rgba(36, 114, 201, 0.45); }

/* ==========================================================================
   Accordion — the primary information architecture on the search page.
   Height is animated in JS (measured, then released to auto) so panels can hold
   maps, tables and images without a magic max-height.
   ========================================================================== */

.acc { display: grid; gap: var(--s-3); }

.acc-item {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0)) var(--ink-300);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.acc-item.open { border-color: var(--line-2); }
.acc-item:hover { border-color: var(--line-2); }

.acc-trigger {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: 13px var(--s-5);
  background: transparent;
  border: none;
  border-radius: var(--r-lg);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.acc-trigger:hover { background: rgba(255, 255, 255, 0.028); }
.acc-item.open .acc-trigger { border-radius: var(--r-lg) var(--r-lg) 0 0; }

.acc-chevron {
  flex: none;
  display: grid; place-items: center;
  width: 22px; height: 22px;
  color: var(--text-3);
  transition: transform var(--t-slow) var(--ease-out), color var(--t-fast) var(--ease);
}
.acc-item.open .acc-chevron { transform: rotate(90deg); color: var(--blue-300); }
.acc-trigger:hover .acc-chevron { color: var(--text-2); }

.acc-icon {
  flex: none;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--r-sm);
  color: var(--blue-300);
  background: var(--blue-glass);
  border: 1px solid rgba(36, 114, 201, 0.24);
  transition: color var(--t) var(--ease), background var(--t) var(--ease);
}
.acc-item.open .acc-icon { color: var(--blue-200); background: rgba(36, 114, 201, 0.2); }

.acc-titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.acc-title {
  font-size: 0.9375rem; font-weight: 600; color: var(--text);
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
}
.acc-sub {
  font-size: 0.75rem; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.acc-panel {
  overflow: hidden;
  height: 0;
  transition: height var(--t-slow) var(--ease-out);
}
.acc-panel[hidden] { display: none; }
.acc-inner {
  padding: 0 var(--s-5) var(--s-5);
  border-top: 1px solid var(--line);
  padding-top: var(--s-4);
  margin-top: -1px;
}
.acc-item.open > .acc-panel > .acc-inner > * {
  animation: wp-fade-up 260ms var(--ease-out) backwards;
}

.acc-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
  margin-bottom: var(--s-3);
}
.acc-bar-title {
  display: flex; align-items: baseline; gap: var(--s-2);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--text-3);
}

/* ==========================================================================
   Statistics widgets
   ========================================================================== */

.stat-grid {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
}
.stat {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0)) var(--ink-400);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.stat::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--blue-400), transparent);
  opacity: 0.65;
}
.stat:hover { border-color: var(--line-2); transform: translateY(-1px); }
.stat-ic {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  color: var(--blue-300);
  background: var(--blue-glass);
  border: 1px solid rgba(36, 114, 201, 0.22);
}
.stat-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.stat-label {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-3);
}
.stat-value {
  font-family: var(--font-mono);
  font-size: 1.5rem; font-weight: 500; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stat-value.text {
  font-family: var(--font); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em;
}
.stat-foot { font-size: 0.75rem; color: var(--text-3); }

/* Slim inline meter used under a stat value. */
.meter { height: 4px; border-radius: var(--r-pill); background: var(--ink-200); overflow: hidden; margin-top: 6px; }
.meter > span {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--blue-600), var(--blue-400));
  transition: width var(--t-slow) var(--ease-out);
}

/* ==========================================================================
   Charts (hand-rolled SVG; no chart library on the wire)
   ========================================================================== */

.chart { width: 100%; display: block; overflow: visible; }
.chart .grid-line { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.chart .axis-label {
  fill: var(--text-3); font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.04em;
}
.chart .bar { fill: url(#wpBarGrad); transition: opacity var(--t-fast) var(--ease); }
.chart .bar:hover { opacity: 0.75; }
.chart .bar-hit { fill: transparent; cursor: pointer; }
.chart .spark-line { fill: none; stroke: var(--blue-400); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .spark-area { fill: url(#wpAreaGrad); }
.chart .dot { fill: var(--blue-300); stroke: var(--ink-300); stroke-width: 2; }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-3); }
.chart-legend .lg {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.75rem; color: var(--text-2);
}
.chart-legend .sw { width: 9px; height: 9px; border-radius: 2px; flex: none; }

/* Horizontal composition bars — the "mix" widget. */
.mix { display: grid; gap: 11px; }
.mix-row { display: grid; grid-template-columns: 1fr auto; gap: 4px var(--s-3); align-items: center; }
.mix-name { font-size: 0.8125rem; color: var(--text-2); }
.mix-val { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text); font-variant-numeric: tabular-nums; }
.mix-track { grid-column: 1 / -1; height: 6px; border-radius: var(--r-pill); background: var(--ink-200); overflow: hidden; }
.mix-track > span {
  display: block; height: 100%; border-radius: inherit;
  transform-origin: left center;
  animation: wp-grow-x 520ms var(--ease-out) backwards;
}

/* ==========================================================================
   Lists / records
   ========================================================================== */

.list { display: grid; gap: var(--s-2); }
.list.gap-3 { gap: var(--s-3); }

.record {
  position: relative;
  padding: var(--s-3) var(--s-4);
  background: var(--ink-400);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.record:hover { border-color: var(--line-2); background: var(--ink-500); }
.record-head {
  display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap;
  margin-bottom: 2px;
}
.record-title { font-size: 0.9375rem; font-weight: 600; color: var(--text); }
.record-meta {
  display: flex; flex-wrap: wrap; gap: 2px var(--s-4);
  font-size: 0.8125rem; color: var(--text-2);
}
.record-meta > span > b { color: var(--text); font-weight: 500; }
.record-note {
  margin-top: 6px; font-size: 0.8125rem; color: var(--text-2);
  line-height: 1.5; white-space: pre-wrap;
}
.record-actions {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.record-thumb {
  display: block; margin-top: var(--s-3);
  max-width: 100%; max-height: 220px;
  border-radius: var(--r-sm); border: 1px solid var(--line-2);
}
.photo-preview img {
  max-width: 100%; max-height: 150px;
  border-radius: var(--r-sm); border: 1px solid var(--line-2);
}
.star { color: #e0b34a; }

/* Two-column record layout for wide screens: media on the left, facts right. */
.record.media { display: grid; grid-template-columns: 92px 1fr; gap: var(--s-3); align-items: start; }
.record.media .record-thumb { margin-top: 0; max-height: 112px; width: 92px; object-fit: cover; }
@media (max-width: 560px) {
  .record.media { grid-template-columns: 1fr; }
  .record.media .record-thumb { width: 100%; max-height: 180px; }
}

/* ==========================================================================
   Tables
   ========================================================================== */

.table-toolbar {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
}
.table-toolbar .grow { flex: 1 1 220px; min-width: 0; }
.table-toolbar select { width: auto; min-width: 132px; }

.table-wrap {
  position: relative;
  overflow: auto;
  max-height: min(66vh, 720px);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.table-wrap.no-cap { max-height: none; }

table.table { width: 100%; border-collapse: separate; border-spacing: 0; }
table.table th, table.table td {
  padding: 11px var(--s-4);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
}
table.table thead th {
  position: sticky; top: 0; z-index: 3;
  background: #131922;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-3);
  white-space: nowrap;
  border-bottom: 1px solid var(--line-2);
  box-shadow: 0 1px 0 var(--line-2);
  user-select: none;
}
table.table tbody tr { transition: background var(--t-fast) var(--ease); }
table.table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.014); }
table.table tbody tr:hover { background: var(--blue-glass); }
table.table tbody tr:last-child td { border-bottom: none; }
table.table td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
table.table td.wrap { white-space: normal; }
table.table.compact th, table.table.compact td { padding: 8px var(--s-3); }

/* Sortable headers */
table.table th.sortable { cursor: pointer; padding-right: 26px; position: sticky; }
table.table th.sortable:hover { color: var(--text-2); background: #171e28; }
table.table th.sortable .sort-ic {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  opacity: 0.32; transition: opacity var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
table.table th.sortable:hover .sort-ic { opacity: 0.7; }
table.table th[aria-sort] .sort-ic { opacity: 1; color: var(--blue-300); }

/* Column resize grip. Sits inside the header cell so it scrolls with it. */
table.table th .col-grip {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 7px; cursor: col-resize; z-index: 4;
  background: transparent;
  transition: background var(--t-fast) var(--ease);
}
table.table th .col-grip:hover,
table.table th .col-grip.dragging { background: var(--blue-500); }
body.wp-resizing { cursor: col-resize; user-select: none; }

/* ==========================================================================
   Messages, empty states, skeletons
   ========================================================================== */

.message {
  display: none;
  align-items: flex-start;
  gap: var(--s-2);
  padding: 10px var(--s-3);
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  border: 1px solid transparent;
}
.message.show, .message.error, .message.success, .message.info, .message.warn {
  display: flex;
  animation: wp-slide-in 180ms var(--ease-out);
}
.message .ic { flex: none; margin-top: 1px; }
.message.error { background: var(--danger-soft); border-color: rgba(217, 79, 92, 0.42); color: #ffbcc3; }
.message.success { background: var(--success-soft); border-color: rgba(46, 156, 107, 0.42); color: #9fe6c1; }
.message.warn { background: var(--warn-soft); border-color: rgba(200, 144, 31, 0.42); color: #ecc478; }
.message.info { background: var(--blue-glass); border-color: rgba(36, 114, 201, 0.42); color: var(--blue-100); }
.message + * { margin-top: var(--s-3); }

.empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  padding: var(--s-6) var(--s-4);
  text-align: center;
  color: var(--text-3);
  font-size: 0.875rem;
}
.empty .ic { color: var(--line-3); margin-bottom: 2px; }
.empty strong { display: block; color: var(--text-2); font-weight: 600; font-size: 0.9375rem; }
.empty.inline { padding: var(--s-4) 0; }

.skeleton {
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--ink-400) 25%, var(--ink-500) 50%, var(--ink-400) 75%);
  background-size: 240% 100%;
  animation: wp-shimmer 1.3s linear infinite;
}
.skeleton-row { height: 46px; margin-bottom: var(--s-2); }
.skeleton-text { height: 11px; margin-bottom: 8px; }
.skeleton-text.w-60 { width: 60%; }
.skeleton-text.w-40 { width: 40%; }

.spinner {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid var(--line-3); border-top-color: var(--blue-400);
  border-radius: 50%;
  animation: wp-spin 620ms linear infinite;
}

/* Live status indicator. */
.status-line {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  font-size: 0.8125rem; color: var(--text-2);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex: none; }
.dot.live { background: var(--success); animation: wp-pulse 2s ease-out infinite; }
.dot.paused { background: var(--warn); }
.dot.error { background: var(--danger); }

/* ==========================================================================
   Modals
   ========================================================================== */

.modal-overlay, .overlay {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-4);
  background: rgba(4, 6, 10, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: wp-fade 160ms var(--ease) backwards;
  overflow: auto;
}
.overlay { align-items: flex-start; padding: var(--s-6) var(--s-4); }

.modal {
  width: min(500px, 96vw);
  max-height: 88vh;
  overflow: auto;
  padding: var(--s-5);
  background: var(--ink-300);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-4);
  animation: wp-pop 220ms var(--ease-out) backwards;
}
.modal.wide { width: min(760px, 96vw); }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.modal-head h3 { font-size: 1.0625rem; }
.modal-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2); flex-wrap: wrap;
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.modal-scroll { max-height: 42vh; overflow: auto; margin: 0 calc(var(--s-2) * -1); padding: 0 var(--s-2); }

/* ==========================================================================
   Toasts
   ========================================================================== */

#wpToasts {
  position: fixed; z-index: 3000;
  bottom: var(--s-5); right: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-2);
  pointer-events: none;
}
.wp-toast {
  display: flex; align-items: center; gap: var(--s-2);
  max-width: 380px;
  padding: 11px var(--s-4);
  background: var(--ink-400);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--blue-500);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-3);
  font-size: 0.875rem;
  color: var(--text);
  pointer-events: auto;
  animation: wp-toast-in 240ms var(--ease-out) backwards;
}
.wp-toast.error { border-left-color: var(--danger); }
.wp-toast.success { border-left-color: var(--success); }
.wp-toast.warn { border-left-color: var(--warn); }
.wp-toast.leaving { animation: wp-toast-out 180ms var(--ease) forwards; }
@media (max-width: 560px) {
  #wpToasts { left: var(--s-3); right: var(--s-3); bottom: var(--s-3); }
  .wp-toast { max-width: none; }
}

/* ==========================================================================
   Auth pages
   ========================================================================== */

.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--s-6) var(--s-4);
}
.auth-box { width: min(408px, 100%); }
.auth-logo {
  display: block;
  width: min(268px, 74%);
  height: auto;
  margin: 0 auto var(--s-5);
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.6));
  animation: wp-fade-up 520ms var(--ease-out) backwards;
}
.auth-card {
  padding: var(--s-6);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)) var(--ink-300);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-4);
  animation: wp-fade-up 520ms var(--ease-out) 80ms backwards;
}
.auth-card h1 { font-size: 1.1875rem; text-align: center; }
.auth-lede {
  margin: 5px 0 var(--s-5);
  text-align: center;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.auth-card .btn.primary { width: 100%; margin-top: var(--s-4); }
.auth-foot {
  margin-top: var(--s-5); padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  text-align: center; font-size: 0.75rem; color: var(--text-3);
}
.auth-mark { display: block; width: 84px; margin: 0 auto var(--s-4); height: auto; }

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.stack { display: grid; gap: var(--s-4); }
.stack.sm { gap: var(--s-2); }
.stack.lg { gap: var(--s-5); }

/* Widescreen work surface: results stay put on the left while reference panels
   stack on the right. Collapses to one column well before tablet width. */
.split {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 1120px) {
  .split.main-aside { grid-template-columns: minmax(0, 1.55fr) minmax(340px, 1fr); }
  .split.aside-main { grid-template-columns: minmax(340px, 1fr) minmax(0, 1.55fr); }
  .split.even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1560px) {
  .split.main-aside { grid-template-columns: minmax(0, 1.75fr) minmax(400px, 1fr); }
  .split.aside-main { grid-template-columns: minmax(400px, 1fr) minmax(0, 1.75fr); }
  .split.trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* A column that keeps its own scroll so the neighbouring column stays in view.
   Sticky rather than fixed, so short content never leaves a gap. */
.sticky-col { position: sticky; top: calc(var(--header-h) + var(--s-4)); }
@media (max-width: 1119px) { .sticky-col { position: static; } }

.scroll-y { overflow-y: auto; overscroll-behavior: contain; }
.scroll-y.h-sm { max-height: 320px; }
.scroll-y.h-md { max-height: 460px; }
.scroll-y.h-lg { max-height: 620px; }

.toolbar { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.toolbar .grow { flex: 1 1 220px; min-width: 0; }
.toolbar-sticky {
  position: sticky; top: var(--header-h); z-index: 60;
  background: rgba(10, 13, 18, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin: 0 calc(var(--s-6) * -1);
  padding: var(--s-3) var(--s-6);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 980px) {
  .toolbar-sticky { margin: 0 calc(var(--s-4) * -1); padding: var(--s-3) var(--s-4); }
}

.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.small { font-size: 0.8125rem; }
.xsmall { font-size: 0.75rem; }
.strong { font-weight: 600; }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.right { text-align: right; }
.grow { flex: 1; min-width: 0; }
.no-pad { padding: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mb-0 { margin-bottom: 0 !important; }
.mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); }
.hide-sm { display: initial; }
@media (max-width: 720px) { .hide-sm { display: none; } }

.divider { height: 1px; background: var(--line); margin: var(--s-4) 0; }

/* Icon sizing. Every icon in the UI is an inline SVG using currentColor. */
.ic { width: 16px; height: 16px; flex: none; stroke-width: 1.9; }
.ic.sm { width: 14px; height: 14px; }
.ic.lg { width: 20px; height: 20px; }
.ic.xl { width: 28px; height: 28px; stroke-width: 1.6; }

/* Entrance choreography: one staggered reveal per page load. */
.reveal { animation: wp-fade-up 420ms var(--ease-out) backwards; }
.reveal-1 { animation-delay: 30ms; }
.reveal-2 { animation-delay: 70ms; }
.reveal-3 { animation-delay: 110ms; }
.reveal-4 { animation-delay: 150ms; }
.reveal-5 { animation-delay: 190ms; }

/* ==========================================================================
   Segmented tabs
   ========================================================================== */

.tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  flex-wrap: wrap;
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-2);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.tab:hover { background: rgba(255, 255, 255, 0.05); color: var(--text); }
.tab .ic { opacity: 0.75; }
.tab[aria-selected="true"], .tab.active {
  color: #fff;
  background: linear-gradient(180deg, var(--blue-500), var(--blue-600));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 2px 8px rgba(20, 71, 127, 0.42);
}
.tab[aria-selected="true"] .ic, .tab.active .ic { opacity: 1; }
.tabpanel { animation: wp-fade-up 280ms var(--ease-out) backwards; }

/* Permission matrix: one framed group per category, two columns when there
   is room. */
.perm-group {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4) var(--s-4);
  background: rgba(0, 0, 0, 0.16);
}
.perm-group + .perm-group { margin-top: var(--s-3); }
.perm-group h4 {
  margin: 0 0 var(--s-2);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-3);
}
.perm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px var(--s-4); }
.perm-grid label {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 0;
  font-size: 0.875rem; color: var(--text-2); cursor: pointer;
}
.perm-grid label:hover { color: var(--text); }
.perm-grid input { width: auto; min-height: 0; }
.perm-grid input:disabled + span, .perm-grid input:disabled { cursor: not-allowed; opacity: 0.6; }
@media (max-width: 720px) { .perm-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Keyframes
   ========================================================================== */

@keyframes wp-spin { to { transform: rotate(360deg); } }
@keyframes wp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wp-fade-up {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: none; }
}
@keyframes wp-slide-in {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: none; }
}
@keyframes wp-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes wp-toast-in {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes wp-toast-out {
  to { opacity: 0; transform: translateX(18px); }
}
@keyframes wp-shimmer {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}
@keyframes wp-grow-x {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes wp-pulse {
  0% { box-shadow: 0 0 0 0 rgba(46, 156, 107, 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(46, 156, 107, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 156, 107, 0); }
}

/* ==========================================================================
   Reduced motion — honour the OS setting everywhere, including the accordion
   (which falls back to an instant open/close).
   ========================================================================== */

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

/* ==========================================================================
   Print — a clean case-file printout: no chrome, no dark ink.
   ========================================================================== */

@media print {
  body { background: #fff; color: #000; }
  .wp-header, .wp-nav-drawer, .toolbar-sticky, #wpToasts, .record-actions,
  .acc-chevron, .btn { display: none !important; }
  .card, .acc-item, .record { border-color: #ccc; box-shadow: none; background: #fff; color: #000; }
  .acc-panel { height: auto !important; }
}