@layer surfaces {

.editor-workspace {
  display: grid;
  /* Third column = the annotation gutter: 242px of floating cards, 28px in pins mode.
     The lens DRAWER (scene/versions) joins as a fourth column while open — a real grid
     track, not a fixed overlay: anything fixed against the viewport mis-stacks with the
     sticky top bar the moment a banner sits above it (caught by the drawer e2e pair).
     The lens rail stays fixed at the page edge — it's chrome, not content. */
  --margin-col: 15.125rem;
  grid-template-columns: 15rem minmax(0, calc(var(--prose-w) + 4.5rem)) var(--margin-col);
  gap: 2rem;
  align-items: start;
}

/* The measure preference (View panel): one variable, and every cap derived from it —
   the canvas column, the workspace max-widths in 130 — recomputes. Standard is the
   43.5rem token default; Narrow suits ultrawide-with-big-type; Wide suits editors who
   want the paragraph to fill more of the line. */
.editor-surface[data-measure="narrow"] {
  --prose-w: 38.5rem;
}

.editor-surface[data-measure="wide"] {
  --prose-w: 52rem;
}

/* The workspace preference (View panel). Centered is the default and needs no rule —
   the cluster's margin-inline: auto in 130 centers it in the space after the chrome.
   Left anchors the cluster beside the drawer for writers who want content near the
   rails; Comfortable spends an ultrawide's wings on wider outline and margin columns
   (the ≥1800px tier in 130) instead of empty paper. */
@media (min-width: 1025px) {
  .editor-surface[data-workspace="left"] .editor-workspace {
    margin-inline: 0;
  }
}

.editor-surface[data-margin-collapsed="true"] .editor-workspace {
  --margin-col: 1.75rem;
}

/* While the drawer is open the gutter recedes to pins (the --margin-col override plus the
   pins-mode card rules below) so outline + prose + pins + drawer all fit at 1280 — the
   annotations come back as cards the moment the drawer closes. */
.editor-surface:is([data-side-panel="scene"], [data-side-panel="versions"], [data-side-panel="cues"]) .editor-workspace {
  --margin-col: 1.75rem;
  grid-template-columns: 15rem minmax(0, 48rem) var(--margin-col) 19.25rem;
}

.editor-canvas {
  position: relative;
  min-width: 0;
}

.editor-selection-toolbar {
  position: absolute;
  z-index: 30;
  display: inline-flex;
  gap: 1px;
  border: 1px solid var(--c-ink);
  border-radius: 4px;
  background: var(--c-ink);
  box-shadow: var(--shadow-float);
  padding: 2px;
  transform: translate(-50%, -100%);
}

.editor-selection-toolbar[data-placement="below"] {
  transform: translate(-50%, 0);
}

.editor-touch-selection-actions {
  position: fixed;
  right: 0.75rem;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 0.75rem);
  z-index: 34;
  display: inline-flex;
  gap: 1px;
  border: 1px solid var(--c-ink);
  border-radius: 4px;
  background: var(--c-ink);
  box-shadow: var(--shadow-float);
  padding: 2px;
}

.editor-selection-toolbar-button {
  min-width: 3rem;
  min-height: 1.75rem;
  border: 0;
  border-radius: 2px;
  background: var(--c-ink);
  color: var(--c-white);
  cursor: pointer;
  font: inherit;
  font-size: 0.75rem;
  line-height: 1;
  padding: 0.35rem 0.5rem;
}

.editor-selection-toolbar-button:hover,
.editor-selection-toolbar-button:focus-visible {
  background: var(--c-white);
  color: var(--c-ink);
  outline: none;
}

/* The time-aware action ("Set start · 1:32" / "Cue · 1:32"), present only while a track is
   docked. Accent tint + tabular digits so the riding playhead time doesn't jitter. */
