@layer surfaces {

/* ============================================================================
   Project binder (ADR 0005 Phase B) — the left-rail list of a project's documents,
   above the outline. Plus type-aware lenses: non-manuscript docs hide the board /
   scene inspector (manuscript-only lenses).
   ========================================================================= */

/* Binder content (lists, items, add buttons) now lives inside the project drawer
   (.editor-drawer, editor-v3 workspace shell) — the class names survive because they
   name the content, not the container. */
.document-binder-list {
  display: grid;
  gap: 0.125rem;
  margin-bottom: 0.75rem;
}

/* Type-derived collection headers (core/binder_collections): group name + count. */
.document-binder-group {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3rem 0.45rem 0.15rem;
  margin-top: 0.625rem;
}

.document-binder-group:first-child {
  margin-top: 0;
}

.document-binder-group-name {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--c-gray-500);
}

.document-binder-group-count {
  font-size: 0.6875rem;
  color: var(--c-gray-400);
  font-variant-numeric: tabular-nums;
}

.document-binder-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3rem 0.45rem;
  border-radius: 6px;
  color: var(--c-gray-700);
  font-size: 0.875rem;
}

.document-binder-item:hover,
.document-binder-item:focus-visible {
  background: var(--c-gray-100);
  outline: none;
}

.document-binder-item[data-current="true"] {
  background: var(--c-gray-200);
  color: var(--c-gray-900);
  font-weight: 500;
}

.document-binder-item-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The Characters lens rows (core/topic_lenses): same item chrome whether the row is the
   editor's button (select + reveal the entity panel) or the dashboard's link (?topic=
   deep link). The dot is a fact — the entity has a sheet — never a meter. */
button.document-binder-topic {
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.document-binder-item-sheet {
  flex: none;
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background: var(--c-gray-400);
  align-self: center;
}

.document-binder-add {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.document-binder-assets {
  display: grid;
  gap: 0.375rem;
  margin-top: 0.75rem;
}

.document-binder-asset-version-badge {
  font-size: 0.6875rem;
  color: var(--c-gray-600);
  border: 1px solid var(--c-gray-300);
  border-radius: 999px;
  padding: 0 0.375rem;
  flex: 0 0 auto;
}

.document-binder-asset-versions {
  display: grid;
  gap: 0.25rem;
  margin: 0.25rem 0 0 0.5rem;
  padding-left: 0.5rem;
  border-left: 2px solid var(--c-gray-200);
}

.document-binder-asset-version {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.document-binder-asset-version[data-starred="true"] .document-binder-asset-version-name {
  font-weight: 600;
  color: var(--c-gray-900);
}

.document-binder-asset-version-play,
.document-binder-asset-version-star {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--c-gray-600);
  flex: 0 0 auto;
}

.document-binder-asset-version-play:hover,
.document-binder-asset-version-star:hover {
  color: var(--c-gray-900);
}

.document-binder-asset-version-name {
  font-size: 0.75rem;
  color: var(--c-gray-600);
  flex: 0 0 auto;
}

.document-binder-asset-version-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.6875rem;
  color: var(--c-gray-700);
  background: none;
  border: none;
  border-bottom: 1px dashed transparent;
  padding: 0.125rem 0;
}

.document-binder-asset-version-label:hover,
.document-binder-asset-version-label:focus {
  border-bottom-color: var(--c-gray-300);
  outline: none;
}

.document-binder-asset-notes {
  display: grid;
  gap: 0.25rem;
  margin: 0.25rem 0 0 0.5rem;
  padding-left: 0.5rem;
  border-left: 2px solid var(--c-accent-100);
}

.document-binder-asset-note-add {
  display: flex;
  gap: 0.375rem;
}

.document-binder-asset-note-input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.75rem;
  padding: 0.25rem 0.375rem;
  border: 1px solid var(--c-gray-300);
  border-radius: 6px;
  background: var(--c-gray-50);
  color: var(--c-gray-900);
}

.document-binder-asset-note {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
}

.document-binder-asset-note[data-open="false"] {
  opacity: 0.55;
}

.document-binder-asset-note[data-stale-open="true"] .document-binder-asset-note-origin {
  color: var(--c-warning-400);
  border-color: currentColor;
  font-weight: 600;
}

