/* WordWatt — Word-familiar chrome: blue title bar, white ribbon, gray canvas */
@font-face { font-family: 'Carlito'; src: url(vendor/fonts/Carlito-Regular.ttf); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Carlito'; src: url(vendor/fonts/Carlito-Bold.ttf); font-weight: 700; font-style: normal; }
@font-face { font-family: 'Carlito'; src: url(vendor/fonts/Carlito-Italic.ttf); font-weight: 400; font-style: italic; }
@font-face { font-family: 'Carlito'; src: url(vendor/fonts/Carlito-BoldItalic.ttf); font-weight: 700; font-style: italic; }
@font-face { font-family: 'Caladea'; src: url(vendor/fonts/Caladea-Regular.ttf); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Caladea'; src: url(vendor/fonts/Caladea-Bold.ttf); font-weight: 700; font-style: normal; }
@font-face { font-family: 'Caladea'; src: url(vendor/fonts/Caladea-Italic.ttf); font-weight: 400; font-style: italic; }
@font-face { font-family: 'Caladea'; src: url(vendor/fonts/Caladea-BoldItalic.ttf); font-weight: 700; font-style: italic; }

:root {
  --blue: #185ABD;
  --blue-dark: #124A9E;
  --ink: #262626;
  --muted: #605e5c;
  --chrome: #ffffff;
  --canvas: #E7E7E7;
  --line: #e1dfdd;
  --hover: #f3f2f1;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font: 13px/1.4 'Segoe UI', 'Carlito', system-ui, sans-serif;
  color: var(--ink);
  display: flex; flex-direction: column;
  background: var(--canvas);
  overflow: hidden;
}
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[hidden] { display: none !important; }

/* ── title bar ── */
#titlebar {
  background: var(--blue); color: #fff;
  display: flex; align-items: center; gap: 12px;
  padding: 6px 12px; flex: none;
}
.brand { display: flex; align-items: center; gap: 8px; }
.appname { font-size: 14px; font-weight: 400; letter-spacing: .2px; }
.appname b { font-weight: 700; }
#docname {
  background: rgba(255,255,255,.12); color: #fff; border: 1px solid transparent;
  border-radius: 4px; padding: 3px 10px; font: 13px 'Segoe UI', sans-serif;
  width: 220px; text-align: center;
}
#docname:hover { background: rgba(255,255,255,.2); }
#docname:focus { outline: none; background: #fff; color: var(--ink); }
.tb-right { margin-left: auto; }
.tbbtn {
  display: flex; align-items: center; gap: 6px; color: #fff;
  padding: 4px 12px; border-radius: 4px; font-size: 12.5px;
}
.tbbtn:hover { background: rgba(255,255,255,.15); }

/* ── ribbon tabs ── */
#ribbontabs { background: var(--chrome); display: flex; gap: 2px; padding: 0 8px; border-bottom: 1px solid var(--line); flex: none; }
.rtab { padding: 7px 14px 6px; font-size: 12.5px; color: var(--ink); border-bottom: 2.5px solid transparent; }
.rtab:hover { background: var(--hover); }
.rtab.on { border-bottom-color: var(--blue); color: var(--blue); font-weight: 600; }
.rtab[data-tab="file"] { color: var(--blue); font-weight: 600; }

