/* ── 3-FONT SYSTEM (remote · Google Fonts) ─────────────────────────────────
   Scoped to /01 + /08 by living in THIS stylesheet (loaded only here, AFTER
   type_system.css, so these win). One serif, one sans, one mono — replacing the
   prior mix of Fraunces / Inter / IBM Plex Mono / Cascadia Code / JetBrains /
   DM Mono. Everything that reads var(--type-*) updates automatically.
     · Serif  = Literata       → document titles
     · Sans   = Roboto         → UI, labels, chips, descriptions
     · Mono   = JetBrains Mono → IDs, version, numbers, dates, filenames, search */
:root {
  /* 2026-06-25 (user) UNIFY: titles ride the TITLE font (Bricolage), UI the sans
     (Inter), code the mono (Victor) — one source = tokens.css --font-*. */
  --type-serif: var(--font-title);  /* doc/card titles → title font (Bricolage) */
  --type-sans:  var(--font-sans);   /* UI / labels / descriptions → sans (Inter) */
  --type-mono:  var(--font-mono);   /* IDs / numbers / dates → mono (Victor) */
  /* ANTI-FLASH defaults for the fixed toolbar layout. The JS refines both to
     the real measured heights after load, but these desktop-accurate seeds let
     the page PAINT in the right place on first render (no "shaken" reflow):
       --nav-h-real   = the nav's true two-row height → the toolbar's `top`.
       --doc-toolbar-h = the toolbar's own height → .section-main padding-top,
                         so the document list starts flush below it. */
  --nav-h-real: 94px;
  --doc-toolbar-h: 110px;
}
/* The shared base (darx_tokens.css) forces body:not(.has-chrome) → Inter via
   --f-landing, and :not() out-specifies type_system's plain body rule. Re-point
   it at the sans token so everything that inherits the body font (chips, etc.)
   is Roboto too. */
body:not(.has-chrome) { font-family: var(--type-sans); }

/* ============================================================================
   webpage_section_browser.css
   Page-specific layout + theme for the /01/ Document Library browser.
   Linked ONLY by /darmaster/01/index.php (loaded LAST, so it wins on source order).

   Design goals (robust at ANY width, not pixel-tuned for one viewport):
     1. CONTROL BAR = a real TWO-ROW header.
          Row 1 = the search field (grows to fill the row) + result count.
          Row 2 = the filter cluster (Section · Entity · Department · type ·
                  purpose · view), which WRAPS gracefully if space is tight.
        Built with flexbox so the search never gets crushed into a tiny box.
     2. DOCUMENT LIST (List view) = a clean columned table: Type · Document ·
        Date. The whole row is a link, so there is no per-row arrow column
        (it used to collide with the date). A column-header row labels it.
   Keep page-specific tweaks here instead of inline <style>.
   ============================================================================ */

/* Shared column template — the header row AND every item row use it, so the
   columns line up perfectly. document title | icons (type + scope). No date. */
:root { --doc-cols: minmax(0, 1fr) 64px; }

/* ---- Width: cap the whole browser to a centred column.
   The cluster row needs ~650px to fit the count + 6 tool icons + age group
   + 3 dropdowns + reset on a SINGLE line (per user: "I want my toolbar on
   2 rows"). Bumping the cap to 720px gives the toolbar enough breathing
   room while still reading as a centred column on wide viewports. The
   listing matches so the rows line up edge-to-edge with the toolbar. */
.dh-row       { max-width: 720px; }
.section-main { max-width: 720px; padding-left: 20px; padding-right: 20px; }
/* Clear the FIXED toolbar from first paint (JS refines to the exact height) —
   but ONLY when a toolbar is actually rendered. Empty libraries (no documents)
   have no toolbar, so they must NOT reserve phantom space below the nav. The
   body.lib-has-toolbar class is set by index.php when total > 0. */
body.lib-has-toolbar .section-main { padding-top: var(--doc-toolbar-h, 110px); }
/* The control bar sits at the 720-column edges, but the listing would otherwise
   be inset by section-main's side padding. Cancel it so the rows are exactly as
   wide as the toolbar (their edges meet the control bar's edges). */
.doc-views { margin-left: -20px; margin-right: -20px; }


/* ════════════════════════════════════════════════════════════════════════
   1. SEARCH FIELD (blue) + dedicated outer clear button
   ────────────────────────────────────────────────────────────────────────
   Field spans the WHOLE row (the count moved to row 2). The clear button
   (×) lives OUTSIDE the field — a small blue chip immediately after it —
   so the input is never crowded by an inline glyph.
   ════════════════════════════════════════════════════════════════════════ */
/* Search field — capped width so it never sprawls across the toolbar and
   pushes the doc-counter to the far-left edge. flex grows it up to the cap,
   then stops; the wrap's flex-end packs everything tight to the right.    */
.doc-search-field {
  position: relative;
  display: flex;
  flex: 1 1 320px;
  max-width: 380px;
  min-width: 200px;
}
.doc-search-field .doc-search {
  width: 100%;
  height: 24px; box-sizing: border-box;   /* match the Row-3 control height — nothing taller (user 2026-06-24) */
  padding: 0 10px;
  background: #1A4D6D;                    /* blue fill (matches the tool buttons) */
  color: #F6F1E7;                         /* ivory text — high contrast on blue (~7.7:1) */
  caret-color: #F6F1E7;
  border: 1px solid rgba(246, 241, 231, 0.22);
  border-radius: var(--doc-radius, 4px);
  font-family: var(--type-mono, 'IBM Plex Mono', monospace);
  font-size: var(--ui-fs-label);
  font-weight: 700;
  font-style: italic;
}
/* Placeholder: BOLD ITALIC, same family/size as the typed text. */
.doc-search-field .doc-search::placeholder {
  color: rgba(246, 241, 231, 0.62);
  font-weight: 700;
  font-style: italic;
}
.doc-search-field .doc-search:focus { outline: none; border-color: var(--doc-gold); }
.doc-search-field .doc-search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* TYPING STATE — when the field is focused OR has a value, FLIP to ivory bg
   + charcoal text so the typed query reads with maximum contrast (the dark
   blue is hard to read your own typing on). */
.doc-search-field .doc-search:focus,
.doc-search-field .doc-search:not(:placeholder-shown) {
  background: #F6F1E7;
  color: #28333A;
  caret-color: #28333A;
  border-color: var(--doc-gold);
}
.doc-search-field .doc-search:focus::placeholder {
  color: rgba(40, 51, 58, 0.45);   /* charcoal-at-45% — visible while focused-empty */
}

/* ── SEARCH HISTORY DROPDOWN ─────────────────────────────────────────
   Hangs from .doc-search-field as an absolutely-positioned popover.
   Shows the most-recent N saved queries in chronological order (newest
   first). Appears when the field is focused; click any entry to re-run.
   Premium dark-blue popover with a gold left edge and small per-row
   timestamps. */
