/* Visually hidden but exposed to assistive technology — the standard
   clip-rect pattern. Used by the off-screen model-derived accessibility tree
   (#a11yDocument, docs/67 row 9). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --accent is settable at runtime (Settings); everything tints derive from it. */
:root {
  /* Redesign default accent — Studio blue. main.js also sets --accent inline
     from persisted Settings, so this is the fallback/first-paint value. */
  --accent: #3355c4;
  --accent-strong: color-mix(in srgb, var(--accent) 82%, var(--ink));
  --accent-ink: #ffffff;
  --accent-soft: color-mix(in srgb, var(--accent) 13%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 42%, transparent);
  --error: #c0392b;
  /* Canvas / grid aesthetic (redesign): the shell reads as a flat gridded
     surface split by hairlines, not a stack of rounded cards — so the chrome
     radii are near-square. Floating popovers keep a small radius so they still
     detach from the surface (and #outlinePanel stays 10px, asserted by
     shell-reference-polish.spec). */
  --radius: 3px;
  --radius-sm: 3px;
  --radius-md: 3px;
  /* Floating surfaces keep their own radius so they detach from the flat
     canvas — and both are asserted by tests (#outlinePanel 10px in
     shell-reference-polish; dialog cards 12px in header-menu). */
  --radius-popover: 10px;
  --radius-dialog: 12px;
  --shadow-popover: 0 10px 34px rgba(20, 22, 28, 0.24);
  --shadow-lg: 0 18px 48px rgba(20, 22, 28, 0.28);
  --shadow-dialog: 0 24px 72px rgba(20, 22, 28, 0.3);
  /* Named type, control-height, and icon grids from doc 69 §3.3/§4.1/§4.2.
     Values preserve the existing shell except where the design explicitly
     consolidates equivalent caption/icon roles. */
  --fs-micro: 9px;
  --fs-caption: 10px;
  --fs-small: 12px;
  --fs-body: 13px;
  --fs-medium: 15px;
  --fs-title: 16px;
  --fs-ribbon-caption: 10.5px;
  --fs-ribbon-tab: 13.5px;
  --h-control: 30px;
  --h-search: 34px;
  --h-field: 36px;
  --h-tab: 34px;
  --h-rail-control: 44px;
  --h-footer: 30px;
  --h-header: 58px;
  --icon-compact: 16px;
  --icon-control: 18px;
  --icon-rail: 20px;
  --dialog-width-compact: 380px;
  --dialog-width-standard: 640px;
  --dialog-width-wide: 760px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
}

/* Light palette (default + explicit). */
:root,
:root[data-theme="light"] {
  /* Warm "Studio" light palette from the approved editor redesign: paper-white
     canvas (#FBFAF8), quiet stone surfaces (#F2F1ED), warm-grey hairlines
     (#EDEBE6 / #DEDBD4), and graphite ink (#14161A). Everything downstream is
     tokenized, so this single block re-skins the whole chrome. */
  --bg: #fbfaf8;
  --bg-2: #f2f1ed;
  --surface: #ffffff;
  --surface-alt: #fcfcfb;
  --ink: #14161a;
  --muted: #565a61;
  --faint: #8a8e95;
  --line: #edebe6;
  --line-strong: #dedbd4;
  --scrollbar-thumb: rgba(74, 78, 85, 0.3);
  --scrollbar-thumb-hover: rgba(74, 78, 85, 0.52);
  --shadow-sm: 0 1px 2px rgba(20, 22, 26, 0.05);
  --shadow-page: 0 1px 3px rgba(20, 22, 26, 0.12), 0 10px 30px rgba(20, 22, 26, 0.09);
  /* Graphite primary action (redesign): the mock's "Open" / "Save .docx" /
     "Apply" buttons are solid ink, not the tinted accent. Kept theme-aware so
     dark mode gets an inverse (light) primary instead of an unreadable dark one. */
  --primary-bg: #14161a;
  --primary-bg-hover: #2c2f35;
  --primary-ink: #fbfaf8;
  color-scheme: light;
}

/* Dark palette — via system pref (only when no explicit theme) or explicit choice. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
    --bg: #141619;
    --bg-2: #191c20;
    --surface: #212429;
    --surface-alt: #282c31;
    --ink: #e8eaed;
    --muted: #969ba3;
    --faint: #6b7178;
    --line: #2e323a;
    --line-strong: #383d46;
    --scrollbar-thumb: rgba(232, 234, 237, 0.28);
    --scrollbar-thumb-hover: rgba(232, 234, 237, 0.5);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-page: 0 1px 3px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35);
    --primary-bg: #e8eaed;
    --primary-bg-hover: #ffffff;
    --primary-ink: #16181c;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #141619;
  --bg-2: #191c20;
  --surface: #212429;
  --surface-alt: #282c31;
  --ink: #e8eaed;
  --muted: #969ba3;
  --faint: #6b7178;
  --line: #2e323a;
  --line-strong: #383d46;
  --scrollbar-thumb: rgba(232, 234, 237, 0.28);
  --scrollbar-thumb-hover: rgba(232, 234, 237, 0.5);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-page: 0 1px 3px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35);
  --primary-bg: #e8eaed;
  --primary-bg-hover: #ffffff;
  --primary-ink: #16181c;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

/* ---- Scrollbars: one thin, quiet, overlay-style treatment everywhere --------
   Per the doc 63 design system, every `overflow:auto` surface (the single
   document scrollbar on `.viewport`, plus dialog bodies, menus, the command
   list, and side panels) shares one minimal bar: a transparent track and a
   translucent thumb that darkens on hover. Applied globally so no default
   chunky OS bar leaks through, then reinforced on the known scroll surfaces. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border: 2px solid transparent;
  border-radius: 8px;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: padding-box;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  font: var(--fs-body)/1.5 "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

button,
select,
input {
  font: inherit;
}

/* ---- Header bar ------------------------------------------------------------ */
.bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--h-header);
  padding: 5px 14px 4px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  z-index: 30;
}

/* Visible ⌘K entry point (doc 69 §1.4.1/§1.2) — the palette itself already
   existed and worked; it only lacked a discoverable trigger. Wired to the
   same openCmd() the keyboard shortcut calls, in main.js. */
.search-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--h-search);
  padding: 0 10px;
  margin-left: 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  flex: 0 1 240px;
  min-width: 0;
}

.search-trigger:hover {
  background: var(--bg-2);
  border-color: var(--muted);
}

.search-trigger .ms {
  flex: 0 0 auto;
  font-size: var(--icon-compact);
}

.search-trigger .search-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  font-size: var(--fs-body);
}

.search-trigger kbd {
  flex: 0 0 auto;
  font: 600 var(--fs-caption)/1 inherit;
  color: var(--faint);
  background: var(--bg-2);
  border-radius: 4px;
  padding: 2px 6px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  min-width: 0;
}

.brand .mark {
  font-weight: 700;
  font-size: var(--fs-medium);
  letter-spacing: -0.02em;
}

.brand-logo {
  display: block;
  width: 26px;
  height: 26px;
}

.controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex: 0 0 auto;
}

.document-chrome {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  min-width: 0;
  max-width: 500px;
}

.document-chrome[hidden] {
  display: none;
}

.document-title-row {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 27px;
  gap: 7px;
}

.document-state {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 4px;
  padding: 1px 7px 1px 5px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface-alt);
  color: var(--muted);
  font-size: var(--fs-small);
  white-space: nowrap;
}

.document-state .ms {
  font-size: var(--icon-compact);
}

.document-state[data-state="edited"] {
  color: color-mix(in srgb, var(--accent) 82%, var(--ink));
}

.document-state[data-state="downloaded"] {
  color: #2a8a60;
}

.app-menu-bar {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 21px;
  margin-left: 1px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.app-menu-bar::-webkit-scrollbar {
  display: none;
}

.app-menu-button {
  flex: 0 0 auto;
  height: 21px;
  padding: 1px 7px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: 19px;
  cursor: pointer;
}

.app-menu-button:hover,
.app-menu-button:focus-visible,
.app-menu-button[aria-expanded="true"] {
  background: var(--bg-2);
  outline: none;
}

/* ---- Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--h-control);
  padding: 0 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, opacity 0.12s;
}

/* Unified icon grid (doc 69 §4.2): header/menu icons are 18px, matching
   .fmt's ribbon icons instead of a separate 17px size. */
.btn .ms {
  font-size: var(--icon-control);
}

.btn:hover:not(:disabled) {
  background: var(--bg-2);
  border-color: var(--muted);
}

.btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.btn-primary {
  background: var(--primary-bg);
  border-color: var(--primary-bg);
  color: var(--primary-ink);
}

.btn-primary:hover:not(:disabled) {
  background: var(--primary-bg-hover);
  border-color: var(--primary-bg-hover);
}

.btn.icon-only {
  width: 30px;
  padding: 0;
  justify-content: center;
}

.save-format {
  height: var(--h-control);
  max-width: 132px;
  padding: 0 26px 0 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

.save-format:hover:not(:disabled) {
  background: var(--bg-2);
  border-color: var(--muted);
}

.save-format:disabled {
  opacity: 0.45;
  cursor: default;
}

.compatibility-status {
  max-width: 150px;
  overflow: hidden;
  color: color-mix(in srgb, var(--accent) 82%, var(--ink));
  font-size: var(--fs-small);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file {
  position: relative;
}

.doc-title {
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 550;
  color: var(--ink);
  width: auto;
  max-width: 300px;
  min-width: 0;
  flex: 1 1 auto;
  padding: 3px 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: text;
}

.doc-title:hover {
  background: var(--bg-2);
}

.doc-title:focus {
  outline: none;
  cursor: text;
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
  text-overflow: clip;
}


.app-menu-popover {
  position: fixed;
  z-index: 60;
  width: min(286px, calc(100vw - 16px));
  max-height: min(560px, calc(100vh - var(--h-header) - 16px));
  padding: 6px;
  overflow-y: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-popover);
  background: var(--surface);
  box-shadow: var(--shadow-popover);
}

.app-menu-popover[hidden] {
  display: none;
}

.app-menu-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  min-height: 31px;
  padding: 5px 9px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.app-menu-item:hover:not(:disabled),
.app-menu-item:focus-visible {
  background: var(--bg-2);
  outline: none;
}

.app-menu-item:disabled {
  color: var(--faint);
  cursor: default;
}

.app-menu-item-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-menu-item-hint {
  margin-left: 18px;
  color: var(--muted);
  font-size: var(--fs-small);
  white-space: nowrap;
}

.app-menu-item:disabled .app-menu-item-hint {
  color: var(--faint);
}

.app-menu-separator {
  height: 1px;
  margin: 5px 7px;
  background: var(--line);
}

/* ---- Settings popover ------------------------------------------------------ */
.settings-panel {
  position: absolute;
  top: var(--h-header);
  right: 12px;
  z-index: 20;
  width: 268px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-popover);
  box-shadow: var(--shadow-popover);
}

.settings-panel[hidden] {
  display: none;
}

.settings-section {
  margin-bottom: 14px;
}

.settings-label {
  font-size: var(--fs-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--faint);
  margin-bottom: 7px;
}

.segmented {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg-2);
  border-radius: 9px;
}

.segmented button {
  flex: 1;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-weight: 550;
  cursor: pointer;
}

.segmented button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.acc {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--c, var(--accent));
  cursor: pointer;
  padding: 0;
  box-shadow: inset 0 0 0 1.5px var(--surface);
}

.acc[aria-pressed="true"] {
  border-color: var(--ink);
}

.acc-custom {
  display: inline-grid;
  place-items: center;
  background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
  overflow: hidden;
}

.acc-custom input[type="color"] {
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  cursor: pointer;
  opacity: 0;
}

.settings-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.4;
}

.settings-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

/* ---- Modal dialogs --------------------------------------------------------- */
body.modal-open {
  overflow: hidden;
}

.dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  background: rgba(20, 22, 28, 0.42);
  backdrop-filter: blur(2px);
}

.dialog-overlay[hidden] {
  display: none;
}

.dialog-card {
  display: flex;
  width: min(var(--dialog-width-standard), 100%);
  max-height: min(720px, calc(100vh - 48px));
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-dialog);
  background: var(--surface);
  box-shadow: var(--shadow-dialog);
}

.dialog-card-compact {
  width: min(var(--dialog-width-compact), 100%);
}

.dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 18px var(--space-5) 14px;
  border-bottom: 1px solid var(--line);
}

.dialog-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-3);
}

.dialog-heading-icon {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--icon-rail);
}

.dialog-heading h2 {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-title);
  font-weight: 650;
  letter-spacing: -0.015em;
}

.dialog-heading p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: var(--fs-small);
}

.dialog-close {
  display: grid;
  width: var(--h-control);
  height: var(--h-control);
  flex: 0 0 var(--h-control);
  place-items: center;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.dialog-close .ms {
  font-size: var(--icon-control);
}

.dialog-close:hover {
  background: var(--bg-2);
  color: var(--ink);
}

.dialog-body {
  min-height: 0;
  overflow: auto;
  padding: 18px var(--space-5) var(--space-5);
}

.dialog-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}

.dialog-note {
  color: var(--muted);
  font-size: var(--fs-small);
}

