/* =========================================================================
   SMW Cards layout ("smw-cards") - bold, color-forward skin.
   All classes prefixed so they cannot affect Classic/Modern or the theme.
   Team name color + side bars come from inline styles set by the renderer.
   ========================================================================= */

.smw-cards-tzbar, .smw-cards-season, .smw-cards-datehead,
.smw-cards-grouphead, .smw-cards-card { box-sizing: border-box; }
.smw-cards-card * { box-sizing: border-box; }

:root {
    --smwc-border: #e6e8eb;
    --smwc-ink: #0f172a;
    --smwc-muted: #6b7280;
    --smwc-faint: #9ca3af;
    --smwc-accent: #2563eb;
    --smwc-surface: #ffffff;
    --smwc-soft: #f8fafc;
}

.smw-cards-tzbar { font-size: 13px; color: var(--smwc-faint); margin: 0 2px 16px; }
.smw-cards-dot, .smw-cards-metadot { color: var(--smwc-faint); padding: 0 2px; }

.smw-cards-season { font-size: 15px; font-weight: 800; color: var(--smwc-ink); text-transform: uppercase; letter-spacing: .04em; margin: 22px 0 12px; }
.smw-cards-datehead { font-size: 15px; font-weight: 800; color: var(--smwc-ink); margin: 16px 2px 12px; }

.smw-cards-grouphead { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 16px; font-weight: 700; color: var(--smwc-ink); margin: 14px 2px 10px; line-height: 1.35; }
.smw-cards-grouphead-pillonly { margin-bottom: 8px; }

