/* The page itself: descriptor cards, and comments in the margin beside the
   prose — in the editor's margin and in the rendered view's, which are the same
   cards drawn in the same place by two different mounts. */

/* --- descriptor references: a card alone on its line, a link in prose ---
   render.rs parks both forms inert (ADR-0034 §6). The card is a <span>
   because comrak puts a lone placeholder inside a <p>, so `display: block`
   is what makes it a block. Nothing here fetches: `wireDescriptorCards`
   below is what does, and only when the reader asks it to. */
.dcard {
  display: block; margin: 1em 0; padding: .7em .85em;
  border: 1px solid var(--line); border-radius: 6px; background: var(--panel);
}
.dcard-title { display: block; font-weight: 600; }
.dcard-note, .dcard-blurb { display: block; font-size: 13px; color: var(--muted); }
.dcard-blurb { margin-top: .15em; color: var(--fg); }
/* The publisher's pixels, framed and never full-bleed: a preview may not
   impersonate this dossier's own chrome (ADR-0034 §5). */
.dcard-shot {
  display: block; margin-top: .6em; max-width: 100%; max-height: 340px;
  border: 1px solid var(--line); border-radius: 4px; background: var(--bg);
}
.dcard-load {
  margin-top: .5em; font-size: 13px; background: none; border: 0; padding: 0;
  color: var(--accent); cursor: pointer; text-align: left;
}
.dcard-load:hover { text-decoration: underline; }
.dcard-trust { margin-top: .5em; font-size: 12px; color: var(--muted); }
.dcard-trust button {
  background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer;
  font-size: 12px;
}
.dcard.dcard-failed .dcard-note { color: var(--del); }
/* An inline reference reads as a link with a hint of what it points at. */
.dref::before { content: "◫ "; color: var(--muted); }

/* --- a descriptor set: a table, or a grid of cards (ADR-0046) ---------- */
.dset-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0;
}
.dset-tools .dset-view { margin: 0; width: 150px; }
.dset-tools input[type="search"] { flex: 1 1 160px; max-width: 320px; }
#dsetGridTools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.dset-viewer { color: var(--muted); }
.dset-viewer select { margin-left: 4px; }
/* Wide content scrolls inside its own box, never the page. */
.dset-wrap { overflow-x: auto; }
/* Fixed layout: a column's width is decided here, not by its content, so a
   textarea can be measured against it. Below 760px the wrapper scrolls. */
table.dset { width: 100%; min-width: 760px; table-layout: fixed; border-collapse: collapse; font-size: 13.5px; }
table.dset col.c-text { width: 34%; }
table.dset col.c-type { width: 8em; }
table.dset col.c-coll { width: 13%; }
table.dset col.c-prov { width: 9.5em; }
table.dset col.c-json { width: 3em; }
table.dset th {
  text-align: left; font-weight: 600; font-size: 12px; color: var(--muted);
  border-bottom: 1px solid var(--line); padding: 4px 8px;
}
table.dset td { vertical-align: top; padding: 5px 8px; border-bottom: 1px solid var(--line); }
table.dset .tag { white-space: nowrap; display: inline-block; margin: 0 2px 2px 0; }
.dset-id { display: block; font-size: 11.5px; color: var(--muted); font-family: ui-monospace, monospace; }
.dset-sel, .dset-prov { color: var(--muted); font-size: 12.5px; }
.dset-sel { font-family: ui-monospace, monospace; overflow-wrap: anywhere; }
/* An editable cell reads as text until it is the one being edited. */
.dset-in {
  display: block; width: 100%; box-sizing: border-box; font: inherit; color: inherit; resize: none; overflow: hidden;
  min-height: 0;   /* the bare `textarea` rule (editor.css) is the text editor's 62vh */
  padding: 2px 4px; margin: -2px -4px; border: 1px solid transparent; border-radius: 4px; background: none;
}
.dset-in:hover { border-color: var(--line); }
.dset-in:focus { border-color: var(--accent); background: var(--bg); outline: none; }
.dset-json-btn { font-family: ui-monospace, monospace; font-size: 12px; white-space: nowrap; }
tr.dset-json pre { margin: 0; font-size: 12px; max-height: 360px; overflow: auto; }

