/* ===========================================================================
   factorymanual — design system v2  ("Workshop")
   ---------------------------------------------------------------------------
   Light, warm, product-y chrome with a paper-cream article surface.
   Hanken Grotesk carries the whole chrome (variable, 400–800). Fraunces
   italic shows up for ONE editorial moment per page (hero, big stat, etc.)
   JetBrains Mono for technical labels and codes. The manual viewer keeps
   its cream pane and Georgia article body — they're the customer's reading
   experience and they work.

   Color: warm white surfaces, charcoal ink, brand orange (#ea580c) reserved
   for primary CTAs, active states, and small decorative accents.

   No external frameworks. CSS variables for tokens, hand-written components.
   =========================================================================== */

/* --- Tokens -------------------------------------------------------------- */

:root {
  /* Surfaces — warm whites, not stark */
  --bg:             #fbfaf6;        /* page */
  --bg-soft:        #f5f3eb;        /* hero / decorative bands */
  --surface:        #ffffff;        /* cards */
  --surface-2:      #f7f5ef;        /* alt rows, recessed inputs */
  --surface-press:  #efece2;        /* deeply recessed */
  --pane:           #f7f3e9;        /* article reading surface — kept */
  --rule:           #e7e3d6;        /* hairlines */
  --rule-strong:    #d6d1c0;        /* heavier divisions */
  --rule-ink:       #1c1b18;        /* on-dark border (rare, hero accents) */

  /* Ink */
  --ink:            #1c1b18;        /* primary text */
  --ink-2:          #4a463e;        /* secondary */
  --ink-3:          #7a7466;        /* tertiary, captions */
  --ink-disabled:   #b6b1a3;
  --ink-on-pane:    #1a1816;        /* primary on cream */
  --ink-on-pane-2:  #443f37;
  --ink-on-pane-3:  #807a72;

  /* Brand + semantic */
  --orange:         #ea580c;
  --orange-hover:   #d04a06;
  --orange-deep:    #b34307;
  --orange-soft:    rgba(234,88,12,0.10);
  --orange-tint:    #fdf0e6;        /* solid wash, used on rows */
  --on-orange:      #ffffff;

  --green:          #1f7a3e;
  --green-soft:     #e7f3eb;
  --red:            #b42c1f;
  --red-soft:       #fbe9e6;
  --amber:          #9a6a00;
  --amber-soft:     #fbf2da;

  /* Type
     The chrome is Hanken Grotesk for everything — display, body, buttons.
     Fraunces is the editorial italic accent, only at hero/display sizes.
     JetBrains Mono carries the technical labels (year, eyebrows, codes).
     Georgia stays as the article-body fallback inside the manual viewer. */
  --sans:    "Hanken Grotesk", -apple-system, BlinkMacSystemFont,
             "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --serif:   "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code",
             Menlo, Consolas, monospace;
  --article: Georgia, "Iowan Old Style", "Charter", "Cambria",
             "Times New Roman", serif;

  /* Type scale — modest 1.18 ratio */
  --size-xs:   12px;
  --size-sm:   13.5px;
  --size-base: 15.5px;
  --size-md:   17px;
  --size-lg:   20px;
  --size-xl:   24px;
  --size-2xl:  32px;
  --size-3xl:  44px;
  --size-4xl:  60px;

  /* Spacing — 4px grid */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px;

  /* Radii */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 24px;
  --r-pill: 999px;

  /* Shadows — gentle, paper-like */
  --shadow-1: 0 1px 2px rgba(28,27,24,0.04), 0 1px 1px rgba(28,27,24,0.02);
  --shadow-2: 0 1px 3px rgba(28,27,24,0.05), 0 6px 16px -4px rgba(28,27,24,0.06);
  --shadow-3: 0 1px 3px rgba(28,27,24,0.06), 0 12px 32px -8px rgba(28,27,24,0.10);
  --shadow-orange: 0 1px 2px rgba(234,88,12,0.20), 0 8px 20px -6px rgba(234,88,12,0.35);

  /* Focus */
  --focus-ring: 0 0 0 3px rgba(234,88,12,0.35);

  /* Layout */
  --side-w: 296px;
  --shell-max: 1120px;
}

/* --- Reset --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--size-base);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "ss02", "cv11"; /* Hanken alt forms — tasteful */
}

/* Very faint diagonal grain — paper feel, never noticeable, just texture */
body::before {
  content: "";
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.16 0 0 0 0 0.13 0 0 0 0.045 0'/></filter><rect width='80' height='80' filter='url(%23n)'/></svg>");
  pointer-events: none;
  opacity: 0.5;
  z-index: 0;
  mix-blend-mode: multiply;
}
body > * { position: relative; z-index: 1; }

img, svg { display: block; max-width: 100%; }
a {
  color: var(--orange);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; text-decoration-color: rgba(234,88,12,0.45);
  transition: color .12s, text-decoration-color .12s;
}
a:hover { color: var(--orange-deep); text-decoration-color: currentColor; }
hr {
  border: 0; height: 1px; background: var(--rule);
  margin: var(--sp-5) 0;
}
::selection { background: var(--orange); color: var(--on-orange); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 0; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }

/* Type defaults */
h1, h2, h3, h4, h5 {
  font-family: var(--sans);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.018em;
  line-height: 1.12;
  margin: 0;
}
h1 { font-size: var(--size-2xl); }
h2 { font-size: var(--size-xl); }
h3 { font-size: var(--size-lg); }
h4 { font-size: var(--size-md); }
p { margin: 0 0 1em; }