.dialog-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.dialog-button {
  height: var(--h-search);
  min-width: 80px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
}

.dialog-button:hover {
  border-color: var(--muted);
  background: var(--bg-2);
}

.dialog-button-primary {
  border-color: var(--primary-bg);
  background: var(--primary-bg);
  color: var(--primary-ink);
}

.dialog-button-primary:hover {
  border-color: var(--primary-bg-hover);
  background: var(--primary-bg-hover);
}

.properties-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.field-wide {
  grid-column: 1 / -1;
}

.dialog-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
  color: var(--muted);
  font-size: var(--fs-small);
  font-weight: 600;
}

.dialog-field > input,
.dialog-field > textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 450;
}

.dialog-field > input {
  height: var(--h-field);
  padding: 0 10px;
}

.dialog-field > textarea {
  min-height: 76px;
  padding: 9px 10px;
  line-height: 1.45;
  resize: vertical;
}

.dialog-field > input:focus,
.dialog-field > textarea:focus,
.number-control:focus-within {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.metadata-section,
.metadata-disclosure {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.metadata-section h3 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 650;
}

.metadata-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin: 0;
}

.metadata-facts > div {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
}

.metadata-facts dt {
  margin-bottom: 3px;
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: 600;
}

.metadata-facts dd {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 550;
  line-height: 1.35;
  text-overflow: ellipsis;
}

.metadata-facts dd.metadata-empty {
  color: var(--faint);
  font-weight: 450;
}

.metadata-disclosure summary {
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 650;
  cursor: pointer;
}

.metadata-disclosure[open] summary {
  margin-bottom: 12px;
}

.metadata-facts-compact {
  gap: 8px 12px;
}

.metadata-fact-wide {
  grid-column: 1 / -1;
}

/* ---- Page setup dialog ----------------------------------------------------- */
.page-setup-dialog {
  width: min(var(--dialog-width-wide), 100%);
}

.page-setup-body {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 24px;
}

.page-preview {
  display: flex;
  min-height: 330px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
}

.page-preview-sheet {
  position: relative;
  width: 150px;
  aspect-ratio: var(--page-ratio, 8.27 / 11.69);
  overflow: hidden;
  border: 1px solid #d7dbe0;
  border-radius: 2px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(20, 22, 28, 0.15);
  transition: width 0.16s ease, aspect-ratio 0.16s ease;
}

.page-preview-sheet[data-orientation="landscape"] {
  width: 210px;
}

.page-preview-margins {
  position: absolute;
  inset:
    var(--preview-margin-top, 8%)
    var(--preview-margin-right, 8%)
    var(--preview-margin-bottom, 8%)
    var(--preview-margin-left, 8%);
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 4px;
  border: 1px dashed #c7ccd3;
}

.page-preview-margins span {
  display: block;
  height: 2px;
  margin-inline: 10%;
  border-radius: 999px;
  background: #e3e6ea;
}

.page-preview-margins span:nth-child(2) {
  width: 68%;
}

.page-preview-margins span:nth-child(3) {
  width: 82%;
}

.page-preview-margins span:nth-child(4) {
  width: 54%;
}

.page-preview-label {
  color: var(--muted);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}

.page-setup-fields {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 20px;
}

/* ---- Table properties inspector ------------------------------------------ */
.table-properties-grid {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.table-property-section {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 12px;
  padding: 15px 0 17px;
  border-bottom: 1px solid var(--line);
}

.table-property-section legend {
  margin: 0;
  padding: 0;
}

.table-property-section:first-child {
  padding-top: 0;
}

.table-property-section:last-child {
  padding-bottom: 4px;
  border-bottom: none;
}

.dialog-select {
  width: 100%;
  height: var(--h-field);
  padding: 0 30px 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-body);
}

.dialog-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.dialog-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--ink);
  font-size: var(--fs-small);
  cursor: pointer;
}

.dialog-check input {
  margin: 2px 0 0;
  accent-color: var(--accent);
}

.dialog-check span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.dialog-check strong {
  font-weight: 600;
}

.dialog-check small,
.dialog-field-note {
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: 450;
  line-height: 1.35;
}

.dialog-field-note {
  margin: -4px 0 0;
}

/* ---- Bookmark manager ---------------------------------------------------- */
.bookmark-dialog {
  width: min(460px, 100%);
}

.bookmark-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Insert-field picker: a compact list of field kinds, styled to match the
   bookmark manager's rows and the graphite dialog chrome. */
.field-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 360px;
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.field-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.field-choice:hover {
  background: var(--bg-2);
}

.field-choice:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.field-choice-icon {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 19px;
}

.field-choice:hover .field-choice-icon {
  color: var(--accent);
}

.field-choice-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.field-choice-label {
  font-size: var(--fs-body);
  font-weight: 550;
}

.field-choice-note {
  color: var(--muted);
  font-size: var(--fs-small);
  font-weight: 450;
}

/* ---- Insert ▸ Symbol / Emoji pickers ------------------------------------- */
.glyph-panel-content {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

.glyph-panel .panel-head {
  height: auto;
  min-height: 58px;
  padding: 9px 8px 9px 12px;
  align-items: flex-start;
}

.glyph-panel .panel-head .dialog-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.glyph-panel .panel-head small {
  display: block;
  color: var(--muted);
  font-size: var(--fs-caption);
  line-height: 1.3;
}

.glyph-panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-caption);
}

.glyph-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.glyph-search {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  color: var(--ink);
  font: inherit;
}

.glyph-search:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.glyph-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.glyph-tab {
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-small);
  line-height: 1.4;
  cursor: pointer;
}

.glyph-tab:hover {
  background: var(--bg-2);
  color: var(--ink);
}

.glyph-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.glyph-tab.is-active {
  background: var(--accent-soft, var(--bg-2));
  border-color: var(--accent);
  color: var(--ink);
}

.glyph-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 4px;
  max-height: 320px;
  overflow: auto;
  padding: 2px;
}

.glyph-cell {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.glyph-grid-emoji .glyph-cell {
  font-size: 24px;
}

.glyph-cell:hover {
  background: var(--bg-2);
  border-color: var(--line);
}

.glyph-cell:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.glyph-empty {
  margin: 0;
  padding: 12px 4px;
  color: var(--muted);
  font-size: var(--fs-small);
}

/* ---- Insert/edit link dialog --------------------------------------------- */
.link-dialog {
  width: min(460px, 100%);
}

.link-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.link-body > label {
  color: var(--muted);
  font-size: var(--fs-small);
  font-weight: 600;
}

.link-optional {
  color: var(--muted);
  font-weight: 450;
}

.link-field-label {
  color: var(--muted);
  font-size: var(--fs-small);
  font-weight: 600;
}

.link-body input,
.link-body select {
  width: 100%;
  height: var(--h-field);
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 450;
}

.link-body input:focus,
.link-body select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.link-mode {
  display: flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-2);
}

.link-mode-tab {
  flex: 1 1 0;
  height: var(--h-search);
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
}

.link-mode-tab:hover {
  color: var(--ink);
}

.link-mode-tab.is-active {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}

.link-mode-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.link-mode-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#linkDialogNote.error,
#linkPlaceEmpty {
  color: #b3261e;
  font-weight: 550;
}

#linkPlaceEmpty {
  color: var(--muted);
  font-weight: 450;
}

@media (prefers-color-scheme: dark) {
  #linkDialogNote.error { color: #f2b8b5; }
}

.bookmark-add {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bookmark-add > label {
  color: var(--muted);
  font-size: var(--fs-small);
  font-weight: 600;
}

.bookmark-add-row {
  display: flex;
  gap: var(--space-2);
}

.bookmark-add-row > input {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--h-field);
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 450;
}

.bookmark-add-row > input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.bookmark-add .dialog-button {
  flex: 0 0 auto;
}

#bookmarkAddNote.error {
  color: #b3261e;
  font-weight: 550;
}

@media (prefers-color-scheme: dark) {
  #bookmarkAddNote.error {
    color: #f2b8b5;
  }
}

.bookmark-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bookmark-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.bookmark-sort:hover {
  background: var(--bg-2);
  color: var(--ink);
}

.bookmark-sort .ms {
  font-size: 15px;
}

.bookmark-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 320px;
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.bookmark-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 4px 4px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}

.bookmark-row:hover {
  background: var(--bg-2);
}

.bookmark-row.editing {
  background: var(--bg-2);
  border-color: var(--line);
}

.bookmark-goto {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 5px 6px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 550;
  text-align: left;
  cursor: pointer;
}

.bookmark-goto .ms {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 17px;
}

.bookmark-goto:hover {
  color: var(--accent);
}

.bookmark-goto:hover .ms {
  color: var(--accent);
}

.bookmark-goto:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.bookmark-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bookmark-rename-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 550;
}

.bookmark-rename-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.bookmark-row-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 2px;
}

.bookmark-action {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.bookmark-action .ms {
  font-size: 17px;
}

.bookmark-action:hover {
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}

.bookmark-action.danger:hover {
  color: #b3261e;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #d93025 40%, transparent);
}

.bookmark-action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.bookmark-empty {
  margin: 0;
  padding: 18px 4px;
  color: var(--muted);
  font-size: var(--fs-small);
  text-align: center;
}

.dialog-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
}

.dialog-group legend {
  margin-bottom: 9px;
  padding: 0;
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 650;
}

.dialog-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.orientation-segmented button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.orientation-segmented .ms {
  font-size: var(--icon-control);
}

.number-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  height: var(--h-field);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.number-control input {
  width: 100%;
  min-width: 0;
  padding: 0 4px 0 10px;
  border: none;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-body);
  font-variant-numeric: tabular-nums;
}

.number-control > span {
  display: grid;
  place-items: center;
  border-left: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--muted);
  font-size: var(--fs-small);
  font-weight: 500;
}

.oss {
  font-size: var(--fs-caption);
  color: var(--faint);
}

.link {
  border: none;
  background: none;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

/* ---- Right-click context menu ---------------------------------------------- */
.context-menu {
  position: fixed;
  /* Above the floating selection toolbar (z-index 40) so a right-click on a
     selection never has its menu occluded — or its items click-intercepted — by
     the toolbar that hovers the same selection. */
  z-index: 60;
  min-width: 224px;
  max-width: min(340px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  overflow: auto;
  padding: 5px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-popover);
  box-shadow: var(--shadow-popover);
  color: var(--ink);
}

.context-menu[hidden] {
  display: none;
}

.menu-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  width: 100%;
  text-align: left;
  padding: 5px 9px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-body);
  cursor: pointer;
  white-space: nowrap;
}

/* Leading-icon gutter — reserved on every row so labels align whether or not
   a row carries an icon (Word / Google Docs convention). */
.menu-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  opacity: 0.72;
}

.menu-item.active .menu-item-icon,
.menu-item:hover .menu-item-icon,
.menu-item:focus-visible .menu-item-icon {
  opacity: 1;
}

/* Submenu affordance + the flyout that opens to the side. */
.menu-item-caret {
  justify-self: end;
  color: var(--faint);
  font-size: 15px;
  line-height: 1;
}

.menu-item.active .menu-item-caret,
.menu-item:hover .menu-item-caret,
.menu-item:focus-visible .menu-item-caret {
  color: inherit;
}

/* Keep a submenu-parent lit while focus is inside its open flyout, so the
   open path stays visible. */
.menu-item.has-submenu[aria-expanded="true"] {
  background: var(--accent-soft);
  color: var(--accent);
}

.editor-submenu {
  z-index: 61;
}

.menu-item:hover,
.menu-item.active,
.menu-item:focus-visible {
  background: var(--accent-soft);
  color: var(--accent);
  outline: none;
}

.menu-item.danger:hover,
.menu-item.danger.active,
.menu-item.danger:focus-visible {
  background: color-mix(in srgb, var(--error) 12%, transparent);
  color: var(--error);
}

.menu-item:disabled {
  cursor: not-allowed;
  color: var(--faint);
  background: transparent;
}

.menu-item-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-item-hint {
  max-width: 150px;
  overflow: hidden;
  color: var(--faint);
  font-size: var(--fs-small);
  text-overflow: ellipsis;
}

/* Disabled rows are greyed in place (Google Docs style): the label, any
   shortcut hint, and the leading icon all mute, and no reason text is shown. */
.menu-item:disabled .menu-item-icon {
  opacity: 0.4;
}

.menu-item:disabled .menu-item-hint {
  color: var(--faint);
}

.menu-divider {
  height: 1px;
  margin: 4px 6px;
  background: var(--line);
}

.table-style-menu {
  min-width: 220px;
  display: grid;
  gap: 4px;
}

