/* Gruvbox (https://github.com/morhetz/gruvbox), as on rhys.wtf: the light
   palette by default, the dark one when the OS prefers dark or dark was
   chosen. The raw slots carry Gruvbox's names and the shared set every
   rhys.wtf app uses; palettes.css (loaded after this file) redefines them
   for the other palettes (Solarized, Boring) when `data-palette` is on
   <html>. Components use only the semantic tokens below the slots, and
   the semantic tokens reference only the slots: keep it so. */
:root {
  --gruvbox-bg0-hard: #f9f5d7;
  --gruvbox-bg0: #fbf1c7;
  --gruvbox-bg0-soft: #f2e5bc;
  --gruvbox-bg1: #ebdbb2;
  --gruvbox-bg2: #d5c4a1;
  --gruvbox-bg3: #bdae93;
  --gruvbox-bg4: #a89984;

  --gruvbox-fg0: #282828;
  --gruvbox-fg1: #3c3836;
  --gruvbox-fg2: #504945;
  --gruvbox-fg3: #665c54;
  --gruvbox-fg4: #7c6f64;

  --gruvbox-gray: #928374;

  --gruvbox-red: #cc241d;
  --gruvbox-green: #98971a;
  --gruvbox-yellow: #d79921;
  --gruvbox-blue: #458588;
  --gruvbox-purple: #b16286;
  --gruvbox-aqua: #689d6a;
  --gruvbox-orange: #d65d0e;

  --gruvbox-red-faded: #9d0006;
  --gruvbox-green-faded: #79740e;
  --gruvbox-yellow-faded: #b57614;
  --gruvbox-blue-faded: #076678;
  --gruvbox-purple-faded: #8f3f71;
  --gruvbox-aqua-faded: #427b58;
  --gruvbox-orange-faded: #af3a03;

  /* The dark palette, held here and copied over the light slots by the two
     dark blocks below (the -bright accents over the -faded ones), so the
     values exist in one place and palettes.css only has to redefine slots. */
  --gruvbox-dark-bg0-hard: #1d2021;
  --gruvbox-dark-bg0: #282828;
  --gruvbox-dark-bg0-soft: #32302f;
  --gruvbox-dark-bg1: #3c3836;
  --gruvbox-dark-bg2: #504945;
  --gruvbox-dark-bg3: #665c54;
  --gruvbox-dark-bg4: #7c6f64;
  --gruvbox-dark-fg0: #fbf1c7;
  --gruvbox-dark-fg1: #ebdbb2;
  --gruvbox-dark-fg2: #d5c4a1;
  --gruvbox-dark-fg3: #bdae93;
  --gruvbox-dark-fg4: #a89984;
  --gruvbox-dark-red-bright: #fb4934;
  --gruvbox-dark-green-bright: #b8bb26;
  --gruvbox-dark-yellow-bright: #fabd2f;
  --gruvbox-dark-blue-bright: #83a598;
  --gruvbox-dark-purple-bright: #d3869b;
  --gruvbox-dark-aqua-bright: #8ec07c;
  --gruvbox-dark-orange-bright: #fe8019;

  /* Glyphs on an accent fill (app icons), the same in both schemes.
     palettes.css sets it for each palette. */
  --color-on-accent: #fbf1c7;

  /* Semantic tokens. The accents are the -faded slots: faded in light,
     bright in dark. */
  --bg: var(--gruvbox-bg0);
  --panel: var(--gruvbox-bg0-hard);
  --sidebar: var(--gruvbox-bg0-soft);
  --text: var(--gruvbox-fg1);
  --muted: var(--gruvbox-fg3);
  --line: var(--gruvbox-bg2);
  --accent: var(--gruvbox-orange-faded);
  --accent-soft: var(--gruvbox-bg1);
  --link: var(--gruvbox-blue-faded);
  --selected: color-mix(in srgb, var(--gruvbox-yellow-faded) 14%, var(--bg));
  --error: var(--gruvbox-red-faded);
  --star: var(--gruvbox-yellow-faded);
  /* The header's logo, app name and toggle: fg3 in light, fg0 in dark, as
     on rhys.wtf and profiles. */
  --header-ink: var(--gruvbox-fg3);

  --radius: 6px;
  /* Type (the faces and --font-ui, --font-body, --font-display,
     --font-italic, --font-mono) is rhyswtf-apps' type.css, linked last:
     Recoleta for reading, RecoletaBold for headings, Figtree for the
     interface, Lora Italic for the logo, Monaspace for code. */
  color-scheme: light;
}

