/* ============================================
   CAMPAIGNS PAGE STYLES — Parchment & Ink
   Structure/values transcribed from the prototype's Campaign Journal
   component (localhost:8098 .../Campaigns.dc.html) — see task-7-report.md.

   NOTE ON SCOPE: this file is <link>ed on all 6 pages (a pre-existing
   template convention, not introduced by this task), but only campaigns.html
   uses the `.campaign-*`/`.adventure*`/`.milestone*`/`.side-quest*`/`.ey-*`
   vocabulary below — confirmed via repo-wide grep before this rewrite, so
   none of that is shared. The old dark-theme `.page-header`/`.page-subtitle`
   rule family (kept here through Task 10 because media.html still depended
   on it) was removed in Task 11 once media.html got its own `.page-head`
   header, the last page to need it — confirmed via repo-wide grep of all 6
   `*.html` files that neither class is referenced anywhere anymore. */

/* .campaigns-page itself needs no rule: Task 1's .sheet already supplies the
   parchment background/1220px width; the old min-height:100vh + centered
   1000px-max-width container it replaces was a pre-"sheet" layout leftover
   (flagged, unfixed, in task-1-report.md) that no longer serves a purpose. */

/* ============================================
   CAMPAIGNS LIST
   ============================================ */
.campaigns-container { display: flex; flex-direction: column; gap: 14px; padding: 18px 26px 8px; }

.campaign-card {
  position: relative; /* positioning context for .margin-note--ey */
  background: var(--panel); border: 1px solid var(--panel-border);
  box-shadow: inset 0 0 0 3px var(--panel), inset 0 0 0 4px var(--panel-ring);
}

.campaign-header { display: flex; align-items: center; gap: 14px; padding: 14px 18px; cursor: pointer; }
.campaign-header:hover {
  background: #f2e7cc; /* fallback for browsers without color-mix() */
  background: color-mix(in srgb, var(--panel), var(--parchment)); /* ≈ #f2e7cc, prototype's exact hover tint — no single token matches it */
}

.campaign-initial {
  flex: none; width: 44px; height: 44px;
  border: 1px solid var(--gold); background: var(--parchment);
  display: flex; align-items: center; justify-content: center;
  font: 700 22px var(--font-display); color: var(--oxblood);
  box-shadow: inset 0 0 0 2px var(--panel), inset 0 0 0 3px var(--panel-border);
}

.campaign-info { flex: 1; min-width: 0; }
.campaign-title { font: 700 20px var(--font-display); color: var(--oxblood); }
.campaign-meta { font: 500 12px var(--font-body); font-style: italic; color: var(--label); margin-top: 1px; }

.campaign-status-chip {
  flex: none;
  font: 700 10px var(--font-sc); letter-spacing: .12em; white-space: nowrap;
  color: var(--oxblood); background: var(--parchment); border: 1px solid var(--tile-border);
  padding: 3px 12px; border-radius: 10px;
}
.campaign-status-chip.success { color: var(--gold-max); background: var(--oxblood); border-color: var(--gold); }

.campaign-toggle {
  flex: none; width: 18px; text-align: center;
  background: none; border: none; padding: 0; cursor: pointer;
  font: 700 13px var(--font-display); color: var(--gold);
}

.campaign-body { border-top: 1px solid var(--panel-border); padding: 14px 18px 16px; animation: pi-fadeup .25s; }
/* @keyframes pi-fadeup: shared, defined once in css/main.css (T12 dedup) */
@media (prefers-reduced-motion: reduce) { .campaign-body { animation: none; } }

.campaign-summary { font: 500 13.5px/1.55 var(--font-body); color: var(--body-ink); text-wrap: pretty; }