.document-binder-asset-note-time {
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  color: var(--c-accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex: 0 0 auto;
}

.document-binder-asset-note-origin {
  font-size: 0.625rem;
  color: var(--c-gray-500);
  border: 1px solid var(--c-gray-300);
  border-radius: 999px;
  padding: 0 0.3rem;
  flex: 0 0 auto;
}

.document-binder-asset-note-body {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.75rem;
  color: var(--c-gray-800);
  overflow-wrap: break-word;
}

.document-binder-asset-note-state,
.document-binder-asset-note-discuss,
.document-binder-asset-note-open {
  font-size: 0.625rem;
  color: var(--c-gray-500);
  background: none;
  border: 1px solid var(--c-gray-300);
  border-radius: 6px;
  padding: 0.0625rem 0.375rem;
  cursor: pointer;
  flex: 0 0 auto;
}

.document-binder-asset-note-state:hover,
.document-binder-asset-note-discuss:hover {
  color: var(--c-gray-900);
}

.document-binder-asset-note-open {
  color: var(--c-accent);
  border-color: currentColor;
}

.document-binder-asset-player {
  width: 100%;
  height: 2rem;
}

/* ---- The track hero: audio as the working surface ---- */

.editor-track-hero {
  position: absolute;
  inset: 0;
  z-index: 30;
  overflow-y: auto;
  background: var(--c-white);
  padding: 1.5rem clamp(1rem, 6vw, 4rem) 3rem;
  display: grid;
  gap: 1.25rem;
  align-content: start;
}

.editor-track-hero-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.editor-track-hero-back {
  font-size: 0.8125rem;
  color: var(--c-gray-600);
  background: none;
  border: 1px solid var(--c-gray-300);
  border-radius: 6px;
  padding: 0.25rem 0.625rem;
  cursor: pointer;
}

.editor-track-hero-back:hover {
  color: var(--c-gray-900);
  border-color: var(--c-gray-600);
}

.editor-track-hero-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 650;
  color: var(--c-gray-900);
}

.editor-track-hero-stage {
  display: grid;
  gap: 0.5rem;
}

.editor-track-hero-stage .document-binder-asset-player {
  width: 100%;
}

.editor-track-hero-wave {
  display: block;
  width: 100%;
  height: 8.5rem;
  cursor: pointer;
  border-radius: 8px;
  background: var(--c-gray-50);
  border: 1px solid var(--c-gray-200);
}

.editor-track-hero-markers {
  position: relative;
  height: 1.5rem;
  margin-top: -0.25rem;
}

.editor-track-hero-marker {
  position: absolute;
  transform: translateX(-50%);
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 999px;
  border: 2px solid var(--c-white);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.editor-track-hero-marker[data-stale-open="true"] {
  opacity: 0.75;
  border-style: dashed;
}

.editor-track-hero-subtitle {
  margin: 0 0 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-gray-600);
}

.editor-track-hero-notes {
  max-width: 46rem;
}

/* ---- The docked strip: the track pinned over the lyric sheet ---- */

.editor-track-dock {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.375rem 0.625rem;
  margin-bottom: 0.75rem;
  background: var(--c-white);
  border: 1px solid var(--c-gray-200);
  border-radius: 8px;
  box-shadow: 0 2px 8px var(--c-shadow);
}

/* Transport armed: focus anywhere inside the dock means space toggles play/pause. The
   quiet accent border is that state made visible; the strip's own programmatic focus
   (clicks arm it) needs no ring of its own — inner buttons keep their focus styles. */
.editor-track-dock:focus {
  outline: none;
}

.editor-track-dock:focus-within {
  border-color: color-mix(in srgb, var(--c-accent) 45%, var(--c-gray-200));
}

.editor-track-dock-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 12rem;
}

.editor-track-dock-wave {
  display: block;
  flex: 1 1 auto;
  min-width: 4rem;
  height: 2rem;
  cursor: pointer;
  border-radius: 4px;
  background: var(--c-gray-50);
}

.editor-track-dock .document-binder-asset-player {
  width: 15rem;
  flex: 0 0 auto;
  height: 2rem;
}

.editor-track-dock-unpin {
  font-size: 1rem;
  line-height: 1;
  color: var(--c-gray-600);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
}

