/* ========================================
   tokens.css — Design Tokens
   ========================================
   Palette tokens, semantic tokens, and type-tag tokens.
   Theme-aware tokens swap values in dark-mode blocks below.
   ======================================== */

/* ========================================
   PaletteToken — frozen across themes
   ======================================== */
:root {
  --brand-brown-50:  #fdf8f6;
  --brand-brown-100: #f2e8e5;
  --brand-brown-200: #eaddd7;
  --brand-brown-300: #e0cec7;
  --brand-brown-400: #d2bab0;
  --brand-brown-500: #bfa094;
  --brand-brown-600: #7f5539;
  --brand-brown-700: #6b4423;
  --brand-brown-800: #4a2c2a;
  --brand-brown-900: #3d2319;
  --brand-brown-950: #2a1610;

  --brand-amber-50:  #fffbeb;
  --brand-amber-100: #fef3c7;
  --brand-amber-200: #fde68a;
  --brand-amber-300: #fcd34d;
  --brand-amber-400: #fbbf24;
  --brand-amber-500: #f59e0b;
  --brand-amber-600: #d97706;
  --brand-amber-700: #b45309;
  --brand-amber-800: #92400e;
  --brand-amber-900: #78350f;

  --brand-red-50:  #fef2f2;
  --brand-red-100: #fee2e2;
  --brand-red-200: #fecaca;
  --brand-red-300: #fca5a5;
  --brand-red-400: #f87171;
  --brand-red-500: #ef4444;
  --brand-red-600: #dc2626;
  --brand-red-700: #b91c1c;
  --brand-red-800: #991b1b;
  --brand-red-900: #7f1d1d;

  --brand-green-100: #dcfce7;
  --brand-green-200: #bbf7d0;
  --brand-green-500: #22c55e;
  --brand-green-600: #16a34a;
  --brand-green-700: #15803d;
  --brand-green-800: #166534;

  --brand-blue-100: #dbeafe;
  --brand-blue-200: #bfdbfe;
  --brand-blue-400: #60a5fa;
  --brand-blue-700: #1d4ed8;
  --brand-blue-800: #1e40af;

  --brand-purple-100: #f3e8ff;
  --brand-purple-200: #e9d5ff;
  --brand-purple-700: #7e22ce;
  --brand-purple-800: #6b21a8;

  --brand-gray-100: #f3f4f6;
  --brand-gray-800: #1f2937;

  --brand-cream-50: #FAF7F5;
}

/* ========================================
   Texture & Surface Tokens
   ======================================== */
:root {
  /* Corkboard — organic, fine-grained, warm */
  --texture-cork: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0.3 0 0 0 0.15 0.2 0 0 0 0.08 0.1 0 0 0 0.02 0 0 0 0.15 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23c)'/%3E%3C/svg%3E");
  /* Feed board — warm cork brown */
  --feed-board-bg: #C4A882;
  --feed-board-border: #B09470;
  /* Sticky note base — warm off-white */
  --feed-card-bg: #FFFDF5;
  /* Dot-grid + kraft — defined once per theme, theme blocks just swap the active alias */
  --texture-dotgrid-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='0.7' fill='%23d2bab0' fill-opacity='0.35'/%3E%3C/svg%3E");
  --texture-dotgrid-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='0.7' fill='%235A4A40' fill-opacity='0.4'/%3E%3C/svg%3E");
  --texture-kraft-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0.15 0 0 0 0.1 0.1 0 0 0 0.06 0.05 0 0 0 0.02 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23k)'/%3E%3C/svg%3E");
  --texture-kraft-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0.08 0 0 0 0.04 0.06 0 0 0 0.03 0.03 0 0 0 0.01 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23k)'/%3E%3C/svg%3E");
  --texture-dotgrid: var(--texture-dotgrid-light);
  --texture-kraft: var(--texture-kraft-light);
  /* Journal paper — warm cream */
  --journal-bg: #FFFDF5;
  /* Kraft — slightly warmer/darker than card bg */
  --kraft-bg: #F7F0E8;
}

/* ========================================
   SemanticToken — Light theme (default)
   ======================================== */
:root {
  /* Page */
  --page-bg: #FAF7F5;
  --page-text: #3d2319;

  /* Cards */
  --card-bg: #FFFFFF;
  --card-border: #eaddd7;
  --card-shadow: rgba(61, 35, 25, 0.06);
  --card-shadow-hover: rgba(61, 35, 25, 0.10);

  /* Surfaces (inset areas inside cards) */
  --surface-bg: rgba(250, 247, 245, 0.5);
  --surface-border: #f2e8e5;

  /* Header */
  --header-bg-from: #4a2c2a;
  --header-bg-to: #3d2319;
  --header-border: #7f5539;
  --header-text: #FAF7F5;

  /* Text hierarchy */
  --text-primary: #3d2319;
  --text-secondary: #4a2c2a;
  --text-emphasis: #6b4423;
  --text-muted: #7f5539;
  --text-faint: #8a6758;
  --text-placeholder: #d2bab0;

  /* Interactive */
  --btn-primary-bg: #4a2c2a;
  --btn-primary-bg-hover: #3d2319;
  --btn-primary-text: #FAF7F5;
  --btn-secondary-bg: #FFFFFF;
  --btn-secondary-border: #e0cec7;
  --btn-secondary-text: #6b4423;
  --btn-secondary-bg-hover: #FAF7F5;

  /* Forms */
  --input-bg: #FFFFFF;
  --input-border: #e0cec7;
  --input-border-focus: #7f5539;
  --input-ring-focus: rgba(127, 85, 57, 0.15);
  --input-bg-focus: rgba(250, 247, 245, 0.3);

  /* Tables */
  --table-bg: #FFFFFF;
  --table-header-bg: #FAF7F5;
  --table-border: #eaddd7;
  --table-row-hover: #FAF7F5;
  --table-divider: #f2e8e5;

  /* Modals */
  --modal-bg: #FFFFFF;
  --modal-border: #eaddd7;
  --modal-backdrop: rgba(0, 0, 0, 0.4);

  /* Avatar ring */
  --avatar-ring: #6b4423;
  --avatar-ring-hover: #4a2c2a;

  /* TypeTagToken — entity-type accent colors */
  --type-brew: #6b4423;
  --type-bean: #b45309;
  --type-recipe: #a0522d;
  --type-roaster: #92400e;
  --type-grinder: #78716c;
  --type-brewer: #5b6e4e;
  /* Cross-app accent fallbacks (oolong overrides these in its theme;
     arabica picks defaults so the same pill classes render reasonably
     even if arabica eventually exposes these entities). */
  --type-tea: #4a6741;
  --type-vendor: #92400e;
  --type-cafe: #7d5a3a;
  --type-drink: #8b6f47;

  /* Type background tints */
  --type-brew-tint: rgba(107, 68, 35, 0.14);
  --type-bean-tint: rgba(180, 83, 9, 0.12);
  --type-recipe-tint: rgba(160, 82, 45, 0.12);
  --type-roaster-tint: rgba(146, 64, 14, 0.12);
  --type-grinder-tint: rgba(120, 113, 108, 0.10);
  --type-brewer-tint: rgba(91, 110, 78, 0.12);
  --type-tea-tint: rgba(74, 103, 65, 0.12);
  --type-vendor-tint: rgba(146, 64, 14, 0.12);
  --type-cafe-tint: rgba(125, 90, 58, 0.12);
  --type-drink-tint: rgba(139, 111, 71, 0.12);

  /* Rating badges */
  --rating-bg: #fef3c7;
  --rating-text: #78350f;

  /* Status text — danger / success */
  --text-danger: #b91c1c;
  --text-success: #15803d;

  /* Alerts/warnings */
  --alert-warning-bg: #fffbeb;
  --alert-warning-border: #fbbf24;
  --alert-warning-text: #78350f;
  --alert-warning-text-muted: #92400e;

  /* Shadows */
  --shadow-sm: 0 1px 3px var(--card-shadow);
  --shadow-md: 0 4px 12px var(--card-shadow-hover);
  --shadow-lg: 0 10px 25px var(--card-shadow-hover);

  /* Footer */
  --footer-bg: #FAF7F5;
  --footer-border: #eaddd7;
}

/* ========================================
   Dark theme — via OS preference
   ======================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Page */
    --page-bg: #0F0A08;
    --page-text: #FAF7F5;

    /* Cards */
    --card-bg: #1C1210;
    --card-border: #2E211B;
    --card-shadow: rgba(0, 0, 0, 0.3);
    --card-shadow-hover: rgba(0, 0, 0, 0.4);

    /* Surfaces (inset areas inside cards) */
    --surface-bg: rgba(36, 26, 22, 0.6);
    --surface-border: #2E211B;

    /* Journal/label page backgrounds */
    --texture-dotgrid: var(--texture-dotgrid-dark);
    --texture-kraft: var(--texture-kraft-dark);
    --journal-bg: #1A1210;
    --kraft-bg: #201814;

    /* Feed board — noticeably lighter than cards for contrast */
    --feed-board-bg: #3D2D22;
    --feed-board-border: #4A3828;
    /* Sticky notes — dark, sitting on the lighter board */
    --feed-card-bg: #1A1210;

    /* Header */
    --header-bg-from: #0F0A08;
    --header-bg-to: #0F0A08;
    --header-border: #2E211B;
    --header-text: #FAF7F5;

    /* Text hierarchy */
    --text-primary: #FAF7F5;
    --text-secondary: #E0CEC4;
    --text-emphasis: #E0CEC4;
    --text-muted: #C4A898;
    --text-faint: #A98F82;
    --text-placeholder: #5A4A40;

    /* Interactive */
    --btn-primary-bg: #7f5539;
    --btn-primary-bg-hover: #6b4423;
    --btn-primary-text: #FAF7F5;
    --btn-secondary-bg: #241A16;
    --btn-secondary-border: #3D2D24;
    --btn-secondary-text: #E0CEC4;
    --btn-secondary-bg-hover: #2E211B;

    /* Forms */
    --input-bg: #241A16;
    --input-border: #3D2D24;
    --input-border-focus: #fbbf24;
    --input-ring-focus: rgba(251, 191, 36, 0.15);
    --input-bg-focus: rgba(36, 26, 22, 0.8);

    /* Tables */
    --table-bg: #1C1210;
    --table-header-bg: #241A16;
    --table-border: #2E211B;
    --table-row-hover: #241A16;
    --table-divider: #241A16;

    /* Modals */
    --modal-bg: #1C1210;
    --modal-border: #2E211B;
    --modal-backdrop: rgba(0, 0, 0, 0.6);

    /* Avatar ring */
    --avatar-ring: #3D2D24;
    --avatar-ring-hover: #5A4A40;

    /* TypeTagToken — entity-type accent colors */
    --type-brew: #a67c52;
    --type-bean: #d97706;
    --type-recipe: #c4724a;
    --type-roaster: #c2610e;
    --type-grinder: #a8a29e;
    --type-brewer: #8ba37a;
    --type-tea: #94b585;
    --type-vendor: #c2610e;
    --type-cafe: #b89472;
    --type-drink: #c2a47d;

    /* Type background tints */
    --type-brew-tint: rgba(166, 124, 82, 0.18);
    --type-bean-tint: rgba(217, 119, 6, 0.15);
    --type-recipe-tint: rgba(196, 114, 74, 0.15);
    --type-roaster-tint: rgba(194, 97, 14, 0.15);
    --type-grinder-tint: rgba(168, 162, 158, 0.12);
    --type-brewer-tint: rgba(139, 163, 122, 0.15);
    --type-tea-tint: rgba(148, 181, 133, 0.18);
    --type-vendor-tint: rgba(194, 97, 14, 0.15);
    --type-cafe-tint: rgba(184, 148, 114, 0.15);
    --type-drink-tint: rgba(194, 164, 125, 0.15);

    /* Rating badges */
    --rating-bg: rgba(251, 191, 36, 0.15);
    --rating-text: #fbbf24;

    /* Status text — danger / success */
    --text-danger: #fca5a5;
    --text-success: #86efac;

    /* Alerts/warnings */
    --alert-warning-bg: rgba(251, 191, 36, 0.08);
    --alert-warning-border: rgba(251, 191, 36, 0.3);
    --alert-warning-text: #fde68a;
    --alert-warning-text-muted: #fcd34d;

    /* Shadows - darker, less visible on dark bg */
    --shadow-sm: 0 1px 3px var(--card-shadow);
    --shadow-md: 0 4px 12px var(--card-shadow-hover);
    --shadow-lg: 0 10px 25px var(--card-shadow-hover);

    /* Footer */
    --footer-bg: #0F0A08;
    --footer-border: #2E211B;
  }
}

/* ========================================
   Dark theme — forced via data-theme="dark"
   ======================================== */
:root[data-theme="dark"] {
  --page-bg: #0F0A08;
  --page-text: #FAF7F5;
  --card-bg: #1C1210;
  --card-border: #2E211B;
  --card-shadow: rgba(0, 0, 0, 0.3);
  --card-shadow-hover: rgba(0, 0, 0, 0.4);
  --surface-bg: rgba(36, 26, 22, 0.6);
  --surface-border: #2E211B;
  --feed-board-bg: #3D2D22;
  --feed-board-border: #4A3828;
  --feed-card-bg: #1A1210;
  --texture-dotgrid: var(--texture-dotgrid-dark);
  --texture-kraft: var(--texture-kraft-dark);
  --journal-bg: #1A1210;
  --kraft-bg: #201814;
  --header-bg-from: #0F0A08;
  --header-bg-to: #0F0A08;
  --header-border: #2E211B;
  --header-text: #FAF7F5;
  --text-primary: #FAF7F5;
  --text-secondary: #E0CEC4;
  --text-emphasis: #E0CEC4;
  --text-muted: #C4A898;
  --text-faint: #A98F82;
  --text-placeholder: #5A4A40;
  --btn-primary-bg: #7f5539;
  --btn-primary-bg-hover: #6b4423;
  --btn-primary-text: #FAF7F5;
  --btn-secondary-bg: #241A16;
  --btn-secondary-border: #3D2D24;
  --btn-secondary-text: #E0CEC4;
  --btn-secondary-bg-hover: #2E211B;
  --input-bg: #241A16;
  --input-border: #3D2D24;
  --input-border-focus: #fbbf24;
  --input-ring-focus: rgba(251, 191, 36, 0.15);
  --input-bg-focus: rgba(36, 26, 22, 0.8);
  --table-bg: #1C1210;
  --table-header-bg: #241A16;
  --table-border: #2E211B;
  --table-row-hover: #241A16;
  --table-divider: #241A16;
  --modal-bg: #1C1210;
  --modal-border: #2E211B;
  --modal-backdrop: rgba(0, 0, 0, 0.6);
  --avatar-ring: #3D2D24;
  --avatar-ring-hover: #5A4A40;
  --type-brew: #a67c52;
  --type-bean: #d97706;
  --type-recipe: #c4724a;
  --type-roaster: #c2610e;
  --type-grinder: #a8a29e;
  --type-brewer: #8ba37a;
  --type-brew-tint: rgba(166, 124, 82, 0.18);
  --type-bean-tint: rgba(217, 119, 6, 0.15);
  --type-recipe-tint: rgba(196, 114, 74, 0.15);
  --type-roaster-tint: rgba(194, 97, 14, 0.15);
  --type-grinder-tint: rgba(168, 162, 158, 0.12);
  --type-brewer-tint: rgba(139, 163, 122, 0.15);
  --rating-bg: rgba(251, 191, 36, 0.15);
  --rating-text: #fbbf24;
  --text-danger: #fca5a5;
  --text-success: #86efac;
  --alert-warning-bg: rgba(251, 191, 36, 0.08);
  --alert-warning-border: rgba(251, 191, 36, 0.3);
  --alert-warning-text: #fde68a;
  --alert-warning-text-muted: #fcd34d;
  --shadow-sm: 0 1px 3px var(--card-shadow);
  --shadow-md: 0 4px 12px var(--card-shadow-hover);
  --shadow-lg: 0 10px 25px var(--card-shadow-hover);
  --footer-bg: #0F0A08;
  --footer-border: #2E211B;
}
/* ========================================
   reset.css — Preflight-equivalent
   ========================================
   Minimal reset based on Tailwind v4 Preflight.
   ======================================== */

