/* Stryktipset Friends League - simple, clean styling */

:root {
    --bg: #f4f6f8;
    --card-bg: #ffffff;
    --border: #dde2e7;
    --text: #1f2937;
    --muted: #6b7280;
    --primary: #1d6f42; /* Stryktipset-green-ish */
    --primary-dark: #155631;
    --secondary: #2563eb;
    --danger: #b91c1c;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
}

.site-header {
    background: var(--primary);
    color: white;
}
.site-header-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0.9rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.brand {
    color: white;
    font-weight: 700;
    font-size: 1.2rem;
    text-decoration: none;
}
.main-nav a {
    color: white;
    text-decoration: none;
    margin-left: 1rem;
    opacity: 0.9;
}
.main-nav a:hover { opacity: 1; text-decoration: underline; }
.nav-user { margin-left: 1rem; opacity: 0.85; }

.site-main {
    max-width: 1000px;
    margin: 1.5rem auto;
    padding: 0 1.25rem;
}

.site-footer {
    text-align: center;
    color: var(--muted);
    font-size: 0.85rem;
    padding: 2rem 0;
}

.card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}

.login-card {
    max-width: 400px;
    margin: 3rem auto;
    text-align: center;
}

h1 { margin-top: 0; }
.muted { color: var(--muted); }

.stacked-form { display: flex; flex-direction: column; gap: 0.75rem; align-items: stretch; }
.text-input, input[type=text] {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 1rem;
}

