@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600&display=swap');


/* ================================================================
   AI Campaign Lab — Component Styles
   Apple Human Interface Guidelines — web toepassing

   Elke component volgt de Apple-principes:
   Clarity (leesbaarheid), Deference (content voorop),
   Depth (hiërarchie via ruimte en subtiele diepte).
   ================================================================ */

/* ════════════════════════════════════════════════════════════════
   HEADER / NAVIGATIE
   ════════════════════════════════════════════════════════════════ */

.site-header {
  background: rgba(251, 251, 253, 0.82);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding: 0 22px;
  position: sticky;
  top: 0;
  z-index: 200;
}

.site-header__inner {
  max-width: 980px;
  margin: 0 auto;
  height: 52px;         /* Apple's macOS-stijl compact hoogte */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-header__logo {
  font-size: 0.9375rem;   /* 15px */
  font-weight: 600;
  color: var(--gray-1);
  display: flex;
  align-items: center;
  gap: 7px;
  letter-spacing: -0.015em;
}

.site-header__logo .logo-accent {
  color: var(--blue);
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-link {
  background: none;
  border: none;
  color: var(--blue);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 400;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 6px;
  transition: opacity 0.15s ease;
  text-decoration: none;
}
.btn-link:hover { opacity: 0.75; text-decoration: none; }

/* ════════════════════════════════════════════════════════════════
   STUDENT SELECTIE
   ════════════════════════════════════════════════════════════════ */

.student-select-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 6px;
  color: var(--gray-1);
}

.student-select-sub {
  color: var(--muted);
  font-size: 1.0625rem;
  margin-bottom: 32px;
  line-height: 1.47;
}

.student-search {
  width: 100%;
  max-width: 400px;
  padding: 12px 18px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  font: inherit;
  font-size: 1.0625rem;
  background: var(--white);
  color: var(--gray-1);
  margin-bottom: 24px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: var(--shadow-sm);
}
.student-search:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15);
}

.student-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  width: 100%;
  max-width: 720px;
  text-align: left;
}

.student-btn {
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
  text-align: left;
  transition:
    background   0.15s ease,
    border-color 0.15s ease,
    transform    0.2s  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  color: var(--gray-1);
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}
.student-btn:hover {
  background: var(--surface-2);
  border-color: rgba(0, 0, 0, 0.16);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--gray-1);
}

.student-btn__initial {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--blue-light);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════
   COUNTDOWN — Apple-stijl Featured Card
   ════════════════════════════════════════════════════════════════ */

.countdown-card {
  background: var(--gray-1);     /* Apple #1d1d1f donker */
  border-radius: var(--radius);
  padding: 24px 28px;
  color: #f5f5f7;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.countdown-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}

/* Subtiele top-highlight — Apple doet dit op donkere oppervlakken */
.countdown-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1) 30%,
    rgba(255, 255, 255, 0.1) 70%,
    transparent
  );
}

.countdown-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
}

.countdown-body  { flex: 1; }

.countdown-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 3px;
}

.countdown-text {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  color: #f5f5f7;
}
.countdown-text strong {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.countdown-sub {
  font-size: 0.8125rem;
  opacity: 0.5;
  margin-top: 3px;
  line-height: 1.4;
}

/* ════════════════════════════════════════════════════════════════
   ACTION CARD — "Wat moet ik nu doen?"
   Licht blauw-getint — Apple's "tinted card" stijl
   ════════════════════════════════════════════════════════════════ */

.action-card {
  background: #e8f0fd;          /* Apple licht-blauw tint */
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  /* Geen border — Apple vermijdt borders op gekleurde cards */
}
.action-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.action-card__inner {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 26px;
}

.action-card__icon {
  font-size: 2.2rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Afsluitkaart — Lab volledig afgerond (state O): groen accent i.p.v. blauw */
.action-card--done {
  background: #e7f6ec;          /* zachte groene tint */
}
.action-card--done .action-card__icon { color: #15803d; }
.action-card--done .action-card__label { color: #15803d; }

.action-card__body  { flex: 1; min-width: 0; }

.action-card__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 4px;
  opacity: 0.8;
}

.action-card__title {
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gray-1);
  margin-bottom: 8px;
}

.action-card__text {
  font-size: 0.9375rem;
  color: var(--gray-2);
  margin-bottom: 10px;
  line-height: 1.47;
}

.action-card__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
}
.action-card__list li {
  font-size: 0.9375rem;
  color: var(--gray-2);
  display: flex;
  align-items: center;
  gap: 8px;
}
.action-card__list li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
  opacity: 0.6;
}

.action-card__tip {
  font-size: 0.8125rem;
  color: var(--muted);
  font-style: italic;
}