/* Box-sizing border-box by default */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul,
li,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Remove list styling */
ol,
ul {
  list-style: none;
  padding: 0;
}

/* Make images easier to work with */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Inherit fonts for form elements */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Remove default button styling */
button {
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
}

/* Remove default link styling */
a {
  color: inherit;
  text-decoration: inherit;
}

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

/* Remove textarea resize default */
textarea {
  resize: vertical;
}

/* Reset all scrolling to auto */
html {
  -webkit-text-size-adjust: 100%;
}

/* Default border color shim */
*,
::after,
::before,
::file-selector-button {
  border-color: var(--card-border, currentcolor);
}

/* h1-h3 font-weight from app.css base layer */
h1, h2, h3 {
  font-weight: 600;
}

/* 44px touch targets for interactive elements */
button,
input[type="submit"],
input[type="button"] {
  min-height: 44px;
  min-width: 44px;
}

/* Filter pills opt out of the 44px touch target */
[class*="filter-pill"] {
  min-height: auto;
  min-width: auto;
}

/* Global keyboard focus ring */
:focus-visible {
  outline: 2px solid var(--input-border-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Prevent iOS zoom on input focus */
@media (max-width: 768px) {
  input,
  select,
  textarea {
    font-size: 16px;
  }
}
/* ========================================
   utilities.css — Utility Classes
   ========================================
   Every Tailwind utility class in use, hand-written as plain CSS.
   ======================================== */

/* ── Section 1: Display & Layout ── */

/* Display */
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}

.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}

/* Flex direction */

.flex-col {
  flex-direction: column;
}

/* Flex wrap */
.flex-wrap {
  flex-wrap: wrap;
}

