/* Peninsula Post: the bracket voting page.

   Layers on top of styles.css and reuses its tokens, so the ballot reads as
   part of the site rather than a form bolted to it. Every bracket uses this
   one stylesheet; nothing here is burger-specific. */

.vote { padding-block: clamp(28px, 5vw, 56px) clamp(40px, 7vw, 90px); }

.vote__title {
  font-family: var(--display);
  font-size: clamp(2.1rem, 6vw, 3.6rem);
  line-height: 1.04;
  margin: .1em 0 .35em;
  color: var(--ink);
}

.vote__closed {
  background: var(--callout);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: 14px 18px;
  color: var(--text-soft);
  margin: 22px 0 0;
}

/* ------------------------------------------------------------- the ballot */

.matchups {
  list-style: none;
  margin: clamp(26px, 4vw, 44px) 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.matchup {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 16px 18px;
}

.matchup__label {
  font-family: var(--body);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}

.matchup__pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 10px;
}

.matchup__vs {
  align-self: center;
  font-family: var(--display);
  font-style: italic;
  font-size: 1rem;
  color: var(--muted);
}

/* Stack on narrow screens. Most of this traffic is a phone at a counter, so
   the stacked layout is the one that actually gets used. */
@media (max-width: 600px) {
  .matchup__pair { grid-template-columns: 1fr; }
  .matchup__vs { justify-self: center; padding: 2px 0; }
}

/* --------------------------------------------------------------- a choice */

.pick {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  font-family: var(--body);
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 15px;
  cursor: pointer;
  color: var(--text);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.pick:hover { border-color: var(--ink); transform: translateY(-1px); }
.pick:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.pick.is-picked {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--cream);
}

.pick__seed {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  font-size: .78rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pick.is-picked .pick__seed { background: var(--gold); color: var(--deep); }

.pick__body { display: block; }

.pick__name {
  display: block;
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.15;
}

.pick__town {
  display: block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-top: 4px;
}

.pick.is-picked .pick__town { color: var(--gold); }

.pick__note {
  display: block;
  font-size: .88rem;
  color: var(--text-soft);
  margin-top: 6px;
  line-height: 1.45;
}

.pick.is-picked .pick__note { color: var(--cream-deep); }

.pick--tbd {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  padding: 14px 15px;
  color: var(--muted);
  font-style: italic;
}

/* --------------------------------------------------------------- submit */

.vote__submit {
  margin-top: clamp(26px, 4vw, 40px);
  background: var(--callout);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 30px);
  max-width: 560px;
}

