/* ════════════════════════════════════════════════════════════════
   PERISPACE page — personal space layout.
   Builds on dataroom-shared.css (.row/.rows/.toast/.peri-*) + the
   colors_and_type.css token :root. Scoped under .peri-page / .peri-*.
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   FIXED APP-SHELL (scoped to body.peri-page) — the white sheet becomes a
   fixed-height workspace: the sidebar is pinned full-height, only the main
   column + footer scroll. Other dataroom pages keep their normal document
   scroll (these rules never leave .peri-page). Reverts to normal flow on
   mobile (see the ≤880px block at the foot of this file).
   ════════════════════════════════════════════════════════════════ */
body.peri-page .app { height: 100dvh; min-height: 0; overflow: hidden; }
body.peri-page .shell { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
body.peri-page .mainmenu { flex: none; }
body.peri-page .lensbar { display: none; }   /* unused on perispace */

.peri-layout {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: 296px minmax(0, 1fr); align-items: stretch;
  position: relative;
  transition: grid-template-columns 200ms var(--ease-default, cubic-bezier(.25,.1,.25,1));
}

/* ── sidebar (pinned, full-height) ── */
.peri-side {
  height: 100%; min-height: 0; display: flex; flex-direction: column; gap: var(--space-5);
  padding: var(--space-6) var(--space-5) var(--space-5) clamp(1.25rem, 4vw, 2.75rem);
  border-right: 1px solid var(--color-ecru); background: var(--color-linen); overflow: hidden;
  transition: opacity 150ms var(--ease-default, cubic-bezier(.25,.1,.25,1));
}
.ps-id { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.ps-id .nmwrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ps-id .ey { font-size: 10px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-eurepoc-red); }
.ps-id .nm { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--color-charcoal); line-height: 1.15; }

/* space tools — above the list */
.side-tools { flex: none; display: flex; flex-direction: column; gap: 1px; }
.stool { display: flex; align-items: center; gap: 9px; padding: 7px 8px; margin: 0 -8px; border-radius: var(--radius-sm); font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-charcoal); text-decoration: none; transition: background var(--transition-base); }
.stool:hover { background: var(--color-ecru); }
.stool i { font-size: 16px; color: var(--color-stone); }
.stool.primary { color: var(--color-navy); font-weight: var(--weight-medium); } .stool.primary i { color: var(--color-navy); }

/* dossier list — anchored at the bottom, scrolls when long */
.dlist { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--space-2); border-top: 1px solid var(--color-oatmeal); padding-top: var(--space-4); }
.dlist .lab { flex: none; display: flex; align-items: baseline; gap: 7px; font-size: 10px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-stone); }
.dlist .lab .dcount { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0; color: var(--color-oatmeal); }
.ditems { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; scrollbar-width: thin; margin: 0 calc(-1 * var(--space-2)); padding: 0 var(--space-2); }
.ditems::-webkit-scrollbar { width: 6px; } .ditems::-webkit-scrollbar-thumb { background: var(--color-oatmeal); border-radius: 3px; }
.dossier { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 1px; padding: 9px 10px; background: none; border: none; border-left: 2.5px solid transparent; border-radius: var(--radius-sm); cursor: pointer; transition: background var(--transition-base); }
.dossier:hover { background: #FFFFFF; }
.dossier.active { background: #FFFFFF; border-left-color: var(--color-navy); }
.dossier .dn { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-charcoal); line-height: 1.25; }
.dossier .dc { font-family: var(--font-mono); font-size: 10px; color: var(--color-stone); }
.dossier .dc .dc-new { color: var(--color-eurepoc-red); font-weight: var(--weight-medium); }
.dempty { font-size: var(--text-sm); color: var(--color-stone); padding: var(--space-2) 0; }

/* ── collapsible rail ── */
.rail-toggle { flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-oatmeal); background: #fff; border-radius: var(--radius-sm); color: var(--color-stone); cursor: pointer; transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base); }
.rail-toggle:hover { background: #fff; color: var(--color-charcoal); border-color: var(--color-stone); }
.rail-toggle i { font-size: 16px; }
.rail-open { position: absolute; left: 0; top: 14px; z-index: 20; display: none; align-items: center; justify-content: center; height: 38px; padding: 0 9px 0 7px; background: var(--color-linen); border: 1px solid var(--color-oatmeal); border-left: none; border-radius: 0 var(--radius-md) var(--radius-md) 0; color: var(--color-stone); cursor: pointer; transition: background var(--transition-base), color var(--transition-base); }
.rail-open:hover { background: var(--color-ecru); color: var(--color-charcoal); }
.rail-open i { font-size: 17px; }
.shell.rail-collapsed .peri-layout { grid-template-columns: 0 minmax(0, 1fr); }
.shell.rail-collapsed .peri-side { opacity: 0; pointer-events: none; border-right-color: transparent; }
.shell.rail-collapsed .rail-open { display: inline-flex; }

/* ── main column (the only scroll region) ── */
.peri-scroll { min-width: 0; min-height: 0; height: 100%; overflow-y: auto; display: flex; flex-direction: column; }
.peri-main { position: relative; z-index: 1; min-width: 0; display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3rem); padding: var(--space-8) clamp(1.25rem, 4vw, 2.75rem) var(--space-12); }
.peri-main .crumb { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-stone); }
.peri-main .crumb i { font-size: 13px; color: var(--color-oatmeal); }

