/**
 * Word-like CSS for docx-engine web viewer/editor.
 * Warm, consistent palette: blue identity + warm neutrals. Segoe UI, ribbon metrics.
 */

/* ---- Global reset and app chrome ---- */
:root {
  /* Primary identity (links, primary actions, active state) */
  --word-blue: #2563eb;
  --word-blue-hover: #1d4ed8;
  --word-blue-light: #dbeafe;
  /* Legacy Word blue alias for compatibility */
  --word-blue-legacy: #2b579a;
  /* Fluent-style grays (slightly warm) */
  --word-gray-10: #1f2937;
  --word-gray-130: #6b7280;
  --word-gray-140: #9ca3af;
  --word-gray-20: #f3f4f6;
  --word-gray-30: #e5e7eb;
  --word-gray-40: #d1d5db;
  --word-gray-50: #9ca3af;
  --word-gray-60: #f9fafb;
  --word-white: #ffffff;
  --word-gray-15: #374151;
  --word-gray-120: #4b5563;
  /* Warm surfaces (soul) */
  --word-warm-bg: #eae8e5;
  --word-warm-panel: #f5f4f2;
  --word-warm-paper: #fdfcfb;
  /* Semantic */
  --word-error-text: #b91c1c;
  --word-error-bg: #fef2f2;
  --word-revision-del: #b00;
  --word-spell-underline: #dc2626;
  --word-find-highlight: #fef08a;
  --word-success: #059669;
  --word-success-bg: #ecfdf5;
  --word-caret: var(--word-gray-10);
  /* Aliases */
  --word-ribbon-bg: var(--word-warm-panel);
  --word-ribbon-border: var(--word-gray-20);
  --word-ribbon-border-strong: var(--word-gray-40);
  --word-page-bg: var(--word-warm-bg);
  --word-page-white: var(--word-white);
  --word-status-bg: var(--word-warm-panel);
  --word-status-border: var(--word-gray-20);
  --word-selection: rgba(37, 99, 235, 0.25);
  --word-btn-hover: var(--word-gray-30);
  --word-btn-active: var(--word-gray-40);
  --word-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --word-focus-ring: 2px solid var(--word-blue);
  --word-overlay-bg: rgba(0, 0, 0, 0.35);
  /* Security view */
  --word-security-bg: #f8f7f5;
  --word-security-card-bg: var(--word-white);
  --word-security-card-border: var(--word-gray-20);
  --word-security-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  --word-security-ok: #059669;
  --word-security-ok-bg: var(--word-success-bg);
  --word-security-warn: #b45309;
  --word-security-warn-bg: #fffbeb;
  --word-security-muted: var(--word-gray-130);
  /* Typography */
  --word-ui-font: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --word-font-default: Calibri, "Segoe UI", Candara, Cambria, sans-serif;
  --word-font-size: 11pt;
  --word-line-height: 1.15;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--word-ui-font);
  font-size: var(--word-font-size);
  background: var(--word-page-bg);
  color: var(--word-gray-10);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---- Top bar ---- */
.word-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 16px;
  background: var(--word-white);
  border-bottom: 2px solid var(--word-blue);
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.08);
  flex-shrink: 0;
  gap: 12px;
}
.word-top-bar-left {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.word-autosave-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--word-gray-10);
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 2px;
  margin-right: 2px;
  font-family: var(--word-ui-font);
}
.word-autosave-toggle:hover {
  background: var(--word-gray-30);
}
.word-autosave-toggle input {
  margin: 0;
  appearance: none;
  width: 36px;
  height: 20px;
  background: var(--word-gray-50);
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  transition: background 0.15s ease;
}
.word-autosave-toggle input::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--word-white);
  top: 2px;
  left: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  transition: transform 0.15s ease;
}
.word-autosave-toggle input:checked {
  background: var(--word-blue);
  border-color: var(--word-blue);
}
.word-autosave-toggle input:checked::before {
  transform: translateX(16px);
}
.word-autosave-toggle input:focus-visible {
  outline: var(--word-focus-ring);
  outline-offset: 2px;
}
.word-autosave-label {
  font-weight: 500;
}
.word-top-bar-title {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--word-gray-10);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 12px;
  font-family: var(--word-ui-font);
}
.word-top-bar-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.word-search-input {
  width: 200px;
  max-width: 220px;
  padding: 6px 12px;
  font-size: 11px;
  border: 1px solid var(--word-gray-40);
  border-radius: 2px;
  background: var(--word-gray-60);
  color: var(--word-gray-10);
  font-family: var(--word-ui-font);
}
.word-search-input::placeholder {
  color: var(--word-gray-140);
}
.word-search-input:focus {
  outline: none;
  border-color: var(--word-blue);
  background: var(--word-white);
}
.word-top-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  color: var(--word-gray-10);
  font-family: var(--word-ui-font);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.word-top-btn:hover {
  background: var(--word-gray-30);
  border-color: var(--word-gray-40);
}
.word-top-btn-icon {
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.word-top-btn-icon svg {
  display: block;
  flex-shrink: 0;
}
.word-top-btn-share {
  background: var(--word-blue);
  color: var(--word-white);
  border-color: var(--word-blue);
}
.word-top-btn-share:hover {
  background: var(--word-blue-hover);
  border-color: var(--word-blue-hover);
  color: var(--word-white);
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25);
}
/* Primary action (Share, Add signature, Confirm in dialogs) */
.word-btn-primary {
  background: var(--word-blue);
  color: var(--word-white);
  border-color: var(--word-blue);
}
.word-btn-primary:hover:not(:disabled) {
  background: var(--word-blue-hover);
  border-color: var(--word-blue-hover);
  color: var(--word-white);
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25);
}
.word-btn-primary:focus-visible {
  outline: var(--word-focus-ring);
  outline-offset: 1px;
}
.word-top-btn:focus-visible {
  outline: var(--word-focus-ring);
  outline-offset: 1px;
}

/* ---- Quick Access Toolbar (inside top bar) ---- */
.word-qat {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.word-qat-icon-only .word-qat-label {
  display: none;
}
.word-qat-icon-only {
  padding: 6px 8px;
}
.word-qat-icon-only .word-qat-icon {
  margin: 0;
}
.word-qat-item,
.word-qat-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--word-gray-10);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.word-qat-item:hover,
.word-qat-btn:hover:not(:disabled) {
  background: var(--word-btn-hover);
  border-color: var(--word-ribbon-border-strong);
}
.word-qat-btn:active:not(:disabled) {
  background: var(--word-btn-active);
}
.word-qat-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.word-qat-item:focus-visible,
.word-qat-btn:focus-visible {
  outline: var(--word-focus-ring);
  outline-offset: 1px;
}
.word-qat-file-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}
.word-qat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.word-qat-icon svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.word-qat-label {
  font-weight: 500;
  line-height: 1.2;
}

