/* ===========================================================================
   Academic Event Navigator — design system
   ---------------------------------------------------------------------------
   One source of truth for type, space, colour, radius and elevation.
   Before this file existed the platform used 47 distinct font sizes, 18 border
   radii, and font weights of 720/750/850 that browsers round unpredictably —
   which is why the same "card" or "bold label" rendered differently on every
   screen. Fourteen CSS variables were referenced but never defined, including
   every --admin-* colour, so those declarations silently failed.

   Rules:
     · Never write a raw px/rem value for type, space or radius. Use a token.
     · Weights are 400 / 500 / 600 / 700 only.
     · Every legacy variable name is aliased below, so older rules and newer
       components resolve to the same values instead of to private fallbacks.
   =========================================================================== */

:root{
  /* ---- Type scale — 1.125 ratio from a 14px UI base --------------------- */
  --text-2xs:.6875rem;  /* 11px  metadata, table headers                    */
  --text-xs:.75rem;     /* 12px  captions, badges                           */
  --text-sm:.8125rem;   /* 13px  secondary body, dense tables               */
  --text-base:.875rem;  /* 14px  UI default                                 */
  --text-md:1rem;       /* 16px  emphasised body                            */
  --text-lg:1.125rem;   /* 18px  card titles                                */
  --text-xl:1.375rem;   /* 22px  panel headings                             */
  --text-2xl:1.75rem;   /* 28px  page titles                                */
  --text-3xl:2.25rem;   /* 36px  hero metrics                               */

  --leading-tight:1.25;
  --leading-snug:1.4;
  --leading-normal:1.6;

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

  --tracking-wide:.06em;
  --tracking-wider:.09em;

  /* ---- Spacing — 4px rhythm -------------------------------------------- */
  --space-0:0;      --space-1:.25rem;  --space-2:.5rem;   --space-3:.75rem;
  --space-4:1rem;   --space-5:1.25rem; --space-6:1.5rem;  --space-7:2rem;
  --space-8:2.5rem; --space-9:3rem;    --space-10:4rem;

  /* ---- Radii ------------------------------------------------------------ */
  --radius-xs:.3rem; --radius-sm:.6rem; --radius-md:.75rem;
  --radius-lg:1rem; --radius-xl:1.375rem; --radius-2xl:1.75rem; --radius-full:999px;
  --radius:var(--radius-lg);

  /* ---- Colour — RWTH blue (v4.1 refinement) ------------------------------
     Primary accent restored to the institute's own blue (#00549F) rather
     than a generic indigo. Cyan stays as a small secondary accent for
     variety (live badges, secondary gradients) — it never carries primary
     actions. Neutrals are true cool grays, not violet-tinted, so glass
     surfaces read as "blue platform", not "purple platform".            */
  --blue-50:#eaf3fb;  --blue-100:#d2e6f5; --blue-200:#a4cceb; --blue-300:#6aa8d6;
  --blue-500:#00549f; --blue-600:#00478a; --blue-700:#003a70; --blue-900:#0b2942;

  --neutral-0:#fff;   --neutral-25:#fbfcfd; --neutral-50:#f4f6f8; --neutral-100:#eaeef2;
  --neutral-200:#dbe1e8; --neutral-300:#c2ccd6; --neutral-400:#8b96a3;
  --neutral-600:#54626f; --neutral-800:#28323c; --neutral-900:#141a20;

  --green-50:#eafaf3; --green-200:#b9e9d2; --green-600:#086a49; --green-700:#075c3f;
  --amber-50:#fef8ea; --amber-200:#f4dd9e; --amber-600:#7a4d04; --amber-700:#6b4204;
  --red-50:#fdedf0;   --red-200:#f4bfcb;   --red-600:#911d43;   --red-700:#7d1938;
  --violet-50:#EEF5FF;--violet-200:#C9DCFF;--violet-600:#0A5DBB;
  --cyan-50:#e9fbfc;  --cyan-200:#a9edf1;  --cyan-500:#0f97a6;  --cyan-600:#0c7a87;

  /* ---- Semantic --------------------------------------------------------- */
  --bg:var(--neutral-50);
  --surface:var(--neutral-0);
  --surface-soft:var(--neutral-50);
  --surface-sunken:var(--neutral-100);
  --ink:var(--neutral-900);
  --ink-secondary:var(--neutral-800);
  --muted:var(--neutral-600);
  --line:#c7d0da;
  --line-strong:#a7b3c0;
  --accent:var(--blue-500);
  --accent-hover:var(--blue-700);
  --accent-soft:var(--blue-50);
  --accent-2:var(--cyan-500);
  --accent-2-soft:var(--cyan-50);
  --success:var(--green-600); --success-soft:var(--green-50); --success-line:var(--green-200);
  --warning:var(--amber-600); --warning-soft:var(--amber-50); --warning-line:var(--amber-200);
  --danger:var(--red-600);    --danger-soft:var(--red-50);    --danger-line:var(--red-200);
  --info:var(--accent);       --info-soft:var(--accent-soft); --info-line:var(--blue-200);

  /* ---- Glass surfaces ----------------------------------------------------
     Consumed by ui-modern.css for shells, cards, modals, topbars. Redefined
     per theme below so one selector set works in light and dark. Light-mode
     glass borders were previously too faint against a plain white page
     (nearly invisible outside the gradient hero); --glass-line is now a
     tinted neutral, not translucent white, so panel edges stay legible on
     any background.                                                        */
  --glass:rgba(255,255,255,.78);
  --glass-strong:rgba(255,255,255,.92);
  --glass-quiet:rgba(255,255,255,.55);
  --glass-line:rgba(19,35,53,.10);
  --glass-blur:16px;
  --surface-raised:rgba(255,255,255,.94);
  --surface-tint:linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,249,251,.96));
  --surface-hero:linear-gradient(135deg,#0b2942 0%,#00549f 55%,#0f97a6 100%);

  /* ---- Elevation — a real ramp, not one shadow -------------------------- */
  --elev-1:0 1px 2px rgba(16,28,40,.06);
  --elev-2:0 3px 10px rgba(16,28,40,.07);
  --elev-3:0 10px 26px rgba(16,28,40,.09);
  --elev-4:0 22px 50px rgba(16,28,40,.14);
  --shadow:var(--elev-3);
  --shadow-glow:0 10px 26px rgba(0,84,159,.24);

  --focus:0 0 0 3px rgba(0,84,159,.32);
  --motion:.16s cubic-bezier(.2,0,.2,1);
  --motion-slow:.28s cubic-bezier(.16,.8,.2,1);

  /* ---- Legacy aliases -----------------------------------------------------
     Older rules and the v2 components were written against these names.
     Aliasing rather than renaming means one theme, no sweeping edits, and no
     component silently falling back to a private hardcoded colour.          */
  --border:var(--line); --text:var(--ink); --text-muted:var(--muted);
  --rwth-blue:var(--accent); --rwth-blue-dark:var(--accent-hover); --rwth-light:var(--blue-300);
  --admin-navy:var(--blue-900); --admin-navy-deep:#071d30; --admin-blue:var(--accent);
  --admin-sky:var(--blue-300); --admin-bg:var(--neutral-50); --admin-soft:var(--neutral-100);
  --admin-line:var(--line); --admin-text:var(--ink); --admin-muted:var(--muted);
  --admin-green:var(--success); --admin-amber:var(--warning);

  font-family:"Inter",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-display:"Plus Jakarta Sans","Inter",ui-sans-serif,system-ui,sans-serif;
  font-size:var(--text-base);
  line-height:var(--leading-normal);
  color:var(--ink);
  background:var(--bg);
  color-scheme:light;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* =============================================================================
   Dark theme — same variable names, new values. Every component that reads a
   token above (nearly all of them, including legacy --admin-* names) repaints
   correctly with zero per-component edits. Toggled by data-theme on <html>,
   set pre-paint by the inline snippet in <head> to avoid a flash.

   v4.1 note: the first pass used a near-black background (#0c0c18) which
   read as "too dark" with too little separation between layers. Background
   is now a proper dark navy-slate (still clearly dark, still low eye strain
   at night) with more contrast between bg → surface → sunken, softer
   near-white ink instead of pure white, and lighter shadows so panels don't
   look like they're floating in a void.
   ========================================================================== */
[data-theme="dark"]{
  --blue-50:#132537;  --blue-100:#173049; --blue-200:#1f4568; --blue-300:#2f6796;
  --blue-500:#4fa3e0; --blue-600:#6fb6e8; --blue-700:#9dcdef; --blue-900:#e6f2fb;

  --neutral-0:#1c232c; --neutral-25:rgba(28,35,44,.3); --neutral-50:#161c24; --neutral-100:#1f2731;
  --neutral-200:#303a46; --neutral-300:#414d5b; --neutral-400:#6b7889;
  --neutral-600:#9aa7b5; --neutral-800:#dde3e9; --neutral-900:#f2f5f7;

  --green-50:#0f2620; --green-200:#1f4c3d; --green-600:#3ddc97; --green-700:#6ee8b3;
  --amber-50:#2a2210; --amber-200:#52420f; --amber-600:#f2c14e; --amber-700:#f7d580;
  --red-50:#2c1420;   --red-200:#5a2438;   --red-600:#ff7aa8;   --red-700:#ffa7c4;
  --violet-50:#10243E; --violet-200:#244D7B; --violet-600:#74B8FF;
  --cyan-50:#0c2528;   --cyan-200:#1c4b50;   --cyan-500:#4fd8e3;  --cyan-600:#7ee6ee;

  --bg:#10161e;
  --surface:#1c232c;
  --surface-soft:#212a34;
  --surface-sunken:#161c24;
  --ink:var(--neutral-900);
  --ink-secondary:var(--neutral-800);
  --muted:var(--neutral-600);
  --line:var(--neutral-200);
  --line-strong:var(--neutral-300);
  --accent:var(--blue-500);
  --accent-hover:var(--blue-600);
  --accent-soft:var(--blue-50);
  --accent-2:var(--cyan-500);
  --accent-2-soft:var(--cyan-50);
  --success:var(--green-600); --success-soft:var(--green-50); --success-line:var(--green-200);
  --warning:var(--amber-600); --warning-soft:var(--amber-50); --warning-line:var(--amber-200);
  --danger:var(--red-600);    --danger-soft:var(--red-50);    --danger-line:var(--red-200);
  --info:var(--accent);       --info-soft:var(--accent-soft); --info-line:var(--blue-200);

  --glass:rgba(28,35,44,.68);
  --glass-strong:rgba(33,42,52,.86);
  --glass-quiet:rgba(28,35,44,.46);
  --glass-line:rgba(255,255,255,.10);
  --surface-raised:rgba(30,38,48,.94);
  --surface-tint:linear-gradient(180deg,rgba(31,39,49,.94),rgba(22,28,36,.92));
  --surface-hero:linear-gradient(135deg,#0b1c2c 0%,#0d3c66 55%,#0c5a63 100%);

  --elev-1:0 1px 2px rgba(0,0,0,.24);
  --elev-2:0 3px 10px rgba(0,0,0,.26);
  --elev-3:0 10px 26px rgba(0,0,0,.32);
  --elev-4:0 22px 50px rgba(0,0,0,.4);
  --shadow-glow:0 10px 28px rgba(79,163,224,.3);
  --focus:0 0 0 3px rgba(79,163,224,.4);

  --admin-navy:var(--blue-900); --admin-navy-deep:#e6f2fb; --admin-blue:var(--accent);
  --admin-sky:var(--blue-300); --admin-bg:var(--bg); --admin-soft:var(--surface-soft);
  --admin-line:var(--line); --admin-text:var(--ink); --admin-muted:var(--muted);
  --admin-green:var(--success); --admin-amber:var(--warning);
  --border:var(--line); --text:var(--ink); --text-muted:var(--muted);

  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font-size:var(--text-base)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:2px}
img{max-width:100%}
[hidden]{display:none!important}

/* ---- Headings — one scale, applied everywhere ------------------------- */
/* Headings inherit their colour. Forcing var(--ink) here overrode the white
   text that dark panels (the sign-in story, the dashboard hero) set on their
   children, producing near-black headings on a blue gradient. Body already
   establishes the default ink colour, so ordinary headings are unaffected. */
h1,h2,h3,h4,h5{margin:0;line-height:var(--leading-tight);font-weight:var(--weight-semibold);letter-spacing:-.011em;color:inherit}
h1{font-size:var(--text-2xl)}
h2{font-size:var(--text-xl)}
h3{font-size:var(--text-lg)}
h4{font-size:var(--text-md)}
h5{font-size:var(--text-base)}
p{margin:0;line-height:var(--leading-normal)}

.skip-link{position:fixed;left:var(--space-3);top:-60px;background:var(--surface);padding:var(--space-3) var(--space-4);z-index:9999;border-radius:var(--radius-sm);box-shadow:var(--elev-3)}
.skip-link:focus{top:var(--space-3)}
.icon{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:-4px}
.muted{color:var(--muted)}

/* ---- Avatar — one definition, used by both the employee and admin shells.
   Previously only defined in public.css, so it silently had no background,
   shape or centring on admin.html (which never loads that file). ------- */
.avatar{
  width:39px;height:39px;border-radius:50%;flex:0 0 auto;
  background:var(--accent-soft);color:var(--accent-hover);
  display:grid;place-items:center;font-weight:var(--weight-bold);
  box-shadow:0 6px 16px rgba(0,84,159,.16);
}

.eyebrow,.section-kicker{display:block;text-transform:uppercase;letter-spacing:var(--tracking-wider);font-weight:var(--weight-semibold);color:var(--accent);font-size:var(--text-2xs);margin-bottom:var(--space-1)}

/* Any surface that paints itself dark owns the colour of everything inside it,
   so no descendant rule can reintroduce dark-on-dark. */
.employee-hero,.login-story,.hero-copy,
.employee-hero *,.login-story *{color:inherit}
.employee-hero,.login-story{color:#fff}
.employee-hero .eyebrow,.employee-hero .section-kicker,.employee-hero .hero-eyebrow,
.login-story .eyebrow,.login-story .section-kicker{color:var(--blue-200)}
.employee-hero p,.login-story p{color:rgba(255,255,255,.86)}
.employee-hero .hero-note,.login-story .login-foot{color:rgba(255,255,255,.72)}
.employee-hero input,.hero-search input{color:#141a20}
.employee-hero .btn-primary{background:#fff;color:var(--accent-hover);border-color:#fff}
.employee-hero .btn-primary:hover{background:var(--blue-50)}

/* ---- Buttons — one shape, one motion, four intents -------------------- */
.btn{
  border:1px solid transparent;border-radius:var(--radius-md);
  padding:var(--space-2) var(--space-4);
  font-size:var(--text-base);font-weight:var(--weight-semibold);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:2.5rem;text-decoration:none;white-space:nowrap;
  transition:background var(--motion),border-color var(--motion),color var(--motion),box-shadow var(--motion);
  background:var(--surface);color:var(--ink);
}
/* Buttons no longer lift on hover: a 1px translate on every button made
   dense screens feel unstable. Colour carries the state instead. */
.btn:hover{background:var(--neutral-100)}
.btn:active{transform:translateY(.5px)}
.btn:disabled{opacity:.62;cursor:not-allowed}
.btn:focus-visible,.nav-item:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
.tab:focus-visible,[role=button]:focus-visible{outline:none;box-shadow:var(--focus)}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-secondary{border-color:var(--line-strong);background:var(--surface)}
.btn-secondary:hover{background:var(--neutral-50);border-color:var(--neutral-400)}
.btn-quiet{background:transparent;color:var(--muted)}
.btn-quiet:hover{background:var(--neutral-100);color:var(--ink)}
.btn-danger{background:var(--red-50);color:var(--danger);border-color:var(--red-200)}
.btn-danger:hover{background:#fbe4e1}
.btn-success{background:var(--green-50);color:var(--success);border-color:var(--green-200)}
.btn-sm{min-height:2rem;padding:var(--space-1) var(--space-3);font-size:var(--text-sm)}
.btn-icon{padding:var(--space-2);width:2.5rem}
.button-icon,.btn svg{width:1rem;height:1rem;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.text-link-button,.icon-text-button{border:0;background:transparent;color:var(--accent);font-size:var(--text-sm);font-weight:var(--weight-medium);display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm)}
.text-link-button:hover,.icon-text-button:hover{background:var(--accent-soft)}
.icon-text-button svg{width:1rem;height:1rem;stroke:currentColor;fill:none;stroke-width:1.8}

/* ---- Surfaces ---------------------------------------------------------- */
.card,.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--elev-1)}
.panel{padding:var(--space-6)}
.card-pad{padding:var(--space-6)}
.card-title{margin:0 0 var(--space-1);font-size:var(--text-lg)}
.panel-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-5);margin-bottom:var(--space-5)}
.panel-header h2{margin-bottom:var(--space-1)}
.panel-header p{margin:0;color:var(--muted);font-size:var(--text-sm);max-width:62ch}
.section-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-5);margin-bottom:var(--space-5)}
.section-header h1,.section-header h2{margin:0 0 var(--space-1)}
.section-header p{margin:0;color:var(--muted);font-size:var(--text-sm)}
.toolbar{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}

/* ---- Badges ------------------------------------------------------------ */
.badge{display:inline-flex;align-items:center;gap:var(--space-1);border-radius:var(--radius-full);padding:var(--space-1) var(--space-3);font-size:var(--text-2xs);font-weight:var(--weight-semibold);letter-spacing:.01em;background:var(--neutral-100);color:var(--ink-secondary);white-space:nowrap;line-height:1.5}
.badge-success{background:var(--green-50);color:var(--green-700)}
.badge-warning{background:var(--amber-50);color:var(--amber-700)}
.badge-danger{background:var(--red-50);color:var(--red-700)}
.badge-blue{background:var(--blue-50);color:var(--blue-600)}

/* ---- Forms ------------------------------------------------------------- */
.field{display:grid;gap:var(--space-2)}
.field label{font-weight:var(--weight-medium);font-size:var(--text-sm);color:var(--ink-secondary)}
.field small,.field-guidance{color:var(--muted);font-size:var(--text-xs);line-height:var(--leading-snug)}
input,select,textarea{
  width:100%;border:1px solid var(--line-strong);border-radius:var(--radius-md);
  background:var(--surface);padding:var(--space-2) var(--space-3);
  font-size:var(--text-base);color:var(--ink);
  transition:border-color var(--motion),box-shadow var(--motion);
}
input:hover,select:hover,textarea:hover{border-color:var(--neutral-400)}
input::placeholder,textarea::placeholder{color:var(--neutral-400)}
textarea{min-height:6.5rem;resize:vertical;line-height:var(--leading-snug)}
select{appearance:none;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='none' stroke='%2354626f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--space-3) center;padding-right:var(--space-7)}
[data-theme="dark"] select{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='none' stroke='%239aa7b5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E")}
select[multiple]{min-height:7.5rem;background-image:none;padding-right:var(--space-3)}
input[type=checkbox],input[type=radio]{width:auto;min-height:0}
.consent{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm)}
.form-grid{display:grid;gap:var(--space-4)}
.form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.form-actions{display:flex;gap:var(--space-3);justify-content:flex-end;align-items:center;margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px solid var(--line);flex-wrap:wrap}
.form-actions.split{justify-content:space-between}
.form-gap{margin-top:var(--space-4)}

/* ---- Notices ----------------------------------------------------------- */
.notice{border:1px solid var(--blue-200);background:var(--blue-50);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);color:var(--blue-700);font-size:var(--text-sm);line-height:var(--leading-snug)}
.notice strong{display:block;margin-bottom:var(--space-1);font-weight:var(--weight-semibold)}
.notice-warning{background:var(--amber-50);border-color:var(--amber-200);color:var(--amber-700)}
.notice-danger{background:var(--red-50);border-color:var(--red-200);color:var(--red-700)}
.notice-success{background:var(--green-50);border-color:var(--green-200);color:var(--green-700)}

/* ---- Metrics — auto-fit, not a hardcoded four columns ----------------- */
.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:var(--space-4)}
.metric-card{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-1)}
.metric-value{font-size:var(--text-2xl);font-weight:var(--weight-bold);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.metric-label{color:var(--ink-secondary);font-size:var(--text-sm);font-weight:var(--weight-medium)}
.metric-note{font-size:var(--text-xs);color:var(--muted);line-height:var(--leading-snug)}

/* ---- Tables ------------------------------------------------------------ */
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}
table{width:100%;border-collapse:collapse;min-width:44rem}
th,td{text-align:left;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--line);vertical-align:middle;font-size:var(--text-sm)}
th{font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--muted);font-weight:var(--weight-semibold);background:var(--neutral-25);white-space:nowrap}
tbody tr{transition:background var(--motion)}
tbody tr:hover{background:var(--neutral-25)}
tr:last-child td{border-bottom:0}
td .toolbar{justify-content:flex-end}
.action-column{text-align:right;width:1%}

