/* OBSCURA OS - Docs: what helps the writing along.
 *
 * The status bar's reading time and writing goal (docs-shell.js), the
 * paragraph being written with the rest dimmed and typewriter scrolling
 * (docs-sheets.js), and the Navigation pane's headings, which drag to move
 * their sections (docs-find.js). Loaded after the page's own rules. */

/* The writing goal: how far through it the words are, as a bar the width
   of a word and the count beside it. */
.sb-goal[hidden] { display: none; }
.sb-goal-bar { position: relative; width: 44px; height: 4px; background: var(--rule); border-radius: var(--radius-sm); overflow: hidden; }
.sb-goal-bar > span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--ink-soft); }
.sb-goal.is-met .sb-goal-bar > span { background: var(--accent-strong); }
.sb-goal, .sb-read { font-variant-numeric: tabular-nums; }
/* A phone's status bar has room for the page and the words and no more:
   the goal is a rule under the words, filled as far as they have come
   (docs-shell.js sets --goal and says it in the button's name). */
@media (max-width: 600px) {
  .sb-read, .sb-goal { display: none !important; }
  #wordCountStats.has-goal { position: relative; }
  #wordCountStats.has-goal::before, #wordCountStats.has-goal::after { content: ""; position: absolute; left: 7px; bottom: 7px; height: 2px; border-radius: var(--radius-sm); }
  #wordCountStats.has-goal::before { right: 7px; background: var(--rule); }
  #wordCountStats.has-goal::after { width: calc((100% - 14px) * var(--goal, 0)); background: var(--accent-strong); }
}

/* The paragraph being written, with the rest dimmed (docs-sheets.js writes
   the rule that names it), and room under the last line for typewriter
   scrolling to bring it to the middle of the window. */
body.doc-dimming #docEditor > *, body.doc-dimming #docEditor li { transition: opacity var(--dur-2) var(--ease-standard); }
body.doc-typewriter .center-scroll-canvas { padding-bottom: 50vh; }
@media print { body.doc-dimming #docEditor * { opacity: 1 !important; } }

/* The outline: a heading at the top of the page drags with its section. */
.outline-item[draggable="true"] { cursor: grab; }
.outline-item.is-dragged { opacity: .45; }
.outline-item:focus-visible, .nav-page:focus-visible, .nav-result:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: -2px; }
/* Where a dragged section will land: a rule across the outline. */
.outline-item.drop-before { box-shadow: inset 0 2px 0 var(--accent-strong); }
.outline-item.drop-after { box-shadow: inset 0 -2px 0 var(--accent-strong); }
.nav-hint { margin: 10px 8px 4px; color: var(--ink-faint); font-size: var(--text-2xs); line-height: 1.45; }

/* ------------------------------------------------------------------------
   References, Mailings and the rest kept in the document (docs-notes.js,
   docs-format.js, docs-table.js, docs-file.js, docs-sheets.js).
   ------------------------------------------------------------------------ */

/* What the document keeps and does not show: its sources and its mail
   merge recipients. No height, so the pages are laid out as if they were
   not there, but in the flow, so the page layout can still measure them. */
.doc-paper .doc-csl, .doc-paper .doc-merge { height: 0; margin: 0; padding: 0; overflow: hidden; border: 0; }

/* A citation, a cross-reference and a merge field read as the text they
   stand for, with the faint field shading Word gives a field under the
   caret, only on screen. */
.doc-paper .doc-cite, .doc-paper .doc-xref, .doc-paper .doc-mf { border-radius: var(--radius-sm); }
.doc-paper .doc-xref { color: inherit; text-decoration: none; }
@media screen {
  .doc-paper .doc-cite:hover, .doc-paper .doc-xref:hover, .doc-paper .doc-mf { background: var(--paper-inset); }
  .doc-paper .doc-mf.is-preview { background: transparent; }
}

/* The bibliography: a hanging indent, as every one of the four styles
   sets its references. */
.doc-paper .doc-bib { margin: 12pt 0; }
.doc-paper .doc-bib-title { font-family: var(--doc-heading-font); color: var(--doc-heading); font-size: 16pt; margin: 0 0 8pt; }
.doc-paper .doc-bib-entry { margin: 0 0 6pt; padding-left: 0.5in; text-indent: -0.5in; }
.doc-paper .doc-bib-none { color: var(--ink-faint); font-style: italic; }
.doc-paper .doc-bib-url { overflow-wrap: anywhere; }

/* A bookmark is a place, not a mark: an empty one shows as a thin bar only
   while formatting marks are shown. */
