/* Shared, single-column layout. Breakpoints change layout, never access to navigation. */
:root {
  --font-scale: 1.075;
  color-scheme: light;
  --paper: #ffffff;
  --ink: #242424;
  --muted: #686868;
  --line: #d7d7d2;
  --soft: #f6f6f3;
  --control-border: #a7a7a2;
  --button: #f8f8f6;
  --hover: #eaeae6;
  --focus: #333333;
  --primary: #30302f;
  --primary-ink: #ffffff;
  --primary-hover: #111111;
  --link: var(--ink);
  --font-ui: Arial, Helvetica, sans-serif;
  --font-reading: Georgia, 'Times New Roman', serif;
  --font-brand: Georgia, serif;
  /* Reading typography is shared by every page and follows the reader's scale. */
  --text-body: calc(14px * var(--font-scale));
  --text-control: calc(12px * var(--font-scale));
  --text-caption: calc(11px * var(--font-scale));
  --text-summary: calc(13px * var(--font-scale));
  --text-list-title: calc(18px * var(--font-scale));
  --text-section-title: calc(24px * var(--font-scale));
  --text-subheading: calc(20px * var(--font-scale));
  --page-width: 1120px;
  --article-width: 800px;
  --gutter: clamp(16px, 3vw, 28px);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #181818;
  --ink: #e5e5e5;
  --muted: #aaaaaa;
  --line: #414141;
  --soft: #222222;
  --control-border: #707070;
  --button: #292929;
  --hover: #383838;
  --focus: #eeeeee;
  --primary: #dddddd;
  --primary-ink: #181818;
  --primary-hover: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]), :root[data-theme="system"] {
  color-scheme: dark;
  --paper: #181818;
  --ink: #e5e5e5;
  --muted: #aaaaaa;
  --line: #414141;
  --soft: #222222;
  --control-border: #707070;
  --button: #292929;
  --hover: #383838;
  --focus: #eeeeee;
  --primary: #dddddd;
  --primary-ink: #181818;
  --primary-hover: #ffffff;
  }
}
/* Normal is 7.5% larger; all sizes share the same site-wide typography scale. */
:root[data-font-size="extra-small"] { --font-scale: .8; }
:root[data-font-size="small"] { --font-scale: .9; }
:root[data-font-size="large"] { --font-scale: 1.15; }
:root[data-font-size="very-large"] { --font-scale: 1.3; }
:root[data-font-size="extra-large"] { --font-scale: 1.5; }
:root[data-font-size="largest"] { --font-scale: 1.75; }
/* Reading palettes: local fonts only, with no external styles or font requests. */
:root[data-theme="obsidian"] {
  color-scheme: dark;
  --paper: #202127;
  --ink: #e8e5ef;
  --muted: #b1aabb;
  --line: #42404d;
  --soft: #292a32;
  --control-border: #82788f;
  --button: #30313b;
  --hover: #3b3b49;
  --focus: #c8acff;
  --primary: #c8acff;
  --primary-ink: #202127;
  --primary-hover: #decdff;
  --link: #c8acff;
  --font-ui: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-reading: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-brand: system-ui, -apple-system, "Segoe UI", sans-serif;
}
:root[data-theme="dracula"] {
  color-scheme: dark;
  --paper: #282a36;
  --ink: #f8f8f2;
  --muted: #bbbbd2;
  --line: #494c63;
  --soft: #303341;
  --control-border: #858aac;
  --button: #343746;
  --hover: #44475a;
  --focus: #bd93f9;
  --primary: #bd93f9;
  --primary-ink: #282a36;
  --primary-hover: #d3b4ff;
  --link: #bd93f9;
  --font-ui: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --font-reading: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --font-brand: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
:root[data-theme="monochrome"] {
  color-scheme: light;
  --paper: #ffffff;
  --ink: #111111;
  --muted: #595959;
  --line: #b8b8b8;
  --soft: #f1f1f1;
  --control-border: #707070;
  --button: #ffffff;
  --hover: #e5e5e5;
  --focus: #000000;
  --primary: #111111;
  --primary-ink: #ffffff;
  --primary-hover: #333333;
  --link: #111111;
  --font-ui: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --font-reading: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --font-brand: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
:root[data-theme="graphite"] {
  color-scheme: light;
  --paper: #e4e5e7;
  --ink: #25272a;
  --muted: #50545b;
  --line: #b6b8bd;
  --soft: #d8dade;
  --control-border: #777b82;
  --button: #ededef;
  --hover: #cbced3;
  --focus: #353a43;
  --primary: #353a43;
  --primary-ink: #ffffff;
  --primary-hover: #1c2028;
  --link: #303741;
  --font-ui: Arial, Helvetica, sans-serif;
  --font-reading: Arial, Helvetica, sans-serif;
  --font-brand: Arial, Helvetica, sans-serif;
}
:root[data-theme="sky"] {
  color-scheme: light;
  --paper: #edf6fc;
  --ink: #18364a;
  --muted: #476477;
  --line: #b7cfdf;
  --soft: #e0edf6;
  --control-border: #67879e;
  --button: #e6f1f9;
  --hover: #d2e4f1;
  --focus: #1c628f;
  --primary: #1c628f;
  --primary-ink: #ffffff;
  --primary-hover: #154b70;
  --link: #1c628f;
  --font-ui: "Trebuchet MS", "Segoe UI", sans-serif;
  --font-reading: "Trebuchet MS", "Segoe UI", sans-serif;
  --font-brand: "Trebuchet MS", "Segoe UI", sans-serif;
}
:root[data-theme="sepia"] {
  color-scheme: light;
  --paper: #f6efdf;
  --ink: #3e3429;
  --muted: #71604b;
  --line: #d1c3a9;
  --soft: #ece2ce;
  --control-border: #948169;
  --button: #f9f2e4;
  --hover: #e0d4bc;
  --focus: #75451f;
  --primary: #75451f;
  --primary-ink: #fff9ed;
  --primary-hover: #593215;
  --link: #75451f;
  --font-ui: Georgia, "Times New Roman", serif;
  --font-reading: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-brand: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
}
:root[data-theme="midnight"] {
  color-scheme: dark;
  --paper: #172335;
  --ink: #e0eaf5;
  --muted: #a7b9cf;
  --line: #394b63;
  --soft: #203047;
  --control-border: #738ba7;
  --button: #263952;
  --hover: #314963;
  --focus: #91c8f2;
  --primary: #91c8f2;
  --primary-ink: #172335;
  --primary-hover: #bce1ff;
  --link: #91c8f2;
  --font-ui: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-reading: Cambria, Georgia, serif;
  --font-brand: Cambria, Georgia, serif;
}
:root[data-theme="forest"] {
  color-scheme: dark;
  --paper: #18271f;
  --ink: #e0e9dc;
  --muted: #a9bba4;
  --line: #3a5241;
  --soft: #22372b;
  --control-border: #78947c;
  --button: #294231;
  --hover: #35543e;
  --focus: #a6ce93;
  --primary: #a6ce93;
  --primary-ink: #18271f;
  --primary-hover: #c4e2b4;
  --link: #a6ce93;
  --font-ui: Optima, Candara, "Segoe UI", sans-serif;
  --font-reading: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-brand: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
}
:root[data-theme="terminal"] {
  color-scheme: dark;
  --paper: #0b130e;
  --ink: #b9edbe;
  --muted: #83ac8b;
  --line: #2f4e36;
  --soft: #13241a;
  --control-border: #578361;
  --button: #192f20;
  --hover: #22422c;
  --focus: #76f29b;
  --primary: #76f29b;
  --primary-ink: #0b130e;
  --primary-hover: #abffc4;
  --link: #76f29b;
  --font-ui: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --font-reading: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --font-brand: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
:root[data-theme="linen"] {
  color-scheme: light;
  --paper: #faf7f0;
  --ink: #302e29;
  --muted: #686257;
  --line: #d8d1c3;
  --soft: #f1ece2;
  --control-border: #938977;
  --button: #f6f1e7;
  --hover: #e6dfd1;
  --focus: #665139;
  --primary: #665139;
  --primary-ink: #fffaf2;
  --primary-hover: #493925;
  --link: #58452e;
  --font-ui: Georgia, "Times New Roman", serif;
  --font-reading: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-brand: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
}
:root[data-theme="sage"] {
  color-scheme: light;
  --paper: #edf2e9;
  --ink: #28382c;
  --muted: #52644f;
  --line: #c7d2bf;
  --soft: #e3eadc;
  --control-border: #788a6e;
  --button: #e8efdf;
  --hover: #d5dfcc;
  --focus: #355a3c;
  --primary: #355a3c;
  --primary-ink: #f8fcf4;
  --primary-hover: #27452d;
  --link: #355a3c;
  --font-ui: Verdana, Geneva, sans-serif;
  --font-reading: Verdana, Geneva, sans-serif;
  --font-brand: Verdana, Geneva, sans-serif;
}
:root[data-theme="mist"] {
  color-scheme: light;
  --paper: #f2f0f7;
  --ink: #343140;
  --muted: #625b72;
  --line: #d2ccdf;
  --soft: #e9e5f0;
  --control-border: #90839f;
  --button: #eeebf4;
  --hover: #dfd8e9;
  --focus: #5d4878;
  --primary: #5d4878;
  --primary-ink: #fcfaff;
  --primary-hover: #46335d;
  --link: #5d4878;
  --font-ui: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-reading: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-brand: system-ui, -apple-system, "Segoe UI", sans-serif;
}
:root[data-theme="ember"] {
  color-scheme: dark;
  --paper: #24201d;
  --ink: #e9dfd2;
  --muted: #bfb09d;
  --line: #4e4238;
  --soft: #302923;
  --control-border: #927c66;
  --button: #372e26;
  --hover: #47392d;
  --focus: #e7bd8c;
  --primary: #e7bd8c;
  --primary-ink: #24201d;
  --primary-hover: #f4d7b4;
  --link: #e7bd8c;
  --font-ui: Georgia, "Times New Roman", serif;
  --font-reading: Georgia, "Times New Roman", serif;
  --font-brand: Georgia, "Times New Roman", serif;
}

/* Expressive palettes use system font fallbacks and retain the shared reading scale. */
:root[data-theme="acid"] {
  color-scheme: light;
  --paper: #dfff70;
  --ink: #191b12;
  --muted: #464b27;
  --line: #889444;
  --soft: #efffb5;
  --control-border: #555d24;
  --button: #ecffa4;
  --hover: #cee960;
  --focus: #751044;
  --primary: #751044;
  --primary-ink: #ffffff;
  --primary-hover: #570a31;
  --link: #751044;
  --font-ui: "Courier New", Courier, monospace;
  --font-reading: "Trebuchet MS", Arial, sans-serif;
  --font-brand: Impact, "Arial Black", sans-serif;
}
:root[data-theme="cyberpop"] {
  color-scheme: dark;
  --paper: #160d27;
  --ink: #f5edff;
  --muted: #c3afd8;
  --line: #57426e;
  --soft: #221436;
  --control-border: #9c7bbb;
  --button: #2b1b43;
  --hover: #3d2857;
  --focus: #59f4ec;
  --primary: #59f4ec;
  --primary-ink: #160d27;
  --primary-hover: #a2fff9;
  --link: #ff9be6;
  --font-ui: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --font-reading: "Trebuchet MS", Arial, sans-serif;
  --font-brand: Copperplate, "Copperplate Gothic Light", fantasy;
}
:root[data-theme="bubblegum"] {
  color-scheme: light;
  --paper: #ffe0ef;
  --ink: #461437;
  --muted: #75445f;
  --line: #c28aa9;
  --soft: #ffd1e6;
  --control-border: #925477;
  --button: #ffd8ea;
  --hover: #f5b9d8;
  --focus: #67259b;
  --primary: #67259b;
  --primary-ink: #ffffff;
  --primary-hover: #4e1978;
  --link: #67259b;
  --font-ui: "Chalkboard SE", "Comic Sans MS", cursive;
  --font-reading: "Chalkboard SE", "Comic Sans MS", cursive;
  --font-brand: "Cooper Black", "Chalkboard SE", "Comic Sans MS", cursive;
}
:root[data-theme="arcade"] {
  color-scheme: dark;
  --paper: #141b46;
  --ink: #f2f4ff;
  --muted: #b4bfec;
  --line: #49588d;
  --soft: #202955;
  --control-border: #8497d0;
  --button: #283263;
  --hover: #354276;
  --focus: #fff36b;
  --primary: #fff36b;
  --primary-ink: #141b46;
  --primary-hover: #fff9b0;
  --link: #89ffb8;
  --font-ui: Monaco, Consolas, "Liberation Mono", monospace;
  --font-reading: Monaco, Consolas, "Liberation Mono", monospace;
  --font-brand: "Courier New", Courier, monospace;
}
:root[data-theme="solar-flare"] {
  color-scheme: light;
  --paper: #ffae70;
  --ink: #30132b;
  --muted: #63304a;
  --line: #a75637;
  --soft: #ffc393;
  --control-border: #793a39;
  --button: #ffbc84;
  --hover: #f49658;
  --focus: #471c59;
  --primary: #471c59;
  --primary-ink: #fff277;
  --primary-hover: #2e103c;
  --link: #471c59;
  --font-ui: Futura, "Trebuchet MS", Arial, sans-serif;
  --font-reading: Futura, "Trebuchet MS", Arial, sans-serif;
  --font-brand: Impact, "Arial Black", sans-serif;
}

/* Accessibility palettes: clear system fonts and strong text/control contrast. */
:root[data-theme="accessibility-light"] {
  color-scheme: light;
  --paper: #ffffff;
  --ink: #000000;
  --muted: #333333;
  --line: #595959;
  --soft: #f5f5f5;
  --control-border: #454545;
  --button: #ffffff;
  --hover: #e5e5e5;
  --focus: #000000;
  --primary: #000000;
  --primary-ink: #ffffff;
  --primary-hover: #222222;
  --link: #003366;
  --font-ui: Arial, Helvetica, sans-serif;
  --font-reading: Arial, Helvetica, sans-serif;
  --font-brand: Arial, Helvetica, sans-serif;
}
:root[data-theme="accessibility-dark"] {
  color-scheme: dark;
  --paper: #000000;
  --ink: #ffffff;
  --muted: #e0e0e0;
  --line: #a0a0a0;
  --soft: #121212;
  --control-border: #bbbbbb;
  --button: #000000;
  --hover: #222222;
  --focus: #ffff70;
  --primary: #ffff70;
  --primary-ink: #000000;
  --primary-hover: #ffffff;
  --link: #8feaff;
  --font-ui: Arial, Helvetica, sans-serif;
  --font-reading: Arial, Helvetica, sans-serif;
  --font-brand: Arial, Helvetica, sans-serif;
}
:root[data-theme="accessibility-reading"] {
  color-scheme: light;
  --paper: #f6efdf;
  --ink: #242424;
  --muted: #424242;
  --line: #797264;
  --soft: #eee6d5;
  --control-border: #655e52;
  --button: #f6efdf;
  --hover: #e3dac7;
  --focus: #164663;
  --primary: #164663;
  --primary-ink: #ffffff;
  --primary-hover: #10344a;
  --link: #164663;
  --font-ui: Arial, Helvetica, sans-serif;
  --font-reading: Arial, Helvetica, sans-serif;
  --font-brand: Arial, Helvetica, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font: var(--text-body)/1.6 var(--font-ui); }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
button, .button {
  display: inline-block; border: 1px solid var(--control-border); border-radius: 2px;
  background: var(--button); padding: 7px 12px; cursor: pointer; line-height: 1.5;
  max-width: 100%; white-space: normal;
}
button:hover, .button:hover { background: var(--hover); text-decoration: none; }
input, select { min-width: 0; max-width: 100%; border: 1px solid var(--control-border); border-radius: 2px; padding: 8px 10px; background: var(--paper); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--font-reading); font-weight: normal; line-height: 1.3; overflow-wrap: anywhere; }
h1 { font-size: clamp(calc(24px * var(--font-scale)), calc(3vw * var(--font-scale)), calc(30px * var(--font-scale))); margin: 0; letter-spacing: -.4px; }
h2 { font-size: var(--text-section-title); }
h3 { font-size: var(--text-subheading); }
form, p, ul, ol, dl { min-width: 0; }
.small { font-size: var(--text-control); }
.muted { color: var(--muted); }
.eyebrow { font-size: calc(10px * var(--font-scale)); letter-spacing: 1.5px; color: var(--muted); margin: 0 0 9px; }
.primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.primary:hover { background: var(--primary-hover); }
.text-button { padding: 3px 0; border: 0; background: none; font-size: var(--text-control); color: var(--muted); }
.text-button:hover { background: none; text-decoration: underline; }
.site-header { border-bottom: 1px solid var(--line); }
.header-inner {
  max-width: var(--page-width); margin: 0 auto; padding: 16px var(--gutter);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: 'brand nav account';
  gap: 12px 24px; align-items: center;
}
.brand { grid-area: brand; display: flex; align-items: center; gap: 9px; }
.brand:hover { text-decoration: none; }
.brand strong { font: calc(21px * var(--font-scale)) var(--font-brand); letter-spacing: 2px; }
.monogram { font: calc(38px * var(--font-scale))/1 var(--font-brand); letter-spacing: -4px; }
.monogram span { position: relative; font-size: calc(20px * var(--font-scale)); top: -12px; left: -2px; }
.site-nav { grid-area: nav; display: flex; flex-wrap: wrap; gap: 0 16px; align-items: center; min-width: 0; }
.site-nav a { padding: 5px 0; overflow-wrap: anywhere; }
.account-menu, .sign-in { grid-area: account; min-width: 0; font-size: var(--text-control); }
.account-menu { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 3px 12px; max-width: 220px; }
.my-profile { overflow-wrap: anywhere; min-width: 0; }
.account-menu form { margin: 0; }
.site-nav a, .account-menu a, .account-menu button, .sign-in {
  font: 400 var(--text-control)/1.6 var(--font-ui);
  color: var(--ink);
}
.sign-in { justify-self: end; }
.language-picker { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 0 auto; }
.language-picker label { min-width: 0; }
.language-picker select { font-size: var(--text-control); padding: 7px; }
.language-picker button { font-size: var(--text-control); padding: 7px 10px; }
.stream-shell { width: 100%; max-width: var(--page-width); margin: 24px auto 0; padding: 0 var(--gutter); }
main { min-width: 0; }
.page-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 16px; }
.page-heading > div { min-width: 0; }
.page-heading h1, .source-row h3, .suggestion strong { min-width: 0; overflow-wrap: anywhere; }
.page-heading > a { font-size: var(--text-control); }
/* Feed identity stays separate from the article list and uses the shared reading typography. */
.feed-header { margin-bottom: 20px; }
.feed-header-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px 32px; }
.feed-header-info { min-width: 0; }
.feed-header .visit-site { display: inline-flex; align-items: center; gap: 6px; }
.feed-header-url { display: block; margin-top: 7px; color: var(--muted); font: var(--text-control)/1.6 var(--font-ui); overflow-wrap: anywhere; }
.feed-header-details { margin-top: 20px; padding: 14px 18px; background: var(--soft); border: 1px solid var(--line); border-radius: 6px; }
.feed-header-meta { display: flex; flex-wrap: wrap; align-items: start; gap: 16px 36px; }
.feed-header-meta > * { min-width: 0; }
.feed-header-meta time { color: var(--ink); }
.feed-meta-label, .feed-latest-article > span:first-child, .feed-last-fetch > span:first-child { color: var(--muted); font-size: var(--text-caption); }
.feed-latest-article, .feed-last-fetch, .feed-followers { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0; color: var(--muted); font: var(--text-control)/1.6 var(--font-ui); }
.feed-followers-link { display: block; color: var(--muted); font: var(--text-control)/1.6 var(--font-ui); text-decoration: underline; text-underline-offset: 3px; }
.tabs { border-block: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; font-size: var(--text-control); }
.tabs > div { display: flex; flex-wrap: wrap; gap: 0 20px; }
.tabs > div > a, .tabs > div > span { display: flex; align-items: center; padding: 9px 0; border-bottom: 2px solid transparent; }
.tabs .selected { border-bottom-color: var(--ink); font-weight: bold; }
.tabs > .small { padding: 7px 0; }
.list-summary { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 5px 15px; padding: 8px 0; font-size: var(--text-caption); color: var(--muted); }
.list-summary button { font-size: var(--text-caption); }
.headline-list, .public-list.numbered-source-list { margin: 8px 0 24px; padding-left: 30px; }
.headline-list .article-row { position: relative; min-height: 44px; padding: 8px 4px; }
.headline-list li::marker, .numbered-source-list > li::marker { color: var(--muted); font: var(--text-control) var(--font-ui); }
/* Articles, source names and reader names have the same visual hierarchy.
   Small actions and tags keep their explicit interface styles below. */
