/* Reconnect - mobile-first stylesheet.

   Visual identity: "clothesline at dusk". The game itself is a hunt for a
   torn photo half, read off a clothesline strung across the venue - so
   every card reads as a torn print pinned to that line, and the palette is
   warm brass/rose (string lights, ribbon) rather than a generic brand
   purple. Both a paper-toned day variant and an ink-dark evening variant
   are defined (see the prefers-color-scheme block) so the identity holds
   regardless of a guest's phone theme.

   Tested against mobile Chrome and Firefox: no CSS relies on WebKit-only
   prefixes, and every interactive element hits at least a 44px touch
   target. Wide content (the admin table) scrolls in its own container
   instead of the page. */

:root {
  --bg: #f1e7d8;
  --surface: #fffbf3;
  --ink: #241a2e;
  --ink-soft: #6d6072;
  --thread: #b5772f;
  --on-thread: #fff9f0;
  --ribbon: #a23c56;
  --sage: #3f7d57;
  --border: #e6d7bf;
  --radius: 12px;
  --max-width: 640px;

  --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", "Noto Serif", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16101f;
    --surface: #251c33;
    --ink: #f4ecf9;
    --ink-soft: #b3a5c2;
    --thread: #dd9c4d;
    --on-thread: #241608;
    --ribbon: #dd7089;
    --sage: #63b487;
    --border: #392c47;
  }
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
  overflow-x: hidden;
}

.page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.1rem 1rem 3rem;
}

h1 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.6rem;
}

a {
  color: var(--thread);
}

:focus-visible {
  outline: 2px solid var(--thread);
  outline-offset: 2px;
}

.site-home-link {
  margin: 0 0 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.site-home-link a {
  color: var(--ink-soft);
  text-decoration: none;
}

/* Clothesline: a small recurring brand mark - two clothespins on a strung
   line - opening every page, right above its heading. */
.clothesline {
  height: 2px;
  margin: 0.2rem 0 1.4rem;
  position: relative;
  background: repeating-linear-gradient(to right, var(--thread) 0 10px, transparent 0 18px);
  opacity: 0.8;
}

.clothesline::before,
.clothesline::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 9px;
  height: 10px;
  border-radius: 3px 3px 7px 7px;
  background: var(--ribbon);
}

.clothesline::before {
  left: 22%;
}

.clothesline::after {
  left: 71%;
}

/* Card: the site's signature surface - a torn strip of paper, top edge
   deliberately jagged (echoing the game's own "gezackter Schnitt"),
   pinned to whatever it's laid on. Kept to primary content sections only,
   not nested elements, so the torn edge stays a signature rather than
   wallpaper. */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 1.5rem 1.1rem 1.1rem;
  margin: 1.1rem 0;
}

.card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -9px;
  height: 10px;
  background: var(--surface);
  clip-path: polygon(
    0% 100%, 4% 0%, 8% 100%, 12% 0%, 16% 100%, 20% 0%, 24% 100%, 28% 0%,
    32% 100%, 36% 0%, 40% 100%, 44% 0%, 48% 100%, 52% 0%, 56% 100%, 60% 0%,
    64% 100%, 68% 0%, 72% 100%, 76% 0%, 80% 100%, 84% 0%, 88% 100%, 92% 0%,
    96% 100%, 100% 0%, 100% 100%
  );
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--thread);
  border-radius: 999px;
  background: var(--surface);
  color: var(--thread);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.button-primary {
  background: var(--thread);
  border-color: var(--thread);
  color: var(--on-thread);
}

.button-big {
  width: 100%;
  min-height: 54px;
  font-size: 1.1rem;
  font-weight: 700;
}

.button-small {
  min-height: 36px;
  padding: 0.3rem 0.8rem;
  font-size: 0.9rem;
}

.button-danger {
  background: var(--ribbon);
  border-color: var(--ribbon);
  color: var(--on-thread);
}

/* Explainer / home */

.kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ribbon);
  margin: 0 0 0.35rem;
}

.steps {
  list-style: none;
  counter-reset: step;
  padding-left: 0;
  margin: 1.1rem 0;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 2.3rem;
  margin-bottom: 0.9rem;
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.05em;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--thread);
}

/* Form */

.entry-form fieldset {
  border: none;
  padding: 0;
  margin: 0 0 1.2rem;
}

.entry-form fieldset.framed {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1rem 1.2rem;
}

.entry-form legend {
  font-family: var(--font-mono);
  font-size: 1.44rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0;
}

.field-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 1rem 0 0.5rem;
}

