/* ═══════════════════════════════════════════════════════════════════════
   __darmaster/css/darmaster.css — the ONE cockpit skin
   Daralbeida Multi-Entity Platform · 2026-06-03

   Centralized blueprint (document) skin for EVERY page under /__darmaster/
   (the landing, Site Manager /12, Documents, Skins, Sitemap). Cockpit pages
   carry no inline <style> — they require api/darmaster_ui.php and call
   mui_head()/mui_nav(), which link this file. Edit the cockpit's look here,
   once, and it changes everywhere.

   (Entity-SITE / visitor portals use css/base/ + css/skins/ instead — a
   separate design system. This file is admin-only.)
   ═══════════════════════════════════════════════════════════════════════ */

/* DARMASTER cockpit skin = the Sand + Ink Muted palette.
   Light sand body + ink text, dark-ink top nav, muted sand-gold accents. */
:root{
  /* (a) PAGE BACKGROUND = the ONE shared --page-bg token (defined in tokens.css):
     deep entity colour, identical across library/portals/homepages/cockpit. */
  --bg:var(--page-bg);
  --grid:rgba(246,241,231,0.045);   /* faint LIGHT blueprint grid on the deep bg */
  /* (b) cockpit NEUTRALS DERIVE from the DARMASTER skin tokens (text/surface/brand/
     gold — emitted by darx_load_skin), so the SKIN MANAGER controls the cockpit too.
     Old hardcoded values kept as fallbacks for the non-skin case. */
  --panel:var(--surface-color, #F6F1E6);
  --panel2:color-mix(in srgb, var(--surface-color, #F6F1E6) 82%, var(--brand-accent, #A89A7E));
  --ink:var(--text-color, #33312E);
  --dim:color-mix(in srgb, var(--text-color, #33312E) 58%, var(--surface-color, #F6F1E6));
  --gold:#8A7647;   /* the skin emits --gold (overrides this); kept as the fallback */
  --gold-lt:color-mix(in srgb, var(--gold, #8A7647) 78%, #ffffff);
  --line:color-mix(in srgb, var(--text-color, #33312E) 20%, transparent);
  --edge:color-mix(in srgb, var(--gold, #8A7647) 55%, var(--surface-color, #F6F1E6));
  /* FIXED diagram semantics (flow arrows · entity colour-codes · file types) —
     functional colour-codes, NOT the entity skin, so kept constant. */
  --redir:#B06A36; --link:#3E6E92; --tab:#4E8E72;
  --darh:#3E6E9E; --darm:#3E5B33; --darx:#8A6E32; --master:#8A7647;   /* DARM = its brand green */
  /* dark-ink top nav fallback. NOTE: --brand-primary is NOT defined here — it
     is owned by css/skins/entity-darmaster.css (#4A4A4C charcoal), the single
     source. Cockpit pages all load the token pipeline (tokens.css + that entity
     file via darx_load_skin), which overrides --nav-bg below; this stays only
     as a no-pipeline fallback. */
  --nav-bg:#3C3C3E;
  --nav-gold:#C9BBA0; --nav-gold-light:#DDD2BC; --nav-border:rgba(201,187,160,.24);
  --nav-text:rgba(237,227,206,.6); --nav-text-hover:#EDE3CE;
  --php:#3E6E9E; --css:#2E8E7E; --js:#8A6E32; --csv:#3E8E52; --html:#7E4E9E; --json:#A85E42;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);-webkit-font-smoothing:antialiased}
body{
  background-image:
    repeating-linear-gradient(0deg,transparent 0 31px,var(--grid) 31px 32px),
    repeating-linear-gradient(90deg,transparent 0 31px,var(--grid) 31px 32px);
}
.mono{font-family:var(--font-mono)}
a{color:var(--gold)} a.plain{color:inherit;text-decoration:none}

/* ── shared top nav + tab strip (mui_nav) ──────────────────────────────── */
.m-nav{position:sticky;top:0;z-index:50;background:var(--nav-bg);
  border-bottom:1px solid var(--line);box-shadow:0 2px 10px rgba(0,0,0,.3);
  padding:7px 0 0;display:flex;flex-direction:column;gap:4px;
  transition:transform .25s ease}
/* SMART CHROME (2026-06-11): cockpit nav hides on advance, returns on
   scroll-up or a top-edge pointer peek (watcher emitted by mui_nav()). */
html.darx_chrome_hide .m-nav{transform:translateY(-105%)}
html.darx_chrome_hide.darx_chrome_peek_top .m-nav{transform:none}
@media (prefers-reduced-motion: reduce){.m-nav{transition:none}}
.m-nav-top{display:flex;align-items:baseline;gap:10px;max-width:1480px;margin:0 auto;width:100%;padding:0 20px}
.m-home{font-family:var(--font-display);font-size: var(--ui-fs-display);letter-spacing:.08em;text-transform:uppercase;
  color:#EDE3CE;text-decoration:none}
.m-home:hover{text-shadow:0 0 8px color-mix(in srgb,var(--nav-gold,#C9BBA0) 60%,transparent)}
/* nav text colours are set for the DARK ink nav, NOT --dim/--ink (which are tuned for the light body) */
.m-badge{font-family:var(--font-mono);font-size: var(--ui-fs-label);letter-spacing:.2em;text-transform:uppercase;color:rgba(237,227,206,.5)}
.m-tabs{display:flex;flex-wrap:wrap;gap:4px;max-width:1480px;margin:0 auto;width:100%;padding:0 16px 7px}
.m-tabs a{font-family:var(--font-mono);font-size: var(--ui-fs-label);letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:rgba(237,227,206,.62);padding:6px 12px;border:1px solid transparent;border-radius:4px}
.m-tabs a:hover{color:#EDE3CE;background:rgba(255,255,255,.07)}
.m-tabs a.on{color:#0e1922;background:var(--gold);border-color:var(--gold);font-weight:700}

/* ── page shell ────────────────────────────────────────────────────────── */
.wrap{max-width:700px;margin:0 auto;padding:30px 24px 90px}
h1{font-family:var(--font-display);font-size: var(--ui-fs-display);letter-spacing:.05em;margin:0 0 4px;color:#EDE3CE}
.sub{font-family:var(--font-mono);font-size: var(--ui-fs-label);letter-spacing:.22em;text-transform:uppercase;color:var(--nav-gold,#C9BBA0);margin:0 0 20px}
h2{font-family:var(--font-mono);font-size: var(--ui-fs-value);letter-spacing:.2em;text-transform:uppercase;color:var(--nav-gold,#C9BBA0);
  margin:38px 0 18px;padding-bottom:6px;border-bottom:1px solid rgba(246,241,231,.18)}

/* ── dashboard cards ───────────────────────────────────────────────────── */
.dash{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin:0 0 8px}
.card{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:4px;padding:16px 18px}
.card h3{font-family:var(--font-mono);font-size: var(--ui-fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin:0 0 8px}
.card .figure{font-family:var(--font-mono);font-size: var(--ui-fs-display);color:var(--gold-lt);line-height:1}
.card .meta{font-family:var(--font-mono);font-size: var(--ui-fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:4px}
.card a{display:inline-block;margin-top:12px;font-family:var(--font-mono);font-size: var(--ui-fs-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);text-decoration:none;border-bottom:1px solid currentColor}
.entitychips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.entitychips a{font-family:var(--font-mono);font-size: var(--ui-fs-label);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;background:var(--panel2);border:1px solid var(--line);border-radius:99px;padding:4px 11px}
.entitychips a:hover{border-color:var(--gold);color:var(--gold)}

/* ── legend ────────────────────────────────────────────────────────────── */
.legend{display:flex;flex-wrap:wrap;gap:8px 20px;font-family:var(--font-mono);font-size: var(--ui-fs-label);color:rgba(237,227,206,.62);margin-bottom:6px}
.legend b{color:#EDE3CE}
.ek{display:inline-block;width:26px;height:0;border-top:3px solid var(--link);vertical-align:middle;margin-right:6px}
.ek.redir{border-top-style:dashed;border-top-color:var(--redir)}
.ek.tab{border-top-color:var(--tab)}

/* ── sitemap nodes ─────────────────────────────────────────────────────── */
.node{display:inline-block;background:var(--panel);border:1px solid var(--line);border-radius:4px;
  padding:8px 12px;text-align:center;min-width:120px;position:relative}
.node .u{font-family:var(--font-mono);font-size: var(--ui-fs-label);font-weight:700;color:var(--ink);letter-spacing:.02em}
.node .d{font-family:var(--font-mono);font-size: var(--ui-fs-label);color:var(--dim);margin-top:2px;letter-spacing:.04em}
.node.home{border-color:var(--gold);background:var(--panel2)}
.node.home .u{font-size: var(--ui-fs-value);color:var(--ink)}
.node.cock{border-left:4px solid var(--master)}
.node.portal{min-width:96px;padding:7px 9px}
.node.portal .u{font-size: var(--ui-fs-label)}
.node.portal .cnt{display:inline-block;margin-top:4px;font-family:var(--font-mono);font-size: var(--ui-fs-label);font-weight:700;
  color:#0e1922;background:var(--gold);border-radius:99px;padding:1px 8px}
.node.portal .cnt.zero{background:#D8CDB6;color:#6F6A60}
.home.darh{border-color:var(--darh)} .home.darm{border-color:var(--darm)} .home.darx{border-color:var(--darx)}
.home.darh .u{color:var(--darh)} .home.darm .u{color:var(--darm)} .home.darx .u{color:var(--darx)}
.tagline{font-family:var(--font-mono);font-size: var(--ui-fs-label);color:var(--dim);margin-top:3px}

/* ── redirect / flow spine ─────────────────────────────────────────────── */
.spine{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:0}
/* arrow = glyph with its label STACKED beneath it (no absolute overlap) */
.arrow{display:inline-flex;flex-direction:column;align-items:center;line-height:1.05;
  font-family:var(--font-mono);color:var(--link);padding:0 2px}
.arrow b{font-size: var(--ui-fs-display);font-weight:700}
.arrow small{margin-top:2px;font-size: var(--ui-fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:600;white-space:nowrap}
.arrow.redir{color:var(--redir)}
.branch{display:flex;gap:10px;flex-wrap:wrap}

/* ── collapsible section (legend · entry · redirects) — folded by default ─────
   A clearly-clickable bar: chevron + label on the left, a Show/Hide pill on the
   right (text swaps via ::after on open). Keeps the page top clean. */
.fold{margin:0 0 16px}
.fold > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:9px;
  /* SAME recipe as the footer nav buttons (.darx-foot-btn): bevel gradient over
     --nav-bg, --nav-gold edge, lit highlight, gold-halo + lift on hover — 2026-06-19 user. */
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--nav-bg, #2E2A24) 82%, #000) 0%,
    color-mix(in srgb, var(--nav-bg, #2E2A24) 88%, #fff) 100%);
  border:1px solid color-mix(in srgb, var(--nav-gold, var(--gold)) 32%, transparent);border-radius:4px;padding:8px 12px;
  box-shadow:inset 0 1px 0 rgba(246,241,231,0.10), inset 0 -1px 0 rgba(0,0,0,0.32), 0 1px 0 rgba(0,0,0,0.22);
  font-family:var(--font-mono);font-size: var(--ui-fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--nav-text, var(--nav-gold, var(--gold)));
  transition:color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .10s ease}
.fold > summary:hover{border-color:var(--nav-gold, var(--gold));color:var(--nav-text-hover, var(--nav-gold, var(--gold)));
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--nav-bg, #2E2A24) 74%, #fff) 0%,
    color-mix(in srgb, var(--nav-bg, #2E2A24) 86%, #fff) 100%);
  box-shadow:inset 0 1px 0 rgba(246,241,231,0.22), inset 0 -1px 0 rgba(0,0,0,0.36),
    0 0 0 1px color-mix(in srgb, var(--nav-gold, var(--gold)) 55%, transparent),
    0 0 14px -2px color-mix(in srgb, var(--nav-gold, var(--gold)) 65%, transparent);
  transform:translateY(-1px)}
.fold > summary::-webkit-details-marker{display:none}
.fold .fold-chev{flex:0 0 auto;color:var(--nav-gold, var(--gold));font-size: var(--ui-fs-value);transition:transform .15s ease}
.fold[open] .fold-chev{transform:rotate(90deg)}
.fold .fold-label{flex:1 1 auto}
.fold .fold-toggle{flex:0 0 auto;font-size: var(--ui-fs-label);letter-spacing:.06em;color:#1c1205;background:var(--nav-gold, var(--gold));border-radius:999px;padding:2px 11px}
.fold .fold-toggle::after{content:'Show'}
.fold[open] .fold-toggle::after{content:'Hide'}
.fold .fold-body{padding:13px 4px 2px}
.fold .fold-body .legend{margin:0 0 12px}
.fold .fold-body .note{margin-top:10px}

/* ── org-chart tree ────────────────────────────────────────────────────── */
.tree{text-align:center;overflow-x:auto;padding-bottom:6px}
.tree ul{display:flex;justify-content:center;position:relative;padding:20px 0 0;margin:0;list-style:none}
.tree ul::before{content:'';position:absolute;top:0;left:50%;width:0;height:20px;border-left:2px solid var(--edge)}
.tree li{position:relative;padding:20px 6px 0;display:flex;flex-direction:column;align-items:center}
.tree li::before,.tree li::after{content:'';position:absolute;top:0;right:50%;width:50%;height:20px;border-top:2px solid var(--edge)}
.tree li::after{right:auto;left:50%;border-left:2px solid var(--edge)}
.tree li:only-child::before,.tree li:only-child::after{display:none}
.tree li:first-child::before,.tree li:last-child::after{border:0 none}
.tree li:last-child::before{border-right:2px solid var(--edge)}
.tree > ul{padding-top:0} .tree > ul::before{display:none}
.tree .stub > ul::before{border-color:var(--tab)}
.tree .stub li::before,.tree .stub li::after,.tree .stub li:last-child::before{border-color:var(--tab)}
a.plain:hover .node{border-color:var(--gold)}
.crosslink{font-family:var(--font-mono);font-size: var(--ui-fs-label);color:var(--redir);margin-top:4px;letter-spacing:.04em}

/* ── orientation toggle (Vertical ⇄ Horizontal) ────────────────────────── */
.map-ctrl{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-family:var(--font-mono)}
.map-ctrl-lbl{font-size: var(--ui-fs-label);letter-spacing:.18em;text-transform:uppercase;color:rgba(237,227,206,.62)}
.map-btn{font-family:var(--font-mono);font-size: var(--ui-fs-label);letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:5px 11px;cursor:pointer}
.map-btn:hover{color:var(--ink);border-color:var(--gold)}
.map-btn.on{background:var(--gold);color:#0e1922;border-color:var(--gold);font-weight:700}

/* HORIZONTAL trees (left → right) — the top→down rules above, transposed 90°.
   Toggled by body.map-h (the orientation button). */
body.map-h .tree ul{flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:0 0 0 26px}
body.map-h .tree > ul{padding-left:0}
body.map-h .tree ul::before{top:50%;left:0;width:26px;height:0;border-left:0;border-top:2px solid var(--edge)}
body.map-h .tree > ul::before{display:none}
body.map-h .tree li{padding:7px 0 7px 26px;flex-direction:row;align-items:center}
body.map-h .tree li::before,body.map-h .tree li::after{top:auto;bottom:50%;left:0;right:auto;width:26px;height:50%;border-top:0;border-left:2px solid var(--edge)}
body.map-h .tree li::after{bottom:auto;top:50%;border-top:2px solid var(--edge)}
body.map-h .tree li:only-child::before,body.map-h .tree li:only-child::after{display:none}
body.map-h .tree li:first-child::before,body.map-h .tree li:last-child::after{border:0 none}
body.map-h .tree li:last-child::before{border-left:2px solid var(--edge);border-bottom:2px solid var(--edge)}
body.map-h .tree .stub li::before,body.map-h .tree .stub li::after,body.map-h .tree .stub li:last-child::before{border-color:var(--tab)}

/* ── panels / hubs / notes ─────────────────────────────────────────────── */
.panel{background:rgba(19,34,46,.5);border:1px solid var(--line);border-radius:4px;padding:16px 14px 20px;margin:0 0 18px}
.panel > .cap{font-family:var(--font-mono);font-size: var(--ui-fs-label);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 8px}
.note{font-size: var(--ui-fs-label);color:var(--dim);line-height:1.55;background:var(--panel);border:1px dashed var(--line);border-radius:4px;padding:10px 12px;margin:10px 0 0}
.note b{color:var(--ink)}

/* ── 4-UP SITE-MAP COLUMNS (sitemap.php) ────────────────────────────────────
   The master cockpit + 3 entity sites render as four narrow columns side by
   side; each column stacks its section nodes vertically (maximise vertical
   use, minimise width). The sitemap page widens via .wrap-sitemap. */
/* 2026-06-15 (user): the sitemap content column = the HEADER column exactly —
   700px + 14px side padding + 5px grid gap (same as .darx-nav-sections in
   module_nav_sections.css), so the 4 mini-sitemaps line up edge-to-edge UNDER
   the 4 nav tiles, never wider than the header. */
.wrap-sitemap{max-width:700px;padding-left:14px;padding-right:14px}
/* 2026-06-15 (user): ALWAYS four columns side by side at ANY window width — the
   tracks are flexible (minmax(0,1fr)) and SHRINK to fit instead of reflowing to
   2-up / 1-up. mapcol + inner nodes carry min-width:0 and the text wraps, so the
   four columns never force horizontal overflow even on a phone. */
.maps4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;align-items:start;margin:0 0 12px;width:100%}
.maps4 .mapcol{min-width:0}
.maps4 .node,.maps4 .node.portal{min-width:0}
.maps4 .u,.maps4 .hometitle,.maps4 .mapcol>.cap,.maps4 .sf-label,.maps4 .cf-name{min-width:0;overflow-wrap:break-word}
/* each column = the entity's own colour ("page"); bands sit on top as library tabs */
.maps4 .mapcol{position:relative;margin:0;padding:8px 7px 10px;display:flex;flex-direction:column;
  background:color-mix(in srgb, var(--col,var(--edge)) 30%, var(--bg));
  border:1px solid color-mix(in srgb, var(--col,var(--edge)) 50%, var(--line));
  border-top:4px solid var(--col,var(--edge));
  box-shadow:0 1px 2px rgba(40,32,16,.10);
  transition:box-shadow .22s ease}
.maps4 .mapcol:hover{box-shadow:0 9px 28px -10px color-mix(in srgb,var(--col,#000) 55%, rgba(40,32,16,.45))}
/* column header: FULL entity name in dark ink (readable on the tint) + total pill */
/* header = full entity name, CENTERED + always 2 lines tall (so headers align
   across columns), underlined with a line in the entity's colour */
.maps4 .mapcol > .cap{display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:calc(2 * 1.3em + 8px);font-size: var(--ui-fs-label);font-weight:700;margin:0 0 8px;padding-bottom:6px;color:#EDE3CE;line-height:1.3;
  border-bottom:2px solid var(--col,var(--gold))}
/* MAIN (home / landing) page = vertical card: TITLE on top, thumbnail below.
   Path + keywords were moved into the page's collapsible legend/entry fold. */
.maps4 .colhome{display:block;margin:0 0 8px;text-decoration:none}
.maps4 .colhome .node{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;
  width:100%;box-sizing:border-box;padding:8px;background:var(--panel);border-color:var(--col,var(--gold));
  transition:transform .15s ease, box-shadow .15s ease}
.maps4 .colhome:hover .node{transform:translateY(-2px);box-shadow:0 5px 14px -6px color-mix(in srgb,var(--col,#000) 50%, transparent)}
/* page title — ALWAYS exactly 2 lines (min-height fills 1-liners, clamp caps long ones) */
.maps4 .colhome .hometitle{font-family:var(--font-body);font-weight:700;font-size: var(--ui-fs-label);line-height:1.2;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em}
/* visible TOTAL DOCS bar (sits above the collapsible sections) */
.maps4 .col-total,
.maps4 .col-files{margin:0 0 8px;padding:6px 9px;background:#F8F4EA;border:1px solid color-mix(in srgb,var(--col) 30%,var(--line));border-radius:4px}
.maps4 .col-total{display:flex;align-items:center;justify-content:space-between;gap:8px}
.maps4 .col-total .ct-lbl{font-family:var(--font-mono);font-size: var(--ui-fs-label);text-transform:uppercase;letter-spacing:.06em;color:var(--dim);font-weight:700}
/* col-files: linked TXT / HTML / IMG file counts → their repositories */
.maps4 .col-files{display:flex;flex-direction:column;gap:3px}
.maps4 .col-files .cf-head{font-family:var(--font-mono);font-size: var(--ui-fs-micro);text-transform:uppercase;letter-spacing:.09em;color:var(--dim);font-weight:700;margin-bottom:2px}
.maps4 .col-files .cf-row{display:flex;align-items:center;justify-content:space-between;gap:8px;text-decoration:none;padding:1px 0}
.maps4 .col-files .cf-name{font-family:var(--font-mono);font-size: var(--ui-fs-label);letter-spacing:.04em;color:var(--ink);border-bottom:1px solid transparent}
.maps4 .col-files .cf-row:hover .cf-name{color:var(--col);border-bottom-color:var(--col)}
.maps4 .col-total .cnt-total,
.maps4 .col-files .cnt-total{padding:1px 9px 2px;border-radius:999px;min-width:18px;text-align:center;
  background:color-mix(in srgb,var(--col) 12%,#F4EEE2);border:1px solid color-mix(in srgb,var(--col) 32%,rgba(0,0,0,.12));
  box-shadow:inset 0 2px 3px rgba(0,0,0,.30),inset 0 -1px 0 rgba(255,255,255,.70);
  color:var(--col);font-size: var(--ui-fs-label);font-weight:700;text-shadow:0 1px 0 rgba(255,255,255,.55);
  font-family:var(--font-mono)}  /* 2026-06-11: was inheriting body Literata — only serif digits on the page */
/* Files + Tools now live inside their own collapsible sec-fold → drop the
   standalone box chrome (the fold summary is the container). */
.maps4 .sec-fold > .col-files{margin:6px 0 0;padding:0 2px;background:none;border:0}
.maps4 .sec-fold > .cocktools{margin:6px 0 0;padding:0;border-top:0}
/* collapsible "Pages & files" per column (thumbnails load only when opened) */
.maps4 .sec-fold{margin:0 0 8px}
.maps4 .sec-fold > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:7px;
  background:#F8F4EA;border:1px solid color-mix(in srgb,var(--col) 30%,var(--line));border-radius:4px;padding:6px 9px;
  font-family:var(--font-mono);font-size: var(--ui-fs-label);letter-spacing:.07em;text-transform:uppercase;color:var(--ink);
  transition:border-color .15s ease, background .15s ease}
.maps4 .sec-fold > summary:hover{border-color:var(--col);background:color-mix(in srgb,var(--col) 8%,#F8F4EA)}
.maps4 .sec-fold > summary::-webkit-details-marker{display:none}
.maps4 .sf-chev{flex:0 0 auto;color:var(--col);font-size: var(--ui-fs-value);transition:transform .15s ease}
.maps4 .sec-fold[open] .sf-chev{transform:rotate(90deg)}
.maps4 .sf-label{flex:1 1 auto;font-weight:700}
/* 2026-06-15 (user): the big SHOW / HIDE pill is gone — the tiny rotating
   .sf-chev triangle (left of the label) is the only open/close mark now. */
.maps4 .sf-toggle{display:none}
.maps4 .sec-fold > ul.colsec{margin-top:6px}
/* Per-section collapsible toggle (entity sitemap $deep mode). Each section row +
   its doc list is wrapped in <details class="sec-row">; the summary IS the row. */
.maps4 .sec-row > summary{list-style:none;display:block;cursor:pointer}
.maps4 .sec-row > summary::-webkit-details-marker{display:none}
.maps4 .sec-row .sr-chev{flex:0 0 6px;min-width:0;width:6px;max-width:6px;overflow:visible;color:var(--col);font-size: var(--ui-fs-value);transition:transform .15s ease}
.maps4 .sec-row[open] .sr-chev{transform:rotate(90deg)}
.maps4 .sec-row > summary:hover .node.portal{transform:translateY(-1px);filter:brightness(1.05);
  box-shadow:0 3px 8px -4px rgba(40,32,16,.4)}
/* entry-points list inside the page-level legend fold (paths + keywords) */
.entrylist{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.entrylist .entry{display:flex;flex-direction:column;gap:1px;text-decoration:none;padding:6px 9px;border-radius:4px;
  background:var(--panel);border:1px solid var(--line);transition:border-color .14s ease}
.entrylist .entry:hover{border-color:var(--gold)}
.entrylist .en-name{font-family:var(--font-mono);font-size: var(--ui-fs-label);font-weight:700;color:var(--ink);letter-spacing:.02em}
.entrylist .en-path{font-family:var(--font-mono);font-size: var(--ui-fs-label);color:var(--gold)}
.entrylist .en-kw{font-family:var(--font-mono);font-size: var(--ui-fs-label);color:var(--dim)}
/* vertical section list — no tree connectors, compact rows */
.maps4 ul.colsec{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.maps4 ul.colsec li{margin:0}
.maps4 ul.colsec li.colgap{margin-top:9px;padding-top:9px;border-top:1px dashed var(--line)}  /* separate cockpit tools from sections */
.maps4 ul.colsec a.plain{display:block;text-decoration:none}
/* SECTION band = EXACT document-library section tab (08/skin.css §25): a
   top-light sheen gradient over a 44% entity tint, 5px entity left-bar, ink text. */
.maps4 .node.portal{display:flex;align-items:center;gap:6px;min-width:0;width:100%;box-sizing:border-box;padding:5px 7px;
  background:linear-gradient(180deg, rgba(255,255,255,.13), rgba(0,0,0,.05)),
             color-mix(in srgb, var(--col,var(--tab)) 44%, #F6F1E6);
  border:1px solid color-mix(in srgb, var(--col,var(--tab)) 38%, transparent);
  border-left:5px solid var(--col,var(--tab));border-radius:4px;
  transition:transform .14s ease, box-shadow .14s ease, filter .14s ease}
.maps4 .node.portal .u{font-size: var(--ui-fs-label);font-weight:600;letter-spacing:.02em;line-height:1.2;white-space:normal;flex:1 1 auto;text-align:left;color:#33312E}
.maps4 .node.portal .d{display:none}
.maps4 .node.portal .pg-path{font-weight:700}
.maps4 .pgsep{opacity:.5;font-weight:400}
/* count chip = the §6 DEBOSSED pill: light well, recessed inset shadow + bottom
   highlight, entity-colour numeral engraved with a white text-shadow. */
.maps4 .node.portal .cnt{margin:0;flex:0 0 auto;padding:2px 7px;border-radius:999px;min-width:31px;text-align:center;
  background:color-mix(in srgb, var(--col,var(--gold)) 10%, #F4EEE2)!important;
  border:1px solid color-mix(in srgb, var(--col,var(--gold)) 32%, rgba(0,0,0,.12))!important;
  box-shadow:inset 0 2px 3px rgba(0,0,0,.30), inset 0 -1px 0 rgba(255,255,255,.70)!important;
  color:var(--col,var(--gold))!important;font-size: var(--ui-fs-label);font-weight:700;
  text-shadow:0 1px 0 rgba(255,255,255,.55)}
.maps4 .node.portal .cnt.zero{opacity:.7}
/* disclosure caret at the far right — links only (not the repo info rows) */
.maps4 a.plain .node.portal::after{content:'\203A';flex:0 0 auto;font-size: var(--ui-fs-value);line-height:1;font-weight:700;color:var(--col,var(--gold));opacity:.8}
/* hover — gentle lift + sheen brighten */
.maps4 ul.colsec a.plain:hover .node.portal{transform:translateY(-1px);filter:brightness(1.05);
  box-shadow:0 3px 8px -4px rgba(40,32,16,.4)}
/* page-thumbnail at the start of each bubble — a lazy iframe rendered at desktop
   width and scaled down into a small clipped box (pointer-events off so the row
   link still works). Heavy-ish (one iframe per bubble) but lazy-loaded. */
.maps4 .pthumb{flex:0 0 auto;width:34px;height:26px;border-radius:3px;overflow:hidden;background:#fff;
  border:1px solid rgba(0,0,0,.18);position:relative}
.maps4 .pthumb iframe{position:absolute;top:0;left:0;width:1100px;height:825px;border:0;
  transform:scale(.0309);transform-origin:top left;pointer-events:none}
/* main (home / landing) page thumbnail — larger preview (~125px wide) */
.maps4 .pthumb-lg{width:125px;height:94px;border-radius:4px}
.maps4 .pthumb-lg iframe{transform:scale(.1136)}
/* ── 2-ROW SECTION BAND (2026-06-15, user) ────────────────────────────────────
   A light colour CARD per section: row 1 = centred preview thumbnail (links to
   the section); row 2 = "NN | Name" + count (the summary deploys the section's
   document list inline; .sec-band-empty just links). The card carries the colour;
   the row-2 info bar is transparent. */
.maps4 li.sec-band{list-style:none;margin:0 0 6px;padding:6px 6px 7px;border-radius:4px;
  background:linear-gradient(180deg, rgba(255,255,255,.13), rgba(0,0,0,.05)),
             color-mix(in srgb, var(--col,var(--tab)) 44%, #F6F1E6);
  border:1px solid color-mix(in srgb, var(--col,var(--tab)) 38%, transparent);
  border-left:5px solid var(--col,var(--tab))}
.maps4 .sb-thumb{display:flex;justify-content:center;text-decoration:none;margin:0 0 6px}
.maps4 .pthumb-band{width:96px;height:72px;max-width:100%;border-radius:4px}
.maps4 .pthumb-band iframe{transform:scale(.0873)}
.maps4 .sb-thumb:hover .pthumb-band{box-shadow:0 0 0 2px color-mix(in srgb,var(--col) 55%, transparent)}
.maps4 .sb-info-link{display:block;text-decoration:none}
.maps4 .sec-band .sec-row{margin:0}
.maps4 .sec-band .sec-row > summary{list-style:none;cursor:pointer}
.maps4 .sec-band .sec-row > summary::-webkit-details-marker{display:none}
/* row-2 info bar — transparent (the card already carries the colour) */
/* 2026-06-15 (user): the name/count box = the ENTITY COLOUR, on TWO lines —
   name left (line 1), count right (line 2); text colour from the skin. */
.maps4 .sec-band .node.portal.sb-info{width:100%;padding:6px 9px;border:0;border-radius:4px;
  background:var(--col,var(--gold));color:var(--nav-text-hover,#EDE3CE);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px 6px;transition:filter .14s ease}
.maps4 .sec-band .node.portal.sb-info .u{flex:1 1 100%;text-align:left;color:inherit;overflow-wrap:break-word;
  font-size: var(--ui-fs-label);font-weight:700;letter-spacing:.02em;
  padding-bottom:4px;border-bottom:1px solid color-mix(in srgb, var(--nav-text-hover,#EDE3CE) 24%, transparent)}
/* count = a tidy BOXED chip — recessed dark pill with light skin text on the colour */
.maps4 .sec-band .node.portal.sb-info .cnt{flex:0 0 auto;min-width:20px;text-align:center;
  padding:1px 8px 2px;border-radius:99px;font-size: var(--ui-fs-label);font-weight:800;line-height:1.35;
  font-variant-numeric:tabular-nums;color:var(--nav-text-hover,#EDE3CE)!important;
  background:rgba(0,0,0,0.22)!important;
  border:1px solid color-mix(in srgb, var(--nav-text-hover,#EDE3CE) 30%, transparent)!important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.3)!important;text-shadow:none!important}
.maps4 .sec-band .node.portal.sb-info .sr-chev,
.maps4 .sec-band .sb-info-link .node.portal.sb-info::after{color:inherit;opacity:.8}
.maps4 .sec-band .sec-row > summary:hover .sb-info,
.maps4 .sec-band .sb-info-link:hover .sb-info{filter:brightness(1.05)}
/* the DEPLOYED document list — each title is its own list ROW: the ONE platform
   list-row fill (--row-bg, default near-white #F6F1E6), shared with the section
   pages (.portal-row) + the doc-library file rows; skin text colour on top. */
.maps4 .sec-band .colsec-docs{list-style:none;margin:6px 1px 1px;padding:6px 4px 1px 8px;
  border-top:1px solid color-mix(in srgb, var(--col,var(--gold)) 32%, transparent);
  display:flex;flex-direction:column;gap:3px}
.maps4 .sec-band .colsec-docs li{margin:0}
.maps4 .sec-band .colsec-docs a{display:block;font: 500 var(--ui-fs-label)/1.35 var(--font-mono);
  background:var(--row-bg, var(--surface-color, #F6F1E6));
  color:var(--text-color,#33312E);
  padding:3px 7px;border-radius:3px;
  border-left:2px solid color-mix(in srgb, var(--col,var(--gold)) 60%, transparent);
  text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.maps4 .sec-band .colsec-docs a:hover{color:var(--col,var(--gold));
  border-left-color:var(--col,var(--gold));
  filter:brightness(.97)}
/* repository info rows (TXT / HTML file counts) — muted, non-interactive, no caret */
.maps4 li.reporow .node.repo{background:transparent;border-style:dashed;border-left-style:solid;cursor:default;padding:3px 7px}
.maps4 li.reporow .node.repo .u{font-size: var(--ui-fs-micro);color:var(--dim);text-transform:uppercase;letter-spacing:.04em}
.maps4 li.reporow .node.repo::after{display:none}
.maps4 .cnt-mini{padding:0 6px 1px!important;font-size: var(--ui-fs-label)!important;min-width:0!important;
  background:rgba(255,255,255,.4)!important;border:1px solid color-mix(in srgb,var(--col) 25%, var(--line))!important;
  color:var(--dim)!important;box-shadow:none!important;text-shadow:none!important}
/* TOTAL DOCS row — the relocated grand total, after the repo counts; emphasised */
.maps4 li.reprow-total{margin-top:3px;padding-top:5px;border-top:2px solid var(--col,var(--gold))}
.maps4 li.reprow-total .node.repo{border-style:solid;border-color:transparent}
.maps4 li.reprow-total .node.repo .u{color:var(--ink)!important;font-weight:700}
/* the total chip keeps the debossed §6 look (entity numeral) — it is NOT .cnt-mini */
/* tools grid — replicated in EVERY column (2-up small chips) */
.maps4 .cocktools{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:8px;padding-top:8px;
  border-top:1px dashed color-mix(in srgb,var(--col) 32%, var(--line))}
.maps4 .cocktools a.ctool{display:block;box-sizing:border-box;text-align:center;text-decoration:none;
  background:var(--panel);border:1px solid color-mix(in srgb,var(--col) 28%, var(--line));border-radius:4px;padding:5px 4px;color:var(--ink);
  font-family:var(--font-mono);font-size: var(--ui-fs-label);letter-spacing:.01em;
  transition:border-color .14s ease, background .14s ease}
.maps4 .cocktools a.ctool:hover{border-color:var(--col,var(--gold));background:color-mix(in srgb,var(--col,#000) 8%,var(--panel))}
/* staggered column entrance (respects reduced-motion) */
@media(prefers-reduced-motion:no-preference){
  @keyframes mapcolIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
  .maps4 .mapcol{animation:mapcolIn .5s cubic-bezier(.2,.7,.2,1) both}
  .maps4 .mapcol:nth-child(1){animation-delay:.03s}
  .maps4 .mapcol:nth-child(2){animation-delay:.10s}
  .maps4 .mapcol:nth-child(3){animation-delay:.17s}
  .maps4 .mapcol:nth-child(4){animation-delay:.24s}
}
/* 2026-06-15 (user): NO responsive collapse — the cockpit sitemap stays 4-up at
   EVERY width (columns shrink to fit). The per-entity /08/sitemap.php uses
   .maps4.maps-one (single column) and is unaffected by the 4-col rule above. */

/* tables (Documents tab) */
table.m-tbl{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size: var(--ui-fs-label)}
table.m-tbl th,table.m-tbl td{padding:6px 8px;text-align:left;border-bottom:1px solid var(--line)}
table.m-tbl th{background:rgba(214,169,76,.1);letter-spacing:.1em;text-transform:uppercase;font-size: var(--ui-fs-label);color:var(--gold)}
table.m-tbl tr:hover td{background:rgba(255,255,255,.03)}
.st-live{color:#7fd18a;font-weight:700} .st-off{color:var(--dim)}