@import url('./side-docks.css');
/* Shared visual layer. Palette variables remain owned by Remix. */
:root {
  --field-serif: Georgia, "Times New Roman", serif;
  --field-mono: ui-monospace, "Cascadia Code", Consolas, monospace;
}
:root[data-canvas="light"] {
  --bg: #f7f5ef;
}
::selection {
  background: var(--accent);
  color: var(--button-ink);
}
body {
  text-rendering: optimizeLegibility;
}
.eyebrow {
  font-family: var(--field-mono);
  font-weight: 500;
  letter-spacing: 0.075em;
}
.hero h1 em,
.notes-index h1 em,
.lab-invitation h2 em {
  font-family: var(--field-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.055em;
}
.hero {
  position: relative;
}
.hero:before {
  content: "";
  position: absolute;
  inset: 32px 0 auto;
  height: 8px;
  border-block: 1px solid var(--line);
  background: repeating-linear-gradient(
    90deg,
    var(--line) 0 1px,
    transparent 1px 24px
  );
  pointer-events: none;
}
.hero .intro {
  padding-top: 12px;
}
.hero .lab-invitation {
  position: relative;
  border-radius: 4px 28px 4px 4px;
  border-top: 3px solid var(--accent);
  background: linear-gradient(135deg, var(--soft), var(--surface) 65%);
}
.lab-invitation:after {
  content: "";
  position: absolute;
  width: 48px;
  height: 48px;
  right: 24px;
  bottom: 24px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: repeating-radial-gradient(
    circle,
    transparent 0 5px,
    var(--line) 6px 7px,
    transparent 8px 12px
  );
  opacity: 0.65;
  pointer-events: none;
}
.lab-invitation .invitation-topics {
  padding-right: 48px;
}
.notes-body main > .eyebrow:first-child {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.notes-body :is(.story-card, .lesson-player, .code-lab, .topic-card) {
  border-radius: 5px 18px 5px 5px;
}
.notes-body :is(.story-card, .lesson-player, .code-lab) {
  border-top: 2px solid var(--line);
}
.notes-body :is(.story-card, .lesson-player, .code-lab):focus-within {
  border-top-color: var(--accent);
}
.notes-body :is(.story-card, .lesson-player, .code-lab) h2 {
  letter-spacing: -0.035em;
}
.pcie-lesson-evidence {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.85fr);
  gap: clamp(1rem, 3vw, 2.25rem);
  align-items: start;
  margin-block: 1.5rem;
  padding-block: 1.25rem;
  border-block: 1px solid var(--line);
}
.pcie-lesson-outcome,
.pcie-lesson-boundary { min-width: 0; }
.pcie-lesson-outcome .lesson-status {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
}
.pcie-lesson-label {
  margin: 0 0 0.55rem;
  color: var(--accent);
  font: 500 var(--label-size)/1.4 var(--field-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pcie-lesson-boundary {
  padding-left: 1rem;
  border-left: 1px solid var(--accent);
  color: var(--ink);
}
.pcie-lesson-boundary > :last-child {
  margin: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 600px) {
  .pcie-lesson-evidence {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
  .pcie-lesson-boundary {
    padding: 0.9rem 0 0;
    border: 0;
    border-top: 1px solid var(--line);
  }
}
.notes-body :is(pre, code, output) {
  font-variant-numeric: tabular-nums;
}
.notes-body th {
  font-family: var(--field-mono);
  font-weight: 500;
}
.notes-body tbody tr:hover {
  background: color-mix(in srgb, var(--soft) 45%, transparent);
}
.notes-body .note-notice {
  border-left-width: 2px;
  border-radius: 0 8px 8px 0;
}
.notes-body :is(.note-reading, .field-prose) {
  max-width: 78ch;
}
.field-prose :is(p, li) {
  line-height: 1.85;
}
.field-prose h2 {
  padding-top: 1.3rem;
  border-top: 1px solid var(--line);
}
[data-reading="book"] .field-prose :is(p, li) {
  font-family: var(--field-serif);
  font-size: 1.12rem;
  line-height: 1.85;
}
[data-reading="book"] .field-prose :is(code, button, input, select, textarea) {
  font-family: var(--field-mono);
}
.field-permalink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin-left: 0.3rem;
  color: var(--muted);
  font: 1.1rem var(--field-serif);
  vertical-align: middle;
  text-decoration: none !important;
}
.field-permalink:hover {
  color: var(--accent);
}
.field-reader {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
  margin: 1rem 0;
}
.field-reader select {
  width: 100%;
  min-height: 44px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: var(--bg);
  font: inherit;
}
.field-find-open {
  border: 0;
  border-bottom: 1px solid var(--accent);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
  padding: 6px 8px;
  min-height: 44px;
}
.field-find-open:before {
  content: "⌕";
  margin-right: 0.35rem;
  font-size: 1.2rem;
}
.field-finder {
  width: min(660px, calc(100% - 24px));
  max-height: 85dvh;
  padding: clamp(18px, 4vw, 32px);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: 12px;
}
.field-finder::backdrop {
  background: #0009;
  backdrop-filter: blur(4px);
}
.finder-heading {
  display: flex;
  align-items: start;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.finder-heading h2 {
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.25;
}
.finder-heading .eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
}
.finder-heading button {
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  flex-shrink: 0;
}
.field-finder label {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}
.field-finder input {
  width: 100%;
  min-height: 50px;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.field-finder ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.field-finder nav {
  display: block;
}
.field-finder li {
  border-top: 1px solid var(--line);
}
.field-finder li a {
  display: grid;
  gap: 4px;
  padding: 14px 4px;
  text-decoration: none;
}
.field-finder li a:hover {
  background: var(--soft);
}
.field-finder li span {
  font: 0.75rem/1.5 var(--field-mono);
  color: var(--accent);
}
.field-finder li small {
  display: block;
  padding: 0 4px 10px;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}
.field-finder li small a {
  display: inline-block;
  padding: 0.3rem 0;
  text-decoration: underline;
}
.field-finder li strong {
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 500;
}
#field-count {
  margin: 0.75rem 0;
}
.finder-help {
  margin: 1rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

/* Notes landing: editorial introduction and its call to action. */
.field-index-heading {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(24px, 5vw, 80px);
  align-items: end;
  margin: 1.5rem 0 3rem;
}
.field-index-heading h1 {
  margin: 0;
  font-size: clamp(3rem, 6.4vw, 6rem);
  line-height: 1.02;
}
.field-index-heading .note-deck {
  font-size: 1.2rem;
  line-height: 1.65;
}
.field-index-heading .notes-intro {
  font-size: 0.95rem;
  color: var(--muted);
}
.field-index-heading .button {
  margin-top: 1.5rem;
}
.cache-postcard {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: 4px;
  margin-block: 2rem 3rem;
  overflow: hidden;
}
.postcard-copy {
  padding: clamp(20px, 3vw, 36px);
  background: var(--soft);
}
.postcard-copy .eyebrow {
  margin: 0 0 1.4rem;
  font-size: 0.75rem;
}
.postcard-copy h2 {
  font: 700 clamp(1.9rem, 3.5vw, 2.9rem)/1.1 Manrope, "Segoe UI", sans-serif;
  letter-spacing: -0.04em;
  margin-bottom: 1.5rem;
}
.postcard-copy p {
  font-size: 1rem;
  line-height: 1.75;
}
.postcard-copy a {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.postcard-workbench {
  padding: clamp(16px, 3vw, 30px);
  background: var(--surface);
  min-width: 0;
}
.postcard-meta {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  font: 0.75rem/1.6 var(--field-mono);
  color: var(--muted);
  margin-bottom: 1rem;
}
.postcard-map {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.postcard-map p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}
.postcard-map strong {
  display: block;
  font: 400 2rem/1.3 var(--field-mono);
  color: var(--ink);
}
.postcard-pages {
  display: grid;
  gap: 8px;
  margin: 1rem 0;
}
.postcard-page {
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
}
.postcard-page[data-reached="true"] {
  border-left-color: var(--accent);
  background: var(--soft);
}
.postcard-page b {
  font: 0.75rem/1.5 var(--field-mono);
  color: var(--muted);
}
.postcard-page code {
  display: block;
  font: 0.8rem/1.8 var(--field-mono);
  overflow-wrap: anywhere;
  color: var(--ink);
}
.postcard-change {
  display: inline-block;
  margin-left: 0.5rem;
  color: var(--accent);
  font: 0.7rem/1.5 var(--field-mono);
  text-transform: uppercase;
}
.postcard-change[hidden] { display: none; }
.postcard-page .postcard-change { margin: 0.35rem 0 0; }
.postcard-traffic {
  font: 0.78rem/1.65 var(--field-mono);
  color: var(--accent);
  min-height: 1.65em;
}
.postcard-step {
  font: 0.78rem/1.5 var(--field-mono);
  margin: 1rem 0 0;
}
.postcard-status {
  font-size: 0.94rem;
  line-height: 1.65;
  min-height: 8em;
  margin: 0.25rem 0 1rem;
}
.postcard-op {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 8px;
}
.postcard-op select {
  font: inherit;
  margin-left: 8px;
  min-height: 36px;
}
.postcard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.postcard-actions button {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
  font: inherit;
  font-size: 0.85rem;
  background: var(--bg);
  text-align: left;
}
.postcard-actions button:first-child {
  background: var(--accent);
  color: var(--button-ink);
  border-color: var(--accent);
  flex: 1;
}
.postcard-actions button:disabled {
  opacity: 0.65;
  cursor: default;
}
.postcard-actions [hidden] {
  display: none;
}
@media (max-width: 850px) {
  .field-index-heading {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
  }
  .cache-postcard {
    grid-template-columns: 1fr;
  }
  .notes-body header nav {
    gap: 12px;
  }
}
@media (max-width: 400px) {
  .finder-heading {
    flex-wrap: wrap;
  }
  .notes-body header nav a {
    font-size: 0.78rem;
  }
  .notes-body header nav {
    gap: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .field-finder {
    transition: none;
    animation: none;
  }
}
@media print {
  .field-find-open,
  .field-finder,
  .field-reader,
  .field-permalink,
  .postcard-actions {
    display: none !important;
  }
  .cache-postcard {
    break-inside: avoid;
  }
}

.hero-meta a {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  font-size: 0.875rem;
  min-height: 44px;
}

.field-copy {
  max-width: 72ch;
  line-height: 1.85;
}
[data-reading="book"] .field-copy {
  font-family: var(--field-serif);
  font-size: 1.12rem;
}
/* Keep the first shared-table/Linux action in reach on a narrow screen. */
@media (max-width:700px) {
  .shared-page > .eyebrow:first-child { margin-top:16px; padding-top:8px; }
  .shared-page > h1 { margin-block:16px; }
  .shared-page .shared-node > h2 { margin-top:.75rem; }
}

/* R19: one background, six objects, no standalone space simulator. */
body { isolation: isolate; }
.cosmic-backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: strict; }
.cosmic-backdrop[hidden] { display: none; }
.cosmic-backdrop canvas { display: block; width: 100%; height: 100%; opacity: 1; image-rendering: auto; }
.notes-body .cosmic-backdrop { opacity: .55; }
.cosmic-preferences { display: grid; grid-template-columns: 1fr; gap: 7px; margin-block: 14px 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.cosmic-preferences > label { font-size: .8rem; font-weight: 600 !important; }
.cosmic-preferences > label.cosmic-grid-toggle { font-weight: 400 !important; }
.cosmic-preferences select { width: 100%; min-width: 0; min-height: 44px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; font-size: .875rem; }
.cosmic-preferences p { margin: 0; font-size: .75rem; line-height: 1.55; }
.cosmic-preferences > button { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: .8125rem; cursor: pointer; }
.cosmic-preferences > button:hover { border-color: var(--accent); }
.cosmic-preferences > button:disabled { color: var(--muted); cursor: default; border-style: dashed; }
.cosmic-grid-toggle { display: flex; gap: 10px; align-items: center; min-height: 44px; font-size: .8125rem; }
.cosmic-grid-toggle input { width: 18px; height: 18px; }
/* Cards glow under the pointer (cosmic-field.mjs); a 14% tint keeps accent text at 4.5:1. */
:is(.project-note,.notebook-route,.project,.role-card) { position: relative; isolation: isolate; }
:is(.project-note,.notebook-route,.project,.role-card)::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; background: radial-gradient(220px circle at var(--cosmic-x,50%) var(--cosmic-y,50%), color-mix(in srgb,var(--accent) 14%,transparent),transparent); opacity: 0; }
:is(.project-note,.notebook-route,.project,.role-card)[data-cosmic-lit]::before { opacity: 1; }
/* Opaque navigation avoids text bleed; no filter containing block for the fixed menu. */
header { backdrop-filter: none; background: var(--bg); }
#remix .preferences { width: min(348px,calc(100vw - 32px)); padding: 20px; }
#remix .preferences h2 { font-size: 1.3rem; margin: 0 0 14px; }
.preferences > fieldset { margin: 12px 0; gap: 6px; }
.preferences > fieldset > label { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); border-radius: 7px; min-height: 40px; padding: 6px 8px; font-size: .8125rem; }
.preferences > fieldset > label:has(input:checked) { border-color: var(--accent); background: var(--soft); }
.preferences > fieldset legend { font-size: .8rem; font-weight: 600; color: var(--ink); }
.remix-more { margin-block: 8px; border-block: 1px solid var(--line); }
.remix-more > summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; font-size: .8125rem; }
.remix-more[open] > summary span { transform: rotate(180deg); }
.remix-more .extra-palettes { gap: 8px 16px; }
.remix-more .extra-palettes label { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
#motion-help { font-size: .75rem; margin: 4px 0 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media(max-width:650px) { #remix .preferences { padding: 16px; } }
@media(prefers-reduced-motion:reduce) { :is(.project-note,.notebook-route,.project,.role-card)::before { display: none; } }
@media(forced-colors:active) { .cosmic-backdrop, :is(.project-note,.notebook-route,.project,.role-card)::before { display: none; } }
@media print { .cosmic-backdrop { display: none; } }
/* Explicit reference previews preserve ordinary links and the reader's position. */
body button.reference-trigger { display: inline-grid; place-items: center; vertical-align: middle; margin-inline: 4px 6px; min-width: 28px; min-height: 28px; padding: 2px; border: 1px solid var(--line); border-radius: 5px; color: var(--accent); background: var(--surface); cursor: pointer; font: .8rem/1 var(--field-mono); }
body button.reference-trigger:hover { border-color: var(--accent); background: var(--soft); }
body button.reference-trigger.has-label { grid-auto-flow: column; gap: 4px; padding-inline: 6px; }
.reference-peek { position: fixed; inset: calc(var(--reading-top, 84px) + var(--reading-bar, 0px) + 16px) 24px 24px auto; width: min(660px,52vw); height: min(780px,calc(100dvh - var(--reading-top, 84px) - var(--reading-bar, 0px) - 40px)); max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); margin: 0; padding: 20px; z-index: 80; border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 6px 20px 6px 6px; background: var(--surface); color: var(--ink); box-shadow: 0 18px 70px var(--shadow); }
.reference-peek[open] { display: flex; flex-direction: column; }
.reference-peek::backdrop { background: #090c14aa; }
.reference-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-shrink: 0; }
.reference-heading .eyebrow { font-size: var(--label-size); margin: 0 0 7px; }
.reference-heading h2 { margin: 0; font-size: clamp(1.05rem,2vw,1.4rem); line-height: 1.35; overflow-wrap: anywhere; }
.reference-peek button, .reference-toolbar a { min-height: 44px; padding: 8px 12px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; font: inherit; font-size: .8125rem; cursor: pointer; }
.reference-heading button { flex-shrink: 0; }
.reference-peek button:disabled { opacity: .65; cursor: default; }
.reference-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-block: 14px 10px; flex-shrink: 0; }
.reference-toolbar a { display: inline-flex; align-items: center; margin-left: auto; color: var(--accent); }
.reference-toolbar a[data-reference-open] { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 700; }
.reference-status { color: var(--muted); font-size: .75rem; line-height: 1.55; margin: 0 0 12px; flex-shrink: 0; }
.reference-content { overflow: auto; overscroll-behavior: contain; min-height: 0; line-height: 1.75; font-size: .9rem; overflow-wrap: anywhere; }
.reference-content h2 { font-size: 1.5rem; line-height: 1.3; }
.reference-content h3 { font-size: 1.2rem; line-height: 1.35; margin-top: 24px; }
.reference-content p { margin: 12px 0; }
.reference-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.reference-content table { display: block; max-width: 100%; overflow-x: auto; font-size: .8rem; }
.reference-content th,.reference-content td { padding: 9px; border-bottom: 1px solid var(--line); text-align: left; }
.reference-content pre { max-width: 100%; overflow: auto; padding: 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; font-size: .75rem; line-height: 1.65; }
.reference-content label { display: block; font-size: .8rem; margin-block: 12px; }
.reference-content select { width: 100%; margin-top: 6px; padding: 10px; min-height: 44px; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.reference-file input { display: block; width: 100%; min-height: 44px; margin-top: 12px; font: inherit; color: var(--ink); }
.reference-pdf-controls { display: flex; align-items: end; gap: 10px; margin: 16px 0; }
.reference-pdf-controls label { margin: 0; }
.reference-pdf-controls input { display: block; width: 110px; min-height: 44px; background: var(--bg); color: var(--ink); border: 1px solid var(--line); padding: 8px; border-radius: 6px; font: inherit; }
.reference-pdf, .reference-external { width: 100%; height: 55vh; min-height: 300px; border: 1px solid var(--line); background: var(--bg); }
.reference-shelf { padding-block: 60px; }
.reference-shelf > h1 { font-size: clamp(2.5rem,6vw,5rem); }
.reference-edition { border-block: 1px solid var(--line); padding: 28px 0; margin-top: 24px; }
.reference-edition h2 { font-size: clamp(1.5rem,3vw,2rem); }
.reference-edition li { margin: 12px 0; }
.reference-shelf code { font-size: .85em; }
.reference-shelf .shelf-action { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; background: var(--soft); color: var(--ink); border: 1px solid var(--accent); border-radius: 8px; font: inherit; cursor: pointer; }
@media(max-width:760px) { .reference-peek { inset: 12px; margin: auto; width: calc(100vw - 24px); height: calc(100dvh - 24px); padding: 16px; max-height: calc(100dvh - 24px); } body button.reference-trigger { min-width: 24px; min-height: 24px; } .reference-content select, .reference-content input { font-size: 16px; } }
@media(pointer:coarse) { body button.reference-trigger { position: relative; min-width: 24px; min-height: 24px; padding: 0; } .reference-trigger::after { content: ""; position: absolute; inset: -10px; } }
@media print { .reference-peek,.reference-trigger { display: none !important; } }

/* ---------------------------------------------------------------------------
   R22 · one header: brand, navigation, search and Remix.
   The chapter pill and hero shortcuts were removed; Objects is a desktop tool.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
body > header { view-transition-name: site-header; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 180ms; }
body > header .field-find-open {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-left: auto;
  padding: 0 10px 0 14px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}
body > header .field-find-open:before { content: none; }
body > header .field-find-open:hover { color: var(--ink); border-color: var(--accent); }
body > header .field-find-open kbd {
  font: 12px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
body > header .field-find-open ~ #remix { margin-left: 0; }
@media (max-width: 720px) {
  body > header .field-find-open { padding: 0 12px; }
  body > header .field-find-open .find-label,
  body > header .field-find-open kbd { display: none; }
}
@media (max-width: 1023px), (hover: none), (pointer: coarse) {
  html[data-dock-layout=drawer] body.portfolio-body,
  html[data-dock-layout=drawer] body[data-reading-kit] { padding-bottom: var(--reading-pad, 0); }
}
.site-footer { flex-wrap: wrap; }
.site-footer a { min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 420px) {
  body > header .brand { font-size: 0.9375rem; }
  body > header .brand .monogram { font-size: 1.05rem; }
}
@media (max-width: 720px) { body.notes-body > header .brand { font-size: 15px; } }

.reference-trigger svg { display: block; }
/* R26: verified spec sections that open inline in the reader. */
.spec-jumps{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 20px}
.spec-jumps>span{font:600 var(--label-size)/1.4 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:4px}
main .spec-jumps a,.spec-jumps a{display:inline-flex;align-items:baseline;gap:6px;min-height:36px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font-size:.8125rem;line-height:1.3;text-decoration:none}
.spec-jumps a small{font:var(--label-size) ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:var(--accent)}
main .spec-jumps a:hover,.spec-jumps a:hover{border-color:var(--accent);text-decoration:none}
.reference-pdf-controls{flex-wrap:wrap}.reference-pdf-controls .reference-outside{margin-left:auto;align-self:center;color:var(--accent)}
.reference-content .reference-pdf{height:calc(100dvh - 330px);min-height:360px}
.reference-note{font-size:.8125rem;color:var(--muted)}.reference-fallback{display:inline-block;margin:8px 0;color:var(--accent)}
/* R26 review fixes: consistent secondary actions, touch targets and minimum text size. */
.lesson-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.lesson-actions>a:not(.button){display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:5px}
.lesson-actions>a:not(.button):hover{text-decoration-color:var(--accent)}
.back-link{display:inline-flex;align-items:center;min-height:44px}
.site-footer a,.home-footer a{display:inline-flex;align-items:center;min-height:44px}
header .brand{min-height:44px}
.chapter-pager .eyebrow,.reading-constellation .eyebrow,.reading-next-link .eyebrow{font-size:var(--label-size)}
@media (max-width:720px){.latent-readout{font-size:11px}}
/* R26: home uses the same one-row phone nav as every other page (it wrapped 3 + 2). */
@media (max-width:720px){.portfolio-body header nav{display:flex;flex-wrap:wrap;justify-content:center;gap:0 8px}.portfolio-body header nav a{padding-inline:8px}}
/* R29 motion layer: kinetic headings, work thread, grid cover and the orbit rail. */
.kinetic .mw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em;padding-right:.02em}
.kinetic .mw-i{display:inline-block;will-change:transform}
.work{position:relative}
.work-packet{position:absolute;left:0;top:0;width:9px;height:9px;margin:-4px 0 0 -4px;border-radius:2px;background:var(--accent);box-shadow:0 0 10px var(--accent);rotate:45deg;pointer-events:none}
.work-thread{position:absolute;width:1px;background:linear-gradient(var(--accent),color-mix(in srgb,var(--accent) 20%,transparent));transform-origin:top;transform:scaleY(0);pointer-events:none}
.grid-cover{position:absolute;inset:14px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);pointer-events:none}
.fyp-gallery figure>a{position:relative}
.grid-cover i{background:var(--surface);border-radius:4px;transform-origin:center}
.notebook-route,.project-note{transform-style:preserve-3d;will-change:transform}
.notebook-route{background-image:radial-gradient(circle at var(--glare-x,50%) var(--glare-y,0%),color-mix(in srgb,var(--accent) 9%,transparent),transparent 45%)}
.orbit-rail{position:fixed;right:max(18px,calc((100vw - 1240px)/2 - 72px));top:22vh;bottom:22vh;width:14px;z-index:15;opacity:0;transition:opacity .4s ease;pointer-events:none}
.orbit-rail[data-visible]{opacity:1;pointer-events:auto}
.orbit-rail[hidden]{display:none}
.orbit-track{position:absolute;left:6px;top:0;bottom:0;width:1px;background:var(--line)}
.orbit-fill{position:absolute;inset:0;background:var(--accent);transform-origin:top;transform:scaleY(0)}
.orbit-probe{position:absolute;left:1px;width:11px;height:11px;margin-top:-5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 20%,transparent)}
.orbit-rail a{position:absolute;left:0;display:flex;align-items:center;gap:10px;margin-top:-7px;height:14px;color:var(--muted);text-decoration:none;flex-direction:row-reverse;transform:translateX(calc(-100% + 14px))}
.orbit-rail a i{flex:none;width:9px;height:9px;margin-right:2px;border-radius:50%;border:1.5px solid var(--muted);background:var(--bg)}
.orbit-rail a span{font:600 10px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase;opacity:0;transform:translateX(6px);transition:opacity .25s ease,transform .25s ease}
.orbit-rail a:hover span{opacity:1;transform:none}
.orbit-rail a[data-active] i{border-color:var(--accent)}
.orbit-rail a[data-active] span{color:var(--ink)}
@media (max-width:1359px){.orbit-rail{display:none}}
@media (prefers-reduced-motion:reduce){.orbit-rail{display:none}}
html[data-motion=off] .orbit-rail{display:none}
/* A light trail above the probe, and under the rail the readout: the section in view and its nearest heading. */
.orbit-probe::before{content:"";position:absolute;left:4px;bottom:100%;width:3px;height:56px;border-radius:2px;background:linear-gradient(to top,var(--accent),transparent);opacity:.75}
.orbit-readout{position:absolute;top:calc(100% + 28px);right:0;width:max-content;max-width:18em;text-align:right;white-space:nowrap;font:500 10px/1.5 ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:var(--muted)}
.orbit-readout[hidden],.orbit-readout b:empty{display:none}
.orbit-readout small{display:block;font-size:inherit;letter-spacing:.12em;text-transform:uppercase;white-space:normal}
.orbit-readout b{display:block;color:var(--accent);font-weight:600;font-size:11px;white-space:normal}
/* The headline's accent word carries a light trail once motion is on. */
html[data-story=on] .hero h1 em,html[data-story=on] .notes-index h1 em{position:relative}
html[data-story=on] .hero h1 em::after,html[data-story=on] .notes-index h1 em::after{content:"";position:absolute;left:0;right:0;bottom:-.04em;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--second));transform:scaleX(0);transform-origin:left;animation:accent-trail 1.2s .4s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes accent-trail{to{transform:scaleX(1)}}
.latent-sky .latent-ring{transform-box:fill-box;transform-origin:center}
.orbit-rail a span{white-space:nowrap}
/* R30: "Orbs" background — soft iridescent spheres in the Remix colours. */
.orb-layer { position: absolute; inset: -10vmax; pointer-events: none; }
.orb-layer[hidden] { display: none; }
.orb-drift { position: absolute; inset: 0; }
.orb { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%; opacity: .42; filter: blur(10px) saturate(1.15);
  background:
    radial-gradient(circle at 32% 28%, rgb(255 255 255 / .85) 0 4%, rgb(255 255 255 / .25) 12%, transparent 32%),
    radial-gradient(circle at 70% 78%, color-mix(in srgb, var(--second) 70%, transparent), transparent 55%),
    conic-gradient(from 210deg at 55% 50%, var(--accent), var(--second), #9fe3ff, #ffd1f0, var(--accent));
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 58%, transparent 71%); mask: radial-gradient(circle at 50% 50%, #000 58%, transparent 71%);
  box-shadow: inset 0 0 6vmax rgb(255 255 255 / .12); }
.orb-second { background:
    radial-gradient(circle at 32% 28%, rgb(255 255 255 / .8) 0 4%, rgb(255 255 255 / .2) 12%, transparent 32%),
    conic-gradient(from 60deg at 45% 55%, var(--second), #9fe3ff, var(--accent), #ffd1f0, var(--second)); }
.orb-mix { opacity: .38; }
html[data-canvas="light"] .orb { opacity: .62; }
html[data-cosmic-scene="orbs"] .cosmic-backdrop canvas { opacity: .6; }
@media (forced-colors: active) { .orb-layer { display: none; } }

/* R31 UI fixes */
/* Summary rows: the hover wash extends past the text instead of hugging it. */
.case { border-top: 1px solid var(--line); }
.case > summary { border-top: 0; border-radius: 10px; transition: background-color .2s ease, box-shadow .2s ease; }
main .case > summary:hover { box-shadow: -14px 0 0 var(--soft), 14px 0 0 var(--soft); }
/* Wide screens have room for the whole gauge: every section is labelled (muted, not faded, so
   it keeps 4.5:1), the rail moves to the edge so the labels clear the content, and the active
   one turns ink. Narrower, a label would print over the page's text, so only a hovered marker
   shows one; the wider readout needs 1680px to clear the 1240px content column. */
@media (min-width: 1600px) {
  .orbit-rail { right: 28px; }
  .orbit-rail a span { opacity: 1; transform: none; }
}
@media (max-width: 1679px) { .orbit-readout { display: none; } }
@media (max-width: 720px) {
  /* Footer brand: centred as a block, like the links under it. */
  .home-footer > div { width: 100%; align-items: center; }
}
/* One header everywhere: the notes pages use the same phone nav size as the home page. */
@media (max-width: 720px) { .notes-body header nav a { font-size: 0.875rem; } }
/* Footer links are full touch targets on every page. */
body > footer a { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 44px; }
/* Flex links keep the space before their arrow. */
.journal-feature-copy > a { column-gap: .3em; }
body > header .field-find-open { min-width: 44px; min-height: 44px; }
/* Tablets: search collapses to its icon so Remix stays on the header row. */
@media (min-width: 721px) and (max-width: 900px) {
  body > header .field-find-open { padding: 0 12px; }
  body > header .field-find-open .find-label,
  body > header .field-find-open kbd { display: none; }
}
/* The last link in a card does not add extra space under it. */
.fyp-evidence > .text-link:last-child { margin-bottom: 0; }
/* DMA journey recovery mission (R41: moved from the retired object-play.css). */
.recovery-mission{margin-block:16px;padding-block:14px;border-block:1px solid var(--line)}
.recovery-mission[hidden]{display:none}
.recovery-mission h3{font-size:1.1rem;letter-spacing:-.02em;margin:0 0 10px}
.recovery-mission ol{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0}
.recovery-mission li{padding:8px 0;border-top:3px solid var(--line);font-size:.85rem}
.recovery-mission li[data-met=true]{border-color:var(--accent)}
.recovery-mission progress{width:100%;height:6px;accent-color:var(--accent)}
.recovery-mission .caption{margin:6px 0}
.recovery-mission button,.mission-start{min-height:44px}
#journey-actions button[data-recommended=true]{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:600px){.recovery-mission ol{grid-template-columns:1fr;gap:3px}.recovery-mission li{padding:6px 0}}

/* R41 (P1): palette rows keep the result layout; the universe is a small tag. */
.field-finder .finder-command :is(a, button) {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 4px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
}
.field-finder .finder-command :is(a, button):is(:hover, :focus-visible) {
  background: var(--soft);
}
.field-finder .finder-command span {
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* R41 (M13): Rasengan, decorative; field-notes.mjs removes it. */
.rasengan {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 90;
  pointer-events: none;
}
.rasengan i {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
.rasengan .ring {
  border: 2px solid var(--accent);
  background: none;
  box-shadow: 0 0 18px var(--accent);
}


/* R42: the employer line in every footer. */
.site-footer .footer-note, body > footer > .footer-note { flex-basis: 100%; margin: 4px 0 0; max-width: 60ch; color: var(--muted); font-size: .8125rem; }

/* Wide tables: fade the edge that still hides content (set by scrollCues). */
[data-scroll=start] { mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
[data-scroll=end] { mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); }
[data-scroll=middle] { mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
[data-scroll]:focus-visible { outline-offset: -3px; }

/* Shared disclosure: without site-navigation.mjs the links stay visible. */
.menu-toggle { display: none; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); color: var(--ink); font: inherit; font-size: 0.875rem; cursor: pointer; }
@media (max-width: 720px) {
  /* Keep wrapped mobile controls on the trailing edge of the header; below 207px they stay at the start. */
  body > header .field-find-open { margin-left: auto; }
  body > header .brand { margin-right: auto; }
}
@media (max-width: 206px) {
  body > header .field-find-open { margin-left: 0; }
}
/* Keep navigation out of the flow while the phone Menu controller loads.
   The theme script clears data-nav-pending at DOMContentLoaded so failed loading leaves usable links.
   Once installed, the existing data-menu rules below control the collapsed navigation. */
@media (max-width: 960px) {
  html[data-nav-pending] body > header:not([data-menu], [data-menu-open]) nav:not(:focus-within) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (max-width: 480px) {
  header[data-menu] .brand-name { overflow-wrap: normal; }
  header[data-menu] .brand .monogram, header[data-menu] .brand-slash { display: none; }
  /* The summary has aria-label="Theme", so hiding the text keeps its name. The dot gets a ring in the
     text colour so it still shows when the open summary is painted accent, and under forced colours. */
  header[data-menu] .theme-label { display: none; }
  header[data-menu] #remix > summary { min-width: 44px; }
  header[data-menu] #remix > summary i { width: 12px; height: 12px; border: 2px solid currentColor; }
}

/* Navigation gives location feedback without competing with the reading surface. */
body > header > nav { position: relative; align-items: center; }
body > header > nav a { position: relative; border-radius: 8px; }
body > header > nav a[aria-current] { color: var(--accent); }
html:not([data-navigation]) body > header > nav a[aria-current=page] {
  text-decoration: underline;
  text-underline-offset: .3em;
}
.nav-indicator {
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  pointer-events: none;
}
.nav-indicator[hidden] { display: none; }
@media (max-width: 960px) {
  body > header[data-menu] { flex-wrap: wrap; gap: 8px; }
  body > header[data-menu] .menu-toggle { display: inline-flex; align-items: center; }
  body > header[data-menu] > nav {
    order: 3;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 12px 0 0;
    border-top: 1px solid var(--line);
  }
  body > header[data-menu]:not([data-menu-open]) > nav { display: none; }
  body > header[data-menu] > nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    min-height: 44px;
    text-align: center;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  body > header[data-menu] > nav a[aria-current] {
    background: var(--soft);
    text-decoration: underline;
    text-underline-offset: .3em;
  }
  body > header[data-menu] .nav-indicator { display: none; }
  body > header[data-menu] .field-find-open { padding: 0 12px; }
  body > header[data-menu] .find-label,
  body > header[data-menu] .field-find-open kbd { display: none; }
  body > header[data-menu] .brand { flex: 1; min-width: 0; }
  .large-text body > header[data-menu] .brand { flex-basis: 100%; }
}
/* .brand span (styles.css) is accent-coloured for the slash; the surname keeps the name's colour. */
.brand .brand-rest { color: inherit; }
/* Too narrow for the whole name beside the buttons: show "Aravind" so they share one row. */
@media (max-width: 360px) {
  html:not(.large-text) body > header[data-menu] .brand-rest { display: none; }
}
@media (forced-colors: active) {
  body > header > nav a[aria-current] {
    text-decoration: underline;
    text-underline-offset: .3em;
  }
  .nav-indicator { background: none; border-bottom: 2px solid currentColor; }
}