.dhead { display: flex; flex-direction: column; gap: var(--space-4); }
.dhead .dhead-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.dhead h1 { font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.1rem); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); color: var(--color-charcoal); margin: 0; line-height: 1.08; max-width: 22ch; text-wrap: balance; }
.dhead .desc { font-size: var(--text-md); line-height: var(--leading-body); color: var(--fg-body); max-width: 60ch; margin: 0; }
/* dossier meta line — role · selections · span · scope toggle */
.dmeta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font-family: var(--font-mono); font-size: 11.5px; color: var(--color-stone); }
.dmeta .sep { color: var(--color-oatmeal); }

.acts-bar { display: flex; align-items: center; gap: var(--space-2); flex: none; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; border-radius: var(--radius-md); padding: 8px 13px; text-decoration: none; transition: background var(--transition-base), border-color var(--transition-base); white-space: nowrap; }
.btn i { font-size: 16px; }
.btn-pdf { color: #FFFFFF; background: var(--color-navy); border: 1px solid var(--color-navy); }
.btn-pdf:hover { background: var(--color-navy-mid); border-color: var(--color-navy-mid); }
.btn-ghost { color: var(--color-navy); background: #FFFFFF; border: 1px solid var(--color-oatmeal); }
.btn-ghost:hover { background: var(--color-linen); border-color: var(--color-stone); }
.btn-icon { width: 36px; height: 36px; justify-content: center; padding: 0; color: var(--color-stone); background: #FFFFFF; border: 1px solid var(--color-oatmeal); }
.btn-icon:hover { color: var(--color-charcoal); border-color: var(--color-stone); background: var(--color-linen); }
.btn-icon.del:hover, .btn-icon.del.arm { color: #fff; background: var(--color-eurepoc-red); border-color: var(--color-eurepoc-red); }

/* ── overflow "⋯" menu (more actions) ── */
.menu { position: relative; }
.menu > summary { list-style: none; } .menu > summary::-webkit-details-marker { display: none; } .menu > summary::marker { content: ""; }
.menu[open] > summary.btn-icon { background: var(--color-linen); border-color: var(--color-stone); color: var(--color-charcoal); }
.menu-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 210px; display: flex; flex-direction: column; gap: 2px; padding: 6px; background: #fff; border: 1px solid var(--color-oatmeal); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); }
.menu-it { display: flex; align-items: center; gap: 9px; padding: 8px 10px; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-charcoal); background: none; border: none; border-radius: var(--radius-sm); cursor: pointer; text-align: left; transition: background var(--transition-base); }
.menu-it:hover { background: var(--color-linen); } .menu-it i { font-size: 16px; color: var(--color-stone); }
.menu-it.danger { color: var(--color-eurepoc-red); } .menu-it.danger i { color: var(--color-eurepoc-red); }
.menu-it.danger.arm { font-weight: var(--weight-medium); }

.summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.schip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; line-height: 1.2; color: var(--color-navy); background: var(--color-slate-pale); border-radius: var(--radius-pill); padding: 5px 12px; white-space: nowrap; }
.schip i { font-size: 14px; }
/* NOTE: the modifier is .schip-panel, NOT .panel — .panel is the data-carousel
   component below (flex-column, 24px padding); reusing it ballooned the chips. */
.schip.schip-panel { color: var(--color-stone); background: var(--color-linen); }

/* ── content sections ──
   Each section is a ZONE in the dossier's reading order (Briefing → Dashboard →
   Graphs → Feed → Records). The old 12px uppercase label barely outranked body
   meta, so the zones ran together. Zone headers now use the product's section
   masthead (see lens_landing's `.sec-h`): a Newsreader subhead at the dedicated
   section-heading size over a strong charcoal rule — a clear step below the
   dossier title and above the panel/card titles. PERISPACE keeps its per-zone
   icon (it names the zone) where the lens uses a section number, because these
   sections are conditional and reorder by role, so a fixed number would mislead. */
/* one spacer source: the section's own gap sets header→content (≈20px), kept
   tighter than the inter-zone air so each header groups with its content. */
.peri-main .sec { display: flex; flex-direction: column; gap: var(--space-5); }
.peri-main .seclab {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  padding-bottom: var(--space-4);
  border-bottom: 1.5px solid var(--color-charcoal);
}
.peri-main .seclab .gl {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-display); font-size: var(--text-xl);
  font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight);
  line-height: 1.1; text-transform: none; color: var(--color-charcoal);
}
.peri-main .seclab .gl::before { content: none; }   /* retire the 12px-era accent tick */
.peri-main .seclab .gl i { font-size: 19px; color: var(--color-navy); flex: none; }
.peri-main .seclab .gn { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-stone); white-space: nowrap; }

