/* Mitter — one layout, many color schemes. Each theme (html[data-theme]) only sets the
 * color tokens below; everything structural is shared. Body classes add the ON/OFF
 * options (theme-gallery, pfp-square, header-big, hide-metrics).
 */

/* ---------- base tokens (fallbacks) ---------- */
:root {
  --bg: #0f1114;
  --surface: #15181d;
  --surface-2: #1c2026;
  --border: #262b33;
  --text: #e8eaee;
  --dim: #9aa2ad;
  --faint: #666e7a;
  --accent: #7f8cff;
  --on-accent: #fff; /* text/icons drawn on an accent fill */
  --ok: #3ecf8e;
  --danger: #f0555c;
  --radius: 12px;
  --serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --shadow: 0 8px 26px rgba(0, 0, 0, 0.35);
  --card-pad: 12px;
  --topbar-pad: 10px 24px;
}

/* ---------- MITTER · LIGHT ---------- */
html[data-theme="light"] {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f5f7;
  --border: #e4e7ec;
  --text: #15181f;
  --dim: #5b6370;
  --faint: #8f96a3;
  --accent: #2b6ef2;
  --ok: #16a34a;
  --danger: #e5484d;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(20, 24, 31, 0.05), 0 8px 24px rgba(20, 24, 31, 0.06);
}

/* ---------- MITTER · DARK (the default) ---------- */
html[data-theme="dark"] {
  --bg: #0f1114;
  --surface: #15181d;
  --surface-2: #1c2026;
  --border: #262b33;
  --text: #e8eaee;
  --dim: #9aa2ad;
  --faint: #666e7a;
  --accent: #7f8cff;
  --ok: #3ecf8e;
  --danger: #f0555c;
  --radius: 12px;
  --shadow: 0 8px 26px rgba(0, 0, 0, 0.35);
}

/* ---------- MITTER · GRAPHITE LIGHT ---------- cool gray, monochrome */
html[data-theme="graphite"] {
  --bg: #eef0f3;
  --surface: #ffffff;
  --surface-2: #f2f4f6;
  --border: #d9dde3;
  --text: #17181a;
  --dim: #4d5259;
  --faint: #83898f;
  --accent: #1f2329;
  --ok: #2f7d4f;
  --danger: #c0392b;
  --shadow: 0 1px 2px rgba(23, 24, 26, 0.05), 0 8px 24px rgba(23, 24, 26, 0.06);
}

/* ---------- MITTER · GRAPHITE DARK ---------- the same monochrome, inverted: the
 * accent is a light gray, so accent fills carry dark text */
html[data-theme="graphite-dark"] {
  --bg: #141619;
  --surface: #1b1e22;
  --surface-2: #22262b;
  --border: #2f343a;
  --text: #e6e8eb;
  --dim: #a3a9b0;
  --faint: #6f757d;
  --accent: #d5d9de;
  --on-accent: #141619;
  --ok: #6cc28e;
  --danger: #ef6b5e;
}

/* ---------- EVERFOREST · DARK (HARD) ----------
 * Source: https://github.com/sainnhe/everforest — dark palette, hard contrast.
 * bg_dim #1e2326 · bg0 #272e33 · bg1 #2e383c · bg2 #374145 · fg #d3c6aa
 * green #a7c080 · orange #e69875 · aqua #83c092 · red #e67e80 · grey #9da9a0/#7a8478
 */
html[data-theme="everforest-dark"] {
  --bg: #1e2326;
  --surface: #272e33;
  --surface-2: #2e383c;
  --border: #374145;
  --text: #d3c6aa;
  --dim: #9da9a0;
  --faint: #7a8478;
  --accent: #a7c080;
  --ok: #83c092;
  --danger: #e67e80;
  --radius: 12px;
  --shadow: 0 8px 26px rgba(0, 0, 0, 0.35);
}

/* ---------- EVERFOREST · LIGHT (HARD) ----------
 * Source: https://github.com/sainnhe/everforest — light palette, hard contrast.
 * bg_dim #f2efdf · bg0 #fffbef · bg1 #f8f5e4 · bg4 #e8e5d5 · fg #5c6a72
 * green #8da101 · orange #f57d26 · aqua #35a77c · red #f85552 · grey #829181/#a6b0a0
 */
html[data-theme="everforest-light"] {
  --bg: #f2efdf;
  --surface: #fffbef;
  --surface-2: #f8f5e4;
  --border: #e8e5d5;
  --text: #5c6a72;
  --dim: #829181;
  --faint: #a6b0a0;
  --accent: #8da101;
  --ok: #35a77c;
  --danger: #f85552;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(92, 106, 114, 0.06), 0 8px 24px rgba(92, 106, 114, 0.08);
}

/* ---------- CATPPUCCIN · LATTE ----------
 * Source: https://catppuccin.com/palette/ — Latte (light).
 * Mantle #e6e9ef · Base #eff1f5 · Surface0 #ccd0da · Surface1 #bcc0cc · Text #4c4f69
 * Mauve #8839ef · Peach #fe640b · Green #40a02b · Red #d20f39 · Subtext0 #6c6f85 · Overlay0 #9ca0b0
 */
html[data-theme="catppuccin-latte"] {
  --bg: #e6e9ef;
  --surface: #eff1f5;
  --surface-2: #ccd0da;
  --border: #bcc0cc;
  --text: #4c4f69;
  --dim: #6c6f85;
  --faint: #9ca0b0;
  --accent: #8839ef;
  --ok: #40a02b;
  --danger: #d20f39;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(76, 79, 105, 0.06), 0 8px 24px rgba(76, 79, 105, 0.08);
}

/* ---------- CATPPUCCIN · FRAPPÉ ----------
 * Source: https://catppuccin.com/palette/ — Frappé (dark, muted).
 * Mantle #292c3c · Base #303446 · Surface0 #414559 · Surface1 #51576d · Text #c6d0f5
 * Mauve #ca9ee6 · Peach #ef9f76 · Green #a6d189 · Red #e78284 · Subtext0 #a5adce · Overlay0 #737994
 */
html[data-theme="catppuccin-frappe"] {
  --bg: #292c3c;
  --surface: #303446;
  --surface-2: #414559;
  --border: #51576d;
  --text: #c6d0f5;
  --dim: #a5adce;
  --faint: #737994;
  --accent: #ca9ee6;
  --ok: #a6d189;
  --danger: #e78284;
  --radius: 12px;
  --shadow: 0 8px 26px rgba(0, 0, 0, 0.35);
}

/* ---------- CATPPUCCIN · MACCHIATO ----------
 * Source: https://catppuccin.com/palette/ — Macchiato (dark, medium contrast).
 * Mantle #1e2030 · Base #24273a · Surface0 #363a4f · Surface1 #494d64 · Text #cad3f5
 * Mauve #c6a0f6 · Peach #f5a97f · Green #a6da95 · Red #ed8796 · Subtext0 #a5adcb · Overlay0 #6e738d
 */
html[data-theme="catppuccin-macchiato"] {
  --bg: #1e2030;
  --surface: #24273a;
  --surface-2: #363a4f;
  --border: #494d64;
  --text: #cad3f5;
  --dim: #a5adcb;
  --faint: #6e738d;
  --accent: #c6a0f6;
  --ok: #a6da95;
  --danger: #ed8796;
  --radius: 12px;
  --shadow: 0 8px 26px rgba(0, 0, 0, 0.35);
}

/* ---------- CATPPUCCIN · MOCHA ----------
 * Source: https://catppuccin.com/palette/ — Mocha (dark, the original).
 * Mantle #181825 · Base #1e1e2e · Surface0 #313244 · Surface1 #45475a · Text #cdd6f4
 * Mauve #cba6f7 · Peach #fab387 · Green #a6e3a1 · Red #f38ba8 · Subtext0 #a6adc8 · Overlay0 #6c7086
 */
