/* Trapwise · Today's Meetings identity — 23 October 2026.
   Keeps the racecards, comparison/analysis UI, times and sorting untouched.
   Bronze/amber distinguishes racing programme from lime Strategy and cyan Value. */

body.meetings-active .topbar{display:none!important}
body.meetings-active .content{
  box-sizing:border-box;width:100%;max-width:1720px!important;margin-inline:auto;
  padding:18px clamp(15px,1.8vw,29px) 28px!important
}
body.meetings-active .page-heading,
body.meetings-active .legacy-metrics,
body.meetings-active .content>.notice:not(.error-notice){display:none!important}
body.meetings-active .workspace-tabs{top:0}
body.meetings-active{--tw-meetings-accent:#ffc481;--tw-meetings-soft:#fae3b8}
body.meetings-active .nav-button[data-tab="cards"].active{
  color:var(--tw-meetings-accent);background:#b8753820;border-color:#c587474f
}
body.meetings-active .workspace-tabs button[data-tab="cards"].active{
  color:#252014;background:var(--tw-meetings-accent);font-weight:850
}

/* Only new area above existing filters. Bespoke Trapwise photo already stored
   at its original full 2172px width, never a downscaled thumbnail. */
#cards-view .tw-meetings-hero{
  position:relative;isolation:isolate;display:flex;align-items:center;
  min-height:208px;margin:0 0 13px;padding:24px 30px;
  border-radius:15px;border:1px solid #69523f;
  overflow:hidden;background:#111f27;
  box-shadow:0 14px 40px #0003,inset 0 1px 0 #ffffff0d
}
#cards-view .tw-meetings-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:linear-gradient(90deg,#0e1a22f8 0%,#141b22e8 29%,#221e208f 52%,#32241733 83%),
    url('/assets/trapwise-strategy-source.png?v=20261023-meetings1');
  background-size:cover;background-position:62% 53%;background-repeat:no-repeat;
  opacity:1;filter:none;pointer-events:none
}
#cards-view .tw-meetings-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,#34221444 0%,transparent 44%);pointer-events:none
}
#cards-view .tw-meetings-hero-copy{position:relative;z-index:1;width:min(100%,700px);padding-right:25px}
#cards-view .tw-meetings-overline{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  color:var(--tw-meetings-accent);font-weight:850;font-size:10px;
  line-height:1.5;letter-spacing:1.3px
}
#cards-view .tw-meetings-pulse{
  width:7px;height:7px;border-radius:50%;background:var(--tw-meetings-accent);
  box-shadow:0 0 14px #ffc48199;flex:0 0 auto
}
#cards-view .tw-meetings-date{color:#c7b7a7;font-weight:700;letter-spacing:.75px}
#cards-view .tw-meetings-hero h1{
  color:#f8fafb;font-size:clamp(34px,3.35vw,49px);font-weight:830;line-height:1.06;
  letter-spacing:-1.8px;margin:12px 0 10px
}
#cards-view .tw-meetings-hero h1 em{color:var(--tw-meetings-accent);font-style:normal}
#cards-view .tw-meetings-hero-copy>p{
  color:#c4d1d8;font-size:12px;line-height:1.65;max-width:575px;margin:0
}
#cards-view .tw-meetings-signals{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 17px;margin-top:18px
}
#cards-view .tw-meetings-signals span{white-space:nowrap;color:#d5d6d1;font-size:10px}
#cards-view .tw-meetings-signals b{color:var(--tw-meetings-accent);font-size:9px;margin-right:5px}
#cards-view .tw-meetings-refresh{
  position:absolute;top:13px;right:14px;z-index:2;display:grid;place-items:center;
  width:38px;height:36px;border-radius:8px;border:1px solid #76614e;
  background:#122530d9;color:#f4cfad;font-size:21px;line-height:1
}
#cards-view .tw-meetings-refresh:hover{background:#324036;border-color:#e6b276}
#cards-view .tw-meetings-refresh:focus-visible{outline:2px solid var(--tw-meetings-accent);outline-offset:3px}

/* Colour cues, without altering the race list's current layout or behaviour. */
body.meetings-active #cards-view .next-to-go .eyebrow,
body.meetings-active #cards-view .meeting-group>.section-heading .eyebrow{
  color:var(--tw-meetings-accent)
}
body.meetings-active #cards-view .next-race-card::before{background:var(--tw-meetings-accent)}
body.meetings-active #cards-view .next-race-card:hover,
body.meetings-active #cards-view .meeting-race:hover{border-color:#c59b6a}
body.meetings-active #cards-view .next-pick small,
body.meetings-active #cards-view .next-pick strong{color:var(--tw-meetings-accent)}
body.meetings-active #cards-view .meeting-times button:first-child{
  color:var(--tw-meetings-accent);border-color:#d09a60
}
body.meetings-active #cards-view .race-state.live{border-color:#ad8659;color:#f0c48e}

