@layer surfaces {

/* ============================================================================
   Lens rail + lens drawer (editor-v3): the annotation gutter's controls on a fixed
   52px rail mirroring the nav rail, and the panels-about-this-doc drawer that opens
   beside it (data-side-panel: "margin" closed, "scene"/"versions" open).
   ========================================================================= */
.editor-lens-rail {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 3.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.8125rem 0;
  background: var(--c-gray-25);
  border-left: 1px solid var(--c-gray-200);
  z-index: 40;
}

.editor-lens-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--c-gray-400);
  cursor: pointer;
}

.editor-lens-button:hover {
  color: var(--c-gray-700);
  background: var(--c-gray-100);
}

/* Toggles carry their annotation hue while on; off fades them out. */
.editor-lens-toggle[data-lens-toggle="notes"][aria-pressed="true"] { color: var(--c-ann-note); }
.editor-lens-toggle[data-lens-toggle="people"][aria-pressed="true"] { color: var(--c-ann-character); }
.editor-lens-toggle[data-lens-toggle="threads"][aria-pressed="true"] { color: var(--c-ann-thread); }

.editor-lens-toggle[aria-pressed="false"] {
  opacity: 0.45;
}

.editor-lens-pins-toggle[aria-pressed="true"],
.editor-lens-rail .document-panel-tab[aria-pressed="true"] {
  color: var(--c-gray-900);
  background: var(--c-gray-200);
}

.editor-lens-badge {
  position: absolute;
  top: -0.125rem;
  right: -0.125rem;
  min-width: 0.875rem;
  height: 0.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.2rem;
  border-radius: 999px;
  background: var(--c-gray-500);
  color: var(--c-white);
  font-size: 0.5625rem;
  font-weight: 700;
  line-height: 1;
}

.editor-lens-toggle[data-lens-toggle="notes"] .editor-lens-badge { background: var(--c-ann-note); }
.editor-lens-toggle[data-lens-toggle="people"] .editor-lens-badge { background: var(--c-ann-character); }
.editor-lens-toggle[data-lens-toggle="threads"] .editor-lens-badge { background: var(--c-ann-thread); }

.editor-lens-divider {
  width: 1.5rem;
  height: 1px;
  background: var(--c-gray-200);
  margin: 0.25rem 0;
  flex: none;
}

.editor-lens-spacer {
  flex: 1;
}

/* A workspace grid column while open (see .editor-workspace), never a fixed overlay:
   fixed placement assumes the top bar sits at the viewport top, and any banner above the
   frame breaks that and starts a z-order fight over clicks (caught by the drawer e2e
   pair). Sticky within its column like the old margin panels. */
.editor-lens-drawer {
  display: none;
  position: sticky;
  top: calc(var(--topbar-h, 3.25rem) + 1rem);
  max-height: calc(100vh - var(--topbar-h, 3.25rem) - 2rem);
  min-width: 0;
  /* Top padding reserves the close button's row — it must never float over the panel's
     own controls (it sat exactly on the scene panel's "Show fields" summary). */
  padding: 2.25rem 0 1rem 1rem;
  overflow-y: auto;
  border-left: 1px solid var(--c-gray-200);
}

.editor-surface[data-side-panel="scene"] .editor-lens-drawer,
.editor-surface[data-side-panel="versions"] .editor-lens-drawer,
.editor-surface[data-side-panel="story"] .editor-lens-drawer,
.editor-surface[data-side-panel="cues"] .editor-lens-drawer {
  display: block;
}

/* One panel at a time inside the drawer. */
.editor-lens-drawer [data-editor-panel] {
  display: none;
}

.editor-surface[data-side-panel="scene"] [data-editor-panel="scene"],
.editor-surface[data-side-panel="versions"] [data-editor-panel="versions"],
.editor-surface[data-side-panel="story"] [data-editor-panel="story"],
.editor-surface[data-side-panel="cues"] [data-editor-panel="cues"] {
  display: block;
}

.editor-lens-drawer-close {
  position: absolute;
  top: 0.625rem;
  right: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--c-gray-400);
  cursor: pointer;
}

.editor-lens-drawer-close:hover {
  color: var(--c-gray-700);
  background: var(--c-gray-100);
}


/* ============================================================================
   The making-of panel: how this manuscript came to be (ui/editor_story.js).
   Quiet by design — this is something a writer reads between sittings, not a
   dashboard. Serif for the sentences, tabular figures for the numbers so the
   session column stays a column.
   ============================================================================ */

.document-story-headline {
  margin: 0 0 0.75rem;
  font-family: var(--font-serif, Georgia, serif);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--c-gray-900);
}

.document-story-note {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--c-gray-600);
}

.document-story-figures {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.3rem 1rem;
  margin: 0 0 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--c-gray-200);
  border-bottom: 1px solid var(--c-gray-200);
  font-size: 0.8125rem;
}

.document-story-figures dt {
  color: var(--c-gray-600);
}

.document-story-figures dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--c-gray-900);
}

.document-story-standout {
  margin: 0 0 1rem;
  font-family: var(--font-serif, Georgia, serif);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--c-gray-800);
}

.document-story-sessions {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

/* Two columns, both nowrap: the drawer is narrow, and a wrapped timestamp ("11:48" on one
   line and "PM" on the next) collided with the figure beside it. The date truncates before
   the number does, because the number is what a writer scans down the column. */
.document-story-session {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 0.6rem;
  padding: 0.3rem 0;
  font-size: 0.75rem;
  border-bottom: 1px solid var(--c-gray-100, var(--c-gray-200));
}

.document-story-session-when {
  color: var(--c-gray-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.document-story-session-change {
  font-variant-numeric: tabular-nums;
  color: var(--c-gray-900);
  white-space: nowrap;
}

/* Cutting is work too, so it is muted rather than alarmed — never danger red. */
.document-story-session-change.is-cut {
  color: var(--c-gray-500);
}

/* The duration rides the change cell as a muted suffix, and only when it is worth saying. */
.document-story-session-detail {
  color: var(--c-gray-500);
  font-variant-numeric: tabular-nums;
}

/* The divider a writer can stop at: mechanics below, story above. */
.document-story-receipts {
  margin: 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--c-gray-200);
  font-size: 0.75rem;
  color: var(--c-gray-600);
}

.document-story-receipts summary {
  cursor: pointer;
  color: var(--c-gray-500);
}

.document-story-receipts p {
  margin: 0.5rem 0 0;
  line-height: 1.5;
}

}