/* Ari's Reader — tokens, reset, shared components and the list row (also used by the login preview).
   One palette: light-dark() picks per color-scheme; data-theme on <html> pins a scheme. */

:root {
  color-scheme: light dark;

  --font-ui: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-read: "Literata", "Iowan Old Style", Charter, Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 22px;

  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 9px;
  --r-lg: 14px;
  --r-pill: 999px;

  --side-w: 272px;
  --col: 880px;
  --toolbar-h: 68px;
  /* Where text starts inside the column: rows put favicons at 30px and titles at 30 + 16 + 14. */
  --inset: 60px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Ember: warm paper neutrals, a terracotta accent, violet for Magic. Danger is crimson so it
     doesn't read as the accent. */
  --bg: light-dark(#fffcf7, #1b1815);
  --bg-side: light-dark(#f6f1e9, #151310);
  --bg-raised: light-dark(#ffffff, #231f1b);
  --bg-sunk: light-dark(#eee8dd, #2b2621);
  --bg-hover: light-dark(#faf6ef, #211d19);
  --bg-current: light-dark(#fdf2ea, #2a1f19);
  --ink: light-dark(#1e1b17, #ede7dd);
  --ink-2: light-dark(#4b453c, #bfb6a8);
  --ink-3: light-dark(#716a5e, #8f877a);
  --ink-4: light-dark(#a9a194, #625b51);
  --rule: light-dark(#ece5da, #2d2823);
  --rule-strong: light-dark(#dcd3c5, #3b352e);
  --accent: light-dark(#c4461a, #ff9b6b);
  --accent-hover: light-dark(#a33a14, #ffb48f);
  --accent-ink: light-dark(#ffffff, #2b1105);
  --accent-soft: light-dark(#fbe8de, #3a2318);
  --accent-inverse: light-dark(#ffad85, #b13d14);
  --magic: light-dark(#6b46d9, #b8a2ff);
  --magic-soft: light-dark(#efeafc, #2a2340);
  --star: light-dark(#e0a200, #f4c34a);
  --danger: light-dark(#b4233f, #ff8a9e);
  --danger-soft: light-dark(#fbe8ec, #3b1c24);
  --ok: light-dark(#1d7a4e, #74d0a2);
  --ok-soft: light-dark(#e4f4ec, #173126);
  --scrim: light-dark(rgb(30 22 14 / .38), rgb(0 0 0 / .55));
  --skeleton: light-dark(#f1ece4, #26221d);
  --skeleton-hi: light-dark(#f9f6f0, #2e2923);
  --shadow-1: 0 1px 2px light-dark(rgb(40 28 16 / .06), rgb(0 0 0 / .3));
  --shadow-pop: 0 2px 6px light-dark(rgb(40 28 16 / .06), rgb(0 0 0 / .3)), 0 14px 36px light-dark(rgb(40 28 16 / .16), rgb(0 0 0 / .45));
  --wash: color-mix(in srgb, var(--ink) 5%, transparent);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* ── reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--fs-base)/1.45 var(--font-ui);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video, iframe { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
[hidden] { display: none !important; }
::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); }
.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;
}
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ── wordmark ──────────────────────────────────────────────────────────── */
.wordmark {
  font-family: var(--font-read);
  font-weight: 640;
  font-size: 21px;
  letter-spacing: -0.012em;
  color: var(--ink);
  font-variation-settings: "opsz" 48;
}

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-weight: 560;
  font-size: var(--fs-base);
  line-height: 1;
  white-space: nowrap;
  transition: background-color .12s, border-color .12s, color .12s, box-shadow .12s;
  user-select: none;
}
.btn .i { width: 17px; height: 17px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: default; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--rule-strong); }
.btn-ghost:hover:not(:disabled) { background: var(--bg-hover); color: var(--ink); }
.btn-quiet { color: var(--ink-2); }
.btn-quiet:hover:not(:disabled) { background: var(--bg-hover); color: var(--ink); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover:not(:disabled) { filter: brightness(1.06); }
.btn-sm { height: 32px; padding: 0 11px; font-size: 13px; gap: 6px; }
.btn-sm .i { width: 16px; height: 16px; }
.btn.is-busy { position: relative; color: transparent; pointer-events: none; }
.btn.is-busy::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--accent-ink);
  border-color: var(--accent-ink) var(--accent-ink) transparent transparent;
  animation: spin .7s linear infinite;
}
.btn-ghost.is-busy::after, .btn-quiet.is-busy::after { border-color: var(--ink-3) var(--ink-3) transparent transparent; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-md);
  color: var(--ink-2);
  transition: background-color .12s, color .12s;
}
.icon-btn:hover { background: var(--bg-hover); color: var(--ink); }
.icon-btn.is-spinning .i { animation: spin .8s linear infinite; }

/* ── form controls ─────────────────────────────────────────────────────── */
.input, .textarea {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--rule-strong);
  background: var(--bg);
  color: var(--ink);
  transition: border-color .12s, box-shadow .12s;
}
.textarea { height: auto; min-height: 120px; padding: 10px 12px; line-height: 1.55; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }
.input:hover, .textarea:hover { border-color: var(--ink-4); }
.input:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.input-sm { height: 32px; padding: 0 9px; font-size: 13px; border-radius: var(--r-sm); }
.field { display: grid; gap: 6px; }
.field-label { font-weight: 600; font-size: 13px; color: var(--ink-2); }
.field-hint { font-size: var(--fs-sm); color: var(--ink-3); }

/* segmented control */
.seg {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--bg-sunk);
  border-radius: var(--r-md);
}
.seg button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 540;
  color: var(--ink-3);
  transition: background-color .12s, color .12s, box-shadow .12s;
}
.seg button .i { width: 14px; height: 14px; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] {
  background: var(--bg-raised);
  color: var(--ink);
  box-shadow: var(--shadow-1), 0 0 0 1px var(--rule);
}
.seg button[aria-pressed="true"] .i-magic { color: var(--magic); }

kbd {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 5px;
  border: 1px solid var(--rule-strong);
  border-bottom-width: 2px;
  background: var(--bg-raised);
  font: 560 11.5px/1 var(--font-ui);
  color: var(--ink-2);
}

.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--rule-strong);
  border-top-color: var(--accent);
  animation: spin .8s linear infinite;
  flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

.notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--bg-sunk);
  color: var(--ink-2);
  font-size: 13.5px;
}
.notice .i { margin-top: 1px; width: 17px; height: 17px; }
.notice-error { background: var(--danger-soft); color: var(--danger); }
.notice-detail { display: block; margin-top: 4px; font-size: 12.5px; opacity: .8; overflow-wrap: anywhere; }

/* favicon + letter tile (same box either way) */
.fav { width: 16px; height: 16px; border-radius: 3px; object-fit: contain; flex: none; }
.fav.is-letter {
  display: grid; place-items: center; background: var(--bg-sunk); color: var(--ink-3);
  font-size: 10px; font-weight: 700; line-height: 1;
}
.fav-20 { width: 20px; height: 20px; }
.fav-22 { width: 22px; height: 22px; border-radius: 5px; }
.fav-14 { width: 14px; height: 14px; }

/* menus (popover) */
.menu {
  position: fixed;
  z-index: 60;
  min-width: 220px;
  padding: 6px;
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-pop);
}
.menu-head { display: grid; gap: 2px; padding: 8px 10px 10px; border-bottom: 1px solid var(--rule); margin-bottom: 6px; }
.menu-head strong { font-weight: 620; }
.menu-head span { font-size: var(--fs-sm); color: var(--ink-3); overflow-wrap: anywhere; }
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  text-align: left;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--bg-hover); color: var(--ink); outline: none; }
.menu-item .i { width: 17px; height: 17px; color: var(--ink-3); }
.menu-item[aria-checked="true"]::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.menu form { margin: 0; }

/* ── list row (the reader's core unit; also the login preview) ────────── */
.row { position: relative; border-bottom: 1px solid var(--rule); background: var(--bg); }
.row::before {
  content: "";
  position: absolute;
  left: 0; top: -1px; bottom: -1px;
  width: 3px;
  background: transparent;
  z-index: 2;
}
.row.is-current::before { background: var(--accent); }
.row-main {
  position: relative;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: 14px;
  padding: 15px 28px 16px 30px;
  background: var(--bg);
  transition: background-color .1s;
}
.row-main.no-thumb { grid-template-columns: 16px minmax(0, 1fr); }
.row.is-current .row-main { background: var(--bg-current); }
.row.is-unread .row-main::after {
  content: "";
  position: absolute;
  left: 13px; top: 23px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.row-main .fav { margin-top: 2px; }
.row:not(.is-unread) .row-main .fav { opacity: .5; filter: grayscale(1); }
.row-body { min-width: 0; }
.row-top { display: flex; align-items: baseline; gap: 10px; font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.3; }
.row-top .src { font-weight: 560; color: var(--ink-2); flex: none; max-width: 50%; }
.row-top time { margin-left: auto; flex: none; font-variant-numeric: tabular-nums; }
.row-star { margin-left: auto; color: var(--star); align-self: center; display: inline-flex; }
.row-star .i { width: 13px; height: 13px; }
.row-star + time { margin-left: 0; }
.row-spark { display: none; color: var(--magic); align-self: center; }
.row-spark .i { width: 12px; height: 12px; }
.row-title {
  margin-top: 3px;
  font-size: 15px;
  line-height: 1.38;
  font-weight: 430;
  color: var(--ink-2);
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
.row.is-unread .row-title { font-weight: 650; color: var(--ink); }
.row-snippet {
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: 8px;
  font-size: var(--fs-sm);
  color: var(--ink-3);
}
.row-meta:empty { display: none; }
.chip-agg { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); border-radius: 4px; }
.chip-agg .i { width: 13px; height: 13px; }
.chip-agg .i-tri { width: 10px; height: 10px; }
.chip-agg .sep { width: 6px; }
a.chip-agg:hover { color: var(--accent); }
.chip-also {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--rule-strong);
  color: var(--ink-2);
  font-size: 12px;
  white-space: nowrap;
}
.chip-also .i-tri { width: 9px; height: 9px; }
a.chip-also:hover { border-color: var(--accent); color: var(--accent); }
.why { display: inline-flex; align-items: center; gap: 5px; color: var(--magic); min-width: 0; }
.why .i { width: 13px; height: 13px; }
.thumb {
  width: 92px;
  height: 62px;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--bg-sunk);
  margin-top: 2px;
}
.row:not(.is-unread) .thumb { opacity: .7; }
.thumb-wrap { position: relative; }
.thumb-wrap .play {
  position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: rgb(0 0 0 / .55); color: #fff;
}
.thumb-wrap .play .i { width: 13px; height: 13px; margin-left: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}