/*
 * Manuscripts index page styles (and its sibling Folios/Bundles index).
 *
 * Loaded conditionally from manuscripts/index and bundles/index via
 * `<%= stylesheet_link_tag "manuscripts_index" %>` so the rules only ship
 * to the pages that need them. Mirrors the pattern used by
 * manuscript_detail.css for the show page.
 *
 * Conventions:
 *   - All selectors are namespaced under `.mss-*` so this file stays self-
 *     contained and can't accidentally style other surfaces.
 *   - The intention status pills (`.mss-status-*`) are color-paired with
 *     the hero pill variants in manuscript_detail.css. Keep them in sync.
 *
 * The `.mss-*` block originally lived in application.css (lines 114–459 at
 * the time of extraction) — moved here on 2026-04-28 so application.css
 * could shrink to a true cross-cutting stylesheet.
 */

/* ---------------------------------------------------------------------------
 * Tokens — manuscripts page surface + borders.
 *
 * The manuscripts page uses a slightly warmer cream palette than the
 * default querygardens theme (to match the "garden journal" aesthetic in
 * the design), plus a per-story-type badge palette and a small set of
 * status pills.
 * ------------------------------------------------------------------------- */

:root {
  --mss-page-bg: rgba(253, 251, 247, 0.4);
  --mss-card-bg: #FDFBF7;
  --mss-card-border: #C8BFA8;
  --mss-divider: #E5E2DB;
  --mss-heading: #2A2A25;
  --mss-text: #5A5A52;
  --mss-text-muted: #8A8A80;
}

.mss-page {
  background: var(--mss-page-bg);
  /* Extend the cream background all the way to the bottom of the viewport
     even when there are only a few cards, so the page doesn't look like an
     island floating above the tree backdrop.

     64px matches the sticky navbar at the top. Using 100dvh (dynamic viewport
     height) avoids the Safari mobile chrome collapsing/expanding issue. */
  min-height: calc(100dvh - 64px);
}

/* Serif display used for titles + stat numbers */
.mss-serif {
  font-family: 'Instrument Serif', serif;
}

/* Card */
.mss-card {
  position: relative;
  background: var(--mss-card-bg);
  border: 1px solid var(--mss-card-border);
  border-radius: 6px;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

/* Hover feedback — only applies when the card itself is clickable (i.e. it
   contains a stretched-link overlay). Uses :has() so we don't need to add
   a separate class just to opt into the behavior. */
.mss-card:has(.mss-card-overlay-link):hover {
  transform: translate(-1px, -1px);
  border-color: #A89F88;
  box-shadow: 3px 4px 14px -4px rgba(90, 90, 82, 0.15);
}

/* ---------------------------------------------------------------------------
 * Stretched-link pattern for whole-card clickability.
 *
 * Place an <a class="mss-card-overlay-link"> as a direct child of a card
 * and it becomes an invisible overlay that captures clicks across the whole
 * card surface. Nested interactive elements (buttons, other links) must
 * carry `.mss-card-action` to sit above the overlay and remain clickable.
 *
 * Accessibility notes:
 *   - The overlay link carries its own aria-label (set per-instance) so
 *     screen readers announce what the whole-card click does.
 *   - Keyboard users get a visible focus ring on the overlay link (rendered
 *     as a ring around the whole card) because the overlay is a real <a>.
 *   - Nested links/buttons remain tab-focusable in their own right, so
 *     users can still reach secondary actions via the keyboard.
 *   - We don't wrap the entire card in an <a>, which would violate the
 *     HTML spec (no nested interactive content).
 * ------------------------------------------------------------------------- */

.mss-card-overlay-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  /* No visual treatment by default — the whole card is the affordance. */
}

.mss-card-overlay-link:focus-visible {
  outline: 2px solid #2D4A35;
  outline-offset: 2px;
}

/* Anything that needs to remain clickable inside a card with an overlay. */
.mss-card-action {
  position: relative;
  z-index: 2;
}

