/*
 * Read view: three panes (feeds, articles, article) on the shared tokens. The ground shows between
 * panes; the article list and the article are white cards. Sizes are 14/16/20/28, plus 12 for meta.
 */
#orbit-reader {
  display: grid;
  grid-template-columns: 240px 360px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: 16px;
  height: calc(100vh - var(--orbit-topbar-h, 56px));
  height: calc(100dvh - var(--orbit-topbar-h, 56px));
  min-height: 420px;
  padding: 0 var(--pad) var(--pad);
  background: var(--ground);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-small);
  line-height: 1.5;
  overflow: hidden;
}
#orbit-reader[hidden],
#orbit-reader [hidden] { display: none !important; }
#orbit-reader * { box-sizing: border-box; }
#orbit-reader button { font: inherit; color: inherit; }
#orbit-reader :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#orbit-reader ul { list-style: none; }

/* Head: the page title */
#orbit-reader .reader-head {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 12px;
  padding: 16px 0;
}
#orbit-reader .reader-heading { margin: 0; font-size: var(--fs-title); font-weight: 600; line-height: 1.2; }
#orbit-reader #reader-help { margin-left: auto; }
#orbit-reader .reader-back { display: none; }

/* Buttons: quiet by default, near-black for the one primary action */
#orbit-reader button:not(.reader-item-btn):not(.reader-chevron):not(.reader-menu-btn):not(.reader-link) {
  height: 32px; padding: 0 12px; cursor: pointer;
  font-weight: 600; background: var(--active); border: 0; border-radius: var(--radius-chip);
}
#orbit-reader button:not(.reader-item-btn):not(.reader-chevron):not(.reader-menu-btn):not(.reader-link):hover { background: var(--control); }
#orbit-reader button.is-primary:not(#x):not(#y):not(#z):not(#w):not(#v),
#orbit-reader .reader-filter button[aria-pressed="true"]:not(#x):not(#y):not(#z):not(#w):not(#v) { background: var(--primary); color: var(--surface); }
#orbit-reader button.is-primary:not(#x):not(#y):not(#z):not(#w):not(#v):hover,
#orbit-reader .reader-filter button[aria-pressed="true"]:not(#x):not(#y):not(#z):not(#w):not(#v):hover { background: var(--text); }
#orbit-reader button.is-danger:not(#x):not(#y):not(#z):not(#w):not(#v),
#orbit-reader button.is-danger:not(#x):not(#y):not(#z):not(#w):not(#v):hover { background: var(--negative); color: var(--surface); }
#orbit-reader button:disabled { opacity: 0.55; cursor: default; }
#orbit-reader #reader-help { width: 32px; padding: 0; }