.action-card__cta {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  padding-top: 3px;
}

@media (max-width: 600px) {
  .action-card__inner { flex-direction: column; gap: 12px; }
  .action-card__cta   { padding-top: 0; }
}

/* ════════════════════════════════════════════════════════════════
   CARD — standaard wit kaartoppervlak
   ════════════════════════════════════════════════════════════════ */

.card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.card--sm     { padding: 14px 18px; }
.card--accent { border-left: 3px solid var(--branch-color, var(--blue)); }

.card__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--subtle);
  margin-bottom: 5px;
}
.card__title { font-size: 1.0625rem; font-weight: 600; margin-bottom: 4px; letter-spacing: -0.01em; }
.card__body  { color: var(--muted); font-size: 0.9375rem; line-height: 1.47; }

/* ════════════════════════════════════════════════════════════════
   WEEK CARDS GRID
   ════════════════════════════════════════════════════════════════ */

.week-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.week-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
  transition:
    transform    0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow   0.25s ease;
}

.week-card--available {
  cursor: pointer;
}
.week-card--available:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.week-card--coming  { opacity: 0.62; }
.week-card--done    { }
.week-card--deadline { background: var(--orange-light, #fff4e0); }

/* Featured — actieve week of deadline: spans volle breedte, horizontale layout */
.week-card--featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto auto;
  align-items: center;
  column-gap: 20px;
  padding: 22px 26px;
}

.week-card--featured .week-card__strip {
  position: absolute;
  top: 0; left: 0; bottom: 0; right: auto;
  width: 4px;
  height: 100%;
  border-radius: 18px 0 0 18px;
}

.week-card--featured .week-card__icon {
  grid-column: 1;
  grid-row: 1 / 4;
  font-size: 2.2rem;
  align-self: center;
}

.week-card--featured .week-card__title {
  grid-column: 2;
  grid-row: 1;
  font-size: 1.0625rem;
}

.week-card--featured .week-card__subtitle {
  grid-column: 2;
  grid-row: 2;
  font-size: 0.9375rem;
  color: var(--gray-3);
}

.week-card--featured .week-card__desc {
  grid-column: 2;
  grid-row: 3;
  font-size: 0.9375rem;
}

.week-card--featured .week-card__footer {
  grid-column: 3;
  grid-row: 1 / 4;
  align-self: center;
  margin-top: 0;
  padding-top: 0;
}

/* Accent strip — enkel kleur, geen gradient */
.week-card__strip {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: transparent;
  transition: background 0.2s ease;
}
.week-card--available .week-card__strip { background: var(--blue); }
.week-card--done      .week-card__strip { background: var(--green); }
.week-card--deadline  .week-card__strip { background: var(--orange); }

.week-card__icon     { font-size: 1.6rem; line-height: 1; }
.week-card__title    { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; color: var(--gray-1); }
.week-card__subtitle { font-size: 0.75rem; color: var(--muted); }
.week-card__desc     { font-size: 0.75rem; color: var(--muted); flex: 1; line-height: 1.45; }
.week-card__footer   { margin-top: auto; padding-top: 6px; }

/* ════════════════════════════════════════════════════════════════
   BADGES — Apple "chip" stijl
   ════════════════════════════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 980px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.badge--available { background: var(--blue-light);   color: var(--blue); }
.badge--done      { background: var(--green-light);   color: #1a7c3e; }
.badge--coming    { background: var(--gray-8);        color: var(--muted); }
.badge--deadline  { background: var(--orange-light);  color: #7a4600; }
.badge--class {
  background: var(--blue-light);
  color: var(--blue);
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════
   BUTTONS — Apple's exacte CTA-stijl
   ════════════════════════════════════════════════════════════════ */

/*
  Apple primaire knop: solide #0071e3 blauw, afgeronde pill,
  geen gradient, geen schaduw, subtiele hover via opacity.
*/
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 22px;
  border-radius: 980px;
  border: none;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 400;
  cursor: pointer;
  text-decoration: none;
  transition:
    opacity   0.15s ease,
    transform 0.15s ease;
  letter-spacing: 0;
  line-height: 1;
}
.btn:hover  { opacity: 0.82; text-decoration: none; }
.btn:active { transform: scale(0.98); opacity: 1; }

