/* =====================================================================
   ScholarshipHub — Design System
   ---------------------------------------------------------------------
   One visual language for the whole product: public site, dashboard and
   admin. Restrained by design — hairline borders, a single accent, small
   radii, no decorative gradients or motion for its own sake.

   Contents
     1.  Tokens
     2.  Reset & base
     3.  Layout
     4.  Typography
     5.  Buttons
     6.  Forms
     7.  Cards
     8.  Badges & pills
     9.  Tables
     10. Alerts
     11. Navigation (header / footer / mobile)
     12. Pagination & breadcrumbs
     13. Search & filters
     14. Opportunity components
     15. Prose (CMS content)
     16. Dashboard & admin shell
     17. Utilities
     18. Accessibility & motion
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------ */
:root {
  /* Brand — a single deep blue, used sparingly for trust and hierarchy */
  --brand-50:  #eef4fb;
  --brand-100: #d7e5f5;
  --brand-200: #b0caea;
  --brand-300: #7ba7db;
  --brand-400: #4a80c6;
  --brand-500: #2b60a8;
  --brand-600: #1d4b8c;
  --brand-700: #163a6d;
  --brand-800: #122e56;
  --brand-900: #0e2440;

  /* Neutrals — very slightly cool, never pure black */
  --ink-900: #0f172a;
  --ink-800: #1e293b;
  --ink-700: #334155;
  --ink-600: #475569;
  --ink-500: #64748b;
  --ink-400: #94a3b8;
  --ink-300: #cbd5e1;
  --ink-200: #e2e8f0;
  --ink-100: #f1f5f9;
  --ink-50:  #f8fafc;
  --white:   #ffffff;

  /* Status */
  --ok-bg:    #e8f6ed;  --ok-fg:    #14663a;  --ok-line: #a9dcbe;
  --warn-bg:  #fdf3e2;  --warn-fg:  #8a5a10;  --warn-line: #f0d3a0;
  --risk-bg:  #fdecec;  --risk-fg:  #9b2226;  --risk-line: #f3c2c2;
  --info-bg:  #eaf1fb;  --info-fg:  #1d4b8c;  --info-line: #c3d7f2;

  /* Semantic surfaces */
  --surface:        var(--white);
  --surface-subtle: var(--ink-50);
  --surface-sunken: var(--ink-100);
  --border:         var(--ink-200);
  --border-strong:  var(--ink-300);
  --text:           var(--ink-900);
  --text-muted:     var(--ink-500);
  /* --text-subtle is decorative only. Measured at 2.45:1 on white, it must
     never carry information — use --text-muted (4.6:1) for anything a reader
     actually needs, such as result counts or dates. */
  --text-subtle:    var(--ink-400);
  --link:           var(--brand-600);

  /* Type */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-xs:   0.75rem;    /* 12 */
  --fs-sm:   0.8125rem;  /* 13 */
  --fs-base: 0.9375rem;  /* 15 */
  --fs-md:   1rem;       /* 16 */
  --fs-lg:   1.125rem;   /* 18 */
  --fs-xl:   1.375rem;   /* 22 */
  --fs-2xl:  1.75rem;    /* 28 */
  --fs-3xl:  2.25rem;    /* 36 */
  --fs-4xl:  2.875rem;   /* 46 */

  /* Space — 4px base */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.25rem;  --s-6: 1.5rem;   --s-8: 2rem;     --s-10: 2.5rem;
  --s-12: 3rem;    --s-16: 4rem;    --s-20: 5rem;

  /* Radius — deliberately small */
  --r-sm: 4px;
  --r:    6px;
  --r-lg: 8px;
  --r-pill: 999px;

  /* Elevation — hairline first, shadow second */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow:    0 1px 3px rgba(15, 23, 42, 0.07), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);

  --container: 1200px;
  --container-narrow: 780px;
  --header-h: 64px;

  --focus: 0 0 0 3px rgba(43, 96, 168, 0.35);
  --transition: 140ms ease;
}

/* ---------------------------------------------------------------------
   2. Reset & base
   ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s-4));
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--surface-subtle);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
svg { flex-shrink: 0; }

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

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

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

::selection { background: var(--brand-100); color: var(--brand-900); }

/* ---------------------------------------------------------------------
   3. Layout
   ------------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-5);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--s-12); }
.section--tight { padding-block: var(--s-8); }
.section--flush { padding-block: 0; }
.section--alt { background: var(--white); }

.stack > * + * { margin-top: var(--s-4); }
.stack-sm > * + * { margin-top: var(--s-2); }
.stack-lg > * + * { margin-top: var(--s-6); }

.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); }
.grid-auto-sm { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

.cluster { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.cluster-3 { gap: var(--s-3); }
.cluster-4 { gap: var(--s-4); }

.split { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
/* A .split used as a link (a row that navigates, e.g. the log list) needs a
   real target height — the text alone was 21px. */
