/* ==========================================================================
   Manan Singhal — portfolio
   One stylesheet for every page. Palette: "Voltage". DARK ONLY — there is no
   light mode, no theme toggle and no stored preference. The one exception is
   print-resume.css, which stays black-on-white for A4 output.

   Hex values live ONLY in the token block below; every rule after it
   references a variable.

   THE ACCENT MEASURES. Voltage lime marks the thing you are acting on or the
   figure that matters — an active nav item, a key number, a control, a bar
   that has been filled to a value. It never fills a region and never decorates.
   Every tool on this site exists to turn a pile of logged classes into one
   number a student has to live with, so the accent is reserved for those
   numbers and for the controls that produce them.
   ========================================================================== */

:root {
  /* Colour. Ten values, and nothing else may introduce a hex. */
  --bg: #0A0A0B;
  --surface: #141416;
  --surface-alt: #1C1C1F;
  --text: #FAFAF8;
  --muted: #8B8B85;
  --border: #26262A;
  --accent: #D4FF4F;
  /* Darkened from the briefed #232B0D: --muted on it measured 4.31:1, just
     under AA. At #20270C it is 4.52:1, and accent/text on it improve too. */
  --accent-soft: #20270C;
  --on-accent: #1A2200;
  --focus: #D4FF4F;

  /* Kept as an alias so existing rules keep resolving. */
  --text-muted: var(--muted);

  /* --border is a hairline for separation only. It is 1.31:1 against the page,
     which is fine for decoration but far under the 3:1 that WCAG 1.4.11 asks
     of a boundary that identifies a control. Form controls therefore take
     --control-edge, which is --muted and measures 4.96–5.78:1. */
  --control-edge: var(--muted);

  /* Type. Bricolage carries the personality and is used with restraint;
     Instrument Sans does the reading; the mono is where every figure the
     tools produce actually lives, so its tabular numerals earn their place. */
  --font-display: "Bricolage Grotesque", "Archivo", Helvetica, Arial, sans-serif;
  --font-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Curves. Nothing is square except the page edge. */
  --r-card: 16px;
  --r-control: 12px;
  --r-pill: 999px;

  /* Rhythm. Card padding is ~25% above the old values. */
  --pad-card: 1.75rem;
  --pad-card-sm: 1.4rem;
  --section-y: clamp(4rem, 10vw, 7rem);
  --hairline: 0.5px;

  color-scheme: dark;
}

/* ---------- Base ---------- */

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

html { -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.7;
  transition: background-color 0.2s ease, color 0.2s ease;
}

[id] { scroll-margin-top: 5.5rem; }

img { max-width: 100%; display: block; }
a { color: inherit; }
ul, ol { list-style: none; }

::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.container { width: min(1120px, 100% - 2.5rem); margin-inline: auto; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: var(--on-accent);
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

h1, h2, h3 { line-height: 1.1; letter-spacing: -0.02em; font-weight: 800; }

.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.subhead,
.case-block h3 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.9rem;
}

/* Underline sweep. Not a gradient: both stops are the accent, so this is a
   flat rule whose WIDTH animates — the same measure gesture used elsewhere. */
.text-link,
.contact-item a,
.contact-row a,
.article-cta {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  text-decoration: none;
}
.text-link:hover,
.text-link:focus-visible,
.contact-item a:hover,
.contact-item a:focus-visible,
.contact-row a:hover,
.contact-row a:focus-visible,
.article-link:hover .article-cta,
.article-link:focus-visible .article-cta {
  background-size: 100% 1px;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.15s ease;
}
.text-link:hover { color: var(--accent); }

.btn {
  display: inline-block;
  font-family: inherit;
  cursor: pointer;
  padding: 0.85rem 1.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.btn-primary:hover {
  background: transparent;
  color: var(--accent);
}
.btn-ghost {
  border-color: var(--text);
  color: var(--text);
}
.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------- Scroll progress (element created by JS) ---------- */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 80;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 0;
  pointer-events: none;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.site-header.scrolled {
  border-bottom-color: var(--border);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
}
html:not(.js) .site-header { border-bottom-color: var(--border); }

.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  height: 4rem;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.wordmark:hover { color: var(--accent); }

.site-nav {
  display: flex;
  justify-content: center;
  gap: clamp(0.8rem, 1.6vw, 1.5rem);
}

.site-nav a {
  position: relative;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-muted);
  padding-block: 0.35rem;
  transition: color 0.15s ease;
}
.site-nav a:hover { color: var(--text); }

/* THE MEASURE. The accent rule under the current page is exactly as wide as
   its label — the same gesture used for filled bars and key figures. */
.site-nav a[aria-current="page"] { color: var(--accent); }
.site-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--accent);
}

.header-actions { display: flex; align-items: center; gap: 0.5rem; justify-self: end; }

/* ---------- Account control ---------- */

.acct-signin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0 1rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.acct-signin:hover { filter: brightness(1.08); }

.avatar-wrap { position: relative; }

.avatar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface-alt);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.avatar-btn:hover,
.avatar-btn[aria-expanded="true"] { border-color: var(--accent); }

.avatar-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 11rem;
  display: grid;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 0.4rem;
  z-index: 60;
}
.avatar-menu[hidden] { display: none; }
.avatar-menu-email {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  padding: 0.5rem 0.65rem 0.6rem;
  border-bottom: var(--hairline) solid var(--border);
  margin-bottom: 0.3rem;
  overflow-wrap: anywhere;
}
.avatar-menu a,
.avatar-menu button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  padding: 0.6rem 0.65rem;
  border-radius: var(--r-control);
  text-decoration: none;
  cursor: pointer;
}
.avatar-menu a:hover,
.avatar-menu button:hover { background: var(--surface-alt); color: var(--accent); }

.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.nav-toggle:hover { border-color: var(--accent); color: var(--accent); }
.nav-toggle span {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: var(--r-pill);
  background: currentColor;
  transition: transform 0.2s ease;
}

/* ---------- Mobile: full-screen menu ---------- */

@media (max-width: 899px) {
  .nav-toggle { display: inline-flex; }

  .site-nav {
    position: fixed;
    inset: 4rem 0 0 0;
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    padding: 1.5rem 1.25rem 3rem;
    background: var(--bg);
    overflow-y: auto;
    z-index: 55;
  }
  .nav-open .site-nav { display: flex; }
  .nav-open { overflow: hidden; }

  .site-nav a {
    display: flex;
    align-items: center;
    min-height: 3.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: var(--hairline) solid var(--border);
    border-radius: var(--r-control);
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    text-transform: none;
    font-weight: 600;
  }
  .site-nav a[aria-current="page"]::after { display: none; }
  .site-nav a[aria-current="page"] {
    background: var(--accent-soft);
    border-bottom-color: transparent;
  }
  .nav-open .nav-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .nav-open .nav-toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
}

/* ---------- Hero (index) ---------- */

.hero { padding-block: clamp(4rem, 10vw, 8rem); }

.hero-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.7rem;
  margin-bottom: 2.2rem;
}

.hero h1 {
  font-size: clamp(4rem, 12vw, 9.5rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.hero-sub {
  margin-top: 1.6rem;
  font-size: clamp(1.02rem, 2.2vw, 1.28rem);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 46ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2.4rem;
}

/* ---------- Stat strip ---------- */

.stats { border-block: 1px solid var(--border); }

.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); }

.stat { padding: 1.6rem 1rem 1.5rem; }
.stat:nth-child(even) { border-left: 1px solid var(--border); }
.stat:nth-child(n+3) { border-top: 1px solid var(--border); }

@media (min-width: 820px) {
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .stat:nth-child(n+3) { border-top: 0; }
  .stat:not(:first-child) { border-left: 1px solid var(--border); }
}

.stat-num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(2.2rem, 5.2vw, 3.6rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  transition: color 0.15s ease;
}
.stat:hover .stat-num { color: var(--accent); }

.stat-label {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

/* ---------- Intro (index) ---------- */

.intro { padding-block: clamp(4rem, 10vw, 8rem) clamp(3rem, 7vw, 5rem); }

.intro-text {
  margin-top: 1.2rem;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: -0.01em;
  max-width: 48ch;
}

/* ---------- Work preview cards (index) ---------- */

.work-preview { padding-block: 0 clamp(2rem, 5vw, 3rem); }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1rem;
  margin-bottom: 2.5rem;
}

.section-head h2 {
  font-size: clamp(2.2rem, 4.8vw, 3.4rem);
  letter-spacing: -0.025em;
}

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 860px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
}

.card {
  display: block;
  background-color: var(--surface);
  border: 1px solid var(--border);
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease;
}
.card:hover,
.card:focus-visible { border-color: var(--accent); }

.card-title {
  display: block;
  margin: 0 0 0.35rem;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  transition: color 0.18s ease;
}
.card:hover .card-title { color: var(--accent); }