/* ---- Modals ------------------------------------------------------------ */
.modal-backdrop{position:fixed;inset:0;background:rgba(10,24,39,.5);backdrop-filter:blur(2px);display:grid;place-items:center;padding:var(--space-6);z-index:1000}
.modal{background:var(--surface);border-radius:var(--radius-xl);max-width:48rem;width:100%;max-height:92vh;overflow:auto;box-shadow:var(--elev-4)}
.modal-wide{max-width:70rem}
.modal-header{display:flex;justify-content:space-between;gap:var(--space-5);padding:var(--space-6);border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);z-index:1}
.modal-header p{margin:var(--space-1) 0 0;color:var(--muted);font-size:var(--text-sm)}
.modal-body{padding:var(--space-6)}
.modal-footer{display:flex;justify-content:flex-end;gap:var(--space-3);padding:var(--space-5) var(--space-6);border-top:1px solid var(--line)}
.modal-close{border:0;background:transparent;font-size:var(--text-xl);line-height:1;color:var(--muted);width:2rem;height:2rem;border-radius:var(--radius-sm)}
.modal-close:hover{background:var(--neutral-100);color:var(--ink)}

/* ---- Toasts ------------------------------------------------------------ */
.toast-region{position:fixed;right:var(--space-5);bottom:var(--space-5);display:grid;gap:var(--space-3);z-index:1200}
.toast{background:var(--neutral-900);color:#fff;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);box-shadow:var(--elev-4);max-width:24rem;font-size:var(--text-sm)}
.toast.error{background:var(--red-700)}
.toast.success{background:var(--green-700)}

/* ---- Empty states ------------------------------------------------------ */
.empty-state{text-align:center;padding:var(--space-9) var(--space-6);border:1px dashed var(--line-strong);border-radius:var(--radius-lg);background:var(--neutral-25);grid-column:1/-1}
.empty-state h3{margin:0 0 var(--space-2)}
.empty-state p{color:var(--muted);max-width:34rem;margin:0 auto;font-size:var(--text-sm)}

/* ---- Progress / tabs / steps ------------------------------------------ */
.progress{height:.375rem;background:var(--neutral-200);border-radius:var(--radius-full);overflow:hidden}
.progress>span{display:block;height:100%;background:var(--accent);border-radius:inherit;transition:width var(--motion)}
.confidence{display:flex;align-items:center;gap:var(--space-2)}
.confidence strong{min-width:2.5rem;font-variant-numeric:tabular-nums}

.tabs,.segmented-tabs{display:flex;gap:var(--space-1);border-bottom:1px solid var(--line);overflow-x:auto;margin-bottom:var(--space-5)}
.tab{border:0;background:transparent;padding:var(--space-3) var(--space-4);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;transition:color var(--motion),border-color var(--motion)}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--accent);border-color:var(--accent);font-weight:var(--weight-semibold)}