a.split { min-height: 40px; }

/* Content + sidebar */
.with-aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--s-8);
  align-items: start;
}
.aside-sticky { position: sticky; top: calc(var(--header-h) + var(--s-4)); }

@media (max-width: 1024px) {
  .with-aside { grid-template-columns: minmax(0, 1fr); }
  .aside-sticky { position: static; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  :root { --fs-3xl: 1.75rem; --fs-4xl: 2rem; --fs-2xl: 1.4rem; }
  .container { padding-inline: var(--s-4); }
  .section { padding-block: var(--s-8); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .grid-auto { grid-template-columns: minmax(0, 1fr); }
  .grid-auto-sm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------
   4. Typography
   ------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.014em;
  color: var(--ink-900);
}
h1 { font-size: var(--fs-3xl); letter-spacing: -0.022em; }
h2 { font-size: var(--fs-2xl); letter-spacing: -0.018em; }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5, h6 { font-size: var(--fs-md); }

p { margin: 0; }

.lede { font-size: var(--fs-lg); line-height: 1.6; color: var(--ink-600); }
.muted { color: var(--text-muted); }
/* On tinted panels the muted grey drops below 4.5:1, so darken it there. */
[style*="--brand-50"] .muted,
.card[style*="brand-50"] .muted { color: var(--ink-600); }
/* Decoration only — 2.56:1 on white, below the 4.5:1 text minimum. Never
   apply it to a date, count, or anything else a reader needs. Use .muted. */
.subtle { color: var(--text-subtle); }
.small { font-size: var(--fs-sm); }
.tiny { font-size: var(--fs-xs); }
.strong { font-weight: 600; }
.mono { font-family: var(--font-mono); font-size: 0.9em; }

.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--brand-600);
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
  flex-wrap: wrap;
}
.section-head p { margin-top: var(--s-1); color: var(--text-muted); font-size: var(--fs-base); }

/* Truncation */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2, .clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

/* ---------------------------------------------------------------------
   5. Buttons
   ------------------------------------------------------------------ */
.btn {
  --btn-bg: var(--white);
  --btn-fg: var(--ink-800);
  --btn-border: var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 40px;
  padding: 0 var(--s-4);
  font-size: var(--fs-base);
  font-weight: 550;
  line-height: 1;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: var(--r);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.btn:hover { text-decoration: none; background: var(--ink-50); }
.btn:focus-visible { outline: none; box-shadow: var(--focus); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

.btn-primary { --btn-bg: var(--brand-600); --btn-fg: var(--white); --btn-border: var(--brand-600); }
.btn-primary:hover { background: var(--brand-700); border-color: var(--brand-700); }

.btn-dark { --btn-bg: var(--ink-900); --btn-fg: var(--white); --btn-border: var(--ink-900); }
.btn-dark:hover { background: var(--ink-800); border-color: var(--ink-800); }

.btn-ghost { --btn-bg: transparent; --btn-border: transparent; --btn-fg: var(--ink-700); }
.btn-ghost:hover { background: var(--ink-100); }

.btn-danger { --btn-bg: var(--white); --btn-fg: var(--risk-fg); --btn-border: var(--risk-line); }
.btn-danger:hover { background: var(--risk-bg); }

.btn-solid-danger { --btn-bg: #b3261e; --btn-fg: var(--white); --btn-border: #b3261e; }
.btn-solid-danger:hover { background: #8f1d17; border-color: #8f1d17; }

.btn-sm { min-height: 32px; padding: 0 var(--s-3); font-size: var(--fs-sm); }
.btn-lg { min-height: 48px; padding: 0 var(--s-6); font-size: var(--fs-md); }
.btn-block { width: 100%; }
/* flex-shrink:0 matters — inside a cramped flex row (the admin topbar on a
   phone) a fixed-width icon button was being squeezed to 22px. */
.btn-icon { padding: 0; width: 36px; min-width: 36px; min-height: 36px; flex-shrink: 0; }

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

/* ---------------------------------------------------------------------
   6. Forms
   ------------------------------------------------------------------ */
.field { display: block; margin-bottom: var(--s-4); }
.field:last-child { margin-bottom: 0; }

.label {
  display: block;
  margin-bottom: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-700);
}
.label .req { color: #b3261e; margin-left: 2px; }
.hint { margin-top: var(--s-2); font-size: var(--fs-xs); color: var(--text-muted); }

.input, .select, .textarea {
  width: 100%;
  min-height: 40px;
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-base);
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
}
.textarea { min-height: 120px; resize: vertical; line-height: 1.6; padding: var(--s-3); }
.textarea-lg { min-height: 320px; font-family: var(--font-mono); font-size: var(--fs-sm); }

.select {
  padding-right: var(--s-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1.4.6 6 5.2 10.6.6 12 2 6 8 0 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-3) center;
  background-size: 10px;
}

.input::placeholder, .textarea::placeholder { color: var(--text-subtle); }

.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: var(--focus);
}

.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: #b3261e;
}
.field-error {
  margin-top: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: 550;
  color: #b3261e;
  display: flex;
  align-items: flex-start;
  gap: var(--s-1);
}

.check {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: var(--fs-base);
  cursor: pointer;
  padding: var(--s-1) 0;
}
.check input[type="checkbox"], .check input[type="radio"] {
  width: 17px; height: 17px;
  margin: 2px 0 0;
  accent-color: var(--brand-600);
  flex-shrink: 0;
  cursor: pointer;
}
.check span { line-height: 1.45; }

.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.field-row-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
@media (max-width: 720px) {
  .field-row, .field-row-3 { grid-template-columns: minmax(0, 1fr); }
}

/* Input with a leading icon */
.input-icon { position: relative; }
.input-icon .input { padding-left: 40px; }
.input-icon > svg {
  position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-subtle);
  pointer-events: none;
}

fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend {
  padding: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-700);
  margin-bottom: var(--s-2);
}

/* Honeypot — visually gone but not display:none, which some bots detect */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------------------
   7. Cards
   ------------------------------------------------------------------ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.card-pad { padding: var(--s-5); }
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border);
}
.card-head h2, .card-head h3 { font-size: var(--fs-md); font-weight: 650; }
.card-body { padding: var(--s-5); }
.card-foot {
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--border);
  background: var(--surface-subtle);
}
.card-hover { transition: border-color var(--transition), box-shadow var(--transition); }
.card-hover:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }

/* Whole-card click target driven by the title link, so the card needs only
   one link — no duplicate aria-hidden wrapper around the image. */
.card-title-link a::after { content: ""; position: absolute; inset: 0; }
/* Anything that must stay independently clickable sits above that overlay. */
.card-link-above { position: relative; z-index: 2; }

/* Featured article: image beside the text on desktop, stacked on mobile.
   Without the breakpoint the text column collapsed to ~91px at 375px and
   the headline overflowed its box. */
.feature-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}
.feature-split > img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
.feature-split > .card-body { display: flex; flex-direction: column; justify-content: center; padding: var(--s-8); }

@media (max-width: 860px) {
  .feature-split { grid-template-columns: minmax(0, 1fr); }
  .feature-split > img { min-height: 0; height: 200px; }
  .feature-split > .card-body { padding: var(--s-5); }
}

/* Stat tile */
.stat {
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.stat-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.stat-value {
  margin-top: var(--s-2);
  font-size: var(--fs-2xl);
  font-weight: 660;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat-meta { margin-top: var(--s-1); font-size: var(--fs-xs); color: var(--text-muted); }

/* Category tile */
.tile {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
  height: 100%;
}
.tile:hover { text-decoration: none; border-color: var(--brand-300); box-shadow: var(--shadow-sm); }
.tile-icon {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--r);
  background: var(--brand-50);
  color: var(--brand-600);
}
.tile-title { font-weight: 600; font-size: var(--fs-base); color: var(--ink-900); }
.tile-desc { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; }
.tile-count {
  margin-top: auto;
  padding-top: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--brand-600);
  font-variant-numeric: tabular-nums;
}

/* Empty state */
.empty {
  padding: var(--s-12) var(--s-5);
  text-align: center;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.empty svg { margin: 0 auto var(--s-3); color: var(--text-subtle); }
.empty h3 { font-size: var(--fs-lg); margin-bottom: var(--s-2); }
.empty p { color: var(--text-muted); max-width: 46ch; margin-inline: auto; }
.empty .cluster { justify-content: center; margin-top: var(--s-5); }

/* ---------------------------------------------------------------------
   8. Badges & pills
   ------------------------------------------------------------------ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.4;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge-neutral { background: var(--ink-100); color: var(--ink-700); border-color: var(--ink-200); }
.badge-brand   { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-100); }
.badge-ok      { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-line); }
.badge-warn    { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-line); }
.badge-risk    { background: var(--risk-bg); color: var(--risk-fg); border-color: var(--risk-line); }
.badge-info    { background: var(--info-bg); color: var(--info-fg); border-color: var(--info-line); }
.badge-featured { background: var(--ink-900); color: var(--white); border-color: var(--ink-900); }

/* Status dot doubles the colour signal so meaning is not colour-only */
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  font-size: var(--fs-sm);
  font-weight: 550;
  color: var(--ink-700);
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  transition: background var(--transition), border-color var(--transition);
}
a.pill:hover { text-decoration: none; background: var(--ink-50); border-color: var(--ink-400); }
.pill--active { background: var(--brand-600); color: var(--white); border-color: var(--brand-600); }
a.pill--active:hover { background: var(--brand-700); border-color: var(--brand-700); }
.pill button {
  background: none; border: 0; padding: 0; margin-left: 2px;
  color: inherit; opacity: 0.7; display: grid; place-items: center;
}
.pill button:hover { opacity: 1; }

