@layer reset, tokens, base, layout, components, views, utilities;

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html,
  body {
    height: 100%;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
  }

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

  button {
    border: 0;
    padding: 0;
    background: none;
    cursor: pointer;
  }

  a {
    color: var(--link);
    text-decoration: none;
  }

  ul,
  ol {
    list-style: none;
    padding: 0;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  dialog {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
  }

  [hidden] {
    display: none !important;
  }

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

  ::selection {
    background: color-mix(in oklab, var(--accent) 35%, transparent);
    color: var(--text);
  }

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

/* --------------------------------------------------------------------------
   Design tokens — Catppuccin
   -------------------------------------------------------------------------- */
@layer tokens {
  :root {
    --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    --text-10: calc(10px * var(--fs, 1));
    --text-11: calc(11px * var(--fs, 1));
    --text-12: calc(12px * var(--fs, 1));
    --text-13: calc(13px * var(--fs, 1));
    --text-14: calc(14px * var(--fs, 1));
    --text-16: calc(16px * var(--fs, 1));
    --text-18: calc(18px * var(--fs, 1));
    --text-20: calc(20px * var(--fs, 1));
    --text-24: calc(24px * var(--fs, 1));
    --text-32: calc(32px * var(--fs, 1));
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;

    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 999px;

    --topbar-h: 60px;
    --rail-w: 72px;
    --column-w: 380px;
    --header-h: 52px;

    --dur-1: 120ms;
    --dur-2: 180ms;
    --dur-3: 260ms;
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.12);
    --shadow-2: 0 18px 50px rgb(0 0 0 / 0.32), 0 2px 8px rgb(0 0 0 / 0.18);
    --shadow-3: 0 28px 80px rgb(0 0 0 / 0.45), 0 4px 16px rgb(0 0 0 / 0.25);

    --ctp-rosewater: #f5e0dc;
    --ctp-flamingo: #f2cdcd;
    --ctp-pink: #f5c2e7;
    --ctp-mauve: #cba6f7;
    --ctp-red: #f38ba8;
    --ctp-maroon: #eba0ac;
    --ctp-peach: #fab387;
    --ctp-yellow: #f9e2af;
    --ctp-green: #a6e3a1;
    --ctp-teal: #94e2d5;
    --ctp-sky: #89dceb;
    --ctp-sapphire: #74c7ec;
    --ctp-blue: #89b4fa;
    --ctp-lavender: #b4befe;
    --ctp-text: #cdd6f4;
    --ctp-subtext1: #bac2de;
    --ctp-subtext0: #a6adc8;
    --ctp-overlay2: #9399b2;
    --ctp-overlay1: #7f849c;
    --ctp-overlay0: #6c7086;
    --ctp-surface2: #585b70;
    --ctp-surface1: #45475a;
    --ctp-surface0: #313244;
    --ctp-base: #1e1e2e;
    --ctp-mantle: #181825;
    --ctp-crust: #11111b;

    --bg: var(--ctp-crust);
    --surface: var(--ctp-base);
    --surface-2: var(--ctp-mantle);
    --surface-3: var(--ctp-surface0);
    --surface-4: var(--ctp-surface1);
    --text: var(--ctp-text);
    --text-soft: var(--ctp-subtext1);
    --muted: var(--ctp-subtext0);
    /* Faint text still meets WCAG AA: a step below --muted, never below 4.5:1. */
    --faint: color-mix(in oklab, var(--muted) 90%, var(--surface));
    --border: color-mix(in oklab, var(--ctp-surface1) 68%, transparent);
    --border-strong: var(--ctp-surface1);
    --hover: color-mix(in oklab, var(--text) 6%, transparent);
    --active: color-mix(in oklab, var(--text) 10%, transparent);
    --scrim: color-mix(in oklab, var(--ctp-crust) 72%, transparent);

    --accent: var(--ctp-mauve);
    --accent-2: var(--ctp-blue);
    --accent-soft: color-mix(in oklab, var(--accent) 16%, transparent);
    --accent-softer: color-mix(in oklab, var(--accent) 8%, transparent);
    --on-accent: var(--ctp-crust);
    --on-danger: var(--ctp-crust);
    --link: var(--ctp-blue);
    --success: var(--ctp-green);
    --warning: var(--ctp-yellow);
    --danger: var(--ctp-red);
    --info: var(--ctp-sapphire);
    --boost: var(--ctp-green);
    --favourite: var(--ctp-yellow);
    --mention: var(--ctp-blue);
    --quote: var(--ctp-mauve);

    --scrollbar-thumb: color-mix(in oklab, var(--faint) 55%, transparent);
    --scrollbar-track: transparent;

    color-scheme: dark;
    accent-color: var(--accent);
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
@layer base {
  html {
    background: var(--bg);
  }

  body {
    font-family: var(--font-sans);
    font-size: var(--text-14);
    color: var(--text);
    background: var(--bg);
    overflow: hidden;
  }

  body,
  button,
  input,
  textarea,
  select {
    font-family: var(--font-sans);
  }

  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }

  ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border: 3px solid transparent;
    border-radius: var(--radius-full);
    background-clip: padding-box;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--faint);
    border: 3px solid transparent;
    background-clip: padding-box;
  }

  * {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
  }

  .icon {
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
  }

  .icon--brand {
    width: 24px;
    height: 24px;
    stroke-width: 1.7;
  }

  .icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }

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

  .skip-link {
    position: fixed;
    top: var(--sp-3);
    left: var(--sp-3);
    z-index: 5000;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 650;
    transform: translateY(-200%);
    transition: transform var(--dur-2) var(--ease);
  }

  .skip-link:focus {
    transform: translateY(0);
  }

  .spinner {
    width: 18px;
    height: 18px;
    border: 2px solid color-mix(in oklab, var(--accent) 25%, transparent);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex: none;
  }

  .spinner--large {
    width: 30px;
    height: 30px;
    border-width: 3px;
  }

  @keyframes spin {
    to {
      transform: rotate(1turn);
    }
  }

  .noscript {
    position: fixed;
    inset: var(--sp-4);
    display: grid;
    place-items: center;
    padding: var(--sp-6);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    text-align: left;
  }

  .brand-mark {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: var(--radius-sm);
    color: var(--accent);
    background: var(--accent-soft);
  }

  .brand-mark--large {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
  }

  .brand-mark--large .icon--brand {
    width: 34px;
    height: 34px;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--text);
    flex: none;
  }

  .brand:hover .brand-mark {
    background: color-mix(in oklab, var(--accent) 24%, transparent);
  }

  .brand-name {
    font-size: var(--text-16);
    font-weight: 750;
    letter-spacing: -0.03em;
  }

  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }

  .row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
  }
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
@layer layout {
  .app-shell {
    display: grid;
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
    grid-template-rows: var(--topbar-h) minmax(0, 1fr);
    height: 100dvh;
    background: var(--bg);
  }

  .topbar {
    grid-column: 1 / -1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    min-width: 0;
    padding: 0 var(--sp-4);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    z-index: 20;
  }

  .topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    margin-left: auto;
    flex: none;
  }

  .rail {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-2);
    background: var(--surface-2);
    border-right: 1px solid var(--border);
    min-height: 0;
    overflow-y: auto;
    z-index: 10;
  }

  .rail-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-1);
    width: 100%;
  }

  .rail-spacer {
    flex: 1;
  }

  .columns {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    align-items: stretch;
    gap: var(--sp-3);
    min-width: 0;
    min-height: 0;
    padding: var(--sp-3) var(--sp-4);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-gutter: stable;
  }

  .column {
    display: flex;
    flex-direction: column;
    flex: 0 0 var(--column-w);
    width: var(--column-w);
    min-width: 0;
    min-height: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
    overflow: hidden;
    scroll-snap-align: start;
    contain: layout paint;
  }

  .column-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    height: var(--header-h);
    flex: 0 0 auto;
    padding: 0 var(--sp-2) 0 var(--sp-4);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    z-index: 2;
  }

  .column-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
    font-size: var(--text-14);
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  .column-title .icon {
    width: 18px;
    height: 18px;
    color: var(--muted);
  }

  .column-title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .column-subtitle {
    font-size: var(--text-12);
    font-weight: 500;
    color: var(--faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .column-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    flex: none;
  }

  .column-body {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
    position: relative;
  }

  .feed {
    display: flex;
    flex-direction: column;
  }

  .feed-sentinel {
    height: 1px;
    flex: none;
  }

  .feed-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-4);
    color: var(--muted);
    font-size: var(--text-12);
  }

  .feed-end {
    padding: var(--sp-4) var(--sp-4);
    text-align: left;
    color: var(--faint);
    font-size: var(--text-12);
  }

  .column-skeleton {
    padding: var(--sp-4);
    border-bottom: 1px solid var(--border);
  }

  .column-skeleton-row {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: var(--sp-3);
  }

  .skeleton {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xs);
    background: var(--surface-3);
  }

  .skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--text) 8%, transparent), transparent);
    transform: translateX(-100%);
    animation: shimmer 1.4s infinite;
  }

  .skeleton--avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
  }

  .skeleton--line {
    height: 10px;
    margin-bottom: var(--sp-2);
  }

  .skeleton--line:last-child {
    margin-bottom: 0;
  }

  .skeleton--w-40 {
    width: 40%;
  }

  .skeleton--w-60 {
    width: 60%;
  }

  .skeleton--w-85 {
    width: 85%;
  }

  @keyframes shimmer {
    100% {
      transform: translateX(100%);
    }
  }
}

/* --------------------------------------------------------------------------
   Components
   -------------------------------------------------------------------------- */