.article-row :is(h2, h3), .public-list a, .source-row h3, .suggestion strong {
  font: 400 var(--text-list-title)/1.5 var(--font-reading);
  overflow-wrap: anywhere;
}
.article-row :is(h2, h3) { margin: 0; }
.unlinked-title { color: var(--muted); }
.notice { padding: 12px 15px; border: 1px solid var(--control-border); background: var(--soft); font-size: var(--text-summary); overflow-wrap: anywhere; }
.notice.error { border-left: 4px solid var(--ink); }
.empty, .stream-empty { padding: 25px 0; }
.welcome-links { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.welcome-links p { max-width: 70ch; margin: 0 0 8px; }
/* Keep the feed chooser compact and aligned with the source form's controls. */
.source-options { margin-top: 20px; scroll-margin-top: 20px; }
/* The fragment target keeps keyboard orientation without drawing a box around the entire list.
   Interactive controls retain their normal focus outlines, including accessibility themes. */
:root .source-options[tabindex="-1"]:focus { outline: none; }
.source-submit-status:not([hidden]),
.source-options[data-running="true"] [data-search-status],
.opml-import[data-importing="true"] #opml-progress { display: flex; align-items: center; gap: 8px; }
.source-submit-status:not([hidden])::before,
.source-options[data-running="true"] [data-search-status]::before,
.opml-import[data-importing="true"] #opml-progress::before {
  content: "";
  display: inline-block;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: source-search-spin .8s linear infinite;
}
@keyframes source-search-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .source-submit-status::before,
  .source-options [data-search-status]::before,
  .opml-import #opml-progress::before { animation: none; }
}
.source-options h2 { margin: 0 0 6px; font-size: var(--text-subheading); }
.source-options-list { list-style: none; margin: 12px 0 0; padding: 0; }
.source-options-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding: 12px 0; border-top: 1px solid var(--line); }
.source-option-info { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.source-option-info strong, .source-option-info a { display: block; }
.source-options-list form { margin: 0; }
.source-options-list button { font: var(--text-control)/1.5 var(--font-ui); }
.opml-import { scroll-margin-top: 20px; }
.opml-completion { display: flex; align-items: center; gap: 12px; }
.opml-completion progress { flex: 1; min-width: 0; height: 8px; accent-color: var(--ink); }
.opml-feed-results { list-style: none; padding: 0; margin: 12px 0 0; max-height: 28rem; overflow-y: auto; }
.opml-feed-results li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.opml-feed-results li > div { min-width: 0; flex: 1 1 200px; overflow-wrap: anywhere; }
.opml-feed-results strong, .opml-feed-results a { display: block; }
.opml-feed-state { flex: 0 1 45%; min-width: 130px; color: var(--muted); }
.opml-feed-results [data-state="failed"] .opml-feed-state,
.opml-feed-results [data-state="rejected"] .opml-feed-state,
.opml-feed-results [data-state="unconfirmed"] .opml-feed-state { color: var(--ink); font-weight: bold; }

.opml-import input[type="file"] { max-width: 100%; }
.empty-symbol { display: none; }
.empty h2 { margin: 0 0 12px; }
.empty p { max-width: 640px; margin: 0 0 14px; }
.empty a { font-size: var(--text-control); text-decoration: underline; }
.pagination { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; margin: 24px 0; font-size: var(--text-control); }
.section-title { border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-top: 28px; }
.public-list { list-style: none; padding: 0; margin: 22px 0; border-top: 1px solid var(--line); }
.public-list.numbered-source-list { list-style: decimal; }
.public-list li { padding: 12px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.public-user, .catalog-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 20px; }
.public-user > span { max-width: 26rem; }
.public-source-url { display: block; overflow-wrap: anywhere; margin-top: 3px; }
.recommended-source a.public-source-url { font: var(--text-caption)/1.5 var(--font-ui); color: var(--muted); }
.catalog-entry > div { min-width: 0; }
.catalog-entry button, .public-list .catalog-signin { font: var(--text-control)/1.5 var(--font-ui); }
.catalog-search { display: flex; gap: 8px; width: 100%; max-width: 500px; margin: 20px 0; font-size: var(--text-control); }
.catalog-search input { flex: 1; min-width: 0; }
.reading-layout { padding-top: 24px; }
.reading-aside { margin-top: 32px; }
.source-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px 32px; padding: 16px 0 24px; border-bottom: 1px solid var(--line); }
.source-tools p { margin: 0; max-width: 52ch; }
.source-tool-group { display: grid; align-content: start; gap: 16px; min-width: 0; }