.editor-track-dock-unpin:hover {
  color: var(--c-gray-900);
}

.editor-track-hero-wave[data-skipped="true"],
.editor-track-dock-wave[data-skipped="true"] {
  display: none;
}

.document-binder-asset-cue,
.document-binder-asset-follow {
  font-size: 0.6875rem;
  color: var(--c-gray-500);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.document-binder-asset-cue:hover,
.document-binder-asset-follow:hover {
  color: var(--c-gray-900);
}

.document-binder-asset-follow[data-following="true"] {
  color: var(--c-accent);
  font-weight: 600;
}

/* The follow lens's highlight: the lyric line under the playhead. */
.editor-block[data-audio-cue-active="true"] {
  background: var(--c-accent-100);
  border-radius: 4px;
  transition: background 0.3s ease;
}

.document-binder-add-button {
  border: 1px solid var(--c-gray-300);
  border-radius: 6px;
  background: var(--c-white);
  color: var(--c-gray-600);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
}

.document-binder-add-button:hover,
.document-binder-add-button:focus-visible {
  border-color: var(--c-gray-900);
  color: var(--c-gray-900);
  outline: none;
}

/* Type-aware lenses (ADR 0005): each lens is gated on the active document type's lens set,
   written to data-lenses from the declarative map in services/document_types. A lens hides
   for exactly the types whose list omits it. Adding a type is config-only; adding a lens is
   one gate here — never a per-type conditional. Today only board + scene are type-specific. */
.editor-surface:not([data-lenses~="board"]) .document-view-button.is-board,
.editor-surface:not([data-lenses~="scene"]) .document-scene,
.editor-surface:not([data-lenses~="scene"]) .document-panel-tab[data-document-panel-param="scene"],
.editor-surface:not([data-lenses~="cues"]) .document-cues,
.editor-surface:not([data-lenses~="cues"]) .document-panel-tab[data-document-panel-param="cues"] {
  display: none;
}

/* Share-links dialog — owner-facing project sharing (mint / copy / revoke). */
.share-dialog {
  border: 1px solid var(--c-gray-300);
  border-radius: 8px;
  padding: 1.25rem;
  max-width: 34rem;
  width: calc(100vw - 2rem);
  color: var(--c-gray-800);
  background: var(--c-white);
}

.share-dialog::backdrop {
  background: var(--backdrop);
}

.share-dialog-title {
  margin: 0 0 0.25rem;
  font-size: 1.125rem;
}

.share-dialog-blurb {
  margin: 0 0 1rem;
  color: var(--c-gray-500);
  font-size: 0.875rem;
}

/* Manuscript export dialog — reuses the share dialog's shell; only the form is new. */
.manuscript-export-form {
  display: flex;
  flex-direction: column;
}

.manuscript-export-label {
  margin-bottom: 0.25rem;
  color: var(--c-gray-600);
  font-size: 0.8125rem;
}

.manuscript-export-input,
.manuscript-export-textarea {
  margin-bottom: 1rem;
  padding: 0.5rem;
  border: 1px solid var(--c-gray-300);
  border-radius: 6px;
  font: inherit;
  color: inherit;
  background: var(--c-white);
}

.manuscript-export-textarea {
  resize: vertical;
}

.manuscript-export-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* "Recover text from the record" — the share dialog's shell again, wider, because what it
   holds is prose the writer has to be able to read before deciding anything. The figures
   and the receipts divider deliberately match the making-of panel's: both read the same
   record back to the writer, and two vocabularies for that would be one too many. */
/* A column with one scrolling child, because the thing in the middle is a manuscript: at
   rows=14 the dialog outgrew a laptop viewport and pushed its own buttons off the bottom of
   the screen — the writer could read the recovered text and not reach "Copy". */
.recovery-dialog {
  display: flex;
  flex-direction: column;
  max-width: 44rem;
  max-height: min(85vh, 44rem);
}

.recovery-dialog-body {
  min-height: 0;
  overflow-y: auto;
}

.recovery-dialog-blurb,
.recovery-dialog-note {
  margin: 0 0 0.75rem;
  color: var(--c-gray-600);
  font-size: 0.875rem;
  line-height: 1.5;
}

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

.recovery-dialog-figures dt {
  color: var(--c-gray-600);
}

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

.recovery-dialog-compare {
  margin: 0 0 0.75rem;
  font-family: var(--font-serif, Georgia, serif);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--c-gray-800);
}

