/* ==========================================================================
   ORION — one stylesheet for the whole site.

   A light, quiet ground so the work reads first: white pages, slate type,
   one navy for every action, and three accent inks, one per Core, so a page
   still says which Core it belongs to before you read a word of it.

   The inks are darker cousins of the brand's amber, violet and blue. The
   bright originals fail contrast as text on white; these pass AA.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Brand navy, from the mark */
  --navy-900: #0b1b2e;
  --navy-800: #10263f;
  --brand: #1b4a7d;          /* buttons and anything you can press */
  --brand-hover: #153b65;
  --brand-50: #eef4fb;
  --brand-100: #dbe7f5;
  --brand-ring: rgba(27, 74, 125, 0.18);
  --link: #1f5ea8;

  /* The three Core accents: a bright tone for fills, an ink for text */
  --amber: #e3a935;          /* Administrative */
  --amber-ink: #9a5b00;
  --amber-50: #fdf6e7;
  --amber-200: #f3dba6;

  --violet: #8b6fd0;         /* Research Facilities & Infrastructure */
  --violet-ink: #6243b5;
  --violet-50: #f4f0fc;
  --violet-200: #dccff4;

  --blue: #3b8ad9;           /* Workforce Development */
  --blue-ink: #1c64b0;
  --blue-50: #ebf3fc;
  --blue-200: #c6dcf4;

  --core1: var(--amber);
  --core2: var(--blue);
  --core3: var(--violet);

  --success: #15803d;
  --success-bg: #ecfdf3;
  --success-border: #a6e2bd;
  --danger: #b42318;
  --danger-bg: #fef3f2;
  --danger-border: #f4c3bd;

  /* Neutrals */
  --bg: #ffffff;
  --bg-soft: #f6f8fb;
  --surface: #ffffff;
  --surface-alt: #f1f4f8;
  --border: #e3e8ef;
  --border-strong: #cdd5df;

  --text: #0f1c2e;
  --text-muted: #475569;
  --text-faint: #5a6a7f;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow: 0 6px 18px -6px rgba(16, 24, 40, 0.12), 0 2px 6px rgba(16, 24, 40, 0.05);
  --shadow-lg: 0 20px 44px -16px rgba(16, 24, 40, 0.2);

  /* Read by the facilities page when it scrolls a card under the sticky bar. */
  --header-h: 68px;

  --font-display: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
/* The hidden attribute is only display:none in the UA sheet, so any explicit
   display below would otherwise win and reveal the element. */
[hidden] { display: none !important; }
/* The scrollbar's room is kept on every page, so the content does not shift
   sideways between pages that scroll and pages that do not. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

/* Flex column so the footer stays at the bottom on pages too short to fill
   the window. */
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
main { flex: 1 0 auto; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
  color: var(--text);
  letter-spacing: -0.02em;
}
p { margin: 0; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--brand-100); color: var(--navy-900); }

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}
section { padding: 88px 0; }

@media (max-width: 720px) {
  section { padding: 56px 0; }
  .container { padding: 0 16px; }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  padding: 12px 18px;
  border-radius: 0 0 10px 0;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

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

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.site-header > .container {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 18px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--navy-900);
  flex-shrink: 0;
}
.brand svg { width: 34px; height: 34px; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.06rem;
  letter-spacing: 0.16em;
}

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
}
.nav-toggle:hover { background: var(--surface-alt); }
.nav-toggle svg { width: 22px; height: 22px; }

.nav-panel {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.nav-panel nav { min-width: 0; }

/* The primary menu: four sections, each opening a panel of its pages. A mouse
   opens them on hover; a click, a tap or the keyboard opens them otherwise.
   The behaviour lives in assets/nav.js. */
.nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-item { position: relative; }
.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-muted);
  background: none;
  border: none;
  padding: 6px 10px 6px 6px;
  border-radius: 10px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.nav-trigger:hover,
.nav-item.is-open > .nav-trigger { background: var(--surface-alt); color: var(--text); }
/* The section holding the page you are on. */
.nav-trigger.is-current { color: var(--brand); background: var(--brand-50); font-weight: 600; }
.nav-item.is-open > .nav-trigger.is-current { background: var(--brand-100); }

/* A small tile like the ones beside each page in the panels. */
.nav-trigger-icon {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-trigger-icon svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.nav-trigger-icon.ac { color: var(--amber-ink); background: var(--amber-50); border-color: var(--amber-200); }
.nav-trigger-icon.rfic { color: var(--violet-ink); background: var(--violet-50); border-color: var(--violet-200); }
.nav-trigger-icon.wdc { color: var(--blue-ink); background: var(--blue-50); border-color: var(--blue-200); }
.nav-trigger-icon.grants { color: var(--brand); background: var(--brand-50); border-color: var(--brand-100); }

.nav-chevron {
  flex-shrink: 0;
  width: 15px; height: 15px;
  margin-left: -3px;
  fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.6;
  transition: transform 0.2s ease;
}
.nav-item.is-open .nav-chevron { transform: rotate(180deg); }

.nav-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  z-index: 10;
  /* As wide as its longest page name, so none of them wraps. */
  width: max-content;
  min-width: 22rem;
  max-width: calc(100vw - 32px);
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 24px 48px -18px rgba(16, 24, 40, 0.24), 0 6px 16px -8px rgba(16, 24, 40, 0.1);
  opacity: 0;
  visibility: hidden;
  /* A panel on its way out must not catch the pointer, or it can snatch the
     hover back from the section the pointer has just moved to. */
  pointer-events: none;
  transform: translate(-50%, -6px);
  transition: opacity 0.16s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.22s;
}
/* Spans the gap between an open section's trigger and its panel, so the
   pointer can cross it without leaving the section. It is exactly as wide as
   the trigger: one as wide as the panel would reach under the neighbouring
   triggers, and a pointer resting there would be handed back and forth
   between the two sections as their panels slid in and out. */
.nav-item.is-open::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 14px;
}
.nav-item.is-open > .nav-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition: opacity 0.16s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
}
/* The last section sits by the right edge, so its panel opens leftwards. */
.nav-item:last-child > .nav-menu { left: auto; right: 0; transform: translateY(-6px); }
.nav-item:last-child.is-open > .nav-menu { transform: none; }

.nav-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.nav-menu a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  transition: background 0.15s;
}
.nav-menu a:hover,
.nav-menu a:focus-visible { background: var(--bg-soft); }
.nav-menu a:focus-visible { outline-offset: -2px; border-radius: 10px; }
.nav-menu a[aria-current] { background: var(--brand-50); }
.nav-menu a[aria-current] .nav-title { color: var(--brand); }

/* Each page's icon wears the ink of the Core it belongs to. */
.nav-icon {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 11px;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}
.nav-icon svg {
  width: 21px; height: 21px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.nav-icon.ac { color: var(--amber-ink); background: var(--amber-50); border-color: var(--amber-200); }
.nav-icon.rfic { color: var(--violet-ink); background: var(--violet-50); border-color: var(--violet-200); }
.nav-icon.wdc { color: var(--blue-ink); background: var(--blue-50); border-color: var(--blue-200); }
.nav-menu a:hover .nav-icon { transform: scale(1.05); }

.nav-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.nav-title { font-size: 1rem; font-weight: 600; line-height: 1.35; }
.nav-desc { font-size: 0.875rem; color: var(--text-muted); line-height: 1.4; }

.nav-go {
  flex-shrink: 0;
  width: 16px; height: 16px;
  fill: none; stroke: var(--text-faint);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.15s, transform 0.2s ease;
}
.nav-menu a:hover .nav-go,
.nav-menu a:focus-visible .nav-go { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .nav-menu, .nav-item.is-open > .nav-menu, .nav-chevron, .nav-icon, .nav-go { transition: none; }
}

.btn-signin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  background: var(--brand);
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  transition: background 0.15s;
}
.btn-signin:hover { background: var(--brand-hover); }
.btn-signin svg { width: 17px; height: 17px; }