@layer components {
  .icon-button {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: var(--radius-sm);
    color: var(--muted);
    transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
  }

  .icon-button:hover {
    color: var(--text);
    background: var(--hover);
  }

  .icon-button:active {
    transform: scale(0.94);
  }

  .icon-button[aria-expanded="true"],
  .icon-button[aria-pressed="true"],
  .icon-button.is-active {
    color: var(--accent);
    background: var(--accent-soft);
  }

  .icon-button--danger {
    color: var(--danger);
  }

  .icon-button--danger:hover {
    color: var(--danger);
    background: color-mix(in oklab, var(--danger) 12%, transparent);
  }

  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    height: 36px;
    padding: 0 var(--sp-4);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: var(--text-13);
    font-weight: 650;
    line-height: 1;
    color: var(--text);
    background: var(--surface-3);
    transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
    white-space: nowrap;
  }

  .button:hover {
    background: var(--surface-4);
  }

  .button:active {
    transform: translateY(1px);
  }

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

  .button .icon {
    width: 17px;
    height: 17px;
  }

  .button--primary {
    color: var(--on-accent);
    background: var(--accent);
    border-color: color-mix(in oklab, var(--accent) 70%, var(--text));
  }

  .button--primary:hover {
    background: color-mix(in oklab, var(--accent) 86%, var(--text));
  }

  .button--ghost {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--text-soft);
  }

  .button--ghost:hover {
    background: var(--hover);
    color: var(--text);
  }

  .button--danger {
    color: var(--danger);
    background: color-mix(in oklab, var(--danger) 12%, transparent);
    border-color: color-mix(in oklab, var(--danger) 28%, transparent);
  }

  .button--danger:hover {
    background: color-mix(in oklab, var(--danger) 20%, transparent);
  }

  .button--small {
    height: 30px;
    padding: 0 var(--sp-3);
    font-size: var(--text-12);
    border-radius: var(--radius-sm);
  }

  .button--small .icon {
    width: 15px;
    height: 15px;
  }

  .button--block {
    width: 100%;
  }

  .button--link {
    height: auto;
    padding: 0;
    background: none;
    color: var(--link);
    font-weight: 600;
  }

  .button--link:hover {
    background: none;
    text-decoration: underline;
  }

  .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 var(--sp-1);
    border-radius: var(--radius-full);
    background: var(--danger);
    color: var(--on-danger);
    font-size: var(--text-11);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }

  .badge--dot {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 8px;
    height: 8px;
    min-width: 0;
    padding: 0;
    border: 2px solid var(--surface-2);
    background: var(--danger);
  }

  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    height: 24px;
    padding: 0 var(--sp-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--surface-2);
    color: var(--muted);
    font-size: var(--text-12);
    font-weight: 600;
    white-space: nowrap;
  }

  .chip .icon {
    width: 13px;
    height: 13px;
  }

  .chip--danger {
    color: var(--danger);
    border-color: color-mix(in oklab, var(--danger) 35%, transparent);
    background: color-mix(in oklab, var(--danger) 10%, transparent);
  }

  .chip--success {
    color: var(--success);
    border-color: color-mix(in oklab, var(--success) 35%, transparent);
    background: color-mix(in oklab, var(--success) 10%, transparent);
  }

  .chip--accent {
    color: var(--accent);
    border-color: color-mix(in oklab, var(--accent) 35%, transparent);
    background: color-mix(in oklab, var(--accent) 10%, transparent);
  }

  .chip--warning {
    color: var(--warning);
    border-color: color-mix(in oklab, var(--warning) 35%, transparent);
    background: color-mix(in oklab, var(--warning) 10%, transparent);
  }

  .avatar {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--surface-3);
    color: var(--muted);
    font-size: var(--text-16);
    font-weight: 750;
    text-transform: uppercase;
    user-select: none;
  }

  .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .avatar--24 {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    font-size: var(--text-10);
  }

  .avatar--28 {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    font-size: var(--text-11);
  }

  .avatar--32 {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    font-size: var(--text-12);
  }

  .avatar--36 {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    font-size: var(--text-13);
  }

  .avatar--48 {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    font-size: var(--text-18);
  }

  .avatar--64 {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    font-size: var(--text-20);
  }

  .avatar--96 {
    width: 96px;
    height: 96px;
    border-radius: var(--radius-xl);
    font-size: var(--text-32);
  }

  .avatar-button {
    display: inline-flex;
    border-radius: var(--radius-md);
    transition: box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
  }

  .avatar-button:hover {
    box-shadow: 0 0 0 2px var(--accent);
  }

  .avatar-button:active {
    transform: scale(0.96);
  }

  .avatar-button--topbar {
    margin-left: var(--sp-1);
  }

  .field {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    width: 100%;
    height: 40px;
    padding: 0 var(--sp-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--faint);
    transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
  }

  .field:focus-within {
    border-color: color-mix(in oklab, var(--accent) 70%, var(--border-strong));
    box-shadow: 0 0 0 3px var(--accent-softer);
    background: var(--surface);
  }

  .field .icon {
    width: 17px;
    height: 17px;
    color: var(--faint);
  }

  .field input,
  .field textarea {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-size: var(--text-14);
  }

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

  .field--search {
    height: 42px;
  }

  .field--textarea {
    align-items: flex-start;
    height: auto;
    min-height: 84px;
    padding: var(--sp-2) var(--sp-3);
  }

  .field--textarea textarea {
    min-height: 64px;
    resize: vertical;
    line-height: 1.5;
  }

  .select {
    height: 34px;
    padding: 0 28px 0 var(--sp-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background-color: var(--surface-2);
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 14px) 14px, calc(100% - 9px) 14px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    color: var(--text-soft);
    font-size: var(--text-13);
    font-weight: 600;
    appearance: none;
    cursor: pointer;
  }

  .select:focus {
    outline: 0;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-softer);
  }

  .select--small {
    height: 30px;
    padding-right: 24px;
    background-position: calc(100% - 12px) 12px, calc(100% - 7px) 12px;
    font-size: var(--text-12);
  }

  .checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--muted);
    font-size: var(--text-13);
    cursor: pointer;
    user-select: none;
  }

  .checkbox input {
    width: 15px;
    height: 15px;
    accent-color: var(--accent);
  }

  .form-error {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid color-mix(in oklab, var(--danger) 35%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in oklab, var(--danger) 10%, transparent);
    color: var(--danger);
    font-size: var(--text-13);
    line-height: 1.45;
  }

  .form-hint {
    color: var(--faint);
    font-size: var(--text-12);
    line-height: 1.45;
  }

  .rail-button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    width: 54px;
    height: 52px;
    flex: none;
    border-radius: var(--radius-md);
    color: var(--faint);
    transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
  }

  .rail-button:hover {
    color: var(--text);
    background: var(--hover);
  }

  .rail-button.is-active {
    color: var(--accent);
    background: var(--accent-soft);
  }

  .rail-button .icon {
    width: 20px;
    height: 20px;
  }

  .rail-label {
    font-size: var(--text-10);
    font-weight: 650;
    line-height: 1;
    letter-spacing: 0.01em;
  }

  .rail-button .badge--dot {
    top: 8px;
    right: 10px;
  }

  .menu-popover {
    position: fixed;
    z-index: 3000;
    min-width: 210px;
    max-width: min(300px, calc(100vw - 16px));
    margin: 0;
    padding: var(--sp-1);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-2);
    inset: auto;
  }

  .menu-popover:popover-open {
    animation: menu-in var(--dur-1) var(--ease);
  }

  @keyframes menu-in {
    from {
      opacity: 0;
      transform: translateY(-4px) scale(0.98);
    }
  }

  .menu-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    width: 100%;
    min-height: 34px;
    padding: var(--sp-2) var(--sp-2);
    border-radius: var(--radius-sm);
    color: var(--text-soft);
    font-size: var(--text-13);
    font-weight: 550;
    text-align: left;
    transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
  }

  .menu-item:hover,
  .menu-item:focus-visible {
    background: var(--hover);
    color: var(--text);
    outline: 0;
  }

  .menu-item .icon {
    width: 16px;
    height: 16px;
    color: var(--faint);
  }

  .menu-item:hover .icon {
    color: var(--text-soft);
  }

  .menu-item--danger {
    color: var(--danger);
  }

  .menu-item--danger .icon {
    color: var(--danger);
  }

  .menu-item--danger:hover {
    background: color-mix(in oklab, var(--danger) 12%, transparent);
    color: var(--danger);
  }

  .menu-separator {
    height: 1px;
    margin: var(--sp-1) 0;
    background: var(--border);
  }

  .menu-label {
    padding: var(--sp-2) var(--sp-2) var(--sp-1);
    color: var(--faint);
    font-size: var(--text-10);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .toasts {
    position: fixed;
    right: var(--sp-4);
    bottom: var(--sp-4);
    z-index: 4000;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    width: min(360px, calc(100vw - 32px));
    pointer-events: none;
  }

  .toast {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: color-mix(in oklab, var(--surface) 94%, transparent);
    color: var(--text-soft);
    box-shadow: var(--shadow-2);
    backdrop-filter: blur(12px);
    font-size: var(--text-13);
    line-height: 1.45;
    pointer-events: auto;
    animation: toast-in var(--dur-2) var(--ease);
  }

  .toast.is-leaving {
    animation: toast-out var(--dur-2) var(--ease) forwards;
  }

  .toast .icon {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    flex: none;
    color: var(--info);
  }

  .toast--success .icon {
    color: var(--success);
  }

  .toast--error {
    border-color: color-mix(in oklab, var(--danger) 40%, transparent);
  }

  .toast--error .icon {
    color: var(--danger);
  }

  .toast--warning .icon {
    color: var(--warning);
  }

  @keyframes toast-in {
    from {
      opacity: 0;
      transform: translateY(8px) scale(0.98);
    }
  }

  @keyframes toast-out {
    to {
      opacity: 0;
      transform: translateY(6px) scale(0.98);
    }
  }

  .dialog-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    height: var(--header-h);
    flex: 0 0 auto;
    padding: 0 var(--sp-2) 0 var(--sp-4);
    border-bottom: 1px solid var(--border);
  }

  .dialog-heading {
    min-width: 0;
    flex: 1;
  }

  .dialog-title {
    font-size: var(--text-16);
    font-weight: 700;
    letter-spacing: -0.015em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dialog-subtitle {
    margin-top: 1px;
    color: var(--faint);
    font-size: var(--text-12);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dialog-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    flex: none;
  }

  .dialog-body {
    flex: 1;
    min-height: 0;
    padding: var(--sp-4);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .dialog-body--flush {
    padding: 0;
  }

  .dialog-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-2);
    flex: 0 0 auto;
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--border);
    background: var(--surface);
  }

  .tabs {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-2) var(--sp-4);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tabs::-webkit-scrollbar {
    display: none;
  }

  .tab {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    height: 32px;
    padding: 0 var(--sp-3);
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: var(--text-13);
    font-weight: 650;
    white-space: nowrap;
    transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
  }

  .tab:hover {
    color: var(--text);
    background: var(--hover);
  }

  .tab[aria-selected="true"] {
    color: var(--accent);
    background: var(--accent-soft);
  }

  .tab .icon {
    width: 15px;
    height: 15px;
  }

  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-8) var(--sp-4);
    text-align: center;
    color: var(--muted);
  }

  .empty-state .icon {
    width: 32px;
    height: 32px;
    margin-bottom: var(--sp-1);
    color: var(--faint);
    opacity: 0.8;
  }

  .empty-state-title {
    color: var(--text-soft);
    font-size: var(--text-14);
    font-weight: 650;
  }

  .empty-state-text {
    max-width: 30ch;
    font-size: var(--text-12);
    line-height: 1.5;
    color: var(--faint);
  }

  .divider {
    height: 1px;
    background: var(--border);
    margin: var(--sp-4) 0;
  }

  .error-card {
    margin: var(--sp-4);
    padding: var(--sp-4);
    border: 1px solid color-mix(in oklab, var(--danger) 35%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in oklab, var(--danger) 8%, transparent);
    color: var(--text-soft);
    font-size: var(--text-13);
    line-height: 1.5;
  }

  .error-card .row {
    margin-top: var(--sp-3);
  }

  .list-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
  }

  .switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 40px;
    height: 24px;
    flex: none;
    border-radius: var(--radius-full);
    background: var(--surface-4);
    transition: background var(--dur-2) var(--ease);
    cursor: pointer;
  }

  .switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--text);
    transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
  }

  .switch[aria-checked="true"] {
    background: var(--accent);
  }

  .switch[aria-checked="true"]::after {
    transform: translateX(16px);
    background: var(--on-accent);
  }

  .progress-line {
    height: 3px;
    overflow: hidden;
    border-radius: var(--radius-full);
    background: var(--surface-3);
  }

  .progress-line > span {
    display: block;
    height: 100%;
    width: var(--progress, 0%);
    border-radius: inherit;
    background: var(--accent);
    transition: width var(--dur-2) var(--ease);
  }
}

/* --------------------------------------------------------------------------
   Boot & login
   -------------------------------------------------------------------------- */
