/* =============================================================
   Sivva Manuals — manual.css
   Shared stylesheet for Engineer / Admin / Tenant / Support / API HTML manuals.
   Phase 2.1 deliverable: scaffolding only — no section content yet.

   Discipline:
   - CSS variables for every colour, spacing, size. No hardcoded hex.
   - No external CSS frameworks (no Tailwind, no Bootstrap).
   - Vanilla CSS. No preprocessor. Works opened as a file:// URL.
   - The two-piece pattern (.basic + <details class="advanced">) is the
     core unit of all human-facing Sivva manuals. See MANUALS-MASTER-PLAN.md §8.
   - WCAG AA target: focus rings preserved, semantic colour pairings,
     keyboard navigation, print stylesheet that forces all <details> open.
   ============================================================= */

/* ----------------------------------------------------------------
   1. Tokens
   ---------------------------------------------------------------- */

:root {
  /* Sivva brand palette — keep in sync with the live app CSS variables.
     If the app's variables shift, update here so the manuals stay on brand. */
  --sivva-bg:              #ffffff;
  --sivva-bg-rail:         #f5f7fa;
  --sivva-bg-advanced:     #f9fafb;
  --sivva-bg-code:         #f3f4f6;
  --sivva-bg-callout:      #fff9e6;

  --sivva-text:            #1f2937;
  --sivva-text-muted:      #6b7280;
  --sivva-text-inverse:    #ffffff;

  --sivva-border:          #e5e7eb;
  --sivva-border-strong:   #d1d5db;

  --sivva-accent:          #2563eb;   /* primary action / link */
  --sivva-accent-hover:    #1d4ed8;
  --sivva-accent-soft:     #dbeafe;

  --sivva-warn:            #b45309;
  --sivva-warn-bg:         #fef3c7;

  --sivva-todo:            #7c2d12;
  --sivva-todo-bg:         #fee2e2;

  /* Typography */
  --sivva-font-body:       -apple-system, BlinkMacSystemFont, "Segoe UI",
                           Roboto, "Helvetica Neue", Arial, sans-serif;
  --sivva-font-mono:       ui-monospace, SFMono-Regular, "SF Mono", Menlo,
                           Consolas, "Liberation Mono", monospace;

  --sivva-fs-base:         16px;
  --sivva-lh-base:         1.55;
  --sivva-fs-h1:           1.875rem;   /* ~30px */
  --sivva-fs-h2:           1.5rem;     /* ~24px */
  --sivva-fs-h3:           1.125rem;   /* ~18px */
  --sivva-fs-small:        0.875rem;
  --sivva-fs-code:         0.92rem;

  /* Layout */
  --sivva-rail-width:      280px;
  --sivva-content-max:     820px;
  --sivva-gap-sm:          0.5rem;
  --sivva-gap-md:          1rem;
  --sivva-gap-lg:          2rem;
  --sivva-radius:          6px;

  /* Focus ring (WCAG visible focus) */
  --sivva-focus:           0 0 0 3px var(--sivva-accent-soft);
}

/* ----------------------------------------------------------------
   2. Base reset (light, intentional — not a full normalize.css)
   ---------------------------------------------------------------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sivva-font-body);
  font-size: var(--sivva-fs-base);
  line-height: var(--sivva-lh-base);
  color: var(--sivva-text);
  background: var(--sivva-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 var(--sivva-gap-md) 0;
}

h1 { font-size: var(--sivva-fs-h1); }
h2 { font-size: var(--sivva-fs-h2); margin-top: 0; }
h3 { font-size: var(--sivva-fs-h3); margin-top: var(--sivva-gap-lg); }

p { margin: 0 0 var(--sivva-gap-md) 0; }

a {
  color: var(--sivva-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover { color: var(--sivva-accent-hover); }
a:focus-visible {
  outline: none;
  box-shadow: var(--sivva-focus);
  border-radius: 2px;
}

code, pre, kbd, samp {
  font-family: var(--sivva-font-mono);
  font-size: var(--sivva-fs-code);
}

code {
  background: var(--sivva-bg-code);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}

pre {
  background: var(--sivva-bg-code);
  padding: var(--sivva-gap-md);
  border-radius: var(--sivva-radius);
  overflow-x: auto;
  line-height: 1.45;
}

pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
}

hr {
  border: 0;
  border-top: 1px solid var(--sivva-border);
  margin: var(--sivva-gap-lg) 0;
}

/* ----------------------------------------------------------------
   3. App shell (left rail + content)
   ---------------------------------------------------------------- */

.manual {
  display: grid;
  grid-template-columns: var(--sivva-rail-width) 1fr;
  min-height: 100vh;
}

