/* ===========================================================================
   LMS WINS

   Sticker-book styling, built to match the app icon: bright flat colour, thick
   ink outlines, fat rounded corners and hard offset shadows. Nothing is soft or
   blurred - every card looks like something you could peel off the page.

   Green means through, red means out, yellow is for anything live. Ink is the
   outline on everything, which is what holds the brightness together.

   Type: Fredoka for anything shouted, Nunito for reading. Both rounded.
   =========================================================================== */

:root {
  --ink: #17171F;
  --ink-soft: #5C5C6B;
  --ink-mute: #8E8E9E;

  --yellow: #FFC93C;
  --yellow-soft: #FFF0C4;
  --green: #3FCF6D;
  --green-soft: #D8F7E2;
  --green-ink: #16713C;
  --red: #FF6B5B;
  --red-soft: #FFE2DE;
  --red-ink: #C22E1F;
  --blue: #4DA8FF;

  --paper: #FFFFFF;
  /* Matches theme-color in the page head, so the phone's status bar and the
     page are the same shade when installed to the home screen. */
  --cream: #FFF6E9;

  --display: "Fredoka", "Trebuchet MS", sans-serif;
  --body: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius: 18px;
  --radius-sm: 12px;
  --line: 3px;
  /* The hard offset shadow that makes everything look like a sticker. */
  --pop: 4px 4px 0 var(--ink);
  --pop-sm: 3px 3px 0 var(--ink);
}

* { box-sizing: border-box; }

html {
  /* The single type dial. Raise for larger text throughout. */
  font-size: 18px;
  scrollbar-gutter: stable;
  background: var(--cream);

  /* Opt out of Android Chrome's "auto dark theme", which repaints light pages
     dark when the phone is in dark mode. It only does this to pages in the
     browser - an installed app follows the manifest instead - so without this
     the website and the installed app look like two different products.
     The meta tag alone is not enough; Chrome wants the CSS property. */
  color-scheme: light;
}

body {
  color-scheme: light;
  margin: 0;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 201, 60, .35), transparent 42%),
    radial-gradient(circle at 88% 4%, rgba(63, 207, 109, .25), transparent 38%),
    var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 800; }
a:hover { color: var(--green-ink); }

/* --- chrome -------------------------------------------------------------- */

.topbar {
  max-width: 760px;
  margin: 0 auto;
  background: var(--yellow);
  color: var(--ink);
  padding: calc(16px + env(safe-area-inset-top)) 20px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  border-bottom: var(--line) solid var(--ink);
}
/* One line: "Last Man Standing" in ink, "Wins" picked out in green so the bit
   that matches the address stands out. Wraps to two lines on a narrow phone
   rather than shrinking, which keeps it readable. */
.brand {
  color: var(--ink);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -.015em;
  text-decoration: none;
  line-height: 1.05;
  display: block;
}
.brand span { color: var(--green-ink); }
.brand:hover { color: var(--ink); }
.topbar nav { display: flex; align-items: center; gap: 16px; }
.topbar nav a { font-size: 0.8125rem; font-weight: 800; }

main {
  max-width: 760px;
  margin: 0 auto;
  padding: 18px 14px 0;
  display: grid;
  gap: 18px;
}

.masthead {
  /* One item now that the serial has gone - centred rather than pushed left. */
  display: flex; justify-content: center; align-items: baseline;
  max-width: 760px; margin: 0 auto;
  padding: 9px 20px;
  background: var(--ink);
  color: var(--yellow);
  font-family: var(--display);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Cards are stickers: white, outlined, and sitting slightly off the page. */
.card {
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--pop);
  padding: 20px;
}
.card.narrow { max-width: 420px; margin: 28px auto; }
.card.tight { padding: 16px 18px; }
.card.tight.ok { background: var(--green-soft); }
.card.knocked { background: var(--red-soft); }
.card.winner { background: var(--yellow); }

h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.9rem;
  letter-spacing: -.02em;
  line-height: 1.05;
  margin: 0 0 4px;
}
h2 {
  font-family: var(--display);
  font-size: 1rem; font-weight: 600; margin: 0 0 10px;
  letter-spacing: .01em;
}

.cardhead {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}

.muted, .hint { color: var(--ink-soft); font-size: 0.8125rem; margin: 3px 0; font-weight: 600; }
.hint { font-size: 0.6875rem; text-transform: none; letter-spacing: 0; }
.error { color: var(--red-ink); font-size: 0.8125rem; font-weight: 800; }
.warn { color: var(--ink); font-size: 0.8125rem; }

/* --- the countdown ------------------------------------------------------- */

