/*
 * MDSwap — rendered markdown preview, not raw editor.
 */

/* @critical-start */
:root,
:root[data-theme="midnight"] {
  --bg: #0a0b0e;
  --surface: #14161c;
  --surface-2: #1c1f27;
  --surface-3: #262932;
  --border: #2c2f38;
  --border-soft: #1f222a;
  --ink: #ecedef;
  --ink-soft: #b9bbc1;
  --muted: #8a8d96;
  --syntax: #555861;
  --accent: #67d4ff;
  --accent-strong: #94e3ff;
  --accent-hover: #94e3ff;
  --accent-bg: rgba(103, 212, 255, 0.12);
  --accent-ink: #021924;
  --link: #67d4ff;
  --good: #6ee7a3;
  --warn: #f5c46e;
  --bad: #ff7d7d;
  --danger: #ef6b6b;
  --info: #7fa9ff;
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 18px 40px rgba(0, 0, 0, 0.45);
  --shadow-soft: 0 1px 0 rgba(0, 0, 0, 0.25);
  /* shadcn-aligned shadow scale (dark) — used by refined surfaces. */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.55), 0 2px 4px -2px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 24px -6px rgba(0, 0, 0, 0.65), 0 6px 10px -4px rgba(0, 0, 0, 0.5);
  /* shadcn radius scale: sm/md = default-margin offsets of --radius. */
  --radius: 0.5rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.625rem;
  /* shadcn canonical aliases — resolve at use-time so per-theme overrides flow through. */
  --background: var(--bg);
  --foreground: var(--ink);
  --card: var(--surface);
  --card-foreground: var(--ink);
  --popover: var(--surface);
  --popover-foreground: var(--ink);
  --primary: var(--accent);
  --primary-foreground: var(--accent-ink);
  --primary-hover: var(--accent-strong);
  --secondary: var(--surface-2);
  --secondary-foreground: var(--ink);
  --secondary-hover: var(--surface-3);
  --muted-foreground: var(--muted);
  --destructive: var(--bad);
  --destructive-foreground: #ffffff;
  --input: var(--border);
  /* NOTE: --ring is reserved in this project for a box-shadow glow expression
     (see :root[data-theme=...] overrides below). Use --accent for shadcn ring color. */
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", "Cascadia Code", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Iowan Old Style", "Charter", Georgia, "Times New Roman", serif;
  color-scheme: dark;
}

:root[data-theme="purple"] {
  --bg: #0c0916;
  --surface: #161023;
  --surface-2: #1f1730;
  --surface-3: #2a1f40;
  --border: #322342;
  --border-soft: #221733;
  --ink: #f1eff7;
  --ink-soft: #cbc4dd;
  --muted: #9088a3;
  --syntax: #5a5070;
  --accent: #b58cff;
  --accent-strong: #d6b9ff;
  --accent-hover: #d6b9ff;
  --accent-bg: rgba(181, 140, 255, 0.16);
  --accent-ink: #14072a;
  --link: #c8a6ff;
  --good: #84e7b1;
  --warn: #f5c46e;
  --bad: #ff8b8b;
  --danger: #f47272;
  --info: #87b9ff;
  color-scheme: dark;
}

:root[data-theme="blue"] {
  --bg: #08101e;
  --surface: #0f1a2e;
  --surface-2: #15233c;
  --surface-3: #1e2f4d;
  --border: #2a3f5f;
  --border-soft: #1a2840;
  --ink: #ecf0f8;
  --ink-soft: #bfcadb;
  --muted: #7d89a4;
  --syntax: #495673;
  --accent: #5fa0ff;
  --accent-strong: #8cbdff;
  --accent-hover: #8cbdff;
  --accent-bg: rgba(95, 160, 255, 0.16);
  --accent-ink: #04132c;
  --link: #8cbdff;
  --good: #6ee7a3;
  --warn: #f5c46e;
  --bad: #ff8585;
  --danger: #ee6464;
  --info: #9ec8ff;
  color-scheme: dark;
}

:root[data-theme="forest"] {
  --bg: #07120c;
  --surface: #0f1c14;
  --surface-2: #15281c;
  --surface-3: #1d3527;
  --border: #284939;
  --border-soft: #16291e;
  --ink: #ecf0eb;
  --ink-soft: #bccdbc;
  --muted: #7e8b80;
  --syntax: #4b5b51;
  --accent: #5cca8b;
  --accent-strong: #8ee4b1;
  --accent-hover: #8ee4b1;
  --accent-bg: rgba(92, 202, 139, 0.16);
  --accent-ink: #042214;
  --link: #8ee4b1;
  --good: #8ee4b1;
  --warn: #f5c46e;
  --bad: #ff8585;
  --danger: #ee6464;
  --info: #7fb6e0;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

html {
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* iOS: stop Safari from auto-bumping font-size when the device rotates
     to landscape. Desktop is unaffected (vendor-prefixed property). */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* In-page anchor jumps glide instead of cutting. Reduced-motion guard
     below resets to instant for users who opted out. */
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  /* iOS: kill the default grey rectangle Safari draws on every tap.
     Desktop browsers ignore the prefix so this is a no-op there. */
  -webkit-tap-highlight-color: transparent;
}

/* Interactive surfaces never need iOS' 350ms double-tap-to-zoom delay,
   and a long-press shouldn't surface the OS callout/share sheet for
   plain UI chrome. We keep the callout enabled on text content so users
   can still copy quotes, frontmatter values, and markdown. */
button,
a,
[role="button"],
[role="menuitem"],
[role="tab"],
.btn,
.btn-primary,
.btn-quiet,
.btn-outline,
.btn-icon,
.btn-danger,
.btn-vote,
.btn-save,
.mod-kebab,
.kebab-btn,
.card,
.bookmarks-item-link {
  touch-action: manipulation;
  -webkit-touch-callout: none;
}

::selection {
  background: var(--accent-bg);
  color: var(--accent-strong);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}

a:hover {
  border-bottom-color: var(--link);
}

a:visited {
  color: color-mix(in srgb, var(--link) 70%, var(--muted));
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ===== App layout ===== */
#app {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

/* Skip-link, hidden until focused. */
.skip-link {
  position: absolute;
  left: -1000px;
  top: -1000px;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 8px 14px;
  border-radius: 6px;
  z-index: 1000;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}

main:focus {
  outline: none;
}
/* @critical-end */

/* Footer baseline. */
.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 48px;
  padding: 24px 28px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.86rem;
}
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.footer-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); }
.footer-links { display: flex; flex-wrap: wrap; gap: 14px; }
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--ink); }

@media (max-width: 640px) {
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* ===== Top app bar ===== */
.appbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px clamp(16px, 4vw, 36px);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.04rem;
  border-bottom: 0;
}

.brand:hover {
  border-bottom: 0;
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--mono);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: -0.02em;
}

img.brand-mark {
  background: transparent;
  border-radius: 0;
  object-fit: contain;
  width: 40px;
  height: 40px;
  margin-right: -2px;
}

.footer-brand img.brand-mark.footer-brand-mark {
  width: 32px;
  height: 32px;
  margin-right: 0;
}

.appbar-spacer {
  flex: 1;
}

.appbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ===== Document area ===== */
.document {
  padding: 24px clamp(16px, 4vw, 36px) 96px;
}

.page {
  max-width: 1100px;
  margin: 0 auto;
}

.reading {
  max-width: 820px;
  margin: 0 auto;
}

/* ===== Filename pill (subtle MD callback) ===== */
.filename {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0;
  margin-bottom: 18px;
}

.filename .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}

.filename a {
  color: var(--ink-soft);
  border-bottom: 0;
}

.filename a:hover {
  color: var(--ink);
}

.filename .sep {
  color: var(--syntax);
}

.filename .file {
  color: var(--ink);
}

/* ===== Typography ===== */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--sans);
  color: var(--ink);
  letter-spacing: -0.018em;
  line-height: 1.18;
  margin: 0 0 0.4em;
  font-weight: 700;
}

h1 {
  font-size: clamp(2rem, 4.5vw, 2.85rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 0.3em;
}

h2 {
  font-size: 1.55rem;
  margin-top: 2.2rem;
}

h3 {
  font-size: 1.18rem;
  margin-top: 1.6rem;
}

h4 {
  font-size: 1rem;
  color: var(--ink-soft);
  margin-top: 1.4rem;
  text-transform: none;
  letter-spacing: 0;
}

p {
  margin: 0 0 1em;
  color: var(--ink);
}

.lead {
  font-size: 1.18rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-bottom: 1.5em;
  max-width: 680px;
}

ul,
ol {
  margin: 0 0 1em;
  padding-left: 1.4em;
}

li {
  margin: 0.2em 0;
}

li::marker {
  color: var(--muted);
}

blockquote {
  margin: 0 0 1.2em;
  padding: 8px 16px;
  border-left: 3px solid var(--accent);
  background: var(--accent-bg);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--ink);
}

blockquote p {
  margin: 0;
}

hr {
  border: 0;
  height: 1px;
  background: var(--border-soft);
  margin: 2.4em 0;
}

code {
  padding: 2px 7px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 0.86em;
  color: var(--accent-strong);
}

pre {
  margin: 0 0 1.2em;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink);
}

pre code {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

pre.fenced {
  position: relative;
  padding-top: 32px;
}

pre.fenced .fence-label {
  position: absolute;
  top: 8px;
  left: 16px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.2em;
  font-size: 0.94rem;
}

th,
td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
}

th {
  background: var(--surface-2);
  font-weight: 700;
}

img {
  max-width: 100%;
  border-radius: var(--radius-sm);
}

/* ===== Buttons (shadcn-aligned variants) =====
   Default: secondary-style outline (border + surface bg, hover -> surface-2)
   Primary: brand fill (accent bg + accent-ink fg, hover -> accent-strong)
   Quiet:   ghost (no border/bg, hover -> surface-2)
   Outline: bordered, transparent bg (alias for default)
   Danger:  destructive (border, red text/border on hover)
   Icon:    square 40x40, --radius
*/
.btn,
.btn-primary,
.btn-quiet,
.btn-outline,
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}

.btn:hover,
.btn-primary:hover,
.btn-quiet:hover,
.btn-outline:hover {
  border-color: var(--accent);
  background: var(--surface-2);
  border-bottom-color: var(--accent);
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

.btn-primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.btn-quiet {
  border-color: transparent;
  background: transparent;
  color: var(--ink-soft);
  box-shadow: none;
}

.btn-quiet:hover {
  background: var(--surface-2);
  color: var(--ink);
  border-color: transparent;
}

.btn-outline {
  background: transparent;
}

.btn-danger {
  color: var(--bad);
  border-color: var(--border);
}

.btn-danger:hover {
  border-color: var(--bad);
  color: var(--destructive-foreground);
  background: var(--bad);
}

.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius);
}

/* shadcn small-size button (h-9, text-xs). */
.btn-sm {
  height: 36px;
  padding: 0 12px;
  font-size: 0.8125rem;
  border-radius: var(--radius-md);
}

/* shadcn large-size button (h-11, px-8). */
.btn-lg {
  height: 44px;
  padding: 0 32px;
  font-size: 0.9375rem;
}

a.btn,
a.btn-primary,
a.btn-quiet,
a.btn-outline,
a.btn-icon {
  border-bottom: 1px solid var(--border);
}

/* Buttons rendered as <a> were inheriting the muted color from the global
   a:visited rule once their href had been clicked, which made the text
   blend into the button background (especially noticeable on the lavender
   "Publish an MD" CTA in the purple theme). Restore the unvisited foreground
   per button class so visited state is visually identical to fresh state. */
a.btn:visited,
a.btn:visited:hover { color: var(--ink); }
a.btn-primary:visited,
a.btn-primary:visited:hover { color: var(--accent-ink); }
a.btn-quiet:visited,
a.btn-quiet:visited:hover { color: var(--ink-soft); }
a.btn-outline:visited,
a.btn-outline:visited:hover { color: var(--ink); }
a.btn-icon:visited,
a.btn-icon:visited:hover { color: var(--ink); }
a.btn-danger:visited,
a.btn-danger:visited:hover { color: var(--bad); }

a.btn:hover,
a.btn-quiet:hover,
a.btn-outline:hover,
a.btn-icon:hover {
  border-bottom-color: var(--accent);
}

a.btn-primary {
  border-bottom-color: var(--accent);
}

a.btn-primary:hover {
  border-bottom-color: var(--accent-strong);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 14px 0 0;
}

.btn-row.spread {
  justify-content: space-between;
}

/* ===== Theme picker ===== */
.theme-picker {
  position: relative;
}

.theme-picker > .picker-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 0.86rem;
  cursor: pointer;
}

.theme-picker > .picker-trigger:hover {
  border-color: var(--accent);
  color: var(--ink);
}

.theme-swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  flex-shrink: 0;
}

.theme-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: none;
  z-index: 30;
}