@layer views {
  .boot-view {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: var(--sp-6);
    background: var(--bg);
  }

  /* Flat: the elephant and a spinner. Text only appears for errors. */
  .boot-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-4);
    width: min(360px, 100%);
    text-align: center;
  }

  .boot-text {
    color: var(--muted);
    font-size: var(--text-13);
  }

  .boot-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
  }

  .login-view {
    height: 100dvh;
    overflow-y: auto;
    display: grid;
    place-items: center;
    padding: var(--sp-6) var(--sp-4);
    isolation: isolate;
    background: var(--bg);
  }

  /* Soft glows on two layers drifting in opposite directions; only transform moves, so it stays on the compositor. */
  .login-view::before,
  .login-view::after {
    content: '';
    position: fixed;
    inset: -25%;
    z-index: -1;
    pointer-events: none;
    animation: login-drift 28s ease-in-out infinite alternate;
  }

  .login-view::before {
    background:
      radial-gradient(30% 28% at 30% 30%, color-mix(in oklab, var(--accent) 24%, transparent), transparent 70%),
      radial-gradient(24% 24% at 68% 32%, color-mix(in oklab, var(--ctp-teal) 14%, transparent), transparent 70%);
  }

  .login-view::after {
    background: radial-gradient(30% 28% at 68% 70%, color-mix(in oklab, var(--accent-2) 20%, transparent), transparent 70%);
    animation-name: login-drift-back;
    animation-duration: 34s;
  }

  @keyframes login-drift {
    to {
      transform: translate3d(12%, 8%, 0) rotate(14deg);
    }
  }

  @keyframes login-drift-back {
    to {
      transform: translate3d(-12%, -9%, 0) rotate(-10deg);
    }
  }

  .login-shell {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    width: min(720px, 100%);
    margin: auto;
  }

  .login-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4);
    text-align: left;
  }

  .login-brand-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .login-name {
    font-size: var(--text-32);
    font-weight: 850;
    line-height: 1;
    letter-spacing: -0.055em;
  }

  .login-tagline {
    color: var(--muted);
    font-size: var(--text-13);
  }

  .login-card {
    padding: var(--sp-6);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-2xl);
    background: color-mix(in oklab, var(--surface) 94%, transparent);
    box-shadow: var(--shadow-2);
    backdrop-filter: blur(18px);
  }

  .login-card-head {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    margin-bottom: var(--sp-4);
  }

  .login-title {
    font-size: var(--text-18);
    font-weight: 750;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  .login-subtitle {
    color: var(--muted);
    font-size: var(--text-13);
    line-height: 1.5;
  }

  .login-intro {
    color: var(--text-soft);
    font-size: var(--text-14);
    line-height: 1.6;
  }

  .login-choices {
    display: grid;
    gap: var(--sp-2);
  }

  .login-choice {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    text-align: left;
  }

  .login-choice:hover {
    border-color: color-mix(in oklab, var(--accent) 55%, var(--border));
    background: var(--surface-3);
  }

  .login-choice > .icon:first-child {
    flex: none;
    width: 22px;
    height: 22px;
    color: var(--accent);
  }

  .login-choice > span {
    display: grid;
    flex: 1;
    gap: 2px;
  }

  .login-choice > span > span {
    color: var(--muted);
    font-size: var(--text-13);
  }

  .login-hint {
    margin-top: var(--sp-2);
    padding: var(--sp-3);
    border-radius: var(--radius-md);
    background: var(--accent-soft);
    color: var(--text-soft);
    font-size: var(--text-13);
    line-height: 1.55;
  }

  .login-step-back {
    align-self: flex-start;
    margin-bottom: var(--sp-2);
  }

  a.server-card {
    color: inherit;
    text-decoration: none;
  }

  .login-register-done {
    width: 100%;
    margin-top: var(--sp-3);
  }

  .server-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2);
    max-height: 330px;
    margin-top: var(--sp-3);
    padding: 2px;
    overflow-y: auto;
    scrollbar-gutter: stable;
  }

  .server-card {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-width: 0;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    text-align: left;
    transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
  }

  .server-card:hover {
    border-color: color-mix(in oklab, var(--accent) 55%, var(--border));
    background: var(--surface-3);
    transform: translateY(-1px);
  }

  .server-card:active {
    transform: translateY(0);
  }

  .server-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    color: var(--accent);
    font-size: var(--text-14);
    font-weight: 800;
    text-transform: uppercase;
  }

  .server-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .server-info {
    min-width: 0;
    flex: 1;
  }

  .server-name {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    color: var(--text);
    font-size: var(--text-13);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .server-desc {
    margin-top: 1px;
    color: var(--faint);
    font-size: var(--text-11);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .server-meta {
    margin-top: 2px;
    color: var(--faint);
    font-size: var(--text-10);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .server-card .icon {
    width: 15px;
    height: 15px;
    color: var(--faint);
    flex: none;
  }

  .server-skeleton {
    height: 58px;
    border-radius: var(--radius-md);
    background: var(--surface-2);
    position: relative;
    overflow: hidden;
  }

  .server-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--text) 7%, transparent), transparent);
    transform: translateX(-100%);
    animation: shimmer 1.4s infinite;
  }

  .login-divider {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin: var(--sp-4) 0;
    color: var(--faint);
    font-size: var(--text-11);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .login-divider::before,
  .login-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--border);
  }

  .custom-server {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-2);
  }

  .login-note {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
    color: var(--faint);
    font-size: var(--text-11);
    line-height: 1.45;
  }

  .login-note .icon {
    width: 14px;
    height: 14px;
    margin-top: 1px;
    color: var(--muted);
    flex: none;
  }

  .login-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    color: var(--faint);
    font-size: var(--text-11);
    text-align: left;
  }

  .login-connect {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-8) var(--sp-4);
    text-align: left;
  }

  .login-connect .login-title {
    font-size: var(--text-18);
  }

  /* Topbar and rail details */
  .topbar .brand {
    min-width: 0;
  }

  .topbar .brand-name {
    transition: opacity var(--dur-2) var(--ease);
  }

  /* Status cards */
  .status {
    position: relative;
    padding: var(--sp-4);
    border-bottom: 1px solid var(--border);
    content-visibility: auto;
    contain-intrinsic-size: auto 190px;
    transition: background var(--dur-1) var(--ease);
  }

  .status:hover {
    background: color-mix(in oklab, var(--text) 2.5%, transparent);
  }

  .status:last-child {
    border-bottom: 0;
  }

  .status-boost {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    margin: 0 0 var(--sp-2) 52px;
    color: var(--muted);
    font-size: var(--text-12);
    font-weight: 550;
    line-height: 1.3;
  }

  .status-boost .icon {
    width: 14px;
    height: 14px;
    color: var(--boost);
  }

  .status-boost button {
    color: var(--text-soft);
    font-weight: 650;
  }

  .status-boost button:hover {
    color: var(--accent);
    text-decoration: underline;
  }

  .status-head {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    min-width: 0;
  }

  .status-author {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--sp-1);
    min-width: 0;
    flex: 1;
  }

  /* Link text shows a different address than the target: flagged, and opening asks first. */
  .link-mismatch {
    text-decoration: underline wavy var(--warning);
  }

  .status-author .chip {
    align-self: center;
    height: 18px;
    padding: 0 6px;
    font-size: var(--text-11);
  }

  .status-name {
    max-width: 100%;
    color: var(--text);
    font-size: var(--text-14);
    font-weight: 700;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .status-name:hover {
    color: var(--accent);
  }

  .status-acct {
    max-width: 100%;
    color: var(--faint);
    font-size: var(--text-12);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .status-meta {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    flex: none;
    margin-left: auto;
    padding-top: 1px;
    color: var(--faint);
    font-size: var(--text-11);
  }

  .status-time {
    color: var(--faint);
    font-variant-numeric: tabular-nums;
  }

  .status-time:hover {
    color: var(--link);
    text-decoration: underline;
  }

  .status-visibility {
    display: inline-flex;
    align-items: center;
    color: var(--faint);
  }

  .status-visibility .icon {
    width: 13px;
    height: 13px;
  }

  .status-menu {
    width: 26px;
    height: 26px;
    margin: -4px -4px 0 0;
    color: var(--faint);
  }

  .status-menu .icon {
    width: 17px;
    height: 17px;
  }

  .status-content {
    margin-top: var(--sp-2);
    color: var(--text-soft);
    font-size: var(--text-14);
    line-height: 1.55;
    overflow-wrap: anywhere;
    text-wrap: pretty;
  }

  .status-content.is-collapsed {
    display: none;
  }

  .status-content p {
    margin: 0 0 0.6em;
  }

  .status-content p:last-child {
    margin-bottom: 0;
  }

  .status-content a {
    color: var(--link);
    text-decoration: none;
  }

  .status-content a:hover {
    text-decoration: underline;
  }

  .status-content .mention {
    color: var(--accent);
    font-weight: 600;
  }

  .status-content .hashtag {
    color: var(--link);
    font-weight: 500;
  }

  .status-content .invisible {
    display: none;
  }

  .status-content .ellipsis::after {
    content: "…";
  }

  .status-content strong,
  .status-content b {
    color: var(--text);
    font-weight: 700;
  }

  .status-content em,
  .status-content i {
    font-style: italic;
  }

  .status-content del,
  .status-content s {
    opacity: 0.7;
  }

  .status-content code {
    padding: 0.1em 0.35em;
    border-radius: var(--radius-xs);
    background: var(--surface-3);
    color: var(--ctp-peach);
    font-family: var(--font-mono);
    font-size: 0.88em;
  }

  .status-content pre {
    margin: var(--sp-2) 0;
    padding: var(--sp-3);
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    font-family: var(--font-mono);
    font-size: var(--text-12);
    line-height: 1.5;
  }

  .status-content pre code {
    padding: 0;
    background: none;
    color: var(--text-soft);
  }

  .status-content blockquote {
    margin: var(--sp-2) 0;
    padding-left: var(--sp-3);
    border-left: 3px solid var(--accent);
    color: var(--muted);
  }

  .status-content ul,
  .status-content ol {
    margin: var(--sp-2) 0;
    padding-left: var(--sp-4);
  }

  .status-content ul {
    list-style: disc;
  }

  .status-content ol {
    list-style: decimal;
  }

  .status-content li {
    margin: 2px 0;
  }

  .status-content img.custom-emoji,
  .status-content img.emojione {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    margin: 0 0.05em;
    vertical-align: -0.22em;
    object-fit: contain;
  }

  .status-content hr {
    height: 1px;
    margin: var(--sp-3) 0;
    border: 0;
    background: var(--border);
  }

  .status-content h1,
  .status-content h2,
  .status-content h3 {
    margin: var(--sp-3) 0 var(--sp-1);
    color: var(--text);
    font-size: 1.05em;
    font-weight: 750;
  }

  .status-content h1:first-child,
  .status-content h2:first-child,
  .status-content h3:first-child {
    margin-top: 0;
  }

  .status-cw {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
  }

  .status-cw-head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--warning);
    font-size: var(--text-13);
    font-weight: 650;
    line-height: 1.4;
  }

  .status-cw-head .icon {
    width: 15px;
    height: 15px;
    flex: none;
  }

  .status-cw-toggle {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    height: 26px;
    padding: 0 var(--sp-2);
    border-radius: var(--radius-xs);
    background: color-mix(in oklab, var(--warning) 12%, transparent);
    color: var(--warning);
    font-size: var(--text-12);
    font-weight: 650;
  }

  .status-cw-toggle:hover {
    background: color-mix(in oklab, var(--warning) 20%, transparent);
  }

  .status-cw-toggle .icon {
    width: 13px;
    height: 13px;
  }

  .status-filter {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid color-mix(in oklab, var(--warning) 28%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in oklab, var(--warning) 8%, transparent);
    color: var(--warning);
    font-size: var(--text-12);
    line-height: 1.45;
  }

  .status-filter .icon {
    width: 14px;
    height: 14px;
    margin-top: 1px;
    flex: none;
  }

  .status-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: var(--sp-2);
    margin-left: -6px;
  }

  .action-button {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    height: 30px;
    padding: 0 var(--sp-2);
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: var(--text-12);
    font-variant-numeric: tabular-nums;
    transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
  }

  .action-button:hover {
    color: var(--text);
    background: var(--hover);
  }

  .action-button .icon {
    width: 17px;
    height: 17px;
  }

  .action-button.is-active {
    color: var(--accent);
  }

  .action-button.is-active .icon {
    fill: color-mix(in oklab, currentColor 18%, transparent);
  }

  .action-button--favourite.is-active {
    color: var(--favourite);
  }

  .action-button--boost.is-active {
    color: var(--boost);
  }

  .action-button--reply:hover {
    color: var(--info);
  }

  .action-button--bookmark.is-active {
    color: var(--accent-2);
  }

  .action-button[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .status--embedded {
    padding: 0;
    border: 0;
    background: none;
    content-visibility: visible;
  }

  .status--embedded:hover {
    background: none;
  }

  .status--embedded .status-head,
.status--embedded .status-boost {
    display: none;
  }

  .status--embedded .status-content {
    margin-top: 0;
    font-size: var(--text-14);
    color: var(--text-soft);
  }

  .status--embedded .status-actions {
    margin-top: var(--sp-2);
  }

  .status--compact {
    padding: var(--sp-3) var(--sp-4);
  }

  .status--compact .avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    font-size: var(--text-12);
  }

  .status--compact .status-content {
    font-size: var(--text-13);
  }

  .status-unavailable {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-4);
    color: var(--faint);
    font-size: var(--text-12);
  }

  .status-unavailable .icon {
    width: 16px;
    height: 16px;
  }

  /* Media */
  .media-grid {
    display: grid;
    gap: 2px;
    margin-top: var(--sp-3);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    isolation: isolate;
  }

  .media-grid[data-count="1"] {
    grid-template-columns: 1fr;
  }

  .media-grid[data-count="2"] {
    grid-template-columns: 1fr 1fr;
  }

  .media-grid[data-count="3"] {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }

  .media-grid[data-count="3"] .media-item:first-child {
    grid-row: span 2;
  }

  .media-grid[data-count="4"] {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }

  .media-item {
    position: relative;
    display: block;
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--tint, var(--surface-3));
    color: var(--muted);
    cursor: zoom-in;
  }

  .media-grid[data-count="2"] .media-item,
  .media-grid[data-count="3"] .media-item,
  .media-grid[data-count="4"] .media-item {
    aspect-ratio: 1;
  }

  .media-grid[data-count="1"] .media-item {
    max-height: 430px;
    aspect-ratio: auto;
  }

  .media-item img,
  .media-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-3) var(--ease), filter var(--dur-2) var(--ease);
  }

  .media-item:hover img,
  .media-item:hover video {
    transform: scale(1.015);
  }

  .media-item--audio {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    aspect-ratio: auto;
    cursor: default;
  }

  .media-item--audio audio {
    width: 100%;
    height: 36px;
  }

  .media-alt {
    position: absolute;
    left: 6px;
    bottom: 6px;
    padding: 2px var(--sp-1);
    border-radius: var(--radius-xs);
    background: color-mix(in oklab, var(--ctp-crust) 72%, transparent);
    color: var(--ctp-text);
    font-size: var(--text-10);
    font-weight: 800;
    letter-spacing: 0.04em;
  }

  .media-sensitive {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    background: color-mix(in oklab, var(--ctp-crust) 55%, transparent);
    backdrop-filter: blur(18px);
    color: var(--ctp-text);
    font-size: var(--text-12);
    font-weight: 650;
    text-align: left;
    cursor: pointer;
  }

  .media-sensitive .icon {
    width: 20px;
    height: 20px;
  }

  .media-grid.is-sensitive .media-item img,
  .media-grid.is-sensitive .media-item video {
    filter: blur(26px) saturate(0.6);
    transform: scale(1.05);
  }

  .media-grid.is-sensitive .media-item {
    cursor: pointer;
  }

  .media-grid.is-sensitive.is-revealed .media-item img,
  .media-grid.is-sensitive.is-revealed .media-item video {
    filter: none;
    transform: none;
  }

  .media-grid.is-sensitive.is-revealed .media-sensitive {
    display: none;
  }

  /* Polls */
  .poll {
    margin-top: var(--sp-3);
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
  }

  .poll-options {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
  }

  .poll-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 38px;
    padding: var(--sp-2) var(--sp-2);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-soft);
    font-size: var(--text-13);
    text-align: left;
    cursor: pointer;
  }

  .poll-option:hover {
    border-color: var(--border-strong);
    background: var(--surface-3);
  }

  .poll-option.is-selected {
    border-color: var(--accent);
    background: var(--accent-soft);
  }

  .poll-option.is-disabled {
    cursor: default;
  }

  .poll-option input {
    width: 14px;
    height: 14px;
    flex: none;
    accent-color: var(--accent);
  }

  .poll-option-text {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .poll-option-count {
    position: relative;
    z-index: 1;
    flex: none;
    color: var(--muted);
    font-size: var(--text-11);
    font-variant-numeric: tabular-nums;
  }

  .poll-bar {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--poll-pct, 0%);
    background: color-mix(in oklab, var(--accent) 18%, transparent);
    transition: width var(--dur-3) var(--ease);
  }

  .poll-option.is-selected .poll-bar {
    background: color-mix(in oklab, var(--accent) 28%, transparent);
  }

  .poll-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
    color: var(--faint);
    font-size: var(--text-11);
  }

  .poll-footer .button {
    margin-left: auto;
  }

  /* Quote */
  .quote {
    margin-top: var(--sp-3);
    overflow: hidden;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-2);
  }

  .quote-head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--border);
    color: var(--muted);
    font-size: var(--text-11);
    font-weight: 650;
  }

  .quote-head .icon {
    width: 14px;
    height: 14px;
    color: var(--quote);
  }

  .quote-author {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
    font-size: var(--text-12);
    font-weight: 650;
  }

  .quote-author .avatar {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    font-size: var(--text-10);
  }

  .quote-author .status-acct {
    font-weight: 500;
  }

  .quote-content {
    color: var(--text-soft);
    font-size: var(--text-13);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
  }

  .quote-content p {
    margin: 0 0 0.5em;
  }

  .quote-content p:last-child {
    margin-bottom: 0;
  }

  .quote-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--muted);
    font-size: var(--text-12);
    line-height: 1.45;
  }

  .quote-notice .icon {
    width: 14px;
    height: 14px;
    margin-top: 1px;
    flex: none;
  }

  /* Link cards */
  .link-card {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    min-height: 84px;
    margin-top: var(--sp-3);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--text-soft);
  }

  .link-card-image {
    width: 84px;
    height: 100%;
    min-height: 84px;
    object-fit: cover;
    background: var(--surface-3);
  }

  .link-card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-1);
    min-width: 0;
    padding: var(--sp-2) var(--sp-3);
  }

  .link-card-provider {
    color: var(--faint);
    font-size: var(--text-10);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .link-card-title {
    color: var(--text);
    font-size: var(--text-13);
    font-weight: 700;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .link-card-desc {
    color: var(--faint);
    font-size: var(--text-11);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Notifications */
  .notification {
    padding: var(--sp-4);
    border-bottom: 1px solid var(--border);
    content-visibility: auto;
    contain-intrinsic-size: auto 150px;
  }

  .notification:hover {
    background: color-mix(in oklab, var(--text) 2.5%, transparent);
  }

  .notification-head {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
  }

  .notification-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
  }

  .notification-icon .icon {
    width: 16px;
    height: 16px;
  }

  .notification-icon[data-type="favourite"] {
    color: var(--favourite);
    background: color-mix(in oklab, var(--favourite) 14%, transparent);
  }

  .notification-icon[data-type="reblog"],
  .notification-icon[data-type="quote"] {
    color: var(--boost);
    background: color-mix(in oklab, var(--boost) 14%, transparent);
  }

  .notification-icon[data-type="follow"],
  .notification-icon[data-type="follow_request"] {
    color: var(--ctp-mauve);
    background: color-mix(in oklab, var(--ctp-mauve) 14%, transparent);
  }

  .notification-icon[data-type="mention"],
  .notification-icon[data-type="status"] {
    color: var(--mention);
    background: color-mix(in oklab, var(--mention) 14%, transparent);
  }

  .notification-icon[data-type="poll"] {
    color: var(--ctp-teal);
    background: color-mix(in oklab, var(--ctp-teal) 14%, transparent);
  }

  .notification-icon[data-type="admin.report"],
  .notification-icon[data-type="admin.sign_up"],
  .notification-icon[data-type="moderation_warning"] {
    color: var(--danger);
    background: color-mix(in oklab, var(--danger) 14%, transparent);
  }

  .notification-main {
    flex: 1;
    min-width: 0;
  }

  .notification-text {
    color: var(--muted);
    font-size: var(--text-13);
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  .notification-text strong {
    color: var(--text);
    font-weight: 700;
  }

  .notification-text a {
    color: var(--text);
    font-weight: 650;
  }

  .notification-text a:hover {
    color: var(--accent);
    text-decoration: underline;
  }

  .notification-time {
    margin-top: 2px;
    color: var(--faint);
    font-size: var(--text-11);
  }

  .notification-avatars {
    display: flex;
    align-items: center;
    flex: none;
  }

  .notification-avatars .avatar {
    width: 28px;
    height: 28px;
    border: 2px solid var(--surface);
    border-radius: var(--radius-sm);
    margin-left: -8px;
    font-size: var(--text-10);
  }

  .notification-avatars .avatar:first-child {
    margin-left: 0;
  }

  .notification-avatars .avatar--more {
    display: grid;
    place-items: center;
    background: var(--surface-3);
    color: var(--muted);
    font-size: var(--text-10);
    font-weight: 750;
  }

  .notification-status {
    margin-top: var(--sp-3);
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
  }

  .notification-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    margin-left: 42px;
  }

  .notification-report {
    margin-top: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-left: 2px solid var(--danger);
    background: color-mix(in oklab, var(--danger) 6%, transparent);
    color: var(--muted);
    font-size: var(--text-12);
    line-height: 1.45;
    white-space: pre-wrap;
  }

  /* Composer */

  .composer {
    padding: var(--sp-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
  }

  .composer:focus-within {
    border-color: color-mix(in oklab, var(--accent) 55%, var(--border-strong));
    box-shadow: 0 0 0 3px var(--accent-softer);
  }

  .composer-context {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
    padding: var(--sp-2);
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    color: var(--muted);
    font-size: var(--text-12);
  }

  .composer-context .icon {
    width: 14px;
    height: 14px;
    flex: none;
    color: var(--accent);
  }

  .composer-context-main {
    flex: 1;
    min-width: 0;
  }

  .composer-context-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .composer-context-remove {
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: var(--radius-xs);
    color: var(--faint);
  }

  .composer-context-remove:hover {
    color: var(--danger);
    background: var(--hover);
  }

  .composer-cw {
    margin-bottom: var(--sp-2);
  }

  .composer-cw input {
    width: 100%;
    height: 34px;
    padding: 0 var(--sp-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-size: var(--text-13);
    outline: 0;
  }

  .composer-schedule label {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--muted);
    font-size: var(--text-12);
    font-weight: 600;
  }

  .composer-schedule input {
    flex: 1;
    width: auto;
    min-width: 0;
  }

  .composer-scheduled {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .composer-scheduled li {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 36px;
    border-bottom: 1px solid var(--border);
    color: var(--muted);
    font-size: var(--text-12);
  }

  .composer-scheduled li:first-child {
    margin-top: var(--sp-2);
    border-top: 1px solid var(--border);
  }

  .composer-scheduled time {
    flex: none;
    font-weight: 600;
  }

  .composer-scheduled-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .composer-cw input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-softer);
  }

  .composer-input {
    display: block;
    width: 100%;
    min-height: 54px;
    max-height: 300px;
    padding: 0;
    resize: none;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-size: var(--text-14);
    line-height: 1.5;
    field-sizing: content;
  }

  .composer-input::placeholder {
    color: var(--faint);
  }

  .composer-quote {
    margin-top: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--muted);
    font-size: var(--text-12);
    line-height: 1.4;
  }

  .composer-quote strong {
    color: var(--text-soft);
  }

  .composer-toolbar {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
    padding-top: var(--sp-2);
    border-top: 1px solid var(--border);
  }

  .composer-tools {
    display: flex;
    align-items: center;
    gap: 1px;
    min-width: 0;
  }

  .composer-tool {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    color: var(--muted);
    transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
  }

  .composer-tool:hover,
  .composer-tool.is-active {
    color: var(--accent);
    background: var(--accent-soft);
  }

  .composer-tool .icon {
    width: 17px;
    height: 17px;
  }

  .composer-meta {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-left: auto;
    flex: none;
  }

  .char-count {
    color: var(--faint);
    font-size: var(--text-11);
    font-variant-numeric: tabular-nums;
  }

  .char-count.is-near {
    color: var(--warning);
  }

  .char-count.is-over {
    color: var(--danger);
    font-weight: 700;
  }

  .composer-submit {
    height: 32px;
    padding: 0 var(--sp-3);
    font-size: var(--text-12);
  }

  .composer-submit .icon {
    width: 15px;
    height: 15px;
  }

  .composer-attachments {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--sp-2);
    margin-top: var(--sp-2);
  }

  .attachment {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-3);
  }

  .attachment img,
  .attachment video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .attachment-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: color-mix(in oklab, var(--ctp-crust) 72%, transparent);
    color: var(--ctp-text);
    backdrop-filter: blur(6px);
  }

  .attachment-remove:hover {
    background: var(--danger);
    color: var(--ctp-crust);
  }

  .attachment-remove .icon {
    width: 13px;
    height: 13px;
  }

  .attachment-progress {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 6px;
  }

  .attachment-description {
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 4px;
    height: 26px;
    padding: 0 var(--sp-2);
    border: 0;
    border-radius: var(--radius-xs);
    background: color-mix(in oklab, var(--ctp-crust) 72%, transparent);
    color: var(--ctp-text);
    font-size: var(--text-11);
    backdrop-filter: blur(6px);
    outline: 0;
  }

  .attachment-description::placeholder {
    color: color-mix(in oklab, var(--ctp-text) 60%, transparent);
  }

  .composer-sensitive {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
  }

  .poll-editor {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
    padding: var(--sp-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
  }

  .poll-editor-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
  }

  .poll-editor-row input[type="text"] {
    flex: 1;
    min-width: 0;
    height: 32px;
    padding: 0 var(--sp-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xs);
    background: var(--surface-2);
    color: var(--text);
    font-size: var(--text-12);
    outline: 0;
  }

  .poll-editor-row input[type="text"]:focus {
    border-color: var(--accent);
  }

  .poll-editor-remove {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: var(--radius-xs);
    color: var(--faint);
  }

  .poll-editor-remove:hover {
    color: var(--danger);
    background: var(--hover);
  }

  .poll-editor-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding-top: var(--sp-2);
    border-top: 1px solid var(--border);
  }

  .poll-editor-footer .select {
    margin-left: auto;
  }

  .composer-hint {
    margin-top: var(--sp-2);
    color: var(--faint);
    font-size: var(--text-11);
    line-height: 1.4;
  }
}

