/* Royal's palette, as on the site (docs/index.html) and in the iOS app. */
:root {
  color-scheme: light dark;
  --bg: #f2f1ec; --surface: #ffffff; --text: #1b1c20; --muted: #5d606a; --line: #e2dfd4;
  --edge: rgb(0 0 0 / .12); --placeholder: rgb(0 0 0 / .06);
  --gold: #f5c432; --gold-ink: #8a6500; --icon-bg: #16181d;
  --reddit: #f97316; --hn: #a2754c; --youtube: #e5322d; --heart: #e0457b;
  --radius: 14px; --inset: 12px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0f12; --surface: #1c1e23; --text: #ecebe6; --muted: #a2a4ad; --line: #2a2c33;
    --edge: rgb(255 255 255 / .12); --placeholder: rgb(255 255 255 / .07);
    --gold: #fed655; --gold-ink: #fed655; --icon-bg: #22252c;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
main { max-width: 720px; margin: 0 auto; padding: 8px 16px 48px; }
a { color: var(--gold-ink); }
p { overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Header: the crown, the name and the tabs in one bar that stays in reach while the
   feed scrolls, with the player docked right below it. */
header {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px;
  margin: 0 -16px; padding: 10px 16px; background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
}
header h1 { margin: 0; font-size: 24px; line-height: 1.1; letter-spacing: -0.01em; }
.crown { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--icon-bg); box-shadow: 0 4px 14px rgb(0 0 0 / .18); }
.crown svg { width: 28px; height: auto; display: block; }

/* Buttons and forms */
button {
  background: var(--gold); color: #16181d; font: inherit; font-weight: 600; font-size: 15px;
  padding: 8px 16px; border: 1px solid transparent; border-radius: 999px; cursor: pointer;
}
button.secondary { background: var(--surface); color: var(--text); border-color: var(--line); }
button:disabled { opacity: .5; cursor: wait; }
label { display: grid; gap: 6px; margin: 16px 0; font-weight: 600; }
input, select { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: inherit; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Tabs: a segmented bar beside the name. In a narrow window they move to their own
   line below it and wrap, so every tab stays in reach without scrolling sideways. */
nav.tabs { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px; margin-left: 8px; }
@media (max-width: 719px) {
  header { flex-wrap: wrap; row-gap: 8px; }
  nav.tabs { flex-basis: 100%; margin-left: 0; }
}
nav.tabs button { flex: none; background: transparent; color: var(--muted); padding: 6px 14px; }
nav.tabs button:hover { color: var(--text); background: var(--placeholder); }
nav.tabs button[aria-selected="true"] { background: var(--text); color: var(--bg); }

/* Feed panels */
.tab-panel > .actions { margin: 8px 0; }
/* All: one centered button (Refresh, or Mark all read while there are new posts)
   with the refresh time below it. */
.all-actions { justify-content: center; }
.all-actions:has(#mark-read-bottom[hidden]) { display: none; }
#all-new + .all-actions { margin: 16px 0; }
.all-status { text-align: center; }
.source-options label { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; color: var(--muted); }
.source-options select { width: auto; padding: 6px 10px; border-radius: 999px; }
.source-options .trailing { margin-left: auto; }
.source-options select[name="subreddit"] { max-width: 220px; }
.feed-status { font-size: 13px; color: var(--muted); margin: 8px 0; }
/* A feed that failed: a warning box with the reason and, if it's a login, a link. */
.problems { display: grid; gap: 8px; margin: 8px 0 16px; }
.problems:empty { display: none; }
.problem {
  margin: 8px 0; padding: 10px var(--inset); border-radius: 12px; font-size: 14px; color: var(--text);
  background: color-mix(in srgb, var(--gold) 12%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent);
}
.problems .problem { margin: 0; }
.problem-note { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }

ol.posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
ol.posts:empty { display: none; }

/* A post tile, like iOS PostRow: rounded surface, hairline edge so dark images keep a border. */
.post {
  position: relative; overflow: hidden; background: var(--surface);
  border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--edge);
}
.post.playing { box-shadow: inset 0 0 0 2px var(--gold); }
.post .media, .post .thumb { display: block; position: relative; overflow: hidden; background: var(--placeholder); }
.post img { display: block; width: 100%; height: 100%; }
/* The image draws over the tile's edge; the outline goes back on top. */
.post::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inherit; pointer-events: none; }

/* Cards: a large image above the text. */
.post.card .media { aspect-ratio: var(--aspect, 4 / 3); }
.post.card .media img { position: absolute; inset: 0; }
.post.card .media img.fit { object-fit: contain; }
/* Narrow images sit on a blurred copy of themselves, so the sides match the image. */
.post.card .media img.backdrop { position: absolute; inset: 0; object-fit: cover; filter: blur(24px) brightness(.85); transform: scale(1.15); }
.post.card.video .media img { object-fit: cover; }
.post.card .details { padding: var(--inset); }
.post.card .title { font-size: 17px; font-weight: 600; }

/* Video play badge */
.post.video .media::before {
  content: ""; position: absolute; z-index: 1; left: 50%; top: 50%; width: 64px; height: 44px; translate: -50% -50%;
  border-radius: 12px; background: rgb(0 0 0 / .6); transition: background .15s;
}
.post.video .media::after {
  content: ""; position: absolute; z-index: 1; left: 50%; top: 50%; translate: -35% -50%;
  border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent white;
}
.post.video .media:hover::before { background: var(--youtube); }
.post.playing .media::before, .post.playing .media::after { display: none; }

/* NSFW images, blurred until clicked (Settings › Reddit). */
.post .nsfw img { filter: blur(32px); transform: scale(1.2); }
.post.card .media.nsfw img.backdrop { filter: blur(32px) brightness(.85); }
.post .nsfw { cursor: pointer; }
.post.video .media.nsfw::before, .post.video .media.nsfw::after { display: none; }
.nsfw-cover {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  background: rgb(0 0 0 / .3); color: white; font-size: 14px; font-weight: 600;
}
.media:not(.nsfw) .nsfw-cover { display: none; }

/* Rows: text with a small thumbnail on the right. */
.post.row { display: flex; gap: 12px; align-items: flex-start; padding: var(--inset); }
.post.row .details { flex: 1; min-width: 0; }
.post.row .thumb { flex: none; width: 96px; height: 54px; border-radius: 6px; }
.post.row .thumb img { object-fit: cover; }

.post .title { display: block; color: var(--text); text-decoration: none; overflow-wrap: anywhere; line-height: 1.35; }
.post .title:hover { text-decoration: underline; text-decoration-color: var(--muted); }
.post a.title:visited { color: color-mix(in srgb, var(--text) 70%, var(--muted)); }
.post .meta { display: flex; align-items: baseline; gap: 5px; margin-top: 4px; padding-right: 36px; font-size: 13px; color: var(--muted); }
.post .meta a { color: inherit; }
.post .meta a:hover { color: var(--text); }
.post.row .meta { padding-right: 0; }
.post.row .details { padding-right: 32px; }

/* Source marks, like iOS's r.circle / y.square / play.rectangle symbols. */
.source-icon { flex: none; display: inline-grid; place-items: center; width: 14px; height: 14px; translate: 0 2px; color: white; font: 700 9px/1 system-ui, sans-serif; }
.source-icon.reddit { background: var(--reddit); border-radius: 50%; }
.source-icon.hn { background: var(--hn); border-radius: 3px; }
.source-icon.youtube { background: var(--youtube); border-radius: 4px; width: 16px; height: 12px; translate: 0 1px; }
.source-icon.youtube::after { content: ""; border-style: solid; border-width: 3.5px 0 3.5px 6px; border-color: transparent transparent transparent white; margin-left: 1px; }
.post.playing .source-icon { background: var(--gold); }

/* Heart in the corner, like iOS: filled and faint, so new users can find it, brighter
   on hover (to the heart color) and the heart color once saved. */
button.save {
  position: absolute; right: 4px; bottom: 4px; z-index: 1; display: grid; place-items: center;
  width: 36px; height: 36px; padding: 0; background: transparent; color: var(--muted);
  opacity: .25; transition: opacity .15s, color .15s, transform .15s;
}
button.save svg { width: 24px; height: 24px; display: block; }
.post:hover button.save, .post:focus-within button.save { opacity: .55; }
button.save[aria-pressed="true"] { opacity: 1; color: var(--heart); }
button.save:hover, button.save:focus-visible { opacity: 1; color: var(--heart); transform: scale(1.1); }
button.save[aria-pressed="true"]:hover { filter: brightness(1.2); }
@media (hover: none) { button.save { opacity: .55; } button.save[aria-pressed="true"] { opacity: 1; } }

/* All: the divider between new and earlier posts. */
.divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 12px; font-size: 13px; font-weight: 600; color: var(--muted); }
.divider[hidden] { display: none; }
.earlier-toggle { justify-content: center; }
.earlier-toggle:has(button[hidden]) { display: none; }
#all-seen[hidden], #show-earlier[hidden] { display: none; }
/* Earlier posts look read: muted titles and dimmer images. */
#all-seen .post .title { color: color-mix(in srgb, var(--text) 65%, var(--muted)); }
#all-seen .post .media, #all-seen .post .thumb { opacity: .75; }
.divider::before, .divider::after { content: ""; flex: 1; height: 2px; background: var(--gold); border-radius: 1px; }