.theme-picker.open .theme-popover {
  display: block;
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  color: var(--ink);
  border-radius: var(--radius-sm);
  text-align: left;
  font-size: 0.92rem;
}

.theme-option:hover,
.theme-option.active {
  background: var(--surface-2);
}

.theme-option.active::after {
  content: "✓";
  margin-left: auto;
  color: var(--accent);
  font-weight: 700;
}

/* Theme swatch fills (preview circles) */
.swatch-midnight { background: linear-gradient(135deg, #0a0b0e 50%, #67d4ff 50%); }
.swatch-purple { background: linear-gradient(135deg, #0c0916 50%, #b58cff 50%); }
.swatch-blue { background: linear-gradient(135deg, #08101e 50%, #5fa0ff 50%); }
.swatch-forest { background: linear-gradient(135deg, #07120c 50%, #5cca8b 50%); }
/* Custom swatch reads its two colors from inline CSS variables on the
   element so it reflects whichever colors the user picked, with sane
   fallbacks for first paint before app.js writes them. */
.swatch-custom {
  background: linear-gradient(135deg,
    var(--swatch-bg-color, var(--bg)) 50%,
    var(--swatch-accent-color, var(--accent)) 50%);
}

/* Custom theme inline panel inside the popover. */
.theme-custom-panel {
  margin-top: 6px;
  padding: 10px 10px 6px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.theme-custom-hint {
  margin: 0 0 2px;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
}

.theme-custom-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
}

.theme-custom-label {
  flex: 1;
  font-size: 0.86rem;
  color: var(--ink-soft);
}

.theme-custom-input {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.theme-custom-input::-webkit-color-swatch-wrapper { padding: 0; }
.theme-custom-input::-webkit-color-swatch { border: none; border-radius: 50%; }
.theme-custom-input::-moz-color-swatch { border: none; border-radius: 50%; }

.theme-custom-hex {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--muted);
  text-transform: uppercase;
  min-width: 60px;
  text-align: right;
}

/* ===== Notifications bell ===== */
.notif-bell {
  position: relative;
}

.notif-bell > .notif-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 1rem;
  cursor: pointer;
  position: relative;
}

.notif-bell > .notif-trigger:hover,
.notif-bell.open > .notif-trigger {
  border-color: var(--accent);
  color: var(--ink);
}

.notif-bell .notif-icon {
  font-size: 1rem;
  line-height: 1;
}

.notif-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--bad, #ef5b5b);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border: 1px solid var(--surface);
}

.notif-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  max-width: calc(100vw - 24px);
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 30;
  max-height: 70vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.notif-list {
  overflow-y: auto;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.notif-empty {
  padding: 16px 12px;
  color: var(--ink-soft);
  font-size: 0.9rem;
  text-align: center;
}

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 0;
  color: var(--ink);
  border-radius: var(--radius-sm);
  text-align: left;
  font: inherit;
  cursor: pointer;
  position: relative;
}

.notif-item:hover,
.notif-item:focus-visible {
  background: var(--surface-2);
  outline: none;
}

.notif-item:focus-visible {
  box-shadow: 0 0 0 2px var(--accent);
}

.notif-item.unread {
  background: var(--surface-2);
}

.notif-item-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--accent);
}

.notif-item-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.notif-item-text {
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--ink);
  word-break: break-word;
}

.notif-item-meta {
  font-size: 0.75rem;
  color: var(--ink-soft);
}

.notif-item-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.notif-footer {
  border-top: 1px solid var(--border);
  padding: 6px;
  display: flex;
  justify-content: flex-end;
}

.notif-mark-all {
  font-size: 0.82rem;
}

/* ===== Account pill ===== */
.account-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px 0 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.88rem;
  border-bottom: 1px solid var(--border);
}

.account-pill:hover {
  border-color: var(--accent);
  border-bottom-color: var(--accent);
}

.account-pill img,
.account-pill .avatar-fallback {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.74rem;
}

.account-pill .handle {
  font-family: var(--mono);
  font-size: 0.84rem;
  color: var(--ink-soft);
}

/* Boot-time skeleton — keeps appbar layout stable while
   ensureOwnProfileLoaded resolves so we don't flash a stale handle or
   the missing-admin-badge state pulled from the cached JWT. */
.account-pill-loading {
  cursor: default;
  opacity: 0.6;
}
.account-pill-loading:hover {
  border-color: var(--border);
  border-bottom-color: var(--border);
}

/* ===== Search bar (in app bar) — shadcn input aesthetic ===== */
.search-input {
  flex: 1;
  max-width: 480px;
  height: 40px;
  padding: 0 16px 0 38px;
  border-radius: var(--radius);
  border: 1px solid var(--input);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.875rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237d808a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  background-repeat: no-repeat;
  background-position: 14px center;
}

.search-input::placeholder {
  color: var(--muted);
}

.search-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}

/* ===== Generic shadcn-style input/select/textarea =====
   Use this class on any new <input>/<select>/<textarea> to get the
   canonical shadcn surface. Existing class-based inputs keep their
   bespoke layout (search-input, handle-input-row, newsletter-form). */
.input,
.textarea,
.select {
  display: flex;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--input);
  background: var(--background);
  color: var(--foreground);
  font-family: var(--sans);
  font-size: 0.875rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.textarea {
  height: auto;
  min-height: 96px;
  padding: 10px 12px;
  resize: vertical;
  line-height: 1.5;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--muted);
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}

.input:disabled,
.textarea:disabled,
.select:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ===== Frontmatter card (subtle MD callback) ===== */
.frontmatter {
  margin: 0 0 24px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 0.86rem;
  color: var(--ink-soft);
  display: grid;
  gap: 6px;
  position: relative;
}

.frontmatter::before,
.frontmatter::after {
  content: "---";
  display: block;
  color: var(--muted);
  font-family: var(--mono);
  letter-spacing: 0.04em;
  font-size: 0.78rem;
}

.frontmatter .row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
}

.frontmatter .key {
  color: var(--accent);
  font-weight: 600;
}

.frontmatter .key::after {
  content: ":";
  color: var(--syntax);
}

.frontmatter .value {
  color: var(--ink);
  word-break: break-word;
}

.frontmatter .value a {
  color: var(--link);
  border-bottom: 1px solid transparent;
}

.frontmatter .value a:hover {
  border-bottom-color: var(--link);
}

.frontmatter .value .tag {
  display: inline-block;
  margin: 0 4px 2px 0;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--accent-bg);
  color: var(--accent-strong);
  font-size: 0.78rem;
}

/* ===== Filter chips ===== */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 24px;
  align-items: center;
}

.chip-row .label {
  color: var(--muted);
  font-size: 0.82rem;
  margin-right: 4px;
}

.chip {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  font-family: var(--sans);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.chip:hover {
  border-color: var(--accent);
  color: var(--ink);
  background: var(--surface-2);
}

.chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

/* shadcn-style badge — flat label with no border, more compact than .chip. */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--secondary);
  color: var(--secondary-foreground);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  font-family: var(--sans);
}

.badge-outline {
  background: transparent;
  border-color: var(--border);
  color: var(--ink-soft);
}

.badge-primary {
  background: var(--accent-bg);
  color: var(--accent-strong);
  border-color: transparent;
}

.badge-destructive {
  background: color-mix(in srgb, var(--bad) 14%, transparent);
  color: var(--bad);
  border-color: transparent;
}

/* ===== Cards ===== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  margin: 0 0 32px;
}

/* Boot-time skeleton — same grid + card frame as the real listing so the
   grid doesn't reflow when results land, and a soft shimmer so the user
   reads it as loading rather than a stuck empty state. */
.skeleton-card {
  pointer-events: none;
  cursor: default;
}
.skeleton-card:hover {
  transform: none;
  border-color: var(--border);
  border-bottom-color: var(--border);
  box-shadow: none;
}
.skeleton-line {
  height: 1rem;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    var(--surface-2) 0%,
    var(--border) 50%,
    var(--surface-2) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.skeleton-title {
  height: 1.4rem;
  width: 78%;
}
.skeleton-meta {
  height: 0.85rem;
  width: 56%;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-line { animation: none; }
  .skeleton-avatar { animation: none; }
}

/* Profile-page skeleton — same banner + stats + grid as renderProfilePage so
   the page does not reflow when the real profile lands. */
.skeleton-avatar {
  background: linear-gradient(
    90deg,
    var(--surface-2) 0%,
    var(--border) 50%,
    var(--surface-2) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border: 1px solid var(--border);
}
.profile-banner-text {
  display: grid;
  gap: 10px;
  align-content: center;
  min-width: 0;
}
.skeleton-name { height: 1.9rem; width: 38%; }
.skeleton-handle { height: 0.9rem; width: 18%; }
.skeleton-bio { height: 0.92rem; width: 72%; }
.skeleton-bio-short { height: 0.92rem; width: 48%; }
.skeleton-stat .key {
  visibility: hidden;
}
.skeleton-stat-value {
  height: 1.5rem;
  width: 60%;
  margin-top: 4px;
}

/* Listing-detail skeleton — mirrors the renderListing split layout so the
   page does not reflow when the real listing lands during the boot fetch. */
.listing-skeleton .frontmatter,
.new-swap-skeleton .form {
  margin-top: 12px;
}
.skeleton-heading { height: 2.2rem; width: 64%; margin: 14px 0 12px; }
.skeleton-lead { height: 1rem; width: 80%; margin-bottom: 18px; }
.skeleton-frontmatter-row .skeleton-frontmatter-value {
  display: inline-block;
  height: 0.9rem;
  width: 70%;
  vertical-align: middle;
}
.skeleton-frontmatter-row .key {
  visibility: hidden;
}
.skeleton-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 18px;
}
.skeleton-action {
  display: inline-block;
  height: 2.2rem;
  width: 8rem;
  border-radius: 999px;
}
.skeleton-markdown {
  display: grid;
  gap: 10px;
}
.skeleton-paragraph { height: 0.95rem; width: 96%; }
.skeleton-paragraph-short { width: 62%; }
.skeleton-side-heading { height: 1.1rem; width: 40%; margin-bottom: 10px; }

/* New-MD skeleton — shown when /new?branch=<slug> is opened before the source
   listing has hydrated, so the form does not flash with stale defaults. */
.skeleton-field {
  display: grid;
  gap: 8px;
}
.skeleton-field-label { height: 0.9rem; width: 24%; }
.skeleton-field-input { height: 2.4rem; width: 100%; }
.skeleton-field-textarea { height: 14rem; width: 100%; }

/* Daily-archive skeleton — mirrors the .daily-archive grid (date | title | meta)
   so /daily and /daily/<date> don't reflow when the real list lands. */
.daily-archive-skeleton li {
  list-style: none;
}
.daily-archive-skeleton .archive-row-skeleton {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  align-items: center;
}
.skeleton-archive-date { height: 0.95rem; width: 80px; }
.skeleton-archive-title { height: 1rem; width: 70%; }
.skeleton-archive-meta { height: 0.85rem; width: 90px; }

/* Daily-pick detail skeleton — mirrors .daily-hero (eyebrow + title + lead
   + meta + CTA row) so /daily/<date> doesn't reflow when the pick lands. */
.daily-hero-skeleton .skeleton-daily-title {
  height: 1.8rem;
  width: 70%;
  margin: 0 0 10px;
}
.daily-hero-skeleton .skeleton-daily-lead {
  height: 1.05rem;
  width: 85%;
  margin: 0 0 12px;
}
.daily-hero-skeleton .skeleton-daily-meta {
  height: 0.86rem;
  width: 40%;
  margin: 0 0 14px;
}
.daily-hero-skeleton .skeleton-daily-btn {
  height: 2.4rem;
  width: 120px;
  border-radius: var(--radius, 8px);
}

.card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 22px;
  min-height: 180px;
  height: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  color: var(--card-foreground);
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  border-bottom-color: var(--accent);
  box-shadow: var(--shadow-md);
}

.card-meta-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--muted);
}

.card-type {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--accent-bg);
  color: var(--accent-strong);
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.card-title {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--ink);
  font-weight: 700;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-tagline {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.5;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 4px 0 0;
}

.card-tag {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted);
}

.card-tag::before {
  content: "#";
  color: var(--syntax);
  margin-right: 1px;
}

.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
  font-size: 0.78rem;
  color: var(--muted);
}

.card-foot a {
  color: var(--ink-soft);
}

.card-foot a:hover {
  color: var(--accent);
}

/* Reddit-style: title pops, everything else collapses to a single muted line. */
.card-reddit {
  gap: 8px;
}
.card-reddit .card-title {
  -webkit-line-clamp: 2;
  font-size: 1.25rem;
  line-height: 1.3;
  /* Reserve 2 lines so single-line titles still anchor the meta below at the
     same y-offset as 2-line titles. Keeps the grid uniform regardless of how
     long the publisher's title is. */
  min-height: calc(2 * 1.3 * 1.25rem);
}
/* Fixed-slot meta grid: every card emits the same 4 rows so each field
   (type, AI flag, author, votes, downloads, license, age, tags) lives in
   the same coordinate regardless of which optional values are populated.
   Empty slots reserve their space via min-height on the row. */
