/* Kawaipunk — purple ground, lime accent, rounded, Baloo 2, strong glow.
   Implements design/CV App - Dark Modernist.dc.html's Kawaipunk preview
   variant (vibe: Kawaipunk, accent: #b6ff3b) — the file's saved default,
   not the "Dark Modernist" direction its own name and style.md describe.
   Targets the same class names already used across Razor markup (Bootstrap
   utilities + this app's own .page/.sidebar/.card/.badge/.btn-* conventions)
   plus the .rail-* / .dl-* / .pill-* classes added for the redesign.
   robotic.css and brutalist.css are untouched; switching themes is just
   swapping the <link> in App.razor. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;800&family=Baloo+2:wght@400;600;800&display=swap');

:root {
  /* ground */
  --color-bg: #150e22;
  --color-surface: #221836;
  --color-surface-2: rgba(244, 236, 255, 0.18);
  --color-text: #f4ecff;
  --color-divider: rgba(244, 236, 255, 0.32);
  --color-hairline: rgba(244, 236, 255, 0.20);
  --color-muted: rgba(244, 236, 255, 0.55);
  --color-dim: rgba(244, 236, 255, 0.45);
  --color-hover: rgba(244, 236, 255, 0.08);
  --color-hover-2: rgba(244, 236, 255, 0.14);
  --color-fill: rgba(244, 236, 255, 0.12);
  --color-soft: rgba(244, 236, 255, 0.72);

  /* accent — lime green, reserved for primary calls to action and focus */
  --color-accent: #b6ff3b;
  --color-accent-hover: #c9f976;
  --color-accent-active: #d8f5a7;
  --color-on-accent: #150e22;
  --color-accent-glow: 0 0 31px color-mix(in srgb, var(--color-accent) 80%, transparent);

  /* type */
  --font-heading: "Baloo 2", Archivo, system-ui, sans-serif;
  --font-body: "Baloo 2", Archivo, system-ui, sans-serif;

  /* spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-sm: 10px;
  --radius-md: 10px;
  --radius-lg: 10px;

  --rail-collapsed: 60px;
  --rail-expanded: 232px;
}

* { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.55;
  margin: 0;
  padding: 0;
  font-size: 15px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}
h1 { font-size: clamp(28px, 4vw, 34px); }
h2 { font-size: 24px; text-transform: none; border-bottom: none; padding-bottom: 0; margin-bottom: var(--space-4); }
h3 { font-size: 18px; }
h4, h5 { font-size: 15px; }
h6 { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); font-weight: 600; }

p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-hover); text-decoration: underline; }
.text-white { color: var(--color-text); }
.text-black { color: var(--color-text) !important; }
.text-muted, .card-subtitle { color: var(--color-muted) !important; font-weight: 400; }
.lead { color: var(--color-muted); font-size: 16px; }
img { image-rendering: auto; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.border-bottom { border-bottom: 2px solid var(--color-divider) !important; }
.border-warning { border-color: var(--color-accent) !important; }

/* ══════════════════════════════ app shell ══════════════════════════════ */

.page {
  max-width: none;
  margin: 0;
  display: flex;
  align-items: flex-start;
  position: relative;
  isolation: isolate;
  min-height: 100vh;
}

.page::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('images/robots/robot-1.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  filter: grayscale(1) contrast(1.15) sepia(1) hue-rotate(42deg) saturate(1.9) brightness(0.92);
  opacity: 0.20;
}

main {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  padding: 0;
}

.content {
  background: transparent;
}

article {
  /* Horizontal gutters come from .px-4 plus MainLayout.razor.css
     (32px left / 24px right from 641px up). Pages that open with a sticky bar
     cancel this top padding with a negative margin on the bar itself. */
  padding-top: 56px;
  padding-bottom: 80px;
}

.container {
  max-width: 820px;
}

/* Download CV / Book a Meeting / Is This a Fit? use this instead of
   .container - the wireframe renders those three screens at 720px, only
   Home gets the wider 820px column (it carries the portrait). */
.container-narrow {
  max-width: 720px;
  margin: 0 auto;
}

/* ══════════════════════════════ rail ══════════════════════════════ */

.rail-check { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }

