/**
 * Word-like CSS for Arrival Docs web viewer/editor.
 * Arrival brand: warm neutrals + arrival green accent.
 */

/* ---- Global reset and app chrome ---- */
:root {
  /* Brand accent (arrival green) */
  --word-blue: #0a8c7a;
  --word-blue-hover: #077a6a;
  --word-blue-light: #d1faf0;
  /* Legacy alias for compatibility */
  --word-blue-legacy: #0a8c7a;
  /* 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(10, 140, 122, 0.08);
  flex-shrink: 0;
  gap: 12px;
}
.word-top-bar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Brand logo in top bar — back-to-list (when viewing doc) or back-to-landing link */
.word-brand-logo {
  font-family: "Plus Jakarta Sans", var(--word-ui-font);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  user-select: none;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  margin-right: 4px;
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.word-brand-logo.word-brand-home {
  cursor: pointer;
}
.word-brand-logo.word-brand-home[type="button"] {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
}
.word-brand-home:hover { transform: scale(1.12); }
.word-brand-ar,
.word-brand-rival { color: var(--word-gray-10); line-height: 1; transition: color 0.25s ease; }
.word-brand-home:hover .word-brand-ar,
.word-brand-home:hover .word-brand-rival { color: var(--word-blue); }
.word-brand-chevron {
  color: var(--word-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin: 0 -0.02em;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.word-brand-home:hover .word-brand-chevron { transform: scaleX(-1); }
.word-brand-chevron svg { height: 0.48em; width: auto; display: block; }
.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-title-editable {
  cursor: pointer;
  border-radius: 4px;
  padding: 2px 8px;
  transition: background 0.15s ease;
}
.word-title-editable:hover {
  background: var(--word-gray-05, #f0f0f0);
}
.word-title-input {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--word-gray-10);
  text-align: center;
  border: 1px solid var(--word-blue, #185abd);
  border-radius: 4px;
  padding: 2px 8px;
  outline: none;
  background: #fff;
  width: 260px;
  max-width: 100%;
}
.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;
}

.word-autosave-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  font-size: 11px;
  color: var(--word-gray-130);
  user-select: none;
}
.word-autosave-icon {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.word-autosave-icon svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}
.word-autosave-icon[data-saving] svg {
  animation: word-spin 1s linear infinite;
}
.word-autosave-label {
  font-weight: 400;
  line-height: 1;
}
@keyframes word-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ---- 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; taller for two content rows (Home) or breathing room */
.word-ribbon-panels {
  height: 88px;
  min-height: 88px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* When Layout tab is active, allow panels to overflow so native margin/orientation select dropdown is visible */
.word-ribbon-layout-active .word-ribbon-panels {
  overflow: visible;
}
/* Visible panel: horizontal scroll when content overflows (all viewport widths); scrollbar hidden for clean look */
.word-ribbon-panel-visible {
  flex: 1;
  min-height: 0;
  min-width: 0;
  align-items: center;
  align-self: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.word-ribbon-panel-visible::-webkit-scrollbar {
  display: none;
}
/* Layout tab: allow native select dropdown to show (avoid clipping so it doesn’t “instantly close”) */
.word-ribbon-panel-layout.word-ribbon-panel-visible {
  overflow: visible;
}
.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-specific flyouts and dropdowns (z-index, positioning) */
.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 .suite-ribbon-btn:first-child {
  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-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 .suite-ribbon-btn,
.word-ribbon-split-underline .suite-ribbon-btn {
  border-radius: 0;
  margin: 0 -1px 0 0;
}
.word-ribbon-split-paste .suite-ribbon-btn:first-child,
.word-ribbon-split-underline .suite-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-more-styles-wrap {
  position: relative;
  display: inline-block;
}
.word-ribbon-more-styles-flyout {
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  min-width: 160px;
  max-height: 320px;
  overflow-y: auto;
}
.word-ribbon-select-option {
  display: block;
  width: 100%;
  padding: 6px 10px;
  font-size: 11px;
  text-align: left;
  border: none;
  border-radius: 2px;
  background: transparent;
  color: var(--word-gray-10);
  cursor: pointer;
  white-space: nowrap;
}
.word-ribbon-select-option:hover {
  background: var(--word-btn-hover);
}
.word-ribbon-select-option[aria-selected="true"] {
  background: var(--word-blue-light);
  color: var(--word-blue);
}
.word-ribbon-color-underline {
  margin-left: 2px;
}
/* Design tab: page color picker (input type=color) */
.word-ribbon-page-color {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--word-ribbon-border-strong);
  border-radius: 3px;
  cursor: pointer;
  background: transparent;
}
.word-ribbon-page-color::-webkit-color-swatch-wrapper { padding: 1px; }
.word-ribbon-page-color::-webkit-color-swatch { border: none; border-radius: 2px; }
.word-ribbon-page-color:focus { outline: none; border-color: var(--word-blue); }
.word-ribbon-hint {
  font-size: 10px;
  color: var(--word-gray-140);
  font-style: italic;
  white-space: nowrap;
}
/* Font / alignment: inner content of suite-ribbon-btn (Word-style B, I, U, align) */
.suite-ribbon-btn .word-ribbon-btn-bold b { font-weight: 700; font-size: 13px; }
.suite-ribbon-btn .word-ribbon-btn-italic i { font-style: italic; font-size: 13px; font-weight: 600; }
.suite-ribbon-btn .word-ribbon-btn-underline u { text-decoration: underline; font-size: 12px; font-weight: 600; }
.word-ribbon-btn-clear { font-size: 14px; }
.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-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-sub-sup {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
/* Font/size combobox (Word-specific: input + dropdown) */
.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 .suite-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 .suite-ribbon-btn,
.word-ribbon-split-shading .suite-ribbon-btn,
.word-ribbon-split-borders .suite-ribbon-btn {
  border-radius: 0;
  margin: 0 -1px 0 0;
}
.word-ribbon-split-line-spacing .suite-ribbon-btn:first-child,
.word-ribbon-split-shading .suite-ribbon-btn:first-child,
.word-ribbon-split-borders .suite-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: 16px;
  min-height: 16px;
  background: var(--word-white);
  border-bottom: 1px solid var(--word-ribbon-border-strong);
  padding: 0;
  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: 16px;
  min-width: 16px;
  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: 0;
}
.word-doc-body-with-ruler {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.word-ruler-horizontal {
  height: 16px;
  min-height: 16px;
  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: 0;
}

.word-doc-area-inner {
  flex: 1;
  overflow: auto;
  /* ~2cm top/bottom so page has breathing room; same gray as desk */
  padding: 2cm 24px 2cm 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  background: var(--word-page-bg);
  /* Hide scrollbars; scroll behavior (wheel, trackpad, keyboard) unchanged */
  scrollbar-width: none; /* Firefox */
}
.word-doc-area-inner::-webkit-scrollbar {
  display: none; /* WebKit/Blink */
}
/* Zoom applied via transform (not zoom) so scroll height stays full and last page is reachable */
.word-doc-zoom-wrap {
  width: 100%;
  min-height: min-content;
}

/* ---- Page canvas (Word print layout) ---- */
.docx-pages {
  padding: 0 0 96px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  /* Visible “desk” between pages so the page cut is clear */
  background: var(--word-page-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;
  /* Default white when no page background color is set; overridden by inline style when pageColor is set */
  background: var(--word-white);
  /* Soft shadow only; no border/ring (1px shadow removed so page edge does not show a visible outline) */
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  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: 0; padding: 0; min-width: 0; }
.docx-block:last-child { margin-bottom: 0; }
/* Text box (Word shape with text content): Word renders with thin border, padding, inline-block */
.docx-textbox {
  border: 0.75pt solid #000000;
  padding: 7.2pt 7.2pt;
  min-height: 1em;
  display: inline-block;
  box-sizing: border-box;
  vertical-align: top;
  margin: 4px 0;
}
/* Drop cap (w:framePr @w:dropCap, @w:lines): first letter floats left, spans data-drop-cap-lines */
.docx-drop-cap .docx-line::first-letter {
  float: left;
  font-size: 2.5em;
  line-height: 1;
  margin-right: 0.08em;
  font-family: inherit;
}
.docx-line {
  white-space: pre-wrap;
  word-break: break-word;
  hyphens: manual;
  /* 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;
}
/* Line numbers (Layout tab): one number per .docx-line, reset per page */
.docx-line-numbers .docx-page {
  counter-reset: line 0;
}
.docx-line-numbers .docx-line {
  position: relative;
  padding-left: 2.2em;
}
.docx-line-numbers .docx-line::before {
  content: counter(line);
  counter-increment: line;
  position: absolute;
  left: 0;
  width: 2em;
  text-align: right;
  color: var(--word-gray-6, #6b7280);
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  user-select: none;
}
/* 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; }
}
@keyframes docx-blink {
  0%, 100% { opacity: 1; }
  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);
}

/* Chart block (embedded chart placeholder / simple bar chart) */
.docx-chart {
  display: block;
  margin: 0.5em 0;
  padding: 12px;
  border: 1px solid var(--word-gray-40, #c8c6c4);
  border-radius: 4px;
  background: var(--word-white, #fff);
}
.docx-chart-inner { display: block; }
.docx-chart-title {
  font-size: 10pt;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--word-gray-160, #323130);
}
.docx-chart-labels, .docx-chart-bars {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: flex-end;
  margin-bottom: 4px;
}
.docx-chart-label {
  font-size: 9pt;
  color: var(--word-gray-120, #605e5c);
  width: 28px;
  text-align: center;
  display: inline-block;
}
.docx-chart-bar-wrap {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
}
.docx-chart-bar {
  min-width: 4px;
  background: var(--word-blue, #0078d4);
  border-radius: 2px;
}
.docx-chart-placeholder {
  margin: 0;
  font-size: 10pt;
  color: var(--word-gray-120, #605e5c);
}

/* 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;
}

/* Per-page header/footer inside .docx-page (print layout): align with page padding so they sit at top/bottom of content area */
.docx-page .docx-header-per-page {
  margin-top: calc(-1 * var(--page-padding-top, 2cm));
  margin-left: calc(-1 * var(--page-padding-left, 2cm));
  margin-right: calc(-1 * var(--page-padding-right, 2cm));
  padding: 0.4cm var(--page-padding-right, 2cm) 0.6em var(--page-padding-left, 2cm);
}
.docx-page .docx-footer-per-page {
  margin-left: calc(-1 * var(--page-padding-left, 2cm));
  margin-right: calc(-1 * var(--page-padding-right, 2cm));
  margin-bottom: calc(-1 * var(--page-padding-bottom, 2cm));
  padding: 0.6em var(--page-padding-right, 2cm) 0.4cm var(--page-padding-left, 2cm);
  margin-top: auto;
}
/* Page body wrapper: takes remaining space so footer sits at bottom of page */
.docx-page-body {
  flex: 1 1 auto;
  min-height: 0;
}

/* 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; }
.docx-page { position: relative; }
.docx-anchor-image { pointer-events: none; }

/* Headings (Word outline levels 1–9; style like Word’s Heading 1–9) */
.docx-block[data-outline-level="1"] .docx-line { font-family: "Calibri Light", Calibri, sans-serif; font-size: 16pt; font-weight: 600; color: #2F5496; }
.docx-block[data-outline-level="2"] .docx-line { font-family: "Calibri Light", Calibri, sans-serif; font-size: 13pt; font-weight: 600; color: #2F5496; }
.docx-block[data-outline-level="3"] .docx-line { font-family: "Calibri Light", Calibri, sans-serif; font-size: 12pt; font-weight: 600; color: #1F3763; }
.docx-block[data-outline-level="4"] .docx-line { font-family: "Calibri Light", Calibri, sans-serif; font-size: 11pt; font-weight: 400; font-style: italic; color: #2F5496; }
.docx-block[data-outline-level="5"] .docx-line { font-family: "Calibri Light", Calibri, sans-serif; font-size: 11pt; font-weight: 600; color: #2F5496; }
.docx-block[data-outline-level="6"] .docx-line { font-family: "Calibri Light", Calibri, sans-serif; font-size: 11pt; font-weight: 600; color: #1F3763; }
.docx-block[data-outline-level="7"] .docx-line { font-family: "Calibri Light", Calibri, sans-serif; font-size: 11pt; font-weight: 400; font-style: italic; color: #1F3763; }
.docx-block[data-outline-level="8"] .docx-line { font-family: "Calibri Light", Calibri, sans-serif; font-size: 10.5pt; font-weight: 600; color: #272727; }
.docx-block[data-outline-level="9"] .docx-line { font-family: "Calibri Light", Calibri, sans-serif; font-size: 10.5pt; font-weight: 400; font-style: italic; color: #272727; }

/* 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;
}
.docx-block[data-list-level="1"] .docx-line { padding-left: 2.8em; }
.docx-block[data-list-level="2"] .docx-line { padding-left: 4.2em; }
.docx-block[data-list-level="3"] .docx-line { padding-left: 5.6em; }
.docx-block[data-list-level="4"] .docx-line { padding-left: 7.0em; }
.docx-block[data-list-level="5"] .docx-line { padding-left: 8.4em; }
.docx-block[data-list-level="6"] .docx-line { padding-left: 9.8em; }
.docx-block[data-list-level="7"] .docx-line { padding-left: 11.2em; }
.docx-block[data-list-level="8"] .docx-line { padding-left: 12.6em; }
/* 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] .docx-line:first-child::before {
  position: absolute;
}
.docx-block[data-list-level="0"] .docx-line:first-child::before { left: 0; }
.docx-block[data-list-level="1"] .docx-line:first-child::before { left: 1.4em; }
.docx-block[data-list-level="2"] .docx-line:first-child::before { left: 2.8em; }
.docx-block[data-list-level="3"] .docx-line:first-child::before { left: 4.2em; }
.docx-block[data-list-level="4"] .docx-line:first-child::before { left: 5.6em; }
.docx-block[data-list-level="5"] .docx-line:first-child::before { left: 7.0em; }
.docx-block[data-list-level="6"] .docx-line:first-child::before { left: 8.4em; }
.docx-block[data-list-level="7"] .docx-line:first-child::before { left: 9.8em; }
.docx-block[data-list-level="8"] .docx-line:first-child::before { left: 11.2em; }
.docx-block[data-list-level][data-list-format="bullet"] .docx-line:first-child::before {
  content: var(--docx-list-marker);
}
.docx-block[data-list-level][data-list-format="decimal"] .docx-line:first-child::before {
  content: var(--docx-list-value) ".";
  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";
}
.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) ".";
  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;
  background: transparent;
}
/* Document body wrapper: full width so text below image-only first block is visible (corpus 000d7568) */
#view .word-doc-body {
  width: 100%;
  min-width: 100%;
  box-sizing: border-box;
  background: transparent;
}
#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. z-index so it paints above line/run content. */
.docx-inline-object img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}
.docx-image-inline,
.docx-inline-object:has(img) {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  z-index: 1;
  isolation: isolate;
}
.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;
}
/* ═══════════════════════════════════════════════════════
   Responsive: Narrow desktop (≤1024px) — prevent ribbon overlap
   ═══════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .word-ribbon-panels {
    min-width: 0;
  }
  .suite-ribbon-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .suite-ribbon-tabs::-webkit-scrollbar {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════
   Responsive: Tablet (≤768px)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .suite-ribbon-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .suite-ribbon-tabs::-webkit-scrollbar {
    display: none;
  }
  .suite-ribbon-group-label,
  .word-ribbon-label-inline {
    display: none;
  }
  .suite-ribbon-group {
    padding: 0 4px;
  }
  .suite-ribbon-panel {
    padding: 3px 6px 4px;
  }
  .suite-ribbon-select--font {
    max-width: 100px;
  }

  /* Sidebar panes: overlay instead of side-by-side */
  .word-doc-with-sidebar {
    position: relative;
  }
  .word-headings-pane,
  .word-comments-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    width: 280px;
    max-width: 80vw;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.12);
  }

  /* Top bar: compact */
  .word-app > .suite-top-bar {
    min-height: 40px;
    padding: 0 8px;
  }

  /* Status bar: compact */
  .word-status-bar {
    padding: 0 6px;
    min-height: 22px;
    font-size: 10px;
  }
}

/* ═══════════════════════════════════════════════════════
   Responsive: Phone (≤480px)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .suite-ribbon-tabs {
    gap: 0;
    padding: 0 4px;
  }
  .suite-ribbon-tab {
    padding: 4px 6px;
    font-size: 10px;
  }
  .suite-ribbon-select--font,
  .suite-ribbon-select--size {
    display: none;
  }
  .suite-ribbon-group {
    padding: 0 4px;
  }

  /* Sidebar panes: full width on phone */
  .word-headings-pane,
  .word-comments-panel {
    width: 100%;
    max-width: 100%;
  }

  /* Top bar: minimal */
  .word-app > .suite-top-bar {
    min-height: 36px;
    padding: 0 6px;
  }
  .suite-top-bar-title {
    font-size: 13px;
  }

  /* Document area: tighter padding */
  .word-doc-area-inner {
    padding: 8px;
  }
  .docx-page {
    padding: 12px;
  }
}

/* ---- Print: hide chrome, show document only ---- */
@media print {
  .word-title-bar,
  .word-qat,
  .word-ribbon,
  .suite-ribbon,
  .suite-top-bar,
  .word-ruler,
  .word-status-bar,
  .word-comments-panel,
  .word-headings-pane,
  .word-format-panel,
  .word-mobile-toolbar,
  .word-banner-restrict,
  .word-remote-cursor,
  .word-remote-cursor-label,
  .suite-presence,
  #tab-stops-dialog-overlay,
  .macros-warning,
  #macros {
    display: none !important;
  }
  .word-app {
    display: block;
  }
  .word-doc-area {
    transform: none !important;
    overflow: visible;
    flex: none;
  }
  .word-doc-area-inner {
    max-width: none;
    box-shadow: none;
  }
  .word-doc-zoom-wrap {
    transform: none !important;
  }
  body {
    background: var(--word-white);
    overflow: visible;
  }
  .docx-page {
    box-shadow: none;
    break-after: page;
    margin: 0;
    /* Keep padding so per-page header/footer align with content area */
    padding: var(--page-padding-top, 2cm) var(--page-padding-right, 2cm) var(--page-padding-bottom, 2cm) var(--page-padding-left, 2cm);
  }
  .docx-page:last-child {
    break-after: auto;
  }
  @page {
    margin: 2.54cm;
  }
}