/* Daily: settings button + panel, footer, no-flicker */
.dy-pending .page-columns { opacity: 0; }
.page-columns { transition: opacity .2s ease; }

.dy-fab { position: fixed; right: 16px; bottom: 16px; z-index: 50; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18); background: rgba(22,26,38,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: hsl(37, 91%, 62%); font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.dy-fab:hover, .dy-fab:focus-visible { border-color: hsl(37, 91%, 55%); outline: none; }

.dy-overlay { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; background: rgba(6,8,14,.6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); padding: 16px; }
.dy-overlay.open { display: flex; }
.dy-panel { width: min(440px, 100%); max-height: 90vh; overflow: auto; border-radius: 16px; padding: 20px 22px;
  background: rgba(24,28,42,.96); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 20px 50px rgba(0,0,0,.55);
  color: hsl(220, 24%, 88%); font-size: 1.4rem; }
.dy-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dy-head h2 { margin: 0; font-size: 1.7rem; letter-spacing: .08em; text-transform: uppercase; color: hsl(220, 30%, 96%); }
.dy-x { background: none; border: 0; color: hsl(220, 20%, 78%); font-size: 2.4rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.dy-x:hover { color: hsl(37, 91%, 62%); }
.dy-panel fieldset { border: 1px solid rgba(255,255,255,.12); border-radius: 12px; margin: 12px 0; padding: 8px 14px 10px; }
.dy-panel legend { padding: 0 6px; font-size: 1.15rem; letter-spacing: .12em; text-transform: uppercase; color: hsl(220, 18%, 70%); }
.dy-opt { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; }
.dy-opt input { width: 18px; height: 18px; accent-color: hsl(37, 91%, 55%); flex-shrink: 0; }
.dy-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.dy-btn { border: 1px solid hsl(37, 91%, 55%); background: hsla(37,91%,55%,.14); color: hsl(37, 91%, 68%); border-radius: 10px; padding: 8px 14px; cursor: pointer; font: inherit; }
.dy-btn:hover, .dy-btn:focus-visible { background: hsla(37,91%,55%,.28); outline: none; }
.dy-btn.dy-ghost { border-color: rgba(255,255,255,.25); background: none; color: hsl(220, 20%, 82%); }
.dy-note { margin: 12px 0 0; font-size: 1.15rem; color: hsl(220, 18%, 68%); }
.dy-footer { text-align: center; color: hsl(220, 18%, 66%); font-size: 1.1rem; max-width: 760px; margin: 0 auto; line-height: 1.5; }
@media (max-width: 600px) { .dy-overlay { align-items: flex-end; padding: 0; } .dy-panel { width: 100%; border-radius: 16px 16px 0 0; } }
/* keep the settings button clear of Glance's bottom navigation bar on phones/tablets */
@media (max-width: 1199px) { .dy-fab { bottom: 92px; } }

/* ===== Mobile: bottom bar with 4 icons, one section visible at a time (Glance's own 3-dot bar is hidden) ===== */
.dy-tabbar { display: none; }
@media (max-width: 1190px) {
  .mobile-navigation, .mobile-navigation-offset { display: none !important; }
  .page-columns { display: block !important; }
  .page-column { display: block !important; width: 100% !important; flex-shrink: 1; }
  html[data-dy-section] .page-column > .widget { display: none !important; }
  html[data-dy-section="sports"] .sports-group:not([style*="display: none"]),
  html[data-dy-section="news"] .news-group:not([style*="display: none"]),
  html[data-dy-section="weather"] .wx-widget:not([style*="display: none"]),
  html[data-dy-section="markets"] .markets-widget:not([style*="display: none"]) { display: block !important; }
  body { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  .dy-tabbar { display: flex; position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 55;
    height: 64px; border-radius: 18px; border: 1px solid rgba(255,255,255,.16); background: rgba(22,26,38,.9);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 8px 24px rgba(0,0,0,.45); }
  .dy-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: none; border: 0;
    color: hsl(220, 18%, 72%); font: inherit; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; border-radius: 16px; }
  .dy-tab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .dy-tab.active { color: hsl(37, 91%, 62%); }
  .dy-tab.active svg { filter: drop-shadow(0 0 6px hsla(37,91%,55%,.5)); }
  .dy-tab:focus-visible { outline: 2px solid hsl(37, 91%, 55%); outline-offset: -2px; }
  .dy-fab { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
}

/* ===== Mobile: larger text (Glance sizes everything in rem from a 10px root) ===== */
@media (max-width: 1190px) {
  :root { font-size: 12.5px; }
  .dy-tab { font-size: .95rem; }
  .dy-footer { font-size: .95rem; }
}

/* Weather location label + picker */
.wx-loc { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0 0 10px; color: var(--color-text-paragraph); font: inherit; font-size: 1.3rem; letter-spacing: .05em; cursor: pointer; text-align: left; }
.wx-loc:hover, .wx-loc:focus-visible { color: hsl(37, 91%, 62%); outline: none; }
.wx-loc-e { opacity: .6; font-size: 1.1rem; }
.dy-search { width: 100%; box-sizing: border-box; padding: 11px 13px; border-radius: 10px; border: 1px solid rgba(255,255,255,.22); background: rgba(10,12,20,.65); color: inherit; font: inherit; margin: 6px 0 8px; }
.dy-search:focus { outline: 2px solid hsl(37, 91%, 55%); outline-offset: 0; }
.dy-res { display: flex; flex-direction: column; gap: 6px; max-height: 38vh; overflow: auto; }
.dy-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: inherit; font: inherit; cursor: pointer; }
.dy-pick:hover, .dy-pick:focus-visible { border-color: hsl(37, 91%, 55%); outline: none; }
.dy-pick b { color: hsl(220, 30%, 96%); font-weight: 600; }
.dy-pick span, .dy-hint { color: hsl(220, 18%, 70%); font-size: 1.15rem; }
.dy-hint { padding: 6px 2px; }
.dy-locrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; }
.dy-geo { width: 100%; margin: 4px 0 6px; text-align: center; }

/* ===================== Light mode (Settings -> Appearance). Dark is the default. ===================== */
html[data-dy-theme="light"]:root, html[data-dy-theme="light"]:root[data-scheme], html[data-dy-theme="light"]:root[data-theme] {
  --accent: hsl(30, 92%, 31%); --accent-soft: hsla(30, 92%, 31%, .5); --teal: hsl(172, 70%, 28%);
  --glass-bg: rgba(255,255,255,.80); --glass-bg-inner: rgba(241,244,250,.92); --glass-border: rgba(25,35,60,.12); --glass-border-strong: rgba(25,35,60,.18);
  --bgh: 220; --bgs: 30%; --bgl: 95%;
  --color-text-highlight: hsl(222, 38%, 11%); --color-text-paragraph: hsl(222, 28%, 19%); --color-text-base: hsl(222, 20%, 27%);
  --color-text-base-muted: hsl(222, 16%, 33%); --color-text-subdue: hsl(222, 14%, 38%);
  --color-primary: hsl(30, 92%, 31%); --color-positive: hsl(150, 65%, 24%); --color-negative: hsl(0, 70%, 40%);
  --color-background: hsl(220, 30%, 95%); --color-widget-background: rgba(255,255,255,.80); --color-widget-content-border: rgba(25,35,60,.12);
  --color-widget-background-highlight: rgba(25,35,60,.06); --color-separator: rgba(25,35,60,.14);
  --color-popover-background: #ffffff; --color-popover-border: rgba(25,35,60,.18); --color-progress-border: rgba(25,35,60,.2);
  --color-progress-value: hsl(222, 16%, 46%); --color-graph-gridlines: rgba(25,35,60,.10);
  color-scheme: light;
}
html[data-dy-theme="light"], html[data-dy-theme="light"] body { background-color: #eef1f7; }
html[data-dy-theme="light"] body { background: radial-gradient(1100px 600px at 15% -10%, rgba(255,214,150,.38), transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(150,190,255,.32), transparent 55%), #eef1f7; background-attachment: fixed; }
html[data-dy-theme="light"]:root .flat-icon { filter: none; }
html[data-dy-theme="light"] .widget-content:not(.widget-content-frameless), html[data-dy-theme="light"] .widget-content-frame {
  box-shadow: 0 8px 24px rgba(30,45,80,.10), inset 0 1px 0 rgba(255,255,255,.8);
  background-image: linear-gradient(135deg, rgba(255,255,255,.7), rgba(255,255,255,0) 45%); background-color: var(--glass-bg); }
html[data-dy-theme="light"] .widget-group-content .widget-content:not(.widget-content-frameless) { box-shadow: none; background-image: none; background-color: var(--glass-bg-inner); }
html[data-dy-theme="light"] .widget-header { color: hsl(222, 16%, 34%); border-bottom-color: rgba(25,35,60,.28); }
html[data-dy-theme="light"] hr, html[data-dy-theme="light"] .margin-block-10 { border-color: rgba(25,35,60,.12); }
html[data-dy-theme="light"] .wx-sep { background: rgba(25,35,60,.14); }
html[data-dy-theme="light"] .wx-track { background: rgba(25,35,60,.10); }
html[data-dy-theme="light"] .wx-day .p { color: hsl(208, 75%, 34%); }
html[data-dy-theme="light"] .sp-card { background: rgba(25,35,60,.035); }
html[data-dy-theme="light"] .sp-foot::before, html[data-dy-theme="light"] .sp-foot::after { background: rgba(25,35,60,.16); }
html[data-dy-theme="light"] .expand-toggle-button, html[data-dy-theme="light"] .cards-grid.collapsible-container + .expand-toggle-button {
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.96)); border-top-color: rgba(25,35,60,.22); color: var(--accent); }
html[data-dy-theme="light"] .expand-toggle-button:hover { color: hsl(30, 95%, 28%); background: linear-gradient(180deg, rgba(255,255,255,.7), #fff); }
html[data-dy-theme="light"] input, html[data-dy-theme="light"] textarea, html[data-dy-theme="light"] select { background: rgba(25,35,60,.05); color: var(--color-text-highlight); }
html[data-dy-theme="light"] .dy-fab { background: rgba(255,255,255,.92); border-color: rgba(25,35,60,.22); color: hsl(30, 90%, 34%); box-shadow: 0 6px 18px rgba(30,45,80,.22); }
html[data-dy-theme="light"] .dy-overlay { background: rgba(228,234,246,.68); }
html[data-dy-theme="light"] .dy-panel { background: rgba(255,255,255,.98); border-color: rgba(25,35,60,.16); color: hsl(222, 28%, 19%); box-shadow: 0 20px 50px rgba(30,45,80,.28); }
html[data-dy-theme="light"] .dy-head h2, html[data-dy-theme="light"] .dy-pick b { color: hsl(222, 38%, 11%); }
html[data-dy-theme="light"] .dy-x { color: hsl(222, 16%, 34%); } html[data-dy-theme="light"] .dy-x:hover { color: hsl(30, 90%, 34%); }
html[data-dy-theme="light"] .dy-panel fieldset { border-color: rgba(25,35,60,.16); }
html[data-dy-theme="light"] .dy-panel legend, html[data-dy-theme="light"] .dy-note, html[data-dy-theme="light"] .dy-footer, html[data-dy-theme="light"] .dy-pick span, html[data-dy-theme="light"] .dy-hint { color: hsl(222, 14%, 38%); }
html[data-dy-theme="light"] .dy-opt input { accent-color: hsl(30, 90%, 40%); }
html[data-dy-theme="light"] .dy-btn { border-color: hsl(30, 90%, 36%); background: hsla(30,90%,40%,.12); color: hsl(30, 90%, 28%); }
html[data-dy-theme="light"] .dy-btn:hover, html[data-dy-theme="light"] .dy-btn:focus-visible { background: hsla(30,90%,40%,.24); }
html[data-dy-theme="light"] .dy-btn.dy-ghost { border-color: rgba(25,35,60,.30); background: none; color: hsl(222, 28%, 19%); }
html[data-dy-theme="light"] .dy-search { border-color: rgba(25,35,60,.28); background: #ffffff; }
html[data-dy-theme="light"] .dy-pick { border-color: rgba(25,35,60,.16); background: rgba(25,35,60,.03); }
html[data-dy-theme="light"] .dy-tabbar { background: rgba(255,255,255,.95); border-color: rgba(25,35,60,.16); box-shadow: 0 8px 24px rgba(30,45,80,.2); }
html[data-dy-theme="light"] .dy-tab { color: hsl(222, 14%, 38%); }
html[data-dy-theme="light"] .dy-tab.active { color: hsl(30, 90%, 32%); }
html[data-dy-theme="light"] .dy-tab.active svg { filter: drop-shadow(0 0 5px hsla(30,90%,40%,.35)); }
html[data-dy-theme="light"] .wx-loc:hover, html[data-dy-theme="light"] .wx-loc:focus-visible { color: hsl(30, 90%, 30%); }
/* keep the footer clear of the floating settings button on phones */
@media (max-width: 1190px) { .dy-footer { margin-bottom: 70px; padding-right: 8px; } }

/* Today's date line */
.dy-date { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: calc(14px + env(safe-area-inset-top, 0px)) 4px 4px; font-size: 1.45rem; color: var(--color-text-paragraph); letter-spacing: .03em; }
.dy-date b { color: var(--accent); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 1.2rem; }
.dy-date b::after { content: '·'; margin-left: 10px; color: var(--color-text-subdue); }
.dy-pending .dy-date { opacity: 0; }

/* Golf tab */
.gp { display: inline-block; min-width: 2.6em; color: var(--color-text-subdue); }
.sp-sub.gp-sa { white-space: normal; text-align: left; margin-top: 6px; color: var(--color-text-base); }

.dy-toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 70; background: rgba(22,26,38,.95); color: #fff; padding: 10px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,.2); font-size: 1.3rem; max-width: 90vw; text-align: center; }

/* install-as-app banner (phones only; shown once in a while) */
.dy-install { position: fixed; left: 12px; right: 12px; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; align-items: center; gap: 12px;
  padding: 12px 12px 12px 14px; border-radius: 16px; background: rgba(26, 30, 44, .97); border: 1px solid hsla(37, 91%, 55%, .55); box-shadow: 0 10px 30px rgba(0,0,0,.45); color: #e8eaf0; }
.dy-install img { border-radius: 10px; flex: none; }
.dy-install-t { flex: 1; min-width: 0; line-height: 1.35; font-size: 1.35rem; }
.dy-install-t b { display: block; font-size: 1.5rem; color: hsl(37, 91%, 60%); }
.dy-install-t span { display: block; margin-top: 2px; color: #b8bfd0; }
.dy-install-go { flex: none; border: 0; border-radius: 12px; padding: 10px 16px; font: inherit; font-weight: 700; background: hsl(37, 91%, 55%); color: #1a1408; }
.dy-install-x { flex: none; border: 0; background: transparent; color: #8b93a5; font-size: 2.6rem; line-height: 1; padding: 0 4px; }
.dy-install-link { color: inherit; text-decoration: underline; }
html[data-dy-theme="light"] .dy-install { background: rgba(255,255,255,.98); color: #1b2330; border-color: hsla(30, 90%, 45%, .6); }
html[data-dy-theme="light"] .dy-install-t span { color: #4a5568; }

/* iPhone/Safari: big cards with backdrop-filter can paint a patchy "glass" tint over part of the card while scrolling. Phones get plain translucent cards instead. */
@media (hover: none), (max-width: 1199px) {
  .widget-content:not(.widget-content-frameless), .widget-content-frame, .header-container .header, .expand-toggle-button {
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
}

html[data-dy-theme="light"] body::before { display: none; }

/* tournament / competition name above each game: up to two lines instead of one truncated line */
.sp-card .sp-sub { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }

/* F1 tab: four coloured blocks - results (blue), upcoming schedule (plain), drivers' and constructors' standings (both violet) */
.f1-card .sp-section { text-align: left; margin-top: 0; }
.f1-card.res { border-color: hsla(205, 75%, 62%, .75); box-shadow: 0 0 0 1px hsla(205, 75%, 62%, .22), 0 0 16px hsla(205, 75%, 62%, .16); }
.f1-card.res .sp-section { color: hsl(205, 75%, 70%); }
.f1-card.up { }   /* upcoming = plain border; gold is reserved for LIVE */
.f1-card.up .sp-section { color: var(--color-text-subdue); }
.f1-card.drv { border-color: hsla(265, 75%, 72%, .75); box-shadow: 0 0 0 1px hsla(265, 75%, 72%, .22), 0 0 16px hsla(265, 75%, 72%, .16); }
.f1-card.drv .sp-section { color: hsl(265, 80%, 78%); }
.f1-card.con { border-color: hsla(265, 75%, 72%, .75); box-shadow: 0 0 0 1px hsla(265, 75%, 72%, .22), 0 0 16px hsla(265, 75%, 72%, .16); }
.f1-card.con .sp-section { color: hsl(265, 80%, 78%); }
.f1-list .r.cn { grid-template-columns: 2.4ch 1fr auto; }

/* women's competitions: tournament name above the game in magenta */
.sp-card .sp-sub.wmn { color: hsl(330, 85%, 74%); }

/* gold is only for live games: upcoming cards (hl) get the normal outline */
.sp-card.hl { border-color: var(--glass-border-strong); box-shadow: none; }
a.sp-card.hl:hover { border-color: hsla(37, 91%, 55%, .35); }

/* rankings rows: South Africa in bold white, rank movement arrows */
.f1-list .r.sa .team, .f1-list .r.sa .val, .f1-list .r.sa .pos { color: #fff; font-weight: 700; }
.mv { font-size: .85em; margin-left: 4px; } .mv.up { color: hsl(150, 65%, 55%); } .mv.dn { color: hsl(0, 75%, 65%); }

.sp-sub.sa-hd, .sp-sub.sa-none { text-align: left; margin-top: 8px; white-space: normal; }
.saf { font-size: 1.05em; }

/* women's ranking cards: title in magenta (same as women's competition names) */
.f1-card .sp-section.wmn { color: hsl(330, 85%, 74%); }

/* settings panel: explicit Done (saves) / Cancel + x (discard) */
.dy-hint2 { margin: 0 0 12px; font-size: 1.2rem; color: hsl(220, 18%, 74%); }
.dy-foot { position: sticky; bottom: -20px; display: flex; gap: 10px; margin: 16px -22px -20px; padding: 14px 22px 18px; background: linear-gradient(180deg, rgba(20,24,36,0), rgba(20,24,36,.97) 28%); }
.dy-foot .dy-btn { flex: 1; padding: 13px 16px; font-size: 1.45rem; border-radius: 12px; }
.dy-btn.dy-done { flex: 2; background: hsl(37, 91%, 55%); color: #1a1408; border-color: transparent; font-weight: 700; }
html[data-dy-theme="light"] .dy-foot { background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.97) 28%); }

/* coming-up cards (F1 calendar, golf, tennis): plain outline, compact rows */
.f1-card.cal .sp-section { text-align: left; color: var(--color-text-subdue); }
.f1-list .r.tn { grid-template-columns: 4.6ch 1fr auto; }
.f1-list .r.tn .pos { color: var(--color-text-subdue); } .f1-list .r.tn .pos.wmn { color: hsl(330, 85%, 74%); }
.f1-list .r.cn .team { white-space: normal; }

/* consecutive card lists (rugby/cricket tabs have no section headers any more): keep the same gap between them as between cards */
.sp-grid.one + .sp-grid.one { margin-top: 12px; }

/* Rugby / Cricket tab filter tick boxes */
.fx-filter { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 0 0 14px; padding: 4px 2px 0; }
.fx-filter label { display: inline-flex; align-items: center; gap: 8px; font-size: 1.3rem; cursor: pointer; }
.fx-filter input { width: 20px; height: 20px; accent-color: hsl(37, 91%, 55%); }
.fx-none { display: none; text-align: center; color: var(--color-text-subdue); margin: 8px 0 14px; }
.sp-card.fx-hide { display: none !important; }

/* tick boxes as icon toggles (Springboks/Proteas flag, SA teams shield, internationals globe, all grid) */
.fx-filter { gap: 10px; }
.fx-filter label { position: relative; font-size: 0; }
.fx-filter input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.fx-ic { display: flex; align-items: center; justify-content: center; width: 52px; height: 42px; border-radius: 13px; border: 1px solid var(--glass-border-strong); color: var(--color-text-subdue); background: rgba(255,255,255,.03); transition: border-color .15s, background .15s, color .15s; }
.fx-flag { font-size: 2rem; line-height: 1; filter: grayscale(.85) opacity(.7); }
.fx-filter input:checked + .fx-ic { border-color: hsla(37, 91%, 55%, .85); background: hsla(37, 91%, 55%, .16); color: hsl(37, 91%, 62%); }
.fx-filter input:checked + .fx-ic .fx-flag { filter: none; }
.fx-filter input:focus-visible + .fx-ic { outline: 2px solid hsl(37, 91%, 62%); outline-offset: 2px; }

/* Springboks toggle: the springbok emblem cut out in white (assets/springbok.png as a mask); green when on */
.fx-bok { display: block; width: 40px; height: 28px; background-color: currentColor; -webkit-mask: url(/assets/springbok.png?v=1) center / contain no-repeat; mask: url(/assets/springbok.png?v=1) center / contain no-repeat; }
.fx-filter input:checked + .fx-ic.bok { background: transparent; border-color: hsla(37, 91%, 55%, .85); color: hsl(37, 91%, 62%); }     /* on = gold springbok on a transparent button, like the other toggles */

/* Proteas toggle: the protea from the Proteas crest (assets/protea.png, gold part cut out of the supplied image) as a mask, same on/off style as the springbok */
.fx-bok.fx-protea { width: 30px; height: 32px; -webkit-mask-image: url(/assets/protea.png?v=2); mask-image: url(/assets/protea.png?v=2); }

.cbadge { display: inline-block; vertical-align: -3px; margin-right: 6px; line-height: 1; }
.cbadge.bok, .cbadge.protea { background-color: hsl(37, 91%, 62%); -webkit-mask: url(/assets/springbok.png?v=1) center / contain no-repeat; mask: url(/assets/springbok.png?v=1) center / contain no-repeat; width: 24px; height: 17px; }
.cbadge.protea { -webkit-mask-image: url(/assets/protea.png?v=2); mask-image: url(/assets/protea.png?v=2); width: 18px; height: 19px; }
.cbadge.flag { font-size: 1.05em; vertical-align: baseline; }
.sp-card[data-cat] { position: relative; }
.sp-card[data-cat] .cbadge { position: absolute; left: 10px; top: 8px; margin: 0; vertical-align: baseline; }
.cbadge.globe { width: 19px; height: 19px; background-color: hsl(37, 91%, 62%); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18'/%3E%3C/svg%3E") center / contain no-repeat; }
.fx-all { font: 500 1.3rem ui-monospace, Menlo, monospace; letter-spacing: .06em; }
.fx-filter .fx-farl { margin-left: 8px; padding-left: 14px; border-left: 1px solid var(--glass-border-strong); }
.sp-card[data-cat] > .sp-sub { padding-left: 38px; padding-right: 38px; }
.fx-filter { gap: 8px; }
.fx-filter .fx-farl { margin-left: auto; padding-left: 8px; }      /* look-far-ahead button always sits at the right edge, on every tab */
.fx-filter.solo .fx-farl { padding-left: 0; border-left: 0; }
.dy-fbtext { width: 100%; box-sizing: border-box; resize: vertical; min-height: 64px; margin: 0 0 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.05); color: inherit; font: inherit; }
.dy-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.dy-fb .dy-fbmsg { font-size: 1.15rem; color: hsl(220, 18%, 68%); }
html[data-dy-theme="light"] .dy-fbtext { border-color: rgba(25,35,60,.30); background: rgba(25,35,60,.04); }
/* tighter top: less dead space above the date line */
main.page { padding-top: 6px; }
.dy-date { padding-top: calc(4px + env(safe-area-inset-top, 0px)); }
main.page { padding-top: 0; }
.dy-date { padding-top: env(safe-area-inset-top, 0px); padding-bottom: 2px; }
/* top gap: a small fixed gap in any browser; only the installed app (full screen) needs room for the status bar */
.dy-date { padding-top: 2px; padding-bottom: 0; }
/* (the installed-app top spacing now lives in the html.dy-app rules at the end of this file) */
/* news source tabs: smaller so they take fewer lines */
.news-group .widget-group-title { font-size: .92rem; letter-spacing: .04em; }
.news-group .widget-group-header { gap: 4px 14px; }
@media (max-width: 1190px) { html[data-dy-section="news"] .news-group { margin-top: 26px !important; } }      /* same gap under the date line as on the sports tab */
@media (max-width: 1190px) { html[data-dy-section="weather"] .wx-widget, html[data-dy-section="markets"] .markets-widget { margin-top: 26px !important; } }

/* top line: logo + short date on the left, live and weather chips on the right */
.dy-date { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; }
.dy-mark { width: 26px; height: 26px; border-radius: 7px; flex: none; }
.dy-h { font-size: 1.5rem; letter-spacing: .03em; white-space: nowrap; }
.dy-sp { flex: 1; }
.dy-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.04); color: inherit; font: inherit; font-size: 1.25rem; line-height: 1.4; cursor: pointer; white-space: nowrap; }
.dy-chip:hover, .dy-chip:focus-visible { background: rgba(255,255,255,.1); outline: none; }
.dy-live { border-color: hsla(37, 91%, 55%, .8); color: hsl(37, 91%, 66%); background: hsla(37, 91%, 55%, .12); }
.dy-dot { width: 8px; height: 8px; border-radius: 50%; background: hsl(37, 91%, 55%); animation: dydot 1.6s ease-in-out infinite; }
@keyframes dydot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
html[data-dy-theme="light"] .dy-chip { border-color: rgba(25,35,60,.3); background: rgba(25,35,60,.05); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .dy-dot { animation: none; } }
.dy-h { letter-spacing: 0; word-spacing: -.12em; font-size: 1.45rem; }      /* the date looked too spread out */
.dy-sp { display: none; }
.dy-h { flex: 1; text-align: center; }      /* date centred in the space between the logo and the chips */
.dy-h { display: flex; justify-content: center; }
.dy-pill { display: inline-block; padding: 3px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.04); font-size: 1.25rem; line-height: 1.4; white-space: nowrap; }
html[data-dy-theme="light"] .dy-pill { border-color: rgba(25,35,60,.3); background: rgba(25,35,60,.05); }
.dy-date { justify-content: space-between; gap: 0; }      /* logo, date, live, weather: identical gaps between all of them */
.dy-h { flex: none; }
/* the four top items scale with the screen: always equal gaps (space-between), never a gap below 6px, and they get a little tighter on very small phones */
.dy-date { gap: 6px; }
.dy-chip, .dy-pill { padding-left: clamp(7px, 3vw, 12px); padding-right: clamp(7px, 3vw, 12px); font-size: clamp(1.05rem, 3.4vw, 1.25rem); }
.dy-mark { width: clamp(22px, 7vw, 26px); height: clamp(22px, 7vw, 26px); }
.dy-date { max-width: 520px; margin-left: auto; margin-right: auto; }      /* on tablets the four items stay grouped instead of spreading across the whole width */
.dy-mark { border: 1px solid rgba(255,255,255,.2); box-sizing: border-box; }
html[data-dy-theme="light"] .dy-mark { border-color: rgba(25,35,60,.3); }
.cbadge.ball, .cbadge.club { width: 19px; height: 19px; background-color: hsl(37, 91%, 62%); }
.cbadge.ball { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8.2l3.4 2.5-1.3 4h-4.2l-1.3-4z'/%3E%3Cpath d='M12 8.2V3.2M15.4 10.7l4.6-1.5M14.1 14.7l2.9 3.9M9.9 14.7l-2.9 3.9M8.6 10.7L4 9.2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8.2l3.4 2.5-1.3 4h-4.2l-1.3-4z'/%3E%3Cpath d='M12 8.2V3.2M15.4 10.7l4.6-1.5M14.1 14.7l2.9 3.9M9.9 14.7l-2.9 3.9M8.6 10.7L4 9.2'/%3E%3C/svg%3E") center / contain no-repeat; }
.cbadge.club { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 2.5v6c0 4.5-3.2 7.8-7.5 9.5C7.7 19.3 4.5 16 4.5 11.5v-6z'/%3E%3Cpath d='M12 8l1.2 2.5 2.7.4-2 1.9.5 2.7L12 14.2 9.6 15.5l.5-2.7-2-1.9 2.7-.4z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 2.5v6c0 4.5-3.2 7.8-7.5 9.5C7.7 19.3 4.5 16 4.5 11.5v-6z'/%3E%3Cpath d='M12 8l1.2 2.5 2.7.4-2 1.9.5 2.7L12 14.2 9.6 15.5l.5-2.7-2-1.9 2.7-.4z'/%3E%3C/svg%3E") center / contain no-repeat; }
.fx-filter.fx-six .fx-ic { width: 40px; }      /* six buttons must fit one row on a phone */
.fx-bok.fx-bafana { width: 34px; height: 19px; -webkit-mask-image: url(/assets/bafana.png?v=1); mask-image: url(/assets/bafana.png?v=1); }
.cbadge.ball { width: 28px; height: 16px; -webkit-mask: url(/assets/bafana.png?v=1) center / contain no-repeat; mask: url(/assets/bafana.png?v=1) center / contain no-repeat; }
.dy-sports { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 14px; padding: 4px 2px 0; }
.dy-sports label { position: relative; display: inline-flex; cursor: pointer; font-size: 0; }
.dy-sports input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.dy-sports .fx-ic { width: 40px; }
.dy-sports input:checked + .fx-ic { border-color: hsla(37, 91%, 55%, .85); background: hsla(37, 91%, 55%, .16); color: hsl(37, 91%, 62%); }
.dy-sports input:focus-visible + .fx-ic { outline: 2px solid hsl(37, 91%, 62%); outline-offset: 2px; }
.sf-hide { display: none !important; }
.dy-sports { margin: 0 0 12px; padding: 0; }
.sf-on > :not(.dy-sports):not(.sf-feed) { display: none !important; }
.sf-feed .sp-grid { margin-bottom: 4px; }
.fx-bok.fx-cricket { width: 26px; height: 24px; -webkit-mask: url(/assets/cricket.png?v=2) center / contain no-repeat; mask: url(/assets/cricket.png?v=2) center / contain no-repeat; }
.fx-bok.fx-f1 { width: 34px; height: 21px; -webkit-mask: url(/assets/f1flag.png?v=1) center / contain no-repeat; mask: url(/assets/f1flag.png?v=1) center / contain no-repeat; }
.fx-bok.fx-soccer { width: 36px; height: 21px; -webkit-mask: url(/assets/soccer.svg?v=1) center / contain no-repeat; mask: url(/assets/soccer.svg?v=1) center / contain no-repeat; }
.fx-bok.fx-rugby { width: 28px; height: 26px; -webkit-mask: url(/assets/rugby.png?v=1) center / contain no-repeat; mask: url(/assets/rugby.png?v=1) center / contain no-repeat; }
.fx-bok.fx-tennis { width: 31px; height: 27px; -webkit-mask: url(/assets/tennis.png?v=1) center / contain no-repeat; mask: url(/assets/tennis.png?v=1) center / contain no-repeat; }
.fx-bok.fx-golf { width: 22px; height: 31px; -webkit-mask: url(/assets/golf.svg?v=2) center / contain no-repeat; mask: url(/assets/golf.svg?v=2) center / contain no-repeat; }
.fx-bok.fx-golf { width: 32px; height: 29px; -webkit-mask-image: url(/assets/golf.svg?v=3); mask-image: url(/assets/golf.svg?v=3); }
.fx-bok.fx-golf { width: 32px; height: 30px; -webkit-mask: url(/assets/golf.png?v=1) center / contain no-repeat; mask: url(/assets/golf.png?v=1) center / contain no-repeat; }
.fx-bok.fx-golf { width: 28px; height: 28px; -webkit-mask: url(/assets/golf.png?v=2) center / contain no-repeat; mask: url(/assets/golf.png?v=2) center / contain no-repeat; }
.fx-bok.fx-rugby { -webkit-mask: url(/assets/rugby.png?v=2) center / contain no-repeat; mask: url(/assets/rugby.png?v=2) center / contain no-repeat; }
.fx-bok.fx-tennis { width: 32px; height: 29px; -webkit-mask: url(/assets/tennis.png?v=2) center / contain no-repeat; mask: url(/assets/tennis.png?v=2) center / contain no-repeat; }
.fx-bok.fx-soccer { width: 38px; height: 23px; -webkit-mask: url(/assets/soccer.svg?v=2) center / contain no-repeat; mask: url(/assets/soccer.svg?v=2) center / contain no-repeat; }
.fx-bok.fx-soccer { width: 34px; height: 28px; -webkit-mask: url(/assets/soccer.png?v=1) center / contain no-repeat; mask: url(/assets/soccer.png?v=1) center / contain no-repeat; }
.fx-bok.fx-soccer { -webkit-mask: url(/assets/soccer.png?v=2) center / contain no-repeat; mask: url(/assets/soccer.png?v=2) center / contain no-repeat; }
.fx-bok.fx-golf { -webkit-mask: url(/assets/golf.png?v=3) center / contain no-repeat; mask: url(/assets/golf.png?v=3) center / contain no-repeat; }
.fx-bok.fx-f1 { height: 22px; -webkit-mask: url(/assets/f1flag.png?v=2) center / contain no-repeat; mask: url(/assets/f1flag.png?v=2) center / contain no-repeat; }
.fx-bok.fx-rugby { -webkit-mask: url(/assets/rugby.png?v=3) center / contain no-repeat; mask: url(/assets/rugby.png?v=3) center / contain no-repeat; }
.fx-bok.fx-soccer { width: 36px; height: 26px; -webkit-mask: url(/assets/soccer.png?v=3) center / contain no-repeat; mask: url(/assets/soccer.png?v=3) center / contain no-repeat; }
.fx-bok.fx-rugby { -webkit-mask: url(/assets/rugby.png?v=4) center / contain no-repeat; mask: url(/assets/rugby.png?v=4) center / contain no-repeat; }
/* logo: gold ring + soft glow so it stands out against the dark background */
.dy-mark { border: 1.5px solid hsla(37, 91%, 58%, .9); box-shadow: 0 0 9px hsla(37, 91%, 55%, .5); filter: brightness(1.3) saturate(1.2); }
html[data-dy-theme="light"] .dy-mark { border-color: hsla(30, 90%, 40%, .9); box-shadow: 0 0 8px hsla(30, 90%, 40%, .35); filter: none; }
.dy-chip.dy-inst { padding: 3px 8px; }
.dy-install-t span b { display: inline; font-size: inherit; color: hsl(37, 91%, 66%); }      /* steps stay on one flowing line (the bold words used to break onto their own lines) */
/* install chip: red and flashing until the app is installed */
.dy-chip.dy-inst { color: hsl(0, 90%, 66%); border-color: hsla(0, 85%, 58%, .9); background: hsla(0, 85%, 55%, .16); animation: dyflash 1.1s ease-in-out infinite; }
@keyframes dyflash { 0%, 100% { opacity: 1; box-shadow: 0 0 10px hsla(0, 85%, 55%, .65); } 50% { opacity: .35; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .dy-chip.dy-inst { animation: none; } }
html[data-dy-theme="light"] .dy-chip.dy-inst { color: hsl(0, 75%, 42%); border-color: hsla(0, 75%, 42%, .9); background: hsla(0, 80%, 45%, .1); }
.dy-date.tight .dy-mark { display: none; }
.dy-date.wrap { flex-wrap: wrap; row-gap: 8px; justify-content: center; gap: 8px; }
.dy-date.wrap .dy-h { flex: none; }
.dy-install-copy { flex: none; border: 1px solid hsl(37, 91%, 55%); background: hsla(37, 91%, 55%, .16); color: hsl(37, 91%, 68%); border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 1.25rem; cursor: pointer; }
.dy-install-t .dy-install-copy { display: block; margin-top: 8px; }
.sp-card { position: relative; }
.sp-ico { position: absolute; left: 12px; bottom: 10px; width: 22px; height: 18px; pointer-events: none; background-color: hsla(37, 91%, 62%, .85); }
.sp-ico-rugby { -webkit-mask: url(/assets/rugby.png?v=4) left bottom / contain no-repeat; mask: url(/assets/rugby.png?v=4) left bottom / contain no-repeat; }
.sp-ico-cricket { -webkit-mask: url(/assets/cricket.png?v=2) left bottom / contain no-repeat; mask: url(/assets/cricket.png?v=2) left bottom / contain no-repeat; }
.sp-ico-soccer { width: 26px; -webkit-mask: url(/assets/soccer.png?v=3) left bottom / contain no-repeat; mask: url(/assets/soccer.png?v=3) left bottom / contain no-repeat; }
.sp-ico-tennis { -webkit-mask: url(/assets/tennis.png?v=2) left bottom / contain no-repeat; mask: url(/assets/tennis.png?v=2) left bottom / contain no-repeat; }
.sp-ico-f1 { width: 26px; -webkit-mask: url(/assets/f1flag.png?v=2) left bottom / contain no-repeat; mask: url(/assets/f1flag.png?v=2) left bottom / contain no-repeat; }
.sp-ico-golf { -webkit-mask: url(/assets/golf.png?v=2) left bottom / contain no-repeat; mask: url(/assets/golf.png?v=2) left bottom / contain no-repeat; }
.sp-foot { position: relative; }
.sp-foot .sp-ico { left: 0; bottom: -2px; }                                  /* the icon sits on the result line itself, at its left end */
.sp-card.has-ico .sp-foot::before { margin-left: 30px; }                     /* the line starts after the icon */
.sp-card.has-ico:not(:has(.sp-foot)) { padding-bottom: 30px !important; }    /* tiles without a result line keep a little corner strip */

/* ===== fixed bars (phones) ===== */
:root { --dy-panel: rgba(37, 40, 50, .8); --dy-top: 36px; --dy-tabs: 60px; --dy-bar: hsl(var(--bgh) var(--bgs) var(--bgl)); }
html[data-dy-theme="light"] { --dy-bar: rgb(244, 246, 250); --dy-panel: rgba(236, 240, 247, .8); }
@media (max-width: 1190px) {
  .dy-date { position: sticky; top: var(--dy-off, 0px); z-index: 70; background: var(--dy-bar); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); margin-left: -12px; margin-right: -12px; padding-left: 16px; padding-right: 16px; padding-bottom: 6px; }
  .sports-group .widget-group-header, .news-group .widget-group-header { position: sticky; top: var(--dy-top); z-index: 60; background: var(--dy-bar); padding-top: 6px; padding-bottom: 6px; transition: transform .22s ease, opacity .22s ease; }
  .sports-group .fx-filter, .sports-group .dy-sports { position: sticky; top: calc(var(--dy-top) + var(--dy-tabs)); z-index: 50; background: var(--dy-panel); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding-top: 6px; padding-bottom: 6px; margin-bottom: 6px; transition: transform .22s ease, opacity .22s ease; }
  html.dy-nav-hidden .sports-group .widget-group-header, html.dy-nav-hidden .news-group .widget-group-header { transform: translateY(calc(-100% - 40px)); opacity: 0; pointer-events: none; }
  html.dy-nav-hidden .sports-group .fx-filter, html.dy-nav-hidden .sports-group .dy-sports { transform: translateY(calc(-100% - calc(var(--dy-tabs) + 40px))); opacity: 0; pointer-events: none; }
}
html.dy-toets body::after { content: 'TOETS'; position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 300; padding: 1px 8px 2px; border-radius: 0 0 7px 7px; background: #c0392b; color: #fff; font: 700 9px/1.3 sans-serif; letter-spacing: .12em; pointer-events: none; }

/* ===== installed app (full screen, translucent status bar): the fixed bar must stick BELOW the status bar, not under it ===== */
html.dy-app { --dy-sa: var(--dy-sa-raw, env(safe-area-inset-top, 0px)); }      /* the bar always sits fully BELOW the status bar (Android 15 edge-to-edge and iPhones both report the bar height here) */
@media (max-width: 1190px) {
  html.dy-app main.page { padding-top: var(--dy-sa); }
  html.dy-app .dy-date { padding-top: 4px; }
  html.dy-app::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: var(--dy-off, 0px); background: var(--dy-bar); z-index: 80; pointer-events: none; }      /* hides content scrolling under the clock */
}
.f1-ses .f1-race { margin-top: 2px; }
.f1-ses.past { opacity: .6; }
.f1-ses .sp-foot { margin-top: 6px; }
.f1-ses .sp-sub { margin-bottom: 4px; }
.f1-ses .f1-race, .f1-ses .f1-circ { text-align: center; }