.rail-hamburger {
  display: none;
  position: fixed;
  top: 14px; left: 14px; z-index: 20;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  background: var(--color-bg);
  border: 2px solid var(--color-divider);
  color: var(--color-text);
  cursor: pointer;
}

.rail-scrim {
  display: none;
  position: fixed; inset: 0; z-index: 9;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
}

.sidebar {
  position: relative;
  z-index: 10;
  flex: none;
  background: transparent;
  border-bottom: none;
}

.rail {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border-right: 2px solid var(--color-divider);
  width: var(--rail-collapsed);
  height: 100vh;
  position: sticky;
  top: 0;
  overflow: hidden;
  transition: width 0.16s ease;
}

.rail:hover,
#rail-pinned:checked ~ .sidebar .rail {
  width: var(--rail-expanded);
  overflow: visible;
}

.rail .rail-label { display: none; white-space: nowrap; }
.rail:hover .rail-label,
#rail-pinned:checked ~ .sidebar .rail .rail-label { display: inline; }

/* Same collapse/expand mechanism as .rail-label, but for flex containers
   (account text block, auth links, dev shortcuts) that need `display: flex`
   rather than `display: inline` when the rail expands. */
.rail .rail-label-flex { display: none; white-space: nowrap; }
.rail:hover .rail-label-flex,
#rail-pinned:checked ~ .sidebar .rail .rail-label-flex { display: flex; }

.rail-top {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 64px;
  padding: 0 14px;
  border-bottom: 2px solid var(--color-divider);
  flex: none;
}
.rail-mark { flex: none; width: 26px; height: 26px; background: var(--color-accent); }
.rail-brand { font: 800 14px var(--font-heading); letter-spacing: -0.01em; }

.rail-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 8px;
}

.rail-link {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 11px 10px;
  border: 0;
  border-left: 3px solid transparent;
  background: transparent;
  color: rgba(243, 242, 242, 0.7);
  font: 600 13px var(--font-body);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.rail:not(:hover):not(.pinned) .rail-link,
.rail-nav { justify-content: flex-start; }
.rail-link:hover { background: var(--color-hover); color: var(--color-text); text-decoration: none; }
.rail-link.active {
  background: var(--color-hover-2);
  color: var(--color-text);
  border-left-color: var(--color-text);
}
.rail-icon { flex: none; width: 24px; height: 24px; }

.rail-foot {
  margin-top: auto;
  padding: 12px 8px;
  border-top: 2px solid var(--color-divider);
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.rail-pin-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 10px;
  border: 1px solid var(--color-divider);
  background: transparent;
  color: rgba(243, 242, 242, 0.7);
  font: 500 12px var(--font-body);
  cursor: pointer;
  white-space: nowrap;
}
.rail-pin-btn:hover { background: var(--color-hover); color: var(--color-text); }
.icon-pin-off { display: block; }
.icon-pin-on { display: none; }
#rail-pinned:checked ~ .sidebar .icon-pin-off { display: none; }
#rail-pinned:checked ~ .sidebar .icon-pin-on { display: block; }

.rail-account-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border: 0;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}
.rail-account-btn:hover { background: var(--color-hover); }
.rail-avatar {
  flex: none; width: 30px; height: 30px;
  background: var(--color-surface-2);
  display: flex; align-items: center; justify-content: center;
  font: 700 12px var(--font-heading);
  color: var(--color-muted);
}
.rail-account-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rail-account-name { font: 600 12px var(--font-body); }
.rail-account-email { font: 400 11px var(--font-body); color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; }

.rail-account-menu {
  display: none;
  flex-direction: column;
  border: 1px solid var(--color-divider);
  background: var(--color-bg);
}
#rail-account-open:checked ~ .rail-account-menu { display: flex; }
.rail-account-menu a,
.rail-account-menu button {
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid var(--color-hairline);
  background: transparent;
  color: var(--color-text);
  font: 500 12px var(--font-body);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  display: block;
  width: 100%;
}
.rail-account-menu > *:last-child,
.rail-account-menu form:last-child button { border-bottom: 0; }
.rail-account-menu a:hover,
.rail-account-menu button:hover { background: var(--color-hover); text-decoration: none; }

