/* ==========================================================================
   YAVCHN's theme and its own styles, loaded after pudl.css and
   pudl-windows.css. PUDL draws every component; this file sets the palette
   tokens PUDL invites a theme to set, lays out the desktop shell after
   parkscomputing.com's window view, and styles what PUDL has no component
   for: the story rows' controls, a story window's article and discussion,
   reader-mode prose and the comment thread.
   ========================================================================== */

/* === Theme ================================================================
   An orange accent after Hacker News's own, darkened in the light theme so
   links reach 4.5:1 on every surface they sit on. The warning colour moves
   from PUDL's orange to a mustard, so the status colours stay apart from
   the accent. Everything else is PUDL's neutral graphite. */
:root {
  --accent: #a84600;
  --accent-hover: #8c3b00;
  --warn: #76620a;
  --yv-edge-inset: 12px;
  --tb-bg: #d7dce2;
  --tb-fg: #1b1f24;
}

[data-theme="dark"] {
  --accent: #ff8a3d;
  --accent-hover: #ffa766;
  --on-accent: #121417;
  --warn: #d4b84a;
  --tb-bg: #20252b;
  --tb-fg: #e6e8eb;
}

/* YAVCHN's own glyphs, drawn as SVG masks as PUDL draws its own, so they
   follow the theme and never turn into emoji. */
:root {
  --yv-glyph-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 2h6v3l2 3H9v6l-1 1-1-1V8H3l2-3V2z' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
  --yv-glyph-pinned: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 2h6v3l2 3H9v6l-1 1-1-1V8H3l2-3V2z' stroke='black' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
  --yv-glyph-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 8a5 5 0 1 1-1.6-3.7'/%3E%3Cpath d='M12.2 1.8v3h-3'/%3E%3C/svg%3E");
}

/* === The top bar ==========================================================
   The source switcher follows the menus so navigation stays together
   on wide displays. */
.topbar {
  position: relative;
  justify-content: flex-start;
  padding-block: 6px;
  padding-inline: var(--yv-edge-inset);
  --tb-pad-y: 6px;
}

.topbar .site-menubar {
  flex: 0 1 auto;
}

.brand img {
  display: block;
  width: 22px;
  height: 22px;
}

.topbar-rule {
  flex: none;
  width: 1px;
  height: 22px;
  margin: 0 var(--space-3);
  background: var(--tb-border, var(--border));
}

.source-switch,
.view-switch {
  flex: none;
  display: flex;
  align-items: center;
}

/* Selectors retain PUDL styling from the palette, matching Theme Studio. */

@media (max-width: 560px) {
  .topbar-rule {
    margin-right: 8px;
  }
}

/* === The desktop ==========================================================
   PUDL's master-detail layout with the windows as its detail pane, after
   PUDL's article reader and parkscomputing.com. pudl.css makes the layout
   fill the viewport (body:has(> .md-layout)). */
body.desktop .md-layout {
  --md-sidebar-w: 380px;
}

/* The list's bar: search or the finder's link box, the list's tabs, and
   the list's name, wrapping on a narrow screen. */
.site-listbar {
  padding-inline: var(--yv-edge-inset);
  flex-wrap: wrap;
  row-gap: var(--space-2);
}

.site-listbar .md-filter-group .md-filter {
  width: 220px;
}

.site-listbar .find-form {
  flex: 1 1 auto;
  max-width: 720px;
}

.site-listbar .find-form .md-filter {
  width: 100%;
}

.pin-count {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-muted);
  border-bottom: 1px solid var(--surface-alt);
}

.reader-stage {
  padding: 0;
  overflow: hidden;
}

.reader-col {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.reader-col .md-back {
  margin: 12px 16px 4px;
  align-self: flex-start;
}

.reader-col .win-host {
  flex: 1;
  min-height: 0;
  position: relative;
}

.reader-empty {
  height: 100%;
  overflow-y: auto;
  padding: var(--space-6);
}

.reader-empty .card {
  max-width: 560px;
  margin: 10vh auto 0;
}

.welcome-card h1 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-md);
  font-weight: 700;
}

