:root {
  --color-bg: #e9ebef;
  --color-page: #ffffff;
  --color-text: #202124;
  --color-muted: #6b7280;
  --color-border: #d7dae0;
  --color-accent: #3b5bdb;
  --color-accent-soft: #e8ecfd;
  --color-hover: #f1f3f6;
  --toolbar-height: 44px;
  --header-height: 52px;
}

* {
  box-sizing: border-box;
}

/* Header edit mode locks page scrolling; reserving the scrollbar's space
   keeps the pages from shifting sideways when that scrollbar disappears. */
html {
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
  min-height: 100vh;
}

/* Header */

.app-header {
  position: sticky;
  top: 0;
  z-index: 11;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 16px;
  background: var(--color-page);
  border-bottom: 1px solid var(--color-border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-mark svg {
  display: block;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.brand-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.brand-tagline {
  font-size: 11.5px;
  color: var(--color-muted);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.menu-control {
  position: relative;
}

.header-btn-caret {
  width: 14px !important;
  height: 14px !important;
  margin-left: -2px;
  opacity: 0.7;
}

.header-btn[aria-expanded="true"] {
  background: var(--color-hover);
}

.header-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  width: 280px;
  padding: 6px;
  background: var(--color-page);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

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

.header-menu-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--color-text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

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

.header-menu-name {
  font-size: 13px;
  font-weight: 600;
}

.header-menu-hint {
  font-size: 12px;
  color: var(--color-muted);
}

/* Popover panels: Page setup and Document details. */
.popover-panel {
  position: fixed;
  z-index: 30;
  background: var(--color-page);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  padding: 12px 14px 14px;
  font-size: 13px;
  color: var(--color-text);
}

.popover-panel[hidden],
.popover-error[hidden] {
  display: none;
}

.popover-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  margin-bottom: 10px;
}

.popover-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-muted);
}

.popover-select,
.popover-panel input {
  height: 28px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-page);
  color: var(--color-text);
  font: inherit;
  font-size: 13px;
  padding: 0 6px;
}

.popover-panel input:focus,
.popover-select:focus {
  outline: 2px solid var(--color-accent-soft);
  border-color: var(--color-accent);
}

.popover-panel input.is-invalid {
  border-color: #d93025;
}

.popover-error {
  margin-top: 8px;
  font-size: 12px;
  color: #b3261e;
}

.popover-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.popover-link-btn {
  border: none;
  background: transparent;
  color: var(--color-accent);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 0;
  cursor: pointer;
}

.popover-link-btn:hover {
  text-decoration: underline;
}

.page-setup-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  padding: 0 8px 0 6px;
}

.page-setup-btn svg {
  width: 16px;
  height: 16px;
}

.page-setup-btn .page-setup-caret {
  width: 13px;
  height: 13px;
  opacity: 0.7;
}

.page-setup-btn[aria-expanded="true"] {
  background: var(--color-hover);
}

.page-setup-panel {
  width: 300px;
}

.page-setup-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.page-setup-dims {
  font-size: 12px;
  color: var(--color-muted);
}

.page-setup-margins-head {
  justify-content: space-between;
  margin: 14px 0 8px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.page-setup-unit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-muted);
}

.page-margin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}

.page-margin-grid label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--color-muted);
}

.page-margin-grid input {
  width: 70px;
  margin-left: auto;
}

.page-unit-label {
  width: 16px;
  font-size: 12px;
}

.doc-details-panel {
  width: 380px;
}

.author-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0 4px;
}

.author-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.author-row input {
  flex: 1 1 0;
  min-width: 0;
}

.author-remove {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--color-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.author-remove:hover {
  background: var(--color-hover);
  color: var(--color-text);
}

.doc-ids {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 12px;
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  font-size: 12px;
}

.doc-ids dt {
  color: var(--color-muted);
}

.doc-ids dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.doc-ids code {
  font: 11.5px ui-monospace, Consolas, monospace;
  user-select: all;
}

.doc-ids-note {
  margin: 10px 0 0;
  font-size: 11.5px;
  color: var(--color-muted);
}

/* Password protection, in Document details. */
.doc-protection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.doc-protection-status {
  font-size: 12.5px;
  color: var(--color-muted);
}

.doc-protection-status.is-on {
  color: var(--color-text);
  font-weight: 600;
}

.doc-protection-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

/* Asking for a password: setting one, or opening a protected file. */
.password-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 18, 24, 0.45);
}

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