.card-role {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.card-desc {
  display: block;
  margin: 0.8rem 0 1.1rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.card-cta .arrow { transition: transform 0.18s ease; }
.card:hover .card-cta .arrow { transform: translateX(4px); }

/* ---------- Page head (work, about) ---------- */

.page-head { padding-block: clamp(4rem, 10vw, 8rem) clamp(2.5rem, 6vw, 4rem); }

.page-head h1 {
  margin-top: 0.8rem;
  font-size: clamp(3.1rem, 10vw, 6.5rem);
  font-weight: 900;
  letter-spacing: -0.03em;
}

.page-sub {
  margin-top: 1.2rem;
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 52ch;
}

/* ---------- Case rail (work) ---------- */

.case-rail { display: none; }

/* Needs (rail width + offset) ≈ 165px of true side margin beyond the
   1120px container, which first exists at ~1450px viewports. */
@media (min-width: 1450px) {
  .case-rail {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    position: fixed;
    right: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    text-align: right;
  }
  .case-rail a {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
  }
  .case-rail a:hover,
  .case-rail a:focus-visible { color: var(--text); }
  .case-rail a.active { color: var(--accent); }
  .case-rail a.active::after {
    content: "";
    display: inline-block;
    width: 1.4rem;
    height: 1px;
    background: var(--accent);
    margin-left: 0.5rem;
    vertical-align: middle;
  }
}

/* ---------- Case studies (work) ---------- */

.case { border-top: 1px solid var(--border); padding-block: clamp(4rem, 10vw, 8rem); }

.case-head {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 2.25rem;
}

.case-ghost {
  position: absolute;
  top: 50%;
  left: -0.06em;
  transform: translateY(-56%);
  z-index: 0;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(5.5rem, 15vw, 10rem);
  line-height: 1;
  color: var(--text);
  opacity: 0.1;
  pointer-events: none;
  user-select: none;
}


.case-head h2 {
  position: relative;
  z-index: 1;
  font-size: clamp(2.3rem, 6.2vw, 4rem);
  letter-spacing: -0.03em;
}

.case-grid { display: grid; gap: 2.5rem; }

@media (min-width: 940px) {
  .case-grid { grid-template-columns: 260px minmax(0, 1fr); gap: 4rem; }
  .case-meta { position: sticky; top: 5.5rem; }
}

.case-meta { display: grid; gap: 1.1rem; align-content: start; }
.case-meta .eyebrow { margin-bottom: 0.2rem; }
.case-meta p { font-size: 0.95rem; font-weight: 500; line-height: 1.45; }

.case-block { margin-bottom: 2.4rem; }
.case-block:last-child { margin-bottom: 0; }
.case-block p { max-width: 62ch; }
.case-block p + p { margin-top: 0.9rem; }

.case-list li {
  position: relative;
  padding-left: 1.6rem;
  max-width: 62ch;
}
.case-list li + li { margin-top: 0.55rem; }
.case-list li::before {
  content: "\2014";
  position: absolute;
  left: 0;
  color: var(--text-muted);
}

.result-stat {
  display: block;
  margin-bottom: 0.6rem;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(1.9rem, 4.4vw, 2.7rem);
  letter-spacing: -0.03em;
  color: var(--accent);
}

/* ---------- Journey Intellect result: hero figure + endpoint chart ---------- */

.result-hero { margin-top: 1.4rem; }

.result-figure {
  display: block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(4rem, 14vw, 9rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
}

.result-sub {
  margin-top: 0.5rem;
  color: var(--text-muted);
}

.result-endpoints {
  margin-top: 0.5rem;
  font-weight: 700;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
.result-endpoints .result-arrow { color: var(--text-muted); }

.chart {
  position: relative;
  background-color: var(--surface);
  border: 1px solid var(--border);
  padding: 1.75rem 1.5rem 1.25rem;
  margin-top: 1.8rem;
  max-width: 560px;
}

.chart-bars {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: clamp(0.8rem, 3vw, 1.8rem);
  align-items: end;
  height: 230px;
}

.chart-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 0.45rem;
}

.chart-value {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.chart-bar {
  width: min(100%, 72px);
  height: var(--h);
  min-height: 6px;
  background: var(--accent);
}

.chart-connector { position: relative; height: 100%; }
.chart-connector svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--text-muted);
}
.chart-connector span {
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface);
  padding: 0 0.5rem;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .chart-connector span {
    font-size: 0.55rem;
    letter-spacing: 0.08em;
    padding: 0 0.3rem;
  }
}

.chart-months {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: clamp(0.8rem, 3vw, 1.8rem);
  border-top: 1px solid var(--border);
  margin-top: 0.7rem;
  padding-top: 0.55rem;
}
.chart-months span {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.chart-tooltip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  transform: translate(-50%, -100%);
  background: var(--text);
  color: var(--bg);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.35rem 0.6rem;
  white-space: nowrap;
}

figcaption {
  margin-top: 1rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ---------- Pipeline steps (work + about): click-to-expand ---------- */

.pipeline {
  display: grid;
  gap: 1.8rem;
  margin-top: 1.6rem;
  align-items: start;
}

@media (min-width: 880px) {
  .pipeline:not(.pipeline-stack) { grid-template-columns: repeat(4, 1fr); gap: 2.2rem; }
  .pipeline:not(.pipeline-stack) li:not(:last-child)::after {
    content: "\2192";
    position: absolute;
    top: 0.85rem;
    right: -1.55rem;
    color: var(--text-muted);
  }
}

.pipeline li { position: relative; }

.step-toggle {
  display: flex;
  width: 100%;
  align-items: baseline;
  gap: 0.7rem;
  background: none;
  border: 0;
  border-top: 1px solid var(--text);
  padding: 0.9rem 0 0.6rem;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
html:not(.js) .step-toggle { cursor: default; }

.step-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--accent);
}

.step-name {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.step-icon {
  display: inline-block;
  margin-left: auto;
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1;
}
html:not(.js) .step-icon { display: none; }
.step-toggle[aria-expanded="true"] .step-icon { transform: rotate(45deg); }

.step-body { display: grid; grid-template-rows: 1fr; }
.step-toggle[aria-expanded="false"] + .step-body { grid-template-rows: 0fr; }
.step-body > div { overflow: hidden; }
.step-body p {
  padding: 0.1rem 0 0.5rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.confidential { margin-top: 1.1rem; font-size: 0.78rem; color: var(--text-muted); }

/* ---------- About ---------- */

.lead {
  font-size: clamp(1.2rem, 2.6vw, 1.55rem);
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -0.01em;
  max-width: 44ch;
  margin-top: 1.4rem;
}

.bio-text {
  display: grid;
  gap: 1rem;
  margin-top: 1.4rem;
  max-width: 62ch;
}

.about-section {
  border-top: 1px solid var(--border);
  padding-block: clamp(4rem, 10vw, 8rem);
}

.about-grid { display: grid; gap: 2rem; }

@media (min-width: 900px) {
  .about-grid { grid-template-columns: 260px minmax(0, 1fr); gap: 4rem; }
}

.about-grid h2 { font-size: 1.6rem; letter-spacing: -0.015em; }

.timeline li {
  display: grid;
  grid-template-columns: 105px 1fr;
  gap: 1.25rem;
  padding: 1.05rem 0;
  border-top: 1px solid var(--border);
}
.timeline li:first-child { border-top: 0; padding-top: 0; }

.timeline-year {
  padding-top: 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.timeline p { font-size: 0.95rem; max-width: 56ch; }

.honors { margin-top: 1.5rem; display: grid; }

@media (min-width: 700px) {
  .honors { grid-template-columns: 1fr 1fr; column-gap: 3rem; }
}

.honors li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--border);
  font-size: 0.92rem;
  font-weight: 500;
}
.honors .year {
  color: var(--text-muted);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.pullquote {
  font-weight: 500;
  font-size: clamp(1.55rem, 3.6vw, 2.35rem);
  line-height: 1.4;
  border-left: 2px solid var(--accent);
  padding: 0.4rem 0 0.4rem 1.5rem;
  margin-top: 2.4rem;
  max-width: 40ch;
}

.tools-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.tools-list li:not(:last-child)::after {
  content: "\00B7";
  margin: 0 0.8rem;
  color: var(--text-muted);
  font-weight: 400;
}

.article-link {
  display: block;
  background-color: var(--surface);
  border: 1px solid var(--border);
  padding: 1.5rem;
  margin-top: 1.5rem;
  max-width: 560px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease;
}
.article-link:hover,
.article-link:focus-visible { border-color: var(--accent); }

.article-title {
  display: block;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.35;
}
.article-desc {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.88rem;
  color: var(--text-muted);
}
.article-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.article-cta .arrow { transition: transform 0.18s ease; }
.article-link:hover .article-cta { color: var(--accent); }
.article-link:hover .article-cta .arrow { transform: translateX(4px); }

.edu-item {
  display: grid;
  gap: 0.15rem;
  padding: 1rem 0;
  border-top: 1px solid var(--border);
}
.edu-item:first-child { border-top: 0; padding-top: 0; }
.edu-item strong { font-weight: 700; }
.edu-meta { font-size: 0.88rem; color: var(--text-muted); }

.certs { margin-top: 1.4rem; }
.certs li { position: relative; padding-left: 1.6rem; font-size: 0.92rem; }
.certs li + li { margin-top: 0.5rem; }
.certs li::before {
  content: "\2014";
  position: absolute;
  left: 0;
  color: var(--text-muted);
}

.contact-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1.25rem;
  align-items: baseline;
  padding: 1rem 0;
  border-top: 1px solid var(--border);
}
.contact-row:first-child { border-top: 0; padding-top: 0; }

.contact-row a {
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  font-weight: 600;
  overflow-wrap: anywhere;
  transition: color 0.15s ease;
}
.contact-row a:hover { color: var(--accent); }

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--border);
  margin-top: clamp(3rem, 8vw, 5.5rem);
  padding-block: clamp(3rem, 7vw, 4.5rem) 1.75rem;
}

