/* ===========================================================================
   Operations Academia — v3 design system.

   One stylesheet for the v3 preview (stouras.com-style single page + the
   ported action pages). Design goals, from the owner (2026-08-16):

     1. a top panel of plain keywords — no dropdowns, no sub-menus;
     2. one page, scrolled — with eased in-page travel (see v3.js);
     3. a redesigned FAQ;
     4. a redesigned sign-in / registration / personal area;
     5. first-class phone and tablet behaviour;
     6. light AND dark mode, chosen by the visitor, remembered.

   Everything is driven by the custom properties below. The dark theme is the
   same components with different tokens — never a second set of rules.

   The v3 pages do NOT load the old template's /assets/css/main.css; the few
   classes the ported forms still use from it (.button, .button.blue) are
   defined here. oa-list.css and oa-ui.css load BEFORE this file, which
   overrides their colours with tokens so both themes cover the engine and
   the forms.
   =========================================================================== */

/* ------------------------------------------------------------------ tokens */

:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               Helvetica, Arial, sans-serif;
  --font-serif: 'Fraunces', 'Iowan Old Style', 'Playfair Display', Georgia,
                'Times New Roman', serif;
  /* the logo wordmark only (owner picked "D2", 2026-08-17): Manrope
     ExtraBold name + a Fraunces ".org" — nothing else uses Manrope */
  --font-logo: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --header-h: 64px;
  --radius: 14px;
  --radius-lg: 20px;
  --container: 1120px;

  /* light (default) — NEUTRAL palette (owner, 2026-08-16: no blue anywhere;
     charcoal/gray accents modelled on the reference site's look) */
  --bg: #f8f7f4;
  --bg-2: #ffffff;
  --bg-3: #eff0f2;
  --ink: #22272e;
  --ink-2: #454c56;
  --mut: #6e7681;
  /* deepened a notch (owner, 2026-08-17: borders read too faint,
     especially for older eyes) — every box inherits these */
  --line: #ccd1d7;
  --line-soft: #dee1e5;
  --brand: #3a424d;
  --brand-2: #262d36;
  --brand-soft: #e9ebee;
  --on-brand: #ffffff;
  --gold: #b98a3e;
  --ok: #2e7d4f;
  --err: #b3413d;
  --warn-bg: #fdf6e8;
  --warn-line: #ecd9ac;
  --shadow: 0 1px 2px rgba(23, 27, 33, 0.05), 0 14px 34px -20px rgba(23, 27, 33, 0.28);
  --shadow-lg: 0 2px 6px rgba(23, 27, 33, 0.06), 0 30px 70px -30px rgba(23, 27, 33, 0.4);
  --header-bg: rgba(248, 247, 244, 0.82);
  --backdrop: rgba(18, 21, 25, 0.5);

  color-scheme: light;
}

[data-theme='dark'] {
  --bg: #0d0f12;
  --bg-2: #15181d;
  --bg-3: #111317;
  --ink: #eef0f2;
  --ink-2: #c5cad1;
  --mut: #8d949e;
  --line: #363d47;
  --line-soft: #282d34;
  --brand: #c6ccd4;
  --brand-2: #dde2e8;
  --brand-soft: rgba(198, 204, 212, 0.13);
  --on-brand: #0d0f12;
  --gold: #d9a55e;
  --ok: #6fbf92;
  --err: #e08a86;
  --warn-bg: #221b0e;
  --warn-line: #4d3d1d;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 16px 40px -22px rgba(0, 0, 0, 0.65);
  --shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.45), 0 34px 80px -32px rgba(0, 0, 0, 0.8);
  --header-bg: rgba(13, 15, 18, 0.82);
  --backdrop: rgba(4, 5, 7, 0.66);

  color-scheme: dark;
}

/* ------------------------------------------------------------------- base */

* { box-sizing: border-box; }

html {
  /* NO scroll-behavior:smooth here — v3.js owns in-page travel with its own
     easing (accelerate, then settle), and the two would fight. */
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body.v3 {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  transition: background-color 0.35s ease, color 0.35s ease;
}

body.v3 a { color: var(--brand); text-decoration: none; }
body.v3 a:hover { color: var(--brand-2); text-decoration: underline; }
body.v3 img { max-width: 100%; }

body.v3 ::selection { background: var(--brand); color: var(--on-brand); }

.v3-container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

/* headings — Fraunces at the reference site's density: one continuous
   heading, single tone, normal tracking (owner, 2026-08-16: the Consulting
   Edge look — no italic second line, no muted split) */
.v3-h1, .v3-h2, .v3-h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0;
  margin: 0;
}
.v3-h1 { font-size: clamp(36px, 5vw, 56px); line-height: 1.12; }
/* the hero's second line: same serif, the site's gray (owner, 2026-08-16 —
   two lines, line 2 in gray, no full stop, NOT italic) */
.v3-h1-sub { color: var(--mut); }
.v3-h2 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.15; }
.v3-h3 { font-size: 21px; line-height: 1.3; }

.v3-kicker {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 14px;
}

.v3-lede { font-size: 18.5px; color: var(--ink-2); }
.v3-mut { color: var(--mut); }

/* focus */
body.v3 :focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* skip link */
.v3-skip {
  position: absolute; left: -9999px; top: 8px; z-index: 300;
  background: var(--bg-2); color: var(--ink); padding: 10px 16px;
  border-radius: 8px; box-shadow: var(--shadow);
}
.v3-skip:focus { left: 8px; }

/* ---------------------------------------------------------------- buttons */

.v3-btn,
body.v3 .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease,
              background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.v3-btn.primary,
body.v3 .button.blue {
  background: var(--brand);
  color: var(--on-brand);
}
.v3-btn.primary:hover,
body.v3 .button.blue:hover { background: var(--brand-2); color: var(--on-brand); }

.v3-btn.ghost,
body.v3 .button.oa-btn-ghost,
body.v3 .button:not(.blue) {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.v3-btn.ghost:hover,
body.v3 .button.oa-btn-ghost:hover,
body.v3 .button:not(.blue):hover { border-color: var(--brand); color: var(--brand); }

.v3-btn.soft { background: var(--brand-soft); color: var(--brand); }
.v3-btn.soft:hover { background: var(--brand); color: var(--on-brand); }

@media (hover: hover) and (pointer: fine) {
  .v3-btn:hover, body.v3 .button:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
}
.v3-btn:active, body.v3 .button:active { transform: translateY(0); }

.v3-btn[disabled], body.v3 .button[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ----------------------------------------------------------------- header */

.v3-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 120;
  height: var(--header-h);
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.v3-header-inner {
  max-width: 1280px;
  margin: 0 auto;
  height: 100%;
  padding: 0 22px;
  display: flex;
  align-items: center;
  gap: 22px;
}

/* THE lockup — one component, identical everywhere it appears (header,
   footer, mobile sheet, sign-in modal): same mark size, same 9px gap,
   same two-line wordmark with the first letters flush left */
.v3-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink) !important;
  text-decoration: none !important;
  white-space: nowrap;
}
/* the two-line wordmark: "Operations / Academia.org", both lines in ink,
   only the ".org" quiet — Manrope ExtraBold with a Fraunces suffix */