/* ---- Ribbon ---- */
.word-ribbon {
  position: relative;
  z-index: 15;
  background: var(--word-ribbon-bg);
  border-bottom: 1px solid var(--word-ribbon-border-strong);
  box-shadow: 0 1px 0 rgba(37, 99, 235, 0.04);
  flex-shrink: 0;
}
.word-ribbon-collapsed .word-ribbon-panels {
  display: none;
}
/* Fixed height so document does not jump when switching tabs */
.word-ribbon-panels {
  height: 52px;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.word-ribbon-panel-visible {
  flex: 1;
  min-height: 0;
  align-items: center;
  align-self: stretch;
  overflow: hidden;
}
.word-ribbon-tabs {
  display: flex;
  align-items: center;
  padding: 0 8px 0 10px;
  gap: 2px;
  background: var(--word-white);
  border-bottom: 1px solid var(--word-ribbon-border-strong);
}
.word-ribbon-collapse-btn {
  margin-left: auto;
  padding: 4px 8px;
  border: none;
  background: transparent;
  color: var(--word-gray-130);
  cursor: pointer;
  border-radius: 2px;
  font-size: 10px;
  line-height: 1;
}
.word-ribbon-collapse-btn:hover {
  background: var(--word-btn-hover);
  color: var(--word-gray-10);
}
.word-ribbon-collapse-btn:focus-visible {
  outline: var(--word-focus-ring);
  outline-offset: 1px;
}
.word-ribbon-collapse-icon {
  display: block;
}
.word-ribbon-tab {
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--word-gray-10);
  border-radius: 2px 2px 0 0;
  margin-bottom: -1px;
  transition: background .12s ease;
}
.word-ribbon-tab:hover {
  background: var(--word-btn-hover);
}
.word-ribbon-tab:focus-visible {
  outline: var(--word-focus-ring);
  outline-offset: 1px;
}
.word-ribbon-tab.active {
  background: var(--word-blue-light);
  color: var(--word-blue);
  border: 1px solid var(--word-gray-40);
  border-bottom: 2px solid var(--word-blue);
  padding: 5px 9px 5px;
  font-weight: 600;
  box-shadow: 0 -1px 0 0 var(--word-blue-light);
}
.word-ribbon-panel {
  padding: 4px 10px 5px;
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
}
/* Insert tab: single horizontal row; scroll when narrow; groups don't wrap internally */
.word-ribbon-panel-insert {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 6px 0;
  padding: 6px 10px 8px;
  min-height: 0;
  overflow: visible;
}
.word-ribbon-insert-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  min-height: 28px;
}
.word-ribbon-panel-insert .word-ribbon-group {
  flex-wrap: nowrap;
  flex-shrink: 0;
  padding-right: 8px;
  margin-right: 2px;
}
.word-ribbon-panel-insert .word-ribbon-group:last-child {
  padding-right: 0;
  margin-right: 0;
}
.word-ribbon-panel-insert .word-ribbon-label-inline {
  flex-shrink: 0;
  margin-left: 8px;
}
/* References / Mailings: single row, same density as View/Design */
.word-ribbon-panel .word-ribbon-group {
  flex-shrink: 0;
}
.word-ribbon-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 4px;
  padding-right: 10px;
  margin-right: 2px;
  border-right: 1px solid var(--word-ribbon-border-strong);
  position: relative;
}
.word-ribbon-group:last-child {
  border-right: none;
  padding-right: 0;
  margin-right: 0;
}
.word-ribbon-color-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.word-ribbon-color-label {
  font-size: 10px;
  color: var(--word-gray-130);
  white-space: nowrap;
}
.word-ribbon-select-label {
  font-size: 10px;
  color: var(--word-gray-130);
  align-self: center;
  white-space: nowrap;
}
.word-ribbon-font-options-flyout {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  background: var(--word-ribbon-bg);
  border: 1px solid var(--word-ribbon-border-strong);
  border-radius: 2px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 100;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px 10px;
  min-width: 200px;
}
/* Insert tab: Table split button + grid picker flyout */
.word-ribbon-table-split {
  display: inline-flex;
  align-items: stretch;
  border-radius: 2px;
  overflow: hidden;
}
.word-ribbon-table-split .word-ribbon-btn-table-main {
  border-radius: 2px 0 0 2px;
  margin: 0 -1px 0 0;
}
.word-ribbon-table-split .word-ribbon-table-dropdown-arrow {
  min-width: 18px;
  padding: 0 2px;
  font-size: 10px;
  border-radius: 0 2px 2px 0;
  margin: 0;
}
.word-ribbon-table-flyout {
  flex-direction: column;
  align-items: stretch;
  min-width: 220px;
}
.word-ribbon-table-flyout-portal {
  z-index: 1000;
}
.word-ribbon-table-grid-wrap {
  margin-bottom: 8px;
}
.word-ribbon-table-grid-hint {
  font-size: 10px;
  color: var(--word-gray-130);
  margin: 0 0 4px 0;
  min-height: 14px;
}
.word-ribbon-table-grid {
  display: grid;
  grid-template-columns: repeat(10, 14px);
  grid-template-rows: repeat(8, 12px);
  gap: 1px;
  width: fit-content;
}
.word-ribbon-table-grid-cell {
  width: 14px;
  height: 12px;
  border: 1px solid var(--word-ribbon-border-strong);
  background: var(--word-white);
  cursor: pointer;
  border-radius: 1px;
}
.word-ribbon-table-grid-cell:hover,
.word-ribbon-table-grid-cell-highlight {
  background: var(--word-blue-light);
  border-color: var(--word-blue);
}
.word-ribbon-btn-insert-table-dialog {
  width: 100%;
  justify-content: flex-start;
  margin-top: 4px;
}
.word-ribbon-dialog-launcher {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--word-gray-130);
  cursor: pointer;
  border-radius: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
}
.word-ribbon-dialog-launcher:hover {
  background: var(--word-btn-hover);
  color: var(--word-gray-10);
}
.word-dialog-launcher-arrow {
  width: 10px;
  height: 10px;
  display: block;
}
.word-ribbon-label {
  font-size: 10px;
  color: var(--word-gray-130);
  margin: 0 6px 0 0;
  width: auto;
  font-weight: 500;
  flex-shrink: 0;
  align-self: center;
}
.word-ribbon-label-inline {
  width: auto;
  margin-left: 4px;
  margin-bottom: 0;
}
.word-ribbon-split-paste,
.word-ribbon-split-underline {
  display: inline-flex;
  align-items: stretch;
  border-radius: 2px;
  overflow: hidden;
}
.word-ribbon-split-paste .word-ribbon-btn,
.word-ribbon-split-underline .word-ribbon-btn {
  border-radius: 0;
  margin: 0 -1px 0 0;
}
.word-ribbon-split-paste .word-ribbon-btn:first-child,
.word-ribbon-split-underline .word-ribbon-btn:first-child {
  border-radius: 2px 0 0 2px;
}
.word-ribbon-split-paste .word-ribbon-dropdown-arrow,
.word-ribbon-split-underline .word-ribbon-dropdown-arrow {
  min-width: 18px;
  padding: 0 2px;
  font-size: 10px;
  border-radius: 0 2px 2px 0;
}
.word-ribbon-dropdown-arrow {
  font-size: 10px;
  line-height: 1;
}
.word-styles-gallery {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.word-style-chip {
  display: inline-block;
  padding: 6px 10px;
  font-size: 10px;
  line-height: 1.2;
  font-family: var(--word-font-default);
  border: 1px solid var(--word-ribbon-border-strong);
  border-radius: 2px;
  background: var(--word-white);
  color: var(--word-gray-10);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
  white-space: nowrap;
}
.word-style-chip:hover:not(:disabled) {
  background: var(--word-btn-hover);
  border-color: var(--word-ribbon-border-strong);
}
.word-style-chip.active {
  background: var(--word-blue-light);
  color: var(--word-blue);
  border-color: var(--word-blue);
}
.word-style-chip-normal {
  font-weight: 400;
}
.word-style-chip-no-spacing {
  font-weight: 400;
  letter-spacing: -0.02em;
}
.word-style-chip-h1 {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.01em;
}
.word-style-chip-h2 {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0;
}
.word-style-chip-normal,
.word-style-chip-no-spacing {
  font-size: 10px;
}
.word-ribbon-btn-more-styles {
  min-width: 24px;
  font-size: 10px;
}
.word-ribbon-color-underline {
  margin-left: 2px;
}
.word-ribbon-hint {
  font-size: 10px;
  color: var(--word-gray-140);
  font-style: italic;
  white-space: nowrap;
}
.word-ribbon-btn {
  min-width: 24px;
  height: 22px;
  padding: 0 3px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-family: inherit;
  color: var(--word-gray-10);
  transition: background .12s ease, border-color .12s ease;
}
.word-ribbon-btn:hover:not(:disabled) {
  background: var(--word-btn-hover);
  border-color: var(--word-ribbon-border-strong);
}
.word-ribbon-btn:active:not(:disabled) {
  background: var(--word-btn-active);
}
.word-ribbon-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  color: var(--word-gray-140);
}
.word-ribbon-btn.active {
  background: var(--word-blue-light);
  color: var(--word-blue);
  border-color: transparent;
}
.word-ribbon-btn.mixed {
  background: rgba(37, 99, 235, 0.12);
  color: var(--word-blue);
  border: 1px dashed var(--word-blue);
}
.word-ribbon-btn:focus-visible {
  outline: 2px solid var(--word-blue);
  outline-offset: 1px;
}
/* Font buttons: B, I, U like Word */
.word-ribbon-btn-bold b { font-weight: 700; font-size: 13px; }
.word-ribbon-btn-italic i { font-style: italic; font-size: 13px; font-weight: 600; }
.word-ribbon-btn-underline u { text-decoration: underline; font-size: 12px; font-weight: 600; }
.word-ribbon-btn-clear { font-size: 14px; }
/* Alignment icons: visual distinction (Word-style lines) */
.word-align-icon { display: block; font-size: 14px; letter-spacing: -2px; min-width: 16px; }
.word-align-left { text-align: left; }
.word-align-center { text-align: center; width: 100%; }
.word-align-right { text-align: right; width: 100%; }
.word-align-justify { text-align: justify; width: 100%; letter-spacing: 0.5px; }
.word-bullet-icon, .word-number-icon { font-size: 14px; font-weight: 600; }
.word-ribbon-btn svg { width: 16px; height: 16px; }
.word-ribbon-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex-shrink: 0;
}
.word-ribbon-btn-grow-shrink {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
  min-width: 26px;
}
.word-grow-shrink-a {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
.word-grow-arrow, .word-shrink-arrow {
  margin-top: -1px;
}
.word-change-case-aa {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.word-clear-icon {
  width: 18px;
  height: 18px;
}
.word-ribbon-color {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--word-ribbon-border-strong);
  border-radius: 2px;
  cursor: pointer;
  background: var(--word-white);
}
.word-ribbon-color::-webkit-color-swatch-wrapper { padding: 1px; }
.word-ribbon-color::-webkit-color-swatch { border: none; border-radius: 1px; }
.word-ribbon-color:focus { outline: none; border-color: var(--word-blue); }
.word-sub-sup {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
.word-ribbon-select {
  font-size: 11px;
  padding: 3px 6px;
  min-width: 92px;
  max-width: 120px;
  border: 1px solid var(--word-ribbon-border-strong);
  border-radius: 2px;
  background: var(--word-white);
  color: var(--word-gray-10);
  font-family: var(--word-ui-font);
}
.word-ribbon-select:focus {
  outline: none;
  border-color: var(--word-blue);
}
.word-ribbon-select:focus-visible {
  outline: var(--word-focus-ring);
  outline-offset: 1px;
}
.word-ribbon-select:disabled {
  background: var(--word-gray-60);
  color: var(--word-gray-140);
  cursor: not-allowed;
}
.word-ribbon-font-input {
  min-width: 92px;
  max-width: 140px;
}
.word-ribbon-size-input {
  width: 52px;
  min-width: 44px;
  max-width: 72px;
}
/* Prevent number input spinner from covering the value (Word-like: type or pick from dropdown) */
.word-ribbon-size-input::-webkit-inner-spin-button,
.word-ribbon-size-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.word-ribbon-size-input {
  -moz-appearance: textfield;
  appearance: textfield;
}
.word-ribbon-font-input:disabled,
.word-ribbon-size-input:disabled {
  background: var(--word-gray-60);
  color: var(--word-gray-140);
  cursor: not-allowed;
}
/* Font/size combobox: input + dropdown arrow (Word-like) */
.word-combobox-wrap {
  display: inline-flex;
  align-items: stretch;
  border-radius: 2px;
  border: 1px solid var(--word-ribbon-border-strong);
  background: var(--word-white);
  position: relative;
  vertical-align: middle;
}
.word-combobox-wrap:focus-within {
  border-color: var(--word-blue);
}
.word-combobox-wrap .word-ribbon-font-input,
.word-combobox-wrap .word-ribbon-size-input {
  border: none;
  border-radius: 0;
  min-width: 0;
}
.word-combobox-wrap .word-ribbon-font-input {
  width: 110px;
  max-width: 140px;
}
.word-combobox-wrap .word-ribbon-size-input {
  width: 40px;
  max-width: 56px;
}
.word-combobox-arrow {
  width: 20px;
  min-width: 20px;
  padding: 0 2px;
  border: none;
  border-left: 1px solid var(--word-ribbon-border-strong);
  border-radius: 0 2px 2px 0;
  background: var(--word-white);
  color: var(--word-gray-100);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.word-combobox-arrow:hover:not(:disabled) {
  background: var(--word-btn-hover);
  color: var(--word-gray-10);
}
.word-combobox-arrow:disabled {
  background: var(--word-gray-60);
  color: var(--word-gray-140);
  cursor: not-allowed;
}
.word-combobox-list {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 2px;
  min-width: 100%;
  max-height: 240px;
  overflow-y: auto;
  background: var(--word-white);
  border: 1px solid var(--word-ribbon-border-strong);
  border-radius: 2px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 1000;
  list-style: none;
  padding: 2px 0;
  margin-bottom: 0;
  font-size: 11px;
  font-family: var(--word-ui-font);
}
.word-combobox-list[hidden] {
  display: none;
}
.word-combobox-list-option {
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.word-combobox-list-option:hover {
  background: var(--word-blue);
  color: var(--word-white);
}
.word-combobox-list-option[aria-selected="true"] {
  background: var(--word-gray-60);
}
.word-find-input {
  font-size: 11px;
  padding: 4px 8px;
  width: 130px;
  height: 26px;
  box-sizing: border-box;
  border: 1px solid var(--word-ribbon-border-strong);
  border-radius: 2px;
  background: var(--word-white);
  font-family: var(--word-ui-font);
  color: var(--word-gray-10);
}
.word-find-input::placeholder {
  color: var(--word-gray-140);
}
.word-find-input:focus {
  outline: none;
  border-color: var(--word-blue);
}
.word-ribbon-group-editing {
  align-items: center;
}
.word-ribbon-group-editing .word-find-input,
.word-ribbon-group-editing .word-ribbon-btn {
  margin-bottom: 0;
}
.word-replace-input {
  width: 118px;
}
.word-ribbon-label-sub {
  margin-left: 2px;
  color: var(--word-gray-140);
  font-weight: 400;
}
.word-ribbon-btn-size,
.word-ribbon-btn-indent {
  min-width: 28px;
  padding: 0 4px;
}
.word-ribbon-font-size-icon {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.word-ribbon-font-size-arrow {
  font-size: 8px;
  font-weight: 400;
  vertical-align: top;
  margin-left: -1px;
}
.word-ribbon-btn-size .word-ribbon-icon {
  width: auto;
  min-width: 20px;
  height: auto;
  display: inline-flex;
  align-items: center;
}
.word-ribbon-line-spacing-select {
  min-width: 4.5em;
}
.word-find-wrap {
  display: inline-flex;
  align-items: stretch;
  border-radius: 2px;
  border: 1px solid var(--word-ribbon-border-strong);
  background: var(--word-white);
  overflow: hidden;
}
.word-find-wrap:focus-within {
  border-color: var(--word-blue);
}
.word-find-wrap .word-find-input {
  width: 118px;
  border: none;
  border-radius: 0;
  height: 24px;
}
.word-find-wrap .word-find-input:focus {
  border: none;
  outline: none;
}
.word-ribbon-find-dropdown {
  min-width: 20px;
  padding: 0 2px;
  border: none;
  border-left: 1px solid var(--word-ribbon-border-strong);
  border-radius: 0;
  font-size: 10px;
  background: var(--word-white);
}
.word-ribbon-find-dropdown:hover:not(:disabled) {
  background: var(--word-btn-hover);
}
.word-sort-icon {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
.word-sort-az {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.word-sort-arrow {
  font-size: 8px;
  margin-left: 0;
  opacity: 0.9;
}
.word-strikethrough-icon {
  font-size: 11px;
  font-weight: 600;
  text-decoration: line-through;
}
.word-align-svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.word-ribbon-split-line-spacing,
.word-ribbon-split-shading,
.word-ribbon-split-borders {
  display: inline-flex;
  align-items: stretch;
  border-radius: 2px;
  overflow: hidden;
}
.word-ribbon-split-line-spacing .word-ribbon-btn,
.word-ribbon-split-shading .word-ribbon-btn,
.word-ribbon-split-borders .word-ribbon-btn {
  border-radius: 0;
  margin: 0 -1px 0 0;
}
.word-ribbon-split-line-spacing .word-ribbon-btn:first-child,
.word-ribbon-split-shading .word-ribbon-btn:first-child,
.word-ribbon-split-borders .word-ribbon-btn:first-child {
  border-radius: 2px 0 0 2px;
}
.word-ribbon-split-line-spacing .word-ribbon-dropdown-arrow,
.word-ribbon-split-shading .word-ribbon-dropdown-arrow,
.word-ribbon-split-borders .word-ribbon-dropdown-arrow {
  min-width: 18px;
  padding: 0 2px;
  font-size: 10px;
  border-radius: 0 2px 2px 0;
}
.word-bullet-svg {
  fill: currentColor;
}
.word-bullet-svg line {
  stroke: currentColor;
}
.word-ribbon-spacing-label {
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--word-gray-10);
}
.word-ribbon-spacing-input {
  font-size: 11px;
  padding: 2px 4px;
  width: 36px;
  border: 1px solid var(--word-ribbon-border-strong);
  border-radius: 2px;
  background: var(--word-white);
  font-family: var(--word-ui-font);
}
.word-ribbon-spacing-input:disabled {
  background: var(--word-gray-60);
  color: var(--word-gray-140);
  cursor: not-allowed;
}
.docx-find-hit {
  background: var(--word-find-highlight);
  padding: 0 1px;
  border-radius: 1px;
}
.docx-spell-error {
  text-decoration: underline wavy var(--word-spell-underline);
  text-underline-position: under;
}

/* ---- Ruler ---- */
.word-ruler {
  height: 26px;
  background: var(--word-white);
  border-bottom: 1px solid var(--word-ribbon-border-strong);
  padding: 0 24px;
  position: relative;
  flex-shrink: 0;
}
/* Ruler show/hide (W9h) */
.word-ruler.docx-ruler-hidden {
  display: none;
}
.word-ruler-inner {
  height: 100%;
  width: 21cm;
  max-width: 100%;
  margin: 0 auto;
  background: linear-gradient(to bottom, var(--word-gray-60) 0%, var(--word-white) 100%);
  position: relative;
}
.word-ruler-mark {
  position: absolute;
  bottom: 0;
  width: 1px;
  height: 4px;
  background: var(--word-gray-140);
  font-size: 0;
}
.word-ruler-mark.inch { height: 8px; }
.word-ruler-mark.half { height: 5px; }

/* Ruler indent markers (left, first-line, right) */
.word-ruler-indent {
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  pointer-events: none;
  z-index: 2;
}
.word-ruler-indent-left {
  border-width: 8px 0 0 8px;
  border-color: transparent transparent transparent var(--word-gray-15);
  margin-left: -4px;
}
.word-ruler-indent-first {
  border-width: 6px 0 0 6px;
  border-color: transparent transparent transparent var(--word-gray-120);
  margin-left: -3px;
  top: 4px;
}
.word-ruler-indent-right {
  border-width: 0 0 8px 8px;
  border-color: transparent transparent var(--word-gray-15) transparent;
  margin-left: -4px;
}

/* Tab stop markers on ruler */
.word-ruler-tabs {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}
.word-ruler-tab-stop {
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 6px 6px;
  border-color: transparent transparent var(--word-gray-120) transparent;
  margin-left: -3px;
  pointer-events: none;
}

/* ---- Document area (scrollable) ---- */
.word-doc-with-sidebar {
  display: flex;
  flex: 1;
  min-width: 0;
}
.word-doc-with-sidebar > .word-doc-area {
  min-width: 0;
}
.word-doc-area {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Ruler and scroll area share this column so ruler lines up with document (not offset by outline sidebar) */
.word-doc-area-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.word-outline-sidebar {
  width: 220px;
  min-width: 180px;
  flex-shrink: 0;
  background: var(--word-gray-60);
  border-right: 1px solid var(--word-ribbon-border-strong);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.word-outline-title {
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--word-gray-10);
  border-bottom: 1px solid var(--word-ribbon-border);
  flex-shrink: 0;
}
.word-outline-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
  font-size: 11px;
}
.word-outline-item {
  padding: 4px 12px 4px 8px;
  cursor: pointer;
  color: var(--word-gray-10);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.3;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.word-outline-item:hover {
  background: var(--word-btn-hover);
}
.word-outline-item:focus {
  outline: none;
  background: var(--word-blue-light);
}
.word-outline-item[data-level="1"] { padding-left: 8px; font-weight: 600; }
.word-outline-item[data-level="2"] { padding-left: 16px; }
.word-outline-item[data-level="3"] { padding-left: 24px; }
.word-outline-item[data-level="4"] { padding-left: 32px; }
.word-outline-item[data-level="5"] { padding-left: 40px; }
.word-outline-item[data-level="6"] { padding-left: 48px; }
.word-outline-item[data-level="7"],
.word-outline-item[data-level="8"],
.word-outline-item[data-level="9"] { padding-left: 56px; }
.word-outline-empty {
  padding: 12px;
  color: var(--word-gray-140);
  font-style: italic;
  font-size: 11px;
}

/* Task pane (right): placeholder for Review / Find & Replace / Selection */
.word-task-pane {
  width: 260px;
  min-width: 200px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--word-status-bg);
  border-left: 1px solid var(--word-ribbon-border-strong);
  overflow: hidden;
}
.word-task-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  border-bottom: 1px solid var(--word-ribbon-border-strong);
  flex-shrink: 0;
}
.word-task-pane-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  font-size: 11px;
}
.word-task-pane-placeholder {
  color: var(--word-gray-130);
  font-style: italic;
  margin: 0;
}

/* Ruler placeholders (Word-like: horizontal above doc, vertical to the left) */
.word-doc-rulers-and-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}
.word-ruler-vertical {
  width: 24px;
  min-width: 24px;
  flex-shrink: 0;
  background: var(--word-gray-60);
  border-right: 1px solid var(--word-ribbon-border);
  font-size: 9px;
  color: var(--word-gray-130);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 2px 2px 0 0;
}
.word-doc-body-with-ruler {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.word-ruler-horizontal {
  height: 20px;
  min-height: 20px;
  flex-shrink: 0;
  background: var(--word-gray-60);
  border-bottom: 1px solid var(--word-ribbon-border);
  font-size: 9px;
  color: var(--word-gray-130);
  padding: 2px 0 0 4px;
}

.word-doc-area-inner {
  flex: 1;
  overflow: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
}

/* ---- Page canvas (Word print layout) ---- */
.docx-pages {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  /* Visible “desk” between pages so the page cut is clear */
  background: var(--word-warm-bg);
  width: 100%;
  box-sizing: border-box;
}
.docx-page {
  box-sizing: border-box;
  width: var(--page-width, 21cm);
  min-width: 0;
  min-height: var(--page-height, 29.7cm);
  padding: var(--page-padding-top, 2cm) var(--page-padding-right, 2cm) var(--page-padding-bottom, 2cm) var(--page-padding-left, 2cm);
  overflow-x: hidden;
  background: var(--word-warm-paper);
  box-shadow: 0 2px 8px rgba(0,0,0,.08), 0 0 1px rgba(0,0,0,.06);
  font-family: var(--word-font-default);
  font-size: var(--word-font-size);
  line-height: var(--word-line-height);
  color: var(--word-gray-10);
  position: relative;
  /* Flex column so footer can sit at bottom when content is short (Word-like) */
  display: flex;
  flex-direction: column;
  /* Page break: each page starts on a new sheet when printing or in print layout */
  break-after: page;
}
.docx-page:last-child {
  break-after: auto;
}
/* Web layout: single continuous column, no page breaks (W9b) */
.docx-web-layout .docx-pages,
.docx-draft-layout .docx-pages {
  gap: 0;
}
.docx-web-layout .docx-page,
.docx-draft-layout .docx-page {
  min-height: 0;
  break-after: none;
}
.docx-web-layout .docx-page:last-child,
.docx-draft-layout .docx-page:last-child {
  break-after: none;
}
/* Draft view (W9d): simplified, no page shadow */
.docx-draft-layout .docx-page {
  box-shadow: none;
}
/* Split view (W9f): two panes, same document, independent scroll */
.docx-split-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.docx-split-pane {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 24px;
  box-sizing: border-box;
}
.docx-split-pane:first-child {
  border-bottom: 1px solid var(--word-ribbon-border, #edebe9);
}
#view-copy {
  min-height: 100%;
  box-sizing: border-box;
}
/* Outline view: headings only, indent by level (W9c) */
.docx-outline-view .docx-outline-item {
  cursor: pointer;
  padding: 0.2em 0.5em;
  border-radius: 2px;
}
.docx-outline-view .docx-outline-item:hover {
  background: rgba(0, 0, 0, 0.06);
}
.docx-outline-view .docx-outline-lvl-0 { padding-left: 0; }
.docx-outline-view .docx-outline-lvl-1 { padding-left: 1em; }
.docx-outline-view .docx-outline-lvl-2 { padding-left: 2em; }
.docx-outline-view .docx-outline-lvl-3 { padding-left: 3em; }
.docx-outline-view .docx-outline-lvl-4 { padding-left: 4em; }
.docx-outline-view .docx-outline-lvl-5 { padding-left: 5em; }
.docx-outline-view .docx-outline-lvl-6 { padding-left: 6em; }
.docx-outline-view .docx-outline-lvl-7 { padding-left: 7em; }
.docx-outline-view .docx-outline-lvl-8 { padding-left: 8em; }
.docx-outline-view .docx-outline-lvl-9 { padding-left: 9em; }
/* Scale when zoom < 100% is applied via .word-doc-area transform in JS */
.docx-block { margin-bottom: 0.25em; min-width: 0; }
.docx-block:last-child { margin-bottom: 0; }
.docx-line {
  white-space: pre-wrap;
  word-break: break-word;
  /* Reserve at least one line of height so multiple line breaks (w:br) show Word-like spacing; empty lines don't collapse */
  min-height: 1.2em;
}
/* Visible caret (Word-identical editing §4.2.1) */
.word-caret {
  display: inline-block;
  width: 0;
  height: 1em;
  margin-right: -2px; /* cancel border width so caret does not shift following text */
  border-left: 2px solid var(--word-caret);
  vertical-align: text-bottom;
  pointer-events: none;
  animation: word-caret-blink 1s step-end infinite;
}
@keyframes word-caret-blink {
  50% { opacity: 0; }
}
/* Selection highlight overlay */
.word-selection-highlight {
  background: rgba(37, 99, 235, 0.3);
  pointer-events: none;
  position: absolute;
  box-sizing: border-box;
}
.docx-placeholder { color: var(--word-gray-120); font-style: italic; }

/* Table of contents: Word-identical (indent by level, dot leaders, right-aligned page numbers, hyperlinks) */
.docx-toc { display: block; }
.docx-toc-list { list-style: none; margin: 0; padding: 0; }
.docx-toc-item-link {
  cursor: pointer;
  color: var(--word-blue);
  text-decoration: none;
}
.docx-toc-item-link:hover { text-decoration: underline; }
.docx-toc-inner { display: block; margin-bottom: 0.25em; }
.docx-toc-entry {
  display: flex;
  align-items: baseline;
  line-height: 1.4;
  margin-left: 0;
  gap: 0;
}
.docx-toc-entry .docx-toc-link,
.docx-toc-entry .docx-toc-text {
  flex: 0 0 auto;
  white-space: nowrap;
}
.docx-toc-entry .docx-toc-link {
  color: var(--word-blue);
  text-decoration: none;
}
.docx-toc-entry .docx-toc-link:hover {
  text-decoration: underline;
}
.docx-toc-entry .docx-toc-leader {
  flex: 1 1 auto;
  min-width: 0.5em;
  border-bottom: 1px dotted var(--word-gray-15);
  margin: 0 0.25em 0.2em;
  vertical-align: baseline;
}
.docx-toc-entry .docx-toc-page {
  flex: 0 0 auto;
  margin-left: 0.25em;
}
.docx-toc-level-1 { margin-left: 0; }
.docx-toc-level-2 { margin-left: 1.5em; }
.docx-toc-level-3 { margin-left: 3em; }
.docx-toc-level-4 { margin-left: 4.5em; }
.docx-toc-level-5 { margin-left: 6em; }
.docx-toc-level-6 { margin-left: 7.5em; }
.docx-toc-level-7 { margin-left: 9em; }
.docx-toc-level-8 { margin-left: 10.5em; }
.docx-toc-level-9 { margin-left: 12em; }
.docx-toc-update {
  margin-left: 0.5em;
  padding: 0.1em 0.4em;
  font-size: 9pt;
  color: var(--word-blue);
  background: transparent;
  border: 1px solid var(--word-blue);
  border-radius: 2px;
  cursor: pointer;
  vertical-align: baseline;
}
.docx-toc-update:hover {
  background: var(--word-blue-light);
  color: var(--word-blue-hover);
}

/* Headers / footers (Word-like: distinct from body, inside page margins) */
.docx-header {
  margin: -2cm -2cm 0.6em -2cm;
  padding: 0.4cm 2cm;
  border-bottom: 1px solid rgba(0,0,0,0.12);
  font-size: 9pt;
  color: var(--word-gray-120);
  min-height: 1em;
  /* Avoid clipping images (B1 / §5.1): no overflow hidden so header images are visible */
  overflow: visible;
}
.docx-footer {
  margin: 0.6em -2cm -2cm -2cm;
  margin-top: auto; /* Push footer to bottom of page when content is short (Word-like) */
  padding: 0.4cm 2cm;
  border-top: 1px solid rgba(0,0,0,0.12);
  font-size: 9pt;
  color: var(--word-gray-120);
  min-height: 1em;
  overflow: visible;
}
/* Ensure images in headers/footers are visible and sized (B1: rule out CSS hiding) */
.docx-header img,
.docx-footer img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* Footnotes / endnotes area (Word-like: separator line only, no "Footnotes"/"Endnotes" heading) */
.docx-footnotes, .docx-endnotes {
  margin-top: 1.5em;
  padding-top: 0.5em;
  border-top: 1px solid var(--word-gray-40);
  font-size: 10pt;
  color: var(--word-gray-10);
}
.docx-footnote, .docx-endnote {
  margin-bottom: 0.4em;
}
.docx-footnote .docx-footnote-ref,
.docx-endnote .docx-endnote-ref {
  font-weight: 600;
  margin-right: 0.25em;
}

/* Tables: Word-like appearance — one cell per merged region, no internal grid lines in merged cells. */
.docx-table-wrapper {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0.5em 0;
  overflow-x: auto;
  box-sizing: border-box;
}
.docx-table {
  border-collapse: collapse;
  width: 100%;
  table-layout: auto;
  max-width: 100%;
  box-sizing: border-box;
}
.docx-table-fixed-layout {
  table-layout: fixed;
}
/* Word: auto layout so row heights follow content and merged cells fill the full span (complete rectangle, no "key" shape). Column widths still from <col>. */
/* Word default: light grid (inline borders from OOXML override when present). Merged cells = one box.
   Row height (w:trHeight) is applied on <tr> so all cells in the row extend to fit like Word. */
.docx-cell {
  border: 1px solid var(--word-gray-40, #d2d0ce);
  padding: 4px 8px;
  vertical-align: top;
  min-width: 0;
  min-height: 1.5em;
  overflow-wrap: break-word;
  box-sizing: border-box;
}
/* Word: vertically merged cells show label centered; cell height is driven by spanned rows so table is a complete rectangle. */
.docx-cell[data-rowspan]:not([data-rowspan="1"]) {
  vertical-align: middle;
}
/* Empty cells (no content, no explicit tcBorders): no borders so they don't render as extra boxes (Word-like). */
.docx-cell-empty {
  border: none;
}
/* Table gridlines toggle (W9i): when on, same Word-like grid; merged cells stay one box. */
.docx-show-gridlines .docx-table .docx-cell {
  border: 1px solid rgba(0, 0, 0, 0.25);
}
.docx-show-gridlines .docx-table .docx-cell-empty {
  border: none;
}
.docx-page img { display: inline-block; max-width: 100%; vertical-align: middle; }

/* Headings (Word outline levels 1–9; style like Word’s Heading 1–9) */
.docx-block[data-outline-level="1"] .docx-line { font-size: 16pt; font-weight: 700; margin-bottom: 0.25em; }
.docx-block[data-outline-level="2"] .docx-line { font-size: 13pt; font-weight: 700; margin-bottom: 0.25em; }
.docx-block[data-outline-level="3"] .docx-line { font-size: 12pt; font-weight: 700; margin-bottom: 0.25em; }
.docx-block[data-outline-level="4"] .docx-line { font-size: 11pt; font-weight: 700; margin-bottom: 0.2em; }
.docx-block[data-outline-level="5"] .docx-line { font-size: 11pt; font-weight: 700; margin-bottom: 0.2em; }
.docx-block[data-outline-level="6"] .docx-line { font-size: 11pt; font-weight: 700; margin-bottom: 0.2em; }
.docx-block[data-outline-level="7"] .docx-line { font-size: 11pt; font-weight: 600; margin-bottom: 0.2em; }
.docx-block[data-outline-level="8"] .docx-line { font-size: 11pt; font-weight: 600; margin-bottom: 0.2em; }
.docx-block[data-outline-level="9"] .docx-line { font-size: 11pt; font-weight: 600; margin-bottom: 0.2em; }

/* Hyperlinks in document (Word blue) */
.docx-page a {
  color: var(--word-blue);
  text-decoration: underline;
}
.docx-page a:visited {
  color: var(--word-blue);
}

/* Basic list bullets: visual only (layout uses paragraph indents).
   Treat any paragraph with data-list-level as a list item.
   Use data-list-format (from numbering.xml numFmt) so bullet lists render as bullets
   and numbered lists use per-numId value (data-list-value), not one global counter. */
.docx-block[data-list-level] .docx-line {
  position: relative;
  padding-left: 1.4em;
}
/* When backend provides list format: marker is set via inline style (--docx-list-marker / --docx-list-value)
   so it works in all browsers; attr() in custom properties has limited support. */
.docx-block[data-list-level][data-list-format="bullet"] .docx-line:first-child::before {
  content: var(--docx-list-marker);
  position: absolute;
  left: 0;
}
.docx-block[data-list-level][data-list-format="decimal"] .docx-line:first-child::before {
  content: var(--docx-list-value) ".";
  position: absolute;
  left: 0;
  font-variant-numeric: tabular-nums;
}
/* Fallback when numbering.xml not loaded: num_id "1" = bullet, others = decimal (single counter). */
.docx-block[data-list-level]:not([data-list-format])[data-list-num-id="1"] .docx-line:first-child::before {
  content: "\2022";
  position: absolute;
  left: 0;
}
.docx-pages {
  counter-reset: docx-list-number;
}
.docx-block[data-list-level]:not([data-list-format])[data-list-num-id]:not([data-list-num-id="1"]) .docx-line:first-child::before {
  counter-increment: docx-list-number;
  content: counter(docx-list-number) ".";
  position: absolute;
  left: 0;
  font-variant-numeric: tabular-nums;
}

/* Selection and caret (Word-like) */
#view.editing .docx-line {
  position: relative;
}
#view.editing ::selection {
  background: transparent;
}
#view.editing {
  cursor: text;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}
#view.editing .docx-inline-object,
#view.editing .docx-inline-object img {
  cursor: pointer;
  vertical-align: baseline;
}

/* Macros warning (Fluent/Word error styling) */
.macros-warning {
  color: var(--word-error-text);
  padding: 8px 14px;
  font-size: 12px;
  background: var(--word-error-bg);
  border-bottom: 1px solid var(--word-gray-20);
}

/* ---- Status bar (Word-identical) ---- */
.word-status-bar {
  height: 24px;
  min-height: 24px;
  background: var(--word-status-bg);
  border-top: 1px solid var(--word-ribbon-border-strong);
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-family: var(--word-ui-font);
  color: var(--word-gray-10);
  flex-shrink: 0;
}
.word-status-left,
.word-status-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.word-status-message {
  font-size: 11px;
  color: var(--word-gray-130);
  margin-left: 4px;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.word-status-left > span, .word-status-left > button {
  position: relative;
}
.word-status-left > span + span::before,
.word-status-left > span + button::before,
.word-status-left > button + span::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  margin-top: -7px;
  width: 1px;
  height: 14px;
  background: var(--word-ribbon-border-strong);
}
#go-to-page {
  width: 2.6em;
  padding: 2px 4px;
  font-size: 11px;
  border: 1px solid var(--word-ribbon-border-strong);
  border-radius: 2px;
  background: var(--word-white);
  text-align: center;
  font-family: inherit;
}
#go-to-page:focus {
  outline: none;
  border-color: var(--word-blue);
}
.word-status-zoom {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.word-status-zoom-label {
  flex-shrink: 0;
}
.word-status-zoom-slider {
  width: 88px;
  min-width: 88px;
  max-width: 88px;
  flex-shrink: 0;
  accent-color: var(--word-blue);
  cursor: pointer;
  margin: 0;
}
.word-status-zoom-value {
  font-size: 11px;
  width: 3.2em;
  min-width: 3.2em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.word-status-zoom-slider:focus-visible {
  outline: var(--word-focus-ring);
  outline-offset: 2px;
}
.word-status-revisions select {
  font-size: 11px;
  padding: 2px 6px;
  border: 1px solid var(--word-ribbon-border-strong);
  border-radius: 2px;
  background: var(--word-white);
  font-family: inherit;
}
.word-status-btn {
  font-size: 11px;
  padding: 3px 10px;
  margin-left: 4px;
  border: 1px solid var(--word-ribbon-border-strong);
  border-radius: 2px;
  background: var(--word-white);
  color: var(--word-gray-10);
  cursor: pointer;
  font-family: inherit;
  transition: background .12s ease;
}
.word-status-btn:hover:not(:disabled) {
  background: var(--word-btn-hover);
}
.word-status-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Track changes (Word-like): show insertions and deletions when viewing “All markup” */
#view [data-revision-type="ins"] {
  background: rgba(0, 128, 0, 0.15);
  text-decoration: none;
}
#view [data-revision-type="del"] {
  text-decoration: line-through;
  color: var(--word-revision-del);
}
#view.docx-view-final [data-revision-type="del"] { display: none; }
#view.docx-view-final [data-revision-type="ins"] { background: transparent; text-decoration: none; }

