/* =========================================================
   BUILD 2026-08-26.11 — MULTI-DOCUMENT / WELCOME SCREEN
   (Welcome home screen with document cards, Slides-style File
   modal, body.no-active-doc welcome state. See the big block
   at the end of this file.)
   If this line is missing from your docs.css, you are running
   a stale copy — replace it with this file.
   =========================================================
   Emerald Docs — Word Processor Styles
   EmeraldSuite design language:
   • DM Sans typography
   • Emerald accent (#239a4d / #2BD059)
   • Glassmorphism chrome (backdrop-blur)
   • Ribbon toolbar with tabbed panels + sliding indicator
   • Fluid cubic-bezier animations + blur/fade panel transitions
   Supports light & dark themes via [data-theme].
   ========================================================= */

:root {
  /* Cyan accent (default, locked — user cannot change) */
  --ui-accent: #0891b2;
  --ui-accent-hover: #0e7490;
  --ui-accent-soft: rgba(8, 145, 178, 0.10);
  --ui-accent-selected: rgba(8, 145, 178, 0.15);
  --ui-accent-border: rgba(8, 145, 178, 0.30);
  --ui-accent-ring: rgba(34, 211, 238, 0.35);
  --ring: #22d3ee;

  /* App chrome — light */
  --bg-app: #f4f5f7;
  --bg-doc-canvas: #e8eaee;
  --bg-menubar: rgba(255, 255, 255, 0.92);
  --bg-toolbar: rgba(255, 255, 255, 0.98);
  --bg-statusbar: rgba(255, 255, 255, 0.92);
  --bg-ruler: #fbfbfc;
  --bg-topbar: rgba(255, 255, 255, 0.9);
  --border-chrome: hsl(214, 25%, 90%);
  --border-strong: hsl(214, 25%, 82%);

  /* Text */
  --text-strong: #1a1a1a;
  --text-base: #383838;
  --text-muted: #6b7280;
  --text-faint: #9ca3af;

  /* Accent (alias for legacy vars) */
  --accent: var(--ui-accent);
  --accent-strong: var(--ui-accent-hover);
  --accent-soft: var(--ui-accent-soft);
  --accent-contrast: #ffffff;

  /* Page (paper) */
  --paper-shadow: 0 1px 3px rgba(15, 23, 42, 0.12), 0 12px 32px rgba(15, 23, 42, 0.10);
  --paper-bg: #ffffff;
  --paper-ink: #1a1a1a;
  --paper-margin-guide: rgba(8, 145, 178, 0.12);
  --paper-selection: rgba(34, 211, 238, 0.20);

  /* Ruler */
  --ruler-bg: #fbfbfc;
  --ruler-fg: #9ca3af;
  --ruler-line: #d8dce1;

  /* Page margins (dynamic — set by JS) */
  --page-margin-top: 96px;
  --page-margin-right: 96px;
  --page-margin-bottom: 96px;
  --page-margin-left: 96px;

  /* Modal */
  --modal-overlay: rgba(20, 24, 28, 0.45);
  --modal-bg: rgba(255, 255, 255, 0.98);
  --modal-border: hsl(214, 25%, 88%);

  /* Marks */
  --mark-bg: #fff59d;
  --mark-current: #ffb300;
  --hr-color: #d8dce1;

  --font-ui: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'DM Mono', 'Courier Prime', monospace;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 12px;
  --topbar-h: 56px;
  --ribbon-tabs-h: 38px;
  --ribbon-h: 104px;
  --ruler-h: 22px;
  --statusbar-h: 36px;

  /* Easing */
  --ease-fluid: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bouncy: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }

/* Scrollbar styling (from style.css) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

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

body {
  font-family: var(--font-ui);
  color: var(--text-base);
  background: rgb(245,245,245);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background 0.25s, color 0.25s;
}

/* ===================== App shell ===================== */
.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* ===================== Navbar (minimal overrides on top of style.css) ===================== */
.navbar {
  border-bottom: transparent;
  background-color: transparent;
  flex-shrink: 0;
  height: 4.5rem;
}

/* App icon in navbar — matching Slides (.icon-primary renders at 1.75rem = 28px
   with margin-bottom 0.2rem in the Slides app via style.css) */
.logo .icon-primary {
  width: 1.75rem;
  height: 1.75rem;
  margin-bottom: 0.2rem;
  flex-shrink: 0;
}

.navbar.sticky-top {
  z-index: 3000;
}

/* Brand mark (app-specific — the "E" icon)
   Sized to EXACTLY match the Slides navbar icon box: 1.75rem (28px) square with
   0.2rem bottom margin. This makes the .logo line box (28 + 3.2 = 31.2px) and
   therefore the "EmeraldSuite" text position pixel-identical to Slides:
   text starts at icon-left + 28 + 12(gap) instead of +30 +12 (was 2px too far
   right), and the logo block centers at the same y as Slides. */
.brand-mark {
  width: 1.75rem;
  height: 1.75rem;
  margin-bottom: 0.2rem;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #22d3ee 0%, #0891b2 100%);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(8, 145, 178, 0.35);
}

/* Save indicator pill — byte-identical to slides.css */
.save-indicator {
  background: rgba(35, 154, 77, 0.2);
  border: 1px solid rgba(35, 154, 77, 0.3);
  color: rgb(35, 154, 77);
  padding: 6px 16px;
  border-radius: 5rem;
  font-size: 12px;
  cursor: default;
  font-weight: 500;
  transition: 0.2s;
}

.save-indicator.saving {
  background: rgba(255, 193, 7, 0.2);
  border-color: rgba(255, 193, 7, 0.4);
  color: rgb(255, 193, 7);
  animation: savePulse 1.5s ease-in-out infinite;
}

@keyframes savePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.save-indicator.error {
  background: rgba(217, 48, 37, 0.2);
  border-color: rgba(217, 48, 37, 0.4);
  color: rgb(217, 48, 37);
}

/* ===================== Buttons (shared, Slides-style) ===================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 24px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-base);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: 0.2s;
  white-space: nowrap;
  min-width: 100px;
}

.btn.sm { padding: 8px 18px; font-size: 13px; min-width: 90px; }

.btn.ghost {
  background: rgba(108, 117, 125, 0.1);
  color: rgba(108, 117, 125, 0.9);
  border: 1px solid rgba(108, 117, 125, 0.2);
}

.btn.ghost:hover {
  background: rgba(108, 117, 125, 0.2);
  color: rgb(108, 117, 125);
}

.btn.ghost:active { transform: scale(0.97); }

.btn.primary {
  background: rgb(0, 95, 163);
  color: #fff;
  border: 1px solid rgba(0, 95, 163, 0.3);
  box-shadow: none;
}

.btn.primary:hover {
  background: rgb(0, 80, 140);
  border-color: rgba(0, 95, 163, 0.5);
  transform: translateY(-1px);
}

.btn.primary:active { transform: translateY(0) scale(0.97); }

/* Dropdown (Export menu) */
.dropdown { position: relative; }

.dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: var(--modal-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-chrome);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 5px;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.96);
  transition: opacity 0.18s var(--ease-fluid), transform 0.18s var(--ease-fluid), visibility 0.18s;
}

.dropdown-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.dropdown-menu button {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 9px 12px;
  border: none;
  background: transparent;
  color: var(--text-base);
  font-size: 13px;
  font-family: var(--font-ui);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.12s, color 0.12s;
}

.dropdown-menu button:hover {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
}

/* ===================== Ribbon Tabs (matching Slides) ===================== */
.ribbon-tabs {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px;
  margin: 0 12px 8px;
  background: transparent;
  overflow-x: auto;
  scrollbar-width: none;
  position: relative;
  z-index: 20;
  flex-shrink: 0;
  transition: 0.4s var(--ease-fluid);
  opacity: 1;
  transform: translateY(0);
  box-sizing: border-box;
}

.ribbon-tabs::-webkit-scrollbar { display: none; }

.ribbon-tabs-left {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  position: relative;
}

.ribbon-tabs-right {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  margin-left: auto;
  flex-shrink: 0;
}

.ribbon-tab-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  color: #636363;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: 0.18s;
  white-space: nowrap;
  line-height: 1;
}
.ribbon-tab-action:hover {
  background: var(--ui-accent);
  color: #fff;
  border-color: var(--ui-accent);
  box-shadow: 0 2px 8px var(--ui-accent-soft);
}
.ribbon-tab-action:active { transform: translateY(1px); }

.ribbon-tab {
    background: none;
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: none;
    padding: 0px 4px 4px;
    margin-left: 8px;
    margin-right: 8px;
    margin-bottom: 4px;
    cursor: pointer;
    font-size: 13px;
    color: rgba(44, 62, 80, 0.7);
    transition: background 0.2s, color 0.2s, background-color 0.2s, box-shadow 0.2s;
    font-weight: 500;
    font-family: "DM Sans", sans-serif;
    border-radius: 2px;
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
}

.ribbon-tab.active {
  background: transparent;
  color: var(--ui-accent);
  font-weight: 600;
  box-shadow: none;
}

.ribbon-tab:not(.active):not([data-tab="file"]):hover {
  background: transparent;
}

.ribbon-tab:not(.active):not([data-tab="file"])::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: -4px;
  height: 3px;
  background: rgba(44, 62, 80, 0.38);
  border-radius: 2px;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  transition: transform 0.22s var(--ease-fluid), opacity 0.18s;
}
.ribbon-tab:not(.active):not([data-tab="file"]):hover::after {
  transform: scaleX(1);
  opacity: 1;
}

/* File tab special hover */
.ribbon-tab[data-tab="file"]::before {
  content: "";
  position: absolute;
  inset: -4px -2px -2px;
  background: rgba(136, 136, 136, 0.16);
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.2s, transform 0.2s var(--ease-fluid);
  z-index: -1;
}
.ribbon-tab[data-tab="file"]:hover::before {
  opacity: 1;
  transform: scale(1);
}
.ribbon-tab[data-tab="file"]:hover { background: transparent; }

.ribbon-tab:focus-visible {
  outline-offset: 0px;
}

/* Contextual tab (Image Format) — appears only while an image is selected.
   Same styling as Slides: coloured label only; the active underline comes from
   the shared .ribbon-tab-indicator that slides beneath the active tab. */
.ribbon-tab-contextual {
  position: relative;
  color: var(--ui-accent);
}

.ribbon-tab-contextual[hidden] {
  display: none !important;
}

.ribbon-tab-contextual.active {
  color: var(--ui-accent);
  font-weight: 600;
}

.ribbon-tab-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--ui-accent);
  border-radius: 5px;
  pointer-events: none;
  z-index: 1;
  transition: transform 0.35s var(--ease-fluid), width 0.35s var(--ease-fluid), opacity 0.2s;
  will-change: transform, width;
  opacity: 0;
}

.ribbon-tab-indicator.visible { opacity: 1; }

/* ===================== Ribbon (floating box, matching Slides) ===================== */
.ribbon {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  margin: 0 12px 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 19;
  flex-shrink: 0;
  min-height: 100px;
  transition: 0.4s var(--ease-fluid);
  opacity: 1;
  transform: translateY(0);
  will-change: transform, opacity, margin;
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
  animation: ribbonSlideDown 0.5s var(--ease-bouncy);
}

@keyframes ribbonSlideDown {
  0% { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0); }
}

.ribbon-content {
  padding: 12px;
  min-height: 80px;
  max-height: 96px;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  max-width: 1900px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: auto hidden;
}

.ribbon-panel {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  justify-content: flex-start;
  min-width: max-content;
  padding-right: 12px;
  padding-left: 12px;
  margin: 0 auto;
  opacity: 0;
  filter: blur(4px);
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transition: opacity 0.3s ease-out, filter 0.3s ease-out, visibility 0.3s;
  will-change: opacity, filter;
}

.ribbon-panel.active {
  opacity: 1;
  filter: blur(0);
  visibility: visible;
  pointer-events: auto;
  position: relative;
  transition: opacity 0.3s ease-out, filter 0.3s ease-out, visibility;
}

.ribbon-panel.blur-out {
  opacity: 0;
  filter: blur(4px);
  visibility: visible;
  pointer-events: none;
  position: relative;
  transition: opacity 0.18s ease-in, filter 0.18s ease-in, visibility 0.18s;
}

.ribbon-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  padding-right: 16px;
  margin-right: 6px;
  flex-shrink: 0;
  min-width: max-content;
}

.ribbon-group:last-child {
  border-right: none;
  padding-right: 0;
  margin-right: 0;
}

.group-label, .font-group-label {
  font-size: 10px;
  font-weight: 600;
  color: #9ca3af;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-ui);
}

.ribbon-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  min-width: max-content;
}

.ribbon-controls-row {
  flex-direction: row;
  align-items: center;
  gap: 4px;
}

/* Ribbon buttons — matching Slides (vertical icon-over-label) */
.ribbon-btn {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 60px;
  transition: 0.2s;
  font-size: 11px;
  color: rgba(44, 62, 80, 0.8);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  font-weight: 500;
  font-family: var(--font-ui);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.ribbon-btn:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--ui-accent-border);
  color: rgb(44, 62, 80);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.ribbon-btn.active {
  background: var(--ui-accent-soft);
  border-color: var(--ui-accent);
  color: var(--ui-accent);
  box-shadow: inset 0 0 0 1px var(--ui-accent-border), 0 2px 8px var(--ui-accent-soft);
}

.ribbon-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.ribbon-btn span {
  white-space: nowrap;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
}

.ribbon-btn-icon {
  flex-direction: row;
  min-width: 28px;
  padding: 5px 8px;
  gap: 0;
}

.ribbon-btn-icon span { font-size: 12px; }

/* Icon-only buttons (no span/label) — base .ribbon-btn sizing, matching Slides.
   Slides keeps icon-only buttons at the default 60px min-width unless they live
   inside .font-controls (see below). */

/* Font controls wrapper (matching slides) */
.font-controls {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;
}

.font-controls .ribbon-btn {
  min-width: 32px;
  padding: 4px 6px;
}

/* Selects */
.select {
  height: 32px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-toolbar);
  padding: 0 28px 0 10px;
  font-size: 13px;
  color: var(--text-strong);
  font-family: var(--font-ui);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b7280' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.select:hover { border-color: var(--text-muted); }

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

.select.narrow { min-width: 60px; }
#blockType { min-width: 120px; }
#fontFamily { min-width: 108px; }

/* Color tool */
.color-tool {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid var(--border-chrome);
  background: rgba(255, 255, 255, 0.6);
  transition: background 0.12s, border-color 0.12s;
}

.color-tool:hover {
  border-color: var(--ui-accent);
}

.color-glyph {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-strong);
  line-height: 1;
}

.color-bar {
  width: 16px;
  height: 3px;
  margin-top: 2px;
  border-radius: 2px;
  background: #1a1a1a;
}

#hiliteColorBar { background: #fff59d; }

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

/* Legacy btn-icon for toolbar-stats / version-count etc. (kept for compat) */
.btn-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-base);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  flex-shrink: 0;
}

.btn-icon .ic {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn-icon:hover {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
}

.btn-icon.active {
  background: var(--ui-accent-selected);
  color: var(--ui-accent);
  border-color: var(--ui-accent-border);
}

.toolbar-stats {
  font-size: 12px;
  color: var(--text-muted);
  padding: 0 8px;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-weight: 500;
  transition: background 0.12s, color 0.12s;
}

.toolbar-stats:hover {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
}

/* ===================== Document scroll area ===================== */
.document-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background-size: 22px 22px;
  padding: 28px 16px 48px;
  position: relative;
  transition: background 0.25s;
}

.pages-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  transform-origin: top center;
  transition: transform 0.18s ease;
  margin: 0 auto;
  width: fit-content;
  min-width: 100%;
}

/* ===================== Page (A4 default; per-document from imports) ===== */
.page {
  position: relative;
  width: var(--emu-pw, 794px);
  height: var(--emu-ph, 1123px);
  padding: var(--page-margin-top) var(--page-margin-right) var(--page-margin-bottom) var(--page-margin-left);
  box-sizing: border-box;
  background: var(--paper-bg);
  box-shadow: rgba(0, 0, 0, 0.01) 0px 8px 12px, rgba(0, 0, 0, 0.08) 0px 2px 8px;
  border-radius: 4px;
  flex-shrink: 0;
  overflow: hidden;
  animation: pageFadeIn 0.3s ease;
  transition: box-shadow 0.3s;
}

