/* PI-30 — In-Portal Editor.
   Full-screen editing surface for draft Artifacts, styled to the approved
   prototype (2026-07-22_pi-workspace-one-shell-v1.5.html): chrome bars (top bar +
   meta strip + footer), a pill formatting bar, and a white "paper" panel holding
   the Artifact, with the highlight-to-note rail beside it.

   Color model — the shell RE-THEMES with the portal's Appearance setting
   (System / Light / Dark): light is white chrome on a soft grey stage, dark is
   the prototype's brand-navy treatment. Those values live in css/tokens.css as
   the --editor-* family and are resolved once into the scoped roles below, so a
   theme flip while the editor is open repaints it with no JS. Two things stay
   constant on purpose: the paper (--paper), because the Artifact's own document
   paints on it, and the float bar / selection chrome, because it floats OVER
   that constant-white paper. Tokens only — no raw hex. */

#pi-editor-overlay {
  /* Scoped roles — set once, consumed everywhere below. */
  --pi-chrome:     var(--editor-chrome);  /* bars, toolbar pill, popovers */
  --pi-shell:      var(--editor-shell);   /* stage + rail background      */
  --pi-ink:        var(--editor-ink);     /* primary text on the chrome   */
  --pi-ink-2:      var(--editor-ink-2);   /* secondary text               */
  --pi-ink-3:      var(--editor-ink-3);   /* footnotes / placeholders     */
  --pi-edge:       var(--editor-edge);    /* hairlines                    */
  --pi-fill:       var(--editor-fill);    /* chip / input fill            */
  --pi-fill-2:     var(--editor-fill-2);  /* hover fill                   */
  --pi-accent:     var(--editor-accent);  /* hover + emphasis accent      */
  --pi-shadow:     var(--editor-shadow);
  --pi-scrim:      rgba(0, 0, 0, .45);    /* modal backdrop (template picker) */
  /* The float bar sits on the constant-white paper, so it is constant navy. */
  --pi-float-edge: rgba(255, 255, 255, .15);
  --pi-head:       "Gill Sans", "Gill Sans MT", Calibri, "Lato", Arial, sans-serif;

  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  flex-direction: column;
  background: var(--pi-shell);
  color: var(--pi-ink);
}

/* Brand accent hairline across the very top, mirroring the portal shell. */
.pi-ed-accent {
  flex: none;
  height: 3px;
  background: linear-gradient(90deg, var(--vb), var(--or));
}

/* ── Top bar (actions) ───────────────────────────────────────────────────── */
.pi-ed-topbar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 9px 18px;
  background: var(--pi-chrome);
  border-bottom: 1px solid var(--pi-edge);
}
.pi-ed-topbar__left,
.pi-ed-topbar__right {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.pi-ed-wordmark {
  font-family: var(--pi-head);
  font-size: .94rem;
  color: var(--pi-ink);
}
.pi-ed-wordmark span { color: var(--pi-ink-3); font-size: .78rem; }
.pi-ed-divider { width: 1px; height: 20px; background: var(--pi-edge); }
.pi-ed-save-status {
  font-size: .74rem;
  color: var(--pi-ink-2);
  min-width: 64px;
  text-align: right;
}

/* ── Meta strip (identity) ───────────────────────────────────────────────── */
.pi-ed-metastrip {
  flex: none;
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
  padding: 7px 18px;
  background: var(--pi-chrome);
  border-bottom: 1px solid var(--pi-edge);
}
.pi-ed-title {
  font-family: var(--pi-head);
  font-weight: 600;
  font-size: .92rem;
  color: var(--pi-ink);
  max-width: 40ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pi-ed-badge {
  font-family: var(--pi-head);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--on-brand);
  background: var(--solid-draft);
  padding: 3px 9px;
  border-radius: 999px;
}
.pi-ed-meta { font-size: .72rem; color: var(--pi-ink-2); }
.pi-ed-presence {
  font-size: .68rem;
  font-weight: 700;
  color: var(--info);
  background: var(--info-tint);
  border: 1px solid var(--info-border);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}
.pi-ed-presence[hidden] { display: none; }
.pi-ed-textstats {
  margin-left: auto;
  font-size: .72rem;
  color: var(--pi-ink-2);
  white-space: nowrap;
}
/* PI-31 (v1.4) — "Preview as viewer" indicator pill in the meta strip. */
.pi-ed-preview-flag {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--info);
  background: var(--info-tint);
  border: 1px solid var(--info-border);
  padding: 3px 9px;
  border-radius: 999px;
}
.pi-ed-preview-flag[hidden] { display: none; }

/* Bundle page picker — hidden unless the artifact is a multi-page bundle. */
.pi-ed-page-wrap { display: flex; align-items: center; gap: 7px; }
.pi-ed-page-wrap[hidden] { display: none; }
.pi-ed-page-label {
  font-family: var(--pi-head);
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pi-ink-3);
}
#pi-ed-page { max-width: 26ch; }

/* ── Scripts-off notice ──────────────────────────────────────────────────────
   Shown only when the open page carries executable scripts. Edit mode renders the
   Artifact with its scripts inert (js/editor.js#buildScriptsOffRender), so
   script-built content does not draw — this bar says why and offers the read-only
   Preview that does run them. Uses the shared info status trio, which re-themes
   light/dark and whose text-on-tint pair is asserted in scripts/check-contrast.js. */
.pi-ed-scriptnote {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 7px 18px;
  font-size: .74rem;
  line-height: 1.45;
  color: var(--info);
  background: var(--info-tint);
  border-bottom: 1px solid var(--info-border);
}
.pi-ed-scriptnote[hidden] { display: none; }
.pi-ed-scriptnote__icon { flex: none; font-size: .9rem; }
.pi-ed-scriptnote__text { flex: 1; min-width: 22ch; }
.pi-ed-scriptnote__btn {
  flex: none;
  color: var(--info);
  border-color: var(--info-border);
}
.pi-ed-scriptnote__btn:hover {
  color: var(--info);
  border-color: var(--info);
  background: transparent;
}