.password-panel {
  width: 340px;
  max-width: calc(100vw - 32px);
  padding: 18px;
  background: var(--color-page);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
}

.password-note {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-muted);
}

.password-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--color-muted);
}

.password-field[hidden] {
  display: none;
}

.password-field input {
  padding: 7px 9px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-page);
  color: var(--color-text);
  font: inherit;
  font-size: 13px;
}

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

.password-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

/* Progress while a PDF is being made (it's built a page at a time). */
.pdf-progress {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 50;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #202124;
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  font-size: 13px;
}

.pdf-progress[hidden] {
  display: none;
}

.pdf-progress-bar {
  width: 140px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.25);
  overflow: hidden;
}

.pdf-progress-fill {
  width: 0;
  height: 100%;
  background: #8ab4f8;
  transition: width 0.15s;
}

.pdf-progress-cancel {
  border: none;
  background: transparent;
  color: #8ab4f8;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
}

.header-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: var(--color-text);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.header-btn svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.header-btn:hover {
  background: var(--color-hover);
}

/* Toolbar */

.toolbar {
  position: sticky;
  top: var(--header-height);
  z-index: 10;
  height: var(--toolbar-height);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 12px;
  background: var(--color-page);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}

.toolbar-divider {
  width: 1px;
  height: 24px;
  background: var(--color-border);
  margin: 0 6px;
  flex: 0 0 auto;
}

.toolbar-group[hidden],
.toolbar-divider[hidden] {
  display: none;
}

.toolbar button.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 5px;
  color: var(--color-text);
  cursor: pointer;
  flex: 0 0 auto;
}

.toolbar button.icon-btn svg {
  width: 18px;
  height: 18px;
}

.toolbar button.icon-btn:hover {
  background: var(--color-hover);
}

.toolbar button.icon-btn.is-active {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.toolbar button.icon-btn.text-btn {
  font-size: 15px;
  font-family: Georgia, "Times New Roman", serif;
}

.toolbar-select {
  height: 30px;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  background: var(--color-page);
  color: var(--color-text);
  font-size: 13px;
  padding: 0 6px;
  cursor: pointer;
}

.toolbar-select:hover {
  background: var(--color-hover);
}

#page-size-select {
  width: 90px;
}

.font-family-select {
  width: 128px;
  margin-right: 4px;
}

.font-size-stepper {
  display: inline-flex;
  align-items: stretch;
  height: 30px;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  overflow: hidden;
}

.stepper-btn {
  width: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
}

.stepper-btn svg {
  width: 12px;
  height: 12px;
}

.stepper-btn:hover {
  background: var(--color-hover);
  color: var(--color-text);
}

/* Wide enough for "10.5" plus the size list's dropdown arrow, which Chrome
   draws inside the box. */
#font-size-input {
  width: 52px;
  border: none;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  text-align: center;
  font-size: 13px;
  padding: 0;
  color: var(--color-text);
}

.color-swatch {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 5px;
  cursor: pointer;
  flex: 0 0 auto;
}

.color-swatch:hover {
  background: var(--color-hover);
}

.color-swatch-icon {
  position: relative;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 16px;
  color: var(--color-text);
}

.color-swatch-icon svg {
  width: 16px;
  height: 16px;
}

.color-bar {
  position: absolute;
  bottom: -5px;
  left: 1px;
  width: 14px;
  height: 3px;
  border-radius: 1px;
}

.color-bar.is-none {
  box-shadow: inset 0 0 0 1px #c7ccd6;
}

.toolbar button.icon-btn.color-btn[aria-expanded="true"] {
  background: var(--color-hover);
}

.color-swatch input[type="color"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.image-tool-field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--color-muted);
  padding: 4px 6px;
}

.image-tool-field input[type="number"] {
  width: 48px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 13px;
  color: var(--color-text);
}

/* Selection stays visible while focus leaves the editor (e.g. clicking a
   toolbar button, or while a native color-picker dialog is open) via a
   temporary, UI-only highlight span — never persisted, see
   showFakeSelection()/clearFakeSelection() in app.js. Styled through a
   class (not inline style) so it can never be picked up as a real
   background-color formatting mark by collectRuns(). */