.card-meta-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.4;
}
.card-meta-grid .meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 1.4em;
}
.card-meta-grid .meta-row > span {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.card-meta-grid .meta-row-tags {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0 10px;
  min-height: 1.2em;
  overflow: hidden;
  max-height: 1.4em;
}
.card-meta-grid .meta-engagement {
  gap: 10px;
  flex-shrink: 0;
}
.card-meta-grid .meta-type {
  color: var(--accent-strong);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}
.card-meta-grid .meta-author { color: var(--ink-soft); }
.card-meta-grid .meta-votes { color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.card-meta-grid .meta-votes.positive { color: var(--good); }
.card-meta-grid .meta-votes.negative { color: var(--bad); }
.card-meta-grid .meta-saves { color: var(--ink-soft); font-weight: 600; }
.card-meta-grid .meta-license { color: var(--muted); font-family: var(--mono); font-size: 0.875rem; }
.card-meta-grid .meta-age { color: var(--muted); }
.card-meta-grid .meta-tag { color: var(--muted); font-family: var(--mono); }
.card-meta-grid .meta-tag::before { content: "#"; color: var(--syntax); margin-right: 1px; }

.ai-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.listing-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}
.field-checkbox .checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  cursor: pointer;
}
.field-checkbox .checkbox-label input { margin: 0; }

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 8px 0 32px;
  font-size: 0.95rem;
  color: var(--muted);
}
.pager-arrow {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.pager-arrow:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.pager-arrow:active:not(:disabled) { transform: translateY(1px); }
.pager-arrow:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pager-status { font-variant-numeric: tabular-nums; }

.card-insights {
  display: flex;
  align-items: center;
  gap: 8px;
  /* margin-top: auto pushes the sparkline footer to the bottom of the card,
     keeping the meta-flat row visually aligned across cards with and without
     insights. */
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px dashed var(--border-soft);
  font-size: 0.78rem;
  color: var(--muted);
}

.card-insights-label {
  font-weight: 600;
  color: var(--ink);
}

.sparkline {
  display: inline-block;
  vertical-align: middle;
  color: var(--accent);
  flex-shrink: 0;
}

.sparkline rect {
  fill: currentColor;
}

.author-insights-sparkline {
  margin: 4px 0 8px;
  color: var(--accent);
}

/* ===== Hero (home page) ===== */
.hero {
  padding: 36px 0 12px;
}

.hero h1 {
  margin: 0 0 14px;
  font-size: clamp(2rem, 4.5vw, 3rem);
  letter-spacing: -0.03em;
  font-weight: 800;
  line-height: 1.05;
  text-wrap: balance;
}

.hero .lead {
  font-size: 1.22rem;
  margin-bottom: 24px;
}

.hero-eyebrow {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}

.daily-hero {
  margin: 0;
  padding: 24px 28px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent 70%);
}

.daily-hero h2,
.daily-hero h1 {
  margin: 0 0 8px;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
}

.daily-hero h2 a {
  color: inherit;
  text-decoration: none;
}

.daily-hero h2 a:hover {
  color: var(--accent);
}

.daily-hero-eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.daily-hero-lead {
  font-size: 1.05rem;
  color: var(--ink-soft);
  margin: 0 0 12px;
}

.daily-hero-meta {
  font-size: 0.86rem;
  color: var(--muted);
  margin: 0 0 14px;
}

.daily-hero-body {
  margin: 8px 0 14px;
  font-size: 0.96rem;
}

.daily-archive {
  list-style: none;
  padding: 0;
  margin: 24px 0;
  display: grid;
  gap: 8px;
}

.daily-archive li > a {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  align-items: center;
}

.daily-archive li > a:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin: 16px 0 28px;
}

.metric-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--surface);
}

.metric-label {
  font-size: 0.78rem;
  color: var(--muted);
}

.metric-value {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink);
}

.admin-top {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 24px;
  font-size: 0.86rem;
}

.admin-top th,
.admin-top td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-soft);
}

.admin-top th {
  color: var(--muted);
  font-weight: 600;
  border-bottom-color: var(--border);
}

.admin-widget {
  margin: 24px 0;
  padding: 16px 18px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
}

.admin-widget h3 {
  margin: 8px 0 4px;
  font-size: 0.96rem;
  font-weight: 700;
}

/* ===== Admin nav (was inline style) ===== */
.admin-nav {
  display: flex;
  gap: 8px;
  margin: 12px 0 24px;
  flex-wrap: wrap;
}

/* ===== Admin queue table (was inline styles) ===== */
.admin-queue {
  width: 100%;
  border-collapse: collapse;
}

.admin-queue th,
.admin-queue td {
  text-align: left;
  padding: 8px 6px;
  border-bottom: 1px solid var(--border-soft);
}

.admin-queue th {
  border-bottom-color: var(--border);
}

.admin-queue td.created,
.admin-queue td.note {
  font-size: 0.86rem;
}

.admin-queue td.note {
  max-width: 24em;
}

.admin-queue td.actions {
  white-space: nowrap;
}

.admin-queue .select-cell {
  width: 28px;
  text-align: center;
  padding-left: 0;
  padding-right: 0;
}

.admin-queue tr.row-selected td {
  background: var(--surface-soft, rgba(103, 212, 255, 0.08));
}

.bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft, rgba(103, 212, 255, 0.06));
}

.bulk-bar-count {
  font-size: 0.92rem;
}

.bulk-bar-reason {
  flex: 1 1 240px;
  min-width: 200px;
}

.bulk-bar-reason .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.bulk-bar-reason input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  background: var(--bg);
  color: var(--ink);
}

.bulk-bar-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.bulk-bar-result {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.92rem;
}

.bulk-bar-result-warn {
  border-color: var(--warn, #c79b00);
  background: rgba(199, 155, 0, 0.08);
}

.bulk-bar-result-ok {
  border-color: var(--good, #2c8f55);
  background: rgba(44, 143, 85, 0.08);
}

.bulk-bar-failed {
  margin: 6px 0 0;
  padding-left: 16px;
  font-size: 0.86rem;
}

.bulk-confirm-reason {
  word-break: break-word;
}

.admin-users-search {
  margin-bottom: 16px;
}

.admin-users-table .user-handle {
  font-family: var(--mono);
  font-weight: 500;
}

.admin-users-table .user-email {
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.admin-users-all-table .signup-time {
  white-space: nowrap;
}

.admin-users-table td.actions button {
  margin-right: 4px;
}

.admin-users-all-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.admin-users-all-pagination .btn-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.admin-users-all-pagination [aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.user-flag {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  margin-right: 4px;
  white-space: nowrap;
}

.user-flag-active { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, var(--border)); }
.user-flag-admin { color: var(--accent-strong); border-color: color-mix(in srgb, var(--accent-strong) 40%, var(--border)); }
.user-flag-shadow { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); }
.user-flag-suspended { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--border)); }

.admin-reserved-form {
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: 2fr 1fr 2fr auto;
  gap: 12px;
  align-items: end;
}
@media (max-width: 720px) {
  .admin-reserved-form { grid-template-columns: 1fr; }
}

.admin-reserved-table code {
  font-family: var(--mono);
  font-weight: 500;
}

.reserved-kind {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}
.reserved-kind-swap { color: var(--accent-strong); border-color: color-mix(in srgb, var(--accent-strong) 40%, var(--border)); }
.reserved-kind-handle { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, var(--border)); }

/* ===== Audit log (was inline styles) ===== */
.audit-log {
  list-style: none;
  padding: 0;
  margin: 0;
}

.audit-log li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.86rem;
}

/* ===== Validation feedback (was inline styles in publish form) ===== */
.validation-list {
  padding-left: 18px;
  margin: 0;
}

.validation-list li {
  color: var(--bad);
}

.validation-success {
  color: var(--good);
  margin: 0;
}

/* ===== Profile banner socials line (was inline style) ===== */
.profile-banner-links {
  margin-top: 8px;
  font-size: 0.86rem;
}

/* ===== Message thread status (was inline style) ===== */
.message-status-bar {
  padding: 0 14px 8px;
}

/* ===== Publish form bot-check note (was inline style) ===== */
.bot-check-note {
  font-size: 0.86rem;
}

/* ===== Newsletter form (transparency.html, community/conduct.html) ===== */
.newsletter-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin: 8px 0 16px;
}

.newsletter-form label {
  font-size: 0.86rem;
}

.newsletter-form input[type="email"] {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  min-width: 240px;
}

.newsletter-disclaimer {
  font-size: 0.86rem;
}

/* ===== Account deletion-cancelled page (api/account.js) ===== */
.delete-page-body {
  font-family: system-ui, -apple-system, sans-serif;
  margin: 2em;
  max-width: 48em;
}

/* ===== Embed iframe (api/embed.js) ===== */
.embed-body {
  margin: 0;
  background: #0a0b0e;
  color: #ecedef;
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
}

.embed-card {
  padding: 14px 16px;
  border: 1px solid #2c2f38;
  border-radius: 10px;
  max-width: 640px;
  margin: 8px auto;
}

.embed-eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a8d96;
}

.embed-card h1 {
  font-size: 1.0625rem;
  line-height: 1.3;
  margin: 0.4em 0;
}

.embed-card p.lead {
  font-size: 0.9rem;
  color: #b9bbc1;
  margin: 0 0 8px;
}

.embed-card pre {
  background: #14161c;
  border: 1px solid #2c2f38;
  border-radius: 8px;
  padding: 10px;
  overflow: auto;
  font-size: 0.86rem;
  line-height: 1.55;
  max-height: 240px;
}

.embed-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.embed-btn {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border: 1px solid #2c2f38;
  border-radius: 8px;
  color: #ecedef;
  background: transparent;
  text-decoration: none;
  font-size: 0.86rem;
}

.embed-btn-primary {
  background: #67d4ff;
  color: #0a0b0e;
  border-color: #67d4ff;
}

.embed-source {
  font-size: 0.78rem;
  color: #8a8d96;
  margin-top: 6px;
}

.embed-source a {
  color: #94e3ff;
}

.embed-not-found {
  margin: 1.2em;
  font-family: system-ui, -apple-system, sans-serif;
}

/* ===== Sections ===== */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 36px 0 16px;
}

.section-head h2 {
  margin: 0;
}

.section-head .meta {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--muted);
}

/* ===== Layouts ===== */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 36px;
  align-items: start;
}

.split > .split-side {
  display: grid;
  gap: 14px;
  position: sticky;
  top: 84px;
}

.side-block {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.side-block h3 {
  margin: 0 0 10px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.side-block p {
  margin: 0 0 8px;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.side-block .meta-list {
  display: grid;
  gap: 6px;
}

.side-block .meta-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.86rem;
  color: var(--muted);
}

.side-block .meta-row strong {
  color: var(--ink);
  font-weight: 600;
}

.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.toc-list li {
  margin: 0;
}

.toc-list li::marker {
  display: none;
}

.toc-list a {
  display: block;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  border-bottom: 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.3;
}

.toc-list a:hover {
  background: var(--surface-2);
  color: var(--ink);
  border-bottom: 0;
}

.toc-list a.active {
  background: var(--accent-bg);
  color: var(--accent-strong);
  font-weight: 600;
}

.kbd-inline {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.2;
}

.shortcuts-grid {
  display: grid;
  gap: 8px;
  margin: 8px 0 16px;
}

.shortcuts-grid .row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  align-items: center;
  font-size: 0.92rem;
}

.shortcuts-grid .row .keys {
  display: inline-flex;
  gap: 4px;
}

.shortcuts-grid .row .desc {
  color: var(--ink-soft);
}

/* ===== Listing actions ===== */
.listing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 28px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  align-items: center;
}

/* ===== Vote cluster (▲ green button — net score — ▼ red button) ===== */
.vote-cluster {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  border-radius: 999px;
  overflow: hidden;
  border: 1.5px solid var(--border);
  background: var(--bg);
}
.btn-vote {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: transparent;
  border: 0;
  color: var(--ink-soft);
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.btn-vote .vote-glyph {
  font-size: 1.05rem;
  line-height: 1;
}
.vote-cluster .vote-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  padding: 0 12px;
  border-left: 1.5px solid var(--border);
  border-right: 1.5px solid var(--border);
  font-weight: 700;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  background: var(--surface-2, var(--bg));
}
.vote-score.positive { color: var(--good); }
.vote-score.negative { color: var(--bad); }
.vote-score.neutral { color: var(--muted); }
.btn-vote.up:hover { color: var(--good); background: rgba(110, 231, 163, 0.12); }
.btn-vote.down:hover { color: var(--bad); background: rgba(255, 125, 125, 0.12); }
.btn-vote.up:focus-visible { outline: 2px solid var(--good); outline-offset: 2px; }
.btn-vote.down:focus-visible { outline: 2px solid var(--bad); outline-offset: 2px; }
.btn-vote.up.active {
  background: var(--good);
  color: #052b16;
}
.btn-vote.down.active {
  background: var(--bad);
  color: #2c0a0a;
}
.btn-vote.up.active:hover { background: var(--good); }
.btn-vote.down.active:hover { background: var(--bad); }
.btn-vote:disabled { opacity: 0.5; cursor: not-allowed; }

