/* Curanet — styles shared by the hosted site and the private preview.
   Layout (docs/LAYOUT.md, version 3 = the live site at curanet.io): one sticky header of three
   bars (the blue bar with logo, search, location, article/video toggle and avatar; the white
   category tabs with the ≡ button; the grey sections row) over one centred 896px container
   holding one white card of items. Phones (< 640px) lose the wordmark and the card's side
   padding; 768px changes the title size and the Menu panel's grid.
   Colour: the live site's light and dark palettes, every colour a token defined on :root below
   in the artifact shape (light; dark when following the system; dark when chosen). Where a live
   pair misses WCAG AA (the Save and Share hover inks; in dark the grey action ink, the bar-control
   hover, the search field and the title hover; the focus ring, the checkbox border, the toggle
   glyph on its light hover) the nearest value of the same family that passes is used; the list is
   in the token comments. Type: the system stack, nothing loaded. */

:root {
  --font: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bar: #305dd2;
  --bar-dark-line: #123bb7;
  --on-bar: #ffffff;
  --control-hover: #a7c4ff;
  --control-hover-ink: #171717;
  --control-hover-glyph: brightness(0) opacity(0.91); /* the white toggle glyph is 1.75:1 on #a7c4ff; this is #171717 */
  --page: #f9fafb;
  --card: #ffffff;
  --card-border: #e5e7eb;
  --divider: #f3f4f6;
  --bar-border: #e5e5e5;
  --row-bg: #f9fafb;
  --fill: #f3f4f6;
  --text: #101828;
  --tab-ink: #101828;
  --text-2: #364153;
  --publisher: #364153;
  --label: #4a5565;
  --muted: #6a7282;
  --action-ink: #6a7282;
  --cell-ink: #000000;
  --menu-bg: #ffffff;
  --menu-ink: #0a0a0a;
  --menu-border: #e5e5e5;
  --menu-hover: #f5f5f5;
  --menu-hover-ink: #171717;
  --menu-icon: #737373;
  --menu-hint: #737373;         /* on a hovered row it takes the row's ink (4.35:1 there) */
  --menu-title: #101828;
  --placeholder: #737373;
  --input-bg: #ffffff;
  --outline-bg: #ffffff;
  --outline-border: #e5e5e5;
  --primary: #305dd2;
  --primary-line: #305dd2;
  --primary-hover: #123bb7;
  --tab-hover-line: #e5e7eb;
  --row-hover-line: #d1d5dc;
  --save-hover: #123bb7;        /* live #305dd2 is 3.3:1 on the hover blue */
  --save-hover-bg: #a7c4ff;
  --share-hover: #008236;       /* live #00c950 is 2.1:1 on the hover green */
  --share-hover-bg: #f0fdf4;
  --toast-bg: #ffffff;
  --toast-close: rgba(10, 10, 10, 0.5);
  --avatar-bg: #e5e7eb;
  --avatar-ink: #4a5565;
  --thumb-border: #f3f4f6;
  --badge-bg: #e5e7eb;
  --badge-ink: #364153;
  --check-border: #6a7282;      /* #d1d5dc is 1.5:1 on white */
  --check-bg: #ffffff;
  --panel-bg: #ffffff;
  --video-bg: #000000;
  --status-ok: #00a63e;
  --status-bad: #e7000b;
  --focus: #737373;             /* the live ring colour, solid: at 50 % it is 1.5:1 */
  --ring: rgba(161, 161, 161, 0.5);
  --backdrop: rgba(0, 0, 0, 0.5);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --radius-lg: 10px;
  --radius: 8px;
  --radius-sm: 6px;
  --radius-xs: 4px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bar: #214fcc;
    --bar-dark-line: #214fcc;
    --on-bar: #ffffff;
    --control-hover: #3f64b9;        /* live #214fcc is the bar itself, so the hover would not show */
    --control-hover-ink: #ffffff;
    --control-hover-glyph: none;
    --page: #030712;
    --card: #101828;
    --card-border: #1e2939;
    --divider: #1e2939;
    --bar-border: #1e2939;
    --row-bg: #101828;
    --fill: #1e2939;
    --text: #f9fafb;
    --tab-ink: #e5e7eb;
    --text-2: #d1d5dc;
    --publisher: #f3f4f6;
    --label: #99a1af;
    --muted: #99a1af;
    --action-ink: #99a1af;           /* live #6a7282 is 3.7:1 on the card */
    --cell-ink: #f3f4f6;
    --menu-bg: #171717;
    --menu-ink: #fafafa;
    --menu-border: rgba(255, 255, 255, 0.1);
    --menu-hover: #262626;
    --menu-hover-ink: #fafafa;
    --menu-icon: #a1a1a1;
    --menu-hint: #a1a1a1;
    --menu-title: #f3f4f6;
    --placeholder: #a1a1a1;
    --input-bg: #101828;            /* live translucent white leaves the placeholder at 2.5:1 */
    --outline-bg: rgba(255, 255, 255, 0.045);
    --outline-border: rgba(255, 255, 255, 0.15);
    --primary: #6393ff;             /* the live link and tab colour; the title hover uses it in place of the live #4677ed, 4.3:1 on the card */
    --primary-line: #4677ed;
    --primary-hover: #123bb7;
    --tab-hover-line: #4a5565;
    --row-hover-line: #4a5565;
    --save-hover: #6393ff;          /* live #4677ed is 4.3:1 on the card */
    --save-hover-bg: rgba(29, 78, 206, 0.1);
    --share-hover: #00c950;
    --share-hover-bg: rgba(10, 88, 39, 0.1);
    --toast-bg: #0a0a0a;
    --toast-close: rgba(250, 250, 250, 0.5);
    --avatar-bg: #364153;
    --avatar-ink: #d1d5dc;
    --thumb-border: #364153;
    --badge-bg: #364153;
    --badge-ink: #e5e7eb;
    --check-border: #99a1af;
    --check-bg: #1e2939;
    --panel-bg: #030712;
    --video-bg: #000000;
    --status-ok: #00c950;
    --status-bad: #ff6568;
    --focus: #a1a1a1;
    --ring: rgba(115, 115, 115, 0.5);
    --backdrop: rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bar: #214fcc;
  --bar-dark-line: #214fcc;
  --on-bar: #ffffff;
  --control-hover: #3f64b9;        /* live #214fcc is the bar itself, so the hover would not show */
  --control-hover-ink: #ffffff;
  --control-hover-glyph: none;
  --page: #030712;
  --card: #101828;
  --card-border: #1e2939;
  --divider: #1e2939;
  --bar-border: #1e2939;
  --row-bg: #101828;
  --fill: #1e2939;
  --text: #f9fafb;
  --tab-ink: #e5e7eb;
  --text-2: #d1d5dc;
  --publisher: #f3f4f6;
  --label: #99a1af;
  --muted: #99a1af;
  --action-ink: #99a1af;           /* live #6a7282 is 3.7:1 on the card */
  --cell-ink: #f3f4f6;
  --menu-bg: #171717;
  --menu-ink: #fafafa;
  --menu-border: rgba(255, 255, 255, 0.1);
  --menu-hover: #262626;
  --menu-hover-ink: #fafafa;
  --menu-icon: #a1a1a1;
  --menu-hint: #a1a1a1;
  --menu-title: #f3f4f6;
  --placeholder: #a1a1a1;
  --input-bg: #101828;            /* live translucent white leaves the placeholder at 2.5:1 */
  --outline-bg: rgba(255, 255, 255, 0.045);
  --outline-border: rgba(255, 255, 255, 0.15);
  --primary: #6393ff;             /* the live link and tab colour; the title hover uses it in place of the live #4677ed, 4.3:1 on the card */
  --primary-line: #4677ed;
  --primary-hover: #123bb7;
  --tab-hover-line: #4a5565;
  --row-hover-line: #4a5565;
  --save-hover: #6393ff;          /* live #4677ed is 4.3:1 on the card */
  --save-hover-bg: rgba(29, 78, 206, 0.1);
  --share-hover: #00c950;
  --share-hover-bg: rgba(10, 88, 39, 0.1);
  --toast-bg: #0a0a0a;
  --toast-close: rgba(250, 250, 250, 0.5);
  --avatar-bg: #364153;
  --avatar-ink: #d1d5dc;
  --thumb-border: #364153;
  --badge-bg: #364153;
  --badge-ink: #e5e7eb;
  --check-border: #99a1af;
  --check-bg: #1e2939;
  --panel-bg: #030712;
  --video-bg: #000000;
  --status-ok: #00c950;
  --status-bad: #ff6568;
  --focus: #a1a1a1;
  --ring: rgba(115, 115, 115, 0.5);
  --backdrop: rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

/* ---------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h, 143px) + 8px);
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* The page behind the Menu panel does not scroll (app.js puts the class on both elements). */
html.menu-open, body.menu-open { overflow: hidden; }

img, svg { display: inline-block; vertical-align: middle; }
img { max-width: 100%; }
.icon, .action-icon, .search-icon, .manage-search-icon { flex-shrink: 0; }
[hidden] { display: none !important; }
a { color: var(--primary); }
button, input, select { font: inherit; color: inherit; margin: 0; }
button { cursor: pointer; }
h1, h2, h3 { margin: 0; font-size: inherit; font-weight: inherit; }
p { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
hr { margin: 0; border: 0; }

/* The 3px ring. Plain controls get it as an outline; the blue bars use white for it; inputs and
   the outline buttons swap their border to the ring colour and add the soft halo instead. */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; }
.topbar :focus-visible, .menu-panel-bar :focus-visible { outline-color: var(--on-bar); }
/* The location and avatar menus sit inside the blue bar's markup but on a white (dark: #171717)
   menu, so they take the ordinary ring. */
.topbar .menu :focus-visible { outline-color: var(--focus); }
.main:focus, h1:focus, .menu-panel-title:focus { outline: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 16px;
  z-index: 200;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: var(--on-bar);
  color: var(--bar);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The bars and the Menu panel share one container: 896px of content inside 16px gutters. */
.container {
  width: 100%;
  max-width: 928px;
  margin: 0 auto;
  padding: 0 16px;
}

/* The main area is the live site's feed container: at most 896px including its own padding of
   16px on every side from 640px up (the card is 864px wide at x=208 at 1280), and only top and
   bottom padding on phones (the card is full width). The feed card, Manage Following, Sources and
   About all sit in it. */
.main { min-width: 0; }
.main-container { max-width: 896px; padding: 16px 0; }
.view { min-width: 0; }
.noscript { padding: 24px 16px; text-align: center; color: var(--muted); }

@media (min-width: 640px) {
  .main-container { padding: 16px; }
}

/* ---------------------------------------------------------------- the sticky header */

/* The slide uses `top` rather than a transform so the grey row can still be fixed to the bottom
   of the screen (a transformed ancestor would capture it). */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  transition: top 300ms var(--ease);
}
.site-header.is-hidden { top: -56px; }
body.menu-open .site-header, body.search-open .site-header { top: 0; }

/* ---------------------------------------------------------------- bar 1: the blue bar */

.topbar {
  background: var(--bar);
  border-bottom: 1px solid var(--bar);
  color: var(--on-bar);
}
.topbar-row {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 56px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  color: var(--on-bar);
  text-decoration: none;
}
.logo-mark { display: block; width: 40px; height: 40px; }
.wordmark {
  display: none;
  font-size: 24px;
  line-height: 32px;
  font-weight: 900;
  letter-spacing: -0.025em;
  color: var(--on-bar);
  white-space: nowrap;
}

/* The middle slot: an empty spacer until the search opens in it. */
.topbar-middle { flex: 1 1 auto; min-width: 0; }
.search { position: relative; width: 100%; max-width: 672px; margin: 0; }
.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.search-input, .manage-search-input {
  display: block;
  width: 100%;
  height: 40px;
  padding: 4px 16px 4px 40px;
  border: 1px solid var(--outline-border);
  border-radius: var(--radius);
  background: var(--input-bg);
  color: var(--menu-ink);
  font-size: 16px;
  line-height: 24px;
  box-shadow: var(--shadow-xs);
  -webkit-appearance: none;
  appearance: none;
}
.search-input::placeholder, .manage-search-input::placeholder { color: var(--placeholder); opacity: 1; }
/* No browser decoration or clear button, as on the live site; emptying the field clears the search. */
.search-input::-webkit-search-decoration, .manage-search-input::-webkit-search-decoration,
.search-input::-webkit-search-cancel-button, .manage-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.search-input:focus-visible, .manage-search-input:focus-visible {
  outline: 3px solid transparent; /* invisible, but forced colours paint it */
  border-color: var(--focus);
  box-shadow: var(--shadow-xs), 0 0 0 3px var(--ring);
}

/* Ghost buttons on the blue bar (search, location, toggle, the panel's X) and the ≡ button. */
.bar-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--on-bar);
  white-space: nowrap;
  cursor: default;
  transition: background-color 150ms var(--ease), color 150ms var(--ease);
}
.bar-button:hover { background: var(--control-hover); color: var(--control-hover-ink); }
.bar-button-icon { width: 36px; height: 36px; }
.bar-button-icon .icon { width: 16px; height: 16px; }