@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Modal animations — exact Slides' keyframes (clean opacity fade on
   entrance, exit is a clean 0.23s opacity fade, removed 230ms after
   `.closing`). */
@keyframes fadeInModal {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeOutModal {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes fadeOutOverlay {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* Margin guide removed (per user request) — clean paper like Slides */

/* Guidelines (Show > Guidelines) — center crosshair on each page, using the
   docs accent (cyan). */
.pages-wrapper.show-guides .page::before,
.pages-wrapper.show-guides .page::after {
  content: "";
  position: absolute;
  background: rgba(8, 145, 178, 0.55);
  pointer-events: none;
  z-index: 5;
}
.pages-wrapper.show-guides .page::before {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-0.5px);
}
.pages-wrapper.show-guides .page::after {
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  transform: translateY(-0.5px);
}

/* Page number badge removed (per user request) */
.page-badge {
  display: none !important;
}

.page-content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.5;
  color: var(--paper-ink);
  outline: none;
  overflow: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
  caret-color: var(--accent);
}

.page-content:focus { outline: none; }

/* Selection color */
.page-content ::selection { background: var(--paper-selection); }

/* Placeholder for empty first page */
.page-content:empty::before,
.page-content > p:only-child:empty::before {
  content: "Start writing…";
  color: var(--text-faint);
  pointer-events: none;
  font-style: italic;
}

/* ===================== Content typography ===================== */
.page-content p {
  margin: 0 0 10px;
  min-height: 1em;
}

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

.page-content h1 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 14px;
  letter-spacing: -0.3px;
  color: color-mix(in srgb, var(--paper-ink) 90%, #14202b);
}

.page-content h2 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  margin: 16px 0 10px;
  color: color-mix(in srgb, var(--paper-ink) 88%, #18232e);
}

.page-content h3 {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  margin: 12px 0 8px;
  color: color-mix(in srgb, var(--paper-ink) 85%, #1c2733);
}

.page-content h4 {
  font-size: 14px;
  font-weight: 600;
  margin: 10px 0 6px;
  color: color-mix(in srgb, var(--paper-ink) 82%, #232e3a);
}

.page-content blockquote {
  margin: 8px 0;
  padding: 6px 0 6px 16px;
  border-left: 3px solid var(--accent);
  color: color-mix(in srgb, var(--paper-ink) 80%, #3f4a55);
  font-style: italic;
  background: var(--accent-soft);
  border-radius: 0 4px 4px 0;
}

.page-content pre {
  font-family: "Courier Prime", "Courier New", monospace;
  background: color-mix(in srgb, var(--paper-ink) 5%, var(--paper-bg));
  border: 1px solid var(--border-chrome);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 8px 0;
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  color: color-mix(in srgb, var(--paper-ink) 88%, #232e3a);
}

.page-content ul,
.page-content ol {
  margin: 0 0 10px;
  padding-left: 28px;
}

.page-content ul li,
.page-content ol li { margin: 2px 0; }

.page-content a {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.page-content b, .page-content strong { font-weight: 700; }
.page-content i, .page-content em { font-style: italic; }
.page-content u { text-decoration: underline; }
.page-content s, .page-content strike { text-decoration: line-through; }
.page-content sup, .page-content sub { font-size: smaller; }

/* Images */
.page-content img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
  margin: 8px 0;
}

/* Tables */
.page-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 8px 0;
  font-size: 12.5px;
}

.page-content th,
.page-content td {
  border: 1px solid var(--border-strong);
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
  min-width: 40px;
}

.page-content th {
  background: color-mix(in srgb, var(--paper-ink) 5%, var(--paper-bg));
  font-weight: 600;
}

.page-content td[contenteditable]:focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: var(--accent-soft);
}

/* Horizontal rule */
.page-content hr {
  border: none;
  border-top: 2px solid var(--hr-color);
  margin: 16px 0;
  border-radius: 1px;
}

/* Find highlight marks */
.page-content mark.emdocs-mark {
  background: var(--mark-bg);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

.page-content mark.emdocs-mark.current {
  background: var(--mark-current);
  color: #fff;
}

/* ===================== Status bar (Slides-style floating pill) ===================== */
.statusbar {
  display: flex !important;
  align-items: center;
  /* space-between keeps .status-right (zoom / lang / A4) pinned to the right
     end of the pill, like the Slides statbar (which uses a flex:1 spacer). */
  justify-content: space-between;
  gap: 0;
  margin: 10px;
  padding: 0 20px;
  background: rgb(241, 245, 249);
  color: rgb(100, 116, 139);
  font-size: 12px;
  font-family: "DM Sans", system-ui, sans-serif;
  user-select: none;
  flex-shrink: 0;
  min-height: 30px;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: rgba(0, 0, 0, 0.03) 0px 2px 8px;
  z-index: 20;
}

/* Items / separators / toggle buttons — ported from slides .statbar-* */
.statbar-item, .statusbar .statbar-item {
  white-space: nowrap;
  padding: 0 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgb(100, 116, 139);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 12px;
}

.statbar-sep {
  color: rgb(148, 163, 184);
  flex-shrink: 0;
  opacity: 1;
}

.statbar-spacer { flex: 1 1 0; }

.statbar-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgb(100, 116, 139);
  padding: 3px 10px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.statbar-toggle:hover {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
  border-color: var(--ui-accent-border);
}
.statbar-toggle.active {
  background: var(--ui-accent-selected);
  color: var(--ui-accent);
  border-color: var(--ui-accent-border);
}

/* Page info — let statbar-item style win */
.page-info {
  color: inherit;
  font-weight: inherit;
  min-width: auto;
  text-align: left;
  letter-spacing: inherit;
}

/* Zoom percentage — plain statbar-item, NOT clickable (matches Slides' #zoomStatus).
   Zoom is changed via Ctrl+Scroll or the View → Zoom ribbon controls. */
#statusZoomPct {
  font-variant-numeric: tabular-nums;
  cursor: default;
}

/* A4 page-size label — static, informational only.
   NOT clickable: no pointer events, no hover affordance, no popup.
   (The Slides status bar has no page-size switcher; clicking A4 in Docs
   used to open a blue quick-switch menu — removed per user request.) */
.page-size-label {
  color: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  background: none;
  border: none;
  cursor: default;
  padding: 0 8px;
  border-radius: 4px;
  pointer-events: none !important;
  user-select: none;
}
.page-size-label:hover,
.page-size-label:focus,
.page-size-label:focus-visible,
.page-size-label:active {
  background: none;
  color: inherit;
  outline: none;
  box-shadow: none;
}

/* ===================== Modal / Dialog (matching Slides link-modal) ===================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  padding: 20px;
}

.modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.modal {
  position: relative;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 20px 60px;
  width: 480px;
  max-width: 92%;
  max-height: calc(100vh - 64px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.3s;
  will-change: opacity;
}

.modal-overlay.open .modal {
  opacity: 1;
  animation: 0.25s ease 0s 1 normal both running fadeInModal;
}

/* Closing — Slides' fadeOut (0.23s, removed 230ms after .closing is added). */
.modal-overlay.closing {
  animation: 0.23s ease 0s 1 normal forwards running fadeOutOverlay;
  pointer-events: none;
}

.modal-overlay.closing .modal {
  animation: 0.23s ease-in 0s 1 normal forwards running fadeOutModal;
}

.modal-sm { width: 380px; }
.modal-find { width: 460px; }

/* Header — centered title with a circular icon badge above it, stacked
   vertically (exact Slides' .link-modal-header / .delete-modal-header
   structure). The close button is pulled out of flow via position:absolute
   so it floats at the top-right corner of the modal card, exactly like
   Slides' .link-modal-close-btn. */
.modal-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 24px 0;
  border-bottom: none;
  position: relative;
}

.modal-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: rgba(44, 62, 80, 0.9);
  font-family: var(--font-ui);
  text-align: center;
}

/* Icon badge — 48px colored circle with a white 24px stroke SVG, centered
   above the title (exact Slides' .link-modal-icon / .delete-modal-icon). */
.modal-icon {
  width: 48px;
  height: 48px;
  background: rgb(0, 95, 163);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  color: white;
  flex-shrink: 0;
}

/* Close button — floats at top-right corner of the modal (exact Slides'
   .link-modal-close-btn: 30x30 hit target, 8px radius, 18px SVG glyph,
   subtle hover). */
.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: rgba(108, 117, 125, 0.5);
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  z-index: 2;
  padding: 0;
}

.modal-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(44, 62, 80, 0.7);
}

/* Body — generous padding, matches Slides' .link-modal-content (24px). */
.modal-body {
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 16px;
  padding-bottom: 24px;
  overflow-y: auto;
  flex: 1;
}

/* Footer — centered buttons, no border bar (matches Slides' centered actions). */
.modal-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0px 16px 24px 24px;
  border-top: none;
}

.modal-foot .modal-nav,
.modal-foot .modal-actions {
  display: flex;
  gap: 12px;
}

/* Modal buttons — exact Slides' .link-modal-btn sizing (10px 24px padding,
   14px font, 100px min-width) instead of the smaller .btn.sm chrome. */
.modal-foot .btn {
  padding: 10px 24px;
  font-size: 14px;
  min-width: 100px;
}

/* Slides' primary hover: flat darker blue, no lift. */
.modal-foot .btn.primary:hover {
  background: rgb(0, 77, 135);
  border-color: rgba(0, 95, 163, 0.3);
  transform: none;
}

.modal-foot .btn.primary:active {
  transform: none;
}

/* Form fields — styled like Slides' .link-input */
.field {
  margin-bottom: 16px;
}

.field:last-child { margin-bottom: 0; }

.field label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: rgba(44, 62, 80, 0.8);
  margin-bottom: 8px;
  font-family: var(--font-ui);
}

.field input[type="text"],
.field input[type="url"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.8);
  color: rgba(44, 62, 80, 0.9);
  font-size: 14px;
  font-family: var(--font-ui);
  transition: 0.2s;
}

.field input:focus {
  outline: none;
  border-color: rgba(0, 122, 204, 0.5);
  box-shadow: rgba(0, 122, 204, 0.1) 0px 0px 0px 3px;
  background: rgba(255, 255, 255, 0.95);
}

.field input[type="file"] {
  font-size: 12px;
  color: var(--text-muted);
}

.input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.input-row input { flex: 1; }

.match-count {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 56px;
  text-align: right;
}

.field-checks {
  display: flex;
  gap: 16px;
  margin-top: 4px;
}

.check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-base);
  cursor: pointer;
  user-select: none;
}

.check input { accent-color: var(--accent); cursor: pointer; }

/* Table grid picker */
.table-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 3px;
  margin-bottom: 8px;
  user-select: none;
}

.table-grid-cell {
  aspect-ratio: 1;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  background: var(--modal-bg);
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}

.table-grid-cell.hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

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

/* Stats grid */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.stat-item {
  background: color-mix(in srgb, var(--text-base) 5%, transparent);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.stat-item .stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-strong);
  line-height: 1.2;
}

.stat-item .stat-label {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ===================== Outline Sidebar ===================== */
.outline-panel {
  display: none;
  flex-direction: column;
  width: 280px;
  min-width: 280px;
  max-width: 280px;
  flex-shrink: 0;
  background: transparent;
  z-index: 10;
  transition: width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.outline-panel.open {
  display: flex;
  animation: 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) paneSlideInRight;
}

@keyframes paneSlideInRight {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

.outline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Side-panel spacing scale — shared with the Slides animation pane and the
     Sheets chart pane:
       header  8px 16px   body  8px 16px 12px   foot  8px 16px 12px
     container margin 0 */
  padding: 4px 12px;
  gap: 8px;
  flex-shrink: 0;
}

.outline-head h3 {
  margin: 0;
  /* 14px/700 with the same tracking and ink as Slides .ap-header and the
     Sheets .cp-title — these three side-panel titles read as one set. */
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(44, 62, 80, 0.95);
}

/* Side-panel close (Outline / Pages / Footnotes) matches Slides' Animation
   Pane close button: 14px SVG glyph, compact hit target. */
.outline-head .modal-close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: rgba(44, 62, 80, 0.5);
  border-radius: 6px;
  line-height: 1;
  transition: background 0.2s, color 0.2s;
  position: static;
  margin-left: auto;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: auto;
  height: auto;
}

.outline-head .modal-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(44, 62, 80, 0.9);
}

.outline-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px 12px;
}

.outline-empty {
  color: var(--text-faint);
  font-size: 12.5px;
  font-style: italic;
  padding: 24px 12px;
  text-align: center;
  margin: 0;
  line-height: 1.5;
}

.outline-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: 1px solid rgba(0, 0, 0, 0.04);
  background: rgba(255, 255, 255, 0.7);
  color: rgba(44, 62, 80, 0.9);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 12px;
  margin-bottom: 6px;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.outline-item:hover {
  background: rgba(8, 145, 178, 0.06);
  border-color: rgba(8, 145, 178, 0.12);
  box-shadow: rgba(8, 145, 178, 0.08) 0px 2px 8px;
  color: var(--ui-accent-hover);
}

.outline-item.level-h1 { font-weight: 600; font-size: 13.5px; color: rgba(44, 62, 80, 0.95); }
.outline-item.level-h2 { font-weight: 500; }
.outline-item.level-h3 { font-size: 12.5px; color: rgba(44, 62, 80, 0.72); }
.outline-item.level-h4 { font-size: 12px; color: rgba(44, 62, 80, 0.6); }

.outline-item .outline-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  color: var(--ui-accent);
  background: rgba(8, 145, 178, 0.12);
  border-radius: 4px;
  padding: 1px 6px;
  letter-spacing: 0.02em;
}

/* ===================== Shortcuts Grid ===================== */
.shortcuts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.shortcut-section {
  border-top: 1px solid var(--modal-border);
  padding: 8px 0;
}

.shortcut-section:first-child { border-top: none; padding-top: 0; }

.shortcut-section h4 {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
}

.shortcut-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 13px;
  color: var(--text-base);
}

.shortcut-row .desc { color: var(--text-base); }

.shortcut-row .keys {
  display: flex;
  gap: 4px;
  align-items: center;
}

.kbd {
  display: inline-block;
  min-width: 22px;
  padding: 2px 7px;
  font-family: "Courier Prime", monospace;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-strong);
  background: color-mix(in srgb, var(--text-base) 8%, var(--modal-bg));
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  text-align: center;
  line-height: 1.4;
}

/* ===================== Page Break element ===================== */
.page-content .emdocs-page-break {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  padding: 6px 0;
  border-top: 1px dashed var(--border-strong);
  border-bottom: 1px dashed var(--border-strong);
  color: var(--text-faint);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.page-content .emdocs-page-break:hover {
  color: var(--ui-accent);
  border-top-color: var(--ui-accent-border);
  border-bottom-color: var(--ui-accent-border);
  background: var(--ui-accent-soft);
  user-select: none;
  position: relative;
}

.page-content .emdocs-page-break::before {
  content: "";
  flex: 1;
  border-top: 1px dashed var(--border-strong);
  margin-top: 2px;
}

.page-content .emdocs-page-break::after {
  content: "";
  flex: 1;
  border-top: 1px dashed var(--border-strong);
  margin-top: 2px;
}

.page-content .emdocs-page-break .pb-label {
  flex: 0 0 auto;
}

/* ===================== Link hover preview ===================== */
.link-preview {
  position: fixed;
  z-index: 250;
  background: var(--modal-bg);
  border: 1px solid var(--modal-border);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--text-base);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  max-width: 420px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s, transform 0.15s;
}

.link-preview.show {
  opacity: 1;
  transform: translateY(0);
}

.link-preview .lp-url {
  color: var(--accent-strong);
  font-weight: 600;
  font-size: 14px;
  word-break: break-all;
}

.link-preview .lp-hint {
  color: var(--text-faint);
  font-size: 13px;
  margin-top: 4px;
}

/* ===================== Image resize handles ===================== */
.page-content img[data-selected="true"] {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.page-content img[data-resizing="true"] {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
  opacity: 0.9;
}

.img-resize-overlay {
  position: fixed;
  z-index: 240;
  pointer-events: none;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-sizing: border-box;
}

.img-resize-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--accent);
  border: 2px solid var(--paper-bg);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  pointer-events: auto;
  cursor: pointer;
  z-index: 241;
}

