:root{
  /* Material 3 tokens — sampled from trinitymartialartsny.com: pure red, black, white */
  --md-primary:#FF0000;
  --md-on-primary:#FFFFFF;
  --md-primary-container:#FFD6D6;
  --md-on-primary-container:#410000;
  --md-secondary:#000000;
  --md-on-secondary:#FFFFFF;
  --md-secondary-container:#E7E0E9;
  --md-on-secondary-container:#1C1B1F;
  --md-surface:#FFFBFA;
  --md-surface-dim:#E7E0DE;
  --md-surface-container:#F7EFEE;
  --md-surface-container-high:#F1E9E8;
  --md-on-surface:#201A19;
  --md-on-surface-variant:#534342;
  --md-outline:#857372;
  --md-outline-variant:#D8C2C0;

  /* Belt colors stay literal — they carry real meaning, not brand meaning */
  --belt-white:#FFFFFF;
  --belt-white-border:#C9C2C1;
  --belt-orange:#F2994A;
  --belt-green:#1E9E5A;
  --belt-red:#D62B2B;
  --belt-black:#1A1A1A;

  --radius-sm:12px;
  --radius-md:16px;
  --radius-lg:28px;
  --elev-1:0 1px 2px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.08);
  --elev-2:0 2px 6px rgba(0,0,0,.14), 0 1px 2px rgba(0,0,0,.10);
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:#FFFFFF;
  font-family:'Inter',sans-serif;
  color:var(--md-on-surface);
  -webkit-font-smoothing:antialiased;
}

.app{max-width:1100px;margin:0 auto;padding-bottom:64px;}

.desktop-grid{display:none;}

/* ---------- Header ---------- */
header{
  background:var(--md-secondary);
  color:var(--md-on-secondary);
  margin:20px 20px 0;
  border-radius:var(--radius-lg);
  box-shadow:var(--elev-2);
  overflow:hidden;
}
.header-inner{
  padding:24px 20px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px 18px;
}
header .logo{
  width:64px;
  height:64px;
  flex-shrink:0;
  border-radius:50%;
  box-shadow:var(--elev-2);
}
@media (max-width:420px){
  header .logo{width:52px;height:52px;}
}
header .heading{min-width:0;}
header .eyebrow{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#FFB3AE;
  font-weight:700;
  margin-bottom:6px;
}
header h1{
  font-family:'Archivo Black',sans-serif;
  font-weight:400;
  font-size:clamp(28px,7vw,44px);
  line-height:1.02;
  margin:0 0 6px;
  letter-spacing:-.01em;
}
header p.tagline{
  margin:0;
  font-size:14px;
  color:#D9D3D6;
  font-weight:500;
  letter-spacing:.02em;
}
header .pdf-link{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:7px;
  background:var(--md-primary);
  color:var(--md-on-primary);
  text-decoration:none;
  font-size:12px;
  font-weight:700;
  padding:10px 16px;
  border-radius:999px;
  box-shadow:var(--elev-1);
  flex-shrink:0;
  white-space:nowrap;
}
header .pdf-link:hover{filter:brightness(1.08);}
@media (max-width:600px){
  header .logo{order:1;}
  header .pdf-link{order:2;margin:0 0 0 auto;}
  header .heading{order:3;flex-basis:100%;width:100%;}
}

/* ---------- Belt strip: signature element + filter control ---------- */
.belt-strip{
  margin:16px 20px 0;
  background:var(--md-surface-container-high);
  border-radius:var(--radius-lg);
  box-shadow:var(--elev-1);
  padding:14px 16px 16px;
}
.belt-strip .label{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--md-on-surface-variant);
  margin-bottom:10px;
}
.belt-row{display:flex;gap:8px;flex-wrap:wrap;}
.belt-chip{
  display:flex;
  align-items:center;
  gap:7px;
  padding:8px 14px 8px 10px;
  border-radius:999px;
  border:1.5px solid var(--md-outline-variant);
  background:var(--md-surface);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  user-select:none;
  transition:all .15s ease;
  flex:1 1 auto;
  justify-content:center;
  white-space:nowrap;
}
.belt-chip .dot{
  width:16px;height:16px;border-radius:50%;flex-shrink:0;
  border:1.5px solid rgba(0,0,0,.08);
}
.belt-chip.active{
  background:var(--md-primary-container);
  border-color:var(--md-primary);
  color:var(--md-on-primary-container);
}
.belt-chip:hover{border-color:var(--md-primary);}

/* ---------- Day tabs ---------- */
.day-tabs{
  display:flex;
  gap:6px;
  padding:18px 20px 4px;
  overflow-x:auto;
  scrollbar-width:none;
}
.day-tabs::-webkit-scrollbar{display:none;}
.day-tab{
  flex:1 0 auto;
  min-width:64px;
  text-align:center;
  padding:10px 6px;
  border-radius:var(--radius-sm);
  background:var(--md-surface-container);
  font-size:13px;
  font-weight:700;
  color:var(--md-on-surface-variant);
  cursor:pointer;
  border:2px solid transparent;
  transition:all .15s ease;
}
.day-tab.active{
  background:var(--md-primary);
  color:var(--md-on-primary);
}