/* Flex */
.flex-1 {
  flex: 1 1 0%;
}
.grow {
  flex-grow: 1;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink-0 {
  flex-shrink: 0;
}

/* Align items */
.items-start {
  align-items: flex-start;
}
.items-center {
  align-items: center;
}
.items-end {
  align-items: flex-end;
}
.items-baseline {
  align-items: baseline;
}

/* Justify content */

.justify-center {
  justify-content: center;
}
.justify-end {
  justify-content: flex-end;
}
.justify-between {
  justify-content: space-between;
}

/* Self */
.self-start {
  align-self: flex-start;
}

/* Grid */
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

/* ── Section 2: Spacing (ScaleUtility) ── */

/* Margin — all sides */
.m-0 {
  margin: 0;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.mx-1\.5 {
  margin-left: 0.375rem;
  margin-right: 0.375rem;
}
.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.mt-0 {
  margin-top: 0;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-12 {
  margin-top: 3rem;
}
.mt-auto {
  margin-top: auto;
}

.mr-1 {
  margin-right: 0.25rem;
}

.mb-0 {
  margin-bottom: 0;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-8 {
  margin-bottom: 2rem;
}

.ml-1 {
  margin-left: 0.25rem;
}
.ml-1\.5 {
  margin-left: 0.375rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.ml-auto {
  margin-left: auto;
}

/* Padding */
.p-0 {
  padding: 0;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-8 {
  padding: 2rem;
}

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.pt-1 {
  padding-top: 0.25rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}

.pr-2 {
  padding-right: 0.5rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pl-11 {
  padding-left: 2.75rem;
}

/* Gap */
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-x-2 {
  column-gap: 0.5rem;
}
.gap-x-4 {
  column-gap: 1rem;
}
.gap-x-6 {
  column-gap: 1.5rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}

/* Space — lobotomized owl selector */

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0.5rem;
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0.75rem;
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 1rem;
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 1.25rem;
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 1.5rem;
}

.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  margin-left: 1rem;
}
.-space-x-1\.5 > :not([hidden]) ~ :not([hidden]) {
  margin-left: -0.375rem;
}

/* ── Section 3: Sizing ── */

.h-2 {
  height: 0.5rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-4 {
  height: 1rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-10 {
  height: 2.5rem;
}
.h-12 {
  height: 3rem;
}
.h-16 {
  height: 4rem;
}
.h-full {
  height: 100%;
}
.h-\[18px\] {
  height: 18px;
}
.min-h-full {
  min-height: 100%;
}
.max-h-48 {
  max-height: 12rem;
}

.w-2 {
  width: 0.5rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-4 {
  width: 1rem;
}
.w-5 {
  width: 1.25rem;
}
.w-6 {
  width: 1.5rem;
}
.w-7 {
  width: 1.75rem;
}
.w-8 {
  width: 2rem;
}
.w-10 {
  width: 2.5rem;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem;
}
.w-16 {
  width: 4rem;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-28 {
  width: 7rem;
}
.w-36 {
  width: 9rem;
}
.w-52 {
  width: 13rem;
}
.w-1\/2 {
  width: 50%;
}
.w-1\/3 {
  width: 33.333333%;
}
.w-2\/3 {
  width: 66.666667%;
}
.w-1\/4 {
  width: 25%;
}
.w-3\/4 {
  width: 75%;
}
.w-1\/6 {
  width: 16.666667%;
}
.w-2\/5 {
  width: 40%;
}
.w-3\/5 {
  width: 60%;
}
.w-full {
  width: 100%;
}

.min-w-0 {
  min-width: 0;
}
.min-w-\[18px\] {
  min-width: 18px;
}
.max-w-none {
  max-width: none;
}
.max-w-\[200px\] {
  max-width: 200px;
}
.max-w-xl {
  max-width: 36rem;
}
.max-w-md {
  max-width: 28rem;
}

/* ── Section 4: Typography ── */

/* Font family */
.font-sans {
  font-family: "Iosevka Patrick", system-ui, sans-serif;
}
.font-mono {
  font-family: "Iosevka Patrick", ui-monospace, monospace;
}

/* Font size */
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[0\.9375rem\] {
  font-size: 0.9375rem;
}

/* Font weight */
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.font-bold {
  font-weight: 700;
}

/* Letter spacing */
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}

/* Line height */
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}

/* Text decoration */
.underline {
  text-decoration-line: underline;
}

.italic {
  font-style: italic;
}
.uppercase {
  text-transform: uppercase;
}

.underline-offset-2 {
  text-underline-offset: 2px;
}

/* Text alignment */
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}

/* Whitespace */
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.break-all {
  word-break: break-all;
}
.wrap-break-word {
  overflow-wrap: break-word;
}

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

/* Line clamp */
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* ── Section 5: Colors (ColorUtility) ── */

/* --- Brown palette ---
   The full text-brown-{X} family has been migrated to semantic tokens
   (text-primary/secondary/emphasis/muted/faint/placeholder in
   12-text-utilities.css). A few rare 50/100/300 variants remain for cases
   where the brown shade IS the intent (e.g. inverse text on dark headers). */
.text-brown-50 {
  color: var(--brand-brown-50);
}
.text-brown-100 {
  color: var(--brand-brown-100);
}
.text-brown-300 {
  color: var(--brand-brown-300);
}

.bg-brown-50 {
  background-color: var(--brand-brown-50);
}
.bg-brown-100 {
  background-color: var(--brand-brown-100);
}
.bg-brown-200 {
  background-color: var(--brand-brown-200);
}
.bg-brown-300 {
  background-color: var(--brand-brown-300);
}

.bg-brown-800 {
  background-color: var(--brand-brown-800);
}

.border-brown-200 {
  border-color: var(--brand-brown-200);
}
.border-brown-300 {
  border-color: var(--brand-brown-300);
}

.decoration-brown-400 {
  text-decoration-color: var(--brand-brown-400);
}

.accent-brown-700 {
  accent-color: var(--brand-brown-700);
}

/* Brown opacity variants */
.bg-brown-50\/60 {
  background-color: color-mix(in srgb, var(--brand-brown-50) 60%, transparent);
}

.border-brown-200\/60 {
  border-color: color-mix(in srgb, var(--brand-brown-200) 60%, transparent);
}

/* --- Amber palette --- */
.text-amber-500 {
  color: var(--brand-amber-500);
}
.text-amber-600 {
  color: var(--brand-amber-600);
}
.text-amber-700 {
  color: var(--brand-amber-700);
}
.text-amber-800 {
  color: var(--brand-amber-800);
}

.bg-amber-50 {
  background-color: var(--brand-amber-50);
}
.bg-amber-100 {
  background-color: var(--brand-amber-100);
}

.bg-amber-400 {
  background-color: var(--brand-amber-400);
}

.border-amber-200 {
  border-color: var(--brand-amber-200);
}

/* Amber opacity variants */

/* --- Red palette --- */
.text-red-400 {
  color: var(--brand-red-400);
}
.text-red-500 {
  color: var(--brand-red-500);
}
.text-red-600 {
  color: var(--brand-red-600);
}
.text-red-700 {
  color: var(--brand-red-700);
}
.text-red-800 {
  color: var(--brand-red-800);
}
.text-red-900 {
  color: var(--brand-red-900);
}

.bg-red-50 {
  background-color: var(--brand-red-50);
}
.bg-red-100 {
  background-color: var(--brand-red-100);
}

.bg-red-700 {
  background-color: var(--brand-red-700);
}

.border-red-200 {
  border-color: var(--brand-red-200);
}
.border-red-300 {
  border-color: var(--brand-red-300);
}

/* --- Green palette --- */
.text-green-500 {
  color: var(--brand-green-500);
}
.text-green-600 {
  color: var(--brand-green-600);
}
.text-green-700 {
  color: var(--brand-green-700);
}
.text-green-800 {
  color: var(--brand-green-800);
}

.bg-green-100 {
  background-color: var(--brand-green-100);
}

/* --- Blue palette --- */
.text-blue-400 {
  color: var(--brand-blue-400);
}
.text-blue-700 {
  color: var(--brand-blue-700);
}
.text-blue-800 {
  color: var(--brand-blue-800);
}

.bg-blue-100 {
  background-color: var(--brand-blue-100);
}

/* --- Purple palette --- */
.text-purple-700 {
  color: var(--brand-purple-700);
}
.text-purple-800 {
  color: var(--brand-purple-800);
}

.bg-purple-100 {
  background-color: var(--brand-purple-100);
}

/* --- Gray palette --- */
.text-gray-800 {
  color: var(--brand-gray-800);
}
.bg-gray-100 {
  background-color: var(--brand-gray-100);
}

/* --- Utility colors --- */
.text-white {
  color: var(--btn-primary-text);
}
.bg-white {
  background-color: var(--card-bg);
}
.border-white {
  border-color: var(--btn-primary-text);
}

/* --- Gradient (from output.css) --- */
.bg-linear-to-br {
  --tw-gradient-position: to bottom right;
  background-image: linear-gradient(var(--tw-gradient-stops));
}
.from-brown-50 {
  --tw-gradient-from: var(--brand-brown-50);
  --tw-gradient-stops: var(
    --tw-gradient-via-stops,
    var(--tw-gradient-position),
    var(--tw-gradient-from) var(--tw-gradient-from-position),
    var(--tw-gradient-to) var(--tw-gradient-to-position)
  );
}
.to-brown-100 {
  --tw-gradient-to: var(--brand-brown-100);
  --tw-gradient-stops: var(
    --tw-gradient-via-stops,
    var(--tw-gradient-position),
    var(--tw-gradient-from) var(--tw-gradient-from-position),
    var(--tw-gradient-to) var(--tw-gradient-to-position)
  );
}

/* Orange and yellow (used in oolong/suggestions) */
.bg-orange-100 {
  background-color: #ffedd5;
}
.text-orange-400 {
  color: #fb923c;
}
.text-orange-800 {
  color: #9a3412;
}
.bg-yellow-100 {
  background-color: #fef9c3;
}
.text-yellow-800 {
  color: #854d0e;
}

/* Semantic color classes */
.text-secondary {
  color: var(--text-secondary);
}
.text-muted {
  color: var(--text-muted);
}
.text-faint {
  color: var(--text-faint);
}
.text-danger {
  color: var(--text-danger);
}
.text-success {
  color: var(--text-success);
}

/* ── Section 6: Border & Radius ── */

/* Border width */
.border {
  border-width: 1px;
  border-style: solid;
}
.border-0 {
  border-width: 0;
}

.border-t {
  border-top-width: 1px;
  border-top-style: solid;
}
.border-b {
  border-bottom-width: 1px;
  border-bottom-style: solid;
}
.border-b-2 {
  border-bottom-width: 2px;
  border-bottom-style: solid;
}

/* Border radius */
.rounded {
  border-radius: 0.25rem;
}
.rounded-sm {
  border-radius: 0.125rem;
}
.rounded-md {
  border-radius: 0.375rem;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-full {
  border-radius: 9999px;
}

/* Ring (simplified — matches Tailwind's ring-2 pattern) */

/* ── Section 7: Effects ── */

/* Shadows — reference SemanticToken */
.shadow-xs {
  box-shadow: var(--shadow-sm);
}
.shadow-md {
  box-shadow: var(--shadow-md);
}
.shadow-lg {
  box-shadow: var(--shadow-lg);
}

/* Opacity */

.opacity-60 {
  opacity: 0.6;
}

/* Transitions */
.transition {
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke,
    opacity, box-shadow, transform, filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* ── Section 8: Positioning ── */

.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
}
.sticky {
  position: sticky;
}

/* Z-index */
.z-10 {
  z-index: 10;
}
.z-50 {
  z-index: 50;
}

/* Top / Right / Bottom / Left */
.top-0 {
  top: 0;
}
.top-1\/2 {
  top: 50%;
}
.-top-1 {
  top: -0.25rem;
}
.-right-1 {
  right: -0.25rem;
}

.bottom-6 {
  bottom: 1.5rem;
}
.bottom-full {
  bottom: 100%;
}
.right-2 {
  right: 0.5rem;
}
.right-6 {
  right: 1.5rem;
}

/* Transforms */

.-translate-y-1\/2 {
  transform: translateY(-50%);
}

/* ── Section 9: Overflow & Misc ── */

/* Container */
.container {
  width: 100%;
}
@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

/* List styles */
.list-disc {
  list-style-type: disc;
}
.list-decimal {
  list-style-type: decimal;
}
.list-inside {
  list-style-position: inside;
}

/* HTMX indicator */
.htmx-indicator {
  display: none;
}
.htmx-request .htmx-indicator {
  display: inline;
}

/* Animation pulse (defined in components.css with @keyframes) */
.animate-pulse {
  animation: enhanced-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Form checkbox (native-style appearance reset) */
.form-checkbox {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--input-border);
  border-radius: 0.25rem;
  background: var(--input-bg);
  cursor: pointer;
  flex-shrink: 0;
}
.form-checkbox:checked {
  background-color: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z' fill='%23fff'/%3e%3c/svg%3e");
}

/* Prose — for rich text content (atproto pages, about, terms) */
.prose {
  max-width: 65ch;
  color: var(--text-primary);
  line-height: 1.75;
}
.prose p {
  margin-bottom: 1em;
}
.prose h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}
.prose h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-top: 1.25em;
  margin-bottom: 0.5em;
}
.prose ul,
.prose ol {
  margin: 0.5em 0;
  padding-left: 1.5em;
}
.prose li {
  margin: 0.25em 0;
}
.prose a {
  color: var(--text-muted);
  text-decoration: underline;
}
.prose a:hover {
  color: var(--text-primary);
}
.prose blockquote {
  border: 1px solid var(--card-border);
  border-radius: 0.75rem;
  padding: 1em;
  margin: 1em 0;
  background: var(--surface-bg);
  color: var(--text-secondary);
}
.prose code {
  font-family: "Iosevka Patrick", ui-monospace, monospace;
  font-size: 0.875em;
  background: var(--surface-bg);
  padding: 0.2em 0.4em;
  border-radius: 0.25rem;
}
.prose pre {
  background: var(--surface-bg);
  border: 1px solid var(--card-border);
  border-radius: 0.5rem;
  padding: 1rem;
  overflow-x: auto;
}
.prose pre code {
  background: none;
  padding: 0;
}
.prose-lg {
  font-size: 1.0625rem;
}
.prose-lg p {
  margin-bottom: 1.25em;
}
.prose-lg h2 {
  font-size: 1.375rem;
}

/* Cursor */
.cursor-pointer {
  cursor: pointer;
}

.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}

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

/* ── Section 10: State Variants ── */

/* Hover — colors (brown) */
.hover\:bg-brown-50:hover {
  background-color: var(--brand-brown-50);
}
.hover\:bg-brown-100:hover {
  background-color: var(--brand-brown-100);
}
.hover\:bg-brown-200:hover {
  background-color: var(--brand-brown-200);
}
.hover\:bg-brown-400:hover {
  background-color: var(--brand-brown-400);
}
.hover\:bg-brown-700:hover {
  background-color: var(--brand-brown-700);
}

/* Semantic hover variants — derive from --text-* tokens so they swap
   automatically in dark mode without needing an explicit override. */
.hover\:text-primary:hover {
  color: var(--text-primary);
}
.hover\:text-secondary:hover {
  color: var(--text-secondary);
}
.hover\:text-emphasis:hover {
  color: var(--text-emphasis);
}
.hover\:text-muted:hover {
  color: var(--text-muted);
}
.hover\:text-faint:hover {
  color: var(--text-faint);
}
.hover\:text-placeholder:hover {
  color: var(--text-placeholder);
}

/* Brown-palette hover variants kept for the few remaining non-semantic call
   sites (hover:text-brown-950, etc.). Prefer the semantic variants above. */
.hover\:text-brown-950:hover {
  color: var(--brand-brown-950);
}

.hover\:text-white:hover {
  color: var(--btn-primary-text);
}

.hover\:border-brown-400:hover {
  border-color: var(--brand-brown-400);
}
.hover\:underline:hover {
  text-decoration-line: underline;
}
.hover\:decoration-brown-700:hover {
  text-decoration-color: var(--brand-brown-700);
}

.hover\:opacity-80:hover {
  opacity: 0.8;
}
.hover\:opacity-90:hover {
  opacity: 0.9;
}

.hover\:shadow-md:hover {
  box-shadow: var(--shadow-md);
}
.hover\:shadow-md:hover {
  box-shadow: var(--shadow-md);
}
.hover\:shadow-xl:hover {
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* Hover — amber */
.hover\:text-amber-700:hover {
  color: var(--brand-amber-700);
}
.hover\:text-amber-800:hover {
  color: var(--brand-amber-800);
}
.hover\:bg-amber-200:hover {
  background-color: var(--brand-amber-200);
}

/* Hover — red */
.hover\:text-red-800:hover {
  color: var(--brand-red-800);
}
.hover\:bg-red-200:hover {
  background-color: var(--brand-red-200);
}
.hover\:bg-red-800:hover {
  background-color: var(--brand-red-800);
}

/* Hover — blue, green, purple */
.hover\:bg-blue-200:hover {
  background-color: var(--brand-blue-200);
}
.hover\:bg-green-200:hover {
  background-color: var(--brand-green-200);
}
.hover\:bg-purple-200:hover {
  background-color: var(--brand-purple-200);
}

/* Focus */
.focus\:border-amber-500:focus {
  border-color: var(--brand-amber-500);
}
.focus\:border-red-500:focus {
  border-color: var(--brand-red-500);
}
.focus\:ring-2:focus {
  box-shadow: 0 0 0 2px var(--ring-color, currentColor);
}
.focus\:ring-amber-500:focus {
  --ring-color: var(--brand-amber-500);
}
.focus\:ring-brown-500:focus {
  --ring-color: var(--brand-brown-500);
}
.focus\:ring-red-500:focus {
  --ring-color: var(--brand-red-500);
}

/* Focus-visible */
.focus-visible\:ring-2:focus-visible {
  box-shadow: 0 0 0 2px var(--ring-color, currentColor);
}

.focus-visible\:ring-amber-400\/50:focus-visible {
  --ring-color: color-mix(in srgb, var(--brand-amber-400) 50%, transparent);
}

/* Outline hidden */

/* Disabled */
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}
.disabled\:cursor-wait:disabled {
  cursor: wait;
}

/* ── Section 11: Group Variants ── */

/* Group hover / author — named group. Semantic targets derive from
   --text-* tokens so they swap automatically in dark mode. */
.group\/author:hover .group-hover\/author\:text-primary {
  color: var(--text-primary);
}
.group\/author:hover .group-hover\/author\:text-secondary {
  color: var(--text-secondary);
}
.group\/author:hover .group-hover\/author\:underline {
  text-decoration-line: underline;
}

/* ── Section 12: Responsive Variants ── */

/* sm: @media (min-width: 640px) */
@media (min-width: 640px) {
  .sm\:block {
    display: block;
  }
  .sm\:inline {
    display: inline;
  }
  .sm\:flex-row {
    flex-direction: row;
  }
  .sm\:items-end {
    align-items: flex-end;
  }
  .sm\:gap-3 {
    gap: 0.75rem;
  }
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .sm\:rounded-lg {
    border-radius: 0.5rem;
  }
  .sm\:p-6 {
    padding: 1.5rem;
  }
  .sm\:px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  .sm\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .sm\:py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }
  .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
  .sm\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
    margin-left: 2rem;
  }
}

/* md: @media (min-width: 768px) */
@media (min-width: 768px) {
  .md\:flex-row {
    flex-direction: row;
  }
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .md\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .md\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0;
  }
}

/* lg: @media (min-width: 1024px) */
@media (min-width: 1024px) {
  .lg\:block {
    display: block;
  }
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* ========================================
   Dark mode — utility class overrides
   ========================================
   Overrides for utility classes whose values aren't yet expressed as
   semantic tokens. Semantic classes (text-primary, text-emphasis, etc.)
   derive from --text-* / --surface-* / --card-* tokens which swap
   automatically in tokens.css, so they don't need entries here.

   Two parallel blocks: the @media query handles OS preference, and the
   :root[data-theme="dark"] selector handles a manual theme toggle.
   ======================================== */
@media (prefers-color-scheme: dark) {
  .bg-brown-50 {
    background-color: var(--page-bg) !important;
  }
  .bg-brown-100 {
    background-color: var(--surface-bg) !important;
  }
  .bg-brown-200 {
    background-color: var(--card-border) !important;
  }
  .bg-brown-300 {
    background-color: var(--surface-bg) !important;
  }

  .border-brown-200 {
    border-color: var(--card-border) !important;
  }
  .border-brown-300 {
    border-color: var(--card-border) !important;
  }

  .bg-white {
    background-color: var(--card-bg) !important;
  }

  /* Amber badges stay visible on dark */
  .bg-amber-50 {
    background-color: rgba(251, 191, 36, 0.1);
  }
  .bg-amber-100 {
    background-color: rgba(251, 191, 36, 0.15);
  }
  .bg-amber-400 {
    background-color: #fbbf24;
  }
  .text-amber-700 {
    color: #fcd34d;
  }
  .text-amber-600 {
    color: #fbbf24;
  }

  .hover\:bg-brown-200:hover {
    background-color: var(--surface-bg) !important;
  }
  .hover\:bg-brown-100:hover {
    background-color: var(--surface-bg) !important;
  }
  .hover\:bg-brown-50:hover {
    background-color: var(--surface-bg) !important;
  }

  .ring-brown-500 {
    --ring-color: #3d2d24 !important;
  }
  .hover\:ring-brown-400:hover {
    --ring-color: #5a4a40 !important;
  }

  .bg-brown-50\/60 {
    background-color: var(--surface-bg) !important;
  }
  .border-brown-200\/60 {
    border-color: var(--card-border) !important;
  }

  .border-white {
    border-color: var(--card-bg) !important;
  }
  .hover\:decoration-brown-500:hover {
    text-decoration-color: var(--text-faint) !important;
  }
}

:root[data-theme="dark"] .bg-brown-50 {
  background-color: var(--page-bg) !important;
}
:root[data-theme="dark"] .bg-brown-100 {
  background-color: var(--surface-bg) !important;
}
:root[data-theme="dark"] .bg-brown-200 {
  background-color: var(--card-border) !important;
}
:root[data-theme="dark"] .bg-brown-300 {
  background-color: var(--surface-bg) !important;
}
:root[data-theme="dark"] .border-brown-200,
:root[data-theme="dark"] .border-brown-300 {
  border-color: var(--card-border) !important;
}
:root[data-theme="dark"] .bg-white {
  background-color: var(--card-bg) !important;
}
:root[data-theme="dark"] .bg-amber-50 {
  background-color: rgba(251, 191, 36, 0.1);
}
:root[data-theme="dark"] .bg-amber-100 {
  background-color: rgba(251, 191, 36, 0.15);
}
:root[data-theme="dark"] .text-amber-700 {
  color: #fcd34d;
}
:root[data-theme="dark"] .text-amber-600 {
  color: #fbbf24;
}
:root[data-theme="dark"] .hover\:bg-brown-200:hover,
:root[data-theme="dark"] .hover\:bg-brown-100:hover,
:root[data-theme="dark"] .hover\:bg-brown-50:hover {
  background-color: var(--surface-bg) !important;
}
:root[data-theme="dark"] .ring-brown-500 {
  --ring-color: #3d2d24 !important;
}
:root[data-theme="dark"] .hover\:ring-brown-400:hover {
  --ring-color: #5a4a40 !important;
}
:root[data-theme="dark"] .bg-brown-50\/60 {
  background-color: var(--surface-bg) !important;
}
:root[data-theme="dark"] .border-brown-200\/60 {
  border-color: var(--card-border) !important;
}
:root[data-theme="dark"] .border-white {
  border-color: var(--card-bg) !important;
}
:root[data-theme="dark"] .hover\:decoration-brown-500:hover {
  text-decoration-color: var(--text-faint) !important;
}
/* ========================================
   Page Containers
   ======================================== */
.page-container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
@media (min-width: 640px) {
  .page-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.page-container-sm {
  margin-left: auto;
  margin-right: auto;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  max-width: 42rem;
}
@media (min-width: 640px) {
  .page-container-sm {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.page-container-md {
  margin-left: auto;
  margin-right: auto;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  max-width: 48rem;
}
@media (min-width: 640px) {
  .page-container-md {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.page-container-lg {
  margin-left: auto;
  margin-right: auto;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  max-width: 56rem;
}
@media (min-width: 640px) {
  .page-container-lg {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.page-container-xl {
  margin-left: auto;
  margin-right: auto;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  max-width: 72rem;
}
@media (min-width: 640px) {
  .page-container-xl {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
/* Cards and Containers */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 200ms ease;
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card-inner {
  padding: 1.5rem;
}

.card-sm {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 0.5rem;
  box-shadow: var(--shadow-sm);
}

/* Section box for lighter content areas */
.section-box {
  background: var(--surface-bg);
  border-radius: 0.5rem;
  padding: 1rem;
}

/* Record view — tinted header region */
.record-view-header {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  margin-top: -1.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1.25rem;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
  border-bottom: 1px solid var(--surface-border);
}

/* Record view — author line */
.record-view-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.record-view-author-info {
  flex: 1 1 0%;
  min-width: 0;
}

.record-view-author-names {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.record-view-author-displayname {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}

.record-view-author-handle {
  font-size: 0.875rem;
  line-height: 1.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
}

.record-view-author-handle:hover {
  color: var(--text-secondary);
}

.record-view-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--text-muted);
}

/* Record view — title area */
.record-view-title {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-primary);
}

.record-view-timestamp {
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin-top: 0.25rem;
  color: var(--text-muted);
}

/* ── Shared record view tokens ── */
.detail-label {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.detail-value {
  font-weight: 600;
  color: var(--text-primary);
}

.detail-value-lg {
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--text-primary);
}

.detail-value a {
  color: var(--text-primary);
}
.detail-value a:hover {
  text-decoration: underline;
}

.detail-stacked {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.detail-inline {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.record-view-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1rem;
  margin-top: 1.5rem;
}

.record-stat-line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  padding-top: 0.75rem;
  color: var(--text-muted);
}

.brew-rating-hero {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
/* Bean hero header: title/byline on the left, rating fills empty space on the
     right. Wraps the rating to a new line on narrow screens. */
.bean-hero-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  column-gap: 1.5rem;
  row-gap: 0.75rem;
}

.bean-hero-text {
  min-width: 0;
  flex: 1 1 auto;
}

.bean-hero-row .brew-rating-hero {
  flex-shrink: 0;
}

.brew-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 2rem;
  row-gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--surface-border);
}

.brew-summary-stats {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.5rem;
  row-gap: 0.75rem;
  flex: 1 1 auto;
}

.brew-summary-stat {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.brew-summary-stat dt {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.65rem;
  color: var(--text-muted);
}

.brew-summary-stat dd {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.brew-rating-value {
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
  font-size: clamp(3.25rem, 6vw + 1rem, 4.5rem);
  color: var(--rating-text);
  /* Trim the line-box to the cap/alphabetic edges so the big number sits
       flush against the "/ 10" baseline without phantom leading whitespace.
       Progressive enhancement — older browsers ignore these. */
  text-box: trim-both cap alphabetic;
}

.brew-rating-max {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

/* ── Treatment 1: Brew Journal ──
     Dot-grid paper, ledger-style fields, for brews/recipes/equipment */

.record-journal {
  background-color: var(--journal-bg);
  background-image: var(--texture-dotgrid);
  border-radius: 0.5rem;
}

/* Ledger field: label left, value right, separated by faint line */
.journal-field {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--surface-border);
}

.journal-field:last-child {
  border-bottom: none;
}

.journal-field .detail-label {
  flex-shrink: 0;
  width: 9rem;
}

.journal-field .detail-value,
.journal-field .detail-value-lg {
  text-align: right;
  flex: 1 1 0%;
}

.journal-field a.detail-value {
  text-align: right;
}

/* On mobile, stack journal fields vertically */
@media (max-width: 480px) {
  .journal-field {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  .journal-field .detail-value,
  .journal-field .detail-value-lg {
    text-align: left;
  }
}

/* Section heading inside the journal ledger — separates Inputs/Process/Output */
.ledger-section {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-top: 1.75rem;
  margin-bottom: 0.25rem;
  padding-bottom: 0.25rem;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--surface-border);
}
.ledger-section:first-child {
  margin-top: 0;
}

/* Kraft tape chip — used for recipe fork provenance */
.fork-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  margin-bottom: 1.25rem;
  background-color: var(--kraft-bg);
  background-image: var(--texture-kraft);
  color: var(--text-secondary);
  border: 1px solid var(--surface-border);
  border-radius: 2px;
  transform: rotate(-1.25deg);
  box-shadow: var(--shadow-sm);
}
.fork-chip a {
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-color: var(--text-faint);
  text-underline-offset: 2px;
}
.fork-chip a:hover {
  text-decoration-color: var(--text-muted);
}

/* Pour rows: shared by brew and recipe views */
.pour-row {
  display: flex;
  gap: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--surface-border);
}
.pour-row:last-child {
  border-bottom: none;
}

/* Prose section in journal context */
.journal-prose {
  white-space: pre-wrap;
  line-height: 1.625;
  color: var(--text-primary);
}

/* Bean reference inside a journal brew page */
.journal-bean-ref {
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 0.5rem;
  background: var(--surface-bg);
  transition: background 0.15s ease;
}

.journal-bean-ref:hover {
  background: var(--type-bean-tint);
}

/* ── Treatment 2: Craft Label ──
     Kraft paper texture, bold typographic hierarchy, for beans/roasters */

.record-label {
  background-color: var(--kraft-bg);
  background-image: var(--texture-kraft);
  border-radius: 0.5rem;
}

/* Origin hero — the biggest element on a bean label */
.label-origin-hero {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: var(--text-primary);
}

/* Roaster byline under bean name */
.label-byline {
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin-top: 0.25rem;
  color: var(--text-muted);
}

.label-byline a {
  color: var(--text-secondary);
}

.label-byline a:hover {
  text-decoration: underline;
  color: var(--text-primary);
}

/* Inline tag strip: variety / process / roast level — stamp marks, not pills */
.label-tags {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.75rem;
  row-gap: 0.5rem;
  margin-top: 1.25rem;
}

.label-tag {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  letter-spacing: 0.14em;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--text-muted);
  border-radius: 2px;
}

.label-tag-closed {
  color: var(--text-muted);
  border-color: var(--text-faint);
  border-style: dashed;
}

/* Category-tinted label tags — muted, earthy hues that fit the palette.
     Use bg + border + text together so each pill reads as one tone. */
.label-tag-origin {
  background: #eef0e8;
  border-color: #b6c0a6;
  color: #4a5a3a;
}

.label-tag-variety {
  background: #efe5ec;
  border-color: #b89aae;
  color: #5c3a52;
}

.label-tag-process {
  background: #e7ebef;
  border-color: #a4b1bd;
  color: #3e4a57;
}

/* Roast level — graduated amber/brown by darkness */
.label-tag-roast-1 {
  background: #fdf3dc;
  border-color: #e6c97a;
  color: #6b4f1a;
}
.label-tag-roast-2 {
  background: #f7e6c2;
  border-color: #d4a85a;
  color: #5a3d10;
}
.label-tag-roast-3 {
  background: #ebd2a4;
  border-color: #b88947;
  color: #4a2f0c;
}
.label-tag-roast-4 {
  background: #d9b483;
  border-color: #8a6332;
  color: #3a2408;
}
.label-tag-roast-5 {
  background: #b8895a;
  border-color: #5e3f1c;
  color: #2a1604;
}
.label-tag-roast-6 {
  background: #6b4423;
  border-color: #2a1604;
  color: #fdf3dc;
}

/* Description on a label — flowing paragraph, no indent */
.label-description {
  line-height: 1.625;
  margin-top: 1.5rem;
  color: var(--text-primary);
  max-width: 65ch;
}

/* Stacked detail for label pages (location, website) */
.label-detail {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--surface-border);
}

.label-detail:last-child {
  border-bottom: none;
}
/* Form field groups — semantic clusters within modals */
.form-fieldset {
  > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.75rem;
  }
}

.form-fieldset-label {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
  color: var(--text-muted);
}

.form-divider {
  border-top: 1px solid var(--surface-border);
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.form-optional-hint {
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--text-faint);
}

/* Form validation errors */
.form-error {
  font-size: 0.75rem;
  line-height: 1rem;
  margin-top: 0.25rem;
  display: block;
  color: #b91c1c;
}

:root[data-theme="dark"] .form-error,
.dark .form-error {
  color: #fca5a5;
}

.form-input-error {
  border-color: #b91c1c;
}

.form-input-error:focus {
  border-color: #b91c1c;
  box-shadow: 0 0 0 2px rgba(185, 28, 28, 0.15);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  cursor: pointer;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  cursor: pointer;
  color: var(--btn-primary-text);
  background: var(--btn-primary-bg);
}

.btn-primary:hover {
  background: var(--btn-primary-bg-hover);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  cursor: pointer;
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border: 1px solid var(--btn-secondary-border);
}

.btn-secondary:hover {
  background: var(--btn-secondary-bg-hover);
}

.btn-tertiary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  cursor: pointer;
  color: var(--btn-primary-text);
  background: var(--btn-primary-bg);
}

.btn-tertiary:hover {
  background: var(--btn-primary-bg-hover);
}

.btn-link {
  color: var(--text-muted);
  font-weight: 500;
  text-decoration-line: underline;
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  cursor: pointer;
}

.btn-link:hover {
  color: var(--text-primary);
}

.btn-danger {
  color: var(--brand-red-600);
  font-weight: 500;
  text-decoration-line: underline;
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  cursor: pointer;
}

/* Forms */
.form-label {
  display: block;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.form-input {
  border-radius: 0.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-primary);
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    background-color 150ms ease;
}

.form-input:focus {
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 2px var(--input-ring-focus);
  background: var(--input-bg-focus);
  outline: none;
}

/* Hide number input spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

.form-input::placeholder {
  color: var(--text-placeholder);
}

/* Select/option dark mode fix — native <option> elements need explicit colors */
select.form-input option,
select.form-input optgroup {
  background: var(--input-bg);
  color: var(--text-primary);
}

.form-input-lg {
  border-radius: 0.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-primary);
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    background-color 150ms ease;
}

.form-input-lg:focus {
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 2px var(--input-ring-focus);
  background: var(--input-bg-focus);
  outline: none;
}

.form-input-lg::placeholder {
  color: var(--text-placeholder);
}

/* File input — the native ::file-selector-button looks like a 1995 OS
   widget by default. We hide it visually behind ours: the input itself is
   styled like .form-input, and the selector button inside is restyled as
   a compact secondary button so the whole control reads as one tidy field
   with a "Choose file" affordance on the left. */
.form-file {
  display: block;
  width: 100%;
  border-radius: 0.5rem;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-muted);
  font: inherit;
  font-size: 0.875rem;
  padding: 0.375rem;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    background-color 150ms ease;
}

.form-file:hover {
  border-color: var(--input-border-focus);
}

.form-file:focus-within {
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 2px var(--input-ring-focus);
  background: var(--input-bg-focus);
  outline: none;
}

.form-file::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.4rem 0.875rem;
  border-radius: 0.375rem;
  border: 1px solid var(--input-border);
  background: var(--input-bg-focus, var(--input-bg));
  color: var(--text-primary);
  font: inherit;
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease;
}