/* Utility */
.muted { color: var(--ink-3); }
.small { font-size: var(--size-sm); }
.mono  { font-family: var(--mono); font-feature-settings: "ss01"; }
.serif-italic { font-family: var(--serif); font-style: italic; font-weight: 400; }
.eyebrow {
  display: inline-block;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--orange); margin: 0;
}
.eyebrow::before { content: "—"; margin-right: 10px; opacity: 0.65; letter-spacing: 0; }

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

.hdr {
  display: flex; align-items: center; gap: var(--sp-5);
  padding: 14px var(--sp-6);
  background: rgba(255,255,255,0.86);
  border-bottom: 1px solid var(--rule);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
          backdrop-filter: saturate(140%) blur(8px);
  position: sticky; top: 0; z-index: 50;
}
.hdr-brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink); text-decoration: none;
  font-family: var(--sans); font-size: 17px;
  font-weight: 700; letter-spacing: -0.018em;
  border: 0; padding: 4px 0;
}
.hdr-brand:hover { color: var(--ink); }
.hdr-mark {
  width: 26px; height: 26px; flex-shrink: 0;
  display: inline-block;
  transition: transform .2s ease;
}
.hdr-brand:hover .hdr-mark { transform: rotate(-6deg); }
.hdr-wordmark { color: var(--ink); }
.hdr-wordmark .tld {
  color: var(--orange);
  font-weight: 600; /* slightly lighter than the wordmark so it looks like an accent */
}

.hdr-nav {
  margin-left: auto;
  display: flex; align-items: center;
  gap: var(--sp-2);
}
.hdr-link {
  font-family: var(--sans); font-size: 14.5px;
  font-weight: 600; white-space: nowrap;
  color: var(--ink-2); text-decoration: none;
  padding: 8px 14px; border-radius: var(--r-pill);
  transition: color .12s, background .12s;
}
.hdr-link:hover { color: var(--ink); background: var(--surface-2); }
.hdr-link.is-active {
  color: var(--orange); background: var(--orange-soft);
}
.hdr-logout { margin: 0; padding: 0; }
.hdr-logout button {
  font-family: var(--sans); font-size: 14.5px; font-weight: 600;
  white-space: nowrap;
  -webkit-appearance: none; appearance: none;
  color: var(--ink-3); background: transparent; border: 0;
  padding: 8px 14px; border-radius: var(--r-pill);
  cursor: pointer;
  transition: color .12s, background .12s;
}
.hdr-logout button:hover { color: var(--ink); background: var(--surface-2); }

/* --- Main column --------------------------------------------------------- */

.main {
  flex: 1;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-5) var(--sp-8);
}
.main.is-narrow   { max-width: 480px; padding-top: var(--sp-8); }
.main.is-wide     { max-width: 1100px; }
.main.is-flush    { max-width: none; padding: 0; }

@media (max-width: 760px) {
  .main { padding: var(--sp-6) var(--sp-4) var(--sp-7); }
  .main.is-narrow { padding-top: var(--sp-6); }
}

/* --- Cards --------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  margin: 0 0 var(--sp-5);
  box-shadow: var(--shadow-2);
  position: relative;
}
.card.is-quiet { box-shadow: var(--shadow-1); }
.card h1 { font-size: var(--size-xl); margin: 0 0 var(--sp-2); letter-spacing: -0.018em; }
.card h2 {
  font-size: var(--size-md);
  margin: var(--sp-6) 0 var(--sp-3);
  color: var(--ink);
}
.card > h1:first-child, .card > h2:first-child { margin-top: 0; }
.card > p:first-of-type { margin-top: 0; }
.card-sub {
  color: var(--ink-3);
  font-size: var(--size-sm);
  margin: 0 0 var(--sp-5);
}

/* Auth card — centered minimal */
.auth-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  padding: var(--sp-7) var(--sp-6);
  box-shadow: var(--shadow-3);
  position: relative;
}
.auth-card h1 {
  font-size: var(--size-2xl);
  font-weight: 700;
  letter-spacing: -0.022em;
  margin: 0 0 var(--sp-2);
}
.auth-card .card-sub {
  margin-bottom: var(--sp-6);
}
.auth-card .form { margin-top: var(--sp-5); }
.auth-foot {
  margin: var(--sp-6) 0 0;
  padding: var(--sp-4) 0 0;
  border-top: 1px solid var(--rule);
  font-size: var(--size-sm);
  color: var(--ink-3);
  display: flex; flex-direction: column; gap: 6px;
}
.auth-foot a { color: var(--ink-2); text-decoration-color: var(--rule-strong); }
.auth-foot a:hover { color: var(--orange); }

/* --- Forms --------------------------------------------------------------- */

.form { margin: 0; }
.field { display: block; margin: 0 0 var(--sp-4); }
.field-label {
  display: block;
  font-family: var(--sans);
  font-size: 13px; font-weight: 600;
  color: var(--ink); margin-bottom: 8px;
  letter-spacing: -0.005em;
}
.field-label .muted { font-weight: 400; color: var(--ink-3); }
.field-hint {
  display: block;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 6px;
  line-height: 1.45;
}

