/*! BookClub layout utilities — basecoat.min.css ships component classes only;
    views use Tailwind-like utilities that are not in that bundle. */

.bg-background { background-color: var(--color-background, var(--background)); }
.text-foreground { color: var(--color-foreground, var(--foreground)); }
.text-muted-foreground { color: var(--color-muted-foreground, var(--muted-foreground)); }
.bg-muted { background-color: var(--color-muted, var(--muted)); }
.text-amber-600 { color: #d97706; }
.text-red-600 { color: #dc2626; }

.border { border: 1px solid var(--color-border, var(--border)); }
.border-b { border-bottom: 1px solid var(--color-border, var(--border)); }
.border-t { border-top: 1px solid var(--color-border, var(--border)); }

.block { display: block; }
.inline { display: inline; }
.flex { display: flex; }
.grid { display: grid; }

.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; }
.shrink-0 { flex-shrink: 0; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }

.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }

.container { width: 100%; }
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-md { max-width: 28rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-content { max-width: var(--bc-max-width, 75rem); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.ms-2 { margin-inline-start: 0.5rem; }

.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.pt-2 { padding-top: 0.5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.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; }

.min-h-screen { min-height: 100vh; }
.sticky { position: sticky; }
.top-0 { top: 0; }
.z-10 { z-index: 10; }

.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.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; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.tracking-tight { letter-spacing: -0.025em; }
.text-center { text-align: center; }
.text-end { text-align: end; }
.no-underline { text-decoration: none; }
.cursor-pointer { cursor: pointer; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whitespace-pre-line { white-space: pre-line; }
.whitespace-pre-wrap { white-space: pre-wrap; }

.w-full { width: 100%; }
.w-auto { width: auto; }
.h-full { height: 100%; }
.h-36 { height: 9rem; }
.h-40 { height: 10rem; }
.h-60 { height: 15rem; }
.min-w-\[200px\] { min-width: 200px; }
.min-w-0 { min-width: 0; }
.max-h-\[200px\] { max-height: 200px; }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.inline-flex { display: inline-flex; }
.-top-1 { top: -0.25rem; }
.-right-1 { right: -0.25rem; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.leading-none { line-height: 1; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.hidden { display: none !important; }
.justify-start { justify-content: flex-start; }

/* Dark-mode variants (basecoat .dark on <html>; no Tailwind build) */
.dark .dark\:hidden {
  display: none !important;
}

.dark .dark\:inline-flex {
  display: inline-flex !important;
}

.dark .dark\:inline {
  display: inline !important;
}

.bookclub-theme-toggle {
  min-height: 2.75rem;
  min-width: 2.75rem;
}

.bookclub-theme-toggle .bookclub-theme-icon {
  flex-shrink: 0;
}

html:not(.dark) .bookclub-theme-toggle .bookclub-theme-icon {
  color: var(--bc-muted);
}

.dark .bookclub-theme-toggle .bookclub-theme-icon,
html.dark .bookclub-theme-toggle .bookclub-theme-icon {
  color: var(--bc-accent-amber);
}

.bookclub-theme-toggle .bookclub-theme-label {
  font-size: 0.875rem;
  line-height: 1.25;
  font-weight: 500;
}

.text-\[10px\] { font-size: 10px; line-height: 1; }
.min-w-badge,
.min-w-\[1\.1rem\] { min-width: 1.1rem; }

.min-h-touch { min-height: 2.75rem; }
.h-\[1\.1rem\] { height: 1.1rem; }

.object-cover { object-fit: cover; }
.rounded { border-radius: var(--radius-md, 0.375rem); }
.rounded-lg { border-radius: var(--radius-lg, var(--radius, 0.5rem)); }
.rounded-full { border-radius: 9999px; }
.rounded-t-lg {
  border-top-left-radius: var(--radius-lg, var(--radius, 0.5rem));
  border-top-right-radius: var(--radius-lg, var(--radius, 0.5rem));
}
.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }

.list-inside { list-style-position: inside; }
.list-decimal { list-style-type: decimal; }

.divide-y > :not(:last-child) {
  border-bottom: 1px solid var(--color-border, var(--border));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; }

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

@media (min-width: 640px) {
  .sm\:col-span-1 { grid-column: span 1 / span 1; }
  .sm\:col-span-2 { grid-column: span 2 / span 2; }
  .sm\:col-span-3 { grid-column: span 3 / span 3; }
  .sm\:col-span-4 { grid-column: span 4 / span 4; }
  .sm\:col-span-6 { grid-column: span 6 / span 6; }
  .sm\:col-span-10 { grid-column: span 10 / span 10; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .md\:col-span-4 { grid-column: span 4 / span 4; }
  .md\:col-span-8 { grid-column: span 8 / span 8; }
  .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-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .lg\:col-span-4 { grid-column: span 4 / span 4; }
  .lg\:col-span-5 { grid-column: span 5 / span 5; }
  .lg\:col-span-7 { grid-column: span 7 / span 7; }
  .lg\:col-span-8 { grid-column: span 8 / span 8; }
  .lg\:grid { display: grid; }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .lg\:gap-6 { gap: 1.5rem; }
  .lg\:mt-0 { margin-top: 0; }
}

/* --- BookClub layout chrome (user-centric-ux M1) --- */

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  z-index: 100;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md, 0.375rem);
  background: var(--color-primary, var(--primary));
  color: var(--color-primary-foreground, var(--primary-foreground));
  font-size: 0.875rem;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 150ms ease;
}

.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--color-ring, var(--ring));
  outline-offset: 2px;
}

.bookclub-nav .bookclub-nav-link,
.bookclub-nav .bookclub-nav-form,
.bookclub-nav button,
.bookclub-nav .bookclub-nav-user-trigger {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
}

.bookclub-nav-link {
  font-family: var(--bc-font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--muted-foreground);
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  border-radius: var(--bc-radius-md);
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}

.bookclub-nav-link:hover,
.bookclub-nav-link:focus-visible {
  color: var(--foreground);
  background: var(--muted);
  outline: none;
}

.bookclub-nav-link--active {
  color: var(--foreground);
  background: var(--card);
  box-shadow: inset 0 -2px 0 var(--primary);
}

.bookclub-nav-link--menu {
  width: 100%;
  justify-content: flex-start;
  border-radius: var(--bc-radius-sm);
}

.bookclub-nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.125rem;
}

.bookclub-nav-links--auth {
  gap: 0.375rem;
}

.bookclub-nav-section {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.bookclub-nav-section-label {
  display: none;
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.bookclub-nav-divider {
  display: none;
  width: 1px;
  align-self: stretch;
  min-height: 1.5rem;
  margin: 0 0.375rem;
  background: var(--border);
}

.bookclub-nav-user-menu {
  position: relative;
}

.bookclub-nav-user-menu > summary {
  list-style: none;
}

.bookclub-nav-user-menu > summary::-webkit-details-marker {
  display: none;
}

.bookclub-nav-user-trigger {
  gap: 0.5rem;
  padding: 0.375rem 0.625rem 0.375rem 0.375rem;
  border-radius: var(--bc-radius-pill);
  border: 1px solid var(--border);
  background: var(--muted);
  color: var(--foreground);
  font-family: var(--bc-font-body);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.bookclub-nav-user-trigger:hover,
.bookclub-nav-user-menu[open] .bookclub-nav-user-trigger {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  background: var(--card);
}

.bookclub-nav-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--bc-primary);
  color: var(--bc-on-primary);
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
}

.bookclub-nav-user-name {
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bookclub-nav-user-chevron {
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: 0.55;
  transition: transform 0.15s ease;
}

.bookclub-nav-user-menu[open] .bookclub-nav-user-chevron {
  transform: rotate(-135deg) translateY(1px);
}

.bookclub-nav-user-dropdown {
  position: absolute;
  top: calc(100% + 0.375rem);
  right: 0;
  z-index: 60;
  min-width: 11rem;
  padding: 0.375rem;
  border: 1px solid var(--border);
  border-radius: var(--bc-radius-lg);
  background: var(--popover);
  color: var(--popover-foreground);
  box-shadow: 0 12px 32px rgb(20 20 19 / 0.12);
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.bookclub-nav-user-flat {
  display: none;
  flex-direction: column;
  gap: 0.125rem;
  width: 100%;
}

.bookclub-nav .bookclub-nav-logout-btn,
.bookclub-nav .bookclub-nav-form button.bookclub-nav-link {
  color: var(--muted-foreground);
  background: transparent;
  border: 0;
  box-shadow: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-align: left;
}

.bookclub-nav .bookclub-nav-logout-btn:hover,
.bookclub-nav .bookclub-nav-logout-btn:focus-visible,
.bookclub-nav .bookclub-nav-form button.bookclub-nav-link:hover,
.bookclub-nav .bookclub-nav-form button.bookclub-nav-link:focus-visible {
  color: var(--foreground);
  background: var(--muted);
  outline: none;
}

.bookclub-nav {
  gap: 0.5rem;
}

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

/* --- Mobile nav drawer (mobile-ui-ux M7.1) --- */

.bookclub-header-inner {
  position: relative;
  padding-top: 1rem;
  padding-bottom: 0.75rem;
}

.bookclub-nav-toggle {
  min-width: 2.75rem;
  min-height: 2.75rem;
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--bc-radius-md);
  background: var(--muted);
  color: var(--foreground);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.bookclub-nav-toggle:hover {
  background: var(--card);
}

.bookclub-nav-toggle-bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 1.125rem;
  height: 1.125rem;
}

.bookclub-nav-toggle-bars span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

body.bookclub-nav-open .bookclub-nav-toggle-bars span:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}

body.bookclub-nav-open .bookclub-nav-toggle-bars span:nth-child(2) {
  opacity: 0;
}

body.bookclub-nav-open .bookclub-nav-toggle-bars span:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

.bookclub-header-actions {
  flex-shrink: 0;
}

/* Theme toggle: header on mobile (1-tap), nav end on desktop (기존 위치) */
.bookclub-theme-slot--desktop {
  display: none;
  align-items: center;
  flex: 0 0 auto;
}

.bookclub-locale-switcher {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0.125rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.bookclub-locale-switcher__item {
  padding: 0.25rem 0.4rem;
  border-radius: 0.375rem;
  color: var(--muted-foreground, #6b7280);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}

.bookclub-locale-switcher__item:hover {
  color: var(--foreground, #111827);
  background: var(--muted, #f3f4f6);
}

.bookclub-locale-switcher__item--active {
  font-weight: 600;
  color: var(--foreground, #111827);
}

.bookclub-locale-slot--mobile {
  display: inline-flex;
  align-items: center;
}

.bookclub-locale-slot--desktop {
  display: none;
  align-items: center;
  margin-left: 0.5rem;
}

.bookclub-nav-overlay {
  display: none;
}

.bookclub-nav-panel {
  display: flex;
}

.bookclub-nav-panel .bookclub-nav-link,
.bookclub-nav-panel .bookclub-nav-form button,
.bookclub-nav-panel .bookclub-nav-user-trigger {
  justify-content: flex-start;
}

.bookclub-nav-item-notifications {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.bookclub-nav-link--with-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.bookclub-nav-link--with-badge .bookclub-nav-link-text {
  line-height: 1.2;
}

.bookclub-notification-badge {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  min-width: 1.1rem;
  height: 1.1rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  border-radius: 9999px;
  background: var(--color-primary, var(--primary));
  color: var(--color-primary-foreground, var(--primary-foreground));
  font-size: 10px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}

.bookclub-notification-badge--inline {
  position: static;
  top: auto;
  right: auto;
  min-width: 1rem;
  height: 1rem;
  padding-left: 0.3125rem;
  padding-right: 0.3125rem;
  font-size: 0.625rem;
  font-weight: 600;
  pointer-events: auto;
  flex-shrink: 0;
  box-shadow: none;
}

.bookclub-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Editorial tables in content cards — sketch row dividers (Basecoat hairline is too faint on cream) */
.bookclub-content-card .table tr {
  border-bottom: none;
}

.bookclub-content-card .table thead tr,
.bookclub-content-card .table tbody tr:not(:last-child) {
  background-image: var(--bc-sketch-line);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 5px;
}

.bookclub-layout-feed {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
  .bookclub-layout-feed {
    grid-template-columns: minmax(0, 1fr) 280px;
  }
}

@media (max-width: 640px) {
  .bookclub-header-inner {
    padding-top: 0.875rem;
    padding-bottom: 0.75rem;
  }

  .bookclub-header-bar {
    padding-top: 0;
    padding-bottom: 0;
  }

  .bookclub-nav-toggle {
    display: inline-flex;
  }

  .bookclub-nav-overlay:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgb(0 0 0 / 0.45);
    backdrop-filter: blur(2px);
  }

  .bookclub-nav-panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 120;
    width: min(calc(100vw - 2.5rem), 320px);
    height: 100dvh;
    max-height: 100dvh;
    padding: 1rem;
    padding-top: 3.75rem;
    background: var(--background);
    border-left: 1px solid var(--border);
    box-shadow: -8px 0 32px rgb(20 20 19 / 0.14);
    transform: translateX(100%);
    transition: transform 220ms ease;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  body.bookclub-nav-open .bookclub-nav-panel {
    transform: translateX(0);
  }

  body.bookclub-nav-open {
    overflow: hidden;
  }

  .bookclub-nav-section {
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
  }

  .bookclub-nav-section:last-of-type {
    border-bottom: 0;
    margin-bottom: 0;
  }

  .bookclub-nav-section-label {
    display: block;
    padding: 0 0.5rem 0.25rem;
  }

  .bookclub-nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0.125rem;
  }

  .bookclub-nav-link {
    width: 100%;
    padding: 0.625rem 0.75rem;
  }

  .bookclub-nav-link--active {
    box-shadow: inset 3px 0 0 var(--bc-primary);
  }

  .bookclub-nav-item-notifications {
    width: 100%;
  }

  .bookclub-nav-item-notifications .bookclub-nav-link,
  .bookclub-nav-item-notifications .bookclub-nav-link--with-badge {
    width: 100%;
    justify-content: space-between;
  }

  .bookclub-nav-form {
    width: 100%;
  }

  .bookclub-nav-user-menu {
    display: none;
  }

  .bookclub-nav-user-flat {
    display: flex;
  }

  .bookclub-nav-links--auth {
    flex-direction: column;
    align-items: stretch;
  }

  .bookclub-nav-cta {
    justify-content: center;
    text-align: center;
  }

  .bookclub-theme-slot--desktop {
    display: none;
  }

  .bookclub-footer {
    font-size: 0.875rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
}

@media (min-width: 641px) {
  .bookclub-header-inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .bookclub-header-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    min-width: 0;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
  }

  .bookclub-brand {
    flex-shrink: 0;
  }

  .bookclub-nav-panel {
    position: static;
    transform: none;
    width: auto;
    height: auto;
    max-height: none;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    overflow: visible;
    gap: 0.375rem;
  }

  .bookclub-nav-section {
    flex: 0 0 auto;
  }

  .bookclub-nav-section--primary .bookclub-nav-links {
    gap: 0.125rem;
  }

  .bookclub-nav-divider {
    display: inline-block;
    flex: 0 0 auto;
  }

  .bookclub-nav-user-flat {
    display: none;
  }

  .bookclub-nav-panel .bookclub-nav-link,
  .bookclub-nav-panel .bookclub-nav-form,
  .bookclub-nav-panel .bookclub-nav-item-notifications {
    width: auto;
    flex: 0 0 auto;
  }

  .bookclub-nav-form {
    display: inline-flex;
    align-items: center;
  }

  .bookclub-nav-form .w-full,
  .bookclub-nav-panel .bookclub-nav-link.w-full,
  .bookclub-nav-panel .bookclub-nav-logout-btn.w-full {
    width: auto;
  }

  .bookclub-theme-slot--mobile {
    display: none;
  }

  .bookclub-theme-slot--desktop {
    display: inline-flex;
    margin-left: 0.25rem;
  }

  .bookclub-locale-slot--mobile {
    display: none;
  }

  .bookclub-locale-slot--desktop {
    display: inline-flex;
  }
}

@media (min-width: 641px) and (max-width: 960px) {
  .bookclub-nav-link {
    padding: 0.5rem 0.5rem;
    font-size: 0.875rem;
  }

  .bookclub-nav-user-name {
    max-width: 5rem;
  }
}

@media (min-width: 641px) {
  /* Match Korean nav size; only trim horizontal padding for longer English labels. */
  html[lang="en"] .bookclub-nav-link {
    padding: 0.5rem 0.625rem;
    font-size: 0.9375rem;
  }

  html[lang="en"] .bookclub-nav-user-name {
    max-width: 5.5rem;
  }

  html[lang="en"] .bookclub-brand {
    margin-right: 0.25rem;
  }
}

@media (min-width: 641px) and (max-width: 1280px) {
  html[lang="en"] .bookclub-nav-link {
    padding: 0.5rem 0.5rem;
    font-size: 0.875rem;
  }

  html[lang="en"] .bookclub-nav-user-name {
    max-width: 4.5rem;
  }
}

/* Chat log (user-centric-ux M3; mobile-ui-ux M7.3 viewport) */
.bookclub-chat-log {
  max-height: min(420px, 50dvh);
  overflow-y: auto;
}

.bookclub-breadcrumb {
  margin-bottom: 1rem;
}

.bookclub-breadcrumb ol li + li::before {
  content: "/";
  margin-right: 0.5rem;
  opacity: 0.55;
}

.bookclub-book-detail-page {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}

.bookclub-book-detail-description {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--bc-muted, var(--muted-foreground));
  overflow-wrap: anywhere;
  word-break: break-word;
}

.bookclub-book-detail-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bookclub-book-detail-section-title {
  font-family: var(--bc-font-display);
  font-size: 1.375rem;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--bc-ink, var(--foreground));
}

html.dark .bookclub-book-detail-section-title,
.dark .bookclub-book-detail-section-title {
  color: var(--bc-on-dark, var(--foreground));
}

.bookclub-activity-section-title {
  font-family: var(--bc-font-display);
  font-size: 1.375rem;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  color: var(--foreground);
  border-bottom: none;
  background-image: var(--bc-sketch-line);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 5px;
}

.bookclub-book-detail-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.bookclub-book-detail-stack-sm {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bookclub-book-detail-review-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bookclub-reader-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.bookclub-book-detail-aside {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.bookclub-book-detail-main {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.bookclub-book-detail-related {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bookclub-book-detail-ai-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.bookclub-book-detail-related-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  min-width: 0;
  max-width: 100%;
}

.bookclub-book-detail-related-row > .min-w-0 {
  overflow: hidden;
}

/* Book cover frames — editorial sketch border on cover images */
.bookclub-book-cover-frame {
  position: relative;
  isolation: isolate;
  display: block;
  overflow: hidden;
  min-width: 0;
  border: none;
  box-shadow: none;
  border-radius: 1.08rem 0.98rem 1.05rem 1.02rem / 1rem 1.06rem 0.96rem 1.04rem;
}

.bookclub-editorial .bookclub-book-cover-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  z-index: 2;
  border: 1.45px solid color-mix(in srgb, var(--bc-sketch-ink) 72%, transparent);
  filter: url(#bookclub-sketch-sm);
}

.bookclub-book-cover-frame__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bookclub-book-cover-frame__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 0.75rem;
  text-align: center;
  padding: 0.25rem;
}

.bookclub-book-cover-frame--hero {
  width: 100%;
}

.bookclub-book-cover-frame--hero .bookclub-book-cover-frame__img,
.bookclub-book-cover-frame--hero .bookclub-book-cover-frame__empty {
  aspect-ratio: 2 / 3;
}

.bookclub-book-cover-frame--thumb {
  width: 4rem;
  height: 5rem;
  flex-shrink: 0;
  border-radius: var(--radius-md, 0.375rem);
}

.bookclub-book-cover-frame--thumb .bookclub-book-cover-frame__empty {
  font-size: 0.625rem;
}

.bookclub-book-cover-frame--grid {
  width: 100%;
  border-radius: 0.95rem 0.88rem 0 0 / 0.92rem 0.98rem 0 0;
}

.bookclub-book-cover-frame--grid .bookclub-book-cover-frame__img,
.bookclub-book-cover-frame--grid .bookclub-book-cover-frame__empty {
  aspect-ratio: 3 / 4;
}

.bookclub-book-cover-frame--grid .bookclub-book-cover-frame__empty {
  background: color-mix(in srgb, var(--bc-primary) 6%, var(--muted));
}

.bookclub-book-cover-frame--row {
  width: 44px;
  height: 62px;
  flex-shrink: 0;
  border-radius: 0.62rem 0.56rem 0.64rem 0.58rem / 0.58rem 0.64rem 0.54rem 0.62rem;
}

.bookclub-book-cover-frame--row .bookclub-book-cover-frame__empty {
  font-size: 0.625rem;
}

.bookclub-book-cover-frame--vs {
  width: 100%;
  border-radius: var(--radius-md, 0.375rem);
}

.bookclub-book-cover-frame--vs .bookclub-book-cover-frame__img,
.bookclub-book-cover-frame--vs .bookclub-book-cover-frame__empty {
  aspect-ratio: 3 / 4;
}

.bookclub-book-cover-frame--bento {
  width: 100%;
  border-radius: 1rem 0.92rem 0 0 / 0.95rem 0.88rem 0 0;
}

.bookclub-book-cover-frame--bento .bookclub-book-cover-frame__img,
.bookclub-book-cover-frame--bento .bookclub-book-cover-frame__empty {
  height: 9rem;
}

.bookclub-book-detail-page .grid > *,
.bookclub-book-detail-aside,
.bookclub-book-detail-main,
.bookclub-book-detail-page :is(.bookclub-content-card, .card) {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.bookclub-book-detail-layout {
  min-width: 0;
}

@media (max-width: 640px) {
  main.container:has(.bookclub-book-detail-page) {
    padding-left: 1rem;
    padding-right: 1rem;
    overflow-x: clip;
  }

  .bookclub-book-detail-page.bookclub-page-shell {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 1.25rem 1rem;
    margin-bottom: 0.75rem;
    overflow-x: hidden;
    isolation: isolate;
  }

  /* Match site-wide editorial sketch (same tokens as .bookclub-page-shell / nested cards) */
  .bookclub-book-detail-page.bookclub-page-shell::before {
    border: 1.9px solid var(--bc-sketch-ink);
    filter: url(#bookclub-sketch-lg);
  }

  .bookclub-book-detail-page.bookclub-page-shell::after {
    inset: 2px 1px 1px 2px;
    border: 1px solid color-mix(in srgb, var(--bc-sketch-ink) 26%, transparent);
    filter: url(#bookclub-sketch-lg);
    transform: rotate(0.2deg);
  }

  .bookclub-book-detail-page .bookclub-content-card::before {
    border: 1.45px solid color-mix(in srgb, var(--bc-sketch-ink) 72%, transparent);
    filter: url(#bookclub-sketch-sm);
  }

  .bookclub-book-detail-page .bookclub-content-card {
    padding: 1.125rem 1rem;
    overflow: hidden;
    isolation: isolate;
  }

  .bookclub-book-detail-hero > * {
    min-width: 0;
  }

  .bookclub-book-detail-layout {
    min-width: 0;
  }

  .bookclub-book-detail-section-title {
    font-size: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .bookclub-book-detail-main .bookclub-ai-recommend-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bookclub-search-agent-aside {
    display: block;
  }
}

/* --- Books search page (ai-search-agent + UX polish) --- */

.bookclub-books-search-page,
.bookclub-clubs-search-page {
  min-width: 0;
}

.bookclub-books-search-header .bookclub-page-description {
  line-height: 1.65;
  max-width: 42rem;
  margin-bottom: 0.25rem;
}

.bookclub-books-search-form-card .card-content,
.bookclub-books-search-form-card [class*="card-content"],
.bookclub-books-search-form-card > section {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.bookclub-books-search-fields {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .bookclub-books-search-fields {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: end;
  }

  .bookclub-books-search-field--query {
    grid-column: span 5 / span 5;
  }

  .bookclub-books-search-field--category {
    grid-column: span 3 / span 3;
  }

  .bookclub-books-search-field--sort {
    grid-column: span 2 / span 2;
  }

  .bookclub-books-search-field--submit {
    grid-column: span 2 / span 2;
  }
}

@media (min-width: 768px) {
  .bookclub-admin-category-add-fields .bookclub-admin-category-field--cat {
    grid-column: span 3 / span 3;
  }

  .bookclub-admin-category-add-fields .bookclub-admin-category-field--slug,
  .bookclub-admin-category-add-fields .bookclub-admin-category-field--ko,
  .bookclub-admin-category-add-fields .bookclub-admin-category-field--en {
    grid-column: span 2 / span 2;
  }

  .bookclub-admin-category-add-fields .bookclub-admin-category-field--submit {
    grid-column: span 3 / span 3;
  }
}

.bookclub-admin-category-row-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}

.bookclub-admin-category-row-form > * {
  min-width: 0;
  flex: 1 1 7rem;
}

.bookclub-admin-category-row-form > .bookclub-admin-category-row-key {
  flex: 2 1 10rem;
}

.bookclub-admin-category-row-form > .bookclub-admin-category-row-actions {
  flex: 0 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  align-items: center;
}

.bookclub-books-search-field {
  min-width: 0;
  width: 100%;
}

.bookclub-books-search-field > .grid {
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  isolation: isolate;
}

.bookclub-books-search-field > .grid > label {
  grid-column: 1;
  grid-row: 1;
}

.bookclub-editorial .bookclub-books-search-field > .grid > :is(input.input, select.select, textarea.input) {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  z-index: 1;
  border: none !important;
  border-radius: var(--bc-control-radius);
  box-shadow: none !important;
  background-color: var(--background);
}

.bookclub-editorial .bookclub-books-search-field > .grid:has(> :is(input.input, select.select, textarea.input))::before {
  content: "";
  grid-column: 1;
  grid-row: 2;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  min-width: 0;
  pointer-events: none;
  z-index: 2;
  border-radius: var(--bc-control-radius);
  border: 1.6px solid var(--bc-sketch-ink);
  filter: url(#bookclub-sketch-sm);
}

.bookclub-editorial .bookclub-books-search-field > .grid:has(> :is(input.input, select.select, textarea.input):focus-visible)::before {
  border-color: var(--bc-sketch-ink-strong);
}

.bookclub-editorial .bookclub-books-search-field > .grid > :is(input.input, select.select, textarea.input):focus-visible {
  outline: none !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  box-shadow: none !important;
}

html.dark .bookclub-editorial .bookclub-books-search-field > .grid > :is(input.input, select.select, textarea.input) {
  background-color: color-mix(in srgb, var(--card) 88%, transparent);
}

.bookclub-books-search-field :is(input.input, select.select, textarea.input) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.bookclub-books-search-field select.select {
  display: block;
}

.bookclub-books-search-tech summary {
  list-style: none;
}

.bookclub-books-search-tech summary::-webkit-details-marker {
  display: none;
}

.bookclub-books-search-results-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.bookclub-books-search-results-title {
  margin: 0;
}

@media (max-width: 640px) {
  .bookclub-books-search-header .flex {
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
  }

  .bookclub-books-search-header :is(a.btn-sm-primary, .btn-sm-primary) {
    width: 100%;
    justify-content: center;
    min-height: 2.75rem;
  }

  .bookclub-books-search-form,
  .bookclub-books-search-fields {
    width: 100%;
  }

  .bookclub-books-search-fields {
    gap: 0.875rem;
  }

  .bookclub-books-search-field > .grid {
    gap: 0.375rem;
  }

  .bookclub-books-search-field :is(input.input, select.select, textarea.input) {
    min-height: 2.75rem;
    font-size: 1rem;
    padding: 0.625rem 0.75rem;
  }

  .bookclub-books-search-field label {
    font-size: 0.875rem;
    font-weight: 600;
  }

  .bookclub-books-search-field--submit :is(.btn-primary, a.btn-primary) {
    min-height: 2.875rem;
    font-size: 1rem;
  }
}

.bookclub-books-result-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 640px) {
  .bookclub-books-result-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Books search card view — 4 per row on sm+ (default grid stays 3 for mypage/agent reuse) */
@media (min-width: 640px) {
  .bookclub-books-search-page .bookclub-books-result-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.bookclub-books-result-card {
  min-width: 0;
  border: none;
  border-radius: 1.08rem 0.98rem 1.05rem 1.02rem / 1rem 1.06rem 0.96rem 1.04rem;
  background: var(--card);
  color: var(--card-foreground);
  overflow: visible;
  transition: transform 150ms ease;
}

.bookclub-books-result-card:hover {
  transform: translateY(-2px);
}

.bookclub-books-result-link {
  display: flex;
  flex-direction: column;
  color: inherit;
  min-width: 0;
  text-decoration: none;
}

.bookclub-books-result-cover {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  background: var(--muted);
  border-radius: 0.95rem 0.88rem 0 0 / 0.92rem 0.98rem 0 0;
}

.bookclub-books-result-cover--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  background: color-mix(in srgb, var(--bc-primary) 6%, var(--muted));
}

.bookclub-books-result-body {
  padding: 0.75rem;
  min-width: 0;
}

.bookclub-books-result-title {
  font-size: 0.875rem;
  line-height: 1.35;
  font-weight: 600;
  margin: 0;
  color: var(--foreground);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.bookclub-books-result-author {
  font-size: 0.75rem;
  line-height: 1.25rem;
  color: var(--color-muted-foreground, var(--muted-foreground));
  margin: 0.25rem 0 0.5rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

/* M10 book-search UI/UX — filter chips, rating, status, discovery, pagination */

.bookclub-books-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.bookclub-books-filter-reset {
  color: var(--color-muted-foreground, var(--muted-foreground));
  text-decoration: underline;
}

.bookclub-books-filter-reset:hover {
  color: var(--color-foreground, var(--foreground));
}

.bookclub-books-result-meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0 0 0.5rem;
}

.bookclub-stars {
  font-size: 0.8125rem;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.bookclub-star--full {
  color: var(--color-amber-500, #f59e0b);
}

.bookclub-star--empty {
  color: var(--color-muted-foreground, var(--muted-foreground));
  opacity: 0.5;
}

.bookclub-books-result-reviews {
  font-size: 0.6875rem;
  color: var(--color-muted-foreground, var(--muted-foreground));
}

.bookclub-books-result-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.bookclub-books-discovery {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 0;
}

.bookclub-books-search-page .bookclub-books-active-filters {
  margin-bottom: 0.75rem;
}

.bookclub-books-search-page .bookclub-books-search-results-head .bookclub-discovery-title {
  margin: 0;
}

/*
 * Books search only (iPhone) — discovery grids stack many SVG-filtered ::before borders;
 * WebKit drops them silently while other pages stay within the filter budget. Keep the
 * shared editorial ink/weight; drop only feDisplacementMap inside this page shell.
 */
@supports (-webkit-touch-callout: none) {
  @media (hover: none) and (pointer: coarse) {
    .bookclub-books-search-page::before,
    .bookclub-books-search-page::after,
    .bookclub-books-search-page :is(
      .bookclub-content-card,
      .bookclub-books-search-form-card,
      .bookclub-books-result-card,
      .bookclub-books-result-row,
      .bookclub-view-toggle,
      .btn-primary,
      .btn-sm-primary,
      a.btn-primary,
      a.btn-sm-primary
    )::before,
    .bookclub-editorial .bookclub-books-search-page .bookclub-books-search-field > .grid:has(> :is(input.input, select.select, textarea.input))::before,
    .bookclub-editorial .bookclub-books-search-page .bookclub-book-cover-frame::before {
      -webkit-filter: none !important;
      filter: none !important;
    }
  }
}

.bookclub-discovery-block {
  min-width: 0;
}

.bookclub-discovery-title {
  margin: 0 0 1rem;
}

.bookclub-category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bookclub-category-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--bc-radius-pill, 9999px);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--foreground);
  background: var(--card);
  text-decoration: none;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.bookclub-category-chip:hover {
  border-color: color-mix(in srgb, var(--primary) 32%, var(--border));
  background: var(--muted);
}

.bookclub-category-chip--active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--card));
  font-weight: 600;
}

/* media / price filters: inline pill toggles in place of dropdowns */
.bookclub-books-filter-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-top: 0.875rem;
}

.bookclub-filter-toggle-group {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
  min-width: 0;
}

.bookclub-filter-toggle-legend {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted-foreground);
}

.bookclub-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.bookclub-filter-pill {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.3125rem 0.8125rem;
  border: 1px solid var(--border);
  border-radius: var(--bc-radius-pill, 9999px);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--foreground);
  background: var(--card);
  cursor: pointer;
  user-select: none;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.bookclub-filter-pill:hover {
  border-color: color-mix(in srgb, var(--primary) 32%, var(--border));
  background: var(--muted);
}

.bookclub-filter-pill--active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, var(--card));
  color: var(--primary);
  font-weight: 600;
}

.bookclub-filter-pill:focus-within {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.bookclub-filter-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--bc-radius-pill, 9999px);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--border);
  background: var(--muted);
  color: var(--foreground);
}

.bookclub-filter-chip--dismiss:hover {
  border-color: color-mix(in srgb, var(--destructive) 40%, var(--border));
  background: color-mix(in srgb, var(--destructive) 8%, var(--muted));
}

.bookclub-books-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  margin-top: 1.5rem;
}

.bookclub-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0 0.625rem;
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-md, 0.375rem);
  font-size: 0.875rem;
  color: var(--color-foreground, var(--foreground));
  background: var(--color-card, var(--card));
  text-decoration: none;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.bookclub-page-link:hover {
  border-color: var(--color-ring, var(--ring));
  background: var(--color-muted, var(--muted));
}

.bookclub-page-link--current {
  background: var(--color-primary, var(--primary));
  color: var(--color-primary-foreground, var(--primary-foreground));
  border-color: var(--color-primary, var(--primary));
  font-weight: 600;
}

.bookclub-page-ellipsis {
  padding: 0 0.25rem;
  color: var(--color-muted-foreground, var(--muted-foreground));
}

.bookclub-search-agent-layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}

@media (min-width: 1024px) {
  .bookclub-search-agent-layout {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: start;
  }

  .bookclub-search-agent-results-col {
    grid-column: span 7 / span 7;
    min-width: 0;
  }

  .bookclub-search-agent-aside {
    grid-column: span 5 / span 5;
    min-width: 0;
  }
}

.bookclub-search-agent-mobile-switch {
  min-width: 0;
}

@media (min-width: 1024px) {
  .bookclub-search-agent-mobile-switch {
    display: none;
  }
}

.bookclub-search-agent-tabs {
  display: flex;
  gap: 0.5rem;
  min-width: 0;
}

.bookclub-search-agent-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-md, 0.375rem);
  background: var(--color-background, var(--background));
  color: var(--color-foreground, var(--foreground));
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.25;
  cursor: pointer;
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}

