/* ============================================================
   Word recreation — design tokens + document surface styles
   ============================================================ */

@font-face { font-family:'Carlito'; src:url('../assets/fonts/Carlito-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; }
@font-face { font-family:'Carlito'; src:url('../assets/fonts/Carlito-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; }
@font-face { font-family:'Carlito'; src:url('../assets/fonts/Carlito-Italic.ttf') format('truetype'); font-weight:400; font-style:italic; }
@font-face { font-family:'Carlito'; src:url('../assets/fonts/Carlito-BoldItalic.ttf') format('truetype'); font-weight:700; font-style:italic; }
@font-face { font-family:'Caladea'; src:url('../assets/fonts/Caladea-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; }
@font-face { font-family:'Caladea'; src:url('../assets/fonts/Caladea-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; }
@font-face { font-family:'Caladea'; src:url('../assets/fonts/Caladea-Italic.ttf') format('truetype'); font-weight:400; font-style:italic; }
@font-face { font-family:'Caladea'; src:url('../assets/fonts/Caladea-BoldItalic.ttf') format('truetype'); font-weight:700; font-style:italic; }
@font-face { font-family:'Tinos'; src:url('../assets/fonts/Tinos-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; }
@font-face { font-family:'Tinos'; src:url('../assets/fonts/Tinos-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; }
@font-face { font-family:'Arimo'; src:url('../assets/fonts/Arimo-VF.ttf') format('truetype'); font-weight:100 900; font-style:normal; }
@font-face { font-family:'Arimo'; src:url('../assets/fonts/Arimo-Italic-VF.ttf') format('truetype'); font-weight:100 900; font-style:italic; }
@font-face { font-family:'Playfair Display'; src:url('../assets/fonts/PlayfairDisplay-VF.ttf') format('truetype'); font-weight:100 900; font-style:normal; }
@font-face { font-family:'Playfair Display'; src:url('../assets/fonts/PlayfairDisplay-Italic-VF.ttf') format('truetype'); font-weight:100 900; font-style:italic; }

:root {
  /* Microsoft 365 light chrome */
  --chrome-bg: #f9f9f9;
  --chrome-bg-deep: #f0efee;
  --chrome-border: #e1dfdd;
  --chrome-hover: rgba(0,0,0,0.055);
  --chrome-active: rgba(0,0,0,0.09);
  --accent: #185abd;
  --accent-hover: #1a66cf;
  --accent-deep: #103f91;
  --accent-text: #185abd;
  --title-active-tab: #ffffff;
  --canvas-workspace: #808080;
  --canvas-workspace-dim: #757575;
  --page-shadow: 0 1px 4px rgba(0,0,0,.32), 0 0 1px rgba(0,0,0,.24);
  --menu-bg: #ffffff;
  --menu-border: #e3e3e3;
  --menu-shadow: 0 6.5px 14px rgba(0,0,0,.18), 0 1.5px 4px rgba(0,0,0,.14);
  --tooltip-bg: #f5f5f5;
  --tooltip-border: #c8c6c4;
  --text-primary: #201f1e;
  --text-secondary: #605e5c;
  --disabled: #a19f9d;
  --selection-blue: #b5d6fb;
  --statusbar-bg: #f9f9f9;
  --squiggle-red: #e3008a; /* not used; spell red below */
  --spell-red: #d13438;
  --find-yellow: #ffe697;
  --find-orange: #f7a171;
  --ui-font: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --table-border: #bfbfbf;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--ui-font);
  color: var(--text-primary);
  overflow: hidden;
  user-select: none;
  cursor: default;
  background: var(--chrome-bg);
}

#app {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.hidden-el { display: none !important; }

/* ======================= document canvas ====================== */

.editor-viewport {
  flex: 1;
  overflow: auto;
  position: relative;
  background: var(--canvas-workspace);
  outline: none;
}
.editor-viewport::-webkit-scrollbar { width: 17px; height: 17px; }
.editor-viewport::-webkit-scrollbar-track { background: #f1f1f1; }
.editor-viewport::-webkit-scrollbar-thumb { background: #cdcdcd; border: 4px solid transparent; border-radius: 9px; background-clip: content-box; }
.editor-viewport::-webkit-scrollbar-thumb:hover { background-color: #a6a6a6; }

.zoom-layer { transform-origin: center top; margin: 0 auto; }
.doc-flow { position: relative; margin: 0 auto; }

.page {
  position: absolute;
  left: 0;
  transform-origin: center top;
  background: #fff;
  box-shadow: var(--page-shadow);
  contain: layout style;
}
.page.web-layout { box-shadow: none; background: transparent; transform: none !important; position: relative; margin: 0 auto; }

.doc-line { position: absolute; white-space: pre; pointer-events: none; }
.doc-line .run { position: static; display: inline; text-rendering: optimizeLegibility; }
.sq {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='3' viewBox='0 0 6 3'%3E%3Cpath d='M0 2.5 Q1.5 0.5 3 2.5 T6 2.5' stroke='%23d13438' stroke-width='0.9' fill='none'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-size: 6px 3px;
  padding-bottom: 2px;
}
.pilcrow { position: relative; margin-left: 2px; color: #444; font-size: 11px; opacity: .85; }

.selection-layer, .find-layer { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.sel-rect { position: absolute; background: var(--selection-blue); mix-blend-mode: multiply; }
.find-match { position: absolute; background: var(--find-yellow); mix-blend-mode: multiply; border-radius: 1px; }
.find-match.current { background: var(--find-orange); }

.caret {
  position: absolute;
  width: 1.6px;
  background: #000;
  z-index: 6;
  pointer-events: none;
}
.caret.blink { animation: caretBlink 1.06s steps(1) infinite; }
@keyframes caretBlink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

/* tables */
.table-frame { outline: 0.7px solid var(--table-border); }
.table-frame.row-first { outline-top-width: 0.7px; }
.table-cell { position: absolute; top: 0; height: 100%; }
.table-cell.banded-col { background: #f2f7fc; }
.table-cell.hdr-shade { background: #eaf1fa; }
.table-frame.no-borders, .no-borders .table-cell { outline: none; border: none; }

.hf-strip { position: absolute; left: 0; right: 0; height: 48px; z-index: 2; cursor: text; }
.hf-strip .hf-line { min-width: 40px; }
.hf-active .page-body-lock { pointer-events: none; opacity: .35; }
.hf-active .hf-strip { background: rgba(90,153,222,0); outline: 0px dashed transparent; }

.num-label { position: absolute; top: 0; line-height: normal; }

img[data-drift] { image-rendering: auto; }

/* temp boot helpers */
.boot-note { padding: 20px; color: #333; font-size: 13px; }