/* A long country name ("United Kingdom") may not fit next to the other controls at 360px: the
   empty middle gives up its room first, then the label is cut with an ellipsis (the button's
   title and accessible name keep the full name). */
.loc-picker { position: relative; flex: 0 1 auto; min-width: 0; }
.loc-button {
  max-width: 100%;
  flex-shrink: 1;
  height: 32px;
  padding: 0 10px;
  gap: 4px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}
.loc-button .icon { flex: none; width: 16px; height: 16px; }
.loc-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.type-button { width: 32px; height: 32px; border-radius: 50%; transition: background-color 300ms var(--ease); }
.type-glyph { display: block; width: 20px; height: 20px; transition: filter 150ms var(--ease); }
.type-button:hover .type-glyph { filter: var(--control-hover-glyph); }
body[data-view="live"] #type-button { display: none; }

.avatar-wrap { position: relative; flex: none; }
.avatar-button {
  display: flex;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  transition: background-color 150ms var(--ease);
}
/* As on the live site the hover colour sits under the opaque 40px face, so nothing visible changes. */
.avatar-button:hover { background: var(--control-hover); }
/* The live menus are modal: while one is open its trigger loses its hover look. */
.loc-button[aria-expanded="true"]:hover { background: transparent; color: var(--on-bar); }
.avatar-button[aria-expanded="true"]:hover { background: transparent; }
.avatar-face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--avatar-bg);
  color: var(--avatar-ink);
}
.avatar-face .icon { width: 16px; height: 16px; }

