/* OBSCURA OS: Write, the writing studio.

   One window: the top bar, then the binder, the view in the middle and the
   inspector on the right, and a status line across the foot. The editor is
   a page of the manuscript in Source Serif, or of the script in Courier,
   laid out as the printed page lays it out. On a phone the binder and the
   inspector are drawers over the page and every control is at least 44px.

   Every colour, size, corner and duration is a theme.css token, so Write
   follows the site's colourways, its dark mode and its motion setting. A
   label's colour is its hue alone (--wr-lh), drawn at the lightness of the
   site's own text colours so it reads on every paper. */

.wr {
  --wr-hue: 100;
  --wr-side-w: 264px;
  --wr-insp-w: 300px;
  --wr-size: 18px;
  --wr-script-font: "Courier Prime", "Courier New", Courier, "Liberation Mono", "Nimbus Mono PS", monospace;
  --wr-mark: hsl(var(--wr-hue) 38% 30%);
  --wr-lab-s: 55%;
  --wr-lab-l: 42%;
  height: 100vh; height: 100dvh;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
}
:root[data-theme="dark"] .wr { --wr-mark: hsl(var(--wr-hue) 35% 62%); --wr-lab-s: 60%; --wr-lab-l: 68%; }

body.wr-app { margin: 0; height: 100vh; height: 100dvh; overflow: hidden; background: var(--paper); color: var(--ink); font: var(--text-sm)/var(--leading-ui) var(--font-sans); }
.wr *, .wr *::before, .wr *::after { box-sizing: border-box; }
:where(.wr) :where(button, input, select, textarea) { font: inherit; color: inherit; }
.wr-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wr svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.wr-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wr-grow { flex: 1; }
.wr kbd { font: var(--text-2xs) var(--font-mono); padding: 1px var(--space-1); border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: var(--radius-sm); background: var(--paper-inset); white-space: nowrap; }
.wr code { font: var(--text-xs) var(--font-mono); }
.wr-hint, .wr-note-line { margin: var(--space-2) 0; font-size: var(--text-xs); line-height: 1.5; color: var(--ink-faint); }
.wr-hint-inline { color: var(--ink-faint); font-size: var(--text-xs); }
.wr-empty { margin: var(--space-3) 0; color: var(--ink-faint); font-size: var(--text-sm); line-height: 1.5; list-style: none; }
.wr-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wr :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.wr .wr-clip-box:focus { outline: none; border-color: var(--accent); }

/* ---------------------------------------------------------------- buttons */

.wr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 5px 12px; border: 1px solid var(--rule-strong); border-radius: var(--radius-md); background: var(--paper-raised); color: var(--ink); font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background-color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard); }
.wr-btn:hover:not(:disabled) { background: var(--paper-inset); }
.wr-btn:active:not(:disabled) { transform: translateY(1px); }
.wr-btn:disabled { opacity: .5; cursor: default; }
.wr-btn svg { width: 16px; height: 16px; }
.wr-btn-main { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.wr-btn-main:hover:not(:disabled) { background: var(--accent-strong); }
/* A main button that cannot be pressed is drawn as one: grey, not a paler blue that reads as live. */
.wr-btn-main:disabled, .wr-btn-danger:disabled { border-color: var(--rule); background: var(--paper-inset); color: var(--ink-faint); opacity: 1; filter: none; }
.wr-btn-danger { border-color: var(--danger); background: var(--danger); color: var(--on-danger, var(--on-accent)); }
.wr-btn-danger:hover:not(:disabled) { filter: brightness(.92); }
.wr-btn-sm { min-height: 28px; padding: 2px 10px; font-size: var(--text-xs); }
.wr-wide { width: 100%; }
.wr-icon-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink-soft); cursor: pointer; }
.wr-icon-btn:hover:not(:disabled) { background: var(--paper-inset); color: var(--ink); }
.wr-icon-btn:disabled { opacity: .4; cursor: default; }
.wr-link { min-height: 28px; padding: 0; border: 0; background: none; color: var(--accent-strong); font-weight: 600; cursor: pointer; text-align: left; }
.wr-link:hover { text-decoration: underline; }
.wr-tog { min-width: 30px; min-height: 30px; padding: 0 6px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink-soft); font: 600 var(--text-xs) var(--font-mono); cursor: pointer; }
.wr-tog[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }

/* Tick boxes at the size of the text beside them where there is a mouse;
   theme.css gives them 22px and a 44px row where there is a finger. */
@media (pointer: fine) {
  .wr :is(.wr-check, .wr-lab, .wr-radio) > input:is([type="checkbox"], [type="radio"]) { width: 16px; height: 16px; min-width: 16px; min-height: 16px; margin: 0; }
  .wr label:is(.wr-check, .wr-lab, .wr-radio) { min-height: 0; }
  .wr label.wr-check { min-height: 30px; align-items: center; padding-top: 0; }
  .wr label.wr-check-sm { min-height: 24px; }
}

/* ---------------------------------------------------------------- top bar */

.wr-top { display: flex; align-items: center; gap: var(--space-2); min-width: 0; padding: 6px 10px; background: var(--paper-raised); border-bottom: 1px solid var(--rule); }
.wr-top .os-app-home { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: var(--radius-md); }
.wr-top .os-app-home:hover { background: var(--paper-inset); }
.wr-brand { margin: 0 var(--space-1) 0 0; font-size: var(--text-md); font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }
.wr-projpick { position: relative; min-width: 0; }
.wr-project { display: inline-flex; align-items: center; gap: var(--space-1); max-width: 260px; min-height: 34px; padding: 5px 10px; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper); cursor: pointer; }
.wr-project:hover, .wr-project[aria-expanded="true"] { border-color: var(--rule-strong); background: var(--paper-inset); }
.wr-project-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.wr-project svg { width: 16px; height: 16px; color: var(--ink-faint); }
.wr-views { display: flex; align-items: center; gap: 2px; min-width: 0; margin-left: var(--space-2); padding: 3px; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper-inset); overflow-x: auto; scrollbar-width: none; }
.wr-views[hidden] { display: none; }
.wr-views button { min-height: 28px; padding: 2px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-soft); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; cursor: pointer; }
.wr-views button:hover { color: var(--ink); }
.wr-views button[aria-pressed="true"] { background: var(--paper-raised); color: var(--ink); box-shadow: 0 0 0 1px var(--rule); }
.wr-viewpick { display: none; }
.wr-state { margin: 0; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); color: var(--ink-faint); }
.wr-state[data-save-state="failed"] { color: var(--danger); font-weight: 600; }
.wr-top .wr-drawer-btn { display: none; }
.wr-menu { position: absolute; z-index: 60; top: calc(100% + var(--space-1)); left: 0; min-width: 260px; max-width: min(360px, calc(100vw - 20px)); padding: 6px; border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule), 0 14px 36px rgba(16, 16, 24, .18); animation: wr-pop var(--dur-3) var(--ease-standard); }
.wr-menu[hidden] { display: none; }
.wr-menu button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 34px; padding: var(--space-2) 11px; border: 0; border-radius: var(--radius-sm); background: transparent; text-align: left; cursor: pointer; }
.wr-menu button:hover:not(:disabled), .wr-menu button:focus-visible { background: var(--paper-inset); outline: none; }
.wr-menu button:disabled { color: var(--ink-faint); cursor: default; }
.wr-menu hr { margin: 6px var(--space-1); border: 0; border-top: 1px solid var(--rule); }
.wr-menu-key { border: 0; background: none; color: var(--ink-faint); }
.wr-node-menu { position: fixed; top: 0; left: 0; }
.wr-add-menu { left: auto; right: 0; }
.wr-helpwrap { position: relative; flex: none; }
@keyframes wr-pop { from { opacity: 0; transform: translateY(-4px); } }

/* ---------------------------------------------------------------- body */

.wr-body-grid { display: grid; grid-template-columns: var(--wr-side-w) 5px minmax(0, 1fr) var(--wr-insp-w); min-height: 0; }
.wr[data-inspector="false"] .wr-body-grid { grid-template-columns: var(--wr-side-w) 5px minmax(0, 1fr); }
.wr[data-inspector="false"] .wr-insp { display: none; }
.wr[data-side-open="false"] .wr-body-grid { grid-template-columns: minmax(0, 1fr) var(--wr-insp-w); }
.wr[data-side-open="false"][data-inspector="false"] .wr-body-grid { grid-template-columns: minmax(0, 1fr); }
.wr[data-side-open="false"] .wr-side, .wr[data-side-open="false"] .wr-split-side { display: none; }
.wr[data-open="false"] .wr-body-grid { grid-template-columns: minmax(0, 1fr); }
.wr[data-open="false"] .wr-side, .wr[data-open="false"] .wr-split-side, .wr[data-open="false"] .wr-insp { display: none; }

.wr-split { background: transparent; touch-action: none; }
.wr-split:hover, .wr-split:focus-visible { background: var(--accent-border); }
.wr-split-side { cursor: col-resize; border-left: 1px solid var(--rule); }
.wr-split[hidden] { display: none; }

/* ---------------------------------------------------------------- binder */