/* The selection editor (selection-editor.js): a descriptor's selection set
   from the viewer's manifest. */
.sel-sec { margin: 14px 0; max-width: 820px; }
.sel-sec h3 { font-size: 14px; margin: 0 0 6px; }
.sel-sec h4 { font-size: 13px; margin: 12px 0 4px; color: var(--muted); font-weight: 600; }
.sel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.sel-grid label { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); gap: 2px; }
.sel-grid .sel-wide { grid-column: 1 / -1; }
.sel-checks { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.sel-scroll { max-height: 140px; overflow: auto; border: 1px solid var(--line); border-radius: 4px; padding: 4px 8px; margin-top: 4px; }
.sel-check { font-size: 13px; white-space: nowrap; }
.sel-row, .sel-cond { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.sel-name { font-weight: 600; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.sel-row > .muted { font-size: 12px; }
.sel-range { display: flex; align-items: center; gap: 4px; }
.sel-range input { width: 11em; }
.sel-bar { position: relative; flex: 1 1 120px; min-width: 120px; height: 6px; border-radius: 3px; background: var(--line); }
.sel-fill { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--accent); }
.sel-cond input[data-w="name"] { width: 14em; }
.sel-cond input[data-w="value"] { width: 12em; }
.sel-add { display: flex; gap: 6px; margin: 8px 0; }
input.bad { border-color: var(--del); }
.sel-map { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 8px; }
.sel-map svg { border: 1px solid var(--line); border-radius: 4px; cursor: crosshair; touch-action: none; background: var(--panel); max-width: 100%; height: auto; user-select: none; }
.sel-map svg.mode-pan { cursor: grab; }
.sel-map-wrap { display: flex; flex-direction: column; gap: 4px; max-width: 100%; }
.sel-map-tools { display: flex; flex-wrap: wrap; gap: 4px; }
.sel-map-tools button { padding: 1px 8px; font-size: 12px; }
.sel-map-tools button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.sel-map-land { fill: none; stroke: var(--muted); stroke-width: 0.8; opacity: .8; }
.sel-map-data { fill: rgba(80, 140, 220, .12); stroke: rgba(80, 140, 220, .8); stroke-width: 1; stroke-dasharray: 4 3; }
.sel-map-box.ghost { fill: rgba(0,0,0,.04); stroke-dasharray: 3 2; }
.sel-map-key { display: inline-block; width: 12px; height: 9px; border: 1px solid; vertical-align: middle; margin-right: 3px; }
.sel-map-key.data { background: rgba(80, 140, 220, .12); border-color: rgba(80, 140, 220, .8); border-style: dashed; }
.sel-map-key.box { border-color: var(--accent); border-width: 2px; }
.sel-map-extent { fill: var(--bg); stroke: var(--line); }
.sel-map-box { fill: rgba(0,0,0,.06); stroke: var(--accent); stroke-width: 2; }
.sel-map-box, .sel-map-data, .sel-map-land, .sel-map-grid { vector-effect: non-scaling-stroke; }
.sel-map-box.band { stroke-dasharray: 5 3; }
.sel-map-grid { stroke: var(--line); stroke-width: 1; }
.sel-map-tick { fill: var(--muted); font-size: 10.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.sel-map-hint { fill: var(--muted); font-size: 12px; pointer-events: none; paint-order: stroke; stroke: var(--panel); stroke-width: 4px; }
.sel-map-side { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.sel-count { font-size: 13px; margin-bottom: 6px; }
.sel-n.bad { color: var(--del); }
.sel-near { font-size: 12.5px; margin-bottom: 6px; }
.sel-near ul { margin: 4px 0; padding-left: 18px; }
.sel-warn { color: var(--del); }
.sel-live pre, .sel-sec pre { font-size: 12px; white-space: pre-wrap; }
#selBodyJson { width: 100%; height: 5.5em; min-height: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.sel-checks[hidden] { display: none; }
.dset-acts { white-space: nowrap; }
.dset-acts button { margin-left: 4px; }
/* The grid: cards as a file browser shows pictures, the preview on top. */
.dgrid {
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.dgrid .dcard { display: flex; flex-direction: column; margin: 0; min-width: 0; }
.dgrid .dcard-title { overflow-wrap: anywhere; }
.dgrid .dcard-shot {
  order: -1; width: 100%; height: 150px; max-height: none; margin: 0 0 .6em;
  object-fit: contain;
}
/* One trust switch in the toolbar for the whole grid, not one per card. */
.dgrid .dcard-trust { display: none; }

/* --- a file that is not a page: a text editor, a preview, or a download - */
.otherfile { margin-top: 12px; }
/* A text file's editor: plain CodeMirror (`mountText`), framed like a code
   block so it does not read as a page. */
#ed.texted .cm-editor {
  border: 1px solid var(--line); border-radius: 6px; background: var(--panel);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px;
}
#ed.texted .cm-gutters { background: var(--panel); border-right: 1px solid var(--line); color: var(--muted); }
.imgview img {
  display: block; max-width: 100%; height: auto; margin: 0 auto;
  border: 1px solid var(--line); border-radius: 4px; background: var(--bg);
}
.pdfview {
  display: block; width: 100%; height: calc(100vh - 160px); min-height: 360px;
  border: 1px solid var(--line); border-radius: 4px;
}

/* Comments on a file that is not a page (file-comments.js): the margin's
   cards, listed under the file, each headed by what it is about. */
.fcomments { margin-top: 18px; max-width: 760px; }
.fcomments h3 { font-size: 14px; margin: 0 0 8px; }
.fc-list { display: flex; flex-direction: column; gap: 8px; }
.fc-thread { display: flex; flex-direction: column; gap: 3px; }
.fc-thread .lp-card { position: static; width: auto; }
.fc-at {
  align-self: flex-start; padding: 0 7px; font-size: 11.5px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--accent);
}
.fc-thread.active .fc-at { border-color: var(--accent); }
.fc-add { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; font-size: 13px; }
.fc-page { width: 6em; }
/* An image's regions: the boxes of its comments, and the one being drawn. */
.fc-canvas { position: relative; }
.fc-canvas img { cursor: crosshair; touch-action: none; user-select: none; }
.fc-layer { position: absolute; inset: 0; pointer-events: none; }
.fc-box { position: absolute; border: 2px solid var(--accent); border-radius: 2px; background: rgba(0,0,0,.04); }
.fc-box.resolved { opacity: .45; }
.fc-box.active { box-shadow: 0 0 0 3px var(--ins-bg); }
.fc-box.drawn { border-style: dashed; }

/* --- live preview: rendered markup inside the editor ------------------ */
/* Structure comes from the bundle (it owns the line geometry the cards are
   placed from); everything visual lives here, like the .cm-dossier-* colours. */
#ed .lp-wrap { position: relative; }
#ed .lp-margin { display: none; }
/* Live preview reads as the document, so it gets the document's font; source
   mode stays monospace, where column alignment is the point. */
#ed .lp-wrap.live .cm-scroller {
  font: 15px/1.65 system-ui, -apple-system, "Segoe UI", sans-serif;
}
#ed .lp-wrap.live .cm-content { padding: 16px 0; }
#ed .lp-wrap.live { padding-left: 250px; }
#ed .lp-wrap.live .lp-margin {
  display: block; position: absolute; left: 0; top: 0; width: 234px;
}
.lp-card {
  position: absolute; left: 0; width: 234px; box-sizing: border-box; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 10px; font-size: 12.5px; line-height: 1.45;
  transition: top .12s ease-out, background-color 1.4s ease-out;
}
.lp-card:hover { border-color: var(--accent); }
.lp-card.resolved { opacity: .6; }
.lp-card.orphan { border-color: var(--del); color: var(--del); }
.lp-card.flash { background: var(--ins-bg); transition: none; }
/* The one being discussed. A left bar rather than a border-colour change, so
   the answer to "which card" is legible in peripheral vision and does not
   move the card by a pixel — it lines up with the highlighted words, which
   get the matching treatment (.cm-dossier-hl-active, mark.hl.active). */
.lp-card.active {
  border-color: var(--accent); box-shadow: 0 2px 10px rgba(0,0,0,.16);
  border-left-width: 3px; padding-left: 8px;
}
.lp-card-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 3px; }
.lp-cid { font-weight: 600; color: var(--accent); font-size: 11.5px; }
.lp-card-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.lp-card-row { display: flex; gap: 5px; margin-top: 6px; }
.lp-card-row button { padding: 1px 7px; font-size: 11.5px; }

