/* ---------- Discover (feed reader) ---------- */

/* section sidebar content (rendered into the shell's .subnav-body via ctx.setSubnav) */
.dc-subnav { flex: 1 0 auto; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dc-group-head { display: flex; align-items: center; gap: 2px; border-radius: 7px; background: var(--surface-2); }
.subnav-group-head.dc-group-toggle { flex: 1 1 auto; min-width: 0; background: transparent; }
.btn.dc-group-act { flex: none; margin-right: 3px; color: var(--text-3); }
.btn.dc-group-act:hover { color: var(--text); }
.dc-row { display: flex; align-items: center; gap: 1px; min-width: 0; }
.subnav-link.dc-link { flex: 1 1 auto; min-width: 0; padding-right: 6px; }
.dc-count { flex: none; font-size: 11.5px; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.subnav-link[aria-current="page"] .dc-count { color: inherit; }
.dc-err { flex: none; display: inline-flex; color: var(--danger); }
.dc-row-menu { flex: none; opacity: 0; }
.dc-row:hover .dc-row-menu, .dc-row:focus-within .dc-row-menu, .dc-row-menu[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .dc-row-menu { opacity: 1; } }
.btn.dc-fold-toggle { flex: none; width: 20px; color: var(--text-3); }
.dc-chev { transition: transform .15s; }
.dc-fold-toggle[aria-expanded="true"] .dc-chev { transform: rotate(90deg); }
.dc-children { padding-left: 18px; display: flex; flex-direction: column; gap: 1px; }
.dc-side-skel { padding: 4px 8px; }
.dc-subnav-foot { margin-top: auto; position: sticky; bottom: -14px; padding: 10px 0 14px; margin-bottom: -14px; background: var(--surface); border-top: 1px solid var(--border); }

/* page bar */
.page-bar.dc-bar .page-bar-start { min-width: 0; }
.dc-scope { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: min(360px, 100%); }
.dc-sub { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 12.5px; color: var(--text-2); min-width: 0; }
.dc-sub > * + *::before { content: "·"; margin-right: 10px; color: var(--text-3); }
.dc-sub > :empty { display: none; }
.dc-sub > :empty + *::before { content: none; }
.dc-sub > a::before { display: inline-block; }
.dc-feed-url { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; }
.dc-search { flex: 0 1 220px; width: 220px; min-width: 150px; }
.dc-scope-menu { display: contents; }
.dc-notice:empty, .dc-pager:empty { display: none; }
.dc-err-text { overflow-wrap: anywhere; }

/* main column */
.dc-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; container: dc-main / inline-size; }
.dc-list { min-width: 0; transition: opacity .15s; }
.dc-list.is-loading { opacity: .55; pointer-events: none; }
.dc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); gap: 16px; align-items: stretch; }
.dc-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }

/* article card */
.dc-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); transition: border-color .12s; }
.dc-card:hover { border-color: var(--border-strong); }
.dc-img { display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-3); border-bottom: 1px solid var(--border); }
.dc-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dc-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 14px 4px; }
.dc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; color: var(--text-3); min-width: 0; }
.dc-source { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-width: 0; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--text-2); cursor: pointer; }
.dc-source:hover { color: var(--accent-ink); text-decoration: underline; }
.dc-tag-btn { gap: 4px; border: 0; font-family: inherit; cursor: pointer; }
.dc-tag-btn:hover { text-decoration: underline; }
.dc-title { font-size: 14.5px; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.dc-title a { color: var(--text); }
.dc-title a:visited { color: var(--text-2); }
.dc-title a:hover { color: var(--accent-ink); }
.dc-summary { font-size: 13px; line-height: 1.5; color: var(--text-2); overflow-wrap: anywhere; }
.dc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 8px 10px; }
.dc-actions .btn-soft { margin-left: auto; }
.dc-save.is-on { color: var(--accent-ink); }
.dc-save.is-on svg { fill: currentColor; }

/* first-run welcome panel */
.dc-welcome { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 40px 24px; }
.dc-welcome h2 { font-size: 17px; }
.dc-welcome-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-ink); margin-bottom: 4px; }
.dc-welcome-text { max-width: 520px; }
.dc-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; width: 100%; max-width: 760px; margin-top: 16px; }
.dc-option { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; text-decoration: none; transition: border-color .12s, background .12s; }
.dc-option:hover { border-color: var(--accent); background: var(--accent-soft); text-decoration: none; }
.dc-option-icon { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-ink); margin-bottom: 4px; }

/* "Undo" injected into a toast */
.dc-undo { flex: none; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: inherit; text-decoration: underline; cursor: pointer; }

@media (max-width: 760px) {
  .dc-search { flex: 1 1 100%; width: auto; min-width: 0; order: 5; }
  .page-bar.dc-bar > .page-bar-end { margin-left: 0; }
  .dc-scope { max-width: 100%; }
}
/* narrow content area (phones, or small laptops with both sidebars open): a scannable list with a
   small thumbnail instead of one column of tall image cards */
@container dc-main (max-width: 599.98px) {
  .dc-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .dc-card { display: grid; grid-template-columns: minmax(0, 1fr) 84px; grid-template-areas: "body img" "actions actions"; }
  .dc-card.no-img { grid-template-columns: minmax(0, 1fr); grid-template-areas: "body" "actions"; }
  .dc-img { grid-area: img; align-self: start; width: auto; aspect-ratio: 1; margin: 12px 12px 0 0; border: 0; border-radius: 8px; }
  .dc-body { grid-area: body; padding: 12px 12px 2px; }
  .dc-actions { grid-area: actions; padding: 4px 6px 8px; }
  .dc-title { font-size: 14px; }
}
@media (max-width: 560px) {
  .dc-welcome { padding: 28px 16px; }
}
/* on phones the wrapped page bar would take a third of the screen if it stayed pinned */
@media (max-width: 560px) {
  .page-bar.dc-bar { position: static; }
}