/* ── Lab Notebook editor chrome (parent document only) ──
 *
 * Port of the GameDesignBible editor's FUNCTIONAL chrome (inspector, fit
 * gauges, stage, entry card, buttons), re-tokened from its dark theme to the
 * Archive light register. Everything here stays in the ed-*/lab-* namespace —
 * the .nf-* print vocabulary belongs to the spread INSIDE the iframe, and the
 * suite's .nf-* components are untouched (see docs/archive-theme.md rules).
 * Geometry contracts with vendored JS (do not change):
 *   .ed-stage__scroll padding == STAGE_PADDING (40px) in print/render/scale-fit.js
 *   .ed-stage__frame transform-origin: top left
 */

:root {
  --ed-bg: #FBFAF6;            /* paper — inputs, chips */
  --ed-panel: #FFFFFF;         /* elevated panels: toolbar, inspector */
  --ed-panel-2: #F6F3EC;       /* paper-2 — item rows, button faces */
  --ed-line: #DCD5C8;          /* hair */
  --ed-line-soft: #EBE5DA;     /* hair-soft */
  --ed-text: #2F2C28;          /* ink */
  --ed-text-mu: #6E665B;       /* stone */
  --ed-text-dim: #918A80;      /* stone-lt */
  --ed-accent: #D93A2E;
  --ed-accent-soft: #B82E24;   /* deep red carries the "soft" role on light */
  --ed-amber: #9C7531;         /* amber-deep for text on light */
  --ed-good: #5A7D52;
  --ed-stage: #CFC7B8;         /* the warm desk the paper spread sits on */
  --ed-radius: 6px;
  --ed-radius-sm: 4px;
  --ed-font: var(--nf-font);
  --ed-mono: var(--nf-font-mono);
}

/* fitView toggles statusEl.hidden — make sure it wins inside the view */
.lab-view [hidden] { display: none !important; }

/* Full-bleed hook the lab view adds to #content while an entry is open */
.nf-content--bleed { padding: 0 !important; overflow: hidden !important; }

/* ── View shells ─────────────────────────────────────────────────────────── */
.lab-view { display: flex; flex-direction: column; height: 100%; font-family: var(--ed-font); }