/* ---------------------------------------------------------------------------
 * Folio card — a variant of .mss-card with stronger visual identity.
 *
 * Folios are collections of manuscripts, so the card treatment leans into a
 * "folder holding papers" metaphor:
 *
 *   1. Warmer cream background (aged manila) distinguishes them from MSS
 *      cards at a glance even when both grids are visible in the same scroll.
 *   2. A thin dark-green accent stripe on the left edge evokes a folder tab.
 *   3. Two offset box-shadows stacked behind the card create the illusion of
 *      papers peeking out underneath — reinforcing that a folio contains
 *      multiple pieces.
 *
 * Implementation notes:
 *   - The stacked shadows need room to breathe, so the grid gap on the folios
 *     page is generous (gap-8 rather than gap-6).
 *   - `box-shadow` is used instead of pseudo-elements so the effect works
 *     cleanly inside a flex child without perturbing flow.
 * ------------------------------------------------------------------------- */

.mss-folio-card {
  position: relative;
  background: #EEF2EA;
  border: 1px solid #BDCDB4;
  border-left: 4px solid #2D4A35;
  border-radius: 6px;
  /* Two stacked "paper" layers peeking out below and slightly to the right.
     The first layer sits 3px down/right, the second 6px down/right, each
     with its own border + fill so the stack reads as three discrete sheets.
     The outermost shadow is a soft ambient drop to ground the whole stack. */
  box-shadow:
    3px 3px 0 0 #E3EADD, 3px 3px 0 1px #BDCDB4,
    6px 6px 0 0 #D7E1D0, 6px 6px 0 1px #BDCDB4,
    8px 10px 16px -4px rgba(71, 90, 74, 0.12);
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.mss-folio-card:hover {
  transform: translate(-1px, -1px);
  box-shadow:
    4px 4px 0 0 #E3EADD, 4px 4px 0 1px #BDCDB4,
    8px 8px 0 0 #D7E1D0, 8px 8px 0 1px #BDCDB4,
    10px 14px 20px -4px rgba(71, 90, 74, 0.16);
}

/* The folder-tab icon next to the folio name, rendered in the same green as
   the accent stripe for visual rhyme. */
.mss-folio-icon {
  color: #2D4A35;
}

/* Generic pill shape shared by type badges and status tags */
.mss-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 11px;
  border-radius: 9999px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
  border: 1px solid transparent;
  font-family: 'DM Sans', sans-serif;
}

