/* Warm paper palette: teal, coral, amber, sage. Deliberately no purple. */
:root {
  --paper:   #f4f1ea;
  --surface: #fffefb;
  --page:    #ffffff;
  --ink:     #22312f;
  --ink-dim: #6d7b78;
  --line:    #e2ddd0;
  --teal:    #227e70;
  --teal-sk: #d5e8e3;
  --coral:   #c9563a;
  --amber:   #b8801f;
  --sage:    #7c9a86;
  --shadow:  0 1px 2px rgba(34,49,47,.06), 0 8px 24px rgba(34,49,47,.07);
  --tap:     34px;   /* control height; grows on touch devices */
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  background: var(--paper); color: var(--ink);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", Segoe UI, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* The page must never scroll sideways, whatever the document contains. */
  overflow-x: hidden;
}

body { display: flex; flex-direction: column; }

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

#bar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
  padding-top: env(safe-area-inset-top);
  box-shadow: 0 1px 0 rgba(34,49,47,.03);
}

.row {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; flex-wrap: wrap;
  padding-left: max(14px, env(safe-area-inset-left));
  padding-right: max(14px, env(safe-area-inset-right));
}
.row-file { border-bottom: 1px solid var(--line); }

#wordmark {
  font-weight: 700; letter-spacing: .02em; color: var(--teal);
  margin-right: 8px; font-size: 15px; flex: none;
}

.spacer { flex: 1; }
.sep { width: 1px; height: 20px; background: var(--line); margin: 0 5px; flex: none; }

#filename {
  margin-left: 10px; color: var(--ink-dim); font-size: 13px;
  max-width: 42ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#dirty { color: var(--amber); font-size: 15px; line-height: 1; margin-left: -4px; flex: none; }

