/* archive.css
   Shared stylesheet for all libraryroot tools, structured "Option B":
   one shared design-system core (unprefixed -- the contract every tool
   can rely on), then one section per project, each prefixed with that
   project's name so two projects can never collide on a bare class name
   again. Sections in this file:
     SHARED   -- design tokens, base typography, chrome every tool uses
     SESSIONS -- sessions/sessions_browse.php, sessions/sessions_edit.php
     CODE     -- placeholder; 1931 Code pages not migrated yet
     DOA      -- Disposition of Acts tools' original rules, unprefixed,
                 unchanged by this restructuring (still the tools' own
                 selector names -- migrating them to a doa- prefix is a
                 separate future pass, same as CODE)
*/

/* ===== SHARED: design system (all libraryroot tools) ===== */

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

:root {
  --ink:       #1a1a18;
  --parchment: #f5f1e8;
  --rule:      #c8bfa8;
  --accent:    #8b1a1a;
  --muted:     #6b6355;
  --highlight: #f0e8d0;
  --flag:      #c0392b;
  --approved:  #2e7d32;
  --review:    #b8860b;
  --mono:      'Source Sans 3', sans-serif;
  --serif:     'Libre Baskerville', Georgia, serif;
}

html { font-size: 16px; }
body { background: var(--parchment); color: var(--ink); font-family: var(--mono); min-height: 100vh; }

/* Header */
.site-header {
  border-bottom: 3px double var(--rule);
  padding: 2rem 2.5rem 1.5rem;
  background: var(--parchment);
  position: sticky; top: 0; z-index: 100;
}
.header-eyebrow  { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.35rem; }
.header-title    { font-family: var(--serif); font-size: 1.6rem; font-weight: 700; color: var(--accent); line-height: 1.15; }
.header-subtitle { font-size: 0.78rem; color: var(--muted); margin-top: 0.25rem; font-style: italic; font-family: var(--serif); }
.header-controls { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; flex-wrap: wrap; }

