/* Reader view: sidebar | entry list | preview. Collapses to a stack on phones. */
.site-main:has(.reader) { max-width: none; padding: 0; }

.reader {
  --sidebar-width: 17.5rem;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(18rem, min(26rem, 30vw)) 1fr; /* the article gets the room */
  height: calc(100dvh - var(--header-height));
}
/* position: relative makes each pane the containing block for absolutely
   positioned children (.visually-hidden labels); otherwise they escape the
   pane's scroll area and stretch the whole page, giving it a second scrollbar. */
.reader > * { min-width: 0; overflow-y: auto; position: relative; }
.reader-preview-bottom { grid-template-columns: var(--sidebar-width) 1fr; grid-template-rows: 40% 60%; }
.reader-preview-bottom .sidebar { grid-row: 1 / 3; }
.reader-preview-bottom .entry-list { border-right: 0; border-bottom: 1px solid var(--border); }

/* Sidebar */
.sidebar { border-right: 1px solid var(--border); padding: 12px 8px; background: var(--surface); }
.tree { list-style: none; margin: 0; padding: 0; }
.tree-folder > summary { list-style: none; cursor: pointer; }
.tree-folder > summary::-webkit-details-marker { display: none; }
.tree-folder > summary .tree-link { font-weight: 600; }
.tree-loose { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; }
.tree-link {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: var(--radius);
  color: var(--text); text-decoration: none; min-height: 36px;
}
.tree-link:hover { background: var(--bg); }
/* The current place in the tree: a full-row navy tint, navy text, icon and count. */
.tree-link.is-current { background: var(--accent-tint); color: var(--accent); font-weight: 600; }
.tree-link.is-current .count { background: var(--accent); color: var(--accent-text); }
.tree-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Unread counts sit in a small pill so they read apart from the feed names. */
.count { margin-left: auto; flex-shrink: 0; min-width: 2.1em; padding: 1px 7px; border-radius: 999px; text-align: center;
  background: color-mix(in srgb, var(--border) 70%, transparent); color: var(--muted);
  font-size: .72rem; font-weight: 600; line-height: 1.5; font-variant-numeric: tabular-nums; }
.count.is-zero { opacity: .55; } /* nothing unread */
.feed-problem { color: var(--alert-text); }
.sidebar-links { display: flex; justify-content: flex-end; gap: 2px; padding: 8px 6px 8px 4px; } /* right edge lines up with the count pills */