.pl-fake-selection {
  background-color: rgba(59, 91, 219, 0.28);
}

/* Image options sidebar */

.image-sidebar {
  position: fixed;
  top: calc(var(--header-height) + var(--toolbar-height));
  right: 0;
  bottom: 0;
  width: 260px;
  background: var(--color-page);
  border-left: 1px solid var(--color-border);
  padding: 16px;
  overflow-y: auto;
  z-index: 20;
}

.image-sidebar[hidden] {
  display: none;
}

.image-sidebar h2 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  margin: 0 0 12px;
}

.image-sidebar-section {
  margin-bottom: 18px;
}

.image-sidebar-section label.section-label {
  display: block;
  font-size: 12px;
  color: var(--color-muted);
  margin-bottom: 6px;
}

.image-sidebar-layout-buttons {
  display: flex;
  gap: 6px;
}

.image-sidebar-layout-buttons button {
  flex: 1;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  border-radius: 4px;
  padding: 8px 4px;
  font-size: 12px;
  cursor: pointer;
}

.image-sidebar-layout-buttons button:hover {
  background: #f1f2f5;
}

.image-sidebar-layout-buttons button.is-active {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.image-sidebar .image-tool-field,
.image-sidebar .color-swatch {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: auto;
  padding: 0;
  font-size: 13px;
  font-weight: 400;
  border-radius: 0;
  cursor: pointer;
}

.image-sidebar .color-swatch:hover {
  background: transparent;
}

.image-sidebar .color-swatch input[type="color"] {
  position: static;
  opacity: 1;
  width: 28px;
  height: 22px;
  border: 1px solid var(--color-border);
  border-radius: 3px;
}

.image-sidebar .image-tool-field input[type="number"] {
  width: 64px;
}

/* Page */

/* Room for the page plus its side gutters, so the page itself is exactly the
   paper's width — as wide on screen as printed or in a PDF, so lines wrap
   (and pages break) the same everywhere. */
.page-wrap {
  max-width: calc(var(--page-width, 850px) + 32px);
  margin: 32px auto 24px;
  padding: 0 16px;
}

.doc-title {
  display: block;
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 26px;
  font-weight: 600;
  padding: 8px 4px;
  margin-bottom: 8px;
  color: var(--color-text);
}

.doc-title::placeholder {
  color: var(--color-muted);
}

.editor {
  outline: none;
  line-height: 1.6;
  font-size: 16px;
}

.pages-stack {
  position: relative;
}

.page-section {
  position: relative;
  /* The paper's exact size, even in a narrow window (which then scrolls). */
  width: var(--page-width, 850px);
  height: var(--page-height, 700px);
  /* The page setup's margins (set from JS). Top/bottom also grow when the
     page header/footer outgrows them. */
  padding: var(--page-margin-top, 64px) var(--page-margin-right, 72px) var(--page-margin-bottom, 64px) var(--page-margin-left, 72px);
  margin-bottom: var(--page-gap, 24px);
  background: var(--color-page);
  /* hidden (not visible) establishes a block formatting context, so a
     wrap-left/wrap-right floated image is contained within its own page
     and can't visually bleed into the next section's box. scrollHeight —
     what the pagination overflow checks read — still reports the section's
     full content height regardless of this clipping. */
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 10px rgba(0, 0, 0, 0.06);
}

.page-section:last-child {
  margin-bottom: 0;
}

.page-section.is-empty::before {
  content: "Start writing\2026";
  color: var(--color-muted);
  pointer-events: none;
}

.page-section h1 {
  font-size: 28px;
  margin: 0.6em 0 0.4em;
}

.page-section h2 {
  font-size: 22px;
  margin: 0.6em 0 0.4em;
}

.page-section h3 {
  font-size: 18px;
  margin: 0.6em 0 0.4em;
}

.page-section p {
  margin: 0 0 0.9em;
}

/* Like Word, space before a block is dropped when it starts a page. The
   pagination measures each block's space to the NEXT block, never its own
   top margin, so a heading or table opening a page would otherwise push that
   page's content past its bottom margin (where it gets clipped).
   !important because a table's margin is an inline style. */
.page-section > :first-child {
  margin-top: 0 !important;
}

/* A trailing bottom margin doesn't show up in an element's own
   getBoundingClientRect() but does count toward scrollHeight, which would
   otherwise make a section look like it overflows by a few pixels even
   when everything actually fits. The section's own gap already provides
   visual spacing between pages, so the last element's own margin is
   redundant here. */
.page-section > *:last-child {
  margin-bottom: 0 !important;
}

.page-section ul,
.page-section ol {
  margin: 0 0 0.9em;
  padding-left: 1.6em;
}

.page-section img,
.region-content img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

.page-section img,
.page-edit-editor img {
  cursor: move;
}

.page-section img.is-selected,
.page-edit-editor img.is-selected {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.page-section img.is-dragging,
.page-edit-editor img.is-dragging {
  opacity: 0.5;
}

.image-resize-overlay {
  position: fixed;
  display: none;
  pointer-events: none;
  z-index: 1000;
}

.image-resize-overlay.is-visible {
  display: block;
}

.resize-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px;
  background: var(--color-page);
  border: 1px solid var(--color-accent);
  border-radius: 2px;
  pointer-events: auto;
}

.resize-handle[data-dir="nw"] { top: 0; left: 0; cursor: nwse-resize; }
.resize-handle[data-dir="se"] { top: 100%; left: 100%; cursor: nwse-resize; }
.resize-handle[data-dir="ne"] { top: 0; left: 100%; cursor: nesw-resize; }
.resize-handle[data-dir="sw"] { top: 100%; left: 0; cursor: nesw-resize; }
.resize-handle[data-dir="n"] { top: 0; left: 50%; cursor: ns-resize; }
.resize-handle[data-dir="s"] { top: 100%; left: 50%; cursor: ns-resize; }
.resize-handle[data-dir="e"] { top: 50%; left: 100%; cursor: ew-resize; }
.resize-handle[data-dir="w"] { top: 50%; left: 0; cursor: ew-resize; }

/* Page header & footer — one template of each, shown on every page. Both
   share the same edit overlay/window/editor (only one can be open at a
   time) and the same layout mechanics, mirrored top/bottom. */

.region-content {
  /* flow-root contains floated (wrap-left/right) logos, so they count
     toward the header's/footer's measured height instead of spilling past it. */
  display: flow-root;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
  overflow-wrap: break-word;
}

.region-content p {
  margin: 0;
}

/* One read-only copy per page, drawn over that page's margin. Placed by
   page index (header) or by page count minus index (footer) rather than
   measured offsets, so it stays aligned in print too, where the gap
   between pages collapses to zero. */
.region-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.header-copy {
  position: absolute;
  left: var(--page-margin-left, 72px);
  right: var(--page-margin-right, 72px);
  top: calc(var(--i, 0) * (var(--page-height, 700px) + var(--page-gap, 24px)) + var(--header-edge, 24px));
}

/* Bottom-anchored: the footer's own bottom edge always sits its margin
   (--footer-edge) above the page's bottom edge, so it grows upward as
   content is added instead of downward like the header — the natural
   direction for a footer. */
.footer-copy {
  position: absolute;
  left: var(--page-margin-left, 72px);
  right: var(--page-margin-right, 72px);
  bottom: calc((var(--n, 1) - 1 - var(--i, 0)) * (var(--page-height, 700px) + var(--page-gap, 24px)) + var(--footer-edge, 24px));
}

.margin-hover-outline {
  position: absolute;
  left: calc(var(--page-margin-left, 72px) - 6px);
  right: calc(var(--page-margin-right, 72px) - 6px);
  border: 1px dashed #aab6dd;
  border-radius: 4px;
  pointer-events: none;
  z-index: 2;
}

.edit-region-btn {
  position: absolute;
  left: var(--page-margin-left, 72px);
  z-index: 3;
  height: 20px;
  padding: 0 9px;
  border: none;
  border-radius: 10px;
  background: var(--color-accent);
  color: #fff;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.edit-region-btn:hover {
  background: #2f4bc0;
}

.edit-region-btn[hidden],
.margin-hover-outline[hidden],
.page-edit-overlay[hidden] {
  display: none;
}

.page-edit-overlay {
  position: fixed;
  top: calc(var(--header-height) + var(--toolbar-height));
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 15;
  background: rgba(32, 33, 36, 0.55);
  overflow-y: auto;
  padding-bottom: 24px;
}

.page-edit-window {
  width: max-content;
  background: var(--color-page);
  border-radius: 8px;
  padding: 12px 16px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}

.page-edit-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 8px;
}

