/* Literature section — full page shell + chrome, all in one file.
   Unlike h305 (which layers parts_manual/pm_shell.css on top of a pre-existing
   sitewide gallery_shell.css), CR has no equivalent general shell yet, so this
   file covers both: base layout/typography AND the manual-reader chrome
   (nav, page frame, TOC list, gateway cards). Brand tokens (colors, clamp,
   font stack) are pulled from CR's existing CitReg/css/citreg.css, read
   2026-08-07, for visual consistency with the rest of the site — nothing
   about the LimeSurvey/Twig rendering pipeline itself is reused, only the
   visual language (see CLAUDE.md PM handoff notes for why). */

:root{
  --lit-clamp: 1130px;
  --lit-reader-width: 920px;
  --lit-text: #222;
  --lit-muted: #5a6772;
  --lit-muted-pale: #949ca3; /* --lit-muted lightened ~35% toward white - borrowed/pooled excerpt text, finalized 2026-08-08 (picked from V7's pale-35 comparison, contrast ~2.64:1 vs box bg) */
  --lit-border: #d0d5db;
  --lit-dark: #152536;
  --lit-brand: #0d6efd;
  --lit-bg-soft: #f9f9f9;
  --lit-page-bg: #eceef1;
}

*{ box-sizing: border-box; }

body.lit-page{
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--lit-text);
  line-height: 1.45;
  background: var(--lit-page-bg);
}

/* --- The one bounded frame: header, content, and footer all live inside
   this single element, so every internal divider/border is scoped to the
   same width as the content instead of bleeding to the viewport edge.
   Below --lit-clamp (effectively all mobile/tablet and most laptop screens)
   the frame just fills the viewport - fluid, single-column, no surprises.
   Above it, the frame stops growing and centers, and the excess viewport
   width becomes calm neutral margin (--lit-page-bg) rather than dead white
   space or infinitely-stretched chrome. One variable (--lit-clamp) governs
   the whole page at every breakpoint. */
.lit-page-frame-outer{
  max-width: var(--lit-clamp);
  margin: 0 auto;
  background: #fff;
  min-height: 100vh;
  box-shadow: 0 0 24px rgba(0,0,0,.05);
}

.lit-shell{
  padding: 0 20px;
}

img{ max-width: 100%; height: auto; }

/* --- Header --- */
.lit-site-header{ border-bottom: 3px solid var(--lit-dark); }
.lit-header-row{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  flex-wrap: wrap;
}
.lit-header-brand{ display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--lit-dark); }
.lit-header-logo{ height: 40px; width: auto; }
.lit-header-sitename{ font-weight: 700; font-size: 18px; }
.lit-header-title-row{ flex: 1 1 auto; text-align: center; min-width: 200px; }
.lit-header-title-text{ font-weight: 600; color: var(--lit-muted); font-size: 15px; }
.lit-header-nav{ display: flex; gap: 14px; font-size: 14px; }
.lit-header-nav a{ color: var(--lit-brand); text-decoration: none; }
.lit-header-nav a:hover{ text-decoration: underline; }

/* --- Footer --- */
.lit-site-footer{ border-top: 1px solid var(--lit-border); margin-top: 32px; }
.lit-footer-ad{ padding: 16px 20px 0; text-align: center; }
.lit-footer-row{
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 14px 20px; flex-wrap: wrap;
  font-size: 13px; color: var(--lit-muted);
}
.lit-footer-row a{ color: var(--lit-muted); text-decoration: none; }
/* Copyright line matches the homepage footer exactly (same content, size,
   weight) - user call 2026-08-10, overrides the row's own 13px/--lit-muted. */
.lit-footer-copy{ font-size: .72rem; color: rgba(0,0,0,.6); }
.lit-footer-row a:hover{ text-decoration: underline; }
.lit-footer-links a{ margin-left: 0; }

/* --- Layout: main + sidebar --- */
.lit-layout{
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 28px;
}
@media (max-width: 860px){
  .lit-layout{ grid-template-columns: 1fr; }
}
.lit-sidebar-widget{
  border: 1px solid var(--lit-border);
  border-radius: 6px;
  background: var(--lit-bg-soft);
  padding: 12px;
  min-height: 60px;
  margin-bottom: 16px;
}
.lit-sidebar-widget:last-child{ margin-bottom: 0; }