.rail-auth-links { display: flex; flex-direction: column; gap: 6px; padding: 2px 2px; }
.rail-auth-links a {
  display: block;
  padding: 8px 10px;
  border: 1px solid var(--color-divider);
  color: var(--color-text);
  font: 600 12px var(--font-body);
  white-space: nowrap;
  text-decoration: none;
}
.rail-auth-links a:hover { background: var(--color-hover); }
.rail-auth-links a.rail-auth-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.rail-auth-links a.rail-auth-primary:hover { background: var(--color-accent-hover); }

.rail-dev {
  border: 1px dashed var(--color-divider);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rail-dev button {
  padding: 6px 8px;
  border: 1px solid var(--color-divider);
  background: transparent;
  color: var(--color-muted);
  font: 500 11px var(--font-body);
  cursor: pointer;
  white-space: nowrap;
}
.rail-dev button:hover { background: var(--color-hover); color: var(--color-text); }

@media (max-width: 900px) {
  .rail-hamburger { display: flex; }
  .sidebar { position: static; }
  .rail {
    position: fixed;
    top: 0; left: 0; z-index: 10;
    width: var(--rail-expanded);
    transform: translateX(-100%);
    transition: transform 0.18s ease;
  }
  .rail .rail-label { display: inline; }
  #rail-mobile-open:checked ~ .rail-scrim { display: block; opacity: 1; pointer-events: auto; }
  #rail-mobile-open:checked ~ .sidebar .rail { transform: translateX(0); }
  main { width: 100%; }
  article { padding-top: 88px; }
}

/* ══════════════════════════════ buttons ══════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 13px;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-divider);
  background: transparent;
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { background: var(--color-hover); text-decoration: none; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
/* A disabled action keeps no glow — the halo reads as "live" and misleads. */
.btn:disabled, .btn[disabled] { box-shadow: none; }
.btn-sm { font-size: 12px; padding: 7px 12px; }
.btn-lg { font-size: 14px; padding: 12px 22px; }

.btn-primary {
  background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent);
  box-shadow: var(--color-accent-glow);
}
.btn-primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.btn-primary:active { background: var(--color-accent-active); }

.btn-dark { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.btn-outline-dark, .btn-outline-primary, .btn-outline-info,
.btn-outline-secondary, .btn-secondary, .btn-outline-light, .btn-light {
  background: transparent; color: var(--color-text); border-color: var(--color-divider);
}
.btn-outline-dark:hover, .btn-outline-primary:hover, .btn-outline-info:hover,
.btn-outline-secondary:hover, .btn-secondary:hover, .btn-outline-light:hover { background: var(--color-hover); }
.btn-outline-success { background: transparent; color: var(--color-text); border-color: var(--color-divider); }
.btn-outline-success:hover { background: var(--color-hover); }
.btn-outline-danger, .btn-danger { color: var(--color-accent-active); border-color: var(--color-accent-active); background: transparent; }
.btn-danger { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }
.btn-danger:hover { background: var(--color-accent-hover); }
.btn-outline-danger:hover { background: rgba(255, 151, 131, 0.12); }
.btn-link { color: var(--color-accent); font-weight: 600; }
.btn-link:hover { color: var(--color-accent-hover); }
.btn-close { filter: invert(1) grayscale(1); opacity: 0.7; }
.btn-close:hover { opacity: 1; }

/* ══════════════════════════════ forms ══════════════════════════════ */

.form-control, .form-select {
  font-family: var(--font-body);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  color: var(--color-text);
  padding: 10px 12px;
}
.form-control:focus, .form-select:focus {
  background: var(--color-surface);
  border-color: var(--color-accent);
  color: var(--color-text);
  box-shadow: none;
  outline: 2px solid var(--color-accent);
  outline-offset: 0;
}
.form-control::placeholder { color: var(--color-dim); }
.form-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}
.form-text { color: var(--color-dim); font-size: 12px; }

.form-check-input {
  background-color: transparent;
  border: 1.5px solid var(--color-divider);
  border-radius: 2px;
  width: 1.05em; height: 1.05em;
}
.form-check-input[type="radio"] { border-radius: 50%; }
.form-check-input:checked {
  background-color: var(--color-text);
  border-color: var(--color-text);
}
.form-check-input:focus { box-shadow: none; outline: 2px solid var(--color-accent); outline-offset: 1px; }
.form-check-label { color: var(--color-text); }