/* Entry list */
.entry-list { border-right: 1px solid var(--border); }
.toolbar {
  position: sticky; top: 0; z-index: 1; background: var(--bg);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.toolbar-title { font-size: 1.2rem; margin: 0; width: 100%; }
.toolbar-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.toolbar-actions form { margin: 0; }
.toolbar-actions .button { margin: 0; }
.tabs { display: flex; gap: 4px; }
.tabs a { padding: 4px 10px; border-radius: 999px; text-decoration: none; color: var(--muted); font-size: .9rem; }
.tabs a.is-current { background: var(--text); color: var(--bg); }
.tabs-small a { font-size: .8rem; padding: 2px 8px; }

.entries { list-style: none; margin: 0; padding: 0; }
.entry-row { border-bottom: 1px solid var(--border); }
.entry-link { display: grid; gap: 2px; padding: 12px 16px; color: var(--text); text-decoration: none; }
.entry-link:hover { background: var(--surface); }
.entry-title { font-weight: 700; line-height: 1.3; }
.is-read .entry-title { font-weight: 400; color: var(--muted); }
.entry-meta { color: var(--muted); font-size: .8rem; }
.entry-excerpt { color: var(--muted); font-size: .85rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.star-mark { color: var(--accent); }
.loading, .empty-state { padding: 24px 16px; color: var(--muted); list-style: none; }

/* Preview */
.preview { display: block; padding: 24px clamp(16px, 4vw, 48px); background: var(--surface); }
.preview-empty { color: var(--muted); margin-top: 20vh; text-align: center; }
.preview-title { font-size: 1.5rem; margin-bottom: .25rem; }
.entry-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 24px; }
.entry-actions form { margin: 0; }
.entry-actions .button { margin: 0; }
.back-link, .tree-toggle { display: none; }

.prose { font: 1.05rem/1.65 var(--font-serif); max-width: 40rem; overflow-wrap: anywhere; }
.prose img, .prose video, .prose figure { max-width: 100%; height: auto; }
.prose pre { overflow-x: auto; background: var(--bg); padding: 12px; border-radius: var(--radius); font-size: .9rem; }
.prose blockquote { border-left: 3px solid var(--border); margin-left: 0; padding-left: 16px; color: var(--muted); }

/* Phones: one pane at a time — tree, list, or article — each with a way back. */
@media (max-width: 767px) {
  .reader, .reader-preview-bottom { display: block; height: auto; }
  .reader > * { overflow: visible; }
  .sidebar { display: none; border-right: 0; }
  .entry-list { border-right: 0; }
  .preview:has(.preview-empty) { display: none; }
  .reader-pane-tree .sidebar { display: block; }
  .reader-pane-tree .entry-list, .reader-pane-tree .preview { display: none; }
  .reader:has(.preview-article) .entry-list { display: none; }
  .tree-toggle { display: inline-block; font: 600 .9rem var(--font-sans); text-decoration: none; margin-right: 6px; }
  .back-link { display: inline-block; margin-bottom: 12px; }
  .nav-secondary { display: none; }
}

/* Organize page, and compact rows of controls generally (inline forms, folder
   controls, the sort bar): every field and button in a row is the same height,
   centred, with no stray margins. 38px with a mouse, 44px on touch screens. */
:root { --row-control: 38px; }
@media (pointer: coarse) { :root { --row-control: 44px; } }
.form-inline, .folder-controls, .sort-bar { display: flex; flex-direction: row; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.folder-controls { gap: 4px; }
.form-inline form, .folder-controls form, .sort-bar form { margin: 0; display: flex; }
.form.form-inline input[type=text] { width: auto; flex: 1 1 12rem; }
.folder-head .form-inline { flex: 1 1 16rem; }
.form-inline input[type=text], .form-inline select {
  font: inherit; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--text);
}
:is(.form-inline, .folder-controls, .sort-bar) :is(input[type=text], select, .button, input[type=submit]),
.form.form-inline input[type=submit] {
  box-sizing: border-box; height: var(--row-control); min-height: var(--row-control); margin: 0;
  padding-top: 0; padding-bottom: 0;
}
:is(.folder-controls, .sort-bar, .section-head) summary.button { display: inline-flex; align-items: center; margin: 0; }
.folder-block { border-top: 1px solid var(--border); padding: 16px 0; }
.folder-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.section-head summary.button { height: var(--row-control); min-height: var(--row-control); padding-top: 0; padding-bottom: 0; box-sizing: border-box; }
.folder-name { font: 600 1.1rem var(--font-serif); margin: 0 0 8px; }
.move-list { list-style: none; padding: 0; margin: 8px 0 0; }
.move-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; }
.choice-list { list-style: none; padding: 0; display: grid; gap: 8px; }
.choice { display: grid; gap: 2px; width: 100%; text-align: left; font: inherit; padding: 12px; cursor: pointer;
  background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); }
.choice .muted { font-size: .85rem; word-break: break-all; }

/* Toasts */
.toasts { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 10; width: max-content; max-width: calc(100vw - 32px); }
.toast { display: flex; gap: 16px; align-items: center; background: var(--text); color: var(--bg); padding: 12px 16px; border-radius: var(--radius); box-shadow: 0 4px 16px rgb(0 0 0 / .25); }
.toast form { margin: 0; }
.toast .link-button { color: var(--bg); font-weight: 700; }