/* saved-search cards */
.search-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-3); margin-top: var(--space-3); }
.search-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--hair-2); border-left: 3px solid var(--color-navy); border-radius: var(--radius-md); background: #fff; text-decoration: none; transition: background var(--transition-base), box-shadow var(--transition-base); }
.search-card:hover { background: var(--color-linen); box-shadow: var(--shadow-subtle, 0 1px 2px rgba(50,41,47,0.08)); }
.search-card .sc-n { display: flex; align-items: flex-start; gap: 8px; font-family: var(--font-display); font-weight: var(--weight-regular); font-size: 1.05rem; line-height: 1.3; color: var(--color-charcoal); }
.search-card .sc-n i { color: var(--color-navy); font-size: 16px; margin-top: 3px; flex: none; }
.search-card .sc-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.search-card .sc-go { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-navy); }
.search-card .sc-go i { font-size: 14px; transition: transform var(--transition-base); }
.search-card:hover .sc-go i { transform: translateX(3px); }
.search-card .sc-rm { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; background: none; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--color-stone); cursor: pointer; transition: color var(--transition-base), border-color var(--transition-base); }
.search-card .sc-rm:hover { color: var(--color-eurepoc-red); border-color: var(--color-eurepoc-red); }

/* ── empty states ── */
.peri-empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-10) var(--space-4); text-align: center; }
.peri-empty-state.mini { padding: var(--space-6) var(--space-4); }
.peri-empty-state i { font-size: 30px; color: var(--color-oatmeal); margin-bottom: var(--space-2); }
.peri-empty-state p { margin: 0; font-size: var(--text-md); color: var(--color-charcoal); }
.peri-empty-state p.sub { font-size: var(--text-sm); color: var(--color-stone); }
.peri-empty-state .btn-ghost { margin-top: var(--space-3); }

/* ── dynamic selections summary ── */
.dyn-lines { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.dyn-line { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--color-slate-pale); border: 1px solid var(--hair-2); border-left: 3px solid var(--color-navy); border-radius: var(--radius-md); flex-wrap: wrap; }
.dyn-line .dl-lab { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-navy); }
.dyn-line .dl-lab i { font-size: 15px; }
.dyn-line .dl-cnt { font-family: var(--font-mono); font-size: 11.5px; color: var(--color-stone); }
.dyn-line .dl-rm { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; flex: none; background: none; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--color-stone); cursor: pointer; transition: color var(--transition-base), border-color var(--transition-base); }
.dyn-line .dl-rm:hover { color: var(--color-eurepoc-red); border-color: var(--color-eurepoc-red); }
.dyn-line .dl-rm i { font-size: 14px; }

/* ════════════════════════════════════════════════════════════════
   DATA CAROUSEL — swipeable larger stat panels (ported from design)
   ════════════════════════════════════════════════════════════════ */
.carousel { position: relative; display: flex; align-items: center; gap: var(--space-2); }
.ctrack {
  display: flex; gap: var(--space-3); flex: 1; min-width: 0;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; padding: 2px; scrollbar-width: none;
}
.ctrack::-webkit-scrollbar { display: none; }
.cpane { scroll-snap-align: start; flex: 0 0 clamp(300px, 47%, 480px); }

/* flat, card-less panels (no boxes — an uppercase data-label header over a stack
   of ranked/distribution rows, separated by grid whitespace). Matches the
   design's .dpanel chrome. */
.panel { background: transparent; border: none; border-radius: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
/* NOTE: header class is .pnl-h, NOT .ph — .ph is the Phosphor icon font class
   (font-family: Phosphor !important), which would garble the subtitle text. */
.panel .pnl-h { display: flex; flex-direction: column; gap: 1px; margin-bottom: var(--space-2); }
.panel .pnl-h .t { font-family: var(--font-ui); font-size: 11px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-charcoal); line-height: 1.25; }
.panel .pnl-h .s { font-family: var(--font-ui); font-size: 11.5px; color: var(--color-stone); }

/* ── distribution / ranked rows — a bar-backed row (label · value · %). The bar
   width is var(--w) (relative to the panel's top row); var(--bar) tints
   distributions by type/severity, ranked lists leave it the neutral default. ── */
.drow { display: flex; align-items: baseline; gap: var(--space-3); padding: 8px 10px 8px 8px; border-bottom: 1px solid var(--color-ecru);
  background: linear-gradient(90deg, var(--bar, var(--color-bone)) var(--w, 0%), transparent var(--w, 0%)); }