/* ── PI-68 — concurrent-edit conflict bar ────────────────────────────────────
   Shown when a save is rejected with 409 VERSION_CONFLICT (someone else saved a
   newer version after this session loaded — js/editor.js#onSaveConflict). Mirrors
   the script-note bar's layout; uses the shared warning status trio, which
   re-themes light/dark and whose text-on-tint pair is asserted in
   scripts/check-contrast.js. */
.pi-ed-conflict {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 7px 18px;
  font-size: .74rem;
  line-height: 1.45;
  color: var(--warning);
  background: var(--warning-tint);
  border-bottom: 1px solid var(--warning-border);
}
.pi-ed-conflict[hidden] { display: none; }
.pi-ed-conflict__icon { flex: none; font-size: .9rem; }
.pi-ed-conflict__text { flex: 1; min-width: 22ch; }
.pi-ed-conflict__btn {
  flex: none;
  color: var(--warning);
  border-color: var(--warning-border);
}
.pi-ed-conflict__btn:hover {
  color: var(--warning);
  border-color: var(--warning);
  background: transparent;
}

/* PI-76 — product decision: phone-width editing is explicitly unsupported. */
.pi-ed-phonegate {
  flex: 1;
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 24px;
  background: var(--pi-shell);
}
.pi-ed-phonegate__card {
  width: min(100%, 360px);
  padding: 22px;
  color: var(--pi-ink);
  background: var(--pi-chrome);
  border: 1px solid var(--pi-edge);
  border-radius: 16px;
  box-shadow: var(--pi-shadow);
}
.pi-ed-phonegate__eyebrow {
  margin: 0 0 8px;
  font-family: var(--pi-head);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pi-ink-3);
}
.pi-ed-phonegate h2 {
  margin: 0 0 10px;
  font-family: var(--pi-head);
  font-size: 1.18rem;
  line-height: 1.25;
  color: var(--pi-ink);
}
.pi-ed-phonegate p {
  margin: 0 0 16px;
  font-size: .86rem;
  line-height: 1.55;
  color: var(--pi-ink-2);
}

/* PI-31 — in-editor recipient share banner. Mirrors the script-note bar; uses
   the chrome roles so it re-themes light/dark with the editor shell. */
.pi-ed-sharebanner {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 7px 18px;
  font-size: .74rem;
  line-height: 1.45;
  color: var(--pi-ink-2);
  background: var(--pi-chrome);
  border-bottom: 1px solid var(--pi-edge);
}
.pi-ed-sharebanner[hidden] { display: none; }
.pi-ed-sharebanner__icon { flex: none; font-size: .9rem; }
.pi-ed-sharebanner__text { flex: 1; min-width: 22ch; }
.pi-ed-sharebanner__policy {
  flex: none;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: .68rem;
  color: var(--warning);
  background: var(--warning-tint);
  border: 1px solid var(--warning-border);
}

/* ── Pill buttons (chrome) ───────────────────────────────────────────────── */
.pi-ed-btn {
  font-family: inherit;
  font-size: .76rem;
  color: var(--pi-ink);
  background: transparent;
  border: 1px solid var(--pi-edge);
  border-radius: 999px;
  padding: 6px 15px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.pi-ed-btn:hover { background: var(--pi-fill); border-color: var(--pi-accent); color: var(--pi-accent); }
.pi-ed-btn--ghost { border-color: transparent; }
.pi-ed-btn--ghost:hover { border-color: var(--pi-accent); }
.pi-ed-btn--primary {
  font-weight: 700;
  color: var(--on-or);
  background: var(--or);
  border-color: var(--or);
}
.pi-ed-btn--primary:hover { background: var(--su); border-color: var(--su); color: var(--on-or); }
.pi-ed-btn:disabled,
.pi-ed-btn:disabled:hover {
  opacity: .45;
  cursor: not-allowed;
  color: var(--pi-ink);
  background: transparent;
  border-color: var(--pi-edge);
}
.pi-ed-btn--primary:disabled,
.pi-ed-btn--primary:disabled:hover {
  color: var(--on-or);
  background: var(--or);
  border-color: var(--or);
}
/* Active toggle — Preview is showing the read-only, scripts-on render. */
.pi-ed-btn--active,
.pi-ed-btn--active:hover {
  color: var(--pi-accent);
  background: var(--pi-fill-2);
  border-color: var(--pi-accent);
}

/* ── Stage: formatting pill + the paper ──────────────────────────────────── */
.pi-ed-body {
  flex: 1;
  display: grid;
  /* Council rail on the LEFT (prototype layout), stage on the right. */
  grid-template-columns: 320px 1fr;
  min-height: 0;
}
#pi-editor-overlay.pi-ed--rail-collapsed .pi-ed-body { grid-template-columns: 1fr; }
#pi-editor-overlay.pi-ed--rail-collapsed .pi-ed-rail { display: none; }

.pi-ed-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Tight 5px gutter — the Artifact gets every pixel of the stage. */
  padding: 5px;
  gap: 5px;
  background: var(--pi-shell);
}

.pi-ed-fmtbar {
  flex: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  width: 100%;
  padding: 5px 13px;
  background: var(--pi-chrome);
  border: 1px solid var(--pi-edge);
  border-radius: 18px;
  box-shadow: var(--pi-shadow);
}
.pi-ed-fmt {
  font-family: inherit;
  font-size: .78rem;
  color: var(--pi-ink);
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 4px 9px;
  cursor: pointer;
  white-space: nowrap;
}
.pi-ed-fmt:hover { background: var(--pi-fill); color: var(--pi-accent); }
.pi-ed-fmt:disabled, .pi-ed-fmt:disabled:hover {
  opacity: .4; cursor: not-allowed; background: transparent; color: var(--pi-ink);
}
.pi-ed-fmt-sep { width: 1px; height: 17px; background: var(--pi-edge); margin: 0 3px; }
.pi-ed-fmt-note {
  margin-left: auto;
  font-size: .64rem;
  color: var(--pi-ink-3);
  white-space: nowrap;
}
.pi-ed-sel {
  font-family: inherit;
  font-size: .72rem;
  color: var(--pi-ink);
  background: var(--pi-fill);
  border: 1px solid var(--pi-edge);
  border-radius: 999px;
  padding: 3px 8px;
  cursor: pointer;
}
.pi-ed-sel:disabled { opacity: .4; cursor: not-allowed; }