@media (min-width: 640px) {
  .topbar-row { padding: 0 24px; }
  .wordmark { display: inline; }
}
@media (min-width: 768px) {
  .search-input { font-size: 14px; line-height: 20px; }
}
@media (max-width: 639px) {
  body.search-open #loc-picker, body.search-open #type-button { display: none; }
}

/* ---------------------------------------------------------------- menus (location, avatar, share) */

.menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 60;
  width: 192px;
  padding: 4px;
  border: 1px solid var(--menu-border);
  border-radius: var(--radius);
  background: var(--menu-bg);
  color: var(--menu-ink);
  font-size: 14px;
  line-height: 20px;
  box-shadow: var(--shadow-md);
  text-align: left;
  transform-origin: top right;
  animation: menu-in 150ms var(--ease);
}
@keyframes menu-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
/* A share menu with no room below its button opens above it (app.js adds .menu-up), as the live
   site's menus flip to stay on screen. */
.menu.menu-up {
  top: auto;
  bottom: calc(100% + 4px);
  transform-origin: bottom right;
  animation-name: menu-in-up;
}
@keyframes menu-in-up {
  from { opacity: 0; transform: translateY(4px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
/* The location and avatar menus hang from the sticky header: on a short screen they scroll inside
   themselves (52px is the menu's top, 12px a margin), so every row can be reached. */
.site-header .menu {
  max-height: calc(100vh - 64px);
  max-height: calc(100dvh - 64px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 32px;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--menu-ink);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms var(--ease), color 150ms var(--ease);
}
.menu-item:hover, .menu-item:focus-visible { background: var(--menu-hover); color: var(--menu-hover-ink); }
.menu-item:focus-visible { outline-offset: -3px; }
.menu-item-icon, .menu-item-icon-slot { width: 16px; height: 16px; color: var(--menu-icon); }
.menu-item-icon-slot { display: inline-flex; }
.menu-item-icon-slot:empty { display: none; }
.menu-item-label { flex: 1 1 auto; min-width: 0; }
.menu-item-check { display: inline-flex; margin-left: auto; width: 16px; height: 16px; color: var(--menu-icon); }
.menu-item-check:empty { display: none; }
.menu-hint { margin-left: auto; font-size: 12px; line-height: 16px; color: var(--menu-hint); white-space: nowrap; }
.menu-item:hover .menu-hint, .menu-item:focus-visible .menu-hint { color: inherit; }
.menu-chevron { width: 16px; height: 16px; color: var(--menu-icon); transition: transform 150ms var(--ease); }
#lang-button[aria-expanded="true"] .menu-chevron { transform: rotate(90deg); }
.menu-sublist .menu-item { padding-left: 40px; }
.menu-sep { height: 1px; margin: 12px -4px; background: var(--menu-border); }
.menu-sep-tight { margin: 4px -4px; }
/* The live rows give their icon mr-2 on top of the 8px gap: the label starts 16px after the icon. */
.menu-item-icon { margin-right: 8px; }

.avatar-menu {
  width: 320px;
  padding: 24px;
  border-width: 2px;
  box-shadow: var(--shadow-lg);
}
.avatar-menu-intro { margin-bottom: 16px; text-align: center; }
.avatar-menu-title { margin: 0 0 4px; font-size: 18px; line-height: 28px; font-weight: 700; color: var(--menu-title); }
.avatar-menu-sub { font-size: 14px; line-height: 20px; color: var(--label); }
#theme-toggle .icon-sun { display: none; }
#theme-toggle.is-dark .icon-sun { display: inline-block; }
#theme-toggle.is-dark .icon-moon { display: none; }
.avatar-menu-foot {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--menu-border);
  text-align: center;
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
}
.menu-foot-link { color: var(--primary); text-decoration: none; }
.menu-foot-link:hover { text-decoration: underline; }

@media (max-width: 359px) {
  .avatar-menu { width: calc(100vw - 32px); }
}

/* ---------------------------------------------------------------- bar 2: the category tabs */

.tabsbar {
  background: var(--card);
  border-bottom: 1px solid var(--bar-border);
}
.tabsbar-row { display: flex; align-items: center; min-height: 48px; }
.tabs-nav { flex: 1 1 auto; min-width: 0; }
.tabs-track {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  -webkit-user-select: none;
  user-select: none;
}
.tabs-track::-webkit-scrollbar { display: none; }

.tab {
  position: relative;
  flex: none;
  padding: 12px 8px;
  border: 0;
  border-bottom: 4px solid transparent;
  background: transparent;
  color: var(--tab-ink);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  white-space: nowrap;
  transition: color 150ms var(--ease), border-color 150ms var(--ease);
}
.tab:hover { border-color: var(--tab-hover-line); }
.tab[aria-current="true"] { color: var(--primary); border-color: var(--primary-line); cursor: default; }
/* The focus ring is drawn by ::after against the padding box, so it stays clear of the label and
   of the 4px underline (an inset outline would cover both); a border, so forced colours paint it. */
.tab:focus-visible, .section-link:focus-visible { outline: none; }
.tab:focus-visible::after, .section-link:focus-visible::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid var(--focus);
  pointer-events: none;
}

.menu-button { margin: 0 8px; color: var(--tab-ink); }
.menu-button:hover { background: var(--fill); color: var(--tab-ink); }
.menu-button .icon-x { display: none; }
.menu-button[aria-expanded="true"] .icon-x { display: inline-block; }
.menu-button[aria-expanded="true"] .icon-menu { display: none; }

@media (min-width: 640px) {
  .tabs-track { padding: 0 16px; }
  .tab { padding: 12px 16px; }
  .tab:first-child { padding-left: 0; }
  .tab:first-child:focus-visible::after { left: -6px; }
}

/* ---------------------------------------------------------------- bar 3: the grey sections row */

/* The full-width bar scrolls; the container inside is at least as wide as its links, so the row
   is centred when it fits and starts at the left edge when it does not. */
.subbar {
  background: var(--row-bg);
  border-bottom: 1px solid var(--bar-border);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.subbar::-webkit-scrollbar { display: none; }
.subbar-row { min-width: max-content; }
.sections-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  padding-top: 8px;
}

.section-link {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 0 6px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-2);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  white-space: nowrap;
  transition: color 150ms var(--ease), border-color 150ms var(--ease);
}
.subbar.is-subcats .section-link { padding-bottom: 8px; }
.section-link:hover { color: var(--primary); border-color: var(--row-hover-line); }
.section-link[aria-current="true"] { color: var(--primary); border-color: var(--primary-line); cursor: default; }
/* The links have no side padding: the ring reaches 6px into the gaps and 4px into the row's top
   padding, and ends 2px above the padding box so the 2px underline stays visible. */