/* View toggle */
.view-toggle { display: flex; border: 1px solid var(--rule); overflow: hidden; }
.view-toggle a {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 0.35rem 0.75rem;
  text-decoration: none; color: var(--muted);
  border-right: 1px solid var(--rule);
}
.view-toggle a:last-child { border-right: none; }
.view-toggle a.active { background: var(--accent); color: #fff; }
.view-toggle a:hover:not(.active) { background: var(--highlight); }

/* Staff-only nav cluster (includes/nav.php emits class="view-toggle
   view-toggle-staff" for the About/Dashboard/Log-out group, always
   alongside .view-toggle, never alone). Confirmed used-but-undefined
   in the earlier coverage audit -- defined here now as an intentionally
   empty hook: it rides entirely on .view-toggle's box/flex/border
   styling via the compound class, which is exactly how it already
   rendered before this rule existed. Give it real declarations here
   if the staff cluster ever needs to look visually distinct. */
.view-toggle-staff { }

/* Add record button */
.btn-add {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 0.35rem 0.85rem;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn-add:hover { background: #6e1515; border-color: #6e1515; }

/* Secondary / clear-style button */
.btn-clear {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent);
  background: none; padding: 0.3rem 0.65rem; cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.btn-clear:hover { background: var(--accent); color: #fff; }

/* Muted / cancel-style button */
.btn-muted {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); border: 1px solid var(--rule);
  background: none; padding: 0.3rem 0.75rem; cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.btn-muted:hover { color: var(--accent); border-color: var(--accent); }

/* Destructive / delete-style button */
.btn-flag {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--flag); border: 1px solid var(--flag);
  background: none; padding: 0.3rem 0.75rem; cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.btn-flag:hover { background: var(--flag); color: #fff; }

/* Filter bar */
.filter-bar {
  padding: 0.9rem 2.5rem;
  border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  background: var(--parchment);
}
.filter-bar label { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.filter-bar select,
.filter-bar input {
  font-family: var(--mono); font-size: 0.82rem;
  border: 1px solid var(--rule); background: #fff; color: var(--ink);
  padding: 0.4rem 0.6rem; border-radius: 0;
}
.filter-bar select { cursor: pointer; }
.filter-bar select:focus,
.filter-bar input:focus { outline: 1px solid var(--accent); }
.record-count { font-size: 0.72rem; color: var(--muted); letter-spacing: 0.06em; margin-left: auto; }

/* Document body / page content wrapper. Genuinely shared: sessions uses
   this unprefixed, at this exact value, with zero drift; the DOA section
   below is a dormant copy at the same value (live DOA pages still load a
   separate, untouched stylesheet -- see report). 1931 Code's version
   differs (960px) and will get its own .code-doc-body when Code converts. */
.doc-body { padding: 2rem 2.5rem 5rem; max-width: 900px; }

.stat-pill {
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; margin-left: auto;
}

/* Legend swatches (type-color key). Each project's own dots/bars key off
   these same three colors via a project-prefixed class carrying the same
   regular/extra/initial modifier names -- see SESSIONS below for its
   .sessions-type-dot / .sessions-bar using this exact palette. */
.legend {
  display: flex; align-items: center; gap: 1.25rem;
  font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.legend span { display: inline-flex; align-items: center; gap: 0.4rem; }

.sw { display: inline-block; width: 10px; height: 10px; flex-shrink: 0; }
.sw.regular { background: var(--accent); }
.sw.extra   { background: var(--review); }
.sw.initial { background: var(--approved); }

/* No results */
.empty-state {
  text-align: center; padding: 5rem 2rem; color: var(--muted);
  font-family: var(--serif); font-style: italic;
}

@media (max-width: 640px) {
  .site-header, .filter-bar, .doc-body { padding-left: 1rem; padding-right: 1rem; }
}

/* ===== SESSIONS ===== */
/* sessions/sessions_browse.php and sessions/sessions_edit.php. Every
   selector below is prefixed sessions- and self-contained: nothing in
   this section depends on a DOA-authored .detail-* rule anymore, even
   though the sessions editor visually still looks the same (see the
   note above .sessions-detail-row for where those values came from).
   Type color for the table dots and timeline bars keys off the SHARED
   .sw swatch's exact palette (var(--accent)/var(--review)/var(--approved))
   via the same regular/extra/initial modifier names, just applied to
   sessions-prefixed base classes instead of .sw itself. */

.sessions-type-dot {
  display: inline-block; width: 8px; height: 8px;
  margin-right: 0.5rem; vertical-align: middle; flex-shrink: 0;
}
.sessions-type-dot.regular, .sessions-bar.regular { background: var(--accent); }
.sessions-type-dot.extra,   .sessions-bar.extra   { background: var(--review); }
.sessions-type-dot.initial, .sessions-bar.initial { background: var(--approved); }

/* Tabular view -- roomier than a plain table, with real hierarchy (serif
   ordinals, muted secondary text) instead of a bare HTML table look. */
.sessions-archive-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.sessions-archive-table thead tr { border-bottom: 2px solid var(--ink); }
.sessions-archive-table thead th {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  padding: 0.6rem 1rem 0.6rem 0; text-align: left; white-space: nowrap;
}
.sessions-archive-table thead th a { color: inherit; text-decoration: none; }
.sessions-archive-table thead th a:hover, .sessions-archive-table thead th a.on { color: var(--accent); }
.sessions-archive-table tbody tr { border-bottom: 1px solid var(--rule); }
.sessions-archive-table tbody tr:hover { background: var(--highlight); }
.sessions-archive-table td { padding: 0.85rem 1rem 0.85rem 0; vertical-align: top; line-height: 1.5; }

.sessions-archive-table .sessions-num { font-variant-numeric: tabular-nums; }
.sessions-archive-table .sessions-est { font-style: italic; color: var(--muted); }
.sessions-archive-table .sessions-na  { color: var(--muted); }

.sessions-archive-table .sessions-leg-ord  { font-family: var(--serif); font-weight: 700; color: var(--accent); }
.sessions-archive-table .sessions-leg-name { font-size: 0.78rem; color: var(--muted); margin-left: 0.4rem; }

.sessions-archive-table .sessions-cell-title { font-family: var(--serif); font-size: 0.92rem; }
.sessions-archive-table .sessions-footnote-ref {
  font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--rule); padding: 0.05rem 0.35rem;
  margin-left: 0.5rem; white-space: nowrap;
}

/* Column widths specific to the sessions table (5 columns after dropping
   the redundant Type column -- type now reads as the dot in .sessions-cell-title). */
.sessions-archive-table .sessions-leg-cell { width: 230px; }
.sessions-archive-table td.sessions-num    { width: 110px; }
.sessions-archive-table td.sessions-col-days { width: 80px; }

.sessions-date-note { font-size: 0.72rem; color: var(--muted); font-style: italic; margin: 0.75rem 0 0; }

/* Timeline view */
.sessions-timeline { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.sessions-trow { display: flex; align-items: center; gap: 1rem; }
.sessions-dlabel {
  width: 56px; flex-shrink: 0; font-family: var(--serif); font-weight: 700;
  color: var(--accent); font-size: 0.85rem; text-align: right;
}
.sessions-track { position: relative; flex: 1; height: 22px; background: #fff; border: 1px solid var(--rule); }
.sessions-tick  { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--rule); }
.sessions-bar   { position: absolute; top: 3px; height: 16px; min-width: 2px; border-radius: 1px; cursor: default; }

@media (max-width: 768px) {
  .sessions-archive-table .sessions-leg-name { display: none; }
}

/* Sessions add/edit form (sessions/sessions_edit.php). The five rules
   below are copied verbatim -- same declarations, same values -- from
   the DOA section's original .detail-row / .detail-field /
   .detail-field-label / .detail-flag-notice / .detail-note (see DOA
   below). Sessions no longer references those DOA selectors at all;
   this is a fully independent copy, so a future DOA edit can't silently
   reskin the sessions editor and vice versa. One deliberate simplification:
   the DOA .detail-field input rule also excludes checkbox/radio types and
   styles textarea, because doa_tree.php's editor has those; the sessions
   editor has neither (only text/number/date inputs and selects), so
   .sessions-detail-field's input/select rule below is written for what
   this form actually contains rather than copying unused complexity. */
.sessions-detail-row { display: flex; gap: 1rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.sessions-detail-field { flex: 1; min-width: 120px; }
.sessions-detail-field-label {
  font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.2rem; font-weight: 600;
}
.sessions-detail-field input,
.sessions-detail-field select {
  font-family: var(--mono); font-size: 0.82rem;
  border: 1px solid var(--rule); background: #fff; color: var(--ink);
  padding: 0.3rem 0.5rem; width: 100%;
}
.sessions-detail-flag-notice {
  background: #fdf0f0; border: 1px solid var(--flag); color: var(--flag);
  font-size: 0.72rem; letter-spacing: 0.06em; padding: 0.5rem 0.75rem;
  margin-bottom: 1rem; text-transform: uppercase;
}
.sessions-detail-note {
  font-size: 0.78rem; color: var(--muted); font-style: italic; line-height: 1.6;
  border-left: 2px solid var(--rule); padding-left: 0.75rem; margin-top: 0.5rem;
}

.sessions-field-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); font-size: 0.68rem; }
.sessions-field-error { font-size: 0.7rem; color: var(--flag); margin-top: 0.3rem; }
.sessions-detail-field.sessions-has-error input,
.sessions-detail-field.sessions-has-error select { border-color: var(--flag); }

.sessions-derived-preview {
  background: var(--highlight); border: 1px solid var(--rule);
  padding: 0.75rem 1rem; margin: 0.25rem 0 1.25rem;
}
.sessions-derived-preview .sessions-dp-row { display: flex; gap: 0.75rem; align-items: baseline; }
.sessions-derived-preview .sessions-dp-row + .sessions-dp-row { margin-top: 0.35rem; }
.sessions-derived-preview .sessions-dp-label {
  font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); width: 130px; flex-shrink: 0;
}
.sessions-derived-preview .sessions-dp-value { font-family: var(--serif); font-weight: 700; color: var(--accent); }

.sessions-form-actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; }

/* ===== CODE ===== */
/* 1931 Code pages. Pilot: code_tree.php converged onto this file first;
   browse.php/columns.php/manage/dashboard.php are still fully inline and
   will land here in later passes as each converts. dashboard.php is not
   planned to convert (stays inline). */

/* .nav-clusters: NOT prefixed -- emitted by includes/nav.php, a shared
   include across browse.php/code_tree.php/columns.php (all three still
   hardcode class="nav-clusters" there). Renaming it here would require
   editing nav.php, which is out of scope for this code_tree-only pilot
   and would break the other two pages' still-inline .nav-clusters rule.
   Revisit when nav.php itself converts (i.e. when the last of the three
   pages migrates). */
.nav-clusters { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 0.75rem; flex-wrap: wrap; }

/* Tom Select (search box). NOT prefixed -- .ts-wrapper/.ts-control/.ts-dropdown
   are hardcoded class names TomSelect itself writes into the DOM at runtime;
   there is no config option to rename them, so a code- prefix here would not
   match the real generated markup and would silently stop applying. Scoped to
   Code pages in practice (only code_tree.php and browse.php load TomSelect on
   this site; sessions/DOA do not), so the collision risk is theoretical. */
.ts-wrapper {
  flex: 1;
  min-width: 280px;
  max-width: 600px;
}
.ts-control {
  border: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  background: #fff !important;
  font-family: var(--mono) !important;
  font-size: 0.88rem !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
.ts-dropdown {
  border-radius: 0 !important;
  border-color: var(--rule) !important;
  font-family: var(--mono) !important;
  font-size: 0.85rem !important;
}
.ts-dropdown .option.active { background: var(--highlight) !important; color: var(--ink) !important; }
.ts-dropdown .option:hover  { background: var(--highlight) !important; }

/* Document body -- conflicts with SHARED .doc-body (960px/6rem vs 900px/5rem
   bottom padding), so this is a standalone rule, not a SHARED override. */
.code-doc-body { padding: 2rem 2.5rem 6rem; max-width: 960px; }

/* Chapter -- .code- prefix avoids colliding with DOA's unrelated
   citation-grid .chapter-block. */
.code-chapter-block { margin-bottom: 3.5rem; }
.code-chapter-heading {
  font-family: var(--serif); font-size: 1.25rem; font-weight: 700;
  color: var(--accent); border-bottom: 2px solid var(--accent);
  padding-bottom: 0.4rem; margin-bottom: 0.25rem;
}
.code-chapter-subheading {
  font-family: var(--serif); font-size: 0.85rem; font-style: italic;
  color: var(--muted); margin-bottom: 1.75rem;
}

/* Article */
.code-article-block { margin-bottom: 1.75rem; }
.code-article-heading {
  font-family: var(--serif); font-size: 0.95rem; font-weight: 700;
  color: var(--ink); letter-spacing: 0.02em;
  border-bottom: 1px solid var(--rule); padding-bottom: 0.3rem;
  margin-bottom: 0.75rem; text-transform: uppercase; font-size: 0.78rem;
  letter-spacing: 0.1em; color: var(--muted);
}
.code-article-label {
  font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); font-weight: 600; margin-right: 0.5rem;
}

/* Sections. .code-sec-status and the four .code-status-* color rules are
   byte-identical to columns.php's current inline versions (browse.php uses a
   differently-named/valued .status-badge instead, not the same rule) -- when
   columns.php converts, it should reuse these rather than duplicate them. */
.code-section-row {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 0 1rem;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
  cursor: pointer;
  transition: background 0.1s;
}
.code-section-row:last-child { border-bottom: none; }
.code-section-row:hover { background: var(--highlight); }
.code-section-row.code-flagged { border-left: 3px solid var(--flag); padding-left: 0.35rem; }

.code-sec-id {
  font-family: var(--mono); font-size: 0.78rem; font-weight: 600;
  color: var(--accent); white-space: nowrap;
}
.code-sec-title {
  font-family: var(--serif); font-size: 0.85rem; line-height: 1.4;
}
.code-sec-status {
  font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.1rem 0.35rem; border: 1px solid currentColor; white-space: nowrap;
}
.code-status-unreviewed { color: var(--muted); }
.code-status-typography { color: var(--review); }
.code-status-counsel    { color: var(--accent); }
.code-status-approved   { color: var(--approved); }

.code-flag-dot {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--flag); margin-right: 4px; vertical-align: middle; flex-shrink: 0;
}

/* Detail panel. .code-detail-overlay/-head/-body are byte-identical to DOA's
   copy today, but kept self-contained per Option B (no cross-project
   dependency on DOA) -- same pattern as the SESSIONS detail-* copies above. */
.code-detail-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(26,26,24,0.55); z-index: 200;
  align-items: flex-start; justify-content: flex-end;
}
.code-detail-overlay.open { display: flex; }
.code-detail-panel {
  background: var(--parchment); width: min(700px, 92vw); height: 100vh;
  overflow-y: auto; border-left: 3px double var(--rule);
  display: flex; flex-direction: column;
}
.code-detail-head {
  padding: 1.5rem 2rem 1rem; border-bottom: 1px solid var(--rule);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  position: sticky; top: 0; background: var(--parchment); z-index: 10;
}
.code-detail-id    { font-family: var(--serif); font-size: 1rem; font-weight: 700; color: var(--accent); }
.code-detail-section-title { font-family: var(--serif); font-size: 1.2rem; line-height: 1.3; margin-top: 0.2rem; }
.code-detail-close {
  background: none; border: 1px solid var(--rule); color: var(--muted);
  font-size: 1.1rem; cursor: pointer; padding: 0.2rem 0.6rem;
  flex-shrink: 0; font-family: var(--mono);
}
.code-detail-close:hover { color: var(--accent); border-color: var(--accent); }
.code-detail-edit-link {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: #fff; background: var(--accent);
  border: 1px solid var(--accent); padding: 0.3rem 0.7rem;
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
}
.code-detail-edit-link:hover { background: #6b1414; border-color: #6b1414; }
.code-detail-body { padding: 1.5rem 2rem; flex: 1; }
.code-detail-meta {
  font-size: 0.73rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 1.25rem; line-height: 1.8;
}
.code-detail-block-label {
  font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); margin: 1.25rem 0 0.4rem; font-weight: 600;
}
.code-detail-section-body {
  font-family: var(--serif); font-size: 0.9rem; line-height: 1.8;
  color: var(--ink); border-top: 1px solid var(--rule);
  padding-top: 1.25rem; margin-bottom: 1.25rem; white-space: pre-wrap;
}
.code-detail-citations,
.code-detail-notes {
  font-size: 0.78rem; color: var(--muted); font-style: italic; line-height: 1.6;
  border-left: 2px solid var(--rule); padding-left: 0.75rem;
}
.code-detail-flag-notice {
  background: #fdf0f0; border: 1px solid var(--flag); color: var(--flag);
  font-size: 0.73rem; letter-spacing: 0.06em; padding: 0.5rem 0.75rem;
  margin-bottom: 1rem; text-transform: uppercase;
}
.code-detail-status-row {
  display: flex; align-items: center; gap: 0.75rem;
  margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); flex-wrap: wrap;
}
.code-detail-status-label { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 640px) {
  .code-doc-body { padding-left: 1rem; padding-right: 1rem; }
  .code-section-row { grid-template-columns: 110px 1fr; }
  .code-sec-status { display: none; }
}

/* browse.php. Reuses .code-detail-*, .code-status-*, .nav-clusters, .ts-*
   from the code_tree pilot above -- see that markup for the shared pattern.
   .site-header itself is NOT prefixed here -- browse's inline copy was
   missing SHARED's position:sticky/top:0, confirmed as accidental drift
   (not intent), so browse now inherits SHARED's .site-header directly like
   every other page. */

.code-search-bar {
  padding: 1rem 2.5rem;
  border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--parchment);
}
.code-search-bar label { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }

.code-filter-group { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.code-filter-group select {
  font-family: var(--mono); font-size: 0.82rem;
  border: 1px solid var(--rule); background: #fff; color: var(--ink);
  padding: 0.4rem 0.6rem; border-radius: 0; cursor: pointer;
}

/* .code-stat-pill: adds align-self:center vs SHARED's .stat-pill (browse's
   search-bar is a mixed-height flex row; SHARED's version doesn't need it). */
.code-stat-pill {
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; align-self: center; margin-left: auto;
}

.code-count-display {
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); padding: 0.6rem 2.5rem; border-bottom: 1px solid var(--rule);
}

/* Table. Bare tag selectors (table/thead/tbody/tr/td) are scoped under
   .code-table-wrap -- left unscoped they'd apply to every table on every
   page that loads this shared sheet. */
.code-table-wrap { padding: 1.5rem 2.5rem 4rem; overflow-x: auto; }
.code-table-wrap table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.code-table-wrap thead tr { border-bottom: 2px solid var(--ink); }
.code-table-wrap thead th {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  padding: 0.5rem 0.75rem 0.5rem 0; text-align: left; white-space: nowrap;
  cursor: pointer; user-select: none;
}
.code-table-wrap thead th:hover { color: var(--accent); }
.code-table-wrap thead th.sort-asc::after  { content: ' ↑'; color: var(--accent); }
.code-table-wrap thead th.sort-desc::after { content: ' ↓'; color: var(--accent); }
.code-table-wrap tbody tr { border-bottom: 1px solid var(--rule); transition: background 0.1s; cursor: pointer; }
.code-table-wrap tbody tr:hover { background: var(--highlight); }
.code-table-wrap tbody tr.code-flagged { border-left: 3px solid var(--flag); }
.code-table-wrap td { padding: 0.65rem 0.75rem 0.65rem 0; vertical-align: top; line-height: 1.45; }

.code-col-id    { font-family: var(--serif); font-size: 0.82rem; font-weight: 700; color: var(--accent); white-space: nowrap; width: 80px; }
/* .code-col-chapter: name-collides with DOA's unrelated .col-chapter (different widths/purpose) -- prefixed to avoid it. */
.code-col-chapter { font-size: 0.78rem; color: var(--muted); width: 220px; }
.code-col-article { font-size: 0.78rem; color: var(--muted); width: 200px; }
.code-col-title   { font-family: var(--serif); font-size: 0.85rem; font-weight: 400; width: 260px; }
.code-col-preview { font-size: 0.78rem; color: var(--muted); max-width: 340px; }
.code-col-status  { width: 90px; text-align: center; }