.form input[type="email"],
.form input[type="password"],
.form input[type="text"],
.form input[type="search"],
.form select,
.form textarea {
  display: block; width: 100%;
  height: 48px;
  padding: 0 14px;
  font-family: var(--sans);
  font-size: 15.5px; font-weight: 400;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  outline: 0;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.form textarea { height: auto; padding: 12px 14px; min-height: 96px; }
.form input::placeholder, .form textarea::placeholder { color: var(--ink-disabled); }
.form input:hover, .form select:hover, .form textarea:hover { border-color: #b6ad96; }
.form input:focus, .form select:focus, .form textarea:focus {
  border-color: var(--orange);
  box-shadow: var(--focus-ring);
  background: var(--surface);
}

/* Big auth inputs — 52px, slightly more presence */
.form.is-big input[type="email"],
.form.is-big input[type="password"],
.form.is-big input[type="text"],
.form.is-big select {
  height: 52px; font-size: 16px; padding: 0 16px;
  border-radius: var(--r-md);
}
.form.is-big .field-label { font-size: 13.5px; }

/* Selects */
.form select {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%231c1b18' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px; cursor: pointer;
}
.form select:disabled {
  background-color: var(--surface-2); color: var(--ink-disabled);
  cursor: not-allowed; border-color: var(--rule);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23b6b1a3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>");
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans);
  font-size: 15px; font-weight: 600;
  text-decoration: none;
  height: 44px;
  padding: 0 20px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background .1s, color .1s, border-color .1s, transform .04s, box-shadow .1s;
  letter-spacing: -0.005em;
  -webkit-appearance: none; appearance: none;
}
.btn:hover {
  background: var(--surface-2);
  border-color: #b6ad96;
  color: var(--ink);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 0; box-shadow: var(--focus-ring); }

.btn-primary {
  background: var(--orange);
  color: var(--on-orange);
  border-color: var(--orange);
  box-shadow: var(--shadow-orange);
}
.btn-primary:hover {
  background: var(--orange-hover);
  border-color: var(--orange-hover);
  color: var(--on-orange);
}
.btn-primary:active { box-shadow: 0 1px 2px rgba(234,88,12,0.20); }

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-2);
  box-shadow: none;
}
.btn-ghost:hover {
  background: var(--surface-2);
  border-color: transparent;
  color: var(--ink);
}

.btn-link {
  background: transparent;
  border: 0;
  color: var(--orange);
  padding: 0; height: auto;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}
.btn-link:hover { background: transparent; color: var(--orange-deep); }

.btn-block { width: 100%; }
.btn-lg { height: 52px; font-size: 16px; padding: 0 24px; border-radius: var(--r-md); }
.btn-xl { height: 56px; font-size: 17px; padding: 0 28px; }

.btn-primary:disabled, .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed; transform: none;
  box-shadow: none;
}

/* --- Notices ------------------------------------------------------------- */

.notice, .error, .success {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  margin: 0 0 var(--sp-4);
  border-radius: var(--r-md);
  font-size: var(--size-sm); line-height: 1.5;
  border: 1px solid;
}
.notice {
  background: var(--amber-soft); border-color: rgba(154,106,0,0.18); color: var(--amber);
}
.error {
  background: var(--red-soft); border-color: rgba(180,44,31,0.18); color: var(--red);
}
.success {
  background: var(--green-soft); border-color: rgba(31,122,62,0.18); color: var(--green);
}
.notice::before, .error::before, .success::before {
  content: ""; flex-shrink: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; margin-top: 7px;
}

/* --- Meta list (account) ------------------------------------------------- */

.meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 14px var(--sp-6);
  font-size: var(--size-base);
  margin: 0 0 var(--sp-5);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.meta dt {
  font-family: var(--sans);
  font-size: 12.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-3);
  padding-top: 3px;
}
.meta dd { margin: 0; color: var(--ink); font-weight: 500; }

/* Status pill */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 10px 3px 9px;
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.005em;
  background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--rule);
}
.pill::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-3); flex-shrink: 0;
}
.pill.is-active { background: var(--green-soft); color: var(--green); border-color: rgba(31,122,62,0.20); }
.pill.is-active::before { background: var(--green); box-shadow: 0 0 0 3px rgba(31,122,62,0.18); }
.pill.is-lapsed { background: var(--red-soft); color: var(--red); border-color: rgba(180,44,31,0.20); }
.pill.is-lapsed::before { background: var(--red); }
.pill.is-pending { background: var(--amber-soft); color: var(--amber); border-color: rgba(154,106,0,0.20); }
.pill.is-pending::before { background: var(--amber); }

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

.ftr {
  padding: var(--sp-5) var(--sp-6);
  background: transparent;
  border-top: 1px solid var(--rule);
  color: var(--ink-3);
  font-family: var(--sans);
  font-size: var(--size-sm);
  display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center;
}
.ftr-brand {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink-2);
}
.ftr-brand-mark {
  width: 18px; height: 18px; opacity: 0.7;
}
.ftr a {
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
}
.ftr a:hover { color: var(--orange); border-bottom-color: var(--orange); }
.ftr-spacer { flex: 1; }
@media (max-width: 600px) {
  .ftr { padding: var(--sp-4); gap: var(--sp-3); }
}

/* =======================================================================
   HOMEPAGE HERO
   ======================================================================= */