.footer-head h2 {
  margin: 0.4rem 0 0.8rem;
  font-size: clamp(2.3rem, 5.6vw, 3.8rem);
  letter-spacing: -0.03em;
}

.footer-note { color: var(--text-muted); max-width: 44ch; }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
  margin-top: 2.5rem;
}

@media (min-width: 620px) {
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .contact-grid { grid-template-columns: repeat(4, 1fr); }
}

.contact-item a {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.95rem;
  font-weight: 500;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
  overflow-wrap: anywhere;
  transition: color 0.15s ease;
}
.contact-item a:hover { color: var(--accent); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  border-top: 1px solid var(--border);
  margin-top: 3rem;
  padding-top: 1.4rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.site-footer.compact .footer-head,
.site-footer.compact .contact-grid { display: none; }
.site-footer.compact { padding-top: 0; }
.site-footer.compact .footer-bottom { border-top: 0; margin-top: 0; padding-top: 1.4rem; }

/* ---------- Hero role line (index) ---------- */

.hero-role { margin-top: 0.7rem; font-size: 0.9rem; color: var(--text-muted); }

/* ---------- Featured story (index) ---------- */

.featured { padding-block: 0 clamp(3rem, 7vw, 5rem); }

.featured-grid { display: grid; gap: 2.5rem; align-items: center; }

@media (min-width: 880px) {
  .featured-grid { grid-template-columns: 1.1fr 1fr; gap: 4rem; }
}

.featured-photo { margin: 0; }

.featured-photo img,
.photo-row img,
.article-img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
}

.featured-text h2 {
  font-size: clamp(2.2rem, 4.8vw, 3.4rem);
  letter-spacing: -0.025em;
  margin: 0.5rem 0 0.9rem;
}
.featured-text p { max-width: 52ch; }
.featured-text .text-link { margin-top: 1.2rem; }

/* ---------- Writing band (index) ---------- */

.writing-band { padding-block: 0 clamp(3rem, 7vw, 5rem); }

.writing-band .band {
  border-block: 1px solid var(--border);
  padding-block: clamp(2.2rem, 5vw, 3.2rem);
}

.band h2 {
  font-size: clamp(1.85rem, 4vw, 2.7rem);
  letter-spacing: -0.02em;
  margin: 0.5rem 0 0.8rem;
}

.band-body {
  color: var(--text-muted);
  max-width: 60ch;
  margin-bottom: 1.2rem;
}

/* ---------- Story chapters (about) ---------- */

.chapters {
  display: grid;
  gap: 2.4rem;
  margin-top: 2.8rem;
  max-width: 62ch;
}

.chapter { border-top: 1px solid var(--text); padding-top: 1rem; }

.chapter-title {
  font-size: 1.6rem;
  letter-spacing: -0.015em;
  margin: 0.45rem 0 0.6rem;
}

/* ---------- Case photos (work) ---------- */

.photo-row { display: grid; gap: 1.5rem; margin-bottom: 2.4rem; }

@media (min-width: 560px) {
  .photo-row { grid-template-columns: 1fr 1fr; }
}

.photo-row figure { margin: 0; }

/* ---------- Article image (about) ---------- */

.article-img { margin-bottom: 1.1rem; }

/* ---------- Contact form (about) ---------- */

.contact-form {
  display: grid;
  gap: 1.2rem;
  max-width: 560px;
  margin-bottom: 2.6rem;
}

.form-field { display: grid; gap: 0.4rem; }

.form-field label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 0.7rem 0.8rem;
  font: inherit;
  transition: border-color 0.15s ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--accent); }

.form-field textarea { resize: vertical; min-height: 8rem; }

.contact-form .btn { justify-self: start; }

.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Now page ---------- */

.now-list li {
  border-top: 1px solid var(--border);
  padding: 1rem 0;
  font-size: 0.95rem;
  max-width: 62ch;
}
.now-list li:first-child { border-top: 0; padding-top: 0; }

.now-updated {
  margin-top: 2.5rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ---------- 404 ---------- */

.error-code {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(7rem, 28vw, 14rem);
  line-height: 1;
  color: var(--text);
  opacity: 0.12;
  user-select: none;
}

.error-page h1 {
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  margin-top: 0.5rem;
}
.error-page .hero-actions { margin-top: 2rem; }

/* ---------- Motion (everything here is gated on prefers-reduced-motion) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    transition-delay: var(--rd, 0ms);
  }
  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
  /* Reveal elements that also need their own hover transitions */
  .js .card.reveal,
  .js .article-link.reveal {
    transition: opacity 0.3s ease-out, transform 0.3s ease-out, border-color 0.2s ease;
  }

  .js .chart .chart-bar {
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
  }
  .js .chart.in-view .chart-bar { transform: scaleY(1); }
  .js .chart .chart-bars > :nth-child(1) .chart-bar { transition-delay: 0.1s; }
  .js .chart .chart-bars > :nth-child(3) .chart-bar { transition-delay: 0.25s; }

  .text-link,
  .contact-item a,
  .contact-row a,
  .article-cta { transition-property: background-size, color, border-color; transition-duration: 0.25s, 0.15s, 0.15s; transition-timing-function: ease; }

  .btn { transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.2s ease-out; }

  .stat-num { transition: color 0.15s ease, transform 0.15s ease; }
  .stat:hover .stat-num { transform: translateY(-2px); }

  .step-icon { transition: transform 0.2s ease; }
  .step-body { transition: grid-template-rows 0.25s ease; }
}

/* ==========================================================================
   VOLTAGE — interaction layer
   A flat accent edge on interaction. No glow, no pulsing, nothing animated.
   ========================================================================== */

.btn:hover,
.btn:focus-visible,
.nav-toggle:hover,
.nav-toggle:focus-visible,
.card:hover,
.card:focus-visible,
.article-link:hover,
.article-link:focus-visible,
.service:hover,
.tool-card:hover,
.tool-card:focus-visible,
.chart-bar:focus-visible,
.fab:hover,
.fab:focus-visible,
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  box-shadow: 0 0 0 1px var(--accent);
}

/* Focus ring uses the same signal language as hover. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* Atmosphere device (the single permitted one): hairline corner accents
   that appear on card hover/focus. Static — drawn, never animated. */
.card,
.tool-card,
.service {
  position: relative;
}
.card::after,
.tool-card::after,
.service::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 12px;
  height: 12px;
  border-top: 1px solid var(--accent);
  border-right: 1px solid var(--accent);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.card:hover::after,
.card:focus-visible::after,
.tool-card:hover::after,
.tool-card:focus-visible::after,
.service:hover::after { opacity: 1; }

/* ---------- Hero entrance (index only, first paint — never blocks content) ---------- */

/* The entrance only ever hides content while the root carries .hero-armed,
   which script.js adds before first paint and ALWAYS removes again on a
   timer. If the animation never runs, the timer still reveals the hero —
   the page can never be left blank. No JS: the class is never added. */
@media (prefers-reduced-motion: no-preference) {
  .js.hero-armed .hero-enter > * {
    opacity: 0;
    transform: translateY(12px);
    animation: hero-rise 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .js.hero-armed .hero-enter > :nth-child(1) { animation-delay: 0.04s; }
  .js.hero-armed .hero-enter > :nth-child(2) { animation-delay: 0.12s; }
  .js.hero-armed .hero-enter > :nth-child(3) { animation-delay: 0.2s; }
  .js.hero-armed .hero-enter > :nth-child(4) { animation-delay: 0.28s; }
  .js.hero-armed .hero-enter > :nth-child(5) { animation-delay: 0.36s; }

  @keyframes hero-rise {
    to { opacity: 1; transform: none; }
  }

  /* Cyan underline draws left-to-right once the h1 has landed. Dropping
     .hero-armed leaves the base rule below, i.e. the finished underline. */
  .js.hero-armed .hero-enter h1::after {
    transform: scaleX(0);
    transform-origin: 0 50%;
    animation: hero-underline 0.5s ease-out 0.5s forwards;
  }
  @keyframes hero-underline {
    to { transform: scaleX(1); }
  }
}

/* Reduced motion / no JS / after the timer: the underline is simply drawn. */
.hero-enter h1::after {
  content: "";
  display: block;
  height: 2px;
  width: 100%;
  margin-top: 0.2em;
  background: var(--accent);
}

/* ---------- Featured image hover ---------- */

.featured-photo { overflow: hidden; }
.featured-photo img { transition: transform 0.3s ease; }

@media (prefers-reduced-motion: no-preference) {
  .featured-photo:hover img { transform: scale(1.03); }
}

/* ---------- Floating contact button ---------- */

.fab-wrap {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 70;
}

.fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--accent);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.2s ease;
}
.fab svg { width: 20px; height: 20px; }

.fab-pop {
  position: absolute;
  right: 0;
  bottom: 3.75rem;
  min-width: 12rem;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 0.4rem;
  display: grid;
}
.fab-pop[hidden] { display: none; }

.fab-pop a {
  padding: 0.6rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--text);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.fab-pop a:hover,
.fab-pop a:focus-visible {
  background: var(--accent-soft);
  color: var(--accent);
}

/* ---------- Newsletter slide-in (bottom-left, never collides with the FAB) ---------- */