.welcome-card p {
  margin: 0 0 14px;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.welcome-card p:last-child {
  margin-bottom: 0;
}

/* Hiding the story list gives the windows the whole width. The f key and
   the View menu toggle it, and the choice is applied before the first
   paint. */


/* === The window bar =======================================================
   At the foot of the window area, on its own surface below the windows, so
   a window never covers it: PUDL's dock of open windows, then
   minimise-all or restore-all and close-all. */
.win-bar {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 6px 12px;
  background: var(--surface-alt);
  border-top: 1px solid var(--border);
  --ctl-h: 30px;
}

.win-bar-dock {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  flex-wrap: nowrap;
}

.win-bar .icon-btn {
  flex: none;
}

.win-bar .icon-btn svg {
  width: 15px;
  height: 15px;
}

.win-bar .icon-btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
}

/* Minimise-all and restore-all share one place: restore shows only when
   it is the useful one, every window minimised; otherwise minimise-all
   shows, disabled when nothing is open. PUDL keeps both links'
   aria-disabled current. */
.win-bar .restore-all[aria-disabled="true"],
.win-bar:has(.min-all:not([aria-disabled="true"])) .restore-all {
  display: none;
}

.win-bar:has(.min-all[aria-disabled="true"]):has(.restore-all:not([aria-disabled="true"])) .min-all {
  display: none;
}

@media (max-width: 560px) {
  .win-bar {
    padding: 6px 8px;
  }
}

/* === The story list =======================================================
   PUDL's list rows, with a pin before the link and a hide button after
   it. A story's title wraps rather than ending in an ellipsis, because a
   headline cut short is no use for choosing what to read. */
.story-row .md-item {
  white-space: normal;
  padding-inline: 6px;
  padding-inline-start: var(--yv-edge-inset);
  line-height: 1.35;
  padding-block: 6px;
}

.story-row .md-item .md-meta {
  margin-top: 2px;
}

.story-pin,
.story-hide {
  flex: none;
  align-self: flex-start;
  width: 24px;
  height: 24px;
  margin: 5px 6px 0;
  padding: 0;
}

.story-pin::before,
.story-hide::before {
  content: "";
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: var(--yv-glyph) center / contain no-repeat;
  mask: var(--yv-glyph) center / contain no-repeat;
}

.story-pin { --yv-glyph: var(--yv-glyph-pin); }
/* A pinned story's pin latches, pressed in, and its glyph fills. */
.story-row .story-pin[aria-pressed="true"] {
  --yv-glyph: var(--yv-glyph-pinned);
  color: var(--accent);
  background: var(--raise-active-bg);
  box-shadow: var(--raise-active-shadow);
}
.story-hide { --yv-glyph: var(--glyph-close); width: 28px; height: 28px; margin: 6px; color: var(--text); }
.story-row-actions { display: flex; flex-direction: column; flex: none; gap: 8px; align-self: flex-start; margin: 6px; }
.story-row-actions .icon-btn { width: 28px; height: 28px; margin: 0; padding: 0; }
.story-pin, .story-row-actions .icon-btn { color: var(--text); }