.form-file::file-selector-button:hover {
  border-color: var(--input-border-focus);
  background: var(--input-bg);
  color: var(--text-primary);
}
/* Combo select dropdown */
.combo-select {
  position: relative;
}

.combo-dropdown {
  position: absolute;
  z-index: 50;
  width: 100%;
  margin-top: 0.25rem;
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid var(--input-border);
  box-shadow: var(--shadow-lg);
  max-height: 280px;
  overflow-y: auto;
}

.combo-section-label {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  color: var(--text-muted);
  background: var(--surface-bg);
}

.combo-item {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--text-primary);
}

.combo-item:hover,
.combo-item[data-highlighted="true"] {
  background: var(--surface-bg);
}

.combo-item-create {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--accent-primary);
  border-top: 1px solid var(--surface-border);
}

.combo-item-create:hover,
.combo-item-create[data-highlighted="true"] {
  background: var(--surface-bg);
}

.combo-item-sub {
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--text-muted);
}

.combo-creating {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: center;
  color: var(--text-muted);
}

.form-select {
  border-radius: 0.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  min-width: 0;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-primary);
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    background-color 150ms ease;
}

.form-select:focus {
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 2px var(--input-ring-focus);
  background: var(--input-bg-focus);
  outline: none;
}

.form-textarea {
  border-radius: 0.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-primary);
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    background-color 150ms ease;
}

.form-textarea:focus {
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 2px var(--input-ring-focus);
  background: var(--input-bg-focus);
  outline: none;
}

.form-textarea::placeholder {
  color: var(--text-placeholder);
}
/* Tables */
.table-container {
  background: var(--table-bg);
  border: 1px solid var(--table-border);
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.table {
  min-width: 100%;
  border-collapse: collapse;
}

.table-header {
  background: var(--table-header-bg);
  border-bottom: 1px solid var(--table-border);
}

.table-th {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: left;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.table-body {
  background: var(--table-bg);
}

.table-body tr {
  border-bottom: 1px solid var(--table-divider);
}

.table-body tr:last-child {
  border-bottom: none;
}

.table-row {
  transition: background-color 150ms ease;
}

.table-row:hover {
  background: var(--table-row-hover);
}

.table-td {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  white-space: nowrap;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--text-secondary);
}
/* Modals */
.modal-backdrop {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 1rem;
  background: var(--modal-backdrop);
  /* backdrop-filter removed — solid overlay for performance */
}

.modal-content {
  background: var(--modal-bg);
  border: 1px solid var(--modal-border);
  color: var(--text-primary);
  border-radius: 0.75rem;
  padding: 1.5rem;
  max-width: 28rem;
  width: 100%;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}

.modal-title {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--text-primary);
}

/* Native Dialog Element */
.modal-dialog {
  padding: 0;
  background: transparent;
  box-shadow: none;
  max-width: 28rem;
  width: 100%;
  /* Tailwind v4 preflight resets `margin: 0` on `*`, which clobbers the
       browser-default `margin: auto` that centers a top-layer <dialog>
       opened via showModal(). Restore it so modals don't snap to 0,0. */
  margin: auto;
  /* UA default for <dialog> is `border: solid`, which renders as a
       thin rectangular outline in the page text color outside the
       modal-content card. Reset it. */
  border: none;
}

.modal-dialog::backdrop {
  background: var(--modal-backdrop);
  /* backdrop-filter removed — solid overlay for performance */
}

.modal-dialog .modal-content {
  background: var(--modal-bg);
  border: 1px solid var(--modal-border);
  color: var(--text-primary);
  border-radius: 0.75rem;
  padding: 1.5rem;
  width: 100%;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}

/* Handle autocomplete typeahead dropdown */
.handle-dropdown {
  position: absolute;
  z-index: 10;
  width: 100%;
  margin-top: 0.25rem;
  border-radius: 0.5rem;
  max-height: 15rem;
  overflow-y: auto;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-lg);
}

.handle-result {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  color: var(--text-primary);
}

.handle-result:hover {
  background: var(--surface-bg);
}

.handle-result .handle-name {
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}

.handle-result .handle-at {
  font-size: 0.75rem;
  line-height: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
}

.handle-no-results {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--text-muted);
}

/* Entity suggestion typeahead dropdown */
.suggestions-dropdown {
  position: absolute;
  z-index: 50;
  margin-top: 0.25rem;
  border-radius: 0.5rem;
  max-height: 12rem;
  overflow-y: auto;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-md);
}

.suggestions-item {
  width: 100%;
  text-align: left;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  cursor: pointer;
  color: var(--text-primary);
  border-bottom: 1px solid var(--surface-border);
}

.suggestions-item:hover {
  background: var(--surface-bg);
}
/* Typography */
.section-title {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
  color: var(--text-faint);
}

.page-title {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  color: var(--text-primary);
}
/* Feed Components — Sticky Notes on Corkboard */
.feed-card {
  background-color: var(--feed-card-bg);
  border: none;
  border-radius: 0.25rem;
  padding: 0.75rem;
  transition-property: box-shadow, transform, rotate;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: 200ms;
  box-shadow:
    1px 2px 4px rgba(0, 0, 0, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.06);
  break-inside: avoid;
  overflow: hidden;
}

.feed-card:has(.action-menu.is-open) {
  overflow: visible;
  position: relative;
  z-index: 20;
}

@media (min-width: 640px) {
  .feed-card {
    padding: 1rem;
  }
}

.feed-card:hover {
  box-shadow: var(--shadow-md);
}

