/* =============================================================================
   SURFACE: Scheman calendar + session detail  (FR6 / S04)
   Composes the FOUNDATION layer (components.css). Tokens only — no hardcoded
   colors/px outside the scale. Loaded after components.css, so the few rules
   here that refine .sess / .kv intentionally win the cascade.

   Two distinct, text-backed signals on each session (AA: never color alone):
     - FORMAT  → left border (webinar = solid, onsite = double) + .sess__fmt text
     - PATH    → top accent rail (.sess--path-*) + .sess__path text label
   ========================================================================== */

.schedule-head__actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: var(--space-3);
}

/* ----- Session chip: internal layout ------------------------------------- */
/* The chip keeps its foundation .sess box (border-left = format). We add a
   path-tinted top rail and a tidy icon/time row + tag row inside .sess__body. */
.sess { border-top: 3px solid var(--border); }      /* default path rail (no path) */
.sess--path-dev  { border-top-color: var(--path-dev); }
.sess--path-arch { border-top-color: var(--path-arch); }
.sess--path-lead { border-top-color: var(--path-lead); }

.sess__body { display: block; }
.sess__row { display: inline-flex; align-items: center; gap: var(--space-1); }
.sess__icon { color: var(--ink-subtle); flex: none; }
.sess__time { display: inline; }                    /* override foundation block */

.sess__tags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: 2px; }
/* Path tag mirrors .sess__fmt but tinted to the path so the two signals read
   as a pair. Color is doubled by the text label inside. */
.sess__path {
  display: inline-block; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 0 4px; font-size: 10px; background: var(--surface-2); color: var(--ink-muted);
}
.sess--path-dev  .sess__path { background: var(--path-dev-soft);  color: var(--path-dev);  border-color: transparent; }
.sess--path-arch .sess__path { background: var(--path-arch-soft); color: var(--path-arch); border-color: transparent; }
.sess--path-lead .sess__path { background: var(--path-lead-soft); color: var(--path-lead); border-color: transparent; }

/* Agenda is the complete listing; keep it visible on desktop too. */
.agenda { display: block; margin-top: var(--space-8); }

/* Period-scoped empty note, inside one month/week period. Deliberately quieter
   than the page-level empty card so a quiet month never reads as an empty page;
   it is CSS-hidden with the grids on mobile, where only the agenda shows. */
.calempty {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  text-align: center;
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

/* ----- Milestone marker: inert calendar entry, not a session chip --------- */
/* Stacked by default: a month cell / week column is ~140px wide, and the old
   `type | body` two-column grid left the title a ~40px column it overflowed. */
.milestone-marker {
  display: grid; gap: var(--space-1); margin-top: var(--space-2);
  padding: var(--space-2); border: 1px dashed var(--border-strong);
  border-left: var(--space-1) solid var(--color-primary-ink);
  border-radius: var(--radius-sm); background: var(--surface-1); color: var(--ink);
}
.milestone-marker__type {
  justify-self: start; max-width: 100%;
  display: inline-block; border-radius: var(--radius-full);
  padding: 0 var(--space-1); background: var(--color-primary-soft);
  color: var(--color-primary-ink); font-family: var(--font-heading);
  font-size: var(--text-xs); font-weight: var(--font-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
}
.milestone-marker__body { min-width: 0; }
/* Long single-word milestone names must break rather than spill out of the cell. */
.milestone-marker__title { display: block; font-weight: var(--font-semibold); color: var(--ink-strong); overflow-wrap: anywhere; }
.milestone-marker__meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-1) var(--space-2); margin-top: var(--space-1);
  font-size: var(--text-xs); color: var(--ink-muted);
}
.milestone-marker__status {
  display: inline-block; border-radius: var(--radius-full);
  padding: 0 var(--space-1); background: var(--color-success-soft); color: var(--color-success);
  font-family: var(--font-heading); font-weight: var(--font-semibold);
}
.milestone-marker--ongoing { background: var(--surface-2); border-style: solid; }
/* The agenda row is full-width, so the type badge can sit beside the body. */
.milestone-marker--agenda {
  grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-2);
  margin-top: 0; margin-bottom: var(--space-3);
  padding: var(--space-3); border-radius: var(--radius);
}

/* ----- Staff edit affordance inside a calendar cell ----------------------- */
/* The shared .editorial-edit-link is a 44px nowrap pill — right for a page or
   card header, far too wide for a ~140px day cell, where it shoved the entry it
   belongs to out of shape. Compact it in the grids only; the agenda keeps the
   full-size target. */