.btn {
    display: inline-block;
    padding: 0.55rem 1.1rem;
    border-radius: 6px;
    border: none;
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-secondary { background: var(--secondary); color: white; }
.btn-secondary:hover { background: #1e4fbf; }
.btn-small { padding: 0.35rem 0.7rem; font-size: 0.85rem; }

.field-error { color: var(--danger); font-size: 0.9rem; }

.messages { list-style: none; padding: 0; margin: 0 0 1rem 0; }
.message {
    padding: 0.6rem 1rem;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}
.message-success { background: #dcfce7; color: #166534; }
.message-info { background: #dbeafe; color: #1e40af; }
.message-warning { background: #fef3c7; color: #92400e; }
.message-error { background: #fee2e2; color: #991b1b; }

.round-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.round-progress {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.5rem 0.9rem;
    font-size: 0.9rem;
}

.two-column {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 1.25rem;
    align-items: start;
}
@media (max-width: 800px) {
    .two-column { grid-template-columns: 1fr; }
}

.coupon-table, .summary-table, .plain-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}
.coupon-table th, .coupon-table td,
.summary-table th, .summary-table td,
.plain-table th, .plain-table td {
    border-bottom: 1px solid var(--border);
    padding: 0.5rem 0.4rem;
    text-align: center;
}
.coupon-table .col-match, .summary-table td:nth-child(2) {
    text-align: left;
}
.match-number { color: var(--muted); margin-right: 0.25rem; }
.col-choice { width: 44px; }

.summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.winner-banner {
    background: #fef9c3;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 0.6rem 0.9rem;
    font-weight: 600;
}

.back-link {
    display: inline-block;
    margin-bottom: 1rem;
    color: var(--secondary);
    text-decoration: none;
}
.back-link:hover { text-decoration: underline; }

/* ===================================================================
   Multi-choice coupon, colour-coded summary boxes, MG toggles
   Colours match the workbook fills:
     green  92D050  = Grundraden
     yellow FFFF00  = Klara garderingar
     orange FFC000  = Oense, up for discussion
   =================================================================== */

.small { font-size: 0.85rem; }

/* --- Streck badge on your own coupon --- */
.col-streck { width: 62px; }
.streck-badge {
    display: inline-block;
    min-width: 46px;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: #eef1f4;
    color: var(--muted);
}
.streck-spik { background: #dcfce7; color: #166534; }
.streck-halv { background: #fef3c7; color: #92400e; }
.streck-hel  { background: #fee2e2; color: #991b1b; }

/* --- MG --- */
.mg-tag {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    background: var(--secondary);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
}
.mg-toggle {
    border: 1px solid var(--border);
    background: white;
    color: var(--muted);
    border-radius: 4px;
    padding: 0.15rem 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
}
.mg-toggle:hover { border-color: var(--secondary); }
.mg-toggle.on {
    background: var(--secondary);
    border-color: var(--secondary);
    color: white;
}

/* --- Clickable colour boxes in the summary --- */
.mark-box {
    width: 34px;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: white;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: transform 0.06s ease;
}
.mark-box:hover  { border-color: var(--muted); }
.mark-box:active { transform: scale(0.94); }
.mark-box.color-0 { background: white; }
.mark-box.color-1 { background: #92D050; border-color: #6ea83c; }
.mark-box.color-2 { background: #FFFF00; border-color: #d6d600; }
.mark-box.color-3 { background: #FFC000; border-color: #cc9900; }

/* Legend swatches */
.legend { font-size: 0.8rem; color: var(--muted); margin: 0.5rem 0 0.75rem; }
.swatch {
    display: inline-block;
    width: 12px; height: 12px;
    border: 1px solid var(--border);
    border-radius: 3px;
    margin: 0 0.15rem 0 0.6rem;
    vertical-align: -1px;
}
.swatch.c1 { background: #92D050; }
.swatch.c2 { background: #FFFF00; }
.swatch.c3 { background: #FFC000; }

/* --- Totals / group coupon --- */
.total-cell { font-weight: 700; }
.totals-row td {
    font-weight: 700;
    background: #f7f9fa;
    border-top: 2px solid var(--border);
}
.group-box {
    margin-top: 1.25rem;
    padding: 0.9rem 1rem;
    background: #f7f9fa;
    border: 1px solid var(--border);
    border-radius: 8px;
}
.group-box h3 { margin: 0 0 0.6rem; font-size: 1rem; }
.kv-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.kv-table td { padding: 0.25rem 0; }
.kv-table td:last-child { text-align: right; font-weight: 600; }


/* ===================================================================
   Landing page + Administrate
   =================================================================== */

.hero { margin-bottom: 1.25rem; }
.hero h1 { margin-bottom: 0.25rem; }

.widget-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.9rem;
    margin-bottom: 1.25rem;
}
.widget {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.widget-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}
.widget-value { font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.widget-note { font-size: 0.8rem; color: var(--muted); }

/* Placeholder widgets are visibly unfinished on purpose. */
.widget-placeholder {
    border-style: dashed;
    background: repeating-linear-gradient(
        45deg, #fbfcfd, #fbfcfd 8px, #f5f7f9 8px, #f5f7f9 16px
    );
}
.widget-placeholder .widget-value { color: var(--muted); }

.quick-links { display: flex; flex-direction: column; gap: 0.5rem; }
.mockup-note {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--border);
}
.mockup-note h3 { margin: 0 0 0.35rem; font-size: 0.95rem; }

.notice {
    background: #dbeafe;
    border: 1px solid #bfdbfe;
    color: #1e40af;
    border-radius: 8px;
    padding: 0.6rem 0.9rem;
    font-size: 0.9rem;
}
.source-tag {
    font-size: 0.75rem;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    background: #eef1f4;
    color: var(--muted);
}
button[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ===================================================================
   Results: correct row, scoring, payouts
   =================================================================== */

.button-row { display: flex; gap: 0.5rem; }

.btn-result { background: #b45309; color: white; }
.btn-result:hover { background: #92400e; }

/* The correct coupon, sign by sign */
.correct-row {
    display: grid;
    grid-template-columns: repeat(13, minmax(0, 1fr));
    gap: 4px;
    margin: 0.75rem 0 0.5rem;
}
.correct-cell {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.35rem 0.1rem;
    text-align: center;
    background: white;
}
.correct-cell.hit  { background: #dcfce7; border-color: #86efac; }
.correct-cell.miss { background: #fee2e2; border-color: #fca5a5; }
.cr-num {
    display: block;
    font-size: 0.65rem;
    color: var(--muted);
    line-height: 1;
}
.cr-sign {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
}
@media (max-width: 640px) {
    .correct-row { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

/* Outcome column inside the summary table */
.outcome-sign {
    display: inline-block;
    min-width: 22px;
    padding: 0.1rem 0.25rem;
    border-radius: 4px;
    font-weight: 700;
    background: #eef1f4;
}
.outcome-sign.hit  { background: #dcfce7; color: #166534; }
.outcome-sign.miss { background: #fee2e2; color: #991b1b; }

.results-card { border-color: #cbd5e1; }
.winner-row td { background: #fef9c3; font-weight: 600; }
.payout-heading { margin: 1.25rem 0 0.4rem; font-size: 1rem; }
code {
    background: #eef1f4;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    letter-spacing: 0.12em;
    font-weight: 700;
}

/* Date-based coupon creation form */
.date-form {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0.75rem 0;
}
.date-form-row { display: flex; align-items: center; gap: 0.5rem; }
.date-form-row label { font-size: 0.9rem; }
.date-form input[type=date] {
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.95rem;
}
.checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: var(--muted);
}
.checkbox-row input[type=checkbox] { width: 16px; height: 16px; }

/* ===================================================================
   Coupon: player picker, read-only state, result highlighting
   =================================================================== */

.coupon-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.player-picker { display: flex; align-items: center; gap: 0.5rem; }
.player-picker label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}
.player-select {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    background: white;
    cursor: pointer;
}

.ro-badge {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: #eef1f4;
    color: var(--muted);
}
.closed-tag {
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

/* Read-only coupons are visibly inert. */
.coupon-table.is-readonly { opacity: 0.92; }
.coupon-table.is-readonly input[type=checkbox] { cursor: not-allowed; }

/* Superseded by .sign-pick / .sign-face below - the coupon now uses
   Svenska Spel's box design instead of bare checkboxes. */

.result-swatch {
    background: #f0fdf4;
    border: 2px solid #16a34a;
    width: 14px;
    height: 14px;
}

.col-hit { width: 40px; }
.hit-mark  { color: #16a34a; font-weight: 700; font-size: 1.05rem; }
.miss-mark { color: #dc2626; font-weight: 700; font-size: 1.05rem; }

/* Row for the player whose coupon is currently loaded on the left */
.viewing-row td { background: #eff6ff; font-weight: 600; }
/* Plain links inside tables (e.g. clickable leaderboard names).
   Scoped with :not(.btn) so it doesn't repaint buttons that sit in the
   same tables - an unscoped version made the View buttons on Historical
   Games blue-on-blue and unreadable. */
.plain-table a:not(.btn) { color: var(--secondary); text-decoration: none; }
.plain-table a:not(.btn):hover { text-decoration: underline; }

/* Buttons keep their own colours wherever they appear. */
.btn, .btn:hover { text-decoration: none; }
a.btn-primary, a.btn-primary:hover, a.btn-primary:visited { color: #fff; }
a.btn-secondary, a.btn-secondary:hover, a.btn-secondary:visited { color: #fff; }
a.btn-result, a.btn-result:hover, a.btn-result:visited { color: #fff; }

/* ===================================================================
   Expandable per-match stats (Svenska folket, odds, analysis)
   Styling follows Svenska Spel's own coupon layout: a numbered badge,
   a blue accent bar, and label/1/X/2 rows.
   =================================================================== */

.expander {
    border: none;
    background: none;
    color: var(--muted);
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 0.3rem 0 0;
    cursor: pointer;
    transition: transform 0.15s ease;
    display: inline-block;
}
.expander:hover { color: var(--secondary); }
.expander.open { transform: rotate(90deg); }
.expander-spacer { display: inline-block; width: 0.9rem; }

.match-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    margin-right: 0.35rem;
    vertical-align: middle;
}
.match-teams { font-weight: 600; }

/* --- The expanded panel --- */
.stats-row > td { padding: 0 !important; background: #f7f9fa; }
.stats-panel {
    border-left: 4px solid var(--secondary);
    padding: 0.85rem 1rem;
    margin: 0.35rem 0;
    background: #fff;
    text-align: left;
}
.stats-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}
.stats-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #1e3a8a;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    flex: none;
}
.stats-title { font-weight: 700; font-size: 1rem; }
.stats-signs { margin-left: auto; display: flex; gap: 0.3rem; }
.sign-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-weight: 600;
    background: #fff;
}
.sign-box.is-result { background: #1e3a8a; border-color: #1e3a8a; color: #fff; }

.stats-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.stats-table th {
    text-align: left;
    font-weight: 400;
    color: var(--text);
    padding: 0.28rem 0;
    border: none;
}
.stats-table td {
    text-align: right;
    width: 70px;
    padding: 0.28rem 0;
    border: none;
    font-variant-numeric: tabular-nums;
}
.tip-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 22px;
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 0.8rem;
    font-weight: 600;
    background: #fff;
}
.tip-box.is-tip { background: #1e3a8a; border-color: #1e3a8a; color: #fff; }

.stats-meta { font-size: 0.82rem; color: var(--muted); margin: 0.5rem 0 0; }
.stats-analysis { margin-top: 0.7rem; font-size: 0.88rem; line-height: 1.5; }
.stats-analysis p { margin: 0.3rem 0 0; }
.stats-updated { margin: 0.6rem 0 0; font-size: 0.75rem; }

@media (max-width: 640px) {
    .stats-signs { display: none; }
    .stats-table td { width: 54px; }
}

/* ===================================================================
   Coupon sign boxes (1 / X / 2)

   The box IS the control: the real checkbox is visually hidden inside
   the label, and the styled face reacts to :checked via a sibling
   selector. That keeps it pure CSS - the box flips the instant you
   click, with no JS and no page round-trip.

   Layered states, in cascade order:
     default            white box, grey border
     :checked           blue fill        (your pick)
     .is-result         green border     (the sign that won)
     .is-result+checked green fill       (you got it right)
   =================================================================== */

.sign-pick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    line-height: 1;
}

/* Visually hidden, but still focusable and screen-reader visible. */
.sign-pick input[type=checkbox] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.sign-face {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 30px;
    padding: 0 0.35rem;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: #fff;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
    transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease;
}
.sign-pick:hover .sign-face { border-color: #94a3b8; }

/* Your pick. */
.sign-pick input:checked + .sign-face {
    background: #1e3a8a;
    border-color: #1e3a8a;
    color: #fff;
}

/* The sign that actually won. */
.sign-pick.is-result .sign-face {
    border-color: #16a34a;
    border-width: 2px;
    background: #f0fdf4;
    color: #14532d;
}
/* Picked AND correct - fill it so hits read at a glance. */
.sign-pick.is-result input:checked + .sign-face {
    background: #16a34a;
    border-color: #15803d;
    color: #fff;
}

/* Keyboard focus stays visible now the checkbox itself is hidden. */
.sign-pick input:focus-visible + .sign-face {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
}

/* Read-only coupons. */
.sign-pick input:disabled { cursor: not-allowed; }
.sign-pick input:disabled + .sign-face { cursor: not-allowed; opacity: 0.85; }
.coupon-table.is-readonly .sign-pick:hover .sign-face { border-color: var(--border); }

.coupon-table .col-choice { width: 52px; padding-left: 2px; padding-right: 2px; }

/* ===================================================================
   Summary table: let the Match column size to the team names

   The numeric columns are pinned to their content with the
   `width: 1%` + `nowrap` trick, which hands every remaining pixel to
   the Match column. `nowrap` there stops "Sheffield U - Birmingham"
   breaking onto a second line and doubling the row height.
   =================================================================== */

.summary-card .summary-table { table-layout: auto; width: 100%; }
.summary-card .summary-table th,
.summary-card .summary-table td {
    width: 1%;
    white-space: nowrap;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
.summary-card .summary-table .col-match {
    width: auto;
    white-space: nowrap;
    text-align: left;
    padding-right: 0.5rem;
}
/* If the names are genuinely too long for the card, scroll rather than
   wrap - a horizontal nudge beats doubling every row's height. */
.summary-card .summary-table-wrap { overflow-x: auto; }

/* Give the summary column a little more room in the two-column layout. */
@media (min-width: 801px) {
    .two-column { grid-template-columns: 1.15fr 1fr; }
}

/* ===================================================================
   Coupon table: keep each match on ONE line

   Same trick as the summary table - pin the sign, streck and hit
   columns to their content with `width: 1%`, which hands the rest to
   the Match column, and `nowrap` there stops the team names breaking
   onto a second line and doubling every row's height.
   =================================================================== */

.coupon-table { table-layout: auto; width: 100%; }
.coupon-table th,
.coupon-table td {
    width: 1%;
    white-space: nowrap;
}
.coupon-table .col-match {
    width: auto;
    white-space: nowrap;
    text-align: left;
    padding-right: 0.6rem;
}
/* The teams sit next to an expander and a number badge, so give the
   name itself a slightly tighter size to buy back a few pixels. */
.coupon-table .match-teams { font-size: 0.9rem; }

/* The stats panel spans the full row, so it must NOT inherit nowrap -
   its analysis paragraph needs to wrap normally. */
.coupon-table .stats-row td { white-space: normal; width: auto; }

/* ===================================================================
   Summary table: truncate rather than scroll

   `nowrap` alone would let a long fixture push the 1/X/2 counts out of
   the card and behind a scrollbar - the numbers are the whole point of
   that table, so they must never be the thing that disappears. Capping
   the Match column and adding an ellipsis keeps the counts in view; the
   full name is still available on hover via the title attribute.
   =================================================================== */

.summary-card .summary-table .col-match {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.summary-card .summary-table-wrap { overflow-x: visible; }

@media (max-width: 900px) {
    .summary-card .summary-table .col-match { max-width: 140px; }
}

/* ===================================================================
   MOBILE
   ===================================================================
   Everything below is the responsive layer. Order matters: this block
   comes last so it can override the desktop rules above without an
   arms race of !important.

   Breakpoints, chosen from the content rather than device names:
     760px  the nav stops fitting on one line  -> burger
     640px  the coupon row stops fitting       -> two-line row
     420px  small phones                       -> tighten spacing
   =================================================================== */

/* --- Global mobile hygiene ---------------------------------------- */

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

/* The `hidden` attribute is only `display: none` at UA-stylesheet
   strength, so ANY rule of ours that sets a display value beats it -
   which silently un-hid the stats panels on mobile and would do the same
   to the nav scrim. Making it !important means `hidden` always means
   hidden, whatever else the cascade says. */
[hidden] { display: none !important; }

body {
    /* Nothing should ever scroll sideways by accident. */
    overflow-x: hidden;
}

/* Stop iOS zooming in when a field is focused: it only does that when
   the font is under 16px. */
input, select, textarea, button { font-size: 16px; }

/* Kill the grey flash on tap, but keep a real focus ring for keyboards. */
a, button, label, select, input { -webkit-tap-highlight-color: transparent; }
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
}

/* Long team names and usernames must never force a sideways scroll. */
.match-teams, .col-match, .stats-title, .nav-user { overflow-wrap: break-word; }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --- Header and burger menu --------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    /* Must exceed the scrim's z-index. `position: sticky` + z-index makes
       this element a STACKING CONTEXT, so the nav panel inside it can
       never paint above the scrim on its own - its z-index is scoped to
       this one. With the header below the scrim, the open menu appeared
       under the dark overlay and every tap hit the scrim instead of a
       link, which looked like the whole page was disabled. */
    z-index: 60;
    /* Reach into the notch area on phones that have one. */
    padding-top: env(safe-area-inset-top);
}
.site-header-inner {
    padding-left: max(1.25rem, env(safe-area-inset-left));
    padding-right: max(1.25rem, env(safe-area-inset-right));
    flex-wrap: nowrap;
}

.nav-toggle {
    display: none;              /* desktop: hidden */
    position: relative;
    z-index: 2;                 /* above the panel, so it can close it */
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;                /* 44px is the accessible minimum target */
    height: 44px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}
.nav-bar {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
/* Burger morphs into a cross while open. */
.nav-toggle.open .nav-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open .nav-bar:nth-child(2) { opacity: 0; }
.nav-toggle.open .nav-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-divider { display: none; }

/* Current page marker, useful at every width. */
.main-nav a[aria-current="page"] {
    opacity: 1;
    box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.85);
}

.nav-scrim { display: none; }

@media (max-width: 760px) {
    .nav-toggle { display: flex; }

    .main-nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(78vw, 320px);
        background: var(--primary-dark);
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: calc(env(safe-area-inset-top) + 4.2rem) 0 2rem;
        transform: translateX(100%);
        transition: transform 0.22s ease;
        z-index: 50;
        overflow-y: auto;
        box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18);
    }
    .main-nav.open { transform: translateX(0); }

    .main-nav a {
        margin: 0;
        padding: 0.95rem 1.4rem;      /* generous tap targets */
        font-size: 1.02rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }
    .main-nav a[aria-current="page"] {
        box-shadow: inset 3px 0 0 #fff;
        background: rgba(255, 255, 255, 0.08);
    }

    .nav-divider {
        display: block;
        height: 1px;
        margin: 0.75rem 1.4rem;
        background: rgba(255, 255, 255, 0.18);
    }
    .nav-user {
        margin: 0;
        padding: 0 1.4rem 0.75rem;
        font-size: 0.85rem;
        opacity: 0.8;
    }
    .nav-logout { color: #ffd7d7 !important; }

    .nav-scrim {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 45;
    }
    .nav-scrim[hidden] { display: none; }

    body.nav-open { overflow: hidden; }

    .brand { font-size: 1.05rem; }
}

/* --- Coupon: two-line rows on mobile ------------------------------- */
/*
   Measured: expander + badge (33) + team name (~150) + three sign boxes
   (156) + Streck (62) + Rätt (40) + card padding (48) = ~489px, which
   overflows every common phone by 77-129px. So below 640px each row
   becomes a two-line grid instead of trying to squeeze onto one:

       [>] (1) Sheffield U - Birmingham            [OK]
       [   1   ][   X   ][   2   ]               [SPIK]

   The sign boxes stretch to a third of the width each, which also makes
   them far easier to hit with a thumb than the desktop 52px.
*/

@media (max-width: 640px) {
    .coupon-table thead { display: none; }

    .coupon-table tr.coupon-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
        align-items: center;
        gap: 0.4rem 0.35rem;
        padding: 0.7rem 0;
        border-bottom: 1px solid var(--border);
    }
    .coupon-table tr.coupon-row > td {
        border: none;
        padding: 0;
        width: auto;
    }

    .coupon-table tr.coupon-row > .col-match {
        grid-column: 1 / 4;
        grid-row: 1;
        white-space: normal;      /* it owns a full line, so wrapping is free */
        padding-right: 0.4rem;
    }
    .coupon-table tr.coupon-row > .col-hit {
        grid-column: 4;
        grid-row: 1;
        justify-self: end;
    }
    .coupon-table tr.coupon-row > .col-choice {
        grid-row: 2;
    }
    .coupon-table tr.coupon-row > .col-streck {
        grid-column: 4;
        grid-row: 2;
        justify-self: end;
        padding-left: 0.35rem;
    }

    /* Full-width sign boxes: bigger thumb targets than on desktop. */
    .coupon-table .col-choice .sign-pick { width: 100%; }
    .coupon-table .col-choice .sign-face {
        width: 100%;
        min-width: 0;
        height: 40px;
        font-size: 1rem;
    }

    /* The expander needs a real tap target, not a 12px chevron. */
    .expander { padding: 0.35rem 0.5rem 0.35rem 0; font-size: 1.25rem; }

    /* The stats panel spans the whole row rather than joining the grid. */
    .coupon-table tr.stats-row { display: block; }
    .coupon-table tr.stats-row > td { display: block; padding: 0 !important; }
    .stats-panel { padding: 0.75rem 0.85rem; }
    .stats-table th { font-size: 0.85rem; }
    .stats-table td { width: 58px; font-size: 0.85rem; }

    .coupon-card { padding: 1rem 0.9rem; }
}

/* --- Summary and data tables on mobile ----------------------------- */
/*
   The summary is read-only, so a horizontal swipe is an acceptable cost
   here in a way it never is for the coupon you have to tap. Full names
   are shown rather than truncated, since there's room to scroll to them.
*/

@media (max-width: 760px) {
    .summary-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .summary-card .summary-table .col-match {
        max-width: none;
        overflow: visible;
    }
    .summary-table, .plain-table { font-size: 0.85rem; }
    .card { padding: 1rem 0.9rem; }
    .site-main {
        padding-left: max(0.9rem, env(safe-area-inset-left));
        padding-right: max(0.9rem, env(safe-area-inset-right));
    }

    /* Header rows stack rather than squeezing. */
    .round-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .coupon-header { flex-direction: column; align-items: stretch; }
    .player-picker { width: 100%; }
    .player-select { width: 100%; }
    .summary-header { flex-wrap: wrap; gap: 0.5rem; }

    /* Buttons go full width - easier to hit, and they stop wrapping oddly. */
    .button-row { width: 100%; }
    .button-row form { flex: 1; }
    .button-row .btn { width: 100%; }
    .bet-form > .btn { width: 100%; padding: 0.8rem; }

    /* The date form stacks instead of running off the edge. */
    .date-form { flex-direction: column; align-items: stretch; }
    .date-form-row { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
    .date-form input[type=date] { width: 100%; }

    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.2rem; }
}

/* --- Dashboard and small phones ------------------------------------ */

@media (max-width: 760px) {
    .widget-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
    .widget-value { font-size: 1.4rem; }
    .quick-links .btn { width: 100%; }
}

@media (max-width: 420px) {
    .widget-grid { grid-template-columns: 1fr; }
    .coupon-table .col-choice .sign-face { height: 38px; }
    .streck-badge { min-width: 40px; font-size: 0.68rem; }
    .site-main { margin-top: 1rem; }
    .card { border-radius: 8px; }
}

/* Give the sticky footer a little breathing room above the home bar. */
.site-footer { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }

/* ===================================================================
   Expertanalys button + modal
   =================================================================== */

.btn-analysis {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.7rem;
    padding: 0.5rem 0.9rem;
    min-height: 40px;
    border: 1px solid #1e3a8a;
    border-radius: 6px;
    background: #fff;
    color: #1e3a8a;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.btn-analysis::before { content: "📝"; font-size: 0.9rem; }
.btn-analysis:hover { background: #1e3a8a; color: #fff; }

.analysis-dialog {
    width: min(560px, calc(100vw - 2rem));
    max-height: min(80vh, 700px);
    padding: 1.25rem 1.4rem 1.4rem;
    border: none;
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
    color: var(--text);
    overflow-y: auto;
}
.analysis-dialog::backdrop { background: rgba(15, 23, 42, 0.55); }

.analysis-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.4rem;
}
.analysis-head h3 { margin: 0.15rem 0 0; font-size: 1.15rem; }
.analysis-eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1e3a8a;
}
.analysis-x {
    border: none;
    background: none;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
    /* 44px target even though the glyph is small. */
    min-width: 44px;
    min-height: 44px;
}
.analysis-x:hover { color: var(--text); }

.analysis-by {
    margin: 0 0 0.8rem;
    font-size: 0.85rem;
    color: var(--muted);
}
.analysis-body { font-size: 0.95rem; line-height: 1.6; }
.analysis-body p { margin: 0 0 0.8rem; }
.analysis-tip {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.9rem 0 1rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--border);
    font-size: 0.88rem;
    font-weight: 600;
}
.analysis-dialog > .btn { width: 100%; }

/* The old inline block is gone - the modal replaces it. */
.stats-analysis { display: none; }

@media (max-width: 640px) {
    .analysis-dialog {
        width: 100vw;
        max-width: 100vw;
        max-height: 88vh;
        margin: auto auto 0;                /* slides up from the bottom */
        border-radius: 14px 14px 0 0;
        padding-bottom: calc(1.4rem + env(safe-area-inset-bottom));
    }
    .btn-analysis { width: 100%; justify-content: center; min-height: 44px; }
}

/* ===================================================================
   Player management (Administrate)
   =================================================================== */

.you-tag {
    margin-left: 0.3rem;
    padding: 0.05rem 0.35rem;
    border-radius: 3px;
    background: var(--primary);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
}
.pw-none { color: var(--danger); font-weight: 600; }
.pw-temp { color: #92400e; font-weight: 600; }

.flag-btn {
    border: 1px solid var(--border);
    background: #fff;
    color: var(--muted);
    border-radius: 4px;
    padding: 0.3rem 0.55rem;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    min-height: 32px;
}
.flag-btn.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.flag-btn:hover { border-color: var(--secondary); }

.reset-form {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.reset-input { width: 140px; font-size: 0.85rem; padding: 0.35rem 0.5rem; }
.add-player-heading { margin-top: 1.75rem; font-size: 1rem; }
.login-help { margin-top: 1rem; }

@media (max-width: 760px) {
    .reset-form { flex-direction: column; align-items: stretch; }
    .reset-input { width: 100%; }
    .flag-btn { width: 100%; }
}

/* Role note in the Administrate header */
.role-note { font-style: italic; }

/* Create-coupon prompt on the dashboard when no round exists */
.hero form { margin-top: 0.9rem; }
@media (max-width: 760px) {
    .hero form .btn { width: 100%; }
}

/* ===================================================================
   Dashboard statistics
   =================================================================== */

.section-heading { margin: 1.5rem 0 0.75rem; font-size: 1.2rem; }

/* Headline widgets get a little colour coding by kind. */
.widget-best_round .widget-value { color: var(--primary); }
.widget-winnings .widget-value { color: #b45309; }
.widget-spikiest .widget-value { color: #1e3a8a; }

/* Your own season summary */
.my-row-card h2 { margin-bottom: 0.75rem; }
.my-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.75rem;
}
.my-row > div { display: flex; flex-direction: column; gap: 0.1rem; }
.my-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}
.my-value { font-size: 1.35rem; font-weight: 700; }

/* Hall of fame */
.award-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 0.9rem;
    margin-bottom: 1.25rem;
}
.award {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.award-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    font-weight: 700;
}
.award-player { font-size: 1.05rem; font-weight: 700; }
.award-value { font-size: 1.5rem; font-weight: 700; color: var(--primary); line-height: 1.1; }
.award-note { font-size: 0.78rem; color: var(--muted); }

.standings-table th { cursor: help; }
.standings-table td { font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
    .award-grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
    .award { padding: 0.7rem 0.8rem; }
    .award-value { font-size: 1.25rem; }
    .my-row { grid-template-columns: repeat(3, 1fr); }
    .my-value { font-size: 1.15rem; }
}
@media (max-width: 420px) {
    .award-grid { grid-template-columns: 1fr; }
    .my-row { grid-template-columns: repeat(2, 1fr); }
}

/* ===================================================================
   Seasons
   =================================================================== */

.season-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.season-badge.active { background: #dcfce7; color: #166534; }
.season-badge.closed { background: #eef1f4; color: var(--muted); }
.season-badge.none   { background: #fef3c7; color: #92400e; }

.season-card { border-left: 4px solid var(--primary); }

/* Season selector on the dashboard */
.season-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1rem;
    flex-wrap: wrap;
}
.season-bar-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    font-weight: 700;
}
.season-tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.season-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    min-height: 36px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #fff;
    color: var(--text);
    font-size: 0.85rem;
    text-decoration: none;
}
.season-tab:hover { border-color: var(--primary); }
.season-tab.on {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    font-weight: 600;
}
.season-tab .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #22c55e;
    display: inline-block;
}
.season-tab.on .dot { background: #fff; }

@media (max-width: 760px) {
    .season-bar { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
    .season-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.2rem; }
    .season-tab { white-space: nowrap; }
}