.code-status-badge {
  display: inline-block; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.2rem 0.45rem; border: 1px solid currentColor; white-space: nowrap;
}

/* .code-flag-dot-table: browse's table-row dot (6px) differs from code_tree's
   .code-flag-dot (5px, tree view) -- distinct components, so a distinct name,
   not a shared one. Matches DOA's own independently-named .flag-dot-table
   exactly (self-contained copy, not a dependency on DOA). */
.code-flag-dot-table {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--flag); margin-right: 4px; vertical-align: middle;
}

/* .code-empty-state: adds font-size:1rem vs SHARED's .empty-state. */
.code-empty-state {
  text-align: center; padding: 5rem 2rem; color: var(--muted);
  font-family: var(--serif); font-style: italic; font-size: 1rem;
}

.code-pagination { display: flex; align-items: center; gap: 0.5rem; padding: 1.5rem 2.5rem; border-top: 1px solid var(--rule); flex-wrap: wrap; }
.code-page-btn {
  font-family: var(--mono); font-size: 0.78rem; border: 1px solid var(--rule);
  background: none; color: var(--ink); padding: 0.3rem 0.65rem; cursor: pointer; border-radius: 0;
}
.code-page-btn:hover, .code-page-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.code-page-info { font-size: 0.72rem; color: var(--muted); letter-spacing: 0.06em; margin-left: auto; }