.nl-card {
  position: fixed;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 65;
  width: min(20rem, calc(100vw - 2.5rem));
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  padding: 1.1rem 1.2rem;
}
.nl-card[hidden] { display: none; }

.nl-card h2 {
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.35rem;
}
.nl-card p {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin-bottom: 0.8rem;
}
.nl-close {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  width: 1.9rem;
  height: 1.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease;
}
.nl-close:hover { color: var(--accent); }

@media (max-width: 480px) {
  /* Stack clear of the FAB on small screens. */
  .nl-card { bottom: 5rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .nl-card {
    transform: translateY(12px);
    opacity: 0;
    transition: transform 0.25s ease-out, opacity 0.25s ease-out;
  }
  .nl-card.is-in { transform: none; opacity: 1; }
}

/* ---------- Services ---------- */

.services-list { display: grid; gap: 1.25rem; }

@media (min-width: 820px) {
  .services-list { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}

.service {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 1.6rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.service:hover { border-color: var(--accent); }

.service h2 {
  font-size: 1.3rem;
  letter-spacing: -0.015em;
  margin-bottom: 0.9rem;
}

.service-points { margin-bottom: 1.1rem; }
.service-points li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.service-points li + li { margin-top: 0.45rem; }
.service-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 1px;
  background: var(--accent);
}

.service-proof {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 0.9rem;
  margin-bottom: 1.1rem;
}
.service-proof a { color: var(--accent); }

.service-note {
  margin-top: 2.5rem;
  font-size: 0.88rem;
  color: var(--text-muted);
  max-width: 60ch;
}

/* ---------- Tools ---------- */

.tools-grid { display: grid; gap: 1.25rem; }

@media (min-width: 760px) {
  .tools-grid { grid-template-columns: repeat(2, 1fr); }
}

.tool-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 1.6rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.tool-card:hover,
.tool-card:focus-visible { border-color: var(--accent); }

.tool-card h2 {
  font-size: 1.3rem;
  letter-spacing: -0.015em;
  margin: 0.5rem 0 0.6rem;
}
.tool-card p { font-size: 0.92rem; color: var(--text-muted); margin-bottom: 1rem; }

/* ---------- Resume builder ---------- */

.builder-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }
@media (min-width: 1000px) { .builder-tabs { display: none; } }

.builder-tab {
  flex: 1;
  padding: 0.6rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.builder-tab[aria-selected="true"] {
  border-color: var(--accent);
  color: var(--accent);
}

.builder-layout { display: grid; gap: 2rem; align-items: start; }

@media (min-width: 1000px) {
  .builder-layout { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .builder-pane { display: block !important; }
  .builder-preview-wrap { position: sticky; top: 5.5rem; }
}

fieldset {
  border: 1px solid var(--border);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
legend {
  padding: 0 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.field-grid { display: grid; gap: 1rem; }
@media (min-width: 560px) {
  .field-grid.two { grid-template-columns: 1fr 1fr; }
}

.tip {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin-top: 0.6rem;
}

.entry {
  border: 1px solid var(--border);
  padding: 1rem;
  margin-bottom: 1rem;
}
.entry-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.8rem;
}
.entry-head span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.btn-small {
  padding: 0.4rem 0.8rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.btn-small:hover,
.btn-small:focus-visible { border-color: var(--accent); color: var(--accent); }

.builder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
  margin-bottom: 1.25rem;
}

/* On-screen resume preview. Print rules live in print-resume.css. */
#resume-preview {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: clamp(1.25rem, 4vw, 2.25rem);
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
#resume-preview h2 {
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  margin-bottom: 0.3rem;
}
#resume-preview .r-contact {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 1.1rem;
}
#resume-preview h3 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.3rem;
  margin: 1.3rem 0 0.7rem;
}
#resume-preview .r-role { font-weight: 700; }
#resume-preview .r-meta {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}
#resume-preview .r-entry + .r-entry { margin-top: 0.9rem; }
#resume-preview .r-bullets { margin-top: 0.3rem; }
#resume-preview .r-bullets li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: 0.2rem;
}
#resume-preview .r-bullets li::before {
  content: "\2022";
  position: absolute;
  left: 0.2rem;
}
#resume-preview .r-empty { color: var(--text-muted); font-style: italic; }

.builder-footer {
  border-top: 1px solid var(--border);
  margin-top: 3rem;
  padding-top: 1.4rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.builder-footer a { color: var(--accent); }

noscript .noscript-msg {
  display: block;
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

/* ==========================================================================
   SHARED TOOL SYSTEM (/labs/)
   Cyan stays interaction, gold stays data. Badges are status, not decoration.
   ========================================================================== */

.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--border);
  color: var(--text-muted);
  white-space: nowrap;
}

.badge-live { border-color: var(--accent); color: var(--accent); }
.badge-beta { border-color: var(--accent); color: var(--accent); }
.badge-planned { opacity: 0.75; }


.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.8rem 0 1rem;
}

/* ---------- Privacy notice ---------- */

.privacy-notice {
  display: block;
  background: var(--accent-soft);
  border-left: 2px solid var(--accent);
  padding: 0.8rem 1rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text);
  max-width: 62ch;
  margin-top: 1.2rem;
}

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

.empty-state {
  border: 1px dashed var(--border);
  padding: 1.5rem 1.25rem;
  text-align: center;
  font-size: 0.88rem;
  color: var(--text-muted);
}

/* ---------- Split-pane tool layout ---------- */

.tool-split { display: grid; gap: 2rem; align-items: start; }

@media (min-width: 1000px) {
  .tool-split { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .tool-split-sticky { position: sticky; top: 5.5rem; }
}

.tool-step { margin-bottom: 2.25rem; }
.tool-step > h2 {
  font-size: 1.15rem;
  letter-spacing: -0.015em;
  margin-bottom: 0.3rem;
}
.tool-step > .step-hint {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
  max-width: 62ch;
}

/* ---------- Action bars ---------- */

.action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 1.25rem;
}
.action-bar .spacer { flex: 1 1 auto; }

/* ---------- Labs hub cards ---------- */

.lab-grid { display: grid; gap: 1.25rem; }
@media (min-width: 800px) { .lab-grid { grid-template-columns: 1fr 1fr; } }

.lab-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 1.6rem;
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.lab-card:hover { border-color: var(--accent); background: var(--surface-alt); }
.lab-card::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 12px;
  height: 12px;
  border-top: 1px solid var(--accent);
  border-right: 1px solid var(--accent);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.lab-card:hover::after { opacity: 1; }

.lab-card h2 { font-size: 1.35rem; letter-spacing: -0.015em; margin-bottom: 0.5rem; }
.lab-card p { font-size: 0.92rem; color: var(--text-muted); }
.lab-card .btn { align-self: flex-start; margin-top: auto; }