.btn--primary {
  background: var(--blue);
  color: #fff;
}
.btn--primary:hover { color: #fff; }

.btn--secondary {
  background: transparent;
  color: var(--blue);
  border: 1.5px solid var(--blue);
  padding: 9px 21px;  /* -1px voor border-compensatie */
}
.btn--secondary:hover { color: var(--blue); }

/* "Ghost" variant — enkel tekst, Apple-blauw */
.btn--ghost {
  background: transparent;
  color: var(--blue);
  padding: 8px 14px;
}

.btn--green {
  background: var(--green);
  color: #fff;
}

.btn--dark {
  background: var(--gray-1);
  color: #f5f5f7;
}
.btn--dark:hover { color: #f5f5f7; }

.btn--sm    { padding: 7px 16px; font-size: 0.8125rem; }
.btn--full  { width: 100%; border-radius: var(--radius-sm); }
.btn:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }

/* ════════════════════════════════════════════════════════════════
   VOORTGANGSBALK
   ════════════════════════════════════════════════════════════════ */

.progress-track {
  background: rgba(0, 0, 0, 0.06);
  border-radius: 980px;
  height: 6px;     /* Apple gebruikt dunne progress bars */
  overflow: hidden;
  margin: 8px 0;
}

.progress-fill {
  height: 100%;
  border-radius: 980px;
  background: var(--blue);
  transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* Geen shimmer — Apple houdt het simpel */
}

.progress-steps {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
}
.progress-step {
  font-size: 0.6875rem;
  color: var(--subtle);
  font-weight: 500;
  text-align: center;
  flex: 1;
}
.progress-step--done   { color: var(--green); font-weight: 600; }
.progress-step--active { color: var(--blue);  font-weight: 600; }

/* ════════════════════════════════════════════════════════════════
   BRIEFINGKAART v2 — Apple "editorial card" stijl
   ════════════════════════════════════════════════════════════════ */

.briefing-v2 {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.briefing-v2:hover {
  box-shadow: var(--shadow-lg);
}

/* Top kleurstrip — de branch-kleur als smalle accentlijn */
/* (verwijst naar inline style op het element) */

.briefing-v2__top {
  padding: 24px 24px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-bottom: 1px solid var(--separator);
}

.briefing-v2__icon {
  font-size: 2.6rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.briefing-v2__meta { flex: 1; }

.briefing-v2__branch {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 4px;
  /* Kleur via inline style (branch-color) */
}

.briefing-v2__title {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.2;
  color: var(--gray-1);
}

.briefing-v2__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 980px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: flex-start;
}

.briefing-v2__opdracht {
  padding: 18px 24px;
  border-bottom: 1px solid var(--separator);
}

.briefing-v2__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--subtle);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.briefing-v2__text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--gray-2);
}

.briefing-v2__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-top: 1px solid var(--separator);
}

.briefing-v2__field {
  padding: 16px 20px;
  border-right: 1px solid var(--separator);
}
.briefing-v2__field:last-child { border-right: none; }
.briefing-v2__field-val {
  font-size: 0.875rem;
  color: var(--gray-2);
  line-height: 1.45;
  margin-top: 3px;
}

@media (max-width: 620px) {
  .briefing-v2__grid        { grid-template-columns: 1fr; }
  .briefing-v2__field       { border-right: none; border-bottom: 1px solid var(--separator); }
  .briefing-v2__field:last-child { border-bottom: none; }
  .briefing-v2__top         { flex-wrap: wrap; }
}

/* Legacy briefing-card (backwards compatibility) */
.briefing-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.briefing-card__header { padding: 18px 22px 14px; border-bottom: 1px solid var(--separator); background: var(--gray-8); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.briefing-card__body   { padding: 18px 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.briefing-card__full   { padding: 0 22px 18px; }
.briefing-card__stripe { height: 4px; }
.briefing-field__label { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--subtle); margin-bottom: 2px; }
.briefing-field__value { font-size: 0.9375rem; color: var(--gray-2); }

/* ════════════════════════════════════════════════════════════════
   KALENDER — tijdlijn planning
   ════════════════════════════════════════════════════════════════ */

.calendar-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

/* Verticale lijn — subtiel */
.calendar-grid::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 20px;
  bottom: 20px;
  width: 1px;
  background: var(--separator);
  z-index: 0;
}

.cal-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease;
  position: relative;
  z-index: 1;
}
.cal-row:hover { box-shadow: var(--shadow); }