.add-source { border: 1px solid var(--line); background: var(--soft); padding: clamp(16px, 3vw, 26px); margin-bottom: 24px; }
.add-source h2 { margin-top: 0; }
.add-source > p { font-size: var(--text-summary); color: var(--muted); }
.add-source label { display: block; font-size: var(--text-control); font-weight: bold; margin: 18px 0 8px; }
.input-row { display: flex; gap: 8px; }
.input-row input { flex: 1; width: 100%; }
.input-row button { flex-shrink: 0; }
.source-row { display: grid; grid-template-columns: minmax(0, 1fr) 180px; align-items: start; gap: 14px 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.source-row h3 { margin: 0 0 8px; }
.source-row p { overflow-wrap: anywhere; margin: 6px 0; }
.delete { font-size: var(--text-control); }
.delete summary { cursor: pointer; padding: 4px 0; }
.delete p { margin: 10px 0; }
.delete button { font-size: var(--text-control); }
.source-error { font-size: var(--text-control); font-weight: bold; }
.info-box { border: 1px solid var(--line); padding: 20px; }
.info-box h2, .info-box h3 { margin: 0 0 12px; font-size: var(--text-subheading); }
.suggestion { border-top: 1px solid var(--line); padding: 14px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.suggestion span { font-size: var(--text-control); color: var(--muted); }
.suggestion button { margin-left: auto; }
.back-link { display: inline-block; font-size: var(--text-control); margin-bottom: 24px; }
.full-article { max-width: var(--article-width); margin: 0 auto; }
.full-article h1 { margin: 14px 0 24px; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: var(--text-control); color: var(--muted); }
.article-meta > a { color: var(--ink); overflow-wrap: anywhere; }
.article-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; border-block: 1px solid var(--line); padding: 10px 0; }
.article-tools > span { margin-right: auto; }
.article-body { font: var(--text-list-title)/1.9 var(--font-reading); overflow-wrap: anywhere; padding: 18px 0; }
.original { border: 1px solid var(--line); background: var(--soft); padding: 18px; font-size: var(--text-control); }
.original p { margin-top: 0; color: var(--muted); }
.prose { max-width: 740px; padding-top: 14px; font: var(--text-body)/1.6 var(--font-ui); overflow-wrap: anywhere; }
.prose .lead { font: var(--text-list-title)/1.5 var(--font-reading); }
.prose h2 { border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-top: 30px; }
.prose a { text-decoration: underline; }
.prose ol { padding-left: 24px; }
.prose li { margin-bottom: 12px; }
.auth-page { width: 100%; max-width: 460px; margin: clamp(24px, 7vh, 80px) auto; padding: 0 var(--gutter); }
.auth-brand { display: inline-block; font: calc(30px * var(--font-scale)) var(--font-brand); letter-spacing: 4px; margin-bottom: 25px; }
.auth-page > p { color: var(--muted); }
.auth-page > form:not(.language-picker) { display: flex; flex-direction: column; gap: 9px; margin: 24px 0; }
.auth-page label { font-size: var(--text-control); font-weight: bold; margin-top: 8px; }
.auth-page input { width: 100%; }
.auth-page .primary { margin-top: 15px; }
.auth-page p a { text-decoration: underline; }
.auth-page .language-picker { justify-content: flex-end; margin: 0 0 26px; }
.auth-page .language-picker label { margin: 0; }
.error-page { width: 100%; max-width: 740px; margin: 50px auto; padding: 0 var(--gutter); }
.footer { margin-top: 32px; border-top: 1px solid var(--line); padding: 18px 0 25px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; color: var(--muted); font-size: var(--text-caption); }
.skip { position: absolute; top: -100px; background: var(--paper); padding: 10px; z-index: 10; }
.skip:focus { top: 8px; left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 1000px) {
  .header-inner { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'brand account' 'nav nav'; gap: 10px 18px; }
  .account-menu { justify-self: end; max-width: 100%; }
}
@media (max-width: 600px) {
  :root { --text-list-title: calc(17px * var(--font-scale)); }
  button, .button, input, select { min-height: 44px; }
  input, select, .catalog-search input, .language-picker select { font-size: calc(16px * var(--font-scale)); }
  .header-inner { padding-block: 12px; }
  .site-nav { gap: 0 18px; border-block: 1px solid var(--line); }
  .site-nav a { display: flex; align-items: center; min-height: 44px; padding: 6px 0; }
  .account-menu { gap: 0 10px; }
  .account-menu .my-profile { max-width: 18ch; }
  .language-picker { margin-left: 0; }
  .stream-shell { margin-top: 18px; }
  .page-heading { gap: 8px 16px; }
  .tabs > div > a, .tabs > div > span { min-height: 44px; }
  .tabs > .small { width: 100%; font-size: var(--text-caption); }
  .headline-list, .public-list.numbered-source-list { padding-left: 24px; }
  .headline-list .article-row { padding-top: 8px; padding-bottom: 8px; }
  .public-user, .catalog-entry, .source-row { grid-template-columns: minmax(0, 1fr); }
  .public-user > span { max-width: 100%; }
  .catalog-entry > form, .catalog-entry > a { justify-self: start; }
  .input-row { flex-direction: column; }
  .input-row button { align-self: start; }
  .suggestion { flex-direction: column; align-items: flex-start; gap: 5px; }
  .suggestion button { margin-left: 0; }
  .delete summary { min-height: 44px; padding: 10px 0; }
  .pagination a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer { flex-direction: column; gap: 8px; }
}
@media (prefers-reduced-motion: no-preference) {
  button, a { transition: background-color .15s; }
}
@media print {
  .site-header, .article-tools, .back-link, .footer, .view-picker { display: none; }
  .stream-shell { max-width: none; margin: 0; padding: 0; }
  .headline-list .article-row { padding-right: 0; }
  body { color: black; }
}

/* This is a dismissible, in-flow hint; it never covers the reading list. */
[hidden] { display: none !important; }
.install-tip { width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--page-width) - 2 * var(--gutter)); margin: 0 auto 16px; padding: 14px; display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 10px; border: 1px solid var(--line); background: var(--soft); font-size: var(--text-summary); }
.install-tip p { margin: 7px 0 10px; }
.install-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.install-actions a { text-decoration: underline; }
.install-dismiss { border: 0; background: none; width: 44px; min-height: 44px; align-self: start; font-size: calc(23px * var(--font-scale)); }
.auth-page .install-tip { width: 100%; margin: 0 0 24px; }
@media (display-mode: standalone) { .install-tip { display: none !important; } }
@media print { .install-tip { display: none !important; } }

