/* Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V5 */
/* Hallmark · macrostructure: Narrative Workflow / Catalogue · genre: modern-minimal · design-system: design.md · designed-as-app
 * app macrostructure: Narrative Workflow · toolbox macrostructure: Catalogue
 * theme: custom · vibe: "criterion instrument, exam paper, red pen"
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: pass (40–41) · nav: app rail · footer: Ft2 · slop: pass (42–45)
 * honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · mobile: pass (34, 49, 50–57)
 */
@import "tokens.css";

:root {
  --ac: var(--color-accent);
  --ac-d: var(--color-accent-dark);
  --ac-tint: var(--color-accent-soft);
  --or: var(--color-mark);
  --or-d: var(--color-error);
  --or-tint: var(--color-mark-soft);
  --bg: var(--color-paper);
  --surface: var(--color-paper);
  --surface-2: var(--color-paper-2);
  --text: var(--color-ink);
  --ink: var(--color-ink);
  --soft: var(--color-neutral);
  --faint: var(--color-muted);
  --line: var(--color-rule-2);
  --line-soft: var(--color-rule-2);
  --accept: var(--color-success);
  --accept-bg: var(--color-success-soft);
  --review: var(--color-warning);
  --review-bg: var(--color-warning-soft);
  --reading: var(--color-reading);
  --reading-bg: var(--color-reading-soft);
  --mono: var(--font-outlier);
  --disp: var(--font-display);
  --radius: var(--radius-card);
  --radius-btn: var(--radius-input);
  --ease: var(--ease-out);
  --band: var(--color-paper-2);
  --or-t: var(--color-mark-soft);
  --ok: var(--color-success);
  --ok-t: var(--color-success-soft);
}

*, *::before, *::after { box-sizing: border-box; }
html,
body { overflow-x: clip; }
html { scroll-padding-top: var(--banner-height); }

body.app-page,
body.toolbox-page {
  margin: 0;
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.62;
}

body.app-page::before,
body.toolbox-page::before {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-base) - 1);
  pointer-events: none;
  content: "";
  background-image: repeating-linear-gradient(
    to bottom,
    color-mix(in oklch, var(--color-rule-2) 44%, transparent) 0,
    color-mix(in oklch, var(--color-rule-2) 44%, transparent) var(--rule-hair),
    transparent var(--rule-hair),
    transparent 2.75rem
  );
  opacity: 0.42;
}

body.app-page > *,
body.toolbox-page > * { position: relative; z-index: var(--z-base); }

h1,
h2,
h3,
h1.t,
h2.t,
.brand b,
.card h3,
.panel h3 {
  font-family: var(--font-display);
  font-style: normal;
  min-width: 0;
  overflow-wrap: anywhere;
}

a,
button,
.btn,
.copy { white-space: nowrap; }

:focus-visible {
  outline: var(--rule-fine) solid var(--color-focus) !important;
  outline-offset: var(--space-3xs) !important;
  border-radius: var(--radius-input);
}

::selection { background: var(--color-mark-soft); color: var(--color-ink); }

body.app-page button:active,
body.toolbox-page button:active { transform: translateY(1px); }
body.app-page button:disabled,
body.app-page button[aria-disabled="true"],
body.toolbox-page button:disabled,
body.toolbox-page button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
body.app-page button[data-state="loading"],
body.toolbox-page button[data-state="loading"] { cursor: progress; }
body.app-page button[data-state="error"],
body.toolbox-page button[data-state="error"] { border-color: var(--color-error); }
body.app-page button[data-state="success"],
body.toolbox-page button[data-state="success"] { border-color: var(--color-success); }
body.app-page a:active,
body.toolbox-page a:active { color: var(--color-accent-dark); }

body.app-page .wrap,
body.toolbox-page .wrap {
  width: min(100%, var(--page-max));
  max-width: var(--page-max);
  padding-inline: var(--page-gutter);
}

/* Shared route header. */
body.app-page header,
body.toolbox-page .top {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-nav);
  min-height: var(--banner-height);
  background: color-mix(in oklch, var(--color-paper) 94%, transparent);
  border-block-end: var(--rule-hair) solid var(--color-rule);
  backdrop-filter: saturate(1.15) blur(0.875rem);
}
body.app-page .hd,
body.toolbox-page .hd { min-height: var(--banner-height); height: auto; }