.wr-side { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--paper-raised); }
.wr-side-tabs { display: flex; align-items: center; gap: 2px; min-height: 40px; padding: 0 6px 0 10px; border-bottom: 1px solid var(--rule); }
.wr-side-tabs [role="tab"] { min-height: 39px; padding: 0 8px; border: 0; background: none; color: var(--ink-faint); font-size: var(--text-xs); font-weight: 600; cursor: pointer; }
.wr-side-tabs [role="tab"][aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -2px var(--wr-mark); }
.wr-side-x { display: none; }
.wr-side-sec { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.wr-side-sec[hidden] { display: none; }
.wr-side-head { position: relative; display: flex; align-items: center; gap: 4px; padding: 8px 8px 6px 10px; }
.wr-side-head .wr-icon-btn { width: 30px; height: 30px; }
.wr-tree { flex: 1; min-height: 0; margin: 0; padding: 2px 0 72px; overflow: auto; list-style: none; }
.wr-node { position: relative; display: flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 10px 0 calc(6px + var(--lvl) * 16px); font-size: var(--text-sm); white-space: nowrap; cursor: pointer; user-select: none; }
.wr-node:hover { background: var(--paper-inset); }
.wr-node.is-sel { background: var(--accent-soft); }
.wr-node.is-cur .wr-node-name { font-weight: 650; }
.wr-node.is-root { margin-top: 10px; color: var(--ink-soft); font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; }
.wr-node.is-root:first-child { margin-top: 0; }
.wr-node.is-out .wr-node-name { color: var(--ink-faint); text-decoration: line-through; text-decoration-color: var(--rule-strong); }
.wr-node:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.wr-twisty { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 16px; height: 16px; color: var(--ink-faint); }
.wr-twisty svg { width: 14px; height: 14px; }
.wr-node-ico { display: inline-flex; color: var(--ink-faint); }
.wr-node-ico svg { width: 16px; height: 16px; }
.wr-node-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wr-node-lab { flex: none; width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--wr-lh, 214) var(--wr-lab-s) var(--wr-lab-l)); }
.wr-node-n { flex: none; min-width: 3ch; color: var(--ink-faint); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; text-align: right; }
.wr-node.drop-before { box-shadow: inset 0 2px var(--accent); }
.wr-node.drop-after { box-shadow: inset 0 -2px var(--accent); }
.wr-node.drop-in { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.wr-node.is-drag { opacity: .5; }
.wr-rename { flex: 1; min-width: 0; min-height: 24px; padding: 0 4px; border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--paper); }

.wr-find { display: grid; gap: 6px; padding: 10px; border-bottom: 1px solid var(--rule); }
.wr-find input, .wr-find select { min-height: 32px; padding: 4px 8px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--paper); }
.wr-find-opts { display: flex; align-items: center; gap: 4px; }
.wr-find-opts select { flex: 1; min-width: 0; }
.wr-find .wr-btn { justify-self: start; }
.wr-find-out { flex: 1; min-height: 0; margin: 0; padding: 4px 0 24px; overflow: auto; list-style: none; }
.wr-find-out ul { margin: 0; padding: 0; list-style: none; }
.wr-find-doc { display: flex; justify-content: space-between; margin: 8px 10px 2px; font-size: var(--text-xs); font-weight: 700; color: var(--ink-soft); }
.wr-find-hit { display: block; width: 100%; min-height: 28px; padding: 4px 10px 4px 18px; border: 0; background: none; font-size: var(--text-xs); line-height: 1.45; text-align: left; color: var(--ink-soft); cursor: pointer; overflow-wrap: anywhere; }
.wr-find-hit:hover { background: var(--paper-inset); }
.wr-find-hit mark { background: var(--warn-soft); color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------- main */

.wr-main { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; background: var(--paper); }
.wr-boot { margin: var(--space-6); color: var(--ink-faint); }
.wr-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.wr-view[hidden] { display: none; }
#wrViewOther { overflow-y: auto; padding: var(--space-5) max(var(--space-5), calc((100% - 1120px) / 2)) var(--space-7); }

/* The start screen. */
.wr-start { height: 100%; overflow-y: auto; padding: var(--space-6) max(var(--space-5), calc((100% - 1040px) / 2)) var(--space-7); animation: wr-arrive var(--dur-4) var(--ease-standard); }
.wr-start[hidden] { display: none; }
@keyframes wr-arrive { from { opacity: 0; transform: translateY(6px); } }
.wr-h { margin: 0 0 var(--space-2); font: 650 var(--text-2xl)/1.15 var(--font-headline); letter-spacing: -.01em; }
.wr-h3 { margin: var(--space-6) 0 var(--space-2); font-size: var(--text-md); }
.wr-h4 { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-sm); }
.wr-lead { max-width: var(--measure); margin: 0 0 var(--space-5); font-size: var(--text-md); line-height: var(--leading-prose); color: var(--ink-soft); }
.wr-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-3); }
.wr-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule); }
.wr-card h3 { margin: 0; font-size: var(--text-md); }
.wr-card p { margin: 0 0 var(--space-2); color: var(--ink-soft); line-height: 1.5; }
.wr-card > .wr-btn, .wr-card-row { margin-top: auto; }
.wr-card-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.wr-recent { margin: 0; padding: 0; list-style: none; max-width: 760px; }
.wr-recent li { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--rule); }
.wr-recent li[hidden] { display: none; }
.wr-recent-open { display: flex; flex: 1; min-width: 0; align-items: center; gap: 10px; min-height: 44px; padding: 6px 8px; border: 0; background: none; text-align: left; cursor: pointer; }
.wr-recent-open:hover { background: var(--paper-inset); }
.wr-recent-open svg { color: var(--ink-faint); }
.wr-recent-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-recent-meta { margin-left: auto; padding-left: var(--space-3); font-size: var(--text-xs); color: var(--ink-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }

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

.wr-toolbar { display: flex; align-items: center; gap: var(--space-2); min-height: 42px; padding: 4px 10px; overflow-x: auto; scrollbar-width: thin; background: var(--paper-raised); border-bottom: 1px solid var(--rule); }
.wr-tb-group { display: flex; align-items: center; gap: 2px; padding-right: var(--space-2); border-right: 1px solid var(--rule); }
.wr-tb-group:last-child { border-right: 0; padding-right: 0; }
.wr-tb-select { min-height: 30px; max-width: 160px; padding: 2px 6px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); font-size: var(--text-xs); }
.wr-tb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 30px; min-height: 30px; padding: 0 6px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-soft); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; cursor: pointer; }
.wr-tb-btn:hover:not(:disabled) { background: var(--paper-inset); color: var(--ink); }
.wr-tb-btn:disabled { opacity: .4; cursor: default; }
.wr-tb-btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-strong); }
.wr-tb-btn svg { width: 17px; height: 17px; }
.wr-tb-glyph { width: 30px; font: 600 var(--text-sm) var(--font-display); }

/* ---------------------------------------------------------------- panes and the page */

.wr-panes { display: grid; grid-template-columns: minmax(0, 1fr); flex: 1; min-height: 0; }
.wr-panes.is-split { grid-template-columns: minmax(0, 1fr) 5px minmax(0, 1fr); }
.wr-split-pane { border-left: 1px solid var(--rule); }
.wr-pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.wr-pane[hidden] { display: none; }
.wr-pane-head { display: flex; align-items: center; gap: var(--space-2); min-height: 30px; padding: 2px 10px 2px 16px; font-size: var(--text-2xs); color: var(--ink-faint); }
.wr-crumbs { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-crumb-sep { padding: 0 6px; color: var(--rule-strong); }
.wr-pane-b .wr-pane-head { background: var(--paper-inset); }
.wr-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-4) var(--space-5) var(--space-8); }
.wr[data-typewriter="true"] .wr-scroll[data-scroll] { padding-bottom: 50vh; }

.wr-paper { max-width: 44em; margin: 0 auto; padding: var(--space-7) clamp(var(--space-4), 7%, var(--space-8)) var(--space-8); border-radius: var(--radius-sm); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule); font: var(--wr-size)/1.75 var(--font-display); font-size: var(--wr-size); color: var(--ink); }
.wr-panes.is-split .wr-paper { padding-left: clamp(var(--space-3), 5%, var(--space-6)); padding-right: clamp(var(--space-3), 5%, var(--space-6)); }
.wr-doc-title { margin: 0 0 1.4em; font: 600 var(--text-xs)/1.3 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.wr-edit { min-height: 40vh; outline: none; overflow-wrap: break-word; caret-color: var(--accent); }
.wr-edit[contenteditable="false"] { min-height: 0; }
.wr-edit:focus-visible { outline: none; }
.wr-edit > p { margin: 0; text-indent: 1.6em; }
.wr-edit > p:first-child, .wr-edit > p.wr-break + p, .wr-edit > p.wr-head + p { text-indent: 0; }
.wr-edit > p.wr-noindent { text-indent: 0; }
.wr-edit > p.wr-quote { margin: .6em 2em; text-indent: 0; }
.wr-edit > p.wr-quote + p.wr-quote { margin-top: 0; }
.wr-edit > p.wr-centre { text-align: center; text-indent: 0; }
.wr-edit > p.wr-head { margin: 1.4em 0 .4em; text-indent: 0; font-weight: 650; }
.wr-edit > p.wr-break { margin: .8em 0; text-align: center; text-indent: 0; color: var(--ink-faint); letter-spacing: .4em; }
.wr-edit .wr-note { padding: 0 2px; border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--ink); font-family: var(--font-sans); font-size: .82em; }
.wr-edit .wr-fn { padding: 0 3px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--ink-soft); font-family: var(--font-sans); font-size: .78em; vertical-align: .2em; }
.wr-edit .wr-fn::before { content: "fn "; color: var(--accent-strong); font-weight: 700; }
.wr-edit .wr-cm { background: color-mix(in srgb, var(--good) 16%, transparent); box-shadow: inset 0 -2px color-mix(in srgb, var(--good) 55%, transparent); cursor: pointer; }
.wr[data-focus="true"] .wr-pane:not(.wr-pane-b) .wr-edit > p { opacity: .32; transition: opacity var(--dur-2) var(--ease-standard); }
.wr[data-focus="true"] .wr-pane:not(.wr-pane-b) .wr-edit > p.is-here { opacity: 1; }
.wr-clip-src { margin: 0 0 1em; font: var(--text-xs)/1.4 var(--font-sans); color: var(--ink-faint); overflow-wrap: anywhere; }
.wr-media { display: grid; justify-items: center; gap: var(--space-3); }
.wr-media img { max-width: 100%; max-height: 70vh; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper-raised); }
.wr-media-cap { margin: 0; color: var(--ink-soft); font-size: var(--text-sm); text-align: center; }
.wr-pdf { flex: 1; display: flex; min-height: 0; }
.wr-pdf-frame { flex: 1; border: 0; background: var(--paper-inset); }
.wr-reading .wr-scriv + .wr-scriv { margin-top: 2em; padding-top: 1.4em; border-top: 1px dashed var(--rule-strong); }
.wr-scriv-h { display: block; margin: 0 0 .6em; padding: 0; border: 0; background: none; font: 600 var(--text-xs)/1.3 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-strong); cursor: pointer; }
.wr-scriv-h:hover { text-decoration: underline; }