/* Feed settings, settings and import pages */
.card + .card { margin-top: 16px; }
h2 { font: 600 1.15rem var(--font-serif); margin: 1.5rem 0 .5rem; }
.card > h2:first-child, .section-head h2 { margin-top: 0; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.section-head form { margin: 0; }
.hint { color: var(--muted); font-size: .85rem; margin: 0 0 8px; }
.checkbox { display: flex; gap: 8px; align-items: center; font-weight: 500; margin-top: 8px; }
.checkbox input { width: 18px; height: 18px; }
.checkbox.is-disabled { color: var(--muted); }
.badge { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; border: 1px solid var(--border); border-radius: 999px; padding: 1px 6px; margin-left: 4px; }
.feed-urls { overflow-wrap: anywhere; font-size: .9rem; }
.feed-status, .import-summary { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 12px 0; }
.feed-status dt, .import-summary dt { color: var(--muted); }
.feed-status dd, .import-summary dd { margin: 0; }
.feed-status-failing strong, .feed-status-dead strong, .feed-error { color: var(--alert-text); }
.refreshing { font-weight: 600; }
.danger-zone { display: flex; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 16px; margin-top: 16px; }
.danger-zone form { margin: 0; }
.plain-list { list-style: none; padding: 0; display: grid; gap: 4px; font-size: .9rem; }
.import-progress progress { width: 100%; height: 8px; accent-color: var(--accent); }

/* Article body notices (extraction state) */
.extraction-note {
  display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
  font-size: .85rem; color: var(--muted); background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; margin: 0 0 20px; max-width: 40rem;
}
.extraction-note form { margin: 0; }

/* Clean reader page: one centred column, nothing else */
body.clean { background: var(--surface); }
.clean-bar { display: flex; align-items: center; padding: 12px var(--gutter); border-bottom: 1px solid var(--border); }
.clean-bar .brand { font-size: 1.1rem; }
.clean-main { max-width: 42rem; margin: 0 auto; padding: 32px var(--gutter) 64px; }
.clean-source { text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; color: var(--accent); margin: 0 0 8px; }
.clean-title { font-size: clamp(1.6rem, 4vw, 2.1rem); line-height: 1.18; margin-bottom: .5rem; }
.clean .entry-actions { margin-bottom: 32px; }
.clean .prose { font-size: 1.1rem; line-height: 1.7; max-width: none; }
.clean-footer { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border); }

/* Header search */
.site-search { flex: 1; max-width: 22rem; margin: 0 16px; }
.site-search input { width: 100%; font: inherit; font-size: .9rem; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--text); }

/* Sidebar saved searches */
.tree-heading { font: 600 .75rem var(--font-sans); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 16px 8px 4px; }

/* Toolbar filters and save-search */
.filters { width: 100%; font-size: .85rem; }
.filters > summary { cursor: pointer; color: var(--muted); }
.filters-form { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; padding: 8px 0; }
.filters-form label { display: grid; gap: 2px; color: var(--muted); }
.filters-form label.checkbox { display: flex; }
.filters-form select, .filters-form input[type=date] { min-width: 0; font: inherit; padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); max-width: 12rem; }
.filters-actions { display: flex; gap: 6px; }
.filters-actions .button { margin: 0; }
.save-search { display: flex; gap: 6px; width: 100%; }
.save-search input[type=text] { flex: 1; min-width: 0; font: inherit; font-size: .85rem; padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); }
.save-search .button { margin: 0; }

