/* Dunstan Index, scoretavla för monterskärm.
 *
 * Medvetet enbart mörkt läge: den står på en TV i en ljus mässhall.
 * Alla storlekar räknas från --u, som är den minsta av 1vw och 1.78vh. Det gör
 * att tavlan fyller skärmen men aldrig spräcker höjden, oavsett upplösning
 * eller om TV:n hängs liggande eller stående.
 */

#dunstan-board{
  --ground:#06302b; --panel:#0c3b34; --panel-2:#0e4a41; --brand:#093b35;
  --track:#0a332d;
  --gold:#f3b51b; --silver:#c2d3cc; --bronze:#d3803f;
  --ink:#f4f8f3; --ink-2:#a9c4bc; --ink-3:#7d9d94;
  --line:rgba(226,240,217,.12);
  --sans:"Poppins",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --u:max(9px, min(1vw, 1.78vh));

  box-sizing:border-box;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:calc(var(--u)*.8);line-height:1.25;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  padding:calc(var(--u)*1.5) max(16px,calc(var(--u)*1.7));
  display:grid;gap:calc(var(--u)*.95);
  grid-template-rows:auto minmax(0,1fr) auto auto;
}
#dunstan-board *,#dunstan-board *::before,#dunstan-board *::after{box-sizing:border-box}
#dunstan-board .num{font-variant-numeric:tabular-nums}
#dunstan-board .eyebrow{font-size:calc(var(--u)*.62);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;margin:0}

/* header */
#dunstan-board .top{display:flex;align-items:center;gap:calc(var(--u)*1.3);flex-wrap:wrap}
#dunstan-board .wordmark{flex:none;display:flex;align-items:center;color:var(--ink)}
#dunstan-board .wordmark svg{height:calc(var(--u)*2);width:auto;display:block}
#dunstan-board .vr{width:1px;align-self:stretch;background:var(--line);flex:none}
#dunstan-board .event{font-size:calc(var(--u)*.72);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-2);font-weight:600;flex:1;min-width:0}
#dunstan-board .live{display:flex;align-items:center;gap:.6em;font-size:calc(var(--u)*.68);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);font-weight:700;
  border:1px solid rgba(243,181,27,.55);border-radius:999px;padding:.45em 1.1em .45em .85em;flex:none}
#dunstan-board .live.off{border-color:rgba(211,128,63,.6);color:var(--bronze)}
#dunstan-board .dot{width:.55em;height:.55em;border-radius:50%;background:var(--gold);flex:none;
  animation:dbpulse 2.6s ease-out infinite}
#dunstan-board .live.off .dot{background:var(--bronze);animation:none}
@keyframes dbpulse{0%{box-shadow:0 0 0 0 rgba(243,181,27,.5)}70%{box-shadow:0 0 0 .9em rgba(243,181,27,0)}100%{box-shadow:0 0 0 0 rgba(243,181,27,0)}}
#dunstan-board .tid{text-align:right;flex:none}
#dunstan-board .clock{font-size:calc(var(--u)*2.05);font-weight:700;line-height:1;letter-spacing:-.01em}
#dunstan-board .fresh{font-size:calc(var(--u)*.6);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;margin-top:.25em}

/* kort */
#dunstan-board .row2{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
  gap:calc(var(--u)*.95);min-height:0}
#dunstan-board .card{background:var(--panel);border-radius:calc(var(--u)*1.05);
  padding:calc(var(--u)*1.35) calc(var(--u)*1.5);min-width:0;min-height:0;
  display:flex;flex-direction:column;overflow:hidden}

#dunstan-board .sum{justify-content:space-between}
#dunstan-board .heronum{font-size:calc(var(--u)*4.6);font-weight:700;line-height:.85;letter-spacing:-.04em;margin:.12em 0 0}
#dunstan-board .herolab{font-size:calc(var(--u)*1.2);font-weight:700;margin:.35em 0 0}
#dunstan-board .split{margin-top:calc(var(--u)*1.1);display:flex;flex-direction:column;gap:.3em}
#dunstan-board .split div{font-size:calc(var(--u)*.85);color:var(--ink-3);font-weight:500}
#dunstan-board .split b{color:var(--ink);font-weight:600;margin-right:.45em}
#dunstan-board .rule{height:1px;background:var(--line);margin:calc(var(--u)*1.1) 0}
#dunstan-board .stats{display:flex;gap:calc(var(--u)*2.2)}
#dunstan-board .stat-n{font-size:calc(var(--u)*1.95);font-weight:700;line-height:1}
#dunstan-board .stat-l{font-size:calc(var(--u)*.6);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;margin-top:.35em}