.bookclub-search-agent-tab-title {
  font-weight: 600;
}

.bookclub-search-agent-tab-desc {
  font-size: 0.6875rem;
  line-height: 1.2;
  color: var(--color-muted-foreground, var(--muted-foreground));
}

.bookclub-search-agent-tab:hover {
  background: var(--color-muted, var(--muted));
}

.bookclub-search-agent-tab[aria-selected="true"] {
  background: var(--color-primary, var(--primary));
  border-color: var(--color-primary, var(--primary));
  color: var(--color-primary-foreground, var(--primary-foreground));
}

.bookclub-search-agent-tab[aria-selected="true"] .bookclub-search-agent-tab-desc {
  color: var(--color-primary-foreground, var(--primary-foreground));
  opacity: 0.9;
}

.bookclub-search-agent-tab[aria-selected="true"]:hover {
  background: var(--color-primary, var(--primary));
  color: var(--color-primary-foreground, var(--primary-foreground));
}

.bookclub-search-agent-tab:focus-visible {
  outline: 2px solid var(--color-ring, var(--ring));
  outline-offset: 2px;
}

.bookclub-search-agent-proactive-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.bookclub-search-agent-proactive-title {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  margin: 0;
}

.bookclub-search-agent-proactive-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 640px) {
  .bookclub-search-agent-proactive-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .bookclub-search-agent-proactive-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.bookclub-search-agent-proactive-card {
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-md, 0.375rem);
  background: var(--color-card, var(--card));
  transition: border-color 150ms ease;
}

.bookclub-search-agent-proactive-card:hover {
  border-color: var(--color-ring, var(--ring));
}

.bookclub-search-agent-proactive-link {
  display: block;
  min-width: 0;
  color: inherit;
}

.bookclub-search-agent-proactive-book-title {
  font-size: 0.875rem;
  line-height: 1.35;
  font-weight: 600;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.bookclub-search-agent-proactive-book-author {
  font-size: 0.75rem;
  line-height: 1.25rem;
  color: var(--color-muted-foreground, var(--muted-foreground));
  margin: 0.25rem 0 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.bookclub-search-agent-log {
  /* Design Ref: §2.1 — fixed-feel scrolling log */
  min-height: 16rem;
  max-height: 30rem;
  max-height: min(30rem, 55dvh);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem;
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-md, 0.375rem);
  background: var(--color-muted, var(--muted));
}

/* Design Ref: §2.5 — markdown lists inside assistant bubbles */
.bookclub-search-agent-bubble-inner ul {
  margin: 0.25rem 0;
  padding-left: 1.1rem;
  list-style: disc;
}

.bookclub-search-agent-bubble-inner li {
  margin: 0.1rem 0;
}

.bookclub-search-agent-bubble {
  max-width: 95%;
}

.bookclub-search-agent-bubble--user {
  align-self: flex-end;
}

.bookclub-search-agent-bubble--assistant {
  align-self: flex-start;
}

.bookclub-search-agent-bubble-inner {
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md, 0.375rem);
  font-size: 0.875rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

.bookclub-search-agent-bubble--user .bookclub-search-agent-bubble-inner {
  background: var(--color-primary, var(--primary));
  color: var(--color-primary-foreground, var(--primary-foreground));
}

.bookclub-search-agent-bubble--assistant .bookclub-search-agent-bubble-inner {
  background: var(--color-card, var(--card));
  border: 1px solid var(--color-border, var(--border));
}

.bookclub-search-agent-panel-inner {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.bookclub-search-agent-panel,
.bookclub-search-agent-panel .card,
.bookclub-search-agent-panel [class*="card"] {
  min-width: 0;
}

.bookclub-search-agent-cards {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 480px) {
  .bookclub-search-agent-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.bookclub-search-agent-result-mini-card {
  padding: 0.75rem;
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-md, 0.375rem);
  background: var(--color-card, var(--card));
  min-width: 0;
}

.bookclub-search-agent-result-mini-card a {
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}

.bookclub-search-agent-result-mini-card a:hover {
  text-decoration: underline;
}

.bookclub-ai-search-page {
  min-width: 0;
}

.bookclub-ai-search-header {
  min-width: 0;
}

.bookclub-ai-search-main {
  min-width: 0;
}

.bookclub-ai-search-main .bookclub-search-agent-panel {
  max-width: none;
}

.bookclub-search-agent-split {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
  /* Design Ref: §2.1 — app-style: log on top, results, composer pinned last */
  grid-template-areas:
    "chat"
    "foot"
    "compose"
    "aside";
  min-width: 0;
}

@media (min-width: 900px) {
  .bookclub-search-agent-split {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
    grid-template-areas:
      "chat aside"
      "foot aside"
      "compose aside";
    gap: 1.25rem;
    align-items: start;
  }
}

.bookclub-search-agent-split-compose {
  grid-area: compose;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.bookclub-search-agent-compose-bar {
  padding: 0.875rem 1rem;
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-md, 0.375rem);
  background: color-mix(in oklab, var(--color-muted, var(--muted)) 35%, var(--color-card, var(--card)));
}

/* Design Ref: §2.1 — composer pinned at the bottom of the panel */
@media (min-width: 900px) {
  .bookclub-search-agent-split-compose {
    position: sticky;
    bottom: 0;
    z-index: 1;
    background: var(--color-card, var(--card));
    padding-top: 0.5rem;
  }
}

/* Design Ref: §2.4 — start-prompt chips (SC-5) */
.bookclub-search-agent-starters {
  margin-bottom: 0.75rem;
}

.bookclub-search-agent-starter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bookclub-search-agent-starter-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--color-border, var(--border));
  border-radius: 9999px;
  font-size: 0.8125rem;
  color: var(--color-foreground, var(--foreground));
  background: var(--color-card, var(--card));
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.bookclub-search-agent-starter-chip:hover {
  border-color: var(--color-ring, var(--ring));
  background: var(--color-muted, var(--muted));
}

.bookclub-search-agent-compose-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.bookclub-search-agent-compose-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

@media (min-width: 640px) {
  .bookclub-search-agent-compose-row {
    flex-direction: row;
    align-items: stretch;
  }

  .bookclub-search-agent-compose-input {
    flex: 1 1 auto;
    min-width: 0;
  }

  .bookclub-search-agent-compose-send {
    flex: 0 0 auto;
    align-self: stretch;
    min-width: 5.5rem;
  }
}

.bookclub-search-agent-compose-input {
  min-height: 5.5rem;
  resize: vertical;
}

.bookclub-search-agent-personas-wrap {
  min-width: 0;
}

.bookclub-search-agent-persona-grid {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 480px) {
  .bookclub-search-agent-persona-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.bookclub-search-agent-persona-card {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-md, 0.375rem);
  background: var(--color-card, var(--card));
  color: var(--color-foreground, var(--foreground));
  text-align: left;
  cursor: pointer;
  min-width: 0;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.bookclub-search-agent-persona-card:hover {
  border-color: color-mix(in oklab, var(--color-primary, var(--primary)) 45%, var(--color-border, var(--border)));
  background: color-mix(in oklab, var(--color-primary, var(--primary)) 6%, var(--color-card, var(--card)));
}

.bookclub-search-agent-persona-card.is-selected {
  border-color: var(--color-primary, var(--primary));
  background: color-mix(in oklab, var(--color-primary, var(--primary)) 10%, var(--color-card, var(--card)));
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-primary, var(--primary)) 35%, transparent);
}

.bookclub-search-agent-persona-card:focus-visible {
  outline: 2px solid var(--color-primary, var(--primary));
  outline-offset: 2px;
}

.bookclub-search-agent-persona-card-icon {
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md, 0.375rem);
  background: color-mix(in oklab, var(--color-primary, var(--primary)) 14%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
}

.bookclub-search-agent-persona-card-icon--literature::before {
  content: "📖";
}

.bookclub-search-agent-persona-card-icon--self_help::before {
  content: "✨";
}

.bookclub-search-agent-persona-card-icon--children::before {
  content: "👨‍👩‍👧";
}

.bookclub-search-agent-persona-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.bookclub-search-agent-persona-card-title {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}

.bookclub-search-agent-persona-card-desc {
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--color-muted-foreground, var(--muted-foreground));
}

.bookclub-search-agent-compose-actions {
  min-width: 0;
}

.bookclub-search-agent-conv-field {
  flex: 1 1 12rem;
  min-width: 0;
  margin: 0;
}

.bookclub-search-agent-conv-select {
  width: 100%;
  font-size: 0.8125rem;
}

.bookclub-search-agent-split-chat {
  grid-area: chat;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.bookclub-search-agent-split-foot {
  grid-area: foot;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.bookclub-search-agent-split-aside {
  grid-area: aside;
  min-width: 0;
}

@media (min-width: 900px) {
  .bookclub-search-agent-split-aside {
    position: sticky;
    top: 0.75rem;
    align-self: start;
  }
}

.bookclub-search-agent-progress-panel {
  padding: 0.875rem 1rem;
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-md, 0.375rem);
  background: var(--color-card, var(--card));
  min-width: 0;
}

.bookclub-search-agent-progress-heading {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--color-foreground, var(--foreground));
}

.bookclub-search-agent-progress-idle {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-muted-foreground, var(--muted-foreground));
}

.bookclub-search-agent-status {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-muted-foreground, var(--muted-foreground));
}

.bookclub-search-agent-alert {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md, 0.375rem);
  font-size: 0.875rem;
  line-height: 1.45;
  margin-bottom: 0.75rem;
}

.bookclub-search-agent-alert--info {
  background: color-mix(in oklab, var(--color-primary, var(--primary)) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--color-primary, var(--primary)) 35%, transparent);
  color: var(--color-foreground, var(--foreground));
}