.page-edit-label span {
  font-weight: 400;
  color: var(--color-muted);
}

.page-edit-label span:first-child {
  font-weight: 700;
  color: var(--color-accent);
}

.page-edit-editor {
  outline: 1px dashed #aab6dd;
  outline-offset: 4px;
  border-radius: 2px;
}

.page-edit-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
}

/* Border for the header/footer: edges, line style, weight, color. */
.region-border-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.page-edit-tools {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.region-border-label {
  min-width: 52px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-muted);
}

.region-margin-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.region-margin-field {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--color-muted);
}

.region-margin-field input {
  width: 60px;
  height: 28px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0 6px;
  font: inherit;
  font-size: 13px;
  color: var(--color-text);
}

.region-edge-buttons {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.region-edge-btn,
.region-border-color-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}

.region-edge-btn svg,
.region-border-color-btn svg {
  width: 18px;
  height: 18px;
}

.region-edge-btn:hover,
.region-border-color-btn:hover,
.region-border-color-btn[aria-expanded="true"] {
  background: var(--color-hover);
}

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

.region-border-color-btn {
  border: 1px solid var(--color-border);
  height: 28px;
}

.region-border-color-btn svg {
  margin-bottom: 4px;
}

.region-border-color-bar {
  bottom: 3px;
  left: 6px;
  width: 16px;
}