/* The dark scheme, in two cases which must stay identical: the OS prefers
   dark and light wasn't chosen in Settings, or dark was chosen
   (`data-theme`, from the `rhys_theme` cookie). As profiles and dailies:
   the page on bg1, the panels on the darker bg0-hard so they stand out,
   text in the brightest foreground. Muted text stays a step down (fg2),
   since here it's what tells a read entry from an unread one, and links
   keep their blue. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --gruvbox-bg0-hard: var(--gruvbox-dark-bg0-hard);
    --gruvbox-bg0: var(--gruvbox-dark-bg0);
    --gruvbox-bg0-soft: var(--gruvbox-dark-bg0-soft);
    --gruvbox-bg1: var(--gruvbox-dark-bg1);
    --gruvbox-bg2: var(--gruvbox-dark-bg2);
    --gruvbox-bg3: var(--gruvbox-dark-bg3);
    --gruvbox-bg4: var(--gruvbox-dark-bg4);
    --gruvbox-fg0: var(--gruvbox-dark-fg0);
    --gruvbox-fg1: var(--gruvbox-dark-fg1);
    --gruvbox-fg2: var(--gruvbox-dark-fg2);
    --gruvbox-fg3: var(--gruvbox-dark-fg3);
    --gruvbox-fg4: var(--gruvbox-dark-fg4);
    --gruvbox-red-faded: var(--gruvbox-dark-red-bright);
    --gruvbox-green-faded: var(--gruvbox-dark-green-bright);
    --gruvbox-yellow-faded: var(--gruvbox-dark-yellow-bright);
    --gruvbox-blue-faded: var(--gruvbox-dark-blue-bright);
    --gruvbox-purple-faded: var(--gruvbox-dark-purple-bright);
    --gruvbox-aqua-faded: var(--gruvbox-dark-aqua-bright);
    --gruvbox-orange-faded: var(--gruvbox-dark-orange-bright);
    --bg: var(--gruvbox-bg1);
    --panel: var(--gruvbox-bg0-hard);
    --sidebar: var(--gruvbox-bg0);
    --text: var(--gruvbox-fg0);
    --muted: var(--gruvbox-fg2);
    --accent-soft: var(--gruvbox-bg2);
    --header-ink: var(--gruvbox-fg0);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --gruvbox-bg0-hard: var(--gruvbox-dark-bg0-hard);
  --gruvbox-bg0: var(--gruvbox-dark-bg0);
  --gruvbox-bg0-soft: var(--gruvbox-dark-bg0-soft);
  --gruvbox-bg1: var(--gruvbox-dark-bg1);
  --gruvbox-bg2: var(--gruvbox-dark-bg2);
  --gruvbox-bg3: var(--gruvbox-dark-bg3);
  --gruvbox-bg4: var(--gruvbox-dark-bg4);
  --gruvbox-fg0: var(--gruvbox-dark-fg0);
  --gruvbox-fg1: var(--gruvbox-dark-fg1);
  --gruvbox-fg2: var(--gruvbox-dark-fg2);
  --gruvbox-fg3: var(--gruvbox-dark-fg3);
  --gruvbox-fg4: var(--gruvbox-dark-fg4);
  --gruvbox-red-faded: var(--gruvbox-dark-red-bright);
  --gruvbox-green-faded: var(--gruvbox-dark-green-bright);
  --gruvbox-yellow-faded: var(--gruvbox-dark-yellow-bright);
  --gruvbox-blue-faded: var(--gruvbox-dark-blue-bright);
  --gruvbox-purple-faded: var(--gruvbox-dark-purple-bright);
  --gruvbox-aqua-faded: var(--gruvbox-dark-aqua-bright);
  --gruvbox-orange-faded: var(--gruvbox-dark-orange-bright);
  --bg: var(--gruvbox-bg1);
  --panel: var(--gruvbox-bg0-hard);
  --sidebar: var(--gruvbox-bg0);
  --text: var(--gruvbox-fg0);
  --muted: var(--gruvbox-fg2);
  --accent-soft: var(--gruvbox-bg2);
  --header-ink: var(--gruvbox-fg0);
}

* { box-sizing: border-box; }

/* Sizes in rem from the reader's own text size (a 100% root); the
   interface is a little under it. */
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
}

