:root{
  --bg:#ffffff; --text:#1a1a1a;
  --brand:#B21E28; --accent:#F4D35E;
  --muted:#f6f6f6; --card:#ffffff; --border:#e8e8e8;
  --radius:14px; --shadow:0 4px 14px rgba(0,0,0,.08);
  --font-headings: system-ui, -apple-system, Segoe UI, Roboto;
  --font-body: system-ui, -apple-system, Segoe UI, Roboto;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--font-body);}
.container{max-width:1100px;margin:0 auto;padding:0 16px}

.site-header{position:sticky;top:0;background:var(--bg);border-bottom:1px solid var(--border);z-index:10}
.header-inner{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:12px 0;flex-wrap:wrap}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:40px;height:40px}
.titles .site-title{margin:0;font-family:var(--font-headings);font-size:1.25rem}
.titles .site-subtitle{margin:2px 0 0;color:#555;font-size:.9rem}

.controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tab{padding:8px 12px;border:1px solid var(--border);background:#fff;border-radius:999px;cursor:pointer}
.tab.is-active{background:var(--brand);color:#fff;border-color:var(--brand)}
.control-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.select,.search{padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:#fff}
.search{min-width:220px}

#schedule{display:flex;flex-direction:column;gap:24px;padding:24px 0}
.day-block{display:flex;flex-direction:column;gap:12px}
.day-title{font-family:var(--font-headings);font-size:1.15rem;margin:0;display:flex;align-items:center;gap:8px}
.day-title .pill{background:var(--muted);border-radius:999px;padding:2px 8px;font-size:.8rem}

.grid{display:grid;gap:12px;grid-template-columns:repeat(1, minmax(0,1fr))}
@media(min-width:700px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:980px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px;display:flex;flex-direction:column;gap:6px}
.meta{display:flex;gap:8px;flex-wrap:wrap;font-size:.88rem;color:#333}
.meta .time{font-weight:600}
.meta .stage{opacity:.85}
.title{font-size:1rem;font-weight:600;margin:2px 0}
.badges{display:flex;gap:6px;flex-wrap:wrap}
.badge{border-radius:999px;font-size:.75rem;padding:3px 8px;border:1px solid var(--border);background:var(--muted)}
.badge--performance{border-color:transparent;background:#ffeeda}
.badge--activity{border-color:transparent;background:#e8f7e8}

.site-footer{border-top:1px solid var(--border);padding:18px 0;margin-top:24px;color:#555}
.visually-hidden{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
/* === LEAF THEME OVERRIDES (append at end) =============================== */
/* Brand tokens in HSL "parts" + mapping to app variables */
:root{
  /* Primary LEAF palette (from PDF) */
  --leaf-red: 356 73% 33%;        /* #A31D21 */
  --leaf-dark-green: 134 36% 16%; /* #204325 */
  --leaf-light-green: 180 56% 58%;/* #6ABBBE */
  --leaf-teal: 207 82% 39%;       /* #0E68BC */
  --leaf-blue: 186 62% 59%;       /* #55C4D7 */
  --leaf-yellow: 48 100% 50%;     /* #FFCC00 */
  --leaf-cream: 52 83% 90%;       /* #FAF0CD */
  /* Book campaign (spares if needed later) */
  --leaf-deep-teal: 180 100% 15%;
  --leaf-forest-green: 140 60% 15%;
  --leaf-burnt-orange: 25 85% 50%;
  --leaf-soft-yellow: 48 95% 70%;

  /* Map to the app's theme variables */
  --bg: hsl(var(--leaf-cream));      /* page background */
  --text: #1a1a1a;
  --brand: hsl(var(--leaf-red));     /* primary accents */
  --accent: hsl(var(--leaf-yellow)); /* focus/highlights */
  --muted: hsl(52 40% 94%);          /* soft section bg */
  --card: #ffffff;
  --border: #e8e8e8;
  --radius: 14px;
  --shadow: 0 4px 14px rgba(0,0,0,.08);

  --font-headings: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* Subtle brand tint on header divider */
.site-header{ border-bottom-color: color-mix(in hsl, var(--brand) 20%, #fff); }

/* Headings: uppercase, bold, tracked, in dark green */
.site-title, .day-title{
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 800;
  color: hsl(var(--leaf-dark-green));
  font-family: var(--font-headings);
}

/* Tabs: brand active/hover */
.tabs .tab.is-active{ background: var(--brand); border-color: var(--brand); color: #fff; }
.tabs .tab:hover{ border-color: var(--brand); }

/* Inputs: accessible focus */
.select:focus, .search:focus{ outline: 2px solid var(--accent); outline-offset: 2px; }

/* Badges: tinted to brand families */
.badge--performance{
  border-color: transparent;
  background: color-mix(in hsl, var(--leaf-red) 20%, #fff);
}
.badge--activity{
  border-color: transparent;
  background: color-mix(in hsl, var(--leaf-light-green) 25%, #fff);
}
/* ======================================================================= */
/* --- Small LEAF polish --- */

/* Tabs look crisper in all-caps, matching headings */
.tabs .tab{ text-transform: uppercase; letter-spacing:.03em; font-weight:600; }

/* Day heading size + a warm date pill */
.day-title{ font-size:1.35rem; }
.day-title .pill{
  background: color-mix(in hsl, var(--leaf-yellow) 30%, #fff);
  color:#5a4a00;
}

/* Cards: a touch more breathing room & soft hover on desktop */
.card{ padding:16px; transition: box-shadow .2s ease, transform .2s ease; }
@media (min-width:980px){
  .card:hover{ box-shadow:0 8px 22px rgba(0,0,0,.12); transform: translateY(-1px); }
}

/* Meta line: stage as a subtle chip; time a bit bolder */
.meta .time{ font-weight:700; }
.meta .stage{
  font-weight:600;
  background: color-mix(in hsl, var(--leaf-dark-green) 8%, #fff);
  padding:2px 8px; border-radius:999px;
  color: hsl(var(--leaf-dark-green));
}

/* Optional: a tad wider layout if you want 3 cards to breathe */
.container{ max-width:1200px; }