html[data-theme="catppuccin-mocha"] {
  --bg: #181825;
  --surface: #1e1e2e;
  --surface-2: #313244;
  --border: #45475a;
  --text: #cdd6f4;
  --dim: #a6adc8;
  --faint: #6c7086;
  --accent: #cba6f7;
  --ok: #a6e3a1;
  --danger: #f38ba8;
  --radius: 12px;
  --shadow: 0 8px 26px rgba(0, 0, 0, 0.35);
}

/* ---------- GRUVBOX · DARK ----------
 * Source: https://github.com/morhetz/gruvbox — dark palette, hard background.
 * dark0_hard #1d2021 · dark0 #282828 · dark1 #3c3836 · dark2 #504945 · fg1 #ebdbb2
 * bright_green #b8bb26 · bright_yellow #fabd2f · bright_aqua #8ec07c · bright_red #fb4934
 * fg4 #a89984 · gray #928374
 */
html[data-theme="gruvbox-dark"] {
  --bg: #1d2021;
  --surface: #282828;
  --surface-2: #3c3836;
  --border: #504945;
  --text: #ebdbb2;
  --dim: #a89984;
  --faint: #928374;
  --accent: #b8bb26;
  --ok: #8ec07c;
  --danger: #fb4934;
  --radius: 12px;
  --shadow: 0 8px 26px rgba(0, 0, 0, 0.35);
}

/* ---------- GRUVBOX · LIGHT ----------
 * Source: https://github.com/morhetz/gruvbox — light palette, hard background.
 * light0_hard #f9f5d7 · light0 #fbf1c7 · light1 #ebdbb2 · light2 #d5c4a1 · fg1 #3c3836
 * neutral_green #98971a · neutral_yellow #d79921 · neutral_aqua #689d6a · neutral_red #cc241d
 * fg4 #7c6f64 · gray #928374
 */
html[data-theme="gruvbox-light"] {
  --bg: #f9f5d7;
  --surface: #fbf1c7;
  --surface-2: #ebdbb2;
  --border: #d5c4a1;
  --text: #3c3836;
  --dim: #7c6f64;
  --faint: #928374;
  --accent: #98971a;
  --ok: #689d6a;
  --danger: #cc241d;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(60, 56, 54, 0.06), 0 8px 24px rgba(60, 56, 54, 0.08);
}

/* ---------- NORD · DARK ----------
 * Source: https://www.nordtheme.com/docs/colors-and-palettes — Polar Night + Snow Storm.
 * nord0 #2e3440 (bg) · nord1 #3b4252 (elevated) · nord2 #434c5e (selection) · nord3 #4c566a (borders)
 * nord6 #eceff4 (text) · nord5 #e5e9f0 (subtle) · nord4 #d8dee9 (faint)
 * nord8 #88c0d0 (official primary accent) · nord12 #d08770 · nord14 #a3be8c (success) · nord11 #bf616a (error)
 */
html[data-theme="nord-dark"] {
  --bg: #2e3440;
  --surface: #3b4252;
  --surface-2: #434c5e;
  --border: #4c566a;
  --text: #eceff4;
  --dim: #e5e9f0;
  --faint: #d8dee9;
  --accent: #88c0d0;
  --ok: #a3be8c;
  --danger: #bf616a;
  --radius: 12px;
  --shadow: 0 8px 26px rgba(0, 0, 0, 0.35);
}

/* ---------- NORD · LIGHT ----------
 * Source: https://www.nordtheme.com/docs/colors-and-palettes — bright-to-dark shading:
 * nord6 #eceff4 base bg · nord5 #e5e9f0 active line/inputs · nord4 #d8dee9 elevated/borders.
 * Text per docs: nord0 plain · nord2 subtle · nord3 most subtle.
 * Accent deviates from docs (nord8 #88c0d0 is unreadable on snow storm) → nord10 #5e81ac.
 */
html[data-theme="nord-light"] {
  --bg: #eceff4;
  --surface: #eceff4;
  --surface-2: #e5e9f0;
  --border: #d8dee9;
  --text: #2e3440;
  --dim: #434c5e;
  --faint: #4c566a;
  --accent: #5e81ac;
  --ok: #a3be8c;
  --danger: #bf616a;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(46, 52, 64, 0.06), 0 8px 24px rgba(46, 52, 64, 0.08);
}

/* ---------- DRACULA ----------
 * Source: https://github.com/dracula/visual-studio-code (dracula.yml) —
 * BG #282A36 · BGDark #21222C · BGLight #343746 · SELECTION #44475A · FG #F8F8F2
 * purple #BD93F9 · pink #FF79C6 · green #50FA7B · red #FF5555 · comment #6272A4
 * (dim is comment lifted 40% toward FG; the palette ships a single grey)
 */
html[data-theme="dracula"] {
  --bg: #21222c;
  --surface: #282a36;
  --surface-2: #343746;
  --border: #44475a;
  --text: #f8f8f2;
  --dim: #9ea8c3;
  --faint: #6272a4;
  --accent: #bd93f9;
  --ok: #50fa7b;
  --danger: #ff5555;
  --radius: 12px;
  --shadow: 0 8px 26px rgba(0, 0, 0, 0.35);
}

/* ---------- TOKYO NIGHT (NIGHT) ----------
 * Source: https://github.com/folke/tokyonight.nvim (extras/lua/tokyonight_night.lua) —
 * bg_dark #16161e · bg #1a1b26 · bg_highlight #292e42 · fg_gutter #3b4261 · fg #c0caf5
 * blue #7aa2f7 · magenta #bb9af7 · green #9ece6a · red #f7768e · fg_dark #a9b1d6 · dark3 #545c7e
 */
html[data-theme="tokyo-night"] {
  --bg: #16161e;
  --surface: #1a1b26;
  --surface-2: #292e42;
  --border: #3b4261;
  --text: #c0caf5;
  --dim: #a9b1d6;
  --faint: #545c7e;
  --accent: #7aa2f7;
  --ok: #9ece6a;
  --danger: #f7768e;
  --radius: 12px;
  --shadow: 0 8px 26px rgba(0, 0, 0, 0.35);
}

/* ---------- ROSÉ PINE (MAIN) ----------
 * Source: https://github.com/rose-pine/neovim (lua/rose-pine/palette.lua, main) —
 * base #191724 · surface #1f1d2e · overlay #26233a · highlight_med #403d52 · text #e0def4
 * iris #c4a7e7 · rose #ebbcba · leaf #95b1ac · love #eb6f92 · subtle #908caa · muted #6e6a86
 */
html[data-theme="rose-pine"] {
  --bg: #191724;
  --surface: #1f1d2e;
  --surface-2: #26233a;
  --border: #403d52;
  --text: #e0def4;
  --dim: #908caa;
  --faint: #6e6a86;
  --accent: #c4a7e7;
  --ok: #95b1ac;
  --danger: #eb6f92;
  --radius: 12px;
  --shadow: 0 8px 26px rgba(0, 0, 0, 0.35);
}

/* ---------- ROSÉ PINE (DAWN) ----------
 * Source: https://github.com/rose-pine/neovim (lua/rose-pine/palette.lua, dawn) —
 * base #faf4ed · surface #fffaf3 · overlay #f2e9e1 · highlight_med #dfdad9 · text #464261
 * iris #907aa9 · rose #d7827e · leaf #6d8f89 · love #b4637a · subtle #797593 · muted #9893a5
 */
html[data-theme="rose-pine-dawn"] {
  --bg: #faf4ed;
  --surface: #fffaf3;
  --surface-2: #f2e9e1;
  --border: #dfdad9;
  --text: #464261;
  --dim: #797593;
  --faint: #9893a5;
  --accent: #907aa9;
  --ok: #6d8f89;
  --danger: #b4637a;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(70, 66, 97, 0.06), 0 8px 24px rgba(70, 66, 97, 0.08);
}

