/*
 * ═══════════════════════════════════════════════════════════════════════
 *  webpage_section_generic.css  —  Section / Document-Library base styles
 *  Daralbeida.com · DAB-VIS-CSS-SECT-GEN-003 · May 2026
 *
 *  WHO LOADS THIS
 *  ──────────────
 *  Every section page links it:  /darmaster/01/ … /darmaster/08/index.php
 *    · /02/–/07/  → per-section document lists   (LIGHT "paper" theme)
 *    · /01/ & /08/→ the cross-section Document Library / browser
 *                   (LIGHT here too — they add theme_section_dark.css
 *                    AFTER this file to switch to the charcoal theme)
 *
 *  ┌────────────────────────────────────────────────────────────────────┐
 *  │  THEME CONTRACT  ·  the ONLY place colour is decided                 │
 *  │  ----------------------------------------------------------------    │
 *  │  Nothing in the component blocks below uses a hard-coded colour.     │
 *  │  They paint exclusively with the --doc-* custom properties defined   │
 *  │  in SECTION 1. A "theme" is therefore just a different set of token  │
 *  │  VALUES — no rule edits required.                                    │
 *  │                                                                      │
 *  │   • Defaults in SECTION 1  = the original LIGHT theme.               │
 *  │   • theme_section_dark.css = re-declares the same tokens on :root    │
 *  │     and, loading later, wins → the page goes dark. Drop that <link>  │
 *  │     to dark-mode any page; remove it to return to light.             │
 *  └────────────────────────────────────────────────────────────────────┘
 *
 *  Aligned to DARX_TECH_HTML_STYLE_GUIDE (§2–4):
 *    Type   Cormorant Garamond (display) · Montserrat (body) · DM Mono (labels)
 *    Form   hairline borders · restrained effects · entity colour-coding
 *
 *  Modern CSS in use (graceful fallbacks throughout):
 *    · container queries (cqi) drive the spacious tile grid
 *    · color-mix() derives every tint, glow and faint shade from the tokens
 *    · CSS nesting keeps the component blocks self-contained
 *    · :has() powers the tile "spotlight" (dim siblings on hover)
 *    · scroll-driven view() timelines fade tiles in (only where supported)
 *    · a frosted (backdrop-filter) sticky control bar
 *
 *  SECTIONS
 *    1.  Theme contract (tokens)   ← edit here / override in a theme file
 *    2.  Body + page wrapper
 *    3.  Floating control header (browser only)
 *    4.  Checkbox filter menus
 *    5.  Search · segmented toggles · empty-state
 *    6.  Entity + department group headings
 *    7.  Tiles (the showcase grid)
 *    8.  List (compact)
 *    9.  Placeholder · motion safety · responsive
 * ═══════════════════════════════════════════════════════════════════════
 */


/* ═══════════════════════════════════════════════════════════════════════
   1. THEME CONTRACT  ·  every value below is overridable by a theme file
   ─────────────────────────────────────────────────────────────────────
   Default values = the LIGHT "paper" theme used by /02/–/07/.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Brand accents — identical in every theme ──────────────────────── */
  --doc-deep:   #1A4D6D;     /* deep blue  — labels, active fills          */
  --doc-gold:   #B8832A;     /* atlas gold — accents, highlights, glow     */

  /* ── Surfaces ──────────────────────────────────────────────────────── */
  --doc-bg:        var(--ivory, #F6F1E7);   /* page background             */
  --doc-surface:   #ffffff;                 /* card / tile fill            */
  --doc-surface-h: #ffffff;                 /* card fill on hover          */
  --doc-control:   #ffffff;                 /* search box · segments · summaries */
  --doc-panel:     #ffffff;                 /* dropdown panels             */
  --doc-tint:      #ffffff;                 /* "paper" colour that color-mix() blends toward */
  --doc-header-bg: color-mix(in srgb, var(--doc-deep) 94%, transparent); /* the floating control bar */

  /* ── Text ──────────────────────────────────────────────────────────── */
  --doc-text:       #28333A;   /* primary text                            */
  --doc-text-muted: #6B7A85;   /* secondary text, labels                  */
  --doc-text-faint: #9AA0A4;   /* captions, filenames, disabled           */
  --doc-title:      var(--doc-deep);   /* document / card titles           */
  --doc-active-fg:  #ffffff;   /* text on a deep-blue active chip          */

  /* ── Search-match highlight ────────────────────────────────────────── */
  --doc-mark-bg: color-mix(in srgb, var(--doc-gold) 40%, var(--doc-tint));
  --doc-mark-fg: var(--doc-text);

  /* ── Lines + shape ─────────────────────────────────────────────────── */
  --doc-rule:    #C8BFA8;   /* hairline borders                            */
  --doc-radius:  0;         /* corner radius (square in light; dark rounds it) */
}