.deadline {
  background: var(--yellow);
  border: var(--line) solid var(--ink);
  border-radius: var(--radius-sm);
  box-shadow: var(--pop-sm);
  padding: 9px 16px;
  text-align: right;
  min-width: 152px;
}
.deadline .label {
  display: block; font-family: var(--display); font-size: 0.5625rem;
  letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
}
.deadline strong {
  font-family: var(--display); font-size: 1.4rem; font-weight: 600;
  font-variant-numeric: tabular-nums; display: block; line-height: 1.05;
}
.deadline.urgent { background: var(--red); color: var(--paper); }

.current-pick {
  background: var(--green-soft);
  border: var(--line) solid var(--ink);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  font-size: 0.875rem;
  margin: 0 0 6px;
}
.current-pick strong { font-family: var(--display); font-weight: 600; font-size: 1.1rem; }

/* --- fixture picker ------------------------------------------------------ */

.picker { display: block; margin-top: 16px; }
.pickerhint { color: var(--ink-soft); font-size: 0.8125rem; margin: 0 0 14px; }

.day { margin-bottom: 20px; }
.dayname {
  display: inline-block;
  font-family: var(--display);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  background: var(--ink); color: var(--yellow);
  padding: 4px 12px; border-radius: 999px;
  margin: 0 0 10px;
}

.fixrow {
  display: grid;
  grid-template-columns: 1fr 62px 1fr;
  align-items: stretch;
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 9px;
  box-shadow: var(--pop-sm);
}

.side {
  display: flex; align-items: center; gap: 11px;
  background: transparent; border: 0; color: var(--ink);
  font-family: var(--body); font-size: 0.9375rem; font-weight: 700;
  padding: 13px 14px; min-height: 64px;
  cursor: pointer; text-align: left;
  transition: background .12s ease;
}
.side.away { flex-direction: row-reverse; text-align: right; }
.side:hover:not(:disabled) { background: var(--yellow-soft); }
.side:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }

.sidename { display: flex; flex-direction: column; min-width: 0; }
.side .full {
  font-family: var(--display); font-weight: 500; font-size: 0.9375rem; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.side .why { font-size: 0.625rem; color: var(--ink-soft); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }

/* Your pick goes green with a tick. */
.side.selected { background: var(--green); }
.side.selected .full { color: var(--ink); font-weight: 600; }
.side.selected:hover { background: var(--green); }
.side.selected::after {
  content: '✓';
  font-family: var(--display); font-size: 0.875rem; font-weight: 600;
  width: 24px; height: 24px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--paper);
  border: 2px solid var(--ink);
  margin-left: auto;
}
.side.away.selected::after { margin-left: 0; margin-right: auto; }