.img-resize-handle.handle-nw { top: -6px; left: -6px; cursor: nwse-resize; }
.img-resize-handle.handle-n  { top: -6px; left: 50%; margin-left: -6px; cursor: ns-resize; }
.img-resize-handle.handle-ne { top: -6px; right: -6px; cursor: nesw-resize; }
.img-resize-handle.handle-e  { top: 50%; right: -6px; margin-top: -6px; cursor: ew-resize; }
.img-resize-handle.handle-se { bottom: -6px; right: -6px; cursor: nwse-resize; }
.img-resize-handle.handle-s  { bottom: -6px; left: 50%; margin-left: -6px; cursor: ns-resize; }
.img-resize-handle.handle-sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
.img-resize-handle.handle-w  { top: 50%; left: -6px; margin-top: -6px; cursor: ew-resize; }

/* ===================== Version history list ===================== */
.versions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 80px;
}

.version-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-chrome);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--text-base) 3%, var(--modal-bg));
  transition: border-color 0.15s, background 0.15s;
}

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

.version-info {
  flex: 1;
  min-width: 0;
}

.version-time {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-strong);
  margin-bottom: 2px;
}

.version-preview {
  font-size: 13px;
  color: var(--text-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.version-actions {
  flex-shrink: 0;
}

/* ===================== Goal tracker ===================== */
.goal-bar-wrap {
  margin: 8px 0 4px;
}

.goal-bar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 12px;
}

.goal-bar-label {
  color: var(--text-muted);
  font-weight: 500;
}

.goal-bar-value {
  color: var(--text-strong);
  font-weight: 600;
}

.goal-bar-value .goal-current {
  color: var(--accent-strong);
}

.goal-bar-value .goal-divider {
  color: var(--text-faint);
  margin: 0 3px;
}

.goal-bar-track {
  height: 8px;
  background: color-mix(in srgb, var(--text-base) 10%, transparent);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.goal-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-strong) 100%);
  border-radius: 4px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.goal-bar-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
  animation: goalShimmer 2s infinite;
}

@keyframes goalShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.goal-bar-fill.complete {
  background: linear-gradient(90deg, var(--accent) 0%, #2ecc8f 100%);
}

.goal-bar-fill.over {
  background: linear-gradient(90deg, #e0a800 0%, #c0392b 100%);
}

.goal-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.goal-input-row input[type="number"] {
  width: 80px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--modal-bg);
  color: var(--text-strong);
  font-family: var(--font-ui);
  font-size: 12.5px;
}

.goal-input-row input[type="number"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.goal-clear {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  text-decoration: underline;
  font-family: var(--font-ui);
}

.goal-clear:hover { color: var(--accent-strong); }

/* ===================== Document statistics chart ===================== */
.stats-chart-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--modal-border);
}

.stats-chart-section h4 {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
}

.stat-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 12px;
}

.stat-bar-label {
  flex: 0 0 90px;
  color: var(--text-base);
}

.stat-bar-track {
  flex: 1;
  height: 14px;
  background: color-mix(in srgb, var(--text-base) 8%, transparent);
  border-radius: 3px;
  overflow: hidden;
}

.stat-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.5s ease;
  min-width: 2px;
}

.stat-bar-fill:nth-child(1) { background: var(--accent); }

.stat-bar-value {
  flex: 0 0 50px;
  text-align: right;
  font-weight: 600;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

.reading-time-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: linear-gradient(135deg, var(--accent-soft) 0%, transparent 100%);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: var(--radius-sm);
  margin-top: 12px;
}

.reading-time-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-contrast);
  flex-shrink: 0;
}

.reading-time-icon svg { width: 20px; height: 20px; }

.reading-time-text { flex: 1; }
.reading-time-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-strong);
  line-height: 1.2;
}

.reading-time-label {
  font-size: 11.5px;
  color: var(--text-muted);
}

/* Writing time grid — same scale as Reading time / stat items */
.writing-time-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.writing-time-item {
  background: color-mix(in srgb, var(--text-base) 5%, transparent);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.writing-time-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-strong);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.writing-time-label {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ===================== Focus mode ===================== */
.focus-bar {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: #1a1d21;
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  z-index: 25;
  opacity: 0;
  transition: opacity 0.3s;
}

.app.focus-mode .focus-bar {
  display: flex;
  opacity: 1;
}

.app.focus-mode .focus-bar:hover {
  opacity: 1;
}

.focus-bar .pp-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.focus-bar .btn {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-color: transparent;
}

.focus-bar .btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

.app.focus-mode .topbar,
.app.focus-mode .ribbon-tabs,
.app.focus-mode .ribbon,
.app.focus-mode .document-rulers {
  display: none !important;
}

.app.focus-mode .statusbar {
  opacity: 0;
  pointer-events: none;
}

.app.focus-mode .document-scroll {
  background: var(--paper-bg);
  background-image: none;
  padding: 60px 16px 60px;
}

.app.focus-mode .pages-wrapper {
  gap: 40px;
}

.app.focus-mode .page {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: opacity 0.3s;
}

.app.focus-mode .page:not(:first-child) {
  opacity: 0.35;
}

.app.focus-mode .page:first-child {
  box-shadow: 0 4px 24px rgba(15, 157, 110, 0.12), 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* ===================== Session timer ===================== */
.session-timer {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.12s, color 0.12s;
}

.session-timer:hover {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.session-timer svg { opacity: 0.7; }

/* ===================== Word cloud ===================== */
.word-cloud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 8px;
  min-height: 60px;
  padding: 8px 4px;
  line-height: 1;
}

.word-cloud-item {
  display: inline-block;
  color: var(--accent-strong);
  font-weight: 600;
  transition: transform 0.15s, color 0.15s;
  cursor: default;
}

.word-cloud-item:hover {
  transform: scale(1.15);
  color: var(--accent);
}

.word-cloud-empty {
  color: var(--text-faint);
  font-size: 12px;
  font-style: italic;
  text-align: center;
  width: 100%;
  padding: 12px 0;
  margin: 0;
}

/* ===================== Modal helper hint text ===================== */
.dict-hint {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 12px;
}

/* ===================== Print preview ===================== */
.app.print-preview .menubar,
.app.print-preview .toolbar,
.app.print-preview .statusbar,
.app.print-preview .document-rulers {
  filter: blur(0);
}

.print-preview-bar {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--accent-strong);
  color: var(--accent-contrast);
  font-size: 13px;
  font-weight: 500;
  z-index: 25;
}

.app.print-preview .print-preview-bar {
  display: flex;
}

.print-preview-bar .pp-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.print-preview-bar .pp-actions {
  display: flex;
  gap: 6px;
}

.print-preview-bar .btn {
  background: rgba(255, 255, 255, 0.15);
  color: var(--accent-contrast);
  border-color: transparent;
}

.print-preview-bar .btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

.print-preview-bar .btn.primary {
  background: #fff;
  color: var(--accent-strong);
  border-color: #fff;
}

.app.print-preview .document-scroll {
  background: #5a6168;
  background-image: none;
}

.app.print-preview .page {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.app.print-preview .page::before {
  border-color: rgba(15, 157, 110, 0.25);
}

/* ===================== Outline search ===================== */
.outline-search {
  position: relative;
  padding: 4px 12px 4px;
  flex-shrink: 0;
}

.outline-search-icon {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  pointer-events: none;
}

.outline-search input {
  width: 100%;
  height: 28px;
  padding: 0px 10px 0px 30px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--modal-bg);
  color: var(--text-strong);
  font-size: 12.5px;
  font-family: var(--font-ui);
  transition: border-color 0.15s, box-shadow 0.15s;
}

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

.outline-search input::placeholder { color: var(--text-faint); }

.outline-item.hidden { display: none; }

.outline-no-match {
  color: var(--text-faint);
  font-size: 12.5px;
  font-style: italic;
  padding: 16px 12px;
  text-align: center;
  margin: 0;
  display: none;
}

.outline-no-match.show { display: block; }

/* ===================== Margins dialog ===================== */
.margin-presets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.preset-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--modal-bg);
  color: var(--text-base);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

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

.preset-btn.active {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-color: var(--accent);
}

.preset-hint {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 1px;
}

.preset-btn.active .preset-hint { color: var(--accent-strong); }

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

.margin-input-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.margin-input-item input {
  width: 100%;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--modal-bg);
  color: var(--text-strong);
  font-size: 13px;
  font-family: var(--font-ui);
  transition: border-color 0.15s, box-shadow 0.15s;
}

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

.margin-input-label {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
}

/* ===================== Confetti celebration ===================== */
.confetti-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 400;
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  width: 10px;
  height: 14px;
  top: -20px;
  opacity: 0;
  animation: confettiFall 2.6s ease-in forwards;
}

@keyframes confettiFall {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translateY(100vh) rotate(720deg);
  }
}

/* ===================== Autosave timestamp ===================== */
.autosave.has-time {
  cursor: pointer;
}

.autosave-time {
  color: var(--text-faint);
  font-size: 11px;
  margin-left: 2px;
}

/* ===================== Readability gauge ===================== */
.readability-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}

.readability-gauge {
  position: relative;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
}

.readability-gauge svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.readability-gauge .gauge-bg {
  fill: none;
  stroke: color-mix(in srgb, var(--text-base) 12%, transparent);
  stroke-width: 8;
}

.readability-gauge .gauge-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s ease, stroke 0.3s;
}

.readability-gauge .gauge-fill.hard { stroke: #c0392b; }
.readability-gauge .gauge-fill.medium { stroke: #e0a800; }
.readability-gauge .gauge-fill.easy { stroke: var(--accent); }

.readability-score {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.readability-score-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-strong);
  line-height: 1;
}

.readability-score-unit {
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 1px;
}

.readability-info {
  flex: 1;
  min-width: 0;
}

.readability-level {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-strong);
  margin-bottom: 4px;
}

.readability-level.hard { color: #c0392b; }
.readability-level.medium { color: #e0a800; }

.readability-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ===================== Word frequency list ===================== */
.word-freq-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.word-freq-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}

.word-freq-word {
  flex: 0 0 90px;
  color: var(--text-base);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.word-freq-bar {
  flex: 1;
  height: 14px;
  background: color-mix(in srgb, var(--text-base) 8%, transparent);
  border-radius: 3px;
  overflow: hidden;
}

.word-freq-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-strong) 100%);
  border-radius: 3px;
  transition: width 0.5s ease;
}

.word-freq-count {
  flex: 0 0 36px;
  text-align: right;
  font-weight: 600;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

.word-freq-empty {
  color: var(--text-faint);
  font-size: 12px;
  font-style: italic;
  text-align: center;
  padding: 12px 0;
  margin: 0;
}

/* ===================== Distribution chart ===================== */
.dist-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 70px;
  padding: 4px 0;
}

.dist-bar {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  height: 100%;
  justify-content: flex-end;
}

.dist-bar-fill {
  width: 100%;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%);
  border-radius: 3px 3px 0 0;
  min-height: 2px;
  transition: height 0.5s ease;
  position: relative;
}

.dist-bar-fill:hover {
  background: linear-gradient(180deg, #2ecc8f 0%, var(--accent) 100%);
}

.dist-bar-fill .dist-count {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-base);
  opacity: 0;
  transition: opacity 0.15s;
  white-space: nowrap;
}

.dist-bar-fill:hover .dist-count { opacity: 1; }

.dist-bar-label {
  font-size: 9px;
  color: var(--text-muted);
  white-space: nowrap;
}

.dist-empty {
  color: var(--text-faint);
  font-size: 12px;
  font-style: italic;
  text-align: center;
  padding: 20px 0;
}

/* ===================== Writing issues ===================== */
.issues-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.issue-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border-chrome);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, #e0a800 6%, var(--modal-bg));
  font-size: 12.5px;
  color: var(--text-base);
}

.issue-item .issue-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: #e0a800;
}

.issue-content { flex: 1; min-width: 0; }

.issue-text { color: var(--text-base); }

.issue-text .issue-highlight {
  background: rgba(224, 168, 0, 0.2);
  border-radius: 2px;
  padding: 0 2px;
  font-weight: 600;
}

.issue-suggestion {
  color: var(--accent-strong);
  font-weight: 600;
  margin-left: 4px;
}

.issue-fix {
  flex-shrink: 0;
  font-size: 11px;
  padding: 2px 8px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: transparent;
  color: var(--accent-strong);
  cursor: pointer;
  font-family: var(--font-ui);
  transition: background 0.12s, color 0.12s;
}

.issue-fix:hover {
  background: var(--accent);
  color: var(--accent-contrast);
}

.issues-empty {
  color: var(--text-faint);
  font-size: 12px;
  font-style: italic;
  text-align: center;
  padding: 12px 0;
  margin: 0;
}

/* ===================== Margin preview diagram ===================== */
.margin-preview-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}

.margin-preview {
  width: 140px;
  height: 180px;
  position: relative;
  background: var(--paper-bg);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.margin-preview::before {
  content: "";
  position: absolute;
  top: var(--pv-top);
  right: var(--pv-right);
  bottom: var(--pv-bottom);
  left: var(--pv-left);
  background: var(--accent-soft);
  border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 1px;
}

.margin-preview-page {
  position: absolute;
  top: var(--pv-top);
  right: var(--pv-right);
  bottom: var(--pv-bottom);
  left: var(--pv-left);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
}

.margin-preview-page::before,
.margin-preview-page::after {
  content: "";
  height: 3px;
  background: color-mix(in srgb, var(--text-base) 20%, transparent);
  border-radius: 1px;
}

.margin-preview-page::before { width: 80%; }
.margin-preview-page::after { width: 60%; }

/* ===================== Page thumbnails panel ===================== */
.thumbnails-panel {
  display: none;
  flex-direction: column;
  width: 240px;
  margin: 0;
  min-width: 240px;
  max-width: 240px;
  flex-shrink: 0;
  background: transparent;
  z-index: 10;
  transition: width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.thumbnails-panel.open {
  display: flex;
  margin-left: 6px;
  animation: 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) paneSlideInLeft;
}

@keyframes paneSlideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

.thumbnails-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.thumbnail-item {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  background: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.03) 0px 1px 3px;
  transition: transform 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.thumbnail-item:hover {
  transform: translateY(-2px);
  background: rgba(8, 145, 178, 0.06);
  border-color: rgba(8, 145, 178, 0.12);
  box-shadow: rgba(8, 145, 178, 0.08) 0px 2px 8px;
}

.thumbnail-item.active {
  background: rgba(8, 145, 178, 0.1);
  border-color: rgba(8, 145, 178, 0.2);
  box-shadow: rgba(8, 145, 178, 0.12) 0px 2px 12px;
  outline: none;
}

.thumbnail-item.active .thumbnail-page {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.25);
}

.thumbnail-page {
  width: 132px;
  height: 185px;
  background: var(--paper-bg);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
  transition: border-color 0.12s, box-shadow 0.12s;
  flex-shrink: 0;
}

/* 1:1 scaled page clone — absolute inside the 132×185 thumbnail frame,
   inheriting the real .page typography/colors/padding. */
.thumbnail-page .page[data-thumb="1"] {
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: none;
  border-radius: 0;
  border: none;
  animation: none;
  pointer-events: none;
}

.thumbnail-label {
  font-size: 11px;
  color: rgba(44, 62, 80, 0.6);
  font-weight: 500;
}

.thumbnail-item.active .thumbnail-label {
  color: var(--ui-accent-hover);
  font-weight: 600;
}

/* ===================== Brand sub-label ===================== */
.brand-sub {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  line-height: 1.1;
  margin-top: -1px;
}

/* ===================== Templates grid ===================== */
.templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.template-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  border: 1px solid var(--border-chrome);
  border-radius: var(--radius);
  background: var(--modal-bg);
  cursor: pointer;
  transition: border-color 0.18s var(--ease-fluid), box-shadow 0.18s var(--ease-fluid), transform 0.12s var(--ease-fluid);
  text-align: center;
}

.template-card:hover {
  border-color: var(--ui-accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.template-preview {
  width: 100%;
  height: 120px;
  border: 1px solid var(--border-chrome);
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}

.template-preview .tp-line { height: 3px; background: var(--text-faint); border-radius: 1px; opacity: 0.4; }
.template-preview .tp-line.title { height: 6px; background: var(--ui-accent); opacity: 0.6; width: 60%; margin-bottom: 2px; }
.template-preview .tp-line.short { width: 70%; }
.template-preview .tp-line.long { width: 100%; }
.template-preview .tp-line.med { width: 85%; }

.template-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
}

.template-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
}