.smw-cards-league-pill { display: inline-block; font-size: 12px; font-weight: 600; color: #fff; background: #475569; border-radius: 8px; padding: 3px 12px; line-height: 1.4; white-space: nowrap; }

/* Per-card notes top line */
.smw-cards-notestop { font-size: 15px; font-weight: 700; color: var(--smwc-ink); line-height: 1.35; display: flex; align-items: center; flex-wrap: wrap; gap: 8px !important; padding: 16px 20px 12px !important; margin-bottom: 14px; border-bottom: 1px solid var(--smwc-border); }

/* ---------------- Card ---------------- */
.smw-cards-card {
    border: 1px solid var(--smwc-border);
    border-radius: 14px;
    background: var(--smwc-surface);
    margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(15,23,42,.06);
    overflow: hidden;
    position: relative;
}
.smw-cards-row {
    display: grid;
    grid-template-columns: 116px minmax(0,1fr);
    align-items: stretch;
}
.smw-cards-main { min-width: 0; }
/* One-card-per-day mode: date header inside the card, games as divided rows. */
.smw-cards-daycard-head { margin: 0 !important; padding: 14px 20px; border-bottom: 1px solid var(--smwc-border); }
.smw-cards-daycard-item { border-bottom: 1px solid var(--smwc-border); }
.smw-cards-daycard-item:last-child { border-bottom: 0; }
.smw-cards-matchwrap { display: grid; grid-template-columns: 6px minmax(0,1fr) 6px; align-items: stretch; }
.smw-cards-bar { display: block; width: 6px; align-self: stretch; margin: 14px 0 0; border-radius: 0 !important; }

/* Time block */
.smw-cards-time {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    gap: 2px; padding: 20px 10px; text-align: center;
    font-size: var(--smwc-time-size, 26px); font-weight: var(--smwc-time-weight, 800); color: var(--smwc-ink); line-height: 1.05;
    letter-spacing: var(--smwc-time-letter, -0.02em);
}
.smw-cards-time .smwcards-local-time { display: block; }

/* Variant 1 start/end: start on top with am/pm inline, end beneath as "to 11:00 pm". */
.smw-cards-time-range { gap: 3px; justify-content: center; }
.smw-cards-time-range .smw-cards-time-start { font-size: var(--smwc-time-size, 26px); font-weight: var(--smwc-time-weight, 800); color: var(--smwc-ink); display: block; line-height: 1.05; }
.smw-cards-time-range .smw-cards-time-end { font-size: var(--smwc-time-end-size, 15px); font-weight: var(--smwc-time-end-weight, 600); letter-spacing: var(--smwc-time-end-letter, -0.01em); color: var(--smwc-muted); display: block; line-height: 1.1; }
/* am/pm sits inline next to the number in the range (Variant 1), not stacked under it. */
.smw-cards-time-range .smwcards-local-time { display: inline; }
.smw-cards-time-range .smw-cards-ampm { display: inline; margin-left: 3px; font-size: var(--smwc-ampm-size, 13px); }

/* Matchup */
.smw-cards-matchup { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; padding: 16px 20px; }
.smw-cards-team-away { text-align: left; }
.smw-cards-team-home { text-align: right; }
/* The engine renders the team name (generateTeamLink); we only color it. */
.smw-cards-team-away a, .smw-cards-team-home a,
.smw-cards-team-away .smwcards-team-link, .smw-cards-team-home .smwcards-team-link,
.smw-cards-team-away .smwcards-team-label, .smw-cards-team-home .smwcards-team-label {
    color: var(--smwc-city-color, var(--smwc-team, var(--smwc-ink))) !important;
    font-size: var(--smwc-city-size, 25px); font-weight: var(--smwc-city-weight, 800); line-height: 1.05;
    text-transform: var(--smwc-city-case, uppercase); letter-spacing: var(--smwc-city-letter, -0.01em); text-decoration: none;
}
.smw-cards-team-away a:hover, .smw-cards-team-home a:hover { text-decoration: underline; }
.smw-cards-team-away .smwcards-rank-badge, .smw-cards-team-home .smwcards-rank-badge {
    font-size: 13px; font-weight: 700; color: var(--smwc-muted);
    vertical-align: middle; margin-right: 8px; position: relative; top: -0.06em;
}
.smw-cards-team-home .smwcards-rank-badge { margin-right: 8px; }
/* Nickname line under the city/school name. Font size/weight/color are set inline
   from admin options; this only handles placement + case. */
.smw-cards-team-nick { display: block; margin-top: 2px; line-height: 1.1; text-transform: uppercase; letter-spacing: var(--smwc-nick-letter, .02em); }

/* League name pill — shown only on mobile (see @media), hidden on desktop. */
.smw-cards-leaguepill { display: none; }

/* Single-entry rows (only one side has data): span the full width, no vs. */
.smw-cards-matchup-solo { grid-template-columns: minmax(0,1fr); }
.smw-cards-team-solo { text-align: left; min-width: 0; }
.smw-cards-team-solo a, .smw-cards-team-solo .smwcards-team-link, .smw-cards-team-solo .smwcards-team-label {
    color: var(--smwc-city-color, var(--smwc-team, var(--smwc-ink))) !important;
    font-size: var(--smwc-city-size, 25px); font-weight: var(--smwc-city-weight, 800); line-height: 1.05;
    text-transform: var(--smwc-city-case, uppercase); letter-spacing: var(--smwc-city-letter, -0.01em); text-decoration: none;
}
.smw-cards-team-solo a:hover { text-decoration: underline; }

.smw-cards-vs {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
    background: var(--smwc-soft); border: 1px solid var(--smwc-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800; color: var(--smwc-muted); text-transform: uppercase;
}

/* Foot: location + networks */
.smw-cards-foot {
    display: grid; grid-template-columns: 116px minmax(0,1fr); align-items: center;
    padding: 12px 0;
    /* Band background is set inline (admin) and replaces the old divider line. */
}
.smw-cards-foot-label { text-align: center; padding: 0 10px; }
.smw-cards-foot-body { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; padding-left: 26px; padding-right: 20px; }
.smw-cards-foot-netright .smw-cards-foot-body { justify-content: flex-end; }
.smw-cards-foot-loc { min-width: 0; }
.smw-cards-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; color: var(--smwc-muted); }
.smw-cards-loc { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--smwc-ink); }
.smw-cards-loc svg { color: var(--smwc-faint); flex: 0 0 auto; }
.smw-cards-metapiece { color: var(--smwc-muted); }
.smw-cards-watch { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--smwc-faint); white-space: nowrap; }
/* am/pm suffix sits below the time; size is admin-controlled. */
.smw-cards-ampm { display: block; font-size: var(--smwc-ampm-size, 15px); line-height: 1; }
/* Notes row: NotesTop left, NotesBottom right, one line; chevron expands. */
.smw-cards-notesrow { display: flex; align-items: center; gap: 12px; padding: 10px 20px; }
/* Inline (Option D): a small caption line inside the matchup column, above the teams. */
.smw-cards-matchcol { min-width: 0; }
.smw-cards-notesrow-inline { gap: 10px; }
.smw-cards-notesrow-inline-above { padding: 14px 20px 0; }
.smw-cards-notesrow-inline-below { padding: 0 20px 14px; }
.smw-cards-matchcol-above .smw-cards-matchup { padding-top: 4px; }
.smw-cards-matchcol-below .smw-cards-matchup { padding-bottom: 4px; }
.smw-cards-notesrow-inline .smw-cards-notes-l, .smw-cards-notesrow-inline .smw-cards-notes-r { font-size: var(--smwc-notes-size, 11px); }
.smw-cards-notesrow-inline .smw-cards-notes-toggle { width: 18px; height: 18px; }
.smw-cards-notesrow-inline .smw-cards-notes-toggle svg { width: 13px; height: 13px; }
/* Meet layout (multi-team, pipe rows): field list + "at host". */
.smw-cards-matchwrap-meet { grid-template-columns: 6px minmax(0,1fr); }
.smw-cards-meet { padding: 14px 20px; min-width: 0; }
.smw-cards-meet-tag { display: inline-block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--smwc-muted); background: #fff; border: 1px solid var(--smwc-border); border-radius: 999px; padding: 3px 10px; margin-bottom: 8px; }
.smw-cards-meet-field { font-size: 16px; font-weight: 800; text-transform: uppercase; color: var(--smwc-ink); line-height: 1.35; letter-spacing: -.01em; }
.smw-cards-meet-sep { color: var(--smwc-faint); font-weight: 400; }
.smw-cards-meet-host { margin-top: 8px; font-size: 15px; text-transform: uppercase; }
.smw-cards-meet-at { color: var(--smwc-muted); font-weight: 400; text-transform: none; }
.smw-cards-meet-hostname { font-weight: 800; color: var(--smwc-team, var(--smwc-ink)); }
.smw-cards-meet-hostnick { font-weight: 700; color: var(--smwc-team, var(--smwc-ink)); }
/* Tennis session layout (structured data): head, court, ordered order-of-play. */
.smw-cards-tennis { padding: 14px 20px; min-width: 0; }
.smw-cards-tennis-head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--smwc-muted); margin-bottom: 6px; }
.smw-cards-tennis-round { color: var(--smwc-faint); font-weight: 600; }
.smw-cards-tennis-court { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--smwc-faint); margin-bottom: 6px; }
.smw-cards-tennis-list { display: flex; flex-direction: column; gap: 4px; }
.smw-cards-tennis-item { font-size: 16px; font-weight: 700; color: var(--smwc-ink); line-height: 1.3; }
.smw-cards-tennis-p { }
.smw-cards-tennis-vs { color: var(--smwc-faint); font-weight: 600; margin: 0 8px; font-size: 13px; }
.smw-cards-tennis-note { font-weight: 600; color: var(--smwc-muted); font-size: 14px; }
.smw-cards-tennis-solo { }
.smw-cards-tennis-venue { font-size: 12px; color: var(--smwc-faint); margin-top: 8px; }
.smw-cards-notes-l { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; color: var(--smwc-muted); display: flex; align-items: center; gap: 8px; }
.smw-cards-notes-r { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: right; font-size: 13px; color: var(--smwc-muted); }
.smw-cards-notes-r .smw-cards-meta { justify-content: flex-end; }
.smw-cards-notes-toggle { flex: 0 0 auto; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; color: var(--smwc-muted); display: inline-flex; align-items: center; justify-content: center; }
.smw-cards-notes-toggle svg { transition: transform .15s ease; }
.smw-cards-notes-expanded { flex-wrap: wrap; align-items: flex-start; }
.smw-cards-notes-expanded .smw-cards-notes-l, .smw-cards-notes-expanded .smw-cards-notes-r { white-space: normal; overflow: visible; text-overflow: clip; }
.smw-cards-notes-expanded .smw-cards-notes-toggle svg { transform: rotate(180deg); }

