/* Stryktipset / Europatipset / Topptipset — builds on maltipset.css (colours, cards, chips, buttons, tooltips). */
.tipset { --pick: #7a5cf0; }
.tipset .top, .tipset .wrap { max-width: 1480px; }
.pos { color: var(--sage); }
.neg { color: var(--clay); }
a { color: var(--focus); }

/* Round picker under the title */
.draw-picker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.draw-picker label { color: var(--mute); font-size: 13px; }
.draw-picker select { max-width: 100%; border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 6px 10px; font-size: 14px; }
.fresh { color: var(--mute); font-size: 12.5px; }

/* Coupon card: the table runs edge to edge */
.couponcard { padding: 0; overflow: hidden; }
.couponcard .pad { padding: 18px 20px 12px; }
.chip.sel { background: var(--fog); color: var(--ink); font-variant-numeric: tabular-nums; }
.tools { align-items: center; margin-bottom: 0; }
.tools .sep { width: 1px; height: 20px; background: var(--line); }
.tools .spacer { flex: 1; }
.toolslabel { font-size: 13px; color: var(--mute); }
.quick:disabled { opacity: .4; cursor: default; }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: currentColor; vertical-align: -1px; }
/* Brush picker: small tiles that look like the coupon's filled cells; the violet one chooses signs. */
.tile { width: 38px; height: 26px; padding: 0; border: 0; border-radius: 5px; color: var(--ink); font-size: 11px; font-weight: 700; display: inline-grid; place-items: center;
        background: color-mix(in srgb, var(--c, var(--pick)) 55%, var(--card)); box-shadow: inset 5px 0 0 var(--c, var(--pick)); }
