/* 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), and the Assistant's dialog
 * (docs-assist.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; }
}

/* The Assistant: where the text goes, what came back, and the choice of
   model under Set up. */
.da-where { color: var(--ink); }
.da-out { display: flex; flex-direction: column; gap: 6px; }
.da-out[hidden] { display: none; }
.da-out-label { color: var(--ink-soft); }
.da-out textarea { width: 100%; min-height: 160px; padding: 8px 10px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--paper-inset); color: var(--ink); font: inherit; line-height: 1.5; resize: vertical; box-sizing: border-box; }
.da-say:empty { display: none; }
.da-choice { display: flex; align-items: center; gap: 8px; min-height: 30px; cursor: pointer; }
.da-state { color: var(--ink-soft); font-weight: 400; }
@media (pointer: coarse) { .da-choice { min-height: 44px; } }

/* ------------------------------------------------------------------------
   Motion inside the window (30 October 2026). The window faded in, and
   then nothing in it moved: a menu, a colour grid, the Navigation pane,
   the comments, a version in History and the File view all appeared in
   one frame, and a button under the pointer changed colour in one too.
   Each now arrives as the rest of the site's things do (theme.css,
   MOTION): a menu and the Tell Me list fade in and come down the last
   few pixels over --dur-3 (os-menu-in, as the PDF and photo editors'
   menus do); the panel of a ribbon tab fades in over --dur-2 as the tab
   is chosen; the Navigation pane, the comments pane and the File view
   fade in over --dur-4, and on a phone, where the two panes sit over the
   page, they rise; a comment thread that was not there before rises into
   its list, and on opening the threads deal in a --stagger apart
   (docs-comments.js marks them is-new and counts them in --deal); the
   History dialog and the name dialog rise over their backdrop, the
   versions a step apart; and a page of the File view rises a little when
   another is chosen. A control answers the hand: its colour eases over
   --dur-2, it presses to 96% over --dur-1, and a keyboard's focus is a
   ring, not a hover grey. The status bar's figures are tabular, so the
   page and word counts do not jog their neighbours, and the save state
   fades in when its words change rather than being redrawn in place.
   Every distance is one of theme.css's, nought with motion switched
   down, and everything that arrives asks for the fade it keeps then. */
.rmenu:not([hidden]) { --os-fade: var(--dur-fade); animation: os-menu-in var(--dur-3) var(--ease-standard) backwards; }
.rb-panel:not([hidden]), .docs-ribbon.is-peek .rb-panels { --os-fade: var(--dur-fade); animation: os-fade-in var(--dur-2) var(--ease-standard) backwards; }
.dm-link-tip:not([hidden]) { --os-fade: var(--dur-fade); animation: os-rise-soft var(--dur-2) var(--ease-standard) backwards; }
.nav-pane:not([hidden]), .workspace-stage > .dc-panel:not([hidden]), .docs-backstage:not([hidden]) { --os-fade: var(--dur-fade); animation: os-fade-in var(--dur-4) var(--ease-standard) backwards; }
@media (max-width: 860px) { .nav-pane:not([hidden]), .workspace-stage > .dc-panel:not([hidden]) { animation-name: os-rise; } }
.bs-main > .bs-page:not([hidden]) { --os-fade: var(--dur-fade); animation: os-rise-soft var(--dur-4) var(--ease-standard) backwards; }
.dc-thread.is-new { --os-fade: var(--dur-fade); animation: os-rise-soft var(--dur-3) var(--ease-standard) backwards; animation-delay: calc(var(--stagger) * var(--deal, 0)); }
.dh-back, .dc-back { --os-fade: var(--dur-fade); animation: os-fade-in var(--dur-3) var(--ease-standard) backwards; }
.dh-card, .dc-card { --os-fade: var(--dur-fade); animation: os-rise var(--dur-3) var(--ease-standard) backwards; }
.dh-list > .dh-row { --os-fade: var(--dur-fade); animation: os-rise-soft var(--dur-3) var(--ease-standard) backwards; }
.dh-list > .dh-row:nth-child(2) { animation-delay: var(--stagger); }
.dh-list > .dh-row:nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
.dh-list > .dh-row:nth-child(4) { animation-delay: calc(var(--stagger) * 3); }
.dh-list > .dh-row:nth-child(5) { animation-delay: calc(var(--stagger) * 4); }
.dh-list > .dh-row:nth-child(n+6) { animation-delay: calc(var(--stagger) * 5); }
/* The hand on a control: colour over --dur-2, the press over --dur-1. */
.qb, .rb, .rb-arrow, .rb-tab, .rb-launch, .rb-collapse, .tb-pill, .sg-item, .sb-btn, .sb-icon, .nav-tab, .nav-close, .outline-item, .nav-result, .nav-page,
.bs-item, .bs-back, .bs-place, .bs-card, .bs-bigbtn, .bs-template-sheet, .doc-vault-open, .doc-vault-pin, .doc-vault-del, .dw-btn, .dw-tab, .rmenu > button, .rmenu > label, .ts-item, .symbol-quick button, .dc-thread, .dh-btn {
  transition: background-color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard), transform var(--dur-1) var(--ease-standard);
}
.qb:active, .rb:active:not(:disabled), .rb-arrow:active, .rb-launch:active, .tb-pill:active, .sg-item:active, .sb-btn:active, .sb-icon:active, .nav-close:active, .doc-vault-pin:active, .doc-vault-del:active, .dw-btn:active:not(:disabled), .bs-bigbtn:active, .dh-btn:active:not(:disabled) { transform: scale(0.96); }
:root[data-motion="none"] .docs-window :active { transform: none; }
/* A keyboard's focus is a ring: a hover grey alone says nothing about
   where the focus is. On the title bar the ring is the bar's own white. */
.rb:focus-visible, .rb-arrow:focus-visible, .rb-tab:focus-visible, .rb-launch:focus-visible, .rb-collapse:focus-visible, .sg-item:focus-visible, .sb-btn:focus-visible, .sb-icon:focus-visible, .nav-tab:focus-visible, .nav-close:focus-visible, .bs-card:focus-visible, .dw-btn:focus-visible, .dw-tab:focus-visible, .rmenu > button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.qb:focus-visible, .tb-pill:focus-visible, .bs-item:focus-visible, .bs-back:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
/* The status bar's figures hold their width, and the save state fades
   in when its words change (docs-app.js writes a new span only then). */
.docs-statusbar { font-variant-numeric: tabular-nums; }
.save-status-text > span { --os-fade: var(--dur-fade); animation: os-fade-in var(--dur-2) var(--ease-standard) backwards; }