/* Meta list: label above value, used on the opportunity summary panel */
.meta-list { display: grid; gap: var(--s-4); }
.meta-item { display: grid; gap: 3px; }
.meta-key {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.meta-val { font-size: var(--fs-base); font-weight: 550; color: var(--ink-800); }

/* ---------------------------------------------------------------------
   9. Tables
   ------------------------------------------------------------------ */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th, .table td {
  padding: var(--s-3) var(--s-4);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
}
.table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-subtle);
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-600);
  white-space: nowrap;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--ink-50); }
.table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table .cell-title { font-weight: 600; color: var(--ink-900); }
.table .cell-actions { text-align: right; white-space: nowrap; }

/* The row checkbox is small by nature, so the cell around it is the target —
   padding gives it a ~40px hit area without changing how it looks. */
.table .cell-check { width: 44px; padding: 0; }
.table .cell-check label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: var(--s-2);
  cursor: pointer;
}
.table input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--brand-600); cursor: pointer; }

/* Icon-only row actions were 22px wide — below any usable target size. */
.table .cell-actions .btn-sm { min-width: 34px; justify-content: center; }

/* A link in a data cell was only as tall as its text (14px). Filling the
   cell height makes it a real target without changing the visual density. */
.table td a:not(.btn):not(.badge) {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  /* Analytics tables show literal paths — "/" is 6px of text, so give every
     data link a floor width regardless of how short its label is. */
  min-width: 44px;
}

/* "View all" style links in a card header — short labels like "All" need
   horizontal padding to reach a usable width, not just height. */
.card-head a.small {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  min-width: 44px;
  justify-content: flex-end;
  padding-inline: var(--s-2);
}

.bulk-bar {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--r);
  margin-bottom: var(--s-4);
}
.bulk-bar[hidden] { display: none; }

/* ---------------------------------------------------------------------
   10. Alerts
   ------------------------------------------------------------------ */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid;
  border-radius: var(--r);
  font-size: var(--fs-base);
  margin-bottom: var(--s-4);
}
.alert svg { margin-top: 2px; flex-shrink: 0; }
.alert-success { background: var(--ok-bg);   color: var(--ok-fg);   border-color: var(--ok-line); }
.alert-error   { background: var(--risk-bg); color: var(--risk-fg); border-color: var(--risk-line); }
.alert-warning { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-line); }
.alert-info    { background: var(--info-bg); color: var(--info-fg); border-color: var(--info-line); }
.alert a { color: inherit; text-decoration: underline; font-weight: 600; }
.alert ul { margin: var(--s-1) 0 0; padding-left: var(--s-5); }

.flash-region { position: sticky; top: var(--header-h); z-index: 40; }