/* --------------------------------------------------------------------------
   Dialogs and views
   -------------------------------------------------------------------------- */
@layer views {
  /* Thread */
  .thread-dialog .dialog-body {
    padding: 0;
  }

  .thread-list {
    display: flex;
    flex-direction: column;
  }

  .thread-item {
    position: relative;
    border-bottom: 1px solid var(--border);
  }

  .thread-item--ancestor {
    background: color-mix(in oklab, var(--surface-2) 55%, transparent);
  }

  .thread-item--focus {
    background: var(--surface);
    box-shadow: inset 3px 0 0 var(--accent);
  }

  .thread-item--focus .status {
    padding-top: var(--sp-4);
    padding-bottom: var(--sp-4);
  }

  .thread-item .status {
    border-bottom: 0;
  }

  .thread-reply {
    padding: var(--sp-4);
    border-top: 1px solid var(--border);
    background: var(--surface);
  }

  .thread-empty {
    padding: var(--sp-6);
  }

  /* Profile */
  .profile-hero {
    position: relative;
    border-bottom: 1px solid var(--border);
  }

  .profile-banner {
    height: 140px;
    background:
      linear-gradient(135deg, color-mix(in oklab, var(--accent) 40%, var(--surface-3)), color-mix(in oklab, var(--accent-2) 35%, var(--surface-2)));
    overflow: hidden;
  }

  .profile-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .profile-head {
    position: relative;
    padding: 0 var(--sp-4) var(--sp-4);
  }

  .profile-avatar {
    margin-top: -36px;
    margin-bottom: var(--sp-3);
  }

  .profile-name-block {
    flex: 1;
    min-width: 0;
  }

  .profile-display-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    font-size: var(--text-20);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.2;
  }

  .profile-acct {
    margin-top: 2px;
    color: var(--faint);
    font-size: var(--text-13);
    overflow-wrap: anywhere;
  }

  .profile-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-1);
    margin-top: var(--sp-2);
  }

  .profile-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: none;
    padding-top: var(--sp-1);
  }

  .profile-bio {
    margin-top: var(--sp-4);
    color: var(--text-soft);
    font-size: var(--text-13);
    line-height: 1.55;
    overflow-wrap: anywhere;
  }

  .profile-bio p {
    margin: 0 0 0.6em;
  }

  .profile-bio p:last-child {
    margin-bottom: 0;
  }

  .profile-bio .mention,
  .profile-bio .hashtag {
    color: var(--accent);
  }

  .profile-bio img.custom-emoji {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    vertical-align: -0.22em;
  }

  .profile-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px;
    margin-top: var(--sp-4);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--border);
  }

  .profile-field {
    min-width: 0;
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface-2);
  }

  .profile-field-name {
    color: var(--faint);
    font-size: var(--text-10);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .profile-field-value {
    margin-top: 2px;
    color: var(--text-soft);
    font-size: var(--text-12);
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  .profile-field-value a {
    color: var(--link);
  }

  .profile-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    margin-top: var(--sp-4);
    color: var(--muted);
    font-size: var(--text-12);
  }

  .profile-stats strong {
    color: var(--text);
    font-weight: 700;
  }

  .profile-statuses {
    border-top: 1px solid var(--border);
  }

  .profile-statuses-head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
    color: var(--muted);
    font-size: var(--text-11);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .profile-statuses .status {
    padding: var(--sp-3) var(--sp-4);
  }

  .profile-load-more {
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
  }

  /* Search */

  .search-bar {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
  }

  .search-results {
    min-height: 200px;
  }

  .search-section {
    border-bottom: 1px solid var(--border);
  }

  .search-section:last-child {
    border-bottom: 0;
  }

  .search-section-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4) var(--sp-1);
    color: var(--faint);
    font-size: var(--text-10);
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .search-account {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    padding: var(--sp-2) var(--sp-4);
    text-align: left;
  }

  .search-account:hover {
    background: var(--hover);
  }

  .search-account-main {
    flex: 1;
    min-width: 0;
  }

  .search-account-name {
    color: var(--text);
    font-size: var(--text-13);
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .search-account-acct {
    color: var(--faint);
    font-size: var(--text-11);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .search-hashtag {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    padding: var(--sp-2) var(--sp-4);
    text-align: left;
  }

  .search-hashtag:hover {
    background: var(--hover);
  }

  .search-hashtag-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: var(--radius-md);
    background: var(--surface-3);
    color: var(--link);
  }

  .search-hashtag-name {
    color: var(--text);
    font-size: var(--text-13);
    font-weight: 650;
  }

  .search-hashtag-meta {
    color: var(--faint);
    font-size: var(--text-11);
  }

  .search-status {
    border-top: 1px solid var(--border);
  }

  /* Settings */
  .settings-body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
  }

  .settings-section {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
  }

  .settings-section-title {
    color: var(--faint);
    font-size: var(--text-10);
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .settings-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
  }

  .settings-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 52px;
    padding: var(--sp-2) var(--sp-4);
    border-bottom: 1px solid var(--border);
  }

  .settings-row:last-child {
    border-bottom: 0;
  }

  .settings-row-main {
    flex: 1;
    min-width: 0;
  }

  .settings-label {
    color: var(--text-soft);
    font-size: var(--text-13);
    font-weight: 600;
  }

  .settings-desc {
    margin-top: 1px;
    color: var(--faint);
    font-size: var(--text-11);
    line-height: 1.4;
  }

  .settings-control {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
  }

  .theme-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2);
    padding: var(--sp-4);
  }

  .theme-option {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--muted);
    font-size: var(--text-12);
    font-weight: 600;
    text-align: left;
  }

  .theme-option:hover {
    border-color: var(--border-strong);
    color: var(--text);
  }

  .theme-option.is-active {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
  }

  .theme-swatch {
    display: flex;
    width: 30px;
    height: 20px;
    flex: none;
    overflow: hidden;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xs);
  }

  .theme-swatch span {
    flex: 1;
  }

  .theme-swatch--latte span:nth-child(1) { background: #eff1f5; }
  .theme-swatch--latte span:nth-child(2) { background: #8839ef; }
  .theme-swatch--latte span:nth-child(3) { background: #1e66f5; }
  .theme-swatch--mocha span:nth-child(1) { background: #1e1e2e; }
  .theme-swatch--mocha span:nth-child(2) { background: #cba6f7; }
  .theme-swatch--mocha span:nth-child(3) { background: #89b4fa; }
  .theme-swatch--frappe span:nth-child(1) { background: #303446; }
  .theme-swatch--frappe span:nth-child(2) { background: #ef9f76; }
  .theme-swatch--frappe span:nth-child(3) { background: #81c8be; }
  .theme-swatch--macchiato span:nth-child(1) { background: #24273a; }
  .theme-swatch--macchiato span:nth-child(2) { background: #f5bde6; }
  .theme-swatch--macchiato span:nth-child(3) { background: #7dc4e4; }

  .settings-account {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
  }

  .settings-account-main {
    flex: 1;
    min-width: 0;
  }

  .settings-account-name {
    color: var(--text);
    font-size: var(--text-13);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .settings-account-acct {
    color: var(--faint);
    font-size: var(--text-11);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .settings-columns {
    display: flex;
    flex-direction: column;
  }

  .settings-column {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--border);
  }

  .settings-column:last-child {
    border-bottom: 0;
  }

  .settings-column-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: 1;
    min-width: 0;
    color: var(--text-soft);
    font-size: var(--text-12);
    font-weight: 600;
  }

  .settings-column-title .icon {
    width: 15px;
    height: 15px;
    color: var(--faint);
  }

  .settings-column-title span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Report form */
  .report-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
  }

  .report-target {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
  }

  .report-target-main {
    min-width: 0;
  }

  .report-target-name {
    color: var(--text);
    font-size: var(--text-13);
    font-weight: 650;
  }

  .report-target-acct {
    color: var(--faint);
    font-size: var(--text-11);
  }

  /* Lightbox */

  /* Column picker */
  .picker-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2);
  }

  .picker-card {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    text-align: left;
    transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
  }

  .picker-card:hover {
    border-color: color-mix(in oklab, var(--accent) 55%, var(--border));
    background: var(--surface-3);
  }

  .picker-card-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent);
  }

  .picker-card-icon .icon {
    width: 17px;
    height: 17px;
  }

  .picker-card-title {
    color: var(--text);
    font-size: var(--text-13);
    font-weight: 650;
  }

  .picker-card-desc {
    margin-top: 1px;
    color: var(--faint);
    font-size: var(--text-11);
    line-height: 1.4;
  }

  .picker-lists {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    max-height: 220px;
    overflow-y: auto;
  }

  .picker-list-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text-soft);
    font-size: var(--text-12);
    text-align: left;
  }

  .picker-list-item:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
  }

  .picker-list-item .icon {
    width: 15px;
    height: 15px;
    color: var(--faint);
  }

  .picker-form {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
  }

  .picker-form .field {
    flex: 1;
  }

  /* Admin */
  .admin-body {
    padding: 0;
  }

  .admin-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
  }

  .admin-toolbar .field {
    width: min(320px, 100%);
    height: 34px;
  }

  .admin-toolbar .select {
    margin-left: auto;
  }

  .admin-report {
    padding: var(--sp-4);
    border-bottom: 1px solid var(--border);
  }

  .admin-report-head {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
  }

  .admin-report-main {
    flex: 1;
    min-width: 0;
  }

  .admin-report-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    color: var(--text-soft);
    font-size: var(--text-13);
    line-height: 1.4;
  }

  .admin-report-title strong {
    color: var(--text);
  }

  .admin-report-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: 4px;
    color: var(--faint);
    font-size: var(--text-11);
  }

  .admin-report-comment {
    margin-top: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-left: 2px solid var(--warning);
    background: color-mix(in oklab, var(--warning) 6%, transparent);
    color: var(--muted);
    font-size: var(--text-12);
    line-height: 1.45;
    white-space: pre-wrap;
  }

  .admin-report-statuses {
    margin-top: var(--sp-2);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
  }

  .admin-report-statuses .status {
    padding: var(--sp-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
  }

  .admin-report-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-1);
    margin-top: var(--sp-3);
  }

  .admin-account {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
  }

  .admin-account-main {
    flex: 1;
    min-width: 0;
  }

  .admin-account-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-1);
    color: var(--text);
    font-size: var(--text-13);
    font-weight: 650;
  }

  .admin-account-acct {
    color: var(--faint);
    font-size: var(--text-11);
  }

  .admin-account-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-1);
    margin-top: 3px;
  }

  .admin-account-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    flex: none;
  }

  .admin-block {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-4);
    border-bottom: 1px solid var(--border);
  }

  .admin-block-main {
    flex: 1;
    min-width: 0;
  }

  .admin-block-domain {
    color: var(--text);
    font-size: var(--text-13);
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .admin-block-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-1);
    margin-top: 2px;
    color: var(--faint);
    font-size: var(--text-11);
  }

  .admin-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-4);
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
  }

  .admin-form-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
  }

  .admin-form-row .field {
    flex: 1;
    min-width: 180px;
  }

  .admin-empty {
    padding: var(--sp-8);
    text-align: left;
    color: var(--faint);
    font-size: var(--text-12);
  }

  .admin-pager {
    padding: var(--sp-3);
    text-align: left;
    border-top: 1px solid var(--border);
  }

  .admin-action-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }

  .admin-action-target {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
  }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@layer utilities {
  @media (max-width: 1180px) {
    :root {
      --column-w: 360px;
    }
  }

  @media (max-width: 980px) {
    :root {
      --column-w: 340px;
    }

    .status-content {
      font-size: var(--text-14);
    }
  }

  @media (max-width: 760px) {
    :root {
      --topbar-h: 56px;
      --column-w: 100%;
    }

    .topbar {
      grid-column: 1;
      grid-row: 1;
      gap: var(--sp-2);
      padding: 0 var(--sp-3);
    }

    .topbar .brand {
      gap: var(--sp-2);
    }

    .topbar .brand-name {
      font-size: var(--text-16);
    }

    .topbar-actions {
      margin-left: 0;
    }

    .topbar-actions .icon-button {
      width: 32px;
      height: 32px;
    }

    .rail {
      grid-column: 1;
      grid-row: 3;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-1);
      padding: 5px var(--sp-2) calc(5px + env(safe-area-inset-bottom));
      border-right: 0;
      border-top: 1px solid var(--border);
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
    }

    .rail::-webkit-scrollbar {
      display: none;
    }

    .rail-group {
      flex-direction: row;
      width: auto;
      flex: 1;
      justify-content: space-around;
      gap: 2px;
    }

    .rail-spacer {
      display: none;
    }

    .rail-label {
      font-size: var(--text-10);
    }

    .columns {
      grid-column: 1;
      grid-row: 2;
      gap: 0;
      padding: 0;
      scroll-snap-type: x mandatory;
    }

    .column {
      flex: 0 0 100%;
      width: 100%;
      border-top: 0;
      border-right: 0;
      border-left: 0;
      border-radius: 0;
      box-shadow: none;
    }

    .column-header {
      padding-left: var(--sp-3);
    }

    .dialog-header {
      padding: 0 var(--sp-2) 0 var(--sp-4);
    }

    .dialog-footer {
      padding: var(--sp-3) var(--sp-4);
    }

    .profile-head {
      padding: 0 var(--sp-4) var(--sp-4);
    }

    .profile-banner {
      height: 110px;
    }

    .profile-display-name {
      font-size: var(--text-18);
    }

    .profile-actions {
      width: 100%;
    }

    .profile-actions .button {
      flex: 1;
    }

    .login-view {
      padding: var(--sp-4) var(--sp-3);
    }

    .login-shell {
      gap: var(--sp-4);
    }

    .login-card {
      padding: var(--sp-4);
      border-radius: var(--radius-xl);
    }

    .login-brand {
      justify-content: flex-start;
    }

    .login-name {
      font-size: var(--text-24);
    }

    .server-list {
      grid-template-columns: 1fr;
      max-height: 300px;
    }

    .custom-server {
      grid-template-columns: 1fr;
    }

    .custom-server .button {
      width: 100%;
    }

    .toasts {
      right: var(--sp-2);
      bottom: calc(70px + env(safe-area-inset-bottom));
      width: calc(100vw - var(--sp-4));
    }

    .theme-grid {
      grid-template-columns: 1fr;
    }

    .picker-grid {
      grid-template-columns: 1fr;
    }

    .status {
      padding: var(--sp-3);
    }

    .status .avatar {
      width: 36px;
      height: 36px;
      border-radius: var(--radius-sm);
      font-size: var(--text-13);
    }

    .status-content {
      font-size: var(--text-14);
    }

    .media-grid[data-count="1"] .media-item {
      max-height: 360px;
    }

    .notification {
      padding: var(--sp-3);
    }

    .notification-actions {
      margin-left: 0;
    }

    .link-card {
      grid-template-columns: 68px minmax(0, 1fr);
    }

    .link-card-image {
      width: 68px;
    }
  }

  @media (max-width: 520px) {
    .topbar .brand-name {
      display: none;
    }

    .topbar-actions {
      gap: 0;
    }

    .login-brand {
      gap: var(--sp-3);
    }

    .login-brand .brand-mark--large {
      width: 48px;
      height: 48px;
    }

    .login-brand .brand-mark--large .icon--brand {
      width: 30px;
      height: 30px;
    }

    .login-name {
      font-size: var(--text-24);
    }

    .login-tagline {
      font-size: var(--text-11);
    }

    .login-footer {
      flex-wrap: wrap;
    }

    .status-meta::before {
      content: "";
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: var(--faint);
    }

    .action-button {
      padding: 0 var(--sp-1);
    }

    .action-button span {
      display: none;
    }

    .status-actions {
      gap: var(--sp-2);
    }

    .notification-avatars .avatar {
      width: 24px;
      height: 24px;
      font-size: var(--text-10);
    }

    .notification-icon {
      width: 26px;
      height: 26px;
    }

    .notification-icon .icon {
      width: 14px;
      height: 14px;
    }

    .notification-text {
      font-size: var(--text-12);
    }

    .settings-row {
      align-items: flex-start;
    }

    .admin-toolbar .select {
      margin-left: 0;
      width: 100%;
    }

    .admin-account {
      align-items: flex-start;
    }

    .admin-account-actions {
      flex-direction: column;
    }

    .admin-account-actions .button {
      width: 100%;
    }
  }

  @media (min-width: 1600px) {
    :root {
      --column-w: 400px;
    }
  }

  /* Utility states */

  .is-disabled {
    opacity: 0.5;
    pointer-events: none;
  }

  .loading-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--muted);
    font-size: var(--text-12);
  }

  .loading-inline .spinner {
    width: 14px;
    height: 14px;
  }

  /* Loading a whole admin tab or list: centred and readable, not a footnote. */
  :is(.admin-body, .admin-list) > .loading-inline {
    display: flex;
    justify-content: center;
    gap: var(--sp-3);
    padding: var(--sp-8) var(--sp-4);
    font-size: var(--text-14);
  }

  :is(.admin-body, .admin-list) > .loading-inline .spinner {
    width: 20px;
    height: 20px;
  }

  .verified-badge {
    display: inline-flex;
    align-items: center;
    color: var(--info);
  }

  .verified-badge .icon {
    width: 13px;
    height: 13px;
  }

  .action-spinner {
    width: 14px;
    height: 14px;
    border-width: 2px;
  }
}