/* Feeds pane: sits on the ground */
#reader-sources { min-width: 0; overflow-y: auto; padding: 0 0 16px; }
#orbit-reader .reader-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 8px 12px; }
#orbit-reader .reader-side-title { margin: 0; font-size: var(--fs-body); font-weight: 600; }
#orbit-reader .reader-link {
  background: none; border: 0; padding: 4px 8px; cursor: pointer;
  color: var(--accent-ink); font-weight: 600; font-size: var(--fs-small); border-radius: var(--radius-chip);
}
#orbit-reader .reader-link:hover { background: var(--active); }
#orbit-reader .reader-item,
#orbit-reader .reader-cat-head,
#orbit-reader .reader-src-line { display: flex; align-items: center; min-width: 0; }
#orbit-reader .reader-item-btn {
  flex: 1 1 auto; min-width: 0; min-height: 36px;
  display: flex; align-items: center; gap: 8px;
  background: none; border: 0; border-radius: var(--radius-control);
  padding: 4px 8px; cursor: pointer; text-align: left;
}
#orbit-reader .reader-item-btn:hover { background: var(--active); }
#orbit-reader [aria-selected="true"] > .reader-item-btn,
#orbit-reader [aria-selected="true"] > .reader-src-line > .reader-item-btn,
#orbit-reader [aria-selected="true"] > .reader-cat-head > .reader-item-btn { background: var(--active); font-weight: 600; }
#orbit-reader .reader-item-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
#orbit-reader .reader-item-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#orbit-reader .reader-badge,
#orbit-reader .reader-count {
  flex: 0 0 auto; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
  padding: 0 8px; border-radius: 999px; line-height: 20px;
}
#orbit-reader .reader-badge { background: var(--accent-soft); color: var(--accent-ink); }
#orbit-reader .reader-count { background: var(--pill-neutral-bg); color: var(--pill-neutral-ink); }
#orbit-reader .reader-warn {
  font-size: 12px; color: var(--warning); cursor: help;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#orbit-reader .reader-chevron {
  flex: 0 0 auto; position: relative; width: 24px; height: 36px; padding: 0;
  background: none; border: 0; border-radius: var(--radius-chip); cursor: pointer;
}
#orbit-reader .reader-chevron::before {
  content: ""; position: absolute; left: 8px; top: 13px; width: 6px; height: 6px;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
}
#orbit-reader .reader-chevron.is-collapsed::before { transform: rotate(-45deg); }
#orbit-reader .reader-chevron:hover { background: var(--active); }
#orbit-reader .reader-cat { margin-top: 8px; }
#orbit-reader .reader-cat-head .reader-item-btn { color: var(--muted); font-weight: 600; }
#orbit-reader [role="group"] { padding-left: 24px; }
#orbit-reader .reader-menu-btn {
  flex: 0 0 auto; width: 32px; height: 36px; padding: 0;
  background: none; border: 0; border-radius: var(--radius-chip); cursor: pointer;
  color: var(--muted); opacity: 0.7;
}
#orbit-reader .reader-src-line:hover .reader-menu-btn,
#orbit-reader .reader-menu-btn:focus-visible,
#orbit-reader .reader-menu-btn[aria-expanded="true"] { opacity: 1; }
#orbit-reader .reader-menu-btn:hover { background: var(--active); }
#orbit-reader .reader-menu {
  margin: 4px 0 8px 8px; padding: 4px;
  background: var(--surface); border-radius: var(--radius-control);
  box-shadow: 0 8px 24px rgba(27, 29, 31, 0.14); /* taste-skill-ignore: floats */
  display: flex; flex-direction: column;
}
#orbit-reader .reader-menu button {
  background: none; border: 0; text-align: left; cursor: pointer;
  min-height: 36px; padding: 4px 12px; border-radius: var(--radius-chip);
}
#orbit-reader .reader-menu button:hover { background: var(--active); }
#orbit-reader .reader-menu .is-danger { color: var(--negative); }
#orbit-reader .reader-edit,
#orbit-reader .reader-confirm {
  margin: 4px 0 8px 8px; padding: 12px;
  background: var(--surface); border-radius: var(--radius-control);
  display: flex; flex-direction: column; gap: 8px;
}
#orbit-reader .reader-edit label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-weight: 500; }
#orbit-reader .reader-edit-note { color: var(--muted); font-size: 12px; }
#orbit-reader input[type="text"],
#orbit-reader input[type="search"],
#orbit-reader input:not([type]),
#orbit-reader input[type="url"] {
  width: 100%; height: var(--control-height); padding: 0 12px; font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--control); border-radius: var(--radius-control);
}
#orbit-reader .reader-row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
#orbit-reader .reader-form-error { margin: 0; color: var(--negative); }

/* Article list: a white card with its own header (search, filter, mark all) */
#orbit-reader .reader-list {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: var(--surface); border-radius: var(--radius-card); overflow: hidden;
}
#orbit-reader .reader-list-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 16px; }
#orbit-reader .reader-search { flex: 1 1 100%; }
#orbit-reader .reader-filter { display: inline-flex; gap: 2px; padding: 2px; background: var(--active); border-radius: var(--radius-control); }
#orbit-reader #reader-mark-all { margin-left: auto; }
#reader-articles { margin: 0; padding: 0 8px 8px; overflow-y: auto; min-width: 0; flex: 1 1 auto; }
#orbit-reader .reader-art {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 12px 8px; cursor: pointer; border-radius: var(--radius-control);
}
#orbit-reader .reader-art:hover { background: var(--ground); }
#orbit-reader .reader-art[aria-selected="true"] { background: var(--active); }
#orbit-reader .reader-dot { flex: 0 0 8px; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; }
#orbit-reader .reader-art.is-unread .reader-dot { background: var(--accent); }
#orbit-reader .reader-art-main { min-width: 0; flex: 1 1 auto; }
#orbit-reader .reader-art-title { font-weight: 500; color: var(--muted); overflow-wrap: anywhere; }
#orbit-reader .reader-art.is-unread .reader-art-title { font-weight: 600; color: var(--text); }
#orbit-reader .reader-art-meta { font-size: 12px; color: var(--muted); }
#orbit-reader .reader-art-snip {
  color: var(--muted); margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#orbit-reader .reader-more { padding: 12px; text-align: center; }