.manual__rail {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  background: var(--sivva-bg-rail);
  border-right: 1px solid var(--sivva-border);
  padding: var(--sivva-gap-lg) var(--sivva-gap-md);
}

.manual__rail-header {
  margin-bottom: var(--sivva-gap-lg);
}

.manual__rail-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: 0.01em;
}

.manual__rail-subtitle {
  font-size: var(--sivva-fs-small);
  color: var(--sivva-text-muted);
  margin: 0.25rem 0 0 0;
}

.manual__nav {
  font-size: var(--sivva-fs-small);
}

.manual__nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.manual__nav-list li { margin: 0; }

.manual__nav-list a {
  display: block;
  padding: 0.4rem 0.6rem;
  color: var(--sivva-text);
  text-decoration: none;
  border-radius: 4px;
  line-height: 1.3;
}

.manual__nav-list a:hover,
.manual__nav-list a:focus-visible {
  background: var(--sivva-accent-soft);
  color: var(--sivva-accent-hover);
  outline: none;
}

.manual__nav-list a.is-active {
  background: var(--sivva-accent);
  color: var(--sivva-text-inverse);
  font-weight: 600;
}

.manual__nav-number {
  display: inline-block;
  width: 1.5rem;
  color: var(--sivva-text-muted);
}
.manual__nav-list a.is-active .manual__nav-number {
  color: var(--sivva-text-inverse);
}

.manual__content {
  padding: var(--sivva-gap-lg) calc(var(--sivva-gap-lg) * 1.5);
  max-width: calc(var(--sivva-content-max) + var(--sivva-gap-lg) * 3);
}

.manual__intro {
  border-bottom: 1px solid var(--sivva-border);
  padding-bottom: var(--sivva-gap-lg);
  margin-bottom: var(--sivva-gap-lg);
}

.manual__intro p { color: var(--sivva-text-muted); }

/* ----------------------------------------------------------------
   4. Mobile rail toggle (single inline JS handler in index.html)
   ---------------------------------------------------------------- */

.manual__rail-toggle {
  display: none;
  position: fixed;
  top: var(--sivva-gap-md);
  left: var(--sivva-gap-md);
  z-index: 10;
  background: var(--sivva-bg);
  border: 1px solid var(--sivva-border-strong);
  border-radius: var(--sivva-radius);
  padding: 0.5rem 0.75rem;
  font-family: var(--sivva-font-body);
  font-size: var(--sivva-fs-small);
  cursor: pointer;
}

.manual__rail-toggle:focus-visible {
  outline: none;
  box-shadow: var(--sivva-focus);
}

/* ----------------------------------------------------------------
   5. Section: the two-piece pattern (basic + advanced)
   See MANUALS-MASTER-PLAN.md §8 and STYLE-GUIDE.md "Two-piece pattern".
   ---------------------------------------------------------------- */

.manual-section {
  scroll-margin-top: var(--sivva-gap-md);
  padding: var(--sivva-gap-lg) 0;
  border-bottom: 1px solid var(--sivva-border);
}

.manual-section:last-of-type { border-bottom: none; }

.manual-section__meta {
  font-size: var(--sivva-fs-small);
  color: var(--sivva-text-muted);
  margin: 0 0 var(--sivva-gap-md) 0;
}

.basic {
  /* Plain-English block, ~1-3 paragraphs. Always visible. */
  font-size: 1rem;
}

details.advanced {
  margin-top: var(--sivva-gap-md);
  border: 1px solid var(--sivva-border);
  border-radius: var(--sivva-radius);
  background: var(--sivva-bg-advanced);
  padding: 0;
}

details.advanced > summary {
  cursor: pointer;
  padding: 0.6rem 0.9rem;
  font-weight: 600;
  font-size: var(--sivva-fs-small);
  color: var(--sivva-accent);
  list-style: none;
  user-select: none;
  border-radius: var(--sivva-radius);
}

details.advanced > summary::-webkit-details-marker { display: none; }

details.advanced > summary::before {
  content: "▸ ";
  display: inline-block;
  width: 1rem;
  color: var(--sivva-accent);
}

details.advanced[open] > summary::before { content: "▾ "; }

details.advanced > summary:hover { color: var(--sivva-accent-hover); }

details.advanced > summary:focus-visible {
  outline: none;
  box-shadow: var(--sivva-focus);
}

.advanced-body {
  padding: 0 0.9rem 0.9rem 0.9rem;
  border-top: 1px solid var(--sivva-border);
  padding-top: var(--sivva-gap-md);
}