.source-icon { width: 16px; height: 16px; flex: none; object-fit: contain; }
.feed-refresh::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--yv-glyph-refresh) center / contain no-repeat; mask: var(--yv-glyph-refresh) center / contain no-repeat; }
.feed-refresh-status { font-size: var(--text-sm); }
.source-glyph { display: inline-block; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--source-glyph) center / contain no-repeat; mask: var(--source-glyph) center / contain no-repeat; }
.source-glyph-pin { --source-glyph: var(--yv-glyph-pin); }
.source-glyph-find { --source-glyph: var(--glyph-search); }
.reader-site { display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.win-tab[data-reader-source]:not(.minimized)::before { display: none; }
.reader-tab-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.source-seg a { display: inline-flex; align-items: center; gap: 6px; }
.source-switch .menu-btn-label::before,
.source-switch .seg-choice[href^="/hn/"]::before,
.source-switch .seg-choice[href^="/lobsters/"]::before {
  content: ""; display: inline-block; width: 16px; height: 16px;
  margin-inline-end: 6px; vertical-align: middle;
  background-size: contain; background-repeat: no-repeat;
  background-color: transparent; -webkit-mask: none; mask: none;
}
.source-switch .seg-choice::before { visibility: visible; }
.source-switch .seg-choice[aria-current]:not([aria-current="false"])::after {
  content: ""; flex: none; width: 12px; height: 12px; margin-inline-start: auto;
  background: currentColor; -webkit-mask: var(--glyph-tick) center / contain no-repeat; mask: var(--glyph-tick) center / contain no-repeat;
}
.source-switch .seg-choice[href^="/pinned/"]::before,
.source-switch .seg-choice[href="/find"]::before {
  content: ""; display: inline-block; width: 16px; height: 16px;
  margin-inline-end: 6px; vertical-align: middle;
}
.source-switch:has(.source-seg [data-source="pinned"][aria-current]) .menu-btn-label::before,
.source-switch .seg-choice[href^="/pinned/"]::before {
  background: currentColor; -webkit-mask: var(--yv-glyph-pin) center / contain no-repeat; mask: var(--yv-glyph-pin) center / contain no-repeat;
}
.source-switch:has(.source-seg [data-source="find"][aria-current]) .menu-btn-label::before,
.source-switch .seg-choice[href="/find"]::before {
  background: currentColor; -webkit-mask: var(--glyph-search) center / contain no-repeat; mask: var(--glyph-search) center / contain no-repeat;
}
.source-switch:has(.source-seg [data-source="hn"][aria-current]) .menu-btn-label::before,
.source-switch .seg-choice[href^="/hn/"]::before { background-image: url('/static/hn-favicon.svg'); }
.source-switch:has(.source-seg [data-source="lobsters"][aria-current]) .menu-btn-label::before,
.source-switch .seg-choice[href^="/lobsters/"]::before { background-image: url('/static/lobsters-favicon.png'); }
.source-switch:not(:has(.source-seg [data-source][aria-current])) .menu-btn-label::before { display: none; }


/* The keyboard's place in the list (j and k), marked at the row's start
   so it stays distinct from PUDL's accent edge at the end, which marks the
   story whose window is in front. */
.story-row.focused {
  box-shadow: inset 3px 0 0 var(--text-muted);
}

/* Read and unread differ three ways, so neither colour nor weight alone
   carries it: an unread title is in the full text colour at weight 600; a
   read one is muted at the normal weight, behind a tick. The row of the
   window in front keeps PUDL's own bold and accent edge, tick and all. */
.story-row .md-item {
  font-weight: 600;
}

.story-row.visited .md-item {
  font-weight: 400;
}

.story-row.visited:not(:has(> [aria-current]:not([aria-current="false"]))) .md-item {
  color: var(--text-muted);
}

.story-row.visited .md-item::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-inline-end: 5px;
  vertical-align: -1px;
  background: var(--text-muted);
  -webkit-mask: var(--glyph-tick) center / contain no-repeat;
  mask: var(--glyph-tick) center / contain no-repeat;
}

.story-row:has(> [aria-current]:not([aria-current="false"])) .md-item {
  font-weight: 700;
}

/* The metadata keeps its own weight whatever the title's. */
.story-row .md-item .md-meta {
  font-weight: 500;
}

.story-row.dismissed,
.story-row.filtered {
  display: none;
}

.story-hidden {
  padding: var(--space-3);
  text-align: center;
}

.story-pager {
  justify-content: center;
  padding: var(--space-3);
}

.list-notice {
  margin: var(--space-3);
}

.list-empty {
  padding-block: var(--space-5);
}

.end-of-list {
  padding: var(--space-4);
  text-align: center;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* === A story ==============================================================
   The article above the discussion, each with a bar of its own, and PUDL's
   splitter between them. The window's body gives the story its whole box,
   and each pane scrolls inside it. */
.story-win-body {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.story {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
}

.story-split {
  flex: 1;
  min-height: 0;
}

.story-split > .story-pane {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.story-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 34px;
  padding: 3px var(--space-3);
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-xs);
}

.story-discussion > .story-bar {
  border-top: 1px solid var(--border);
}

.story-bar-label {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.story-bar-meta {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text-muted);
}

.story-bar-spacer {
  flex: 1;
}

.story-bar a {
  flex: none;
  white-space: nowrap;
}

/* The poster's name opens their profile. It keeps the colour of the bar's
   text around it and is marked as a link by its underline, as a
   commenter's name is. */
.story-poster {
  color: inherit;
}

.story-poster:hover {
  color: var(--text);
}

.story-bar .icon-btn {
  width: 26px;
  height: 26px;
  padding: 0;
}

.story-refresh::before {
  content: "";
  width: 13px;
  height: 13px;
  background: currentColor;
  -webkit-mask: var(--yv-glyph-refresh) center / contain no-repeat;
  mask: var(--yv-glyph-refresh) center / contain no-repeat;
}

.story-refresh[aria-busy="true"]::before {
  animation: pudl-spin .8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .story-refresh[aria-busy="true"]::before {
    animation: none;
  }
}

.story-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.story-scroll:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--focus-ring);
}