/* Hidden text (w:vanish): hidden by default; show when "Show hidden" is on (R16a) */
#view .docx-vanish { visibility: hidden; }
#view.docx-show-hidden .docx-vanish {
  visibility: visible;
  color: var(--word-gray-120);
  border-bottom: 1px dotted var(--word-gray-120);
}

/* Comments panel */
.word-comments-panel {
  border-top: 1px solid var(--word-ribbon-border-strong);
  background: var(--word-status-bg);
  max-height: 180px;
  overflow-y: auto;
  font-size: 11px;
}
.word-comments-panel-header {
  padding: 6px 14px;
  font-weight: 600;
  border-bottom: 1px solid var(--word-ribbon-border-strong);
  color: var(--word-gray-10);
}
.word-comments-list { padding: 4px 0; }
.word-comment-item {
  padding: 8px 14px;
  border-bottom: 1px solid var(--word-ribbon-border);
  cursor: pointer;
  transition: background .12s ease;
}
.word-comment-item:hover { background: var(--word-btn-hover); }
.word-comment-reply { margin-left: 14px; border-left: 2px solid var(--word-ribbon-border); padding-left: 8px; }
.word-comment-reply-label { font-size: 10px; color: var(--word-gray-130); margin-right: 4px; }
.word-comment-snippet { color: var(--word-gray-130); }
.docx-comment-highlight { background: rgba(255, 212, 0, 0.45); border-radius: 2px; }

