/* ═══════════════════════════════════════════════════════════════════════
   __darmaster/css/base/portal.css
   Daralbeida Multi-Entity Platform · v1.0 · 2026-06-03

   Generic layout for entity section portals. Holds the grid, container,
   document-card, and toolbar styling that every entity shares. Entity
   skins layer palette and typographic accents on top.
   ═══════════════════════════════════════════════════════════════════════ */

main.portal {
  max-width: 700px;
  margin: 0 auto 24px;   /* top=0: toolbar is flush under the nav; bottom kept */
  padding: 0 14px;
  font-family: var(--font-body);
  color: var(--nav-text-hover, rgba(246,241,231,.9));   /* on the DEEP portal bg, default on-page text is light */
}
/* FULL-WIDTH variant (v2.0 pages, e.g. /13/wlmap) — opt in with
   <main class="portal portal-wide">; the column drops its max-width so the content
   (map, tables) spans the available window width. (user 2026-06-29) */
main.portal.portal-wide { max-width: none; padding: 0 28px; }

.portal-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.portal-title {
  font-family: var(--font-display);
  font-size: var(--ui-fs-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
  color: var(--nav-text-hover, rgba(246,241,231,.95));   /* light title on deep bg */
}
.portal-count {
  font-family: var(--font-mono);
  font-size: var(--ui-fs-title);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nav-gold, #C9BBA0);
  opacity: 0.95;
}

/* ── Section-portal header objects ───────────────────────────────────────
   Three DISTINCT, skinnable classes for the section-page header trio, mapped
   onto the EXISTING elements (no new text — B mapping):
     .section-main-header  → section title  (.portal-title)
     .section-subtitle     → document count (.portal-count)
     .section-label        → toolbar breadcrumb (.ptb-crumb)
   Each reads a dedicated --section-* token that FALLS BACK to the platform
   token, so the default look is unchanged yet every property is themable
   per entity/section from the skin manager (skinnable). No new fonts: the
   main header stays var(--font-display) = Cinzel Decorative.
   Empty element → the object's own name shows as a faint placeholder. */
.section-main-header {
  font-family: var(--section-header-font, var(--font-display));   /* Cinzel Decorative */
  color:       var(--section-header-color, var(--nav-text-hover, rgba(246,241,231,.95)));
}
.section-subtitle {
  font-family: var(--section-subtitle-font, var(--font-mono));
  color:       var(--section-subtitle-color, var(--nav-gold, #C9BBA0));
}
.section-label {
  font-family: var(--section-label-font, inherit);   /* inherit: leave the populated breadcrumb untouched */
  color:       var(--section-label-color, inherit);
}
/* Portal toolbar breadcrumb onto the ladder (it was inheriting an off-ladder size). */
.ptb-crumb, .ptb-crumb-entity, .ptb-crumb-num, .ptb-crumb-name { font-size: var(--ui-fs-label); }
.section-main-header:empty::before { content: 'Section Main Header'; }
.section-subtitle:empty::before    { content: 'Section Subtitle'; }
.section-label:empty::before       { content: 'Section Label'; }
.section-main-header:empty::before,
.section-subtitle:empty::before,
.section-label:empty::before       { opacity: .45; font-style: italic; }

.portal-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap, 6px);
}

.portal-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  /* list-row fill — ONE skin token shared with the small sitemap doc rows and
     the doc-library file rows (--row-bg, default = the platform near-white). */
  background: var(--row-bg, var(--surface-color, #F6F1E6));
  border: 1px solid rgba(184, 131, 42, 0.20);
  border-left: 3px solid var(--brand-accent);
  border-radius: var(--radius, 0);
  box-shadow: var(--shadow, none);
  transition: border-color 0.15s ease, transform 0.15s ease,
              box-shadow 0.15s ease;
}
.portal-row:hover {
  border-color: var(--gold);
  transform: translateY(-1px);
  box-shadow: var(--shadow-strong, 0 6px 18px rgba(20,10,4,0.32));
}

.portal-row .ext-tag {
  font-family: var(--font-mono);
  font-size: var(--ui-fs-value);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 2px 6px;
  border: 1px solid rgba(184, 131, 42, 0.45);
}

.portal-row a.row-title {
  font-family: var(--font-mono);
  font-size: var(--ui-fs-value);
  letter-spacing: 0.01em;
  color: var(--text-color);
  text-decoration: none;
}
.portal-row a.row-title:hover { color: var(--link-color); }

.portal-row .row-id {
  font-family: var(--font-mono);
  font-size: var(--ui-fs-value);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(28, 20, 16, 0.55);
  display: block;
  margin-top: 2px;
}

.portal-row .row-meta {
  font-family: var(--font-mono);
  font-size: var(--ui-fs-value);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(28, 20, 16, 0.55);
}

.portal-empty {
  margin: 32px 0;
  padding: 24px;
  text-align: center;
  border: 1px dashed color-mix(in srgb, var(--nav-gold, #B8832A) 40%, transparent);
  color: var(--nav-text, rgba(246,241,231,.55));
  font-family: var(--font-mono);
  font-size: var(--ui-fs-title);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ── ENTITY COLOUR-CODING + master grouping ──────────────────────────────
   Each row's left bar + entity tag take its entity's brand colour; the master
   "all entities" view also gets a colour-coded header per entity group. */
:root { --ent-darx: #8A6E32; --ent-darh: #3E6E9E; --ent-darm: #3E5B33; }
.portal-row[data-entity="DARX"] { border-left-color: var(--ent-darx); }
.portal-row[data-entity="DARH"] { border-left-color: var(--ent-darh); }
.portal-row[data-entity="DARM"] { border-left-color: var(--ent-darm); }
.portal-row[data-entity="DARX"]:hover { border-color: var(--ent-darx); }
.portal-row[data-entity="DARH"]:hover { border-color: var(--ent-darh); }
.portal-row[data-entity="DARM"]:hover { border-color: var(--ent-darm); }
.portal-row[data-entity="DARX"] .row-meta strong { color: var(--ent-darx); }
.portal-row[data-entity="DARH"] .row-meta strong { color: var(--ent-darh); }
.portal-row[data-entity="DARM"] .row-meta strong { color: var(--ent-darm); }

.portal-entity-head {
  display: flex; align-items: center; gap: 10px;
  margin: 20px 0 2px; padding: 0 2px;
  font-family: var(--font-mono); font-size: var(--ui-fs-value); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--nav-gold, #C9BBA0);
}
.portal-entity-head:first-child { margin-top: 0; }
.portal-entity-head::before {
  content: ""; flex: 0 0 auto; width: 11px; height: 11px; border-radius: 2px;
  background: var(--brand-accent);
}
.portal-entity-head .pe-count { margin-left: auto; opacity: 0.7; }
.portal-entity-head[data-entity="DARX"] { color: color-mix(in srgb, var(--ent-darx) 52%, #fff); }
.portal-entity-head[data-entity="DARX"]::before { background: var(--ent-darx); }
.portal-entity-head[data-entity="DARH"] { color: color-mix(in srgb, var(--ent-darh) 52%, #fff); }
.portal-entity-head[data-entity="DARH"]::before { background: var(--ent-darh); }
.portal-entity-head[data-entity="DARM"] { color: color-mix(in srgb, var(--ent-darm) 52%, #fff); }
.portal-entity-head[data-entity="DARM"]::before { background: var(--ent-darm); }