/* yotta.bot/careers (plan #281).
 *
 * The careers pages look like Boo (owner, 2026-10-27): Boo's palette and
 * IBM Plex Sans throughout, its green primary and outlined secondary buttons,
 * its inputs, and the Access Portal's theme switch. The tokens are the shared
 * block below, copied in by `make sync-tokens` as for every portal; the roles
 * after it are Boo Desktop's (src/yotta-bot/desktop/frontend/src/styles.css).
 * /styles.css still lays out the header and footer; this file loads after it,
 * so these values win. Rounded corners; no blue focus outline. */

/* >>> YOTTA DESIGN TOKENS — generated from src/common/frontend/styles/tokens.css; edit there + run `make sync-tokens` (do not hand-edit between these markers) */
:root {
  /* 1. Brand primitives — the Yotta hue wheel. These stay constant across
     light and dark (only surfaces, ink, and --accent flip). Add a hue here
     once, then reference it everywhere as var(--sc-NAME). */
  --sc-green:#7cbd3c; --sc-yellow:#f2c840; --sc-orange:#e07235; --sc-red:#d13644; --sc-magenta:#86347c;
  --sc-blue:#3d8bdc;   /* info / links / "running" — previously hard-coded ~32x */
  /* NOTE: only these six hues + the neutral ramp + white are allowed in CSS.
     --sc-teal / --sc-gray were retired — standby now uses magenta, neutral
     uses a ramp gray (see semantic roles below). */

  /* 2. Surfaces & ink (light) */
  --bg:#fbf6e4; --bg2:#efead9; --bg3:#e3decd;
  /* Surfaces are on-ramp neutrals (= --bg2 / --bg3) so light mode has the
     same shade ladder as dark, where --surface/--surface2 already resolve
     to --bg2/--bg3. (Was #ffffff / #fbf6e4 — off-ramp white collapsed the
     ladder, so light had fewer shades than dark.) */
  --surface:#efead9; --surface2:#e3decd;
  --border:rgba(35,26,21,0.12); --border-strong:rgba(35,26,21,0.25);
  --text:#231a15; --text2:#5f574f; --text3:#8f887d;
  /* The focus ring is neutral ink, never blue (owner, 2026-10-08). Resolved
     against the theme's own --text2, so dark follows. */
  --focus-ink:var(--text2);
  --accent:var(--sc-red);
  /* Chrome (top bar, sidebar, footer, sticky table headers): in light
     mode it matches the body background (--bg, neutral 100) for a flat
     single-tone look — the stripe bar + hairline borders carry the
     separation, not a fill step. (Dark mode already has --hbg == --bg.)
     --chrome-rgb is the rgb of the text drawn ON chrome — kept as raw
     rgb so chrome overlays can use `rgba(var(--chrome-rgb), 0.NN)` and
     flip with the theme. */
  --hbg:#fbf6e4; --htxt:#231a15; --chrome-rgb:35,26,21;

  /* 4. Semantic roles — what a colour MEANS. App code and the chip palettes
     should prefer these over a raw hue, so that (e.g.) re-theming every
     "success" surface is a one-line edit here. They resolve to brand
     primitives, so they're theme-constant too. */
  --success: var(--sc-green);
  --warning: var(--sc-yellow);
  --caution: var(--sc-orange);   /* in progress / active / needs attention */
  --danger:  var(--sc-red);
  --info:    var(--sc-blue);
  --standby: var(--sc-magenta);  /* pending / scheduled / queued (was --sc-teal) */
  --neutral: #8f887d;            /* neutral ramp 550 — ungrouped/unknown/muted (was --sc-gray) */

  /* 5. Component tokens */
  --link: var(--sc-blue);
  /* WORKFLOW_STATUS_COLOR.pending — text + bg flip per theme.
     Light: default text color (var(--text), the "no color" /
     ungrouped look) on the same 10%-alpha gray the cancelled
     chip derives.
     Dark: white text on 10%-alpha white (the "transparent white"
     against dark chrome). */
  --chip-pending-text: var(--text);
  --chip-pending-bg: color-mix(in srgb, var(--neutral) 10%, transparent);
  /* Filled-button background that contrasts against alternating list
     rows (surface + surface2). Light theme: a step darker than both
     row colours. Dark theme override below uses a step lighter, since
     dark rows are already near-black and need to recede. */
  --btn-fill:#bfb9ab; --btn-fill-hover:#a7a094;
  /* Left-menu (Products column + sub-menu) inactive item color.
     Light: full near-black brand color so nav items read crisp, not
     gray. The dark override below keeps the prior 50%-alpha cream. */
  --nav-item:#231a15;

  /* 6. Layout (shared chrome geometry; not colour) */
  --sidebar-w:52px; --sidebar-w-open:200px;
  /* The space after a scrolling page's last card, so the page never stops
     right at its end (owner, 2026-11-01: "i want to make sure we have that
     constant for this app and also the boo web/desktop app"): the Access
     Portal's (login.yotta.bot styles.css, held equal by its page test),
     Identity's (its copy) and Boo's Settings pages'. */
  --scroll-end:80px;
  /* The space between tabs and what they show (owner, 2026-11-02: "we should
     standardize across all those"): the Access Portal's Home and Identity's
     record pages, and Boo's Settings tabs. */
  --tabs-gap:20px;
}
[data-theme="dark"] {
  --bg:#231a15; --bg2:#2f2621; --bg3:#3b322c;
  --surface:#2f2621; --surface2:#3b322c;
  --border:rgba(251,246,228,0.10); --border-strong:rgba(251,246,228,0.22);
  --text:#fbf6e4; --text2:#cbc5b6; --text3:#837c71;
  --accent:var(--sc-yellow);
  --hbg:#231a15; --htxt:#fbf6e4; --chrome-rgb:251,246,228;
  --chip-pending-text: #ffffff;
  --chip-pending-bg: color-mix(in srgb, #ffffff 10%, transparent);
  /* See --btn-fill note above — dark theme steps lighter than both
     surface (#2f2621) and surface2 (#3b322c) so filled buttons stand
     proud of either row. */
  --btn-fill:#6b635a; --btn-fill-hover:#837c71;
  /* Matches the inline default this replaced: 50%-alpha cream on dark chrome. */
  --nav-item:rgba(var(--chrome-rgb),0.5);
}
/* <<< YOTTA DESIGN TOKENS */

:root,
[data-theme="dark"] {
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Ubuntu, Cantarell, 'Noto Sans', sans-serif;
  /* One typeface, as in Boo: the landing's display and mono faces become Plex Sans here. */
  --display: var(--font-sans);
  --sans: var(--font-sans);
  --mono: var(--font-sans);
  --app-action: var(--sc-green);
  /* The green buttons' text (owner, 2026-10-27): light in light mode, dark
     in dark mode (below). */
  --app-on-action: #fbf6e4;
  /* /styles.css uses --accent for hovers and marks: Boo's action green, not the token's red. */
  --accent: var(--app-action);
  --radius-s: 6px;
  --radius-m: 10px;
}

[data-theme="dark"] { --app-on-action: #231a15; }

body[data-page^="careers"],
body[data-page^="news"] {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* ── Header: the logo and logotype, the color bar and the theme switch only ── */
/* The Access Portal's switch (src/yotta-login/frontend/styles.css .theme-toggle). */
.site-header .theme-toggle {
  background: var(--bg2);
  border: 1px solid rgba(var(--chrome-rgb), 0.15);
  border-radius: 4px;
  padding: 6px 15px;
  color: rgba(var(--chrome-rgb), 0.6);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.02em;
  line-height: normal;
  white-space: nowrap;
}
.site-header .theme-toggle:hover {
  color: var(--htxt);
  border-color: rgba(var(--chrome-rgb), 0.15);
}

/* ── Buttons: Boo's .primary-btn and .secondary-btn ───────────── */
.careers .cta-secondary {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-s);
  background: var(--app-action);
  color: var(--app-on-action) !important;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}
.careers .cta-secondary:hover {
  background: var(--app-action);
  color: var(--app-on-action) !important;
  filter: brightness(0.95);
}

/* ── Page body: a Greenhouse job board's one 900px column, between the
   landing's header and footer ────────────────────────────────── */
.careers {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 24px 64px;
}
.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;
}
.careers h1 {
  font-family: var(--font-sans);
  font-size: clamp(30px, 4.5vw, 44px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-bottom: 16px;
}
.careers h2,
.careers h3 { font-family: var(--font-sans); font-weight: 600; }
.careers .lede {
  color: var(--text2);
  max-width: 52ch;
  margin-bottom: 48px;
}

/* ── Controls ─────────────────────────────────────────────────── */
.careers-controls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.careers select,
.careers input[type="text"],
.careers input[type="email"],
.careers input[type="tel"],
.careers input[type="url"],
.careers input[type="search"] {
  /* Boo's .rename-input. */
  box-sizing: border-box;
  height: 36px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  padding: 0 10px;
  outline: none;
  transition: border-color 0.15s;
}
/* careers.js puts our dropdown in front of every select. Should a select ever
   show by itself, it still isn't the browser's: no native arrow, and our
   chevron inset as .select-chevron is (owner, 2026-11-05). */
.careers select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%235f574f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
}
[data-theme="dark"] .careers select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23cbc5b6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.careers select:focus,
.careers input:focus { border-color: var(--text2); outline: none; }
.careers input::placeholder { color: var(--text3); }
.careers-controls select { min-width: 200px; }
.careers-controls input[type="search"] { flex: 1 1 240px; max-width: 360px; }

/* ── Team list ────────────────────────────────────────────────── */
.roles-count { margin: 0 0 16px; font-size: 32px; font-weight: 700; color: var(--text); }

.roles-head,
.team-row,
.role-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.1fr) 2fr minmax(140px, 0.9fr) 64px;
  gap: 16px;
  align-items: center;
}
/* The column names as the Access Portal's tables have them (login's
   .acct-table th, owner 2026-10-27): bold 12px in their own Title Case. */