#orbit-reader .reader-empty { padding: 24px 16px; color: var(--muted); }
#orbit-reader .reader-new { position: sticky; top: 0; z-index: 2; padding: 8px 12px; text-align: center; background: var(--surface); }
#orbit-reader .reader-new button:not(#x):not(#y):not(#z):not(#w):not(#v),
#orbit-reader .reader-new button:not(#x):not(#y):not(#z):not(#w):not(#v):hover { background: var(--accent-soft); color: var(--accent-ink); }
#orbit-reader .reader-sr,
#orbit-reader .reader-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Reading pane: a white card */
#reader-pane {
  overflow-y: auto; min-width: 0; padding: var(--pad) 32px 40px;
  background: var(--surface); border-radius: var(--radius-card);
}
#orbit-reader .reader-title { margin: 0 0 4px; font-size: var(--fs-section); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
#orbit-reader .reader-meta { color: var(--muted); font-size: 12px; margin-bottom: 16px; }
#orbit-reader .reader-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
#orbit-reader .reader-actions a {
  display: inline-flex; align-items: center; height: 32px; padding: 0 12px; text-decoration: none;
  font-weight: 600; color: var(--text); background: var(--active); border-radius: var(--radius-chip);
}
#orbit-reader .reader-actions a:hover { background: var(--control); }
#orbit-reader .reader-play { margin: 0 0 24px; }
#orbit-reader .reader-body { font-size: var(--fs-body); line-height: 1.65; overflow-wrap: anywhere; max-width: 68ch; }
#orbit-reader .reader-body img,
#orbit-reader .reader-body video,
#orbit-reader .reader-body iframe { max-width: 100%; height: auto; }
#orbit-reader .reader-body pre { overflow-x: auto; padding: 12px; background: var(--ground); border-radius: var(--radius-control); font-size: var(--fs-small); }
#orbit-reader .reader-body blockquote { margin: 1em 0; padding-left: 16px; border-left: 3px solid var(--control); color: var(--muted); }
#orbit-reader .reader-body a { color: var(--accent); }
#orbit-reader .reader-help h3 { margin: 0 0 16px; font-size: var(--fs-section); font-weight: 600; }
#orbit-reader .reader-help dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; }
#orbit-reader .reader-help dt { font-weight: 600; }
#orbit-reader .reader-help dd { margin: 0; color: var(--muted); }
/* Empty pane: what is waiting, instead of a blank card */
#orbit-reader #reader-pane:has(.reader-start) { display: flex; flex-direction: column; }
#orbit-reader .reader-start { flex: 1; display: flex; flex-direction: column; max-width: 52ch; padding: 8px 0; }
#orbit-reader .reader-start-count { margin: 0 0 16px; font-size: var(--fs-section); }
#orbit-reader .reader-start-list { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
#orbit-reader .reader-start-link {
  display: block; text-align: left; padding: 0; line-height: 1.4; font-weight: 600;
  color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
#orbit-reader .reader-start-src { display: block; margin-top: 2px; font-size: var(--fs-small); color: var(--muted); }
#orbit-reader .reader-start-note, #orbit-reader .reader-start-hint { margin: 0 0 12px; color: var(--muted); font-size: var(--fs-small); }
#orbit-reader .reader-start-hint { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--rule); }
#orbit-reader kbd {
  font: 12px ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 2px 8px; background: var(--active); border-radius: var(--radius-chip);
}

/* Toast: floats */
#reader-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 120;
  max-width: calc(100vw - 32px);
  background: var(--primary); color: var(--surface); border-radius: var(--radius-control);
  padding: 12px 16px; box-shadow: 0 8px 24px rgba(27, 29, 31, 0.25); /* taste-skill-ignore: floats */
}
#reader-toast.is-error { background: var(--negative); }
#reader-toast .reader-toast-undo {
  background: none; border: 0; padding: 0 2px; cursor: pointer;
  color: var(--accent-soft); font-weight: 600; text-decoration: underline;
}

/* Tablet: feeds and articles side by side, the article takes over the list */
@media (max-width: 1100px) {
  #orbit-reader { grid-template-columns: 220px minmax(0, 1fr); }
  #orbit-reader #reader-pane { grid-column: 2; grid-row: 2; }
  #orbit-reader .reader-list { grid-column: 2; grid-row: 2; }
  #orbit-reader[data-pane="article"] .reader-list,
  #orbit-reader:not([data-pane="article"]) #reader-pane { display: none; }
  #orbit-reader[data-pane="article"] .reader-back { display: inline-flex; align-items: center; }
}

/* Phone: one pane at a time */
@media (max-width: 800px) {
  #orbit-reader { grid-template-columns: minmax(0, 1fr); padding: 0 16px 16px; }
  #orbit-reader .reader-head { padding: 12px 0; }
  #orbit-reader .reader-list,
  #orbit-reader #reader-pane { grid-column: 1; }
  #orbit-reader #reader-sources { grid-column: 1; grid-row: 2; }
  #orbit-reader:not([data-pane="sources"]) #reader-sources { display: none; }
  #orbit-reader[data-pane="sources"] .reader-list { display: none; }
  #orbit-reader:not([data-pane="sources"]) .reader-back { display: inline-flex; align-items: center; }
  #reader-pane { padding: 16px 16px 40px; }
}

@media (prefers-reduced-motion: reduce) {
  #orbit-reader *,
  #reader-toast { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* The article's lead picture above its text. */
#orbit-reader .reader-lead-image {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  margin: 12px 0;
  border-radius: var(--radius-card);
  background: var(--ground);
}