/* Docked player: stays under the header while the feed scrolls and tabs switch.
   --header-height is the header's measured height (feeds-ui.mjs). */
/* As wide as the cards, with their rounded corners and hairline edge. */
#player {
  position: sticky; top: var(--header-height, 60px); z-index: 3; margin: 16px 0 0; overflow: hidden;
  background: #000; border-radius: var(--radius); box-shadow: 0 0 0 1px var(--edge), 0 6px 18px rgb(0 0 0 / .18);
}
#player[hidden] { display: none; }
.player-frame { width: 100%; max-width: calc(48vh * 16 / 9); margin: 0 auto; aspect-ratio: 16 / 9; transition: width .2s ease; }
.player-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.player-bar { display: flex; align-items: center; gap: 12px; padding: 8px var(--inset); background: var(--surface); }
.player-text { flex: 1; min-width: 0; display: grid; }
.player-text > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-text strong { font-size: 14px; }
.player-text span { font-size: 12px; color: var(--muted); }
#player-open { font-size: 13px; white-space: nowrap; }
/* Scrolled down into the feed, the video shrinks to half size at the left, leaving more
   of the feed in view, with its title, channel and links beside it on the right. */
#player.compact { display: flex; background: var(--surface); }
#player.compact .player-frame { flex: none; width: min(50%, calc(24vh * 16 / 9)); margin: 0; }
#player.compact .player-bar {
  flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto; align-content: center;
  gap: 6px 12px; padding: 10px var(--inset);
}
#player.compact .player-text strong { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
#player.compact #player-open { grid-column: 1; grid-row: 2; justify-self: start; }
#player.compact #player-close { grid-column: 2; grid-row: 1; }
.icon-button { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; background: var(--placeholder); color: var(--text); font-size: 14px; }