.drow:last-child { border-bottom: none; }
.drow .dl { flex: 1 1 auto; min-width: 0; font-family: var(--font-ui); font-size: 13.5px; color: var(--color-charcoal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drow .dv { font-family: var(--font-mono); font-size: 13px; color: var(--color-charcoal); flex: none; }
.drow .dp { font-family: var(--font-mono); font-size: 11px; color: var(--color-oatmeal); flex: none; width: 34px; text-align: right; }

.cnav { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border: 1px solid var(--color-oatmeal); border-radius: var(--radius-sm); background: #fff; color: var(--color-navy); cursor: pointer; transition: background var(--transition-base), opacity var(--transition-base); }
.cnav:hover { background: var(--color-linen); }
.cnav:disabled { opacity: 0.35; cursor: default; }
.cnav i { font-size: 16px; }

.cdots { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: var(--space-3); }
.cdot { width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%; background: var(--color-oatmeal); cursor: pointer; transition: background var(--transition-base), transform var(--transition-base); }
.cdot.active { background: var(--color-navy); transform: scale(1.3); }

/* ranked plain-number list — the page's number-led panel body (label + count
   [+ %]); replaces the old bar-list / donut / stacked-bar chart primitives. */
.num-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.num-list li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: 6px 0; border-bottom: 1px dotted var(--color-ecru); }
.num-list li:last-child { border-bottom: none; }
.num-list .nl-lab { font-size: var(--text-sm); color: var(--color-charcoal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.num-list .nl-val { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-charcoal); white-space: nowrap; flex: none; }
.num-list .nl-pct { font-weight: var(--weight-regular); color: var(--color-stone); font-size: 11px; margin-left: 4px; }
.cp-empty { font-size: var(--text-sm); color: var(--color-stone); padding: var(--space-4) 0; }

/* dynamic / new markers on incident rows.
   inline-block (not inline-flex) so the pill sits correctly inside the
   -webkit-box line-clamped .nm; mirrors the shared .new-badge but eurepoc-red. */
.new-badge { display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--color-eurepoc-red); border-radius: var(--radius-pill); padding: 1px 7px; vertical-align: middle; line-height: 1.6; white-space: nowrap; }
.seclab .new-badge { margin-left: 6px; vertical-align: baseline; }
.mo.dyn-mo i.ph { color: var(--color-navy); }
.mo.dyn-mo .v { color: var(--color-navy); font-style: italic; }

/* loading state during resolve */
.peri-loading { display: flex; align-items: center; gap: 10px; padding: var(--space-8) 0; font-size: var(--text-sm); color: var(--color-stone); }
.spin { display: inline-block; animation: peri-spin 800ms linear infinite; }
@keyframes peri-spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════════
   READING MODE — full-screen reader modal
   ════════════════════════════════════════════════════════════════ */
body.reader-open { overflow: hidden; }
.reader { position: fixed; inset: 0; z-index: 900; display: none; flex-direction: column; background: var(--color-paper, #FBFAF8); }
.reader.show { display: flex; }

.rd-top { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--space-4); padding: 12px clamp(1rem, 4vw, 2.5rem); border-bottom: 1px solid var(--hair); background: #fff; flex: none; }
.rd-close { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-oatmeal); border-radius: var(--radius-sm); background: #fff; color: var(--color-stone); cursor: pointer; transition: color var(--transition-base), border-color var(--transition-base); }
.rd-close:hover { color: var(--color-eurepoc-red); border-color: var(--color-eurepoc-red); }
.rd-name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--color-charcoal); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-counter { font-family: var(--font-mono); font-size: 12px; color: var(--color-stone); white-space: nowrap; }
.rd-navarrows { display: inline-flex; gap: 6px; }
.rd-arrow { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-oatmeal); border-radius: var(--radius-sm); background: #fff; color: var(--color-navy); cursor: pointer; transition: background var(--transition-base); }
.rd-arrow:hover { background: var(--color-linen); }

.rd-body { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 0; flex: 1; }

/* left rail — mini lane-packed timeline */
.rd-rail { border-right: 1px solid var(--hair); background: #fff; overflow-y: auto; padding: var(--space-3) 0; display: flex; flex-direction: column; }
.rd-rail-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; padding: 9px clamp(0.75rem, 2vw, 1.25rem); background: none; border: none; border-left: 2.5px solid transparent; cursor: pointer; transition: background var(--transition-base), border-color var(--transition-base); }
.rd-rail-item:hover { background: var(--color-linen); }
.rd-rail-item.active { background: var(--color-linen); border-left-color: var(--color-navy); }
.rd-rail-mk { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; flex: none; margin-top: 4px; max-width: 44px; }
.rd-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.rd-sq { width: 6px; height: 6px; border-radius: 1px; background: var(--color-slate); flex: none; }
.rd-rail-meta { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rd-rail-d { font-family: var(--font-mono); font-size: 10px; color: var(--color-stone); }
.rd-rail-n { font-size: 12px; color: var(--color-charcoal); line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }

/* main scroll — one spread per incident */
.rd-scroll { overflow-y: auto; scroll-behavior: smooth; padding: 0 clamp(1rem, 6vw, 5rem); }
.rd-spread { max-width: 46rem; margin: 0 auto; padding: clamp(2.5rem, 7vh, 5rem) 0; min-height: 70vh; border-bottom: 1px solid var(--hair); display: flex; flex-direction: column; gap: var(--space-5); }
.rd-spread:last-child { border-bottom: none; }
.rd-eyebrow { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.rd-tp { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-stone); }
.rd-tp .sw { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.rd-date { font-family: var(--font-mono); font-size: 12px; color: var(--color-stone); }
.rd-badge { font-size: 10px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-navy); background: var(--color-slate-pale); border-radius: var(--radius-pill); padding: 2px 9px; }
.rd-title { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.1; letter-spacing: var(--tracking-tight); color: var(--color-charcoal); margin: 0; text-wrap: balance; }
.rd-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.rd-m { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--color-stone); }
.rd-m i { font-size: 15px; color: var(--color-oatmeal); }
.rd-m b { color: var(--color-charcoal); font-weight: var(--weight-medium); }
.rd-dek { font-family: var(--font-display); font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.65; color: var(--fg-body); margin: 0; }

.rd-resp { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.rd-resp-lab { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-slate); }
.rd-resp-item { display: flex; flex-direction: column; gap: 3px; padding: var(--space-3) var(--space-4); border: 1px solid var(--hair-2); border-left: 3px solid var(--color-slate); border-radius: var(--radius-md); background: #fff; text-decoration: none; transition: background var(--transition-base); }
.rd-resp-item:hover { background: var(--color-linen); }
.rd-resp-cat { font-size: 10px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-slate); }
.rd-resp-t { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--color-charcoal); line-height: 1.35; }
.rd-resp-meta { font-family: var(--font-mono); font-size: 11px; color: var(--color-stone); }
.rd-noresp { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); font-style: italic; color: var(--color-stone); margin-top: var(--space-3); }
.rd-noresp i { font-size: 16px; color: var(--color-oatmeal); }

/* ════════════════════════════════════════════════════════════════
   DASHBOARD GRID — role-ordered varied panels (inside the Overview tab)
   ════════════════════════════════════════════════════════════════ */
.sec-dash { gap: var(--space-3); }
.peri-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.75rem, 3.5vw, 2.75rem) clamp(2rem, 4vw, 3.5rem); align-items: start; }
.dpane { min-width: 0; }
.dpane-wide { grid-column: 1 / -1; }
.dpane .panel { height: auto; }