.listing-actions .secondary-actions {
  display: inline-flex;
  gap: 6px;
  margin-left: auto;
}

.listing-more {
  position: relative;
  margin-left: auto;
}

.listing-more-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 30;
  display: grid;
}

.listing-more-popover button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  color: var(--ink);
  border-radius: var(--radius-sm);
  text-align: left;
  font-size: 0.92rem;
  cursor: pointer;
}

.listing-more-popover button:hover {
  background: var(--surface-2);
}

.listing-more-popover button.danger {
  color: var(--bad);
}

.listing-more-popover button.danger:hover {
  color: var(--danger);
}

/* ===== Markdown body (rendered preview) ===== */
.markdown {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
}

.markdown h1 {
  font-size: 1.85rem;
  margin-top: 0;
}

.markdown h2 {
  font-size: 1.45rem;
  margin-top: 1.8rem;
}

.markdown h3 {
  font-size: 1.16rem;
}

.markdown > * + * {
  margin-top: 0.9rem;
}

.markdown ul,
.markdown ol {
  padding-left: 1.5em;
}

.markdown blockquote {
  font-size: 1rem;
}

.markdown a {
  border-bottom: 1px solid var(--accent-bg);
  color: var(--link);
}

.markdown a:hover {
  border-bottom-color: var(--link);
}

.markdown details {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  background: var(--surface);
}

.markdown summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.86rem;
  color: var(--muted);
}

/* ===== Forms ===== */
.form {
  display: grid;
  gap: 16px;
}

.form .field {
  display: grid;
  gap: 6px;
}

.form .field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

.form label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
  font-family: var(--mono);
  letter-spacing: 0.02em;
}

.form input,
.form select,
.form textarea {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.96rem;
  transition: border-color 0.12s ease;
}

.form textarea {
  height: auto;
  min-height: 120px;
  padding: 12px 14px;
  resize: vertical;
  line-height: 1.55;
  font-family: var(--mono);
  font-size: 0.92rem;
}

.form textarea.tall {
  min-height: 320px;
}

.form input:focus,
.form select:focus,
.form textarea:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent-bg);
  outline-offset: 0;
}

.form input:disabled,
.form input[readonly] {
  color: var(--muted);
  background: var(--surface-2);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.field-help {
  font-size: 0.82rem;
  color: var(--muted);
}

.status-line {
  font-size: 0.86rem;
  color: var(--muted);
  min-height: 18px;
}

.status-line.error { color: var(--bad); }
.status-line.success { color: var(--good); }
.status-line.pending { color: var(--ink-soft); }

/* ===== System notice ===== */
.system-notice {
  margin: 0 0 18px;
  padding: 10px 14px;
  border: 1px solid var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 0.9rem;
}

.system-notice::before {
  content: "⚠ ";
  color: var(--warn);
  font-weight: 700;
}

.empty {
  padding: 28px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  background: var(--surface);
}

.empty-state {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 36px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}

.empty-state svg {
  width: 48px;
  height: 48px;
  color: var(--muted);
}

.empty-state h2 {
  margin: 4px 0 0;
  font-size: 1.1rem;
  color: var(--ink);
}

.empty-state p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.empty-state .btn-row {
  margin-top: 8px;
}

.filter-result-count {
  /* Visually hidden — the same count is already shown in .section-head .meta;
     this node exists only so screen readers announce updates via aria-live. */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== Profile ===== */
.profile-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  margin: 8px 0 28px;
}

.profile-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  object-fit: cover;
  cursor: pointer;
}

.profile-avatar.placeholder {
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 2rem;
  font-weight: 800;
  color: var(--ink-soft);
}

.profile-banner h1 {
  margin: 0;
}

.profile-handle {
  font-family: var(--mono);
  color: var(--muted);
  font-size: 0.92rem;
}

.profile-handle .at { color: var(--syntax); }

/* ===== Admin + member badges ===== */
.admin-badge,
.member-badge {
  display: inline-block;
  vertical-align: -0.15em;
  margin-left: 6px;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  pointer-events: none;
  user-select: none;
  overflow: visible;
}

.admin-badge {
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.22))
    drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 34%, transparent));
}

.admin-badge-sm { width: 1.08em; height: 1.08em; }
.member-badge-sm { width: 1em; height: 1em; }
.admin-badge-lg,
.member-badge-lg {
  /* Profile-page hero variant — fixed pixel size so the badge reads as a
     hero-scale signifier next to the user's name (Issue #91). */
  width: 34px;
  height: 34px;
  margin-left: 0;
  vertical-align: middle;
}

.admin-badge-wrap,
.member-badge-wrap {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 12px;
  cursor: help;
  outline-offset: 2px;
}

.admin-badge-wrap:focus-visible,
.member-badge-wrap:focus-visible {
  outline: 2px solid var(--accent, currentColor);
  border-radius: 4px;
}

.member-badge-level-1 {
  color: #8f9aaa;
}

.member-badge-level-5 {
  color: #35c46f;
}

.member-badge-level-10 {
  color: #f2be3e;
}

.member-badge-wrap { position: relative; }

.member-badge-tooltip {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, -4px);
  width: max-content;
  max-width: min(320px, calc(100vw - 32px));
  padding: 12px 14px;
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 0.85rem;
  line-height: 1.45;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms;
  z-index: 60;
}

.member-badge-tooltip::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: var(--surface-2);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
}

.member-badge-tooltip-title {
  display: block;
  font-size: 0.92rem;
  margin-bottom: 4px;
  color: var(--accent);
}

.member-badge-tooltip-body {
  display: block;
  margin-bottom: 6px;
  color: var(--ink-soft);
}

.member-badge-tooltip-list {
  list-style: disc;
  padding-left: 18px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--ink);
}

.member-badge-tooltip-list strong {
  color: var(--accent-strong, var(--accent));
}

.member-badge-wrap:hover .member-badge-tooltip,
.member-badge-wrap:focus-visible .member-badge-tooltip,
.member-badge-wrap:focus-within .member-badge-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s;
}

@media (max-width: 640px) {
  .member-badge-tooltip {
    /* Anchor to viewport via fixed positioning so the tooltip stays on-screen
       no matter where the badge sits in a heading on narrow viewports. */
    display: block;
    position: fixed;
    top: auto;
    bottom: 16px;
    left: 16px;
    right: 16px;
    width: auto;
    max-width: calc(100vw - 32px);
    transform: translateY(8px);
  }
  .member-badge-tooltip::before { display: none; }
  .member-badge-tooltip-list { word-break: break-word; overflow-wrap: anywhere; }
  .member-badge-wrap:hover .member-badge-tooltip,
  .member-badge-wrap:focus-visible .member-badge-tooltip,
  .member-badge-wrap:focus-within .member-badge-tooltip {
    transform: translateY(0);
  }
}

/* ===== Level progress bar ===== */
.level-progress {
  margin: 22px 0 4px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.level-progress-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.level-progress-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.level-progress-headline {
  font-weight: 700;
  color: var(--ink);
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}

.level-progress-xp {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.level-progress-bar {
  display: block;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
}

.level-progress-track {
  fill: color-mix(in srgb, var(--surface-2) 90%, transparent);
  stroke: var(--border);
  stroke-width: 0.5;
}

.level-progress-fill {
  fill: var(--accent);
  transition: width 320ms ease;
}

.level-progress-fill-1 { fill: #8f9aaa; }
.level-progress-fill-5 { fill: #35c46f; }
.level-progress-fill-10 { fill: #f2be3e; }

.level-progress-breakdown {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.level-progress-breakdown li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
}

.level-progress-breakdown li.is-total {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

.level-progress-breakdown .key {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.level-progress-breakdown .value {
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.profile-admin-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 4px;
  padding: 3px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent, #67d4ff);
  background: linear-gradient(90deg, rgba(103, 212, 255, 0.12), rgba(110, 231, 163, 0.08));
  border: 1px solid rgba(103, 212, 255, 0.35);
  border-radius: 999px;
  width: max-content;
  max-width: 100%;
}

.profile-admin-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent, #67d4ff);
  box-shadow: 0 0 8px rgba(103, 212, 255, 0.7);
}

.profile-bio {
  max-width: 680px;
  margin-top: 6px;
  color: var(--ink);
}

.profile-actions {
  margin: 14px 0 0;
  align-items: stretch;
  gap: 12px;
  max-width: 100%;
}

.profile-actions > .btn,
.profile-actions > .btn-primary {
  flex: 1 1 210px;
  min-width: min(100%, 190px);
  max-width: 320px;
  min-height: 44px;
  height: auto;
  padding: 10px 18px;
  line-height: 1.18;
  text-align: center;
  white-space: normal;
}

.profile-actions > .btn-tip {
  min-width: min(100%, 230px);
}

@media (max-width: 640px) {
  .profile-actions > .btn,
  .profile-actions > .btn-primary {
    flex-basis: 100%;
    max-width: none;
  }
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 24px 0;
}

.profile-stat {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.profile-stat .key {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.profile-stat .value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.profile-achievements {
  margin: 28px 0;
}

.profile-achievements .section-head {
  margin-top: 0;
}

.achievement-summary {
  margin: -6px 0 12px;
  font-size: 0.9rem;
}

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.achievement {
  min-height: 142px;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.achievement.is-earned {
  border-color: color-mix(in srgb, var(--good) 42%, var(--border));
  background: color-mix(in srgb, var(--good) 7%, var(--surface));
}

.achievement.is-locked {
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--surface-2) 55%, var(--surface));
}

.achievement-head {
  display: grid;
  gap: 5px;
}

.achievement-head strong {
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.25;
}

.achievement p {
  margin: 0;
  color: inherit;
  font-size: 0.86rem;
  line-height: 1.38;
}

.achievement-status {
  width: max-content;
  max-width: 100%;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid currentColor;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

.achievement.is-earned .achievement-status {
  color: var(--good);
}

.achievement-progress {
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.74rem;
}

.achievement-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.achievement-xp {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
  color: var(--accent-strong, var(--accent));
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.achievement.is-earned .achievement-xp {
  border-color: color-mix(in srgb, var(--good) 45%, var(--border));
  background: color-mix(in srgb, var(--good) 12%, var(--surface-2));
  color: var(--good);
}

.achievement.is-locked .achievement-xp {
  opacity: 0.7;
}

/* ===== Avatar uploader ===== */
.avatar-upload {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 16px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 14px;
}

.avatar-upload .preview {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.avatar-upload .preview.placeholder {
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--ink-soft);
}

.avatar-upload .help {
  font-size: 0.84rem;
  color: var(--muted);
  margin: 0 0 8px;
}

/* ===== Reviews ===== */
.review {
  padding: 14px 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 10px;
}

.review .body {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.55;
}

.review .meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--muted);
}

/* ===== Modal / Dialog (shadcn-aligned) ===== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 50%, rgba(0, 0, 0, 0.7));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-card {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 51;
  width: min(480px, calc(100vw - 24px));
  max-height: calc(100vh - 60px);
  overflow: auto;
  transform: translate(-50%, -50%);
  padding: 24px;
  background: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.modal-card h2 {
  margin: 0 0 6px;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.modal-card p {
  margin: 0 0 16px;
  color: var(--muted-foreground);
  font-size: 0.875rem;
  line-height: 1.5;
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.modal-close:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.handle-field {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.handle-field input {
  flex: 1;
}

.handle-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  padding: 0 10px;
  background: var(--background);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.handle-input-row:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}

.handle-input-row .handle-prefix {
  color: var(--muted);
  font-family: ui-monospace, Menlo, monospace;
}

.handle-input-row input {
  border: none;
  background: transparent;
  flex: 1;
  padding: 8px 0;
  outline: none;
  color: inherit;
  font-family: ui-monospace, Menlo, monospace;
}

.handle-input-row input:focus {
  outline: none;
}

.oauth-actions {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
  gap: 10px;
}

/* ===== Listing auth gate (signed-out viewers on /swap/:slug) ===== */
.listing-gate {
  display: flex;
  flex-direction: column;
}

.listing-gate-meta {
  margin-top: -0.3em;
  font-size: 0.875rem;
}

.listing-gate-card {
  margin-top: 24px;
  padding: 24px;
  background: var(--popover, var(--surface));
  color: var(--popover-foreground, var(--ink));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md, var(--shadow-lg));
}

.listing-gate-card h2 {
  margin: 0 0 6px;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.listing-gate-card p {
  margin: 0 0 14px;
  color: var(--muted-foreground, var(--ink-soft));
  font-size: 0.9375rem;
  line-height: 1.5;
}

.listing-gate-card .oauth-actions {
  margin-top: 4px;
}

.listing-gate-back {
  margin-top: 16px;
  font-size: 0.875rem;
}

.oauth-btn {
  width: 100%;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--radius);
  gap: 12px;
  font-weight: 600;
  font-size: 0.9375rem;
  border-width: 1px;
}

.oauth-btn .oauth-btn-label {
  flex: 1;
  text-align: center;
}

.oauth-btn .oauth-mark {
  flex: 0 0 20px;
}

/* Google: white card per the sign-in branding guidelines so the four-color
   G stays legible regardless of theme. Foreground #1f1f1f / Roboto-stack
   approximation gives ≥ 7:1 contrast in light + dark. */
.oauth-btn--google {
  background: #ffffff;
  color: #1f1f1f;
  border-color: #dadce0;
}

.oauth-btn--google:hover,
.oauth-btn--google:focus-visible {
  background: #f5f6f8;
  border-color: #1a73e8;
  color: #1f1f1f;
}

/* GitHub: filled charcoal so the white octocat keeps WCAG AA contrast.
   currentColor on the SVG path picks up the foreground automatically. */
.oauth-btn--github {
  background: #24292f;
  color: #ffffff;
  border-color: #24292f;
}

.oauth-btn--github:hover,
.oauth-btn--github:focus-visible {
  background: #1b1f24;
  border-color: #1b1f24;
  color: #ffffff;
}

/* ===== Toast ===== */
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.toast-stack {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  pointer-events: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

.toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  font-size: 0.875rem;
  font-weight: 500;
  animation: toast-in 200ms ease-out;
}

.toast-stack .toast {
  position: static;
  pointer-events: auto;
}

/* ===== Messages ===== */
.thread-page {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  margin-top: 14px;
}

.thread-list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  border-right: 1px solid var(--border-soft);
  background: var(--surface);
  max-height: 600px;
  overflow-y: auto;
}

.thread-list li {
  margin: 0;
  padding: 0;
}

.thread-list li::marker { display: none; }

.thread-summary {
  display: grid;
  gap: 3px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  border-left: 3px solid transparent;
  cursor: pointer;
}

a.thread-summary {
  border-bottom: 1px solid var(--border-soft);
}

.thread-summary:hover {
  background: var(--surface-2);
}

.thread-summary.active {
  background: var(--surface-2);
  border-left-color: var(--accent);
}

.thread-summary .who {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  color: var(--ink);
}

.thread-summary .who img,
.thread-summary .who .avatar-fallback {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  display: grid;
  place-items: center;
  background: var(--surface-3);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.74rem;
  color: var(--ink);
  flex-shrink: 0;
}

.thread-summary .name {
  font-weight: 600;
}

.thread-summary .handle {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.78rem;
}

.thread-summary .preview {
  font-size: 0.82rem;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.thread-summary .stamp {
  font-size: 0.72rem;
  color: var(--muted);
  font-family: var(--mono);
}

.thread-empty {
  padding: 14px;
  color: var(--muted);
  font-size: 0.86rem;
}

.thread-pane {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
}

.thread-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface);
}

.thread-header img,
.thread-header .avatar-fallback {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  display: grid;
  place-items: center;
  background: var(--surface-3);
  font-weight: 700;
  font-family: var(--mono);
}

.thread-header .name {
  font-weight: 700;
  font-size: 0.96rem;
}

.thread-header .name-link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.thread-header .name-link:hover {
  color: var(--accent);
}

.thread-header .handle {
  font-size: 0.82rem;
  color: var(--muted);
  font-family: var(--mono);
}

.thread-stream {
  padding: 14px 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: flex-end;
  min-height: 220px;
  max-height: 560px;
  background: var(--bg);
}

.message {
  width: fit-content;
  max-width: min(560px, 86%);
  align-self: flex-start;
  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.4;
}

.message .body {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.message.group-start:not(:first-child) {
  margin-top: 10px;
}

.message.group-end {
  border-bottom-left-radius: 4px;
}

.message .stamp {
  display: block;
  margin-top: 2px;
  font-size: 0.68rem;
  color: var(--muted);
  font-family: var(--mono);
  letter-spacing: 0;
}

.message.outgoing {
  align-self: flex-end;
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.message.outgoing.group-end {
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 4px;
}

.message.outgoing .stamp {
  color: color-mix(in srgb, var(--accent-ink) 50%, transparent);
}

.thread-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--border-soft);
  background: var(--surface);
}

.thread-compose textarea {
  min-height: 40px;
  max-height: 160px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.94rem;
  line-height: 1.4;
  resize: none;
  overflow-y: auto;
}

.thread-compose textarea:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent-bg);
}

.thread-no-selection {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}

/* ===== Page error ===== */
.error-state {
  padding: 32px;
  border: 1px solid var(--bad);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bad) 10%, transparent);
  color: var(--ink);
}