.stepper{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-2)}
.step{padding:var(--space-3);border-radius:var(--radius-md);background:var(--neutral-100);color:var(--muted);font-weight:var(--weight-medium);font-size:var(--text-sm)}
.step.active{background:var(--blue-50);color:var(--accent)}
.step.done{background:var(--green-50);color:var(--success)}

.agent-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:var(--space-4)}
.agent-card{padding:var(--space-5);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);position:relative}
.agent-card h4{margin:0 0 var(--space-1)}
.agent-card p{font-size:var(--text-xs);color:var(--muted);min-height:2.75rem;line-height:var(--leading-snug)}
.agent-score{font-size:var(--text-xl);font-weight:var(--weight-bold);font-variant-numeric:tabular-nums}
.agent-status{font-size:var(--text-2xs);font-weight:var(--weight-semibold);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--muted)}

/* ---- Lists ------------------------------------------------------------- */
.simple-list,.polished-list{display:grid}
.list-item,.action-item{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) 0;border-bottom:1px solid var(--line);font-size:var(--text-sm)}
.list-item:last-child,.action-item:last-child{border-bottom:0}
.list-item strong,.action-item strong{font-weight:var(--weight-semibold)}
.list-item .muted{font-size:var(--text-xs);margin-top:var(--space-1)}

