/* Copyright © 2026 Falcontext. All rights reserved. Not open source: see LICENSE. */
/* The writing pad (roadmap #21): calm, full screen, a book page to write on. */
:root {
  --bg: #fbf8f1; --ink: #1f2a24; --soft: #5d6b63; --line: #e2d9c7; --panel: #f3ede0;
  --accent: #1f7a4d; --danger: #b3261e; --sel: rgba(34, 197, 94, .22); --cmt: rgba(250, 204, 21, .28); --cmt-on: rgba(250, 204, 21, .5); --cmt-line: #d4a600; --find: rgba(249, 115, 22, .25); --find-on: rgba(249, 115, 22, .6);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #121a16; --ink: #e8ede7; --soft: #9fb0a6; --line: #26352d; --panel: #18231d; --accent: #4ade80; --danger: #f2958e; --sel: rgba(74, 222, 128, .25); --cmt: rgba(250, 204, 21, .16); --cmt-on: rgba(250, 204, 21, .32); --cmt-line: #c9a227; --find: rgba(251, 146, 60, .22); --find-on: rgba(251, 146, 60, .55); }
}
/* The bar's ☾/☀ button: light or dark by choice (data-theme), else the device's. */
:root[data-theme="light"] { color-scheme: light; --bg: #fbf8f1; --ink: #1f2a24; --soft: #5d6b63; --line: #e2d9c7; --panel: #f3ede0; --accent: #1f7a4d; --danger: #b3261e; --sel: rgba(34, 197, 94, .22); --cmt: rgba(250, 204, 21, .28); --cmt-on: rgba(250, 204, 21, .5); --cmt-line: #d4a600; --find: rgba(249, 115, 22, .25); --find-on: rgba(249, 115, 22, .6); }
:root[data-theme="dark"] { color-scheme: dark; --bg: #121a16; --ink: #e8ede7; --soft: #9fb0a6; --line: #26352d; --panel: #18231d; --accent: #4ade80; --danger: #f2958e; --sel: rgba(74, 222, 128, .25); --cmt: rgba(250, 204, 21, .16); --cmt-on: rgba(250, 204, 21, .32); --cmt-line: #c9a227; --find: rgba(251, 146, 60, .22); --find-on: rgba(251, 146, 60, .55); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); }
body {
  font: var(--fs-l)/1.4 var(--font-ui);
  display: flex; flex-direction: column; height: 100dvh; overflow: hidden;
  -webkit-text-size-adjust: 100%;
}
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }

.pad-top {
  display: flex; align-items: center; gap: var(--sp-m); padding: var(--sp-m) var(--sp-l);
  padding-top: max(var(--sp-m), env(safe-area-inset-top));
  border-bottom: 1px solid var(--line); background: var(--bg); flex: none;
}
.pad-icon { border: 0; background: none; padding: var(--sp-s); border-radius: var(--r-m); line-height: 0; font-size: var(--fs-2xl); }
.pad-icon:hover, .pad-icon:focus-visible { background: var(--panel); }
.pad-title {
  flex: 1; min-width: 0; border: 0; background: none; padding: var(--sp-xs) var(--sp-s); border-radius: var(--r-m);
  font-family: var(--font-serif); font-size: var(--fs-xl); font-weight: 600;
}
.pad-title:focus { outline: none; background: var(--panel); }
.pad-status { font-size: var(--fs-m); color: var(--soft); white-space: nowrap; }
.pad-status.bad { color: var(--danger); font-weight: 600; white-space: normal; }

.pad-tools {
  display: flex; align-items: center; gap: var(--sp-xs); padding: var(--sp-s) var(--sp-l); overflow-x: auto;
  border-bottom: 1px solid var(--line); background: var(--bg); flex: none; scrollbar-width: none;
}
.pad-tools::-webkit-scrollbar { display: none; }
.pad-tools button {
  border: 1px solid transparent; background: none; border-radius: var(--r-m); padding: var(--sp-s) var(--sp-m);
  font-size: var(--fs-m); white-space: nowrap; color: var(--soft);
}
.pad-tools button:hover { background: var(--panel); color: var(--ink); }
.pad-tools button.on { border-color: var(--line); background: var(--panel); color: var(--ink); }
/* Quotes in the book's font, where “ ” and " " look different. */
.pad-q { font-family: var(--font-serif); }
.pad-tools .pad-menu-btn { display: inline-flex; align-items: center; gap: var(--sp-xs); }
.pad-style .pad-q { font-size: var(--fs-l); color: var(--ink); min-width: 4.2em; text-align: left; }
.pad-qmenu .pad-s-h1 { font-size: 24px; font-weight: 600; }
.pad-qmenu .pad-s-h2 { font-size: var(--fs-2xl); font-weight: 600; }
.pad-qmenu .pad-s-break { color: var(--soft); letter-spacing: .3em; }
/* Font: its name, in itself; on a phone just "Aa". The menu scrolls if it's taller than the screen. */
.pad-tools .pad-font .pad-font-name { display: inline-block; max-width: 8.5em; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-l); color: var(--ink); }
.pad-font-menu { max-height: calc(100dvh - 120px); overflow-y: auto; }
.pad-font-menu .pad-q { font-size: var(--fs-2xl); }
.pad-qmenu .pad-qsep { border: 0; border-top: 1px solid var(--line); margin: var(--sp-xs) var(--sp-s); }
.pad-qmenu .pad-qhead { margin: var(--sp-s) var(--sp-l) var(--sp-2xs) var(--sp-3xl); font-size: var(--fs-s); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--soft); }
.pad-qmenu .pad-qx { margin-left: auto; padding: 0 var(--sp-s); border-radius: var(--r-s); font-size: var(--fs-xl); line-height: 1.2; color: var(--soft); }
.pad-qmenu .pad-qx:hover { background: var(--line); color: var(--danger); }
.pad-tools .pad-size .pad-size-name { display: inline-block; min-width: 1.3em; text-align: center; font-size: var(--fs-m); color: var(--ink); font-variant-numeric: tabular-nums; }
.pad-size-menu { min-width: 120px; max-height: calc(100dvh - 120px); overflow-y: auto; }
.pad-size-menu .pad-q { font-size: var(--fs-l); font-variant-numeric: tabular-nums; }
.pad-font-aa { display: none; font: 600 var(--fs-l)/1 "Iowan Old Style", Georgia, serif; color: var(--ink); }
.pad-icon-i svg { display: block; }
/* Phones: "Aa" for the font (its name in the menu and the button's title). */
@media (max-width: 700px) { .pad-tools .pad-font .pad-font-name { display: none; } .pad-font-aa { display: inline; } }
/* Alignment, as in Google Docs: the bar shows the paragraph's, the menu all four. */
.pad-align-i { display: inline-flex; align-items: center; gap: var(--sp-l); }
.pad-align-i svg { flex: none; }
.pad-quotes .pad-q { font-size: var(--fs-2xl); line-height: 16px; height: 16px; letter-spacing: 1px; color: var(--ink); }
.pad-qmenu {
  position: fixed; z-index: 30; min-width: 190px; padding: var(--sp-xs); border: 1px solid var(--line); border-radius: var(--r-l);
  background: var(--bg); color: var(--ink); box-shadow: 0 8px 24px var(--shade-3);
}
.pad-qmenu button {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-xl); width: 100%;
  border: none; background: none; border-radius: var(--r-m); padding: var(--sp-m) var(--sp-l) var(--sp-m) var(--sp-3xl); text-align: left; position: relative; cursor: pointer;
}
.pad-qmenu button:hover, .pad-qmenu button:focus-visible { background: var(--panel); outline: none; }
.pad-qmenu button[aria-checked="true"]::before { content: "✓"; position: absolute; left: 9px; color: var(--accent); }
.pad-qmenu .pad-q { font-size: var(--fs-2xl); }
.pad-qmenu .pad-qname { font-size: var(--fs-m); color: var(--soft); }
/* A long book selected whole (padSelectAll in pad.js): shaded here, not
   by the browser's own selection, which is too much for a phone. */