/* ── situation briefing band — the lead, set on a soft red-ruled linen band so
   it outranks the breakdowns and feed below. Sits ABOVE the view tabs. ── */
.brief { background: var(--color-linen); border: 1px solid var(--color-ecru); border-left: 3px solid var(--color-eurepoc-red); border-radius: var(--radius-md); padding: clamp(1.5rem, 3vw, 2rem); display: flex; flex-direction: column; gap: var(--space-6); }
.brief-ey { font-family: var(--font-mono); font-size: 11px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-eurepoc-red); }
.brief-tx { font-family: var(--font-display); font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: var(--weight-regular); line-height: 1.5; color: var(--color-charcoal); margin: 0; text-wrap: pretty; }
.brief-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1px solid var(--color-oatmeal); padding-top: var(--space-5); }
.bstat { display: flex; flex-direction: column; gap: 4px; padding: 0 var(--space-4); }
.bstat + .bstat { border-left: 1px solid var(--color-oatmeal); }
.bstat:first-child { padding-left: 0; }
.bstat .v { font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 1.9rem); font-weight: var(--weight-medium); color: var(--color-charcoal); line-height: 1; }
.bstat .l { font-size: 9.5px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-stone); }
@media (max-width: 720px) {
  .brief-stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .bstat { padding: var(--space-3) 0 0; } .bstat + .bstat { border-left: none; }
  .bstat:nth-child(odd) { border-top: 1px solid var(--color-ecru); }
}

/* ── view switcher (Overview / Records / Saved) ── */
.tabs { display: flex; gap: clamp(1.25rem, 3vw, 2.25rem); border-bottom: 1px solid var(--color-oatmeal); }
.tab { display: inline-flex; align-items: baseline; gap: 9px; padding: 6px 2px 14px; margin-bottom: -1px; font-family: var(--font-display); font-size: clamp(1.2rem, 1.9vw, 1.5rem); font-weight: var(--weight-regular); letter-spacing: var(--tracking-tight); color: var(--color-stone); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: color var(--transition-base); }
.tab:hover { color: var(--color-charcoal); }
.tab.on { color: var(--color-charcoal); border-bottom-color: var(--color-navy); }
.tab .tc { font-family: var(--font-mono); font-size: 11px; color: var(--color-stone); background: var(--color-linen); border-radius: var(--radius-pill); padding: 1px 7px; align-self: center; }
.tab.on .tc { color: var(--color-navy); background: var(--color-slate-pale); }
.tab .nb { font-family: var(--font-mono); font-size: 10.5px; font-weight: var(--weight-medium); white-space: nowrap; color: var(--color-eurepoc-red); background: var(--color-eurepoc-red-pale, #FBE9ED); border-radius: var(--radius-pill); padding: 1px 8px; align-self: center; }
.tabpanel { display: none; }
.tabpanel.on { display: block; }   /* spacing to the tabs comes from .peri-main's flex gap */
.tabpanel > .sec + .sec { margin-top: clamp(2rem, 4vw, 3rem); }

/* records tab — matched-records bar above the shared feed rows */
.rec-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-3); margin-bottom: var(--space-3); border-bottom: 1px solid var(--color-oatmeal); }
.rec-bar .rec-l { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-stone); }
.rec-bar .rec-r { font-family: var(--font-mono); font-size: 11px; color: var(--color-stone); }