.list-group-item { background: var(--color-surface); border-color: var(--color-divider); color: var(--color-text); }
.list-group-item-action:hover { background: var(--color-hover-2); color: var(--color-text); }

/* ══════════════════════════════ cards / sections ══════════════════════════════ */

.card {
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  box-shadow: none;
  background: var(--color-surface);
  color: var(--color-text);
  padding: 16px 18px;
  margin-bottom: 16px;
  font-size: 14px;
}
.card:last-child { margin-bottom: 0; }
.card:hover { transform: none; box-shadow: none; }
.card-header { border-bottom: 1px solid var(--color-hairline); padding-bottom: 10px; margin-bottom: 14px; background: transparent; }
.card-title { font-family: var(--font-heading); font-size: 16px; font-weight: 800; color: var(--color-text); margin: 0 0 4px; }
.card-title a { color: var(--color-text); }
.card-subtitle { margin: 0 0 var(--space-2); text-transform: none; letter-spacing: normal; font-size: 13px; }
.card-body { padding: 0; }
.card-body > p:last-child,
.card-body > ul:last-child { margin-bottom: 0; }
.card.border-info { border-color: var(--color-accent) !important; }

/* Section "window" chrome from SectionWindow.razor — flattened to one
   divider-driven look; the c1-c4 color coding and traffic-light dots are a
   remnant of the old theme and are dropped here, not in the markup. */
.window { border: 0; border-radius: 0; background: transparent; }
.window.c1, .window.c2, .window.c3, .window.c4 { background: transparent; }
.window-top { padding: var(--space-6) 0 var(--space-3); border-bottom: 2px solid var(--color-divider); margin-bottom: var(--space-4); }
.window-top .chrome { display: none; }
.window-top .eyebrow { font: 600 11px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted) !important; }
.window-top h3 { font-family: var(--font-heading); font-size: 20px; margin: 2px 0 0; color: var(--color-text); }
.window-body { margin: 0; background: transparent; border-radius: 0; border: 0; padding: 0; }
.section-block { margin-bottom: var(--space-8); }

/* ══════════════════════════════ cv-table — compact list rows ══════════════════════════════ */
/* Shared by Skills, Tools, Languages and Interests: one row per item instead of
   a card each, so four short sections don't eat a screen of scroll. The name
   column has a fixed basis, which is what makes the rows line up like a table
   without an actual <table> (rows carry admin controls and wrap on mobile). */

.cv-table {
  /* Same opaque surface the cards had - the page's background art shows through
     anything transparent and the rows stop being readable. */
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: 4px 14px;
}

/* Short sections (Tools, Languages, Interests) hold a handful of one-line
   entries: two columns halve their height, and each row still reads as a
   table row. Skills keeps a single column - its keyword lists need the width. */
.cv-table-2col { column-count: 2; column-gap: 32px; }
.cv-table-2col .cv-row { break-inside: avoid; }
/* Half the width means the fixed name column no longer fits - let the name
   take what it needs and keep the meta hard right. */
.cv-table-2col .cv-row-name { flex: 1 1 auto; }

.cv-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  padding: 10px 6px;
  border-bottom: 1px solid var(--color-hairline);
}
/* Only in a single column is the last row visually last - with two columns the
   left column's final row still needs its rule to stay level with the right. */
.cv-table:not(.cv-table-2col) .cv-row:last-child { border-bottom: 0; }
.cv-row:hover { background: var(--color-hover); }