.editor-selection-toolbar-button--cue {
  color: var(--c-accent-300);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The select → link-to-existing-entity picker (entity-graph-design §3.1): a small popup
   anchored under the selection, holding a filter + the project's entities. */
.editor-entity-link-picker {
  position: absolute;
  z-index: 32;
  display: flex;
  flex-direction: column;
  width: 16rem;
  max-width: calc(100% - 2rem);
  border: 1px solid var(--c-gray-300);
  border-radius: 8px;
  background: var(--c-white);
  box-shadow: var(--shadow-pop);
  padding: 0.375rem;
  transform: translateX(-50%);
}
.editor-entity-link-filter {
  width: 100%;
  border: 1px solid var(--c-gray-200);
  border-radius: 5px;
  background: var(--c-gray-25);
  color: var(--c-gray-900);
  font: inherit;
  font-size: 0.8125rem;
  padding: 0.375rem 0.5rem;
}
.editor-entity-link-filter:focus-visible {
  outline: 2px solid var(--c-accent-300);
  outline-offset: -1px;
}
.editor-entity-link-list {
  display: flex;
  flex-direction: column;
  max-height: 14rem;
  margin-top: 0.375rem;
  overflow-y: auto;
}
.editor-entity-link-option {
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--c-gray-800);
  cursor: pointer;
  font: inherit;
  font-size: 0.8125rem;
  text-align: left;
  padding: 0.375rem 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.editor-entity-link-option:hover,
.editor-entity-link-option:focus-visible,
.editor-entity-link-option.is-active {
  background: var(--c-accent-50);
  color: var(--c-gray-900);
  outline: none;
}
.editor-entity-link-empty {
  color: var(--c-gray-500);
  font-size: 0.8125rem;
  padding: 0.375rem 0.5rem;
}

/* Inline entity suggestion (entity-graph-design §3.1, recognition-based): a small caret-
   anchored dropdown of name completions; Tab/Enter accepts. No `[[` syntax in the prose. */
.editor-entity-suggest {
  position: absolute;
  z-index: 32;
  display: flex;
  flex-direction: column;
  min-width: 10rem;
  max-width: calc(100% - 1rem);
  border: 1px solid var(--c-gray-300);
  border-radius: 8px;
  background: var(--c-white);
  box-shadow: var(--shadow-pop);
  padding: 0.25rem;
}
.editor-entity-suggest-option {
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--c-gray-800);
  cursor: pointer;
  font: inherit;
  font-size: 0.8125rem;
  text-align: left;
  padding: 0.3rem 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.editor-entity-suggest-option:hover,
.editor-entity-suggest-option.is-active {
  background: var(--c-accent-50);
  color: var(--c-gray-900);
}

.document-outline {
  position: sticky;
  top: 1rem;
  min-width: 0;
  border-right: 1px solid var(--c-gray-200);
  padding-right: 1rem;
}

/* The annotation gutter: a full-height positioning context for the floating card layer.
   No sticky, no border — cards belong to the prose beside them, not to a column. */
.document-notes {
  position: relative;
  min-width: 0;
}

.document-versions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

/* Scene/Versions pills in the margin header: one panel at a time; clicking the active pill
   returns to the margin feed. data-side-panel on the surface drives which section shows
   (see EditorApp#applySidePanel). */
.document-panel-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 0;
  border-radius: 6px;
  background: none;
  padding: 0.3rem 0.55rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--c-gray-500);
  cursor: pointer;
  user-select: none;
}

.document-panel-tab:hover {
  color: var(--c-gray-700);
  background: var(--c-gray-100);
}

.document-panel-tab[aria-pressed="true"] {
  color: var(--c-gray-900);
  background: var(--c-gray-100);
}

/* The floating annotation layer (editor-v3): on desktop every card is absolutely
   positioned by ui/editor_annotations (style.top from core/annotation_layout — never
   rebuilt by the positioning pass); ≤1024px the layer stacks statically below the prose
   like the old margin column and the JS pass stands down. */
.editor-margin-feed {
  position: relative;
}

@media (max-width: 1024px) {
  .editor-margin-feed {
    display: grid;
    gap: 0.625rem;
    align-content: start;
  }
}

@media (min-width: 1025px) {
  .editor-margin-feed > * {
    position: absolute;
    left: 0;
    right: 0;
  }
}

/* Pins mode (data-margin-collapsed): anchored cards shrink to type-colored dots hugging
   the prose edge — a click expands back to cards with that annotation selected
   (EditorAnnotations#onLayerClick). Unanchored graph groups stand down entirely. */