.planned-line {
  margin-top: 2rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ---------- About-this-project panel ---------- */

.about-panel {
  border: 1px solid var(--border);
  background: var(--surface-alt);
  padding: 1.4rem 1.5rem;
  margin-top: 3rem;
  max-width: 62ch;
}
.about-panel h2 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.9rem;
}
.about-panel dt {
  font-size: 0.8rem;
  font-weight: 700;
  margin-top: 0.7rem;
}
.about-panel dt:first-of-type { margin-top: 0; }
.about-panel dd { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; }
.about-panel .panel-meta {
  margin-top: 1.2rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* ---------- Toasts ---------- */

.toast-region {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 90;
  display: grid;
  gap: 0.5rem;
  pointer-events: none;
  width: min(24rem, calc(100vw - 2.5rem));
}

.toast {
  background: var(--surface);
  border: 1px solid var(--accent);
  color: var(--text);
  padding: 0.7rem 1rem;
  font-size: 0.85rem;
  text-align: center;
}
.toast-error { border-color: var(--accent); }

/* ---------- Confirm modal ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(0, 0, 0, 0.55);
}

.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 1.5rem;
  width: min(26rem, 100%);
}
.modal-text { font-size: 0.95rem; line-height: 1.55; margin-bottom: 1.25rem; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: flex-end; }

/* ==========================================================================
   AUTH GATE (login / not-configured pages, rendered by the edge function)
   ========================================================================== */

.gate-body {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.gate-wrap { width: 100%; }

.gate-card {
  width: min(24rem, 100%);
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: clamp(1.5rem, 5vw, 2.25rem);
}

.gate-title { font-size: 1.75rem; letter-spacing: -0.02em; }

.gate-sub {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.gate-error {
  margin-top: 1rem;
  border-left: 2px solid var(--accent);
  background: var(--surface-alt);
  padding: 0.6rem 0.8rem;
  font-size: 0.85rem;
  color: var(--text);
}

.gate-form { display: grid; gap: 1rem; margin-top: 1.5rem; }
.gate-form .btn { justify-self: start; }

/* ==========================================================================
   ADMIN DASHBOARD
   ========================================================================== */

.admin-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.range-switch { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.range-btn {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4rem 0.7rem;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.range-btn:hover,
.range-btn:focus-visible { border-color: var(--accent); color: var(--accent); }
.range-btn[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.admin-updated {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
}

.admin-block { margin-bottom: clamp(2rem, 5vw, 3rem); }

.admin-state {
  border: 1px dashed var(--border);
  padding: 1.1rem 1.25rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.admin-state.is-error { border-style: solid; border-color: var(--accent); color: var(--text); }
.admin-state.is-empty { border-style: dashed; }
.admin-state a { color: var(--accent); }

.admin-stats { border: 1px solid var(--border); }
.admin-stats .stat { padding: 1.25rem 1rem; }

.admin-stat-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.admin-delta { font-weight: 600; }
.admin-delta.is-good { color: var(--accent); }
.admin-delta.is-bad { color: var(--accent); }
.admin-delta.is-flat { color: var(--text-muted); }

/* ---------- Series chart ---------- */

.admin-chart {
  position: relative;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 1.25rem;
  margin: 0;
}

.admin-svg {
  display: block;
  width: 100%;
  height: 190px;
}

.admin-bar {
  fill: var(--accent);
  transition: fill 0.15s ease;
}
.admin-bar:hover,
.admin-bar:focus-visible { fill: var(--accent); }
.admin-bar:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.admin-tip {
  position: absolute;
  top: 0.6rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 0.3rem 0.6rem;
  white-space: nowrap;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .admin-bar {
    transform-box: fill-box;
    transform-origin: bottom;
    animation: admin-bar-rise 0.35s ease-out both;
    animation-delay: var(--bar-delay, 0ms);
  }
  @keyframes admin-bar-rise {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
  }
}

/* ---------- Tables ---------- */

.admin-tables { display: grid; gap: clamp(2rem, 5vw, 3rem); }

@media (min-width: 900px) {
  .admin-tables { grid-template-columns: 1fr 1fr; }
}

.admin-table-wrap { overflow-x: auto; }

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.admin-table th,
.admin-table td {
  text-align: left;
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--border);
  overflow-wrap: anywhere;
}
.admin-table th {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.admin-table td.admin-num,
.admin-table th.admin-num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.admin-table tbody tr:hover { background: var(--surface-alt); }

.admin-subtable {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 1.2rem 0 0.4rem;
}
.admin-subtable:first-child { margin-top: 0; }

/* ---------- Submissions ---------- */

.admin-care {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 0.9rem;
}

.admin-total {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.9rem;
}

.admin-submission {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 1rem 1.15rem;
  margin-bottom: 0.8rem;
}

.admin-sub-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.admin-sub-name { font-weight: 700; }

.admin-sub-meta {
  margin-top: 0.3rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.admin-sub-meta a { color: var(--accent); }

.admin-sub-message {
  margin-top: 0.7rem;
  font-size: 0.9rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   SEMESTER TOOL (/labs/semester/)
   Category tints are mixed from the two palette accents only — no new hues.
   ========================================================================== */

.cat-dsc  { --cat: var(--accent); }
.cat-dse  { --cat: color-mix(in srgb, var(--accent) 70%, var(--muted)); }
.cat-ge   { --cat: color-mix(in srgb, var(--accent) 45%, var(--muted)); }
.cat-aec  { --cat: color-mix(in srgb, var(--accent) 45%, var(--muted)); }
.cat-sec  { --cat: color-mix(in srgb, var(--accent) 25%, var(--muted)); }
.cat-vac  { --cat: var(--muted); }
.cat-iapc { --cat: color-mix(in srgb, var(--accent) 85%, var(--muted)); }

.badge[class*="cat-"] { border-color: var(--cat, var(--border)); color: var(--cat, var(--text-muted)); }

/* ---------- Setup wizard ---------- */

.wiz-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.wiz-dot {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--border);
  padding: 0.35rem 0.7rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.wiz-dot.is-current { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.wiz-dot.is-done { border-color: var(--accent); color: var(--accent); }
.wiz-dot-num { font-family: var(--font-mono); font-weight: 600; }

.wiz-title { font-size: 1.35rem; letter-spacing: -0.015em; margin-bottom: 0.3rem; }

.wiz-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.wiz-error {
  margin-top: 1rem;
  border-left: 2px solid var(--accent);
  background: var(--surface-alt);
  padding: 0.6rem 0.8rem;
  font-size: 0.85rem;
}

.verify-note {
  margin-top: 1.1rem;
  border-left: 2px solid var(--accent);
  padding-left: 0.8rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 62ch;
}

.preset-summary { margin-top: 1.5rem; }

.preset-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.cat-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  border: 1px solid var(--cat, var(--border));
  padding: 0.25rem 0.55rem;
  font-size: 0.72rem;
}
.cat-code { font-family: var(--font-mono); font-weight: 600; color: var(--cat, var(--text)); }
.cat-count { color: var(--text-muted); }

.preset-total {
  margin-top: 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent);
}

.course-row,
.slot-block {
  border: 1px solid var(--border);
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}

.credit-tally {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
}
.tally-warn { color: var(--accent); }

.slot-list { display: grid; gap: 0.6rem; }

.slot-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.slot-row select,
.slot-row input {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 0.45rem 0.5rem;
  font: inherit;
  font-size: 0.85rem;
  min-width: 0;
  flex: 1 1 7rem;
}
.slot-row select:focus,
.slot-row input:focus { border-color: var(--accent); }

/* ---------- View switch ---------- */

.view-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 2rem;
}

.view-btn {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.5rem 0.9rem;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.view-btn:hover,
.view-btn:focus-visible { border-color: var(--accent); color: var(--accent); }
.view-btn[aria-selected="true"] {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

/* ---------- Today ---------- */

.today-date {
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}

.class-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  padding: 1.1rem 1.2rem;
  margin-bottom: 1rem;
}
.class-card.is-present { border-left-color: var(--accent); }
.class-card.is-absent { border-left-color: var(--accent); }
.class-card.is-cancelled,
.class-card.is-holiday { border-left-color: var(--muted); opacity: 0.75; }

.class-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem;
  align-items: baseline;
}
.class-time { display: flex; flex-direction: column; }
.class-hours {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent);
}
.class-room { font-size: 0.75rem; color: var(--text-muted); }
.class-id { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.class-name { font-weight: 700; }

.class-status {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* One tap, big target — 44px+ per platform guidance. */
.mark-actions { display: flex; gap: 0.6rem; margin-top: 0.9rem; }

.mark-btn {
  flex: 1 1 0;
  min-height: 3rem;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.mark-present:hover,
.mark-present:focus-visible,
.mark-present[aria-pressed="true"] {
  border-color: var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.mark-absent:hover,
.mark-absent:focus-visible,
.mark-absent[aria-pressed="true"] {
  border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}

.mark-secondary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.7rem;
}
.mark-secondary-label { font-size: 0.72rem; color: var(--text-muted); }

.undo-bar {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: min(26rem, calc(100vw - 2.5rem));
  background: var(--surface);
  border: 1px solid var(--accent);
  padding: 0.7rem 1rem;
  font-size: 0.85rem;
}
.undo-bar[hidden] { display: none; }

.risk-list { margin-top: 0.6rem; }
.risk-item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  align-items: baseline;
  border-top: 1px solid var(--border);
  padding: 0.6rem 0;
  font-size: 0.88rem;
}
.risk-name { font-weight: 600; flex: 1 1 10rem; }
.risk-pct { font-family: var(--font-mono); color: var(--accent); }
.risk-note { font-size: 0.8rem; color: var(--text-muted); }

#at-risk, #credit-panel { margin-top: 2rem; }

/* ---------- Attendance ---------- */

.agg-box {
  display: grid;
  gap: 0.3rem;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  padding: 1rem 1.15rem;
  margin-bottom: 1.25rem;
}
.agg-box { border-left: 4px solid var(--border); }
.agg-box.is-safe { border-left-color: var(--border); }
.agg-box.is-warn { border-left-color: var(--muted); }
.agg-box.is-breach { border-left-color: var(--accent); background: var(--accent-soft); }
.agg-label { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); }
.agg-pct { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 600; color: var(--accent); }
.agg-box.is-warn .agg-pct,
.agg-box.is-breach .agg-pct { color: var(--accent); }
.agg-note { font-size: 0.82rem; color: var(--text-muted); }
.agg-band {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.6;
  max-width: 62ch;
}
.agg-excl { margin-top: 0.4rem; font-size: 0.78rem; color: var(--text-muted); max-width: 62ch; }

.att-card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 1.1rem 1.2rem;
  margin-bottom: 1rem;
}

.att-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.att-name { font-weight: 700; margin-right: 0.5rem; }

.ring-track { stroke: var(--border); }
.ring-arc { stroke: var(--accent); }
.ring-text {
  fill: var(--text);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
}

.att-counts { margin-top: 0.6rem; font-size: 0.82rem; color: var(--text-muted); }
.att-excl {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 62ch;
}

.att-history { margin-top: 0.9rem; }
.att-history summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.att-history summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.hist-list { margin-top: 0.7rem; display: grid; gap: 0.4rem; }
.hist-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.hist-date { font-family: var(--font-mono); font-size: 0.8rem; flex: 1 1 7rem; }
.hist-row select {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 0.35rem 0.4rem;
  font: inherit;
  font-size: 0.8rem;
}

.hist-excl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  flex: 1 1 100%;
}
.hist-excl-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--border);
  padding: 0.2rem 0.45rem;
}
.hist-excl-q { font-size: 0.78rem; color: var(--text-muted); }

/* ---------- Framework explanation (wizard step 2) ---------- */

.cat-explain {
  border: 1px solid var(--border);
  border-left: 3px solid var(--cat, var(--border));
  margin-bottom: 0.5rem;
}
.cat-explain summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  cursor: pointer;
}
.cat-explain summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.cat-explain .cat-name { font-weight: 600; font-size: 0.9rem; }
.cat-explain .cat-cr {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--accent);
}
.cat-body {
  padding: 0 0.9rem 0.9rem;
  font-size: 0.87rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 62ch;
}

.credit-arith {
  border-top: 1px solid var(--border);
  margin-top: 1.5rem;
  padding-top: 1.25rem;
}
.credit-arith p { font-size: 0.9rem; }
.milestone-list { margin-top: 0.6rem; display: grid; gap: 0.3rem; }
.milestone-list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.milestone-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 8px; height: 1px;
  background: var(--accent);
}