.section-link:focus-visible::after { inset: -4px -6px 2px; }
.section-manage .icon-gear { width: 12px; height: 12px; }

@media (min-width: 640px) {
  .sections-row { padding: 8px 16px 0; }
}

/* The grey row docked at the bottom of a phone screen (Settings → Sections bar → Bottom). */
@media (max-width: 639px) {
  body.subbar-bottom .subbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    border-bottom: 0;
    border-top: 1px solid var(--bar-border);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
  }
  body.subbar-bottom .main { padding-bottom: calc(37px + env(safe-area-inset-bottom, 0px)); }
  html:has(body.subbar-bottom) { scroll-padding-bottom: calc(45px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------------------------------------------------------------- the Menu panel (≡) */

.menu-panel {
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--panel-bg);
  color: var(--text);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.menu-panel-bar {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bar);
  border-bottom: 1px solid var(--bar-dark-line);
  color: var(--on-bar);
}
.menu-panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 8px 0 24px;
}
.menu-panel-title { margin: 0 0 0 4px; font-size: 18px; line-height: 28px; font-weight: 700; color: var(--on-bar); }
.menu-panel-body { padding: 24px 0; }
.menu-panel-body .container { padding: 0 8px; }
.menu-group { margin-left: 16px; }
.menu-group-title {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--label);
}
.menu-group-more { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--bar-border); }