/* text-align pinned left so a centred ancestor (the sign-in modal) can
   never re-centre one line inside the block — the O of Operations and the
   A of Academia must sit exactly one below the other everywhere */
.v3-words { display: flex; flex-direction: column; text-align: left; }
.v3-w1, .v3-w2 {
  font-family: var(--font-logo);
  font-weight: 800;
  font-size: 15.5px;
  line-height: 1.16;
  letter-spacing: -0.012em;
  color: var(--ink);
  white-space: nowrap;
}
.v3-org { font-family: var(--font-serif); font-weight: 450; font-size: 0.95em; color: var(--mut); letter-spacing: 0; }
/* THE REAL MONOGRAM (owner, 2026-08-16): the interlocked O-A ligature from
   the site's own logo, cut to assets/oa-mark.png and used as a CSS MASK —
   the glyph is painted in the theme's ink, so it is dark on light and light
   on dark with one asset and no filters. The lettered tile below is the
   fallback for a browser without mask support. */
.v3-mark {
  width: 34px; height: 34px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand); color: var(--on-brand);
  border-radius: 10px;
  font-family: var(--font-serif);
  font-size: 15px; font-weight: 700; letter-spacing: 0.02em;
}
@supports ((mask-image: url('oa-mark.png')) or (-webkit-mask-image: url('oa-mark.png'))) {
  .v3-mark {
    background: var(--ink);
    color: transparent;
    border-radius: 0;
    -webkit-mask: url('oa-mark.png') center / contain no-repeat;
    mask: url('oa-mark.png') center / contain no-repeat;
  }
  /* the real monogram is taller than wide (294x400) — beside the two-line
     wordmark it gets a portrait box; the no-mask letter tile stays square.
     ONE size in every lockup (header, footer, sheet, sign-in modal). */
  .v3-logo .v3-mark { width: 32px; height: 44px; }
}

/* the keyword row — the whole point: flat, no dropdowns */
.v3-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 auto;
}
.v3-nav a {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none !important;
  padding: 9px 13px;
  border-radius: 999px;
  transition: color 0.15s ease, background-color 0.15s ease;
  white-space: nowrap;
}
.v3-nav a:hover { color: var(--ink); background: var(--bg-3); }
.v3-nav a.is-active { color: var(--brand); background: var(--brand-soft); }

.v3-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* theme toggle */
.v3-theme {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.v3-theme:hover { border-color: var(--brand); color: var(--brand); }
.v3-theme svg { width: 18px; height: 18px; }
.v3-theme .i-sun { display: none; }
[data-theme='dark'] .v3-theme .i-sun { display: block; }
[data-theme='dark'] .v3-theme .i-moon { display: none; }

/* burger — phones/tablets only */
.v3-burger {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.v3-burger span {
  display: block; width: 18px; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.v3-burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.v3-burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.v3-burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------- mobile sheet */

.v3-sheet-backdrop {
  position: fixed; inset: 0; z-index: 130;
  background: var(--backdrop);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.v3-sheet {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 140;
  width: min(330px, 88vw);
  background: var(--bg-2);
  border-left: 1px solid var(--line-soft);
  box-shadow: var(--shadow-lg);
  transform: translateX(102%);
  transition: transform 0.3s cubic-bezier(0.22, 0.9, 0.3, 1);
  display: flex; flex-direction: column;
  padding: 18px 20px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.v3-sheet-open .v3-sheet { transform: translateX(0); }
body.v3-sheet-open .v3-sheet-backdrop { opacity: 1; pointer-events: auto; }
body.v3-sheet-open { overflow: hidden; }

.v3-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.v3-sheet-close {
  width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid var(--line); background: transparent;
  color: var(--ink); font-size: 20px; cursor: pointer;
}
.v3-sheet nav { display: flex; flex-direction: column; padding: 8px 0; }
.v3-sheet nav a {
  font-size: 17px; font-weight: 600; color: var(--ink);
  text-decoration: none !important;
  padding: 13px 10px; border-radius: 10px;
}
.v3-sheet nav a:hover, .v3-sheet nav a.is-active { background: var(--brand-soft); color: var(--brand); }
.v3-sheet-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 12px; }

/* the account block oa-accounts paints into the sheet */
#oa-np { display: flex; flex-direction: column; gap: 4px; }
#oa-np .link {
  color: var(--ink); text-decoration: none !important;
  padding: 11px 10px; border-radius: 10px; font-weight: 600;
}
#oa-np .link:hover { background: var(--brand-soft); color: var(--brand); }
#oa-np .oa-np-as { display: block; padding: 8px 10px; color: var(--mut); font-size: 13.5px; }
#oa-np .oa-np-as strong { display: block; color: var(--ink); font-size: 15.5px; }

/* ------------------------------------------------------------------ hero */

.v3-hero {
  position: relative;
  padding: calc(var(--header-h) + clamp(56px, 10vh, 110px)) 0 clamp(56px, 8vh, 96px);
  overflow: hidden;
}
.v3-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 15% 0%, var(--brand-soft) 0%, transparent 70%),
    radial-gradient(45% 40% at 90% 10%, rgba(185, 138, 62, 0.10) 0%, transparent 70%);
  pointer-events: none;
}
.v3-hero .v3-container { position: relative; }
.v3-hero .v3-lede { margin: 22px 0 0; }

.v3-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.v3-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(44px, 7vh, 72px);
}
.v3-stat {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow);
}
.v3-stat b {
  display: block;
  /* NUMBERS are data — plain sans, tabular (owner, 2026-08-16: serif for
     key display headings only; databases/tables/figures in the UI font) */
  font-family: var(--font-sans);
  font-size: clamp(25px, 3vw, 32px);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.v3-stat span { color: var(--mut); font-size: 14px; }

.v3-sponsors {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px;
  margin-top: clamp(40px, 6vh, 60px);
  color: var(--mut); font-size: 13.5px;
}
.v3-sponsors img { height: 34px; width: auto; opacity: 0.9; display: block; }
.v3-sponsors img[data-small] { height: 20px; }
/* the sponsor marks are full-colour with light backgrounds — on dark they sit
   on a white chip rather than being inverted into grey blobs */
[data-theme='dark'] .v3-sponsors a {
  background: #fff; padding: 6px 12px; border-radius: 10px; display: inline-flex;
}
[data-theme='dark'] .v3-sponsors img { opacity: 1; }

/* --------------------------------------------------------------- sections */

.v3-section { padding: clamp(64px, 10vh, 110px) 0; scroll-margin-top: calc(var(--header-h) + 8px); }
.v3-section + .v3-section { border-top: 1px solid var(--line-soft); }
.v3-section-head { margin-bottom: 36px; }
.v3-section-head .v3-lede { margin: 14px 0 0; }
.v3-section-cta { margin: 22px 0 30px; display: flex; flex-wrap: wrap; gap: 12px; }

/* soft full-width band (survey) */
.v3-band {
  background: var(--bg-3);
  border-block: 1px solid var(--line-soft);
}
[data-theme='dark'] .v3-band { background: var(--bg-3); }

/* reveal-on-scroll (v3.js adds .is-in; motion-reduced visitors never move) */
@media (prefers-reduced-motion: no-preference) {
  .v3-reveal { opacity: 0; transform: translateY(22px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.9, 0.3, 1); }
  .v3-reveal.is-in { opacity: 1; transform: none; }
}

/* --------------------------------------------------------- resource cards */

.v3-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v3-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.v3-card {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
a.v3-card { color: inherit !important; text-decoration: none !important; }
@media (hover: hover) and (pointer: fine) {
  a.v3-card:hover, .v3-card[data-hover]:hover {
    transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--line);
  }
}
.v3-card .v3-h3 { display: flex; align-items: center; gap: 10px; }
.v3-card p { margin: 0; color: var(--ink-2); font-size: 15px; }
.v3-card .v3-card-go { margin-top: auto; padding-top: 8px; color: var(--brand); font-weight: 600; font-size: 14.5px; }

.v3-ico {
  width: 40px; height: 40px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand);
  border-radius: 12px; font-size: 19px;
}