/* Sticky-note rotation only inside the feed pinboard.
     Uses the independent `rotate` property so it doesn't conflict
     with the fade-in-slide-up animation's `transform`. */
@media (min-width: 768px) {
  .feed-grid .feed-card {
    rotate: var(--card-rotate, 0deg);
    backface-visibility: hidden;
  }

  .feed-grid .feed-card:hover {
    /* var(... , 0deg) form prevents Lightning CSS (v4's bundled
         minifier) from dead-stripping `rotate: 0deg` as an initial
         value. Without this, the minified output drops the un-tilt
         on hover and the cards stay rotated. */
    rotate: var(--feed-card-hover-rotate, 0deg);
    transform: translateY(-2px);
  }

  /* --card-rotate values are assigned per-card via JS in feed-masonry.js */
}

/* Brew cards — the main sticky note, slightly larger presence */
.feed-card-brew {
  background-color: var(--feed-card-bg);
  background-image: linear-gradient(
    var(--type-brew-tint),
    var(--type-brew-tint)
  );
  border-radius: 0.25rem;
  box-shadow:
    2px 3px 6px rgba(0, 0, 0, 0.12),
    0 1px 3px rgba(0, 0, 0, 0.08);
}

.feed-card-brew:hover {
  box-shadow:
    3px 4px 10px rgba(0, 0, 0, 0.15),
    0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Compact cards — equipment and roasters */
.feed-card-compact {
  padding: 0.625rem;
  border-radius: 0.5rem;
}

/* Feed card type tints — colored sticky notes */
.feed-card-bean {
  background-color: var(--feed-card-bg);
  background-image: linear-gradient(
    var(--type-bean-tint),
    var(--type-bean-tint)
  );
}
.feed-card-recipe {
  background-color: var(--feed-card-bg);
  background-image: linear-gradient(
    var(--type-recipe-tint),
    var(--type-recipe-tint)
  );
}
.feed-card-roaster {
  background-color: var(--feed-card-bg);
  background-image: linear-gradient(
    var(--type-roaster-tint),
    var(--type-roaster-tint)
  );
}
.feed-card-grinder {
  background-color: var(--feed-card-bg);
  background-image: linear-gradient(
    var(--type-grinder-tint),
    var(--type-grinder-tint)
  );
}
.feed-card-brewer {
  background-color: var(--feed-card-bg);
  background-image: linear-gradient(
    var(--type-brewer-tint),
    var(--type-brewer-tint)
  );
}
.feed-card-tea {
  background-color: var(--feed-card-bg);
  background-image: linear-gradient(
    var(--type-tea-tint),
    var(--type-tea-tint)
  );
}
.feed-card-vendor {
  background-color: var(--feed-card-bg);
  background-image: linear-gradient(
    var(--type-vendor-tint),
    var(--type-vendor-tint)
  );
}
.feed-card-vessel {
  background-color: var(--feed-card-bg);
  background-image: linear-gradient(
    var(--type-vessel-tint),
    var(--type-vessel-tint)
  );
}
.feed-card-infuser {
  background-color: var(--feed-card-bg);
  background-image: linear-gradient(
    var(--type-infuser-tint),
    var(--type-infuser-tint)
  );
}

/* Feed grid layout — starts as normal grid, JS adds masonry class for tight packing */
.feed-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
  overflow: hidden;
  background-image: var(--texture-cork);
  background-color: var(--feed-board-bg);
  border-radius: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--feed-board-border);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.12);
}

.feed-grid:has(.action-menu.is-open) {
  overflow: visible;
}
@media (min-width: 640px) {
  .feed-grid {
    padding: 1.25rem;
  }
}

.feed-masonry-col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

@media (min-width: 768px) {
  .feed-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1.25rem;
    row-gap: 1.25rem;
  }

  .feed-masonry-col {
    gap: 1.25rem;
  }
}

/* Brew cards get extra presence without spanning columns */
.feed-card-brew {
  padding: 1rem;
}
@media (min-width: 640px) {
  .feed-card-brew {
    padding: 1.25rem;
  }
}

/* Inner content boxes inside tinted cards — blend with outer card */
.feed-card .feed-content-box,
.feed-card .feed-content-box-sm {
  background: transparent;
}

/* Type badges — inline pill with icon + label */
.type-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  border: 1px solid currentColor;
  opacity: 0.8;
}

.type-badge svg {
  color: inherit;
  width: 0.75rem;
  height: 0.75rem;
}

.type-badge-brew {
  color: var(--type-brew);
}
.type-badge-bean {
  color: var(--type-bean);
}
.type-badge-recipe {
  color: var(--type-recipe);
}
.type-badge-roaster {
  color: var(--type-roaster);
}
.type-badge-grinder {
  color: var(--type-grinder);
}
.type-badge-brewer {
  color: var(--type-brewer);
}
.type-badge-steep {
  color: var(--type-brew);
}
.type-badge-tea {
  color: var(--type-tea);
}
.type-badge-vendor {
  color: var(--type-vendor);
}
.type-badge-infuser {
  color: var(--type-infuser);
}
.type-badge-vessel {
  color: var(--type-vessel);
}
.type-badge-cafe {
  color: var(--type-cafe);
}
.type-badge-drink {
  color: var(--type-drink);
}

/* Load more button — HTMX adds `.htmx-request` while a request is in flight,
   which swaps the idle/busy text and dims the button. */
.load-more-btn .load-more-busy {
  display: none;
}
.load-more-btn.htmx-request .load-more-idle {
  display: none;
}
.load-more-btn.htmx-request .load-more-busy {
  display: inline;
}
.load-more-btn:disabled,
.load-more-btn.htmx-request {
  opacity: 0.5;
  cursor: progress;
}

/* Entity card type dot — small colored indicator in card headers */
.entity-card-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  flex-shrink: 0;
}

.entity-card-dot-bean {
  background: var(--type-bean);
}
.entity-card-dot-roaster {
  background: var(--type-roaster);
}
.entity-card-dot-grinder {
  background: var(--type-grinder);
}
.entity-card-dot-brewer {
  background: var(--type-brewer);
}
.entity-card-dot-recipe {
  background: var(--type-recipe);
}
.entity-card-dot-tea {
  background: var(--type-tea);
}
.entity-card-dot-vendor {
  background: var(--type-vendor);
}
.entity-card-dot-vessel {
  background: var(--type-vessel);
}
.entity-card-dot-infuser {
  background: var(--type-infuser);
}
.entity-card-dot-brew {
  background: var(--type-brew);
}

.feed-content-box {
  background: var(--surface-bg);
  border-radius: 0.5rem;
  padding: 0.75rem;
}

.feed-content-box-sm {
  background: var(--surface-bg);
  border-radius: 0.5rem;
  padding: 0.5rem;
}
/* Avatar - base styles */
.avatar {
  border-radius: 9999px;
  object-fit: cover;
  transition-property: box-shadow, border-color, background-color, color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: 200ms;
}

.avatar-sm {
  border-radius: 9999px;
  object-fit: cover;
  transition-property: box-shadow, border-color, background-color, color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: 200ms;
  width: 2rem;
  height: 2rem;
  box-shadow: 0 0 0 2px var(--ring-color, currentColor);
  --ring-color: var(--avatar-ring);
}
.avatar-sm:hover {
  --ring-color: var(--avatar-ring-hover);
  box-shadow: 0 0 0 4px var(--ring-color, currentColor);
}

.avatar-md {
  border-radius: 9999px;
  object-fit: cover;
  transition-property: box-shadow, border-color, background-color, color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: 200ms;
  width: 3rem;
  height: 3rem;
  box-shadow: 0 0 0 2px var(--ring-color, currentColor);
  --ring-color: var(--avatar-ring);
}
.avatar-md:hover {
  --ring-color: var(--avatar-ring-hover);
  box-shadow: 0 0 0 4px var(--ring-color, currentColor);
}

.avatar-lg {
  border-radius: 9999px;
  object-fit: cover;
  transition-property: box-shadow, border-color, background-color, color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: 200ms;
  width: 5rem;
  height: 5rem;
  border-width: 2px;
  border-style: solid;
  border-color: var(--avatar-border, var(--brand-brown-300));
}

.avatar-lg:hover {
  border-color: var(--avatar-border-hover, var(--brand-brown-400));
  border-width: 4px;
}

/* Avatar placeholder - for missing images */
.avatar-placeholder {
  border-radius: 9999px;
  background: var(--avatar-bg, var(--brand-brown-300));
  display: flex;
  align-items: center;
  justify-content: center;
  transition-property: box-shadow, border-color, background-color, color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: 200ms;
}

.avatar-placeholder-sm {
  border-radius: 9999px;
  background: var(--avatar-bg, var(--brand-brown-300));
  display: flex;
  align-items: center;
  justify-content: center;
  transition-property: box-shadow, border-color, background-color, color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: 200ms;
  width: 2rem;
  height: 2rem;
  box-shadow: 0 0 0 2px var(--ring-color, currentColor);
  --ring-color: var(--avatar-ring);
}
.avatar-placeholder-sm:hover {
  --ring-color: var(--avatar-ring-hover);
  box-shadow: 0 0 0 4px var(--ring-color, currentColor);
}

.avatar-placeholder-md {
  border-radius: 9999px;
  background: var(--avatar-bg, var(--brand-brown-300));
  display: flex;
  align-items: center;
  justify-content: center;
  transition-property: box-shadow, border-color, background-color, color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: 200ms;
  width: 3rem;
  height: 3rem;
  box-shadow: 0 0 0 2px var(--ring-color, currentColor);
  --ring-color: var(--avatar-ring);
}
.avatar-placeholder-md:hover {
  --ring-color: var(--avatar-ring-hover);
  box-shadow: 0 0 0 4px var(--ring-color, currentColor);
}

.avatar-placeholder-lg {
  border-radius: 9999px;
  background: var(--avatar-bg, var(--brand-brown-300));
  display: flex;
  align-items: center;
  justify-content: center;
  transition-property: box-shadow, border-color, background-color, color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: 200ms;
  width: 5rem;
  height: 5rem;
}

/* Avatar text sizing */
.avatar-text-sm {
  color: var(--avatar-text, var(--brand-brown-600));
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.avatar-text-md {
  color: var(--avatar-text, var(--brand-brown-600));
  font-size: 1rem;
  line-height: 1.5rem;
}

.avatar-text-lg {
  color: var(--avatar-text, var(--brand-brown-600));
  font-size: 1.5rem;
  line-height: 2rem;
}
/* Text Utilities */
.text-helper {
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin-top: 0.25rem;
  color: var(--text-muted);
}

.text-meta {
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--text-muted);
}

.text-meta-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--text-muted);
}

.text-label {
  color: var(--text-muted);
}

.text-primary {
  color: var(--text-primary);
}
.text-secondary {
  color: var(--text-secondary);
}
.text-emphasis {
  color: var(--text-emphasis);
}
.text-muted {
  color: var(--text-muted);
}
.text-faint {
  color: var(--text-faint);
}
.text-placeholder {
  color: var(--text-placeholder);
}
.text-danger {
  color: var(--text-danger);
}
.text-success {
  color: var(--text-success);
}
/* Badges */
.badge-alpha {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 0.125rem 0.375rem;
  border-radius: 0.125rem;
  background: var(--brand-amber-400);
  color: var(--text-primary);
}

.stat-label-micro {
  display: block;
  font-size: 10px;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.badge-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  flex-shrink: 0;
  background: var(--rating-bg);
  color: var(--rating-text);
}

.badge-rating-sm {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  background: var(--rating-bg);
  color: var(--rating-text);
}

/* Filter Pills */
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  border-radius: 9999px;
  transition-property: color, background-color, border-color, box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  cursor: pointer;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--card-border);
}

.filter-pill:hover {
  color: var(--text-secondary);
  border-color: var(--input-border-focus);
  background: var(--surface-bg);
}

/* Type-aware hover */
.filter-pill[data-tab="brew"]:hover {
  border-color: var(--type-brew);
  color: var(--type-brew);
}
.filter-pill[data-tab="bean"]:hover {
  border-color: var(--type-bean);
  color: var(--type-bean);
}
.filter-pill[data-tab="recipe"]:hover {
  border-color: var(--type-recipe);
  color: var(--type-recipe);
}
.filter-pill[data-tab="grinder"]:hover {
  border-color: var(--type-grinder);
  color: var(--type-grinder);
}
.filter-pill[data-tab="brewer"]:hover {
  border-color: var(--type-brewer);
  color: var(--type-brewer);
}
.filter-pill[data-tab="roaster"]:hover {
  border-color: var(--type-roaster);
  color: var(--type-roaster);
}
.filter-pill[data-tab="tea"]:hover {
  border-color: var(--type-tea);
  color: var(--type-tea);
}
.filter-pill[data-tab="vendor"]:hover {
  border-color: var(--type-vendor);
  color: var(--type-vendor);
}
.filter-pill[data-tab="cafe"]:hover {
  border-color: var(--type-cafe);
  color: var(--type-cafe);
}
.filter-pill[data-tab="drink"]:hover {
  border-color: var(--type-drink);
  color: var(--type-drink);
}
.filter-pill[data-tab="vessel"]:hover {
  border-color: var(--type-vessel);
  color: var(--type-vessel);
}
.filter-pill[data-tab="infuser"]:hover {
  border-color: var(--type-infuser);
  color: var(--type-infuser);
}

.filter-pill-active {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  border-radius: 9999px;
  transition-property: color, background-color, border-color, box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  cursor: pointer;
  color: var(--btn-primary-text);
  background: var(--btn-primary-bg);
  border: 1px solid var(--btn-primary-bg);
}

.filter-pill-active:hover {
  background: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-bg-hover);
}

/* Type-colored active pills */
.filter-pill-brew,
.filter-pill-bean,
.filter-pill-recipe,
.filter-pill-grinder,
.filter-pill-brewer,
.filter-pill-roaster,
.filter-pill-tea,
.filter-pill-vendor,
.filter-pill-cafe,
.filter-pill-drink,
.filter-pill-vessel,
.filter-pill-infuser {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  border-radius: 9999px;
  transition-property: color, background-color, border-color, box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  cursor: pointer;
  color: var(--btn-primary-text);
}

.filter-pill-brew {
  background: var(--type-brew);
  border: 1px solid var(--type-brew);
}

.filter-pill-bean {
  background: var(--type-bean);
  border: 1px solid var(--type-bean);
}

.filter-pill-recipe {
  background: var(--type-recipe);
  border: 1px solid var(--type-recipe);
}

.filter-pill-grinder {
  background: var(--type-grinder);
  border: 1px solid var(--type-grinder);
}

.filter-pill-brewer {
  background: var(--type-brewer);
  border: 1px solid var(--type-brewer);
}

.filter-pill-roaster {
  background: var(--type-roaster);
  border: 1px solid var(--type-roaster);
}