/* ---------------------------------------------------------------------
   11. Navigation
   ------------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 700;
  font-size: var(--fs-md);
  letter-spacing: -0.02em;
  color: var(--ink-900);
  flex-shrink: 0;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: var(--r);
  background: var(--brand-700);
  color: var(--white);
}
.brand span em { font-style: normal; color: var(--brand-600); }

.main-nav { display: flex; align-items: center; gap: var(--s-1); margin-left: auto; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px var(--s-3);
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--ink-700);
  border-radius: var(--r);
  white-space: nowrap;
}
.nav-link:hover { text-decoration: none; background: var(--ink-100); color: var(--ink-900); }
.nav-link[aria-current="page"] { color: var(--brand-700); font-weight: 600; background: var(--brand-50); }

.nav-actions { display: flex; align-items: center; gap: var(--s-2); margin-left: var(--s-2); }

/* Dropdown */
.has-menu { position: relative; }
.menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 230px;
  padding: var(--s-2);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  z-index: 60;
}
.menu-panel[hidden] { display: none; }
.menu-panel a {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 7px var(--s-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
  color: var(--ink-700);
}
.menu-panel a:hover { text-decoration: none; background: var(--ink-100); color: var(--ink-900); }
.menu-panel hr { margin: var(--s-2) 0; }
.menu-label {
  padding: var(--s-2) var(--s-3) var(--s-1);
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.menu-panel--right { left: auto; right: 0; }

.nav-toggle { display: none; }

/* Mobile navigation — a full drawer, not a squeezed desktop bar */
.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 45;
  background: var(--white);
  overflow-y: auto;
  padding: var(--s-5) 0 var(--s-16);
  border-top: 1px solid var(--border);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav .nav-group + .nav-group { margin-top: var(--s-6); }
.mobile-nav .menu-label { padding-inline: 0; }
.mobile-nav a.nav-link,
.mobile-nav button.nav-link {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: var(--s-3) 0;
  font-size: var(--fs-md);
  border-radius: 0;
  border-bottom: 1px solid var(--border);
  background: none;
  border-left: 0; border-right: 0; border-top: 0;
  text-align: left;
}
.mobile-nav a.nav-link:hover { background: none; color: var(--brand-700); }

@media (max-width: 1024px) {
  .main-nav, .nav-actions .desktop-only { display: none; }
  .nav-toggle {
    display: inline-grid;
    place-items: center;
    width: 40px; height: 40px;
    margin-left: auto;
    background: var(--white);
    border: 1px solid var(--border-strong);
    border-radius: var(--r);
    color: var(--ink-700);
  }
  .nav-actions { margin-left: var(--s-2); }
}
@media (min-width: 1025px) {
  .mobile-nav { display: none !important; }
}

/* Footer */
.site-footer {
  background: var(--ink-900);
  color: var(--ink-300);
  padding-block: var(--s-12) var(--s-6);
  margin-top: var(--s-16);
}
.site-footer a { color: var(--ink-300); }
.site-footer a:hover { color: var(--white); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--s-8);
}
.footer-col h3 {
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: var(--s-3);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.footer-col a { font-size: var(--fs-base); }
.footer-brand .brand { color: var(--white); }
.footer-brand p { margin-top: var(--s-3); font-size: var(--fs-base); color: var(--ink-400); max-width: 40ch; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  flex-wrap: wrap;
  margin-top: var(--s-10);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--fs-sm);
  color: var(--ink-400);
}
.social-row { display: flex; gap: var(--s-2); }
.social-row a {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--r);
  color: var(--ink-300);
}
.social-row a:hover { background: rgba(255, 255, 255, 0.08); color: var(--white); }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
  .footer-brand { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------
   12. Pagination & breadcrumbs
   ------------------------------------------------------------------ */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  flex-wrap: wrap;
  margin-top: var(--s-8);
}
.pagination a, .pagination span {
  min-width: 38px; height: 38px;
  display: inline-grid; place-items: center;
  padding-inline: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: 550;
  color: var(--ink-700);
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  font-variant-numeric: tabular-nums;
}
.pagination a:hover { text-decoration: none; background: var(--ink-50); }
.pagination [aria-current="page"] { background: var(--brand-600); color: var(--white); border-color: var(--brand-600); }
.pagination .gap { border: 0; background: none; color: var(--text-muted); min-width: 22px; }
.pagination .is-disabled { opacity: 0.4; pointer-events: none; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: var(--s-4);
  padding: 0; list-style: none;
}
.breadcrumb li { display: flex; align-items: center; gap: var(--s-1); }
.breadcrumb li + li::before { content: "/"; color: var(--ink-300); margin-right: 2px; }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--brand-600); }
.breadcrumb [aria-current] { color: var(--ink-700); font-weight: 550; }

/* ---------------------------------------------------------------------
   13. Search & filters
   ------------------------------------------------------------------ */
.hero {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding-block: var(--s-16) var(--s-12);
}
.hero h1 {
  font-size: var(--fs-4xl);
  max-width: 20ch;
  letter-spacing: -0.03em;
}
.hero .lede { margin-top: var(--s-4); max-width: 62ch; }
.hero-stats {
  display: flex; flex-wrap: wrap; gap: var(--s-6);
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--border);
}
.hero-stat b {
  display: block;
  font-size: var(--fs-xl);
  font-weight: 660;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.hero-stat span { font-size: var(--fs-sm); color: var(--text-muted); }

.searchbar {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: var(--s-2);
  margin-top: var(--s-6);
  padding: var(--s-2);
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.searchbar .input, .searchbar .select { border-color: transparent; box-shadow: none; }
.searchbar .input:focus, .searchbar .select:focus { border-color: var(--brand-500); }
.searchbar .btn { min-height: 40px; }
.searchbar-more {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px solid var(--border);
}
.searchbar-more[hidden] { display: none; }

@media (max-width: 860px) {
  .searchbar { grid-template-columns: minmax(0, 1fr); }
  .hero { padding-block: var(--s-10) var(--s-8); }
  .hero h1 { max-width: none; }
}

.filter-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.filter-group { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border); }
.filter-group:last-child { border-bottom: 0; }
.filter-group > h3 {
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-600);
  margin-bottom: var(--s-3);
}
.filter-group .check + .check { margin-top: 2px; }
.filter-count { margin-left: auto; font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.check-row { display: flex; align-items: center; width: 100%; gap: var(--s-2); }

.active-filters { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-bottom: var(--s-5); }

.result-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--border);
}
.result-count { font-size: var(--fs-base); color: var(--ink-700); }
.result-count b { font-variant-numeric: tabular-nums; }

.filter-toggle { display: none; }
@media (max-width: 1024px) {
  .filter-toggle { display: inline-flex; }
  .filter-shell[hidden] { display: none; }
}