.pad-editor.pad-all-selected .tiptap > * { background: var(--sel); }
/* Copy and Select all, under a long press in the text (phones): a dark
   box with an arrow to the selection, as in the Google Docs app (light in
   the dark theme). Under the selection, as the phone's own menu is above. */
.pad-selectall-menu {
  position: fixed; z-index: 30; min-width: 150px; border-radius: var(--r-l); background: var(--ink);
  box-shadow: 0 8px 24px var(--shade-3); font: var(--fs-l)/1.2 var(--font-ui);
}
.pad-selectall-menu::before {
  content: ""; position: absolute; top: -7px; left: var(--arrow, 24px); margin-left: calc(var(--sp-m) * -1);
  border: 8px solid transparent; border-top: 0; border-bottom: 7px solid var(--ink);
}
.pad-selectall-menu.above::before { top: auto; bottom: -7px; border-bottom: 0; border-top: 7px solid var(--ink); }
.pad-selectall-menu button {
  display: block; width: 100%; border: 0; background: none; color: var(--bg); font: inherit;
  padding: var(--sp-l) var(--sp-2xl); text-align: left; cursor: pointer;
}
.pad-selectall-menu button + button { border-top: 1px solid color-mix(in srgb, var(--bg) 22%, transparent); }
.pad-selectall-menu button:first-of-type { border-radius: var(--r-l) var(--r-l) 0 0; }
.pad-selectall-menu button:last-of-type { border-radius: 0 0 var(--r-l) var(--r-l); }
.pad-selectall-menu button:only-of-type { border-radius: var(--r-l); }
.pad-selectall-menu button[hidden] { display: none; }
.pad-selectall-menu button:active, .pad-selectall-menu button:hover { background: color-mix(in srgb, var(--bg) 14%, transparent); }
.pad-selectall-menu button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pad-tools select { margin-left: auto; max-width: 45%; font-size: var(--fs-m); padding: var(--sp-xs); border-radius: var(--r-m); border: 1px solid var(--line); background: var(--bg); }
.pad-sep { width: 1px; height: 18px; background: var(--line); margin: 0 var(--sp-xs); flex: none; }

