/* =========================================================================
   EquineSuite · Tent Pegging — v2 skin (UI kit v1.1)
   Rajdhani (UI) · IBM Plex Mono (numbers, overlines) · IBM Plex Sans Arabic (RTL)
   Loaded after app.css: it only restyles, layout logic stays in app.css.
   ========================================================================= */
body{font-family:var(--font);font-weight:600;font-size:16px;line-height:1.4;letter-spacing:.005em}
[dir=rtl] body,[dir=rtl] button,[dir=rtl] input,[dir=rtl] select,[dir=rtl] textarea{font-family:var(--font-ar);font-weight:500;letter-spacing:0}
::selection{background:var(--acc);color:#0C1015}
a{color:var(--acc-t)} a:hover{color:var(--acc)}

/* type */
h1{font-size:30px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:1}
h2{font-size:19px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
h3{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;color:var(--muted)}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3{text-transform:none;letter-spacing:0;font-family:var(--font-ar)}
[dir=rtl] h1{font-size:27px} [dir=rtl] h2{font-size:17px}
.small{font-size:13px} .muted{color:var(--muted)}
label.f{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
[dir=rtl] label.f{font-family:var(--font-ar);font-size:12.5px;letter-spacing:0;text-transform:none}
.overline{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* numbers always Plex Mono, tabular, LTR */
.num,td.n,.time-input,.total,.net,.fault,.seg button,.stat-num,.stat-n,.rank-badge,.rider-no,.lv-t,.pos-n,.ord-pos,.so-pos,
input[type=number],.g-pts .net,.lim,.dp-n,.qchip i,.kpi-v{font-family:var(--mono)!important;font-variant-numeric:tabular-nums;letter-spacing:0}
.time-input,input[type=number],.ord-pos,.so-pos{direction:ltr}

/* shell */
@media (min-width:861px){.app{grid-template-columns:var(--nav-w) minmax(0,1fr)}}
.nav{background:var(--rail);padding:14px 12px;gap:2px}
.brand{gap:10px;padding:2px 8px 16px}
.brand .logo{width:34px;height:34px;border-radius:0;background:none;color:var(--text)}
.brand .logo svg{width:34px;height:34px}
.brand b{font-weight:700;font-size:16px;line-height:.95;letter-spacing:.08em;text-transform:uppercase}
.brand span{font-family:var(--mono);font-size:8px;letter-spacing:.22em;color:var(--muted);text-transform:uppercase;display:block;margin-bottom:3px}
[dir=rtl] .brand b{letter-spacing:0;font-size:15px}
.nav button.item{position:relative;height:38px;padding:0 10px;border-radius:7px;gap:10px;font-weight:600;font-size:14.5px;color:var(--muted)}
.nav button.item svg{width:18px;height:18px}
.nav button.item:hover{background:var(--surface-2);color:var(--text)}
.nav button.item.active{background:var(--primary-soft);color:var(--acc-t)}
.nav button.item.active::before{content:"";position:absolute;inset-inline-start:-12px;top:9px;width:3px;height:20px;border-radius:2px;background:var(--acc)}
.nav .badge{margin-inline-start:auto;font-family:var(--mono);font-size:9.5px;font-weight:600;padding:1px 6px;border-radius:4px;background:var(--primary-soft);color:var(--acc-t)}
.nav .ver{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--faint);padding:8px 10px 0}
.topbar{min-height:58px;padding:9px 24px;background:color-mix(in srgb,var(--bg) 90%,transparent)}
.champ-switch{border-radius:10px;padding:6px 12px;height:auto}
.champ-switch .title{font-weight:700;font-size:15px}
.champ-switch .title small{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
[dir=rtl] .champ-switch .title small{font-family:var(--font-ar);letter-spacing:0;text-transform:none;font-size:11.5px}
.content{padding:26px 28px 64px}

/* buttons */
.btn{min-height:40px;padding:0 16px;border-radius:10px;font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line);background:var(--surface);color:var(--text);transition:background .12s,border-color .12s,box-shadow .12s}
[dir=rtl] .btn{letter-spacing:0;text-transform:none;font-weight:600}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#0C1015}
.btn.primary:hover{background:#FF8F5E;border-color:#FF8F5E;filter:none}
.btn.ghost{background:transparent;border-color:transparent;color:var(--acc-t)}
.btn.ghost:hover{background:var(--primary-soft)}
.btn.danger{background:transparent;color:var(--danger);border-color:var(--danger)}
.btn.danger:hover{background:var(--danger-soft)}
.btn:disabled{background:var(--surface-2);color:var(--faint);border-color:var(--surface-2);opacity:1}
.btn.sm{min-height:32px;padding:0 12px;font-size:12.5px;border-radius:8px}
.btn.xs{min-height:28px;padding:0 10px;font-size:11.5px;border-radius:6px}
.btn.lg{min-height:52px;padding:0 22px;font-size:16px;border-radius:12px;letter-spacing:.08em}
.icon-btn{width:40px;padding:0}
.btn svg{width:16px;height:16px}
input:focus,select:focus,textarea:focus,.btn:focus-visible,button:focus-visible{outline:none;border-color:var(--acc)!important;box-shadow:0 0 0 3px var(--primary-soft)}
#exitBoard{width:44px;height:44px;min-height:44px;padding:0;border-radius:10px;inset-block-start:16px;inset-inline-end:16px;font-size:17px}

/* inputs */
input[type=text],input[type=date],input[type=number],input[type=search],input[type=url],select,textarea{border-radius:10px;border:1px solid var(--line);background:var(--surface);min-height:40px;font-weight:600}
select{cursor:pointer}
input::placeholder,textarea::placeholder{color:var(--faint);font-weight:500}
input[type=checkbox],input[type=radio]{accent-color:var(--acc)}
.field input.invalid{border-color:var(--danger)}

/* cards, surfaces */
.card{border-radius:14px;box-shadow:none;padding:20px}
.card>h2{margin-bottom:14px}
.modal{border-radius:18px;box-shadow:var(--shadow-3);border:1px solid var(--line)}
.modal-back{background:rgba(12,16,21,.55);backdrop-filter:blur(2px)}
.tbl-wrap{border-radius:14px}
.group-card{border-radius:14px;box-shadow:none}
.srow{border-radius:14px;box-shadow:none}
.srow:hover{border-color:color-mix(in srgb,var(--acc) 55%,var(--line))}

/* tabs / segmented: signal-orange selection */
.tabs{background:var(--bg);border:1px solid var(--line);padding:3px;border-radius:10px}
.tabs button{border-radius:7px;font-weight:700;letter-spacing:.04em;padding:7px 14px;font-size:14px}
.tabs button.on{background:var(--acc);color:#0C1015;box-shadow:none}
.chip{border-radius:9px;font-weight:700;padding:7px 14px}
.chip.on{background:var(--acc);border-color:var(--acc);color:#0C1015}
.seg{border-radius:9px}
.seg button{color:var(--muted);font-weight:600;height:34px;min-width:34px}
.seg button.on{background:var(--acc);color:#0C1015}
.seg button.on.zero{background:var(--danger);color:#fff}
.rs{border-radius:12px;border-width:1.5px}
.rs.on{border-color:var(--acc);background:var(--primary-soft)}

/* tables */
th{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;color:var(--muted);background:var(--surface-2)}
[dir=rtl] th{font-family:var(--font-ar);font-size:12px;letter-spacing:0}
tbody tr:hover td{background:color-mix(in srgb,var(--acc) 6%,transparent)}
.rank-badge{border-radius:8px;min-width:30px;height:30px;font-weight:600;background:var(--surface-2);color:var(--text)}
.r1 .rank-badge{background:var(--acc);color:#0C1015}
.r2 .rank-badge{background:var(--primary-soft);color:var(--acc-t)}
.r3 .rank-badge{background:var(--surface-2);color:var(--acc-t);box-shadow:inset 0 0 0 1px var(--acc)}

/* chips / pills (result states) */
.pill{border-radius:6px;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px}
[dir=rtl] .pill{font-family:var(--font-ar);letter-spacing:0;font-size:12px;text-transform:none}
.pill.ok{background:var(--ok-soft);color:var(--ok)} .pill.warn{background:var(--warn-soft);color:var(--warn)} .pill.bad{background:var(--danger-soft);color:var(--danger)} .pill.info{background:var(--info-soft);color:var(--info)}
.pill.acc{background:var(--primary-soft);color:var(--acc-t)}

/* scoring */
.time-input{font-weight:600!important;border-radius:8px!important}
.time-input.over{border-color:var(--warn)!important;background:var(--warn-soft)!important;color:var(--warn)}
.time-input.flash{background:var(--primary-soft);border-color:var(--acc)}
.fault.neg{color:var(--warn)}
.runbox{border-radius:10px}
.total{border-radius:10px;font-weight:600!important}
.locked-banner{border-radius:10px;background:var(--warn-soft);color:var(--warn)}
.pair-label{background:var(--primary-soft);color:var(--acc-t);border-radius:6px;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;font-size:10.5px}
.flag-sel.bad{background:var(--danger-soft);color:var(--danger);border-color:var(--danger)}
.flag-sel.warn{background:var(--warn-soft);color:var(--warn);border-color:var(--warn)}
.runbox.void{background:var(--danger-soft)}
.bar,.stat-bar{background:var(--surface-2)} .bar i,.stat-bar i{background:var(--acc)}

/* toast */
.toast{background:var(--text);color:var(--bg);border-radius:10px;font-weight:700;letter-spacing:.02em;box-shadow:var(--shadow-2);border-inline-start:3px solid var(--acc)}

/* status chip in the top bar */
.status{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:6px 10px;cursor:pointer}
[dir=rtl] .status{font-family:var(--font-ar);letter-spacing:0;font-size:12px}
.status i{animation:tp-pulse 1.6s infinite}
.status.saved i{animation:none}

/* ---------- brand mark, loader, splash ---------- */
@keyframes tp-ring{to{stroke-dashoffset:-68.4}}
@keyframes tp-dot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.55);opacity:.5}}
@keyframes tp-bar{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
@keyframes tp-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.tp-loader .ring{animation:tp-ring 1.4s cubic-bezier(.2,.7,.2,1) infinite}
.tp-loader .dot{transform-origin:82px 18px;animation:tp-dot 1.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.tp-loader .ring,.tp-loader .dot,.splash-bar i,.status i{animation:none}}
#splash{position:fixed;inset:0;z-index:999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:var(--bg);color:var(--text);transition:opacity .35s}
#splash.out{opacity:0;pointer-events:none}
#splash svg{width:88px;height:88px}
.splash-word{display:flex;flex-direction:column;align-items:center;gap:4px}
.splash-word span{font-family:var(--mono);font-size:10px;letter-spacing:.32em;color:var(--muted)}
.splash-word b{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:26px;letter-spacing:.12em}
.splash-bar{position:relative;width:180px;height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.splash-bar i{position:absolute;top:0;bottom:0;width:40%;border-radius:2px;background:var(--acc);animation:tp-bar 1.4s cubic-bezier(.4,0,.2,1) infinite}
.splash-st{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--muted)}

/* live pill */
.live-pill{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:8px;background:var(--primary-soft);color:var(--acc-t);font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;white-space:nowrap}
.live-pill::before{content:"";width:6px;height:6px;border-radius:3px;background:var(--acc);animation:tp-pulse 1.6s infinite}

/* ---------- update panel ---------- */
.upd-box{display:flex;flex-direction:column;gap:10px}
.upd-ver{display:flex;gap:16px;flex-wrap:wrap}
.upd-ver div{display:flex;flex-direction:column;gap:2px}
.upd-ver b{font-family:var(--mono);font-size:20px;font-weight:600}
.upd-prog{height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden}.upd-prog i{display:block;height:100%;width:0;background:var(--acc);transition:width .2s}
.upd-notes{white-space:pre-wrap;background:var(--surface-2);border-radius:10px;padding:10px 12px;font-size:14px;max-height:200px;overflow:auto}

/* ---------- responsive (kit: collapsed rail < 1024, bottom tabs < 860) ---------- */
@media (max-width:1180px) and (min-width:861px){
  :root{--nav-w:68px}
  .nav{align-items:center;padding:14px 8px}
  .brand{padding:2px 0 14px}.brand>div:last-child,.nav button.item span,.nav .badge,.nav .ver{display:none}
  .nav button.item{width:44px;justify-content:center;padding:0}
  .nav button.item.active::before{inset-inline-start:-8px}
}
@media (max-width:860px){
  .nav{background:var(--rail);padding:4px 6px calc(4px + env(safe-area-inset-bottom))}
  .nav button.item{height:auto;padding:6px 4px;font-size:11px;font-weight:700;letter-spacing:.04em}
  .nav button.item.active::before{display:none}
  .content{padding:16px 14px 92px}
  h1{font-size:25px}
}

/* ---------- print: white paper, same type system ---------- */
.pg{font-family:'Rajdhani','IBM Plex Sans Arabic',Arial,sans-serif;font-weight:600}
[dir=rtl] .pg{font-family:'IBM Plex Sans Arabic',Tahoma,Arial,sans-serif;font-weight:500}
.pg .print-head{border-bottom:2px solid #0C1015;box-shadow:0 3px 0 #FF7A45}
.pg .ptitle{font-weight:700;text-transform:uppercase;letter-spacing:.03em}
[dir=rtl] .pg .ptitle{text-transform:none;letter-spacing:0}
.ptable th,.sheet th{background:#F1F3EF;color:#0C1015;font-weight:700}
.pg td.n,.pg .total{font-family:'IBM Plex Mono',monospace}
.pg .r1 .rank-badge{background:#FF7A45;color:#0C1015}.pg .r2 .rank-badge{background:#FFE2D5}.pg .r3 .rank-badge{background:#F1F3EF;box-shadow:inset 0 0 0 1px #FF7A45}
.certbox{border:7px double #0C1015;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 5px #FF7A45}
.ctitle{color:#0C1015;text-transform:uppercase;letter-spacing:.06em}
[dir=rtl] .ctitle{text-transform:none;letter-spacing:0}
.nav .badge{font-style:normal}
.flag-sel{max-width:132px;min-height:34px!important;height:34px;font-size:12.5px!important}
.tg .seg-lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase}

/* ---------- riders list: reflows with its own width (no sideways scrolling) ---------- */
#compGrid{grid-template-columns:minmax(260px,320px) minmax(0,1fr)}
#compGrid>*{min-width:0}
@media (max-width:1180px){#compGrid{grid-template-columns:minmax(0,1fr)}#compGrid>div:first-child{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}}
.rlist{container-type:inline-size;display:flex;flex-direction:column}
.rrow,.rhead{display:grid;gap:8px;align-items:center;grid-template-columns:68px minmax(0,1.6fr) minmax(0,1.1fr) minmax(0,.9fr) minmax(0,.9fr) minmax(0,1fr) minmax(0,.9fr) 112px 50px 84px}
.rhead{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:0 0 8px;border-bottom:1px solid var(--line)}
[dir=rtl] .rhead{font-family:var(--font-ar);font-size:12px;letter-spacing:0}
.rrow{padding:8px 0;border-bottom:1px solid var(--line)}
.rrow:last-child{border-bottom:0}
.rrow:hover{background:color-mix(in srgb,var(--acc) 5%,transparent)}
.rc{min-width:0;display:flex;flex-direction:column;gap:3px}
.rc input,.rc select{width:100%;min-width:0}
.rc.c-res{align-items:center}.rc.c-res input{width:20px;height:20px;min-height:0}
.rc.c-del{align-items:flex-end}
.rl{display:none;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
[dir=rtl] .rl{font-family:var(--font-ar);font-size:11.5px;letter-spacing:0}
@container (max-width:1060px){
  .rhead{display:none}.rl{display:block}
  .rrow{grid-template-columns:72px minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr) 84px;grid-template-areas:"no name name team cls del" "res nat lic horse ent ent";row-gap:8px;padding:12px 0}
  .c-no{grid-area:no}.c-name{grid-area:name}.c-team{grid-area:team}.c-cls{grid-area:cls}.c-del{grid-area:del}.c-horse{grid-area:horse}.c-nat{grid-area:nat}.c-lic{grid-area:lic}.c-ent{grid-area:ent}.c-res{grid-area:res}
  .rc.c-del{justify-content:flex-end}
}
@container (max-width:560px){
  .rrow{grid-template-columns:64px minmax(0,1fr) minmax(0,1fr) 84px;grid-template-areas:"no name name del" "team team cls cls" "nat nat lic lic" "horse horse ent res"}
  .rc.c-res{align-items:flex-start}
}
.tabs{flex-wrap:wrap;overflow:visible}

/* phone: 4 main tabs + More (kit: START · SCORE · RESULTS · MORE) */
.nav button.more-item{display:none}
@media (max-width:860px){
  .nav{overflow:visible!important;justify-content:space-around}
  .nav button.item:not(.mob){display:none}
  .nav button.more-item{display:flex}
  .nav button.item{flex:1 1 0;min-width:0}
  .nav button.item span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
.more-sheet{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.more-sheet button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;font-weight:700;color:var(--text)}
.more-sheet button.on{border-color:var(--acc);background:var(--primary-soft);color:var(--acc-t)}
.more-sheet svg{width:22px;height:22px}

/* tables on phones: one card per row */
@media (max-width:700px){
  .tbl-wrap.rsp{overflow:visible;border:0;background:none}
  .tbl-wrap.rsp table,.tbl-wrap.rsp tbody{display:block;width:100%}
  .tbl-wrap.rsp thead{display:none}
  .tbl-wrap.rsp tbody tr{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px 12px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:8px}
  .tbl-wrap.rsp tbody tr.sep{display:block;padding:8px 12px;background:var(--surface-2)}
  .tbl-wrap.rsp td{display:flex;flex-direction:column;gap:2px;border:0;padding:0;min-width:0;text-align:start!important;background:none!important;overflow-wrap:anywhere}
  .tbl-wrap.rsp td::before{content:attr(data-l);font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  [dir=rtl] .tbl-wrap.rsp td::before{font-family:var(--font-ar);font-size:11px;letter-spacing:0}
  .tbl-wrap.rsp td[data-l=""]::before{display:none}
  .tbl-wrap.rsp td.wcol{grid-column:span 2}
  .tbl-wrap.rsp td.total{align-items:flex-start;font-size:20px}
  .tbl-wrap.rsp td input,.tbl-wrap.rsp td select{width:100%!important;min-width:0}
  .tbl-wrap.rsp tbody tr:hover td{background:none}
  .tbl-wrap.rsp tr.u-over{box-shadow:0 -3px 0 var(--acc)}
}
@media (max-width:860px){ .nav .ver,.nav .spacer{display:none} }
/* stats: two tiles per row on phones, values in ink like the kit KPI cards */
.stat-num,.stat-v.num{font-family:var(--mono)!important;font-weight:600!important}
@media (max-width:700px){
  .statsbar .stat,.statsbar.big .stat{flex:1 1 calc(50% - 1px)!important;min-width:0;padding:10px 12px}
  .statsbar.big .stat-v,.statsbar .stat-v{font-size:20px}
}
@media (max-width:700px){
  .tbl-wrap.rsp tbody tr{grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:6px 10px;padding:10px 12px}
  .tbl-wrap.rsp td{align-items:flex-start}
  .tbl-wrap.rsp td.ecell{display:none}
  .tbl-wrap.rsp td .rank-badge{min-width:30px;height:28px}
  .tbl-wrap.rsp td.total{font-size:18px}
}
.tie-c{display:flex;flex-wrap:wrap;gap:4px;align-items:center;min-width:0}.tie-c .tie-in{width:68px!important}

/* busy overlay (kit 03: inline loader · importing on signal · board reconnecting) */
.tp-busy{position:fixed;inset:0;z-index:900;display:grid;place-items:center;background:color-mix(in srgb,var(--bg) 70%,transparent);backdrop-filter:blur(3px)}
.tp-busy-box{display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 34px;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-3);color:var(--text);min-width:220px;text-align:center}
.tp-busy .tp-loader{width:64px;height:64px}
.tp-busy-t{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
[dir=rtl] .tp-busy-t{font-family:var(--font-ar);letter-spacing:0;font-size:14px}
.tp-busy-s{font-size:13px;color:var(--muted);max-width:280px}
.tp-busy.signal .tp-busy-box{background:#FF7A45;border-color:#FF7A45;color:#0C1015}
.tp-busy.signal .tp-loader .dot{fill:#0C1015}
.tp-busy.signal .tp-busy-s{color:#0C1015;opacity:.75}
.tp-busy.dark .tp-busy-box{background:#0C1015;border-color:#272E36;color:#F2F4F0}
.tp-loader.inline{width:18px;height:18px;vertical-align:-4px}
/* skeleton rows */
.skel{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--surface-2),var(--line),var(--surface-2));background-size:200% 100%;animation:skel 1.3s ease-in-out infinite;margin:8px 0}
@keyframes skel{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}
.pg .fm-entry th{letter-spacing:0;text-transform:none;padding:3px 5px}

/* ---------- brand on every print ---------- */
.print-head .ph-right{text-align:end;display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none;max-width:45%}
.ph-brand{display:flex;align-items:center;gap:7px;margin-bottom:5px;color:#0C1015}
.ph-brand .tp-mark{width:30px;height:30px;flex:none}
.ph-brand span{display:flex;flex-direction:column;line-height:1;text-align:start}
.ph-brand i{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:.24em;color:#5E645B;margin-bottom:2px}
.ph-brand b{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:13px;letter-spacing:.1em}
.cmark .tp-mark{width:64px;height:64px;color:#0C1015}
.cbrand{display:flex;align-items:center;gap:6px;color:#5E645B;font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.06em;word-spacing:.3em}
.cbrand .tp-mark{width:14px;height:14px;color:#0C1015}
.tp-mark{color:inherit}

/* running brand header on every printed page */
.pgwrap{width:100%;border-collapse:collapse;border:0;table-layout:fixed}
.pgwrap>thead>tr>td,.pgwrap>tbody>tr>td{padding:0;border:0;background:none;vertical-align:top}
.pgwrap>thead{display:table-header-group}
.brandbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 0 6px;margin-bottom:8px;border-bottom:1px solid #DDE1DA;color:#0C1015}
.bb-mark{display:flex;align-items:center;gap:8px;direction:ltr}
.bb-mark .tp-mark{width:28px;height:28px;flex:none}
.bb-mark span{display:flex;flex-direction:column;line-height:1}
.bb-mark i{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:.06em;word-spacing:.2em;color:#5E645B;margin-bottom:2px}
.bb-mark b{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:14px;letter-spacing:.06em}
.bb-champ{font-size:10px;color:#5E645B;text-align:end;overflow-wrap:anywhere;min-width:0}
[dir=rtl] .bb-mark{direction:rtl}
[dir=rtl] .bb-mark span{text-align:right;align-items:flex-end}
[dir=rtl] .bb-champ{text-align:start}
.pg.cert .brandbar{position:absolute;left:16mm;right:auto;top:14mm;border:0;margin:0;padding:0}
.pg.cert .brandbar .bb-champ{display:none}
.pg.cert{position:relative}
.pg.nohead .brandbar{display:flex}
@media screen{.paper .pgwrap{margin:0}}
[dir=rtl] .pg.cert .brandbar{left:auto;right:16mm}
.pg .print-head h1,[dir=rtl] .pg .print-head h1{font-size:18px;line-height:1.2}

/* ---------- entries ---------- */
.rc.c-del{flex-direction:row;justify-content:flex-end;gap:2px}
select.es-withdrawn{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,var(--line))} select.es-pending{color:var(--warn)}

/* ---------- active class switcher + workflow ---------- */
.cls-switch{display:inline-flex;align-items:center;gap:6px;padding:0 4px 0 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);height:40px;margin-inline-start:8px;color:var(--muted)}
.cls-switch svg{width:16px;height:16px;flex:none}
.cls-switch select{border:0;background:transparent;min-height:36px;font-weight:700;max-width:230px;padding-inline-end:6px}
.cls-switch.on{border-color:var(--acc);background:var(--primary-soft);color:var(--acc-t)}
.cls-switch.on select{color:var(--acc-t)}
.wf{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0 0 16px}
.wf-s{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:5px 12px 5px 5px;cursor:pointer;font-weight:700;font-size:13px;color:var(--muted)}
.wf-s i{font-style:normal;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--surface-2);font-family:var(--mono);font-size:11px}
.wf-s.done{color:var(--text)} .wf-s.done i{background:var(--ok-soft);color:var(--ok)}
.wf-s.on{border-color:var(--acc);color:var(--acc-t)} .wf-s.on i{background:var(--acc);color:#0C1015}
.wf-a{color:var(--faint);font-weight:700}
.cls-card.is-active{border-color:var(--acc);box-shadow:0 0 0 3px var(--primary-soft)}
.cls-name{font-size:18px;font-weight:700}
.cls-evs{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.cls-evs .chip{padding:5px 11px;font-size:12.5px}

/* ---------- logos ---------- */
.logo-row{display:flex;flex-wrap:wrap;gap:10px}
.logo-tile{position:relative;width:120px;height:86px;border:1px solid var(--line);border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;padding:6px}
.logo-tile img{max-width:100%;max-height:52px;object-fit:contain}
.logo-tile .logo-act{position:absolute;bottom:2px;left:2px;right:2px;display:flex;justify-content:center;gap:2px}
.logo-tile .logo-act .btn{min-height:22px;padding:0 6px;background:rgba(255,255,255,.85)}
.logo-tile.add{flex-direction:column;gap:4px;cursor:pointer;color:var(--muted);background:var(--surface-2);border-style:dashed;font-size:12px}
.logo-tile.add svg{width:20px;height:20px}
.ph-logos{display:flex;align-items:center;gap:10px;flex:none}
.ph-logos img{height:54px;max-width:120px;object-fit:contain}
.clogos{display:flex;justify-content:center;align-items:center;gap:22px;margin-bottom:8px}.clogos img{max-height:70px;max-width:150px;object-fit:contain}

/* ---------- timing ---------- */
kbd{font-family:var(--mono);font-size:10px;font-weight:600;padding:1px 5px;border-radius:4px;border:1px solid var(--line);background:var(--surface-2);color:var(--muted);letter-spacing:0;text-transform:none}
.tm-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);gap:14px;align-items:start}
@media (max-width:1100px){.tm-grid{grid-template-columns:minmax(0,1fr)}}
.tm-side{display:grid;gap:14px}
.tm-conn{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:14px;background:var(--surface-2)}
.tm-conn-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tm-led{width:11px;height:11px;border-radius:50%;background:var(--faint);flex:none;display:inline-block}
.tm-led.ok{background:var(--ok);box-shadow:0 0 0 4px var(--ok-soft)} .tm-led.warn{background:var(--warn)} .tm-led.bad{background:var(--danger);box-shadow:0 0 0 4px var(--danger-soft)}
.tm-target{display:grid;gap:10px;margin-bottom:12px}
.tm-target select{width:auto;max-width:320px}
.tm-who{display:flex;align-items:center;gap:10px}
.tm-who-t{flex:1;min-width:0;display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:8px 14px;min-height:58px}
.tm-who-t b{display:block;font-size:20px;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-who-t small{display:block;color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-clockbox{border-radius:16px;padding:14px 18px 12px;text-align:center;background:#0C1015;color:#F2F4F0;border:2px solid #0C1015;transition:border-color .15s,background .15s}
.tm-clock{font-size:clamp(64px,10vw,132px);font-weight:600;line-height:1;letter-spacing:-.02em;direction:ltr}
.tm-state{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8A9086;margin-top:6px}
[dir=rtl] .tm-state{font-family:var(--font-ar);letter-spacing:0;font-size:14px}
.tm-clockbox.st-armed{border-color:var(--warn)} .tm-clockbox.st-armed .tm-state{color:var(--warn)}
.tm-clockbox.st-running{border-color:var(--ok)} .tm-clockbox.st-running .tm-clock{color:#5BE09A} .tm-clockbox.st-running .tm-state{color:#5BE09A}
.tm-clockbox.st-stopped{border-color:var(--acc)} .tm-clockbox.st-stopped .tm-clock{color:#FF8F5E} .tm-clockbox.st-stopped .tm-state{color:#FF8F5E}
.tm-splits{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:12px 0}
.tm-split{border:1px solid var(--line);border-radius:10px;padding:8px 12px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.tm-split span{font-size:12px;color:var(--muted)} .tm-split b{font-size:22px}
.tm-split.got{border-color:color-mix(in srgb,var(--ok) 50%,var(--line));background:var(--ok-soft)}
.tm-split.last.got{border-color:var(--acc);background:var(--primary-soft)}
.tm-riders{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.tm-riders .f-l{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tm-riders .tabs button{min-width:46px;font-size:18px;font-family:var(--mono)}
.tm-ctl{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px}
.tm-b{flex-direction:column;gap:2px;min-height:64px!important}
.tm-b kbd{background:transparent;border-color:currentColor;opacity:.6}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff} .btn.ok:hover{filter:brightness(1.07);background:var(--ok)} .btn.ok:disabled,.btn.armed:disabled{background:var(--surface-2);color:var(--faint);border-color:var(--surface-2)}
.btn.armed{background:var(--warn);border-color:var(--warn);color:#0C1015}
.tm-cdcard{text-align:center}
.tm-ring{--p:1;width:150px;height:150px;margin:6px auto;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--acc) calc(var(--p)*360deg),var(--surface-2) 0)}
.tm-ring span{width:120px;height:120px;border-radius:50%;display:grid;place-items:center;background:var(--surface);font-size:34px;font-weight:600}
.tm-cdcard.running .tm-ring{background:conic-gradient(var(--ok) calc(var(--p)*360deg),var(--surface-2) 0)}
.tm-cdcard.expired{border-color:var(--danger)} .tm-cdcard.expired .tm-ring{background:var(--danger)}
.tm-exp{color:var(--danger);font-weight:700;margin:6px 0}
.tm-ulist{display:flex;flex-direction:column;gap:4px;max-height:430px;overflow:auto}
.tm-u{display:flex;align-items:center;gap:10px;border:1px solid transparent;background:none;border-radius:10px;padding:6px 8px;cursor:pointer;text-align:start;color:var(--text);font:inherit}
.tm-u:hover{background:var(--surface-2)} .tm-u.on{border-color:var(--acc);background:var(--primary-soft)}
.tm-u-n{flex:1;min-width:0}.tm-u-n b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tm-u-n small{display:block;color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-log{font-size:13px}.tm-log td,.tm-log th{padding:5px 8px}
.tm-log tr.role-start td{background:var(--ok-soft)} .tm-log tr.role-finish td{background:var(--info-soft)} .tm-log tr.role-stop td{background:var(--primary-soft)} .tm-log tr.role-ignored td{color:var(--muted)}
.tm-keys{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px 16px}.tm-keys div{display:flex;align-items:center;gap:10px;font-size:14px}.tm-keys kbd{min-width:84px;text-align:center;font-size:11px;padding:3px 6px}
.tm-strip{display:flex;flex-wrap:wrap;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;padding:8px 12px;margin:0 0 12px;background:var(--surface);position:sticky;top:66px;z-index:15}
.tm-strip.st-armed{border-color:var(--warn)} .tm-strip.st-running{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 6%,var(--surface))} .tm-strip.st-stopped{border-color:var(--acc)}
.tm-strip-clock{font-size:26px;min-width:84px;text-align:center;direction:ltr}
.tm-strip-t{flex:1;min-width:140px}.tm-strip-t b{display:block;font-size:13px}.tm-strip-t small{display:block;color:var(--muted);font-size:12px}
.tm-tgt{border:1px solid var(--line);background:var(--surface);border-radius:8px;cursor:pointer;min-width:30px;height:34px;font-size:14px;padding:0 4px}
.tm-tgt:hover{border-color:var(--acc);background:var(--primary-soft)}
.tm-on{outline:3px solid var(--acc);outline-offset:2px;border-radius:12px}
table.kv{width:100%;font-size:13px}table.kv th{text-align:start;color:var(--muted);font-weight:600;width:34%;padding:4px 8px 4px 0;vertical-align:top}table.kv td{padding:4px 0}
/* big-screen timer display (second window, TV, phones) */
body.timer-display{background:#0C1015;margin:0;overflow:hidden}
.td{position:fixed;inset:0;display:flex;flex-direction:column;justify-content:center;padding:4vh 5vw;color:#F2F4F0;background:#0C1015;font-family:var(--font)}
.td-viewer .td{position:static;min-height:70vh;border-radius:18px}
.td-top{position:absolute;top:3vh;left:5vw;right:5vw;display:flex;justify-content:space-between;font-family:var(--mono);font-size:2vh;letter-spacing:.14em;text-transform:uppercase;color:#8A9086}
.td-viewer .td-top{position:static;margin-bottom:3vh}
.td-who{display:flex;align-items:center;gap:2.5vw;margin-bottom:2vh}
.td-no{font-family:var(--mono);font-size:7vh;font-weight:600;background:#FF7A45;color:#0C1015;border-radius:1.4vh;padding:.4vh 2.2vh}
.td-who b{display:block;font-size:7vh;line-height:1.05}.td-who small{display:block;font-size:3.2vh;color:#8A9086}
.td-clock,.td-cd{font-family:var(--mono);font-size:26vh;font-weight:600;line-height:1;direction:ltr;letter-spacing:-.03em}
.td.st-running .td-clock{color:#5BE09A}.td.st-stopped .td-clock{color:#FF8F5E}.td.st-armed .td-clock{color:#F5B841}
.td-cd{color:#F5B841}.td-cd.exp{color:#FF6B70}
.td-sps{display:flex;gap:2vw;margin-top:3vh;flex-wrap:wrap}
.td-sp{border:2px solid #272E36;border-radius:1.4vh;padding:1vh 2vw;display:flex;gap:1.5vw;align-items:baseline;font-size:3vh;color:#8A9086}
.td-sp b{font-family:var(--mono);font-size:5vh;color:#F2F4F0}.td-sp.got{border-color:#5BE09A}
.td-foot{display:flex;gap:3vw;margin-top:3vh;font-size:3.4vh;color:#8A9086}.td-pen{color:#FF6B70;font-weight:700}
.td-wait{position:fixed;bottom:3vh;left:0;right:0;text-align:center;color:#8A9086;font-size:2.4vh}
.tm-ports .btn{text-transform:none;letter-spacing:0}

/* ---------- official entry form (ITPF / UAEERF) ---------- */
.ef{color:#111;font-family:Arial,'IBM Plex Sans Arabic',sans-serif}
.ef-logos{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:20px;margin-bottom:12px}
.ef-logos.n1{justify-content:center}.ef-logos img{max-height:92px;max-width:30%;object-fit:contain}
.ef-title{background:#7A1F2B;color:#fff;text-align:center;font-weight:700;font-size:22px;padding:10px;display:flex;justify-content:center;gap:18px;border-radius:4px}
.ef-title .ef-en::after{content:'|';margin-inline-start:18px;opacity:.7}
.ef-meta{text-align:center;font-size:12px;color:#444;margin:6px 0 2px}
table.ef-t{width:100%;border-collapse:collapse;margin-top:14px;table-layout:fixed}
.ef-t th,.ef-t td{border:1px solid #7A1F2B;padding:9px 10px;vertical-align:middle;font-size:13px}
.ef-t th{background:#F4EFE7;color:#7A1F2B;font-weight:700;text-align:start}
.ef-t th .ef-en,.ef-t th .ef-ar,.ef-opt .ef-en,.ef-opt .ef-ar,.ef-ix .ef-en,.ef-ix .ef-ar{display:inline-block}
.ef-t th,.ef-opt,.ef-ix{display:table-cell}
.ef-t th{display:table-cell}
.ef-t th .ef-ar,.ef-opt .ef-ar{float:right;font-family:'IBM Plex Sans Arabic',Arial,sans-serif}
.ef-comp td{height:38px}
.ef-opt{display:flex!important;align-items:center;gap:8px}.ef-opt .ef-en{flex:1}.ef-opt .ef-ar{float:none}
.ef-opt .cb,.ef .cb{width:14px;height:14px;border:1.5px solid #7A1F2B;display:inline-block;flex:none;border-radius:2px}
.ef .cb.on{background:#7A1F2B;box-shadow:inset 0 0 0 2px #fff}
.ef-riders td{height:34px}.ef-no{text-align:center;font-weight:700}.ef-ix{color:#999;font-weight:500;display:inline!important}
.ef-team{font-size:16px!important;font-weight:700}
.ef-sign td{height:40px}
.pg.efpage .print-head{display:none!important}
.ef table.ef-t th,.ef table.ef-t td{border:1px solid #7A1F2B!important;font-family:Arial,'IBM Plex Sans Arabic',sans-serif!important;letter-spacing:0!important;text-transform:none!important;font-size:13.5px}
.ef table.ef-t th{font-weight:700;color:#7A1F2B;background:#F4EFE7!important}
.ef table.ef-t{border:1px solid #7A1F2B}
.ef{direction:ltr;text-align:left}
.ef table.ef-t th .ef-ar{float:right;margin-left:10px}.ef-ix .ef-ar{margin-left:6px}

/* ---------- riders: status, filters, team IDs ---------- */
.st-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.st-chips .chip{padding:5px 11px;font-size:13px}
.st-chips .chip small{font-family:var(--mono);font-weight:600;opacity:.75;margin-inline-start:4px}
.st-chips .stc-wd:not(.on),.st-chips .stc-dq:not(.on){color:var(--danger)}
.st-chips .stc-dns:not(.on),.st-chips .stc-pay:not(.on),.st-chips .stc-pending:not(.on){color:var(--warn)}
.rst{display:flex;flex-wrap:wrap;gap:4px;min-width:0}
.rst select{min-width:0;flex:1 1 110px;font-weight:700}
.rst .rst-wd,.rst .rst-dq{background:var(--danger-soft);color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,var(--line))}
.rst .rst-dns,.rst .rst-pending{background:var(--warn-soft);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,var(--line))}
.rst .rst-day{flex:1 1 90px;font-weight:600}
.rrow.rs-wd .c-name input,.rrow.rs-dq .c-name input{text-decoration:line-through;color:var(--muted)}
.rrow.rs-wd,.rrow.rs-dq,.rrow.rs-dns{opacity:.82}
.team-code{width:84px!important;flex:none;font-family:var(--mono);font-size:12.5px!important}
.cm-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:14px;align-items:end}
.cm-ro{min-height:40px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:6px 10px;border-radius:10px;background:var(--surface-2);font-weight:700}
@media (max-width:640px){.cm-top{grid-template-columns:minmax(0,1fr)}}
tr.im-wd td{opacity:.7}
/* import: column matching */
.im-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:22px;align-items:start}
@media (max-width:900px){.im-grid{grid-template-columns:minmax(0,1fr)}}
.im-map{display:grid;grid-template-columns:150px minmax(0,1fr) 28px;gap:8px;align-items:center;margin-bottom:7px}
.im-l{font-weight:700;font-size:14px;line-height:1.15}
.im-map select{min-width:0;width:100%}
.im-b .pill{padding:3px 7px}
@media (max-width:520px){.im-map{grid-template-columns:minmax(0,1fr) 28px}.im-l{grid-column:1/-1}}
/* teams card: name on its own line, then Team ID · riders · delete */
.team-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"nm nm nm" "id cnt del";gap:4px 8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.team-row:last-of-type{border-bottom:0}
.team-row .team-nm{grid-area:nm;font-weight:700}
.team-row .team-id{grid-area:id;display:flex;align-items:center;gap:6px;min-width:0}
.team-row .team-id span{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
[dir=rtl] .team-row .team-id span{font-family:var(--font-ar);font-size:11.5px;letter-spacing:0}
.team-row .team-code{width:auto!important;flex:1;min-width:0;min-height:32px!important;padding:3px 8px!important}
.team-row .pill{grid-area:cnt}.team-row .btn{grid-area:del}
.rc.c-ent{min-width:0}
.rst select{flex:1 1 130px}
.rst .rst-day{flex:1 1 100%}
.tm-cdb.on{background:var(--warn-soft);color:var(--warn);border-color:var(--warn)}.tm-cdb.late{background:var(--danger-soft);color:var(--danger);border-color:var(--danger)}.tm-cdb .num{font-family:var(--mono);font-weight:600}
.so-st{display:flex;flex-wrap:wrap;gap:4px;min-width:0}.so-st .st-sel{min-width:0!important;flex:1 1 120px}
/* release notes */
.rn-card{margin-top:14px}
.rn{border-top:1px solid var(--line);padding:10px 0}
.rn:first-of-type{border-top:0}
.rn summary{cursor:pointer;display:flex;align-items:center;gap:10px;font-size:16px}
.rn summary .muted{margin-inline-start:auto}
.rn ul,.rn-list{margin:8px 0 0;padding-inline-start:20px;display:flex;flex-direction:column;gap:6px;font-weight:500;line-height:1.45}
[dir=rtl] .rn ul,[dir=rtl] .rn-list{font-weight:500}
/* help window */
.help-btn{color:var(--acc-t)}
.hp-nav{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.hp-nav .chip{padding:4px 10px;font-size:12.5px}
.hp-steps{margin:0;padding-inline-start:22px;display:flex;flex-direction:column;gap:8px;font-weight:500;line-height:1.45}
.hp-steps li::marker{color:var(--acc-t);font-family:var(--mono);font-weight:600}
.hp-h{margin:16px 0 8px}
.hp-tips{margin:0;padding-inline-start:20px;display:flex;flex-direction:column;gap:6px;font-weight:500;line-height:1.45;color:var(--muted)}
.hp-keys{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:6px 14px}
.hp-keys div{display:flex;align-items:center;gap:10px;min-width:0}
.hp-keys span{font-weight:500;font-size:14px;min-width:0}
kbd{font-family:var(--mono);font-size:11.5px;font-weight:600;padding:3px 7px;border-radius:6px;border:1px solid var(--line);border-bottom-width:2px;background:var(--surface-2);color:var(--text);white-space:nowrap;direction:ltr}
/* icons in headings always sit inline at text size (the Timing "Keyboard shortcuts" icon rendered page-wide) */
h1>svg,h2>svg,h3>svg,.card>h2 svg{width:1em;height:1em;flex:none;vertical-align:-.14em;margin-inline-end:6px}

/* =========================================================================
   COMPACT LAYOUTS – less scrolling, same design
   ========================================================================= */
/* score entry: each run = 2 lines (label + fault/net · points, time, timer, flag) */
.srow{padding:8px 12px;gap:10px}
@media (min-width:1251px){.srow{grid-template-columns:110px minmax(140px,200px) minmax(0,1fr) 128px}}
.srow .runbox{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h m" "c c";gap:4px 8px;align-items:center;padding:6px 8px}
.srow .rb-h{grid-area:h;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srow .runbox>.meta{grid-area:m;gap:8px;justify-content:flex-end;font-size:11.5px}
.srow .runbox>.meta>span:first-child{display:none}
.srow .runcell{grid-area:c;flex-wrap:nowrap!important;align-items:center;gap:6px;min-width:0}
.srow .runcell .tg{flex-direction:row;align-items:center;min-width:0}
.srow .runcell .seg-lbl{display:none}
.srow .runcell .flag-sel{width:66px;max-width:66px;padding-inline:6px}
.srow .s-runs{gap:6px}
.srow .s-runs .runbox{flex:1 1 300px}
.srow .s-sum{gap:2px}
@media (max-width:1250px) and (min-width:1181px){.srow{grid-template-columns:96px minmax(120px,170px) minmax(0,1fr) 118px}}
.srow .s-sum{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px;align-content:center}
.srow .s-sum-r{display:flex;flex-direction:column;align-items:flex-start;gap:0;line-height:1.15}
.srow .s-sum-r>span:first-child{font-size:10px;color:var(--muted);font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
[dir=rtl] .srow .s-sum-r>span:first-child{font-family:var(--font-ar);letter-spacing:0;font-size:11px}
.srow .s-sum-r.tot{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between}
.srow .s-sum-r.tot .total{font-size:17px;padding:2px 10px}
.srow .adj-note:empty{display:none}
.srow .adj-note{grid-column:1/-1}
/* pair / team / relay cards: every run of a rider on one line */
.grow{padding:6px 6px;gap:10px;grid-template-columns:44px minmax(150px,220px) minmax(0,1fr) 70px}
.g-runs{gap:6px 10px;flex-wrap:wrap}
.g-runs .rb{flex:1 1 210px;min-width:0;max-width:300px}
.g-runs .runcell{flex-wrap:nowrap!important;gap:6px}
.g-runs .flag-sel.mini{width:62px;max-width:62px}
.group-card header{padding:10px 14px;row-gap:8px}
.gtimes .tg{min-width:0}
.gtimes .seg-lbl{white-space:nowrap}
.gtimes{gap:8px 14px}
.gtimes .tg{display:grid;grid-template-columns:auto auto;grid-template-areas:"l l" "t f";align-items:center;gap:2px 6px}
.gtimes .tg>.seg-lbl{grid-area:l;margin:0;text-align:start}
.gtimes .tg>.row:nth-of-type(1){grid-area:t;flex-wrap:nowrap}
.gtimes .tg>.row:nth-of-type(2){grid-area:f;flex-wrap:nowrap}
.gtimes .flag-sel.mini{width:58px;max-width:58px}
.gtimes .lim:empty{display:none}
/* wide screens: use the width */
@media (min-width:1600px){.content{max-width:1840px}}
@media (min-width:1760px){#scoreBody:has(.pair-card){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}#scoreBody:has(.pair-card) .group-card{margin:0}}
/* settings: the rule-set card spans the page, its fields in columns */
.rs-card{grid-column:1/-1}
.rs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:0 18px;align-items:end}
.rs-grid>p,.rs-grid>.grid,.rs-grid>.row{grid-column:1/-1}
/* rules & runs: competitions as tiles, several per row */
.ev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:12px;margin-top:6px}
.ev-blk{border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-width:0}
.ev-blk>.row:first-child{gap:6px}
.ev-blk .runbox{min-width:0!important;flex:1 1 170px;padding:8px}
.ev-blk .runbox input[type=number]{width:100%!important}
.ev-blk .runbox>.row{gap:8px}
@media (max-width:520px){.ev-grid{grid-template-columns:minmax(0,1fr)}}
.ev-blk .runbox{flex:1 1 140px}
.ev-blk .runbox>.row{flex-wrap:nowrap!important}
.ev-blk .runbox>.row>div{flex:1 1 0;min-width:0}
.ev-blk .runbox label.f{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9.5px}

/* print station: the screen is the workspace – three panes, each scrolls on its own, the page does not */
@media (min-width:1251px){
  .ps2-grid{height:calc(100vh - 196px);min-height:520px;align-items:stretch;grid-template-columns:190px minmax(320px,400px) minmax(0,1fr)}
  .prail{position:static;overflow:auto;min-height:0}
  .plist{overflow:auto;min-height:0;display:flex;flex-direction:column}
  .plist .psearch{position:sticky;top:-12px;z-index:2;background:var(--surface);flex:none}
  .ppreview{position:static;display:flex;flex-direction:column;min-height:0}
  .ppreview>.ps-bar{flex:none}
  .ppreview>.ps-scroll,.ppreview>.pempty{flex:1 1 auto;min-height:0;max-height:none;overflow:auto}
}
.pdoc{padding:6px 10px;align-items:center}
.pdoc-day{margin-top:8px}
.prail-b{min-height:0}
/* riders: teams + categories side by side on top, the riders list gets the full width (one line per rider) */
@media (max-width:1799px){
  #compGrid{grid-template-columns:minmax(0,1fr)!important}
  #compGrid>div:first-child{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;align-items:start}
}
#compGrid>div:first-child .card{margin:0}
.team-list{max-height:330px;overflow:auto;margin:0 -6px;padding:0 6px}
.team-list{container-type:inline-size}
@container (min-width:460px){.team-row{grid-template-columns:minmax(0,1fr) 170px auto auto;grid-template-areas:"nm id cnt del";padding:5px 0}}
.det-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 14px}
.about-own{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);font-size:11.5px;color:var(--faint)}
.about-own span{font-family:var(--mono);letter-spacing:.14em;font-size:10px}
.link-btn{border:0;background:none;padding:0;color:var(--acc-t);cursor:pointer;font:inherit;text-decoration:underline;text-underline-offset:2px}
.pv p{margin:0 0 10px;font-weight:500;line-height:1.55}
.about-own{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);font-size:11.5px;color:var(--faint)}
.about-own span{font-family:var(--mono);letter-spacing:.14em;font-size:10px}
.link-btn{border:0;background:none;padding:0;color:var(--acc-t);cursor:pointer;font:inherit;text-decoration:underline;text-underline-offset:2px}
.pv p{margin:0 0 10px;font-weight:500;line-height:1.55}
/* setup checklist: the step to do now stands out */
.cl-bar{height:4px;border-radius:2px;background:var(--surface-2);overflow:hidden;margin:4px 0 6px}.cl-bar i{display:block;height:100%;background:var(--ok)}
.step.done b{color:var(--muted)}
.step.next{background:var(--primary-soft);border-radius:10px;padding-inline:10px;margin-inline:-10px;border-bottom-color:transparent;box-shadow:inset 3px 0 0 var(--acc)}
[dir=rtl] .step.next{box-shadow:inset -3px 0 0 var(--acc)}
.next-tag{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#0C1015;background:var(--acc);border-radius:4px;padding:2px 6px;vertical-align:2px;animation:tp-pulse 2s infinite}
[dir=rtl] .next-tag{font-family:var(--font-ar);letter-spacing:0;font-size:11px}
@media (prefers-reduced-motion:reduce){.next-tag{animation:none}}

/* =========================================================================
   PRINTED DOCUMENTS – readable for any age
   Body text & tables: IBM Plex Sans (latin + arabic, very legible); titles & brand: Rajdhani
   ========================================================================= */
.pg,[dir=rtl] .pg{font-family:'IBM Plex Sans Arabic',Arial,sans-serif;font-weight:500;font-size:calc(13.5px * var(--pf,1));line-height:1.4;color:#0C1015}
.pg .ptitle,.pg .print-head h1,.pg .ctitle,.pg .cname,.pg .cplace,.pg .cscope,.pg .fm-title,.bb-mark b{font-family:'Rajdhani','IBM Plex Sans Arabic',sans-serif}
[dir=rtl] .pg .ptitle,[dir=rtl] .pg .print-head h1,[dir=rtl] .pg .ctitle,[dir=rtl] .pg .fm-title{font-family:'IBM Plex Sans Arabic',sans-serif}
.pg .ptitle{font-size:calc(21px * var(--pf,1))}
.pg .print-head h1{font-size:calc(19px * var(--pf,1))!important}
.pg .hd-sub,.pg .club-line{font-size:calc(12.5px * var(--pf,1))}
.ptable th,.sheet th{font-size:calc(12px * var(--pf,1));font-weight:700;color:#0C1015}
.ptable td,.sheet td{font-size:calc(13.5px * var(--pf,1));padding:6px 8px;color:#0C1015}
.pg td.n,.pg .total{font-family:'IBM Plex Mono',monospace;font-weight:600}
.pg.dense .ptable th,.pg.dense .ptable td,.pg.dense .sheet th,.pg.dense .sheet td{font-size:calc(11.5px * var(--pf,1));padding:4px 5px}
.pg.dense .rank-badge{font-size:11.5px}
.pg .fm-l,.pg .fm-sig,.pg .fm-stamp{font-size:calc(12px * var(--pf,1));color:#333}
.pg .fm-sub{font-size:calc(11.5px * var(--pf,1))}
.pg .fm-opt{font-size:calc(13px * var(--pf,1))}
.pg .fm-sec{font-size:calc(14px * var(--pf,1))}
.pg .fm-decl{font-size:calc(12.5px * var(--pf,1))}
.pg .muted{color:#4a524a}
.pg .bb-champ{font-size:11px}
.pg .fm-entry th{font-size:calc(11px * var(--pf,1));padding:4px 6px;line-height:1.25}
.pg .fm-entry th{font-size:11px}
/* stats: the tile that needs action comes first, in orange */
.stat.attn{cursor:pointer;background:var(--warn-soft);box-shadow:inset 0 0 0 1.5px var(--warn)}
.stat.attn .stat-l,.stat.attn .stat-num,.stat.attn .stat-s{color:var(--warn)}
.stat.attn:hover{filter:brightness(.97)}
/* "what to do now" bar */
.guide{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;padding:10px 14px;border-radius:12px;background:var(--primary-soft);border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);color:var(--text)}
.guide-dot{width:9px;height:9px;border-radius:50%;background:var(--acc);flex:none;animation:tp-pulse 1.6s infinite}
.guide-t{flex:1 1 280px;font-weight:600;font-size:15px}
@media (prefers-reduced-motion:reduce){.guide-dot{animation:none}}
/* help centre */
.modal.hp-modal{width:min(1080px,100%)}
.hp{display:grid;grid-template-columns:230px minmax(0,1fr);gap:18px;min-height:min(62vh,620px)}
.hp-side{display:flex;flex-direction:column;gap:8px;min-width:0;border-inline-end:1px solid var(--line);padding-inline-end:14px}
.hp-q{min-height:38px!important}
.hp-side-l{display:flex;flex-direction:column;gap:1px;overflow:auto;max-height:58vh}
.hp-grp{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:10px 0 4px}
[dir=rtl] .hp-grp{font-family:var(--font-ar);letter-spacing:0;font-size:11.5px}
.hp-link{border:0;background:none;text-align:start;padding:7px 10px;border-radius:8px;cursor:pointer;font-weight:600;color:var(--text);font-size:14.5px}
.hp-link:hover{background:var(--surface-2)}.hp-link.on{background:var(--primary-soft);color:var(--acc-t);box-shadow:inset 3px 0 0 var(--acc)}
[dir=rtl] .hp-link.on{box-shadow:inset -3px 0 0 var(--acc)}
.hp-link.dim{opacity:.35}
.hp-main{min-width:0;overflow:auto;max-height:62vh;padding-inline-end:6px}
.hp-th{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap}
.hp-th h2{margin:0;font-size:22px}
.hp-p{font-size:15.5px;font-weight:500;color:var(--muted);margin:6px 0 4px;line-height:1.5}
.hp-steps,.hp-tips{font-size:15px}
.hp-steps.rules li{margin-bottom:2px}
.hp-gl{display:grid;gap:8px;margin:10px 0 0}
.hp-gl div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:10px;padding:8px 10px;border-radius:8px;background:var(--surface-2)}
.hp-gl dt{font-weight:700;color:var(--acc-t)}.hp-gl dd{margin:0;font-weight:500}
.hp-qa details{border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin-bottom:6px}
.hp-qa summary{cursor:pointer;font-weight:700}.hp-qa p{margin:6px 0 0;font-weight:500;line-height:1.5}
.hp-hr{border:0;border-top:1px solid var(--line);margin:18px 0}
.hp mark{background:var(--warn-soft);color:inherit;border-radius:3px;padding:0 2px}
.hp-own{margin-top:12px;font-size:11px;color:var(--faint);text-align:end}
@media (max-width:760px){.hp{grid-template-columns:minmax(0,1fr)}.hp-side{border:0;padding:0}.hp-side-l{flex-direction:row;flex-wrap:wrap;max-height:none}.hp-grp{display:none}.hp-link{padding:5px 9px;font-size:13px;border:1px solid var(--line)}.hp-main{max-height:none}.hp-gl div{grid-template-columns:minmax(0,1fr)}}
/* welcome */
.w-steps{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.w-steps li{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:10px;background:var(--surface-2);font-weight:600;font-size:15px}
.w-steps i{font-style:normal;flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--acc);color:#0C1015;font-family:var(--mono);font-weight:600}
/* side menu: hide (icon rail) / show */
@media (min-width:861px){
  body.nav-mini{--nav-w:68px}
  body.nav-mini .nav{align-items:center;padding:14px 8px}
  body.nav-mini .brand{padding:2px 0 14px}
  body.nav-mini .brand>div:last-child,body.nav-mini .nav button.item span,body.nav-mini .nav .badge,body.nav-mini .nav .ver{display:none}
  body.nav-mini .nav button.item{width:44px;justify-content:center;padding:0}
  body.nav-mini .nav button.item.active::before{inset-inline-start:-8px}
}
.app{transition:grid-template-columns .2s ease}
@media (max-width:860px){.nav-tg{display:none}}
.srow .runcell .tg:first-child,.srow .runcell .seg,.g-runs .runcell .seg{flex:none}
.srow .runcell .time-input{width:68px!important}
.srow .runcell .flag-sel{width:56px;max-width:56px}
.srow .runcell .tm-tgt{flex:none}
.tm-side{min-width:0}.tm-side>.card{min-width:0;max-width:100%;overflow:hidden}.tm-side .row{flex-wrap:wrap;min-width:0}.tm-ulist{min-width:0}
.tm-who{flex-wrap:wrap;min-width:0;row-gap:8px}.tm-who-t{min-width:0}.tm-who .tabs{max-width:100%}
@media (max-width:560px){.srow .runcell{flex-wrap:wrap!important;row-gap:6px}.srow .s-runs .runbox{flex-basis:100%;min-width:0}.srow .runbox{grid-template-columns:minmax(0,1fr)}.srow .runbox>.meta{justify-content:flex-start}.srow .runbox{grid-template-areas:"h" "m" "c"}}

/* phone: the EquineSuite mark in the top bar (the side menu with the logo is replaced by bottom tabs) */
.tb-logo{display:none;color:var(--text);flex:none}
.tb-logo svg{width:30px;height:30px;display:block}
@media (max-width:860px){.tb-logo{display:inline-flex;align-items:center}}
@media (max-width:860px){
  .topbar{flex-wrap:wrap;gap:8px;padding:8px 12px}
  .topbar .champ-switch{flex:1 1 0!important;min-width:0;max-width:none}
  .topbar .tb-logo{order:-2}.topbar .champ-switch{order:-1}
  .topbar>*:not(.tb-logo):not(.champ-switch){flex:none}
  .topbar>span[style*="flex:1"]{display:none}
}
@media (max-width:860px){ .topbar .champ-switch{flex:1 1 calc(100% - 50px)!important} }
@media (max-width:860px){
  .topbar .cls-switch{flex:1 1 0!important;min-width:0;overflow:hidden}
  .topbar .cls-switch select,.topbar .cls-switch span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar>.btn:not(.icon-btn){padding:0 10px}
  .topbar .btn,.topbar .status{min-height:38px}
}
@media (max-width:860px){
  .topbar .cls-switch{order:1}.topbar [data-act=lang]{order:2}.topbar [data-act=theme]{order:3}.topbar .help-btn{order:4}.topbar .status{order:5}
}
/* menu hide / show: a tab on the menu's own edge (.nav is already position:sticky on desktop) */
.nav-collapse{position:absolute;top:22px;inset-inline-end:-13px;z-index:5;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--muted);display:grid;place-items:center;cursor:pointer;box-shadow:0 1px 3px rgba(12,16,21,.12);padding:0}
.nav-collapse svg{width:14px;height:14px}
.nav-collapse:hover{color:var(--acc-t);border-color:var(--acc)}
[dir=rtl] .nav-collapse svg{transform:scaleX(-1)}
@media (max-width:1180px) and (min-width:861px){.nav-collapse{display:none}}
@media (max-width:860px){.nav-collapse{display:none}}
/* phone header: one tidy row of equal controls under the event name */
@media (max-width:860px){
  .topbar{gap:6px;padding:8px 12px 10px}
  .topbar .champ-switch{height:48px}
  .topbar .cls-switch{height:38px}
  .topbar .btn,.topbar .status{height:38px;min-height:38px;border-radius:10px}
  .topbar .btn.icon-btn,.topbar .status{width:38px;padding:0;justify-content:center}
  .topbar [data-act=lang]{padding:0 10px;font-size:13px}
  .topbar .status{gap:0}.topbar .status .st-t,.topbar .status .st-f{display:none}
  .topbar .status i{margin:0}
}
.toast.has-act{display:flex;align-items:center;gap:14px;pointer-events:auto}
.toast-act{border:0;background:none;color:var(--acc);font:inherit;font-weight:800;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;padding:2px 4px}
.toasts{pointer-events:none}.toasts .toast{pointer-events:auto}
/* library: folders + hold-to-delete */
.lib-tabs button small{font-family:var(--mono);font-weight:600;opacity:.75;margin-inline-start:4px}
.lib-note{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0 0;padding:10px 14px;border-radius:12px;background:var(--surface-2);font-weight:500;font-size:14px}
.lib-note>span{flex:1 1 280px}
.champ-card.lib-deleted{opacity:.9;border-style:dashed}
.hold-btn{position:relative;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none}
.hold-btn .hold-fill{position:absolute;inset-block:0;inset-inline-start:0;width:0;background:var(--danger);opacity:.22;transition:width .05s linear;pointer-events:none}
.hold-btn span{position:relative;display:inline-flex;align-items:center;gap:6px}
.hold-btn.holding{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-soft)}
.hold-btn.holding::after{content:attr(data-left);position:relative;font-family:var(--mono);font-weight:700;margin-inline-start:8px}
/* FDS channel test */
.ch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.ch-tile{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface);transition:background .3s,border-color .3s}
.ch-tile .ch-h{display:flex;align-items:center;justify-content:space-between;gap:6px}
.ch-tile .ch-h b{font-family:var(--mono);font-size:16px}
.ch-tile .ch-n{font-size:28px;font-weight:600;line-height:1.1;margin-top:4px}
.ch-tile.seen{border-color:var(--ok)}
.ch-tile.is-start,.ch-tile.is-finish{box-shadow:inset 3px 0 0 var(--acc)}
@keyframes chflash{0%{background:var(--ok-soft);transform:scale(1.03)}100%{background:var(--surface);transform:none}}
.ch-tile.flash{animation:chflash .9s ease-out}
.ch-test-card{grid-column:1/-1}

/* =========================================================================
   DISPLAY page + the audience screen
   ========================================================================= */
.dsp-state{margin-bottom:14px}
.dsp-screens{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px}
.dsp-screens .btn.on{border-color:var(--acc);background:var(--primary-soft);color:var(--acc-t)}
.dsp-screens small{opacity:.7;font-family:var(--mono);font-size:10.5px}
.dsp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:14px;align-items:start}
@media (max-width:1100px){.dsp-grid{grid-template-columns:minmax(0,1fr)}}
.dsp-modes{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.dsp-mode{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:start;padding:12px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;color:var(--text);min-width:0}
.dsp-mode svg{width:22px;height:22px;color:var(--muted)}
.dsp-mode b{font-size:15px}.dsp-mode span{font-size:12.5px;color:var(--muted);font-weight:500;line-height:1.35}
.dsp-mode:hover{border-color:color-mix(in srgb,var(--acc) 50%,var(--line))}
.dsp-mode.on{border-color:var(--acc);background:var(--primary-soft);box-shadow:inset 0 0 0 1px var(--acc)}
.dsp-mode.on svg,.dsp-mode.on b{color:var(--acc-t)}
.dsp-form{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0 12px;align-items:end}
.dsp-form .pchk{grid-column:1/-1}
.dsp-prev-card{position:sticky;top:76px}
.dsp-prev-wrap{position:relative;width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#0C1015}
.dsp-prev-scale{position:absolute;top:0;left:0;width:1600px;height:900px;transform-origin:top left;transform:scale(var(--pvs,.4));pointer-events:none}
[dir=rtl] .dsp-prev-scale{left:auto;right:0;transform-origin:top right}
.dsp-clock-prev{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#F2F4F0;gap:12px}
.dsp-clock-prev .num{font-family:var(--mono);font-size:220px;font-weight:600;line-height:1}
.dsp-clock-prev small{font-size:44px;color:#8A9086}
.dsp-net{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.dsp-net b{display:inline-flex;align-items:center;gap:6px}.dsp-net svg{width:16px;height:16px}
/* the audience screen */
.out-board{min-height:100vh;padding:28px 34px;box-sizing:border-box;background:var(--bg);color:var(--text);display:flex;flex-direction:column;gap:18px;font-size:calc(16px * var(--ds-size,1.15))}
#outPrev.out-board{min-height:900px;height:900px;overflow:hidden;font-size:calc(16px * 1.15)}
.out-head{display:flex;align-items:center;gap:16px}
.out-head .tp-mark{width:58px;height:58px;color:var(--text)}
.out-head b{display:block;font-size:2em;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1}
.out-head span{display:block;color:var(--muted);font-size:1em;margin-top:4px}
.out-grid{display:grid;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr));flex:1}
.out-grid.out-ind,.out-grid.out-teams{grid-template-columns:minmax(0,1fr)}
.out-grid.with-feed{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.8fr)}
.out-grid.out-ind.with-feed,.out-grid.out-teams.with-feed{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.out-card h2{font-size:1.25em}
.out-board .lv-row{font-size:1.15em}
.out-board .statsbar.big .stat-v{font-size:1.9em}
.out-foot{font-family:var(--mono);font-size:.7em;letter-spacing:.24em;color:var(--faint);text-align:center}
.out-frame{border:0;width:100%;flex:1;min-height:calc(100vh - 56px);background:#0C1015}
.mode-clock.out-board{padding:0}
.out-msg,.out-logo{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px}
.out-msg-t{font-size:4.2em;font-weight:700;line-height:1.1;max-width:90%}
.out-msg-s{font-size:2em;color:var(--muted);max-width:90%}
.out-mark .tp-mark{width:180px;height:180px;color:var(--text)}
.out-logos{display:flex;gap:40px;align-items:center;justify-content:center;flex-wrap:wrap}.out-logos img{max-height:180px;max-width:320px;object-fit:contain}
.out-table{width:100%;border-collapse:collapse;font-size:1.15em}
.out-table th{font-size:.7em}.out-table td{padding:10px 12px}
.out-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.out-list li{display:flex;align-items:center;gap:16px;padding:12px 16px;border-radius:12px;background:var(--surface-2);font-size:1.3em}
.out-list li.on{background:var(--acc);color:#0C1015}
.out-list li.on small{color:#0C1015;opacity:.75}
.out-pos{font-family:var(--mono);font-weight:600;min-width:2ch;opacity:.7}
.out-no{font-family:var(--mono);font-weight:600;min-width:3ch;padding:2px 10px;border-radius:8px;background:var(--surface);color:var(--text)}
.out-nm b{display:block}.out-nm small{display:block;color:var(--muted);font-size:.7em}
body.display-out .nav,body.display-out .topbar,body.display-out #exitBoard,body.display-out .guide,body.display-out .toasts{display:none!important}
body.display-out .content{padding:0;max-width:none}
body.display-out .app{display:block}
/* the menu (and its hide/show tab on the edge) sits above the sticky top bar */
@media (min-width:861px){ .nav{z-index:30} .nav-collapse{z-index:31;top:16px;width:28px;height:28px;inset-inline-end:-14px;background:var(--surface);box-shadow:0 2px 6px rgba(12,16,21,.14)} }

/* preview box of the audience screen uses its own look */
.out-board[data-theme="dark"]{
  --bg:#0C1015; --rail:#0A0D11; --surface:#141920; --surface-2:#1C2229; --line:#272E36; --text:#F2F4F0; --muted:#8A9086; --faint:#5E645B;
  --acc:#FF7A45; --acc-t:#FF8F5E; --primary:#FF7A45; --primary-ink:#0C1015; --primary-soft:rgba(255,122,69,.14);
  --accent:#FF8F5E; --accent-soft:rgba(255,122,69,.14);
  --danger:#FF6B70; --danger-soft:rgba(255,90,95,.14); --danger-bg:rgba(255,90,95,.14); --ok:#5BE09A; --ok-soft:rgba(76,211,138,.15);
  --warn:#F5B841; --warn-soft:rgba(245,184,65,.16); --warn-bg:rgba(245,184,65,.16); --info:#6FB2FF; --info-soft:rgba(79,157,255,.15);
  --shadow:0 1px 0 rgba(0,0,0,.2); --shadow-2:0 8px 24px rgba(0,0,0,.4); --shadow-3:0 24px 60px rgba(0,0,0,.5);
  
}
.out-board[data-theme="light"]{
  --bg:#F2F4F0; --rail:#FFFFFF; --surface:#FFFFFF; --surface-2:#F1F3EF; --line:#DDE1DA; --text:#0C1015; --muted:#5E645B; --faint:#8A9086;
  --acc:#FF7A45; --acc-t:#B8461A; --primary:#FF7A45; --primary-ink:#0C1015; --primary-soft:rgba(255,122,69,.13);
  --accent:#B8461A; --accent-soft:rgba(255,122,69,.13);
  --danger:#D2373D; --danger-soft:rgba(229,72,77,.11); --danger-bg:rgba(229,72,77,.11); --ok:#1E8E55; --ok-soft:rgba(47,191,119,.14);
  --warn:#A86A00; --warn-soft:rgba(245,184,65,.2); --warn-bg:rgba(245,184,65,.2); --info:#2D6FD0; --info-soft:rgba(79,157,255,.13);
  --shadow:0 1px 0 rgba(12,16,21,.03); --shadow-2:0 8px 24px rgba(12,16,21,.10); --shadow-3:0 24px 60px rgba(12,16,21,.18);
  --radius:14px; --nav-w:224px;
  --font:'Rajdhani','IBM Plex Sans Arabic',-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --font-ar:'IBM Plex Sans Arabic','Rajdhani',Tahoma,Arial,sans-serif;
  
}
/* event countdown screen */
.out-cd{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:22px}
.out-cd-brand{display:flex;align-items:center;gap:18px}
.out-cd-brand .tp-mark{width:96px;height:96px;color:var(--text)}
.out-cd-brand span{display:block;font-family:var(--mono);font-size:1em;letter-spacing:.3em;color:var(--muted);text-align:start}
.out-cd-brand b{display:block;font-size:2.4em;letter-spacing:.1em;line-height:1;text-align:start}
.out-logos.small img{max-height:90px}
.out-cd-title{font-size:2.6em;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
[dir=rtl] .out-cd-title{text-transform:none;letter-spacing:0}
.out-cd-time{font-family:var(--mono);font-size:11em;font-weight:600;line-height:1;color:var(--acc);direction:ltr}
.out-cd.paused .out-cd-time{opacity:.75}
.out-cd.done .out-cd-time{animation:tp-pulse 1s infinite}
.out-cd-sub{font-size:1.6em;color:var(--muted)}
.dsp-cd-ctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px}
.dsp-cd-now{font-family:var(--mono);font-size:28px;font-weight:600;min-width:120px}
/* audience screen: text scales with the screen width (readable from across the arena) × the Text size setting */
.out-board{font-size:calc(clamp(18px, 1.2vw, 46px) * var(--ds-size,1));padding:1.8vw 2.2vw;gap:.9em}
#outPrev.out-board{font-size:calc(19.2px * var(--ds-size,1));padding:28px 36px}
.out-board .card{padding:.9em 1.1em;border-radius:.8em}
.out-board .out-card h2{font-size:1.15em;margin-bottom:.6em}
.out-board .lv-list{gap:.35em}
.out-board .lv-row{font-size:1em;padding:.45em .6em;gap:.7em}
.out-board .lv-row .rank-badge{min-width:1.9em;height:1.9em;font-size:.95em}
.out-board .lv-n b{font-size:1.15em}
.out-board .lv-n small{font-size:.75em}
.out-board .lv-t{font-size:1.5em;min-width:3em}
.out-board .lv-g{font-size:.8em}
.out-board .statsbar.big .stat{padding:.6em .9em}
.out-board .stat-l{font-size:.75em}
.out-board .statsbar.big .stat-v{font-size:1.6em}
.out-board .stat-s{font-size:.7em}
.out-board .feed li{font-size:.85em}
.out-board .out-table{font-size:1em}.out-board .out-table td{padding:.5em .6em}.out-board .out-table th{font-size:.65em}
.out-head .tp-mark{width:2.6em;height:2.6em}
.out-cd-time{font-size:10em}
body.display-out .out-board{height:100vh;overflow:hidden}
#outPrev.out-board{overflow:hidden}
.out-grid{min-height:0}.out-grid>.card{min-height:0;overflow:hidden}
/* audience screen: 4 key tiles in one row (leader, top team, progress, fastest run) */
.out-board .statsbar{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));flex:none}
.out-board .statsbar .stat:nth-child(n+5),.out-board .statsbar .stat.attn{display:none}
.out-board .statsbar .stat{flex:none}
.out-board .out-grid{flex:1 1 0;min-height:0}
.out-board .out-grid>.card{display:flex;flex-direction:column}
/* settings tabs: even grid on narrow screens (no orphan tab on its own line) */
@media (max-width:640px){.set-tabs{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.set-tabs button{text-align:center;white-space:normal}}
.rules-head>span{flex:1 1 280px}
@media (max-width:640px){
  .rules-head>span{order:5;flex-basis:100%}
  .day-head{gap:8px}.day-head>h2{flex:1 1 100%!important}.day-head>select{flex:1 1 100%;max-width:none!important}
  .day-head>.btn{flex:1 1 auto}
  .ev-blk>.row:first-child>b{flex:1 1 100%!important}
}
.ch-grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
.pchk{align-items:flex-start}.pchk input{margin-top:3px;flex:none}

/* timing pulse log & runs: card rows up to 1100px (many columns) */
@media (max-width:1100px){
  #tmLog .tbl-wrap.rsp,#tmRuns .tbl-wrap.rsp{overflow:visible;border:0;background:none}
  #tmLog .tbl-wrap.rsp table,#tmRuns .tbl-wrap.rsp table,#tmLog .tbl-wrap.rsp tbody,#tmRuns .tbl-wrap.rsp tbody{display:block;width:100%}
  #tmLog .tbl-wrap.rsp thead,#tmRuns .tbl-wrap.rsp thead{display:none}
  #tmLog .tbl-wrap.rsp tbody tr,#tmRuns .tbl-wrap.rsp tbody tr{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px 12px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:8px}
  #tmLog .tbl-wrap.rsp tbody tr.sep,#tmRuns .tbl-wrap.rsp tbody tr.sep{display:block;padding:8px 12px;background:var(--surface-2)}
  #tmLog .tbl-wrap.rsp td,#tmRuns .tbl-wrap.rsp td{display:flex;flex-direction:column;gap:2px;border:0;padding:0;min-width:0;text-align:start!important;background:none!important;overflow-wrap:anywhere}
  #tmLog .tbl-wrap.rsp td::before,#tmRuns .tbl-wrap.rsp td::before{content:attr(data-l);font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  [dir=rtl] #tmLog .tbl-wrap.rsp td::before,[dir=rtl] #tmRuns .tbl-wrap.rsp td::before{font-family:var(--font-ar);font-size:11px;letter-spacing:0}
  #tmLog .tbl-wrap.rsp td[data-l=""]::before,#tmRuns .tbl-wrap.rsp td[data-l=""]::before{display:none}
  #tmLog .tbl-wrap.rsp td.wcol,#tmRuns .tbl-wrap.rsp td.wcol{grid-column:span 2}
  #tmLog .tbl-wrap.rsp td.total,#tmRuns .tbl-wrap.rsp td.total{align-items:flex-start;font-size:20px}
  #tmLog .tbl-wrap.rsp td input,#tmRuns .tbl-wrap.rsp td input,#tmLog .tbl-wrap.rsp td select,#tmRuns .tbl-wrap.rsp td select{width:100%!important;min-width:0}
  #tmLog .tbl-wrap.rsp tbody tr:hover td,#tmRuns .tbl-wrap.rsp tbody tr:hover td{background:none}
  #tmLog .tbl-wrap.rsp tr.u-over,#tmRuns .tbl-wrap.rsp tr.u-over{box-shadow:0 -3px 0 var(--acc)}
  #tmLog .tbl-wrap.rsp tbody tr,#tmRuns .tbl-wrap.rsp tbody tr{grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:6px 10px;padding:10px 12px}
  #tmLog .tbl-wrap.rsp td,#tmRuns .tbl-wrap.rsp td{align-items:flex-start}
  #tmLog .tbl-wrap.rsp td.ecell,#tmRuns .tbl-wrap.rsp td.ecell{display:none}
  #tmLog .tbl-wrap.rsp td .rank-badge,#tmRuns .tbl-wrap.rsp td .rank-badge{min-width:30px;height:28px}
  #tmLog .tbl-wrap.rsp td.total,#tmRuns .tbl-wrap.rsp td.total{font-size:18px}
}