/* one message of a thread — the opening comment and each reply */
.lp-msg + .lp-msg { margin-top: 7px; }
.lp-msg-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px; }
.lp-author { font-weight: 600; font-size: 11.5px; }
.lp-author.unknown { font-weight: 400; font-style: italic; color: var(--muted); }
.lp-when { color: var(--muted); font-size: 11px; }
.lp-msg-text { white-space: pre-wrap; overflow-wrap: anywhere; }
/* A reply is indented under what it answers, and the rule carries the eye
   down the thread the way the indent alone does not at this size. */
.lp-reply-msg {
  padding-left: 8px; border-left: 2px solid var(--line);
}
.lp-resolved {
  margin-top: 5px; font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em;
}
.lp-reply { margin-top: 7px; }
.lp-reply textarea {
  min-height: 46px; width: 100%; padding: 5px 7px; border-radius: 6px;
  font: 12.5px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  resize: vertical;
}
.lp-reply .lp-card-row { margin-top: 5px; }

/* frontmatter and Comment Backmatter, folded to a pill that reveals on click */
.cm-lp-fold {
  display: inline-block; margin: 2px 12px; padding: 1px 9px; cursor: pointer;
  border: 1px dashed var(--line); border-radius: 10px;
  background: var(--panel); color: var(--muted); font-size: 11.5px;
}
.cm-lp-fold:hover { border-color: var(--accent); color: var(--fg); }