.hint {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.field-error {
  color: var(--ribbon);
  font-weight: 600;
  font-size: 0.9rem;
  margin: 0.2rem 0 0.6rem;
}

.tile-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tile {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}

.tile input {
  /* Keep the input in the DOM (for form semantics/accessibility) but let
     the label styling carry the visible state. */
  width: 1rem;
  height: 1rem;
  border: none;
  accent-color: var(--thread);
}

.tile:has(input:checked),
.tile.is-selected {
  background: color-mix(in srgb, var(--thread) 14%, var(--surface));
}

.tile[hidden] {
  display: none;
}

.tile-cut {
  /* A cut tile shows a whole torn-edge swatch, not a short label - the
     pill shape from .tile would stretch into an oval here, so it gets its
     own (still rounded, but modest) corners instead. */
  flex-direction: column;
  min-width: 6.5rem;
  text-align: center;
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
}

.cut-icon {
  width: 56px;
  height: 28px;
}

.cut-icon-big {
  width: 100%;
  max-width: 220px;
  height: auto;
  display: block;
  margin: 0.6rem auto 0;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  margin: 0.8rem 0;
}

.checkbox-row input {
  accent-color: var(--thread);
}

.text-field {
  display: block;
  margin: 0.8rem 0 0.2rem;
  font-weight: 600;
}

.text-field input {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 0.4rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: normal;
  background: var(--surface);
  color: var(--ink);
}

.file-field {
  display: block;
  margin: 1rem 0;
  font-weight: 600;
}

.file-field input {
  display: block;
  margin-top: 0.5rem;
}

/* Board */

.search-summary {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
}

.banner {
  padding: 0.8rem 1rem;
  border-radius: var(--radius);
  background: var(--border);
  margin-bottom: 1rem;
}

.banner-info {
  background: color-mix(in srgb, var(--thread) 16%, var(--surface));
}

.match-card {
  position: relative;
  border: 2px solid var(--sage);
  border-radius: 10px;
  padding: 0.8rem 0.8rem 0.8rem 1rem;
  margin-bottom: 0.7rem;
  background: color-mix(in srgb, var(--sage) 6%, var(--surface));
}

.match-card::before {
  /* A stitched seam down the left edge - the two halves, joined. */
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 2px;
  background: repeating-linear-gradient(to bottom, var(--sage) 0 6px, transparent 0 11px);
}

.match-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
}

.match-note {
  color: var(--ink-soft);
  margin: 0.2rem 0;
}

.match-cta {
  font-weight: 700;
  color: var(--sage);
  margin: 0.4rem 0 0;
}

.matches-exact .match-card {
  animation: match-reveal 0.5s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .matches-exact .match-card {
    animation: none;
  }
}

@keyframes match-reveal {
  /* transform-only: the auto-refresh poll can replay this any time the
     board's ETag changes (e.g. an unrelated guest registering), so the
     match text itself must never dip through a low-opacity frame. */
  from {
    transform: translateY(6px) scale(0.98);
  }
  to {
    transform: none;
  }
}

.progress-bar {
  height: 10px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: var(--sage);
  transition: width 0.4s ease;
}

.progress-text {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

.all-searching summary {
  cursor: pointer;
  font-weight: 700;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.cut-group {
  margin-top: 0.6rem;
}

.cut-group-entry {
  margin: 0.2rem 0;
  color: var(--ink-soft);
}

.push-opt-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.found-form {
  margin-top: 1rem;
}

/* Flash effect used by the no-push fallback alert */
body.flash-match {
  animation: flash-match 0.5s ease-in-out 2;
}

@media (prefers-reduced-motion: reduce) {
  body.flash-match {
    animation: none;
  }
}

@keyframes flash-match {
  0%, 100% { background: var(--bg); }
  50% { background: color-mix(in srgb, var(--sage) 35%, var(--bg)); }
}

/* Selfie page */

.selfie-form {
  margin-top: 1rem;
}

/* TV / beamer view: a full-bleed kiosk display, not a mobile page - it
   supplies its own background and title-strip signature, so drop the
   shared .page width cap and clothesline mark rather than show a
   mismatched sliver of the mobile chrome above it. */
.page:has(.tv-page) {
  max-width: none;
  padding: 0;
}

.page:has(.tv-page) > .clothesline,
.page:has(.tv-page) > .site-home-link,
.page:has(.explainer) > .site-home-link {
  display: none;
}

.tv-page {
  max-width: none;
  min-height: 100vh;
  background: #16101f;
  color: #f8f2ff;
  padding: 3vmin 4vmin;
  font-family: var(--font-body);
}

.tv-title {
  font-family: var(--font-display);
  font-size: 4vmin;
  font-weight: 700;
  text-align: center;
  margin: 0 0 1.4vmin;
}

.tv-title::before {
  content: "";
  display: block;
  width: min(60vmin, 500px);
  height: 2px;
  margin: 0 auto 2.2vmin;
  background: repeating-linear-gradient(to right, #dd9c4d 0 14px, transparent 0 24px);
  opacity: 0.7;
}

.tv-progress {
  max-width: 900px;
  margin: 0 auto 3vmin;
}

.tv-progress .progress-bar {
  background: #362a49;
}

.tv-progress .progress-bar-fill {
  background: #63b487;
}

.tv-progress .progress-text {
  color: #cabcde;
  font-size: 2vmin;
}

.tv-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2.5vmin;
}

.tv-group {
  position: relative;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px 4px 16px 16px;
  padding: 2.4vmin 2vmin 2vmin;
}

.tv-group::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1vmin;
  height: 1.2vmin;
  background: #16101f;
  clip-path: polygon(
    0% 100%, 5% 0%, 10% 100%, 15% 0%, 20% 100%, 25% 0%, 30% 100%, 35% 0%,
    40% 100%, 45% 0%, 50% 100%, 55% 0%, 60% 100%, 65% 0%, 70% 100%, 75% 0%,
    80% 100%, 85% 0%, 90% 100%, 95% 0%, 100% 100%, 100% 0%
  );
}

.tv-group h2 {
  font-size: 2.5vmin;
  margin-bottom: 1vmin;
  color: #dd9c4d;
}

.tv-entry {
  font-size: 2vmin;
  margin: 0.4vmin 0;
}

.tv-entry-person {
  font-weight: 700;
}

.tv-empty {
  font-size: 3vmin;
  text-align: center;
  grid-column: 1 / -1;
}

/* Admin */

.table-scroll {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

.admin-table th,
.admin-table td {
  border-bottom: 1px solid var(--border);
  padding: 0.5rem;
  text-align: left;
  font-size: 0.9rem;
}

.admin-table th {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.admin-selfie-list {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-soft);
}