/* Suggestions dropdown */
.suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 30;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-height: 380px;
  overflow-y: auto;
}
.suggest[hidden] { display: none; }
.suggest a, .suggest button {
  display: block; width: 100%; text-align: left;
  padding: var(--s-3) var(--s-4);
  border: 0; background: none;
  font-size: var(--fs-base);
  color: var(--ink-800);
  border-bottom: 1px solid var(--border);
}
.suggest a:last-child, .suggest button:last-child { border-bottom: 0; }
.suggest a:hover, .suggest button:hover,
.suggest a.is-active, .suggest button.is-active { text-decoration: none; background: var(--brand-50); }
.suggest .s-meta { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }

/* ---------------------------------------------------------------------
   14. Opportunity components
   ------------------------------------------------------------------ */
.opp-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color var(--transition), box-shadow var(--transition);
  position: relative;
  height: 100%;
  align-content: start;
}
.opp-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }

.org-logo {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--white);
  overflow: hidden;
  flex-shrink: 0;
}
.org-logo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.org-logo .initials {
  font-size: var(--fs-md);
  font-weight: 660;
  letter-spacing: -0.02em;
  color: var(--white);
}

.opp-title {
  font-size: var(--fs-md);
  font-weight: 620;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin-bottom: var(--s-1);
}
.opp-title a { color: var(--ink-900); }
.opp-title a:hover { color: var(--brand-700); text-decoration: none; }
/* Whole card is clickable, but the title is the real link for a11y + SEO */
.opp-title a::after { content: ""; position: absolute; inset: 0; }

.opp-org {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: var(--s-3);
}
.opp-org .sep { color: var(--text-muted); }

.opp-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: var(--s-3); }

.opp-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.opp-deadline { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-700); font-weight: 550; }
.opp-deadline.is-urgent { color: var(--risk-fg); }
.opp-deadline.is-soon { color: var(--warn-fg); }
.opp-deadline.is-closed { color: var(--text-subtle); text-decoration: line-through; }

/* Save button sits above the card-wide click target */
.save-btn {
  position: relative;
  z-index: 2;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  color: var(--text-muted);
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.save-btn:hover { color: var(--brand-600); border-color: var(--brand-300); background: var(--brand-50); }
.save-btn[aria-pressed="true"] { color: var(--brand-600); border-color: var(--brand-300); background: var(--brand-50); }
.save-btn[aria-pressed="true"] svg { fill: currentColor; }
.save-btn.is-busy { opacity: 0.5; pointer-events: none; }

.opp-card--featured { border-color: var(--brand-200); }
.opp-badge-row { position: absolute; top: var(--s-3); right: var(--s-3); z-index: 2; display: flex; gap: var(--s-1); }

@media (max-width: 480px) {
  .opp-card { grid-template-columns: 42px minmax(0, 1fr); gap: var(--s-3); padding: var(--s-4); }
  .org-logo { width: 42px; height: 42px; }
}

/* Detail page */
.opp-hero { background: var(--white); border-bottom: 1px solid var(--border); padding-block: var(--s-8); }
.opp-hero h1 { font-size: var(--fs-3xl); margin-block: var(--s-3) var(--s-4); }
.opp-hero .org-logo { width: 64px; height: 64px; }

.summary-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.summary-panel .apply-zone { padding: var(--s-5); border-bottom: 1px solid var(--border); }
.summary-panel .meta-list { padding: var(--s-5); }

.apply-cta { width: 100%; min-height: 48px; font-size: var(--fs-md); font-weight: 600; }

.deadline-banner {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-lg);
  border: 1px solid;
  margin-bottom: var(--s-5);
}
.deadline-banner strong { display: block; font-size: var(--fs-md); }
.deadline-banner span { font-size: var(--fs-sm); }

.toc {
  padding: var(--s-4) var(--s-5);
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: var(--s-6);
}
.toc h2 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-600); margin-bottom: var(--s-2); }
.toc ol { margin: 0; padding-left: var(--s-5); display: grid; gap: var(--s-1); font-size: var(--fs-sm); }

/* Deadline buckets */
.bucket-tabs { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-6); }

/* ---------------------------------------------------------------------
   15. Prose (CMS-authored content)
   ------------------------------------------------------------------ */