/* ---------- Sparring toggle (Saturday only) ---------- */
.sparring-toggle{
  display:none;
  margin:14px 20px 0;
  background:var(--md-surface-container);
  border-radius:999px;
  padding:4px;
  gap:4px;
}
.sparring-toggle.visible{display:flex;}
.sparring-toggle button{
  flex:1;
  border:none;
  background:transparent;
  padding:10px 8px;
  border-radius:999px;
  font-family:inherit;
  font-size:12.5px;
  font-weight:700;
  color:var(--md-on-surface-variant);
  cursor:pointer;
}
.sparring-toggle button.active{
  background:var(--md-secondary);
  color:var(--md-on-secondary);
}

/* ---------- Class cards ---------- */
.day-panel{padding:16px 20px 8px;display:none;flex-direction:column;gap:10px;}
.day-panel.active{display:flex;}

.class-card{
  display:flex;
  flex-direction:column;
  background:var(--md-surface);
  border-radius:var(--radius-sm);
  box-shadow:var(--elev-1);
  overflow:hidden;
  transition:opacity .15s ease, transform .15s ease;
}
.class-card.dimmed{opacity:.32;}
.class-card.placeholder{visibility:hidden;box-shadow:none;pointer-events:none;}
.class-card .time-row{
  display:flex;
  align-items:center;
  gap:6px;
  background:var(--md-secondary);
  color:#FFFFFF;
  font-size:14px;
  font-weight:800;
  padding:8px 14px;
}
.class-card .time-row .clock-icon{
  width:15px;
  height:15px;
  flex-shrink:0;
  color:#FFFFFF;
}
.class-card .card-body{
  padding:10px 14px 12px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.class-card .name{
  font-size:15px;
  font-weight:700;
  color:var(--md-on-surface);
}
.class-card .belts{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
}
.belt-swatch{
  width:14px;height:14px;border-radius:4px;
  border:1.5px solid rgba(0,0,0,.1);
  flex-shrink:0;
}
.class-card .note{
  padding:14px;
  font-size:13px;
  font-weight:600;
  color:var(--md-on-surface-variant);
  font-style:italic;
}

/* ---------- Legend ---------- */
.legend{
  margin:20px 20px 0;
  background:var(--md-surface-container);
  border-radius:var(--radius-md);
  padding:14px 16px;
}
.legend .label{
  font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--md-on-surface-variant);margin-bottom:10px;
}
.legend-row{display:flex;flex-wrap:wrap;gap:14px;}
.legend-item{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--md-on-surface);}

/* ---------- Footer ---------- */
footer{
  margin:24px 20px 0;
  background:var(--md-secondary);
  color:var(--md-on-secondary);
  border-radius:var(--radius-lg);
  padding:24px 22px;
}
footer p.msg{font-size:13.5px;line-height:1.55;color:#D9D3D6;margin:0 0 16px;}
footer .contacts{display:flex;flex-direction:column;gap:9px;}
footer .contacts a{
  color:var(--md-on-secondary);
  text-decoration:none;
  font-size:13.5px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:9px;
}
footer .contacts a span.ic{
  width:26px;height:26px;border-radius:50%;
  background:var(--md-primary);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;flex-shrink:0;
}

@media (min-width:760px){
  .day-panel{display:none !important;}
  .day-panel.desktop-active{display:flex !important;}
  .desktop-grid{display:block;padding:20px;}
  .week-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:12px;
  }
  .desktop-sat-divider{
    height:1px;
    background:var(--md-outline-variant);
    margin:20px 0;
  }
  .desktop-saturday{display:flex;flex-direction:column;gap:8px;}
  .sat-cards-row{display:flex;gap:12px;flex-wrap:wrap;}
  .sat-cards-row .class-card{flex:1 1 190px;max-width:230px;}
  .desktop-grid .day-col{
    display:grid;
    grid-template-rows:subgrid;
    grid-row:1 / -1;
    align-items:stretch;
    gap:8px;
    min-width:0;
  }
  .desktop-grid .day-col .class-card{height:100%;}
  .desktop-grid .day-col-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:6px;
    margin:0 0 2px;
  }
  .desktop-grid .day-col h3{
    font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
    color:var(--md-on-surface-variant);margin:0;padding-left:2px;
    white-space:nowrap;
  }
  .sat-toggle-desktop{
    display:flex;
    gap:2px;
    background:var(--md-surface-container);
    border-radius:999px;
    padding:2px;
    flex-shrink:0;
  }
  .sat-toggle-desktop button{
    border:none;
    background:transparent;
    font-family:inherit;
    font-size:9.5px;
    font-weight:700;
    letter-spacing:.02em;
    padding:4px 7px;
    border-radius:999px;
    color:var(--md-on-surface-variant);
    cursor:pointer;
    white-space:nowrap;
  }
  .sat-toggle-desktop button.active{
    background:var(--md-secondary);
    color:var(--md-on-secondary);
  }
  .sat-week-label{
    font-size:11px;
    font-weight:600;
    font-style:italic;
    color:var(--md-on-surface-variant);
    margin:-4px 0 2px;
    padding-left:2px;
  }
  .day-tabs, .sparring-toggle.mobile-only{display:none;}
  .class-card .time-row{font-size:12.5px;padding:7px 12px;}
  .class-card .time-row .clock-icon{width:13px;height:13px;}
  .class-card .card-body{padding:8px 12px 10px;}
  .class-card .name{font-size:13px;}
}