/* Statussen — Apple gebruikt zachte achtergronden */
.cal-row--past     { opacity: 0.45; }
.cal-row--today    { background: var(--green-light, #e8f8ed); }
.cal-row--next     { background: var(--blue-light, #e8f0fd); }
.cal-row--upcoming { background: var(--white); }
.cal-row--deadline { background: var(--orange-light, #fff4e0); }

.cal-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gray-5);
  margin-top: 6px;
  flex-shrink: 0;
}
.cal-dot--past     { background: var(--gray-5); }
.cal-dot--today    { background: var(--green); }
.cal-dot--next     { background: var(--blue); }
.cal-dot--upcoming { background: var(--gray-4); }
.cal-dot--deadline { background: var(--orange); }

.cal-info  { flex: 1; }
.cal-week  { font-size: 0.6875rem; font-weight: 600; color: var(--subtle); margin-bottom: 1px; letter-spacing: 0.02em; }
.cal-date  { font-size: 0.875rem; font-weight: 500; color: var(--gray-1); }
.cal-meta  { font-size: 0.75rem; color: var(--muted); margin-top: 2px; }

.cal-badge {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 980px;
  white-space: nowrap;
  align-self: center;
}
.cal-badge--today    { background: var(--green);  color: #fff; }
.cal-badge--next     { background: var(--blue);   color: #fff; }
.cal-badge--upcoming { background: var(--gray-7); color: var(--muted); }
.cal-badge--past     { background: var(--gray-8); color: var(--subtle); }
.cal-badge--deadline { background: var(--orange); color: #fff; }

/* ════════════════════════════════════════════════════════════════
   CHECKLIST
   ════════════════════════════════════════════════════════════════ */

.checklist { list-style: none; display: flex; flex-direction: column; gap: 6px; }

.checklist__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 16px;
  background: var(--white);
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background 0.12s ease, box-shadow 0.15s ease;
  user-select: none;
}
.checklist__item:hover { background: var(--gray-8); }
.checklist__item--checked {
  background: var(--green-light);
}
.checklist__item--disabled { opacity: 0.38; cursor: not-allowed; }

.checklist__item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--green);
  flex-shrink: 0;
  cursor: pointer;
}
.checklist__item label         { font-size: 0.9375rem; flex: 1; cursor: pointer; color: var(--gray-2); }
.checklist__item--checked label { color: #1a7c3e; font-weight: 500; }

/* ════════════════════════════════════════════════════════════════
   VERSLAGLIJST / QUOTE
   ════════════════════════════════════════════════════════════════ */

.verslag-list { list-style: none; display: flex; flex-direction: column; gap: 1px; }

.verslag-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9375rem;
  padding: 12px 16px;
  background: var(--white);
  color: var(--gray-2);
  border-bottom: 1px solid var(--separator);
  transition: background 0.12s ease;
}
.verslag-list li:first-child { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.verslag-list li:last-child  { border-bottom: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.verslag-list li:hover { background: var(--gray-8); }
.verslag-list li::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--blue);
  opacity: 0.5;
  flex-shrink: 0;
}

/* Quote/callout */
.quote-block {
  background: var(--blue-light);
  border-left: 3px solid var(--blue);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  padding: 14px 18px;
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--gray-2);
  font-weight: 500;
}

/* ════════════════════════════════════════════════════════════════
   SAVE INDICATOR / FLASH MESSAGES
   ════════════════════════════════════════════════════════════════ */

.save-indicator {
  font-size: 0.8125rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 20px;
}
.save-indicator--saving { color: var(--orange); }
.save-indicator--saved  { color: var(--green); }
.save-indicator--error  { color: var(--red); }

.flash {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 8px;
}
.flash--success { background: var(--green-light); color: #1a7c3e; }
.flash--error   { background: var(--red-light);   color: #c41208; }

/* ════════════════════════════════════════════════════════════════
   DOCENTDASHBOARD
   ════════════════════════════════════════════════════════════════ */

.teacher-stat {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.teacher-stat__number {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--blue);
  line-height: 1;
  letter-spacing: -0.03em;
}
.teacher-stat__label { font-size: 0.875rem; color: var(--muted); }

.teacher-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.teacher-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--subtle);
  border-bottom: 1px solid var(--separator);
}
.teacher-table td { padding: 10px 14px; border-bottom: 1px solid var(--separator); vertical-align: middle; color: var(--gray-2); }
.teacher-table tr:hover td { background: var(--gray-8); }

.week-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 600;
}
.week-pill--done { background: var(--green-light); color: #1a7c3e; }
.week-pill--open { background: var(--gray-8); color: var(--muted); }

/* ════════════════════════════════════════════════════════════════
   LOGIN / FORMULIEREN
   ════════════════════════════════════════════════════════════════ */

.login-wrap  { max-width: 360px; margin: 80px auto; padding: 0 22px; }
.login-card  {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 36px 32px;
}
.login-card__title {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  text-align: center;
  color: var(--gray-1);
}
.login-card__icon {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
  color: var(--blue);
}
.login-card__student {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin-bottom: 16px;
  font-size: 1rem;
  font-weight: 600;
}
.login-card__sub {
  text-align: center;
  color: var(--gray-2);
  font-size: 0.9375rem;
  margin-bottom: 20px;
}
.login-card__hint {
  text-align: center;
  color: var(--muted);
  font-size: 0.8125rem;
  margin-top: 16px;
}
.form-input--pin {
  text-align: center;
  font-size: 1.75rem !important;
  letter-spacing: 0.4em;
  font-weight: 700;
  padding: 14px !important;
}
.student-btn--no-pin {
  opacity: 0.7;
}
.student-btn__badge {
  margin-left: auto;
  color: var(--muted);
  display: flex;
  align-items: center;
}

.form-group  { margin-bottom: 14px; }
.form-label  { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 5px; color: var(--gray-2); }
.form-input  {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 1.0625rem;
  background: var(--white);
  color: var(--gray-1);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15);
}

/* ════════════════════════════════════════════════════════════════
   WEEKPAGINA HEADER
   ════════════════════════════════════════════════════════════════ */

.week-page-header { padding: 36px 0 26px; }
.week-page-header__eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--branch-color, var(--blue));
  margin-bottom: 7px;
}
.week-page-header__title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 7px;
  color: var(--gray-1);
}
.week-page-header__sub { color: var(--muted); font-size: 1.0625rem; line-height: 1.47; }