/* Story-type badge palette (exact colors from the Pencil design) */
.mss-badge-poetry         { color: #7B6BA5; background: #EDE8F5; border-color: #D4CCE8; }
.mss-badge-picture_book   { color: #9A7B3F; background: #FFF3E6; border-color: #EDDCBE; }
.mss-badge-flash_fiction  { color: #3A7A6D; background: #E6F2F0; border-color: #C2DDD8; }
.mss-badge-novel          { color: #4A5A7A; background: #E8EDF5; border-color: #CCD4E4; }
.mss-badge-short_story    { color: #3A7A6D; background: #E6F2F0; border-color: #C2DDD8; }
.mss-badge-monologue_play { color: #9A7B3F; background: #FFF3E6; border-color: #EDDCBE; }
.mss-badge-concept        { color: #5A5A52; background: #F4F2ED; border-color: #E5E2DB; }
.mss-badge-easy_reader    { color: #9A7B3F; background: #FFF3E6; border-color: #EDDCBE; }
.mss-badge-chapter_book   { color: #4A5A7A; background: #E8EDF5; border-color: #CCD4E4; }
.mss-badge-graphic_novel  { color: #7B6BA5; background: #EDE8F5; border-color: #D4CCE8; }

/*
 * Intention tags (top-right of manuscript card)
 *
 * These are the index-page counterpart to the hero `.md-intention-tag`
 * variants on the manuscript show page. Colors are kept in lockstep with
 * `manuscript_detail.css` so a "Revising" pill on the card and a
 * "Revising" pill in the hero render identically.
 *
 * If you change a color here, change it in manuscript_detail.css too.
 */
.mss-status-revising      { color: #9A7B4F;          background: #FFF8ED; border-color: #E8D5B5; }
.mss-status-ready-to-send { color: #4A7C59;          background: #E8F0EA; border-color: #C5DBC9; }
.mss-status-on-submission { color: #4A6A8A;          background: #EAF0F5; border-color: #C2D4E4; }
.mss-status-resting       { color: #9B9688;          background: #F4F2ED; border-color: #E5E2DB; }
.mss-status-wip           { color: #8B9A6B;          background: #F2F1E6; border-color: #D8D6BE; }

/*
 * Neutral count pill — used by the bundle/folio card to show "3 pieces".
 * Visually similar to .mss-status-resting (warm gray on cream), but kept
 * as its own class so a future palette change to "Resting" doesn't bleed
 * into bundle count badges.
 */
.mss-pill-count           { color: #9B9688;          background: #F4F2ED; border-color: #E5E2DB; }

/*
 * User-tag chips on the manuscript card. Display-only, capped at 3 + "+N
 * more" (see _manuscript.html.erb). Quieter than the story-type badge —
 * dashed outline on transparent ground — so the type still reads as the
 * primary categorization on the card.
 */
.mss-pill--user-tag {
  color: #6B6B5E;
  background: transparent;
  border: 1px dashed #CFCBC0;
  font-weight: 400;
}

/* "Explore Opportunities →" button */
.mss-explore-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 6px;
  border-radius: 5px;
  border: 1px solid var(--mss-divider);
  color: var(--mss-text);
  font-size: 11.5px;
  font-weight: 500;
  font-family: 'DM Sans', sans-serif;
  background: transparent;
  transition: background-color 120ms ease;
}
.mss-explore-btn:hover { background: rgba(0, 0, 0, 0.03); }

/* Primary "Add piece" CTA in the toolbar */
.mss-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 6px;
  background: #2D4A35;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  transition: background-color 120ms ease;
}
.mss-add-btn:hover { background: #3A5D44; }

/* Toolbar input styling (search + filter button + MSS/Folios toggle) */
.mss-toolbar-input,
.mss-toolbar-button {
  background: #FFFFFF;
  border: 1px solid var(--mss-divider);
  border-radius: 6px;
  font-family: 'DM Sans', sans-serif;
  color: var(--mss-text);
  font-size: 13px;
}
.mss-toolbar-input { padding: 8px 12px; }
.mss-toolbar-input::placeholder { color: var(--mss-text-muted); }
.mss-toolbar-button {
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* The <input> inside the search label needs its own reset: DaisyUI's form
 * reset gives all inputs a 1px border that otherwise paints a black line
 * inside our bordered label wrapper. */
.mss-search-input {
  background: transparent;
  border: 0;
  outline: 0;
  padding: 0;
  color: var(--mss-text);
  font-size: 13px;
  width: 100%;
}
.mss-search-input::placeholder { color: var(--mss-text-muted); }
.mss-search-input:focus { outline: 0; box-shadow: none; }

/* Clear (×) button inside the search input */
.mss-search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  background: transparent;
  color: var(--mss-text-muted);
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: background-color 120ms ease, color 120ms ease;
}
.mss-search-clear:hover {
  background: var(--mss-divider);
  color: var(--mss-text);
}
.mss-search-clear[hidden] { display: none; }

/* MSS/Folios segmented toggle */
.mss-toggle {
  display: inline-flex;
  border: 1px solid var(--mss-divider);
  border-radius: 6px;
  overflow: hidden;
  background: #FFFFFF;
}
.mss-toggle a {
  padding: 8px 16px;
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
  color: var(--mss-text);
  font-weight: 400;
}
.mss-toggle a.is-active {
  background: #2D4A35;
  color: #FFFFFF;
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * Semantic color + divider utilities
 *
 * These replace the inline `style="color: var(--mss-*);"` attributes that
 * used to be sprinkled throughout the manuscripts/folios views. Keeping the
 * color tokens as utility classes means ERB is HTML again (not a mini
 * stylesheet) and the tokens themselves live in one place.
 * ------------------------------------------------------------------------- */

.mss-text-heading { color: var(--mss-heading); }
.mss-text-body    { color: var(--mss-text); }
.mss-text-muted   { color: var(--mss-text-muted); }

/* The "forest green" used for stat numbers and the page CTA backgrounds.
   Defined as its own token so it's easy to retune in one place. */
.mss-text-accent  { color: #2D4A35; }

/* Dashboard stat number — serif display numeral used in the stats row. */
.mss-stat-number {
  font-family: 'Instrument Serif', serif;
  font-size: 30px;
  line-height: 1;
  color: #2D4A35;
}

.mss-stat-label {
  font-size: 13px;
  margin-top: 4px;
  color: var(--mss-text-muted);
}

/* Divider border color — thin rule between sections, using the cream token. */
.mss-border-divider { border-color: var(--mss-divider); }

/* The first-line subtitle on a manuscript card — italic, muted serif with a
   slightly roomier line-height than the surrounding text. */
.mss-firstline {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--mss-text-muted);
  line-height: 1.45;
}