.table-style-choice {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 7px 9px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.table-style-choice:hover {
  background: var(--accent-soft);
}

.table-style-swatch {
  display: grid;
  grid-template-rows: repeat(3, 4px);
  width: 42px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
}

.table-style-swatch i:nth-child(1) { background: var(--accent); }
.table-style-swatch i:nth-child(2) { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
.table-style-swatch i:nth-child(3) { background: var(--surface-alt); }
.table-style-clear { font-size: var(--fs-small); }

/* ---- Line & paragraph spacing menu ----------------------------------------- */
.spacing-menu {
  min-width: 210px;
}

.table-format-menu {
  width: min(286px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  overflow: auto;
}

.menu-heading {
  padding: 4px 10px 6px;
  font-size: var(--fs-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--faint);
}

.table-context {
  padding: 0 10px 6px;
  color: var(--muted);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}

/* Line-spacing rows carry a leading check column; the check shows on the
   currently-applied value. */
.spacing-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.menu-check {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  opacity: 0;
  background: currentcolor;
  -webkit-mask: var(--check-svg) center / contain no-repeat;
  mask: var(--check-svg) center / contain no-repeat;
  --check-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
}

.spacing-line[aria-checked="true"] .menu-check {
  opacity: 1;
}

.spacing-line[aria-checked="true"] {
  color: var(--accent);
}

.menu-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: var(--fs-body);
  color: var(--ink);
}

.menu-row input {
  margin-left: auto;
  width: 56px;
  height: 26px;
  padding: 0 8px;
  text-align: right;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.menu-row input:focus {
  outline: none;
  border-color: var(--accent);
}

.menu-row .menu-select {
  margin-left: auto;
}

.menu-select {
  height: 26px;
  padding: 0 6px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.menu-select:focus {
  outline: none;
  border-color: var(--accent);
}

.menu-unit {
  color: var(--muted);
  font-size: var(--fs-small);
  width: 14px;
}

/* ---- Paragraph-options menu (shading + line/page-break flags) --------------- */
.menu-check-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 10px;
  font-size: var(--fs-body);
  color: var(--ink);
  cursor: pointer;
  border-radius: 6px;
}

.menu-check-row:hover {
  background: var(--accent-soft);
}

.menu-check-row input {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
}

.shade-row {
  justify-content: space-between;
}

.shade-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.shade-pick input[type="color"] {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: none;
  cursor: pointer;
}

.chip-btn {
  height: 26px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-small);
  cursor: pointer;
}

.chip-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

.chip-row {
  display: flex;
  gap: 4px;
}

/* ---- Insert-table grid picker ---------------------------------------------- */
.grid-picker {
  padding: 8px;
}

.grid-cells {
  display: grid;
  grid-template-columns: repeat(10, 15px);
  gap: 2px;
}

.grid-cells .gc {
  width: 15px;
  height: 15px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--surface);
  cursor: pointer;
  padding: 0;
}

.grid-cells .gc.on {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.grid-label {
  margin-top: 7px;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---- Command palette (⌘K) -------------------------------------------------- */
.cmd-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 12vh;
  background: rgba(20, 22, 28, 0.34);
}

.cmd-overlay[hidden] {
  display: none;
}

.cmd-box {
  width: min(560px, 92vw);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-popover);
  box-shadow: var(--shadow-popover);
  overflow: hidden;
}

.cmd-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.cmd-search-icon {
  color: var(--muted);
  font-size: var(--icon-control);
  flex: 0 0 auto;
}

.cmd-search input {
  flex: 1;
  border: none;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-medium);
  outline: none;
}

.cmd-kbd {
  font-size: var(--fs-caption);
  color: var(--faint);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 6px;
}

.cmd-list {
  max-height: 340px;
  overflow: auto;
  padding: 6px;
}

.cmd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-body);
  text-align: left;
  cursor: pointer;
}

.cmd-item .cmd-group {
  color: var(--faint);
  font-size: var(--fs-small);
}

.cmd-item .cmd-hint {
  margin-left: auto;
  color: var(--faint);
  font-size: var(--fs-small);
}

.cmd-item.sel,
.cmd-item:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.cmd-empty {
  padding: 16px;
  text-align: center;
  color: var(--faint);
  font-size: var(--fs-body);
}

/* ---- Find / replace -------------------------------------------------------- */
.find-panel {
  position: fixed;
  top: calc(var(--h-header) + 88px);
  right: 18px;
  z-index: 55;
  display: flex;
  flex-direction: column;
  width: min(440px, calc(100vw - 36px));
  max-height: calc(100vh - var(--h-header) - 104px);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-popover);
  box-shadow: var(--shadow-popover);
}

.find-panel[hidden] {
  display: none;
}

.find-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--line);
}

.find-panel-head > div {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: var(--space-2);
}

.find-panel-title {
  color: var(--ink);
  font-size: var(--fs-medium);
  font-weight: 650;
}

.find-panel-body {
  display: grid;
  min-height: 0;
  overflow: auto;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.find-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--h-control) var(--h-control);
  align-items: center;
  gap: 6px;
}

.find-panel input[type="text"] {
  width: 100%;
  min-width: 0;
  height: var(--h-field);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  padding: 0 8px;
  font: inherit;
  font-size: var(--fs-body);
  outline: none;
}

.find-panel input[type="text"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.find-panel .btn.icon-only {
  height: var(--h-control);
}

.find-status {
  color: var(--muted);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.find-status.miss {
  color: var(--error);
}

.find-status:empty {
  display: none;
}

.find-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.find-option {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: var(--h-control);
  padding: 4px 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: var(--fs-small);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.find-option:has(input:checked) {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

.find-option input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--accent);
}

.find-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-1);
}

.chip-btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.chip-btn-primary:hover {
  filter: brightness(1.05);
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

/* ---- Floating selection toolbar -------------------------------------------- */
.sel-toolbar {
  position: fixed;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-popover);
  box-shadow: var(--shadow-popover);
}

.sel-toolbar[hidden] {
  display: none;
}

.sel-divider {
  width: 1px;
  height: 20px;
  background: var(--line-strong);
  margin: 0 3px;
}

.sel-toolbar .fmt {
  color: var(--ink);
}

.sel-toolbar .fmt:hover:not(:disabled) {
  background: var(--bg-2);
}

.sel-toolbar .fmt[aria-pressed="true"] {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

/* Text-color / highlight buttons on the floating bar: a glyph over a swatch bar,
   matching the ribbon's color-apply half, opening the same swatch popovers. */
.sel-toolbar .sel-color-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.11s;
}

.sel-toolbar .sel-color-btn .color-apply-glyph {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.sel-toolbar .sel-color-btn .ms.color-apply-glyph {
  font-size: var(--icon-control);
  font-weight: 400;
}

.sel-toolbar .sel-color-btn:hover {
  background: var(--bg-2);
}

.sel-toolbar .sel-color-btn[aria-expanded="true"] {
  background: var(--accent-soft);
  color: var(--accent);
}

.sel-toolbar .sel-color-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* A host-owned affordance for canvas-painted links. The engine supplies the
   exact authored range/target; this chip supplies visible, policy-checked
   activation without making DOM text authoritative. */
.link-chip {
  position: fixed;
  z-index: 45;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: min(440px, calc(100vw - 24px));
  min-width: min(300px, calc(100vw - 24px));
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-popover);
  background: var(--surface);
  box-shadow: var(--shadow-popover);
}

.link-chip[hidden] {
  display: none;
}

.link-chip-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: var(--radius-sm);
  color: var(--accent);
  background: var(--accent-soft);
}

.link-chip-icon .ms {
  font-size: 17px;
}

.link-chip-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  line-height: 1.25;
}

.link-chip-kind {
  color: var(--faint);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.link-chip-target {
  overflow: hidden;
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-chip-action {
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm);
  color: var(--accent);
  background: var(--accent-soft);
  font-weight: 650;
  cursor: pointer;
}

.link-chip-action:hover:not(:disabled) {
  filter: brightness(1.05);
}

.link-chip-action:disabled {
  border-color: var(--line);
  color: var(--faint);
  background: var(--bg-2);
  cursor: default;
}

.link-chip-danger {
  color: var(--error);
}

/* Border presets: a row of buttons each showing a mini box with the relevant
   edge(s) emphasized (CSS-drawn — no icon assets). */
.border-row {
  justify-content: space-between;
}

.border-presets {
  display: flex;
  gap: 2px;
}

.border-btn {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

.border-btn:hover {
  background: var(--bg-2);
}

.border-btn[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

.border-btn .bx {
  width: 15px;
  height: 15px;
  border: 1px solid var(--faint);
}

.border-btn[data-border="none"] .bx {
  border-style: dashed;
}

.border-btn[data-border="box"] .bx {
  border: 1.5px solid var(--ink);
}

.border-btn[data-border="top"] .bx {
  border-top: 2px solid var(--ink);
}

.border-btn[data-border="bottom"] .bx {
  border-bottom: 2px solid var(--ink);
}

.border-btn[data-border="left"] .bx {
  border-left: 2px solid var(--ink);
}

.border-btn[data-border="right"] .bx {
  border-right: 2px solid var(--ink);
}

.border-color input[type="color"] {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: none;
  cursor: pointer;
}

/* ---- Ribbon (tabbed toolbar) ----------------------------------------------- */
/* Canvas/grid ribbon (redesign): full-bleed and flat — no floating rounded
   card. It is one horizontal band of the shell grid, separated from the bar
   above and the workarea below by single hairlines. */
.ribbon {
  background: var(--surface);
  margin: 0;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  overflow: hidden;
  z-index: 2;
}

.ribbon-tabs {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: var(--h-tab);
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
}

/* Compact ↔ ribbon view toggle: collapses the whole band to just the tab strip
   (Word's "collapse the ribbon"), giving the document more room. */
.ribbon-view-toggle {
  margin-left: auto;
  align-self: center;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 26px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.ribbon-view-toggle:hover {
  background: var(--bg-2);
  color: var(--ink);
}

.ribbon-view-toggle .ms {
  font-size: 20px;
}

.ribbon.is-collapsed {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.ribbon.is-collapsed .ribbon-tabs {
  border-bottom: none;
}

.ribbon.is-collapsed .ribbon-body {
  display: none;
}

.ribbon-tab {
  height: var(--h-tab);
  padding: 0 14px;
  border: none;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-ribbon-tab);
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.ribbon-tab:hover:not(:disabled) {
  color: var(--ink);
}

.ribbon-tab[aria-selected="true"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.ribbon-tab:disabled {
  opacity: 0.4;
  cursor: default;
}

.ribbon-body {
  position: relative;
}

.ribbon-panel {
  display: flex;
  align-items: stretch;
  /* Redesign: the captioned band sits on a quieter surface than the white tab
     strip above it, so the divider-separated groups read as one grouped band. */
  background: var(--surface-alt);
  padding: 6px 10px 5px;
  /* No horizontal scrollbar ever (docs/64): a single no-wrap row whose
     overflowing groups collapse into the "⋯" menu instead. */
  overflow: hidden;
  min-width: 0;
}

.ribbon-panel[hidden] {
  display: none;
}

.rgroup {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  padding: 0 2px;
  border-right: 1px solid var(--line);
  flex: 0 0 auto;
}

.rgroup:last-child {
  border-right: none;
}

.rgroup-ctl {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 32px;
}

.rgroup-mini-divider {
  width: 1px;
  height: 22px;
  margin-inline: 2px;
  background: var(--line);
}

.table-ribbon .fmt {
  position: relative;
}

.table-ribbon .table-danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--error) 12%, transparent);
  color: var(--error);
}

.table-command-badge {
  position: absolute;
  right: 2px;
  bottom: 1px;
  display: grid;
  min-width: 10px;
  height: 10px;
  place-items: center;
  border-radius: 3px;
  background: var(--surface);
  color: var(--muted);
  font-size: 7px;
  font-weight: 750;
  line-height: 1;
}

.table-context-group {
  min-width: 132px;
  max-width: 190px;
  justify-content: center;
  text-align: left;
}

.table-context-group .rgroup-hint {
  text-align: left;
}

/* Captioned ribbon-group bands (redesign): a small, letter-spaced, uppercase
   caption sits under each divider-separated group — FONT / PARAGRAPH / STYLES /
   EDITING. text-transform is presentation only, so the DOM text (e.g. "Font")
   is unchanged for a11y and tests. */
.rgroup-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}

.rgroup-note {
  justify-content: center;
}

/* --- Home band composition (template.png / docs/64) ----------------------- */

/* General accessible-only utility for controls or explanatory text that must
   remain in the accessibility tree without occupying visual layout. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* Two stacked control rows inside one group (Font, Paragraph). */
.fmt-rows {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fmt-row-line {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 26px;
}

/* Keep the last Font control visibly inside its group instead of touching the
   Paragraph divider. The slightly tighter row gap matches the Vellum source.
   (Text color + highlight are now real dropdown swatch pickers — see the
   "Formatting toolbar UX v2" block at the end of this file.) */
[data-group="font"] .fmt-row-line {
  gap: 2px;
}

/* Clipboard group: a big Paste button beside stacked Cut/Copy text rows. */
.clipboard-ctl {
  align-items: stretch;
  gap: 2px;
}

/* Clipboard remains visibly discoverable even before a caret/range makes an
   action available; disabled controls are muted, not visually erased. */
.clipboard-ctl .fmt:disabled {
  opacity: 0.82;
  color: var(--faint);
}

.undo-ctl {
  align-items: center;
}

.undo-stack {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.undo-stack .fmt {
  height: 30px;
}

.fmt.fmt-big {
  flex-direction: column;
  gap: 2px;
  width: auto;
  min-width: 44px;
  height: auto;
  padding: 5px 6px;
}

.editing-ctl {
  align-items: stretch;
  gap: 2px;
}

.fmt-big .ms {
  font-size: 22px;
}

.fmt-big-label {
  font-size: var(--fs-ribbon-caption);
  font-weight: 500;
  line-height: 1;
}

/* Styles follows the intended Vellum composition: one visible all-styles
   selector above four quick-preview cards. The selector, not horizontal
   scrolling, guarantees every imported/custom style is reachable. */
.rgroup-styles {
  min-width: 0;
  padding-inline: 3px;
}

.styles-ctl {
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  width: 202px;
  max-width: 202px;
  min-width: 0;
}

.style-select,
.style-select select {
  width: 100%;
  max-width: none;
}

.style-select select {
  height: 30px;
}

/* Stronger than the later generic `.ctl select { max-width: 150px }`: the
   style selector must cover the same complete width as its preview row. */
.styles-ctl .style-select select {
  width: 100%;
  max-width: none;
}

.styles-gallery {
  display: flex;
  align-items: stretch;
  gap: 2px;
  width: 100%;
  overflow: hidden;
  padding: 0;
}

.style-card {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  height: 30px;
  padding: 3px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.style-card:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.style-card[aria-selected="true"] {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* Keyboard focus ring for arrow-key roving between cards (listbox model). */
.style-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.style-card:disabled {
  opacity: 0.5;
  cursor: default;
}

.style-card-name {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--fs-small);
  font-weight: 450;
}

/* Fallback look for the well-known built-in styles. The gallery now draws each
   card IN its own style from the engine's resolved `stylePreview` (font
   family/size/weight/slant/underline/color, applied inline in `main.js`), which
   overrides these class rules. These remain as a graceful degrade for when the
   preview is unavailable (e.g. before a document's engine is ready). */
.style-card-title .style-card-name { font-size: 15px; font-weight: 700; }
.style-card-heading-1 .style-card-name { font-size: 14px; font-weight: 700; }
.style-card-heading-2 .style-card-name { font-size: 13px; font-weight: 650; }
.style-card-heading-3 .style-card-name { font-size: 12.5px; font-weight: 600; }
.style-card-subtitle .style-card-name { font-size: 12px; font-weight: 500; color: var(--muted); }
.style-card-normal .style-card-name { font-size: 12px; font-weight: 450; }

/* "More styles" ▾ affordance: a compact expander pinned to the end of the inline
   strip. It keeps its natural width (the cards flex to fill the rest) so the
   gallery still spans the same width as the style dropdown above it. */
.styles-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 26px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

.styles-more-btn[hidden] {
  display: none;
}

.styles-more-btn:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.styles-more-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.styles-more-btn .ms {
  font-size: 18px;
  line-height: 1;
}

/* The full Styles gallery revealed by the ▾ button: a scrollable, theme-aware
   popover holding a live-preview card for every paragraph style. */
.styles-more-panel {
  position: fixed;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 4px;
  width: min(360px, calc(100vw - 16px));
  max-height: min(360px, calc(100vh - 160px));
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-popover);
  background: var(--surface);
  box-shadow: var(--shadow-popover);
}

.styles-more-panel[hidden] {
  display: none;
}

.styles-more-panel .style-card {
  flex: none;
  height: 34px;
}

/* Overflow "⋯" button + menu — collects groups that don't fit the width. */
.ribbon-overflow-btn {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 3;
}

.ribbon-overflow-btn[hidden] {
  display: none;
}

.ribbon-overflow-menu {
  position: fixed;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: min(560px, calc(100vw - 12px));
  max-height: calc(100vh - 132px);
  overflow: auto;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-popover);
  background: var(--surface);
  box-shadow: var(--shadow-popover);
}

.ribbon-overflow-menu[hidden] {
  display: none;
}

/* A relocated group becomes a full-width, internally wrapping command row.
   This avoids carrying a desktop-wide Font/Table group unchanged into a 360px
   popover. */
.ribbon-overflow-menu .rgroup {
  align-items: stretch;
  width: 100%;
  padding: 6px 0 8px;
  border-right: none;
  border-bottom: 1px solid var(--line);
  gap: 6px;
}

.ribbon-overflow-menu .rgroup:last-child {
  border-bottom: none;
}

.ribbon-overflow-menu .rgroup-label {
  order: -1;
  text-align: left;
  color: var(--muted);
  font-weight: 600;
}

.ribbon-overflow-menu .rgroup-ctl,
.ribbon-overflow-menu .fmt-row-line {
  flex-wrap: wrap;
}

.ribbon-overflow-menu .styles-ctl,
.ribbon-overflow-menu .styles-gallery {
  width: 100%;
  max-width: none;
}

/* Delayed hover/focus tooltip for icon-only ribbon controls (docs/64 §3). */
.ribbon-tooltip {
  position: fixed;
  z-index: 1000;
  max-width: 240px;
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--surface);
  font-size: var(--fs-small);
  line-height: 1.35;
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 90ms ease, transform 90ms ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.24);
}

.ribbon-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ribbon-tooltip kbd {
  display: inline-block;
  margin-left: 4px;
  padding: 0 4px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--surface) 22%, transparent);
  font-family: inherit;
  font-size: var(--fs-ribbon-caption);
}