.cv-row-name {
  flex: 0 0 190px;
  font: 700 13px var(--font-heading);
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.cv-row-tags { flex: 1 1 240px; display: flex; flex-wrap: wrap; align-items: baseline; }
.cv-row-tags .badge { margin: 0 6px 0 0; padding: 3px 7px; font-size: 10px; }
.cv-row-note { flex: 1 1 240px; font: 500 12px var(--font-body); color: var(--color-muted); }
.cv-row-meta {
  margin-left: auto;
  font: 500 11px var(--font-body);
  color: var(--color-muted);
  white-space: nowrap;
}

/* AdminItemActions positions itself absolutely inside a card; in a row it's
   just the last cell, and its delete prompt takes a line of its own. */
.cv-row > .position-absolute { position: static !important; margin: 0 !important; }
.cv-row > .alert { flex: 1 0 100%; margin-top: 4px; }

@media (max-width: 640px) {
  .cv-table-2col { column-count: 1; }
  .cv-row-name { flex-basis: 100%; }
  .cv-row-meta { margin-left: 0; }
}

/* ══════════════════════════════ badges / tags ══════════════════════════════ */

.badge, .bg-secondary {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  background: transparent !important;
  color: var(--color-soft, var(--color-text)) !important;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sm);
  padding: 4px 9px;
  margin: 4px 4px 0 0;
}
.bg-primary { background: var(--color-accent) !important; color: var(--color-on-accent) !important; }

/* ══════════════════════════════ alerts ══════════════════════════════ */

.alert { border-radius: var(--radius-md); border: 1px solid var(--color-divider); }
.alert-info { background: var(--color-surface); border-color: var(--color-divider); color: var(--color-text); }
.alert-danger { background: var(--color-surface); border-color: var(--color-accent-active); color: var(--color-text); }
.alert-success { background: var(--color-surface); border-color: var(--color-divider); color: var(--color-text); }
.alert-warning { background: var(--color-surface); border-color: var(--color-accent); color: var(--color-text); }
.bg-light { background: var(--color-hover) !important; border: 1px solid var(--color-divider); }

/* ══════════════════════════════ progress ══════════════════════════════ */

.progress { height: 6px !important; background: var(--color-surface); border-radius: 0; overflow: hidden; }
.progress-bar { background: var(--color-accent); border-radius: 0; box-shadow: var(--color-accent-glow); }

/* ══════════════════════════════ lists ══════════════════════════════ */

ul { list-style: none; margin: var(--space-3) 0 0 0; padding: 0; }
li { position: relative; padding-left: var(--space-4); margin-bottom: var(--space-2); line-height: 1.55; }
li::before { content: ''; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; background: var(--color-accent); }

/* ══════════════════════════════ home / profile ══════════════════════════════ */

.cv-portrait {
  flex: none;
  width: 132px;
  height: 158px;
  overflow: hidden;
  border-radius: 0;
}
.cv-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv-role-label { font: 600 14px var(--font-body); color: var(--color-accent-active); margin-bottom: 14px; }

#skill-tag-search { border-radius: 0; }
.list-group.position-absolute { border: 1px solid var(--color-divider); }

/* Removable skill-tag filter chips (Home.razor) */
.badge.bg-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent !important; color: var(--color-text) !important;
  border: 1px solid var(--color-divider); padding: 8px 12px; font-weight: 600; font-size: 12px;
}

/* ══════════════════════════════ page header — sticky title + quick download ══════════════════════════════ */

.page-header {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: 64px;
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-divider);
  /* Full-bleed across article's gutters so the bar reads as one band with
     the rail header. */
  padding: 0 24px;
  margin: -56px -24px var(--space-2);
}
.page-header h2 { margin: 0; }
.page-header.title-less { justify-content: flex-end; }

/* From 641px up MainLayout.razor.css sets article's gutters to 32px / 24px —
   match them so the bar bleeds exactly to the article edges, no further. */
@media (min-width: 641px) {
  .page-header, .dl-topbar {
    margin-left: -32px; margin-right: -24px;
    padding-left: 32px; padding-right: 24px;
  }
  /* Same gutters as the bar, so the mood image lines up under the page title. */
  .fit-result-head.is-stuck { padding-left: 32px; padding-right: 24px; }
}

/* Below 900px the rail goes off-canvas behind a fixed hamburger and article's
   top padding grows to 88px: the bar cancels that instead of sitting below it,
   and pads left so the title clears the hamburger. Declared after the base
   rules above so it wins on equal specificity. */
@media (max-width: 900px) {
  .page-header, .dl-topbar {
    margin-top: -88px;
    padding-left: 68px;
  }
  .fit-result-head { padding-left: 16px; padding-right: 16px; }
  .fit-result-head.is-stuck { padding-left: 68px; padding-right: 24px; }
}

/* ══════════════════════════════ Download CV — accordion ══════════════════════════════ */

