/* Skill Lagoon - app styles.
 *
 * Sections: tokens · base · layout · header · welcome · controls · banners
 *         · stats · insights · chips + tooltips · skills · states · busy
 *         · print · ask
 *
 * Light default is Digital Calm (cool ice/lavender tint + mid blue accent).
 * Dark is opt-in only when the toggle stamps data-theme="dark". Every
 * colour is defined on bare :root; the dark block only ever *overrides*.
 */

/* ------------------------------------------------------------- fonts */

/* Inter (UI sans) + IBM Plex Mono/Serif, self-hosted from
 * src/app/static/fonts/ so no request leaves for fonts.googleapis.com.
 * Latin and latin-ext subsets only; unicode-range loads latin-ext only
 * when needed. Inter variable covers 100–900. Licensed OFL 1.1 — see
 * fonts/LICENSE.txt. Missing files fall back via the token stacks.
 */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-serif-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-serif-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

:root {
  color-scheme: light;

  /* Digital Calm on white canvas (accent/ink stay cool blue-navy). */
  --bg: #ffffff;
  --bg-glow-1: #f3f6fb;
  --bg-glow-2: #f5f3fa;

  --ink: #1e2a44;
  --ink-soft: #3d4a62;
  --muted: #6b7a8c;
  --faint: #9aa5b5;

  --line: #d5dce8;
  --line-strong: #b8c4d4;

  --card: #ffffff;
  --card-inset: #f7f9fc;
  --panel: #ffffff;

  --accent: #4a80dc;
  --accent-hover: #3a6bc4;
  /* Slightly softer blue for kickers / eyebrows; CTAs keep --accent. */
  --accent-warm: #5b8fd4;
  --accent-soft: #e4ecf8;
  --accent-on: #ffffff;

  /* Brand lockup: filled lagoon-wave mask + dual-weight wordmark. */
  --brand-skill: #1e2a44;
  --brand-lagoon: #4a80dc;
  --brand-mark: #4a80dc;

  --track: #e2e8f0;

  --warn-bg: #f9f1da;
  --warn-ink: #6a5210;
  --warn-line: #e5d6a8;

  --err-bg: #fce9e7;
  --err-ink: #8a2020;
  --err-line: #eec6c1;

  --tier-core: #4a80dc;
  --tier-common: #7a9fd8;
  --tier-emerging: #b0c4e8;

  --shadow-1: 0 1px 2px rgb(30 42 68 / 5%), 0 2px 8px rgb(30 42 68 / 5%);
  --shadow-2: 0 8px 28px rgb(30 42 68 / 10%);
  --shadow-pop: 0 12px 32px rgb(30 42 68 / 16%);

  --radius: 16px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  /* Explore panels and tiles: a wider curve than the 16px cards. */
  --radius-lg: 24px;

  /* Self-hosted Inter (Digital Calm hero / app UI). Mono + serif stay Plex. */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --serif: "IBM Plex Serif", ui-serif, Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Dark is opt-in only: the app defaults to light regardless of the OS
 * setting, and these tokens apply solely when the toggle has stamped
 * data-theme="dark" on the root (persisted in localStorage). */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0e1219;
  --bg-glow-1: #152033;
  --bg-glow-2: #1a1830;

  --ink: #e8eef6;
  --ink-soft: #c2cad8;
  --muted: #8b96a8;
  --faint: #6a7588;

  --line: #252d3c;
  --line-strong: #364155;

  --card: #161c28;
  --card-inset: #121722;
  --panel: #141a26;

  --accent: #6b9beb;
  --accent-hover: #89b0f0;
  --accent-soft: #1a2a48aa;
  --accent-on: #0a1424;

  --brand-skill: #e8eef6;
  --brand-lagoon: #8bb4eb;
  --brand-mark: #8bb4eb;

  --track: #222a38;

  --warn-bg: #2e2712;
  --warn-ink: #e8d59a;
  --warn-line: #4a3f1c;

  --err-bg: #331b1a;
  --err-ink: #f0b7b1;
  --err-line: #552a27;

  --tier-core: #6b9beb;
  --tier-common: #4a80dc;
  --tier-emerging: #2f5fa8;

  --accent-warm: #8bb4eb;

  --shadow-1: 0 1px 2px rgb(0 0 0 / 30%), 0 2px 8px rgb(0 0 0 / 20%);
  --shadow-2: 0 8px 28px rgb(0 0 0 / 35%);
  --shadow-pop: 0 12px 32px rgb(0 0 0 / 50%);
}

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

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* The UA rule for [hidden] is display:none, which any author display rule
 * silently beats - and several elements toggled from JS are flex/grid.
 * Make the attribute authoritative instead of patching it per selector. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Keep width stable when a scrollbar appears (nav between pages). */
  scrollbar-gutter: stable;
}

/* Same zoomed-in scale on Overview AND Explore (whole page).
 * Live FastAPI keeps this. Static export opts out — file:// / Render
 * static at 100% browser zoom otherwise reads far more zoomed-in than
 * a typical local uvicorn tab.
 * Kick in below 1280 so laptop Explore windows get the filled look too. */
@media (min-width: 900px) {
  html {
    zoom: 1.35;
  }
}

@media (min-width: 1280px) {
  html {
    zoom: 1.55;
  }
}

@media (min-width: 1600px) {
  html {
    zoom: 1.95;
  }
}

html[data-static-export] {
  zoom: 1;
}

body {
  margin: 0;
  min-height: 100vh;
  /* Safety net against any stray wide descendant. `clip`, not `hidden`:
   * hidden would create a scroll container and break the sticky controls
   * bar. Tooltips are the usual culprit and are handled at source below. */
  overflow-x: clip;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  /* Inter: enable contextual alternates (Chrome default-off quirk). */
  font-feature-settings: "liga" 1, "calt" 1;
}

:where(a) {
  color: var(--accent);
}

:where(h1, h2, h3, h4) {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

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

.muted {
  color: var(--muted);
  font-weight: 400;
}

code {
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--card-inset);
  font-family: var(--mono);
  font-size: 0.85em;
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -3rem;
  z-index: 200;
  padding: 0.55rem 0.9rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--accent);
  color: var(--accent-on);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  transition: top 0.15s var(--ease);
}

.skip-link:focus {
  top: 0;
}

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

/* ---------------------------------------------------------------- layout */

/* Cohesive column (not full-bleed stretch). Page zoom lives on html so
 * welcome and role profiles stay identical when switching nav. */
main {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
  box-sizing: border-box;
}

body.ask-open:not(.ask-minimized) main {
  padding-bottom: max(5rem, min(38rem, 52vh));
}

body.ask-open.ask-minimized main {
  padding-bottom: 5.5rem;
}

.section {
  margin: 0 0 1.5rem;
}

/* Explicit two-column grid: the heading and its trailing controls share row
 * one and are centred against each other; the subtitle spans row two. Doing
 * this with flex cross-axis alignment misaligns as soon as the left column
 * is taller than the controls. */
.section-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 1.25rem;
  row-gap: 0.25rem;
  margin: 0 0 0.85rem;
}

.section-head > h2 {
  grid-column: 1;
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.3;
}

.section-head > .header-actions,
.section-head > .result-count {
  grid-column: 2;
  justify-self: end;
}

.section-head > .section-sub {
  grid-column: 1 / -1;
  grid-row: 2;
}

.section-sub {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1rem 1.15rem;
  box-shadow: var(--shadow-1);
}

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

.site-header {
  margin: 0 0 1.75rem;
}

.site-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem 1.25rem;
  min-height: 3.25rem;
  padding: 0.35rem 0 0.85rem;
  border-bottom: 1px solid var(--line);
}

.site-nav .brand-link {
  justify-self: start;
  gap: 0.65rem;
}

.site-nav .brand-mark {
  width: 2.55rem;
  height: 1.4rem;
}

.site-nav .brand-wordmark {
  font-size: 1.28rem;
  line-height: 1;
}

.site-nav-mid {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  gap: 0.15rem;
}

.site-nav-link {
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 550;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition:
    color 0.15s var(--ease),
    background 0.15s var(--ease);
}

.site-nav-link:hover {
  color: var(--ink);
  background: var(--card-inset);
}

.site-nav-link.is-active {
  color: var(--ink);
  background: var(--accent-soft);
  font-weight: 650;
}

.site-nav-end {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 0.45rem;
}

.site-nav-auth {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 0.25rem;
}

.page-lede {
  margin: 0.85rem 0 0;
  max-width: 42rem;
}

/* Mark + wordmark are a single link back to the overview. */
.brand-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  border-radius: 12px;
}

.brand-link:focus-visible {
  outline: 2px solid var(--brand-lagoon);
  outline-offset: 3px;
}

.brand-mark {
  display: block;
  flex: 0 0 auto;
  width: 3rem;
  height: 1.65rem;
  background-color: var(--brand-mark);
  -webkit-mask-image: url("brand/lagoon-mark.png");
  mask-image: url("brand/lagoon-mark.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.brand-wordmark {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.28em;
  margin: 0;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.lede {
  margin: 0.3rem 0 0;
  max-width: 40rem;
  font-size: 0.92rem;
  color: var(--muted);
}

/* Legacy aliases kept so older print / section rules still resolve. */
.page-header,
.header-actions,
.page-nav {
  /* no-op shells if referenced elsewhere */
}

@media (max-width: 900px) {
  .site-nav {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand end"
      "mid mid";
    row-gap: 0.55rem;
  }

  .site-nav .brand-link {
    grid-area: brand;
  }

  .site-nav-mid {
    grid-area: mid;
    justify-self: start;
    overflow-x: auto;
    max-width: 100%;
    padding-bottom: 0.15rem;
  }

  .site-nav-end {
    grid-area: end;
  }
}

@media (max-width: 560px) {
  .site-nav-auth .nav-login {
    display: none;
  }

  .chat-toggle-label {
    display: none;
  }
}

/* --------------------------------------------------------------- welcome */

/* Standalone welcome page (no controls, no profile): the pitch, the pipeline
 * illustration, then "Let's start". Every colour is a token, so dark needs no
 * overrides. */
.welcome {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
  width: 100%;
  max-width: none;
  margin: 0.75rem 0 0;
  padding-bottom: 5rem;
}

/* Hero: copy + feature chips + CTAs | overlapping product shots. */
.welcome-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem 3rem;
  width: 100%;
  padding: 0.5rem 0 1.25rem;
}

.welcome-head {
  display: flex;
  flex: 1 1 22rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  max-width: 34rem;
  text-align: left;
}

.welcome-kicker {
  display: block;
  margin: 0;
  padding-bottom: 0.375rem;
  color: var(--accent-warm);
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
}

.welcome-title {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(2.15rem, 1.5rem + 2.2vw, 3.35rem);
  font-weight: 750;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--ink);
}

.welcome-lede {
  margin: 0;
  max-width: 32rem;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 1.08rem;
  font-weight: 400;
  line-height: 1.55;
}

.welcome-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.15rem 0 0;
  padding: 0;
  list-style: none;
}

.welcome-feature-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 550;
  line-height: 1.2;
  box-shadow: var(--shadow-1);
}