.rgroup-hint {
  max-width: 190px;
  font-size: var(--fs-small);
  color: var(--faint);
  line-height: 1.4;
  text-align: center;
}

/* Select-based controls */
.ctl {
  display: inline-flex;
  align-items: center;
}

.ctl select,
.ctl > input[type="number"] {
  height: var(--h-control);
  padding: 0 26px 0 9px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236a7078'><path d='M7 10l5 5 5-5z'/></svg>")
    no-repeat right 5px center;
  background-size: 16px;
  color: var(--ink);
  appearance: none;
  cursor: pointer;
  max-width: 150px;
}

.ctl > input[type="number"] {
  padding-right: 4px;
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: text;
}

.ctl select:hover,
.ctl > input[type="number"]:hover {
  border-color: var(--muted);
}

.ctl.size select,
.ctl.size > input {
  width: 64px;
  min-width: 62px;
}

.ctl select:disabled,
.ctl > input:disabled {
  opacity: 0.4;
  cursor: default;
}

.ctl.is-mixed {
  outline: 1px dashed var(--muted);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Text-color swatch */
.ctl.swatch {
  gap: 2px;
  height: var(--h-control);
  padding: 0 4px 0 7px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
}

.ctl.swatch span {
  font-weight: 700;
  font-size: 14px;
}

.ctl.swatch input[type="color"] {
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.ctl.swatch input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.ctl.swatch input[type="color"]::-webkit-color-swatch {
  border: 1px solid var(--line-strong);
  border-radius: 4px;
}

/* Icon toggle buttons */
.fmt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--h-control);
  height: var(--h-control);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  transition: background 0.11s, color 0.11s, border-color 0.11s;
}

.fmt .ms {
  font-size: var(--icon-control);
  display: block;
}

.format-glyph {
  display: block;
  font-size: 15px;
  line-height: 1;
}

.bold-glyph {
  font-weight: 700;
}

.italic-glyph {
  font-family: Georgia, serif;
  font-style: italic;
}

.underline-glyph {
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.strike-glyph {
  font-size: 14px;
  text-decoration: line-through;
}

.fmt:hover:not(:disabled) {
  background: var(--bg-2);
}

.fmt[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}

.fmt[aria-pressed="mixed"] {
  border-color: var(--accent-line);
  color: var(--accent);
  background: linear-gradient(
    135deg,
    var(--accent-soft) 0 45%,
    transparent 45% 55%,
    var(--accent-soft) 55% 100%
  );
}

.fmt:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Format painter: armed uses the shared accent-soft pressed state above; the
   locked (sticky) state fills the brush so "one-shot" vs "keep painting" reads
   at a glance, with a live pulse to signal it stays on. */
.fmt.is-sticky[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  animation: format-painter-pulse 1.6s ease-in-out infinite;
}

@keyframes format-painter-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 var(--accent-soft);
  }
  50% {
    box-shadow: 0 0 0 3px var(--accent-soft);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fmt.is-sticky[aria-pressed="true"] {
    animation: none;
  }
}

/* Paintbrush cursor affordance while armed: shown over the document pages so the
   pointer signals it will paint formatting, not place a caret. The 24px brush
   points to its lower-left tip (hotspot 3 21); `copy` is the graceful fallback. */
body.is-format-painting .page-wrap,
body.is-format-painting .page-wrap * {
  cursor:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 21c1.6.4 3.4-.2 4.2-1.6.5-.9.3-2-.4-2.7-.7-.7-1.8-.9-2.7-.4C2.7 17 2.4 19.2 3 21z" fill="%23e2622a" stroke="%23000" stroke-width="1.1" stroke-linejoin="round"/><path d="M8.5 15.5 18 6a2 2 0 0 0-2.8-2.8L6 12.6z" fill="%23fff" stroke="%23000" stroke-width="1.1" stroke-linejoin="round"/></svg>')
      3 21,
    copy;
}

/* ---- Viewport & pages ------------------------------------------------------ */
/* ---- Work area: nav rail · side panels · document viewport ----------------- */
.workarea {
  flex: 1;
  display: flex;
  min-height: 0;
  /* Canvas/grid: the rail + viewport sit flush under the ribbon's bottom
     hairline — no floating gap now that the ribbon is full-bleed. */
  margin-top: 0;
}

.rail {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 7px;
  background: var(--bg-2);
  border-right: 1px solid var(--line);
}

/* A text caption under the icon (doc 69 §1.2/§1.4.4): every rail destination
   in the reference has a visible label; OpenDoc's had icon+tooltip only. */
.rail-btn {
  width: 40px;
  height: var(--h-rail-control);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.rail-btn .ms {
  font-size: var(--icon-rail);
}

.rail-btn > span:not(.ms) {
  font-size: var(--fs-micro);
  font-weight: 600;
}

.rail-btn:hover:not(:disabled) {
  background: var(--bg-2);
  color: var(--ink);
}

.rail-btn[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent);
}

.rail-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.side-panel {
  flex: 0 0 252px;
  width: 252px;
  min-width: 0;
  max-width: min(252px, calc(100vw - 52px));
  /* Inset floating panel: even breathing room on all sides (the rail stays
     flush under the ribbon; the panels float within the workarea). */
  margin: 8px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-popover);
  box-shadow: var(--shadow-sm);
}

.side-panel[hidden] {
  display: none;
}

.object-inspector {
  position: fixed;
  z-index: 65;
  top: 86px;
  right: 8px;
  bottom: 8px;
  width: 280px;
  max-width: min(280px, calc(100vw - 16px));
  margin: 0;
}

.property-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

/* Symbols and emoji are persistent document-side tools, not blocking dialogs.
   Keep the page visible while repeated glyph insertions happen. */
.glyph-panel {
  /* Contextual tools belong in the right-hand inspector column, never between
     the navigation rail and the document canvas. */
  order: 3;
  flex-basis: 360px;
  width: 360px;
  max-width: min(360px, calc(100vw - 52px));
}

.glyph-panel .panel-body.glyph-body {
  padding: 10px;
}

/* The legacy left-side review inventory is retained only as compatibility
   wiring. The active review surface is the dedicated right column below. */
#reviewPanel { display: none !important; }

.review-popover {
  position: fixed;
  z-index: 80;
  width: min(320px, calc(100vw - 24px));
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-popover);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}
.review-popover-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.review-popover-meta { color: var(--muted); font-size: 11px; }
.review-popover-body { margin: 8px 0; font-size: var(--fs-small); line-height: 1.45; white-space: pre-wrap; }
.review-popover-actions { display: flex; flex-wrap: wrap; gap: 6px; }
/* Inline accept/reject card (review UX v2 Q2): a compact popover surfaced on
   hover/press of a tracked-change marker on the canvas — author, one-line
   summary, and ✔ Accept / ✗ Reject. Reuses the popover surface tokens so it
   matches the rest of the editor chrome in light and dark themes. */