.bookclub-search-agent-alert--action {
  background: color-mix(in oklab, #d97706 14%, transparent);
  border: 1px solid color-mix(in oklab, #d97706 40%, transparent);
  color: var(--color-foreground, var(--foreground));
}

.bookclub-search-agent-alert--error {
  background: color-mix(in oklab, #dc2626 12%, transparent);
  border: 1px solid color-mix(in oklab, #dc2626 35%, transparent);
  color: var(--color-foreground, var(--foreground));
}

.bookclub-search-agent-progress {
  margin-bottom: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.bookclub-search-agent-progress-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.bookclub-search-agent-progress-step {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  padding-left: 1.25rem;
  position: relative;
  color: var(--color-muted-foreground, var(--muted-foreground));
}

.bookclub-search-agent-progress-step::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.45rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--color-border, var(--border));
}

.bookclub-search-agent-progress-step.is-active {
  color: var(--color-foreground, var(--foreground));
  font-weight: 600;
}

.bookclub-search-agent-progress-step.is-active::before {
  background: var(--color-primary, var(--primary));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary, var(--primary)) 25%, transparent);
}

.bookclub-search-agent-progress-step.is-done {
  color: var(--color-foreground, var(--foreground));
}

.bookclub-search-agent-progress-step.is-done::before {
  background: var(--color-primary, var(--primary));
}

.bookclub-search-agent-progress-step-detail {
  font-size: 0.75rem;
  font-weight: 400;
}

/* M12 ai-discovery-modes — hub launcher + vibe deck */

.bookclub-discovery-launcher {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
  .bookclub-discovery-launcher {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.bookclub-discovery-mode-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: var(--bc-space-xl, 2rem);
  border: none;
  border-radius: 1.12rem 1.02rem 1.08rem 1.05rem / 1.04rem 1.1rem 0.98rem 1.06rem;
  background: var(--card);
  color: var(--card-foreground);
  min-height: 4.5rem;
  overflow: visible;
  transition: background-color 150ms ease, transform 150ms ease;
}

.bookclub-discovery-mode-card:hover {
  background: var(--accent);
  transform: translateY(-2px);
}

.bookclub-discovery-mode-icon {
  font-size: 1.75rem;
  line-height: 1;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bc-radius-md);
  background: color-mix(in srgb, var(--bc-primary) 10%, var(--card));
  border: 1px solid color-mix(in srgb, var(--bc-primary) 18%, var(--border));
}

.bookclub-discovery-mode-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.bookclub-discovery-mode-label {
  font-size: 1rem;
  font-weight: 500;
  font-family: var(--bc-font-body);
  color: var(--foreground);
}

.bookclub-discovery-mode-desc {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

.bookclub-deck {
  max-width: 28rem;
  margin: 0 auto;
}

.bookclub-deck-moods {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.bookclub-deck-mood-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.5rem 0.875rem;
  border: none;
  border-radius: 999px 985px 995px 978px / 992px 978px 1002px 988px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted-foreground);
  background: transparent;
  position: relative;
  overflow: visible;
  isolation: isolate;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.bookclub-deck-mood-chip:hover {
  color: var(--foreground);
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
}

.bookclub-deck-mood-chip.is-selected {
  background: color-mix(in srgb, var(--bc-primary) 8%, var(--card));
  color: var(--foreground);
}

.bookclub-editorial .bookclub-deck-mood-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  border: 1.6px solid color-mix(in srgb, var(--bc-sketch-ink) 52%, transparent);
  filter: url(#bookclub-sketch-sm);
}

.bookclub-editorial .bookclub-deck-mood-chip.is-selected::before {
  border-color: color-mix(in srgb, var(--bc-primary-active) 38%, var(--foreground));
}

.bookclub-editorial .bookclub-deck-mood-chip:hover::before {
  border-color: var(--bc-sketch-ink-strong);
}

.bookclub-deck-stack {
  position: relative;
  min-height: 22rem;
}

.bookclub-deck-card {
  display: block;
  transition: transform 180ms ease, opacity 180ms ease;
  touch-action: pan-y;
}

.bookclub-deck-card.is-liked {
  transform: translateX(120%) rotate(12deg);
  opacity: 0;
}

.bookclub-deck-card.is-passed {
  transform: translateX(-120%) rotate(-12deg);
  opacity: 0;
}

.bookclub-deck-card .bookclub-books-result-card {
  cursor: grab;
}

.bookclub-deck-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 1.25rem;
  max-width: 22rem;
  margin-left: auto;
  margin-right: auto;
}

.bookclub-deck-btn {
  flex: 1 1 0;
  max-width: 11rem;
  min-height: 2.75rem;
  padding: 0.625rem 1rem;
  border: none;
  border-radius: 0.65rem 0.55rem 0.6rem 0.58rem / 0.56rem 0.62rem 0.54rem 0.64rem;
  background: var(--card);
  color: var(--foreground);
  font-family: var(--bc-font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  position: relative;
  overflow: visible;
  isolation: isolate;
  transition: color 150ms ease, background-color 150ms ease;
}

.bookclub-deck-btn[disabled] {
  opacity: 0.5;
  cursor: default;
}

.bookclub-deck-btn--pass {
  color: var(--foreground);
  background: var(--card);
}

.bookclub-deck-btn--pass:hover:not([disabled]) {
  background: var(--muted);
}

.bookclub-deck-btn--like {
  color: var(--bc-primary);
  background: color-mix(in srgb, var(--bc-primary) 6%, var(--card));
}

.bookclub-deck-btn--like:hover:not([disabled]) {
  background: color-mix(in srgb, var(--bc-primary) 12%, var(--card));
}

.bookclub-editorial .bookclub-deck-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  border: 1.6px solid var(--bc-sketch-ink);
  filter: url(#bookclub-sketch-sm);
}

.bookclub-editorial .bookclub-deck-btn--pass::before {
  border-color: var(--bc-sketch-ink);
}

.bookclub-editorial .bookclub-deck-btn--pass:hover:not([disabled])::before {
  border-color: var(--bc-sketch-ink-strong);
}

.bookclub-editorial .bookclub-deck-btn--like::before {
  border-color: color-mix(in srgb, var(--bc-primary-active) 38%, var(--foreground));
}

.bookclub-editorial .bookclub-deck-btn--like:hover:not([disabled])::before {
  border-color: color-mix(in srgb, var(--bc-primary-active) 55%, var(--foreground));
}

@media (max-width: 640px) {
  .bookclub-deck-actions {
    max-width: none;
    gap: 10px;
    padding: 0 0.25rem;
  }

  .bookclub-deck-btn {
    max-width: none;
  }
}

.bookclub-deck-empty {
  padding: 1rem 0;
}

/* M12.2 — book Rx (prescription) mode */
.bookclub-rx {
  max-width: 28rem;
  margin: 0 auto;
}

.bookclub-rx-slot {
  min-height: 14rem;
}

.bookclub-rx-card {
  border: none;
  border-radius: 1.12rem 1.02rem 1.08rem 1.05rem / 1.04rem 1.1rem 0.98rem 1.06rem;
  background: var(--card);
  padding: var(--bc-space-lg, 1.5rem);
  color: var(--card-foreground);
  overflow: visible;
}

.bookclub-rx-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.625rem;
  margin-bottom: 0.875rem;
  border-bottom: none;
  background-image: var(--bc-sketch-line, none);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 5px;
}

.bookclub-rx-label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.bookclub-rx-sigil {
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--primary);
}

.bookclub-rx-title {
  font-family: var(--bc-font-display);
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--foreground);
}

.bookclub-rx-author {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin: 0.25rem 0 1rem;
}

.bookclub-rx-dose {
  font-size: 0.8125rem;
  color: var(--foreground);
  background: color-mix(in srgb, var(--bc-primary) 6%, var(--muted));
  border-radius: 0.85rem 0.75rem 0.8rem 0.78rem / 0.76rem 0.82rem 0.74rem 0.84rem;
  padding: 0.625rem 0.75rem;
  margin: 0 0 1rem;
}

.bookclub-rx-dose-label {
  font-weight: 500;
}

.bookclub-rx-detail {
  font-size: 0.8125rem;
  color: var(--bc-primary, var(--primary));
}

.bookclub-rx-empty {
  padding: 1rem 0;
}

/* M12.3 — mood map mode */
.bookclub-map {
  max-width: 32rem;
  margin: 0 auto;
}

.bookclub-mood-map {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: none;
  border-radius: 1.35rem 1.22rem 1.28rem 1.25rem / 1.24rem 1.32rem 1.18rem 1.3rem;
  background-color: var(--card);
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--foreground) 8%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--foreground) 8%, transparent) 1px, transparent 1px);
  background-size: 50% 50%;
  background-position: center;
  margin-bottom: 1rem;
  overflow: visible;
}

.bookclub-mood-axis {
  position: absolute;
  z-index: 5;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--foreground);
  white-space: nowrap;
  pointer-events: none;
  padding: 0.3rem 0.55rem;
  border-radius: 999px 985px 995px 978px / 992px 978px 1002px 988px;
  background: color-mix(in srgb, var(--card) 88%, var(--background));
  box-shadow: 0 1px 2px rgb(20 20 19 / 0.06);
}

.bookclub-mood-axis--y-top { top: 0.35rem; left: 50%; transform: translateX(-50%); }
.bookclub-mood-axis--y-bottom { bottom: 0.35rem; left: 50%; transform: translateX(-50%); }
.bookclub-mood-axis--x-left { left: 0.35rem; top: 50%; transform: translateY(-50%); }
.bookclub-mood-axis--x-right { right: 0.35rem; top: 50%; transform: translateY(-50%); }

.bookclub-mood-dot {
  position: absolute;
  z-index: 2;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  border: 1px solid var(--color-card, var(--card));
  background: var(--color-primary, var(--primary));
  cursor: pointer;
  padding: 0;
  transition: transform 120ms ease;
}

.bookclub-mood-dot:hover,
.bookclub-mood-dot:focus-visible {
  transform: scale(1.5);
  outline: none;
}

.bookclub-mood-dot.is-active {
  transform: scale(1.7);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary, var(--primary)) 35%, transparent);
}

.bookclub-map-selected {
  min-height: 6rem;
}

/* M12.4 — this-or-that tournament mode */
.bookclub-vs {
  max-width: 30rem;
  margin: 0 auto;
}

.bookclub-vs-arena {
  display: flex;
  align-items: stretch;
  gap: 10px;
  min-height: 18rem;
}

.bookclub-vs-side {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 10px;
  border: none;
  border-radius: 1.08rem 0.98rem 1.05rem 1.02rem / 1rem 1.06rem 0.96rem 1.04rem;
  background: var(--card);
  color: var(--card-foreground);
  cursor: pointer;
  text-align: center;
  overflow: visible;
  transition: transform 120ms ease;
}

.bookclub-vs-side:hover,
.bookclub-vs-side:focus-visible {
  transform: translateY(-2px);
  outline: none;
}

.bookclub-editorial .bookclub-vs-side:hover::before,
.bookclub-editorial .bookclub-vs-side:focus-visible::before {
  border-color: var(--bc-sketch-ink-strong);
}

.bookclub-vs-side .bookclub-book-cover-frame {
  border-radius: var(--radius-md, 0.375rem);
}

.bookclub-vs-title {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
}

.bookclub-vs-author {
  font-size: 0.75rem;
  color: var(--color-muted-foreground, var(--muted-foreground));
}

.bookclub-vs-mid {
  display: flex;
  align-items: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-muted-foreground, var(--muted-foreground));
}

.bookclub-vs-final {
  flex: 1 1 auto;
  align-self: center;
  text-align: center;
}

/* M12.5 — blind date mode */
.bookclub-blind {
  max-width: 26rem;
  margin: 0 auto;
}

.bookclub-blind-slot {
  min-height: 16rem;
}

.bookclub-blind-card {
  border: none;
  border-radius: 1.12rem 1.02rem 1.08rem 1.05rem / 1.04rem 1.1rem 0.98rem 1.06rem;
  background: var(--card);
  color: var(--card-foreground);
  padding: 1.5rem 1.4rem;
  text-align: center;
  overflow: visible;
}

.bookclub-blind-cover {
  width: 4rem;
  height: 5.5rem;
  margin: 0 auto 1rem;
  border-radius: 0.85rem 0.75rem 0.8rem 0.78rem / 0.76rem 0.82rem 0.74rem 0.84rem;
  background: color-mix(in srgb, var(--bc-primary) 8%, var(--muted));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  color: var(--muted-foreground);
}

.bookclub-blind-tags {
  display: flex;
  justify-content: center;
  gap: 0.375rem;
  margin-bottom: 0.75rem;
}

.bookclub-blind-teaser {
  font-size: 0.9375rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--muted-foreground);
  margin: 0;
}

.bookclub-blind-empty {
  padding: 1rem 0;
}

/* M13 — public activity, user-centric */

.bookclub-activity-members {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.bookclub-activity-member {
  flex: 0 0 auto;
  width: 7.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0.875rem 0.5rem;
  border: none;
  border-radius: 1.08rem 0.98rem 1.05rem 1.02rem / 1rem 1.06rem 0.96rem 1.04rem;
  background: var(--card);
  color: var(--card-foreground);
  text-align: center;
  overflow: visible;
  transition: background-color 150ms ease;
}

.bookclub-activity-member:hover {
  background: var(--muted);
}

.bookclub-editorial .bookclub-activity-member > * {
  position: relative;
  z-index: 1;
}

.bookclub-avatar {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-primary-foreground, var(--primary-foreground));
  background: var(--color-primary, var(--primary));
  flex: 0 0 auto;
}

.bookclub-activity-member-name {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--foreground);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bookclub-activity-member-meta {
  font-size: 0.6875rem;
  color: var(--muted-foreground);
}

.bookclub-actor-groups {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 720px) {
  .bookclub-actor-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.bookclub-actor-group {
  border: none;
  border-radius: 1.1rem 1rem 1.06rem 1.04rem / 1.02rem 1.08rem 0.98rem 1.05rem;
  background: var(--card);
  color: var(--card-foreground);
  padding: var(--bc-space-lg, 1.5rem);
  overflow: visible;
}

.bookclub-actor-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 0.75rem;
}

.bookclub-actor-id {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--foreground);
  text-decoration: none;
}

.bookclub-actor-id:hover {
  color: var(--primary);
}

.bookclub-actor-id .bookclub-avatar {
  width: 2rem;
  height: 2rem;
  font-size: 0.8125rem;
}

.bookclub-actor-name {
  font-weight: 500;
  font-size: 0.9375rem;
  color: inherit;
}

.bookclub-actor-activities {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.bookclub-actor-activity {
  padding: 0.625rem 0;
}

.bookclub-actor-activities > .bookclub-actor-activity:not(:last-child) {
  border-bottom: none;
  background-image: var(--bc-sketch-line);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 5px;
}

.bookclub-actor-activity:first-child {
  padding-top: 0;
}

.bookclub-activity-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 0.125rem 0.5rem;
  border-radius: var(--bc-radius-pill, 9999px);
  background: var(--muted);
  color: var(--muted-foreground);
  margin-right: 4px;
}

.bookclub-actor-activity-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
}

.bookclub-actor-activity-title:hover {
  color: var(--primary);
}

.bookclub-actor-activity-time {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.bookclub-actor-activity-snippet {
  margin-top: 2px;
  color: var(--muted-foreground);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* M14 — my page tabbed dashboard */
.bookclub-mypage-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  padding: var(--bc-space-lg);
  background: var(--card);
  border-radius: 1.35rem 1.22rem 1.28rem 1.25rem / 1.24rem 1.32rem 1.18rem 1.3rem;
  overflow: visible;
}

.bookclub-avatar--lg {
  width: 4rem;
  height: 4rem;
  font-size: 1.5rem;
  overflow: hidden;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bc-primary) 18%, var(--card));
}

.bookclub-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.bookclub-mypage-hero-body {
  flex: 1 1 12rem;
  min-width: 0;
}

.bookclub-mypage-hero-meta {
  font-size: 0.8125rem;
  color: var(--color-muted-foreground, var(--muted-foreground));
  margin: 0.25rem 0 0;
}

.bookclub-mypage-hero-actions {
  flex: 0 0 auto;
}

.bookclub-tabs {
  display: flex;
  gap: 4px;
  border-bottom: none;
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  overflow-x: auto;
  background-image: var(--bc-sketch-line);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 5px;
}

.bookclub-tab {
  flex: 0 0 auto;
  padding: 0.625rem 1rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0.65rem 0.55rem 0.6rem 0.58rem / 0.56rem 0.62rem 0.54rem 0.64rem;
  background: transparent;
  color: var(--muted-foreground);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  min-height: 2.75rem;
  transition: color 150ms ease, background-color 150ms ease;
  position: relative;
  overflow: visible;
  isolation: isolate;
}

.bookclub-tab:hover {
  color: var(--foreground);
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
}

.bookclub-tab.is-active {
  color: var(--primary);
  background: color-mix(in srgb, var(--bc-primary) 8%, var(--card));
  border-bottom-color: transparent;
}

.bookclub-editorial .bookclub-tab.is-active::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  border: 1.6px solid color-mix(in srgb, var(--bc-primary-active) 38%, var(--foreground));
  filter: url(#bookclub-sketch-sm);
}

.bookclub-tab:focus-visible {
  outline: 2px solid var(--color-primary, var(--primary));
  outline-offset: -2px;
}

a.bookclub-tab,
button.bookclub-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.bookclub-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--primary) 12%, var(--card));
  color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
}

.bookclub-tab.is-active .bookclub-tab-badge {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: color-mix(in srgb, var(--primary) 80%, var(--foreground));
}

.bookclub-tabpanel {
  margin-bottom: 1.5rem;
}

.bookclub-tabpanel[hidden] {
  display: none;
}

.bookclub-mypage-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 1.5rem;
}

.bookclub-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 1rem 0.5rem;
  border: none;
  border-radius: 1.08rem 0.98rem 1.05rem 1.02rem / 1rem 1.06rem 0.96rem 1.04rem;
  background: var(--card);
  overflow: visible;
}

.bookclub-stat-num {
  font-family: var(--bc-font-display);
  font-size: 1.625rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--foreground);
}

.bookclub-stat-label {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.bookclub-mypage-section-title {
  font-family: var(--bc-font-display);
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: none;
  background-image: var(--bc-sketch-line);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 5px;
}

.bookclub-mypage-lib-status {
  font-size: 0.9375rem;
  font-weight: 500;
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  color: var(--foreground);
  border-bottom: none;
  background-image: var(--bc-sketch-line);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 5px;
}

.bookclub-mypage-library-section {
  padding: var(--bc-space-lg);
  margin-bottom: var(--bc-space-lg);
  overflow: visible;
}

.bookclub-mypage-library-section:last-child {
  margin-bottom: 0;
}

.bookclub-mypage-library .bookclub-books-result-grid {
  gap: 0.875rem;
}

.bookclub-mypage .bookclub-books-result-card .bookclub-books-result-link,
.bookclub-mypage .bookclub-books-result-row .bookclub-books-result-row-link {
  position: relative;
  z-index: 1;
}

.bookclub-mypage .bookclub-books-result-cover--empty,
.bookclub-mypage .bookclub-books-result-row-cover--empty {
  background: color-mix(in srgb, var(--bc-primary) 6%, var(--muted));
  color: var(--muted-foreground);
}

.bookclub-mypage-learning-list {
  display: grid;
  gap: 0.75rem;
}

.bookclub-mypage-learning-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
}

.bookclub-mypage .card.bookclub-content-card {
  padding: 0;
  overflow: visible;
}

.bookclub-mypage .card.bookclub-content-card > header {
  padding: var(--bc-space-lg) var(--bc-space-lg) 0.75rem;
  margin-bottom: 0.25rem;
  border-bottom: none;
  background-image: var(--bc-sketch-line);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 5px;
}

.bookclub-mypage .card.bookclub-content-card > :not(header) {
  padding: 0 var(--bc-space-lg) var(--bc-space-lg);
}

.bookclub-mypage .bookclub-mypage-learning-card.bookclub-content-card {
  padding: var(--bc-space-md) var(--bc-space-lg);
}

/* Reading activity graph (mypage) */
.reading-activity-graph-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

.reading-activity-graph-block .reading-activity-legend {
  margin-bottom: 0.5rem;
}

.reading-activity-graph {
  display: flex;
  gap: 3px;
  overflow-x: auto;
  padding-bottom: 4px;
  width: fit-content;
  max-width: 100%;
}

.reading-activity-graph-block .reading-activity-range-nav {
  width: 100%;
  margin-top: 0.5rem;
}

.reading-activity-week {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.reading-activity-cell {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--foreground) 8%, var(--muted));
}