.hero {
  padding: var(--sp-9) 0 var(--sp-8);
  position: relative;
  text-align: left;
}
.hero-eyebrow {
  margin: 0 0 var(--sp-5);
}
.hero-headline {
  font-family: var(--sans);
  font-size: clamp(40px, 6.5vw, 72px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--ink);
  margin: 0 0 var(--sp-5);
  max-width: 16ch;
}
.hero-headline .hero-display {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 96;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.hero-headline .hero-tail {
  display: block;
  font-weight: 700;
  font-family: var(--sans);
  letter-spacing: -0.028em;
  color: var(--ink);
}
.hero-headline .hero-amp {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  color: var(--orange);
  font-variation-settings: "SOFT" 100, "opsz" 96;
}
.hero-lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 56ch;
  margin: 0 0 var(--sp-6);
}
.hero-cta {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin: 0 0 var(--sp-7);
}
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: var(--sp-7);
  margin: var(--sp-8) 0 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
  align-items: baseline;
}
.hero-stat dt {
  font-family: var(--sans);
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.hero-stat dd {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(22px, 3vw, 30px); font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--ink);
  line-height: 1;
}
.hero-stat dd .unit { color: var(--ink-3); font-weight: 500; }

/* Decorative blueprint corner — subtle grid + cross-hair, top-right */
.hero-grid {
  position: absolute;
  top: var(--sp-7); right: 0;
  width: 240px; height: 240px;
  opacity: 0.55;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(28,27,24,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(28,27,24,0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 50%, transparent 100%);
          mask-image: radial-gradient(closest-side at 50% 50%, #000 50%, transparent 100%);
}
.hero-grid::after {
  content: ""; position: absolute; inset: 50% auto auto 50%;
  width: 24px; height: 24px;
  border: 1.5px solid var(--orange);
  transform: translate(-50%, -50%);
}

@media (max-width: 760px) {
  .hero { padding: var(--sp-7) 0 var(--sp-6); }
  .hero-headline { font-size: 40px; max-width: none; }
  .hero-lede { font-size: 17px; }
  .hero-stats {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);
    margin-top: var(--sp-6);
  }
  .hero-grid { display: none; }
}

/* "What's inside" — short three-up below the hero */
.feature-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin: var(--sp-8) 0 0;
}
@media (max-width: 760px) {
  .feature-row { grid-template-columns: 1fr; gap: var(--sp-4); margin-top: var(--sp-6); }
}
.feature {
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
}
.feature-num {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--orange); letter-spacing: 0.12em;
  margin-bottom: 10px;
}
.feature h3 {
  font-size: 17px; font-weight: 700;
  letter-spacing: -0.012em;
  margin: 0 0 6px;
}
.feature p {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
}

/* =======================================================================
   BROWSE PICKER (hero on /browse)
   ======================================================================= */

.picker-hero {
  text-align: center;
  padding: var(--sp-7) 0 var(--sp-6);
}
.picker-hero h1 {
  font-family: var(--sans);
  font-size: clamp(32px, 5vw, 44px);
  font-weight: 700;
  letter-spacing: -0.024em;
  line-height: 1.1;
  margin: 0 0 var(--sp-3);
}
.picker-hero h1 .accent {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-variation-settings: "SOFT" 50, "opsz" 72;
  color: var(--orange);
}
.picker-hero p {
  font-size: 17px;
  color: var(--ink-2);
  max-width: 56ch;
  margin: 0 auto;
}

.picker-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  box-shadow: var(--shadow-3);
  max-width: 720px;
  margin: var(--sp-5) auto var(--sp-7);
}
.picker-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-3);
  align-items: end;
}
.picker-form .field { margin: 0; }
.picker-form select { height: 56px; font-size: 16px; }
.picker-cta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: var(--sp-4);
}
.picker-cta .btn { height: 56px; font-size: 16px; width: 100%; }
@media (max-width: 720px) {
  .picker-card { padding: var(--sp-4); }
  .picker-form { grid-template-columns: 1fr; gap: var(--sp-3); }
}

/* --- Breadcrumbs --------------------------------------------------------- */

.crumbs {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-3);
  margin: 0 0 var(--sp-5);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.crumbs a {
  color: var(--ink-2);
  text-decoration: none;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  transition: background .1s, color .1s;
}
.crumbs a:hover { background: var(--surface-2); color: var(--orange); }
.crumbs .sep { color: var(--ink-disabled); }

/* --- Alpha browse (makes / years) ---------------------------------------- */

.alpha {
  font-family: var(--mono);
  font-size: 13px; font-weight: 600;
  color: var(--orange);
  text-transform: uppercase; letter-spacing: 0.18em;
  margin: var(--sp-6) 0 var(--sp-3);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.grid {
  list-style: none; padding: 0;
  margin: 0 0 var(--sp-5);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.grid li { margin: 0; }
.grid a {
  display: block;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  color: var(--ink);
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: background .1s, border-color .1s, color .1s, transform .04s;
}
.grid a:hover {
  background: var(--orange-tint);
  border-color: var(--orange);
  color: var(--orange-deep);
}
.grid a:active { transform: translateY(1px); }

/* Model blocks on /browse/Make/Year */
.model-block {
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--surface);
  margin: 0 0 var(--sp-3);
  overflow: hidden;
}
.model-block summary {
  list-style: none;
  cursor: pointer;
  padding: var(--sp-4) var(--sp-5);
  display: flex; align-items: baseline; gap: var(--sp-3);
  font-family: var(--sans);
  border-bottom: 1px solid transparent;
}
.model-block summary::-webkit-details-marker { display: none; }
.model-block[open] summary { border-bottom-color: var(--rule); }
.model-block .model-name { font-weight: 700; font-size: 17px; letter-spacing: -0.012em; }
.variants {
  list-style: none;
  padding: var(--sp-2);
  margin: 0;
  display: grid; gap: 4px;
}
.variants li { margin: 0; }
.variants a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  color: var(--ink);
  text-decoration: none;
  font-size: 14.5px;
  transition: background .1s, color .1s;
}
.variants a:hover {
  background: var(--orange-tint);
  color: var(--orange-deep);
}

