/* Popchat Dispatch — editorial layout and resolved-theme styling.
   data-theme is the EFFECTIVE theme; the select's "auto" preference is
   resolved by render.js. No light-class dependency or visual theme inversion.
   Photos remain publisher-provided media: no CSS substitute imagery. */

html[data-theme="dark"],
html[data-theme="dark"] body {
  color-scheme: dark;
  --bg: #121416;
  --bg-2: #191c1f;
  --surface: #1e2225;
  --text: #eeeae1;
  --muted: #a9a9a3;
  --accent: #ff795c;
  --accent-2: #f3a184;
  --rule: #3b3e3f;
  --rule-strong: #757772;
  --field-bg: #191c1f;
  --hover-bg: #252a2d;
  --selection-bg: #703a2b;
  --error: #ffad98;
  --shadow: 0 20px 90px #0009;
  --radius: 0px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: Georgia, "Times New Roman", serif;
  background-color: var(--bg);
  color: var(--text);
}

html[data-theme="light"],
html[data-theme="light"] body {
  color-scheme: light;
  --bg: #f5f3ed;
  --bg-2: #eeeae1;
  --surface: #fbf9f3;
  --text: #191b1d;
  --muted: #62625d;
  --accent: #b83720;
  --accent-2: #96301e;
  --rule: #d2cdc1;
  --rule-strong: #838179;
  --field-bg: #fbf9f3;
  --hover-bg: #e8e3d8;
  --selection-bg: #f3cbbd;
  --error: #a72d1e;
  --shadow: 0 20px 90px #191b1d33;
  --radius: 0px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: Georgia, "Times New Roman", serif;
  background-color: var(--bg);
  color: var(--text);
}

:root {
  --bg: #121416;
  --bg-2: #191c1f;
  --surface: #1e2225;
  --text: #eeeae1;
  --muted: #a9a9a3;
  --accent: #ff795c;
  --accent-2: #f3a184;
  --rule: #3b3e3f;
  --rule-strong: #757772;
  --field-bg: #191c1f;
  --hover-bg: #252a2d;
  --selection-bg: #703a2b;
  --error: #ffad98;
  --shadow: 0 20px 90px #0009;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: Georgia, "Times New Roman", serif;
  --radius: 0px;
  color-scheme: dark;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 0;
  scroll-padding-top: 24px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 var(--font);
}

[hidden] {
  display: none !important;
}

::selection {
  background: var(--selection-bg);
  color: var(--text);
}

a {
  color: inherit;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 0.19em;
}

a:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

button,
input,
select,
textarea {
  max-width: 100%;
  color: var(--text);
  font: inherit;
  accent-color: var(--accent);
}

html[data-theme] :is(button, .btn, input, select, textarea) {
  border: 1px solid var(--rule);
  border-radius: 0;
  box-shadow: none;
  background: var(--field-bg);
  color: var(--text);
}

button,
.btn,
select {
  min-height: 42px;
  padding: 9px 13px;
}

button,
.btn {
  cursor: pointer;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease;
}

html[data-theme] :is(button, .btn):hover {
  background: var(--hover-bg);
  border-color: var(--rule-strong);
  color: var(--text);
}

html[data-theme] :is(button, .btn).primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--bg);
}

html[data-theme] :is(button, .btn).ghost {
  background: transparent;
  color: var(--text);
}

html[data-theme] :is(button, .btn).danger {
  color: var(--error);
}

button:disabled,
input:disabled,
select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

input:not([type="checkbox"], [type="radio"]),
textarea {
  min-width: 0;
  min-height: 42px;
  padding: 9px 12px;
}

input::placeholder,
textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}

input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 2px 0;
}

label {
  color: var(--text);
}

img {
  display: block;
  max-width: 100%;
}

figure {
  margin: 0;
  min-width: 0;
}

figcaption,
.image-credit,
.photo-credit {
  margin-top: 6px;
  color: var(--muted);
  font: 11px/1.45 var(--font);
}

h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
}

.app,
.page,
.site-shell {
  width: calc(100% - 64px);
  max-width: 1480px;
  min-width: 0;
  margin-inline: auto;
  padding: 0 0 48px;
  background: transparent;
  color: var(--text);
}