/* Party Members / Featured Quests chip rows (chips reuse main.css's .chip-tag).
   The Featured Quests chips are real <a> links (Party Members' are plain
   <span>s) — main.css's generic `a { color: var(--accent-blue) }` (a
   pre-redesign leftover .chip-tag itself doesn't contest) would otherwise
   render them in the site's old hyperlink blue instead of ink, confirmed via
   computed-style introspection. The prototype's own link color site-wide is
   simply oxblood/red-hover (its base `a{color:#58180d}a:hover{color:#7a2e1d}`),
   so that's what these chips get too. */
.chip-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.chip-row a.chip-tag { color: var(--oxblood); }
.chip-row a.chip-tag:hover { color: var(--red-hover); }
.chip-row-label { font: 700 9px var(--font-sc); letter-spacing: .18em; color: var(--label); }

/* ---- Adventures ---- */
.adventures-list {
  display: flex; flex-direction: column; gap: 12px; margin-top: 14px;
  border-left: 2px solid var(--gold-bright); padding-left: 16px;
}
.adventure-head { display: flex; align-items: baseline; gap: 10px; }
.adventure-title { font: 700 15px var(--font-display); color: var(--ink); }
.adventure-dates { font: 500 11.5px var(--font-body); font-style: italic; color: var(--label); }
.adventure-summary { font: 500 12.5px var(--font-body); color: var(--body-ink); margin-top: 2px; }

