:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --text: #1d2330;
  --muted: #6b7280;
  --border: #dde1e7;
  --accent: #2563eb;
  --accent-text: #ffffff;
  --danger: #dc2626;
  --hover: #eef3fe;
  --desk: #e9ebef;
  --page-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 4px 16px rgba(0, 0, 0, .06);
  --tools-height: 52px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a;
    --surface: #1c1f25;
    --text: #e6e8eb;
    --muted: #9aa1ac;
    --border: #2f343c;
    --accent: #3b82f6;
    --hover: #26303f;
    --desk: #0f1114;
    --page-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 4px 16px rgba(0, 0, 0, .4);
  }
}

* { box-sizing: border-box; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
}

[hidden] { display: none !important; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.topbar h1 { font-size: 18px; margin: 0; }

.topbar-end { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#fileInfo { max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lang { display: flex; align-items: center; gap: 6px; }

main { flex: 1; padding: 24px; }

a { color: var(--accent); }

.footer {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
}

.muted { color: var(--muted); }

button, .button {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: var(--accent-text);
  font: inherit;
  cursor: pointer;
}

button.secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}

button.icon { padding-inline: 10px; }
button:disabled { opacity: .4; cursor: default; }

select, input[type="search"] {
  font: inherit;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
}

.dropzone {
  max-width: 560px;
  margin: 48px auto;
  padding: 48px 24px;
  text-align: center;
  border: 2px dashed var(--border);
  border-radius: 12px;
  background: var(--surface);
  transition: border-color .15s, background .15s;
}

.dropzone p { margin: 4px 0; }
.dropzone-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dropzone .drop-status { margin-top: 16px; color: var(--muted); }
.dropzone .drop-status.error { color: var(--danger); }

body.dragging .dropzone {
  border-color: var(--accent);
  background: var(--hover);
}

.about { max-width: 720px; margin: 0 auto 24px; }
.about h2 { font-size: 18px; margin: 32px 0 8px; }
.about h3 { font-size: 15px; margin: 20px 0 4px; }
.about p { margin: 0 0 8px; }
.features { margin: 12px 0 0; padding-inline-start: 18px; }
.features li { margin-bottom: 6px; }

.not-found { max-width: 560px; margin: 48px auto; text-align: center; }
a.button { text-decoration: none; }

/* Main action with a menu arrow attached to its end. */
.split-button { display: inline-flex; }
.split-button button:first-child { border-start-end-radius: 0; border-end-end-radius: 0; }
.split-button button:last-child {
  padding-inline: 8px;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-inline-start-color: rgba(255, 255, 255, .35);
}

.toggle { display: inline-flex; }
.toggle button { border-radius: 0; }
.toggle button:first-child { border-start-start-radius: 6px; border-end-start-radius: 6px; }
.toggle button:last-child { border-start-end-radius: 6px; border-end-end-radius: 6px; margin-inline-start: -1px; }
.toggle button.active, .doc-tools button.active { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }

.menu {
  position: fixed;
  z-index: 10;
  display: flex;
  flex-direction: column;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
}

.menu button { border: none; border-radius: 4px; padding: 6px 10px; text-align: start; white-space: nowrap; }
.menu button:hover, .menu button:focus-visible { background: var(--hover); }

.menu-group { display: flex; flex-direction: column; }
.menu-group + *, * + .menu-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border); }
.menu-group-label { padding: 4px 10px 2px; color: var(--muted); font-size: 12px; }
.menu-group button { padding-inline-start: 18px; }