body { font: 300 0.9375rem/1.5 var(--font-ui); }

a { color: var(--link); }

.muted { color: var(--muted); }
.small { font-size: 0.85em; }
/* On the panel, not the page: in the dark schemes the bright reds only
   pass AA on the darker surface (Gruvbox's #fb4934 is 3.4:1 on its dark
   page, 4.8:1 on the panel). */
.error { color: var(--error); background: var(--panel); padding: 0.4rem 0.6rem; border-radius: var(--radius); }
.note { color: var(--muted); }
.empty { color: var(--muted); padding: 2rem 0; text-align: center; }

/* An admin reading someone else's feeds: whose, read-only, recorded. */
.admin-banner {
  font-weight: 700;
  padding: .6rem 1rem;
  margin: 0 0 1rem;
  border: 2px solid var(--accent);
  border-radius: 1rem;
  background: var(--accent-soft);
  color: var(--text);
}

/* The rhys.wtf header, as on profiles.rhys.wtf: logo and app name on the
   left; the light/dark toggle and the profiles mark on the right. */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 var(--safe-right) 0 var(--safe-left);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.site-header__brand {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  min-width: 0;
}

/* Lora Italic is an italic design used upright (type.css): no slant on
   top of it. Smaller in a narrow window, by its width: 36px to 45px, as
   it was at a 360px and a 760px-plus window. */
.site-header__title {
  font: 400 clamp(2.25rem, 1.8rem + 2vw, 2.8125rem)/1.3 var(--font-italic);
  color: var(--header-ink);
  text-decoration: none;
}

.site-header__app {
  font: 400 clamp(1.22rem, 1.05rem + 0.8vw, 1.5rem) var(--font-ui);
  color: var(--header-ink);
  text-decoration: none;
}

.site-header__title:hover,
.site-header__app:hover { text-decoration: underline; }

/* Tight enough that the logo, the app's name and these fit one line in a
   360px window, with the sidebar's control. */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* The apps mark and switcher, as on profiles.rhys.wtf: a rounded square
   per app in its Gruvbox colour (faded in light, bright in dark), opening
   a list of the apps and, under a rule, the light/dark switch. A
   <details>, so the menu needs no script. Red is profiles, purple feeds,
   orange dailies, aqua diagrams, gray dashboards. */
.apps-mark { width: 2rem; height: 2rem; display: block; }
.apps-mark__red { fill: var(--gruvbox-red-faded); }
.apps-mark__orange { fill: var(--gruvbox-orange-faded); }
.apps-mark__yellow { fill: var(--gruvbox-yellow-faded); }
.apps-mark__green { fill: var(--gruvbox-green-faded); }
.apps-mark__blue { fill: var(--gruvbox-blue-faded); }
.apps-mark__purple { fill: var(--gruvbox-purple-faded); }
.apps-mark__aqua { fill: var(--gruvbox-aqua-faded); }
.apps-mark__gray { fill: var(--gruvbox-gray); }

.apps-menu__rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0.5rem 0.25rem;
}

/* The switch is laid out like an app: glyph in a 2rem box, then its name
   (rhyswtf-axum's markup). The moon and "Dark mode" show in the light
   scheme, the sun and "Light mode" in the dark. */
.theme-toggle { margin: 0; }

