@layer surfaces {

/* ============================================================================
   Writing view settings — density / focus / typewriter. Normal density is the
   untouched base (no [data-density] override), so default layout is unchanged.
   ========================================================================= */

/* "View" popover (native <details>). */
/* View settings live at the nav-rail foot with the theme toggle (punch list
   2026-08-06): the trigger is a rail icon, and the panel pops up-right of the rail —
   which also retires the old panel-over-side-tabs overlap, since nothing sits left of
   the rail to cover. */
.editor-view-settings {
  position: static;
}

.editor-view-settings-trigger {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--c-gray-400);
  cursor: pointer;
}

.editor-view-settings-trigger::-webkit-details-marker { display: none; }
.editor-view-settings-trigger::marker { content: ""; }

.editor-view-settings[open] .editor-view-settings-trigger,
.editor-view-settings-trigger:hover,
.editor-view-settings-trigger:focus-visible {
  color: var(--c-gray-900);
  background: var(--c-gray-100);
  outline: none;
}

.editor-view-settings-panel {
  position: fixed;
  left: 3.6rem;
  bottom: 0.75rem;
  /* A fixed width, not a min: the two consent hints are full sentences, and with only a
     min-width the grid let them set the panel's size — 729x666px, swallowing clicks at the
     canvas centre where the writer's next click lands (measured 2026-08-07). A popover that
     eats the click after it is worse than one that is slightly cramped. */
  width: 17rem;
  max-height: min(70vh, 34rem);
  overflow-y: auto;
  z-index: 62;
  display: grid;
  gap: 0.875rem;
  padding: 0.875rem;
  background: var(--c-white);
  border: 1px solid var(--c-gray-200);
  border-radius: 8px;
  box-shadow: var(--shadow-pop);
}

.view-setting {
  display: grid;
  gap: 0.4rem;
}

.view-setting-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--c-gray-500);
}

.view-setting-segmented {
  display: inline-flex;
  border: 1px solid var(--c-gray-200);
  border-radius: 6px;
  overflow: hidden;
}

.view-setting-option {
  flex: 1;
  padding: 0.3rem 0.5rem;
  border: 0;
  border-left: 1px solid var(--c-gray-200);
  background: var(--c-white);
  color: var(--c-gray-600);
  font-size: 0.8125rem;
  cursor: pointer;
}

.view-setting-option:first-child { border-left: 0; }

.view-setting-option:hover,
.view-setting-option:focus-visible {
  background: var(--c-gray-100);
  outline: none;
}

.view-setting-option.is-active {
  background: var(--c-gray-200);
  color: var(--c-gray-900);
}

.view-setting-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--c-gray-700);
  cursor: pointer;
}

/* One-shot commands in the view-settings popover (vs the toggles above). */
.view-setting-action {
  display: block;
  width: 100%;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--c-gray-200);
  border-radius: 6px;
  background: transparent;
  font-size: 0.875rem;
  color: var(--c-gray-700);
  text-align: left;
  cursor: pointer;
}

.view-setting-action:hover,
.view-setting-action:focus-visible {
  background: var(--c-gray-100);
  outline: none;
}

/* Density — additive overrides; "normal" is the untouched base. */
.editor-surface[data-density="compact"] .editor-block {
  min-height: 2rem;
  padding: 0.4rem 0.75rem;
}
.editor-surface[data-density="compact"] .editor-blocks { gap: 0.1rem; }

.editor-surface[data-density="spacious"] .editor-block {
  min-height: 3.25rem;
  padding: 1.05rem 0.75rem;
}
.editor-surface[data-density="spacious"] .editor-blocks { gap: 0.45rem; }

/* Text size — additive overrides on the prose canvas; "normal" is the untouched base
   (080: 19px/1.72). Line-height is relative, so rhythm scales with the size. */
.editor-surface[data-text-size="small"] :is(.editor-blocks, .editor-empty-hint) {
  font-size: 1.0625rem;
}
.editor-surface[data-text-size="large"] :is(.editor-blocks, .editor-empty-hint) {
  font-size: 1.3125rem;
}