/* ===== Source toggle (listing) ===== */
.source-toggle {
  margin-top: 22px;
}

.source-toggle summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.84rem;
  list-style: none;
}

.source-toggle summary::-webkit-details-marker {
  display: none;
}

.source-toggle summary:hover {
  border-color: var(--accent);
}

.source-toggle[open] summary {
  border-color: var(--accent);
  color: var(--ink);
}

.source-toggle pre {
  margin-top: 12px;
}

/* ===== Responsive ===== */
@media (max-width: 880px) {
  .split {
    grid-template-columns: minmax(0, 1fr);
  }

  .split > .split-side {
    position: static;
  }

  .thread-page {
    grid-template-columns: 1fr;
  }

  .thread-list {
    border-right: 0;
    border-bottom: 1px solid var(--border-soft);
    max-height: 220px;
  }

  .form .field-row {
    grid-template-columns: 1fr;
  }

  .profile-banner {
    grid-template-columns: 1fr;
    text-align: left;
  }
}

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

@media (max-width: 640px) {
  .search-input {
    order: 99;
    flex-basis: 100%;
    max-width: none;
  }

  .listing-actions .secondary-actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
  }

  .modal-card {
    width: calc(100vw - 20px);
  }
}

/* ===== Inline mod-actions kebab (Issue #93) ===== */
.card-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
}
.card-wrap > .card {
  flex: 1 1 auto;
  min-width: 0;
}

.mod-kebab-host {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 5;
}

/* Inside the listing actions row the kebab sits inline, not absolute. */
.listing-actions .mod-kebab-host {
  position: static;
  margin-left: 0;
}

.mod-kebab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.mod-kebab:hover,
.mod-kebab:focus-visible {
  background: var(--surface-2);
  border-color: var(--ink-3, var(--ink));
}

.mod-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 30;
  display: grid;
}

.mod-menu button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  color: var(--ink);
  border-radius: var(--radius-sm);
  text-align: left;
  font-size: 0.92rem;
  cursor: pointer;
}

.mod-menu button:hover,
.mod-menu button:focus-visible {
  background: var(--surface-2);
}

.mod-menu button.danger {
  color: var(--bad);
}

.mod-menu button.danger:hover,
.mod-menu button.danger:focus-visible {
  color: var(--danger);
}

.card-mod-flags {
  display: flex;
  gap: 6px;
  /* margin-top: auto pins admin chips (PINNED/Hidden) to the bottom of the
     card so cards with and without flags share the same overall height. */
  margin-top: auto;
}

.card-mod-flag {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink);
}

.card-mod-flag.muted {
  color: var(--muted);
}

.listing-mod-banner {
  margin: 12px 0;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink);
  font-size: 0.92rem;
}

.listing-mod-banner strong + strong {
  margin-left: 12px;
}

/* ============================================================
 * Featured MD treatment — gold border on the card + a star pill
 * pinned to the bottom-left. Applied to .card.card-featured on
 * every listing surface (home, profile, search, /popular,
 * /trending) and to the listing detail page via
 * .listing-featured-badge + .listing-title-featured.
 * Designed to read instantly without overpowering the rest of the
 * grid: gold accents over the existing surface, no fill swap.
 * ============================================================ */
.card.card-featured {
  position: relative;
  border-color: #d99a00;
  background:
    linear-gradient(180deg, rgba(255, 215, 106, 0.08) 0%, rgba(255, 215, 106, 0) 60%),
    var(--surface);
  box-shadow: 0 0 0 1px #d99a00 inset, 0 6px 22px -10px rgba(217, 154, 0, 0.45);
}
.card.card-featured:hover,
.card.card-featured:focus-visible {
  border-color: #f0b400;
  box-shadow: 0 0 0 1px #f0b400 inset, 0 8px 26px -8px rgba(240, 180, 0, 0.55);
}
.card.card-featured .card-title {
  background: linear-gradient(135deg, #f7c548 0%, #ffe27a 60%, #f0b400 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Bottom-left pill pinned to the card's bottom edge via margin-top: auto.
   Public-facing — visible to every user, not just admins. */
.card-featured-row {
  margin-top: auto;
  display: flex;
}
.card-featured-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  color: #2a1a00;
  background: linear-gradient(135deg, #ffd76a 0%, #f0b400 100%);
  border: 1px solid #d99a00;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  pointer-events: none;
}

/* Listing detail (permalink) page gold treatment. */
.listing-chips .listing-featured-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  color: #2a1a00;
  background: linear-gradient(135deg, #ffd76a 0%, #f0b400 100%);
  border: 1px solid #d99a00;
  margin-right: 8px;
}
.listing-title-featured {
  background: linear-gradient(135deg, #f7c548 0%, #ffe27a 60%, #f0b400 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ===== Utility ===== */
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }
.hidden { display: none !important; }

/* ============================================================
 * VISUAL REDESIGN — appended layer (frontend-only).
 * Overrides earlier rules where needed to upgrade the look to a
 * developer-tool aesthetic à la Linear / Vercel / Supabase.
 * No copy, no routes, no logic touched — purely visual.
 * ============================================================ */

/* ---- Refined design tokens (per theme) ---- */
:root,
:root[data-theme="midnight"] {
  --bg: #06080c;
  --surface: #0e1117;
  --surface-2: #161a22;
  --surface-3: #1d2230;
  --border: #232836;
  --border-soft: #181c26;
  --ink: #f5f6f8;
  --ink-soft: #c2c5cf;
  --muted: #7f8392;
  --syntax: #4a4d59;
  --accent: #67d4ff;
  --accent-strong: #9be6ff;
  --accent-bg: rgba(103, 212, 255, 0.10);
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 24px 60px -20px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(0, 0, 0, 0.5);
  --shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 24px -8px rgba(0, 0, 0, 0.5);
  --ring: 0 0 0 1px rgba(103, 212, 255, 0.18);
  --grid-line: rgba(255, 255, 255, 0.04);
  --noise-opacity: 0.5;
}

:root[data-theme="purple"] {
  --bg: #08051a;
  --surface: #110b22;
  --surface-2: #1a1230;
  --border: #2b1d44;
  --border-soft: #1a112e;
  --ink: #f4f1fb;
  --ink-soft: #cdc4e0;
  --muted: #897fa3;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 24px 60px -20px rgba(20, 6, 50, 0.7);
  --shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 24px -8px rgba(20, 6, 50, 0.5);
  --ring: 0 0 0 1px rgba(181, 140, 255, 0.22);
  --grid-line: rgba(181, 140, 255, 0.05);
}

:root[data-theme="blue"] {
  --bg: #050b18;
  --surface: #0b1424;
  --surface-2: #111d34;
  --border: #213352;
  --border-soft: #16243a;
  --ink: #f0f4fa;
  --ink-soft: #c1ccdc;
  --muted: #758299;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 24px 60px -20px rgba(2, 8, 25, 0.7);
  --shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 24px -8px rgba(2, 8, 25, 0.5);
  --ring: 0 0 0 1px rgba(95, 160, 255, 0.22);
  --grid-line: rgba(95, 160, 255, 0.05);
}

:root[data-theme="forest"] {
  --bg: #050e09;
  --surface: #0b1611;
  --surface-2: #11211a;
  --border: #1e3a2a;
  --border-soft: #112218;
  --ink: #f0f4ee;
  --ink-soft: #bcccbb;
  --muted: #777f78;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 24px 60px -20px rgba(2, 16, 8, 0.7);
  --shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 24px -8px rgba(2, 16, 8, 0.5);
  --ring: 0 0 0 1px rgba(92, 202, 139, 0.22);
  --grid-line: rgba(92, 202, 139, 0.05);
}

/* Smoother base typography. */
html {
  font-feature-settings: "ss01", "cv11", "cv02";
}

body {
  background:
    radial-gradient(ellipse 1200px 600px at 50% -20%, color-mix(in srgb, var(--accent) 6%, transparent) 0%, transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* Ambient grid backdrop — extremely subtle, behind everything. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 80%);
  opacity: 0.7;
}

#app { position: relative; z-index: 1; }

/* ---- Refined heading typography ---- */
h1 {
  font-feature-settings: "ss01", "cv11";
  letter-spacing: -0.035em;
  text-wrap: balance;
}
h2 { letter-spacing: -0.025em; }

/* ---- App bar polish ---- */
.appbar {
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  padding-top: 12px;
  padding-bottom: 12px;
}
.appbar::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, color-mix(in srgb, var(--accent) 35%, transparent) 50%, transparent 100%);
  opacity: 0.5;
  pointer-events: none;
}

.brand {
  letter-spacing: -0.015em;
  font-weight: 600;
}
.brand:hover .brand-mark { transform: scale(1.05); }
.brand-mark { transition: transform 0.2s ease; }

.search-input {
  background-color: color-mix(in srgb, var(--surface) 80%, transparent);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.search-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  box-shadow: var(--ring), 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
  background-color: var(--surface);
}

.btn-quiet { font-weight: 500; }

/* ---- Hero — premium developer-tool look ---- */
.hero {
  position: relative;
  padding: 72px 0 40px;
  isolation: isolate;
}

/* Spotlight background — the Aceternity Spotlight feel, but restrained. */
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% 0 -10%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 30% 30%, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 20%, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 70%);
  filter: blur(40px);
  opacity: 0.9;
  animation: spotlight-drift 18s ease-in-out infinite alternate;
}