/* ════════════════════════════════════════════════════════════════
   PLACEHOLDER PAGINA'S (week 3/4/5 nog niet beschikbaar)
   ════════════════════════════════════════════════════════════════ */

.placeholder-page {
  text-align: center;
  padding: 80px 22px;
}
.placeholder-page__icon  { font-size: 3rem; margin-bottom: 16px; }
.placeholder-page__title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  color: var(--gray-1);
}
.placeholder-page__sub { color: var(--muted); margin-bottom: 32px; font-size: 1.0625rem; line-height: 1.47; }

/* ════════════════════════════════════════════════════════════════
   SECTIE-STRUCTUUR
   ════════════════════════════════════════════════════════════════ */

.section { margin-top: 40px; }
.section__header { margin-bottom: 14px; }
.section__title  {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--gray-1);
  display: flex;
  align-items: center;
  gap: 8px;
}
.section__desc   { font-size: 0.875rem; color: var(--muted); margin-top: 2px; }

/* ════════════════════════════════════════════════════════════════
   HERO FOOTER META (student-select)
   ════════════════════════════════════════════════════════════════ */

.hero-footer {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.hero-pill {
  font-size: 0.8125rem;
  color: var(--muted);
  padding: 5px 14px;
  background: var(--gray-8);
  border-radius: 980px;
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   INLINE SVG-ICONEN
   ════════════════════════════════════════════════════════════════ */

.icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════
   TABLER WEBFONT-ICONEN — inline-uitlijning naast tekst
   ════════════════════════════════════════════════════════════════ */

.ti {
  vertical-align: -0.125em;
  line-height: 1;
}
/* In knoppen/links iets groter dan de tekst, net als de inline SVG's */
.btn .ti,
.btn-link .ti,
.dash-card__link .ti,
.portfolio-empty-link .ti {
  font-size: 1.05em;
}
/* In ronde status-badges het icoon op de badge-grootte schalen */
.week-pill .ti,
.step-nav__dot .ti,
.w4-substap__num .ti {
  font-size: 0.95em;
  vertical-align: -0.05em;
}

/* ════════════════════════════════════════════════════════════════
   PROMPT CARDS — AI-hulpmiddelen per weekpagina
   ════════════════════════════════════════════════════════════════ */

.prompt-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.prompt-card {
  background: var(--gray-8);
  border: 1px solid var(--gray-7);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.prompt-card__label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--subtle);
}

.prompt-card__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--gray-1);
}

.prompt-text {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--gray-2);
  font-family: var(--font-mono, 'SF Mono', 'Menlo', 'Monaco', monospace);
  white-space: pre-wrap;
  background: var(--white);
  border: 1px solid var(--separator);
  border-radius: var(--radius-xs);
  padding: 12px 14px;
  flex: 1;
}

.prompt-copy-btn {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: var(--font);
  color: var(--blue);
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px 0;
  transition: opacity 0.15s ease;
}
.prompt-copy-btn:hover { opacity: 0.72; }
.prompt-copy-btn--done { color: var(--green); }

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 820px) {
  .week-card--featured          { grid-template-columns: auto 1fr; }
  .week-card--featured .week-card__footer { grid-column: 1 / 3; grid-row: 4; }
  .grid-2, .grid-3, .grid-4    { grid-template-columns: 1fr; }
  .prompt-grid                  { grid-template-columns: 1fr; }
  .briefing-card__body          { grid-template-columns: 1fr; }
  .calendar-grid::before        { display: none; }
}