/* ===================== Symbol picker =====================
   The modal-box picker was replaced by the bottom-docked Symbol Bar
   (Slides symbolToolbar parity) — see .symbol-toolbar styles near the
   Draw mode section below. */

/* ===================== Watermark ===================== */
.watermark-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.watermark-presets .preset-btn {
  min-width: auto;
  padding: 6px 10px;
  font-size: 11px;
}

.page-watermark {
  /* Robust centering: the page box is the containing block, so inset 0 +
     margin auto + a flex-less one-liner keeps the text dead-center on the
     PAGE regardless of margins/padding; rotate happens around the center. */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-30deg);
  font-size: 72px;
  font-weight: 800;
  color: var(--text-faint);
  opacity: 0.12;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  letter-spacing: 0.1em;
  z-index: 0;
}

/* ===================== Paste special ===================== */
.paste-special-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.paste-special-options .check {
  padding: 8px 10px;
  border: 1px solid var(--border-chrome);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.paste-special-options .check:hover { border-color: var(--ui-accent-border); }
.paste-special-options .check input { margin-right: 6px; accent-color: var(--ui-accent); }

/* ===================== Comments panel ===================== */
.comments-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  height: 100vh;
  height: 100dvh;
  background: var(--modal-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-left: 1px solid var(--modal-border);
  /* Shadow only when open — see .outline-panel note about the closed-state
     shadow bleeding a dark band onto the right edge of the screen. */
  z-index: 150;
  transform: translateX(100%);
  transition: transform 0.28s var(--ease-bouncy), box-shadow 0.28s var(--ease-bouncy);
  display: flex;
  flex-direction: column;
}

.comments-panel.open {
  transform: translateX(0);
  box-shadow: -8px 0 28px rgba(0, 0, 0, 0.12);
}

.comments-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.comments-foot {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--modal-border);
}

.comment-item {
  padding: 10px 12px;
  border: 1px solid var(--border-chrome);
  border-left: 3px solid var(--ui-accent);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  background: var(--modal-bg);
  transition: opacity 0.2s;
}

.comment-item.resolved { opacity: 0.5; border-left-color: var(--text-faint); }

.comment-quote {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  background: var(--ui-accent-soft);
  padding: 4px 8px;
  border-radius: 3px;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.comment-text {
  font-size: 13px;
  color: var(--text-base);
  margin-bottom: 6px;
  line-height: 1.4;
}

.comment-text[contenteditable]:focus { outline: 1px solid var(--ui-accent); border-radius: 2px; }

.comment-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--text-faint);
}

.comment-actions {
  display: flex;
  gap: 6px;
}

.comment-actions button {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  font-family: var(--font-ui);
  padding: 2px 4px;
  border-radius: 3px;
  transition: color 0.12s, background 0.12s;
}

.comment-actions button:hover { color: var(--ui-accent); background: var(--ui-accent-soft); }

/* ===================== View modes ===================== */
.app.view-web .page {
  height: auto;
  min-height: 0;
  box-shadow: none;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--border-chrome);
  margin-bottom: 0;
  animation: none;
}

.app.view-web .page::before,
.app.view-web .page-badge { display: none; }

.app.view-draft .page {
  box-shadow: none;
  border: 1px solid var(--border-chrome);
}

.app.view-draft .page-content {
  color: var(--text-base);
}

.app.view-read .topbar,
.app.view-read .ribbon-tabs,
.app.view-read .ribbon,
.app.view-read .document-rulers,
.app.view-read .statusbar {
  display: none !important;
}

.app.view-read .document-scroll {
  background: #5a6168;
  background-image: none;
  padding: 40px 16px;
}

.app.view-read .page {
  max-width: 700px;
  margin: 0 auto;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.app.view-read .page-content {
  font-size: 17px;
  line-height: 1.8;
}

/* ===================== Drop cap ===================== */
.page-content p.has-dropcap::first-letter {
  float: left;
  font-size: 3.2em;
  line-height: 0.8;
  font-weight: 700;
  margin: 0.05em 0.08em 0 0;
  color: var(--ui-accent);
}

/* ===================== Columns ===================== */
.page-content.is-cols-2 {
  column-count: 2;
  column-gap: 28px;
  column-rule: 1px solid var(--border-chrome);
}

.page-content.is-cols-3 {
  column-count: 3;
  column-gap: 24px;
  column-rule: 1px solid var(--border-chrome);
}

.page-content.is-cols-2 p,
.page-content.is-cols-3 p {
  break-inside: avoid;
}

/* ===================== Header / Footer / Page number fields ===================== */
.page-header, .page-footer {
  position: absolute;
  left: var(--page-margin-left);
  right: var(--page-margin-right);
  font-size: 11px;
  color: var(--text-faint);
  pointer-events: none;
  user-select: none;
  z-index: 2;
}

.page-header { top: calc(var(--page-margin-top) / 2.6); }
.page-footer { bottom: calc(var(--page-margin-bottom) / 2.6); text-align: center; }

/* Editable header/footer strips (Layout -> Header / Footer, MS Word style).
   Enabled strips are clickable, show a faint frame on hover and an accent
   frame while focused, so inline editing is obvious. */
.page-header.editable,
.page-footer.editable {
  pointer-events: auto;
  user-select: text;
  cursor: text;
  min-height: 18px;
  outline: none;
  font-size: 12px;
  line-height: 1.45;
  color: var(--paper-ink);
  border-radius: 2px;
  z-index: 5;
  padding: 1px 2px;
  margin: 0 -2px; /* negative margin keeps text aligned with the body edge */
  transition: background 0.15s, box-shadow 0.15s;
}

.page-header.editable:hover,
.page-footer.editable:hover {
  background: rgba(0, 0, 0, 0.025);
  box-shadow: inset 0 0 0 1px var(--border-chrome);
}

.page-header.editable:focus,
.page-footer.editable:focus {
  background: rgba(0, 0, 0, 0.02);
  box-shadow: inset 0 0 0 1px var(--ui-accent-border);
}

.page-header.editable p,
.page-footer.editable p {
  margin: 0 0 2px;
}

/* Word-like grayed hint inside an empty strip ("Header" / "Footer").
   --hf-hint is set from JS; .is-empty is kept in sync on every edit. */
.page-header.editable.is-empty:empty::before,
.page-footer.editable.is-empty:empty::before,
.page-header.editable.is-empty > p:only-child::before,
.page-footer.editable.is-empty > p:only-child::before {
  content: var(--hf-hint);
  color: var(--text-faint);
  font-style: italic;
  pointer-events: none;
}

.field-dynamic {
  background: var(--ui-accent-soft);
  border-radius: 2px;
  padding: 0 3px;
  color: var(--ui-accent);
  font-weight: 600;
  pointer-events: none;
  user-select: none;
}

/* ===================== Toast (matching Slides design) ===================== */
/* Always the white glass pill — Slides has no colored toast variants.
   Success/error meaning is carried by the monochrome SVG icon that JS
   injects (16px, #111 ink, 10px gap before the message), exactly like
   Slides' showToast + _toastIcon pattern. */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.95);
  color: #111;
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 14px 24px;
  border-radius: 12px;
  font-size: 0.95rem;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  white-space: normal;
  word-break: break-word;
  max-width: 80vw;
  text-align: left;
  font-family: var(--font-ui);
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(-10px);
}

/* ===================== Print ===================== */
@page {
  size: A4;
  margin: 0;
}
@media print {
  /* Hide ALL app chrome — only the paper/page content should print.
     The navbar (logo, EmeraldSuite, save-indicator), ribbon, status bar,
     ruler, and all floating panels are hidden. */
  .navbar, .topbar, .ribbon-tabs, .ribbon, .statusbar, .document-rulers,
  .toast, .modal-overlay, .focus-bar, .print-preview-bar,
  .draw-toolbar, .symbol-toolbar,
  .outline-panel, .thumbnails-panel, .comments-panel,
  .footnotes-panel,
  .confetti-container, .rich-tip,
  .find-history,
  .zen-indicator {
    display: none !important;
  }
  body { background: #fff; }
  .app { display: block; height: auto; overflow: visible; }
  .document-scroll {
    overflow: visible;
    background: #fff;
    background-image: none;
    padding: 0;
  }
  .pages-wrapper { gap: 0; transform: none !important; }
  /* Browser "Print" (window.print) output — kept overflow-safe so it never
     emits blank pages. For a pixel-perfect 1:1 A4 copy, use File -> Export ->
     Export as PDF (jsPDF), which rasterizes each on-screen page at exact A4
     size and is independent of the print dialog's margin setting.
     Here each page uses height:auto (no fixed mm height) so the sheet is
     exactly its content height and can never overflow onto a blank page,
     regardless of the print dialog's "Default" margins. Width stays at the
     on-screen value so text wraps as in the editor. break-after separates
     sheets (except the last page). */
  .page {
    width: var(--emu-pw, 794px) !important;
    height: auto !important;
    box-sizing: border-box !important;
    box-shadow: none;
    border-radius: 0;
    margin: 0 auto;
    overflow: visible !important;
    animation: none;
    page-break-after: always;
    break-after: page;
  }
  .page:last-child {
    page-break-after: auto;
    break-after: auto;
  }
  .page[data-thumb="1"] { display: none !important; }
  .page::before { display: none; }
  .page-badge { display: none !important; }
.emdocs-page-break { display: none !important; }
  .section-break { display: none !important; }
  /* Header/footer strips print as plain text — no editing frames. */
  .page-header, .page-footer {
    box-shadow: none !important;
    background: none !important;
  }
  .page-content {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* Preserve colors for highlights, equations, etc. */
  mark,
  .equation,
  .smartart,
  .cover-page {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
mark.emdocs-mark { background: transparent !important; color: inherit !important; }
}

/* ===================== Responsive ===================== */
@media (max-width: 880px) {
  .topbar-right .btn span { display: none; }
  .topbar-right .btn { padding: 0 8px; }
  .brand-name { display: none; }
  .document-scroll { padding: 16px 8px 32px; }
  .toolbar-stats { display: none; }
  /* On narrow screens, hide the "Print" text label but keep the icon — matches
     Slides' behavior of keeping the Present action accessible on mobile. */
  .ribbon-tab-action span { display: none; }
  .ribbon-tab-action { padding: 7px 10px; }
  .document-rulers { display: none; }
  .ribbon-tabs { padding: 0 8px; }
  .ribbon-tab { margin: 0 4px; }
}

@media (max-width: 620px) {
  .doc-title { max-width: 140px; font-size: 13px; padding: 6px 8px; }
  .status-left .sep, .status-left #charCount { display: none; }
  /* On very narrow screens, hide word/char counters — keep Page info, Ln/Col, zoom %. */
  #wordCount, #charCount { display: none; }
  .page-size-label { display: none; }
  .modal { width: calc(100vw - 24px) !important; }
  .ribbon-btn-icon span { display: none; }
  .ribbon-btn-icon { padding: 7px; min-width: auto; }
}

/* =========================================================
   EmeraldSuite: Docs — Feature additions
   ========================================================= */

/* ---- Cover page presets ---- */
.cover-presets { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- Equation editor ---- */
.equation-presets {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.eq-preset {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--border-chrome);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-base);
  cursor: pointer;
  transition: 0.18s var(--ease-fluid);
}
.eq-preset:hover {
  border-color: var(--ui-accent-border);
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
}
.equation-preview-wrap {
  margin-top: 10px;
  padding: 14px;
  background: var(--bg-app);
  border: 1px solid var(--border-chrome);
  border-radius: var(--radius);
  text-align: center;
}
.equation-preview-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin-bottom: 6px;
}
.equation-preview {
  font-family: 'DM Mono', 'Courier Prime', monospace;
  font-size: 18px;
  color: var(--text-strong);
  min-height: 28px;
  line-height: 1.4;
}

/* Equation rendering in document */
.equation {
  display: inline-block;
  font-family: 'DM Mono', monospace;
  padding: 2px 8px;
  background: var(--ui-accent-soft);
  border: 1px solid var(--ui-accent-border);
  border-radius: 4px;
  margin: 0 2px;
  vertical-align: middle;
}
.equation sup, .equation sub { font-size: 0.7em; }

/* ---- Compare output ---- */
.compare-out {
  margin-top: 12px;
  padding: 14px;
  background: var(--bg-app);
  border: 1px solid var(--border-chrome);
  border-radius: var(--radius);
  max-height: 320px;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-base);
}
.compare-out .diff-ins {
  background: rgba(35, 154, 77, 0.16);
  color: #1a7d3d;
  text-decoration: none;
  border-radius: 2px;
  padding: 0 2px;
}
.compare-out .diff-del {
  background: rgba(217, 48, 37, 0.14);
  color: #b91c1c;
  text-decoration: line-through;
  border-radius: 2px;
  padding: 0 2px;
}
.compare-out .diff-empty { color: var(--text-faint); font-style: italic; }

/* ---- Footnotes panel ---- */
.footnotes-panel {
  position: fixed;
  top: calc(var(--topbar-h) + var(--ribbon-tabs-h) + var(--ribbon-h) + 8px);
  right: 8px;
  width: 340px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - var(--topbar-h) - var(--ribbon-tabs-h) - var(--ribbon-h) - var(--statusbar-h) - 24px);
  background: var(--bg-toolbar);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-chrome);
  border-radius: var(--radius-lg);
  /* No box-shadow in the closed state — same off-screen-panel reasoning
     as the other side panels: off-screen panel + always-on shadow =
     faint band on the right edge. */
  z-index: 40;
  display: flex;
  flex-direction: column;
  transform: translateX(360px);
  opacity: 0;
  transition: transform 0.28s var(--ease-bouncy), opacity 0.2s, box-shadow 0.28s var(--ease-bouncy);
  pointer-events: none;
}
.footnotes-panel.open { transform: translateX(0); opacity: 1; pointer-events: auto; box-shadow: var(--shadow-lg); }
.footnotes-body { flex: 1; overflow-y: auto; padding: 8px 16px 12px; }
.footnotes-foot { padding: 8px 16px 12px; border-top: 1px solid var(--border-chrome); display: flex; justify-content: flex-end; }
.fn-item {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-chrome);
  font-size: 12px;
  color: var(--text-base);
  cursor: pointer;
}
.fn-item:last-child { border-bottom: none; }
.fn-item:hover { background: var(--ui-accent-soft); }
.fn-num {
  display: inline-block;
  min-width: 18px;
  font-weight: 700;
  color: var(--ui-accent);
  font-size: 11px;
  vertical-align: super;
}
.fn-del {
  float: right;
  color: var(--text-faint);
  font-size: 11px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 1px 6px;
  background: transparent;
  cursor: pointer;
}
.fn-del:hover { color: #b91c1c; border-color: rgba(217, 48, 37, 0.4); }

/* Footnote / endnote markers in document text */
sup.footnote-ref, sup.endnote-ref {
  color: var(--ui-accent);
  font-weight: 700;
  cursor: pointer;
  font-size: 0.7em;
  vertical-align: super;
  line-height: 0;
}
sup.footnote-ref:hover, sup.endnote-ref:hover { text-decoration: underline; }

/* Footnotes block rendered at the very end of the document */
.footnotes-section {
  margin-top: 24px;
  padding-top: 12px;
  border-top: 1px solid var(--border-chrome);
  font-size: 11px;
  color: var(--text-muted);
}
.footnotes-section .fn-entry { margin: 4px 0; padding-left: 18px; text-indent: -18px; }
.footnotes-section .fn-entry .fn-key { color: var(--ui-accent); font-weight: 700; }

/* ---- Draw mode (bottom-docked toolbar, ported from Slides/Notes) ----
   Accent colors follow the Docs cyan theme; Clear keeps the destructive
   red and Done keeps the confirm green (Slides/Notes parity). */
.draw-toolbar {
  display: none;
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: rgb(255, 255, 255);
  border: 1px solid rgb(209, 213, 219);
  border-radius: 16px;
  box-shadow: rgba(0, 0, 0, 0.14) 0px 4px 5px;
  z-index: 9000;
  flex-wrap: nowrap;
  white-space: nowrap;
  animation: drawToolbarIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.draw-toolbar.visible { display: flex; }
@keyframes drawToolbarIn {
  0% { opacity: 0; transform: translateX(-50%) translateY(12px) scale(0.95); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0px) scale(1); }
}
.draw-toolbar-divider {
  width: 1px;
  height: 28px;
  background: rgb(229, 231, 235);
  flex-shrink: 0;
  margin: 0px 2px;
}
.draw-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: 1px solid rgb(229, 231, 235);
  border-radius: 8px;
  background: rgb(249, 250, 251);
  color: rgb(55, 65, 81);
  cursor: pointer;
  font-size: 13px;
  font-family: var(--font-ui);
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.draw-tool-btn:hover {
  background: rgb(243, 244, 246);
  border-color: rgb(209, 213, 219);
  color: rgb(17, 24, 39);
}
.draw-tool-btn.active {
  background: rgba(8, 145, 178, 0.10);
  border-color: var(--ui-accent);
  color: var(--ui-accent-hover);
}
.draw-clear-btn {
  color: rgb(220, 38, 38);
  border-color: rgb(254, 202, 202);
  background: rgb(254, 242, 242);
}
.draw-clear-btn:hover {
  background: rgb(254, 226, 226);
  border-color: rgb(239, 68, 68);
  color: rgb(185, 28, 28);
}
.draw-done-btn {
  background: rgb(209, 250, 229);
  border-color: rgb(46, 204, 113);
  color: rgb(6, 95, 70);
  font-weight: 600;
}
.draw-done-btn:hover {
  background: rgb(167, 243, 208);
  border-color: rgb(16, 185, 129);
  color: rgb(6, 78, 59);
}
.draw-section-label {
  font-size: 10px;
  font-weight: 600;
  color: rgb(156, 163, 175);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-ui);
}
.draw-color-section, .draw-size-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.draw-color-section {
  overflow: hidden;
  max-width: 300px;
  transition: max-width 0.3s, opacity 0.3s, padding 0.3s;
  opacity: 1;
}
.draw-color-section.eraser-hidden {
  max-width: 0px;
  opacity: 0;
  pointer-events: none;
  padding: 0px;
  gap: 0px;
}
.draw-toolbar-divider.color-divider {
  transition: max-width 0.3s, opacity 0.3s;
  overflow: hidden;
  max-width: 10px;
  opacity: 1;
}
.draw-toolbar-divider.color-divider.eraser-hidden {
  max-width: 0px;
  opacity: 0;
}
.draw-color-presets {
  display: flex;
  align-items: center;
  gap: 4px;
}
.draw-color-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s;
  flex-shrink: 0;
  padding: 0px;
}
.draw-color-swatch:hover { transform: scale(1.15); }
.draw-color-swatch.active {
  border-color: rgb(55, 65, 81);
  transform: scale(1.15);
  box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px inset;
}
.draw-size-presets {
  display: flex;
  align-items: center;
  gap: 6px;
}
.draw-size-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgb(229, 231, 235);
  background: rgb(249, 250, 251);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, border-color 0.12s;
  color: rgb(55, 65, 81);
  padding: 0px;
}
.draw-size-btn:hover {
  background: rgb(243, 244, 246);
  border-color: rgb(209, 213, 219);
}
.draw-size-btn.active {
  background: rgba(8, 145, 178, 0.10);
  border-color: var(--ui-accent);
  color: var(--ui-accent-hover);
}