/* ═══════════════════════════════════════════════════════════════════════
   2. BODY + PAGE WRAPPER
   ═══════════════════════════════════════════════════════════════════════ */
body {
  font-family: var(--font-sans, 'Inter', sans-serif);
  background: var(--doc-bg);
  color: var(--doc-text);
}

.section-main {
  max-width: 1080px;
  margin-inline: auto;
  padding: 12px clamp(20px, 4vw, 52px) 96px;
}
/* The legacy section title block is rendered by the per-section pages but the
   live context now lives in the control header's row 2 — keep it hidden. */
.section-eyebrow, .section-title, .section-desc, .section-rule { display: none; }


/* ═══════════════════════════════════════════════════════════════════════
   3. FLOATING CONTROL HEADER  (browser pages only)
   ─────────────────────────────────────────────────────────────────────
   Two rows pinned just under the main nav. position:fixed so it stays put
   while the page scrolls; the browser JS re-anchors it to the nav's real
   bottom and reserves matching top space on .section-main. It is also
   draggable vertically (see webpage_section_browser.js).
   ═══════════════════════════════════════════════════════════════════════ */
.doc-header {
  position: fixed;
  top: calc(var(--nav-h, 48px) + 5px);   /* JS re-anchors to the nav's true bottom */
  left: 0;
  right: 0;
  z-index: 200;
  padding-inline: clamp(20px, 4vw, 52px);
  background: var(--doc-header-bg);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  backdrop-filter: blur(8px) saturate(1.1);
  border-top: 1px solid color-mix(in srgb, #fff 16%, transparent);  /* faint highlight; bar is dark in all themes */
  border-bottom: 1px solid color-mix(in srgb, var(--doc-gold) 45%, transparent);
  box-shadow: 0 8px 22px -8px rgba(0, 0, 0, .45);
  cursor: grab;
  touch-action: none;              /* enable pointer dragging on touch */
}
.doc-header.dragging { cursor: grabbing; user-select: none; }

.dh-row { display: flex; align-items: center; max-width: 1080px; margin-inline: auto; }

/* The control bar is always dark (blue/charcoal), so the few elements that sit
   directly on it use light text regardless of the page theme. */
.doc-header .doc-search-info { color: rgba(246, 241, 231, 0.72); }
.doc-header .dh-legend       { color: rgba(246, 241, 231, 0.80); }
.doc-header .dh-legend svg   { color: #D4A574; }
.doc-header .dh-ctx {
  color: rgba(246, 241, 231, 0.92);
  border-left-color: color-mix(in srgb, var(--ent) 55%, #fff);   /* lighten entity colour for the dark bar */
}
/* On the dark bar an active chip turns GOLD (a deep-blue fill would vanish). */
.doc-header .seg > button.is-active {
  background: var(--doc-gold);
  color: #221700;
}
.doc-header .seg > button:not(.is-active):hover { color: rgba(246, 241, 231, 0.92); }
.doc-header .cbx[open] > summary {
  background: var(--doc-gold);
  color: #221700;
  border-color: var(--doc-gold);
}
.doc-header .cbx[open] > summary::after { color: rgba(34, 23, 0, .6); }

/* Drag-handle hint on row 2 */
.dh-context::before {
  content: '\2807';                /* ⠇ grip dots */
  margin-right: 6px;
  font-size: var(--ui-fs-label);
  color: rgba(246, 241, 231, 0.45);
}

/* Row 1 — controls */
.dh-controls { flex-wrap: wrap; gap: 5px; padding: 4px 0; }

/* Row 2 — live entity context (scroll-spy), gold/entity accent bar */
.dh-context { --ent: var(--doc-gold); padding: 2px 0 3px; }
.dh-ctx {
  display: inline-flex;
  align-items: center;
  min-height: 11px;
  max-width: 100%;
  font-family: var(--font-mono, 'Victor Mono', monospace);
  font-size: var(--ui-fs-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-left: 8px;
  border-left: 3px solid var(--ent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Purpose legend */
.dh-legend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono, 'Victor Mono', monospace);
  font-size: var(--ui-fs-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--doc-text-muted);
  white-space: nowrap;
}
.dh-legend svg { width: 11px; height: 11px; color: var(--doc-gold); }

.ctrl-cluster { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* The inline per-group entity labels are hidden — the live one shows in row 2. */
.doc-views .doc-section-label { display: none; }


/* ═══════════════════════════════════════════════════════════════════════
   4. CHECKBOX FILTER MENUS  (Section / Entity / Department)
   ─────────────────────────────────────────────────────────────────────
   Native <details> popovers; no JS needed to open/close.
   ═══════════════════════════════════════════════════════════════════════ */
.cbx { position: relative; }
.cbx > summary {
  list-style: none;
  font-family: var(--font-mono, 'Victor Mono', monospace);
  font-size: var(--ui-fs-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--doc-text-muted);
  background: var(--doc-control);
  border: 1px solid var(--doc-rule);
  border-radius: var(--doc-radius);
  min-height: 19px;
  padding: 3px 7px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  user-select: none;
}
.cbx > summary::-webkit-details-marker { display: none; }
.cbx > summary::after { content: '▾'; font-size: var(--ui-fs-micro); color: var(--doc-text-faint); }
.cbx[open] > summary { color: var(--doc-active-fg); background: var(--doc-deep); border-color: var(--doc-deep); }
.cbx[open] > summary::after { color: color-mix(in srgb, var(--doc-active-fg) 70%, transparent); }

.cbx-panel {
  position: absolute;
  z-index: 50;
  top: calc(100% + 4px);
  left: 0;
  min-width: 190px;
  max-height: min(340px, calc(100vh - 120px));  /* constrain to viewport, reserve 120px for chrome */
  overflow-y: scroll;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px;
  background: var(--doc-panel);
  border: 1px solid var(--doc-rule);
  border-radius: var(--doc-radius);
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, .3);
}
.cbx-acts {
  display: flex;
  gap: 6px;
  padding-bottom: 7px;
  margin-bottom: 3px;
  border-bottom: 1px solid var(--doc-rule);
}
.cbx-acts button {
  font-family: var(--font-mono, 'Victor Mono', monospace);
  font-size: var(--ui-fs-micro);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--doc-text-muted);
  background: transparent;
  border: 1px solid var(--doc-rule);
  border-radius: var(--doc-radius);
  padding: 3px 9px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.cbx-acts button:hover { color: var(--doc-gold); border-color: var(--doc-gold); }  /* gold reads on light + dark */
.cbx-panel label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 4px;
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: var(--ui-fs-label);
  font-weight: 500;
  color: var(--doc-text);
  white-space: nowrap;
  cursor: pointer;
}
.cbx-panel label:hover { background: color-mix(in srgb, var(--doc-gold) 12%, var(--doc-tint)); }
.cbx-panel input[type="checkbox"] { accent-color: var(--doc-gold); width: 13px; height: 13px; }


/* ═══════════════════════════════════════════════════════════════════════
   5. SEARCH · SEGMENTED TOGGLES · EMPTY-STATE
   ═══════════════════════════════════════════════════════════════════════ */
.doc-search-wrap {
  flex: 1 1 230px;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.doc-search {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: var(--ui-fs-label);
  font-weight: 600;
  color: var(--doc-text);
  background: var(--doc-control);
  border: 1px solid var(--doc-rule);
  border-radius: var(--doc-radius);
  padding: 3px 8px;
  min-height: 20px;
  transition: border-color .15s ease;
}
.doc-search::placeholder { color: var(--doc-text-faint); font-weight: 500; }
.doc-search:focus { outline: none; border-color: var(--doc-gold); }
.doc-search-info {
  flex: 0 0 auto;
  font-family: var(--font-mono, 'Victor Mono', monospace);
  font-size: var(--ui-fs-micro);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--doc-text-muted);
  white-space: nowrap;
}

/* Match snippet (replaces the purpose blurb while searching, tiles only) */
.doc-views.is-searching .doc-card-purpose { display: none; }
.doc-card-snippet {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: var(--ui-fs-label);
  font-weight: 300;
  line-height: 1.55;
  color: var(--doc-text);
  margin-top: 9px;
}
.doc-card-snippet mark {
  background: var(--doc-mark-bg);
  color: var(--doc-mark-fg);
  padding: 0 1px;
}
.doc-views[data-view="list"] .doc-card-snippet { display: none; }

/* Empty-state when filters exclude everything */
.doc-empty {
  font-family: var(--font-mono, 'Victor Mono', monospace);
  font-size: var(--ui-fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--doc-text-muted);
  text-align: center;
  padding: 40px 10px;
  border: 1px dashed var(--doc-rule);
  margin-top: 8px;
}

/* Segmented toggles — file-type (HTML/TXT) and view (tiles/list) */
.seg {
  display: inline-flex;
  background: var(--doc-control);
  border: 1px solid var(--doc-rule);
  border-radius: var(--doc-radius);

  & > button {
    appearance: none;
    font-family: var(--font-mono, 'Victor Mono', monospace);
    font-size: var(--ui-fs-micro);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--doc-text-faint);
    background: transparent;
    border: 0;
    min-height: 19px;
    padding: 3px 7px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;

    & svg { width: 11px; height: 11px; }
    &:not(.is-active):hover { color: var(--doc-deep); }
    &.is-active { color: var(--doc-active-fg); background: var(--doc-deep); }
  }
  & > button + button { border-left: 1px solid var(--doc-rule); }
}
.seg-view > button { padding-inline: 8px; }   /* icon-only, tighter */


/* ═══════════════════════════════════════════════════════════════════════
   6. ENTITY + DEPARTMENT GROUP HEADINGS
   ═══════════════════════════════════════════════════════════════════════ */
.doc-entity { margin-top: 22px; }
.doc-entity:first-of-type { margin-top: 0; }

.doc-section-label {
  font-family: var(--font-mono, 'Victor Mono', monospace);
  font-size: var(--ui-fs-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--doc-deep);
  padding: 3px 0 6px 11px;
  border-left: 3px solid var(--ent, var(--doc-gold));
  border-bottom: 1px solid var(--doc-rule);
  margin-bottom: 4px;

  & .doc-ec { color: var(--ent, var(--doc-gold)); }
}

.doc-subcat-label {
  font-family: var(--font-mono, 'Victor Mono', monospace);
  font-size: var(--ui-fs-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--doc-text-muted);
  margin: 12px 0 7px;
  padding-left: 14px;
}


/* ═══════════════════════════════════════════════════════════════════════
   7. TILES — SPACIOUS (the showcase)
   ─────────────────────────────────────────────────────────────────────
   Container queries scale the grid + type to the column's own width.
   ═══════════════════════════════════════════════════════════════════════ */
.doc-views { container: docs / inline-size; }

.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, clamp(258px, 30cqi, 340px)), 1fr));
  gap: clamp(14px, 1.8cqi, 22px);
  margin-top: 6px;
}

