/* Schedule index: same palette, typography and cards as the learning indexes. */
body.session-browser {
  --sans: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  --line: #dce3ed; --tint: #f7f8fa;
  background: #f7f8fa; color: #455268; font-family: var(--sans);
  font-size: 18px; line-height: 1.8; letter-spacing: .05em;
  word-break: normal; overflow-wrap: anywhere;
}
.session-browser main h1, .session-browser main h2, .session-browser main h3 {
  font-family: inherit; letter-spacing: .02em; line-height: 1.6;
}
.session-browser main .inner { max-width: 1120px; }
.session-browser main > section { padding: 32px 16px; }
.session-browser .session-intro { padding-bottom: 0; }
.session-intro h1 { font-size: 32px; margin: 8px 0 16px; }
.session-intro p { color: #59667b; margin: 0; }
.sample-label { font-size: 14px; font-weight: 600; }
.session-browser .month-tabs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
  width: 100%; padding: 8px; border: 1px solid #dce3ed; border-radius: 18px; background: #eef2f7;
}
.session-browser .month-tabs a[data-month] {
  display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 48px;
  padding: 8px; border: 1px solid transparent; border-radius: 18px; color: #52617a;
  text-decoration: none; text-align: center; font-size: 16px; font-weight: 600; line-height: 1.8;
  transition: background .15s, color .15s;
}
.month-tabs a:first-child { grid-column: 1 / -1; }
.session-browser .month-tabs a:hover { background: #e0e7f1; }
.session-browser .month-tabs a[aria-selected="true"] { background: #2c3550; color: #fff; }
.session-browser a:focus-visible { outline: 3px solid #657d9f; outline-offset: 4px; }
.month-panel { padding: 32px 0 0; scroll-margin-top: 24px; }
.month-panel[hidden] { display: none; }
.panel-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; margin-bottom: 16px; }
.panel-heading h2 { font-size: 24px; margin: 0; }
.panel-heading p { font-size: 16px; color: #59667b; margin: 0; }
.session-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 24px; }
.session-card { display: flex; flex-direction: column; min-width: 0; padding: 24px; border: 1px solid #dce3ed; border-radius: 18px; background: #fff; }
.session-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; color: #59667b; margin-bottom: 24px; }
.session-meta .tag { padding: 0 8px; min-height: 32px; display: inline-flex; align-items: center; background: #eef2f7; color: #52617a; border-radius: 8px; margin: 0; font-size: 14px; }
.session-day { font-size: 28px; font-weight: 600; color: #303b54; margin-bottom: 24px; }
.session-day span { display: block; font-size: 16px; font-weight: 500; color: #59667b; margin-top: 8px; }
.session-card h3 { font-size: 22px; margin-bottom: 16px; }
.session-card > p:not(.session-day) { font-size: 18px; margin-bottom: 24px; }
.session-card > p:last-child { margin-bottom: 0; }
.session-browser .sessions .session-link, .session-browser .sessions a.archive-watch[href] {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 56px; padding: 16px; border: 1px solid #d4dce8; border-radius: 18px;
  background: #eef2f7; color: #2c3550; text-decoration: none; font-size: 16px; font-weight: 600; line-height: 1.8;
}
.session-browser .sessions .session-link { margin-top: auto; }
.session-browser .sessions a.archive-watch[href] { width: fit-content; max-width: 100%; margin-top: 16px; }
.session-browser .session-card a.archive-watch[href] { width: 100%; margin-top: auto; }
.session-browser .sessions .session-link:hover, .session-browser .sessions a.archive-watch[href]:hover { background: #e0e7f1; border-color: #9aaac2; }
.archive-watch svg { width: 24px; height: 24px; flex-shrink: 0; }
.archive-watch > span:last-child { margin-left: auto; }
.not-ready { margin-top: auto; padding-top: 16px; border-top: 1px solid #dce3ed; color: #59667b; font-size: 16px !important; }
.archive-help { margin: 24px 0 0; font-size: 16px; color: #59667b; }
.support-note { margin-top: 24px; padding: 24px; border-radius: 18px; background: #eef2f7; font-size: 16px; }
.support-note p:last-child { margin-bottom: 0; }
.schedule-session-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.session-status { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14px; font-weight: 500; }
.session-ended { color: #59667b; }
.session-archive-status { display: inline-flex; align-items: center; gap: 8px; padding: 0 8px; min-height: 32px; border: 1px solid #cbded7; border-radius: 18px; background: #edf5f1; color: #356052; }
.session-archive-status::before { content: ""; width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: #51836e; }
.schedule-table { margin-top: 24px; }
.schedule-table table { width: 100%; margin: 0; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.schedule-table th, .schedule-table td { padding: 24px; border: 0; border-bottom: 1px solid #dce3ed; background: #fff; white-space: normal; }
.schedule-table thead th { background: #eef2f7; color: #59667b; font-size: 16px; }
.schedule-table th:first-child { width: 224px; }
.schedule-table small { display: block; font-size: 16px; font-weight: 500; color: #59667b; margin-top: 8px; }
.schedule-table td p { margin: 8px 0 0; font-size: 18px; }
.session-browser .schedule-table th a { display: inline-flex; align-items: center; min-height: 48px; padding: 8px 0; font-weight: 600; text-underline-offset: 8px; }
.schedule-table td > strong, .schedule-session-title > strong { font-size: 20px; }
@media (max-width: 767px) {
  /* Keep the native table relationships while stacking each date and its details. */
  .schedule-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
  .schedule-table tbody { display: grid; gap: 16px; }
  .schedule-table tr { display: block; border: 1px solid #dce3ed; border-radius: 18px; overflow: hidden; background: #fff; }
  .schedule-table th:first-child, .schedule-table td { display: block; width: 100%; min-width: 0; padding: 24px; border: 0; }
  .schedule-table th:first-child { background: #eef2f7; }
  .schedule-table th a { font-size: 22px; }
  .schedule-table small { margin-top: 0; }
}
@media (min-width: 768px) {
  .session-browser main > section { padding: 32px; }
  .session-browser .session-intro { padding-top: 48px; padding-bottom: 0; }
  .session-intro h1 { font-size: 40px; }
  .session-browser .month-tabs { grid-template-columns: minmax(200px, 2fr) repeat(4, minmax(0, 1fr)); }
  .month-tabs a:first-child { grid-column: auto; }
  .session-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .schedule-table { border: 1px solid #dce3ed; border-radius: 18px; overflow: hidden; }
  .schedule-table tbody tr:last-child > * { border-bottom: 0; }
}
@media (min-width: 1200px) {
  .session-browser main > section { padding: 32px 48px 48px; }
  .session-browser .session-intro { padding-top: 48px; padding-bottom: 0; }
  .session-card { padding: 32px; }
}

/* Three follow-up appointments form one clearly labeled group. */
.online-followup {grid-column:1 / -1;border-color:#c2cfdf;}
.online-followup .followup-sessions {list-style:none;padding:0;margin:0;display:grid;gap:16px;}
.followup-sessions li {display:flex;flex-direction:column;gap:16px;padding:24px;border:1px solid #dce3ed;border-radius:18px;background:#f7f9fc;margin:0;}
.followup-date {font-size:22px;font-weight:600;color:#303b54;margin-bottom:8px!important;}
.followup-date span {display:block;font-size:18px;margin-top:8px;}
.followup-participants {font-size:16px;margin:0!important;}
.session-browser .followup-sessions .session-link {width:100%;margin:0;}
.visually-hidden {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
@media(min-width:768px){
  .followup-sessions li {flex-direction:row;align-items:center;justify-content:space-between;}
  .session-browser .followup-sessions .session-link {width:auto;min-width:144px;flex-shrink:0;}
}