.prose {
  font-size: var(--fs-md);
  line-height: 1.75;
  color: var(--ink-700);
  max-width: 74ch;
}
.prose > * + * { margin-top: var(--s-4); }
.prose h2 {
  margin-top: var(--s-10);
  padding-top: var(--s-2);
  font-size: var(--fs-xl);
  color: var(--ink-900);
}
.prose h3 { margin-top: var(--s-8); font-size: var(--fs-lg); color: var(--ink-900); }
.prose h4 { margin-top: var(--s-6); font-size: var(--fs-md); color: var(--ink-900); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: var(--s-6); display: grid; gap: var(--s-2); }
.prose li::marker { color: var(--brand-400); }
.prose li > ul, .prose li > ol { margin-top: var(--s-2); }
.prose a { color: var(--brand-600); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--ink-900); font-weight: 620; }
.prose img { border-radius: var(--r-lg); border: 1px solid var(--border); margin-block: var(--s-6); }
.prose blockquote {
  margin-inline: 0;
  padding: var(--s-3) var(--s-5);
  border-left: 3px solid var(--brand-300);
  background: var(--brand-50);
  border-radius: 0 var(--r) var(--r) 0;
  color: var(--ink-700);
}
.prose code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  padding: 2px 5px;
  background: var(--ink-100);
  border-radius: var(--r-sm);
}
.prose pre {
  padding: var(--s-4);
  background: var(--ink-900);
  color: var(--ink-100);
  border-radius: var(--r-lg);
  overflow-x: auto;
  font-size: var(--fs-sm);
}
.prose pre code { background: none; padding: 0; color: inherit; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); display: block; overflow-x: auto; }
.prose th, .prose td { padding: var(--s-2) var(--s-3); border: 1px solid var(--border); text-align: left; }
.prose th { background: var(--surface-subtle); font-weight: 620; }
.prose hr { margin-block: var(--s-8); }

/* Accordion FAQ */
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.faq-item + .faq-item { margin-top: var(--s-2); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  color: var(--ink-900);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--surface-subtle); }
.faq-item summary svg { transition: transform var(--transition); flex-shrink: 0; color: var(--text-muted); }
.faq-item[open] summary svg { transform: rotate(180deg); }
.faq-item .faq-body { padding: 0 var(--s-5) var(--s-5); color: var(--ink-700); line-height: 1.7; }

/* ---------------------------------------------------------------------
   16. Dashboard & admin shell
   ------------------------------------------------------------------ */
.app-shell { display: grid; grid-template-columns: 244px minmax(0, 1fr); min-height: 100vh; }

.app-sidebar {
  background: var(--ink-900);
  color: var(--ink-300);
  padding: var(--s-4) var(--s-3);
  position: sticky; top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--s-1);
}
.app-sidebar .brand { color: var(--white); padding: var(--s-2) var(--s-2) var(--s-4); }
/* ink-500 measured 3.75:1 on the navy sidebar; ink-400 clears 4.5:1. */
.app-sidebar .menu-label { color: var(--ink-400); padding: var(--s-4) var(--s-2) var(--s-1); }
.side-link {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 8px var(--s-3);
  border-radius: var(--r);
  font-size: var(--fs-base);
  color: var(--ink-300);
}
.side-link:hover { text-decoration: none; background: rgba(255, 255, 255, 0.07); color: var(--white); }
.side-link[aria-current="page"] { background: var(--brand-600); color: var(--white); font-weight: 550; }
.side-link .count {
  margin-left: auto;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.12);
  font-variant-numeric: tabular-nums;
}
.side-link[aria-current="page"] .count { background: rgba(255, 255, 255, 0.25); }
.side-foot { margin-top: auto; padding-top: var(--s-4); border-top: 1px solid rgba(255,255,255,0.1); }

.app-main { min-width: 0; background: var(--surface-subtle); }
.app-topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-3) var(--s-6);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  min-height: 60px;
}
.app-topbar h1 { font-size: var(--fs-lg); font-weight: 650; }
.app-topbar .cluster { margin-left: auto; }
.app-content { padding: var(--s-6); }

.admin-search { position: relative; max-width: 320px; width: 100%; }

@media (max-width: 1024px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .app-sidebar {
    position: fixed; inset: 0 auto 0 0;
    width: 260px; z-index: 70;
    transform: translateX(-100%);
    transition: transform 200ms ease;
    box-shadow: var(--shadow-lg);
  }
  .app-sidebar.is-open { transform: none; }
  .app-content { padding: var(--s-4); }
  .app-topbar { padding-inline: var(--s-4); }
  .sidebar-scrim {
    position: fixed; inset: 0; z-index: 65;
    background: rgba(15, 23, 42, 0.45);
  }
  .sidebar-scrim[hidden] { display: none; }
}
@media (min-width: 1025px) {
  .sidebar-toggle { display: none; }
}

/* Charts (inline SVG, no library) */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart-grid line { stroke: var(--border); stroke-width: 1; }
.chart-area { fill: var(--brand-500); fill-opacity: 0.1; }
.chart-line { fill: none; stroke: var(--brand-600); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-dot { fill: var(--brand-600); }
.chart-bar { fill: var(--brand-500); }
.chart-bar:hover { fill: var(--brand-700); }
.chart-label { font-size: 10px; fill: var(--text-muted); font-family: var(--font-sans); }

.mini-bar {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--ink-100);
  overflow: hidden;
}
.mini-bar > span { display: block; height: 100%; background: var(--brand-500); border-radius: inherit; }