/* ---------- SOLARIZED · DARK ----------
 * Source: https://github.com/altercation/vim-colors-solarized (colors/solarized.vim, GUI) —
 * base03 #002b36 · base02 #073642 · base01 #586e75 · base00 #657b83 · base0 #839496
 * blue #268bd2 · orange #cb4b16 · green #859900 · red #dc322f
 */
html[data-theme="solarized-dark"] {
  --bg: #002b36;
  --surface: #002b36;
  --surface-2: #073642;
  --border: #586e75;
  --text: #839496;
  --dim: #657b83;
  --faint: #586e75;
  --accent: #268bd2;
  --ok: #859900;
  --danger: #dc322f;
  --radius: 12px;
  --shadow: 0 8px 26px rgba(0, 0, 0, 0.35);
}

/* ---------- SOLARIZED · LIGHT ----------
 * Source: https://github.com/altercation/vim-colors-solarized (colors/solarized.vim, GUI) —
 * base3 #fdf6e3 · base2 #eee8d5 · base1 #93a1a1 · base00 #657b83 · base01 #586e75
 * blue #268bd2 · orange #cb4b16 · green #859900 · red #dc322f
 */
html[data-theme="solarized-light"] {
  --bg: #fdf6e3;
  --surface: #fdf6e3;
  --surface-2: #eee8d5;
  --border: #93a1a1;
  --text: #657b83;
  --dim: #586e75;
  --faint: #93a1a1;
  --accent: #268bd2;
  --ok: #859900;
  --danger: #dc322f;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(101, 123, 131, 0.06), 0 8px 24px rgba(101, 123, 131, 0.08);
}

/* ---------- HIGH CONTRAST · DARK ----------
 * Custom accessibility scheme (no upstream): pure-black base, near-white text
 * (AAA ratios), strong edges, luminescent accents, no shadows.
 */
html[data-theme="high-contrast-dark"] {
  --bg: #000000;
  --surface: #0d0d0d;
  --surface-2: #1a1a1a;
  --border: #8a8a8a;
  --text: #ffffff;
  --dim: #e5e5e5;
  --faint: #b3b3b3;
  --accent: #ffea00;
  --on-accent: #000; /* luminescent accent fills need dark text */
  --ok: #00e676;
  --danger: #ff5252;
  --radius: 12px;
  --shadow: none;
}

/* ---------- HIGH CONTRAST · LIGHT ----------
 * Custom accessibility scheme (no upstream): paper-white base, near-black text
 * (AAA ratios), strong edges, deep saturated accents.
 */
html[data-theme="high-contrast-light"] {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f0f0f0;
  --border: #767676;
  --text: #000000;
  --dim: #333333;
  --faint: #595959;
  --accent: #0033cc;
  --ok: #006600;
  --danger: #b00020;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ---------- EDITORIAL · GAZETTE ---------- ivory newsprint, red ink */
html[data-theme="gazette"] {
  --bg: #f4efe4;
  --surface: #fffdf7;
  --surface-2: #efe8d8;
  --border: #cfc5ac;
  --text: #1c1810;
  --dim: #4c4434;
  --faint: #8d836c;
  --accent: #a53a2c;
  --ok: #2e6b43;
  --danger: #a53a2c;
}

/* ---------- EDITORIAL · PROJECTOR ---------- near-black, coral */
html[data-theme="projector"] {
  --bg: #050505;
  --surface: #0e0e0e;
  --surface-2: #161616;
  --border: #242424;
  --text: #ececea;
  --dim: #9c9c96;
  --faint: #5f5f5a;
  --accent: #ff6b4a;
  --ok: #4de3a0;
  --danger: #ff5c5c;
}

/* ============================================================ reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scrollbar-color: var(--border) transparent; -webkit-tap-highlight-color: transparent; }
body {
  background:
    radial-gradient(1100px 480px at 82% -12%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  min-height: 100vh;
  /* Chrome and labels aren't text to copy — only real content is selectable. */
  -webkit-user-select: none;
  user-select: none;
}
/* ...but posts, bios, metadata values, links and form/code content stay copyable. */
input, textarea, select, code, pre, a,
.tweet-body, .tweet-body *,
.profile-bio,
.dc-val, .dc-link,
[contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}
a { color: var(--accent); }

/* Single feed loading row — a spinner with an optional label, sitting under the Home
   tabs. Used for the first load, pull-to-refresh and manual refresh. */
.feed-status {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--faint); font-size: 12.5px; line-height: 1.45;
  padding: 10px 0 14px;
}
.feed-status .spinner { width: 18px; height: 18px; margin: 0; border-width: 2px; }
.feed-status[hidden] { display: none; }
.feed-status:not(.has-text) span { display: none; }
#nav-refresh.spin svg { animation: spin 0.8s linear infinite; }

/* ============================================================ top bar */
#topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: var(--topbar-pad);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent);
  flex: none;
}
.brand-mark svg { height: 26px; width: auto; display: block; }
.brand-name { font-family: var(--serif); font-size: 24px; font-weight: 700; letter-spacing: 0.2px; }

#nav { display: flex; gap: 4px; margin-left: auto; }
.nav-item {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: none; color: var(--dim); font-size: 14px; font-weight: 600;
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  transition: color .12s, background .12s;
}
.nav-item svg { width: 17px; height: 17px; }
.nav-item:hover { color: var(--text); background: var(--surface); }
.nav-item.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* ============================================================ layout */
#layout {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
}

/* People search results reuse the follow-list row styling (see .follow-page-list) */

/* Following page: the accounts in your feed */
.follow-page-list { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.follow-page-list li {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; cursor: pointer;
}
.follow-page-list li:hover { border-color: var(--accent); }
.follow-page-list img.favatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: var(--surface-2); flex: none; }
.follow-page-list .fmain { flex: 1; min-width: 0; }
.follow-page-list .fname { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.follow-page-list .fhandle { color: var(--faint); font-size: 12.5px; }
.follow-page-list .funfollow {
  background: none; border: 1px solid var(--border); color: var(--dim);
  border-radius: 8px; font-size: 12px; font-weight: 600; padding: 6px 12px; cursor: pointer; flex: none;
}
.follow-page-list .funfollow:hover { color: var(--danger); border-color: var(--danger); }

/* Separates a search result from the accounts in your feed (Following page) */
.list-divider { border: none; border-top: 1px solid var(--border); margin: 16px 0; }

/* Following-list sort header + sort select */
.follow-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 2px 10px;
}
.follow-head-title { color: var(--faint); font-size: 13px; font-weight: 600; }
select.follow-sort {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--dim); font-size: 12px; font-weight: 600;
  padding: 5px 8px; max-width: 150px; cursor: pointer; outline: none;
}
select.follow-sort:hover { color: var(--text); border-color: var(--faint); }
select.follow-sort:focus { border-color: var(--accent); color: var(--text); }

/* ============================================================ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--accent); color: var(--on-accent); border: none;
  border-radius: 9px; padding: 9px 16px;
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: filter .12s;
}
.btn svg { width: 14px; height: 14px; }
.btn:hover { filter: brightness(1.12); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn-danger { color: #fff; }
.btn-ghost:hover { background: var(--surface-2); filter: none; }
.btn-danger { background: var(--danger); }
.btn-sm { padding: 6px 12px; font-size: 12.5px; border-radius: 8px; }

/* views can scroll freely (no sticky in-view controls) */
.view-head { position: static; }