/* Version-history dropdown in the topbar — styled as a pill button (.pi-ed-btn),
   but capped so a long "vX.Y.Z · Date" option label can't stretch the toolbar. */
.pi-ed-version-select { max-width: 190px; }

/* The Artifact's paper — constant white in BOTH themes, because the document
   inside carries its own colors. The iframe fills it and scrolls internally. */
.pi-ed-paper {
  flex: 1;
  width: 100%;
  min-height: 0;
  background: var(--paper);
  border: 1px solid var(--pi-edge);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--pi-shadow);
}
.pi-ed-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--paper);
}

/* ── Left rail (Council / Notes / Library) ───────────────────────────────────
   Docked full-height sidebar ported from the approved prototype. The Council,
   Notes, and Library panes swap inside it; only the active pane is shown. */
.pi-ed-rail {
  border-right: 1px solid var(--pi-edge);
  background: var(--pi-chrome);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.pi-ed-rail__head { flex: none; padding: 13px 15px 0; }
.pi-ed-rail__brand { display: flex; align-items: center; gap: 9px; }
.pi-ed-rail__tabs {
  display: flex;
  gap: 4px;
  margin-top: 11px;
  border-bottom: 1px solid var(--pi-edge);
}
.pi-ed-rail__tab {
  font-family: var(--pi-head);
  font-size: .76rem;
  color: var(--pi-ink-2);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 7px 11px;
  cursor: pointer;
  white-space: nowrap;
}
.pi-ed-rail__tab:hover { color: var(--pi-ink); }
.pi-ed-rail__tab--active { color: var(--pi-ink); border-bottom-color: var(--or); }
.pi-ed-rail__count {
  font-size: .64rem;
  font-weight: 700;
  color: var(--on-or);
  background: var(--su);
  border-radius: 999px;
  padding: 0 6px;
  margin-left: 2px;
}
.pi-ed-rail__pane { display: none; flex: 1; min-height: 0; flex-direction: column; }
.pi-ed-rail__pane--active { display: flex; }

/* ── Notes pane ──────────────────────────────────────────────────────────── */
.pi-ed-notes-list { flex: 1; overflow: auto; padding: 12px; }
.pi-ed-notes-hint {
  padding: 10px 15px;
  font-size: .7rem;
  color: var(--pi-ink-3);
  border-top: 1px solid var(--pi-edge);
}
.pi-ed-notes-hint strong { color: var(--pi-ink-2); }
.pi-ed-notes-empty {
  border: 1px dashed var(--pi-edge);
  border-radius: 10px;
  padding: 13px;
  font-size: .76rem;
  color: var(--pi-ink-2);
}

/* ── Contents pane (PI-100: synced to editable headings) ─────────────────── */
.pi-ed-toc-head {
  flex: none;
  padding: 12px 15px 6px;
  font-family: var(--pi-head);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pi-ink-3);
}
.pi-ed-toc-list {
  flex: 1;
  overflow: auto;
  padding: 6px 12px 12px;
}
.pi-ed-toc-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  margin: 0 0 6px;
  text-align: left;
  font-family: inherit;
  color: var(--pi-ink-2);
  background: var(--pi-fill);
  border: 1px solid var(--pi-edge);
  border-radius: 8px;
  padding: 7px 9px;
  cursor: pointer;
}
.pi-ed-toc-item:hover {
  color: var(--pi-accent);
  border-color: var(--pi-accent);
  background: var(--pi-fill-2);
}
.pi-ed-toc-item--h2 { margin-left: 12px; width: calc(100% - 12px); }
.pi-ed-toc-item--h3 { margin-left: 24px; width: calc(100% - 24px); }
.pi-ed-toc-item__level {
  flex: none;
  font-family: var(--pi-head);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--pi-ink-3);
}
.pi-ed-toc-item__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pi-ed-toc-hint {
  flex: none;
  padding: 10px 15px;
  font-size: .7rem;
  color: var(--pi-ink-3);
  border-top: 1px solid var(--pi-edge);
}
.pi-ed-toc-empty {
  border: 1px dashed var(--pi-edge);
  border-radius: 10px;
  padding: 13px;
  font-size: .76rem;
  color: var(--pi-ink-2);
}

/* ── Library pane (read-only: open artifact + bundle pages) ──────────────── */
.pi-ed-lib-head {
  flex: none;
  padding: 6px 15px 6px;
  font-family: var(--pi-head);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pi-ink-3);
}
/* PI-32 — Library workspace actions (add durable documents to the artifact). */
.pi-ed-lib-actions {
  flex: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 0 12px 9px;
  border-bottom: 1px solid var(--pi-edge);
}
.pi-ed-lib-actions[hidden] { display: none; }
.pi-ed-lib-act { width: 100%; text-align: left; }
.pi-ed-lib-policy {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  margin-top: 3px;
  padding-top: 8px;
  border-top: 1px dashed var(--pi-edge);
}
.pi-ed-lib-policy[hidden] { display: none; }
.pi-ed-lib-policy__label {
  font-family: var(--pi-head);
  font-size: .62rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pi-ink-3);
}
.pi-ed-lib-classification {
  width: 100%;
  font-family: inherit;
  font-size: .74rem;
  color: var(--pi-ink);
  background: var(--pi-fill);
  border: 1px solid var(--pi-edge);
  border-radius: 8px;
  padding: 6px 10px;
}
.pi-ed-lib-classification::placeholder { color: var(--pi-ink-3); }
.pi-ed-lib-classification[hidden] { display: none; }
.pi-ed-lib-classification:focus { outline: 2px solid var(--pi-accent); outline-offset: 2px; }
/* A policy-locked (view-only) session dims the formatting bar. */
.pi-ed-fmtbar--disabled { opacity: .4; pointer-events: none; }