.welcome-feature-chip svg {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--accent);
  flex: 0 0 auto;
}

.welcome-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 0.35rem;
}

.welcome-how-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  padding: 0.85rem 1.35rem;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  background: #ffffff;
  color: var(--accent);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: none;
  transition:
    background 0.15s var(--ease),
    color 0.15s var(--ease),
    border-color 0.15s var(--ease),
    transform 0.15s var(--ease);
}

.welcome-how-link:hover {
  background: var(--accent-soft);
  border-color: var(--accent-hover);
  color: var(--accent-hover);
  transform: translateY(-1px);
}

.welcome-how-link svg {
  width: 1.05rem;
  height: 1.05rem;
}

.welcome-hero-shots {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: min(28rem, 46vw);
  min-height: 22rem;
  margin-left: 0;
}

.welcome-shot {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 15.5rem;
  height: auto;
  background: transparent;
  border: none;
  border-radius: 1.35rem;
  box-shadow:
    0 18px 40px rgb(30 42 68 / 12%),
    0 2px 8px rgb(30 42 68 / 6%);
  overflow: hidden;
}

.welcome-shot img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: top center;
  border-radius: 1.35rem;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  background: var(--card);
}

.welcome-shot.is-back {
  left: 0;
  top: 1.75rem;
  z-index: 1;
  transform: rotate(-4deg);
}

.welcome-shot.is-front {
  right: 0;
  top: 0;
  z-index: 2;
  transform: rotate(5deg);
}

.welcome-pipeline {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  scroll-margin-top: 1.5rem;
}

.welcome-how {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}

.welcome-how-title {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.welcome-feature {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  width: 100%;
}

.welcome-feature-copy {
  flex: 0 1 22rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 22rem;
}

.welcome-feature-title {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.25;
}

.welcome-feature-lede {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.5;
}

.welcome-feature-browse .welcome-feature-lede {
  color: var(--ink-soft);
  font-size: 0.875rem;
  line-height: 1.55;
}

.welcome-feature-card {
  flex: 0 1 26rem;
  max-width: 26rem;
}

.welcome-browse-shot {
  flex: 0 1 36rem;
  margin: 0;
  max-width: 36rem;
  border: 8px solid rgb(23 28 25 / 4%);
  border-radius: var(--radius);
  box-shadow: 0 4px 4px rgb(0 0 0 / 25%);
  overflow: hidden;
}

.welcome-browse-shot img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: top left;
  filter: grayscale(1);
}

.welcome-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 1.25rem;
  max-width: 60rem;
  margin: 0 auto;
  width: 100%;
}

/* Label for the comparison, which sits below Normalising. */
.welcome-why {
  margin: 0;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}

.welcome-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.welcome-card {
  padding: 0.95rem 1.05rem 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    border-color 0.25s var(--ease);
}

.welcome-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.welcome-card.is-ours {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent-soft) 60%, var(--card)),
      var(--card) 72%
    );
  box-shadow: var(--shadow-2);
}

.welcome-card-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.55rem;
  font-size: 0.84rem;
  font-weight: 600;
}

.welcome-card-mark {
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}

.welcome-card-mark.plain {
  background: var(--track);
  color: var(--muted);
}

.welcome-card-mark.is-logo {
  width: 1.85rem;
  height: 1.05rem;
  border-radius: 0;
  background-color: var(--brand-mark);
  -webkit-mask-image: url("brand/lagoon-mark.png");
  mask-image: url("brand/lagoon-mark.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.welcome-card-mark svg {
  width: 0.95rem;
  height: 0.95rem;
}

.welcome-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.welcome-list li {
  position: relative;
  margin: 0.32rem 0;
  padding-left: 1rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.welcome-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line-strong);
}

.welcome-card.is-ours .welcome-list li::before {
  background: var(--accent);
}

/* --- the pipeline illustration ---
 * Three stages in a row: source, extract, profile. Normalising is a
 * separate feature block below. Every part is drawn in markup so the
 * labels stay real text and follow theme tokens into dark mode. */

.pl-stages {
  --pl-gap: 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pl-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pl-stage {
  position: relative;
  display: flex;
  min-width: 0;
}

.pl-card {
  container-type: inline-size;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: 1.15rem 1.25rem 1.05rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

.pl-arrow {
  position: absolute;
  top: 50%;
  left: calc(100% + var(--pl-gap) / 2);
  width: 16px;
  color: var(--faint);
  transform: translate(-50%, -50%);
}

.pl-arrow svg {
  display: block;
  width: 100%;
}

.pl-top {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin: 0 0 0.6rem;
}

.pl-num {
  color: var(--accent-warm);
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.pl-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.pl-title {
  margin: 0 0 1.15rem;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: -0.005em;
}

/* The art block absorbs the height difference between the four cards, so
 * the footers line up across the row whatever each stage draws. */
.pl-art {
  display: flex;
  flex: 1;
  align-items: center;
  min-height: 10.5rem;
}

.pl-foot {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 1.9rem;
  margin: 1.2rem 0 0;
}

.pl-foot.is-end {
  justify-content: flex-end;
}

.pl-pill {
  padding: 0.35rem 0.8rem;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --- shared listing rows --- */

.pl-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.pl-row-boxed {
  padding: 0.55rem 0.65rem;
  background: var(--card-inset);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 4px);
}

.pl-row-mark {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 20px;
  height: 20px;
  background: var(--mark, var(--accent));
  color: #fff;
  border-radius: 6px;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
}

.pl-row-mark.is-kept {
  background: var(--accent);
}

.pl-row-mark.is-kept svg {
  width: 14px;
  height: 14px;
}

.pl-row-mark.is-avatar {
  width: 28px;
  height: 28px;
  background: var(--accent-soft);
  color: var(--muted);
  border-radius: 8px;
}

.pl-row-mark.is-avatar svg {
  width: 17px;
  height: 17px;
}

.pl-row-text {
  display: block;
  min-width: 0;
}

.pl-row-title {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pl-row-title.is-lg {
  font-size: 0.9rem;
}

.pl-row-meta {
  display: block;
  overflow: hidden;
  margin-top: 0.1rem;
  color: var(--faint);
  font-size: 0.72rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* --- 01 source --- */

.pl-art-source {
  gap: 1rem;
}

.pl-src-list {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pl-src {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 500;
}

.pl-src.is-more {
  color: var(--faint);
  font-size: 0.76rem;
  font-weight: 400;
}

.pl-src-mark {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 20px;
  height: 20px;
  background: var(--mark, var(--accent));
  color: #fff;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1;
}

.pl-src-mark.is-more {
  width: 16px;
  height: 16px;
  margin-left: 2px;
  background: var(--track);
  color: var(--faint);
}

/* The layers behind the stack lean left, so it carries its own clearance
 * from the source list rather than overlapping it. */
.pl-stack {
  position: relative;
  flex: 1;
  min-width: 0;
  margin-left: 1.1rem;
}

.pl-layer {
  position: absolute;
  inset: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 4px);
}

.pl-layer-1 {
  transform: translate(-7px, 7px);
}

.pl-layer-2 {
  transform: translate(-14px, 14px);
}

.pl-stack-card {
  position: relative;
  display: grid;
  /* minmax(0) so long titles ellipsize instead of widening the card. */
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem;
  padding: 0.7rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 4px);
  box-shadow: var(--shadow-1);
}

/* --- normalise (feature card) --- */

.pl-art-merge {
  gap: 0.35rem;
  width: 100%;
}

.pl-dupes {
  display: grid;
  flex: 1;
  gap: 0.6rem;
  min-width: 0;
}

.pl-dupes .pl-row-boxed {
  height: 52px;
}

.pl-dupes .is-dim {
  opacity: 0.62;
}

.pl-dupes .is-dimmer {
  opacity: 0.38;
}

.pl-links {
  flex: 0 0 46px;
  align-self: center;
  color: var(--tier-common);
}

.pl-links.is-faint {
  flex-basis: 36px;
  color: var(--tier-emerging);
}

/* The kept card carries a second line of its own, so it needs slightly
   more of the row than the duplicates feeding into it. */
.pl-merged {
  display: flex;
  flex: 1.1;
  align-items: center;
  min-width: 0;
}

.pl-merged .pl-row-boxed {
  width: 100%;
  min-height: 52px;
}

.pl-tally {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}

.pl-tally-arrow {
  width: 15px;
  color: var(--faint);
}

.pl-tally-arrow svg {
  display: block;
  width: 100%;
}

.pl-rule {
  width: 1px;
  height: 15px;
  background: var(--line-strong);
}

.pl-tally-note {
  color: var(--muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

/* --- 02 extract --- */

.pl-art-extract {
  gap: 0.25rem;
  width: 100%;
}

.pl-jd {
  flex: 1 1 58%;
  min-width: 0;
  padding: 0.75rem;
  background: var(--card-inset);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 3px);
}

.pl-jd-head {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}

.pl-jd-mark {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--faint);
}

.pl-jd-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.pl-jd-title {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pl-jd-kicker {
  display: block;
  margin-top: 0.1rem;
  color: var(--faint);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.pl-jd-body {
  margin: 0.6rem 0 0;
  color: var(--ink-soft);
  font-size: 0.72rem;
  line-height: 1.65;
}

.pl-term {
  padding: 0.05rem 0.18rem;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 4px;
  font-weight: 500;
}

.pl-found {
  display: grid;
  flex: 0 1 auto;
  min-width: 0;
  align-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pl-chip {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 500;
  white-space: nowrap;
}

.pl-chip svg {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
}

/* --- 03 profile --- */

.pl-panel {
  width: 100%;
  padding: 0.9rem;
  background: var(--card-inset);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 3px);
}

.pl-bars {
  display: grid;
  gap: 0.65rem;
  margin: 1rem 0 1.1rem;
}

.pl-bar {
  display: grid;
  grid-template-columns: minmax(0, 6.5rem) 1fr auto;
  align-items: center;
  gap: 0.7rem;
}

.pl-bar-name {
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 0.76rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pl-bar-track {
  height: 9px;
  background: var(--track);
  border-radius: 999px;
}

.pl-bar-fill {
  display: block;
  width: var(--pct);
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
}

.pl-bar-pct {
  color: var(--muted);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
}

.pl-done {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 500;
}

.pl-done-tick {
  width: 18px;
  height: 18px;
  color: var(--accent);
}

.pl-done-tick svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- reveal ---
 * Only applied once the script has marked the list pending, so with JS off
 * the stages are simply already in their finished state. */

.pl-stages.is-pending:not(.is-live) .pl-card {
  opacity: 0;
  transform: translateY(10px);
}

.pl-stages.is-pending .pl-card {
  transition:
    opacity 0.5s ease calc(var(--i) * 90ms),
    transform 0.5s cubic-bezier(0.22, 0.8, 0.3, 1) calc(var(--i) * 90ms);
}

.pl-stages.is-pending:not(.is-live) .pl-bar-fill {
  width: 0;
}

.pl-stages.is-pending .pl-bar-fill {
  transition: width 0.9s cubic-bezier(0.22, 0.8, 0.3, 1) 420ms;
}

.welcome-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.76rem;
  color: var(--muted);
}

.welcome-stats strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .welcome-card,
  .welcome-card:hover,
  .pl-stages.is-pending .pl-card,
  .pl-stages.is-pending:not(.is-live) .pl-card,
  .pl-stages.is-pending .pl-bar-fill,
  .pl-stages.is-pending:not(.is-live) .pl-bar-fill {
    opacity: 1;
    transform: none;
    transition: none;
    width: var(--pct, auto);
  }
}

/* Three cards need roughly 360px each. Below that the row stacks. */
@media (max-width: 1100px) {
  .pl-stages {
    --pl-gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr);
  }

  .pl-arrow {
    top: calc(100% + var(--pl-gap) / 2);
    left: 50%;
    rotate: 90deg;
  }

  .pl-stage:last-child .pl-arrow {
    display: none;
  }
}

@container (max-width: 340px) {
  .pl-art-extract {
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
  }

  .pl-links.is-faint {
    display: none;
  }

  .pl-found {
    grid-auto-flow: column;
    justify-content: start;
  }
}

/* Keyed to the card, not the viewport: in the three-column row (and under
 * html zoom) the card gets narrow well above phone widths, and the stack
 * then overflowed past the card edge. */
@container (max-width: 380px) {
  .pl-art-source {
    flex-direction: column;
    align-items: stretch;
  }

  .pl-src-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1rem;
  }

  .pl-stack {
    width: 100%;
    margin-left: 0.9rem;
  }
}

/* --- role shortcuts (under hero; primary CTA lives in hero actions) --- */

.welcome-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.4rem;
  margin: 0 0 0.25rem;
  padding: 0.85rem 1.1rem;
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.welcome-start {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  padding: 0.85rem 1.35rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-on);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 28%, transparent);
  transition:
    background 0.15s var(--ease),
    transform 0.15s var(--ease),
    box-shadow 0.15s var(--ease);
}

.welcome-start:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 34%, transparent);
}