/* Read-only, but a real textarea: select-all, scroll and keyboard copy all come free, and
   the writer can see it is text rather than a picture of text. */
.recovery-dialog-text {
  width: 100%;
  margin: 0 0 0.75rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--c-gray-300);
  border-radius: 6px;
  font-family: var(--font-serif, Georgia, serif);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--c-gray-900);
  background: var(--c-gray-50);
  resize: vertical;
}

.recovery-dialog-receipts {
  margin: 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--c-gray-200);
  font-size: 0.75rem;
  color: var(--c-gray-600);
}

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

.recovery-dialog-receipts p {
  margin: 0.5rem 0 0;
  line-height: 1.5;
}

/* Empty until something is said, so the actions never shift down on first render. */
.recovery-dialog-status:empty {
  display: none;
}

.recovery-dialog-status {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  color: var(--c-gray-700);
}

/* Outside the scrolling body, so the actions are always on screen no matter how long the
   recovered text is. */
.recovery-dialog-actions {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}

.share-link-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.share-dialog-subtitle {
  margin: 1rem 0 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-gray-600);
}

.share-member-list {
  display: grid;
  gap: 0.375rem;
}

.share-member-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.share-member-label {
  flex: 1 1 auto;
  font-size: 0.875rem;
  color: var(--c-gray-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-member-owner {
  font-size: 0.75rem;
  color: var(--c-gray-600);
  border: 1px solid var(--c-gray-300);
  border-radius: 999px;
  padding: 0.125rem 0.5rem;
}

.share-member-role {
  font-size: 0.8125rem;
  padding: 0.25rem 0.375rem;
  border: 1px solid var(--c-gray-300);
  border-radius: 6px;
  background: var(--c-gray-50);
  color: var(--c-gray-900);
}

.share-member-remove {
  font-size: 0.75rem;
  color: var(--c-gray-600);
  background: none;
  border: 1px solid var(--c-gray-300);
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}

.share-member-remove:hover {
  color: var(--c-danger);
  border-color: currentColor;
}

.share-link-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.share-link-role {
  text-transform: capitalize;
  font-size: 0.75rem;
  color: var(--c-gray-600);
  border: 1px solid var(--c-gray-300);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  white-space: nowrap;
}

.share-link-url {
  flex: 1;
  min-width: 0;
  font-size: 0.8rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--c-gray-300);
  border-radius: 4px;
  background: var(--c-gray-50);
  color: var(--c-gray-700);
}

.share-link-copy,
.share-link-revoke {
  border: 1px solid var(--c-gray-300);
  border-radius: 4px;
  background: var(--c-white);
  color: var(--c-gray-700);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0.3rem 0.5rem;
  white-space: nowrap;
}

.share-link-revoke:hover {
  border-color: var(--c-danger-200);
  color: var(--c-danger-800);
}

.share-dialog-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.share-dialog-create {
  font-size: 0.85rem;
  padding: 0.4rem 0.75rem;
}

.share-dialog-close {
  border: 1px solid var(--c-gray-300);
  border-radius: 4px;
  background: var(--c-white);
  color: var(--c-gray-700);
  cursor: pointer;
  padding: 0.4rem 0.9rem;
  font-size: 0.875rem;
}

/* Live-collaboration status in the editor statusbar: is realtime attached, and who's here.
   Distinct from the sync status (durability) — "Synced" can be true while the wire is down. */
.editor-statusbar-live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--c-gray-600);
  white-space: nowrap;
}

.editor-live-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--c-gray-400);
}

.editor-statusbar-live[data-live-state="live"] .editor-live-dot {
  background: var(--c-success);
}

.editor-statusbar-live[data-live-state="connecting"] .editor-live-dot,
.editor-statusbar-live[data-live-state="reconnecting"] .editor-live-dot {
  background: var(--c-warning);
  animation: sync-dot-pulse 1.8s ease-in-out infinite;
}

.editor-statusbar-live[data-live-state="unavailable"] .editor-live-dot {
  background: var(--c-gray-400);
}

}