.region-border-select {
  height: 28px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-page);
  color: var(--color-text);
  font: inherit;
  font-size: 12.5px;
  padding: 0 4px;
}

.page-edit-done-btn {
  border: none;
  border-radius: 6px;
  background: var(--color-accent);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 18px;
  cursor: pointer;
}

.page-edit-done-btn:hover {
  background: #2f4bc0;
}

.page-edit-done-btn:focus-visible,
.edit-region-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Controls that only make sense for the document body are switched off
   while the header or footer is being edited. */
.toolbar button:disabled,
.toolbar select:disabled,
.header-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.toolbar button.icon-btn:disabled:hover,
.header-btn:disabled:hover {
  background: transparent;
}

/* Tables — read-only on the page; edited in the table sidebar's sheet. */

.pl-table {
  position: relative;
  cursor: pointer;
  user-select: none;
}

.pl-table table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.pl-table td {
  /* A minimum — content taller than this still grows the row. --row-h is
     set on a row that has its own height. */
  height: var(--row-h, 28px);
  border: 1px solid #9aa0a6;
  /* Small enough that one line of 14px text fits the 28px minimum, so the
     first character typed into an empty row doesn't change its height (and
     cost a repagination). */
  padding: 3px 6px;
  vertical-align: top;
  font-size: 14px;
  line-height: 1.4;
  /* A text value's line breaks (Alt+Enter) show as typed. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.page-section .pl-table img {
  display: block;
  max-width: 100%;
  height: auto;
  cursor: pointer;
}

.pl-table td.pl-in-range {
  box-shadow: inset 0 0 0 9999px rgba(59, 91, 219, 0.14);
}

.pl-table.is-selected table {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.table-picker {
  position: fixed;
  z-index: 30;
  background: var(--color-page);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  padding: 10px 12px;
}

.table-picker[hidden] {
  display: none;
}

.table-picker-grid {
  display: flex;
  gap: 3px;
}

.table-picker-cell {
  width: 17px;
  height: 17px;
  padding: 0;
  border: 1px solid #c7ccd6;
  border-radius: 2px;
  background: var(--color-page);
  cursor: pointer;
}

.table-picker-cell.is-on {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
}

.table-picker-label {
  margin-top: 8px;
  font-size: 12px;
  color: var(--color-muted);
  text-align: center;
}

/* Text / highlight color menu: a palette first; the custom picker (with
   Apply / Cancel) only after choosing "+" under Custom. */

.color-menu {
  position: fixed;
  z-index: 30;
  width: 252px;
  background: var(--color-page);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  padding: 10px 12px 12px;
  font-size: 13px;
}

.color-menu[hidden],
.color-custom-view[hidden],
#color-palette-view[hidden] {
  display: none;
}

.color-menu-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-muted);
  margin-bottom: 8px;
}