.welcome-start svg {
  width: 1.05rem;
  height: 1.05rem;
}

.welcome-jump {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  min-width: 0;
}

.welcome-jump-label {
  font-size: 0.78rem;
  color: var(--muted);
}

.welcome-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.welcome-role {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink-soft);
  font-size: 0.8rem;
  text-decoration: none;
  transition:
    border-color 0.15s var(--ease),
    color 0.15s var(--ease);
}

.welcome-role:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.welcome-foot {
  margin: 0;
  font-size: 0.75rem;
  color: var(--faint);
}


@media (max-width: 980px) {
  .welcome-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .welcome-hero-shots {
    width: min(26rem, 100%);
    min-height: 20rem;
    align-self: center;
  }

  .welcome-shot {
    width: 13.5rem;
  }

  .welcome-feature,
  .welcome-feature-browse {
    flex-direction: column;
    align-items: stretch;
  }

  .welcome-feature-copy,
  .welcome-feature-card,
  .welcome-browse-shot {
    flex: 1 1 auto;
    max-width: none;
  }
}

@media (max-width: 900px) {
  .welcome-compare {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Phones keep the overlapping pair, just smaller: stacked full-width the
 * two shots cost almost two screens of scrolling before any content. */
@media (max-width: 560px) {
  .welcome {
    gap: 2.25rem;
    padding-bottom: 3rem;
  }

  .welcome-hero {
    gap: 1.75rem;
    padding-bottom: 0.25rem;
  }

  .welcome-title {
    font-size: 1.95rem;
  }

  .welcome-lede {
    font-size: 0.98rem;
  }

  .welcome-feature-chip {
    padding: 0.35rem 0.6rem;
    font-size: 0.74rem;
  }

  .welcome-start,
  .welcome-how-link {
    padding: 0.7rem 1.1rem;
    font-size: 0.94rem;
  }

  .welcome-hero-shots {
    width: min(17rem, 100%);
    min-height: 13.5rem;
  }

  .welcome-shot {
    width: 9rem;
    border-radius: 0.9rem;
  }

  .welcome-shot img {
    border-radius: 0.9rem;
  }

  .welcome-shot.is-back {
    top: 1.25rem;
  }

  .welcome-how-title,
  .welcome-feature-title {
    font-size: 1.45rem;
  }

  .welcome-feature-lede {
    font-size: 0.94rem;
  }

  .pl-card {
    padding: 0.9rem 0.95rem 0.85rem;
  }

  .pl-title {
    margin-bottom: 0.8rem;
    font-size: 0.94rem;
  }

  .pl-art {
    min-height: 0;
  }

  .pl-foot {
    margin-top: 0.8rem;
  }

  .welcome-card {
    padding: 0.85rem 0.9rem 0.9rem;
  }

  .welcome-browse-shot {
    border-width: 5px;
  }
}

/* -------------------------------------------------------------- controls */

/* Scrolls away with the page; z-index keeps its popovers above content. */
.controls-bar {
  position: relative;
  z-index: 30;
  margin: 0 -0.35rem 1.35rem;
  padding: 0.35rem;
  border-radius: calc(var(--radius) + 4px);
}

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 0.9rem;
  margin: 0;
  padding: 0.85rem 1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.controls select,
.controls button {
  border-radius: var(--radius);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 10rem;
  flex: 1 1 12rem;
}

.field-period {
  min-width: 14rem;
  flex: 1.2 1 16rem;
  position: relative;
}

.field > label,
.field-label-with-tip > label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.controls-actions {
  display: inline-flex;
  gap: 0.45rem;
  margin-left: auto;
}

/* ------------------------------------------------- advanced ("more") filters */

.more-filters {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: -0.15rem;
}

.more-filters-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.more-filters-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2rem;
  padding: 0.25rem 0.55rem 0.25rem 0.45rem;
  margin-left: -0.45rem;
  font-size: 0.82rem;
  background: transparent;
  border-color: transparent;
  color: var(--ink-soft);
}

.more-filters-toggle:hover,
.more-filters-toggle[aria-expanded="true"] {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent);
}

.more-filters-toggle:focus-visible,
.filter-chip-clear:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.more-filters-toggle svg {
  width: 1rem;
  height: 1rem;
}

.more-filters-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-on);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}

.more-filters-count[hidden] {
  display: none;
}

.more-filters-chevron {
  width: 0.45rem;
  height: 0.45rem;
  margin-left: 0.1rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.18s var(--ease);
}

.more-filters-toggle[aria-expanded="true"] .more-filters-chevron {
  transform: translateY(1px) rotate(-135deg);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  min-height: 1.9rem;
  padding: 0.15rem 0.2rem 0.15rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card-inset);
  color: var(--ink-soft);
  font-size: 0.8rem;
}

.filter-chip[hidden] {
  display: none;
}

.filter-chip strong {
  color: var(--ink);
  font-weight: 600;
}

.filter-chip-clear {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
}

.filter-chip-clear:hover {
  background: var(--accent-soft);
  border: 0;
  color: var(--accent);
}

.filter-chip-clear svg {
  width: 0.8rem;
  height: 0.8rem;
}

.more-filters-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--line);
}

.more-filters-panel[hidden] {
  display: none;
}

.more-filters-panel:not([hidden]) {
  animation: more-filters-in 0.18s var(--ease);
}

.more-filters-panel .field {
  flex: 0 1 18rem;
}

.field-hint {
  margin: 0.1rem 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--muted);
}

@keyframes more-filters-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .more-filters-panel:not([hidden]) {
    animation: none;
  }

  .more-filters-chevron {
    transition: none;
  }
}

/* ------------------------------------------- posted-date range picker */

.period-picker {
  position: relative;
}

.period-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  width: 100%;
  min-height: 2.6rem;
  padding: 0.5rem 0.8rem;
  text-align: left;
  cursor: pointer;
  font: inherit;
  font-weight: 400;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--card);
  white-space: normal;
}

/* Beat global button:hover (accent fill) so this matches Role/Level selects. */
button.period-trigger:hover:not(:disabled),
button.period-trigger:focus-visible:not(:disabled) {
  background: var(--card);
  border-color: var(--accent);
  color: var(--ink);
  transform: none;
}

button.period-trigger:active:not(:disabled) {
  transform: none;
}

button.field-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.95rem;
  height: 0.95rem;
  min-height: 0;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.62rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  cursor: help;
  white-space: nowrap;
}

button.field-info:hover,
button.field-info:focus-visible,
button.field-info.is-open {
  background: var(--card);
  border-color: var(--accent);
  color: var(--accent);
  transform: none;
}

button.field-info:active {
  transform: none;
}

.period-trigger:disabled {
  opacity: 0.72;
  cursor: not-allowed;
}

.field-label-with-tip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.field-info .chip-tip {
  left: 0;
  right: auto;
  bottom: calc(100% + 0.4rem);
  width: max-content;
  max-width: min(16rem, 70vw);
  text-align: left;
  z-index: 90;
}

.period-trigger-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.period-trigger-chevron {
  color: var(--muted);
  font-size: 0.75rem;
}

.period-picker.is-open .period-trigger {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.period-popover {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  z-index: 80;
  min-width: min(36rem, calc(100vw - 2rem));
  max-width: calc(100vw - 1.5rem);
}

.period-popover-inner {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: 0.85rem;
  padding: 0.85rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}

.period-presets {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.period-preset {
  justify-content: flex-start;
  min-height: 2.1rem;
  padding: 0.35rem 0.65rem;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
}

.period-preset:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--ink);
}

.period-preset.is-active {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  font-weight: 600;
}

.period-calendars {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;
}

.period-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}

.period-input-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.period-date-input {
  font: inherit;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--card);
  min-height: 2.3rem;
  padding: 0.35rem 0.55rem;
}

.period-months {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

.period-month-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.45rem;
  font-size: 0.92rem;
}

.period-nav {
  min-height: 1.8rem;
  min-width: 1.8rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
}

.period-nav[hidden] {
  visibility: hidden;
}

.period-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.15rem;
  margin-bottom: 0.25rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

.period-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.15rem;
}

.period-day {
  min-height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
}

.period-day.is-empty {
  visibility: hidden;
  pointer-events: none;
}

.period-day:hover:not(:disabled):not(.is-start):not(.is-end) {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.period-day.is-today {
  box-shadow: inset 0 0 0 1px var(--accent);
}

.period-day.is-in-range {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-radius: 0;
}

/* Tentative hover span: keep it light — never the solid accent. */
.period-day.is-preview-range {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: 0;
  color: var(--ink);
}

.period-day.is-preview-end {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--ink);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
  font-weight: 500;
}

.period-day.is-start,
.period-day.is-end {
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
}

.period-day.is-start.is-preview-range,
.period-day.is-start.is-preview-end {
  /* Keep the committed start solid while previewing the rest of the span. */
  background: var(--accent);
  color: #fff;
  box-shadow: none;
}

.period-day.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.period-summary {
  margin: 0;
  font-size: 0.82rem;
}