/* Draw canvas overlay (covers the document scroll area; persists after Done) */
.draw-canvas {
  position: absolute;
  top: 0; left: 0;
  z-index: 5;
  pointer-events: none;
  cursor: crosshair;
}
.app.draw-mode .page-content { pointer-events: none; }
.app.draw-mode .page-badge { pointer-events: none; }

/* ---- Symbol bar (bottom-docked, ported from Slides) ----
   Same floating pill as the Slides symbolToolbar: grouped symbol buttons
   in a horizontally scrollable strip + Done. Hover/active accents use the
   Docs cyan theme (Slides uses orange); Done reuses the green draw-done
   button so both bottom toolbars match. */
.symbol-toolbar {
  display: none;
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
  gap: 0px;
  padding: 10px 16px;
  background: rgb(255, 255, 255);
  border: 1px solid rgb(209, 213, 219);
  border-radius: 16px;
  box-shadow: rgba(0, 0, 0, 0.14) 0px 4px 5px;
  z-index: 9000;
  max-width: 94vw;
  animation: drawToolbarIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.symbol-toolbar.visible { display: flex; }
.symbol-bar-scroll {
  display: flex;
  align-items: center;
  gap: 0px;
  overflow: auto hidden;
  flex: 1 1 0%;
  padding: 0px 4px;
  /* No custom scrollbar here — matches Slides: the global
     style.css ::-webkit-scrollbar design (10px, #c1c1c1 rounded
     thumb, #f1f1f1 track) applies. */
}
.symbol-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 0px 8px;
  flex-shrink: 0;
}
.symbol-section-label {
  font-size: 10px;
  font-weight: 600;
  color: rgb(156, 163, 175);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--font-ui);
  line-height: 1;
}
.symbol-group-row {
  display: flex;
  align-items: center;
  gap: 2px;
}
.sym-bar-btn {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 6px;
  background: rgb(255, 255, 255);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
  font-size: 16px;
  color: rgb(44, 62, 80);
  padding: 0px;
  outline: none;
  font-family: var(--font-ui);
  line-height: 1;
}
.sym-bar-btn:hover {
  background: rgba(8, 145, 178, 0.08);
  border-color: rgba(8, 145, 178, 0.2);
  color: var(--ui-accent);
  transform: scale(1.1);
}
.sym-bar-btn:active {
  transform: scale(1);
  background: rgba(8, 145, 178, 0.12);
}
.symbol-toolbar-divider {
  width: 1px;
  height: 28px;
  background: rgb(229, 231, 235);
  flex-shrink: 0;
  margin: 0px 4px;
}

/* ---- Bookmark anchors (invisible markers in text) ---- */
a.emdocs-bookmark {
  display: inline;
  border-bottom: 2px dotted var(--ui-accent-border);
  background: var(--ui-accent-soft);
  border-radius: 2px;
  padding: 0 2px;
  cursor: pointer;
}
a.emdocs-bookmark:hover { background: var(--ui-accent-selected); }
a.emdocs-internal-link {
  color: var(--ui-accent);
  text-decoration: underline;
  text-decoration-color: var(--ui-accent-border);
  text-underline-offset: 2px;
  cursor: pointer;
}
a.emdocs-internal-link:hover { text-decoration-color: var(--ui-accent); }

/* ---- Cover page styles ---- */
.cover-page {
  text-align: center;
  padding: 120px 60px 60px;
}
.cover-page.style-classic .cover-title { font-size: 42px; font-weight: 800; letter-spacing: -0.02em; color: var(--paper-ink); margin-bottom: 12px; }
.cover-page.style-classic .cover-subtitle { font-size: 18px; color: var(--text-muted); margin-bottom: 60px; font-style: italic; }
.cover-page.style-classic .cover-author { font-size: 14px; color: var(--text-base); }
.cover-page.style-classic .cover-date { font-size: 12px; color: var(--text-faint); margin-top: 6px; }
.cover-page.style-modern .cover-title { font-size: 48px; font-weight: 300; color: var(--paper-ink); margin-bottom: 16px; border-left: 4px solid var(--ui-accent); padding-left: 16px; text-align: left; }
.cover-page.style-modern .cover-subtitle { font-size: 16px; color: var(--text-muted); margin-bottom: 80px; padding-left: 20px; text-align: left; }
.cover-page.style-modern .cover-meta { text-align: left; padding-left: 20px; border-top: 1px solid var(--border-chrome); padding-top: 16px; }
.cover-page.style-minimal .cover-title { font-size: 36px; font-weight: 700; color: var(--paper-ink); margin: 80px 0 12px; }
.cover-page.style-minimal .cover-subtitle { font-size: 15px; color: var(--text-muted); margin-bottom: auto; }
.cover-page.style-accent { background: linear-gradient(135deg, var(--ui-accent-soft), transparent 60%); }
.cover-page.style-accent .cover-title { font-size: 44px; font-weight: 800; color: var(--ui-accent); margin-bottom: 14px; }
.cover-page.style-accent .cover-subtitle { font-size: 17px; color: var(--text-muted); margin-bottom: 80px; }
.cover-page .cover-accent-bar { height: 4px; width: 60px; background: var(--ui-accent); border-radius: 2px; margin: 0 auto 24px; }