.advanced-body :first-child { margin-top: 0; }
.advanced-body :last-child  { margin-bottom: 0; }

/* ----------------------------------------------------------------
   6. Callouts (warnings, TODOs, info)
   ---------------------------------------------------------------- */

.callout {
  border-left: 4px solid var(--sivva-border-strong);
  background: var(--sivva-bg-callout);
  padding: var(--sivva-gap-md);
  border-radius: 0 var(--sivva-radius) var(--sivva-radius) 0;
  margin: var(--sivva-gap-md) 0;
}

.callout--warn  { border-left-color: var(--sivva-warn);  background: var(--sivva-warn-bg); }
.callout--todo  { border-left-color: var(--sivva-todo);  background: var(--sivva-todo-bg); }

.callout p:last-child { margin-bottom: 0; }

.callout__label {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  margin-right: 0.5rem;
}
.callout--warn .callout__label { color: var(--sivva-warn); }
.callout--todo .callout__label { color: var(--sivva-todo); }

/* ----------------------------------------------------------------
   7. Tables
   ---------------------------------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sivva-gap-md) 0;
  font-size: 0.95rem;
}

th, td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--sivva-border);
  vertical-align: top;
}

th {
  background: var(--sivva-bg-rail);
  font-weight: 600;
}

/* ----------------------------------------------------------------
   7b. ERD figures (Phase 2.3) — additive; constrains SVG width
       so the master 1862×6956pt diagram does not overflow the
       content area, and gives the per-area subgraph list a
       lightweight bullet-style.
   ---------------------------------------------------------------- */

figure.erd {
  margin: 1rem 0 1.25rem;
  padding: 0.5rem;
  border: 1px solid var(--sivva-border);
  border-radius: 6px;
  background: var(--sivva-bg-rail);
  text-align: center;
}

figure.erd img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

figure.erd figcaption {
  margin-top: 0.5rem;
  font-size: 0.88rem;
  color: var(--sivva-text-muted);
  text-align: left;
}

ul.erd-subgraphs {
  list-style: square;
  padding-left: 1.5rem;
  margin: 0.5rem 0 1rem;
}

ul.erd-subgraphs li {
  margin: 0.35rem 0;
  line-height: 1.45;
}

/* ----------------------------------------------------------------
   7c. Screenshot figures (Phase 2.6) — additive; matches figure.erd
       pattern. Used for every <figure class="screenshot"> embedded
       under a section's `.advanced-body` (after "Mechanics" prose,
       before "Cross-references"). Captures land at
       assets/screenshots/sec-NN-short-slug.png per the flat naming
       convention adopted for the Engineer manual in Phase 2.6.
       Tenant manual may reconsider folder-based naming when its
       step-sequence captures arrive in Phase 5.6.
   ---------------------------------------------------------------- */

figure.screenshot {
  margin: 1.5rem 0;
  padding: 0.75rem;
  border: 1px solid var(--sivva-border);
  border-radius: 0.5rem;
  background: var(--sivva-bg-rail);
  text-align: center;
}

figure.screenshot img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  box-shadow: 0 1px 3px rgba(11, 31, 58, 0.12);
  border-radius: 0.25rem;
}

figure.screenshot figcaption {
  margin-top: 0.5rem;
  font-size: var(--sivva-fs-small);
  color: var(--sivva-text-muted);
  text-align: left;
}

/* ----------------------------------------------------------------
   8. Mobile (≤900px) — rail collapses behind a toggle
   ---------------------------------------------------------------- */

@media (max-width: 900px) {
  .manual {
    grid-template-columns: 1fr;
  }

  .manual__rail-toggle { display: inline-block; }

  .manual__rail {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(85vw, 320px);
    height: 100vh;
    z-index: 9;
    transform: translateX(-100%);
    transition: transform 160ms ease-out;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.08);
  }

  .manual.is-rail-open .manual__rail { transform: translateX(0); }

  .manual__content {
    padding: calc(var(--sivva-gap-lg) * 2) var(--sivva-gap-md) var(--sivva-gap-lg);
  }
}

/* ----------------------------------------------------------------
   9. Print stylesheet — force every <details> open, hide rail
   ---------------------------------------------------------------- */

@media print {
  .manual { grid-template-columns: 1fr; }
  .manual__rail,
  .manual__rail-toggle { display: none; }
  .manual__content { padding: 0; max-width: none; }

  details.advanced { border: none; background: transparent; padding: 0; }
  details.advanced > summary { display: none; }
  details.advanced[open] .advanced-body,
  details.advanced .advanced-body {
    display: block;
    border-top: none;
    padding: 0;
  }
  details.advanced > .advanced-body { padding: 0; }
  /* Force every <details> open at print time */
  details.advanced:not([open]) > .advanced-body { display: block; }

  .manual-section { page-break-inside: avoid; }
  a { color: var(--sivva-text); text-decoration: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: var(--sivva-text-muted); }
}