/* Comments pane (document view: list of parsed DOCX comments) */
.word-comments-pane {
  border-top: 1px solid var(--word-ribbon-border-strong);
  background: var(--word-status-bg);
  max-height: 200px;
  overflow-y: auto;
  font-size: 11px;
}
.word-comments-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px;
  font-weight: 600;
  border-bottom: 1px solid var(--word-ribbon-border-strong);
  color: var(--word-gray-10);
}
.word-comments-pane-body { padding: 4px 0; }
.word-comments-pane .word-comment-item {
  padding: 8px 14px;
  border-bottom: 1px solid var(--word-ribbon-border);
}
.word-comments-pane .word-comment-item-selected { background: var(--word-btn-hover); }

/* Spell check / Thesaurus / Translate panes (inline panels below ribbon, same pattern as comments) */
.word-spell-pane {
  border-top: 1px solid var(--word-ribbon-border-strong);
  background: var(--word-status-bg);
  max-height: 200px;
  overflow-y: auto;
  font-size: 11px;
  flex-shrink: 0;
}
.word-spell-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px;
  font-weight: 600;
  border-bottom: 1px solid var(--word-ribbon-border-strong);
  color: var(--word-gray-10);
}
.word-spell-pane-body {
  padding: 8px 14px;
  color: var(--word-gray-10);
}
.word-spell-pane-body ul {
  margin: 0.5em 0 0 1em;
  padding: 0;
}
.word-spell-pane-body li {
  margin-bottom: 0.25em;
}
.word-thesaurus-pane .word-spell-pane-body,
.word-translate-pane .word-spell-pane-body {
  padding: 8px 14px;
}