@media (max-width: 540px) {
  .week-cards-grid  { grid-template-columns: 1fr; }
  .countdown-card   { flex-direction: column; text-align: center; }
  .countdown-card::before { display: none; }
  .class-cards      { flex-direction: column; align-items: center; }
}

/* ════════════════════════════════════════════════════════════════
   PAKKET F — mobiele responsiviteit (header-overflow + touch-targets)
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  /* Header: lange studentnaam mag nooit horizontale overflow forceren */
  .site-header__inner { gap: 10px; }
  .site-header__nav   { gap: 8px; min-width: 0; }
  .site-header__nav .text-muted {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Touch-targets: knoppen en links minimaal 44px hoog */
  .btn { min-height: 44px; }
  .btn-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ════════════════════════════════════════════════════════════════
   STAP-NAVIGATOR — voortgangsindicator voor weekpagina's
   ════════════════════════════════════════════════════════════════ */

.step-nav {
  display: flex;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 4px;
  margin-bottom: 8px;
  gap: 0;
}
.step-nav::-webkit-scrollbar { display: none; }

.step-nav__item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.step-nav__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 980px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--subtle);
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
  line-height: 1;
}
.step-nav__btn:hover {
  color: var(--gray-1);
  background: var(--gray-8);
  text-decoration: none;
}

.step-nav__dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gray-7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--subtle);
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
}

.step-nav__label {
  display: none;
}

.step-nav__line {
  width: 16px;
  height: 1px;
  background: var(--gray-6);
  flex-shrink: 0;
  margin: 0 2px;
}

/* Active: huidige stap — branch-kleur */
.step-nav__item--active .step-nav__btn {
  color: var(--branch-color, var(--blue));
  background: var(--gray-8);
}
.step-nav__item--active .step-nav__dot {
  background: var(--branch-color, var(--blue));
  color: #fff;
}
.step-nav__item--active .step-nav__label {
  display: inline;
}

/* Scroll-driven: JS voegt --active toe aan het zichtbare item */
.step-nav__item--done .step-nav__dot {
  background: var(--green);
  color: #fff;
}
.step-nav__item--done .step-nav__btn { color: var(--muted); }

/* Locked: stap nog niet bereikbaar — geen link, slotje */
.step-nav__item--locked { cursor: default; }
.step-nav__item--locked .step-nav__btn { color: var(--gray-5); }
.step-nav__item--locked .step-nav__btn:hover { background: transparent; color: var(--gray-5); }
.step-nav__item--locked .step-nav__dot { background: var(--gray-7); color: var(--gray-5); }

@media (min-width: 640px) {
  .step-nav__label { display: inline; }
  .step-nav__btn { padding: 5px 10px; font-size: 0.8125rem; gap: 7px; }
  .step-nav__dot { width: 22px; height: 22px; font-size: 0.6875rem; }
  .step-nav__line { width: 20px; }
}

/* ════════════════════════════════════════════════════════════════
   CARD__LIST — lijsten binnen cards (vervang inline ul styles)
   ════════════════════════════════════════════════════════════════ */

.card__list {
  margin: 0;
  padding-left: 1.25rem;
  line-height: 1.9;
  font-size: 0.9125rem;
  color: var(--gray-2);
}

.card__list--ordered {
  list-style-type: decimal;
}

/* ════════════════════════════════════════════════════════════════
   SECTION MODIFIERS — visueel ritme
   ════════════════════════════════════════════════════════════════ */

.section--tinted {
  background: var(--gray-8);
  border-radius: var(--radius);
  padding: 24px;
}

.section--completion {
  background: var(--green-light);
  border-radius: var(--radius);
  padding: 24px;
}

.section--intro {
  background: var(--blue-light);
  border-radius: var(--radius);
  padding: 24px;
}

/* ════════════════════════════════════════════════════════════════
   CHECKLIST FASEN — groepering binnen checklist
   ════════════════════════════════════════════════════════════════ */

.checklist-phase {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.checklist-phase + .checklist-phase {
  margin-top: 16px;
}

.checklist-phase__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0 2px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--subtle);
}

.checklist-phase__icon {
  font-size: 0.875rem;
  line-height: 1;
}

/* ════════════════════════════════════════════════════════════════
   PROMPT CARD BADGES — primair / secundair onderscheid
   ════════════════════════════════════════════════════════════════ */

.prompt-card {
  position: relative;
}

.prompt-card--primary,
.prompt-card--secondary {
  border-left: 3px solid var(--branch-color, var(--blue));
}

.prompt-round-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 0.625rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-right: 2px;
}

/* Badge 1: gevuld — primaire stap */
.prompt-round-badge--1 {
  background: var(--branch-color, var(--blue));
  color: #fff;
}