.reading-activity-cell.level-1 {
  background: color-mix(in srgb, #9be9a8 55%, var(--muted));
}

.reading-activity-cell.level-2 {
  background: color-mix(in srgb, #40c463 65%, var(--muted));
}

.reading-activity-cell.level-3 {
  background: color-mix(in srgb, #30a14e 75%, var(--muted));
}

.reading-activity-cell.level-4 {
  background: color-mix(in srgb, #216e39 85%, var(--muted));
}

.reading-activity-legend .reading-activity-cell {
  display: inline-block;
  vertical-align: middle;
}

.reading-activity-range-nav {
  display: flex;
  justify-content: center;
}

.reading-activity-range-nav-inner {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.625rem;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
}

.reading-activity-range-label {
  white-space: nowrap;
  text-align: center;
  line-height: 1.4;
}

.reading-activity-range-prev,
.reading-activity-range-next {
  flex-shrink: 0;
}

.reading-activity-range-nav-inner .btn-sm-outline {
  padding: 0.25rem 0.625rem;
  min-height: 2rem;
  font-size: 0.75rem;
}

.reading-activity-graph-panel.is-loading {
  opacity: 0.65;
  pointer-events: none;
}

.reading-activity-graph-panel[aria-busy="true"] .reading-activity-graph {
  filter: saturate(0.85);
}

@media (max-width: 640px) {
  .reading-activity-graph-block {
    width: 100%;
    max-width: 100%;
  }

  .reading-activity-graph-block .reading-activity-legend {
    justify-content: center;
    width: 100%;
  }

  .reading-activity-graph {
    width: 100%;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  .reading-activity-range-nav {
    width: 100%;
  }

  .reading-activity-range-nav-inner {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "range range"
      "prev next";
    width: 100%;
    max-width: 17.5rem;
    gap: 0.375rem 0.5rem;
  }

  .reading-activity-range-label {
    grid-area: range;
    justify-self: center;
    font-size: 0.6875rem;
    white-space: nowrap;
  }

  .reading-activity-range-prev {
    grid-area: prev;
    justify-self: start;
  }

  .reading-activity-range-next {
    grid-area: next;
    justify-self: end;
  }

  .reading-activity-range-nav-inner .btn-sm-outline {
    min-height: 2rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
  }
}

html.dark .reading-activity-cell {
  background: color-mix(in srgb, var(--foreground) 12%, var(--muted));
}

html.dark .reading-activity-cell.level-4 {
  background: color-mix(in srgb, #40c463 72%, var(--muted));
}

/* Booknote — page-shell keeps site-wide outer sketch; only inner form-shell is suppressed */
.bookclub-editorial .bookclub-booknote-page.bookclub-form-shell::before {
  content: none !important;
  display: none !important;
}

.bookclub-page-shell:has(.bookclub-booknote-page) .bookclub-page-header {
  background-image: none;
  padding-bottom: 0;
}

.bookclub-booknote-card > .bookclub-tabs {
  margin-top: 0.25rem;
  margin-bottom: 1.25rem;
  padding: 0.35rem 0.45rem 0.45rem;
  gap: 6px;
  border-radius: 1.05rem 0.95rem 1.02rem 1rem / 0.98rem 1.04rem 0.94rem 1.02rem;
  background: color-mix(in srgb, var(--foreground) 4%, var(--card));
  background-image: none;
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  flex-wrap: nowrap;
  isolation: isolate;
}

@media (max-width: 640px) {
  .bookclub-page-shell:has(.bookclub-booknote-page) {
    padding: var(--bc-space-md);
  }

  .bookclub-booknote-card > .bookclub-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
    overflow-y: visible;
    padding: 0.45rem;
    gap: 6px;
  }

  .bookclub-booknote-card > .bookclub-tabs .bookclub-tab {
    flex: 1 1 calc(50% - 3px);
    min-width: calc(50% - 3px);
    max-width: calc(50% - 3px);
    padding: 0.5rem 0.375rem;
    font-size: 0.8125rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
  }
}

.bookclub-editorial .bookclub-booknote-card > .bookclub-tabs::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  border: 1.75px solid var(--bc-sketch-ink);
  filter: url(#bookclub-sketch-md);
}

.bookclub-booknote-card > .bookclub-tabs .bookclub-tab {
  z-index: 1;
}

.bookclub-booknote-page .bookclub-step-nav {
  background-image: none;
  padding-top: 0.75rem;
  margin-top: 1rem;
}

/* M18 — BookNote (Feynman learning card) */
.bookclub-booknote-page .bookclub-page-header {
  margin-bottom: var(--bc-space-lg);
}

.bookclub-booknote-card {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.bookclub-step-nav {
  display: flex;
  gap: 8px;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: none;
  background-image: var(--bc-sketch-line);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% 5px;
}

.bookclub-habit-card {
  scroll-margin-top: 1rem;
}

.bookclub-editorial .bookclub-content-card.bookclub-habit-card--filled::before {
  border-color: color-mix(in srgb, var(--bc-primary-active) 38%, var(--foreground));
}

.bookclub-booknote-progress.bookclub-content-card {
  margin-bottom: 1.25rem;
  overflow: visible;
}

.bookclub-booknote-ai-callout.bookclub-content-card {
  padding: var(--bc-space-md) var(--bc-space-lg);
  margin-top: 0.75rem;
  overflow: visible;
  background: color-mix(in srgb, var(--bc-primary) 4%, var(--card));
}

.bookclub-booknote-page .card.bookclub-content-card {
  padding: 0;
  overflow: visible;
  margin-bottom: 0;
}

.bookclub-booknote-page .bookclub-habit-card .card.bookclub-content-card,
.bookclub-booknote-page .bookclub-booknote-progress.bookclub-content-card,
.bookclub-booknote-page #panel-5 > .card.bookclub-content-card {
  padding: var(--bc-space-lg);
}

.bookclub-booknote-page .card.bookclub-content-card > header {
  padding: var(--bc-space-lg) var(--bc-space-lg) 0.75rem;
  margin-bottom: 0.25rem;
  border-bottom: none;
  background-image: var(--bc-sketch-line);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 5px;
}

.bookclub-booknote-page .card.bookclub-content-card:has(> header) > :not(header) {
  padding: 0 var(--bc-space-lg) var(--bc-space-lg);
}

.bookclub-booknote-page .card.bookclub-content-card > * {
  position: relative;
  z-index: 1;
}

.bookclub-booknote-card .bookclub-tabpanel {
  padding-top: 0.25rem;
}

.bookclub-steps {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.bookclub-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
}

.bookclub-step::before {
  content: "";
  position: absolute;
  top: 15px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: color-mix(in srgb, var(--foreground) 10%, var(--border));
  z-index: 0;
}

.bookclub-step:first-child::before {
  display: none;
}

.bookclub-step.is-done::before {
  background: color-mix(in srgb, var(--primary) 55%, var(--border));
}

.bookclub-step-dot {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  border-radius: 999px 985px 995px 978px / 992px 978px 1002px 988px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 700;
  background: var(--background);
  color: var(--muted-foreground);
  border: none;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--foreground) 14%, transparent);
}

.bookclub-step.is-done .bookclub-step-dot {
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: none;
}

.bookclub-step-label {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.bookclub-step.is-done .bookclub-step-label {
  color: var(--foreground);
  font-weight: 600;
}

html.dark .bookclub-booknote-ai-callout.bookclub-content-card {
  background: color-mix(in srgb, var(--bc-primary) 8%, var(--card));
}

/* Books — card/list view toggle + list rows */
.bookclub-view-toggle {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border: none;
  border-radius: 999px 985px 995px 978px / 992px 978px 1002px 988px;
  background: color-mix(in srgb, var(--foreground) 5%, var(--background));
  overflow: visible;
}

.bookclub-view-toggle-btn {
  padding: 0.4rem 0.85rem;
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--muted-foreground);
  background: transparent;
  border: none;
  border-radius: 999px 985px 995px 978px / 992px 978px 1002px 988px;
  white-space: nowrap;
  transition: color 150ms ease, background-color 150ms ease;
}

.bookclub-view-toggle-btn + .bookclub-view-toggle-btn {
  border-left: none;
}

.bookclub-view-toggle-btn:hover {
  color: var(--foreground);
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
}

.bookclub-view-toggle-btn.is-active {
  background: var(--primary);
  color: var(--primary-foreground);
}

.bookclub-editorial .bookclub-view-toggle .bookclub-view-toggle-btn::before {
  content: none !important;
  display: none !important;
}

/* Club meetings — month calendar */
.bookclub-meeting-calendar {
  padding: 1.25rem;
  overflow: hidden;
}

.bookclub-meeting-calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex: 1 1 auto;
  min-width: 0;
}

.bookclub-meeting-calendar-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.bookclub-meeting-calendar-range-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--foreground) 5%, var(--card));
}

.bookclub-meeting-calendar-range-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: 2rem;
  padding: 0.25rem 0.625rem;
  border-radius: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--muted-foreground);
  transition: background-color 150ms ease, color 150ms ease;
}

.bookclub-meeting-calendar-range-btn:hover {
  color: var(--foreground);
  text-decoration: none;
}

.bookclub-meeting-calendar-range-btn.is-active {
  background: var(--card);
  color: var(--foreground);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--foreground) 8%, transparent);
}

.bookclub-meeting-calendar--week .bookclub-meeting-calendar-day {
  min-height: 7.5rem;
}

.bookclub-meeting-calendar--week .bookclub-meeting-calendar-event-hit {
  font-size: 0.75rem;
}

.bookclub-meeting-calendar-day-agenda {
  padding: 0.25rem 0;
}

.bookclub-meeting-calendar-day-agenda-empty {
  padding: 1.25rem 1rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  border-radius: 0.65rem;
  background: color-mix(in srgb, var(--foreground) 4%, var(--card));
}

.bookclub-meeting-calendar-events--agenda {
  gap: 0.625rem;
}

.bookclub-meeting-calendar-events--agenda .bookclub-meeting-calendar-event-hit {
  min-height: 3rem;
  padding: 0.75rem 0.875rem;
  font-size: 0.9375rem;
}

.bookclub-meeting-calendar-events--agenda .bookclub-meeting-calendar-event-title {
  font-size: 0.9375rem;
  font-weight: 600;
}

.bookclub-meeting-calendar-events--agenda .bookclub-meeting-calendar-event-time {
  font-size: 0.875rem;
}

.bookclub-meeting-calendar-title {
  font-size: 1.125rem;
  font-weight: 600;
  text-align: center;
}

.bookclub-meeting-calendar-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.65rem;
  text-decoration: none;
  color: var(--foreground);
  background: color-mix(in srgb, var(--foreground) 5%, var(--card));
  font-weight: 600;
  transition: background-color 150ms ease;
}

.bookclub-meeting-calendar-nav-btn:hover {
  background: color-mix(in srgb, var(--foreground) 9%, var(--card));
  text-decoration: none;
}

.bookclub-meeting-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: color-mix(in srgb, var(--foreground) 10%, transparent);
  border-radius: 0.75rem;
  overflow: hidden;
}

.bookclub-meeting-calendar-weekday {
  padding: 0.5rem 0.25rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted-foreground);
  background: color-mix(in srgb, var(--foreground) 4%, var(--card));
}

.bookclub-meeting-calendar-day {
  min-height: 5.5rem;
  padding: 0.375rem;
  background: var(--card);
  vertical-align: top;
}

.bookclub-meeting-calendar-day.is-outside {
  background: color-mix(in srgb, var(--foreground) 3%, var(--card));
}

.bookclub-meeting-calendar-day.is-today .bookclub-meeting-calendar-day-num {
  color: var(--bc-primary);
  font-weight: 700;
}

.bookclub-meeting-calendar-day.has-events {
  background: color-mix(in srgb, var(--bc-primary) 4%, var(--card));
}

.bookclub-meeting-calendar-day-num {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

.bookclub-meeting-calendar-events {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.bookclub-meeting-calendar-event {
  display: block;
}

.bookclub-meeting-calendar-event-hit {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.35rem;
  width: 100%;
  padding: 0.3rem 0.35rem;
  border-radius: 0.45rem;
  text-decoration: none;
  color: inherit;
  font-size: 0.6875rem;
  line-height: 1.3;
  transition: background-color 150ms ease, color 150ms ease;
}

.bookclub-meeting-calendar-event-hit:hover {
  background: color-mix(in srgb, var(--bc-primary) 10%, var(--card));
  text-decoration: none;
}

.bookclub-meeting-calendar-event-hit:focus-visible {
  outline: 2px solid var(--bc-primary);
  outline-offset: 1px;
}

.bookclub-meeting-calendar-event-hit--static {
  cursor: default;
}

.bookclub-meeting-calendar-event-action {
  font-weight: 600;
  color: var(--bc-primary);
  flex: 0 0 auto;
}

.bookclub-meeting-list-item {
  scroll-margin-top: 5.5rem;
}

.bookclub-meeting-list-item:target .bookclub-content-card {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bc-primary) 35%, transparent);
}

.bookclub-meeting-calendar-event-time {
  font-weight: 600;
  color: var(--muted-foreground);
  flex: 0 0 auto;
}

.bookclub-meeting-calendar-event-title {
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 3rem;
}

.bookclub-meeting-calendar-event-club {
  font-weight: 600;
  color: var(--bc-primary);
  flex: 0 0 auto;
  max-width: 5.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bookclub-meeting-calendar-event-meta {
  color: var(--muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.bookclub-meeting-calendar-day-trigger {
  display: none;
}

.bookclub-meeting-calendar-detail-wrap {
  display: none;
}

.bookclub-meeting-calendar-day-icon {
  display: none;
}

.bookclub-meeting-calendar-day-num--plain {
  display: inline-block;
}

@media (max-width: 640px) {
  .bookclub-meeting-calendar {
    padding: 0.875rem;
  }

  .bookclub-meeting-calendar-day {
    min-height: 2.85rem;
    padding: 0.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.1rem;
  }

  .bookclub-meeting-calendar-day-num {
    margin-bottom: 0;
    text-align: center;
  }

  .bookclub-meeting-calendar-day-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    min-height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bc-primary) 10%, var(--card));
    color: inherit;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .bookclub-meeting-calendar-day-trigger:focus-visible {
    outline: 2px solid var(--bc-primary);
    outline-offset: 1px;
  }

  .bookclub-meeting-calendar-day.is-selected .bookclub-meeting-calendar-day-trigger {
    background: color-mix(in srgb, var(--bc-primary) 22%, var(--card));
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bc-primary) 45%, transparent);
  }

  .bookclub-meeting-calendar-day.is-selected .bookclub-meeting-calendar-day-num {
    color: var(--bc-primary);
    font-weight: 700;
  }

  .bookclub-meeting-calendar-day-icon {
    display: block;
    font-size: 0.75rem;
    line-height: 1;
  }

  .bookclub-meeting-calendar-events-in-cell {
    display: none !important;
  }

  .bookclub-meeting-calendar-detail-wrap {
    display: block;
    margin-top: 1rem;
  }

  .bookclub-meeting-calendar-detail-placeholder {
    padding: 0.875rem 1rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--muted-foreground);
    border-radius: 0.65rem;
    background: color-mix(in srgb, var(--foreground) 4%, var(--card));
  }

  .bookclub-meeting-calendar-day-panel {
    margin-top: 0.75rem;
    padding: 1rem;
  }

  .bookclub-meeting-calendar-day-panel-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
  }

  .bookclub-meeting-calendar-day-panel .bookclub-meeting-calendar-events {
    gap: 0.5rem;
  }

  .bookclub-meeting-calendar-day-panel .bookclub-meeting-calendar-event-hit {
    min-height: 2.75rem;
    padding: 0.5rem 0.625rem;
    font-size: 0.8125rem;
  }

  .bookclub-meeting-calendar-day-panel .bookclub-meeting-calendar-event-title,
  .bookclub-meeting-calendar-day-panel .bookclub-meeting-calendar-event-meta,
  .bookclub-meeting-calendar-day-panel .bookclub-meeting-calendar-event-club {
    display: inline;
  }

  .bookclub-meeting-calendar--week .bookclub-meeting-calendar-day {
    min-height: 3.25rem;
  }

  .bookclub-meeting-calendar-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .bookclub-meeting-calendar-range-toggle {
    justify-content: center;
  }

  .bookclub-meeting-calendar-title {
    font-size: 1rem;
    text-align: center;
  }

  .bookclub-meeting-calendar-day.has-events .bookclub-meeting-calendar-day-num::after {
    content: none;
  }
}

/* Books search — card view dark mode */
html.dark .bookclub-books-search-page .bookclub-books-result-card:hover,
html.dark .bookclub-mypage .bookclub-books-result-card:hover {
  box-shadow: none;
}

html.dark .bookclub-books-search-page .bookclub-books-result-card .badge-secondary,
html.dark .bookclub-mypage .bookclub-books-result-card .badge-secondary,
html.dark .bookclub-mypage .bookclub-books-result-row .badge-secondary {
  background: var(--muted);
  color: var(--muted-foreground);
  border: 1px solid var(--border);
}

html.dark .bookclub-books-search-page .bookclub-books-result-card :is(.badge-outline, [class*="badge-outline"]),
html.dark .bookclub-mypage .bookclub-books-result-card :is(.badge-outline, [class*="badge-outline"]),
html.dark .bookclub-mypage .bookclub-books-result-row :is(.badge-outline, [class*="badge-outline"]) {
  color: var(--foreground);
  border-color: color-mix(in srgb, var(--foreground) 22%, transparent);
  background: transparent;
}

.bookclub-books-result-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.bookclub-books-result-row {
  border: none;
  border-radius: 1.05rem 0.95rem 1.02rem 1rem / 0.98rem 1.04rem 0.94rem 1.02rem;
  background: var(--card);
  overflow: visible;
  transition: transform 150ms ease;
}

.bookclub-books-result-row:hover {
  transform: translateY(-1px);
}

.bookclub-editorial .bookclub-mypage-library-section .bookclub-books-result-row::before {
  border-color: color-mix(in srgb, var(--bc-sketch-ink) 68%, transparent);
  border-width: 1.45px;
}

.bookclub-books-result-row-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  color: inherit;
}
.bookclub-books-result-row-cover {
  width: 44px;
  height: 62px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  background: var(--color-muted, var(--muted));
}
.bookclub-books-result-row-cover--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  color: var(--color-muted-foreground, var(--muted-foreground));
}
.bookclub-books-result-row-body { flex: 1 1 auto; min-width: 0; }
.bookclub-books-result-row-title {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bookclub-books-result-row-author {
  font-size: 0.8125rem;
  color: var(--color-muted-foreground, var(--muted-foreground));
  margin: 2px 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bookclub-books-result-row-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.bookclub-books-result-row-rating {
  flex-shrink: 0;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

/* --- Clubs list view rows (parity with books list view) --- */
.bookclub-clubs-result-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.bookclub-clubs-result-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  padding: 0.875rem 1.125rem;
  transition: transform 150ms ease, border-color 150ms ease;
}
.bookclub-clubs-result-row:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
}
/* Editorial theme: replace the plain border with the hand-drawn sketch outline
   used by the card view (.bookclub-content-card) and other editorial surfaces. */
.bookclub-editorial .bookclub-clubs-result-row {
  border-color: transparent;
}
.bookclub-editorial .bookclub-clubs-result-row::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  border: 1.45px solid color-mix(in srgb, var(--bc-sketch-ink) 72%, transparent);
  filter: url(#bookclub-sketch-sm);
}
.bookclub-editorial .bookclub-clubs-result-row:hover::before {
  border-color: var(--bc-sketch-ink-strong);
}
.bookclub-clubs-result-row-body {
  flex: 1 1 18rem;
  min-width: 0;
}
.bookclub-clubs-result-row-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
}
.bookclub-clubs-result-row-title a {
  color: var(--foreground);
  text-decoration: none;
}
.bookclub-clubs-result-row-title a:hover {
  text-decoration: underline;
}
.bookclub-clubs-result-row-desc {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  margin: 0 0 0.5rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.bookclub-clubs-result-row-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}
.bookclub-clubs-result-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* --- Editorial design system (design/ui-refresh D1) --- */