.profile-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.profile-icon:hover { background: var(--brand-50); border-color: var(--brand); }
.profile-icon.active { border-color: var(--brand); color: var(--brand); }
.profile-icon svg {
  width: 21px; height: 21px;
  fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round;
}

@media (max-width: 1040px) {
  .nav-toggle { display: flex; }
  .site-header > .container { position: relative; }
  .nav-panel {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 12px 24px 20px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
  }
  .nav-panel.is-open { display: flex; }
  /* A long menu on a short screen scrolls inside the panel, because the
     header is sticky and the page behind it would scroll instead. */
  .nav-panel { max-height: calc(100vh - var(--header-h)); overflow-y: auto; }

  /* The sections become an accordion; hover plays no part. */
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-trigger { width: 100%; padding: 8px 12px 8px 8px; font-size: 1.0625rem; }
  .nav-chevron { margin-left: auto; }
  .nav-menu,
  .nav-item:last-child > .nav-menu {
    position: static;
    display: none;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 4px 0 10px;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .nav-item.is-open::after { display: none; }
  .nav-item.is-open > .nav-menu,
  .nav-item:last-child.is-open > .nav-menu { display: block; transform: none; }
  .nav-menu a { padding: 9px 12px; gap: 12px; }
  .nav-icon { width: 34px; height: 34px; border-radius: 9px; }
  .nav-go { display: none; }

  .btn-signin { justify-content: center; padding: 11px 16px; }
}

/* ==========================================================================
   Page headings. Every page opens with its title and introduction set
   straight on the page; no banner, no backdrop.
   ========================================================================== */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px 5px 10px;
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.core-ac .eyebrow { color: var(--amber-ink); background: var(--amber-50); border-color: var(--amber-200); }
.core-rfic .eyebrow { color: var(--violet-ink); background: var(--violet-50); border-color: var(--violet-200); }
.core-wdc .eyebrow { color: var(--blue-ink); background: var(--blue-50); border-color: var(--blue-200); }

.lead {
  margin-top: 20px;
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 66ch;
}
.lead + .lead { margin-top: 12px; }
.lead a,
.about a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: rgba(31, 94, 168, 0.35);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s;
}
.lead a:hover,
.about a:hover { text-decoration-color: currentColor; }

/* ---------- Interior pages ---------- */

/* Every page opens the same way: its introduction starts at the same height
   and edge, and whatever the page offers follows in a section below a rule. */
.page-head { padding: 72px 0 64px; }
.page-head + section {
  padding-top: 56px;
  border-top: 1px solid var(--border);
}
@media (max-width: 720px) {
  .page-head { padding: 44px 0 40px; }
  .page-head + section { padding-top: 36px; }
}

.page-text { max-width: 780px; }
.page-text h1 { font-size: clamp(2rem, 4.4vw, 3rem); letter-spacing: -0.025em; }

/* The introduction on the left, the page's illustration on the right. The
   text is pinned to the top, so the heading sits at the same height on every
   page however long the introduction runs; the illustration centres on it. */
.page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 56px;
  align-items: start;
}
.page-grid .page-text { max-width: 600px; }
.page-visual { display: flex; justify-content: center; align-self: center; }
.page-visual .illus { width: 100%; max-width: 460px; height: auto; }
@media (max-width: 960px) {
  .page-grid { grid-template-columns: 1fr; gap: 28px; }
  .page-grid .page-text { max-width: 680px; }
  .page-visual .illus { max-width: 320px; }
}

/* The illustrations move a little: data flowing, lights blinking, gears
   turning, bubbles rising. */
.illus .flow { animation: dash 2.4s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -28; } }
.illus .led { animation: blink 2s ease-in-out infinite; }
.illus .led.d2 { animation-delay: 0.7s; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.illus .spin { animation: spin 26s linear infinite; transform-origin: 175px 200px; }
.illus .spin-rev { animation: spin 20s linear infinite reverse; transform-origin: 300px 118px; }
@keyframes spin { to { transform: rotate(360deg); } }
.illus .bubble { animation: rise 3.4s ease-in-out infinite; }
.illus .bubble.b1 { animation-delay: 0.6s; }
.illus .bubble.b2 { animation-delay: 1.2s; }
.illus .bubble.b3 { animation-delay: 1.9s; }
@keyframes rise {
  0% { transform: translateY(6px); opacity: 0; }
  35% { opacity: 0.85; }
  100% { transform: translateY(-34px); opacity: 0; }
}

/* Sign-in: the introduction and the form side by side. */
.page-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.page-split .page-text { max-width: 520px; }
@media (max-width: 960px) {
  .page-split { grid-template-columns: 1fr; gap: 32px; }
}

/* What a programme offers, as chips sized to their own labels, so a long one
   ("Summer research development stipends") stays on one line. */
.facts {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.facts li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 16px 6px 6px;
  box-shadow: var(--shadow-xs);
}
.facts svg {
  width: 30px;
  height: 30px;
  padding: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  color: var(--brand);
  background: var(--brand-50);
}
.core-ac .facts svg { color: var(--amber-ink); background: var(--amber-50); }
.core-rfic .facts svg { color: var(--violet-ink); background: var(--violet-50); }
.core-wdc .facts svg { color: var(--blue-ink); background: var(--blue-50); }

.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 36px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  background: var(--brand);
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: background 0.15s, box-shadow 0.15s;
}
.btn-cta:hover { background: var(--brand-hover); box-shadow: var(--shadow); }
.btn-cta svg { width: 18px; height: 18px; transition: transform 0.15s; }
.btn-cta:hover svg { transform: translateX(2px); }

/* ---------- Panels ----------
   What a page offers, side by side: the services on the cyberinfrastructure
   page, the programs on the funding page. They speak the same language as
   the Core cards on the home page (a rule in the Core's colour along the top,
   its tinted icon) and keep their action at the foot, so a row lines up. */

.panels { display: grid; gap: 24px; }
.panels.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panels.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .panels.three { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .panels.two { grid-template-columns: 1fr; } }

.panel {
  --core: var(--brand);
  --core-ink: var(--brand);
  --core-tint: var(--brand-50);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  box-shadow: inset 0 3px 0 var(--core), var(--shadow-xs);
}
/* Three to a row leaves less room inside each, so the button label still fits on a line. */
.panels.three .panel { padding: 30px 28px; }
@media (max-width: 640px) { .panel, .panels.three .panel { padding: 26px 20px 22px; } }
.panel.ac, .service.ac { --core: var(--amber); --core-ink: var(--amber-ink); --core-tint: var(--amber-50); }
.panel.rfic, .service.rfic { --core: var(--violet); --core-ink: var(--violet-ink); --core-tint: var(--violet-50); }
.panel.wdc, .service.wdc { --core: var(--blue); --core-ink: var(--blue-ink); --core-tint: var(--blue-50); }