.theme-picker { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--text-control); }
.theme-picker label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.theme-picker select { font-size: var(--text-control); padding: 7px; }
.auth-page .theme-picker { justify-content: flex-end; margin-bottom: 22px; }
@media (max-width: 600px) { .theme-picker select { font-size: calc(16px * var(--font-scale)); } }
@media print {
  :root {
  color-scheme: light !important;
  --paper: #ffffff !important;
  --ink: #242424 !important;
  --muted: #686868 !important;
  --line: #d7d7d2 !important;
  --soft: #f6f6f3 !important;
  --control-border: #a7a7a2 !important;
  --button: #f8f8f6 !important;
  --hover: #eaeae6 !important;
  --focus: #333333 !important;
  --primary: #30302f !important;
  --primary-ink: #ffffff !important;
  --primary-hover: #111111 !important;
  --link: #242424 !important;
  }
  .theme-picker { display: none !important; }
}

/* Compact web directory: browse initials, then scan source titles and addresses. */
/* Directory browsing uses the Reading's fonts, scale and theme colors. */
.directory-intro { margin: -4px 0 0; }
.directory-tools { margin: 24px 0; padding: 18px 0; border-block: 1px solid var(--line); }
.directory-page .catalog-search { max-width: none; margin: 0; align-items: center; gap: 10px 16px; }
.directory-page .catalog-search > input[type="search"] { flex: 1 1 16rem; }
.directory-page .catalog-search > .tag-choice { flex: 0 1 19rem; margin-inline-start: auto; }
.directory-index { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 16px 0 0; }
.directory-index a { display: inline-flex; align-items: baseline; gap: 6px; min-height: 44px; padding: 10px; border-radius: 4px; }
.directory-index strong { font: 600 var(--text-control)/1.5 var(--font-ui); }
.directory-index span { font-size: var(--text-caption); color: var(--muted); }
.directory-index .selected { background: var(--soft); box-shadow: inset 0 -2px var(--ink); }
.directory-index a:hover { background: var(--soft); text-decoration: none; }
.directory-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; }
.directory-heading h2 { margin: 0; }
.directory-heading-count { white-space: nowrap; font-weight: 400; }
.directory-heading .directory-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; width: auto; margin-inline-start: auto; font: var(--text-control)/1.5 var(--font-ui); }
.directory-sort select { min-width: 0; max-width: 100%; font: inherit; }
.directory-list { margin-top: 8px; border-top: 0; }
.directory-list .directory-letter { padding: 22px 0 6px; border: 0; }
.directory-letter h3 { margin: 0; color: var(--muted); font: 600 var(--text-body)/1.5 var(--font-ui); }
.directory-list .catalog-entry { padding: 18px 0; align-items: start; row-gap: 14px; }
.directory-source-title { margin: 0; font: 400 var(--text-list-title)/1.5 var(--font-reading); }
.directory-list .public-source-url { display: block; margin-top: 2px; color: var(--muted); font: var(--text-control)/1.6 var(--font-ui); }
.directory-latest { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; margin: 12px 0 0; font: var(--text-summary)/1.6 var(--font-ui); overflow-wrap: anywhere; }
.directory-latest a { font: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.directory-latest a:hover { text-decoration-color: currentColor; }
.directory-detail-label, .directory-article-date { color: var(--muted); font: var(--text-caption)/1.6 var(--font-ui); }
.directory-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; color: var(--muted); font: var(--text-caption)/1.6 var(--font-ui); }
.directory-meta .directory-followers { color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; }
.directory-updated { display: inline-flex; flex-wrap: wrap; gap: 0 4px; }
.directory-source .feed-tags { margin-top: 10px; }
.directory-list .catalog-entry button { padding: 6px 12px; }
@media (max-width: 800px) {
  .directory-page .catalog-search > .tag-choice { flex-basis: 100%; }
}
@media print { .directory-index { display: none; } }
.account-delete, .account-password { display: grid; gap: 12px; max-width: 480px; font: var(--text-body)/1.6 var(--font-ui); }
.account-delete input[type='checkbox'] { width: 18px; height: 18px; min-height: 18px; vertical-align: middle; }
.account-delete button, .account-password button { justify-self: start; }
.settings-section h3 { margin: 24px 0 12px; }