@media (max-width: 720px) {
  .period-popover {
    left: auto;
    right: 0;
    min-width: min(22rem, calc(100vw - 1.5rem));
  }

  .period-popover-inner {
    grid-template-columns: 1fr;
  }

  .period-presets {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .period-months {
    grid-template-columns: 1fr;
  }

  .period-months .period-month:last-child {
    display: none;
  }
}

/* --------------------------------------------------------- form controls */

select,
input[type="search"],
button {
  font: inherit;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--card);
  min-height: 2.6rem;
  padding: 0.5rem 0.8rem;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease),
    box-shadow 0.15s var(--ease), color 0.15s var(--ease);
}

select:hover,
input[type="search"]:hover {
  border-color: var(--accent);
}

select {
  width: 100%;
  appearance: none;
  padding-right: 2.1rem;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 1.05rem) calc(50% - 1px),
    calc(100% - 0.75rem) calc(50% - 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

input[type="search"] {
  -webkit-appearance: none;
}

input[type="search"]::placeholder {
  color: var(--faint);
}

button {
  cursor: pointer;
  font-weight: 600;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
  white-space: nowrap;
}

button:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

button:active {
  transform: translateY(1px);
}

button.secondary {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}

button.secondary:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

button.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}

button.ghost:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Auth pills — must follow global `button` rules above. */
.site-nav-auth .nav-login,
.site-nav-auth .nav-signup {
  min-height: 2.35rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
  cursor: not-allowed;
  transform: none;
}

.site-nav-auth .nav-login,
.site-nav-auth .nav-login:hover,
.site-nav-auth .nav-login:disabled {
  border: 1.5px solid var(--line-strong);
  background: var(--card);
  color: var(--ink-soft);
  box-shadow: none;
}

.site-nav-auth .nav-signup,
.site-nav-auth .nav-signup:hover,
.site-nav-auth .nav-signup:disabled {
  border: 1.5px solid var(--accent);
  background: var(--accent);
  color: var(--accent-on);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 22%, transparent);
  opacity: 1;
}

button.icon {
  display: grid;
  place-items: center;
  width: 2.6rem;
  padding: 0;
}

button.icon svg {
  width: 1.05rem;
  height: 1.05rem;
}

.btn-sm {
  min-height: 2.2rem;
  padding: 0.35rem 0.7rem;
  font-size: 0.82rem;
}

/* Toolbar-style link that reads as a button. */
.linkbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 2.2rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xs);
  background: var(--card);
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease),
    color 0.15s var(--ease);
}

.linkbtn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* Icon-only toggle for the theme switch. */
.theme-toggle .sun {
  display: none;
}

.theme-toggle .moon {
  display: block;
}

:root[data-theme="dark"] .theme-toggle .sun {
  display: block;
}

:root[data-theme="dark"] .theme-toggle .moon {
  display: none;
}

/* --------------------------------------------------------------- banners */

.banner {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0 0 1rem;
  padding: 0.75rem 0.95rem;
  border: 1px solid;
  border-radius: var(--radius-sm);
  font-size: 0.89rem;
}

.banner svg {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.1rem;
}

.banner.error {
  background: var(--err-bg);
  border-color: var(--err-line);
  color: var(--err-ink);
}

.banner.warn {
  background: var(--warn-bg);
  border-color: var(--warn-line);
  color: var(--warn-ink);
}

/* ----------------------------------------------------------------- stats */

/* Profile views: classic underline tabs + one panel at a time. */
.profile-shell {
  margin: 0 0 1.25rem;
}

.profile-nav {
  margin: 0 0 0.9rem;
  border-bottom: 1px solid var(--line-strong);
}

.profile-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem;
  padding: 0;
  margin: 0 0 -1px;
  background: transparent;
  border: none;
  box-shadow: none;
}

.profile-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.05rem;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.8rem 1.2rem;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.05rem;
  font-weight: 500;
  white-space: nowrap;
  text-align: center;
  box-shadow: none;
  cursor: pointer;
  transform: none;
  transition:
    color 0.15s var(--ease),
    border-color 0.15s var(--ease),
    background 0.15s var(--ease);
}

.profile-tab:hover {
  background: transparent;
  border-color: transparent;
  border-bottom-color: var(--line-strong);
  color: var(--ink);
  transform: none;
}

.profile-tab:active {
  transform: none;
}

.profile-tab[aria-selected="true"] {
  background: transparent;
  border-bottom-color: var(--accent);
  border-bottom-width: 3px;
  color: var(--accent-hover);
  font-weight: 600;
  box-shadow: none;
}

:root[data-theme="dark"] .profile-tab[aria-selected="true"] {
  color: var(--accent);
}

.profile-tab[aria-selected="true"]:hover {
  background: transparent;
  border-bottom-color: var(--accent);
  color: var(--accent-hover);
}

:root[data-theme="dark"] .profile-tab[aria-selected="true"]:hover {
  color: var(--accent);
}

.profile-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.profile-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  margin: 0 0 1.15rem;
  padding: 0.55rem 0.1rem;
  font-size: 0.86rem;
  color: var(--ink-soft);
}

.profile-context strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Role hero above tab panels (title + icon meta). */
.profile-hero {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0 0 1.25rem;
  padding: 0.15rem 0 0.35rem;
}

.profile-role-title {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1.75rem, 2.6vw, 2.15rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
}

.profile-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 1.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.profile-meta li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.profile-meta svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  color: var(--accent);
}

.profile-meta strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.profile-panels {
  min-height: 12rem;
  padding-top: 0.15rem;
}

.profile-panel {
  margin-bottom: 0;
  animation: panel-in 0.28s var(--ease);
}

.profile-panel[hidden] {
  display: none !important;
  animation: none;
}

.freshness-panel {
  margin-top: 1rem;
  padding: 0.95rem 1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.freshness-panel .experience-head {
  margin-bottom: 0.75rem;
}

.freshness-panel .freshness-grid {
  margin: 0;
}

#panel-sample .stats {
  margin-bottom: 0.25rem;
}

#panel-sample .experience-panel {
  margin-top: 1rem;
  padding: 0.95rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  border-top: 1px solid var(--line);
}

#panel-sample .experience-head p {
  margin-bottom: 0.75rem;
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .profile-panel {
    animation: none;
  }
}

@media (max-width: 640px) {
  .profile-tabs {
    width: 100%;
  }

  .profile-tab {
    flex: 1 1 auto;
    padding-left: 0.65rem;
    padding-right: 0.65rem;
    font-size: 0.92rem;
  }
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.7rem;
}

.stat {
  padding: 0.7rem 0.85rem 0.75rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

.stat-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.stat-value {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--sans);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.stat-note {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.stat-meter {
  height: 4px;
  margin-top: 0.5rem;
  border-radius: 99px;
  background: var(--track);
  overflow: hidden;
}

.stat-meter > span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--accent);
}

.stat.sources {
  grid-column: span 2;
}

.source-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.4rem;
}

.source-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: var(--card-inset);
  border: 1px solid var(--line);
  font-size: 0.75rem;
  color: var(--ink-soft);
}

.experience-panel {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}

.experience-head h3 {
  margin: 0 0 0.25rem;
  font-size: 0.92rem;
  font-family: var(--sans);
  font-weight: 600;
}

.experience-head p {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  color: var(--muted);
  max-width: 42rem;
}

.experience-body {
  display: grid;
  gap: 0.75rem;
}

.experience-usual {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem 0.75rem;
}

.experience-usual-value {
  font-family: var(--sans);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.experience-buckets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
  max-width: 28rem;
}

.experience-buckets li {
  display: grid;
  grid-template-columns: 5.5rem 1fr 2.6rem;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
}

.exp-bucket-label {
  color: var(--ink-soft);
}

.exp-bucket-bar {
  height: 6px;
  border-radius: 99px;
  background: var(--track);
  overflow: hidden;
}

.exp-bucket-bar > span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: color-mix(in srgb, var(--accent) 75%, var(--ink) 10%);
}

.exp-bucket-pct {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.experience-domains .stat-label {
  margin-bottom: 0.35rem;
}

.experience-examples {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.experience-examples li {
  margin: 0.2rem 0;
}

.req-mix {
  display: grid;
  gap: 0.85rem;
}

@media (min-width: 720px) {
  .req-mix:has(> .req-mix-col:nth-child(2)) {
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.5rem;
  }
}

.req-mix-col .req-label {
  margin-bottom: 0.4rem;
}

.soft-chip.req-chip.must {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, var(--card-inset));
}

.soft-chip.req-chip.nice {
  border-style: dashed;
}

.source-pill strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.source-pill.muted {
  opacity: 0.9;
}

/* -------------------------------------------------------------- insights */

.insights-grid {
  display: grid;
  gap: 0.85rem;
}

@media (min-width: 780px) {
  .insights-grid.two {
    grid-template-columns: 1.05fr 1fr;
  }
}

.snapshot-head > h2 {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.section-head-icon,
.insight-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--accent);
}

.section-head-icon svg,
.insight-card-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.insight-card h3 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.75rem;
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
}

.snapshot-about-body {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.snapshot-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.snapshot-tags li {
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 550;
  line-height: 1.2;
}

.key-theme-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.key-theme-item {
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  transition:
    background 0.15s var(--ease),
    border-color 0.15s var(--ease);
}

.key-theme-item.is-open {
  border-color: var(--line);
  background: var(--card-inset);
}

button.key-theme-toggle {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 0.7rem;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0.7rem 0.65rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  /* Global buttons are nowrap; long theme titles must wrap instead. */
  white-space: normal;
  box-shadow: none;
  transform: none;
  cursor: pointer;
}

button.key-theme-toggle:hover,
button.key-theme-toggle:focus-visible,
button.key-theme-toggle:active {
  background: color-mix(in srgb, var(--accent) 6%, var(--card));
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

button.key-theme-toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
  outline-offset: 1px;
}

button.key-theme-toggle:disabled {
  cursor: default;
  opacity: 1;
}

button.key-theme-toggle:disabled:hover {
  background: transparent;
}

.key-theme-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.55rem;
  background: color-mix(in srgb, var(--accent) 14%, var(--card));
  color: var(--accent);
}

.key-theme-icon svg {
  width: 1.05rem;
  height: 1.05rem;
}