.btn {
  font: inherit; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px; padding: 0 11px; cursor: pointer;
  min-height: var(--tap); flex: none;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover:not(:disabled) { background: #f0ece3; }
.btn:active:not(:disabled) { background: #e8e3d8; }
.btn:disabled { opacity: .38; cursor: default; }
.btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }

.btn.primary { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn.primary:hover:not(:disabled) { background: #1c6c60; }
.btn.ghost { background: transparent; }
.btn.big { padding: 10px 20px; font-size: 15px; margin-top: 6px; min-height: 44px; }

.btn.icon { min-width: var(--tap); padding: 0 8px; text-align: center; }
.btn.icon.on { background: var(--teal-sk); border-color: var(--teal); color: #14514a; }

select {
  font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 7px; padding: 0 7px; cursor: pointer; max-width: 190px;
  min-height: var(--tap); flex: none;
}
select:disabled { opacity: .38; cursor: default; }

/* ---------- stage ---------- */

#stage {
  flex: 1; overflow: auto;
  padding: 26px 18px 90px;
  padding-bottom: max(90px, env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}

#empty { max-width: 46ch; margin: 12vh auto; text-align: center; color: var(--ink-dim); }
#empty h1 { font-size: 21px; color: var(--ink); margin: 0 0 10px; font-weight: 600; }
#empty p { margin: 0 0 6px; }
#empty code { background: #ece7db; padding: 1px 5px; border-radius: 4px; font-size: 12.5px; }
.fineprint { font-size: 12.5px; margin-top: 16px !important; color: var(--sage); }

/* The page mimics US Letter at 96dpi with 1in margins. */
.page {
  width: 8.5in; max-width: 100%; min-height: 11in; margin: 0 auto; padding: 1in;
  background: var(--page); border: 1px solid var(--line); border-radius: 3px;
  box-shadow: var(--shadow);
  font-family: "Times New Roman", Times, serif; font-size: 12pt; color: #111;
}
.page:focus { outline: none; }
.page:focus-visible { outline: 2px solid var(--teal-sk); outline-offset: 4px; }

/* Full-width reading/editing mode: drops the paper metaphor and uses the screen.
   The default on phones, and available everywhere via the ↔ button. */
body.fit-width .page {
  width: 100%; min-height: 0; padding: 20px 16px;
  border-radius: 0; box-shadow: none;
}
body.fit-width #stage { padding: 0 0 90px; }

/* ---------- document blocks ---------- */

/* pre-wrap makes literal \t render at tab width and \n render as a break, which is
   exactly how the run model stores <w:tab/> and <w:br/>. */
.blk {
  margin: 0 0 .34em; min-height: 1.2em;
  white-space: pre-wrap; tab-size: 4; -moz-tab-size: 4;
  overflow-wrap: break-word; word-break: break-word;
}
.blk:empty::after { content: ""; display: inline-block; }

.blk[data-style^="Heading"] { font-weight: 700; margin-top: .85em; }
.blk[data-style="Heading1"] { font-size: 1.55em; }
.blk[data-style="Heading2"] { font-size: 1.3em; }
.blk[data-style="Heading3"] { font-size: 1.12em; }

.blk[data-align="center"] { text-align: center; }
.blk[data-align="right"]  { text-align: right; }
.blk[data-align="both"]   { text-align: justify; }

/* List markers are drawn from the model rather than by <ul>/<ol>, because a docx
   list is a per-paragraph numId + level, not a nested container. */
.blk[data-list] { position: relative; --hang: .25in; }
.blk[data-list]::before {
  content: attr(data-marker);
  position: absolute; left: calc(-1 * var(--hang)); width: calc(var(--hang) - .06in);
  text-align: left; color: inherit; white-space: pre;
}

.r { white-space: inherit; }
.r[data-b="1"] { font-weight: 700; }
.r[data-i="1"] { font-style: italic; }
.r[data-u="1"] { text-decoration: underline; }
.r[data-s="1"] { text-decoration: line-through; }
.r[data-u="1"][data-s="1"] { text-decoration: underline line-through; }
.r[data-vert="superscript"] { vertical-align: super; font-size: .75em; }
.r[data-vert="subscript"]   { vertical-align: sub;   font-size: .75em; }

/* Runs holding a picture or a field are preserved verbatim, so they are not editable. */
.r.opaque {
  display: inline-block; padding: 0 6px; margin: 0 1px;
  background: #f0ece3; border: 1px dashed var(--sage); border-radius: 4px;
  color: var(--sage); font-size: .75em; font-style: normal; font-family: inherit;
  user-select: none; -webkit-user-select: none; vertical-align: baseline;
}

.tbl-note {
  margin: 6px 0 14px; padding: 7px 10px; font-size: 12px;
  background: #f7f4ec; border-left: 3px solid var(--sage); color: var(--ink-dim);
  font-family: -apple-system, sans-serif;
}
/* Wide tables scroll inside their own box rather than widening the page. */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 .8em; }
.tbl { border-collapse: collapse; width: 100%; min-width: 20em; }
.tbl td { border: 1px solid var(--line); padding: 4px 7px; vertical-align: top; }

/* ---------- toast ---------- */

#toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  bottom: max(26px, env(safe-area-inset-bottom));
  background: var(--ink); color: #fff; padding: 9px 16px; border-radius: 8px;
  font-size: 13px; box-shadow: var(--shadow); z-index: 60;
  max-width: min(70ch, calc(100vw - 32px)); text-align: center;
}
#toast.warn { background: var(--coral); }

/* ---------- phones and tablets ---------- */

@media (max-width: 820px) {
  :root { --tap: 40px; }

  /* One scrolling strip per row keeps every control reachable without a menu,
     and without stacking rows that would eat the editing area. */
  .row {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    padding: 6px 10px; gap: 5px;
  }
  .row::-webkit-scrollbar { display: none; }

  #wordmark { display: none; }
  .spacer { display: none; }
  .sep { display: none; }
  #filename { max-width: 16ch; margin-left: 4px; font-size: 12px; }

  /* A font size below 16px makes iOS zoom the whole page on focus. */
  select { font-size: 16px; max-width: 8.5em; }
  .btn { font-size: 15px; }

  /* On a narrow strip the first few controls are the ones actually reachable
     without scrolling, so the formatting people use most goes first and the
     dropdowns — which are wide — move behind them. Desktop keeps the
     conventional order. */
  .row-format > * { order: 6; }
  #btn-bold, #btn-italic, #btn-underline, #btn-strike { order: 1; }
  #btn-bullet, #btn-number { order: 2; }
  #btn-outdent, #btn-indent, #btn-tab { order: 3; }
  #btn-left, #btn-center, #btn-right, #btn-justify { order: 4; }
  #sel-spacing, #sel-style, #sel-font, #sel-size { order: 5; }

  .page { font-size: 16px; }
  #empty { margin: 8vh auto; padding: 0 18px; }
}

/* Coarse pointers get larger targets regardless of screen size. */
@media (pointer: coarse) {
  :root { --tap: 40px; }
  .btn.icon { min-width: 40px; }
}

/* ---------- print ---------- */

@page { size: Letter; margin: 1in; }

@media print {
  #bar, #empty, #toast { display: none !important; }
  #stage { overflow: visible; padding: 0; }
  .page, body.fit-width .page {
    width: auto; max-width: none; min-height: 0; margin: 0; padding: 0;
    border: 0; border-radius: 0; box-shadow: none;
    font-size: 12pt;
  }
  .tbl-note { display: none; }
  .tbl-wrap { overflow: visible; }
  .r.opaque { border: 0; background: none; color: #666; }
}