/* Sidebar drag and drop */
.tree-folder > summary, .tree-feeds > li, [data-sidebar-sort-target="savedSearches"] > li { cursor: grab; }
.sidebar.is-dragging .tree-folder > summary, .sidebar.is-dragging li { cursor: grabbing; }
.tree-feeds { min-height: 6px; }
.sidebar.is-dragging .tree-feeds { min-height: 28px; outline: 1px dashed var(--border); outline-offset: -2px; border-radius: var(--radius); }
.is-drag-ghost { opacity: .4; background: var(--bg); border-radius: var(--radius); }
.tree-heading + .tree-loose { margin-top: 0; border-top: 0; padding-top: 0; }
/* New folder: an icon in the sidebar's bottom row; its form pops up above it. */
.new-folder > summary { list-style: none; }
.menu.new-folder > summary::after { content: none; } /* no menu caret on an icon */
.new-folder > summary::-webkit-details-marker { display: none; }
/* The form hangs from the whole row (not the icon, which sits mid-row) so it spans the sidebar. */
.sidebar-links { position: relative; }
.menu.new-folder { position: static; }
.menu.new-folder .new-folder-form { top: auto; bottom: calc(100% + 4px); left: 4px; right: 6px; width: auto; min-width: 0; padding: 8px; grid-template-columns: minmax(0, 1fr); }
.menu.new-folder .new-folder-form form { flex-wrap: nowrap; }
.new-folder input[type=text] { flex: 1; min-width: 0; font: inherit; padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); }

/* Folder-tree look: chevrons, folder/feed icons, indent guides. Root-level items
   (All feeds, Starred, feeds with no folder, saved searches) are indented by the
   chevron's width so every icon sits in one column. */
.sidebar { --chevron: 18px; }
.tree-link { gap: 7px; min-height: 30px; padding: 4px 6px; }
.tree-icon { flex: none; color: var(--muted); }
.tree-link.is-current .tree-icon { color: var(--accent); }
.sidebar > .tree, .sidebar > .tree-loose, [data-sidebar-sort-target="savedSearches"] { margin-left: var(--chevron); }

.tree-folder > summary.tree-folder-row { display: flex; align-items: center; border-radius: var(--radius); }
.tree-folder-row:hover { background: var(--bg); }
/* A current folder tints its whole row, chevron included. */
.tree-folder-row:has(.tree-link.is-current), .tree-folder-row:has(.tree-link.is-current):hover { background: var(--accent-tint); }
.tree-folder-row:has(.tree-link.is-current) .tree-chevron { color: var(--accent); }
.tree-folder-row .tree-link.is-current { background: transparent; }
.tree-chevron { width: 14px; height: 14px; flex: none; margin: 0 2px; cursor: pointer; transition: transform .15s ease; }
.tree-folder[open] > summary .tree-chevron { transform: rotate(90deg); }
.tree-folder-row .tree-link { flex: 1; min-width: 0; }
.tree-folder-row .tree-link:hover { background: transparent; }
.tree-folder .when-open { display: none; }
.tree-folder[open] > summary .when-open { display: block; }
.tree-folder[open] > summary .when-closed { display: none; }
/* Guide line runs under the folder icon's centre; children start one level in. */
.tree-folder > .tree-feeds, .tree-folder .tree { margin: 0 0 2px calc(var(--chevron) + 13px); padding-left: 4px; border-left: 1px solid var(--border); }

.tree-loose { margin-top: 2px; border-top: 0; padding-top: 0; }
.sidebar.is-dragging .tree-loose:empty::before { content: attr(data-drop-label); display: block; padding: 4px 8px; font-size: .8rem; color: var(--muted); }
.tree-heading { margin-left: calc(var(--chevron) + 6px); }
@media (prefers-reduced-motion: reduce) { .tree-chevron { transition: none; } }