/* The screenplay page: the printed page's geometry in characters, one ch
   being a tenth of an inch at Courier 12 point. */
.wr-paper.wr-script { max-width: calc(60ch + 2 * clamp(var(--space-4), 6%, var(--space-8))); font: 1em/1.25 var(--wr-script-font); font-size: calc(var(--wr-size) * .9); }
.wr-script .wr-edit > p { position: relative; margin: 1.25em 0 0; max-width: 60ch; text-indent: 0; white-space: pre-wrap; }
.wr-script .wr-edit > p:first-child { margin-top: 0; }
.wr-script .wr-edit > p[data-t="scene"] { text-transform: uppercase; }
.wr-script .wr-edit > p { --wr-in: 0ch; }
.wr-script .wr-edit > p[data-t="character"] { --wr-in: 22ch; margin-left: var(--wr-in); max-width: 33ch; text-transform: uppercase; }
.wr-script .wr-edit > p[data-t="paren"] { --wr-in: 16ch; margin: 0 0 0 var(--wr-in); max-width: 24ch; }
.wr-script .wr-edit > p[data-t="dialogue"] { --wr-in: 10ch; margin: 0 0 0 var(--wr-in); max-width: 35ch; }
.wr-script .wr-edit > p[data-t="lyric"] { --wr-in: 10ch; margin: 0 0 0 var(--wr-in); max-width: 35ch; font-style: italic; }
.wr-script .wr-edit > p[data-t="transition"] { --wr-in: 40ch; margin-left: var(--wr-in); max-width: 20ch; text-align: right; text-transform: uppercase; }
.wr-script .wr-edit > p[data-t="centered"] { text-align: center; }
.wr-script .wr-edit > p[data-t="section"], .wr-script .wr-edit > p[data-t="synopsis"], .wr-script .wr-edit > p[data-t="note"] { padding: 2px 6px; border-left: 2px solid var(--rule-strong); color: var(--ink-faint); font-family: var(--font-sans); font-size: .85em; }
.wr-script .wr-edit > p[data-t="pagebreak"] { border-top: 1px solid var(--rule-strong); min-height: 1em; }
.wr-script .wr-edit > p[data-t="character"][data-dual="1"]::before { content: "dual"; position: absolute; left: -6ch; top: .15em; font: 600 var(--text-2xs) var(--font-sans); color: var(--accent-strong); text-transform: uppercase; letter-spacing: .06em; }
.wr-script .wr-edit > p[data-suggest]::after { content: attr(data-suggest); color: var(--ink-faint); }
.wr-script .wr-edit > p[data-scene-no]::after { content: attr(data-scene-no); position: absolute; left: -5ch; top: 0; width: 4ch; text-align: right; color: var(--ink-faint); font-weight: 400; }
/* Where the printed page turns: a dashed rule across the whole page width,
   whatever the element's indent, with the new page's number at its end. */
.wr-script .wr-edit > p[data-page] { padding-top: 2em; margin-top: 1.25em; }
.wr-script .wr-edit > p[data-page]::before { content: "Page " attr(data-page); position: absolute; top: .3em; left: calc(-1 * var(--wr-in, 0ch)); width: 60ch; padding-top: .15em; border-top: 1px dashed var(--rule-strong); font: var(--text-2xs)/1.4 var(--font-sans); color: var(--ink-faint); text-align: right; text-transform: none; font-weight: 400; font-style: normal; letter-spacing: 0; }

/* ---------------------------------------------------------------- inspector */

.wr-insp { display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; background: var(--paper-raised); border-left: 1px solid var(--rule); }
.wr-insp-tabs { display: flex; align-items: center; gap: 2px; min-height: 40px; padding: 0 4px 0 8px; border-bottom: 1px solid var(--rule); }
.wr-insp-tabs [role="tab"] { min-height: 39px; padding: 0 6px; border: 0; background: none; color: var(--ink-faint); font-size: var(--text-xs); font-weight: 600; cursor: pointer; white-space: nowrap; }
.wr-insp-tabs [role="tab"][aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -2px var(--wr-mark); }
.wr-insp-x { width: 28px; height: 28px; }
.wr-insp-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px 32px; display: flex; flex-direction: column; gap: 12px; }
.wr-ifield { display: grid; gap: 4px; min-width: 0; }
.wr-ilabel, .wr-field > span:first-child { font-size: var(--text-2xs); font-weight: 700; letter-spacing: .04em; color: var(--ink-soft); }
.wr-ifield input, .wr-ifield select, .wr-ifield textarea, .wr-field input, .wr-field select, .wr-field textarea { width: 100%; min-height: 32px; padding: 5px 8px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--paper); }
.wr-ifield textarea, .wr-field textarea { resize: vertical; line-height: 1.5; }
.wr-irow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.wr-iout { min-height: 32px; display: flex; align-items: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.wr-meter { display: block; height: 6px; margin: 13px 0; border-radius: var(--radius-pill); background: var(--paper-inset); overflow: hidden; box-shadow: inset 0 0 0 1px var(--rule); }
.wr-meter > span { display: block; height: 100%; background: var(--good); }
.wr-meter-lg { height: 8px; margin: var(--space-2) 0; }
.wr-meter-sm { height: 4px; min-width: 56px; margin: 4px 0 0; }
.wr-labs { display: flex; flex-wrap: wrap; gap: 6px; }
.wr-lab { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 8px 2px 6px; border: 1px solid var(--rule); border-radius: var(--radius-sm); font-size: var(--text-xs); cursor: pointer; }
.wr-lab:has(input:checked) { border-color: hsl(var(--wr-lh, 214) var(--wr-lab-s) var(--wr-lab-l)); background: hsl(var(--wr-lh, 214) var(--wr-lab-s) var(--wr-lab-l) / 0.15); }
.wr-lab input { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); }
.wr-lab-dot { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: hsl(var(--wr-lh, 214) var(--wr-lab-s) var(--wr-lab-l)); }
.wr-check { display: flex; align-items: flex-start; gap: 8px; min-height: 32px; padding-top: 6px; font-size: var(--text-sm); line-height: 1.35; cursor: pointer; }
.wr-check input { flex: none; width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--accent); }
.wr-check-sm { min-height: 26px; padding: 3px 0 3px calc(var(--lvl, 0) * 16px); font-size: var(--text-xs); }
.wr-found { color: var(--ink-faint); font-style: normal; }
.wr-ibible { display: grid; }
.wr-imeta { margin: auto 0 0; padding-top: var(--space-2); font-size: var(--text-2xs); color: var(--ink-faint); }
.wr-grow-field { flex: 1; display: grid; grid-template-rows: auto 1fr; gap: 4px; }
.wr-grow-field textarea { min-height: 300px; height: 100%; padding: 8px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--paper); line-height: 1.55; resize: none; }
.wr-comments, .wr-snaps { margin: 0; padding: 0; list-style: none; }
.wr-comment { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.wr-comment-q { display: block; width: 100%; padding: 0; border: 0; background: none; color: var(--ink-faint); font-size: var(--text-xs); font-style: italic; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.wr-comment-t { margin: 4px 0; line-height: 1.45; overflow-wrap: anywhere; }
.wr-comment-m { margin: 0; font-size: var(--text-2xs); color: var(--ink-faint); }
.wr-comment-a, .wr-snap-a { display: flex; gap: var(--space-3); }
.wr-snaps li { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.wr-snap-name { font-weight: 600; overflow-wrap: anywhere; }
.wr-snap-meta { font-size: var(--text-xs); color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- views */

.wr-vhead { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.wr-vhead-sub { margin: var(--space-6) 0 var(--space-2); }
.wr-vhead-sub .wr-h3 { margin: 0; }
.wr-vhead select { min-height: 30px; padding: 2px 6px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--paper-raised); font-size: var(--text-xs); }
.wr-vh { margin: 0; font: 650 var(--text-xl)/1.2 var(--font-headline); }
.wr-vsub { margin: var(--space-1) 0 0; max-width: 72ch; color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.5; }

/* The corkboard: index cards ruled like the real ones. */
.wr-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
.wr-ic { position: relative; display: flex; flex-direction: column; min-height: 168px; border: 1px solid var(--rule-strong); border-top: 4px solid hsl(var(--wr-lh, 214) var(--wr-lab-s) var(--wr-lab-l)); border-radius: var(--radius-sm); background: var(--paper-raised); cursor: grab; }
.wr-ic:not([style*="--wr-lh"]) { border-top-color: var(--rule-strong); }
.wr-ic.is-sel { box-shadow: 0 0 0 2px var(--accent-border); }
.wr-ic.is-out { opacity: .6; }
.wr-ic.is-drag { opacity: .4; }
.wr-ic.drop-before::before, .wr-ic.drop-after::after { content: ""; position: absolute; top: 0; bottom: 0; width: 3px; background: var(--accent); border-radius: var(--radius-sm); }
.wr-ic.drop-before::before { left: calc(-1 * var(--space-2) - 2px); }
.wr-ic.drop-after::after { right: calc(-1 * var(--space-2) - 2px); }
.wr-ic-h { display: flex; align-items: center; gap: 6px; padding: 6px 8px 4px 10px; border-bottom: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); }
.wr-ic-n { flex: none; min-width: 2ch; color: var(--ink-faint); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; }
.wr-ic-title { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 28px; padding: 0; border: 0; background: none; font-weight: 650; text-align: left; cursor: pointer; }
.wr-ic-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-ic-title svg { width: 15px; height: 15px; color: var(--ink-faint); }
.wr-ic-title:hover span { text-decoration: underline; }
.wr-ic-syn { flex: 1; width: 100%; min-height: 84px; padding: 4px 10px; border: 0; background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.5em - 1px), color-mix(in srgb, var(--accent) 16%, transparent) calc(1.5em - 1px), color-mix(in srgb, var(--accent) 16%, transparent) 1.5em); background-position: 0 4px; font: var(--text-sm)/1.5em var(--font-display); color: var(--ink); resize: none; cursor: text; }
.wr-ic-syn:focus { outline: none; background-color: var(--paper); }
.wr-ic-f { display: flex; align-items: center; gap: 8px; padding: 4px 10px 6px; font-size: var(--text-2xs); color: var(--ink-faint); }
.wr-ic-lab { color: hsl(var(--wr-lh, 214) var(--wr-lab-s) var(--wr-lab-l)); font-weight: 600; }

/* Charts: drawn to the width they are given, with their own fills. */
.wr svg.wr-chart { width: 100%; height: auto; stroke: none; fill: none; }
.wr svg.wr-cal-k { width: 12px; height: 12px; }

/* Tables. */
.wr-table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper-raised); }
.wr-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.wr-table th, .wr-table td { padding: 6px 10px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.wr-table thead th { position: sticky; top: 0; z-index: 1; background: var(--paper-inset); font-size: var(--text-2xs); font-weight: 700; letter-spacing: .04em; color: var(--ink-soft); white-space: nowrap; }
.wr-table th.wr-num, .wr-table td.wr-num { text-align: right; }
.wr-table tfoot th, .wr-table tfoot td { border-bottom: 0; font-weight: 650; background: var(--paper-inset); }
.wr-table tr.is-cur td { background: var(--accent-soft); }
.wr-table tr.is-folder td { font-weight: 600; }
.wr-table tr.is-out td { color: var(--ink-faint); }
.wr-table select { min-height: 28px; padding: 1px 4px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); font-size: var(--text-xs); }
.wr-table-sm { font-size: var(--text-xs); }
.wr-table-sm th, .wr-table-sm td { padding: 4px 8px; }
.wr-table-sm tbody th { font-weight: 500; color: var(--ink-soft); }
.wr-hint-cell { color: var(--ink-faint); font-size: var(--text-2xs); }
.wr-o-title { padding-left: calc(8px + var(--lvl) * 16px) !important; min-width: 140px; }
.wr-o-open { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--ink); font-weight: inherit; text-align: left; cursor: pointer; }
.wr-o-open svg { width: 15px; height: 15px; color: var(--ink-faint); }
.wr-o-open:hover span, .wr-o-open:hover { text-decoration: underline; }
.wr-o-syn { min-width: 170px; max-width: 360px; color: var(--ink-soft); }
.wr-outline th, .wr-outline td { padding-left: 8px; padding-right: 8px; }
.wr-o-lab { display: inline-flex; align-items: center; gap: 5px; margin-right: 8px; font-size: var(--text-xs); white-space: nowrap; }
.wr-o-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.wr-plain-list { margin: 0; padding-left: 1.2em; line-height: 1.8; }

