/*
 * Document surface theme
 *
 * This iframe is intentionally isolated from the Infinity shell, so it needs
 * the same canonical TronXVI palette locally. The page itself remains white
 * paper; only the editor chrome and controls use the shell palette.
 */
:root {
  color-scheme: dark;
  --word-blue: #f2f5f7;
  --word-blue-hover: #dfe6eb;
  --word-file-blue: #ffffff;
  --word-main-surface: #010304;
  --word-selected-row: rgba(242, 245, 247, 0.12);
  --word-white: #0b0f12;
  --word-text: #f2f5f7;
  --word-muted-text: #aab2ba;
  --word-divider: rgba(242, 245, 247, 0.16);
  --word-control-border: rgba(242, 245, 247, 0.34);
  --word-rail: #050708;
  --word-template-border: rgba(242, 245, 247, 0.34);
  --word-template-background: #0b0f12;
  --word-title-left: #010304;
  --word-title-center: #0b1e25;
  --word-title-right: #041116;
  --word-ribbon-surface: #0b0f12;
  --word-workspace-left: #010304;
  --word-workspace-mid: #041116;
  --word-workspace-right: #0b1e25;
  --word-status-surface: #0b0f12;
  --editor-bg: #010304;
  --editor-panel: rgba(3, 10, 13, 0.94);
  --editor-accent: #f2f5f7;
  --editor-accent-strong: #ffffff;
  --editor-ink: #f2f5f7;
  --editor-muted: #aab2ba;
  --editor-line: rgba(242, 245, 247, 0.16);
  --editor-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
}

html,
body,
#root {
  background: #010304 !important;
  color: #f2f5f7 !important;
}

body,
.word-home-app,
.word-editor-shell,
.word-startup-recovery,
.layout-grid,
.document-surface {
  background: #010304 !important;
  color: #f2f5f7 !important;
}