.doc-paper .doc-bm:empty { display: inline-block; width: 0; height: 1em; vertical-align: text-bottom; }
.doc-paper.show-marks .doc-bm:empty { border-left: 1px solid var(--ink-faint); margin: 0 1px; }

/* Equations, drawn by the browser from MathML. */
.doc-paper .doc-eq { display: inline-block; padding: 0 1px; cursor: default; }
.doc-paper .doc-eq math { font-size: 1.1em; }
.doc-paper p.doc-eq-block { text-align: center; margin: 6pt 0; }
.doc-paper p.doc-eq-block .doc-eq { display: inline-block; }
.doc-paper .doc-eq[title] { color: var(--danger); font-family: var(--font-mono); }

/* A chart in the page. */
.doc-paper figure.doc-chart { display: block; width: 5in; max-width: 100%; margin: 6pt auto; color: var(--ink); cursor: default; }
.doc-paper figure.doc-chart svg, .dw-chart-preview svg { display: block; width: 100%; height: auto; fill: currentColor; stroke: none; }

/* A section break: a double dotted line with its name, as Word's Show/Hide
   draws it; on paper the next section starts on a new page. */
.doc-paper hr.section-break { border: 0; border-top: 3px double var(--ink-faint); height: 0; margin: 10px 0; position: relative; overflow: visible; }
.doc-paper hr.section-break::after { content: "Section Break (Next Page)"; position: absolute; left: 50%; top: -9px; transform: translateX(-50%); background: var(--page-bg); color: var(--ink-faint); font: var(--text-2xs)/1.4 var(--font-sans); padding: 0 8px; white-space: nowrap; }
@media print {
  .doc-paper hr.section-break { border: 0; margin: 0; break-after: page; }
  .doc-paper hr.section-break::after { content: none; }
}

/* Line numbers, in the left margin of each sheet. */
.doc-linenums { position: absolute; inset: 0; pointer-events: none; }
.doc-linenums span { position: absolute; font: 9pt var(--doc-body-font); color: var(--ink-soft); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* The ribbon's additions. */
.rb-select-label { color: var(--ink-soft); margin-right: 4px; }
.rmenu-cite { min-width: 260px; max-width: 360px; }
.rmenu-cite > button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px; }
.rmenu-note { margin: 0; padding: 6px 10px; color: var(--ink-soft); max-width: 260px; white-space: normal; }
.rb-merge-nav { align-items: center; justify-content: center; gap: 2px; }
.rb-merge-nav .rb-row { gap: 1px; }
.rb-merge-at { min-height: 18px; color: var(--ink-soft); font-variant-numeric: tabular-nums; font-size: var(--text-2xs); }

/* The dialogs' additions. */
.dw-field-top { align-items: start; }
.dw-field-top > span { padding-top: 6px; }
.dw-field textarea { resize: vertical; font-family: var(--font-mono); }
.dw-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dw-grid3 .dw-field { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.dw-row-left { display: flex; flex-wrap: wrap; gap: 8px; }
.dw-src-list { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow: auto; border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 4px; }
.dw-src { display: flex; align-items: flex-start; gap: 10px; padding: 6px 8px; border-bottom: 1px solid var(--rule); }
.dw-src:last-child { border-bottom: 0; }
.dw-src-ref { flex: 1; min-width: 0; padding-left: 1.5em; text-indent: -1.5em; overflow-wrap: anywhere; }
.dw-src-acts { display: flex; gap: 6px; flex: none; }
.dw-src-unused { color: var(--ink-faint); font-size: var(--text-2xs); white-space: nowrap; }
.dw-eq-preview { min-height: 64px; font-size: 1.2em; color: var(--ink); }
.dw-eq-samples { display: flex; flex-wrap: wrap; gap: 6px; }
.dw-chart-preview { color: var(--ink); }
.dw-chart-preview svg { width: 100%; max-width: 480px; height: auto; }
.dw-merge-table { max-height: 50vh; overflow: auto; border: 1px solid var(--rule); border-radius: var(--radius-sm); }
.dw-merge-table table { border-collapse: collapse; width: 100%; }
.dw-merge-table th, .dw-merge-table td { padding: 4px 8px; border-bottom: 1px solid var(--rule); text-align: left; white-space: nowrap; }
.dw-merge-table th { position: sticky; top: 0; background: var(--paper-raised); font-weight: 600; }
@media (pointer: coarse) {
  .dw-src-acts .dw-btn, .dw-eq-samples .dw-btn, .dw-row-left .dw-btn { min-height: 44px; }
  .dw-merge-table input[type=checkbox] { width: 22px; height: 22px; }
}
@media (max-width: 600px) {
  .dw-grid3 { grid-template-columns: minmax(0, 1fr); }
  .dw-src { flex-direction: column; }
}