/* ---------- Logging ---------- */

.log-panel {
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 1.25rem;
  margin-bottom: 2rem;
}

.log-form { display: grid; gap: 1rem; }
@media (min-width: 700px) {
  .log-form { grid-template-columns: 2fr 1fr 1fr auto; align-items: end; }
  .log-form .btn { height: 2.9rem; }
  .log-form .wiz-error { grid-column: 1 / -1; }
}

.quick-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.8rem;
  border-top: 1px solid var(--border);
  padding: 0.7rem 0;
}
.quick-name { font-weight: 600; font-size: 0.9rem; flex: 1 1 9rem; overflow-wrap: anywhere; }
.quick-state {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.15rem 0.4rem;
  border: 1px solid currentColor;
}
.quick-state.is-attended { color: var(--accent); }
.quick-state.is-missed { color: var(--accent); }
.quick-state.is-cancelled { color: var(--text-muted); }

.quick-btns { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.quick-btn {
  min-height: 2.75rem;
  padding: 0 0.9rem;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.qb-attended:hover, .qb-attended:focus-visible, .qb-attended[aria-pressed="true"] {
  border-color: var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.qb-missed:hover, .qb-missed:focus-visible, .qb-missed[aria-pressed="true"] {
  border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}
.qb-cancelled:hover, .qb-cancelled:focus-visible, .qb-cancelled[aria-pressed="true"] {
  border-color: var(--muted); color: var(--text-muted);
}

/* ---------- Catch-up ---------- */

.catchup {
  border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  padding: 1rem 1.15rem;
  margin-bottom: 1.5rem;
}
.catchup-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}
.catchup-grid { overflow-x: auto; }
.catchup-row {
  display: grid;
  grid-template-columns: minmax(6rem, 1fr) repeat(auto-fit, minmax(2.4rem, 2.6rem));
  gap: 0.3rem;
  align-items: center;
  padding: 0.25rem 0;
}
.catchup-row.is-head { border-bottom: 1px solid var(--border); padding-bottom: 0.4rem; }
.catchup-subject { font-size: 0.82rem; font-weight: 600; overflow-wrap: anywhere; }
.catchup-date {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-muted);
  text-align: center;
}
.catchup-btn {
  width: 100%;
  min-height: 2.4rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
}
.catchup-btn.is-attended { border-color: var(--accent); color: var(--accent); }
.catchup-btn.is-missed { border-color: var(--accent); color: var(--accent); }
.catchup-btn.is-cancelled { border-color: var(--muted); }

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

.hero-card {
  display: grid;
  gap: 0.3rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  background: var(--surface);
  padding: 1.5rem;
  margin-bottom: 2rem;
}
.hero-card.is-safe { border-left-color: var(--border); }
.hero-card.is-warn { border-left-color: var(--muted); }
.hero-card.is-breach { border-left-color: var(--accent); background: var(--accent-soft); }

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hero-name { font-size: 1.15rem; font-weight: 700; overflow-wrap: anywhere; }
.hero-figure {
  font-family: var(--font-mono);
  font-size: clamp(2.6rem, 9vw, 4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
}
.hero-card.is-warn .hero-figure,
.hero-card.is-breach .hero-figure { color: var(--accent); }
.hero-sub { font-size: 0.9rem; color: var(--text-muted); max-width: 52ch; }

/* Two dominant figures side by side: the aggregate percentage and the
   aggregate skip budget. Nothing else competes with them. */
.hero-figures {
  display: grid;
  gap: 1.4rem;
  margin: 0.4rem 0 0.2rem;
}
@media (min-width: 620px) {
  .hero-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
}
.hero-block { display: grid; gap: 0.3rem; align-content: start; min-width: 0; }
.hero-block .hero-figure { font-size: clamp(2.2rem, 7vw, 3.4rem); }

.hero-band {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
  line-height: 1.6;
  max-width: 64ch;
}
.hero-excl,
.hero-cap {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 64ch;
}
.hero-cap { color: var(--accent); }

.sem-empty { display: grid; gap: 0.5rem; text-align: left; }
.sem-empty strong { font-size: 1rem; color: var(--text); }

/* Marks the per-subject band as diagnostic, so it cannot be read as the
   figure that decides eligibility. */
.diag-label {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 68ch;
  margin-bottom: 1rem;
}

/* Regulation citation. Reads as a source note, never as reassurance. */
.sourced-note {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: var(--surface-alt);
  padding: 1rem 1.15rem;
  margin-bottom: 2rem;
  display: grid;
  gap: 0.55rem;
}
.sourced-note strong {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.sourced-note p { font-size: 0.82rem; line-height: 1.65; max-width: 72ch; }
.sourced-note a { color: var(--accent); }
.sourced-note .sourced-college { color: var(--accent); }

.field-note {
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 66ch;
  margin: 0.35rem 0 0;
}
.source-line {
  font-size: 0.74rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 70ch;
  margin: 1rem 0 0;
}
.source-line a { color: var(--accent); }

/* Approved-exclusion controls. Opt-in, and the written-approval question is
   always answered before anything is applied. */
.excl-block {
  border: 1px solid var(--border);
  background: var(--surface-alt);
  padding: 0.85rem 1rem;
  display: grid;
  gap: 0.7rem;
}
.excl-check { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.85rem; }
.excl-check input { margin-top: 0.2rem; flex: 0 0 auto; }
.excl-detail { display: grid; gap: 0.7rem; }
.excl-confirm { border: 0; padding: 0; display: grid; gap: 0.35rem; }
.excl-confirm legend { font-size: 0.82rem; font-weight: 600; padding: 0; }
.excl-confirm label {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  font-size: 0.85rem;
  margin-right: 1rem;
}

/* ---------- Subject grid ---------- */

.subject-grid { display: grid; gap: 1rem; margin-bottom: 2rem; }
@media (min-width: 620px) { .subject-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .subject-grid { grid-template-columns: repeat(3, 1fr); } }

.subj-card {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  border: 1px solid var(--border);
  border-top: 3px solid var(--border);
  background: var(--surface);
  padding: 1.1rem 1.2rem;
}
.subj-card.is-safe { border-top-color: var(--border); }
.subj-card.is-warn { border-top-color: var(--muted); }
.subj-card.is-breach { border-top-color: var(--accent); background: var(--accent-soft); }

.subj-top { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; }
.subj-name { font-weight: 700; margin-right: 0.4rem; overflow-wrap: anywhere; }
.subj-counts { font-size: 0.8rem; color: var(--text-muted); }

.subj-prompt { font-size: 0.75rem; color: var(--text-muted); }

.subj-ring { flex: 0 0 auto; }
.subj-ring .ring-track { stroke: var(--border); }
.subj-ring .ring-arc { stroke: var(--accent); }

.ring-text { fill: var(--text); font-family: var(--font-mono); font-size: 14px; font-weight: 600; }

/* ---------- Recent activity ---------- */

.recent-list { margin-top: 0.6rem; }
.recent-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  align-items: baseline;
  border-top: 1px solid var(--border);
  padding: 0.6rem 0;
  font-size: 0.85rem;
}
.recent-name { font-weight: 600; flex: 1 1 9rem; overflow-wrap: anywhere; }
.recent-date { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); }
.recent-status {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.recent-status.is-attended { color: var(--accent); }
.recent-status.is-missed { color: var(--accent); }
.recent-status.is-cancelled { color: var(--text-muted); }

.inline-expected {
  display: grid;
  gap: 0.3rem;
  border-top: 1px solid var(--border);
  margin-top: 0.9rem;
  padding-top: 0.9rem;
}
.inline-expected label { font-size: 0.75rem; color: var(--text-muted); }
.inline-expected input {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 0.5rem 0.6rem;
  font: inherit;
  font-size: 0.85rem;
  max-width: 10rem;
}

#credit-strip, #recent { margin-bottom: 2rem; }

/* ---------- Persistence feedback ---------- */

.save-flag {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 92;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  background: var(--surface);
  padding: 0.3rem 0.6rem;
  opacity: 0;
  pointer-events: none;
}
.save-flag.is-on { opacity: 1; }

.storage-warning {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.5rem;
  font-size: 0.88rem;
  line-height: 1.5;
}

.backup-reminder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  padding: 0.7rem 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.recovery-raw {
  margin-top: 1.25rem;
  max-height: 16rem;
  overflow: auto;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  padding: 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------- Combobox ---------- */

.combo-shell { position: relative; }

.combo-input { width: 100%; padding-right: 2.2rem !important; }

.combo-toggle {
  position: absolute;
  right: 1px;
  top: 1px;
  bottom: 1px;
  width: 2rem;
  background: none;
  border: 0;
  border-left: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.75rem;
}
.combo-toggle:hover { color: var(--accent); }

.combo-list {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: 100%;
  max-height: 14rem;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--accent);
  margin: 0;
  padding: 0.2rem;
  list-style: none;
}
.combo-list[hidden] { display: none; }

.combo-option {
  padding: 0.5rem 0.6rem;
  font-size: 0.85rem;
  line-height: 1.4;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.combo-option:hover,
.combo-option.is-active {
  background: var(--accent-soft);
  color: var(--accent);
}

.compulsory-note,
.field-hint {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.74rem;
  color: var(--text-muted);
}
.compulsory-note { color: var(--accent); }

.reg-notice {
  border: 1px solid var(--accent);
  border-left-width: 3px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  padding: 1rem 1.15rem;
  margin-bottom: 1.5rem;
  max-width: 62ch;
}
.reg-notice strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.reg-notice p { font-size: 0.85rem; line-height: 1.55; }
.reg-notice .reg-disclaimer { margin-top: 0.6rem; font-size: 0.78rem; color: var(--text-muted); }

.pool-source {
  margin-top: 0.8rem;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.pool-source a { color: var(--accent); }

/* Nothing in this tool animates when the visitor asks for stillness. */
@media (prefers-reduced-motion: reduce) {
  .ring-arc,
  .class-card,
  .att-card,
  .view-btn,
  .mark-btn,
  .range-btn,
  .quick-btn { transition: none !important; animation: none !important; }
}

/* ---------- Print: never print chrome ---------- */

@media print {
  .fab-wrap,
  .nl-card,
  .scroll-progress,
  .site-header,
  .skip-link,
  .toast-region,
  .modal-overlay { display: none !important; }
}

/* ==========================================================================
   OPTIONAL ACCOUNT + CLOUD SYNC
   Cyan stays interaction, gold stays data. "Synced" is the only state that
   earns the gold dot, because it is the only one asserting a fact about the
   server.
   ========================================================================== */

/* A class that sets `display` outranks the user-agent [hidden] rule, so every
   toggled element below needs its own guard. Same convention as .combo-list
   and .undo-bar elsewhere in this file. */
.sync-status[hidden],
.sync-warn[hidden],
.acct-panel[hidden],
.acct-inbox[hidden],
.acct-unconfirmed[hidden],
.acct-identity[hidden],
.acct-cloud[hidden],
.acct-oauth[hidden],
.acct-actions[hidden],
.acct-consent[hidden],
.pw-meter[hidden] { display: none; }

.sync-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 0.5rem 0.75rem;
  margin-bottom: 1.25rem;
  font-size: 0.78rem;
}
.sync-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--muted);
}
.sync-status.is-synced .sync-dot { background: var(--accent); }
.sync-status.is-syncing .sync-dot,
.sync-status.is-syncing .sync-dot,
.sync-status.is-offline .sync-dot { background: var(--muted); }
.sync-status.is-failed { border-color: var(--accent); background: var(--accent-soft); }

.sync-text { color: var(--text-muted); }
.sync-status.is-failed .sync-text { color: var(--text); }
.sync-link { margin-left: auto; color: var(--accent); font-size: 0.76rem; }
.sync-retry {
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 0.72rem;
  padding: 0.15rem 0.5rem;
  cursor: pointer;
}
.sync-retry:hover { background: var(--accent); color: var(--on-accent); }
.sync-retry:focus-visible,
.sync-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.sync-warn {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  border: 1px solid var(--accent);
  border-left: 4px solid var(--accent);
  background: var(--accent-soft);
  padding: 0.9rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.85rem;
  line-height: 1.6;
}
.sync-warn strong { color: var(--text); }

/* ---------- conflict chooser ---------- */

.sync-conflict {
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  background: var(--surface);
  padding: 1.5rem;
  margin-bottom: 2rem;
}
.sync-conflict:focus { outline: none; }
.sync-conflict:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.sync-conflict > p { font-size: 0.88rem; line-height: 1.65; max-width: 66ch; }

.conflict-grid { display: grid; gap: 1rem; margin: 1.25rem 0 1rem; }
@media (min-width: 620px) { .conflict-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.conflict-card {
  display: grid;
  gap: 0.7rem;
  align-content: start;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  padding: 1.1rem;
  min-width: 0;
}
.conflict-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.conflict-facts { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.8rem; margin: 0; }
.conflict-facts dt { font-size: 0.76rem; color: var(--text-muted); }
.conflict-facts dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

/* ---------- account page ---------- */

.acct-container { max-width: 34rem; }

.acct-loading { font-size: 0.85rem; color: var(--text-muted); padding: 1rem 0; }

.acct-msg,
.acct-error {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: var(--surface-alt);
  padding: 0.8rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.85rem;
  line-height: 1.6;
}
.acct-error { border-left-color: var(--accent); background: var(--accent-soft); }

.acct-tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; }
.acct-tab {
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.6rem 1rem;
  cursor: pointer;
}
.acct-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.acct-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

.acct-panel { display: grid; gap: 1rem; }
.acct-panel form { display: grid; gap: 1rem; }

.pw-shell { display: flex; gap: 0.4rem; }
.pw-shell input { flex: 1 1 auto; min-width: 0; }
.pw-toggle {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font: inherit;
  font-size: 0.76rem;
  padding: 0 0.7rem;
  cursor: pointer;
}
.pw-toggle:hover { color: var(--text); border-color: var(--accent); }
.pw-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.pw-meter { display: grid; gap: 0.3rem; margin-top: 0.4rem; }
.pw-bar { height: 3px; background: var(--border); overflow: hidden; }
.pw-bar span { display: block; height: 100%; width: 0; background: var(--muted); }
.pw-bar .pw-fill.s1,
.pw-bar .pw-fill.s2,
.pw-bar .pw-fill.s3 { background: var(--accent); }
.pw-bar .pw-fill.s4,
.pw-bar .pw-fill.s5 { background: var(--accent); }
.pw-label { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); }