.review-inline-card {
  position: fixed;
  z-index: 85;
  width: max-content;
  max-width: min(340px, calc(100vw - 24px));
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-popover);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  outline: none;
}
.review-inline-card:focus-visible { box-shadow: var(--shadow-lg), 0 0 0 2px var(--accent); }
.review-inline-head { display: flex; align-items: center; gap: 8px; }
.review-inline-dot { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: var(--accent-strong); }
.review-inline-who { display: grid; gap: 1px; min-width: 0; }
.review-inline-who strong { font-size: var(--fs-small); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-inline-who small { color: var(--muted); font-size: var(--fs-caption); }
.review-inline-body {
  margin: 7px 0 9px;
  font-size: var(--fs-small);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.review-inline-bar { display: flex; gap: 6px; }
.review-inline-bar button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 11px 4px 9px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-caption);
  font-weight: 600;
  cursor: pointer;
}
.review-inline-bar button .ms { font-size: 16px; }
.review-inline-bar button:hover { background: color-mix(in srgb, #188038 12%, var(--surface)); border-color: #188038; color: #137333; }
.review-inline-bar button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.review-inline-bar button.danger:hover { background: color-mix(in srgb, #d93025 12%, var(--surface)); border-color: #d93025; color: #b3261e; }
.review-mode-segmented { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--bg-2); }
.review-mode-seg { display: inline-flex; align-items: center; gap: 4px; border: 1px solid transparent; border-radius: 999px; padding: 4px 8px; background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-ribbon-caption); font-weight: 600; cursor: pointer; white-space: nowrap; }
.review-mode-seg .ms { font-size: var(--fs-medium); }
.review-mode-seg[aria-pressed="true"] { color: #137333; border-color: #188038; background: color-mix(in srgb, #188038 12%, var(--surface)); }
.review-mode-seg[data-review-mode="viewing"][aria-pressed="true"] { color: var(--ink); border-color: var(--accent); background: var(--accent-soft); }
.review-mode-seg:disabled { opacity: 0.45; cursor: default; }
.review-mode-seg:not(:disabled):not([aria-pressed="true"]):hover { background: var(--accent-soft); color: var(--ink); }
.viewing-banner { border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.viewing-banner .ms { color: var(--accent); }
.suggesting-banner {
  min-height: 32px;
  margin: 6px 8px 0;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, #f9ab00 42%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, #fbbc04 16%, var(--surface));
  color: var(--ink);
  font-size: var(--fs-small);
}
.suggesting-banner[hidden] { display: none; }
.suggesting-banner .ms { color: #b06000; font-size: 17px; }
.suggesting-banner button {
  border: 0;
  padding: 3px 6px;
  border-radius: 5px;
  background: transparent;
  color: var(--accent-strong);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.suggesting-banner button:hover { background: var(--accent-soft); }

/* One scroll owner (Google Docs model): the comment column is an
   absolutely-positioned layer INSIDE `.viewport`'s scroll context, not a
   sibling `overflow:auto` container. It never scrolls on its own, so cards —
   positioned in document-scroll coordinates — ride natively with their anchored
   text (no JS scroll-sync, no card drift under momentum) and the single
   scrollbar sits at `.viewport`'s far-right edge, past the comments. */
.review-sidebar {
  position: absolute;
  top: 0;
  right: 12px;
  width: 340px;
  min-width: 340px;
  color: var(--ink);
  background: transparent;
}
.review-sidebar[hidden] { display: none; }
/* Fixed workflow chrome above the (virtualized, document-scroll-positioned) card
   area (REVIEW-GAP-018/019). The card body rides the canvas scroll, so the header
   is `sticky` to stay visible; `.review-sidebar-body`'s negative margin (set from
   JS to the header's height) cancels the header's flow offset so cards stay
   pixel-aligned to their canvas anchors. */
.review-sidebar-header {
  position: sticky;
  top: 8px;
  z-index: 6;
  margin: 8px 0 6px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  display: grid;
  gap: 8px;
}
.review-sidebar-headrow { display: flex; align-items: center; gap: 8px; }
.review-sidebar-title { flex: 1; font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.review-sidebar-nav { display: flex; gap: 4px; }
.review-nav-button {
  width: 26px; height: 26px; padding: 0;
  display: inline-grid; place-items: center;
  border: 1px solid var(--line); border-radius: 6px;
  background: transparent; color: var(--ink); cursor: pointer;
}
.review-nav-button:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); }
.review-nav-button:disabled { opacity: 0.4; cursor: default; }
.review-nav-button .ms { font-size: 18px; }
.review-sidebar-controlrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.review-sidebar-header .review-bulk-actions { padding: 0; margin: 0; }
.review-sidebar-header .review-bulk-actions[hidden] { display: none; }
.review-sidebar-header .review-card-action { margin-top: 0; }
.review-sidebar-body {
  position: relative;
  width: 100%;
}
.review-sidebar-empty {
  margin-top: 12px;
  padding: 24px 16px;
  border-radius: 10px;
  color: var(--muted);
  background: var(--surface);
  text-align: center;
  font-size: var(--fs-small);
  line-height: 1.5;
  box-shadow: var(--shadow-sm);
}
.review-margin-card {
  position: absolute;
  left: 0;
  right: 0;
  width: auto;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.2), 0 2px 6px rgba(60, 64, 67, 0.08);
  cursor: pointer;
  transition: top 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
.review-margin-card.expanded,
.review-margin-card.review-margin-composer {
  padding: 10px 12px;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
}
.review-margin-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.review-margin-card.resolved { opacity: 0.72; }
.review-margin-card-head { display: flex; align-items: flex-start; gap: 9px; }
/* Per-author avatar chip (docs/81 REVIEW-GAP-015): filled with the author's
 * stable palette color (`--review-author-color`, set per card) with white text
 * for legible contrast in light and dark themes. Falls back to the theme accent
 * when a card sets no author color. */
.review-margin-avatar { --review-author-color: var(--accent-strong); width: 26px; height: 26px; flex: 0 0 26px; display: grid; place-items: center; border-radius: 50%; background: var(--review-author-color); color: #fff; font-size: 11px; font-weight: 700; }
.review-margin-title { min-width: 0; display: grid; gap: 1px; }
.review-margin-title strong { font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-margin-title small { color: var(--muted); font-size: var(--fs-caption); text-transform: capitalize; }
.review-margin-card p { margin: 8px 0; font-size: var(--fs-small); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.review-margin-revision p { padding-left: 8px; border-left: 3px solid var(--accent); }
.review-margin-insertion p { border-left-color: #188038; color: #137333; }
.review-margin-deletion p { border-left-color: #d93025; color: #b3261e; text-decoration: line-through; }
.review-margin-replacement p { border-left-color: #1a73e8; }
.review-margin-formatting p { border-left-color: #9334e6; }
.review-margin-move p { border-left-color: #0b8043; }
.review-move-path {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  margin: 4px 0 9px 34px;
  color: var(--muted);
}
.review-move-end {
  display: grid;
  gap: 1px;
  min-width: 0;
  text-align: left;
  padding: 3px 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
.review-move-end:hover { background: var(--bg-2); }
.review-move-end:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.review-move-end[disabled] { cursor: default; opacity: 0.6; }
.review-move-end b { color: var(--ink); font-size: var(--fs-caption); }
.review-move-end span { font-size: var(--fs-micro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.review-move-path > .ms { color: #0b8043; font-size: var(--fs-medium); }
.review-margin-revision:has(.review-margin-title small) { border-color: var(--line-strong); }
.review-margin-card-actions { display: flex; gap: 5px; flex-wrap: wrap; }
.review-margin-card:not(.expanded) .review-margin-card-actions,
.review-margin-card:not(.expanded) .review-margin-replies,
.review-margin-card:not(.expanded) .review-reply-composer { display: none; }
.review-margin-replies { display: grid; gap: 8px; margin: 10px -2px 9px 34px; padding-left: 10px; border-left: 2px solid var(--line); }
.review-margin-reply { display: grid; gap: 4px; }
.review-margin-reply.resolved { opacity: 0.65; }
.review-margin-reply-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.review-margin-reply-head strong { font-size: 11px; }
.review-margin-reply-head small { color: var(--muted); font-size: var(--fs-micro); }
.review-margin-reply p { margin: 0; padding: 0; border: 0; color: var(--ink); font-size: 11px; text-decoration: none; }
.review-margin-action { border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; background: transparent; color: var(--ink); font: inherit; font-size: var(--fs-caption); cursor: pointer; }
.review-margin-action:hover { background: var(--accent-soft); border-color: var(--accent); }
.review-margin-action.danger { color: var(--danger, #b3261e); }
/* REVIEW-GAP-011: per-reply edit/delete controls; REVIEW-GAP-012: related-comment list. */
.review-margin-reply-actions { display: flex; gap: 6px; margin-top: 2px; }
.review-margin-reply-edit { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; font: inherit; font-size: 11px; color: var(--ink); background: var(--surface, transparent); }
.review-margin-revision-comments { display: grid; gap: 6px; margin: 9px -2px 2px 34px; padding-left: 10px; border-left: 2px solid var(--line); }
.review-margin-revision-comments > small { color: var(--muted); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.04em; }
.review-margin-revision-comment { display: grid; gap: 3px; }
.review-margin-revision-comment strong { font-size: 11px; }
.review-margin-revision-comment p { margin: 0; color: var(--ink); font-size: 11px; }
.review-margin-icon-action {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.review-margin-icon-action:hover { background: var(--bg-2); color: var(--ink); }
.review-margin-title { flex: 1; }
.review-margin-body {
  display: block;
  max-height: 60px;
  overflow: hidden;
}
.review-margin-card.expanded .review-margin-body { max-height: none; }
.review-reply-composer,
.review-margin-composer {
  display: grid;
  gap: 8px;
}
.review-reply-composer textarea,
.review-margin-composer textarea {
  width: 100%;
  min-height: 34px;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  outline: none;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-small);
  line-height: 1.45;
  /* Height is driven by JS auto-grow (Q5); no manual resize handle, no
     inner scrollbar until the cap is reached. */
  resize: none;
  overflow: hidden;
}
.review-reply-composer textarea:focus,
.review-margin-composer textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.review-margin-composer textarea { min-height: 60px; }
.review-composer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

@media (max-width: 860px) {
  .review-sidebar {
    right: 8px;
    width: 300px;
    min-width: 300px;
  }
  .viewport.has-review-sidebar .pages {
    padding-right: 316px; /* 300 column + 8 gutter + 8 breathing room */
  }
}
.panel-head {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  height: var(--h-rail-control);
  padding: 0 8px 0 14px;
  border-bottom: 1px solid var(--line);
}

.panel-title {
  font-weight: 650;
  font-size: var(--fs-medium);
}

.panel-close {
  width: var(--h-control);
  height: var(--h-control);
  display: grid;
  place-items: center;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.panel-close .ms {
  font-size: var(--icon-compact);
}

.panel-close:hover {
  background: var(--bg-2);
  color: var(--ink);
}

.panel-body {
  flex: 1;
  min-width: 0;
  overflow: auto;
  padding: 6px;
}

.side-panel.table-properties-panel,
.side-panel.properties-panel {
  flex-basis: 320px;
  width: 320px;
  max-width: min(320px, calc(100vw - 52px));
}

.table-properties-head,
.properties-panel-head {
  height: auto;
  min-height: 58px;
  padding: 9px 8px 9px 12px;
}

.table-panel-heading,
.properties-panel-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.table-panel-heading > span:last-child,
.properties-panel-heading > span:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.table-panel-icon,
.properties-panel-icon {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--icon-control);
}

.table-panel-heading small,
.properties-panel-heading small {
  overflow: hidden;
  color: var(--muted);
  font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums;
  font-weight: 450;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-properties-body,
.properties-panel-body {
  padding: 13px 14px 16px;
}

.table-properties-intro,
.properties-panel-intro {
  margin: 0 0 15px;
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.45;
}

.properties-panel-grid,
.table-properties-grid {
  display: grid;
  gap: 14px;
}

.property-section,
.table-property-section {
  display: grid;
  gap: 11px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.property-section legend,
.table-property-section legend {
  margin: 0;
  padding: 0 5px;
}

.property-color-row,
.property-border-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.paragraph-align {
  width: 100%;
}

.paragraph-align button {
  flex: 1;
}

.mixed-note {
  color: var(--muted);
  font-size: var(--fs-caption);
  font-style: italic;
}

/* Outline: a clickable heading tree, indented by level. */
.outline-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 5px 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.outline-item:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.outline-item.is-active {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  font-weight: 650;
}

.outline-item.lvl-1 {
  font-weight: 600;
}

.outline-item.lvl-2 {
  padding-left: 20px;
}

.outline-item.lvl-3 {
  padding-left: 32px;
  color: var(--muted);
}

.outline-item.lvl-4,
.outline-item.lvl-5,
.outline-item.lvl-6 {
  padding-left: 44px;
  color: var(--muted);
}

.outline-empty {
  padding: 14px 10px;
  color: var(--faint);
  font-size: var(--fs-small);
  line-height: 1.5;
}

/* One column of page thumbnails; reserve the scrollbar gutter so it never
   overlaps a thumbnail's corner. */
.pages-grid { display: grid; grid-template-columns: 1fr; gap: 12px; align-content: start; scrollbar-gutter: stable; justify-items: center; }
/* Compact thumbnails: a single centered column, each card capped below the
   panel width so it reads as a small page preview with breathing room. */
.page-thumb { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; max-width: 176px; padding: 0; border: none; background: none; cursor: pointer; }
.page-thumb-box { position: relative; width: 100%; display: block; overflow: hidden; background: var(--paper, #fff); border: 1px solid var(--line-strong); border-radius: 3px; box-shadow: var(--shadow-sm); }
.page-thumb-canvas { display: block; width: 100%; height: auto; }
.page-thumb-box.is-empty { aspect-ratio: 51 / 66; }
.page-thumb:hover .page-thumb-box { border-color: var(--muted); }
.page-thumb.is-active .page-thumb-box { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.page-thumb-num { font: 500 10px/1 "JetBrains Mono", ui-monospace, monospace; color: var(--muted); }
.page-thumb.is-active .page-thumb-num { color: var(--accent-strong); }

.review-list { display: grid; gap: 10px; align-content: start; }
.review-composer { display: grid; gap: 6px; padding: 10px; border-bottom: 1px solid var(--line); }
.review-composer label { font-size: var(--fs-small); font-weight: 600; }
.review-composer textarea { width: 100%; box-sizing: border-box; resize: vertical; border: 1px solid var(--line); border-radius: 6px; padding: 7px; font: inherit; font-size: var(--fs-small); background: var(--surface); color: var(--ink); }
.review-composer-actions { display: flex; justify-content: flex-end; gap: 6px; }
.review-mode { display: flex; align-items: center; gap: 4px; padding: 8px 10px 0; font-size: 11px; color: var(--muted); }
.review-mode-button { border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px; background: transparent; color: var(--muted); font: inherit; cursor: pointer; }
.review-mode-button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
.review-filters { display: flex; gap: 4px; padding: 8px 10px 0; }
.review-filter { border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px; background: transparent; color: var(--muted); font: inherit; font-size: 11px; cursor: pointer; }
.review-filter[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
.review-empty, .review-readonly-note { color: var(--muted); font-size: var(--fs-small); line-height: 1.5; }
.review-card { border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; background: var(--surface); }
.review-card strong, .review-card small { display: block; }
.review-card small { color: var(--muted); font-size: 11px; margin-top: 2px; }
.review-card p { margin: 7px 0 0; color: var(--ink); font-size: var(--fs-small); line-height: 1.45; white-space: pre-wrap; }
.review-card-action { margin-top: 8px; border: 1px solid var(--line); border-radius: 5px; padding: 3px 7px; background: transparent; color: var(--ink); font: inherit; font-size: 11px; cursor: pointer; }
.review-reply { margin-left: 14px; border-left: 3px solid var(--accent); }
.review-bulk-actions { display: flex; gap: 6px; padding: 8px 10px 0; }
.review-revision-actions { display: flex; gap: 6px; }

.viewport {
  flex: 1;
  min-width: 0;
  overflow: auto;
  position: relative;
  padding: 12px 0 48px;
  background: var(--bg);
}

.viewport.dragging::after {
  content: "Drop to open";
  position: fixed;
  inset: 116px 16px 16px;
  border: 2px dashed var(--accent);
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  pointer-events: none;
  z-index: 5;
}

.pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

/* When the comment column is shown, reserve its width in the page stack's right
   margin so pages stay centered-ish in the remaining space and the comments sit
   in the reserved margin — the same spatial layout as before, now in ONE scroll
   context. (Toggled by JS: `#viewport.has-review-sidebar`.) */
.viewport.has-review-sidebar .pages {
  padding-right: 364px; /* 340 comment column + 12 gutter + 12 breathing room */
}

.pages:focus {
  outline: none;
}

/* ---- Horizontal ruler (Word/Docs style: a subtle strip with a lighter content
   span between the page margins, hairline ticks, and pentagon indent markers) - */
.ruler {
  position: sticky;
  top: 0;
  z-index: 4;
  height: 24px;
  /* Cancel most of the .pages flex gap (22px) so the ruler hugs the page top. */
  margin-bottom: -16px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  user-select: none;
  /* The strip itself never intercepts a page click; only the small indent
     markers below opt back in (pointer-events: auto) so they can be dragged. */
  pointer-events: none;
}

.ruler[hidden] {
  display: none;
}

.ruler-track {
  position: relative;
  height: 100%;
}

/* The content span between the page margins reads a shade lighter than the
   margin zones — the same relationship in light and dark. */
.ruler-content {
  position: absolute;
  top: 3px;
  bottom: 3px;
  background: var(--surface);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--line);
  /* Click the content strip to drop a tab stop at that position. */
  pointer-events: auto;
  cursor: copy;
}

/* Word-style tab-type box at the ruler's left; shows/cycles the next tab type. */
.tab-corner {
  position: absolute;
  left: 0;
  top: 3px;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--surface);
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
}

.tab-corner:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* A tab stop glyph sitting on the lower edge of the ruler. */
.tab-glyph {
  position: absolute;
  bottom: 1px;
  transform: translateX(-50%);
  padding: 0 1px;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
  cursor: grab;
  pointer-events: auto;
}

.tab-glyph:hover {
  filter: brightness(1.15);
}

.ruler-tick {
  position: absolute;
  top: 4px;
  width: 1px;
  background: var(--muted);
}

.ruler-tick.major {
  height: 6px;
  opacity: 0.7;
}

.ruler-tick.minor {
  height: 3px;
  opacity: 0.4;
}

.ruler-num {
  position: absolute;
  top: 12px;
  font-size: var(--fs-micro);
  line-height: 1;
  color: var(--muted);
  transform: translateX(-50%);
  font-variant-numeric: tabular-nums;
}

/* Pentagon indent markers (a rectangle body + a pointed tip, like Word/Docs).
   First-line points down from the top; left/right point up from the bottom. */
.ruler-marker {
  position: absolute;
  width: 9px;
  height: 11px;
  transform: translateX(-50%);
  background: var(--accent);
  cursor: ew-resize;
  /* The only interactive part of the ruler — grab to drag the paragraph indent. */
  pointer-events: auto;
  touch-action: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.28));
}

/* Widen the grab target horizontally only, so it never reaches down into the
   page area below the ruler. */
.ruler-marker::after {
  content: "";
  position: absolute;
  inset: -2px -6px;
}

.ruler-marker.down {
  top: 2px;
  clip-path: polygon(0 0, 100% 0, 100% 52%, 50% 100%, 0 52%);
}

.ruler-marker.up {
  bottom: 2px;
  clip-path: polygon(50% 0, 100% 48%, 100% 100%, 0 100%, 0 48%);
}

.ruler-marker:hover,
.ruler-marker.dragging {
  filter: brightness(1.12) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.28));
}

/* The wrap carries the page-box geometry (its width/height are set in JS from
   the page size in twips) and the sheet chrome, so it holds its space and looks
   like a blank page even when its canvas is virtualized away off-screen. The
   live raster canvas, when mounted, fills it exactly. */
.page-wrap {
  position: relative;
  background: #fff;
  box-shadow: var(--shadow-page);
  border-radius: 3px;
  max-width: 96vw;
  line-height: 0;
}

.page {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  cursor: text;
}

.page.link-hover {
  cursor: pointer;
}

/* Selection / caret layer over the (white) canvas — fixed light-surface colors. */
.overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.overlay .highlight {
  position: absolute;
  background: color-mix(in srgb, var(--accent) 24%, transparent);
  border-radius: 1px;
}

/* Comment range marker: interaction-only highlight over the fixed canvas.
 * `--review-author-color` (set per marker, docs/81 REVIEW-GAP-015) tints it to
 * the comment author's stable palette color; the amber default keeps a comment
 * recognizable when no author is attributed. */
.overlay .review-comment-marker {
  --review-author-color: #c58b00;
  position: absolute;
  background: color-mix(in srgb, var(--review-author-color) 22%, transparent);
  border-bottom: 2px solid color-mix(in srgb, var(--review-author-color) 75%, transparent);
  pointer-events: auto;
  cursor: pointer;
}
.overlay .review-comment-marker-active {
  background: color-mix(in srgb, var(--review-author-color) 40%, transparent);
  border-bottom-color: var(--review-author-color);
}
/* Revision markers carry `--review-author-color` per author. `pointer-events:
 * auto` lets the native attribution `title` tooltip appear on hover; the
 * pointerdown still bubbles to the page's own hit-testing (the same pattern the
 * comment marker uses), so caret placement inside a tracked change is unaffected
 * (REVIEW-GAP-005). Insertion = author-colored underline; deletion = author-
 * colored tint + underline, preserving the fill-vs-underline distinction. */
.overlay .review-revision-marker { --review-author-color: #188038; position: absolute; pointer-events: auto; }
.overlay .review-insertion-marker { border-bottom: 2px solid color-mix(in srgb, var(--review-author-color) 85%, transparent); }
.overlay .review-deletion-marker { background: color-mix(in srgb, var(--review-author-color) 18%, transparent); border-bottom: 2px solid color-mix(in srgb, var(--review-author-color) 85%, transparent); }
.overlay .review-revision-marker-active { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 70%, transparent); }

.overlay .table-cell-selection {
  position: absolute;
  border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* Object selection chrome (docs/85 §3.3): an outline + eight resize/move grips,
 * drawn by us from the object's placed rect so they match the raster with zero
 * drift. The grips are display-only this slice; drag-resize is the next slice. */
.overlay .object-outline {
  position: absolute;
  border: 1.5px solid var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
  pointer-events: none;
}

.overlay .object-handle {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -5px 0 0 -5px; /* center on the handle point */
  background: var(--surface);
  border: 1.5px solid var(--accent);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(20, 22, 28, 0.3);
  pointer-events: auto; /* drag to resize (P1G-OBJ-GEOMETRY) */
  touch-action: none;
}
/* Directional resize cursors, keyed by handle index (NW,N,NE,E,SE,S,SW,W). */
.overlay .object-handle[data-handle="0"],
.overlay .object-handle[data-handle="4"] { cursor: nwse-resize; }
.overlay .object-handle[data-handle="2"],
.overlay .object-handle[data-handle="6"] { cursor: nesw-resize; }
.overlay .object-handle[data-handle="1"],
.overlay .object-handle[data-handle="5"] { cursor: ns-resize; }
.overlay .object-handle[data-handle="3"],
.overlay .object-handle[data-handle="7"] { cursor: ew-resize; }

/* Live drag-resize preview outline (host chrome; the op commits once on release). */
.overlay .object-resize-preview {
  position: absolute;
  border: 1.5px dashed var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  pointer-events: none;
}

/* Image crop chrome (Word/Docs-style direct manipulation). The removed margins
 * are dimmed by four strips; the kept rectangle stays clear over the canvas
 * image beneath, bordered, with black crop handles dragged to adjust it. */
.overlay .object-crop-dim {
  position: absolute;
  background: rgba(20, 22, 28, 0.55);
  pointer-events: none;
}
.overlay .object-crop-rect {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(20, 22, 28, 0.55);
  pointer-events: none;
}
.overlay .object-crop-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px; /* center on the handle point */
  background: #14161a;
  border: 2px solid #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  touch-action: none;
}
.overlay .object-crop-handle[data-handle="0"],
.overlay .object-crop-handle[data-handle="4"] { cursor: nwse-resize; }
.overlay .object-crop-handle[data-handle="2"],
.overlay .object-crop-handle[data-handle="6"] { cursor: nesw-resize; }
.overlay .object-crop-handle[data-handle="1"],
.overlay .object-crop-handle[data-handle="5"] { cursor: ns-resize; }
.overlay .object-crop-handle[data-handle="3"],
.overlay .object-crop-handle[data-handle="7"] { cursor: ew-resize; }
/* Active state for the Crop → Apply button while a crop session is live. */
.object-bar-btn.is-active {
  background: var(--accent);
  color: #fff;
}

/* Placeholder object context bar (docs/85 §4.1): names the selected object and
 * the actions the later slices will make real. */
.object-context-bar {
  position: fixed;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: var(--radius-popover);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-popover);
  font-size: var(--fs-small);
  pointer-events: auto;
}
.object-context-bar[hidden] { display: none; }
.object-context-bar strong { text-transform: capitalize; }
.object-context-bar small { color: var(--muted); }
.object-wrap-menu { display: flex; gap: 3px; }
.object-wrap-btn {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.object-wrap-btn:hover { background: var(--accent-soft); border-color: var(--accent); }
.object-wrap-btn[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
  font-weight: 650;
}

.object-bar-divider {
  width: 1px;
  align-self: stretch;
  margin: 2px 1px;
  background: var(--line);
}
.object-bar-actions { display: flex; gap: 3px; }
.object-bar-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 8px 3px 6px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.object-bar-btn .ms { font-size: 15px; }
.object-bar-btn:hover { background: var(--accent-soft); border-color: var(--accent); }
.object-bar-btn.danger { color: #b3261e; }
.object-bar-btn.danger:hover { background: rgba(179, 38, 30, 0.1); border-color: #b3261e; }

/* ---- Object alt-text / crop dialogs -------------------------------------- */
.object-dialog { width: min(440px, 100%); }
.object-dialog-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.object-dialog-body > label {
  color: var(--muted);
  font-size: var(--fs-small);
  font-weight: 600;
}
.object-dialog-body textarea {
  width: 100%;
  min-height: 84px;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 450;
  resize: vertical;
}
.object-dialog-body textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
#altTextNote.error {
  color: #b3261e;
  font-weight: 550;
}
@media (prefers-color-scheme: dark) {
  .object-bar-btn.danger { color: #f2b8b5; }
  #altTextNote.error,
  #cropNote.error { color: #f2b8b5; }
}

.overlay .table-col-resize-handle {
  position: absolute;
  width: 10px;
  margin-left: -5px;
  min-height: 18px;
  cursor: col-resize;
  pointer-events: auto;
  touch-action: none;
}

.overlay .table-col-resize-handle::after {
  content: "";
  position: absolute;
  inset: 0 4px;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  opacity: 0;
}

.overlay .table-col-resize-handle:hover::after {
  opacity: 1;
}

.overlay .table-col-resize-preview {
  position: absolute;
  width: 2px;
  margin-left: -1px;
  background: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--surface) 80%, transparent);
  pointer-events: none;
}

/* Checklist checkbox click target (docs/67 — checklist authoring). The checkbox
   glyph is painted in the page raster; this transparent, clickable overlay sits
   over it in the hanging gutter so a click toggles the item. A faint hover ring
   signals it is interactive without competing with the drawn glyph. */
.overlay .checklist-marker {
  position: absolute;
  cursor: pointer;
  pointer-events: auto;
  border-radius: 4px;
  touch-action: none;
}

.overlay .checklist-marker:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}

.overlay .caret {
  position: absolute;
  background: #111;
  animation: caret-blink 1.06s steps(1) infinite;
}

/* Live IME composition preview: shows in-progress text at the caret without
 * ever touching the document — compositionend still owns the real commit. */
.overlay .ime-preedit {
  position: absolute;
  display: flex;
  align-items: center;
  padding: 0 2px;
  color: #111;
  background: color-mix(in srgb, var(--accent) 10%, #fff);
  border-bottom: 2px solid var(--accent);
  white-space: pre;
  font: inherit;
}

/* Active table-cell outline: a soft accent ring so you see the cell you edit. */
.overlay .cell-outline {
  position: absolute;
  border: 1.5px solid var(--accent);
  border-radius: 2px;
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

@keyframes caret-blink {
  50% {
    opacity: 0;
  }
}

/* ---- Empty / drop state ----------------------------------------------------
 * Before a document is open, the ribbon/toolbar, nav rail, and footer status
 * bar have nothing to act on — showing them disabled around a small drop
 * card read as a broken app shell. `body:not(.doc-loaded)` hides that chrome
 * entirely; only the minimal top bar (brand + Open + Settings) remains, and
 * the drop card becomes the whole page. `openBytes` adds `.doc-loaded` to
 * `<body>` once a document is open, which reveals the chrome again. */
body:not(.doc-loaded) .ribbon,
body:not(.doc-loaded) .rail,
body:not(.doc-loaded) .footer,
body:not(.doc-loaded) .search-trigger,
body:not(.doc-loaded) #save,
body:not(.doc-loaded) .save-format,
body:not(.doc-loaded) .compatibility-status,
body:not(.doc-loaded) #propertiesBtn {
  display: none;
}

body:not(.doc-loaded) .drop {
  min-height: calc(100vh - var(--h-header));
}

.drop {
  display: grid;
  place-items: center;
  min-height: 60vh;
}

.drop[hidden] {
  display: none;
}

.drop-card {
  text-align: center;
  max-width: 420px;
  padding: 40px 32px;
}

body:not(.doc-loaded) .drop-card {
  max-width: 480px;
  padding: 56px 40px;
}

.drop-icon {
  color: var(--faint);
  font-size: 44px;
  margin-bottom: 8px;
}

body:not(.doc-loaded) .drop-icon {
  font-size: 56px;
}

.drop-title {
  font-size: 17px;
  font-weight: 600;
  margin: 4px 0 6px;
}

body:not(.doc-loaded) .drop-title {
  font-size: 20px;
}

.muted {
  color: var(--muted);
}

/* ---- Footer status bar ----------------------------------------------------- */
/* Word and Docs both treat the status bar as a fixed-height strip that never
   wraps, never scrolls and never gives the document a horizontal scrollbar: as
   the window narrows they *shed* the lowest-value indicators. We reproduce that
   with the `[data-status-priority]` ladder further down, so a new indicator
   inherits the behaviour by declaring a number instead of by earning its own
   breakpoint. The strip deliberately declares no `overflow` of its own: an
   earlier revision added `overflow-x: clip` here as a "backstop", but clip does
   not propagate to `documentElement.scrollWidth` — measured on this page, a
   400px overspill forced into `.foot-right` at a 720px viewport reports
   `.footer.scrollWidth` 861 while `documentElement.scrollWidth` stays 720. Since
   the shell-overflow spec asserts `documentElement` and `.bar`, that backstop
   silenced the very assertion that caught this bar overflowing in the first
   place. Getting the ladder wrong must stay visible, so the clip is gone and the
   spec now measures `.foot-right` against its own box as well. */
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--h-footer);
  padding: 0 12px 0 16px;
  font-size: var(--fs-small);
  color: var(--muted);
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  z-index: 2;
  min-width: 0;
}

.foot-left,
.foot-right {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* The two halves are deliberately asymmetric, mirroring `.document-chrome` /
   `.controls` in the header. The left half is informational text, so it is the
   one that yields and truncates; the right half is live controls (mode, page
   position, zoom), and a half-clipped button is worse than no truncation at
   all, so it keeps its intrinsic width. Without this split both halves shrank
   below min-content and their `white-space: nowrap` contents painted outside
   the footer box — shrinking the boxes moved the overflow, it never removed it. */
.foot-left {
  flex: 1 1 auto;
  overflow: hidden;
}

.foot-right {
  flex: 0 0 auto;
}

.footer-mode {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.footer-mode-label {
  color: var(--faint);
}

.footer .review-mode-segmented {
  padding: 1px;
}

.footer .review-mode-seg {
  padding: 2px 7px;
  font-size: var(--fs-ribbon-caption);
}

.rgroup-mode .review-mode-seg {
  padding: 5px;
}

.rgroup-mode .review-mode-seg .ms {
  display: none;
}

/* Inside the left half the transient engine message is the only thing allowed
   to give way: it is prose that ellipsizes readably, whereas "12,483 words" is
   worthless the moment a digit is cut. It is therefore the sole shrinkable
   member of the row (`.stats` below is not), so a long "Opened <filename>"
   message can never squeeze the counts. */
.status {
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
}

.status.error {
  color: var(--error);
  font-weight: 600;
}

.stats {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: 0 0 auto;
  min-width: 0;
  overflow: hidden;
}

.stats[hidden],
.stat-pages[hidden] {
  display: none;
}

/* Separators are generated rather than authored so that shedding a count by
   priority can never leave an orphaned "·" behind, and so adding a count is a
   one-element change. Adjacency is DOM-based, so a hidden sibling carries its
   own separator out of view with it. */
.stats > * + *::before {
  content: "·";
  margin-inline-end: 7px;
  color: var(--faint);
}

.stat-pages {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Footer zoom control (Word/Docs place zoom in the status bar). */
.footer .zoom {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}

.zbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 22px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

/* Unified icon grid (doc 69 §4.2): 16px for compact/footer contexts,
   matching the other two steps (18px ribbon/menu, 20px rail) instead of a
   fourth one-off 15px size. */
.zbtn .ms {
  font-size: var(--icon-compact);
}

.zbtn:hover {
  background: var(--bg-2);
  color: var(--ink);
}

.footer .zoom select {
  height: 22px;
  border: none;
  background: transparent;
  color: var(--ink);
  border-radius: 5px;
  padding: 0 2px;
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  text-align: center;
}

.footer .zoom select:hover {
  background: var(--bg-2);
}

/* ---- Status-bar progressive disclosure ------------------------------------- */
/* Word's status bar sheds indicators as the window narrows (and lets the user
   turn individual ones off); Docs keeps only the essentials and moves counts
   into Tools ▸ Word count. Both keep the word count, the page position, the
   editing-mode affordance and zoom visible at tablet widths — so those are what
   survive here, and everything shed stays reachable from the `#stats` tooltip.
   Priorities, not element names, drive the rungs: the highest number goes
   first, and an indicator added later opts in by declaring a number rather than
   by pushing the bar over the viewport edge again.
     3 — paragraph count: not in Word's status bar at any width.
     2 — character count, and the "Mode" caption the pressed segment already
         conveys.
     1 — word count and page position: last to go, only at phone widths.
     none — engine status, the mode control and zoom: never shed.

   The rungs sit where the row genuinely runs out of room, not where it is
   convenient to test. Measured on this page with the demo document, the full
   three-count row needs 735px of footer; dropping the paragraph count brings
   that to ~635px, and the 780px condense rung below takes ~30px more. So 840
   keeps every count for as long as a realistic document's figures fit (they
   collide at ~820px), and 700 is comfortably below the 720px width the
   shell-overflow spec measures — at 720 the character count survives with
   ~115px to spare, which absorbs the ~13-23px that CI's font metrics add.
   An earlier revision shed at 1000px and 900px instead, which dropped the
   character count — shipped for Word status-bar parity — from every window
   under 900px while 78px of the strip was still empty. */
@media (max-width: 840px) {
  .footer [data-status-priority="3"] {
    display: none;
  }
}

@media (max-width: 700px) {
  .footer [data-status-priority="2"] {
    display: none;
  }
}

/* Condense before clipping: the same compaction the phone tier already used,
   pulled one rung earlier so the segmented mode control keeps all three labels
   at tablet widths instead of being traded away for room. */
@media (max-width: 780px) {
  .footer {
    gap: 10px;
  }

  .foot-left,
  .foot-right {
    gap: 8px;
  }

  .footer .review-mode-seg {
    padding-inline: 5px;
    font-size: 10px;
  }
}

/* The desktop editor remains the primary target, but the header must never
   force the whole document to scroll horizontally. Collapse only redundant
   labels; the complete ribbon keeps its own horizontal scroll behavior. */
@media (max-width: 900px) {
  .bar {
    gap: 10px;
  }

  .search-trigger {
    flex: 0 0 var(--h-search);
    width: var(--h-search);
    padding: 0;
    justify-content: center;
  }

  .search-trigger .search-label,
  .search-trigger kbd {
    display: none;
  }

  #documentStateText {
    display: none;
  }

  .side-panel.table-properties-panel,
  .side-panel.properties-panel {
    position: fixed;
    z-index: 45;
    top: calc(var(--h-header) + var(--h-tab) + var(--h-control) + 48px);
    right: 8px;
    bottom: calc(var(--h-footer) + 8px);
    width: min(340px, calc(100vw - 42px));
    max-width: none;
    margin: 0;
    box-shadow: var(--shadow-popover);
  }

  .side-panel.glyph-panel {
    position: fixed;
    z-index: 45;
    top: calc(var(--h-header) + var(--h-tab) + var(--h-control) + 48px);
    right: 8px;
    bottom: calc(var(--h-footer) + 8px);
    width: min(360px, calc(100vw - 42px));
    max-width: none;
    margin: 0;
    box-shadow: var(--shadow-popover);
  }
}

@media (max-width: 620px) {
  .bar {
    gap: 8px;
    padding-inline: 8px;
  }

  .brand {
    gap: 6px;
  }

  .brand .mark {
    display: none;
  }

  .controls {
    gap: 4px;
  }

  .footer {
    gap: 4px;
    padding-inline: 6px;
  }

  /* Bottom rung of the same ladder: at phone widths only the mode control and
     zoom fit, so the last counts go and the informational half goes with them.
     Everything else the footer sheds is handled by priority above. */
  .footer [data-status-priority="1"],
  .footer .foot-left {
    display: none;
  }

  .footer .foot-right {
    width: 100%;
    justify-content: space-between;
    gap: 4px;
  }

  .controls .btn {
    width: var(--h-control);
    padding: 0;
    justify-content: center;
  }

  .controls .btn-label {
    display: none;
  }

  .save-format {
    max-width: 84px;
  }

  .compatibility-status {
    max-width: 72px;
  }

  .find-panel {
    left: 8px;
    right: 8px;
    width: auto;
    max-height: calc(100vh - var(--h-header) - 96px);
  }

  .dialog-overlay {
    padding: 10px;
  }

  .dialog-card {
    max-height: calc(100vh - 20px);
    border-radius: var(--radius-dialog);
  }

  .dialog-head {
    padding: 16px;
  }

  .dialog-heading {
    align-items: flex-start;
    gap: 10px;
  }

  .dialog-heading-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    font-size: var(--icon-control);
  }

  .dialog-heading h2 {
    font-size: var(--fs-title);
  }

  .dialog-heading p {
    line-height: 1.35;
  }

  .dialog-body {
    padding: 16px;
  }

  .dialog-foot {
    padding: 12px 16px;
  }

  .dialog-note {
    display: none;
  }

  .properties-grid,
  .table-properties-grid,
  .dialog-field-grid,
  .metadata-facts {
    grid-template-columns: 1fr;
  }

  .field-wide,
  .metadata-fact-wide {
    grid-column: auto;
  }

  .page-setup-body {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .page-preview {
    min-height: 160px;
    padding: 16px;
  }

  .page-preview-sheet {
    width: 76px;
  }

  .page-preview-sheet[data-orientation="landscape"] {
    width: 130px;
  }

  .page-setup-fields {
    gap: 18px;
  }
}

/* =========================================================================
   Formatting toolbar UX v2 (Q1–Q5): font menu, color/highlight pickers,
   grow/shrink, change case, editable zoom, paste-options chip.
   Dense, industry-standard controls; light/dark + focus rings throughout.
   ========================================================================= */

.visually-offscreen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

/* ---- Font family trigger (replaces the native <select>) -------------------- */
.font-family-trigger {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: 122px;
  height: var(--h-control);
  padding: 0 4px 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-body);
  cursor: pointer;
  transition: border-color 0.11s, background 0.11s;
}

.font-family-trigger:hover:not(:disabled) {
  border-color: var(--accent-line);
}

.font-family-trigger:disabled {
  opacity: 0.5;
  cursor: default;
}

.font-family-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.font-family-trigger[aria-expanded="true"] {
  border-color: var(--accent);
}

.font-family-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.font-family-trigger.is-placeholder .font-family-label {
  color: var(--faint);
}

.font-family-caret {
  flex: 0 0 auto;
  font-size: 18px;
  color: var(--muted);
}

.ctl.is-mixed .font-family-trigger {
  border-style: dashed;
}

/* ---- Grow / shrink font + change-case glyphs ------------------------------- */
.grow-shrink .grow-glyph {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  font-weight: 600;
  line-height: 1;
  font-size: 12px;
}

.grow-shrink .grow-glyph-big {
  font-size: 16px;
}

.grow-shrink .grow-sign {
  font-size: 9px;
  font-weight: 700;
  margin-left: 1px;
}

.case-glyph {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ---- Text-color + highlight split pickers ---------------------------------- */
.color-control {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  height: var(--h-control);
  border-radius: var(--radius-sm);
}

.color-apply {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 26px;
  height: var(--h-control);
  padding: 0;
  border: 1px solid transparent;
  border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.11s;
}

.color-apply-glyph {
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.color-apply .ms.color-apply-glyph {
  font-size: var(--icon-control);
  font-weight: 400;
}

.color-apply-bar {
  display: block;
  width: 16px;
  height: 4px;
  border-radius: 1px;
  background: var(--ink);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12) inset;
}

.color-apply-bar.is-none {
  background:
    linear-gradient(45deg, transparent 44%, var(--error, #d64562) 44% 56%, transparent 56%),
    var(--surface-alt);
}

.color-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: var(--h-control);
  padding: 0;
  border: 1px solid transparent;
  border-left: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.color-caret .ms {
  font-size: 18px;
}

.color-apply:hover:not(:disabled),
.color-caret:hover:not(:disabled) {
  background: var(--bg-2);
}

.color-apply:disabled,
.color-caret:disabled {
  opacity: 0.35;
  cursor: default;
}

.color-apply:focus-visible,
.color-caret:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: var(--radius-sm);
}

.color-caret[aria-expanded="true"] {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Split list buttons: the main toggle keeps its plain `.fmt` look while a
   slim caret opens the marker-format gallery, mirroring Word/Docs. */
.list-split {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
}

.list-split .list-split-main {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.list-caret {
  width: 14px;
  min-width: 14px;
  padding: 0;
  color: var(--muted);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.list-caret .ms {
  font-size: 18px;
}

.list-caret[aria-expanded="true"] {
  background: var(--accent-soft);
  color: var(--accent);
}

.underline-split.is-mixed .list-caret {
  color: var(--accent);
}

#underline .underline-glyph {
  text-decoration-color: var(--underline-color, currentColor);
}

#underline[data-underline-style="double"] .underline-glyph {
  text-decoration-style: double;
}

#underline[data-underline-style="thick"] .underline-glyph {
  text-decoration-thickness: 3px;
}

#underline[data-underline-style="dotted"] .underline-glyph {
  text-decoration-style: dotted;
}

#underline[data-underline-style="dashed"] .underline-glyph,
#underline[data-underline-style="dotDash"] .underline-glyph {
  text-decoration-style: dashed;
}

#underline[data-underline-style="wavy"] .underline-glyph {
  text-decoration-style: wavy;
}

/* Marker-format gallery: a compact grid of preview cells. */
.list-gallery-menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 6px;
}

.list-gallery-menu-number {
  grid-template-columns: repeat(5, 1fr);
}

.list-gallery-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.12));
  border-radius: var(--radius-sm);
  background: var(--surface, transparent);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.11s, border-color 0.11s;
}

.list-gallery-glyph {
  font-size: 20px;
  line-height: 1;
}

.list-gallery-sample {
  font-size: 10px;
  line-height: 1.15;
  text-align: center;
  color: var(--ink);
}

.list-gallery-cell:hover,
.list-gallery-cell:focus-visible {
  background: var(--bg-2);
  border-color: var(--accent);
  outline: none;
}

.list-gallery-cell[aria-checked="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.list-gallery-cell[aria-checked="true"] .list-gallery-sample {
  color: var(--accent);
}

/* Keep the last Font control clear of the Paragraph divider (mirrors the old
   highlight control's 10px right margin the ribbon-home suite guards). */
[data-group="font"] .color-control-highlight {
  margin-right: 10px;
}

.ctl.color-control.is-mixed .color-apply-bar {
  background: linear-gradient(135deg, var(--muted) 0 45%, transparent 45% 55%, var(--muted) 55%);
}

/* ---- Insert ▸ Shapes gallery ----------------------------------------------
   Each row previews its own geometry, so the list reads as shapes rather than
   as a column of words. Drawn in CSS (no icon font has these seven). */
.shape-choice {
  grid-template-columns: 22px minmax(0, 1fr);
}

.shape-choice-preview {
  width: 18px;
  height: 12px;
  background: var(--accent-soft, rgba(51, 85, 196, 0.18));
  border: 1px solid var(--accent, #3355c4);
  justify-self: center;
}

.shape-preview-roundRectangle {
  border-radius: 4px;
}

.shape-preview-ellipse {
  border-radius: 50%;
}

.shape-preview-triangle {
  background: var(--accent, #3355c4);
  border: none;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.shape-preview-rightTriangle {
  background: var(--accent, #3355c4);
  border: none;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.shape-preview-diamond {
  background: var(--accent, #3355c4);
  border: none;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.shape-preview-line {
  height: 0;
  background: none;
  border: none;
  border-top: 2px solid var(--accent, #3355c4);
  align-self: center;
}

/* ---- Shape Fill / Shape Outline (object context bar) ----------------------- */
/* The bar's two color buttons carry the shape's own color as an underline bar,
 * so the control reads what the shape HAS before it is opened. */
.object-bar-color {
  padding-right: 8px;
}

.object-bar-color .color-apply-bar {
  width: 14px;
  margin-left: 2px;
}

/* Word's Shape Outline > Weight list: each row previews its own thickness. */
.shape-weight-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.shape-weight-rule {
  display: block;
  width: 34px;
  height: var(--w, 1px);
  background: var(--ink);
  border-radius: 1px;
  flex: none;
}

.shape-weight.is-active {
  background: var(--surface-alt);
  font-weight: 600;
}

/* ---- Color picker menu ----------------------------------------------------- */
.color-menu {
  min-width: 0;
  width: max-content;
  padding: 8px;
}

.underline-menu {
  width: 226px;
  max-height: min(520px, calc(100vh - 24px));
  overflow-y: auto;
}

.underline-style-option {
  justify-content: space-between;
}

.underline-style-option[aria-checked="true"] {
  color: var(--accent);
  background: var(--accent-soft);
  font-weight: 600;
}

.underline-menu .color-row-action.is-active {
  color: var(--accent);
  background: var(--accent-soft);
}

.underline-style-preview {
  display: inline-block;
  width: 74px;
  color: var(--ink);
  text-align: center;
  text-decoration-line: underline;
  text-underline-offset: 3px;
}

.underline-style-none {
  text-decoration: none;
}

.underline-style-double {
  text-decoration-style: double;
}

.underline-style-thick {
  text-decoration-thickness: 3px;
}

.underline-style-dotted {
  text-decoration-style: dotted;
}

.underline-style-dashed,
.underline-style-dotDash {
  text-decoration-style: dashed;
}

.underline-style-wavy {
  text-decoration-style: wavy;
}

.underline-style-words {
  text-decoration-style: solid;
  word-spacing: 5px;
}

.color-row-action {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-body);
  text-align: left;
  cursor: pointer;
}

.color-row-action:hover,
.color-row-action:focus-visible {
  background: var(--accent-soft);
  color: var(--accent);
  outline: none;
}

.color-chip {
  width: 15px;
  height: 15px;
  border-radius: 3px;
  background: var(--sw, #000);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) inset;
}

.color-chip-none {
  background:
    linear-gradient(45deg, transparent 44%, var(--error, #d64562) 44% 56%, transparent 56%),
    var(--surface);
}

.color-more .ms {
  font-size: 16px;
  color: var(--muted);
}

.swatch-grid {
  display: grid;
  grid-template-columns: repeat(10, 18px);
  gap: 4px;
  padding: 4px 2px 6px;
}

.color-menu[aria-label="Highlight color"] .swatch-grid {
  grid-template-columns: repeat(8, 18px);
}

.swatch-cell {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 3px;
  background: var(--sw);
  cursor: pointer;
  transition: transform 0.08s;
}

.swatch-cell.is-light {
  border-color: var(--line-strong);
}

.swatch-cell:hover {
  transform: scale(1.12);
}

.swatch-cell:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.swatch-cell.is-active {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--accent);
}

/* ---- Font menu ------------------------------------------------------------- */
.font-menu {
  width: 248px;
  padding: 6px;
}

.font-menu-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  margin-bottom: 4px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
}

.font-menu-search .ms {
  font-size: 16px;
  color: var(--muted);
}

.font-menu-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-body);
  outline: none;
}

.font-menu-list {
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.font-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}

.font-menu-check {
  flex: 0 0 16px;
  font-size: 16px;
  color: var(--accent);
  opacity: 0;
}

.font-menu-item.is-current .font-menu-check {
  opacity: 1;
}

.font-menu-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.font-menu-item:hover,
.font-menu-item.is-active,
.font-menu-item:focus-visible {
  background: var(--accent-soft);
  color: var(--accent);
  outline: none;
}

.font-menu-empty {
  padding: 14px 8px;
  color: var(--faint);
  font-size: var(--fs-small);
  text-align: center;
}

/* ---- Editable zoom control ------------------------------------------------- */
.zoom-value-control {
  display: inline-flex;
  align-items: center;
  border-radius: 5px;
}

.zoom-input {
  width: 62px;
  height: 22px;
  border: 1px solid transparent;
  border-radius: 5px 0 0 5px;
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  text-align: center;
  cursor: text;
}

.zoom-input:hover {
  background: var(--bg-2);
}

.zoom-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  background: var(--surface);
}

.zoom-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 22px;
  border: none;
  border-radius: 0 5px 5px 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.zoom-caret .ms {
  font-size: var(--icon-compact);
}

.zoom-caret:hover,
.zoom-caret[aria-expanded="true"] {
  background: var(--bg-2);
  color: var(--ink);
}

.zoom-caret:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.zoom-menu {
  min-width: 148px;
}

.zoom-menu .zoom-preset .menu-item-label,
.zoom-menu .zoom-fit .menu-item-label {
  font-variant-numeric: tabular-nums;
}

.zoom-menu .menu-check {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  opacity: 0;
  background: currentcolor;
  -webkit-mask: var(--check-svg) center / contain no-repeat;
  mask: var(--check-svg) center / contain no-repeat;
  --check-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
}

.zoom-menu [aria-checked="true"] .menu-check {
  opacity: 1;
}

/* ---- Paste-options chip ---------------------------------------------------- */
.paste-options {
  position: fixed;
  z-index: 62;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 10px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-popover);
  box-shadow: var(--shadow-popover);
  color: var(--ink);
  font-size: var(--fs-small);
}

.paste-options[hidden] {
  display: none;
}

.paste-options-icon {
  font-size: 16px;
  color: var(--muted);
}

.paste-options-action {
  border: 0;
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
}

.paste-options-action:hover,
.paste-options-action:focus-visible {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  outline: none;
}

.paste-options-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.paste-options-close .ms {
  font-size: 16px;
}

.paste-options-close:hover {
  background: var(--bg-2);
  color: var(--ink);
}

/* ---- Header / footer editing context ---------------------------------------- */
/* Every reference editor de-emphasises the body while running content is being
   edited, so it is obvious which layer the keystrokes are going to (docs/85
   §10.2). The page itself is a canvas, so the cue is drawn on the shell rather
   than composited into the raster: the pages dim, and the caret and selection
   the engine paints on the overlay stay at full strength above them. */
/* Deliberately NOT a dim over the canvas. The header is painted INTO the page
   raster, so dimming `.page` washed out the very content being edited and turned
   the whole sheet grey — the cue has to sit beside the band, not on top of it.
   Word and LibreOffice both mark the band with a boundary and a label instead. */
.running-band {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  border-bottom: 1px dashed var(--accent);
}

.running-band.is-footer {
  border-top: 1px dashed var(--accent);
  border-bottom: none;
}

.running-band-label {
  position: absolute;
  left: 4px;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--bg-1);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.running-band:not(.is-footer) .running-band-label {
  bottom: 0;
}

.running-band.is-footer .running-band-label {
  top: 0;
}

/* ---- Header / footer marker -------------------------------------------------- */
/* LibreOffice Writer's affordance (docs/85 §8d): a marker appears when the
   pointer is in a margin band, so an ABSENT header is discoverable — a bare
   double-click is invisible to anyone who has not been told about it. Positioned
   over the page in the overlay layer, never composited into the raster. */
.running-marker {
  position: absolute;
  z-index: 4;
  padding: 3px 9px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--bg-1);
  color: var(--accent);
  font: inherit;
  font-size: var(--fs-small);
  line-height: 1.4;
  cursor: pointer;
  box-shadow: 0 1px 3px rgb(0 0 0 / 18%);
}

.running-marker:hover {
  background: var(--accent);
  color: var(--bg-1);
}

.running-marker:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.running-marker[hidden] {
  display: none;
}