/* Tunables: keep these in sync with the summary styling */
.week-module {
  --chevron-w: 1ch;      /* width reserved for ▸/▾ */
  --gap: 0.5rem;         /* the summary's flex gap */
  --week-label-w: 5.5ch; /* matches .week-label min-width */
  --content-indent: calc(var(--chevron-w) + var(--gap));
}


/* Container */
.week-module {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  padding: 0.5rem 0.75rem;
  margin: 1rem 0;
  background: var(--bg, #fff);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

/* Summary bar */
.week-module > summary {
  cursor: pointer;
  display: flex;
  align-items: baseline;
  list-style: none;
  gap: var(--gap);
  padding: .4rem 0;
  user-select: none;
}

/* Tighter, smaller H3s inside details */
.week-module h3 {
  font-size: 1.05rem;       /* smaller than your topic-title */
  font-weight: 600;
  line-height: 1.25;
  margin: 0.6rem 0 0.25rem; /* trim vertical whitespace */
}

/* Optional: keep the paragraph/list right under H3 snug */
.week-module h3 + p,
.week-module h3 + ul,
.week-module h3 + ol {
  margin-top: 0.25rem;
}

/* Make the summary line look clickable + add chevron */
.week-module > summary {
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  user-select: none;
}

/* Hide default marker to avoid double icons (Safari/Chrome) */
.week-module > summary::-webkit-details-marker { display: none; }

/* Chevron indicator (closed vs open) */
.week-module > summary::before {
  content: "▸";
  display: inline-block;
  width: var(--chevron-w);
  transform: translateY(1px);
  transition: transform 150ms ease;
}
.week-module[open] > summary::before {
  content: "▾";
  transform: translateY(1px);
}

/* Optional: hover/focus affordance for accessibility */
.week-module > summary:hover { opacity: 0.9; }
.week-module > summary:focus-visible {
  outline: 2px solid #2563eb;   /* adjust to your accent color */
  outline-offset: 2px;
  border-radius: 6px;
}

/* INDENT everything after <summary> so it lines up with .topic-title */
.week-module > *:not(summary) {
  padding-inline-start: var(--content-indent);
}

/* Keep lists compact inside modules */
/* ensure list text aligns with H3 text (default list markers will hang as usual) */
.week-module ul,
.week-module ol,
.week-module p,
.week-module .meta {
  margin: 0.25rem 0 0.75rem; 
}

/* Ensure topic title reads as the primary label */
.week-module .topic-title {
  display: inline; 	/* allow wrapping */
  margin-left: 0.5ch;	/* gap works on same line *and* when wrapped */
  font-size: 1.15rem;          /* larger than h3 */
  font-weight: 650;
}

/* reduce indent on narrow screens */
@media (max-width: 560px) {
  .week-module { --week-label-w: 4.5ch; }
}

/* Resource badges (lightweight; adjust to taste) */
.badge {
  font-size: .75rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  opacity: .85;
}
.badge.notes  { color: #2563eb; }   /* blue */
.badge.slides { color: #059669; }   /* green */
.badge.terms  { color: #7c3aed; }   /* purple */

/* Resource link classes (for icons, spacing, etc.) */
.res-notes::before  { content: "📄 "; }
.res-slides::before { content: "📑 "; }
.res-terms::before  { content: "📚 "; }

/* Meta row */
.meta {
  margin-top: .75rem;
  font-size: .85rem;
  color: #6b7280;
}

/* Optional: tighter lists inside details */
.week-module ol, .week-module ul {
  margin: .25rem 0 .5rem 1.25rem;
}



/* style for the week module label */
.week-module {
  --label-fg: #6b7280;     /* slate-500-ish */
  /* keep your existing vars:
     --chevron-w, --gap, --week-label-w, --content-indent */
}

/* Distinct WEEK label in all caps */
.week-module .week-label {
  display: inline-block;
  min-width: var(--week-label-w);
  text-align: left;
  color: var(--label-fg);
  text-transform: uppercase;     /* ALL CAPS */
  font-size: 1rem;            /* clearly smaller than topic-title */
  font-weight: 800;
  letter-spacing: 0.06em;        /* extra tracking improves caps readability */
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transform: translateY(1px);    /* optical baseline alignment with topic-title */
  /* white-space: nowrap; */
}

/* (optional) a touch more contrast on hover/focus without shouting */
.week-module > summary:hover .week-label,
.week-module > summary:focus-visible .week-label {
  color: #1E293B; /* slate-800 */
}