/* /src/styles/fonts.css */
/* ── self-hosted type ─────────────────────────────────────────────────────────
 * Geist and Geist Mono came from `next/font/google`, which downloaded them at
 * build time and exposed each as a CSS variable. TanStack Start has no
 * equivalent, so the files sit in src/assets/fonts and are declared here —
 * same outcome, and still nothing fetched from a font CDN at page load.
 *
 * The variable names are the contract: protocol.css reads --font-display,
 * --font-body and --font-mono and never the family names.
 */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/app/01cce381/src/assets/fonts/geist-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/app/01cce381/src/assets/fonts/geist-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/app/01cce381/src/assets/fonts/geist-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/app/01cce381/src/assets/fonts/geist-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/app/01cce381/src/assets/fonts/geist-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/app/01cce381/src/assets/fonts/geist-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/app/01cce381/src/assets/fonts/geist-mono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/app/01cce381/src/assets/fonts/geist-mono-600.woff2') format('woff2');
}

:root {
  --font-display: 'Geist';
  --font-body: 'Geist';
  --font-mono: 'Geist Mono';
}


/* /src/styles/protocol.css */
/* ─────────────────────────────────────────────────────────────────────────────
   Protocol — the instrument panel

   The whole app renders one idea: a value, positioned inside a range. Recovery
   sits in a band. A blood marker sits in a band. Protein eaten against protein
   targeted sits in a band. The harshness dial is a band you can drag. Building
   every readout from the same primitive is what makes seven screens feel like
   one instrument rather than seven pages.

   Colour is never decoration here. Ivory and slate carry all the structure;
   the four signal colours mean exactly one thing each — on target, watch it,
   wrong, and neutral data — and appear nowhere else.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --void: #0a0e13;
  --sink: #0e141b;
  --panel: #141c25;
  --raise: #1b2631;
  --line: #24313d;
  --edge: #33475a;

  --ivory: #ece6dc;
  --mute: #8fa0af;
  --faint: #74899a;

  --go: #5fe0ac;
  --hold: #f2b65c;
  --push: #ff5c46;
  --flow: #57c7ea;

  --go-dim: #5fe0ac26;
  --hold-dim: #f2b65c26;
  --push-dim: #ff5c4626;
  --flow-dim: #57c7ea26;

  --r: 3px;
  --shell: 1140px;
}

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

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

body {
  margin: 0;
  background: transparent;
  color: var(--ivory);
  font-family: var(--font-body), ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  font-feature-settings: 'kern' 1;
  -webkit-font-smoothing: antialiased;
  /* A single fixed wash rather than a gradient on every panel: the light comes
     from one place, which is what makes the surfaces read as physical. */
  background-image: radial-gradient(120% 60% at 50% -10%, #16202b 0%, transparent 60%);
  background-attachment: fixed;
}

/* ── type ────────────────────────────────────────────────────────────────── */

.display,
h1,
h2,
h3 {
  font-family: var(--font-display), ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0;
}

.readout {
  font-family: var(--font-display), ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.92;
  font-variant-numeric: tabular-nums;
  /* These are almost always <p>, and a default paragraph margin scales with
     font-size — at 52px that is 52px of dead space under every big number. */
  margin: 0;
}

/* Small, wide, uppercase mono against large, tight display — the whole
   typographic idea of the app is that contrast. */
.label {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0;
}

.mono {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

.muted {
  color: var(--mute);
}
.faint {
  color: var(--faint);
}

a {
  color: inherit;
}

/* ── shell ───────────────────────────────────────────────────────────────── */

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 20px 96px;
}

.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--void) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.masthead-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 14px 20px 0;
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

.wordmark {
  font-family: var(--font-display), sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ivory);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

/* The mark: three rungs of a rising band. Drawn, not imported. */
.wordmark::before {
  content: '';
  width: 15px;
  height: 15px;
  background:
    linear-gradient(var(--go), var(--go)) left 100% / 3px 45% no-repeat,
    linear-gradient(var(--ivory), var(--ivory)) center 100% / 3px 72% no-repeat,
    linear-gradient(var(--flow), var(--flow)) right 100% / 3px 100% no-repeat;
}

.masthead-spacer {
  flex: 1;
}

.nav {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar {
  display: none;
}

.nav a {
  flex: none;
  padding: 12px 14px 11px;
  font-family: var(--font-mono), monospace;
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--faint);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.nav a:hover {
  color: var(--ivory);
}
.nav a[aria-current='page'] {
  color: var(--ivory);
  border-bottom-color: var(--go);
}
.nav a:focus-visible {
  outline: 2px solid var(--flow);
  outline-offset: -2px;
}

/* ── page furniture ──────────────────────────────────────────────────────── */

.page-head {
  padding: 40px 0 26px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}

.page-head h1 {
  font-size: clamp(30px, 5vw, 44px);
}

.page-head p {
  margin: 8px 0 0;
  color: var(--mute);
  max-width: 56ch;
}

section {
  margin: 0 0 34px;
}

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

.section-head h2 {
  font-size: 15px;
  letter-spacing: 0.01em;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px;
}

.panel + .panel {
  margin-top: 12px;
}

.grid {
  display: grid;
  gap: 12px;
  /* Top-aligned rather than stretched. These panels hold different amounts —
     a feeding window next to four macro rows — and stretching the short one
     leaves a panel that is mostly empty box. */
  align-items: start;
}
.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

/* ── the signature: a value inside a range ───────────────────────────────── */

.instrument {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.instrument:last-child {
  border-bottom: 0;
}

.instrument-name {
  font-size: 14px;
  font-weight: 500;
}

.instrument-value {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  text-align: right;
  font-family: var(--font-display), sans-serif;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.instrument-value small {
  font-family: var(--font-mono), monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--faint);
  margin-left: 4px;
}

.instrument-note {
  grid-column: 1;
  font-size: 12.5px;
  color: var(--mute);
  line-height: 1.45;
}

.band {
  grid-column: 1 / -1;
  margin-top: 10px;
}

.band-track {
  position: relative;
  height: 6px;
  background: var(--raise);
  border-radius: 99px;
  overflow: visible;
}

/* The good zone. Lighter, never coloured — colour is reserved for where the
   value actually landed, so the eye goes to the marker and not the band. */
.band-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--edge);
  border-radius: 99px;
}

.band-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 99px;
  background: currentColor;
  opacity: 0.32;
}

.band-mark {
  position: absolute;
  top: -5px;
  bottom: -5px;
  width: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: translateX(-1px);
}

.band-mark::after {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  width: 5px;
  height: 5px;
  background: currentColor;
  transform: translateX(-50%) rotate(45deg);
}

.band-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: var(--font-mono), monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

/* Tone is set on the container; the band's parts inherit it via currentColor. */
.tone-go {
  color: var(--go);
}
.tone-hold {
  color: var(--hold);
}
.tone-push {
  color: var(--push);
}
.tone-flow {
  color: var(--flow);
}
.tone-neutral {
  color: var(--mute);
}

/* ── the big morning readouts ────────────────────────────────────────────── */

.readouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

.readout-cell {
  background: var(--panel);
  padding: 18px 16px 16px;
  min-width: 0;
}

.readout-cell .readout {
  font-size: clamp(32px, 5.5vw, 46px);
  margin: 6px 0 2px;
}

.readout-cell .readout small {
  font-family: var(--font-mono), monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--faint);
  margin-left: 3px;
  letter-spacing: 0.04em;
}

.readout-cell .delta {
  font-family: var(--font-mono), monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--mute);
}

/* ── the brief ───────────────────────────────────────────────────────────── */

.brief {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--raise), var(--panel) 60%);
  padding: 4px 20px;
}

.editorial-feature {
  position: relative;
  min-height: clamp(330px, 48vw, 540px);
  overflow: hidden;
  border: 1px solid rgba(20, 24, 20, 0.14);
  border-radius: 24px;
  background: #dce2de;
  box-shadow: 0 30px 90px rgba(24, 37, 26, 0.12);
  isolation: isolate;
}

.editorial-feature img {
  position: absolute;
  inset: -4%;
  width: 108%;
  height: 108%;
  object-fit: cover;
  filter: saturate(0.86) contrast(1.03);
  transform: scale(1.015);
  transition: transform 1.4s var(--ease-out), filter 1.2s var(--ease-out);
}

.editorial-feature:hover img {
  transform: scale(1.065) translateX(-1.2%);
  filter: saturate(1) contrast(1.04);
}

.editorial-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(7, 12, 9, 0.54) 0%, rgba(7, 12, 9, 0.12) 50%, rgba(7, 12, 9, 0.04) 100%),
    linear-gradient(0deg, rgba(7, 12, 9, 0.38), transparent 52%);
  transition: opacity 500ms var(--ease-out);
}

.editorial-feature:hover .editorial-shade {
  opacity: 0.82;
}

.editorial-copy {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(24px, 4vw, 52px);
  color: #f6f6f0;
}

.editorial-kicker {
  position: absolute;
  top: clamp(22px, 3vw, 38px);
  right: clamp(22px, 3vw, 38px);
  left: clamp(22px, 3vw, 38px);
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono), monospace;
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.editorial-copy h2 {
  max-width: 620px;
  font-size: clamp(45px, 7.3vw, 88px);
  font-weight: 570;
  letter-spacing: -0.075em;
  line-height: 0.86;
}

.editorial-copy > p {
  margin: 18px 0 0;
  font-family: var(--font-mono), monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.editorial-index {
  position: absolute;
  right: clamp(22px, 3vw, 38px);
  bottom: clamp(22px, 3vw, 38px);
  z-index: 2;
  color: rgba(246, 246, 240, 0.78);
  font-family: var(--font-mono), monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
}

/* Compact visual interludes carry art direction into the deeper screens. */
.page-artwork {
  position: relative;
  min-height: clamp(300px, 38vw, 440px);
  overflow: hidden;
  border: 1px solid rgba(20, 24, 20, 0.14);
  border-radius: 24px;
  background: #dce2de;
  box-shadow: 0 30px 90px rgba(24, 37, 26, 0.11);
  isolation: isolate;
}

.page-artwork img {
  position: absolute;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.03);
  transform: scale(1.015);
  transition: transform 1.5s var(--ease-out), filter 1.2s var(--ease-out);
}

.page-artwork:hover img {
  transform: scale(1.07) translateX(-1.2%);
  filter: saturate(1) contrast(1.05);
}

.page-artwork-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(7, 12, 9, 0.64), rgba(7, 12, 9, 0.12) 62%, transparent);
}

.page-artwork[data-tone='light'] .page-artwork-shade {
  background: linear-gradient(90deg, rgba(246, 247, 243, 0.78), rgba(246, 247, 243, 0.18) 54%, transparent 72%);
}

.page-artwork[data-tone='light'] img {
  filter: saturate(1.02) contrast(1.08) brightness(0.95);
}

.page-artwork-top,
.page-artwork-index {
  position: absolute;
  z-index: 2;
  color: rgba(248, 248, 242, 0.84);
  font-family: var(--font-mono), monospace;
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.page-artwork-top {
  top: clamp(22px, 3vw, 38px);
  right: clamp(22px, 3vw, 38px);
  left: clamp(22px, 3vw, 38px);
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.page-artwork-index {
  right: clamp(22px, 3vw, 38px);
  bottom: clamp(22px, 3vw, 38px);
}

.page-artwork h2 {
  position: absolute;
  z-index: 2;
  left: clamp(24px, 4vw, 52px);
  bottom: clamp(24px, 4vw, 48px);
  max-width: 620px;
  color: #f7f7f1;
  font-size: clamp(44px, 7vw, 82px);
  font-weight: 570;
  letter-spacing: -0.075em;
  line-height: 0.87;
}

.page-artwork[data-tone='light'] h2,
.page-artwork[data-tone='light'] .page-artwork-top,
.page-artwork[data-tone='light'] .page-artwork-index {
  color: #161916;
}

.page-artwork[data-tone='light'] .page-artwork-top,
.page-artwork[data-tone='light'] .page-artwork-index {
  opacity: 0.66;
}

.brief-line {
  display: grid;
  grid-template-columns: 3px 1fr;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.brief-line:last-child {
  border-bottom: 0;
}

.brief-line::before {
  content: '';
  background: currentColor;
  border-radius: 2px;
  align-self: stretch;
  min-height: 18px;
}

.brief-line p {
  margin: 0;
  color: var(--ivory);
  font-size: 15px;
  line-height: 1.5;
}

.brief-line.lead p {
  font-family: var(--font-display), sans-serif;
  font-size: clamp(19px, 2.6vw, 25px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.22;
}

/* One orchestrated moment: the brief assembles itself on load, top to bottom. */
@media (prefers-reduced-motion: no-preference) {
  .brief-line {
    animation: settle 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
  }
  .brief-line:nth-child(1) { animation-delay: 0.04s; }
  .brief-line:nth-child(2) { animation-delay: 0.12s; }
  .brief-line:nth-child(3) { animation-delay: 0.2s; }
  .brief-line:nth-child(4) { animation-delay: 0.28s; }
  .brief-line:nth-child(5) { animation-delay: 0.36s; }
  .brief-line:nth-child(6) { animation-delay: 0.44s; }
  .brief-line:nth-child(7) { animation-delay: 0.52s; }
}

@keyframes settle {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
}

/* ── the harshness dial ──────────────────────────────────────────────────── */

.dial {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dial-track {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--sink);
  border: 1px solid var(--line);
  border-radius: 99px;
}

.dial-step {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 99px;
  background: transparent;
  color: var(--faint);
  font-family: var(--font-mono), monospace;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.14s, color 0.14s, transform 0.14s;
  padding: 0;
}
.dial-step:hover {
  color: var(--ivory);
  background: var(--raise);
}
.dial-step:focus-visible {
  outline: 2px solid var(--flow);
  outline-offset: 1px;
}
.dial-step[aria-pressed='true'] {
  background: var(--ivory);
  color: var(--void);
}
/* The top two are where it gets personal — say so before they press it. */
.dial-step[data-hot='true'][aria-pressed='true'] {
  background: var(--push);
  color: #fff;
}

.dial-name {
  font-family: var(--font-mono), monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  min-width: 7ch;
}

/* ── controls ────────────────────────────────────────────────────────────── */

button,
.btn {
  font-family: var(--font-mono), monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 9px 15px;
  border-radius: var(--r);
  border: 1px solid var(--edge);
  background: var(--raise);
  color: var(--ivory);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
}

button:hover:not(:disabled),
.btn:hover {
  background: var(--edge);
  border-color: var(--mute);
}

button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--flow);
  outline-offset: 1px;
}

button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--go);
  border-color: var(--go);
  color: #05231a;
  font-weight: 700;
}
.btn-primary:hover:not(:disabled) {
  background: #7defc0;
  border-color: #7defc0;
}