.pi-ed-lib-tools {
  flex: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  padding: 0 12px 9px;
  border-bottom: 1px solid var(--pi-edge);
}
.pi-ed-lib-tools[hidden] { display: none; }
.pi-ed-lib-search-label,
.pi-ed-lib-sort-label {
  font-family: var(--pi-head);
  font-size: .64rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pi-ink-3);
}
.pi-ed-lib-search {
  width: 100%;
  font-family: inherit;
  font-size: .74rem;
  color: var(--pi-ink);
  background: var(--pi-fill);
  border: 1px solid var(--pi-edge);
  border-radius: 999px;
  padding: 6px 10px;
}
.pi-ed-lib-search::placeholder { color: var(--pi-ink-3); }
.pi-ed-lib-search:focus,
.pi-ed-lib-sort:focus {
  outline: 2px solid var(--pi-accent);
  outline-offset: 2px;
}
.pi-ed-lib-sort { width: 100%; }
.pi-ed-lib-count {
  font-size: .68rem;
  color: var(--pi-ink-3);
}
.pi-ed-lib-list { flex: 1; overflow: auto; padding: 6px 12px 12px; }
.pi-ed-lib-empty {
  border: 1px dashed var(--pi-edge);
  border-radius: 10px;
  padding: 12px;
  font-size: .76rem;
  color: var(--pi-ink-2);
}
/* Bundle sub-pages listed under the active artifact card. */
.pi-ed-lib-page {
  display: block;
  width: calc(100% - 12px);
  margin: 0 0 6px 12px;
  text-align: left;
  font-family: inherit;
  font-size: .72rem;
  color: var(--pi-ink-2);
  background: var(--pi-fill);
  border: 1px solid var(--pi-edge);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  word-break: break-word;
}
.pi-ed-lib-page:hover { border-color: var(--pi-accent); color: var(--pi-accent); }
.pi-ed-lib-page--active { border-left: 3px solid var(--or); color: var(--pi-ink); }
.pi-ed-lib-item {
  width: 100%;
  text-align: left;
  border: 1px solid var(--pi-edge);
  border-left: 3px solid var(--or);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--pi-fill-2);
}
.pi-ed-lib-item__main { min-width: 0; }
.pi-ed-lib-item__name { font-size: .82rem; color: var(--pi-ink); word-break: break-word; }
.pi-ed-lib-item__meta { font-size: .68rem; color: var(--pi-ink-3); margin-top: 4px; }

.pi-ed-note {
  border: 1px solid var(--pi-edge);
  border-left: 3px solid var(--su);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: var(--pi-fill);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.pi-ed-note:hover,
.pi-ed-note--flash { border-left-color: var(--or); background: var(--pi-fill-2); }
.pi-ed-note--reply {
  margin: 8px 0 0 12px;
  border-left-color: var(--info-border);
  cursor: default;
}
.pi-ed-note__excerpt { font-size: .74rem; color: var(--pi-ink-2); font-style: italic; margin-bottom: 5px; }
.pi-ed-note__resolved {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 6px;
  color: var(--success);
  background: var(--success-tint);
  border: 1px solid var(--success-border);
  border-radius: 999px;
  padding: 2px 7px;
  font-size: .64rem;
  font-weight: 700;
}
.pi-ed-note__text { font-size: .82rem; color: var(--pi-ink); margin-bottom: 6px; word-break: break-word; }
.pi-ed-note__meta { display: flex; align-items: center; justify-content: space-between; font-size: .68rem; color: var(--pi-ink-3); }
.pi-ed-note__actions { display: inline-flex; align-items: center; gap: 6px; }
.pi-ed-note__del {
  font-family: inherit;
  font-size: .68rem;
  color: var(--pi-accent);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
}
.pi-ed-note__del:hover { text-decoration: underline; }
.pi-ed-note__del[data-del] { color: var(--danger); }
.pi-ed-note__replies {
  margin-top: 8px;
  padding-top: 2px;
}
.pi-ed-note__replybox {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--pi-edge);
}
.pi-ed-note__replybox[hidden] { display: none; }
.pi-ed-note__replybox textarea {
  width: 100%;
  resize: vertical;
  font-family: inherit;
  font-size: .78rem;
  color: var(--pi-ink);
  background: var(--pi-fill);
  border: 1px solid var(--pi-edge);
  border-radius: 8px;
  padding: 7px 9px;
}
.pi-ed-note__replybox textarea:focus { outline: 2px solid var(--pi-accent); outline-offset: 2px; }

/* ── Selection float bar ─────────────────────────────────────────────────────
   Constant navy in both themes: it floats over the paper, which is constant
   white, so it must not follow the surrounding chrome. */
.pi-ed-floatbar {
  position: absolute;
  display: none;
  gap: 4px;
  padding: 5px;
  background: var(--dn);
  border: 1px solid var(--pi-float-edge);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .38);
  z-index: 1320;
}
.pi-ed-floatbar.show { display: flex; }
.pi-ed-fb {
  font-family: inherit;
  font-size: .76rem;
  color: var(--on-brand);
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 5px 13px;
  cursor: pointer;
  white-space: nowrap;
}
.pi-ed-fb:hover { background: var(--vb); color: var(--on-brand); }
#pi-ed-fb-note { background: var(--or); color: var(--on-or); font-weight: 700; }
#pi-ed-fb-note:hover { background: var(--su); color: var(--on-or); }
.pi-ed-fb--disabled, .pi-ed-fb--disabled:hover {
  color: var(--on-brand); opacity: .5; background: transparent; cursor: not-allowed;
}
.pi-ed-soon {
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--on-or);
  background: var(--su);
  border-radius: 999px;
  padding: 0 5px;
  margin-left: 4px;
}