.filter-pill-tea {
  background: var(--type-tea);
  border: 1px solid var(--type-tea);
}

.filter-pill-vendor {
  background: var(--type-vendor);
  border: 1px solid var(--type-vendor);
}

.filter-pill-cafe {
  background: var(--type-cafe);
  border: 1px solid var(--type-cafe);
}

@media (max-width: 640px) {
  .filter-pill,
  .filter-pill-active,
  .filter-pill-brew,
  .filter-pill-bean,
  .filter-pill-recipe,
  .filter-pill-grinder,
  .filter-pill-brewer,
  .filter-pill-roaster,
  .filter-pill-tea,
  .filter-pill-vendor,
  .filter-pill-cafe,
  .filter-pill-drink,
  .filter-pill-vessel,
  .filter-pill-infuser {
    min-height: 44px;
  }
}

.filter-pill-drink {
  background: var(--type-drink);
  border: 1px solid var(--type-drink);
}

.filter-pill-vessel {
  background: var(--type-vessel);
  border: 1px solid var(--type-vessel);
}

.filter-pill-infuser {
  background: var(--type-infuser);
  border: 1px solid var(--type-infuser);
}

/* Links */
.link {
  color: var(--text-muted);
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.link:hover {
  color: var(--text-primary);
}

.link-bold {
  color: var(--text-muted);
  font-weight: 500;
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.link-bold:hover {
  color: var(--text-primary);
}
/* Like Button */
.like-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.like-btn-liked {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  color: var(--brand-red-600);
  background: transparent;
  animation: like-pop 400ms ease-out;
}

.like-btn-liked:hover {
  background: var(--surface-bg);
}

.like-btn-unliked {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  color: var(--text-muted);
  background: transparent;
  animation: like-shrink 200ms ease-out;
}

.like-btn-unliked:hover {
  background: var(--surface-bg);
}

/* Share Button */
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  color: var(--text-muted);
  background: transparent;
}

.share-btn:hover {
  background: var(--surface-bg);
}

/* Comment Button */
.comment-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  color: var(--text-muted);
  background: transparent;
}

.comment-btn:hover {
  background: var(--surface-bg);
}

/* Comment Section */
.comment-section {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--card-border);
}

.comment-section-header {
  margin-bottom: 1.25rem;
}

.comment-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  background: var(--brand-brown-700);
  color: var(--brand-brown-100);
  border-radius: 9999px;
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.comment-login-prompt {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1.25rem;
  border-width: 1px;
  border-style: solid;
  background: var(--surface-bg);
  border-color: var(--card-border);
}

.comment-compose {
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--surface-bg);
  border: 1px solid var(--card-border);
}

.comment-textarea {
  width: 100%;
  border-radius: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 1rem;
  line-height: 1.5rem;
  resize: none;
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--text-primary);
}

.comment-textarea::placeholder {
  color: var(--text-placeholder);
}

.comment-textarea:focus {
  border-color: var(--input-border-focus);
}

.comment-list {
  > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.25rem;
  }
}

.comment-empty-state {
  text-align: center;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* Reply form reveal — petite-vue toggles `.is-open` on this wrapper. */
.reply-form-wrap {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  overflow: hidden;
  transition:
    grid-template-rows 150ms ease-out,
    opacity 150ms ease-out;
}
.reply-form-wrap.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}
.reply-form-wrap > * {
  min-height: 0;
}

.comment-item {
  position: relative;
  border-radius: 0.5rem;
  padding: 0.75rem;
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.comment-item:hover {
  background: var(--surface-bg);
}

.comment-item-inner {
  position: relative;
}

.comment-depth-1 {
  margin-left: 1.5rem;
  padding-left: 1rem;
}

.comment-depth-2 {
  margin-left: 3rem;
  padding-left: 1rem;
}

.comment-thread-line {
  position: absolute;
  width: 0.125rem;
  border-radius: 9999px;
  background: var(--card-border);
}

.comment-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  color: var(--text-placeholder);
}

.comment-reply-btn:hover {
  color: var(--text-muted);
}

.comment-delete-btn {
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  color: var(--text-placeholder);
}

.comment-delete-btn:hover {
  color: var(--text-muted);
}

.comment-reply-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-radius: 0.5rem;
  padding: 0.75rem;
  background: var(--surface-bg);
  border: 1px solid var(--card-border);
}
/* Action Bar */
.action-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--surface-border);
}

/* Action bar inside brew view container - no separator needed */
.brew-view-actions .action-bar {
  margin-top: 0;
  padding-top: 0;
  border-top-width: 0;
}

/* Compact action bar variant for comments */
.comment-item .action-bar {
  margin-top: 0.25rem;
  border-top-width: 0;
  gap: 0.25rem;
  border-radius: 0.5rem;
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  display: inline-flex;
  align-items: center;
  background: var(--surface-bg);
}

.comment-item .action-btn,
.comment-item .like-btn {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  background: transparent;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  cursor: pointer;
  color: var(--text-muted);
  background: transparent;
}

.action-btn:hover {
  background: var(--surface-bg);
  color: var(--text-secondary);
}

.action-btn-liked {
  color: var(--brand-red-600);
  animation: like-pop 400ms ease-out;
}

.action-btn-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.action-btn-disabled:hover {
  background: transparent;
}
/* Action Menu (More dropdown) */
.action-menu {
  position: absolute;
  left: 50%;
  width: 9rem;
  border-radius: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  z-index: 50;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-md);
  /* Closed state — petite-vue toggles `.is-open` to reveal. */
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) scale(0.95);
  transform-origin: top center;
  transition:
    opacity 100ms ease-out,
    transform 100ms ease-out;
}
.action-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) scale(1);
}

/* Dropdown menu (top-positioned, for headers/nav) */
.dropdown-menu {
  position: absolute;
  right: 0;
  margin-top: 0.5rem;
  width: 12rem;
  border-radius: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  z-index: 50;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-md);
  /* Closed state — petite-vue toggles `.is-open` to reveal. */
  opacity: 0;
  pointer-events: none;
  transform: scale(0.95);
  transform-origin: top right;
  transition:
    opacity 100ms ease-out,
    transform 100ms ease-out;
}
.dropdown-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.dropdown-item {
  /* Flex+gap baked into the component class so templates don't need
     `flex items-center gap-N` utilities (component CSS loads after
     utilities, so `display: block` here would silently win and zero
     out the gap). */
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  color: var(--text-muted);
}

.dropdown-item:hover {
  background: var(--surface-bg);
}

.dropdown-item-disabled {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  cursor: not-allowed;
  color: var(--text-placeholder);
}

.dropdown-item-mod {
  color: var(--brand-amber-700);
}

.dropdown-item-mod:hover {
  background: var(--brand-amber-50);
}

.dropdown-header {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--surface-border);
}

.dropdown-divider {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--surface-border);
}

.action-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  cursor: pointer;
  text-align: left;
  color: var(--text-muted);
}

.action-menu-item:hover {
  background: var(--surface-bg);
}

.action-menu-item-danger {
  color: var(--brand-red-600);
}

.action-menu-item-danger:hover {
  background: var(--brand-red-50);
}

.action-menu-item-warning {
  color: var(--brand-amber-600);
}

.action-menu-item-warning:hover {
  background: var(--brand-amber-50);
}

.action-menu-divider {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  border-top: 1px solid var(--surface-border);
}

/* Hidden record indicator badge */
.hidden-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  background: var(--brand-amber-100);
  color: var(--brand-amber-700);
  border-radius: 0.25rem;
}
/* Scroll-to-top button — petite-vue toggles `.is-visible` based on scroll. */
.scroll-top-btn {
  opacity: 0;
  transform: translateY(0.5rem);
  pointer-events: none;
  transition:
    opacity 200ms ease-out,
    transform 200ms ease-out;
}
.scroll-top-btn.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Alert banners */
.alert-warning {
  border-radius: 0.5rem;
  padding: 1rem;
  background: var(--alert-warning-bg);
  border: 1px solid var(--alert-warning-border);
  color: var(--alert-warning-text);
}

.alert-warning-muted {
  color: var(--alert-warning-text-muted);
}

/* Home page action buttons */
.home-action-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  transition-property: color, background-color, border-color, box-shadow, filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  cursor: pointer;
  background: linear-gradient(135deg, var(--brand-brown-700), var(--btn-primary-bg));
  color: var(--btn-primary-text);
  border: 1px solid var(--brand-brown-700);
  box-shadow: var(--shadow-sm);
}

.home-action-primary:hover {
  box-shadow: var(--shadow-md);
  filter: brightness(1.1);
}

.home-action-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  transition-property: color, background-color, border-color, box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  cursor: pointer;
  background: var(--card-bg);
  color: var(--text-primary);
  border: 1.5px solid var(--card-border);
  box-shadow: var(--shadow-sm);
}

.home-action-secondary:hover {
  border-color: var(--input-border-focus);
  box-shadow: var(--shadow-md);
}

/* Tab navigation — underline variant (no base border, profile page) */
.tab-underline-active {
  border-bottom: 2px solid var(--btn-primary-bg);
  color: var(--text-primary);
}
.tab-underline-inactive {
  color: var(--text-muted);
}
.tab-underline-inactive:hover {
  color: var(--text-primary);
}

/* Tab navigation — row variant (element has border-b-2; my_coffee, manage) */
.tab-row-active {
  border-color: var(--btn-primary-bg);
  color: var(--text-primary);
}
.tab-row-inactive {
  border-color: transparent;
  color: var(--text-muted);
}
.tab-row-inactive:hover {
  border-color: var(--brand-brown-400);
  color: var(--text-primary);
}

/* Tab navigation — pill variant (admin moderation tabs) */
.tab-pill-active {
  background: var(--card-border);
  color: var(--text-primary);
  border-color: var(--brand-brown-400);
}
.tab-pill-inactive {
  background: var(--surface-bg);
  color: var(--text-muted);
  border-color: var(--card-border);
}
.tab-pill-inactive:hover {
  background: var(--card-border);
}

/* Incomplete-entity nudge toast (manage-page.js) */
.nudge-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  max-width: 28rem;
  width: 100%;
  margin-left: 1rem;
  margin-right: 1rem;
  padding: 1rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
}

/* Handle autocomplete row internals (handle-autocomplete.js) */
.handle-result-avatar {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  object-fit: cover;
  flex-shrink: 0;
}
.handle-result-text {
  flex: 1 1 0%;
  min-width: 0;
}

@font-face {
  font-family: "Iosevka Patrick";
  src: url("/static/fonts/IosevkaPatrickNerdFont-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Iosevka Patrick";
  src: url("/static/fonts/IosevkaPatrickNerdFont-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Iosevka Patrick";
  src: url("/static/fonts/IosevkaPatrickNerdFont-SemiBold.woff2")
    format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* ========================================
   HTMX Transition Classes
   ======================================== */

/* CRITICAL: Prevent content from being stuck invisible during history restore */
/* Override HTMX transition classes during history restoration */
body.htmx-history-restoring main,
body.htmx-history-restoring .htmx-swapping,
body.htmx-history-restoring .htmx-transitioning {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* During swap transition */
.htmx-swapping {
  opacity: 0;
  transform: translateY(5px);
  transition:
    opacity 100ms ease-out,
    transform 100ms ease-out;
}

/* After content is added */
.htmx-added {
  opacity: 0;
  animation: fade-in-slide-up 200ms ease-out forwards;
}

/* During settling phase */
.htmx-settling {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 100ms ease-in,
    transform 100ms ease-in;
}

/* Transitioning state (no overlay - looks bad) */
.htmx-transitioning {
  position: relative;
  /* Removed overlay ::after pseudo-element - it created unwanted shadow effects */
}

/* ========================================
   Component-Specific Transitions
   ======================================== */

/* Feed cards appear with stagger effect (only inside the pinboard) */
.feed-grid .feed-card {
  animation: fade-in-slide-up 300ms ease-out backwards;
}

.feed-grid .feed-card:nth-child(1) {
  animation-delay: 0ms;
}
.feed-grid .feed-card:nth-child(2) {
  animation-delay: 60ms;
}
.feed-grid .feed-card:nth-child(3) {
  animation-delay: 120ms;
}
.feed-grid .feed-card:nth-child(4) {
  animation-delay: 160ms;
}
.feed-grid .feed-card:nth-child(5) {
  animation-delay: 200ms;
}
.feed-grid .feed-card:nth-child(6) {
  animation-delay: 230ms;
}
.feed-grid .feed-card:nth-child(n + 7) {
  animation-delay: 260ms;
}

/* Modal transitions (enhanced) */
.modal-backdrop {
  animation: fade-in 100ms ease-out;
}

.modal-content {
  animation: modal-appear 150ms ease-out;
}

@keyframes modal-appear {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* HTML5 Dialog Element Transitions */
.modal-dialog {
  opacity: 0;
  transform: scale(0.95);
  transition:
    opacity 100ms ease-out,
    transform 100ms ease-out,
    overlay 100ms ease-out allow-discrete,
    display 100ms ease-out allow-discrete;
}

.modal-dialog[open] {
  opacity: 1;
  transform: scale(1);
}

/* Backdrop fade-in transition */
.modal-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0);
  transition:
    background-color 100ms ease-out,
    display 100ms ease-out allow-discrete,
    overlay 100ms ease-out allow-discrete;
}

.modal-dialog[open]::backdrop {
  background-color: rgba(0, 0, 0, 0.4);
}

/* Starting style for new browsers that support @starting-style */
@supports (transition-behavior: allow-discrete) {
  @starting-style {
    .modal-dialog[open] {
      opacity: 0;
      transform: scale(0.95);
    }

    .modal-dialog[open]::backdrop {
      background-color: rgba(0, 0, 0, 0);
    }
  }
}

/* Modal content inside dialog - no separate animation needed */
/* The dialog element itself handles the transition */

/* ========================================
   Keyframes
   ======================================== */

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-in-slide-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Like button pop animation */
@keyframes like-pop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

/* Like button shrink animation for unlike */
@keyframes like-shrink {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}

/* ========================================
   Loading States
   ======================================== */

/* Enhance skeleton loading animations */
.animate-pulse {
  animation: enhanced-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes enhanced-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* ========================================
   Reduced Motion Override
   ======================================== */

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* Toast notification region. Toasts are inserted by the global notify
   handler (see layout.templ) and removed after their CSS animation ends. */
.toast-region {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  background: var(--card-bg);
  color: var(--text-primary);
  border: 1px solid var(--card-border);
  border-radius: 0.5rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  box-shadow: var(--shadow-md);
  animation:
    toast-in 180ms ease-out,
    toast-out 220ms ease-in 2.4s forwards;
  max-width: min(90vw, 28rem);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateY(-0.25rem);
  }
}
/* Tab panel visibility.
   Parent element binds `:data-active-tab="X"` reactively via petite-vue.
   Each panel carries `data-tab-panel="Y"`. CSS shows the matching one.
   This avoids relying on `v-show` directives inside HTMX-swapped subtrees,
   which petite-vue never re-binds after the initial mount. */

[data-tab-panel] {
  display: none;
}

[data-active-tab="brews"] [data-tab-panel="brews"],
[data-active-tab="beans"] [data-tab-panel="beans"],
[data-active-tab="roasters"] [data-tab-panel="roasters"],
[data-active-tab="grinders"] [data-tab-panel="grinders"],
[data-active-tab="brewers"] [data-tab-panel="brewers"],
[data-active-tab="recipes"] [data-tab-panel="recipes"],
[data-active-tab="equipment"] [data-tab-panel="equipment"],
[data-active-tab="steeps"] [data-tab-panel="steeps"],
[data-active-tab="teas"] [data-tab-panel="teas"],
[data-active-tab="gear"] [data-tab-panel="gear"],
[data-active-tab="vendors"] [data-tab-panel="vendors"],
[data-active-tab="vessels"] [data-tab-panel="vessels"],
[data-active-tab="infusers"] [data-tab-panel="infusers"] {
  display: block;
}
.explore-page {
  width: min(calc(100% - 2rem), 68rem);
  margin-inline: auto;
  padding-block: clamp(1.5rem, 4vw, 3.5rem) 4rem;
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vw, 2rem);
}

.explore-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}

.explore-hero-copy {
  max-width: 43rem;
}

.explore-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--type-bean);
  font-weight: 700;
}