body.app-page .brand,
body.toolbox-page .brand {
  min-height: 2.75rem;
  gap: var(--space-xs);
  color: var(--color-ink);
  font-size: var(--text-base);
}
body.app-page .brand b,
body.toolbox-page .brand b {
  color: var(--color-ink);
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  font-weight: 500;
}
body.app-page .brand small,
body.toolbox-page .brand small {
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 700;
}

body.app-page .back,
body.app-page .langtoggle,
body.toolbox-page .nav a,
body.toolbox-page .nav button {
  min-height: 2.75rem;
  padding: var(--space-xs) var(--space-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-input);
  background: var(--color-paper);
  color: var(--color-neutral);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
body.app-page .langtoggle { padding: 0; overflow: visible; }
body.app-page .langtoggle button { min-width: 2.75rem; min-height: 2.75rem; padding: 0 var(--space-xs); border-radius: calc(var(--radius-input) - var(--rule-hair)); }
body.app-page .langtoggle button[aria-pressed="true"],
body.toolbox-page .nav .primary { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }

/* Buttons: complete, non-shifting state language. */
body.app-page .btn,
body.toolbox-page .btn,
body.toolbox-page .copy {
  min-height: 2.75rem;
  padding: var(--space-xs) var(--space-md);
  border: var(--rule-hair) solid var(--color-ink);
  border-radius: var(--radius-input);
  background: var(--color-ink);
  color: var(--color-paper);
  box-shadow: none;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
body.app-page .btn.ghost,
body.toolbox-page .btn.ghost {
  border-color: var(--color-rule);
  background: var(--color-paper);
  color: var(--color-ink);
}
body.app-page .btn:active,
body.toolbox-page .btn:active,
body.toolbox-page .copy:active { transform: translateY(1px); }
body.app-page .btn:disabled,
body.app-page .btn[aria-disabled="true"],
body.toolbox-page .btn:disabled,
body.toolbox-page .copy:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
body.app-page .btn[data-state="loading"],
body.toolbox-page .copy[data-state="loading"] { cursor: progress; }
body.app-page .btn[data-state="error"],
body.toolbox-page .copy[data-state="error"] { border-color: var(--color-error); background: var(--color-error); color: var(--color-accent-ink); }
body.app-page .btn[data-state="success"],
body.toolbox-page .copy.done,
body.toolbox-page .copy[data-state="success"] { border-color: var(--color-success); background: var(--color-success); color: var(--color-accent-ink); }

@media (hover: hover) and (pointer: fine) {
  body.app-page .back:hover,
  body.app-page .langtoggle button:hover,
  body.toolbox-page .nav a:hover,
  body.toolbox-page .nav button:hover { background: var(--color-paper-2); color: var(--color-accent-dark); }
  body.app-page .btn:hover,
  body.toolbox-page .btn:hover,
  body.toolbox-page .copy:hover { background: var(--color-accent); color: var(--color-accent-ink); }
  body.app-page .btn.ghost:hover,
  body.toolbox-page .btn.ghost:hover { background: var(--color-paper-2); color: var(--color-accent-dark); }
}

/* Narrative Workflow · marking app */
body.app-page main.wrap { width: min(100%, 76rem); max-width: 76rem; padding-block-end: var(--space-3xl); }

body.app-page .step {
  position: relative;
  padding-block: var(--space-xl);
  border-block-end: 0;
  border-block-start: var(--rule-hair) solid var(--color-rule);
}
body.app-page .step:first-child { border-block-start: 0; }
body.app-page .step::after {
  position: absolute;
  inset: 0 0 auto;
  height: var(--rule-fine);
  content: "";
  background: var(--color-ink);
  transform: scaleX(0.12);
  transform-origin: left;
}
body.app-page .step:first-child::after { background: var(--color-mark); }

body.app-page .eyebrow {
  margin: 0 0 var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-accent-dark);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
}
body.app-page .eyebrow .n,
body.app-page .eyebrow .opt {
  width: auto;
  min-width: 2.25rem;
  height: auto;
  min-height: 2.25rem;
  padding-inline: var(--space-xs);
  border: var(--rule-hair) solid currentColor;
  border-radius: 0;
  background: transparent;
  color: var(--color-mark);
}
body.app-page h1.t,
body.app-page h2.t {
  max-width: 18ch;
  margin: 0 0 var(--space-xs);
  color: var(--color-ink);
  font-size: clamp(2rem, 4.5vw, 3.75rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: var(--tracking-display);
}
body.app-page .sub {
  max-width: 46rem;
  margin: 0 0 var(--space-lg);
  color: var(--color-neutral);
  font-size: var(--text-base);
}

body.app-page .subject-tools { margin-block: var(--space-lg); align-items: end; gap: var(--space-sm); }
body.app-page .subject-search { gap: var(--space-2xs); }
body.app-page .subject-search::after { min-height: 1lh; content: ""; }
body.app-page .subject-search span,
body.app-page .cur-label,
body.app-page .section-l { color: var(--color-muted); font-family: var(--font-body); font-size: 0.6875rem; letter-spacing: var(--tracking-label); }
body.app-page .subject-search input {
  min-height: 2.75rem;
  padding-inline: var(--space-sm) var(--space-xl);
  border: var(--rule-hair) solid var(--color-rule);
  outline: var(--rule-fine) solid transparent;
  outline-offset: var(--rule-hair);
  border-radius: var(--radius-input);
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
body.app-page .subject-search input::placeholder { color: var(--color-muted); }
body.app-page .subject-search input:hover { background: var(--color-paper-2); }
body.app-page .subject-search input:focus-visible { border-width: var(--rule-hair); border-color: var(--color-ink-2); box-shadow: none; background: var(--color-paper); }
body.app-page .subject-search input:disabled { opacity: 0.55; cursor: not-allowed; }
body.app-page .subject-search input[aria-invalid="true"] { border-color: var(--color-error); }
body.app-page .subject-search input[data-state="success"] { border-color: var(--color-success); }

body.app-page .seg {
  min-height: 2.75rem;
  padding: var(--space-3xs);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-input);
  background: var(--color-paper-2);
}
body.app-page .seg button { min-height: 2.25rem; border-radius: calc(var(--radius-input) - var(--rule-hair)); }
body.app-page .seg button[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); }

body.app-page .cur-label { margin-block: var(--space-lg) var(--space-xs); color: var(--color-accent-dark); }
body.app-page .cur-label::after { background: var(--color-rule); }
body.app-page .subjects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-block-start: var(--rule-fine) solid var(--color-ink);
  border-inline-start: var(--rule-hair) solid var(--color-rule-2);
}
body.app-page .subj {
  min-width: 0;
  min-height: 7rem;
  padding: var(--space-sm);
  border: 0;
  border-inline-end: var(--rule-hair) solid var(--color-rule-2);
  border-block-end: var(--rule-hair) solid var(--color-rule-2);
  border-radius: 0;
  background: transparent;
  color: var(--color-ink);
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
body.app-page .subj:hover { background: var(--color-paper-2); border-color: var(--color-rule-2); box-shadow: none; transform: none; }
body.app-page .subj:active { background: var(--color-paper-3); }
body.app-page .subj:disabled,
body.app-page .subj[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
body.app-page .subj[data-state="loading"] { cursor: progress; }
body.app-page .subj[data-state="error"] { background: var(--color-error-soft); }
body.app-page .subj[data-state="success"] { background: var(--color-success-soft); }
body.app-page .subj[aria-pressed="true"] { background: var(--color-accent-soft); box-shadow: inset 0 0 0 var(--rule-fine) var(--color-accent); }
body.app-page .subj .zh { font-family: var(--font-display); font-size: var(--text-md); font-weight: 900; line-height: 1.2; }
body.app-page .subj .mode { border-radius: 0; background: transparent; color: var(--color-accent-dark); font-family: var(--font-body); }
body.app-page .subj .tick { border-radius: 0; background: var(--color-accent); color: var(--color-accent-ink); }
body.app-page .zeroprep,
body.app-page .crit-note {
  border: var(--rule-hair) solid var(--color-accent);
  border-radius: 0;
  background: var(--color-accent-soft);
  color: var(--color-accent-dark);
}

body.app-page .filedrop {
  position: relative;
  min-height: 12rem;
  padding: var(--space-xl) var(--space-lg);
  justify-content: center;
  border: var(--rule-fine) dashed var(--color-rule);
  border-radius: var(--radius-card);
  background: color-mix(in oklch, var(--color-paper-2) 72%, transparent);
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
body.app-page .filedrop::after {
  position: absolute;
  inset: var(--space-sm) var(--space-sm) auto auto;
  content: "DROP SCRIPTS";
  color: var(--color-mark);
  font-family: var(--font-body);
  font-size: 0.625rem;
  letter-spacing: var(--tracking-label);
  transform: rotate(2deg);
}
body.app-page #schoolDrop::after { content: "OPTIONAL STANDARD"; }
body.app-page #fileDrop::after { content: "DROP SCRIPTS"; }
body.app-page .filedrop:hover { background: var(--color-accent-soft); }
body.app-page .filedrop.drag { border-color: var(--color-accent); background: var(--color-accent-soft); }
body.app-page .filedrop:active { transform: translateY(1px); }
body.app-page .filedrop[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
body.app-page .filedrop[data-state="loading"] { opacity: 0.72; cursor: progress; }
body.app-page .filedrop[data-state="error"] { border-color: var(--color-error); background: var(--color-error-soft); }
body.app-page .filedrop[data-state="success"] { border-color: var(--color-success); background: var(--color-success-soft); }
body.app-page .filedrop .fd-icon { color: var(--color-accent); font-family: var(--font-body); }
body.app-page .filedrop .fd-main { color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-md); font-weight: 900; }
body.app-page .filedrop .fd-sub { color: var(--color-muted); font-size: 0.6875rem; }

body.app-page .filechip,
body.app-page .crit-dom,
body.app-page .rcard {
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-input);
  background: var(--color-paper);
}
body.app-page .filechip .ft { border-radius: 0; background: var(--color-accent-soft); color: var(--color-accent-dark); }
body.app-page .rcard.rev,
body.app-page .rcard.read,
body.app-page .rcard.ok { border-inline-start: var(--rule-hair) solid var(--color-rule-2); }
body.app-page .badge,
body.app-page .pill { border-radius: var(--radius-input); }
body.app-page .rhd:hover { background: var(--color-paper-2); }
body.app-page .item .ev,
body.app-page .transcript { border-radius: 0; background: var(--color-paper-2); }
body.app-page .item .ev { border-inline-start: var(--rule-fine) solid var(--color-accent); }
body.app-page .prog .bar { background: var(--color-rule-2); }
body.app-page .prog .bar i { background: var(--color-accent); transition: none; }
body.app-page .toast { z-index: var(--z-toast); border-radius: var(--radius-input); background: var(--color-ink); color: var(--color-paper); }

body.app-page footer {
  padding-block: var(--space-lg) var(--space-3xl);
  border-block-start: var(--rule-hair) solid var(--color-rule);
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: 0.6875rem;
}

/* Catalogue · AI toolbox */
body.toolbox-page .hero {
  padding-block: var(--space-xl) var(--space-2xl);
  border-block-end: var(--rule-fine) solid var(--color-ink);
}
body.toolbox-page .hero .wrap { position: relative; }
body.toolbox-page .hero .wrap::after {
  position: absolute;
  inset: 0 var(--page-gutter) auto auto;
  padding: var(--space-xs);
  content: "08 / PROMPT INDEX";
  border: var(--rule-hair) solid var(--color-mark);
  color: var(--color-mark);
  font-family: var(--font-body);
  font-size: 0.625rem;
  letter-spacing: var(--tracking-label);
  transform: rotate(2deg);
}
body.toolbox-page .eyebrow {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-accent-dark);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-label);
}
body.toolbox-page .eyebrow::before { border-radius: 0; }
body.toolbox-page h1 {
  max-width: 13ch;
  margin-block-start: var(--space-lg);
  color: var(--color-ink);
  font-size: var(--text-display);
  font-weight: 900;
  line-height: 1;
  letter-spacing: var(--tracking-display);
  text-wrap: pretty;
}
body.toolbox-page h1 span { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-mark); text-decoration-thickness: var(--rule-fine); text-underline-offset: var(--rule-fine); }
body.toolbox-page .hero-actions { align-items: center; }
body.toolbox-page .lead { max-width: 46rem; color: var(--color-neutral); font-size: var(--text-md); }
body.toolbox-page .proof {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-block-start: var(--space-xl);
  border-block: var(--rule-hair) solid var(--color-rule);
}
body.toolbox-page .proof div {
  padding: var(--space-sm);
  border: 0;
  border-block-end: var(--rule-hair) solid var(--color-rule-2);
  border-radius: 0;
  background: transparent;
}
body.toolbox-page .proof div:last-child { border-block-end: 0; }
body.toolbox-page .proof b { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 900; }
body.toolbox-page .proof span { color: var(--color-neutral); }