@media (min-width: 1025px) {
  .editor-surface:is([data-margin-collapsed="true"], [data-side-panel="scene"], [data-side-panel="versions"], [data-side-panel="cues"]) .editor-margin-feed {
    & > [data-annotation-anchor] {
      left: 0;
      right: auto;
      width: 1rem;
      height: 1rem;
      border: 0;
      border-radius: 50%;
      padding: 0;
      overflow: hidden;
      cursor: pointer;
      background: var(--c-gray-400);
      box-shadow: var(--shadow-card);
    }

    & > [data-annotation-anchor] > * {
      display: none;
    }

    & > .document-note[data-annotation-anchor] {
      background: var(--c-ann-note);
    }

    & > [data-topic-kind="character"][data-annotation-anchor] {
      background: var(--c-ann-character);
    }

    & > [data-topic-kind="thread"][data-annotation-anchor] {
      background: var(--c-ann-thread);
    }

    & > :not([data-annotation-anchor]) {
      display: none;
    }
  }
}

.editor-margin-empty {
  font-size: 0.8125rem;
  color: var(--c-gray-500);
}

/* Typed cards carry their hue on the left edge, matching the prose decorations. */
.editor-margin-feed > .document-note {
  border-left: 2px solid var(--c-ann-note-edge);
  padding-left: 0.625rem;
}

.editor-margin-feed > [data-topic-kind] {
  border-left: 2px solid var(--c-gray-300);
  padding-left: 0.625rem;
}

.editor-margin-feed > [data-topic-kind="character"] { border-left-color: var(--c-ann-character-edge); }
.editor-margin-feed > [data-topic-kind="thread"] { border-left-color: var(--c-ann-thread-edge); }

/* Floating cards read as cards: they sit in open gutter space, not in a bordered column. */
@media (min-width: 1025px) {
  .editor-margin-feed > .document-note,
  .editor-margin-feed > [data-topic-kind] {
    background: var(--c-white);
    border-top: 1px solid var(--c-gray-200);
    border-right: 1px solid var(--c-gray-200);
    border-bottom: 1px solid var(--c-gray-200);
    border-radius: 10px;
    padding: 0.625rem 0.75rem 0.625rem 0.625rem;
    box-shadow: var(--shadow-card);
  }
}

.document-topic-card-kind {
  display: block;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-gray-500);
  margin-bottom: 0.125rem;
}

[data-topic-kind="character"] .document-topic-card-kind { color: var(--c-ann-character); }
[data-topic-kind="thread"] .document-topic-card-kind { color: var(--c-ann-thread); }

/* Headers now hold only the panel's action button. */
.document-panel-header {
  justify-content: flex-end;
}

.document-notes-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  border-radius: 4px;
  background: var(--c-ink);
  color: var(--c-white);
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.document-notes-add:hover,
.document-notes-add:focus-visible {
  background: var(--c-gray-800);
  outline: none;
}

.document-versions-create,
.document-version-preview-button,
.document-version-preview-action {
  border: 1px solid var(--c-gray-300);
  border-radius: 4px;
  background: var(--c-white);
  color: var(--c-gray-900);
  cursor: pointer;
  font: inherit;
}

.document-versions-create {
  min-height: 1.75rem;
  padding: 0.25rem 0.5rem;
}

.document-versions-create:hover,
.document-versions-create:focus-visible,
.document-version-preview-button:hover,
.document-version-preview-button:focus-visible,
.document-version-preview-action:hover,
.document-version-preview-action:focus-visible {
  border-color: var(--c-gray-400);
  background: var(--c-gray-50);
  outline: none;
}

.document-outline-list,
.document-outline-children {
  display: grid;
  gap: 0.125rem;
}

.document-versions-list {
  display: grid;
  gap: 0.5rem;
}

/* Scene inspector (composition metadata for the active scene) */

.document-scene-body {
  display: grid;
  gap: 0.75rem;
}

.document-scene-fields {
  justify-self: end;
}

.document-scene-fields-summary {
  cursor: pointer;
  color: var(--c-gray-500);
  font-size: 0.75rem;
  list-style: none;
}

.document-scene-fields-summary:hover {
  color: var(--c-gray-900);
}

.document-scene-fields-list {
  display: grid;
  gap: 0.25rem;
  margin-top: 0.5rem;
  padding: 0.5rem;
  border: 1px solid var(--c-gray-200);
  border-radius: 6px;
}

.document-scene-fields-option {
  color: var(--c-gray-700);
  font-size: 0.8125rem;
}

.document-scene-heading {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  color: var(--c-gray-900);
  font-size: 0.95rem;
  font-weight: 600;
}

.document-scene-kind {
  color: var(--c-gray-500);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: var(--ls-kicker);
}

.document-scene-empty {
  margin: 0;
  color: var(--c-gray-500);
  font-size: 0.875rem;
}

