/* Big race-day looks for TrackedTips festival pages.
   <html data-look="roses|gold|silks|night"> switches the look; with no data-look the page is standard TrackedTips. */

/* ---------- shared: the race-day hero ---------- */
:root{--hfont:"Barlow Condensed",sans-serif}
.hero,.lookbar{display:none}
html[data-look] .topband{display:none}
html[data-look] .hero{display:block}
.hero{position:relative;overflow:hidden;color:#fff}
.hero-in{position:relative;z-index:1;display:grid;grid-template-columns:1fr 340px;gap:14px 24px;padding-top:28px;padding-bottom:16px}
@media(max-width:980px){.hero-in{grid-template-columns:1fr}}
.eyebrow{font:700 12.5px/1 "Barlow Condensed",sans-serif;letter-spacing:.24em;text-transform:uppercase;opacity:.85}
.hero h1{margin:12px 0 8px;font:800 60px/.95 var(--hfont);letter-spacing:.01em}
@media(max-width:600px){.hero h1{font-size:44px}}
.tagline{margin:0 0 18px;font-size:15px;opacity:.92;max-width:520px}
.hcount{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cd{min-width:64px;text-align:center;padding:9px 6px 7px;border-radius:4px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.18)}
.cd b{display:block;font:800 32px/1 var(--hfont)}
.cd span{font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;opacity:.8}
.cdt{font-size:13px;margin-left:8px;line-height:1.4;opacity:.92}
.cdt b{font-weight:700}
.clocks{display:none}
.hero-pick{background:var(--panel);color:var(--ink);border-radius:6px;padding:14px;box-shadow:0 10px 30px rgba(0,0,0,.28);align-self:start;border-top:4px solid var(--gold)}
.hp-l{font:700 12.5px/1 "Barlow Condensed",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.hp-n{display:flex;align-items:center;gap:10px;margin:10px 0 6px}
.hp-n img.silk{width:54px;height:54px}
.hp-n button.hl{font:800 25px/1.05 var(--hfont);color:var(--brand2)}
.hp-d{font-size:12.5px;color:var(--mute)}
.hp-p{display:flex;justify-content:space-between;align-items:center;margin:10px 0;padding:8px 10px;background:color-mix(in srgb,var(--gold) 16%,var(--panel));border-radius:4px;font-size:12.5px}
.hp-p b{font:800 24px/1 var(--hfont);color:var(--ink)}
.hp-o{font-size:12.5px;border-top:1px solid var(--line);padding-top:8px;display:grid;gap:5px}
.hp-o img.silk{width:20px;height:20px;vertical-align:middle}
.hp-go{display:block;text-align:center;margin-top:10px}
.parade-h{grid-column:1/-1;font:700 12px/1 "Barlow Condensed",sans-serif;letter-spacing:.18em;text-transform:uppercase;opacity:.8;margin-top:6px}
.parade{grid-column:1/-1;display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:thin}
.parade button.hl{border:0;cursor:pointer;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;width:48px;padding:6px 0 5px;border-radius:4px;background:rgba(255,255,255,.12);color:inherit;font:700 11.5px/1 "Source Sans 3",sans-serif;text-decoration:none}
.parade button.hl:hover{background:rgba(255,255,255,.25)}
.parade img{width:36px;height:36px;margin-bottom:4px}
.parade button.mine{background:var(--gold);color:var(--gold-ink)}
.art{position:absolute;inset:0;pointer-events:none;z-index:0}
.art>*{display:none}
html[data-look] .ph,html[data-look] .pf-head b,html[data-look] .racebar b{font-family:var(--hfont)}

/* the sample switcher */
html[data-look] .lookbar,.lookbar.show{display:flex}
.lookbar{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:60;gap:4px;align-items:center;background:#111;color:#fff;padding:5px;border-radius:99px;box-shadow:0 6px 24px rgba(0,0,0,.35);font-size:12px;max-width:calc(100vw - 16px);overflow-x:auto}
.lookbar span{padding:0 8px 0 10px;opacity:.75;white-space:nowrap}
.lookbar a{color:#fff;padding:6px 11px;border-radius:99px;white-space:nowrap;font-weight:700}
.lookbar a:hover{background:rgba(255,255,255,.12);text-decoration:none}
.lookbar a.on{background:#f4b400;color:#2b1f00}

/* ---------- 1. Flemington Roses ---------- */
html[data-look=roses]{--brand:#5e0f26;--brand2:#8a1538;--brand3:#a8264d;--gold:#c9a24a;--gold-ink:#2b1d00;--bg:#f6efe8;--link:#8a1538;--line:#ecdcd3;--hfont:"Playfair Display",Georgia,serif}
html[data-look=roses] .tt-sub{border-bottom-color:var(--gold)}
html[data-look=roses] .hero{background:radial-gradient(ellipse at 85% 0%,rgba(255,190,205,.28),transparent 55%),linear-gradient(135deg,#4d0b1e,#7d1232 50%,#a3294f)}
html[data-look=roses] .hero h1{font-weight:800}
html[data-look=roses] .hero h1 span{font-style:italic;color:#f2d48c}
html[data-look=roses] .eyebrow{color:#f2d48c;opacity:1}
html[data-look=roses] .cd{background:rgba(255,255,255,.1);border-color:rgba(242,212,140,.45)}
html[data-look=roses] .cd b{color:#f2d48c}
html[data-look=roses] .art .roses{display:block}
html[data-look=roses] .ph{background:linear-gradient(180deg,#a8264d,#8a1538);font-weight:700;font-size:17px;letter-spacing:0}
html[data-look=roses] table.tt th{background:#5e0f26}
html[data-look=roses] table.tt tr:nth-child(even) td{background:#fbf6f2}
html[data-look=roses] .rec div{background:#f8eee9}
html[data-look=roses] .why{background:#fbf6f2}
.roses svg{position:absolute}

/* ---------- 2. The Gold Cup ----------
   Uses the festival's own colours when the page sets <html data-festival="..."> (from data/theme.js,
   edited in admin-colours.html): --fest dark, --fest2 light, --fest-acc the metal. Black and gold otherwise. */
html[data-look=gold]{--fest:#111;--fest2:#2c2c2c;--fest-acc:#d4af37;
  --acc-hi:color-mix(in srgb,var(--fest-acc) 55%,#fff);--acc-top:color-mix(in srgb,var(--fest-acc) 30%,#fff);--acc-lo:color-mix(in srgb,var(--fest-acc) 62%,#000);
  --deep:color-mix(in srgb,var(--fest) 80%,#000);
  --brand:var(--fest);--brand2:var(--fest2);--brand3:color-mix(in srgb,var(--fest2) 85%,#fff);--gold:var(--fest-acc);--gold-ink:var(--fest-ink,#1a1400);
  --bg:color-mix(in srgb,var(--fest-acc) 7%,#f0efec);--link:var(--acc-lo);--line:color-mix(in srgb,var(--fest-acc) 14%,#e4e2dd);--hfont:"Cinzel",Georgia,serif}
html[data-look=gold] .tt-top{background:var(--deep)}
html[data-look=gold] .tt-sub{background:var(--fest)}
html[data-look=gold] .tt-logo b{background:linear-gradient(180deg,var(--acc-hi),var(--fest-acc) 55%,var(--acc-lo));color:var(--gold-ink)}
html[data-look=gold] .hero{background:radial-gradient(ellipse at 62% 45%,color-mix(in srgb,var(--fest-acc) 32%,transparent),transparent 50%),linear-gradient(180deg,var(--deep),color-mix(in srgb,var(--fest) 92%,var(--fest-acc)))}
html[data-look=gold] .hero h1{font-weight:700;letter-spacing:.04em;background:linear-gradient(180deg,var(--acc-top),var(--fest-acc) 55%,var(--acc-lo));-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-look=gold] .eyebrow{color:var(--fest-acc);opacity:1}
html[data-look=gold] .cd{background:color-mix(in srgb,var(--fest-acc) 7%,transparent);border-color:color-mix(in srgb,var(--fest-acc) 50%,transparent)}
html[data-look=gold] .cd b{color:var(--acc-hi);font-weight:700}
html[data-look=gold] .hero-pick{border-top-color:var(--fest-acc);box-shadow:0 0 0 1px color-mix(in srgb,var(--fest-acc) 40%,transparent),0 10px 30px rgba(0,0,0,.5)}
html[data-look=gold] .hp-n button.hl{font-size:21px;color:var(--fest)}
html[data-look=gold] .art .trophy{display:block;position:absolute;right:400px;top:18px;height:260px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.6))}
@media(max-width:1180px){html[data-look=gold] .art .trophy{right:370px;opacity:.35}}
@media(max-width:980px){html[data-look=gold] .art .trophy{right:-20px;top:10px;height:200px;opacity:.28}}
/* a gilded galloping horse, for meetings whose trophy is a horse (e.g. the Breeders' Cup) */
html[data-look=gold] .art .goldhorse{display:block;position:absolute;right:390px;top:40px;width:300px;filter:invert(1) sepia(1) saturate(4) hue-rotate(-8deg) brightness(.92) drop-shadow(0 6px 16px rgba(0,0,0,.6))}
@media(max-width:1180px){html[data-look=gold] .art .goldhorse{opacity:.35}}
@media(max-width:980px){html[data-look=gold] .art .goldhorse{right:-30px;top:20px;width:220px;opacity:.25}}
html[data-look=gold] .ph{background:linear-gradient(180deg,var(--fest2),var(--fest));color:var(--acc-hi);font-weight:700;font-size:15px;letter-spacing:.06em;border-bottom-color:var(--fest-acc)}
html[data-look=gold] .ph small{background:var(--fest-acc);color:var(--gold-ink)}
html[data-look=gold] table.tt th{background:var(--fest);color:var(--acc-hi)}
html[data-look=gold] .racebar{background:linear-gradient(180deg,var(--fest2),var(--deep));border-bottom:1px solid var(--fest-acc)}
html[data-look=gold] .rnum{border-color:var(--acc-lo);color:var(--acc-lo)}
html[data-look=gold] .rec b{color:var(--acc-lo)}
html[data-look=gold] .why{background:color-mix(in srgb,var(--fest-acc) 5%,#fff)}
html[data-look=gold] .tt-foot{background:var(--deep);border-top:3px solid var(--fest-acc)}

/* ---------- 3. Silks ---------- */
html[data-look=silks]{--brand:#0a1f5c;--brand2:#123a9c;--brand3:#1a4fc4;--gold:#ffd400;--gold-ink:#1a1500;--bg:#eef1f7;--link:#123a9c;--hfont:"Barlow Condensed",sans-serif;--stripe:linear-gradient(90deg,#e63946 0 20%,#ffd400 20% 40%,#1a4fc4 40% 60%,#2a9d8f 60% 80%,#ff4fa3 80%)}
html[data-look=silks] .tt-sub{border-bottom:5px solid;border-image:var(--stripe) 1}
html[data-look=silks] .hero{background:linear-gradient(90deg,rgba(10,31,92,.97) 0%,rgba(10,31,92,.88) 48%,rgba(10,31,92,.45) 100%),repeating-linear-gradient(115deg,#e63946 0 70px,#ffd400 70px 140px,#1a4fc4 140px 210px,#2a9d8f 210px 280px,#ff4fa3 280px 350px,#111 350px 420px)}
html[data-look=silks] .hero h1{font-size:78px;text-transform:uppercase;font-style:italic;letter-spacing:-.01em;line-height:.88}
@media(max-width:600px){html[data-look=silks] .hero h1{font-size:52px}}
html[data-look=silks] .hero h1 span{color:var(--gold)}
html[data-look=silks] .eyebrow{color:var(--gold);opacity:1}
html[data-look=silks] .cd{background:#fff;color:var(--brand);border:0;transform:skewX(-8deg)}
html[data-look=silks] .hero-pick{border-top:6px solid;border-image:var(--stripe) 1}
html[data-look=silks] .parade button.hl{background:#fff;color:#111;width:58px}
html[data-look=silks] .parade img{width:44px;height:44px}
html[data-look=silks] .parade button.mine{background:var(--gold)}
html[data-look=silks] .ph{border-bottom:4px solid;border-image:var(--stripe) 1;text-transform:uppercase;font-style:italic;font-size:18px}
html[data-look=silks] .pf-head{background:var(--brand2)}
html[data-look=silks] .tt-foot{border-top:5px solid;border-image:var(--stripe) 1}

/* ---------- 4. Night Watch (dark, for the 4am Irish viewer) ---------- */
html[data-look=night]{color-scheme:dark;--brand:#070b16;--brand2:#121a30;--brand3:#1d2a4d;--gold:#ffb703;--gold-ink:#1d1300;--bg:#0b1020;--panel:#131a2c;--ink:#e6ebf5;--mute:#93a0b8;--line:#25304a;--link:#9cc2ff;--win:#2fbf71;--lose:#ff6b6b}
html[data-look=night] .tt-top{background:#05080f}
html[data-look=night] .tt-sub{background:#0e1527}
html[data-look=night] .hero{background:
  radial-gradient(circle at 63% 30%,#fff6d8 0 30px,rgba(255,246,216,.16) 31px 58px,transparent 59px),
  radial-gradient(1.5px 1.5px at 12% 22%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 22% 70%,#fff 50%,transparent 51%),
  radial-gradient(1.5px 1.5px at 35% 12%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 48% 58%,#cfe0ff 50%,transparent 51%),
  radial-gradient(1px 1px at 58% 18%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 67% 80%,#fff 50%,transparent 51%),
  radial-gradient(1px 1px at 74% 40%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 93% 62%,#cfe0ff 50%,transparent 51%),
  radial-gradient(1px 1px at 5% 85%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 41% 90%,#fff 50%,transparent 51%),
  linear-gradient(180deg,#03060d,#101935 70%,#1a2650)}
html[data-look=night] .eyebrow{color:var(--gold);opacity:1}
html[data-look=night] .hero h1 span{color:var(--gold)}
html[data-look=night] .clocks{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
html[data-look=night] .clocks div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:4px;padding:6px 10px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#b9c4dc}
html[data-look=night] .clocks b{display:block;font:800 20px/1.1 "Barlow Condensed",sans-serif;letter-spacing:.02em;color:#fff}
html[data-look=night] .ph{background:linear-gradient(180deg,#1d2a4d,#121a30)}
html[data-look=night] .ph small{background:#1f2942;color:var(--ink)}
html[data-look=night] table.tt th{background:#0a0f1d}
html[data-look=night] table.tt tr:nth-child(even) td{background:#161e33}
html[data-look=night] table.tt tr.mine td,html[data-look=night] .pf-names li:first-child{background:#2a2414}
html[data-look=night] .rec div,html[data-look=night] .facts div{background:#1a2238}
html[data-look=night] .why,html[data-look=night] .pf-result,html[data-look=night] .dnote.verdict-box{background:#0f1628}
html[data-look=night] .cupc>div.main{background:#221d10}
html[data-look=night] .cupnote{background:#2a2412;color:#f3dd9b;border-color:#5a4a1c}
html[data-look=night] .rsel,html[data-look=night] .rsel button,html[data-look=night] .rsel select{background:#1a2238;color:var(--ink)}
html[data-look=night] .search input,html[data-look=night] .res input{background:#0f1526;color:var(--ink);border-color:var(--line)}
html[data-look=night] .pf-names{background:var(--panel)}
html[data-look=night] .pf-photo{filter:brightness(.82)}
html[data-look=night] .pf-track,html[data-look=night] .mapbar{background:#2a3350}
html[data-look=night] .pf-fin,html[data-look=night] .fp,html[data-look=night] .tag.l,html[data-look=night] .pf-rl,html[data-look=night] .pf-v.o{background:#2a3350;color:#cfd7e6}
html[data-look=night] .tag.k{background:#183526;color:#8fe0b0}
html[data-look=night] .tag.d{background:#3a1d22;color:#ff9a9a}
html[data-look=night] .btn:not(.gold){background:#24345a}
html[data-look=night] .racebar .rnum{background:#fff}
html[data-look=night] dialog{background:var(--panel);color:var(--ink)}
html[data-look=night] .tt-foot{background:#05080f}
html[data-look=night] .hp-n button.hl,html[data-look=night] .rec b,html[data-look=night] .pf-ch,html[data-look=night] .pf-result>b,html[data-look=night] .rsel button{color:#fff}
html[data-look=night] .pf-pos,html[data-look=night] .conf.Med,html[data-look=night] details.trials summary{color:var(--gold)}
html[data-look=night] table.tt tr.day td{background:#1a2238;color:var(--ink)}