.lit-sidebar-gateway{
  text-align: center;
  text-decoration: none;
  color: inherit;
  display: block;
}
.lit-sidebar-gateway img{
  max-width: 120px;
  margin: 4px auto 10px;
  display: block;
}
.lit-sidebar-gateway-title{
  font-weight: 700;
  color: var(--lit-dark);
  font-size: 15px;
  margin-bottom: 4px;
}
.lit-sidebar-gateway-tagline{
  font-size: 12.5px;
  color: var(--lit-muted);
  line-height: 1.4;
  margin-bottom: 10px;
}
.lit-sidebar-gateway-btn{
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--lit-brand);
  padding: 6px 14px;
  border-radius: 4px;
}
.lit-sidebar-gateway:hover .lit-sidebar-gateway-btn{ background: #0b5ed7; }

/* --- Reader page frame --- */
.lit-page-frame{ max-width: var(--lit-reader-width); margin: 0 auto; }

.lit-page-image-wrap{
  border: 1px solid var(--lit-border);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  text-align: center;
}
.lit-page-image-wrap img{ display: block; width: 100%; height: auto; margin: 0 auto; }

.lit-page-blurb{ font-size: .85rem; color: var(--lit-muted); margin: .6rem 0 0; }

/* --- OCR excerpt subsection (test build, 2026-08-08) --- */
.lit-ocr-excerpt{
  margin: .75rem 0 0;
  padding: .75rem .9rem;
  background: var(--lit-bg-soft);
  border: 1px solid var(--lit-border);
  border-radius: 6px;
  font-size: .88rem;
  line-height: 1.55;
}
.lit-ocr-excerpt-label{
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--lit-muted);
  font-weight: 700;
  margin-bottom: .4rem;
}
.lit-ocr-excerpt p{ margin: 0; }

/* --- V2 refinements (2026-08-08): shared box treatment for blurb + excerpt,
   kept as new classes so the V1 test rendition above stays pixel-identical --- */
.lit-boxed{
  padding: .75rem .9rem;
  background: var(--lit-bg-soft);
  border: 1px solid var(--lit-border);
  border-radius: 6px;
}
.lit-ocr-excerpt-v2{ margin: .75rem 0 0; font-size: .88rem; line-height: 1.55; }
.lit-ocr-excerpt-v2 .lit-ocr-excerpt-label{
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--lit-muted);
  font-weight: 700;
  margin-bottom: .4rem;
}
.lit-ocr-excerpt-v2 .lit-ocr-excerpt-source{ font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .75; }
.lit-ocr-excerpt-v2 p{ margin: 0; color: var(--lit-text); }
.lit-ocr-excerpt-v2.is-borrowed p{ color: var(--lit-muted-pale); }

/* --- Page 1 title-page detail cell (2026-08-09): right-justified body text,
   extra breathing room below the heading - scoped so it doesn't affect the
   REPRESENTATIVE EXCERPT boxes on every other page. --- */
.lit-titlepage-detail p{ text-align: right; }
.lit-titlepage-detail .lit-ocr-excerpt-label{ margin-bottom: .9rem; }
.lit-titlepage-detail p.lit-titlepage-line-split{
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; text-align: left; flex-wrap: wrap;
}

/* --- V5 (2026-08-08): full-saturation blurb text. Scoped to the compound
   selector below (blurb + boxed only co-occur in test builds) so live pages,
   which only ever carry the bare .lit-page-blurb class, are unaffected. --- */
.lit-page-blurb.lit-boxed{ color: var(--lit-text); }

/* --- V6 (2026-08-08): blurb heading experiment, pp1-5 only - wrapper box
   reuses .lit-boxed for the border/bg, .lit-ocr-excerpt-label for the
   heading style (same visual treatment, generic enough to share). --- */
.lit-blurb-box{ margin: .6rem 0 0; }
.lit-blurb-box .lit-page-blurb{ color: var(--lit-text); margin: 0; }

/* --- Section Overview imprint link (2026-08-09): pinned top-right inside
   the box, undecorated, links to the manual index - replaces the old
   "<- Index" nav button, whose role this now serves. --- */
.lit-blurb-box{ position: relative; padding-right: 14rem; }
.lit-toc-imprint-link{
  position: absolute; top: .7rem; right: .9rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .01em;
  color: var(--lit-muted); text-decoration: none; text-align: right;
}
.lit-toc-imprint-link:hover{ color: var(--lit-brand); }
@media (max-width: 640px){
  .lit-blurb-box{ padding-right: .9rem; }
  .lit-toc-imprint-link{ position: static; display: block; text-align: right; margin-bottom: .4rem; }
}

/* --- Parts-Catalogs-only "back to gateway" link (2026-08-12): pinned
   bottom-right inside the same reserved right-side gutter the imprint link
   already uses (padding-right: 14rem above), so it never grows the box -
   parts-manual pages only ($litManualType === 'parts', set in the shared
   PAGE_TEMPLATE); other manual types get their own equivalent link later,
   not this one. */
.lit-toc-gateway-link{
  position: absolute; bottom: .7rem; right: .9rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .01em;
  color: var(--lit-brand); text-decoration: none; white-space: nowrap;
}
.lit-toc-gateway-link:hover{ text-decoration: underline; }
@media (max-width: 640px){
  .lit-toc-gateway-link{ position: static; display: block; text-align: right; margin-top: .4rem; }
}