.account-preferences { margin: 24px 0; max-width: 480px; }
.account-preferences .language-picker { margin: 0 0 16px; justify-content: flex-start; }
.account-preferences h2 { margin: 22px 0 10px; }
.settings-sections {
  /* Settings labels, controls and help use the same size as the body copy. */
  --text-control: var(--text-body);
  max-width: 720px;
}
.settings-section { margin: 24px 0; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.settings-section h2 { margin: 0 0 16px; }
.settings-section.account-preferences { max-width: none; }
.page-size-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 16px; font-size: var(--text-control); }
.page-size-picker select { padding: 7px; }
.reading-preferences { margin-top: 16px; display: grid; gap: 14px; font-size: var(--text-control); }
.reading-preferences label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.reading-preferences select { padding: 7px; }
.reading-preferences p { margin: 0; }
.reading-checkbox input { width: 18px; height: 18px; min-height: 18px; padding: 0; }
@media (max-width: 600px) { .reading-preferences label { min-height: 44px; } }
.privacy-read-more { text-decoration: underline; }
.prose code { overflow-wrap: anywhere; }

.headline-title :is(h2, h3) { display: inline; }
.headline-metadata { display: inline; }
.headline-source { margin-left: 5px; color: var(--muted); font: var(--text-control)/1.5 var(--font-ui); overflow-wrap: anywhere; }
.headline-date { display: block; margin-top: 2px; color: var(--muted); font: var(--text-control)/1.5 var(--font-ui); }
.headline-summary { margin: 3px 0 0; color: var(--muted); font: var(--text-summary)/1.5 var(--font-ui); overflow-wrap: anywhere; }

.headline-list :is(h2, h3) a, .prose a, .public-list a { color: var(--link); }

/* Browser-owned history only; no application tracking or script reads. */
.headline-list :is(h2, h3) a:visited { color: var(--muted); }
.view-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 15px 0; font-size: var(--text-control); }
.view-picker select { min-width: 160px; }
.reading-choice { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 100%; }
.reading-choice select { max-width: 100%; }
.reading-setting { position: relative; }
.reading-choice-label { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
/* Help floats below its control, so opening it never shifts the article list. */
.reading-help > summary {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  list-style: none;
  color: var(--muted);
  cursor: help;
}
.reading-help > summary::-webkit-details-marker { display: none; }
.reading-help > summary > span {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font: 11px/1 var(--font-ui);
}
.reading-help > summary:hover, .reading-help[open] > summary { color: var(--ink); }
.reading-help-panel {
  position: absolute;
  z-index: 3;
  top: calc(100% + 4px);
  inset-inline-start: 0;
  width: min(360px, 100%);
  max-height: 60vh;
  overflow: auto;
  padding: 12px 14px;
  border: 1px solid var(--control-border);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 4px 16px rgb(0 0 0 / 10%);
  font: var(--text-control)/1.55 var(--font-ui);
  white-space: normal;
}
.reading-help-panel p { margin: 0; }
.reading-help-panel p + p { margin-top: 8px; }
.shuffle-form { margin-block: 12px; }
@media (max-width: 600px) {
  .reading-choice { width: 100%; }
  .reading-choice > label, .reading-choice > .tag-filter-label,
  .reading-choice > .reading-choice-label { flex-basis: 6em; }
  .reading-choice select { flex: 1; min-width: 0; }
}
@media (max-width: 600px) { .view-picker select { font-size: calc(16px * var(--font-scale)); } }

.more-articles { margin-top: 4px; }
.more-articles summary { width: fit-content; max-width: 100%; padding: 4px 0; color: var(--muted); font-size: var(--text-control); cursor: pointer; }
.more-articles summary:hover { text-decoration: underline; }
.group-load { display: inline-block; margin: 8px 0; font-size: var(--text-control); text-decoration: underline; }
.group-load[aria-disabled="true"] { cursor: progress; opacity: .65; }
.more-articles [data-group-status] { margin: 6px 0; }
.group-articles { list-style: none; margin: 4px 0 8px; padding-left: 18px; border-left: 1px solid var(--line); }
.group-articles .article-row { padding-block: 6px; }
.group-all { display: inline-block; margin: 2px 0 8px 18px; font-size: var(--text-control); text-decoration: underline; }
@media (max-width: 600px) { .more-articles summary, .group-all { min-height: 44px; padding-block: 10px; } }

/* Apply to the flat list and every article inside an expanded source group. */
:root[data-article-spacing="compact"] .headline-list .article-row { padding-block: 2px; min-height: 0; }
:root[data-hide-dates="true"] .headline-date { display: none; }
:root[data-show-summaries="false"] .headline-summary { display: none; }
:root[data-hide-source="true"] .headline-source { display: none; }
:root[data-source-side="left"]:not([data-hide-source="true"]) .headline-title { display: grid; grid-template-columns: fit-content(35%) minmax(0, 1fr); align-items: baseline; gap: 0 6px; }
:root[data-source-side="left"]:not([data-hide-source="true"]) .headline-title :is(h2, h3) { grid-column: 2; grid-row: 1; min-width: 0; }
:root[data-source-side="left"]:not([data-hide-source="true"]) .headline-metadata { display: block; grid-column: 1; grid-row: 1; min-width: 0; }
:root[data-source-side="left"]:not([data-hide-source="true"]) .headline-source { margin-left: 0; }
@media (max-width: 600px), (pointer: coarse) {
  :root[data-article-spacing="compact"] .headline-list .article-row { min-height: 44px; }
}

/* Keep mobile form controls readable without focus-triggered zoom. */
@media (max-width: 600px) {
  .settings-sections { --text-body: max(16px, calc(14px * var(--font-scale))); }
  input, select, .language-picker select, .theme-picker select, .view-picker select,
  .catalog-search input, .settings-page .settings-sections :is(input, select) {
    font-size: max(16px, calc(16px * var(--font-scale)));
  }
  .settings-page .settings-sections { font-size: var(--text-body); }
  .settings-page .settings-sections :is(input, select) { font-size: var(--text-body); }
}

.date-browser { margin: 18px 0; padding-block: 12px; border-block: 1px solid var(--line); }
.date-browser h2 { margin: 0 0 12px; font: calc(22px * var(--font-scale))/1.5 var(--font-reading); }
.date-browser form, .date-navigation, .archive-years { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.date-browser input[type=number] { width: 7em; }
.date-navigation, .archive-years { margin: 12px 0; }
.date-navigation a, .archive-years a { text-decoration: underline; }
.bookshelf-list { list-style: none; padding: 0; }
.shelf-entry { border-bottom: 1px solid var(--line); padding: 16px 0; }
.shelf-title { margin: 0 0 6px; font: calc(20px * var(--font-scale))/1.5 var(--font-reading); overflow-wrap: anywhere; }
.shelf-title > a { text-decoration: underline; }
.bookshelf-list .article-row { padding-inline: 0; }
.edition-end { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); }
@media (max-width: 600px) { .date-navigation a, .archive-years a { padding-block: 10px; } }

/* A quiet secondary action next to the library heading. */
.feed-refresh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.feed-refresh button { color: var(--muted); font-size: var(--text-control); }
.feed-refresh button:disabled { opacity: .6; cursor: default; }

/* Shared columns keep website links aligned despite different subscription labels. */
.directory-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content max-content;
  column-gap: 20px;
}
.directory-list > li { grid-column: 1 / -1; }
.directory-list .catalog-entry {
  grid-template-columns: subgrid;
  column-gap: 20px;
}
.catalog-actions { display: contents; }
.directory-list .catalog-actions > * { min-width: 0; max-width: 100%; margin-top: 3px; }
.directory-list .catalog-actions button { max-width: 100%; overflow-wrap: anywhere; }
.catalog-actions > .visit-site { grid-column: 2; justify-self: start; }
.catalog-actions > :not(.visit-site) { grid-column: 3; justify-self: start; }
@media (max-width: 800px) {
  .directory-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; }
  .directory-list .catalog-entry { column-gap: 12px; }
  .directory-list .catalog-entry > .directory-source { grid-column: 1 / -1; }
  .catalog-actions > .visit-site { grid-column: 1; }
  .catalog-actions > :not(.visit-site) { grid-column: 2; }
  .directory-list .catalog-actions > * { margin-top: 0; }
  .directory-list .catalog-actions > a { display: inline-flex; align-items: center; min-height: 44px; }
}
.directory-list .catalog-actions > a.visit-site,
.feed-header-actions .visit-site {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font: var(--text-control)/1.5 var(--font-ui);
  text-decoration: none;
}
.directory-list .catalog-actions > a.visit-site:hover,
.feed-header-actions .visit-site:hover { background: var(--soft); }