/* The rail participates in the grid. It is never fixed or absolutely
   positioned, so it cannot cover the reading column at intermediate sizes. */
:where(
  .layout,
  .editorial-layout,
  .page-layout,
  .content-layout,
  .news-layout,
  .main-layout,
  .reading-layout,
  .content-grid,
  .main-grid
):has(#feed),
:where(body *) :is(main, section, div):has(> aside):has(#feed) {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  min-width: 0;
}

:where(main, section, .feed-column, .main-column, .content, .reading-column) {
  min-width: 0;
}

#masthead {
  padding: 24px 0 20px;
  border-bottom: 3px double var(--rule-strong);
  background: transparent;
  color: var(--text);
}

#masthead h1,
#masthead .masthead-title,
#masthead .brand {
  margin: 0;
  color: var(--text);
  font-family: var(--display);
  font-size: clamp(34px, 5.3vw, 74px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

#masthead h1 a,
#masthead .brand {
  text-decoration: none;
}

#masthead p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.025em;
}

.masthead-top,
.masthead-meta,
.edition-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 20px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.toolbar,
.filter-bar,
.controls,
#toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  margin: 0 0 26px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
}

#masthead + :is(.toolbar, .filter-bar, .controls) {
  margin-top: 0;
}

.toolbar .field,
.filter-bar .field,
.controls .field {
  min-width: 0;
  margin: 0;
}

.field {
  display: grid;
  gap: 6px;
}

.field > label,
.toolbar label,
.filter-bar label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

#search {
  width: 100%;
  min-width: 120px;
}

:where(.toolbar, .filter-bar, .controls) :is(.search-field, .search-wrap),
:where(.toolbar, .filter-bar, .controls) > .field:has(#search),
:where(.toolbar, .filter-bar, .controls) > label:has(#search) {
  flex: 1 1 250px;
}

:where(.toolbar, .filter-bar, .controls) > #search {
  flex: 1 1 250px;
  width: auto;
}

#theme {
  min-width: 104px;
}

#topic,
#sort {
  max-width: 100%;
}

#status,
.status,
#seen-count,
.muted {
  color: var(--muted);
}

#status {
  margin: 10px 0 20px;
  font-size: 12px;
  line-height: 1.6;
}

#seen-count {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

aside:has(#recent-list),
.recent-rail,
.sidebar:has(#recent-list),
details:has(> #recent-list) {
  position: sticky;
  top: 24px;
  align-self: start;
  min-width: 0;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--rule-strong) transparent;
  background: var(--bg);
  color: var(--text);
}

aside:has(#recent-list) {
  padding-right: 20px;
  border-right: 1px solid var(--rule);
}

aside h2,
.recent-rail h2,
details:has(#recent-list) > summary {
  margin: 0;
  padding: 0 0 12px;
  border-bottom: 2px solid var(--rule-strong);
  font: 700 11px/1.4 var(--font);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

summary {
  cursor: pointer;
  color: var(--text);
}

#recent-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.recent-item {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--text);
  font: 16px/1.32 var(--display);
  overflow-wrap: anywhere;
}

.recent-item a {
  display: block;
  text-decoration: none;
}

.recent-item small,
.recent-item time,
.recent-item .source,
.recent-item .meta {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font: 10px/1.5 var(--font);
  letter-spacing: 0.035em;
}

/* Explicit feed geometry wins over generic UI-library .grid/.card styles. */
#feed {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 30px 28px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  align-items: start;
  background: transparent;
}

#feed > .story {
  grid-column: 1 / -1;
}

.story,
#feed .story.card {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 0 0 26px;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  box-shadow: none;
  overflow: visible;
}

#feed > .story.pair {
  grid-column: span 6;
}

#feed > .story.lead,
#feed > .story.compact {
  grid-column: 1 / -1;
}