.pad-main { flex: 1; min-height: 0; display: flex; }
/* A manuscript opened from a Google Doc or Word file: it's a copy. */
.pad-copy-note { display: flex; align-items: center; gap: var(--sp-m); padding: var(--sp-m) var(--sp-l) var(--sp-m) var(--sp-2xl); font-size: var(--fs-m); line-height: 1.45; color: var(--ink); background: var(--panel); border-bottom: 1px solid var(--line); flex: none; }
.pad-copy-note[hidden] { display: none; }
.pad-copy-text { flex: 1; min-width: 0; }
.pad-copy-x { font-size: var(--fs-2xl); color: var(--soft); }
.pad-copy-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pad-draft { flex: 1; min-width: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pad-editor { max-width: 40em; margin: 0 auto; padding: var(--sp-4xl) var(--sp-2xl) 40vh; }
/* Comments from a Word file or Google Doc (pad.js, layoutComments): their
   words marked as Google Docs marks them; the comments in a column beside
   the text where there's room (the page moves left for it), or on a
   phone, the one tapped under its words. */
.pad-editor { position: relative; }
.pad-cmt { background: var(--cmt); border-bottom: 2px solid var(--cmt-line); border-radius: 2px; cursor: pointer; }
.pad-cmt.pad-cmt-on { background: var(--cmt-on); }
body.pad-cmt-wide .pad-editor { max-width: min(40em, calc(100% - 300px)); margin: 0 auto 0 max(0px, calc((100% - 40em - 300px) / 2)); }
.pad-comments { position: absolute; top: 0; left: 100%; width: 270px; }
.pad-comments[hidden], .pad-cmt-pop[hidden] { display: none; }
.pad-cmt-card { position: absolute; left: 0; right: 0; padding: var(--sp-m) var(--sp-l); border: 1px solid var(--line); border-left: 3px solid var(--cmt-line); border-radius: var(--r-m); background: var(--bg); font-size: var(--fs-m); line-height: 1.4; cursor: pointer; box-shadow: 0 1px 3px var(--shade-1); }
.pad-cmt-card:hover { background: var(--panel); }
.pad-cmt-card.on { background: var(--panel); border-color: var(--cmt-line); box-shadow: 0 2px 8px var(--shade-2); }
.pad-cmt-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pad-cmt-by { font-weight: 600; font-size: var(--fs-m); color: var(--soft); margin-bottom: var(--sp-2xs); }
.pad-cmt-text { color: var(--ink); white-space: pre-wrap; overflow-wrap: break-word; }
.pad-cmt-pop { position: absolute; left: 12px; right: 12px; z-index: 5; padding: var(--sp-l) var(--sp-5xl) var(--sp-l) var(--sp-l); border: 1px solid var(--line); border-left: 3px solid var(--cmt-line); border-radius: var(--r-m); background: var(--bg); font-size: var(--fs-l); line-height: 1.4; box-shadow: 0 4px 16px var(--shade-2); }
.pad-cmt-x { position: absolute; top: 4px; right: 4px; font-size: var(--fs-2xl); color: var(--soft); }
.pad-cmt-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pad-editor .tiptap {
  outline: none; min-height: 60vh;
  /* The manuscript's font and line spacing (pad.js showDocLook). */
  font-family: var(--pad-font, var(--font-serif));
  font-size: var(--pad-size, 19px); line-height: var(--pad-lh, 1.725); caret-color: var(--accent);
  overflow-wrap: break-word;
}
.pad-editor .tiptap ::selection { background: var(--sel); }
/* A long book: the browser lays out and draws only the blocks near the
   screen, so a key typed doesn't redraw the whole book (most of each
   keystroke's time on a 120,000-word book). A block off screen keeps the
   height it last had, or a guess; jumps are put right in pad.js
   (scrollIntoView). Only in Chrome and its kin (pad.js sets the class):
   Safari (every browser on an iPhone) left the text invisible until it
   was selected. */
.draw-near-only .pad-editor .tiptap > * { content-visibility: auto; contain-intrinsic-size: auto 3.4em; }
/* ...except the empty line with the cursor in it (the placeholder marks it
   is-empty): a new paragraph (Enter) waited a frame to be drawn, and a key
   typed before it, as when the page was busy for a moment, went in behind
   the cursor ("The" came out as "heT"). */
.draw-near-only .pad-editor .tiptap > .is-empty { content-visibility: visible; }
/* And in Chrome the text is a box of its own (its paragraphs' spacing
   stays inside it): otherwise a key typed made Chrome go over every
   block of the book again, laying it out and placing it (about a third
   of each keystroke's time on a 3,700-paragraph book). Looks just the
   same; a jump to the very end stays there (pad.js). */
.draw-near-only .pad-editor .tiptap { display: flow-root; }
.pad-editor .tiptap p { margin: 0 0 .9em; }
.pad-editor .tiptap h1 { font-size: 1.5em; line-height: 1.3; margin: 1.6em 0 .8em; text-align: center; font-weight: 600; }
.pad-editor .tiptap h1:first-child { margin-top: .4em; }
.pad-editor .tiptap h2 { font-size: 1.15em; margin: 1.4em 0 .6em; font-weight: 600; }
.pad-editor .tiptap hr { border: 0; margin: 1.6em 0; text-align: center; }
.pad-editor .tiptap hr::after { content: "* * *"; color: var(--soft); letter-spacing: .3em; }
.pad-editor .tiptap hr.ProseMirror-selectednode::after { color: var(--accent); }
.pad-editor .tiptap blockquote { margin: 0 0 .9em; padding-left: 1em; border-left: 3px solid var(--line); font-style: italic; }
/* ☰ → Paragraphs: Indented. As in a printed book: no blank line, an
   indent at the start of each paragraph but the first after a chapter,
   scene heading or scene break. The original (rewriting) follows too. */
.pad-indented .pad-editor .tiptap > p { margin-bottom: 0; }
.pad-indented .pad-editor .tiptap > p + p { text-indent: 1.5em; }
.pad-indented .pad-editor .tiptap > p:last-child { margin-bottom: .9em; }
.pad-indented .pad-orig-text > p:not(.q):not(.li) { margin-bottom: 0; }
.pad-indented .pad-orig-text > p:not(.q):not(.li):not(.brk) + p:not(.q):not(.li):not(.brk) { text-indent: 1.5em; }
.pad-indented .pad-orig-text > p + :not(p), .pad-indented .pad-orig-text > p:not(.q):not(.li) + p.q, .pad-indented .pad-orig-text > p:not(.q):not(.li) + p.li { margin-top: .9em; }
.pad-indented .pad-editor .tiptap > p + blockquote, .pad-indented .pad-editor .tiptap > p + ul, .pad-indented .pad-editor .tiptap > p + ol { margin-top: .9em; }
/* A scene break typed as text, or a blank line (pad.js marks them, and the
   paragraph after; .brk in the original): no indent there either. */
.pad-indented .pad-editor .tiptap > p.pad-no-indent { text-indent: 0; }
/* ☰ → Text: Justified. Headings and scene breaks stay as they are. */
.pad-justified .pad-editor .tiptap p, .pad-justified .pad-orig-text p { text-align: justify; }
.pad-editor .tiptap p.is-editor-empty:first-child::before {
  content: attr(data-placeholder); float: left; height: 0; pointer-events: none; color: var(--soft); opacity: .7;
}

.pad-foot {
  display: flex; justify-content: space-between; gap: var(--sp-l); padding: var(--sp-s) var(--sp-xl);
  padding-bottom: max(var(--sp-s), env(safe-area-inset-bottom));
  font-size: var(--fs-m); color: var(--soft); border-top: 1px solid var(--line); background: var(--bg); flex: none;
}
.pad-foot #padWords { white-space: nowrap; }
.pad-foot #padBackup { text-align: right; }
.pad-foot .bad { color: var(--danger); }

/* Focus Mode (the web app's): just the page, and the line at the bottom. */
body.pad-focus .pad-top, body.pad-focus .pad-tools, body.pad-focus .pad-copy-note { display: none; }
body.pad-focus .pad-editor { padding-top: calc(48px + env(safe-area-inset-top, 0px)); }
.pad-tools .pad-focus-btn { display: inline-flex; align-items: center; gap: var(--sp-s); }
.pad-focus-btn:not(.locked) .pad-pro { display: none; }
.pad-foot .pad-focus-exit {
  border: 0; background: none; padding: 0; font: inherit; color: var(--soft); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; white-space: nowrap;
}
.pad-foot .pad-focus-exit:hover { color: var(--ink); text-decoration-color: var(--accent); }
.pad-foot .pad-focus-exit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-s); }
.pad-foot .pad-focus-exit[hidden] { display: none; }
body.pad-focus .pad-foot { align-items: center; }
/* Phones: one line, the words and Exit; the routine "Backed up" steps
   aside (a backup or sync that failed never does). */