/* ============ Home tabs — For You / Following (Twitter-style) ============ */
.home-tabs {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.home-tab {
  position: relative;
  flex: 1;
  max-width: 240px;
  background: none; border: none;
  color: var(--dim); font-size: 14.5px; font-weight: 700;
  padding: 11px 10px; cursor: pointer;
  transition: color .12s, background .12s;
}
.home-tab:hover { color: var(--text); background: color-mix(in srgb, var(--surface) 55%, transparent); }
.home-tab.active { color: var(--text); }
.home-tab.active::after {
  content: "";
  position: absolute; left: 25%; right: 25%; bottom: -1px;
  height: 3px; border-radius: 3px 3px 0 0; background: var(--accent);
}
.empty .btn { margin-top: 12px; }

/* infinite-scroll sentinel */
.load-more-sentinel { height: 1px; }

/* ============================================================ views */
.view { min-width: 0; }
.view-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 16px; padding: 10px 4px;
}
.view-head h1 { font-family: var(--serif); font-size: 26px; font-weight: 700; }
.view-head .sub { color: var(--dim); font-size: 13px; margin-top: 2px; }
.view-head .spacer { flex: 1; }

.back-row { margin-bottom: 12px; }
.back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; color: var(--accent);
  font-size: 14px; font-weight: 600; cursor: pointer; padding: 6px 10px; border-radius: 8px;
}
.back-btn:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.back-btn svg { width: 15px; height: 15px; }