.word-editor-titlebar,
.word-editor-tabstrip,
.top-editor-nav {
  background: linear-gradient(90deg, #010304 0%, #0b1e25 55%, #041116 100%) !important;
  color: #f2f5f7 !important;
  border-color: rgba(242, 245, 247, 0.16) !important;
}

.word-editor-titlebar {
  border-bottom: 1px solid rgba(242, 245, 247, 0.16) !important;
}

.word-editor-autosave,
.word-editor-qa-button,
.word-editor-window-title,
.word-window-controls,
.word-editor-tab,
.word-editor-tab.active,
.word-editor-titlebar-right,
.top-editor-nav-label,
.top-editor-nav a {
  color: #f2f5f7 !important;
}

.word-editor-titlebar .word-editor-qa-button,
.word-editor-titlebar .word-window-control,
.word-editor-titlebar .word-editor-top-button,
.word-editor-titlebar .word-editor-alert-button {
  border-color: rgba(242, 245, 247, 0.34) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f2f5f7 !important;
}

.word-editor-titlebar .word-editor-qa-button:hover,
.word-editor-titlebar .word-window-control:hover,
.word-editor-titlebar .word-editor-top-button:hover,
.word-editor-titlebar .word-editor-alert-button:hover,
.word-editor-titlebar .word-editor-top-button.active {
  background: rgba(242, 245, 247, 0.16) !important;
  border-color: #f2f5f7 !important;
  color: #ffffff !important;
}

.word-editor-search {
  border-color: rgba(242, 245, 247, 0.22) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #aab2ba !important;
}

.word-editor-search input {
  border-color: rgba(242, 245, 247, 0.34) !important;
  background: rgba(3, 10, 13, 0.94) !important;
  color: #f2f5f7 !important;
}

.word-editor-search input::placeholder,
.word-editor-search,
.word-editor-search > svg,
.word-editor-search-mic {
  color: #aab2ba !important;
}

.word-editor-search input:focus {
  outline-color: #f2f5f7 !important;
}

.word-editor-share-button,
.word-editor-qa-button[data-testid='word-qat-save'] {
  background: #f2f5f7 !important;
  border-color: #f2f5f7 !important;
  color: #071114 !important;
}

.word-editor-share-button:hover,
.word-editor-share-button:focus-visible,
.word-editor-qa-button[data-testid='word-qat-save']:hover {
  background: #dfe6eb !important;
  border-color: #dfe6eb !important;
  color: #071114 !important;
}

.word-editor-tab:hover,
.word-editor-tab:focus-visible,
.word-editor-tab.active,
.top-editor-nav a:hover,
.top-editor-nav a:focus-visible {
  color: #ffffff !important;
}

.word-editor-tab:hover {
  background: rgba(242, 245, 247, 0.08) !important;
}

.word-editor-tab.active::after {
  background: #f2f5f7 !important;
}

.word-editor-ribbon,
.left-rail .panel,
.right-rail .panel,
.document-control-sidebar,
.word-home-toolbar,
.word-home-panel,
.word-option-card,
.word-template-tile,
.word-recovery-row {
  background: #0b0f12 !important;
  border-color: rgba(242, 245, 247, 0.16) !important;
  color: #f2f5f7 !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.42) !important;
}

.word-ribbon-group {
  border-color: rgba(242, 245, 247, 0.16) !important;
}

.word-ribbon-group-label,
.word-style-card span,
.word-home-kicker,
.word-home-section-title,
.word-home-section-heading,
.document-control-field,
.document-control-check,
.document-control-summary,
.document-control-disclosure summary,
.document-control-zoom-heading output {
  color: #aab2ba !important;
}

.word-ribbon-field,
.word-ribbon-icon-button,
.word-ribbon-command,
.word-style-card,
.status-chip,
.status-icon-button,
.document-control-sidebar button,
.document-control-field input,
.document-control-field select,
.document-control-field textarea,
.document-control-recipient {
  border-color: rgba(242, 245, 247, 0.16) !important;
  background: #0b0f12 !important;
  color: #f2f5f7 !important;
}

.word-ribbon-command.active,
.word-ribbon-command:hover,
.word-ribbon-command:focus-visible,
.word-ribbon-icon-button:hover,
.word-ribbon-icon-button:focus-visible,
.word-style-card.active,
.status-chip:hover,
.status-icon-button:hover,
.status-chip.active,
.status-icon-button.active,
.document-control-sidebar button:hover,
.document-control-sidebar button:focus-visible,
.document-control-sidebar button[aria-pressed='true'] {
  background: rgba(242, 245, 247, 0.12) !important;
  border-color: rgba(242, 245, 247, 0.54) !important;
  color: #ffffff !important;
}

.document-control-sidebar button:disabled {
  border-color: rgba(242, 245, 247, 0.1) !important;
  background: #14191c !important;
  color: #65717a !important;
}

.word-ribbon-command-icon,
.word-ribbon-hero-button,
.word-ribbon-group-addins .word-ribbon-command-large,
.document-control-sidebar-kicker,
.document-control-group h3,
.document-control-subgroup h4,
.document-control-subheading {
  color: #f2f5f7 !important;
}

.layout-grid,
.canvas-panel,
.document-surface {
  background: #010304 !important;
}

.document-control-sidebar-status {
  background: transparent !important;
  color: #dfe6eb !important;
}

.document-control-field input:focus-visible,
.document-control-field select:focus-visible,
.document-control-field textarea:focus-visible {
  outline-color: #f2f5f7 !important;
}

.document-control-check input,
.document-control-recipient-heading input,
.document-control-zoom input {
  accent-color: #f2f5f7 !important;
}

.status-bar {
  background: #0b0f12 !important;
  border-top-color: rgba(242, 245, 247, 0.16) !important;
  color: #aab2ba !important;
}

.page {
  background: #ffffff !important;
  color: #111417 !important;
  border-color: rgba(17, 20, 23, 0.24) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.42) !important;
}

.page-content {
  color: #111417 !important;
}

.word-editor-presence-badge {
  background: #f2f5f7 !important;
  color: #071114 !important;
}

.word-editor-alert-button {
  color: #f2f5f7 !important;
}

.word-editor-alert-mark {
  stroke: #071114 !important;
}

.word-home-layout,
.word-home-main,
.word-startup-recovery {
  background: #010304 !important;
}

.word-nav-rail {
  background: #050708 !important;
  border-color: rgba(242, 245, 247, 0.16) !important;
}

.word-nav-button,
.word-titlebar-actions button,
.word-link-button,
.word-filter {
  color: #f2f5f7 !important;
}

.word-nav-button.active,
.word-link-button,
.word-filter.active {
  color: #ffffff !important;
}

.word-nav-button:hover,
.word-link-button:hover,
.word-filter:hover,
.word-option-card:hover,
.word-template-tile:hover,
.word-recovery-row:hover {
  background: rgba(242, 245, 247, 0.12) !important;
}

.word-nav-button.active::before {
  background: #f2f5f7 !important;
}

.word-search-field input {
  border-color: rgba(242, 245, 247, 0.34) !important;
  background: #0b0f12 !important;
  color: #f2f5f7 !important;
}