@media (max-width: 560px) {
  body.pad-focus .pad-foot #padBackup:not(.bad) { display: none; }
}

.pad-dialog {
  width: min(460px, calc(100vw - 24px)); max-height: calc(100dvh - 40px); border: 1px solid var(--line);
  border-radius: var(--r-l); padding: 0; background: var(--bg); color: var(--ink);
}
.pad-dialog::backdrop { background: var(--scrim); }
.pad-dialog-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-l) var(--sp-xl) var(--sp-s); }
.pad-dialog h2 { margin: 0; font: 600 var(--fs-xl)/1.3 var(--font-serif); }
/* ‹ back to where a box came from (the ☰ menu, or Backups from Restore). */
.pad-back { flex: none; margin: 0 var(--sp-m) 0 calc(var(--sp-s) * -1); border: 0; background: none; padding: var(--sp-xs) var(--sp-s); border-radius: var(--r-m); font-size: var(--fs-l); color: var(--soft); white-space: nowrap; }
.pad-back:hover { color: var(--ink); background: var(--panel); }
.pad-back:focus-visible { color: var(--ink); outline: 2px solid var(--accent); outline-offset: 1px; }
.pad-back:not([hidden]) + h2 { flex: 1; min-width: 0; }
.pad-list { padding: 0 var(--sp-m); max-height: 45dvh; overflow: auto; }
.pad-list:empty { display: none; }
.pad-row {
  display: flex; align-items: center; gap: var(--sp-m); width: 100%; text-align: left; border: 0; background: none;
  padding: var(--sp-m) var(--sp-m); border-radius: var(--r-m);
}
.pad-row:hover { background: var(--panel); }
.pad-row .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pad-row .m { font-size: var(--fs-s); color: var(--soft); white-space: nowrap; }
.pad-row.current .t { font-weight: 600; }
.pad-row .act { border: 1px solid var(--line); background: var(--bg); border-radius: var(--r-m); padding: var(--sp-xs) var(--sp-m); font-size: var(--fs-m); }
.pad-row-acts { display: flex; gap: var(--sp-s); flex-shrink: 0; }
.pad-menu-actions { display: flex; flex-direction: column; padding: var(--sp-s) var(--sp-m); }
.pad-menu-actions button { text-align: left; border: 0; background: none; padding: var(--sp-m) var(--sp-m); border-radius: var(--r-m); }
.pad-menu-actions button:hover { background: var(--panel); }
.pad-menu-actions hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-xs) var(--sp-m); }
/* What a menu item is, under it. */
.pad-act-m { display: block; margin-top: 1px; font-size: var(--fs-s); color: var(--soft); }
.pad-act-m:empty { display: none; }
/* Download: Word, Markdown or Text, in one row. */
.pad-dl { display: flex; align-items: center; gap: var(--sp-s); padding: var(--sp-s) var(--sp-m); flex-wrap: wrap; }
.pad-dl-label { margin-right: auto; }
/* The four stay together: under the label when they don't fit beside it. */
.pad-dl-acts { display: flex; gap: var(--sp-s); }
.pad-menu-actions .pad-dl .act { border: 1px solid var(--line); background: var(--bg); border-radius: var(--r-m); padding: var(--sp-xs) var(--sp-l); font-size: var(--fs-m); }
.pad-menu-actions .pad-dl .act:hover { background: var(--panel); }
.pad-sub-actions { display: flex; gap: var(--sp-m); flex-wrap: wrap; padding: var(--sp-xs) var(--sp-m) var(--sp-m); }
.pad-sub-actions .act { border: 1px solid var(--line); background: var(--bg); border-radius: var(--r-m); padding: var(--sp-s) var(--sp-l); font-size: var(--fs-m); }
.pad-sub-actions .act:hover { background: var(--panel); }
.pad-bad { color: var(--danger); }
.pad-foot #padBackup:not(:empty) { cursor: pointer; }
.pad-foot #padBackup:not(:empty):hover { text-decoration: underline; }
.pad-danger { color: var(--danger); }
.pad-note { margin: var(--sp-xs) var(--sp-xl) var(--sp-xl); font-size: var(--fs-m); color: var(--soft); line-height: 1.5; }
.pad-empty { padding: var(--sp-l) var(--sp-m) var(--sp-xl); color: var(--soft); font-size: var(--fs-l); }