/* Dropdown menus (Mark all read options) */
.menu { position: relative; }
.menu > summary { list-style: none; margin: 0; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after { content: " ▾"; font-size: .75em; }
.menu-items { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; min-width: 13rem; display: grid; padding: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 6px 20px rgb(0 0 0 / .12); }
.menu-items form { margin: 0; }
.menu-item { display: block; width: 100%; text-align: left; font: inherit; font-size: .9rem; padding: 8px 10px; border: 0; border-radius: var(--radius); background: transparent; color: var(--text); cursor: pointer; }
.menu-item:hover, .menu-item:focus-visible { background: var(--bg); }

/* Expanded (river) layout */
.reader-expanded { grid-template-columns: var(--sidebar-width) 1fr; }
.reader-expanded .entry-list { border-right: 0; }
.river { max-width: 46rem; margin: 0 auto; padding: 0 16px 40vh; } /* bottom space so the last item can scroll past the top */
.river-item { border-bottom: 1px solid var(--border); padding: 20px 0; scroll-margin-top: var(--toolbar-height, 120px); }
.river-item.is-selected { box-shadow: -3px 0 0 var(--accent); padding-left: 12px; margin-left: -15px; }
.river-title { font: 700 1.3rem/1.25 var(--font-serif); margin: 0; }
.river-title a { color: var(--text); text-decoration: none; }
.river-title a:hover { text-decoration: underline; }
.river-item.is-read .river-title a { color: var(--muted); }
.river-header .entry-meta { margin: 4px 0 14px; }
.river-item .prose { max-width: none; }
.river-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.river-actions form { margin: 0; }

/* Small segmented control (List | Expanded) */
.segmented { display: flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.segmented form { margin: 0; }
.segment { font: inherit; font-size: .8rem; padding: 6px 10px; border: 0; background: transparent; color: var(--muted); cursor: pointer; min-height: 36px; }
.segment.is-current { background: var(--text); color: var(--bg); }
@media (max-width: 767px) { .reader-expanded { display: block; } .river { padding: 0 0 40vh; } }

/* Keyboard selection (j/k/n/p) */
.entry-row.is-selected .entry-link { box-shadow: inset 3px 0 0 var(--accent); background: var(--surface); }
.card-row.is-selected { box-shadow: -3px 0 0 var(--accent); padding-left: 10px; margin-left: -13px; }
.story.is-selected, .brief.is-selected { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 2px; }

/* Shortcut help */
.shortcut-help { max-width: 40rem; width: calc(100vw - 32px); border: 1px solid var(--border); border-radius: 10px; padding: 20px 24px; background: var(--surface); color: var(--text); }
.shortcut-help::backdrop { background: rgb(0 0 0 / .35); }
.shortcut-help-head { display: flex; justify-content: space-between; align-items: baseline; }
.shortcut-help-head h2 { margin: 0 0 12px; }
.shortcut-help-head form { margin: 0; }
.shortcut-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0 32px; }
.shortcut-columns dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 14px; margin: 0; font-size: .9rem; }
.shortcut-columns dd { margin: 0; color: var(--muted); }
kbd { font: .8rem var(--font-sans); padding: 1px 6px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; background: var(--bg); }

/* Tablets (iPad portrait and similar): the sidebar becomes a pane opened with
   "‹ Feeds" (as on phones), leaving list + preview side by side. */
@media (min-width: 768px) and (max-width: 1023px) {
  .nav-secondary { display: none; }
  .site-search { min-width: 9rem; margin: 0 10px; }
  .view-switcher { margin-right: 8px; }

  .reader, .reader-preview-bottom { grid-template-columns: minmax(16rem, 21rem) 1fr; grid-template-rows: none; }
  .reader > .sidebar { display: none; }
  .reader-preview-bottom { grid-template-columns: 1fr; grid-template-rows: 42% 58%; }
  .reader-expanded, .reader-digest { grid-template-columns: 1fr; }
  .tree-toggle { display: inline-block; font: 600 .9rem var(--font-sans); text-decoration: none; margin-right: 6px; }

  .reader-pane-tree { grid-template-columns: var(--sidebar-width) 1fr; }
  .reader-pane-tree > .sidebar { display: block; }
  .reader-pane-tree .preview { display: none; }
}

