/* Reader-specific chrome. Everything else -- :root vars, body,
   header/.settings-panel, .btn, article, e-ink, paginated -- comes
   from @mds/reading's reading.css. These rules are the reading-list
   page and article meta that the shared sheet doesn't cover. */
.meta { color: var(--muted); font-size: 0.85em; }
.article-subtitle { font-size: 1.2em; color: var(--muted); margin: 0 0 0.5rem; line-height: 1.3; }

/* Page headings (Search, Settings). Inside an article the shared
   scale in reading.css wins on specificity (article h1, 1.6em); the
   margin here still applies there. */
h1 { font-size: 1.6rem; letter-spacing: -0.01em; margin: 0 0 1.5rem; }
form.add { display: flex; gap: 0.5rem; margin: 0 0 1.5rem; }
form.add input { flex: 1; min-width: 0; padding: 0.5rem 0.6rem; font: inherit;
                 border: 1px solid var(--border); border-radius: var(--radius);
                 background: transparent; color: inherit; }
ul.reading-list { list-style: none; padding: 0; margin: 0; }
.entry { display: flex; gap: 0.75rem; align-items: flex-start;
         padding: 0.85rem 0; border-bottom: 1px solid var(--border); }
.entry:last-child { border-bottom: none; }
.entry.empty { color: var(--muted); }
.entry-main { flex: 1; min-width: 0; }
/* Truncate to one line. Queue rows surface the raw URL when there is
   no title yet; long URLs would otherwise ram the action icons or
   wrap across half a screen. `display: block` + `max-width: 100%` lets
   `text-overflow: ellipsis` actually fire inside the flex column. */
.entry-title { display: block; color: inherit; text-decoration: none;
               font-size: 1.05rem; font-weight: 600; line-height: 1.3;
               max-width: 100%;
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.entry-title:hover { text-decoration: underline; }
/* Read entries recede so unread ones stand out. */
.entry.read .entry-title { font-weight: 400; color: var(--muted); }
.entry-dek { color: var(--muted); font-size: 0.92em; line-height: 1.4; margin-top: 0.15rem;
             display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
             overflow: hidden; }
.entry .meta { margin-top: 0.3rem; font-size: 0.8em; }

/* Per-view empty state: centered block; the add-capable views embed
   the same form the "+" popover carries (no-JS-safe). */
.list-empty { text-align: center; padding: 2.5rem 1rem; color: var(--muted); }
.list-empty-head { font-size: 1.05rem; font-weight: 600; color: var(--fg);
                   margin-bottom: 0.4rem; }
.list-empty p { margin: 0; }
.list-empty form.add { max-width: 26rem; margin: 1.25rem auto 0; }

/* Listen + playback buttons in the header nav. The shared reading.css
   handles the .tts-controls show/hide; these are the icon-button base,
   matching the tone of the cog's nav-icon links. */
header nav button.nav-button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px; border: none; border-radius: 4px; line-height: 0;
  background: transparent; color: var(--muted); cursor: pointer;
}
header nav button.nav-button:hover { background: var(--surface); color: var(--accent); }
header nav .nav-icon { width: 20px; height: 20px; }

/* Reading-list view tabs: an underlined segmented control. The trailing
   .add-url popover rides at the right end of the row. */
.views { display: flex; gap: 1.25rem; align-items: center; margin: 0 0 1.25rem;
         border-bottom: 1px solid var(--border); }
.views a { color: var(--muted); text-decoration: none; padding: 0 0 0.5rem;
           border-bottom: 2px solid transparent; margin-bottom: -1px; }
.views a:hover { color: var(--accent); }
.views a.active { color: var(--accent); font-weight: 600; border-bottom-color: var(--accent); }
/* Unread count chip. tabular-nums keeps the pill width stable as the
   count ticks down through fragment swaps. */
.views .count { font-size: 0.8em; color: var(--muted); font-weight: 400;
                background: var(--surface); border-radius: 999px;
                padding: 0.05rem 0.45rem; margin-left: 0.35rem;
                font-variant-numeric: tabular-nums; }
.views a.active .count { color: var(--accent); }

/* "Add URL" popover. Mirrors details.settings from reading.css -- a "+"
   summary anchored at the end of .views, with an absolutely-positioned panel
   carrying the URL form. */
details.add-url { position: relative; margin-left: auto; flex-shrink: 0;
                  margin-bottom: -1px; }
/* Padding matches .views a (none top, 0.5rem bottom for the underline) so
   the icon's vertical center aligns with the tab text, not the row's
   geometric center (which sat ~4px below it). */
details.add-url > summary { list-style: none; cursor: pointer;
                            padding: 0 4px 0.5rem; color: var(--muted);
                            border-radius: 4px; line-height: 0;
                            user-select: none; }
