/* Access-a-Reader - app stylesheet.
Chrome (header, toolbar, dialogs) follows the CoA Apps dark/light theme via
the shared coa-theme key. The PDF pages themselves are coloured separately
by the Page Colours dialog - see the .viewer section. */
:root {
color-scheme: dark;
--bg-color: #121212;
--surface-color: #1e1e1e;
--surface-raised: #262626;
--text-color: #f2f2f2;
--text-secondary: #d1d5db;
--muted-color: #d6d6d6;
--accent-green: #4ade80;
--accent-pink: #f472b6;
--focus-color: #fdfd96;
--border-color: #9a9a9a;
--on-accent: #000000;
--on-focus: #121212;
--toolbar-bg: #333333; /* the toolbar sits a shade lighter than the header */
--read-green: #166534; --read-green-hover: #1f7a40; /* the play button: white on dark green */
--toggle-on: #a8145f; /* the selected view: white on dark pink */
--toolbar-line: rgba(170, 170, 170, 0.28); /* the lines above and below it, quieter than the site divider */
--error-color: #f87171;
--viewer-bg: #0c0c0c;
}
:root[data-theme="light"] {
color-scheme: light;
--bg-color: #f5f5f5; --surface-color: #e8e8e8; --surface-raised: #f0f0f0; --text-color: #121212;
--text-secondary: #374151; --muted-color: #3d3d3d; --accent-green: #097732; --accent-pink: #800d48;
--focus-color: #6b6000; --border-color: #5a5a5a; --on-accent: #ffffff; --on-focus: #ffffff; --error-color: #b91c1c;
--toolbar-bg: #f6f6f6; --toolbar-line: rgba(68, 68, 68, 0.3); --toggle-on: #800d48;
--viewer-bg: #c9c9c9;
}
html { font-size: 112.5%; height: 100%; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
* { scrollbar-color: var(--border-color) var(--surface-color); }
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: var(--surface-color); }
::-webkit-scrollbar-thumb { background-color: var(--border-color); border-radius: 8px; border: 3px solid var(--surface-color); }
::-webkit-scrollbar-thumb:hover { background-color: var(--muted-color); }
/* The zoom scales viewport units too (100vh renders 1.2x tall at Large), so every
dialog height below divides by --ui-zoom to stay inside the screen. */
html { --ui-zoom: 1; }
html[data-ui-size="small"] { zoom: 0.85; --ui-zoom: 0.85; }
html[data-ui-size="large"] { zoom: 1.2; --ui-zoom: 1.2; }
body {
margin: 0;
height: 100%;
display: flex;
flex-direction: column;
background-color: var(--bg-color);
color: var(--text-color);
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
line-height: 1.55;
}
h1, h2, h3 { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
*:focus-visible { outline: 3px solid var(--focus-color); outline-offset: 3px; }
.visually-hidden, .sr-only {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.skip-link {
position: absolute; left: -9999px; top: 0; background: var(--focus-color); color: var(--on-accent);
padding: 12px 20px; font-weight: bold; z-index: 1000; border-radius: 0 0 8px 0; text-decoration: none;
}
.skip-link:focus { left: 0; }
/* ---------- Header ---------- */
.site-header {
flex-shrink: 0;
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: 12px 16px; padding: 6px 20px; background-color: var(--surface-color);
border-bottom: 2px solid var(--toolbar-line); z-index: 10;
}
.site-title { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; color: var(--text-color); }
.site-title-link { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.site-title-link:hover, .site-title-link:focus-visible { text-decoration: underline; }
.app-icon { display: block; width: 28px; height: 28px; }
.beta-tag {
font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
color: var(--on-accent); background: var(--focus-color); border-radius: 999px; padding: 2px 8px;
}
.header-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.theme-toggle-group { display: inline-flex; gap: 4px; border: 2px solid var(--border-color); border-radius: 8px; padding: 3px; }
.theme-toggle-btn { background: transparent; border: none; border-radius: 6px; color: var(--text-color); padding: 6px 14px; font-size: 13px; font-weight: 700; cursor: pointer; }
.theme-toggle-btn:hover, .theme-toggle-btn:focus-visible { background-color: var(--border-color); color: var(--bg-color); }
.theme-toggle-btn[aria-checked="true"] { background-color: var(--accent-pink); color: var(--on-accent); }
.header-link {
background: transparent; color: var(--text-color); font-weight: 700; font-size: 14px;
text-decoration: none; border: 2px solid var(--accent-pink); border-radius: 8px;
padding: 8px 14px; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; gap: 6px;
}
.header-link:hover, .header-link:focus-visible { background-color: color-mix(in srgb, var(--accent-pink) 15%, transparent); }
.header-link.is-green { border-color: var(--accent-green); }
.header-link.is-green:hover, .header-link.is-green:focus-visible { background-color: color-mix(in srgb, var(--accent-green) 15%, transparent); }
.header-link.is-neutral { border-color: var(--text-color); }
.header-link.is-neutral svg { flex-shrink: 0; }
.header-link.is-neutral:hover, .header-link.is-neutral:focus-visible { background-color: color-mix(in srgb, var(--text-color) 15%, transparent); }
.header-link.is-yellow { border-color: var(--focus-color); }
.header-link.is-yellow:hover, .header-link.is-yellow:focus-visible { background-color: color-mix(in srgb, var(--focus-color) 15%, transparent); }
.hamburger-btn {
display: none; background: transparent; border: 2px solid var(--accent-pink); border-radius: 8px;
width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--text-color); cursor: pointer; padding: 0;
}
.hamburger-btn:hover, .hamburger-btn:focus-visible { background-color: color-mix(in srgb, var(--accent-pink) 15%, transparent); }
.site-title-row { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; }
.title-sep { color: var(--text-secondary); font-size: 22px; font-weight: 300; }
.site-title-row .doc-name { font-size: 15px; }
@media (max-width: 859px) {
.header-controls > .header-link.app-settings-trigger, .header-controls > #open-btn, .header-controls > #save-btn, .header-controls > #library-btn { display: none; }
.hamburger-btn { display: inline-flex; }
/* One line: the title row shrinks (the file name truncates) and the menu button keeps its place. */
.site-header { flex-wrap: nowrap; }
.site-title-row { flex: 1 1 auto; min-width: 0; }
.site-title { flex-shrink: 0; }
.settings-group .settings-file-actions { display: flex; }
}
/* Phones (a third tier, under the narrow one): the header is just the title,
Options and Menu on one line - the file name moves into Settings - and the
toolbar scrolls sideways instead of wrapping. */
@media (max-width: 600px) {
.site-header { padding: 5px 12px; gap: 8px; }
/* The title gives way before the buttons do: it scales down to 15px, then trims with an ellipsis, and never touches Options. */
.site-title { white-space: nowrap; font-size: clamp(15px, 4.6vw, 18px); flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.site-title-link { display: inline; }
.site-title .app-icon { display: inline-block; width: 22px; height: 22px; vertical-align: -5px; margin-right: 2px; }
.site-title-row { gap: 8px; }
.header-controls { flex-shrink: 0; }
#doc-name-sep, #doc-name, #ocr-status { display: none !important; }
.header-controls { flex-wrap: nowrap; gap: 8px; }
.settings-group .settings-file-name { display: block; }
}
.settings-file-name { display: none; margin: 0 0 12px; font-size: 14px; color: var(--text-secondary); }
.doc-name-inline { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--text-color); text-decoration: underline; cursor: pointer; overflow-wrap: anywhere; text-align: left; }
/* ---------- Toolbar ---------- */
.toolbar {
flex-shrink: 0; position: relative; /* the tool menus hang from its bottom edge */
display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 8px 10px;
padding: 5px 16px; background-color: var(--toolbar-bg);
border-bottom: 2px solid var(--toolbar-line);
}
/* The document controls sit centred; Options keeps to the right. One gap everywhere, so the bars sit evenly. */
/* Page / Reader sits at the left edge, the rest of the tools are centred in the space that is left (the auto margins share the free space). */
.toolbar-main { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 9px; min-width: 0; }
.toolbar .history-tools { margin-left: auto; }
/* Rotate has a visible border where the +/- glyphs sit inside a transparent box, so it needs the extra room to look even. */
#rotate-btn { margin-left: 4px; margin-right: auto; font-size: 1.5rem; }
#rotate-btn[aria-expanded="true"] { background-color: color-mix(in srgb, var(--text-color) 12%, transparent); }
.rotate-popover { width: auto; min-width: 260px; }
.rotate-popover .tp-label { margin-bottom: 8px; }
.rotate-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.rotate-buttons .btn-secondary { min-height: 40px; min-width: 5.5em; }
.rotate-popover .field-hint { margin: 10px 0 0; }
.toolbar-grow { flex: 1 1 auto; min-width: 0; display: flex; justify-content: flex-end; }
.toolbar button, .toolbar select {
background-color: var(--surface-raised); color: var(--text-color); border: 2px solid var(--border-color);
border-radius: 8px; min-height: 44px; padding: 0 12px; font-weight: 700; font-size: 14px;
cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.toolbar button:hover, .toolbar button:focus-visible, .toolbar select:hover, .toolbar select:focus-visible { border-color: var(--text-color); }
.toolbar #zoom-select, .toolbar #tb-size-select { border-color: var(--accent-pink); }
.toolbar #zoom-select:hover, .toolbar #zoom-select:focus-visible, .toolbar #tb-size-select:hover, .toolbar #tb-size-select:focus-visible { border-color: var(--text-color); }
.page-nav { display: contents; }
.page-nav[hidden] { display: none; }
.toolbar button:disabled, .toolbar select:disabled, .toolbar input:disabled { opacity: 0.45; cursor: not-allowed; }
.toolbar button.primary { border-color: var(--accent-green); background-color: color-mix(in srgb, var(--accent-green) 15%, var(--surface-raised)); }
.toolbar button.primary:hover, .toolbar button.primary:focus-visible { background-color: color-mix(in srgb, var(--accent-green) 28%, var(--surface-raised)); }
.toolbar button.accent-pink { border-color: var(--accent-pink); background-color: color-mix(in srgb, var(--accent-pink) 15%, var(--surface-raised)); }
.toolbar button.accent-pink:hover, .toolbar button.accent-pink:focus-visible { background-color: color-mix(in srgb, var(--accent-pink) 28%, var(--surface-raised)); }
/* Arrows and +/- are plain icons: never a box, just a slightly lighter background when hovered or focused. */
.toolbar button.icon-only { width: 36px; min-height: 36px; padding: 0; font-size: 1.4rem; border-color: transparent; background-color: transparent; }
.toolbar button.icon-only:hover, .toolbar button.icon-only:focus-visible { border-color: transparent; background-color: color-mix(in srgb, var(--text-color) 12%, transparent); }
/* The arrows hug the page field and +/- hug the zoom menu; the bars keep the toolbar's own gap on both sides. */
.toolbar-cluster { display: inline-flex; align-items: center; gap: 2px; }
/* After the last picture of a picture document: add more. */
/* Add an image: a row after the last page and before the footer. It scrolls with the
file but is not a page, so zoom and pinch leave it alone; sticky left keeps it in
view when the pages are wider than the screen. */
.viewer-end { display: flex; justify-content: center; padding: 8px 0 16px; position: sticky; left: 0; }
.viewer-end button { display: flex; justify-content: center; width: 75vw; max-width: 100%; }
@media (max-width: 600px) { .viewer-end button { width: 100%; } }
.page-field #page-count.is-disabled { opacity: 0.45; }
.toolbar .btn-label-short { display: none; }
.label-short { display: none; } /* short button labels, shown on phones only */
.toolbar select {
appearance: none; -webkit-appearance: none; padding-right: 30px; padding-left: 10px;
background-repeat: no-repeat; background-position: right 6px center; background-size: 18px 18px;
background-image: url("data:image/svg+xml;utf8,");
}
:root[data-theme="light"] .toolbar select {
background-image: url("data:image/svg+xml;utf8,");
}
.page-field { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; }
.page-field input {
width: 4.2em; min-height: 44px; text-align: center; font: inherit; font-weight: 700;
background-color: var(--bg-color); color: var(--text-color); border: 2px solid var(--accent-pink); border-radius: 8px;
}
.page-field input::-webkit-outer-spin-button, .page-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.page-field input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.ocr-status { font-size: 13px; font-weight: 700; color: var(--accent-green); white-space: nowrap; }
.ocr-status::before { content: "ยท"; margin-right: 8px; color: var(--text-secondary); }
.progress-label { margin: 0 0 8px; font-weight: 700; color: var(--text-color); }
.progress-bar { width: 100%; height: 18px; accent-color: var(--accent-green); }
.doc-name {
font-weight: 700; font-size: 14px; color: var(--text-secondary); font-family: inherit;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%;
background: none; border: 0; padding: 4px 0; cursor: pointer; text-align: left;
}
.doc-name:hover, .doc-name:focus-visible { color: var(--text-color); text-decoration: underline; }
.doc-name:empty { display: none; }
.filename-full { font-weight: 700; overflow-wrap: anywhere; user-select: text; margin: 0; }
.settings-file-actions { display: none; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.toolbar-sep { display: inline-block; width: 2px; height: 32px; background: var(--divider-color); border-radius: 1px; }
.toolbar button.icon-only svg { display: block; }
@media (max-width: 859px) {
.toolbar { padding: 8px 10px; gap: 8px; }
.toolbar .btn-label-long { display: none; }
.toolbar .btn-label-short { display: inline; }
}
@media (max-width: 600px) {
.toolbar { display: block; padding: 4px 0; overflow: hidden; } /* the strip inside scrolls; nothing leaks out to widen the page */
.toolbar-main { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; padding: 2px 10px 6px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.toolbar-main > * { flex-shrink: 0; }
/* The menus cannot live inside a scrolling strip (they would be clipped), so they float over the page. */
.toolbar .tool-popover { position: fixed; top: auto; }
}
/* ---------- Main: welcome + viewer ---------- */
.viewer-shell { flex: 1 1 auto; min-height: 0; position: relative; display: flex; flex-direction: row; }
.doc-main { flex: 1 1 auto; min-width: 0; min-height: 0; position: relative; display: flex; flex-direction: column; }
/* The sidebar: the options of the current view (Page options for now), beside the document on a computer. */
.view-sidebar { flex: 0 0 340px; width: 340px; min-height: 0; overflow-y: auto; border-right: 2px solid var(--divider-color); background-color: var(--surface-color); padding: 6px 16px 16px; }
.view-sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.view-sidebar-heading { font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--focus-color); }
.sidebar-collapse-btn { width: 34px; height: 34px; border: 2px solid var(--border-color); border-radius: 6px; background: transparent; color: var(--text-color); font-weight: 800; font-size: 1.2rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.sidebar-collapse-btn:hover, .sidebar-collapse-btn:focus-visible { border-color: var(--text-color); }
.view-sidebar .colours-controls { overflow: visible; max-height: none; padding: 0; }
.view-sidebar .colours-controls .modal-hint { display: none; }
.view-sidebar .segmented button { padding: 5px 9px; }
.view-sidebar-actions { margin-top: 36px; }
.view-sidebar-actions .btn-secondary { width: 100%; }
@media (max-width: 859px) { .view-sidebar { display: none; } #ocr-status { display: none !important; } } /* the OCR status line is a desktop thing */
/* Page / Reader, first thing on the toolbar; the selected view carries the chevron that opens its options. */
.toolbar .view-toggle { padding: 3px; }
.toolbar .view-toggle button { min-height: 38px; padding: 0 12px; border-color: transparent; background-color: transparent; gap: 2px; }
.toolbar .view-toggle button[aria-pressed="true"] { background-color: var(--toggle-on); color: #ffffff; border-color: var(--toggle-on); }
.toolbar .view-toggle button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
/* Contents: the button beside Page | Reader; the list lives in the sidebar (a dialog on phones) */
.toolbar button.toc-btn { margin: 0 auto 0 6px; width: 40px; min-height: 40px; border-color: var(--border-color); }
.toolbar button.toc-btn:hover, .toolbar button.toc-btn:focus-visible { border-color: var(--text-color); }
.toolbar button.toc-btn[aria-expanded="true"] { background-color: var(--toggle-on); color: #ffffff; }
.toolbar button.toc-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.toc-body .toc-source, #toc-dialog-body .toc-source { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.toc-list { display: flex; flex-direction: column; gap: 2px; }
.toc-item { display: flex; align-items: baseline; gap: 12px; width: 100%; min-height: 40px; padding: 7px 10px; border: 2px solid transparent; border-radius: 6px; background: transparent; color: var(--text-color); text-align: left; font: inherit; font-size: 15px; font-weight: 600; line-height: 1.35; cursor: pointer; }
.toc-item[data-level="2"] { padding-left: 40px; font-weight: 500; }
.toc-item[data-level="3"] { padding-left: 70px; font-weight: 500; font-size: 14px; }
.toc-item:hover, .toc-item:focus-visible { background-color: color-mix(in srgb, var(--text-color) 12%, transparent); outline: none; }
.toc-item:focus-visible { border-color: var(--focus-color); }
.toc-item[aria-current="true"] { background-color: var(--read-green); color: #ffffff; }
.toc-item .toc-title { flex: 1 1 auto; min-width: 0; }
.toc-item .toc-page { flex: none; font-size: 13px; font-weight: 700; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.toc-item[aria-current="true"] .toc-page { color: rgba(255, 255, 255, 0.85); }
.toc-empty { padding: 8px 10px 4px; color: var(--text-secondary); font-size: 14px; }
#toc-dialog .toc-list { max-height: calc(60vh / var(--ui-zoom)); overflow: auto; margin-bottom: 12px; }
.toolbar .view-toggle .view-chev { display: none; transition: transform 0.15s; }
.toolbar .view-toggle button[aria-pressed="true"] .view-chev { display: block; }
.toolbar .view-toggle button[aria-expanded="true"] .view-chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .toolbar .view-toggle .view-chev { transition: none; } }
/* A tooltip: dark, above its button, wraps, yellow edge. The outer box is an invisible
margin the pointer can rest on, so moving onto the tooltip does not dismiss it. */
.app-tip { position: fixed; z-index: 130; padding: 12px; }
.app-tip-box { max-width: 260px; padding: 8px 12px; border: 2px solid #fdfd96; border-radius: 8px; background-color: #1e1e1e; color: #f2f2f2; font-size: 14px; font-weight: 700; line-height: 1.4; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); }
.welcome { flex: 1 1 auto; overflow-y: auto; padding: 32px 24px 48px; display: flex; flex-direction: column; }
.welcome-card { max-width: 640px; width: 100%; margin: 0 auto 40px; flex: 0 0 auto; }
.back-to-coa-apps { display: inline-block; color: var(--accent-green); font-weight: 700; font-size: 14px; text-decoration: none; margin: 0 0 14px; }
.back-to-coa-apps:hover, .back-to-coa-apps:focus-visible { color: var(--focus-color); text-decoration: underline; }
.settings-back-link { margin: 0 0 12px; }
.coa-auth-account-section { margin: 0 0 8px; }
.settings-account-cta { margin: 0 0 10px; font-weight: 700; }
.welcome h1 { font-size: 2rem; line-height: 1.2; margin-bottom: 8px; }
.welcome .lead { color: var(--text-secondary); font-size: 1.05rem; margin: 0 0 24px; }
/* Dashed like a drop target, drawn as an SVG so the dashes can sit further apart than a CSS dashed border allows. */
.welcome .welcome-open { display: flex; width: 100%; min-height: 72px; justify-content: center; font-size: 1.1rem; padding: 14px 18px; border-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1.5' y='1.5' width='calc(100%25 - 3px)' height='calc(100%25 - 3px)' rx='9' fill='none' stroke='%23fdfd96' stroke-width='3' stroke-dasharray='12 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 100% 100%; }
:root[data-theme="light"] .welcome .welcome-open { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1.5' y='1.5' width='calc(100%25 - 3px)' height='calc(100%25 - 3px)' rx='9' fill='none' stroke='%236b6000' stroke-width='3' stroke-dasharray='12 9'/%3E%3C/svg%3E"); }
.welcome-hint { color: var(--text-secondary); font-size: 0.95rem; margin: 12px 0 0; }
.welcome h2 { font-size: 1.15rem; color: var(--focus-color); margin: 32px 0 10px; }
.welcome ul { margin: 0; padding-left: 1.3em; }
.welcome li { margin: 6px 0; }
.welcome li strong { color: var(--text-color); }
.welcome .privacy-note {
margin: 28px 0 0; padding: 14px 16px; border-radius: 10px;
border: 2px solid rgb(from var(--border-color) r g b / 0.45); color: var(--text-secondary); font-size: 0.95rem;
}
.welcome .privacy-note strong { color: var(--text-color); }
.recent-row { margin-top: 20px; }
.welcome .recent-heading { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); margin: 0 0 8px; }
.recent-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 600px) { .recent-columns { grid-template-columns: 1fr; } }
.welcome .recent-subheading { font-size: 0.9rem; margin: 0 0 6px; color: var(--text-color); }
/* The help accordion on the start screen. */
.welcome-help { margin-top: 28px; border: 2px solid rgb(from var(--border-color) r g b / 0.45); border-radius: 10px; padding: 4px 16px 6px; }
.welcome-help summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.welcome-help summary::-webkit-details-marker { display: none; }
.welcome-help summary::before { content: "\25B8"; color: var(--focus-color); font-size: 1.1rem; transition: transform 0.15s; }
.welcome-help[open] summary::before { transform: rotate(90deg); }
.welcome-help summary h2 { margin: 0; }
.welcome-help h3 { font-size: 1rem; color: var(--focus-color); margin: 16px 0 8px; }
.welcome-help[open] { padding-bottom: 14px; }
.welcome .recent-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.recent-list li { margin: 0; }
.recent-list .recent-btn { display: flex; width: 100%; justify-content: flex-start; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.recent-clear { background: none; border: 0; margin: 18px 0 10px; padding: 6px 0; color: var(--text-secondary); text-decoration: underline; cursor: pointer; font-size: 0.9rem; font-weight: 700; }
.recent-clear:hover, .recent-clear:focus-visible { color: var(--text-color); }
/* The Library on the home page */
.library-row { margin-top: 26px; }
.library-heading:focus-visible { outline: 3px solid var(--focus-color); outline-offset: 4px; border-radius: 4px; }
.library-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 12px; }
.library-filters { flex: 0 1 auto; }
.library-filters button { padding: 5px 10px; min-height: 36px; font-size: 0.85rem; }
.library-search { flex: 1 1 200px; min-width: 0; min-height: 40px; padding: 0 12px; font: inherit; font-size: 15px; font-weight: 700; color: var(--text-color); background-color: var(--bg-color); border: 2px solid var(--border-color); border-radius: 8px; }
.library-search:focus-visible { border-color: var(--text-color); outline: none; }
.library-search::-webkit-search-cancel-button { filter: invert(1); }
:root[data-theme="light"] .library-search::-webkit-search-cancel-button { filter: none; }
.library-empty { margin: 0 0 6px; }
.welcome .library-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.library-item { display: flex; align-items: stretch; gap: 8px; margin: 0; }
.library-open { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; text-align: left; padding: 8px 12px; min-height: 52px; background-color: var(--surface-raised); color: var(--text-color); border: 2px solid var(--border-color); border-radius: 8px; font: inherit; cursor: pointer; }
.library-open:hover, .library-open:focus-visible { border-color: var(--text-color); }
.library-kind { grid-row: 1 / 3; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background-color: var(--lib-kind, #1f4f8f); color: #ffffff; white-space: nowrap; }
.library-title { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.library-meta { font-size: 13px; color: var(--text-secondary); overflow-wrap: anywhere; }
.library-remove { flex: none; width: 44px; min-height: 44px; border: 2px solid var(--border-color); border-radius: 8px; background: transparent; color: var(--text-secondary); font-size: 1.4rem; cursor: pointer; }
.library-remove:hover, .library-remove:focus-visible { color: var(--text-color); border-color: var(--text-color); }
/* Save: the format menu and its notes */
#save-kind-field .settings-select { max-width: none; }
.save-images-row { margin: 4px 0 6px; }
#save-images-note { margin: 0 0 12px; }
.notice-amber { border: 1px solid #d99a1a; background-color: rgba(217, 154, 26, 0.12); color: var(--text-color); }
.save-scan-note { border-radius: 8px; padding: 10px 12px; margin: 0 0 14px; }
.save-scan-note p { margin: 0 0 8px; font-size: 14px; }
.save-scan-note .check-row { margin: 0 0 8px; font-size: 14px; }
/* The home page over an open file */
.home-back { margin: 0 0 14px; }
body.home-mode .toolbar, body.home-mode .view-sidebar, body.home-mode #annot-float { display: none !important; }
/* The document viewer: a scrolling column of pages. */
.viewer.pinching .page { transform-origin: 0 0; }
@media (pointer: coarse) { .viewer.pinching { overflow: hidden; } }
.viewer {
flex: 1 1 auto; min-height: 0; overflow: auto; padding: 16px 12px 40px;
touch-action: pan-x pan-y;
background-color: var(--viewer-bg);
position: relative;
/* PDF.js text layer sizing - it reads these variables. --total-scale-factor is
declared on .page (below) so each page's own --scale-factor feeds it. */
--scale-factor: 1;
--user-unit: 1;
--scale-round-x: 1px;
--scale-round-y: 1px;
/* Page colour and the matching invert amount (set from JS by the Page Colours dialog). */
--page-bg: #1a1a1a;
--page-invert: 0.898;
}
.viewer:focus, .viewer:focus-visible { outline: none; } /* no ring around the whole file view: the pages themselves are the focus */
.page {
position: relative; margin: 0 auto 32px; background-color: var(--page-bg);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); overflow: hidden;
/* Light grey edge so a dark page still reads as a page against the dark surround. */
outline: 2px solid rgb(from var(--border-color) r g b / 0.65);
contain: layout paint;
--total-scale-factor: calc(var(--scale-factor) * var(--user-unit));
}
.page canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; }
/* Overlays may be cropped to their content; their inline left/top/width/height then win. */
.page canvas.pictures, .page canvas.darkareas { pointer-events: none; }
.page canvas.darkareas { display: none; }
.viewer.mode-dark.darkareas-original .page canvas.darkareas { display: block; }
.viewer.mode-dark.darkareas-dim .page canvas.darkareas { display: block; filter: url(#aar-dimdark); }
.viewer.mode-dark.darkareas-darken .page canvas.darkareas { display: block; filter: url(#aar-dimdark-2); }
.page .page-loading {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
color: var(--text-secondary); font-weight: 700; font-size: 0.95rem;
}
.page .page-loading[hidden] { display: none; }
/* A blank page: greyed, a grey X corner to corner, labelled large; same size so page numbers stay honest. */
.page.blank {
background-color: color-mix(in srgb, var(--page-bg) 72%, #6a6a6a); /* a shade darker than the surround: clearly a page, clearly empty */
outline-color: rgb(from var(--border-color) r g b / 0.35);
background-image:
linear-gradient(to top right, transparent calc(50% - 1px), rgba(138, 138, 138, 0.45) calc(50% - 1px), rgba(138, 138, 138, 0.45) calc(50% + 1px), transparent calc(50% + 1px)),
linear-gradient(to top left, transparent calc(50% - 1px), rgba(138, 138, 138, 0.45) calc(50% - 1px), rgba(138, 138, 138, 0.45) calc(50% + 1px), transparent calc(50% + 1px));
}
.page .blank-note {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
color: rgb(from var(--text-secondary) r g b / 0.55); font-weight: 700; font-size: clamp(1.3rem, 5vw, 2.6rem); letter-spacing: 0.06em; text-align: center;
pointer-events: none; padding: 0.4em 0.6em;
text-shadow: 0 0 0.35em color-mix(in srgb, var(--page-bg) 60%, #7a7a7a), 0 0 0.35em color-mix(in srgb, var(--page-bg) 60%, #7a7a7a);
}
/* Colour modes - a CSS filter on the drawn page, so switching is instant.
Dark: white -> #202020, black -> light grey, and the hue rotation puts every
colour back where it was (orange stays orange). Invert: a plain negative. */
/* Two slots feed the chain: a scan clean-up in front (sharpen, or sharpen +
contrast curve, on scanned pages only) and a text-brightness curve at the
end. opacity(1) is the "nothing" filter. */
.viewer .page canvas.base { --scan-filter: opacity(1); --text-filter: opacity(1); }
.viewer.scans-sharp .page.scan canvas.base { --scan-filter: url(#aar-sharpen); }
.viewer.scans-crisp .page.scan canvas.base { --scan-filter: url(#aar-sharpen) url(#aar-crisp); }
.viewer.mode-dark.text-1 .page canvas.base { --text-filter: url(#aar-lift-1); }
.viewer.mode-dark.text-2 .page canvas.base { --text-filter: url(#aar-lift-2); }
.viewer.mode-dark.text-3 .page canvas.base { --text-filter: url(#aar-lift-3); }
.viewer.mode-dark .page canvas.base:not(.baked) { filter: var(--scan-filter) url(#aar-paper) invert(var(--page-invert)) hue-rotate(180deg) var(--text-filter); }
.viewer.mode-invert .page canvas.base:not(.baked) { filter: var(--scan-filter) invert(1); }
.viewer.mode-original .page canvas.base:not(.baked) { filter: var(--scan-filter); }
/* The untouched copy of the pictures: shown in Dark and Light (in Light it keeps
the sink curve off the photos), hidden when they should follow the mode, and
never used by Invert or Original, which touch nothing. */
.viewer.pictures-dim .page canvas.pictures { filter: brightness(0.78); }
.viewer.pictures-darken .page canvas.pictures { filter: brightness(0.62); }
.viewer.mode-invert .page canvas.pictures, .viewer.mode-original .page canvas.pictures { display: none; }
/* Markup tools: a bordered group with CoAuthor's button styling (quiet
buttons, green when active), a chevron beside the pen and the highlighter
that opens that tool's menu. */
.toolbar .tool-group { display: inline-flex; align-items: center; gap: 6px; padding: 3px 5px; border: 2px solid var(--border-color); border-radius: 10px; background-color: transparent; }
.toolbar .tool-group button.icon-only { width: 40px; min-height: 40px; border-radius: 6px; color: var(--text-secondary); }
.toolbar .tool-group button.icon-only svg { width: 26px; height: 26px; }
.toolbar .tool-group button.icon-only:hover, .toolbar .tool-group button.icon-only:focus-visible { border-color: transparent; background-color: color-mix(in srgb, var(--text-color) 12%, transparent); color: var(--accent-green); }
.toolbar .tool-group button.icon-only[aria-pressed="true"] { color: var(--accent-green); background-color: color-mix(in srgb, var(--accent-green) 20%, transparent); border-color: var(--accent-green); }
.toolbar .tool-group .tool-pair { display: inline-flex; align-items: center; gap: 0; }
.toolbar .annot-tools { margin: 0 8px 0 6px; } /* a little more air around the markup group */
.toolbar .tool-group button.tool-more { width: 22px; min-height: 40px; padding: 0; margin-left: -2px; border: 2px solid transparent; border-radius: 6px; background: transparent; color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.toolbar .tool-group button.tool-more:hover, .toolbar .tool-group button.tool-more:focus-visible, .toolbar .tool-group button.tool-more[aria-expanded="true"] { background-color: color-mix(in srgb, var(--text-color) 12%, transparent); color: var(--accent-green); }
.toolbar .tool-group button.tool-more:disabled { opacity: 0.45; cursor: not-allowed; }
.tool-popover {
position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; width: min(340px, 92vw); padding: 12px 14px 10px;
background-color: var(--surface-color); border: 2px solid var(--border-color); border-radius: 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
font-size: 14px; font-weight: 400; text-align: left;
}
.tool-popover .tp-row { margin-bottom: 12px; }
.tool-popover .tp-label, .tool-popover .tp-row > label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); margin: 0 0 6px; }
.swatches { display: grid; grid-template-columns: repeat(8, 32px); gap: 8px; margin-bottom: 10px; }
/* Scoped under the popover so the toolbar's own button rules do not paint over the colour. */
.tool-popover .swatch { width: 32px; height: 32px; min-height: 32px; border-radius: 6px; border: 2px solid var(--border-color); background-color: var(--swatch); cursor: pointer; padding: 0; margin: 0; }
.tool-popover .swatch:hover, .tool-popover .swatch:focus-visible { border-color: var(--text-color); }
.tool-popover .swatch[aria-checked="true"] { outline: 3px solid var(--focus-color); outline-offset: 2px; }
.swatch-custom { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text-color); }
.tool-popover .hex-input { width: 9ch; min-height: 32px; padding: 0 8px; font: 700 14px ui-monospace, Consolas, monospace; letter-spacing: 0.04em; border: 2px solid var(--border-color); border-radius: 6px; background-color: var(--surface-raised); color: var(--text-color); }
.tool-popover .hex-input[aria-invalid="true"] { border-color: var(--error-color); }
.tool-popover input[type="color"] { width: 40px; height: 32px; min-height: 32px; padding: 2px; border: 2px solid var(--border-color); border-radius: 6px; background-color: var(--surface-raised); cursor: pointer; }
.af-edit-popover { position: fixed; top: auto; left: auto; z-index: 70; }
.af-edit-popover[data-type="stamp"] .af-colour-row, .af-edit-popover[data-type="stamp"] .af-range-row { display: none; }
.tp-range-row { display: flex; align-items: center; gap: 10px; position: relative; }
/* The value floats above the slider's handle while it is being dragged. */
.range-tip {
position: absolute; bottom: calc(100% + 6px); transform: translateX(-50%); z-index: 2; pointer-events: none;
background-color: var(--surface-raised); color: var(--text-color); border: 2px solid var(--border-color); border-radius: 6px;
padding: 3px 8px; font-size: 13px; font-weight: 700; white-space: nowrap;
}
.range-tip::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--border-color); }
.tp-range-row input[type="range"] { flex: 1 1 auto; accent-color: var(--accent-green); min-height: 28px; }
.tp-range-row output { min-width: 3.2em; font-weight: 700; text-align: right; }
.tp-sample { display: block; height: 30px; border-radius: 6px; background-color: var(--surface-raised); position: relative; overflow: hidden; margin-top: 8px; }
#pen-popover .tp-sample::after { content: ""; position: absolute; left: 10%; right: 10%; top: 50%; height: var(--sample-width, 3px); transform: translateY(-50%); background-color: var(--sample-colour, #ffd400); border-radius: 99px; }
#highlight-popover .tp-sample { background-color: var(--hl-sample-bg, #fff); color: var(--hl-sample-fg, #000); font: 700 14px system-ui, sans-serif; display: flex; align-items: center; padding: 0 12px; }
#highlight-popover .tp-sample::after { content: ""; position: absolute; inset: 5px 6px; background-color: var(--sample-colour, #ffd400); opacity: var(--sample-opacity, 0.5); mix-blend-mode: var(--hl-sample-blend, multiply); border-radius: 3px; }
.tp-actions { display: flex; justify-content: flex-end; }
.tp-actions .btn-secondary { min-height: 36px; padding: 0 14px; }
/* The little toolbar over the selected annotation. */
.annot-float {
position: fixed; z-index: 60; display: flex; align-items: center; gap: 6px; padding: 6px;
background-color: var(--surface-color); border: 2px solid var(--border-color); border-radius: 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
.annot-float select, .annot-float button {
background-color: var(--surface-raised); color: var(--text-color); border: 2px solid var(--border-color); border-radius: 8px;
min-height: 36px; padding: 0 10px; font-weight: 700; font-size: 14px; cursor: pointer;
}
.annot-float select { appearance: none; -webkit-appearance: none; padding-right: 26px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 6px center; background-size: 14px; }
.annot-float button.icon-only { width: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.annot-float button:hover, .annot-float button:focus-visible, .annot-float select:hover, .annot-float select:focus-visible { border-color: var(--text-color); }
.annot-float .af-delete { color: var(--error-color); }
.annot-float #af-edit-btn { color: var(--focus-color); } /* the same yellow as the Open button's border */
.annot-float[data-type="stamp"] #af-edit-btn { display: none; }
#app-settings-dialog #scans-row { margin-top: 22px; }
.annot-float .af-field { display: inline-flex; }
.annot-float .af-size { display: none; align-items: center; gap: 4px; font-weight: 700; }
.annot-float .af-size select { min-width: 5.5em; }
.annot-float .af-width, .annot-float .af-opacity, .annot-float .af-size { display: none; }
.annot-float[data-type="ink"] .af-width { display: inline-flex; }
.annot-float[data-type="highlight"] .af-opacity { display: inline-flex; }
.annot-float[data-type="text"] .af-size { display: inline-flex; }
.annot-float[data-type="stamp"] .af-colour { display: none; }
/* ---------- Annotation layers ----------
Two SVGs per page in the page's own points: the interactive layer on top
(pen strokes, notes, stamps, and see-through twins of the highlights), and
a highlight layer under it that blends with the page. */
.annot-layer, .hl-layer { position: absolute; left: 50%; top: 50%; overflow: visible; pointer-events: none; }
.hl-layer { z-index: 3; }
.hl-layer:not(:empty) { mix-blend-mode: multiply; }
.viewer.mode-dark .hl-layer:not(:empty), .viewer.mode-invert .hl-layer:not(:empty) { mix-blend-mode: screen; }
.annot-layer { z-index: 4; touch-action: pan-x pan-y; }
.annot-layer > * { pointer-events: auto; }
.annot-layer .sel-box { fill: none; stroke: var(--focus-color); stroke-width: 2.5; stroke-dasharray: 5 3; pointer-events: none; vector-effect: non-scaling-stroke; }
.annot-layer .sel-hit { fill: none; stroke: #000; stroke-opacity: 0; stroke-width: 10; pointer-events: stroke; cursor: move; vector-effect: non-scaling-stroke; }
.annot-layer .annot:focus { outline: none; }
.annot-layer path.annot, .annot-layer rect.annot, .annot-layer image.annot { cursor: move; }
.annot-layer .resize-handle { fill: var(--focus-color); stroke: #000; stroke-width: 0.6; cursor: nwse-resize; }
.annot-layer .resize-handle:focus-visible { stroke: #fff; stroke-width: 1.5; }
.annot-layer foreignObject { pointer-events: none; overflow: visible; }
/* The note's frame is invisible but grabbable (its edge moves the note); the dashed selection box does the same once selected. */
.annot-layer .note-frame { fill: none; stroke: #000; stroke-opacity: 0; stroke-width: 6; pointer-events: stroke; cursor: move; }
.annot-layer .annot-text {
pointer-events: auto; display: block; width: 100%; box-sizing: border-box;
font-family: system-ui, sans-serif; line-height: 1.25; white-space: pre-wrap; overflow-wrap: anywhere;
padding: 2px 4px; border-radius: 3px; background: rgba(0, 0, 0, 0.6); outline: none; cursor: text;
}
.viewer.mode-original .annot-layer .annot-text { background: rgba(255, 255, 255, 0.8); }
.annot-layer .annot-text:focus { outline: none; } /* the dashed selection box is the only marker */
.viewer.tool-active .annot-layer { pointer-events: auto; }
.viewer.tool-pen .annot-layer, .viewer.tool-highlight .annot-layer { cursor: crosshair; touch-action: none; }
/* The pen tool's pointer is a pencil in the pen's colour whose tip is the hotspot;
a dot under the tip previews the colour and thickness of the line to come. */
.viewer.tool-pen .annot-layer { cursor: var(--pen-cursor, crosshair); }
.annot-layer .pen-dot { pointer-events: none; opacity: 0.9; }
.viewer.tool-text .annot-layer { cursor: text; }
.viewer.tool-stamp .annot-layer { cursor: copy; }
.viewer.tool-active .textLayer { pointer-events: none; }
/* ---------- PDF.js text layer (trimmed from pdf_viewer.css) ----------
Real, selectable text laid over the drawn page - this is what NVDA reads. */
.textLayer {
color-scheme: only light;
position: absolute; text-align: initial; inset: 0; overflow: clip; opacity: 1; line-height: 1;
letter-spacing: normal; word-spacing: normal;
-webkit-text-size-adjust: none; text-size-adjust: none; forced-color-adjust: none;
transform-origin: 0 0; caret-color: CanvasText; z-index: 2;
--min-font-size: 1;
--text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
--min-font-size-inv: calc(1 / var(--min-font-size));
}
.textLayer :is(span, br) {
color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%;
-webkit-user-select: text; user-select: text;
}
.textLayer > :not(.markedContent), .textLayer .markedContent span:not(.markedContent) {
z-index: 1;
--font-height: 0;
font-size: calc(var(--text-scale-factor) * var(--font-height));
--scale-x: 1;
--rotate: 0deg;
transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
}
.textLayer .markedContent { display: contents; }
.textLayer span[role="img"] { -webkit-user-select: none; user-select: none; cursor: default; }
.textLayer ::selection { background: rgba(0, 120, 255, 0.45); color: transparent; }
.textLayer br::selection { background: transparent; }
.textLayer .endOfContent {
display: block; position: absolute; inset: 100% 0 0; z-index: 0; cursor: default;
-webkit-user-select: none; user-select: none;
}
.textLayer.selecting .endOfContent { top: 0; }
/* Drag-and-drop overlay */
.drop-overlay {
position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
background-color: color-mix(in srgb, var(--bg-color) 80%, transparent);
border: 4px dashed var(--accent-green); margin: 10px; border-radius: 16px;
font-size: 1.4rem; font-weight: 800; pointer-events: none;
}
.busy-bar {
position: absolute; left: 0; right: 0; top: 0; z-index: 15; padding: 8px 16px; text-align: center;
background-color: var(--surface-raised); color: var(--text-color); font-weight: 700; font-size: 0.95rem;
border-bottom: 2px solid var(--divider-color);
}
.extra-files-bar { position: absolute; left: 0; right: 0; top: 0; z-index: 15; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; padding: 8px 44px 8px 16px; background-color: var(--surface-raised); color: var(--text-color); font-weight: 700; font-size: 0.95rem; border-bottom: 2px solid var(--divider-color); }
.extra-files-bar .btn-secondary { min-height: 34px; padding: 0 12px; }
.extra-files-bar .notice-close { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }
/* ---------- Footer ---------- */
.site-footer {
flex-shrink: 0; padding: 8px 16px; border-top: 2px solid var(--divider-color);
color: var(--muted-color); font-size: 12px; text-align: center; background-color: var(--surface-color);
}
.welcome > .site-footer { margin: auto -24px -48px; flex: 0 0 auto; } /* after the content, or at the bottom when the content is short */
.viewer > .site-footer { margin: 24px -12px -40px; position: sticky; left: 0; }
.site-footer p { margin: 0; }
.site-footer a { color: var(--focus-color); text-decoration: underline; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--text-color); }
/* ---------- Fields ---------- */
.field { margin-top: 18px; }
.field label { display: block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-color); margin-bottom: 6px; }
.field input[type="text"], .field input[type="password"] {
width: 100%; background-color: var(--bg-color); color: var(--text-color);
border: 2px solid var(--accent-green); border-radius: 8px; padding: 10px 12px;
font-size: 17px; font-family: inherit;
}
.field select {
width: 100%; background-color: var(--bg-color); color: var(--text-color);
border: 2px solid var(--accent-pink); border-radius: 8px; padding: 10px 12px;
font-size: 15px; font-family: inherit;
appearance: none; -webkit-appearance: none;
background-repeat: no-repeat; background-position: right 14px center; background-size: 26px 26px; padding-right: 46px;
background-image: url("data:image/svg+xml;utf8,");
}
:root[data-theme="light"] .field select {
background-image: url("data:image/svg+xml;utf8,");
}
.settings-row .settings-select { width: 100%; max-width: 340px; background-color: var(--bg-color); color: var(--text-color); border: 2px solid var(--accent-pink); border-radius: 8px; padding: 8px 40px 8px 12px; font-size: 14px; font-family: inherit; appearance: none; -webkit-appearance: none; background-repeat: no-repeat; background-position: right 12px center; background-size: 22px 22px; background-image: url("data:image/svg+xml;utf8,"); }
:root[data-theme="light"] .settings-row .settings-select { background-image: url("data:image/svg+xml;utf8,"); }
.field-hint { color: var(--text-secondary); font-size: 13px; margin: 6px 0 0; }
.field-error { color: var(--error-color); font-weight: 700; font-size: 13px; margin: 6px 0 0; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.switch-row label { margin-bottom: 0; text-transform: none; font-size: 15px; letter-spacing: 0; }
.switch-btn {
flex-shrink: 0; min-width: 64px; min-height: 40px; border-radius: 999px; border: 2px solid var(--border-color);
background: var(--surface-raised); color: var(--text-color); font-weight: 800; cursor: pointer; padding: 0 14px;
}
.switch-btn[aria-checked="true"] { background: var(--accent-green); color: var(--on-accent); border-color: var(--accent-green); }
/* ---------- Modals ---------- */
.modal-backdrop { position: fixed; inset: 0; background-color: rgba(0,0,0,0.6); z-index: 100; }
.modal {
position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 101;
background-color: var(--surface-color); border: 2px solid var(--divider-color); border-radius: 12px;
width: 90%; max-width: 480px; max-height: calc(88vh / var(--ui-zoom));
padding: 0; display: flex; flex-direction: column; overflow: hidden;
}
.modal.wide { max-width: 560px; }
.modal-header {
flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 12px 28px 10px; border-bottom: 2px solid var(--divider-color);
background-color: var(--surface-color); border-radius: 12px 12px 0 0;
}
.modal-header h1, .modal-header h2 { margin: 0; font-size: 22px; color: var(--text-color); }
.modal-body { overflow-y: auto; flex: 1 1 auto; min-height: 0; padding: 18px 28px 28px; display: flex; flex-direction: column; }
.modal-body > * { flex-shrink: 0; }
.modal-hint { color: var(--text-secondary); font-size: 14px; margin: 0 0 18px; }
.modal-close-btn {
display: inline-flex; align-items: center; justify-content: center;
background: transparent; border: 2px solid var(--border-color); color: var(--text-color);
border-radius: 50%; width: 36px; height: 36px; font-size: 1.25rem; line-height: 1; cursor: pointer; flex-shrink: 0;
}
.modal-close-btn:hover, .modal-close-btn:focus-visible { background-color: var(--border-color); color: var(--bg-color); }
.modal-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.modal-body .modal-actions { margin-top: auto; padding-top: 24px; }
.btn-primary {
border: 2px solid var(--accent-pink); border-radius: 8px; padding: 10px 20px; font-weight: 700; font-size: 14px; min-height: 44px;
cursor: pointer; background-color: color-mix(in srgb, var(--accent-pink) 15%, var(--surface-raised)); color: var(--text-color);
}
.btn-primary:hover, .btn-primary:focus-visible { background-color: color-mix(in srgb, var(--accent-pink) 25%, var(--surface-raised)); }
.btn-secondary {
border: 2px solid var(--border-color); border-radius: 8px; padding: 10px 20px; font-weight: 700; font-size: 14px; min-height: 44px;
cursor: pointer; background-color: var(--surface-raised); color: var(--text-color);
}
.btn-secondary:hover, .btn-secondary:focus-visible { border-color: var(--text-color); }
.settings-group { padding: 14px 0; border-bottom: 2px solid var(--divider-color); }
.settings-group:last-child { border-bottom: 0; }
.settings-group h3, .settings-group summary { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--focus-color); }
.settings-group summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.settings-group summary::-webkit-details-marker { display: none; }
.settings-group summary::before { content: "\25B8"; font-size: 0.9em; transition: transform 0.15s; }
.settings-group[open] summary::before { transform: rotate(90deg); }
.settings-group .field:first-of-type { margin-top: 12px; }
.settings-version { margin: 18px 0 0; color: var(--text-secondary); font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.settings-version .link-btn { background: none; border: 0; padding: 0; color: var(--focus-color); text-decoration: underline; cursor: pointer; font-size: 13px; font-weight: 700; }
.settings-version .link-btn:hover, .settings-version .link-btn:focus-visible { color: var(--text-color); }
/* Page Colours dialog */
.settings-row { margin-bottom: 18px; }
.settings-row:last-child { margin-bottom: 0; }
.settings-label { display: block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-color); margin-bottom: 8px; }
.segmented { display: flex; flex-wrap: wrap; border: 2px solid var(--border-color); border-radius: 999px; }
.segmented button { flex: 1 1 auto; background: transparent; border: 0; padding: 5px 12px; min-height: 36px; font-size: 0.9rem; font-weight: 700; cursor: pointer; border-right: 1px solid var(--border-color); color: var(--text-color); }
.segmented button:first-child { border-radius: 999px 0 0 999px; }
.segmented button:last-child { border-right: 0; border-radius: 0 999px 999px 0; }
.segmented button[aria-checked="true"] { background: var(--seg-accent, var(--accent-green)); color: #fff; }
#mode-group { --seg-accent: #1f4f8f; } /* deep blue */
#bg-group { --seg-accent: #5b2d8e; } /* deep purple */
#text-boost-group { --seg-accent: #0f6b62; display: grid; grid-template-columns: 1fr 1fr; border-radius: 12px; overflow: hidden; } /* deep teal; four choices, two per row */
#text-boost-group button { border-radius: 0; }
#text-boost-group button:nth-child(2n) { border-right: 0; }
#text-boost-group button:nth-child(n+3) { border-top: 1px solid var(--border-color); }
#pictures-group { --seg-accent: #8a4b12; } /* deep orange */
#darkareas-group { --seg-accent: #8b1a1a; } /* deep red */
#scans-group { --seg-accent: #2f6b2f; } /* deep green */
#blank-group { --seg-accent: #4a5a7a; max-width: 220px; } /* slate */
.viewer.hide-blank .page.blank { display: none; }
.reader.hide-blank .reader-page.blank { display: none; }
/* Options dialog. The dialog has a fixed height; only the controls scroll, so
the preview and the buttons are always in view. Phones: preview on top.
Desktop: preview on the right, starting level with the top of the body. */
.modal.modal-options { max-width: 480px; max-height: calc(92vh / var(--ui-zoom)); }
.modal.modal-options .modal-body { overflow: hidden; padding-top: 14px; }
.modal.modal-options .colours-layout { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.colours-preview-column { order: -1; flex-shrink: 0; width: 100%; max-width: 320px; margin: 0 auto 12px; }
.colours-controls { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; padding: 2px 8px 2px 2px; }
.colours-controls .modal-hint { margin: 0 0 14px; }
/* Wide enough for two columns: controls left, preview right (sticky), the dialog
only as tall as it needs, the controls scrolling once the window is short. */
@media (min-width: 640px) {
.modal.modal-options { max-width: 860px; width: 94%; }
.modal.modal-options .colours-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; grid-template-rows: minmax(0, 1fr); gap: 20px; align-items: start; }
.colours-controls { order: 1; max-height: 100%; }
.colours-preview-column { order: 2; max-width: none; margin: 0; position: sticky; top: 0; }
}
.colour-preview-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); margin: 0 0 6px; }
.colour-preview {
border-radius: 10px; overflow: hidden; border: 2px solid var(--border-color);
background: var(--preview-bg, #1a1a1a);
}
.colour-preview-inner { position: relative; height: 170px; }
@media (min-width: 640px) { .colour-preview-inner { height: 250px; } }
.colour-preview-page {
/* Drawn like a real page: black text on white, then the same filter the viewer uses. */
position: absolute; inset: 0;
background: #fff; color: #000; font-family: Georgia, "Times New Roman", serif; font-size: 0.85rem; line-height: 1.3;
padding: 12px 13% 12px 14px; /* the right padding keeps the text clear of the side tab */
}
.colour-preview-page p { margin: 0 0 6px; }
.colour-preview-page .pv-title { font-weight: 800; font-size: 1.05rem; color: #1d3a8a; }
.colour-preview-page .pv-faint { color: #9a9a9a; }
/* Things laid over the page: pictures and dark areas, each following its own setting. */
.pv-picture-el { position: absolute; top: 47%; height: 24%; border-radius: 3px; overflow: hidden; }
.pv-photo { left: 5%; width: 42%; background: linear-gradient(160deg, #e4572e, #f3a712 35%, #76b041 60%, #17bebb 80%, #3d5a80); }
.pv-picture { left: 53%; width: 42%; }
.pv-picture svg { display: block; width: 100%; height: 100%; }
.pv-dark { position: absolute; color: #fff; font: 700 0.78rem system-ui, sans-serif; letter-spacing: 0.04em; display: flex; align-items: center; justify-content: center; }
.pv-note { left: 5%; top: 78%; width: 22%; height: 12%; background: #8b1a1a; border-radius: 4px; }
.pv-tip { left: 31%; top: 78%; width: 18%; height: 12%; background: #111; border-radius: 4px; }
.pv-icon { left: 53%; top: 76.5%; width: 15%; aspect-ratio: 1; background: #1b4f9c; border-radius: 50%; padding: 12%; box-sizing: border-box; }
.pv-side { right: 0; top: 0; width: 7%; height: 100%; background: #1b2a49; writing-mode: vertical-rl; font-size: 0.62rem; }
.colour-preview.mode-dark .colour-preview-page, .colour-preview.mode-dark .pv-picture-el, .colour-preview.mode-dark .pv-dark { filter: invert(var(--page-invert, 0.898)) hue-rotate(180deg); }
.colour-preview.mode-invert .colour-preview-page, .colour-preview.mode-invert .pv-picture-el, .colour-preview.mode-invert .pv-dark { filter: invert(1); }
.colour-preview.mode-original .colour-preview-page, .colour-preview.mode-original .pv-picture-el, .colour-preview.mode-original .pv-dark { filter: none; }
.colour-preview.mode-dark.text-1 .colour-preview-page { filter: invert(var(--page-invert, 0.898)) hue-rotate(180deg) url(#aar-lift-1); }
.colour-preview.mode-dark.text-2 .colour-preview-page { filter: invert(var(--page-invert, 0.898)) hue-rotate(180deg) url(#aar-lift-2); }
.colour-preview.mode-dark.text-3 .colour-preview-page { filter: invert(var(--page-invert, 0.898)) hue-rotate(180deg) url(#aar-lift-3); }
.colour-preview.mode-dark.pictures-original .pv-picture-el { filter: none; }
.colour-preview.mode-dark.pictures-dim .pv-picture-el { filter: brightness(0.78); }
.colour-preview.mode-dark.pictures-darken .pv-picture-el { filter: brightness(0.62); }
.colour-preview.mode-dark.darkareas-original .pv-dark { filter: none; }
.colour-preview.mode-dark.darkareas-dim .pv-dark { filter: url(#aar-dimdark); }
.colour-preview.mode-dark.darkareas-darken .pv-dark { filter: url(#aar-dimdark-2); }
.segmented.is-disabled { opacity: 0.4; }
/* Shortcuts + Change Log content */
.shortcuts-list { list-style: none; margin: 0; padding: 0; }
.shortcuts-list li { padding: 0.7em 0; border-bottom: 2px solid var(--divider-color); font-size: 1rem; display: flex; gap: 12px; align-items: baseline; }
.shortcuts-list li:last-child { border-bottom: none; padding-bottom: 0; }
.shortcuts-list .keys { flex-shrink: 0; min-width: 5.5em; }
.shortcuts-group { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--focus-color); margin: 22px 0 2px; }
.shortcuts-group:first-child { margin-top: 0; }
kbd {
background-color: var(--bg-color); border: 2px solid var(--focus-color); color: var(--text-color);
padding: 0.1em 0.45em; border-radius: 4px; font-family: monospace; font-size: 0.9em;
}
.changelog-entry { border-bottom: 2px solid var(--divider-color); padding: 10px 0 14px; }
.changelog-entry:last-child { border-bottom: 0; }
.changelog-entry summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.changelog-entry summary::-webkit-details-marker { display: none; }
.changelog-entry summary::before { content: "\25B8"; color: var(--focus-color); transition: transform 0.15s; }
.changelog-entry[open] summary::before { transform: rotate(90deg); }
.changelog-entry h2 { font-size: 1.1rem; }
.changelog-entry h3 { font-size: 0.95rem; color: var(--focus-color); margin: 12px 0 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.changelog-entry ul { margin: 0; padding-left: 1.3em; }
.changelog-entry li { margin: 4px 0; }
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; }
}
/* ---------- Notices (the welcome page) ---------- */
.notice { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-radius: 8px; padding: 10px 10px 10px 14px; margin: 0 0 16px; font-weight: 700; }
.notice-green { border: 1px solid var(--accent-green); background-color: rgb(from var(--accent-green) r g b / 0.14); color: var(--text-color); }
.notice-close { background: transparent; border: 2px solid transparent; color: inherit; border-radius: 50%; width: 32px; height: 32px; font-size: 1.25rem; line-height: 1; cursor: pointer; flex-shrink: 0; }
.notice-close:hover, .notice-close:focus-visible { border-color: currentColor; }
/* ---------- Phones: a taller Open button, no drop hint, tall dialogs ---------- */
@media (max-width: 600px) {
.welcome-open-drop { display: none; }
.welcome .welcome-open { min-height: 96px; }
.modal, .modal.modal-options { max-height: calc(92vh / var(--ui-zoom)); max-height: calc(92dvh / var(--ui-zoom)); width: 94%; }
#app-settings-dialog { height: calc(92vh / var(--ui-zoom)); height: calc(92dvh / var(--ui-zoom)); }
/* Two buttons share one line (Reset + Done, Cancel + Save); the long labels give way to short ones. */
.modal-actions { flex-wrap: nowrap; }
.modal-actions > button { flex: 1 1 0; min-width: 0; padding-left: 8px; padding-right: 8px; }
.label-long { display: none; }
.label-short { display: inline; }
}
/* ---------- Reader view ---------- */
.reader { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 24px 16px 40px; background-color: var(--reader-bg, #1a1a1a); color: var(--reader-text, #f2f2f2); touch-action: pan-x pan-y; }
.reader:focus, .reader:focus-visible { outline: none; }
.reader-col { max-width: var(--reader-pct-phone, 100%); margin: 0 auto; font-family: var(--reader-font, system-ui, sans-serif); font-size: var(--reader-size, 150%); line-height: var(--reader-leading, 1.75); }
.reader-body { font-weight: var(--reader-weight, 400); position: relative; }
.reader-body p { margin: 0 0 1em; }
.reader-body .web-source { margin: 0 0 0.4em; }
.reader-body .web-meta { margin: 0 0 1.4em; }
.reader-body h1.reader-title { color: var(--reader-heading, #fdfd96); font-size: 1.7em; line-height: 1.2; margin: 0 0 0.35em; text-wrap: balance; }
.reader-body figure { margin: 0.6em 0 1em; }
.reader-body figcaption, .reader-body table caption { font-size: 0.85em; color: color-mix(in srgb, var(--reader-heading, #fdfd96) 80%, transparent); margin: 0.3em 0 0; }
.reader.images-off .reader-body :is(img, figure:not(:has(.video-card)), picture, .alt-caption) { display: none; }
.reader.images-off .reader-body .video-card .video-thumb { display: none; }
.filename-web { margin: 0 0 6px; }
.filename-url { margin: 4px 0 12px; overflow-wrap: anywhere; }
.filename-url a { color: var(--focus-color); font-weight: 700; }
.filename-web-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.filename-web-actions .filename-open { display: inline-flex; align-items: center; text-decoration: none; }
.reader-body h2, .reader-body h3, .reader-body h4 { color: var(--reader-heading, #fdfd96); line-height: 1.25; margin: 1.1em 0 0.5em; text-wrap: balance; }
.reader-body h4 { font-size: 1.1em; }
.reader-body p.caption { font-size: 0.85em; color: var(--reader-muted, #b8b8b8); }
.reader-ai-tag { margin-left: auto; font-size: 0.85em; letter-spacing: 0.06em; color: var(--reader-muted, #b8b8b8); }
.reader-body h2 { font-size: 1.5em; }
.reader-body h3 { font-size: 1.2em; }
.reader-page:first-child .reader-body h2:first-child, .reader-page:first-child .reader-body h3:first-child { margin-top: 0; }
.reader-pagemark { display: flex; align-items: center; gap: 12px; margin: 2.4em 0 1.5em; color: var(--reader-muted, #b8b8b8); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 0.62em; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.reader-pagemark::before, .reader-pagemark::after { content: ""; flex: 1 1 auto; height: 1px; background-color: var(--reader-line, rgba(255,255,255,0.3)); }
.reader-pagemark::after { order: 2; }
.reader-page:first-child .reader-pagemark { margin: 0 0 0.9em; } /* page one keeps the old, tighter gaps */
.reader.marks-off .reader-pagemark { display: none; }
/* Reading: undo/redo and the markup tools leave the toolbar (zoom and rotate stay, greyed). */
body.view-reader .toolbar .history-tools, body.view-reader .toolbar .annot-tools, body.view-reader .toolbar .annot-tools + .toolbar-sep { display: none; }
/* Reading: the zoom buttons give way to the text-size buttons. */
body.view-reader .toolbar #zoom-cluster { display: none; }
.toolbar .reader-size-cluster { gap: 4px; }
.toolbar .reader-size-cluster .size-btn { width: auto; min-width: 40px; padding: 0 8px; font-size: 1rem; font-weight: 800; }
.toolbar .reader-size-cluster output { min-width: 3.6em; text-align: center; font-weight: 700; font-size: 14px; }
/* Links: an invisible layer over a page's link areas, and real links in the reader column. */
.link-layer { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.pdf-link { position: absolute; display: block; pointer-events: auto; border-radius: 3px; cursor: pointer; }
.pdf-link:hover, .pdf-link:focus-visible { outline: 3px solid var(--focus-color); outline-offset: 1px; background-color: rgba(253, 253, 150, 0.14); }
.reader-link { color: var(--reader-link, #8ab4f8); text-decoration: underline; text-underline-offset: 0.15em; }
.reader-link:hover, .reader-link:focus-visible { color: var(--reader-heading, #fdfd96); }
/* Read aloud: a boxed group at the head of the toolbar (its bar goes with it in Page view);
the play button is the big one, white on dark green, and the gear at the end opens
the voice and speed menu. */
.toolbar .read-cluster { gap: 2px; padding: 3px 5px; }
#read-cluster[hidden] + .toolbar-sep { display: none; }
.toolbar .read-cluster button.read-btn, .toolbar .read-cluster button.read-btn[aria-pressed="true"] { width: 54px; min-height: 46px; margin: 0 2px; border-radius: 8px; background-color: var(--read-green); color: #ffffff; border-color: var(--read-green); }
.toolbar .read-cluster button.read-btn:hover, .toolbar .read-cluster button.read-btn:focus-visible { background-color: var(--read-green-hover); color: #ffffff; border-color: var(--read-green-hover); }
.toolbar .read-cluster button.read-btn svg { width: 30px; height: 30px; }
.toolbar .read-cluster .read-btn .ico-pause { display: none; }
.toolbar .read-cluster .read-btn.is-on .ico-play { display: none; }
.toolbar .read-cluster .read-btn.is-on .ico-pause { display: block; }
.toolbar .read-cluster button.speed-btn { width: 32px; min-height: 36px; font-size: 1.2rem; }
.toolbar .read-cluster #read-slower { margin-left: 10px; } /* air between the paragraph buttons, the speed and the gear */
.toolbar .read-cluster #read-settings-btn { margin-left: 12px; }
.toolbar .read-cluster output { min-width: 3em; text-align: center; font-weight: 700; font-size: 14px; }
.toolbar .read-cluster button#read-settings-btn[aria-expanded="true"] { background-color: color-mix(in srgb, var(--text-color) 12%, transparent); color: var(--accent-green); }
.read-popover { width: min(340px, 92vw); }
.read-popover .tp-row { margin-bottom: 14px; }
.toolbar .read-popover select { width: 100%; min-height: 42px; font-size: 15px; background-color: var(--bg-color); border-color: var(--accent-green); }
.read-popover .tp-range-row output { min-width: 3.4em; }
.read-popover .field-hint { margin: 0 0 12px; }
/* A line inside a paragraph (a line break in the file) is read on its own. */
.reader-body .reader-line { display: block; }
.reader-body .reader-line:empty::before { content: "\00a0"; }
.reader-body .reading { outline: 3px solid var(--reader-focus, #fdfd96); outline-offset: 6px; border-radius: 4px; background-color: var(--reader-focus-bg, rgba(253, 253, 150, 0.08)); }
/* Word, LibreOffice, rich text and plain text in the column */
.reader-body ul, .reader-body ol { margin: 0 0 1em; padding-left: 1.5em; }
.reader-body li { margin: 0.25em 0; }
.reader-body img { max-width: 100%; height: auto; display: block; margin: 0.6em 0 1em; border-radius: 6px; }
.reader-doc[data-kind="web"] .reader-body img { background-color: #808080; } /* a see-through picture on a grey ground */
/* a YouTube video: one link holding the thumbnail and "Watch on YouTube: title" */
.reader-body .video-card { margin: 0.8em 0 1.2em; }
.reader-body .video-card .video-link { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.45em; max-width: 100%; padding: 8px; border: 2px solid var(--reader-muted, #b8b8b8); border-radius: 10px; color: var(--reader-link, #8ab4f8); text-decoration: none; }
.reader-body .video-card .video-link:hover, .reader-body .video-card .video-link:focus-visible { border-color: var(--reader-heading, #fdfd96); color: var(--reader-heading, #fdfd96); outline: none; }
.reader-body .video-card .video-link:focus-visible { box-shadow: 0 0 0 3px var(--reader-focus, #fdfd96); }
.reader-body .video-card .video-thumb { position: relative; display: block; width: 320px; max-width: 100%; }
.reader-body .video-card img { width: 100%; height: auto; margin: 0; border-radius: 6px; background-color: #808080; }
.reader-body .video-card .video-play { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; pointer-events: none; }
.reader-body .video-card .video-label { text-decoration: underline; text-underline-offset: 0.15em; font-weight: 600; }
.reader.images-off .reader-body .video-card .video-link { padding: 0; border: 0; }
.reader-body .alt-caption { font-size: 0.85em; color: color-mix(in srgb, var(--reader-heading, #fdfd96) 80%, transparent); margin: -0.6em 0 1em; }
.reader-body img.reading-pic { outline: 4px solid var(--reader-focus, #fdfd96); outline-offset: 4px; } /* the picture whose alt text is being read */
.reader:not(.alt-show) .reader-body .alt-caption { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.reader-body table { border-collapse: collapse; margin: 0 0 1em; max-width: 100%; }
.reader-body td, .reader-body th { border: 1px solid var(--reader-table-line, rgba(255,255,255,0.5)); padding: 0.3em 0.6em; vertical-align: top; }
.reader-body th { color: var(--reader-heading, #fdfd96); }
.reader-body blockquote { margin: 0 0 1em; padding-left: 1em; border-left: 4px solid var(--reader-quote-line, rgba(253,253,150,0.5)); }
.reader-body pre { white-space: pre-wrap; font-family: ui-monospace, Consolas, monospace; font-size: 0.85em; }
.reader-body hr { border: 0; border-top: 1px solid var(--reader-line, rgba(255,255,255,0.3)); margin: 1.2em 0; }
.reader-doc .reader-pagemark { display: none; }
/* Page view: every page carries its number at the top left. */
.page-tag-row { display: flex; margin: 0 auto 4px; }
.page-tag { display: inline-block; padding: 2px 9px; border-radius: 6px; background: rgba(0, 0, 0, 0.72); color: #ffffff; font: 700 12px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0.02em; pointer-events: none; }
.page-tag-row:has(+ .page.blank) { display: none; }
/* Page options and Reader options may use up to 94% of the window's height. */
#colours-dialog, #reader-dialog { max-height: calc(94vh / var(--ui-zoom)); max-height: calc(94dvh / var(--ui-zoom)); }
@media (max-width: 600px) { #colours-dialog, #reader-dialog { max-height: calc(92vh / var(--ui-zoom)); max-height: calc(92dvh / var(--ui-zoom)); } }
/* On a computer each Page width also has a share of the reading area as its ceiling (Narrow 50%, Medium 70%, Wide 90%). */
@media (min-width: 860px) { .reader-col { max-width: min(var(--reader-ch, 65ch), var(--reader-pct, 70%)); } }
.reader-placeholder { color: var(--reader-muted, #b8b8b8); font-style: italic; }
.reader > .site-footer { margin: 40px -16px -40px; }
/* Reader options: group headings, the Other colours block, the custom colour buttons */
.rd-group-heading { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--focus-color) 80%, transparent); margin: 34px 0 12px; padding-top: 20px; border-top: 2px solid var(--focus-color); }
.rd-group-heading:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.rd-other { margin-top: 10px; display: grid; gap: 10px; }
.rd-sub-label { display: block; font-size: 13px; font-weight: 700; color: var(--text-secondary); margin: 0 0 6px; }
.rd-preset-row .settings-select { margin-bottom: 8px; }
.rd-small-btn { min-height: 36px; padding: 0 12px; font-size: 14px; }
.rd-custom { display: grid; gap: 6px; }
.rd-colour-btn { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; width: 100%; max-width: 340px; min-height: 44px; padding: 4px 10px 4px 6px; text-align: left; background-color: var(--surface-raised); color: var(--text-color); border: 2px solid var(--border-color); border-radius: 8px; font-weight: 700; font-size: 14px; font-family: inherit; cursor: pointer; }
.rd-colour-btn:hover, .rd-colour-btn:focus-visible, .rd-colour-btn[aria-expanded="true"] { border-color: var(--text-color); }
.rd-colour-btn .rd-swatch { display: block; width: 30px; height: 30px; border-radius: 6px; border: 2px solid var(--border-color); background-color: var(--swatch, #000); }
.rd-colour-btn .rd-hex { font: 700 13px ui-monospace, Consolas, monospace; color: var(--text-secondary); letter-spacing: 0.04em; }
.rd-custom #rd-contrast-hint { color: var(--error-color); margin: 2px 0 0; }
.rd-save-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.rd-name-input { flex: 1 1 120px; min-width: 0; min-height: 36px; padding: 0 10px; font: inherit; font-size: 14px; font-weight: 700; color: var(--text-color); background-color: var(--bg-color); border: 2px solid var(--border-color); border-radius: 8px; }
.rd-name-input:focus-visible { border-color: var(--text-color); }
.rd-colour-popover { position: fixed; top: auto; left: auto; z-index: 140; }
.rd-rate-row { max-width: 340px; }
.rd-rate-row output { min-width: 3.4em; }
.rd-size-select { width: auto; min-width: 7.5em; }
.toolbar .tb-size-select { min-height: 36px; padding: 0 30px 0 10px; font-size: 14px; font-weight: 700; border-color: transparent; background-color: transparent; }
.toolbar .tb-size-select:hover, .toolbar .tb-size-select:focus-visible { border-color: var(--text-color); }
.segmented.four { display: grid; grid-template-columns: 1fr 1fr; border-radius: 12px; overflow: hidden; }
.segmented.four button { border-radius: 0; }
.segmented.four button:nth-child(2n) { border-right: 0; }
.segmented.four button:nth-child(n+3) { border-top: 1px solid var(--border-color); }
.stepper .rd-size-select { min-height: 40px; padding: 6px 36px 6px 12px; }
/* Dropdown lists: the chosen row is white on green, like the play button (browsers with the customizable select; others keep their own list). */
@supports (appearance: base-select) {
.toolbar select, .settings-select, #af-size-select, .read-popover select { appearance: base-select !important; } /* the plain rules say none; this must win */
.toolbar select::picker(select), .settings-select::picker(select), #af-size-select::picker(select), .read-popover select::picker(select) { appearance: base-select; background-color: var(--surface-color); color: var(--text-color); border: 2px solid var(--border-color); border-radius: 8px; padding: 4px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45); margin: 2px 0 0; }
select::picker-icon { display: none; }
select option { padding: 8px 12px; border-radius: 6px; font-weight: 700; font-family: inherit; }
select option::checkmark { margin-right: 6px; }
select option:checked { font-weight: 800; }
select option:hover, select option:focus-visible, select option:focus { background-color: var(--read-green); color: #ffffff; outline: none; }
select optgroup { font-weight: 800; }
select optgroup::label, select optgroup > legend { padding: 8px 12px 4px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }
select optgroup + optgroup { margin-top: 6px; padding-top: 4px; border-top: 1px solid var(--divider-color); }
}
/* Reader options: the stepper */
.stepper { display: inline-flex; align-items: center; gap: 8px; }
.stepper button { min-width: 44px; min-height: 40px; border: 2px solid var(--border-color); border-radius: 8px; background: var(--surface-raised); color: var(--text-color); font-weight: 800; font-size: 15px; cursor: pointer; }
.stepper button:hover, .stepper button:focus-visible { border-color: var(--text-color); }
.stepper button:disabled { opacity: 0.45; cursor: not-allowed; }
.stepper output { min-width: 5ch; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.view-sidebar .reader-controls { overflow: visible; padding: 0; }
.check-row { display: flex; align-items: center; gap: 10px; font-weight: 700; margin: 0 0 6px; cursor: pointer; }
.check-row input { width: 20px; height: 20px; accent-color: var(--accent-green); }
#save-range-wrap { margin-top: 10px; }
#save-pages-group { --seg-accent: #1f4f8f; max-width: 260px; }
/* ---------- Find ---------- */
.toolbar-sep.inner { height: 26px; margin: 0 2px; }
.toolbar button.find-btn { width: auto; padding: 0 4px 0 6px; gap: 1px; }
.toolbar button.find-btn[aria-expanded="true"] { background-color: color-mix(in srgb, var(--text-color) 12%, transparent); }
.find-popover { width: min(320px, 92vw); }
.find-popover #find-input { width: 100%; box-sizing: border-box; min-height: 42px; padding: 6px 10px; font: inherit; font-size: 16px; font-weight: 700; color: var(--text-color); background-color: var(--bg-color); border: 2px solid var(--accent-green); border-radius: 8px; }
.find-popover #find-input::-webkit-search-cancel-button { filter: invert(1); }
.find-row { display: flex; align-items: center; gap: 6px; margin: 2px 0 8px; }
.find-count { font-weight: 700; margin-right: auto; font-variant-numeric: tabular-nums; min-height: 1.4em; }
.find-row .btn-secondary { min-height: 36px; padding: 0 12px; margin-left: 4px; }
.find-case { margin: 0; font-size: 14px; }
mark.find-hit { background-color: rgba(74, 222, 128, 0.5); color: inherit; border-radius: 2px; }
mark.find-hit.current { background-color: rgba(253, 253, 150, 0.8); outline: 2px solid #fdfd96; }
.textLayer mark.find-hit { color: transparent; }
.reader mark.find-hit.current { color: #121212; }
/* ---------- Opening PDFs from the browser (help dialog) ---------- */
.welcome-help-actions { margin: 6px 0 12px; }
.browser-help h3 { font-size: 15px; margin: 16px 0 6px; color: var(--focus-color); }
.browser-help ol { margin: 0; padding-left: 22px; }
.browser-help li { margin: 4px 0; }
.browser-help .help-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0; }
.browser-help .steps-nav { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.browser-help .steps-nav button { min-width: 44px; min-height: 44px; padding: 0 12px; border: 2px solid var(--accent-pink); border-radius: 22px; background: transparent; color: var(--text-color); font-weight: 800; font-size: 15px; cursor: pointer; }
.browser-help .steps-nav button:hover, .browser-help .steps-nav button:focus-visible { background-color: color-mix(in srgb, var(--accent-pink) 15%, transparent); }
.browser-help .steps-nav button[aria-current="step"] { background-color: var(--toggle-on); border-color: var(--toggle-on); color: #ffffff; }
.browser-help .steps-nav button.done::after { content: " \2713"; color: var(--accent-green); }
.browser-help .help-step { display: grid; gap: 10px; }
.browser-help .help-step[hidden] { display: none; }
.browser-help .help-step h3 { margin: 0; display: grid; gap: 2px; font-size: 17px; color: var(--text-color); }
.browser-help .help-step .step-count { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--focus-color); }
.browser-help .help-step p { margin: 0; line-height: 1.5; }
.browser-help .help-nav { justify-content: space-between; }
.install-only .help-act { margin: 4px 0 10px; }
.install-only .header-link { font-size: 17px; min-height: 52px; padding: 10px 22px; }
.browser-help .help-act .field-hint { margin: 0; }
.browser-help a { color: var(--focus-color); text-decoration: underline; font-weight: 700; }
.browser-help a:hover, .browser-help a:focus-visible { color: var(--text-color); }
.browser-help a.header-link { color: var(--text-color); text-decoration: none; }
.browser-help code { font: 700 14px ui-monospace, Consolas, monospace; background-color: var(--bg-color); border: 1px solid var(--border-color); border-radius: 6px; padding: 2px 6px; user-select: all; }
/* ---------- Save as a PDF (documents): only the reader column prints, in its own colours ---------- */
@media print {
@page { size: auto; margin: 0; }
html { zoom: 1 !important; height: auto !important; overflow: visible !important; background: var(--reader-bg, #ffffff) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body { display: block !important; height: auto !important; overflow: visible !important; background: var(--reader-bg, #ffffff) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body > .site-header, body > .toolbar, .site-footer, .view-sidebar, .app-tip, .modal, .modal-backdrop, .tool-popover, #viewer, .viewer-end, .busy-bar, .drop-overlay, #annot-float, .reader-pagemark { display: none !important; }
.viewer-shell, .doc-main { display: block !important; height: auto !important; min-height: 0 !important; overflow: visible !important; position: static !important; }
.reader { display: block !important; position: static !important; height: auto !important; overflow: visible !important; padding: 18mm 16mm !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.reader-col { max-width: none !important; width: auto !important; margin: 0 !important; }
.reader-body .reading { outline: none !important; background: none !important; }
.reader-body img.reading-pic { outline: none !important; }
.reader-body h2, .reader-body h3, .reader-body h4 { break-after: avoid; }
.reader-body p, .reader-body li { orphans: 3; widows: 3; }
.reader-body img { break-inside: avoid; }
}
/* ---------- AI help ---------- */
.ai-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.ai-key-state { margin: 0; }
.ai-key-input { width: 100%; box-sizing: border-box; font-family: ui-monospace, Consolas, monospace; letter-spacing: 0.02em; }
.modal .rd-name-input { flex: 0 0 auto; min-height: 44px; } /* the dialog body is a flex column: no stretching */
.ai-key-check { min-height: 1.4em; margin: 6px 0 0; }
.ai-key-check.is-bad { color: var(--error-color); }
.ai-key-check.is-good { color: var(--accent-green); }
.ai-key-help { margin: 16px 0 0; padding: 10px 14px; border: 1px solid var(--divider-color); border-radius: 8px; }
.ai-key-help summary { cursor: pointer; font-weight: 700; font-size: 15px; }
.ai-key-help[open] summary { margin-bottom: 8px; }
.ai-key-help ol { margin: 0 0 8px; padding-left: 1.3em; }
.ai-key-help li { margin: 0 0 6px; }
.ai-key-help a { color: var(--focus-color); font-weight: 700; }
.ai-key-help code { font-family: ui-monospace, Consolas, monospace; }
.ai-advanced { margin: 14px 0 0; }
.ai-advanced summary { cursor: pointer; font-weight: 700; color: var(--text-secondary); }
.ai-advanced .settings-label { margin-top: 10px; }
.ai-advanced .rd-name-input { width: 100%; box-sizing: border-box; }
.ai-nag-row { margin: 16px 0 0; }
.ai-ask-buttons { display: grid; gap: 10px; margin: 8px 0 14px; }
.ai-ask-buttons button { width: 100%; min-height: 46px; }
.save-kind-group button { flex: 1 1 auto; }