.color-default-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 28px;
  padding: 0 6px;
  margin-bottom: 8px;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  background: var(--color-page);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
}

.color-default-btn:hover {
  background: var(--color-hover);
}

.color-default-btn.is-current {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* A white square with a red diagonal: "no color set". */
.color-default-swatch {
  width: 16px;
  height: 16px;
  border: 1px solid #c7ccd6;
  border-radius: 3px;
  background: linear-gradient(to top right, transparent calc(50% - 1px), #d93025 calc(50% - 1px), #d93025 calc(50% + 1px), transparent calc(50% + 1px)), #fff;
}

.color-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 3px;
}

/* Grays, then the bright row, stand apart from the tints below them. */
.color-grid .color-chip:nth-child(n + 11):nth-child(-n + 20) {
  margin-bottom: 5px;
}
.color-grid .color-chip:nth-child(-n + 10) {
  margin-bottom: 2px;
}

.color-chip {
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 50%;
  cursor: pointer;
}

.color-chip:hover {
  transform: scale(1.18);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.color-chip.is-current {
  box-shadow: 0 0 0 2px var(--color-page), 0 0 0 3.5px var(--color-accent);
}

.color-menu-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  margin: 10px 0 6px;
}

.color-recent-row {
  display: flex;
  align-items: center;
  gap: 3px;
}

.color-recent {
  display: contents;
}

.color-recent .color-chip,
.color-add-btn {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.color-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px dashed #9aa0a6;
  border-radius: 50%;
  background: var(--color-page);
  color: var(--color-muted);
  cursor: pointer;
}

.color-add-btn svg {
  width: 12px;
  height: 12px;
}

.color-add-btn:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.color-sv {
  position: relative;
  height: 140px;
  border-radius: 5px;
  cursor: crosshair;
  touch-action: none;
  background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)), linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}

.color-sv-thumb,
.color-hue-thumb {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.color-hue {
  position: relative;
  height: 12px;
  margin: 12px 0 10px;
  border-radius: 6px;
  cursor: pointer;
  touch-action: none;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}

.color-hue-thumb {
  top: 50%;
}

.color-custom-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.color-preview {
  width: 32px;
  height: 28px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  flex: 0 0 auto;
}

.color-hex-field {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-muted);
  font-size: 12px;
}

.color-hex-field input {
  width: 86px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  font: 13px ui-monospace, Consolas, monospace;
  color: var(--color-text);
  text-transform: uppercase;
}

.color-hex-field input:focus {
  outline: 2px solid var(--color-accent-soft);
  border-color: var(--color-accent);
}

.color-hex-field input.is-invalid {
  border-color: #d93025;
}

.color-custom-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.color-action-btn {
  height: 28px;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  background: var(--color-page);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
}

.color-action-btn:hover {
  background: var(--color-hover);
}

.color-action-btn.is-primary {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #fff;
}

.color-action-btn.is-primary:hover {
  background: #3250c4;
}

.color-action-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* While the table sidebar is open, the page keeps its exact width (so
   nothing reflows) and slides left into the space the sidebar leaves. */
body.has-table-sidebar .page-wrap,
body.has-table-sidebar .status-bar {
  width: calc(var(--page-width, 850px) + 32px);
  max-width: none;
  margin-left: max(0px, calc((100vw - var(--table-sidebar-width, 420px) - var(--page-width, 850px) - 32px) / 2));
  margin-right: 0;
}

.table-sidebar {
  position: fixed;
  top: calc(var(--header-height) + var(--toolbar-height));
  right: 0;
  bottom: 0;
  width: var(--table-sidebar-width, 420px);
  display: flex;
  flex-direction: column;
  background: var(--color-page);
  border-left: 1px solid var(--color-border);
  z-index: 20;
}

.table-sidebar[hidden] {
  display: none;
}

.table-sidebar-grip {
  position: absolute;
  left: -4px;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: col-resize;
  z-index: 6;
}

.table-sidebar-grip:hover,
.table-sidebar-grip.is-dragging {
  background: rgba(59, 91, 219, 0.25);
}

.table-sidebar-top {
  flex: 0 0 auto;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--color-border);
}

/* "TABLE" kicker, then the table's name — editable in place. */
.table-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}

.table-name-kicker {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

.table-name-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 30px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
}