/* The timeline. */
.wr-tl-wrap { margin-bottom: var(--space-4); padding: var(--space-3); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper-raised); overflow-x: auto; }
.wr-tl { display: block; width: 100%; min-width: 560px; height: auto; }
.wr-tl-axis { stroke: var(--rule-strong); stroke-width: 1.5; }
.wr-tl-pt line { stroke: hsl(var(--wr-lh, 214) var(--wr-lab-s) var(--wr-lab-l)); stroke-width: 1.5; }
.wr-tl-pt circle { fill: var(--paper-raised); stroke: hsl(var(--wr-lh, 214) var(--wr-lab-s) var(--wr-lab-l)); stroke-width: 1.5; }
.wr-tl-pt:not([style*="--wr-lh"]) circle, .wr-tl-pt:not([style*="--wr-lh"]) line { stroke: var(--ink-faint); }
.wr-tl-pt text { fill: var(--ink); font: 600 .62rem var(--font-sans); }
.wr-tl-end { fill: var(--ink-faint); font: .7rem var(--font-sans); }

/* The bible. */
.wr-bible { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.wr-bible-list { display: grid; gap: var(--space-3); }
.wr-seg { display: flex; padding: 3px; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper-inset); }
.wr-seg button { flex: 1; min-height: 28px; padding: 0 6px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink-soft); font-size: var(--text-xs); font-weight: 600; cursor: pointer; }
.wr-seg button[aria-pressed="true"] { background: var(--paper-raised); color: var(--ink); box-shadow: 0 0 0 1px var(--rule); }
.wr-blist { margin: 0; padding: 0; list-style: none; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper-raised); }
.wr-blist li + li { border-top: 1px solid var(--rule); }
.wr-blist .wr-empty { margin: 0; padding: var(--space-3); }
.wr-bitem { display: flex; align-items: baseline; gap: var(--space-2); width: 100%; min-height: 38px; padding: 6px 10px; border: 0; background: none; text-align: left; cursor: pointer; }
.wr-bitem:hover { background: var(--paper-inset); }
.wr-bitem.is-sel { background: var(--accent-soft); }
.wr-bname { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-bkind { font-size: var(--text-2xs); color: var(--ink-faint); }
.wr-bible-add { display: flex; flex-wrap: wrap; gap: 6px; }
.wr-bible-card { display: grid; gap: var(--space-4); padding: var(--space-4) var(--space-5); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper-raised); }
.wr-bcard-head { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--space-4); }
.wr-bcard-pic { display: grid; place-items: center; aspect-ratio: 3 / 4; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper-inset); overflow: hidden; }
.wr-bcard-pic img { width: 100%; height: 100%; object-fit: cover; }
.wr-bcard-none { font-size: var(--text-xs); color: var(--ink-faint); }
.wr-bcard-main { display: grid; gap: 10px; align-content: start; }
.wr-bcard-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.wr-bfields { display: grid; gap: 6px; }
.wr-bfield { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.wr-bfield input { min-height: 32px; padding: 4px 8px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); }
.wr-bk { font-weight: 600; font-size: var(--text-xs); color: var(--ink-soft); }
.wr-bfields .wr-link { justify-self: start; }

/* Targets. */
.wr-panels { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }
.wr-panel { padding: var(--space-3) var(--space-4); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper-raised); }
.wr-panel-h { margin: 0; font-size: var(--text-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.wr-big { margin: var(--space-2) 0 0; font: 650 var(--text-2xl)/1.1 var(--font-headline); font-variant-numeric: tabular-nums; }
.wr-big-u { font: 500 var(--text-sm) var(--font-sans); color: var(--ink-soft); }
.wr-panel-n { margin: var(--space-1) 0 0; font-size: var(--text-xs); color: var(--ink-faint); line-height: 1.45; }
.wr-targets-form { margin: var(--space-3) 0 0; }
.wr-targets-form summary { min-height: 32px; display: inline-flex; align-items: center; color: var(--accent-strong); font-weight: 600; cursor: pointer; }
.wr-tform { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--space-3); max-width: 760px; padding: var(--space-2) 0; }
.wr-tform input { min-height: 32px; padding: 4px 8px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--paper-raised); }
.wr-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.wr-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.wr-sec { min-width: 0; }
.wr-bars { display: block; width: 100%; height: auto; }
.wr-bar { fill: color-mix(in srgb, var(--accent) 55%, transparent); }
.wr-bar.is-today { fill: var(--accent); }
.wr-goal { stroke: var(--good); stroke-width: 1.5; stroke-dasharray: 4 3; }
.wr-axis-t { fill: var(--ink-faint); font: .7rem var(--font-sans); }
.wr-calendar { display: block; width: 100%; max-width: 440px; height: auto; }
.wr-cal { fill: var(--paper-inset); stroke: none; }
.wr-cal.l1 { fill: color-mix(in srgb, var(--good) 25%, var(--paper-raised)); }
.wr-cal.l2 { fill: color-mix(in srgb, var(--good) 50%, var(--paper-raised)); }
.wr-cal.l3 { fill: color-mix(in srgb, var(--good) 75%, var(--paper-raised)); }
.wr-cal.l4 { fill: var(--good); }
.wr-cal-key { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: var(--space-2) 0 0; font-size: var(--text-2xs); color: var(--ink-faint); }
.wr-cal-k { width: 12px; height: 12px; }