/* Headings / outline pane (left sidebar) */
.word-headings-pane {
  width: 220px;
  min-width: 180px;
  flex-shrink: 0;
  border-right: 1px solid var(--word-ribbon-border-strong);
  background: var(--word-status-bg);
  display: flex;
  flex-direction: column;
  font-size: 11px;
}
.word-headings-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  font-weight: 600;
  border-bottom: 1px solid var(--word-ribbon-border-strong);
  color: var(--word-gray-10);
}
.word-headings-pane-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.word-headings-pane-empty {
  padding: 10px 12px;
  margin: 0;
  color: var(--word-gray-130);
  font-size: 11px;
}
.word-headings-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.word-headings-item {
  margin: 0;
  padding: 0;
}
.word-headings-item-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 4px 10px;
  border: none;
  background: transparent;
  color: var(--word-gray-10);
  cursor: pointer;
  font-size: 11px;
  line-height: 1.35;
}
.word-headings-item-btn:hover {
  background: var(--word-btn-hover);
}
.word-headings-item-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.word-headings-item-placeholder .word-headings-item-text {
  color: var(--word-gray-130, #666);
  font-style: italic;
}

.word-comment-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
  font-size: 10px;
  color: var(--word-gray-130);
}
.word-comment-id { font-weight: 600; color: var(--word-gray-10); }
.word-comment-goto-btn,
.word-comment-reply-btn {
  padding: 2px 6px;
  font-size: 10px;
  background: transparent;
  border: 1px solid var(--word-ribbon-border);
  border-radius: 2px;
  color: var(--word-gray-120);
  cursor: pointer;
}
.word-comment-goto-btn:hover,
.word-comment-reply-btn:hover { background: var(--word-btn-hover); color: var(--word-gray-10); }
.word-comment-body { color: var(--word-gray-120); white-space: pre-wrap; word-break: break-word; }
.word-comment-replies { list-style: none; margin: 8px 0 0 0; padding: 0; }
.word-comments-pane .word-comment-reply {
  margin-left: 14px;
  border-left: 2px solid var(--word-ribbon-border);
  padding-left: 8px;
  margin-top: 6px;
}
.word-comment-reply-meta { font-size: 10px; color: var(--word-gray-130); margin-bottom: 2px; }
.word-comment-reply-body { color: var(--word-gray-120); white-space: pre-wrap; word-break: break-word; font-size: 11px; }
.word-comment-reply-input {
  width: 100%;
  box-sizing: border-box;
  font-size: 11px;
  padding: 4px 6px;
  border: 1px solid var(--word-ribbon-border);
  border-radius: 2px;
  margin-top: 2px;
}
.word-comment-reply-input:focus { outline: 1px solid var(--word-accent, #2563eb); outline-offset: 1px; }
.word-status-comments-btn {
  margin-left: 8px;
  padding: 2px 6px;
  font-size: 11px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--word-gray-120);
  cursor: pointer;
}
.word-status-comments-btn:hover { background: var(--word-btn-hover); color: var(--word-gray-10); }
.word-status-comments-btn[aria-pressed="true"] { background: var(--word-ribbon-border); color: var(--word-gray-10); }

/* Spelling panel: compact list, suggestions on demand */
.word-spelling-panel .word-spelling-list { padding: 4px 0; }
.word-spelling-none,
.word-spelling-loading {
  padding: 10px 14px;
  margin: 0;
  color: var(--word-gray-130);
  font-size: 11px;
}
.word-spelling-row {
  padding: 6px 14px;
  border-bottom: 1px solid var(--word-ribbon-border);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11px;
}
.word-spelling-row-open { align-items: flex-start; }
.word-spelling-word { font-weight: 600; color: var(--word-gray-10); }

/* Thesaurus panel (W8c) */
.word-thesaurus-panel .word-thesaurus-hint,
.word-thesaurus-panel .word-thesaurus-loading,
.word-thesaurus-panel .word-thesaurus-none {
  padding: 10px 14px;
  margin: 0;
  color: var(--word-gray-130);
  font-size: 11px;
}
.word-thesaurus-panel .word-thesaurus-word {
  padding: 6px 14px 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--word-gray-10);
}
.word-thesaurus-panel .word-thesaurus-list {
  padding: 4px 14px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.word-thesaurus-panel .word-thesaurus-list .word-spelling-chip { margin: 0; }

/* Translate panel (W8d) */
.word-translate-panel .word-translate-hint,
.word-translate-panel .word-translate-loading,
.word-translate-panel .word-translate-none {
  padding: 10px 14px;
  margin: 0;
  color: var(--word-gray-130);
  font-size: 11px;
}
.word-translate-panel .word-translate-langs {
  padding: 6px 14px 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.word-translate-panel .word-translate-langs label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--word-gray-130);
}
.word-translate-panel .word-translate-langs .word-ribbon-select {
  min-width: 8em;
}
.word-translate-panel .word-translate-result {
  padding: 10px 14px;
}
.word-translate-panel .word-translate-original {
  font-size: 11px;
  color: var(--word-gray-130);
  margin-bottom: 4px;
}
.word-translate-panel .word-translate-translated {
  font-size: 12px;
  font-weight: 600;
  color: var(--word-gray-10);
  margin-bottom: 8px;
}
.word-translate-panel .word-translate-actions {
  display: flex;
  gap: 8px;
}
.word-translate-panel .word-translate-replace-btn,
.word-translate-panel .word-translate-insert-btn {
  padding: 4px 10px;
  font-size: 11px;
  border: 1px solid var(--word-ribbon-border-strong);
  border-radius: 2px;
  background: var(--word-white);
  color: var(--word-gray-10);
  cursor: pointer;
  font-family: inherit;
}
.word-translate-panel .word-translate-replace-btn:hover,
.word-translate-panel .word-translate-insert-btn:hover { background: var(--word-btn-hover); }