/* link list (resources for candidates) */
.v3-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.v3-links li {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 14px 18px;
  color: var(--ink-2);
  font-size: 15px;
}
.v3-links li a { font-weight: 600; }

/* ------------------------------------------------------------------- FAQ */

.v3-faq { }
.v3-faq-item {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.v3-faq-item.is-open { border-color: var(--line); }

.v3-faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  text-align: left;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-sans);
  font-size: 16.5px; font-weight: 600; color: var(--ink);
  padding: 20px 24px;
  min-height: 44px;
}
.v3-faq-q .v3-faq-chev {
  flex: none;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--brand-soft); color: var(--brand);
  transition: transform 0.3s cubic-bezier(0.22, 0.9, 0.3, 1);
}
.v3-faq-item.is-open .v3-faq-chev { transform: rotate(45deg); }

/* the 0fr -> 1fr grid trick: height animation with no JS measuring */
.v3-faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.22, 0.9, 0.3, 1);
}
.v3-faq-item.is-open .v3-faq-a { grid-template-rows: 1fr; }
.v3-faq-a > div { overflow: hidden; }
.v3-faq-a .v3-faq-body {
  padding: 0 24px 22px;
  color: var(--ink-2);
  font-size: 15.5px;
}
.v3-faq-a .v3-faq-body p { margin: 0 0 12px; }
.v3-faq-a .v3-faq-body p:last-child { margin-bottom: 0; }
.v3-faq-a .v3-faq-body ul { margin: 0 0 12px; padding-left: 20px; }

/* ----------------------------------------------------------------- about */

.v3-prose { color: var(--ink-2); }
.v3-prose p { margin: 0 0 16px; }

/* A page made ENTIRELY of prose — the legal texts, the consent statement, the
   survey's own page — needs more than the About column's two rules: headings
   to navigate by, lists, and a measure short enough to read at length. It is a
   MODIFIER, not a replacement: the front page's About column is .v3-prose too
   and must keep its own width, set by the grid it sits in. */
.v3-longform { max-width: 74ch; }
.v3-longform > :first-child { margin-top: 0; }
.v3-longform h2 {
  font-family: var(--font-serif);
  font-size: clamp(21px, 2.4vw, 25px);
  font-weight: 600; line-height: 1.25;
  color: var(--ink);
  margin: 40px 0 14px;
}
.v3-longform h3 {
  font-size: 17px; font-weight: 600; color: var(--ink);
  margin: 28px 0 10px;
}
.v3-longform ul,
.v3-longform ol { margin: 0 0 16px; padding-left: 22px; }
.v3-longform li { margin: 0 0 8px; }
.v3-longform strong { color: var(--ink); font-weight: 600; }

/* Charts published by Google Sheets. They are fixed-size and render in their
   own light styling whichever theme the reader chose, so they sit on a white
   card of their own rather than fighting the page's background — and the card
   scrolls sideways instead of the page when the viewport is narrower than the
   chart, which is the rule every wide thing on this site follows. */
.v3-embed {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px;
  margin-top: 14px;
}
.v3-embed iframe { display: block; border: 0; max-width: none; }

.v3-ack {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--bg-2);
  padding: 4px 22px;
}
.v3-ack summary {
  cursor: pointer; font-weight: 600; color: var(--ink);
  padding: 14px 0; list-style: none; display: flex; align-items: center; gap: 10px;
}
.v3-ack summary::-webkit-details-marker { display: none; }
.v3-ack summary::before { content: '+'; color: var(--brand); font-weight: 700; width: 18px; }
.v3-ack[open] summary::before { content: '–'; }
.v3-ack .v3-ack-body { padding: 0 0 18px; color: var(--ink-2); font-size: 14.5px; }

/* what's new list */
.v3-news { list-style: none; margin: 0; padding: 0; }
.v3-news li {
  position: relative;
  padding: 0 0 22px 28px;
  border-left: 2px solid var(--line);
  margin-left: 8px;
}
.v3-news li::before {
  content: '';
  position: absolute; left: -6px; top: 7px;
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--brand);
}
.v3-news time { display: block; font-size: 13px; color: var(--mut); margin-bottom: 2px; }
.v3-news strong { color: var(--ink); font-size: 16px; display: block; }
/* an entry that names a page links to it; it is still the entry's title, so it
   reads as the heading it is and only picks up the brand colour on hover */
.v3-news strong a { color: inherit; }
.v3-news p { margin: 4px 0 0; color: var(--ink-2); font-size: 14.5px; }

/* --------------------------------------------------------------- contact */

.v3-contact-card {
  max-width: 720px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 40px;
  text-align: center;
  margin: 0 auto;
}
.v3-contact-card .v3-h3 { font-size: 26px; }
.v3-contact-card p { color: var(--ink-2); }

/* ---------------------------------------------------------------- footer */

.v3-footer {
  border-top: 1px solid var(--line-soft);
  background: var(--bg-3);
  padding: 56px 0 40px;
  font-size: 14.5px;
  color: var(--mut);
}
.v3-footer-grid {
  display: grid; gap: 36px;
  grid-template-columns: 2fr 1fr 1fr;
  margin-bottom: 36px;
}
.v3-footer h4 {
  margin: 0 0 12px; font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2);
}
.v3-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.v3-footer a { color: var(--ink-2); }
.v3-footer a:hover { color: var(--brand); }
/* the footer carries the HEADER'S OWN lockup (monogram + wordmark), slightly
   larger — one brand top and bottom, both painted by the theme tokens */