body.toolbox-page .sec { padding-block: var(--space-2xl); border-color: var(--color-rule); }
body.toolbox-page .sec h2 { max-width: 18ch; color: var(--color-ink); font-size: var(--text-display-s); font-weight: 900; line-height: 1.04; letter-spacing: var(--tracking-display); }
body.toolbox-page .sec .sub { max-width: 44rem; color: var(--color-neutral); font-size: var(--text-md); }

body.toolbox-page .grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-block-start: var(--space-xl);
  border-block-start: var(--rule-fine) solid var(--color-ink);
  border-inline-start: var(--rule-hair) solid var(--color-rule-2);
}
body.toolbox-page .card {
  min-width: 0;
  min-height: 0;
  padding: var(--space-lg);
  gap: var(--space-sm);
  border: 0;
  border-inline-end: var(--rule-hair) solid var(--color-rule-2);
  border-block-end: var(--rule-hair) solid var(--color-rule-2);
  border-radius: 0;
  background: transparent;
}
body.toolbox-page .card .tag {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-mark);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-label);
}
body.toolbox-page .card h3 { color: var(--color-ink); font-size: var(--text-lg); font-weight: 900; }
body.toolbox-page .card p { color: var(--color-neutral); }
body.toolbox-page .prompt {
  margin-block-start: auto;
  padding: var(--space-sm);
  border: 0;
  border-radius: 0;
  background: var(--color-paper-2);
  color: var(--color-ink-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}
body.toolbox-page .copy { align-self: stretch; justify-content: center; }

body.toolbox-page .rules {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-block-start: var(--space-xl);
  border-block-start: var(--rule-fine) solid var(--color-ink);
}
body.toolbox-page .rule {
  padding: var(--space-lg) var(--space-sm);
  border: 0;
  border-block-end: var(--rule-hair) solid var(--color-rule-2);
  border-radius: 0;
  background: transparent;
}
body.toolbox-page .rule b { font-family: var(--font-display); font-size: var(--text-md); font-weight: 900; }
body.toolbox-page .rule p { color: var(--color-neutral); }

body.toolbox-page .strategy { grid-template-columns: minmax(0, 1fr); gap: 0; border: var(--rule-fine) solid var(--color-ink); }
body.toolbox-page .panel {
  padding: var(--space-lg);
  border-radius: 0;
  background: var(--color-ink);
  color: var(--color-paper);
}
body.toolbox-page .panel.light {
  border: 0;
  border-block-start: var(--rule-fine) solid var(--color-ink);
  background: var(--color-paper);
  color: var(--color-ink);
}
body.toolbox-page .panel h3 { font-weight: 900; }
body.toolbox-page .panel li { color: inherit; }

body.toolbox-page footer {
  padding-block: var(--space-lg) var(--space-2xl);
  border-color: var(--color-rule);
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: 0.6875rem;
}

@media (min-width: 40rem) {
  body.app-page .subjects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.toolbox-page .proof { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.toolbox-page .proof div { border-block-end: 0; border-inline-end: var(--rule-hair) solid var(--color-rule-2); }
  body.toolbox-page .proof div:last-child { border-inline-end: 0; }
  body.toolbox-page .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.toolbox-page .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.toolbox-page .strategy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.toolbox-page .panel.light { border-block-start: 0; border-inline-start: var(--rule-fine) solid var(--color-ink); }
}

@media (min-width: 60rem) {
  body.app-page .step { padding-inline: var(--space-3xl); }
  body.app-page .subjects { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.toolbox-page .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.toolbox-page .rules { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 26rem) {
  body.app-page .hd-r { gap: var(--space-2xs); }
  body.app-page .back { width: 2.75rem; padding-inline: 0; font-size: 0; }
  body.app-page .back::after { content: "←"; font-family: var(--font-body); font-size: var(--text-md); }
  body.app-page .brand small { display: none; }
  body.app-page .subjects { grid-template-columns: minmax(0, 1fr); }
  body.toolbox-page .hero .wrap::after { display: none; }
  body.toolbox-page .nav { gap: var(--space-2xs); }
  body.toolbox-page .nav button { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.app-page .btn:hover,
  body.app-page .btn:active,
  body.app-page .filedrop:active,
  body.toolbox-page .btn:hover,
  body.toolbox-page .btn:active,
  body.toolbox-page .copy:hover,
  body.toolbox-page .copy:active { transform: none; }
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
}