@keyframes spotlight-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(2%, 1%, 0) scale(1.04); }
}

/* Hero dot-grid — premium texture without being busy. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 12%, transparent) 1px, transparent 0);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 60% 60% at 30% 40%, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 30% 40%, #000 20%, transparent 80%);
  opacity: 0.55;
}

.hero h1 {
  font-size: clamp(1.7rem, 4vw, 2.7rem);
  letter-spacing: -0.04em;
  line-height: 1.05;
  font-weight: 800;
  background: linear-gradient(180deg, var(--ink) 0%, color-mix(in srgb, var(--ink) 70%, var(--muted)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 18px;
  text-wrap: nowrap;
}

@media (max-width: 720px) {
  .hero h1 { text-wrap: balance; }
}

.hero .lead {
  font-size: 1.18rem;
  color: var(--ink-soft);
  max-width: 620px;
  line-height: 1.55;
}

/* Flat editorial kicker — replaces the previous pill so the homepage isn't
 * stacked with rounded chips. A short accent rule before the label keeps the
 * Magic UI feel without another pill. */
.hero-eyebrow {
  position: relative;
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-strong);
  font-weight: 600;
  margin: 0 0 18px;
  overflow: visible;
}
.hero-eyebrow::before {
  content: "";
  position: static;
  inset: auto;
  display: block;
  flex: 0 0 auto;
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, transparent) 0%, transparent 100%);
  animation: none;
  mix-blend-mode: normal;
  pointer-events: none;
}

/* Hero CTA row — visually separated, more breathing room. */
.hero .btn-row {
  margin-top: 26px;
  gap: 12px;
}

/* ---- Filename pill polish ---- */
.filename {
  display: flex;
  width: fit-content;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: var(--border-soft);
  font-size: 0.75rem;
  padding: 5px 12px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-soft);
}
.filename .dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent);
}

/* ---- Buttons — refined primary with shimmer + restrained hover ---- */
.btn,
.btn-primary,
.btn-quiet,
.btn-icon {
  height: 42px;
  padding: 0 18px;
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: -0.005em;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease, color 0.18s ease;
}
.btn-primary {
  position: relative;
  font-weight: 600;
  background: var(--accent);
  border-color: color-mix(in srgb, var(--accent-strong) 80%, var(--accent));
  color: var(--accent-ink);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent),
    0 6px 20px -6px color-mix(in srgb, var(--accent) 60%, transparent);
  overflow: hidden;
}
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.35) 50%, transparent 65%);
  background-size: 250% 100%;
  animation: shiny-sweep 4s ease-in-out infinite;
  pointer-events: none;
}
.btn-primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.3) inset,
    0 0 0 1px color-mix(in srgb, var(--accent-strong) 70%, transparent),
    0 12px 28px -8px color-mix(in srgb, var(--accent) 70%, transparent);
}
.btn-primary:active { transform: translateY(0); }

.btn {
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  background: var(--surface-2);
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}

/* ---- Daily-hero card — border beam, premium card treatment ---- */
.daily-hero {
  position: relative;
  margin: 8px 0 36px;
  padding: 28px 32px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background:
    radial-gradient(ellipse 80% 100% at 0% 0%, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 60%),
    color-mix(in srgb, var(--surface) 85%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  overflow: hidden;
  isolation: isolate;
}

/* Border beam — Magic UI style, a conic-gradient ring rotating around the card. */
.daily-hero::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--beam-angle, 0deg),
    transparent 0deg,
    transparent 280deg,
    color-mix(in srgb, var(--accent) 90%, white) 320deg,
    color-mix(in srgb, var(--accent-strong) 90%, white) 340deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  animation: beam-rotate 6s linear infinite;
}
@property --beam-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes beam-rotate {
  to { --beam-angle: 360deg; }
}
/* Fallback for browsers without @property — fade beam in/out instead. */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .daily-hero::before { display: none; }
}

/* Subtle inner highlight on top edge. */
.daily-hero::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, color-mix(in srgb, var(--accent) 40%, transparent) 50%, transparent 100%);
  pointer-events: none;
}

.daily-hero h2 a {
  background: linear-gradient(180deg, var(--ink) 0%, color-mix(in srgb, var(--ink) 75%, var(--muted)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  border-bottom: 0;
}
.daily-hero h2 a:hover {
  background: linear-gradient(180deg, var(--accent-strong) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.daily-hero-eyebrow {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-strong);
  font-weight: 600;
  margin-bottom: 14px;
}
.daily-hero-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 80%, transparent);
  flex: 0 0 auto;
}

/* ---- Section heads — refined hierarchy ---- */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: 24px 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-soft);
}
.section-head h2 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.section-head .meta {
  color: var(--muted);
  font-size: 0.82rem;
  font-family: var(--mono);
}

/* ---- Filter chips — refined feel ---- */
.chip-row {
  margin: 18px 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  gap: 6px;
}
.chip-row .label {
  margin-right: 8px;
  margin-left: 4px;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.chip {
  height: 30px;
  padding: 0 12px;
  font-size: 0.84rem;
  border-color: transparent;
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.chip:hover {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--border);
}
.chip.active {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent), 0 4px 14px -4px color-mix(in srgb, var(--accent) 50%, transparent);
}
#sort-select.chip {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'><path d='M2 4l3 3 3-3' stroke='%237f8392' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 30px;
  border: 1px solid var(--border);
}

/* ---- Cards — bento-grid feel, premium hover ---- */
.card-grid {
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}

.card {
  position: relative;
  padding: 20px 22px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, transparent) 0%, color-mix(in srgb, var(--surface) 80%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 30%);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, color-mix(in srgb, var(--accent) 40%, transparent), transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow:
    var(--shadow-soft),
    0 12px 28px -10px color-mix(in srgb, var(--accent) 30%, transparent);
}
.card:hover::before { opacity: 1; }
.card:hover::after { opacity: 1; }
.card:hover .card-title { color: var(--accent-strong); }

.card-title {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  transition: color 0.2s ease;
}

.card-meta-grid .meta-type {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-strong);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  padding: 3px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- Search input ---- */
.search-input {
  border-radius: 12px;
}
.search-input::placeholder { color: var(--muted); }

/* ---- Theme picker ---- */
.theme-picker > .picker-trigger {
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.theme-picker > .picker-trigger:hover {
  background: var(--surface-2);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.theme-popover {
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow);
  border-color: var(--border);
  padding: 8px;
}
.theme-option {
  border-radius: 8px;
  font-size: 0.88rem;
  padding: 8px 10px;
}
.theme-swatch {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 5%, transparent), 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ---- Account pill ---- */
.account-pill {
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.account-pill:hover {
  background: var(--surface-2);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

/* ---- Notification bell ---- */
.notif-bell > .notif-trigger {
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ---- Vote cluster (listing detail) — refined ---- */
.btn-vote {
  transition: all 0.15s ease;
}
.btn-vote.active.up { color: var(--good); border-color: color-mix(in srgb, var(--good) 50%, var(--border)); background: color-mix(in srgb, var(--good) 10%, transparent); }
.btn-vote.active.down { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 50%, var(--border)); background: color-mix(in srgb, var(--bad) 10%, transparent); }

/* ---- Code blocks — terminal window chrome (Magic UI Terminal feel) ---- */
pre {
  position: relative;
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 85%, var(--surface));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  padding: 38px 18px 18px;
}
pre::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 28px;
  background: color-mix(in srgb, var(--surface-2) 90%, var(--surface));
  border-bottom: 1px solid var(--border-soft);
  border-radius: 12px 12px 0 0;
}
pre::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow:
    14px 0 0 #febc2e,
    28px 0 0 #28c840;
}
pre.fenced .fence-label {
  top: 6px;
  left: 56px;
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.08em;
}

code {
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
  border-color: var(--border-soft);
}

/* ---- Frontmatter — premium polish ---- */
.frontmatter {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 90%, transparent) 0%, color-mix(in srgb, var(--surface) 75%, transparent) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}

/* ---- Footer polish ---- */
.site-footer {
  position: relative;
  margin-top: 80px;
  padding: 32px clamp(16px, 4vw, 36px);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, color-mix(in srgb, var(--accent) 30%, transparent) 50%, transparent 100%);
  opacity: 0.5;
  pointer-events: none;
}
.footer-links a {
  font-size: 0.84rem;
  transition: color 0.15s ease;
}

/* ---- Pager ---- */
.pager {
  margin: 24px 0;
}
.pager-arrow {
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ---- Selection + scrollbar ---- */
::selection {
  background: color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--ink);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--accent) 40%, var(--border));
  background-clip: padding-box;
}