.v3-logo-foot { margin-bottom: 14px; }
.v3-footer-legal {
  border-top: 1px solid var(--line-soft);
  padding-top: 22px;
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  justify-content: space-between; align-items: center;
}

/* back to top */
.v3-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 110;
  width: 46px; height: 46px; border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-2); color: var(--ink);
  box-shadow: var(--shadow);
  cursor: pointer; font-size: 18px;
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.v3-top.is-shown { opacity: 1; pointer-events: auto; transform: none; }

/* The preview ribbon that used to sit here went with the preview: this design
   is the site now, and a badge calling it a testing copy would be a lie. */

/* ==========================================================================
   OA LIST ENGINE — retinted with the tokens (both themes).
   oa-list.css loads first; these same-or-higher specificity rules win.
   ========================================================================== */

/* Everything data-shaped runs on the UI sans, never the serif (owner,
   2026-08-16). Form CONTROLS do not inherit font-family, and the vendored
   oa-ui.css names 'Source Sans Pro' (which v3 does not load) — so the engine,
   the forms and every control are pinned to Inter explicitly. Serif headings
   inside these areas (the modal's brand heading, the gate's) re-claim it with
   their own later rules. */
body.v3 .oa-list,
body.v3 .oa-list input, body.v3 .oa-list select, body.v3 .oa-list button,
body.v3 .oa-form,
body.v3 .oa-form input, body.v3 .oa-form select, body.v3 .oa-form textarea,
body.v3 .oa-form button,
body.v3 .oa-note, body.v3 .oa-gate, body.v3 .oa-panel,
body.v3 #oa-account, body.v3 .oa-acct-menu,
body.v3 .oa-modal-card,
body.v3 .oa-modal-card input, body.v3 .oa-modal-card select,
body.v3 .oa-modal-card textarea, body.v3 .oa-modal-card button {
  font-family: var(--font-sans);
}

/* The bar is a GRID, not the engine's fixed-width flex wrap (owner,
   2026-08-16, from a screenshot: a wrapped orphan column and a Clear button
   floating in space). Every control fills its track, the text searches get
   double width on wide screens, and Clear is simply the last cell — so the
   bar always ends flush, at any width and any number of filters. */
body.v3 .oa-filters {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 14px 16px;
  align-items: end;
  /* the card needs its own breathing room: the engine's base padding is
     4px 0 14px (flush left/right — owner screenshot, 2026-08-17) */
  padding: 18px 20px 20px;
}
body.v3 .oa-filter { width: auto; }
body.v3 .oa-filters input[type='search'],
body.v3 .oa-pick-btn { width: 100%; height: 44px; }
/* Clear always CLOSES its row — it stretches from wherever it lands to the
   bar's right edge, so no row ever trails off into dead space */
body.v3 .oa-filter-actions { margin-left: 0; align-self: end; grid-column: auto / -1; }
body.v3 .oa-clear { width: 100%; height: 44px; }
@media (min-width: 1000px) {
  /* the free-text searches are the primary way in — give them room */
  body.v3 .oa-filter:not(.oa-pick) { grid-column: span 2; }
}
@media (max-width: 640px) {
  /* the mobile standard, in grid form: pickers two per row, every text
     search and the Clear button full width */
  body.v3 .oa-filters { grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px 14px 18px; }
  body.v3 .oa-filter:not(.oa-pick),
  body.v3 .oa-filter-actions { grid-column: 1 / -1; }
}
/* a profile picture fills the avatar disc; the initials show only without one */
.oa-avatar { overflow: hidden; }
.oa-avatar .oa-avatar-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: inherit;
}
.oa-photo-side { text-align: center; flex: none; }
.oa-photo-row { display: flex; gap: 6px; justify-content: center; margin-top: 8px; }
.oa-photo-row button {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  color: var(--ink-2); background: var(--bg-3);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 10px; cursor: pointer; white-space: nowrap;
}
.oa-photo-row button:hover { border-color: var(--brand); color: var(--brand); }

/* admin-only curation controls on a What's-new item (drawn only when the
   admin is signed in — authorisation is the Firestore rules, not this CSS) */
.v3-news-admin { margin: 8px 0 0; display: flex; gap: 10px; }
.v3-news-admin button {
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
  color: var(--ink-2); background: var(--bg-3);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 12px; cursor: pointer;
}
.v3-news-admin button:hover { border-color: var(--brand); color: var(--brand); }

/* the About section: circular portrait on the left, the heading + prose on
   the right — NOTHING sits above the photo (owner, 2026-08-17 — the
   Consulting Edge "methodology born in the field" arrangement, heading in
   the text column) */
.v3-about-grid {
  display: grid; grid-template-columns: 250px 1fr; gap: 44px;
  align-items: start; margin-top: 6px;
}
/* the section heading lives INSIDE the text column here, so it needs the
   in-column rhythm, not the section-lead 36px */
.v3-about-grid .v3-section-head { margin-bottom: 18px; }
/* The portrait block is ~341px tall against ~543px of heading + prose, so
   top-aligning it dumped the whole 202px difference into an empty well under
   the icon row (352px at 900px wide) and left the photo's centre of gravity
   153px above the text's — the section read top-heavy (owner, 2026-08-17:
   "align my picture in the center of the text"). Centring the figure splits
   that slack evenly (101/101 at the 1120px container, and evenly at every
   other width by construction) and lands the top of the disc a few px above
   the first prose line's cap height — the overshoot a round form needs to
   read as aligned with flat text.
   align-self HERE, deliberately, rather than align-items:center on the grid:
   the TEXT column must keep `start`, so that if the prose is ever shorter
   than the portrait the heading still sits at the very top and nothing can
   appear above the picture. Inert in the <=800px block: one column per row,
   each sized to its content.
   The travel is deliberately UNCAPPED, which is right while the About runs to
   three paragraphs or fewer — measured, the disc lands in the same place
   either way (101px down at 1440, 227px at 805). Grown to five paragraphs or
   more, centring walks the photo down with the text (262px at five, 484px at
   eight) until it reads as orphaned mid-column; the fix THEN is to cap the
   travel — `align-self: stretch; display: flex; flex-direction: column;
   justify-content: center; max-height: 800px` — which holds it at ~230px.
   Not shipped today because at this length it changes nothing. */
.v3-about-portrait { margin: 0; text-align: center; align-self: center; }
.v3-about-portrait img {
  width: 220px; height: 220px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--line); box-shadow: var(--shadow);
  display: block; margin: 0 auto;
  /* mirrored so the portrait faces the prose beside it (owner, 2026-08-17) */
  transform: scaleX(-1);
}
.v3-about-portrait figcaption { margin-top: 14px; font-size: 13.5px; line-height: 1.5; }
.v3-about-portrait figcaption strong { display: block; color: var(--ink); font-size: 14.5px; }
/* the name links to stouras.com (owner, 2026-08-17) but must still READ as a
   name, not as a link in a row of links — ink-coloured and bold like the
   <strong> it replaced, showing its brand colour + underline only on hover.
   Two classes deep so it out-ranks the caption's generic 'a' rule below. */