.theme-toggle__button {
  width: 100%;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.theme-toggle__glyph {
  width: 2rem;
  height: 2rem;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--header-ink);
}

.theme-toggle__icon, .menu-icon { width: 1.5rem; height: 1.5rem; display: none; }
.menu-icon, .theme-toggle__icon--moon, .theme-toggle__label--to-dark { display: block; }
.theme-toggle__label--to-light { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__icon--moon,
  :root:not([data-theme="light"]) .theme-toggle__label--to-dark { display: none; }
  :root:not([data-theme="light"]) .theme-toggle__icon--sun,
  :root:not([data-theme="light"]) .theme-toggle__label--to-light { display: block; }
}

:root[data-theme="dark"] .theme-toggle__icon--moon,
:root[data-theme="dark"] .theme-toggle__label--to-dark { display: none; }
:root[data-theme="dark"] .theme-toggle__icon--sun,
:root[data-theme="dark"] .theme-toggle__label--to-light { display: block; }

.app-icon { width: 2rem; height: 2rem; flex: none; line-height: 0; }
.app-icon svg { width: 100%; height: 100%; }
.app-icon--red .app-icon__back { fill: var(--gruvbox-red-faded); }
.app-icon--purple .app-icon__back { fill: var(--gruvbox-purple-faded); }
.app-icon--blue .app-icon__back { fill: var(--gruvbox-blue-faded); }
.app-icon--green .app-icon__back { fill: var(--gruvbox-green-faded); }
.app-icon--orange .app-icon__back { fill: var(--gruvbox-orange-faded); }
.app-icon--yellow .app-icon__back { fill: var(--gruvbox-yellow-faded); }
.app-icon--aqua .app-icon__back { fill: var(--gruvbox-aqua-faded); }
.app-icon--gray .app-icon__back { fill: var(--gruvbox-gray); }
/* The glyphs carry fill="#fbf1c7" for copies without this stylesheet;
   here they follow the palette. */
.app-icon g,
.app-icon text { fill: var(--color-on-accent); }
.app-icon [stroke]:not([stroke="none"]) { stroke: var(--color-on-accent); }

.apps-menu { position: relative; }
.apps-menu__button { list-style: none; cursor: pointer; padding: 0.3rem; border-radius: 0.6rem; line-height: 0; }
.apps-menu__button::-webkit-details-marker { display: none; }
.apps-menu__button:hover,
.apps-menu[open] .apps-menu__button { background: var(--panel); }
.apps-menu__button:focus-visible { outline: 2px solid var(--link); }

.apps-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  z-index: 20;
  min-width: 17rem;
  padding: 0.5rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
}

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

.apps-menu__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.6rem;
  border-radius: 0.6rem;
  text-decoration: none;
  color: var(--text);
}

.apps-menu__item:hover,
.apps-menu__item:focus-visible { background: var(--bg); }

.apps-menu__text { display: flex; flex-direction: column; min-width: 0; }
.apps-menu__name { font-size: 1.05rem; font-weight: 400; }
.apps-menu__desc { font-size: 0.85rem; color: var(--muted); }

/* Layout: the sidebar and the page are rhyswtf-apps' panes (layout.css,
   a peek row): side by side where both fit, the sidebar holding still;
   narrower, swiped, opening on the page. Each pads itself
   (--pane-padding), clear of a phone's rounded corners. */

/* Centred in its column, a little wider than the old 900px; its sides
   narrower in a narrow window, by its width. */
.main {
  --pane-padding: 0 max(clamp(0.75rem, 3vw, 1.5rem), env(safe-area-inset-right)) 4rem
    max(clamp(0.75rem, 3vw, 1.5rem), env(safe-area-inset-left));
  padding: var(--pane-padding);
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  container: main / inline-size;
}

/* Sidebar: as tall as the window at least, so its colour runs down
   the side. */
.sidebar {
  --pane-padding: 0.75rem 0.5rem 2rem max(0.5rem, env(safe-area-inset-left));
  background: var(--sidebar);
  border-right: 1px solid var(--line);
  min-height: 100vh;
  min-height: 100dvh;
}