.explore-eyebrow::before {
  content: "";
  display: block;
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.72;
}

.explore-title {
  margin: 0;
  font-size: 2.75rem;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--text-primary);
  font-weight: 700;
}

.explore-lede {
  margin: 0.85rem 0 0;
  max-width: 40rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-emphasis);
}

.explore-stale-note {
  flex: 0 1 18rem;
  padding: 0.9rem 1rem;
  border: 1px dashed
    color-mix(in oklch, var(--type-roaster) 44%, var(--card-border));
  border-radius: 0.875rem;
  background:
    var(--texture-kraft),
    color-mix(in oklch, var(--type-roaster-tint) 70%, var(--card-bg));
  color: var(--text-emphasis);
  font-size: 0.875rem;
  line-height: 1.45;
}

.explore-controls {
  padding: 0;
  overflow: hidden;
  background: var(--card-bg);
  background-image: var(--texture-kraft);
  background-blend-mode: multiply;
  border: 1px solid var(--card-border);
  border-radius: 1rem;
  box-shadow: var(--shadow-md);
  position: relative;
}

.explore-controls::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    to right,
    var(--type-bean) 0%,
    var(--type-bean) 25%,
    var(--type-roaster) 25%,
    var(--type-roaster) 50%,
    var(--type-brewer) 50%,
    var(--type-brewer) 75%,
    var(--type-recipe) 75%,
    var(--type-recipe) 100%
  );
  opacity: 0.86;
}

.explore-controls-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.75rem;
  row-gap: 0.5rem;
  padding: 1.25rem 1.5rem 1rem;
  list-style: none;
  position: relative;
}

.explore-controls-summary::-webkit-details-marker {
  display: none;
}

.explore-controls-summary::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  color: var(--type-bean);
  font-weight: 600;
  background: var(--surface-bg);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, currentColor 12%, transparent);
}

.explore-controls-title {
  min-width: 0;
}

.explore-controls-count {
  justify-self: end;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.explore-controls[open] > .explore-controls-summary::before {
  content: "−";
}

.explore-controls-form {
  padding: 0 1.5rem 1.5rem;
  border-top: 1px solid var(--card-border);
}

.explore-primary-filters {
  padding-top: 1rem;
}

.explore-advanced-filters {
  padding: 0.75rem;
  border: 1px dashed
    color-mix(in oklch, var(--type-grinder) 35%, var(--surface-border));
  border-radius: 8px;
  background:
    var(--texture-dotgrid),
    color-mix(in oklch, var(--type-grinder-tint) 35%, var(--surface-bg));
}

.explore-advanced-filters summary {
  list-style-position: outside;
  min-height: 2rem;
  margin-left: 0.5rem;
  padding: 0.25rem 0.25rem 0.25rem 0;
}

.explore-filter-grid {
  margin-top: 0.75rem;
}

.explore-controls .form-input,
.explore-controls .form-select,
.explore-controls .btn-primary,
.explore-controls .btn-secondary,
.explore-more-row .btn-secondary {
  min-height: 44px;
}

.explore-results {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.explore-results.feed-grid {
  gap: 1rem;
}

.explore-card {
  --explore-tint: var(--type-bean);
  --explore-tint-bg: var(--type-bean-tint);
  position: relative;
  padding: 0.75rem;
  overflow: hidden;
  border: none;
  border-radius: 0.25rem;
  background-color: var(--feed-card-bg);
  background-image: linear-gradient(var(--explore-tint-bg), var(--explore-tint-bg));
  box-shadow:
    1px 2px 4px rgba(0, 0, 0, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  content-visibility: auto;
  contain-intrinsic-size: auto 9rem;
  transition:
    transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 640px) {
  .explore-card {
    padding: 1rem;
  }
}

.explore-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.explore-card .feed-content-box,
.explore-card .feed-content-box-sm {
  background: transparent;
}

.explore-card[data-kind="bean"] {
  --explore-tint: var(--type-bean);
  --explore-tint-bg: var(--type-bean-tint);
}

.explore-card[data-kind="roaster"] {
  --explore-tint: var(--type-roaster);
  --explore-tint-bg: var(--type-roaster-tint);
}

.explore-card[data-kind="grinder"] {
  --explore-tint: var(--type-grinder);
  --explore-tint-bg: var(--type-grinder-tint);
}

.explore-card[data-kind="brewer"] {
  --explore-tint: var(--type-brewer);
  --explore-tint-bg: var(--type-brewer-tint);
}

.explore-card[data-kind="recipe"] {
  --explore-tint: var(--type-recipe);
  --explore-tint-bg: var(--type-recipe-tint);
}

.explore-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.explore-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: opacity 160ms ease;
}

.explore-card-link:hover {
  opacity: 0.92;
}

.explore-card-stats {
  margin-top: 0.125rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem 0.65rem;
  color: var(--text-muted);
  font-size: 0.75rem;
  line-height: 1.3;
}

.explore-card-stats > span,
.explore-card-stats > time {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.45rem;
  border: 1px solid color-mix(in oklch, var(--explore-tint) 14%, transparent);
  border-radius: 999px;
  background: color-mix(in oklch, var(--feed-card-bg) 72%, var(--explore-tint-bg));
}

.explore-stat-rating {
  color: var(--text-emphasis);
  font-weight: 600;
}

.explore-stat-rating svg {
  width: 0.85rem;
  height: 0.85rem;
  color: var(--explore-tint);
}

.explore-empty {
  border-radius: 1rem;
  background-image: var(--texture-kraft);
  background-blend-mode: multiply;
}

.explore-more-row {
  display: flex;
  justify-content: center;
}

@media (min-width: 768px) {
  .explore-primary-filters {
    grid-template-columns: minmax(14rem, 24rem) minmax(9rem, 11rem) minmax(
        9rem,
        11rem
      );
  }

  .explore-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .explore-results.feed-grid .explore-card {
    rotate: var(--card-rotate, 0deg);
    backface-visibility: hidden;
  }

  .explore-results.feed-grid .explore-card:hover {
    rotate: var(--feed-card-hover-rotate, 0deg);
  }
}

@media (max-width: 640px) {
  .explore-title {
    font-size: 2.15rem;
  }

  .explore-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .explore-controls-summary {
    align-items: start;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .explore-controls-count {
    grid-column: 2;
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .explore-card,
  .explore-card-link {
    transition: none;
  }

  .explore-card:hover {
    transform: none;
  }
}
/* 22-onboarding.css — /onboarding page styles. */

.onboarding-wrap {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: 4rem;
  max-width: 56rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

/* ── Hero ─────────────────────────────────────────── */
.onboarding-hero {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 38rem;
}

.onboarding-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--type-bean);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}

.onboarding-eyebrow::before {
  content: "";
  display: block;
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

.onboarding-title {
  font-size: clamp(2rem, 5.5vw, 3rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0;
}

.onboarding-lede {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-emphasis);
  max-width: 36rem;
  margin: 0;
}

.onboarding-lede strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* ── Container card ───────────────────────────────── */
.onboarding-card {
  background: var(--card-bg);
  background-image: var(--texture-kraft);
  background-blend-mode: multiply;
  border: 1px solid var(--card-border);
  border-radius: 1rem;
  box-shadow: var(--shadow-md);
  padding: clamp(1.25rem, 4vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  position: relative;
  overflow: hidden;
}

.onboarding-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background:
    linear-gradient(
      to right,
      var(--type-brewer) 0%,
      var(--type-brewer) 33%,
      var(--type-roaster) 33%,
      var(--type-roaster) 66%,
      var(--type-bean) 66%,
      var(--type-bean) 100%
    );
  opacity: 0.85;
}

body[data-app="oolong"] .onboarding-card::before {
  background: linear-gradient(
    to right,
    var(--type-vendor) 0%,
    var(--type-vendor) 33%,
    var(--type-vessel) 33%,
    var(--type-vessel) 66%,
    var(--type-tea) 66%,
    var(--type-tea) 100%
  );
}

/* ── Progress stamps ──────────────────────────────── */
.onboarding-progress {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.5rem;
}

.stamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  transform: rotate(var(--stamp-tilt, 0deg));
}

.stamp:nth-child(1) {
  --stamp-tilt: -2deg;
}

.stamp:nth-child(3) {
  --stamp-tilt: 1.5deg;
}

.stamp:nth-child(5) {
  --stamp-tilt: -1deg;
}

.stamp-mark {
  width: clamp(2.5rem, 8vw, 3.25rem);
  aspect-ratio: 1 / 1;
  border: 1.5px dashed var(--text-faint);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-bg);
  position: relative;
  transition:
    color 250ms cubic-bezier(0.2, 0, 0, 1),
    background-color 250ms cubic-bezier(0.2, 0, 0, 1),
    border-color 250ms cubic-bezier(0.2, 0, 0, 1),
    box-shadow 250ms cubic-bezier(0.2, 0, 0, 1),
    transform 250ms cubic-bezier(0.2, 0, 0, 1);
}

.stamp-mark::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1px dotted currentColor;
  opacity: 0.25;
  pointer-events: none;
}

.stamp[data-state="done"] .stamp-mark {
  background: var(--stamp-color, var(--type-brewer));
  border-color: var(--stamp-color, var(--type-brewer));
  border-style: solid;
  color: var(--brand-cream-50);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.12);
  animation: stamp-press 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

.stamp[data-state="done"] .stamp-mark::after {
  border-color: var(--brand-cream-50);
  opacity: 0.35;
}

.stamp[data-state="current"] .stamp-mark {
  border-color: var(--stamp-color, var(--type-roaster));
  color: var(--stamp-color, var(--type-roaster));
  border-style: solid;
}

.stamp[data-state="current"] .stamp-mark::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--stamp-color, var(--type-roaster));
  opacity: 0;
  animation: stamp-pulse 2.4s ease-out infinite;
}

.stamp-glyph {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}

.stamp-label {
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}

.stamp[data-state="done"] .stamp-label {
  color: var(--stamp-color, var(--type-brewer));
}

.stamp[data-state="current"] .stamp-label {
  color: var(--text-primary);
}

.stamp-line {
  height: 1.5px;
  border-radius: 1px;
  background-image: linear-gradient(
    to right,
    var(--text-faint) 0,
    var(--text-faint) 6px,
    transparent 6px,
    transparent 12px
  );
  background-size: 12px 1.5px;
  background-repeat: repeat-x;
  position: relative;
  align-self: start;
  margin-top: clamp(1.25rem, 4vw, 1.625rem);
  opacity: 0.6;
  transition: background 250ms ease;
}

.stamp-line[data-filled="true"] {
  background-image: none;
  background: var(--stamp-fill, var(--type-brewer));
  opacity: 0.55;
}

@keyframes stamp-press {
  0% {
    transform: scale(1.4) rotate(0deg);
    opacity: 0;
  }
  60% {
    transform: scale(0.94) rotate(var(--stamp-tilt, 0deg));
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(var(--stamp-tilt, 0deg));
    opacity: 1;
  }
}

@keyframes stamp-pulse {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

/* ── Stations grid ────────────────────────────────── */
.stations {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .stations {
    grid-template-columns: repeat(3, 1fr);
    /* Dense flow so an active drawer slot (full-row) doesn't leave gaps —
       remaining cards backfill the originating row. */
    grid-auto-flow: dense;
  }
  .stations .station[data-optional="true"] {
    grid-column: 1 / -1;
  }
}

.station {
  --tint: var(--type-brewer);
  --tint-bg: var(--type-brewer-tint);
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 0.875rem;
  padding: 1.25rem 1.25rem 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  min-height: 12rem;
  overflow: hidden;
  transition:
    transform 200ms ease,
    box-shadow 200ms ease,
    border-color 200ms ease;
}

.station::before {
  content: attr(data-no);
  position: absolute;
  top: -0.5rem;
  right: 0.5rem;
  font-size: 4.5rem;
  font-weight: 700;
  letter-spacing: -0.05em;
  color: var(--tint);
  opacity: 0.07;
  pointer-events: none;
  line-height: 1;
}

.station::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tint-bg);
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}

.station > * {
  position: relative;
  z-index: 1;
}

.station:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in oklch, var(--tint) 28%, var(--card-border));
}

.station[data-kind="brewer"] {
  --tint: var(--type-brewer);
  --tint-bg: var(--type-brewer-tint);
}
.station[data-kind="roaster"] {
  --tint: var(--type-roaster);
  --tint-bg: var(--type-roaster-tint);
}
.station[data-kind="bean"] {
  --tint: var(--type-bean);
  --tint-bg: var(--type-bean-tint);
}
.station[data-kind="grinder"] {
  --tint: var(--type-grinder);
  --tint-bg: var(--type-grinder-tint);
}
.station[data-kind="vendor"] {
  --tint: var(--type-vendor);
  --tint-bg: var(--type-vendor-tint);
}
.station[data-kind="vessel"] {
  --tint: var(--type-vessel);
  --tint-bg: var(--type-vessel-tint);
}
.station[data-kind="tea"] {
  --tint: var(--type-tea);
  --tint-bg: var(--type-tea-tint);
}
.station[data-kind="infuser"] {
  --tint: var(--type-infuser);
  --tint-bg: var(--type-infuser-tint);
}

.station-head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.station-no {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
}

.station-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.01em;
}

.station-tag {
  margin-left: auto;
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  background: var(--tint);
  color: var(--brand-cream-50);
}