/* Badge 2: omlijnd — volgt op stap 1, even actief */
.prompt-round-badge--2 {
  background: transparent;
  color: var(--branch-color, var(--blue));
  border: 1.5px solid var(--branch-color, var(--blue));
}

/* Utility: kaart die de volle breedte van een grid inneemt */
.col-span-2 {
  grid-column: 1 / -1;
}

/* ════════════════════════════════════════════════════════════════
   POSITIONERING FORMULE — vervangt inline style
   ════════════════════════════════════════════════════════════════ */

.formula-block {
  font-size: 1.05rem;
  line-height: 1.9;
  padding: 1rem;
  background: var(--surface-2, var(--gray-8));
  border-radius: var(--radius-xs);
  margin-top: 0.5rem;
}

/* ════════════════════════════════════════════════════════════════
   MINI-PERSONA FORMAT — vervangt inline style
   ════════════════════════════════════════════════════════════════ */

.persona-format {
  font-size: 0.88rem;
  line-height: 1.8;
  font-family: var(--font-mono, monospace);
  background: var(--surface-2, var(--gray-8));
  padding: 0.75rem;
  border-radius: 8px;
}

/* ════════════════════════════════════════════════════════════════
   BJORN-ZEGT — handgeschreven docentstem (Caveat font)
   ════════════════════════════════════════════════════════════════ */

.bjorn-says {
  font-family: "Caveat", cursive;
  font-weight: 600;
  font-size: 1.8rem;
  line-height: 1.4;
  color: #ffffff;
  background: #33296a;
  border-left: 6px solid #f58220;
  border-radius: 0 10px 10px 0;
  padding: 1.2rem 2rem;
  margin: 1.5rem 0;
  width: 100%;
  box-sizing: border-box;
  display: block;
}

.bjorn-says .acl-mark {
  display: none;
}

.bjorn-says .acl-mark--close {
  display: none;
}

.bjorn-says .acl-text {
  display: block;
  text-align: center;
}

/* ════════════════════════════════════════════════════════════════
   BRIEFING-KEUZE — kaarten in Fase 1
   ════════════════════════════════════════════════════════════════ */

.briefing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin: 1rem 0;
}

.briefing-card-keuze {
  position: relative;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}

