/* OBSCURA OS: Authorship, and the page that checks its bundles.

   The application is one window, as Case is: the bar across the top with
   the work and its four screens, and the screen under it. Write is a quiet
   page of text set in the serif, a column of reading width on the paper,
   with the formatting above it and the state of the record along its foot;
   the other screens are pages that scroll. On a phone the bar wraps and
   the tabs scroll, the toolbar scrolls sideways, and the page takes the
   width of the window.

   The report (av-) is shared by the Replay screen and /verify-authorship,
   so the author sees what a teacher will see. It reads as a report: the
   verdict and its checks first, then the honest limits, then the replay,
   the figures, the timeline and the record itself.

   Every colour, size, corner and duration is a theme.css token. */

body.au-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); }
.au *, .au *::before, .au *::after, .av *, .vf * { box-sizing: border-box; }
/* At no weight, so a button's own class decides its colour and weight:
   at one class's weight this reset outranked the main button's, which
   was then ink on the accent, unreadable in the default colourway. */
:where(.au, .av) :where(button, input, select, textarea) { font: inherit; color: inherit; }
.au-sr, .av-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; }
.au-grow, .av-grow { flex: 1; }
.au code, .av code { font: var(--text-xs) var(--font-mono); padding: 1px var(--space-1); border-radius: var(--radius-sm); background: var(--paper-inset); }
.au-soft, .av-soft { color: var(--ink-faint); }
.au-hash, .av-hash { overflow-wrap: anywhere; word-break: break-all; }
.ck-layout-host { position: absolute; left: -200000px; top: 0; pointer-events: none; }

.au { height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr); }

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

.au-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); }
.au-home { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: var(--radius-md); color: var(--ink-soft); }
.au-home:hover { background: var(--paper-inset); color: var(--ink); }
.au-brand { margin: 0 var(--space-1) 0 0; font-size: var(--text-md); font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }
.au-workpick { position: relative; min-width: 0; }
.au-work { display: inline-flex; align-items: center; gap: var(--space-1); max-width: 280px; min-height: 36px; padding: 6px 10px; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper); cursor: pointer; }
.au-work:hover, .au-work[aria-expanded="true"] { border-color: var(--rule-strong); background: var(--paper-inset); }
.au-work-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.au-work svg { flex: none; width: 16px; height: 16px; color: var(--ink-faint); }
.au-menu { position: absolute; z-index: 50; top: calc(100% + var(--space-1)); left: 0; min-width: 280px; 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: au-pop var(--dur-3) var(--ease-standard); }
.au-menu[hidden] { display: none; }
/* Help, at the right-hand end of the bar, opens leftwards. */
.au-helpwrap { position: relative; flex: none; }
.au-menu-right { left: auto; right: 0; }
.au-menu button { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: var(--space-3); min-height: 36px; padding: var(--space-2) 11px; border: 0; border-radius: var(--radius-sm); background: transparent; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; }
.au-menu button:hover, .au-menu button:focus-visible { background: var(--paper-inset); outline: none; }
.au-menu button span { flex: none; font-size: var(--text-2xs); color: var(--ink-faint); }
.au-menu kbd { font-size: var(--text-2xs); color: var(--ink-faint); }
.au-menu hr { margin: 6px var(--space-1); border: 0; border-top: 1px solid var(--rule); }
@keyframes au-pop { from { opacity: 0; transform: translateY(-4px); } }

.au-tabs { display: flex; gap: 2px; min-width: 0; padding: 2px; border: 1px solid var(--rule); border-radius: var(--radius-pill); background: var(--paper-inset); overflow-x: auto; scrollbar-width: none; }
.au-tabs::-webkit-scrollbar { display: none; }
.au-tabs button { flex: none; min-height: 30px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-soft); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard); }
.au-tabs button:hover:not(:disabled) { color: var(--ink); }
.au-tabs button[aria-current="page"] { background: var(--paper-raised); color: var(--ink); box-shadow: 0 0 0 1px var(--rule), 0 1px 2px rgba(0, 0, 0, .08); }
.au-tabs button:disabled { opacity: .45; cursor: default; }
.au-state { margin: 0; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); color: var(--ink-faint); }
.au-save { font-size: var(--text-xs); color: var(--ink-faint); white-space: nowrap; }
.au-save:empty { display: none; }
.au-icon-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink-soft); cursor: pointer; }
.au-icon-btn:hover { background: var(--paper-inset); color: var(--ink); }
.au-icon-btn svg { width: 20px; height: 20px; }
.au-tabs button:focus-visible, .au-work:focus-visible, .au-btn:focus-visible, .au-icon-btn:focus-visible, .au-tb:focus-visible, .au-swatch:focus-visible, .av-btn:focus-visible, .av-link:focus-visible, .au-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------------------------------------------------------------- screens */

.au-main { position: relative; min-height: 0; overflow: hidden; }
.au-boot { margin: var(--space-6); }
.au-boot[hidden] { display: none; }
.au-view[hidden] { display: none !important; }
.au-page-view { height: 100%; overflow-y: auto; padding: var(--space-5) max(var(--space-5), calc((100% - 1120px) / 2)) var(--space-7); animation: au-arrive var(--dur-4) var(--ease-standard); }
@keyframes au-arrive { from { opacity: 0; transform: translateY(6px); } }
.au-h { margin: 0 0 var(--space-2); font: 650 var(--text-2xl)/1.15 var(--font-headline); letter-spacing: -.01em; }
.au-h3 { margin: var(--space-6) 0 var(--space-2); font-size: var(--text-md); }
.au-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); }
.au-hint { margin: var(--space-1) 0 var(--space-2); font-size: var(--text-xs); line-height: 1.5; color: var(--ink-faint); }

.au-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 6px 14px; border: 1px solid var(--rule-strong); border-radius: var(--radius-md); background: var(--paper-raised); color: var(--ink); font-weight: 600; cursor: pointer; text-decoration: none; transition: background-color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard); }
.au-btn:hover:not(:disabled) { background: var(--paper-inset); }
.au-btn:active:not(:disabled) { transform: translateY(1px); }
.au-btn:disabled { opacity: .5; cursor: default; }
.au-btn-main { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.au-btn-main:hover:not(:disabled) { background: var(--accent-strong); }
.au-btn-quiet { border-color: transparent; background: transparent; color: var(--ink-soft); }
.au-file { position: relative; overflow: hidden; }
.au-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.au-file:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.au-link { min-height: 32px; padding: 0 var(--space-1); border: 0; background: none; color: var(--accent-strong); font-size: var(--text-xs); font-weight: 600; cursor: pointer; }
.au-link:hover { text-decoration: underline; }
.au-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-2) 0; }