/* Line spacing, chosen by the writer (punch list 2026-08-07). "Auto" is the absence of a
   choice — it leaves the document type's own default in force (a song single-spaced, prose
   at 1.72), which is why there is no rule for it here. A chosen spacing beats the type,
   including the song rule in 080, because these selectors carry the extra attribute. */
.editor-surface[data-leading="single"] .editor-blocks {
  line-height: 1.35;
}

/* Line breaks — the gap BETWEEN lines, which is a different question from the leading above and
   now has its own control (2026-08-08 punch list). The first pass folded it into "Spacing:
   Single", so a writer who wanted their verse lines to sit together had to accept crushed
   leading inside them as well. Auto leaves the document type's own default in force. */
.editor-surface[data-line-breaks="tight"] .editor-blocks {
  gap: 0;
}
.editor-surface[data-line-breaks="tight"] .editor-blocks[data-virtualized="true"] .editor-block {
  margin-bottom: 0;
}

.editor-surface[data-line-breaks="spaced"] .editor-blocks {
  gap: 0.75rem;
}
.editor-surface[data-line-breaks="spaced"] .editor-blocks[data-virtualized="true"] .editor-block {
  margin-bottom: 0.75rem;
}

.editor-surface[data-leading="normal"] .editor-blocks {
  line-height: 1.72;
}

.editor-surface[data-leading="roomy"] .editor-blocks {
  line-height: 2.1;
}

/* Text face — curated, not a font picker (punch list, 2026-08-06): the loaded prose
   face is the default; Georgia for writers the variable face doesn't sit well with;
   the UI sans; a drafting mono. */
.editor-surface[data-text-face="georgia"] :is(.editor-blocks, .editor-empty-hint) {
  font-family: Georgia, "Times New Roman", serif;
}
.editor-surface[data-text-face="sans"] :is(.editor-blocks, .editor-empty-hint) {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.editor-surface[data-text-face="mono"] :is(.editor-blocks, .editor-empty-hint) {
  font-family: var(--font-mono);
  font-size: 1.0625rem;
}
.editor-surface[data-text-face="mono"][data-text-size="large"] :is(.editor-blocks, .editor-empty-hint) {
  font-size: 1.1875rem;
}
.editor-surface[data-text-face="mono"][data-text-size="small"] :is(.editor-blocks, .editor-empty-hint) {
  font-size: 0.9375rem;
}

/* Focus mode — hide ALL chrome (rails, top bar, side panels), center the manuscript,
   spotlight the caret line. The statusbar stays: words + sprint are the focus footer. */
.editor-surface[data-focus="true"] .document-outline,
.editor-surface[data-focus="true"] .document-notes,
.editor-surface[data-focus="true"] .editor-navrail,
.editor-surface[data-focus="true"] .editor-drawer,
.editor-surface[data-focus="true"] .editor-lens-rail,
.editor-surface[data-focus="true"] .editor-lens-drawer,
.editor-surface[data-focus="true"] .editor-topbar {
  display: none;
}

.editor-page--frame:has(.editor-surface[data-focus="true"]) {
  padding-left: 0;
}

/* Floating exit control — the focus toggle lives in the (hidden) top bar, so focus mode
   needs its own way out. Esc works too (editor keydown). */
.editor-focus-exit {
  display: none;
  position: fixed;
  top: 1rem;
  right: 1.25rem;
  z-index: 45;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--c-gray-400);
  cursor: pointer;
}

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

.editor-surface[data-focus="true"] .editor-focus-exit {
  display: inline-flex;
}

.editor-surface[data-focus="true"] .editor-workspace {
  grid-template-columns: minmax(0, 48rem);
  justify-content: center;
}

.editor-surface[data-focus="true"] .editor-block {
  opacity: 0.38;
  transition: opacity 0.18s ease;
}

.editor-surface[data-focus="true"] .editor-block.is-active {
  opacity: 1;
}

/* Typewriter + focus modes — room to scroll the caret line to the vertical center near the
   doc end (focus mode tracks the caret the same way; see centerCaretLineIfTracking). */
.editor-surface[data-typewriter="true"] .editor-canvas,
.editor-surface[data-focus="true"] .editor-canvas {
  padding-bottom: 45vh;
}

}