/* --------------------------------------------------------------------------
   Additional component details
   -------------------------------------------------------------------------- */
@layer components {
  .media-grid {
    position: relative;
  }

  .media-sensitive {
    z-index: 1;
  }

  .notification-main .row {
    align-items: flex-start;
    gap: var(--sp-2);
  }

  .notification-main .row .notification-text {
    flex: 1;
    min-width: 0;
  }

  .status-edited {
    color: var(--faint);
    font-size: var(--text-11);
    white-space: nowrap;
  }

  .status-filter .status-cw-toggle {
    margin-left: auto;
    flex: none;
  }

  .theme-swatch--system span:nth-child(1) { background: #eff1f5; }
  .theme-swatch--system span:nth-child(2) { background: #8839ef; }
  .theme-swatch--system span:nth-child(3) { background: #1e1e2e; }

  .translation {
    margin-top: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid color-mix(in oklab, var(--accent) 24%, var(--border));
    border-radius: var(--radius-md);
    background: color-mix(in oklab, var(--accent) 6%, var(--surface-2));
  }

  .translation-label {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    margin-bottom: var(--sp-2);
    color: var(--accent);
    font-size: var(--text-10);
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .translation-label .icon {
    width: 13px;
    height: 13px;
  }

  .translation-content {
    margin-top: 0;
    font-size: var(--text-14);
  }

  .status-body[hidden] {
    display: none !important;
  }

  .profile-field .verified-badge {
    margin-top: 3px;
  }

  .admin-report-title .button--link {
    display: inline;
    color: var(--link);
    font-size: inherit;
    font-weight: 700;
  }

  .admin-report-title .button--link:hover {
    text-decoration: underline;
  }
}

@layer utilities {
  @media (max-width: 760px) {
    .notification-main .row {
      gap: var(--sp-1);
    }

    .status-cw {
      padding: var(--sp-2);
    }

    .status-filter {
      flex-wrap: wrap;
    }

    .status-filter .status-cw-toggle {
      margin-left: 0;
    }

    .profile-stats {
      gap: var(--sp-3);
    }

    .settings-card,
    .admin-form {
      border-radius: var(--radius-sm);
    }
  }

  @media (max-width: 420px) {
    .topbar-actions .icon-button {
      width: 30px;
      height: 30px;
    }

    .topbar-actions .icon-button .icon {
      width: 18px;
      height: 18px;
    }

    .rail-button {
      width: 42px;
    }

    .rail-label {
      font-size: var(--text-10);
    }

    .notification-avatars .avatar:nth-child(n + 3) {
      display: none;
    }

    .profile-display-name {
      font-size: var(--text-16);
    }
  }
}

/* Mobile bottom navigation: icon-first, no cramped labels */
@layer utilities {
  @media (max-width: 760px) {
    .rail-label {
      display: none;
    }

    .rail-button {
      width: 48px;
      height: 48px;
      gap: 0;
    }

    .rail-button .icon {
      width: 21px;
      height: 21px;
    }

    .rail-button .badge--dot {
      top: 7px;
      right: 9px;
    }
  }

  @media (max-width: 520px) {
    .status-meta .status-time {
      display: inline;
    }

    .status-meta::before {
      display: none;
    }

  }
}

/* Compact moderation previews keep admin reports scannable */
@layer views {
  .quote-head {
    width: 100%;
    text-align: left;
  }

  .admin-status-preview {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    width: 100%;
    padding: var(--sp-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    text-align: left;
  }

  .admin-status-preview:hover {
    border-color: var(--border-strong);
    background: var(--surface-3);
  }

  .admin-status-preview > .icon {
    width: 14px;
    height: 14px;
    margin-top: 2px;
    color: var(--faint);
    flex: none;
  }

  .admin-status-preview-main {
    flex: 1;
    min-width: 0;
  }

  .admin-status-preview-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-1);
    color: var(--faint);
    font-size: var(--text-11);
    line-height: 1.4;
  }

  .admin-status-preview-head strong {
    color: var(--text-soft);
    font-weight: 650;
  }

  .admin-status-preview-content {
    max-height: 4.6em;
    margin-top: 3px;
    overflow: hidden;
    color: var(--muted);
    font-size: var(--text-12);
    line-height: 1.45;
  }

  .admin-status-preview-content p {
    margin: 0 0 0.4em;
  }

  .admin-status-preview-content p:last-child {
    margin-bottom: 0;
  }
}

@layer utilities {
  @media (max-width: 360px) {
    .composer-toolbar {
      flex-wrap: wrap;
    }

    .composer-tools {
      flex: 1;
    }

    .composer-meta {
      width: 100%;
      justify-content: flex-end;
      margin-left: 0;
    }

    .composer-submit {
      flex: 1;
    }
  }
}

@layer components {
  .link-card--no-image {
    grid-template-columns: 1fr;
  }
}

/* Post content uses the full column width; the avatar only occupies the header row. */
@layer views {
  .status-head-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: var(--sp-3);
    align-items: start;
  }

  .status--compact .status-head-row {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: var(--sp-2);
  }

  .status-main {
    min-width: 0;
    margin-top: var(--sp-2);
  }

  .status--embedded .status-main {
    margin-top: 0;
  }

  .status-boost {
    margin-left: 0;
  }

  .status-content {
    width: 100%;
  }
}

@layer utilities {
  @media (max-width: 760px) {
    .status-head-row {
      grid-template-columns: 36px minmax(0, 1fr);
      gap: var(--sp-2);
    }

    .status-boost {
      margin-left: 0;
    }
  }
}

/* Compose is a dedicated overlay, not part of the timeline. */
@layer components {
  .icon-button--compose {
    color: var(--on-accent);
    background: var(--accent);
    border: 1px solid color-mix(in oklab, var(--accent) 70%, var(--text));
  }

  .icon-button--compose:hover {
    color: var(--on-accent);
    background: color-mix(in oklab, var(--accent) 86%, var(--text));
  }

  .dialog--compose .dialog-body {
    padding: var(--sp-4);
  }

  .dialog--compose .composer {
    border: 0;
    background: transparent;
    padding: 0;
  }

  .dialog--compose .composer:focus-within {
    box-shadow: none;
  }
}

@layer utilities {
  @media (max-width: 520px) {
    #btn-add-column {
      display: none;
    }
  }
}

/* Merge desktop navigation into the top bar; keep the rail as mobile bottom nav. */
@layer layout {
  .app-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--topbar-h) minmax(0, 1fr);
  }

  .topbar-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 var(--sp-1);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
  }

  .rail-button--topbar {
    width: 34px;
    height: 34px;
    flex-direction: row;
    gap: 0;
    border-radius: var(--radius-sm);
  }

  .rail-button--topbar .rail-label {
    display: none;
  }

  .rail-button--topbar .icon {
    width: 18px;
    height: 18px;
  }

  .rail-button--topbar .badge--dot {
    top: 5px;
    right: 5px;
  }

  .rail {
    display: none;
  }

  .columns {
    grid-column: 1;
    grid-row: 2;
    padding: var(--sp-3) var(--sp-4);
  }
}

@layer utilities {
  @media (max-width: 760px) {
    .app-shell {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: var(--topbar-h) minmax(0, 1fr) 62px;
    }

    .topbar-nav {
      display: none;
    }

    .rail {
      display: flex;
      grid-column: 1;
      grid-row: 3;
    }

    #btn-add-column,
    #rail-admin,
    #rail-settings {
      display: none;
    }
  }
}

@layer components {
  .composer-language {
    max-width: 76px;
    font-variant-numeric: tabular-nums;
  }
}

@layer utilities {
  @media (max-width: 520px) {
    .composer-toolbar {
      flex-wrap: wrap;
    }

    .composer-meta {
      width: 100%;
      justify-content: flex-end;
      margin-left: 0;
    }
  }
}

/* Custom emoji picker */
@layer views {
  .emoji-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    gap: var(--sp-2);
    max-height: min(52dvh, 430px);
    margin-top: var(--sp-3);
    overflow-y: auto;
    padding: 2px;
  }

  .emoji-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    min-height: 78px;
    padding: var(--sp-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--muted);
  }

  .emoji-button:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
  }

  .emoji-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    font-size: var(--text-20);
    line-height: 32px;
    text-align: left;
  }

  .emoji-shortcode {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-10);
  }
}

/* --------------------------------------------------------------------------
   Accessibility preferences
   -------------------------------------------------------------------------- */
@layer utilities {
  [data-zebra="on"] .feed > .status:nth-child(even),
  [data-zebra="on"] .feed > .notification:nth-child(even),
  [data-zebra="on"] .profile-statuses > .status:nth-child(even) {
    background: color-mix(in oklab, var(--text) 3.5%, transparent);
  }

  [data-zebra="on"] .feed > .status:nth-child(even):hover,
  [data-zebra="on"] .feed > .notification:nth-child(even):hover {
    background: color-mix(in oklab, var(--text) 5.5%, transparent);
  }

  [data-no-italics="on"] em,
  [data-no-italics="on"] i,
  [data-no-italics="on"] .status-content em,
  [data-no-italics="on"] .status-content i,
  [data-no-italics="on"] .profile-bio em,
  [data-no-italics="on"] .profile-bio i {
    font-style: normal;
  }

  [data-underline-links="on"] .status-content a,
  [data-underline-links="on"] .profile-bio a,
  [data-underline-links="on"] .profile-field-value a,
  [data-underline-links="on"] .quote-content a {
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  [data-reduced-motion="on"] *,
  [data-reduced-motion="on"] *::before,
  [data-reduced-motion="on"] *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  [data-focus-strong="on"] :focus-visible {
    outline-width: 3px;
    outline-offset: 3px;
  }

  [data-text-size="small"] {
    --fs: 0.9;
  }

  [data-text-size="large"] {
    --fs: 1.15;
  }

  /* WCAG 1.4.12 text spacing. */
  [data-text-spacing="on"] :is(.status-content, .profile-bio, .quote-content, .notification-text, .composer-input, .settings-desc) {
    line-height: 1.8;
    letter-spacing: 0.04em;
    word-spacing: 0.12em;
  }

  [data-text-spacing="on"] .status-content p {
    margin-bottom: 1em;
  }

  [data-large-targets="on"] :is(.action-button, .icon-button, .rail-button, .menu-item, .switch, .button) {
    min-width: 44px;
    min-height: 44px;
  }

  [data-monochrome="on"] {
    --accent: var(--ctp-text);
    --accent-2: var(--ctp-text);
    --accent-soft: color-mix(in oklab, var(--ctp-text) 12%, transparent);
    --accent-softer: color-mix(in oklab, var(--ctp-text) 6%, transparent);
    --link: var(--ctp-text);
    --success: var(--ctp-text);
    --warning: var(--ctp-text);
    --danger: var(--ctp-text);
    --info: var(--ctp-text);
    --boost: var(--ctp-text);
    --favourite: var(--ctp-text);
    --mention: var(--ctp-text);
    --quote: var(--ctp-text);
  }

  [data-colorblind="deuteranopia"] {
    --success: var(--ctp-blue);
    --danger: var(--ctp-peach);
    --warning: var(--ctp-yellow);
    --boost: var(--ctp-sapphire);
    --favourite: var(--ctp-yellow);
    --mention: var(--ctp-blue);
    --info: var(--ctp-sapphire);
  }

  [data-colorblind="protanopia"] {
    --success: var(--ctp-sapphire);
    --danger: var(--ctp-peach);
    --warning: var(--ctp-yellow);
    --boost: var(--ctp-blue);
    --favourite: var(--ctp-yellow);
    --mention: var(--ctp-blue);
    --info: var(--ctp-sapphire);
  }

  [data-colorblind="tritanopia"] {
    --success: var(--ctp-green);
    --danger: var(--ctp-maroon);
    --warning: var(--ctp-yellow);
    --boost: var(--ctp-teal);
    --favourite: var(--ctp-yellow);
    --mention: var(--ctp-blue);
    --info: var(--ctp-teal);
  }

  [data-high-contrast="on"] {
    --border: var(--ctp-overlay1);
    --border-strong: var(--ctp-overlay2);
    --muted: var(--ctp-subtext1);
    --faint: var(--ctp-subtext0);
    --hover: color-mix(in oklab, var(--text) 10%, transparent);
  }

  [data-high-contrast="on"] .column,
  [data-high-contrast="on"] .settings-card,
  [data-high-contrast="on"] .composer {
    border-color: var(--border-strong);
  }

  .status.is-keyboard-focused {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    background: color-mix(in oklab, var(--accent) 5%, transparent);
  }

  .shortcut-list {
    display: flex;
    flex-direction: column;
    margin-top: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .shortcut-row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--sp-3);
    align-items: center;
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    font-size: var(--text-13);
  }

  .shortcut-row:last-child {
    border-bottom: 0;
  }

  .shortcut-row kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 2px var(--sp-2);
    border: 1px solid var(--border-strong);
    border-bottom-width: 2px;
    border-radius: var(--radius-xs);
    background: var(--surface);
    color: var(--text-soft);
    font-family: var(--font-mono);
    font-size: var(--text-11);
    text-align: left;
  }

  @media (prefers-contrast: more) {
    :root {
      --border: var(--ctp-overlay1);
      --border-strong: var(--ctp-overlay2);
      --muted: var(--ctp-subtext1);
      --faint: var(--ctp-subtext0);
    }

    :focus-visible {
      outline-width: 3px;
      outline-offset: 3px;
    }
  }
}