.btn-quiet {
  background: transparent;
  border-color: var(--line);
  color: var(--mute);
}
.btn-quiet:hover:not(:disabled) {
  color: var(--ivory);
  background: var(--raise);
}

.btn-danger {
  background: transparent;
  border-color: transparent;
  color: var(--faint);
  padding: 6px 8px;
}
.btn-danger:hover:not(:disabled) {
  color: var(--push);
  background: var(--push-dim);
  border-color: transparent;
}

.btn-sm {
  padding: 6px 10px;
  font-size: 10px;
}

input,
select,
textarea {
  font-family: var(--font-body), sans-serif;
  font-size: 14px;
  width: 100%;
  padding: 9px 11px;
  background: var(--sink);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--ivory);
  transition: border-color 0.14s;
}
input:hover,
select:hover,
textarea:hover {
  border-color: var(--edge);
}
input::placeholder,
textarea::placeholder {
  color: #566876;
}
input[type='number'] {
  font-family: var(--font-mono), monospace;
  font-variant-numeric: tabular-nums;
}
textarea {
  resize: vertical;
  min-height: 84px;
  line-height: 1.5;
}
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%),
    linear-gradient(135deg, var(--mute) 50%, transparent 50%);
  background-position: right 14px center, right 9px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
}

label {
  display: block;
}

.field {
  display: grid;
  gap: 5px;
}

.field > .label {
  margin-bottom: 1px;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

/* ── chips ───────────────────────────────────────────────────────────────── */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Right-aligned beside a page heading on a wide screen. On a phone the heading
   stacks above it and the alignment has nothing left to align to, so it reverts
   rather than hugging an edge on its own. */
.chips.end {
  justify-content: flex-end;
}

.chip {
  font-family: var(--font-mono), monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: var(--sink);
  color: var(--mute);
  cursor: pointer;
  transition: all 0.14s;
}
.chip:hover {
  border-color: var(--edge);
  color: var(--ivory);
}
.chip[aria-pressed='true'] {
  background: var(--ivory);
  border-color: var(--ivory);
  color: var(--void);
}
.chip.static {
  cursor: default;
}
.chip.static:hover {
  border-color: var(--line);
  color: var(--mute);
}

.tag {
  font-family: var(--font-mono), monospace;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 2px;
  background: var(--raise);
  color: var(--mute);
  white-space: nowrap;
}
.tag[data-tone='go'] {
  background: var(--go-dim);
  color: var(--go);
}
.tag[data-tone='hold'] {
  background: var(--hold-dim);
  color: var(--hold);
}
.tag[data-tone='push'] {
  background: var(--push-dim);
  color: var(--push);
}
.tag[data-tone='flow'] {
  background: var(--flow-dim);
  color: var(--flow);
}

/* ── lists and rows ──────────────────────────────────────────────────────── */

.rows {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.row:last-child {
  border-bottom: 0;
}

.row-main {
  flex: 1;
  min-width: 0;
}

.row-title {
  font-size: 14.5px;
  font-weight: 500;
  margin: 0;
}

.row-sub {
  font-size: 12.5px;
  color: var(--mute);
  margin: 3px 0 0;
}

.row-actions {
  display: flex;
  gap: 6px;
  flex: none;
}

.rank {
  font-family: var(--font-display), sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.04em;
  color: var(--faint);
  width: 26px;
  flex: none;
  font-variant-numeric: tabular-nums;
}
.rank[data-first='true'] {
  color: var(--go);
}

/* ── the week strip ──────────────────────────────────────────────────────── */

.week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.week-day {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px 8px 12px;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.week-day[data-today='true'] {
  border-color: var(--edge);
  background: var(--raise);
}

.week-day .label {
  font-size: 9px;
  letter-spacing: 0.12em;
}

.pip {
  height: 3px;
  border-radius: 2px;
  background: var(--edge);
}
.pip[data-phase='high'] {
  background: var(--hold);
}
.pip[data-phase='med'] {
  background: var(--flow);
}
.pip[data-phase='low'] {
  background: var(--edge);
}

.week-session {
  font-size: 10.5px;
  line-height: 1.25;
  padding: 4px 5px;
  border-radius: 2px;
  background: var(--sink);
  border-left: 2px solid var(--edge);
  color: var(--mute);
}
.week-session[data-status='done'] {
  border-left-color: var(--go);
  color: var(--ivory);
}
.week-session[data-status='skipped'] {
  border-left-color: var(--push);
  text-decoration: line-through;
  opacity: 0.65;
}

/* ── notices ─────────────────────────────────────────────────────────────── */

.notice {
  border: 1px solid var(--line);
  border-left: 3px solid var(--mute);
  border-radius: var(--r);
  padding: 13px 15px;
  background: var(--panel);
  font-size: 13.5px;
  color: var(--mute);
  line-height: 1.5;
}
.notice strong {
  color: var(--ivory);
  font-weight: 600;
}
.notice[data-tone='push'] {
  border-left-color: var(--push);
  background: color-mix(in srgb, var(--push) 7%, var(--panel));
  color: var(--ivory);
}
.notice[data-tone='hold'] {
  border-left-color: var(--hold);
}
.notice[data-tone='go'] {
  border-left-color: var(--go);
}
.notice[data-tone='flow'] {
  border-left-color: var(--flow);
}

/* The one place the app raises its voice for a reason other than accountability. */
.alarm {
  border: 1px solid var(--push);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--push) 12%, var(--panel));
  padding: 16px 18px;
  color: var(--ivory);
}
.alarm h3 {
  font-size: 14px;
  color: var(--push);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--font-mono), monospace;
  font-weight: 600;
  margin-bottom: 8px;
}
.alarm p {
  margin: 0 0 8px;
  line-height: 1.5;
}
.alarm p:last-child {
  margin-bottom: 0;
}

.empty {
  padding: 34px 20px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--r);
  color: var(--mute);
}
.empty p {
  margin: 0 auto 14px;
  max-width: 46ch;
  line-height: 1.55;
}
.empty p:last-child {
  margin-bottom: 0;
}

