/* ══════════════════════ THE PROGRAMME BOARD ═══════════════════════════════
   The whole conference, one column per day.

   Four days side by side on a desktop; a tab strip and a single column below
   lg, because four columns on a phone is four columns of nothing. The day
   switching is done by :checked on hidden radio inputs, so it works with
   scripting off — JavaScript only adds arrow-key navigation on top of it.

   Loaded by the homepage and the participant portal. Both use the same markup
   (app/views/public/_schedule-board.php), so the board a delegate sees signed
   in is the board they saw signed out.
   ────────────────────────────────────────────────────────────────────────── */

.pc-board { position: relative; }
.pc-board-radio { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }

/* ── The day tabs. Only rendered where the columns collapse to one. ─────── */
.pc-board-tabs { display: none; }

.pc-board-tab {
  flex: 1 1 0; min-width: 4.2rem; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: .05rem;
  padding: .6rem .35rem; border-radius: var(--radius-sm);
  border: 1.5px solid var(--line); background: var(--surface);
  transition: border-color .15s, background .15s, transform .15s;
  -webkit-tap-highlight-color: transparent;
}
.pc-board-tab:hover { border-color: var(--brand); }
.pc-board-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pc-board-tab-dow {
  font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.pc-board-tab-day { font-size: 1.35rem; font-weight: 800; line-height: 1; }
.pc-board-tab-mon {
  font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.pc-board-tab-count {
  font-size: .6rem; font-weight: 700; color: var(--muted);
  background: var(--surface-2); border-radius: 999px;
  padding: .05rem .4rem; margin-top: .15rem;
}
.pc-board-tab-now {
  font-size: .58rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: #15803d; border-radius: 999px;
  padding: .08rem .42rem; margin-top: .15rem;
}
.pc-board-tab.is-past { opacity: .55; }

/* ── The columns ────────────────────────────────────────────────────────── */
.pc-board-grid {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

/* min-width:0 matters: without it a long session title widens its own track
   and the four columns stop being equal. */
.pc-board-col { display: flex; flex-direction: column; gap: .55rem; min-width: 0; }

.pc-board-colhead {
  display: flex; align-items: baseline; gap: .4rem;
  padding: .5rem .7rem; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line);
}
.pc-board-colhead.is-today {
  background: color-mix(in srgb, var(--brand) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
}
.pc-board-colday { font-weight: 800; font-size: .92rem; }
.pc-board-colmon {
  font-size: .66rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.pc-board-livedot {
  width: .5rem; height: .5rem; border-radius: 50%; background: #15803d;
  margin-left: auto; box-shadow: 0 0 0 3px color-mix(in srgb, #15803d 22%, transparent);
}

/* ── A session ──────────────────────────────────────────────────────────── */
.pc-board-card {
  position: relative; display: flex; flex-direction: column; gap: .18rem;
  padding: .7rem .8rem .7rem 1rem;
  border-radius: var(--radius-sm); text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
/* The pillar colour as a spine down the left edge rather than a wash across
   the card: at four columns a tinted background becomes a patchwork, and the
   session title stops being the thing you read first. */
.pc-board-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--tint, var(--brand));
}
.pc-board-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -12px rgba(2, 24, 48, .35);
  border-color: color-mix(in srgb, var(--tint, var(--brand)) 55%, var(--line));
}
.pc-board-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.pc-board-time {
  font-size: .72rem; font-weight: 800; letter-spacing: .03em;
  color: var(--tint, var(--brand)); font-variant-numeric: tabular-nums;
}
.pc-board-dash { opacity: .5; margin: 0 .12rem; }
.pc-board-title { font-weight: 700; font-size: .88rem; line-height: 1.3; }
.pc-board-meta {
  display: flex; flex-wrap: wrap; gap: .1rem .6rem;
  font-size: .7rem; color: var(--muted); margin-top: .1rem;
}
.pc-board-meta i { margin-right: .2rem; }
.pc-board-type {
  background: var(--surface-2); border-radius: 999px; padding: 0 .4rem; font-weight: 600;
}
.pc-board-state {
  align-self: flex-start; margin-top: .3rem;
  font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  border-radius: 999px; padding: .1rem .45rem;
  background: var(--surface-2); color: var(--muted);
}
.pc-board-state-register   { background: color-mix(in srgb, #15803d 15%, var(--surface)); color: #15803d; }
.pc-board-state-waitlist   { background: color-mix(in srgb, #b45309 16%, var(--surface)); color: #b45309; }
.pc-board-state-registered { background: color-mix(in srgb, var(--brand) 15%, var(--surface)); color: var(--brand); }

.pc-board-empty {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: 1.4rem .8rem; border-radius: var(--radius-sm);
  border: 1px dashed var(--line); color: var(--muted);
  font-size: .76rem; text-align: center;
}
.pc-board-empty i { font-size: 1.1rem; opacity: .6; }

/* ── Narrow screens: a tab strip, and one day at a time ─────────────────── */
@media (max-width: 61.99em) {
  .pc-board-tabs { display: flex; gap: .4rem; margin-bottom: 1rem; }

  .pc-board-grid { grid-template-columns: 1fr; }
  /* display:none rather than visibility, so a hidden day costs no height. */
  .pc-board-col { display: none; }
  .pc-board-colhead { display: none; }        /* the tab already carries the date */

  .pc-board-radio:nth-of-type(1):checked ~ .pc-board-grid .pc-board-col:nth-child(1),
  .pc-board-radio:nth-of-type(2):checked ~ .pc-board-grid .pc-board-col:nth-child(2),
  .pc-board-radio:nth-of-type(3):checked ~ .pc-board-grid .pc-board-col:nth-child(3),
  .pc-board-radio:nth-of-type(4):checked ~ .pc-board-grid .pc-board-col:nth-child(4),
  .pc-board-radio:nth-of-type(5):checked ~ .pc-board-grid .pc-board-col:nth-child(5),
  .pc-board-radio:nth-of-type(6):checked ~ .pc-board-grid .pc-board-col:nth-child(6),
  .pc-board-radio:nth-of-type(7):checked ~ .pc-board-grid .pc-board-col:nth-child(7),
  .pc-board-radio:nth-of-type(8):checked ~ .pc-board-grid .pc-board-col:nth-child(8) {
    display: flex;
  }

  .pc-board-radio:nth-of-type(1):checked ~ .pc-board-tabs .pc-board-tab:nth-child(1),
  .pc-board-radio:nth-of-type(2):checked ~ .pc-board-tabs .pc-board-tab:nth-child(2),
  .pc-board-radio:nth-of-type(3):checked ~ .pc-board-tabs .pc-board-tab:nth-child(3),
  .pc-board-radio:nth-of-type(4):checked ~ .pc-board-tabs .pc-board-tab:nth-child(4),
  .pc-board-radio:nth-of-type(5):checked ~ .pc-board-tabs .pc-board-tab:nth-child(5),
  .pc-board-radio:nth-of-type(6):checked ~ .pc-board-tabs .pc-board-tab:nth-child(6),
  .pc-board-radio:nth-of-type(7):checked ~ .pc-board-tabs .pc-board-tab:nth-child(7),
  .pc-board-radio:nth-of-type(8):checked ~ .pc-board-tabs .pc-board-tab:nth-child(8) {
    border-color: var(--brand);
    background: color-mix(in srgb, var(--brand) 12%, var(--surface));
  }

  .pc-board-card { padding: .8rem .9rem .8rem 1.1rem; }
  .pc-board-title { font-size: .95rem; }
}

@media (max-width: 29.99em) {
  .pc-board-tab { min-width: 0; padding: .5rem .2rem; }
  .pc-board-tab-day { font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pc-board-card, .pc-board-tab { transition: none; }
  .pc-board-card:hover { transform: none; }
}