.au-field { display: flex; flex-direction: column; gap: var(--space-1); margin: 0 0 var(--space-3); font-size: var(--text-xs); color: var(--ink-soft); }
.au-field > span { font-weight: 600; }
.au-field-inline { flex-direction: row; align-items: center; gap: var(--space-2); margin: 0; }
.au input:not([type="checkbox"]):not([type="file"]):not([type="range"]):not(.au-title), .au select, .au textarea { width: 100%; min-height: 36px; padding: 6px var(--space-2); border: 1px solid var(--rule-strong); border-radius: var(--radius-md); background: var(--paper); color: var(--ink); font-size: var(--text-sm); }
.au textarea { resize: vertical; line-height: 1.5; }
.au input:not(.au-title):focus, .au select:focus, .au textarea:focus { border-color: var(--accent); outline: 2px solid var(--accent-border); outline-offset: 0; }
.au-field-inline select { width: auto; }
.au input[type="range"] { accent-color: var(--accent); }
.au-check { display: flex; align-items: flex-start; gap: var(--space-2); min-height: 36px; padding: 6px 0; font-size: var(--text-sm); color: var(--ink); cursor: pointer; line-height: 1.4; }
.au-check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); }

.au-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-3); }
.au-card, .au-panel { padding: var(--space-4); border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule); }
.au-card { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-1); }
.au-card h3, .au-panel h3 { margin: 0 0 var(--space-2); font-size: var(--text-md); }
.au-card p { margin: 0 0 var(--space-2); color: var(--ink-soft); line-height: 1.5; }
.au-card > .au-btn { align-self: flex-start; margin-top: auto; }
.au-chosen { margin: var(--space-1) 0 var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--accent-soft); color: var(--ink); font-size: var(--text-xs); line-height: 1.5; overflow-wrap: anywhere; }
.au-chosen[hidden] { display: none; }
.au-panel { margin: 0 0 var(--space-3); }
.au-panel .au-h3 { margin-top: var(--space-5); }
.au-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-items: start; }
.au-cols > .au-panel { margin: 0; }
.au-scroll { position: relative; overflow-x: auto; }
.au-out { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--rule); }
.au-out[hidden] { display: none; }
.au-out p { margin: 0 0 var(--space-2); overflow-wrap: anywhere; }
.au-notes { margin: 0 0 var(--space-3); padding-left: var(--space-5); font-size: var(--text-xs); color: var(--ink-soft); }
.au-notes:empty { display: none; }
/* The summary card: the picture as it will be sent, white whatever the
   theme, framed by a rule so it does not melt into a light page. */
.au-sumcard { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--rule); }
.au-sumcard-img { display: block; width: 100%; max-width: 600px; height: auto; aspect-ratio: 16 / 9; margin: var(--space-2) 0; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--paper-inset); }
.au-brief { max-width: 760px; }
/* Where a brief begins from, and its rubric, a row a criterion. */
.au-brief-from { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); margin: 0 0 var(--space-3); padding: 0 0 var(--space-3); border-bottom: 1px solid var(--rule); }
.au-brief-from .au-field { flex: 1 1 220px; margin: 0; }
.au-rubric-edit { margin: var(--space-3) 0; padding: var(--space-3); border: 1px solid var(--rule); border-radius: var(--radius-md); }
.au-rubric-edit legend { padding: 0 var(--space-1); font-size: var(--text-xs); font-weight: 600; color: var(--ink-soft); }
.au-rubric-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) 90px auto; gap: 0 var(--space-2); align-items: start; padding: var(--space-2) 0; border-bottom: 1px dashed var(--rule); }
.au-rubric-row [data-r-del] { align-self: end; }
.au-rubric-row .au-field { margin: 0; }
.au-rubric-row textarea { min-height: 36px; }
.au-rubric-note table { margin: var(--space-2) 0; }
.au-rubric-note p { margin: var(--space-1) 0 0; }
.au-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 var(--space-3); }
.au-fields[hidden], .au-field[hidden] { display: none; }
.au-cite-out { margin: var(--space-2) 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--paper-inset); font: var(--text-sm)/1.5 var(--font-display); color: var(--ink); overflow-wrap: anywhere; min-height: 3em; }
.au-cite-out.is-empty { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--ink-faint); }
.au-wh-src { margin: 0 0 var(--space-2) 26px; font-size: var(--text-xs); color: var(--ink-soft); overflow-wrap: anywhere; }