/* ---- Restrained motion: entry animations ---- */
@keyframes fade-up {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero .filename,
.hero-eyebrow,
.hero h1,
.hero .lead,
.hero .btn-row {
  opacity: 0;
  animation: fade-up 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.hero .filename       { animation-delay: 0.05s; }
.hero-eyebrow         { animation-delay: 0.12s; }
.hero h1              { animation-delay: 0.18s; }
.hero .lead           { animation-delay: 0.26s; }
.hero .btn-row        { animation-delay: 0.34s; }

.daily-hero {
  opacity: 0;
  animation: fade-up 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.42s forwards;
}

.card-grid > * {
  opacity: 0;
  animation: fade-up 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.card-grid > *:nth-child(1)  { animation-delay: 0.05s; }
.card-grid > *:nth-child(2)  { animation-delay: 0.10s; }
.card-grid > *:nth-child(3)  { animation-delay: 0.15s; }
.card-grid > *:nth-child(4)  { animation-delay: 0.20s; }
.card-grid > *:nth-child(5)  { animation-delay: 0.25s; }
.card-grid > *:nth-child(6)  { animation-delay: 0.30s; }
.card-grid > *:nth-child(7)  { animation-delay: 0.35s; }
.card-grid > *:nth-child(8)  { animation-delay: 0.40s; }
.card-grid > *:nth-child(n+9) { animation-delay: 0.45s; }

.section-head, .chip-row {
  opacity: 0;
  animation: fade-in 0.4s ease 0.36s forwards;
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero-eyebrow::before,
  .btn-primary::before,
  .daily-hero::before {
    animation: none !important;
  }
  .hero .filename,
  .hero-eyebrow,
  .hero h1,
  .hero .lead,
  .hero .btn-row,
  .daily-hero,
  .card-grid > *,
  .section-head,
  .chip-row {
    opacity: 1 !important;
    animation: none !important;
  }
}

/* ---- Listing detail polish ---- */
.listing-actions {
  margin: 18px 0 24px;
  gap: 6px;
  padding: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}

.listing-actions > .btn,
.listing-actions > .btn-primary,
.listing-actions > .btn-tip,
.listing-actions .listing-more > .btn-quiet {
  height: 36px;
  padding: 0 10px;
  border-radius: var(--radius-md);
  font-size: 0.82rem;
  line-height: 1;
  flex: 0 0 auto;
}

.listing-actions .vote-cluster {
  flex: 0 0 auto;
  border-radius: var(--radius-md);
}

.listing-actions .btn-vote {
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
}

.listing-actions .vote-cluster .vote-score {
  min-width: 38px;
  padding: 0 8px;
}

.listing-actions .listing-more {
  margin-left: 0;
  flex: 0 0 auto;
}

.listing-actions .listing-more > .btn-quiet {
  border: 1px solid transparent;
  background: transparent;
}

.listing-actions .mod-kebab-host {
  margin-left: 0;
  flex: 0 0 auto;
}

/* ---- Markdown body refinements ---- */
.markdown blockquote {
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

/* ---- Mobile polish ---- */
@media (max-width: 640px) {
  .hero { padding: 48px 0 24px; }
  .hero h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .daily-hero { padding: 22px 20px; border-radius: 14px; }
  .card-grid { gap: 12px; grid-template-columns: 1fr; }
  .card { padding: 18px 18px; }
  .chip-row { padding: 8px; flex-wrap: wrap; }
  .chip-row .label { width: 100%; margin-bottom: 4px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .section-head .meta { font-size: 0.78rem; }
  .appbar { flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
}

/* ---- Tablet polish ---- */
@media (min-width: 641px) and (max-width: 1024px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- OAuth buttons — re-assert brand colors after the redesign layer ----
 * The earlier `.btn { background: color-mix(...) }` rule in this redesign
 * block won the cascade against `.oauth-btn--google { background: #ffffff }`
 * because of source order, leaving the Google button with dark-on-dark text.
 * Re-state the OAuth brand colors here so they win regardless of theme. */
.oauth-btn--google,
.oauth-btn--google:visited {
  background: #ffffff !important;
  color: #1f1f1f !important;
  border-color: #dadce0 !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.oauth-btn--google:hover,
.oauth-btn--google:focus-visible {
  background: #f5f6f8 !important;
  border-color: #1a73e8 !important;
  color: #1f1f1f !important;
}
.oauth-btn--github,
.oauth-btn--github:visited {
  background: #24292f !important;
  color: #ffffff !important;
  border-color: #24292f !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.oauth-btn--github:hover,
.oauth-btn--github:focus-visible {
  background: #1b1f24 !important;
  border-color: #1b1f24 !important;
  color: #ffffff !important;
}
/* Brand mark — transparent in the bar, the logo PNG carries its own shape. */
img.brand-mark {
  background: transparent;
  border-radius: 0;
}


/* ============================================================
 * Bookmarks (saves) — Save button + /bookmarks page
 * ============================================================ */
.btn-save {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-save .save-icon { font-size: 1.1em; line-height: 1; }
.btn-save .save-count {
  font-size: 0.85em;
  opacity: 0.7;
  margin-left: 2px;
}
.btn-save.is-saved {
  border-color: var(--accent);
  color: var(--accent);
}
.btn-save.is-saved .save-icon { color: var(--accent); }

.bookmarks-toolbar { margin: 12px 0 16px; }
.bookmarks-folder-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.bookmarks-folder-form input[name="name"] {
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  min-width: 220px;
}
.bookmarks-folder-form .status-line { width: 100%; margin-top: 6px; }

.bookmarks-layout {
  display: grid;
  grid-template-columns: minmax(180px, 220px) 1fr;
  gap: 24px;
}
@media (max-width: 720px) {
  .bookmarks-layout { grid-template-columns: 1fr; }
}
.bookmarks-sidebar { border-right: 1px solid var(--border); padding-right: 16px; }
@media (max-width: 720px) {
  .bookmarks-sidebar { border-right: 0; padding-right: 0; }
}
.bookmarks-tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bookmarks-tab {
  display: flex;
  align-items: center;
  gap: 6px;
}
.bookmarks-tab-btn {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}
.bookmarks-tab-btn:visited { color: var(--fg); }
.bookmarks-tab-btn:hover {
  background: var(--surface);
  border-color: var(--border);
}
.bookmarks-tab.is-active .bookmarks-tab-btn {
  background: var(--surface);
  border-color: var(--accent);
}
.bookmarks-tab-count {
  font-size: 0.85em;
  opacity: 0.7;
}
.bookmarks-folder-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 14px;
}
.bookmarks-folder-header h2 {
  margin: 0 0 4px;
  font-size: 1.15rem;
}
.bookmarks-folder-header p { margin: 0; }
.bookmarks-folder-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.bookmarks-rename-form {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 4px 0;
}
.bookmarks-folder-editor {
  margin: 0 0 14px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.bookmarks-rename-form input[name="name"] {
  flex: 1;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  min-width: 120px;
}
@media (max-width: 720px) {
  .bookmarks-folder-header {
    flex-direction: column;
    align-items: stretch;
  }
  .bookmarks-folder-actions { justify-content: flex-start; }
}

.bookmarks-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bookmarks-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.bookmarks-item-link {
  display: block;
  flex: 1;
  text-decoration: none;
  color: inherit;
}
.bookmarks-item-link h3 { margin: 0 0 4px; font-size: 1.05rem; }
.bookmarks-item-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 6px 0 0;
  font-size: 0.85em;
  opacity: 0.85;
}
.bookmarks-folder-pill {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 0.78em;
}
.bookmarks-item-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  position: relative;
}
.bookmarks-move-wrapper { position: relative; }
.bookmarks-move-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 180px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  z-index: 50;
  padding: 4px;
  display: flex;
  flex-direction: column;
}
.bookmarks-move-option {
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--fg);
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.bookmarks-move-option:hover { background: var(--bg); }
.bookmarks-move-option.is-current { font-weight: 600; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ============================================================
 * Follow system + tipping
 * ============================================================ */
.btn-follow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-follow.is-following {
  border-color: var(--accent);
  color: var(--accent);
}
.btn-follow.is-following::before {
  content: "✓";
  font-size: 0.95em;
  line-height: 1;
}
.btn-follow:disabled {
  opacity: 0.6;
  cursor: progress;
}

.profile-follow-counts {
  margin: 6px 0 10px;
  font-size: 0.95rem;
}
.profile-follow-counts strong {
  color: var(--ink);
  font-weight: 600;
}

.chip-following {
  white-space: nowrap;
  margin-left: 4px;
}

.btn-tip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  border-color: var(--good, #6ee7a3);
  color: var(--good, #6ee7a3);
}

a.btn-tip,
a.btn-tip:visited,
a.btn-tip:hover,
a.btn-tip:visited:hover {
  border-color: var(--good, #6ee7a3);
  border-bottom-color: var(--good, #6ee7a3);
}

.btn-tip:hover {
  background: color-mix(in srgb, var(--good, #6ee7a3) 12%, transparent);
}

/* ===== Live chat widget — slide-from-right lobby ===== */
.chat-widget {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 50;
  font-family: inherit;
}

.chat-widget-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 18px 0 16px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink, #fff);
  border: 1px solid var(--accent);
  box-shadow: var(--shadow-md, 0 6px 18px rgba(0, 0, 0, 0.35));
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}
.chat-widget-trigger:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg, 0 12px 26px rgba(0, 0, 0, 0.4));
}
.chat-widget-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring, var(--accent)), var(--shadow-md);
}
.chat-widget-trigger-icon {
  font-size: 1.1rem;
  line-height: 1;
}
.chat-widget[data-state="open"] .chat-widget-trigger {
  display: none;
}

.chat-widget-panel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: min(420px, calc(100vw - 32px));
  height: min(640px, calc(100vh - 64px));
  min-width: 320px;
  min-height: 360px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-lg, 0 16px 40px rgba(0, 0, 0, 0.45));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  resize: both;
  animation: chat-widget-slide 220ms ease-out;
  transform-origin: bottom right;
}

.chat-widget-panel::after {
  content: "";
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 12px;
  height: 12px;
  border-right: 2px solid color-mix(in srgb, var(--ink-soft) 60%, transparent);
  border-bottom: 2px solid color-mix(in srgb, var(--ink-soft) 60%, transparent);
  opacity: 0.65;
  pointer-events: none;
}

@keyframes chat-widget-slide {
  from {
    opacity: 0;
    transform: translateX(24px) translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}

.chat-widget-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--border);
}
.chat-widget-titles h2 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
}
.chat-widget-subtitle {
  margin: 2px 0 0;
  font-size: 0.74rem;
  color: var(--ink-soft);
}
.chat-widget-close {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
}
.chat-widget-close:hover {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--border);
}
.chat-widget-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent);
}

.chat-widget-stream {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 9px 10px 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chat-widget-empty {
  margin: auto;
  padding: 24px 16px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.88rem;
}
.chat-widget-empty.chat-widget-error {
  color: var(--bad, #ef5b5b);
}

.chat-widget-skeleton {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.chat-widget-msg.chat-widget-msg-skeleton {
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.chat-widget-msg.chat-widget-msg-skeleton .chat-widget-msg-meta {
  gap: 6px;
}
.skeleton-chat-handle {
  height: 0.78rem;
  width: 28%;
}
.skeleton-chat-time {
  height: 0.7rem;
  width: 16%;
}
.skeleton-chat-body {
  height: 0.95rem;
  width: 84%;
  margin: 4px 0 0;
}

.chat-widget-msg {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  padding: 6px 8px 7px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chat-widget-msg.is-own {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

.chat-widget-msg-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  color: var(--ink-soft);
  flex-wrap: wrap;
}
.chat-widget-msg-handle {
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.chat-widget-msg-handle:hover {
  text-decoration: underline;
  color: var(--accent);
}
.chat-widget-msg-time {
  font-size: 0.66rem;
}
.chat-widget-msg-action {
  margin-left: auto;
  background: transparent;
  border: 0;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 0.72rem;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
}
.chat-widget-msg-action:hover {
  background: var(--surface);
  color: var(--bad, #ef5b5b);
}

.chat-widget-msg-body {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.34;
  color: var(--ink);
  word-break: break-word;
  white-space: pre-wrap;
}

/* MD link attachment card — rendered inline in the chat body whenever a user
   pastes a link to /swap/<slug>. The card sits on its own row inside the
   message bubble (the surrounding <p> is white-space: pre-wrap, so a newline
   before/after the URL is preserved verbatim). Matches the rest of the chat
   chrome via the same surface / border / accent tokens; the leading "MD"
   glyph is a flat accent badge rather than an SVG so the card stays themable
   under every preset (midnight / purple / blue / forest / custom). */
.chat-md-card {
  margin: 4px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: var(--radius-md, 10px);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  text-decoration: none;
  color: var(--ink);
  transition: transform 80ms ease-out, border-color 120ms ease-out, background-color 120ms ease-out, box-shadow 120ms ease-out;
  position: relative;
  overflow: hidden;
}
.chat-md-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 50%, transparent));
}
.chat-md-card:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 25%, transparent), 0 6px 18px color-mix(in srgb, var(--accent) 14%, transparent);
}
.chat-md-card:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent);
}
.chat-md-card:active {
  transform: scale(0.985);
}
.chat-md-card-glyph {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 18%, var(--surface-2));
  color: var(--accent);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}