.doc-search-history{
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 1100;
  max-height: 320px;
  overflow-y: auto;
  background: linear-gradient(180deg, #11202B 0%, #0C1A24 100%);
  border: 1px solid rgba(184, 131, 42, 0.45);
  border-left: 3px solid var(--doc-gold);
  border-radius: 4px;
  box-shadow: 0 16px 32px -8px rgba(0, 0, 0, .55),
              0 2px 6px rgba(0, 0, 0, .35);
  font-family: var(--type-mono, 'IBM Plex Mono', monospace);
}
.doc-search-history[hidden]{ display: none; }
.dsh-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px 7px;
  border-bottom: 1px solid rgba(246, 241, 231, 0.10);
}
.dsh-label{
  font-size: var(--ui-fs-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(246, 241, 231, 0.55);
}
.dsh-clear{
  background: transparent;
  border: 1px solid rgba(246, 241, 231, 0.20);
  border-radius: 2px;
  padding: 2px 8px;
  font-family: inherit;
  font-size: var(--ui-fs-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(246, 241, 231, 0.55);
  cursor: pointer;
  transition: color .12s, border-color .12s;
}
.dsh-clear:hover{ color: var(--doc-gold); border-color: var(--doc-gold); }
.dsh-list{
  display: flex;
  flex-direction: column;
  padding: 4px 0;
}
/* Row container — pairs the clickable item (re-run) with a small × chip
   (remove). Hover treatment lives on the row so item + del light up
   together; the del's :hover still gets its own accent. */
.dsh-row{
  display: flex;
  align-items: stretch;
  gap: 0;
  border-left: 2px solid transparent;
  transition: background .1s ease, border-color .1s ease;
}
.dsh-row:hover,
.dsh-row:focus-within{
  background: rgba(184, 131, 42, 0.14);
  border-left-color: var(--doc-gold);
}
.dsh-item{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  background: transparent;
  border: none;
  text-align: left;
  font-family: inherit;
  font-size: var(--ui-fs-label);
  font-weight: 700;
  font-style: italic;
  color: rgba(246, 241, 231, 0.88);
  cursor: pointer;
  transition: color .1s ease;
}
.dsh-row:hover .dsh-item,
.dsh-item:focus-visible{
  color: #F6F1E7;
  outline: none;
}
/* Per-row delete button — small navy × that turns red on hover so the
   destructive action reads clearly. Visible only on row hover/focus so
   the resting state stays clean. */
.dsh-del{
  flex: 0 0 auto;
  align-self: center;
  width: 22px; height: 22px;
  margin: 0 8px 0 0;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  color: rgba(246, 241, 231, 0.45);
  font-family: inherit;
  font-size: var(--ui-fs-value);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease, color .12s ease,
              background .12s ease, border-color .12s ease;
}
.dsh-row:hover .dsh-del,
.dsh-row:focus-within .dsh-del,
.dsh-del:focus-visible{
  opacity: 1;
}
.dsh-del:hover,
.dsh-del:focus-visible{
  background: rgba(192, 57, 43, 0.18);
  border-color: rgba(192, 57, 43, 0.55);
  color: #F2C5BD;
  outline: none;
}
.dsh-q{ flex: 1 1 auto; word-break: break-word; }
.dsh-when{
  flex: 0 0 auto;
  font-style: normal;
  font-size: var(--ui-fs-micro);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(246, 241, 231, 0.40);
}
.dsh-icon{
  flex: 0 0 auto;
  color: var(--doc-gold);
  font-size: var(--ui-fs-label);
}
.dsh-empty{
  padding: 14px 12px;
  font-style: italic;
  font-size: var(--ui-fs-label);
  color: rgba(246, 241, 231, 0.45);
  text-align: center;
}


/* OUTER clear button — same blue chip as the tool buttons, sits beside the field.
   Clears the search term only (filters/view are reset by the Reset-all tool). */
.doc-search-clear-outer {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; min-width: 26px; height: 24px; padding: 0;
  border: 1px solid rgba(246, 241, 231, 0.10);
  border-radius: 3px;
  background: #1A4D6D;
  color: rgba(246, 241, 231, 0.92);
  font-family: var(--type-mono, 'IBM Plex Mono', monospace);
  font-size: var(--ui-fs-value);
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.doc-search-clear-outer:hover { background: #225D82; }
.doc-search-clear-outer:focus-visible { outline: 2px solid var(--doc-gold); outline-offset: 1px; }
/* Subtle when the field is empty, full ivory when it has text (set by JS). */
.doc-search-clear-outer:not(.is-active) { opacity: .55; }
.doc-search-clear-outer.is-active { opacity: 1; box-shadow: inset 3px 0 0 0 var(--doc-gold); }

/* ── EXPORT BUTTON — generates a plain-text manifest of the visible cards.
   Styled like the other row-1 chips but with a permanent gold-edge accent
   to read as a "premium" action button (always available). */
.doc-export-btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; min-width: 28px; height: 24px; padding: 0;
  border: 1px solid rgba(184, 131, 42, 0.45);   /* faint gold border */
  border-radius: 3px;
  background: linear-gradient(180deg, #1A4D6D 0%, #16415D 100%);
  color: var(--doc-gold);                        /* gold glyph */
  cursor: pointer;
  position: relative;
  transition: background .18s ease, color .18s ease,
              box-shadow .18s ease, transform .12s ease;
}
.doc-export-btn:hover {
  background: linear-gradient(180deg, #225D82 0%, #1B4F70 100%);
  color: #F6F1E7;
  box-shadow: inset 3px 0 0 0 var(--doc-gold),
              0 1px 3px rgba(0, 0, 0, .35);
}
.doc-export-btn:focus-visible { outline: 2px solid var(--doc-gold); outline-offset: 1px; }
.doc-export-btn:active { transform: translateY(1px); }
/* Brief gold flash to confirm the click triggered the download. */
.doc-export-btn.is-flash { background: var(--doc-gold); color: #28333A; }
.doc-export-btn svg { width: 13px; height: 13px; }
.doc-export-btn .dtool-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── LIVE COUNT READOUT — TWO-PART BORDERED FRAME ────────────────────
   The element is now ONE rectangular bordered frame containing two
   pieces side by side:

       ┌──────────┬─────────────────┐
       │   121    │   documents     │
       └──────────┴─────────────────┘
        (LED face)   (caption)

     ┌─ .doc-search-info-pill ───────────────────────────────────────
     │  Outer rectangle: gold-edge border + brushed-metal background.
     │  Holds two children: .ci-num (the LED counter face) on the left
     │  and .ci-label (the lowercase word "documents", "matches",
     │  "Searching…", etc.) on the right.  The two slots are
     │  separated by a hairline vertical rule.
     │
     │  ┌─ .ci-num ────────────────────────────────────────────────
     │  │  Recessed dark navy panel with a scanline overlay; amber
     │  │  glowing digits in Cascadia Code Bold (using JetBrains
     │  │  Mono Bold as the self-hosted stand-in until a Cascadia
     │  │  .woff2 is dropped at /css/fonts/cascadiacode-bold.woff2).
     │  │  Heartbeat pulse every 4 s; flash tick on count change.
     │  │
     │  └─ .ci-label ───────────────────────────────────────────────
     │     Inter caps, sits in the brushed-metal area to the right.
     │     Light/medium contrast so the numeral remains the focal
     │     point of the readout.                                  */
.doc-search-info-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  height: 28px;
  padding: 0;
  /* OUTER FRAME — brushed-metal feel, gold edge, no inner panel chrome
     (that lives on .ci-num now). The frame holds both number and label
     in one bordered rectangle. */
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--doc-gold) 8%, #11202B) 0%,
              color-mix(in srgb, var(--doc-gold) 4%, #0C1A24) 100%);
  border: 1px solid color-mix(in srgb, var(--doc-gold) 75%, transparent);
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(246, 241, 231, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 0 0 1px rgba(0, 0, 0, 0.40),
    0 0 10px -2px color-mix(in srgb, var(--doc-gold) 40%, transparent),
    0 1px 2px rgba(0, 0, 0, 0.30);
  color: #FFE9B5;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition:
    box-shadow .25s ease,
    border-color .25s ease;
}

/* ── NUMBER SIDE (LED face) ───────────────────────────────────────────
   The recessed dark-navy panel with scanline overlay, amber glowing
   digits in Cascadia Code Bold. The font stack puts Cascadia Code first
   so that as soon as a self-hosted .woff2 lands at
   /darmaster/css/fonts/cascadiacode-bold.woff2 (with the corresponding
   @font-face block in fonts.css) the swap is automatic. Until then the
   browser falls through to JetBrains Mono Bold — a close design cousin
   already self-hosted. */
.doc-search-info-pill .ci-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  min-width: 56px;
  /* Recessed panel — black core with subtle scanline glass. */
  background-image:
    repeating-linear-gradient(0deg,
      rgba(168, 119, 38, 0.06) 0 1px,
      transparent 1px 3px),
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.62) 0%,
      rgba(8, 18, 28, 0.92) 100%);
  background-color: #07111A;
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.75),
    inset 0 -1px 0 rgba(246, 241, 231, 0.06);
  /* Divider rail to the label side. */
  border-right: 1px solid color-mix(in srgb, var(--doc-gold) 55%, transparent);
  /* Cascadia Code Bold preferred; JetBrains Mono Bold is the self-hosted
     substitute (see fonts.css). IBM Plex Mono is the deeper fallback. */
  font-family: var(--type-mono);
  font-weight: 700;
  font-size: var(--ui-fs-value);
  letter-spacing: 0.04em;
  color: #FFE9B5;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  /* LED glow text-shadow stack at rest. */
  text-shadow:
    0 0 5px color-mix(in srgb, var(--doc-gold) 90%, transparent),
    0 0 12px color-mix(in srgb, var(--doc-gold) 55%, transparent),
    0 0 1px rgba(255, 255, 255, 0.45);
  position: relative;
  transition: color .25s ease, text-shadow .25s ease;
}

/* ── LABEL SIDE (caption — "documents", "matches", etc.) ──────────────
   Lives outside the LED panel but inside the same bordered frame, so
   the two pieces read as one unit. */
.doc-search-info-pill .ci-label {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  font-family: var(--type-sans);
  font-size: var(--ui-fs-label);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--doc-gold) 60%, #F6F1E7);
  white-space: nowrap;
}
/* Status states (no leading number) — single label that fills the
   whole frame. */
.doc-search-info-pill .ci-label-only {
  padding: 0 14px;
  color: color-mix(in srgb, var(--doc-gold) 75%, #F6F1E7);
  font-style: italic;
}

/* Idle pulse — every 4 s the LED face brightens by a notch. */
@keyframes ledHeartbeat {
  0%, 92%, 100% {
    text-shadow:
      0 0 5px color-mix(in srgb, var(--doc-gold) 90%, transparent),
      0 0 12px color-mix(in srgb, var(--doc-gold) 55%, transparent),
      0 0 1px rgba(255, 255, 255, 0.45);
  }
  94%, 98% {
    text-shadow:
      0 0 7px color-mix(in srgb, var(--doc-gold) 100%, transparent),
      0 0 18px color-mix(in srgb, var(--doc-gold) 75%, transparent),
      0 0 2px rgba(255, 255, 255, 0.70);
  }
}
/* Tick — JS adds .is-ticking on the OUTER pill when the count updates;
   we use the descendant selector so the LED-face glyphs flash without
   touching the brushed-metal frame's border. */
@keyframes ledTick {
  0% {
    color: #FFE9B5;
  }
  18% {
    color: #FFF6D8;
    text-shadow:
      0 0 8px color-mix(in srgb, var(--doc-gold) 100%, white),
      0 0 22px color-mix(in srgb, var(--doc-gold) 85%, transparent),
      0 0 3px rgba(255, 255, 255, 0.75);
  }
  100% {
    color: #FFE9B5;
  }
}
.doc-search-info-pill.is-ticking .ci-num {
  animation: ledTick .42s cubic-bezier(.4, 0, .2, 1);
}

/* Hover on the frame — brighten the frame's gold edge + halo, AND
   brighten the LED face glow. Reads as one unit. */
.doc-search-info-pill:hover {
  border-color: var(--doc-gold);
  box-shadow:
    inset 0 1px 0 rgba(246, 241, 231, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.36),
    0 0 0 1px var(--doc-gold),
    0 0 18px -2px color-mix(in srgb, var(--doc-gold) 70%, transparent),
    0 1px 2px rgba(0, 0, 0, 0.35);
}
.doc-search-info-pill:hover .ci-num {
  color: #FFF6D8;
  text-shadow:
    0 0 8px color-mix(in srgb, var(--doc-gold) 100%, transparent),
    0 0 20px color-mix(in srgb, var(--doc-gold) 80%, transparent),
    0 0 3px rgba(255, 255, 255, 0.75);
}
.doc-search-info-pill:hover .ci-label {
  color: color-mix(in srgb, var(--doc-gold) 85%, #F6F1E7);
}

@media (prefers-reduced-motion: reduce){
  .doc-search-info-pill .ci-num,
  .doc-search-info-pill.is-ticking .ci-num {
    animation: none;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   2. CONTROL BAR — two flex rows + a full-height drag-grip on the left
   ────────────────────────────────────────────────────────────────────────
   flex-wrap lets each child claim a full-width "row"; the filter cluster
   wraps internally instead of crushing the search into an unusable sliver.
   The header gets a left padding equal to the grip's width so the rows are
   not covered by it.
   ════════════════════════════════════════════════════════════════════════ */
.doc-header {
  /* ONE BLOCK WITH THE NAV — the toolbar is FIXED directly beneath the nav and
     shares the nav's smart-chrome slide, so the two move together as a single
     unit: scroll down and both tuck away; scroll up (or hit the top) and both
     return. Fixed (not sticky) so the nav's flow/visual height mismatch can't
     drag the toolbar up into it. --nav-h-real is the nav's TRUE rendered height
     (kept current by the JS ResizeObserver); the static --nav-h under-reports
     the two-row height. The matching slide lives in skin.css §8a. */
  position: fixed;
  top: var(--nav-h-real, var(--nav-h, 60px));
  left: 0;
  right: 0;
  z-index: 1000;
  cursor: default;
  transition: transform .25s ease;   /* matches .darx-nav's slide timing */
  /* PREMIUM LOOK — deeper gradient that reads as "machined console panel"
     instead of flat slab. Top has a subtle warm-blue glow (the panel is
     "lit from above"); bottom darkens to suggest depth. Inset highlight on
     top + gold hairline on the bottom edge frame the unit. */
  background:
    linear-gradient(180deg,
      rgba(48, 78, 100, 0.22) 0%,
      rgba(20, 38, 52, 0.16) 35%,
      rgba(0,  0,  0,  0.22) 100%),
    var(--doc-header-bg, #11202B);
  box-shadow:
    inset 0 1px 0 rgba(246, 241, 231, 0.09),
    inset 0 -1px 0 rgba(184, 131, 42, 0.30),
    0 14px 32px -10px rgba(0, 0, 0, .60);
  /* NO backdrop blur on this FIXED toolbar. A blurred backdrop is re-rasterised
     every scroll frame, which visibly FLICKERS on this long (11,000px) list.
     The bar's own background is opaque, so the blur was invisible anyway —
     dropping it removes the flicker with no visual change. */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background:
    linear-gradient(180deg,
      rgba(48, 78, 100, 0.22) 0%,
      rgba(20, 38, 52, 0.16) 35%,
      rgba(0,  0,  0,  0.22) 100%),
    #15242E;                              /* opaque base → nothing shows through */
}
/* Row 1 (search) — slightly elevated tone so the search/export controls feel
   like the "primary" actions, with the filter row reading as secondary. */
.dh-controls .doc-search-wrap {
  position: relative;
  padding: 1px 0;
}

.dh-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
  row-gap: 7px;
  padding: 6px 0;
}
/* Row 1 — CENTRED cluster: count → search → clear → export, balanced in
   the middle of the toolbar so the eye reads the whole row as one
   composite control deck. Matches Row 2 (also centred). */
.doc-search-wrap {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
}
/* Live document count — sits at the LEFT EDGE of the right-packed cluster
   (the first child of a `justify-content: flex-end` row). */
.doc-search-info {
  flex: 0 0 auto;
  white-space: nowrap;
}
/* Row 2 — controls cluster, packed TIGHT to the RIGHT with uniform spacing.
     · justify-content: flex-end pushes the whole group to the right edge.
     · One `gap` value (6px) is used here AND inside .dh-tools / .dh-age so
       spacing reads even from one end of the row to the other — no visual
       "groups stuck together with bigger gaps between groups".
     · flex-wrap stays on so the row falls back gracefully on truly tiny
       viewports, but at the user's normal width everything sits on one
       single line below the search field — toolbar = exactly 2 rows. */
.ctrl-cluster {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* ── UNIVERSAL TOOLBAR BUTTON SHEEN + GLOW ─────────────────────────────
   Shared hover treatment on every interactive in the toolbar. The
   ::after sheen is a moving gold gradient that sweeps across the
   control surface on hover — same vocabulary as the section headings
   in the viewer (Fix CC), so the design system reads as ONE system.
   Premium-feel without being intrusive.                               */
.dtool, .dh-age-dir, .dh-age-val > summary,
.cbx > summary, .doc-export-btn, .doc-search-clear-outer{
  position: relative;
  overflow: hidden;
  transition:
    background .18s ease,
    color .18s ease,
    border-color .18s ease,
    box-shadow .22s ease,
    transform .12s ease;
}
.dtool::after, .dh-age-dir::after, .dh-age-val > summary::after,
.cbx > summary::after, .doc-export-btn::after,
.doc-search-clear-outer::after{
  /* Note: .dh-age-val > summary::after and .cbx > summary::after already
     carry textual content (the dropdown caret); to avoid clobbering them
     we use a SECOND ::before for the sheen on those two. */
}
.dtool::before, .dh-age-dir::before, .dh-age-val > summary::before,
.cbx > summary::before, .doc-export-btn::before,
.doc-search-clear-outer::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    transparent 0%,
    transparent 38%,
    color-mix(in srgb, var(--doc-gold) 38%, transparent) 50%,
    transparent 62%,
    transparent 100%);
  transform: translateX(-110%);
  transition: transform 0.7s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}
.dtool:hover::before, .dh-age-dir:hover::before,
.dh-age-val > summary:hover::before, .cbx > summary:hover::before,
.doc-export-btn:hover::before, .doc-search-clear-outer:hover::before{
  transform: translateX(110%);
}
/* Gold halo glow on hover for every toolbar control. Inset highlight is
   added on top to keep the surface from looking flat after the sheen. */
.dtool:hover, .dh-age-dir:hover, .dh-age-val > summary:hover,
.cbx > summary:hover, .doc-export-btn:hover,
.doc-search-clear-outer:hover{
  box-shadow:
    inset 0 1px 0 rgba(246,241,231,0.20),
    0 0 0 1px color-mix(in srgb, var(--doc-gold) 45%, transparent),
    0 0 14px -2px color-mix(in srgb, var(--doc-gold) 55%, transparent),
    0 2px 5px rgba(0,0,0,0.30);
  transform: translateY(-0.5px);
}
.dtool:active, .dh-age-dir:active, .dh-age-val > summary:active,
.cbx > summary:active, .doc-export-btn:active,
.doc-search-clear-outer:active{
  transform: translateY(0);
}
/* Keep button labels / icons above the sheen pseudo-element. */
.dtool > *, .dh-age-dir > *, .dh-age-val > summary > *,
.cbx > summary > *, .doc-export-btn > *, .doc-search-clear-outer > *{
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce){
  .dtool::before, .dh-age-dir::before, .dh-age-val > summary::before,
  .cbx > summary::before, .doc-export-btn::before,
  .doc-search-clear-outer::before{ display: none; }
  .dtool:hover, .dh-age-dir:hover, .dh-age-val > summary:hover,
  .cbx > summary:hover, .doc-export-btn:hover,
  .doc-search-clear-outer:hover{ transform: none; }
}

/* One consistent mono font + size for the remaining control-bar chrome */
.doc-search-info,
.cbx > summary,
.cbx-acts button {
  font-family: var(--font-mono, var(--type-mono, 'IBM Plex Mono', monospace));
  font-size: var(--ui-fs-value);
  font-weight: var(--ctrl-fw);
  letter-spacing: 0.4px;   /* = the nav-tab label spacing, so controls match "LIBRARY" */
  text-transform: uppercase;
}

/* ── Filter dropdown summaries (Section · Entity · Department) ──────────
   Painted to MATCH the blue tool-button row so the whole control row reads
   as one cohesive set of chips. Active (open) state uses the gold accent
   line on the left edge — same language as the tool buttons. */
.cbx > summary {
  height: 24px; box-sizing: border-box;        /* same height as every other control (user 2026-06-24) */
  display: flex; align-items: center;
  padding: 0 9px;
  gap: 5px;
  background: #1A4D6D;
  color: rgba(246, 241, 231, 0.92);
  border: 1px solid rgba(246, 241, 231, 0.10);
  border-radius: 3px;
}
.cbx > summary:hover { background: #225D82; color: #F6F1E7; }
.cbx > summary::after { font-size: var(--ui-fs-micro); color: rgba(246, 241, 231, 0.65); }
/* Open state: same gold-edge language as an active tool button. */
.doc-header .cbx[open] > summary {
  background: #1A4D6D;
  color: #F6F1E7;
  border-color: rgba(246, 241, 231, 0.10);
  box-shadow: inset 3px 0 0 0 var(--doc-gold);
}
.doc-header .cbx[open] > summary::after { color: rgba(246, 241, 231, 0.85); }

/* ── AGE FILTER — 3-control group (− / + / days popover) ─────────────────
   Lives right after the Reset tool button. The − and + buttons are
   mutually exclusive direction toggles ("newer than" / "older than"). The
   dropdown holds the N value (30 / 90 / 180). Filter activates only when
   BOTH a direction AND a value are picked. The chosen value stays visible
   in the dropdown summary so the active state is obvious while browsing. */
.dh-age {
  display: inline-flex;
  align-items: center;
  gap: 6px;            /* uniform with .ctrl-cluster and .dh-tools */
  flex: 0 0 auto;
}
.dh-age-dir {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; min-width: 26px; height: 24px; padding: 0;
  font-family: var(--type-mono, 'IBM Plex Mono', monospace);
  font-size: var(--ui-fs-value);
  font-weight: 700;
  line-height: 1;
  border: 1px solid rgba(246, 241, 231, 0.10);
  border-radius: 3px;
  background: #1A4D6D;
  color: rgba(246, 241, 231, 0.92);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.dh-age-dir:hover { background: #225D82; }
.dh-age-dir:focus-visible { outline: 2px solid var(--doc-gold); outline-offset: 1px; }
/* Pressed direction = gold left edge, same language as other active tools. */
.dh-age-dir[aria-pressed="true"] {
  box-shadow: inset 3px 0 0 0 var(--doc-gold);
  background: #225D82;
}

/* Value picker — small <details> popover styled like the blue tool buttons. */
.dh-age-val { position: relative; }
.dh-age-val > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 42px;
  height: 24px;
  padding: 0 7px;
  font-family: var(--type-mono, 'IBM Plex Mono', monospace);
  font-size: var(--ui-fs-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: #1A4D6D;
  color: rgba(246, 241, 231, 0.92);
  border: 1px solid rgba(246, 241, 231, 0.10);
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
}
.dh-age-val > summary::-webkit-details-marker { display: none; }
.dh-age-val > summary::after { content: '▾'; font-size: var(--ui-fs-micro); color: rgba(246, 241, 231, 0.65); }
.dh-age-val > summary:hover { background: #225D82; }
.dh-age-val[open] > summary {
  background: #1A4D6D;
  box-shadow: inset 3px 0 0 0 var(--doc-gold);
}

/* When a value is actually chosen, the summary glows gold-left to match the
   direction button (so the active selection is visible while browsing). */
.dh-age-val.has-value > summary { box-shadow: inset 3px 0 0 0 var(--doc-gold); }

.dh-age-val-panel {
  position: absolute;
  z-index: 50;
  top: calc(100% + 4px);
  left: 0;
  min-width: 92px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 5px;
  background: var(--doc-panel, #1f2a32);
  border: 1px solid var(--doc-rule, rgba(246, 241, 231, 0.15));
  border-radius: 4px;
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, .3);
}
.dh-age-pick {
  font-family: var(--type-mono, 'IBM Plex Mono', monospace);
  font-size: var(--ui-fs-label);
  font-weight: 700;
  text-align: left;
  padding: 5px 9px;
  background: transparent;
  color: var(--doc-text, #F6F1E7);
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
}
.dh-age-pick:hover { background: color-mix(in srgb, var(--doc-gold) 14%, transparent); }
.dh-age-pick.is-selected {
  border-color: var(--doc-gold);
  color: var(--doc-gold);
}
.dh-age-pick-clear {
  margin-top: 3px;
  padding-top: 6px;
  border-top: 1px solid var(--doc-rule, rgba(246, 241, 231, 0.10));
  border-radius: 0 0 3px 3px;
  font-size: var(--ui-fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--doc-text-muted, rgba(246, 241, 231, 0.6));
}
.dh-age-pick-clear:hover { color: var(--doc-gold); background: transparent; }

/* ── Six tool buttons (blue), grouped at the LEFT of the filter row ──────────
   HTML · TXT · Purpose-only · Tiles · List · Reset. Icon-only (labels sr-only).
   Each ~2 characters wide. Buttons 1–5 light a GOLD LEFT EDGE when their
   feature is active; the Reset button flashes gold on click. */
/* gap matches .ctrl-cluster so spacing is uniform end-to-end on row 2. */
.dh-tools { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.dtool {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; min-width: 26px; height: 24px; padding: 0;
  border: 1px solid rgba(246, 241, 231, 0.10);
  border-radius: 3px;
  background: #1A4D6D;                        /* theme blue */
  color: rgba(246, 241, 231, 0.92);          /* ivory glyph */
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.dtool:hover { background: #225D82; }
.dtool:focus-visible { outline: 2px solid var(--doc-gold); outline-offset: 1px; }
.dtool svg { width: 13px; height: 13px; }
.dtool .dtool-sr {                            /* sr-only label */
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Active feature → gold left edge (inset shadow = no reflow). */
.dtool.is-active { box-shadow: inset 3px 0 0 0 var(--doc-gold); }
/* Reset (6th) → brief colour change on click. */
.dtool.reset-btn:active,
.dtool.reset-btn.is-flash { background: var(--doc-gold); color: #28333A; }

/* List-view hover bubble — render the trailing "Last revised: …" footer on
   its own line. The PHP injects a "\n" before the footer; this turns it
   into a real line break instead of collapsed whitespace.
   Gated to the ⓘ logotype (matches the content rule in the generic sheet). */
.doc-views[data-view="list"] .doc-card[data-purpose]:has(.doc-ico-info:hover)::after {
  white-space: pre-line;
}


/* ════════════════════════════════════════════════════════════════════════
   3. DOCUMENT LIST → clean columned table (List view only)
   ────────────────────────────────────────────────────────────────────────
   The old "Document" column-header row (.doc-thead) was removed per user;
   the list now starts directly with the first entity band. JS reserves
   exactly the toolbar's height on .section-main so row 1 butts up against
   the toolbar bottom.
   ════════════════════════════════════════════════════════════════════════ */

/* Item rows share a consistent column template.
   Layout: DOCUMENT TITLE (fills the row) · type icon · purpose icon. No date. */
.doc-views[data-view="list"] .doc-grid { display: block; margin-top: 0; }
.doc-views[data-view="list"] .doc-card {
  display: grid;
  grid-template-columns: var(--doc-cols);
  align-items: center;
  gap: 0;
  padding: 0;
  margin-top: -1px;                    /* collapse adjoining row hairlines */
  border-radius: 0;
}
.doc-views[data-view="list"] .doc-card > * { padding: 6px 10px; min-width: 0; }
.doc-views[data-view="list"] .doc-card:hover { background: color-mix(in srgb, var(--doc-gold) 8%, transparent); }

/* Title first (col 1); the two icons sit together in col 2 with one divider. */
.doc-views[data-view="list"] .doc-card .doc-card-title {
  order: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.doc-views[data-view="list"] .doc-card .doc-icons {
  order: 2; position: static;
  display: inline-flex; gap: 14px; justify-content: center; align-items: center;
  border-left: 1px solid var(--doc-rule);     /* the single column divider */
}
/* Search snippet (only present while searching) drops to its own full-width line. */
.doc-views[data-view="list"] .doc-card .doc-card-snippet { order: 3; grid-column: 1 / -1; padding: 0 10px 6px; border-left: 0; }
/* Hide everything that isn't the title or the two icons (date, file, arrow…). */
.doc-views[data-view="list"] .doc-card .doc-card-purpose,
.doc-views[data-view="list"] .doc-card .doc-card-meta,
.doc-views[data-view="list"] .doc-card .doc-card-file,
.doc-views[data-view="list"] .doc-card .doc-card-arrow { display: none; }

/* Title: 16px serif dominates the dense list rows. Keep the editorial Fraunces
   but size it for a table row so it sits in scale with the mono meta. */
.doc-views[data-view="list"] .doc-card-title { font-size: var(--ui-fs-value); font-weight: 500; }


/* ════════════════════════════════════════════════════════════════════════
   4. GROUP HEADERS in List view  (Entity → Department)
   ────────────────────────────────────────────────────────────────────────
   The data is grouped two levels deep. In Tiles view the live entity shows in
   the context bar; in List view we surface BOTH levels inline so the table
   reads cleanly and the two "Legal" departments under different entities are
   never mistaken for a duplicate. Both bands share the table's flush-left edge
   (3px left border = same offset as the cards) — hierarchy comes from weight
   and a background tint, not from ragged indentation.
   ════════════════════════════════════════════════════════════════════════ */
/* Shared "lit-panel" sheen — ONE overlay for all three band tiers so the lighting
   reads identically; only each tier's base fill differs (the entity → section →
   department lightness ladder is preserved underneath). */
.doc-views[data-view="list"] .doc-entity {
  --band-sheen: linear-gradient(180deg, rgba(246, 241, 231, 0.12) 0%, rgba(246, 241, 231, 0.02) 42%, rgba(0, 0, 0, 0.10) 100%);
}
/* Entity band — primary divider (generic CSS hides it in tiles; [data-view] here
   re-shows + styles it in BOTH views so the band is ONE element, identical in
   list and tiles. Same specificity as [data-view="list"], so list is unchanged. */
.doc-views[data-view] .doc-section-label {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  margin: 20px 0 0;
  padding: 18px 4px;                        /* tall band; text inset 4px from the left */
  border: 0;
  border-left: 4px solid var(--ent, var(--doc-gold));
  background: var(--band-sheen), color-mix(in srgb, var(--ent, var(--doc-gold)) 40%, transparent);
  box-shadow: inset 0 1px 0 rgba(246, 241, 231, 0.18),   /* lit top edge */
              inset 0 -1px 0 rgba(0, 0, 0, 0.22),         /* crisp bottom edge */
              inset 7px 0 16px -11px color-mix(in srgb, var(--ent, var(--doc-gold)) 85%, #ffffff),  /* accent-bar glow */
              0 3px 8px -5px rgba(0, 0, 0, 0.60);         /* soft lift off the page */
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);             /* depth on the title */
  color: var(--doc-text);
  font-family: var(--type-mono, 'IBM Plex Mono', monospace);
  font-size: var(--ui-fs-display);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.doc-views[data-view] .doc-entity:first-of-type .doc-section-label { margin-top: 6px; }
/* The doc-count inherits the row's exact font, size, weight & colour → the
   whole entity header is ONE uniform style (no tiny unreadable counter). */
.doc-views[data-view] .doc-section-label .doc-ec,
.doc-views[data-view] .doc-section-label .doc-ew { color: inherit; font-weight: inherit; font-size: inherit; letter-spacing: inherit; }

/* Section + department sub-bands — shared base (4px padding). Section text is
   CENTRED; the department band overrides to RIGHT-aligned (rule below).
   --section-fill = the entity band's fill (--ent @40%) with 15% white blended
   in, so the SECTION band reads 15% lighter than the ENTITY band. The DEPARTMENT
   band lightens THIS fill by a further 30% (rule below), so it keeps tracking. */
.doc-views[data-view="list"] .doc-subcat-label {
  --section-fill: color-mix(in srgb, #ffffff 15%, color-mix(in srgb, var(--ent, var(--doc-gold)) 40%, transparent));
  display: flex; flex-direction: column; align-items: center;
  margin: 0;
  padding: 7px 16px;                     /* taller for two rows; horizontal room for the caret */
  border-left: 4px solid color-mix(in srgb, var(--ent, var(--doc-gold)) 58%, transparent);
  background: var(--band-sheen), var(--section-fill);    /* 15% lighter + the shared sheen */
  box-shadow: inset 0 1px 0 rgba(246, 241, 231, 0.12),   /* lit top edge */
              inset 0 -1px 0 rgba(0, 0, 0, 0.14);         /* crisp bottom edge */
  color: var(--doc-text);
  font-family: var(--type-mono, 'IBM Plex Mono', monospace);
  font-size: var(--ui-fs-display);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: center;                    /* SECTION sub-band: centred */
}
/* Section (.doc-sc) and department (.doc-dc) counts → uniform with their row. */
.doc-views[data-view="list"] .doc-subcat-label .doc-dc,
.doc-views[data-view="list"] .doc-subcat-label .doc-sc { color: inherit; font-weight: inherit; font-size: inherit; letter-spacing: inherit; }
/* DEPARTMENT band — same design as the section band, 30% lighter: the section
   band's fill (--section-fill) with 30% white blended in. Tracks the section
   automatically. Defined after .doc-subcat-label so it wins (equal specificity). */
.doc-views[data-view="list"] .doc-dept-label {
  background: var(--band-sheen), color-mix(in srgb, #ffffff 30%, var(--section-fill));
  text-align: center;                    /* DEPARTMENT sub-band: centred (all bands centred now) */
}

/* Band SECOND ROW — the "{N} files" count: heavy italic taupe, centred under
   the name. The count number + word spans inherit this (taupe/14/900/italic). */
.doc-views[data-view="list"] .band-name { line-height: 1.18; }
.doc-views[data-view="list"] .band-files {
  display: inline-flex; align-items: baseline; gap: 0.32em;
  margin-top: 6px; padding: 2px 13px 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #3c4955 0%, var(--doc-charcoal, #36454F) 55%, #28323a 100%); /* charcoal, glossy */
  border: 1px solid color-mix(in srgb, var(--ent, var(--doc-gold)) 60%, #ffffff);                  /* bright entity rim */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20),                                             /* top gloss */
              0 2px 6px -2px rgba(0, 0, 0, 0.55),                                                   /* lift */
              0 0 12px -4px color-mix(in srgb, var(--ent, var(--doc-gold)) 70%, #ffffff);           /* entity glow */
  color: var(--doc-gold, #B8832A);                                                                 /* gold count ink */
  font-size: var(--ui-fs-value); font-weight: 900; font-style: italic; letter-spacing: 0.05em; text-transform: none;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}

/* ── Collapsible sub-bands ────────────────────────────────────────────────
   Click a SECTION band → fold all its departments + rows; click a DEPARTMENT
   band → fold its document grid. JS toggles .is-collapsed on the GROUP; these
   rules do the hiding. Scoped to [data-view] (BOTH list and tiles) — the bands
   now render in tiles too, so a fold must work there as well; [data-view] keeps
   the SAME specificity as [data-view="list"], so list view is unchanged.
   !important so a fold wins over the filter's inline display on the depts. */
.doc-views[data-view] .doc-subcat-label {
  cursor: pointer; user-select: none; position: relative;
}
/* disclosure caret — leads the label, points ▾ open / ► collapsed */
.doc-views[data-view] .doc-subcat-label::before {
  content: "\25BE"; position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  font-size: var(--ui-fs-value); opacity: 0.5; transition: transform 0.18s ease, opacity 0.18s ease;
}
.doc-views[data-view] .doc-subcat-label:hover::before { opacity: 0.9; }
.doc-views[data-view] .doc-section-grp.is-collapsed > .doc-subcat-label::before,
.doc-views[data-view] .doc-dept.is-collapsed > .doc-dept-label::before {
  transform: translateY(-50%) rotate(-90deg);
}
.doc-views[data-view] .doc-section-grp.is-collapsed > .doc-dept { display: none !important; }
.doc-views[data-view] .doc-dept.is-collapsed > .doc-grid       { display: none !important; }


/* ════════════════════════════════════════════════════════════════════════
   5. DOCUMENT STATUS TRACKER + TOOLBAR BLOCKING        (added 2026-05-31)
   ────────────────────────────────────────────────────────────────────────
   · Tiles carry a top-left ONLINE-STATUS checkbox (checked = public/live;
     persisted to the CSV registry via api/doc_status.php) + a bolder white
     filename.
   · Row 1 = a tight, evenly-spaced, CENTRED block of 4 (count · search ·
     clear · export) on one shared minimal gap.
   · Row 2 = all 14 controls flattened into one evenly-spaced CENTRED block on
     that same gap; DAYS/SECTION/ENTITY/DEPARTMENT carry the logotype buttons'
     gold left-bar; a red PUBLIC filter logotype leads the row.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --doc-public:     #36B37E;   /* LIVE — green                 */
  --doc-public-red: #C0392B;   /* UNPUBLISHED — red            */
  --doc-public-red-bright: #E7553F;
  --doc-archived:   #8895A6;   /* ARCHIVED — muted slate       */
  --doc-review:     #002FA7;   /* TO REVIEW — International Klein Blue */
  --doc-review-bright: #2E51E0;/* brighter twin for the LED glow */
  --doc-taupe:      #8A7E6F;   /* SPARE — taupe (reserved slots) */
  --doc-charcoal:   #36454F;   /* charcoal — band file-counter ink */
}

/* ════════════════════════════════════════════════════════════════════════
   TILE = DOCUMENT ID CARD                              (redesign 2026-05-31)
   ──────────────────────────────────────────────────────────────────────── */
.doc-views[data-view="tiles"] .doc-idcard { padding: 16px 16px 14px; }

/* ID header — registry key (.csv key) + document version, top-left. Reserves
   space on the right for the logotypes + status LED. */
.doc-views[data-view="tiles"] .dc-uidrow {
  display: flex; align-items: baseline; gap: 8px;
  padding-right: 64px;
  margin-bottom: 8px;
  font-family: var(--type-mono); line-height: 1.2;
}
.dc-uid { font-size: var(--ui-fs-label); font-weight: 700; letter-spacing: 0.07em; color: var(--doc-gold); white-space: nowrap; }
.dc-ver {
  font-size: var(--ui-fs-label); font-weight: 700; letter-spacing: 0.03em;
  color: var(--doc-text, #F6F1E7);
  background: color-mix(in srgb, var(--doc-text, #F6F1E7) 12%, transparent);
  border: 1px solid var(--doc-rule, rgba(246,241,231,0.18));
  border-radius: 3px; padding: 1px 6px; white-space: nowrap;
}
.doc-views[data-view="list"] .dc-uidrow { display: none; }

/* Status LED — top-right, in the .doc-icons cluster; colour off data-status. */
.dc-led {
  width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
  background: var(--doc-public-red);
  box-shadow: 0 0 7px 0 var(--doc-public-red-bright), inset 0 0 2px rgba(255,255,255,0.45);
}
.doc-card[data-status="live"]     .dc-led { background: var(--doc-public);   box-shadow: 0 0 7px 0 var(--doc-public),   inset 0 0 2px rgba(255,255,255,0.45); }
.doc-card[data-status="review"]   .dc-led { background: var(--doc-review);   box-shadow: 0 0 7px 0 var(--doc-review-bright), inset 0 0 2px rgba(255,255,255,0.5); }
.doc-card[data-status="archived"] .dc-led { background: var(--doc-archived); box-shadow: 0 0 6px 0 var(--doc-archived), inset 0 0 2px rgba(255,255,255,0.4); }
.doc-views[data-view="list"] .dc-led { display: none; }

/* Title — no indent now (checkbox gone); still clears the top-right icons. */
.doc-views[data-view="tiles"] .doc-card-title { text-indent: 0; padding-right: 66px; }

/* Left border flags the status colour for an at-a-glance scan. */
.doc-views[data-view="tiles"] .doc-card[data-status="unpublished"] { border-left-color: var(--doc-public-red); }
.doc-views[data-view="tiles"] .doc-card[data-status="archived"]    { border-left-color: var(--doc-archived); }
.doc-views[data-view="tiles"] .doc-card[data-status="live"]        { border-left-color: var(--doc-public); }

/* Filename — the LAST row of the tile (mirrors the row, where it's also last).
   padding-right keeps a long name clear of the bottom-right open-arrow. */
.doc-views[data-view="tiles"] .doc-card-file {
  font-family: var(--type-mono);
  font-weight: 500; font-size: var(--ui-fs-label); letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--doc-text, #F6F1E7) 66%, transparent);
  margin: 2px 0 0; padding-right: 46px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Description — clamp to 4 lines for a uniform, scannable block, with lifted
   contrast so it reads comfortably at a glance (was 0.55). */
.doc-views[data-view="tiles"] .doc-card-purpose {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
  font-size: var(--ui-fs-value); line-height: 1.55;
  color: color-mix(in srgb, var(--doc-text, #F6F1E7) 72%, transparent);
}
/* Parser error indicator — orange border around description box for files that cannot parse. */
.doc-views[data-view="tiles"] .doc-card[data-parser-error="true"] .doc-card-purpose {
  border: 3px solid #FF8C00;
}
/* Date folds into the metrics line on tiles — hide the standalone date meta. */
.doc-views[data-view="tiles"] .doc-card-meta { display: none; }
/* Lift the faintest secondary text so it's legible at a glance (tiles only):
   the chip key labels (were 0.3) and the metrics line (were 0.55). */
.doc-views[data-view="tiles"] .fc-key { color: color-mix(in srgb, var(--doc-text, #F6F1E7) 48%, transparent); }
.doc-views[data-view="tiles"] .dcs-metrics { color: color-mix(in srgb, var(--doc-text, #F6F1E7) 70%, transparent); }

/* ---- ROW 1 · tight, evenly-spaced, centred block of 4 ------------------- */
.dh-controls .doc-search-wrap { gap: 6px; justify-content: center; }
.doc-search-field { flex: 0 1 320px; }      /* fixed-ish — keep the block tight */
.doc-search-field .doc-search { height: 24px; }   /* match the 24px control row (search moved to Row 3) — user 2026-06-24 */
/* × clear (row 1) — styled like the row-2 tool buttons: blue, bold white glyph,
   never dimmed, gold highlight on hover. (The ↓ download moved to row 2, where
   its .dtool class makes it match that row's buttons exactly.) */
.doc-search-clear-outer {
  height: 24px;
  background: #1A4D6D;
  border: 1px solid rgba(246, 241, 231, 0.10);
  color: #FFFFFF !important;
  font-weight: 700;
  opacity: 1 !important;          /* override the dim-when-idle on the clear btn */
}
.doc-search-clear-outer:hover {
  background: #225D82;
  box-shadow: inset 3px 0 0 0 var(--doc-gold);
}

/* ---- ROW 2 · flatten the sub-groups → 14 even, centred pieces ----------- */
.dh-tools, .dh-age { display: contents; }

/* DAYS / SECTION / ENTITY / DEPARTMENT — resting gold left-bar like the
   logotype (type) buttons; intensifies to full gold when open / value set. */
.cbx > summary,
.dh-age-val > summary {
  box-shadow: inset 3px 0 0 0 color-mix(in srgb, var(--doc-gold) 60%, transparent);
}
.doc-header .cbx[open] > summary,
.dh-age-val[open] > summary,
.dh-age-val.has-value > summary {
  box-shadow: inset 3px 0 0 0 var(--doc-gold);
}

/* ---- ROW 2 · red PUBLIC filter logotype (leads the row) ----------------- */
.dtool.public-btn {
  width: auto; min-width: auto; padding: 0 10px;
  /* Blue like the other tool buttons when not selected; identity = a RED
     left-bar (where every other button on the row uses gold). */
  background: #1A4D6D;
  border-color: rgba(246, 241, 231, 0.10);
  box-shadow: inset 3px 0 0 0 var(--doc-public-red);
}
.dtool.public-btn .dtool-tag {
  font-family: var(--type-mono, 'IBM Plex Mono', monospace);
  font-size: var(--ui-fs-label); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #FFFFFF;                                 /* bold white writing */
}
.dtool.public-btn:hover { background: #225D82; }
/* Selected = brighter red left-bar + red glow (this row's only non-gold). */
.dtool.public-btn.is-active {
  background: #225D82;
  box-shadow:
    inset 3px 0 0 0 var(--doc-public-red-bright),
    0 0 12px -3px color-mix(in srgb, var(--doc-public-red-bright) 70%, transparent);
}
/* LIVE button now carries the live-doc COUNT (moved off the row-1 readout):
   a green status dot + white "live" wordmark + green count of the live docs in
   the current view (click = show exactly those). Green ties the number to the
   green live-LEDs on the cards; the red left-bar stays the filter identity. */
.dtool.public-btn { display: inline-flex; align-items: center; gap: 5px; }
.dtool.public-btn .pb-led {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: var(--doc-public, #36B37E);
  box-shadow: 0 0 5px -1px var(--doc-public, #36B37E);
}
.dtool.public-btn .pb-count {
  font-family: var(--type-mono, 'IBM Plex Mono', monospace);
  font-size: var(--ui-fs-label); font-weight: 700; letter-spacing: 0.04em;
  color: var(--doc-public, #36B37E);
}
.dtool.public-btn .pb-count::before {
  content: "\00B7"; margin-right: 3px;          /* middot separator */
  color: rgba(246, 241, 231, 0.40); font-weight: 700;
}

/* ---- ROW 2 · REVISED (recency) dropdown — single-select named ranges -------
   Reuses the .cbx summary + panel chrome so it is visually identical to the
   Section / Entity / Department menus. The panel options are single-select
   buttons (one active range at a time). */
.cbx-age-panel { min-width: 138px; }
.age-opt {
  display: block; width: 100%; text-align: left;
  font-family: var(--type-mono, 'IBM Plex Mono', monospace);
  font-size: var(--ui-fs-label); font-weight: 600; letter-spacing: 0.02em;
  padding: 5px 9px;
  background: transparent; color: var(--doc-text, #F6F1E7);
  border: 1px solid transparent; border-radius: 3px;
  cursor: pointer;
}
.age-opt + .age-opt { margin-top: 2px; }
.age-opt:hover { background: color-mix(in srgb, var(--doc-gold) 14%, transparent); }
.age-opt.is-selected { border-color: var(--doc-gold); color: var(--doc-gold); }
/* Active recency filter → full gold left-bar on the summary (matches the row). */
.cbx-age.has-value > summary { box-shadow: inset 3px 0 0 0 var(--doc-gold); }

/* ---- TILE · reference block: facets + metrics (bigger, readable) -------- */
.doc-card-status {
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px solid var(--doc-rule, rgba(246,241,231,0.14));
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--type-mono, 'IBM Plex Mono', monospace);
  font-size: var(--ui-fs-label); letter-spacing: 0.03em; line-height: 1.45;
}
/* Classification CHIPS — each opens a checklist popover (multi-select); the
   chosen set persists to the registry CSV. Replaces the old static
   "entity · section · dept" text line. */
.dcs-facets { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.facet-chip {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  padding: 3px 7px;
  background: color-mix(in srgb, #0b1a24 45%, transparent);
  border: 1px solid var(--doc-rule, rgba(246,241,231,0.16));
  border-radius: 4px; cursor: pointer; user-select: none;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.facet-chip:hover {
  border-color: var(--doc-gold, #A87726);
  background: color-mix(in srgb, var(--doc-gold) 10%, transparent);
}
.facet-chip:focus-visible { outline: 2px solid var(--doc-gold, #A87726); outline-offset: 1px; }
.facet-chip[aria-expanded="true"] {
  border-color: var(--doc-gold, #A87726);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--doc-gold) 45%, transparent);
}
.facet-chip .fc-key {
  font-size: var(--ui-fs-micro); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--doc-text-faint, rgba(246,241,231,0.45));
}
.facet-chip .fc-val {
  font-size: var(--ui-fs-label); font-weight: 700; letter-spacing: 0.02em; color: var(--doc-text, #F6F1E7);
  max-width: 17ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.facet-chip .fc-car { font-style: normal; font-size: var(--ui-fs-micro); color: var(--doc-text-muted, rgba(246,241,231,0.55)); }
.dcs-metrics {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 14px;
  font-family: var(--type-mono);
  font-size: var(--ui-fs-label); letter-spacing: 0.01em;
  color: var(--doc-text-muted, rgba(246,241,231,0.5));
}
.dcs-metrics .m-stat b { color: var(--doc-text, #F6F1E7); font-weight: 700; font-feature-settings: 'tnum'; }
.dcs-metrics .m-date { margin-left: auto; color: var(--doc-gold, #A87726); font-weight: 600; white-space: nowrap; }

/* ---- TILE FOOTER & GLANCE POLISH --------------------------------------------
   Status dropdown sits bottom-left; the open-arrow pins bottom-right on the same
   line. The entity chip wears the entity colour so the org reads instantly. */
.doc-views[data-view="tiles"] .doc-idcard { padding-bottom: 15px; }
.doc-views[data-view="tiles"] .dc-statusbar { margin-top: 13px; }
.doc-views[data-view="tiles"] .doc-card-arrow {
  position: absolute; right: 16px; bottom: 19px; margin: 0;
  font-size: var(--ui-fs-display); line-height: 1; opacity: .5;
}
.doc-views[data-view="tiles"] .doc-card:hover .doc-card-arrow { opacity: 1; translate: 3px 0; }
.doc-views[data-view="tiles"] .facet-chip[data-facet="entity"] .fc-val { color: var(--ent, var(--doc-text)); }
/* List view facet chips — readable, comfortably padded (the full expanded-row
   layout is defined in the EXPANDED block further down). */
.doc-views[data-view="list"] .facet-chip {
  padding: 7px 11px;
  font-size: var(--ui-fs-label);
  border-radius: 4px;
}

/* Shared facet checklist popover — ONE element, repositioned per open, fixed
   to the viewport above the sticky nav/toolbar. Appended to <body>, so no
   ancestor overflow can clip it. */
.facet-pop {
  position: fixed; z-index: 99999;
  min-width: 170px; max-width: 290px; max-height: 320px; overflow-y: auto;
  padding: 7px;
  /* SOLID, opaque panel — must NOT use the semi-transparent --doc-surface
     token (it's 60% alpha), or the tile grid bleeds through the checklist. */
  background: #142837;
  border: 1px solid color-mix(in srgb, var(--doc-gold, #A87726) 60%, rgba(246,241,231,0.2));
  border-radius: 4px;
  box-shadow: 0 16px 36px -8px rgba(0,0,0,0.78), 0 0 0 1px rgba(0,0,0,0.45);
  font-family: var(--type-mono, 'IBM Plex Mono', monospace);
}
.facet-pop[hidden] { display: none; }
.facet-pop .fp-head {
  font-size: var(--ui-fs-micro); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--doc-gold, #A87726);
  padding: 2px 4px 7px; margin-bottom: 5px;
  border-bottom: 1px solid var(--doc-rule, rgba(246,241,231,0.14));
}
.facet-pop .fp-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 6px; border-radius: 4px; cursor: pointer; user-select: none;
  color: var(--doc-text-muted, rgba(246,241,231,0.7));
  transition: background .12s ease, color .12s ease;
}
.facet-pop .fp-opt:hover { background: color-mix(in srgb, var(--doc-gold) 12%, transparent); color: var(--doc-text, #F6F1E7); }
.facet-pop .fp-opt:focus-visible { outline: 2px solid var(--doc-gold); outline-offset: -1px; }
.facet-pop .fp-box {
  flex: 0 0 auto; width: 14px; height: 14px; border-radius: 3px;
  background: #0a1722;                              /* solid recessed fill, not transparent */
  border: 1.5px solid rgba(246,241,231,0.6);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s ease, border-color .12s ease;
}
.facet-pop .fp-opt[aria-checked="true"] { color: var(--doc-text, #F6F1E7); }
.facet-pop .fp-opt[aria-checked="true"] .fp-box {
  background: var(--doc-gold, #A87726); border-color: var(--doc-gold, #A87726);
}
.facet-pop .fp-opt[aria-checked="true"] .fp-box::after {
  content: "\2713"; color: #1a1206; font-size: var(--ui-fs-label); font-weight: 900; line-height: 1;
}
.facet-pop .fp-lab { font-size: var(--ui-fs-label); letter-spacing: 0.01em; }

/* ---- TILE · 3-WAY publish-status selector (radio): live / unpublished /
   archived. Segmented control along the card bottom; the active option glows
   in its status colour. Click sets + persists to the CSV registry. --------- */
/* ---- PUBLISH-STATUS SETTER — radio DROPDOWN. The toggle shows the current
   status (colour dot + label, fixed width so it never resizes); the menu lists
   the assignable statuses as radio rows. Choosing one persists to the registry
   and drives the top-right LED. --------------------------------------------- */
.dc-statusbar { position: relative; display: inline-flex; margin-top: 12px; }
.dss-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  width: auto; min-width: 150px;
  padding: 4px 9px;
  background: color-mix(in srgb, #0b1a24 45%, transparent);
  border: 1px solid var(--doc-rule, rgba(246,241,231,0.16));
  border-radius: 4px; cursor: pointer;
  font-family: var(--type-mono, 'IBM Plex Mono', monospace);
  color: var(--doc-text, #F6F1E7);
  transition: border-color .15s ease, background .15s ease;
}
/* STATUS key — mirrors the facet chips' .fc-key (small, faint, uppercase). */
.dss-key {
  flex: 0 0 auto;
  font-size: var(--ui-fs-micro); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--doc-text-faint, rgba(246,241,231,0.45));
}
.dss-toggle:hover { border-color: var(--doc-gold); }
.dss-toggle .dss-curlabel { flex: 1 1 auto; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--ui-fs-label); font-weight: 700; letter-spacing: 0.02em; color: var(--doc-text, #F6F1E7); }
.dss-toggle .dss-car { flex: 0 0 auto; font-size: var(--ui-fs-label); color: var(--doc-text-faint, rgba(246,241,231,0.5)); transition: transform .15s ease; }
.dc-statusbar.is-open .dss-toggle { border-color: var(--doc-gold); background: var(--doc-deep, #0b1a24); }
.dc-statusbar.is-open .dss-car { transform: rotate(180deg); }
/* The radio menu — opens upward (the setter sits low in the tile). */
.dss-menu {
  position: absolute; left: 0; bottom: calc(100% + 5px); z-index: 60;
  min-width: 100%; display: none; flex-direction: column; gap: 1px;
  padding: 5px; background: #142837;
  border: 1px solid var(--doc-rule, rgba(246,241,231,0.18)); border-radius: 4px;
  box-shadow: 0 12px 28px -8px rgba(0,0,0,.45);
}
.dc-statusbar.is-open .dss-menu { display: flex; }
.dss-opt {
  display: flex; align-items: center; gap: 9px; padding: 6px 9px;
  border-radius: 4px; cursor: pointer; user-select: none; white-space: nowrap;
  font-family: var(--font-sans, 'Inter', sans-serif); font-size: var(--ui-fs-label); font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--doc-text, #F6F1E7);
}
.dss-opt:hover { background: color-mix(in srgb, var(--doc-gold) 14%, transparent); }
.dss-opt[aria-checked="true"] { background: color-mix(in srgb, var(--doc-gold) 20%, transparent); font-weight: 700; }
.dss-opt:focus-visible { outline: 2px solid var(--doc-gold); outline-offset: -1px; }

/* ---- ROW/TILE LOGOTYPES — boxed exactly like the toolbar's .dtool buttons.
   Same theme-blue fill, hairline border, radius, glyph size and hover lift;
   the glyph keeps its semantic colour (type ivory · purpose gold · info). --- */
.doc-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; min-width: 26px; height: 24px; line-height: 0;
  border: 1px solid rgba(246, 241, 231, 0.10);
  border-radius: 3px;
  background: #1A4D6D;
  transition: background .15s ease, box-shadow .15s ease;
}
.doc-ico:hover { background: #225D82; }
.doc-ico svg { width: 13px; height: 13px; }

/* ---- TOOLBAR · PUBLISH-STATUS FILTER (single-select dropdown) -----------
   Replaces the old LIVE toggle. Summary = active filter's colour dot + label;
   panel = ANY + four statuses + three reserved (inert) slots. Filter by the
   document's colour status. ------------------------------------------------- */
.cbx-status > summary { gap: 6px; min-height: 24px; }
/* Pin the label to the WIDEST option ("Unpublished" ≈ 66px in this mono face)
   so picking a shorter status never resizes the control / shifts the toolbar. */
.cbx-status .st-cur { display: inline-block; min-width: 68px; line-height: 1; }
.st-dot {
  flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
  background: var(--st-c, var(--doc-taupe));
  box-shadow: 0 0 4px -1px var(--st-c, transparent), inset 0 0 1px rgba(255,255,255,0.5);
}
.cbx-status > summary .st-dot { width: 8px; height: 8px; }
.st-dot[data-st="any"]         { background: transparent; border: 1.5px solid var(--doc-gold, #A87726); box-shadow: none; }
.st-dot[data-st="live"]        { --st-c: var(--doc-public); }
.st-dot[data-st="review"]      { --st-c: var(--doc-review-bright); }
.st-dot[data-st="unpublished"] { --st-c: var(--doc-public-red); }
.st-dot[data-st="archived"]    { --st-c: var(--doc-archived); }
.st-dot[data-st="reserved"]    { --st-c: var(--doc-taupe); }
/* Engaged (non-ANY) filter → gold ring on the summary. */
.cbx-status.is-filtering > summary { border-color: var(--doc-gold); color: var(--doc-active-fg, #F6F1E7); }

.cbx-status-panel { min-width: 158px; gap: 1px; }
.st-opt {
  display: flex; align-items: center; gap: 9px; width: 100%;
  text-align: left; padding: 5px 7px;
  border: 0; background: transparent; border-radius: 4px;
  font-family: var(--font-sans, 'Inter', sans-serif); font-size: var(--ui-fs-label); font-weight: 500;
  color: var(--doc-text, #F6F1E7); cursor: pointer;
  transition: background .12s ease;
}
.st-opt:hover { background: color-mix(in srgb, var(--doc-gold) 14%, var(--doc-tint, transparent)); }
.st-opt.is-selected { background: color-mix(in srgb, var(--doc-gold) 20%, transparent); font-weight: 700; }
.st-opt.is-reserved { color: var(--doc-text-muted, rgba(246,241,231,0.4)); cursor: default; font-style: italic; }
.st-opt.is-reserved:hover { background: transparent; }

/* ============================================================================
   LIST VIEW — LEAN ROWS (redesign). A row is a compact 2-line entry:
   line 1 = title + type/scope icons + open arrow; line 2 = lean classification
   text (no facet chips). A status LED sits at the row's left edge; the row's
   bottom border is the entity colour. Clicking the row (anywhere but the →
   arrow) EXPANDS it into the full ID-card tile inline; the arrow opens the
   document. Declared last so it supersedes the earlier list-view rules.
   ============================================================================ */
.doc-views[data-view="list"] .doc-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "title icons arrow" "meta meta meta";   /* lean: title · (ⓘ + status LED) · arrow */
  align-items: center;
  gap: 0 6px;
  margin-top: 0;
  padding: 6px 4px 7px 8px;
  position: relative;
  border-radius: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ent, var(--doc-gold)) 50%, #ffffff);   /* very thin entity hairline, BRIGHTENED so it reads on the dark bg (raw --ent is too dark to see); same line collapsed + expanded */
  cursor: pointer;
}
.doc-views[data-view="list"] .doc-card > * { padding: 0; min-width: 0; }
.doc-views[data-view="list"] .doc-card:hover {
  background: color-mix(in srgb, var(--ent, var(--doc-gold)) 9%, transparent);
}
/* LEAN ROW status = ONE read-only LED in the cluster; its colour tracks
   data-status (green = live · Klein = review · red = unpublished · slate =
   archived) via the general .dc-led rules. The full clickable LED STRIP is the
   SETTER and appears only when the row is expanded (rule further down). */
.doc-views[data-view="list"] .doc-card .dc-led { display: block; }
/* Info logotype — list-view only; the dedicated hover target for the summary
   tooltip (see the :has() rule in the generic stylesheet). */
.doc-ico-info { display: none; }
.doc-views[data-view="list"] .doc-ico-info {
  display: inline-flex; cursor: pointer;
  color: var(--doc-text-muted, rgba(246,241,231,0.55));
  transition: color .15s ease;
}
.doc-views[data-view="list"] .doc-ico-info:hover { color: var(--doc-gold); }
/* eye/purpose logotype removed from the list rows */
.doc-views[data-view="list"] .doc-ico-purpose { display: none; }
/* Line 1 */
.doc-views[data-view="list"] .doc-card .doc-card-title {
  grid-area: title; order: 0;
  font-size: var(--ui-fs-value); font-weight: 500; line-height: 1.3;     /* per spec */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.doc-views[data-view="list"] .doc-card .doc-icons {
  grid-area: icons; order: 0; position: static; border: 0;
  display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end;
}
/* (the list arrow is styled by the UNIFIED icon-button rule further down) */
/* Line 2 — registry id + version badge under the title (duplicate of the
   foot-of-tile id-line). Same gold .dc-uid + .dc-ver pill as the bottom row. */
.doc-row-meta { display: none; }                          /* hidden in tiles view */
.doc-views[data-view="list"] .doc-card .doc-row-meta {
  grid-area: meta; order: 0;
  display: flex; align-items: baseline; gap: 8px;
  margin-top: 3px;
  font-family: var(--type-mono, 'IBM Plex Mono', monospace); line-height: 1.4;
  white-space: nowrap; overflow: hidden;
}
/* Collapsed row hides every full-tile element. */
.doc-views[data-view="list"] .doc-card:not(.is-expanded) .doc-card-purpose,
.doc-views[data-view="list"] .doc-card:not(.is-expanded) .doc-card-meta,
.doc-views[data-view="list"] .doc-card:not(.is-expanded) .dc-statusrow,
.doc-views[data-view="list"] .doc-card:not(.is-expanded) .dc-chips,
.doc-views[data-view="list"] .doc-card:not(.is-expanded) .dc-idline,
.doc-views[data-view="list"] .doc-card:not(.is-expanded) .dc-fileline { display: none; }
/* Lean collapsed row = ⓘ (hover tooltip) + ONE status LED + arrow. The
   type/eye logotypes, the full clickable status setter, and the tile body all
   appear when the row is expanded. */
/* The ⓘ is the only icon in the lean row → render it as a light glyph, not a
   boxed button, so the row stays uncluttered. */
/* (the ⓘ stays a boxed logotype in the lean row too — same as all the others) */
/* ── EXPANDED row ─────────────────────────────────────────────────────────
   The lean row is NOT restyled on expand: SAME grid, SAME title rule
   (nowrap + ellipsis), SAME icon cluster + arrow. Expanding only APPENDS the
   detail rows below — each separated by a gold line. So the title aligns
   identically and uses the identical truncation mechanic, collapsed/expanded.
   Padding is inherited from the base .doc-card (lean row untouched). */
.doc-views[data-view="list"] .doc-card.is-expanded {
  grid-template-areas:
    "title icons arrow"
    "meta  meta  meta"
    "desc  desc  desc"
    "band  band  band";
  align-items: center;
  cursor: default;
  background: color-mix(in srgb, var(--ent, var(--doc-gold)) 7%, transparent);
  /* When extended the PROMINENT line moves UP to under the description (the .dc-band
     top border below); the tile's own bottom edge becomes just a faint divider. */
  border-bottom: 1px solid color-mix(in srgb, var(--ent, var(--doc-gold)) 22%, transparent);
}
/* The lean ROW is unchanged on expand: title + icons + arrow + the registry-id
   badge line all stay exactly as collapsed; only the tile detail is appended
   below. (.doc-card-meta = the compact date, hidden.) The id badge under the
   title needs NO separator above it — it belongs to the title band. */
.doc-views[data-view="list"] .doc-card.is-expanded .doc-card-meta { display: none; }
/* Title band stays IDENTICAL collapsed↔expanded. In the lean row the id badge
   has the card's 7px bottom padding beneath it; when expanded the desc separator
   follows the badge immediately (0px), so restore that same 7px under the badge
   here — keeps the space below the document id equal in both states. */
.doc-views[data-view="list"] .doc-card.is-expanded .doc-row-meta { padding-bottom: 7px; }

/* (The old stacked status / chips / id-line / filename rows and their separator
   lines are superseded by the two-column SELECTORS BAND defined below. The title
   band still flows straight into the description with no line under it.) */

/* description — full width, LEFT (aligned with the title) */
.doc-views[data-view="list"] .doc-card.is-expanded .doc-card-purpose {
  grid-area: desc; display: block; margin: 0; padding: 12px 8px; line-height: 1.6;
}
/* ── SELECTORS BAND — two columns around a centre gutter. LEFT = read-only
   document metadata, right-aligned toward the gutter (id · lines · chars ·
   created · revised · filename). RIGHT = the editable selectors, left-aligned
   from the gutter, each showing its current value (white mono bold) ABOVE the
   control. One entity-coloured rule sets the band off from the description. */
.doc-views[data-view="list"] .doc-card.is-expanded .dc-band {
  grid-area: band;
  --val-ink: var(--doc-text, #F6F1E7);       /* CONSISTENT: every value = ivory */
  --lbl-ink: rgba(246, 241, 231, 0.5);       /* CONSISTENT: every label = muted */
  --blue-ink: rgba(150, 182, 208, 0.55);     /* neutral technical ink — grid + drafting marks */
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px;
  align-items: start; padding: 16px 16px 15px;
  /* THE line when extended — bright entity rule under the description (= plate top edge). */
  border-top: 1px solid color-mix(in srgb, var(--ent, var(--doc-gold)) 50%, #ffffff);
  /* DOCUMENT-CONTROL PLATE — a recessed ink panel beneath a faint blueprint grid. */
  background:
    repeating-linear-gradient(0deg,  transparent 0 21px, rgba(150, 182, 208, 0.05) 21px 22px),
    repeating-linear-gradient(90deg, transparent 0 21px, rgba(150, 182, 208, 0.05) 21px 22px),
    linear-gradient(180deg, #171e25 0%, #12171d 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ent, var(--doc-gold)) 30%, transparent), /* entity frame */
              inset 0 2px 7px -3px rgba(0, 0, 0, 0.60),                                          /* recess */
              inset 0 1px 0 rgba(246, 241, 231, 0.05);                                           /* lit lip */
  font-family: var(--type-mono);
}
/* CORNER REGISTRATION MARKS — drafting crop ticks at the plate's four corners. */
.doc-views[data-view="list"] .doc-card.is-expanded .dc-band::before {
  content: ""; position: absolute; inset: 6px; pointer-events: none; --m: 10px;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--blue-ink), var(--blue-ink)), linear-gradient(var(--blue-ink), var(--blue-ink)),
    linear-gradient(var(--blue-ink), var(--blue-ink)), linear-gradient(var(--blue-ink), var(--blue-ink)),
    linear-gradient(var(--blue-ink), var(--blue-ink)), linear-gradient(var(--blue-ink), var(--blue-ink)),
    linear-gradient(var(--blue-ink), var(--blue-ink)), linear-gradient(var(--blue-ink), var(--blue-ink));
  background-size: var(--m) 1px, 1px var(--m), var(--m) 1px, 1px var(--m),
                   var(--m) 1px, 1px var(--m), var(--m) 1px, 1px var(--m);
  background-position: left top, left top, right top, right top,
                       left bottom, left bottom, right bottom, right bottom;
}
/* LEFT — metadata stacked, right-aligned toward the gutter */
.doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta,
.doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .dc-idline,
.doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .dcs-metrics {
  display: flex; flex-direction: column; align-items: flex-end; gap: 7px;
  text-align: right; min-width: 0; width: auto; max-width: 100%; margin: 0; padding: 0; border: 0;
}
.doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .dc-uidrow {
  display: inline-flex; align-items: baseline; gap: 7px;
}
.doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .dc-uid { font-size: var(--ui-fs-value); letter-spacing: 0.04em; }
.doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .dcs-metrics {
  font-size: var(--ui-fs-value); font-weight: 600; color: var(--val-ink);   /* date VALUES = ivory (kills the gold) */
}
.doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .dcs-metrics ::before { content: none; }
/* both date VALUES = ivory (override the generic gold .m-date so Created = Revised) */
.doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .m-created,
.doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .m-date {
  color: var(--val-ink); font-weight: 600;
}
/* the count NUMBER is an ivory value; its unit word + the CREATED/REVISED field
   labels share ONE muted small-caps treatment. */
.doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .m-stat {
  color: var(--lbl-ink); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--ui-fs-label); font-weight: 600;
}
.doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .m-stat b {
  color: var(--val-ink); font-size: var(--ui-fs-value); font-weight: 600; letter-spacing: 0; margin-right: 4px; text-transform: none;
}
.doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .m-lbl {
  font-style: normal; text-transform: uppercase; letter-spacing: 0.08em;
  font-size: var(--ui-fs-label); font-weight: 600; color: var(--lbl-ink); margin-right: 6px;
}
.doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .dc-fileline { width: 100%; }
.doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .doc-card-file {
  display: block;
  font-size: var(--ui-fs-label); font-weight: 500; color: var(--val-ink);
  text-align: right; word-break: break-all;
}
/* RIGHT — selectors stacked, value above each control */
.doc-views[data-view="list"] .doc-card.is-expanded .dcb-sel,
.doc-views[data-view="list"] .doc-card.is-expanded .dcb-sel .dc-statusrow,
.doc-views[data-view="list"] .doc-card.is-expanded .dcb-sel .dc-chips,
.doc-views[data-view="list"] .doc-card.is-expanded .dcb-sel .dc-statusbar,
.doc-views[data-view="list"] .doc-card.is-expanded .dcb-sel .dcs-facets {
  display: flex; flex-direction: column; align-items: stretch; gap: 12px;
  width: 100%; margin: 0; padding: 0; border: 0;
}
/* each control = a 2-row card: VALUE (white mono bold) on top, FIELD + caret below */
.doc-views[data-view="list"] .doc-card.is-expanded .dcb-sel .dss-toggle {
  display: grid; grid-template-columns: auto 1fr auto;
  grid-template-areas: "dot val val" "key key car";
  width: 100%; height: auto; padding: 7px 11px; border-radius: 4px; column-gap: 7px; row-gap: 3px;
}
.doc-views[data-view="list"] .doc-card.is-expanded .dcb-sel .facet-chip {
  display: grid; grid-template-columns: 1fr auto;
  grid-template-areas: "val val" "key car";
  width: 100%; height: auto; padding: 7px 11px; column-gap: 7px; row-gap: 3px;
}
.doc-views[data-view="list"] .doc-card.is-expanded .dss-curdot   { grid-area: dot; align-self: center; }
.doc-views[data-view="list"] .doc-card.is-expanded .dss-curlabel { grid-area: val; }
.doc-views[data-view="list"] .doc-card.is-expanded .dss-key      { grid-area: key; }
.doc-views[data-view="list"] .doc-card.is-expanded .dss-car      { grid-area: car; align-self: center; justify-self: end; }
.doc-views[data-view="list"] .doc-card.is-expanded .facet-chip .fc-val { grid-area: val; }
.doc-views[data-view="list"] .doc-card.is-expanded .facet-chip .fc-key { grid-area: key; }
.doc-views[data-view="list"] .doc-card.is-expanded .facet-chip .fc-car { grid-area: car; align-self: center; justify-self: end; }
/* the VALUE — white mono bold; the FIELD NAME — muted small-caps "selector" label */
.doc-views[data-view="list"] .doc-card.is-expanded .dcb-sel .dss-curlabel,
.doc-views[data-view="list"] .doc-card.is-expanded .dcb-sel .fc-val {
  color: var(--val-ink); font-weight: 600; font-family: var(--type-mono); font-size: var(--ui-fs-value); letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.doc-views[data-view="list"] .doc-card.is-expanded .dcb-sel .dss-key,
.doc-views[data-view="list"] .doc-card.is-expanded .dcb-sel .fc-key {
  font-size: var(--ui-fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--lbl-ink);
}

/* ── UNIFIED list-view icon buttons ──────────────────────────────────────
   info · LED · arrow: same 26×24 box in BOTH collapsed and expanded states. */
.doc-views[data-view="list"] .doc-card .doc-card-arrow {
  grid-area: arrow; align-self: center; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 24px; margin: 0; padding: 0;
  background: #1A4D6D; border: 1px solid rgba(246,241,231,0.10); border-radius: 3px;
  color: var(--doc-text, #F6F1E7); font-size: var(--ui-fs-value); line-height: 1;
  position: relative;   /* anchor the enlarged hit area below */
}
/* OPEN-DOCUMENT hit area. The visible arrow chip is only 26×24, so a slightly
   off-target click in list view landed on the card and toggled expand instead
   of opening the document ("open link works inconsistently", 2026-06-19 user).
   This invisible pad extends the clickable zone ~9px around the chip WITHOUT
   shifting layout; a click inside it still resolves to .doc-card-arrow, so the
   delegated handler lets the <a> navigate. Asymmetric (more on the right, into
   the empty row gutter) so it never overlaps the adjacent LED / info chips. */
.doc-views[data-view="list"] .doc-card .doc-card-arrow::after {
  content: ""; position: absolute; top: -9px; bottom: -9px; right: -12px; left: -4px;
}
.doc-views[data-view="list"] .doc-card .doc-card-arrow:hover {
  background: color-mix(in srgb, var(--doc-gold) 26%, #1A4D6D); color: var(--doc-gold);
}
.doc-views[data-view="list"] .doc-card .dc-led {
  box-sizing: border-box;
  display: inline-flex; width: 26px; height: 24px; border-radius: 3px;
  background: #1A4D6D; border: 1px solid rgba(246,241,231,0.10);
  box-shadow: none; position: relative;
}
.doc-views[data-view="list"] .doc-card .dc-led::before {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--doc-public-red); box-shadow: 0 0 5px 0 var(--doc-public-red-bright);
}
.doc-views[data-view="list"] .doc-card[data-status="live"]     .dc-led::before { background: var(--doc-public);        box-shadow: 0 0 5px 0 var(--doc-public); }
.doc-views[data-view="list"] .doc-card[data-status="review"]   .dc-led::before { background: var(--doc-review-bright);  box-shadow: 0 0 5px 0 var(--doc-review-bright); }
.doc-views[data-view="list"] .doc-card[data-status="archived"] .dc-led::before { background: var(--doc-archived);      box-shadow: 0 0 5px 0 var(--doc-archived); }

/* status menu opens DOWNWARD */
.doc-views[data-view="list"] .dss-menu {
  top: calc(100% + 5px); bottom: auto; left: 0; right: auto;
}

/* ── TILES — mirror the ROW's information order so the page is consistent in
   either view: title → description → STATUS → chips → uid → metrics → filename.
   (Wrappers stay display:contents; the leaf order matches the list row, and the
   status selector sits with the controls — NOT stranded at the bottom.) */
.doc-views[data-view="tiles"] .dc-band,
.doc-views[data-view="tiles"] .dcb-meta,
.doc-views[data-view="tiles"] .dcb-sel,
.doc-views[data-view="tiles"] .dc-statusrow,
.doc-views[data-view="tiles"] .dc-chips,
.doc-views[data-view="tiles"] .dc-idline,
.doc-views[data-view="tiles"] .dc-fileline { display: contents; }
/* the created date + the "Created/Revised" labels are list-band only */
.doc-views[data-view="tiles"] .m-created,
.doc-views[data-view="tiles"] .m-lbl { display: none; }
.doc-views[data-view="tiles"] .doc-card-title                { order: 0; }
.doc-views[data-view="tiles"] .doc-card-purpose              { order: 1; }
.doc-views[data-view="tiles"] .dc-statusrow .dc-statusbar    { order: 2; }
.doc-views[data-view="tiles"] .dc-chips .dcs-facets          { order: 3; }
.doc-views[data-view="tiles"] .dc-idline .dc-uidrow          { order: 4; }
.doc-views[data-view="tiles"] .dc-idline .dcs-metrics        { order: 5; }
.doc-views[data-view="tiles"] .dc-fileline .doc-card-file    { order: 6; }
/* Tile title — up to TWO lines then ellipsis, so more of the title is legible
   at a glance (left-aligned, still clears the top-right icons). */
.doc-views[data-view="tiles"] .doc-card-title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  white-space: normal; overflow: hidden; text-overflow: ellipsis;
  font-size: var(--ui-fs-value); font-weight: 500; line-height: 1.25;
}