.story :is(h2, h3, .headline, .story-title) {
  margin: 7px 0 12px;
  color: var(--text);
  font-family: var(--display);
  font-size: clamp(22px, 2.1vw, 28px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

.story.lead :is(h2, h3, .headline, .story-title) {
  font-size: clamp(28px, 3.3vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.story :is(h2, h3, .headline, .story-title) a {
  color: inherit;
  text-decoration: none;
}

.story :is(h2, h3, .headline, .story-title) a:hover {
  color: var(--accent);
}

.story img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  background: var(--bg-2);
  border-radius: 0;
}

.story > img,
.story > figure,
.story > .story-image,
.story > .story-media,
.story > .photo,
.story > a:has(> img) {
  display: block;
  margin: 0 0 16px;
}

.story figure a {
  display: block;
}

.kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 9px;
  margin: 0 0 8px;
  color: var(--accent);
  font: 700 10px/1.5 var(--font);
  letter-spacing: 0.095em;
  text-transform: uppercase;
}

.kicker time,
.kicker .date,
.kicker .category {
  color: var(--muted);
  font-weight: 500;
}

.story .meta,
.story .byline,
.story .story-meta {
  margin: 9px 0;
  color: var(--muted);
  font: 11px/1.6 var(--font);
}

.abstract {
  max-width: 72ch;
  margin: 12px 0 15px;
  color: var(--text);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.abstract p {
  margin: 0 0 0.85em;
}

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

details.abstract {
  margin-top: 12px;
}

.abstract > summary,
.story details > summary {
  width: fit-content;
  padding: 5px 0;
  color: var(--muted);
  font: 600 12px/1.5 var(--font);
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 3px;
}

.abstract > summary:hover,
.story details > summary:hover {
  color: var(--accent);
}

.abstract[open] > summary,
.story details[open] > summary {
  margin-bottom: 9px;
}

.story-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 16px;
  color: var(--muted);
  font: 600 11px/1.5 var(--font);
}

.story-links a {
  padding-block: 5px;
  color: var(--text);
  text-decoration: underline;
}

.story-links a:hover {
  color: var(--accent);
}

html[data-theme] .story-links button,
html[data-theme] .mark-read {
  min-height: 32px;
  padding: 5px 8px;
  border-color: var(--rule);
  background: transparent;
  color: var(--muted);
  font-size: 11px;
}

.story.seen .kicker::after {
  content: "Read";
  padding: 1px 5px;
  border: 1px solid var(--rule);
  color: var(--muted);
  font: 500 9px/1.5 var(--font);
  letter-spacing: 0.04em;
}

.story.seen :is(h2, h3, .headline, .story-title) {
  color: var(--muted);
}

.story.seen img {
  opacity: 0.8;
}

.story.seen .mark-read {
  border-style: dashed;
}

/* Only use split layouts where the media is a direct story child.
   Text-only and differently nested renderings retain normal document flow. */
@media (min-width: 901px) {
  .story.lead:has(> figure),
  .story.lead:has(> .story-media),
  .story.lead:has(> a > img) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    column-gap: 26px;
    align-items: start;
  }

  .story.lead:has(> figure) > *,
  .story.lead:has(> .story-media) > *,
  .story.lead:has(> a > img) > * {
    grid-column: 1;
  }

  .story.lead > figure,
  .story.lead > .story-media,
  .story.lead > a:has(> img) {
    grid-column: 2 !important;
    grid-row: 1 / span 8;
    margin-bottom: 0;
  }

  .story.compact:has(> figure),
  .story.compact:has(> .story-media),
  .story.compact:has(> a > img) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 30%);
    column-gap: 24px;
    align-items: start;
  }

  .story.compact:has(> figure) > *,
  .story.compact:has(> .story-media) > *,
  .story.compact:has(> a > img) > * {
    grid-column: 1;
  }

  .story.compact > figure,
  .story.compact > .story-media,
  .story.compact > a:has(> img) {
    grid-column: 2 !important;
    grid-row: 1 / span 8;
    margin-bottom: 0;
  }

  details:has(#recent-list)::details-content {
    content-visibility: visible;
    height: auto;
  }

  details:has(#recent-list) > #recent-list {
    display: block;
  }

  details:has(#recent-list) > summary {
    list-style: none;
  }

  details:has(#recent-list) > summary::-webkit-details-marker {
    display: none;
  }
}

#empty {
  grid-column: 1 / -1;
  padding: 48px 20px;
  border-block: 1px solid var(--rule);
  color: var(--muted);
  text-align: center;
  font: 20px/1.5 var(--display);
}