.panel-icon {
  width: 50px; height: 50px;
  flex-shrink: 0;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--core-ink);
  background: var(--core-tint);
}
.panel-icon svg {
  width: 25px; height: 25px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.panel-kicker {
  margin-top: 22px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--core-ink);
}
.panel h3 { margin-top: 6px; font-size: 1.45rem; letter-spacing: -0.02em; }
.panel-icon + h3 { margin-top: 22px; }
.panel-text { margin-top: 12px; color: var(--text-muted); font-size: 0.98rem; }
.panel-list {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.panel-list li {
  position: relative;
  padding-left: 30px;
  font-size: 0.95rem;
  color: var(--text);
}
/* A tick in the Core's colour. */
.panel-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--core-tint);
}
.panel-list li::after {
  content: "";
  position: absolute;
  left: 7px; top: 6px;
  width: 5px; height: 9px;
  border-right: 2px solid var(--core-ink);
  border-bottom: 2px solid var(--core-ink);
  transform: rotate(45deg);
}
.panel-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--link);
  text-decoration: none;
}
.panel-link svg { width: 15px; height: 15px; transition: transform 0.15s; }
.panel-link:hover { color: var(--brand-hover); text-decoration: underline; text-underline-offset: 3px; }
.panel-link:hover svg { transform: translateX(2px); }
.panel-foot {
  margin-top: auto;
  padding-top: 28px;
}

/* Support requests: a sign-in link for visitors, the form itself for anyone
   signed in. Which one shows comes from html[data-auth] (see "Chrome that
   depends on a session"), so neither flashes in on load.
   Doubled up to outrank .btn-primary, which comes later in this file. */
.btn-primary.btn-request { width: 100%; padding: 13px 12px; font-size: 0.95rem; }
.request-form { display: none; }
.request-form .field { margin-bottom: 12px; text-align: left; }
.request-form textarea { min-height: 110px; }
html[data-auth="in"] .request-form,
html[data-auth="renewing"] .request-form { display: block; }
html[data-auth="in"] .request-signin,
html[data-auth="renewing"] .request-signin { display: none !important; }
html .request-form.is-sent { display: none; }
.btn-request svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.request-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 12px;
  font-size: 0.875rem;
  color: var(--text-muted);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 13px;
}
.request-note svg {
  flex-shrink: 0;
  width: 17px; height: 17px;
  margin-top: 1px;
  fill: none; stroke: var(--brand);
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.request-note strong { color: var(--text); font-weight: 600; }
.panel-foot > .request-note { margin-top: 0; font-size: 0.95rem; }

/* Two actions stacked at the foot of a panel: the main one first, full
   width, with the quieter one beneath it. */
.panel-actions { display: flex; flex-direction: column; gap: 10px; }
.panel-actions .btn-primary, .panel-actions .btn-outline { width: 100%; padding: 13px 12px; font-size: 0.95rem; }
.panel-actions svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.panel-foot > .panel-actions ~ .request-note { margin-top: 12px; }
.panel-foot > .request-note ~ .panel-actions { margin-top: 12px; }
.panel-foot > .request-status:not(:empty) { margin-top: 12px; }

/* ---------- Services: what a team does, in a grid of small cards ---------- */

.services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 980px) { .services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .services { grid-template-columns: 1fr; } }
.service {
  --core: var(--brand);
  --core-ink: var(--brand);
  --core-tint: var(--brand-50);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: var(--shadow-xs);
}
.service .panel-icon { width: 44px; height: 44px; border-radius: 12px; }
.service .panel-icon svg { width: 22px; height: 22px; }
.service h3 { margin-top: 18px; font-size: 1.1rem; letter-spacing: -0.01em; }
.service p { margin-top: 8px; font-size: 0.93rem; color: var(--text-muted); }

/* ---------- A closing call to action across the content width ---------- */

.cta-band {
  margin-bottom: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: 32px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  box-shadow: inset 0 3px 0 var(--core, var(--brand)), var(--shadow-xs);
}
.cta-band.ac { --core: var(--amber); }
.cta-band h3 { font-size: 1.35rem; letter-spacing: -0.02em; }
.cta-band p { margin-top: 8px; color: var(--text-muted); font-size: 0.98rem; max-width: 60ch; }
@media (max-width: 860px) { .cta-band { grid-template-columns: 1fr; gap: 20px; } }
@media (max-width: 640px) { .cta-band { padding: 26px 20px 22px; } }

/* ---------- Home ---------- */

.home-intro { padding: 72px 0 80px; }
@media (max-width: 720px) { .home-intro { padding: 56px 0 48px; } }