.dl-topbar {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: 64px;
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-divider);
  padding: 0 24px;
  margin: -56px -24px var(--space-2);
}
.dl-topbar h2 { margin: 0; }
.dl-topbar-actions { display: flex; align-items: center; gap: 16px; flex: none; }
.dl-count { font: 500 12px var(--font-body); color: var(--color-muted); white-space: nowrap; }

.dl-sections { display: flex; flex-direction: column; gap: 2px; border-top: 2px solid var(--color-divider); }
.dl-section { border-bottom: 2px solid var(--color-divider); background: transparent; }
.dl-section.open { background: var(--color-surface); }

.dl-section-row { display: flex; align-items: center; gap: 14px; padding: 16px 4px; }

.dl-check {
  flex: none; width: 18px; height: 18px; padding: 0;
  border: 2px solid var(--color-dim); background: transparent;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--color-bg); font: 800 11px var(--font-body);
}
.dl-check.is-some, .dl-check.is-all { border-color: var(--color-text); }
.dl-check.is-all { background: var(--color-text); }
.dl-check.is-some { background: var(--color-dim); }

.dl-section-toggle {
  flex: 1; display: flex; align-items: center; gap: 16px;
  padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: left;
}
.dl-section-title { flex: 1; font: 800 15px var(--font-heading); letter-spacing: -0.01em; color: var(--color-text); }
.dl-section-title.is-empty { color: var(--color-dim); }
.dl-section-meta { font: 500 12px var(--font-body); color: var(--color-muted); white-space: nowrap; }
.dl-chevron { flex: none; color: var(--color-muted); transition: transform 0.12s ease; }
.dl-section.open .dl-chevron { transform: rotate(90deg); }

.dl-section-body { padding: 0 4px 20px 50px; display: none; flex-direction: column; gap: 18px; }
.dl-section.open .dl-section-body { display: flex; }

.dl-item { padding-left: 23px; border-left: 2px solid var(--color-hairline); display: flex; flex-direction: column; gap: 10px; }
.dl-item-toggle { display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: left; }
.dl-item-label { font: 600 13px var(--font-body); color: var(--color-text); }
.dl-item-label.is-off { color: var(--color-dim); }

.dl-fields { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 27px; }
.dl-chip {
  position: relative;
  display: inline-flex; align-items: center;
  padding: 5px 10px;
  border: 1px solid var(--color-hairline);
  background: transparent;
  color: var(--color-dim);
  font: 500 11px var(--font-body);
  cursor: pointer;
}
.dl-chip input {
  position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer;
}
.dl-chip:has(input:checked) { background: var(--color-fill); border-color: var(--color-dim); color: var(--color-text); }
.dl-chip:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.dl-done-row { display: flex; justify-content: flex-end; }
.dl-done-btn { padding: 8px 14px; border: 1px solid var(--color-divider); background: transparent; color: var(--color-text); font: 600 12px var(--font-body); cursor: pointer; }
.dl-done-btn:hover { background: var(--color-hover); }

.dl-intro { color: var(--color-muted); max-width: 52ch; }

/* ══════════════════════════════ pill options — Book a Meeting / Is This a Fit ══════════════════════════════ */

.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-opt {
  position: relative;
  display: inline-flex; align-items: center;
  padding: 9px 14px;
  border: 1px solid var(--color-divider);
  background: transparent;
  color: var(--color-text);
  font: 600 12px var(--font-body);
  cursor: pointer;
}
.pill-opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.pill-opt:has(input:checked) { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); box-shadow: var(--color-accent-glow); }
.pill-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.pill-opt:has(input:disabled) { opacity: 0.4; cursor: not-allowed; }

/* ══════════════════════════════ salary range — two-handle slider ══════════════════════════════ */
/* Two <input type="range"> stacked on one track. Both are transparent apart
   from their thumbs, so the painted band below shows through and reads as a
   single control; pointer-events are re-enabled on the thumbs alone, otherwise
   the top input would swallow every click meant for the one underneath. */

.fit-range { padding-top: 4px; }