/* Moderation risk and report cards */
@layer views {
  .risk-card {
    margin-top: var(--sp-4);
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-left: 3px solid var(--success);
    border-radius: var(--radius-md);
    background: color-mix(in oklab, var(--success) 5%, var(--surface-2));
  }

  .risk-card--medium {
    border-left-color: var(--warning);
    background: color-mix(in oklab, var(--warning) 6%, var(--surface-2));
  }

  .risk-card--high {
    border-left-color: var(--danger);
    background: color-mix(in oklab, var(--danger) 7%, var(--surface-2));
  }

  .risk-head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
  }

  .risk-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: none;
    border-radius: 50%;
    background: var(--surface);
    color: var(--success);
    font-size: var(--text-13);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    box-shadow: inset 0 0 0 1px var(--border);
  }

  .risk-card--medium .risk-score { color: var(--warning); }
  .risk-card--high .risk-score { color: var(--danger); }

  .risk-title {
    color: var(--text);
    font-size: var(--text-13);
    font-weight: 700;
  }

  .risk-subtitle {
    color: var(--faint);
    font-size: var(--text-11);
  }

  .risk-reasons {
    margin-top: var(--sp-2);
    color: var(--muted);
    font-size: var(--text-11);
    line-height: 1.45;
  }

  .risk-chip--medium { color: var(--warning); border-color: color-mix(in oklab, var(--warning) 40%, transparent); }
  .risk-chip--high { color: var(--danger); border-color: color-mix(in oklab, var(--danger) 40%, transparent); background: color-mix(in oklab, var(--danger) 10%, transparent); }

  .admin-report {
    border-left: 3px solid var(--warning);
    background: color-mix(in oklab, var(--warning) 4%, var(--surface));
  }

  .admin-report.is-resolved {
    border-left-color: var(--success);
    background: color-mix(in oklab, var(--success) 4%, var(--surface));
  }

  .admin-report.is-open:hover {
    background: color-mix(in oklab, var(--warning) 7%, var(--surface));
  }

  .admin-report .admin-report-actions {
    padding-top: var(--sp-2);
    border-top: 1px solid var(--border);
  }

  .admin-report .admin-status-preview {
    background: color-mix(in oklab, var(--surface) 70%, transparent);
  }
}

/* Detail screens are part of the layout, not modal popups. */
@layer layout {
  .detail-view {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    padding: var(--sp-3) var(--sp-4);
    overflow: hidden;
  }

  .detail-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 900px;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-1);
  }

  .detail-page.dialog--admin {
    max-width: 1200px;
  }

  .detail-page.dialog--profile {
    max-width: 760px;
  }

  .detail-page.dialog--wide {
    max-width: 900px;
  }

  .detail-page .dialog-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .detail-page .dialog-footer {
    flex: 0 0 auto;
  }
}

@layer utilities {
  @media (max-width: 760px) {
    .detail-view {
      padding: 0;
    }

    .detail-page {
      max-width: none;
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }
  }
}

@layer views {
  .column.is-flashing {
    animation: column-flash 720ms var(--ease);
  }

  @keyframes column-flash {
    0%, 100% {
      border-color: var(--border);
      box-shadow: var(--shadow-1);
    }
    35% {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-1);
    }
  }
}

/* Full-bleed workspace: no outer gutters, no rounded column shells. */
@layer layout {
  .columns {
    gap: 0;
    padding: 0;
    background: var(--border);
  }

  .detail-page,
  .detail-page.dialog--admin,
  .detail-page.dialog--profile,
  .detail-page.dialog--wide {
    max-width: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

}

/* Final workspace grid: edge-to-edge columns that share all available width. */
@layer layout {
  .columns {
    column-gap: 0;
    row-gap: 0;
    padding: 0;
    margin: 0;
    background: var(--surface);
  }

  .column {
    flex: 1 0 max(320px, calc(100% / var(--column-count, 1)));
    width: auto;
    min-width: 0;
    margin: 0;
    border: 0;
    border-right: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
  }

  .column:last-child {
    border-right: 0;
  }

  .detail-view {
    padding: 0;
    margin: 0;
  }

}

@layer utilities {
  @media (max-width: 760px) {
    .column {
      flex: 0 0 100%;
      width: 100%;
      border-right: 0;
    }

    .detail-page .dialog-body:not(.dialog-body--flush) {
      padding: var(--sp-3);
    }
  }
}

/* Detail routes occupy the complete workspace, with one consistent content gutter. */
@layer components {
  .detail-page,
  .detail-page.dialog--profile,
  .detail-page.dialog--wide,
  .detail-page.dialog--admin,
  .detail-page.dialog--compose {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .detail-page .dialog-body {
    padding: var(--sp-4);
  }

  .detail-page .profile-hero,
  .detail-page .profile-statuses,
  .detail-page .settings-body,
  .detail-page .thread-list,
  .detail-page .thread-reply,
  .detail-page .composer,
  .detail-page .search-results,
  .detail-page .search-bar > * {
    width: min(100%, 880px);
  }
}

/* Off-screen posts skip layout and paint work in long timelines. */
@layer views {
  .feed > .status,
  .feed > .notification {
    content-visibility: auto;
    contain-intrinsic-block-size: auto 260px;
  }
}

/* Wide detail routes use the available workspace instead of floating cards. */
@layer components {
  @media (min-width: 1100px) {
    .detail-page.dialog--profile .dialog-body {
      display: grid;
      grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
      gap: var(--sp-6);
      align-items: start;
    }

    .detail-page.dialog--profile .profile-hero,
    .detail-page.dialog--profile .profile-statuses {
      width: 100%;
      min-width: 0;
    }

    .detail-page.dialog--profile .profile-hero {
      position: sticky;
      top: 0;
    }

    .detail-page.thread-dialog .dialog-body {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
      gap: var(--sp-6);
      align-items: start;
    }

    .detail-page.thread-dialog .thread-list,
    .detail-page.thread-dialog .thread-reply {
      width: 100%;
      min-width: 0;
    }

    .detail-page.thread-dialog .thread-reply {
      position: sticky;
      top: 0;
      padding-left: var(--sp-4);
      border-left: 1px solid var(--border);
    }
  }
}

/* Compact density: shared 4/8/12px rhythm without sacrificing touch targets. */
@layer views {
  .status,
  .notification {
    padding: var(--sp-3) var(--sp-4);
  }

  .status-main {
    margin-top: var(--sp-1);
  }

  .status-boost {
    margin-bottom: var(--sp-1);
  }

  .status-actions {
    margin-top: var(--sp-1);
  }

  .poll,
  .quote,
  .media-grid,
  .link-card,
  .quote-notice {
    margin-top: var(--sp-2);
  }

  .poll {
    padding: var(--sp-2);
  }

  .poll-option {
    min-height: 34px;
    padding: var(--sp-1) var(--sp-2);
  }

  .poll-footer {
    margin-top: var(--sp-1);
  }

  .quote-head {
    padding: var(--sp-2) var(--sp-3);
  }

  .quote-body {
    padding: var(--sp-2) var(--sp-3);
  }

  .quote-author {
    margin-bottom: var(--sp-1);
  }

  .notification-head {
    gap: var(--sp-2);
  }

  .notification-status,
  .notification-actions {
    margin-top: var(--sp-2);
  }

  .notification-status {
    padding: var(--sp-2);
  }
}

@layer layout {
  .columns.is-focused .column:not(.is-nav-focus) {
    display: none;
  }

  .columns.is-focused .column.is-nav-focus {
    flex-basis: 100%;
    border-right: 0;
  }
}

@layer utilities {
  @media (max-width: 760px) {
    .status,
    .notification {
      padding: var(--sp-3);
    }
  }
}

/* Profiles are always left aligned, with explicit moderation controls. */
@layer views {
  .detail-page.dialog--profile .dialog-body,
  .profile-hero,
  .profile-head,
  .profile-name-block,
  .profile-statuses {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
    justify-items: start;
  }

  .profile-moderation {
    margin-top: var(--sp-3);
    padding: var(--sp-2);
    border: 1px solid color-mix(in oklab, var(--warning) 35%, var(--border));
    border-left: 3px solid var(--warning);
    border-radius: var(--radius-sm);
    background: color-mix(in oklab, var(--warning) 5%, var(--surface-2));
  }

  .profile-moderation-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
  }

  .profile-moderation-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--warning);
    font-size: var(--text-11);
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .profile-moderation-title .icon {
    width: 15px;
    height: 15px;
  }

  .button--moderation {
    border-color: color-mix(in oklab, var(--warning) 45%, var(--border));
    color: var(--warning);
    background: color-mix(in oklab, var(--warning) 7%, transparent);
  }

  .button--moderation:hover {
    background: color-mix(in oklab, var(--warning) 13%, transparent);
  }
}

/* Locally hosted Atkinson Hyperlegible (SIL Open Font License). */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('fonts/AtkinsonHyperlegible-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('fonts/AtkinsonHyperlegible-Bold.woff2') format('woff2');
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
}

@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('fonts/AtkinsonHyperlegible-Italic.woff2') format('woff2');
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('fonts/AtkinsonHyperlegible-BoldItalic.woff2') format('woff2');
  font-style: italic;
  font-weight: 600 900;
  font-display: swap;
}

