/* reader.css — Document reader (View page) layout chrome.
   Sits on top of portal.css and the skill themes. The skill themes
   own all in-document typography and tier accents inside .gov-page;
   this file owns the portal-side reader layout (breadcrumb, back link,
   prev/next, in-page TOC, doc meta strip).

   Layout:  [back+breadcrumb bar][meta strip][reader-grid: main + TOC][prev/next]
*/

.reader-toolbar {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px 28px 6px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 13px/1 "Inter", sans-serif;
  color: var(--ink-3);
  padding: 6px 10px 6px 6px;
  border-radius: 6px;
  text-decoration: none;
}
.back-link:hover { color: var(--ink); background: var(--paper-2); }
.back-link svg { transform: rotate(180deg); }

.breadcrumb {
  display: flex; align-items: baseline; gap: 6px;
  font: 500 13px/1 "Inter", sans-serif;
  color: var(--ink-3);
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--ink-3); text-decoration: none; padding: 3px 4px; border-radius: 3px; }
.breadcrumb a:hover { color: var(--ink); background: var(--paper-2); }
.breadcrumb .crumb-current { color: var(--ink); font-weight: 600; font-family: "JetBrains Mono", monospace; font-size: 12px; }
.breadcrumb .sep { color: var(--ink-4); font-size: 11px; }
.breadcrumb .crumb-tier.gold  { color: var(--gold); }
.breadcrumb .crumb-tier.green { color: var(--green); }
.breadcrumb .crumb-tier.teal  { color: var(--teal); }

.reader-actions {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
}

/* tier accent rule above the reader content */
.reader-rule {
  height: 4px;
  border-radius: 2px;
  max-width: var(--maxw);
  margin: 6px auto 0;
}
.reader-rule.gold  { background: var(--gold); }
.reader-rule.green { background: var(--green-bright); }
.reader-rule.teal  { background: var(--teal-bright); }

/* reader grid: tier-nav sidebar + main column (rendered doc) + sticky TOC sidebar.
   The reader sidebar is narrower than the landing-page sidebar (--sidebar-w: 320px)
   to leave the document column readable; gaps are tightened for the same reason. */
.reader-shell {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px 28px 96px;
  display: grid;
  grid-template-columns: 240px 1fr 220px;
  gap: 28px;
}
.reader-shell.no-toc { grid-template-columns: 240px 1fr; gap: 28px; }
/* drop the on-this-page TOC first when space gets tight — the tier nav stays */
@media (max-width: 1180px) {
  .reader-shell,
  .reader-shell.no-toc { grid-template-columns: 240px 1fr; }
  .reader-toc { display: none; }
}
@media (max-width: 980px) {
  .reader-shell,
  .reader-shell.no-toc { grid-template-columns: 1fr; gap: 14px; padding: 12px 20px 80px; }
  .reader-shell .sidebar { position: static !important; max-height: none !important; padding-right: 0; }
  .reader-toc { display: revert; position: static !important; max-height: none !important; }
  .reader-toc.collapsed .toc-list { display: none; }
}

/* Reader-mode sidebar: same tier-nav widget as the landing page, but the active
   tier is forced open (driven by the partial's `active` class) so the current
   doc's category list is always visible. Slightly tighter type to fit the column. */