.au-worklist { list-style: none; margin: 0; padding: 0; }
.au-worklist li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3) 0; border-top: 1px solid var(--rule); }
.au-worklist li:last-child { border-bottom: 1px solid var(--rule); }
.au-wl-name { display: flex; flex-direction: column; flex: 1; min-width: 14ch; }
.au-wl-name b { font-size: var(--text-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-wl-name span { font-size: var(--text-xs); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.au-empty-row { color: var(--ink-faint); font-size: var(--text-xs); }
/* Documents begun from one brief, under it. */
.au-worklist li.au-wl-group { padding-bottom: var(--space-2); }
.au-wl-group .au-wl-name b { font-size: var(--text-sm); }
.au-worklist li.au-wl-in { padding-left: var(--space-4); border-top-style: dashed; }


.au-table, .av-table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.au-table th, .au-table td, .av-table th, .av-table td { padding: 6px var(--space-2); border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.au-table th, .av-table thead th { color: var(--ink-faint); font-weight: 600; white-space: nowrap; }
.au-facts, .av-facts { max-width: 680px; }
.au-facts th, .av-facts th { width: 40%; color: var(--ink-soft); font-weight: 600; white-space: normal; }
.au-table .n, .av-table .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.au-wh { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow: auto; }
.au-wh li { border-bottom: 1px solid var(--rule); }
.au-wh q { color: var(--ink-soft); overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- writing */

.au-write, .au-draw { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.au-write { position: relative; }
/* The page and, beside it when asked for, the outline. */
/* min-width 0 on both, so the offer of a source (max-content wide) never
   widens the page past a phone's screen. */
.au-write, .au-draw { grid-template-columns: minmax(0, 1fr); }
.au-writebody { display: flex; min-width: 0; min-height: 0; }
.au-writebody > .au-paper { flex: 1; min-width: 0; }
.au-outline { flex: none; display: flex; flex-direction: column; width: 270px; min-height: 0; padding: var(--space-3); border-left: 1px solid var(--rule); background: var(--paper-raised); overflow-y: auto; }
.au-outline[hidden] { display: none; }
.au-outline .au-layers-head { margin-bottom: var(--space-1); }
.au-outline-total { margin: 0 0 var(--space-2); font: var(--text-2xs)/1.4 var(--font-mono); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.au-outline-list { list-style: none; margin: 0 0 var(--space-2); padding: 0; }
.au-outline-list button { display: flex; align-items: baseline; gap: var(--space-2); width: 100%; min-height: 32px; padding: 4px var(--space-2); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink); text-align: start; font-size: var(--text-xs); cursor: pointer; }
.au-outline-list button:hover { background: var(--paper-inset); }
.au-outline-list button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.au-ol-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-ol-n { flex: none; font: var(--text-2xs) var(--font-mono); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.au-ol-1 button { font-weight: 650; }
.au-ol-2 button { padding-inline-start: var(--space-4); }
.au-ol-3 button { padding-inline-start: var(--space-6); color: var(--ink-soft); }
.au-ol-0 button { font-style: italic; color: var(--ink-soft); }
.au-outline-empty { padding: var(--space-2); font-size: var(--text-xs); line-height: 1.5; color: var(--ink-faint); }
/* View, under its button at the right of the toolbar: outside the
   toolbar, which scrolls sideways and would clip it. */
.au-viewmenu { top: 46px; left: auto; right: 10px; width: min(460px, calc(100vw - 20px)); max-width: none; max-height: calc(100% - 60px); padding: var(--space-3) var(--space-4); overflow-y: auto; }
.au-viewmenu .au-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.au-viewmenu .au-field { margin-bottom: var(--space-2); }
.au-viewmenu .au-check { font-size: var(--text-xs); }
.au-viewmenu-h { margin: 0 0 var(--space-2); font: 600 var(--text-2xs)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
/* The view: the page's face, size, leading and column. */
.au-write[data-font="sans"] .au-sheetpage, .au-write[data-font="sans"] .au-page, .au-write[data-font="sans"] .au .au-title, .au-write[data-font="sans"] .au-title { font-family: var(--font-ui); }
.au-write[data-font="legible"] .au-sheetpage, .au-write[data-font="legible"] .au-page, .au-write[data-font="legible"] .au-title { font-family: "Atkinson Hyperlegible", var(--font-ui); }
.au-write[data-font="mono"] .au-sheetpage, .au-write[data-font="mono"] .au-page, .au-write[data-font="mono"] .au-title { font-family: var(--font-mono); }
.au-write[data-font="sans"] .au-page h1, .au-write[data-font="sans"] .au-page h2, .au-write[data-font="sans"] .au-page h3 { font-family: var(--font-ui); }
.au-write[data-font="legible"] .au-page h1, .au-write[data-font="legible"] .au-page h2, .au-write[data-font="legible"] .au-page h3 { font-family: "Atkinson Hyperlegible", var(--font-ui); }
.au-write[data-font="mono"] .au-page h1, .au-write[data-font="mono"] .au-page h2, .au-write[data-font="mono"] .au-page h3 { font-family: var(--font-mono); }
.au-write[data-size="s"] .au-page { font-size: var(--text-md); }
.au-write[data-size="l"] .au-page { font-size: var(--text-xl); }
.au-write[data-size="xl"] .au-page { font-size: var(--text-2xl); }
.au-write[data-lead="wide"] .au-page { line-height: 1.95; }
.au-write[data-lead="wider"] .au-page { line-height: 2.3; }
.au-write[data-width="narrow"] .au-sheetpage { max-width: calc(54ch + 2 * var(--space-6)); }
.au-write[data-width="wide"] .au-sheetpage { max-width: calc(92ch + 2 * var(--space-6)); }
/* Focus: the paragraph being written at full strength (a rule written
   for it by the desk), the rest and the toolbar stepped back. */
.au-write.is-focus #auPage > :not(ul):not(ol), .au-write.is-focus #auPage > ul > li, .au-write.is-focus #auPage > ol > li { opacity: .32; transition: opacity var(--dur-3) var(--ease-standard); }
.au-write.is-focus .au-toolbar { opacity: .45; transition: opacity var(--dur-3) var(--ease-standard); }
.au-write.is-focus .au-toolbar:hover, .au-write.is-focus .au-toolbar:focus-within { opacity: 1; }
/* Typewriter: room under the last line for it to come to the middle. */
.au-write.is-typewriter .au-sheetpage { padding-bottom: 50vh; }
/* The brief's due date, along the foot. */
.au-due { flex: none; font-variant-numeric: tabular-nums; }
.au-due[hidden] { display: none; }
.au-due.is-late { color: var(--danger); }
.au-radios { margin: 0 0 var(--space-2); padding: 0; border: 0; }
.au-radios legend { margin: 0 0 var(--space-1); padding: 0; font-size: var(--text-xs); font-weight: 600; color: var(--ink-soft); }
.au-radios .au-check { min-height: 32px; padding: 2px 0; }
.au-stats { max-width: 560px; }
.au-stats tbody th { width: 52%; color: var(--ink-soft); font-weight: 600; white-space: normal; }
.au-toolbar { display: flex; align-items: center; gap: 2px; min-width: 0; padding: var(--space-1) 10px; background: var(--paper-raised); border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: thin; }
.au-tb { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 34px; height: 34px; padding: 0 var(--space-2); border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--ink-soft); font-size: var(--text-sm); cursor: pointer; transition: background-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard); }
.au-tb:hover { background: var(--paper-inset); color: var(--ink); }
.au-tb[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-strong); }
.au-tb svg { width: 18px; height: 18px; }
.au-tb b, .au-tb i { font-family: var(--font-display); font-size: var(--text-md); }
.au-tb-text { font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.au-tb-sep { flex: none; width: 1px; height: 20px; margin: 0 var(--space-1); background: var(--rule); }
.au .au-style { flex: none; width: auto; min-height: 34px; padding: 4px var(--space-2); font-size: var(--text-xs); font-weight: 600; }

.au-paper { min-height: 0; overflow-y: auto; background: var(--paper); }
/* The column is a measure of the page's own type: 68 characters of the
   serif at --text-lg, as a printed page would set it. */
.au-sheetpage { max-width: calc(var(--measure) + 2 * var(--space-6)); margin: 0 auto; padding: var(--space-7) var(--space-6) var(--space-9); font: var(--text-lg)/var(--leading-prose) var(--font-display); }
.au .au-title { display: block; width: 100%; min-height: 0; margin: 0 0 var(--space-5); padding: 0; border: 0; border-radius: 0; background: transparent; font: 650 var(--text-3xl)/1.15 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.au .au-title:focus { outline: none; border: 0; }
.au .au-title::placeholder { color: var(--ink-faint); }
.au-briefnote { margin: 0 0 var(--space-4); padding: var(--space-2) var(--space-3); border-left: 2px solid var(--accent); background: var(--paper-inset); font-size: var(--text-xs); line-height: 1.5; color: var(--ink-soft); }
.au-briefnote[hidden] { display: none; }
.au-briefnote summary { cursor: pointer; margin-top: var(--space-1); }

.au-page { min-height: 50vh; outline: none; font: var(--text-lg)/var(--leading-prose) var(--font-display); color: var(--ink); white-space: pre-wrap; overflow-wrap: break-word; caret-color: var(--accent); }
/* The page is the one place to type and the caret shows where it is; the
   site's ring (theme.css, !important) would frame the whole text for as
   long as anybody writes. */
.au-page:focus, .au-page:focus-visible { outline: none !important; }
.au-page p, .au-page blockquote, .au-page ul, .au-page ol { margin: 0 0 .8em; }
.au-page h1, .au-page h2, .au-page h3 { margin: 1.2em 0 .5em; font-family: var(--font-display); font-weight: 650; line-height: 1.25; letter-spacing: -.01em; }
.au-page h1 { font-size: var(--text-2xl); }
.au-page h2 { font-size: var(--text-xl); }
.au-page h3 { font-size: var(--text-lg); }
.au-page > :first-child { margin-top: 0; }
.au-page blockquote { padding-left: 1em; border-left: 2px solid var(--rule-strong); color: var(--ink-soft); }
.au-page ul, .au-page ol { padding-left: 1.4em; }
.au-page a, .av-doc .au-link { color: var(--accent-strong); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.au-page sup.au-fn, .av-doc sup.au-fn { margin: 0 1px; padding: 0 3px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-strong); font: 600 var(--text-2xs)/1 var(--font-sans); cursor: pointer; user-select: none; }

/* The site's privacy badge sits at the right of this bar, as on Case's
   window, so the bar keeps room for it. */
body.au-app #ppBadge { left: auto; right: var(--space-2); bottom: var(--space-1); min-height: 24px; padding: 1px var(--space-2); font-size: var(--text-2xs); box-shadow: none; }
.au-status { display: flex; align-items: center; gap: var(--space-2); min-width: 0; padding: 6px 150px 6px var(--space-3); border-top: 1px solid var(--rule); background: var(--paper-raised); font-size: var(--text-xs); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.au-status > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.au-rec-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--good); }
/* The count, which is also the way to set a goal for the length. */
.au-statbtn { flex: none; min-height: 28px; padding: 2px var(--space-2); border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--ink-soft); font: inherit; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; }
.au-statbtn:hover { border-color: var(--rule); background: var(--paper-inset); color: var(--ink); }
.au-statbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.au-statbtn.is-met { color: var(--good); }
/* After words arrive from outside: the offer to say where they came from,
   at the foot of the page, over the text, until typing goes on. */
.au-srcbar { position: sticky; bottom: var(--space-3); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); width: max-content; max-width: calc(100% - 2 * var(--space-4)); margin: 0 auto var(--space-3); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule-strong), 0 8px 24px rgba(0, 0, 0, .12); font-size: var(--text-xs); color: var(--ink-soft); animation: au-arrive var(--dur-3) var(--ease-standard); }
.au-srcbar[hidden] { display: none; }


/* ---------------------------------------------------------------- drawing */

/* The sheet, with the layers beside it as a desktop editor keeps its
   panel; on a phone the panel goes under the sheet. */
.au-drawwrap { display: flex; align-items: flex-start; gap: var(--space-4); max-width: 1440px; margin: var(--space-5) auto; padding: 0 var(--space-5); }
.au-sheet { flex: 1; min-width: 0; }
.au-layers { flex: none; width: 260px; padding: var(--space-3); border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule); }
.au-layers-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin: 0 0 var(--space-2); }
.au-layers-head h3 { margin: 0; font: 600 var(--text-2xs)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.au-layer-list { list-style: none; margin: 0; padding: 0; }
.au-layer { display: flex; align-items: center; gap: 2px; padding: 2px; border-radius: var(--radius-md); }
.au-layer.is-on { background: var(--accent-soft); }
.au-layer .au-tb { min-width: 30px; width: 30px; padding: 0; }
.au-layer .au-tb svg { width: 16px; height: 16px; }
.au-layer .au-tb:disabled { opacity: .35; cursor: default; }
.au-layer .au-tb[data-lact="vis"][aria-pressed="false"] { color: var(--ink-faint); background: transparent; border-color: transparent; }
.au-layer .au-tb[data-lact="vis"][aria-pressed="true"] { background: transparent; border-color: transparent; color: var(--ink-soft); }
.au-layer-gap { flex: none; width: 30px; }
.au-layer-pick { flex: 1; min-width: 0; min-height: 34px; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink); text-align: left; font-size: var(--text-xs); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.au-layer.is-hidden .au-layer-pick { color: var(--ink-faint); font-weight: 400; }
.au-layer-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.au-sheet-canvas { display: block; border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--rule); touch-action: none; cursor: crosshair; background: var(--paper-raised); }
.au-swatch { flex: none; width: 34px; height: 34px; padding: 0; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; cursor: pointer; }
.au-swatch::before { content: ""; display: block; width: 18px; height: 18px; margin: auto; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 1px var(--rule-strong); }
.au-swatch[aria-pressed="true"] { border-color: var(--accent-border); background: var(--accent-soft); }
.au-draw .au-field-inline { margin: 0 var(--space-2); }
.au-draw input[type="range"] { width: 110px; }

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

.au-dialog { width: min(480px, calc(100vw - 24px)); padding: var(--space-5); 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); }
.au-dialog-wide { width: min(640px, calc(100vw - 24px)); }
.au-dialog::backdrop { background: rgba(10, 10, 16, .4); }
.au-dialog h2 { margin: 0 0 var(--space-3); font-size: var(--text-lg); }
.au-dialog h3 { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-sm); color: var(--ink-soft); }
.au-keys { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px var(--space-4); margin: 0; font-size: var(--text-xs); }
.au-keys dt { margin: 0; }
.au-keys dd { margin: 0; color: var(--ink-soft); }
.au kbd, .av kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--paper); font: 600 var(--text-2xs) var(--font-mono); color: var(--ink-soft); }