/* --- V7 (2026-08-08): 3 progressively paler borrowed-text candidates for
   comparison. Contrast vs. --lit-bg-soft (#f9f9f9): 15%=3.94:1, 25%=3.21:1
   (borderline), 35%=2.64:1 (below the usual 3:1 legibility floor - flagged,
   not hidden). Three classes so specificity beats the base .is-borrowed
   rule regardless of source order. */
.lit-ocr-excerpt-v2.is-borrowed.pale-15 p{ color: #737e87; }
.lit-ocr-excerpt-v2.is-borrowed.pale-25 p{ color: #838d95; }
.lit-ocr-excerpt-v2.is-borrowed.pale-35 p{ color: #949ca3; }

/* --- Catalog nav (top/bottom) --- V5 (2026-08-09): single row, identical
   top and bottom - "Choose a section" select left, prev/indicator/next
   cluster right. Replaces the old asymmetric top(prev/next-only)/bottom
   (Index-link+select row, then a second prev/next row) split. --- */
.lit-catalog-nav{
  margin: .75rem 0;
  padding: .6rem .75rem;
  background: var(--lit-bg-soft);
  border: 1px solid var(--lit-border);
  border-radius: 6px;
  font-size: .9rem;
}
.lit-nav-row-flip{
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
}
.lit-nav-cluster-flip{ display: flex; align-items: center; gap: .75rem; }
.lit-nav-btn{
  display: inline-block; padding: .3rem .6rem;
  border: 1px solid var(--lit-border); border-radius: 4px;
  background: #fff; color: var(--lit-brand); text-decoration: none;
  font-size: .85rem; white-space: nowrap;
}
.lit-nav-btn:hover{ background: #eef3f8; }
.lit-nav-disabled{ color: #aaa; border-color: var(--lit-border); cursor: default; }
.lit-nav-page-indicator{ font-weight: 700; white-space: nowrap; }
.lit-nav-toc-select{
  font-size: .85rem; padding: .25rem .4rem; width: 260px; max-width: 100%;
  border: 1px solid var(--lit-border); border-radius: 4px;
}
@media (max-width: 640px){
  .lit-nav-row-flip{ flex-direction: column; align-items: stretch; }
}

/* --- Gateway (/lit/ and /lit/manuals/) --- */
.lit-gateway-list{ display: flex; flex-direction: column; gap: .75rem; margin: 1.5rem 0; }
.lit-gateway-card{
  display: block; padding: 1rem; border: 1px solid var(--lit-border);
  border-radius: 8px; background: #fff; text-decoration: none; color: inherit;
}
.lit-gateway-card:hover{ border-color: var(--lit-brand); }
.lit-gateway-card-title{ font-weight: 700; color: var(--lit-dark); margin-bottom: .25rem; }
.lit-gateway-card-meta{ font-size: .85rem; color: var(--lit-muted); }
.lit-gateway-card.is-disabled{ opacity: .55; cursor: default; pointer-events: none; }

/* --- Manual index/TOC page ---
   Icon-grid TOC design (2026-08-11 retrofit, ported from h305's PM section -
   PM_Section_Handoff.md §13a), replacing the original plain-text
   `.lit-toc-list` markup across all three manuals (814/844/604). One auto-
   cropped section icon per TOC entry (build_manual.py's content_bbox_crop/
   generate_toc_icons). Column count/icon size match h305's own validated
   defaults (3 columns, 70px icons); title font-size (1rem) was picked from a
   3-way local comparison (.95/1/1.05rem) against the CB77-derived .9rem
   starting point - user call, 2026-08-11. */
.lit-toc-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .85rem;
  margin: 1rem 0;
}

@media (max-width: 640px){
  .lit-toc-grid{ grid-template-columns: 1fr; }
}

.lit-toc-card{
  display: flex;
  align-items: center;
  gap: .65rem;
  border: 1px solid var(--lit-border);
  border-radius: 6px;
  padding: .5rem;
  text-decoration: none;
  color: inherit;
  background: #fff;
}

.lit-toc-card:hover{ border-color: var(--lit-brand); }

.lit-toc-card-icon{
  flex: 0 0 auto;
  width: 70px;
  height: 70px;
  object-fit: contain;
  background: var(--lit-bg-soft);
  border: 1px solid var(--lit-border);
  border-radius: 4px;
}

.lit-toc-card-text{ flex: 1 1 auto; min-width: 0; }

.lit-toc-card-title{
  display: block;
  color: var(--lit-brand);
  font-weight: 600;
  line-height: 1.25;
  font-size: 1rem; /* Variant 2 of the 3-way local comparison, user pick 2026-08-11 */
}

.lit-toc-card-page{ color: var(--lit-muted); font-size: .78rem; }