/* ETS Live — Live Timing pubblico. Mobile first; stessi colori della Timing Console ETS. */
@font-face { font-family: 'Barlow SC'; font-weight: 400; font-display: swap; src: url('fonts/barlow-semi-condensed-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow SC'; font-weight: 500; font-display: swap; src: url('fonts/barlow-semi-condensed-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow SC'; font-weight: 600; font-display: swap; src: url('fonts/barlow-semi-condensed-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow SC'; font-weight: 700; font-display: swap; src: url('fonts/barlow-semi-condensed-latin-700-normal.woff2') format('woff2'); }

:root, :root[data-theme="dark"] {
  --bg: #111820; --panel: #151f28; --panel-2: #1C2933; --panel-3: #22323e; --line: #2a3a47; --line-2: #34495a;
  --text: #F3F6F8; --muted: #8fa1b0; --faint: #5d7182; --sel: #1d3a5c; --sel-line: #3d7fd6; --follow: #19c3dc; --follow-bg: #0d3940;
  --green: #22b45a; --green-bg: #12361f; --yellow: #f2c230; --yellow-bg: #4a3c08; --orange: #f08a24; --orange-bg: #4a2a0c;
  --red: #e5383b; --red-bg: #4a1517; --purple: #b07cff; --purple-bg: #2f1f52; --cyan: #19c3dc;
  --row-alt: #131c25; --flash: #24435c; color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #F5F7F9; --panel: #FFFFFF; --panel-2: #EEF2F5; --panel-3: #e3e9ee; --line: #d5dde3; --line-2: #c2ccd4;
    --text: #0f1a22; --muted: #5b6b78; --faint: #8b99a5; --sel: #dcebff; --sel-line: #2f6fc4; --follow: #00839a; --follow-bg: #d6f4f8;
    --green: #128a3f; --green-bg: #d9f3e2; --yellow: #8a6a00; --yellow-bg: #fff1bf; --orange: #b85d00; --orange-bg: #ffe4c8;
    --red: #c91f24; --red-bg: #fde0e0; --purple: #6d33d6; --purple-bg: #ece2ff; --cyan: #00839a; --row-alt: #f8fafb; --flash: #fff4c2; color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #F5F7F9; --panel: #FFFFFF; --panel-2: #EEF2F5; --panel-3: #e3e9ee; --line: #d5dde3; --line-2: #c2ccd4;
  --text: #0f1a22; --muted: #5b6b78; --faint: #8b99a5; --sel: #dcebff; --sel-line: #2f6fc4; --follow: #00839a; --follow-bg: #d6f4f8;
  --green: #128a3f; --green-bg: #d9f3e2; --yellow: #8a6a00; --yellow-bg: #fff1bf; --orange: #b85d00; --orange-bg: #ffe4c8;
  --red: #c91f24; --red-bg: #fde0e0; --purple: #6d33d6; --purple-bg: #ece2ff; --cyan: #00839a; --row-alt: #f8fafb; --flash: #fff4c2; color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Barlow SC', 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 15px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; }
button { font: inherit; color: inherit; cursor: pointer; }
.num { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------ header */
header { position: sticky; top: 0; z-index: 30; background: var(--panel); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top); }
.h-top { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "id id live" "state state state"; gap: 4px 10px; padding: 8px 12px 6px; align-items: center; }
.logo { grid-area: id; height: 34px; max-width: 110px; object-fit: contain; margin-right: 6px; }
.logo:not([hidden]) + .h-id { margin-left: 120px; }
.h-id { grid-area: id; min-width: 0; }
.ev-name { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; letter-spacing: .3px; }
.sess-btn { background: none; border: 0; padding: 0; font-size: 19px; font-weight: 700; display: flex; align-items: center; gap: 6px; max-width: 100%; text-align: left; }
.sess-btn span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.caret { color: var(--muted); font-size: 14px; }
.h-state { grid-area: state; display: flex; align-items: center; gap: 10px; min-width: 0; }
.track { font-weight: 700; font-size: 15px; padding: 3px 10px; border-radius: 4px; letter-spacing: .5px; border: 1px solid transparent; white-space: nowrap; }
.track.GREEN { background: var(--green); color: #fff; }
.track.FCY, .track.SC, .track.CODE60 { background: #f2c230; color: #111; }
.track.RED { background: var(--red); color: #fff; }
.track.CHEQUERED { background: #fff; color: #111; border-color: #111; display: inline-flex; align-items: center; gap: 6px; }
.track.CHEQUERED::before { content: ''; width: 18px; height: 14px; background: repeating-conic-gradient(#111 0 25%, #fff 0 50%) 0 0 / 7px 7px; border: 1px solid #111; }
.track.NONE { background: var(--panel-3); color: var(--muted); }
.clockbox { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex-wrap: wrap; }
.clock { font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: .5px; }
.clock.frozen { color: var(--muted); }
.phase { font-size: 15px; font-weight: 700; color: var(--yellow); white-space: nowrap; }
.phase.chq { color: var(--text); }
.h-live { grid-area: live; display: flex; align-items: center; gap: 8px; justify-self: end; }
.res { font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 3px; border: 1px solid; white-space: nowrap; }
.res.LIVE { color: var(--green); border-color: var(--green); }
.res.PROVISIONAL { color: var(--orange); border-color: var(--orange); background: var(--orange-bg); }
.res.FINAL { color: var(--green); border-color: var(--green); background: var(--green-bg); }
.res.AMENDED { color: var(--purple); border-color: var(--purple); background: var(--purple-bg); }
.res.SUSPENDED { color: var(--red); border-color: var(--red); background: var(--red-bg); }   /* 1.0.30: ufficialità sospesa */
.res.CLOSED, .res.MERGE, .res.SCHEDULED { color: var(--muted); border-color: var(--line-2); }
.live-dot { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; letter-spacing: .5px; }
.live-dot i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.live-dot.green i { background: var(--green); box-shadow: 0 0 0 0 var(--green); animation: pulse 2s infinite; }
.live-dot.green b { color: var(--green); }
.live-dot.yellow i { background: var(--yellow); } .live-dot.yellow b { color: var(--yellow); }
.live-dot.red i { background: var(--red); } .live-dot.red b { color: var(--red); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(34,180,90,.6); } 70% { box-shadow: 0 0 0 7px rgba(34,180,90,0); } 100% { box-shadow: 0 0 0 0 rgba(34,180,90,0); } }
.track-line { height: 4px; background: var(--panel-3); }
.track-line.GREEN { background: var(--green); } .track-line.FCY, .track-line.SC, .track-line.CODE60 { background: #f2c230; }
.track-line.RED { background: var(--red); } .track-line.CHEQUERED { background: repeating-linear-gradient(90deg, #111 0 8px, #fff 8px 16px); }

.sess-menu { position: fixed; z-index: 50; top: 64px; left: 8px; right: 8px; max-width: 460px; max-height: 70vh; overflow: auto; background: var(--panel); border: 1px solid var(--line-2); border-radius: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.35); padding: 4px; }
.sess-item { display: flex; width: 100%; align-items: center; gap: 8px; background: none; border: 0; padding: 10px 10px; border-radius: 6px; text-align: left; }
.sess-item:hover, .sess-item.on { background: var(--panel-3); }
.sess-item .nm { flex: 1; font-weight: 600; }
.sess-item.sched { opacity: .6; }
.sess-item .tm { color: var(--muted); font-size: 13px; }

.stale { background: #f2c230; color: #111; font-weight: 700; text-align: center; padding: 6px 10px; letter-spacing: .5px; position: sticky; top: 0; z-index: 25; }
.stale.lost { background: var(--red); color: #fff; }
.msgs:empty { display: none; }
.msg { padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--panel-2); font-weight: 600; display: flex; gap: 8px; align-items: baseline; }
.msg b { font-size: 12px; color: var(--muted); letter-spacing: .5px; }
.msg.p1 { background: var(--yellow-bg); } .msg.p1 b { color: var(--yellow); }
.msg.p2 { background: var(--red-bg); } .msg.p2 b { color: var(--red); }

/* ------------------------------------------------------------ controlli */
.ctl { position: relative; z-index: 26; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--bg); }
.filters { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.filters::-webkit-scrollbar { display: none; }
.chip { border: 1px solid var(--line-2); background: var(--panel); padding: 5px 10px; border-radius: 16px; font-weight: 600; font-size: 13px; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.chip.on { background: var(--sel); border-color: var(--sel-line); }
.chip i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.search { flex: 1 1 140px; min-width: 120px; display: flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 16px; padding: 0 10px; }
.search span { color: var(--muted); }
.search input { flex: 1; min-width: 0; background: none; border: 0; color: var(--text); font: inherit; padding: 6px 0; outline: none; }
.views { display: flex; border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; }
.vbtn { background: var(--panel); border: 0; padding: 5px 10px; font-weight: 700; font-size: 12px; letter-spacing: .5px; }
.vbtn.on { background: var(--sel); }
.icon-btn { background: var(--panel); border: 1px solid var(--line-2); border-radius: 50%; width: 32px; height: 32px; font-size: 18px; line-height: 1; padding: 0; }
.menu { position: fixed; z-index: 50; right: 8px; top: 110px; width: 260px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.35); padding: 10px; }
.menu h4 { margin: 8px 0 6px; font-size: 12px; color: var(--muted); letter-spacing: .5px; text-transform: uppercase; }
.menu .seg { display: flex; gap: 4px; flex-wrap: wrap; }
.menu .seg button { flex: 1; border: 1px solid var(--line-2); background: var(--panel-2); border-radius: 6px; padding: 6px; font-weight: 600; font-size: 13px; }
.menu .seg button.on { background: var(--sel); border-color: var(--sel-line); }
.menu .act { display: block; width: 100%; margin-top: 6px; border: 1px solid var(--line-2); background: var(--panel-2); border-radius: 6px; padding: 8px; font-weight: 600; text-align: left; }
.notice { padding: 8px 12px; background: var(--panel-2); border-bottom: 1px solid var(--line); color: var(--muted); font-weight: 600; }

/* ------------------------------------------------------------ classifica */
main { flex: 1; display: flex; min-height: 0; position: relative; }
.tbl-wrap { flex: 1; min-width: 0; overflow-x: auto; }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.tbl th { position: sticky; top: 0; background: var(--panel-2); color: var(--muted); font-weight: 600; font-size: 12px; letter-spacing: .4px; text-transform: uppercase; padding: 6px 6px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); z-index: 2; }
.tbl td { padding: 6px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle; }
.tbl tbody tr:nth-child(even) td { background: var(--row-alt); }
.tbl tbody tr { cursor: pointer; }
.tbl tbody tr:hover td { background: var(--panel-3); }
.tbl .r { text-align: right; } .tbl .c { text-align: center; }
.tbl td.pos { font-weight: 700; font-size: 17px; width: 1%; text-align: right; padding-left: 10px; }
.tbl td.no { font-weight: 700; font-size: 17px; width: 1%; text-align: center; border-left: 4px solid var(--cls, transparent); padding-left: 6px; padding-right: 6px; }
.tbl td.who { width: 100%; max-width: 0; overflow: hidden; }
.who .l1 { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.who .l2 { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.tbl td.laps { font-weight: 700; }
.tbl .t { font-variant-numeric: tabular-nums; }
.tbl tr.leader td.pos { color: var(--orange); }   /* 1.0.27: il giallo è del pit */
.t-sb { color: var(--purple); font-weight: 700; }
.t-pb { color: var(--green); font-weight: 600; }
.t-sb::before { content: '◆'; font-size: 9px; margin-right: 2px; vertical-align: 2px; }
.t-pb::before { content: '•'; font-size: 13px; margin-right: 2px; }
.mv { font-size: 11px; font-weight: 700; margin-left: 3px; vertical-align: 1px; }
.mv.up { color: var(--green); } .mv.dn { color: var(--red); }
.pit-b { display: inline-block; background: #f2c230; color: #111; font-weight: 700; border-radius: 3px; padding: 0 5px; font-size: 13px; }
.st { font-size: 12px; font-weight: 700; padding: 2px 6px; border-radius: 3px; letter-spacing: .3px; }
.st.ON_TRACK { background: var(--green-bg); color: var(--green); }
.st.IN_PIT { background: #f2c230; color: #111; }
.st.FINISHED { background: var(--panel-3); color: var(--text); }
.st.FINISHED::before { content: '⚑ '; }
.st.DSQ, .st.RETIRED, .st.DNF { background: var(--red-bg); color: var(--red); }
.st.DNS, .st.WITHDRAWN, .st.NC, .st.NOT_STARTED { background: var(--panel-3); color: var(--muted); }
.pen { display: inline-block; font-size: 12px; font-weight: 700; border: 1px solid var(--orange); color: var(--orange); border-radius: 3px; padding: 0 4px; margin-right: 2px; }
.pen.inv { border-color: var(--cyan); color: var(--cyan); }
.cls { display: inline-block; font-size: 11px; font-weight: 700; color: #fff; padding: 1px 5px; border-radius: 3px; text-shadow: 0 1px 1px rgba(0,0,0,.35); }
tr.dim td { color: var(--faint); }
tr.dim td.who .l1 { color: var(--muted); }
/* 1.0.27: kart ai box = tempo della sosta che scorre su sfondo giallo (nella colonna Stato; sullo smartphone, dove Stato
   non c'è, al posto dell'ultimo giro). Tolto il «PIT» giallo dopo il team. */
.st.pr { font-variant-numeric: tabular-nums; font-size: 13px; min-width: 44px; display: inline-block; text-align: center; }
.st.pr.pr-m { display: none; }
@media (max-width: 859px) { .st.pr.pr-m { display: inline-block; } .lv-p { display: none; } }
body.tv .st.pr.pr-m { display: none; } body.tv .lv-p { display: inline; }
tr.followed td { background: var(--follow-bg) !important; }
tr.followed td.pos { box-shadow: inset 4px 0 0 var(--follow); }
tr.sel td { background: var(--sel) !important; }
tr.cmp td.no::after { content: ' ⇄'; font-size: 11px; color: var(--cyan); }
tr.flash td { animation: flash 1.2s ease-out; }
@keyframes flash { from { background: var(--flash); } to { } }
.empty { padding: 40px 16px; text-align: center; color: var(--muted); font-size: 17px; }
.empty b { display: block; color: var(--text); font-size: 20px; margin-bottom: 6px; }

/* colonne per priorità: p1 smartphone verticale (Pos, #, Team/Pilota, Giri, Gap, Last) */
.tbl [data-p="2"], .tbl [data-p="3"], .tbl [data-p="4"] { display: none; }
@media (min-width: 600px) { .tbl [data-p="2"] { display: table-cell; } }
@media (min-width: 860px) { .tbl [data-p="3"] { display: table-cell; } }
@media (min-width: 1180px) { .tbl [data-p="4"] { display: table-cell; } }
/* 1.0.20: kart arrivato (smartphone / tablet: la colonna Stato è nascosta) — bandierina a scacchi e riga più chiara */
.finf { display: none; width: 13px; height: 9px; margin-left: 4px; vertical-align: 1px; border: 1px solid var(--line-2, #555); border-radius: 1px;
  background: repeating-conic-gradient(#f4f4f4 0 25%, #111 0 50%) 0 0 / 6px 6px; }
@media (max-width: 859px) {
  .finf { display: inline-block; }
  .tbl tr.fin td, .tbl tr.fin td.pos, .tbl tr.fin td.no { background-color: color-mix(in srgb, var(--panel, #1b1f27) 84%, #9aa3b2); }
  tr.fin td.who .l1, tr.fin td.r { opacity: .82; }
}
body.tv .finf { width: 22px; height: 15px; background-size: 10px 10px; }
@media (max-width: 599px) {
  .tbl td.pos, .tbl td.no { position: sticky; z-index: 1; background: inherit; }
  .tbl td, .tbl th { padding: 6px 4px; }
  .tbl td.pos { padding-left: 8px; font-size: 16px; }
  .tbl td.no { font-size: 16px; }
  .clock { font-size: 24px; }
}

/* ------------------------------------------------------------ dettaglio concorrente */
.detail { width: 420px; flex: 0 0 420px; border-left: 1px solid var(--line); background: var(--panel); overflow-y: auto; max-height: calc(100vh - 120px); position: sticky; top: 120px; }
@media (max-width: 999px) {
  .detail { position: fixed; inset: 0; width: auto; max-height: none; z-index: 60; border: 0; padding-top: env(safe-area-inset-top); }
}
.d-head { display: flex; align-items: center; gap: 10px; padding: 12px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); z-index: 1; }
.d-no { font-size: 30px; font-weight: 700; min-width: 54px; text-align: center; border-left: 6px solid var(--cls, var(--line-2)); padding-left: 6px; }
.d-id { flex: 1; min-width: 0; }
.d-id .l1 { font-size: 19px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-id .l2 { color: var(--muted); font-size: 14px; }
.d-close { background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 50%; width: 36px; height: 36px; font-size: 20px; line-height: 1; padding: 0; }
.d-acts { display: flex; gap: 6px; padding: 10px 12px 0; }
.d-acts button { flex: 1; border: 1px solid var(--line-2); background: var(--panel-2); border-radius: 6px; padding: 8px; font-weight: 700; }
.d-acts button.on { background: var(--follow-bg); border-color: var(--follow); color: var(--follow); }
.d-sec { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.d-sec h3 { margin: 0 0 8px; font-size: 12px; color: var(--muted); letter-spacing: .5px; text-transform: uppercase; }
.kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kv div { background: var(--panel-2); border-radius: 6px; padding: 6px 8px; min-width: 0; }
.kv > div > span { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.kv b { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.mini { width: 100%; border-collapse: collapse; font-size: 14px; }
.mini th { text-align: left; color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; padding: 4px; border-bottom: 1px solid var(--line); }
.mini td { padding: 4px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.mini .r { text-align: right; }
.mini tr.del td { text-decoration: line-through; color: var(--faint); }
.drivers { color: var(--muted); font-size: 14px; }

/* follow bar e confronto */
.followbar { position: sticky; bottom: 0; z-index: 20; background: var(--follow-bg); border-top: 2px solid var(--follow); padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); display: flex; gap: 10px; align-items: center; font-weight: 700; cursor: pointer; }
.followbar .fx { margin-left: auto; background: none; border: 0; color: var(--muted); font-size: 18px; }
.compare { position: sticky; bottom: 0; z-index: 21; background: var(--panel); border-top: 2px solid var(--cyan); padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); }
.compare table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.compare th, .compare td { padding: 3px 6px; text-align: right; font-size: 14px; }
.compare th:first-child, .compare td:first-child { text-align: left; color: var(--muted); font-weight: 600; }
.compare .cx { float: right; background: none; border: 0; color: var(--muted); font-size: 18px; }

/* footer */
footer { border-top: 1px solid var(--line); background: var(--panel); padding: 6px 12px calc(6px + env(safe-area-inset-bottom)); }
.sponsor { display: block; max-height: 48px; max-width: 100%; margin: 0 auto 6px; object-fit: contain; }
.f-line { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.legend span { margin-right: 10px; white-space: nowrap; }
.delay-note { color: var(--orange); font-weight: 600; }
.brand { margin-left: auto; letter-spacing: .5px; }
/* 1.0.23: credito del cronometraggio */
.credit { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 12px; white-space: nowrap; }
.credit img { height: 24px; width: auto; max-width: 140px; background: #fff; border-radius: 3px; padding: 1px 4px; object-fit: contain; }
.credit:not([hidden]) + .brand { margin-left: 0; }
body.tv .credit { font-size: 16px; } body.tv .credit img { height: 36px; max-width: 220px; }

.modal { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal .box { background: #fff; color: #111; border-radius: 12px; padding: 18px; text-align: center; max-width: 360px; width: 100%; }
.modal .box img { width: 100%; height: auto; }
.modal .box .u { font-weight: 700; word-break: break-all; margin: 8px 0 12px; }
.modal .box button { border: 1px solid #bbb; background: #f2f2f2; border-radius: 6px; padding: 8px 14px; font-weight: 700; margin: 0 4px; color: #111; }

/* merge */
.src-v.disc { text-decoration: line-through; color: var(--faint); }
.src-v.best { color: var(--purple); font-weight: 700; }

/* ------------------------------------------------------------ TV / LED wall */
body.tv { font-size: 22px; }
body.tv .ctl, body.tv .menu, body.tv .followbar, body.tv .compare, body.tv .brand, body.tv .legend { display: none !important; }
body.tv .tbl { font-size: 26px; }
body.tv .tbl td { padding: 8px 10px; }
body.tv .tbl td.pos, body.tv .tbl td.no { font-size: 30px; }
body.tv .tbl th { font-size: 16px; }
body.tv .who .l2 { font-size: 18px; }
body.tv .clock { font-size: 44px; }
body.tv .sess-btn { font-size: 30px; }
body.tv .ev-name { font-size: 18px; }
body.tv .track { font-size: 24px; }
body.tv .phase { font-size: 24px; }
body.tv .tbl tbody tr { cursor: default; }
body.tv .tbl [data-p="2"], body.tv .tbl [data-p="3"] { display: table-cell; }
body.tv .sponsor { max-height: 80px; }

@media (min-width: 860px) {
  .ctl { position: sticky; top: var(--hdr-h, 96px); }
  .tbl-wrap { overflow-x: visible; }
  .tbl th { top: calc(var(--hdr-h, 96px) + var(--ctl-h, 50px)); }
  .detail { top: calc(var(--hdr-h, 96px) + var(--ctl-h, 50px)); max-height: calc(100vh - var(--hdr-h, 96px) - var(--ctl-h, 50px)); }
}
/* ETS 3.7.3: penalità e avvisi pubblici */
.pubn { padding: 10px 8px 16px; }
.pubn h3 { margin: 6px 4px 8px; font-size: 15px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pubn-t td.why { white-space: normal; }
.pubn-t td.pen-eff { color: var(--red, #e5383b); }
/* 1.0.10: penalità revocata (resta, segnata) e riga di REVOCA */
.pubn-t tr.pubn-rev td { opacity: .6; }
.pubn-t tr.pubn-rev td.b { text-decoration: line-through; }
.pubn-t tr.pubn-rvk td.b { color: var(--accent, #4aa3ff); }
/* 1.0.17: sullo smartphone ogni penalità / avviso è un blocco (ora · # · team, poi penalità e motivo a tutta larghezza):
   prima il Motivo restava in una colonna stretta, una parola per riga, e usciva dallo schermo */
@media (max-width: 640px) {
  .pubn-t thead { display: none; }
  .pubn-t, .pubn-t tbody { display: block; width: 100%; }
  .pubn-t tr { display: grid; grid-template-columns: auto auto 1fr; gap: 2px 10px; padding: 8px 6px; border-bottom: 1px solid var(--line); }
  .pubn-t td { padding: 0 !important; border: 0 !important; white-space: normal; min-width: 0; overflow-wrap: anywhere; }
  .pubn-t td:nth-child(4) { grid-column: 1 / -1; }
  .pubn-t td.why { grid-column: 1 / -1; color: var(--muted); font-size: 14px; }
}
/* 1.0.11: pulsante BOX (pagina Pit / Stint) */
a.vbtn { text-decoration: none; color: inherit; display: inline-flex; align-items: center; }
body.tv #vBox { display: none; }

/* 1.0.18: pit lane aperta / chiusa (orari del regolamento in tempo di gara) */
.pitst { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.05; font-size: 14px; padding: 3px 9px; border-radius: 4px; white-space: nowrap; border: 1px solid transparent; }
.pitst b { font-weight: 800; letter-spacing: .4px; }
.pitst small { font-size: 11px; font-weight: 600; opacity: .85; }
.pitst.open { background: rgba(34,180,90,.15); color: var(--green); border-color: var(--green); }
.pitst.closed { background: rgba(229,56,59,.15); color: var(--red); border-color: var(--red); }
@media (max-width: 640px) { .pitst { font-size: 12px; padding: 2px 6px; } .pitst small { font-size: 10px; } }

/* 1.0.18: effetti (barra di avanzamento del giro sotto la riga, larga quanto la tabella) */
.tbl td.pos { position: relative; }
.tbl i.fx { position: absolute; left: 0; bottom: -1px; height: 2px; width: var(--rw, 100vw); background: var(--fx, #3aa0ff); transform-origin: 0 50%; transform: scaleX(0); animation-name: fxgo; animation-timing-function: linear; animation-fill-mode: forwards; pointer-events: none; z-index: 1; opacity: .85; }
.tbl i.fx.lead { background: var(--orange); }
@keyframes fxgo { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 1.0.18: P cerchiata (penalità) sugli schermi dove la colonna Penalità non c'è; tocco = dettaglio */
.pmk { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; border-radius: 50%; border: 2px solid currentColor; background: transparent; font: 800 11px/1 inherit; font-family: inherit; padding: 0; margin: 0 5px 0 0; vertical-align: 1px; cursor: pointer; flex: none; }
.pmk.red { color: var(--red, #e5383b); } .pmk.orange { color: var(--orange, #f08a24); }
@media (min-width: 1180px) { .pmk { display: none; } }
body.tv .pmk { display: none; }
.penbox { text-align: left; max-width: 520px; width: calc(100vw - 32px); }
.penbox h3 { margin: 0 0 8px; font-size: 17px; }
.penbox .pb-eff { margin-bottom: 8px; color: var(--red, #e5383b); }
.penbox table { width: 100%; margin-bottom: 10px; }
.penbox td.why { white-space: normal; }
.modal .box.penbox { background: var(--panel); color: var(--text); max-width: 520px; }
.modal .box.penbox button { background: var(--panel-3); color: var(--text); border-color: var(--line-2); }

/* 1.0.19: tracker simulato — a destra dei risultati sugli schermi larghi, sotto sullo smartphone, schermo intero */
.trk { flex: 0 0 38%; max-width: 760px; min-width: 360px; border-left: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; position: sticky; top: calc(var(--hdr-h, 96px) + var(--ctl-h, 50px)); align-self: flex-start; max-height: calc(100vh - var(--hdr-h, 96px) - var(--ctl-h, 50px)); }
.trk-h { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line); font-size: 13px; }
.trk-h b { text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trk-note { color: var(--faint); font-size: 11px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trk-b { flex: 1; min-height: 0; padding: 6px; display: flex; }
.trk-b svg { width: 100%; height: auto; max-height: 100%; display: block; }
.trk-path { fill: none; stroke: var(--panel-3); stroke-width: calc(var(--r) * 1.6px); stroke-linejoin: round; }
.trk-pit { fill: none; stroke: #8a8f96; stroke-width: calc(var(--r) * 0.55px); stroke-dasharray: calc(var(--r) * 0.8px) calc(var(--r) * 0.5px); opacity: .9; }
.trk-sf { stroke: #111; stroke-width: calc(var(--r) * 0.35px); }
.trk-dot circle { fill: #1f6feb; stroke: #fff; stroke-width: calc(var(--r) * 0.18px); }
.trk-dot text { fill: #fff; text-anchor: middle; font-weight: 800; font-family: inherit; pointer-events: none; }
.trk-dot.lead circle { fill: #ff8a1e; stroke: #111; }   /* 1.0.27: leader arancione (il giallo si confondeva con il pit) */
.trk-dot.lead text { fill: #111; }
.trk-dot.pit circle { fill: #6b7280; }
.trk-dot.followed circle { stroke: #ff3b8a; stroke-width: calc(var(--r) * 0.3px); }
#vTrk.on { background: var(--accent, #1f6feb); color: #fff; }
@media (max-width: 1279px) {
  body.has-trk main { flex-direction: column; }
  .trk { position: static; flex: none; width: 100%; max-width: none; min-width: 0; border-left: 0; border-top: 1px solid var(--line); max-height: none; }
}
body.trk-full #tblWrap, body.trk-full #compare, body.trk-full #follow { display: none !important; }
body.trk-full .trk { flex: 1; max-width: none; min-width: 0; border-left: 0; position: static; max-height: none; height: calc(100vh - var(--hdr-h, 96px) - var(--ctl-h, 50px)); }
body.trk-full .trk-b svg { height: 100%; }