.cell-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cell {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 0;
  border-radius: var(--radius-xs);
  background: var(--fill);
  color: var(--cell-ink);
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: background-color 150ms var(--ease), color 150ms var(--ease);
}
.cell:hover { background: var(--bar); color: var(--on-bar); }

@media (min-width: 640px) {
  .menu-panel-row { padding: 0 16px 0 32px; }
  .menu-panel-body .container { padding: 0 16px; }
}
@media (min-width: 768px) {
  .cell-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- the card and the items */

.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  min-width: 0;
}
/* The feed card stays open (the live card clips) so the share menus can hang below their item.
   On a category page the live site drops the first row's top padding when it is a video, so the
   player sits flush with the card's top edge; it takes the card's inner corners itself (10px
   minus the 1px border). Home, Live and "videos only" keep the padding, as the live home feed. */
.feed-card { overflow: visible; }
.feed-card.is-category .item-video:first-child { padding-top: 0; }
.feed-card.is-category .item-video:first-child .video-box { border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0; }

.hint { margin: 0 0 12px; padding: 0 16px; font-size: 14px; line-height: 20px; color: var(--muted); text-align: center; }

.feed { min-width: 0; }
.item { min-width: 0; padding: 16px 0; border-bottom: 1px solid var(--divider); }
.item-inner { min-width: 0; }
.item-article .item-inner { padding: 0 16px; }

.item-link { display: block; color: inherit; text-decoration: none; }
.item-row { display: flex; align-items: flex-start; gap: 16px; min-width: 0; }
.item-text { flex: 1 1 auto; min-width: 0; }
.publisher {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--publisher);
}
.publisher-name { overflow-wrap: anywhere; }
.item-title {
  margin: 0;
  font-size: 18px;
  line-height: 1.375;
  font-weight: 400;
  color: var(--text);
  overflow-wrap: anywhere;
  transition: color 150ms var(--ease);
}
/* The clamp lives on the span inside the link, so the link's focus ring is never cut off. */
.item-title-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.item-link:hover .item-title { color: var(--primary); }