.word-spelling-replace-btn {
  padding: 2px 8px;
  font-size: 11px;
  border: 1px solid var(--word-ribbon-border-strong);
  border-radius: 2px;
  background: var(--word-white);
  color: var(--word-gray-10);
  cursor: pointer;
  font-family: inherit;
}
.word-spelling-replace-btn:hover { background: var(--word-btn-hover); }
.word-spelling-suggestions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  width: 100%;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--word-ribbon-border);
}
.word-spelling-suggest-label {
  color: var(--word-gray-130);
  font-size: 11px;
  margin-right: 4px;
}
.word-spelling-chip {
  padding: 2px 8px;
  font-size: 11px;
  border: 1px solid var(--word-ribbon-border-strong);
  border-radius: 4px;
  background: var(--word-white);
  color: var(--word-blue);
  cursor: pointer;
  font-family: inherit;
}
.word-spelling-chip:hover { background: var(--word-blue-light); }
.word-spelling-custom { display: inline-flex; align-items: center; gap: 4px; }
.word-spelling-custom-input {
  width: 80px;
  padding: 2px 6px;
  font-size: 11px;
  border: 1px solid var(--word-ribbon-border-strong);
  border-radius: 2px;
  font-family: inherit;
}
.word-spelling-custom-input:focus { outline: none; border-color: var(--word-blue); }
.word-spelling-apply-btn {
  padding: 2px 8px;
  font-size: 11px;
  border: 1px solid var(--word-blue);
  border-radius: 2px;
  background: var(--word-blue);
  color: var(--word-white);
  cursor: pointer;
  font-family: inherit;
}
.word-spelling-apply-btn:hover { background: var(--word-blue-hover); color: var(--word-white); }