.doc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--doc-surface);
  border: 1px solid var(--doc-rule);
  border-left: 3px solid color-mix(in srgb, var(--ent, var(--doc-gold)) 38%, transparent);
  border-radius: var(--doc-radius);
  padding: clamp(16px, 2cqi, 22px);
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, background .18s ease, box-shadow .3s ease, opacity .25s ease, filter .25s ease, translate .18s ease;
}
.doc-card:hover,
.doc-card:focus-visible {
  background: var(--doc-surface-h);
  border-color: var(--ent, var(--doc-gold));
  box-shadow:
    0 -4px 14px -5px color-mix(in srgb, var(--ent, var(--doc-gold)) 60%, transparent),
    0  7px 20px -5px color-mix(in srgb, var(--ent, var(--doc-gold)) 60%, transparent);
  z-index: 2;
  outline: none;
}

/* Title — Cormorant display serif */
.doc-card-title {
  font-family: var(--font-body, 'Fraunces', Georgia, serif);
  font-size: var(--ui-fs-display);
  font-weight: 600;
  line-height: 1.2;
  color: var(--doc-title);
  text-wrap: balance;
  padding-right: 46px;   /* clear the corner icons */
}

/* Description — PURPOSE AND SCOPE snippet (Montserrat body) */
.doc-card-purpose {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-weight: 300;
  font-size: var(--ui-fs-label);
  line-height: 1.55;
  color: var(--doc-text-muted);
  text-wrap: pretty;
  margin-top: 9px;
}