details.add-url > summary::-webkit-details-marker { display: none; }
details.add-url > summary::marker { content: ""; }
details.add-url > summary:hover,
details.add-url[open] > summary { background: var(--surface); color: var(--accent); }
details.add-url > summary .ico { display: block; width: 20px; height: 20px; }
.add-url-panel { position: absolute; right: 0; top: calc(100% + 4px);
                 background: var(--bg-raised); border: 1px solid var(--border);
                 border-radius: 8px; padding: 0.6rem 0.75rem; z-index: 10;
                 min-width: 320px;
                 box-shadow: 0 4px 16px rgba(0,0,0,0.18); }
.add-url-panel form.add { margin: 0; }

/* Segmented control inside the add-url panel. Radio-driven so the
   toggle works without JS; the radios themselves are visually hidden
   and only their `:checked` state drives sibling rules. */
.add-mode-radio { position: absolute; opacity: 0; pointer-events: none; }
.add-tabs { display: flex; gap: 0.5rem; margin: 0 0 0.6rem; font-size: 0.85em; }
.add-tabs .add-tab { color: var(--muted); cursor: pointer;
                     padding: 0.15rem 0.4rem; border-radius: 4px; }
#add-mode-url:checked ~ .add-tabs label[for="add-mode-url"],
#add-mode-pdf:checked ~ .add-tabs label[for="add-mode-pdf"] {
  background: var(--surface); color: var(--accent); font-weight: 500;
}
/* form.add (line 12) is specificity (0,1,1); plain `.add-form { display:none }`
   (0,1,0) loses to it. Match form.add-form's structure so the base "hide both"
   rule actually applies, then the #...:checked ~ rules win on (1,2,0). */
form.add-form { display: none; }
#add-mode-url:checked ~ .add-form-url { display: flex; gap: 0.5rem; }
#add-mode-pdf:checked ~ .add-form-pdf { display: flex; gap: 0.5rem; }
/* File input: native chrome is unstyled, "No file selected." text is noisy on
   the dark theme. Style ::file-selector-button so the trigger looks like the
   surrounding controls; let the filename surface only once a file is chosen. */
.add-form-pdf input[type=file] {
  flex: 1; min-width: 0; font: inherit; color: var(--muted);
}
.add-form-pdf input[type=file]::file-selector-button {
  margin-right: 0.5rem; padding: 0.4rem 0.6rem;
  border: 1px solid var(--border); border-radius: 6px;
  background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.add-form-pdf input[type=file]::file-selector-button:hover {
  background: var(--surface); color: var(--accent);
}

/* Queue-view bulk clear button. Sits just above the list rows. */
.bulk-clear { margin: 0 0 0.75rem; text-align: right; }

/* Reset-to-default row inside the article-page settings popover.
   Sits below the pickers and above the diagnostics. */
.reset-prefs { margin: 0.75rem 0 0.5rem; text-align: right;
               border-top: 1px solid var(--border); padding-top: 0.75rem; }

/* Per-row / article action cluster: quiet icon buttons, no chrome. */
.row-actions { flex-shrink: 0; display: inline-flex; gap: 0.15rem; align-items: center; }
.row-action { display: inline; margin: 0; }
.row-action button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px; border: none; border-radius: var(--radius); line-height: 0;
  background: transparent; color: var(--muted); cursor: pointer;
}
.row-action button:hover { background: var(--surface); color: var(--accent); }
.row-action button.active { color: var(--accent); }   /* starred */
.row-action .ico { width: 20px; height: 20px; }
.article-actions { margin: 0.5rem 0 1.25rem; gap: 0.25rem; }
.header-search input { padding: 0.25rem 0.5rem; font: inherit; border: 1px solid var(--border);
  border-radius: var(--radius); background: transparent; color: inherit; max-width: 9rem; }