.tile:hover { filter: brightness(.96); }
/* A colour's tile with its min–max per row under it (shown once the colour is used). */
.cgroup { display: inline-flex; flex-direction: column; gap: 3px; position: relative; }
/* The chosen colour, once on the coupon, gets a trash can on its tile's corner that clears it. */
.cclear { display: none; position: absolute; top: -8px; right: -8px; z-index: 1; width: 18px; height: 18px; padding: 0; border: 1px solid var(--line); border-radius: 99px; background: var(--card); color: var(--ink); place-items: center; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.cclear svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cclear:hover { border-color: var(--mute); }
.cgroup:has(.tile.active):has(.crng:not([hidden])) .cclear { display: grid; }
.cgroup:has(.crng:not([hidden])) .tile { width: 100%; }
.crng { display: flex; gap: 2px; }
.crng input { width: 34px; height: 22px; padding: 0 2px; border: 1px solid var(--line); border-radius: 5px; background: var(--bg); font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.crng input::-webkit-outer-spin-button, .crng input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.crng input::placeholder { font-size: 10.5px; color: var(--mute); }
.tools { align-items: flex-start; }
.tools > .quick, .tools > .toolslabel, .tools > .chip, .tools > .sep { align-self: flex-start; }
/* The toolbar's first line is as tall as its buttons (32px, 28px on phones); the smaller
   tiles, labels and chips are centred on it. (Colour min–max boxes hang below the line.) */
.tools > .tile, .tools > .cgroup, .paint > .tile, .paint > .cgroup { margin-top: 3px; }
.tools > .toolslabel, .paint > .toolslabel, .tools > .sep { margin-top: 6px; }
.tools > .chip { margin-top: 2px; }
.tile.active { box-shadow: inset 5px 0 0 var(--c, var(--pick)), 0 0 0 2px var(--card), 0 0 0 4px var(--c, var(--pick)); }
.statusrow { display: flex; flex-wrap: wrap; gap: 2px 18px; margin-top: 10px; }
.statusrow .status { margin-top: 0; overflow-wrap: anywhere; }
.status small { font-size: inherit; }
.warnline { color: var(--sand); font-weight: 600; }

/* Coupon: full lines between matches and between the 1, X and 2 columns */
.coupon-wrap { overflow-x: auto; border-top: 1px solid var(--line); }
.coupon { width: 100%; min-width: 820px; border-collapse: collapse; table-layout: fixed; }
.coupon th { padding: 7px 10px; color: var(--mute); font-size: 12px; font-weight: 500; text-align: left; background: var(--bg); }
.coupon th:first-child { width: 38px; }
.coupon th:nth-child(2) { width: 220px; }
.coupon th.c { text-align: center; font-weight: 600; color: var(--ink); }
.coupon td { height: 50px; padding: 0; border-top: 1px solid var(--line); }
.coupon th:nth-child(n+3), .coupon td:nth-child(n+3) { border-left: 1px solid var(--line); }
.coupon td.num { padding-right: 4px; text-align: right; color: var(--mute); font-size: 13px; font-variant-numeric: tabular-nums; }
.coupon td.team { padding: 5px 10px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team small { display: block; font-weight: 400; font-size: 12px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; }
.team .pin { display: block; overflow: hidden; text-overflow: ellipsis; }
.team .miss { color: var(--clay); }
.m-score, .ttt { margin-left: 6px; }
.m-score.live { color: var(--sage); font-weight: 600; }
.m-score.done { color: var(--ink); font-weight: 600; }

/* A sign: four small facts. Chosen = violet tint (the one hue neither the markers nor the edge
   scale use), painted = tint of the marker colour, both with a solid bar on the left. The fills
   are tints so the text keeps its colours. */
.sign-btn { display: block; width: 100%; height: 50px; padding: 0; border: 0; background: transparent; }
.sign-btn:hover { background: var(--bg); }
.sign-btn.on { background: color-mix(in srgb, var(--pick) 42%, var(--card)); box-shadow: inset 5px 0 0 var(--pick); }
.sign-btn.painted { background: color-mix(in srgb, var(--mark) 55%, var(--card)); box-shadow: inset 5px 0 0 var(--mark); }
.sign-btn.on:hover, .sign-btn.painted:hover { filter: brightness(.97); }
.sign-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.sign-btn .fields { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0; height: 100%; }
.sign-btn .field { margin: 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lab { font-size: 10px; line-height: 1.2; color: var(--mute); opacity: .8; }
.val { font-size: 12px; line-height: 1.3; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Svenska Spel odds standing in for a missing Pinnacle price */
.field.fallback .val { font-weight: 500; font-style: italic; color: var(--mute); }
/* Slightly deeper than --sage / --clay so they stay readable on the tinted fills too. */
.field.pos .val, .field.up .val { color: #2c5038; }
.field.neg .val, .field.dn .val { color: #8c3521; }
.sign-btn.on .lab, .sign-btn.painted .lab { opacity: 1; color: #4d534f; }
.sign-btn.on .fallback .val, .sign-btn.painted .fallback .val { color: #4d534f; }

/* System card */
.side { order: 0; }
.line b { font-variant-numeric: tabular-nums; text-align: right; }
.line .sub { font-weight: 400; font-size: 12px; color: var(--mute); }
.funnel { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 6px; font-size: 13.5px; }
.funnel div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; color: var(--mute); }
.funnel b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.funnel .rm { color: var(--clay); font-weight: 600; font-variant-numeric: tabular-nums; }
.funnel .rm.zero { color: var(--mute); font-weight: 400; }
.funnel .note { display: block; font-size: 12px; color: var(--mute); }
.warn { margin-top: 10px; color: var(--clay); font-weight: 600; font-size: 13px; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.actions .btn.sm { flex: 1 1 auto; padding: 7px 8px; font-size: 13px; white-space: nowrap; }
.cabin { display: block; margin-top: 8px; text-align: center; text-decoration: none; font-size: 14px; }
.cabin.disabled { opacity: .4; cursor: default; }
.playpanel { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.playpanel h3 { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.playpanel .field { margin-top: 8px; }
.playpanel input[type=text], .playpanel select { width: 100%; }
.sharechips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.sharechips .quick.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.register { display: block; margin-top: 8px; }
.skinplay { margin-top: 10px; }
.skinplay label { display: block; font-size: 13px; color: var(--mute); margin-bottom: 5px; }
.skinrow { display: flex; gap: 8px; }
.skinrow select { flex: 1; min-width: 0; border: 1px solid var(--line); background: var(--bg); border-radius: 10px; padding: 7px 10px; font-size: 14px; }
.skinrow .btn { text-decoration: none; white-space: nowrap; }
.register.disabled { opacity: .4; cursor: default; }
.playalt { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; }
.chips { align-items: center; }
/* Icon buttons in the coupon's toolbar: update stats, fetch Pinnacle (filled once its odds are shown). */
.iconbtn { flex: none; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 99px; background: var(--card); color: var(--ink); display: inline-grid; place-items: center; cursor: pointer; }
.iconbtn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.iconbtn:hover:not(:disabled) { border-color: var(--mute); }
.iconbtn:disabled { opacity: .4; cursor: default; }
.iconbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.iconbtn.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.iconbtn.busy svg { animation: iconspin 1s linear infinite; }
.toolicons { flex: none; display: inline-flex; gap: 6px; }
@keyframes iconspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .iconbtn.busy svg { animation: none; } }
.chips .btn.sm { border-radius: 99px; padding: 5px 14px; font-size: 13px; }

/* Reduction filters */
.filters { display: grid; gap: 9px; }
.f { display: grid; grid-template-columns: 18px minmax(0, 1fr) 104px; gap: 8px; align-items: center; font-size: 13.5px; }
.f.plan { grid-template-columns: minmax(0, 1fr) 104px; }
.f.off { opacity: .5; }
.f input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--ink); }
.f small { display: block; color: var(--mute); font-size: 12px; }
.f input[type=number] { width: 100%; border: 1px solid var(--line); background: var(--bg); border-radius: 9px; padding: 5px 8px; font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.f input:disabled { opacity: .5; }
.f .rng { gap: 4px; }
.f .rng input { width: 100%; min-width: 0; padding: 5px 4px; text-align: center; }
.f .colprob { grid-column: 1 / -1; line-height: 1.5; }
.f .colprob:empty { display: none; }
.colprob .in, .colprob b { color: var(--ink); font-weight: 600; }
.segment { grid-column: 2 / -1; display: flex; gap: 4px; flex-wrap: wrap; }
.segment label { cursor: pointer; }
.segment input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segment span { display: block; border: 1px solid var(--line); border-radius: 99px; padding: 3px 10px; font-size: 12.5px; color: var(--mute); }
.segment input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.segment input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.foot { margin-top: 10px; font-size: 12px; color: var(--mute); }

/* Row preview and saved systems */
.preview { max-height: 380px; overflow: auto; font: 12px/1.75 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.preview .agg { font: 12.5px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif; color: var(--mute); margin-bottom: 8px; }
.preview .row { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); white-space: pre; }
.preview .signs { letter-spacing: 2px; }
.preview .pay { color: var(--mute); }
.preview .sX { color: var(--sand); }
.preview .s2 { color: var(--clay); }
#savedList { padding-left: 18px; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }

/* Phone-only pieces, hidden on wide screens */
/* Streck % in a badge coloured by edge, on every screen size: a stepless scale from bright red
   to bright green, grey when the edge is under ±5 %. The same dark text all along the scale. */
.sign-btn .e { display: inline-block; padding: 1px 4px; border-radius: 5px; font-weight: 800; }
.sign-btn .e.badge { color: #14181a; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9); }
.sign-btn .e.neutral { background: #dcd9d0; }
/* What the badge colours mean: under the coupon and in the match sheet. */
.edgelegend { display: block; padding: 10px 12px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.5; color: var(--mute); }
.edgelegend b { color: var(--ink); font-weight: 600; }
.edgelegend .scale { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 11px; white-space: nowrap; }
.edgelegend .scale i { flex: 1; height: 12px; border-radius: 6px; background: linear-gradient(90deg, rgb(240, 84, 62), rgb(250, 203, 195) 44%, #dcd9d0 44%, #dcd9d0 56%, rgb(178, 228, 196) 56%, rgb(0, 168, 68)); box-shadow: inset 0 0 0 1px var(--line); }
.sheet .edgelegend { padding: 10px 0 0; margin-top: 8px; }
.compact, .tstack, .hint, .sumbar { display: none; }
.sheet { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; max-width: 520px; margin: 0 auto; background: var(--card); border-radius: 18px 18px 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, .25); padding: 14px 16px 18px; font-size: 13px; }
.sheet h3 { font-size: 15px; font-weight: 600; margin: 0; }
.sheet small { color: var(--mute); }
.sheet #sheetClose { float: right; }
.sheet table { width: 100%; border-collapse: collapse; margin-top: 8px; font-variant-numeric: tabular-nums; }
.sheet th { font-size: 11.5px; font-weight: 500; color: var(--mute); text-align: right; padding: 3px 0; }
.sheet td { text-align: right; padding: 4px 0; border-top: 1px solid var(--line); font-weight: 600; }
.sheet th:first-child, .sheet td:first-child { text-align: left; font-weight: 400; color: var(--mute); }
.coupon td.team { cursor: pointer; }

/*
 * Phone: the whole coupon on one screen. The toolbar sticks to the top, the summary bar to
 * the bottom, and the rows share the height in between (--rows is set by the script).
 * The height is the small viewport (svh: browser bars showing), so rows keep one height
 * instead of resizing when the address bar slides away during scrolling.
 */
@media (max-width: 760px) {
    .tipset .wrap { padding-bottom: 70px; }
    .couponcard { margin: 0 -12px; border-radius: 0; border-left: 0; border-right: 0; overflow: visible; }
    .couponcard .pad { position: sticky; top: 0; z-index: 5; background: var(--card); padding: 7px 8px; border-bottom: 1px solid var(--line); }
    /* Only the toolbar stays: colours on the left, the icons on the right. */
    .couponcard .listhead, .couponcard .statusrow, .tools .extra, .tools .sep, .toolslabel, .tools .spacer, #selectionStatus { display: none; }
    .iconbtn { width: 28px; height: 28px; }
    .iconbtn svg { width: 15px; height: 15px; }
    .tools, .paint { margin: 0; gap: 4px; flex-wrap: nowrap; }
    .toolicons { margin-left: auto; gap: 4px; }
    .tools > .tile, .tools > .cgroup, .paint > .tile, .paint > .cgroup { margin-top: 1px; }
    .tile { width: 34px; }
    .crng input { width: 23px; }
    .crng input::placeholder { font-size: 9px; }
    .couponcard.has-colors .coupon { --rowh: clamp(30px, calc((100svh - 151px) / var(--rows, 13)), 48px); }

    .coupon-wrap { border-top: 0; overflow: visible; }
    .coupon { min-width: 0; --rowh: clamp(32px, calc((100svh - 126px) / var(--rows, 13)), 48px); }
    .coupon th { padding: 4px 2px; font-size: 11px; }
    .coupon th:first-child { width: 14px; }
    .coupon th:nth-child(2) { width: 68px; padding-left: 0; }
    .coupon th .hint { display: inline; font-weight: 500; color: var(--mute); }
    .coupon td { height: var(--rowh); }
    .coupon td.num { padding-right: 2px; font-size: 10px; }
    .coupon td.team { padding: 0 1px 0 0; font-size: 11.5px; letter-spacing: -.2px; line-height: 1.25; }
    .team .tfull, .team small { display: none; }
    .team .tstack { display: block; }
    .team .tstack span { display: block; overflow: hidden; text-overflow: ellipsis; }

    .sign-btn { height: var(--rowh); }
    .sign-btn .fields { display: none; }
    .compact { display: flex; align-items: center; justify-content: center; gap: 3px; height: 100%; padding-left: 5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
    .compact .e { flex: none; padding: 1px 2px; border-radius: 5px; text-align: center; font-size: 12px; font-weight: 800; color: #4d534f; }
    .compact .o { display: flex; align-items: baseline; column-gap: 2px; font-size: 13px; font-weight: 600; line-height: 1.1; }
    .compact .o.fallback { font-style: italic; font-weight: 500; color: #4d534f; }
    .compact .d { font-size: 9px; font-weight: 600; color: #4d534f; }


    .sumbar { display: flex; position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; height: 50px; align-items: center; gap: 14px; padding: 0 12px; background: var(--ink); color: var(--bg); font-size: 12px; }
    .sumbar b { display: block; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
    .sumbar button { margin-left: auto; border: 1px solid rgba(255, 255, 255, .35); background: transparent; border-radius: 99px; padding: 4px 12px; font-size: 12.5px; font-weight: 600; color: var(--bg); }
    .sheet { bottom: 50px; }
    #systemCard { scroll-margin-top: 8px; }
}


/* Live Pinnacle odds replace the prematch ones for matches in play. */
.field.live .lab { color: var(--focus); font-weight: 700; }
.field.live .val { color: var(--focus); }

/* Föreslå system (reducer and ATG pages) */
.suggest { margin: 12px 0 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.suggestrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.suggestrow label { font-size: 13px; color: var(--mute); }
.suggestrow input { width: 90px; border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 6px 9px; font-size: 14px; }
.suggestrow .btn { margin-left: auto; }
#suggestOut { font-size: 13px; }
#suggestOut .sum { margin-top: 8px; line-height: 1.5; }
#suggestOut .sum b.pos { color: var(--sage); }
#suggestOut .sum b.neg { color: var(--clay); }
#suggestOut table { width: 100%; border-collapse: collapse; margin-top: 6px; font-variant-numeric: tabular-nums; }
#suggestOut th { text-align: right; font-weight: 600; font-size: 11.5px; color: var(--mute); padding: 3px 4px; }
#suggestOut th:first-child, #suggestOut td:first-child { text-align: left; }
#suggestOut td { text-align: right; padding: 3px 4px; border-top: 1px solid var(--line); }
#suggestOut tr.on td { font-weight: 700; }
#suggestOut tr[data-budget] { cursor: pointer; }
#suggestOut tr[data-budget]:hover td { background: var(--card); }
.suggestopt { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; }
.suggestopt small { color: var(--mute); }

/*
 * A narrower card (a laptop, with the system panel beside it): the match column gives way so
 * the three signs fit without scrolling sideways. Measured on the table's own box, not the
 * window, since the side panel decides how much room the card gets.
 */
.coupon-wrap { container-type: inline-size; }
@media (min-width: 761px) {
    @container (max-width: 819px) {
        .coupon { min-width: 0; }
        .coupon th:first-child { width: 30px; }
        .coupon th:nth-child(2) { width: 170px; }
    }
}