.key-theme-item[data-tone="must"] .key-theme-icon {
  background: color-mix(in srgb, #7c6bc4 16%, var(--card));
  color: #6b5bb0;
}

.key-theme-item[data-tone="focus"] .key-theme-icon {
  background: color-mix(in srgb, #3d9a6a 14%, var(--card));
  color: #2f8a5c;
}

.key-theme-item[data-tone="impact"] .key-theme-icon {
  background: color-mix(in srgb, var(--accent) 14%, var(--card));
  color: var(--accent);
}

.key-theme-copy {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.key-theme-title {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.key-theme-blurb {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.key-theme-chevron {
  align-self: center;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--faint);
  border-bottom: 2px solid var(--faint);
  transform: rotate(-45deg);
  transition: transform 0.15s var(--ease), border-color 0.15s var(--ease);
}

.key-theme-item.is-open .key-theme-chevron {
  transform: rotate(45deg);
  border-color: var(--accent);
}

.key-theme-panel {
  padding: 0 0.75rem 0.85rem 3.35rem;
}

.key-theme-panel > p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.key-theme-panel[hidden] {
  display: none !important;
}

/* Narrative highlights are one sentence. A title sliced from that
   sentence, plus the same sentence in the blurb and again in the
   panel, reads as a duplicate. Show the sentence once. */
.key-theme-note-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.65rem;
}

.key-theme-note-text {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 550;
  line-height: 1.45;
  color: var(--ink);
}

.bullets {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bullets li {
  position: relative;
  margin: 0.4rem 0;
  padding-left: 1.1rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.bullets li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.55rem;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: var(--accent);
}

.req-group + .req-group {
  margin-top: 0.75rem;
}

.req-label {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}

.req-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.hint {
  margin: 0;
  font-size: 0.84rem;
  color: var(--muted);
}

/* Insight call-to-action when nothing is cached yet. */
.insight-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}

.insight-cta p {
  margin: 0;
  flex: 1 1 20rem;
  font-size: 0.9rem;
  color: var(--muted);
}

/* Freshness disclosure. */
.freshness {
  margin: 0.85rem 0 0;
  padding: 0.5rem 0.8rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card-inset);
  font-size: 0.84rem;
}

.freshness > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.6rem;
  list-style: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.freshness > summary::-webkit-details-marker {
  display: none;
}

.freshness > summary::before {
  content: "";
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-left-color: currentColor;
  transition: transform 0.15s var(--ease);
}

.freshness[open] > summary::before {
  transform: rotate(90deg) translateX(1px);
}

.freshness-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 0.6rem 1.25rem;
  margin: 0.7rem 0 0;
  padding: 0;
}

.freshness-grid dt {
  margin: 0;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.freshness-grid dd {
  margin: 0.1rem 0 0;
  color: var(--ink);
}

.freshness-wide {
  grid-column: 1 / -1;
}

.freshness-nudge {
  margin: 0.7rem 0 0.1rem;
  font-size: 0.82rem;
  color: var(--muted);
}

.freshness .muted {
  color: var(--muted);
  font-weight: 400;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.badge.stale {
  color: var(--warn-ink);
  background: var(--warn-bg);
  border-color: var(--warn-line);
}

.badge.ok {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}

/* --------------------------------------------------- chips and tooltips */

.chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  min-height: 0;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--accent) 7%, var(--card));
  font: inherit;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
  cursor: default;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}

.chip:active {
  transform: none;
}

.chip.has-tip {
  cursor: pointer;
}

.chip.has-tip:hover {
  border-color: var(--accent);
}

.chip[data-freq="often"] {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  background: color-mix(in srgb, var(--accent) 14%, var(--card));
}

.chip[data-freq="rare"] {
  background: var(--card);
  color: var(--muted);
}

.chip .dot {
  flex: 0 0 auto;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--accent);
}

.chip[data-freq="sometimes"] .dot {
  opacity: 0.6;
}

.chip[data-freq="rare"] .dot {
  opacity: 0.3;
}

.chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 17rem;
}

.chip.must {
  background: color-mix(in srgb, var(--accent) 16%, var(--card));
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

.chip.nice {
  background: var(--card);
  border-style: dashed;
}

/* display:none while closed, not just visibility:hidden. A hidden-but-laid-out
 * tooltip still counts toward the document's scroll width, which showed up as
 * a phantom horizontal scroll on narrow viewports. `allow-discrete` keeps the
 * fade where the browser supports it; elsewhere the tip simply appears. */
.chip-tip {
  display: none;
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.45rem);
  z-index: 60;
  width: max-content;
  max-width: min(20rem, 72vw);
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--bg);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  box-shadow: var(--shadow-pop);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(var(--tip-shift, 0px), 4px);
  transition: opacity 0.13s var(--ease), transform 0.13s var(--ease),
    visibility 0.13s, display 0.13s allow-discrete;
}

.chip-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: calc(1rem - var(--tip-shift, 0px));
  border: 6px solid transparent;
  border-top-color: var(--ink);
}

.chip.has-tip:hover .chip-tip,
.chip.has-tip:focus-visible .chip-tip,
.chip.is-open .chip-tip,
.has-tip:hover > .chip-tip,
.has-tip:focus-visible > .chip-tip,
.has-tip.is-open > .chip-tip {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: translate(var(--tip-shift, 0px), 0);
}

@starting-style {
  .chip.has-tip:hover .chip-tip,
  .chip.has-tip:focus-visible .chip-tip,
  .chip.is-open .chip-tip,
  .has-tip:hover > .chip-tip,
  .has-tip:focus-visible > .chip-tip,
  .has-tip.is-open > .chip-tip {
    opacity: 0;
    transform: translate(var(--tip-shift, 0px), 4px);
  }
}

/* Stacking so an open tooltip is never clipped by a later sibling card. */
.chip-row:hover,
.chip-row:focus-within {
  position: relative;
  z-index: 5;
}

/* ------------------------------------------- recurring theme list */

.themes-card {
  margin-top: 0.85rem;
}

.themes-card .themes-head h3 {
  display: block;
  margin: 0 0 0.3rem;
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.themes-kicker {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.4;
  color: var(--muted);
}

.themes-basis {
  margin: 0.28rem 0 0;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--faint);
}

.themes-common {
  margin: 0.7rem 0 0;
  max-width: 40rem;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink);
}

.theme-list {
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
}

.theme-row {
  border-top: 1px solid var(--line);
}

.theme-row:last-child {
  border-bottom: 1px solid var(--line);
}

.theme-row[hidden] {
  display: none;
}

button.theme-row-toggle,
.theme-row-static {
  display: flex;
  align-items: center;
  gap: 0.75rem 1rem;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0.85rem 0.1rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 400;
  text-align: left;
  white-space: normal;
  min-height: 0;
  box-shadow: none;
  transform: none;
}

button.theme-row-toggle {
  cursor: pointer;
}

button.theme-row-toggle:hover,
button.theme-row-toggle:focus-visible,
button.theme-row-toggle:active {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

button.theme-row-toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
  outline-offset: 1px;
}

.theme-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.7rem;
  row-gap: 0.15rem;
  flex: 1 1 auto;
  min-width: 0;
}

.theme-label {
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.theme-aside {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: auto;
}

.theme-meta {
  display: inline-flex;
  align-items: baseline;
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 0.84rem;
  line-height: 1.3;
}

.theme-freq {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font-weight: 650;
  color: var(--accent);
}

.theme-freq::before {
  content: "";
  flex: 0 0 auto;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: currentColor;
}

.theme-pct {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.theme-pct::before {
  content: "·";
  margin: 0 0.35rem;
  color: currentColor;
}

.theme-meta[data-freq="sometimes"] .theme-freq,
.theme-meta[data-freq="sometimes"] .theme-pct {
  font-weight: 600;
  color: color-mix(in srgb, var(--accent) 46%, var(--muted));
}

.theme-meta[data-freq="rare"] .theme-freq,
.theme-meta[data-freq="rare"] .theme-pct {
  font-weight: 500;
  color: color-mix(in srgb, var(--muted) 55%, var(--faint));
}

.theme-chevron {
  flex: 0 0 auto;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid var(--faint);
  border-bottom: 1.5px solid var(--faint);
  transform: rotate(-45deg);
  transition: transform 0.15s var(--ease);
}

.theme-row.is-open .theme-chevron {
  transform: rotate(45deg);
}

.theme-panel {
  margin: 0 0.1rem 0.85rem;
  padding: 0.95rem 1.05rem 1rem;
  border-radius: var(--radius);
  background: var(--accent-soft);
}

.theme-panel[hidden] {
  display: none;
}

.theme-panel-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.35;
  color: var(--ink);
}

.theme-panel p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

button.theme-show-all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.8rem 0 0.1rem;
  padding: 0.15rem 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  font-size: 0.92rem;
  font-weight: 600;
  box-shadow: none;
  transform: none;
  white-space: nowrap;
}

button.theme-show-all:hover,
button.theme-show-all:focus-visible,
button.theme-show-all:active {
  background: transparent;
  border-color: transparent;
  color: var(--accent-hover);
  box-shadow: none;
  transform: none;
}

button.theme-show-all:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
  outline-offset: 2px;
}

.theme-show-chevron {
  flex: 0 0 auto;
  width: 0.42rem;
  height: 0.42rem;
  margin-top: -0.15rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s var(--ease);
}

button.theme-show-all[aria-expanded="true"] .theme-show-chevron {
  margin-top: 0.15rem;
  transform: rotate(-135deg);
}

.theme-evidence {
  margin-top: 1rem;
}

.theme-panel > .theme-evidence:first-child {
  margin-top: 0;
}

.theme-panel .theme-evidence-kicker {
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--muted);
}

.theme-panel .theme-evidence-count {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

.theme-evidence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.8rem;
  margin-top: 0.75rem;
}

.theme-excerpt {
  margin: 0;
  padding: 0.85rem 0.95rem;
  border-radius: calc(var(--radius) - 2px);
  background: var(--card);
}

.theme-excerpt-link,
button.theme-excerpt-archive,
button.theme-excerpt-archive:hover,
button.theme-excerpt-archive:focus-visible,
button.theme-excerpt-archive:active {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  font-weight: 400;
  line-height: inherit;
  text-align: left;
  text-decoration: none;
  white-space: normal;
  min-height: 0;
  transform: none;
  cursor: pointer;
}

.theme-excerpt-link:hover .theme-excerpt-quote,
.theme-excerpt-link:focus-visible .theme-excerpt-quote,
button.theme-excerpt-archive:hover .theme-excerpt-quote,
button.theme-excerpt-archive:focus-visible .theme-excerpt-quote {
  color: var(--accent);
}

button.theme-excerpt-archive:focus-visible,
.theme-excerpt-link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
  outline-offset: 2px;
}

.theme-excerpt-quote {
  margin: 0;
  color: var(--ink);
}

.theme-panel .theme-excerpt-quote p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: inherit;
}

.theme-panel .theme-excerpt-quote p + p {
  margin-top: 0.45rem;
}

.theme-panel .theme-excerpt-quote p:first-child::before {
  content: "\201C";
}

.theme-panel .theme-excerpt-quote p:last-child::after {
  content: "\201D";
}

.theme-panel .theme-excerpt-meta {
  margin: 0.65rem 0 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--muted);
}

.theme-panel .theme-evidence-note {
  margin: 0.75rem 0 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--muted);
}

/* ---------------------------------------------------------------- skills */

.skills-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.7rem;
  margin: 0 0 0.9rem;
}

.search-wrap {
  position: relative;
  flex: 1 1 18rem;
  max-width: none;
}

.search-wrap svg {
  position: absolute;
  left: 0.65rem;
  top: 50%;
  width: 0.95rem;
  height: 0.95rem;
  transform: translateY(-50%);
  color: var(--faint);
  pointer-events: none;
}

.search-wrap input {
  width: 100%;
  padding-left: 2.1rem;
  padding-right: 2.2rem;
}