/* ---------------------------------------------------------------- the report */

.av { max-width: 980px; }
.av-verdict { padding: var(--space-4) var(--space-4) var(--space-3); border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule); border-left: 4px solid var(--rule-strong); }
.av-verdict.is-ok { border-left-color: var(--good); }
.av-verdict.is-warn { border-left-color: var(--warn); }
.av-verdict.is-bad { border-left-color: var(--danger); }
.av-verdict h2 { margin: 0; font: 650 var(--text-xl)/1.25 var(--font-headline); }
.av-of { margin: var(--space-1) 0 0; font-size: var(--text-xs); color: var(--ink-faint); overflow-wrap: anywhere; }
.av-checks { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.av-checks li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: var(--space-2); padding: 6px 0; border-top: 1px solid var(--rule); font-size: var(--text-sm); line-height: 1.5; overflow-wrap: anywhere; }
.av-checks b { font-weight: 650; }
.av-dot { width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--ink-faint); }
.av-checks .is-ok .av-dot { background: var(--good); }
.av-checks .is-bad .av-dot { background: var(--danger); }
.av-checks .is-note .av-dot { background: transparent; box-shadow: inset 0 0 0 2px var(--ink-faint); }
.av-checks .is-bad b { color: var(--danger); }
.av-honest { margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--paper-inset); font-size: var(--text-sm); line-height: var(--leading-prose); }
.av-honest h3 { margin: 0 0 var(--space-1); font-size: var(--text-sm); }
.av-honest p { margin: 0 0 var(--space-2); max-width: var(--measure); color: var(--ink-soft); }
.av-honest p:last-child { margin-bottom: 0; }
.av-sec { margin: var(--space-6) 0 0; }
.av-sec > h3 { margin: 0 0 var(--space-2); padding-bottom: var(--space-1); border-bottom: 1px solid var(--rule-strong); font-size: var(--text-md); }
.av-key { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin: var(--space-1) 0 0; font-size: var(--text-2xs); color: var(--ink-faint); }
.av-k { display: inline-block; width: 12px; height: 8px; margin-right: 4px; vertical-align: middle; border-radius: var(--radius-sm); }
.av-k-typed { background: var(--ink-faint); }
.av-k-pasted { background: var(--warn); }
.av-k-len { height: 2px; background: var(--ink); }
.av-k-stamp { width: 2px; height: 10px; background: var(--accent); }
.av-timeline { display: block; width: 100%; height: auto; }
.av-t-typed { fill: var(--ink-faint); }
.av-t-pasted { fill: var(--warn); }
.av-t-len { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.av-t-axis { stroke: var(--rule-strong); }
.av-t-gap { stroke: var(--ink-faint); stroke-width: 1.5; stroke-dasharray: 2 3; }
.av-k-gap { width: 0; height: 10px; border-left: 1px dashed var(--ink-faint); border-radius: 0; }
.av-t-stamp { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 3; }
.av-t-label { fill: var(--ink-faint); font: var(--text-2xs) var(--font-sans); }
.av-bad { color: var(--danger); font-weight: 600; }
/* Positioned, so that a cell's words kept for a screen reader alone (an
   absolutely placed .av-sr) are held inside the frame that scrolls, not
   laid out at the table's far edge, past a phone's: 575 px of sideways
   scroll at 390 in a window that is not a phone's. */
.av-scroll { position: relative; overflow-x: auto; }

.av-replay { border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule); overflow: hidden; }
.av-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--rule); }
.av-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 6px 14px; border: 1px solid var(--rule-strong); border-radius: var(--radius-md); background: var(--paper-raised); color: var(--ink); font-weight: 600; cursor: pointer; }
.av-btn-main { border-color: var(--accent); background: var(--accent); color: var(--on-accent); min-width: 96px; }
.av-btn-main:hover { background: var(--accent-strong); }
.av-btn svg { width: 16px; height: 16px; fill: currentColor; }
.av-field { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--ink-soft); font-weight: 600; }
.av .av-field select { min-height: 36px; padding: 4px var(--space-2); border: 1px solid var(--rule-strong); border-radius: var(--radius-md); background: var(--paper); font-size: var(--text-xs); }
.av-check { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: var(--text-xs); color: var(--ink-soft); cursor: pointer; }
.av-check input { width: 16px; height: 16px; accent-color: var(--accent); }
.av-when { font: var(--text-xs) var(--font-mono); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.av-scrub { display: block; width: calc(100% - 2 * var(--space-3)); margin: var(--space-3) var(--space-3) 0; accent-color: var(--accent); }
.av-what { margin: var(--space-1) var(--space-3) var(--space-2); min-height: 1.5em; font-size: var(--text-xs); color: var(--ink-soft); }
.av-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); padding: 0 var(--space-3) var(--space-2); font-size: var(--text-2xs); color: var(--ink-soft); }
.av-doc { max-height: 460px; overflow-y: auto; padding: var(--space-4) var(--space-5); border-top: 1px solid var(--rule); background: var(--paper); font: var(--text-md)/var(--leading-prose) var(--font-display); white-space: pre-wrap; overflow-wrap: break-word; }
.av-doc:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.av-doc p, .av-doc blockquote, .av-doc ul, .av-doc ol { margin: 0 0 .7em; }
.av-doc h1, .av-doc h2, .av-doc h3 { margin: 1em 0 .4em; font-family: var(--font-display); line-height: 1.25; }
.av-doc h1 { font-size: var(--text-xl); }
.av-doc h2 { font-size: var(--text-lg); }
.av-doc h3 { font-size: var(--text-md); }
.av-doc blockquote { padding-left: 1em; border-left: 2px solid var(--rule-strong); color: var(--ink-soft); }
.av-doc mark, .av-legend mark { padding: 0 1px; border-radius: var(--radius-sm); color: inherit; }
.av mark.av-pa { background: var(--warn-soft); box-shadow: inset 0 -2px 0 var(--warn); }
.av mark.av-pq { background: var(--accent-soft); }
.av mark.av-pm { background: var(--paper-inset); box-shadow: inset 0 -2px 0 var(--ink-faint); }
.av mark.av-pw { background: var(--paper-inset); color: var(--ink-faint); letter-spacing: -.1em; }
.av mark.av-now { background: var(--good-soft); box-shadow: inset 0 -2px 0 var(--good); }
/* Code (a record from OBSCURA Umbra): one file at a time, in the site's
   monospace, wrapped so a long line never scrolls the page sideways. */