.roles-head {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  padding: 0 0 12px;
  border-bottom: 1px solid var(--border);
}
/* A divider between the named columns, as between the Access Portal's
   (login's .acct-table thead th::after): centred in the gap, a little taller
   than the names and clear of the line beneath. None beside the + column. */
.roles-head > span { position: relative; }
.roles-head > span:nth-child(-n+2)::after {
  content: '';
  position: absolute;
  right: -8px;
  top: -1px;
  bottom: -1px;
  width: 1px;
  background: var(--border-strong);
}
.team-group { border-bottom: 1px solid var(--border); }
.team-row {
  cursor: pointer;
  list-style: none;
  padding: 22px 0;
}
.team-row::-webkit-details-marker { display: none; }
.team-name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.team-count {
  grid-column: 3;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text3);
}
.team-toggle {
  grid-column: 4;
  justify-self: end;
  width: 14px;
  height: 14px;
  position: relative;
}
.team-toggle::before,
.team-toggle::after {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 2px;
  background: var(--text2);
  transition: transform 0.2s var(--ease);
}
.team-toggle::after { transform: rotate(90deg); }
.team-group[open] .team-toggle::after { transform: rotate(0deg); }
.team-row:hover .team-name { color: var(--app-action); }

.role-list { padding-bottom: 12px; }
.role-row {
  padding: 14px 0;
  border-top: 1px solid var(--border);
}
.role-title {
  grid-column: 2;
  text-decoration: none;
  font-weight: 500;
}
.role-location {
  grid-column: 3;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text2);
}
.role-apply {
  grid-column: 4;
  justify-self: end;
  /* Boo's .secondary-btn, small. */
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  padding: 5px 12px;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
/* The page's colour at rest. Under the pointer it inverts, dark in light mode
   and cream in dark mode, as the careers landing's outlined buttons do (owner,
   2026-11-05). */
.role-apply:hover {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

.careers-status {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--text2);
  padding: 32px 0;
}

/* ── A role's page, laid out as a Greenhouse job post ─────────── */
.job-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  line-height: 24px;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-bottom: 32px;
}
.job-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.careers .job-title-row h1 {
  font-size: 32px;
  line-height: 40px;
  margin: 0;
}
.job-location {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
  font-size: 16px;
  line-height: 24px;
  color: var(--text);
}
.job-apply { flex: none; }
.job-description {
  margin: 40px 0 0;
  font-size: 16px;
  line-height: 24px;
}
.job-description p { margin: 16px 0; }
.job-description h1,
.job-description h2,
.job-description h3 {
  font-size: 24px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 20px 0;
}
/* The sections every role shares: About above the role's own text, the rest
   after it. One flow, as on a Greenhouse post. */