/* ---- SmartArt container ---- */
.smartart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: var(--bg-app);
  border: 1px solid var(--border-chrome);
  border-radius: var(--radius);
  margin: 8px 0;
}
.smartart.flow { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.smartart .sa-node {
  padding: 8px 16px;
  background: var(--ui-accent-soft);
  border: 1px solid var(--ui-accent-border);
  border-radius: var(--radius);
  color: var(--ui-accent);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  min-width: 80px;
}
.smartart .sa-arrow { color: var(--text-faint); font-size: 18px; }
.smartart.hierarchy .sa-node.root { background: var(--ui-accent); color: #fff; border-color: var(--ui-accent); }

/* ---- Section break marker ---- */
.section-break {
  margin: 12px 0;
  border-top: 1px dashed var(--ui-accent-border);
  padding-top: 4px;
  text-align: center;
}
.section-break::after {
  content: "— Section Break —";
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ui-accent);
  background: var(--bg-app);
  padding: 0 8px;
}

/* ---- Threaded comments ---- */
.comment-item .comment-thread { margin-left: 18px; border-left: 2px solid var(--border-chrome); padding-left: 10px; margin-top: 6px; }
.comment-item .comment-reply-row { display: flex; gap: 6px; margin-top: 6px; }
.comment-item .comment-reply-input { flex: 1; font-size: 12px; padding: 5px 8px; border-radius: 4px; border: 1px solid var(--border-strong); background: var(--bg-toolbar); color: var(--text-base); }
.comment-item .mention { color: var(--ui-accent); font-weight: 600; background: var(--ui-accent-soft); padding: 0 3px; border-radius: 2px; }
.comment-item .comment-jump { font-size: 11px; color: var(--text-faint); cursor: pointer; text-decoration: underline; }
.comment-item .comment-jump:hover { color: var(--ui-accent); }

/* ---- Screenshot placeholder ---- */
.screenshot-img { max-width: 100%; border: 1px solid var(--border-chrome); border-radius: var(--radius-sm); }

/* ---- Refined modal fields spacing for new modals ---- */
.cover-presets .preset-btn, .equation-presets .eq-preset { min-width: 0; }

/* ---- Focus mode refinement ---- */
.app.focus-mode .ribbon-tabs, .app.focus-mode .ribbon, .app.focus-mode .document-rulers, .app.focus-mode .statusbar { display: none; }
.app.focus-mode .document-scroll { padding-top: 40px; }

/* ---- Zen mode (auto-hide chrome) ---- */
.app.zen-mode .topbar,
.app.zen-mode .ribbon-tabs,
.app.zen-mode .ribbon,
.app.zen-mode .document-rulers,
.app.zen-mode .statusbar {
  transition: opacity 0.4s var(--ease-fluid), transform 0.4s var(--ease-fluid);
}
.app.zen-mode.zen-hidden .topbar { opacity: 0; transform: translateY(-100%); pointer-events: none; }
.app.zen-mode.zen-hidden .ribbon-tabs { opacity: 0; transform: translateY(-100%); pointer-events: none; }
.app.zen-mode.zen-hidden .ribbon { opacity: 0; transform: translateY(-100%); pointer-events: none; height: 0; min-height: 0; margin: 0; }
.app.zen-mode.zen-hidden .document-rulers { opacity: 0; pointer-events: none; }
.app.zen-mode.zen-hidden .statusbar { opacity: 0; transform: translateY(100%); pointer-events: none; }
.app.zen-mode .document-scroll { padding-top: 60px; transition: padding-top 0.4s; }
.app.zen-mode.zen-hidden .document-scroll { padding-top: 20px; }

/* Zen mode indicator (small pill that stays visible) */
.zen-indicator {
  position: fixed;
  top: 12px;
  right: 16px;
  background: var(--ui-accent);
  color: #fff;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  z-index: 35;
  display: none;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(35, 154, 77, 0.3);
  cursor: pointer;
  transition: opacity 0.3s;
}
.app.zen-mode .zen-indicator { display: flex; }
.zen-indicator .zi-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: zenPulse 2s ease-in-out infinite; }
@keyframes zenPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ---- Accessibility checker ---- */
.accessibility-results { max-height: 400px; overflow-y: auto; }
.a11y-issue {
  display: flex;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border-chrome);
  border-radius: var(--radius-sm);
  background: var(--bg-app);
}
.a11y-issue.severity-error { border-left: 4px solid #d93025; }
.a11y-issue.severity-warning { border-left: 4px solid #f9ab00; }
.a11y-issue.severity-ok { border-left: 4px solid var(--ui-accent); }
.a11y-icon { flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.a11y-icon.error { color: #d93025; }
.a11y-icon.warning { color: #f9ab00; }
.a11y-icon.ok { color: var(--ui-accent); }
.a11y-body { flex: 1; }
.a11y-title { font-weight: 600; font-size: 13px; color: var(--text-strong); margin-bottom: 2px; }
.a11y-desc { font-size: 12px; color: var(--text-muted); }
.a11y-fix {
  margin-top: 6px;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid var(--ui-accent-border);
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
  cursor: pointer;
}
.a11y-fix:hover { background: var(--ui-accent); color: #fff; }

/* ---- Document inspector ---- */
.inspector-results { max-height: 360px; overflow-y: auto; }
.inspector-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-chrome);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  background: var(--bg-app);
}
.inspector-item-icon { color: var(--text-muted); flex-shrink: 0; }
.inspector-item-text { flex: 1; font-size: 12px; }
.inspector-item-name { font-weight: 600; color: var(--text-strong); }
.inspector-item-count { color: var(--text-faint); font-size: 11px; }
.inspector-item-remove {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid rgba(217, 48, 37, 0.3);
  background: rgba(217, 48, 37, 0.06);
  color: #d93025;
  cursor: pointer;
}
.inspector-item-remove:hover { background: rgba(217, 48, 37, 0.14); }
.inspector-item.empty .inspector-item-count { color: var(--ui-accent); }

@keyframes ctxFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* ---- Section break dialog ---- */
.section-orient-grid { display: flex; gap: 10px; }
.sec-orient-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--border-chrome);
  border-radius: var(--radius);
  cursor: pointer;
  transition: 0.18s var(--ease-fluid);
  color: var(--text-base);
  font-size: 12px;
  font-weight: 500;
}
.sec-orient-btn:hover { border-color: var(--ui-accent-border); color: var(--ui-accent); }
.sec-orient-btn.active {
  background: var(--ui-accent-soft);
  border-color: var(--ui-accent);
  color: var(--ui-accent);
  box-shadow: inset 0 0 0 1px var(--ui-accent-border);
}
.section-apply-grid { display: flex; flex-direction: column; gap: 6px; }

/* Per-section page geometry: pages tagged with data-section-orient /
   data-section-margins override the global page size + margins. */
.page[data-orient="landscape"] {
  width: 1123px;
  height: 794px;
}
.page[style*="--sec-mt"] {
  /* set via JS inline style using CSS custom props:
     --sec-mt, --sec-mr, --sec-mb, --sec-ml (in px) */
  padding-top: var(--sec-mt, var(--page-margin-top));
  padding-right: var(--sec-mr, var(--page-margin-right));
  padding-bottom: var(--sec-mb, var(--page-margin-bottom));
  padding-left: var(--sec-ml, var(--page-margin-left));
}
.section-break.has-config::after {
  content: "— Section Break (configured) —";
}

/* ---- Right-click context menu (in-document) ---- */
/* ---- Tooltip (native title= replacement for ribbon buttons) ---- */
.ribbon-btn[data-tip] { position: relative; }
 ribbon-btn[data-tip]::after { content: ""; }

/* ---- Contrast checker styles (in accessibility dialog) ---- */
.a11y-issue.severity-contrast { border-left-color: #f9ab00; }
.a11y-contrast-preview {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 11px;
  margin-left: 6px;
  border: 1px solid var(--border-chrome);
}

/* ---- Footnote: reserve per-page footnote space ---- */
.page-content.has-footnotes-ref {
  /* When a page contains a footnote reference, reserve bottom space for
     the footnote text. Set via JS inline style --fn-reserve. */
  padding-bottom: calc(var(--page-margin-bottom) + var(--fn-reserve, 0px));
}
.page-footnote-area {
  position: absolute;
  left: var(--page-margin-left);
  right: var(--page-margin-right);
  bottom: var(--page-margin-bottom);
  border-top: 1px solid var(--border-chrome);
  padding-top: 6px;
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.4;
  max-height: var(--fn-reserve, 0px);
  overflow: hidden;
}
.page-footnote-area .pfa-entry { margin: 2px 0; padding-left: 14px; text-indent: -14px; }
.page-footnote-area .pfa-key { color: var(--ui-accent); font-weight: 700; }

/* ---- More ribbon polish: select arrow, color tool refinements ---- */
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 4l3 3 3-3' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 26px;
}
.select:hover { border-color: var(--ui-accent-border); }
.select:focus { outline: none; border-color: var(--ui-accent); box-shadow: 0 0 0 2px var(--ui-accent-ring); }

/* ---- SmartArt picker grid ---- */
.smartart-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.smartart-option {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--border-chrome);
  border-radius: var(--radius);
  cursor: pointer;
  transition: 0.18s var(--ease-fluid);
  text-align: center;
}
.smartart-option:hover {
  border-color: var(--ui-accent-border);
  background: var(--ui-accent-soft);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.smartart-preview {
  background: var(--bg-app);
  border-radius: var(--radius-sm);
  padding: 12px 8px;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.smartart-name { font-size: 12px; font-weight: 600; color: var(--text-strong); }
.smartart-desc { font-size: 10px; color: var(--text-faint); }

/* SmartArt preview mini-render */
.sa-mini { display: flex; align-items: center; gap: 4px; font-size: 9px; }
.sa-mini .sa-m-node {
  padding: 3px 7px;
  background: var(--ui-accent-soft);
  border: 1px solid var(--ui-accent-border);
  border-radius: 3px;
  color: var(--ui-accent);
  font-weight: 600;
}
.sa-mini .sa-m-arrow { color: var(--text-faint); }
.sa-mini.col { flex-direction: column; gap: 4px; }
.sa-mini.tree .sa-m-root {
  background: var(--ui-accent);
  color: #fff;
  border-color: var(--ui-accent);
}
.sa-mini.cycle .sa-m-node:nth-child(odd) {
  background: var(--ui-accent);
  color: #fff;
  border-color: var(--ui-accent);
}
.sa-mini.pyramid { flex-direction: row; gap: 2px; }
.sa-mini.pyramid .sa-m-node { padding: 2px 4px; font-size: 8px; }
.sa-mini.pyramid .sa-m-node:nth-child(1) { width: 60%; }
.sa-mini.pyramid .sa-m-node:nth-child(2) { width: 50%; opacity: 0.85; }
.sa-mini.pyramid .sa-m-node:nth-child(3) { width: 40%; opacity: 0.7; }
.sa-mini.pyramid .sa-m-node:nth-child(4) { width: 30%; opacity: 0.55; }

/* ---- Rich tooltips (CSS-only, JS-driven) ---- */
.rich-tip {
  position: fixed;
  background: rgba(20, 24, 28, 0.95);
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-family: var(--font-ui);
  z-index: 320;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s, transform 0.15s;
  max-width: 240px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}
.rich-tip.show { opacity: 1; transform: translateY(0); }
.rich-tip .rt-key {
  margin-left: 6px;
  padding: 1px 5px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
}
.rich-tip .rt-desc {
  display: block;
  color: rgba(255, 255, 255, 0.7);
  font-size: 10px;
  margin-top: 2px;
  white-space: normal;
}

/* ---- Autosave polish: animated saving indicator ---- */
.autosave.saving::before {
  background: #e0a800;
  animation: autosaveSpin 0.8s linear infinite;
}
@keyframes autosaveSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.autosave.saving::before {
  border: 1.5px solid #e0a800;
  border-top-color: transparent;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  background: transparent !important;
}

/* ---- Word count live pulse ---- */
.toolbar-stats {
  cursor: pointer;
  padding: 3px 10px;
  border-radius: 4px;
  transition: background 0.15s;
}
.toolbar-stats:hover { background: var(--ui-accent-soft); }

/* ---- Ribbon group hover: group label stays neutral like Slides ---- */

/* ---- Topbar: separator refinement ---- */
.topbar-sep {
  width: 1px;
  height: 24px;
  background: var(--border-chrome);
  margin: 0 4px;
  flex-shrink: 0;
}

/* ---- Round 5 polish ---- */

/* Focus-visible rings for keyboard accessibility
   NOTE: status-bar items (zoom %, lang, page-size-label) are intentionally
   excluded from the blue focus ring so that clicking them with a mouse does
   not leave a blue outline lingering on the bar. Keyboard users still get a
   visible focus affordance via the browser default :focus ring, which we
   also neutralize for these specific controls below. */
/* Keyboard focus matches slides/notes: browser-default focus ring flush to the
   control (outline-offset 0px), NOT a custom colored/thick ring. */
.ribbon-btn:focus-visible,
.topbar-action:focus-visible,
.btn:focus-visible,
.select:focus-visible,
.ribbon-btn-icon:focus-visible {
  outline-offset: 0px;
}

/* Status-bar items: no blue focus ring on click OR keyboard focus,
   to avoid the "weird blue line" lingering under A4. */
.page-size-label:focus-visible {
  outline: none;
}
.page-size-label:focus {
  outline: none;
  box-shadow: none;
}

/* Topbar action hover refinement */
.topbar-action {
  transition: background 0.18s var(--ease-fluid), color 0.18s var(--ease-fluid), transform 0.18s var(--ease-fluid);
}
.topbar-action:hover {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
  transform: translateY(-1px);
}
.topbar-action:active { transform: translateY(0) scale(0.94); }

/* Page badge polish block removed — badges disabled globally (see base rule) */

/* Find & Replace history dropdown */
.find-history {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-toolbar);
  border: 1px solid var(--border-chrome);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  max-height: 180px;
  overflow-y: auto;
  z-index: 210;
  display: none;
}
.find-history.open { display: block; animation: ctxFadeIn 0.15s ease-out; }
.find-history-item {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-base);
  cursor: pointer;
  border-bottom: 1px solid var(--border-chrome);
}
.find-history-item:last-child { border-bottom: none; }
.find-history-item:hover { background: var(--ui-accent-soft); color: var(--ui-accent); }

/* Equation preview — bigger, math-like */
.equation-preview {
  font-family: 'DM Mono', 'Courier Prime', monospace;
  font-size: 20px;
  color: var(--text-strong);
  min-height: 36px;
  line-height: 1.6;
  padding: 8px 4px;
}
.equation sup, .equation sub { font-size: 0.65em; }

/* Equation presets wrap nicely */
.equation-presets {
  max-height: 120px;
  overflow-y: auto;
}

/* Page selection ring (when clicking a page in print preview) */
.page.selected {
  outline: 2px solid var(--ui-accent);
  outline-offset: 4px;
}

/* Smooth page entrance animation (staggered) */
.page:nth-child(1) { animation-delay: 0s; }
.page:nth-child(2) { animation-delay: 0.05s; }
.page:nth-child(3) { animation-delay: 0.1s; }
.page:nth-child(4) { animation-delay: 0.15s; }
.page:nth-child(5) { animation-delay: 0.2s; }
.page:nth-child(n+6) { animation-delay: 0.25s; }

/* Status bar polish — neutralized (floating-pill look from the base rule wins) */
.statusbar button:hover { color: inherit; }

/* Toolbar stats live update pulse */
.toolbar-stats.updated {
  animation: statsPulse 0.4s ease-out;
}
@keyframes statsPulse {
  0% { color: var(--ui-accent); transform: scale(1.05); }
  100% { color: inherit; transform: scale(1); }
}

/* Ribbon content max-width for large screens */
.ribbon-content {
  max-width: 1900px;
  margin: 0 auto;
}

/* Better ribbon-content padding (matching slides: 12px) */
.ribbon-content {
  padding: 12px;
}

/* Modal head gradient (subtle) — removed to match Slides clean white header */
.modal-head {
  background: transparent;
}

/* Cover page preview text alignment fix */
.cover-page .cover-title { word-break: break-word; }

/* More equation preset button polish */
.eq-preset {
  font-size: 13px;
  padding: 6px 10px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}
.eq-preset:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* ---- Document area + ruler overlay (matching Slides) ---- */
/* Non-scrolling wrapper that pins the rulers while the document scrolls
   beneath them. */
.document-area {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
}
.document-col {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  overflow: hidden;
}
.document-area .document-col .document-scroll {
  flex: 1;
  min-width: 0;
}

/* Ruler overlay — purely visual, mirrors Slides' editor-rulers.
   Hidden until toggled via Show > Ruler (body.show-rulers). */
.document-rulers {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}
body.show-rulers .document-rulers {
  display: block;
}

.ruler-corner {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  background: transparent;
  border-right: 1px solid rgb(203, 213, 225);
  border-bottom: 1px solid rgb(203, 213, 225);
  z-index: 2;
}

.ruler-top,
.ruler-left {
  position: absolute;
  background: transparent;
  overflow: hidden;
  color: rgb(100, 116, 139);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 9px;
  font-weight: 500;
}

.ruler-top {
  top: 0;
  left: 0;
  right: 0;
  height: 18px;
  background: rgb(245, 245, 245);
  border-bottom: 1px solid rgb(203, 213, 225);
}

.ruler-left {
  top: 0;
  left: 0;
  bottom: 0;
  width: 18px;
  background: rgb(245, 245, 245);
  border-right: 1px solid rgb(203, 213, 225);
}

.ruler-tick {
  position: absolute;
  background: rgb(148, 163, 184);
  pointer-events: none;
}

.ruler-tick-x {
  top: 0;
  width: 1px;
}

.ruler-tick-y {
  left: 0;
  height: 1px;
}

.ruler-label {
  position: absolute;
  color: rgb(100, 116, 139);
  font-size: 9px;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.ruler-label-x {
  top: 11px;
  white-space: nowrap;
}

.ruler-label-y {
  left: 11px;
  white-space: nowrap;
  transform: rotate(-90deg);
  transform-origin: left top;
}

/* ---- More micro-interactions ---- */

/* Better focus for text color tools */
.color-tool {
  border-radius: var(--radius-sm);
  transition: box-shadow 0.15s;
}
.color-tool:focus-within {
  box-shadow: 0 0 0 2px var(--ui-accent-ring);
}

/* Table cell hover (in document) */
.page-content td:hover, .page-content th:hover {
  background: var(--ui-accent-soft);
}

/* Image resize handle refinement */
.page-content img[data-resizing] {
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
}

/* Selection highlight refinement */
.page-content ::selection {
  background: var(--paper-selection);
  text-decoration: underline;
  text-decoration-color: rgba(35, 154, 77, 0.3);
}

/* Dropdown menu animation */
.dropdown-menu {
  animation: dropdownIn 0.18s var(--ease-bouncy);
  transform-origin: top right;
}
@keyframes dropdownIn {
  from { opacity: 0; transform: scale(0.95) translateY(-4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---- Round 7 polish ---- */

/* Active outline heading */
.outline-item.active-heading {
  background: rgba(8, 145, 178, 0.1);
  border-color: rgba(8, 145, 178, 0.2);
  box-shadow: rgba(8, 145, 178, 0.12) 0px 2px 12px;
  color: var(--ui-accent-hover);
  font-weight: 600;
}
.outline-item.active-heading .outline-badge {
  background: var(--ui-accent);
  color: #fff;
}

/* Figure + figcaption styling */
.page-content figure {
  margin: 12px 0;
  text-align: center;
}
.page-content figure img {
  max-width: 100%;
  border-radius: var(--radius-sm);
}
.page-content figcaption {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 4px;
  text-align: center;
}

/* Milestone toasts now reuse the standard Slides-style white pill —
   the 🎉 gradient variant was removed so every toast looks identical
   to the Slides app (icon + message, monochrome). */

/* Topbar brand refinement */
.brand-mark {
  background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent-hover));
  box-shadow: 0 2px 8px rgba(35, 154, 77, 0.3);
  transition: transform 0.3s var(--ease-bouncy);
}
.brand:hover .brand-mark {
  transform: rotate(-8deg) scale(1.05);
}

/* Empty state illustration */
.page-content:empty::before,
.page-content > p:only-child:empty::before {
  color: var(--text-faint);
  opacity: 0.5;
}

/* Page transition (when switching pages via nav) */
.page.flash {
  animation: pageFlash 0.6s ease-out;
}
@keyframes pageFlash {
  0% { box-shadow: 0 0 0 4px var(--ui-accent-ring), var(--paper-shadow); }
  100% { box-shadow: var(--paper-shadow); }
}

/* Better heading anchor links */
a.emdocs-internal-link {
  position: relative;
  padding: 0 2px;
  border-radius: 2px;
  transition: background 0.15s;
}
a.emdocs-internal-link:hover {
  background: var(--ui-accent-soft);
}
a.emdocs-internal-link::after {
  content: "¶";
  position: absolute;
  left: -14px;
  top: 0;
  font-size: 10px;
  color: var(--ui-accent);
  opacity: 0;
  transition: opacity 0.15s;
}
a.emdocs-internal-link:hover::after {
  opacity: 0.7;
}

/* Bookmark anchor pulse on jump */
a.emdocs-bookmark.flash {
  animation: bookmarkFlash 0.8s ease-out;
}
@keyframes bookmarkFlash {
  0% { background: var(--ui-accent-selected); transform: scale(1.1); }
  100% { background: var(--ui-accent-soft); transform: scale(1); }
}

/* Heading flash on outline jump */
.page-content h1.flash, .page-content h2.flash, .page-content h3.flash, .page-content h4.flash {
  animation: headingFlash 0.8s ease-out;
}
@keyframes headingFlash {
  0% { background: var(--ui-accent-selected); }
  100% { background: transparent; }
}

/* ---- Round 8: color themes + clipboard history ---- */

/* Color theme grid */
.color-theme-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.color-theme-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--border-chrome);
  border-radius: var(--radius);
  cursor: pointer;
  transition: 0.18s var(--ease-fluid);
  color: var(--text-base);
  font-size: 13px;
  font-weight: 500;
}
.color-theme-option:hover {
  border-color: var(--ui-accent-border);
  background: var(--ui-accent-soft);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.color-theme-option.active {
  border-color: var(--ui-accent);
  background: var(--ui-accent-soft);
  box-shadow: inset 0 0 0 1px var(--ui-accent-border);
}
.ct-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--bg-toolbar), 0 0 0 3px rgba(0,0,0,0.1);
}
.color-theme-option.active .ct-swatch {
  box-shadow: 0 0 0 2px var(--bg-toolbar), 0 0 0 4px var(--ui-accent);
}
.ct-name { font-weight: 600; }

/* Clipboard history list */
.clipboard-history-list {
  max-height: 320px;
  overflow-y: auto;
}
.clipboard-history-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-chrome);
  cursor: pointer;
  transition: background 0.15s;
}
.clipboard-history-item:last-child { border-bottom: none; }
.clipboard-history-item:hover {
  background: var(--ui-accent-soft);
}
.ch-preview {
  flex: 1;
  font-size: 12px;
  color: var(--text-base);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ch-len {
  font-size: 10px;
  color: var(--text-faint);
  background: var(--bg-app);
  padding: 2px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}
.clipboard-history-item:hover .ch-len {
  color: var(--ui-accent);
  background: var(--bg-toolbar);
}

/* Status bar page-size quick switcher — REMOVED.
   The A4 label is informational only; the clickable chip and its blue
   quick-switch menu are fully disabled. */
.status-page-size {
  display: none !important;
  pointer-events: none !important;
}

/* ---- Round 10 polish ---- */

/* Drag-over state for image drop */
.document-scroll.drag-over {
  background-color: color-mix(in srgb, var(--ui-accent) 8%, var(--bg-doc-canvas));
  outline: 3px dashed var(--ui-accent);
  outline-offset: -8px;
}
.document-scroll.drag-over::after {
  content: "Drop image files here";
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-weight: 700;
  color: var(--ui-accent);
  background: var(--bg-toolbar);
  padding: 16px 32px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  z-index: 50;
  animation: dragPulse 1.5s ease-in-out infinite;
}
@keyframes dragPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.05); }
}