/* the rendered inline bits */
.cm-lp-task { accent-color: var(--accent); margin: 0 5px 0 0; vertical-align: middle; }
/* A nested ordered marker, shown as the page shows it (a. i.) — tabular so a
   column of them lines up the way the digits did. */
.cm-lp-olmark { color: var(--muted); font-variant-numeric: tabular-nums; }
.cm-lp-anchor { color: var(--accent); font-size: 10px; vertical-align: super; cursor: pointer; }
.cm-lp-anchor.resolved { color: var(--muted); }
/* A descriptor embed, rendered in live preview. Same frame as the reader's
   card (`.dcard`) so one syntax does not read as two things, and no picture:
   the editor fetches nothing. */
.cm-lp-dcard {
  display: inline-block; padding: .3em .6em; border: 1px solid var(--line);
  border-radius: 6px; background: var(--panel);
}
.cm-lp-dcard-title { font-weight: 600; }
.cm-lp-dcard-note { margin-left: .5em; font-size: 12px; color: var(--muted); }
/* The `↗` after a link to the web, in both editing modes (editor.js
   `LinkOpenWidget`), and after a wikilink (`WikilinkOpenWidget`, a button,
   hence the reset): the link's own text is for editing, this follows it. The
   drawing is the size of the text, the padding makes it something a thumb can
   hit without landing in the words beside it. */
.cm-link-open {
  display: inline-block; padding: 0 .25em; margin: 0 0 0 .1em;
  color: var(--muted); vertical-align: -.1em; cursor: pointer;
  background: none; border: 0; font: inherit; line-height: inherit;
}
.cm-link-open svg { width: .95em; height: .95em; display: block; }
.cm-link-open:hover { color: var(--accent); }
/* The keep buttons on a conflict's marker lines (editor.js `ConflictWidget`),
   in both editing modes. Sized for a thumb rather than for the line it sits on
   — this is the one button in the editor whose mis-tap costs a paragraph — and
   coloured as the conflict is coloured everywhere else, so the row reads as
   part of the warning and not as a toolbar that wandered into the text. */