.item-thumb {
  flex: none;
  width: 112px;
  height: 80px;
  border: 1px solid var(--thumb-border);
  border-radius: var(--radius-lg);
  background: var(--fill);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.item-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms var(--ease);
}
.item-link:hover .item-img { transform: scale(1.05); }

/* The time at the left, the actions at the right. Where both do not fit on one line (the French
   labels at 360px) the actions move under the time, still at the right. */
.item-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 16px;
  min-width: 0;
  color: var(--muted);
}
.item-time { font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }

.item, .item-link, .video-box, .video-preview, .action, .button { scroll-margin-top: calc(var(--header-h, 143px) + 8px); }

/* Video: the player area spans the card, then the text block with its own side padding. */
.video-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--video-bg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.video-preview {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.video-preview:focus-visible { outline-offset: -3px; }
.video-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-box.no-thumb .video-img { display: none; }
.play-button {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 68px;
  height: 48px;
  margin: -24px 0 0 -34px;
  line-height: 0;
  pointer-events: none;
}
.play-button svg { display: block; width: 68px; height: 48px; }
.video-box.is-playing .video-preview { display: none; }
.video-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.item-body { padding: 0 16px 16px; }
.item-video .publisher { margin-top: 12px; }
.item-video .item-title { line-height: 1.25; }
.item-video .item-title-text { display: inline; overflow: visible; -webkit-line-clamp: none; }
.item-video .item-link:hover { color: var(--primary); }

@media (min-width: 640px) {
  .item-row { gap: 24px; }
  .item-thumb { width: 200px; height: 112px; }
  .item-body { padding: 0 24px 16px; }
}
@media (min-width: 768px) {
  .item-title { font-size: 20px; }
}

/* ---------------------------------------------------------------- the action row: Save, Share, heart */

.actions { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
.action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--outline-border);
  border-radius: var(--radius);
  background: var(--outline-bg);
  color: var(--action-ink);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  white-space: nowrap;
  cursor: default;
  box-shadow: var(--shadow-xs);
  transition: color 150ms var(--ease), background-color 150ms var(--ease), border-color 150ms var(--ease);
}
.action-icon { width: 16px; height: 16px; }
.action:focus-visible {
  outline: 3px solid transparent; /* invisible, but forced colours paint it */
  border-color: var(--focus);
  box-shadow: var(--shadow-xs), 0 0 0 3px var(--ring);
}
.action-save:hover { color: var(--save-hover); background: var(--save-hover-bg); }
.action-save .icon-filled { display: none; }
.action-save[data-saved="true"] .icon-filled { display: inline-block; }
.action-save[data-saved="true"] .icon-outline { display: none; }
.action-share:hover { color: var(--share-hover); background: var(--share-hover-bg); }
.action-share[aria-expanded="true"]:hover { color: var(--action-ink); background: var(--outline-bg); }
.action-like { width: 38px; padding: 0; }
.action-like[aria-disabled="true"] { cursor: default; }

/* The share menu hangs inside .share-wrap, right-aligned 4px under the Share button; it stays
   under the sticky header (z 50) should the page scroll while it is open. */
.share-wrap { position: relative; display: inline-flex; }
/* The scroll margins cover what the opening animation takes off the menu's measured box when
   app.js scrolls an opened menu into view. */
.share-menu { z-index: 40; scroll-margin: 16px 0; }

/* ---------------------------------------------------------------- toasts */

.toast-region {
  position: fixed;
  top: 16px;
  left: 16px;
  right: 16px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  position: relative;
  padding: 24px 32px 24px 24px;
  border: 1px solid var(--menu-border);
  border-radius: var(--radius);
  background: var(--toast-bg);
  color: var(--menu-ink);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: toast-in-top 150ms ease-out;
}
.toast.is-leaving { animation: toast-out-top 150ms ease-in forwards; }
.toast-title { font-size: 14px; line-height: 20px; font-weight: 600; }
.toast-desc { margin-top: 4px; font-size: 14px; line-height: 20px; opacity: 0.9; }
.toast-desc:empty { display: none; }
.toast-close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  padding: 4px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--toast-close);
  opacity: 0;
  transition: color 150ms var(--ease), opacity 150ms var(--ease);
}
/* As on the live site the X shows while the toast is hovered or the X has keyboard focus; touch
   screens, which cannot hover, always show it. */
.toast:hover .toast-close, .toast-close:focus-visible { opacity: 1; }
@media (hover: none) {
  .toast-close { opacity: 1; }
}
.toast-close:hover { color: var(--menu-ink); }
.toast-close .icon { width: 16px; height: 16px; }
@keyframes toast-in-top {
  from { opacity: 0; transform: translateY(calc(-100% - 16px)); }
  to { opacity: 1; transform: none; }
}
@keyframes toast-out-top {
  to { opacity: 0; transform: translateY(calc(-100% - 16px)); }
}
@keyframes toast-in-bottom {
  from { opacity: 0; transform: translateY(calc(100% + 16px)); }
  to { opacity: 1; transform: none; }
}
@keyframes toast-out-right {
  to { opacity: 0; transform: translateX(calc(100% + 16px)); }
}