/* Inside the web app, which has its own bar with the manuscript list. */
body.embedded .pad-top { padding-top: var(--sp-m); }
.pad-sub-h { margin: var(--sp-l) var(--sp-m) var(--sp-2xs); font: 600 var(--fs-m)/1.3 var(--font-ui); color: var(--soft); text-transform: uppercase; letter-spacing: .04em; }
.pad-row .t .m { display: inline-block; margin-top: var(--sp-2xs); white-space: normal; }
.pad-panel-btn { flex: none; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: var(--r-m); padding: var(--sp-s) var(--sp-l); font-size: var(--fs-m); font-weight: 600; }
.pad-panel-btn[hidden] { display: none; }
.pad-panel-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: none; }
.pad-signin-btn { flex: none; border: 1px solid var(--accent); background: none; color: var(--accent); border-radius: var(--r-m); padding: var(--sp-s) var(--sp-l); font-size: var(--fs-m); font-weight: 600; white-space: nowrap; }
.pad-signin-btn[hidden] { display: none; }
.pad-switch-btn { display: inline-flex; align-items: center; gap: var(--sp-xs); line-height: 1; font-size: var(--fs-m); color: var(--soft); white-space: nowrap; }
.pad-switch-btn:hover { color: var(--ink); }
@media (max-width: 560px) { .pad-switch-label { display: none; } }
/* A Google Doc in the reader: read only, no formatting bar. */
body.reading .pad-tools .pad-menu-btn, body.reading .pad-tools button[data-cmd], body.reading .pad-tools .pad-sep { display: none; }
body.reading .pad-title { pointer-events: none; }
.pad-reader-note { display: none; }
body.reading .pad-reader-note { display: inline; margin-right: auto; }
.pad-reader-note a { color: var(--accent); }
body.reading .pad-editor .tiptap { caret-color: transparent; }
/* A Google Doc written in here (roadmap #35): a line under the bar with
   what's happening (writing, saving, saved, or why it stopped, with Try
   again) and Open in Google Docs; the reader's "Write here" after a no. */
.pad-gdoc-bar { display: none; }
body.gdoc .pad-gdoc-bar { display: flex; align-items: center; gap: var(--sp-s); flex: none; padding: var(--sp-xs) var(--sp-l); border-bottom: 1px solid var(--line); background: var(--bg); font-size: var(--fs-s); color: var(--soft); line-height: 1.4; }
.pad-gdoc-bar.bad { color: var(--danger); font-weight: 600; }
.pad-gdoc-bar #padGdocState { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pad-gdoc-bar.bad #padGdocState { white-space: normal; }
.pad-gdoc-bar a, .pad-reader-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.pad-gdoc-bar a:hover, .pad-reader-note a:hover { color: var(--ink); }
.pad-gdoc-bar a:focus-visible, .pad-reader-note a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-s); }
.pad-gdoc-act { flex: none; border: 1px solid var(--accent); color: var(--accent); background: none; border-radius: var(--r-m); padding: var(--sp-2xs) var(--sp-m); font-size: var(--fs-s); font-weight: 600; white-space: nowrap; }
.pad-gdoc-act:hover { background: var(--panel); }
.pad-gdoc-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pad-gdoc-act[hidden] { display: none; }
.pad-tools .pad-gdoc-act { margin-left: var(--sp-s); font-size: var(--fs-m); }
body.gdoc .pad-tools .pad-rewrite-btn { display: none; }
body.gdoc .pad-title { pointer-events: none; }
/* A paragraph that can't be typed in here (a picture, a chip, a footnote,
   a suggestion, a list, a table): the browser's own grey, a note on hover. */
.pad-editor .tiptap .pad-gdoc-fixed { color: var(--soft); cursor: default; }
/* A paragraph changed here and in Google Docs: Google Docs' version
   under it, with the choice. */
.pad-editor .tiptap .pad-gdoc-conflict { border-left: 3px solid var(--danger); padding-left: var(--sp-m); }
.pad-gdoc-box { margin: calc(-1 * var(--sp-s)) 0 var(--sp-xl); padding: var(--sp-m) var(--sp-l); border: 1px solid var(--line); border-left: 3px solid var(--danger); border-radius: var(--r-m); background: var(--panel); font: var(--fs-m)/1.4 var(--font-ui); color: var(--soft); }
.pad-gdoc-box-label { font-weight: 600; }
.pad-gdoc-box-theirs { margin: var(--sp-xs) 0; color: var(--ink); font-family: inherit; }
.pad-gdoc-box-acts { display: flex; gap: var(--sp-s); margin-top: var(--sp-s); }
.pad-gdoc-box .act { border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: var(--r-m); padding: var(--sp-xs) var(--sp-m); font-size: var(--fs-m); }
.pad-gdoc-box .act:hover { background: var(--panel); }
.pad-gdoc-box .act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 560px) { .pad-gdoc-bar:not(.bad) .pad-gdoc-sep { display: none; } }
.pad-row .kind { font-size: var(--fs-xs); color: var(--soft); text-transform: uppercase; letter-spacing: .04em; }
.pad-row .x { border: 0; background: none; color: var(--soft); font-size: var(--fs-xl); padding: 0 var(--sp-s); }
/* Phones: the routine "Saved" goes, a failed save never does. */
@media (max-width: 560px) { .pad-signin-btn { font-size: var(--fs-s); padding: var(--sp-xs) var(--sp-m); } .pad-status:not(.bad), .pad-long { display: none; } }
/* Phones: a long message (a failed save, a browser that keeps nothing)
   on a line of its own under the bar, the whole width: beside the title
   it squeezed the title away and pushed the buttons off the right edge. */
@media (max-width: 560px) {
  .pad-top { flex-wrap: wrap; row-gap: var(--sp-xs); }
  .pad-status.bad { order: 1; flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; font-size: var(--fs-s); }
}

.pad-tools #padThemeBtn { line-height: 1; margin-left: var(--sp-s); flex: none; }
/* Find, Preferences, light/dark and ⋯ at the right end. */
.pad-tools .pad-grow { flex: 1 1 0; min-width: 0; }
/* Go to chapter comes first (never in the ⋯ menu); its line goes with it. */
.pad-tools #padChapters[hidden] + .pad-ch-sep { display: none; }
/* Go to chapter: as narrow as a toolbar button, however long a chapter's
   title (a select is otherwise as wide as its longest option, which made
   the whole bar scroll). The list it opens still shows the full titles. */
