/* Powerplay, from stryket's "Matchdag" look in rink blue: a calm surface, one blue 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: #f1f3f6; --card: #ffffff; --sunk: #f1f3f6; --track: #e3e7ed;
  /* raised: the picked side of a switch, a step above its track. off: a button that can't be pressed. */
  --raised: #ffffff; --off: #f1f3f6;
  /* tint: the ground of a coupon sign's box in Allas tips per match, calmer than -soft in dark. */
  --green-tint: #e2ebf7; --amber-tint: #fbeacb;
  --ink: #0f1620; --ink-2: #4a5563; --ink-3: #636e7d; --line: #dfe3ea; --line-2: #eaedf2;
  --green: #1756a9; --on-green: #ffffff; --green-soft: #e2ebf7; --green-ink: #0f3f80;
  --amber: #f5b83d; --on-amber: #3a2600; --amber-soft: #fbeacb; --amber-ink: #7a4b00;
  --odds: #e3a21a; --odds-ink: #8a5a00;
  --loss: #c4500f; --on-loss: #ffffff; --draw: #d3d9e2; --on-draw: #2a3442;
  --inv: #0f1620; --inv-2: #2a3442; --on-inv: #ffffff; --inv-muted: #a8b3c2; --bright: #5aa9ff; --on-bright: #06162b;
  --red: #b3261e; --red-soft: #fbe3e0;
  --shadow: 0 8px 24px rgba(15, 22, 32, 0.18);
  --lift: 0 1px 2px rgba(15, 22, 32, 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: #0b1016; --card: #151c24; --sunk: #1e2731; --track: #1e2731;
    --raised: #2e3a48; --off: #10161d; --green-tint: #142a46; --amber-tint: #2e2716;
    --ink: #e6ebf2; --ink-2: #a8b3c2; --ink-3: #8b97a8; --line: #2a3442; --line-2: #212a35;
    --green: #5aa9ff; --on-green: #06162b; --green-soft: #12294a; --green-ink: #9ccaff;
    --amber-soft: #3b2c10; --amber-ink: #f5c566; --odds-ink: #f0b954;
    --loss: #ff8a4c; --on-loss: #1f0d03; --draw: #384454; --on-draw: #e6ebf2;
    --inv: #243040; --inv-2: #31404f; --on-inv: #e6ebf2; --inv-muted: #a8b3c2;
    --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: #0b1016; --card: #151c24; --sunk: #1e2731; --track: #1e2731;
  --raised: #2e3a48; --off: #10161d; --green-tint: #142a46; --amber-tint: #2e2716;
  --ink: #e6ebf2; --ink-2: #a8b3c2; --ink-3: #8b97a8; --line: #2a3442; --line-2: #212a35;
  --green: #5aa9ff; --on-green: #06162b; --green-soft: #12294a; --green-ink: #9ccaff;
  --amber-soft: #3b2c10; --amber-ink: #f5c566; --odds-ink: #f0b954;
  --loss: #ff8a4c; --on-loss: #1f0d03; --draw: #384454; --on-draw: #e6ebf2;
  --inv: #243040; --inv-2: #31404f; --on-inv: #e6ebf2; --inv-muted: #a8b3c2;
  --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; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.4 var(--sans); font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; }
body.locked { overflow: hidden; }
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)); }
.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; 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; }
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: transparent; 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); }
/* 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; }
/* A player duel: "Flest mål" in a small pill, so it reads as a different kind of row. */
.mlink .tag.duel { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 0 6px; border-radius: 99px; background: var(--green-soft); color: var(--green-ink); vertical-align: 1px; }
.mhero .duelnote { text-align: center; margin: -4px 0 10px; }
.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: none; 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; }
.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: #f1f3f6; --track: #e3e7ed; --line: #b9c0cb; --line-2: #dde2e9;
    --ink: #000000; --ink-2: #3a4350; --ink-3: #636e7d;
    --green: #1756a9; --on-green: #ffffff; --green-soft: #e2ebf7; --green-ink: #0f3f80;
    --amber: #f5b83d; --on-amber: #2a1b00; --amber-soft: #fcf0d6; --amber-ink: #6b4200;
    --inv: #0f1620; --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; }