/* Comment hover tooltip (author, date, text) */
.word-comment-tooltip {
  position: fixed;
  z-index: 10000;
  max-width: 320px;
  padding: 8px 10px;
  background: var(--word-gray-10);
  color: var(--word-white);
  font-size: 12px;
  line-height: 1.4;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  white-space: pre-wrap;
  word-break: break-word;
}
.word-comment-tooltip .word-comment-tooltip-reply-to { font-size: 11px; opacity: 0.9; margin-bottom: 2px; }
.word-comment-tooltip .word-comment-tooltip-author { font-weight: 600; margin-bottom: 2px; }
.word-comment-tooltip .word-comment-tooltip-date { font-size: 11px; opacity: 0.9; margin-bottom: 4px; }
.word-comment-tooltip .word-comment-tooltip-text { color: var(--word-gray-60); }
.word-comment-tooltip .word-comment-para { margin: 0 0 4px 0; }
.word-comment-tooltip .word-comment-para:last-child { margin-bottom: 0; }
.word-comment-snippet .word-comment-para { margin: 0 0 2px 0; font-size: inherit; }
.word-comment-snippet .word-comment-para:last-child { margin-bottom: 0; }

/* Comment balloon (margin-style, with tail) */
.word-comment-tooltip.word-comment-balloon {
  max-width: 280px;
  background: var(--word-white);
  color: var(--word-gray-10);
  border: 1px solid var(--word-ribbon-border-strong);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  position: relative;
  margin-left: 10px;
}
.word-comment-tooltip.word-comment-balloon::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 12px;
  border: 8px solid transparent;
  border-right-color: var(--word-ribbon-border-strong);
  width: 0;
  height: 0;
}
.word-comment-tooltip.word-comment-balloon::after {
  content: "";
  position: absolute;
  left: -7px;
  top: 13px;
  border: 7px solid transparent;
  border-right-color: var(--word-white);
  width: 0;
  height: 0;
}
.word-comment-tooltip.word-comment-balloon .word-comment-tooltip-author { color: var(--word-gray-10); }
.word-comment-tooltip.word-comment-balloon .word-comment-tooltip-date { color: var(--word-gray-130); }
.word-comment-tooltip.word-comment-balloon .word-comment-tooltip-text { color: var(--word-gray-10); }
.word-comment-tooltip.word-comment-balloon .word-comment-para { color: var(--word-gray-10); }

/* Format at cursor pane (run/paragraph style) */
.word-format-panel {
  border-top: 1px solid var(--word-ribbon-border-strong);
  background: var(--word-status-bg);
  max-height: 160px;
  overflow-y: auto;
  font-size: 11px;
}
.word-format-panel-header {
  padding: 6px 14px;
  font-weight: 600;
  border-bottom: 1px solid var(--word-ribbon-border-strong);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--word-gray-10);
}
.word-format-panel-toggle {
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--word-gray-130);
  padding: 0 4px;
  border-radius: 2px;
}
.word-format-panel-toggle:hover { color: var(--word-gray-10); background: var(--word-btn-hover); }
.word-format-panel-body { padding: 8px 14px; }
.word-format-row { padding: 2px 0; color: var(--word-gray-10); }
.word-format-empty { color: var(--word-gray-130); font-style: italic; }
.word-status-link {
  background: none;
  border: none;
  cursor: pointer;
  font-size: inherit;
  color: var(--word-blue);
  text-decoration: underline;
  padding: 0 6px;
  font-family: inherit;
}
.word-status-link:hover { text-decoration: none; }
.word-status-link:disabled { opacity: 0.5; cursor: default; }

/* ---- View container (fills doc-area so rendering window is always visible) ---- */
#view {
  position: relative;
  outline: none;
  width: 100%;
  max-width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#view:empty::before {
  content: "Choose a .docx file to view or edit.";
  color: var(--word-gray-140);
  font-style: italic;
  margin: auto;
}
/* Hide placeholder once we have loaded a document (avoids :empty timing/flex quirks) */
#view.has-content::before {
  content: none !important;
  display: none !important;
}

/* Inline math: MathML renders in supporting browsers (Safari, Firefox, Chrome) */
.docx-math {
  display: inline;
  vertical-align: middle;
}
.docx-math math {
  display: inline;
  vertical-align: middle;
}

/* Inline image: selectable and resizable by drag */
.docx-inline-object img {
  display: block;
}
.docx-image-inline,
.docx-inline-object:has(img) {
  display: inline-block;
  position: relative;
  vertical-align: middle;
}
.docx-image-inline.docx-image-selected,
.docx-inline-object.docx-image-selected:has(img) {
  outline: 2px solid var(--word-blue);
  outline-offset: 1px;
  overflow: visible;
}
.docx-resize-handle {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 16px;
  height: 16px;
  background: var(--word-blue);
  border: 2px solid var(--word-white);
  cursor: nwse-resize;
  z-index: 10;
  box-sizing: border-box;
  border-radius: 2px;
}
.docx-resize-handle:hover {
  background: var(--word-blue-hover);
  transform: scale(1.1);
}
.docx-resize-handle::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--word-white);
  border-bottom: 2px solid var(--word-white);
}