.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
@media (max-width: 960px) {
  .intro-grid { grid-template-columns: 1fr; gap: 36px; }
}
.intro-text { max-width: 640px; }
.home-intro h1 {
  font-size: clamp(2rem, 3.35vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin-bottom: 36px;
}
/* One line across the page wherever it fits; wraps naturally on narrow screens. */
@media (min-width: 1000px) { .home-intro h1 { white-space: nowrap; } }
.home-intro h1 .accent {
  background: linear-gradient(100deg, var(--amber-ink) 0%, var(--violet-ink) 52%, var(--blue-ink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.home-intro .lead { font-size: 1.2rem; max-width: 60ch; }

.about {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 76ch;
}
.about strong { color: var(--text); font-weight: 600; }
.about.team { margin-top: 12px; padding-top: 0; border-top: 0; }
.about .label { color: var(--text); font-weight: 600; }

/* The constellation: Oklahoma's universities and colleges as stars inside a
   dotted ring, under an arch of three stars for Research, Innovation, and
   Opportunity. Thin crisp lines; navy, amber, violet and blue. */
.constellation-wrap { margin: 0; }
.okc { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; overflow: visible; }
.okc-disc { fill: url(#okc-disc); }
.okc-land { fill: #f7f9fc; stroke: #8496ad; stroke-width: 1.6; stroke-linejoin: round; }
.okc-sky use { opacity: .85; animation: okcTwinkle 6s ease-in-out infinite; animation-delay: var(--t, 0s); }
.okc-big { opacity: 0; animation: okcIn .9s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: var(--d, 0s); }
.okc-bglow { transform-box: fill-box; transform-origin: center; animation: okcBreathe 7s ease-in-out infinite; animation-delay: var(--d, 0s); }
.okc-lines line { stroke: #9fb0c4; stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: 3 3.5; opacity: 0; animation: okcIn .8s ease-out forwards; animation-delay: var(--d, 0s); }
.okc-star { opacity: 0; animation: okcIn .7s ease-out forwards; animation-delay: var(--d, 0s); }
.okc-star > use { animation: okcTwinkle 5.2s ease-in-out infinite; animation-delay: calc(var(--d, 0s) + var(--t, 0s) + .7s); }
.okc-glow { transform-box: fill-box; transform-origin: center; animation: okcBreathe 6s ease-in-out infinite; animation-delay: calc(var(--d, 0s) + var(--t, 0s)); }
.nsf-tag {
  width: fit-content;
  margin: -34px auto 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 26px 9px 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: .005em;
  word-spacing: .12em;
  color: var(--navy-800);
}
.nsf-tag img { width: 42px; height: 42px; flex-shrink: 0; }
@keyframes okcIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes okcTwinkle { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
@keyframes okcBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@media (max-width: 720px) {
  .nsf-tag { margin-top: -22px; font-size: .98rem; gap: 11px; padding: 7px 20px 7px 9px; }
  .nsf-tag img { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .okc-big, .okc-star, .okc-star > use, .okc-glow, .okc-bglow, .okc-sky use, .okc-lines line { animation: none !important; }
  .okc-big, .okc-star, .okc-lines line { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .illus .flow, .illus .led, .illus .spin, .illus .spin-rev,
  .illus .bubble { animation: none !important; }
}

/* ==========================================================================
   Sections and cores
   ========================================================================== */

.section { position: relative; }
.section.soft {
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.section-head { max-width: 720px; margin-bottom: 44px; }
.section-head h1,
.section-head h2 { font-size: clamp(1.6rem, 3.2vw, 2.25rem); letter-spacing: -0.025em; }
/* A page that opens straight on its content starts where every other page's
   introduction does. */
main > section:first-child:not(.page-head):not(.home-intro) { padding-top: 72px; }
@media (max-width: 720px) { main > section:first-child:not(.page-head):not(.home-intro) { padding-top: 44px; } }
.section-head p,
.section-head .sub { margin-top: 14px; color: var(--text-muted); font-size: 1.05rem; }

.cores {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 940px) { .cores { grid-template-columns: 1fr; } }

.core {
  --core: var(--border-strong);
  --core-ink: var(--text);
  --core-tint: var(--surface-alt);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 30px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* The top rule is an inset shadow so it follows the rounded corners. */
  box-shadow: inset 0 3px 0 var(--core), var(--shadow-xs);
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}
.core:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: inset 0 3px 0 var(--core), var(--shadow);
}
.core.ac { --core: var(--amber); --core-ink: var(--amber-ink); --core-tint: var(--amber-50); }
.core.rfic { --core: var(--violet); --core-ink: var(--violet-ink); --core-tint: var(--violet-50); }
.core.wdc { --core: var(--blue); --core-ink: var(--blue-ink); --core-tint: var(--blue-50); }

.core-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--core-ink);
  background: var(--core-tint);
}
.core-icon svg { width: 23px; height: 23px; }

.core h3 { font-size: 1.2rem; }
.core .summary { color: var(--text-muted); font-size: 1.05rem; }
.core ul {
  margin: 0; padding: 0;
  list-style: none;
  display: flex; flex-direction: column; gap: 10px;
}
.core ul li {
  font-size: 1rem;
  color: var(--text-muted);
  padding-left: 18px;
  position: relative;
}
.core ul li::before {
  content: "";
  position: absolute; left: 0; top: 10px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--core);
}

.core ul li a {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s;
}
.core ul li a:hover { color: var(--core-ink); text-decoration: underline; }

.system-line {
  margin: 48px auto 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.2vw, 1.28rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 62ch;
}
.system-line span { color: var(--text); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  padding: 32px 0;
  font-size: 0.875rem;
  color: var(--text-faint);
}
.site-footer > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.site-footer .brand svg { width: 30px; height: 30px; }
.site-footer .brand-name { font-size: 0.98rem; }
.footer-nsf { display: inline-flex; border-radius: 50%; }
.footer-nsf img { width: 48px; height: 48px; display: block; }
.footer-nsf:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }

.totop {
  position: fixed;
  right: 20px; bottom: 20px;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--brand);
  font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, background 0.15s;
  z-index: 90;
}
.totop:hover { background: var(--brand-50); }
.totop.show { opacity: 1; pointer-events: auto; }

/* ==========================================================================
   Application pages — sign-in, proposals, events, profile.
   ========================================================================== */

/* The profile is a single form, so it sits in one centred column rather than
   hugging the left edge of a wide container; full-width inputs on a wide
   screen are hard to scan anyway. The signed-in strip above lines up with it. */
.wrap { max-width: 908px; margin: 0 auto; padding: 48px 24px 88px; }
.wrap > h1 { font-size: clamp(1.8rem, 3.6vw, 2.4rem); letter-spacing: -0.025em; }
@media (max-width: 720px) { .wrap { padding: 32px 16px 64px; } }

/* Until the saved profile arrives, the form would show empty and then fill
   in, and the events card would push it down. Holding both back for that
   moment draws the page once, filled in. The space stays reserved, so
   nothing below moves when they appear. */
.wrap.is-loading #profile-form,
.wrap.is-loading #my-events-card { visibility: hidden; }

.lede {
  margin-top: 12px;
  margin-bottom: 28px;
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 64ch;
}

/* Small labels above a heading. Pills, to match the page eyebrows. */
.kicker,
.su-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: 999px;
  padding: 5px 12px 5px 10px;
  margin-bottom: 16px;
}
.kicker::before,
.su-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------- Cards ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 30px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-xs);
}
@media (max-width: 640px) { .card { padding: 22px 18px; } }
.card > h2, .card > h3 { font-size: 1.2rem; }
.card-sub {
  margin-top: 6px;
  margin-bottom: 20px;
  font-size: 0.93rem;
  color: var(--text-muted);
}

/* ---------- Fields ---------- */

.fields { display: block; }
.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 18px;
}
.field.wide, .field.full { grid-column: 1 / -1; }
.field label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}
.field .req { color: var(--danger); }
.field .hint, .hint {
  font-size: 0.83rem;
  color: var(--text-faint);
}
.hint a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hint a:hover { color: var(--brand-hover); }

.field input,
.field select,
.field textarea,
.code-input {
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  width: 100%;
  box-shadow: var(--shadow-xs);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: #8a97a8; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: #b4c0ce; }
.field input:focus,
.field select:focus,
.field textarea:focus,
.code-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-ring);
}
.field input[type="file"] { padding: 8px; cursor: pointer; background: var(--bg-soft); }
.field input[type="file"]::file-selector-button {
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 7px 13px;
  margin-right: 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.field input[type="file"]::file-selector-button:hover { background: var(--surface-alt); }
.field-error {
  font-size: 0.83rem;
  color: var(--danger);
}

.code-input {
  max-width: 220px;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-align: center;
  padding: 12px 10px;
}

.form-row, .fields.wide {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 18px;
}
@media (max-width: 640px) { .form-row, .fields.wide { grid-template-columns: 1fr; } }

/* Radio groups, drawn as pickable tiles */
.radio-row, .role-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.radio-opt, .role-opt {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s, box-shadow 0.15s;
}
.radio-opt:hover, .role-opt:hover { border-color: #b4c0ce; color: var(--text); }
.radio-opt input, .role-opt input {
  width: 15px; height: 15px;
  accent-color: var(--brand);
  margin: 0;
}
.radio-opt:has(input:checked), .role-opt:has(input:checked) {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-50);
  box-shadow: 0 0 0 1px var(--brand) inset;
}

/* A student's start and expected graduation: each a month and a year. */
.study-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 18px;
}
.study-when { display: flex; flex-direction: column; gap: 7px; }
.month-year {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 8px;
}
@media (max-width: 640px) { .study-grid { grid-template-columns: 1fr; } }

.checkline {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 18px;
}
.checkline input { width: 16px; height: 16px; accent-color: var(--brand); }

/* ---------- Buttons ---------- */

.submit-btn, .btn, .btn-primary {
  font-family: inherit;
  font-size: 0.94rem;
  font-weight: 600;
  color: #fff;
  background: var(--brand);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 11px 22px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: var(--shadow-xs);
  transition: background 0.15s, opacity 0.15s, box-shadow 0.15s;
}
.submit-btn:hover:not(:disabled),
.btn:hover:not(:disabled),
.btn-primary:hover:not(:disabled) { background: var(--brand-hover); box-shadow: var(--shadow-sm); }
.submit-btn:disabled, .btn:disabled, .btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-primary svg { width: 18px; height: 18px; }

.btn-small { font-size: 0.85rem; padding: 8px 16px; }

/* A quieter sibling of .btn-primary for the second action in a pair. */
.btn-outline {
  font-family: inherit;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--brand);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 11px 22px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: var(--shadow-xs);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.btn-outline:hover { background: var(--brand-50); border-color: var(--brand); box-shadow: var(--shadow-sm); }
.btn-outline svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.btn-link, .linklike {
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--link);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.btn-link:hover, .linklike:hover { color: var(--brand-hover); }

/* ---------- Status messages ---------- */