.v3-about-portrait figcaption .v3-portrait-name {
  display: block;
  margin-top: 0;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 700;
}
.v3-about-portrait figcaption .v3-portrait-name:hover {
  color: var(--brand);
  text-decoration: underline;
}
.v3-about-portrait figcaption span { display: block; color: var(--mut); margin-top: 3px; }
.v3-about-portrait figcaption a { display: inline-block; color: var(--brand); margin-top: 5px; }
/* the profile-icon row under the caption — the same four links as
   stouras.com's portrait card (e-mail, X, Google Scholar, ORCID), drawn in
   this site's tokens rather than that site's blue */
.v3-portrait-links {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 18px;
}
/* figcaption-qualified so these win over the caption's own link rule above */
figcaption .v3-portrait-links a {
  display: inline-flex;
  margin: 0;
  color: var(--ink-2);
  transition: color 0.2s ease;
}
figcaption .v3-portrait-links a:hover { color: var(--brand); }
.v3-portrait-links svg { width: 20px; height: 20px; }
@media (max-width: 800px) {
  .v3-about-grid { grid-template-columns: 1fr; gap: 26px; }
  /* stacked, the heading must still lead the section — the photo follows
     the prose as a signature card */
  .v3-about-grid .v3-about-portrait { order: 2; }
  .v3-about-portrait img { width: 170px; height: 170px; }
}

/* nothing to search yet (owner, 2026-08-17): while a dataset is EMPTY the
   bar, count and pager stay away — only the empty-state card speaks; the
   engine flips .oa-data-empty per render, so data arriving brings them back */
body.v3 .oa-data-empty .oa-filters,
body.v3 .oa-data-empty .oa-resultbar { display: none; }

body.v3 .oa-filter > label { color: var(--mut); }
body.v3 .oa-filters input[type='search'],
body.v3 .oa-pick-btn,
body.v3 .oa-pick-search {
  background: var(--bg);
  border-color: var(--line);
  color: var(--ink);
  border-radius: 10px;
}
body.v3 .oa-filters input[type='search']:focus,
body.v3 .oa-pick-search:focus { border-color: var(--brand); }
/* hover makes the control's edge unmistakable before it is clicked */
@media (hover: hover) and (pointer: fine) {
  body.v3 .oa-filters input[type='search']:hover,
  body.v3 .oa-pick-btn:hover,
  body.v3 .oa-pick-search:hover,
  .v3-launcher input[type='search']:hover,
  .v3-launcher select:hover { border-color: var(--mut); }
}
body.v3 .oa-pick-btn.is-set { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
body.v3 .oa-pick-menu {
  background: var(--bg-2);
  border-color: var(--line);
  box-shadow: var(--shadow-lg);
  border-radius: 12px;
}
body.v3 .oa-opt { color: var(--ink-2); }
body.v3 .oa-opt:hover { background: var(--brand-soft); }
body.v3 .oa-opt-n { color: var(--mut); background: var(--bg-3); border-radius: 999px; }
body.v3 .oa-chip { background: var(--brand); color: var(--on-brand); border-radius: 999px; }
body.v3 .oa-chip:hover { background: var(--brand-2); }
body.v3 .oa-clear {
  background: transparent; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 999px;
}
body.v3 .oa-clear:hover:not([disabled]) { color: var(--brand); border-color: var(--brand); }

body.v3 .oa-resultbar { color: var(--mut); }
body.v3 .oa-pager button {
  background: var(--bg-2); border: 1px solid var(--line);
  color: var(--ink); border-radius: 10px;
}
body.v3 .oa-pager button:hover:not([disabled]) { border-color: var(--brand); color: var(--brand); }

body.v3 .oa-card {
  background: var(--bg-2);
  /* full --line ex-ante, --mut on hover (owner, 2026-08-17: the lines around
     listed jobs were too discrete to see) */
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  body.v3 .oa-card:hover { border-color: var(--mut); box-shadow: var(--shadow-lg); }
}
body.v3 .oa-card-head { background: none; }
body.v3 .oa-card-title { color: var(--ink); font-weight: 600; }
body.v3 .oa-card-sub { color: var(--mut); }
body.v3 .oa-card-body { border-top: 1px solid var(--line-soft); }
body.v3 .oa-kv th { color: var(--mut); }
body.v3 .oa-kv td { color: var(--ink-2); }
body.v3 .oa-kv tr { border-color: var(--line-soft); }
body.v3 .oa-label { border-radius: 999px; }
body.v3 .oa-label-primary { background: var(--brand); color: var(--on-brand); }
body.v3 .oa-loading, body.v3 .oa-empty {
  background: var(--bg-2); border: 1px dashed var(--line);
  border-radius: var(--radius); color: var(--mut);
}
body.v3 .oa-empty strong { color: var(--ink); }
body.v3 .oa-jobbtn {
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--bg-2); color: var(--ink-2);
}
body.v3 .oa-jobbtn:hover { border-color: var(--brand); color: var(--brand); }

/* ==========================================================================
   OA UI (forms, notes, gates, account, modals) — retinted with the tokens.
   ========================================================================== */

body.v3 .oa-note {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--brand);
  border-radius: 12px;
  color: var(--ink-2);
  box-shadow: var(--shadow);
}
body.v3 .oa-note strong { color: var(--ink); }
body.v3 .oa-note.is-warn { background: var(--warn-bg); border-color: var(--warn-line); border-left-color: var(--gold); }

/* The form's base colours are hardcoded light-theme values in oa-ui.css
   (#222 text — the Entry level labels are BARE TEXT nodes inheriting it, so
   they vanished on dark; owner screenshot 2026-08-16), and the fieldset
   "card" had padding 0, so content hugged its edges. */