/* ── Popovers (note / link) ──────────────────────────────────────────────── */
.pi-ed-pop {
  position: absolute;
  display: none;
  flex-direction: column;
  gap: 8px;
  width: 300px;
  padding: 12px;
  background: var(--pi-chrome);
  border: 1px solid var(--pi-edge);
  border-top: 3px solid var(--or);
  border-radius: 11px;
  box-shadow: var(--pi-shadow);
  z-index: 1330;
}
.pi-ed-pop.show { display: flex; }
.pi-ed-pop textarea,
.pi-ed-pop input[type="text"],
.pi-ed-pop input[type="number"] {
  font-family: inherit;
  font-size: .82rem;
  color: var(--pi-ink);
  background: var(--pi-fill);
  border: 1px solid var(--pi-edge);
  border-radius: 8px;
  padding: 8px 10px;
  resize: vertical;
  width: 100%;
}
.pi-ed-pop textarea::placeholder,
.pi-ed-pop input[type="text"]::placeholder,
.pi-ed-pop input[type="number"]::placeholder { color: var(--pi-ink-3); }
.pi-ed-pop textarea:focus,
.pi-ed-pop input[type="text"]:focus,
.pi-ed-pop input[type="number"]:focus {
  outline: 2px solid var(--pi-accent);
  outline-offset: 2px;
  border-color: var(--pi-accent);
}
.pi-ed-pop__title {
  font-family: var(--pi-head);
  font-weight: 700;
  color: var(--pi-ink);
}
.pi-ed-pop__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.pi-ed-pop__grid label {
  display: grid;
  gap: 5px;
  font-size: .72rem;
  color: var(--pi-ink-2);
}
.pi-ed-pop__grid span {
  font-family: var(--pi-head);
  font-weight: 700;
  color: var(--pi-ink);
}
.pi-ed-pop__hint {
  font-size: .72rem;
  line-height: 1.4;
  color: var(--pi-ink-2);
}
.pi-ed-pop__actions { display: flex; justify-content: flex-end; gap: 8px; }
/* PI-90 — popup header row with ✕ close button (mirrors .pi-ed-tpl-close) */
.pi-ed-pop__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pi-ed-pop__x {
  font-size: 1rem;
  line-height: 1;
  color: var(--pi-ink-2);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
.pi-ed-pop__x:hover { color: var(--pi-accent); background: var(--pi-fill); }
.pi-ed-find-pop { width: 360px; }
.pi-ed-find-case {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .74rem;
  color: var(--pi-ink-2);
}
.pi-ed-find-case input { accent-color: var(--pi-accent); }
.pi-ed-find-status {
  font-size: .72rem;
  color: var(--pi-ink-2);
}
.pi-ed-find-actions {
  flex-wrap: wrap;
}

/* ── PI-101 — in-document command menu ──────────────────────────────────────
   Slash-triggered from the editable iframe and exposed as a real combobox +
   listbox. The menu is portal chrome, not Artifact content, so it lives outside
   the iframe and never persists into saved HTML. */
.pi-ed-command-menu {
  position: absolute;
  display: grid;
  gap: 7px;
  width: min(340px, calc(100vw - 24px));
  max-height: min(420px, calc(100vh - 24px));
  overflow-y: auto;
  padding: 11px;
  background: var(--pi-chrome);
  border: 1px solid var(--pi-edge);
  border-top: 3px solid var(--or);
  border-radius: 12px;
  box-shadow: var(--pi-shadow);
  z-index: 1335;
}
.pi-ed-command-menu[hidden] { display: none; }
.pi-ed-command-menu__label {
  font-family: var(--pi-head);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pi-ink-3);
}
#pi-ed-command-input {
  width: 100%;
  font-family: inherit;
  font-size: .82rem;
  color: var(--pi-ink);
  background: var(--pi-fill);
  border: 1px solid var(--pi-edge);
  border-radius: 8px;
  padding: 8px 10px;
}
#pi-ed-command-input:focus {
  outline: 2px solid var(--pi-accent);
  outline-offset: 2px;
  border-color: var(--pi-accent);
}
.pi-ed-command-menu__hint,
.pi-ed-command-menu__empty {
  font-size: .7rem;
  line-height: 1.35;
  color: var(--pi-ink-3);
}
.pi-ed-command-menu__list {
  display: grid;
  gap: 4px;
  max-height: 260px;
  overflow: auto;
}
.pi-ed-command-menu__option {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  color: var(--pi-ink);
  background: var(--pi-fill);
  border: 1px solid var(--pi-edge);
  border-radius: 9px;
  cursor: pointer;
}
.pi-ed-command-menu__option--active,
.pi-ed-command-menu__option:hover {
  color: var(--pi-accent);
  background: var(--pi-fill-2);
  border-color: var(--pi-accent);
}
.pi-ed-command-menu__name {
  font-family: var(--pi-head);
  font-weight: 700;
  font-size: .82rem;
}
.pi-ed-command-menu__detail {
  font-size: .72rem;
  line-height: 1.35;
  color: var(--pi-ink-2);
}
.pi-ed-command-menu__option--active .pi-ed-command-menu__detail,
.pi-ed-command-menu__option:hover .pi-ed-command-menu__detail {
  color: var(--pi-ink);
}