.wr-chap td { vertical-align: middle; }
.wr-chap .wr-o-open { font-weight: 600; }
.wr-chap-part { display: block; font-size: var(--text-2xs); color: var(--ink-faint); }
.wr-ctarget { width: 9ch; min-height: 30px; padding: 2px 6px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); text-align: right; font-variant-numeric: tabular-nums; }
.wr-chap-prog { min-width: 150px; white-space: nowrap; }
.wr-chap-prog .wr-meter { display: inline-block; vertical-align: middle; width: calc(100% - 7ch); max-width: 220px; margin: 0 8px 0 0; }
.wr-chap-pc { font-size: var(--text-xs); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.wr-chap-pc.is-met { color: var(--good); font-weight: 600; }
.wr-long { margin: 0; padding: 0; list-style: none; }
.wr-long li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--space-3); padding: 8px 0; border-bottom: 1px solid var(--rule); }
.wr-long-n { font-size: var(--text-xs); font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wr-long-t { font: var(--text-sm)/1.5 var(--font-display); color: var(--ink-soft); overflow-wrap: anywhere; }
.wr-long .wr-link { grid-column: 2; justify-self: start; min-width: 44px; font-size: var(--text-xs); }

/* Submissions. */
.wr-subs td { vertical-align: middle; }
.wr-sub-who { min-width: 180px; font-weight: 600; }
.wr-sub-on { display: block; font-size: var(--text-2xs); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.wr-subs tr.is-due td { background: var(--warn-soft); }
.wr-due { margin-left: 6px; font-size: var(--text-2xs); font-weight: 700; color: var(--warn); }

/* ---------------------------------------------------------------- status */

.wr-status { display: flex; align-items: center; gap: 16px; min-height: 26px; padding: 0 12px; overflow: hidden; background: var(--paper-raised); border-top: 1px solid var(--rule); color: var(--ink-soft); font-size: var(--text-2xs); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wr-status span:empty { display: none; }
.wr-status .is-met { color: var(--good); font-weight: 600; }
/* The privacy badge sits at the right of the status bar, as in Case and the
   PDF editor, rather than over the binder. */
body.wr-app #ppBadge { left: auto; right: var(--space-2); bottom: 1px; min-height: 24px; padding: 1px var(--space-2); font-size: var(--text-2xs); box-shadow: none; }
.wr[data-open="true"] .wr-status { padding-right: 132px; }

/* ---------------------------------------------------------------- reading aloud and sprints */

/* The sentence being read: a highlight the browser paints over the text,
   not part of it, or a mark on the paragraph where there is no such API. */
::highlight(wr-reading) { background-color: var(--accent-soft); color: var(--ink); }
.wr-edit > .is-reading { background: var(--accent-soft); }
.wr-reader { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: 6px 10px; border-top: 1px solid var(--rule); background: var(--paper-raised); }
.wr-reader .wr-btn svg { width: 16px; height: 16px; }
.wr-reader-at { font-size: var(--text-xs); color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The sprint's clock, in the corner of the page. */
.wr-sprint { position: absolute; z-index: 6; right: var(--space-4); bottom: var(--space-4); display: flex; align-items: center; gap: var(--space-3); max-width: calc(100% - 2 * var(--space-4)); padding: 6px 6px 6px 12px; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper-raised); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wr-sprint[hidden] { display: none; }
.wr-sprint-t { font: 650 var(--text-md)/1 var(--font-mono); }
.wr-sprint-w { font-size: var(--text-xs); color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; }
.wr-sprint-m { width: 72px; margin: 0; }
.wr-sprint-m[hidden] { display: none; }

/* ---------------------------------------------------------------- composition */

.wr[data-compose="true"] .wr-top, .wr[data-compose="true"] .wr-status, .wr[data-compose="true"] .wr-side, .wr[data-compose="true"] .wr-split-side, .wr[data-compose="true"] .wr-insp, .wr[data-compose="true"] .wr-pane-head { display: none; }
.wr[data-compose="true"] { grid-template-rows: minmax(0, 1fr); }
.wr[data-compose="true"] .wr-body-grid { grid-template-columns: minmax(0, 1fr); }
.wr[data-compose="true"] .wr-toolbar { position: absolute; z-index: 5; top: 0; right: 0; left: 0; opacity: 0; transition: opacity var(--dur-3) var(--ease-standard); }
.wr[data-compose="true"] .wr-toolbar:hover, .wr[data-compose="true"] .wr-toolbar:focus-within { opacity: 1; }
.wr[data-compose="true"] .wr-main { background: var(--paper-inset); }
.wr[data-compose="true"] .wr-scroll { padding-top: var(--space-8); }
.wr[data-compose="true"] .wr-paper { box-shadow: none; }

/* ---------------------------------------------------------------- dialogs */

.wr-dialog { width: min(500px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--paper-raised); color: var(--ink); box-shadow: 0 0 0 1px var(--rule), 0 24px 60px rgba(0, 0, 0, .3); }
.wr-dialog-wide { width: min(940px, calc(100vw - 24px)); }
.wr-dialog::backdrop { background: rgba(10, 10, 16, .4); }
.wr-dlg { display: grid; gap: var(--space-3); padding: var(--space-5); }
.wr-dlg-h { margin: 0; font-size: var(--text-lg); overflow-wrap: anywhere; }
.wr-dlg-body p { margin: 0 0 var(--space-2); color: var(--ink-soft); line-height: 1.5; }
.wr-dlg-fields { display: grid; gap: var(--space-3); }
.wr-dlg-err { margin: 0; color: var(--danger); font-size: var(--text-xs); }
.wr-dlg-err:empty { display: none; }
.wr-dlg-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.wr-field { display: grid; gap: 4px; min-width: 0; }
.wr-fs { margin: 0 0 var(--space-3); padding: 0; border: 0; display: grid; gap: var(--space-2); min-width: 0; }
.wr-fs legend { margin-bottom: var(--space-2); padding: 0; font-size: var(--text-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.wr-radio { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--rule); border-radius: var(--radius-sm); cursor: pointer; }
.wr-radio:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.wr-radio input { margin: 3px 0 0; accent-color: var(--accent); }
.wr-radio span { display: grid; gap: 2px; font-size: var(--text-xs); color: var(--ink-soft); line-height: 1.45; }
.wr-radio b { font-size: var(--text-sm); color: var(--ink); }
.wr-compile { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-5); max-height: min(62vh, 640px); overflow: auto; padding-right: 2px; }
.wr-fmts { display: flex; flex-wrap: wrap; gap: 4px var(--space-4); }
.wr-ctabs { margin-bottom: var(--space-3); }
.wr-seg [role="tab"][aria-selected="true"] { background: var(--paper-raised); color: var(--ink); box-shadow: 0 0 0 1px var(--rule); }
.wr-pv-bar { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.wr-pv-bar .wr-hint { margin: 0; }
.wr-pv-bar select { min-height: 30px; padding: 2px 6px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--paper); font-size: var(--text-xs); }
/* The preview's pages: the PDF's own geometry, in points, drawn to the
   width of the column or at the size it prints. */
.wr-pv { display: grid; gap: var(--space-3); justify-items: center; max-height: 46vh; overflow: auto; padding: var(--space-3); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper-inset); }
.wr svg.wr-pv-page { width: 100%; height: auto; stroke: none; fill: var(--ink); box-shadow: 0 0 0 1px var(--rule); }
.wr-pv[data-zoom="full"] { justify-items: start; }
.wr-pv[data-zoom="full"] svg.wr-pv-page { width: calc(var(--pv-w) * 4px / 3); max-width: none; }
.wr-pv-paper { fill: var(--paper-raised); }
.wr-pv-page text { white-space: pre; }
.wr-pv-f1 { font-weight: 700; }
.wr-pv-f2 { font-style: italic; }
.wr-pv-f3 { font-weight: 700; font-style: italic; }
/* The ebook's chapters, as its own style sheet sets them. */
.wr-pv-ebook { width: 100%; max-width: 34em; padding: var(--space-4) var(--space-5); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule); font: var(--text-md)/1.5 var(--font-display); color: var(--ink); }
.wr-pv-file + .wr-pv-file { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px dashed var(--rule-strong); }
.wr-pv-ebook :is(h1, h2) { margin: 1.5em 0 1em; font-size: 1.3em; font-weight: 400; text-align: center; }
.wr-pv-ebook h2 .sub { display: block; margin-top: .4em; font-size: .8em; font-style: italic; }
.wr-pv-ebook p { margin: 0; text-indent: 1.5em; }
.wr-pv-ebook :is(p.first, p.noindent, p.centre, .title p, blockquote p, aside p) { text-indent: 0; }
.wr-pv-ebook p.centre, .wr-pv-ebook p.break, .wr-pv-ebook .title { text-align: center; }
.wr-pv-ebook p.break { margin: 1em 0; text-indent: 0; }
.wr-pv-ebook .title { padding: 2em 0; }
.wr-pv-ebook .title h1 { margin: 0 0 .5em; font-size: 1.6em; }
.wr-pv-ebook blockquote { margin: 1em 2em; }
.wr-pv-ebook .u { text-decoration: underline; }
.wr-pv-ebook .noteref { vertical-align: super; font-size: .75em; }
.wr-pv-ebook aside.notes { margin-top: 2em; padding-top: .5em; border-top: 1px solid var(--rule-strong); font-size: .9em; }
.wr-ctree { display: grid; max-height: 46vh; overflow: auto; padding: 4px 8px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); }
.wr-csum { margin: 0; font-size: var(--text-xs); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.wr-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-5); max-height: min(64vh, 680px); overflow: auto; }
.wr-labels-edit { display: grid; gap: 6px; }
.wr-lrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 6px; align-items: center; }
.wr-lrow input, .wr-lrow select { min-height: 30px; padding: 2px 6px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); }
.wr-backups { margin: 0; padding: 0; list-style: none; max-height: 50vh; overflow: auto; }
.wr-backups li { display: flex; align-items: center; gap: 6px; min-height: 44px; border-bottom: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
.wr-keys-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-6); max-height: 60vh; overflow: auto; }
.wr-keys-h { margin: var(--space-3) 0 var(--space-2); font-size: var(--text-sm); }
.wr-keys { display: grid; gap: 6px; margin: 0; font-size: var(--text-xs); }
.wr-keys div { display: flex; justify-content: space-between; gap: var(--space-4); }
.wr-keys dt { color: var(--ink-soft); }
.wr-keys dd { margin: 0; }
.wr-cmp { max-height: 56vh; overflow: auto; padding: var(--space-3) var(--space-4); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); font: var(--text-md)/1.7 var(--font-display); }
.wr-cmp p { margin: 0 0 .6em; color: var(--ink); }
.wr-ins { background: color-mix(in srgb, var(--good) 20%, transparent); text-decoration: none; }
.wr-del { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--ink-soft); }
.wr-cmp-sum { display: flex; flex-wrap: wrap; gap: var(--space-3); min-height: 1.5em; margin: 0; font-variant-numeric: tabular-nums; }
.wr-cmp-pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--space-3); align-items: end; margin-bottom: var(--space-3); }
.wr-cmp-hunk { padding-bottom: .6em; border-bottom: 1px dashed var(--rule); }
.wr-cmp-hunk:last-child { border-bottom: 0; }
.wr-cmp-para { color: var(--ink-faint); }
.wr-ins-k { color: var(--good); font-weight: 600; }
.wr-del-k { color: var(--danger); font-weight: 600; }
.wr-clip-box { min-height: 140px; max-height: 40vh; overflow: auto; margin-top: var(--space-2); padding: 8px 10px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--paper); font: var(--text-sm)/1.5 var(--font-display); }
.wr-clip-box p { margin: 0 0 .6em; }
.wr-clip-box:empty::before { content: "Paste here"; color: var(--ink-faint); }