.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.state-select{min-width:8rem;font-size:var(--text-sm)}
.pager{display:flex;align-items:center;justify-content:center;gap:var(--space-4);margin-top:var(--space-5);font-size:var(--text-sm);color:var(--muted)}

/* ---- Responsive -------------------------------------------------------- */
@media(max-width:900px){
  .form-grid.three{grid-template-columns:1fr}
  .stepper{grid-template-columns:1fr 1fr}
  .step:nth-child(5){grid-column:1/-1}
}
@media(max-width:620px){
  .form-grid.two{grid-template-columns:1fr}
  .section-header,.panel-header{display:grid}
  .toolbar{width:100%}
  .toolbar .btn{flex:1}
  .modal-backdrop{padding:0}
  .modal{border-radius:0;max-height:100vh;height:100%}
  .stepper{grid-template-columns:1fr}
  .panel{padding:var(--space-4)}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ===========================================================================
   USABILITY REFINEMENTS
   Behaviour rather than decoration: reach, focus, motion, and the states a
   dense administrative interface actually spends its time in.
   =========================================================================== */

/* ---- Reach ------------------------------------------------------------
   Controls sized for a mouse are hard to hit on a laptop trackpad and harder
   on a tablet. On coarse pointers every interactive control gets the 44px
   minimum; on a mouse the denser sizing is kept, because density is the point
   of an administrative screen. */
@media (pointer: coarse) {
  .btn, .btn-sm, .nav-item, .tab, .icon-text-button, .text-link-button,
  select, input:not([type=checkbox]):not([type=radio]), .modal-close {
    min-height: 2.75rem;
  }
  .btn-sm { padding-inline: var(--space-4); }
  input[type=checkbox], input[type=radio] { width: 1.15rem; height: 1.15rem; }
  .consent { padding-block: var(--space-2); }
}

/* ---- Focus ------------------------------------------------------------
   One visible focus treatment everywhere, drawn outside the element so it is
   never clipped by an ancestor's overflow, and never removed on mouse use
   alone — keyboard users navigate the same screens. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: var(--focus);
  border-radius: var(--radius-sm);
}
.modal :focus-visible { scroll-margin: var(--space-6); }

/* ---- Waiting ----------------------------------------------------------
   A control that has started work should say so, rather than looking
   unresponsive while a check is queued or a page is fetched. */
[aria-busy=true], .is-working { position: relative; pointer-events: none; opacity: .75; }
[aria-busy=true]::after, .is-working::after {
  content: ""; position: absolute; inset-block-start: 50%; inset-inline-end: var(--space-3);
  width: .875rem; height: .875rem; margin-block-start: -.4375rem;
  border: 2px solid currentColor; border-block-start-color: transparent;
  border-radius: var(--radius-full); animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Long values ------------------------------------------------------
   URLs are the main content of several screens and must not force a card
   wider than its column. */
.preview-submitted, .preview-official, .batch-item-head a, .run-card-head p,
code, .technical { overflow-wrap: anywhere; }

/* ---- Tables on narrow screens ----------------------------------------- */
@media (max-width: 720px) {
  .table-wrap { -webkit-overflow-scrolling: touch; }
  .table-wrap::after {
    content: "Scroll sideways for more"; display: block;
    padding: var(--space-2) var(--space-4); font-size: var(--text-2xs);
    color: var(--muted); border-block-start: 1px solid var(--line);
  }
}

/* ---- Print ------------------------------------------------------------
   A review decision is sometimes discussed away from the screen. */
@media print {
  .admin-sidebar, .admin-topbar, .toolbar, .btn, .toast-region,
  .sidebar-scrim, .detail-toggle { display: none !important; }
  .admin-content { padding: 0; max-width: none; }
  .panel, .card { box-shadow: none; border-color: #999; break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: var(--text-2xs); color: #555; }
}

/* ---- Selection and scrollbars ----------------------------------------- */
::selection { background: var(--blue-100); color: var(--ink); }
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: .5rem; height: .5rem; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--radius-full); }
*::-webkit-scrollbar-thumb:hover { background: var(--neutral-400); }

/* ===========================================================================
   v3.2 interface fine-tuning
   Consistent form feedback, stable scroll geometry and review-friendly tables.
   =========================================================================== */
html{scrollbar-gutter:stable}
:where(input,textarea)::placeholder{color:var(--muted);opacity:.68}
:where(input,select,textarea)[aria-invalid=true]{border-color:var(--danger);background:var(--red-50)}
:where(input,select,textarea)[aria-invalid=true]:focus-visible{box-shadow:0 0 0 3px rgba(180,35,24,.18)}
.field>small,.field-help{display:block;color:var(--muted);font-size:var(--text-xs);line-height:var(--leading-snug);margin-top:var(--space-1)}
.field-error{display:block;color:var(--danger);font-size:var(--text-xs);font-weight:var(--weight-medium);margin-top:var(--space-1)}
details>summary{cursor:pointer}
details>summary::marker{color:var(--muted)}
.table-wrap{position:relative;overflow:auto;border-radius:var(--radius-lg)}
.table-wrap thead th{position:sticky;top:0;z-index:2;box-shadow:0 1px 0 var(--line)}
.modal-footer{position:sticky;bottom:0;background:var(--surface);z-index:2;box-shadow:0 -8px 20px rgba(21,42,64,.05)}
.btn[aria-busy=true]{padding-right:var(--space-8)}
@media(max-width:620px){
  .modal-footer{display:grid;grid-template-columns:1fr;padding:var(--space-4)}
  .modal-footer .btn{width:100%}
  .toast-region{left:var(--space-3);right:var(--space-3);bottom:var(--space-3)}
  .toast{max-width:none}
}