/* ── ribbon ── */
#ribbon { background: var(--chrome); border-bottom: 1px solid var(--line); flex: none; padding: 4px 8px 2px; min-height: 78px; }
.rpanel { display: flex; gap: 2px; align-items: stretch; }
.rgroup { display: flex; flex-direction: column; gap: 2px; padding: 2px 10px; border-right: 1px solid var(--line); }
.rgroup:last-child { border-right: none; }
.rrow { display: flex; gap: 2px; align-items: center; }
.rcap { margin-top: auto; font-size: 10px; color: var(--muted); text-align: center; padding-top: 2px; }
.rbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 26px; height: 24px; padding: 0 5px; border-radius: 3px; font-size: 12.5px;
}
.rbtn:hover { background: var(--hover); }
.rbtn.on { background: #CCE0FF; }
.rbtn.big { flex-direction: column; height: 52px; min-width: 52px; font-size: 11px; gap: 4px; padding: 4px 8px; }
.rbtn.big svg { width: 20px; height: 20px; }
select { font: 12px 'Segoe UI', sans-serif; border: 1px solid var(--line); border-radius: 3px; padding: 2px 4px; background: #fff; color: var(--ink); height: 24px; }
#fontfam { width: 128px; } #fontsize { width: 52px; }
.colorwrap { position: relative; display: inline-flex; }
.colorwrap input[type=color], .colorwrap select { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.acol { font-weight: 700; font-size: 13px; }
.cbar { display: block; position: absolute; left: 4px; right: 4px; bottom: 2px; height: 3.5px; border-radius: 1px; background: #c00000; }
.colorwrap .rbtn { position: relative; padding-bottom: 5px; }
.styles { gap: 4px; }
.stylebtn {
  border: 1px solid var(--line); border-radius: 4px; background: #fff;
  padding: 4px 10px; height: 52px; min-width: 74px;
  display: flex; align-items: center; justify-content: center;
}
.stylebtn:hover { background: var(--hover); }
.stylebtn.on { border-color: var(--blue); background: #EDF4FF; }

/* ── file menu ── */
.menu {
  position: fixed; top: 66px; left: 10px; z-index: 60;
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 8px 28px rgba(0,0,0,.18); padding: 5px; width: 240px;
}
.menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border-radius: 4px; font-size: 13px; text-align: left; }
.menu button:hover { background: var(--hover); }
.menu-sep { height: 1px; background: var(--line); margin: 4px 6px; }
#appversion { font-size: 10.5px; color: var(--muted); text-align: center; padding: 4px 0 2px; }

/* ── canvas + paper ── */
#canvas { flex: 1; overflow: auto; }
#zoomwrap { transform-origin: top center; padding: 24px 0 60px; }
#paperstack { position: relative; width: max-content; margin: 0 auto; }
#paper {
  background: #fff; width: 8.5in; min-height: 11in; padding: 1in;
  box-shadow: 0 1px 4px rgba(0,0,0,.18), 0 6px 18px rgba(0,0,0,.10);
  outline: none;
  font-family: 'Aptos', 'Carlito', sans-serif;
  font-size: 11pt; line-height: 1.15; color: #000;
}
#paper:focus { outline: none; }
#breaks { position: absolute; inset: 0; pointer-events: none; }

/* header/footer live IN the page margins, like Word */
.hfarea {
  position: absolute; left: 1in; right: 1in; min-height: 0.32in;
  font-family: 'Aptos', 'Carlito', sans-serif; font-size: 10pt; line-height: 1.2; color: #444;
  outline: none;
}
#hfheader { top: 0.45in; }
#hffooter { bottom: 0.4in; }
.hfarea:focus { box-shadow: 0 0 0 1px #b6c8e8; background: #f7faff; }
.hfarea:empty::before, .hfarea.blank::before {
  content: attr(data-ph); color: #a0a6ae; font-style: italic; position: absolute; pointer-events: none;
}
.hfarea p { margin: 0; }
.pgfield {
  background: #e8eef8; border-radius: 3px; padding: 0 4px; color: #185ABD;
  font-weight: 600; user-select: none;
}
.pgsep { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px dashed #b4bac4; }
.pgnum { position: absolute; right: -72px; font-size: 10.5px; color: var(--muted); }

/* document typography — mirrors what we export to Word */
.docbody p, .docbody div { margin: 0 0 8pt; }
.docbody h1 { font-size: 20pt; font-weight: 400; color: #0F4761; margin: 12pt 0 4pt; line-height: 1.15; }
.docbody h2 { font-size: 16pt; font-weight: 400; color: #0F4761; margin: 8pt 0 4pt; }
.docbody h3 { font-size: 14pt; font-weight: 400; color: #0F4761; margin: 8pt 0 4pt; }
.docbody .ww-title { font-size: 28pt; font-weight: 400; color: #000; margin: 0 0 4pt; line-height: 1.1; }
.docbody ul, .docbody ol { margin: 0 0 8pt; padding-left: .5in; }
.docbody li { margin: 0 0 2pt; }
.docbody table { border-collapse: collapse; margin: 0 0 8pt; width: 100%; }
.docbody td, .docbody th { border: 1px solid #000; padding: 2pt 6pt; vertical-align: top; min-width: 30px; }
.docbody img { max-width: 100%; height: auto; }
.docbody a { color: #467886; text-decoration: underline; }
.docbody hr { border: none; border-top: 1px solid #888; margin: 8pt 0; }
.docbody .pagebreak {
  border: none; border-top: 1.5px dashed #9aa4b2; margin: 10pt 0; position: relative;
  user-select: none;
}
.docbody .pagebreak::after {
  content: 'Page Break'; position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  background: #fff; color: #9aa4b2; font: 9.5px 'Segoe UI', sans-serif; padding: 0 8px;
}

/* ── status bar ── */
#statusbar {
  flex: none; background: var(--blue); color: #fff;
  display: flex; align-items: center; gap: 16px; padding: 3px 14px;
  font-size: 11.5px;
}
.st-flex { flex: 1; }
.zbtn { color: #fff; font-size: 15px; width: 20px; }
#zoom { width: 110px; accent-color: #fff; }
#zpct { width: 38px; text-align: right; }

/* ── modal ── */
.modal { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.3); display: flex; align-items: center; justify-content: center; }
.mbox { background: #fff; border-radius: 8px; padding: 18px 20px; width: 280px; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.mbox h3 { font-size: 14px; margin-bottom: 12px; }
.mbox label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 12.5px; }
.mbox input[type=number] { width: 70px; border: 1px solid var(--line); border-radius: 4px; padding: 4px 6px; font: inherit; }
.mrow { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.mrow button { border: 1px solid var(--line); border-radius: 4px; padding: 5px 14px; font-size: 12.5px; }
.mrow .primary { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ── find & replace ── */
#findbar {
  position: fixed; top: 118px; right: 26px; z-index: 65;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 6px 22px rgba(0,0,0,.16); padding: 7px 9px;
  display: flex; align-items: center; gap: 5px;
}
#findbar input { border: 1px solid var(--line); border-radius: 4px; padding: 4px 8px; font: 12.5px 'Segoe UI', sans-serif; width: 150px; }
#findbar input:focus { outline: none; border-color: var(--blue); }
#findbar button { border-radius: 4px; padding: 3px 8px; font-size: 12.5px; }
#findbar button:hover { background: var(--hover); }
#findcount { font-size: 11.5px; color: var(--muted); min-width: 34px; text-align: center; }
.fb-sep { width: 1px; height: 18px; background: var(--line); margin: 0 2px; }

/* ── table + image tool menus ── */
.menu-label { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; padding: 4px 12px 2px; }
#recentlist button .when { margin-left: auto; font-size: 10.5px; color: var(--muted); padding-left: 10px; }
#recentlist button.cur { color: var(--blue); font-weight: 600; }
#recentlist .hfempty { padding: 4px 12px 8px; }
#tblmenu button.danger { color: #b02a2a; }
#imgtools {
  position: absolute; z-index: 40; display: flex; gap: 2px;
  background: #262626; border-radius: 6px; padding: 3px 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
#imgtools button { color: #fff; font-size: 13px; width: 26px; height: 24px; border-radius: 4px; }
#imgtools button:hover { background: rgba(255,255,255,.18); }
#imghandle {
  position: absolute; z-index: 40; width: 12px; height: 12px;
  background: #fff; border: 2px solid var(--blue); border-radius: 3px;
  cursor: nwse-resize;
}
#paper img.imgsel { outline: 2px solid var(--blue); outline-offset: 1px; }

/* ── header/footer library ── */
.hfsaverow { display: flex; gap: 6px; margin-bottom: 12px; }
.hfsaverow input { flex: 1; border: 1px solid var(--line); border-radius: 4px; padding: 5px 8px; font: 12.5px 'Segoe UI', sans-serif; }
.primary-sm { background: var(--blue); color: #fff; border-radius: 4px; padding: 5px 10px; font-size: 12px; }
#hflist { max-height: 240px; overflow-y: auto; margin-bottom: 10px; }
.hfrow { display: flex; align-items: center; gap: 6px; padding: 7px 4px; border-bottom: 1px solid var(--line); }
.hfrow .nm { flex: 1; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hfrow .pv { display: block; font-size: 10.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hfrow button { border: 1px solid var(--line); border-radius: 4px; padding: 3px 8px; font-size: 11.5px; }
.hfrow button.apply { background: var(--blue); border-color: var(--blue); color: #fff; }
.hfempty { font-size: 12px; color: var(--muted); font-style: italic; padding: 10px 2px; }

/* ── toast ── */
#toast {
  position: fixed; bottom: 46px; left: 50%; transform: translate(-50%, 20px);
  background: #262626; color: #fff; padding: 8px 18px; border-radius: 18px;
  font-size: 12.5px; opacity: 0; pointer-events: none; transition: all .25s; z-index: 90;
  max-width: 80vw; text-align: center;
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ── print: chrome vanishes, real pages emerge ──
   The document prints from #printwrap, a table built at print time:
   thead/tfoot repeat the header/footer on EVERY printed page. */
#printwrap { display: none; }
@media print {
  body { overflow: visible; background: #fff; display: block; }
  body > *:not(#printwrap) { display: none !important; }
  #printwrap { display: table; width: 100%; border-collapse: collapse; }
  #printwrap td { padding: 0; border: none; }
  .pw-h, .pw-f { font-family: 'Aptos', 'Carlito', sans-serif; font-size: 10pt; color: #444; }
  .pw-h { padding-bottom: 18pt; }
  .pw-f { padding-top: 18pt; }
  .pw-h p, .pw-f p { margin: 0; }
  .pw-b { font-family: 'Aptos', 'Carlito', sans-serif; font-size: 11pt; line-height: 1.15; color: #000; }
  .docbody .pagebreak { border: none; break-after: page; margin: 0; }
  .docbody .pagebreak::after { content: none; }
  .pgfield { background: none; color: #444; font-weight: 400; padding: 0; }
}