/* Muted terracotta distinguishes leaving a source without making it a primary action. */
.directory-list .catalog-entry button.unsubscribe-button, .curated-actions .unsubscribe-button,
.feed-subscription .unsubscribe-button, .subscriptions-page .unsubscribe-button {
  --unsubscribe-accent: #b86b59;
  color: color-mix(in srgb, var(--ink) 70%, var(--unsubscribe-accent));
  border-color: color-mix(in srgb, var(--unsubscribe-accent) 35%, var(--line));
  background: color-mix(in srgb, var(--unsubscribe-accent) 7%, var(--paper));
}
.directory-list .catalog-entry button.unsubscribe-button:hover, .curated-actions .unsubscribe-button:hover,
.feed-subscription .unsubscribe-button:hover, .subscriptions-page .unsubscribe-button:hover {
  background: color-mix(in srgb, var(--unsubscribe-accent) 14%, var(--paper));
}

.feed-tags { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 5px; }
.feed-header-tags { list-style: none; margin: 8px 0 0; padding: 0; }
.feed-tags .feed-tag {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1px 7px;
  color: var(--muted);
  font: var(--text-caption)/1.5 var(--font-ui);
  text-decoration: none;
}
.feed-tags a.feed-tag:hover, .feed-tags a.feed-tag:focus-visible,
.feed-tags a.feed-tag[aria-current] {
  color: var(--ink);
  background: var(--soft);
  text-decoration: underline;
}
.tag-filter, .tag-filter-disabled {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--control-border);
  border-radius: 2px;
  font: var(--text-control)/1.5 var(--font-ui);
}
.tag-filter-disabled { padding: 9px 12px; text-align: left; color: var(--muted); cursor: not-allowed; }
.tag-filter-disabled:hover { background: var(--button); }
.tag-filter summary { cursor: pointer; padding: 9px 12px; overflow-wrap: anywhere; }
.tag-filter summary .tag-filter-selected { margin-right: 8px; }
.tag-filter-selected { font-weight: 600; }
.tag-filter-panel { padding: 0 12px 12px; }
.tag-filter-panel > p { margin: 0 0 10px; }
.tag-filter fieldset { min-width: 0; margin: 0; padding: 8px 0; border: 0; }
.tag-filter legend { font-weight: 600; }
.tag-filter-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 2px 14px;
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
}
.tag-filter-options label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 0;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.tag-filter-options input[type=checkbox] {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  accent-color: var(--ink);
}
.tag-filter-actions { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.tag-filter-actions a { color: var(--muted); text-decoration: underline; }
/* Anchor each tag popup to its filter row, including the Subscriptions toolbar. */
.view-picker, .catalog-search, .subscription-filter-row { position: relative; }
.tag-choice { min-width: 0; }
.tag-choice > .tag-filter, .tag-choice > .tag-filter-disabled { flex: 1; width: auto; }
.view-picker > .tag-choice { flex: 0 1 300px; margin-inline-start: auto; }
.tag-filter > summary { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag-filter-panel {
  position: absolute;
  z-index: 2;
  top: calc(100% + 4px);
  inset-inline-end: 0;
  width: min(540px, 100%);
  padding: 12px;
  border: 1px solid var(--control-border);
  border-radius: 2px;
  background: var(--paper);
}
.catalog-search { flex-wrap: wrap; }
.catalog-search > .tag-choice { flex-basis: 100%; }
@media (max-width: 600px) {
  .view-picker > .tag-choice { flex-basis: 100%; margin-inline-start: 0; }
  .tag-filter-options label, .tag-filter summary { min-height: 44px; }
}

/* Collections use the shared Reading list: one full-width row per topic. */
.curated-topics li { padding: 0; }
.curated-topics a {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
  min-height: 44px;
  padding: 10px 0;
}
.curated-topics .small { font-family: var(--font-ui); }
.curated-topic-description { margin: 0 0 12px; }
/* Curated pages reuse Reading titles, metadata and quiet subscription controls. */
.curated-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 24px; }
.curated-entry > div { min-width: 0; }
.curated-entry .headline-summary a { text-decoration: underline; }
.curated-description { margin: 8px 0; font: var(--text-summary)/1.5 var(--font-ui); overflow-wrap: anywhere; }
.curated-actions { padding-top: 3px; font-size: var(--text-control); }
.curated-entry > .curated-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.curated-actions form { margin: 0; }
.curated-bulk-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-block: 16px; }
.curated-bulk-actions button:disabled { opacity: .5; cursor: default; }
.recommendation-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; }
.recommendation-entry > div { min-width: 0; }
.curated-list .article-row { padding-block: 14px; border-bottom: 1px solid var(--line); }
@media (max-width: 600px) {
  .recommendation-entry { grid-template-columns: minmax(0, 1fr); }
  .curated-entry { grid-template-columns: minmax(0, 1fr); }
  .curated-actions { justify-self: start; }
}

/* Small, static accents give each palette character without animation or image assets. */
@media screen {
  :root[data-theme="acid"] .site-header,
  :root[data-theme="solar-flare"] .site-header {
    border-bottom: 4px solid var(--primary);
  }
  :root[data-theme="acid"] .primary,
  :root[data-theme="solar-flare"] .primary {
    border-radius: 0;
    box-shadow: 3px 3px 0 var(--ink);
  }
  :root[data-theme="cyberpop"] .site-header {
    border-bottom: 2px solid var(--primary);
    box-shadow: 0 2px 10px #59f4ec26;
  }
  :root[data-theme="cyberpop"] .brand {
    color: var(--link);
    text-shadow: 2px 2px #592c74;
  }
  :root[data-theme="bubblegum"] .primary {
    border-radius: 18px;
    box-shadow: 3px 3px 0 var(--control-border);
  }
  :root[data-theme="bubblegum"] .site-header {
    border-bottom: 3px dashed var(--control-border);
  }
  :root[data-theme="arcade"] .site-header {
    border-bottom: 4px double var(--primary);
  }
  :root[data-theme="arcade"] .primary {
    border-radius: 0;
    box-shadow: 3px 3px 0 var(--link);
  }
  :root[data-theme="arcade"] .brand strong {
    font-weight: bold;
    text-shadow: 2px 2px #49588d;
  }
}