@media print {
  .word-editor-titlebar,
  .word-editor-tabstrip,
  .word-editor-ribbon,
  .top-editor-nav,
  .document-control-sidebar,
  .status-bar {
    display: none !important;
  }

  .layout-grid,
  .document-surface,
  .canvas-panel {
    background: #ffffff !important;
  }

  .page {
    box-shadow: none !important;
  }
}

/* Runtime bridge: the parent Infinity shell supplies these canonical tokens. */
:root {
  --word-blue: var(--accent, #f2f5f7);
  --word-blue-hover: var(--accent-strong, #ffffff);
  --word-file-blue: var(--accent-secondary, #dfe6eb);
  --word-main-surface: var(--theme-page-bg, #010304);
  --word-white: var(--theme-surface-strong, #070a0c);
  --word-text: var(--text, #f2f5f7);
  --word-muted-text: var(--muted, #aab2ba);
  --word-divider: var(--line, rgba(242, 245, 247, 0.16));
  --word-control-border: var(--line-strong, rgba(242, 245, 247, 0.32));
  --word-rail: var(--theme-surface, #030506);
  --word-template-border: var(--line, rgba(242, 245, 247, 0.16));
  --word-template-background: var(--theme-surface-strong, #070a0c);
  --word-title-left: var(--appearance-header-top, var(--theme-surface-strong, #070a0c));
  --word-title-center: var(--theme-surface, #030506);
  --word-title-right: var(--theme-surface-strong, #070a0c);
  --word-ribbon-surface: var(--theme-surface-strong, #070a0c);
  --word-workspace-left: var(--theme-page-bg, #010304);
  --word-workspace-mid: var(--theme-surface, #030506);
  --word-workspace-right: var(--theme-surface-strong, #070a0c);
  --word-status-surface: var(--theme-surface-strong, #070a0c);
  --editor-bg: var(--theme-page-bg, #010304);
  --editor-accent: var(--accent, #f2f5f7);
  --editor-accent-strong: var(--accent-strong, #ffffff);
  --editor-ink: var(--text, #f2f5f7);
  --editor-muted: var(--muted, #aab2ba);
  --editor-line: var(--line, rgba(242, 245, 247, 0.16));
}

html,
body,
#root,
.word-home-app,
.word-editor-shell,
.word-startup-recovery,
.layout-grid,
.document-surface {
  background: var(--word-main-surface) !important;
  color: var(--word-text) !important;
}

/* Pointer-focus contract for tabs and select controls. */
:where([role="tab"], [role="option"], select, [aria-selected="true"], [data-state="active"], .active, .selected):focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

.word-editor-titlebar,
.word-editor-tabstrip,
.top-editor-nav,
.word-editor-ribbon {
  background: linear-gradient(90deg, var(--word-title-left), var(--word-title-center) 55%, var(--word-title-right)) !important;
  color: var(--word-text) !important;
  border-color: var(--word-divider) !important;
}

.word-editor-titlebar button,
.word-editor-tab,
.word-editor-tab.active,
.word-editor-ribbon button,
.word-nav-button,
.word-titlebar-actions button,
.word-link-button,
.word-filter {
  color: var(--word-text) !important;
}

.word-nav-rail,
.document-control-sidebar,
.word-editor-ribbon,
.word-editor-statusbar,
.status-bar {
  background: var(--word-rail) !important;
  border-color: var(--word-divider) !important;
}

.word-editor-titlebar button:hover,
.word-editor-tab:hover,
.word-nav-button:hover,
.word-link-button:hover,
.word-filter:hover,
.word-option-card:hover,
.word-template-tile:hover,
.word-recovery-row:hover {
  background: color-mix(in srgb, var(--accent) 14%, var(--word-main-surface)) !important;
}

.word-editor-titlebar .word-editor-qa-button,
.word-editor-titlebar .word-window-control,
.word-editor-titlebar .word-editor-top-button,
.word-editor-titlebar .word-editor-alert-button,
.word-editor-search input,
.word-search-field input {
  border-color: var(--word-control-border) !important;
  background: var(--word-rail) !important;
  color: var(--word-text) !important;
}

.word-editor-titlebar .word-editor-top-button.active,
.word-nav-button.active::before,
.word-link-button,
.word-filter.active {
  background: var(--accent) !important;
  color: var(--theme-button-text, var(--appearance-text, #010304)) !important;
}

.word-editor-ribbon button:hover,
.word-editor-ribbon button:focus-visible {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

.page {
  background: #ffffff !important;
  color: #111417 !important;
}

/* Final document-sidebar cleanup: keep actions functional while making the
   rail compact, readable, and fully owned by the active TronXVI palette. */
.document-control-sidebar {
  gap: 20px !important;
  padding: 22px 18px 28px !important;
  overflow: auto;
  scrollbar-color: var(--word-control-border) transparent;
  scrollbar-width: thin;
}

.document-control-sidebar-heading {
  align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--word-divider) !important;
}

.document-control-sidebar-kicker {
  margin-bottom: 6px;
  color: var(--word-muted-text) !important;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
}

.document-control-sidebar h2 {
  font-size: clamp(1.22rem, 1rem + 0.55vw, 1.56rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.document-control-sidebar-title {
  max-width: 200px;
  margin-top: 8px;
  color: var(--word-muted-text) !important;
  font-size: 0.82rem;
}

.document-control-sidebar-status {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid var(--word-control-border) !important;
  border-radius: 999px;
  background: color-mix(in srgb, var(--word-blue) 10%, var(--word-white)) !important;
  color: var(--word-blue) !important;
  font-size: 0.7rem;
  line-height: 1;
}

.document-control-group {
  gap: 12px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--word-divider) !important;
  scroll-margin-top: 16px;
}

.document-control-group:first-of-type {
  padding-top: 0 !important;
  border-top: 0 !important;
}

.document-control-group h3 {
  color: var(--word-file-blue) !important;
  font-size: 0.7rem;
  letter-spacing: 0.13em;
}

.document-control-subgroup {
  gap: 8px;
}

.document-control-subgroup + .document-control-subgroup {
  padding-top: 14px;
  border-top: 1px solid var(--word-divider) !important;
}

.document-control-subgroup h4 {
  color: var(--word-muted-text) !important;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
}

.document-control-button-row,
.document-control-button-grid {
  gap: 8px !important;
}

.document-control-sidebar button,
.document-control-sidebar button:visited {
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid var(--word-divider) !important;
  border-radius: 10px;
  background: color-mix(in srgb, var(--word-main-surface) 72%, var(--word-white)) !important;
  color: var(--word-text) !important;
  font-size: 0.78rem;
  line-height: 1.25;
  text-decoration: none;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease, transform 150ms ease;
}

.document-control-button-row button {
  min-width: 0;
  text-align: center;
}

.document-control-sidebar button:hover,
.document-control-sidebar button:focus-visible,
.document-control-sidebar button[aria-pressed="true"] {
  border-color: var(--word-blue) !important;
  background: color-mix(in srgb, var(--word-blue) 13%, var(--word-white)) !important;
  color: var(--word-text) !important;
  text-decoration: none;
  transform: translateY(-1px);
}

/* Canonical A4 editing sheet: the canvas is the surrounding workspace, while
   this is the actual paper surface the user types on. Keep its physical page
   geometry stable so the sheet stays centred instead of collapsing into a
   tall, narrow canvas when the workspace is constrained. */
.document-surface {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page {
  flex: 0 0 1123px;
  width: 794px;
  min-width: 794px;
  height: 1123px;
  min-height: 1123px;
  margin: 0 auto 32px;
  background: #ffffff !important;
  color: #111417 !important;
  border: 1px solid rgba(17, 20, 23, 0.24) !important;
  box-shadow: none !important;
}

/* Keep the paper optically centred in the canvas and use flat surfaces for
   the editor chrome. Borders and palette still separate the workspace areas. */
.document-surface {
  padding-right: 0 !important;
  padding-left: 0 !important;
  scrollbar-gutter: stable both-edges;
}

.word-editor-ribbon,
.document-control-sidebar,
.right-rail,
.canvas-panel,
.word-editor-search {
  box-shadow: none !important;
}

.document-control-sidebar button:disabled {
  cursor: not-allowed;
  border-color: var(--word-divider) !important;
  background: color-mix(in srgb, var(--word-main-surface) 88%, var(--word-white)) !important;
  color: var(--word-muted-text) !important;
  opacity: 0.58;
  text-decoration: none;
  transform: none;
}

.document-control-summary,
.document-control-field,
.document-control-check,
.document-control-disclosure summary,
.document-control-zoom-heading output {
  color: var(--word-muted-text) !important;
}

.document-control-summary {
  padding: 10px 12px;
  border: 1px solid var(--word-divider);
  border-radius: 10px;
  background: color-mix(in srgb, var(--word-main-surface) 78%, var(--word-white));
  font-size: 0.74rem;
}

.document-control-field input,
.document-control-field select,
.document-control-field textarea,
.document-control-recipient {
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--word-divider) !important;
  border-radius: 10px;
  background: var(--word-main-surface) !important;
  color: var(--word-text) !important;
}