/* ========================================================= Pace Clock — TV / FULLSCREEN File: pace_clock/pc-tv STRUCTURE ========================================================= 01. TV MODE — BASE LAYOUT Fullscreen canvas, hidden website elements, base clock and status layout 02. ROUND CONTROL — SAFETY OVERRIDES Hide the inline round editor in TV mode 03. TV MODE — MOBILE / TABLET BASE Base responsive layout for tablets and phones 04. TV VIEW — SETTINGS AND DISPLAY OPTIONS TV View panel Clock sizes Clock styles Layout selection Element visibility Circle timer layout Phone fallback 05. TV CONTROLS — AUTO HIDE Automatic visibility of TV controls 06. TV CONTROLS — BUTTON BAR Start, Skip and TV View buttons 07. TV CONTROLS — SINGLE ROW FIX Keep control buttons in one row 08. TV MODE — SCROLL LOCK Prevent page scrolling and overscroll 09. TV MODE — FULLSCREEN / SAFE AREA iPad fullscreen fixes Safe-area handling Global TV sizing Standard TV card colors 10. DASHBOARD — BASE LAYOUT Dashboard visibility Fullscreen canvas Header Main timer Statistics Footer cards Dashboard display options Dashboard controls 11. DASHBOARD — RESPONSIVE Large desktop Desktop Tablet Landscape mobile Portrait mobile Phone fallback 12. DASHBOARD — ROOT SIZE FIX Viewport sizing Containing-block reset Transform and zoom reset 13. DASHBOARD — ANALYSIS SWIM THEME Brand colors Full-width layout Timer colors Cards Progress bar TV View overlay 14. DASHBOARD — SEMANTIC ELEMENT FIX Header and footer display protection 15. COACH — FINAL LAYOUT Main Coach screen Large Pace Clock Current Set / Next Up Block / Rep / Round Progress + Distance Shared Coach card styles TV View visibility options 16. COACH — LOCAL TIME Fixed local time in top-right corner 17. COACH — IPAD / TABLET LANDSCAPE Responsive Coach layout for tablet landscape 18. COACH — LARGE DESKTOP / TV Large-screen sizing and scaling 19. COACH — VERY LARGE TV Extra scaling for very large screens 20. COACH — PHONE SAFETY Original phone behaviour unless TV layout is forced ========================================================= */ /* ========================================================= 1. DISPLAY MODE: TV ========================================================= */ html.pc-tv-page, body.pc-tv-page{ margin:0 !important; padding:0 !important; width:100% !important; min-height:100vh !important; min-height:100dvh !important; overflow:hidden !important; background:linear-gradient(180deg,#00aaff,#0088dd) !important; } body.pc-tv-page .site-header, body.pc-tv-page .siteHeader, body.pc-tv-page .main-header, body.pc-tv-page .mainHeader, body.pc-tv-page .navbar, body.pc-tv-page .header-wrap, body.pc-tv-page .footer, body.pc-tv-page .site-footer, body.pc-tv-page .main-footer, body.pc-tv-page .footer-wrap{ display:none !important; } #paceClockApp.mode-tv{ width:100vw !important; min-height:100vh !important; min-height:100dvh !important; margin:0 !important; padding:0 !important; overflow:hidden !important; background:linear-gradient(180deg,#00aaff,#0088dd) !important; --siteHeaderH:0px !important; } #paceClockApp.mode-tv .wrap, #paceClockApp.mode-tv .appShell{ width:100% !important; max-width:none !important; min-height:100vh !important; min-height:100dvh !important; margin:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; } #paceClockApp.mode-tv .appShell{ padding:0 !important; display:flex !important; flex-direction:column !important; } #paceClockApp.mode-tv .appHeaderRow{ display:block !important; } #paceClockApp.mode-tv .appHeaderRow .btn:not(#fsBtn), #paceClockApp.mode-tv .appHeaderRow .iconBtn, #paceClockApp.mode-tv #homeTopBtn, #paceClockApp.mode-tv #guideTopBtn, #paceClockApp.mode-tv #resetTopBtn, #paceClockApp.mode-tv #setListTopBtn, #paceClockApp.mode-tv #headAddSetBtn, #paceClockApp.mode-tv #openSettingsBtn{ display:none !important; } #paceClockApp.mode-tv #setsTable, #paceClockApp.mode-tv #lapsPanel, #paceClockApp.mode-tv .settingsPanel, #paceClockApp.mode-tv .settingsOverlay, #paceClockApp.mode-tv #startPauseBtn, #paceClockApp.mode-tv #skipBtn, #paceClockApp.mode-tv #clockCard .startbar{ display:none !important; } #paceClockApp.mode-tv #clockCard{ width:min(1100px, calc(100vw - 80px)) !important; max-width:1100px !important; margin:22vh auto 0 !important; padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; overflow:visible !important; } #paceClockApp.mode-tv #clockCard .time{ font-size:clamp(92px, 13vw, 160px) !important; line-height:.9 !important; padding:34px 48px !important; border-radius:28px !important; background:rgba(18,70,110,.55) !important; white-space:nowrap !important; overflow:hidden !important; } #paceClockApp.mode-tv #clockCard .status{ display:grid !important; grid-template-columns:1fr 1fr 1fr !important; gap:18px !important; margin-top:18px !important; } #paceClockApp.mode-tv #phaseStatus{ grid-column:1 / -1 !important; min-width:0 !important; min-height:120px !important; padding:18px 28px !important; font-size:clamp(34px, 5vw, 68px) !important; line-height:1.08 !important; text-align:center !important; white-space:normal !important; overflow:hidden !important; border-radius:26px !important; background:rgba(255,255,255,.10) !important; } #paceClockApp.mode-tv #setStatus, #paceClockApp.mode-tv #repStatus, #paceClockApp.mode-tv #roundStatus{ display:flex !important; flex-direction:column !important; min-height:145px !important; border-radius:24px !important; background:rgba(255,255,255,.10) !important; } #paceClockApp.mode-tv #setStatus span, #paceClockApp.mode-tv #repStatus span, #paceClockApp.mode-tv #roundStatus span{ font-size:22px !important; letter-spacing:.18em !important; } #paceClockApp.mode-tv #setStatus strong, #paceClockApp.mode-tv #repStatus strong, #paceClockApp.mode-tv #roundStatus strong{ font-size:64px !important; line-height:.95 !important; } #paceClockApp.mode-tv #setStatus em, #paceClockApp.mode-tv #repStatus em, #paceClockApp.mode-tv #roundStatus em{ font-size:20px !important; font-style:normal !important; } #paceClockApp.mode-tv #fsBtn{ position:fixed !important; right:28px !important; bottom:24px !important; z-index:99999 !important; display:inline-flex !important; color:#1487dc !important; background:#fff !important; border:1px solid #d7e8f7 !important; } @media (max-width:768px){ #paceClockApp.mode-tv #clockCard{ width:calc(100vw - 40px) !important; margin:24vh auto 0 !important; } #paceClockApp.mode-tv #clockCard .time{ font-size:clamp(72px, 18vw, 120px) !important; padding:28px 28px !important; } #paceClockApp.mode-tv #clockCard .status{ grid-template-columns:1fr 1fr !important; gap:14px !important; } #paceClockApp.mode-tv #phaseStatus{ grid-column:1 / -1 !important; min-height:100px !important; font-size:clamp(30px, 7vw, 48px) !important; } #paceClockApp.mode-tv #roundStatus{ grid-column:1 / -1 !important; } } /* ========================================================= 2. FINAL SAFETY OVERRIDES ========================================================= */ #paceClockApp.mode-tv #roundInlineControl, html.pc-tv-page #roundInlineControl, body.pc-tv-page #roundInlineControl{ display:none !important; visibility:hidden !important; height:0 !important; min-height:0 !important; padding:0 !important; margin:0 !important; overflow:hidden !important; } #paceClockApp.mode-tv #roundStatus{ display:flex !important; } /* ========================================================= 3. TV MOBILE / TABLET FINAL FIX ========================================================= */ @media (max-width:900px){ #paceClockApp.mode-tv #clockCard{ width:calc(100vw - 40px) !important; margin:18vh auto 0 !important; } #paceClockApp.mode-tv #phaseStatus{ min-height:190px !important; max-height:190px !important; grid-column:1 / -1 !important; font-size:clamp(28px, 6vw, 48px) !important; line-height:1.18 !important; padding:18px 22px !important; overflow:hidden !important; } #paceClockApp.mode-tv #clockCard .status{ grid-template-columns:1fr !important; gap:14px !important; } #paceClockApp.mode-tv #setStatus, #paceClockApp.mode-tv #repStatus, #paceClockApp.mode-tv #roundStatus{ width:100% !important; min-height:96px !important; max-height:96px !important; border-radius:24px !important; display:flex !important; flex-direction:row !important; justify-content:space-between !important; align-items:center !important; padding:18px 28px !important; } #paceClockApp.mode-tv #setStatus span, #paceClockApp.mode-tv #repStatus span, #paceClockApp.mode-tv #roundStatus span{ font-size:18px !important; min-width:110px !important; text-align:left !important; } #paceClockApp.mode-tv #setStatus strong, #paceClockApp.mode-tv #repStatus strong, #paceClockApp.mode-tv #roundStatus strong{ font-size:56px !important; line-height:1 !important; } #paceClockApp.mode-tv #setStatus em, #paceClockApp.mode-tv #repStatus em, #paceClockApp.mode-tv #roundStatus em{ font-size:16px !important; min-width:120px !important; text-align:right !important; white-space:nowrap !important; } } @media (max-width:520px){ html.pc-tv-page, body.pc-tv-page, #paceClockApp.mode-tv{ overflow:hidden !important; height:100dvh !important; } #paceClockApp.mode-tv #clockCard{ width:calc(100vw - 20px) !important; margin:10px auto 0 !important; } #paceClockApp.mode-tv #clockCard .time{ font-size:clamp(54px, 16vw, 76px) !important; padding:20px 10px !important; border-radius:22px !important; line-height:1 !important; } #paceClockApp.mode-tv #clockCard .status{ gap:10px !important; margin-top:12px !important; } #paceClockApp.mode-tv #phaseStatus{ min-height:96px !important; max-height:96px !important; font-size:clamp(24px, 7vw, 34px) !important; padding:12px !important; border-radius:22px !important; } #paceClockApp.mode-tv #setStatus, #paceClockApp.mode-tv #repStatus, #paceClockApp.mode-tv #roundStatus{ min-height:70px !important; max-height:70px !important; padding:10px 14px !important; border-radius:20px !important; } #paceClockApp.mode-tv #setStatus span, #paceClockApp.mode-tv #repStatus span, #paceClockApp.mode-tv #roundStatus span{ font-size:13px !important; min-width:74px !important; } #paceClockApp.mode-tv #setStatus strong, #paceClockApp.mode-tv #repStatus strong, #paceClockApp.mode-tv #roundStatus strong{ font-size:34px !important; } #paceClockApp.mode-tv #setStatus em, #paceClockApp.mode-tv #repStatus em, #paceClockApp.mode-tv #roundStatus em{ font-size:13px !important; min-width:78px !important; } #paceClockApp.mode-tv #fsBtn{ right:12px !important; bottom:12px !important; padding:10px 14px !important; border-radius:16px !important; } } /* ========================================================= 4. TV VIEW / FULLSCREEN MODE ========================================================= */ .tvViewBtn{ display:none; position:fixed; top:14px; right:14px; z-index:99990; padding:.55rem .85rem; border-radius:999px; } body.tv-view-enabled .tvViewBtn{display:inline-flex;} .tvViewPanel{ display:none; position:fixed; top:64px; right:14px; z-index:99991; width:min(320px, calc(100vw - 28px)); background:rgba(8,18,36,.96); border:1px solid rgba(130,180,255,.35); border-radius:18px; box-shadow:0 18px 48px rgba(0,0,0,.35); color:#fff; } .tvViewPanel.open{display:block;} .tvViewPanelInner{padding:1rem;} .tvViewHead{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.85rem; } .tvViewClose{ border:0; background:transparent; color:#fff; font-size:1.6rem; line-height:1; cursor:pointer; } .tvViewSection{ padding:14px 0; border-top:1px solid rgba(255,255,255,.10); } .tvViewSection:first-of-type{ border-top:0; padding-top:4px; } .tvViewSectionTitle{ margin-bottom:10px; color:rgba(255,255,255,.58); font-size:11px; font-weight:800; line-height:1; letter-spacing:.12em; text-transform:uppercase; } .tvViewField{ display:grid; gap:6px; margin-bottom:12px; } .tvViewField:last-child{margin-bottom:0;} .tvViewField > span{ color:rgba(255,255,255,.78); font-size:13px; font-weight:650; } .tvViewField select{ width:100%; min-height:44px; color:#111; } .tvDisplayGroup[hidden]{ display:none !important; } .tvViewChecks{ display:grid; gap:10px; margin:0; } .tvViewChecks label{ display:grid; grid-template-columns:24px minmax(0,1fr); align-items:center; gap:10px; min-height:34px; color:#fff; font-size:14px; line-height:1.25; } .tvViewChecks input[type="checkbox"]{ width:20px; height:20px; margin:0; } .tvViewFooter .btn{ width:100%; min-height:42px; color:#fff !important; background:rgba(255,255,255,.08) !important; border:1px solid rgba(255,255,255,.16) !important; opacity:1 !important; } .tvViewFooter .btn:hover{ background:rgba(255,255,255,.14) !important; } /* TV sizes — only when JS adds tv-clock-* */ #paceClockApp.mode-tv.tv-clock-default #clockCard{ width:min(1100px, calc(100vw - 80px)) !important; } #paceClockApp.mode-tv.tv-clock-large #clockCard{ width:min(1320px, calc(100vw - 56px)) !important; } #paceClockApp.mode-tv.tv-clock-huge #clockCard{ width:min(1500px, calc(100vw - 32px)) !important; } /* modern */ #paceClockApp.mode-tv.tv-style-modern #timeText{ color:#fff !important; text-shadow:none !important; } /* pool LED */ #paceClockApp.mode-tv.tv-style-poolRed #timeText, #paceClockApp.mode-tv.tv-style-poolGreen #timeText, #paceClockApp.mode-tv.tv-style-poolAmber #timeText{ font-family:"Courier New", ui-monospace, monospace !important; font-weight:900 !important; letter-spacing:-.05em !important; background:#050505 !important; border:4px solid rgba(255,255,255,.16) !important; box-shadow: inset 0 0 24px rgba(0,0,0,.95), 0 16px 42px rgba(0,0,0,.36) !important; } #paceClockApp.mode-tv.tv-style-poolRed #timeText{ color:#ff3b30 !important; text-shadow:0 0 8px rgba(255,59,48,.95),0 0 22px rgba(255,59,48,.72),0 0 42px rgba(255,59,48,.42) !important; } #paceClockApp.mode-tv.tv-style-poolGreen #timeText{ color:#20ff38 !important; text-shadow:0 0 8px rgba(32,255,56,.95),0 0 22px rgba(32,255,56,.72),0 0 42px rgba(32,255,56,.42) !important; } #paceClockApp.mode-tv.tv-style-poolAmber #timeText{ color:#ffc400 !important; text-shadow:0 0 8px rgba(255,196,0,.95),0 0 22px rgba(255,196,0,.72),0 0 42px rgba(255,196,0,.42) !important; } /* TV font sizes — not used on phone unless Force TV Layout */ #paceClockApp.mode-tv.tv-clock-default #timeText{ font-size:clamp(92px, 13vw, 160px) !important; } #paceClockApp.mode-tv.tv-clock-large #timeText{ font-size:clamp(110px, 15vw, 190px) !important; padding-left:32px !important; padding-right:32px !important; } #paceClockApp.mode-tv.tv-clock-huge #timeText{ font-size:clamp(120px, 17vw, 220px) !important; padding-left:20px !important; padding-right:20px !important; } /* hide options */ #paceClockApp.mode-tv.tv-hide-title .currentWorkoutBar, #paceClockApp.mode-tv.tv-hide-title #currentWorkoutTitle, #paceClockApp.mode-tv.tv-hide-title #currentWorkoutDirty, #paceClockApp.mode-tv.tv-hide-phase #phaseStatus, #paceClockApp.mode-tv.tv-hide-block #setStatus, #paceClockApp.mode-tv.tv-hide-rep #repStatus, #paceClockApp.mode-tv.tv-hide-round #roundStatus, #paceClockApp.mode-tv.tv-hide-round #roundInlineControl{ display:none !important; } /* layouts */ /* circles */ #paceClockApp.mode-tv.tv-layout-circles #timeText{ position:absolute !important; opacity:0 !important; pointer-events:none !important; } #paceClockApp.mode-tv.tv-layout-circles #clockCard{ margin-top:16vh !important; } #paceClockApp.mode-tv .tvCircleTime{ display:flex; align-items:center; justify-content:center; gap:22px; width:100%; } #paceClockApp.mode-tv .tvCircleItem{ width:230px; height:230px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(5,5,5,.86); border:5px solid rgba(255,255,255,.18); box-shadow:inset 0 0 30px rgba(0,0,0,.9),0 18px 46px rgba(0,0,0,.35); } #paceClockApp.mode-tv .tvCircleItem strong{ font-family:"Courier New", ui-monospace, monospace; font-size:92px; line-height:.9; font-weight:900; } #paceClockApp.mode-tv .tvCircleItem span{ margin-top:14px; font-size:18px; font-weight:900; letter-spacing:.22em; opacity:.72; } #paceClockApp.mode-tv .tvCircleDivider{ font-size:92px; font-weight:900; line-height:1; opacity:.8; } #paceClockApp.mode-tv .tvCircleMs{ width:150px; height:150px; align-self:flex-end; margin-bottom:18px; } #paceClockApp.mode-tv .tvCircleMs strong{font-size:52px;} #paceClockApp.mode-tv .tvCircleMs span{font-size:13px;} #paceClockApp.mode-tv.tv-style-poolRed .tvCircleItem strong, #paceClockApp.mode-tv.tv-style-poolRed .tvCircleDivider{ color:#ff3b30; text-shadow:0 0 12px rgba(255,59,48,.9),0 0 34px rgba(255,59,48,.55); } #paceClockApp.mode-tv.tv-style-poolGreen .tvCircleItem strong, #paceClockApp.mode-tv.tv-style-poolGreen .tvCircleDivider{ color:#20ff38; text-shadow:0 0 12px rgba(32,255,56,.9),0 0 34px rgba(32,255,56,.55); } #paceClockApp.mode-tv.tv-style-poolAmber .tvCircleItem strong, #paceClockApp.mode-tv.tv-style-poolAmber .tvCircleDivider{ color:#ffc400; text-shadow:0 0 12px rgba(255,196,0,.9),0 0 34px rgba(255,196,0,.55); } #paceClockApp.mode-tv.tv-style-modern .tvCircleItem strong, #paceClockApp.mode-tv.tv-style-modern .tvCircleDivider{color:#fff;} /* circle sizes */ #paceClockApp.mode-tv.tv-clock-large .tvCircleItem{ width:260px; height:260px; } #paceClockApp.mode-tv.tv-clock-large .tvCircleItem strong{font-size:108px;} #paceClockApp.mode-tv.tv-clock-large .tvCircleMs{ width:170px; height:170px; } #paceClockApp.mode-tv.tv-clock-huge .tvCircleItem{ width:300px; height:300px; } #paceClockApp.mode-tv.tv-clock-huge .tvCircleItem strong{font-size:126px;} #paceClockApp.mode-tv.tv-clock-huge .tvCircleMs{ width:190px; height:190px; } /* phone safety */ @media (max-width:899px){ #paceClockApp.mode-tv:not(.tv-force-layout) .tvCircleTime{ display:none !important; } #paceClockApp.mode-tv:not(.tv-force-layout).tv-layout-circles #timeText{ position:static !important; opacity:1 !important; pointer-events:auto !important; } } /* PHONE: keep original mobile clock layout in TV mode */ @media (max-width:899px){ #paceClockApp.mode-tv:not(.tv-force-layout) #clockCard{ width:100% !important; max-width:1120px !important; margin:9vh auto 0 !important; padding:16px !important; background:linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.16)) !important; border:1px solid rgba(255,255,255,.14) !important; border-radius:18px !important; box-shadow:0 12px 26px rgba(0,0,0,.16) !important; overflow:hidden !important; } #paceClockApp.mode-tv:not(.tv-force-layout) #clockCard .time{ font-size:clamp(48px, 11vw, 68px) !important; padding:16px 22px !important; border-radius:18px !important; line-height:1 !important; letter-spacing:.03em !important; background:rgba(0,0,0,.18) !important; white-space:nowrap !important; overflow:hidden !important; } } /* ========================================================= 5. TV CONTROLS AUTO HIDE ========================================================= */ body.tv-view-enabled .tvViewBtn, #paceClockApp.mode-tv #fsBtn{ opacity:0; pointer-events:none; transition:opacity .22s ease; } body.tv-view-enabled.tv-controls-visible .tvViewBtn, body.tv-controls-visible #paceClockApp.mode-tv #fsBtn{ opacity:1; pointer-events:auto; } /* ========================================================= 6. TV CONTROL BUTTONS Start / Skip / TV View ========================================================= */ .tvControlsBar{ display:none; position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:99990; flex-direction:row; align-items:center; justify-content:center; gap:8px; } body.tv-view-enabled .tvControlsBar{display:flex;} body.tv-view-enabled:not(.tv-controls-visible) .tvControlsBar{ opacity:0; pointer-events:none; } body.tv-view-enabled.tv-controls-visible .tvControlsBar{ opacity:1; pointer-events:auto; } .tvControlsBar .btn{ position:static !important; display:inline-flex !important; align-items:center; justify-content:center; min-width:112px; height:44px; padding:0 14px !important; border-radius:12px; background:#0088dd !important; color:#fff !important; border:1px solid rgba(255,255,255,.18) !important; box-shadow:0 6px 14px rgba(0,0,0,.14); font-size:15px; font-weight:700; white-space:nowrap; } .tvControlsBar .btn:hover{ background:#0077cc !important; } #paceClockApp.mode-tv #fsBtn{ right:18px !important; bottom:18px !important; z-index:99999 !important; } @media (max-width:640px){ .tvControlsBar{ left:10px; right:10px; bottom:76px; transform:none; } .tvControlsBar .btn{ flex:1 1 0; min-width:0; height:42px; font-size:14px; padding:0 8px !important; } #paceClockApp.mode-tv #fsBtn{ right:10px !important; bottom:10px !important; } } /* ========================================================= 7. TV CONTROLS SINGLE-ROW FIX ========================================================= */ body.tv-view-enabled .tvControlsBar .tvViewBtn, body.tv-view-enabled .tvControlsBar .tvStartBtn, body.tv-view-enabled .tvControlsBar .tvSkipBtn{ position:static !important; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important; display:inline-flex !important; } /* ========================================================= 8. TV SCROLL LOCK ========================================================= */ html.tv-scroll-locked, body.tv-scroll-locked { width: 100%; height: 100%; overflow: hidden !important; overscroll-behavior: none !important; -webkit-overflow-scrolling: auto; } body.tv-view-enabled{ position:fixed; inset:0; width:100%; height:100dvh; overflow:hidden !important; overscroll-behavior:none !important; touch-action:none; } body.tv-view-enabled #paceClockApp { position: fixed; inset: 0; width: 100%; height: 100dvh; overflow: hidden; overscroll-behavior: none; touch-action: none; } body.tv-view-enabled #screenClock { width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; } body.tv-view-enabled .tvControlsBar, body.tv-view-enabled .tvViewPanel, body.tv-view-enabled .tvViewPanel * { touch-action: manipulation; } body.tv-view-enabled .tvViewPanel { overflow: hidden; } body.tv-view-enabled .tvViewPanelInner { max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; } /* ========================================================= 9. IPAD TV FULLSCREEN SAFE AREA FIX ========================================================= */ html.pc-tv-page, body.pc-tv-page, html.tv-scroll-locked, body.tv-scroll-locked, body.tv-view-enabled{ width:100% !important; height:100% !important; min-height:100% !important; margin:0 !important; padding:0 !important; overflow:hidden !important; overscroll-behavior:none !important; background:linear-gradient( 180deg, #00aaff, #0088dd ) !important; } body.tv-view-enabled{ position:fixed !important; inset:0 !important; } body.tv-view-enabled #paceClockApp{ position:fixed !important; inset:0 !important; width:100vw !important; height:100vh !important; height:100dvh !important; min-height:100vh !important; min-height:100dvh !important; margin:0 !important; padding:0 !important; overflow:hidden !important; overscroll-behavior:none !important; background:linear-gradient( 180deg, #00aaff, #0088dd ) !important; } body.tv-view-enabled #paceClockApp .wrap, body.tv-view-enabled #paceClockApp .appShell, body.tv-view-enabled #screenClock{ width:100% !important; height:100% !important; min-height:100% !important; margin:0 !important; padding:0 !important; border-radius:0 !important; background:transparent !important; } /* TV: force same card color */ #paceClockApp.mode-tv #phaseStatus, #paceClockApp.mode-tv #phaseStatus.phase-ready, #paceClockApp.mode-tv #phaseStatus.phase-prep, #paceClockApp.mode-tv #phaseStatus.phase-work, #paceClockApp.mode-tv #phaseStatus.phase-rest, #paceClockApp.mode-tv #phaseStatus.phase-stopwatch{ background:rgba(255,255,255,.10) !important; color:#fff !important; border:1px solid rgba(255,255,255,.16) !important; } /* ========================================================= 10. TV DASHBOARD — CLEAN FINAL VERSION Replace the old sections 10, 11 and 12 with this block. Compatible with: /paceclock/pc-tv-dashboard.js?v=2 ========================================================= */ /* --------------------------------------------------------- Base visibility --------------------------------------------------------- */ #paceClockApp .pcTvDashboard{display:none;} #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashboard{display:grid;} #paceClockApp.mode-tv.tv-layout-dashboard #clockCard{ position:absolute !important; left:-100000px !important; top:-100000px !important; width:1px !important; height:1px !important; margin:0 !important; padding:0 !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important; overflow:hidden !important; } #paceClockApp.mode-tv.tv-layout-dashboard .currentWorkoutBar, #paceClockApp.mode-tv.tv-layout-dashboard #setsTable, #paceClockApp.mode-tv.tv-layout-dashboard #lapsPanel, #paceClockApp.mode-tv.tv-layout-dashboard #hint, #paceClockApp.mode-tv.tv-layout-dashboard .clockBottomBar{ display:none !important; } /* --------------------------------------------------------- Dashboard canvas --------------------------------------------------------- */ #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashboard{ box-sizing:border-box !important; contain:none !important; transform:none !important; --pc-tv-accent:#11b7f3; --pc-tv-accent-soft:#72ddff; --pc-tv-accent-faint:rgba(17,183,243,.13); --pc-tv-bg-1:#031523; --pc-tv-bg-2:#072944; --pc-tv-bg-3:#04101b; --pc-tv-panel:rgba(6,34,55,.84); --pc-tv-panel-strong:rgba(6,42,67,.94); --pc-tv-border:rgba(114,221,255,.22); --pc-tv-border-strong:rgba(114,221,255,.38); --pc-tv-text:#f8fcff; --pc-tv-muted:#8ba8bb; --pc-tv-muted-2:#b2c8d5; position:fixed; inset:0; z-index:50; grid-template-rows:auto minmax(0,1fr) auto; width:100vw; height:100vh; height:100dvh; padding: max(18px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right)) max(76px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left)); overflow:hidden; isolation:isolate; color:var(--pc-tv-text); background: radial-gradient( circle at 48% 34%, rgba(0,160,255,.22), transparent 34% ), radial-gradient( circle at 8% 92%, rgba(0,105,196,.18), transparent 38% ), linear-gradient( 145deg, var(--pc-tv-bg-1) 0%, var(--pc-tv-bg-2) 50%, var(--pc-tv-bg-3) 100% ); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashBackground{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashGlow{ position:absolute; border-radius:50%; filter:blur(58px); pointer-events:none; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashGlowOne{ width:36vw; height:36vw; left:10vw; top:17vh; opacity:.28; background:rgba(0,157,255,.22); } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashGlowTwo{ width:28vw; height:28vw; right:5vw; bottom:6vh; opacity:.20; background:rgba(70,216,255,.16); } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashGrid{ position:absolute; inset:0; opacity:.14; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px); background-size:44px 44px; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashboard > *:not(.pcTvDashBackground){ position:relative; z-index:1; } /* --------------------------------------------------------- Header --------------------------------------------------------- */ #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashHeader{ display:grid; grid-template-columns:minmax(240px,auto) minmax(260px,1fr) minmax(120px,auto); align-items:center; gap:24px; min-height:58px; padding:0 2px 10px; border-bottom:1px solid rgba(114,221,255,.15); } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashBrand{ display:flex; align-items:center; gap:13px; min-width:0; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashLogo{ position:relative; width:46px; height:46px; flex:0 0 46px; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashLogoRing{ position:absolute; inset:3px; border:4px solid var(--pc-tv-accent); border-top-color:transparent; border-left-color:transparent; border-radius:50%; transform:rotate(-28deg); box-shadow: 0 0 16px rgba(17,183,243,.32), inset 0 0 12px rgba(17,183,243,.12); } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashLogoWave{ position:absolute; left:4px; right:0; bottom:6px; height:8px; border-radius:999px; transform:rotate(-8deg); background: linear-gradient( 90deg, transparent 0 5%, var(--pc-tv-accent) 18% 39%, transparent 48% 57%, var(--pc-tv-accent-soft) 67% 89%, transparent 97% ); filter:drop-shadow(0 0 6px rgba(17,183,243,.42)); } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashBrandCopy{ display:flex; flex-direction:column; gap:3px; min-width:0; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashBrandCopy strong{ color:#fff; font-size:clamp(17px,1.3vw,25px); font-weight:950; line-height:1; letter-spacing:.18em; white-space:nowrap; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashBrandCopy span{ color:var(--pc-tv-accent-soft); font-size:clamp(9px,.66vw,12px); font-weight:900; line-height:1; letter-spacing:.20em; white-space:nowrap; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashHeaderCenter{ min-width:0; text-align:center; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashHeaderLabel, #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashRealClock span{ display:block; margin-bottom:4px; color:var(--pc-tv-muted); font-size:clamp(9px,.62vw,11px); font-weight:900; letter-spacing:.17em; text-transform:uppercase; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashWorkoutTitle{ display:block; overflow:hidden; color:#fff; font-size:clamp(17px,1.45vw,27px); font-weight:900; line-height:1.05; text-overflow:ellipsis; white-space:nowrap; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashRealClock{ min-width:118px; text-align:right; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashRealClock strong{ color:#fff; font-family:"Courier New",ui-monospace,monospace; font-size:clamp(26px,2vw,38px); font-weight:950; line-height:.9; letter-spacing:-.055em; } /* --------------------------------------------------------- Main content --------------------------------------------------------- */ #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashBody{ display:grid; grid-template-columns:minmax(0,1fr) clamp(210px,16vw,290px); align-items:stretch; gap:20px; min-height:0; padding:12px 0; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashCurrent{ display:grid; grid-template-rows:auto minmax(0,1fr); min-width:0; min-height:0; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashSectionHeading{ min-width:0; padding:0 3px 4px; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashEyebrow{ display:block; margin-bottom:4px; color:var(--pc-tv-muted); font-size:clamp(10px,.72vw,13px); font-weight:900; letter-spacing:.18em; text-transform:uppercase; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashCurrentLine{ display:flex; align-items:baseline; gap:16px; min-width:0; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashCurrentTitle{ display:block; max-width:64%; overflow:hidden; color:#fff; font-size:clamp(30px,2.65vw,52px); font-weight:950; line-height:1; letter-spacing:-.035em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashCurrentMeta{ display:block; min-width:0; overflow:hidden; color:var(--pc-tv-accent-soft); font-size:clamp(14px,1vw,20px); font-weight:800; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashTimerArea{ display:flex; align-items:center; justify-content:center; min-width:0; min-height:0; padding:0; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashTimerRing{ --pc-dashboard-progress:0deg; position:relative; display:grid; place-items:center; width:min(57vh,600px); height:min(57vh,600px); max-width:46vw; max-height:46vw; min-width:330px; min-height:330px; border-radius:50%; background: conic-gradient( from -90deg, var(--pc-tv-accent-soft) 0deg, var(--pc-tv-accent) var(--pc-dashboard-progress), rgba(77,129,157,.25) var(--pc-dashboard-progress), rgba(77,129,157,.25) 360deg ); box-shadow: 0 0 0 1px rgba(114,221,255,.11), 0 24px 68px rgba(0,0,0,.38), 0 0 54px rgba(17,183,243,.11); } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashTimerTrack{ position:absolute; inset:14px; border-radius:50%; background: radial-gradient( circle at 50% 37%, rgba(15,73,111,.98), rgba(3,18,31,.995) 73% ); box-shadow: inset 0 0 56px rgba(0,0,0,.62), 0 0 0 1px rgba(114,221,255,.14); } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashTimerInner{ position:relative; z-index:1; display:flex; width:80%; height:80%; flex-direction:column; align-items:center; justify-content:center; text-align:center; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashPhase{ margin-bottom:9px; color:var(--pc-tv-accent-soft); font-size:clamp(15px,1.05vw,21px); font-weight:950; letter-spacing:.20em; line-height:1; text-transform:uppercase; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashTime{ color:#fff; font-family:"Arial Narrow","Roboto Condensed",Arial,sans-serif; font-size:clamp(112px,9.4vw,184px); font-weight:950; line-height:.82; letter-spacing:-.088em; white-space:nowrap; text-shadow:0 10px 34px rgba(0,0,0,.35); } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashInterval{ margin-top:16px; color:var(--pc-tv-muted-2); font-size:clamp(15px,1vw,20px); font-weight:850; line-height:1; letter-spacing:.13em; text-transform:uppercase; } /* --------------------------------------------------------- Right statistics --------------------------------------------------------- */ #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashStats{ display:grid; grid-template-rows:.9fr 1.28fr .9fr; gap:10px; min-width:0; min-height:0; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashStat{ display:flex; min-height:0; flex-direction:column; align-items:center; justify-content:center; padding:12px 10px; border:1px solid var(--pc-tv-border); border-radius:18px; background: linear-gradient( 145deg, rgba(8,53,83,.91), rgba(3,26,45,.9) ); box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 16px 38px rgba(0,0,0,.15); text-align:center; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashStatMain{ border-color:var(--pc-tv-border-strong); background: radial-gradient( circle at 50% 25%, rgba(17,183,243,.17), transparent 62% ), linear-gradient( 145deg, rgba(6,65,98,.96), rgba(3,29,49,.94) ); } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashStatLabel{ margin-bottom:6px; color:var(--pc-tv-muted); font-size:clamp(10px,.72vw,13px); font-weight:900; letter-spacing:.17em; text-transform:uppercase; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashStatValue{ color:#fff; font-family:"Arial Narrow","Roboto Condensed",Arial,sans-serif; font-size:clamp(58px,4.5vw,90px); font-weight:950; line-height:.86; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashRepValue{ display:flex; align-items:baseline; justify-content:center; gap:6px; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashRepValue strong{ color:#fff; font-family:"Arial Narrow","Roboto Condensed",Arial,sans-serif; font-size:clamp(76px,5.8vw,116px); font-weight:950; line-height:.82; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashRepValue span{ color:#557991; font-size:clamp(38px,3vw,60px); font-weight:800; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashRepValue b{ color:#a5becd; font-size:clamp(43px,3.4vw,67px); font-weight:900; line-height:1; } /* --------------------------------------------------------- Footer cards --------------------------------------------------------- */ #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashFooter{ display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:11px; min-height:96px; max-height:96px; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashInfoCard{ min-width:0; min-height:96px; max-height:96px; padding:12px 15px; overflow:hidden; border:1px solid var(--pc-tv-border); border-radius:16px; background: linear-gradient( 145deg, rgba(7,45,71,.91), rgba(3,25,43,.91) ); box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 14px 30px rgba(0,0,0,.13); } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashNextCard{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:13px; border-color:rgba(114,221,255,.34); } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashInfoIcon{ display:grid; width:44px; height:44px; place-items:center; border:1px solid rgba(114,221,255,.30); border-radius:12px; color:var(--pc-tv-accent-soft); background:rgba(17,183,243,.08); font-size:27px; font-weight:900; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashInfoContent, #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashProgressCard, #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashDistanceCard{min-width:0;} #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashInfoLabel{ display:block; margin-bottom:5px; color:var(--pc-tv-muted); font-size:clamp(9px,.66vw,12px); font-weight:900; letter-spacing:.16em; text-transform:uppercase; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashNextTitle{ display:block; overflow:hidden; color:var(--pc-tv-accent-soft); font-size:clamp(20px,1.65vw,31px); font-weight:950; line-height:1; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashNextMeta{ display:block; margin-top:5px; overflow:hidden; color:#9fb8c7; font-size:clamp(11px,.8vw,15px); font-weight:750; text-overflow:ellipsis; white-space:nowrap; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashInfoTop{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashProgressValue{ color:#fff; font-family:"Arial Narrow","Roboto Condensed",Arial,sans-serif; font-size:clamp(34px,2.6vw,48px); font-weight:950; line-height:.84; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashProgressTrack{ height:8px; margin-top:12px; overflow:hidden; border-radius:999px; background:rgba(100,150,179,.22); } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashProgressTrack span{ display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#009fd8,#72ddff); box-shadow:0 0 12px rgba(17,183,243,.42); transition:width .2s linear; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashProgressMeta{ display:block; margin-top:6px; color:#93acbc; font-size:clamp(10px,.74vw,13px); font-weight:800; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashDistanceValue{ display:flex; align-items:baseline; gap:6px; white-space:nowrap; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashDistanceValue strong{ color:#fff; font-family:"Arial Narrow","Roboto Condensed",Arial,sans-serif; font-size:clamp(42px,3.1vw,59px); font-weight:950; line-height:.86; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashDistanceValue b{ color:#b5cad7; font-size:clamp(24px,1.8vw,34px); font-weight:900; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashDistanceValue span, #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashDistanceValue em{ color:#809aaa; font-size:clamp(10px,.72vw,13px); font-style:normal; font-weight:850; text-transform:uppercase; } /* --------------------------------------------------------- Dashboard display options --------------------------------------------------------- */ #paceClockApp.mode-tv.tv-layout-dashboard.tv-hide-title .pcTvDashHeaderCenter{display:none;} #paceClockApp.mode-tv.tv-layout-dashboard.tv-hide-phase .pcTvDashPhase{visibility:hidden;} #paceClockApp.mode-tv.tv-layout-dashboard.tv-hide-block .pcTvDashStatBlock, #paceClockApp.mode-tv.tv-layout-dashboard.tv-hide-rep .pcTvDashStatMain, #paceClockApp.mode-tv.tv-layout-dashboard.tv-hide-round .pcTvDashStatRound{display:none;} #paceClockApp.mode-tv.tv-layout-dashboard.tv-hide-block .pcTvDashStats, #paceClockApp.mode-tv.tv-layout-dashboard.tv-hide-rep .pcTvDashStats, #paceClockApp.mode-tv.tv-layout-dashboard.tv-hide-round .pcTvDashStats{grid-template-rows:repeat(auto-fit,minmax(0,1fr));} /* --------------------------------------------------------- Controls --------------------------------------------------------- */ body.tv-view-enabled:has(#paceClockApp.tv-layout-dashboard) .tvControlsBar{ bottom:max(14px, env(safe-area-inset-bottom)); } body.tv-view-enabled:has(#paceClockApp.tv-layout-dashboard) .tvControlsBar .btn{ min-width:112px; border-color:rgba(114,221,255,.24) !important; color:#f4fbff !important; background:rgba(2,28,47,.9) !important; box-shadow:0 10px 26px rgba(0,0,0,.25); backdrop-filter:blur(10px); } body.tv-view-enabled:has(#paceClockApp.tv-layout-dashboard) .tvControlsBar .btn:hover{ background:rgba(8,64,94,.96) !important; } /* ========================================================= 11. DASHBOARD RESPONSIVE ========================================================= */ @media (min-width:1900px){ #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashboard{ padding-left:42px; padding-right:42px; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashBody{ grid-template-columns:minmax(0,1fr) 310px; gap:28px; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashTimerRing{ width:min(59vh,670px); height:min(59vh,670px); } } @media (max-width:1450px){ #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashboard{ padding-left:22px; padding-right:22px; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashBody{ grid-template-columns:minmax(0,1fr) 220px; gap:16px; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashTimerRing{ width:min(54vh,520px); height:min(54vh,520px); min-width:310px; min-height:310px; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashTime{font-size:clamp(100px,9.1vw,160px);} } @media (max-width:1100px){ #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashboard{ padding-left:16px; padding-right:16px; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashHeader{ grid-template-columns:auto minmax(180px,1fr) auto; gap:12px; min-height:52px; padding-bottom:8px; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashBody{ grid-template-columns:minmax(0,1fr) 175px; gap:10px; padding:8px 0; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashTimerRing{ width:min(48vh,410px); height:min(48vh,410px); min-width:275px; min-height:275px; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashTime{font-size:clamp(80px,9.4vw,122px);} #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashFooter{ grid-template-columns:1.3fr 1fr 1fr; gap:8px; min-height:84px; max-height:84px; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashInfoCard{ min-height:84px; max-height:84px; padding:10px 11px; border-radius:13px; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashInfoIcon{ width:38px; height:38px; font-size:23px; } } /* Use original TV layout on phones unless forced */ @media (max-width:899px){ #paceClockApp.mode-tv.tv-layout-dashboard:not(.tv-force-layout) .pcTvDashboard{ display:none !important; } #paceClockApp.mode-tv.tv-layout-dashboard:not(.tv-force-layout) #clockCard{ position:static !important; left:auto !important; top:auto !important; width:100% !important; height:auto !important; margin:12px auto 0 !important; padding:14px !important; opacity:1 !important; visibility:visible !important; pointer-events:auto !important; overflow:hidden !important; } } /* Forced TV dashboard in landscape */ @media (max-width:899px) and (orientation:landscape){ #paceClockApp.mode-tv.tv-layout-dashboard.tv-force-layout .pcTvDashboard{ padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(54px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashHeader{ grid-template-columns:auto auto; min-height:40px; padding-bottom:6px; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashHeaderCenter{display:none;} #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashBody{ grid-template-columns:minmax(0,1fr) 126px; gap:7px; padding:6px 0; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashCurrentTitle{font-size:clamp(19px,3.8vw,31px);} #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashCurrentMeta{font-size:clamp(9px,1.45vw,13px);} #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashTimerRing{ width:min(56vh,270px); height:min(56vh,270px); min-width:185px; min-height:185px; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashTimerTrack{inset:8px;} #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashTime{font-size:clamp(54px,9.8vw,84px);} #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashFooter{ grid-template-columns:1.22fr 1fr 1fr; gap:5px; min-height:60px; max-height:60px; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashInfoCard{ min-height:60px; max-height:60px; padding:6px 7px; border-radius:10px; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashInfoIcon{ width:30px; height:30px; font-size:19px; } } /* Forced dashboard in narrow portrait */ @media (max-width:640px) and (orientation:portrait){ #paceClockApp.mode-tv.tv-layout-dashboard.tv-force-layout .pcTvDashboard{ display:block; overflow-y:auto; padding: max(12px, env(safe-area-inset-top)) 12px max(72px, env(safe-area-inset-bottom)); } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashHeader{ grid-template-columns:minmax(0,1fr) auto; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashHeaderCenter{display:none;} #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashBody{ display:block; padding:12px 0; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashCurrentLine{display:block;} #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashCurrentTitle{ max-width:100%; white-space:normal; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashCurrentMeta{ margin-top:7px; white-space:normal; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashTimerArea{ padding:18px 0; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashTimerRing{ width:min(88vw,410px); height:min(88vw,410px); max-width:none; max-height:none; min-width:0; min-height:0; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashStats{ grid-template-columns:1fr 1.25fr 1fr; grid-template-rows:none; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashFooter{ grid-template-columns:1fr; max-height:none; margin-top:12px; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashInfoCard{max-height:none;} } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashboard, #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashboard *, #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashboard *::before, #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashboard *::after{ box-sizing:border-box !important; } /* ========================================================= 12. DASHBOARD ROOT CONTAINING-BLOCK FIX Must remain at the absolute end of pc-tv ========================================================= */ html.pc-tv-page, html.tv-scroll-locked, body.pc-tv-page, body.tv-view-enabled, body.tv-scroll-locked{ width:100vw !important; height:100vh !important; height:100dvh !important; min-width:100vw !important; min-height:100vh !important; min-height:100dvh !important; margin:0 !important; padding:0 !important; transform:none !important; scale:none !important; zoom:1 !important; filter:none !important; perspective:none !important; contain:none !important; overflow:hidden !important; } body.tv-view-enabled #paceClockApp, #paceClockApp.mode-tv.tv-layout-dashboard{ position:fixed !important; inset:0 !important; width:100vw !important; height:100vh !important; height:100dvh !important; min-width:100vw !important; min-height:100vh !important; min-height:100dvh !important; max-width:none !important; max-height:none !important; margin:0 !important; padding:0 !important; transform:none !important; scale:none !important; zoom:1 !important; filter:none !important; perspective:none !important; contain:none !important; overflow:hidden !important; } #paceClockApp.mode-tv.tv-layout-dashboard > .pcTvDashboard{ position:fixed !important; inset:0 !important; display:grid !important; width:100vw !important; height:100vh !important; height:100dvh !important; min-width:100vw !important; min-height:100vh !important; min-height:100dvh !important; max-width:none !important; max-height:none !important; margin:0 !important; transform:none !important; scale:none !important; zoom:1 !important; filter:none !important; perspective:none !important; contain:none !important; box-sizing:border-box !important; } /* Dashboard must not inherit old screen sizing */ #paceClockApp.mode-tv.tv-layout-dashboard .wrap, #paceClockApp.mode-tv.tv-layout-dashboard .appShell, #paceClockApp.mode-tv.tv-layout-dashboard #screenClock{ transform:none !important; scale:none !important; zoom:1 !important; filter:none !important; perspective:none !important; contain:none !important; } /* Confirm visually that this exact final rule is loaded */ #paceClockApp.mode-tv.tv-layout-dashboard > .pcTvDashboard{ --pc-tv-accent:#00aaff !important; --pc-tv-accent-soft:#76ddff !important; background: radial-gradient( circle at 48% 34%, rgba(0,170,255,.30), transparent 35% ), radial-gradient( circle at 8% 92%, rgba(0,105,196,.24), transparent 40% ), linear-gradient( 145deg, #02111f 0%, #06375c 50%, #020b13 100% ) !important; } /* ========================================================= 13. DASHBOARD ANALYSIS SWIM COLOR + FULL WIDTH FIX Must remain at the absolute end of pc-tv ========================================================= */ /* Dashboard всегда занимает весь экран. TV View открывается поверх и не резервирует место справа. */ #paceClockApp.mode-tv.tv-layout-dashboard > .pcTvDashboard{ --pc-tv-accent:#0088dd !important; --pc-tv-accent-soft:#62d4ff !important; --pc-tv-accent-bright:#2fc7ff !important; --pc-tv-bg-1:#063f78 !important; --pc-tv-bg-2:#0879bd !important; --pc-tv-bg-3:#034f8c !important; --pc-tv-panel:rgba(4,76,126,.82) !important; --pc-tv-panel-strong:rgba(3,91,149,.90) !important; --pc-tv-border:rgba(142,222,255,.34) !important; --pc-tv-border-strong:rgba(142,222,255,.52) !important; --pc-tv-text:#ffffff !important; --pc-tv-muted:#a8d8ef !important; --pc-tv-muted-2:#d1edfa !important; left:0 !important; right:0 !important; top:0 !important; bottom:0 !important; width:100vw !important; max-width:none !important; padding-left:max(28px, env(safe-area-inset-left)) !important; padding-right:max(28px, env(safe-area-inset-right)) !important; background: radial-gradient( circle at 48% 33%, rgba(47,199,255,.34), transparent 39% ), radial-gradient( circle at 8% 92%, rgba(31,149,232,.30), transparent 42% ), radial-gradient( circle at 92% 82%, rgba(0,136,221,.22), transparent 38% ), linear-gradient( 145deg, #064b87 0%, #0788cf 48%, #035f9e 100% ) !important; } /* Не уменьшаем контент из-за TV View panel */ body.tv-view-enabled:has(.tvViewPanel.open) #paceClockApp.mode-tv.tv-layout-dashboard > .pcTvDashboard, body.tv-view-enabled:has(.tvViewPanel.open) #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashBody, body.tv-view-enabled:has(.tvViewPanel.open) #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashFooter{ width:auto !important; max-width:none !important; margin-right:0 !important; padding-right:0 !important; } /* Header */ #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashHeader{ border-bottom-color:rgba(190,235,255,.28) !important; } /* Timer */ #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashTimerRing{ background: conic-gradient( from -90deg, #83e1ff 0deg, #18bdf5 var(--pc-dashboard-progress), rgba(79,166,211,.30) var(--pc-dashboard-progress), rgba(79,166,211,.30) 360deg ) !important; box-shadow: 0 0 0 1px rgba(164,229,255,.24), 0 24px 68px rgba(0,47,88,.34), 0 0 75px rgba(35,190,255,.30) !important; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashTimerTrack{ background: radial-gradient( circle at 50% 35%, rgba(14,111,174,.98), rgba(2,39,72,.99) 75% ) !important; box-shadow: inset 0 0 60px rgba(0,21,47,.68), 0 0 0 1px rgba(148,226,255,.25) !important; } /* Current meta and accents */ #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashCurrentMeta, #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashPhase, #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashNextTitle, #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashBrandCopy span{ color:#83e1ff !important; } /* Right-side cards */ #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashStat{ border-color:rgba(152,224,255,.35) !important; background: linear-gradient( 145deg, rgba(9,106,164,.76), rgba(3,62,110,.86) ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 38px rgba(0,41,76,.20) !important; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashStatMain{ border-color:rgba(166,232,255,.55) !important; background: radial-gradient( circle at 50% 24%, rgba(75,206,255,.27), transparent 62% ), linear-gradient( 145deg, rgba(10,129,190,.90), rgba(3,70,122,.92) ) !important; } /* Footer cards */ #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashInfoCard{ border-color:rgba(152,224,255,.35) !important; background: linear-gradient( 145deg, rgba(7,104,165,.80), rgba(3,66,115,.88) ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 14px 30px rgba(0,44,82,.18) !important; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashNextCard{ border-color:rgba(153,229,255,.52) !important; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashInfoIcon{ color:#8de5ff !important; background:rgba(47,199,255,.16) !important; border-color:rgba(158,230,255,.44) !important; } /* Progress */ #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashProgressTrack{ background:rgba(5,67,110,.50) !important; } #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashProgressTrack span{ background: linear-gradient( 90deg, #0088dd, #2fc7ff, #9aeaff ) !important; box-shadow: 0 0 16px rgba(47,199,255,.58) !important; } /* Labels slightly brighter */ #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashEyebrow, #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashHeaderLabel, #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashRealClock span, #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashStatLabel, #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashInfoLabel{ color:#b2ddf2 !important; } /* TV View panel remains an overlay */ body.tv-view-enabled .tvViewPanel{ position:fixed !important; top:64px !important; right:14px !important; z-index:999999 !important; width:min(320px, calc(100vw - 28px)) !important; background:rgba(3,28,57,.96) !important; border-color:rgba(134,215,255,.42) !important; backdrop-filter:blur(15px); -webkit-backdrop-filter:blur(15px); } /* ========================================================= 14. DASHBOARD SEMANTIC HEADER SAFETY FIX ========================================================= */ body.pc-tv-page #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashHeader{ display:grid !important; } body.pc-tv-page #paceClockApp.mode-tv.tv-layout-dashboard .pcTvDashFooter{ display:grid !important; } /* ========================================================= 15. COACH — FINAL LAYOUT Pace Clock Current Set / Next Up Block / Rep / Round / Progress + Distance ========================================================= */ #paceClockApp .pcTvCoachInfo{ display:none !important; } #paceClockApp .status > .pcTvCoachMetrics{ display:none !important; } #paceClockApp.mode-tv.tv-layout-coach{ --pc-coach-card-bg:rgba(255,255,255,.10); --pc-coach-card-border:rgba(255,255,255,.18); --pc-coach-card-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px rgba(0,45,85,.16); --pc-coach-label:#c9ecfa; --pc-coach-meta:#a9ddf2; --pc-coach-text:#ffffff; } /* ========================================================= Main screen ========================================================= */ #paceClockApp.mode-tv.tv-layout-coach #screenClock{ display:flex !important; width:100% !important; height:100vh !important; height:100dvh !important; align-items:center !important; justify-content:center !important; } #paceClockApp.mode-tv.tv-layout-coach #screenClock > .layout, #paceClockApp.mode-tv.tv-layout-coach #screenClock .main{ width:100% !important; min-width:0 !important; } #paceClockApp.mode-tv.tv-layout-coach #clockCard{ display:block !important; width:calc(100vw - 48px) !important; max-width:none !important; margin:0 auto !important; padding:0 !important; transform:none !important; overflow:visible !important; } /* ========================================================= Pace Clock — primary visual element ========================================================= */ #paceClockApp.mode-tv.tv-layout-coach #clockCard .time{ box-sizing:border-box !important; display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; min-height:46vh !important; max-height:50vh !important; padding:24px 28px !important; color:#fff !important; font-size:clamp(180px, 20vw, 420px) !important; font-weight:900 !important; line-height:.82 !important; letter-spacing:-.07em !important; white-space:nowrap !important; overflow:hidden !important; border-radius:32px !important; background:rgba(18,70,110,.55) !important; } /* ========================================================= Coach information ========================================================= */ #paceClockApp.mode-tv.tv-layout-coach #pcTvCoachInfo{ display:block !important; width:100% !important; margin-top:14px !important; } #paceClockApp.mode-tv.tv-layout-coach #pcTvCoachInfo[hidden]{ display:none !important; } /* Header only contains Local Time. Local Time itself is fixed separately below. */ #paceClockApp.mode-tv.tv-layout-coach .pcTvCoachHeader{ display:block !important; width:0 !important; height:0 !important; margin:0 !important; padding:0 !important; } /* ========================================================= Current Set / Next Up ========================================================= */ #paceClockApp.mode-tv.tv-layout-coach .pcTvCoachSets{ display:grid !important; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important; gap:14px !important; width:100% !important; } #paceClockApp.mode-tv.tv-layout-coach .pcTvCoachCurrent, #paceClockApp.mode-tv.tv-layout-coach .pcTvCoachNext{ box-sizing:border-box !important; display:flex !important; min-width:0 !important; min-height:108px !important; flex-direction:column !important; justify-content:center !important; align-items:flex-start !important; padding:15px 20px !important; border:1px solid var(--pc-coach-card-border) !important; border-radius:18px !important; background:var(--pc-coach-card-bg) !important; box-shadow:var(--pc-coach-card-shadow) !important; color:var(--pc-coach-text) !important; text-align:left !important; } #paceClockApp.mode-tv.tv-layout-coach .pcTvCoachCurrent strong, #paceClockApp.mode-tv.tv-layout-coach .pcTvCoachNext strong{ display:block !important; width:100% !important; min-width:0 !important; margin:0 !important; overflow:hidden !important; color:#fff !important; font-weight:850 !important; line-height:1.05 !important; letter-spacing:-.025em !important; text-overflow:ellipsis !important; white-space:nowrap !important; } #paceClockApp.mode-tv.tv-layout-coach .pcTvCoachCurrent strong{ font-size:clamp(28px, 2.2vw, 46px) !important; } #paceClockApp.mode-tv.tv-layout-coach .pcTvCoachNext strong{ font-size:clamp(24px, 1.8vw, 38px) !important; } #paceClockApp.mode-tv.tv-layout-coach #pcTvCoachCurrentMeta, #paceClockApp.mode-tv.tv-layout-coach #pcTvCoachNextMeta{ display:block !important; width:100% !important; min-width:0 !important; margin-top:7px !important; overflow:hidden !important; color:var(--pc-coach-meta) !important; font-size:clamp(13px, .95vw, 17px) !important; font-weight:650 !important; line-height:1.15 !important; text-overflow:ellipsis !important; white-space:nowrap !important; } /* ========================================================= Lower information row Block / Rep / Round / Progress + Distance ========================================================= */ #paceClockApp.mode-tv.tv-layout-coach #clockCard .status{ display:flex !important; align-items:stretch !important; gap:14px !important; width:100% !important; min-width:0 !important; margin-top:14px !important; } #paceClockApp.mode-tv.tv-layout-coach #setStatus, #paceClockApp.mode-tv.tv-layout-coach #repStatus, #paceClockApp.mode-tv.tv-layout-coach #roundSlot{ flex:1 1 0 !important; width:auto !important; min-width:0 !important; height:auto !important; margin:0 !important; } #paceClockApp.mode-tv.tv-layout-coach .pcTvCoachMetrics{ flex:1.55 1 0 !important; width:auto !important; min-width:0 !important; height:auto !important; margin:0 !important; } #paceClockApp.mode-tv.tv-layout-coach #roundSlot{ display:block !important; padding:0 !important; } #paceClockApp.mode-tv.tv-layout-coach #roundStatus{ width:100% !important; height:100% !important; margin:0 !important; } /* ========================================================= Block / Rep / Round cards ========================================================= */ #paceClockApp.mode-tv.tv-layout-coach #setStatus, #paceClockApp.mode-tv.tv-layout-coach #repStatus, #paceClockApp.mode-tv.tv-layout-coach #roundStatus{ box-sizing:border-box !important; display:flex !important; min-width:0 !important; min-height:112px !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; padding:12px 14px !important; border:1px solid var(--pc-coach-card-border) !important; border-radius:18px !important; background:var(--pc-coach-card-bg) !important; box-shadow:var(--pc-coach-card-shadow) !important; text-align:center !important; } /* Phase is duplicated by Current Set in Coach */ #paceClockApp.mode-tv.tv-layout-coach #phaseStatus{ display:none !important; } /* ========================================================= Progress + Distance combined card ========================================================= */ #paceClockApp.mode-tv.tv-layout-coach .pcTvCoachMetrics{ box-sizing:border-box !important; display:grid !important; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) !important; align-items:center !important; min-height:112px !important; border:1px solid var(--pc-coach-card-border) !important; border-radius:18px !important; background:var(--pc-coach-card-bg) !important; box-shadow:var(--pc-coach-card-shadow) !important; overflow:hidden !important; } #paceClockApp.mode-tv.tv-layout-coach .pcTvCoachMetric{ box-sizing:border-box !important; display:flex !important; min-width:0 !important; height:100% !important; flex-direction:column !important; justify-content:center !important; padding:12px 16px !important; } #paceClockApp.mode-tv.tv-layout-coach .pcTvCoachDistance{ border-left: 1px solid rgba(255,255,255,.14) !important; } /* No large progress bar in Coach layout */ #paceClockApp.mode-tv.tv-layout-coach .pcTvCoachProgressTrack{ display:none !important; } /* ========================================================= Labels ========================================================= */ #paceClockApp.mode-tv.tv-layout-coach .pcTvCoachLabel, #paceClockApp.mode-tv.tv-layout-coach #setStatus > span, #paceClockApp.mode-tv.tv-layout-coach #repStatus > span, #paceClockApp.mode-tv.tv-layout-coach #roundStatus > span{ display:block !important; min-width:0 !important; margin:0 0 7px !important; color:var(--pc-coach-label) !important; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important; font-size:clamp(11px, .78vw, 14px) !important; font-weight:800 !important; line-height:1 !important; letter-spacing:.16em !important; text-transform:uppercase !important; opacity:.84 !important; text-align:inherit !important; } /* ========================================================= Block / Rep / Round values ========================================================= */ #paceClockApp.mode-tv.tv-layout-coach #setStatus > strong, #paceClockApp.mode-tv.tv-layout-coach #repStatus > strong, #paceClockApp.mode-tv.tv-layout-coach #roundStatus > strong{ display:block !important; margin:0 !important; color:#fff !important; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important; font-size:clamp(48px, 3.8vw, 72px) !important; font-weight:850 !important; line-height:.9 !important; letter-spacing:-.045em !important; } #paceClockApp.mode-tv.tv-layout-coach #setStatus > em, #paceClockApp.mode-tv.tv-layout-coach #repStatus > em, #paceClockApp.mode-tv.tv-layout-coach #roundStatus > em{ display:block !important; min-width:0 !important; margin-top:7px !important; overflow:hidden !important; color:var(--pc-coach-meta) !important; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important; font-size:clamp(12px, .85vw, 15px) !important; font-style:normal !important; font-weight:650 !important; line-height:1.1 !important; text-overflow:ellipsis !important; white-space:nowrap !important; } /* ========================================================= Progress ========================================================= */ #paceClockApp.mode-tv.tv-layout-coach .pcTvCoachProgress{ align-items:flex-start !important; } #paceClockApp.mode-tv.tv-layout-coach #pcTvCoachProgressValue{ display:block !important; margin:0 !important; color:#fff !important; font-size:clamp(34px, 2.4vw, 48px) !important; font-weight:850 !important; line-height:.9 !important; } #paceClockApp.mode-tv.tv-layout-coach #pcTvCoachProgressMeta{ display:block !important; margin-top:6px !important; overflow:hidden !important; color:var(--pc-coach-meta) !important; font-size:clamp(11px, .74vw, 14px) !important; font-weight:650 !important; text-overflow:ellipsis !important; white-space:nowrap !important; } /* ========================================================= Distance ========================================================= */ #paceClockApp.mode-tv.tv-layout-coach .pcTvCoachDistance{ align-items:flex-start !important; } #paceClockApp.mode-tv.tv-layout-coach .pcTvCoachDistance strong{ display:flex !important; align-items:baseline !important; gap:4px !important; margin:0 !important; color:#fff !important; white-space:nowrap !important; } #paceClockApp.mode-tv.tv-layout-coach .pcTvCoachDistance strong > span{ color:#fff !important; font-size:clamp(27px, 2vw, 42px) !important; font-weight:850 !important; line-height:1 !important; letter-spacing:-.035em !important; } #paceClockApp.mode-tv.tv-layout-coach .pcTvCoachDistance small, #paceClockApp.mode-tv.tv-layout-coach .pcTvCoachDistance em{ color:var(--pc-coach-meta) !important; font-size:clamp(11px, .76vw, 14px) !important; font-style:normal !important; font-weight:650 !important; } /* ========================================================= One font for Coach information ========================================================= */ #paceClockApp.mode-tv.tv-layout-coach #pcTvCoachInfo, #paceClockApp.mode-tv.tv-layout-coach #pcTvCoachInfo *, #paceClockApp.mode-tv.tv-layout-coach #clockCard .status, #paceClockApp.mode-tv.tv-layout-coach #clockCard .status *{ font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important; } /* ========================================================= TV View visibility ========================================================= */ /* Coach — hide lower status cards */ #paceClockApp.mode-tv.tv-layout-coach.tv-hide-block #setStatus{ display:none !important; } #paceClockApp.mode-tv.tv-layout-coach.tv-hide-rep #repStatus{ display:none !important; } #paceClockApp.mode-tv.tv-layout-coach.tv-hide-round #roundSlot{ display:none !important; } #paceClockApp.mode-tv.tv-layout-coach.tv-hide-progress.tv-hide-distance .pcTvCoachMetrics{ display:none !important; } #paceClockApp.mode-tv.tv-hide-current .pcTvCoachCurrent{ display:none !important; } #paceClockApp.mode-tv.tv-hide-next .pcTvCoachNext{ display:none !important; } #paceClockApp.mode-tv.tv-hide-progress .pcTvCoachProgress{ display:none !important; } #paceClockApp.mode-tv.tv-hide-distance .pcTvCoachDistance{ display:none !important; } #paceClockApp.mode-tv.tv-hide-local-time .pcTvCoachTime{ display:none !important; } #paceClockApp.mode-tv.tv-hide-current .pcTvCoachSets, #paceClockApp.mode-tv.tv-hide-next .pcTvCoachSets{ grid-template-columns:1fr !important; } #paceClockApp.mode-tv.tv-hide-progress .pcTvCoachMetrics, #paceClockApp.mode-tv.tv-hide-distance .pcTvCoachMetrics{ grid-template-columns:1fr !important; } #paceClockApp.mode-tv.tv-hide-progress .pcTvCoachDistance{ border-left:0 !important; } /* ========================================================= 16. COACH — LOCAL TIME ========================================================= */ #paceClockApp.mode-tv.tv-layout-coach .pcTvCoachTime{ position:fixed !important; top:max(18px, env(safe-area-inset-top)) !important; right:max(22px, env(safe-area-inset-right)) !important; z-index:99999 !important; display:flex !important; align-items:center !important; justify-content:center !important; min-width:122px !important; min-height:52px !important; margin:0 !important; padding:8px 14px !important; border:1px solid var(--pc-coach-card-border) !important; border-radius:15px !important; background:var(--pc-coach-card-bg) !important; box-shadow:var(--pc-coach-card-shadow) !important; } #paceClockApp.mode-tv.tv-layout-coach .pcTvCoachTime .pcTvCoachLabel{ display:none !important; } #paceClockApp.mode-tv.tv-layout-coach .pcTvCoachTime strong{ margin:0 !important; color:#fff !important; font-size:clamp(27px, 1.8vw, 36px) !important; font-weight:850 !important; line-height:1 !important; letter-spacing:-.04em !important; white-space:nowrap !important; } /* TV View — Local Time visibility */ #paceClockApp.mode-tv.tv-layout-coach.tv-hide-local-time .pcTvCoachTime{ display:none !important; } /* ========================================================= 17. COACH — IPAD / TABLET LANDSCAPE ========================================================= */ @media (min-width:768px) and (max-width:1366px) and (orientation:landscape){ #paceClockApp.mode-tv.tv-layout-coach #clockCard{ width:calc(100vw - 28px) !important; } #paceClockApp.mode-tv.tv-layout-coach #clockCard .time{ min-height:42vh !important; max-height:44vh !important; padding:18px 20px !important; font-size:clamp(138px, 21.5vw, 278px) !important; border-radius:26px !important; } #paceClockApp.mode-tv.tv-layout-coach #pcTvCoachInfo{ margin-top:10px !important; } #paceClockApp.mode-tv.tv-layout-coach .pcTvCoachSets{ gap:10px !important; } #paceClockApp.mode-tv.tv-layout-coach .pcTvCoachCurrent, #paceClockApp.mode-tv.tv-layout-coach .pcTvCoachNext{ min-height:82px !important; padding:10px 13px !important; border-radius:14px !important; } #paceClockApp.mode-tv.tv-layout-coach .pcTvCoachCurrent strong{ font-size:clamp(24px, 2.6vw, 36px) !important; } #paceClockApp.mode-tv.tv-layout-coach .pcTvCoachNext strong{ font-size:clamp(20px, 2vw, 30px) !important; } #paceClockApp.mode-tv.tv-layout-coach #clockCard .status{ gap:10px !important; margin-top:10px !important; } #paceClockApp.mode-tv.tv-layout-coach #setStatus, #paceClockApp.mode-tv.tv-layout-coach #repStatus, #paceClockApp.mode-tv.tv-layout-coach #roundStatus, #paceClockApp.mode-tv.tv-layout-coach .pcTvCoachMetrics{ min-height:96px !important; border-radius:14px !important; } #paceClockApp.mode-tv.tv-layout-coach #setStatus > strong, #paceClockApp.mode-tv.tv-layout-coach #repStatus > strong, #paceClockApp.mode-tv.tv-layout-coach #roundStatus > strong{ font-size:clamp(40px, 4.8vw, 62px) !important; } #paceClockApp.mode-tv.tv-layout-coach .pcTvCoachMetric{ padding:9px 10px !important; } #paceClockApp.mode-tv.tv-layout-coach #pcTvCoachProgressValue{ font-size:clamp(27px, 3vw, 38px) !important; } #paceClockApp.mode-tv.tv-layout-coach .pcTvCoachDistance strong > span{ font-size:clamp(23px, 2.6vw, 34px) !important; } #paceClockApp.mode-tv.tv-layout-coach .pcTvCoachTime{ top:max(12px, env(safe-area-inset-top)) !important; right:max(14px, env(safe-area-inset-right)) !important; min-width:106px !important; min-height:46px !important; } #paceClockApp.mode-tv.tv-layout-coach .pcTvCoachTime strong{ font-size:27px !important; } } #paceClockApp.mode-tv.tv-layout-coach.tv-hide-current .pcTvCoachNext strong{ font-size:clamp(24px, 2.6vw, 36px) !important; } /* ========================================================= 18. COACH — LARGE DESKTOP / TV ========================================================= */ @media (min-width:1367px){ #paceClockApp.mode-tv.tv-layout-coach #clockCard{ width:calc(100vw - 56px) !important; } #paceClockApp.mode-tv.tv-layout-coach #clockCard .time{ min-height:47vh !important; max-height:49vh !important; font-size:clamp(285px, 23vw, 480px) !important; } #paceClockApp.mode-tv.tv-layout-coach .pcTvCoachCurrent, #paceClockApp.mode-tv.tv-layout-coach .pcTvCoachNext{ min-height:116px !important; } #paceClockApp.mode-tv.tv-layout-coach #setStatus, #paceClockApp.mode-tv.tv-layout-coach #repStatus, #paceClockApp.mode-tv.tv-layout-coach #roundStatus, #paceClockApp.mode-tv.tv-layout-coach .pcTvCoachMetrics{ min-height:122px !important; } } /* ========================================================= 19. COACH — VERY LARGE TV ========================================================= */ @media (min-width:1900px){ #paceClockApp.mode-tv.tv-layout-coach #clockCard{ width:calc(100vw - 72px) !important; } #paceClockApp.mode-tv.tv-layout-coach #clockCard .time{ min-height:49vh !important; font-size:clamp(320px, 20vw, 470px) !important; } } /* ========================================================= 20. COACH — PHONE SAFETY Original phone behaviour unless TV layout is forced ========================================================= */ @media (max-width:767px){ #paceClockApp.mode-tv.tv-layout-coach:not(.tv-force-layout) #pcTvCoachInfo, #paceClockApp.mode-tv.tv-layout-coach:not(.tv-force-layout) .pcTvCoachMetrics{ display:none !important; } } /* Fixed-width timer digits */ #paceClockApp.mode-tv #timeText{ font-variant-numeric: tabular-nums lining-nums !important; font-feature-settings: "tnum" 1, "lnum" 1 !important; } /* ========================================================= COACH — Next Up only mode ========================================================= */ #paceClockApp.mode-tv.tv-layout-coach.tv-hide-current .pcTvCoachNext{ min-height:108px !important; padding:15px 20px !important; } #paceClockApp.mode-tv.tv-layout-coach.tv-hide-current .pcTvCoachNext strong{ font-size:clamp(28px, 2.2vw, 46px) !important; } /* ========================================================= 21. DEFAULT TV — FINAL POOL CLOCK LAYOUT Clean large pool display ========================================================= */ #paceClockApp.mode-tv.tv-layout-default{ --pc-default-card-bg:rgba(255,255,255,.10); --pc-default-card-border:rgba(255,255,255,.18); } /* Main screen */ #paceClockApp.mode-tv.tv-layout-default #clockCard{ width:calc(100vw - 56px) !important; max-width:none !important; margin:0 auto !important; padding:0 !important; } /* Big timer */ #paceClockApp.mode-tv.tv-layout-default #clockCard .time{ display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; min-height:48vh !important; max-height:50vh !important; padding:24px !important; font-size:clamp(220px,22vw,460px) !important; font-weight:900 !important; line-height:.82 !important; letter-spacing:-.07em !important; color:#fff !important; background:rgba(18,70,110,.55) !important; border-radius:32px !important; } /* Hide phase */ #paceClockApp.mode-tv.tv-layout-default #phaseStatus{ display:none !important; } /* Current Set */ #paceClockApp.mode-tv.tv-layout-default #currentWorkoutBar, #paceClockApp.mode-tv.tv-layout-default .currentWorkoutBar{ display:block !important; width:100% !important; margin-top:14px !important; } #paceClockApp.mode-tv.tv-layout-default .currentWorkoutBar{ min-height:110px !important; padding:18px 24px !important; border-radius:20px !important; background:var(--pc-default-card-bg) !important; border:1px solid var(--pc-default-card-border) !important; } /* Status row */ #paceClockApp.mode-tv.tv-layout-default #clockCard .status{ display:flex !important; gap:14px !important; margin-top:14px !important; } /* Hide old metrics */ #paceClockApp.mode-tv.tv-layout-default .pcTvCoachMetrics{ display:none !important; } /* Three cards */ #paceClockApp.mode-tv.tv-layout-default #setStatus, #paceClockApp.mode-tv.tv-layout-default #repStatus, #paceClockApp.mode-tv.tv-layout-default #roundStatus{ flex:1 1 0 !important; min-height:120px !important; display:flex !important; align-items:center !important; justify-content:center !important; flex-direction:column !important; border-radius:20px !important; background:var(--pc-default-card-bg) !important; border:1px solid var(--pc-default-card-border) !important; } /* Labels */ #paceClockApp.mode-tv.tv-layout-default #setStatus span, #paceClockApp.mode-tv.tv-layout-default #repStatus span, #paceClockApp.mode-tv.tv-layout-default #roundStatus span{ color:#c9ecfa !important; font-size:14px !important; letter-spacing:.16em !important; } /* Values */ #paceClockApp.mode-tv.tv-layout-default #setStatus strong, #paceClockApp.mode-tv.tv-layout-default #repStatus strong, #paceClockApp.mode-tv.tv-layout-default #roundStatus strong{ color:#fff !important; font-size:clamp(54px,4vw,78px) !important; font-weight:900 !important; } /* Hide Coach elements */ #paceClockApp.mode-tv.tv-layout-default .pcTvCoachInfo, #paceClockApp.mode-tv.tv-layout-default .pcTvCoachNext{ display:none !important; } /* Large screen */ @media(min-width:1367px){ #paceClockApp.mode-tv.tv-layout-default #clockCard .time{ min-height:50vh !important; font-size:clamp(300px,22vw,500px) !important; } #paceClockApp.mode-tv.tv-layout-default #setStatus, #paceClockApp.mode-tv.tv-layout-default #repStatus, #paceClockApp.mode-tv.tv-layout-default #roundStatus{ min-height:140px !important; } } /* Tablet landscape */ @media (min-width:768px) and (max-width:1366px) and (orientation:landscape){ #paceClockApp.mode-tv.tv-layout-default #clockCard .time{ min-height:44vh !important; font-size:clamp(150px,21vw,280px) !important; } #paceClockApp.mode-tv.tv-layout-default #setStatus, #paceClockApp.mode-tv.tv-layout-default #repStatus, #paceClockApp.mode-tv.tv-layout-default #roundStatus{ min-height:95px !important; } } /* ========================================================= DEFAULT TV — FULLSCREEN STRUCTURE FIX ========================================================= */ #paceClockApp.mode-tv.tv-layout-default #screenClock{ display:flex !important; width:100% !important; height:100vh !important; height:100dvh !important; align-items:center !important; justify-content:center !important; } #paceClockApp.mode-tv.tv-layout-default #clockCard{ position:relative !important; width:calc(100vw - 56px) !important; max-width:none !important; margin:0 auto !important; } /* restore status container */ #paceClockApp.mode-tv.tv-layout-default #clockCard .status{ display:grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap:14px !important; width:100% !important; } /* restore cards */ #paceClockApp.mode-tv.tv-layout-default #setStatus, #paceClockApp.mode-tv.tv-layout-default #repStatus, #paceClockApp.mode-tv.tv-layout-default #roundStatus{ width:100% !important; min-width:0 !important; min-height:120px !important; } /* remove coach leftovers */ #paceClockApp.mode-tv.tv-layout-default .pcTvCoachInfo{ display:none !important; } /* fullscreen canvas */ body.tv-view-enabled #paceClockApp.mode-tv.tv-layout-default{ position:fixed !important; inset:0 !important; width:100vw !important; height:100vh !important; height:100dvh !important; } /* clock vertical position */ #paceClockApp.mode-tv.tv-layout-default #clockCard{ transform:none !important; }