#dunstan-board .hi-top{display:flex;align-items:flex-start;justify-content:space-between;
  gap:calc(var(--u)*1.2);flex:none}
#dunstan-board .hi-h{font-size:calc(var(--u)*1.9);font-weight:600;line-height:1.1;margin:.15em 0 0;letter-spacing:-.015em}
#dunstan-board .hi-sub{font-size:calc(var(--u)*.82);color:var(--ink-3);margin:.5em 0 0}
#dunstan-board .hi-antal{text-align:right;flex:none}
#dunstan-board .hi-antal .n{font-size:calc(var(--u)*2);font-weight:700;line-height:1}
#dunstan-board .hi-antal .l{font-size:calc(var(--u)*.68);color:var(--ink-3);font-weight:500}

#dunstan-board .tiers{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  justify-content:space-around;gap:calc(var(--u)*.5);padding-top:calc(var(--u)*1)}
#dunstan-board .tier{display:grid;grid-template-columns:1fr auto;align-items:baseline;
  column-gap:calc(var(--u)*1.2);row-gap:calc(var(--u)*.55)}
#dunstan-board .t-name{display:flex;align-items:baseline;gap:calc(var(--u)*.75);min-width:0}
#dunstan-board .t-lvl{font-size:calc(var(--u)*.66);letter-spacing:.2em;text-transform:uppercase;font-weight:700;flex:none}
#dunstan-board .t-lvl.g{color:var(--gold)}
#dunstan-board .t-lvl.s{color:var(--silver)}
#dunstan-board .t-lvl.b{color:var(--bronze)}
#dunstan-board .t-typ{font-size:calc(var(--u)*1.08);font-weight:600;color:var(--ink);line-height:1.2}
#dunstan-board .t-fig{display:flex;align-items:baseline;gap:.5em;flex:none;white-space:nowrap}
#dunstan-board .t-pct{font-size:calc(var(--u)*1.7);font-weight:700;line-height:1}
#dunstan-board .t-antal{font-size:calc(var(--u)*.78);color:var(--ink-3);font-weight:500}
#dunstan-board .track{grid-column:1/3;height:calc(var(--u)*.52);background:var(--track);
  border-radius:999px;overflow:hidden}
#dunstan-board .fill{height:100%;border-radius:999px;transition:width .7s cubic-bezier(.2,.7,.3,1)}
#dunstan-board .fill.g{background:var(--gold)}
#dunstan-board .fill.s{background:var(--silver)}
#dunstan-board .fill.b{background:var(--bronze)}

/* Rad tre: QR till vänster i samma spalt som sammanfattningen,
   hästgårdsindex till höger i samma spalt som Hästindex. */
#dunstan-board .row3{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
  gap:calc(var(--u)*.95);align-items:stretch}

/* gårdsindex, kompakt eftersom gruppen är mindre */
#dunstan-board .gard{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:calc(var(--u)*1.6);align-items:center}
#dunstan-board .gard-h{font-size:calc(var(--u)*1.6);font-weight:600;margin:.2em 0 0;letter-spacing:-.01em}
#dunstan-board .gard-sub{font-size:calc(var(--u)*.82);color:var(--ink-3);margin:.45em 0 0}
#dunstan-board .gard-rows{display:flex;flex-direction:column;gap:calc(var(--u)*1.15)}
#dunstan-board .grow{display:grid;grid-template-columns:calc(var(--u)*4.2) minmax(0,1fr) auto;
  align-items:center;gap:calc(var(--u)*1)}
#dunstan-board .grow .t-lvl{font-size:calc(var(--u)*.66)}
#dunstan-board .grow .track{grid-column:auto;height:calc(var(--u)*.56)}
#dunstan-board .grow .v{font-size:calc(var(--u)*.95);color:var(--ink-2);font-weight:600;
  white-space:nowrap;text-align:right}
#dunstan-board .grow .v b{color:var(--ink);font-weight:700}