.story-note {
  --glyph-size: 28px;
  padding: var(--space-5) var(--space-4);
}

.story > .story-note {
  margin: auto;
}

/* A story's own page: the top bar, the story's title, and the story
   filling the rest of the viewport. */
body.story-page {
  height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.story-page-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.story-page-head {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.story-page-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--text-lg);
}

.story-page-back {
  flex: none;
  font-size: var(--text-sm);
}

/* === Applets ==============================================================
   The replies watcher, the profiles and the hiring filter, in a window or
   on a page of their own. A window's body scrolls as PUDL draws it, except
   the hiring filter's, whose bar stays put above its scrolling posts. */
.app-win-body {
  padding: var(--space-3) var(--space-4);
}

.app-win-hiring .app-win-body {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body.app-page {
  height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.app-page-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.app-page-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
}

.app-page-body > .app {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
}

.app-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  margin-bottom: var(--space-3);
}

.profile-name {
  margin: 0;
  font-size: var(--text-xl);
}

.app-facts,
.app-note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.app-site-link {
  margin-inline-start: auto;
  font-size: var(--text-sm);
}

.profile-roles {
  flex-basis: 100%;
  margin: 0;
}

.profile-about {
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  background: var(--surface-alt);
  border-radius: var(--radius-xs);
}

.profile .md-section-label {
  padding-inline: 0;
}

.profile .md-item .md-meta + .md-meta {
  margin-top: 2px;
}

/* The lookup bar, above a profile and alone in the lookup: the site, then
   the name with its button. */
.lookup-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.lookup-site {
  flex: none;
  width: auto;
}

.lookup-name {
  flex: 1 1 200px;
  max-width: 360px;
}

.lookup-name .md-filter {
  width: 100%;
}

.app-page-body > .lookup-bar,
.app-page-body > .lookup-note {
  width: 100%;
  max-width: 820px;
  margin-inline: auto;
}

.replies-user {
  display: flex;
  width: 100%;
  max-width: 420px;
  margin-bottom: var(--space-2);
}

.replies-user .md-filter {
  flex: 1;
  width: auto;
}

.replies-status {
  min-height: 1.5em;
  margin-bottom: var(--space-2);
}

.replies,
.jobs {
  list-style: none;
  margin: 0;
  padding: 0;
}

.reply,
.job {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--surface-alt);
}

.reply:last-child,
.job:last-child {
  border-bottom: 0;
}

.reply-head {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}

/* A reply newer than the reader last marked read carries the word "new"
   as well as the accent edge, as a new comment in a discussion does. */
.reply-new-badge {
  display: none;
  color: var(--accent);
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.reply.reply-new {
  box-shadow: inset 3px 0 0 var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  padding-inline: var(--space-2);
}

.reply.reply-new .reply-new-badge {
  display: inline;
}

.reply-parent {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.reply-actions {
  display: flex;
  gap: var(--space-4);
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
}

.hiring-app {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.hiring-bar {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
}

.hiring-thread {
  width: auto;
  max-width: 100%;
}

.hiring-filter {
  flex: 1 1 260px;
  height: 32px;
}

.hiring-filter .md-filter {
  width: 100%;
}

.hiring-help {
  flex: none;
  padding: var(--space-2) var(--space-4) 0;
}

.hiring-posts {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 var(--space-4) var(--space-4);
}

.hiring-posts:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--focus-ring);
}

.app-page-body > .hiring-app {
  max-width: 980px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}

a.comment-author {
  color: var(--text);
}

/* === Reader-mode prose ==================================================== */
.article-content {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-5) var(--space-6);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--text);
  overflow-wrap: break-word;
}

.article-content h1 {
  font-size: var(--text-2xl);
  margin: 0 0 var(--space-2);
}

.article-content h2 { font-size: var(--text-xl); margin: var(--space-5) 0 var(--space-2); }
.article-content h3 { font-size: var(--text-lg); margin: var(--space-4) 0 var(--space-2); }
.article-content p { margin: 0 0 var(--space-4); }