/* ---- Tab stops dialog (Q1b) ---- */
.word-dialog-overlay {
  position: fixed;
  inset: 0;
  background: var(--word-overlay-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.word-dialog-overlay[hidden] {
  display: none;
}
.word-dialog {
  background: var(--word-page-white);
  border: 1px solid var(--word-gray-40);
  border-radius: 4px;
  box-shadow: var(--word-shadow-sm), 0 4px 12px rgba(0,0,0,0.15);
  min-width: 320px;
  max-width: 90vw;
}
.word-dialog-title {
  padding: 10px 14px;
  font-weight: 600;
  font-family: var(--word-ui-font);
  font-size: 14px;
  color: var(--word-gray-10);
  border-bottom: 1px solid var(--word-ribbon-border);
}
.word-dialog-body {
  padding: 14px;
  font-family: var(--word-ui-font);
}
.word-dialog-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 280px;
}
.word-dialog-form .word-dialog-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.word-dialog-form .word-dialog-form-group label {
  font-size: 12px;
  font-weight: 500;
  color: var(--word-gray-10);
}
.word-dialog-form .word-dialog-form-group input,
.word-dialog-form .word-dialog-form-group select {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  font-family: var(--word-ui-font);
  border: 1px solid var(--word-gray-40);
  border-radius: 4px;
  background: var(--word-page-white);
  color: var(--word-gray-10);
}
.word-dialog-form .word-dialog-form-group input:focus,
.word-dialog-form .word-dialog-form-group select:focus {
  outline: none;
  border-color: var(--word-blue);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}
.word-dialog-form .word-dialog-form-group input::placeholder {
  color: var(--word-gray-140);
}
.word-dialog-hint {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--word-gray-130);
}
.word-dialog-row {
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.word-dialog-row label { display: flex; align-items: center; gap: 4px; }
.word-tab-stops-list {
  max-height: 160px;
  overflow-y: auto;
  margin-bottom: 10px;
  border: 1px solid var(--word-ribbon-border);
  border-radius: 2px;
  padding: 6px;
}
.word-tab-stops-list:empty::before {
  content: "No tab stops. Add one below.";
  color: var(--word-gray-140);
  font-style: italic;
}
.word-tab-stop-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--word-gray-20);
  font-size: 12px;
}
.word-tab-stop-row:last-child { border-bottom: none; }
.word-tab-stops-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.word-tab-stops-add label { display: flex; align-items: center; gap: 4px; }
.word-dialog-buttons {
  padding: 10px 14px;
  border-top: 1px solid var(--word-ribbon-border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.word-dialog-buttons button:focus-visible {
  outline: var(--word-focus-ring);
  outline-offset: 1px;
}
.word-status-btn:focus-visible,
#go-to-page:focus-visible {
  outline: var(--word-focus-ring);
  outline-offset: 1px;
}

/* ---- Security view (ribbon Security tab) ---- */
.word-security-view {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
  background: var(--word-security-bg);
  font-family: var(--word-ui-font);
}
.word-security-view-header {
  padding: 10px 20px;
  border-bottom: 1px solid var(--word-security-card-border);
  background: var(--word-security-card-bg);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  flex-wrap: nowrap;
}
.word-security-view-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--word-gray-10);
  letter-spacing: -0.01em;
}
.word-security-view-body {
  padding: 24px 20px 32px;
  flex: 1;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}
.word-security-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 24px;
  background: var(--word-security-card-bg);
  border: 1px solid var(--word-security-card-border);
  box-shadow: var(--word-security-card-shadow);
}
.word-security-status-encrypted {
  color: var(--word-security-ok);
  background: var(--word-security-ok-bg);
  border-color: rgba(16, 124, 16, 0.25);
}
.word-security-status-plain {
  color: var(--word-security-muted);
}
.word-security-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.word-security-status-encrypted .word-security-status-dot {
  background: var(--word-security-ok);
}
.word-security-status-plain .word-security-status-dot {
  background: var(--word-security-muted);
}
.word-security-card {
  background: var(--word-security-card-bg);
  border: 1px solid var(--word-security-card-border);
  border-radius: 6px;
  box-shadow: var(--word-security-card-shadow);
  padding: 20px;
  margin-bottom: 16px;
}
.word-security-card:last-child {
  margin-bottom: 0;
}
.word-security-card-title {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--word-gray-10);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.word-security-card-desc {
  margin: 0 0 14px;
  font-size: 12px;
  color: var(--word-security-muted);
  line-height: 1.45;
}
.word-security-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.word-security-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--word-gray-20);
  font-size: 13px;
  color: var(--word-gray-10);
}
.word-security-list-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.word-security-list-item:first-child {
  padding-top: 0;
}
.word-security-role {
  font-size: 11px;
  color: var(--word-security-muted);
  text-transform: capitalize;
  margin-left: 8px;
  font-weight: 500;
}
.word-security-owner-badge {
  font-size: 11px;
  color: var(--word-security-muted);
  margin-left: 6px;
  font-weight: 500;
}
.word-security-meta-item {
  font-size: 12px;
  color: var(--word-gray-10);
  padding: 6px 0;
  line-height: 1.4;
}
.word-security-meta-note {
  font-size: 11px;
  color: var(--word-security-muted);
  margin-top: 10px;
  font-style: italic;
}
.word-security-warn-box {
  background: var(--word-security-warn-bg);
  border: 1px solid rgba(180, 83, 9, 0.3);
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--word-security-warn);
  margin-top: 8px;
}
.word-security-empty {
  font-size: 12px;
  color: var(--word-security-muted);
  font-style: italic;
}

/* Version history section */
.word-security-collapsible-heading {
  margin-bottom: 0;
}
.word-security-collapse-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  text-align: left;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--word-gray-10);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}
.word-security-collapse-btn:hover {
  color: var(--word-blue);
}
.word-security-collapse-icon {
  font-size: 10px;
  color: var(--word-security-muted);
}
.word-security-version-count {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--word-security-muted);
}
.word-security-version-section #security-version-body {
  margin-top: 12px;
}
.word-security-version-section .word-security-card-desc {
  margin-bottom: 12px;
}
.word-security-version-actions {
  margin-bottom: 14px;
}
.word-security-save-version-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.word-security-version-label-input {
  min-width: 160px;
  padding: 6px 10px;
  font-size: 12px;
  font-family: var(--word-ui-font);
  border: 1px solid var(--word-gray-20);
  border-radius: 4px;
  background: var(--word-gray-05);
  color: var(--word-gray-10);
}
.word-security-version-label-input::placeholder {
  color: var(--word-security-muted);
}
.word-security-version-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  border: 1px solid var(--word-gray-20);
  border-radius: 6px;
  overflow: hidden;
  background: var(--word-gray-03);
}
.word-security-version-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--word-gray-20);
  font-size: 13px;
  background: var(--word-security-card-bg);
}
.word-security-version-item:last-child {
  border-bottom: none;
}
.word-security-version-item-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.word-security-version-date {
  font-weight: 500;
  color: var(--word-gray-10);
}
.word-security-version-label {
  font-size: 12px;
  color: var(--word-security-muted);
}
.word-security-version-item-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.word-security-version-confirm {
  font-size: 12px;
  color: var(--word-security-muted);
  margin-right: 4px;
}
.word-security-version-clear-confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--word-security-muted);
  margin-bottom: 8px;
}
.word-security-version-clear-btn {
  margin-top: 4px;
}

.word-security-add-wrap {
  position: relative;
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.word-security-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--word-blue);
  color: var(--word-white);
  border-color: var(--word-blue);
}
.word-security-add-btn:hover {
  background: var(--word-blue-hover);
  border-color: var(--word-blue-hover);
  color: var(--word-white);
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25);
}
.word-security-add-icon {
  font-size: 18px;
  line-height: 1;
  font-weight: 300;
}
.word-security-add-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  min-width: 180px;
  background: var(--word-page-white);
  border: 1px solid var(--word-gray-40);
  border-radius: 4px;
  box-shadow: var(--word-shadow-sm), 0 4px 12px rgba(0, 0, 0, 0.12);
  padding: 4px 0;
  z-index: 50;
}
.word-security-add-menu-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  text-align: left;
  font-size: 13px;
  font-family: var(--word-ui-font);
  color: var(--word-gray-10);
  background: none;
  border: none;
  cursor: pointer;
}
.word-security-add-menu-item:hover:not(:disabled) {
  background: var(--word-gray-60);
}
.word-security-add-menu-item:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.word-security-add-menu-item:focus-visible {
  outline: var(--word-focus-ring);
  outline-offset: -2px;
}
/* ---- Print: hide chrome, show document only ---- */
@media print {
  .word-title-bar,
  .word-qat,
  .word-ribbon,
  .word-ruler,
  .word-status-bar,
  .word-comments-panel,
  .word-format-panel,
  #tab-stops-dialog-overlay,
  .macros-warning,
  #macros {
    display: none !important;
  }
  .word-doc-area {
    transform: none !important;
    overflow: visible;
    flex: none;
  }
  body {
    background: var(--word-white);
    overflow: visible;
  }
  .docx-page {
    box-shadow: none;
    break-after: page;
  }
  .docx-page:last-child {
    break-after: auto;
  }
}