/* Inter (SIL OFL, see fonts/LICENSE-inter.txt), self-hosted variable font. The latin-ext file is
   only downloaded when a page contains characters outside the latin range. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --reading-font: var(--font);  /* headline and body only; key 9 switches it to Source Serif 4 */
  --reading-weight: 300;
  --reading-scale: 1;  /* the reader's text size; set from app.js (= - 0), 5% steps from 0.8 to 1.75 */
  --bg: #000;
  --panel: #111;
  --line: #2a2a2a;
  --fg: #fff;
  --body: #bdbdbd;
  --muted: #7a7a7a;
  --accent: #f5c518;
  --mark: rgba(245, 197, 24, .35);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
html[data-reading-font="serif"] {
  --reading-font: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --reading-weight: 400;  /* Source Serif is finer than Inter at the same weight */
}
/* Source Serif 4 (SIL OFL, see fonts/LICENSE-source-serif-4.txt): the alternative reading font for the
   headline and body (key 9). Files are only downloaded once the page actually uses it.
   size-adjust evens out its smaller x-height so the two fonts read at a similar size. */
@font-face {
  font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap; size-adjust: 106%;
  src: url("/static/fonts/source-serif-4-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap; size-adjust: 106%;
  src: url("/static/fonts/source-serif-4-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4"; font-style: italic; font-weight: 200 900; font-display: swap; size-adjust: 106%;
  src: url("/static/fonts/source-serif-4-latin-wght-italic.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4"; font-style: italic; font-weight: 200 900; font-display: swap; size-adjust: 106%;
  src: url("/static/fonts/source-serif-4-latin-ext-wght-italic.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}


* { box-sizing: border-box; }
[hidden] { display: none !important; }  /* author display rules (display: grid...) would otherwise beat the hidden attribute */
html { background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--body);
  font-family: var(--font); -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid #6ea8fe; outline-offset: 2px; }

#topbar {
  position: sticky; top: 0; z-index: 10; height: 56px; padding: 0 16px 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
#source { display: flex; align-items: center; gap: 12px; min-width: 0; color: #ddd; font-size: 15px; }
.source-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-img { flex: none; border-radius: 6px; object-fit: contain; }
.icon-tile { flex: none; display: grid; place-items: center; width: var(--size); height: var(--size);
  border: 1.5px solid #ddd; border-radius: 6px; color: #ddd; font-size: calc(var(--size) * .5); font-weight: 600; }
#actions { display: flex; gap: 4px; }
#actions button {
  position: relative; width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 8px; color: #eee;
}
#actions button:hover { background: #1a1a1a; }
#actions svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
#btn-later[aria-pressed="true"] svg { fill: var(--accent); stroke: var(--accent); }
#btn-archive[aria-pressed="true"] svg { stroke: var(--accent); }
#btn-read[aria-pressed="true"] circle { fill: currentColor; }   /* filled = unread */
#note-dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--accent); }
#actions button[aria-pressed="true"]:not(#btn-later):not(#btn-archive):not(#btn-read) { background: #222; }

#content { padding: 40px 20px 30vh; }
#empty, #missing { max-width: 700px; margin-left: auto; margin-right: auto; }
/* The column widens with the text so a line keeps about the same number of characters. */
#article { max-width: calc(700px * var(--reading-scale)); margin-left: auto; margin-right: auto; }
#article:focus { outline: none; }
#title { font-family: var(--reading-font); margin: 0 0 calc(12px * var(--reading-scale)); color: var(--fg); font-size: calc(36px * var(--reading-scale)); line-height: 1.12; font-weight: 700;
  letter-spacing: -.01em; }
#title a { color: inherit; text-decoration: none; }
#byline { margin: 0 0 calc(28px * var(--reading-scale)); color: var(--muted); font-size: calc(16px * var(--reading-scale)); }
#body { font-family: var(--reading-font); font-size: calc(18px * var(--reading-scale)); line-height: 1.75; font-weight: var(--reading-weight); overflow-wrap: anywhere; }
#body a { color: var(--fg); text-decoration: underline; }
#body img, #body video, #body svg { max-width: 100%; height: auto; }
#body pre { overflow-x: auto; background: var(--panel); padding: 12px; border-radius: 6px; font-size: calc(16px * var(--reading-scale)); }
#body blockquote { margin: 1em 0; padding-left: 1em; border-left: 3px solid var(--line); color: #999; }
#body figure { margin: 1em 0; }
#body figcaption { color: var(--muted); font-size: calc(15px * var(--reading-scale)); }
#body mark { background: var(--mark); color: var(--fg); border-radius: 2px; }
#empty, #missing { color: var(--muted); font-size: 18px; text-align: center; margin-top: 20vh; }
#missing a { color: var(--fg); }

@media (max-width: 600px) {
  #title { font-size: calc(27px * var(--reading-scale)); }
  #body { font-size: calc(16px * var(--reading-scale)); }
  #topbar { padding-left: 16px; }
  #actions button { width: 40px; }
}

#reader-status { margin: -16px 0 24px; color: var(--muted); font-size: calc(15px * var(--reading-scale)); }
#reader-status.error { color: #ff8a80; }

#toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50;
  display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: #222;
  color: #eee; border: 1px solid #333; border-radius: 8px; font-size: 15px; }
.toast button { background: none; border: 0; padding: 4px 6px; color: var(--accent); font-weight: 600; }

/* panels */
.panel-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.panel-head h2 { margin: 0; font-size: 16px; color: var(--fg); flex: 1; }
.panel-head button { width: 32px; height: 32px; background: none; border: 0; border-radius: 6px;
  font-size: 22px; line-height: 1; color: #ccc; }
.panel-head button:hover { background: #222; }
#note-status { color: var(--muted); font-size: 13px; }

#notes-panel { position: fixed; z-index: 20; background: var(--panel); border: 0 solid var(--line);
  display: flex; flex-direction: column; }
#notes-panel[hidden] { display: none; }
#note-text { flex: 1; resize: none; margin: 0 16px 16px; padding: 12px; background: #000;
  color: #ddd; border: 1px solid var(--line); border-radius: 8px; font: 16px/1.6 var(--font); }
@media (min-width: 900px) {
  #notes-panel { top: 56px; right: 0; bottom: 0; width: 360px; border-left-width: 1px; }
  body.notes-open #content { margin-right: 360px; }
}
@media (max-width: 899px) {
  #notes-panel { left: 0; right: 0; bottom: 0; height: 45vh; border-top-width: 1px;
    border-radius: 12px 12px 0 0; }
  body.notes-open #content { padding-bottom: 50vh; }
}

.backdrop { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .6);
  display: flex; justify-content: center; align-items: flex-start; padding: 8vh 16px 16px; }
.backdrop[hidden] { display: none; }
.backdrop.modal { z-index: 40; align-items: center; padding-top: 16px; }
#feeds-panel { width: 100%; max-width: 640px; max-height: 84vh; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
/* Top padding leaves room for the input's focus ring, which a scroll container would clip. */
#feeds-main { padding: 6px 16px 16px; overflow-y: auto; }
#subscribe-form { display: flex; gap: 8px; }
#feed-url { flex: 1; min-width: 0; padding: 10px 12px; background: #000; color: #eee;
  border: 1px solid var(--line); border-radius: 8px; font: 16px var(--font); }
#subscribe-form button, .confirm button { padding: 10px 16px; background: #222; border: 1px solid #333;
  border-radius: 8px; color: #eee; }
#subscribe-form button:hover, .confirm button:hover { background: #2c2c2c; }
#subscribe-msg { margin: 10px 0 0; font-size: 14px; color: #9ad19a; }
#subscribe-msg.error { color: #ff8a80; }
#feed-list { list-style: none; margin: 16px 0 0; padding: 0; }
#feed-list li { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.feed-info { flex: 1; min-width: 0; }
.feed-title { color: var(--fg); font-weight: 600; }
.feed-url, .feed-meta { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-error { color: #ff8a80; font-size: 13px; }
.feed-delete { background: none; border: 1px solid #333; border-radius: 6px; padding: 6px 10px; color: #ccc; font-size: 13px; }
.feed-delete:hover { background: #2a1414; color: #ff8a80; }

.confirm { margin: 0 16px 16px; padding: 16px; background: #1a1a1a; border: 1px solid #444;
  border-radius: 10px; color: #ddd; }
.backdrop.modal .confirm { margin: 0; max-width: 460px; background: var(--panel); }
.confirm p { margin: 0 0 16px; line-height: 1.5; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.confirm .danger { background: #5a1c1c; border-color: #7a2a2a; }
.confirm .danger:hover { background: #722424; }

/* login */
body.login { display: grid; place-items: center; min-height: 100vh; }
#login-form { display: flex; flex-direction: column; gap: 12px; width: min(320px, 90vw); }
#login-form h1 { margin: 0 0 8px; color: var(--fg); text-align: center; }
#login-form input { padding: 12px; background: #000; color: #eee; border: 1px solid var(--line);
  border-radius: 8px; font: 16px var(--font); }
#login-form button { padding: 12px; background: #222; border: 1px solid #333; border-radius: 8px; color: #eee; }
#login-form button:hover { background: #2c2c2c; }
#login-error { margin: 0; color: #ff8a80; font-size: 14px; text-align: center; }

/* shortcut help */
#help-panel { width: 100%; max-width: 420px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding-bottom: 8px; }
#help-panel:focus, #feeds-panel:focus { outline: none; }
#help-list { margin: 0; padding: 0 16px 8px; display: grid; grid-template-columns: auto 1fr;
  gap: 10px 16px; align-items: center; }
#help-list dt { text-align: right; }
#help-list dd { margin: 0; color: #ccc; }
kbd { display: inline-block; min-width: 28px; padding: 3px 8px; text-align: center; background: #222;
  border: 1px solid #3a3a3a; border-bottom-width: 2px; border-radius: 6px; color: var(--fg);
  font: 600 14px var(--font); }

/* list overlay (starred, notes & highlights) */
#list-panel { width: 100%; max-width: 640px; max-height: 84vh; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
#list-panel:focus { outline: none; }
#list-tabs { flex: 1; display: flex; gap: 6px; }
#list-tabs button { display: flex; align-items: center; gap: 8px; width: auto; height: auto; padding: 6px 12px;
  background: none; border: 1px solid transparent; border-radius: 8px; color: var(--muted); font-size: 15px; font-weight: 600; }
#list-tabs button:hover { background: #1c1c1c; }
#list-tabs button[aria-selected="true"] { background: #232323; border-color: #333; color: var(--fg); }
#list-tabs kbd { min-width: 0; padding: 0 6px; font-size: 12px; }
#list-hint { padding: 0 16px 8px; color: var(--muted); font-size: 13px; }
#list-rows { list-style: none; margin: 0; padding: 0 8px 8px; overflow-y: auto; }
#list-rows:focus { outline: none; }
.list-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.list-item[aria-selected="true"] { background: #232323; box-shadow: inset 3px 0 0 var(--accent); }
.list-info { flex: 1; min-width: 0; }
.list-title { color: var(--fg); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-meta { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-mark { flex: none; width: 20px; height: 20px; fill: none; stroke: #666; stroke-width: 1.6;
  stroke-linejoin: round; stroke-linecap: round; }
.list-mark.later { fill: var(--accent); stroke: var(--accent); }
.list-mark.archived { stroke: var(--accent); }
.list-item.removed { opacity: .5; }
#list-empty { margin: 8px 16px 24px; color: var(--muted); }
#list-rows:empty { display: none; }

/* /save result page */
.save-result { text-align: center; max-width: 480px; padding: 0 16px; }
.save-result h1 { color: var(--fg); font-size: 24px; margin: 0 0 12px; }
.save-result p { margin: 0 0 12px; color: #ccc; overflow-wrap: anywhere; }
.save-result a { color: var(--fg); }

.queue-badge { flex: none; padding: 1px 8px; border: 1px solid #333; border-radius: 999px; color: var(--muted);
  font-size: 12px; font-weight: 600; }
#body .muted-note { color: var(--muted); font-style: italic; }

/* link mode (Q): numbers drawn with CSS counters so the article's text nodes stay untouched. The
   badge is absolutely positioned at the point where it would have sat in the line, then lifted
   above it with a transform (which takes no space), so turning the mode on can't move any text. */
#body.link-mode { counter-reset: link; }
#body.link-mode a[href^="http"] { counter-increment: link; }
#body.link-mode a[href^="http"]::after { content: counter(link); position: absolute; transform: translate(3px, -0.85em);
  padding: 0 5px; border-radius: 4px; background: var(--accent); color: #000; font-family: var(--font);
  font-size: calc(11px * var(--reading-scale)); font-weight: 700; line-height: 1.5; white-space: nowrap;
  text-decoration: none; pointer-events: none; }
#body a.link-target { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
#link-bar { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 45;
  padding: 10px 16px; background: #222; color: #eee; border: 1px solid var(--accent); border-radius: 8px; font-size: 15px; }
#link-bar b { color: var(--accent); }

#opml-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
#opml-row button { padding: 6px 12px; background: none; border: 1px solid #333; border-radius: 8px; color: #ccc; font-size: 13px; }
#opml-row button:hover { background: #222; }
#opml-row a { color: var(--muted); font-size: 13px; }
#opml-row a:hover { color: var(--fg); }

/* text-size hint (= - 0) */
#size-hint { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 46;
  padding: 8px 14px; background: #222; color: #eee; border: 1px solid #333; border-radius: 8px; font-size: 14px; }

/* where a link goes: shown on hover, on keyboard focus and while numbering links (Q) */
#link-pill { position: fixed; left: 12px; bottom: 12px; z-index: 44; max-width: min(72vw, 760px);
  padding: 6px 10px; background: #1d1d1d; color: #999; border: 1px solid #333; border-radius: 6px; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
#link-pill.lifted { bottom: 76px; }  /* clear of the link-number bar */
.pill-host { color: var(--fg); font-weight: 600; }
.pill-scheme { color: #ff8a80; }
.pill-tag { margin-left: 10px; padding: 0 6px; border-radius: 4px; background: var(--accent); color: #000;
  font-size: 11px; font-weight: 700; }
.pill-tag.archived { background: #444; color: #ddd; }