/* lists of matches (the "g" rows), the top of Home, the Matches page, and the phone menu bar.
   The colours come from the theme's tokens; the values after the commas are the light theme's */

/* ---------------------------------------------------------------- one row per match */

:root { --live-dot: #5fae12; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --live-dot: var(--lime); } }
:root[data-theme="dark"] { --live-dot: var(--lime); }

.mlines.g { display: block; gap: 0; overflow: hidden; border-radius: 0; background: var(--card); container-type: inline-size; }
.mline.g { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 30px 58px; align-items: center; column-gap: 0; min-height: 0; padding: 9px 0 9px 12px; border-top: 1px solid var(--line); background: var(--card); color: var(--ink); transition: background 0.15s ease; }
.mlines.g > .mline.g:first-child { border-top: 0; }
.mline.g:hover { background: var(--tile, #f6f6f6); }
.mline.g .mr-teams { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.mline.g .mr-team { gap: 10px; color: var(--ink); font-size: 15px; font-weight: 500; }
.mline.g .mr-team.win { font-weight: 700; }
.mline.g .mr-team.loss { color: var(--ink-3); font-weight: 500; }
.mline.g .crest.sm { flex: none; width: 24px; height: 24px; border-radius: 6px; padding: 2px; background: var(--crest-tile, #fff); box-shadow: 0 0 0 1px var(--line); }
.mline.g .crest.sm img { width: 100%; height: 100%; }
.mline.g .mr-note { margin-top: -3px; color: var(--ink-3); font-size: 12px; font-weight: 600; }

/* the score: two small boxes, one per team */
.mr-box { display: flex; flex-direction: column; justify-self: end; width: 26px; overflow: hidden; border-radius: 5px; background: var(--box, #f0f0f3); font-variant-numeric: tabular-nums; }
.mr-box b { display: grid; place-items: center; height: 25px; font-size: 15px; font-weight: 700; }
.mr-box b + b { border-top: 1px solid var(--box-line, #e0e0e5); }
.mr-box b.loss { color: var(--ink-3); }
.mr-box.live b { color: var(--live, #3d7a0a); }
.mr-box.blank { background: none; }
.mr-box b.flash { animation: score-flash 1.2s ease; }
@keyframes score-flash { 30% { background: var(--lime); color: var(--on-lime, #0b0b0c); } }

/* the right column: FT, the live minute, the kick-off time or TBP */
.mr-st { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; align-self: stretch; margin-left: 10px; border-left: 1px solid var(--line); color: var(--ink-3); font-size: 13px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.mr-st small { font-size: 11px; font-weight: 600; white-space: nowrap; }
.mr-st svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mr-st.live { gap: 4px; color: var(--live, #3d7a0a); font-weight: 700; }
.mr-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--live-dot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--live-dot) 22%, transparent); }
.mr-st.tbp { color: var(--tbp, #c2410c); font-weight: 700; }

@container (max-width: 340px) {
  .mline.g .mr-team { font-size: 14px; gap: 8px; }
}

/* inside a panel the rows run to its edges */
.panel-body:has(> .mlines.g) { padding: 0; overflow: hidden; }

/* ---------------------------------------------------------------- the top of Home */

.hlists { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
/* narrower screens: the live matches side by side across the top, then Up next beside Recent results */
@media screen and (min-width: 761px) and (max-width: 1080px) {
  .hlists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hl-live { grid-column: 1 / -1; }
  .hl-live .mlines.g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hl-live .mlines.g > .mline.g:nth-child(2) { border-top: 0; }
  .hl-live .mlines.g > .mline.g:nth-child(even) { border-left: 1px solid var(--line); }
}
.hl { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-lg); background: var(--card); }
.hl-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px 10px; border-bottom: 1px solid var(--line); }
.hl-head .title { gap: 8px; }
.hl-head small { margin-left: auto; color: var(--ink-3); font-size: 13px; font-weight: 600; }
.hl .empty { padding: 22px 12px; }
.hl-more { display: block; padding: 11px 0; border-top: 1px solid var(--line); color: var(--live, #3d7a0a); font-size: 14px; font-weight: 700; text-align: center; transition: background 0.15s ease; }
.hl-more:hover { background: var(--tile, #f6f6f6); }

/* ---------------------------------------------------------------- the Matches page */

.matches-page { gap: 0; }
.mtools { display: grid; gap: 8px; margin-bottom: 12px; }
.matches-page .mchips { margin: 0; padding: 0; }
.matches-page .mchip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; background: var(--chip, #fff); box-shadow: inset 0 0 0 1px var(--chip-line, #d9d9de); color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.matches-page .mchip:hover { background: var(--tile, #f6f6f6); }
.matches-page .mchip[aria-pressed="true"] { background: var(--lime); box-shadow: none; color: var(--on-lime, #0b0b0c); }
.mchip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.mchip-n { padding: 0 5px; border-radius: 6px; background: var(--red); color: #fff; font-size: 11px; letter-spacing: 0; }

.mdate { display: flex; gap: 8px; max-width: 520px; }
.mdate-step, .mdate-mid { height: 38px; border-radius: 8px; background: var(--head, #e9e9ec); color: var(--ink); }
.mdate-step { display: grid; place-items: center; flex: 0 0 40px; transition: background 0.15s ease; }
.mdate-step:disabled { opacity: 0.35; cursor: default; }
.mdate-step:not(:disabled):hover, .mdate-mid:hover { background: color-mix(in srgb, var(--head, #e9e9ec) 85%, var(--ink)); }
.mdate svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mdate-mid { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font-size: 15px; transition: background 0.15s ease; }
.mdate-mid b { font-weight: 700; text-transform: uppercase; }
.mdate-mid small { color: var(--live, #3d7a0a); font-size: 13px; font-weight: 600; }
/* the date field sits under the middle of the bar: a tap opens the device's own picker */
.mdate-mid input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.mdate-mid input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; opacity: 0; cursor: pointer; }

.mlist .empty { border-radius: var(--radius-lg); background: var(--card); }
.mgroup { overflow: hidden; border-radius: var(--radius-lg); background: var(--card); }
.mgroup + .mgroup { margin-top: 10px; }
.mgroup-head { display: flex; align-items: center; gap: 10px; padding: 9px 6px 9px 12px; background: var(--head, #e9e9ec); }
.mgroup-badge { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 7px; background: var(--lime); color: var(--on-lime, #0b0b0c); font-size: 13px; font-weight: 800; }
.mgroup-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.mgroup-name b { font-size: 14px; font-weight: 700; }
.mgroup-name small { overflow: hidden; color: var(--ink-3); font-size: 11.5px; font-weight: 600; letter-spacing: 0.03em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.mgroup-tools { display: flex; margin-left: auto; }
.mgroup-tools a, .mgroup-tools button { display: grid; place-items: center; width: 38px; height: 30px; border-left: 1px solid var(--line); color: var(--ink-3); transition: color 0.15s ease; }
.mgroup-tools a:hover, .mgroup-tools button:hover { color: var(--ink); }
.mgroup-tools svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s ease; }
.mgroup.folded .mgroup-tools button svg { transform: rotate(180deg); }

/* ---------------------------------------------------------------- the phone menu bar (desktop keeps its menu) */

.hnav, .hmenu { display: none; }
.railbtn.logout { display: none; }
html.signed-in .railbtn.logout { display: grid; }

@media screen and (max-width: 760px) {
  .topbar { position: relative; flex-wrap: nowrap; height: auto; margin: 0 -16px 12px; padding: 0; gap: 0; }
  .topbar > :not(.hnav):not(.hmenu) { display: none; }
  .hnav { display: flex; flex: 1; height: 50px; border-bottom: 1px solid var(--line); background: var(--card); }
  .hnav-logo { display: grid; place-items: center; flex: 0 0 76px; background: var(--lime); color: var(--on-lime, #0b0b0c); font-size: 17px; font-weight: 800; font-style: italic; letter-spacing: -0.02em; }
  .hnav-logo .brand-mark { width: 62px; height: auto; }
  .hnav a:not(.hnav-logo), .hnav-more { position: relative; display: flex; align-items: center; justify-content: center; flex: 1 1 auto; min-width: 0; padding: 0 4px; color: var(--ink); font-size: 15px; font-weight: 500; }
  .hnav a:not(.hnav-logo) + a, .hnav-more { border-left: 1px solid var(--line); }
  .hnav a.active { font-weight: 700; }
  .hnav a.active:not(.hnav-logo)::after, .hnav-more.active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 2px 2px 0 0; background: var(--lime); }
  .hnav-more { flex: 0 0 50px; color: var(--ink-3); font-size: 18px; letter-spacing: 1px; }
  .hnav-more[aria-expanded="true"] { color: var(--ink); background: var(--tile, #f6f6f6); }
  .hnav-live { position: absolute; top: 11px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
  .hnav-live[hidden] { display: none; }

  .hmenu { position: absolute; top: 100%; right: 0; left: 0; z-index: 30; display: block; border-bottom: 1px solid var(--line); background: var(--card); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14); }
  .hmenu[hidden] { display: none; }
  .hmenu-event { margin: 0; padding: 10px 16px 6px; color: var(--ink-3); font-size: 12px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }
  .hmenu a, .hmenu button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 13px 16px; border-top: 1px solid var(--line); color: var(--ink); font-size: 15px; font-weight: 600; text-align: left; }
  .hmenu a::after, .hmenu button::after { content: "›"; color: var(--ink-3); font-size: 18px; line-height: 1; }
  .hmenu a.active { font-weight: 800; }
  .hmenu .hmenu-out { color: var(--red); }
  .hmenu .hmenu-out[hidden] { display: none; }

  /* lists run edge to edge */
  .hlists { display: block; margin: 0 -16px; }
  .hl { overflow: visible; border-radius: 0; background: none; }
  .hl-head { padding: 14px 14px 8px; border-bottom: 0; }
  .hl-head .title { font-size: 18px; }
  .hl > .mlines.g, .hl > .empty, .hl > .hl-more { background: var(--card); }
  .hl > .mlines.g { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .hl > .mlines.g + .hl-more { margin-top: -1px; border-bottom: 1px solid var(--line); }
  .hl > .empty { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .hl-live .live-dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 20%, transparent); }

  .matches-page { margin: -12px -16px 0; }
  .mtools { gap: 0; margin: 0 0 8px; border-bottom: 1px solid var(--line); background: var(--card); }
  .matches-page .mchips { padding: 12px 16px 8px; }
  .mdate { max-width: none; padding: 6px 16px 12px; }
  .mgroup, .mlist .empty { border-radius: 0; border-bottom: 1px solid var(--line); }
  .mgroup + .mgroup { margin-top: 8px; }

}

@media print {
  .hnav, .hmenu { display: none !important; }
}

/* ---------------------------------------------------------------- Settings */

.settings-dialog { width: min(420px, calc(100vw - 32px)); }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; font-weight: 600; }
.settings-row .seg button { padding: 6px 14px; font-size: 13px; }
.settings-dialog { background: var(--card); }
.settings-row .seg { background: var(--tile); }
.settings-row .seg button[aria-pressed="true"], .settings-row .seg .seg-ghost { background: var(--lime); color: var(--on-lime, #0b0b0c); }

/* ---------------------------------------------------------------- the Players list and a player's place */

.show-more { display: block; margin: 12px auto 2px; padding: 10px 18px; background: var(--tile); font-size: 13px; }
.show-more:hover { background: var(--tile-hover, var(--tile)); }
.show-more span { color: var(--ink-3); font-weight: 600; }
.ttile-value small { font-size: 0.62em; font-weight: 700; }