/* Theme-local reading aids keep the chosen font scale and spacing controls available. */
:root[data-theme="accessibility-reading"] {
  --text-body: calc(16px * var(--font-scale));
  --text-summary: calc(16px * var(--font-scale));
  --font-ui: Verdana, Arial, sans-serif;
  --font-reading: Verdana, Arial, sans-serif;
  --font-brand: Verdana, Arial, sans-serif;
}
:root[data-theme="accessibility-reading"] body {
  letter-spacing: .04em;
  word-spacing: .14em;
  line-height: 1.8;
}
:root[data-theme="accessibility-reading"] :is(h1, h2, h3, .headline-summary, .curated-description, .prose) {
  letter-spacing: .04em;
  line-height: 1.8;
  text-align: start;
}
:root[data-theme^="accessibility-"] :is(.headline-title a, .headline-source, .article-body a, .prose a) {
  text-decoration: underline;
  text-underline-offset: .2em;
}
:root[data-theme^="accessibility-"] :focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* Settings use the same anchored disclosure as Content/Layout, without shifting other rows. */
.setting-option {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  min-width: 0;
}
.setting-option > label { max-width: calc(100% - 32px); }
.setting-option > .reading-help { flex: 0 0 auto; }
.setting-option .reading-help-panel { width: min(360px, 100%); }
@media (max-width: 600px) {
  .setting-option > label { max-width: calc(100% - 50px); }
  .setting-option .reading-help > summary { width: 44px; height: 44px; }
}

/* Explicit font choices override palette typography without changing colors or font scale.
   Theme default defines no override, so each palette keeps its original fonts. */
:root[data-reading-font="sans-serif"] {
  --font-ui: Arial, Helvetica, sans-serif;
  --font-reading: Arial, Helvetica, sans-serif;
}
:root[data-reading-font="serif"] {
  --font-ui: Georgia, "Times New Roman", serif;
  --font-reading: Georgia, "Times New Roman", serif;
}
:root[data-reading-font="monospace"] {
  --font-ui: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --font-reading: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

/* Maximum widths keep content responsive on smaller screens. Standard uses the base values.
   Header and reading lists share --page-width so navigation stays aligned with the content. */
@media screen {
  :root[data-content-width="narrow"] {
    --page-width: 840px;
    --article-width: 640px;
  }
  :root[data-content-width="wide"] {
    --page-width: 1440px;
    --article-width: 1040px;
  }
}

/* Only article metadata follows Hide tags; tag pickers remain available for filtering. */
.headline-tags {
  display: inline;
  list-style: none;
  margin: 0 0 0 6px;
  padding: 0;
}
.headline-tags > li { display: inline-block; margin: 2px 6px 2px 0; }
.headline-tags .feed-tag { font: var(--text-caption)/1.5 var(--font-ui); }
:root[data-hide-tags="true"] .headline-tags { display: none; }

/* Imported URLs are untrusted text and may contain long query strings. */
#opml-issues { margin-block: 1rem; }
#opml-issues .opml-issue-url { overflow-wrap: anywhere; }

/* Keep tag batch actions compact and usable on narrow screens. */
.tag-filter-bulk { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 8px; }
.tag-filter-bulk[hidden] { display: none; }
.tag-filter-actions { flex-wrap: wrap; }

/* Separate the feed identity, primary actions, and quieter source metadata. */
.feed-header-actions {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
  max-width: 100%;
}
.feed-subscription { display: flex; }
.feed-header > .feed-signup { margin-top: 12px; max-width: 48rem; }
.feed-header-actions form, .feed-signup p { margin: 0; }
.feed-signup a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }

/* Give both feed actions the same width, typography, padding, and touch target. */
.feed-header-actions .feed-subscription button,
.feed-header-actions .visit-site {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 7px 12px;
  font: var(--text-control)/1.5 var(--font-ui);
  overflow-wrap: anywhere;
}
@media (max-width: 700px) {
  .feed-header-top { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .feed-header-actions { justify-self: start; }
  .feed-header-details { padding: 12px 14px; }
  .feed-header-meta { gap: 16px 24px; }
}

.curated-collections-link { display: inline-block; padding-block: 8px; color: var(--link); text-decoration: underline; text-underline-offset: 3px; }

/* Subscription management reuses Discover's source typography and link treatment. */
.subscription-filters { padding: 20px 0; border-bottom: 1px solid var(--line); }
.subscription-filter-row { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 20px; }
.subscription-search { display: flex; gap: 8px; flex: 1 1 300px; min-width: 0; }
.subscription-search input { flex: 1; width: 100%; min-width: 0; }
.subscription-sort { display: grid; gap: 4px; min-width: 0; }
.subscription-sort label { font-size: var(--text-caption); color: var(--muted); }
.subscription-filters .tag-choice { margin: 0; }
.subscription-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 16px 0 0; }
.subscription-select-all { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-control); }
.subscription-select, #subscription-select-all { width: 18px; height: 18px; margin: 0; accent-color: var(--link); cursor: pointer; }
.subscription-list { margin-top: 16px; }
.subscription-list .source-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; }
.subscription-list .source-row > form { margin: 0; }
.subscription-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.subscription-actions form { margin: 0; }
.category-picker { position: relative; font: var(--text-control)/1.5 var(--font-ui); }
.category-picker > summary { cursor: pointer; padding: 8px 14px; border: 1px solid var(--control-border); border-radius: 2px; }
.feed-header-actions .category-picker > summary { height: 100%; min-height: 44px; padding: 7px 12px; }
.category-picker .tag-filter-panel { width: min(360px, calc(100vw - 32px)); max-height: 70dvh; overflow-y: auto; }
@media (max-width: 600px) {
  .category-picker .tag-filter-panel { inset-inline-start: 0; inset-inline-end: auto; width: min(360px, calc(100vw - 2 * var(--gutter) - 38px)); }
}
.public-list .category-picker a { font: var(--text-control)/1.5 var(--font-ui); }
.category-picker fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.category-picker .tag-filter-options { grid-template-columns: minmax(0, 1fr); }
.category-picker [aria-busy=true] { opacity: .65; }
.subscription-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 7px; }
.subscription-list .subscription-followers { display: block; margin-top: 6px; color: var(--muted); font: var(--text-control)/1.5 var(--font-ui); }
.subscription-list .feed-tags { margin-top: 9px; }
.subscription-list .source-error { margin: 6px 0 0; }
.subscription-list .source-row:has(.subscription-select:checked) { background: var(--soft); }
@media (max-width: 600px) {
  .subscription-list .source-row { grid-template-columns: 22px minmax(0, 1fr); }
  .subscription-list .source-row > form { grid-column: 2; justify-self: start; }
  .subscription-list .subscription-actions { grid-column: 2; }
  .subscription-filter-row > .subscription-sort { width: 100%; }
}

/* Administration uses the same fonts, colors and content width as the reader. */
/* Match the content edges and notice typography, including the user's width and font choices. */
.site-announcement {
  width: calc(100% - 2 * var(--gutter));
  max-width: calc(var(--page-width) - 2 * var(--gutter));
  margin: 0 auto 16px;
  padding: 12px 15px;
  border: 1px solid var(--control-border);
  border-radius: 2px;
  background: var(--soft);
  color: var(--ink);
  font: var(--text-summary)/1.6 var(--font-ui);
  text-align: start;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.admin-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 24px; border-bottom: 1px solid var(--line); padding-bottom: 14px; font-size: var(--text-control); }