.daycell .editorial-edit-link,
.weekcol .editorial-edit-link {
  min-block-size: 1.75rem; padding: 0 var(--space-2);
  font-size: var(--text-xs); max-width: 100%;
}
.daycell .editorial-edit-surface,
.weekcol .editorial-edit-surface { display: grid; gap: var(--space-1); justify-items: start; }

/* ----- Agenda variant: date-numeral block + accent rail (.session-card) ---- */
/* In the mobile agenda the chip becomes a proper row: numeral date block left,
   body right. Month/week cells keep the compact stacked chip untouched. */
.sess--agenda {
  display: flex; gap: var(--space-4); align-items: flex-start;
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-3);
}
.sess--agenda .sess__date {
  flex: none; min-width: 48px; text-align: center; line-height: 1;
  font-family: var(--font-heading); color: var(--color-primary-ink);
  padding-top: 2px;
}
.sess--agenda .sess__day { display: block; font-size: var(--text-2xl); font-weight: var(--font-extrabold); }
.sess--agenda .sess__mon {
  display: block; font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); margin-top: 2px;
}
.sess--agenda .sess__body { flex: 1 1 auto; min-width: 0; }
.sess--agenda .sess__title { font-weight: var(--font-semibold); }

/* =============================================================================
   SESSION DETAIL — reframed around the registration decision
   ========================================================================== */

/* ----- Hero band: title + badges + when/where facts ----------------------- */
.sess-hero {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-6);
  /* No top margin: the aside's first card has none either, and a grid item does
     not collapse its children's margins out — any value here drops the whole
     main column below the sidebar. The breadcrumb's margin-bottom is the gap. */
  margin: 0 0 var(--space-5);
}
.sess-hero__title { margin: var(--space-1) 0 var(--space-3); }
.sess-hero__badges { margin: 0 0 var(--space-4); }
.sess-hero__facts {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  font-size: var(--text-base); color: var(--ink-strong);
}
.sess-hero__fact { display: inline-flex; align-items: center; gap: var(--space-2); }
.sess-hero__fact .icon { color: var(--color-primary-ink); flex: none; }

@media (max-width: 24rem) {
  .member-session-hero .sess-hero__title { font-size: var(--text-xl); }
}

/* ----- Inline teacher portrait (between hero size 96 and chip size 28) ----- */
.sess-teacher { flex-wrap: wrap; }
.sess-teacher__item { display: inline-flex; align-items: center; gap: var(--space-3); }
.sess-teacher__portrait { width: 56px; height: 56px; }

/* ----- About: the module's own description/objectives on the session page --- */
.sess-about__objectives { margin-top: var(--space-4); }

/* ----- Module card: a card with an explicit affordance, not a metadata row --- */
.sess-module { padding: 0; overflow: hidden; margin-bottom: var(--space-5); }
.sess-module__media { display: block; border-bottom: 1px solid var(--border); }
.sess-module__body { padding: var(--space-5); }
.sess-module__title {
  font-family: var(--font-heading); font-weight: var(--font-bold);
  font-size: var(--text-lg); line-height: var(--leading-tight);
  margin: var(--space-1) 0 var(--space-3);
}
.sess-module__facts {
  list-style: none; margin: 0 0 var(--space-4); padding: 0;
  color: var(--ink-muted); font-size: var(--text-sm);
}
.sess-module__facts li + li { margin-top: var(--space-1); }
.sess-module__cta { width: 100%; justify-content: center; }

/* ----- Gold dividers: tighten the foundation's generous default margin ----- */
.sess-rule { margin: var(--space-6) 0; }

/* ----- CTA: one prominent primary, calendar export secondary -------------- */
.sess-cta__actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-3); margin-top: var(--space-4);
}
/* The primary fills the row on its own line on narrow widths; exports follow. */
.sess-cta__actions .btn-primary { flex: 1 1 auto; min-width: 16rem; justify-content: center; }
.sess-cta__actions .btn svg.icon { margin-right: var(--space-1); }

.session-signup-summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin-top: var(--space-3);
}

.session-signup-panel {
  display: grid; gap: var(--space-4); margin-top: var(--space-5);
  border-inline-start: 3px solid var(--color-primary);
}
.session-signup-panel__head {
  display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: var(--space-3);
}
.session-signup-panel__head h2 { margin-top: var(--space-1); }
.session-signup-panel form { margin: 0; }
.session-signup-panel .btn { min-block-size: 44px; }

.member-signup-card { display: grid; align-content: start; gap: var(--space-3); }
.member-signup-card h2 { font-size: var(--text-lg); margin: 0; }

@media (max-width: 36rem) {
  .session-signup-panel__head { display: grid; }
  .session-signup-panel .btn { width: 100%; justify-content: center; }
}