/* =======================================================================
   MANUAL VIEWER
   --
   The reading pane (cream + Georgia) is unchanged — that's where the
   customer actually consumes content. Only the chrome (header bleed,
   toolbar, sidebar) is refreshed to match the light system.
   ======================================================================= */

.manual-shell {
  display: grid;
  grid-template-columns: var(--side-w) 1fr;
  gap: 0;
  width: 100%;
  flex: 1;
  align-items: stretch;
  background: var(--bg);
  position: relative;
}

/* --- Sidebar (desktop) --------------------------------------------------- */

.manual-side {
  background: var(--surface);
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column;
  min-height: 0;
}

/* Drawer toggle / close — hidden on desktop, customised on mobile */
.manual-drawer-toggle,
.manual-drawer-close {
  -webkit-appearance: none; appearance: none;
  margin: 0; padding: 0; border: 0; background: transparent;
  color: inherit; font: inherit; box-sizing: border-box;
}
.manual-drawer-toggle,
.manual-drawer-backdrop,
.manual-drawer-close { display: none; }

/* Mobile: turn the sidebar into an off-canvas drawer */
@media (max-width: 860px) {
  .manual-shell { grid-template-columns: 1fr; }

  .manual-drawer-toggle {
    display: inline-flex !important; align-items: center; gap: 10px;
    position: fixed !important;
    right: calc(16px + env(safe-area-inset-right));
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 60;
    padding: 13px 18px 13px 16px;
    background: var(--orange); color: var(--on-orange);
    border: 0;
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-orange);
    font-family: var(--sans); font-weight: 700; font-size: 14px;
    letter-spacing: -0.005em;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .manual-drawer-toggle:active { transform: translateY(1px); }
  .manual-drawer-icon {
    display: inline-flex; flex-direction: column; justify-content: space-between;
    width: 16px; height: 12px;
  }
  .manual-drawer-icon > span { display: block; height: 2px; background: var(--on-orange); border-radius: 1px; }

  .manual-drawer-backdrop {
    display: block;
    position: fixed; inset: 0; z-index: 70;
    background: rgba(28,27,24,0.45);
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .manual-shell.is-drawer-open .manual-drawer-backdrop { opacity: 1; pointer-events: auto; }

  .manual-side {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 71;
    width: 88vw; max-width: 360px;
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
    box-shadow: 8px 0 32px rgba(28,27,24,0.18);
    border-right: 0;
    background: var(--surface);
  }
  .manual-shell.is-drawer-open .manual-side { transform: translateX(0); }

  .manual-drawer-close {
    display: inline-flex !important; position: absolute !important;
    top: 8px; right: 8px; z-index: 5;
    align-items: center; justify-content: center;
    width: 40px; height: 40px;
    background: transparent; color: var(--ink-3);
    border: 0; font-size: 28px; line-height: 1;
    border-radius: var(--r-pill);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    font-family: var(--sans); padding: 0;
  }
  .manual-drawer-close:hover { background: var(--surface-2); color: var(--ink); }

  .manual-side-head { padding-right: 56px; }

  .manual-tree > ul > li > details > summary {
    padding-top: 16px; padding-bottom: 16px;
  }
  .manual-tree details details > summary {
    padding-top: 10px; padding-bottom: 10px; font-size: 14.5px;
  }
  .manual-tree li > a {
    padding-top: 10px; padding-bottom: 10px; font-size: 14px;
  }
  .manual-side-tab { padding: 16px var(--sp-3); font-size: 14px; }

  body.has-drawer-open { overflow: hidden; }

  .manual-main { padding-bottom: 96px; }
  .manual-empty.is-start { display: none; }

  .hdr { padding: 10px var(--sp-4); gap: var(--sp-3); }
  .hdr-mark { width: 24px; height: 24px; }
  .hdr-wordmark { display: none; }
  .hdr-nav { gap: 6px; }
  .hdr-link, .hdr-logout button {
    font-size: 13.5px; padding: 7px 10px;
  }
}

/* Sidebar vehicle header */
.manual-side-head {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  padding: var(--sp-5);
  position: relative;
}
.manual-side-head::before {
  content: "VEHICLE";
  display: block;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.20em; color: var(--orange);
  margin-bottom: 10px;
}
.manual-vehicle { display: flex; flex-direction: column; gap: 2px; }
.manual-year {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.10em; color: var(--ink-3);
}
.manual-make {
  font-family: var(--sans); font-weight: 700; font-size: 21px;
  color: var(--ink); line-height: 1.12; letter-spacing: -0.018em;
  margin-top: 2px;
}
.manual-model {
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  color: var(--ink-2); margin-top: 4px; line-height: 1.4;
  word-break: break-word;
}
.manual-side-change {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--sp-4);
  font-family: var(--sans); font-size: 13.5px; font-weight: 500;
  color: var(--ink-3); border: 0;
  text-decoration: none;
  padding: 6px 10px;
  background: var(--surface-2);
  border-radius: var(--r-pill);
  transition: background .1s, color .1s;
}
.manual-side-change::before { content: "←"; color: var(--orange); }
.manual-side-change:hover { background: var(--orange-tint); color: var(--orange-deep); }