/* Sign-out remains available on phones, in the footer rather than any hero. */
.tw-mobile-footer-logout{display:none}
@media(max-width:700px){
  body.meetings-active .content{padding:13px 12px 24px!important}
  #cards-view .tw-meetings-hero{
    min-height:227px;margin-bottom:14px;padding:23px 18px 16px;align-items:flex-end
  }
  #cards-view .tw-meetings-hero::before{
    background-image:linear-gradient(90deg,#0d1922f7 0%,#111e25e8 53%,#2523257d 100%),
      url('/assets/trapwise-strategy-source.png?v=20261023-meetings1');
    background-position:62% 50%
  }
  #cards-view .tw-meetings-hero-copy{padding-right:0;padding-top:18px}
  #cards-view .tw-meetings-overline{font-size:8px;letter-spacing:1px}
  #cards-view .tw-meetings-hero h1{font-size:35px;letter-spacing:-1.4px;margin:10px 0 8px}
  #cards-view .tw-meetings-hero-copy>p{font-size:11px;line-height:1.5;max-width:390px}
  #cards-view .tw-meetings-signals{margin-top:14px;gap:6px 11px}
  #cards-view .tw-meetings-signals span{font-size:9px}
  #cards-view .tw-meetings-refresh{width:33px;height:32px;top:9px;right:9px;font-size:19px}
  .tw-mobile-footer-logout{
    display:inline-flex;align-items:center;gap:5px;justify-content:center;
    border:1px solid #415664;background:#142632;border-radius:8px;
    color:#b8d0dc;padding:8px 11px;min-height:36px;font-size:10px;white-space:nowrap
  }
  .tw-mobile-footer-logout:focus-visible{outline:2px solid #c9f76a;outline-offset:3px}
  .page-footer{align-items:center;flex-wrap:wrap;gap:9px 13px}
  .page-footer #last-updated{flex:1 1 170px}
}
@media(max-width:370px){
  #cards-view .tw-meetings-hero h1{font-size:30px}
  #cards-view .tw-meetings-signals{gap:6px 8px}
  #cards-view .tw-meetings-signals span{white-space:normal}
}
@media(prefers-reduced-motion:reduce){
  #cards-view .tw-meetings-refresh{transition:none}
}

/* Active race time is a selection, not a status. Override awaiting/inplay/
   upcoming/first-child colours consistently so its label is legible. */
body.meetings-active #cards-view .meeting-times button.active,
body.meetings-active #cards-view .meeting-times button.active:first-child,
body.meetings-active #cards-view .meeting-times button.active.awaiting,
body.meetings-active #cards-view .meeting-times button.active.inplay,
body.meetings-active #cards-view .meeting-times button.active.upcoming,
body.meetings-active #cards-view .meeting-times button.active.complete{
  background:#ffc481!important;color:#241d13!important;
  border-color:#f8ce9a!important;font-weight:850;
  box-shadow:0 0 0 1px #ffc48128
}
body.meetings-active #cards-view .meeting-times button.active span,
body.meetings-active #cards-view .meeting-times button.active small{
  color:#241d13!important;opacity:1!important
}
body.meetings-active #cards-view .meeting-times button.active:focus-visible{
  outline:2px solid #ffe6bb;outline-offset:3px
}

/* The mobile next-race carousel must scroll within the Meetings content,
   not add its old negative gutter to the entire document width. */
@media(max-width:700px){
 body.meetings-active #cards-view,
 body.meetings-active #cards-view .race-list,
 body.meetings-active #cards-view .next-to-go,
 body.meetings-active #cards-view .meeting-group{
   min-width:0;max-width:100%
 }
 body.meetings-active #cards-view .next-grid{
   box-sizing:border-box;width:100%;max-width:100%;min-width:0;
   margin-right:0!important;padding-right:0!important;
   overflow-x:auto;overscroll-behavior-x:contain
 }
 body.meetings-active #cards-view .meeting-times{max-width:100%;min-width:0;overflow-x:auto}
 body.meetings-active #cards-view .filterbar{min-width:0;max-width:100%}
}