.toast {
  position: fixed;
  z-index: 20;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 16px;
  border-radius: 6px;
  background: var(--text);
  color: var(--bg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
}

/* ---------- Viewer ---------- */

main:has(> .viewer:not([hidden])) { padding: 0; background: var(--desk); }

.doc-bars {
  position: sticky;
  top: 0;
  z-index: 5;
}

.doc-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-height: var(--tools-height);
  padding: 8px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.find { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.find input { width: 220px; }
#findCount { min-width: 7ch; font-variant-numeric: tabular-nums; text-align: end; }

::highlight(find) { background: #fde68a; }
::highlight(find-current) { background: #f59e0b; }

.viewer-body { display: flex; align-items: flex-start; gap: 24px; padding: 24px; }

.contents {
  position: sticky;
  top: calc(var(--tools-height) + 24px);
  flex: 0 0 260px;
  max-height: calc(100vh - var(--tools-height) - 48px);
  overflow: auto;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.contents h2 { font-size: 14px; margin: 0 0 8px; }
.contents ol { list-style: none; margin: 0; padding: 0; }
.contents li { padding-inline-start: calc(var(--level, 0) * 14px); }
.contents a {
  display: block;
  padding: 3px 6px;
  border-radius: 4px;
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contents a:hover { background: var(--hover); color: var(--accent); }
.contents p { margin: 0; }

.doc-host { flex: 1; min-width: 0; }

@media (max-width: 899px) {
  .viewer-body { display: block; padding: 16px 12px; }
  .contents { position: static; max-height: none; margin-bottom: 16px; }
  .find { margin-inline-start: 0; flex: 1; }
  .find input { flex: 1; width: auto; min-width: 0; }
  .doc-tools { padding-inline: 12px; }
}

/* ---------- Document ----------
   The document keeps its own colors, so it is always shown on white paper, also in dark mode. */

.doc {
  color-scheme: light;
  position: relative;
  box-sizing: border-box;
  margin: 0 auto;
  background: #fff;
  color: #000;
  line-height: 1.15;
  white-space: pre-wrap;
  tab-size: 4;
  overflow-wrap: break-word;
  font-family: Calibri, Carlito, "Segoe UI", system-ui, sans-serif;
}

.doc p, .doc h1, .doc h2, .doc h3, .doc h4, .doc h5, .doc h6, .doc ul, .doc ol, .doc li { margin: 0; }
.doc h1, .doc h2, .doc h3, .doc h4, .doc h5, .doc h6 { scroll-margin-top: calc(var(--tools-height) + 16px); }
.doc h1 { font-size: 16pt; font-weight: normal; }
.doc h2 { font-size: 13pt; font-weight: normal; }
.doc h3 { font-size: 12pt; font-weight: normal; }
.doc h4, .doc h5, .doc h6 { font-size: 1em; font-weight: normal; }
.doc h1.doc-title { font-size: 28pt; }
.doc ul, .doc ol { padding-inline-start: 2em; }
/* Numbers like 1) or (a): browsers only have the period built in. */
.doc ol.custom-number > li::marker { content: var(--num-before) counter(list-item, var(--num-style)) var(--num-after) "  "; }
.doc a { color: #0563c1; }
.doc a.bookmark { color: inherit; }
.doc img { max-width: 100%; height: auto; vertical-align: bottom; }
.doc .image-missing {
  display: inline-block;
  padding: 16px;
  border: 1px dashed #999;
  color: #666;
  font-size: 10pt;
  white-space: normal;
}
.doc .textbox { display: block; margin: 8px 0; padding: 8px; border: 1px solid #bbb; }
.doc .math { font-family: "Cambria Math", "STIX Two Math", serif; font-style: italic; }

.doc table { border-collapse: collapse; margin: 4px 0 12px; white-space: normal; max-width: 100%; }
.doc td { border: 1px solid #999; padding: 4px 6px; vertical-align: top; white-space: pre-wrap; }
.doc td > :last-child { margin-bottom: 0 !important; }

.doc .noteref a { text-decoration: none; }
.doc .notes { margin-top: 32px; font-size: .85em; }
.doc .notes hr { width: 33%; margin: 0 0 8px; border: 0; border-top: 1px solid #999; }
.doc .noteback { text-decoration: none; }

/* Page breaks are handled by the page layout (paginate.js); in the text view they are not shown. */
.doc .page-break { display: none; }

/* Page view: sheets with the paper size and margins of the document. On narrow screens the
   whole stack is scaled down (zoom, set in app.js), so the layout of each page stays the same. */
.pages { width: max-content; margin: 0 auto; }
.doc.page {
  width: var(--page-width, 816px);
  min-height: var(--page-height, 1056px);
  margin-bottom: 24px;
  padding: var(--page-top, 96px) var(--page-right, 96px) var(--page-bottom, 96px) var(--page-left, 96px);
  box-shadow: var(--page-shadow);
}
/* Block formatting context: the margins of the first paragraph stay inside the text area.
   Space below the last block on a page is dropped, as in Word. */
.page-body { display: flow-root; }
.page-body > :last-child { margin-bottom: 0 !important; }
/* The rest of a split list item continues without a second bullet or number. */
.doc li.continued { list-style-type: none; }

/* Text view: no paper, the text reflows at a comfortable width. */
.doc:not(.page):not(.editing) {
  max-width: 760px;
  padding: 40px 48px;
  border-radius: 8px;
  line-height: 1.5;
}
/* Paragraphs carry the line spacing of the document inline; reading view uses its own. */
.doc:not(.page):not(.editing) :is(p, li, td) { line-height: 1.5 !important; }

@media (max-width: 899px) {
  .doc:not(.page):not(.editing) { padding: 24px 20px; }
}

/* Edit view: one long sheet with the width and margins of the paper, as in Word's draft view. */
.doc.editing {
  width: var(--page-width, 816px);
  max-width: 100%;
  min-height: var(--page-height, 1056px);
  padding: var(--page-top, 96px) var(--page-right, 96px) var(--page-bottom, 96px) var(--page-left, 96px);
  box-shadow: var(--page-shadow);
  outline: none;
  caret-color: #000;
}
.doc.editing .page-break {
  display: block;
  height: 0;
  margin: 12px 0;
  border: 0;
  border-top: 1px dashed #8a8f98;
}
.doc.editing [contenteditable="false"] { cursor: default; }
.doc.editing .textbox, .doc.editing .notes { opacity: .75; }

@media (max-width: 899px) {
  .doc.editing { min-height: 0; padding: 24px 20px; }
}

/* ---------- Edit toolbar ---------- */

.edit-tools {
  display: flex;
  align-items: center;
  gap: 6px 12px;
  flex-wrap: wrap;
  padding: 6px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.tool-group { display: flex; align-items: center; gap: 2px; }
.edit-tools button.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  border-color: transparent;
  font-size: 15px;
  line-height: 1;
}
.edit-tools button.icon:hover { background: var(--hover); }
.edit-tools button[aria-pressed="true"] { background: var(--hover); border-color: var(--accent); color: var(--accent); }
.edit-tools svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.edit-tools svg circle, .edit-tools svg text { fill: currentColor; stroke: none; }
.edit-tools select { height: 32px; padding-block: 0; }
#styleSelect { width: 150px; }
#fontSelect { width: 140px; }
.edit-tools select.size { width: 64px; }
.color-tool {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
}
.color-tool:hover { background: var(--hover); }
.color-tool span { border-bottom: 3px solid var(--color, #000); line-height: 1.1; box-shadow: 0 1px 0 var(--border); }
.color-tool input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.save-docx { margin-inline-start: auto; }
.edit-tools button.list-style { min-width: 16px; padding: 0 2px; margin-inline-start: -2px; font-size: 11px; }

/* Small screens: the toolbar is one row that scrolls sideways, so it does not cover the text. */
@media (max-width: 899px) {
  .edit-tools { flex-wrap: nowrap; overflow-x: auto; padding-inline: 12px; scrollbar-width: thin; }
  .tool-group, .save-docx { flex-shrink: 0; }
  .save-docx { margin-inline-start: 0; }
}

/* ---------- Print ---------- */

@media print {
  body { display: block; background: #fff; }
  .topbar, .footer, .doc-bars, .contents, .toast, .menu { display: none !important; }
  /* Block layout: browsers ignore forced page breaks inside flex items. */
  main, .viewer-body { display: block; padding: 0 !important; background: none !important; }
  .doc { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  /* Each sheet on screen is one printed page; @page has no margin, the sheet has them. */
  .pages { zoom: 1 !important; }
  /* A little under the paper height, so rounding never pushes a sheet onto two printed pages. */
  .doc.page { min-height: calc(var(--page-height, 1056px) - 2px); margin: 0; box-shadow: none; }
  .doc.page + .doc.page { break-before: page; }
  .doc:not(.page) { max-width: none; padding: 0; border-radius: 0; }
  ::highlight(find), ::highlight(find-current) { background: none; }
}

/* ---------- Changelog ---------- */

.home { color: inherit; text-decoration: none; }

.changelog { width: 100%; max-width: 720px; margin-inline: auto; box-sizing: border-box; }
.changelog h2 { margin: 16px 0 24px; }

.timeline { list-style: none; margin: 0; padding: 0; }

.release {
  position: relative;
  padding-inline-start: 28px;
  padding-bottom: 28px;
  border-inline-start: 2px solid var(--border);
  margin-inline-start: 6px;
}
.release:last-child { border-color: transparent; padding-bottom: 0; }

/* Dot on the timeline line. */
.release::before {
  content: '';
  position: absolute;
  inset-inline-start: -8px;
  top: 2px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--bg);
}
.release:first-child::before { background: var(--accent); }

.release-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.release-version { font-weight: 600; font-size: 16px; color: var(--text); text-decoration: none; }
.release-version:hover { text-decoration: underline; }
.release-latest {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 12px;
}
.release ul { margin: 0; padding-inline-start: 18px; }
.release:target .release-version { color: var(--accent); }