body.bookclub-editorial {
  font-family: var(--bc-font-body);
  color: var(--bc-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.bookclub-editorial h1,
.bookclub-editorial h2,
.bookclub-editorial h3,
.bookclub-editorial .bookclub-display-xl,
.bookclub-editorial .bookclub-display-lg,
.bookclub-editorial .bookclub-display-md,
.bookclub-editorial .bookclub-display-sm {
  font-family: var(--bc-font-display);
  font-weight: 400;
  color: var(--bc-ink);
  letter-spacing: -0.02em;
}

.dark.bookclub-editorial h1,
.dark.bookclub-editorial h2,
.dark.bookclub-editorial h3,
.dark.bookclub-editorial .bookclub-display-xl,
.dark.bookclub-editorial .bookclub-display-lg,
.dark.bookclub-editorial .bookclub-display-md,
.dark.bookclub-editorial .bookclub-display-sm,
html.dark .bookclub-editorial h1,
html.dark .bookclub-editorial h2,
html.dark .bookclub-editorial h3 {
  color: var(--bc-on-dark);
}

.bookclub-display-xl {
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.bookclub-display-lg {
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.bookclub-display-md {
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.bookclub-display-sm {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.bookclub-title-md {
  font-family: var(--bc-font-body);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--foreground);
}

.bookclub-lead {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--muted-foreground);
  max-width: 42rem;
}

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

.bookclub-text-link {
  color: var(--bc-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bookclub-code,
.bookclub-code pre,
.bookclub-code code {
  font-family: var(--bc-font-mono);
  font-size: 0.875rem;
  line-height: 1.6;
}

/* Top navigation */
.bookclub-top-nav {
  min-height: 4.5rem;
  background: var(--background);
  border-bottom: none;
  padding-top: env(safe-area-inset-top, 0);
  background-image: var(--bc-sketch-line, none);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 5px;
  overflow: visible;
}

html.dark .bookclub-top-nav {
  background: color-mix(in srgb, var(--bc-surface-dark) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.bookclub-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6875rem;
  font-family: var(--bc-font-display);
  font-size: clamp(1.625rem, 2.8vw, 2.0625rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--foreground);
  text-decoration: none;
  padding: 0.125rem 0.375rem 0.125rem 0;
  margin-right: 0.5rem;
  transition: color 0.15s ease;
}

.bookclub-brand:hover {
  color: var(--foreground);
}

.bookclub-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.625rem;
  height: 2.625rem;
  flex-shrink: 0;
  border-radius: 0.72rem 0.62rem 0.68rem 0.65rem / 0.64rem 0.7rem 0.6rem 0.72rem;
  background: color-mix(in srgb, var(--bc-primary) 12%, var(--card));
  border: none;
  color: var(--bc-primary);
  overflow: visible;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.bookclub-brand:hover .bookclub-brand-mark {
  background: color-mix(in srgb, var(--bc-primary) 18%, var(--card));
  transform: translateY(-1px);
}

.bookclub-brand:hover .bookclub-brand-mark::before {
  border-color: var(--bc-sketch-ink-strong);
}

.bookclub-brand-mark svg {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  position: relative;
  z-index: 3;
}

.bookclub-brand-word {
  display: inline-block;
  padding-top: 0.125rem;
  font-variant-ligatures: common-ligatures;
}

.bookclub-brand-accent {
  color: var(--primary);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.dark .bookclub-brand,
html.dark .bookclub-brand {
  color: var(--bc-on-dark);
}

.dark .bookclub-brand:hover,
html.dark .bookclub-brand:hover {
  color: var(--bc-on-dark);
}

.dark .bookclub-brand-mark,
html.dark .bookclub-brand-mark {
  background: color-mix(in srgb, var(--bc-primary) 18%, var(--bc-surface-dark-elevated));
  color: color-mix(in srgb, var(--bc-primary) 88%, var(--bc-on-dark));
}

.dark .bookclub-brand:hover .bookclub-brand-mark,
html.dark .bookclub-brand:hover .bookclub-brand-mark {
  background: color-mix(in srgb, var(--bc-primary) 24%, var(--bc-surface-dark-elevated));
}

.bookclub-nav-cta.btn-sm-primary,
.bookclub-nav-cta.btn-primary {
  min-height: 2.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: var(--bc-radius-md);
  color: var(--bc-on-primary);
  background: var(--bc-primary);
  box-shadow: none;
}

.bookclub-nav-cta.btn-sm-primary:hover,
.bookclub-nav-cta.btn-primary:hover {
  color: var(--bc-on-primary);
  background: var(--bc-primary-active);
}

/* Dark mode — header nav polish */
html.dark .bookclub-top-nav .bookclub-nav-link--active {
  background: color-mix(in srgb, var(--bc-primary) 10%, var(--card));
  box-shadow: inset 0 -2px 0 var(--bc-primary);
}

html.dark .bookclub-top-nav .bookclub-nav-link:hover,
html.dark .bookclub-top-nav .bookclub-nav-link:focus-visible {
  background: color-mix(in srgb, var(--bc-on-dark) 6%, var(--muted));
}

html.dark .bookclub-top-nav .bookclub-nav-user-trigger:hover,
html.dark .bookclub-top-nav .bookclub-nav-user-menu[open] .bookclub-nav-user-trigger {
  border-color: color-mix(in srgb, var(--bc-primary) 42%, var(--border));
  background: var(--card);
}

html.dark .bookclub-top-nav .bookclub-nav-user-dropdown {
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.4);
}

html.dark .bookclub-top-nav .bookclub-nav-toggle:hover {
  background: var(--card);
  border-color: color-mix(in srgb, var(--bc-on-dark) 22%, transparent);
}

@media (max-width: 640px) {
  /* backdrop-filter on the sticky header traps position:fixed children to header height in dark mode */
  html.dark .bookclub-top-nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bc-surface-dark);
  }

  html.dark .bookclub-nav-panel {
    background: var(--bc-surface-dark-elevated);
    border-left-color: var(--border);
    box-shadow: -8px 0 40px rgb(0 0 0 / 0.45);
  }

  html.dark .bookclub-nav-overlay:not([hidden]) {
    background: rgb(0 0 0 / 0.58);
  }

  html.dark .bookclub-nav-panel .bookclub-nav-link {
    color: var(--bc-on-dark-soft);
  }

  html.dark .bookclub-nav-panel .bookclub-nav-link:hover,
  html.dark .bookclub-nav-panel .bookclub-nav-link:focus-visible {
    color: var(--bc-on-dark);
    background: color-mix(in srgb, var(--bc-on-dark) 6%, var(--bc-surface-dark-soft));
  }

  html.dark .bookclub-nav-panel .bookclub-nav-link--active {
    color: var(--bc-on-dark);
    background: color-mix(in srgb, var(--bc-primary) 12%, var(--bc-surface-dark-soft));
  }

  html.dark .bookclub-nav-panel .bookclub-nav-section-label {
    color: var(--bc-on-dark-soft);
  }
}

/* Motion (subtle entrance; respects reduced motion) */

@keyframes bookclub-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .bookclub-animate-rise {
    animation: bookclub-rise 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .bookclub-animate-delay-1 {
    animation-delay: 0.1s;
  }

  .bookclub-animate-delay-2 {
    animation-delay: 0.18s;
  }

  .bookclub-animate-stagger > * {
    animation: bookclub-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .bookclub-animate-stagger > *:nth-child(1) { animation-delay: 0.28s; }
  .bookclub-animate-stagger > *:nth-child(2) { animation-delay: 0.36s; }
  .bookclub-animate-stagger > *:nth-child(3) { animation-delay: 0.44s; }
  .bookclub-animate-stagger > *:nth-child(4) { animation-delay: 0.52s; }
  .bookclub-animate-stagger > *:nth-child(5) { animation-delay: 0.6s; }

  .bookclub-animate-stagger--features > *:nth-child(1) { animation-delay: 0.12s; }
  .bookclub-animate-stagger--features > *:nth-child(2) { animation-delay: 0.2s; }
  .bookclub-animate-stagger--features > *:nth-child(3) { animation-delay: 0.28s; }
}

@media (prefers-reduced-motion: reduce) {
  .bookclub-animate-rise,
  .bookclub-animate-stagger > * {
    animation: none;
  }
}

/* Hero band */
.bookclub-hero-band--home {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(ellipse 52% 44% at 6% 14%, color-mix(in srgb, var(--bc-primary) 9%, transparent), transparent 68%),
    radial-gradient(ellipse 46% 40% at 94% 88%, color-mix(in srgb, var(--bc-accent-teal) 7%, transparent), transparent 70%);
}

html.dark .bookclub-hero-band--home {
  background:
    radial-gradient(ellipse 52% 44% at 6% 14%, color-mix(in srgb, var(--bc-primary) 12%, transparent), transparent 68%),
    radial-gradient(ellipse 46% 40% at 94% 88%, color-mix(in srgb, var(--bc-accent-teal) 9%, transparent), transparent 70%);
}

.bookclub-hero-band--home .bookclub-hero-grid {
  position: relative;
  z-index: 1;
}

/* =============================================================================
   Editorial — hand-drawn pencil sketch borders (site-wide)
   ============================================================================= */

.bookclub-editorial {
  --bc-sketch-ink: color-mix(in srgb, var(--foreground) 58%, transparent);
  --bc-sketch-ink-strong: color-mix(in srgb, var(--foreground) 72%, transparent);
  --bc-sketch-ink-on-coral: color-mix(in srgb, var(--bc-on-primary) 58%, transparent);
  --bc-sketch-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 6' preserveAspectRatio='none'%3E%3Cpath d='M0,3.2 C35,1.2 72,4.1 110,2.6 S185,4.8 260,2.4 S340,1.4 420,3.5 S480,4.2 500,2.8' fill='none' stroke='%23141413' stroke-width='1.9' stroke-linecap='round' opacity='0.48'/%3E%3C/svg%3E");
  --bc-control-radius: 0.62rem 0.56rem 0.64rem 0.58rem / 0.58rem 0.64rem 0.54rem 0.62rem;
}

html.dark .bookclub-editorial {
  --bc-sketch-ink: color-mix(in srgb, var(--foreground) 62%, transparent);
  --bc-sketch-ink-strong: color-mix(in srgb, var(--foreground) 76%, transparent);
  --bc-sketch-ink-on-coral: color-mix(in srgb, var(--bc-on-primary) 62%, transparent);
  --bc-sketch-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 6' preserveAspectRatio='none'%3E%3Cpath d='M0,3.2 C35,1.2 72,4.1 110,2.6 S185,4.8 260,2.4 S340,1.4 420,3.5 S480,4.2 500,2.8' fill='none' stroke='%23faf9f5' stroke-width='1.9' stroke-linecap='round' opacity='0.38'/%3E%3C/svg%3E");
}

.bookclub-sketch-filters {
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
}

.bookclub-editorial :is(
  .bookclub-page-shell,
  .bookclub-content-card,
  .bookclub-auth-shell,
  .bookclub-form-shell,
  .bookclub-feature-card,
  .bookclub-hero-illustration,
  .bookclub-hero-discovery-mode,
  .bookclub-hero-discovery-icon,
  .bookclub-discovery-mode-card,
  .bookclub-books-search-form-card,
  .bookclub-books-result-card,
  .bookclub-books-result-row,
  .bookclub-view-toggle,
  .bookclub-product-panel,
  .bookclub-rx-card,
  .bookclub-blind-card,
  .bookclub-vs-side,
  .bookclub-mood-map,
  .bookclub-callout-coral,
  .bookclub-bento-hero,
  .bookclub-bento-row,
  .bookclub-bento-block,
  .bookclub-bento-hero-panel,
  .bookclub-bento-book-card,
  .bookclub-bento-club-card,
  .bookclub-bento-ghost-btn,
  .bookclub-bento-more,
  .bookclub-mypage-hero,
  .bookclub-stat-card,
  .bookclub-dev-hint,
  .bookclub-activity-member,
  .bookclub-actor-group,
  .bookclub-brand-mark,
  a.btn-primary,
  a.btn-sm-primary,
  a.btn-lg-primary,
  .btn-primary,
  .btn-sm-primary,
  .btn-lg-primary,
  a.btn-outline,
  a.btn-sm-outline,
  a.btn-lg-outline,
  .btn-outline,
  .btn-sm-outline,
  .btn-lg-outline,
  a.btn-secondary,
  a.btn-sm-secondary,
  .btn-secondary,
  .btn-sm-secondary
) {
  position: relative;
  border: none !important;
  box-shadow: none !important;
  isolation: isolate;
}

.bookclub-editorial :is(
  .bookclub-page-shell,
  .bookclub-content-card,
  .bookclub-auth-shell,
  .bookclub-form-shell,
  .bookclub-feature-card,
  .bookclub-hero-illustration,
  .bookclub-hero-discovery-mode,
  .bookclub-hero-discovery-icon,
  .bookclub-discovery-mode-card,
  .bookclub-books-search-form-card,
  .bookclub-books-result-card,
  .bookclub-books-result-row,
  .bookclub-view-toggle,
  .bookclub-product-panel,
  .bookclub-rx-card,
  .bookclub-blind-card,
  .bookclub-vs-side,
  .bookclub-mood-map,
  .bookclub-callout-coral,
  .bookclub-bento-hero,
  .bookclub-bento-row,
  .bookclub-bento-block,
  .bookclub-bento-hero-panel,
  .bookclub-bento-book-card,
  .bookclub-bento-club-card,
  .bookclub-bento-ghost-btn,
  .bookclub-bento-more,
  .bookclub-mypage-hero,
  .bookclub-stat-card,
  .bookclub-dev-hint,
  .bookclub-activity-member,
  .bookclub-actor-group,
  .bookclub-brand-mark,
  a.btn-primary,
  a.btn-sm-primary,
  a.btn-lg-primary,
  .btn-primary,
  .btn-sm-primary,
  .btn-lg-primary,
  a.btn-outline,
  a.btn-sm-outline,
  a.btn-lg-outline,
  .btn-outline,
  .btn-sm-outline,
  .btn-lg-outline,
  a.btn-secondary,
  a.btn-sm-secondary,
  .btn-secondary,
  .btn-sm-secondary
)::before,
.bookclub-editorial :is(
  .bookclub-page-shell,
  .bookclub-bento-hero,
  .bookclub-bento-row,
  .bookclub-bento-block,
  .bookclub-callout-coral
)::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
  z-index: 2;
}

.bookclub-editorial :is(
  .bookclub-page-shell,
  .bookclub-content-card,
  .bookclub-auth-shell,
  .bookclub-form-shell,
  .bookclub-feature-card,
  .bookclub-hero-illustration,
  .bookclub-hero-discovery-mode,
  .bookclub-hero-discovery-icon,
  .bookclub-discovery-mode-card,
  .bookclub-books-search-form-card,
  .bookclub-books-result-card,
  .bookclub-books-result-row,
  .bookclub-view-toggle,
  .bookclub-product-panel,
  .bookclub-rx-card,
  .bookclub-blind-card,
  .bookclub-vs-side,
  .bookclub-mood-map,
  .bookclub-callout-coral,
  .bookclub-bento-hero,
  .bookclub-bento-row,
  .bookclub-bento-block,
  .bookclub-bento-hero-panel,
  .bookclub-bento-book-card,
  .bookclub-bento-club-card,
  .bookclub-bento-ghost-btn,
  .bookclub-bento-more,
  .bookclub-mypage-hero,
  .bookclub-stat-card,
  .bookclub-dev-hint,
  .bookclub-activity-member,
  .bookclub-actor-group,
  .bookclub-brand-mark,
  a.btn-primary,
  a.btn-sm-primary,
  a.btn-lg-primary,
  .btn-primary,
  .btn-sm-primary,
  .btn-lg-primary,
  a.btn-outline,
  a.btn-sm-outline,
  a.btn-lg-outline,
  .btn-outline,
  .btn-sm-outline,
  .btn-lg-outline,
  a.btn-secondary,
  a.btn-sm-secondary,
  .btn-secondary,
  .btn-sm-secondary
)::before {
  inset: 0;
  border: 1.75px solid var(--bc-sketch-ink);
  filter: url(#bookclub-sketch-md);
}

.bookclub-editorial :is(
  .bookclub-page-shell,
  .bookclub-bento-hero,
  .bookclub-bento-row,
  .bookclub-bento-block,
  .bookclub-callout-coral
)::after {
  inset: 2px 1px 1px 2px;
  border: 1px solid color-mix(in srgb, var(--bc-sketch-ink) 26%, transparent);
  filter: url(#bookclub-sketch-lg);
  transform: rotate(0.2deg);
}

.bookclub-editorial :is(
  .bookclub-content-card,
  .bookclub-auth-shell,
  .bookclub-form-shell,
  .bookclub-feature-card,
  .bookclub-hero-discovery-mode,
  .bookclub-hero-discovery-icon,
  .bookclub-discovery-mode-card,
  .bookclub-books-search-form-card,
  .bookclub-books-result-card,
  .bookclub-books-result-row,
  .bookclub-view-toggle,
  .bookclub-product-panel,
  .bookclub-rx-card,
  .bookclub-blind-card,
  .bookclub-vs-side,
  .bookclub-mood-map,
  .bookclub-bento-book-card,
  .bookclub-bento-club-card,
  .bookclub-bento-ghost-btn,
  .bookclub-bento-more,
  .bookclub-dev-hint,
  .bookclub-activity-member,
  .bookclub-actor-group,
  .bookclub-brand-mark,
  a.btn-primary,
  a.btn-sm-primary,
  a.btn-lg-primary,
  .btn-primary,
  .btn-sm-primary,
  .btn-lg-primary,
  a.btn-outline,
  a.btn-sm-outline,
  a.btn-lg-outline,
  .btn-outline,
  .btn-sm-outline,
  .btn-lg-outline,
  a.btn-secondary,
  a.btn-sm-secondary,
  .btn-secondary,
  .btn-sm-secondary
)::before {
  filter: url(#bookclub-sketch-sm);
  border-width: 1.6px;
}

.bookclub-editorial :is(.bookclub-page-shell, .bookclub-bento-hero, .bookclub-bento-block, .bookclub-callout-coral)::before {
  filter: url(#bookclub-sketch-lg);
  border-width: 1.9px;
}

.bookclub-mypage-library-section.bookclub-content-card {
  padding: var(--bc-space-lg);
}

.bookclub-editorial .bookclub-mypage-library-section .bookclub-books-result-card::before,
.bookclub-editorial .bookclub-mypage-library-section .bookclub-books-result-row::before {
  border-color: color-mix(in srgb, var(--bc-sketch-ink) 68%, transparent);
  border-width: 1.45px;
}

.bookclub-editorial .bookclub-page-shell .bookclub-content-card::before {
  border-color: color-mix(in srgb, var(--bc-sketch-ink) 72%, transparent);
  border-width: 1.45px;
}

.bookclub-editorial .bookclub-product-panel .bookclub-books-result-card::before,
.bookclub-editorial .bookclub-map-selected .bookclub-books-result-card::before {
  border-color: color-mix(in srgb, var(--bc-sketch-ink) 72%, transparent);
  border-width: 1.45px;
}

.bookclub-editorial :is(
  .bookclub-deck-stack.bookclub-product-panel,
  .bookclub-rx-slot.bookclub-product-panel,
  .bookclub-blind-slot.bookclub-product-panel,
  .bookclub-vs-arena.bookclub-product-panel
)::before {
  content: none !important;
  display: none !important;
}

.bookclub-editorial :is(a.btn-primary, a.btn-sm-primary, a.btn-lg-primary, .btn-primary, .btn-sm-primary, .btn-lg-primary)::before {
  border-color: color-mix(in srgb, var(--bc-primary-active) 38%, var(--foreground));
}

.bookclub-editorial .bookclub-brand-mark::before {
  border-color: color-mix(in srgb, var(--bc-primary-active) 32%, var(--foreground));
}

.bookclub-editorial :is(.bookclub-callout-coral, .bookclub-bento-block--coral)::before,
.bookclub-editorial .bookclub-bento-block--coral :is(.bookclub-bento-ghost-btn--on-coral, a.bookclub-bento-more)::before {
  border-color: var(--bc-sketch-ink-on-coral);
}

.bookclub-editorial :is(.bookclub-callout-coral, .bookclub-bento-block--coral)::after {
  border-color: color-mix(in srgb, var(--bc-sketch-ink-on-coral) 24%, transparent);
}

.bookclub-editorial :is(
  .btn-outline,
  .btn-sm-outline,
  .btn-lg-outline,
  a.btn-outline,
  a.btn-sm-outline,
  a.btn-lg-outline
) {
  background: color-mix(in srgb, var(--background) 82%, transparent);
}

.bookclub-editorial :is(.btn-outline, .btn-sm-outline, .btn-lg-outline):hover,
.bookclub-editorial :is(a.btn-outline, a.btn-sm-outline, a.btn-lg-outline):hover {
  background: var(--background);
}

html.dark .bookclub-editorial :is(
  .btn-outline,
  .btn-sm-outline,
  .btn-lg-outline,
  a.btn-outline,
  a.btn-sm-outline,
  a.btn-lg-outline
) {
  background: color-mix(in srgb, var(--card) 88%, transparent);
}

html.dark .bookclub-editorial :is(.btn-outline, .btn-sm-outline, .btn-lg-outline):hover,
html.dark .bookclub-editorial :is(a.btn-outline, a.btn-sm-outline, a.btn-lg-outline):hover {
  background: var(--card);
}

/* Booknote — flat 1px outline buttons site-wide on page (header, habits, share, step nav) */
.bookclub-editorial .bookclub-booknote-page :is(
  a.btn-outline,
  a.btn-sm-outline,
  a.btn-lg-outline,
  button.btn-outline,
  button.btn-sm-outline,
  button.btn-lg-outline,
  .btn-outline,
  .btn-sm-outline,
  .btn-lg-outline
)::before {
  content: none !important;
  display: none !important;
  border: 0 !important;
  filter: none !important;
}

.bookclub-editorial .bookclub-booknote-page :is(
  a.btn-outline,
  a.btn-sm-outline,
  a.btn-lg-outline,
  button.btn-outline,
  button.btn-sm-outline,
  button.btn-lg-outline,
  .btn-outline,
  .btn-sm-outline,
  .btn-lg-outline
) {
  border: 1px solid color-mix(in srgb, var(--foreground) 14%, var(--border)) !important;
  border-width: 1px !important;
  box-shadow: none !important;
  filter: none !important;
}

html.dark .bookclub-editorial .bookclub-booknote-page :is(
  a.btn-outline,
  a.btn-sm-outline,
  button.btn-outline,
  button.btn-sm-outline,
  .btn-outline,
  .btn-sm-outline
) {
  border: 1px solid color-mix(in srgb, var(--foreground) 14%, var(--border)) !important;
  border-width: 1px !important;
  box-shadow: none !important;
}

.bookclub-editorial :is(.bookclub-page-shell, .bookclub-bento-hero, .bookclub-bento-block) > * {
  position: relative;
  z-index: 1;
}

.bookclub-page-shell .bookclub-page-header,
.bookclub-page-shell > header.bookclub-page-header {
  border-bottom: none;
  padding-bottom: 1rem;
  margin-bottom: var(--bc-space-xl);
  background-image: var(--bc-sketch-line);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 5px;
}

.bookclub-editorial .bookclub-chat-panel::before,
.bookclub-editorial .bookclub-chat-panel::after,
.bookclub-editorial .bookclub-header::before,
.bookclub-editorial .bookclub-header::after,
.bookclub-editorial .skip-link::before {
  content: none !important;
  display: none !important;
}

/* Top nav — editorial sketch (links, toggles, drawer — no outer header bar frame) */
.bookclub-editorial .bookclub-nav-link {
  position: relative;
  overflow: visible;
  isolation: isolate;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0.62rem 0.56rem 0.64rem 0.58rem / 0.58rem 0.64rem 0.54rem 0.62rem;
}

.bookclub-editorial .bookclub-nav-link--active::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  border: 1.6px solid color-mix(in srgb, var(--bc-primary-active) 38%, var(--foreground));
  filter: url(#bookclub-sketch-sm);
}

.bookclub-editorial .bookclub-nav-link--active {
  color: var(--foreground);
  background: color-mix(in srgb, var(--bc-primary) 8%, var(--card));
  box-shadow: none !important;
}

.bookclub-editorial .bookclub-nav-toggle {
  position: relative;
  overflow: visible;
  isolation: isolate;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0.62rem 0.56rem 0.64rem 0.58rem / 0.58rem 0.64rem 0.54rem 0.62rem;
  background: var(--muted);
}

.bookclub-editorial .bookclub-theme-toggle {
  position: relative;
  overflow: visible;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.bookclub-editorial .bookclub-nav-toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  border: 1.6px solid var(--bc-sketch-ink);
  filter: url(#bookclub-sketch-sm);
}

.bookclub-editorial .bookclub-theme-toggle::before {
  content: none !important;
  display: none !important;
}

.bookclub-editorial .bookclub-nav-toggle > *,
.bookclub-editorial .bookclub-nav-user-trigger > * {
  position: relative;
  z-index: 3;
}

.bookclub-editorial .bookclub-nav-toggle:hover {
  background: var(--card);
}

.bookclub-editorial .bookclub-theme-toggle:hover {
  background: transparent !important;
}

.bookclub-editorial .bookclub-nav-toggle:hover::before,
.bookclub-editorial .bookclub-nav-user-menu[open] .bookclub-nav-user-trigger::before {
  border-color: var(--bc-sketch-ink-strong);
}

.bookclub-editorial .bookclub-nav-user-trigger {
  position: relative;
  overflow: visible;
  isolation: isolate;
  border: none !important;
  box-shadow: none !important;
  border-radius: 999px 985px 995px 978px / 992px 978px 1002px 988px;
  background: var(--muted);
}

.bookclub-editorial .bookclub-nav-user-trigger::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  border: 1.6px solid var(--bc-sketch-ink);
  filter: url(#bookclub-sketch-sm);
}

.bookclub-editorial .bookclub-nav-user-menu[open] .bookclub-nav-user-trigger,
.bookclub-editorial .bookclub-nav-user-trigger:hover {
  background: var(--card);
}

.bookclub-editorial .bookclub-nav-user-dropdown {
  position: absolute;
  border: none !important;
  box-shadow: none !important;
  isolation: isolate;
  overflow: visible;
  border-radius: 1.05rem 0.95rem 1.02rem 1rem / 0.98rem 1.04rem 0.94rem 1.02rem;
}

.bookclub-editorial .bookclub-nav-user-dropdown::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  border: 1.75px solid var(--bc-sketch-ink);
  filter: url(#bookclub-sketch-md);
  box-shadow: 0 12px 32px rgb(20 20 19 / 0.08);
}

.bookclub-editorial .bookclub-nav-user-dropdown > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 640px) {
  .bookclub-editorial .bookclub-nav-panel {
    border-left: none !important;
    box-shadow: none !important;
    isolation: isolate;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .bookclub-editorial .bookclub-nav-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    border-left: 1.9px solid var(--bc-sketch-ink);
    border-top: none;
    border-bottom: none;
    border-right: none;
    filter: url(#bookclub-sketch-md);
    box-shadow: -8px 0 32px rgb(20 20 19 / 0.08);
  }

  .bookclub-editorial .bookclub-nav-panel > * {
    position: relative;
    z-index: 1;
  }
}

/* Form controls — sketch borders on uiField (.field) wrappers + standalone inputs */
.bookclub-editorial .field:has(> :is(
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=submit]):not([type=button]):not([type=image]),
  select,
  textarea
)) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.375rem;
  isolation: isolate;
}

.bookclub-editorial .field:has(> :is(label, .label) + :is(
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=submit]):not([type=button]):not([type=image]),
  select,
  textarea
)) > :is(label, .label) {
  grid-column: 1;
  grid-row: 1;
}

.bookclub-editorial .field:has(> :is(
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=submit]):not([type=button]):not([type=image]),
  select,
  textarea
)) > :is(
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=submit]):not([type=button]):not([type=image]),
  select,
  textarea
) {
  grid-column: 1;
  position: relative;
  z-index: 1;
  border: none !important;
  border-radius: var(--bc-control-radius);
  box-shadow: none !important;
  background-color: var(--background);
}

.bookclub-editorial .field:has(> :is(label, .label) + :is(
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=submit]):not([type=button]):not([type=image]),
  select,
  textarea
)) > :is(
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=submit]):not([type=button]):not([type=image]),
  select,
  textarea
) {
  grid-row: 2;
}

.bookclub-editorial .field:not(:has(> :is(label, .label))) > :is(
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=submit]):not([type=button]):not([type=image]),
  select,
  textarea
) {
  grid-row: 1;
}

.bookclub-editorial .field:has(> :is(
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=submit]):not([type=button]):not([type=image]),
  select,
  textarea
))::before {
  content: "";
  grid-column: 1;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  min-width: 0;
  pointer-events: none;
  z-index: 2;
  border-radius: var(--bc-control-radius);
  border: 1.6px solid var(--bc-sketch-ink);
  filter: url(#bookclub-sketch-sm);
}

.bookclub-editorial .field:has(> :is(label, .label) + :is(
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=submit]):not([type=button]):not([type=image]),
  select,
  textarea
))::before {
  grid-row: 2;
}

.bookclub-editorial .field:not(:has(> :is(label, .label)))::before {
  grid-row: 1;
}

.bookclub-editorial .field:has(> :is(
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=submit]):not([type=button]):not([type=image]),
  select,
  textarea
):focus-visible)::before {
  border-color: var(--bc-sketch-ink-strong);
}

.bookclub-editorial .field > :is(
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=submit]):not([type=button]):not([type=image]),
  select,
  textarea
):focus-visible {
  outline: none !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  box-shadow: none !important;
}

html.dark .bookclub-editorial .field > :is(
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=submit]):not([type=button]):not([type=image]),
  select,
  textarea
) {
  background-color: color-mix(in srgb, var(--card) 88%, transparent);
}

/* Standalone controls (no .field wrapper) — wobbly radius, flat ink (no filter on typed text) */
.bookclub-editorial :is(
  input.input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=submit]):not([type=button]):not([type=image]),
  select.select,
  textarea.input,
  textarea.textarea
) {
  border: 1px solid color-mix(in srgb, var(--foreground) 14%, var(--border)) !important;
  border-radius: var(--bc-control-radius);
  box-shadow: none !important;
  background-color: var(--background);
}

