/* ============================================================================
   DECK PREVIEW — the 1280×720 HTML twin of the PPTX renderer (dkp-*).

   WHY ITS OWN TOKENS, AND NO THEME: this is a DOCUMENT preview, like the SOW
   HTML — the deck's design is frozen (golden master LCH01 v15) and must look
   identical in light and dark operator themes, so the Meridian kit tokens
   deliberately do NOT apply inside .dkp. Every colour below is a frozen deck
   token, not a UI token. The kit-classes-only rule has exactly this exception.

   Geometry lives in the slide components (inline px, straight from
   v15-geometry.json); these classes carry the frozen typography and chrome.

   Section 2 (dke-*) is the deck EDITOR's chrome — that part is ordinary app
   UI and uses the kit tokens like any page.
   ========================================================================= */

.dkp {
  /* frozen deck tokens (BRIEF «Design-Tokens (eingefroren)») */
  --dkp-paper: #F1EFEA;
  --dkp-ink: #121316;
  --dkp-dark: #0B0C0E;
  --dkp-ink-inv: #F3F1EC;
  --dkp-ink2: #D9D6CF;
  --dkp-muted: #9A9DA3;
  --dkp-muted-d: #6B6E75;
  --dkp-gold: #C8A96E;
  --dkp-gold-d: #8A6F3E;
  --dkp-gold2: #E2C990;
  --dkp-line: #D9D6CF;
  --dkp-line-dark: #3A3C41;
  --dkp-body: #3A3D42;
  --dkp-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --dkp-sans: "Geist", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  --dkp-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  position: relative;
  width: 1280px;
  height: 720px;
  overflow: hidden;
  background: var(--dkp-paper);
  color: var(--dkp-ink);
  font-family: var(--dkp-sans);
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
}
.dkp, .dkp * { box-sizing: border-box; margin: 0; }
.dkp--dark { background: var(--dkp-dark); color: var(--dkp-ink-inv); }
.dkp--photo { background: var(--dkp-dark); color: var(--dkp-ink-inv); }

/* absolute placement helper — every shape sits at its v15 px position */
.dkp-abs { position: absolute; }

/* full-bleed photograph + scrim (cover, dividers, split images) */
.dkp-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dkp-scrim { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,12,14,.30) 0%, rgba(11,12,14,.18) 40%, rgba(11,12,14,.62) 100%); }
.dkp-scrim--heavy { background: linear-gradient(180deg, rgba(11,12,14,.55), rgba(11,12,14,.72)); }

/* the mono eyebrow with the 22px gold tick (11.5px · .15em · uppercase) */
.dkp-eyebrow { display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--dkp-mono); font-size: 11.5px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--dkp-muted-d); white-space: nowrap; }
.dkp-eyebrow::before { content: ""; width: 22px; height: 1.2px; background: var(--dkp-gold); flex: none; }
.dkp--dark .dkp-eyebrow, .dkp--photo .dkp-eyebrow { color: var(--dkp-muted); }

/* NAVEN brand lockup, bottom-left: 15px Geist 600 · .06em · gold dot */
.dkp-brand { position: absolute; left: 64px; bottom: 22px;
  font-family: var(--dkp-sans); font-size: 15px; font-weight: 600; letter-spacing: .06em; }
.dkp-brand::after { content: ""; display: inline-block; width: .30em; height: .30em;
  border-radius: 50%; background: var(--dkp-gold); margin-left: .12em; transform: translateY(-.05em); }
/* the brand rule everywhere: dot = 15/32 of the wordmark size (32pt NAVEN → 15pt dot) */
.dkp-brand--dot { color: var(--dkp-gold); font-size: .469em; }

/* page number, bottom-right: 10px mono, MutedD */
.dkp-pageno { position: absolute; right: 30px; bottom: 22px;
  font-family: var(--dkp-mono); font-size: 10px; color: var(--dkp-muted-d); }
.dkp--dark .dkp-pageno, .dkp--photo .dkp-pageno { color: var(--dkp-muted); }

/* typographic voices */
.dkp-serif { font-family: var(--dkp-serif); font-weight: 500; letter-spacing: -.012em; }
.dkp-mono { font-family: var(--dkp-mono); }
.dkp-title { font-family: var(--dkp-serif); font-weight: 500; letter-spacing: -.012em;
  font-size: 32px; line-height: 1.18; }
.dkp-gold2 { color: var(--dkp-gold2); }