.lab-editor__bar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: var(--ed-panel);
  border-bottom: 1px solid var(--ed-line);
}
.lab-editor__bar .spacer { flex: 1; }
.lab-editor__ctx { min-width: 0; display: flex; align-items: baseline; gap: 9px; overflow: hidden; }
.lab-editor__no { font-family: var(--ed-mono); font-weight: 600; color: var(--ed-amber); white-space: nowrap; }
.lab-editor__title { font-size: 13px; font-weight: 500; color: var(--ed-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lab-editor__final {
  font-family: var(--ed-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ed-good); border: 1px solid var(--ed-good); border-radius: 999px; padding: 2px 10px;
}

.lab-editor__body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr var(--lab-insp-w, 320px);
  min-height: 0;
}
.lab-editor__body--noinsp { grid-template-columns: 1fr; }

/* Save-state chip */
.ed-save { font-family: var(--ed-mono); font-size: 11px; padding: 4px 10px; border-radius: 999px; }
.ed-save--idle { color: var(--ed-text-dim); }
.ed-save--dirty { color: var(--ed-amber); }
.ed-save--saving { color: var(--ed-text-mu); }
.ed-save--saved { color: var(--ed-good); }
.ed-save--error { color: var(--ed-accent-soft); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.ed-btn {
  font: inherit;
  color: var(--ed-text);
  background: var(--ed-panel-2);
  border: 1px solid var(--ed-line);
  border-radius: var(--ed-radius-sm);
  padding: 6px 11px;
  cursor: pointer;
  transition: background .12s, border-color .12s, opacity .12s;
}
.ed-btn:hover:not(:disabled) { background: var(--ed-line-soft); border-color: var(--ed-text-dim); }
.ed-btn:disabled { opacity: .4; cursor: default; }
.ed-btn--icon { padding: 5px 9px; font-size: 15px; line-height: 1; }
.ed-btn--sm { padding: 4px 9px; font-size: 12px; }
.ed-btn--accent { background: var(--ed-accent); border-color: var(--ed-accent); color: #FBFAF6; }
.ed-btn--accent:hover:not(:disabled) { background: var(--ed-accent-soft); border-color: var(--ed-accent-soft); }

/* ── Stage ───────────────────────────────────────────────────────────────── */
.ed-stage { position: relative; background: var(--ed-stage); min-width: 0; display: flex; flex-direction: column; }
.ed-stage__scroll { flex: 1; overflow: auto; display: grid; place-items: center; padding: 40px; }
.ed-stage__fit { position: relative; }   /* iframe-host sets explicit pixel w/h */
.ed-stage__frame {
  display: block;
  border: 0;
  background: #fff;
  transform-origin: top left;
  box-shadow: 0 18px 44px rgba(40, 38, 34, .35);
}
.ed-stage__loading {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--ed-text-mu); font-family: var(--ed-mono); font-size: 12px; letter-spacing: .1em;
}

/* Fit gauges + overflow status bar */
.ed-stage__status {
  flex: 0 0 auto;
  padding: 7px 16px;
  background: var(--ed-panel);
  border-top: 1px solid var(--ed-line);
  color: var(--ed-text-mu);
  font-size: 12px;
  display: flex; align-items: center; gap: 18px;
}
.ed-stage__status--over { background: #F5E2D8; color: var(--ed-text); }
.ed-fit { display: inline-flex; align-items: center; gap: 7px; }
.ed-fit__label { font-family: var(--ed-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--ed-text-dim); }
.ed-fit__bar { width: 96px; height: 6px; border-radius: 3px; background: var(--ed-line); overflow: hidden; }
.ed-fit__bar i { display: block; height: 100%; background: var(--ed-good); }
.ed-fit__bar--low i { background: var(--ed-text-dim); }
.ed-fit__bar--over i { background: var(--ed-accent); }
.ed-fit__pct { font-family: var(--ed-mono); font-size: 11px; min-width: 36px; color: var(--ed-text); }
.ed-fit__warn { color: var(--ed-accent-soft); font-size: 12px; margin-right: 6px; }

/* ── Inspector ───────────────────────────────────────────────────────────── */
.ed-inspector {
  background: var(--ed-panel);
  border-left: 1px solid var(--ed-line);
  overflow-y: auto;
  padding: 14px;
}
.ed-inspector__empty { color: var(--ed-text-dim); font-size: 12px; line-height: 1.6; padding: 8px 4px; }
.ed-inspector__hint { color: var(--ed-text-mu); font-size: 11.5px; line-height: 1.5; padding: 2px 4px 12px; border-bottom: 1px solid var(--ed-line-soft); margin-bottom: 12px; }

.ed-region { margin-bottom: 16px; }
.ed-region__head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.ed-region__title { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--ed-text-mu); font-weight: 600; }
.ed-region__count {
  font-family: var(--ed-mono); font-size: 10px; color: var(--ed-text-dim);
  background: var(--ed-panel-2); border: 1px solid var(--ed-line); border-radius: 999px; padding: 0 6px;
}
.ed-region__list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 7px; }
.ed-item {
  display: flex; align-items: center; gap: 6px;
  background: var(--ed-panel-2); border: 1px solid var(--ed-line); border-radius: var(--ed-radius-sm);
  padding: 5px 7px; font-size: 12px;
}
.ed-item__handle { cursor: grab; color: var(--ed-text-dim); user-select: none; font-size: 13px; line-height: 1; }
.ed-item__handle:active { cursor: grabbing; }
.ed-item__label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ed-text); }
.ed-item__del {
  font: inherit; font-size: 15px; line-height: 1; color: var(--ed-text-dim);
  background: none; border: 0; cursor: pointer; padding: 0 4px; border-radius: 3px;
}
.ed-item__del:hover:not(:disabled) { color: var(--ed-accent-soft); background: rgba(217, 58, 46, .08); }
.ed-item__del:disabled { opacity: .3; cursor: default; }
.ed-region__add { width: 100%; }
.nf-drag-placeholder { box-sizing: border-box; }

/* Stacked item: a preset toggle on its own line below the summary */
.ed-item--stacked { flex-direction: column; align-items: stretch; gap: 6px; }
.ed-item__main { display: flex; align-items: center; gap: 6px; }
.ed-preset { display: flex; flex-wrap: wrap; gap: 4px; padding-left: 19px; }
.ed-preset__opt {
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: 10.5px; color: var(--ed-text-mu);
  background: var(--ed-bg); border: 1px solid var(--ed-line); border-radius: 999px;
  padding: 3px 8px; cursor: pointer; transition: color .12s, border-color .12s, background .12s;
}
.ed-preset__opt:hover { color: var(--ed-text); border-color: var(--ed-text-dim); }
.ed-preset__opt--on { color: var(--ed-text); background: var(--ed-panel-2); font-weight: 500; border-color: var(--ed-text-mu); }
.ed-preset__dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }

/* Heading red-word picker */
.ed-highlight-block { padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--ed-line-soft); }
.ed-highlight__label { font-size: 11px; color: var(--ed-text-mu); margin-bottom: 6px; }
.ed-highlight { display: flex; flex-wrap: wrap; gap: 4px; }
.ed-highlight__word {
  font: inherit; font-size: 11.5px; color: var(--ed-text-mu);
  background: var(--ed-bg); border: 1px solid var(--ed-line); border-radius: var(--ed-radius-sm);
  padding: 3px 7px; cursor: pointer; transition: color .12s, border-color .12s, background .12s;
}
.ed-highlight__word:hover { color: var(--ed-text); border-color: var(--ed-text-dim); }
.ed-highlight__word--on { color: #fff; background: var(--ed-accent); border-color: var(--ed-accent); }
.ed-highlight__empty { font-size: 11px; color: var(--ed-text-dim); }

/* Nested region (kept for parity — lab templates don't use it) */
.ed-part {
  border: 1px solid var(--ed-line); border-radius: var(--ed-radius-sm);
  background: rgba(40, 38, 34, .04); padding: 8px; margin-bottom: 8px;
}
.ed-part__head { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.ed-part__label { flex: 1; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-nested__list { display: flex; flex-direction: column; gap: 3px; margin: 0 0 6px; }
.ed-nested__item {
  display: flex; align-items: center; gap: 5px;
  background: var(--ed-panel-2); border: 1px solid var(--ed-line-soft); border-radius: 4px;
  padding: 4px 6px; font-size: 11.5px;
}
.ed-arrows { display: inline-flex; flex-direction: column; gap: 1px; }
.ed-arrow {
  font: inherit; font-size: 7px; line-height: 1; color: var(--ed-text-dim);
  background: none; border: 0; cursor: pointer; padding: 1px 2px;
}
.ed-arrow:hover:not(:disabled) { color: var(--ed-text); }
.ed-arrow:disabled { opacity: .25; cursor: default; }

/* Page-field rows + enum/image controls */
.ed-fieldrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 2px; }
.ed-fieldrow__label { font-size: 12px; color: var(--ed-text-mu); }

.ed-enum { display: inline-flex; gap: 3px; align-items: center; }
.ed-enum__opt {
  width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--ed-line); cursor: pointer; padding: 0;
  outline: 2px solid transparent; outline-offset: 1px; flex: 0 0 auto;
}
.ed-enum__opt--on { outline-color: var(--ed-text-mu); }

.ed-imgctl { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.ed-imgctl__preview {
  width: 92px; height: 68px; border: 1px solid var(--ed-line); border-radius: 4px;
  overflow: hidden; background: var(--ed-panel-2); display: grid; place-items: center;
}
.ed-imgctl__img { width: 100%; height: 100%; object-fit: cover; }
.ed-imgctl__none { color: var(--ed-text-dim); font-size: 10px; }
.ed-imgctl__actions { display: flex; gap: 6px; }

/* ── Lab "Entry" card at the top of the inspector ────────────────────────── */
.ed-entry { border: 1px solid var(--ed-line); border-radius: var(--ed-radius); background: var(--ed-panel-2); padding: 10px 11px; margin-bottom: 12px; }
.ed-entry__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.ed-entry__label { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--ed-text-mu); }
.ed-entry__no { font-family: var(--ed-mono); font-weight: 600; font-size: 15px; color: var(--ed-amber); }
.ed-entry__row { display: flex; align-items: center; gap: 8px; margin: 5px 0; font-size: 12px; }
.ed-entry__k { flex: 0 0 40px; color: var(--ed-text-mu); font-size: 11px; }
.ed-entry__v { flex: 1 1 auto; min-width: 0; }
.ed-entry__end { font: inherit; font-size: 12px; color: var(--ed-text); background: var(--ed-bg); border: 1px solid var(--ed-line); border-radius: var(--ed-radius-sm); padding: 3px 6px; }
.ed-entry__end:disabled { opacity: .45; }
.ed-entry__ongoing { display: flex; align-items: center; gap: 6px; margin: 7px 0 2px; font-size: 11.5px; color: var(--ed-text-mu); cursor: pointer; }
.ed-entry__note { margin-top: 9px; font-size: 11px; color: var(--ed-text-mu); line-height: 1.4; }
.ed-entry__auto { width: 100%; margin-top: 7px; }
.ed-entry__flag { margin-top: 9px; font-size: 11px; color: var(--ed-accent-soft); line-height: 1.4; }

/* ── List screen extras (Archive components carry the rest) ─────────────── */
.lab-list { max-width: 860px; }
.lab-today {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--nf-bg-elevated);
  border: 1px solid var(--nf-border);
  border-top: 2px solid var(--nf-heading);
  border-radius: var(--nf-radius-md);
  box-shadow: var(--nf-shadow-sm);
  padding: 14px 16px;
  margin-bottom: 24px;
}
.lab-today__date { font-family: var(--nf-font-mono); font-size: var(--nf-text-xs); letter-spacing: var(--nf-tracking-label); text-transform: uppercase; color: var(--nf-text-muted); margin-right: auto; }
.lab-row-del {
  font: inherit; font-size: 14px; line-height: 1; color: var(--nf-text-muted);
  background: none; border: 0; cursor: pointer; padding: 2px 6px; border-radius: 3px; margin-left: 8px;
}
.lab-row-del:hover { color: var(--nf-danger); background: rgba(217, 58, 46, .08); }