body.v3 .oa-form { color: var(--ink-2); max-width: 780px; }
body.v3 .oa-form fieldset, body.v3 .oa-panel {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
body.v3 .oa-form fieldset { padding: 26px 30px 18px; margin: 0 0 24px; }
body.v3 .oa-form legend {
  float: left;             /* keeps a legend INSIDE the padded card box */
  width: 100%;
  padding: 0 0 10px;
  margin: 0 0 18px;
  border-bottom: 1px solid var(--line-soft);
}
body.v3 .oa-form legend + * { clear: both; }
body.v3 .oa-check { color: var(--ink-2); }
body.v3 .oa-check input[type='checkbox'],
body.v3 .oa-check input[type='radio'] {
  background: var(--bg);
  border-color: var(--mut);
}
body.v3 .oa-check input[type='checkbox']:checked,
body.v3 .oa-check input[type='radio']:checked {
  background: var(--brand);
  border-color: var(--brand);
}
body.v3 .oa-check input[type='checkbox']:checked::after { border-color: var(--on-brand); }
body.v3 .oa-check input[type='radio']:checked::after { background: var(--on-brand); }
body.v3 .oa-req { color: var(--err); }
body.v3 .oa-form input[aria-invalid='true'],
body.v3 .oa-form select[aria-invalid='true'],
body.v3 .oa-form textarea[aria-invalid='true'] { border-color: var(--err); }
body.v3 .oa-form legend { color: var(--ink); background: var(--bg-2); font-family: var(--font-sans); font-size: 17px; font-weight: 700; }
body.v3 .oa-field > label, body.v3 .oa-field > .oa-label-text { color: var(--ink); }
body.v3 .oa-hint { color: var(--mut); }
body.v3 .oa-lede { color: var(--ink-2); }
body.v3 .oa-muted { color: var(--mut); }

body.v3 .oa-form input, body.v3 .oa-form select, body.v3 .oa-form textarea,
body.v3 .oa-modal-card input, body.v3 .oa-modal-card select, body.v3 .oa-modal-card textarea {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 10px;
}
/* background-color declared too: oa-ui's focus rule turns the box WHITE,
   which on dark meant near-white text on a white field while typing */
body.v3 .oa-form input:focus, body.v3 .oa-form select:focus, body.v3 .oa-form textarea:focus,
body.v3 .oa-form input[type='text']:focus,
body.v3 .oa-modal-card input:focus, body.v3 .oa-modal-card select:focus,
body.v3 .oa-modal-card textarea:focus,
body.v3 .oa-modal-card input[type='password']:focus {
  border-color: var(--brand);
  background-color: var(--bg);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
body.v3 .oa-form input[disabled], body.v3 .oa-modal-card input[disabled] {
  background: var(--bg-3); color: var(--mut);
}
body.v3 .oa-check span { color: var(--ink-2); }

body.v3 .oa-gate {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  color: var(--ink-2);
}
body.v3 .oa-gate h3 { color: var(--ink); font-family: var(--font-serif); }
body.v3 .oa-gate-fine { color: var(--mut); }

body.v3 .oa-auth-msg.is-err { color: var(--err); }
body.v3 .oa-auth-msg.is-ok { color: var(--ok); }
body.v3 .oa-linkbtn { color: var(--brand); }
body.v3 .oa-err { color: var(--err); }

/* --------------------------------------------- alerts: list + example e-mail */
/* oa-ui.css paints these as fixed WHITE cards, so on dark the inherited
   near-white text sat on a white box (owner screenshot, 2026-08-17). Retinted
   with the tokens so the alerts page follows the theme like every other card. */

body.v3 .oa-alert-card {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
body.v3 .oa-alert-card.is-off { background: var(--bg-3); }
body.v3 .oa-alert-main strong { color: var(--ink); }
body.v3 .oa-alert-actions button {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
}
body.v3 .oa-alert-actions button:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand);
}
body.v3 .oa-alert-actions button.is-danger:hover {
  background: transparent;
  border-color: var(--err);
  color: var(--err);
}

/* the live example e-mail */
body.v3 .oa-preview {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
body.v3 .oa-preview-head {
  background: var(--bg-3);
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-2);
}
body.v3 .oa-preview-head strong { color: var(--ink); }
body.v3 .oa-preview-body { color: var(--ink-2); }
body.v3 .oa-preview-body strong { color: var(--ink); }
body.v3 .oa-preview-foot {
  border-top: 1px solid var(--line-soft);
  color: var(--mut);
}

/* ------------------------------------------------------------ auth modal */

body.v3 .oa-modal { background: var(--backdrop); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body.v3 .oa-modal-card {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  color: var(--ink-2);
  max-width: 440px;
  padding: 34px 36px 30px;
}
body.v3 .oa-modal-card h3 { color: var(--ink); font-family: var(--font-serif); font-size: 24px; }
body.v3 .oa-modal-lede { color: var(--mut); }
body.v3 .oa-modal-x {
  background: transparent; color: var(--mut); border: 0;
  width: 40px; height: 40px; border-radius: 999px; font-size: 22px;
}
body.v3 .oa-modal-x:hover { color: var(--ink); background: var(--bg-3); }

/* v3 auth card layout (markup from the v3 oa-accounts.js) */
/* the modal carries the SAME .v3-logo lockup as the header and footer,
   centred as one unit — no per-modal sizes or stacking */
.oa-auth-brand { text-align: center; margin: 4px 0 18px; }
.oa-auth-brand .oa-auth-tag { color: var(--mut); font-size: 14.5px; margin-top: 6px; line-height: 1.5; }

body.v3 .oa-modal-card form label { display: block; font-weight: 600; color: var(--ink); font-size: 14px; margin: 0 0 14px; }
body.v3 .oa-modal-card form input[type='email'],
body.v3 .oa-modal-card form input[type='password'],
body.v3 .oa-modal-card form input[type='url'],
body.v3 .oa-modal-card form input[type='text'] {
  display: block; width: 100%;
  font-size: 16px;
  padding: 13px 15px;
  margin-top: 6px;
}
body.v3 .oa-auth-actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; margin-top: 4px; }
body.v3 .oa-auth-actions .button { width: 100%; font-size: 16px; padding: 15px 26px; }

.oa-auth-links {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 22px;
  margin: 16px 0 0; font-size: 14.5px;
}
.oa-auth-links button, .oa-auth-links a {
  background: none; border: 0; cursor: pointer;
  color: var(--brand); font-size: 14.5px; font-weight: 600; padding: 6px 2px;
}
.oa-auth-links button:hover, .oa-auth-links a:hover { color: var(--brand-2); text-decoration: underline; }
.oa-auth-back { text-align: center; margin: 14px 0 0; }
.oa-auth-back button, .oa-auth-back a {
  background: none; border: 0; cursor: pointer;
  color: var(--mut); font-size: 14px; padding: 6px 2px;
}
.oa-auth-back button:hover, .oa-auth-back a:hover { color: var(--ink); }

/* body.v3 .oa-modal-card form label sets display:block, which flattened this
   flex row and glued the checkbox to its text (owner screenshot, 2026-08-17)
   — the row needs the same specificity to keep its layout */
.oa-terms-row,
body.v3 .oa-modal-card form label.oa-terms-row {
  display: flex; gap: 11px; align-items: flex-start; margin: 14px 0 18px;
}
.oa-terms-row input[type='checkbox'] {
  -webkit-appearance: auto; appearance: auto;
  width: 18px; height: 18px; margin: 3px 0 0; flex: none;
  accent-color: var(--brand);
}
.oa-terms-row span { font-size: 14px; color: var(--ink-2); font-weight: 400; line-height: 1.55; }

/* the fine print under the Google/ORCID buttons — plain quiet text on the
   card, never the gray dropdown-row chrome `oa-opt` carries in oa-list.css */
.oa-auth-fine {
  text-align: center; margin: 10px 0 0; padding: 0; background: none;
  font-size: 12.5px; color: var(--mut); line-height: 1.55;
}
.oa-auth-fine a { color: var(--ink-2); }

body.v3 .oa-auth-providers { display: flex; flex-direction: column; gap: 10px; margin: 0 0 4px; }
body.v3 .oa-auth-provider {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 999px;
  font-size: 15px; font-weight: 600;
  padding: 12px 18px;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
body.v3 .oa-auth-provider:hover { border-color: var(--brand); background: var(--brand-soft); }
body.v3 .oa-or {
  display: flex; align-items: center; gap: 14px;
  color: var(--mut); font-size: 13px; margin: 14px 0;
}
body.v3 .oa-or::before, body.v3 .oa-or::after {
  content: ''; flex: 1; height: 1px; background: var(--line-soft);
}

/* ------------------------------------------------- header account control */

/* oa-ui.css pins #oa-account to the old header's absolute corner; the v3
   header is a flex row, so it flows in place like everything else. */
body.v3 #oa-account { position: static; height: auto; font-family: var(--font-sans); }

body.v3 #oa-account .oa-acct-off { color: var(--mut); font-size: 14.5px; white-space: nowrap; }

body.v3 .oa-acct-btn {
  /* the signed-out "Sign in" pill */
  background: transparent;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  font-size: 15px; font-weight: 600;
  padding: 9px 22px; border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
body.v3 .oa-acct-btn:hover { background: var(--ink); color: var(--bg); }

body.v3 .oa-acct-chip {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 14px 5px 5px;
  cursor: pointer;
  color: var(--ink);
  font-size: 14.5px; font-weight: 600;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body.v3 .oa-acct-chip:hover { border-color: var(--brand); box-shadow: var(--shadow); }
body.v3 .oa-acct-chip[aria-expanded='true'] { border-color: var(--brand); }

body.v3 .oa-avatar {
  width: 32px; height: 32px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: hsl(var(--oa-hue, 215), 48%, 46%);
  color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: 0.03em;
}
body.v3 .oa-avatar-lg { width: 44px; height: 44px; font-size: 16px; }
body.v3 .oa-avatar-xl { width: 56px; height: 56px; font-size: 20px; }
body.v3 .oa-caret { border-top-color: currentColor; opacity: 0.6; }

body.v3 .oa-acct-menu {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  min-width: 280px;
  padding: 8px;
  right: 0; top: calc(100% + 10px);
}
body.v3 .oa-acct-as {
  display: block;
  background: var(--bg-3);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  border: 0;
}
body.v3 .oa-acct-as .oa-acct-eyebrow {
  display: block; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--mut);
  margin-bottom: 3px;
}
body.v3 .oa-acct-as strong { color: var(--ink); font-size: 15px; }
body.v3 .oa-acct-mail { color: var(--mut); font-size: 13.5px; word-break: break-all; }
body.v3 .oa-acct-group { border: 0; padding: 4px 0; }
body.v3 .oa-acct-menu a, body.v3 .oa-acct-menu button {
  color: var(--ink-2);
  border-radius: 9px;
  font-size: 14.5px;
  padding: 10px 12px;
}
body.v3 .oa-acct-menu a:hover, body.v3 .oa-acct-menu button:hover {
  background: var(--brand-soft); color: var(--brand);
}
body.v3 .oa-acct-menu .oa-acct-primary { font-weight: 650; color: var(--ink); }
body.v3 .oa-acct-out {
  border-top: 1px solid var(--line-soft);
  color: var(--err) !important;
  margin-top: 4px;
}
body.v3 .oa-acct-out:hover { background: rgba(179, 65, 61, 0.09); }

/* profile / merge cards inherit the modal card retint above */
body.v3 .oa-orcid-chip { background: var(--bg-3); color: var(--ink); border-radius: 8px; }
body.v3 .oa-verified { color: var(--ok); }
body.v3 .oa-acct-other { border-top: 1px solid var(--line-soft); }
body.v3 .oa-acct-other h4 { color: var(--ink); }
body.v3 .oa-mergebtn {
  background: transparent; border: 1px solid var(--line);
  color: var(--ink-2); border-radius: 10px;
}
body.v3 .oa-mergebtn:hover { border-color: var(--brand); color: var(--brand); }
body.v3 .oa-merge-from, body.v3 .oa-merge-into { background: var(--bg-3); border-radius: 12px; }

/* ---------------------------------------------------------- personal area */

.v3-pa-hero { padding: calc(var(--header-h) + 56px) 0 34px; }
.v3-pa-hero .v3-h1 { font-size: clamp(34px, 5vw, 52px); }

.v3-pa-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 26px 0 60px; }
.v3-pa-card {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  display: flex; flex-direction: column; gap: 8px;
  color: inherit !important; text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .v3-pa-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--line); }
}
.v3-pa-card h3 { margin: 0; font-size: 17px; color: var(--ink); display: flex; gap: 10px; align-items: center; }
.v3-pa-card p { margin: 0; font-size: 14.5px; color: var(--mut); }
.v3-pa-card .v3-pa-n {
  font-family: var(--font-sans); font-size: 28px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.v3-pa-empty {
  max-width: 640px; margin: 30px auto 70px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  text-align: center;
  padding: 52px 40px;
}
.v3-pa-empty .v3-h3 { font-size: 26px; }
.v3-pa-empty p { color: var(--mut); margin: 12px 0 26px; }

/* auth gate card on account.html (signed-out state) */
.v3-pa-signin {
  max-width: 440px; margin: 40px auto 80px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 40px;
  text-align: center;
}

/* ----------------------------------------------------- jobs launcher card

   The main page shows the TEN most recent postings and this compact search
   card (owner, 2026-08-16, from the reference screenshots): labelled
   controls that already display their value ("All types", "All locations"),
   and one primary button that carries the choice to the dedicated
   jobs.html page, where the full list lives. */

.v3-launcher {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px 26px;
  margin: 0 0 26px;
  max-width: 860px;
}
.v3-launcher .v3-flabel {
  display: block;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mut);
  margin: 0 0 8px;
}
.v3-launcher input[type='search'] {
  display: block; width: 100%;
  font-family: var(--font-sans); font-size: 16px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 15px;
  -webkit-appearance: none; appearance: none;
}
.v3-launcher input[type='search']:focus { border-color: var(--brand); outline: none;
  box-shadow: 0 0 0 3px var(--brand-soft); }