/* mono table/axis headers (9.3px · .12em · uppercase) */
.dkp-th { font-family: var(--dkp-mono); font-size: 9.3px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dkp-muted-d); white-space: nowrap; }
.dkp--dark .dkp-th { color: var(--dkp-muted); }

/* hairlines */
.dkp-rule { background: var(--dkp-line); height: 1px; }
.dkp-rule--ink { background: var(--dkp-ink); }
.dkp-rule--dark { background: var(--dkp-line-dark); }

/* the mono footline over a hairline (tabelle footer_note, legend, descoped note) */
.dkp-footline { font-family: var(--dkp-mono); font-size: 10.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--dkp-muted-d); }

/* clamped multi-line boxes (statement ≤2 lines etc.) */
.dkp-clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ============================================================================
   Section 2 — DECK EDITOR CHROME (dke-*). Ordinary app UI: kit tokens apply.
   Lives in this file because the editor ships with the previews; nothing in
   here reaches into .dkp.
   ========================================================================= */

/* three-pane editor: slide rail · stage · slot panel */
.dke { display: flex; gap: 14px; align-items: stretch; min-height: 0; margin-top: 16px; }
.dke-rail { flex: none; width: 208px; display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto; max-height: calc(100vh - 218px); padding: 2px; }
.dke-stage-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.dke-stage { overflow: auto; }
.dke-stage-fit { position: relative; }
.dke-stage-fit .dkp { transform-origin: top left; }
.dke-panel { flex: none; width: 372px; display: flex; flex-direction: column; gap: 12px;
  overflow-y: auto; max-height: calc(100vh - 218px); padding-right: 2px; }

/* rail thumbnails: a 1280×720 slide scaled into a 180px frame */
.dke-thumb { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--rule-2);
  border-radius: var(--r1); background: var(--sheet); padding: 6px; cursor: pointer;
  font: inherit; text-align: left; }