/* ----------------------------------------------------------------
   10. Reduced motion
   ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .manual__rail { transition: none; }
}

/* ----------------------------------------------------------------
   11. Search box + results (Phase 2.7) — additive; client-side
       MiniSearch index built at page load from the DOM (no build
       step, no prebuilt JSON). Sits in the nav rail above the
       section list. All colours pulled from existing tokens so
       no new variables are introduced. Print stylesheet (section
       9) already hides .manual__rail so the search box and its
       results inherit that rule and disappear at print time;
       no additional print rule needed.
   ---------------------------------------------------------------- */

.manual__search {
  margin-bottom: var(--sivva-gap-md);
}

.manual__search input[type="search"] {
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--sivva-border-strong);
  border-radius: var(--sivva-radius);
  background: var(--sivva-bg);
  font-family: var(--sivva-font-body);
  font-size: var(--sivva-fs-small);
  color: var(--sivva-text);
  box-sizing: border-box;
}

.manual__search input[type="search"]:focus-visible {
  outline: none;
  box-shadow: var(--sivva-focus);
  border-color: var(--sivva-accent);
}

.manual__search-results {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  border: 1px solid var(--sivva-border);
  border-radius: var(--sivva-radius);
  background: var(--sivva-bg);
  max-height: 50vh;
  overflow-y: auto;
}

.manual__search-results li {
  border-bottom: 1px solid var(--sivva-border);
}

.manual__search-results li:last-child {
  border-bottom: none;
}

.manual__search-results a {
  display: block;
  padding: 0.5rem 0.6rem;
  text-decoration: none;
  color: var(--sivva-text);
  font-size: var(--sivva-fs-small);
  line-height: 1.35;
}

.manual__search-results a:hover,
.manual__search-results a:focus-visible,
.manual__search-results a.is-highlighted {
  background: var(--sivva-accent-soft);
  color: var(--sivva-text);
  outline: none;
}

.manual__search-results strong {
  display: block;
  font-weight: 600;
}

.manual__search-preview {
  display: block;
  font-size: 0.8rem;
  color: var(--sivva-text-muted);
  margin-top: 0.15rem;
}

.manual__search-empty {
  padding: 0.5rem 0.6rem;
  font-size: var(--sivva-fs-small);
  color: var(--sivva-text-muted);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================================
   Phase 5 — Tenant manual role gating (append-only)
   -------------------------------------------------------------------------
   The Tenant manual sets body[data-active-role] from a <select> in the rail.
   Sections (and rail nav items) are tagged data-roles="owner admin …" with
   one or more of the four role values; rules below hide the ones that do
   not include the active role. The "all" value resets to show every
   section. Other manuals do not set data-active-role on body, so these
   rules are inert there.
   ========================================================================= */
body[data-active-role="owner"] section.manual-section:not([data-roles~="owner"]),
body[data-active-role="owner"] .manual__nav-list li[data-roles]:not([data-roles~="owner"]) {
  display: none;
}
body[data-active-role="admin"] section.manual-section:not([data-roles~="admin"]),
body[data-active-role="admin"] .manual__nav-list li[data-roles]:not([data-roles~="admin"]) {
  display: none;
}
body[data-active-role="operative"] section.manual-section:not([data-roles~="operative"]),
body[data-active-role="operative"] .manual__nav-list li[data-roles]:not([data-roles~="operative"]) {
  display: none;
}
body[data-active-role="mobile"] section.manual-section:not([data-roles~="mobile"]),
body[data-active-role="mobile"] .manual__nav-list li[data-roles]:not([data-roles~="mobile"]) {
  display: none;
}
body[data-active-role="all"] section.manual-section,
body[data-active-role="all"] .manual__nav-list li[data-roles] {
  display: block;
}

/* Role picker affordance (lives in the rail, below the search input) */
.manual__role-picker {
  margin: 0.75rem 0 0.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.manual__role-label {
  font-size: var(--sivva-fs-small);
  color: var(--sivva-text-muted);
  font-weight: 500;
}
.manual__role-select {
  font: inherit;
  font-size: var(--sivva-fs-small);
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--sivva-border);
  border-radius: 4px;
  background: var(--sivva-bg);
  color: var(--sivva-text);
  cursor: pointer;
}
.manual__role-select:focus-visible {
  outline: 2px solid var(--sivva-accent);
  outline-offset: 1px;
}