@media (min-width: 640px) {
  .toast-region {
    top: auto;
    left: auto;
    right: 16px;
    bottom: 16px;
    width: min(388px, calc(100vw - 32px));
  }
  .toast { animation-name: toast-in-bottom; }
  .toast.is-leaving { animation-name: toast-out-right; }
  /* While a toast shows, keyboard focus is scrolled clear of it (app.js sets the height). */
  html { scroll-padding-bottom: var(--toast-space, 0px); }
}

/* ---------------------------------------------------------------- end of feed, empty block, buttons */

/* The live end block is its 32px sentinel holding the line with 24px padding: 100px in all, the
   line centred in it. */
.feed-end { padding: 40px 24px; text-align: center; font-size: 14px; line-height: 20px; color: var(--muted); }
.empty { padding: 48px 16px; text-align: center; }
.empty-text { font-size: 16px; line-height: 24px; color: var(--muted); }
.empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
/* The sentinel keeps the live site's 32px below the last item; it collapses under the empty block
   and the end line, which already hold that space. */
.sentinel { min-height: 32px; }
#empty-state:not([hidden]) ~ .sentinel, #feed-end:not([hidden]) ~ .sentinel { min-height: 0; }
.show-more-row { display: flex; justify-content: center; }
.show-more-row .button { margin: 0 16px 16px; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--outline-border);
  border-radius: var(--radius);
  background: var(--outline-bg);
  color: var(--menu-ink);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: var(--shadow-xs);
  transition: color 150ms var(--ease), background-color 150ms var(--ease), border-color 150ms var(--ease);
}
.button:hover { background: var(--menu-hover); color: var(--menu-hover-ink); }
.button:focus-visible {
  outline: 3px solid transparent; /* invisible, but forced colours paint it */
  border-color: var(--focus);
  box-shadow: var(--shadow-xs), 0 0 0 3px var(--ring);
}
.button-primary { background: var(--bar); border-color: var(--bar); color: var(--on-bar); }
.button-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-bar); }

.text-button {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 4px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--primary);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  white-space: nowrap;
}
.text-button:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- Manage Following */

.manage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--divider);
}
.manage-heading { font-size: 18px; line-height: 28px; font-weight: 700; color: var(--text); }
.manage-head-actions { display: flex; align-items: center; gap: 12px; }
.manage-body { padding: 16px; }
.manage-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 8px; }
.manage-search { position: relative; flex: 1 1 200px; min-width: 200px; }
.manage-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.manage-search-input { font-size: 14px; line-height: 20px; }

.segmented {
  display: inline-flex;
  gap: 4px;
  padding: 2px;
  border-radius: var(--radius);
  background: var(--fill);
}
.segment {
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-2);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 150ms var(--ease), color 150ms var(--ease);
}
.segment[aria-pressed="true"] { background: var(--card); color: var(--primary); box-shadow: var(--shadow-xs); }
.segment:focus-visible { outline-offset: -3px; }

.acc-row { border-bottom: 1px solid var(--divider); }
.acc-heading { font: inherit; }
.acc-button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  text-align: left;
}
.acc-button:focus-visible { outline-offset: -3px; }
.acc-name { min-width: 0; overflow-wrap: anywhere; }
.acc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-left: auto;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--badge-bg);
  color: var(--badge-ink);
  font-size: 12px;
  line-height: 24px;
  font-weight: 600;
}
.acc-chevron { width: 20px; height: 20px; color: var(--muted); transition: transform 150ms var(--ease); }
.acc-row.is-open .acc-chevron { transform: rotate(180deg); }
.acc-body { padding: 0 0 16px; }
.acc-tools { display: flex; gap: 16px; margin-bottom: 8px; }
.acc-tools .text-button { min-height: 24px; padding: 0; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 16px; }

.check {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}
.check-input { position: absolute; left: 0; top: 2px; width: 16px; height: 16px; margin: 0; opacity: 0; }
.check-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--check-border);
  border-radius: var(--radius-xs);
  background: var(--check-bg);
  color: var(--on-bar);
  transition: background-color 150ms var(--ease), border-color 150ms var(--ease);
}
.check-box .icon-check { display: none; width: 12px; height: 12px; }
.check-input:checked + .check-box { background: var(--primary-line); border-color: var(--primary-line); }
.check-input:checked + .check-box .icon-check { display: block; }
.check-input:focus-visible + .check-box { border-color: var(--focus); box-shadow: 0 0 0 3px var(--ring); outline: 3px solid transparent; }
.check-label { min-width: 0; overflow-wrap: anywhere; }