.av mark.av-ps { background: none; color: var(--ink-soft); box-shadow: inset 0 -1px 0 var(--rule-strong); }
.av-codebar { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-5) 0; border-top: 1px solid var(--rule); background: var(--paper); }
.av-codebar .av-field select { max-width: min(100%, 36ch); }
.av-codewhere { padding-bottom: 10px; font: var(--text-xs)/1.4 var(--font-mono); font-variant-numeric: tabular-nums; }
.av-doc.av-code, .av-code { margin: 0; font: var(--text-sm)/1.6 var(--font-mono); tab-size: 4; white-space: pre-wrap; overflow-wrap: anywhere; }
.av-doc.av-code { border-top: 0; }
.av-cmp-doc.av-code { font: var(--text-xs)/1.6 var(--font-mono); }
/* A vector drawing's frames: its SVG drawn as a picture, never wider than
   the report or taller than the replay. */
.av-vsheet { display: flex; justify-content: center; }
.av-frame { display: block; max-width: 100%; max-height: 460px; height: auto; box-shadow: 0 0 0 1px var(--rule); }
.av-frame-said { margin: 0; padding: var(--space-4) 0; }
.av-files code, .av-runs code { font: var(--text-xs)/1.4 var(--font-mono); overflow-wrap: anywhere; }
.av-sheet { padding: var(--space-3); border-top: 1px solid var(--rule); background: var(--paper); }
.av-sheet canvas { display: block; border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--rule); }
.av-link { min-height: 32px; padding: 0 var(--space-1); border: 0; background: none; color: var(--accent-strong); font-size: var(--text-xs); font-weight: 600; cursor: pointer; white-space: nowrap; }
.av-link:hover { text-decoration: underline; }