/* Network pills */
.smw-cards-nets { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; align-items: center; }
.smw-cards-net-item { display: inline-flex; align-items: center; gap: 8px !important; }
.smw-cards-nets .smw-cards-net-item.smw-cards-net-hidden { display: none !important; }
.smw-cards-net-item { display: inline-flex; align-items: center; }
.smw-cards-net-local { white-space: nowrap; }
.smw-cards-nets .smwcards-net-pill { display: inline-block; font-size: 13px; font-weight: 600; line-height: 1.25; padding: 6px 14px; border: 1px solid var(--smwc-border); border-radius: 999px; background: #fff; color: var(--smwc-ink); white-space: nowrap; }
.smw-cards-nets .smwcards-net-flag { display: inline-flex; align-items: center; }
.smw-cards-nets .smwcards-net-pill a { color: var(--smwc-ink) !important; text-decoration: none; }
.smw-cards-nets .smwcards-net-pill a:hover { color: var(--smwc-accent) !important; }
.smw-cards-net-local .smwcards-net-pill { margin-left: 4px; }
.smw-cards-nets .smwcards-net-pill-local .away-box,
.smw-cards-nets .smwcards-net-pill-local .home-box,
.smw-cards-netpop .smwcards-net-pill-local .away-box,
.smw-cards-netpop .smwcards-net-pill-local .home-box { margin-left: 0 !important; }
.smw-cards-nets img, .smw-cards-nets .smwcards-network-logo { max-height: 16px; width: auto; vertical-align: middle; }

.smw-cards-more-pill { display: inline-block; font-size: 13px; font-weight: 600; line-height: 1.25; padding: 6px 14px; border: 1px solid var(--smwc-accent); border-radius: 999px; color: var(--smwc-accent); background: #fff; cursor: pointer; white-space: nowrap; }
.smw-cards-more-pill:hover { background: var(--smwc-soft); }

/* Network popup (full list) */
.smw-cards-netpop { position: absolute; right: 16px; bottom: 12px; z-index: 20; background: #fff; border: 1px solid var(--smwc-border); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 12px; display: flex; flex-wrap: wrap; gap: 8px; max-width: 340px; }
.smw-cards-netpop .smw-cards-net-item { display: inline-flex !important; align-items: center; }
.smw-cards-netpop .smwcards-net-pill { display: inline-block; font-size: 13px; font-weight: 600; padding: 6px 14px; border: 1px solid var(--smwc-border); border-radius: 999px; background: #fff; color: var(--smwc-ink); white-space: nowrap; }
.smw-cards-netpop .smwcards-net-pill a { color: var(--smwc-ink) !important; text-decoration: none; }

/* ---------------- Mobile ---------------- */
@media (max-width: 640px) {
    .smw-cards-row { grid-template-columns: 78px minmax(0,1fr); }
    .smw-cards-matchwrap { grid-template-columns: 5px minmax(0,1fr) 5px; }
    .smw-cards-bar { width: 5px; }
    .smw-cards-time { font-size: 20px; padding: 14px 6px; }
    .smw-cards-matchup { padding: 12px 14px; }
    .smw-cards-foot { grid-template-columns: 78px minmax(0,1fr); padding: 10px 0; }
    .smw-cards-foot-body { padding-left: 19px; padding-right: 14px; }
    .smw-cards-team-away a, .smw-cards-team-home a,
    .smw-cards-team-away .smwcards-team-link, .smw-cards-team-home .smwcards-team-link,
    .smw-cards-team-away .smwcards-team-label, .smw-cards-team-home .smwcards-team-label { font-size: 18px; }
    .smw-cards-vs { width: 34px; height: 34px; font-size: 11px; }
    .smw-cards-matchup { gap: 8px; }
    .smw-cards-foot-body { gap: 10px; }
    .smw-cards-netpop { left: 14px; right: 14px; max-width: none; }
}

/* Golf/structured featured groups: tee time then players */
.smw-cards-tennis-group{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.smw-cards-tennis-gtime{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.smw-cards-tennis-gplayers{color:inherit}

/* =========================================================================
   Inset separators — dividers keep a left/right margin instead of running
   edge to edge. A border-bottom can't be inset, so we draw the line with a
   positioned ::after. Tune the gutter with --smwc-divider-inset.
   ========================================================================= */
:root { --smwc-divider-inset: 20px; }

.smw-cards-notestop,
.smw-cards-daycard-head,
.smw-cards-daycard-item { position: relative; }

.smw-cards-notestop { border-bottom: 0 !important; }
.smw-cards-daycard-head { border-bottom: 0 !important; }
.smw-cards-daycard-item { border-bottom: 0 !important; }

.smw-cards-notestop::after,
.smw-cards-daycard-head::after,
.smw-cards-daycard-item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: var(--smwc-divider-inset);
    right: var(--smwc-divider-inset);
    bottom: 0;
    height: 1px;
    background: var(--smwc-border);
    pointer-events: none;
}

/* =========================================================================
   MOBILE (<=640px) - client-approved layout:
   - time (bold) + league pill in a top strip
   - ONE split color rail at the card's left edge (away color -> home color)
   - teams stacked; each shows City (team color) + Nickname (bold black) on one
     line; "vs" sits after the first team
   - networks as chips underneath
   Desktop (>640px) is untouched. Uses --smwc-railtop/--smwc-railbot + --smwc-team
   (already emitted by the renderer); no per-card markup rework.
   ========================================================================= */
@media (max-width: 640px) {
    .smw-cards-row { grid-template-columns: 1fr !important; }

    /* Top strip: time + league pill. Time SIZE comes from admin (--smwc-time-*),
       not hard-coded; only the layout (row, inline am/pm) is mobile-specific. */
    .smw-cards-time {
        display: flex !important; flex-direction: row; align-items: center; justify-content: flex-start;
        gap: 10px; padding: 12px 16px 4px !important; text-align: left;
        font-size: var(--smwc-time-size, 26px);
    }
    .smw-cards-time .smw-cards-ampm { display: inline !important; margin-left: 2px; }
    .smw-cards-time .smwcards-local-time { display: inline; }
    .smw-cards-time-range { flex-direction: row; align-items: baseline; gap: 8px; }
    .smw-cards-time-range .smw-cards-time-start { font-size: var(--smwc-time-size, 26px); }
    .smw-cards-time-range .smw-cards-time-end { font-size: var(--smwc-time-end-size, 15px); }

    .smw-cards-leaguepill {
        display: inline-block; background: #334155; color: #fff;
        font-size: 12px; font-weight: 800; letter-spacing: .01em;
        padding: 5px 12px; border-radius: 999px; line-height: 1.2;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 64%;
    }

    /* The league is shown next to the time on mobile, so drop the duplicate that
       normally sits in the notes row. If that pill was the row's only content,
       hide the whole row (no empty gap); otherwise hide just the pill. */
    .smw-cards-notesrow-pillonly { display: none !important; }
    .smw-cards-notesrow:not(.smw-cards-notesrow-pillonly) .smw-cards-league-pill { display: none !important; }

    /* One split rail at the card edge; hide the flanking bars. */
    .smw-cards-matchwrap,
    .smw-cards-matchwrap-meet { grid-template-columns: 1fr !important; position: relative; }
    .smw-cards-matchwrap > .smw-cards-bar { display: none !important; }
    .smw-cards-matchwrap::before {
        content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
        background: linear-gradient(180deg,
            var(--smwc-railtop, var(--smwc-accent)) 0 50%,
            var(--smwc-railbot, var(--smwc-railtop, var(--smwc-accent))) 50% 100%);
        border-radius: 0 3px 3px 0;
    }

    /* Teams stacked: away + vs on line 1, home on line 2. */
    .smw-cards-matchup {
        display: flex !important; flex-wrap: wrap; align-items: baseline;
        gap: 2px 8px; padding: 12px 16px 14px 18px !important;
    }
    .smw-cards-team-away { flex: 0 1 auto; order: 0; text-align: left; }
    .smw-cards-vs {
        flex: 0 0 auto; order: 1; width: auto; height: auto; border: 0; background: transparent;
        border-radius: 0; padding: 0; font-size: 12px; font-weight: 700; color: var(--smwc-faint);
        text-transform: lowercase; align-self: baseline;
    }
    .smw-cards-team-home { flex: 1 0 100%; order: 2; text-align: left; }
    .smw-cards-team-solo { text-align: left; }

    /* City name size = admin (--smwc-city-size), overriding the older mobile
       hard-code. Weight/color/case already come from admin via the base rule. */
    .smw-cards-team-away a, .smw-cards-team-home a, .smw-cards-team-solo a,
    .smw-cards-team-away .smwcards-team-link, .smw-cards-team-home .smwcards-team-link, .smw-cards-team-solo .smwcards-team-link,
    .smw-cards-team-away .smwcards-team-label, .smw-cards-team-home .smwcards-team-label, .smw-cards-team-solo .smwcards-team-label {
        font-size: var(--smwc-city-size, 25px);
    }

    /* City keeps team color; nickname sits on the SAME line as the city.
       IMPORTANT: only layout here (display + spacing). Font weight/size/color/
       case come from the admin nickname settings (inline $nickCss) — never
       hard-coded, so mobile matches whatever the admin configured. */
    .smw-cards-team-nick {
        display: inline !important; margin: 0 0 0 7px !important;
    }

    /* Networks: chips, full width. */
    .smw-cards-foot { grid-template-columns: 1fr !important; padding: 8px 0 12px !important; }
    .smw-cards-foot-label { display: none !important; }
    .smw-cards-foot-body,
    .smw-cards-foot-netright .smw-cards-foot-body {
        padding: 2px 16px 0 !important; justify-content: flex-start !important;
    }

    /* Structured (tennis/golf/gym) keep their stacked body under the same strip. */
    .smw-cards-tennis { padding: 10px 16px 14px 18px; }

    :root { --smwc-divider-inset: 16px; }
}