.acct-consent {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  font-size: 0.82rem;
  line-height: 1.55;
}
.acct-consent input { margin-top: 0.2rem; flex: 0 0 auto; }
.acct-consent a { color: var(--accent); }

.acct-oauth { margin-top: 1.5rem; display: grid; gap: 0.8rem; }
.acct-or {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}
.acct-google { justify-self: start; }

.acct-inbox,
.acct-unconfirmed {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: var(--surface-alt);
  padding: 1rem;
  margin-top: 1.25rem;
  display: grid;
  gap: 0.5rem;
}
.acct-unconfirmed { border-left-color: var(--accent); }
.acct-inbox strong,
.acct-unconfirmed strong { font-size: 0.9rem; }
.acct-inbox p,
.acct-unconfirmed p { font-size: 0.82rem; line-height: 1.6; }
.acct-unconfirmed button { justify-self: start; }

.acct-alt { margin-top: 1rem; font-size: 0.82rem; }
.link-btn {
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: inherit;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.acct-reset { margin-top: 1rem; }
.acct-reset form { display: grid; gap: 0.8rem; }

.acct-guest-note { margin-top: 2rem; }

.acct-identity,
.acct-cloud {
  display: grid;
  gap: 0.25rem;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  padding: 0.9rem 1rem;
  margin-bottom: 1.25rem;
}
.acct-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.acct-email {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}
.acct-cloud-value { font-size: 0.85rem; line-height: 1.6; }

.acct-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
  margin: 1.75rem 0;
}

.acct-danger {
  border: 1px solid var(--accent);
  border-top: 3px solid var(--accent);
  background: var(--accent-soft);
  padding: 1.25rem;
  margin-top: 2.5rem;
}
.acct-danger .subhead { margin-bottom: 0.6rem; }
.acct-danger p { font-size: 0.82rem; line-height: 1.65; max-width: 58ch; }
.acct-danger form { display: grid; gap: 0.9rem; margin-top: 1.1rem; }
.acct-caveat { margin-top: 0.7rem; color: var(--text-muted); }
.acct-caveat a { color: var(--accent); }

.btn-danger {
  border-color: var(--accent);
  color: var(--accent);
  justify-self: start;
}
.btn-danger:hover { background: var(--accent); color: var(--on-accent); }

/* ==========================================================================
   VOLTAGE SYSTEM LAYER
   The site was built square. Rather than touch three thousand individual
   rules, the curve and rhythm system lands here in one place, last, so it
   wins on source order without a specificity fight. Anything that needs a
   different value overrides it below this block, not above it.
   ========================================================================== */

/* ---------- Curves: nothing is square except the page edge ---------- */

.card,
.chart,
.article-link,
.fab-pop,
.nl-card,
.service,
.tool-card,
.entry,
.empty-state,
.lab-card,
.about-panel,
.toast,
.modal,
.gate-card,
.gate-error,
.admin-state,
.admin-chart,
.admin-submission,
.wiz-error,
.course-row,
.slot-block,
.class-card,
.undo-bar,
.agg-box,
.att-card,
.log-panel,
.hero-card,
.sourced-note,
.excl-block,
.subj-card,
.reg-notice,
.catchup,
.storage-warning,
.backup-reminder,
.acct-msg,
.acct-error,
.acct-inbox,
.acct-unconfirmed,
.acct-identity,
.acct-cloud,
.acct-danger,
.sync-status,
.sync-warn,
.sync-conflict,
.conflict-card,
.recovery-card,
.case-card,
.stat-card,
.build-card,
.writing-card,
#resume-preview { border-radius: var(--r-card); }