@media (max-width: 768px) {
  .code-search-bar, .code-table-wrap, .code-count-display, .code-pagination {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .code-col-article, .code-col-preview { display: none; }
}

/* columns.php. Reuses .code-detail-*, .code-status-*, .code-sec-status,
   .nav-clusters from the code_tree pilot above. .site-header is likewise
   NOT prefixed here -- columns' inline copy had the same missing
   position:sticky/top:0 drift found on browse.php; it now inherits SHARED's
   .site-header directly.

   Fixed-viewport 3-pane layout: columns' own <style> put display:flex;
   height:100vh;overflow:hidden on body itself, which conflicts with SHARED's
   scrolling body{min-height:100vh}. Rather than override the shared body,
   that layout is scoped entirely under a .code-columns-view wrapper div
   (containing the header + .code-cols; the detail overlay stays a
   position:fixed sibling outside it, since it doesn't participate in the
   column layout). SHARED's body rule is untouched and still shared by every
   other page. This is the reusable pattern for any future fixed-viewport
   page (e.g. manage/dashboard.php, if it ever converts). */
.code-columns-view { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

.code-columns-view .code-cols { flex: 1; display: grid; grid-template-columns: 300px 320px 1fr; min-height: 0; }
.code-columns-view .code-pane { border-right: 1px solid var(--rule); display: flex; flex-direction: column; min-height: 0; }
.code-columns-view .code-pane .code-hd {
  padding: 0.6rem 1rem; border-bottom: 1px solid var(--rule); font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  display: flex; justify-content: space-between; background: var(--parchment);
}
.code-columns-view .code-pane .code-hd .code-cnt { color: var(--accent); }
.code-columns-view .code-list { overflow-y: auto; flex: 1; }
.code-columns-view .code-row {
  display: flex; gap: 0.6rem; width: 100%; text-align: left; border: none;
  background: none; font: inherit; color: inherit; cursor: pointer;
  padding: 0.5rem 1rem; border-bottom: 1px solid var(--rule); align-items: flex-start;
}
.code-columns-view .code-row:hover { background: var(--highlight); }
.code-columns-view .code-row.code-sel { background: var(--highlight); box-shadow: inset 3px 0 0 var(--accent); }
.code-columns-view .code-row .code-num { font-family: var(--mono); font-size: 0.72rem; font-weight: 600; color: var(--accent); min-width: 26px; padding-top: 1px; }
.code-columns-view .code-row .code-body { flex: 1; min-width: 0; }
.code-columns-view .code-row .code-ttl { font-family: var(--serif); font-size: 0.82rem; line-height: 1.35; }
.code-columns-view .code-row .code-sub { display: block; font-size: 0.62rem; color: var(--muted); margin-top: 2px; letter-spacing: 0.04em; }
.code-columns-view .code-row .code-sub-inline { font-size: 0.62rem; color: var(--muted); letter-spacing: 0.04em; }
.code-columns-view .code-row .code-chev { color: var(--muted); align-self: center; }
.code-columns-view .code-heat { margin-top: 5px; height: 3px; background: var(--rule); }
.code-columns-view .code-heat i { display: block; height: 100%; background: var(--review); }
/* .code-flag-dot-row: columns' own third dot variant -- doesn't match
   code_tree's inline .code-flag-dot (5px, margin-right+vertical-align) or
   browse's table-cell .code-flag-dot-table (6px). This one's a leading flex
   item in a horizontal row (flex:none, margin-top for baseline alignment),
   a genuinely different component despite the similar size. */
.code-columns-view .code-row .code-flag-dot-row { width: 5px; height: 5px; border-radius: 50%; background: var(--flag); flex: none; margin-top: 6px; }
.code-columns-view .code-row .code-flag-dot-row.code-clean { background: #bfc4b2; }
.code-columns-view .code-pane-empty { padding: 2.5rem 1rem; color: var(--muted); font-family: var(--serif); font-style: italic; font-size: 0.82rem; text-align: center; }

@media (max-width: 820px) {
  .code-columns-view .code-cols { grid-template-columns: 1fr; overflow-y: auto; }
  .code-columns-view .code-pane { border-right: none; border-bottom: 1px solid var(--rule); max-height: 40vh; }
}

/* ===== DOA ===== */
/* Disposition of Acts tools (doa_tree.php, doa_browse.php,
   doa_bulk_chapter.php). Everything below is byte-identical in value to
   what was here before this restructuring -- unprefixed, untouched,
   still these tools' own selector names. Migrating them to a doa- prefix
   is a separate future pass, same as CODE above.

   Extracted from doa_tree.php's original embedded <style> block so all
   three views share ONE stylesheet instead of duplicating/drifting.

   Google Fonts (Libre Baskerville, Source Sans 3) are still linked
   directly in each page's <head> rather than @import'd here, since
   direct <link> + preconnect loads faster than an @import inside CSS.
*/

/* Year jump nav */
/* Year jump nav */
.year-jump {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.72rem; letter-spacing: 0.06em;
  border-left: 1px solid var(--rule); padding-left: 0.75rem; margin-left: 0.25rem;
}
.year-jump a {
  color: var(--accent); text-decoration: none;
  border: 1px solid var(--accent); padding: 0.22rem 0.55rem;
  white-space: nowrap;
}
.year-jump a:hover { background: var(--accent); color: #fff; }

/* Year heading */
.year-block { margin-bottom: 3rem; }
.year-heading {
  font-family: var(--serif); font-size: 1.3rem; font-weight: 700;
  color: var(--accent); border-bottom: 2px solid var(--accent);
  padding-bottom: 0.4rem; margin-bottom: 1.5rem;
}

/* Session heading */
.session-block { margin-bottom: 2rem; }
.session-heading {
  font-family: var(--serif); font-size: 0.85rem; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em;
  border-bottom: 1px solid var(--rule); padding-bottom: 0.3rem;
  margin-bottom: 1rem;
}

/* Chapter block */
.chapter-block {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0 1.5rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
  scroll-margin-top: 160px; /* clears the sticky .site-header when jumping
                                to a #ch-... anchor after save/reload */
}
.chapter-block:last-child { border-bottom: none; }
.chapter-block:hover { background: var(--highlight); }

.ch-label {
  font-size: 0.82rem; color: var(--ink); font-weight: 500;
  padding-right: 0.5rem;
}
.ch-label .ch-num { font-family: var(--serif); font-weight: 700; }
.ch-label .ch-range { font-size: 0.72rem; color: var(--muted); display: block; }

.ch-citations { font-size: 0.82rem; }

/* Single citation row */
.cite-row {
  display: flex; align-items: baseline; gap: 0.5rem;
  padding: 0.15rem 0;
}
.cite-code {
  font-family: var(--mono); font-weight: 600;
  color: var(--ink);
}
.cite-code.is-range { color: var(--review); }
.cite-code.is-repealed { color: var(--muted); text-decoration: line-through; }

.cite-badges { display: flex; gap: 3px; flex-wrap: wrap; }
.badge {
  display: inline-block; font-size: 0.58rem; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 0.1rem 0.35rem;
  border: 1px solid currentColor; white-space: nowrap;
}
.badge-repealed { color: var(--flag); }
.badge-range    { color: var(--review); }
.badge-review   { color: var(--flag); }
.badge-ok       { color: var(--approved); }

.flag-dot {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--flag); flex-shrink: 0; margin-top: 4px;
}

/* Table-cell variant of flag-dot (used by doa_browse.php's tabular
   view) -- kept as a SEPARATE class from .flag-dot above rather than
   merged, since the two contexts need different sizing/spacing
   (inline-flex-row alignment vs. table-cell alignment) and forcing one
   shared definition would make one of the two pages look subtly wrong. */
.flag-dot-table {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--flag); margin-right: 4px; vertical-align: middle;
}

/* Detail panel (slide-out editor, used by doa_tree.php's record editor
   and reused by doa_bulk_chapter.php for a consistent editing feel) */
.detail-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(26,26,24,0.55); z-index: 200;
  align-items: flex-start; justify-content: flex-end;
}
.detail-overlay.open { display: flex; }
.detail-panel {
  background: var(--parchment); width: min(640px, 92vw); height: 100vh;
  overflow-y: auto; border-left: 3px double var(--rule);
  display: flex; flex-direction: column;
}
.detail-head {
  padding: 1.5rem 2rem 1rem; border-bottom: 1px solid var(--rule);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  position: sticky; top: 0; background: var(--parchment); z-index: 10;
}
.detail-label { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.2rem; }
.detail-id    { font-family: var(--serif); font-size: 1.1rem; font-weight: 700; color: var(--accent); }
.detail-close {
  background: none; border: 1px solid var(--rule); color: var(--muted);
  font-size: 1.1rem; cursor: pointer; padding: 0.2rem 0.6rem; font-family: var(--mono);
}
.detail-close:hover { color: var(--accent); border-color: var(--accent); }
.detail-body  { padding: 1.5rem 2rem; flex: 1; }
.detail-row   { display: flex; gap: 1rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.detail-field { flex: 1; min-width: 120px; }
.detail-field-label { font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.2rem; font-weight: 600; }
.detail-field-value { font-size: 0.88rem; line-height: 1.5; }
.detail-field input:not([type=checkbox]):not([type=radio]),
.detail-field select,
.detail-field textarea {
  font-family: var(--mono); font-size: 0.82rem;
  border: 1px solid var(--rule); background: #fff; color: var(--ink);
  padding: 0.3rem 0.5rem; width: 100%;
}
.detail-field input[type=checkbox],
.detail-field input[type=radio] {
  width: auto; flex-shrink: 0;
}

/* Subject dropdown grouping (doa_tree.php / doa_browse.php). Native
   <optgroup>/<option> styling is inconsistently supported across
   browsers -- this looks right in Chrome/Firefox/Edge on Windows, but
   macOS Safari's native picker ignores most of it (renders its own OS
   widget) and left-border/background effects on individual <option>
   elements don't render reliably anywhere. This is the safe, best-effort
   version; a fully custom dropdown widget would be needed for guaranteed
   cross-browser control (background shading, vertical rule indicators). */
.detail-field select optgroup {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
  background: var(--highlight);
}
.detail-field select optgroup option {
  font-family: var(--mono);
  font-weight: 400;
  color: var(--ink);
  background: #fff;
  padding-left: 1rem;
}
.detail-divider { border: none; border-top: 1px solid var(--rule); margin: 1.25rem 0; }
.detail-flag-notice {
  background: #fdf0f0; border: 1px solid var(--flag); color: var(--flag);
  font-size: 0.72rem; letter-spacing: 0.06em; padding: 0.5rem 0.75rem;
  margin-bottom: 1rem; text-transform: uppercase;
}
.detail-note {
  font-size: 0.78rem; color: var(--muted); font-style: italic; line-height: 1.6;
  border-left: 2px solid var(--rule); padding-left: 0.75rem; margin-top: 0.5rem;
}

/* Bulk-chapter table (doa_bulk_chapter.php) -- styled to sit alongside
   the chapter-block/cite-row look used elsewhere rather than a generic
   HTML table appearance */
.bulk-table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 0.82rem; }
.bulk-table th {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); text-align: left;
  padding: 0.5rem 0.6rem; border-bottom: 2px solid var(--rule);
}
.bulk-table td {
  padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
.bulk-table tr:hover td { background: var(--highlight); }
.bulk-table tr.new-row td { background: #fbf8ee; }
.bulk-table tr.saved-flash td { background: #eef6ee; transition: background 1.5s ease; }
.bulk-table input[type=text] {
  font-family: var(--mono); font-size: 0.82rem;
  border: 1px solid var(--rule); background: #fff; color: var(--ink);
  padding: 0.3rem 0.5rem; width: 100%;
}
.bulk-table select {
  font-family: var(--mono); font-size: 0.82rem;
  border: 1px solid var(--rule); background: #fff; color: var(--ink);
  padding: 0.3rem 0.4rem;
}
.bulk-raw-preview { font-family: var(--mono); color: var(--muted); font-size: 0.8rem; }
.bulk-row-error { color: var(--flag); font-size: 0.7rem; margin-top: 0.2rem; }

.count-display {
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); padding: 0.6rem 2.5rem; border-bottom: 1px solid var(--rule);
}
.table-wrap { padding: 1.25rem 2.5rem 4rem; overflow-x: auto; }

.data-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.data-table thead tr { border-bottom: 2px solid var(--ink); }
.data-table thead th {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  padding: 0.5rem 0.75rem 0.5rem 0; text-align: left; white-space: nowrap;
}
.data-table tbody tr { border-bottom: 1px solid var(--rule); cursor: pointer; }
.data-table tbody tr:hover { background: var(--highlight); }
.data-table tbody tr.flagged { border-left: 3px solid var(--flag); }
.data-table tbody tr.is-repealed td { opacity: 0.6; }
.data-table td { padding: 0.6rem 0.75rem 0.6rem 0; vertical-align: top; line-height: 1.4; }

.col-year    { white-space: nowrap; width: 90px; font-family: var(--serif); font-weight: 700; color: var(--accent); }
.col-sess    { width: 55px; font-size: 0.75rem; color: var(--muted); }
.col-chapter { width: 120px; font-size: 0.82rem; }
.col-code    { width: 160px; font-family: var(--mono); font-size: 0.82rem; font-weight: 600; }
.col-parsed  { width: 220px; font-size: 0.78rem; color: var(--muted); }
.col-flags   { width: 100px; text-align: center; }

/* Pagination */
.pagination {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 1.5rem 2.5rem; border-top: 1px solid var(--rule); flex-wrap: wrap;
}
.page-btn {
  font-family: var(--mono); font-size: 0.78rem;
  border: 1px solid var(--rule); background: none; color: var(--ink);
  padding: 0.3rem 0.65rem; cursor: pointer; border-radius: 0;
}
.page-btn:hover, .page-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.page-info { font-size: 0.72rem; color: var(--muted); letter-spacing: 0.06em; margin-left: auto; }

@media (max-width: 640px) {
  .chapter-block { grid-template-columns: 1fr; gap: 0.15rem; }
}

@media (max-width: 768px) {
  .table-wrap, .count-display, .pagination { padding-left: 1rem; padding-right: 1rem; }
  .col-parsed, .col-flags { display: none; }
}

/* doa- prefixed additions for doa_browse.php's current 14-column tabular
   view. Added because that page's inline <style> was redefining
   .col-year/.col-sess/.col-chapter/.col-code with different (percentage,
   not pixel) values for this newer layout -- silently colliding with the
   six-column .col-year/.col-sess/.col-chapter/.col-code/.col-parsed/
   .col-flags scheme already above, a legacy layout these names actually
   belong to (.col-parsed/.col-flags aren't even referenced by the
   current markup at all). Cascade order happened to make the inline
   version win, but two same-named rules with unrelated values is
   fragile and confusing -- renamed instead of relying on that. Also:
   .table-wrap (used only by doa_browse.php among the DOA pages) had no
   max-width at all, unlike .doc-body's 900px cap that doa_tree.php /
   doa_bulk_chapter.php / const_amendments.php all use, same as
   sessions_browse.php. .doa-table-wrap gives doa_browse.php's dense
   14-column table its own capped, centered content area instead of an
   unbounded one -- wider than .doc-body's 900px since a 14-column table
   genuinely needs the room, but capped and centered the same way, not
   full-bleed. */
.doa-table-wrap { padding: 1.25rem 2.5rem 4rem; overflow-x: auto; max-width: 1400px; margin: 0 auto; }

.doa-col-year    { width: 5%; }
.doa-col-sess    { width: 5%; }
.doa-col-chapter { width: 6.5%; white-space: normal; }
.doa-col-code    { width: 17%; white-space: normal; }

/* ---------------------------------------------------------------
   .doa-table -- shared dense-table treatment           2026-09-18
   ---------------------------------------------------------------
   doa_browse.php, bills_browse.php and missing_bills.php each carried a
   byte-identical copy of these rules in a page-local <style> block. They
   are one rule set now; the pages opt in with class="data-table doa-table"
   and keep only their own column widths (.doa-col-*, .bill-col-*,
   .miss-col-*), which genuinely differ per table.

   Placed AFTER the base .data-table rules above on purpose. `.doa-table td`
   and `.data-table td` have identical specificity (0,1,1), so source order
   decides which padding/vertical-align wins -- exactly as it did when these
   lived in a page <style> block that loaded after this file. Moving this
   block above .data-table would silently revert every one of these cells.

   Transcribed verbatim from the page copies, including quirks, because this
   pass is a consolidation and not a restyling:
     - the !important on padding/text-align, which is what beats the base
       .data-table td rule;
     - BOTH .col-divider rules, in this order. The td/th-qualified one
       (0,2,1) wins width:2px over the bare one (0,2,0); the bare rule still
       supplies the background. Collapsing them changes the divider width.
   Renaming the old unprefixed DOA selectors is a separate pass, per this
   file's own note at the top of the DOA section -- not done here.
   --------------------------------------------------------------- */
.doa-table {
  table-layout: fixed;
  width: 100%;
}
.doa-table td, .doa-table th {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text, #222);
  text-align: left !important;
  vertical-align: middle;
  padding: 0.4rem 0.6rem !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doa-table th {
  font-weight: 600;
  padding-right: 1.4rem !important;
}
.doa-table th .th-sort-link {
  color: inherit;
  text-decoration: none;
  display: inline;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
.doa-table th .th-sort-link:hover {
  text-decoration: underline;
}
/* Group-label row above the column headers (Acts Provenance / WV Code /
   Status on DOA; Bill / Reconciliation on Bills). */
.doa-table .th-group-row {
  background: var(--muted-bg, #ede8dd);
}
.doa-table th.th-group {
  text-align: center !important;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #7a7566);
  padding: 0.3rem 0.6rem !important;
  border-bottom: 1px solid var(--border, #ddd);
}
.th-group-row .col-divider {
  background: var(--border, #ddd);
}
/* Dividers: thin fixed width, no padding bleed from the general th rule. */
.doa-table td.col-divider, .doa-table th.col-divider {
  width: 2px;
  padding: 0 !important;
}
/* Headers immediately before a divider drop the extra right-padding meant
   for breathing room between normal columns. */
.doa-table th.before-divider {
  padding-right: 0.6rem;
}
.doa-table .col-divider {
  width: 1px;
  padding: 0;
  background: var(--border, #ddd);
}

/* Deliberately NOT scoped under .doa-table: bills_browse.php also uses
   .cell-subtext on its legend <div> and inside the detail panel, neither of
   which is in a table. Scoping it would strip those. */
.cell-subtext {
  font-size: 0.72rem;
  color: var(--muted, #888);
}

/* ---------------------------------------------------------------
   Coming-soon tabs inside .view-toggle                 2026-09-18
   ---------------------------------------------------------------
   doa_nav.php renders a tab whose target page does not exist yet as
   <span class="lib-soon"> instead of an <a>. The .view-toggle rules above
   style only `a`, and the masthead's .lib-soon rule is scoped to .lib-nav,
   so inside this strip the spans fell through as bare text: no padding, no
   border, no separation ("FindingsReports").

   Same box model as .view-toggle a -- padding, border-right, type -- but a
   muted, non-interactive state: no hover fill, default cursor. It should
   read as a tab that is not live yet, not as a link and not as text.
   Serves all three rows (primary tabs, Citations sub-tabs, Bills sub-tabs),
   since they share the one partial and the one class.

   :last-child on the span mirrors the anchor rule: the row's trailing
   border-right is dropped whichever element happens to end it. */
.view-toggle span.lib-soon {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 0.35rem 0.75rem;
  color: var(--muted);
  background: transparent;
  border-right: 1px solid var(--rule);
  cursor: default;
  opacity: 0.55;
  user-select: none;
}
.view-toggle span.lib-soon:last-child { border-right: none; }

/* ===== LIBRARY-CHROME ===== */
/* Shared top/bottom nav bar for every library property (the WordPress
   landing and the standalone tool pages alike), rendered by
   includes/library_header.php and includes/library_footer.php. Distinct
   from any single tool's own .site-header -- this is the cross-tool
   masthead that sits above/below it, not a replacement for it. All
   selectors prefixed lib- to stay out of sessions-/code-/doa-'s way.

   Ported directly from the approved mockup
   (includes/library_landing_mockup_v3.html) -- values, spacing, and
   structure below are transcribed from that file, not invented here.
   Reuses this design system's existing --ink/--parchment/--rule/--accent/
   --muted/--highlight/--approved/--serif tokens (the mockup's own :root
   uses the identical hex values already defined in SHARED above) and
   adds only the four genuinely new ones: navy/navy-deep/gold/gold-deep.
   The mockup's dark "MOCKUP PREVIEW" toggle strip and its
   body.asEditor/.editoronly JS-driven visibility are NOT ported -- the
   real build gates editor-only content server-side (library_user_can_optional),
   not with a CSS class a script toggles. */

:root {
  --lib-navy:      #1a2a44;
  --lib-navy-deep: #14203a;
  --lib-gold:      #c19a2e;
  --lib-gold-deep: #8a6608;
  /* Declared height of .lib-nav-bar, not just a guess at its rendered
     size: .lib-nav-bar below sets min-height to this SAME variable, so
     the two can never drift out of sync. Chosen to comfortably fit the
     bar's tallest content (nav links at 0.85rem top/bottom padding plus
     one line of 0.72rem text, ~2.7rem) with a hair of breathing room,
     plus the 2px gold border-bottom. */
  --lib-nav-height: 3rem;
}

/* ── Top nav bar ── */
.lib-nav-bar {
  position: sticky;
  top: 0;
  /* Above .site-header's z-index:100 (SHARED) on purpose: if the offset
     below is ever off by a pixel for any reason, the library nav should
     still visually win, not get sliced by the tool header underneath it. */
  z-index: 110;
  min-height: var(--lib-nav-height);
  background: var(--lib-navy);
  color: #e8e2d4;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 1.5rem;
  border-bottom: 2px solid var(--lib-gold);
  box-sizing: border-box;
  /* Defensive floor, belt-and-suspenders alongside the font enqueue fix
     in library-landing.php: every text-bearing child already declares
     its own font-size/letter-spacing, but pin the container's too so
     nothing rendered directly inside this bar (now or later) can ever
     inherit a wrapping page's font-size/letter-spacing instead. */
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: normal;
  line-height: normal;
  letter-spacing: normal;
  word-spacing: normal;
  font-stretch: normal;
}

/* Nested-sticky offset: on any page that renders .site-header (SHARED,
   untouched -- still top:0 everywhere else) directly after .lib-nav-bar
   in the DOM (i.e. a page that includes library_header.php right before
   its own header, as sessions_browse.php does), .site-header pins just
   below the library nav instead of fighting it for top:0. The adjacent-
   sibling selector means this ONLY matches that specific structure --
   a page with .site-header and no .lib-nav-bar sibling is untouched, and
   SHARED's own .site-header rule is never edited. */
.lib-nav-bar + .site-header { top: var(--lib-nav-height); }

.lib-brand {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.88rem;
  color: #fff;
  padding: 0.7rem 1.1rem 0.7rem 0;
  margin-right: 0.4rem;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.lib-nav {
  display: flex;
  align-items: center;
  /* Pinned for the same reason .lib-nav a pins its own copy below: on
     the WordPress landing page this bar renders inside the active block
     theme's global-styles wrapper, which sets font-weight/line-height
     (and Twenty Twenty-Five also letter-spacing) on `body` itself --
     properties this bar never used to declare, so they fell through
     from whichever theme happens to be active. The standalone tool
     pages have no such wrapper, so they were always rendering at the
     plain CSS-normal defaults; this reasserts those same defaults here
     so the bar can't drift no matter what theme wraps it. */
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: normal;
  line-height: normal;
  letter-spacing: normal;
  word-spacing: normal;
  font-stretch: normal;
}
.lib-nav a {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: normal;
  line-height: normal;
  letter-spacing: 0.09em;
  word-spacing: normal;
  font-stretch: normal;
  text-transform: uppercase;
  color: #c6cede;
  text-decoration: none;
  padding: 0.85rem 0.9rem;
  /* 3px transparent placeholder on every link (not just the active one),
     with margin-bottom matched to it so the border never adds height to
     the row. Keeping the width on the shared base rule -- rather than
     bumping only .lib-here -- means whichever link becomes active via
     $lib_active always gets the same 3px underline with zero layout
     jitter between the active and inactive states. */
  border-bottom: 3px solid transparent;
  margin-bottom: -3px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.lib-nav a:hover { color: #fff; background: var(--lib-navy-deep); }
.lib-nav a.lib-here { color: #fff; border-bottom-color: var(--lib-gold); }
.lib-nav .lib-soon {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #7d8496;
  padding: 0.85rem 0.9rem;
  cursor: default;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.lib-nav-space { flex: 1; }

/* Home tie-back link, pushed right by .lib-nav-space above. Deliberately
   quieter than the main nav links (dimmer color, no active/hover-fill
   treatment) -- it's a tie-back to the main Legislature site, not a
   primary action. */
.lib-home-link {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8f97a8;
  text-decoration: none;
  padding: 0.85rem 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.lib-home-link:hover { color: #c6cede; }
.lib-outbound-icon { font-size: 0.85em; opacity: 0.8; }
.lib-home-seal { height: 1em; width: auto; display: block; opacity: 0.9; }

/* Staff auth control, sits just left of Home (pushed right by
   .lib-nav-space along with it). Subtle -- same muted register as the
   Home link, not a primary action -- with a hairline divider so it
   reads as a distinct cluster from Home rather than one long run. */
.lib-auth {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-right: 0.7rem;
  margin-right: 0.5rem;
  border-right: 1px solid rgba(232, 226, 212, 0.15);
}
.lib-auth-status {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: #7d8496;
  white-space: nowrap;
}
.lib-auth-signin,
.lib-auth-signout {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8f97a8;
  text-decoration: none;
  white-space: nowrap;
}
.lib-auth-signin:hover,
.lib-auth-signout:hover { color: #c6cede; }

/* ── Hero ── */
.lib-hero {
  border-bottom: 3px double var(--rule);
  padding: 2.4rem 2.5rem 2rem;
  max-width: 1120px;
  margin: 0 auto;
}
.lib-hero-eyebrow {
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lib-gold-deep);
  margin-bottom: 0.55rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.lib-hero-eyebrow::before { content: ""; display: inline-block; width: 26px; height: 1px; background: var(--lib-gold); }
.lib-hero h1 {
  font-family: var(--serif);
  font-size: 2.05rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.12;
}
.lib-hero-sub {
  font-family: var(--serif);
  font-style: italic;
  color: var(--muted);
  margin-top: 0.55rem;
  font-size: 1.02rem;
  max-width: 60ch;
}

/* ── Landing wrap ── */
.lib-landing { max-width: 1120px; margin: 0 auto; padding: 2.25rem 2.5rem 4rem; }
.lib-section-label {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.4rem;
  margin: 0 0 1.25rem;
}

.lib-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.1rem; }
.lib-tile {
  border: 1px solid var(--rule);
  background: #fbf8f1;
  padding: 1.4rem 1.5rem 1.3rem;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 200px;
}
.lib-tile-icon { width: 34px; height: 34px; color: var(--accent); margin-bottom: 0.9rem; }
.lib-tile h3 { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.lib-tile p { font-size: 0.88rem; color: var(--muted); margin-top: 0.4rem; flex: 1; line-height: 1.55; }
.lib-tile-pointer { font-size: 0.78rem; color: var(--muted); margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px dotted var(--rule); line-height: 1.45; }
.lib-tile-pointer a { color: var(--accent); text-decoration: none; }
.lib-tile-pointer a:hover { text-decoration: underline; }
.lib-tile-go {
  margin-top: 1rem;
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.4rem 0.9rem;
  text-decoration: none;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.lib-tile-go:hover { background: #701414; }

/* DOA -- the anchor of coming work: a touch more presence. Currently
   unused (DOA is in "In progress" this pass, no live URL yet) -- ported
   from the mockup for when it graduates back to "Available now". */
.lib-tile-anchor { border-color: var(--accent); border-width: 1px; box-shadow: inset 0 0 0 1px #eadfce; }

/* Coming-soon tiles */
.lib-tile-soon {
  background: repeating-linear-gradient(135deg, #f3efe6, #f3efe6 10px, #f0ebe0 10px, #f0ebe0 20px);
  border-style: dashed;
}
.lib-tile-soon .lib-tile-icon, .lib-tile-soon h3 { color: var(--muted); }
.lib-tile-tag {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lib-gold-deep);
  border: 1px solid var(--lib-gold);
  padding: 0.1rem 0.4rem;
}
/* Element-qualified on purpose. A soon-tile says the SECTION is still being
   worked on; it does not say "this link does not work", and the two were
   conflated here. Written for the Subjects signpost, which is a
   <span class="lib-tile-go">Future build</span> with nowhere to go and so is
   correctly muted with cursor:default. Left unqualified, the same rule made
   a real <a> inside a soon-tile read as dead -- which is exactly what the
   Publications tile needed once /pubs/ went public. A span in a soon-tile
   keeps this disabled look; an anchor gets the ordinary .lib-tile-go button. */
.lib-tile-soon span.lib-tile-go { background: none; color: var(--muted); border-color: var(--rule); cursor: default; }
.lib-tile-a11y { margin-top: 0.6rem; font-size: 0.72rem; color: var(--lib-gold-deep); display: flex; align-items: center; gap: 0.4rem; font-style: italic; }

/* ── Connected-record graph ── */
.lib-graph-wrap { margin-top: 3rem; border: 1px solid var(--rule); background: #faf7f0; padding: 1.5rem 1.5rem 1.25rem; }
.lib-graph-caption { font-family: var(--serif); font-style: italic; color: var(--muted); font-size: 0.92rem; margin-bottom: 1rem; }
.lib-graph-caption b { color: var(--accent); font-style: normal; font-weight: 700; }
.lib-tbl-title { font-family: var(--mono); font-weight: 600; font-size: 11.5px; letter-spacing: 0.04em; }
.lib-col-key { font-family: var(--mono); font-size: 11px; font-weight: 600; }
.lib-col-reg { font-family: var(--mono); font-size: 11px; }

/* ── Footer ── */
.lib-footer { border-top: 3px double var(--rule); background: var(--lib-navy); color: #c6cede; margin-top: 0; }
.lib-footer-inner { max-width: 1120px; margin: 0 auto; padding: 1.5rem 2.5rem; display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.lib-footer-hamburger { font-size: 1.3rem; color: #e8e2d4; }
.lib-footer-inner a { color: #c6cede; text-decoration: none; font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.3rem; }
.lib-footer-inner a:hover { color: #fff; }
.lib-footer-brand { font-family: var(--serif); color: #fff; font-size: 0.85rem; margin-right: auto; }
.lib-footer-inner .lib-soon { color: #7d8496; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.3rem; cursor: default; }

/* Wider-site link directory -- separate block from the library nav
   cluster above (.lib-footer-inner): that's this library's own tools,
   this is the rest of wvlegislature.gov. auto-fit/minmax reflows the
   column count on narrower viewports without a manual breakpoint, same
   pattern as .lib-tiles above. */
.lib-footer-directory {
  max-width: 1120px;
  margin: 0 auto;
  padding: 1.25rem 2.5rem;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem;
}
.lib-footer-col { display: flex; flex-direction: column; gap: 0.45rem; }
.lib-footer-col-title {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lib-gold);
  margin-bottom: 0.2rem;
}
.lib-footer-col a {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: #c6cede;
  text-decoration: none;
  line-height: 1.5;
}
.lib-footer-col a:hover { color: #fff; }

.lib-footer-note { max-width: 1120px; margin: 0 auto; padding: 0 2.5rem 1.4rem; font-size: 0.72rem; color: #8f97a8; line-height: 1.5; }


/* ============================================================================
   Sessions footnote panel -- sessions_browse.php
   Self-contained per the convention noted at :401-403 (per-app copies, no
   cross-project dependency). Structure mirrors .code-detail-* but adds a
   transform transition, so it must NOT share those rules -- editing the
   .code-detail-* block would change 1931code's panel too.

   Namespaced .sessions-footnote-* rather than .sessions-detail-*: that prefix
   is already taken by sessions_edit.php's form-field styles at :244-263.

   All visual values are copied from .code-detail-* (:410-435) via the same
   custom properties, so the two panels track theme changes together.
   ==========================================================================*/

.sessions-footnote-overlay {
  position: fixed; inset: 0;
  background: rgba(26,26,24,0.55);          /* copied literal, = --ink at 55% */
  z-index: 200;
  display: flex; align-items: flex-start; justify-content: flex-end;
  opacity: 0; visibility: hidden;
  transition: opacity .18s ease, visibility 0s linear .18s;
}
.sessions-footnote-overlay.open {
  opacity: 1; visibility: visible;
  transition: opacity .18s ease, visibility 0s;
}

.sessions-footnote-panel {
  background: var(--parchment);
  border-left: 3px double var(--rule);
  width: min(520px, 92vw);
  height: 100vh;                            /* fallback */
  height: 100dvh;                           /* avoids the iOS Safari toolbar clip */
  overflow-y: auto;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .22s ease;
}
.sessions-footnote-overlay.open .sessions-footnote-panel { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .sessions-footnote-overlay,
  .sessions-footnote-panel { transition: none; }
}

.sessions-footnote-head {
  padding: 1.5rem 2rem 1rem; border-bottom: 1px solid var(--rule);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  position: sticky; top: 0; background: var(--parchment); z-index: 10;
}
.sessions-footnote-id      { font-family: var(--serif); font-size: 1rem; font-weight: 700; color: var(--accent); }
.sessions-footnote-session { font-family: var(--serif); font-size: 1.2rem; line-height: 1.3; margin-top: 0.2rem; }
.sessions-footnote-close {
  background: none; border: 1px solid var(--rule); color: var(--muted);
  font-size: 1.1rem; cursor: pointer; padding: 0.2rem 0.6rem;
  flex-shrink: 0; font-family: var(--mono);
}
.sessions-footnote-close:hover { color: var(--accent); border-color: var(--accent); }
.sessions-footnote-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sessions-footnote-body { padding: 1.5rem 2rem; flex: 1; }
.sessions-footnote-text {
  font-family: var(--serif); font-size: 0.9rem; line-height: 1.8;
  color: var(--ink); margin: 0;
  /* Renders the \n the panel script inserts after each semicolon, so clauses
     sit on their own lines. pre-line breaks on newlines but still collapses
     runs of spaces, so no other whitespace behaviour changes. */
  white-space: pre-line;
}
.sessions-footnote-source {
  font-size: 0.73rem; color: var(--muted); line-height: 1.6;
  margin: 1.25rem 0 0; border-top: 1px solid var(--rule); padding-top: 0.75rem;
}

/* Trigger. .sessions-archive-table .sessions-footnote-ref (:205-209) already
   supplies border, padding, colour, size and spacing, and its 0-2-0 specificity
   beats a bare button selector -- so these rules are scoped the same way (0-2-1)
   and add ONLY what a <button> needs: the UA stylesheet's own font-family and
   background would otherwise override the badge look. */
.sessions-archive-table button.sessions-footnote-ref {
  font-family: inherit; line-height: inherit;
  background: none; cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 2px;
}
.sessions-archive-table button.sessions-footnote-ref:hover {
  color: var(--accent); border-color: var(--accent);
}
.sessions-archive-table button.sessions-footnote-ref:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}