.article-content img,
.article-content video,
.article-content iframe {
  max-width: 100%;
  height: auto;
  display: block;
  margin: var(--space-4) auto;
}

.article-content figure { margin: var(--space-5) 0; }

.article-content figcaption {
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-align: center;
  margin-top: var(--space-2);
}

.article-content blockquote {
  margin: var(--space-4) 0;
  padding: var(--space-1) var(--space-4);
  border-inline-start: 3px solid var(--border);
  color: var(--text-muted);
}

.article-content pre,
.comment-text pre {
  background: var(--surface-alt);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-xs);
  overflow-x: auto;
  font: var(--text-sm)/1.45 var(--mono);
}

.article-content code,
.comment-text code {
  font-family: var(--mono);
  font-size: .9em;
}

.article-content :not(pre) > code {
  background: var(--surface-alt);
  padding: .05em .3em;
  border-radius: var(--radius-xs);
}

.article-content ul,
.article-content ol { padding-inline-start: var(--space-5); margin: 0 0 var(--space-4); }
.article-content li { margin-bottom: var(--space-1); }

.article-content hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-6) 0;
}

.article-content .byline {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-5);
}

/* === The discussion ======================================================= */
.discussion-content {
  padding: var(--space-2) var(--space-3) var(--space-4);
}

.thread {
  list-style: none;
  padding: 0;
  margin: 0;
}

.comment {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--surface-alt);
}

.comment:last-child { border-bottom: 0; }

.comment-header {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-1);
  cursor: pointer;
  user-select: none;
}

.comment-toggle {
  flex: none;
  width: 10px;
  height: 10px;
  align-self: center;
  background: var(--text-muted);
  -webkit-mask: var(--glyph-sort-down) center / contain no-repeat;
  mask: var(--glyph-sort-down) center / contain no-repeat;
}

.comment.collapsed > .comment-header > .comment-toggle {
  transform: rotate(-90deg);
}

.comment-toggle:dir(rtl) { scale: -1 1; }

.comment-collapsed-count {
  display: none;
  font-style: italic;
}

.comment.collapsed > .comment-header > .comment-collapsed-count { display: inline; }

.comment.collapsed > .comment-text,
.comment.collapsed > .thread { display: none; }

/* A comment newer than the reader's last visit to the story carries the
   word "new" as well as the accent edge, so the colour is never the only
   sign. */
.comment-new {
  box-shadow: inset 3px 0 0 var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  padding-inline-start: var(--space-2);
}

.comment-new-badge {
  display: none;
  color: var(--accent);
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.comment-new > .comment-header > .comment-new-badge { display: inline; }

/* The comment n and N move to, which c collapses. */
.comment.focused {
  box-shadow: inset 3px 0 0 var(--text);
  background: var(--surface-alt);
  padding-inline-start: var(--space-2);
}

.comment-author { font-weight: 600; color: var(--text); }

.comment-link {
  margin-inline-start: auto;
  color: var(--text-muted);
  text-decoration: none;
}

.comment-link:hover { color: var(--accent); }

.comment-text {
  font-size: var(--text-sm);
  line-height: 1.55;
  overflow-wrap: break-word;
}

.comment-text p { margin: 0 0 .6em; }
.comment-text p:last-child { margin-bottom: 0; }

.comment .thread {
  padding-inline-start: var(--space-4);
  margin-top: var(--space-2);
  border-inline-start: 2px solid var(--surface-alt);
}

/* === Dialogs ============================================================== */
.wide-dialog {
  max-width: 600px;
}

/* The help is long, so it takes most of the screen's width rather than a
   fixed one, short of the margin PUDL leaves around a dialog. */
#help-dialog {
  width: 75vw;
  max-width: calc(100vw - 2 * var(--space-5));
}

@media (max-width: 640px) {
  #help-dialog {
    width: 100%;
  }
}

#help-dialog-title:focus {
  outline: none;
}

.help-body section + section {
  margin-top: var(--space-4);
}

.help-body h4 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.help-body p {
  margin: 0 0 var(--space-2);
  color: var(--text);
}

.keys {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-1) var(--space-4);
  margin: 0;
  color: var(--text);
  align-items: baseline;
}