/* The strip of events under the slider, inset by the thumb's half-width
   so that the thumb stands over the event it shows. */
.av-track { position: relative; margin: var(--space-1) calc(var(--space-3) + 8px) 0; height: 26px; cursor: pointer; touch-action: none; }
.av-track-svg { display: block; width: 100%; height: 26px; }
.av-tr-axis { stroke: var(--rule-strong); vector-effect: non-scaling-stroke; }
.av-tr-typed { fill: var(--ink-faint); }
.av-tr-out { fill: var(--warn); }
.av-tr-moved { fill: var(--accent); }
.av-tr-del { fill: var(--danger); }
.av-track-head { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--ink); pointer-events: none; }
.av-track-key { padding: 0 var(--space-3); margin: var(--space-1) 0 0; }
.av-k-moved { background: var(--accent); }
.av-k-del { background: var(--danger); }
.av-t-deleted { fill: var(--danger); }
.av-tools { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 0; }
.av-note { margin: var(--space-1) 0 0; font-size: var(--text-2xs); line-height: 1.5; max-width: var(--measure); }
.av-sessions td, .av-paras td { font-variant-numeric: tabular-nums; }
/* On a phone these scroll sideways in their frame rather than fold every
   cell to a word a line. */
.av-sessions { min-width: 600px; }
.av-paras { min-width: 680px; }
.av-paras .av-lead { min-width: 16ch; max-width: 34ch; overflow-wrap: anywhere; }
.av-paras tr.is-out td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
/* The replay's own keys, and its two steps either side of Play. */
.av-steps { display: inline-flex; gap: var(--space-1); }
.av-icon { min-width: 36px; padding: 0; }
.av-keys-hint { margin: 0 var(--space-3) var(--space-2); font-size: var(--text-2xs); line-height: 1.9; color: var(--ink-faint); }
/* Two points side by side: the text at each, what went out struck
   through on the left and what came in underlined on the right. */