.station-tag[data-tag="optional"] {
  background: transparent;
  color: var(--text-faint);
  border: 1px solid var(--text-faint);
}

.station-tag[data-tag="done"] {
  background: var(--brand-green-100);
  color: var(--brand-green-800);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .station-tag[data-tag="done"] {
    background: rgba(34, 197, 94, 0.18);
    color: #86efac;
  }
}

:root[data-theme="dark"] .station-tag[data-tag="done"] {
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
}

.station-hint {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
  max-width: 26ch;
}

.station-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  flex: 1;
}

.station-item {
  font-size: 0.875rem;
  color: var(--text-emphasis);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.1875rem 0;
}

.station-item-bullet {
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--tint);
  flex-shrink: 0;
  transform: translateY(-1px);
}

.station-item-more {
  font-size: 0.75rem;
  color: var(--text-faint);
  padding-left: 0.875rem;
  font-style: italic;
}

.station-empty {
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--text-faint);
  margin: 0;
  padding: 0.375rem 0;
  flex: 1;
}

.station-empty strong {
  font-style: normal;
  color: var(--text-muted);
  font-weight: 600;
}

.station-add {
  align-self: flex-start;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.4375rem 0.75rem 0.4375rem 0.625rem;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--tint);
  border: 1.5px solid color-mix(in oklch, var(--tint) 40%, transparent);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  transition:
    color 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
  font-family: inherit;
}

.station-add:hover {
  background: var(--tint);
  color: var(--brand-cream-50);
  border-color: var(--tint);
  transform: translateY(-1px);
}

.station-add-icon {
  font-size: 1rem;
  line-height: 1;
  font-weight: 400;
  display: inline-block;
  transform: translateY(-1px);
}

/* ── Ready panel ──────────────────────────────────── */
.ready-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  background: var(--surface-bg);
  border: 1px dashed var(--card-border);
}

.ready-panel[data-state="ready"] {
  background: linear-gradient(
    135deg,
    color-mix(in oklch, var(--type-roaster) 18%, var(--card-bg)),
    color-mix(in oklch, var(--type-bean) 12%, var(--card-bg))
  );
  border: 1px solid color-mix(in oklch, var(--type-roaster) 32%, transparent);
  padding: 1.25rem 1.5rem;
}

.ready-copy {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.ready-headline {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.005em;
}

.ready-panel[data-state="ready"] .ready-headline {
  font-size: 1.125rem;
}

.ready-sub {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

.ready-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6875rem 1.25rem;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition:
    transform 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}

.ready-cta:hover {
  background: var(--btn-primary-bg-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.ready-cta-arrow {
  display: inline-block;
  transition: transform 200ms ease;
}

.ready-cta:hover .ready-cta-arrow {
  transform: translateX(3px);
}

.ready-count {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  font-weight: 600;
  color: var(--text-primary);
}

.ready-count-num {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--type-roaster);
  line-height: 1;
  letter-spacing: -0.02em;
}

/* ── Stagger entrance ─────────────────────────────── */
.station {
  opacity: 0;
  transform: translateY(8px);
  animation: station-in 380ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.station[data-kind="brewer"] {
  animation-delay: 80ms;
}
.station[data-kind="roaster"] {
  animation-delay: 160ms;
}
.station[data-kind="bean"] {
  animation-delay: 240ms;
}
.station[data-kind="grinder"] {
  animation-delay: 320ms;
}

@keyframes station-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.onboarding-hero {
  opacity: 0;
  transform: translateY(-6px);
  animation: hero-in 420ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes hero-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .station,
  .onboarding-hero,
  .stamp[data-state="done"] .stamp-mark,
  .stamp[data-state="current"] .stamp-mark::before {
    animation: none;
  }
  .station {
    opacity: 1;
    transform: none;
  }
  .onboarding-hero {
    opacity: 1;
    transform: none;
  }
}

/* ── Station drawer (inline add form) ─────────────── */

@media (min-width: 640px) {
  .station-drawer-row {
    grid-column: 1 / -1;
  }
}

.station-drawer-row:empty {
  display: none;
}

.station-drawer {
  --tint: var(--type-brewer);
  --tint-bg: var(--type-brewer-tint);
  --connector-x: 16.67%;
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 0.875rem;
  padding: 1.25rem clamp(1.25rem, 3vw, 1.75rem) 1.5rem;
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* Combo-select dropdowns in onboarding drawers are absolutely positioned
     under their input; keep them visible instead of clipping them to the
     rounded drawer box. */
  overflow: visible;
  animation: drawer-in 320ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--shadow-md);
}

/* --connector-x sits at the horizontal center of the originating column. */
.station-drawer[data-kind="brewer"] {
  --tint: var(--type-brewer);
  --tint-bg: var(--type-brewer-tint);
  --connector-x: 16.67%;
}
.station-drawer[data-kind="roaster"] {
  --tint: var(--type-roaster);
  --tint-bg: var(--type-roaster-tint);
  --connector-x: 50%;
}
.station-drawer[data-kind="bean"] {
  --tint: var(--type-bean);
  --tint-bg: var(--type-bean-tint);
  --connector-x: 83.33%;
}
.station-drawer[data-kind="grinder"] {
  --tint: var(--type-grinder);
  --tint-bg: var(--type-grinder-tint);
  --connector-x: 50%;
}
.station-drawer[data-kind="vendor"] {
  --tint: var(--type-vendor);
  --tint-bg: var(--type-vendor-tint);
  --connector-x: 16.67%;
}
.station-drawer[data-kind="vessel"] {
  --tint: var(--type-vessel);
  --tint-bg: var(--type-vessel-tint);
  --connector-x: 50%;
}
.station-drawer[data-kind="tea"] {
  --tint: var(--type-tea);
  --tint-bg: var(--type-tea-tint);
  --connector-x: 83.33%;
}
.station-drawer[data-kind="infuser"] {
  --tint: var(--type-infuser);
  --tint-bg: var(--type-infuser-tint);
  --connector-x: 50%;
}

@media (max-width: 639px) {
  .station-drawer {
    --connector-x: 50% !important;
  }
}

.station-drawer::before {
  content: "";
  position: absolute;
  top: -7px;
  left: var(--connector-x);
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: var(--card-bg);
  border-top: 1px solid var(--card-border);
  border-left: 1px solid var(--card-border);
  z-index: 1;
}

.station-drawer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tint-bg);
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}

.station-drawer > * {
  position: relative;
  z-index: 1;
}

.station-drawer-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.station-drawer-eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tint);
  font-weight: 700;
}

.station-drawer-title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
}

.station-drawer-close {
  margin-left: auto;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  color: var(--text-muted);
  cursor: pointer;
  transition:
    color 120ms ease,
    background 120ms ease,
    border-color 120ms ease;
}

.station-drawer-close:hover {
  color: var(--text-primary);
  background: var(--surface-bg);
  border-color: var(--card-border);
}

.station-drawer-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.station-drawer-error {
  background: var(--brand-red-50);
  border: 1px solid var(--brand-red-200);
  border-radius: 0.5rem;
  padding: 0.625rem 0.875rem;
  color: var(--brand-red-800);
  font-size: 0.875rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .station-drawer-error {
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.3);
    color: #fecaca;
  }
}

:root[data-theme="dark"] .station-drawer-error {
  background: rgba(220, 38, 38, 0.12);
  border-color: rgba(220, 38, 38, 0.3);
  color: #fecaca;
}

.station-drawer-empty {
  font-size: 0.875rem;
  font-style: italic;
  color: var(--text-muted);
  margin: 0;
  padding: 0.75rem 0;
}

.station-drawer-actions {
  display: flex;
  gap: 0.75rem;
  padding-top: 0.25rem;
}

.station-drawer-save {
  background: var(--tint);
  border-color: var(--tint);
}

.station-drawer-save:hover {
  background: color-mix(in oklch, var(--tint) 80%, black);
  border-color: color-mix(in oklch, var(--tint) 80%, black);
}

@keyframes drawer-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .station-drawer {
    animation: none;
  }
}
.backlinks-section {
  margin: 1rem 1rem 0;
  padding: 1rem;
  border: 1px solid var(--card-border);
  border-radius: 0.875rem;
  background: color-mix(in oklch, var(--card-bg) 86%, var(--brand-amber-100));
}

.backlinks-heading {
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
}

.backlinks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.75rem;
}

.backlinks-block {
  display: grid;
  gap: 0.5rem;
}

.backlinks-label {
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--text-primary);
}

.backlinks-avatars,
.backlinks-entry-user {
  display: flex;
  align-items: center;
}

.backlinks-avatars {
  min-height: 2rem;
}

.backlinks-avatar,
.backlinks-avatar-more,
.backlinks-entry-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 2px solid var(--card-bg);
  overflow: hidden;
  background: var(--surface-bg);
}

.backlinks-avatar {
  display: inline-grid;
  place-items: center;
  margin-right: -0.45rem;
  color: var(--text-primary);
  text-decoration: none;
}

.backlinks-avatar img,
.backlinks-entry-avatar {
  object-fit: cover;
}

.backlinks-avatar img {
  width: 100%;
  height: 100%;
}

.backlinks-avatar-fallback,
.backlinks-avatar-more {
  display: inline-grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 700;
}

.backlinks-avatar-more {
  margin-left: 0.5rem;
  border-color: var(--card-border);
  color: var(--text-secondary);
}

.backlinks-see-all {
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-decoration: none;
}

.backlinks-see-all:hover,
.backlinks-entry-title:hover {
  text-decoration: underline;
}

.backlinks-entry-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.backlinks-entry-list-more {
  margin-top: 0.5rem;
}

.backlinks-entry {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 0.75rem;
  align-items: center;
  padding: 0.75rem;
  border: 1px solid var(--card-border);
  border-radius: 0.625rem;
  background: var(--card-bg);
}

.backlinks-entry-title {
  font-weight: 650;
  color: var(--text-primary);
  text-decoration: none;
}

.backlinks-entry-user {
  gap: 0.5rem;
  color: var(--text-secondary);
  text-decoration: none;
}

.backlinks-entry-meta {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.backlinks-more-row {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

@media (max-width: 640px) {
  .backlinks-entry {
    grid-template-columns: 1fr;
  }

  .backlinks-entry-meta {
    grid-column: 1;
    grid-row: auto;
  }
}
/* Static information pages: about, AT Protocol, terms */
.info-page {
  --info-accent: oklch(58% 0.095 58);
  max-width: 50rem;
  margin-inline: auto;
  padding-inline: 0.75rem;
}

.info-page-narrow {
  max-width: 50rem;
}

.info-page .prose {
  max-width: none;
}

.info-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 2rem;
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 1px solid var(--card-border);
  border-radius: 1.35rem;
  background:
    var(--texture-kraft),
    var(--card-bg);
  background-blend-mode: multiply, normal;
  box-shadow: var(--shadow-md);
}

.info-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--type-bean), var(--type-roaster), var(--type-brewer));
}

.info-hero > * {
  position: relative;
  z-index: 1;
}

.info-hero-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.info-title-group {
  max-width: 42rem;
}

.info-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.75rem;
  color: var(--text-muted);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.info-title {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(2rem, 7vw, 3.4rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
  font-weight: 700;
}

.info-deck {
  max-width: 64ch;
  margin-top: 1rem;
  color: var(--text-secondary);
  font-size: 1.06rem;
  line-height: 1.75;
}

.info-badge {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.38rem 0.65rem;
  border: 1px solid color-mix(in oklch, var(--brand-amber-400) 65%, var(--card-border));
  border-radius: 999px;
  background: color-mix(in oklch, var(--brand-amber-100) 70%, var(--card-bg));
  color: var(--brand-amber-900);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: var(--shadow-sm);
}

.info-alert,
.info-card,
.info-feature,
.info-callout,
.legal-doc > section,
.legal-dates {
  border: 1px solid var(--card-border);
  border-radius: 1rem;
  background: var(--card-bg);
  box-shadow: var(--shadow-sm);
}

.info-alert {
  margin-bottom: 1.25rem;
  padding: 0.75rem 0.9rem;
  background: color-mix(in oklch, var(--brand-amber-100) 32%, var(--card-bg));
}

.info-card,
.info-callout,
.legal-doc > section,
.legal-dates {
  padding: clamp(0.85rem, 2vw, 1.1rem);
}

.info-card-kraft {
  background-image: var(--texture-kraft);
  background-blend-mode: multiply;
}

.info-stack {
  display: grid;
  gap: 1.4rem;
}

.info-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.info-feature {
  position: relative;
  overflow: hidden;
  padding: 0.85rem 0.95rem;
  transition:
    border-color 180ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.info-feature > * {
  position: relative;
  z-index: 1;
}

.info-feature:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklch, var(--info-accent) 45%, var(--card-border));
  box-shadow: var(--shadow-md);
}

.info-feature h3,
.info-feature h4,
.info-card h2,
.info-card h3,
.info-callout h3,
.legal-doc h2 {
  margin-top: 0;
  color: var(--text-primary);
}

.info-card > :last-child,
.info-callout > :last-child,
.info-feature > :last-child,
.legal-doc > section > :last-child,
.info-alert > :last-child {
  margin-bottom: 0;
}

.info-feature p,
.info-card p,
.info-callout p,
.legal-doc p,
.legal-doc li {
  color: var(--text-secondary);
}

.info-list,
.info-steps {
  display: grid;
  gap: 0.7rem;
  margin-left: 0;
  padding-left: 0;
  list-style: none;
}

.info-page .info-list,
.info-page .info-steps {
  padding-left: 0;
}

.info-list li,
.info-steps li {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--surface-border);
  border-radius: 0.8rem;
  background: var(--surface-bg);
}

.info-links {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding-left: 1.1rem;
}

.info-links li {
  padding: 0;
  border: 0;
  background: transparent;
}

.info-steps {
  counter-reset: info-step;
}

.info-steps li {
  counter-increment: info-step;
  position: relative;
  display: block;
  padding-left: 3.25rem;
}

.info-steps li::before {
  content: counter(info-step, decimal-leading-zero);
  position: absolute;
  left: 0.7rem;
  top: 0.6rem;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.info-steps strong {
  white-space: nowrap;
}

.info-cta {
  margin-top: 2rem;
  text-align: center;
}

.legal-doc {
  display: grid;
  gap: 1rem;
}

.legal-doc > section {
  background: var(--card-bg);
}

.legal-doc h2 {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-bottom: 0.8rem;
  font-size: 1.2rem;
}

.legal-doc ul,
.legal-doc ol {
  padding-left: 1.25rem;
}

.legal-doc li + li {
  margin-top: 0.45rem;
}

@media (max-width: 640px) {
  .info-page {
    padding-inline: 0.5rem;
  }

  .info-hero {
    border-radius: 1rem;
  }
}