/* Stryket. "Matchdag": a calm surface, one green for what you picked, yellow for covers, condensed
   capitals for signs and headings like a scoreboard. Fonts are served from here (the CSP allows
   nothing else): Inter for text and numbers, Barlow Condensed for signs and headings. */
@font-face { font-family: "Inter"; src: url("/fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/fonts/barlow-condensed-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/fonts/barlow-condensed-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --bg: #f3f4ef; --card: #ffffff; --sunk: #f3f4ef; --track: #e6e9e2;
  /* raised: the picked side of a switch, a step above its track. off: a button that can't be pressed. */
  --raised: #ffffff; --off: #f3f4ef;
  /* tint: the ground of a coupon sign's box in Allas tips per match, calmer than -soft in dark. */
  --green-tint: #e3f1e8; --amber-tint: #fbeacb;
  --ink: #101814; --ink-2: #4a564f; --ink-3: #6b776f; --line: #e1e4dc; --line-2: #eceee8;
  --green: #0a7a45; --on-green: #ffffff; --green-soft: #e3f1e8; --green-ink: #075c34;
  --amber: #f5b83d; --on-amber: #3a2600; --amber-soft: #fbeacb; --amber-ink: #7a4b00;
  --odds: #e3a21a; --odds-ink: #8a5a00;
  --loss: #e0611f; --on-loss: #ffffff; --draw: #d5dad3; --on-draw: #2b3530;
  --inv: #101814; --inv-2: #2b3530; --on-inv: #ffffff; --inv-muted: #a9b4ad; --bright: #3ddc84; --on-bright: #0b1f14;
  --red: #b3261e; --red-soft: #fbe3e0;
  --shadow: 0 8px 24px rgba(16, 24, 20, 0.18);
  --lift: 0 1px 2px rgba(16, 24, 20, 0.14);
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
/* Dark: the phone's setting, unless the theme button picked light (theme.js sets data-theme). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c120f; --card: #161e1a; --sunk: #1f2924; --track: #1f2924;
    --raised: #303c36; --off: #111814; --green-tint: #1a3124; --amber-tint: #2e2716;
    --ink: #e6ece8; --ink-2: #a9b4ad; --ink-3: #8c9a92; --line: #2b3530; --line-2: #222c27;
    --green: #3ddc84; --on-green: #0b1f14; --green-soft: #173a27; --green-ink: #7ee8ae;
    --amber-soft: #3b2c10; --amber-ink: #f5c566; --odds-ink: #f0b954;
    --loss: #ff8a4c; --on-loss: #1f0d03; --draw: #3a4540; --on-draw: #e6ece8;
    --inv: #26302b; --inv-2: #33403a; --on-inv: #e6ece8; --inv-muted: #a9b4ad;
    --red: #ff8a80; --red-soft: #3a1714;
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.5); --lift: 0 1px 2px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0c120f; --card: #161e1a; --sunk: #1f2924; --track: #1f2924;
  --raised: #303c36; --off: #111814; --green-tint: #1a3124; --amber-tint: #2e2716;
  --ink: #e6ece8; --ink-2: #a9b4ad; --ink-3: #8c9a92; --line: #2b3530; --line-2: #222c27;
  --green: #3ddc84; --on-green: #0b1f14; --green-soft: #173a27; --green-ink: #7ee8ae;
  --amber-soft: #3b2c10; --amber-ink: #f5c566; --odds-ink: #f0b954;
  --loss: #ff8a4c; --on-loss: #1f0d03; --draw: #3a4540; --on-draw: #e6ece8;
  --inv: #26302b; --inv-2: #33403a; --on-inv: #e6ece8; --inv-muted: #a9b4ad;
  --red: #ff8a80; --red-soft: #3a1714;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.5); --lift: 0 1px 2px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* No rubber-band past the ends of the page: on a phone that bounce dragged the page's background
   into view and could leave the fixed tab bar drawn halfway up the screen. */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; overscroll-behavior-y: none; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.4 var(--sans); font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; }
body.locked { overflow: hidden; }
/* A wide screen gets the whole app larger (logo, text, signs, cards), so the page fills more of the
   screen instead of sitting small in the middle. Every size here is in px, so zoom scales it all
   evenly; the layout itself still sees at least 1300 px and stays the desktop one. Not on paper. */
@media screen and (min-width: 1500px) { html { zoom: 1.15; } }
@media screen and (min-width: 1800px) { html { zoom: 1.3; } }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-family: var(--display); font-weight: 700; line-height: 1.1; text-wrap: balance; }
h1 { font-size: 34px; }
h2 { font-size: 24px; letter-spacing: 0.01em; }
h3 { font-size: 16px; font-weight: 700; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.muted { color: var(--ink-2); }
.small { font-size: 13px; }
.num-t { font-variant-numeric: tabular-nums; }
.eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); }

/* ---------- frame ---------- */
.topbar { max-width: 640px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 4px max(16px, env(safe-area-inset-left, 0px)); }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); min-width: 0; }
.brand img, .brand span { flex-shrink: 0; }
.brand img { width: 30px; height: 30px; display: block; }
.brand span { font-family: var(--display); font-weight: 700; font-size: 25px; letter-spacing: 0.06em; }
.brand small { font-size: 13px; font-weight: 600; color: var(--ink-2); padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--line);
  max-width: 38vw; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 20px; }
.topbar-end { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-shrink: 0; }
.theme-btn { width: 44px; height: 44px; border-radius: 22px; border: 0; background: transparent; color: var(--ink-2); display: grid; place-items: center; padding: 0; }
@media (hover: hover) { .theme-btn:hover { background: var(--track); color: var(--ink); } }
.theme-btn svg { width: 22px; height: 22px; }
[data-theme="dark"] .theme-btn svg:first-child, :root:not([data-theme="dark"]) .theme-btn svg:last-child { display: none; }
.avatar-btn { width: 44px; height: 44px; border-radius: 22px; border: 0; background: var(--inv); color: var(--on-inv); font-weight: 600; font-size: 15px; }
main { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px;
  padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(180px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.tabbar { position: fixed; z-index: 10; left: 0; right: 0; bottom: 0; background: var(--card); border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px)); }
/* Its own layer, so Safari on an iPhone keeps it at the bottom while the page scrolls and bounces. */
.tabbar { transform: translateZ(0); }
/* While a field has focus the keyboard is up: the bottom bars step aside instead of riding on it. */
@media (max-width: 759px) { body.typing .tabbar, body.typing .savebar:not(.inline) { display: none; } }
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px;
  color: var(--ink-3); text-decoration: none; font-size: 12px; font-weight: 500; }
.tabbar a[aria-current="page"] { color: var(--green); font-weight: 600; }
.tabbar svg { width: 24px; height: 24px; }
@media (min-width: 760px) {
  main { padding-bottom: 120px; }
  .tabbar { flex-shrink: 0; position: static; transform: none; border: 0; background: var(--track); border-radius: 10px; padding: 3px; gap: 2px; width: 360px; }
  .tabbar a { flex-direction: row; min-height: 36px; border-radius: 8px; font-size: 14px; font-weight: 600; gap: 6px; color: var(--ink-2); }
  .tabbar a[aria-current="page"] { background: var(--raised); color: var(--ink); box-shadow: var(--lift); }
  @media (hover: hover) { .tabbar a:not([aria-current="page"]):hover { color: var(--ink); } }
  .tabbar svg { width: 18px; height: 18px; }
  .topbar { padding-top: 20px; }
}