.bookclub-editorial :is(
  input.input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=submit]):not([type=button]):not([type=image]),
  select.select,
  textarea.input,
  textarea.textarea
):focus-visible {
  outline: none !important;
  border-color: color-mix(in srgb, var(--foreground) 22%, var(--border)) !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  box-shadow: none !important;
}

html.dark .bookclub-editorial :is(
  input.input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=submit]):not([type=button]):not([type=image]),
  select.select,
  textarea.input,
  textarea.textarea
) {
  background-color: color-mix(in srgb, var(--card) 88%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .bookclub-editorial :is(
    .bookclub-page-shell,
    .bookclub-content-card,
    .bookclub-auth-shell,
    .bookclub-form-shell,
    .bookclub-feature-card,
    .bookclub-books-result-card,
    .bookclub-books-result-row,
    .bookclub-view-toggle,
    .bookclub-brand-mark,
    .bookclub-stat-card,
    .bookclub-bento-hero,
    .bookclub-bento-row,
    .bookclub-bento-block,
    a.btn-primary,
    a.btn-outline,
    .btn-primary,
    .btn-outline
  )::before,
  .bookclub-editorial .field:has(> :is(
    input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=submit]):not([type=button]):not([type=image]),
    select,
    textarea
  ))::before,
  .bookclub-editorial .bookclub-nav-link--active::before,
  .bookclub-editorial .bookclub-nav-toggle::before,
  .bookclub-editorial .bookclub-deck-mood-chip::before,
  .bookclub-editorial .bookclub-deck-btn::before,
  .bookclub-editorial .bookclub-nav-user-trigger::before,
  .bookclub-editorial .bookclub-nav-user-dropdown::before,
  .bookclub-editorial .bookclub-nav-panel::before,
  .bookclub-editorial :is(
    .bookclub-page-shell,
    .bookclub-bento-hero,
    .bookclub-bento-row,
    .bookclub-bento-block,
    .bookclub-callout-coral
  )::after {
    filter: none;
    transform: none;
  }
}

/* Page shells — themed ambient + motion (per page character) */
.bookclub-page-shell {
  border-radius: 1.85rem 1.72rem 1.95rem 1.8rem / 1.78rem 1.92rem 1.75rem 1.88rem;
  padding: var(--bc-space-xl);
  margin-bottom: var(--bc-space-lg);
  overflow: visible;
  border: none;
}

.bookclub-page-shell--explore {
  background:
    radial-gradient(ellipse 46% 36% at 10% 6%, color-mix(in srgb, var(--bc-primary) 8%, transparent), transparent 64%),
    radial-gradient(ellipse 40% 34% at 90% 94%, color-mix(in srgb, var(--bc-accent-amber) 6%, transparent), transparent 68%);
}

.bookclub-page-shell--discovery {
  background:
    radial-gradient(ellipse 48% 38% at 88% 8%, color-mix(in srgb, var(--bc-primary) 9%, transparent), transparent 65%),
    radial-gradient(ellipse 42% 36% at 8% 92%, color-mix(in srgb, var(--bc-accent-teal) 7%, transparent), transparent 70%);
}

.bookclub-page-shell--community {
  background:
    radial-gradient(ellipse 44% 36% at 6% 12%, color-mix(in srgb, var(--bc-accent-teal) 8%, transparent), transparent 66%),
    radial-gradient(ellipse 42% 34% at 94% 88%, color-mix(in srgb, var(--bc-primary) 6%, transparent), transparent 72%);
}

.bookclub-page-shell--social {
  background:
    radial-gradient(ellipse 40% 34% at 12% 10%, color-mix(in srgb, var(--bc-primary) 7%, transparent), transparent 68%),
    radial-gradient(ellipse 38% 32% at 88% 90%, color-mix(in srgb, var(--bc-accent-amber) 5%, transparent), transparent 72%);
}

.bookclub-page-shell--auth {
  background:
    radial-gradient(ellipse 58% 42% at 50% 0%, color-mix(in srgb, var(--bc-primary) 7%, transparent), transparent 72%);
  padding: var(--bc-space-xxl) var(--bc-space-md);
  margin-bottom: 0;
}

html.dark .bookclub-page-shell--explore {
  background:
    radial-gradient(ellipse 46% 36% at 10% 6%, color-mix(in srgb, var(--bc-primary) 11%, transparent), transparent 64%),
    radial-gradient(ellipse 40% 34% at 90% 94%, color-mix(in srgb, var(--bc-accent-amber) 8%, transparent), transparent 68%);
}

html.dark .bookclub-page-shell--discovery {
  background:
    radial-gradient(ellipse 48% 38% at 88% 8%, color-mix(in srgb, var(--bc-primary) 12%, transparent), transparent 65%),
    radial-gradient(ellipse 42% 36% at 8% 92%, color-mix(in srgb, var(--bc-accent-teal) 9%, transparent), transparent 70%);
}

html.dark .bookclub-page-shell--community {
  background:
    radial-gradient(ellipse 44% 36% at 6% 12%, color-mix(in srgb, var(--bc-accent-teal) 10%, transparent), transparent 66%),
    radial-gradient(ellipse 42% 34% at 94% 88%, color-mix(in srgb, var(--bc-primary) 9%, transparent), transparent 72%);
}

/* Discussion comment threads — nested reply indentation */
.bookclub-comment-thread {
  padding-block: 0.125rem;
}

[id^="comment-"] {
  scroll-margin-top: 5rem;
}

[id^="comment-"]:target {
  border-radius: 0.375rem;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bc-primary, var(--primary)) 35%, transparent);
}

.bookclub-comment-replies {
  margin-inline-start: 0.75rem;
  margin-block: 0.75rem 0.25rem;
  padding: 0.875rem 1rem 0.5rem;
  border-inline-start: 3px solid var(--bc-primary, var(--primary));
  border-radius: 0 0.625rem 0.625rem 0;
  background: color-mix(in srgb, var(--bc-primary, var(--primary)) 7%, var(--color-muted, var(--muted)));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--foreground) 4%, transparent);
}

@media (min-width: 640px) {
  .bookclub-comment-replies {
    margin-inline-start: 1.25rem;
    padding-inline: 1.125rem;
  }
}

.bookclub-comment-reply-context {
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px dashed color-mix(in srgb, var(--color-border, var(--border)) 80%, var(--bc-primary));
}

.bookclub-comment-reply-context__heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.35;
}

.bookclub-comment-reply-context__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  color: var(--bc-primary, var(--primary));
  background: color-mix(in srgb, var(--bc-primary, var(--primary)) 14%, transparent);
}

.bookclub-comment-reply-context__icon svg {
  display: block;
  width: 1rem;
  height: 1rem;
}

.bookclub-comment-reply-context__link {
  color: var(--bc-primary, var(--primary));
  text-decoration: none;
  font-weight: 600;
}

.bookclub-comment-reply-context__link:hover,
.bookclub-comment-reply-context__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bookclub-comment-reply-context__link strong {
  font-weight: 700;
}

.bookclub-comment-reply-context__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  margin-inline-start: 0.375rem;
  padding-inline: 0.375rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  color: var(--primary-foreground, #fff);
  background: var(--bc-primary, var(--primary));
}

.bookclub-comment-reply-context__quote {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.75rem;
  border-inline-start: 3px solid color-mix(in srgb, var(--bc-primary, var(--primary)) 45%, var(--color-border, var(--border)));
  border-radius: 0 0.375rem 0.375rem 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-muted-foreground, var(--muted-foreground));
  background: color-mix(in srgb, var(--background) 72%, var(--color-muted, var(--muted)));
}

.bookclub-comment-replies__list > .bookclub-comment-row--reply + .bookclub-comment-row--reply {
  border-top: 1px solid color-mix(in srgb, var(--color-border, var(--border)) 70%, transparent);
}

.bookclub-comment-row--reply {
  position: relative;
  margin-inline-start: 0;
}

.bookclub-comment-actions .inline {
  display: inline-flex;
}

html.dark .bookclub-comment-replies {
  background: color-mix(in srgb, var(--bc-primary, var(--primary)) 11%, var(--color-muted, var(--muted)));
}

html.dark .bookclub-comment-reply-context__quote {
  background: color-mix(in srgb, var(--background) 55%, var(--color-muted, var(--muted)));
}

html.dark .bookclub-page-shell--social {
  background:
    radial-gradient(ellipse 40% 34% at 12% 10%, color-mix(in srgb, var(--bc-primary) 10%, transparent), transparent 68%),
    radial-gradient(ellipse 38% 32% at 88% 90%, color-mix(in srgb, var(--bc-accent-amber) 7%, transparent), transparent 72%);
}

html.dark .bookclub-page-shell--auth {
  background:
    radial-gradient(ellipse 58% 42% at 50% 0%, color-mix(in srgb, var(--bc-primary) 10%, transparent), transparent 72%);
}

.bookclub-page-shell--admin {
  background:
    radial-gradient(ellipse 40% 32% at 6% 8%, color-mix(in srgb, var(--foreground) 4%, transparent), transparent 70%),
    radial-gradient(ellipse 36% 30% at 94% 92%, color-mix(in srgb, var(--bc-primary) 5%, transparent), transparent 72%);
}

html.dark .bookclub-page-shell--admin {
  background:
    radial-gradient(ellipse 40% 32% at 6% 8%, color-mix(in srgb, var(--foreground) 7%, transparent), transparent 70%),
    radial-gradient(ellipse 36% 30% at 94% 92%, color-mix(in srgb, var(--bc-primary) 8%, transparent), transparent 72%);
}

.bookclub-page-shell .bookclub-page-header {
  margin-bottom: var(--bc-space-xl);
}

@media (prefers-reduced-motion: no-preference) {
  .bookclub-animate-stagger--cards > *:nth-child(1) { animation-delay: 0.08s; }
  .bookclub-animate-stagger--cards > *:nth-child(2) { animation-delay: 0.12s; }
  .bookclub-animate-stagger--cards > *:nth-child(3) { animation-delay: 0.16s; }
  .bookclub-animate-stagger--cards > *:nth-child(4) { animation-delay: 0.2s; }
  .bookclub-animate-stagger--cards > *:nth-child(5) { animation-delay: 0.24s; }
  .bookclub-animate-stagger--cards > *:nth-child(6) { animation-delay: 0.28s; }
  .bookclub-animate-stagger--cards > *:nth-child(n+7) { animation-delay: 0.32s; }
}

.bookclub-hero-band {
  padding-top: var(--bc-space-xxl);
  padding-bottom: var(--bc-space-xxl);
}

@media (min-width: 768px) {
  .bookclub-hero-band {
    padding-top: var(--bc-space-section);
    padding-bottom: var(--bc-space-section);
  }
}

.bookclub-hero-grid {
  display: grid;
  gap: var(--bc-space-xl);
  align-items: center;
}

@media (min-width: 768px) {
  .bookclub-hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--bc-space-xxl);
  }
}

.bookclub-hero-illustration {
  background: var(--bc-surface-card);
  border: none;
  border-radius: 1.35rem 1.22rem 1.28rem 1.25rem / 1.24rem 1.32rem 1.18rem 1.3rem;
  padding: var(--bc-space-xl);
  min-height: 12rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--bc-space-md);
  overflow: visible;
}

.dark .bookclub-hero-illustration,
html.dark .bookclub-hero-illustration {
  background: var(--bc-surface-dark-soft);
}

.bookclub-hero-illustration-dark {
  background: var(--bc-surface-dark);
  border: none;
  color: var(--bc-on-dark);
}

/* Hero — discovery preview (soft editorial card, not dark mockup panel) */
.bookclub-hero-discovery.bookclub-hero-illustration {
  background: color-mix(in srgb, var(--bc-primary) 5%, var(--card));
  border: none;
  box-shadow: none;
}

html.dark .bookclub-hero-discovery.bookclub-hero-illustration {
  background: color-mix(in srgb, var(--bc-primary) 6%, var(--card));
}

.bookclub-hero-discovery {
  gap: var(--bc-space-md);
  justify-content: flex-start;
}

.bookclub-hero-discovery-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.bookclub-hero-discovery-kicker {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
}

.bookclub-hero-discovery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.bookclub-hero-discovery-mode {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border-radius: 1.05rem 0.9rem 1rem 0.95rem / 0.92rem 1.02rem 0.88rem 1.08rem;
  border: none;
  background: var(--background);
  color: inherit;
  min-width: 0;
  text-decoration: none;
  overflow: visible;
  transition: background-color 150ms ease;
}

a.bookclub-hero-discovery-mode:hover,
a.bookclub-hero-discovery-mode:focus-visible {
  background: var(--accent);
  outline: none;
}

.bookclub-editorial a.bookclub-hero-discovery-mode:hover::before,
.bookclub-editorial a.bookclub-hero-discovery-mode:focus-visible::before {
  border-color: var(--bc-sketch-ink-strong);
}

a.bookclub-hero-discovery-mode:hover .bookclub-hero-discovery-icon,
a.bookclub-hero-discovery-mode:focus-visible .bookclub-hero-discovery-icon {
  background: color-mix(in srgb, var(--bc-primary) 14%, var(--card));
}

@media (prefers-reduced-motion: no-preference) {
  a.bookclub-hero-discovery-mode:hover .bookclub-hero-discovery-icon,
  a.bookclub-hero-discovery-mode:focus-visible .bookclub-hero-discovery-icon {
    transform: scale(1.06);
  }

  .bookclub-hero-discovery-icon {
    transition: transform 180ms ease, background-color 150ms ease;
  }
}

.bookclub-hero-discovery-head .bookclub-badge-coral {
  transition: opacity 150ms ease;
}

.bookclub-hero-discovery-head .bookclub-badge-coral:hover,
.bookclub-hero-discovery-head .bookclub-badge-coral:focus-visible {
  opacity: 0.9;
  outline: none;
}

.bookclub-hero-discovery-cta {
  color: var(--primary);
  font-weight: 500;
  text-decoration: none;
}

.bookclub-hero-discovery-cta:hover {
  color: var(--bc-primary-active);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bookclub-hero-discovery-mode:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.bookclub-hero-discovery-icon {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  line-height: 1;
  border-radius: 0.65rem 0.55rem 0.6rem 0.58rem / 0.56rem 0.62rem 0.54rem 0.64rem;
  background: color-mix(in srgb, var(--bc-primary) 10%, var(--card));
  border: none;
  overflow: visible;
}

.bookclub-hero-discovery-body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.bookclub-hero-discovery-label {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--foreground);
}

.bookclub-hero-discovery-desc {
  font-size: 0.6875rem;
  line-height: 1.35;
  color: var(--muted-foreground);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.bookclub-hero-discovery-empty {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  padding: 0.75rem;
  border-radius: var(--bc-radius-md);
  background: var(--muted);
  border: 1px dashed var(--border);
  text-align: center;
}

.bookclub-hero-discovery .bookclub-hero-caption {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

/* Feature & content cards */
.bookclub-feature-card {
  background: var(--bc-surface-card);
  border-radius: 1.12rem 1.02rem 1.08rem 1.05rem / 1.04rem 1.1rem 0.98rem 1.06rem;
  padding: var(--bc-space-xl);
  height: 100%;
  display: block;
  text-decoration: none;
  color: inherit;
  border: none;
  overflow: visible;
  transition: transform 180ms ease;
}

@media (prefers-reduced-motion: no-preference) {
  .bookclub-feature-card:hover {
    transform: translateY(-3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bookclub-feature-card:hover {
    transform: none;
  }
}

html.dark .bookclub-feature-card:hover {
  transform: translateY(-2px);
}

.dark .bookclub-feature-card,
html.dark .bookclub-feature-card {
  background: var(--bc-surface-dark-elevated);
}

.bookclub-feature-card h3 {
  font-family: var(--bc-font-body);
  font-size: 1.125rem;
  font-weight: 500;
  margin: 0 0 0.5rem;
  letter-spacing: 0;
}

.bookclub-feature-card p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--bc-body);
}

.dark .bookclub-feature-card p,
html.dark .bookclub-feature-card p {
  color: var(--bc-on-dark-soft);
}

.bookclub-content-card {
  background: var(--card);
  border: none;
  border-radius: 1.1rem 1rem 1.06rem 1.04rem / 1.02rem 1.08rem 0.98rem 1.05rem;
  padding: var(--bc-space-xl);
  color: var(--card-foreground);
  overflow: visible;
}

/* Coral callout */
.bookclub-callout-coral {
  background: var(--bc-primary);
  color: var(--bc-on-primary);
  border-radius: 1.85rem 1.72rem 1.95rem 1.8rem / 1.78rem 1.92rem 1.75rem 1.88rem;
  padding: var(--bc-space-xxl);
  overflow: visible;
}

.bookclub-callout-coral h2 {
  color: var(--bc-on-primary);
  margin: 0 0 0.75rem;
}

.bookclub-callout-coral p {
  color: color-mix(in srgb, var(--bc-on-primary) 90%, transparent);
  margin: 0 0 1.5rem;
  line-height: 1.55;
}

.bookclub-callout-coral .btn-lg-outline,
.bookclub-callout-coral .btn-outline {
  background: var(--bc-canvas);
  color: var(--bc-ink);
  border-color: transparent;
}

/* Page header pattern */
.bookclub-page-header {
  margin-bottom: var(--bc-space-xl);
}

.bookclub-page-header h1 {
  margin: 0 0 0.5rem;
}

.bookclub-page-header .bookclub-page-description {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--bc-muted);
}

/* Section rhythm */
.bookclub-section {
  margin-top: var(--bc-space-section);
}

.bookclub-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bc-space-md);
  margin-bottom: var(--bc-space-lg);
}

/* Badges */
.bookclub-badge-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: var(--bc-radius-pill);
  background: var(--bc-surface-card);
  color: var(--bc-ink);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
}

.bookclub-badge-coral {
  background: var(--bc-primary);
  color: var(--bc-on-primary);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Dark footer */
.bookclub-footer {
  margin-top: var(--bc-space-section);
  background: var(--bc-surface-dark);
  color: var(--bc-on-dark-soft);
  border-top: none;
  padding: 4rem var(--bc-space-md);
}

.bookclub-footer-inner {
  max-width: var(--bc-max-width);
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.bookclub-footer-brand {
  font-family: var(--bc-font-display);
  font-size: 1.25rem;
  color: var(--bc-on-dark);
  margin-bottom: var(--bc-space-lg);
  letter-spacing: -0.02em;
}

.bookclub-footer-grid {
  display: grid;
  gap: var(--bc-space-xl);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .bookclub-footer-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.bookclub-footer-col h4 {
  font-family: var(--bc-font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bc-on-dark);
  margin: 0 0 0.75rem;
}

.bookclub-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bookclub-footer-col li {
  margin-bottom: 0.5rem;
}

.bookclub-footer-col a {
  color: var(--bc-on-dark-soft);
  text-decoration: none;
  font-size: 0.875rem;
}

.bookclub-footer-col a:hover {
  color: var(--bc-on-dark);
}

.bookclub-footer-bottom {
  margin-top: var(--bc-space-xxl);
  padding-top: var(--bc-space-lg);
  border-top: 1px solid color-mix(in srgb, var(--bc-on-dark) 12%, transparent);
  font-size: 0.8125rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--bc-space-md);
}

/* Primary button active state */
.btn-primary:active,
.btn-sm-primary:active,
.btn-lg-primary:active {
  background-color: var(--bc-primary-active);
}

/* --- Dark mode: Basecoat button contrast --- */

html.dark .bookclub-editorial :is(
  .btn-outline,
  .btn-sm-outline,
  .btn-lg-outline,
  a.btn-outline,
  a.btn-sm-outline,
  a.btn-lg-outline
) {
  color: var(--bc-on-dark);
  border-color: color-mix(in srgb, var(--bc-on-dark) 28%, transparent);
  background-color: color-mix(in srgb, var(--bc-on-dark) 6%, var(--bc-surface-dark));
}

html.dark .bookclub-editorial :is(
  .btn-outline,
  .btn-sm-outline,
  .btn-lg-outline
):hover,
html.dark .bookclub-editorial :is(
  .btn-outline,
  .btn-sm-outline,
  .btn-lg-outline
)[aria-pressed="true"] {
  color: var(--bc-on-dark);
  border-color: color-mix(in srgb, var(--bc-on-dark) 40%, transparent);
  background-color: var(--bc-surface-dark-elevated);
}

html.dark .bookclub-editorial :is(.btn-ghost, .btn-sm-ghost, .btn-lg-ghost) {
  color: var(--bc-on-dark-soft);
}

html.dark .bookclub-editorial :is(.btn-ghost, .btn-sm-ghost, .btn-lg-ghost):hover,
html.dark .bookclub-editorial :is(.btn-ghost, .btn-sm-ghost, .btn-lg-ghost)[aria-pressed="true"] {
  color: var(--bc-on-dark);
  background-color: var(--bc-surface-dark-elevated);
}

html.dark .bookclub-editorial :is(.btn-primary, .btn-sm-primary, .btn-lg-primary) {
  background-color: var(--bc-primary);
  color: var(--bc-on-primary);
  border-color: var(--bc-primary);
}

html.dark .bookclub-editorial :is(.btn-primary, .btn-sm-primary, .btn-lg-primary):hover {
  background-color: var(--bc-primary-active);
  border-color: var(--bc-primary-active);
}

html.dark .bookclub-editorial :is(.btn-link, .btn-sm-link, .btn-lg-link) {
  color: var(--bc-primary);
}

html.dark .bookclub-theme-toggle:is(.btn-ghost, .btn-sm-ghost, .btn-lg-ghost),
html.dark .bookclub-editorial .bookclub-theme-toggle {
  border: none;
  box-shadow: none;
  background: transparent;
  color: var(--bc-on-dark-soft);
}

html.dark .bookclub-editorial .bookclub-header .bookclub-nav-toggle {
  background: color-mix(in srgb, var(--bc-on-dark) 6%, var(--bc-surface-dark-elevated));
  color: var(--bc-on-dark-soft);
}

html.dark .bookclub-editorial .bookclub-header .bookclub-theme-toggle {
  background: transparent !important;
  color: var(--bc-on-dark-soft);
}

html.dark .bookclub-theme-toggle:is(.btn-ghost, .btn-sm-ghost, .btn-lg-ghost):hover,
html.dark .bookclub-editorial .bookclub-theme-toggle:hover {
  border: none;
  box-shadow: none;
  color: var(--bc-on-dark);
  background: var(--muted);
}

html.dark .bookclub-editorial .bookclub-header .bookclub-nav-toggle:hover {
  background: color-mix(in srgb, var(--bc-on-dark) 10%, var(--bc-surface-dark-elevated));
  color: var(--bc-on-dark);
}

html.dark .bookclub-editorial .bookclub-header .bookclub-theme-toggle:hover {
  background: transparent !important;
  color: var(--bc-on-dark);
}

html.dark .bookclub-theme-toggle .bookclub-theme-label {
  color: inherit;
}

html.dark .bookclub-editorial .bookclub-badge-pill {
  background: var(--bc-surface-dark-elevated);
  color: var(--bc-on-dark);
  border: 1px solid color-mix(in srgb, var(--bc-on-dark) 12%, transparent);
}

html.dark .bookclub-editorial .bookclub-page-header .bookclub-page-description {
  color: var(--bc-on-dark-soft);
}

html.dark .bookclub-editorial .bookclub-page-link {
  border-color: color-mix(in srgb, var(--bc-on-dark) 24%, transparent);
  background: var(--bc-surface-dark-elevated);
  color: var(--bc-on-dark);
}

html.dark .bookclub-editorial .bookclub-page-link:hover {
  border-color: color-mix(in srgb, var(--bc-primary) 45%, transparent);
  background: color-mix(in srgb, var(--bc-primary) 10%, var(--bc-surface-dark-elevated));
}

html.dark .bookclub-editorial .bookclub-page-link--disabled {
  color: var(--bc-on-dark-soft);
  opacity: 0.55;
}

/* Discovery mode panels — editorial card surfaces (not dark mockup) */
.bookclub-product-panel {
  background:
    radial-gradient(ellipse 42% 34% at 12% 8%, color-mix(in srgb, var(--bc-primary) 6%, transparent), transparent 68%),
    var(--card);
  border: none;
  border-radius: 1.35rem 1.22rem 1.28rem 1.25rem / 1.24rem 1.32rem 1.18rem 1.3rem;
  padding: var(--bc-space-lg);
  color: var(--card-foreground);
  overflow: visible;
}

.bookclub-deck-stack.bookclub-product-panel,
.bookclub-rx-slot.bookclub-product-panel,
.bookclub-blind-slot.bookclub-product-panel,
.bookclub-vs-arena.bookclub-product-panel {
  background: transparent;
  padding: 0;
}

.bookclub-mood-map.bookclub-product-panel {
  padding: 2.35rem 2.5rem;
  background:
    radial-gradient(ellipse 42% 34% at 12% 8%, color-mix(in srgb, var(--bc-primary) 6%, transparent), transparent 68%),
    linear-gradient(to right, color-mix(in srgb, var(--foreground) 8%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--foreground) 8%, transparent) 1px, transparent 1px),
    var(--card);
  background-size: auto, 50% 50%, 50% 50%, auto;
  background-position: center, center, center, center;
}

html.dark .bookclub-mood-map.bookclub-product-panel {
  background:
    radial-gradient(ellipse 42% 34% at 12% 8%, color-mix(in srgb, var(--bc-primary) 10%, transparent), transparent 68%),
    linear-gradient(to right, color-mix(in srgb, var(--foreground) 10%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--foreground) 10%, transparent) 1px, transparent 1px),
    var(--card);
  background-size: auto, 50% 50%, 50% 50%, auto;
  background-position: center, center, center, center;
}