/* ============================================================ masonry (untouched logic, themed surfaces) */
.feed-grid { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.feed-grid .mcol { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.feed-grid .mcol > * { width: 100%; }
/* footer items (load-more / notes / the scroll sentinel) wrap onto their own full-width
   line BELOW the columns — a zero-width sentinel otherwise sits at the top of the row */
.feed-grid > .load-more-sentinel, .feed-grid > .fy-loadmore, .feed-grid > .note { flex: 1 0 100%; }
.feed-grid > .fy-loadmore { padding: 18px 0; }
.feed-grid > .note { text-align: center; }
@media (max-width: 900px) { .feed-grid .mcol { flex: 1 1 100%; } .feed-grid { flex-direction: column; } }

.timeline { display: flex; flex-direction: column; gap: 16px; max-width: 680px; width: 100%; margin: 0 auto; }
.timeline .tweet { width: 100%; }

/* day-banded masonry */
.banded { display: flex; flex-direction: column; gap: 26px; }
.band-head {
  font-family: var(--serif); color: var(--text); font-size: 15px; font-weight: 700;
  letter-spacing: 1px; margin: 6px 2px;
  display: flex; align-items: baseline; gap: 12px;
}
.band-head::after { content: ""; flex: 1; height: 1px; background: var(--border); position: relative; top: -3px; }
.band-head small { font-family: var(--sans); color: var(--faint); font-weight: 500; font-size: 11px; letter-spacing: .5px; }

/* For You controls */
.seg { display: inline-flex; background: var(--surface-2); border-radius: 8px; padding: 2px; }
.seg-btn { border: none; background: none; color: var(--dim); cursor: pointer; padding: 6px 12px; font-size: 12.5px; font-weight: 600; border-radius: 7px; transition: background .15s ease, color .15s ease; }
.seg-btn.active { background: var(--accent); color: var(--on-accent); animation: seg-pop .18s ease-out; }
.seg-btn.locked { opacity: 0.4; cursor: not-allowed; }
@keyframes seg-pop {
  from { transform: scale(.9); opacity: .5; }
  to { transform: scale(1); opacity: 1; }
}

/* ============================================================ post card (default family) */
.tweet {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--card-pad);
  cursor: pointer;
  transition: border-color .12s;
}
.tweet:hover { border-color: var(--accent); }
.tweet.tombstone { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }

.tweet-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.tweet-head img.avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--surface-2); flex: none; }
.tweet-head .who { flex: 1; min-width: 0; }
.tweet-head .name-row { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.tweet-head .name { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tweet-head .handle { color: var(--faint); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tweet-head .time { flex: none; display: inline-flex; align-items: center; gap: 5px; color: var(--faint); font-size: 12px; white-space: nowrap; }
/* only the avatar and the name/handle text open the profile — say so on hover */
.tweet-head .name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tweet-head img.avatar, .name-text, .handle-text, .rt-name { cursor: pointer; }
.name-text:hover, .handle-text:hover, .rt-name:hover { text-decoration: underline; }
/* which network a Bluesky/Mastodon post or account comes from */
.net-badge { display: inline-flex; align-items: center; color: var(--faint); flex: none; }
.net-badge svg { width: 12px; height: 12px; }
.fhandle .net-badge { margin-right: 4px; vertical-align: -1px; }

.tweet-body { font-size: 14px; overflow-wrap: anywhere; white-space: pre-wrap; }
.tweet-body a { color: var(--accent); text-decoration: none; }
.tweet-body a:hover { text-decoration: underline; }

/* (badge removed — sensitive/age-restricted labels no longer shown) */

/* media */
.media-grid { display: grid; gap: 3px; margin-top: 6px; border-radius: 10px; overflow: hidden; }
/* gap between an image and the text below it (media-first tiles) */
.tweet .media-grid + .tweet-body,
.tweet .video-wrap + .tweet-body,
.tweet > img + .tweet-body {
  margin-top: 12px;
}
.media-grid img { width: auto; height: auto; max-width: 100%; max-height: 75vh; display: block; margin: 0 auto; background: transparent; object-fit: contain; border-radius: 10px; }
/* loading placeholder: a soft surface until the bytes land, then a quick fade-in */
.media-grid img:not([data-loaded]),
.gtile img:not([data-loaded]) { background: var(--surface-2); }
.media-grid img[data-loaded],
.gtile img[data-loaded] { animation: img-in .18s ease-out; }
@keyframes img-in { from { opacity: 0.35; } to { opacity: 1; } }
.media-grid video { width: 100%; display: block; background: #000; object-fit: cover; }
.media-grid.m1 img { max-height: 75vh; object-fit: contain; }
.media-grid.m2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 3–4 up stay in one row, scaled to fit; on a narrow screen the row scrolls
   horizontally (snap) so you can slide to the other images */
.media-grid.m3,
.media-grid.m4 {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.media-grid.m3::-webkit-scrollbar,
.media-grid.m4::-webkit-scrollbar { display: none; }
/* one row at a shared height — widths follow each image's aspect ratio, so mixed
   orientations line up instead of making some cells shorter; extras overflow and scroll */
.media-grid.m3 .mcell,
.media-grid.m4 .mcell {
  flex: 0 0 auto;
  height: clamp(150px, 42vw, 300px);
  overflow: hidden;
  scroll-snap-align: start;
}
.media-grid.m3 img,
.media-grid.m4 img {
  width: auto; height: 100%; max-width: none; max-height: none;
  margin: 0; border-radius: 0; object-fit: contain;
}
.media-grid .mcell { position: relative; min-height: 90px; background: transparent; }

/* 3–4 up row controls (mouse): step to the previous/next image; touch just swipes */
.media-strip { position: relative; }
.strip-nav {
  position: absolute; top: calc(50% + 3px); transform: translateY(-50%); z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.25); color: #fff;
  cursor: pointer; opacity: 0; transition: opacity .15s ease, background .12s ease;
}
.strip-nav svg { width: 17px; height: 17px; }
.strip-prev { left: 8px; }
.strip-next { right: 8px; }
.media-strip:hover .strip-nav, .strip-nav:focus-visible { opacity: 1; }
.strip-nav:hover { background: rgba(0, 0, 0, 0.85); }
@media (hover: none) and (pointer: coarse) { .strip-nav { display: none; } }

/* sensitive media: blurred behind a tap-to-reveal veil */
.sens-veil {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.sens-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.55); color: #fff;
  font-size: 11.5px; font-weight: 600; pointer-events: none;
}
.sens-pill svg { width: 13px; height: 13px; }
.mcell.blurred img,
.video-wrap.blurred video,
.quote-media.blurred img,
.gtile.blurred img,
.gtile.blurred video { filter: blur(16px); }

/* Bluesky video in browsers without native HLS: the poster, linking out */
.video-out {
  position: relative; display: block; margin-top: 10px; max-height: 420px; aspect-ratio: 16 / 9;
  border-radius: 10px; overflow: hidden; background: #000; color: #fff; text-decoration: none;
}
.video-out img { width: 100%; height: 100%; object-fit: contain; display: block; }
.video-out-label {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 9px 15px; border-radius: 999px; background: rgba(0, 0, 0, 0.7);
  font-size: 13px; font-weight: 600;
}
.video-out-label svg { width: 14px; height: 14px; }
.video-out:hover .video-out-label { background: var(--accent); color: var(--on-accent); }

.video-wrap { position: relative; margin-top: 10px; aspect-ratio: 16 / 9; max-height: 420px; }
/* known dimensions: the box takes the video's own shape, never taller than the cap */
.video-wrap[style*="--ar"] {
  --vmax: 420px;
  aspect-ratio: var(--ar);
  max-width: min(100%, calc(var(--vmax) * var(--ar)));
  margin-left: auto; margin-right: auto;
}
.quote-media .video-wrap[style*="--ar"] { --vmax: 260px; }
.gtile .video-wrap[style*="--ar"] { max-width: none; }
.video-wrap video { width: 100%; height: 100%; object-fit: contain; max-height: 420px; background: #000; display: block; border-radius: 10px; }

/* custom video player chrome (replaces native controls — Firefox volume bug) */
.vplayer { position: relative; width: 100%; height: 100%; }
.vplayer video { border-radius: 10px; cursor: pointer; }
.vctrl {
  position: absolute; left: 8px; right: 8px; bottom: 8px;
  display: flex; align-items: center; gap: 7px;
  padding: 5px 10px;
  background: rgba(0, 0, 0, 0.75); border-radius: 9px;
  opacity: 0; transition: opacity 0.15s ease;
}
.vplayer:hover .vctrl, .vplayer:focus-within .vctrl { opacity: 1; }
.vb {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; color: #fff; cursor: pointer; padding: 3px;
  flex: 0 0 auto;
}
.vb:hover { color: var(--accent, #7c6cf6); }
.vb svg { width: 16px; height: 16px; }
.vtime { color: #ddd; font-size: 11.5px; white-space: nowrap; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.vtime b { font-weight: 600; color: #fff; }
input[type="range"].vseek, input[type="range"].vvol {
  accent-color: var(--accent, #7c6cf6);
  height: 4px; cursor: pointer; min-width: 0;
}
.vseek { flex: 1 1 auto; }
.vvol { flex: 0 0 68px; }
/* fullscreen: break out of every card/page height cap so the video fills the screen —
   !important because the contextual caps (.quote-media video, .focal video, …) would
   otherwise still hold the picture at card size while the controls go fullscreen */
.vplayer:fullscreen {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  background: #000;
}
.vplayer:fullscreen > video {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0;
  object-fit: contain;
}
.vplayer:fullscreen .vctrl {
  opacity: 1;
  left: 12px; right: 12px; bottom: 12px;
}

/* link preview row (like Twitter's link card under the media) */
.link-card {
  display: flex; align-items: center; gap: 11px;
  margin-top: 10px; padding: 10px 13px;
  border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); text-decoration: none; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.link-card:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.lc-icon { color: var(--accent); display: inline-flex; flex: none; }
.lc-icon svg { width: 15px; height: 15px; }
.lc-text { display: flex; flex-direction: column; min-width: 0; }
.lc-title { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-sub { color: var(--faint); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* engagement footer — justified action bar (same on desktop + mobile):
   items spread across the width with spacing from their own padding, and each
   item's icon + text centered. */
.tweet-foot {
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: center;
  gap: 4px 12px;
  margin: 6px auto 0; padding-top: 6px;
  border-top: 1px solid var(--border);
  color: var(--faint); font-size: 12.5px;
}
.tweet-foot > * {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  gap: 5px; min-height: 26px; padding: 1px 11px;
}
.tweet-foot span { display: inline-flex; align-items: center; gap: 5px; }
.tweet-foot svg { width: 14px; height: 14px; }
.tweet-foot b { color: var(--dim); font-weight: 600; }
.tweet-foot .interact-btn { padding: 1px 11px; border-radius: 9px; }
.tweet-foot .interact-btn:active { background: color-mix(in srgb, var(--accent) 15%, transparent); }
.interact-btn {
  background: none; border: none; color: var(--faint); cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px; border-radius: 999px;
  font-size: 12.5px; transition: color .12s, background .12s;
}
.interact-btn svg { width: 14px; height: 14px; }
.interact-btn b { color: var(--dim); font-weight: 600; }
.interact-btn:hover { color: var(--text); background: color-mix(in srgb, var(--dim) 12%, transparent); }
.interact-btn.act-like.active svg { color: var(--danger); }
.interact-btn.act-rt.active svg { color: var(--ok); }
.interact-btn.act-bookmark.active svg { color: var(--accent); }
/* active = filled icon (color the insides, not just the stroke) */
.interact-btn.active svg { fill: currentColor; }

/* quote card */
.verified { color: var(--accent); display: inline-flex; align-items: center; flex: none; }
.verified svg { width: 13px; height: 13px; }
.quote-card { margin-top: 10px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; cursor: pointer; min-width: 0; }
.quote-card:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.quote-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; min-width: 0; }
.quote-head img.qavatar { width: 19px; height: 19px; border-radius: 50%; object-fit: cover; flex: none; }
.quote-head .qname { font-weight: 700; font-size: 12.5px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; min-width: 0; }
.quote-head .qname .name-text { overflow: hidden; text-overflow: ellipsis; }
.quote-head img.qavatar { cursor: pointer; }
.quote-head .qhandle { color: var(--faint); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.quote-body { font-size: 12.5px; overflow-wrap: anywhere; white-space: pre-wrap; }
.quote-body a { color: var(--accent); text-decoration: none; }
.quote-media { position: relative; margin-top: 7px; border-radius: 8px; overflow: hidden; }
.quote-media .media-grid { margin-top: 0; }
.quote-media img { width: auto; max-width: 100%; max-height: 320px; object-fit: contain; display: block; margin: 0 auto; cursor: zoom-in; }
.quote-media .media-grid.m1 img,
.quote-media .media-grid.m2 img { max-height: 260px; }
.quote-media .media-grid.m3 .mcell,
.quote-media .media-grid.m4 .mcell { height: 170px; }
.quote-media .video-wrap { margin-top: 0; }
.quote-media .video-wrap,
.quote-media .video-wrap video { max-height: 260px; }

/* tombstone */
.tombstone-blur { position: relative; margin-top: 9px; border-radius: 10px; overflow: hidden; }
.tombstone-blur img { width: 100%; max-height: 230px; object-fit: cover; display: block; filter: blur(14px) saturate(.7); transform: scale(1.06); background: #000; }
.tombstone-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; text-align: center;
  background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 12.5px; padding: 12px;
}
.tombstone-hint { margin-top: 8px; font-size: 12px; color: var(--faint); }

/* ============================================================ profile */
.profile-head { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; }
.profile-banner { height: 130px; background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); }
.profile-banner img { width: 100%; height: 100%; object-fit: cover; }
.profile-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding: 0 16px 14px; }
.profile-row > img.profile-avatar, .profile-row > .profile-actions { flex: none; }
.profile-avatar { width: 82px; height: 82px; border-radius: 50%; border: 4px solid var(--surface); margin-top: -41px; object-fit: cover; }
.profile-actions { margin-left: auto; }
.profile-info { padding: 10px 16px 16px; }
.profile-info h2 { font-family: var(--serif); font-size: 24px; display: flex; align-items: center; gap: 6px; }
.profile-info .handle { color: var(--faint); }
.profile-bio { margin-top: 8px; font-size: 14px; }
.profile-meta { display: flex; gap: 6px 14px; flex-wrap: wrap; margin-top: 8px; color: var(--dim); font-size: 13px; }
.profile-meta span { display: inline-flex; align-items: center; gap: 5px; }
.profile-meta svg { width: 13px; height: 13px; flex: none; }
.profile-meta a { color: var(--accent); text-decoration: none; }
.profile-meta a:hover { text-decoration: underline; }
.profile-nums { display: flex; gap: 16px; margin-top: 10px; color: var(--faint); font-size: 13.5px; }
.profile-nums b { color: var(--text); }

/* ============================================================ cards / sections */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin: 14px 0; }
.card h2 { font-family: var(--serif); font-size: 17px; margin-bottom: 8px; }
.card p { color: var(--dim); font-size: 13.5px; margin-bottom: 8px; }
.card code { background: var(--surface-2); padding: 1px 6px; border-radius: 6px; font-size: 12px; }
.card details { margin-top: 10px; color: var(--dim); font-size: 13px; }
.card details summary { cursor: pointer; color: var(--accent); }
.card ol { margin: 8px 0 0 20px; }

/* about card */
.about-card .dc-rows { margin-top: 4px; }
.about-card .dc-row { padding: 8px 0; }
.about-card .dc-label { flex-basis: 70px; }
/* the build hash is <code>, but its pill padding/size would break baseline alignment */
.about-card .dc-val code { padding: 0; background: none; font-size: inherit; }
.about-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.about-foot .dc-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.about-foot .dc-link svg { width: 13px; height: 13px; }
.about-foot .theme-note { margin-top: 0; }
.about-card #install-row { margin-top: 10px; }

.note { font-size: 13px; color: var(--dim); background: var(--surface); border: 1px dashed var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
.note b { color: var(--text); }

.cookie-form { display: flex; flex-direction: column; gap: 10px; max-width: 420px; margin-top: 10px; }
.cookie-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--dim); }
.cookie-form input { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 8px 12px; font-size: 13px; outline: none; }
.cookie-form input:focus { border-color: var(--accent); }
.cookie-form .btn { width: fit-content; }
#cookie-status { font-size: 13px; color: var(--ok); }
#cookie-status.warn { color: var(--danger); }

/* theme picker: one labeled row of swatches per family */
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.card-head h2 { margin-bottom: 0; }
.theme-current { color: var(--faint); font-size: 12.5px; }
.theme-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 4px 20px; margin-top: 8px; }
.theme-group { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.tg-name { flex: 0 0 96px; color: var(--dim); font-size: 12.5px; font-weight: 600; }
.tg-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
/* a swatch is the theme in miniature: background / surface split, accent dot on top.
   The edge is an inset shadow (painted over the fill, so nothing bleeds past it) in a
   neutral gray that reads on light and dark cards alike. */
.swatch {
  position: relative; flex: none;
  width: 28px; height: 28px; border-radius: 50%; padding: 0; border: 0;
  background: linear-gradient(135deg, var(--sw-bg) 50%, var(--sw-surface) 50%);
  box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.4);
  cursor: pointer; transition: transform .12s ease;
}
.swatch::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--sw-accent);
}
.swatch:hover { transform: scale(1.1); }
.swatch.on { outline: 2px solid var(--accent); outline-offset: 2px; }
.swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-note { font-size: 12px; color: var(--faint); margin-top: 10px; }

/* reading prefs */
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--dim); margin-top: 10px; }
label.check { cursor: pointer; }
.check input[type="checkbox"] { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--accent); flex: none; cursor: pointer; }
.check b { color: var(--text); }
.check-sub { display: block; margin-top: 3px; color: var(--faint); font-size: 12px; line-height: 1.35; }