/* Re-enable the platform clear button that `appearance: none` suppresses.
 * A hand-rolled overlay button sits inside the input's own box and loses
 * hit-testing to it; the native control has no such problem. Firefox has
 * no equivalent, so Escape clears the field there (see app.js). */
.search-wrap input::-webkit-search-cancel-button {
  -webkit-appearance: searchfield-cancel-button;
  appearance: auto;
  cursor: pointer;
}

.kbd {
  position: absolute;
  right: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.05rem 0.32rem;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--card-inset);
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.7rem;
  pointer-events: none;
}

.search-wrap.has-value .kbd,
.search-wrap:focus-within .kbd {
  display: none;
}

.toolbar-right {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.sort-field {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.sort-field select {
  width: auto;
  min-height: 2.2rem;
  padding: 0.25rem 1.9rem 0.25rem 0.6rem;
  font-size: 0.82rem;
}

.export-menu {
  position: relative;
}

.export-menu > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  min-height: 2.2rem;
  padding: 0;
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
}

.export-menu > summary::-webkit-details-marker {
  display: none;
}

.export-menu > summary svg {
  width: 1.05rem;
  height: 1.05rem;
}

.export-menu > summary:hover {
  color: var(--ink);
}

.export-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  z-index: 20;
  min-width: 7.5rem;
  padding: 0.3rem;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
  display: grid;
  gap: 0.15rem;
}

.export-dropdown a {
  display: block;
  padding: 0.45rem 0.7rem;
  border-radius: calc(var(--radius-sm) - 2px);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
}

.export-dropdown a:hover {
  background: var(--card-inset);
}

.result-count {
  font-size: 0.84rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Category tabs (Skills / Tools / Credentials) */
.skills-cat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1.15rem;
  margin: 0 0 0.85rem;
  border-bottom: 1px solid var(--line);
}

.skills-cat-tab {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  margin: 0;
  padding: 0.55rem 0.1rem 0.65rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.98rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: none;
}

.skills-cat-tab:hover {
  color: var(--ink-soft);
  background: transparent;
}

.skills-cat-tab[aria-selected="true"] {
  color: var(--accent);
  font-weight: 600;
  background: transparent;
}

.skills-cat-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--accent);
}

.skills-cat-count {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: inherit;
  opacity: 0.85;
}

/* Master–detail workspace */
.skills-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  align-items: start;
  margin-top: 0.15rem;
}

@media (min-width: 980px) {
  .skills-split {
    grid-template-columns: minmax(0, 1.95fr) minmax(17.5rem, 1fr);
    gap: 0.9rem;
  }
}

.skills-table-panel {
  min-width: 0;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

.skills-table-head,
.skill-row-main {
  display: grid;
  grid-template-columns:
    2.1rem
    minmax(6.5rem, 1.15fr)
    minmax(5.5rem, 0.95fr)
    4.4rem
    3.4rem
    minmax(5.5rem, 1.2fr)
    1.15rem;
  gap: 0.45rem 0.55rem;
  align-items: center;
  padding: 0.55rem 0.85rem;
}

.skills-table-head {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent-soft) 35%, var(--card));
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.skills-table-body {
  display: flex;
  flex-direction: column;
}

.skill-row {
  margin: 0;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  background: transparent;
  cursor: pointer;
  transition: background 0.15s var(--ease);
}

.skill-row:last-of-type {
  border-bottom: 0;
}

.skill-row:hover {
  background: color-mix(in srgb, var(--accent-soft) 40%, transparent);
}

.skill-row[aria-selected="true"] {
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--card));
  box-shadow: inset 3px 0 0 var(--accent);
}

.skill-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.skill-row .skill-rank {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.skill-row .skill-name {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ink);
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.skill-share {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  min-width: 0;
}

.skill-row .skill-pct {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.skill-row .bar {
  height: 5px;
  margin: 0;
  border-radius: 99px;
  background: var(--track);
  overflow: hidden;
}

.skill-row .bar > span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--tier-common);
  transform-origin: left center;
  animation: bar-in 0.5s var(--ease) both;
}

.skill-row[data-tier="core"] .bar > span {
  background: var(--tier-core);
}

.skill-row[data-tier="emerging"] .bar > span {
  background: var(--tier-emerging);
}

.skill-mentions,
.skill-required-n {
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.skill-context {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  min-width: 0;
}

.ctx-chip {
  display: inline-block;
  max-width: 100%;
  padding: 0.18rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--card));
  color: var(--ink-soft);
  font-size: 0.68rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.skill-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--faint);
}

.skill-chevron svg {
  width: 0.85rem;
  height: 0.85rem;
}

.skill-row[aria-selected="true"] .skill-chevron {
  color: var(--accent);
}

.skills-table-panel .show-more {
  margin: 0;
  padding: 0.65rem 0.85rem 0.85rem;
  border-top: 1px solid var(--line);
}

.skills-more-btn {
  width: 100%;
  justify-content: center;
  gap: 0.4rem;
  background: color-mix(in srgb, var(--accent-soft) 45%, var(--card));
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  color: var(--muted);
  font-weight: 500;
}

.skills-more-btn svg {
  width: 0.9rem;
  height: 0.9rem;
}

/* Detail panel */
.skill-detail-panel {
  min-width: 0;
  min-height: 18rem;
  padding: 0.85rem 0.9rem 1rem;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  position: sticky;
  top: 0.75rem;
}

.skill-detail-empty {
  display: grid;
  place-items: center;
  min-height: 16rem;
  padding: 1.5rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}

.skill-detail-empty[hidden],
.skill-detail-mount[hidden] {
  display: none !important;
}

.skill-detail-inner {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* Entrance on skill select: fade + rise, staggered so the change is readable. */
.skill-detail-inner.is-entering > * {
  animation: skill-detail-in 0.45s var(--ease) both;
}

.skill-detail-inner.is-entering > *:nth-child(1) { animation-delay: 0ms; }
.skill-detail-inner.is-entering > *:nth-child(2) { animation-delay: 80ms; }
.skill-detail-inner.is-entering > *:nth-child(3) { animation-delay: 150ms; }
.skill-detail-inner.is-entering > *:nth-child(4) { animation-delay: 220ms; }
.skill-detail-inner.is-entering > *:nth-child(5) { animation-delay: 280ms; }

@keyframes skill-detail-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.skill-detail-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--card));
}

.skill-detail-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.7rem;
  height: 1.55rem;
  padding: 0 0.3rem;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 70%, var(--card));
  color: var(--accent-hover);
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.skill-detail-name {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
}

.skill-detail-badge {
  flex: 0 0 auto;
  margin: 0;
  min-height: 0;
  padding: 0.28rem 0.65rem;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-soft) 85%, var(--card));
  color: var(--accent-hover);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
}

.skill-detail-badge:hover,
.skill-detail-badge:focus-visible {
  background: var(--accent-soft);
}

.skill-detail-stats {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.skill-gauge {
  position: relative;
  width: 4.6rem;
  height: 4.6rem;
  flex: 0 0 auto;
}

.skill-gauge svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.gauge-track,
.gauge-value {
  fill: none;
  stroke-width: 3.2;
}

.gauge-track {
  stroke: var(--track);
  stroke-dasharray: 100 100;
}

.gauge-value {
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
}

.skill-detail-inner.is-entering .gauge-value {
  animation: skill-gauge-draw 0.75s var(--ease) 90ms forwards;
}

.skill-detail-inner:not(.is-entering) .gauge-value {
  stroke-dashoffset: calc(100 - var(--pct, 0));
}

.skill-detail-inner.is-entering .gauge-label {
  animation: skill-detail-in 0.4s var(--ease) 180ms both;
}

@keyframes skill-gauge-draw {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: calc(100 - var(--pct, 0));
  }
}

@media (prefers-reduced-motion: reduce) {
  .skill-detail-inner.is-entering > *,
  .skill-detail-inner.is-entering .gauge-value,
  .skill-detail-inner.is-entering .gauge-label {
    animation: none !important;
  }

  .skill-detail-inner.is-entering .gauge-value {
    stroke-dashoffset: calc(100 - var(--pct, 0));
  }
}

.gauge-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.skill-detail-figs {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.skill-detail-mentions {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.skill-detail-mentions strong {
  color: var(--ink);
  font-weight: 700;
}

.skill-detail-required {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.82rem;
  color: var(--accent-hover);
}

.skill-detail-required svg {
  width: 0.85rem;
  height: 0.85rem;
  flex: 0 0 auto;
}

.skill-detail-required.muted {
  color: var(--muted);
}

.skill-detail-blurb {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.skill-detail-contexts,
.skill-detail-jobs {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.65rem;
  border-top: 1px solid color-mix(in srgb, var(--accent) 12%, var(--line));
}

.skill-detail-contexts h4,
.skill-detail-jobs h4 {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
}

.skill-detail-contexts h4 .field-info {
  margin-left: 0.05rem;
}

.skill-detail-contexts h4 svg,
.skill-detail-jobs h4 svg {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--accent);
}

.jobs-count {
  font-weight: 500;
  color: var(--muted);
}

.skill-context-cards {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.skill-context-card {
  padding: 0.55rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--line));
  border-radius: 7px;
  background: var(--card-inset);
}

.skill-context-card strong {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-soft);
}

.skill-context-card p {
  margin: 0.2rem 0 0;
  font-size: 0.74rem;
  line-height: 1.4;
  color: var(--muted);
}

.skill-job-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

/* Expanded list scrolls inside the panel instead of growing the page. */
.skill-detail-jobs[data-jobs-expanded="1"] .skill-job-list {
  max-height: min(55vh, 26rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.35rem;
  border-top: 1px solid color-mix(in srgb, var(--accent) 10%, var(--line));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 10%, var(--line));
}

.skill-job-tools {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.skill-job-tools[hidden],
.skill-job-empty[hidden] {
  display: none;
}

.skill-job-search {
  flex: none;
}

.skill-job-search input[type="search"] {
  min-height: 2.1rem;
  padding-right: 0.6rem;
  font-size: 0.8rem;
}

.skill-job-status,
.skill-job-empty {
  margin: 0;
  font-size: 0.72rem;
  color: var(--muted);
}

.skill-job-empty {
  padding: 0.4rem 0;
}

.skill-job {
  display: flex;
  gap: 0.55rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 10%, var(--line));
}

.skill-job:last-child {
  border-bottom: 0;
}

.job-dot {
  width: 0.35rem;
  height: 0.35rem;
  margin-top: 0.45rem;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
}

.skill-job.is-dead .job-dot {
  background: var(--faint);
}

.skill-job.is-dead .job-title a {
  color: var(--muted);
}

.job-status-tag {
  display: inline-block;
  margin: 0 0.1rem 0 0.35rem;
  padding: 0.05rem 0.38rem 0.08rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--muted) 14%, var(--card));
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

.job-body {
  min-width: 0;
  flex: 1 1 auto;
}

.job-title {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--ink-soft);
}

.job-title a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}

.job-title a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.job-sub {
  margin: 0.15rem 0 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--muted);
}

.skill-job-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.9rem;
}

.skill-jobs-more {
  align-self: flex-start;
  margin: 0.15rem 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: none;
}