.table-name-input:hover {
  border-color: var(--color-border);
}

.table-name-input:focus {
  outline: 2px solid var(--color-accent-soft);
  border-color: var(--color-accent);
  background: var(--color-page);
}

.table-name-input.is-invalid {
  border-color: #d93025;
  outline-color: #fbe3e1;
}

.table-sidebar-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}

.table-layout-buttons button {
  flex: 0 0 auto;
  padding: 6px 10px;
}

.table-format-select {
  height: 28px;
  max-width: 230px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-page);
  color: var(--color-text);
  font: inherit;
  font-size: 13px;
  padding: 0 4px;
}

.table-decimal-buttons {
  display: inline-flex;
  gap: 4px;
}

.table-decimal-buttons button {
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  border-radius: 4px;
  padding: 5px 8px;
  font: 12px ui-monospace, Consolas, monospace;
  cursor: pointer;
}

.table-decimal-buttons button:hover {
  background: var(--color-hover);
}

.table-decimal-buttons button:disabled {
  opacity: 0.4;
  cursor: default;
  background: transparent;
}

.table-border-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  border-radius: 4px;
  padding: 0 9px 0 6px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}

.table-border-btn svg {
  width: 17px;
  height: 17px;
}

.table-border-btn:hover,
.table-border-btn[aria-expanded="true"] {
  background: var(--color-hover);
}

/* Cell borders: pick the sides first, then the line's style/weight/color. */
.cell-border-panel {
  position: fixed;
  z-index: 30;
  background: var(--color-page);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  padding: 10px 12px 12px;
}

.cell-border-panel[hidden],
.cell-border-options[hidden] {
  display: none;
}

.cell-border-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-muted);
  margin-bottom: 8px;
}

.cell-border-sides {
  display: grid;
  grid-template-columns: repeat(5, 32px);
  gap: 3px;
}

.cell-border-side-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}

.cell-border-side-btn svg {
  width: 20px;
  height: 20px;
}

.cell-border-side-btn:hover {
  background: var(--color-hover);
}

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

.cell-border-options {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}

.table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.table-actions button {
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  border-radius: 4px;
  padding: 5px 8px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}

.table-actions button:hover {
  background: var(--color-hover);
}

.table-actions button:disabled {
  opacity: 0.4;
  cursor: default;
  background: transparent;
}

.table-actions .danger {
  margin-left: auto;
  color: #b3261e;
  border-color: #e7b7b3;
}

.sheet-scroll {
  position: relative;
  flex: 1 1 auto;
  overflow: auto;
  outline: none;
  background: var(--color-page);
}

.sheet-inner {
  position: relative;
}

.sheet-colheaders {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  height: 26px;
  background: #f3f4f6;
  border-bottom: 1px solid var(--color-border);
}

.sheet-corner {
  position: sticky;
  left: 0;
  z-index: 4;
  flex: 0 0 48px;
  background: #f3f4f6;
  border-right: 1px solid var(--color-border);
}

.sheet-colhead {
  position: relative;
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 26px;
  text-align: center;
  color: #555b66;
  border-right: 1px solid #e1e3e8;
  user-select: none;
  cursor: default;
}

.sheet-colhead.is-active,
.sheet-rowhead.is-active {
  background: #e3e8fb;
  color: var(--color-accent);
  font-weight: 600;
}

.col-resizer {
  position: absolute;
  top: 0;
  right: -3px;
  bottom: 0;
  width: 6px;
  z-index: 2;
  cursor: col-resize;
}

.col-resizer:hover,
.col-resizer.is-dragging {
  background: var(--color-accent);
}

.sheet-rows {
  position: absolute;
  left: 0;
}

.sheet-row {
  display: flex;
  height: 28px;
}

.sheet-rowhead {
  position: sticky;
  left: 0;
  z-index: 2;
  flex: 0 0 48px;
  background: #f3f4f6;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid #e1e3e8;
  font-size: 12px;
  line-height: 27px;
  text-align: center;
  color: #555b66;
  user-select: none;
}

.sheet-cell {
  flex: 0 0 auto;
  /* Stretches to the row's height, which can be set per row. */
  padding: 0 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-right: 1px solid #e1e3e8;
  border-bottom: 1px solid #e1e3e8;
  font-size: 13px;
  line-height: 27px;
  cursor: cell;
  user-select: none;
}