.v3-launcher-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.v3-launcher select {
  display: block; width: 100%;
  font-family: var(--font-sans); font-size: 15.5px; font-weight: 600;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 36px 11px 13px;
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888f98' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
}
.v3-launcher select:focus { border-color: var(--brand); outline: none;
  box-shadow: 0 0 0 3px var(--brand-soft); }
.v3-launcher-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 20px;
}
.v3-launcher-actions .v3-mut { font-size: 13.5px; }

/* the ten-most-recent list under it renders through the same engine but
   without its filter bar (the page removes the bar and result-bar nodes) */

/* the engine's own filter labels, where the full bar IS shown (jobs.html,
   candidates, placements): the reference site's small-caps look */
body.v3 .oa-filter > label {
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--mut);
}

/* ------------------------------------------------- filters sign-in lock

   On the dedicated jobs page the LIST is public but the FILTERS unlock on
   sign-in (owner, from the reference site's "Sign up for free" panel). The
   lock is a nudge, not security — the data is a public file. */

.v3-lock { position: relative; }
.v3-lock.is-locked .oa-filters {
  opacity: 0.45;
  pointer-events: none;
  -webkit-user-select: none; user-select: none;
  filter: saturate(0.6);
}
.v3-lock-card {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 18px;
}
.v3-lock:not(.is-locked) .v3-lock-card { display: none; }
.v3-lock-card-inner {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 22px 28px;
  max-width: 460px;
}
.v3-lock-card-inner h3 {
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-size: 16.5px; font-weight: 700; color: var(--ink);
}
.v3-lock-card-inner p { margin: 0 0 16px; font-size: 14px; color: var(--mut); }
.v3-lock-card-inner .v3-cta-row { justify-content: center; margin: 0; }
.v3-lock-card-inner .v3-btn { padding: 11px 20px; font-size: 14.5px; }