.vote__emaillabel {
  display: block;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.vote__email {
  width: 100%;
  font-family: var(--body);
  font-size: 1rem;
  padding: .8em 1em;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
}

.vote__email:focus { outline: none; border-color: var(--ink); }

/* Already identified by the email link, so the address ask is dead weight. */
.vote__submit--known .vote__emaillabel,
.vote__submit--known .vote__email,
.vote__submit--known .vote__fineprint { display: none; }

.vote__fineprint {
  font-size: .84rem;
  color: var(--text-soft);
  line-height: 1.5;
  margin: 10px 0 18px;
}

.btn--lg { font-size: 1.06rem; padding: 1em 1.9em; }
.btn:disabled { opacity: .55; cursor: default; transform: none; }

.vote__status { margin: 12px 0 0; font-weight: 700; min-height: 1.4em; }
.vote__status--error { color: var(--terracotta); }
.vote__status--ok { color: var(--green); }

/* Once a ballot lands, the choices stay visible as a receipt but stop
   inviting taps that would go nowhere. */
.vote__form.is-done .pick { pointer-events: none; opacity: .9; }
.vote__form.is-done .pick:not(.is-picked) { opacity: .45; }

/* ===================================================================
   THE BRACKET TREE
   ===================================================================
   The voting page used to be eight identical cards in a column, which
   is a form, not a bracket. This is the printable poster's shape made
   votable: rounds fan in from both sides toward the trophy.

   Columns are emitted in SEED_PAIRS order, so the narrow breakpoint
   can hide every column except .round16 and what is left is the eight
   matchups stacked 0 through 7. A two-sided tree on a phone would be
   unreadable, and most readers arrive from an email on a phone.
   =================================================================== */

.countdown{display:flex; align-items:baseline; gap:10px; margin:0 0 22px;
  padding:12px 16px; background:var(--cream,#F7F3EA); border:1px solid #e3ddcd;
  border-radius:6px;}
.countdown__label{font-family:'Nunito Sans',system-ui,sans-serif; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; }
.countdown__label{color:#7d7566;}
.countdown__value{font-family:'Fraunces',Georgia,serif; font-size:20px;
  font-weight:700; color:var(--evergreen,#1F4A32); font-variant-numeric:tabular-nums;}
.countdown--soon .countdown__value{color:#A63A2E;}
.countdown--over .countdown__value{color:#7d7566;}

.tree{display:flex; align-items:stretch; gap:0; margin:0 0 28px;}
.tree .round{display:flex; flex-direction:column; justify-content:space-around;
  flex:1; padding:0 10px; position:relative; min-width:0;}
.tree .round.center{flex:1.15; justify-content:center;}
.tree .rlabel{font-family:'Nunito Sans',system-ui,sans-serif; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:#A63A2E;
  text-align:center; margin-bottom:10px;}
.tree .matchup{display:flex; flex-direction:column; justify-content:center;
  gap:6px; position:relative; margin:10px 0;}
.tree .derby{font-family:'Nunito Sans',system-ui,sans-serif; font-size:10px;
  letter-spacing:.12em; text-transform:uppercase; color:#A63A2E; text-align:center;}

/* Why a pick arrived already filled in, said in the matchup it belongs to.
   A sentence rather than a label, so it is set in sentence case at a size
   meant to be read, not the uppercase tracking above. */
.tree .scanned{font-family:'Nunito Sans',system-ui,sans-serif; font-size:12px;
  line-height:1.35; font-weight:600; color:var(--evergreen,#1F4A32);
  text-align:center; margin:0 0 2px;}

.tree .slot{display:flex; align-items:center; gap:8px; background:#fff;
  border:1px solid #dcd6c8; border-radius:6px; padding:8px 10px;
  font-family:'Nunito Sans',system-ui,sans-serif; text-align:left; width:100%;}
.tree .seed{flex:0 0 20px; height:20px; border-radius:50%;
  background:var(--evergreen,#1F4A32); color:#fff; font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center;}
.tree .team{display:flex; flex-direction:column; font-size:14px; font-weight:700;
  color:#1b2a1b; line-height:1.25; min-width:0;}
.tree .town{font-size:10px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:#8a8271; margin-top:2px;}
.tree .slot.tbd{background:transparent; border-style:dashed;}
.tree .slot.tbd .team{color:#a89f8b; font-weight:500; font-style:italic;}
.tree .slot.win{background:var(--gold,#C9A227); border-color:var(--gold,#C9A227);}

/* Only the open round is tappable. */
.tree button.pick{cursor:pointer; transition:border-color .12s, box-shadow .12s;}
.tree button.pick:hover{border-color:var(--evergreen,#1F4A32);}
.tree button.pick:focus-visible{outline:3px solid var(--evergreen,#1F4A32);
  outline-offset:2px;}
.tree button.pick.is-picked{background:var(--evergreen,#1F4A32); border-color:var(--evergreen,#1F4A32);}
.tree button.pick.is-picked .team{color:#fff;}
.tree button.pick.is-picked .town{color:#c9d8c9;}
.tree button.pick.is-picked .seed{background:var(--gold,#C9A227); color:#1b2a1b;}

/* The connector elbows, same trick the poster uses. */
.tree .round.left .matchup::after,
.tree .round.right .matchup::after{content:""; position:absolute;
  width:10px; border:1px solid #d8d2c2; top:28%; bottom:28%;}
.tree .round.left .matchup::after{right:-10px; border-left:0;
  border-radius:0 5px 5px 0;}
.tree .round.right .matchup::after{left:-10px; border-right:0;
  border-radius:5px 0 0 5px;}
.tree .round.center .matchup::after{display:none;}

.tree .champ{display:flex; flex-direction:column; align-items:center; gap:8px;}
.tree .trophy{font-size:30px; line-height:1;}
.tree .final-slots{display:flex; flex-direction:column; gap:6px; width:100%;}
.tree .champ__card{width:100%; text-align:center; padding:12px 10px;
  background:var(--evergreen,#1F4A32); border-radius:6px;}
.tree .champ__label{display:block; font-family:'Nunito Sans',system-ui,sans-serif;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold,#C9A227);}
.tree .champ__name{display:block; font-family:'Fraunces',Georgia,serif;
  font-size:16px; font-weight:700; color:#fff; margin-top:4px;}

/* Below this the tree cannot be read, so it becomes the eight matchups.
   Nothing is lost: the later rounds are empty until a round is decided. */
@media (max-width:900px){
  .tree{flex-direction:column;}
  .tree .round:not(.round16){display:none;}
  .tree .round{padding:0;}
  .tree .round.right .rlabel{display:none;}
  .tree .round.left .matchup::after,
  .tree .round.right .matchup::after{display:none;}
  .tree .matchup{margin:0 0 14px;}
  .tree .slot{padding:12px;}
  .tree .team{font-size:15px;}
}

/* The two Round of 16 columns carry real names; the inner rounds carry the
   word "Winner" until a round is decided. Giving them all equal width wraps
   "Field House at Town & Country" onto five lines next to three empty boxes. */
.tree .round.round16{flex:2.1;}
.tree .round.center{flex:1.3;}
.tree .team{overflow-wrap:anywhere;}
.tree .town{white-space:normal;}

/* overflow-wrap:anywhere is right for real names in a narrow box, but it also
   breaks the placeholder word "Winner" one letter per line in the empty inner
   rounds. Those never hold a long string, so they opt out. */
.tree .slot.tbd .team{overflow-wrap:normal; white-space:nowrap;}

/* ...but nowrap alone only stops the letter-per-line break; it does not make
   room. Measured at a 905px viewport, the chrome on an inner-round slot came
   to round padding 20 + matchup padding 32 + slot padding 20 + seed 20 + gap 8,
   which left 2px for a word that wants 47, so "Winner" sat outside its own
   dashed box. These four rules give it back about 45px.

   The seed badge goes because on a placeholder it holds an en-dash and nothing
   else: it is the most space for the least loss, and it is what carries the fix
   through the narrow end of tree mode rather than only on a wide monitor. The
   Round of 16 columns, which hold the real names, are untouched. */
.tree .round:not(.round16) .matchup{padding-left:6px; padding-right:6px;}
.tree .slot.tbd{padding:8px 8px; gap:0; justify-content:center;}
.tree .slot.tbd .seed{display:none;}
.tree .slot.tbd .team{font-size:13px;}
.tree .round:not(.round16):not(.center){flex:1.25;}