.btn,
.btn-primary,
.btn-ghost,
.btn-small,
.btn-danger,
.builder-tab,
.view-btn,
.range-btn,
.quick-btn,
.catchup-btn,
.mark-btn,
.combo-input,
.combo-toggle,
.combo-list,
.pw-toggle,
.acct-tab,
fieldset,
input,
select,
textarea,
.form-field input,
.form-field select,
.form-field textarea,
.slot-row select,
.slot-row input,
.hist-row select { border-radius: var(--r-control); }

.badge,
.badge-live,
.badge-beta,
.badge-planned,
.cat-chip,
.pill,
.tag,
.hist-excl-tag,
.wiz-dot,
.avatar-btn,
.acct-signin,
.sync-dot,
.nav-toggle { border-radius: var(--r-pill); }

img,
.thumb,
.image-frame,
.case-thumb,
.build-thumb { border-radius: var(--r-card); }

/* Full-bleed decorative bars keep their own geometry. */
.scroll-progress,
.pw-bar { border-radius: 0; }
.pw-bar span { border-radius: var(--r-pill); }

/* ---------- Breathing room: ~25% more inside every panel ---------- */

.card,
.service,
.tool-card,
.lab-card,
.about-panel,
.gate-card,
.admin-submission,
.course-row,
.class-card,
.agg-box,
.att-card,
.log-panel,
.hero-card,
.sourced-note,
.excl-block,
.subj-card,
.reg-notice,
.catchup,
.acct-danger,
.sync-conflict,
.conflict-card,
.case-card,
.build-card { padding: var(--pad-card); }

.entry,
.empty-state,
.toast,
.admin-state,
.acct-msg,
.acct-error,
.acct-inbox,
.acct-unconfirmed,
.acct-identity,
.acct-cloud,
.sync-warn { padding: var(--pad-card-sm); }

/* ---------- Vertical rhythm ---------- */

.about-section,
.work-section,
.labs-section,
.story-section,
.services-section,
.section { padding-block: var(--section-y); }

.page-head { padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(1.5rem, 4vw, 2.5rem); }

/* ---------- Hairlines where a full pixel reads heavy ---------- */

.card,
.chart,
.service,
.tool-card,
.lab-card,
.about-panel,
.entry,
.empty-state,
.admin-submission,
.course-row,
.class-card,
.agg-box,
.att-card,
.log-panel,
.hero-card,
.sourced-note,
.excl-block,
.subj-card,
.reg-notice,
.catchup,
.conflict-card,
.case-card,
.build-card,
.sync-status { border-width: var(--hairline); }

/* ---------- Controls need a perceivable edge (WCAG 1.4.11, 3:1) ----------
   --border is 1.31:1 against the page: fine for separating things, not
   enough to say "this is a field you can type in". Controls therefore take
   --control-edge, which resolves to --muted at 4.96:1 or better. */

input,
select,
textarea,
.combo-input,
.form-field input,
.form-field select,
.form-field textarea,
.slot-row select,
.slot-row input,
.hist-row select { border: 1px solid var(--control-edge); }

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.combo-input:focus-visible { border-color: var(--accent); }

/* ---------- Touch: nothing smaller than 44px ---------- */

.btn,
.btn-primary,
.btn-ghost,
.btn-small,
.btn-danger,
.builder-tab,
.view-btn,
.range-btn,
.quick-btn,
.mark-btn,
.acct-tab,
.pw-toggle,
.combo-toggle,
input,
select,
textarea,
.form-field input,
.form-field select { min-height: 44px; }

textarea { min-height: 7rem; }

.catchup-btn { min-width: 44px; min-height: 44px; }

/* Inline text buttons inside prose stay text-sized but get a padded hit area. */
.link-btn,
.sync-retry { min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- Type ---------- */

h1, h2, h3,
.wordmark,
.hero h1,
.stat-num,
.hero-figure,
.agg-pct { font-family: var(--font-display); }

h1, h2, h3 { letter-spacing: -0.03em; font-weight: 800; }

/* The mono is reserved for figures the tools actually compute, plus the
   labels that name them. */
.eyebrow,
.subhead,
.stat-label,
.acct-label,
.conflict-title { font-family: var(--font-mono); }

/* ---------- Cards stack below 700px ---------- */

@media (max-width: 699px) {
  .card-grid,
  .lab-grid,
  .tool-grid,
  .service-grid,
  .case-grid,
  .build-grid,
  .stat-strip,
  .field-grid,
  .field-grid.two,
  .conflict-grid,
  .subject-grid { grid-template-columns: 1fr; }

  .container { width: min(1120px, 100% - 2rem); }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .avatar-menu,
  .acct-signin,
  .nav-toggle span { transition: none !important; }
}

/* ==========================================================================
   HOMEPAGE: "What I'm building"
   Each thumbnail is a specimen of what the tool actually produces, drawn in
   CSS. No photography, no illustration, nothing invented — the Semester tile
   shows the one figure that tool exists to compute, measured by the same
   accent rule used under the current nav item.
   ========================================================================== */

.building { padding-block: var(--section-y); }

.build-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.build-card {
  display: grid;
  gap: 0.85rem;
  align-content: start;
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-card);
  padding: var(--pad-card);
  text-decoration: none;
  color: inherit;
  min-width: 0;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
a.build-card:hover,
a.build-card:focus-visible { border-color: var(--accent); background: var(--surface-alt); }
.build-card.is-placeholder { opacity: 0.72; }

.build-thumb {
  display: grid;
  align-content: center;
  gap: 0.6rem;
  aspect-ratio: 16 / 9;
  background: var(--surface-alt);
  border-radius: var(--r-card);
  padding: 1.1rem;
  overflow: hidden;
}

.thumb-figure {
  font-family: var(--font-mono);
  font-size: clamp(1.6rem, 6vw, 2.1rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
}
.thumb-unit { font-size: 0.55em; margin-left: 0.1em; }

.thumb-bar {
  display: block;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--border);
  overflow: hidden;
}
.thumb-bar span {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--accent);
}

.thumb-caption {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.thumb-doc { display: grid; gap: 0.42rem; }
.thumb-rule {
  display: block;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--muted);
  opacity: 0.55;
}
.thumb-rule.w-90 { width: 90%; }
.thumb-rule.w-80 { width: 80%; }
.thumb-rule.w-70 { width: 70%; }
.thumb-rule.w-60 { width: 60%; }
.thumb-rule.w-40 { width: 40%; opacity: 1; background: var(--accent); }

.thumb-soon {
  justify-self: start;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-pill);
  padding: 0.3rem 0.75rem;
}

.build-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.build-desc { font-size: 0.9rem; line-height: 1.65; color: var(--text-muted); }

/* ---------- Footer nav ---------- */

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.4rem;
  padding-block: 1.75rem;
  border-top: var(--hairline) solid var(--border);
  margin-top: 2.5rem;
}
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-muted);
  transition: color 0.15s ease;
}
.footer-nav a:hover { color: var(--accent); }

/* ---------- Hero: role line sits under the actions now ---------- */

.hero-role { margin-top: 1.5rem; }

/* ---------- Selected-work cards lost their 01/02/03 index ----------
   The dates in .card-role already carry the ordering, so the numeral was
   decorating rather than informing. */

.card { display: grid; gap: 0.6rem; align-content: start; min-width: 0; }

/* ==========================================================================
   TOUCH TARGETS
   Standalone controls and navigation get a 44px hit area. Links sitting
   inside a sentence keep their natural line box — WCAG 2.5.8 exempts inline
   targets in a block of text, and padding them out would wreck the leading
   of the paragraph they live in.
   ========================================================================== */

.skip-link,
.wordmark,
.acct-signin,
.text-link,
.sync-link,
.card-cta,
.article-link,
.footer-bottom a,
.contact-item a,
.planned-line a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.acct-signin { padding-inline: 1.15rem; }

/* The avatar and the hamburger are square touch targets. */
.avatar-btn { width: 44px; height: 44px; }
.nav-toggle { width: 44px; height: 44px; }

/* Menu rows inside the account dropdown. */
.avatar-menu a,
.avatar-menu button { min-height: 44px; display: flex; align-items: center; }

/* Contact rows and service proof-links are standalone destinations, not words
   inside a sentence, so they take the full 44px hit area too. */
.contact-row a,
.service-proof a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* The dashboard header has no centre nav, so it is a two-column layout. */
.header-inner-admin { grid-template-columns: auto auto; justify-content: space-between; }

/* ==========================================================================
   CONTACT FORM STATUS
   Three states, all built from tokens already in the palette. The accent
   marks the outcome that matters; pending stays muted so it does not compete
   with the result that follows it.
   ========================================================================== */

.form-status {
  margin-top: 1rem;
  padding: 0.85rem 1.1rem;
  border: var(--hairline) solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface-alt);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text);
}
.form-status[hidden] { display: none; }
.form-status a { color: var(--accent); }

.form-status.is-pending { color: var(--text-muted); }
.form-status.is-ok { border-left-color: var(--accent); }
.form-status.is-error {
  border-left-color: var(--accent);
  background: var(--accent-soft);
}

/* ---------- Admin: contact submissions moved off-platform ---------- */

.admin-static-card {
  display: grid;
  gap: 0.7rem;
  align-content: start;
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  padding: var(--pad-card);
}
.admin-static-card p { font-size: 0.88rem; line-height: 1.65; color: var(--text-muted); max-width: 60ch; }
.admin-static-card a { color: var(--accent); }