#load-more {
  display: block;
  min-width: 180px;
  max-width: 100%;
  margin: 30px auto 12px;
  padding: 13px 24px;
  border-color: var(--rule-strong);
}

.loading,
[aria-busy="true"] {
  cursor: progress;
}

.archive-label,
.snapshot-label,
.guest-label,
.badge,
.chip {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font: 10px/1.5 var(--font);
  letter-spacing: 0.025em;
}

footer {
  margin-top: 40px;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 12px;
}

/* Native dialogs are hidden unless explicitly opened by the view.
   A closed modal must never become a third layout column or overlay. */
dialog:not([open]) {
  display: none !important;
}

html[data-theme] dialog {
  width: min(760px, calc(100% - 40px));
  max-width: calc(100% - 40px);
  max-height: min(88dvh, 1000px);
  margin: auto;
  padding: 28px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  background: var(--bg);
  color: var(--text);
  box-shadow: var(--shadow);
}

dialog::backdrop {
  background: rgb(0 0 0 / 65%);
}

dialog h2 {
  margin-bottom: 12px;
  font: 700 30px/1.15 var(--display);
  letter-spacing: -0.025em;
}

dialog h3,
dialog legend {
  margin: 22px 0 8px;
  color: var(--text);
  font: 700 12px/1.5 var(--font);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

dialog p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.dialog-header,
.modal-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--rule-strong);
}

.dialog-actions,
.modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}

#sources-list {
  margin: 18px 0 24px;
  min-width: 0;
}

#sources-list fieldset {
  min-width: 0;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

.source-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  min-width: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--text);
}

.source-row > label {
  display: flex;
  flex: 1 1 200px;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  cursor: pointer;
}

label.source-row {
  cursor: pointer;
}

.source-row > :is(.source-info, .source-details),
.source-row label > :is(span, div) {
  flex: 1;
  min-width: 0;
}

.source-row strong,
.source-row .source-name {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.source-row small,
.source-row .source-url,
.source-row .source-status {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.source-row button {
  min-height: 34px;
  padding: 6px 9px;
  font-size: 11px;
}

#source-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  padding-top: 20px;
  border-top: 2px solid var(--rule-strong);
}

#source-form > :is(h2, h3, p),
#source-form > .field:has(#source-url),
#source-form > label:has(#source-url),
#source-form > #source-url,
#source-error {
  grid-column: 1 / -1;
}

#source-form input,
#source-form select {
  width: 100%;
}

#source-form button[type="submit"] {
  align-self: end;
}

#source-error,
.error,
.source-row .error {
  color: var(--error);
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

#notes {
  width: min(700px, calc(100% - 40px));
}

#notes ul {
  padding-left: 20px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

#notes li + li {
  margin-top: 10px;
}

#notes code {
  padding: 1px 4px;
  background: var(--bg-2);
  color: var(--text);
  font-size: 0.9em;
  overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
  .app,
  .page,
  .site-shell {
    width: calc(100% - 48px);
  }

  :where(
    .layout, .editorial-layout, .page-layout, .content-layout,
    .news-layout, .main-layout, .reading-layout, .content-grid, .main-grid
  ):has(#feed),
  :where(body *) :is(main, section, div):has(> aside):has(#feed) {
    grid-template-columns: 248px minmax(0, 1fr);
    gap: 32px;
  }

  #feed {
    column-gap: 22px;
  }
}

