@import "tailwindcss";

:root {
  /* The app's original emerald (Tailwind emerald-600, as in the nav),
     lightening on hover against the dark ground */
  --shelf-accent: #059669;
  --shelf-accent-hover: #10b981;
  --shelf-accent-ink: #ffffff;    /* text on accent surfaces, like the nav buttons */
}

/* =====================================================================
   The Bookshelf — "Cover Wall" design system
   A committed dark-gallery look for the readings shelf and reading show
   pages (independent of the viewer's light/dark preference). Palette:
   ground #171411 · surface #241f19 · line #383025 · ink #e8e2d6 ·
   muted #8f877a · accent var(--shelf-accent) (Neon Emerald) · serif in Georgia.
   ===================================================================== */

@layer components {
  .shelf-ground {
    background: #171411;
    color: #e8e2d6;
    min-height: 100vh;
    width: 100%;
    padding: 3rem 1.25rem 6rem;
    font-family: "Avenir Next", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;
  }
  .shelf-inner { max-width: 72rem; margin: 0 auto; }

  .shelf-eyebrow {
    font-size: 0.7rem; letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--shelf-accent); margin-bottom: 0.9rem;
  }
  .shelf-title {
    font-size: clamp(1.9rem, 5vw, 3.2rem); font-weight: 500;
    letter-spacing: -0.01em; text-wrap: balance; margin-bottom: 1rem;
  }
  .shelf-stats {
    display: flex; flex-wrap: wrap; gap: 1.2rem 2rem;
    font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: #8f877a; border-top: 1px solid #2e2a24; padding-top: 1rem;
    font-variant-numeric: tabular-nums;
  }
  .shelf-stats b { color: #e8e2d6; font-weight: 500; }

  .shelf-notice {
    margin-bottom: 1.5rem; padding: 0.6rem 1rem; border-radius: 4px;
    border: 1px solid color-mix(in srgb, var(--shelf-accent) 30%, #171411); color: var(--shelf-accent); font-size: 0.85rem;
  }

  /* --- typeahead, restyled for the dark ground --- */
  .shelf-search-input {
    width: 16rem; max-width: 100%; border-radius: 6px;
    border: 1px solid #383025; background: #241f19; color: #e8e2d6;
    padding: 0.55rem 0.85rem; font-size: 0.9rem;
  }
  .shelf-search-input::placeholder { color: #6d665b; }
  .shelf-search-input:focus { outline: 2px solid var(--shelf-accent); outline-offset: 1px; border-color: var(--shelf-accent); }
  .shelf-add-btn {
    border-radius: 6px; background: var(--shelf-accent); color: var(--shelf-accent-ink);
    padding: 0.55rem 1.1rem; font-size: 0.9rem; font-weight: 600;
    transition: background 0.15s ease; cursor: pointer;
  }
  .shelf-add-btn:hover { background: var(--shelf-accent-hover); }
  .shelf-results {
    position: absolute; z-index: 10; margin-top: 0.35rem; width: 100%;
    max-height: 17rem; overflow: auto; border-radius: 6px;
    border: 1px solid #383025; background: #241f19;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  }
  .bs-result {
    display: flex; width: 100%; align-items: center; gap: 0.75rem;
    padding: 0.5rem 0.85rem; text-align: left; color: #e8e2d6; cursor: pointer;
  }
  .bs-result:hover, .bs-result:focus { background: #2e2822; outline: none; }
  .bs-result .bs-t { font-size: 0.88rem; color: #e8e2d6; }
  .bs-result .bs-a { font-size: 0.75rem; color: #8f877a; }
  .bs-thumb { width: 2rem; height: 3rem; flex-shrink: 0; border-radius: 2px; object-fit: cover; }
  .bs-thumb-blank {
    width: 2rem; height: 3rem; flex-shrink: 0; border-radius: 2px;
    background: #2e2822; display: flex; align-items: center; justify-content: center;
    color: #6d665b; font-size: 0.7rem;
  }
  .bs-empty { padding: 0.8rem 1rem; font-size: 0.85rem; color: #8f877a; }
  .bs-selected { font-size: 0.8rem; color: var(--shelf-accent); }

  /* --- the wall grid + flip cards --- */
  .shelf-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 2.4rem 1.7rem; margin-top: 2.5rem;
  }
  @media (min-width: 640px) {
    .shelf-grid { grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); }
  }

  .reading-card { display: block; text-decoration: none; }
  .reading-card:focus-visible { outline: 2px solid var(--shelf-accent); outline-offset: 6px; border-radius: 4px; }
  .rc-flip { aspect-ratio: 2 / 3; perspective: 1200px; }
  .rc-inner {
    position: relative; width: 100%; height: 100%;
    transition: transform 0.55s cubic-bezier(0.4, 0.1, 0.2, 1);
    transform-style: preserve-3d;
  }
  /* Hover flips only on devices that can hover; touch uses .is-flipped via Stimulus */
  @media (hover: hover) {
    .reading-card:hover .rc-inner { transform: rotateY(180deg); }
  }
  .reading-card:focus-visible .rc-inner,
  .reading-card.is-flipped .rc-inner { transform: rotateY(180deg); }
  @media (prefers-reduced-motion: reduce) {
    .rc-inner { transition: none; }
  }
  .rc-face {
    position: absolute; inset: 0; backface-visibility: hidden;
    border-radius: 2px; overflow: hidden; background: #241f19;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
  }
  .rc-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .rc-blank {
    display: flex; align-items: center; justify-content: center; height: 100%;
    font-family: Georgia, serif; font-size: 2rem; color: #5c554a;
    border: 1px solid #2e2a24; border-radius: 2px;
  }
  .rc-back {
    transform: rotateY(180deg);
    background: linear-gradient(160deg, #262019 0%, #1d1813 100%);
    border: 1px solid #383025;
    padding: 0.9rem 0.85rem; display: flex; flex-direction: column; gap: 0.45rem;
  }
  .rc-back-title {
    font-family: Georgia, serif; font-size: 0.9rem; font-style: italic;
    line-height: 1.3; color: #ead9b7;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .rc-meta {
    font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: #7c7466; font-variant-numeric: tabular-nums;
  }
  .rc-meta.rc-accent { color: var(--shelf-accent); }
  .rc-note {
    font-family: Georgia, serif; font-size: 0.78rem; line-height: 1.5; color: #b8ac97;
    border-top: 1px solid #383025; padding-top: 0.5rem; margin-top: 0.15rem;
    display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
  }
  .rc-note::before { content: "\201C"; color: var(--shelf-accent); }
  .rc-open {
    margin-top: auto; font-size: 0.62rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--shelf-accent);
  }
  .rc-caption-t {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    padding-top: 0.7rem; font-size: 0.82rem; line-height: 1.35; color: #d6cfc2;
  }
  .rc-caption-m { display: block; margin-top: 0.25rem; font-size: 0.7rem; color: #7c7466; }

  /* --- reading show page --- */
  .rs-grid { display: grid; gap: 2.5rem; margin-top: 2rem; }
  @media (min-width: 768px) {
    .rs-grid { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: 3.5rem; }
  }
  .rs-cover { max-width: 13rem; margin: 0 auto; }
  @media (min-width: 768px) { .rs-cover { max-width: 17rem; margin: 0; } }
  .rs-cover img, .rs-cover .rc-blank {
    width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 3px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6), 0 3px 8px rgba(0, 0, 0, 0.4);
  }
  .rs-back-link {
    font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--shelf-accent); text-decoration: none;
  }
  .rs-back-link:hover { color: var(--shelf-accent-hover); }
  .rs-title {
    font-family: Georgia, serif; font-style: italic; font-weight: 500;
    font-size: clamp(1.6rem, 4vw, 2.5rem); line-height: 1.15;
    color: #ead9b7; text-wrap: balance; margin-bottom: 0.4rem;
  }
  .rs-author { font-size: 1rem; color: #b8ac97; margin-bottom: 1.4rem; }
  .rs-meta-list { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.8rem; }
  .rs-meta {
    font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: #8f877a; font-variant-numeric: tabular-nums;
  }
  .rs-meta.rs-accent { color: var(--shelf-accent); }
  .rs-note {
    font-family: Georgia, serif; font-size: 1.02rem; line-height: 1.7; color: #d6cfc2;
    border-top: 1px solid #2e2a24; padding-top: 1.4rem; max-width: 42rem;
  }
  .rs-note .trix-content a { color: var(--shelf-accent); }
  .rs-note-label {
    font-family: "Avenir Next", ui-sans-serif, sans-serif;
    font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
    color: #7c7466; margin-bottom: 0.7rem;
  }
  .rs-actions { display: flex; gap: 0.8rem; margin-top: 2.2rem; align-items: center; }
  .rs-edit-btn {
    display: inline-block; border: 1px solid var(--shelf-accent); color: var(--shelf-accent);
    border-radius: 6px; padding: 0.45rem 1.1rem; font-size: 0.85rem;
    text-decoration: none; transition: background 0.15s ease, color 0.15s ease;
  }
  .rs-edit-btn:hover { background: var(--shelf-accent); color: var(--shelf-accent-ink); }
  .rs-delete-btn {
    background: none; border: none; cursor: pointer; font-size: 0.8rem;
    color: #8a6055; padding: 0.45rem 0.6rem; border-radius: 6px;
  }
  .rs-delete-btn:hover { color: #c97b6a; background: #241f19; }

  /* --- add/edit reading modal --- */
  .bn-modal-backdrop {
    position: fixed; inset: 0; z-index: 50;
    display: flex; align-items: center; justify-content: center;
    background: rgba(10, 8, 6, 0.72); backdrop-filter: blur(6px);
    padding: 1rem;
  }
  .bn-modal {
    width: min(94vw, 36rem); max-height: 92vh; overflow-y: auto; overflow-x: hidden;
    background: linear-gradient(165deg, #221d16 0%, #1a1510 100%);
    border: 1px solid #383025; border-radius: 12px;
    padding: 1.6rem 1.7rem 1.5rem;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65);
    color: #e8e2d6;
    font-family: "Avenir Next", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;
  }
  .bn-modal-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.1rem; }
  .bn-eyebrow {
    font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--shelf-accent);
  }
  .bn-close {
    background: none; border: none; color: #8f877a; font-size: 1.1rem;
    cursor: pointer; padding: 0.2rem 0.45rem; border-radius: 6px; line-height: 1;
  }
  .bn-close:hover { color: #e8e2d6; background: #2e2822; }

  .bn-bookhead { display: flex; gap: 0.9rem; align-items: center; min-width: 0; }
  .bn-topline {
    display: flex; gap: 1.2rem 1.8rem; justify-content: space-between; align-items: flex-start;
    flex-wrap: wrap; padding-bottom: 1.2rem; margin-bottom: 1.2rem; border-bottom: 1px solid #2e2a24;
  }
  .bn-topline-main { flex: 1 1 15rem; min-width: 0; display: grid; gap: 0.9rem; }
  .bn-topline-date { flex: 0 0 auto; }
  .bn-thumb { width: 3rem; height: 4.5rem; object-fit: cover; border-radius: 2px;
              box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5); flex-shrink: 0; }
  .bn-thumb-blank { width: 3rem; height: 4.5rem; border-radius: 2px; background: #241f19;
                    border: 1px solid #2e2a24; display: flex; align-items: center; justify-content: center;
                    font-family: Georgia, serif; color: #5c554a; flex-shrink: 0; }
  .bn-btitle { font-family: Georgia, serif; font-style: italic; font-size: 1.12rem; color: #ead9b7; line-height: 1.25; }
  .bn-bauthor { font-size: 0.8rem; color: #8f877a; margin-top: 0.2rem; }

  .bn-label {
    display: block; font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: #7c7466; margin-bottom: 0.5rem;
  }
  .bn-input {
    width: 100%; background: #241f19; border: 1px solid #383025; border-radius: 6px;
    color: #e8e2d6; padding: 0.5rem 0.7rem; font-size: 0.9rem;
  }
  .bn-input:focus { outline: 2px solid var(--shelf-accent); outline-offset: 1px; }
  .bn-input-compact { width: auto; }
  .bn-row { display: flex; gap: 0.6rem; }
  .bn-manual-grid { display: grid; gap: 0.9rem; }

  /* note editor (Lexxy) — dark-themed through the gem's own CSS variables,
     scoped to the modal so admin/other contexts keep the default look */
  .bn-note-wrap {
    margin-bottom: 0.4rem; min-width: 0;
    --lexxy-color-canvas: #241f19;
    --lexxy-color-text: #e8e2d6;
    --lexxy-color-text-subtle: #8f877a;
    --lexxy-color-ink: #e8e2d6;
    --lexxy-color-ink-medium: #b8ac97;
    --lexxy-color-ink-light: #8f877a;
    --lexxy-color-ink-lighter: #383025;
    --lexxy-color-ink-lightest: #2e2822;
    --lexxy-color-ink-inverted: #171411;
    --lexxy-color-link: var(--shelf-accent);
    --lexxy-color-selected: color-mix(in srgb, var(--shelf-accent) 20%, transparent);
    --lexxy-color-selected-hover: color-mix(in srgb, var(--shelf-accent) 30%, transparent);
    --lexxy-color-code-bg: #2e2822;
  }
  .bn-note-wrap lexxy-editor {
    border: 1px solid #383025; border-radius: 6px; min-height: 11rem;
    font-family: Georgia, serif; font-size: 0.98rem; line-height: 1.6;
    max-width: 100%;
  }
  .bn-note-wrap lexxy-editor:focus-within { outline: 2px solid var(--shelf-accent); outline-offset: 1px; }
  .bn-note-wrap lexxy-toolbar { flex-wrap: wrap; max-width: 100%; }

  /* footer strip: chip groups on a shared baseline; wraps instead of overflowing */
  .bn-form-footer {
    display: flex; flex-wrap: wrap; gap: 1.4rem 2.6rem;
    border-top: 1px solid #2e2a24; padding-top: 1.3rem; margin-top: 1.3rem;
  }
  .bn-field { display: flex; flex-direction: column; min-width: 0; }
  .bn-field .bn-label { margin-bottom: 0.55rem; }

  /* chips = styled radio labels */
  .bn-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; }
  .bn-chip-radio { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .bn-chip {
    background: #241f19; border: 1px solid #383025; color: #9d968a; border-radius: 999px;
    padding: 0.35rem 0.95rem; font-size: 0.82rem; cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
    user-select: none;
  }
  .bn-chip:hover { border-color: #57604f; }
  .bn-chip-radio:checked + .bn-chip {
    background: var(--shelf-accent); border-color: var(--shelf-accent);
    color: var(--shelf-accent-ink); font-weight: 600;
  }
  .bn-chip-radio:focus-visible + .bn-chip { outline: 2px solid var(--shelf-accent); outline-offset: 2px; }

  .bn-actions { display: flex; justify-content: flex-end; gap: 0.8rem; margin-top: 1.5rem; align-items: center; }
  .bn-cancel { background: none; border: none; color: #8f877a; font-size: 0.85rem; cursor: pointer; padding: 0.5rem 0.6rem; }
  .bn-cancel:hover { color: #b8ac97; }
  .bn-save {
    background: var(--shelf-accent); color: var(--shelf-accent-ink); border: none; border-radius: 6px;
    padding: 0.55rem 1.4rem; font-size: 0.9rem; font-weight: 600; cursor: pointer;
    transition: background 0.15s ease;
  }
  .bn-save:hover { background: var(--shelf-accent-hover); }

  .bn-errors {
    margin-bottom: 1.1rem; padding: 0.7rem 1rem; border-radius: 6px;
    border: 1px solid #6b3a32; background: rgba(107, 58, 50, 0.18); color: #e0a396;
    font-size: 0.85rem;
  }
  .bn-errors ul { list-style: disc; padding-left: 1.1rem; margin: 0.2rem 0 0; }

  /* --- standalone dark pages (auth, profile) --- */
  .bn-card {
    width: 100%; max-width: 26rem; margin: 2.5rem auto 0;
    background: linear-gradient(165deg, #221d16 0%, #1a1510 100%);
    border: 1px solid #383025; border-radius: 12px; padding: 1.8rem;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  }
  .bn-card-title {
    font-family: Georgia, serif; font-style: italic; font-size: 1.5rem;
    color: #ead9b7; margin: 0.2rem 0 0.3rem;
  }
  .bn-card-sub { font-size: 0.85rem; color: #8f877a; margin-bottom: 1.4rem; }
  .bn-stack { display: grid; gap: 1.1rem; }
  .bn-save--full { width: 100%; }
  .bn-link { color: var(--shelf-accent); font-size: 0.85rem; text-decoration: none; }
  .bn-link:hover { color: var(--shelf-accent-hover); text-decoration: underline; }
  .bn-alert {
    margin-bottom: 1.1rem; padding: 0.7rem 1rem; border-radius: 6px;
    border: 1px solid #6b3a32; background: rgba(107, 58, 50, 0.18); color: #e0a396;
    font-size: 0.85rem;
  }
  .bn-def { display: flex; flex-direction: column; gap: 0.25rem; }
  .bn-def-value { color: #e8e2d6; font-size: 1rem; }

  /* toast */
  .bn-toast {
    margin: 0.8rem auto 0; width: fit-content; max-width: 92vw;
    background: #1d1a12; border: 1px solid color-mix(in srgb, var(--shelf-accent) 45%, #171411);
    color: #e8e2d6; border-radius: 8px; padding: 0.65rem 1.2rem; font-size: 0.88rem;
    font-family: "Avenir Next", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  }
  .bn-toast .bn-toast-mark { color: var(--shelf-accent); }
}

/* ---------------------------------------------------------------------
   Lexxy toolbar trim (reading modal only). Deliberately OUTSIDE @layer:
   Lexxy's stylesheet is unlayered, and unlayered CSS always beats layered
   rules — these must meet it on the same footing. Hide every toolbar
   child, then whitelist the six we keep: bullets, italic, strike, bold,
   quote, code block. Hotkeys and markdown shortcuts still work.
   --------------------------------------------------------------------- */
.bn-note-wrap lexxy-toolbar > * { display: none !important; }
.bn-note-wrap lexxy-toolbar > button:is(
  [name="unordered-list"], [name="italic"], [name="strikethrough"],
  [name="bold"], [name="quote"], [name="code"]
) { display: inline-flex !important; }