.cm-conflict-keep {
  display: inline-block; margin: 0 0 0 10px; padding: 2px 10px; min-height: 26px;
  border: 1px solid var(--del); border-radius: 13px;
  background: var(--del-bg); color: var(--del); cursor: pointer;
  font: 500 12px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  vertical-align: middle; white-space: nowrap;
}
.cm-conflict-keep:hover { background: var(--del); color: var(--bg); }
/* The conflict's own text, held at the weight and size the file has it in.
   `!important` because this is deliberately overruling the markdown highlighter
   rather than competing with it: inside a conflict the parse is wrong by
   construction, and a heading it invents out of a `=======` underline would
   show one version bolder than the other for no reason in the document. */
.cm-conflict-raw, .cm-conflict-raw span {
  font-weight: normal !important; font-style: normal !important;
  font-size: 1em !important; text-decoration: none !important;
}

/* the selected comment's dot and its span — the prose half of "this one" */
.cm-lp-anchor.active { font-size: 13px; color: var(--accent); }
.cm-dossier-hl-active { background: var(--hl-active-bg); border-radius: 2px; }
#ed .cm-lp-h1 { font-size: 1.7em; line-height: 1.3; font-weight: 700; }
#ed .cm-lp-h2 { font-size: 1.42em; line-height: 1.32; font-weight: 700; }
#ed .cm-lp-h3 { font-size: 1.22em; line-height: 1.36; font-weight: 700; }
#ed .cm-lp-h4, #ed .cm-lp-h5, #ed .cm-lp-h6 { font-size: 1.08em; font-weight: 700; }

/* --- the same margin, beside the RENDERED document -------------------- */
/* The rendered view gets the cards the editor has, in the same place and the
   same shape: a comment is about a line, so it belongs beside that line, and
   reading a page must not mean unfolding a list at the bottom to find out
   what was said about it. Positions come from the `sup.anchor` elements in
   the rendered HTML (render.rs puts one at every Comment Anchor), measured in
   JS — the browser is the only thing that knows where a line wrapped. */
.vwrap { position: relative; padding-left: 250px; }
.vmargin { position: absolute; left: 0; top: 0; width: 234px; }

/* No room for a margin beside the prose: the cards become a list below the
   document in document order, and their inline `top` stops applying because a
   static box has no top. */
@media (max-width: 1100px) {
  #ed .lp-wrap.live { padding-left: 0; display: flex; flex-direction: column; }
  #ed .lp-wrap.live .lp-margin {
    position: static; width: auto; margin-top: 12px; order: 2;
  }
  .vwrap { padding-left: 0; display: flex; flex-direction: column; }
  .vmargin { position: static; width: auto; margin-top: 12px; order: 2; }
  .lp-card { position: static; width: auto; margin-bottom: 6px; }
}

/* --- a sync conflict, drawn as the two versions it is ------------------
   render.rs parks this block wherever a file carries git-style conflict
   markers. A `<span>` for the same reason `.dcard` is one: comrak puts a lone
   placeholder inside a `<p>`, so `display: block` is what makes it a block.
   Nothing here is interactive — resolving is still editing the file — so what
   the styling owes the reader is only that the two versions read as two, and
   that neither of them reads as the page's own prose. */
.conflict {
  display: block; margin: 1em 0; border: 1px solid var(--del); border-radius: 6px;
  background: var(--bg); overflow: hidden;
}
.conflict-head {
  display: block; padding: 7px 10px; background: var(--del-bg); color: var(--fg);
  font-size: 13px; line-height: 1.5;
}
.conflict-side, .conflict-base, .conflict-part {
  display: block; border-top: 1px solid var(--line); padding: 7px 10px;
}
/* The base is not a candidate — keeping it keeps neither edit — so it recedes
   rather than sitting level with the two that are. */
.conflict-base { background: var(--panel); color: var(--muted); }
.conflict-label {
  display: block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 3px;
}
/* The file's bytes, wrapped rather than scrolled: a phone is where these are
   least readable and horizontal scroll inside a paragraph is how a reader
   loses half a version without knowing it was there. */
.conflict-text {
  display: block; white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.5;
}