@media (max-width: 900px) {
  :where(
    .layout, .editorial-layout, .page-layout, .content-layout,
    .news-layout, .main-layout, .reading-layout, .content-grid, .main-grid
  ):has(#feed),
  :where(body *) :is(main, section, div):has(> aside):has(#feed) {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  aside:has(#recent-list),
  .recent-rail,
  .sidebar:has(#recent-list),
  details:has(> #recent-list) {
    position: static;
    inset: auto;
    width: 100%;
    max-height: none;
    padding: 0;
    border-right: 0;
    overflow: visible;
  }

  aside:has(#recent-list) {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  details:has(#recent-list) > summary {
    padding: 12px 0;
  }

  details:has(#recent-list)[open] > #recent-list {
    max-height: 340px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .recent-item {
    padding: 10px 0;
    font-size: 16px;
  }

  #feed {
    gap: 28px 24px;
  }

  .story.lead :is(h2, h3, .headline, .story-title) {
    font-size: clamp(28px, 4.7vw, 42px);
  }
}

@media (max-width: 640px) {
  .app,
  .page,
  .site-shell {
    width: calc(100% - 32px);
    padding-bottom: 28px;
  }

  #masthead {
    padding: 20px 0 16px;
  }

  #masthead h1,
  #masthead .masthead-title,
  #masthead .brand {
    font-size: clamp(32px, 9.5vw, 52px);
    letter-spacing: -0.05em;
  }

  #masthead p {
    font-size: 12px;
  }

  .masthead-top,
  .masthead-meta,
  .edition-line {
    font-size: 10px;
  }

  .toolbar,
  .filter-bar,
  .controls,
  #toolbar {
    gap: 10px;
    margin-bottom: 20px;
    padding: 14px 0;
    align-items: end;
  }

  :where(.toolbar, .filter-bar, .controls) > .field:has(#search),
  :where(.toolbar, .filter-bar, .controls) > label:has(#search),
  :where(.toolbar, .filter-bar, .controls) :is(.search-field, .search-wrap),
  :where(.toolbar, .filter-bar, .controls) > #search {
    flex-basis: 100%;
  }

  :where(.toolbar, .filter-bar, .controls) > .field:not(:has(#search)) {
    flex: 1 1 100px;
  }

  :where(.toolbar, .filter-bar, .controls) select {
    width: 100%;
  }

  button,
  .btn,
  select,
  input:not([type="checkbox"], [type="radio"]) {
    min-height: 44px;
    font-size: 14px;
  }

  /* A 16px input font avoids focus-zoom on small-screen Safari. */
  #search,
  #source-form input,
  #source-form select {
    font-size: 16px;
  }

  #feed {
    grid-template-columns: minmax(0, 1fr);
    gap: 25px;
  }

  #feed > .story,
  #feed > .story.lead,
  #feed > .story.pair,
  #feed > .story.compact {
    display: block;
    grid-column: 1 / -1;
  }

  .story {
    padding-bottom: 24px;
  }

  .story :is(h2, h3, .headline, .story-title) {
    font-size: 25px;
    line-height: 1.14;
  }

  .story.lead :is(h2, h3, .headline, .story-title) {
    font-size: clamp(28px, 7.7vw, 36px);
  }

  .story-links {
    gap: 7px 16px;
  }

  .story-links a,
  html[data-theme] .story-links button,
  html[data-theme] .mark-read {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  #load-more {
    width: 100%;
  }

  html[data-theme] dialog {
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);
    max-height: calc(100dvh - 24px);
    padding: 20px 16px;
  }

  dialog h2 {
    font-size: 27px;
  }

  #source-form {
    grid-template-columns: minmax(0, 1fr);
  }

  #source-form > * {
    grid-column: 1;
    min-width: 0;
  }

  #source-form button[type="submit"] {
    width: 100%;
  }

  .source-row {
    gap: 10px;
  }

  #empty {
    padding: 32px 8px;
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  .story,
  .source-row,
  #masthead,
  aside:has(#recent-list) {
    border-color: CanvasText;
  }

  :focus-visible {
    outline-color: Highlight;
  }
}

@media print {
  html[data-theme],
  html[data-theme] body {
    background: white;
    color: black;
    --bg: white;
    --text: black;
    --muted: #444;
    --rule: #aaa;
  }

  .app,
  .page,
  .site-shell {
    width: 100%;
    max-width: none;
  }

  aside,
  .toolbar,
  .filter-bar,
  .controls,
  #toolbar,
  #load-more,
  dialog,
  .mark-read,
  #notes-open,
  #sources-open,
  #refresh {
    display: none !important;
  }

  :where(main, .layout, .editorial-layout, .page-layout, .news-layout):has(#feed),
  #feed {
    display: block;
  }

  .story {
    break-inside: avoid;
    margin-bottom: 24px;
  }

  .story img {
    max-width: 480px;
  }

  .story.seen img {
    opacity: 1;
  }

  a {
    color: black;
  }
}