/* public/src/css/frontcards.css
   THE THREE SMALL CARDS, AND THE CALENDAR STRIP (Task 6b).

   Layout only. cards.css owns the container, the heading rule, and the LIVE
   badge - nothing here redefines .card, .card-hd or .card-body; it only
   arranges what frontcards.js puts inside them and lays the row and the
   strip out on the page.

   Every colour below is one of the pairs already measured in
   test/contrast.js: ink/panel, ink-dim/panel, signal/panel, on-signal/signal.
   No new pair is introduced anywhere in this file - see DESIGN.md's "never
   lower a floor" rule; the simplest way to honour it is to not need a new
   row in the first place. */

/* ── the row of three ──
   .card + .card's default stacking margin (cards.css) is switched off here,
   the same way hero.css switches it off inside .front's own grid - left on,
   it pushes the second and third card down under the first instead of
   letting the grid gap alone control the spacing. */
.cardrow{
  display:grid;gap:1.25rem;margin:2rem 0 0;
}
.cardrow .card{margin-top:0}
.cardrow .card-body{display:flex;flex-direction:column;gap:.6rem}

@media (min-width:700px){
  /* Same breakpoint as .teasers (sections.css) - the row of three below the
     row of three teasers reads as one system rather than two. */
  .cardrow{grid-template-columns:repeat(3,1fr);gap:1.5rem}
}

/* Never below 100px (CLAUDE.md) - these are small decorative art, not the
   mascot, but the same floor is a safe one to hold everywhere on the site. */
.fact-art,.sat-art{width:4rem;margin:0 auto .2rem;display:block}

.fact-body,.sat-name{color:var(--ink)}
.sat-name{font-family:var(--f-data);font-weight:500;letter-spacing:.02em}

.sat-kind,.sat-note{
  font-family:var(--f-data);font-size:var(--step--1);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-dim);margin:0;
}

/* The two honest silences - no catalogue, nothing to show. Deliberately not
   set at any special size: a big stand-in where content belongs reads as
   content, the same reasoning hero.css's own .above-wait carries. */
.fact-wait,.sat-wait{
  font-family:var(--f-data);font-size:var(--step--1);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-dim);margin:0;
}

.fact-again{
  align-self:flex-start;margin-top:.2rem;
  font-family:var(--f-data);font-size:var(--step--1);font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  background:transparent;color:var(--signal);
  border:1px solid var(--edge-strong);border-radius:999px;
  padding:.45rem .9rem;cursor:pointer;
  transition:filter .15s ease;
}
.fact-again:hover{filter:brightness(1.15)}

/* ── sightings ── */
.sight-row{
  display:flex;align-items:center;flex-wrap:wrap;gap:.35rem .6rem;
  font-family:var(--f-data);font-size:var(--step--1);
  color:var(--ink);margin:0;
}
.sight-what{overflow-wrap:anywhere}
.sight-when{color:var(--ink-dim);white-space:nowrap}
.sight-pill{
  margin-left:auto;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--signal);border:1px solid var(--edge-strong);border-radius:999px;
  padding:.15rem .55rem;white-space:nowrap;
}
/* The three real outcomes read as three different colours, not one. All are
   already-measured "class as text" pairs on --panel (test/contrast.js), so
   no new row is needed: --sky for a report matched to a catalogued object
   (the same token that names an ordinary payload - a boring, explained
   answer), --rose for one nothing explained (the same token debris and
   unknown contacts already wear), --ink-dim for a report not yet processed
   (nothing has happened, so nothing is lit). Without this, frontcards.js's
   three sight-pill--* modifiers rendered identically. */
.sight-pill--matched{color:var(--sky)}
.sight-pill--unexplained{color:var(--rose)}
.sight-pill--pending{color:var(--ink-dim)}
.sight-empty{color:var(--ink-dim)}

.sight-report{
  align-self:flex-start;margin-top:.2rem;display:inline-block;
  font-family:var(--f-data);font-size:var(--step--1);font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  background:var(--signal);color:var(--on-signal);
  border:1px solid var(--signal);border-radius:999px;
  padding:.5rem 1rem;
  transition:filter .15s ease;
}
.sight-report:hover{filter:brightness(1.08)}

/* ── the calendar strip ──
   One full-width card (its outer element is a static #remind stub carrying
   class="card", same pattern as #above) laid out as a horizontal band
   rather than the vertical card-hd/card-body stack the row above uses -
   the mockup's strip had the same full-bleed weight as the hero band under
   it, and this is what gives the replacement the same weight.

   The strip states its own top gap, and that is not belt-and-braces - it is
   the only thing holding it. cards.css's `.card + .card{margin-top:1.25rem}`
   cannot reach it: .remind's previous sibling is .cardrow, a grid div, not a
   .card, so the adjacent-sibling selector never matches. Above 56rem the
   .front grid's own 1.5rem row-gap was quietly covering for that; below it
   there was NO gap at all, the strip's 1px --edge border met the border of
   the card above, both sets of rounded corners pinched into a seam, and the
   pair read as one merged object. 1.5rem is the grid's row-gap restated, so
   the gap is now the same on both sides of the breakpoint rather than
   appearing at 896px. The grid zeroes it again below, or margin and row-gap
   would stack to 3rem there. Fixed here rather than by widening the general
   rule in cards.css - that rule is correct, and this is one page's markup. */
.remind{margin-top:1.5rem}

.remind-in{
  display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;
}
.remind-art{width:4.5rem;flex:0 0 auto}
.remind-copy{flex:1 1 16rem;min-width:0}
.remind-body{color:var(--ink-dim);margin:.35rem 0 .8rem;max-width:var(--measure)}

/* Disabled, and looks it - ink-dim on panel (already measured, 6.80:1),
   never the raised panel-lift surface, which has no measured text pair. */
.remind-cta{
  font-family:var(--f-data);font-size:var(--step--1);font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  background:var(--panel);color:var(--ink-dim);
  border:1px solid var(--edge);border-radius:999px;
  padding:.6rem 1.1rem;cursor:not-allowed;
}

/* ── full width inside the front page's own two-column grid (hero.css) ──
   .lead and .teasers already span both columns there; the row of three and
   the strip join them rather than getting squeezed into the narrow first
   column. */
@media (min-width:56rem){
  .front > .cardrow,
  .front > .remind{grid-column:1/-1}
  /* The grid's row-gap supplies the strip's gap here. Its own margin would
     add to that rather than replace it, so it is switched off - the same
     move .cardrow .card makes above, and the reason the gap measures 24px
     on both sides of this breakpoint instead of 24 below and 48 above. */
  .front > .remind{margin-top:0}
}