/* ── utilities ───────────────────────────────────────────────────────────── */

.stack {
  display: grid;
  gap: 12px;
}
.stack-sm {
  display: grid;
  gap: 7px;
}
.inline {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.between {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.right {
  text-align: right;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

details.disclose > summary {
  cursor: pointer;
  font-family: var(--font-mono), monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  padding: 9px 0;
  list-style: none;
}
details.disclose > summary::-webkit-details-marker {
  display: none;
}
details.disclose > summary::before {
  content: '+ ';
  color: var(--faint);
}
details.disclose[open] > summary::before {
  content: '− ';
}
details.disclose > summary:hover {
  color: var(--ivory);
}
details.disclose > summary:focus-visible {
  outline: 2px solid var(--flow);
  outline-offset: 2px;
}

@media (max-width: 620px) {
  .page-head {
    padding-top: 26px;
  }
  .page-head .right,
  .page-head .right * {
    text-align: left;
  }
  .chips.end {
    justify-content: flex-start;
  }
  .week {
    grid-template-columns: repeat(2, 1fr);
  }
  .instrument-value {
    font-size: 21px;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   PROTOCOL / 02 — editorial kinetic system

   The data model remains the instrument panel above. This layer changes its
   physical world: chalk paper, ink, soft chromatic light and deliberate
   movement. The palette borrows the lime/cyan atmosphere of the visual brief
   without sacrificing the semantic status colours used throughout the app.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --void: #eeefec;
  --sink: rgba(226, 229, 224, 0.72);
  --panel: rgba(252, 252, 248, 0.62);
  --raise: rgba(255, 255, 252, 0.88);
  --line: rgba(20, 24, 20, 0.13);
  --edge: rgba(20, 24, 20, 0.26);

  --ivory: #161916;
  --mute: #5d635e;
  --faint: #777f78;

  --go: #087c59;
  --hold: #a7640b;
  --push: #df4f39;
  --flow: #147c9a;

  --go-dim: rgba(8, 124, 89, 0.12);
  --hold-dim: rgba(167, 100, 11, 0.12);
  --push-dim: rgba(223, 79, 57, 0.12);
  --flow-dim: rgba(20, 124, 154, 0.12);

  --r: 18px;
  --shell: 1200px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --pointer-x: 0px;
  --pointer-y: 0px;
}

html {
  background: var(--void);
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background: transparent;
  background-image: none;
  color: var(--ivory);
  overflow-x: hidden;
  font-size: 15px;
  line-height: 1.52;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.17;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

::selection {
  color: #10140f;
  background: #ffb3a6;
}

.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 80% 5%, rgba(255, 82, 64, 0.22) 0%, rgba(255, 112, 94, 0.10) 25%, transparent 46%),
    radial-gradient(circle at 8% 76%, rgba(166, 26, 52, 0.20) 0%, rgba(196, 44, 72, 0.09) 31%, transparent 53%),
    linear-gradient(105deg, #f5f1ef 4%, #f0eae8 52%, #f4efed 100%);
}

.ambient-orb {
  position: absolute;
  display: block;
  border-radius: 999px;
  filter: blur(62px);
  will-change: transform;
  transition: transform 1.1s var(--ease-out);
}

.ambient-orb-lime {
  width: min(72vw, 980px);
  height: min(62vw, 850px);
  right: -17vw;
  top: -20vw;
  opacity: 0.44;
  background: radial-gradient(circle, rgba(255, 82, 64, 0.92) 0%, rgba(255, 124, 104, 0.50) 42%, transparent 72%);
  transform: translate(var(--pointer-x), var(--pointer-y));
  animation: drift-lime 16s ease-in-out infinite alternate;
}

.ambient-orb-blue {
  width: min(88vw, 1120px);
  height: min(76vw, 960px);
  left: -29vw;
  bottom: -31vw;
  opacity: 0.39;
  background: radial-gradient(circle, rgba(166, 26, 52, 0.82) 0%, rgba(198, 46, 74, 0.40) 44%, transparent 73%);
  transform: translate(calc(var(--pointer-x) * -0.7), calc(var(--pointer-y) * -0.7));
  animation: drift-blue 19s ease-in-out infinite alternate;
}

.ambient-orb-pearl {
  width: 44vw;
  height: 44vw;
  left: 33vw;
  top: 22vh;
  opacity: 0.3;
  background: radial-gradient(circle, rgba(255, 255, 253, 0.96), transparent 69%);
  animation: breathe-pearl 11s ease-in-out infinite alternate;
}

@keyframes drift-lime {
  to { translate: -7vw 9vh; scale: 1.08; }
}

@keyframes drift-blue {
  to { translate: 11vw -5vh; scale: 1.12; }
}

@keyframes breathe-pearl {
  to { scale: 1.22; opacity: 0.7; }
}

.page-progress {
  --progress: 0;
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 100;
  width: 100%;
  height: 2px;
  pointer-events: none;
  transform: scaleX(var(--progress));
  transform-origin: left;
  background: linear-gradient(90deg, #a61a34, #ff5240);
  transition: transform 80ms linear;
}

/* The first impression is a compact calibration moment, then the interface is
   uncovered vertically. It mounts once with the root layout, not per route. */
.intro-sequence {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(24px, 4vw, 56px);
  color: #161916;
  background:
    radial-gradient(circle at 73% 8%, rgba(255, 90, 72, 0.94), transparent 42%),
    radial-gradient(circle at 22% 94%, rgba(170, 28, 54, 0.82), transparent 44%),
    #f3eeec;
  pointer-events: none;
  animation: intro-leave 1.35s 0.45s var(--ease-out) forwards;
}

.intro-wordmark {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display), sans-serif;
  font-size: clamp(22px, 3vw, 38px);
  font-weight: 750;
  letter-spacing: -0.055em;
}

.intro-wordmark span {
  width: 0.72em;
  height: 0.72em;
  border: 0.18em solid currentColor;
  border-radius: 50%;
  border-right-color: transparent;
  animation: mark-spin 1s var(--ease-out) both;
}

.intro-wordmark sup {
  align-self: flex-start;
  margin-top: 0.15em;
  font-size: 0.32em;
  letter-spacing: 0;
}

.intro-meta {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--font-mono), monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.intro-rule {
  position: absolute;
  right: clamp(24px, 4vw, 56px);
  bottom: clamp(52px, 6.5vw, 84px);
  left: clamp(24px, 4vw, 56px);
  height: 1px;
  background: rgba(20, 24, 20, 0.2);
  overflow: hidden;
}

.intro-rule i {
  display: block;
  width: 100%;
  height: 100%;
  background: #161916;
  transform-origin: left;
  animation: intro-progress 0.9s 0.1s var(--ease-out) both;
}

@keyframes intro-progress {
  from { transform: scaleX(0); }
}

@keyframes mark-spin {
  from { transform: rotate(-160deg) scale(0.6); opacity: 0; }
  to { transform: rotate(0) scale(1); opacity: 1; }
}

@keyframes intro-leave {
  0% { clip-path: inset(0 0 0 0); }
  99% { clip-path: inset(0 0 100% 0); visibility: visible; }
  100% { clip-path: inset(0 0 100% 0); visibility: hidden; }
}

/* ── typography and shell ──────────────────────────────────────────────── */

.display,
h1,
h2,
h3,
.readout {
  text-wrap: balance;
}

.label {
  color: var(--faint);
  font-size: 9.5px;
  letter-spacing: 0.17em;
}

.shell {
  position: relative;
  z-index: 2;
  max-width: var(--shell);
  padding: 0 24px 120px;
}

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--line);
  background: rgba(241, 241, 237, 0.68);
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
}

.masthead-inner {
  padding: 15px 24px 5px;
  align-items: center;
  gap: 20px;
}

.wordmark {
  gap: 9px;
  color: var(--ivory);
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -0.045em;
}

.wordmark::before {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: conic-gradient(from 12deg, var(--ivory) 0 71%, transparent 71% 100%);
  animation: logo-breathe 5s ease-in-out infinite alternate;
}

@keyframes logo-breathe {
  to { transform: rotate(18deg); }
}

.nav {
  padding: 0 24px;
  gap: clamp(4px, 1.2vw, 14px);
}

.nav a {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: 5px;
  padding: 11px 12px 13px;
  color: #4f554f;
  border: 0;
  font-family: var(--font-body), sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.015em;
  text-transform: none;
  transition: color 260ms var(--ease-out), transform 260ms var(--ease-out);
}

.nav a::after {
  content: '';
  position: absolute;
  right: 12px;
  bottom: -1px;
  left: 12px;
  height: 2px;
  background: var(--ivory);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 320ms var(--ease-out);
}

.nav a:hover {
  color: var(--ivory);
  transform: translateY(-2px);
}

.nav a[aria-current='page'] {
  color: var(--ivory);
}

.nav a[aria-current='page']::after,
.nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav a:focus-visible {
  outline: 0;
  border-radius: 8px;
  background: rgba(20, 24, 20, 0.06);
}

.nav sup {
  color: var(--faint);
  font-family: var(--font-mono), monospace;
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 0;
}

.page-head {
  position: relative;
  min-height: 290px;
  padding: clamp(58px, 8vw, 100px) 0 34px;
  align-items: flex-end;
  border-bottom-color: rgba(20, 24, 20, 0.22);
  margin-bottom: 34px;
}

.page-head::before {
  content: 'PROTOCOL / PERSONAL PERFORMANCE';
  position: absolute;
  top: 26px;
  right: 0;
  color: rgba(20, 24, 20, 0.44);
  font-family: var(--font-mono), monospace;
  font-size: 8px;
  letter-spacing: 0.18em;
}

.page-head h1 {
  max-width: 900px;
  font-size: clamp(52px, 8.5vw, 104px);
  font-weight: 650;
  letter-spacing: -0.075em;
  line-height: 0.86;
}

.page-head > div:first-child > p:not(.label) {
  max-width: 62ch;
  margin-top: 22px;
  color: #525852;
  font-size: clamp(15px, 1.7vw, 19px);
  line-height: 1.45;
  letter-spacing: -0.025em;
}

section {
  margin-bottom: clamp(42px, 6vw, 72px);
}

.section-head {
  padding-bottom: 13px;
  margin-bottom: 18px;
  border-bottom-color: rgba(20, 24, 20, 0.2);
}

.section-head h2 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.035em;
}

/* ── surfaces and interactive motion ───────────────────────────────────── */

.panel,
.brief,
.notice,
.empty,
.week-day,
.readout-cell {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.78) inset, 0 18px 50px rgba(25, 35, 26, 0.045);
}