/* Touch screens (phones, iPads): 44px tap targets, without bloating the desktop. */
@media (pointer: coarse) {
  .view-option, .segment, .menu-item, .tabs a, .tree-link, .button,
  .site-nav a, .site-nav .link-button, .tree-toggle, .back-link, .brand, .sections a {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .tree-link, .menu-item { display: flex; }
  .tabs a { padding: 0 14px; }
  .tabs-small a { padding: 0 10px; }
  .tree-chevron { width: 20px; height: 20px; }
  .card-actions .link-button { min-height: 40px; display: inline-flex; align-items: center; }

}

/* Status bar (Unread / All / Starred) pinned to the bottom of the entry list.
   The list is a flex column so the bar sits at the bottom even when the list is short. */
.entry-list { display: flex; flex-direction: column; }
.entry-list > .entries, .entry-list > .cards, .entry-list > .empty-state { flex: 1 0 auto; }
.status-bar { position: sticky; bottom: 0; z-index: 1; margin-top: auto; display: flex; justify-content: center;
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--border); }
.status-bar .tabs { gap: 6px; }
@media (max-width: 767px) { .entry-list { min-height: calc(100dvh - 120px); } }
.entry-list { overflow-x: clip; } /* no sideways scrollbar; clip (not hidden) so the phone status bar can stick to the screen */
.saved-search-bar { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.saved-search-bar form { margin: 0; }
.saved-search-bar .button { margin: 0; }
.form fieldset { border: 0; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; }
.form legend { font-weight: 600; font-size: .9rem; padding: 0; margin-bottom: 4px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row > div { display: grid; gap: 6px; }
.form input[type=date] { font: inherit; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); min-height: 44px; }

/* Toolbar, tidied: two rows, icon buttons, chips and dropdowns. */
.toolbar { display: grid; gap: 8px; }
.toolbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.toolbar-title { display: flex; align-items: center; gap: 6px; flex: 1 1 12rem; min-width: 0; width: auto; }
.toolbar-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toolbar-actions { margin-left: auto; align-items: center; }
.toolbar-row-filters { gap: 6px 10px; }

.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius); background: transparent; color: var(--muted); cursor: pointer; }
.icon-button:hover { color: var(--text); background: var(--surface); }
.icon-button:disabled { opacity: .4; cursor: default; }
.icon-button .tree-icon { color: inherit; width: 18px; height: 18px; }
.icon-button-small { width: 28px; height: 28px; border: 0; }
.toolbar-actions form { margin: 0; }
.segment-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; min-height: 32px; padding: 0; }
.segment-icon .tree-icon { color: inherit; width: 17px; height: 17px; }

.chip { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: .8rem; padding: 3px 10px; min-height: 28px;
  border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; text-decoration: none; list-style: none; }
.chip::-webkit-details-marker { display: none; }
.chip:hover { color: var(--text); }
.chip .tree-icon { width: 14px; height: 14px; color: inherit; }
.chip-count { background: var(--accent); color: var(--accent-text); border-radius: 999px; padding: 0 6px; font-size: .7rem; font-weight: 700; }
.menu.filters > summary::after, .save-search-menu > summary::after { content: none; }
.inline-form { display: inline; margin: 0; }

/* The filters panel hangs from the whole filter row, not its button: the button
   sits after the time tabs, so anchoring to it pushed the panel off a phone's
   screen (and past the list pane's edge on narrow panes). */
.toolbar-row-filters { position: relative; }
.filters { width: auto; }
.menu.filters { position: static; }
.filters-panel { left: 0; right: auto; width: min(20rem, 100%); padding: 12px; }
.filters-panel .filters-form { display: grid; gap: 10px; padding: 0; }
.filters-panel .filters-form select { max-width: none; width: 100%; height: 36px; } /* level with Apply / Clear */
.save-search-menu .menu-items { left: auto; right: 0; width: min(18rem, calc(100vw - 32px)); padding: 10px; }
.save-search-menu .save-search { width: 100%; }
@media (pointer: coarse) {
  .chip { min-height: 44px; padding: 0 14px; }
  .icon-button, .segment-icon { width: 44px; height: 44px; min-height: 44px; }
  .icon-button-small { width: 36px; height: 36px; }
}
.mark-all-read > summary::after { content: none; }
.mark-all-read .menu-items { right: 0; }
/* First toolbar row stays on one line: actions keep their size, a long title truncates. */
.toolbar-row:first-child { flex-wrap: nowrap; }
.toolbar-row:first-child .toolbar-title { flex: 1 1 0; }
.toolbar-row:first-child .toolbar-actions { flex: none; display: flex; gap: 6px; }