.dke-thumb:hover { border-color: var(--act); }
.dke-thumb.on { border-color: var(--act); box-shadow: 0 0 0 1px var(--act); }
.dke-thumb--off .dke-thumb-frame { opacity: .35; }
.dke-thumb-frame { position: relative; width: 180px; height: 102px; overflow: hidden;
  border: 1px solid var(--rule); background: #F1EFEA; }
.dke-thumb-frame .dkp { transform: scale(0.140625); transform-origin: top left; pointer-events: none; }
.dke-thumb-meta { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dke-thumb-meta .nm { font-size: var(--t-meta); color: var(--ink-2); overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis; }
.dke-thumb-meta .pos { font-size: var(--t-label); color: var(--ink-4); font-variant-numeric: tabular-nums; }
.dke-thumb-verbs { display: flex; gap: 2px; margin-left: auto; }
.dke-thumb-verbs button { border: 0; background: none; padding: 0 3px; font: inherit;
  font-size: 12px; line-height: 1.2; color: var(--ink-4); cursor: pointer; }
.dke-thumb-verbs button:hover:not(:disabled) { color: var(--act); }
.dke-thumb-verbs button:disabled { opacity: .35; cursor: default; }

/* slot form */
.dke-slot { display: flex; flex-direction: column; gap: 4px; }
.dke-slot-head { display: flex; align-items: baseline; gap: 8px; }
.dke-slot-head .form-label { margin: 0; }
.dke-count { margin-left: auto; font-size: var(--t-label); color: var(--ink-4);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.dke-count.over { color: var(--err); font-weight: 600; }
.dke-hint { font-size: var(--t-label); color: var(--ink-4); }
.dke-violation { font-size: var(--t-meta); color: var(--err); }
textarea.dke-over, input.dke-over { border-color: var(--err); }

/* items sub-editor (timeline stations, steps, parties, discounts …) */
.dke-item { border: 1px solid var(--rule); border-radius: var(--r1); padding: 8px;
  display: flex; flex-direction: column; gap: 6px; background: var(--sheet); }
.dke-item-head { display: flex; align-items: center; gap: 6px; }
.dke-item-head .x { margin-left: auto; border: 0; background: none; padding: 0 4px;
  font: inherit; font-size: 13px; color: var(--ink-4); cursor: pointer; }
.dke-item-head .x:hover { color: var(--err); }

/* image slot: thumbnail choices */
.dke-imgpick { display: flex; flex-wrap: wrap; gap: 6px; }
.dke-imgpick button { border: 1px solid var(--rule-2); border-radius: var(--r1); padding: 2px;
  background: var(--sheet); cursor: pointer; line-height: 0; }
.dke-imgpick button.on { border-color: var(--act); box-shadow: 0 0 0 1px var(--act); }
.dke-imgpick img { width: 74px; height: 42px; object-fit: cover; display: block; border-radius: 2px; }

/* reference picker cards */
.dke-refpick { display: flex; flex-direction: column; gap: 6px; }
.dke-refpick button { display: flex; gap: 8px; align-items: baseline; text-align: left;
  border: 1px solid var(--rule-2); border-radius: var(--r1); background: var(--sheet);
  padding: 6px 8px; font: inherit; cursor: pointer; min-width: 0; }
.dke-refpick button.on { border-color: var(--act); box-shadow: 0 0 0 1px var(--act); }
.dke-refpick .slug { font-family: var(--font-mono); font-size: var(--t-label); color: var(--ink-3);
  text-transform: uppercase; flex: none; }
.dke-refpick .claim { font-size: var(--t-meta); color: var(--ink-2); overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* the read-only register-bound block */
.dke-bound { border: 1px dashed var(--rule-2); border-radius: var(--r1); padding: 8px 10px;
  display: flex; flex-direction: column; gap: 4px; }
.dke-bound-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--t-label); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3);
  border: 1px solid var(--rule-2); border-radius: var(--r-full, 999px); padding: 1px 8px; }
.dke-bound-note { font-size: var(--t-meta); color: var(--ink-4); }

/* the flap-out field chat below the slot form — width rides the kit's --rw-chat-w var so
   the fold behaviour (.rw-chat.folded → 46px spine) keeps working untouched */
.dke-chat { --rw-chat-w: 100%; }
.dke-chat .rw-chat { max-height: 460px; min-height: 220px;
  border: 1px solid var(--rule-2); border-radius: var(--r1); }

/* deck list cards */
.dke-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.dke-card { display: flex; flex-direction: column; gap: 6px; text-align: left; font: inherit;
  border: 1px solid var(--rule-2); border-radius: var(--r1); background: var(--sheet);
  padding: 12px 14px; cursor: pointer; }
.dke-card:hover { border-color: var(--act); }
.dke-card .t { font-size: var(--t-16, 16px); color: var(--ink-1); font-weight: 600; }
.dke-card .meta { display: flex; gap: 8px; align-items: baseline; font-size: var(--t-meta); color: var(--ink-3); }

@media (max-width: 1180px) {
  .dke { flex-wrap: wrap; }
  .dke-panel { width: 100%; max-height: none; }
}

/* add-slide control at the rail's foot */
.dke-add { display: flex; flex-direction: column; gap: 6px; padding: 8px 2px 2px; }
.dke-add .form-select { font-size: var(--t-meta); }

/* uploaded images in the picker: thumbnail with a delete corner, plus the upload tile */
.dke-imgup { position: relative; display: inline-block; }
.dke-imgup .dke-imgdel { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px;
  border-radius: 50%; border: 1px solid var(--rule-2); background: var(--sheet); color: var(--ink-3);
  font-size: 12px; line-height: 1; padding: 0; cursor: pointer; }
.dke-imgup .dke-imgdel:hover { color: var(--err); border-color: var(--err); }
.dke-imgadd { display: inline-flex; width: 74px; height: 42px; align-items: center; justify-content: center;
  border: 1px dashed var(--rule-2); border-radius: var(--r1); color: var(--ink-4); cursor: pointer; font-size: 18px; }
.dke-imgadd:hover { border-color: var(--act); color: var(--act); }

/* hidden images row + restore chips */
.dke-hidden { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.dke-hidden-chip { border: 1px solid var(--rule-2); background: var(--sheet); border-radius: 999px;
  padding: 1px 8px; font: inherit; font-size: var(--t-label); color: var(--ink-3); cursor: pointer; }
.dke-hidden-chip:hover { border-color: var(--act); color: var(--act); }

/* the framer: a scaled frame of the slot's box, drag the photograph, zoom below */
.dke-framer { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.dke-framer-frame { overflow: hidden; border: 1px solid var(--rule-2); border-radius: var(--r1);
  background: #0B0C0E; touch-action: none; user-select: none; }
.dke-framer-frame:active { cursor: grabbing; }
.dke-framer-row { display: flex; align-items: center; gap: 8px; }
.dke-framer-row input[type=range] { flex: 1 1 auto; min-width: 80px; }