/* Tabs */
.tabs {
  display: flex; gap: var(--s-1);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-5);
  overflow-x: auto;
}
.tabs a {
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-base);
  font-weight: 550;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.tabs a:hover { text-decoration: none; color: var(--ink-800); }
.tabs a[aria-current] { color: var(--brand-700); border-bottom-color: var(--brand-600); }

/* Editor two-column layout */
.editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-5); align-items: start; }
@media (max-width: 1100px) { .editor-grid { grid-template-columns: minmax(0, 1fr); } }

.sticky-actions {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center;
  padding: var(--s-3) var(--s-5);
  margin: var(--s-6) calc(var(--s-6) * -1) calc(var(--s-6) * -1);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
}
@media (max-width: 1024px) {
  .sticky-actions { margin-inline: calc(var(--s-4) * -1); margin-bottom: calc(var(--s-4) * -1); }
}

/* ---------------------------------------------------------------------
   17. Utilities
   ------------------------------------------------------------------ */
.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); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: var(--s-2); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); }
.mb-6 { margin-bottom: var(--s-6); }
.ml-auto { margin-left: auto; }

.flex { display: flex; }
.grow { flex: 1 1 auto; min-width: 0; }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
.relative { position: relative; }
.w-full { width: 100%; }

.divider { border-top: 1px solid var(--border); margin-block: var(--s-5); }

.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 {
  position: absolute; left: var(--s-4); top: -60px;
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  background: var(--brand-700); color: var(--white);
  border-radius: 0 0 var(--r) var(--r);
  transition: top var(--transition);
}
.skip-link:focus { top: 0; text-decoration: none; }

/* Cookie / consent style banner */
.banner-bottom {
  position: fixed; bottom: var(--s-4); left: var(--s-4); right: var(--s-4);
  z-index: 60;
  max-width: 520px;
  margin-inline: auto;
  padding: var(--s-4) var(--s-5);
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.banner-bottom[hidden] { display: none; }

/* ---------------------------------------------------------------------
   Ad slots
   ---------------------------------------------------------------------
   Clearly separated from editorial content and always labelled, so a reader
   can never mistake an ad for one of our listings. min-height reserves the
   space before the ad loads, which keeps CLS at zero; it collapses to
   nothing when the slot returns unfilled.
   ------------------------------------------------------------------ */
.ad-slot {
  display: block;
  margin-block: var(--s-8);
  padding: var(--s-3);
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.ad-slot__label {
  display: block;
  margin-bottom: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}
.ad-slot ins.adsbygoogle {
  display: block;
  min-height: 100px;
}
/* An unfilled slot should take up no room at all. */
.ad-slot ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
.ad-slot:has(ins[data-ad-status="unfilled"]) { display: none; }

.ad-slot--sidebar { margin-block: 0; }
.ad-slot--sidebar ins.adsbygoogle { min-height: 250px; }

@media print { .ad-slot { display: none !important; } }

/* Loading skeleton */
.skeleton {
  background: linear-gradient(90deg, var(--ink-100) 25%, var(--ink-200) 37%, var(--ink-100) 63%);
  background-size: 400% 100%;
  animation: skeleton 1.4s ease infinite;
  border-radius: var(--r-sm);
}
@keyframes skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------------------------------------------------------------------
   18. Accessibility & motion
   ------------------------------------------------------------------ */
:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
/* Never remove focus rings — only replace them with the shadow variant */
.btn:focus-visible, .input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

/* ---------------------------------------------------------------------
   Touch targets
   ---------------------------------------------------------------------
   Measured at 375px: the brand link, inline form links and badge links all
   came in under the 44px guideline. Padding is added on coarse pointers
   only, so the desktop layout keeps its tighter rhythm.
   ------------------------------------------------------------------ */
@media (pointer: coarse), (max-width: 767px) {
  .brand { padding-block: var(--s-2); }

  /* Small text links that sit alone in a form row, e.g. "Forgot password?" */
  .field a.tiny,
  .split a.tiny {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: var(--s-1);
  }

  /* A badge acting as a link needs a real target; a badge as a label does not. */
  a.badge { min-height: 32px; padding-inline: var(--s-3); }

  /* Grow the hit area of a checkbox without changing how it looks. */
  .check { min-height: 44px; align-items: center; }
  .check input[type="checkbox"],
  .check input[type="radio"] { width: 20px; height: 20px; margin-top: 0; }

  /* Filter rows are the primary way to browse on a phone. */
  .filter-group .check { min-height: 40px; }
}

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

@media (prefers-contrast: more) {
  :root { --border: var(--ink-400); --border-strong: var(--ink-600); --text-muted: var(--ink-700); }
}

@media print {
  .site-header, .site-footer, .app-sidebar, .app-topbar,
  .save-btn, .pagination, .filter-panel, .searchbar, .banner-bottom { display: none !important; }
  body { background: #fff; }
  .card, .opp-card { border: 1px solid #ccc; box-shadow: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; color: #555; }
}