/* ---------------------------------------------------------------- narrower windows */

@media (max-width: 1180px) {
  .wr { --wr-insp-w: 260px; --wr-side-w: 230px; }
  .wr-tb-btn.has-text span { display: none; }
  .wr-tb-btn.has-text::after { content: attr(aria-label); position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  #wrTypew::before { content: "T"; font: 600 var(--text-sm) var(--font-mono); }
  #wrFocusBtn::before { content: "\00B6"; font: 600 var(--text-md) var(--font-display); }
  .wr-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .wr-views { display: none; }
  .wr-viewpick:not([hidden]) { display: block; min-height: 34px; max-width: 150px; padding: 2px 6px; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper); font-weight: 600; }
  .wr-bible { grid-template-columns: minmax(0, 1fr); }
  .wr-two, .wr-three { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- phones */

@media (max-width: 760px) {
  .wr-body-grid, .wr[data-side-open="false"] .wr-body-grid, .wr[data-inspector="false"] .wr-body-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .wr-split-side, .wr-hide-sm, .wr-brand, .wr-state { display: none !important; }
  .wr-top .wr-drawer-btn { display: inline-flex; width: 44px; height: 44px; }
  .wr-top { gap: 4px; padding: 4px 6px; }
  .wr-top .os-app-home { width: 44px; height: 44px; }
  .wr-icon-btn, .wr-tb-btn { min-width: 44px; width: auto; height: 44px; min-height: 44px; }
  .wr-btn, .wr-project, .wr-viewpick:not([hidden]), .wr-menu button, .wr-recent-open, .wr-find-hit, .wr-node, .wr-link, .wr-check, .wr-bitem, .wr-seg button, .wr-side-tabs [role="tab"], .wr-insp-tabs [role="tab"], .wr-tog, .wr-o-open, .wr-ic-title, .wr-lab, .wr-radio, .wr-scriv-h, .wr-comment-q, .wr-targets-form summary { min-height: 44px; }
  .wr-btn-sm { min-height: 44px; }
  .wr-ctarget, .wr-tb-select, .wr-find input, .wr-find select, .wr-field input, .wr-field select, .wr-field textarea, .wr-ifield input, .wr-ifield select, .wr-ifield textarea, .wr-tform input, .wr-table select, .wr-vhead select, .wr-bfield input, .wr-lrow input, .wr-lrow select, .wr-rename { min-height: 44px; font-size: var(--text-md); }
  .wr-projpick { flex: none; }
  .wr-project { max-width: 28vw; }
  .wr-viewpick:not([hidden]) { flex: none; width: 28vw; max-width: 28vw; }
  .wr-btn-main span { display: none; }
  .wr-btn { min-width: 44px; }
  .wr-side { position: fixed; z-index: 70; top: 0; bottom: 0; left: 0; width: min(88vw, 360px); box-shadow: 0 0 0 1px var(--rule), 20px 0 50px rgba(0, 0, 0, .25); animation: wr-drawer var(--dur-3) var(--ease-standard); }
  .wr[data-side-open="false"] .wr-side { display: none; }
  .wr-side-x { display: inline-flex; }
  .wr-insp { position: fixed; z-index: 69; top: 0; bottom: 0; right: 0; width: min(92vw, 380px); box-shadow: 0 0 0 1px var(--rule), -20px 0 50px rgba(0, 0, 0, .25); animation: wr-drawer-r var(--dur-3) var(--ease-standard); }
  .wr-tree .wr-node { font-size: var(--text-md); }
  .wr-toolbar { gap: 4px; padding: 2px 4px; }
  .wr-tb-group { padding-right: 4px; }
  .wr-tb-glyph { width: 44px; }
  .wr-scroll { padding: var(--space-2) 0 var(--space-8); }
  .wr-paper { padding: var(--space-5) var(--space-4) var(--space-7); border-radius: 0; box-shadow: none; }
  .wr-paper.wr-script { font-size: var(--text-sm); }
  .wr-script .wr-edit > p[data-t="character"] { margin-left: 12ch; }
  .wr-script .wr-edit > p[data-t="paren"] { margin-left: 8ch; }
  .wr-script .wr-edit > p[data-t="dialogue"], .wr-script .wr-edit > p[data-t="lyric"] { margin-left: 4ch; }
  .wr-script .wr-edit > p[data-t="transition"] { margin-left: 0; max-width: none; }
  .wr-script .wr-edit > p[data-scene-no]::after { display: none; }
  .wr-panes.is-split { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .wr-split-pane { display: none !important; }
  .wr-pane-b { border-top: 1px solid var(--rule); }
  #wrViewOther { padding: var(--space-4) var(--space-3) var(--space-7); }
  .wr-board { grid-template-columns: minmax(0, 1fr); }
  .wr-bcard-head { grid-template-columns: minmax(0, 1fr); }
  .wr-bcard-pic { max-width: 160px; }
  .wr-bfield { grid-template-columns: minmax(0, 1fr) auto; }
  .wr-bfield .wr-bk { grid-column: 1 / -1; }
  .wr-compile, .wr-settings, .wr-keys-cols, .wr-irow, .wr-cmp-pick { grid-template-columns: minmax(0, 1fr); }
  .wr-status { gap: 10px; min-height: 44px; }
  .wr[data-open="true"] .wr-status { padding-right: 64px; }
  body.wr-app #ppBadge { min-height: 44px; bottom: 0; }
  #wrWhere, #wrSession, #wrStreak { display: none; }
  .wr-recent-meta { display: none; }
  .wr-dlg { padding: var(--space-4); }
}
@keyframes wr-drawer { from { transform: translateX(-12px); opacity: .6; } }
@keyframes wr-drawer-r { from { transform: translateX(12px); opacity: .6; } }
@media (prefers-reduced-motion: reduce) {
  .wr-menu, .wr-start, .wr-side, .wr-insp { animation: none !important; }
  .wr[data-focus="true"] .wr-edit > p, .wr[data-compose="true"] .wr-toolbar { transition: none; }
}
@media print {
  .wr-top, .wr-side, .wr-insp, .wr-status, .wr-toolbar, .wr-pane-head, .wr-split { display: none !important; }
  .wr-body-grid { display: block; }
  .wr-paper { box-shadow: none; max-width: none; padding: 0; }
}

/* Authorship records kept with a project (write-authorship.js). */
.wr-auth { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.wr-auth-row { padding: var(--space-3) 0; border-top: 1px solid var(--rule); }
.wr-auth-row:last-child { border-bottom: 1px solid var(--rule); }
.wr-dlg-body .wr-auth-h { margin: 0 0 4px; color: var(--ink); display: flex; flex-wrap: wrap; gap: 4px var(--space-2); align-items: baseline; }
.wr-auth-h span { font-size: var(--text-xs); color: var(--good); font-weight: 600; }
.wr-dlg-body .wr-auth-sub { margin: 0 0 4px; font-size: var(--text-xs); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wr-dlg-body .wr-auth-bad, .wr-auth-h .wr-auth-bad { color: var(--danger); }
.wr-dlg-body .wr-auth-acts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 0; }
.wr-auth-acts .wr-btn { min-height: 44px; }

/* ---------------------------------------------------------------- stage and radio plays

   The same elements as a screenplay, laid out as write-script.js lays out
   each kind (STAGE, RADIO): a stage play's speeches across the page and
   its directions set in; a radio play's names at the left with the speech
   beside them. One ch is a tenth of an inch, as above. */
.wr-script[data-format="stage"] .wr-edit > p[data-t="scene"] { text-align: center; text-decoration: underline; }
.wr-script[data-format="stage"] .wr-edit > p[data-t="character"] { --wr-in: 0ch; margin-left: 0; max-width: 60ch; text-align: center; }
.wr-script[data-format="stage"] .wr-edit > p[data-t="dialogue"] { --wr-in: 0ch; margin-left: 0; max-width: 60ch; }
.wr-script[data-format="stage"] .wr-edit > p[data-t="paren"] { --wr-in: 15ch; margin-left: var(--wr-in); max-width: 30ch; }
.wr-script[data-format="stage"] .wr-edit > p[data-t="action"] { --wr-in: 25ch; margin-left: var(--wr-in); max-width: 35ch; }
.wr-script[data-format="stage"] .wr-edit > p[data-t="lyric"] { --wr-in: 10ch; margin-left: var(--wr-in); max-width: 50ch; font-style: normal; text-transform: uppercase; }
.wr-script[data-format="radio"] .wr-edit > p[data-t="scene"] { text-decoration: underline; }
.wr-script[data-format="radio"] .wr-edit > p[data-t="character"] { --wr-in: 0ch; margin-left: 0; max-width: 14ch; }
.wr-script[data-format="radio"] .wr-edit > p:is([data-t="dialogue"], [data-t="paren"], [data-t="lyric"]) { --wr-in: 15ch; margin: 0 0 0 var(--wr-in); max-width: 45ch; }
.wr-script[data-format="radio"] .wr-edit > p[data-t="character"] + p:is([data-t="dialogue"], [data-t="paren"]) { margin-top: -1.25em; }
.wr-script[data-format="radio"] .wr-edit > p[data-t="action"] { --wr-in: 15ch; margin-left: var(--wr-in); max-width: 45ch; text-transform: uppercase; }

/* Revision marks beside the script: drawn in a layer of their own at the
   page's right edge, never in the text. */
.wr-paper { position: relative; }
.wr-revmarks { position: absolute; top: 0; right: 0; bottom: 0; width: clamp(var(--space-4), 5%, var(--space-6)); pointer-events: none; }
.wr-revmark { position: absolute; right: 30%; font: 700 1em/1.25 var(--wr-script-font); color: var(--ink); }
.wr-revmark::before { content: ""; position: absolute; top: .15em; bottom: .15em; left: -6px; width: 3px; border-radius: var(--radius-sm); background: var(--wr-rev, var(--accent)); box-shadow: 0 0 0 1px var(--rule-strong); }
.wr-rev-swatch { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: var(--radius-sm); background: var(--wr-rev, var(--paper)); box-shadow: inset 0 0 0 1px var(--rule-strong); vertical-align: -1px; }
#wrRev { display: inline-flex; align-items: center; gap: 6px; }
#wrRev[hidden] { display: none; }
.wr-revise { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-5); max-height: min(64vh, 680px); overflow: auto; }
.wr-revise .wr-fs:first-child { grid-column: 1 / -1; }
.wr-revs { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper-raised); }
.wr-revs li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--space-2); padding: 8px 10px; }
.wr-revs li + li { border-top: 1px solid var(--rule); }
.wr-rev-meta { color: var(--ink-faint); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.wr-dlg-body .wr-rev-state { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); }