.briefing-card-keuze:hover {
  border-color: var(--accent, #4f46e5);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
}

.briefing-card-keuze:focus-visible {
  border-color: var(--accent, #4f46e5);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.25);
}

.briefing-card-keuze--selected {
  border-color: var(--accent, #4f46e5);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18), var(--shadow);
}

.briefing-card-keuze__stripe {
  height: 5px;
}

.briefing-card-keuze__body {
  padding: 14px 16px 12px;
}

.briefing-card-keuze__branch {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.briefing-card-keuze__icon {
  font-size: 1rem;
}

.briefing-card-keuze__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-1);
  margin-bottom: 6px;
  line-height: 1.3;
}

.briefing-card-keuze__desc {
  font-size: 0.8125rem;
  color: var(--gray-3);
  line-height: 1.45;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.briefing-card-keuze__meta {
  font-size: 0.75rem;
  color: var(--subtle);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
}

.briefing-card-keuze__check {
  position: absolute;
  top: 10px;
  right: 10px;
  color: var(--accent, #4f46e5);
  opacity: 0;
  transition: opacity 0.15s;
  line-height: 1;
}

.briefing-card-keuze--selected .briefing-card-keuze__check {
  opacity: 1;
}

@media (max-width: 600px) {
  .briefing-grid {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════════════════
   FASE 2 WERKFASE — cyclus-tabs, panelen, stap-onthulling
   ════════════════════════════════════════════════════════════════ */

/* Fase 2 intro-blok */
.fase2-intro {
  margin-bottom: 28px;
}
.fase2-intro__title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gray-1);
  margin-bottom: 6px;
}
.fase2-intro__desc {
  font-size: 0.9375rem;
  color: var(--muted);
  line-height: 1.6;
}

/* Cyclus-tabs */
.cycle-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1.5px solid var(--gray-6, #e2e8f0);
  margin-bottom: 28px;
  overflow-x: auto;
  scrollbar-width: none;
}
.cycle-tabs::-webkit-scrollbar { display: none; }

.cycle-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border: none;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1.5px;
  background: none;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted, #64748b);
  cursor: pointer;
  border-radius: 6px 6px 0 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.cycle-tab:hover:not(:disabled) {
  color: var(--gray-1);
  background: var(--gray-8);
}
.cycle-tab--active {
  color: var(--branch-color, var(--blue));
  border-bottom-color: var(--branch-color, var(--blue));
  font-weight: 600;
}
.cycle-tab--done:not(.cycle-tab--active) {
  color: var(--green, #34c759);
}
.cycle-tab--locked,
.cycle-tab:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

/* Cyclus-panelen */
.cycle-panel { }
.cycle-panel--hidden { display: none; }

/* Cyclus-header */
.cycle-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-6, #e2e8f0);
}
.cycle-header__title {
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gray-1);
  margin-bottom: 4px;
}
.cycle-header__goal {
  font-size: 0.9375rem;
  color: var(--gray-2);
  margin-bottom: 2px;
}
.cycle-header__time {
  font-size: 0.8125rem;
  color: var(--muted);
  font-style: italic;
}

/* Cyclus-stappen */
.cycle-step {
  background: var(--white, #fff);
  border: 1.5px solid var(--gray-6, #e2e8f0);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 12px;
}
.cycle-step--hidden { display: none; }

.cycle-step__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.cycle-step__num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--branch-color, var(--blue));
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cycle-step__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-1);
  margin: 0;
}
.cycle-step__desc {
  font-size: 0.875rem;
  color: var(--gray-2);
  line-height: 1.55;
  margin-bottom: 10px;
}

/* Cyclus-footer */
.cycle-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 20px;
  margin-top: 8px;
  border-top: 1px solid var(--gray-6, #e2e8f0);
}

/* Side-by-side vergelijking (Cyclus C, stap 3) */
.cycle-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.cycle-compare__panel {
  background: var(--gray-8, #f8fafc);
  border: 1.5px solid var(--gray-6, #e2e8f0);
  border-radius: 8px;
  padding: 14px 16px;
}
.cycle-compare__label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 8px;
}
.cycle-compare__text {
  font-family: var(--font-mono, 'SF Mono', 'Menlo', 'Monaco', monospace);
  font-size: 0.8rem;
  color: var(--gray-2);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  min-height: 80px;
  max-height: 220px;
  overflow-y: auto;
}

@media (max-width: 600px) {
  .cycle-tabs    { flex-wrap: wrap; }
  .cycle-compare { grid-template-columns: 1fr; }
  .cycle-tab     { padding: 8px 12px; font-size: 0.8125rem; }
}

/* ════════════════════════════════════════════════════════════════
   DASHBOARD v2 — actiekaart vergroot, portfolio-preview, briefing
   ════════════════════════════════════════════════════════════════ */

/* Actiekaart — dashboard variant (vergroot, dominant) */
.action-card--dashboard .action-card__inner {
  padding: 28px 30px;
}
.action-card--dashboard .action-card__title {
  font-size: 1.625rem;
  letter-spacing: -0.025em;
  margin-bottom: 10px;
}
.action-card--dashboard .action-card__text {
  font-size: 1rem;
  line-height: 1.55;
  margin-bottom: 12px;
}

/* Portfolio preview card */
.portfolio-preview-card {
  display: block;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 22px;
  text-decoration: none;
  color: inherit;
  margin-bottom: 12px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.portfolio-preview-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  text-decoration: none;
  color: inherit;
}
.portfolio-preview-card__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--subtle);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.portfolio-preview-card__weeks {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.9375rem;
  font-weight: 500;
  margin-bottom: 5px;
}
.portfolio-preview-sep  { color: var(--muted); }
.portfolio-preview-week { color: var(--muted); }
.portfolio-preview-week--done { color: #1a7c3e; font-weight: 600; }
.portfolio-preview-card__sub {
  font-size: 0.8125rem;
  color: var(--muted);
  font-style: italic;
  margin: 0;
}

/* Briefing collapsible (details/summary) */
.briefing-details summary           { list-style: none; }
.briefing-details summary::-webkit-details-marker { display: none; }

.briefing-details__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 22px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: pointer;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--gray-1);
  user-select: none;
  transition: background 0.15s ease;
}
.briefing-details__summary:hover { background: var(--gray-8); }
.briefing-details[open] .briefing-details__summary {
  border-radius: var(--radius) var(--radius) 0 0;
}
.briefing-details__summary::after {
  content: '›';
  margin-left: auto;
  font-size: 1.25rem;
  color: var(--muted);
  transition: transform 0.2s ease;
  line-height: 1;
}
.briefing-details[open] .briefing-details__summary::after {
  transform: rotate(90deg);
}
.briefing-details__body .briefing-v2 {
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow);
}

/* Briefing reminder (Fase 2 & 3) */
.briefing-reminder {
  margin-bottom: 1.5rem;
  background: #f5f4fb;
  border-radius: 8px;
  padding: 0.75rem 1rem;
}
.briefing-reminder summary {
  cursor: pointer;
  color: #33296a;
  font-weight: 600;
}
.briefing-reminder__content {
  margin-top: 0.75rem;
}