/* mdEditDiff preview: the document is a sheet of paper on a desk, set for reading.
   Serif body (New York on macOS), SF Pro headings, SF Mono code, one indigo accent shared with the app icon.
   Changes are marked in the sheet's left margin, the way an editor marks a proof. */
:root {
  --desk: #EEEFF5; --paper: #FFFFFF; --ink: #1E2030; --muted: #6A6E85; --rule: #E3E4EE;
  --accent: #4B47E0; --accent-soft: #EEEEFC; --accent-ink: #3A36B8;
  --code-bg: #F5F6FA; --code-line: #E6E7F0;
  --notice-bg: #FFF6DA; --notice-fg: #6B4E00;
  --add: #1F9D55; --add-bg: #EAF8EF; --ins-bg: #C9F0D7;
  --mod: #C27C0E; --mod-bg: #FDF5E6;
  --del: #D64545; --del-bg: #FDEEEE; --del-fg: #962F2F;
  --bar-bg: rgba(238, 239, 245, 0.86); --panel-bg: #F7F7FB;
  --shadow: 0 1px 2px rgba(24, 26, 48, 0.06), 0 10px 30px rgba(24, 26, 48, 0.07);
  --serif: ui-serif, "New York", Charter, "Iowan Old Style", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --size: 17px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --desk: #121317; --paper: #1B1C22; --ink: #E7E8F0; --muted: #9A9DB2; --rule: #2C2E38;
    --accent: #8F8CFF; --accent-soft: #2A2950; --accent-ink: #B9B7FF;
    --code-bg: #22232B; --code-line: #30323D;
    --notice-bg: #3A3220; --notice-fg: #F3D58A;
    --add: #4CC27E; --add-bg: #19302A; --ins-bg: #23513A;
    --mod: #E5A84A; --mod-bg: #332A1A;
    --del: #F07A7A; --del-bg: #3A2125; --del-fg: #F4BABA;
    --bar-bg: rgba(18, 19, 23, 0.82); --panel-bg: #1B1C22;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.35);
  }
}

html { background: var(--desk); }
body { margin: 0; color: var(--ink); background: var(--desk); font: var(--size)/1.72 var(--serif); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--accent-soft); }

/* The sheet */
.markdown-body { max-width: 680px; margin: 28px auto 64px; padding: 56px 72px 72px; background: var(--paper); border-radius: 12px; box-shadow: var(--shadow); overflow-wrap: break-word; }
@media (max-width: 760px) {
  .markdown-body { margin: 0; padding: 32px 28px 56px; border-radius: 0; box-shadow: none; max-width: none; min-height: 100vh; box-sizing: border-box; }
  html, body { background: var(--paper); }
}
.markdown-body > :first-child { margin-top: 0; }

/* Headings: SF Pro, tight, ink */
h1, h2, h3, h4, h5, h6 { font-family: var(--sans); color: var(--ink); line-height: 1.22; margin: 1.9em 0 0.55em; scroll-margin-top: 80px; letter-spacing: -0.012em; }
h1 { font-size: 2.05em; font-weight: 700; letter-spacing: -0.024em; margin-bottom: 0.45em; }
h2 { font-size: 1.42em; font-weight: 650; padding-top: 1.1em; border-top: 1px solid var(--rule); }
.markdown-body > h2:first-child, hr + h2 { padding-top: 0; border-top: 0; }
h3 { font-size: 1.15em; font-weight: 650; }
h4 { font-size: 1em; font-weight: 650; }
h5, h6 { font-size: 0.92em; font-weight: 600; color: var(--muted); }

