.cgr-todays-classes-list{
  display:block;
  margin-top: 1rem;
}

.cgr-todays-classes-card{
  display:grid;
  grid-template-rows:auto auto;
  border-top:1px solid var(--canguro-mid-grey);
  background:#fff;
  padding-top:1rem;
  padding-bottom: 1.5rem;
  pointer-events:none
}

.cgr-todays-classes-actions :not(.cgr-button-grey) {
  pointer-events: auto !important;
  cursor:pointer;
}

/* two-column rows with fixed right column */
.cgr-todays-classes-row{
  display:grid;
  grid-template-columns: 1fr 12rem;   /* fixed right-side width — tweak as needed */
  align-items:start;
  /* column-gap:1rem; /* don't need */
}

.cgr-todays-classes-row--bottom{
  /*border-top:1px solid var(--card-border); */ /* don't think I like this */
  align-items:end;  /* pills & button align to bottom */
}

/* left/right cells */
.cgr-todays-classes-left{
	/* min-width:0; /* allow text wrap APPARENTLY */
 padding-right: 10vw;
} 
.cgr-todays-classes-right{display:flex; justify-content:flex-end;}

/* title/desc/time */
.cgr-todays-classes-title{font-size:1.8rem; font-weight:800; margin:0 0 6px;}
.cgr-todays-classes-desc{font-size:1rem; line-height:1.5; color:#555;}
.cgr-todays-classes-time{font-size:1.6rem; font-weight:700;}

/* chips */
.cgr-todays-classes-meta{display:flex; flex-wrap:wrap; gap:8px;}
.cgr-todays-classes-chip{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:#e5e7eb; color:#333; font-weight:600; font-size:.95rem;
}

/* button fills right column; no width jitter */
.cgr-todays-classes-actions .cgr-button-white,
.cgr-todays-classes-actions .cgr-button-grey,
.cgr-todays-classes-actions .cgr-button-yellow,
.cgr-todays-classes-actions .cgr-button-green,
.cgr-todays-classes-actions .cgr-button-red{
  display:block; width:100%; text-align:center;
}

/* responsive: stack columns on small screens */
@media (max-width: 700px){
  .cgr-todays-classes-row{
    grid-template-columns: 1fr;      /* stack */
  }
  .cgr-todays-classes-right{justify-content:flex-start;}
  .cgr-todays-classes-time{margin-top:8px;}
  .cgr-todays-classes-actions{margin-top:10px;}
}

/* ===================================================================================== */
/* POPOVER
/* Only affects the sync popover template.
/* ===================================================================================== */

.cgr-popover-content--sync {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

/* Buttons full width inside this specific popover */
.cgr-popover-content--sync .cgr-button-white {
  display: block;
  width: 100%;
  text-align: center;
}



/* ===================================================================================== */
/* REMINDERS
/* Only affects buttons in this shortcode
/* ===================================================================================== */

.cgr-todays-classes-actions .cgr-rem-button-white {
background: #fff;
color:#000; 
font-weight: 400;
font-size: 16px;
border-style: solid;
border-radius:5px;
border-width:1px;
border-color:var(--canguro-dark-grey); 
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1)!important;
padding: 15px 20px 15px 20px;
text-decoration: none;
cursor: pointer;
}

.cgr-todays-classes-actions .cgr-rem-button-white:hover {
background: var(--canguro-yellow);
color:#000;
text-decoration: none;
}

.cgr-todays-classes-actions .cgr-rem-button-yellow {
background: var(--canguro-yellow); 
color:#000;
font-weight: 400;
font-size: 16px;
border-style: solid;
border-radius:5px;
border-width:1px;
border-color:var(--canguro-dark-yellow); 
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1)!important;
padding: 15px 20px 15px 20px;
text-decoration: none;
cursor: pointer;
}

.cgr-todays-classes-actions .cgr-rem-button-yellow:hover {
background: var(--canguro-light-yellow);
color:#000;
text-decoration: none;
}


.cgr-todays-classes-actions .cgr-rem-button-green {
background: var(--canguro-green); 
color:#fff!important;
font-weight: 400;
font-size: 16px;
border-style: solid;
border-radius:5px;
border-width:1px;
border-color:var(--canguro-dark-green);
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1)!important;
padding: 15px 20px 15px 20px;
text-decoration: none;
cursor: pointer;
}

.cgr-todays-classes-actions .cgr-rem-button-green:hover {
background: var(--canguro-light-green);
color:#fff!important;
text-decoration: none;
}

.cgr-todays-classes-actions .cgr-rem-button-grey {
background: var(--canguro-mid-grey); 
color:var(--canguro-dark-grey)!important;
font-weight: 400;
font-size: 16px;
border-style: solid;
border-radius:5px;
border-width:1px;
border-color:var(--canguro-low-grey);
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1)!important;
padding: 15px 20px 15px 20px;
text-decoration: none;
pointer-events: none;
cursor: default;
}

.cgr-todays-classes-actions .cgr-rem-button-grey:hover {
background: var(--canguro-mid-grey);
color:var(--canguro-dark-grey)!important;
text-decoration: none;
pointer-events: none;
cursor: default;
}