.skill-jobs-more:hover {
  color: var(--accent-hover);
  text-decoration: underline;
  background: transparent;
}

.skill-jobs-absent {
  margin: 0.15rem 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--faint);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 400;
  cursor: pointer;
  box-shadow: none;
}

.skill-jobs-absent:hover {
  color: var(--muted);
  text-decoration: underline;
  background: transparent;
}

.skill-absent-list {
  margin: 0.15rem 0 0;
  padding: 0;
  list-style: none;
  max-height: min(40vh, 18rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.skill-absent-list[hidden] {
  display: none;
}

.skill-absent-list .job-dot {
  background: var(--faint);
}

.skill-group-soft {
  margin-top: 1.1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}

.skill-group-soft .skill-group-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}

.skill-group-soft .skill-group-head h3 {
  margin: 0;
  font-size: 0.92rem;
  font-family: var(--sans);
  font-weight: 600;
}

.skill-group-note {
  margin: 0 0 0.85rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--muted);
}

/* Soft skills as their own category panel (card grid). */
.skills-soft-panel {
  margin: 0;
  padding: 0.15rem 0 0.35rem;
}

.skills-soft-panel[hidden] {
  display: none !important;
}

.soft-skill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr));
  gap: 0.65rem;
  align-items: stretch;
}

.soft-skill-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
  padding: 0.9rem 1rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  color: var(--ink);
  transition:
    border-color 0.15s var(--ease),
    box-shadow 0.15s var(--ease);
}

.soft-skill-card:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 8%, transparent);
}

.soft-skill-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.65rem;
}

.soft-skill-name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.soft-skill-pct {
  flex: 0 0 auto;
  font-size: 0.88rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.soft-skill-card .bar {
  height: 0.38rem;
  margin: 0;
  border-radius: 999px;
  background: var(--track);
  overflow: hidden;
}

.soft-skill-card .bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.soft-skill-mentions {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.soft-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.soft-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card-inset);
  font-size: 0.76rem;
  color: var(--ink-soft);
}

.soft-chip-pct {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 0.72rem;
}

.req-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin: 0;
  min-height: 0;
  padding: 0.05rem 0.38rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card-inset);
  font: inherit;
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-soft);
  cursor: pointer;
}

.req-pill:hover,
.req-pill:focus-visible {
  border-color: var(--accent);
}

.req-help {
  position: relative;
  min-height: 0;
  padding: 0.2rem 0.5rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 0.76rem;
  color: var(--muted);
}

.req-help .chip-tip {
  max-width: min(24rem, 80vw);
  right: 0;
  left: auto;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.skills-section .section-head {
  position: relative;
  z-index: 7;
}

@keyframes bar-in {
  from {
    transform: scaleX(0);
  }
}

/* Compact table on mid widths */
@media (max-width: 1100px) and (min-width: 980px) {
  .skills-table-head .col-required,
  .skill-row-main .skill-required-n,
  .skills-table-head .col-mentions,
  .skill-row-main .skill-mentions {
    display: none;
  }

  .skills-table-head,
  .skill-row-main {
    grid-template-columns:
      2rem
      minmax(5.5rem, 1.1fr)
      minmax(5rem, 0.9fr)
      minmax(5rem, 1.1fr)
      1.1rem;
  }
}

@media (max-width: 720px) {
  .skills-table-head {
    display: none;
  }

  .skill-row-main {
    grid-template-columns: 1.8rem minmax(0, 1fr) auto 1rem;
    grid-template-areas:
      "rank name name chev"
      "rank share context chev";
    gap: 0.25rem 0.45rem;
    padding: 0.7rem 0.75rem;
  }

  .skill-row .skill-rank { grid-area: rank; align-self: start; padding-top: 0.15rem; }
  .skill-row .skill-name { grid-area: name; }
  .skill-share { grid-area: share; }
  .skill-context { grid-area: context; justify-content: flex-end; }
  .skill-chevron { grid-area: chev; }
  .skill-mentions,
  .skill-required-n {
    display: none;
  }

  .skill-detail-panel {
    position: static;
  }
}

.bar {
  height: 6px;
  margin-bottom: 0.5rem;
  border-radius: 99px;
  background: var(--track);
  overflow: hidden;
}

.bar > span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--tier-common);
  transform-origin: left center;
  animation: bar-in 0.5s var(--ease) both;
}

.req-pill.often_required {
  background: color-mix(in srgb, var(--accent) 16%, var(--card));
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  color: var(--ink);
}

.req-pill.often_preferred {
  background: var(--card);
  border-style: dashed;
}

.req-pill.mixed {
  background: var(--card-inset);
}

/* Job reference disclosure (archive dialog / legacy). */
.refs-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.3rem;
  padding: 0.2rem 0;
  list-style: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.81rem;
}

.refs-toggle::-webkit-details-marker {
  display: none;
}

.refs-toggle:hover {
  color: var(--ink);
}

.refs-toggle::before {
  content: "";
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-left-color: currentColor;
  transition: transform 0.15s var(--ease);
}

details[open] > .refs-toggle::before {
  transform: rotate(90deg) translateX(1px);
}

.refs-panel {
  max-height: 12rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0.35rem 0 0;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background: var(--card-inset);
}

.refs {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
}

.refs li {
  margin: 0.35rem 0;
  color: var(--muted);
}

.refs a {
  color: var(--accent);
  text-decoration: none;
}

.refs a:hover {
  text-decoration: underline;
}

.ref-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.35rem;
}

.ref-company {
  color: var(--muted);
}

.ref-archive-info {
  flex: 0 0 auto;
  margin-left: 0.15rem;
  vertical-align: middle;
  cursor: pointer;
}

.ref-archive-info[hidden] {
  display: none !important;
}

.ref-archive-info.is-visible {
  display: inline-flex;
}

.job-archive-dialog {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0;
  max-width: min(40rem, calc(100vw - 2rem));
  width: 100%;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--ink) 18%, transparent);
}

.job-archive-dialog::backdrop {
  background: color-mix(in srgb, var(--ink) 42%, transparent);
}

.job-archive-inner {
  display: flex;
  flex-direction: column;
  max-height: min(85vh, 44rem);
}

.job-archive-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1rem 0.75rem;
  border-bottom: 1px solid var(--line);
}

.job-archive-banner {
  margin: 0;
  flex: 1;
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--ink);
}

.job-archive-close {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  min-height: 0;
  padding: 0;
  border-radius: var(--radius-xs);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.job-archive-close:hover,
.job-archive-close:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.job-archive-body {
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.job-archive-meta {
  display: grid;
  gap: 0.35rem 1rem;
  margin: 0 0 1rem;
  font-size: 0.82rem;
  color: var(--muted);
}

.job-archive-meta dt {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
}

.job-archive-meta dd {
  margin: 0 0 0.45rem;
  color: var(--ink);
}

.job-archive-title {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
  line-height: 1.25;
}

.job-archive-text {
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink);
}

.job-archive-section h3 {
  margin: 0 0 0.4rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.job-archive-section p {
  margin: 0 0 0.55rem;
}

.job-archive-section p:last-child {
  margin-bottom: 0;
}

.job-archive-section ul {
  margin: 0;
  padding: 0 0 0 1.15rem;
}

.job-archive-section li {
  margin: 0.3rem 0;
}

.job-archive-section li::marker {
  color: var(--accent);
}

.job-archive-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.src {
  display: inline-block;
  margin-right: 0.35rem;
  color: var(--faint);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.show-more {
  display: flex;
  justify-content: center;
  margin-top: 0.9rem;
}

/* ---------------------------------------------------------------- states */

.placeholder {
  max-width: 34rem;
  margin: 2.5rem auto;
  padding: 2rem 1.75rem;
  text-align: center;
  background: var(--panel);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}

.placeholder-mark {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 0.9rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}

.placeholder-mark svg {
  width: 1.5rem;
  height: 1.5rem;
}

.placeholder h2 {
  margin: 0 0 0.4rem;
  font-size: 1.2rem;
}

.placeholder p {
  margin: 0 auto;
  max-width: 26rem;
  font-size: 0.92rem;
  color: var(--muted);
}

.steps {
  display: inline-block;
  margin: 1.1rem 0 0;
  padding: 0;
  text-align: left;
  list-style: none;
  counter-reset: step;
}

.steps li {
  position: relative;
  margin: 0.5rem 0;
  padding-left: 2rem;
  font-size: 0.87rem;
  color: var(--ink-soft);
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.05rem;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
}

.empty {
  margin: 0;
  color: var(--muted);
}

.empty-inline {
  padding: 1.25rem 0.25rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}

/* ------------------------------------------------------------------ busy */

/* Thin top progress bar - used for fast profile swaps. */
.route-progress {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 300;
  height: 2px;
  width: 100%;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
  pointer-events: none;
}

.route-progress.is-on {
  opacity: 1;
  transform: scaleX(0.75);
  transition: transform 8s cubic-bezier(0, 0.8, 0.2, 1), opacity 0.1s;
}

.route-progress.is-done {
  opacity: 0;
  transform: scaleX(1);
  transition: transform 0.15s var(--ease), opacity 0.3s var(--ease) 0.1s;
}

/* Stale content while a swap is in flight. */
#results {
  transition: opacity 0.18s var(--ease);
}

#results.is-stale {
  opacity: 0.45;
  pointer-events: none;
}

/* Full overlay - reserved for slow LLM generation. */
.busy-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s var(--ease), visibility 0.18s var(--ease);
}

.busy-overlay.is-on {
  opacity: 1;
  visibility: visible;
}

.busy-card {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  max-width: 26rem;
  padding: 1.05rem 1.25rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
}

.busy-text {
  font-size: 0.92rem;
  font-weight: 600;
}