.form-status, .status {
  margin-top: 18px;
  font-size: 0.9rem;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  display: none;
}
.form-status.show, .form-status.working, .form-status.success, .form-status.error,
.status.show, .status.working, .status.success, .status.error { display: block; }
.form-status.working, .status.working {
  background: var(--surface-alt);
  color: var(--text-muted);
  border-color: var(--border);
}
.form-status.success, .status.success {
  background: var(--success-bg);
  color: var(--success);
  border-color: var(--success-border);
}
.form-status.error, .status.error {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: var(--danger-border);
}

/* ---------- Signed-in strip ---------- */

.authbar {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
}
.authbar-inner {
  max-width: 908px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
@media (max-width: 720px) { .authbar-inner { padding: 10px 16px; } }
.auth-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 18px;
  margin-bottom: 22px;
  font-size: 0.9rem;
}
.auth-who, .who { color: var(--text-muted); }
.auth-who strong, .who strong { color: var(--text); font-weight: 600; }
.auth-signout, .signout {
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--link);
  background: none;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-signout:hover, .signout:hover { color: var(--brand-hover); }

.auth-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  max-width: 640px;
  box-shadow: var(--shadow);
}
@media (max-width: 640px) { .auth-panel { padding: 24px 18px; } }
.auth-panel h3 { font-size: 1.2rem; }
.auth-panel p { margin-top: 10px; color: var(--text-muted); font-size: 0.94rem; }
.auth-panel .submit-btn { margin-top: 20px; }
.auth-panel .hint { margin-top: 14px; }
.auth-panel:not(:last-child) { margin-bottom: 28px; }
/* On the events and recordings pages the prompt spans the content width,
   like the list below it. */
#events .auth-panel,
#recordings .auth-panel { max-width: none; }

/* The proposal page is one column of forms: centre it, and let the panels
   fill it so their edges line up. */
#submit > .container { max-width: 736px; }
#submit .auth-panel { max-width: none; }
.page-aside .auth-panel { max-width: 500px; margin-left: auto; }
@media (max-width: 960px) { .page-aside .auth-panel { margin-left: 0; } }

.email-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: -8px;
  margin-bottom: 18px;
}
.email-change { font-size: 0.85rem; color: var(--text-faint); }
.email-change .status { margin-top: 0; }

/* The CV picked on the sign-up form */
.cv-picked {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  font-size: 0.87rem;
  color: var(--text-muted);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 6px 6px 16px;
}
.cv-remove {
  font-family: inherit;
  font-size: 0.83rem;
  font-weight: 600;
  line-height: 1;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 999px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.cv-remove:hover { color: var(--danger); border-color: var(--danger-border); background: var(--danger-bg); }

/* ---------- Proposal form and the organiser's review panel ---------- */

.proposal-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  max-width: 820px;
  box-shadow: var(--shadow-sm);
}
@media (max-width: 640px) { .proposal-form { padding: 24px 18px; } }

/* ---------- Facility voucher application ---------- */

/* Opens like the call for applications it follows from. */
.va-head { background: linear-gradient(180deg, var(--violet-50) 0%, rgba(244, 240, 252, 0) 100%); }
.va-head .kicker { color: var(--violet-ink); background: #fff; border-color: var(--violet-200); }
.va-crumbs { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 26px; font-size: 0.875rem; color: var(--text-faint); }
.va-crumbs a { color: var(--link); text-decoration: none; font-weight: 500; }
.va-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }

.va-body > .container { max-width: 868px; }
.va-body .auth-panel, .va-form { max-width: none; }
.va-loading { color: var(--text-muted); }
.va-loading.is-error { color: var(--danger); }

.va-form .fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.va-form .fields > .section, .va-form .fields > .wide { grid-column: 1 / -1; }
@media (max-width: 640px) { .va-form .fields { grid-template-columns: minmax(0, 1fr); } }
.va-form .va-intro { margin: -4px 0 16px; }
.va-form .foot .hint { flex: 1 1 260px; }

/* One card per team member, numbered, each with its own way out. */
.va-team { display: flex; flex-direction: column; gap: 14px; }
.va-team:not(:empty) { margin-bottom: 14px; }
.va-member {
  position: relative;
  min-width: 0;
  margin: 0;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px 0;
}
.va-member legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 14px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text);
}
/* The legend is floated to sit inside the card; the fields start below it. */
.va-member-grid { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
@media (max-width: 640px) { .va-member-grid { grid-template-columns: minmax(0, 1fr); } }
.va-remove {
  position: absolute;
  top: 11px;
  right: 12px;
  font-family: inherit;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.va-remove:hover { color: var(--danger); border-color: var(--danger-border); background: var(--danger-bg); }
.va-team-empty { margin-bottom: 14px; font-size: 0.9rem; color: var(--text-faint); }
.va-form .btn-outline.btn-small { padding: 8px 16px; margin-bottom: 18px; }

/* Dollars, with the sign drawn inside the box. */
.va-money { position: relative; }
.va-money span {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
.va-money input { padding-left: 28px; }

.va-done:focus { outline: none; }
.va-done-actions { margin-top: 22px; }

.admin-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px;
  margin-bottom: 26px;
  box-shadow: var(--shadow-xs);
}
@media (max-width: 640px) { .admin-panel { padding: 20px 16px; } }
.admin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.admin-head h3 { font-size: 1.15rem; }
.admin-refresh {
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 7px 14px;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: background 0.15s;
}
.admin-refresh:hover:not(:disabled) { background: var(--surface-alt); }
.admin-refresh:disabled { opacity: 0.5; cursor: not-allowed; }
.admin-empty { color: var(--text-muted); font-size: 0.92rem; }

.sub-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 12px;
  background: var(--bg-soft);
}
.sub-title { font-weight: 600; font-size: 1rem; }
.sub-meta { font-size: 0.85rem; color: var(--text-muted); margin-top: 5px; }
.sub-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 10px;
  white-space: pre-wrap;
}
.sub-actions { margin-top: 12px; }
.sub-download {
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--link);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sub-download:hover { color: var(--brand-hover); }

.badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
  border: 1px solid transparent;
}
.badge.verified { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.badge.unverified { background: var(--amber-50); color: var(--amber-ink); border-color: var(--amber-200); }

/* ==========================================================================
   Events
   ========================================================================== */

.events-group { margin-bottom: 56px; }
.events-group:last-child { margin-bottom: 0; }
.events-group > h3 { font-size: 1.35rem; margin-bottom: 6px; }
.group-sub { color: var(--text-muted); font-size: 0.93rem; margin-bottom: 22px; }

.event-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.event-card {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow 0.2s, border-color 0.2s;
}
.event-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
@media (max-width: 640px) {
  .event-card { grid-template-columns: 1fr; gap: 14px; padding: 20px 17px; }
}
.event-card.is-past { background: var(--bg-soft); box-shadow: none; }
.event-card.is-past h4,
.event-card.is-past .event-date .day { color: var(--text-muted); }
.event-card.draft { border-style: dashed; border-color: var(--amber); background: #fffdf8; }

/* The date, drawn as a small calendar leaf. */
.event-date {
  text-align: center;
  align-self: start;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
  padding-bottom: 8px;
}
.event-date .mon {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--brand);
  padding: 4px 0;
}
.event-date .day {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.15;
  margin-top: 4px;
  color: var(--text);
}
.event-date .yr { font-size: 0.75rem; color: var(--text-faint); }
.event-card.is-past .event-date .mon { background: var(--text-faint); }
@media (max-width: 640px) {
  .event-date {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: fit-content;
    padding: 0 12px 0 0;
  }
  .event-date .mon { align-self: stretch; display: flex; align-items: center; padding: 4px 10px; }
  .event-date .day { font-size: 1.3rem; margin-top: 0; }
}

.event-card h4 { font-size: 1.15rem; }
/* The card spans the content width; its running text keeps a readable measure. */
.event-subtitle, .event-desc, .event-block, .event-contact { max-width: 75ch; }
.event-subtitle { margin-top: 4px; font-size: 0.95rem; color: var(--text-muted); }
.event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 10px;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.event-meta span { display: inline-flex; align-items: center; gap: 6px; }
.event-meta svg {
  width: 15px; height: 15px;
  fill: none; stroke: var(--text-faint);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.event-desc {
  margin-top: 12px;
  font-size: 0.92rem;
  color: var(--text-muted);
  white-space: pre-wrap;
}
.event-speaker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--text);
}
.event-speaker svg {
  width: 16px; height: 16px;
  fill: none; stroke: var(--blue-ink);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.event-block { margin-top: 16px; }
.event-block-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 6px;
}
.event-block-text { font-size: 0.9rem; color: var(--text-muted); }
.event-topics {
  margin: 0; padding: 0;
  list-style: none;
  display: flex; flex-direction: column; gap: 6px;
}
.event-topics li {
  font-size: 0.9rem;
  color: var(--text-muted);
  padding-left: 18px;
  position: relative;
}
.event-topics li::before {
  content: "";
  position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue);
}
.event-contact { margin-top: 14px; font-size: 0.84rem; color: var(--text-faint); }