.sheet-cell img {
  width: auto !important;
  height: 22px !important;
  max-width: none;
  margin: 0 !important;
  float: none !important;
  display: inline !important;
  vertical-align: middle;
}

.sheet-cell.is-active {
  box-shadow: inset 0 0 0 2px var(--color-accent);
}

/* Custom cell borders in the sheet, drawn over its gridlines. Each cell
   draws its top and left (and the last column its right); the edge below
   is drawn by the next row's top, so shared lines aren't doubled. */
.sheet-cell {
  position: relative;
}

.sheet-cell-borders {
  position: absolute;
  inset: 0 -1px -1px 0;
  pointer-events: none;
}

/* A multi-cell selection: tinted over any fill color; the active cell
   (where typing goes) keeps its outline and no tint, as in Sheets. */
.sheet-cell.in-range {
  box-shadow: inset 0 0 0 9999px rgba(59, 91, 219, 0.13);
}

.sheet-cell.in-range.is-active {
  box-shadow: inset 0 0 0 2px var(--color-accent);
}

.sheet-corner {
  cursor: pointer;
}

.sheet-corner:hover {
  background: #e3e8fb;
}

/* Inside the row number's bottom edge (not hanging below it, where the next
   row number would cover it). */
.row-resizer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  cursor: row-resize;
}

.row-resizer:hover,
.row-resizer.is-dragging {
  background: var(--color-accent);
}

/* A plain-text box: a cell holds one value, formatted as a whole. */
.cell-editor {
  position: absolute;
  z-index: 5;
  display: block;
  box-sizing: border-box;
  min-height: 28px;
  margin: 0;
  padding: 4px 6px;
  border: none;
  border-radius: 0;
  resize: none;
  overflow: hidden;
  background: var(--color-page);
  box-shadow: 0 0 0 2px var(--color-accent), 0 4px 14px rgba(0, 0, 0, 0.18);
  color: var(--color-text);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  outline: none;
}

.cell-editor[hidden] {
  display: none;
}

.table-sidebar-status {
  flex: 0 0 auto;
  padding: 6px 14px;
  font-size: 12px;
  color: var(--color-muted);
  border-top: 1px solid var(--color-border);
}

/* Status bar */

.status-bar {
  display: flex;
  align-items: center;
  max-width: var(--page-width, 850px);
  margin: 0 auto 32px;
  padding: 0 16px;
  color: var(--color-muted);
  font-size: 13px;
}

.status-sep {
  margin: 0 6px;
}

.status-about-link {
  margin-left: auto;
  color: var(--color-muted);
  text-decoration: none;
}

.status-about-link:hover,
.status-about-link:focus-visible {
  color: var(--color-accent);
  text-decoration: underline;
}

/* Print */

@media print {
  /* Beats the inline value set from JS, so header copies (placed by page
     index) line up with pages that print with no gap between them. */
  :root {
    --page-gap: 0px !important;
  }

  /* Browsers drop background colors when printing unless told otherwise;
     cell fills and text highlights are content, not decoration. */
  .page-section,
  .region-layer {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* The document's name isn't part of its pages (and above page 1 it would
     push that page onto a second sheet); a PDF takes it as its file name. */
  .doc-title,
  .app-header,
  .toolbar,
  .status-bar,
  .edit-region-btn,
  .margin-hover-outline,
  .page-edit-overlay,
  .image-sidebar,
  .table-sidebar,
  .table-picker,
  .color-menu,
  .cell-border-panel,
  .popover-panel,
  .pdf-progress,
  .image-resize-overlay {
    display: none !important;
  }

  /* A selection's on-screen highlight never ends up in the PDF/printout. */
  .pl-fake-selection {
    background: none !important;
  }

  .pl-table.is-selected table {
    outline: none;
  }

  .pl-table td.pl-in-range {
    box-shadow: none;
  }

  body.has-table-sidebar .page-wrap {
    width: auto;
    margin: 0;
  }

  body,
  .page-wrap {
    background: #fff;
    margin: 0;
    padding: 0;
  }

  .page-section {
    box-shadow: none;
    margin-bottom: 0;
    page-break-after: always;
    break-after: page;
  }

  .page-section:last-child {
    page-break-after: auto;
    break-after: auto;
  }
}