/* Tabs (Repair / Labor) */
.manual-side-tabs {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--rule);
  padding: var(--sp-2);
  gap: var(--sp-1);
}
.manual-side-tabs.is-single { grid-template-columns: 1fr; }
.manual-side-tab {
  display: block;
  padding: 10px var(--sp-3);
  text-align: center;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none; color: var(--ink-3);
  border: 0;
  border-radius: var(--r-sm);
  transition: color .1s, background .1s;
}
.manual-side-tab:hover { color: var(--ink); background: var(--surface); }
.manual-side-tab.is-active {
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.manual-side-tab.is-active::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange);
  margin-right: 6px; vertical-align: middle;
  transform: translateY(-1px);
}

/* Tree */
.manual-tree {
  padding: var(--sp-2) 0 var(--sp-7);
  overflow-y: auto; flex: 1; min-height: 0;
  scrollbar-color: var(--rule-strong) transparent;
  scrollbar-width: thin;
}
.manual-tree::-webkit-scrollbar { width: 8px; }
.manual-tree::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 4px; }
.manual-tree::-webkit-scrollbar-track { background: transparent; }

.manual-tree ul { list-style: none; padding: 0; margin: 0; }
.manual-tree .folder-icon { display: none; }
.manual-tree a[name] { display: none; }
.manual-tree details { margin: 0; }
.manual-tree summary::-webkit-details-marker { display: none; }

/* Top-level section rows */
.manual-tree > ul > li > details > summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 18px 1fr;
  gap: 10px; align-items: baseline;
  padding: 11px var(--sp-5) 11px var(--sp-4);
  font-family: var(--sans); font-weight: 600; font-size: 12.5px;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--ink); user-select: none;
  border-top: 1px solid var(--rule);
  border-left: 3px solid transparent;
  background: transparent;
  transition: background .08s, border-color .08s, color .08s;
}
.manual-tree > ul > li:first-child > details > summary { border-top: 0; }
.manual-tree > ul > li > details[open] > summary {
  background: var(--orange-tint);
  border-left-color: var(--orange);
  color: var(--ink);
}
.manual-tree > ul > li > details > summary:hover {
  background: var(--surface-2);
}
.manual-tree > ul > li > details[open] > summary:hover {
  background: var(--orange-tint);
}
.manual-tree > ul > li > details > summary::before {
  content: "+";
  font-family: var(--mono); font-size: 14px; font-weight: 600;
  color: var(--orange); line-height: 1; text-align: center;
}
.manual-tree > ul > li > details[open] > summary::before { content: "−"; }

/* Open section container */
.manual-tree > ul > li > details > ul {
  padding: var(--sp-1) 0 var(--sp-2) 0;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--rule);
}

/* Nested folders */
.manual-tree ul ul {
  padding-left: 0;
  margin-left: var(--sp-5);
  border-left: 1px solid var(--rule);
}
.manual-tree ul ul > li { position: relative; }
.manual-tree ul ul > li::before {
  content: ""; position: absolute;
  left: 0; top: 14px;
  width: var(--sp-3); height: 1px;
  background: var(--rule);
}

.manual-tree details details > summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 16px 1fr;
  gap: 6px; align-items: baseline;
  padding: 6px var(--sp-3) 6px var(--sp-4);
  font-family: var(--sans); font-weight: 500; font-size: 13.5px;
  text-transform: none; letter-spacing: -0.005em;
  color: var(--ink); user-select: none;
  border-left: 2px solid transparent;
  background: none;
  transition: background .08s, color .08s, border-color .08s;
}
.manual-tree details details > summary::before {
  content: "+";
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  color: var(--orange); line-height: 1.1; text-align: center;
}
.manual-tree details details[open] > summary::before { content: "−"; }
.manual-tree details details > summary:hover {
  background: var(--surface-2);
  border-left-color: var(--rule-strong);
}
.manual-tree details details details > summary {
  font-weight: 500; color: var(--ink-2);
  font-size: 13px;
}

/* Leaf links */
.manual-tree li > a {
  display: block;
  padding: 6px var(--sp-3) 6px 26px;
  font-family: var(--sans); font-size: 13px; font-weight: 400;
  line-height: 1.45; letter-spacing: -0.005em;
  color: var(--ink-2); text-decoration: none;
  border: 0; border-left: 2px solid transparent;
  overflow-wrap: break-word; hyphens: none;
  transition: background .08s, color .08s, border-color .08s;
}
.manual-tree li > a:hover {
  background: var(--surface-2);
  color: var(--ink);
}
.manual-tree li > a.is-active {
  background: var(--orange-soft);
  color: var(--orange-deep);
  border-left: 2px solid var(--orange);
  font-weight: 600;
}
.manual-tree li > a.is-active:hover { color: var(--orange-deep); }

/* --- Main article pane (cream, kept) ------------------------------------ */

.manual-main {
  background: var(--pane);
  color: var(--ink-on-pane);
  padding: var(--sp-7) var(--sp-8);
  min-width: 0;
  font-family: var(--article);
  font-size: var(--size-md);
  line-height: 1.7;
  border-left: 1px solid var(--rule);
}
@media (max-width: 860px) {
  .manual-main {
    padding: var(--sp-5) var(--sp-4);
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
}

.manual-section-title {
  font-family: var(--article);
  font-weight: 700;
  font-size: var(--size-2xl);
  margin: 0 0 var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--ink-on-pane);
  color: var(--ink-on-pane);
  position: relative;
  letter-spacing: -0.012em;
}
.manual-section-title::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 64px; height: 4px; background: var(--orange);
}