.event-actions {
  margin-top: 18px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.btn-attend {
  display: inline-flex;
  align-items: center;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  background: var(--brand);
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 9px 18px;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: background 0.15s, opacity 0.15s;
}
.btn-attend:hover:not(:disabled) { background: var(--brand-hover); }
.btn-attend:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-cancel {
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.btn-cancel:hover { color: var(--text); }

.attending-tag, .draft-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.attending-tag { color: var(--success); background: var(--success-bg); border-color: var(--success-border); }
.draft-tag { color: var(--amber-ink); background: var(--amber-50); border-color: var(--amber-200); }

.seats-left { font-size: 0.84rem; color: var(--text-faint); }
.seats-left.tight { color: var(--amber-ink); font-weight: 600; }
.seats-left.full { color: var(--danger); font-weight: 600; }

.event-note {
  margin-top: 12px;
  font-size: 0.875rem;
  padding: 9px 13px;
  border-radius: 9px;
  border: 1px solid transparent;
}
.event-note.success { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.event-note.error { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.event-note.working { background: var(--surface-alt); color: var(--text-muted); border-color: var(--border); }

/* The organiser's own controls */
.event-admin {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-strong);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  font-size: 0.84rem;
  color: var(--text-faint);
}
.event-admin button {
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--link);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.event-admin button:hover { color: var(--brand-hover); }
.event-admin button.danger { color: var(--danger); }

.roster {
  margin-top: 10px;
  width: 100%;
  font-size: 0.84rem;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.roster th, .roster td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.roster th { color: var(--text-muted); font-weight: 600; background: var(--bg-soft); }
.roster td { color: var(--text); }
.roster-id { color: var(--text-faint); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; }
.roster-slot { color: var(--text-muted); }

.events-empty {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-soft);
  padding: 32px 26px;
  color: var(--text-muted);
  font-size: 0.95rem;
}
.event-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 18px;
}
@media (max-width: 640px) { .event-form-grid { grid-template-columns: 1fr; } }

/* ---------- Past event recordings ---------- */

.btn-watch { gap: 8px; text-decoration: none; }
.btn-watch svg { width: 15px; height: 15px; fill: currentColor; }

/* An organiser attaches the recording under each past event. */
.recording-form { width: 100%; display: flex; flex-direction: column; gap: 7px; }
.recording-form label { font-size: 0.84rem; font-weight: 600; color: var(--text); }
.recording-row { display: flex; gap: 8px; }
.recording-row input {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  padding: 8px 12px;
  box-shadow: var(--shadow-xs);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.recording-row input::placeholder { color: #8a97a8; }
.recording-row input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-ring);
}
.event-admin .recording-form button {
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  background: var(--brand);
  border: none;
  border-radius: 9px;
  padding: 8px 18px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, opacity 0.15s;
}
.event-admin .recording-form button:hover:not(:disabled) { background: var(--brand-hover); color: #fff; }
.event-admin .recording-form button:disabled { opacity: 0.5; cursor: not-allowed; }

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

/* ---------- The events list on the profile page ---------- */

.events-card h2 { font-size: 1.2rem; }
.events-card .card-sub { margin-bottom: 14px; }
.events-card .ev-group-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 18px 0 6px;
}
.events-card .ev-group-label:first-child { margin-top: 0; }
.ev-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.ev-row:last-child { border-bottom: none; }
.ev-row.past { opacity: 0.65; }
.ev-title { font-weight: 600; font-size: 0.95rem; }
.ev-when { font-size: 0.85rem; color: var(--text-muted); }
.ev-drop {
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0;
}
.ev-drop:hover { color: var(--danger); }
.ev-empty {
  font-size: 0.9rem;
  color: var(--text-muted);
  padding: 6px 0;
}

/* ==========================================================================
   Sign-up, step by step
   ========================================================================== */

.su-wrap { max-width: 960px; margin: 0 auto; padding: 56px 24px 88px; }
@media (max-width: 720px) { .su-wrap { padding: 36px 16px 64px; } }

/* The heading above the form lines up with the form beneath it. */
#step-details { max-width: 560px; margin: 0 auto; }
#step-details > h1 { font-size: clamp(1.7rem, 3.6vw, 2.25rem); letter-spacing: -0.025em; }

.su-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 36px;
  max-width: 560px;
  margin: 0 auto;
  box-shadow: var(--shadow);
}
#step-details > .su-card { margin-top: 24px; }
.su-card.su-wide { max-width: 760px; }

/* The email box with the institution's domain attached to its right. The
   domain steps aside once a whole address is typed. */
.email-combo { display: flex; align-items: stretch; }
.email-combo input { flex: 1; min-width: 0; }
.field .email-domain { display: none; }
.email-combo.has-domain:not(.is-whole) input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.email-combo.has-domain:not(.is-whole):not(.has-choice) .email-fixed,
.email-combo.has-domain.has-choice:not(.is-whole) .email-pick {
  display: flex;
  align-items: center;
  width: auto;
  flex: none;
  max-width: 55%;
  margin-left: -1px;
  padding: 10px 12px;
  font-size: 0.95rem;
  color: var(--text-muted);
  background: var(--bg-soft);
  border: 1px solid var(--border-strong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  box-shadow: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.email-combo.has-domain.has-choice:not(.is-whole) .email-pick { cursor: pointer; color: var(--text); }
@media (max-width: 640px) { .su-card { padding: 26px 20px; } }

.su-card h1 { font-size: clamp(1.5rem, 3.4vw, 2rem); }
.su-card h2 { font-size: 1.3rem; }
.su-sub { margin-top: 12px; color: var(--text-muted); font-size: 1rem; }
.su-fields { margin-top: 4px; }
.su-fields.su-wide {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 18px;
}
@media (max-width: 640px) { .su-fields.su-wide { grid-template-columns: 1fr; } }
.su-foot {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-size: 0.875rem;
  color: var(--text-faint);
  text-align: center;
}
.su-foot .hint { display: block; margin-bottom: 16px; }
.su-foot .submit-btn { width: 100%; }
.su-foot a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.su-foot a:hover { color: var(--brand-hover); }

.su-note {
  margin-top: 20px;
  font-size: 0.875rem;
  color: var(--text-muted);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: 12px;
  padding: 14px 16px;
}
.su-note strong { display: block; color: var(--text); font-weight: 600; margin-bottom: 2px; }

.su-code { text-align: center; }
.su-code h2 { margin-top: 18px; }
.su-code p { margin-top: 12px; color: var(--text-muted); font-size: 0.95rem; }
.su-code .code-input { margin: 22px auto 0; }
.su-code .submit-btn { margin-top: 22px; }
.su-code-icon {
  width: 60px; height: 60px;
  margin: 0 auto;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-50);
  color: var(--brand);
}
.su-code-icon svg {
  width: 28px; height: 28px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.addr { color: var(--text); font-weight: 600; }
.su-resend {
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--link);
  background: none;
  border: none;
  margin-top: 16px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.su-resend:hover { color: var(--brand-hover); }
.su-resend:disabled { opacity: 0.5; cursor: not-allowed; text-decoration: none; }

/* Choosing a password: the four rules tick over as they are met. */
.pw-fields { max-width: 360px; margin: 24px auto 0; text-align: left; }
.pw-rules {
  list-style: none;
  margin: 18px auto 0;
  max-width: 360px;
  padding: 0;
  text-align: left;
}
.pw-rules li {
  font-size: 0.85rem;
  color: var(--text-faint);
  padding-left: 24px;
  position: relative;
  margin-top: 5px;
}
.pw-rules li::before {
  content: "\2022";
  position: absolute;
  left: 7px;
  font-weight: 700;
}
.pw-rules li.met { color: var(--success); }
.pw-rules li.met::before { content: "\2713"; left: 4px; }

/* ---------- Profile form ---------- */

/* Inside a form, ".section" is a sub-heading rather than a band of the page. */
.fields .section {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 0;
  margin-bottom: 14px;
}
.fields > .section:not(:first-child) {
  margin-top: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  grid-column: 1 / -1;
}
.fields .section + .field,
.fields .section + .wide { margin-top: 0; }

.field input[readonly] {
  color: var(--text-muted);
  background: var(--surface-alt);
  box-shadow: none;
  cursor: default;
}
.field input[readonly]:hover { border-color: var(--border-strong); }
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.12);
}

.ev-group-label.past { color: var(--text-faint); }

/* The action row at the bottom of the profile form. */
.foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.foot .hint { margin: 0; }

/* ---------- The CV on the profile page ---------- */

.cv-current {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 12px;
}
.cv-current svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--brand);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cv-meta { display: flex; flex-direction: column; min-width: 0; }
.cv-meta a {
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}
.cv-meta a:hover { color: var(--brand-hover); }
.cv-when { font-size: 0.8rem; color: var(--text-faint); }
.cv-delete {
  margin-left: auto;
  flex-shrink: 0;
  font-family: inherit;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 6px 14px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.cv-delete:hover:not(:disabled) {
  color: var(--danger);
  border-color: var(--danger-border);
  background: var(--danger-bg);
}
.cv-delete:disabled { opacity: 0.5; cursor: not-allowed; }

/* ==========================================================================
   Chrome that depends on a session

   The head sets data-auth from the stored token before the first paint, so
   the header is drawn right the first time instead of showing "Sign In" and
   then swapping it on every navigation. "renewing" is treated as signed in:
   a refresh token is held, so a session is very likely, and guessing right
   almost always beats a guaranteed flicker. The scripts set the final value
   once the session is actually known.
   ========================================================================== */

html[data-auth="in"] .btn-signin,
html[data-auth="renewing"] .btn-signin { display: none !important; }

html[data-auth="in"] .profile-icon[hidden],
html[data-auth="renewing"] .profile-icon[hidden] { display: flex !important; }

/* The whole sign-in panel on the proposal page ships visible, so it flashes
   the hardest of anything on the site. */
html[data-auth="in"] #auth-signedout,
html[data-auth="renewing"] #auth-signedout { display: none !important; }

/* Members-only content is hidden from signed-out visitors, and a sign-in
   prompt (.members-gate) shows in its place. Keyed on "out" so that the
   "renewing" guess shows the content and a member never sees it flash. The
   protected part itself is not in the page at all: the API sends it only
   with a session (backend/src/members/). */
.members-gate { display: none; }
html[data-auth="out"] .members-only { display: none !important; }
html[data-auth="out"] .members-gate:not([hidden]) { display: block; }

/* ==========================================================================
   Proposal assistant (assistant.html)

   A chat that fills the window below the header: conversations on the left,
   the thread and the message box on the right, kept to a column narrow
   enough to read. Signed-out visitors see a sign-in prompt instead; which
   one shows comes from html[data-auth], like the request form.
   ========================================================================== */

/* The page itself never scrolls; the thread and the history do. There is no
   footer, so the chat can take all the room below the header. */
.page-assistant { height: 100vh; height: 100dvh; min-height: 480px; }
.page-assistant main { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.page-assistant .site-footer { display: none; }

.assistant { display: none; }
html[data-auth="in"] .assistant,
html[data-auth="renewing"] .assistant { display: grid; }
html[data-auth="in"] .assistant-signedout,
html[data-auth="renewing"] .assistant-signedout { display: none; }

.assistant-signin { width: calc(100% - 32px); margin: 72px auto; }
.assistant-signin h2 { font-size: 1.2rem; }
@media (max-width: 720px) { .assistant-signin { margin: 40px auto; } }

/* On the proposals page, the assistant card's button opens this page once
   signed in. */
.help-panels { margin-bottom: 56px; }
.help-panels .panel-kicker { font-size: 0.95rem; letter-spacing: 0.08em; }
.assistant-open { display: none; }
html[data-auth="in"] .assistant-open,
html[data-auth="renewing"] .assistant-open { display: inline-flex; }

.assistant {
  --chat-w: 820px;
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  grid-template-columns: 280px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  background: var(--surface);
  overflow: hidden;
}

/* ---------- Conversations ---------- */

.assistant-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 14px 10px 12px;
  background: var(--bg-soft);
  border-right: 1px solid var(--border);
}
.assistant-new {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brand);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.assistant-new:hover { background: var(--brand-50); border-color: var(--brand-100); }
.assistant-new svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.assistant-side-label {
  margin: 18px 8px 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.assistant-threads {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0;
}
.assistant-none { padding: 6px 8px; font-size: 0.85rem; color: var(--text-faint); }
.assistant-thread {
  display: flex;
  align-items: center;
  border-radius: 8px;
  margin-bottom: 2px;
}
.assistant-thread:hover { background: var(--surface-alt); }
.assistant-thread.is-current { background: var(--brand-50); }
.assistant-thread-open {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px;
  font: inherit;
  font-size: 0.87rem;
  text-align: left;
  color: var(--text);
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.assistant-thread.is-current .assistant-thread-open { color: var(--brand); font-weight: 600; }
.assistant-thread-delete {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-right: 2px;
  color: var(--text-faint);
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0;
}
.assistant-thread:hover .assistant-thread-delete,
.assistant-thread-delete:focus-visible,
.assistant-thread.is-current .assistant-thread-delete { opacity: 1; }
.assistant-thread-delete:hover { color: var(--danger); background: var(--danger-bg); }
.assistant-thread-delete svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.assistant-quota {
  margin: 10px 8px 0;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
  color: var(--text-faint);
}

/* ---------- The thread ---------- */

.assistant-main {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.assistant-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
}
.assistant-title {
  font-size: 0.98rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.assistant-history {
  display: none;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 6px 10px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  cursor: pointer;
}
.assistant-history svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.assistant-log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 24px 24px 8px;
}
.assistant-loading { max-width: var(--chat-w); margin: 0 auto; color: var(--text-faint); font-size: 0.9rem; }

.assistant-empty {
  max-width: 560px;
  margin: 10vh auto 0;
  text-align: center;
}
.assistant-empty-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border-radius: 14px;
  color: var(--brand);
  background: var(--brand-50);
}
.assistant-empty-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.assistant-empty h3 { font-size: 1.25rem; }
.assistant-empty p { margin-top: 8px; color: var(--text-muted); font-size: 0.94rem; }
.assistant-suggestions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}
.assistant-suggestions button {
  padding: 12px 14px;
  font: inherit;
  font-size: 0.86rem;
  text-align: left;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.assistant-suggestions button:hover { border-color: var(--brand-100); background: var(--brand-50); }

.msg { display: flex; max-width: var(--chat-w); margin: 0 auto 20px; }
.msg-user { justify-content: flex-end; }
.msg-bubble {
  max-width: min(78%, 620px);
  padding: 10px 14px;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: 14px 14px 4px 14px;
}
.msg-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.95rem; }
.msg-files { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.msg-files:last-child { margin-bottom: 0; }
.msg-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 10px;
  font: inherit;
  font-size: 0.82rem;
  color: var(--brand);
  background: var(--surface);
  border: 1px solid var(--brand-100);
  border-radius: 8px;
  cursor: pointer;
}
.msg-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-file svg, .chip svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.msg-assistant .msg-body { max-width: 100%; min-width: 0; flex: 1 1 auto; }
.msg-note { margin-top: 8px; font-size: 0.84rem; color: var(--text-faint); font-style: italic; }
.msg-note.is-error { color: var(--danger); font-style: normal; }

.typing { display: inline-flex; gap: 4px; padding: 8px 0; }
.typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border-strong);
  animation: typing 1.2s infinite ease-in-out;
}
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%, 80%, 100% { opacity: 0.35; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }

/* Rendered Markdown, in replies and document previews */
.md { font-size: 0.95rem; line-height: 1.65; overflow-wrap: anywhere; }
.md > * + * { margin-top: 0.7em; }
.md h3, .md h4, .md h5, .md h6 { font-size: 1.02rem; margin-top: 1.1em; }
.md h3 { font-size: 1.12rem; }
.md ul, .md ol { margin-bottom: 0; padding-left: 1.4em; }
.md li + li { margin-top: 0.25em; }
.md li.md-nested { margin-left: 1.2em; }
.md code { font-family: Consolas, "SFMono-Regular", Menlo, monospace; font-size: 0.86em; background: var(--surface-alt); border-radius: 4px; padding: 1px 5px; }
.md pre { background: var(--surface-alt); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; overflow-x: auto; }
.md pre code { background: none; padding: 0; }
.md blockquote { margin-left: 0; padding-left: 14px; border-left: 3px solid var(--border-strong); color: var(--text-muted); }
.md hr { border: 0; border-top: 1px solid var(--border); }
.md a { color: var(--link); }
.md-table { overflow-x: auto; }
.md table { border-collapse: collapse; font-size: 0.88rem; }
.md th, .md td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; vertical-align: top; }
.md th { background: var(--bg-soft); }

/* A document the reply wrote, ready to download */
.doc-block { margin: 12px 0; }
.doc-card {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 520px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-xs);
}
/* Word blue, so the file type reads at a glance */
.doc-card-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: #fff;
  background: #2b579a;
}
.doc-card-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.doc-card-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.doc-card-text strong { font-size: 0.93rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-card-text span { font-size: 0.8rem; color: var(--text-faint); }
.doc-card.is-writing .doc-card-icon { background: var(--border-strong); animation: writing 1.4s infinite ease-in-out; }
@keyframes writing { 50% { opacity: 0.55; } }
.doc-card-get { flex: none; }
.doc-card-get svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.doc-preview { max-width: 720px; margin-top: 8px; }
.doc-preview summary { font-size: 0.85rem; font-weight: 600; color: var(--link); cursor: pointer; }
.doc-preview .md {
  margin-top: 8px;
  max-height: 420px;
  overflow-y: auto;
  padding: 16px 20px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .typing i, .doc-card.is-writing .doc-card-icon { animation: none; }
}

/* ---------- The message box ---------- */

/* Under the thread, the same column as the messages. */
.assistant-status, .assistant-composer, .assistant-foot {
  width: 100%;
  max-width: calc(var(--chat-w) + 48px);
  margin: 0 auto;
}
.assistant-status { padding: 0 24px; }
.assistant-status .event-note { margin: 0 0 8px; }
.assistant-composer { padding: 0 24px; }
.assistant-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 6px 6px 6px 10px;
  font-size: 0.84rem;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 9px;
}
.chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; font-weight: 500; }
.chip-meta { color: var(--text-faint); font-size: 0.78rem; white-space: nowrap; }
.chip-uploading .chip-meta { color: var(--brand); }
.chip-error { background: var(--danger-bg); border-color: var(--danger-border); }
.chip-error .chip-meta { color: var(--danger); }
.chip-remove {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 1rem;
  line-height: 1;
  color: var(--text-faint);
  background: none;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}