.av-cmp-pick { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-3); }
.av-cmp-pick .av-field { flex-direction: column; align-items: stretch; gap: var(--space-1); min-width: 0; flex: 1 1 240px; }
.av .av-cmp-pick select { width: 100%; min-height: 36px; padding: 4px var(--space-2); border: 1px solid var(--rule-strong); border-radius: var(--radius-md); background: var(--paper); font-size: var(--text-xs); }
.av-cmp-here { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.av-cmp-sum { margin: var(--space-3) 0 var(--space-2); font-size: var(--text-sm); line-height: 1.5; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.av-cmp-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.av-cmp-col { min-width: 0; }
.av-cmp-at { margin: 0 0 var(--space-1); font: 600 var(--text-2xs)/1.5 var(--font-mono); letter-spacing: .04em; color: var(--ink-soft); }
.av-cmp-doc { max-height: 380px; overflow-y: auto; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule); font: var(--text-sm)/var(--leading-prose) var(--font-display); white-space: pre-wrap; overflow-wrap: break-word; }
.av-cmp-doc:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.av-cmp-col canvas { display: block; max-width: 100%; border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--rule); }
.av del.av-del { background: var(--danger-soft); color: inherit; text-decoration-color: var(--danger); text-decoration-thickness: 2px; }
.av ins.av-ins { background: var(--good-soft); color: inherit; text-decoration-color: var(--good); text-decoration-thickness: 2px; text-underline-offset: 2px; }
.av-cmp-events { margin-top: var(--space-3); font-size: var(--text-sm); }
.av-cmp-events summary { min-height: 32px; cursor: pointer; font-weight: 600; }
.av-cmp-table { min-width: 520px; }
.av-cmp-table td { font-variant-numeric: tabular-nums; }
/* The brief's words and its rubric. */
.av-h4 { margin: var(--space-4) 0 var(--space-2); font: 600 var(--text-2xs)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.av-brief-text { margin: var(--space-3) 0 0; font-size: var(--text-sm); line-height: 1.5; }
.av-brief-text summary { min-height: 32px; cursor: pointer; font-weight: 600; }
.av-brief-text p { max-width: var(--measure); color: var(--ink-soft); overflow-wrap: anywhere; }
.av-rubric { min-width: 480px; }
.av-rubric tbody th { width: 28%; color: var(--ink); font-weight: 600; white-space: normal; }
.av-rubric-total th, .av-rubric-total td { border-bottom: 0; font-weight: 600; }
.av-sources { list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); line-height: 1.5; }
.av-sources li { padding: var(--space-2) 0; border-bottom: 1px solid var(--rule); overflow-wrap: anywhere; }
.av-sources q { color: var(--ink-soft); }

/* ---------------------------------------------------------------- the checking page */

.vf-drop { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); margin: var(--space-4) 0 var(--space-5); padding: var(--space-5); border: 2px dashed var(--rule-strong); border-radius: var(--radius-lg); background: var(--paper-raised); transition: border-color var(--dur-2) var(--ease-standard), background-color var(--dur-2) var(--ease-standard); }
.vf-drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.vf-drop p { margin: 0; }
.vf-drop .vf-big { font-weight: 650; font-size: var(--text-md); }
.vf-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.vf-file { position: relative; cursor: pointer; padding: 10px 18px; line-height: normal; border: 0; }
.vf-note { font-size: var(--text-xs); color: var(--ink-faint); }
.vf .av { margin: 0 0 var(--space-6); }
.vf-about { max-width: var(--measure); margin: var(--space-7) 0 var(--space-6); font-size: var(--text-sm); line-height: var(--leading-prose); color: var(--ink-soft); }
.vf-about h2 { margin: 0 0 var(--space-2); font-size: var(--text-lg); color: var(--ink); }
.vf-about ol { padding-left: var(--space-5); }
.vf-about li { margin: 0 0 var(--space-2); }
.vf-said { min-height: 1.4em; margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--ink-soft); }
.vf-said.is-bad { color: var(--danger); }
.vf-brief { margin: var(--space-5) 0 0; font-size: var(--text-sm); color: var(--ink-soft); }
.vf-brief summary { cursor: pointer; font-weight: 600; color: var(--ink); min-height: 32px; }
/* Several records at once: one line each, the one shown below marked. */
.vf-many { margin: 0 0 var(--space-5); }
.vf-many[hidden] { display: none; }
.vf-mhead { margin: 0 0 var(--space-1); font-size: var(--text-lg); }
/* The heading the page moves to once records are checked, so a screen
   reader starts there; it is not a control, so it wears no ring. */
.vf-mhead:focus-visible, .av-verdict h2[tabindex="-1"]:focus-visible { outline: none !important; }
.vf-mfacts { margin: 0 0 var(--space-3); max-width: var(--measure); font-size: var(--text-sm); line-height: 1.5; color: var(--ink-soft); }
.vf-mtable { min-width: 1180px; }
.vf-mtop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin: 0 0 var(--space-1); }
.vf-mtop .vf-mhead { margin: 0; }
/* A column's heading is its sort: the whole heading is the button. */
.vf-mtable thead th { padding: 0; }
.vf-sort { display: inline-flex; align-items: center; gap: var(--space-1); width: 100%; min-height: 36px; padding: 6px var(--space-2); border: 0; background: transparent; color: var(--ink-faint); font: inherit; font-weight: 600; text-align: left; white-space: nowrap; cursor: pointer; }
.vf-mtable th.n .vf-sort { justify-content: flex-end; }
.vf-sort:hover { color: var(--ink); }
.vf-mtable th[aria-sort] .vf-sort { color: var(--ink); }
.vf-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.vf-sort-mark { display: inline-block; width: 1ch; font-family: var(--font-mono); }
.vf-mflags { min-width: 26ch; max-width: 40ch; }
.vf-mflags ul { margin: 0; padding-left: 1.1em; }
.vf-mflags li { margin: 0 0 2px; line-height: 1.4; overflow-wrap: anywhere; }
.vf-noted { font: 600 var(--text-2xs)/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-strong); }
.vf-lines { margin-top: var(--space-2); }
/* The reader's own note on the record shown. */
.vf-notebox { max-width: 760px; margin: 0 0 var(--space-6); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule); }
.vf-notebox[hidden] { display: none; }
.vf-notebox h2 { margin: 0 0 var(--space-1); font-size: var(--text-lg); }
.vf-notetext { display: block; width: 100%; min-height: 120px; margin: var(--space-2) 0; padding: var(--space-2); border: 1px solid var(--rule-strong); border-radius: var(--radius-md); background: var(--paper); color: var(--ink); font: var(--text-sm)/1.5 var(--font-sans); resize: vertical; }
.vf-notetext:focus { border-color: var(--accent); outline: 2px solid var(--accent-border); outline-offset: 0; }
.vf-mtable td { font-variant-numeric: tabular-nums; }
.vf-mtable code { white-space: nowrap; }
.vf-mfile { overflow-wrap: anywhere; min-width: 14ch; }
.vf-mtable tr.is-shown td { background: var(--accent-soft); }
.vf-mdot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--ink-faint); vertical-align: middle; }
.vf-mdot.is-ok { background: var(--good); }
.vf-mdot.is-warn { background: var(--warn); }
.vf-mdot.is-bad { background: var(--danger); }