/* Article body (from LEMON) */
.manual-main h1 {
  font-family: var(--article);
  font-size: var(--size-2xl); font-weight: 700;
  margin: var(--sp-5) 0 var(--sp-3);
  color: var(--ink-on-pane);
  letter-spacing: -0.005em;
}
.manual-main h2 {
  font-family: var(--article);
  font-size: var(--size-xl); font-weight: 700;
  margin: var(--sp-6) 0 var(--sp-3);
  padding-bottom: 6px;
  border-bottom: 1px solid #d8d1c2;
  color: var(--ink-on-pane);
}
.manual-main h3 {
  font-family: var(--article);
  font-size: var(--size-lg); font-weight: 700;
  margin: var(--sp-4) 0 var(--sp-2);
  color: var(--ink-on-pane-2);
}
.manual-main h4 {
  font-family: var(--mono);
  font-size: var(--size-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.10em;
  margin: var(--sp-3) 0 var(--sp-2);
  color: var(--ink-on-pane-3);
}
.manual-main p { margin: 0 0 var(--sp-4); max-width: 72ch; }
.manual-main ul, .manual-main ol { margin: var(--sp-3) 0; padding-left: var(--sp-5); }
.manual-main li { margin: var(--sp-1) 0; max-width: 72ch; }
.manual-main a {
  color: var(--orange-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  border: 0;
}
.manual-main a:hover { color: var(--ink-on-pane); }
.manual-main img {
  max-width: 100%; height: auto;
  margin: var(--sp-4) 0;
  border: 1px solid #d8d1c2;
  border-radius: var(--r-sm);
  background: #fff;
}

/* Spec tables */
.manual-main table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: var(--size-sm);
  margin: var(--sp-4) 0;
  max-width: 100%;
  border: 1px solid #b3aca2;
  border-radius: var(--r-sm);
  white-space: normal;
}
.manual-main th, .manual-main td {
  border: 1px solid #d8d1c2;
  padding: 9px 13px;
  text-align: left; vertical-align: top;
  min-width: 80px;
}
.manual-main thead th, .manual-main th[colspan] {
  background: #efeadd;
  color: var(--ink-on-pane);
  font-weight: 700;
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: var(--size-xs);
  letter-spacing: 0.06em;
}
.manual-main tbody tr:nth-child(even) td { background: rgba(26,24,22,0.018); }
.manual-main button[id^="expand-"], .manual-main button[id^="collapse-"] { display: none; }
.manual-main [data-removed="bundle-link"] { display: none; }

/* Article empty state */
.manual-empty {
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "SOFT" 50, "opsz" 32;
  font-size: var(--size-md);
  color: var(--ink-on-pane-3);
  margin: var(--sp-7) 0;
  padding: var(--sp-3) 0 var(--sp-3) var(--sp-5);
  border-left: 3px solid var(--orange);
  max-width: 56ch;
}

/* Loading state */
.manual-loading-wrap { display: flex; align-items: center; justify-content: center; padding: var(--sp-7); }
.manual-loading {
  display: inline-block; width: 28px; height: 28px;
  border: 2px solid var(--orange);
  border-radius: var(--r-sm);
  position: relative;
  animation: rotate-square 1s linear infinite;
}
.manual-loading::after {
  content: ""; position: absolute; inset: 2px;
  border: 1px solid rgba(234,88,12,0.3);
  border-radius: 2px;
}
@keyframes rotate-square {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(90deg); }
}

/* =======================================================================
   MANUAL TOOLBAR (search + zoom + print)
   ======================================================================= */