.admin-nav [aria-current="page"] { font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 16px; }
.admin-stats > div, .admin-panel { border: 1px solid var(--line); padding: 18px; background: var(--soft); }
.admin-stats dt { color: var(--muted); font-size: var(--text-control); }
.admin-stats dd { margin: 8px 0 0; font-size: var(--text-section-title); }
.admin-panel { margin: 24px 0; }
.admin-panel h2 { margin-top: 0; }
.admin-editor { max-width: 800px; margin-block: 24px; }
.admin-editor label:not(.admin-check) { display: block; margin: 18px 0 7px; font-size: var(--text-control); font-weight: 600; }
.admin-editor input:not([type=checkbox]):not([type=hidden]), .admin-editor textarea { width: 100%; }
.admin-editor textarea { resize: vertical; min-height: 6rem; border: 1px solid var(--control-border); border-radius: 2px; padding: 10px; color: var(--ink); background: var(--paper); }
.admin-editor fieldset { min-width: 0; margin: 24px 0; padding: 16px; border: 1px solid var(--line); }
.admin-check { display: inline-flex; gap: 8px; align-items: center; font-size: var(--text-control); }
.admin-check input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--link); }
.admin-tag-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 12px; }
.admin-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 20px; }
.admin-search { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.admin-search input[type=search] { flex: 1 1 250px; }
.admin-table-scroll { overflow-x: auto; max-width: 100%; }
.admin-table { border-collapse: collapse; width: 100%; font-size: var(--text-control); }
.admin-table th, .admin-table td { text-align: start; vertical-align: top; padding: 12px; border-bottom: 1px solid var(--line); min-width: 6rem; max-width: 28rem; overflow-wrap: anywhere; }
.admin-table th { background: var(--soft); font-weight: 600; }
.admin-table td form { margin: 0; }
.admin-table button { font-size: var(--text-caption); }
/* Keep table navigation beside records without widening the page or its scrolling tables. */
.admin-db-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem;
  grid-template-areas: "records tables";
  align-items: start;
  gap: 28px;
}
.admin-db-content { grid-area: records; min-width: 0; }
.admin-db-sidebar {
  grid-area: tables;
  position: sticky;
  top: 16px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  border: 1px solid var(--line);
  background: var(--soft);
  padding: 14px 8px;
}
.admin-db-sidebar h2 { margin: 0 8px 10px; font-size: var(--text-control); }
.admin-db-sidebar ul { list-style: none; margin: 0; padding: 0; }
.admin-db-sidebar a { display: grid; gap: 2px; padding: 9px 12px; overflow-wrap: anywhere; font-size: var(--text-control); }
.admin-db-sidebar a:hover { background: var(--paper); }
.admin-db-sidebar a[aria-current="page"] { background: var(--paper); box-shadow: inset 3px 0 0 var(--link); font-weight: 700; }
.admin-db-sidebar small { color: var(--muted); font-size: var(--text-caption); font-weight: 400; }
@media (max-width: 800px) {
  .admin-db-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tables" "records"; gap: 20px; }
  .admin-db-sidebar { position: static; max-height: 18rem; }
  .admin-db-sidebar ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
}
.admin-audit { padding-left: 24px; }
.admin-audit > li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.admin-audit pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 28rem; overflow: auto; font-size: var(--text-caption); background: var(--soft); padding: 12px; }

/* Reports and moderation notes remain plain text, including long URLs on narrow screens. */
.moderation-copy, .moderation-entries { overflow-wrap: anywhere; }
.moderation-entries { list-style: none; margin: 0; padding: 0; }
.moderation-entries > li { padding-block: 16px; border-bottom: 1px solid var(--line); }
.moderation-entries p { margin-block: 8px; }
.moderation-entries form { margin: 0; }
.moderation-reason { white-space: pre-wrap; }
.feed-report { margin: 14px 0 0; }
.feed-report .button { font: var(--text-control)/1.5 var(--font-ui); }

.source-review { margin-block: 1rem; overflow-wrap: anywhere; }
.source-review-actions { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem; }
.source-review-actions form { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem; }
.source-review-actions label { flex-basis: 100%; }
.source-review-actions input { min-width: 0; max-width: 100%; }

.source-review-actions .source-approval-tags { flex-basis: 100%; min-width: 0; width: 100%; }
.source-review-actions .admin-check { align-items: center; }

.source-approval-title { flex-basis: 100%; min-width: 0; }
.source-approval-title label { display: block; margin-bottom: .5rem; }
.source-approval-title input { width: 100%; }

.users-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin: 20px 0; }
.users-tools > div { min-width: 0; max-width: 100%; }
.users-tools label { display: block; margin-bottom: 6px; }
.users-tools .users-search { flex: 1 1 220px; }
.users-tools input, .users-tools select { display: block; width: 100%; }
.users-tools :is(input, select, button) {
  min-height: max(44px, calc(1.6em + 18px));
  padding-block: 8px;
  line-height: 1.6;
}
@media (max-width: 600px) {
  .users-tools :is(input, select, button) { font-size: max(16px, calc(16px * var(--font-scale))); }
}
.user-details { display: flex; flex-wrap: wrap; gap: 6px 16px; }

.admin-table .admin-action-link, .moderation-entries .admin-action-link {
  display: inline; padding: 0; border: 0; border-radius: 0; background: none;
  font: inherit; color: inherit; line-height: inherit; text-align: start;
}
.admin-table .admin-action-link:hover, .moderation-entries .admin-action-link:hover { background: none; text-decoration: underline; }

/* On-demand feed inspection, styled with the active reading theme. */
#feed-preview-dialog {
  --preview-padding: 20px;
  width: min(760px, calc(100% - 32px)); max-height: 85dvh;
  padding: 0; border: 1px solid var(--control-border); border-radius: 6px;
  background: var(--paper); color: var(--ink); overflow: auto;
  box-shadow: 0 12px 48px rgb(0 0 0 / 25%);
}
#feed-preview-dialog::backdrop { background: rgb(0 0 0 / 45%); }
.feed-preview-heading {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: var(--preview-padding); background: var(--paper); border-bottom: 1px solid var(--line);
}
#feed-preview-dialog [data-preview-body] { padding: 0 var(--preview-padding) var(--preview-padding); }
.feed-preview-heading h2, .feed-preview-heading form { margin: 0; }
.feed-preview-url { overflow-wrap: anywhere; color: var(--muted); }
.feed-xml { margin: 16px 0 0; padding: 14px; background: var(--soft); border: 1px solid var(--line);
  font: var(--text-control)/1.65 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; }
.feed-xml .xml-tag { color: light-dark(#145ba0, #8fc8ff); }
.feed-xml .xml-string { color: light-dark(#865000, #edc17e); }
.feed-xml .xml-comment { color: var(--muted); font-style: italic; }
.feed-xml .xml-cdata { color: light-dark(#346528, #a6d99a); }
.feed-xml .xml-entity { color: light-dark(#793d91, #d9a4ef); }
@media (max-width: 600px) {
  #feed-preview-dialog { --preview-padding: 14px; width: calc(100% - 20px); }
}

.category-editor { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 16px 0; }
.category-editor input { flex: 1 1 180px; max-width: 420px; }
.category-list { list-style: none; padding: 0; }
.category-list > li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.category-list > li > p { margin-top: 0; overflow-wrap: anywhere; }
.category-options { border: 0; padding: 0; margin: 16px 0; }
.category-options label { display: block; padding: 8px 0; overflow-wrap: anywhere; }
.category-options input { width: 18px; height: 18px; vertical-align: middle; }

.feedback-form { display: grid; gap: .65rem; max-width: 42rem; margin-block: 1rem 2rem; }
.feedback-form input, .feedback-form textarea { width: 100%; min-width: 0; box-sizing: border-box; font: inherit; }
.feedback-form textarea { resize: vertical; }
.feedback-form button { justify-self: start; }
.source-review-actions .feedback-form { display: grid; flex: 1 1 20rem; }
.feedback-form textarea { padding: .6rem; border: 1px solid var(--control-border); background: var(--paper); color: var(--ink); }

.feedback-fields { display: grid; gap: .65rem; min-width: 0; }
.feedback-fields select { width: 100%; min-width: 0; }

/* Restricted choices can still open the account explanation by mouse or keyboard. */
.view-picker option[aria-disabled="true"] { color: var(--muted); }

.reader-hint {
  position: fixed; z-index: 50; inset-inline-end: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom)); width: min(360px, calc(100vw - 32px));
  max-height: 45vh; overflow: auto; box-sizing: border-box;
  display: flex; align-items: flex-start; gap: 12px; padding: 16px;
  border: 1px solid var(--control-border); border-radius: 8px;
  background: var(--paper); color: var(--ink); box-shadow: 0 4px 20px #0002;
  font: var(--text-control)/1.5 var(--font-ui);
}
.reader-hint[hidden] { display: none; }
.reader-hint p { margin: 6px 0; }
.reader-hint form { margin: 0; flex-shrink: 0; }
.reader-hint button { min-width: 44px; min-height: 44px; padding: 4px; }
.reader-hint a { text-decoration: underline; }
@media print { .reader-hint { display: none !important; } }