.side.unavailable, .side:disabled { cursor: not-allowed; color: var(--ink-mute); background: #F4F4F6; }
.side.unavailable .full { text-decoration: line-through; text-decoration-thickness: 2px; }
.side.unavailable .crest { opacity: .3; }

.ko {
  display: flex; align-items: center; justify-content: center;
  background: var(--yellow-soft);
  border-left: var(--line) solid var(--ink); border-right: var(--line) solid var(--ink);
  font-family: var(--display); font-size: 0.75rem; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.fixrow.haspick .ko { background: var(--ink); color: var(--yellow); }

/* --- badges -------------------------------------------------------------- */

.crest {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: none;
  background: transparent; vertical-align: middle;
}
.crest img { width: 100%; height: 100%; object-fit: contain; display: block; }
.crest .ph {
  display: none; font-family: var(--display);
  font-size: 0.5625rem; font-weight: 600; color: var(--ink-soft);
}
.crest.failed img { display: none; }
.crest.failed .ph { display: inline; }

/* Crests sit in an outlined disc, like a badge sticker. */
.crest.md {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: 5px;
}
.crest.md .ph { font-size: 0.625rem; }

.crest.sealed {
  border: 2px dashed var(--ink-mute); border-radius: 50%;
  width: 28px; height: 28px;
}
.crest.sealed .lockicon { font-size: 0.5625rem; filter: grayscale(1); opacity: .6; }

/* --- chips and pills ----------------------------------------------------- */

.usedlist { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.chip {
  background: var(--paper); border: 2px solid var(--ink); border-radius: 999px;
  padding: 3px 12px; font-family: var(--display);
  font-size: 0.625rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
}
.chip.warn { background: var(--red-soft); }
.pill {
  background: var(--ink); color: var(--yellow); border-radius: 999px;
  padding: 3px 12px; font-family: var(--display);
  font-size: 0.625rem; font-weight: 500;
}

/* --- tables -------------------------------------------------------------- */

table { border-collapse: collapse; width: 100%; font-size: 0.8125rem; }
th {
  font-family: var(--display);
  font-size: 0.5625rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--yellow); background: var(--ink); font-weight: 500;
  text-align: left; padding: 9px 10px;
}
td { padding: 10px; border-bottom: 2px solid #EDEDF2; }

.scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }

.standings .player {
  position: sticky; left: 0; background: var(--paper);
  min-width: 158px; white-space: nowrap;
  font-family: var(--display); font-weight: 500; font-size: 0.875rem;
}
.standings th.now { color: var(--green); }
.standings tr.out .player { color: var(--ink-mute); }
.standings tr.out { background: #FAFAFC; }
.standings tr.out .player { background: #FAFAFC; }

.cell {
  text-align: center; min-width: 58px; padding: 9px 6px;
  font-family: var(--display); font-size: 0.6875rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .04em;
}
.cell .cellname { display: block; margin-top: 3px; }
.cell .crest { margin: 0 auto; }

.cell.win, .cell.void_win { color: var(--green-ink); }
.cell.loss, .cell.draw, .cell.no_pick { color: var(--red-ink); }
.cell.loss .cellname, .cell.draw .cellname { text-decoration: line-through; text-decoration-thickness: 2px; }
.cell.no_pick { font-style: italic; }
.cell.pending { color: var(--ink); }
.cell.hidden { color: var(--ink-mute); }
.cell.nopick-yet { color: #D6D6DE; letter-spacing: .24em; }

.badge {
  font-family: var(--display);
  font-size: 0.5625rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; margin-left: 8px; white-space: nowrap;
  border: 2px solid var(--ink);
}
.badge.alive { background: var(--green); }
.badge.out { background: var(--red-soft); }
.badge.winner { background: var(--yellow); }

.legend { display: flex; gap: 16px; flex-wrap: wrap; margin: 18px 0 0; }
.key {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.6875rem; color: var(--ink-soft); font-weight: 800;
}
.key::before {
  content: ''; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--ink); background: var(--paper);
}
.key.win::before { background: var(--green); }
.key.loss::before { background: var(--red); }
.key.hidden::before { background: #D6D6DE; }

.stake {
  font-size: 0.8125rem; margin: 16px 0 0; padding-top: 14px;
  border-top: 2px dashed var(--ink-mute);
  font-variant-numeric: tabular-nums; font-weight: 800;
}
.stakenote {
  display: block; font-size: 0.6875rem; color: var(--ink-soft);
  font-weight: 600; margin-top: 3px;
}
.paidcount {
  display: inline-block; margin-left: 6px;
  background: var(--yellow); border: 2px solid var(--ink); border-radius: 999px;
  padding: 2px 11px; font-family: var(--display);
  font-size: 0.625rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
}
.paidcount.all { background: var(--green); }
.payrow { margin: 14px 0 8px; }

/* --- fixtures list (after the deadline) ---------------------------------- */

.fixtures td { border: none; padding: 8px; font-family: var(--display); font-size: 0.875rem; font-weight: 500; }
.fixtures .r { text-align: right; }
.fixtures .score {
  text-align: center; background: var(--ink); color: var(--yellow);
  border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.fixtures .crest { margin: 0 9px; }

/* --- forms --------------------------------------------------------------- */

form { display: grid; gap: 14px; }
form.inline { display: inline-grid; grid-auto-flow: column; gap: 10px; align-items: center; margin: 0 10px 10px 0; }
label {
  display: grid; gap: 6px; font-family: var(--display);
  font-size: 0.6875rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
}

input, select {
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--body);
  font-size: 0.9375rem;
  font-weight: 700;
  padding: 12px 14px;
}
input::placeholder { color: var(--ink-mute); font-weight: 600; }
input:focus, select:focus { outline: none; box-shadow: var(--pop-sm); }

/* Buttons press into the page when tapped. */
button {
  background: var(--paper);
  color: var(--ink);
  border: var(--line) solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--pop-sm);
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.8125rem;
  padding: 11px 22px;
  cursor: pointer;
  min-height: 46px;
  transition: transform .08s ease, box-shadow .08s ease, background .12s ease;
}
button:hover { background: var(--yellow-soft); }
button:active { transform: translate(3px, 3px); box-shadow: none; }
button.primary { background: var(--green); }
button.primary:hover { background: var(--green); filter: brightness(1.06); }
button.danger { background: var(--red); color: var(--paper); }
button.danger:hover { background: var(--red); filter: brightness(1.06); }
button.link {
  background: none; border: 0; padding: 0; min-height: 0; box-shadow: none;
  color: var(--ink); font-family: var(--body);
  font-size: 0.8125rem; font-weight: 800; text-decoration: underline;
}
button.link:hover { background: none; }
button.link:active { transform: none; }
.actions form { display: flex; gap: 8px; }

.btnlink {
  display: inline-block; background: var(--green); color: var(--ink);
  border: var(--line) solid var(--ink); border-radius: 999px;
  box-shadow: var(--pop-sm);
  padding: 12px 24px;
  font-family: var(--display); font-weight: 500; font-size: 0.8125rem;
  text-decoration: none;
}
.btnlink:active { transform: translate(3px, 3px); box-shadow: none; }

.flash {
  border: var(--line) solid var(--ink); border-radius: var(--radius-sm);
  box-shadow: var(--pop-sm);
  padding: 13px 16px; font-size: 0.8125rem; font-weight: 800;
}
.flash.ok { background: var(--green-soft); }
.flash.error { background: var(--red-soft); }

/* --- pay to play --------------------------------------------------------- */

.unpaid {
  background: var(--yellow-soft);
  border: var(--line) dashed var(--ink);
  border-radius: var(--radius);
  padding: 22px 20px;
  margin-top: 16px;
  text-align: center;
}
.unpaid h2 { margin-bottom: 8px; }
.unpaid p { margin: 6px 0; font-size: 0.9375rem; }

/* --- add to home screen -------------------------------------------------- */

.install { border-style: dashed; }
.install-go { margin-top: 14px; }

.install-steps ol {
  margin: 14px 0 0;
  padding-left: 1.25rem;
  display: grid;
  gap: 10px;
  font-size: 0.9375rem;
}
.install-steps li { padding-left: 4px; }

/* Both sets of instructions are in the page; only the right one is shown.
   Keeping the markup identical for everybody means the page is the same for
   every player and nothing has to be decided on the server. */
.install-steps[data-os='ios'] .other-only,
.install-steps[data-os='other'] .ios-only { display: none; }

.linkish {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 8px 0 0;
  margin: 0;
  color: var(--ink);
  text-decoration: underline;
  font-size: 0.9375rem;
  min-height: 44px;
}
.linkish:active { transform: none; }
.small { font-size: 0.8125rem; margin-top: 0; }

/* --- league chat --------------------------------------------------------- */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.chatform { margin: 16px 0 20px; }
.chatform textarea {
  width: 100%;
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--body);
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 12px 14px;
  resize: vertical;
}
.chatform textarea::placeholder { color: var(--ink-mute); font-weight: 600; }
.chatform textarea:focus { outline: none; box-shadow: var(--pop-sm); }
.chatform button { justify-self: start; }

.msglist { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }

.msg {
  position: relative;
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: var(--radius-sm);
  box-shadow: var(--pop-sm);
  padding: 12px 14px;
}
/* Your own messages get the league's yellow, so a thread is easy to scan. */
.msg.mine { background: var(--yellow-soft); }

.msghead { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.msgwho {
  font-family: var(--display); font-weight: 600; font-size: 0.9375rem;
}
.msgwhen { font-size: 0.6875rem; color: var(--ink-soft); font-weight: 700; }

.msgbody {
  color-scheme: light;
  margin: 0; font-size: 0.9375rem; line-height: 1.45;
  /* Player text, so it must wrap rather than stretch the page. */
  overflow-wrap: anywhere; white-space: pre-wrap;
}

.msgdel { position: absolute; top: 10px; right: 12px; margin: 0; }
.msgdel button { font-size: 0.6875rem; color: var(--red-ink); }

.msgempty {
  color: var(--ink-soft); font-size: 0.875rem; padding: 18px 0; text-align: center;
}

/* --- invite sharing ------------------------------------------------------ */

.invitelink { margin: 14px 0 12px; }
.invitelink input { width: 100%; font-size: 0.8125rem; background: var(--yellow-soft); }
.inviteactions { display: flex; flex-wrap: wrap; gap: 10px; }
.copied {
  font-family: var(--display); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; margin: 14px 0 0;
  background: var(--green); border: 2px solid var(--ink); border-radius: 999px;
  padding: 4px 14px; display: inline-block;
}
.invited {
  background: var(--yellow); border: var(--line) solid var(--ink);
  border-radius: var(--radius-sm); box-shadow: var(--pop-sm);
  padding: 12px 15px; font-size: 0.8125rem; font-weight: 800; margin: 0 0 18px;
}

/* --- odds and ends ------------------------------------------------------- */

.rules { padding-left: 22px; display: grid; gap: 12px; font-size: 0.9375rem; }
.rules::marker { color: var(--green-ink); font-weight: 800; }
.rules strong { font-family: var(--display); font-weight: 600; }
.invite {
  background: var(--yellow); border: 2px solid var(--ink); border-radius: 999px;
  padding: 4px 14px; font-family: var(--display);
  font-size: 0.875rem; font-weight: 600; letter-spacing: .16em;
}
.waiting { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 8px; }
.auto { font-size: 0.5625rem; font-weight: 800; color: var(--red-ink); vertical-align: super; }
.lock { display: block; }

footer {
  max-width: 760px; margin: 0 auto;
  color: var(--ink-soft); font-size: 0.6875rem; text-align: center; font-weight: 700;
  padding: 24px 20px calc(100px + env(safe-area-inset-bottom));
}

/* --- bottom tabs --------------------------------------------------------- */

.tabbar {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 760px; z-index: 20;
  background: var(--paper);
  border-top: var(--line) solid var(--ink);
  padding-bottom: env(safe-area-inset-bottom);
}

.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 9px 2px 8px; min-height: 62px;
  color: var(--ink-soft); text-decoration: none;
  font-family: var(--display);
  font-size: 0.5625rem; font-weight: 500; letter-spacing: .04em;
  position: relative;
}
.tab svg { width: 22px; height: 22px; position: relative; }
.tab span { white-space: nowrap; position: relative; }
.tab:hover { color: var(--ink); }

/* The live tab gets a green blob behind its icon. */
.tab::before {
  content: '';
  position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 30px; border-radius: 999px;
  background: var(--green); border: 2px solid var(--ink);
  opacity: 0; transition: opacity .14s ease;
}
.tab.active { color: var(--ink); }
.tab.active::before { opacity: 1; }

button, .btnlink, .side, .tab, .topbar nav a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  button:active { transform: none; }
}

@media (max-width: 560px) {
  h1 { font-size: 1.6rem; }
  .card { padding: 16px 14px; }
  main { padding: 14px 11px 0; }
  .masthead { padding: 8px 14px; font-size: 0.5rem; }
  .topbar { padding-left: 14px; padding-right: 14px; }
  .fixrow { grid-template-columns: 1fr 50px 1fr; }
  .side { padding: 11px 10px; gap: 9px; min-height: 60px; }
  .side .full { font-size: 0.875rem; white-space: normal; }
  .crest.md { width: 36px; height: 36px; padding: 4px; }
  .cardhead { flex-direction: column; gap: 12px; }
  .deadline { text-align: left; width: 100%; }
}

@media (max-width: 340px) {
  .tab { font-size: 0.5rem; }
  .tab svg { width: 20px; height: 20px; }
  .tab::before { width: 34px; }
}

.install-trouble { margin-top: 16px; }
.install-trouble summary {
  cursor: pointer;
  font-weight: 700;
  padding: 10px 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.install-trouble ol { margin: 10px 0; padding-left: 1.25rem; display: grid; gap: 8px; }
.install-trouble p, .install-trouble li { font-size: 0.9375rem; }

/* --- "put it on your phone" strip ---------------------------------------- */

.promo {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--ink);
  color: var(--yellow);
  border-bottom: var(--line) solid var(--ink);
  overflow: hidden;
  padding-top: env(safe-area-inset-top);
}

/* Two identical copies side by side; slide the pair left by half its width and
   the loop is seamless, because copy two lands exactly where copy one began. */
.promo-track {
  display: flex;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  animation: promo-scroll 24s linear infinite;
  will-change: transform;
}
.promo-line {
  flex: 0 0 auto;
  padding: 9px 24px 9px 0;
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

@keyframes promo-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.promo:hover .promo-track { animation-play-state: paused; }

.promo-close {
  flex: 0 0 auto;
  background: var(--ink);
  color: var(--yellow);
  border: 0;
  box-shadow: none;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 14px;
  min-height: 40px;
  min-width: 44px;
  cursor: pointer;
  /* Sits above the moving text, with a hard edge so words do not slide under
     it and look like a rendering fault. */
  position: relative;
  z-index: 1;
  box-shadow: -10px 0 12px 6px var(--ink);
}
.promo-close:active { transform: none; }

/* Motion sickness is a real thing, and a permanently moving strip is the worst
   offender on a page. Hold it still and let it wrap instead. */
@media (prefers-reduced-motion: reduce) {
  .promo-track { animation: none; }
  .promo-line + .promo-line { display: none; }
  .promo-line { white-space: normal; padding: 9px 12px; }
}