@media (min-width: 821px) {
  .pad-tools #padChapters {
    flex: 0 1 auto; width: 8.5em; min-width: 6.5em;
    border: 1px solid transparent; border-radius: var(--r-m); background-color: transparent;
    padding: var(--sp-s) var(--sp-xs); font: inherit; font-size: var(--fs-m); color: var(--soft); cursor: pointer;
    text-overflow: ellipsis;
  }
  .pad-tools #padChapters:hover { background-color: var(--panel); color: var(--ink); }
  .pad-tools #padChapters:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
}
/* Aa: font, size, line spacing and alignment in one menu. */
.pad-look .pad-q { font-size: var(--fs-l); color: var(--ink); }
.pad-look-menu { min-width: 230px; }
.pad-look-menu button { padding-left: var(--sp-l); align-items: center; }
.pad-look-menu .pad-qname { color: var(--ink); }
.pad-look-now { color: var(--soft); font-size: var(--fs-m); max-width: 10em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pad-look-now::after { content: ' ›'; }
/* What doesn't fit in the bar is in its ⋯ menu instead (fitTools in pad.js). */
.pad-tools .pad-over { display: none !important; }
.pad-tools .pad-more { flex: none; }
.pad-tools .pad-more[hidden] { display: none; }
.pad-more-menu { max-width: min(320px, calc(100vw - 16px)); max-height: calc(100dvh - 120px); overflow-y: auto; }
.pad-more-menu button { padding-left: var(--sp-l); }
.pad-more-menu .pad-more-a { justify-content: flex-start; align-items: center; gap: var(--sp-l); }
.pad-more-i { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; color: var(--soft); font-size: var(--fs-l); line-height: 1; }
.pad-more-i svg { display: block; }
.pad-sun { display: block; margin: 1px 0; }
.pad-tools button svg { display: block; }
/* Narrow windows and phones: the chapter menu as an icon (a list), where
   its name didn't fit. */
@media (max-width: 820px) {
  .pad-tools select {
    flex: none; width: 34px; padding: var(--sp-xs); font-size: var(--fs-m); color: transparent; -webkit-appearance: none; appearance: none;
    border: 1px solid transparent; border-radius: var(--r-m); cursor: pointer;
    background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6b63' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11M4 6h.01M4 12h.01M4 18h.01'/%3E%3C/svg%3E") center / 16px no-repeat;
  }
  .pad-tools select:hover { background-color: var(--panel); }
  .pad-tools select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .pad-tools select option { color: initial; }
}
/* Phones: everything in the bar fits without scrolling it. */
@media (max-width: 480px) {
  .pad-tools { gap: var(--sp-2xs); padding: var(--sp-s) var(--sp-m); }
  .pad-tools button { padding: var(--sp-s) var(--sp-s); }
  .pad-tools .pad-sep { margin: 0 1px; }
  .pad-tools #padThemeBtn { margin-left: var(--sp-2xs); }
}
@media (max-width: 760px) {
  /* The menus' ▾ goes: the button itself says it opens one. */
  .pad-tools .pad-menu-btn:not(.pad-more) > svg { display: none; }
  .pad-style .pad-q { min-width: 0; }
}
/* Phones: no gaps, narrow buttons, so it all fits from 360px up (narrower, the bar scrolls). */
@media (max-width: 560px) {
  .pad-tools { gap: 0; padding: var(--sp-s) var(--sp-s); }
  .pad-tools button { padding: var(--sp-s) var(--sp-s); }
}

/* Rewriting side by side (roadmap #29): the original, read only, on the
   left; the new draft on the right. Narrower than 900px: one at a time. */
.pad-original { flex: 1; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--panel); }
.pad-original[hidden] { display: none; }
.pad-orig-head { display: flex; align-items: center; gap: var(--sp-m); padding: var(--sp-s) var(--sp-m) var(--sp-s) var(--sp-xl); border-bottom: 1px solid var(--line); font: var(--fs-m)/1.3 var(--font-ui); }
.pad-orig-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--soft); font: inherit; font-weight: 600; text-align: left; border: 0; background: none; padding: var(--sp-2xs) 0; cursor: pointer; }
.pad-orig-title:hover { color: var(--ink); text-decoration: underline; }
.pad-orig-btn { flex: none; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: var(--r-m); padding: var(--sp-xs) var(--sp-m); font-size: var(--fs-s); cursor: pointer; white-space: nowrap; }
.pad-orig-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.pad-pro { display: inline-block; margin-left: var(--sp-2xs); padding: 0 var(--sp-s); border-radius: var(--r-s); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--accent); color: var(--bg); }
.pad-orig-btn:not(.locked) .pad-pro { display: none; }
.pad-orig-progress { padding: var(--sp-s) var(--sp-xl); font: 600 var(--fs-m)/1.3 var(--font-ui); color: var(--accent); border-bottom: 1px solid var(--line); }
.pad-orig-progress[hidden] { display: none; }
.pad-orig-text {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; position: relative;
  padding: var(--sp-3xl) var(--sp-3xl) 40vh; color: var(--ink);
  font-family: var(--pad-font, var(--font-serif)); font-size: var(--pad-size, 17px); line-height: var(--pad-lh, 1.725); overflow-wrap: break-word;
}
.pad-orig-text > * { max-width: 40em; margin-left: auto; margin-right: auto; }
.pad-orig-text p { margin-top: 0; margin-bottom: .9em; }
.pad-orig-text p.q { padding-left: 1em; border-left: 3px solid var(--line); font-style: italic; }
.pad-orig-text p.li { padding-left: 1.2em; }
.pad-orig-text h1 { font-size: 1.4em; line-height: 1.3; margin-top: 1.6em; margin-bottom: .8em; text-align: center; font-weight: 600; }
.pad-orig-text h1:first-child { margin-top: .4em; }
.pad-orig-text h2 { font-size: 1.1em; margin-top: 1.4em; margin-bottom: .6em; font-weight: 600; }
.pad-orig-text hr { border: 0; margin-top: 1.6em; margin-bottom: 1.6em; text-align: center; }
.pad-orig-text hr::after { content: "* * *"; color: var(--soft); letter-spacing: .3em; }
.pad-orig-text.progress .done { opacity: .38; transition: opacity .3s; }
/* Done: offered beside a paragraph of the original that's clicked. */
.pad-done-btn { position: absolute; right: 6px; margin-top: calc(var(--sp-s) * -1); z-index: 2; border: 1px solid var(--accent); background: var(--bg); color: var(--accent); border-radius: var(--r-m); padding: var(--sp-xs) var(--sp-l); font: 600 var(--fs-m)/1.3 var(--font-ui); cursor: pointer; box-shadow: 0 1px 4px var(--shade-2); }
.pad-done-btn[hidden] { display: none; }
.pad-orig-text.progress p[data-b] { cursor: pointer; }
/* The paragraph to work on next. */
.pad-orig-text p.current { position: relative; }
.pad-orig-text p.current::before { content: ""; position: absolute; left: -12px; top: .3em; bottom: .3em; width: 3px; border-radius: 2px; background: var(--accent); }
.pad-orig-text h1[data-progress]::after { content: attr(data-progress); display: block; margin-top: var(--sp-xs); font: 600 var(--fs-m)/1.3 var(--font-ui); color: var(--accent); }
body.split .pad-editor { padding-top: var(--sp-3xl); }
.pad-sides { display: flex; gap: var(--sp-xs); padding: var(--sp-s) var(--sp-l); border-bottom: 1px solid var(--line); }
.pad-sides[hidden] { display: none; }
.pad-sides button { flex: 1; border: 1px solid var(--line); background: var(--bg); color: var(--soft); border-radius: var(--r-m); padding: var(--sp-s) var(--sp-m); font-size: var(--fs-m); font-weight: 600; }
.pad-sides button[aria-selected="true"] { border-color: var(--accent); color: var(--accent); background: var(--panel); }
body[data-side="draft"] .pad-original { display: none; }
body[data-side="original"] .pad-draft { display: none; }
body[data-side="original"] .pad-original { border-right: 0; }
.pad-note-big { font-size: var(--fs-l); }
.pad-pro-link { display: inline-block; margin: var(--sp-xs) var(--sp-m); padding: var(--sp-m) var(--sp-xl); border-radius: var(--r-m); background: var(--accent); color: var(--bg); font-weight: 600; text-decoration: none; }