.busy-sub {
  margin-top: 0.2rem;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.spinner {
  flex: 0 0 auto;
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.1rem;
  border: 2px solid var(--track);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

button.is-loading {
  cursor: wait;
  pointer-events: none;
  opacity: 0.8;
}

button .btn-spin {
  display: none;
  width: 0.85rem;
  height: 0.85rem;
  margin-right: 0.45rem;
  border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: -0.12rem;
}

button.is-loading .btn-spin {
  display: inline-block;
}

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

@media (max-width: 620px) {
  main {
    padding: 1.25rem 1rem 4rem;
  }

  .controls-bar {
    margin-inline: -0.25rem;
  }

  .controls {
    padding: 0.75rem 0.8rem;
  }

  .field {
    flex-basis: 100%;
  }

  .controls-actions {
    width: 100%;
    margin-left: 0;
  }

  .controls-actions button {
    flex: 1 1 auto;
  }

  .stat.sources {
    grid-column: 1 / -1;
  }

  .toolbar-right {
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
  }

  .chip-label {
    max-width: 12rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .spinner,
  button .btn-spin {
    animation: none !important;
    border-top-color: var(--accent);
    opacity: 0.7;
  }

  .route-progress.is-on {
    transform: scaleX(1);
  }
}

/* ----------------------------------------------------------------- print */

@media print {
  .controls-bar,
  .site-nav-end,
  .site-nav-mid,
  .skills-toolbar,
  .busy-overlay,
  .route-progress,
  .show-more,
  .ask-panel,
  .chat-toggle {
    display: none !important;
  }

  body {
    background: #fff;
  }

  .skill-row,
  .skill-detail-panel,
  .card,
  .stat {
    box-shadow: none;
    break-inside: avoid;
  }
}

/* --------------------------------------------------------- Ask companion */

.chat-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.6rem;
  height: auto;
  width: auto;
  padding: 0.45rem 0.85rem 0.45rem 0.7rem;
  white-space: nowrap;
}

.chat-toggle .chat-icon {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
}

.chat-toggle-label {
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.2;
}

.chat-toggle[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-hover);
}

:root[data-theme="dark"] .chat-toggle[aria-pressed="true"] {
  color: var(--accent);
}

.chat-toggle:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 720px) {
  .chat-toggle-label {
    /* Keep the label; shorten only if extremely tight */
    max-width: 9.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Whole panel is the motion unit: fixed to the visual viewport bottom-center,
 * grows upward on expand, and follows the user while they scroll. */
.ask-panel {
  position: fixed;
  z-index: 60;
  left: 50%;
  right: auto;
  top: auto;
  bottom: calc(1.15rem + env(safe-area-inset-bottom, 0px));
  width: min(42rem, calc(100vw - 1.75rem));
  max-height: min(34rem, calc(100vh - 5.25rem));
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  pointer-events: none;
  transform: translate3d(-50%, 0, 0);
  transform-origin: bottom center;
  opacity: 1;
  will-change: transform, bottom;
  transition:
    transform 0.28s var(--ease),
    opacity 0.22s var(--ease),
    max-height 0.28s var(--ease),
    width 0.28s var(--ease),
    bottom 0.12s linear;
}

.ask-panel[hidden] {
  display: none !important;
}

.ask-panel.is-animating-in {
  animation: ask-panel-in 0.28s var(--ease);
}

@keyframes ask-panel-in {
  from {
    opacity: 0;
    transform: translate3d(-50%, 18px, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scale(1);
  }
}

.ask-panel.is-minimized {
  width: min(22rem, calc(100vw - 1.75rem));
  max-height: 3.6rem;
}

.ask-shell {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 0 1 auto;
  width: 100%;
  max-height: inherit;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: var(--shadow-2), 0 18px 48px rgb(23 28 25 / 12%);
  overflow: hidden;
}

.ask-dock {
  display: none;
  align-items: stretch;
  gap: 0.15rem;
  width: 100%;
  min-height: 3.45rem;
  margin: 0;
  padding: 0.2rem 0.25rem 0.2rem 0.2rem;
  background: transparent;
}

.ask-dock-open {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.7rem;
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: 0.45rem 0.55rem 0.45rem 0.55rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font-weight: 500;
  text-align: left;
  white-space: normal;
  cursor: pointer;
  box-shadow: none;
}

.ask-dock-open:hover {
  background: var(--panel);
  border-color: transparent;
  color: var(--ink);
  transform: none;
}

.ask-dock-open:active {
  transform: none;
}

.ask-dock-open:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.ask-dock-close {
  flex: 0 0 auto;
  align-self: center;
  width: 2.35rem;
  height: 2.35rem;
  min-height: 2.35rem;
  margin: 0;
}

.ask-panel.is-minimized .ask-dock {
  display: flex;
}

.ask-panel.is-minimized .ask-expanded {
  display: none;
}

.ask-dock-mark {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-hover);
}

:root[data-theme="dark"] .ask-dock-mark {
  color: var(--accent);
}

.ask-dock-mark svg {
  width: 1.05rem;
  height: 1.05rem;
}

.ask-dock-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.ask-dock-kicker {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.2;
}

.ask-dock-title {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}

.ask-dock-expand {
  flex: 0 0 auto;
  color: var(--muted);
  display: grid;
  place-items: center;
}

.ask-dock-expand svg {
  width: 1.15rem;
  height: 1.15rem;
}

.ask-expanded {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  max-height: inherit;
}

.ask-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 0.95rem 0.55rem;
  border-bottom: 1px solid var(--line);
}

.ask-head-actions {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex: 0 0 auto;
}

.ask-kicker {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.ask-title {
  margin: 0.1rem 0 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.25;
  font-family: var(--sans);
}

.ask-minimize,
.ask-close {
  flex: 0 0 auto;
}

.ask-context {
  margin: 0;
  padding: 0.55rem 0.95rem 0.65rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.ask-thread {
  flex: 1 1 auto;
  min-height: 10rem;
  overflow-y: auto;
  padding: 0.85rem 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  scroll-behavior: smooth;
}

.ask-empty {
  margin: auto 0;
  padding: 1rem 0.25rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.ask-msg {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ask-msg.is-user {
  align-items: flex-end;
}

.ask-msg.is-assistant {
  align-items: flex-start;
}

.ask-bubble {
  max-width: 95%;
  padding: 0.65rem 0.8rem;
  border-radius: 14px;
  font-size: 0.9rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.ask-msg.is-user .ask-bubble {
  background: var(--accent);
  color: var(--accent-on);
  border-bottom-right-radius: 5px;
}

.ask-msg.is-assistant .ask-bubble {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink);
  border-bottom-left-radius: 5px;
}

.ask-bubble.ask-typing {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.4rem;
  padding: 0.7rem 0.95rem;
}

.ask-typing-dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: var(--muted);
  opacity: 0.45;
  animation: ask-typing-bounce 1.05s var(--ease) infinite;
}

.ask-typing-dot:nth-child(2) {
  animation-delay: 0.15s;
}

.ask-typing-dot:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes ask-typing-bounce {
  0%,
  70%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  35% {
    transform: translateY(-0.28rem);
    opacity: 1;
  }
}

.ask-sources {
  width: 100%;
  margin: 0;
  padding: 0.55rem 0.65rem;
  background: var(--card-inset);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.ask-sources-label {
  margin: 0 0 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.ask-sources-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ask-sources-list li {
  font-size: 0.8rem;
  line-height: 1.35;
}

.ask-sources-list a {
  color: var(--accent-hover);
  text-decoration: none;
  font-weight: 500;
}

:root[data-theme="dark"] .ask-sources-list a {
  color: var(--accent);
}

.ask-sources-list a:hover {
  text-decoration: underline;
}

.ask-sources-meta {
  color: var(--muted);
}

.ask-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0 0.95rem 0.65rem;
}

.ask-suggestions[hidden] {
  display: none !important;
}

.ask-chip {
  min-height: 0;
  height: auto;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: normal;
  text-align: left;
  box-shadow: none;
}

.ask-chip:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-hover);
  transform: none;
}

:root[data-theme="dark"] .ask-chip:hover {
  color: var(--accent);
}

.ask-composer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.45rem;
  align-items: end;
  padding: 0.55rem 0.75rem 0.65rem;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.ask-composer textarea {
  width: 100%;
  min-height: 2.6rem;
  max-height: 7rem;
  resize: none;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 1.2rem;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.35;
  field-sizing: content;
}

.ask-composer textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.ask-send {
  width: 2.6rem;
  height: 2.6rem;
  min-height: 2.6rem;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 999px;
  box-shadow: none;
}

.ask-send svg {
  width: 1.1rem;
  height: 1.1rem;
}

.ask-send:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ask-footnote {
  margin: 0;
  padding: 0 0.95rem 0.7rem;
  min-height: 1.1rem;
  font-size: 0.72rem;
  color: var(--muted);
  background: var(--panel);
}

.ask-footnote.is-error {
  color: var(--err-ink);
}

body.ask-open {
  padding-right: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ask-panel {
    transition: none;
  }

  .ask-panel.is-animating-in {
    animation: none;
  }

  .ask-typing-dot {
    animation: none;
    opacity: 0.7;
  }
}

@media (max-width: 640px) {
  .ask-panel {
    left: 50%;
    right: auto;
    bottom: calc(0.55rem + env(safe-area-inset-bottom, 0px));
    width: calc(100vw - 1rem);
    max-height: min(72vh, 34rem);
    transform: translate3d(-50%, 0, 0);
  }

  .ask-panel.is-minimized {
    width: min(20rem, calc(100vw - 1rem));
  }
}

/* ----------------------------------------------------------------- phone */

/* One place for the phone pass on Explore: tighter chrome so the profile
 * starts within the first screen, and denser cards and rows below it. */
@media (max-width: 560px) {
  .site-header {
    margin-bottom: 1.1rem;
  }

  .site-nav .brand-mark {
    width: 2.1rem;
    height: 1.15rem;
  }

  .site-nav .brand-wordmark {
    flex-wrap: nowrap;
    font-size: 1.12rem;
    white-space: nowrap;
  }

  .site-nav-link {
    padding: 0.35rem 0.7rem;
    font-size: 0.86rem;
  }

  /* Role on its own row, then Period and Level side by side. */
  .controls-bar {
    margin-bottom: 0.9rem;
  }

  .controls {
    gap: 0.6rem;
    padding: 0.7rem 0.75rem;
  }

  .controls > .field {
    flex: 1 1 calc(50% - 0.3rem);
    min-width: 0;
  }

  .controls > .field:first-child {
    flex-basis: 100%;
  }

  /* Tabs stay on one line and scroll if a label ever needs more room. */
  .profile-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .profile-tabs::-webkit-scrollbar {
    display: none;
  }

  .profile-tab {
    flex: 1 0 auto;
    min-height: 2.6rem;
    padding: 0.6rem 0.55rem;
    font-size: 0.86rem;
  }

  .profile-role-title {
    font-size: 1.55rem;
  }

  .profile-meta {
    gap: 0.4rem 0.9rem;
    font-size: 0.84rem;
  }

  .section-head {
    column-gap: 0.75rem;
  }

  .section-head > h2 {
    font-size: 1.15rem;
  }

  .section-sub {
    font-size: 0.86rem;
  }

  .card {
    padding: 0.85rem 0.9rem;
  }

  button.key-theme-toggle,
  .key-theme-note-row {
    gap: 0.55rem;
    padding: 0.6rem 0.4rem;
  }

  .key-theme-icon {
    width: 1.75rem;
    height: 1.75rem;
  }

  .key-theme-title {
    font-size: 0.92rem;
  }

  .key-theme-blurb {
    font-size: 0.82rem;
  }

  .themes-card .themes-head h3 {
    font-size: 1.35rem;
  }

  .theme-label {
    font-size: 0.94rem;
  }

  .theme-meta {
    font-size: 0.82rem;
  }

  .skills-cat-tabs {
    gap: 0.1rem 0.9rem;
  }

  .skills-cat-tab {
    font-size: 0.88rem;
  }

  /* Context chips get their own line so the share bar keeps its width. */
  .skill-row-main {
    grid-template-columns: 1.6rem minmax(0, 1fr) 1rem;
    grid-template-areas:
      "rank name chev"
      "rank share chev"
      "rank context chev";
    padding: 0.6rem 0.65rem;
  }

  .skill-context {
    justify-content: flex-start;
  }

  .skill-context:empty {
    display: none;
  }
}