/* Living Room styles. See livingroom/README.md. */
/* ------------------------------------------------------------ page shell */
/* Always reserve the vertical scrollbar. Short tabs (one league, few rows)
   otherwise drop the scrollbar, the page gets ~17px wider, and the pill
   rows reflow - which is what made tabs hop between rows. */
html { overflow-y:scroll; }
body.st-body { background:#eceff1 !important; }
.st-shell { background:#fff; margin:16px 0 8px; box-shadow:0 1px 3px rgba(0,0,0,.15); }
.st-hero { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:4px 16px; padding:14px 20px 12px; }
.st-hero h4 { margin:0; font-size:1.7rem; font-weight:400; color:#263238; }
.st-hero .st-sub { color:#78909c; font-size:13px; }
.st-warning { margin:0 20px 12px; padding:8px 12px; background:#fff3e0; border-left:4px solid #ef6c00; color:#8d4004; font-size:13px; }
.st-credit { text-align:center; color:#78909c; font-size:12px; }

/* -------------------------------------------- main tabs (jQuery UI restyle) */
#MainTabs.ui-tabs { border:0; padding:0; background:transparent; border-radius:0; font-family:inherit; font-size:inherit; }
/* jQuery UI's theme forces Arial at 1em on buttons/inputs inside a widget. */
#MainTabs.ui-widget button, #MainTabs.ui-widget input, #MainTabs.ui-widget select { font-family:inherit; }
#MainTabs.ui-widget .st-chip, #MainTabs.ui-widget .on-seg button { font-size:10px; }
#MainTabs > .ui-tabs-nav { background:#263238; border:0; border-radius:0; padding:0 12px; margin:0; }
#MainTabs > .ui-tabs-nav > li { background:transparent; border:0; border-radius:0; margin:0; top:0; padding:0; border-bottom:3px solid transparent; }
#MainTabs > .ui-tabs-nav > li > a { color:#b0bec5; padding:13px 18px 10px; font-size:13px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; outline:none; }
#MainTabs > .ui-tabs-nav > li:hover > a { color:#fff; }
#MainTabs > .ui-tabs-nav > li.ui-tabs-active { border-bottom-color:#ffab40; margin:0; padding:0; }
#MainTabs > .ui-tabs-nav > li.ui-tabs-active > a { color:#fff; }
#MainTabs > .ui-tabs-panel { padding:14px 16px 18px; }
.st-live-pip { display:inline-block; min-width:18px; padding:0 5px; margin-left:6px; border-radius:9px; background:#d32f2f; color:#fff; font-size:11px; line-height:18px; text-align:center; letter-spacing:0; }

/* ---------------------------------------------- sub tabs as wrapping pills */
.st-subtabs.ui-tabs { border:0; padding:0; background:transparent; font-family:inherit; font-size:inherit; }
.st-subtabs > .ui-tabs-nav { background:transparent; border:0; border-radius:0; padding:0 0 6px; margin:0 0 6px; border-bottom:1px solid #90a4ae; }
.st-subtabs > .ui-tabs-nav > li { background:#fff; border:1px solid #C62828; border-radius:16px; margin:0 6px 6px 0; top:0; padding:0; white-space:nowrap; }
.st-subtabs > .ui-tabs-nav > li > a { padding:4px 6px 4px 12px; font-size:13px; color:#37474f; outline:none; }
.st-subtabs > .ui-tabs-nav > li:hover { border-color:#90a4ae; background:#f5f7f8; }
.st-subtabs > .ui-tabs-nav > li.ui-tabs-active { background:#029A02; border-color:#37474f; margin:0 6px 6px 0; padding:0; }
.st-subtabs > .ui-tabs-nav > li.ui-tabs-active > a { color:#fff; }
/* Lock tab geometry so selecting/hovering/focusing a tab can never change
   its size (jQuery UI themes vary font-weight, borders, margins and padding
   by state, which made pills hop between rows). Only colors change now. */
.st-subtabs > .ui-tabs-nav > li,
.st-subtabs > .ui-tabs-nav > li.ui-state-default,
.st-subtabs > .ui-tabs-nav > li.ui-state-hover,
.st-subtabs > .ui-tabs-nav > li.ui-state-focus,
.st-subtabs > .ui-tabs-nav > li.ui-state-active,
.st-subtabs > .ui-tabs-nav > li.ui-tabs-active {
   box-sizing:border-box !important; height:28px !important; margin:0 6px 6px 0 !important; padding:0 !important;
   border-width:1px !important; border-style:solid !important; top:0 !important; font-weight:normal !important;
   background-image:none !important; white-space:nowrap !important; }
.st-subtabs > .ui-tabs-nav > li > a,
.st-subtabs > .ui-tabs-nav > li > a.ui-tabs-anchor {
   float:left !important; height:26px !important; line-height:18px !important; padding:4px 6px 4px 12px !important;
   margin:0 !important; border:0 !important; font-weight:normal !important; font-size:13px !important; letter-spacing:0 !important;
   font-family:inherit !important; font-style:normal !important; text-transform:none !important; outline:none !important; }
.st-subtabs > .ui-tabs-nav .st-count, .st-subtabs > .ui-tabs-nav .st-dot {
   font-weight:normal !important; font-size:11px !important; line-height:18px !important; border:0 !important; }
#MainTabs > .ui-tabs-nav > li,
#MainTabs > .ui-tabs-nav > li.ui-state-hover,
#MainTabs > .ui-tabs-nav > li.ui-state-focus,
#MainTabs > .ui-tabs-nav > li.ui-state-active {
   margin:0 !important; padding:0 !important; top:0 !important; border-width:0 0 3px 0 !important; border-style:solid !important; background-image:none !important; }
#MainTabs > .ui-tabs-nav > li > a { font-weight:500 !important; margin:0 !important; }
.st-count { display:inline-block; min-width:20px; margin-left:4px; padding:0 6px; border-radius:10px; background:#eceff1; color:#546e7a; font-size:11px; line-height:18px; text-align:center; }
.ui-tabs-active .st-count { background:rgba(255,255,255,.2); color:#fff; }
.st-subtabs > .ui-tabs-panel { padding:6px 0 0; }
.st-dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:0; }

/* -------------------------------------------------- network filter chips */
.st-chips { display:flex; flex-wrap:wrap; gap:5px; margin:2px 0 10px; }
.st-chip { border:1px solid #cfd8dc; background:#fff; color:#455a64; border-radius:14px; padding:2px 10px; font-size:12px; cursor:pointer; }
.st-chip:hover { border-color:#90a4ae; background:#f5f7f8; }
.st-chip:focus { outline:none; box-shadow:0 0 0 2px #b0bec5; }
.st-chip.active { background:#c62828; border-color:#c62828; color:#fff; }
.st-chip.st-chip-all.active { background:#37474f; border-color:#37474f; }

/* ------------------------------------------------------------- tables */
.dataTables_wrapper { font-size:13px; }
.dataTables_wrapper .dataTables_info { padding:6px 0; color:#78909c; float:left; }
.dataTables_wrapper .dataTables_filter { float:right; }
.dataTables_wrapper .dataTables_filter input { height:2rem !important; margin:0 0 6px 6px !important; }
.dataTables_wrapper .dataTables_length { float:left; padding-top:8px; color:#78909c; }
.dataTables_wrapper .dataTables_length select { display:inline-block; width:auto; height:auto; }
table.st-table { width:100% !important; border-collapse:collapse; clear:both; }
table.st-table thead th { position:sticky; top:0; z-index:2; background:#eceff1; color:#455a64; font-size:11px; font-weight:bold; text-transform:uppercase; letter-spacing:.04em; padding:8px 8px !important; border-bottom:2px solid #cfd8dc !important; border-radius:0; }
table.st-table tbody td { padding:6px 8px !important; border-bottom:1px solid #eceff1; border-radius:0; vertical-align:top; }
table.st-table tbody tr { border-bottom:0; background:#fff; }
table.st-table tbody tr:hover td { background:#f5f9fc; }
table.st-table tr.st-done td { color:#90a4ae; }
table.st-table tr.st-live td { background:#fffdf3; }
table.st-table td.st-time { white-space:nowrap; }
table.st-table tr.st-live td.st-time::after { content:'ON'; margin-left:6px; padding:0 5px; border-radius:3px; background:#d32f2f; color:#fff; font-size:10px; font-weight:bold; }
table.st-table td.st-nets { color:#546e7a; }
.dataTables_wrapper .dataTables_paginate { padding-top:8px; }

/* ------------------------------------------------------------- planner */
#Planner { padding:0; }
.planner-toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.planner-toolbar .btn-small { text-transform:none; }
.planner-toolbar .st-sep { width:1px; height:24px; background:#cfd8dc; margin:0 4px; }
#PlannerStatus { color:#546e7a; font-size:13px; }
.planner-layout { display:grid; grid-template-columns:minmax(250px, 330px) minmax(0, 1fr); gap:14px; align-items:start; }
.planner-pool-wrap { position:-webkit-sticky; position:sticky; top:8px; }
.planner-filter-row { display:flex; align-items:center; gap:6px; margin:0 0 8px; }
.planner-filter { box-sizing:border-box !important; width:100% !important; margin:0 !important; flex:1; }
.planner-help { position:relative; flex:none; outline:none; }
.planner-help-icon { display:inline-block; width:22px; height:22px; line-height:22px; text-align:center; border-radius:50%; background:#546e7a; color:#fff; font-weight:bold; font-size:13px; cursor:help; }
.planner-help:focus .planner-help-icon { box-shadow:0 0 0 2px #90a4ae; }
.planner-help-pop { display:none; position:absolute; right:0; top:100%; z-index:20; width:270px; padding:6px 0; background:#fff; border:1px solid #b0bec5; box-shadow:0 2px 6px rgba(0,0,0,.25); font-size:12px; }
.planner-help:hover .planner-help-pop, .planner-help:focus-within .planner-help-pop { display:block; }
.planner-help-head { padding:2px 10px 5px; color:#546e7a; }
.planner-help-pop a { display:block; padding:4px 10px; color:#263238; }
.planner-help-pop a:hover, .planner-help-pop a:focus { background:#eceff1; }
.planner-help-pop code { display:inline-block; min-width:48px; font-weight:bold; color:#37474f; background:none; }
.planner-pool { max-height:68vh; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:7px; background:#eceff1; border:1px solid #cfd8dc; border-radius:3px; }
/* The sport color now drives the whole card: a wide band, a tinted body
   and a labeled chip, instead of a thin stripe that's easy to tune out. */
.planner-card { border-left:8px solid var(--sport-color); background:linear-gradient(var(--sport-tint), var(--sport-tint)), #fff; padding:7px 46px 7px 9px; margin:0 0 6px; box-shadow:0 1px 2px rgba(0,0,0,.18); border-radius:2px; cursor:grab; position:relative; font-size:12px; line-height:1.25; }
.planner-slot .planner-card { height:100%; box-sizing:border-box; margin:0; }
/* jquery-ui.css sets touch-action:none on draggables, which stops a swipe that
   starts on a card from scrolling (iOS 13+; iOS 9 ignores touch-action). The
   press-and-hold drag in planner.js blocks scrolling itself once a card lifts. */
.planner-card.ui-draggable-handle { -ms-touch-action:auto; touch-action:auto; }
/* Touch: a press-and-hold lifts the card, so no text selection or iOS callout. */
.planner-card { -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
/* Tap to place: the picked card, and the TV cells that will take it. */
.planner-card.planner-chosen { outline:3px solid #ff6f00; outline-offset:-1px; }
.planner-card.planner-lifted { box-shadow:0 4px 12px rgba(0,0,0,.35); opacity:.85; }
.planner-placing .planner-grid td.planner-slot { cursor:pointer; background:#fff8e1; }
.planner-placing .planner-grid td.planner-slot:hover { background:#dcedc8; }
.planner-card strong { display:block; font-size:13px; color:#263238; }
.planner-card strong, .planner-card .planner-meta { white-space:normal !important; overflow-wrap:anywhere; word-break:normal; }
.planner-card .planner-meta { color:#455a64; margin-top:4px; }
.planner-card .planner-actions { position:absolute; right:3px; top:2px; display:flex; }
.planner-card .planner-actions button { cursor:pointer; border:0; background:transparent; color:#777; padding:0 3px; line-height:20px; }
.planner-card .planner-remove { font-size:18px; }
.planner-card .planner-edit { font-size:13px; }
.planner-card .planner-actions button:hover, .planner-card .planner-actions button:focus { color:#263238; }
.sport-chip { display:inline-block; padding:0 5px; margin-right:5px; border-radius:3px; font-size:10px; font-weight:bold; letter-spacing:.04em; text-transform:uppercase; line-height:16px; vertical-align:1px; }
.planner-tag { display:inline-block; font-size:10px; font-weight:bold; padding:0 4px; margin-right:4px; border-radius:2px; vertical-align:1px; }
.planner-tag.mine { background:#fff3e0; color:#e65100; border:1px solid #ffcc80; }
.planner-tag.edited { background:#e3f2fd; color:#1565c0; border:1px solid #90caf9; }
.planner-editor { background:#eceff1; border:1px solid #cfd8dc; border-left:6px solid #37474f; padding:10px 12px; margin-bottom:12px; }
.planner-editor h6 { margin:0 0 8px; font-weight:bold; }
.planner-editor-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:8px 14px; }
.planner-editor label { display:block; font-size:12px; color:#37474f; }
.planner-editor input[type=text] { box-sizing:border-box !important; width:100% !important; height:2.2rem !important; margin:2px 0 0 !important; background:#fff !important; padding:0 6px !important; border:1px solid #b0bec5 !important; }
.planner-editor-hint { font-size:12px; color:#546e7a; min-height:18px; margin:8px 0; }
.planner-editor-hint.error { color:#c62828; font-weight:bold; }
.planner-editor-buttons { display:flex; gap:8px; flex-wrap:wrap; }
.planner-grid-wrap { overflow-x:auto; max-height:72vh; overflow-y:auto; border:1px solid #b0bec5; border-radius:3px; }
.planner-grid { width:100%; min-width:720px; border-collapse:collapse; table-layout:fixed; }
.planner-grid th { position:sticky; top:0; z-index:3; background:#37474f; color:#fff; padding:7px; text-align:center; border-radius:0; }
.planner-grid .planner-time { width:72px; text-align:right; padding-right:9px; background:#eceff1; font-weight:bold; white-space:nowrap; color:#455a64; }
.planner-grid td { border:1px solid #cfd8dc; height:48px; vertical-align:top; padding:4px; background:#fafafa; border-radius:0; }
.planner-grid td[rowspan] { height:auto; }
.planner-grid tr { border-bottom:0; }
.planner-grid tr.hour-start td { border-top:2px solid #90a4ae; }
.planner-grid tr.now-row td.planner-time { background:#d32f2f; color:#fff; }
.planner-grid td.planner-drop-hover { background:#dcedc8; }
.planner-empty { color:#78909c; padding:10px; text-align:center; }
/* Tablets. Landscape (about 1024px): a narrower pool so the four TVs fit
   without scrolling sideways. Portrait and narrower: the pool sits above the
   grid as rows of small cards rather than one full-width card per row. */
@media (max-width:1100px) { .planner-layout { grid-template-columns:240px minmax(0, 1fr); } .planner-grid { min-width:600px; } }
@media (max-width:900px) {
   .planner-layout { grid-template-columns:1fr; }
   .planner-pool-wrap { position:static; }
   .planner-pool { display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; max-height:36vh; padding:3px; }
   .planner-pool .planner-card { box-sizing:border-box; width:calc(33.2% - 8px); margin:4px; }
   .planner-pool .planner-empty { width:100%; }
}
@media (max-width:600px) { .planner-pool .planner-card { width:calc(49.9% - 8px); } }
/* iOS 9 Safari has no CSS Grid and no flex gap: the same layout with flex and margins. */
@supports not (display:grid) {
   .planner-layout { display:-webkit-flex; display:flex; -webkit-align-items:flex-start; align-items:flex-start; }
   .planner-pool-wrap { -webkit-flex:none; flex:none; width:300px; margin-right:14px; }
   .planner-grid-wrap { -webkit-flex:1; flex:1; min-width:0; }
   .planner-toolbar { gap:0; } .planner-toolbar > * { margin:0 8px 8px 0; }
   .planner-filter-row { gap:0; } .planner-filter-row > * + * { margin-left:6px; }
   .planner-editor-grid { display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; gap:0; }
   .planner-editor-grid > * { box-sizing:border-box; width:200px; margin:0 14px 8px 0; }
   .planner-editor-buttons { gap:0; } .planner-editor-buttons > * { margin:0 8px 8px 0; }
}
@supports not (display:grid) { @media (max-width:1100px) { .planner-pool-wrap { width:240px; } } }
@supports not (display:grid) { @media (max-width:900px) { .planner-layout { display:block; } .planner-pool-wrap { width:auto; margin:0 0 14px; } } }

/* -------------------------------------------------------------- on now */
.on-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:8px; }
.on-toolbar .on-filter { width:220px !important; height:2rem !important; margin:0 !important; }
.on-seg { display:inline-flex; border:1px solid #b0bec5; border-radius:4px; overflow:hidden; }
.on-seg button { border:0; border-right:1px solid #b0bec5; background:#fff; color:#455a64; padding:4px 12px; font-size:13px; cursor:pointer; }
.on-seg button:last-child { border-right:0; }
.on-seg button.active { background:#C62828; color:#fff; }
.on-summary { color:#546e7a; font-size:13px; }
.on-legend { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:8px; }
.on-legend .st-chip { display:inline-flex; align-items:center; }
.on-legend .st-chip.off { opacity:.45; }
.on-legend .st-chip.solo { background:#37474f; color:#fff; border-color:#37474f; }
.on-wrap { position:relative; overflow:auto; max-height:74vh; border:1px solid #cfd8dc; border-radius:3px; background:#fff; }
.on-inner { position:relative; min-height:120px; }
.on-head { position:sticky; top:0; z-index:4; height:28px; background:#37474f; }
.on-tick { position:absolute; top:0; height:28px; line-height:28px; padding-left:6px; color:#cfd8dc; font-size:11px; white-space:nowrap; border-left:1px solid #546e7a; }
.on-tick.hour { color:#fff; font-weight:bold; font-size:12px; border-left-color:#90a4ae; }
.on-body { position:relative; padding-bottom:8px; }
.on-group { height:22px; line-height:22px; margin-top:6px; font-size:12px; color:#37474f; font-weight:bold; }
.on-group span { position:sticky; left:0; display:inline-block; padding:0 8px; background:rgba(255,255,255,.9); }
.on-group em { font-style:normal; font-weight:normal; color:#90a4ae; margin-left:4px; }
.on-row { position:relative; height:30px; }
.on-bar { position:absolute; top:2px; height:26px; box-sizing:border-box; border-radius:3px; border-left:5px solid var(--c); background:var(--t); color:#263238; font-size:12px; line-height:26px; white-space:nowrap; overflow:hidden; cursor:default; }
.on-bar .on-label { display:inline-block; padding:0 8px; will-change:transform; }
.on-bar .on-nets { color:#546e7a; margin-left:6px; }
.on-bar.on-live { background:var(--c); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.3); }
.on-bar.on-live .on-nets { color:var(--ink); opacity:.85; }
.on-bar.on-done { border-left-color:#b0bec5; background:#eceff1; color:#90a4ae; }
.on-bar.on-done .on-nets { color:#b0bec5; }
   .on-now { position:absolute; top:0; bottom:0; width:2px; margin-left:-1px; background:#d32f2f; z-index:3; pointer-events:none; }
.on-now::before { content:'NOW'; position:sticky; top:0; display:block; margin-left:-14px; width:30px; text-align:center; background:#d32f2f; color:#fff; font-size:9px; font-weight:bold; line-height:14px; border-radius:2px; }
.on-empty { padding:30px; text-align:center; color:#78909c; }

/* ----------------------------------------------------------- live odds */
.lo-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-bottom:6px; }
.lo-toolbar .btn-small { text-transform:none; }
.lo-toolbar .st-chips { margin:0; }
.lo-toolbar .st-chip[disabled], #OddsRefresh[disabled] { opacity:.5; cursor:wait; }
.lo-toolbar label { font-size:13px; color:#455a64; }
.lo-meta { display:flex; flex-wrap:wrap; gap:4px 16px; font-size:12px; color:#78909c; margin-bottom:10px; }
#OddsAge.old { color:#c62828; font-weight:bold; }
#OddsCredits.low { color:#c62828; font-weight:bold; }
.lo-error { padding:12px 14px; background:#ffebee; border-left:4px solid #c62828; color:#8e0000; font-size:14px; }
#OddsBody { background:#e3e8eb; border-radius:4px; padding:12px; }
/* Board: three market tables side by side (spread / total / moneyline).
   Rows are teams, two per game; columns are books. Games alternate a light
   band so each pair reads as one game; no grid lines. Borders are forced
   off because Materialize and the site's table CSS add their own. */
#OddsBody.lo-old .lb-board { opacity:.55; }
.lb-board { display:flex; flex-wrap:wrap; gap:14px; align-items:flex-start; }
table.lb-table { flex:1 1 300px; width:auto; border-collapse:separate; border-spacing:0; border:0 !important; background:#fff; border-radius:4px;
   box-shadow:0 1px 3px rgba(0,0,0,.18); overflow:hidden; font-size:12px; font-variant-numeric:tabular-nums; }
table.lb-table tr, table.lb-table th, table.lb-table td { border:0 !important; border-radius:0; box-shadow:none; }
table.lb-table th, table.lb-table td { padding:0 4px !important; height:26px; text-align:center; white-space:nowrap; vertical-align:middle; background:transparent; }
table.lb-table tr.lb-title th { background:#263238; color:#fff; font-size:12px; font-weight:bold; text-transform:uppercase; letter-spacing:.06em; padding:6px !important;
   box-shadow:inset 0 -3px 0 var(--c); }
table.lb-table tr.lb-books th { background:#37474f; color:#cfd8dc; font-size:11px; font-weight:bold; padding:4px !important; }
table.lb-table tr.lb-books th.lb-off { color:#78909c; font-style:italic; }
table.lb-table tr.lb-odd th, table.lb-table tr.lb-odd td { background:#f1f4f6; }
table.lb-table tr.lb-first th, table.lb-table tr.lb-first td { height:30px; vertical-align:bottom; }
table.lb-table tr.lb-second th, table.lb-table tr.lb-second td { height:30px; vertical-align:top; }
table.lb-table th.lb-team { text-align:left; width:52px; font-weight:normal; padding-left:8px !important; color:#263238; }
table.lb-table th.lb-team.lb-detail { width:140px; }
table.lb-table tr.lb-live th.lb-team { box-shadow:inset 3px 0 0 #d32f2f; }
.lb-abbr { font-weight:bold; }
.lb-score { margin-left:5px; color:#37474f; }
.lb-when { float:right; margin-left:8px; font-size:10px; color:#90a4ae; }
.lb-when.live { color:#c62828; font-weight:bold; }
td.lb-off { background-image:repeating-linear-gradient(45deg, transparent 0 4px, rgba(0,0,0,.035) 4px 8px); }
td.lb-stale { color:#b0bec5; }
.lo-pt { color:#78909c; margin-right:4px; }
.lo-v { display:inline-block; padding:1px 6px; border-radius:10px; }
td.lo-best .lo-v { background:#2e7d32; color:#fff; font-weight:bold; }
td.lo-best .lo-pt { color:#c8e6c9; }
td.lo-na { color:#cfd8dc; }


/* -------------------------------------------------------------- scores */
.sc-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:10px; }
.sc-toolbar .btn-small { text-transform:none; }
#ScoresStatus { color:#546e7a; font-size:13px; }
#ScoresStatus.error { color:#c62828; }
.sc-picker { background:#f5f7f8; border:1px solid #cfd8dc; border-radius:3px; padding:8px 12px; margin-bottom:12px; }
.sc-picker h6 { font-size:12px; color:#546e7a; margin:6px 0 4px; text-transform:uppercase; letter-spacing:.04em; }
.sc-picker .st-chip.active { background:#37474f; border-color:#37474f; color:#fff; }
.sc-picker-head { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; font-size:12px; color:#546e7a; margin-bottom:4px; }
.sc-picker-head span { margin-right:auto; }
.sc-section { margin:0 0 14px; }
/* Card sizes are in em, relative to #ScoresBody's font size (15px at 100%), so
   the A-/A+ text size control in scores.js scales the whole card: text, card
   width, padding. 1em = 15px at 100%. */
#ScoresBody { font-size:15px; }
.sc-head { display:flex; align-items:baseline; gap:10px; border-bottom:2px solid var(--c); padding:2px 0 3px; margin-bottom:6px; }
.sc-head b { font-size:.9333em; color:#263238; }
.sc-head .sc-age { font-size:.7333em; color:#90a4ae; }
.sc-head .sc-age.old { color:#ef6c00; }
.sc-head .sc-err { font-size:.7333em; color:#c62828; }
.sc-close-strip { background:#fff8e1; border:1px solid #ffe082; border-radius:3px; padding:.5333em .6667em 2px; margin-bottom:14px; }
.sc-close-strip .sc-head { border-bottom-color:#ffb300; }
/* Starred games: blue, so a star never looks like "close" (amber) or "live" (red). */
.sc-star-strip { background:#e3f2fd; border:1px solid #90caf9; border-radius:3px; padding:.5333em .6667em 2px; margin-bottom:14px; }
.sc-star-strip .sc-head { border-bottom-color:#1565c0; }
.sc-star-strip .sc-head b { color:#0d47a1; }
.sc-game[data-id] { cursor:pointer; -webkit-tap-highlight-color:transparent; }
.sc-game .sc-star { display:inline-block; margin-right:.3em; font-size:1.25em; line-height:1; vertical-align:-.08em; color:#b0bec5; }
.sc-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(14.3333em, 1fr)); gap:.4em; }
.sc-game { border:1px solid #e0e6e9; border-left:4px solid var(--c); border-radius:3px; padding:.3333em .6em .4em; background:#fff; font-size:1em; line-height:1.35; }
.sc-game .sc-row { display:flex; justify-content:space-between; gap:6px; }
.sc-game .sc-left { display:flex; align-items:baseline; min-width:0; }
.sc-game .sc-team { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.sc-game .sc-ml { flex:none; width:4em; color:#90a4ae; font-size:.8333em; font-variant-numeric:tabular-nums; }
.sc-game .sc-ml.fav { color:#78909c; }
.sc-game .sc-poss { flex:none; margin-left:1px; color:#c62828; font-weight:bold; font-size:.9333em; }
.sc-game .sc-sog { flex:none; margin-left:.3333em; color:#546e7a; font-size:.8333em; font-variant-numeric:tabular-nums; }
.sc-game .sc-rank { background-color:#029A02; color: #ffffff; font-size:.8333em; margin-right:.2em; padding-left: 2px; padding-right: 2px; vertical-align: text-top; }
.sc-game .sc-score { font-weight:bold; font-variant-numeric:tabular-nums; }
.sc-game .sc-status { display:flex; justify-content:space-between; gap:6px; margin-top:2px; font-size:.8333em; color:#78909c; }
.sc-game .sc-clock { flex:none; white-space:nowrap; }
.sc-game .sc-tv { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right; }
.sc-game.sc-in .sc-status .sc-clock { color:#c62828; font-weight:bold; }
.sc-game.sc-post { background:#e0e6e9; }
.sc-game.sc-post .sc-row.lost { color:#90a4ae; }
.sc-game.sc-post .sc-row.lost .sc-score { font-weight:normal; }
.sc-game.sc-close { background:#fff8e1; border-color:#ffca28; border-left-color:var(--c); }
/* Live but not (yet) close: a red outline, so in-progress games stand out
   from ones that haven't started - even at halftime ("HT"). */
.sc-game.sc-in:not(.sc-close) { border-color:#e53935; box-shadow:0 0 0 1px #e53935; border-left-color:var(--c); }
#ScoresBody .sc-game.sc-starred { background:#e3f2fd; border-color:#1565c0; box-shadow:0 0 0 2px #1565c0; border-left-color:var(--c); }
#ScoresBody .sc-game.sc-starred .sc-star { color:#1565c0; }
#ScoresBody .sc-star-strip .sc-game.sc-starred { background:#fff; }
#ScoresBody .sc-star-strip .sc-game.sc-starred.sc-post { background:#eef2f4; }
.sc-head a.sc-espn { color:#90a4ae; line-height:1; align-self:center; }
.sc-head a.sc-espn:hover { color:#263238; }
.sc-head a.sc-espn i { font-size:1.0667em; vertical-align:middle; }
.sc-days button small { display:block; font-size:10px; opacity:.75; line-height:12px; }
.sc-badge { display:inline-block; padding:0 .4em; border-radius:2px; background:#ffb300; color:#3e2723; font-size:.8em; font-weight:bold; margin-right:4px; }
.sc-golf { border:1px solid #e0e6e9; border-left:4px solid var(--c); border-radius:3px; padding:.4em .6667em; background:#fff; font-size:.8667em; max-width:32em; }
.sc-golf ol { margin:4px 0 0; padding-left:22px; columns:2; column-gap:20px; }
.sc-golf li { list-style:decimal; }
.sc-golf li span { float:right; font-weight:bold; }
.sc-quiet { color:#90a4ae; font-size:12px; margin-top:4px; }
#ScoresBody .sc-quiet { font-size:.8em; }
#ScoresBody .sc-golf .sc-quiet { font-size:.9231em; }
.sc-size button { min-width:34px; padding:4px 8px; font-variant-numeric:tabular-nums; }

/* ------------------------------------------------- Living Room: Today views */
#MainTabs.ui-widget .lr-views button { font-size:13px; }
.lr-views { margin:0 0 12px; }
.lr-views .st-live-pip { margin-left:6px; }


/* ---------------------------------------------------------------- news */
.nw-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:14px; }
.nw-toolbar .btn-small { text-transform:none; }
.nw-search input[type=search] { box-sizing:border-box !important; width:320px !important; max-width:70vw; height:2rem !important; margin:0 !important; padding:0 8px !important; border:1px solid #b0bec5 !important; border-radius:3px; background:#fff !important; }
.nw-status { color:#546e7a; font-size:13px; }
.nw-cols { display:grid; grid-template-columns:repeat(auto-fit, minmax(360px, 1fr)); gap:18px; align-items:start; }
.nw-col { background:#f5f7f8; border:1px solid #e0e6e9; border-radius:4px; padding:0 12px 10px; }
/* Header bar matches the main tabs: dark slate with the orange accent. */
.nw-head { margin:0 -12px 10px; padding:9px 12px 7px; background:#263238; border-bottom:3px solid #ffab40; border-radius:4px 4px 0 0; }
.nw-head span { color:#fff; font-size:13px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
.nw-col .st-chips { margin-bottom:10px; }
.nw-col .st-chip.active { background:#37474f; border-color:#37474f; color:#fff; }
.nw-note { margin:0 0 8px; padding:6px 10px; background:#fff3e0; border-left:4px solid #ef6c00; color:#8d4004; font-size:12px; }
.nw-meta { display:block; font-size:11px; color:#78909c; margin-top:3px; }
.nw-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; vertical-align:0; }

/* Lead story: big picture (when there is one), larger headline, summary. */
.nw-lead-card { display:block; background:#fff; border-radius:4px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.18); border-top:4px solid var(--c); margin-bottom:12px; color:inherit; }
.nw-lead-card:hover { box-shadow:0 2px 8px rgba(0,0,0,.25); }
.nw-lead-card:hover .nw-lead-title { text-decoration:underline; }
.nw-pic.nw-lead-pic { display:block; height:190px; background:#cfd8dc; }
.nw-lead-pic img { width:100%; height:100%; object-fit:cover; display:block; }
.nw-tile.nw-lead-pic { display:none; }
.nw-lead-text { display:block; padding:10px 12px 12px; }
.nw-lead-title { display:block; font-size:18px; line-height:1.25; font-weight:500; color:#1a237e; }
.nw-lead-sum { display:block; margin-top:6px; font-size:13px; line-height:1.4; color:#455a64; }

/* Story rows: thumbnail or source tile, headline, source and age. */
.nw-list { margin:0; padding:0; list-style:none; }
.nw-list li { list-style:none; }
.nw-bucket { margin:10px 0 4px; font-size:11px; font-weight:bold; letter-spacing:.06em; text-transform:uppercase; color:#90a4ae; }
.nw-item a { display:flex; gap:10px; align-items:flex-start; padding:7px 8px; margin:0 -8px; border-radius:3px; color:inherit; }
.nw-item a:hover { background:#fff; }
.nw-item a:hover .nw-title { text-decoration:underline; }
.nw-item a:visited .nw-title { color:#6a1b9a; }
.nw-thumb { flex:none; width:76px; height:52px; border-radius:3px; overflow:hidden; }
.nw-pic.nw-thumb { background:#cfd8dc; }
.nw-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.nw-tile { display:flex; align-items:center; justify-content:center; color:#fff; font-weight:bold; font-size:13px; letter-spacing:.04em; }
.nw-text { min-width:0; }
.nw-title { display:block; font-size:14px; line-height:1.3; font-weight:500; color:#1a237e; }

/* ------------------------------------------------- Living Room: header bits */
.lr-hero { justify-content:center; padding:14px 20px 10px; }
.sc-note { margin-left:auto; font-size:12px; color:#78909c; }
#Tab-today > .st-credit, #Tab-planner > .st-credit { margin:16px 0 0; }
.nw-more-row { margin-top:8px; }
.nw-more { width:100%; padding:8px; border:1px solid #cfd8dc; border-radius:4px; background:#fff; color:#37474f; font-size:13px; cursor:pointer; }
.nw-more:hover, .nw-more:focus { background:#eceff1; outline:none; }
.nw-more span { color:#90a4ae; }

/* ------------------------------------------------- News: market strip */
.mk-strip { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; margin-bottom:14px; }
.mk-strip:empty { display:none; }
.mk-tile { background:#fff; border:1px solid #e0e6e9; border-top:3px solid #263238; border-radius:4px; padding:7px 10px 6px; min-width:0; }
.mk-top { display:flex; justify-content:space-between; align-items:baseline; gap:6px; }
.mk-label { color:#263238; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.mk-when { color:#78909c; font-size:11px; white-space:nowrap; }
.mk-live { display:inline-block; width:7px; height:7px; margin-right:4px; border-radius:50%; background:#2e7d32; vertical-align:1px; }
.mk-price { color:#263238; font-size:20px; font-weight:500; line-height:1.25; margin-top:1px; font-variant-numeric:tabular-nums; }
.mk-chg { display:block; font-size:12px; font-weight:500; font-variant-numeric:tabular-nums; }
.mk-up { color:#2e7d32; }
.mk-down { color:#c62828; }
.mk-flat { color:#607d8b; }
.mk-spark { display:block; width:100%; height:30px; margin-top:4px; overflow:visible; }
.mk-line { fill:none; stroke:#546e7a; stroke-width:1.5; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.mk-prev { stroke:#b0bec5; stroke-width:1; stroke-dasharray:3 3; vector-effect:non-scaling-stroke; }
.mk-note { grid-column:1 / -1; color:#78909c; font-size:12px; }

/* ---------------------------- Scores on old Safari (iOS 9 / 10.2 and older)
   No CSS Grid there, so the score cards fell back to one per row. Flexbox
   instead, with margins for spacing (old Safari has no flex "gap" either).
   Column counts follow the grid above: as many 215px+ cards as fit (widths a
   hair under 1/n so rounding never pushes the last card down). Modern
   browsers support grid and never use this. */
@supports not (display:grid) {
   .sc-grid { display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; margin:-3px; gap:0; }
   .sc-grid > * { -webkit-box-sizing:border-box; box-sizing:border-box; margin:3px; width:calc(100% - 6px); }
   .sc-game .sc-row > * + *, .sc-game .sc-status > * + * { margin-left:6px; }
   .sc-toolbar > * { margin:0 12px 8px 0; }
   .sc-head { gap:0; }
   .sc-head > * + * { margin-left:10px !important; }   /* beats the inline margin:0 on the game count */
}
@supports not (display:grid) { @media (min-width:500px)  { .sc-grid > * { width:calc(49.9% - 6px); } } }
@supports not (display:grid) { @media (min-width:720px)  { .sc-grid > * { width:calc(33.2% - 6px); } } }
@supports not (display:grid) { @media (min-width:960px)  { .sc-grid > * { width:calc(24.9% - 6px); } } }
@supports not (display:grid) { @media (min-width:1200px) { .sc-grid > * { width:calc(19.9% - 6px); } } }