.fit-range-track {
  position: relative;
  height: 34px;
  background:
    linear-gradient(to right,
      var(--color-hairline) 0, var(--color-hairline) var(--fit-range-from),
      var(--color-accent) var(--fit-range-from), var(--color-accent) var(--fit-range-to),
      var(--color-hairline) var(--fit-range-to), var(--color-hairline) 100%)
    center / 100% 6px no-repeat;
}

.fit-range-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 34px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none;
}
.fit-range-input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }

.fit-range-input::-webkit-slider-runnable-track { background: transparent; height: 34px; }
.fit-range-input::-moz-range-track { background: transparent; height: 34px; }

.fit-range-input::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  pointer-events: auto;
  width: 18px; height: 18px;
  margin-top: 8px;
  border: 2px solid var(--color-bg);
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: var(--color-accent-glow);
  cursor: grab;
}
.fit-range-input::-moz-range-thumb {
  pointer-events: auto;
  width: 18px; height: 18px;
  border: 2px solid var(--color-bg);
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: var(--color-accent-glow);
  cursor: grab;
}
.fit-range-input:active::-webkit-slider-thumb { cursor: grabbing; }
.fit-range-input:active::-moz-range-thumb { cursor: grabbing; }

.fit-range-readout {
  display: flex; align-items: baseline; gap: 12px;
  margin-top: 6px;
  font: 500 12px var(--font-body);
}
.fit-range-band { font: 700 13px var(--font-heading); color: var(--color-text); }
.fit-range-median { color: var(--color-muted); }
.fit-range-hint { color: var(--color-dim); }

.day-block { border-bottom: 2px solid var(--color-divider); padding: 20px 4px; }
.day-block:first-child { border-top: 2px solid var(--color-divider); }
.day-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.day-block-title { font: 800 15px var(--font-heading); letter-spacing: -0.01em; }
.day-block-meta { font: 500 12px var(--font-body); color: var(--color-muted); }

.fit-result-head {
  /* Parks under the 64px page bar rather than behind it. */
  position: sticky; top: 64px; z-index: 2;
  display: flex; align-items: center; gap: 28px;
  padding: 24px 28px; border-top: 2px solid var(--color-divider); border-bottom: 2px solid var(--color-divider);
  margin-bottom: 32px; background: var(--color-bg);
  transition: padding 0.14s ease, height 0.14s ease;
}
/* Once it sticks it becomes a slim strip - roughly a quarter of its resting
   height - spanning the page bar's width (js/fit-head.js measures the bar and
   sets margin-left/width; only the vertical collapse lives here). */
.fit-result-head.is-stuck {
  height: 50px;
  padding-top: 0; padding-bottom: 0;
  gap: 20px;
  border-top-color: transparent;
}
.fit-result-plate {
  flex: none; width: 148px; height: 148px;
  /* Fixed inset so every mood image sits in the same 148px frame regardless
     of its own bleed. */
  box-sizing: border-box;
  padding: 16px;
  object-fit: contain;
  image-rendering: pixelated;
  transition: width 0.14s ease, height 0.14s ease, padding 0.14s ease;
}
.fit-result-head.is-stuck .fit-result-plate {
  width: 42px; height: 42px; padding: 3px;
}
.fit-criterion { margin-bottom: 28px; }
.fit-criterion-label { font: 600 11px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 10px; }
.fit-optional-badge, .fit-mandatory-badge {
  font: 700 10px var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  white-space: nowrap;
}
.fit-optional-badge {
  color: var(--color-soft, var(--color-text));
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
}
.fit-mandatory-badge {
  color: var(--color-on-accent);
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  box-shadow: var(--color-accent-glow);
}

/* ══════════════════════════════ utilities ══════════════════════════════ */

.gap-2 { gap: var(--space-2) !important; }
.gap-1 { gap: var(--space-1) !important; }
.w-100 { width: 100% !important; }
.w-50 { width: 50% !important; }
.d-grid { display: grid !important; }
.rounded { border-radius: var(--radius-md) !important; }
.rounded-circle { border-radius: 0 !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--space-1) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-6) !important; }
.mb-4 { margin-bottom: var(--space-8) !important; }
.mb-5 { margin-bottom: calc(var(--space-8) * 1.5) !important; }

@media print {
  .page::before { display: none; }
  .rail, .rail-hamburger, .rail-scrim { display: none !important; }
}