.panel,
.brief,
.notice,
.empty {
  border-color: rgba(20, 24, 20, 0.12);
  background: var(--panel);
  backdrop-filter: blur(16px) saturate(1.12);
  -webkit-backdrop-filter: blur(16px) saturate(1.12);
}

.panel {
  padding: clamp(18px, 2.2vw, 26px);
  transition: transform 420ms var(--ease-out), box-shadow 420ms var(--ease-out), background 420ms var(--ease-out), border-color 420ms var(--ease-out);
}

.panel:hover {
  transform: translateY(-4px);
  border-color: rgba(20, 24, 20, 0.22);
  background: rgba(255, 255, 252, 0.74);
  box-shadow: 0 1px 0 #fff inset, 0 26px 70px rgba(27, 42, 29, 0.09);
}

.readouts {
  gap: 10px;
  border: 0;
  background: transparent;
  overflow: visible;
}

.readout-cell {
  position: relative;
  min-height: 178px;
  padding: 21px 18px 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(251, 252, 248, 0.61);
  backdrop-filter: blur(16px);
  transition: transform 400ms var(--ease-out), border-color 400ms var(--ease-out), background 400ms var(--ease-out);
}

.readout-cell::after {
  content: '';
  position: absolute;
  width: 170px;
  height: 170px;
  right: -90px;
  bottom: -105px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.07;
  filter: blur(18px);
  transform: scale(0.72);
  transition: transform 520ms var(--ease-out), opacity 520ms var(--ease-out);
}

.readout-cell:hover {
  transform: translateY(-5px);
  border-color: var(--edge);
  background: rgba(255, 255, 252, 0.78);
}

.readout-cell:hover::after {
  opacity: 0.13;
  transform: scale(1.15);
}

.readout-cell .readout {
  color: currentColor;
  font-size: clamp(42px, 5vw, 58px);
  font-weight: 650;
  letter-spacing: -0.07em;
}

.readout small {
  margin-left: 0.18em;
}

.readout-cell .delta,
.instrument-note,
.row-sub {
  color: var(--mute);
}

.brief {
  position: relative;
  overflow: hidden;
  padding: 7px 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 82, 64, 0.22), transparent 42%),
    radial-gradient(circle at 0% 100%, rgba(72, 187, 222, 0.18), transparent 45%),
    rgba(250, 251, 247, 0.64);
}

.brief::after {
  content: 'DAILY / BRIEF';
  position: absolute;
  right: 20px;
  bottom: 12px;
  color: rgba(20, 24, 20, 0.24);
  font-family: var(--font-mono), monospace;
  font-size: 8px;
  letter-spacing: 0.18em;
}

.brief-line {
  grid-template-columns: 5px 1fr;
  gap: 17px;
  padding: 18px 0;
  border-bottom-color: var(--line);
}

.brief-line::before {
  min-height: 22px;
  border-radius: 999px;
  opacity: 0.9;
}

.brief-line p {
  color: var(--ivory);
}

.brief-line.lead p {
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 560;
  letter-spacing: -0.045em;
}

.band-track {
  height: 5px;
  background: rgba(20, 24, 20, 0.1);
}

.band-zone {
  background: rgba(20, 24, 20, 0.22);
}

.band-fill {
  opacity: 0.58;
  transform-origin: left;
  animation: band-arrive 900ms 280ms var(--ease-out) backwards;
}

.band-mark {
  animation: marker-arrive 700ms 520ms var(--ease-out) backwards;
}