/* ---------- generic pieces ---------- */
.card { background: var(--card); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.card.flush { padding: 0; gap: 0; overflow: hidden; }
.head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hint { font-size: 13px; color: var(--ink-2); padding: 0 4px; }
.btn { min-height: 48px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.btn.primary { background: var(--green); border-color: var(--green); color: var(--on-green); }
.btn.dark { background: var(--inv); border-color: var(--inv); color: var(--on-inv); }
.btn.link { border-color: transparent; background: transparent; color: var(--green); padding: 0 8px; }
.btn.small { min-height: 40px; padding: 0 14px; font-size: 14px; }
/* Disabled: no border and its own ground (a step below the card in dark), so it can't be taken for a button that works. */
.btn:disabled { opacity: 1; background: var(--off); border-color: transparent; color: var(--ink-3); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pill { font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 99px; background: var(--green-soft); color: var(--green-ink); white-space: nowrap; }
.pill.warn { background: var(--amber-soft); color: var(--amber-ink); }
.pill.off { background: var(--sunk); color: var(--ink-2); }
.pill.bad { background: var(--red-soft); color: var(--red); }
/* The section heading over a list or table, like "Ditt tips": a title in the display face, its
   state, and a switch on the right. */
.head.section { padding-top: 4px; }
.head.section > div:first-child { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* One switch for everything that shows one of a few things: Folket/Odds, the topplista's sort, Per
   person/Per match, the match view's tabs, Logga in/Starta en grupp. lg is the bigger one for a
   page's main choice, fill spreads it over the width. */
.seg { display: inline-flex; flex-shrink: 0; background: var(--track); border-radius: 10px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 0 12px; border-radius: 8px; min-height: 32px; }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--raised); color: var(--ink); box-shadow: var(--lift); }
@media (hover: hover) { .seg button:not([aria-pressed="true"]):not([aria-selected="true"]):hover { color: var(--ink); } }
.seg.lg button { min-height: 40px; font-size: 15px; padding: 0 16px; }
.seg.fill { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.seg.fill button { padding: 0 4px; }
/* A match's number: a small round badge, green once you have picked a sign. */
.no { flex: none; width: 24px; height: 24px; border-radius: 12px; display: grid; place-items: center; background: var(--sunk); color: var(--ink-3);
  font-family: var(--display); font-weight: 700; font-size: 15px; line-height: 1; font-variant-numeric: tabular-nums; }
.no.gold { background: var(--amber); color: var(--on-amber); }
.no:empty { background: transparent; }
.error { background: var(--red-soft); color: var(--red); padding: 10px 14px; border-radius: 12px; font-size: 14px; }
.empty { color: var(--ink-2); font-size: 14px; }
input, select { font: inherit; min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); min-width: 0; }
/* The open list of a select: some browsers (Chrome on Windows, Android) draw it white unless the
   options get our colours, and then light text on white can't be read in dark mode. */
option { background: var(--card); color: var(--ink); }
label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.linkbox { font: 13px var(--mono); padding: 10px 12px; border-radius: 10px; background: var(--sunk); overflow-wrap: anywhere; user-select: all; }
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: 14px; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line-2); }
th { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
tr:last-child td { border-bottom: 0; }

/* ---------- the round card ---------- */
.round-card { background: var(--card); border-radius: 18px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.card-top .eyebrow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.round-card select { min-height: 32px; padding: 2px 8px; font-size: 13px; border-radius: 8px; background: var(--card); flex-shrink: 0; }
/* The big figure of a card: time left, the price, rätt just nu. */
.figure { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.figure b { font-family: var(--display); font-weight: 700; font-size: 36px; line-height: 1; font-variant-numeric: tabular-nums; }
.figure b small { font-size: 23px; font-weight: 600; color: var(--ink-2); margin: 0 0.3em 0 0.05em; }
.figure b small:last-child { margin-right: 0; }
.figure > span { color: var(--ink-2); font-size: 15px; }
.figure.state b { font-size: 30px; }
.figure.over b, .figure.over b small { color: var(--red); }
.forecast { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.forecast-total { display: flex; flex-direction: column; gap: 2px; }
.forecast-total span, .forecast-label { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.forecast-total b { font-family: var(--display); font-weight: 700; font-size: 32px; line-height: 1.05; color: var(--green); font-variant-numeric: tabular-nums; }
.forecast-total b.zero { color: var(--ink-2); font-size: 24px; }
.ladder { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ladder li { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px 7px; border-radius: 12px; background: var(--sunk); text-align: center; min-width: 0; }
.ladder b { font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1; }
.ladder b small { font-size: 14px; font-weight: 600; color: var(--ink-3); }
.ladder .amount { font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ladder .rows { font-size: 11px; color: var(--ink-3); }
.ladder li.won { background: var(--green-soft); box-shadow: inset 0 0 0 1.5px var(--green); }
.ladder li.won b, .ladder li.won b small, .ladder li.won .rows { color: var(--green-ink); }
.ladder li.won .rows { font-weight: 650; }
/* Small figures in a row, each under its label in small capitals: Sista tips, Omsättning, Jackpot,
   and the same everywhere else a card sums something up. */
.stats-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; padding-top: 11px; border-top: 1px solid var(--line-2); }
.stats-row:first-child, .card-top + .stats-row { padding-top: 0; border-top: 0; }
.stats-row div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.stats-row span { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats-row b { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-people { display: flex; align-items: center; gap: 10px; padding-top: 11px; border-top: 1px solid var(--line-2); min-height: 47px; }
.rc-people > span { flex: 1; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.rc-people > span b { color: var(--ink); }
/* A big group: the faces get a line of their own and wrap. */
.rc-people.many { flex-wrap: wrap; }
.rc-people.many .faces { flex-basis: 100%; order: 3; }
.faces { display: flex; padding-left: 5px; flex-wrap: wrap; row-gap: 4px; }
.face { width: 28px; height: 28px; margin-left: -5px; border-radius: 14px; border: 2px solid var(--card); display: grid; place-items: center;
  font-size: 11px; font-weight: 700; background: var(--track); color: var(--ink-2); }
.face.in { background: var(--green); color: var(--on-green); }
.iconbtn { flex-shrink: 0; width: 36px; height: 36px; border-radius: 18px; border: 1px solid var(--line); background: transparent; color: var(--green);
  display: grid; place-items: center; padding: 0; }
.iconbtn svg { width: 18px; height: 18px; }
@media (hover: hover) { .iconbtn:hover { border-color: var(--green); } }

/* ---------- the tip list ---------- */
.mrow { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 10px 8px 10px 10px; border-top: 1px solid var(--line-2);
  scroll-margin: 96px 0 160px; }
.mrow:first-child { border-top: 0; }
.mrow.flash { animation: flash 1.2s ease-out; }
@keyframes flash { from { background: var(--green-soft); } to { background: transparent; } }
.mrow.done .no { background: var(--green-soft); color: var(--green-ink); }
.mlink { all: unset; box-sizing: border-box; display: flex; flex-direction: column; min-width: 0; cursor: pointer; border-radius: 8px; }
.mlink:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.mlink .t { display: flex; align-items: baseline; gap: 5px; min-width: 0; font-weight: 600; font-size: 15px; line-height: 21px; }
.mlink .t span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlink .t em { flex: none; font-style: normal; font-weight: 500; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mlink .meta { font-size: 12px; line-height: 17px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlink .meta b { color: var(--ink); font-weight: 600; }
/* Form and spelvärde before kickoff, in the space between the teams and the signs. The names get a
   fixed column so the form lines up down the list; spelvärde needs the wider list next to the round
   card. A phone shows neither. */
.mlink .fm, .mlink .val { display: none; }
@media (min-width: 760px) {
  .mlink:has(.fm) { display: grid; grid-template-columns: minmax(0, 160px) auto minmax(0, 1fr); column-gap: 12px; align-items: center; }
  .mlink:has(.fm) .t { grid-column: 1; }
  .mlink:has(.fm) .meta { grid-column: 1 / 3; }
  .mlink .fm { grid-column: 2; display: flex; gap: 2px; }
  .mlink .fm i { width: 14px; height: 14px; border-radius: 3px; display: grid; place-items: center; font: 700 9.5px/1 var(--sans); font-style: normal; }
  .mlink .fm i.win { background: var(--green); color: var(--on-green); }
  .mlink .fm i.draw { background: var(--draw); color: var(--on-draw); }
  .mlink .fm i.loss { background: var(--loss); color: var(--on-loss); }
}
@media (min-width: 1060px) {
  .mlink:has(.val):not(:has(.fm)) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
  .mlink .val { grid-column: -2; grid-row: 1 / span 2; justify-self: end; min-width: 0; max-width: 100%; overflow: hidden;
    display: flex; flex-direction: column; align-items: flex-end; gap: 3px; white-space: nowrap; }
  .mlink .val b { padding: 1px 8px; border-radius: 99px; background: var(--green-soft); color: var(--green-ink); font-size: 12px; font-weight: 600; line-height: 18px; }
  .mlink .val small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; color: var(--ink-2); }
}
.signs { display: flex; gap: 4px; }
.sign { position: relative; overflow: hidden; width: 48px; height: 50px; padding: 0; border-radius: 12px; border: 1px solid var(--line); background: var(--sunk); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-variant-numeric: tabular-nums;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s; -webkit-tap-highlight-color: transparent; }
.sign b { font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1; }
.sign small { font-size: 11.5px; font-weight: 500; line-height: 1; color: var(--ink-2); white-space: nowrap; letter-spacing: -0.01em; }
.sign i { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--ink-3); opacity: 0.45; border-radius: 0 2px 0 0; }
.sign.on { background: var(--green); border-color: var(--green); color: var(--on-green); }
.sign.on small { color: inherit; opacity: 0.9; }
.sign.on i { background: var(--on-green); opacity: 0.55; }
.sign.cover { background: var(--amber); border-color: var(--amber); color: var(--on-amber); }
.sign.cover small { color: inherit; opacity: 0.85; }
.sign.cover i { background: var(--on-amber); opacity: 0.4; }
@media (hover: hover) { button.sign:not(.on):hover { border-color: var(--ink-3); } }
button.sign:active { transform: scale(0.96); }
.sign.out { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ink); overflow: visible; }
.sign.out i { display: none; }
div.sign { cursor: default; }
@media (min-width: 760px) {
  .mrow { padding: 10px 14px; gap: 10px; }
  .sign { width: 64px; }
}
.savebar { position: fixed; z-index: 11; left: 50%; transform: translateX(-50%); width: min(616px, calc(100% - 24px));
  bottom: calc(76px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 14px;
  padding: 8px 8px 8px 16px; background: var(--inv); color: var(--on-inv); border-radius: 18px; box-shadow: var(--shadow); }
.sb-progress { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.sb-progress span { font-size: 13px; color: var(--inv-muted); }
.sb-progress span b { color: var(--on-inv); }
.sb-progress i { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 3px; }
.sb-progress u { height: 5px; border-radius: 3px; background: var(--inv-2); }
.sb-progress u.on { background: var(--bright); }
.savebar .btn { min-height: 44px; border: 0; background: var(--inv-2); color: var(--on-inv); white-space: nowrap; }
.savebar .btn.ready { background: var(--bright); color: var(--on-bright); }
@media (min-width: 760px) { .savebar { bottom: 24px; } }
/* On a phone the bar sits right on the tab bar, as one block, instead of floating above it. */
@media (max-width: 759px) {
  .savebar { left: 0; right: 0; width: auto; transform: translateZ(0); bottom: calc(65px + env(safe-area-inset-bottom, 0px));
    padding: 8px 12px 8px 16px; border-radius: 16px 16px 0 0; box-shadow: none; }
  .savebar .btn { min-height: 40px; }
}
.savebar.saved .sb-progress { gap: 2px; }

/* ---------- the group's coupon ---------- */
.meter { height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 3px; background: var(--green); }
.meter i.over { background: var(--red); }
.listtools { display: flex; justify-content: flex-end; }
/* The row over the match list is as tall on Tippa (the Odds/Folket switch) as on Kupongen (the legend), so the matches start at the same height. */
.listtools, .split-head > .legend { min-height: 38px; align-items: center; }
.legend { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); padding: 0 4px; }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 4px; display: block; }
.legend i.g { background: var(--green); }
.legend i.a { background: var(--amber); }
.legend i.r { box-shadow: inset 0 0 0 2px var(--ink); }
.season td:nth-child(n+2), .season th:nth-child(n+2) { text-align: right; }
.season tr.me td { font-weight: 700; }

/* ---------- account and admin ---------- */
.account { gap: 18px; }
/* The account card: who you are, then sections of rows, each with one action. */
.account-head { display: flex; align-items: center; gap: 12px; }
.account-head h2 { flex: 1; margin: 0; }
.avatar { width: 44px; height: 44px; border-radius: 22px; background: var(--inv); color: var(--on-inv); display: grid; place-items: center; font-weight: 700; font-size: 17px; flex: none; }
.asection { display: flex; flex-direction: column; }
.asection > .eyebrow { margin: 0 0 4px; }
.arow { display: flex; flex-direction: column; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line-2); }
.asection > .eyebrow + .arow { border-top: 0; }
.arow-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.arow-main > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.arow-main > div > span { overflow-wrap: anywhere; }
.arow-main .btn { flex: none; }
.arow-extra { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; background: var(--sunk); }
.arow-extra .logincode { background: var(--card); }
.more summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--green); }
.more[open] { display: flex; flex-direction: column; gap: 8px; }
.chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; background: var(--card); }
.chip.on { background: var(--green-soft); border-color: transparent; color: var(--green-ink); }
.chip.add { color: var(--green); }
.btn.logout { color: var(--red); }
.account > .btn.logout { align-self: flex-start; padding-left: 0; }
.arow-extra.settings h3 { margin: 6px 0 0; }
/* The spelläggare's list of players (and the owner's of groups): a name, and its actions under it. */
.plist { display: flex; flex-direction: column; }
.prow { display: flex; flex-direction: column; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line-2); }
.prow:first-child { border-top: 0; padding-top: 4px; }
.prow-main { display: flex; flex-direction: column; gap: 10px; }
.prow .who { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 15px; color: var(--ink); }
.prow .who.col { flex-direction: column; align-items: flex-start; gap: 2px; }
.prow .who .face { margin: 0; border: 0; flex: none; }
.prow .who b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow .row .btn { background: var(--card); }
@media (min-width: 640px) {
  .prow-main { flex-direction: row; align-items: center; justify-content: space-between; }
  .prow .row { justify-content: flex-end; }
}
.arow-extra.settings input { background: var(--card); }
/* Gruppens inställningar: two white panels on the sunk ground, the group's settings and the players. */
.arow-extra.settings { gap: 8px; padding: 8px; }
.spanel { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 12px; background: var(--card); }
.spanel h3 { margin: 0; font-size: 17px; }
.spanel input { background: var(--card); }
.spanel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.spanel-head + p { margin-top: -6px; }
.spanel-foot { display: flex; justify-content: flex-end; }
.spanel-foot .btn { min-width: 112px; }
.members { list-style: none; margin: 0 -8px; padding: 0; display: flex; flex-direction: column; }
.member { border-top: 1px solid var(--line-2); }
.member:first-child { border-top: 0; }
.mrow-btn { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px; border: 0; border-radius: 10px;
  background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
@media (hover: hover) { .mrow-btn:hover { background: var(--sunk); } }
.mrow-btn .face { margin: 0; border: 0; flex: none; width: 34px; height: 34px; border-radius: 17px; font-size: 13px; }
.mrow-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mrow-name b { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow-name b .muted { font-weight: 500; }
.mrow-name small { font-size: 13px; color: var(--ink-2); }
.chev { flex: none; width: 20px; height: 20px; color: var(--ink-3); transition: transform 0.15s ease; }
.chev svg { width: 20px; height: 20px; }
.member.open .chev { transform: rotate(90deg); }
.member-actions { display: flex; flex-direction: column; gap: 10px; padding: 0 8px 14px 54px; }
.member-actions .row { gap: 8px; }
.member-actions .playerlink { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.member-actions .playerlink .linkbox, .member-actions .playerlink .logincode { align-self: stretch; background: var(--sunk); }
.member-actions .confirm { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 10px; background: var(--red-soft); }
.member-actions .confirm p { margin: 0; font-size: 14px; color: var(--ink); }
.member-actions .confirm .btn:not(.danger) { background: var(--card); }
.btn.danger { background: var(--red); border-color: var(--red); color: var(--card); }
.btn.link.danger-link { color: var(--red); }
@media (max-width: 480px) {
  .member-actions { padding-left: 8px; }
  .member-actions .row { flex-direction: column; align-items: stretch; }
  .member-actions .row .btn.link { align-self: flex-start; padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .chev { transition: none; } }

/* ---------- match view ---------- */
.sheet { position: fixed; inset: 0; z-index: 20; background: var(--bg); display: flex; justify-content: center; overscroll-behavior: contain; }
.sheet[hidden] { display: none; }
.sheet-panel { width: 100%; max-width: 640px; height: 100%; display: flex; flex-direction: column; background: var(--bg); }
.sheet-head { flex: none; display: grid; grid-template-columns: 44px minmax(0, 1fr) 96px; align-items: center; background: var(--card);
  padding: calc(6px + env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) 6px max(8px, env(safe-area-inset-left, 0px)); }
.sheet-head > span { text-align: center; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.sheet-head > div { display: flex; justify-content: flex-end; }
.icon { width: 44px; height: 44px; border: 0; border-radius: 22px; background: transparent; color: var(--ink); display: grid; place-items: center; padding: 0; }
.icon:disabled { color: var(--line); }
.icon svg { width: 22px; height: 22px; }
.sheet-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.mhero { background: var(--card); border-radius: 0 0 24px 24px; padding: 6px 20px 18px; display: flex; flex-direction: column; gap: 16px; }
.mhero .eyebrow { text-align: center; }
.vs { display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); align-items: start; }
.side { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; }
.crest { width: 60px; height: 60px; border-radius: 30px; background: var(--sunk); display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--ink-2); }
.side b { font-weight: 700; font-size: 17px; line-height: 1.2; overflow-wrap: anywhere; }
.side small { font-size: 13px; color: var(--ink-2); }
.vs > span { text-align: center; font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--ink-3); padding-top: 18px; }
.bigsigns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bigsigns .sign { width: auto; height: 68px; border-radius: 14px; gap: 4px; }
.bigsigns .sign b { font-size: 28px; }
.bigsigns .sign small { font-size: 12px; }
.mhero .score { text-align: center; font-family: var(--display); font-weight: 700; font-size: 34px; }
.mtabs { margin: 14px 16px 0; }
.mpane { padding: 12px 16px 24px; display: flex; flex-direction: column; gap: 12px; }
.sheet-foot { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; background: var(--card); border-top: 1px solid var(--line);
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.sheet-foot.three { grid-template-columns: 1fr 1.3fr 1fr; }
.sheet-foot .btn { padding: 0 10px; }
@media (min-width: 700px) {
  .sheet { background: rgba(0, 0, 0, 0.45); padding: 24px; }
  .sheet-panel { height: auto; max-height: 100%; border-radius: 20px; overflow: hidden; }
}

/* match view blocks */
.blk-head { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; }
.key { display: flex; gap: 12px; font-size: 12px; color: var(--ink-2); }
.key span { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.key i { width: 10px; height: 10px; border-radius: 3px; display: block; background: var(--ink); }
.key i.o { background: var(--odds); }
.vrow { display: grid; grid-template-columns: 22px minmax(0, 1fr) 44px; gap: 10px; align-items: center; }
.vrow > b { font-family: var(--display); font-weight: 700; font-size: 22px; text-align: center; }
.vbars { display: flex; flex-direction: column; gap: 4px; }
.vbars span { display: block; height: 8px; border-radius: 4px; background: var(--sunk); overflow: hidden; }
.vbars span i { display: block; height: 100%; border-radius: 4px; background: var(--ink); }
.vbars span.o i { background: var(--odds); }
.vnums { display: flex; flex-direction: column; align-items: flex-end; font-size: 12px; line-height: 12px; gap: 4px; font-variant-numeric: tabular-nums; }
.vnums b { font-weight: 700; }
.vnums span { color: var(--odds-ink); font-weight: 600; }
.note { padding: 10px 12px; border-radius: 10px; background: var(--green-soft); color: var(--green-ink); font-size: 13px; }
.note.plain { background: var(--sunk); color: var(--ink-2); }
.gsigns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gsigns > div { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 12px; background: var(--sunk); min-width: 0; }
.gsigns > div > span:first-child { display: flex; align-items: baseline; gap: 6px; }
.gsigns b { font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1; }
.gsigns small { font-size: 12px; color: var(--ink-2); overflow-wrap: anywhere; line-height: 1.35; }
.chips5 { display: flex; gap: 4px; }
.fchip { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; font-size: 12px; font-weight: 700; font-style: normal; flex: none; }
.fchip.win { background: var(--green); color: var(--on-green); }
.fchip.draw { background: var(--draw); color: var(--on-draw); }
.fchip.loss { background: var(--loss); color: var(--on-loss); }
.fline { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.fline > span:first-child { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.games { display: flex; flex-direction: column; }
.game { display: grid; grid-template-columns: 24px 16px minmax(0, 1fr) 40px 48px; gap: 8px; align-items: center; min-height: 40px; border-top: 1px solid var(--line-2); font-size: 14px; }
.game > small { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.game > span:nth-child(3) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game > b { font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.game > span:last-child { font-size: 12px; color: var(--ink-3); text-align: right; }
.tiles2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tiles2 > div { padding: 12px; border-radius: 12px; background: var(--sunk); display: flex; flex-direction: column; min-width: 0; }
.tiles2 b { font-family: var(--display); font-weight: 700; font-size: 32px; line-height: 1.05; }
.tiles2 span { font-size: 13px; color: var(--ink-2); }
.experts { display: flex; flex-direction: column; }
.expert { border-top: 1px solid var(--line-2); }
.expert:first-child { border-top: 0; }
.expert summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 52px; cursor: pointer; }
.expert summary::-webkit-details-marker { display: none; }
.expert summary .xs { min-width: 32px; height: 32px; padding: 0 6px; border-radius: 9px; background: var(--green); color: var(--on-green); display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 18px; }
.expert summary > span:nth-child(2) { flex: 1; font-weight: 500; }
.expert summary svg { width: 18px; height: 18px; color: var(--ink-3); transition: transform 0.15s; }
.expert[open] summary svg { transform: rotate(90deg); }
.expert p { padding: 0 0 14px 44px; font-size: 14px; color: var(--ink-2); white-space: pre-line; }
.facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; font-size: 14px; }
.facts dt { color: var(--ink-2); }
.facts dd { margin: 0; font-weight: 600; text-align: right; }
.mkt { display: grid; grid-template-columns: minmax(0, 1fr) 96px 40px; gap: 12px; align-items: center; min-height: 40px; border-top: 1px solid var(--line-2); font-size: 14px; }
.mkt:first-of-type { border-top: 0; }
.mkt i { display: block; height: 8px; border-radius: 4px; background: var(--sunk); overflow: hidden; }
.mkt i span { display: block; height: 100%; border-radius: 4px; background: var(--green); }
.mkt b { text-align: right; font-variant-numeric: tabular-nums; }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.three > div { background: var(--sunk); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.three > div b { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.three > div small { font-size: 12px; color: var(--ink-2); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.move { font-size: 12px; font-weight: 600; }
.move.up { color: var(--loss); }
.move.down { color: var(--green); }
table.league th, table.league td { padding: 0 6px; height: 40px; text-align: right; }
table.league th:nth-child(2), table.league td:nth-child(2) { text-align: left; }
table.league td:nth-child(2) { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.league td:first-child { color: var(--ink-2); }
table.league td:last-child { font-weight: 700; }
table.league tr.me td { background: var(--green-soft); font-weight: 700; }

/* ---------- join ---------- */
.join { max-width: 440px; width: 100%; margin: 8vh auto 0; }
.join h1 { font-size: 38px; }
.intro { max-width: 440px; margin: 6vh auto 0; display: flex; flex-direction: column; gap: 10px; }
.intro h1 { font-family: var(--display); font-weight: 700; font-size: 40px; line-height: 1.02; letter-spacing: -0.005em; }
.intro ~ .join { margin-top: 16px; }
.intro ~ p { max-width: 440px; margin: 16px auto 0; }
.groups { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.groups p { width: 100%; }
.center { text-align: center; }
a.plain { color: var(--ink); font-weight: 600; text-decoration: none; }
/* Passkeys: the save prompt, and the login button under the start and join forms. */
.nudge { display: flex; flex-direction: column; gap: 10px; }
.nudge h3 { margin: 0; }
.alt { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 4px; }
.intro ~ .alt { max-width: 440px; margin: 12px auto 0; align-items: center; }
/* The start and join pages: logging in and starting (or joining) are two choices, one shown at a
   time. On a wide screen the intro sits beside the card, so everything fits without scrolling. */
.joinform, .loginpanel { display: flex; flex-direction: column; gap: 12px; }
.joinform[hidden], .loginpanel[hidden] { display: none; }
.loginpanel h3 { margin: 4px 0 0; text-align: center; }
.loginpanel > .btn { align-self: stretch; }
.lead { font-weight: 600; text-align: center; }
.points { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; color: var(--ink-2); }
.points li { padding-left: 22px; position: relative; }
.points li::before { content: ""; position: absolute; left: 4px; top: 0.55em; width: 8px; height: 8px; border-radius: 4px; background: var(--green); }
.points b { color: var(--ink); }
.steps li::marker { font-weight: 700; color: var(--ink); }
.emailform { display: flex; gap: 8px; width: 100%; }
.emailform input { flex: 1; min-width: 0; }
.stuck { display: flex; flex-direction: column; gap: 8px; }
.stuck[hidden] { display: none; }
.playerlink { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.or { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 13px; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; text-align: left; max-width: 300px; font-size: 15px; color: var(--ink); }
.startgrid { max-width: 440px; margin: 4vh auto 0; display: flex; flex-direction: column; gap: 16px; }
.startgrid .intro { margin: 0; }
.startgrid .stack { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 900px) {
  main.start, .topbar.wide { max-width: 980px; }
  .startgrid { max-width: none; display: grid; grid-template-columns: 1fr 440px; gap: 48px; align-items: start; margin-top: 8vh; }
  .startgrid .intro { position: sticky; top: 24px; padding-top: 24px; }
  .startgrid .intro h1 { font-size: 52px; }
}
/* Logging in with a code from the phone: the code as shown there, and the form that takes it. */
.logincode { font: 600 28px var(--mono); letter-spacing: 0.08em; text-align: center; padding: 12px; border-radius: 10px; background: var(--sunk); user-select: all; }
.codeform { display: flex; gap: 8px; width: 100%; }
.codeform input { flex: 1; min-width: 0; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.06em; }
/* Logging in a computer with the phone: the QR code, and the number the phone shows. */
.qrbox { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.qrbox.qrside { flex-direction: row; align-items: center; justify-content: center; gap: 16px; }
.qrbox.qrside .qr { width: 168px; height: 168px; flex: none; }
.qrtext { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.qrbox.asking { flex-direction: column; }
.qrbox[hidden] { display: none; }
.qr { width: 200px; height: 200px; border-radius: 8px; }
.qrnumber { font: 700 36px var(--mono); letter-spacing: 0.15em; text-align: center; }
input.qrnumber { width: 100%; padding: 8px; }
.qrform { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; max-width: 260px; }
.btn.link.inline { min-height: 0; padding: 0; font-size: inherit; display: inline; }
/* Live scores: a sign that is right as things stand gets an amber ring until its match ends. */
.sign.out.live { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--amber); }
b.live { color: var(--amber-ink); }
.pill.live { background: var(--amber-soft); color: var(--amber-ink); }
.mhero .score small { display: block; font-family: var(--sans); font-weight: 500; font-size: 13px; color: var(--ink-2); }
.mhero .score.live small { color: var(--amber-ink); }
.legend i.r.live { box-shadow: inset 0 0 0 2px var(--amber); }
/* Säsongen: summary tiles and the group's rounds. */
.round { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: 0; border-top: 1px solid var(--line-2);
  background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.round:first-child { border-top: 0; }
@media (hover: hover) { .round:hover { background: var(--sunk); } }
.round > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.round > span:first-child { flex: 1; }
.round .right { align-items: flex-end; text-align: right; }
.round small { font-size: 12.5px; color: var(--ink-2); }
.round svg { width: 18px; height: 18px; color: var(--ink-3); flex: none; }

/* Inviting: the button on the home screen, and the dialog with the QR code and the link. */
.btn svg { width: 18px; height: 18px; flex: none; }
dialog.invite { width: min(420px, calc(100% - 32px)); border: 0; border-radius: 20px; padding: 20px; background: var(--card); color: var(--ink);
  box-shadow: var(--shadow); }
dialog.invite[open] { display: flex; flex-direction: column; gap: 14px; }
dialog.invite::backdrop { background: rgba(0, 0, 0, 0.45); }
.invite-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.invite-head h2 { margin: 0; }
dialog.invite p { margin: 0; }
.invite-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.invite-qr { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px; border-radius: 14px; background: var(--sunk); }
label.check { flex-direction: row; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
label.check input { width: 22px; height: 22px; min-height: 0; margin: 0; accent-color: var(--green); flex: none; }
label.check span { display: flex; flex-direction: column; }
label.check b { color: var(--ink); font-size: 15px; font-weight: 600; }
label.check small { font-size: 13px; color: var(--ink-2); }
/* Kupongen while the matches are on: the standings at the top, in a card like the round's. */
.pill.live { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 7px; height: 7px; border-radius: 4px; background: currentColor; animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.25; } }
.strip { display: grid; grid-template-columns: repeat(13, 1fr); gap: 3px; }
.strip i { height: 6px; border-radius: 3px; background: var(--track); }
.strip i.hit, .strip i.done { background: var(--green); }
.strip i.miss { background: var(--loss); }
.strip i.live { animation: blink 1.6s ease-in-out infinite; }
.ranks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line-2); }
.ranks li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 44px; padding: 6px 0; border-bottom: 1px solid var(--line-2); }
.ranks li:last-child { border-bottom: 0; padding-bottom: 0; }
.ranks .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranks .who small { color: var(--ink-2); }
.ranks li.me .who { font-weight: 700; }
.ranks b { font-family: var(--display); font-size: 20px; line-height: 1; font-variant-numeric: tabular-nums; }
.ranks b small { font-family: var(--sans); font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .dot, .strip i.live { animation: none; } }

/* ---------- Säsongen: topplista and awards ---------- */
.season.top td { white-space: nowrap; }
.season.top td.on { font-weight: 700; color: var(--ink); }
.season.top td:nth-child(n+2) { color: var(--ink-2); }
.season.top tr.me td { font-weight: 700; color: var(--ink); }
.season.top tr.late td { color: var(--ink-3); }
.awards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.award { padding: 12px; border-radius: 12px; background: var(--sunk); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.award .eyebrow { font-size: 11px; }
.award b { font-size: 17px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.award-value { font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.05; color: var(--green); }
.award small { font-size: 12px; color: var(--ink-3); }
.season.top th, .season.top td { padding: 8px 4px; }
.season.top th:first-child, .season.top td:first-child { padding-left: 0; }
.season.top th:last-child, .season.top td:last-child { padding-right: 0; }
.season.top .who { display: flex; align-items: center; gap: 10px; }
.season.top td { height: 44px; }

/* ---------- Allas tips: everyone's tips in large type, and printable ---------- */
.btn.bigview { width: 100%; white-space: nowrap; }
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn.back { align-self: flex-start; padding-left: 0; margin-bottom: -8px; }
main.wide { max-width: 1120px; }
/* Tippa and Kupongen on a wide screen: the matches, and beside them the round or the price and the steps. */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "head ." "main side"; gap: 12px 24px; align-items: start; }
.split-head { grid-area: head; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.split-main { grid-area: main; }
.split-side { grid-area: side; }
.split-main, .split-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.split-side { position: sticky; top: 16px; }
.topbar.full { max-width: 1120px; }
.savebar.inline { position: sticky; bottom: 24px; left: auto; transform: none; width: auto; }
.ohead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 0 4px; }
.ohead h1 { font-size: 40px; margin-top: 2px; }
.ohead .btn { white-space: nowrap; }

/* The summary: three figures and who hasn't tipped. */
.oversum { background: var(--card); border-radius: 18px; padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.ostats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 24px; }
.ostat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ostat span { font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.ostat b { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.waiting { display: flex; align-items: baseline; gap: 10px; font-size: 16px; color: var(--ink); padding-top: 14px; border-top: 1px solid var(--line-2); }
.waiting i { width: 10px; height: 10px; border-radius: 50%; background: var(--amber); flex-shrink: 0; transform: translateY(-1px); }
.waiting b { font-weight: 700; }
.waiting > span { flex: 1; min-width: 0; }
.waiting > .btn { align-self: center; flex: none; }
.round-card .waiting { margin-top: 2px; }
.card > .waiting:only-child { border-top: 0; padding-top: 0; }
/* Lämna in: the spelläggare's steps, a number (or a tick) and what to do. */
.asteps { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; }
.astep { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-2); }
.astep:first-child { border-top: 0; padding-top: 4px; }
.astep h4 { margin: 3px 0 2px; font-size: 15px; }
.astep p { margin: 0 0 4px; }
.astep .row { margin-top: 8px; gap: 6px 8px; }
.astep .row .btn:not(.link) { min-height: 40px; padding: 0 14px; font-size: 14px; }
.astep .row .btn.link { padding: 0 6px; }
.astep .row .btn.link:first-child { padding-left: 0; }
.astep-mark { width: 28px; height: 28px; border-radius: 14px; display: grid; place-items: center; font-weight: 700; font-size: 14px; background: var(--sunk); color: var(--ink-2); }
.astep.now .astep-mark { background: var(--ink); color: var(--bg); }
.astep.done .astep-mark { background: var(--green); color: var(--on-green); }
.astep.done h4 { color: var(--ink-2); }

.otools { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.olegend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--ink); }
.olegend span { display: inline-flex; align-items: center; gap: 7px; }
.olegend i { width: 16px; height: 16px; border-radius: 5px; background: var(--sunk); box-shadow: inset 0 0 0 1px var(--line); }
.olegend i.on { background: var(--green); box-shadow: none; }
.olegend i.cover { background: var(--amber); box-shadow: none; }
.olegend i.out { background: transparent; box-shadow: inset 0 0 0 2px var(--ink); }
.olegend i.hit { background: var(--green-soft); box-shadow: inset 0 0 0 2px var(--green); }
.olegend .muted { color: var(--ink-2); }

/* Per match */
.omatches { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.omatch { background: var(--card); border-radius: 18px; padding: 14px; display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 14px; align-items: center; break-inside: avoid; }
.omatch-head { display: flex; gap: 12px; align-items: flex-start; min-width: 0; padding-left: 4px; }
.omatch-head .no { flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px; background: var(--sunk); color: var(--ink-2);
  display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 19px; }
.omatch-head .teams { display: flex; flex-direction: column; min-width: 0; font-size: 18px; font-weight: 650; line-height: 1.3; padding-top: 2px; }
.omatch-head .teams small { font-size: 14px; font-weight: 500; color: var(--ink-2); margin-top: 4px; }
.opicks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.opick { position: relative; border-radius: 14px; background: var(--sunk); padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.opick::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.opick-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.opick .sign { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--raised); color: var(--ink);
  font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1; }
.opick .count { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.opick .count b { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.opick .count small { font-size: 14px; color: var(--ink-2); }
.opick .folk { margin-left: auto; font-size: 13px; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.opick .tag { margin-left: auto; font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 99px; color: var(--ink); box-shadow: inset 0 0 0 1.5px currentColor; }
.obar { height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.obar i { display: block; height: 100%; border-radius: inherit; background: var(--ink-3); }
.opick .names { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 17px; line-height: 1.35; color: var(--ink); }
.opick .names .me { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.opick .names .none { color: var(--ink-3); }
.opick.on { background: var(--green-tint); }
.opick.on .sign { background: var(--green); color: var(--on-green); }
.opick.on .obar i { background: var(--green); }
.opick.cover { background: var(--amber-tint); }
.opick.cover .sign { background: var(--amber); color: var(--on-amber); }
.opick.cover .obar i { background: var(--amber); }
.opick.on .obar, .opick.cover .obar { background: var(--card); }
.opick.out .sign { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ink); }
.opick.out.live .tag { background: var(--amber); color: var(--on-amber); box-shadow: none; }
@media (max-width: 760px) {
  .omatch { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px; }
  .omatch-head { padding-left: 2px; }
  .omatch-head .teams { flex-direction: row; flex-wrap: wrap; column-gap: 6px; font-size: 18px; }
  .omatch-head .teams > span:nth-child(2)::before { content: "– "; }
  .omatch-head .teams small { flex-basis: 100%; margin-top: 2px; }
}
@media (max-width: 520px) {
  .ohead h1 { font-size: 34px; }
  .oversum { padding: 14px 16px; }
  .ostats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
  .ostat.wide { grid-column: 1 / -1; order: 1; }
  .ostat b { font-size: 19px; }
  .omatch { padding: 10px; border-radius: 16px; }
  .opicks { gap: 5px; }
  .opick { padding: 8px 7px 10px; gap: 7px; border-radius: 12px; }
  .opick-top { flex-wrap: wrap; gap: 4px 8px; }
  .opick .sign { width: 30px; height: 30px; font-size: 20px; border-radius: 8px; }
  .opick .count b { font-size: 18px; }
  .opick .count small { font-size: 12.5px; }
  .opick .folk, .opick .tag { margin-left: 0; flex-basis: 100%; font-size: 12px; }
  .opick .tag { flex-basis: auto; }
  .opick .names { flex-direction: column; gap: 1px; font-size: 15px; line-height: 1.3; }
  .olegend .muted { display: none; }
}

/* Per person */
.ogrid { background: var(--card); border-radius: 18px; overflow: hidden; }
.bigtips { width: 100%; border-collapse: separate; border-spacing: 0; }
.bigtips th, .bigtips td { padding: 8px 6px; border-bottom: 1px solid var(--line-2); text-align: center; vertical-align: middle; }
.bigtips thead th { background: var(--sunk); border-bottom: 1px solid var(--line); padding: 12px 8px; font-size: 15px; font-weight: 650;
  letter-spacing: 0; text-transform: none; color: var(--ink); line-height: 1.2; min-width: 64px; }
.bigtips thead th.me { color: var(--green-ink); }
.bigtips .match { position: sticky; left: 0; z-index: 1; background: var(--card); text-align: left; padding: 10px 14px 10px 16px;
  border-right: 1px solid var(--line); min-width: 210px; letter-spacing: 0; text-transform: none; }
.bigtips thead .match { background: var(--sunk); color: var(--ink-2); font-weight: 600; }
.bigtips .mm { display: flex; align-items: center; gap: 12px; }
.bigtips .match .no { flex-shrink: 0; width: 22px; height: auto; background: none; border-radius: 0; display: block; font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--ink-3); text-align: right; }
.bigtips .match .teams { display: flex; flex-direction: column; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.bigtips td .s { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
  font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1; color: var(--ink); }
.bigtips td.hit .s { background: var(--green-soft); color: var(--green-ink); box-shadow: inset 0 0 0 2px var(--green); }
.bigtips td.miss .s { color: var(--ink-3); }
.bigtips tbody tr:last-child th, .bigtips tbody tr:last-child td { border-bottom: 0; }
/* A line between members, so each person's signs read as a column. */
.bigtips .p + .p { border-left: 1px solid var(--line); }
.bigtips thead .p + .p { border-left-color: var(--line); }
.bigtips td.coupon, .bigtips th.coupon { background: var(--green-soft); border-right: 1px solid var(--line); }
.bigtips thead th.coupon { color: var(--green-ink); }
.csigns { display: inline-flex; gap: 3px; }
.csigns .c { display: inline-grid; place-items: center; width: 30px; height: 34px; border-radius: 8px; font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1; }
.csigns .c.on { background: var(--green); color: var(--on-green); }
.csigns .c.cover { background: var(--amber); color: var(--on-amber); }
.csigns .c.out { box-shadow: 0 0 0 2px var(--green-soft), 0 0 0 4px var(--ink); }
.bigtips td.res b { display: block; font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1; }
.bigtips td.res small { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-top: 3px; }
.bigtips tfoot th, .bigtips tfoot td { border-bottom: 0; border-top: 1px solid var(--line); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bigtips tfoot .match { font-size: 16px; color: var(--ink-2); }
@media (max-width: 600px) {
  /* Narrow match and coupon columns, so three or four players show before you swipe. */
  .bigtips .match { min-width: 112px; max-width: 112px; padding: 8px 6px 8px 8px; }
  .bigtips .mm { gap: 6px; }
  .bigtips .match .no { width: 14px; font-size: 14px; }
  .bigtips .match .teams { font-size: 13px; min-width: 0; }
  .bigtips .match .teams span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bigtips thead th { font-size: 13px; min-width: 44px; max-width: 64px; padding: 10px 3px; }
  .bigtips thead th.p span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bigtips th, .bigtips td { padding: 6px 3px; }
  .bigtips td .s { width: 32px; height: 32px; font-size: 20px; }
  .csigns { gap: 2px; }
  .csigns .c { width: 22px; height: 30px; font-size: 18px; border-radius: 6px; }
}

/* Printing: always light, black on white, without the app's frame, on one A4 page: per match
   standing, per person lying down. */
@page { size: A4 portrait; margin: 10mm; }
@page wide { size: A4 landscape; margin: 10mm; }
main.person { page: wide; }
@media print {
  :root, :root[data-theme="dark"], :root:not([data-theme="light"]) {
    --bg: #ffffff; --card: #ffffff; --sunk: #f1f3ee; --track: #e3e6df; --line: #b9c0b9; --line-2: #dde1da;
    --ink: #000000; --ink-2: #3a423d; --ink-3: #6b736e;
    --green: #0a7a45; --on-green: #ffffff; --green-soft: #e3f1e8; --green-ink: #075c34;
    --amber: #f5b83d; --on-amber: #2a1b00; --amber-soft: #fcf0d6; --amber-ink: #6b4200;
    --inv: #101814; --on-inv: #ffffff;
    color-scheme: light;
  }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: #fff; color: #000; font-size: 10pt; }
  .topbar, .tabbar, .savebar, .noprint, .error, dialog, .btn { display: none !important; }
  main, main.wide { max-width: none; padding: 0; gap: 6pt; }
  .ohead { padding: 0; }
  .ohead h1 { font-size: 20pt; }
  .ohead .eyebrow { font-size: 8pt; }
  .oversum { padding: 0 0 5pt; border-radius: 0; border-bottom: 1px solid var(--line); flex-direction: row; align-items: baseline; gap: 18pt; }
  .ostats { display: flex; gap: 18pt; }
  .ostat { flex-direction: row; align-items: baseline; gap: 4pt; }
  .ostat span { font-size: 8.5pt; }
  .ostat b { font-size: 10.5pt; }
  .waiting { border: 0; padding: 0; font-size: 9pt; gap: 4pt; }
  .waiting i { width: 6pt; height: 6pt; }
  .otools { justify-content: flex-start; }
  .olegend { font-size: 8pt; gap: 4pt 12pt; }
  .olegend i { width: 9pt; height: 9pt; border-radius: 2pt; }
  .olegend .muted { display: none; }

  .omatches { gap: 0; }
  .omatch { grid-template-columns: 40mm minmax(0, 1fr); gap: 5pt; padding: 3pt 0; border-radius: 0; border-bottom: 1px solid var(--line-2); }
  .omatch:last-child { border-bottom: 0; }
  .omatch-head { gap: 5pt; padding: 0; }
  .omatch-head .no { width: 15pt; height: 15pt; border-radius: 3pt; font-size: 10pt; }
  .omatch-head .teams { font-size: 10.5pt; line-height: 1.2; padding-top: 1pt; }
  .omatch-head .teams small { font-size: 8pt; margin-top: 1pt; }
  .opicks { gap: 4pt; }
  .opick { display: block; padding: 3pt 5pt 4pt; border-radius: 4pt; line-height: 1.3; }
  .opick-top { display: inline-flex; vertical-align: baseline; gap: 4pt; margin-right: 5pt; }
  .opick .sign { width: 13pt; height: 13pt; border-radius: 3pt; font-size: 10pt; box-shadow: inset 0 0 0 0.75pt var(--line); }
  .opick.on .sign, .opick.cover .sign { box-shadow: none; }
  .opick .count b { font-size: 9.5pt; }
  .opick .count small { font-size: 8pt; }
  .opick .folk, .obar { display: none; }
  .opick .tag { margin-left: 0; font-size: 7pt; padding: 0 4pt; }
  .opick .names { display: inline; font-size: 10pt; line-height: 1.3; }
  .opick .names span { display: inline-block; margin-right: 6pt; white-space: nowrap; }
  .opick .names .me { text-decoration-thickness: 1pt; text-underline-offset: 1.5pt; }
  .opick.on::after, .opick.cover::after { box-shadow: inset 0 0 0 1pt var(--green); }
  .opick.cover::after { box-shadow: inset 0 0 0 1pt var(--amber); }
  .opick.out .sign { box-shadow: 0 0 0 1pt #fff, 0 0 0 2pt #000; }

  .ogrid { border-radius: 0; border: 1px solid var(--line); }
  .scroll { overflow: visible; }
  .bigtips th, .bigtips td { padding: 2.5pt 3pt; }
  .bigtips thead th { font-size: 10.5pt; padding: 5pt 3pt; min-width: 0; }
  .bigtips .match { position: static; min-width: 0; padding: 2.5pt 6pt; }
  .bigtips .mm { gap: 5pt; }
  .bigtips .match .no { font-size: 10pt; width: 12pt; }
  .bigtips .match .teams { font-size: 10.5pt; line-height: 1.2; }
  .bigtips td .s { width: 20pt; height: 20pt; border-radius: 5pt; font-size: 17pt; }
  .csigns .c { width: 16pt; height: 20pt; border-radius: 4pt; font-size: 15pt; }
  .bigtips td.res b { font-size: 13pt; }
  .bigtips td.res small { font-size: 7pt; margin-top: 1pt; }
  .bigtips tfoot th, .bigtips tfoot td { font-size: 11pt; }
  .ostat, .waiting { white-space: nowrap; }

  /* Big groups: smaller type so it still fits on one page. */
  .omatches.dense .opick .names { font-size: 8.5pt; line-height: 1.25; }
  .omatches.dense .opick { padding: 2pt 4pt 3pt; }
  .omatches.dense .omatch-head .teams { font-size: 10pt; }
  .omatches.dense .opick .names span { margin-right: 4.5pt; }
  .omatches.dense .omatch { padding: 1.5pt 0; }
  /* Over 18 people the names don't fit one page at a readable size, so it runs onto a second,
     never splitting a match. */
  .bigtips.dense thead th { font-size: 8.5pt; }
  .bigtips.dense td .s { width: 17pt; height: 17pt; font-size: 14.5pt; border-radius: 4pt; }
  .bigtips.dense th, .bigtips.dense td { padding-left: 1.5pt; padding-right: 1.5pt; }
  .bigtips.dense .match { padding-left: 4pt; padding-right: 4pt; }
  .bigtips.dense .match .teams { font-size: 9pt; }
  .bigtips.many thead th { vertical-align: bottom; padding: 3pt 1pt; }
  .bigtips.many thead th:not(.match):not(.coupon):not(.res) span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; display: inline-block; }
  .bigtips.many td .s { width: 13pt; height: 14pt; font-size: 11.5pt; }
  .bigtips.many tfoot td { font-size: 9pt; }
}
.card > .astep { padding: 0; border-top: 0; }