@media (max-width: 640px) {
  .v3-launcher { padding: 18px; }
  .v3-launcher-row { grid-template-columns: 1fr; gap: 12px; }
  .v3-launcher-actions .v3-btn { flex: 1 1 auto; }
  /* phone: the sign-in card flows ABOVE the dimmed bar instead of floating
     over it — the bar stays visible (and measurable by the mobile gate),
     just inert until sign-in */
  .v3-lock.is-locked { display: flex; flex-direction: column-reverse; }
  .v3-lock-card { position: static; padding: 0 0 16px; }
}

/* --------------------------------------- jobs: the two-column reference layout

   Owner, 2026-08-16 (Kurate screenshot): search filters LEFT with the explore
   button directly beneath them; the ten most recent postings as a PANEL on
   the right; the button leads to the dedicated page where the filters nudge
   a sign-in. */

.v3-jobs-grid {
  display: grid;
  grid-template-columns: minmax(320px, 5fr) 7fr;
  gap: 44px;
  align-items: start;
}
.v3-jobs-left .v3-launcher { margin: 26px 0 0; padding: 20px 22px; max-width: none; }
.v3-jobs-left .v3-launcher-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.v3-jobs-left .v3-launcher select {
  font-size: 14px; padding: 10px 24px 10px 10px;
  background-position: right 8px center;
}
.v3-jobs-left .v3-launcher-actions { margin-top: 18px; gap: 10px; }
.v3-jobs-left .v3-launcher-actions .v3-btn { padding: 12px 18px; font-size: 14.5px; }

.v3-panel {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.v3-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-3);
}
.v3-panel-head h3 {
  margin: 0; font-family: var(--font-serif);
  font-size: 18px; font-weight: 600; color: var(--ink);
}
.v3-panel-head a { font-size: 14px; font-weight: 600; white-space: nowrap; }
.v3-panel-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px 14px; flex-wrap: wrap;
  padding: 12px 20px;
  border-top: 1px solid var(--line-soft);
  font-size: 13.5px;
}
.v3-panel-foot a { font-weight: 600; white-space: nowrap; }

/* inside the panel the ten postings read as a tight LIST — the panel carries
   the chrome, so the cards drop theirs. body.v3-prefixed to outrank the
   body.v3 .oa-card retint above. */
body.v3 .v3-panel .oa-list { padding: 0; }
body.v3 .v3-panel .oa-cards { margin: 0; }
body.v3 .v3-panel .oa-card {
  margin: 0;
  border: 0; border-radius: 0; box-shadow: none;
  /* full --line so the seam between postings is plainly visible */
  border-bottom: 1px solid var(--line);
}
body.v3 .v3-panel .oa-card:last-child { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) {
  body.v3 .v3-panel .oa-card:hover {
    box-shadow: none; border-color: var(--line); background: var(--bg-3);
  }
}

@media (max-width: 980px) {
  .v3-jobs-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px) {
  .v3-jobs-left .v3-launcher-row { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 1080px) {
  .v3-nav a { padding: 9px 9px; font-size: 14.5px; }
}

@media (max-width: 920px) {
  .v3-nav { display: none; }
  .v3-burger { display: inline-flex; }
  .v3-header-inner { gap: 12px; }
  /* the header keeps: logo · theme · sign-in/chip · burger */
  body.v3 .oa-acct-name { display: none; }           /* chip shrinks to avatar */
  body.v3 .oa-acct-chip { padding: 4px; }
  .v3-grid, .v3-grid.two { grid-template-columns: 1fr 1fr; }
  .v3-pa-grid { grid-template-columns: 1fr 1fr; }
  .v3-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  :root { --header-h: 58px; }
  .v3-container { padding: 0 18px; }
  /* phone header: the mark alone — the wordmark text would push the burger
     off the right edge of a 390px screen */
  .v3-header .v3-logo span + span { display: none; }
  .v3-header-inner { padding: 0 14px; gap: 10px; }
  .v3-stats { grid-template-columns: 1fr 1fr; }
  .v3-grid, .v3-grid.two, .v3-pa-grid { grid-template-columns: 1fr; }
  .v3-footer-grid { grid-template-columns: 1fr; }
  .v3-cta-row .v3-btn { flex: 1 1 auto; }
  .v3-contact-card { padding: 30px 22px; }
  body.v3 .oa-modal-card { padding: 28px 22px 24px; }
  .v3-faq-q { font-size: 15.5px; padding: 17px 18px; }
  .v3-faq-a .v3-faq-body { padding: 0 18px 18px; }
  .v3-hero { padding-top: calc(var(--header-h) + 44px); }
  .v3-top { right: 14px; bottom: 60px; }

  /* forms on a phone: 16px inputs (iOS zooms into anything smaller and
     stays zoomed), finger-height controls, a card that still breathes */
  body.v3 .oa-form fieldset { padding: 18px 16px 12px; }
  body.v3 .oa-form input, body.v3 .oa-form select {
    font-size: 16px; min-height: 44px;
  }
  body.v3 .oa-form textarea { font-size: 16px; }
  body.v3 .oa-check { font-size: 15.5px; }
}

/* very small phones: keep the stat numbers from wrapping awkwardly */
@media (max-width: 380px) {
  .v3-stats { grid-template-columns: 1fr; }
}

/* ported action pages: a narrower reading column under the page hero */
.v3-page { max-width: 900px; padding-bottom: 90px; }
.v3-page > br { display: none; }   /* the old template breathed with <br>s */

/* [hidden] must always win — the reset lesson from _PLAN.md, carried over */
[hidden] { display: none !important; }