.keys dt { font-weight: 600; }
.keys dd { margin: 0; }

kbd {
  font: var(--text-xs) var(--mono);
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: var(--radius-xs);
  background: var(--surface-alt);
  color: var(--text);
}

.dialog-body code {
  font-family: var(--mono);
  font-size: .9em;
}

.filters-list {
  list-style: none;
  margin: var(--space-3) 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  max-height: 40vh;
  overflow-y: auto;
}

.filters-list:empty {
  display: none;
}

.filters-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
  border-bottom: 1px solid var(--surface-alt);
  color: var(--text);
}

.filters-list-item:last-child { border-bottom: 0; }

.filters-list-name {
  font-family: var(--mono);
  font-size: var(--text-sm);
}

.filters-list-remove {
  width: 26px;
  height: 26px;
  padding: 0;
}

.filters-list-remove::before {
  content: "";
  width: 11px;
  height: 11px;
  background: currentColor;
  -webkit-mask: var(--glyph-close) center / contain no-repeat;
  mask: var(--glyph-close) center / contain no-repeat;
}

.filters-empty {
  font-style: italic;
}

.filters-add-row {
  display: flex;
  gap: var(--space-2);
}

.filters-add-row .form-input {
  flex: 1;
  min-width: 0;
}

/* Classic feeds use the full page without a window workspace. */
.classic-list .md-sidebar { width: 100%; max-width: none; flex: 1; display: block; }
.classic-list .md-layout { --md-sidebar-w: 100%; }


/* Browsing-view glyphs share the selector text color in both themes. */
:root {
  --yv-glyph-windowed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M5 4V1.5h9.5V11H12'/%3E%3Crect x='1.5' y='4.5' width='10' height='10' rx='1'/%3E%3Cpath d='M2 7.5h9'/%3E%3C/svg%3E");
  --yv-glyph-classic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3'%3E%3Crect x='1.5' y='2.5' width='13' height='11' rx='1'/%3E%3Cpath d='M2 5.5h12'/%3E%3C/svg%3E");
}
.view-seg button { display: inline-flex; align-items: center; gap: 6px; }
.view-seg button[form="view-window-form"],
.view-switch:has(.view-seg [form="view-window-form"][aria-pressed="true"]) .menu-btn-label,
.view-switch .seg-choice:first-child { --view-glyph: var(--yv-glyph-windowed); }
.view-seg button[form="view-classic-form"],
.view-switch:has(.view-seg [form="view-classic-form"][aria-pressed="true"]) .menu-btn-label,
.view-switch .seg-choice:nth-child(2) { --view-glyph: var(--yv-glyph-classic); }
.view-seg button::before,
.view-switch .menu-btn-label::before,
.view-switch .seg-choice::before {
  content: ""; display: inline-block; width: 16px; height: 16px; flex: none;
  vertical-align: middle; visibility: visible; background: currentColor;
  -webkit-mask: var(--view-glyph) center / contain no-repeat;
  mask: var(--view-glyph) center / contain no-repeat;
}
.view-switch .menu-btn-label::before { margin-inline-end: 6px; }
.view-switch .seg-choice[aria-pressed="true"]::after {
  content: ""; flex: none; width: 12px; height: 12px; margin-inline-start: auto;
  background: currentColor; -webkit-mask: var(--glyph-tick) center / contain no-repeat;
  mask: var(--glyph-tick) center / contain no-repeat;
}

.settings-panel { max-width: 640px; margin-inline: auto; padding: var(--space-4); }
.settings-intro, .settings-hint { color: var(--text-muted); }
.settings-section { margin-block: var(--space-4); }
.settings-section h2 { font-size: var(--text-sm); margin-block: 0 var(--space-3); }
.settings-section fieldset { border: 0; padding: 0; margin: var(--space-3) 0; min-width: 0; }
.settings-section .seg { margin-top: var(--space-2); max-width: 100%; flex-wrap: wrap; }
.settings-hint { font-size: var(--text-xs); margin-block: var(--space-2); }
.settings-status { min-height: 1.5em; font-size: var(--text-sm); }

/* Responsive reader presentation. The controls remain available through menus
   when narrow windows put content ahead of secondary window chrome. */