/* ── "Start from a template" modal (Library tab) ─────────────────────────── */
.pi-ed-tpl-modal {
  position: absolute;
  inset: 0;
  z-index: 1340;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--pi-scrim);
}
.pi-ed-tpl-modal.show { display: flex; }
.pi-ed-tpl-panel {
  width: 620px;
  max-width: 100%;
  max-height: 84vh;
  overflow: auto;
  background: var(--pi-chrome);
  border: 1px solid var(--pi-edge);
  border-top: 3px solid var(--or);
  border-radius: 14px;
  box-shadow: var(--pi-shadow);
  padding: 18px 20px 20px;
}
.pi-ed-tpl-head { display: flex; align-items: center; justify-content: space-between; }
.pi-ed-tpl-head h2 { margin: 0; font-family: var(--pi-head); font-size: 1.1rem; color: var(--pi-ink); }
.pi-ed-tpl-close {
  font-size: 1rem;
  line-height: 1;
  color: var(--pi-ink-2);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
.pi-ed-tpl-close:hover { color: var(--pi-accent); background: var(--pi-fill); }
.pi-ed-tpl-sub { margin: 4px 0 14px; font-size: .82rem; color: var(--pi-ink-2); }
.pi-ed-tpl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.pi-ed-tpl-card {
  text-align: left;
  background: var(--pi-fill);
  border: 1px solid var(--pi-edge);
  border-radius: 11px;
  padding: 14px;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.pi-ed-tpl-card:hover { border-color: var(--or); background: var(--pi-fill-2); }
.pi-ed-tpl-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pi-ed-tpl-card__name { font-family: var(--pi-head); font-weight: 600; font-size: .92rem; color: var(--pi-ink); }
.pi-ed-tpl-card__tag {
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--pi-ink-3);
  background: var(--pi-fill-2);
  border: 1px solid var(--pi-edge);
  border-radius: 999px;
  padding: 1px 7px;
}
.pi-ed-tpl-card__desc { font-size: .78rem; line-height: 1.45; color: var(--pi-ink-2); }
@media (max-width: 640px) { .pi-ed-tpl-grid { grid-template-columns: 1fr; } }

/* Template preview — shown after a card is picked; "Add to chat" then stages it. */
.pi-ed-tpl-preview-frame {
  width: 100%;
  height: 340px;
  border: 1px solid var(--pi-edge);
  border-radius: 10px;
  background: var(--pi-fill);
}
.pi-ed-tpl-preview-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

/* ── Council pane (AI assistant — SIMULATED) ─────────────────────────────────
   The Council chat is the default pane of the left rail (see .pi-ed-rail). Its
   thread scrolls; chips + composer stay pinned. Tokens only — the black/white
   rgba shadow on the "+" menu mirrors the float bar's constant elevation. */
.pi-ed-council__glyph {
  flex: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--or);
  color: var(--on-or);
  font-family: var(--pi-head);
  font-weight: 700;
  font-size: .88rem;
}
.pi-ed-council__id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pi-ed-council__id strong { font-family: var(--pi-head); font-weight: 600; font-size: .9rem; color: var(--pi-ink); }
/* Model routing shown as a plain subtitle (matches the prototype); the actual
   selector lives in the "+" (AI Models) menu, so this line is a click target. */
.pi-ed-council__sub {
  display: block;
  font-size: .62rem;
  color: var(--pi-ink-3);
  cursor: pointer;
}
.pi-ed-council__sub:hover { color: var(--pi-accent); }

.pi-ed-council__thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 13px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pi-ed-msg { max-width: 90%; }
.pi-ed-msg--council { align-self: flex-start; }
.pi-ed-msg--you { align-self: flex-end; }
.pi-ed-msg__who {
  font-family: var(--pi-head);
  font-size: .56rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--or);
  margin: 0 0 3px 4px;
}
.pi-ed-msg__body {
  border-radius: 12px;
  padding: 8px 12px;
  font-size: .8rem;
  line-height: 1.5;
  word-break: break-word;
}
.pi-ed-msg--council .pi-ed-msg__body {
  color: var(--pi-ink);
  background: var(--pi-fill);
  border: 1px solid var(--pi-edge);
}
.pi-ed-msg--you .pi-ed-msg__body {
  color: var(--on-brand);
  background: var(--vb);
}
/* PI-30 — a streaming Council reply: preserve the model's line breaks as tokens
   arrive (rendered via textContent, so this is the only whitespace control). */
.pi-ed-msg__body--stream { white-space: pre-wrap; }
/* PI-30 — a Council error line (config / upstream / stream failure). */
.pi-ed-msg--error .pi-ed-msg__body {
  color: var(--danger);
  background: var(--danger-tint);
  border-color: var(--danger-border);
}
/* PI-89 (AI-10) — citation footer under a finished Council reply: a "Source:"
   chip per cited Artifact (title · version · as-of date) and a speculation
   notice when the model disclosed an ungrounded claim. white-space resets to
   normal because the parent stream bubble is pre-wrap. */