@keyframes band-arrive {
  from { transform: scaleX(0); }
}

@keyframes marker-arrive {
  from { translate: -12px 0; opacity: 0; }
}

.week {
  gap: 10px;
}

.week-day {
  min-height: 112px;
  padding: 14px 12px;
  border-color: var(--line);
  background: rgba(250, 251, 247, 0.56);
  transition: transform 360ms var(--ease-out), background 360ms var(--ease-out), border-color 360ms var(--ease-out);
}

.week-day:hover {
  transform: translateY(-4px);
  border-color: var(--edge);
  background: rgba(255, 255, 252, 0.8);
}

.week-day[data-today='true'] {
  border-color: rgba(20, 24, 20, 0.42);
  background: rgba(255, 255, 252, 0.76);
}

.week-session {
  background: rgba(20, 24, 20, 0.06);
  color: #535a54;
}

.row {
  border-bottom-color: var(--line);
  transition: padding 260ms var(--ease-out), background 260ms var(--ease-out);
}

.rows > .row:hover {
  padding-right: 8px;
  padding-left: 8px;
  background: rgba(255, 255, 255, 0.26);
}

/* ── controls ───────────────────────────────────────────────────────────── */

.dial-track {
  background: rgba(255, 255, 255, 0.4);
  border-color: var(--line);
}

.dial-step {
  flex: 0 0 22px;
  justify-content: center;
  padding: 0;
  line-height: 1;
  color: #696f69;
}

.dial-step:hover {
  color: var(--ivory);
  background: rgba(255, 255, 255, 0.72);
  transform: scale(1.08);
}

.dial-step[aria-pressed='true'] {
  color: #fff;
  background: var(--ivory);
  box-shadow: 0 4px 13px rgba(20, 24, 20, 0.22);
}

button,
.btn {
  border-color: rgba(20, 24, 20, 0.19);
  border-radius: 999px;
  background: rgba(255, 255, 252, 0.6);
  color: var(--ivory);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
  transition: transform 260ms var(--ease-out), background 260ms var(--ease-out), border-color 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}

button:hover:not(:disabled),
.btn:hover {
  transform: translateY(-2px);
  border-color: rgba(20, 24, 20, 0.42);
  background: rgba(255, 255, 252, 0.9);
  box-shadow: 0 8px 24px rgba(20, 24, 20, 0.09), 0 1px 0 #fff inset;
}

.btn-primary {
  color: #fff;
  border-color: var(--ivory);
  background: var(--ivory);
}

.btn-primary:hover:not(:disabled) {
  color: #10140f;
  border-color: #bbf655;
  background: #bbf655;
}

.btn-quiet {
  color: var(--mute);
  background: rgba(255, 255, 255, 0.28);
}

input,
select,
textarea {
  border-color: rgba(20, 24, 20, 0.16);
  border-radius: 11px;
  background: rgba(255, 255, 252, 0.58);
  color: var(--ivory);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.86) inset;
  transition: border-color 220ms, background 220ms, box-shadow 220ms;
}

input:hover,
select:hover,
textarea:hover {
  border-color: rgba(20, 24, 20, 0.34);
  background: rgba(255, 255, 252, 0.76);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 0;
  border-color: var(--flow);
  box-shadow: 0 0 0 3px rgba(20, 124, 154, 0.12), 0 1px 0 #fff inset;
}

input::placeholder,
textarea::placeholder {
  color: #8b928c;
}

.chip {
  border-color: rgba(20, 24, 20, 0.14);
  background: rgba(255, 255, 252, 0.45);
  color: #616861;
}

.chip:hover {
  border-color: rgba(20, 24, 20, 0.35);
  color: var(--ivory);
  background: rgba(255, 255, 252, 0.75);
}

.chip[aria-pressed='true'] {
  color: #fff;
  background: var(--ivory);
  border-color: var(--ivory);
}

.chip.static:hover {
  border-color: var(--line);
  color: var(--mute);
}

.tag {
  border-radius: 999px;
  background: rgba(20, 24, 20, 0.07);
}

.notice {
  border-left-width: 1px;
  border-left-color: var(--edge);
  color: var(--mute);
}

.notice[data-tone='push'] {
  background: color-mix(in srgb, var(--push) 6%, rgba(255, 255, 252, 0.66));
  color: #3d3734;
}

.alarm {
  border-color: rgba(223, 79, 57, 0.45);
  background: rgba(223, 79, 57, 0.08);
  color: var(--ivory);
}

.empty {
  border-style: solid;
  border-color: rgba(20, 24, 20, 0.13);
}

/* ── route and scroll choreography ──────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(7px);
    transition:
      opacity 850ms var(--ease-out),
      transform 850ms var(--ease-out),
      filter 750ms var(--ease-out);
    transition-delay: calc(var(--reveal-order, 0) * 32ms);
  }

  .reveal.is-visible {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }

  .page-head.is-visible h1 {
    animation: headline-arrive 1s 90ms var(--ease-out) backwards;
  }

  .page-head.is-visible > div:first-child > p {
    animation: copy-arrive 850ms 180ms var(--ease-out) backwards;
  }

  .readout-cell {
    animation: cell-arrive 680ms var(--ease-out) backwards;
  }

  .readout-cell:nth-child(2) { animation-delay: 60ms; }
  .readout-cell:nth-child(3) { animation-delay: 120ms; }
  .readout-cell:nth-child(4) { animation-delay: 180ms; }
  .readout-cell:nth-child(5) { animation-delay: 240ms; }

  .editorial-feature.is-visible img {
    animation: editorial-arrive 1.45s 80ms var(--ease-out) backwards;
  }

  .editorial-feature.is-visible .editorial-copy h2 {
    animation: headline-arrive 1s 230ms var(--ease-out) backwards;
  }

  .page-artwork.is-visible img {
    animation: editorial-arrive 1.45s 80ms var(--ease-out) backwards;
  }

  .page-artwork.is-visible h2 {
    animation: headline-arrive 1s 210ms var(--ease-out) backwards;
  }

  @keyframes headline-arrive {
    from { opacity: 0; transform: translateY(46px); letter-spacing: -0.12em; }
  }

  @keyframes copy-arrive {
    from { opacity: 0; transform: translateY(18px); }
  }

  @keyframes cell-arrive {
    from { opacity: 0; transform: translateY(18px) scale(0.98); }
  }

  @keyframes editorial-arrive {
    from { transform: scale(1.15) translateY(3%); filter: blur(8px) saturate(0.6); }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .intro-sequence { display: none; }
  .ambient-orb,
  .wordmark::before,
  .band-fill,
  .band-mark,
  .brief-line,
  .readout-cell { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
}

@media (max-width: 760px) {
  .masthead-inner {
    padding-top: 12px;
  }

  .masthead-inner > .label {
    display: none;
  }

  .dial > .label,
  .dial-name {
    display: none;
  }

  .nav {
    padding-right: 12px;
    padding-left: 12px;
  }

  .nav a {
    padding-right: 10px;
    padding-left: 10px;
  }

  .page-head {
    min-height: 230px;
    padding-top: 64px;
  }

  .page-head::before {
    top: 20px;
    left: 0;
    right: auto;
  }

  .page-head h1 {
    font-size: clamp(48px, 15vw, 76px);
  }

  .readouts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .readout-cell {
    min-height: 158px;
  }

  .ambient-orb-lime {
    width: 95vw;
    height: 75vw;
  }

  .ambient-orb-blue {
    width: 120vw;
    height: 100vw;
  }

  .editorial-feature {
    min-height: 430px;
  }

  .editorial-feature img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-position: 61% center;
  }

  .editorial-copy h2 {
    max-width: 330px;
    font-size: clamp(46px, 14vw, 68px);
  }

  .page-artwork {
    min-height: 430px;
  }

  .page-artwork img {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .page-artwork h2 {
    max-width: 330px;
    font-size: clamp(44px, 13.5vw, 66px);
  }

  .page-artwork[data-tone='light'] img {
    object-position: 67% center;
  }
}

@media (max-width: 460px) {
  .shell {
    padding-right: 16px;
    padding-left: 16px;
  }

  .wordmark {
    font-size: 16px;
  }

  .dial {
    gap: 4px;
  }

  .dial-step {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
  }

  .page-head h1 {
    font-size: 52px;
  }

  .readouts {
    grid-template-columns: 1fr;
  }

  .readout-cell {
    min-height: 145px;
  }

  .week {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── the door ────────────────────────────────────────────────────────────────
   The login sits outside the shell: no masthead, no rail, no telemetry. It
   uses the same tokens as everything else so it reads as the same product,
   but it says nothing about what is behind it. */