.snippet { color: var(--muted); font-size: 0.9em; margin-top: 0.15rem; }
.snippet mark { background: var(--accent); color: var(--accent-fg, #fff); border-radius: 2px; padding: 0 2px; }

/* /docs/* static reference site. Same chrome as the reader; the article
   body gets the standard prose treatment. The breadcrumb and prev/next
   footer are docs-only. */
.docs-breadcrumb { color: var(--muted); font-size: 0.9em; margin: 0 0 1rem; }
.docs-breadcrumb a { color: inherit; text-decoration: none; }
.docs-breadcrumb a:hover { color: var(--accent); }
.docs-page h1 { margin-top: 0.5rem; }
.docs-page h2 { margin-top: 2rem; font-size: 1.25rem; }
.docs-page h3 { margin-top: 1.5rem; font-size: 1.05rem; }
.docs-page pre { max-width: 100%; overflow-x: auto; }
.docs-list { list-style: none; padding: 0; margin: 1.5rem 0; }
.docs-list li { padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
.docs-list li:last-child { border-bottom: none; }
.docs-list li a { color: inherit; text-decoration: none; }
.docs-list li a:hover { color: var(--accent); }
.docs-footer { display: flex; justify-content: space-between; gap: 1rem;
  margin: 2.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--border);
  font-size: 0.95em; }
.docs-footer a { color: var(--muted); text-decoration: none; }
.docs-footer a:hover { color: var(--accent); }
.docs-footer span:last-child { text-align: right; }

/* Table of contents -- mirrored from the mds docs site (its
   layout.css). The list itself, depth indentation, the header
   popover, and the fixed sidebar gated by
   html.toc-mode-sidebar.toc-sidebar-fits. reading.css already hides
   the sidebar in paginated mode. */
nav.toc { font-size: 0.85rem; line-height: 1.5; }
nav.toc ul { list-style: none; padding: 0; margin: 0; }
nav.toc li { padding: 0.15rem 0; }
nav.toc a { color: inherit; text-decoration: none; display: block; padding: 0.05rem 0.25rem;
            border-radius: 4px; }
nav.toc a:hover { background: var(--surface); color: var(--accent); }
nav.toc a.toc-active { color: var(--accent); background: var(--surface); font-weight: 500; }
nav.toc li[data-depth="2"] { padding-left: 0.85rem; }
nav.toc li[data-depth="3"] { padding-left: 1.7rem; }
nav.toc li[data-depth="4"] { padding-left: 2.55rem; }
nav.toc li[data-depth="5"], nav.toc li[data-depth="6"] { padding-left: 3.4rem; }

details.toc-toggle { position: relative; flex-shrink: 0;
                     display: inline-flex; align-items: center; }
details.toc-toggle > summary { list-style: none; cursor: pointer;
                               padding: 4px; color: var(--muted);
                               border-radius: 4px; user-select: none; }
details.toc-toggle > summary::-webkit-details-marker { display: none; }
details.toc-toggle > summary::marker { content: ""; }
details.toc-toggle > summary:hover { background: var(--surface); color: inherit; }
.toc-popover { position: absolute; right: 0; top: calc(100% + 4px);
               background: var(--bg-raised); border: 1px solid var(--border);
               border-radius: 8px; padding: 0.5rem 0.75rem; z-index: 10;
               min-width: 220px; max-width: 320px;
               box-shadow: 0 4px 16px rgba(0,0,0,0.18); }
.toc-popover > ul { max-height: 70vh; overflow-y: auto; }

aside.toc-sidebar { position: fixed; top: 4.5rem; left: 1rem;
                    max-width: 240px; max-height: calc(100vh - 6rem);
                    overflow-y: auto; padding: 0.5rem 0.75rem;
                    border-right: 1px solid var(--border);
                    display: none; }
html.toc-mode-sidebar.toc-sidebar-fits aside.toc-sidebar { display: block; }
html.toc-mode-sidebar.toc-sidebar-fits details.toc-toggle { display: none; }

/* Save-a-link sheet: anchored at a tapped external article link
   (actions.js positions it). Mirrors .add-url-panel's surface.
   z-index clears the header (20) and matches the pagina (30). */
.link-sheet { position: fixed; z-index: 30; max-width: 320px;
              background: var(--bg-raised); border: 1px solid var(--border);
              border-radius: 8px; padding: 0.6rem 0.75rem;
              box-shadow: 0 4px 16px rgba(0,0,0,0.18); }
.link-sheet-url { color: var(--muted); font-size: 0.8em; margin-bottom: 0.5rem;
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-sheet-actions { display: flex; gap: 0.5rem; white-space: nowrap; }

/* Diagnostics panel in the settings popover. max-height keeps the
   textarea from blowing the popover past the viewport on phones; the
   textarea is selectable + scrollable so the dump can be pasted even
   when Safari blocks clipboard.writeText. */
.settings .diag { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border-color, currentColor); opacity: 0.85; }
.settings .diag summary { cursor: pointer; font-size: 0.85em; }
.settings .diag .diag-body { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; font-size: 0.8em; }
.settings .diag .diag-line code { font-family: ui-monospace, monospace; font-size: 0.95em; }
.settings .diag .diag-run { font-size: 0.85em; padding: 0.25rem 0.5rem; align-self: flex-start; }
.settings .diag .diag-output { width: 100%; box-sizing: border-box; height: 8em; max-height: 25vh; overflow: auto; resize: vertical; white-space: pre; font: 10px/1.3 ui-monospace, monospace; padding: 0.4rem; background: rgba(127,127,127,0.12); border: 1px solid rgba(127,127,127,0.3); border-radius: 4px; color: inherit; }
.settings .diag .diag-status { font-size: 0.8em; min-height: 1em; word-wrap: break-word; }