/* Nested numbered lists change style each level — 1. then a. then i., and
   round again — so a sub-list reads as one rather than as the same count
   carrying on. By depth among all lists, a bullet list included, which is how
   the editor's live preview counts it too (editor.js `listLabel`). The source
   stays digits: CommonMark has no `a.` marker. */
.content ol { list-style-type: decimal; }
.content :is(ol, ul) ol { list-style-type: lower-alpha; }
.content :is(ol, ul) :is(ol, ul) ol { list-style-type: lower-roman; }
.content :is(ol, ul) :is(ol, ul) :is(ol, ul) ol { list-style-type: decimal; }
.content :is(ol, ul) :is(ol, ul) :is(ol, ul) :is(ol, ul) ol { list-style-type: lower-alpha; }
.content :is(ol, ul) :is(ol, ul) :is(ol, ul) :is(ol, ul) :is(ol, ul) ol { list-style-type: lower-roman; }

/* Formulas and diagrams (rich.js). A display formula wider than the column
   scrolls inside its own box rather than pushing the page sideways, and so
   does a diagram — mermaid draws at its natural width and a wide flowchart is
   the ordinary case, not the exception. */
.math-display { display: block; margin: 1em 0; overflow-x: auto; overflow-y: hidden; }
.mermaid-diagram { margin: 1em 0; overflow-x: auto; text-align: center; }
.mermaid-diagram svg { max-width: 100%; height: auto; }
/* A flowchart whose words can be changed where they are (diagram-edit.js):
   the boxes and arrow labels say so under the pointer and under focus, and
   nothing else about the drawing changes. */
.mermaid-diagram.editable .dg-edit { cursor: text; }
.mermaid-diagram.editable .dg-edit:hover :is(rect, polygon, circle, ellipse, path.basic, .label-container) {
  stroke: var(--accent) !important; stroke-width: 2px !important;
}
.mermaid-diagram.editable g.edgeLabel.dg-edit:hover { outline: 1px dashed var(--accent); }
.mermaid-diagram.editable .dg-edit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The source of a formula or a diagram that did not draw, left as it was
   written and marked as having been tried: the tooltip says why. */
.rich-failed { border-left: 3px solid var(--orphan); }

/* A page, printed (export.js): the document and nothing of the app around
   it — no file tree, no bar, no comment cards, no folded panels. The frame is
   a grid pinned to the window with `#main` scrolling inside it, which on
   paper would be one sheet with the rest cut off, so it is undone here. A
   deck prints through its own rules (overlays.css), hence the `:not`. */
@media print {
  @page { size: A4; margin: 18mm 16mm; }
  body:not(.slides-open) { display: block; height: auto; }
  body:not(.slides-open) :is(#nav, #drawer, #search, #scrim, #toast, #commentFab, #cdialog, #findbar) { display: none !important; }
  body:not(.slides-open) #main { overflow: visible; padding: 0; }
  body:not(.slides-open) #main :is(.bar, .vmargin, details.panel, .conflict-note, #askrow, #answer) { display: none !important; }
  body:not(.slides-open) .vwrap { display: block; padding-left: 0; }
  body:not(.slides-open) .content { max-width: none; font-size: 11pt; line-height: 1.5; }
  body:not(.slides-open) .filehead h2 { margin-top: 0; }
  /* The header repeats the title above a page that opens with its own `#`,
     which on screen is a heading and a label and on paper is a typo. Tags and
     status are metadata about the file, not part of the document. */
  body:not(.slides-open) #main:has(.content > h1:first-child) .filehead h2,
  body:not(.slides-open) .filehead .tag { display: none; }
  /* Comments are the authors' conversation, not the document. A suggestion is
     different — it is text, pending — so it keeps its colours. */
  body:not(.slides-open) sup.anchor { display: none; }
  body:not(.slides-open) mark.hl { background: none; padding: 0; }
  body:not(.slides-open) :is(ins, del, .content mark) { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body:not(.slides-open) .content :is(pre, table, blockquote, .math-display, .mermaid-diagram, img) { break-inside: avoid; }
  body:not(.slides-open) .content :is(h1, h2, h3, h4) { break-after: avoid; }
  body:not(.slides-open) .content pre { white-space: pre-wrap; overflow: visible; }
}