/* The bar's Rewrite button (roadmap #29): lit while the original shows. */
.pad-tools .pad-rewrite-btn { display: inline-flex; align-items: center; gap: var(--sp-s); flex: none; }
.pad-tools .pad-rewrite-btn[aria-pressed="true"] { color: var(--accent); background: var(--panel); }
.pad-rw-label { font-size: var(--fs-m); font-weight: 600; }
body.reading .pad-tools .pad-rewrite-btn { display: none; }
@media (max-width: 700px) { .pad-rw-label { display: none; } }

/* Links (roadmap #44): in the text, and the box for their address. */
.pad-editor .tiptap a { color: var(--accent, var(--accent)); text-decoration: underline; text-underline-offset: 2px; cursor: text; }
.pad-linkbox { width: min(360px, calc(100vw - 16px)); padding: var(--sp-l); }
.pad-linkbox input { width: 100%; box-sizing: border-box; font: inherit; font-size: var(--fs-l); padding: var(--sp-m) var(--sp-m); border: 1px solid var(--line); border-radius: var(--r-m); background: var(--bg); color: var(--ink); }
.pad-linkbox-acts { display: flex; align-items: center; gap: var(--sp-m); margin-top: var(--sp-m); }
.pad-linkbox .pad-linkbox-acts button { width: auto; padding: var(--sp-s) var(--sp-l); border: 1px solid var(--line); background: var(--panel); justify-content: center; }
.pad-linkbox-acts a { margin-left: auto; font-size: var(--fs-l); color: var(--accent, var(--accent)); }
.pad-linkbox-note { margin: var(--sp-s) var(--sp-2xs) 0; font-size: var(--fs-m); color: var(--soft); }
.pad-linkbox-note:empty { display: none; }
.pad-linkbox .pad-linkbox-acts [hidden] { display: none; }

/* Preferences: the page, typing, automatic substitution. A sheet over the
   whole screen on a phone; the bar's button for it only where there's room
   (on a phone it's ☰ → Preferences). */