@media (min-width: 640px) {
  .manage-head { padding: 16px 24px; }
  .manage-body { padding: 16px 24px; }
}

/* ---------------------------------------------------------------- Sources and About */

/* Sources and About follow the live site's Terms page: one card 16px under the header, a 24/32
   bold heading 24px above full-width #364153 text. The "Back to the feed" link sits under it. */
.view-page { display: flex; flex-direction: column; gap: 16px; }
.page-card { padding: 16px; }
.page-heading { margin: 0 0 24px; font-size: 24px; line-height: 32px; font-weight: 700; color: var(--text); }
.page-intro { margin: 0 0 16px; font-size: 16px; line-height: 24px; color: var(--text-2); }
.page-intro:last-child { margin-bottom: 0; }
.back-link {
  color: var(--primary);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-decoration: none;
}
.back-link:hover { text-decoration: underline; }
.back-link::before { content: "← "; }
.back-row { padding: 0 16px; }

.table-wrap { min-width: 0; overflow-x: auto; }
.sources-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.sources-table th, .sources-table td {
  padding: 8px 12px 8px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--divider);
  overflow-wrap: anywhere;
}
.sources-table th {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.sources-table tbody tr:last-child td { border-bottom: 0; }
.sources-table td time { font-variant-numeric: tabular-nums; }
.source-name { font-weight: 500; }

.status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.status::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.status-active::before { background: var(--status-ok); }
.status-paused::before { background: var(--muted); }
.status-blocked::before { background: var(--status-bad); }
.status-waiting_for_key::before { width: 6px; height: 6px; background: transparent; border: 2px solid var(--muted); }

.prose { display: flex; flex-direction: column; gap: 12px; font-size: 16px; line-height: 24px; color: var(--text-2); }
.about-tagline { font-size: 20px; line-height: 28px; font-weight: 700; color: var(--text); }
.removal { font-weight: 500; }
.removal-address {
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--fill);
  color: var(--primary);
  font-family: var(--font);
  font-weight: 600;
  -webkit-user-select: all;
  user-select: all;
}
.generated { font-size: 12px; line-height: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }

@media (min-width: 640px) {
  .page-card { padding: 24px; }
  .back-row { padding: 0; }
}

/* On phones every source becomes a small stacked block; app.js writes the column name into
   each cell's data-label. */
@media (max-width: 639px) {
  .sources-table, .sources-table thead, .sources-table tbody, .sources-table tr, .sources-table th, .sources-table td { display: block; }
  .sources-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sources-table tr { padding: 8px 0; border-bottom: 1px solid var(--divider); }
  .sources-table tbody tr:last-child { border-bottom: 0; }
  .sources-table td {
    display: grid;
    grid-template-columns: minmax(96px, 36%) 1fr;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 0;
  }
  .sources-table td::before {
    content: attr(data-label);
    font-size: 12px;
    line-height: 20px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
  }
}

/* ---------------------------------------------------------------- the Settings dialog */

.dialog {
  width: min(384px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  margin: auto;
  padding: 24px;
  border: 1px solid var(--menu-border);
  border-radius: var(--radius);
  background: var(--menu-bg);
  color: var(--menu-ink);
  box-shadow: var(--shadow-lg);
  overflow: auto;
}
.dialog::backdrop { background: var(--backdrop); }
.dialog-inner { margin: 0; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dialog-heading { font-size: 18px; line-height: 28px; font-weight: 700; color: var(--text); }
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--menu-ink);
  transition: background-color 150ms var(--ease);
}
.icon-button:hover { background: var(--menu-hover); }
.dialog-group { margin: 16px 0 0; }
.dialog-legend { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text); }
.dialog-hint { margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--muted); }
.radio-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: 14px; line-height: 20px; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.radio input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary-line); }
.dialog-field { margin-top: 8px; }
.dialog-field label { display: block; margin-bottom: 4px; font-size: 14px; line-height: 20px; font-weight: 500; }
.select-wrap { position: relative; }
.select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 36px;
  padding: 0 36px 0 12px;
  border: 1px solid var(--outline-border);
  border-radius: var(--radius);
  background: var(--input-bg);
  color: var(--menu-ink);
  font-size: 14px;
  line-height: 20px;
  text-overflow: ellipsis;
}
.select:focus-visible { outline: 3px solid transparent; border-color: var(--focus); box-shadow: 0 0 0 3px var(--ring); }
.select-chevron {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.dialog-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.dialog-note { font-size: 14px; line-height: 20px; color: var(--muted); }

/* Browsers without <dialog>: app.js adds .dialog-fallback and toggles the open attribute. */
.dialog:not([open]) { display: none; }
.dialog-fallback[open] {
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 110;
  transform: translate(-50%, -50%);
  box-shadow: var(--shadow-lg), 0 0 0 100vmax var(--backdrop);
}

@media (min-width: 640px) {
  .mobile-only { display: none; }
}

/* ---------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .site-header.is-hidden { top: 0; }
  .item-link:hover .item-img { transform: none; }
}