html.dark .bookclub-mood-axis {
  color: var(--bc-on-dark);
  background: color-mix(in srgb, var(--card) 90%, var(--bc-surface-dark-elevated));
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
}

.bookclub-product-panel .bookclub-books-result-card {
  background: var(--card);
  color: var(--card-foreground);
}

.bookclub-product-panel .bookclub-books-result-title {
  color: var(--foreground);
}

.bookclub-product-panel .bookclub-books-result-author {
  color: var(--muted-foreground);
}

.bookclub-product-panel .bookclub-books-result-cover--empty {
  background: color-mix(in srgb, var(--bc-primary) 6%, var(--muted));
  color: var(--muted-foreground);
}

.bookclub-product-panel .text-muted-foreground,
.bookclub-product-panel .bookclub-text-muted {
  color: var(--muted-foreground);
}

.bookclub-product-panel .bookclub-empty-state .bookclub-content-card {
  background: var(--card);
  color: var(--card-foreground);
}

.bookclub-product-panel .bookclub-empty-state .text-muted-foreground {
  color: var(--muted-foreground);
}

.bookclub-product-panel .bookclub-title-md {
  color: var(--foreground);
}

.bookclub-product-panel .badge-secondary {
  background: color-mix(in srgb, var(--bc-primary) 10%, var(--muted));
  color: var(--foreground);
  border: 1px solid color-mix(in srgb, var(--bc-primary) 18%, var(--border));
}

html.dark .bookclub-product-panel:not(.bookclub-mood-map) {
  background:
    radial-gradient(ellipse 42% 34% at 12% 8%, color-mix(in srgb, var(--bc-primary) 10%, transparent), transparent 68%),
    var(--card);
}

html.dark .bookclub-deck-stack.bookclub-product-panel,
html.dark .bookclub-rx-slot.bookclub-product-panel,
html.dark .bookclub-blind-slot.bookclub-product-panel,
html.dark .bookclub-vs-arena.bookclub-product-panel {
  background: transparent;
}

/* AI 추천 (/search-agent) — discovery page polish */
html.dark .bookclub-discovery-page .bookclub-discovery-mode-card {
  background: var(--card);
}

html.dark .bookclub-discovery-page .bookclub-discovery-mode-card:hover {
  background: var(--accent);
}

html.dark .bookclub-discovery-page .bookclub-discovery-mode-icon {
  background: color-mix(in srgb, var(--bc-primary) 16%, var(--card));
  border-color: color-mix(in srgb, var(--bc-primary) 28%, var(--border));
}

html.dark .bookclub-discovery-page .bookclub-deck-mood-chip.is-selected {
  background: color-mix(in srgb, var(--bc-primary) 10%, var(--card));
}

html.dark .bookclub-discovery-page .bookclub-deck-mood-chip:hover {
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
}

html.dark .bookclub-discovery-page .bookclub-deck-btn {
  background: var(--bc-surface-dark-elevated);
  color: var(--bc-on-dark);
}

html.dark .bookclub-discovery-page .bookclub-deck-btn--pass:hover:not([disabled]) {
  background: color-mix(in srgb, var(--bc-on-dark) 6%, var(--bc-surface-dark-soft));
}

html.dark .bookclub-discovery-page .bookclub-deck-btn--like {
  color: color-mix(in srgb, var(--bc-primary) 88%, var(--bc-on-dark));
  background: color-mix(in srgb, var(--bc-primary) 10%, var(--bc-surface-dark-elevated));
}

html.dark .bookclub-discovery-page .bookclub-deck-btn--like:hover:not([disabled]) {
  background: color-mix(in srgb, var(--bc-primary) 16%, var(--bc-surface-dark-elevated));
}

html.dark .bookclub-editorial .bookclub-callout-coral :is(.btn-outline, .btn-lg-outline) {
  background: var(--bc-canvas);
  color: var(--bc-ink);
  border-color: transparent;
}

html.dark .bookclub-editorial .bookclub-callout-coral :is(.btn-outline, .btn-lg-outline):hover {
  background: var(--bc-surface-soft);
  color: var(--bc-ink);
}

/* Breadcrumb editorial */
.bookclub-breadcrumb {
  font-size: 0.875rem;
  color: var(--bc-muted);
  margin-bottom: var(--bc-space-lg);
}

.bookclub-breadcrumb a {
  color: var(--bc-primary);
  text-decoration: none;
}

.bookclub-breadcrumb a:hover {
  text-decoration: underline;
}

/* Mobile nav drawer */
@media (max-width: 640px) {
  .bookclub-editorial .bookclub-nav-panel {
    background: var(--background);
    border-left-color: var(--border);
  }

  html.dark .bookclub-editorial .bookclub-nav-panel {
    background: var(--bc-surface-dark-elevated);
  }
}

.bookclub-empty-state {
  margin: var(--bc-space-lg) 0;
}

.bookclub-empty-state .bookclub-content-card {
  text-align: center;
}

/* Legacy page titles — editorial fallback for unmigrated h1 */
.bookclub-editorial #content h1.text-2xl {
  font-family: var(--bc-font-display);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--bc-ink, var(--foreground));
}

html.dark .bookclub-editorial #content h1.text-2xl,
.dark .bookclub-editorial #content h1.text-2xl {
  color: var(--bc-on-dark, var(--foreground));
}

.bookclub-editorial #content h3.text-lg {
  font-family: var(--bc-font-display);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* Feed list */
.bookclub-feed-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bookclub-feed-item {
  padding: var(--bc-space-md) 0;
}

.bookclub-feed-list > .bookclub-feed-item:not(:last-child) {
  border-bottom: none;
  background-image: var(--bc-sketch-line);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 5px;
}

.bookclub-sketch-divide-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bookclub-sketch-divide-list > :not(:last-child) {
  border-bottom: none;
  background-image: var(--bc-sketch-line);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 5px;
}

.bookclub-feed-item-meta {
  font-size: 0.8125rem;
  color: var(--bc-muted, var(--muted-foreground));
}

/* Activity hub (M15) */
.bookclub-activity-hub .bookclub-activity-main {
  max-width: 100%;
}

/* List-in-card: border shell only — row padding defines inset (avoids xl + lg stack) */
.bookclub-content-card:has(.bookclub-feed-list),
.bookclub-content-card:has(.bookclub-notification-list) {
  padding: 0;
  overflow: hidden;
}

.bookclub-content-card .bookclub-feed-item {
  padding: var(--bc-space-md) var(--bc-space-lg);
}

.bookclub-activity-tabs {
  position: relative;
  z-index: 2;
}

.bookclub-activity-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.bookclub-activity-toolbar .bookclub-feed-filters {
  margin-bottom: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.bookclub-activity-view-toggle {
  flex-shrink: 0;
  margin-left: auto;
}

@media (max-width: 640px) {
  .bookclub-activity-toolbar {
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }

  .bookclub-activity-view-toggle {
    align-self: center;
    margin-left: auto;
  }
}

@media (max-width: 640px) {
  .bookclub-activity-tabs {
    position: sticky;
    top: 0;
    background: var(--bc-surface, var(--background));
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    margin-left: -0.25rem;
    margin-right: -0.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
}

.bookclub-feed-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.125rem;
}

.bookclub-feed-filter {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid var(--bc-hairline-soft, var(--border));
  font-size: 0.8125rem;
  color: var(--bc-muted, var(--muted-foreground));
  background: transparent;
  white-space: nowrap;
}

.bookclub-feed-filter:hover {
  color: var(--foreground);
  border-color: var(--border);
}

.bookclub-feed-filter.is-active {
  color: var(--foreground);
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.bookclub-feed-item-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.bookclub-feed-item-body {
  flex: 1 1 auto;
  min-width: 0;
}

.bookclub-feed-item-action {
  flex-shrink: 0;
  align-self: flex-start;
}

.bookclub-feed-item-title,
.bookclub-feed-item-title-link {
  overflow-wrap: anywhere;
}

.bookclub-feed-item-avatar {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 0.875rem;
}

.bookclub-feed-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.375rem;
  margin-bottom: 0.125rem;
  font-size: 0.75rem;
  line-height: 1.4;
}

.bookclub-feed-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: var(--secondary);
  color: var(--secondary-foreground);
}

.bookclub-feed-item-title {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.45;
  margin: 0 0 0.25rem;
  color: var(--foreground);
}

.bookclub-feed-item-title-link:hover {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bookclub-feed-item-snippet {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--muted-foreground);
  margin: 0;
}

.bookclub-feed-item-actor {
  font-size: inherit;
  font-weight: 500;
  color: var(--foreground);
}

.bookclub-feed-item-sep {
  color: var(--bc-muted, var(--muted-foreground));
}

.bookclub-feed-item-time {
  font-size: inherit;
  color: var(--bc-muted, var(--muted-foreground));
}

@media (max-width: 640px) {
  .bookclub-feed-item-row {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 0.25rem 0.5rem;
    align-items: start;
  }

  .bookclub-feed-item-row:not(:has(.bookclub-feed-item-avatar)) {
    grid-template-columns: minmax(0, 1fr);
  }

  .bookclub-feed-item-avatar {
    grid-column: 1;
    grid-row: 1;
  }

  .bookclub-feed-item-body {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  .bookclub-feed-item-row:not(:has(.bookclub-feed-item-avatar)) .bookclub-feed-item-body {
    grid-column: 1;
  }

  .bookclub-feed-item-action {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0.125rem;
  }

  .bookclub-feed-item-row:not(:has(.bookclub-feed-item-avatar)) .bookclub-feed-item-action {
    grid-column: 1;
  }

  .bookclub-feed-item-action .btn-sm-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
  }
}

/* Chat — dark product panel */
.bookclub-chat-panel {
  background: var(--bc-surface-dark);
  border: none;
  color: var(--bc-on-dark);
}

.bookclub-chat-panel .card-content,
.bookclub-chat-panel [class*="card-content"] {
  background: transparent;
}

.bookclub-chat-panel .bookclub-chat-log {
  color: var(--bc-on-dark-soft);
}

.bookclub-chat-panel .bookclub-empty-inline,
.bookclub-chat-panel .bookclub-empty-state {
  color: var(--bc-on-dark-soft);
}

/* Admin KPI */
.bookclub-admin-kpi-grid .bookclub-admin-stat {
  font-family: var(--bc-font-display);
  font-size: 2.25rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--bc-ink, var(--foreground));
}

.bookclub-admin-stat--sm {
  font-size: 1.75rem;
}

html.dark .bookclub-admin-stat,
.dark .bookclub-admin-stat {
  color: var(--bc-on-dark, var(--foreground));
}

/* Auth & form shells */
.bookclub-auth-shell {
  max-width: 28rem;
  margin: 0 auto;
}

.bookclub-form-shell {
  max-width: 42rem;
  margin: 0 auto;
}

/* Discussion new/edit — poll options toggled via JS (.is-visible on #bookclub-poll-options) */
.bookclub-discussion-form #bookclub-poll-options {
  display: none;
}

.bookclub-discussion-form #bookclub-poll-options.is-visible {
  display: block;
}

.bookclub-poll-option-row__field .field .grid.gap-2,
.bookclub-poll-option-row__field .grid.gap-2 {
  margin-bottom: 0;
}

/* Discussion poll results — horizontal bar chart */
.bookclub-poll-panel {
  display: grid;
  gap: var(--bc-space-md, 1rem);
}

.bookclub-poll-results-card,
.bookclub-poll-vote-card {
  padding: var(--bc-space-lg, 1.25rem);
}

.bookclub-poll-results-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bc-space-sm, 0.5rem);
  margin-bottom: var(--bc-space-md, 1rem);
}

.bookclub-poll-results {
  display: grid;
  gap: var(--bc-space-md, 1rem);
}

.bookclub-poll-result-row {
  display: grid;
  gap: 0.5rem;
}

.bookclub-poll-result-row__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bc-space-md, 1rem);
}

.bookclub-poll-result-row__label-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.bookclub-poll-result-row__label {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
}

.bookclub-poll-result-row__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--bc-primary, var(--primary));
  background: color-mix(in srgb, var(--bc-primary, var(--primary)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--bc-primary, var(--primary)) 28%, transparent);
}

.bookclub-poll-result-row__stats {
  flex-shrink: 0;
  font-size: 0.8125rem;
  color: var(--color-muted-foreground, var(--muted-foreground));
  font-variant-numeric: tabular-nums;
}

.bookclub-poll-result-row__track {
  position: relative;
  height: 0.75rem;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--color-muted, var(--muted)) 88%, var(--color-border, var(--border)));
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--foreground) 6%, transparent);
}

.bookclub-poll-result-row__fill {
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--bc-primary, var(--primary)) 88%, #fff),
    var(--bc-primary, var(--primary))
  );
  box-shadow: 0 1px 2px color-mix(in srgb, var(--bc-primary, var(--primary)) 35%, transparent);
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.bookclub-poll-result-row--yours .bookclub-poll-result-row__fill {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--bc-primary, var(--primary)) 75%, #000),
    color-mix(in srgb, var(--bc-primary, var(--primary)) 95%, #000)
  );
}

.bookclub-poll-result-row--yours .bookclub-poll-result-row__track {
  box-shadow:
    inset 0 1px 2px color-mix(in srgb, var(--foreground) 6%, transparent),
    0 0 0 1px color-mix(in srgb, var(--bc-primary, var(--primary)) 22%, transparent);
}

.bookclub-poll-results-empty {
  padding-top: 0.25rem;
}

.bookclub-poll-results-card__vote-trigger {
  margin-top: var(--bc-space-md, 1rem);
  padding-top: var(--bc-space-md, 1rem);
  border-top: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.bookclub-poll-vote-card[hidden] {
  display: none !important;
}

.bookclub-poll-vote-card__title {
  margin: 0 0 var(--bc-space-md, 1rem);
  font-size: 0.9375rem;
  font-weight: 600;
}

.bookclub-poll-vote-options {
  display: grid;
  gap: 0.5rem;
}

.bookclub-poll-vote-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-md, 0.5rem);
  background: var(--color-card, var(--card));
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.bookclub-poll-vote-option:hover {
  border-color: color-mix(in srgb, var(--bc-primary, var(--primary)) 35%, var(--color-border, var(--border)));
  background: color-mix(in srgb, var(--bc-primary, var(--primary)) 4%, var(--color-card, var(--card)));
}

.bookclub-poll-vote-option--selected {
  border-color: color-mix(in srgb, var(--bc-primary, var(--primary)) 45%, var(--color-border, var(--border)));
  background: color-mix(in srgb, var(--bc-primary, var(--primary)) 8%, var(--color-card, var(--card)));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bc-primary, var(--primary)) 18%, transparent);
}

.bookclub-poll-vote-option__input {
  flex-shrink: 0;
  margin: 0;
}

.bookclub-poll-vote-option__label {
  font-size: 0.9375rem;
  line-height: 1.4;
}

.bookclub-poll-vote-card__actions {
  padding-top: var(--bc-space-md, 1rem);
}

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

/* Admin book create/edit — full content width, cover sidebar */
.bookclub-admin-book-form {
  max-width: var(--bc-max-width, 75rem);
  width: 100%;
  margin: 0 auto;
  padding: var(--bc-space-lg);
}

@media (min-width: 768px) {
  .bookclub-admin-book-form {
    padding: var(--bc-space-xl);
  }
}

.bookclub-admin-book-form__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bc-space-md);
  margin-bottom: var(--bc-space-lg);
}

.bookclub-admin-book-form__header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bc-space-sm);
  align-items: center;
}

.bookclub-admin-book-form__layout {
  display: grid;
  gap: var(--bc-space-xl);
  align-items: start;
}

@media (min-width: 960px) {
  .bookclub-admin-book-form__layout {
    grid-template-columns: minmax(11rem, 14rem) minmax(0, 1fr);
    gap: var(--bc-space-xxl);
  }
}

@media (min-width: 1200px) {
  .bookclub-admin-book-form__layout {
    grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
  }
}

.bookclub-admin-book-form__cover {
  display: flex;
  flex-direction: column;
  gap: var(--bc-space-sm);
}

@media (min-width: 960px) {
  .bookclub-admin-book-form__cover {
    position: sticky;
    top: calc(var(--bc-space-lg) + 3.5rem);
  }
}

.bookclub-admin-book-form__cover-frame {
  width: 100%;
  aspect-ratio: 2 / 3;
  max-height: 22rem;
  border-radius: var(--bc-radius-md);
  border: 1px solid var(--bc-hairline, var(--border));
  background: var(--bc-surface-soft, var(--muted));
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bookclub-admin-book-form__cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bookclub-admin-book-form__cover-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 10rem;
  color: var(--muted-foreground);
  font-size: 0.875rem;
}

.bookclub-admin-book-form__cover-label {
  font-size: 0.875rem;
  font-weight: 500;
}

.bookclub-admin-book-form__hint {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  line-height: 1.45;
}

.bookclub-admin-book-form__fields {
  display: flex;
  flex-direction: column;
  gap: var(--bc-space-lg);
  min-width: 0;
}

.bookclub-admin-book-form__grid {
  display: grid;
  gap: var(--bc-space-md);
}

.bookclub-admin-book-form__grid--primary {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .bookclub-admin-book-form__grid--primary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.bookclub-admin-book-form__grid--isbn {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .bookclub-admin-book-form__grid--isbn {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: start;
  }
}

.bookclub-admin-book-form__grid--meta {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .bookclub-admin-book-form__grid--meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.bookclub-admin-book-form__description trix-editor.bookclub-trix-editor {
  display: block;
  min-height: 14rem;
  border: 1px solid var(--bc-hairline, var(--border));
  border-radius: var(--bc-radius-md, 0.375rem);
  background: var(--background);
}

html.dark .bookclub-admin-book-form__description trix-editor.bookclub-trix-editor,
.dark .bookclub-admin-book-form__description trix-editor.bookclub-trix-editor {
  background: var(--bc-surface-soft, var(--muted));
}

.bookclub-admin-book-form__isbn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bc-space-sm);
  align-items: flex-end;
}

.bookclub-admin-book-form__isbn-field {
  flex: 1 1 12rem;
  min-width: 0;
}

.bookclub-admin-book-form__description textarea,
.bookclub-admin-book-form__description .input {
  min-height: 12rem;
}

.bookclub-admin-book-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bc-space-sm);
  align-items: center;
  margin-top: var(--bc-space-xl);
  padding-top: var(--bc-space-lg);
  border-top: 1px solid var(--bc-hairline-soft, var(--border));
}

.bookclub-admin-book-form__actions .ms-auto {
  margin-inline-start: auto;
}

html.dark .bookclub-admin-book-form__cover-frame,
.dark .bookclub-admin-book-form__cover-frame {
  background: var(--bc-surface-dark-soft);
  border-color: color-mix(in srgb, var(--bc-on-dark) 14%, transparent);
}

/* Admin Turbo loading (availability CRUD, ISBN frame, Naver import) */
@keyframes bookclub-turbo-spin {
  to {
    transform: rotate(360deg);
  }
}

.bookclub-turbo-status {
  min-height: 1.25rem;
  margin-top: var(--bc-space-xs);
}

.bookclub-turbo-status[hidden] {
  display: none;
}

.bookclub-btn--loading {
  pointer-events: none;
  opacity: 0.88;
}

.bookclub-btn--loading::before {
  content: "";
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  margin-inline-end: 0.375rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: bookclub-turbo-spin 0.65s linear infinite;
  vertical-align: -0.15em;
}

.is-turbo-loading {
  position: relative;
}

.is-turbo-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: color-mix(in srgb, var(--background) 55%, transparent);
  pointer-events: none;
  z-index: 1;
}

turbo-frame#book_meta_fields {
  display: block;
  position: relative;
}

turbo-frame#book_meta_fields[busy] {
  min-height: 5rem;
}

turbo-frame#book_meta_fields[busy]::before {
  content: "ISBN 정보를 불러오는 중…";
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--bc-space-md);
  font-size: 0.875rem;
  color: var(--muted-foreground);
  background: color-mix(in srgb, var(--background) 72%, transparent);
  border-radius: var(--bc-radius-md, 0.5rem);
}

turbo-frame#book_meta_fields[busy]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.25rem;
  height: 1.25rem;
  margin: -1.75rem 0 0 -0.625rem;
  border: 2px solid var(--muted-foreground);
  border-right-color: transparent;
  border-radius: 50%;
  animation: bookclub-turbo-spin 0.65s linear infinite;
  z-index: 3;
  opacity: 0.85;
}

article[id^="naver_result_"].is-turbo-loading {
  opacity: 0.82;
}