/* collapsed scope + selections disclosure (out of the main scroll) */
.scope-disc { margin-top: var(--space-1); }
.scope-disc > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-3); padding: 6px 0; }
.scope-disc > summary::-webkit-details-marker { display: none; }
.scope-disc .sd-lab { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--color-stone); }
.scope-disc .sd-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-navy); }
.scope-disc .sd-toggle i { transition: transform var(--transition-base); }
.scope-disc[open] .sd-toggle i { transform: rotate(180deg); }
.scope-disc .sd-body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3) 0 var(--space-2); }
.scope-disc .dyn-lines { margin-top: 0; }


/* timeline (compact two-lane month heatmap: incidents + responses) */
.tl-strip { display: grid; gap: 3px; align-items: center; padding-top: var(--space-2); }
.tl-corner { min-height: 1px; }
.tl-x { font-family: var(--font-mono); font-size: 9px; color: var(--color-stone); white-space: nowrap; overflow: visible; line-height: 1; }
.tl-x.tl-jan { color: var(--color-charcoal); font-weight: var(--weight-medium); }
/* subtle year boundary: darken the left edge of each January cell (no layout shift) */
.tl-cell.tl-jan { box-shadow: inset 2px 0 0 -0.5px rgba(50, 41, 47, 0.22); }
.tl-lane-lab { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 11.5px; color: var(--color-charcoal); white-space: nowrap; padding-right: 6px; }
.tl-lane-lab .tl-sw { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.tl-cell { height: 18px; border-radius: var(--radius-sm); background: var(--color-linen); border: 1px solid var(--hair-2); }
/* incidents = navy ramp; legend swatch shares the colour */
.tl-cell.tl-l1, .tl-swatch.tl-l1 { background: color-mix(in srgb, var(--color-navy) 12%, transparent); border-color: transparent; }
.tl-cell.tl-l2, .tl-swatch.tl-l2 { background: color-mix(in srgb, var(--color-navy) 32%, transparent); border-color: transparent; }
.tl-cell.tl-l3, .tl-swatch.tl-l3 { background: color-mix(in srgb, var(--color-navy) 58%, transparent); border-color: transparent; }
.tl-cell.tl-l4, .tl-swatch.tl-l4 { background: color-mix(in srgb, var(--color-navy) 85%, transparent); border-color: transparent; }
.tl-cell.tl-l5, .tl-swatch.tl-l5 { background: var(--color-navy); border-color: transparent; }
/* responses = slate ramp (a bit denser since response counts are small) */
.tl-cell.tl-r1 { background: color-mix(in srgb, var(--color-slate) 40%, transparent); border-color: transparent; }
.tl-cell.tl-r2 { background: color-mix(in srgb, var(--color-slate) 62%, transparent); border-color: transparent; }
.tl-cell.tl-r3 { background: color-mix(in srgb, var(--color-slate) 80%, transparent); border-color: transparent; }
.tl-cell.tl-r4 { background: color-mix(in srgb, var(--color-slate) 92%, transparent); border-color: transparent; }
.tl-cell.tl-r5 { background: var(--color-slate); border-color: transparent; }
/* legend foot — Less→More ramp (lane labels carry the navy/slate key) */
.tl-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-3); }
.tl-ramp { display: inline-flex; align-items: center; gap: 4px; }
.tl-ramp-lab { font-family: var(--font-mono); font-size: 10px; color: var(--color-stone); }
.tl-swatch { width: 11px; height: 11px; border-radius: var(--radius-sm); background: var(--color-linen); border: 1px solid var(--hair-2); }
@media (max-width: 560px) {
  .tl-lane-lab { font-size: 10px; gap: 4px; }
  .tl-cell { height: 16px; }
}

/* KPI cluster (posture) */
.kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.kpi { display: flex; flex-direction: column; gap: 3px; padding: var(--space-3); background: var(--color-linen); border-radius: var(--radius-md); }
.kpi .kv { font-family: var(--font-display); font-size: 1.7rem; font-weight: var(--weight-medium); color: var(--color-charcoal); line-height: 1; }
.kpi .kx { font-size: 0.9rem; color: var(--color-stone); margin-left: 2px; }
.kpi .kl { font-size: 10.5px; line-height: 1.3; color: var(--color-stone); }
.kpi-note { font-size: var(--text-sm); color: var(--color-stone); }
.kpi-note b { color: var(--color-charcoal); font-weight: var(--weight-medium); }

/* what-changed list */
.wc-list { display: flex; flex-direction: column; gap: 2px; }
.wc-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--color-ecru); text-decoration: none; }
.wc-row:last-child { border-bottom: none; }
.wc-row:hover { background: var(--color-linen); }
.wc-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.wc-bd { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.wc-n { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-charcoal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-m { font-family: var(--font-mono); font-size: 10.5px; color: var(--color-stone); }
.wc-new { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--color-eurepoc-red); border-radius: var(--radius-pill); padding: 1px 7px; flex: none; }
.wc-empty { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--color-stone); padding: var(--space-3) 0; }
.wc-empty i { font-size: 17px; color: var(--sev-low-d); }