.job-about + .job-description,
.job-company { margin-top: 0; }
/* Bullets sit indented from the headings above them, not in line with them
   (owner, 2026-10-27). */
.job-description ul,
.job-description ol {
  padding-left: 40px;
  margin: 16px 0;
}
.job-description ul { list-style: disc; }
.job-description ol { list-style: decimal; }
.job-description li { margin: 0; }
.job-description a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
/* /styles.css spaces paragraphs; the title block's lines sit tight. */
.job-title-row p { margin: 0; }
/* Under the location line, in the same type. */
.job-pay {
  padding-top: 4px;
  font-size: 16px;
  line-height: 24px;
  color: var(--text);
}
.job-pay-label { font-weight: 500; }
.divider { height: 1px; background: var(--border); margin: 32px 0; }

/* ── Application form, Greenhouse's: one field per row, each a filled box
   holding its label ─────────────────────────────────────────────── */
.careers section.apply { margin: 0; padding: 0; max-width: none; }
.careers .apply h2 { font-size: 24px; line-height: 32px; font-weight: 400; margin: 0; }
.apply-required { font-size: 14px; color: var(--text2); margin: 8px 0 24px; }
.required { color: var(--sc-red); margin-left: 2px; }
#apply-form { display: flex; flex-direction: column; gap: 16px; }
.field { margin: 0; }
.field-box {
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  transition: border-color 0.15s;
}
.field-box:focus-within { border-color: var(--border-strong); }
.field-box label {
  display: block;
  padding: 8px 16px 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.careers .field-box input,
.careers .field-box select {
  display: block;
  width: 100%;
  height: auto;
  padding: 2px 16px 8px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  font-size: 16px;
  line-height: 24px;
}
.careers .field-box select {
  cursor: pointer;
  padding-right: 40px;
  background-position: right 16px top 6px;
}
.careers .field-box textarea {
  display: block;
  width: 100%;
  min-height: 96px;
  padding: 4px 16px 8px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  resize: vertical;
  outline: none;
}
/* ── Our dropdown (careers.js styledSelect): a button and a listbox in front
   of the hidden native select ─────────────────────────────────── */
.select { position: relative; }
.select-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 2px 16px 8px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  text-align: left;
  cursor: pointer;
}
.select-button.is-placeholder .select-value { color: var(--text3); }
.select-chevron { flex: none; color: var(--text2); transition: transform 0.15s; }
.select-button[aria-expanded="true"] .select-chevron { transform: rotate(180deg); }
.select-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  max-height: 280px;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-m);
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(35, 26, 21, 0.16);
  outline: none;
}
.select-list li {
  position: relative;
  padding: 7px 12px;
  border-radius: var(--radius-s);
  font-size: 15px;
  line-height: 22px;
  color: var(--text);
  cursor: pointer;
}
/* Picked and pointed-at items as Boo's left panel draws its rows (owner,
   2026-10-27; desktop .session-row): a faint wash, and the chosen one a
   little stronger, bold, with a short green bar inset from its ends. */