.bookclub-dev-hint {
  border: 1px dashed var(--bc-hairline, var(--border));
  border-radius: var(--bc-radius-md);
  padding: var(--bc-space-md);
  font-size: 0.8125rem;
}

html.dark .bookclub-dev-hint,
.dark .bookclub-dev-hint {
  border-color: color-mix(in srgb, var(--bc-on-dark) 20%, transparent);
}

/* Notifications */
.bookclub-notification-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bookclub-notification-item {
  padding: var(--bc-space-md) var(--bc-space-lg);
  border-bottom: 1px solid var(--bc-hairline-soft, var(--border));
}

.bookclub-notification-item:last-child {
  border-bottom: none;
}

.bookclub-notification-item--unread {
  background: var(--bc-surface-soft, var(--muted));
}

html.dark .bookclub-notification-item--unread,
.dark .bookclub-notification-item--unread {
  background: var(--bc-surface-dark-soft);
}

/* Mobile overflow guard (SC-1) */
.bookclub-editorial #content {
  overflow-x: clip;
  min-width: 0;
}

.bookclub-editorial .container {
  min-width: 0;
}

.bookclub-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* =============================================================================
   Home — Passionfroot-style bento blocks (main/index layout only)
   Sketch borders: site-wide via .bookclub-editorial above.
   ============================================================================= */

.bookclub-main--home-bento {
  padding-top: 1rem;
  padding-bottom: 0;
}

.bookclub-home-bento {
  --bc-bento-radius: 2rem;
  --bc-bento-radius-sm: 1.5rem;
  --bc-bento-cream: #fdfbf7;
  --bc-bento-lavender: #ebe4f8;
  --bc-bento-mint: #dff5ec;
  --bc-bento-sun: #fff6dd;
  --bc-bento-sky: #dceefb;
  margin-inline: -1rem;
  padding-inline: 1rem;
  padding-bottom: 0.5rem;
}

html.dark .bookclub-home-bento {
  --bc-bento-cream: color-mix(in srgb, var(--card) 92%, #fdfbf7);
  --bc-bento-lavender: color-mix(in srgb, #9b8ec4 22%, var(--card));
  --bc-bento-mint: color-mix(in srgb, #6bb89a 18%, var(--card));
  --bc-bento-sun: color-mix(in srgb, #e8c96a 16%, var(--card));
  --bc-bento-sky: color-mix(in srgb, #6aabda 18%, var(--card));
}

.bookclub-bento-hero {
  background: var(--bc-bento-cream);
  border-radius: 2.15rem 1.75rem 2.05rem 1.9rem / 1.85rem 2.1rem 1.7rem 2.2rem;
  padding: 2.5rem 1.75rem;
  margin-bottom: 1.25rem;
  overflow: visible;
}

@media (min-width: 768px) {
  .bookclub-bento-hero {
    padding: 3.5rem 3rem;
  }
}

.bookclub-bento-hero-grid {
  display: grid;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 768px) {
  .bookclub-bento-hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
}

.bookclub-bento-eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.bookclub-bento-headline {
  font-family: var(--bc-font-display);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 1rem;
  color: var(--foreground);
}

.bookclub-bento-lead {
  margin: 0 0 1.75rem;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--muted-foreground);
  max-width: 34rem;
}

.bookclub-bento-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.bookclub-home-bento .bookclub-bento-btn-pill {
  border-radius: 999px 985px 995px 978px / 992px 978px 1002px 988px;
  padding-inline: 1.75rem;
}

.bookclub-bento-hero-panel {
  background: var(--background);
  border-radius: 1.55rem 1.35rem 1.5rem 1.45rem / 1.4rem 1.55rem 1.38rem 1.52rem;
  padding: 1.5rem;
  overflow: visible;
}

html.dark .bookclub-bento-hero-panel {
  background: var(--card);
}

.bookclub-bento-hero-panel .bookclub-hero-discovery-mode {
  border-radius: 1.05rem 0.9rem 1rem 0.95rem / 0.92rem 1.02rem 0.88rem 1.08rem;
  background: var(--bc-bento-cream);
}

html.dark .bookclub-bento-hero-panel .bookclub-hero-discovery-mode {
  background: color-mix(in srgb, var(--background) 88%, var(--card));
}

.bookclub-bento-hero-panel a.bookclub-hero-discovery-mode:hover,
.bookclub-bento-hero-panel a.bookclub-hero-discovery-mode:focus-visible {
  background: var(--background);
  outline: none;
}

.bookclub-bento-hero-panel a.bookclub-hero-discovery-mode:hover::before,
.bookclub-bento-hero-panel a.bookclub-hero-discovery-mode:focus-visible::before {
  border-color: var(--bc-sketch-ink-strong);
}

.bookclub-bento-hero-panel .bookclub-hero-discovery-icon {
  background: var(--background);
  border-radius: 0.65rem 0.55rem 0.6rem 0.58rem / 0.56rem 0.62rem 0.54rem 0.64rem;
}

.bookclub-bento-hero-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
  padding-bottom: 0.85rem;
  border-bottom: none;
  background-image: var(--bc-sketch-line);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 5px;
}

.bookclub-bento-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.bookclub-bento-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2rem 1.75rem;
  text-decoration: none;
  color: inherit;
  overflow: visible;
  transition: transform 180ms ease;
}

.bookclub-bento-row:nth-child(1) {
  border-radius: 1.85rem 2.05rem 1.72rem 1.98rem / 2rem 1.78rem 2.08rem 1.82rem;
}

.bookclub-bento-row:nth-child(2) {
  border-radius: 2rem 1.8rem 1.95rem 2.1rem / 1.88rem 2.05rem 1.75rem 2rem;
}

.bookclub-bento-row:nth-child(3) {
  border-radius: 1.78rem 1.95rem 2.05rem 1.85rem / 1.95rem 1.82rem 2.02rem 1.9rem;
}

@media (max-width: 479px) {
  .bookclub-bento-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .bookclub-bento-block-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .bookclub-bento-doodle--lg {
    align-self: flex-end;
  }
}

@media (min-width: 768px) {
  .bookclub-bento-row {
    padding: 2.5rem 3rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .bookclub-bento-row:hover {
    transform: translateY(-2px) rotate(-0.08deg);
  }

  .bookclub-bento-row:hover::before {
    border-color: var(--bc-sketch-ink-strong);
  }
}

.bookclub-bento-row--mint { background: var(--bc-bento-mint); }
.bookclub-bento-row--lavender { background: var(--bc-bento-lavender); }
.bookclub-bento-row--sun { background: var(--bc-bento-sun); }

.bookclub-bento-block {
  border-radius: 1.95rem 1.82rem 2.08rem 1.88rem / 1.9rem 2rem 1.78rem 2.05rem;
  padding: 2rem 1.75rem;
  margin-bottom: 1.25rem;
  overflow: visible;
}

.bookclub-bento-block--lavender {
  background: var(--bc-bento-lavender);
  border-radius: 2rem 1.85rem 1.92rem 2.05rem / 1.82rem 2.08rem 1.88rem 1.95rem;
}

.bookclub-bento-block--sky {
  background: var(--bc-bento-sky);
  border-radius: 1.88rem 2.02rem 1.95rem 1.8rem / 2.05rem 1.85rem 2rem 1.92rem;
}

.bookclub-bento-block--sun {
  background: var(--bc-bento-sun);
  border-radius: 1.92rem 1.78rem 2.05rem 1.98rem / 1.88rem 2.02rem 1.85rem 2.1rem;
}

@media (min-width: 768px) {
  .bookclub-bento-block {
    padding: 2.75rem 3rem;
  }
}

.bookclub-bento-block--coral {
  background: var(--bc-primary);
  color: var(--bc-on-primary);
  border-radius: 2.05rem 1.9rem 1.85rem 2.1rem / 1.95rem 2.08rem 1.82rem 2rem;
  --bc-sketch-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 6' preserveAspectRatio='none'%3E%3Cpath d='M0,3.1 C38,1.3 76,4.2 118,2.5 S198,4.6 276,2.7 S358,1.6 500,3.3' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' opacity='0.46'/%3E%3C/svg%3E");
}

.bookclub-bento-hero-panel .bookclub-hero-discovery-empty {
  border: none !important;
}

.bookclub-home-bento :is(
  .bookclub-bento-hero,
  .bookclub-bento-row,
  .bookclub-bento-block,
  .bookclub-bento-hero-panel
) > * {
  position: relative;
  z-index: 1;
}

.bookclub-bento-block-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.bookclub-bento-block-inner--center {
  max-width: 48rem;
  margin-inline: auto;
}

.bookclub-bento-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.15rem;
  border-bottom: none;
  background-image: var(--bc-sketch-line);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 5px;
}

.bookclub-bento-title {
  font-family: var(--bc-font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.625rem;
  color: var(--foreground);
}

.bookclub-bento-title--on-coral {
  color: var(--bc-on-primary);
}

.bookclub-bento-text {
  margin: 0 0 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--foreground) 78%, transparent);
  max-width: 36rem;
}

.bookclub-bento-text--on-coral {
  color: color-mix(in srgb, var(--bc-on-primary) 92%, transparent);
}

.bookclub-bento-more {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--foreground);
  text-decoration: none;
  padding: 0.375rem 0.875rem;
  border-radius: 999px 968px 992px 978px / 985px 995px 975px 1005px;
  background: color-mix(in srgb, var(--background) 75%, transparent);
  transition: background-color 150ms ease;
}

a.bookclub-bento-more:hover {
  text-decoration: none;
  background: var(--background);
}

a.bookclub-bento-more:hover::before {
  border-color: var(--bc-sketch-ink-strong);
}

.bookclub-bento-block--coral a.bookclub-bento-more {
  color: var(--bc-on-primary);
  background: color-mix(in srgb, var(--bc-on-primary) 8%, transparent);
}

.bookclub-bento-block--coral a.bookclub-bento-more:hover {
  background: color-mix(in srgb, var(--bc-on-primary) 14%, transparent);
}

.bookclub-bento-row .bookclub-bento-more {
  display: inline-block;
  margin-top: 0.25rem;
  padding: 0.375rem 0.875rem;
}

.bookclub-bento-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.bookclub-bento-ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem;
  border-radius: 999px 972px 988px 981px / 978px 992px 968px 1002px;
  background: color-mix(in srgb, var(--background) 78%, transparent);
  color: var(--foreground);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 150ms ease;
}

.bookclub-bento-ghost-btn:hover {
  background: var(--background);
}

.bookclub-bento-ghost-btn:hover::before {
  border-color: var(--bc-sketch-ink-strong);
}

.bookclub-bento-ghost-btn--on-coral {
  color: var(--bc-on-primary);
  background: color-mix(in srgb, var(--bc-on-primary) 10%, transparent);
}

.bookclub-bento-ghost-btn--on-coral:hover {
  background: color-mix(in srgb, var(--bc-on-primary) 16%, transparent);
}

.bookclub-bento-doodle {
  flex-shrink: 0;
  font-size: 2.75rem;
  line-height: 1;
  opacity: 0.85;
  filter: grayscale(0.15);
  user-select: none;
}

.bookclub-bento-doodle--lg {
  font-size: 3.5rem;
}

.bookclub-bento-doodle--on-coral {
  opacity: 0.9;
  filter: none;
}

.bookclub-bento-book-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem;
}

@media (min-width: 640px) {
  .bookclub-bento-book-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .bookclub-bento-book-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.bookclub-bento-book-card {
  display: block;
  background: var(--background);
  border-radius: 1.22rem 1.08rem 1.18rem 1.12rem / 1.1rem 1.2rem 1.05rem 1.15rem;
  overflow: visible;
  color: var(--foreground);
  transition: transform 180ms ease;
}

html.dark .bookclub-bento-book-card {
  background: var(--card);
}

@media (prefers-reduced-motion: no-preference) {
  .bookclub-bento-book-card:hover {
    transform: translateY(-2px) rotate(0.12deg);
  }

  .bookclub-bento-book-card:hover::before {
    border-color: var(--bc-sketch-ink-strong);
  }
}

.bookclub-bento-book-cover {
  display: block;
  width: 100%;
  height: 9rem;
  object-fit: cover;
  border-radius: 1rem 0.92rem 0 0 / 0.95rem 0.88rem 0 0;
}

.bookclub-bento-book-cover--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 0.75rem;
}

.bookclub-bento-book-meta {
  padding: 0.625rem 0.75rem 0.75rem;
}

.bookclub-bento-book-title {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bookclub-bento-book-author {
  font-size: 0.6875rem;
  color: var(--muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 0.125rem;
}

.bookclub-bento-club-grid {
  display: grid;
  gap: 0.875rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .bookclub-bento-club-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .bookclub-bento-club-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.bookclub-bento-club-card {
  display: block;
  background: var(--background);
  border-radius: 1.18rem 1.05rem 1.22rem 1.1rem / 1.08rem 1.2rem 1.02rem 1.15rem;
  padding: 1.25rem 1.5rem;
  color: var(--foreground);
  overflow: visible;
  transition: transform 180ms ease;
}

html.dark .bookclub-bento-club-card {
  background: var(--card);
}

@media (prefers-reduced-motion: no-preference) {
  .bookclub-bento-club-card:hover {
    transform: translateY(-2px) rotate(-0.1deg);
  }

  .bookclub-bento-club-card:hover::before {
    border-color: var(--bc-sketch-ink-strong);
  }
}

.bookclub-bento-club-name {
  font-family: var(--bc-font-display);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.375rem;
  letter-spacing: -0.02em;
}

/* Home-only footer doodle parade */
.bookclub-home-doodle-parade {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  padding: 1.5rem 1rem 0;
  font-size: 1.75rem;
  line-height: 1;
  background: var(--bc-surface-dark);
  opacity: 1;
}

.bookclub-home-doodle-parade span {
  display: inline-block;
  animation: bookclub-doodle-bob 2.8s ease-in-out infinite;
}

.bookclub-home-doodle-parade span:nth-child(2) { animation-delay: 0.2s; }
.bookclub-home-doodle-parade span:nth-child(3) { animation-delay: 0.4s; }
.bookclub-home-doodle-parade span:nth-child(4) { animation-delay: 0.6s; }
.bookclub-home-doodle-parade span:nth-child(5) { animation-delay: 0.8s; }
.bookclub-home-doodle-parade span:nth-child(6) { animation-delay: 1s; }
.bookclub-home-doodle-parade span:nth-child(7) { animation-delay: 1.2s; }
.bookclub-home-doodle-parade span:nth-child(8) { animation-delay: 1.4s; }

@keyframes bookclub-doodle-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .bookclub-home-doodle-parade span {
    animation: none;
  }
}

.bookclub-footer--home-bento {
  margin-top: 0;
  padding-top: 2.5rem;
}

/* Club hub — current book + reading progress (W1) */
.bookclub-club-current-book__layout {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.bookclub-club-current-book__cover {
  flex-shrink: 0;
}

.bookclub-club-progress__bar {
  height: 0.5rem;
  border-radius: 9999px;
  background: hsl(var(--muted));
  overflow: hidden;
}

.bookclub-club-progress__bar-fill {
  height: 100%;
  border-radius: 9999px;
  background: hsl(var(--primary));
  transition: width 0.3s ease;
}

.bookclub-club-admin-list__item + .bookclub-club-admin-list__item {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: none;
  background-image: var(--bc-sketch-line);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% 5px;
}

.bookclub-club-admin-panel .input[readonly] {
  font-size: 0.875rem;
}

/* Friends page (M20) */
.bookclub-friend-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
}

.bookclub-friend-summary-stat {
  font-size: 0.9375rem;
  color: hsl(var(--muted-foreground));
}

.bookclub-friend-summary-stat strong {
  color: hsl(var(--foreground));
  font-weight: 600;
}

.bookclub-friend-summary-sep {
  color: hsl(var(--muted-foreground));
}

.bookclub-friend-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bookclub-friend-list > .bookclub-friend-row:not(:last-child) {
  border-bottom: none;
  background-image: var(--bc-sketch-line);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 5px;
}

.bookclub-friend-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 0;
}

.bookclub-friend-row-main {
  flex: 1 1 14rem;
  min-width: 0;
}

.bookclub-friend-identity {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: inherit;
}

.bookclub-friend-identity:hover .bookclub-friend-name {
  color: hsl(var(--primary));
}

.bookclub-friend-identity-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.bookclub-friend-name {
  font-weight: 600;
  line-height: 1.3;
}

.bookclub-friend-meta {
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
}

.bookclub-friend-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.bookclub-friend-mini-feed {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}

.bookclub-friend-mini-feed-link {
  color: hsl(var(--foreground));
}

.bookclub-friend-mini-feed-time {
  color: hsl(var(--muted-foreground));
}

.bookclub-friend-sort {
  flex-wrap: wrap;
}

@media (max-width: 639px) {
  .bookclub-friend-row-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* ── Club AI Agents (M21 club-ai-agents) ───────────────────────────── */
.bookclub-agent-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bc-space-md, 0.75rem);
  margin-bottom: var(--bc-space-md, 0.75rem);
}
.bookclub-agent-panel-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.bookclub-agent-panel-controls {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.bookclub-agent-control-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--bc-sketch-line, rgba(0, 0, 0, 0.12));
}
.bookclub-agent-control-group:last-child { border-bottom: 0; }
.bookclub-agent-control-label {
  font-weight: 600;
  margin-right: 0.5rem;
}
.bookclub-agent-summary-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.bookclub-agent-result {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--bc-sketch-line, rgba(0, 0, 0, 0.12));
}
.bookclub-agent-result-heading {
  font-family: var(--bc-font-display, inherit);
  margin: 0 0 0.5rem;
}
.bookclub-agent-question-list,
.bookclub-agent-suggestion-list {
  margin: 0;
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.bookclub-agent-suggestion-list { list-style: none; padding-left: 0; }
.bookclub-agent-suggestion-title { font-weight: 600; }
.bookclub-agent-suggestion-author { color: var(--bc-muted, #6b7280); margin-left: 0.4rem; }

.bookclub-agent-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bookclub-agent-list-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 0;
  border-bottom: none;
}
.bookclub-agent-list > .bookclub-agent-list-row:not(:last-child) {
  background-image: var(--bc-sketch-line);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 5px;
}
.bookclub-agent-list-row:first-child { padding-top: 0; }
.bookclub-agent-list-persona { flex: 1 1 12rem; font-weight: 600; }

.bookclub-agent-thread {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.bookclub-agent-bubble {
  max-width: 80%;
  padding: 0.6rem 0.85rem;
  border-radius: var(--bc-radius-md, 0.75rem);
  border: 1px solid var(--bc-sketch-line, rgba(0, 0, 0, 0.12));
}
.bookclub-agent-bubble-user {
  align-self: flex-end;
  background: var(--bc-bento-sky, #e8f1fb);
}
.bookclub-agent-bubble-assistant {
  align-self: flex-start;
  background: var(--bc-bento-cream, #faf6ee);
}
.bookclub-agent-bubble-role {
  display: block;
  font-size: 0.75rem;
  color: var(--bc-muted, #6b7280);
  margin-bottom: 0.2rem;
}
.bookclub-agent-bubble-text { margin: 0; white-space: pre-wrap; }

.bookclub-agent-composer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem;
}
.bookclub-agent-composer-field {
  flex: 1 1 12rem;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  isolation: isolate;
}
.bookclub-agent-composer-field > .bookclub-input {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  z-index: 1;
  width: 100%;
  flex: none;
  border: none !important;
  border-radius: var(--bc-control-radius);
  box-shadow: none !important;
  background-color: var(--background);
}
.bookclub-agent-composer-field::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  min-width: 0;
  pointer-events: none;
  z-index: 2;
  border-radius: var(--bc-control-radius);
  border: 1.6px solid var(--bc-sketch-ink);
  filter: url(#bookclub-sketch-sm);
}
.bookclub-agent-composer-field:focus-within::before {
  border-color: var(--bc-sketch-ink-strong);
}
.bookclub-agent-composer-field > .bookclub-input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
html.dark .bookclub-agent-composer-field > .bookclub-input {
  background-color: color-mix(in srgb, var(--card) 88%, transparent);
}
.bookclub-agent-form,
.bookclub-agent-forms .bookclub-agent-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.bookclub-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.bookclub-field-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--bc-muted, #6b7280);
}
.bookclub-input,
.bookclub-select,
.bookclub-textarea {
  padding: 0.5rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--foreground) 14%, var(--border));
  border-radius: var(--bc-control-radius, 0.5rem);
  background: var(--background, var(--bc-canvas, #fff));
  color: var(--foreground, var(--bc-ink, #1f2937));
  font: inherit;
  min-height: var(--min-h-touch, 2.5rem);
  box-shadow: none;
}
.bookclub-input:focus-visible,
.bookclub-select:focus-visible,
.bookclub-textarea:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--foreground) 22%, var(--border));
}
html.dark .bookclub-input,
html.dark .bookclub-select,
html.dark .bookclub-textarea {
  background-color: color-mix(in srgb, var(--card) 88%, transparent);
}
.bookclub-input { flex: 1 1 12rem; }
.bookclub-textarea { resize: vertical; min-height: 5rem; }

/* ── Club AI Companion — agent picker cards (M25) ──────────────────── */
.bookclub-agent-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.9rem;
}
.bookclub-agent-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.bookclub-agent-card-title {
  font-family: var(--bc-font-display, inherit);
  margin: 0;
}
.bookclub-agent-card-type { margin: 0; }
.bookclub-agent-card-desc { margin: 0.2rem 0 0; flex: 1 1 auto; }
.bookclub-agent-list-row a.bookclub-agent-list-persona { color: inherit; }

/* ── Agent feedback 👍/👎 (M26) ────────────────────────────────────── */
.bookclub-agent-fb { display: inline-flex; gap: 0.25rem; margin-top: 0.35rem; }
.bookclub-agent-fb-btn {
  border: 1px solid var(--bc-sketch-line, rgba(0,0,0,0.15));
  background: var(--bc-canvas, #fff);
  border-radius: var(--bc-control-radius, 0.5rem);
  padding: 0.1rem 0.4rem;
  font-size: 0.9rem;
  line-height: 1.2;
  cursor: pointer;
  opacity: 0.7;
}
.bookclub-agent-fb-btn:hover { opacity: 1; }
.bookclub-agent-fb-btn.is-active {
  opacity: 1;
  border-color: var(--bc-primary, #c0392b);
  background: var(--bc-bento-cream, #faf6ee);
}

/* book-detail-ai-ux-perf §5.5 — loading skeleton for the lazy AI recommend frame. */
.bookclub-skeleton-card {
  pointer-events: none;
}
.bookclub-skeleton-line {
  height: 0.85rem;
  margin: 0.4rem 0;
  border-radius: 0.3rem;
  background: var(--bc-bento-cream, #faf6ee);
  background-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.04) 25%,
    rgba(0, 0, 0, 0.08) 37%,
    rgba(0, 0, 0, 0.04) 63%
  );
  background-size: 400% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .bookclub-skeleton-line {
    animation: bookclub-skeleton-shimmer 1.4s ease infinite;
  }
}
@keyframes bookclub-skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}