.reader-shell .sidebar-reader { padding-right: 4px; }
.reader-shell .sidebar-reader .sb-children li.active {
  background: var(--paper-2);
  color: var(--ink);
  font-weight: 600;
}
.reader-shell .sidebar-reader .sb-children li > a {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Document content sits on a white "piece of paper" while the page surround
   keeps the warm --paper tone. The padding gives the rendered doc its own
   internal margin; box-shadow is the soft lift off the desk. Print neutralises
   these in reader-print.css so we don't waste page margin. */
.reader-main {
  min-width: 0;
  background: var(--white);
  border-radius: 4px;
  padding: 36px 44px;
  box-shadow: var(--shadow-2);
}
@media (max-width: 980px) {
  .reader-main { padding: 24px 22px; }
}

/* Inline SVG diagrams and images: clamp to the document column so an oversize
   graphic can't blow out the reader chrome (or the printed page margin).
   :where() drops this rule's specificity to 0-0-1 so skill-theme image rules
   (e.g. .wi-logo-strip img { height: 80px } at 0-2-0) keep winning — the
   header logos must stay at their pinned size; this fallback only applies to
   body content where nothing more specific competes. */
:where(.reader-main) svg,
:where(.reader-main) img { max-width: 100%; height: auto; }

/* the rendered doc article. Skill themes paint the inside; we just
   override the page-as-letter-size container so it fills the column. */
.reader-main .gov-page {
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

/* Baseline: any rendered body table gets horizontal scroll if its content
   exceeds the column. display:block lets overflow-x apply (default
   display:table ignores it); browsers preserve column alignment through
   anonymous table boxes. Header gold/green/teal fill, zebra striping, and
   border collapse are owned by the skill themes and unaffected. */
.reader-main table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* Wide-page primitive — tables flagged by WidePageWrapExtension (column-width
   heuristic) and images marked with {.wide-page} stay inside the reader column
   on screen; the baseline table rule above already gives them horizontal scroll
   when they exceed it. The "landscape page" treatment lives in reader-print.css
   (@page wide-landscape). An earlier on-screen break-out attempt overlapped the
   tier-nav sidebar because percentage margins inside a grid cell resolve to the
   cell's width, not the viewport — leaving the on-screen treatment minimal for
   now; can revisit with a proper page-like visual frame if needed. */
.reader-main img.wide-page {
  max-width: 100%;
  height: auto;
}

/* in-page TOC */
.reader-toc {
  position: sticky;
  top: 92px;
  align-self: start;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  font: 13px/1.4 "Inter", sans-serif;
  padding: 14px 12px;
  border-left: 1px solid var(--rule);
}
.reader-toc .toc-eyebrow {
  font: 600 10.5px/1 "Inter", sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.reader-toc .toc-eyebrow .toc-toggle {
  display: none;
  appearance: none;
  border: 0; background: transparent;
  font: 500 11px/1 "Inter", sans-serif;
  color: var(--ink-3);
}
@media (max-width: 980px) {
  .reader-toc { border-left: 0; border-top: 1px solid var(--rule); padding: 10px 0; }
  .reader-toc .toc-eyebrow .toc-toggle { display: inline-block; }
}
.reader-toc .toc-list {
  list-style: none;
  margin: 0; padding: 0;
}
.reader-toc .toc-list li {
  margin-bottom: 4px;
}
.reader-toc .toc-list a {
  display: block;
  padding: 5px 8px;
  border-left: 2px solid transparent;
  color: var(--ink-3);
  border-radius: 0 3px 3px 0;
  transition: background .12s, color .12s, border-color .12s;
  text-decoration: none;
}
.reader-toc .toc-list a:hover { background: var(--paper-2); color: var(--ink); }
.reader-toc .toc-list a.active { color: var(--ink); background: var(--paper-2); font-weight: 600; }
.reader-toc.gold  .toc-list a.active { border-left-color: var(--gold); }
.reader-toc.green .toc-list a.active { border-left-color: var(--green-bright); }
.reader-toc.teal  .toc-list a.active { border-left-color: var(--teal-bright); }
.reader-toc .toc-h2 { padding-left: 16px; font-size: 12.5px; }
.reader-toc .toc-h3 { padding-left: 26px; font-size: 12px; color: var(--ink-4); }
.reader-toc .toc-empty { color: var(--ink-4); font-size: 12.5px; font-style: italic; padding: 4px 8px; }

/* Document state badge (working/live) — for future state-toggle */
.doc-state-badge {
  font: 600 10.5px/1 "Inter", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 4px;
  border: 1px solid var(--rule);
  color: var(--ink-3);
  background: var(--paper-2);
}
.doc-state-badge.live    { color: var(--green); background: var(--green-bg); border-color: rgba(47,99,21,.25); }
.doc-state-badge.working { color: var(--gold); background: var(--gold-bg); border-color: rgba(184,135,14,.3); }

/* Consideration-stage pill (Policy/AP only) — the document's current stage in the adoption
   process: First/Second/Third Consideration, Out for Consultation, Final Review. Cleared on
   adoption, so it appears only while a policy/AP is actively under consideration. */
.consideration-pill {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font: 600 11px/1 "Inter", sans-serif;
  padding: 4px 10px; border-radius: 999px;
  color: #4b3f8f; background: rgba(75,63,143,.10); border: 1px solid rgba(75,63,143,.30);
}
.consideration-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #4b3f8f; flex: 0 0 auto; }

/* Cross-references and broken refs (skill output classes) */
.gov-page .ref-broken,
.reader-main .ref-broken {
  color: var(--vis-restricted);
  border-bottom: 1px dotted var(--vis-restricted);
}

/* ───────── Lifecycle pill (Status/Classification/Access spec §10.2) ─────────
   Sits inline next to the tier label inside _DocumentHeader.cshtml. The leading
   "·" comes from the markup so kerning is consistent regardless of which colour
   wins. Uses portal.css colour variables so the pill follows the brand. */
.lifecycle-pill {
  font-weight: 600;
  letter-spacing: 0.12em;
  margin-left: 4px;
}
.lifecycle-pill.lifecycle-draft       { color: var(--gold); }
.lifecycle-pill.lifecycle-published   { color: var(--green); }
.lifecycle-pill.lifecycle-unpublished { color: var(--ink-3); }
.lifecycle-pill.lifecycle-archived    { color: var(--ink); }

/* Draft banner — full-width red strip rendered above the reader toolbar (same
   position family as _ClassificationBanner) so the Draft state is the first
   thing the reader sees, before the title and logo. The Policy/AP consideration
   stage (e.g., "Out for Consultation") is appended as a clause inside this
   same banner rather than a separate line. */
.draft-banner {
  width: 100%;
  padding: 10px 28px;
  background: #B33A3A;
  color: #FFFFFF;
  font: 600 13.5px/1.45 "Inter", sans-serif;
  letter-spacing: 0.04em;
  text-align: center;
  box-shadow: 0 1px 0 rgba(0,0,0,0.15);
  page-break-inside: avoid;
}
.draft-banner strong {
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-right: 8px;
}
.draft-banner em {
  font-style: italic;
  color: rgba(255,255,255,0.92);
}

/* Draft-preview banner — a publisher viewing the working draft (?state=working). Gold (the
   "working" state colour) full-width strip with back/publish actions, replacing the red notice. */
.draft-banner.preview {
  background: var(--gold);
  color: #2A2208;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  flex-wrap: wrap; text-align: left; letter-spacing: 0;
}
.draft-banner.preview .dp-text { font-weight: 600; }
.draft-banner.preview strong { color: #2A2208; letter-spacing: .12em; }
.draft-banner.preview .dp-actions { display: inline-flex; gap: 8px; flex: 0 0 auto; }
.dp-btn {
  font: 600 12px/1 "Inter", sans-serif; padding: 8px 13px; border-radius: 7px; cursor: pointer;
  border: 1px solid transparent; text-decoration: none; display: inline-flex; align-items: center;
}
.dp-btn.ghost { background: rgba(255,255,255,.7); color: #4A3D12; border-color: rgba(0,0,0,.14); }
.dp-btn.ghost:hover { background: rgba(255,255,255,.95); }
.dp-btn.publish { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.dp-btn.publish:hover { filter: brightness(1.08); }
.dp-btn:disabled { opacity: .6; cursor: not-allowed; }

/* Pending-draft callout on the live view (publisher only) — a quieter in-column note linking
   to the draft preview. */
.draft-pending {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 20px; padding: 13px 16px;
  background: var(--gold-bg); border: 1px solid rgba(184,135,14,.3); border-radius: 11px;
}
.draft-pending .dp-msg { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.draft-pending .dp-msg strong { font: 600 13.5px/1.3 "Inter", sans-serif; color: var(--ink); }
.draft-pending .dp-msg span { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.draft-pending .dp-preview-btn {
  flex: 0 0 auto; font: 600 12.5px/1 "Inter", sans-serif; color: #fff; background: var(--indigo);
  border: 1px solid var(--indigo); border-radius: 8px; padding: 9px 14px; text-decoration: none;
}
.draft-pending .dp-preview-btn:hover { filter: brightness(1.08); }

/* Archived banner — lives between _DocumentHeader and the rendered body. Mid-grey
   block with white text per spec §10.3. Sits inside .reader-main so it inherits
   the column width but stretches edge-to-edge thanks to negative-margin trick:
   none needed — block-level full-width is fine in the reader column. */
.archived-banner {
  background: #5C5C5C;
  color: #FFFFFF;
  padding: 12px 16px;
  border-radius: 4px;
  margin: 0 0 18px 0;
  font: 13.5px/1.45 "Inter", sans-serif;
  page-break-inside: avoid;
  display: flex;
  align-items: center;
  gap: 14px;
}
.archived-banner .rb-text { flex: 1 1 auto; }
.rb-restore {
  flex: 0 0 auto;
  font: 600 12.5px/1 "Inter", sans-serif;
  color: #3A2E10; background: #fff; border: 1px solid rgba(255,255,255,.85);
  border-radius: 8px; padding: 8px 13px; cursor: pointer;
}
.rb-restore:hover { background: #F2EFE6; }
.rb-restore:disabled { opacity: .6; cursor: not-allowed; }
.archived-banner strong {
  font-weight: 700;
  letter-spacing: 0.16em;
  margin-right: 6px;
}
.archived-banner code {
  background: rgba(255,255,255,0.12);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 12.5px;
}
.archived-banner a.gov-xref {
  color: #FFFFFF;
  border-bottom-color: rgba(255,255,255,0.55);
}
.archived-banner a.gov-xref:hover {
  background: rgba(255,255,255,0.12);
  border-bottom-color: #FFFFFF;
}

/* -- External cross-references (class: link stubs, May 26 spec) ----
   Reuses a.gov-xref styling; the ↗ affordance is a presentational glyph (not a
   text node, so it never lands in copied text or the URL). The leading NBSP keeps
   the glyph attached to the last word rather than orphaned on its own line. */
a.gov-xref-external::after {
  content: "\00A0\2197";
  font-size: 0.85em;
}