.login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 380px;
}

.login-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 20px;
}

.login-title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--ivory);
  margin: 0 0 8px;
}

.login-blurb {
  font-size: 14px;
  line-height: 1.5;
  color: var(--mute);
  margin: 0 0 28px;
}

.login-form {
  display: flex;
  flex-direction: column;
}

.login-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 7px;
}

.login-input {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ivory);
  background: var(--sink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 13px;
  margin-bottom: 18px;
  transition: border-color 120ms ease, background 120ms ease;
}

.login-input:hover {
  border-color: var(--edge);
}

.login-input:focus-visible {
  outline: none;
  border-color: var(--flow);
  background: var(--panel);
}

.login-submit {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--void);
  background: var(--ivory);
  border: 1px solid var(--ivory);
  border-radius: 8px;
  padding: 12px 16px;
  margin-top: 4px;
  cursor: pointer;
  transition: opacity 120ms ease, transform 120ms ease;
}

.login-submit:hover:not(:disabled) {
  opacity: 0.88;
}

.login-submit:active:not(:disabled) {
  transform: translateY(1px);
}

.login-submit:focus-visible {
  outline: 2px solid var(--flow);
  outline-offset: 2px;
}

.login-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Reserves its line so the form does not jump when the message appears. */
.login-error {
  min-height: 18px;
  font-size: 13px;
  line-height: 18px;
  color: var(--push);
  margin: 14px 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .login-input,
  .login-submit {
    transition: none;
  }
}

/* ── join + consent (PROTOCOL-10) — built on the login card ─────────────── */
.consent-card {
  max-width: 460px;
}

.consent-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mute);
  margin: 0 0 24px;
}

.consent-text p {
  margin: 0 0 12px;
}

.consent-text ul {
  margin: 0;
  padding-left: 18px;
}

.consent-text li {
  margin-bottom: 6px;
}

.consent-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ivory);
  cursor: pointer;
}

.consent-check input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--ivory);
  flex: none;
}

.consent-check input:focus-visible {
  outline: 2px solid var(--ivory);
  outline-offset: 2px;
}

.consent-leave {
  background: none;
  border: none;
  padding: 6px 0;
  font: inherit;
  font-size: 13px;
  color: var(--faint);
  text-decoration: underline;
  cursor: pointer;
  align-self: flex-start;
}

.consent-leave,
.consent-leave:hover:not(:disabled) {
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
}

.consent-leave:hover {
  color: var(--mute);
}

.consent-leave:focus-visible {
  outline: 2px solid var(--ivory);
  outline-offset: 2px;
}

