/* ============================================================
   Styles for the simplified session-picker list.
   This file is linked directly from index.html — nothing to
   copy-paste. The OLD grid/carousel rules (.session-strip,
   .session-carousel, .session-wk, .session-grid, .session-colhead,
   .session-cell, .session-stack, .session-picker-desktop,
   .session-picker-mobile) still live in components.css and are now
   unused dead code — worth deleting from there when convenient,
   though leaving them costs nothing since nothing renders that
   markup anymore.
   ============================================================ */

.session-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
}

.session-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}

.session-row:hover {
  border-color: var(--royal);
}

.session-row.on {
  border-color: var(--ink);
  background: var(--mist);
}

.session-row.is-gone {
  border-style: dashed;
  background: var(--mist);
  opacity: 0.55;
  cursor: default;
}

.session-row-date {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.session-row-day {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink);
}

.session-row-range {
  font-size: 13.5px;
  color: var(--ink-60);
}

.session-row-status {
  font-size: 12px;
  color: var(--ink-45);
}

.session-row-check {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  background: var(--ink);
}

.session-row:not(.on) .session-row-check {
  background: transparent;
}