.milestones { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.milestone { font: 500 12.5px var(--font-body); color: var(--ink); padding: 3px 10px; }
.milestone-icon { color: var(--oxblood); }
.milestone-name { font-weight: 600; }
.milestone--notable { background: var(--parchment); border-left: 3px solid var(--gold-bright); padding: 5px 10px; }
.milestone--notable .milestone-icon { color: var(--gold); }

/* ---- Early Years: 2-col activity grid + margin note (reuses main.css's .margin-note) ---- */
.early-years-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.early-years-card { border: 1px solid var(--panel-border); background: var(--parchment); padding: 9px 12px; }
.ey-title { font: 700 13.5px var(--font-display); color: var(--ink); }
.ey-dates { font: 500 11.5px var(--font-body); font-style: italic; color: var(--label); }
.ey-desc { font: 500 12.5px var(--font-body); color: var(--ink); margin-top: 2px; }
.margin-note--ey { right: 22px; bottom: -12px; transform: rotate(-2deg); font-size: 16px; }

/* ============================================
   SIDE QUESTS
   ============================================ */
.side-quests { padding: 18px 26px 22px; }
.side-quests-sub { text-align: center; font: 500 12.5px var(--font-body); font-style: italic; color: var(--label); margin: -6px 0 12px; }
.side-quests-hint { display: none; }
.side-quests-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.side-quests-grid > .section-box { padding: 11px 14px; }

.sq-name { font: 700 13.5px var(--font-display); color: var(--oxblood); }
.sq-meta { display: block; font: 700 9px var(--font-sc); letter-spacing: .14em; color: var(--label); margin: 2px 0; }
.sq-desc { font: 500 12.5px/1.4 var(--font-body); color: var(--body-ink); }

/* ============================================
   MOBILE (≤740px)
   Every selector below is deliberately scoped under `.campaigns-page`
   (this page's unique top-level wrapper), even where the bare class is
   already page-specific — because campaigns.css loads on notable/projects/
   contact/media.html too (see the file-top note), any rule touching a class
   name shared with main.css/character-sheet.css chrome (the `.page-head`
   family, `.section-title`, `.margin-note`) would otherwise leak onto those
   pages' own content once a later task gives them the same chrome. Same
   defensive intent as main.css's #mainNavbar-prefix (Task 1).
   ============================================ */
@media (max-width: 740px) {
  .campaigns-page .page-kicker { font-size: 8px; }
  .campaigns-page .page-title { font-size: 25px; }
  .campaigns-page .page-rule { margin-top: 6px; }
  .campaigns-page .page-rule::before, .campaigns-page .page-rule::after { width: 70px; }
  .campaigns-page .page-sub { display: none; } /* absent from frame 1d's mobile header */

  .campaigns-page .campaigns-container { padding: 12px 16px 4px; gap: 8px; }

  /* Header row becomes a 2-row grid: tile/info/chevron on row 1, the status
     chip (always visible, open or closed) dropped to its own row 2 — the
     brief's own "chips fold into the meta line or below per frame" allowance,
     and grid (vs. a flex-wrap + flex-basis:100% trick) is what lets the chip
     size to its own content instead of stretching edge-to-edge. */
  .campaigns-page .campaign-header {
    display: grid; grid-template-columns: 34px 1fr auto;
    grid-template-areas: "tile info chev" "chip chip chip";
    column-gap: 14px; row-gap: 5px; align-items: center;
    padding: 12px 13px;
  }
  .campaigns-page .campaign-initial { grid-area: tile; width: 34px; height: 34px; font-size: 17px; box-shadow: none; }
  .campaigns-page .campaign-info { grid-area: info; }
  .campaigns-page .campaign-toggle { grid-area: chev; }
  .campaigns-page .campaign-status-chip { grid-area: chip; justify-self: start; margin-left: 48px; }
  .campaigns-page .campaign-title { font-size: 15.5px; }
  .campaigns-page .campaign-meta { font-size: 10.5px; }

  .campaigns-page .campaign-body { padding: 10px 13px 12px; }
  .campaigns-page .campaign-summary,
  .campaigns-page .adventure-summary,
  .campaigns-page .milestone,
  .campaigns-page .ey-desc,
  .campaigns-page .sq-desc { font-size: 12px; }

  /* Adventure title + dates collapse onto one inline line (the two spans'
     source-order whitespace becomes a real space once the row stops being
     a flex container). */
  .campaigns-page .adventure-head { display: block; }
  .campaigns-page .adventure-title { font-size: 13px; }
  .campaigns-page .adventure-dates { font-size: 10.5px; }

  .campaigns-page .early-years-grid { gap: 6px; }

  /* Side Quests: 3-col grid becomes a horizontal swipe rail with a right
     fade — same non-scrolling-wrapper-holds-the-fade pattern as
     character-sheet.css's .ability-strip-wrap (Task 6), so the gradient
     stays pinned to the visible edge instead of scrolling away with the
     cards. */
  .campaigns-page .side-quests-rail { position: relative; }
  .campaigns-page .side-quests-grid {
    display: flex; overflow-x: auto; gap: 8px; padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .campaigns-page .side-quests-grid > .section-box { flex: none; width: 200px; }
  .campaigns-page .side-quests-rail::after {
    content: ''; position: absolute; top: 0; bottom: 12px; right: 0; width: 44px;
    background: linear-gradient(90deg, transparent, var(--parchment)); pointer-events: none;
  }
  .campaigns-page .side-quests-hint { display: inline; color: var(--gold); }
}

/* ==========================================================================
   DnD-cv-maker branch: dynamic campaign-card behavior + generated-sheet
   extras. public/js/render.js's renderCampaignsPage() now emits the same
   .campaign-card / .adventure / .milestone markup as the static page and
   swaps the ▸/▾ chevron in JS (like the static page's inline script), so the
   old rotate(180deg) chevron rule and the legacy .adventure-card rules from
   the pre-redesign generator are gone. The :not(.expanded) rule stays as a
   belt-and-braces fallback for class-driven collapsing.
   .milestone-link styles the optional "read more →" links generated sheets
   can carry on encounters/side-quests (the static site links via chip-rows
   instead, so the redesign css has no rule for links inside milestones).
   ========================================================================== */
.campaign-card:not(.expanded) .campaign-body { display: none; }
.campaign-card.expanded .campaign-body { display: block; }
.milestone-link {
  color: var(--gold);
  font-style: italic;
  text-decoration: none;
  white-space: nowrap;
}
.milestone-link:hover { color: var(--oxblood); text-decoration: underline; }