.story-win, .story-page-main { container-type: inline-size; container-name: reader; }
.reader-toolbar { display: flex; flex: none; align-items: center; gap: 8px; padding: 6px 10px; background: var(--surface-alt); border-bottom: 1px solid var(--border); }
.reader-toolbar[hidden] { display: none; }
.reader-panes { flex: none; box-sizing: border-box; height: 30px; align-items: center; }
.reader-toolbar .story-next { margin-left: auto; white-space: nowrap; align-self: stretch; }
.story-next[aria-disabled="true"] { opacity: .45; cursor: default; }
.story[data-reader-pane] .story-bar-label { display: none; }
.story-split:not(.split) { display: flex; flex-direction: column; }
.story-split:not(.split) > .story-pane:not([hidden]) { flex: 1; min-height: 0; }
.story-split > .story-pane[hidden], .story-split > .split-handle[hidden] { display: none; }
.article-info, .discussion-info { background: transparent; padding: 12px 16px; }
.article-info { border: 0; }
.discussion-info { flex-wrap: wrap; }
.discussion-info .story-bar-meta { white-space: normal; overflow: visible; }
.story-scroll { overscroll-behavior: contain; }
.win-bar { padding-bottom: max(6px, env(safe-area-inset-bottom)); }
.taskbar-scroll { font-size: 21px; }
.taskbar-scroll[hidden] { display: none; }
.win-bar-dock .win-tab { flex: 0 0 auto; max-width: 250px; }
body.desktop, body.story-page { height: 100dvh; }
@container reader (max-width: 600px) {
  .reader-toolbar { padding: 6px; gap: 6px; }
  .reader-panes { flex: 1; min-width: 0; display: flex; }
  .reader-panes button { flex: 1; }
  .article-info, .discussion-info { padding: 10px 14px; }
  .discussion-info .story-bar-meta { flex-basis: 100%; }
  .discussion-info .story-bar-spacer { display: none; }
  .discussion-info > a:last-child { margin-left: auto; }
  .story-sort button { min-height: 36px; }
  .win-head:has([data-win-action="menu"]) .win-chrome { display: none; }
  .win-head [data-win-action="menu"] { order: 5; margin-left: auto; }
  .win-title { font-size: var(--text-sm); }
  .story-page-title { display: none; }
  .story-page-head { gap: 16px; flex-wrap: wrap; }
}
.story-split { --split-target-size: 18px; }
.story-split > .split-handle { background: var(--surface-alt); }
@media (pointer: coarse) {
  .story-sort button { min-height: 44px; }
  .article-info .icon-btn { width: 44px; height: 44px; }
}
@media (max-width: 640px) {
  .win-head { gap: 6px; }
  .win-head:has([data-win-action="menu"]) .win-chrome { display: none; }
  .win-head [data-win-action="menu"] { order: 5; width: 40px; height: 40px; }
  .story-win .win-head [data-win-action="menu"]::before {
    width: 20px; height: 20px;
    --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m4 7 6 6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  .win-bar { padding-inline: 6px; gap: 4px; }
  .win-bar-dock .win-tab { max-width: 175px; min-height: 40px; }
  .win-bar .icon-btn { width: 36px; height: 40px; }
  .win-bar-dock .reader-site .visually-hidden { display: none; }
  .site-listbar .md-filter-group { flex: 1; min-width: 0; }
  .site-listbar .md-filter { width: 100%; min-width: 0; }
  .site-listbar .feed-refresh { flex: none; }
  .site-listbar .md-tabs { flex-basis: 100%; }
}
@media (max-width: 420px) {
  .topbar-rule { display: none; }
  .win-bar-dock .win-tab { max-width: 145px; }
}
@media print {
  .reader-toolbar, .win-bar { display: none; }
  .story-split > .story-pane[hidden] { display: block; }
}

.sidebar-toggle .sidebar-glyph-pane { fill: currentColor; }
.sidebar-toggle[aria-expanded="false"] .sidebar-glyph-pane { fill: none; }

@media (max-width: 640px) {
  :root { --yv-edge-inset: 8px; }
}

/* PUDL owns persistent divider geometry and interaction. */
.md-layout[data-md-persistent] > .md-body > .md-resize { background: var(--surface-alt); }

.stories-button { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.stories-button svg { width: 16px; height: 16px; flex: none; }
/* Keep the migration action within the toast on narrow screens. */
.migration-toast-action { display: block; width: fit-content; margin-top: var(--space-3); }