/* Settings tab: grouped like iOS Settings. */
.settings section { background: var(--surface); border: 1px solid var(--line); padding: 4px 20px 12px; margin: 16px 0; border-radius: 16px; }
.settings h2 { margin: 16px 0 8px; font-size: 18px; }
.settings label { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; padding: 10px 0; border-top: 1px solid var(--line); font-weight: 500; }
.settings select { width: auto; min-width: 140px; }
/* On/off settings are switches on the right, like iOS. */
.settings input[type="checkbox"] {
  appearance: none; position: relative; flex: none; width: 44px; height: 26px; margin: 0; padding: 0;
  border: 0; border-radius: 999px; background: var(--line); cursor: pointer; transition: background .15s;
}
.settings input[type="checkbox"]::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: white; box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: translate .15s;
}
.settings input[type="checkbox"]:checked { background: var(--gold); }
.settings input[type="checkbox"]:checked::before { translate: 18px 0; }
.settings details { margin: 8px 0; font-size: 14px; color: var(--muted); }
.settings summary { cursor: pointer; font-weight: 500; color: var(--text); }
.settings details p { margin: 8px 0; }
.settings input:disabled { opacity: .5; }
.settings label:has(input:disabled) { color: var(--muted); }
.hint { margin: 4px 0 8px; font-size: 13px; color: var(--muted); }


@media (min-width: 900px) {
  main { padding-top: 40px; }
}