.pad-prefs { width: min(540px, calc(100vw - 24px)); }
.pad-prefs[open] { display: flex; flex-direction: column; }
.pad-prefs-body { overflow-y: auto; padding: 0 var(--sp-xl) var(--sp-m); }
.pad-prefs h2:focus { outline: none; }
.pad-pref-group { padding: var(--sp-l) 0 var(--sp-xl); border-top: 1px solid var(--line); }
.pad-pref-group:first-child { border-top: 0; padding-top: var(--sp-xs); }
.pad-pref-group h3 { margin: 0 0 var(--sp-s); font-size: var(--fs-s); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.pad-pref { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-l); padding: var(--sp-m) 0; }
.pad-pref-t { min-width: 0; }
.pad-pref-h { padding: 0; }
.pad-pref-h h3 { margin: 0; }
.pad-pref-note { margin: var(--sp-xs) 0 var(--sp-l); font-size: var(--fs-m); color: var(--soft); line-height: 1.45; }
/* Two choices side by side, the chosen one raised. */
.pad-seg { display: inline-flex; flex: none; padding: var(--sp-2xs); border-radius: var(--r-m); background: var(--panel); border: 1px solid var(--line); }
.pad-seg button { border: 0; background: none; padding: var(--sp-s) var(--sp-l); border-radius: var(--r-m); font-size: var(--fs-m); color: var(--soft); white-space: nowrap; }
.pad-seg button .pad-q { font-size: var(--fs-l); }
.pad-seg button[aria-checked="true"] { background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--accent); }
.pad-seg button:focus-visible, .pad-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* On/off. */
.pad-toggle {
  flex: none; position: relative; width: 40px; height: 24px; border-radius: var(--r-l); border: 0; padding: 0;
  background: var(--line); transition: background .15s;
}
.pad-toggle::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--on-color); box-shadow: 0 1px 2px var(--shade-3); transition: transform .15s;
}
.pad-toggle[aria-checked="true"] { background: var(--accent); }
.pad-toggle[aria-checked="true"]::after { transform: translateX(16px); }
/* The substitution list: on, Replace → With, remove. */
.pad-subs { border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
.pad-subs.off { opacity: .5; }
.pad-subs-head, .pad-subs-row { display: grid; grid-template-columns: 22px minmax(0, 10em) 14px minmax(0, 1fr) 30px; align-items: center; gap: var(--sp-m); padding: var(--sp-xs) var(--sp-m); }
.pad-subs-head { padding-top: var(--sp-m); padding-bottom: var(--sp-s); font-size: var(--fs-s); color: var(--soft); background: var(--panel); border-bottom: 1px solid var(--line); }
.pad-subs-row input[type="text"] {
  width: 100%; min-width: 0; border: 1px solid transparent; background: none; border-radius: var(--r-m); padding: var(--sp-xs) var(--sp-s);
  font: var(--fs-l)/1.3 var(--font-serif); color: var(--ink);
}
.pad-subs-row input[type="text"]:hover { border-color: var(--line); }
.pad-subs-row input[type="text"]:focus { outline: none; border-color: var(--accent); background: var(--bg); }
.pad-subs-row input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.pad-subs-row:has(input[type="checkbox"]:not(:checked)) input[type="text"] { color: var(--soft); text-decoration: line-through; }
.pad-subs-arrow { color: var(--soft); text-align: center; }
.pad-subs-del { border: 0; background: none; border-radius: var(--r-m); font-size: var(--fs-xl); line-height: 1; padding: var(--sp-xs) 0; color: var(--soft); }
.pad-subs-del:hover { background: var(--panel); color: var(--danger); }
.pad-subs-add { border-top: 1px solid var(--line); background: var(--panel); padding-top: var(--sp-m); padding-bottom: var(--sp-m); }
.pad-subs-add input[type="text"] { border-color: var(--line) !important; background: var(--bg) !important; }
.pad-subs-addbtn { border: 1px solid var(--line); background: var(--bg); border-radius: var(--r-m); padding: var(--sp-xs) 0; font-size: var(--fs-m); }
.pad-subs-addbtn:hover { border-color: var(--accent); color: var(--accent); }
.pad-linkish { margin-top: var(--sp-m); border: 0; background: none; padding: var(--sp-2xs) 0; font-size: var(--fs-m); color: var(--soft); text-decoration: underline; text-underline-offset: 2px; }
.pad-linkish:hover { color: var(--ink); }
.pad-prefs-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-l); padding: var(--sp-l) var(--sp-xl); border-top: 1px solid var(--line); }
.pad-prefs-foot .pad-act-m { margin: 0; }
.pad-primary { border: 0; border-radius: var(--r-m); padding: var(--sp-m) var(--sp-2xl); background: var(--accent); color: var(--bg); font-weight: 600; }
.pad-primary:hover { filter: brightness(1.08); }
@media (max-width: 560px) {
  .pad-prefs { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .pad-seg button { padding: var(--sp-s) var(--sp-m); }
  .pad-subs-head, .pad-subs-row { gap: var(--sp-s); padding-left: var(--sp-s); padding-right: var(--sp-s); grid-template-columns: 20px minmax(0, 1fr) 12px minmax(0, 1fr) 36px; }
  .pad-tools .pad-prefs-btn { display: none; }
}
/* Your writing: the whole name, the words and when it was changed below
   it (two of the same name, a restored copy, told apart on a phone). */
#padSwitchBody .t-btn { flex-direction: column; align-items: flex-start; gap: 0; }
#padSwitchBody .t-btn .t { white-space: normal; overflow-wrap: anywhere; }
#padSwitchBody .t-btn br { display: none; }
#padSwitchBody .t-btn .m { white-space: normal; }

/* Find (Ctrl/⌘ F, or the bar's magnifier): in the document only, not
   Perch's panel as the browser's own find is. A small box at the top
   right, under the bar, as in Google Docs; across the top on a phone. */
.pad-find {
  position: fixed; z-index: 30; right: var(--sp-l); display: flex; flex-direction: column; gap: var(--sp-xs);
  width: min(400px, calc(100vw - 2 * var(--sp-l))); box-sizing: border-box; padding: var(--sp-xs);
  border: 1px solid var(--line); border-radius: var(--r-l); background: var(--bg); color: var(--ink); box-shadow: 0 8px 24px var(--shade-3);
}
.pad-find[hidden] { display: none; }
.pad-find-row { display: flex; align-items: center; gap: var(--sp-2xs); }
.pad-find-row[hidden] { display: none; }
/* Replace's row under Find's, its box lined up with Find's. */
.pad-replace-row { padding-left: calc(var(--sp-3xl) + var(--sp-s)); gap: var(--sp-xs); }
.pad-find-more svg { transition: transform .15s; }
.pad-find-more[aria-expanded="true"] svg { transform: rotate(90deg); }
.pad-find-more[hidden] { display: none; }
.pad-find .pad-find-act {
  flex: none; padding: var(--sp-s) var(--sp-l); border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--panel); color: var(--ink); font: inherit; font-size: var(--fs-m); cursor: pointer;
}
.pad-find .pad-find-act:hover { border-color: var(--soft); }
.pad-find .pad-find-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pad-find .pad-find-act:disabled { opacity: .5; cursor: default; }
.pad-find input {
  flex: 1; min-width: 0; font: inherit; font-size: var(--fs-l); padding: var(--sp-s) var(--sp-m);
  border: 1px solid var(--line); border-radius: var(--r-m); background: var(--bg); color: var(--ink);
}
.pad-find input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.pad-find input::-webkit-search-cancel-button { display: none; }
.pad-find-count { flex: none; min-width: 4.5em; text-align: center; font-size: var(--fs-m); color: var(--soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pad-find-count.none { color: var(--danger); }
.pad-find .pad-icon { color: var(--soft); }
.pad-find .pad-icon:hover { color: var(--ink); }
.pad-find .pad-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pad-find .pad-icon:disabled { opacity: .4; pointer-events: none; }
.pad-find .pad-icon svg { display: block; }
.pad-found { background: var(--find); border-radius: 2px; }
.pad-found.pad-found-on { background: var(--find-on); box-shadow: 0 0 0 1px var(--find-on); }

/* Touch screens: boxes typed in (Find and replace, Link, Preferences'
   substitutions) at the size an iPhone doesn't zoom the page in for. */
@media (pointer: coarse) {
  .pad-find input, .pad-linkbox input, .pad-subs-row input[type="text"] { font-size: var(--fs-input); }
}