:root{
  --bg:#0e1013;
  --card:#14171c;
  --soft:#1b1f26;
  --text:#eef2f7;
  --muted:#aeb6c2;
  --outline:#2c333f;
  --accent:#A0171F;
  --accent-700:#7F1217;
  --pill:#232833;
  --white:#fff;
}

.cc-programme{color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif}

/* Chips */
.cc-chipbar{display:flex;gap:.6rem;margin:1rem .75rem;align-items:center}
.cc-chip{display:inline-block;padding:.55rem 1rem;border-radius:3px;border:1px solid var(--outline);background:var(--pill);color:var(--text);text-decoration:none;transition:background .2s,color .2s;cursor:pointer}
.cc-chip.is-active{background:var(--text);color:#111}

/* Calendar button specific styles */
.cc-chip--calendar{padding:.55rem .75rem;display:flex;align-items:center;justify-content:center;background:var(--pill);border:1px solid var(--outline);position:relative;overflow:hidden}
.cc-chip--calendar:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.cc-chip--calendar svg{width:16px;height:16px;pointer-events:none;position:relative;z-index:1}

/* Date picker overlaid on button for iOS compatibility */
.cc-date-picker{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2}

/* Sort toggle */
.cc-sort-toggle{display:flex;align-items:center;gap:.6rem;margin:0 .75rem 1rem;padding:.5rem 0}
.cc-sort-toggle .sort-label{font-size:.9rem;color:var(--muted);font-weight:500}

/* Next banner */
.cc-next-banner{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:.9rem;background:var(--accent);color:#fff;border-radius:16px;margin:0 .75rem 1rem;padding:.9rem 1rem;box-shadow:0 10px 28px rgba(0,0,0,.25), inset 0 2px 0 rgba(0,0,0,.3)}
.cc-next-banner .dot{width:.8rem;height:.8rem;border-radius:999px;background:#ffd46b;box-shadow:0 0 0 2px rgba(0,0,0,.2) inset}
.cc-next-banner .ttl{font-weight:800;letter-spacing:.2px}
.cc-next-banner .cc-countdown{font-variant-numeric:tabular-nums;font-weight:800;margin-left:.25rem}
.cc-next-banner .meta{opacity:.95}
.cc-next-banner .btn.red{justify-self:end}

.btn{display:inline-block;padding:.7rem 1rem;border-radius:14px;text-decoration:none;font-weight:800}
.btn.red{background:var(--accent);color:#fff}
.btn.red:hover{background:var(--accent-700)}
.btn.ghost{background:transparent;border:1px solid var(--outline);color:var(--text)}

/* Meeting */
.cc-meeting{background:var(--card);border:1px solid var(--outline);border-radius:18px;margin:1rem .75rem;overflow:hidden}
/* Note: .cc-meeting-head styles moved to programme.css for two-row layout */

/* Race rows */
.cc-race{display:flex;justify-content:space-between;gap:1rem;background:var(--soft);border:1px solid var(--outline);border-radius:16px;padding:1rem;margin:.75rem 0}
.cc-race .title{font-weight:800;font-size:1.05rem}
.cc-race .sub{opacity:.9;margin-top:.2rem}
.cc-race .tr{display:flex;gap:.5rem;align-items:center}

@media (max-width:640px){
  .cc-next-banner{grid-template-columns:auto 1fr;grid-auto-rows:auto}
  .cc-next-banner .btn{grid-column:1 / -1;justify-self:start}
  .cc-race{flex-direction:column}
}