.chat-md-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.chat-md-card-title {
  font-weight: 600;
  font-size: 0.84rem;
  line-height: 1.2;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-md-card-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-md-card-type {
  font-weight: 600;
  color: color-mix(in srgb, var(--accent) 70%, var(--ink-soft));
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.64rem;
}
.chat-md-card-dot {
  opacity: 0.6;
}
.chat-md-card-author {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-md-card-arrow {
  flex: 0 0 auto;
  font-size: 1rem;
  color: color-mix(in srgb, var(--accent) 70%, var(--ink-soft));
  transition: transform 120ms ease-out;
}
.chat-md-card:hover .chat-md-card-arrow {
  transform: translateX(2px);
  color: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
  .chat-md-card,
  .chat-md-card:active,
  .chat-md-card-arrow,
  .chat-md-card:hover .chat-md-card-arrow {
    transition: none;
    transform: none;
  }
}

.chat-widget-compose {
  border-top: 1px solid var(--border);
  padding: 8px 10px 10px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chat-widget-compose textarea {
  width: 100%;
  min-height: 40px;
  max-height: 116px;
  resize: vertical;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: 0.84rem;
  line-height: 1.34;
}
.chat-widget-compose textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}
.chat-widget-compose-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.chat-widget-compose-meta {
  font-size: 0.68rem;
  color: var(--ink-soft);
}
.chat-widget-send {
  height: 30px;
  padding: 0 12px;
  font-size: 0.8rem;
}
.chat-widget-send:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.chat-widget-send-error {
  margin: 0;
  padding: 6px 8px;
  border-radius: var(--radius-sm, 6px);
  background: color-mix(in srgb, var(--bad, #ef5b5b) 14%, transparent);
  color: var(--bad, #ef5b5b);
  font-size: 0.78rem;
}

.chat-widget-gate {
  border-top: 1px solid var(--border);
  padding: 12px 12px 14px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-widget-gate-lead {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
  text-align: center;
}
.chat-widget-oauth {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-widget-oauth .oauth-btn {
  width: 100%;
  justify-content: center;
}

@media (max-width: 640px) {
  .chat-widget {
    right: 12px;
    bottom: 12px;
  }
  .chat-widget-panel {
    right: 8px;
    bottom: 8px;
    width: calc(100vw - 16px);
    height: min(76vh, calc(100vh - 64px));
    min-width: 0;
    min-height: 320px;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 64px);
    resize: none;
  }
  .chat-widget-trigger-label {
    display: none;
  }
  .chat-widget-trigger {
    width: 48px;
    padding: 0;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-widget-panel {
    animation: none;
  }
  .chat-widget-trigger {
    transition: none;
  }
}

/* ===== Live chat — admin moderation surfaces ===== */
.chat-widget-pinned {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 8px 10px;
  margin-bottom: 8px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  border: 1px dashed color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: var(--radius-md, 8px);
}
.chat-widget-pinned-label {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
}
.chat-widget-msg.is-pinned {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.chat-widget-admin-kebab {
  position: relative;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
}
.chat-widget-msg-kebab {
  margin-left: 0;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
}
.chat-widget-admin-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  box-shadow: var(--shadow-md, 0 6px 18px rgba(0, 0, 0, 0.35));
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 4px;
  z-index: 60;
}
.chat-widget-admin-menu > button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  background: transparent;
  border: 0;
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
}
.chat-widget-admin-menu > button:hover,
.chat-widget-admin-menu > button:focus-visible {
  background: var(--surface-2);
  outline: none;
}
.chat-widget-admin-menu > button.danger {
  color: var(--bad, #ef5b5b);
}
.chat-widget-admin-menu > button.danger:hover {
  background: color-mix(in srgb, var(--bad, #ef5b5b) 12%, transparent);
}

.chat-widget-mute-menu {
  margin-top: 4px;
  padding: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chat-widget-mute-lead {
  margin: 0 0 2px;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.chat-widget-mute-error {
  margin: 0;
  padding: 4px 6px;
  border-radius: var(--radius-sm, 6px);
  background: color-mix(in srgb, var(--bad, #ef5b5b) 14%, transparent);
  color: var(--bad, #ef5b5b);
  font-size: 0.75rem;
}
.chat-widget-mute-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}
.chat-widget-mute-buttons .btn-quiet {
  width: 100%;
  text-align: center;
  font-size: 0.78rem;
  height: 28px;
  padding: 0 8px;
}
.chat-widget-mute-reason-label {
  display: block;
  margin-bottom: 4px;
}
.chat-widget-mute-reason {
  width: 100%;
  height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.78rem;
}
.chat-widget-mute-reason:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}

.chat-widget-mute-cancel {
  align-self: flex-end;
  font-size: 0.75rem;
  height: 26px;
  padding: 0 10px;
}

/* ===== /admin/chat panel ===== */
.admin-chat-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.admin-chat-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-chat-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.admin-chat-section-header h2 {
  margin: 0;
  font-size: 1.05rem;
}
.admin-chat-section-meta {
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.admin-chat-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
}
.admin-chat-table th,
.admin-chat-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.admin-chat-table tr:last-child th,
.admin-chat-table tr:last-child td {
  border-bottom: 0;
}
.admin-chat-table th {
  background: var(--surface-2);
  font-weight: 600;
  color: var(--ink-soft);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-chat-table td.numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.admin-chat-table td .chat-mod-action-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.admin-chat-table td .chat-mod-action-pill.danger {
  background: color-mix(in srgb, var(--bad, #ef5b5b) 15%, transparent);
  color: var(--bad, #ef5b5b);
}
.admin-chat-empty {
  padding: 24px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md, 8px);
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.chat-widget-muted-notice {
  border-top: 1px solid var(--border);
  padding: 12px 14px 14px;
  background: color-mix(in srgb, var(--bad, #ef5b5b) 6%, var(--surface));
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chat-widget-muted-title {
  margin: 0;
  font-weight: 600;
  color: var(--bad, #ef5b5b);
  font-size: 0.88rem;
}
.chat-widget-muted-detail {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
  line-height: 1.4;
}

/* ============================================================
 * MOBILE POLISH (≤640px / ≤720px) — desktop is intentionally untouched.
 * Every rule here lives inside a max-width media query so the
 * desktop layout — already audited and stable — never changes.
 *
 * Why each fix:
 *   - 16px input font-size: prevents iOS Safari from auto-zooming
 *     into the form on focus (it zooms whenever font-size < 16px).
 *   - 44px tap targets: WCAG 2.5.5 / Apple HIG minimum. The base
 *     style is 40px which fails the standard on touch devices.
 *   - Tables scroll horizontally instead of overflowing the viewport
 *     and breaking the rest of the layout.
 *   - Safe-area insets keep the sticky appbar clear of the iPhone
 *     notch and the chat puck clear of the home indicator.
 *   - Listing actions flex-grow so Copy / Save / Download fill the
 *     row evenly instead of leaving wasted whitespace.
 * ============================================================ */
@media (max-width: 640px) {
  /* iOS auto-zoom prevention — every interactive form control needs
     font-size: 16px on mobile or Safari zooms the page on focus. */
  .input,
  .textarea,
  .select,
  .search-input,
  .handle-input-row input,
  .newsletter-form input[type="email"],
  .bulk-bar-reason input,
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="url"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px;
  }

  /* 44×44 tap targets across every button family. Keeps the existing
     padding rules for layout, just floors the height. */
  .btn,
  .btn-primary,
  .btn-quiet,
  .btn-outline,
  .btn-icon,
  .btn-danger {
    min-height: 44px;
  }
  .btn-icon {
    min-width: 44px;
  }
  .btn-vote {
    min-height: 44px;
    padding: 10px 16px;
  }
  .btn-save {
    min-height: 44px;
  }

  /* Inline mod-kebab — 28px is too small to hit reliably. */
  .mod-kebab {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }

  /* Listing-detail action row: let the primary actions grow to fill
     the row instead of leaving an awkward gap before "More". */
  .listing-actions {
    padding: 12px;
    gap: 8px;
  }
  .listing-actions > .btn,
  .listing-actions > .btn-primary,
  .listing-actions > .btn-save {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }
  .listing-actions .vote-cluster {
    flex: 1 1 100%;
    justify-content: center;
  }
  .listing-actions .listing-more,
  .listing-actions .secondary-actions {
    margin-left: 0;
  }

  /* Frontmatter rows on the listing detail — the 110px label column
     leaves the value squashed on narrow screens. Stack instead. */
  .frontmatter .row {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  /* Card meta-grid: keep author + saves on the same row but allow the
     long handles to truncate instead of wrapping awkwardly. */
  .card-meta-grid .meta-author {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  /* iPhone notch / home-indicator safety. */
  .appbar {
    padding-top: max(10px, env(safe-area-inset-top));
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
  .chat-widget {
    bottom: max(12px, env(safe-area-inset-bottom));
    right: max(12px, env(safe-area-inset-right));
  }
  .site-footer {
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }

  /* ===== Top-down mobile layout =====
     The desktop hero is 72px+40px of vertical padding, a 2.7rem h1, a
     1.18rem lead, and two decorative backgrounds (::before spotlight +
     ::after dot-grid mask) — that's a marketing landing page. On a phone
     the user wants a feed they can scroll, with the actual MDs above the
     fold. Compact hard. */
  .hero {
    padding: 8px 0 12px;
  }
  .hero::before,
  .hero::after {
    display: none;
  }
  .hero h1 {
    font-size: 1.5rem;
    margin: 0 0 8px;
    line-height: 1.18;
    letter-spacing: -0.02em;
  }
  .hero .lead {
    font-size: 0.95rem;
    margin: 0 0 10px;
    line-height: 1.45;
    max-width: none;
  }
  .hero-eyebrow {
    font-size: 0.65rem;
    margin: 0 0 8px;
    letter-spacing: 0.18em;
  }
  .hero .btn-row {
    margin-top: 12px;
    gap: 8px;
  }
  .filename {
    margin-bottom: 6px;
    font-size: 0.7rem;
    padding: 3px 9px;
  }

  /* Daily pick — was a 24×28 padded card on a marketing page; now it's
     just the next item in the feed. */
  .daily-hero {
    padding: 14px 14px;
    border-radius: 12px;
  }
  .daily-hero h2,
  .daily-hero h1 {
    font-size: 1.15rem;
    margin: 0 0 6px;
    line-height: 1.25;
  }
  .daily-hero-lead {
    font-size: 0.92rem;
    margin: 0 0 8px;
  }
  .daily-hero-meta {
    font-size: 0.78rem;
    margin: 0 0 10px;
  }
  .daily-hero-eyebrow {
    font-size: 0.62rem;
    margin-bottom: 6px;
  }

  /* Document padding tightens so each section reads as the next row in
     a feed instead of leaving a poster-sized margin between them. */
  .document {
    padding-top: 12px;
    padding-bottom: 64px;
  }
  /* Footer no longer needs its big 48px top margin once the rest of the
     page has been compacted. */
  .site-footer {
    margin-top: 24px;
  }

  /* ===== iOS-native polish ===== */

  /* Tactile press feedback — every interactive surface lightly scales
     down on tap. Native iOS apps do this; without it, tapping a button
     feels web-y. 80ms ease-out matches UIKit's default highlight curve. */
  .btn:active,
  .btn-primary:active,
  .btn-quiet:active,
  .btn-outline:active,
  .btn-icon:active,
  .btn-danger:active,
  .btn-vote:active,
  .btn-save:active,
  .mod-kebab:active,
  .kebab-btn:active,
  .card:active,
  .bookmarks-item-link:active {
    transform: scale(0.97);
    transition: transform 80ms ease-out;
  }
  /* Honour reduced-motion: drop the scale, keep the press visible via
     a shorter opacity dip instead. */
  @media (prefers-reduced-motion: reduce) {
    .btn:active,
    .btn-primary:active,
    .btn-quiet:active,
    .btn-outline:active,
    .btn-icon:active,
    .btn-danger:active,
    .btn-vote:active,
    .btn-save:active,
    .mod-kebab:active,
    .kebab-btn:active,
    .card:active,
    .bookmarks-item-link:active {
      transform: none;
      opacity: 0.7;
    }
  }

  /* Disable the default rubber-band bounce on the body itself so a stray
     vertical drag inside the appbar / modals doesn't pull the whole page
     out of place. Inner scrollers (markdown-body, lists) keep momentum. */
  body {
    overscroll-behavior-y: none;
  }
  .modal-backdrop,
  .mod-menu,
  .listing-more-popover,
  .notif-popover,
  .theme-popover,
  .bookmarks-move-popover {
    overscroll-behavior: contain;
  }

  /* Native momentum scrolling on the long readable surfaces. Safari needs
     the prefixed property; Chromium ignores it harmlessly. */
  .markdown-body,
  .listing-detail,
  .bookmarks-list,
  .admin-queue,
  .chat-widget-stream {
    -webkit-overflow-scrolling: touch;
  }

  /* iOS-style bottom action sheet for the moderation kebab. The desktop
     dropdown is unusable on phones — too small, off-screen on right-edge
     cards, and disconnected from the thumb. Slide a full-width sheet up
     from the bottom with a grabber, frosted backdrop, and home-indicator
     safe-area padding. The existing click-outside handler in app.js
     closes it; we layer a CSS-only backdrop via ::before that absorbs
     pointer-events on the rest of the page. */
  .mod-kebab-host.open .mod-menu {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 8px 12px max(20px, env(safe-area-inset-bottom));
    border-radius: 18px 18px 0 0;
    border: 0;
    border-top: 1px solid var(--border);
    background: var(--surface);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
    z-index: 1000;
    animation: mod-sheet-in 220ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  /* Grabber bar — the little rounded pill iOS sheets always have at the
     top. CSS-only via ::before so we don't change the markup. */
  .mod-kebab-host.open .mod-menu::before {
    content: "";
    display: block;
    width: 36px;
    height: 5px;
    margin: 4px auto 10px;
    border-radius: 999px;
    background: var(--ink-soft);
    opacity: 0.35;
  }
  /* Backdrop — covers the rest of the screen, soft-blurs the content
     behind, taps fall through to the global click-outside handler. */
  .mod-kebab-host.open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 999;
    animation: mod-sheet-fade-in 200ms ease-out;
  }
  /* Sheet menu items grow to native iOS row height (44pt) and use a
     larger font so they feel like a proper action sheet, not a desktop
     popover squished onto a phone. */
  .mod-kebab-host.open .mod-menu button {
    min-height: 48px;
    font-size: 1rem;
    padding: 12px 14px;
    border-radius: 10px;
  }
  @keyframes mod-sheet-in {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }
  @keyframes mod-sheet-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .mod-kebab-host.open .mod-menu,
    .mod-kebab-host.open::before {
      animation: none;
    }
  }
}

/* Tables — admin queue + users + chat — overflow the viewport at the
   default desktop column widths. Wrap them in a horizontal scroll
   container at tablet width so the layout above and below stays
   readable. Applied at 720px (not 640) because the multi-column
   admin tables get unusable well before phone widths. */
@media (max-width: 720px) {
  .admin-queue,
  .admin-users-table,
  .admin-users-all-table,
  .admin-chat-table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}