/* Meta — date · size, pinned to the card foot */
.doc-card-meta {
  font-family: var(--font-mono, 'Victor Mono', monospace);
  font-size: var(--ui-fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--doc-text-faint);
}
.doc-meta-full    { margin-top: auto; padding-top: 13px; }
.doc-meta-compact { display: none; }

.doc-card-file {
  font-family: var(--font-mono, 'Victor Mono', monospace);
  font-size: var(--ui-fs-micro);
  color: color-mix(in srgb, var(--doc-text-faint) 75%, var(--doc-tint));
  margin-top: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.doc-card-arrow {
  align-self: flex-start;
  font-size: var(--ui-fs-value);
  color: var(--ent, var(--doc-gold));
  opacity: .35;
  margin-top: 9px;
  transition: opacity .15s ease, translate .15s ease;
}
.doc-card:hover .doc-card-arrow { opacity: 1; translate: 3px 0; }

/* Icons — corner cluster in tiles */
.doc-icons {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-end: 16px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.doc-ico { display: inline-flex; line-height: 0; }
.doc-ico-type    { color: var(--doc-text-muted); }
.doc-ico-purpose { color: var(--doc-gold); }
.doc-ico-purpose.is-off { color: color-mix(in srgb, var(--doc-rule) 70%, var(--doc-tint)); }

/* :has() spotlight — hovering one tile gently recedes the others */
@media (hover: hover) {
  .doc-views[data-view="tiles"] .doc-grid:has(.doc-card:hover) .doc-card:not(:hover) {
    opacity: .5;
    filter: saturate(.85);
  }
}

/* Scroll-driven entrance for tiles (only where the engine supports it) */
@keyframes doc-rise { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .doc-views[data-view="tiles"] .doc-card {
      animation: doc-rise linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 12%;
    }
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   8. LIST — COMPACT
   ═══════════════════════════════════════════════════════════════════════ */
.doc-views[data-view="list"] {
  & .doc-grid { display: block; margin-top: 0; }

  & .doc-card {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 5px 13px;
    margin-top: -1px;              /* collapse adjoining hairlines */
    border-radius: 0;              /* rows read better square, even in dark */
  }
  & .doc-card-title {
    font-size: var(--ui-fs-value);
    line-height: 1.35;
    padding-right: 0;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  & .doc-meta-full,
  & .doc-card-purpose,
  & .doc-card-file { display: none; }
  & .doc-meta-compact {
    display: block;
    flex: 0 0 auto;
    text-align: right;
    font-size: var(--ui-fs-micro);
    color: color-mix(in srgb, var(--doc-text-faint) 85%, var(--doc-tint));
  }
  & .doc-card-arrow { margin-top: 0; align-self: center; flex: 0 0 auto; }
  & .doc-icons { position: static; flex: 0 0 auto; gap: 10px; }
}

/* List hover bubble — the Purpose & Scope preview.
   The bubble is a deep-blue popover in BOTH themes, so its text stays a fixed
   light ivory (a themed --doc-text would be dark on the light pages).
   Trigger: ONLY when the info logotype (ⓘ) in the row is hovered — not the
   whole row — so the bubble no longer pops up on a casual row pass. */
.doc-views[data-view="list"] .doc-card[data-purpose]:has(.doc-ico-info:hover)::after {
  content: attr(data-purpose);
  position: absolute;
  inset-inline-start: 16px;
  inset-block-start: calc(100% + 5px);
  z-index: 60;
  inline-size: min(560px, 90%);
  padding: 11px 14px;
  background: var(--doc-deep);
  color: #F3ECDD;
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-weight: 300;
  font-size: var(--ui-fs-label);
  line-height: 1.55;
  letter-spacing: .2px;
  text-transform: none;
  border: 1px solid color-mix(in srgb, var(--doc-gold) 55%, transparent);
  box-shadow: 0 10px 26px -6px rgba(0, 0, 0, .42);
  pointer-events: none;
  white-space: normal;
}


/* ═══════════════════════════════════════════════════════════════════════
   9. PLACEHOLDER · MOTION SAFETY · RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */
.doc-placeholder {
  grid-column: 1 / -1;
  padding: 48px 24px;
  text-align: center;
  border: 1px dashed var(--doc-rule);

  & p {
    font-family: var(--font-mono, 'Victor Mono', monospace);
    font-size: var(--ui-fs-label);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--doc-text-muted);
  }
}

@media (prefers-reduced-motion: reduce) {
  .doc-card,
  .doc-card-arrow { transition: none; }
}

@media (max-width: 720px) {
  .section-main { padding: 14px 22px 80px; }
}