/* Links in the text, to another document or a bible entry. */
.wr-edit .wr-ln { color: var(--accent-strong); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.wr-edit .wr-ln.is-broken { color: var(--ink-faint); text-decoration-style: dashed; }
.wr-linkpick { position: fixed; z-index: 80; padding: 6px; border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule), 0 14px 36px rgba(16, 16, 24, .18); animation: wr-pop var(--dur-3) var(--ease-standard); }
.wr-linkpick input { width: 100%; min-height: 34px; padding: 4px 8px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--paper); }
.wr-linkpick ul { margin: 6px 0 0; padding: 0; list-style: none; max-height: 248px; overflow: auto; }
.wr-linkpick li[role="option"] { display: flex; align-items: baseline; gap: var(--space-2); min-height: 34px; padding: 7px 10px; border-radius: var(--radius-sm); cursor: pointer; }
.wr-linkpick li[aria-selected="true"], .wr-linkpick li[role="option"]:hover { background: var(--paper-inset); }
.wr-linkpick li .wr-lp-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.wr-lp-k { flex: none; font-size: var(--text-2xs); color: var(--ink-faint); }
.wr-linkpick .wr-empty { margin: 0; padding: 8px 10px; font-size: var(--text-xs); }
.wr-backlinks { line-height: 1.6; }

/* The Structure view. */
.wr-beatmap { display: block; min-width: 560px; }
.wr-tl-wrap { flex: none; }
.wr-beat-span { fill: color-mix(in srgb, var(--accent) 18%, transparent); }
.wr-beat-aim { stroke: var(--ink-soft); stroke-width: 1.5; }
.wr-beat-doc { fill: var(--paper-inset); stroke: none; }
.wr-beat-doc.is-alt { fill: color-mix(in srgb, var(--ink) 8%, var(--paper-inset)); }
.wr-beat-tie { stroke: var(--rule-strong); stroke-width: 1.5; stroke-dasharray: 3 3; }
.wr-beat-pt { fill: var(--paper-raised); stroke-width: 1.5; stroke: var(--good); }
.wr-beat-pt.is-off, .wr-beat-tie.is-off { stroke: var(--warn); }
.wr-beat-n { fill: var(--ink); font: 600 .62rem var(--font-sans); }
.wr-beats td { vertical-align: middle; }
.wr-beat-text, .wr-beat-by { display: block; margin-top: 2px; max-width: 44ch; color: var(--ink-faint); font-size: var(--text-xs); line-height: 1.4; }
.wr-beat-state { font-size: var(--text-xs); font-weight: 600; white-space: nowrap; color: var(--good); }
.wr-beat-state.is-off { color: var(--warn); }
.wr-beat-note { width: 100%; min-width: 140px; min-height: 28px; padding: 2px 6px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); font-size: var(--text-xs); }
.wr-beats select { max-width: 220px; }
.wr-beats td:nth-child(2) { min-width: 200px; }

/* Names. */
.wr-names-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto auto; gap: var(--space-2) var(--space-3); align-items: end; }
.wr-names { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.wr-name { display: grid; gap: 2px; width: 100%; min-height: 44px; padding: 6px 10px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper-raised); text-align: left; cursor: pointer; }
.wr-name:hover { border-color: var(--rule-strong); background: var(--paper-inset); }
.wr-name-full { font-weight: 650; overflow-wrap: anywhere; }
.wr-name-meta { font-size: var(--text-2xs); color: var(--ink-faint); }

/* Fields of your own, and the outline's columns. */
.wr-ifields { display: grid; gap: 10px; }
.wr-fields-edit { display: grid; gap: 6px; }
.wr-frow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: center; }
.wr-frow input, .wr-frow select { min-height: 30px; padding: 2px 6px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); }
.wr-frow .wr-fopts { grid-column: 1 / -1; }
.wr-outline thead th { vertical-align: middle; }
.wr-o-sort { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; }
.wr-o-sort:hover { color: var(--ink); text-decoration: underline; }
.wr-o-dir { font-size: var(--text-xs); }
.wr-o-cols { position: relative; }
.wr-o-cols summary { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 10px; border: 1px solid var(--rule-strong); border-radius: var(--radius-md); background: var(--paper-raised); font-size: var(--text-xs); font-weight: 600; cursor: pointer; list-style: none; }
.wr-o-cols summary::-webkit-details-marker { display: none; }
.wr-o-cols[open] summary { background: var(--paper-inset); }
.wr-o-cols-list { position: absolute; z-index: 20; right: 0; top: calc(100% + 4px); display: grid; gap: 2px; min-width: 220px; padding: 8px 12px; border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule), 0 14px 36px rgba(16, 16, 24, .18); }
.wr-o-cols-list .wr-link { margin-top: 4px; }

/* The compile window's book fields. */
.wr-cover-add { display: flex; align-items: end; }