/* mode chip in the dossier header summary */
.schip.schip-mode { color: #fff; background: var(--color-navy); font-weight: var(--weight-medium); }
.schip.schip-mode i { color: #fff; }

/* ════════════════════════════════════════════════════════════════
   BRIEFING OVERLAY — one-page, print-ready generated brief
   ════════════════════════════════════════════════════════════════ */
.briefing-overlay { position: fixed; inset: 0; z-index: 905; display: none; flex-direction: column; background: var(--color-paper, #FBFAF8); }
.briefing-overlay.show { display: flex; }
.bf-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-4); padding: 12px clamp(1rem, 4vw, 2.5rem); border-bottom: 1px solid var(--hair); background: #fff; flex: none; }
.bf-close { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-oatmeal); border-radius: var(--radius-sm); background: #fff; color: var(--color-stone); cursor: pointer; }
.bf-close:hover { color: var(--color-eurepoc-red); border-color: var(--color-eurepoc-red); }
.bf-mode { font-size: 11px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-navy); }
.bf-scroll { overflow-y: auto; padding: clamp(1.25rem, 4vw, 2.5rem); }
.bf-page { max-width: 52rem; margin: 0 auto; background: #fff; border: 1px solid var(--hair-2); border-radius: var(--radius-md); padding: clamp(1.5rem, 4vw, 3rem); display: flex; flex-direction: column; gap: var(--space-6); }
.bf-head { display: flex; flex-direction: column; gap: var(--space-3); border-bottom: 2px solid var(--color-navy); padding-bottom: var(--space-4); }
.bf-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-stone); }
.bf-head h1 { font-family: var(--font-display); font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); color: var(--color-charcoal); margin: 0; line-height: 1.1; }
.bf-scope { display: flex; flex-wrap: wrap; gap: 6px; }
.bf-chip { font-size: 12px; color: var(--color-navy); background: var(--color-slate-pale); border-radius: var(--radius-pill); padding: 3px 11px; }
.bf-lede { font-family: var(--font-display); font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.6; color: var(--color-charcoal); margin: 0; }
.bf-reads { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.bf-read { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); background: var(--color-linen); border-radius: var(--radius-md); }
.bf-read .v { font-family: var(--font-display); font-size: 1.9rem; font-weight: var(--weight-medium); color: var(--color-charcoal); line-height: 1; }
.bf-read .v .x { font-size: 0.85rem; color: var(--color-stone); }
.bf-read .l { font-size: 10px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-stone); }
.bf-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-6); }
.bf-sec h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: var(--weight-medium); color: var(--color-charcoal); margin: 0 0 var(--space-2); padding-bottom: var(--space-1); border-bottom: 1px solid var(--hair); }
.bf-sub { font-size: var(--text-sm); color: var(--color-stone); margin: 0 0 var(--space-2); }
.bf-none { font-size: var(--text-sm); color: var(--color-stone); font-style: italic; margin: 0; }
.bf-rank { list-style: none; margin: 0; padding: 0; counter-reset: r; display: flex; flex-direction: column; gap: 4px; }
.bf-rank li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-charcoal); padding: 4px 0; border-bottom: 1px dotted var(--color-ecru); }
.bf-rank li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-rank li b { font-family: var(--font-mono); font-size: 12px; color: var(--color-stone); }
.bf-posture { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-bottom: var(--space-3); }
.bf-pk { display: flex; flex-direction: column; gap: 1px; padding: var(--space-2); background: var(--color-linen); border-radius: var(--radius-sm); text-align: center; }
.bf-pk b { font-family: var(--font-display); font-size: 1.2rem; color: var(--color-charcoal); }
.bf-pk span { font-size: 9.5px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-stone); }
.bf-notable { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.bf-notable a { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); border: 1px solid var(--hair-2); border-left: 3px solid var(--color-navy); border-radius: var(--radius-md); text-decoration: none; }
.bf-notable a:hover { background: var(--color-linen); }
.bf-nt { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--color-charcoal); }
.bf-nm { font-family: var(--font-mono); font-size: 11px; color: var(--color-stone); }
.bf-foot { font-size: var(--text-xs); color: var(--color-stone); border-top: 1px solid var(--hair); padding-top: var(--space-3); }

