/**
 * assets/style.css
 * Implements: §1 (vanilla CSS, no framework). Spec explicitly says to use
 * "plain, unfussy defaults" for anything cosmetic — this is that.
 */

/* Household add-on (not in original spec): display font for headers only
   (app title, swipe card option names) - body text stays on the system
   font stack above for readability. Abril Fatface, SIL Open Font License
   1.1 (see assets/fonts/abril-fatface-LICENSE.txt) - free for any use,
   no attribution required. Self-hosted, single file, no CDN dependency.
   Only one weight exists (400/regular) - that's the whole family, not a
   subset choice. */
@font-face {
  font-family: 'Abril Fatface';
  src: url('fonts/abril-fatface-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* show fallback serif immediately, swap in once loaded - avoids a blank-text flash on slow connections */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #faf7f2;
  color: #2a2a2a;
  min-height: 100vh;
}

.screen {
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 16px 80px;
}

.screen.centered {
  text-align: center;
  padding-top: 80px;
}

h1 {
  font-family: 'Abril Fatface', Georgia, serif;
  font-size: 1.8rem;
  font-weight: 400; /* the font only has one weight - "bold" would just fake-bold in-browser and look muddy */
  margin-bottom: 16px;
}

p.loading { text-align: center; padding-top: 80px; color: #888; }

/* --- buttons & links ---------------------------------------------------- */

.primary-btn {
  display: block;
  width: 100%;
  padding: 14px;
  margin: 16px 0 8px;
  background: #d9534f;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.primary-btn:active { background: #c9302c; }

.link-btn {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: #6b6b6b;
  text-decoration: underline;
  font-size: 0.9rem;
  padding: 10px 0;
  cursor: pointer;
  text-align: center;
}

a.link-btn { text-decoration: underline; }

.error { color: #c9302c; min-height: 1.2em; }

/* --- setup screen -------------------------------------------------------- */

fieldset {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
}

legend { font-weight: 600; padding: 0 6px; }

.roster-row {
  display: block;
  padding: 8px 0;
}

.tag-filter-row {
  display: block;
  padding: 6px 0;
  font-size: 0.9rem;
  color: #555;
}

/* Mode picker: real radio inputs, visually styled as push buttons. Kept as
   radios (not JS-managed buttons) so app.js's existing
   `input[name="mode"]:checked` read on submit needed zero changes -
   this is styling only. */
.mode-buttons {
  display: flex;
  gap: 8px;
}

.mode-btn {
  position: relative;
  flex: 1;
  display: block;
  padding: 0;
}

.mode-btn input[type="radio"] {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.mode-btn span {
  display: block;
  padding: 12px 4px;
  border: 1px solid #ddd;
  border-radius: 8px;
  text-align: center;
  font-weight: 600;
  color: #2a2a2a;
  background: #fff;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.mode-btn:has(input:checked) span {
  background: #d9534f;
  border-color: #d9534f;
  color: #fff;
}

.mode-btn:has(input:focus-visible) span {
  outline: 2px solid #2a2a2a;
  outline-offset: 2px;
}

/* --- participant / status lists ------------------------------------------ */

.participant-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.participant-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
}

.participant-list .status {
  font-size: 0.85rem;
  color: #888;
  text-transform: capitalize;
}

.participant-done .status { color: #3c763d; }
.participant-bailed .status { color: #999; font-style: italic; }

/* --- swipe screen --------------------------------------------------------- */

.swipe-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 12px;
}

.card-stack {
  position: relative;
  width: 100%;
  max-width: 340px;
  height: 420px;
  margin: 20px auto;
}

.swipe-card {
  position: absolute;
  inset: 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  touch-action: none;
  user-select: none;
  cursor: grab;
}

.swipe-card h2 { font-family: 'Abril Fatface', Georgia, serif; font-weight: 400; font-size: 1.6rem; margin: 0 0 8px; }
.swipe-card .category { color: #888; margin: 4px 0; }
.swipe-card .price { color: #888; margin: 4px 0; font-weight: 600; }
.swipe-card .tags { color: #b06a2c; font-size: 0.85rem; margin: 4px 0; }
.swipe-card .notes { margin-top: 16px; font-style: italic; color: #666; }

.swipe-card.drag-right { box-shadow: 0 0 0 4px #5cb85c inset; }
.swipe-card.drag-left { box-shadow: 0 0 0 4px #d9534f inset; }

.deck-empty { color: #888; text-align: center; margin-top: 80px; }

.swipe-controls { width: 100%; max-width: 340px; }

/* --- results --------------------------------------------------------------- */

.match-list { list-style: none; padding: 0; }
.match-list li { margin-bottom: 10px; }

.pick-btn {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #d9534f;
  background: #fff;
  color: #d9534f;
  font-weight: 600;
  cursor: pointer;
}

.likes-list { list-style: none; padding: 0; }
.likes-list li { padding: 8px 0; border-bottom: 1px solid #eee; }

.browse-options { list-style: none; padding: 0; }
.browse-options li { padding: 8px 0; border-bottom: 1px solid #eee; }