.pi-ed-msg__citefoot {
  white-space: normal;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.pi-ed-msg__cite,
.pi-ed-msg__speculation {
  font-size: .7rem;
  line-height: 1.4;
  border-radius: 6px;
  padding: 3px 8px;
  width: fit-content;
}
.pi-ed-msg__cite {
  color: var(--info);
  background: var(--info-tint);
  border: 1px solid var(--info-border);
}
.pi-ed-msg__speculation {
  color: var(--warning);
  background: var(--warning-tint);
  border: 1px solid var(--warning-border);
}

/* PI-30 — a proposed-edit review card. The Council PROPOSES; the owner clicks
   Apply to write the change into the document. Accent (Oravive) rail marks it as
   an actionable card, distinct from a plain reply. */
.pi-ed-msg--edit .pi-ed-msg__body {
  border-left: 3px solid var(--or);
}
.pi-ed-edit { display: flex; flex-direction: column; gap: 8px; }
.pi-ed-edit__summary { font-size: .8rem; line-height: 1.5; }
.pi-ed-edit__ops { display: flex; flex-direction: column; gap: 4px; }
.pi-ed-edit__op {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  font-size: .74rem;
  line-height: 1.4;
}
.pi-ed-edit__from {
  text-decoration: line-through;
  color: var(--pi-ink-3);
  background: var(--pi-fill-2);
  padding: 0 4px;
  border-radius: 4px;
  word-break: break-word;
}
.pi-ed-edit__arrow { color: var(--pi-ink-3); flex: none; }
.pi-ed-edit__to {
  color: var(--pi-ink);
  background: var(--pi-fill-2);
  padding: 0 4px;
  border-radius: 4px;
  font-weight: 600;
  word-break: break-word;
}
.pi-ed-edit__more { font-size: .7rem; color: var(--pi-ink-3); }
/* PI-81 — AI diff review: word-level diff + per-change Accept / Reject.
   Status colors use the Layer-3 text/tint token pairs (brand standard §1), so
   the card re-themes light ↔ dark with no raw hex. */
.pi-ed-edit__ops { max-height: 260px; overflow-y: auto; }
.pi-ed-edit__op--diff { flex-direction: column; align-items: stretch; gap: 4px; }
.pi-ed-edit__diff { line-height: 1.5; word-break: break-word; }
.pi-ed-edit__same { color: var(--pi-ink-2); }
.pi-ed-edit__del {
  text-decoration: line-through;
  color: var(--danger);
  background: var(--danger-tint);
  border-radius: 3px;
  padding: 0 2px;
}
.pi-ed-edit__ins {
  text-decoration: none;
  color: var(--success);
  background: var(--success-tint);
  border-radius: 3px;
  padding: 0 2px;
  font-weight: 600;
}
.pi-ed-edit__op--rejected .pi-ed-edit__diff { opacity: .45; }
.pi-ed-edit__opfoot { display: flex; align-items: center; gap: 8px; }
.pi-ed-edit__badge { font-size: .68rem; color: var(--pi-ink-3); }
.pi-ed-edit__badge--warn { color: var(--warning); }
.pi-ed-edit__choice { display: inline-flex; gap: 4px; margin-left: auto; }
.pi-ed-edit__choicebtn {
  font-family: inherit;
  font-size: .68rem;
  font-weight: 600;
  color: var(--pi-ink-2);
  background: var(--pi-fill);
  border: 1px solid var(--pi-edge);
  border-radius: 6px;
  padding: 1px 8px;
  cursor: pointer;
}
.pi-ed-edit__choicebtn--accept {
  color: var(--success);
  background: var(--success-tint);
  border-color: var(--success-border);
}
.pi-ed-edit__choicebtn--reject {
  color: var(--danger);
  background: var(--danger-tint);
  border-color: var(--danger-border);
}
.pi-ed-edit__choicebtn:disabled { opacity: .5; cursor: default; }
.pi-ed-edit__bulk { display: flex; gap: 8px; }
.pi-ed-edit__bulkbtn {
  font-family: inherit;
  font-size: .7rem;
  font-weight: 600;
  color: var(--pi-accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}
.pi-ed-edit__bulkbtn:disabled { opacity: .5; cursor: default; text-decoration: none; }
.pi-ed-edit__actions { display: flex; gap: 8px; margin-top: 2px; }
.pi-ed-edit__apply {
  font-family: inherit;
  font-size: .74rem;
  font-weight: 600;
  color: var(--on-or);
  background: var(--or);
  border: 1px solid var(--or);
  border-radius: 7px;
  padding: 5px 12px;
  cursor: pointer;
}
.pi-ed-edit__apply:hover:not(:disabled) { filter: brightness(1.05); }
.pi-ed-edit__dismiss {
  font-family: inherit;
  font-size: .74rem;
  color: var(--pi-ink-2);
  background: var(--pi-fill);
  border: 1px solid var(--pi-edge);
  border-radius: 7px;
  padding: 5px 12px;
  cursor: pointer;
}
.pi-ed-edit__dismiss:hover:not(:disabled) { border-color: var(--pi-accent); color: var(--pi-accent); }
.pi-ed-edit__apply:disabled,
.pi-ed-edit__dismiss:disabled { opacity: .5; cursor: default; }
.pi-ed-edit__status { font-size: .72rem; line-height: 1.4; color: var(--pi-ink-2); }
.pi-ed-edit__status--ok { color: var(--success); }
.pi-ed-edit__status--warn { color: var(--warning); }
/* Attachment chip shown in a "you" bubble (Upload / Clone / Template). */
.pi-ed-attach { display: flex; align-items: center; gap: 8px; }
.pi-ed-attach__ico { font-size: 1rem; line-height: 1; }
.pi-ed-attach__meta { min-width: 0; }
.pi-ed-attach__name { font-size: .8rem; font-weight: 600; word-break: break-word; }
.pi-ed-attach__kind {
  font-size: .64rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .85;
  margin-top: 2px;
  word-break: break-word;
}
.pi-ed-attach__remove {
  flex: none;
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: .72rem;
  line-height: 1;
  color: inherit;
  background: transparent;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  opacity: .75;
}
.pi-ed-attach__remove:hover { opacity: 1; }

/* Staged attachments waiting beside the composer (before Send). */
.pi-ed-council__pending {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 7px;
}
.pi-ed-council__pending .pi-ed-attach {
  color: var(--pi-ink);
  background: var(--pi-fill);
  border: 1px solid var(--pi-edge);
  border-left: 3px solid var(--or);
  border-radius: 8px;
  padding: 6px 9px;
}
.pi-ed-msg__body code {
  font-family: Consolas, "SFMono-Regular", monospace;
  font-size: .74rem;
  background: var(--pi-fill-2);
  padding: 0 4px;
  border-radius: 4px;
}
.pi-ed-msg--typing .pi-ed-msg__body { display: flex; gap: 4px; }
.pi-ed-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pi-ink-3);
  display: inline-block;
  animation: pi-ed-blink 1s infinite;
}
.pi-ed-dot:nth-child(2) { animation-delay: .2s; }
.pi-ed-dot:nth-child(3) { animation-delay: .4s; }
@keyframes pi-ed-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

.pi-ed-council__chips {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 13px 9px;
}
.pi-ed-council__chip {
  font-family: inherit;
  font-size: .68rem;
  color: var(--pi-ink-2);
  background: var(--pi-fill);
  border: 1px solid var(--pi-edge);
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
}
.pi-ed-council__chip:hover { border-color: var(--pi-accent); color: var(--pi-accent); }

.pi-ed-council__compose {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 11px 13px;
  border-top: 1px solid var(--pi-edge);
}
#pi-ed-council-input {
  font-family: inherit;
  font-size: .8rem;
  color: var(--pi-ink);
  background: var(--pi-fill);
  border: 1px solid var(--pi-edge);
  border-radius: 11px;
  padding: 9px 46px 9px 46px; /* side pads clear the in-field "+" and send arrow */
  resize: none;
  min-height: 52px;
  width: 100%;
}
#pi-ed-council-input::placeholder { color: var(--pi-ink-3); }
#pi-ed-council-input:focus {
  outline: 2px solid var(--pi-accent);
  outline-offset: 2px;
  border-color: var(--pi-accent);
}
/* Field wraps the textarea + the in-field send arrow. */
.pi-ed-council__field { position: relative; display: flex; }
.pi-ed-council__row { display: flex; align-items: center; gap: 9px; }
.pi-ed-council__note { font-size: .64rem; color: var(--pi-ink-3); margin-right: auto; }

/* Claude-style "+" button (in-field, bottom-left) + its pop-up (AI Models routing). */
.pi-ed-council__plus {
  position: absolute;
  left: 8px;
  bottom: 8px;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--pi-edge);
  background: var(--pi-fill);
  color: var(--pi-ink);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pi-ed-council__plus:hover,