@media print {
  /* print only the briefing: hide the chrome + the rest of the sheet, keep the
     fixed briefing overlay (which lives inside the .shell). */
  .mainmenu, .lensbar, .dock, .cmdk, .cmdk-scrim, .peri-layout, .reader, .toast-host { display: none !important; }
  body.dataroom, .app, .shell { background: #fff !important; box-shadow: none !important; }
  .briefing-overlay.show { position: static; background: #fff; display: block; }
  .briefing-overlay .bf-top { display: none; }
  .briefing-overlay .bf-scroll { overflow: visible; padding: 0; }
  .bf-page { border: none; max-width: none; padding: 0; }
  .bf-notable a:hover { background: none; }
}

@media (max-width: 880px) {
  /* revert the fixed app-shell to normal document scroll on mobile so the page
     scrolls as one and the bottom dock works as elsewhere. */
  body.peri-page .app { height: auto; min-height: 100dvh; overflow: visible; }
  body.peri-page .shell { height: auto; display: block; overflow: visible; }
  .peri-layout { display: block; }
  .shell.rail-collapsed .peri-layout { grid-template-columns: 1fr; }
  .peri-side { height: auto; overflow: visible; border-right: none; border-bottom: 1px solid var(--color-ecru);
    padding: var(--space-6) clamp(1.25rem, 4vw, 2.75rem) var(--space-5); }
  .shell.rail-collapsed .peri-side { opacity: 1; pointer-events: auto; }
  .peri-scroll { height: auto; overflow: visible; }
  .peri-main { padding: var(--space-7) clamp(1.25rem, 4vw, 2.75rem) var(--space-10); }
  .rail-toggle, .rail-open, .shell.rail-collapsed .rail-open { display: none; }
  /* Dossiers move into the bottom dock's Contents push-up sheet on mobile
     (wired in perispace_page.js), so the sidebar list is redundant here. */
  .dlist { display: none; }

  .peri-grid { grid-template-columns: 1fr; }
  .dpane-wide { grid-column: auto; }
  .bf-reads { grid-template-columns: repeat(2, 1fr); }
  .bf-cols { grid-template-columns: 1fr; }
  /* Dossier-header actions: stack under the title and wrap inside the box
     instead of overflowing (the buttons are white-space:nowrap). */
  .dhead .dhead-top { flex-direction: column; align-items: stretch; }
  .acts-bar { flex: 1 1 auto; width: 100%; flex-wrap: wrap; }
  .rd-body { grid-template-columns: 1fr; }
  .rd-rail { display: none; }
}

/* ════════ embedded Dataset-Builder graphs ════════ */
.sec-graphs { gap: var(--space-3); }
.dg-grid { display: flex; flex-direction: column; gap: var(--space-5); }
.dg-card { background: #fff; border: 1px solid var(--color-oatmeal); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5) var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.dg-h { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.dg-t { font-family: var(--font-display); font-size: 1.05rem; font-weight: var(--weight-medium); color: var(--color-charcoal); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-acts { display: inline-flex; gap: 4px; flex: none; }
.dg-acts button { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; background: none; color: var(--color-stone); border-radius: var(--radius-sm); cursor: pointer; font-size: 15px; transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base); }
.dg-acts button:hover { background: var(--color-linen); color: var(--color-charcoal); border-color: var(--color-oatmeal); }
.dg-acts .dg-rm:hover { color: var(--color-eurepoc-red, #CC0130); }
.dg-body { width: 100%; min-width: 0; }
.dg-sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--color-oatmeal); }
.dg-loading, .dg-nodata, .dg-missing { display: flex; align-items: center; justify-content: center; min-height: 120px; font-size: var(--text-sm); color: var(--color-stone); font-style: italic; }
.dg-stub { border-style: dashed; }
.dg-empty { font-size: var(--text-sm); color: var(--color-stone); line-height: 1.5; padding: var(--space-3) 0; }
.dg-empty-add, .dg-empty-add:hover { background: none; border: none; padding: 0; color: var(--color-navy); font: inherit; text-decoration: underline; cursor: pointer; }

/* picker modal */
.dg-picker { position: fixed; inset: 0; z-index: 300; display: none; }
.dg-picker.open { display: block; }
.dgp-scrim { position: absolute; inset: 0; background: rgba(17,25,26,0.4); }
.dgp-panel { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(440px, 92vw); max-height: 80vh; background: #fff; border: 1px solid var(--color-oatmeal); border-radius: var(--radius-lg); box-shadow: var(--shadow-overlay); display: flex; flex-direction: column; }
.dgp-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--hair, #ECEAEE); }
.dgp-head h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: var(--weight-medium); color: var(--color-charcoal); margin: 0; }
.dgp-x { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-oatmeal); background: #fff; border-radius: var(--radius-sm); cursor: pointer; color: var(--color-charcoal); }
.dgp-x:hover { background: var(--color-linen); }
.dgp-list { flex: 1 1 auto; overflow-y: auto; padding: var(--space-3); display: flex; flex-direction: column; gap: 4px; }
.dgp-item { display: flex; align-items: center; gap: 11px; padding: 10px 11px; background: #fff; border: 1px solid var(--hair, #ECEAEE); border-radius: var(--radius-md); cursor: pointer; text-align: left; transition: background var(--transition-base), border-color var(--transition-base); }
.dgp-item:hover { background: var(--color-linen); border-color: var(--color-oatmeal); }
.dgp-item.on { border-color: var(--color-navy); }
.dgp-ic { font-size: 19px; color: var(--color-stone); flex: none; display: inline-flex; }
.dgp-item.on .dgp-ic { color: var(--color-navy); }
.dgp-bd { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.dgp-n { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-charcoal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dgp-s { font-family: var(--font-mono); font-size: 10.5px; color: var(--color-stone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dgp-empty { padding: var(--space-6) var(--space-3); text-align: center; font-size: var(--text-sm); color: var(--color-stone); line-height: 1.5; }
.dgp-foot { padding: var(--space-3) var(--space-5) var(--space-4); border-top: 1px solid var(--hair, #ECEAEE); }
.dgp-new { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-navy); background: none; border: 1px dashed var(--color-oatmeal); border-radius: var(--radius-md); padding: 9px 13px; cursor: pointer; transition: background var(--transition-base), border-color var(--transition-base); }
.dgp-new:hover { background: var(--color-linen); border-color: var(--color-navy); }