/* ON/OFF switch rows (Reading, Feed, Layout options) */
.switch-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-top: 14px; cursor: pointer;
}
.switch-text { min-width: 0; }
.switch-text b { display: block; color: var(--text); font-size: 13.5px; }
.switch-sub { display: block; margin-top: 3px; color: var(--faint); font-size: 12px; line-height: 1.35; }
.switch {
  position: relative; flex: none; width: 42px; height: 24px; margin-top: 1px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: background .15s ease, border-color .15s ease;
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--dim);
  transition: transform .16s ease, background .16s ease;
}
.switch input { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.switch:has(input:checked) { background: var(--accent); border-color: var(--accent); }
.switch:has(input:checked)::after { transform: translateX(18px); background: var(--on-accent); }
.switch:has(input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.switch-row.locked { opacity: .5; cursor: default; }
.switch-row.locked .switch input { cursor: not-allowed; }
.layout-opts { margin-top: 6px; }

/* layout options */
body.pfp-square .tweet-head img.avatar,
body.pfp-square .follow-page-list img.favatar,
body.pfp-square .quote-head img.qavatar,
body.pfp-square .profile-avatar { border-radius: 6px; }
body.header-big .brand-name { font-size: 34px; letter-spacing: 4px; }
body.header-big .brand-mark svg { height: 34px; }
.check-middle { align-items: center; }
.check-col { margin-bottom: 2px; }
.text-input {
  width: 100%; max-width: 460px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); padding: 8px 12px; font-size: 13px; outline: none; margin-top: 6px;
}
.text-input:focus { border-color: var(--accent); }
.text-input::placeholder { color: var(--faint); }

/* aligned label/control rows (Cache, etc.) */
.field-row {
  display: grid; grid-template-columns: minmax(150px, 200px) 1fr;
  align-items: center; gap: 12px; margin-top: 12px; max-width: 460px;
}
.field-label { color: var(--text); font-size: 13.5px; font-weight: 600; }
.field-row .text-input { margin-top: 0; max-width: 100%; }
.field-row .seg { justify-self: start; }
.field-foot { margin-top: 14px; }
@media (max-width: 520px) {
  .field-row { grid-template-columns: 1fr; gap: 6px; }
}

/* action buttons share one row (natural width, no wrapping) */
.data-actions { display: flex; gap: 8px; margin-top: 12px; }
.data-actions .btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 520px) {
  .data-actions { gap: 6px; }
  .data-actions .btn { font-size: 12px; padding: 6px 9px; }
}

/* hide engagement metrics (body.hide-metrics) — icons stay, numbers go */
body.hide-metrics .tweet-foot b,
body.hide-metrics .gtile .glike b { display: none; }

/* search view */
#view-following { max-width: 720px; margin: 0 auto; }
#view-settings { max-width: 720px; margin: 0 auto; }
.explore-search { display: flex; gap: 10px; margin-bottom: 16px; max-width: 720px; align-items: center; }
.explore-search input {
  flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); padding: 11px 16px; font-size: 15px; outline: none;
}
.explore-search input:focus { border-color: var(--accent); }
/* post-search order tabs (Top / Latest / Media) — session only */
.explore-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.explore-tabs[hidden] { display: none; }
.explore-tab {
  position: relative; background: none; border: none;
  color: var(--dim); font-size: 13.5px; font-weight: 700;
  padding: 9px 16px; cursor: pointer; transition: color .12s;
}
.explore-tab:hover { color: var(--text); }
.explore-tab.active { color: var(--text); }
.explore-tab.active::after {
  content: ""; position: absolute; left: 22%; right: 22%; bottom: -1px;
  height: 3px; border-radius: 3px 3px 0 0; background: var(--accent);
}
.explore-results { min-width: 0; }
.explore-post { max-width: 640px; margin: 0 auto; }