/* Teaching empty-states: surface the #/## mechanic in the always-visible panels (see
   services/composition_hints.js). Quiet by design — they vanish the moment structure exists. */
.composition-hint {
  display: grid;
  gap: 0.35rem;
  padding: 0.25rem 0;
}

.composition-hint-lead {
  margin: 0;
  color: var(--c-gray-500);
  font-size: 0.8125rem;
  font-weight: 500;
}

.composition-hint-body {
  margin: 0;
  color: var(--c-gray-500);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.composition-hint-mark {
  font-family: var(--font-mono);
  font-size: 0.8125em;
  background: var(--c-gray-100);
  color: var(--c-gray-700);
  border: 1px solid var(--c-gray-200);
  border-radius: 4px;
  padding: 0.05em 0.3em;
}

/* The ambient-state strip (sync whisper + tip slot + word count/sprint; see editor_stats.js).
   Pinned to the viewport bottom while the document scrolls — glanceable state is pointless if
   you have to scroll to glance at it. Opaque background so prose slides underneath; the
   word-count detail and conflict banner both already pop upward from it. */
.editor-statusbar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  background: var(--c-white);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-top: 1.5rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--c-gray-200);
  font-size: 0.8125rem;
  color: var(--c-gray-500);
}

/* The bar's one contextual-tip slot (EditorStats#renderStructureTip): collapses away when
   empty so the remaining items keep their space-between rhythm. */
.editor-statusbar-tip {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--c-gray-500);
}

.editor-statusbar-tip:empty {
  display: none;
}

.editor-tip-action {
  font-size: 0.75rem;
  color: var(--c-accent);
  background: none;
  border: 1px solid var(--c-accent-300);
  border-radius: 6px;
  padding: 0.125rem 0.5rem;
  margin-left: 0.5rem;
  cursor: pointer;
  white-space: nowrap;
}

.editor-tip-action:hover {
  background: var(--c-accent-50);
}

/* The ambient "⌘K to jump anywhere" hint: quieter than a real tip action, and
   pointless on touch devices, where the shortcut doesn't exist. */
.editor-palette-hint {
  color: var(--c-gray-500);
  border-color: var(--c-gray-200);
  margin-left: 0;
}

.editor-palette-hint kbd {
  font-family: inherit;
  font-size: 0.6875rem;
  border: 1px solid var(--c-gray-300);
  border-radius: 4px;
  padding: 0 0.25rem;
  margin-right: 0.25rem;
  background: var(--c-gray-50);
}

@media (pointer: coarse) {
  .editor-palette-hint {
    display: none;
  }
}

.view-setting-select {
  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);
}

.editor-tip-dismiss {
  border: 0;
  background: none;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  color: var(--c-gray-400);
  cursor: pointer;
  padding: 0 0.25rem;
}

.editor-tip-dismiss:hover,
.editor-tip-dismiss:focus-visible {
  color: var(--c-gray-600);
}

/* Remote presence overlay (collab: services/editor_presence.js). Decorative only — never
   intercepts the pointer; sits above prose, below the statusbar/popovers. */
.editor-presence-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 15;
}

/* JS positions the elements and stamps --presence-hue (one hue per peer); the
   color recipes live here so dark mode can retune them without touching JS. */
.editor-presence-selection {
  position: absolute;
  border-radius: 2px;
  background: hsl(var(--presence-hue) 70% 50% / 0.18);
}

.editor-presence-caret {
  position: absolute;
  width: 2px;
  border-radius: 1px;
  background: hsl(var(--presence-hue) 70% 45%);
}

.editor-presence-label {
  position: absolute;
  background: hsl(var(--presence-hue) 70% 45%);
  top: -1.1rem;
  left: 0;
  color: #fff;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.5;
  padding: 0 0.35em;
  border-radius: 3px;
  white-space: nowrap;
}

.editor-wordcount-wrap {
  position: relative;
}

.editor-wordcount {
  border: 0;
  background: none;
  font: inherit;
  color: var(--c-gray-600);
  cursor: pointer;
  padding: 0.25rem 0;
  font-variant-numeric: tabular-nums;
}

.editor-wordcount:hover {
  color: var(--c-ink);
}

.editor-wordcount-detail {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  min-width: 17rem;
  background: var(--c-white);
  border: 1px solid var(--c-gray-200);
  border-radius: 8px;
  box-shadow: 0 6px 20px var(--c-shadow);
  padding: 0.5rem 0.75rem;
  display: grid;
  gap: 0.3rem;
  z-index: 20;
}