.pi-ed-council__plus--open { border-color: var(--pi-accent); color: var(--pi-accent); }
/* Round send button (↑) inside the field, bottom-right, ChatGPT-style. */
.pi-ed-council__send {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--or);
  color: var(--on-or);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s ease;
}
.pi-ed-council__send:hover { background: var(--su); }
.pi-ed-council__send:disabled { opacity: .5; cursor: default; }
.pi-ed-council__plus-menu {
  position: absolute;
  left: 13px;
  bottom: calc(100% - 6px);
  z-index: 5;
  display: none;
  flex-direction: column;
  gap: 6px;
  min-width: 224px;
  padding: 10px;
  background: var(--pi-chrome);
  border: 1px solid var(--pi-edge);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
}
.pi-ed-council__plus-menu.show { display: flex; }
.pi-ed-council__plus-head {
  font-family: var(--pi-head);
  font-size: .58rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pi-ink-3);
}
.pi-ed-council__plus-note { font-size: .6rem; color: var(--pi-ink-3); }
/* Attach actions inside the "+" menu (Upload / Clone / Templates). */
.pi-ed-council__plus-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: .78rem;
  color: var(--pi-ink);
  background: var(--pi-fill);
  border: 1px solid var(--pi-edge);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.pi-ed-council__plus-item:hover { border-color: var(--pi-accent); color: var(--pi-accent); background: var(--pi-fill-2); }
.pi-ed-council__plus-ico { font-size: 1rem; line-height: 1; width: 16px; text-align: center; }
.pi-ed-council__plus-sep { height: 1px; background: var(--pi-edge); margin: 3px 0; }
.pi-ed-council__model {
  font-family: inherit;
  font-size: .74rem;
  color: var(--pi-ink);
  background: var(--pi-fill);
  border: 1px solid var(--pi-edge);
  border-radius: 8px;
  padding: 5px 8px;
  cursor: pointer;
  width: 100%;
}
.pi-ed-council__model:focus {
  outline: 2px solid var(--pi-accent);
  outline-offset: 2px;
  border-color: var(--pi-accent);
}
/* PI-35 — per-job routing rows (Chat / Summarize / Generate). */
.pi-ed-council__route {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pi-ed-council__route-lbl {
  flex: none;
  width: 72px;
  font-size: .68rem;
  color: var(--pi-ink-2);
}
.pi-ed-council__route .pi-ed-council__model { flex: 1 1 auto; }

/* ── Footer strip ────────────────────────────────────────────────────────── */
.pi-ed-footer {
  flex: none;
  padding: 6px;
  text-align: center;
  font-size: .66rem;
  color: var(--pi-ink-2);
  background: var(--pi-chrome);
  border-top: 1px solid var(--pi-edge);
}

/* ── Focus ring ──────────────────────────────────────────────────────────── */
#pi-editor-overlay :focus-visible { outline: 2px solid var(--pi-accent); outline-offset: 2px; }

/* ── Responsive: stack the rail above the stage on narrow viewports ──────── */
@media (max-width: 900px) {
  .pi-ed-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .pi-ed-rail { border-right: none; border-bottom: 1px solid var(--pi-edge); max-height: 45vh; }
}

@media (max-width: 390px) {
  .pi-ed-phonegate { display: flex; }
  .pi-ed-topbar,
  .pi-ed-sharebanner,
  .pi-ed-metastrip,
  .pi-ed-scriptnote,
  .pi-ed-conflict,
  .pi-ed-body,
  .pi-ed-footer,
  .pi-ed-floatbar,
  .pi-ed-pop,
  .pi-ed-tpl-modal {
    display: none !important;
  }
}

/* ── PI-114 (AC-6) — visually-hidden live region ─────────────────────────────
   Screen-reader-only: present in the accessibility tree (so aria-live fires)
   but invisible and out of the layout. Standard clip-pattern — NOT display:none
   or visibility:hidden, which would silence the announcements. */
.pi-ed-srlive {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── PI-114 (AC-4) — minimum interactive target size ─────────────────────────
   WCAG 2.5.8: every interactive control gets a ≥24×24 CSS-pixel floor (audit
   measured chrome controls at 48×20 and 22×27). Floors only — each control's
   own padding/typography still sets its natural (usually larger) size, so
   nothing is visually redesigned; short/narrow controls grow to the floor.
   inline-flex centering keeps the label centered when a floor kicks in. */
.pi-ed-btn,
.pi-ed-scriptnote__btn,
.pi-ed-conflict__btn,
.pi-ed-fmt,
.pi-ed-sel,
.pi-ed-rail__tab,
.pi-ed-fb,
.pi-ed-note__del,
.pi-ed-toc-item,
.pi-ed-tpl-close,
.pi-ed-council__chip,
.pi-ed-council__sub,
.pi-ed-council__model,
.pi-ed-council__plus-item,
.pi-ed-edit__choicebtn,
.pi-ed-edit__bulkbtn,
.pi-ed-edit__apply,
.pi-ed-edit__dismiss {
  min-height: 24px;
  min-width: 24px;
  box-sizing: border-box;
}
/* button.pi-ed-btn (not bare .pi-ed-btn): the class is shared by the version
   <select>, whose UA-internal layout must not be switched to flex. */
button.pi-ed-btn,
.pi-ed-scriptnote__btn,
.pi-ed-conflict__btn,
.pi-ed-fmt,
.pi-ed-rail__tab,
.pi-ed-fb,
.pi-ed-note__del,
.pi-ed-toc-item,
.pi-ed-tpl-close,
.pi-ed-council__chip,
.pi-ed-council__sub,
.pi-ed-edit__choicebtn,
.pi-ed-edit__bulkbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Library actions are full-width, left-aligned pills — keep their alignment. */
.pi-ed-lib-act { justify-content: flex-start; }
/* PI-114: the Council "powered by <model>" subtitle stretches to the column
   width, so the group's justify-content: center pushed it off-axis from the
   "Council" title above it — keep it left-aligned under the title. */
.pi-ed-council__sub { justify-content: flex-start; }