/* ---------------------------------------------------------------- narrow */

/* A phone keeps the window as it is on a computer: the bar at the top,
   the screen under it scrolling on its own, and while writing the
   toolbar above the page and the record's state below it, both always in
   view. The bar wraps onto three rows. */
@media (max-width: 760px) {
  .au-top { flex-wrap: wrap; row-gap: var(--space-1); }
  .au-tabs { order: 5; flex: 1 1 100%; }
  .au-state { order: 6; flex: 1 1 100%; max-width: none; }
  .au-state:empty { display: none; }
  .au-page-view { padding: var(--space-4) var(--space-4) var(--space-7); }
  .au-cols { grid-template-columns: minmax(0, 1fr); }
  .au-sheetpage { padding: var(--space-5) var(--space-4) var(--space-8); }
  .au .au-title { font-size: var(--text-2xl); }
  .au-page { font-size: var(--text-md); }
  .au-drawwrap { flex-direction: column; align-items: stretch; padding: 0 var(--space-3); }
  /* On a phone the outline sits over the page's foot, as a drawer. */
  .au-writebody { position: relative; }
  .au-outline { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; width: auto; max-height: 55%; border-left: 0; border-top: 1px solid var(--rule-strong); box-shadow: 0 -10px 30px rgba(0, 0, 0, .14); }
  .au-viewmenu { top: 52px; right: 8px; left: 8px; width: auto; }
  .au-viewmenu .au-fields { grid-template-columns: minmax(0, 1fr); }
  .au-layers { width: auto; }
  .au-rubric-row { grid-template-columns: minmax(0, 1fr) 90px; }
  .au-rubric-row .au-field:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .au-rubric-row [data-r-del] { grid-column: 1 / -1; justify-self: start; }
  .au-status { font-size: var(--text-2xs); }
  .av-doc { padding: var(--space-3); }
  .av-facts th { width: 46%; }
  .av-cmp-cols { grid-template-columns: minmax(0, 1fr); }
  .av-cmp-here .av-btn { flex: 1 1 auto; }
  .au-keys { grid-template-columns: minmax(0, 1fr); }
  .au-keys dd { margin-bottom: var(--space-2); }
}

/* A finger needs more than a pointer. */
@media (pointer: coarse) {
  .au-home, .au-work, .au-tabs button, .au-btn, .au-link, .au-check, .au-menu button, .au-tb, .au-swatch, .au-icon-btn, .au-statbtn,
  .au input:not([type="checkbox"]):not([type="file"]), .au select, .au .au-style, .av-btn, .av-check, .av-link, .av .av-field select, .vf-brief summary, .av .av-cmp-pick select, .av-cmp-events summary, .av-brief-text summary, .vf-sort, .au-outline-list button, .au-radios .au-check { min-height: 44px; }
  .av-icon { min-width: 44px; }
  .au-home, .au-icon-btn, .au-tb, .au-swatch { min-width: 44px; }
  .au-layer .au-tb { width: 44px; min-width: 44px; }
  .au-layer-pick { min-height: 44px; }
  .au-layer-gap { width: 44px; }
  /* theme.css sets every field to 16px on a touch screen so that iOS does
     not zoom into it; the title is larger than that already, and stays so. */
  /* theme.css's rule names six :not()s, which outranked a class here, and
     the title was set at 16px on every phone: by its id it wins. */
  .au #auTitle { font-size: var(--text-2xl) !important; }
  .au-check input { width: 22px; height: 22px; }
  .av-scrub { height: 44px; }
  /* The badge sits in the status bar, as Write's does, not above it over
     the start screen's cards. */
  body.au-app #ppBadge { min-height: 44px; bottom: 2px; right: var(--space-2); }
  .au-status { min-height: 48px; padding-right: 64px; }
  /* The start, replay, record, share and brief pages have no status bar, so
     on a phone the foot of the window is kept as one for the badge, as in
     Practice, and the page scrolls above it rather than under the badge. */
  .au:has(.au-page-view:not([hidden])) { box-sizing: border-box; padding-bottom: 48px; }
  .au:has(.au-page-view:not([hidden]))::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 48px; background: var(--paper-raised); border-top: 1px solid var(--rule); }
}

/* The bundle's two ways out, side by side, wrapping on a phone. */
.au-row-btns { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }

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

/* The report on paper: the verdict, the figures and the writing as the
   replay shows it, in black on white whatever the theme, without the
   page's chrome or the replay's controls. In the application only the
   screen open now is printed. */
@media print {
  .os-topbar, .os-footer, .vf-drop, .vf-said, .vf-about, .vf-brief, .vf-many, .vf-notebox, .page-header, #ppBadge,
  .av-tools, .av-controls, .av-scrub, .av-track, .av-track-key, .av-link, .av-legend, .av-keys-hint, .av-cmp-pick { display: none !important; }
  .av-cmp-doc { max-height: none; overflow: visible; }
  .av del.av-del, .av ins.av-ins { background: none !important; }
  body.au-app { height: auto; overflow: visible; }
  .au { display: block; height: auto; }
  .au-top, .au-boot, .au-lead, .pro-lock, .pro-lock-bar, .au-dialog { display: none !important; }
  .au-main { overflow: visible; }
  .au-page-view { height: auto; overflow: visible; padding: 0; animation: none; }
  .av, .av * { color: black !important; box-shadow: none !important; }
  .av { max-width: none; }
  .av-verdict, .av-honest, .av-replay { background: none !important; border: 1px solid gray; }
  .av-checks .is-note .av-dot { border: 2px solid gray; }
  .av-doc { max-height: none; overflow: visible; background: none !important; border-top: 1px solid gray; }
  .av mark { background: none !important; text-decoration: underline; text-decoration-thickness: 2px; }
  .av mark.av-now { text-decoration: none; }
  .av-table th, .av-table td { border-color: silver; }
  .av-sec { break-inside: avoid-page; }
  .av-t-typed, .av-tr-typed { fill: gray; }
  .av-t-label { fill: dimgray; }
  .av-t-len { stroke: black; }
}