/* Document statistics export button */
.stats-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--ui-accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s;
  font-family: var(--font-ui);
}
.stats-export-btn:hover {
  background: var(--ui-accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Print-only stats overlay */
@media print {
  .stats-printable {
    display: block !important;
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 9999;
    padding: 40px;
    font-family: var(--font-ui);
  }
  .stats-printable h1 { font-size: 24px; margin-bottom: 8px; }
  .stats-printable h2 { font-size: 16px; margin-top: 20px; margin-bottom: 8px; }
  .stats-printable .stat-row { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid #eee; font-size: 13px; }
  .stats-printable .stat-label { color: #666; }
  .stats-printable .stat-val { font-weight: 700; }
}
.stats-printable { display: none; }

/* Ribbon button active pulse (when toggled on) */
.ribbon-btn.active.pulse {
  animation: btnPulse 0.6s ease-out;
}
@keyframes btnPulse {
  0% { box-shadow: 0 0 0 0 var(--ui-accent-ring); }
  100% { box-shadow: 0 0 0 8px transparent; }
}

/* Page hover subtle lift */
.page {
  transition: box-shadow 0.3s, transform 0.3s;
}
.page:hover {
  transform: translateY(-1px);
}

/* Better disabled button styling (Notes/Slides parity) */
.btn[disabled], .ribbon-btn[disabled], .ms-dropdown-btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}
.btn[disabled]:hover, .ribbon-btn[disabled]:hover, .ms-dropdown-btn[disabled]:hover {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(44, 62, 80, 0.8);
}

/* Word count goal bar — gradient fill */
.goal-bar-fill {
  background: linear-gradient(90deg, var(--ui-accent), var(--ring));
  transition: width 0.4s var(--ease-fluid);
}
.goal-bar-fill.complete {
  background: linear-gradient(90deg, var(--ui-accent), #2BD059, var(--ui-accent));
  background-size: 200% 100%;
  animation: goalShimmer 2s linear infinite;
}
@keyframes goalShimmer {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

/* Session timer hover — (version-count badge removed from status bar) */
.session-timer:hover {
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
}

/* Find & Replace match count badge */
.match-count {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--ui-accent-border);
}

/* ---- Round 11 polish ---- */

/* Caret position display in status bar — same style as other statbar-items.
   (Removed the old mono-font / 11px / different-color override so it visually
   matches "Page X of Y" and "NN words" etc.) */
#caretPos {
  /* inherits from .statbar-item: 12px DM Sans, color rgb(100,116,139), padding 0 12px */
  font-variant-numeric: tabular-nums;
}

/* Relative autosave time */
.autosave-time {
  color: var(--text-faint);
  font-size: 10px;
}

/* Keyboard shortcut overlay (large, centered) */
.shortcut-overlay {
  position: fixed;
  inset: 0;
  background: var(--modal-overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}
.shortcut-overlay.open { opacity: 1; visibility: visible; }
.shortcut-overlay-content {
  background: var(--modal-bg);
  border: 1px solid var(--modal-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 720px;
  width: calc(100vw - 48px);
  max-height: calc(100vh - 64px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: scale(0.96);
  transition: transform 0.2s var(--ease-bouncy);
}
.shortcut-overlay.open .shortcut-overlay-content { transform: scale(1); }
.shortcut-overlay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-chrome);
  background: linear-gradient(180deg, var(--ui-accent-soft), transparent);
}
.shortcut-overlay-head h3 { margin: 0; font-size: 18px; }
.shortcut-overlay-body {
  padding: 20px;
  overflow-y: auto;
}
.shortcut-overlay-hint {
  text-align: center;
  padding: 12px;
  color: var(--text-faint);
  font-size: 12px;
  border-top: 1px solid var(--border-chrome);
}

/* Word frequency export list */
.word-freq-export {
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--bg-app);
  border: 1px solid var(--border-chrome);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-base);
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
}

/* ===================== MS Dropdowns (ported from slides.css — 1:1) ===================== */
.ms-dropdown {
  position: relative;
  display: inline-block;
}

.ms-dropdown-btn {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 6px 24px 6px 12px;
  cursor: pointer;
  border-radius: 6px;
  font-size: 13px;
  color: rgba(44, 62, 80, 0.8);
  transition: 0.2s;
  position: relative;
  min-width: 120px;
  text-align: left;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 3px;
  font-family: var(--font-ui);
  display: flex;
  align-items: center;
}

.color-preview {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  display: inline-block;
  margin-right: 6px;
  transition: 0.2s;
  box-shadow: rgba(255, 255, 255, 0.8) 0px 0px 0px 2px, transparent 0px 0px 0px 3px;
  position: relative;
}

.color-preview[data-color="#ffffff"] {
  border: 1px solid rgb(204, 204, 204);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 3px var(--ui-accent-ring), 0 1px 3px rgba(8, 145, 178, 0.2);
}

.ms-dropdown-btn::after {
  content: "▼";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: rgba(44, 62, 80, 0.6);
  transition: transform 0.2s;
  font-family: "Segoe UI Symbol", "Arial Unicode MS", "DejaVu Sans", sans-serif;
}

.ms-dropdown-btn:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--ui-accent-border);
  box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 6px;
}

.ms-dropdown-btn[aria-expanded="true"]::after,
.ms-dropdown.active .ms-dropdown-btn::after {
  transform: translateY(-50%) rotate(180deg);
  color: var(--ui-accent);
}

.ms-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 40px;
  min-width: 180px;
  z-index: 10000;
  display: none;
  overflow: hidden;
  margin-top: 4px;
}

.ms-dropdown.active .ms-dropdown-menu {
  display: block;
  animation: 0.2s ease 0s 1 normal none running dropdownFadeIn;
}

.ms-dropdown-item {
  padding: 10px 16px;
  cursor: pointer;
  transition: 0.15s;
  color: rgba(44, 62, 80, 0.8);
  font-size: 13px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  font-family: var(--font-ui);
  display: flex;
  align-items: center;
  gap: 8px;
}

.ms-dropdown-item:last-child {
  border-bottom: none;
}

.ms-dropdown-item:hover {
  background: var(--ui-accent-soft);
  color: rgb(44, 62, 80);
}

.ms-dropdown-section-label {
  padding: 6px 14px 4px;
  font-size: 10px;
  color: rgb(156, 163, 175);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.ms-dropdown-section-label:first-child {
  border-top: none;
}

@keyframes dropdownFadeIn {
  0% {
    opacity: 0;
    transform: translateY(-8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes dropdownFadeOut {
  0% {
    opacity: 1;
    transform: translateY(0px);
  }
  100% {
    opacity: 0;
    transform: translateY(-8px);
  }
}

.ms-portal-closing {
  animation: 0.15s ease 0s 1 normal forwards running dropdownFadeOut !important;
  pointer-events: none !important;
}

/* ===================== Image Format tab — steppers & color menu =====================
   Ported from slides.css (tr-timing / tr-num) with the app's cyan accent. */
.tr-timing-panel {
  display: flex;
  flex-flow: row;
  align-items: center;
  gap: 10px;
  padding: 4px 0px;
  font-family: "DM Sans", sans-serif;
  white-space: nowrap;
}

.tr-timing-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.tr-timing-row + .tr-timing-row {
  position: relative;
  padding-left: 12px;
}

.tr-timing-row + .tr-timing-row::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 22px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 1px;
}

.tr-timing-label {
  font-size: 10px;
  color: rgba(44, 62, 80, 0.65);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tr-num-field {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  margin-left: 3px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 3px;
  backdrop-filter: blur(3px);
  overflow: hidden;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.tr-num-field:focus-within {
  border-color: var(--ui-accent-border, rgba(8, 145, 178, 0.3));
  box-shadow: 0 0 0 2px var(--ui-accent-soft, rgba(8, 145, 178, 0.18));
}

.tr-num-field:disabled,
.tr-num-field.disabled {
  opacity: 0.45;
  pointer-events: none;
}

.tr-num-step {
  width: 22px;
  height: 28px;
  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  border-image: none;
  background: transparent;
  color: rgba(44, 62, 80, 0.6);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  user-select: none;
}

.tr-num-step:hover {
  background: var(--ui-accent-soft, rgba(8, 145, 178, 0.1));
  color: var(--ui-accent, #0891b2);
}

.tr-num-step:active {
  background: var(--ui-accent-selected, rgba(8, 145, 178, 0.18));
}

.tr-num-input {
  width: 44px;
  height: 28px;
  border-width: medium 1px;
  border-style: none solid;
  border-color: currentcolor rgba(0, 0, 0, 0.06);
  border-image: none;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: rgba(44, 62, 80, 0.9);
  background: transparent;
  font-family: "DM Sans", sans-serif;
  outline: none;
}

.tr-num-input::-webkit-outer-spin-button,
.tr-num-input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0px;
}

.tr-num-input:disabled {
  color: rgba(44, 62, 80, 0.4);
  background: rgba(0, 0, 0, 0.03);
}

.tr-num-unit {
  font-size: 10.5px;
  color: rgba(44, 62, 80, 0.55);
  padding: 0px 8px 0px 6px;
}

.color-list-menu {
  min-width: 180px !important;
  max-height: 240px !important;
  overflow-y: auto !important;
  padding: 0px !important;
}

.color-list-menu .ms-dropdown-item {
  padding: 10px 16px;
  font-size: 13px;
}

.color-list-menu .ms-dropdown-item .color-preview {
  box-shadow: none;
}

/* =====================================================================
   SLIDES PARITY LOCK — navbar & ribbon tab strip geometry
   These !important rules pin the chrome geometry to be identical with the
   Slides app no matter what:
     • stylesheet load order (e.g. style.css accidentally loaded after
       docs.css — its .navbar { height: 4rem } would otherwise win),
     • an older cached sheet still being served,
     • font fallback metrics (line-height is pinned, not "normal").
   Reference geometry (measured on the Slides app @ 100% zoom):
     navbar 0–72px (4.5rem) · tab strip 72–104px (32px) · tab labels 79–100px
   ===================================================================== */
.app > .navbar,
header.navbar,
.navbar {
  height: 4.5rem !important;
  min-height: 4.5rem !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

.navbar .navcontainer,
.navbar .nav-container {
  height: 100% !important;
}
/* =====================================================================
   BUILD 2026-08-26.11 — MULTI-DOCUMENT / WELCOME SCREEN / FILE MODAL
   ===================================================================== */

/* ===================== No active document (welcome state) =====================
   body.no-active-doc is the class the page starts with on initial load.
   CSS uses it to hide the ribbon, document area and status bar, leaving the
   welcome screen as the only visible surface (same pattern as Slides'
   body.no-active-note). */
body.no-active-doc .ribbon-tabs,
body.no-active-doc .ribbon,
body.no-active-doc .document-scroll,
body.no-active-doc .statusbar,
body.no-active-doc .zen-indicator,
body.no-active-doc .focus-bar,
body.no-active-doc .print-preview-bar {
  display: none !important;
}

.welcome-screen {
  display: none; /* JS toggles between flex (welcome) and none (editor) */
  align-items: stretch;
  justify-content: center;
  flex: 1 1 0%;
  width: 100%;
  min-height: 0;
  background: #FFF;
  position: relative;
  overflow: hidden;
}

.welcome-content {
  padding: 40px;
  max-width: 1200px;
  width: 100%;
  animation: docsWelcomeFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100%;
  overflow: hidden;
}

@keyframes docsWelcomeFadeIn {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

.welcome-header {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex-shrink: 0;
}

.welcome-header-top {
  display: flex;
  align-items: center;
  gap: 24px;
}

.welcome-logo {
  opacity: 0.9;
  filter: drop-shadow(rgba(8, 145, 178, 0.15) 0 4px 12px);
  animation: docsWelcomeBounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
}

@keyframes docsWelcomeBounce {
  0%   { opacity: 0; transform: scale(0.8) translateY(-8px); }
  50%  { transform: scale(1.05); }
  100% { opacity: 0.9; transform: scale(1) translateY(0); }
}

/* Heading sized like Slides (no explicit override — browser-default h3) */
.welcome-header-top h3 {
  margin: 0;
  color: rgba(30, 41, 59, 0.95);
}

.section-title h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: rgba(44, 62, 80, 0.9);
}

.docs-section {
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  overflow: hidden;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.section-title h3 { font-size: 18px; font-weight: 700; }

.create-doc-btn {
  /* Flat button matching Slides' .create-note-btn (hover lifts -2px + darkens) */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ui-accent);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  backdrop-filter: blur(3px);
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: rgba(8, 145, 178, 0.2) 0 4px 16px;
  white-space: nowrap;
  flex-shrink: 0;
}

.create-doc-btn:hover {
  background: var(--ui-accent-hover);
  box-shadow: rgba(8, 145, 178, 0.3) 0 8px 24px;
  transform: translateY(-2px);
}

.create-doc-btn svg { width: 18px; height: 18px; }

.create-doc-btn--secondary {
  /* Matches Slides' .welcome-import-btn secondary style */
  background: rgba(255, 255, 255, 0.9);
  color: #374151;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: rgba(0, 0, 0, 0.06) 0 2px 8px;
}

.create-doc-btn--secondary:hover {
  background: rgba(255, 255, 255, 1);
  border-color: var(--ui-accent-border);
  color: var(--ui-accent);
  box-shadow: rgba(8, 145, 178, 0.15) 0 4px 12px;
}

/* ===================== Document cards grid =====================
   Same sizing as the Slides welcome screen (.notes-list-display +
   .presentation-card): 3-column grid, 20px gap, 16/9 thumb. */
.doc-list-display {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  overflow: hidden auto;
  padding-right: 8px;
  align-content: start;
  flex: 1 1 0%;
}

.doc-list-display::-webkit-scrollbar { width: 8px; }
.doc-list-display::-webkit-scrollbar-track { background: transparent; }
.doc-list-display::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 4px; }
.doc-list-display::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); }

.document-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(3px);
  box-shadow: rgba(0, 0, 0, 0.06) 0 2px 8px;
  animation: docCardFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes docCardFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.document-card:hover {
  background: #fff;
  box-shadow: rgba(8, 145, 178, 0.12) 0 8px 24px;
  border-color: rgba(8, 145, 178, 0.2);
}

.document-card-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(180deg, #fdfefe 0%, #f4f7f8 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.document-card-thumb::before {
  /* Mini "paper" sheet behind the snippet */
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 72%;
  height: calc(100% + 14px);
  background: #fff;
  border-radius: 6px 6px 0 0;
  box-shadow: rgba(15, 23, 42, 0.08) 0 -2px 10px, rgba(15, 23, 42, 0.06) 0 0 0 1px;
}

.document-card-snippet {
  position: relative;
  z-index: 1;
  width: 60%;
  margin-top: 17%;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 11px;
  line-height: 1.55;
  color: #3f4750;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  white-space: pre-line;
}

.document-card-snippet.is-empty {
  margin: auto;
  color: #b6c2cb;
  font-style: italic;
  text-align: center;
}

.document-card-info {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.document-card-title {
  font-size: 15px;
  font-weight: 600;
  color: rgba(30, 41, 59, 0.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-ui);
}

.document-card-meta {
  font-size: 12px;
  color: rgba(71, 85, 105, 0.55);
  font-family: var(--font-ui);
}

/* Empty state — content-height like Slides' .no-notes-container, so the
   image sits right under the section title instead of floating mid-page */
.no-docs-container {
  display: none; /* JS toggles to flex */
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 60px 20px;
  text-align: center;
}

.no-docs-hint {
  /* 16px — matches Slides/Notes "Create your first …" hint. Their
     .no-notes-container p (0,1,1) overrides .no-notes-hint (0,1,0) to 16px. */
  font-size: 16px;
  color: rgba(44, 62, 80, 0.5) !important;
  margin: 0;
}

/* ===================== File modal (Slides-style overlay) ===================== */
.file-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
  z-index: 95000; /* below docs modals (100000) so Statistics/Versions/Inspector/Delete open on top */
  padding: 20px;
}

.file-overlay.show { opacity: 1; visibility: visible; }

.file-overlay.closing { opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; }

.file-overlay-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: rgba(0, 0, 0, 0.15) 0 12px 40px;
  max-width: 420px;
  width: 100%;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.25s;
}

.file-overlay.show .file-overlay-card { opacity: 1; animation: fadeInModal 0.25s ease both; }
.file-overlay.closing .file-overlay-card { opacity: 0; transition: opacity 0.2s; }

.file-overlay-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  position: relative;
}

.file-overlay-header-title {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
  color: rgba(30, 41, 59, 0.92);
  letter-spacing: -0.02em;
  text-align: center;
}

.file-overlay-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(108, 117, 125, 0.5);
  transition: background 0.15s, color 0.15s;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.file-overlay-close-btn:hover { background: rgba(0, 0, 0, 0.06); color: rgba(44, 62, 80, 0.7); }

.file-overlay-body {
  padding: 0 24px 24px;
  overflow-y: auto;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.file-overlay-section { display: flex; flex-direction: column; gap: 8px; }

.file-overlay-section-label {
  font-family: var(--font-ui);
  font-size: 12px;
  color: rgba(70, 70, 70, 0.5);
  font-weight: 500;
  margin-bottom: 4px;
}

.file-overlay-name-input {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: rgba(30, 41, 59, 0.92);
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  padding: 12px 16px;
  width: 100%;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
  letter-spacing: -0.01em;
}

.file-overlay-name-input:focus {
  border-color: rgba(8, 145, 178, 0.4);
  background: rgba(8, 145, 178, 0.03);
}

.file-overlay-actions-row { display: flex; gap: 10px; }
.file-overlay-actions-row .file-overlay-action-btn { flex: 1; }

.file-overlay-action-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: rgba(44, 62, 80, 0.82);
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 11px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  width: 100%;
  letter-spacing: -0.01em;
  text-align: left;
}

.file-overlay-action-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(30, 41, 59, 0.95);
  border-color: rgba(0, 0, 0, 0.12);
}