/* Protocol introduction: one choice card, with swipe and tap navigation. */
.training-intro-dialog{width:min(760px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow-y:auto;border:1px solid var(--edge);border-radius:24px;padding:32px;background:#f2f3ef;color:var(--ivory)}
.training-intro-dialog::backdrop{background:#18221bcc;backdrop-filter:blur(8px)}
.training-intro{padding:8px;touch-action:pan-y}
.intro-progress{display:flex;gap:6px;margin-bottom:32px}
.intro-progress span{height:3px;flex:1;border-radius:8px;background:#c9d1c5}
.intro-progress span[data-active="true"]{background:#087c59}
.intro-card{min-height:320px;padding:16px 0;animation:intro-in .18s ease-out}
.intro-card h2{font-size:36px;line-height:1.1;max-width:580px}
.intro-card p,.intro-card label{font-size:16px}
.intro-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:24px}
.intro-choices button{min-height:60px;text-align:left;border:1px solid #cbd4c5;border-radius:16px;padding:16px;font-size:16px;background:#edf0e9;color:#172219;box-shadow:4px 4px 10px #ced7c7,-4px -4px 10px #fff}
.intro-choices button[aria-pressed="true"]{background:#1b3428;color:#f6f7ef;border-color:#1b3428;box-shadow:inset 2px 2px 5px #08160f}
.intro-choices button:focus-visible{outline:3px solid #087c59;outline-offset:3px}
.intro-input-label{display:block;margin-top:24px}
.intro-input-label input{display:block;width:100%;margin-top:8px;font-size:16px}
.intro-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:24px}
.intro-actions .faint{font-size:12px}
@keyframes intro-in{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:600px){.training-intro-dialog{padding:18px}.intro-card{min-height:300px}.intro-choices{gap:10px}.intro-choices button{padding:12px}.intro-card h2{font-size:36px}}
@media(prefers-reduced-motion:reduce){.intro-card{animation:none}}


/* PROTOCOL-21 · restrained biomorphic surfaces, owner-approved 2026-10-18. */
:root {
 --void:#f2f0ed; --sink:#e8e3e0; --panel:#f8f6f2; --raise:#fdfbf8;
 --ivory:#29242b; --mute:#534952; --faint:#645761;
 --line:rgba(64,43,60,.15); --edge:rgba(64,43,60,.34);
 --flow:#69485e; --flow-dim:#69485e14; --go:#087c59; --go-dim:#087c5914;
 --hold:#805b32; --hold-dim:#805b3214; --push:#a43c46; --push-dim:#a43c4614;
 --text-caption:.875rem; --text-body:1rem;
}
html { background:var(--void); }
body::after { content:none; }
.ambient { background:linear-gradient(125deg,#f8f5f0,#ede8e7); }
.ambient-orb { display:none; }
.masthead { background:var(--void); backdrop-filter:none; -webkit-backdrop-filter:none; }
::selection { color:var(--raise); background:var(--flow); }
.nav a:focus-visible { outline:2px solid var(--flow); outline-offset:2px; }
.page-head,.daily-page .page-head { min-height:0; padding:24px 0 16px; margin-bottom:20px; align-items:center; }
.page-head::before { content:none; }
.page-head h1,.daily-page .page-head h1 { font-size:28px; line-height:1.2; letter-spacing:-.03em; }
.page-head > div:first-child > p:not(.label) { font-size:var(--text-body); margin-top:6px; color:var(--mute); letter-spacing:0; }
.section-head h2,.daily-page .section-head h2 { font-size:var(--text-body); letter-spacing:-.01em; }
.panel,.brief,.notice,.empty { background:var(--panel); backdrop-filter:none; -webkit-backdrop-filter:none; }
.panel { box-shadow:5px 7px 18px #d6d0cf70,-4px -4px 14px #fff; border-color:transparent; }
.panel:hover { transform:none; background:var(--panel); box-shadow:5px 7px 18px #d6d0cf70,-4px -4px 14px #fff; border-color:transparent; }
.daily-page .panel { padding:20px; }
.btn:not(.btn-sm),.btn-quiet:not(.btn-sm),.today-page .btn,.today-page .btn-quiet { min-height:44px; }
.btn,.btn-quiet { color:var(--ivory); background:var(--panel); border:1px solid var(--edge); box-shadow:3px 3px 8px #d8d1d0,-3px -3px 8px #fff; }
.btn-primary,.btn-quiet[aria-pressed="true"] { color:var(--raise); background:var(--ivory); border-color:var(--ivory); box-shadow:3px 3px 8px #d8d1d0,-3px -3px 8px #fff; }
.btn-danger { color:var(--push); background:var(--push-dim); border-color:var(--push); box-shadow:none; }
.btn-danger:hover:not(:disabled) { color:var(--raise); background:var(--push); border-color:var(--push); box-shadow:none; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:2px solid var(--flow); outline-offset:3px; }
.page-artwork h2 { font-size:28px; letter-spacing:-.03em; }
.daily-page .editorial-feature { height:200px; border-radius:24px 44px 24px 40px / 28px 32px 28px 32px; background:var(--void); }
.daily-page .editorial-copy h2 { font-size:28px; letter-spacing:-.03em; }
.daily-page .editorial-index { display:none; }
@media(max-width:600px) {
 .page-head,.daily-page .page-head { padding:16px 0 12px; }
 .page-head h1,.daily-page .page-head h1 { font-size:28px; }
 .daily-page .panel { padding:18px; }
 .daily-page .editorial-feature { height:180px; }
 .daily-page .editorial-copy h2 { font-size:28px; max-width:9ch; }
}

/* Today's context and existing actions share the approved bento surfaces. */
.today-page { font-size:var(--text-body); }
.today-page .page-head h1 { margin:8px 0 0; }
.today-page .page-head .chips { margin-top:8px; max-width:340px; }
.today-page .editorial-copy { padding:24px; }
.today-page .editorial-kicker { top:20px; left:24px; }
.today-page .editorial-copy h2 { line-height:1.12; }
.today-page .brief { padding:20px; }
.today-page .brief-line.lead { font-size:var(--text-body); }
.today-context-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start; margin:24px 0; }
.today-page .today-group { min-width:0; margin:0; border-radius:34px 18px 30px 18px / 26px 22px 34px 22px; }
.today-page .today-group:nth-child(even) { border-radius:18px 34px 18px 30px / 22px 26px 22px 34px; }
.today-group .section-head { margin-bottom:12px; flex-wrap:wrap; gap:8px 12px; }
.today-section-link { color:var(--flow); font-size:var(--text-caption); text-decoration:none; }
.today-section-link:hover { text-decoration:underline; }
.today-facts { margin:0; }
.today-fact { padding:12px 0; border-top:1px solid var(--line); }
.today-fact dt { color:var(--mute); font-size:var(--text-caption); line-height:1.4; }
.today-fact dd { margin:4px 0 0; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; line-height:1.5; overflow-wrap:anywhere; }
.today-value { font-size:var(--text-body); font-weight:600; }
.today-age { color:var(--mute); font-size:var(--text-caption); margin-left:auto; white-space:nowrap; }
.today-missing { color:var(--mute); font-size:var(--text-body); }
.today-page .today-group-body .today-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:20px; }
.today-page .today-group-body .today-fact dd { display:block; }
.today-page .today-group-body .today-age { display:block; margin:4px 0 0; }
.today-context-help { font-size:var(--text-caption); line-height:1.6; color:var(--mute); margin:16px 0 0; }
.today-sessions { border-top:1px solid var(--line); padding-top:16px; margin-top:8px; }
.today-page .today-prescription { border-top:1px solid var(--line); padding-top:12px; margin-top:16px; font-size:var(--text-caption); }
.today-prescription summary { cursor:pointer; min-height:44px; padding-block:10px; }
.today-page .today-group > .panel { padding:16px 0 0; margin-top:20px; background:transparent; box-shadow:none; border:0; border-top:1px solid var(--line); border-radius:0; }
.today-page .today-group .field-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.today-page .today-group .field { min-width:0; }
.today-page .today-group :is(input,textarea) { width:100%; min-width:0; }
.today-page :is(.label,.row-sub,.tag,.chip,.delta,.faint) { font-size:var(--text-caption) !important; }
.today-page :is(.row-title,.btn,.btn-primary,.btn-quiet) { font-size:var(--text-body) !important; }
.today-page .inline { flex-wrap:wrap; }
@media(max-width:760px) {
 .today-context-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
 .today-group .section-head { align-items:baseline; }

 .today-page .page-head { gap:12px; }
 .today-page .editorial-copy { padding:20px; }
}
@media(max-width:400px) {
 .today-page .today-group-body .today-facts { grid-template-columns:minmax(0,1fr); }
 .today-page .today-group-body .today-fact dd { display:flex; }
 .today-page .today-group-body .today-age { margin:0 0 0 auto; }
}

/* Master has a taller artwork minimum and a separate brief paragraph scale. */
.today-page .editorial-feature { min-height:0; }
.today-page .brief-line.lead p { font-size:var(--text-body); line-height:1.6; letter-spacing:0; }
.today-page .today-consistency { border-top:1px solid var(--line); padding:12px 0 0; }
.today-page .today-consistency p { margin:0 0 4px; }
.today-page .btn-primary:hover:not(:disabled) { background:var(--flow); border-color:var(--flow); color:var(--raise); }
.today-page .row-actions { flex-wrap:wrap; }

@media(max-width:600px) {
 .today-page .today-sessions .row { flex-wrap:wrap; gap:12px; }
 .today-page .today-sessions .row-main { flex-basis:100%; }
 .today-page .today-sessions .row-actions { width:100%; justify-content:flex-start; }
 .today-page .section-head { flex-wrap:wrap; gap:8px 12px; }
 .today-page .section-head h2 { flex:none; }
}