@layer utilities {
  :root[data-font='atkinson'] {
    --font-sans: 'Atkinson Hyperlegible', ui-sans-serif, system-ui, sans-serif;
  }

  .theme-swatch--nord span:nth-child(1) { background: #2e3440; }
  .theme-swatch--nord span:nth-child(2) { background: #b48ead; }
  .theme-swatch--nord span:nth-child(3) { background: #88c0d0; }
  .theme-swatch--gruvbox span:nth-child(1) { background: #282828; }
  .theme-swatch--gruvbox span:nth-child(2) { background: #d3869b; }
  .theme-swatch--gruvbox span:nth-child(3) { background: #83a598; }
  .theme-swatch--monokai span:nth-child(1) { background: #272822; }
  .theme-swatch--monokai span:nth-child(2) { background: #ae81ff; }
  .theme-swatch--monokai span:nth-child(3) { background: #66d9ef; }
}

@layer utilities {
  .theme-swatch--botanical span:nth-child(1) { background: #f4f1e8; }
  .theme-swatch--botanical span:nth-child(2) { background: #39734d; }
  .theme-swatch--botanical span:nth-child(3) { background: #416d79; }
  .theme-swatch--coffee span:nth-child(1) { background: #241b18; }
  .theme-swatch--coffee span:nth-child(2) { background: #d9a066; }
  .theme-swatch--coffee span:nth-child(3) { background: #9fb4a4; }
}

@layer utilities {
  .theme-swatch--botanical-dark span:nth-child(1) { background: #14231a; }
  .theme-swatch--botanical-dark span:nth-child(2) { background: #a7c48c; }
  .theme-swatch--botanical-dark span:nth-child(3) { background: #91b7b6; }
  .theme-swatch--windows-95 span:nth-child(1) { background: #c0c0c0; }
  .theme-swatch--windows-95 span:nth-child(2) { background: #000080; }
  .theme-swatch--windows-95 span:nth-child(3) { background: #008080; }
  .theme-swatch--windows-311 span:nth-child(1) { background: #c0c0c0; }
  .theme-swatch--windows-311 span:nth-child(2) { background: #0000a8; }
  .theme-swatch--windows-311 span:nth-child(3) { background: #800080; }
  .theme-swatch--cde span:nth-child(1) { background: #bdb8c8; }
  .theme-swatch--cde span:nth-child(2) { background: #6b5d9c; }
  .theme-swatch--cde span:nth-child(3) { background: #647a8c; }
  .theme-swatch--beos span:nth-child(1) { background: #d8d8d8; }
  .theme-swatch--beos span:nth-child(2) { background: #f5b93c; }
  .theme-swatch--beos span:nth-child(3) { background: #3273a8; }
  .theme-swatch--dracula span:nth-child(1) { background: #282a36; }
  .theme-swatch--dracula span:nth-child(2) { background: #bd93f9; }
  .theme-swatch--dracula span:nth-child(3) { background: #ff79c6; }
  .theme-swatch--tokyo-night span:nth-child(1) { background: #1a1b26; }
  .theme-swatch--tokyo-night span:nth-child(2) { background: #7aa2f7; }
  .theme-swatch--tokyo-night span:nth-child(3) { background: #bb9af7; }
  .theme-swatch--rose-pine span:nth-child(1) { background: #191724; }
  .theme-swatch--rose-pine span:nth-child(2) { background: #ebbcba; }
  .theme-swatch--rose-pine span:nth-child(3) { background: #9ccfd8; }
  .theme-swatch--one-dark span:nth-child(1) { background: #282c34; }
  .theme-swatch--one-dark span:nth-child(2) { background: #61afef; }
  .theme-swatch--one-dark span:nth-child(3) { background: #98c379; }
  .theme-swatch--solarized-dark span:nth-child(1) { background: #002b36; }
  .theme-swatch--solarized-dark span:nth-child(2) { background: #268bd2; }
  .theme-swatch--solarized-dark span:nth-child(3) { background: #b58900; }
  .theme-swatch--solarized-light span:nth-child(1) { background: #fdf6e3; }
  .theme-swatch--solarized-light span:nth-child(2) { background: #268bd2; }
  .theme-swatch--solarized-light span:nth-child(3) { background: #2aa198; }

  :root[data-theme='windows-95'],
  :root[data-theme='windows-311'],
  :root[data-theme='cde'],
  :root[data-theme='beos'] {
    --font-sans: Tahoma, 'DejaVu Sans', Geneva, sans-serif;
  }

  :root[data-theme='windows-95'] .button,
  :root[data-theme='windows-95'] .icon-button,
  :root[data-theme='windows-311'] .button,
  :root[data-theme='windows-311'] .icon-button,
  :root[data-theme='cde'] .button,
  :root[data-theme='cde'] .icon-button,
  :root[data-theme='beos'] .button,
  :root[data-theme='beos'] .icon-button {
    box-shadow: inset 1px 1px 0 rgb(255 255 255 / 65%), inset -1px -1px 0 rgb(0 0 0 / 35%);
  }

  :root[data-theme='beos'] .column-header,
  :root[data-theme='beos'] .dialog-header {
    border-top: 3px solid var(--beos-tab, #f5b93c);
  }
}

@layer views {
  .detail-page.dialog--profile .dialog-body {
    justify-items: stretch;
  }

  .detail-page.dialog--profile .profile-hero,
  .detail-page.dialog--profile .profile-head,
  .detail-page.dialog--profile .profile-name-block,
  .detail-page.dialog--profile .profile-statuses {
    width: 100%;
  }
}

/* Retro themes are different interface systems, not simple recolours. */
@layer utilities {
  /* Windows 95: navy gradients, silver bevels and a teal desktop. */
  :root[data-theme='windows-95'] .topbar,
  :root[data-theme='windows-95'] .column-header,
  :root[data-theme='windows-95'] .detail-page .dialog-header {
    color: #fff;
    background: linear-gradient(90deg, #000080, #0878bc);
    border-color: #404040;
  }

  :root[data-theme='windows-95'] .topbar .brand-name,
  :root[data-theme='windows-95'] .column-title,
  :root[data-theme='windows-95'] .dialog-title,
  :root[data-theme='windows-95'] .dialog-subtitle,
  :root[data-theme='windows-95'] .topbar .rail-button,
  :root[data-theme='windows-95'] .topbar .icon-button,
  :root[data-theme='windows-95'] .column-header .icon-button,
  :root[data-theme='windows-95'] .dialog-header .icon-button {
    color: #fff;
  }

  :root[data-theme='windows-95'] .topbar .rail-button.is-active {
    color: #000;
    background: #c0c0c0;
  }

  :root[data-theme='windows-95'] .icon-button--compose {
    color: #000;
    background: #c0c0c0;
  }

  :root[data-theme='windows-95'] .column {
    border-right: 2px outset #dfdfdf;
  }

  :root[data-theme='windows-95'] .status,
  :root[data-theme='windows-95'] .notification {
    background: #c0c0c0;
    border-bottom-color: #808080;
  }

  :root[data-theme='windows-95'] .poll,
  :root[data-theme='windows-95'] .quote,
  :root[data-theme='windows-95'] .notification-status,
  :root[data-theme='windows-95'] .link-card,
  :root[data-theme='windows-95'] .settings-card,
  :root[data-theme='windows-95'] .composer {
    border: 2px inset #dfdfdf;
    background: #c0c0c0;
  }

  :root[data-theme='windows-95'] .button,
  :root[data-theme='windows-95'] .select,
  :root[data-theme='windows-95'] input,
  :root[data-theme='windows-95'] textarea {
    border: 2px outset #dfdfdf;
    color: #000;
    background: #c0c0c0;
  }

  :root[data-theme='windows-95'] .button--primary {
    color: #000;
    background: #c0c0c0;
  }

  :root[data-theme='windows-95'] .button:active,
  :root[data-theme='windows-95'] .icon-button:active {
    border-style: inset;
    box-shadow: none;
  }

  /* Windows 3.11: flat white Program Manager windows and hard black lines. */
  :root[data-theme='windows-311'] .topbar,
  :root[data-theme='windows-311'] .column-header,
  :root[data-theme='windows-311'] .detail-page .dialog-header {
    color: #000;
    background: #fff;
    border-color: #000;
  }

  :root[data-theme='windows-311'] .column-header,
  :root[data-theme='windows-311'] .detail-page .dialog-header {
    border-bottom: 4px double #000;
  }

  :root[data-theme='windows-311'] .topbar .rail-button.is-active {
    color: #fff;
    background: #000;
    box-shadow: none;
  }

  :root[data-theme='windows-311'] .column {
    border-right: 2px solid #000;
  }

  :root[data-theme='windows-311'] .status,
  :root[data-theme='windows-311'] .notification {
    background: #fff;
    border-bottom: 1px solid #000;
  }

  :root[data-theme='windows-311'] .status:hover,
  :root[data-theme='windows-311'] .notification:hover {
    background: #efefef;
  }

  :root[data-theme='windows-311'] .poll,
  :root[data-theme='windows-311'] .quote,
  :root[data-theme='windows-311'] .notification-status,
  :root[data-theme='windows-311'] .link-card,
  :root[data-theme='windows-311'] .settings-card,
  :root[data-theme='windows-311'] .composer {
    border: 2px solid #000;
    background: #fff;
    box-shadow: 3px 3px 0 #000;
  }

  :root[data-theme='windows-311'] .button,
  :root[data-theme='windows-311'] .icon-button,
  :root[data-theme='windows-311'] .select,
  :root[data-theme='windows-311'] input,
  :root[data-theme='windows-311'] textarea {
    border: 2px solid #000;
    color: #000;
    background: #fff;
    box-shadow: 2px 2px 0 #000;
  }

  :root[data-theme='windows-311'] .button--primary,
  :root[data-theme='windows-311'] .button:hover,
  :root[data-theme='windows-311'] .icon-button:hover {
    color: #fff;
    background: #000;
  }

  :root[data-theme='windows-311'] .action-button.is-active {
    color: #000;
    text-decoration: underline;
    text-decoration-thickness: 2px;
  }

  /* CDE: Motif titlebars, lavender bevels and striped grips. */
  :root[data-theme='cde'] .topbar,
  :root[data-theme='cde'] .column-header,
  :root[data-theme='cde'] .detail-page .dialog-header {
    color: #fff;
    background: linear-gradient(#756d94 0%, #5a5277 48%, #494160 52%, #5f567d 100%);
    border-color: #282238;
  }

  :root[data-theme='cde'] .topbar .brand-name,
  :root[data-theme='cde'] .column-title,
  :root[data-theme='cde'] .dialog-title,
  :root[data-theme='cde'] .dialog-subtitle,
  :root[data-theme='cde'] .topbar .rail-button,
  :root[data-theme='cde'] .topbar .icon-button,
  :root[data-theme='cde'] .column-header .icon-button,
  :root[data-theme='cde'] .dialog-header .icon-button {
    color: #fff;
  }

  :root[data-theme='cde'] .topbar .rail-button.is-active {
    color: #fff;
    background: rgb(255 255 255 / 15%);
    box-shadow: inset 2px 2px 0 #302940, inset -1px -1px 0 #a9a0c0;
  }

  :root[data-theme='cde'] .column-title::after,
  :root[data-theme='cde'] .dialog-title::after {
    content: '';
    display: inline-block;
    width: 48px;
    height: 8px;
    margin-left: 12px;
    vertical-align: middle;
    background: repeating-linear-gradient(0deg, transparent 0 1px, rgb(255 255 255 / 35%) 1px 2px);
  }

  :root[data-theme='cde'] .column {
    border-right: 2px ridge #aaa3b9;
  }

  :root[data-theme='cde'] .status,
  :root[data-theme='cde'] .notification {
    background: #bdb8c8;
    border-bottom-color: #777080;
  }

  :root[data-theme='cde'] .poll,
  :root[data-theme='cde'] .quote,
  :root[data-theme='cde'] .notification-status,
  :root[data-theme='cde'] .link-card,
  :root[data-theme='cde'] .settings-card,
  :root[data-theme='cde'] .composer {
    border: 2px ridge #d8d2e2;
    background: #c8c3d4;
  }

  :root[data-theme='cde'] .button,
  :root[data-theme='cde'] .icon-button {
    border: 2px outset #d8d2e2;
    background: #bdb8c8;
    box-shadow: none;
  }

  :root[data-theme='cde'] .button--primary,
  :root[data-theme='cde'] .icon-button--compose {
    color: #fff;
    background: #5a5277;
  }
}

/* Topbar: fixed-height row, nav buttons share the icon-button footprint. */
@layer layout {
  .app-shell {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .topbar {
    height: var(--topbar-h);
  }
}

@layer components {
  .rail-button--topbar {
    width: 34px;
    height: 34px;
    gap: 0;
    border-radius: var(--radius-sm);
  }

  .toast--confirm {
    flex-wrap: wrap;
    border-color: color-mix(in oklab, var(--danger) 45%, transparent);
    color: var(--text);
  }

  .toast--confirm .icon {
    color: var(--danger);
  }

  .toast-text {
    flex: 1;
    min-width: 0;
    font-weight: 600;
  }

  .toast-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
    width: 100%;
  }
}

@layer views {
  .media-view .dialog-body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
  }

  .media-view-stage {
    display: grid;
    flex: 1;
    min-height: 0;
    place-items: center;
    overflow: auto;
    border-radius: var(--radius-md);
    background: var(--surface-2);
  }

  .media-view-stage img,
  .media-view-stage video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .media-view-stage audio {
    width: min(600px, 100%);
  }

  .media-view-alt {
    max-width: 70ch;
    color: var(--text-soft);
    white-space: pre-wrap;
  }
}

@layer views {
  /* Active column: an accent rule under the header, no layout shift. */
  .columns:has(.column + .column) .column.is-active .column-header {
    box-shadow: inset 0 -2px 0 var(--accent);
  }
}

@layer components {
  /* Flush detail bodies (admin): tabs and toolbars sit directly under the header. */
  .detail-page .dialog-body--flush {
    padding: 0;
  }

  .detail-page .tabs {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface);
  }
}

@layer components {
  .icon-button.is-active {
    color: var(--accent);
    background: var(--accent-soft);
  }

  /* While a page covers the columns, the column tab is context, not location. */
  .topbar-nav.is-dimmed .rail-button.is-active,
  .rail.is-dimmed .rail-button.is-active {
    background: transparent;
    box-shadow: inset 0 -2px 0 var(--accent);
  }
}

@layer components {

  /* Scrollbars overlay the edge so row dividers run to the column border. */
  .columns,
  .column-body {
    scrollbar-gutter: auto;
  }
}

@layer components {
  /* Programmatic focus target (tabindex -1): announced, never a ring. */
  .dialog-title:focus {
    outline: none;
  }
}

@layer views {
  /* Hashtag results share the account row layout: name over meta, chevron at the end. */
  .search-hashtag .search-account-main {
    display: flex;
    flex-direction: column;
  }
}

@layer views {
  /* Profile posts are full-width rows like in columns, not content-sized cards. */
  .profile-statuses {
    justify-items: stretch;
  }
}

@layer views {
  /* Wide pages: media keeps a readable size instead of a 1000px crop. */
  .detail-page .media-grid {
    max-width: 600px;
  }
}

/* --------------------------------------------------------------------------
   Detail pages follow the column system: panels sit flush against the page
   header and left edge, separated by hairlines, with one 16px inner gutter.
   (utilities layer: this must win over the earlier padded variants.)
   -------------------------------------------------------------------------- */
@layer utilities {
  .detail-page .dialog-body:has(> .settings-body, > .composer, > .thread-list, > .profile-hero, > .media-view-stage, > .media-view-frame) {
    padding: 0;
  }

  /* Settings: one wide panel, sections as bands. */
  .detail-page .settings-body {
    width: min(100%, 880px);
    min-height: 100%;
    gap: 0;
    border-right: 1px solid var(--border);
    background: var(--surface);
  }

  .detail-page .settings-section {
    gap: 0;
  }

  .detail-page .settings-section-title {
    padding: var(--sp-4) var(--sp-4) var(--sp-2);
  }

  .detail-page .settings-card {
    border-width: 1px 0;
    border-radius: 0;
  }

  .detail-page .settings-section:first-child .settings-section-title {
    padding-top: var(--sp-3);
  }

  .detail-page .settings-section:last-child .settings-card {
    border-bottom: 0;
  }

  /* Composer: the page is the editor. */
  .detail-page > .dialog-body > .composer {
    width: min(100%, 880px);
    min-height: 100%;
    padding: var(--sp-4);
    border: 0;
    border-right: 1px solid var(--border);
    border-radius: 0;
    background: var(--surface);
    box-shadow: none;
  }

  /* Thread: conversation and reply share one edge-to-edge row. */
  .detail-page.thread-dialog .dialog-body {
    gap: 0;
  }

  .detail-page .thread-list {
    width: min(100%, 880px);
  }

  .detail-page .thread-reply {
    padding: var(--sp-4);
    border-top: 1px solid var(--border);
  }

  /* Profile: identity panel and posts, divided by a hairline. */
  .detail-page.dialog--profile .dialog-body {
    gap: 0;
  }

  .detail-page.dialog--profile .profile-hero {
    border-bottom: 1px solid var(--border);
  }

  .detail-page.dialog--profile .profile-statuses {
    border-top: 0;
  }

  /* Media: the stage fills the page. */
  .detail-page .media-view-stage {
    border-radius: 0;
  }

  .detail-page .media-view-alt {
    padding: 0 var(--sp-4) var(--sp-4);
  }

  @media (min-width: 1100px) {
    .detail-page.dialog--profile .profile-hero {
      min-height: 100%;
      border-bottom: 0;
      border-right: 1px solid var(--border);
    }

    .detail-page.thread-dialog .thread-list {
      width: 100%;
      min-height: 100%;
      border-right: 1px solid var(--border);
    }

    .detail-page.thread-dialog .thread-reply {
      padding: var(--sp-4);
      border: 0;
    }
  }
}

@layer utilities {
  /* Column picker: a hairline grid of rows instead of floating cards. */
  .detail-page .dialog-body:has(> .picker-grid, > .shortcut-list) {
    padding: 0;
  }

  .detail-page .picker-grid {
    gap: 0;
  }

  .detail-page .picker-card {
    align-items: center;
    padding: var(--sp-3) var(--sp-4);
    border: 0;
    border-radius: 0;
    background: var(--surface);
    box-shadow: inset -1px -1px 0 var(--border);
  }

  .detail-page .picker-card:hover {
    background: var(--hover);
  }

  .picker-card-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .picker-card-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
  }

  .picker-card-badge {
    padding: 0 var(--sp-2);
    border-radius: var(--radius-full);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: var(--text-10);
    font-weight: 700;
    line-height: 18px;
  }

  /* Shortcuts: a flush table, description as a padded lead. */
  .detail-page .dialog-body > .settings-desc:has(+ .shortcut-list) {
    padding: var(--sp-3) var(--sp-4);
  }

  .detail-page .shortcut-list {
    margin: 0;
    border-width: 1px 0;
    border-radius: 0;
  }

  .detail-page .shortcut-row {
    grid-template-columns: 112px minmax(0, 1fr);
    padding: var(--sp-2) var(--sp-4);
    background: var(--surface);
  }

  .shortcut-row kbd {
    justify-self: start;
    white-space: nowrap;
  }

  /* Reply composer inside a thread: part of the panel, tools wrap. */
  .thread-reply .composer {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .composer-toolbar,
  .composer-tools {
    flex-wrap: wrap;
  }
}

@layer utilities {
  @media (max-width: 760px) {
    /* Tabs share the width and wrap instead of scrolling a tab out of view. */
    .detail-page .tabs {
      flex-wrap: wrap;
      padding-inline: var(--sp-2);
    }

    .detail-page .tab {
      flex: 1 1 auto;
      justify-content: center;
      padding: 0 var(--sp-2);
    }
  }
}

@layer utilities {
  /* Custom emoji are text: inline at 1.2em everywhere (names, notifications, admin). */
  img.custom-emoji,
  img.emojione {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    max-width: none;
    margin: 0 0.05em;
    vertical-align: -0.2em;
    object-fit: contain;
  }
}

@layer utilities {
  .picker-list-item > span {
    flex: 1;
    min-width: 0;
  }

  .stack > .settings-section-title {
    padding: 0;
  }
}

@layer utilities {
  .media-caption {
    margin-top: var(--sp-2);
    color: var(--muted);
    font-size: var(--text-12);
    line-height: 1.5;
  }

  .menu-item > span:not(.avatar) {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .menu-item[aria-checked="true"] {
    color: var(--text);
  }

  .menu-item[aria-checked="true"] > .icon:last-child {
    color: var(--accent);
  }

  #login-back {
    position: absolute;
    top: var(--sp-4);
    left: var(--sp-4);
  }
}

@layer utilities {
  .field input,
  .field select {
    min-height: 24px;
  }
}

/* Command palette, undo window, alt guard, calm mode. */
@layer components {
  .palette {
    position: fixed;
    inset: calc(var(--topbar-h) + var(--sp-2)) 0 auto;
    z-index: 3000;
    width: min(560px, calc(100vw - var(--sp-4) * 2));
    max-height: min(480px, calc(100dvh - var(--topbar-h) - var(--sp-8)));
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-3);
  }

  .palette:popover-open {
    animation: menu-in var(--dur-1) var(--ease);
  }

  .palette-field {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0 var(--sp-4);
    border-bottom: 1px solid var(--border);
    color: var(--faint);
  }

  .palette-input {
    flex: 1;
    min-width: 0;
    height: var(--header-h);
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: var(--text-14);
    outline: none;
  }

  .palette-list {
    margin: 0;
    padding: var(--sp-1);
    overflow-y: auto;
    list-style: none;
  }

  .palette-option {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 36px;
    padding: 0 var(--sp-3);
    border-radius: var(--radius-sm);
    color: var(--text-soft);
    font-size: var(--text-13);
    cursor: pointer;
  }

  .palette-option .icon {
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--faint);
  }

  .palette-option[aria-selected="true"] {
    background: var(--accent-soft);
    color: var(--text);
  }

  .palette-option[aria-selected="true"] .icon {
    color: var(--accent);
  }

  .palette-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .palette-group {
    color: var(--faint);
    font-size: var(--text-11);
  }

  .palette kbd {
    padding: 0 var(--sp-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--faint);
    font-family: var(--font-mono);
    font-size: var(--text-11);
  }

  .palette-empty {
    padding: var(--sp-4);
    color: var(--muted);
    font-size: var(--text-13);
    text-align: center;
  }

  .composer-submit.is-holding {
    background: var(--surface-3);
    color: var(--text);
    box-shadow: inset 0 0 0 1px var(--border-strong);
  }

  .composer-tip {
    display: block;
    margin-top: var(--sp-1);
    color: var(--muted);
  }

  .media-alt--missing {
    background: color-mix(in oklab, var(--warning) 85%, var(--ctp-crust));
    color: var(--ctp-crust);
  }
}

@layer utilities {
  .button[aria-pressed="true"] {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
  }

  [data-calm="on"] :is(.action-button--boost, .action-button--favourite) > span,
  [data-calm="on"] .profile-stat--social {
    display: none;
  }
}

@layer utilities {
  /* Keep toasts clear of a detail page's action footer. */
  @media (min-width: 761px) {
    body:has(#detail-view:not([hidden]) .dialog-footer:not([hidden])) .toasts {
      bottom: calc(var(--sp-4) + 64px);
    }
  }
}

/* Clickable names everywhere, expandable notification groups, moderation history. */
@layer components {
  .account-link {
    max-width: 100%;
    overflow: hidden;
    color: var(--text);
    font: inherit;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
  }

  .account-link:hover,
  .status-acct:hover,
  .admin-account-acct:hover {
    color: var(--accent);
    text-decoration: underline;
  }

  button.admin-account-acct {
    display: block;
    min-height: 24px;
    text-align: left;
  }

  .notification-details {
    margin-top: var(--sp-2);
  }

  .notification-details > summary {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    min-height: 24px;
    color: var(--muted);
    font-size: var(--text-12);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
  }

  .notification-details > summary::-webkit-details-marker {
    display: none;
  }

  .notification-details > summary:hover {
    color: var(--accent);
  }

  .notification-details > summary .icon {
    width: 14px;
    height: 14px;
    transition: transform var(--dur-1) var(--ease);
  }

  .notification-details[open] > summary .icon {
    transform: rotate(90deg);
  }

  .notification-group-list {
    margin: var(--sp-2) 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .account-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 44px;
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--border);
  }

  .account-row:last-child {
    border-bottom: 0;
  }

  .account-row-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    align-items: flex-start;
  }

  .notification-group-more {
    padding: var(--sp-2) var(--sp-3);
    color: var(--muted);
    font-size: var(--text-12);
  }

  .profile-moderation-history {
    margin: var(--sp-2) 0 0;
    color: var(--muted);
    font-size: var(--text-12);
  }
}

/* Admin overview, block sections, trends; profile extras; drop target. */
@layer components {
  .admin-section-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0;
    padding: var(--sp-4) var(--sp-4) var(--sp-2);
    color: var(--faint);
    font-size: var(--text-11);
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .admin-section-title .icon {
    width: 14px;
    height: 14px;
  }

  .admin-subsection {
    border-top: 1px solid var(--border);
  }

  .admin-subsection > .settings-desc {
    padding: 0 var(--sp-4) var(--sp-3);
  }

  .admin-block.is-decided {
    opacity: 0.5;
  }

  .stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--sp-3);
    padding: 0 var(--sp-4) var(--sp-4);
  }

  .stat-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-1);
    padding: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--text);
    text-align: left;
  }

  button.stat-tile:hover {
    border-color: var(--accent);
  }

  .stat-label {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--muted);
    font-size: var(--text-12);
    font-weight: 600;
  }

  .stat-label .icon {
    width: 14px;
    height: 14px;
  }

  .stat-value {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: var(--text-24);
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
  }

  .stat-delta {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    color: var(--muted);
    font-size: var(--text-11);
  }

  .stat-list {
    display: grid;
    gap: var(--sp-1);
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-13);
  }

  .stat-list li {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-2);
  }

  .stat-list li > :last-child {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .admin-block > img {
    flex: none;
    object-fit: contain;
  }

  .stat-delta .icon {
    width: 12px;
    height: 12px;
  }

  .profile-familiar {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    color: var(--muted);
    font-size: var(--text-12);
  }

  .profile-familiar-avatars {
    display: inline-flex;
    flex: none;
  }

  .profile-familiar-avatars > * + * {
    margin-left: -6px;
  }

  .profile-familiar .account-link {
    font-weight: 600;
  }

  .profile-note {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
  }

  .profile-note-input {
    width: 100%;
    min-height: 44px;
    padding: var(--sp-2) var(--sp-3);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: var(--text-13);
    resize: vertical;
  }

  .profile-note-input:focus {
    border-style: solid;
    border-color: var(--accent);
  }

  .composer.is-dropping {
    outline: 2px dashed var(--accent);
    outline-offset: -6px;
  }
}

@layer utilities {
  .admin-list {
    min-height: 0;
  }
}

/* Profile rhythm: badges, moderation head and private note on the same 16px grid. */
@layer utilities {
  .profile-badges:empty {
    display: none;
  }

  .profile-name-block + .profile-actions,
  .profile-badges {
    margin-bottom: var(--sp-3);
  }

  .profile-moderation-head {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .profile-moderation-head .risk-chip {
    margin-left: auto;
  }

  .profile-moderation-history {
    margin: 0 0 var(--sp-3);
  }

  .profile-moderation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
  }

  .profile-note {
    align-self: stretch;
    width: 100%;
  }

  .profile-moderation,
  .profile-head > .risk-card {
    margin-top: var(--sp-4);
  }

  .profile-note .settings-section-title {
    padding: 0;
  }
}

/* Media gallery: stage with previous/next controls; swipe on touch. */
@layer utilities {
  .media-view-frame {
    position: relative;
    display: flex;
    flex: 1;
    min-height: 0;
  }

  .media-view-frame > .media-view-stage {
    flex: 1;
    touch-action: pan-y pinch-zoom;
  }

  .media-view-nav {
    position: absolute;
    top: 50%;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: color-mix(in oklab, var(--surface) 88%, transparent);
    color: var(--text);
    box-shadow: var(--shadow-1);
    transform: translateY(-50%);
  }

  .media-view-nav--prev {
    left: var(--sp-4);
  }

  .media-view-nav--next {
    right: var(--sp-4);
  }

  .media-view-nav:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
  }

  .media-view-nav:disabled {
    opacity: 0;
    pointer-events: none;
  }

  .media-view-nav .icon {
    width: 20px;
    height: 20px;
  }
}

/* Account lists, interactions, edit history, read more, new-post pill, settings groups. */
@layer components {
  .account-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .account-list--flush .account-row {
    padding-inline: var(--sp-4);
  }

  .account-row--empty {
    color: var(--muted);
    font-size: var(--text-13);
  }

  .profile-stat--social {
    color: inherit;
    font: inherit;
  }

  .profile-stat--social:hover {
    color: var(--accent);
  }

  .status-edited {
    color: inherit;
    font: inherit;
  }

  .status-edited:hover {
    color: var(--accent);
    text-decoration: underline;
  }

  .has-nickname > span {
    border-bottom: 1px dotted currentColor;
  }

  .tab-count {
    margin-left: var(--sp-1);
    color: var(--faint);
    font-variant-numeric: tabular-nums;
  }

  .edit-history {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .edit-version {
    padding: var(--sp-4);
    border-bottom: 1px solid var(--border);
  }

  .edit-version-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
    color: var(--muted);
    font-size: var(--text-12);
  }

  .edit-version-head strong {
    color: var(--text);
  }

  .edit-version-text {
    margin: 0;
    color: var(--text);
    font-size: var(--text-14);
    line-height: 1.6;
    white-space: pre-wrap;
  }

  .edit-version-text ins {
    background: color-mix(in oklab, var(--success) 22%, transparent);
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--success);
  }

  .edit-version-text del {
    background: color-mix(in oklab, var(--danger) 18%, transparent);
    color: var(--muted);
    text-decoration: line-through;
  }

  .status-content.is-collapsed {
    max-height: calc(1.55em * 10);
    overflow: hidden;
    mask-image: linear-gradient(to bottom, #000 70%, transparent);
  }

  .read-more {
    min-height: 24px;
    margin-top: var(--sp-1);
    color: var(--accent);
    font: inherit;
    font-size: var(--text-13);
    font-weight: 650;
  }

  .read-more:hover {
    text-decoration: underline;
  }

  .column {
    position: relative;
  }

  .new-posts-pill {
    position: absolute;
    top: calc(var(--header-h) + var(--sp-2));
    left: 50%;
    z-index: 3;
    min-height: 32px;
    padding: 0 var(--sp-4);
    border-radius: var(--radius-full);
    background: var(--accent);
    color: var(--on-accent);
    font-size: var(--text-12);
    font-weight: 700;
    box-shadow: var(--shadow-2);
    transform: translateX(-50%);
  }

  .new-posts-pill[hidden] {
    display: none;
  }

  .settings-details {
    border-bottom: 1px solid var(--border);
  }

  .settings-details:last-child {
    border-bottom: 0;
  }

  .settings-details > summary {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 48px;
    padding: 0 var(--sp-4);
    color: var(--text);
    font-size: var(--text-13);
    font-weight: 650;
    cursor: pointer;
    list-style: none;
  }

  .settings-details > summary::-webkit-details-marker {
    display: none;
  }

  .settings-details > summary .icon {
    width: 14px;
    height: 14px;
    color: var(--faint);
    transition: transform var(--dur-1) var(--ease);
  }

  .settings-details[open] > summary .icon {
    transform: rotate(90deg);
  }

  .settings-control--row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
  }

  .list-rows {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
  }

  .list-row {
    min-height: 44px;
    padding: 0 var(--sp-3);
    border-bottom: 1px solid var(--border);
  }

  .list-row:last-child {
    border-bottom: 0;
  }

  .composer-tool--text {
    font-family: var(--font-mono);
    font-size: var(--text-11);
    font-weight: 750;
  }

  .composer-tool--text[aria-pressed="true"] {
    background: var(--accent-soft);
    color: var(--accent);
  }

  .load-more {
    display: block;
    margin: var(--sp-4) auto;
  }
}

/* Raid banner, read marker, conversation overview, do-not-disturb chip. */
@layer components {
  .raid-banner {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid color-mix(in oklab, var(--danger) 40%, var(--border));
    background: color-mix(in oklab, var(--danger) 10%, var(--surface));
    color: var(--text);
    font-size: var(--text-13);
  }

  .raid-banner[hidden] {
    display: none;
  }

  .raid-banner-text {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    line-height: 1.45;
  }

  .raid-banner-text .icon {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    color: var(--danger);
  }

  .raid-banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
  }

  .raid-banner .account-list {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
  }

  .read-marker {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-4);
    color: var(--accent);
    font-size: var(--text-11);
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .read-marker::before,
  .read-marker::after {
    content: "";
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
  }

  .thread-overview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
    color: var(--muted);
    font-size: var(--text-12);
  }

  .thread-overview-avatars {
    display: inline-flex;
    gap: var(--sp-2);
  }

  .thread-overview-avatars > * {
    position: relative;
    overflow: visible;
  }

  .thread-overview-count {
    position: absolute;
    right: -4px;
    bottom: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: var(--radius-full);
    background: var(--accent);
    color: var(--on-accent);
    font-size: var(--text-10);
    font-weight: 750;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--surface);
  }

  .dnd-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    min-height: 28px;
    margin-right: var(--sp-2);
    padding: 0 var(--sp-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-full);
    color: var(--muted);
    font-size: var(--text-12);
    font-weight: 600;
  }

  .dnd-chip:hover {
    border-color: var(--accent);
    color: var(--accent);
  }

  .dnd-chip[hidden] {
    display: none;
  }

  .dnd-chip .icon {
    width: 14px;
    height: 14px;
  }
}

/* Sign-up facts (admin): compact label/value grid. */
@layer components {
  .signup-details {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--sp-1) var(--sp-3);
    margin: var(--sp-2) 0 0;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    font-size: var(--text-12);
  }

  .signup-row {
    display: contents;
  }

  .signup-details dt {
    color: var(--muted);
    font-weight: 600;
  }

  .signup-details dd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1) var(--sp-2);
    min-width: 0;
    margin: 0;
    color: var(--text);
  }

  .signup-value {
    overflow-wrap: anywhere;
  }

  .signup-reason {
    white-space: pre-wrap;
  }

  .signup-action {
    color: var(--danger);
    font-size: var(--text-12);
    font-weight: 650;
  }

  .profile-moderation .signup-details {
    margin-bottom: var(--sp-3);
  }

  .admin-report > .signup-details {
    margin: var(--sp-3) 0 0;
  }
}

@layer components {
  .account-row:has(> .signup-details) {
    flex-wrap: wrap;
  }

  /* Inside a bordered list the row is the box: facts span it edge to edge, no nested card. */
  .account-row > .signup-details {
    flex-basis: 100%;
    margin: 0;
    padding: var(--sp-2) 0 0;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    background: none;
  }

  .signup-action {
    text-align: left;
    white-space: nowrap;
  }
}

@layer utilities {
  /* Composer selects as wide as their value, so narrow composers keep one toolbar row. */
  .composer .select {
    field-sizing: content;
  }
}

/* Focus mode: one column, wide and centred, without topbar and rail. */
@layer utilities {
  .zen-exit {
    display: none;
  }

  [data-zen='on'] :is(.topbar, .rail, .column:not(.is-active)) {
    display: none;
  }

  [data-zen='on'] .app-shell {
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  }

  [data-zen='on'] .columns {
    grid-area: 1 / 1;
    justify-content: center;
  }

  [data-zen='on'] .column {
    flex: 0 1 720px;
    width: auto;
  }

  [data-zen='on'] .status-content {
    font-size: var(--text-16);
    line-height: 1.7;
  }

  [data-zen='on'] .zen-exit {
    position: fixed;
    inset: auto var(--sp-4) var(--sp-4) auto;
    z-index: 100;
    display: inline-flex;
  }
}