/* The header's way to the sidebar while it's swiped out of sight
   (layout.css hides it when it's beside the page): the sidebar's glyph
   in a 44px circle, named "Feeds". A label doesn't fit a 360px header
   beside the logo, the app's name, the picture and the apps mark. */
.feeds-jump {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel);
  color: var(--header-ink);
  -webkit-tap-highlight-color: transparent;
}

.feeds-jump:hover { border-color: var(--muted); }
/* Pressed while the sidebar is the pane in sight (the panes feature sets
   aria-expanded as you tap or swipe); a press as you tap it. */
.feeds-jump[aria-expanded="true"] {
  background: var(--header-ink);
  border-color: var(--header-ink);
  color: var(--panel);
}
.feeds-jump:active { transform: scale(0.92); }
.feeds-jump:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.feeds-jump__icon { width: 1.4rem; height: 1.4rem; }

.search-form input {
  width: 100%;
  margin: 0 0 0.75rem;
}

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

.nav-list--footer {
  margin-top: 1rem;
  border-top: 1px solid var(--line);
  padding-top: 0.5rem;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  font-size: 0.93rem;
}

.nav-link:hover { background: var(--line); }
.nav-link[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
/* Emphasis by ink, not weight: the interface stays at Figtree 300/400. */
.nav-link--top { font-weight: 400; }
.nav-link--cat { font-weight: 400; display: inline-flex; width: calc(100% - 1.25rem); }
.nav-link--error .nav-link__text::after { content: " ⚠"; color: var(--error); }
/* Sign out: a form's button, drawn as the links above it. */
.nav-form { margin: 0; }
.nav-link--button { width: 100%; background: none; border: 0; font: inherit; font-size: 0.93rem; cursor: pointer; text-align: left; }

.nav-link__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.count {
  font-size: 0.8rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.nav-cat { margin: 0.25rem 0; }
.nav-cat summary { cursor: pointer; padding-left: 0.25rem; }
.nav-cat summary::marker { color: var(--muted); }
/* A category's feeds sit a little in from its name, which starts after
   the disclosure marker. */
.nav-cat .nav-list { padding-left: 1.8rem; }

/* Controls */

input[type="text"], input[type="search"], select {
  font: inherit;
  color: inherit;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.35rem 0.55rem;
}

input[type="text"] { min-width: 0; flex: 1; }

.btn {
  font: inherit;
  font-size: 0.9rem;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.3rem 0.75rem;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.btn:hover { border-color: var(--muted); }
.btn--quiet { background: transparent; }
.btn--danger { color: var(--error); }
.btn:disabled { opacity: 0.6; cursor: default; }

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0.5rem 0;
}

.choices { border: 0; margin: 0; padding: 0; }
.choices legend { padding: 0; margin-bottom: 0.25rem; }

.check {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0.4rem 0;
}

/* Toolbar */

.toolbar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding: 0.75rem 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.toolbar__title { font: 700 1.3rem var(--font-display); margin: 0; }
.toolbar__msg { font-size: 0.9rem; }

/* Entries */

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

.entry { border-bottom: 1px solid var(--line); }
.entry--selected { background: var(--selected); }

/* The star sits top right, above the time at the end of the second
   line; the title stops short of it. */
.entry__row {
  position: relative;
  display: flex;
}

.entry__star {
  position: absolute;
  top: 0.35rem;
  right: 0.15rem;
  background: none;
  border: 0;
  padding: 0.1rem 0.3rem;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}

.entry__star--on { color: var(--star); }
.star-form, .read-form { margin: 0; }
form[aria-busy] { opacity: 0.6; }

/* The public view has nothing to star or mark. */
.entries--read-only .entry__star,
.entries--read-only .entry__read-toggle { display: none; }
.entries--read-only .entry__title { padding-right: 0; }

/* Two lines per entry: the title, then feed · author · time. With
   thumbnails on, a picture sits to the left spanning both lines. */
.entry__head {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "title" "meta";
  gap: 0.15rem 0.85rem;
  align-items: start;
  background: none;
  border: 0;
  padding: 0.7rem 0.45rem 0.7rem 0.6rem;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  line-height: 1.4;
}

/* A link (to the entry's page), drawn as the row. */
a.entry__head { text-decoration: none; }
a.entry__head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.entry__head--thumbs {
  grid-template-columns: 5.5rem minmax(0, 1fr);
  grid-template-areas: "thumb title" "thumb meta";
}

.entry__thumb {
  grid-area: thumb;
  width: 5.5rem;
  height: 3.75rem;
  border-radius: var(--radius);
  background: var(--accent-soft);
  overflow: hidden;
}

.entry__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.entry__title {
  grid-area: title;
  padding-right: 2rem;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entry__meta-line {
  grid-area: meta;
  display: flex;
  gap: 0.6rem;
  min-width: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.entry__feed, .entry__author, .entry__time {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entry__feed { flex: 0 1 auto; max-width: 14rem; }
.entry__author { flex: 0 1 auto; max-width: 12rem; }
.entry__author::before { content: "by "; }
.entry__time { flex: 0 0 auto; margin-left: auto; font-variant-numeric: tabular-nums; }

.entry--read .entry__title { font-weight: 300; color: var(--muted); }
.entry--read .entry__thumb { opacity: 0.6; }
.entry--open .entry__title { white-space: normal; }

.entry__body {
  padding: 0 1rem 1.5rem 0.6rem;
}

.entry__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}

/* "Save to Links": a link once saved, else a button that opens a form
   under it. */
.save-links { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; }
.save-links__more > summary { list-style: none; display: inline-block; }
.save-links__more > summary::-webkit-details-marker { display: none; }
.save-links-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
}
.save-links-form input[type="text"] { flex: 1 1 12rem; }
.save-links-form .check { margin: 0; }

/* Subscribe, when a site has several feeds: one to choose. */
.choose-feed { margin-bottom: 1rem; }
.choose-feed .check { align-items: baseline; }

.content {
  font: 400 18px/28px var(--font-body);
  max-width: 34em;
  overflow-wrap: anywhere;
}

.content img, .content video, .content picture {
  max-width: 100%;
  height: auto;
}

.content strong, .content b { font-weight: 700; }

.content h1, .content h2, .content h3, .content h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
}

/* Monaspace with texture healing and its stylistic set. */
.content code, .content pre, .content kbd, .content samp {
  font-family: var(--font-mono);
  font-feature-settings: "calt", "ss01";
}

.content :not(pre) > code {
  font-size: 0.9em;
  padding: 0 4px;
  background: var(--accent-soft);
  border-radius: 2px;
}

.content pre {
  overflow-x: auto;
  font-size: 14px;
  line-height: 22px;
  background: var(--sidebar);
  padding: 0.75rem;
  border-radius: var(--radius);
}

.content blockquote {
  margin-left: 0;
  padding-left: 1rem;
  border-left: 3px solid var(--line);
  color: var(--muted);
}

.more { margin: 1rem auto; display: block; width: fit-content; }
.more[aria-busy] { opacity: 0.6; }

/* Pages */

.page { max-width: 760px; padding-top: 1rem; }
.page--wide { max-width: none; }
.page h1 { font: 700 2rem/1.15 var(--font-display); }
.page h2 { font: 700 1.3rem/1.3 var(--font-display); margin: 0 0 0.5rem; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1rem;
}

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

.sub {
  border-top: 1px solid var(--line);
  padding: 0.6rem 0;
}

.sub__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
  font-size: 0.9rem;
}

.sub__title { font-weight: 400; font-size: 1rem; }
.sub__url { overflow-wrap: anywhere; }

.keys {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 1rem;
  margin: 0;
}

.keys dt { font-family: var(--font-mono); }
.keys dd { margin: 0; }

.health { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.health th, .health td { text-align: left; padding: 0.4rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.health td:first-child { overflow-wrap: anywhere; }
.health--bad { background: color-mix(in srgb, var(--error) 8%, transparent); }

.signed-out { max-width: 30rem; margin: 20vh auto; text-align: center; }

/* Unsubscribe asks first: its button opens the one that does it. */
.confirm > summary { list-style: none; display: inline-block; }
.confirm > summary::-webkit-details-marker { display: none; }
.confirm[open] > summary { display: none; }
.sub__daily { margin: 0.25rem 0 0; }

/* A narrow list (by its own width: under 36rem, about 60 characters a
   line): titles wrap to two lines rather than end in "…", thumbnails and
   the feed and author names give way. */
@container main (width < 36rem) {
  .entry__title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
  .entry--open .entry__title { display: block; }
  .entry__head--thumbs { grid-template-columns: 4rem minmax(0, 1fr); }
  .entry__thumb { width: 4rem; height: 3rem; }
  .entry__feed, .entry__author { max-width: 9rem; }
  .entry__body { padding: 0 0.25rem 1.25rem; }
}

/* Fetch schedule form (Feed health). */
input.num { width: 5rem; }
.health select { font: inherit; font-size: 0.85rem; color: inherit; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.15rem 0.3rem; }

/* A subscription's daily summary in Dailies. */
.sub__daily {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
  font-size: 0.9rem;
}

.sub__daily .check { margin: 0.2rem 0; }

/* Comments (comments.rhys.wtf's thread, styled by comments.css, which
   speaks the shared --color-* tokens and --gruvbox-* slots): the section
   under an open entry, and the "💬 n" beside titles in the list. */
:root {
  --color-bg: var(--bg);
  --color-surface: var(--panel);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-track: var(--line);
  --color-link: var(--link);
  --color-link-hover: var(--accent);
  --color-error: var(--error);
}

.entry__comments {
  margin: 1.5rem 0 0;
  max-width: 48rem;
  border-top: 1px solid var(--line);
  padding-top: 0.75rem;
}

.entry__comments-summary {
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--muted);
}

.entry__comments[open] > .entry__comments-summary { margin-bottom: 0.75rem; }
/* The note above says why this account can't post; the thread's own
   "Sign in to comment." would say it twice. */
.entry__comments--read-only .comments__signin { display: none; }

.entry__comment-count {
  margin-left: 0.5rem;
  font-size: 0.85rem;
  color: var(--muted);
  white-space: nowrap;
}

/* Pages without the sidebar (the welcome page at /, messages): the page
   across the whole width. The owner's public reader is at /public, with
   the sidebar. */
.main--plain { padding-top: 1rem; }
/* Feeds' body is Figtree Light: the welcome page's text reads in
   Recoleta, as it does in the other apps. */
.welcome { font-family: var(--font-body); font-weight: 400; font-size: 1rem; }
.welcome .welcome__title, .welcome .welcome__heading, .welcome .welcome-card__head { font-weight: 700; }

/* As in every rhys.wtf app: off screen until a keyboard reaches it. */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  padding: 0.5rem 1rem;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  z-index: 10;
}

.skip-link:focus { left: 1rem; top: 1rem; }

/* For screen readers only: a list's heading, say. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* An entry's own page (/f/{feed}/e/{entry}). */
.entry-page { max-width: 48rem; padding: 1rem 0 2rem; }
.entry-page__back { margin: 0 0 1rem; font-size: 0.9rem; }
.entry-page__title { font: 700 2rem/1.15 var(--font-display); margin: 0 0 0.5rem; }
.entry-page__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin: 0 0 1rem;
  font-size: 0.9rem;
}
.entry-page__meta > * + *::before { content: "·"; margin-right: 0.75rem; color: var(--muted); display: inline-block; }

/* A setting with a label above it. */
.field { display: flex; flex-direction: column; gap: 0.25rem; margin: 0.75rem 0 0; }
.field select { max-width: 20rem; font: inherit; color: inherit; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.25rem 0.4rem; }

@media print {
  .site-header, .sidebar, .pane-peek, .skip-link, .entry-page__back, .entry__meta, .entry__comments { display: none; }
}