.file-overlay-action-btn svg { flex-shrink: 0; color: rgba(108, 117, 125, 0.45); transition: color 0.15s; }
.file-overlay-action-btn:hover svg { color: rgba(44, 62, 80, 0.65); }

.file-overlay-action-btn--danger {
  color: rgb(220, 53, 69);
  border-color: rgba(220, 53, 69, 0.12);
  background: rgba(220, 53, 69, 0.04);
}
.file-overlay-action-btn--danger:hover {
  color: rgb(200, 35, 51);
  background: rgba(220, 53, 69, 0.1);
  border-color: rgba(220, 53, 69, 0.2);
}
.file-overlay-action-btn--danger svg { color: rgb(220, 53, 69); }
.file-overlay-action-btn--danger:hover svg { color: rgb(200, 35, 51); }

/* ===================== Delete-document dialog (byte-matched to Slides/Notes) ===================== */
.delete-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100000; /* above the File overlay (95000) */
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}

.delete-modal.show {
  opacity: 1;
  visibility: visible;
}

.delete-modal.show .delete-modal-content {
  opacity: 1;
  animation: fadeInModal 0.25s ease both;
}

.delete-modal.closing {
  animation: fadeOutOverlay 0.23s ease forwards;
  pointer-events: none;
}

.delete-modal.closing .delete-modal-content {
  animation: fadeOutModal 0.23s ease-in forwards;
}

.delete-modal-content {
  position: relative;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(3px);
  border-radius: 12px;
  padding: 24px;
  max-width: 400px;
  width: 90%;
  box-shadow: rgba(0, 0, 0, 0.3) 0 20px 60px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  opacity: 0;
  transition: opacity 0.3s;
  will-change: opacity;
}

.delete-modal-header {
  text-align: center;
  margin-bottom: 16px;
}

.delete-modal-icon {
  width: 48px;
  height: 48px;
  background: rgb(238, 90, 82);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  color: white;
  font-size: 24px;
}

.delete-modal-title {
  font-size: 18px;
  font-weight: 600;
  color: rgba(44, 62, 80, 0.9);
  margin: 0 0 8px;
  font-family: var(--font-ui);
}

.delete-modal-message {
  font-size: 14px;
  color: rgba(44, 62, 80, 0.7);
  line-height: 1.5;
  text-align: center;
  font-family: var(--font-ui);
  margin-bottom: 16px;
}

.delete-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.delete-modal-btn {
  padding: 10px 24px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: 0.2s;
  font-family: var(--font-ui);
  min-width: 100px;
}

.delete-modal-btn-cancel {
  background: rgba(108, 117, 125, 0.1);
  color: rgba(108, 117, 125, 0.8);
  border: 1px solid rgba(108, 117, 125, 0.2);
}

.delete-modal-btn-cancel:hover {
  background: rgba(108, 117, 125, 0.2);
  color: rgb(108, 117, 125);
}

.delete-modal-btn-delete {
  background: rgb(238, 90, 82);
  color: white;
  border: 1px solid rgba(238, 90, 82, 0.3);
}

.delete-modal-btn-delete:hover {
  background: rgb(229, 57, 53);
  box-shadow: rgba(255, 107, 107, 0.4) 0 4px 12px;
}

/* ===================== Responsive (same breakpoints as Slides) ===================== */
@media (max-width: 1400px) {
  .doc-list-display { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .doc-list-display { grid-template-columns: 1fr; }
  .welcome-content { padding: 30px; }
  .welcome-header-top { flex-direction: column; text-align: center; gap: 14px; }
}

@media (max-width: 640px) {
  .welcome-content { padding: 24px 16px; gap: 16px; }
  .section-title { flex-direction: column; align-items: stretch; gap: 12px; }
  .section-title > div { flex-direction: column; align-items: stretch; }
  .create-doc-btn { width: 100%; justify-content: center; }
  .file-overlay-body { max-height: 78vh; }
}

/* =====================================================================
   BUILD 2026-08-26.12 — STYLES GROUP / FOOTNOTE+ENDNOTE MODALS
   ===================================================================== */

/* Modal textareas match .field inputs */
.field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.8);
  color: rgba(44, 62, 80, 0.9);
  font-family: var(--font-ui);
  font-size: 13.5px;
  line-height: 1.5;
  resize: vertical;
  min-height: 74px;
}

.field textarea:focus {
  outline: none;
  border-color: rgba(8, 145, 178, 0.5);
  box-shadow: rgba(8, 145, 178, 0.12) 0 0 0 3px;
  background: rgba(255, 255, 255, 0.95);
}

/* Footnote/endnote textareas match Slides modal min/max height behavior */
#footnoteText,
#endnoteText {
  min-height: 72px;
  max-height: 40vh;
}

/* End-of-document endnotes section (mirrors .footnotes-section) */
.endnotes-section {
  margin-top: 24px;
  padding-top: 12px;
  border-top: 1px solid var(--border-chrome);
}

.endnotes-section .fn-entry { margin: 4px 0; padding-left: 18px; text-indent: -18px; }
.endnotes-section .fn-entry .fn-key { color: var(--ui-accent); font-weight: 700; }

/* Styles group — heading buttons with live type previews */
.style-btn .style-preview {
  display: block;
  line-height: 1.15;
  white-space: nowrap;
}

.style-preview--title { font-size: 15px; font-weight: 700; font-family: var(--font-ui); }
.style-preview--h1    { font-size: 13.5px; font-weight: 700; font-family: var(--font-ui); }
.style-preview--h2    { font-size: 12.5px; font-weight: 600; font-family: var(--font-ui); }
.style-preview--h3    { font-size: 11.5px; font-weight: 600; font-family: var(--font-ui); }
.style-preview--p     { font-size: 12px; font-weight: 400; font-family: var(--font-ui); }

/* =====================================================================
   APPENDED FEATURES — everything ABOVE this line is the original
   docs.css, byte-identical to the owner-supplied file (nothing modified).
   This section adds ONLY the styles required by the current docs.html /
   docs.js for features this file never had:
     1. Statistics modal layout (.modal-stats ...)
     2. Comments: pins, bubbles, floating popup (Slides-style)
     3. Find & Replace / Go-To bar (bottom-right) + custom Go-to dropdown
   Deleting this whole section only unstyles those features.
   ===================================================================== */

/* Document Statistics only — wider so sections fit side by side (shorter modal) */
.modal-stats { width: 940px; max-width: 94%; }
.modal-stats .modal-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
  padding-bottom: 20px;
  align-items: start;
}
.modal-stats .stats-grid { grid-column: 1 / -1; }
.modal-stats .stats-grid { grid-template-columns: repeat(3, 1fr); }

/* ===================== Comments (Slides-style pins + popup) =====================
   No sidebar. A commented text range is wrapped in a .comment-anchor span and
   a small speech-bubble pin (sup.comment-ref, non-editable, one virtual caret
   character like footnote refs) sits right after it. Clicking the pin opens a
   floating .comment-popup card — same interaction model as the Slides app,
   with the Docs teal accent. */
.page-content .comment-anchor {
  background: var(--ui-accent-soft);
  border-bottom: 1px solid var(--ui-accent-border);
  border-radius: 2px;
  transition: background 0.15s;
}

.page-content .comment-anchor.comment-resolved {
  background: transparent;
  border-bottom-color: transparent;
}

sup.comment-ref {
  display: inline-block;
  margin: 0 3px;
  vertical-align: middle;
  line-height: 1;
  -webkit-user-select: none;
  user-select: none;
}

sup.comment-ref .comment-bubble {
  width: 17px;
  height: 17px;
  background: var(--ui-accent);
  border-radius: 50% 50% 50% 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-ui);
  box-shadow: 0 1px 4px var(--ui-accent-border);
  transform: rotate(-45deg);
  cursor: pointer;
  transition: transform 0.12s, background 0.15s;
}

/* Author initial lives in a pseudo-element (data-initial attribute) so it
   never enters innerText — word count and caret math stay untouched. */
sup.comment-ref .comment-bubble::before {
  content: attr(data-initial);
  transform: rotate(45deg);
}

sup.comment-ref:hover .comment-bubble { transform: rotate(-45deg) scale(1.12); }

sup.comment-ref.resolved .comment-bubble {
  background: var(--text-faint);
  box-shadow: none;
}

.comment-popup {
  position: fixed;
  z-index: 9600;
  width: 250px;
  background: var(--modal-bg, #fff);
  border: 1px solid var(--modal-border, rgba(0, 0, 0, 0.06));
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
  font-family: var(--font-ui);
  overflow: hidden;
  animation: commentPopupIn 0.15s ease-out;
}

@keyframes commentPopupIn {
  0% { opacity: 0; transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}

.comment-popup-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 6px;
  background: var(--ui-accent-soft);
  border-bottom: 1px solid var(--border-chrome);
}

.comment-popup-avatar {
  width: 20px;
  height: 20px;
  background: var(--ui-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

.comment-popup-author { font-weight: 600; font-size: 0.78rem; color: var(--text-base); }
.comment-popup-time { font-size: 0.65rem; color: var(--text-faint); }

.comment-popup-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  padding: 2px;
  border-radius: 3px;
  transition: background 0.12s, color 0.12s;
}

.comment-popup-close:hover { background: rgba(0, 0, 0, 0.06); color: var(--text-muted); }

.comment-popup-body {
  font-size: 0.78rem;
  color: var(--text-base);
  line-height: 1.4;
  padding: 6px 10px;
  word-break: break-word;
}

.comment-popup-quote {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 0 10px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.comment-popup-replies { border-top: 1px solid var(--border-chrome); }

.comment-popup-reply {
  padding: 5px 10px 2px;
  font-size: 0.72rem;
  color: var(--text-base);
  line-height: 1.35;
  word-break: break-word;
}

.comment-popup-reply .reply-time { display: block; font-size: 0.6rem; color: var(--text-faint); }

.comment-popup-actions {
  display: flex;
  gap: 6px;
  padding: 6px 10px 8px;
}

.comment-popup-actions button {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  cursor: pointer;
  transition: background 0.12s;
  font-family: var(--font-ui);
  font-weight: 500;
  border: none;
}

.comment-reply-btn { background: rgba(0, 0, 0, 0.04); color: var(--text-base); }
.comment-reply-btn:hover { background: rgba(0, 0, 0, 0.08); }
.comment-resolve-btn { background: var(--ui-accent-soft); color: var(--ui-accent); }
.comment-resolve-btn:hover { background: var(--ui-accent-selected); }
.comment-delete-btn { background: rgba(220, 38, 38, 0.08); color: #dc2626; }

/* ===================== Find & Replace / Go To bar (bottom-right) =====================
   Same compact design as the Notes app's findReplaceBar, with the Docs teal
   accent: rounded card pinned to the bottom-right corner, slide-in animation,
   find row with prev/next + live count, replace row, Go To row, options. */
#findBar {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9500;
  background: #fff;
  border: 1px solid var(--border-strong, #d1d5db);
  border-radius: 10px;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.14);
  padding: 12px 14px 10px;
  width: 320px;
  font-family: var(--font-ui);
  animation: frSlideIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes frSlideIn {
  from { opacity: 0; transform: translateY(12px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

#findBar .fr-header {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  color: var(--text-muted);
}

#findBar .fr-title { font-size: 13px; font-weight: 600; flex: 1; }

#findBar .fr-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  color: var(--text-muted);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

#findBar .fr-close-btn:hover { background: var(--ui-accent-soft); color: var(--text-base); }

#findBar .fr-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
  position: relative;
}

#findBar .fr-input {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid var(--border-strong, #d1d5db);
  border-radius: 6px;
  font-size: 13px;
  font-family: var(--font-ui);
  outline: none;
  transition: border-color 0.15s;
  min-width: 0;
  background: #fff;
  color: var(--text-base);
}

#findBar .fr-input:focus { border-color: var(--ui-accent); }
#findBar .fr-input.fr-no-match { border-color: #ef4444; background: #fff5f5; }

/* Go To type — custom dropdown (replaces the native <select>) */
#findBar .fr-select-wrap {
  position: relative;
  flex: 1.2;
  min-width: 0;
}

#findBar .fr-select-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  cursor: pointer;
  text-align: left;
  background: #fff;
  appearance: none;
}

#findBar .fr-select-btn:focus { border-color: var(--ui-accent); }

#findBar .fr-select-caret {
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.15s;
}

#findBar .fr-select-btn[aria-expanded="true"] .fr-select-caret { transform: rotate(180deg); }

#findBar .fr-select-menu {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg-toolbar);
  border: 1px solid var(--border-chrome);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  max-height: 150px;
  overflow-y: auto;
  display: none;
  z-index: 20;
}

#findBar .fr-select-menu.open { display: block; animation: ctxFadeIn 0.15s ease-out; }

#findBar .fr-select-item {
  padding: 7px 10px;
  font-size: 12.5px;
  font-family: var(--font-ui);
  color: var(--text-base);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  user-select: none;
  border-bottom: 1px solid var(--border-chrome);
}

#findBar .fr-select-item:last-child { border-bottom: none; }

#findBar .fr-select-item:hover,
#findBar .fr-select-item.focused {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
}

#findBar .fr-select-item.selected { font-weight: 600; }

#findBar .fr-goto-num { flex: 0.8; }

#findBar .fr-nav-btn {
  background: var(--bg-toolbar, #f3f4f6);
  border: 1px solid var(--border-strong, #d1d5db);
  border-radius: 5px;
  cursor: pointer;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  color: var(--text-muted);
  transition: background 0.15s;
  flex-shrink: 0;
}

#findBar .fr-nav-btn:hover { background: var(--ui-accent-soft); }
#findBar .fr-nav-btn:disabled { opacity: 0.4; cursor: default; }

#findBar .fr-count {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 44px;
  text-align: right;
}

#findBar .fr-action-btn {
  background: var(--ui-accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  font-family: var(--font-ui);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
  flex-shrink: 0;
}

#findBar .fr-action-btn:hover { background: var(--ui-accent-hover); }
#findBar .fr-action-btn:disabled { opacity: 0.4; cursor: default; }

#findBar .fr-divider {
  border: none;
  border-top: 1px solid var(--border-chrome);
  margin: 8px 0 9px;
}

#findBar .fr-goto-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}

#findBar .fr-options { margin-top: 2px; display: flex; gap: 12px; flex-wrap: wrap; }

#findBar .fr-opt-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}

#findBar .fr-opt-label input { cursor: pointer; accent-color: var(--ui-accent); }

/* ---- Added floating UI: hide in print (original @media print block left
   untouched above — this separate rule keeps it valid) ---- */
@media print {
  #findBar,
  #findBar .fr-select-menu,
  .comment-popup {
    display: none !important;
  }
}