@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>). */
.editor-view-settings {
  position: relative;
}

.editor-view-settings-trigger {
  list-style: none;
  cursor: pointer;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--c-gray-300);
  border-radius: 6px;
  background: var(--c-white);
  color: var(--c-gray-700);
  font-size: 0.8125rem;
}

.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 {
  border-color: var(--c-gray-900);
  color: var(--c-gray-900);
  outline: none;
}

.editor-view-settings-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.375rem);
  z-index: 30;
  display: grid;
  gap: 0.875rem;
  min-width: 14rem;
  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; }

/* 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;
}

}