.dc-rows { display: flex; flex-direction: column; }
.dc-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 14px;
  font-size: 13.5px;
}
.dc-row + .dc-row { border-top: 1px dashed var(--border); }
.dc-ic { display: inline-flex; align-items: center; color: var(--faint); flex: 0 0 auto; transform: translateY(2px); }
.dc-ic svg { width: 14px; height: 14px; }
.dc-label { color: var(--faint); flex: 0 0 74px; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.4px; }
.dc-val { color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.dc-link { color: var(--accent) !important; text-decoration: none; cursor: pointer; }
.dc-link:hover { text-decoration: underline; }

/* ============================================================ misc */
.empty { text-align: center; color: var(--dim); padding: 48px 20px; border: 1px dashed var(--border); border-radius: var(--radius); }
.empty b { color: var(--text); display: block; font-size: 16px; margin-bottom: 6px; font-family: var(--serif); }
.error-box { border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); background: color-mix(in srgb, var(--danger) 8%, transparent); color: var(--danger); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; font-size: 13px; }
.spinner {
  width: 26px; height: 26px; border: 3px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; margin: 36px auto; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.inline-spinner {
  display: inline-block; vertical-align: -2px; margin-right: 8px;
  width: 13px; height: 13px; border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .8s linear infinite;
}

/* loading / empty states are always full-width & centered — the list layout caps
   frames at 680px, which pushes spinners and empty boxes off-center */
.timeline:has(> .spinner), .timeline:has(> .empty),
.feed-grid:has(> .spinner), .feed-grid:has(> .empty) {
  display: block;
  max-width: none;
}

#lightbox {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.93);
  display: flex; align-items: center; justify-content: center; z-index: 100; cursor: zoom-out;
  touch-action: none; overscroll-behavior: contain;
}
#lightbox img {
  max-width: 94vw; max-height: 94vh; border-radius: 10px;
  /* handled by the JS pinch/pan — stop the browser from scrolling/zooming the page */
  touch-action: none; transform-origin: center center; will-change: transform;
  -webkit-user-drag: none; user-select: none;
}
#lightbox-close {
  position: absolute; top: 16px; right: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.1); border: none; color: #fff;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
}
#lightbox-close svg { width: 16px; height: 16px; }

#toast {
  position: fixed; right: 24px; bottom: 24px; left: auto;
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-2); color: var(--text);
  padding: 12px 16px; border-radius: 12px; font-size: 14px;
  border: 1px solid var(--border); z-index: 200;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  max-width: min(420px, calc(100vw - 48px));
  animation: toast-in .18s ease;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
#toast .toast-ic { display: inline-flex; flex: none; color: var(--ok); }
#toast .toast-ic svg { width: 17px; height: 17px; }
#toast.error { border-color: color-mix(in srgb, var(--danger) 50%, transparent); }
#toast.error .toast-ic { color: var(--danger); }

/* "a new release was downloaded" — top-center pill, clears the bottom tab bar */
.update-pill {
  position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%);
  z-index: 210; border: 0; cursor: pointer;
  background: var(--accent); color: var(--on-accent); font: 600 13px var(--sans);
  padding: 8px 16px; border-radius: 999px; box-shadow: var(--shadow);
  animation: toast-in .18s ease;
}



/* repost header — "X reposted" above the original post */
.retweet-header {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--dim); margin: -4px 0 8px; cursor: pointer;
}
.retweet-header svg { width: 14px; height: 14px; flex: none; }
.retweet-header b { color: var(--text); font-weight: 700; }


/* replies section */
.reply-section { margin-top: 18px; }
.reply-section h2 {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--serif); font-size: 17px; margin-bottom: 14px;
  border-bottom: 1px solid var(--border); padding-bottom: 9px;
}
.reply-section h2 small { color: var(--faint); font-family: var(--sans); font-size: 13px; font-weight: 600; }
.reply-list { display: flex; flex-direction: column; gap: 14px; max-width: 680px; }