/* AI summary panel */
.summary-panel { max-width: 40rem; margin: 0 0 20px; padding: 12px 14px; border-radius: var(--radius); background: var(--accent-tint); }
.summary-panel.is-empty { background: transparent; padding: 0; display: flex; gap: 10px; align-items: baseline; font-size: .85rem; }
.summary-panel.is-pending { color: var(--muted); font-size: .9rem; }
.summary-panel form { margin: 0; display: inline; }
.summary-label { margin: 0 0 4px; font: 600 .75rem var(--font-sans); text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.summary-text { margin: 0 0 6px; font: 1rem/1.55 var(--font-serif); }
.summary-action { font-size: .8rem; color: var(--muted); }
.summary-actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; }
.summary-action-more { color: var(--accent); font-weight: 600; }
.summary-more { margin: 4px 0 8px; }
.summary-more > summary { cursor: pointer; color: var(--accent); font: 600 .8rem var(--font-sans); margin-bottom: 6px; }
.summary-more.is-pending { color: var(--muted); font-size: .9rem; }
.summary-more p.summary-text + p.summary-text { margin-top: 8px; }

/* Settings pages: desktop pages, not phone forms. Settings' fieldsets sit in
   two columns on wider screens. */
.settings { max-width: 56rem; margin: 0 auto; }
.settings .form input[type=text], .settings .form select { max-width: 32rem; }
.settings .form input[type=number] { font: inherit; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--text); min-height: 40px; width: 100%; max-width: 14rem; }
.settings-actions { margin-top: 8px; }
@media (min-width: 768px) {
  .settings-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 40px; align-items: start; }
  .settings-form > fieldset { margin: 0; }
  .settings-actions { grid-column: 1 / -1; }
}

/* OPML import review */
.import-options { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.import-options label { display: grid; gap: 4px; }
.import-feeds { margin-top: 8px; }
.import-all { margin-bottom: 4px; }
.import-folder { margin-top: 12px; }
.import-folder .plain-list { margin: 4px 0 0 26px; gap: 0; }
@media (min-width: 768px) { .import-folder .plain-list { display: block; columns: 2; column-gap: 32px; } .import-folder .plain-list li { break-inside: avoid; } }
.start-over { flex-direction: column; align-items: flex-start; border-top: 0; padding-top: 0; margin-top: 0; }

/* Organize: sort bar and per-folder sort menu */
.sort-bar { margin-top: 16px; gap: 6px 8px; }
.sort-menu .menu-items { min-width: 10rem; }
.button-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.button-row form { margin: 0; }

/* Summarize buttons: Digest cards, and the river's summary panels */
.card-summary-status { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px; font-size: .85rem; }
.card-summary-status form { margin: 0; }
.summarize-button { font-weight: 600; }
.river-item .summary-panel-slot:has(.summary-panel) { margin: 0 0 12px; } /* no gap while empty */

/* Collapsible summary panel (preview pane, river, clean reader) */
details.summary-panel > summary.summary-label { display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; }
details.summary-panel > summary.summary-label::-webkit-details-marker { display: none; }
details.summary-panel:not([open]) > summary.summary-label { margin: 0; }
.summary-collapse { margin-left: auto; font-weight: 600; text-transform: none; letter-spacing: 0; }
details.summary-panel[open] .when-closed, details.summary-panel:not([open]) .when-open { display: none; }
.card-summary-action { display: contents; } /* its button sits in the card's action row like the others */