/* Plug-ins. */
.wr-pls { margin: 0 0 var(--space-3); padding: 0; list-style: none; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper-raised); }
.wr-pl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: 10px 12px; }
.wr-pl + .wr-pl { border-top: 1px solid var(--rule); }
.wr-pl-main { flex: 1 1 280px; min-width: 0; }
.wr-pl-v { font: var(--text-2xs) var(--font-mono); color: var(--ink-faint); }
.wr-pl-kind { display: block; margin-top: 2px; font-size: var(--text-2xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.wr-dlg-body .wr-pl-d { margin: 4px 0 0; font-size: var(--text-xs); color: var(--ink-faint); }
.wr-pl-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wr-pl-out { max-height: 52vh; overflow: auto; }

@media (max-width: 760px) {
  .wr-revise, .wr-names-form { grid-template-columns: minmax(0, 1fr); }
  .wr-o-sort, .wr-o-cols summary, .wr-name { min-height: 44px; min-width: 44px; }
  .wr-frow input, .wr-frow select, .wr-beat-note, .wr-linkpick input { min-height: 44px; font-size: var(--text-md); }
  .wr-linkpick li[role="option"] { min-height: 44px; }
  .wr-script[data-format="stage"] .wr-edit > p[data-t="action"] { --wr-in: 8ch; margin-left: 8ch; }
  .wr-script[data-format="stage"] .wr-edit > p[data-t="paren"] { margin-left: 4ch; }
  .wr-script[data-format="radio"] .wr-edit > p:is([data-t="dialogue"], [data-t="paren"], [data-t="lyric"], [data-t="action"]) { --wr-in: 4ch; margin-left: 4ch; }
  .wr-script[data-format="radio"] .wr-edit > p[data-t="character"] + p:is([data-t="dialogue"], [data-t="paren"]) { margin-top: 0; }
  .wr-revmarks { width: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) { .wr-linkpick { animation: none !important; } }

/* ---------------------------------------------------------------- keywords, collections, plotlines

   Keywords are chips in the label's colour (--wr-lh); a collection is a
   list in the binder's own rows; the plotline grid is a table whose first
   column stays put while the scenes scroll past. */
.wr-kws { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.wr-kw { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 0 0 8px; border: 1px solid hsl(var(--wr-lh, 214) var(--wr-lab-s) var(--wr-lab-l) / .55); border-radius: var(--radius-sm); background: hsl(var(--wr-lh, 214) var(--wr-lab-s) var(--wr-lab-l) / .1); font-size: var(--text-xs); }
.wr-kw-n { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-kw-x { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 26px; padding: 0; border: 0; border-left: 1px solid hsl(var(--wr-lh, 214) var(--wr-lab-s) var(--wr-lab-l) / .35); background: none; color: var(--ink-soft); cursor: pointer; }
.wr-kw-x:hover { color: var(--ink); background: var(--paper-inset); }
.wr-kw-x svg { width: 13px; height: 13px; }
.wr-ic-kws { display: flex; flex-wrap: wrap; gap: 2px 0; padding: 0 10px 2px; }
.wr-ic-kws .wr-o-lab { font-size: var(--text-2xs); }
.wr-coll-list, .wr-coll-items { flex: 1; min-height: 0; margin: 0; padding: 2px 0 24px; overflow: auto; list-style: none; }
.wr-coll-open, .wr-coll-item { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 32px; padding: 0 10px; border: 0; background: none; font-size: var(--text-sm); text-align: left; cursor: pointer; }
.wr-coll-open:hover, .wr-coll-item:hover { background: var(--paper-inset); }
.wr-coll-open svg, .wr-coll-item svg { width: 16px; height: 16px; color: var(--ink-faint); }
.wr-coll-row { display: flex; align-items: center; }
.wr-coll-row .wr-coll-item { flex: 1; min-width: 0; }
.wr-coll-x { width: 30px; height: 30px; margin-right: 4px; }
.wr-coll-head { gap: 2px; padding-left: 4px; }
.wr-coll-name { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); }
.wr-coll-says, .wr-coll-sum, .wr-coll-empty { margin: 0; padding: 0 10px 8px; }
.wr-coll-form .wr-labs { gap: 4px; }
.wr-plg-wrap { max-height: calc(100vh - 230px); overflow: auto; }
.wr-plg { width: auto; border-collapse: separate; border-spacing: 0; }
.wr-plg th, .wr-plg td { border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); }
.wr-plg thead th { z-index: 2; }
.wr-plg-corner, .wr-plg-line { position: sticky; left: 0; z-index: 3; min-width: 190px; max-width: 220px; background: var(--paper-raised); }
.wr-plg thead .wr-plg-corner { z-index: 4; background: var(--paper-inset); }
.wr-plg-line { border-left: 4px solid hsl(var(--wr-lh, 214) var(--wr-lab-s) var(--wr-lab-l)); }
.wr-plg-lh { display: flex; align-items: center; gap: 6px; }
.wr-plg-name { flex: 1; min-width: 0; min-height: 30px; padding: 2px 6px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; font-weight: 650; }
.wr-plg-name:hover, .wr-plg-name:focus { border-color: var(--rule-strong); background: var(--paper); }
.wr-plg-tools { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.wr-plg-tools select { min-height: 28px; max-width: 96px; }
.wr-plg-count { margin-left: auto; font-size: var(--text-2xs); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.wr-plg-sc { min-width: 168px; max-width: 200px; white-space: normal !important; vertical-align: bottom !important; }
.wr-plg-sc.is-cur { box-shadow: inset 0 -2px var(--accent); }
.wr-plg-sc .wr-o-open { display: block; font-size: var(--text-xs); line-height: 1.35; letter-spacing: 0; }
.wr-plg-no { display: block; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.wr-plg-cell { min-width: 168px; padding: 4px !important; vertical-align: top; }
.wr-plg-cell textarea { display: block; width: 100%; min-height: 64px; padding: 6px 8px; border: 1px dashed transparent; border-radius: var(--radius-sm); background: transparent; font: var(--text-xs)/1.45 var(--font-sans); color: var(--ink); resize: vertical; }
.wr-plg-cell textarea:hover { border-color: var(--rule-strong); }
.wr-plg-cell textarea:focus { border: 1px solid var(--accent); background: var(--paper); outline: none; }
.wr-plg-cell.is-on textarea { border: 1px solid hsl(var(--wr-lh, 214) var(--wr-lab-s) var(--wr-lab-l) / .5); background: hsl(var(--wr-lh, 214) var(--wr-lab-s) var(--wr-lab-l) / .09); }

/* Changes from Word, and comments' replies. */
.wr-changes { margin: 0; padding: 0; list-style: none; }
.wr-changes li { padding: 8px 0; border-bottom: 1px solid var(--rule); }
.wr-change-q { display: block; width: 100%; padding: 0; border: 0; background: none; font: var(--text-sm)/1.5 var(--font-display); color: var(--ink-soft); text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.wr-change-q:hover { color: var(--ink); }
.wr-replies { margin: 6px 0 2px; padding: 0 0 0 10px; list-style: none; border-left: 2px solid var(--rule); }
.wr-replies li + li { margin-top: 6px; }
.wr-comment.is-done > .wr-comment-t { color: var(--ink-faint); }
.wr-insp-tabs { overflow-x: auto; scrollbar-width: none; }

/* Spelling: the underline is drawn by the browser over the text (the CSS
   Custom Highlight API), never part of it. */
::highlight(wr-misspelt) { text-decoration: underline wavy var(--danger); text-decoration-thickness: 1px; text-underline-offset: 3px; }
::highlight(wr-tagged) { text-decoration: underline dotted var(--accent-strong); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.wr-spell { display: grid; gap: var(--space-3); }
.wr-spell-top { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: var(--space-3); align-items: end; }
.wr-spell-top .wr-hint { margin: 0; }
.wr-dlg-body .wr-spell-count, .wr-dlg-body .wr-spell-word, .wr-dlg-body .wr-spell-done { margin: 0; color: var(--ink); }
.wr-spell-word { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.wr-spell-bad { font: 600 var(--text-lg) var(--font-display); text-decoration: underline wavy var(--danger); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.wr-spell-sugg { display: flex; flex-wrap: wrap; gap: 6px; }
.wr-spell-pick { min-height: 32px; padding: 0 10px; font: var(--text-sm) var(--font-sans); }
.wr-spell-pick[aria-selected="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.wr-dict { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; max-height: 160px; overflow: auto; }
.wr-dict li { display: inline-flex; align-items: center; gap: 2px; padding-left: 8px; border: 1px solid var(--rule); border-radius: var(--radius-sm); font-size: var(--text-xs); }
.wr-dict .wr-icon-btn { width: 26px; height: 26px; }
.wr-ckw { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; }
.wr-ckw select { min-height: 30px; padding: 2px 6px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); font-size: var(--text-xs); }

/* Alternate lines, and the breakdown. */
.wr-script .wr-edit > p[data-alt]:not([data-page])::before { content: "alt"; position: absolute; left: calc(-1 * var(--wr-in, 0ch) - 5ch); top: .15em; font: 600 var(--text-2xs) var(--font-sans); color: var(--accent-strong); text-transform: uppercase; letter-spacing: .06em; }
.wr-alts { display: grid; gap: 0; margin: 0 0 var(--space-2); padding: 0; list-style: none; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); }
.wr-alts li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--space-3); padding: 8px 10px; }
.wr-alts li + li { border-top: 1px solid var(--rule); }
.wr-alts li.is-on { background: var(--accent-soft); }
.wr-alt-t { flex: 1 1 220px; min-width: 0; font: var(--text-sm)/1.45 var(--wr-script-font); overflow-wrap: anywhere; }
.wr-alt-m { font-size: var(--text-2xs); font-weight: 700; letter-spacing: .04em; color: var(--accent-strong); text-transform: uppercase; }
.wr-alt-a { display: flex; gap: var(--space-3); }
.wr-bd-cast { margin: 0; font-size: var(--text-xs); line-height: 1.5; overflow-wrap: anywhere; }
.wr-bd { display: grid; gap: 6px; margin: 4px 0 2px; }
.wr-bd dt { font-size: var(--text-2xs); font-weight: 700; letter-spacing: .04em; color: var(--ink-soft); }
.wr-bd dd { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 0; }
.wr-bd-tag { display: inline-flex; align-items: center; gap: 2px; padding-left: 8px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); font-size: var(--text-xs); }
.wr-bd-x { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 24px; padding: 0; border: 0; background: none; color: var(--ink-faint); cursor: pointer; }
.wr-bd-x:hover { color: var(--ink); }
.wr-bd-x svg { width: 12px; height: 12px; }
.wr-bd-table td { min-width: 90px; }

@media (max-width: 760px) {
  .wr-kw-x, .wr-bd-x, .wr-coll-x, .wr-dict .wr-icon-btn { min-width: 44px; min-height: 44px; }
  .wr-kw, .wr-bd-tag, .wr-dict li { min-height: 44px; }
  .wr-coll-open, .wr-coll-item, .wr-change-q, .wr-spell-pick, .wr-plg-name { min-height: 44px; }
  .wr-ckw select, .wr-plg-tools select { min-height: 44px; font-size: var(--text-md); }
  .wr-spell-top { grid-template-columns: minmax(0, 1fr); }
  .wr-plg-corner, .wr-plg-line { min-width: 150px; max-width: 160px; }
  .wr-plg-wrap { max-height: none; }
}
@media (max-width: 760px) { .wr-side-tabs [role="tab"], .wr-insp-tabs [role="tab"] { min-width: 44px; } }
.wr-review { display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.wr-insp-h { margin: 4px 0 0; font-size: var(--text-2xs); font-weight: 700; letter-spacing: .04em; color: var(--ink-soft); }
.wr-changes del + ins { margin-left: .25em; }
/* The views scroll as a whole: nothing in them is squeezed to fit the window. */
#wrViewOther > * { flex-shrink: 0; }