/* threaded replies: children indent with a connector that curves into each card.
The vertical spine is drawn per node (::before); the curved elbow (::after) is one
rounded L-piece flowing off the spine into the card, so no sharp butt joints.
--thread-c softens with depth. */
.reply-node { display: flex; flex-direction: column; }
.reply-children {
  --thread-c: var(--border);
  margin: 10px 0 0 20px;
  padding-left: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.reply-children .reply-children { --thread-c: color-mix(in srgb, var(--border) 55%, transparent); }
.reply-children .reply-node { position: relative; }
/* vertical spine */
.reply-children .reply-node::before {
  content: "";
  position: absolute;
  left: -16px;
  top: -12px;      /* bridge the flex gap between siblings */
  bottom: -12px;
  width: 2px;
  background: var(--thread-c);
}
.reply-children .reply-node:first-child::before { top: -8px; }
.reply-children .reply-node:last-child::before {
  bottom: auto;    /* stop where the elbow takes over — no dangling tail */
  top: -12px;
  height: 22px;
}
.reply-children .reply-node:first-child:last-child::before {
  top: -8px;
  height: 18px;
}
/* curved elbow: spine -> card, one rounded piece */
.reply-children .reply-node::after {
  content: "";
  position: absolute;
  left: -16px;
  top: 10px;
  width: 13px;
  height: 12px;
  border-left: 2px solid var(--thread-c);
  border-bottom: 2px solid var(--thread-c);
  border-bottom-left-radius: 10px;
}

/* gifs render as silent looping video — no controls, no chrome */
.media-grid .gif-video { object-fit: contain; max-height: 420px; }
.video-wrap .gif-video { border-radius: 10px; }

/* lightbox prev/next */
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.25); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5;
}
.lb-nav svg { width: 20px; height: 20px; }
.lb-nav:hover { background: var(--accent); color: var(--bg); }
#lightbox-prev { left: 18px; }
#lightbox-next { right: 18px; }
@media (max-width: 640px) { .lb-nav { width: 38px; height: 38px; } #lightbox-prev { left: 8px; } #lightbox-next { right: 8px; } }

/* delete-data modal */
.modal-veil {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0, 0, 0, 0.6);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px; max-width: 420px; width: 100%; outline: none;
}
.modal h3 { font-size: 17px; margin-bottom: 8px; }
.modal p { color: var(--dim); font-size: 13.5px; }
.modal-acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* right-click download menu */
.ctx-menu {
  position: fixed; z-index: 300; min-width: 185px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 5px; box-shadow: var(--shadow);
}
@keyframes ctx-pop {
  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
@keyframes ctx-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.ctx-menu:not([hidden]) { animation: ctx-pop 0.13s ease-out; }
.ctx-menu.ctx-center:not([hidden]) { animation: ctx-fade 0.13s ease-out; }
.ctx-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: none; border: none; color: var(--text);
  font-size: 13px; font-weight: 500; text-align: left;
  padding: 8px 11px; border-radius: 7px; cursor: pointer;
}
.ctx-item svg { width: 15px; height: 15px; color: var(--dim); flex: none; }
.ctx-item:hover { background: var(--accent); color: var(--on-accent); }
.ctx-item:hover svg { color: var(--on-accent); }
/* mobile long-press: centered sheet, clamped to the viewport instead of the cursor */
.ctx-menu.ctx-center {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(300px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
@media (pointer: coarse) {
  .ctx-item { padding: 11px 13px; font-size: 14px; }
  .ctx-item svg { width: 17px; height: 17px; }
}

/* ============================================================ LAYOUT: GALLERY */
#layout > #main { min-width: 0; }
body.theme-gallery #layout { max-width: 1600px; }
.gtile { position: relative; padding: 0; overflow: hidden; cursor: zoom-in; border-radius: var(--radius); background: var(--surface-2); }
.gtile img { width: 100%; display: block; }
/* colored footer inside the media: poster handle + like; clicking opens the post */
.gtile .gfoot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--accent) 88%, #000);
  color: #fff; font-size: 12px;
}
.gtile .gfoot .gleft { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
/* stop/play control for inline GIFs (gallery footer and feed video) */
.gstop {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 22px; height: 22px; padding: 0; border-radius: 50%;
  background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.6); color: #fff; cursor: pointer;
}
.gstop:hover { background: #fff; color: #111; }
.gstop svg { width: 13px; height: 13px; }
.video-wrap > .gstop { position: absolute; left: 8px; bottom: 8px; z-index: 3; }
.gtile .gfoot .guser { cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gtile .gfoot .guser:hover { text-decoration: underline; }
.gtile .gfoot .glike { color: #fff; flex: none; }
.gtile .gfoot .glike b { color: #fff; font-weight: 600; }
.gtile .gplay {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%; padding: 0; border: none; cursor: pointer;
  background: rgba(0, 0, 0, 0.6); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.gtile .gplay:hover { background: var(--accent); }
.gtile .gplay svg { width: 18px; height: 18px; }
.gtile .video-wrap { width: 100%; margin-top: 0; max-height: none; }
.gtile .video-wrap video { max-height: none; }
.gtile .vctrl { bottom: 34px; } /* clear the footer so the controls stay usable */

/* ============================================================ responsive */
@media (max-width: 900px) {
  #layout { padding: 14px; }
  .feed-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .nav-item { padding: 8px 10px; }
  .nav-item span { display: none; }
  body.header-big .brand-name { font-size: 26px; letter-spacing: 2px; }
  /* keep the action row on a single line — shrink spacing instead of wrapping */
  .tweet-foot { justify-content: space-between; gap: 0; }
  .tweet-foot > * { padding: 1px 6px; }
  .tweet-foot .interact-btn { padding: 1px 6px; }
}

/* ============================================================ post page
   One reading column: a back bar, the thread being answered (joined by a line), the
   opened post a size up, then its replies. */
.post-page { max-width: 680px; margin: 0 auto; }
.post-bar { display: flex; align-items: center; gap: 6px; margin: -6px 0 12px; }
.post-bar h1 { font-family: var(--serif); font-size: 20px; font-weight: 700; }
.post-bar .back-btn { padding: 8px; border-radius: 50%; }
.post-bar .back-btn svg { width: 19px; height: 19px; }

.thread-context { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.thread-context .tweet { position: relative; }
/* the line runs from each ancestor's avatar down into the next post's avatar */
.thread-context .tweet::after {
  content: ""; position: absolute; z-index: 1;
  left: calc(var(--card-pad) + 18px); top: calc(var(--card-pad) + 44px); bottom: -23px;
  width: 2px; border-radius: 2px; background: var(--border);
}

.tweet.focal { cursor: auto; padding: 16px; }
.tweet.focal:hover { border-color: var(--border); }
.tweet.focal .tweet-head img.avatar { width: 46px; height: 46px; }
.tweet.focal .tweet-head .name { font-size: 15.5px; }
.tweet.focal .tweet-body { font-size: 16.5px; line-height: 1.5; -webkit-user-select: text; user-select: text; }
.tweet.focal .media-grid.m1 img { max-height: min(70vh, 640px); }
.tweet.focal .video-wrap, .tweet.focal .video-wrap video { max-height: min(70vh, 640px); }
.tweet.focal .video-wrap[style*="--ar"] { --vmax: min(70vh, 640px); }
.focal-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border);
  color: var(--faint); font-size: 13px;
}
.fm-via::before { content: "·"; margin-right: 12px; }
.fm-acts { display: inline-flex; gap: 6px; margin-left: auto; }
.fm-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 1px solid var(--border); border-radius: 999px;
  color: var(--dim); font-size: 12px; font-weight: 600; padding: 4px 11px;
  cursor: pointer; text-decoration: none;
}
.fm-btn svg { width: 12px; height: 12px; }
.fm-btn:hover { color: var(--text); border-color: var(--faint); }
.tweet.focal .tweet-foot { border-top: 0; margin-top: 2px; }

.post-page .note { margin-top: 14px; }

/* ============================================================ mobile UI (Android-style) */
/* Bottom tab bar is hidden on desktop; shown only at mobile widths. */
#tabbar { display: none; }

@media (max-width: 900px) {
  html, body { overscroll-behavior-y: contain; overflow-x: clip; }
  /* posts must never exceed the viewport: flex children default to
     min-width:auto (no shrinking below content size) — allow it in feeds,
     footer stats, tab bar, search row and player sliders. overflow-x: clip
     (unlike hidden) keeps sticky positioning working as a backstop. */
  .tweet, .tab-item, .explore-search input, .vseek { min-width: 0; }
  /* single-column feed: masonry columns must stretch to the viewport width.
     `.feed-grid` is `align-items: flex-start` (desktop masonry), so in column
     direction its `.mcol` flex children would otherwise shrink-to-fit content
     (a long link-card title / intrinsic image width) and overflow the screen. */
  .feed-grid { align-items: stretch; }
  .feed-grid .mcol { width: 100%; }
  /* header: centered logo only — desktop nav moves to the bottom bar.
     Solid background (no backdrop blur): blurred fixed/sticky bars are a known
     flicker source on mobile GPUs during scroll. */
  #topbar { justify-content: center; gap: 0; padding: 10px 16px; background: var(--bg); backdrop-filter: none; }
  #topbar #nav { display: none; }
  /* on phones the header is NOT sticky: it scrolls away with the For You/Following
     tabs so both leave the screen together (nothing stays pinned at the top) */
  #topbar { position: static; }
  .brand-name { font-size: 22px; }
  /* single-column feed on phones */
  #layout {
    max-width: none;
    padding: 12px 12px 96px;
  }
  /* bottom tab bar */
  #tabbar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    align-items: stretch;
    justify-content: space-around;
    /* same gap between items and at both ends, so the row is inset symmetrically */
    gap: 6px;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: var(--bg);
    border-top: 1px solid var(--border);
  }
  #tabbar[hidden] { display: none !important; }
  .tab-item {
    flex: 1 1 0;
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    background: none; border: none; color: var(--dim);
    font-size: 10.5px; font-weight: 600;
    padding: 6px 2px 4px; border-radius: 10px; cursor: pointer;
    min-height: 52px;
  }
  .tab-item svg { width: 21px; height: 21px; }
  .tab-item.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
  /* masonry collapses to a single column (Gallery's tiles included) */
  .feed-grid { flex-direction: column; }
  .feed-grid .mcol { flex: 1 1 100%; }
  /* tuck the feed snug under the tabs — no blank band between them */
  .home-tabs { margin-bottom: 8px; }
  /* Following page: sort header + list tighten on narrow screens */
  .follow-page-list { gap: 4px; }
  #view-following .follow-head { flex-wrap: wrap; }
  #view-following .follow-head select.follow-sort { flex: 1 1 100%; max-width: none; }
  /* toast floats above the tab bar */
  #toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* Touch devices: a tap must not leave a sticky :hover state behind (e.g. tapping
   "like" would otherwise keep the whole card highlighted). Reset hover effects. */
@media (hover: none) {
  .tweet:hover { border-color: var(--border); }
  .tweet.tombstone:hover { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
  .interact-btn:hover { color: var(--faint); background: none; }
  .tweet-foot .interact-btn:active { background: none; }
  .link-card:hover { border-color: var(--border); background: none; }
  .quote-card:hover { background: none; }
  .follow-page-list li:hover { border-color: var(--border); }
  .nav-item:hover { color: var(--dim); background: none; }
  .home-tab:hover { color: var(--dim); background: none; }
  .back-btn:hover { background: none; }
  .explore-tab:hover { color: var(--dim); }
  .swatch:hover { transform: none; }
  .gplay:hover { background: rgba(0, 0, 0, 0.6); }
  .gstop:hover { background: rgba(0, 0, 0, 0.55); color: #fff; }
  .gtile .gfoot .guser:hover { text-decoration: none; }
  /* a long-press would otherwise leave the option under the finger stuck highlighted */
  .ctx-item:hover { background: none; color: var(--text); }
  .ctx-item:hover svg { color: var(--dim); }
}