p, ul, ol, blockquote, pre, .table-wrap { margin: 0 0 1.05em; }
strong { font-weight: 650; }
a { color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); }
a:hover { text-decoration-color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* Lists */
ul, ol { padding-left: 1.5em; }
li + li { margin-top: 0.3em; }
li::marker { color: var(--accent); }
ol > li::marker { font-family: var(--sans); font-size: 0.88em; font-weight: 600; }
li.task-list-item { list-style: none; }
li.task-list-item input { margin: 0 0.55em 0 -1.5em; vertical-align: -0.1em; accent-color: var(--accent); width: 1em; height: 1em; }

/* Code */
code, pre { font-family: var(--mono); }
code { font-size: 0.82em; color: var(--accent-ink); background: var(--accent-soft); padding: 0.12em 0.4em; border-radius: 5px; }
pre { font-size: 0.8em; line-height: 1.6; background: var(--code-bg); border: 1px solid var(--code-line); padding: 14px 18px; border-radius: 10px; overflow-x: auto; }
pre code { color: var(--ink); background: none; padding: 0; font-size: 1em; border-radius: 0; }

/* Quotes */
blockquote { margin-left: 0; padding: 0.1em 0 0.1em 1.1em; border-left: 3px solid var(--accent); color: var(--muted); font-style: italic; }
blockquote > :last-child { margin-bottom: 0; }

/* Rules: a section break, not a line */
hr { border: 0; height: 1.6em; margin: 1.8em 0; text-align: center; }
hr::after { content: "\2022  \2022  \2022"; color: var(--muted); letter-spacing: 0.5em; font-family: var(--sans); font-size: 0.8em; }

/* Tables: sans, hairlines, no grid */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; font-family: var(--sans); font-size: 0.86em; line-height: 1.5; min-width: 50%; }
th, td { padding: 8px 16px 8px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
th { font-weight: 600; color: var(--muted); border-bottom: 1.5px solid var(--ink); }
td:last-child, th:last-child { padding-right: 0; }

img { max-width: 100%; border-radius: 8px; }
.notice { display: inline-block; font-family: var(--sans); background: var(--notice-bg); color: var(--notice-fg); border-radius: 6px; padding: 2px 10px; font-size: 0.78em; }
s, del { color: var(--muted); }

/* Changes since the reader last looked: a bar in the sheet's left margin plus a soft tint, like a
   proofreader's mark. Colors are paired with bars, underlines and strikethrough, so they never rely on
   color alone. */
.md-change { position: relative; scroll-margin: 110px; border-radius: 6px; }
.md-added, .md-modified, div.md-removed, li.md-removed { padding-left: 12px; padding-right: 8px; margin-left: -12px; margin-right: -8px; }
.md-added { background: var(--add-bg); }
.md-modified { background: var(--mod-bg); }
.md-change::before { content: ""; position: absolute; left: -28px; top: 4px; bottom: 4px; width: 4px; border-radius: 2px; }
.md-added::before { background: var(--add); }
.md-modified::before { background: var(--mod); }
.md-removed::before { background: var(--del); }
li.md-change::before { left: calc(-1.5em - 28px); }
tr.md-change::before { display: none; }
tr.md-added td { background: var(--add-bg); } tr.md-modified td { background: var(--mod-bg); }
ins.md-ins { background: var(--ins-bg); text-decoration: underline; text-decoration-color: var(--add); text-decoration-thickness: 1.5px; text-underline-offset: 3px; border-radius: 3px; padding: 0 2px; }
del.md-del { background: var(--del-bg); color: var(--del-fg); text-decoration: line-through; text-decoration-thickness: 1.5px; border-radius: 3px; padding: 0 2px; }
.md-removed { background: var(--del-bg); padding-top: 8px; padding-bottom: 8px; margin-bottom: 1.05em; list-style: none; }
.md-removed-body { color: var(--del-fg); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.md-removed-body > :last-child { margin-bottom: 0; }
tr.md-removed td { background: var(--del-bg); }
.md-removed-tools { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; font-family: var(--sans); }
.md-tag { font-size: 0.74em; font-weight: 600; color: var(--del); }
.md-current { outline: 2px solid var(--accent); outline-offset: 4px; }
button { font: inherit; }
.md-restore, .rb-button { font-family: var(--sans); font-size: 0.74em; font-weight: 500; padding: 3px 12px; border-radius: 999px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); cursor: pointer; }
.md-restore:hover, .rb-button:hover { border-color: var(--accent); color: var(--accent-ink); }
.md-restore:focus-visible, .rb-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rb-button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.rb-button.primary:hover { color: #fff; filter: brightness(1.08); }

#review-bar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 24px; background: var(--bar-bg); border-bottom: 1px solid var(--rule); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); font-family: var(--sans); font-size: 0.8em; line-height: 1.4; }
#review-bar[hidden] { display: none; }
.rb-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rb-title { font-weight: 650; font-size: 1.08em; }
.rb-who { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.rb-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.rb-tools .rb-button { font-size: 0.95em; padding: 4px 12px; }

#history { position: fixed; top: 0; right: 0; bottom: 0; width: 300px; max-width: 85vw; overflow-y: auto; background: var(--panel-bg); border-left: 1px solid var(--rule); padding: 18px; box-sizing: border-box; z-index: 10; font-family: var(--sans); font-size: 0.8em; line-height: 1.45; }
#history[hidden] { display: none; }
body.history-open .markdown-body, body.history-open #review-bar { margin-right: 300px; }
.hp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.hp-title { font-size: 1.15em; margin: 0; border: 0; padding: 0; }
.hp-list { list-style: none; padding: 0; margin: 0; }
.hp-item { padding: 12px 0; border-top: 1px solid var(--rule); }
.hp-item + .hp-item { margin-top: 0; }
.hp-row { display: flex; gap: 8px; align-items: baseline; }
.hp-rev { font-family: var(--mono); color: var(--accent-ink); }
.hp-who { font-weight: 600; }
.hp-note { margin-top: 2px; }
.hp-meta { color: var(--muted); font-size: 0.92em; margin-top: 2px; }
.hp-actions { display: flex; gap: 6px; margin-top: 6px; }
.hp-empty { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
@media (prefers-color-scheme: dark) { .rb-button.primary, .rb-button.primary:hover { color: var(--paper); } }

/* Find bar (⌘F in Read mode): a floating pill at the top right, like Safari and Preview.
   Matches are orange and outlined, so they never look like change marks or personal highlights. */
.find-bar { position: fixed; top: 10px; right: 16px; z-index: 20; display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 10px; background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--shadow); font-family: var(--sans); font-size: 13px; }
.find-bar[hidden] { display: none; }
body.reviewing .find-bar { top: 58px; }
body.history-open .find-bar { right: 316px; }
.fb-input { width: 200px; font: inherit; color: var(--ink); background: var(--code-bg); border: 1px solid var(--rule); border-radius: 7px; padding: 4px 8px; outline: none; }
.fb-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.find-bar.fb-none .fb-input { border-color: var(--del); }
.fb-count { min-width: 64px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; }
.find-bar .rb-button { font-size: 12px; padding: 3px 10px; }
.find-bar .fb-step { padding: 2px 9px; font-size: 15px; line-height: 1; }
mark.find-hit { background: rgba(255, 159, 10, 0.26); color: inherit; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 159, 10, 0.55); }
mark.find-current { background: #FFB340; color: #1E2030; box-shadow: 0 0 0 2px #FF9F0A; }
@media (prefers-color-scheme: dark) {
  mark.find-hit { background: rgba(255, 179, 64, 0.22); box-shadow: 0 0 0 1px rgba(255, 179, 64, 0.5); }
  mark.find-current { background: #FFB340; color: #121317; }
}

/* Pages: a stack of fixed-size sheets (US Letter by default, or A4) on the desk, with numbered
   thumbnails on the left, like Preview. Page breaks are presentation only; the Markdown never changes. */
:root { --page-w: 816px; --page-h: 1056px; --page-content-h: 864px; --thumbs-w: 168px; --thumb-scale: 0.137; --page-margin: 96px; }
body.paged { overflow-x: auto; }
body.thumbs-open { padding-left: var(--thumbs-w); }
body.paged #review-bar { z-index: 6; }
#doc.paged { max-width: none; margin: 24px 0; padding: 0; background: none; border-radius: 0; box-shadow: none; transform-origin: 0 0; min-height: 0; }
.page { position: relative; box-sizing: border-box; width: var(--page-w); height: var(--page-h); padding: var(--page-margin); margin: 0 0 24px; background: var(--paper); border-radius: 3px; box-shadow: var(--shadow); overflow-wrap: break-word; }
.page:last-child { margin-bottom: 0; }
.page.page-tall { height: auto; min-height: var(--page-h); }
.page:focus { outline: none; }
.page-body { min-height: var(--page-content-h); }
.page-body > :first-child { margin-top: 0; }
.page-body > h2:first-child { padding-top: 0; border-top: 0; }
.page-num { position: absolute; left: 0; right: 0; bottom: 40px; text-align: center; font-family: var(--sans); font-size: 11px; color: var(--muted); letter-spacing: 0.04em; user-select: none; -webkit-user-select: none; }
.page img { max-height: calc(var(--page-content-h) - 48px); object-fit: contain; height: auto; }
li.pg-cont { list-style: none; }
li.pg-cont::marker { content: ""; }
@media (max-width: 760px) {
  body.paged, html:has(body.paged) { background: var(--desk); }
  #doc.paged { min-height: 0; box-sizing: content-box; }
}

/* Thumbnails */
.thumbs { position: fixed; top: 0; left: 0; bottom: 0; width: var(--thumbs-w); box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; background: var(--panel-bg); border-right: 1px solid var(--rule); z-index: 7; display: none; font-family: var(--sans); }
body.thumbs-open .thumbs { display: block; }
.thumb-list { list-style: none; margin: 0; padding: 16px 0 72px; }
.thumb-item { margin: 0 0 14px; text-align: center; }
.thumb { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px; border: 0; background: none; border-radius: 8px; cursor: pointer; color: var(--muted); }
.thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.thumb-frame { width: calc(var(--page-w) * var(--thumb-scale)); height: calc(var(--page-h) * var(--thumb-scale)); overflow: hidden; border-radius: 2px; background: var(--paper); box-shadow: 0 0 0 1px var(--rule), 0 1px 3px rgba(24, 26, 48, 0.12); pointer-events: none; }
.thumb-inner { width: var(--page-w); height: var(--page-h); transform: scale(var(--thumb-scale)); transform-origin: 0 0; text-align: left; }
.thumb-inner .page { margin: 0; box-shadow: none; border-radius: 0; }
.thumb-inner .page-num { display: none; }
.thumb-pending .thumb-frame { background: repeating-linear-gradient(180deg, var(--paper) 0 18%, var(--rule) 18% 19%); opacity: 0.7; }
.thumb-num { font-size: 11px; font-variant-numeric: tabular-nums; padding: 1px 8px; border-radius: 999px; }
.thumb-current .thumb-frame { box-shadow: 0 0 0 3px var(--accent), 0 1px 3px rgba(24, 26, 48, 0.12); }
.thumb-current .thumb-num { background: var(--accent); color: #fff; font-weight: 600; }
.thumb-grip { position: fixed; top: 0; bottom: 0; left: calc(var(--thumbs-w) - 3px); width: 6px; cursor: col-resize; z-index: 8; }

/* Page bar: floats at the bottom of the reading area */
.page-bar { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 9; display: flex; align-items: center; gap: 2px; padding: 4px 6px; background: var(--bar-bg); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--shadow); font-family: var(--sans); font-size: 12px; color: var(--ink); }
body.thumbs-open .page-bar { left: calc(50% + var(--thumbs-w) / 2); }
body.history-open .page-bar { left: calc(50% - 150px); }
body.thumbs-open.history-open .page-bar { left: calc(50% + var(--thumbs-w) / 2 - 150px); }
.page-bar[hidden] { display: none; }
.pb-button { min-width: 28px; height: 26px; padding: 0 8px; border: 0; border-radius: 7px; background: none; color: var(--ink); cursor: pointer; font-size: 14px; line-height: 1; }
.pb-button:hover { background: var(--accent-soft); color: var(--accent-ink); }
.pb-button:focus-visible { outline: 2px solid var(--accent); }
.pb-button[aria-pressed="true"] { color: var(--accent-ink); }
.pb-zoom { font-size: 12px; font-variant-numeric: tabular-nums; min-width: 48px; }
.pb-label { display: inline-flex; align-items: center; gap: 4px; padding: 0 4px; color: var(--muted); white-space: nowrap; }
.pb-input { min-width: 2ch; text-align: center; font: inherit; font-variant-numeric: tabular-nums; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; padding: 2px 4px; }
.pb-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pb-input.pb-bad { border-color: var(--del); box-shadow: 0 0 0 3px var(--del-bg); }
.pb-sep { width: 1px; height: 16px; background: var(--rule); margin: 0 4px; }
body.thumbs-open .find-bar { right: 16px; }
#doc { position: relative; }

/* Sidebar tabs: Pages | Notes */
.side-tabs { position: sticky; top: 0; z-index: 2; display: flex; gap: 2px; margin: 0; padding: 10px 10px 8px; background: var(--panel-bg); border-bottom: 1px solid var(--rule); }
.side-tab { flex: 1; padding: 4px 6px; border: 0; border-radius: 7px; background: none; color: var(--muted); font-size: 12px; font-weight: 500; cursor: pointer; }
.side-tab[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--rule); }
.side-tab:disabled { opacity: 0.4; cursor: default; }
.side-tab:focus-visible { outline: 2px solid var(--accent); }
.thumbs[data-tab="notes"] .thumb-list { display: none; }
.thumbs[data-tab="pages"] .notes-panel { display: none; }

/* Personal highlights. Each color also has its own underline style, so they're told apart without
   color: solid, double, dotted, dashed, wavy. Notes without a highlight get a dotted underline. */
:root {
  --hl-yellow: #FFE680; --hl-green: #B8F0C6; --hl-blue: #BFDDFF; --hl-pink: #FFC9DE; --hl-purple: #DCCBFF;
  --hl-yellow-ink: #A07A00; --hl-green-ink: #1F8A47; --hl-blue-ink: #2C6BC7; --hl-pink-ink: #C2366F; --hl-purple-ink: #6B43C9;
}
@media (prefers-color-scheme: dark) {
  :root {
    --hl-yellow: rgba(255, 214, 10, 0.32); --hl-green: rgba(48, 209, 88, 0.3); --hl-blue: rgba(10, 132, 255, 0.34); --hl-pink: rgba(255, 55, 135, 0.32); --hl-purple: rgba(175, 110, 255, 0.34);
    --hl-yellow-ink: #FFD60A; --hl-green-ink: #30D158; --hl-blue-ink: #64A8FF; --hl-pink-ink: #FF6FA8; --hl-purple-ink: #C59BFF;
  }
}
mark.anno { color: inherit; border-radius: 2px; padding: 0.04em 0; text-decoration-line: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; cursor: pointer; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
mark.anno-yellow { background: var(--hl-yellow); text-decoration-color: var(--hl-yellow-ink); text-decoration-style: solid; }
mark.anno-green { background: var(--hl-green); text-decoration-color: var(--hl-green-ink); text-decoration-style: double; }
mark.anno-blue { background: var(--hl-blue); text-decoration-color: var(--hl-blue-ink); text-decoration-style: dotted; }
mark.anno-pink { background: var(--hl-pink); text-decoration-color: var(--hl-pink-ink); text-decoration-style: dashed; }
mark.anno-purple { background: var(--hl-purple); text-decoration-color: var(--hl-purple-ink); text-decoration-style: wavy; }
mark.anno-plain { background: none; text-decoration-style: dotted; text-decoration-color: var(--accent); }
mark.anno-overlap { box-shadow: inset 0 -2px 0 var(--accent); }
mark.anno-flash-mark { outline: 2px solid var(--accent); outline-offset: 2px; }
mark.anno mark.find-hit, mark.find-hit mark.anno { box-shadow: 0 0 0 1px rgba(255, 159, 10, 0.7); }

/* Note markers sit in the right margin next to their passage; cards open below the passage. */
.anno-marker { position: absolute; z-index: 3; width: 24px; height: 22px; padding: 0; border: 0; border-radius: 6px 6px 6px 2px; background: var(--accent); color: #fff; cursor: pointer; box-shadow: 0 1px 3px rgba(24, 26, 48, 0.25); }
.anno-marker::before { content: ""; position: absolute; left: 6px; right: 6px; top: 7px; height: 1.5px; background: currentColor; box-shadow: 0 4px 0 currentColor; border-radius: 1px; }
.anno-marker[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--accent-soft), 0 1px 3px rgba(24, 26, 48, 0.25); }
.anno-marker:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.anno-m-yellow { background: var(--hl-yellow-ink); } .anno-m-green { background: var(--hl-green-ink); } .anno-m-blue { background: var(--hl-blue-ink); }
.anno-m-pink { background: var(--hl-pink-ink); } .anno-m-purple { background: var(--hl-purple-ink); }
.anno-card { position: absolute; z-index: 4; box-sizing: border-box; padding: 10px 12px 8px; background: var(--paper); border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 10px; box-shadow: var(--shadow); font-family: var(--sans); font-size: 13px; line-height: 1.45; }
.anno-card[hidden] { display: none; }
.anno-card-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.anno-card-quote { flex: 1; color: var(--muted); font-style: italic; font-family: var(--serif); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anno-icon { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 0 4px; border-radius: 5px; }
.anno-icon:hover { color: var(--accent-ink); background: var(--accent-soft); }
.anno-text { display: block; width: 100%; box-sizing: border-box; min-height: 56px; resize: none; font: 13px/1.45 var(--sans); color: var(--ink); background: var(--code-bg); border: 1px solid var(--rule); border-radius: 7px; padding: 6px 8px; }
.anno-text:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.anno-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.anno-card-meta { color: var(--muted); font-size: 11px; }
.anno-link { border: 0; background: none; padding: 2px 4px; color: var(--accent-ink); font-size: 12px; cursor: pointer; border-radius: 5px; }
.anno-link:hover { background: var(--accent-soft); }
.anno-danger, .anno-danger-text { color: var(--del); }
.thumb-inner .anno-marker, .thumb-inner .anno-card { display: none; }

/* The popover over a selection or a highlight */
.anno-pop { position: fixed; z-index: 30; display: flex; align-items: center; gap: 4px; padding: 5px 6px; background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; box-shadow: var(--shadow); font-family: var(--sans); font-size: 12px; }
.anno-swatch { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(0, 0, 0, 0.15); cursor: pointer; padding: 0; }
.anno-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent); }
.anno-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.anno-s-yellow { background: #FFD60A; } .anno-s-green { background: #34C759; } .anno-s-blue { background: #0A84FF; } .anno-s-pink { background: #FF375F; } .anno-s-purple { background: #AF52DE; }
.anno-pop-sep { width: 1px; height: 16px; background: var(--rule); margin: 0 3px; }
.anno-pop-btn { border: 0; background: none; color: var(--ink); padding: 3px 8px; border-radius: 6px; cursor: pointer; font-size: 12px; white-space: nowrap; }
.anno-pop-btn:hover { background: var(--accent-soft); color: var(--accent-ink); }
.anno-pop-danger { color: var(--del); }
.anno-pop-note { color: var(--muted); font-size: 11px; padding: 0 4px; }
.anno-flash { position: fixed; left: 50%; top: 18px; transform: translateX(-50%); z-index: 40; padding: 8px 14px; border-radius: 10px; background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: 12.5px; box-shadow: var(--shadow); max-width: 80vw; }
.anno-flash[hidden], .anno-error[hidden] { display: none; }
.anno-error { position: fixed; right: 16px; bottom: 64px; z-index: 40; max-width: 320px; padding: 10px 14px; border-radius: 10px; background: var(--del-bg); color: var(--del-fg); border: 1px solid var(--del); font-family: var(--sans); font-size: 12.5px; }

/* Notes and Highlights list */
.notes-panel { padding: 10px 10px 80px; font-family: var(--sans); font-size: 12px; }
.notes-empty, .notes-help { color: var(--muted); line-height: 1.5; margin: 6px 4px 10px; }
.notes-list { list-style: none; margin: 0; padding: 0; }
.notes-item { margin: 0 0 6px; }
.notes-entry { display: flex; gap: 8px; width: 100%; text-align: left; padding: 8px; border: 0; border-radius: 8px; background: var(--paper); box-shadow: 0 0 0 1px var(--rule); color: var(--ink); cursor: pointer; }
.notes-entry:hover { box-shadow: 0 0 0 1.5px var(--accent); }
.notes-entry:focus-visible { outline: 2px solid var(--accent); }
.notes-entry:disabled { cursor: default; opacity: 0.85; }
.notes-swatch { flex: none; width: 10px; height: 10px; margin-top: 3px; border-radius: 50%; }
.notes-swatch-note { background: none; border: 1.5px dotted var(--accent); }
.notes-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.notes-quote { font-family: var(--serif); font-style: italic; color: var(--ink); overflow-wrap: anywhere; }
.notes-note { color: var(--ink); overflow-wrap: anywhere; }
.notes-meta { color: var(--muted); font-size: 11px; }
.notes-group { font-size: 12px; font-weight: 600; color: var(--del); margin: 16px 4px 0; }
.notes-lost .notes-entry { box-shadow: 0 0 0 1px var(--del); }
.notes-actions { display: flex; gap: 6px; padding: 4px 2px 0; }

/* Two pages side by side, like an open book: 1 | 2, 3 | 4 … */
#doc.paged.spread { display: grid; grid-template-columns: repeat(2, var(--page-w)); column-gap: 24px; row-gap: 24px; align-items: start; }
#doc.paged.spread .page { margin: 0; }
.pb-spread { font-size: 12px; letter-spacing: -2px; }