.select-list li.is-active { background: rgba(var(--chrome-rgb), 0.04); }
.select-list li[aria-selected="true"] { background: rgba(var(--chrome-rgb), 0.08); font-weight: 600; }
.select-list li[aria-selected="true"]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 2px;
  background: var(--sc-green);
}
/* Standing alone (the team filter), the button is the box. */
.careers-controls .select { min-width: 200px; }
.careers-controls .select-button {
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  /* The page's colour, inverted under the pointer (owner, 2026-11-04): dark
     with cream words in light mode, cream with dark words in dark mode. */
  background: var(--bg);
  font-size: 13.5px;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.careers-controls .select-button:hover {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}
.careers-controls .select-button:hover .select-value,
.careers-controls .select-button:hover .select-chevron { color: inherit; }
/* Before the teams load, the native select stands in: the page's colour too. */
.careers-controls select { background-color: var(--bg); }
/* The roles search and the teams list are the Access Portal's lightest
   colour in light mode (its --lift, #fdf9ee; owner, 2026-11-04); dark mode
   keeps --surface. */
.careers-controls { --controls-lift: #fdf9ee; }
[data-theme="dark"] .careers-controls { --controls-lift: var(--surface); }
.careers-controls input[type="search"],
.careers-controls .select-list { background: var(--controls-lift); }

/* A question's own words under its label (AI Policy, Why YottaBot?, the
   role's question, the Session ID's prompt). */
.field-help {
  padding: 4px 16px 0;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--text2);
}
.field-help a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.field-question p { margin: 0 0 8px; }
.word-count { padding: 0 16px 8px; margin: 0; font-size: 13px; color: var(--text3); text-align: right; }
.word-count.is-over { color: var(--sc-red); }
/* The Session ID's label and its (i): the bubble shows on hover or focus. */
.label-row { display: flex; align-items: center; gap: 6px; padding: 8px 16px 0; }
.label-row label { padding: 0; }
.info-tip { position: relative; display: inline-flex; }
.info-tip-button {
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--text2);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 14px;
  /* The page's ordinary arrow, not a hand or help cursor (owner, 2026-10-27). */
  cursor: default;
}
.info-tip-bubble {
  /* Opens rightward from the (i), which sits near the box's left edge. */
  position: absolute;
  left: -8px;
  bottom: calc(100% + 8px);
  z-index: 5;
  width: max-content;
  max-width: min(320px, 80vw);
  padding: 8px 10px;
  border-radius: var(--radius-s);
  background: var(--text);
  color: var(--bg);
  font-size: 13px;
  line-height: 18px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.info-tip:hover .info-tip-bubble,
.info-tip-button:focus + .info-tip-bubble { visibility: visible; opacity: 1; }
.field-label { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.file-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.file-name { font-size: 14px; color: var(--text2); overflow-wrap: anywhere; }
/* Boo's .secondary-btn. */
.secondary-btn {
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
/* Attach looks as a role's Apply does (owner, 2026-11-05): the page's colour,
   inverted under the pointer. A field with an error keeps its red border. */
.secondary-btn:hover {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}
.field-hint { font-size: 14px; color: var(--text2); margin: 8px 0 0; }
.field-error {
  font-size: 14px;
  font-weight: 500;
  color: var(--sc-red);
  margin: 6px 0 0;
}
.field-error:empty { display: none; }
.field.has-error .field-box { border-color: var(--sc-red); }
.field.has-error .secondary-btn { border-color: var(--sc-red); }
.choice {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
}
/* Our checkbox (owner, 2026-10-27): green when ticked, its check light in
   light mode and dark in dark mode, as the green buttons' text is. */
.choice input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  flex: none;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--surface) center / 12px 12px no-repeat;
  cursor: pointer;
}
.choice input[type="checkbox"]:checked {
  border-color: var(--app-action);
  background-color: var(--app-action);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fbf6e4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme="dark"] .choice input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23231a15' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.field.has-error .choice input[type="checkbox"] { border-color: var(--sc-red); }
/* A session's consent sits right under its Session ID box. */
.consent-field { margin-top: -8px; }
.consent-field .choice { font-size: 14px; line-height: 20px; color: var(--text2); }
.choice a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* The honeypot: never shown, never focused. */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.apply button[type="submit"] { align-self: flex-start; cursor: pointer; margin-top: 8px; }
.apply button[type="submit"]:disabled { cursor: progress; filter: none; background: var(--border-strong); color: var(--text2) !important; }
.apply-notice {
  font-size: 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  padding: 14px 16px;
}
.apply-done {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-m);
  padding: 32px;
  background: var(--surface);
}
.apply-done h3 { font-size: 22px; margin-bottom: 10px; }
.apply-done p { margin: 0; color: var(--text2); }