.chip-remove:hover { color: var(--text); background: var(--surface-alt); }

.assistant-input {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-xs);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.assistant-input:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-ring); }
.assistant-input textarea {
  flex: 1 1 auto;
  min-width: 0;
  max-height: 220px;
  padding: 9px 4px;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text);
  background: none;
  border: 0;
  outline: none;
  resize: none;
}
.assistant-input textarea::placeholder { color: #8a97a8; }
.assistant-icon-btn, .assistant-send {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
.assistant-icon-btn { color: var(--text-muted); background: none; }
.assistant-icon-btn:hover:not(:disabled) { color: var(--brand); background: var(--brand-50); }
.assistant-send { color: #fff; background: var(--brand); }
.assistant-send:hover:not(:disabled) { background: var(--brand-hover); }
.assistant-send:disabled, .assistant-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.assistant-stop { background: var(--navy-800); }
.assistant-icon-btn svg, .assistant-send svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.assistant-stop svg { fill: currentColor; stroke: none; }
.assistant-foot { padding: 8px 24px 14px; font-size: 0.76rem; color: var(--text-faint); text-align: center; }

.assistant-drop {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(238, 244, 251, 0.92);
  pointer-events: none;
}
.assistant-drop > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  font-weight: 600;
  color: var(--brand);
  border: 2px dashed var(--brand);
  border-radius: var(--radius);
}
.assistant-drop svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Small screens: history slides over the thread ---------- */

@media (max-width: 820px) {
  .assistant { grid-template-columns: minmax(0, 1fr); }
  .assistant-history { display: inline-flex; }
  .assistant-side {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 6;
    width: min(290px, 86%);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.2s ease, visibility 0s linear 0.2s;
  }
  .assistant.side-open .assistant-side {
    transform: none;
    visibility: visible;
    box-shadow: var(--shadow-lg);
    transition: transform 0.2s ease;
  }
  .doc-card { flex-wrap: wrap; }
  .doc-card-get { width: 100%; }
  .assistant-thread-delete { opacity: 1; }
  .assistant-log { padding: 18px 16px 8px; }
  .assistant-status, .assistant-composer { padding: 0 12px; }
  .assistant-foot { padding: 8px 12px 12px; }
  .assistant-bar { padding: 10px 12px; }
  .msg-bubble { max-width: 88%; }
  .assistant-suggestions { grid-template-columns: 1fr; }
}