.editor-stat-row {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
}

.editor-stat-label {
  color: var(--c-gray-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-stat-value {
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
  flex: none;
}

/* The goal row carries a longer value (count / target · % · daily), so stack it to keep the
   label from being squeezed to an ellipsis. */
.editor-stat-goal {
  flex-direction: column;
  align-items: stretch;
  gap: 0.1rem;
  margin-top: 0.2rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--c-gray-100);
}

.editor-stat-goal .editor-stat-label {
  color: var(--c-gray-600);
}

.editor-stat-goal .editor-stat-value {
  text-align: left;
}

.editor-sprint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.editor-sprint-start,
.editor-sprint-goal,
.editor-sprint-stop {
  border: 1px solid var(--c-gray-300);
  border-radius: 6px;
  background: var(--c-white);
  color: var(--c-gray-700);
  font: inherit;
  font-size: 0.8125rem;
  padding: 0.2rem 0.6rem;
  cursor: pointer;
}

.editor-sprint-start:hover,
.editor-sprint-goal:hover,
.editor-sprint-stop:hover {
  border-color: var(--c-gray-400);
  color: var(--c-ink);
}

.editor-sprint-readout {
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}

.editor-sprint-readout.is-expired {
  color: var(--c-danger);
}

.document-scene-field {
  display: grid;
  gap: 0.35rem;
}

.document-scene-field-label {
  color: var(--c-gray-500);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
}

.document-scene-input {
  width: 100%;
  border: 1px solid var(--c-gray-300);
  border-radius: 4px;
  background: var(--c-white);
  color: var(--c-gray-900);
  font: inherit;
  font-size: 0.875rem;
  padding: 0.4rem 0.5rem;
}

textarea.document-scene-input {
  min-height: 3.5rem;
  resize: vertical;
}

.document-scene-input:focus {
  border-color: var(--c-accent);
  outline: none;
}

.document-scene-status-group {
  display: inline-flex;
  gap: 0.25rem;
}

.document-scene-status-option {
  border: 1px solid var(--c-gray-300);
  border-radius: 4px;
  background: var(--c-white);
  color: var(--c-gray-500);
  cursor: pointer;
  font-size: 0.8125rem;
  padding: 0.2rem 0.55rem;
}

.document-scene-status-option:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
}

.document-scene-status-option[data-active="true"] {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: var(--c-white);
}

/* A selected "planned" stays in the grays — intention, not achievement, so the
   accent fill is reserved for the statuses prose has earned. */
.document-scene-status-option[data-active="true"][data-scene-status="planned"] {
  border-color: var(--c-gray-400);
  background: var(--c-gray-100);
  color: var(--c-gray-700);
}

.document-scene-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

/* The synopsis fact line (planner-spectrum §4.5): one quiet dated fact. Deliberately the
   panel's plainest text — no color, no icon, no badge; a fact is not an alert. */
.document-scene-fact {
  margin: 0;
  color: var(--c-gray-500);
  font-size: 0.8125rem;
}

/* "Entities here" — the inverse backlink (entity-graph-design §3.2): who appears in this
   scene. Read-side, calm; matches the scene field rhythm + the topic-panel presence chips. */
.document-scene-entities {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.25rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--c-gray-200);
}
.document-scene-entities-label {
  color: var(--c-gray-500);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
}
.document-scene-entities-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.document-scene-entity-chip {
  border: 1px solid var(--c-gray-200);
  border-radius: 999px;
  background: var(--c-gray-50);
  color: var(--c-gray-700);
  font-size: 0.8125rem;
  line-height: 1.2;
  padding: 0.1rem 0.5rem;
}

.document-scene-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid var(--c-gray-300);
  border-radius: 999px;
  background: var(--c-gray-50);
  color: var(--c-gray-700);
  font-size: 0.8125rem;
  padding: 0.1rem 0.5rem;
}

.document-scene-chip-remove {
  border: 0;
  background: transparent;
  color: var(--c-gray-400);
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1;
  padding: 0;
}

.document-scene-chip-remove:hover {
  color: var(--c-danger-700);
}

.document-scene-chip-input {
  flex: 1;
  min-width: 6rem;
  border: 0;
  background: transparent;
  color: var(--c-gray-900);
  font: inherit;
  font-size: 0.8125rem;
  padding: 0.2rem 0.1rem;
}

.document-scene-chip-input:focus {
  outline: none;
}

}