.manual-toolbar {
  position: sticky;
  top: 60px;
  z-index: 30;
  display: flex; gap: var(--sp-3); align-items: stretch;
  padding: var(--sp-3) var(--sp-5);
  background: rgba(251, 250, 246, 0.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}

.manual-search {
  position: relative; flex: 1; min-width: 0;
  display: flex; align-items: center;
}
.manual-search-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--ink-3); pointer-events: none;
}
.manual-search-input {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 42px;
  padding: 0 38px 0 42px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  font-family: var(--sans);
  font-size: 14.5px;
  letter-spacing: -0.005em;
  outline: 0;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.manual-search-input::placeholder { color: var(--ink-3); }
.manual-search-input::-webkit-search-cancel-button { display: none; }
.manual-search-input::-webkit-search-decoration { display: none; }
.manual-search-input:focus {
  border-color: var(--orange);
  box-shadow: var(--focus-ring);
  background: var(--surface);
}
.manual-search:focus-within .manual-search-icon { color: var(--orange); }

.manual-search-clear {
  -webkit-appearance: none; appearance: none;
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px;
  border: 0; padding: 0; margin: 0;
  background: var(--surface-2);
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-size: 16px; line-height: 1;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  font-family: var(--sans);
  display: flex; align-items: center; justify-content: center;
}
.manual-search-clear:hover { background: var(--surface-press); color: var(--ink); }

/* Zoom */
.manual-zoom {
  display: inline-flex; align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  height: 42px;
  overflow: hidden;
}
.manual-zoom-btn,
.manual-zoom-reset {
  -webkit-appearance: none; appearance: none;
  background: transparent;
  color: var(--ink);
  border: 0; padding: 0; margin: 0;
  font-family: var(--sans); font-weight: 600;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .1s, color .1s;
}
.manual-zoom-btn {
  width: 40px; font-size: 13.5px; letter-spacing: -0.01em;
}
.manual-zoom-btn:hover { background: var(--orange-tint); color: var(--orange-deep); }
.manual-zoom-reset {
  min-width: 56px; padding: 0 8px;
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  font-size: 11.5px; letter-spacing: 0.02em;
  color: var(--ink-2);
}
.manual-zoom-reset:hover { background: var(--surface-2); color: var(--orange-deep); }

/* Article zoom — applied to .manual-main-stage as a transform */
.manual-main-stage {
  transform-origin: 0 0;
  transform: scale(var(--zoom, 1)) translate(var(--pan-x, 0px), var(--pan-y, 0px));
  width: 100%;
  will-change: transform;
}
.manual-main.is-zoomed {
  overflow: hidden;
  max-height: calc(100vh - 134px);
  cursor: grab;
  position: relative;
}
.manual-main.is-zoomed.is-grabbing { cursor: grabbing; user-select: none; }
.manual-main.is-zoomed * { cursor: inherit; }
.manual-main.is-zoomed a { cursor: pointer; }

/* Print button */
.manual-print {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 16px; height: 42px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  font-family: var(--sans); font-size: 13.5px; font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background .1s, border-color .1s, color .1s;
}
.manual-print:hover {
  background: var(--orange-tint);
  border-color: var(--orange);
  color: var(--orange-deep);
}
.manual-print:active { transform: translateY(1px); }
.manual-print svg { color: var(--orange); }

/* Search results panel */
.manual-search-results {
  position: absolute;
  top: 100%; left: 16px; right: 16px;
  margin-top: 6px;
  max-height: min(560px, calc(100vh - 140px));
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  z-index: 40;
  padding: var(--sp-1);
}
.manual-search-results[hidden] { display: none; }

.manual-search-empty,
.manual-search-status {
  padding: 14px 16px;
  font-family: var(--sans); font-size: 13.5px;
  color: var(--ink-3);
}
.manual-search-status::before {
  content: ""; display: inline-block;
  width: 12px; height: 12px;
  border: 1.5px solid var(--orange);
  border-top-color: transparent;
  border-radius: 50%;
  margin-right: 8px; vertical-align: -2px;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.manual-search-hit {
  display: block;
  padding: 10px 14px;
  font-family: var(--sans);
  text-decoration: none;
  color: var(--ink);
  border-radius: var(--r-sm);
  border-left: 3px solid transparent;
  margin: 2px 0;
  cursor: pointer;
  transition: background .08s, border-color .08s;
}
.manual-search-hit:hover,
.manual-search-hit.is-focus {
  background: var(--orange-tint);
  border-left-color: var(--orange);
  color: var(--ink);
}
.manual-search-hit-label {
  font-size: 14.5px; font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.3;
}
.manual-search-hit-crumbs {
  display: block;
  margin-top: 4px;
  font-size: 11.5px; font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0.005em;
}
.manual-search-hit-crumbs > .sep { color: var(--ink-disabled); margin: 0 5px; }
.manual-search-hit mark {
  background: rgba(234,88,12,0.18);
  color: var(--orange-deep);
  padding: 0 2px;
  border-radius: 2px;
}

/* Mobile toolbar */
@media (max-width: 860px) {
  .manual-toolbar { padding: var(--sp-3) 12px; gap: 8px; top: 52px; }
  .manual-search-input { font-size: 16px; }
  .manual-print { padding: 0 12px; }
  .manual-print-label { display: none; }
  .manual-zoom { display: none; }
  .manual-search-results {
    left: 8px; right: 8px;
    max-height: calc(100vh - 120px);
  }
}

/* =======================================================================
   PRINT
   ======================================================================= */
@media print {
  .hdr, .ftr,
  .manual-side, .manual-side-tabs, .manual-tree,
  .manual-toolbar, .manual-search-results,
  .manual-drawer-toggle, .manual-drawer-backdrop, .manual-drawer-close,
  body::before {
    display: none !important;
  }

  html, body, .main {
    background: #fff !important; color: #000 !important;
    margin: 0; padding: 0;
  }
  body { font-family: Georgia, "Times New Roman", serif; }

  .manual-shell { display: block !important; background: #fff !important; }
  .manual-main {
    background: #fff !important; color: #000 !important;
    border: 0 !important; padding: 0 !important; margin: 0 !important;
    font-size: 11pt; line-height: 1.5;
  }
  .manual-main, .manual-main * {
    color: #000 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .manual-main a {
    color: #000 !important;
    text-decoration: underline; text-underline-offset: 2px;
  }
  .manual-main h1, .manual-main h2, .manual-main h3, .manual-main h4 {
    page-break-after: avoid; break-after: avoid;
  }
  .manual-main table { page-break-inside: auto; break-inside: auto; border-collapse: collapse; }
  .manual-main thead { display: table-header-group; }
  .manual-main tr, .manual-main td, .manual-main th {
    page-break-inside: avoid; break-inside: avoid;
    border: 1px solid #888 !important;
  }
  .manual-main img, .manual-main figure {
    max-width: 100% !important; height: auto;
    page-break-inside: avoid; break-inside: avoid;
  }
  .manual-main p, .manual-main li { orphans: 3; widows: 3; }
  .manual-empty { display: none !important; }

  .manual-main { zoom: 1 !important; }
  .manual-main-stage {
    transform: none !important;
    width: auto !important;
  }

  @page { margin: 18mm 14mm; size: letter; }
}

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}