/* SnatchleLife localhost prototype — mobile-first cards, large tap targets. */

:root {
  --bg: #f4f4f4;
  --card: #ffffff;
  --ink: #1c1c1c;
  --muted: #5f6368;
  --accent: #1a73e8;
  --accent-strong: #174ea6;
  --accent-ink: #ffffff;
  --border: #d9d9d9;
  --action-bg: #fef7e6;
  --action-border: #e6a23c;
  --urgent: #c5221f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.45;
}

header {
  position: sticky;
  top: 0;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

h1 { font-size: 20px; margin: 0; }
h2 { font-size: 14px; margin: 0 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 700; }

main {
  max-width: 480px;
  margin: 0 auto;
  /* No top padding: the first section's own 24px margin already sets the gap below the header,
     so the space above the carousel matches the margins between the other stacked sections
     (which carry no main top padding). Had it been 12px, the top gap would run ~10px larger. */
  padding: 0 16px 32px;
}

section { margin-top: 24px; }

/* The status live region. Collapses to nothing when empty so it doesn't reserve a tall
   permanent slot above the carousel — and the base rule must zero the margin too, otherwise the
   empty <p> still carries the UA default 1em (16px) top/bottom margins even at zero height
   (measured residual gap above the carousel). It only takes space once there's a message. */
.status { color: var(--muted); min-height: 0; margin: 0; }
.status:not(:empty) { margin: 4px 0 12px; }

/* ---- check-in carousel (one-at-a-time) ---- */

/* Compact single-line nav at the top of each card, inside its border: ← at the far-left, "N of M"
   centered, → at the far-right — spread across the full width so the arrows are easy to tap
   accurately (thumb reaches the corners) while staying a single slim line. Content sits below,
   separated by a thin border. */
.carousel-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 2px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.carousel-arrow {
  font-size: 16px;
  line-height: 1;
  min-width: 0;
  min-height: 0; /* override the global button min-height so the arrows don't inflate the line */
  padding: 2px 6px;
  border: none;
  background: none;
  color: var(--muted);
}

.carousel-progress {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* ---- 1. Highest-leverage action ---- */

.action-block {
  background: var(--action-bg);
  border: 2px solid var(--action-border);
  border-radius: 12px;
  padding: 16px;
  margin-top: 20px;
}

.action-kicker {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #8a5a00;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.action-text {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
  color: #1a1a1a;
}

/* Inline "Why this matters": reasoning + runner-up collapse behind the banner. */
.action-reason {
  margin-top: 10px;
  border-top: 1px dashed var(--action-border);
  padding-top: 8px;
}

.action-reason[hidden] { display: none; }

.action-reason summary {
  font-size: 13px;
  font-weight: 700;
  color: #8a5a00;
  cursor: pointer;
  list-style: none;
  padding: 6px 0;
}

.action-reason summary::-webkit-details-marker { display: none; }

.action-reason .action-reason-body {
  font-size: 14px;
  line-height: 1.5;
  color: #1a1a1a;
  margin-top: 4px;
}

.action-reason .action-reason-body p { margin: 0 0 8px; }

/* ---- cards ---- */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
}

.request-text { font-size: 15px; font-weight: 600; margin: 0 0 6px; }
.muted { color: var(--muted); font-size: 13px; margin: 0 0 8px; }

label { display: block; font-size: 15px; font-weight: 600; margin-bottom: 6px; }

textarea {
  width: 100%;
  font: inherit;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  resize: vertical;
}

.freeform {
  width: 100%;
  font: inherit;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  resize: vertical;
}

/* ---- phone pairing: the one-time token field ---- */

#pair-token {
  width: 100%;
  font: inherit;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

button {
  font: inherit;
  min-height: 44px;
  min-width: 44px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 0.08s ease, filter 0.08s ease, background-color 0.12s ease;
}

/* ---- 4. Pressed feedback: every tappable visibly confirms the tap ---- */

button:active,
.chip:active,
summary:active,
.type-instead:active {
  transform: scale(0.96);
  filter: brightness(0.92);
}

.chip {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 0.08s ease, filter 0.08s ease, background-color 0.12s ease;
}

summary {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.type-instead {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* A focused outline for keyboard users only (moused/touch taps keep the composited state). */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* ---- chips (item 4 + item 7) ---- */

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 4px;
}

.chip {
  font: inherit;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}

.chip.chip-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* Persistent single-select on the recommendation outcome buttons: the tapped choice stays
   filled (dark accent + inner ring) until the card re-renders after the write. Distinct
   from the momentary :active press effect. */
.card.question .outcome.selected {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--accent-ink);
  box-shadow: inset 0 0 0 2px #aecbfa;
}

.type-instead {
  display: inline-block;
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
  text-decoration: underline;
  cursor: pointer;
}

/* ---- check-in: per-card submit ---- */

.card-submit {
  font: inherit;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  margin-top: 10px;
  width: 100%;
  transition: transform 0.08s ease, filter 0.08s ease, background-color 0.12s ease;
}

.card-submit.submitting {
  filter: brightness(0.9);
}

/* ---- recommendation: optional freeform ---- */

.recommendation-note {
  margin-top: 10px;
}

#recommendation-submit {
  margin-top: 10px;
}

/* ---- 3. collapsible briefing sections ---- */

.briefing-collapse {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  padding: 8px 12px;
  margin-bottom: 8px;
}

.briefing-collapse summary {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}

.briefing-collapse .collapse-body {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.5;
}

/* briefing body keeps its own inline styles from the renderer; these carry the wrapper-strip */
#briefing h2 {
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  font-size: 15px;
  margin: 14px 0 4px;
  font-weight: 700;
}

#briefing h3 { font-size: 14px; margin: 12px 0 4px; }
#briefing ul, #briefing ol { padding-left: 22px; }
#briefing li { margin-bottom: 6px; }
#briefing p { margin: 0 0 10px; }

.already-seen { display: none; }

footer {
  max-width: 480px;
  margin: 0 auto;
  padding: 8px 16px 24px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

/* ---- p. celebratory submit burst ---- */

/* Celebratory submit burst. The container is a fixed, full-viewport layer (appended to <body> by
   the JS, so the carousel re-render that follows a submit never wipes it mid-flight). Its origin is
   anchored at the submitted card via --ox/--oy, but particles travel across the whole screen. */
.celebrate {
  position: fixed;
  inset: 0;
  z-index: 50; /* above header/cards; fixed, so it escapes any card stacking context */
  pointer-events: none;
  overflow: hidden; /* keep far-travelling particles clipped to the viewport, no scrollbars */
}

.celebrate .star {
  position: absolute;
  left: var(--ox, 50%);
  top: var(--oy, 50%);
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  opacity: 0;
  animation: star-burst 0.25s ease-out forwards;
}

/* --dx / --dy are set inline per star by the JS for a randomized outward direction. */
@keyframes star-burst {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0.6); }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.1);
  }
}