/* cta. QR-koden är avsiktligt stor: den ska gå att skanna på ett par meters
   avstånd, utan att besökaren behöver ställa sig framför skärmen. */
#dunstan-board .cta{border:1px solid rgba(243,181,27,.5);border-radius:calc(var(--u)*1.05);
  padding:calc(var(--u)*1.1) calc(var(--u)*1.35);display:flex;align-items:center;
  justify-content:space-between;gap:calc(var(--u)*1.1);min-width:0}
#dunstan-board .cta-h{font-size:calc(var(--u)*1.35);font-weight:600;margin:.2em 0 0;
  letter-spacing:-.01em;line-height:1.15}
#dunstan-board .cta-sub{font-size:calc(var(--u)*.78);color:var(--ink-3);margin:.4em 0 0}
#dunstan-board .qr-wrap{flex:none;width:calc(var(--u)*12.4);display:flex;flex-direction:column;
  align-items:center;gap:calc(var(--u)*.6)}
#dunstan-board .qr{background:#fff;border-radius:calc(var(--u)*.5);padding:calc(var(--u)*.45);width:100%}
#dunstan-board .qr svg,#dunstan-board .qr img{display:block;width:100%;height:auto}
#dunstan-board .qr-lank{font-size:calc(var(--u)*1);font-weight:600;color:var(--gold);white-space:nowrap}

/* ticker */
#dunstan-board .ticker{background:var(--panel);border-radius:calc(var(--u)*1.05);
  display:flex;align-items:stretch;overflow:hidden;min-height:0}
#dunstan-board .t-lab{flex:none;display:flex;align-items:center;
  padding:calc(var(--u)*.95) calc(var(--u)*1.4);font-size:calc(var(--u)*.62);
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);font-weight:700;
  max-width:calc(var(--u)*9);border-right:1px solid var(--line)}
#dunstan-board .t-view{flex:1;min-width:0;overflow:hidden;display:flex;align-items:center;
  mask-image:linear-gradient(90deg,transparent,#000 2%,#000 97%,transparent)}
#dunstan-board .t-run{display:flex;width:max-content;animation:dbrun 52s linear infinite}
@keyframes dbrun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
#dunstan-board .t-item{padding:0 calc(var(--u)*1.6);border-right:1px solid var(--line);white-space:nowrap}
#dunstan-board .t-1{font-size:calc(var(--u)*1.05);font-weight:500}
#dunstan-board .t-1 b{font-weight:700;margin-left:.2em}
#dunstan-board .t-1 b.g{color:var(--gold)}
#dunstan-board .t-1 b.s{color:var(--silver)}
#dunstan-board .t-1 b.b{color:var(--bronze)}
#dunstan-board .t-2{font-size:calc(var(--u)*.62);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;margin-top:.3em}
#dunstan-board .t-tom{padding:0 calc(var(--u)*1.6);font-size:calc(var(--u)*.95);color:var(--ink-3)}

/* helskärm: tavlan läggs över temats meny och sidhuvud */
#dunstan-board.db-kiosk{position:fixed;inset:0;z-index:2147483000;min-height:0;height:100%;overflow:hidden}
html.db-kiosk-on,body.db-kiosk-on{overflow:hidden!important;margin:0!important;height:100%}
body.db-kiosk-on.db-kiosk-vila,body.db-kiosk-on.db-kiosk-vila *{cursor:none}
#dunstan-board .kiosk-knapp{position:fixed;right:18px;bottom:18px;z-index:10;
  background:rgba(9,59,53,.82);color:var(--ink-2);border:1px solid rgba(226,240,217,.26);
  border-radius:999px;padding:9px 16px;font-family:var(--sans);font-size:13px;font-weight:600;
  cursor:pointer;transition:opacity .4s}
#dunstan-board .kiosk-knapp:hover{color:var(--gold);border-color:var(--gold)}
#dunstan-board .kiosk-knapp:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
body.db-kiosk-vila #dunstan-board .kiosk-knapp{opacity:0;pointer-events:none}

@media (max-width:820px){
  #dunstan-board{min-height:0;grid-template-rows:none}
  #dunstan-board .row2,#dunstan-board .row3,#dunstan-board .gard{grid-template-columns:1fr}
  #dunstan-board .t-lab{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  #dunstan-board .t-run,#dunstan-board .dot{animation:none}
  #dunstan-board .fill{transition:none}
}