/* The application's inputs in light mode (owner, 2026-11-04): the Access
   Portal's lightest colour, its --lift (#fdf9ee), a step lighter than the
   page, for each field's box, its dropdown and an unticked checkbox. Dark mode
   keeps --surface. */
.apply { --apply-input: #fdf9ee; }
[data-theme="dark"] .apply { --apply-input: var(--surface); }
.apply .field-box,
.apply .select-list,
.apply .choice input[type="checkbox"]:not(:checked) { background-color: var(--apply-input); }
/* Every field has a border (owner, 2026-11-04), as the Attach buttons and
   checkboxes do; it darkens while you type in it, and a field with an error
   keeps its red one. */
.apply .field-box { border-color: var(--border-strong); }
.apply .field:not(.has-error) .field-box:focus-within { border-color: var(--text2); }

@media (max-width: 800px) {
  .roles-head { display: none; }
  .team-row { grid-template-columns: 1fr auto 20px; }
  .team-count { grid-column: 2; }
  .team-toggle { grid-column: 3; }
  .role-row {
    grid-template-columns: 1fr auto;
    row-gap: 4px;
  }
  .role-title { grid-column: 1; }
  .role-location { grid-column: 1; grid-row: 2; }
  .role-apply { grid-column: 2; grid-row: 1 / span 2; }
  .careers-controls select,
  .careers-controls input[type="search"] { flex: 1 1 100%; max-width: none; }
}

/* Phones: Apply drops under the title. Wider, it stays on the right, as on
   Greenhouse. */
@media (max-width: 480px) {
  .job-title-row { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ── /careers/ai-guidance ─────────────────────────────────────── */
.guidance-copy .guidance-prompt {
  padding: 10px 14px;
  border-left: 3px solid var(--app-action);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  background: var(--surface);
  color: var(--text2);
}
/* Where a Session ID is (owner, 2026-11-04): Boo's message box, the ID
   outlined in red. Captured at 2x from Boo Desktop's browser preview with a
   sample session; shown at half its pixels. */
.guidance-shot { margin: 16px 0 24px; }
.guidance-shot img {
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-m);
}
.guidance-table-wrap { overflow-x: auto; margin: 16px 0; }
.guidance-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.guidance-table th,
.guidance-table td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.guidance-table th { font-weight: 600; color: var(--text2); font-size: 13px; }

/* The privacy notice's box stands apart from the session consents above it
   (owner, 2026-10-27), so no one reads those as required. */
.privacy-divider { margin: 8px 0; }
/* The words between the legal questions: the Agreement to Arbitrate and the
   self-identification notes. */
.form-copy { font-size: 14px; line-height: 22px; color: var(--text2); }
.careers .form-copy h3 { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--text); margin: 8px 0 8px; }
.form-copy p { margin: 0 0 12px; }
.form-copy p:last-child { margin-bottom: 8px; }
.form-copy ul { margin: 0 0 8px; padding-left: 20px; }
.form-copy li { margin-bottom: 6px; }
.form-copy strong { font-weight: 600; color: var(--text); }
.form-copy a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.self-id { display: flex; flex-direction: column; gap: 16px; }
.self-id-definitions summary {
  list-style: none;
  width: fit-content;
  cursor: pointer;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.self-id-definitions summary::-webkit-details-marker { display: none; }
.self-id-definitions[open] summary { margin-bottom: 8px; }
.careers summary:focus-visible { outline: 1px solid var(--focus-ink); outline-offset: 2px; }