/* ==========================================================================
   Event Schedule (Sheet) — SNOW-26-003 · WS1
   Ported from the approved prototype. Layout Hybrid · Broadcast watch bar · TSL brand icons ·
   A3 hanging alignment · 4px spacing base.

   Fonts: the component declares NO faces (Q16). It inherits the theme's body face and uses the
   theme's display preset for the two headline sizes, falling back to inherit.

   Tokens live on the component root, not :root, so the theme's own variables are untouched.
   ========================================================================== */
.tsl-schedule {
  --tss-ground: #ffffff;
  --tss-tint: #f6f8f9;
  --tss-tint2: #ebeef1;
  --tss-line: #e3e7eb;
  --tss-hair: #edf0f3;
  --tss-plate: #0b0d10;
  /* The grey scale, set by contrast rather than by eye (CJ, Sept 2). Worst case for each is the
     darkest ground it actually sits on, which is --tss-tint2 (the jump-to bar), not white:
       --tss-ink   #0B0D10  19.46:1
       --tss-dim   #4A525C   6.80:1 on --tss-tint2
       --tss-faint #626973   4.76:1 on --tss-tint2
     Choose values with headroom, never the one on the AA line: #666D75 computed to 4.4977 and
     looked like a pass at two decimals. If either is edited, re-run the contrast sweep. */
  --tss-ink: #0b0d10;
  --tss-dim: #4a525c;
  --tss-faint: #626973;
  --tss-accent: #ea0039;
  --tss-accent-ink: #c2002f;
  --tss-gold: #8a6a2f;
  --tss-daybar: #f6f6f6; /* client-specified, Lab 06 option C2 */
  --tss-caution: #8a6414;
  --tss-s1: 4px; --tss-s2: 8px; --tss-s3: 12px; --tss-s4: 16px; --tss-s6: 24px; --tss-s8: 32px; --tss-s12: 48px;
  /* Tap targets: 44×44 minimum, 12px minimum between adjacent targets. Named so an audit is a
     grep for var(--tss-tap. */
  --tss-tap: 44px;
  --tss-tapgap: var(--tss-s3);
  --tss-icon: 26px;
  --tss-gap: var(--tss-s3);
  --tss-display: var(--wp--preset--font-family--larken-variable, inherit);
  --tss-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tss-sticky-top: 0px;   /* site sticky header height, set by JS */
  --tss-nav-h: 0px;        /* docked Jump to bar height, set by JS */

  container-type: inline-size;
  color: var(--tss-ink);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.tsl-schedule *, .tsl-schedule *::before, .tsl-schedule *::after { box-sizing: border-box; }
.tsl-schedule :focus-visible { outline: 2px solid var(--tss-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .tsl-schedule * { transition: none !important; } }

.tsl-schedule svg.tss-i { width: 1em; height: 1em; fill: currentColor; flex: none; vertical-align: -0.12em; }

/* ---------- shell ---------- */
.tss-c { background: var(--tss-ground); border: 1px solid var(--tss-line); }
.tss-chd {
  padding: var(--tss-s6) var(--tss-s6) var(--tss-s4);
  border-bottom: 3px solid var(--tss-ink);
  display: flex; gap: var(--tss-s6); align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
}
.tss-chdL { flex: 1 1 300px; min-width: 0; }
.tss-chdR { flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--tss-s2); }
.tss-chdR > span { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800; color: var(--tss-faint); }
.tsl-schedule .tss-ev {
  font-family: var(--tss-display); font-weight: 400; font-size: 34px; line-height: 1.06;
  margin: 0 0 var(--tss-s2); letter-spacing: -0.01em; color: var(--tss-ink);
}
.tss-meta { font-size: 13px; color: var(--tss-dim); margin: 0; display: flex; gap: var(--tss-s4); flex-wrap: wrap; align-items: center; }
.tss-meta span { display: inline-flex; align-items: center; gap: 6px; }
.tss-orient { font-size: 11.5px; color: var(--tss-faint); margin: var(--tss-s3) 0 0; }

/* Your time / Venue time. Two separate targets with the standard gap rather than a segmented
   control — two 46px halves sharing an edge were one ambiguous target to a thumb. */
.tss-tzt { display: flex; gap: var(--tss-tapgap); background: transparent; }
.tss-tzt button {
  font: inherit; text-align: left; padding: var(--tss-s2) var(--tss-s3);
  border: 1px solid var(--tss-line); background: var(--tss-ground); border-radius: 0;
  cursor: pointer; display: flex; flex-direction: column; gap: 2px; transition: background 0.15s;
  min-height: var(--tss-tap); min-width: var(--tss-tap); color: var(--tss-ink);
}
.tss-tzt b { font-size: 12.5px; font-weight: 700; color: var(--tss-ink); line-height: 1.2; white-space: nowrap; }
.tss-tzt i { font-style: normal; font-size: 10.5px; color: var(--tss-faint); line-height: 1.2; white-space: nowrap; }
.tss-tzt button:hover { background: var(--tss-tint); }
.tss-tzt button[aria-pressed="true"] {
  background: var(--tss-accent); box-shadow: 0 0 0 1px var(--tss-accent); border-color: var(--tss-accent);
  position: relative; z-index: 1;
}
.tss-tzt button[aria-pressed="true"] b { color: #ffffff; }
.tss-tzt button[aria-pressed="true"] i { color: rgba(255, 255, 255, 0.8); }
.tss-tzt button:focus-visible { outline: 2px solid var(--tss-ink); outline-offset: 2px; }

/* ---------- day jump + day bars ---------- */
.tss-daynav {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--tss-tapgap);
  padding: var(--tss-s3) var(--tss-s6); background: var(--tss-tint2); border-bottom: 1px solid var(--tss-line);
  /* Docks below the site header and stays until the end of the component (a direct child of
     .tss-c, so sticky releases at the block end). Day bars dock beneath it. */
  position: sticky; top: var(--tss-sticky-top); z-index: 31;
}
.tss-daynav > span { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800; color: var(--tss-faint); }
.tss-daynav button {
  font: inherit; font-size: 12px; font-weight: 700; color: var(--tss-ink); cursor: pointer;
  background: var(--tss-ground); border: 1px solid var(--tss-line); border-radius: 0; padding: 6px 10px;
  min-height: var(--tss-tap); display: inline-flex; align-items: center;
}
.tss-daynav button:hover { border-color: var(--tss-accent); color: var(--tss-accent-ink); }

.tss-dayhd {
  background: var(--tss-daybar); color: var(--tss-ink); padding: var(--tss-s4) var(--tss-s6);
  display: flex; align-items: center; gap: var(--tss-s3); flex-wrap: wrap;
  box-shadow: inset 0 1px 0 var(--tss-line), inset 0 -1px 0 var(--tss-line);
  position: sticky; top: calc(var(--tss-sticky-top) + var(--tss-nav-h)); z-index: 30;
}
.tsl-schedule .tss-dayhd > h3,
.tsl-schedule .tss-dayhd > h4,
.tsl-schedule .tss-dayhd > h5 {
  font-family: var(--tss-display); font-weight: 400; font-size: 24px; margin: 0; line-height: 1.1; color: var(--tss-ink);
}
.tss-dl { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 800; color: var(--tss-gold); }
.tss-sh { margin-left: auto; font-size: 11.5px; color: var(--tss-dim); }

/* ---------- session row ---------- */
.tss-s {
  display: grid; grid-template-columns: 126px 1fr; gap: var(--tss-s6); padding: var(--tss-s6);
  border-bottom: 1px solid var(--tss-hair); align-items: start; position: relative;
}
.tss-s.feat { box-shadow: inset 4px 0 0 var(--tss-accent); }
.tss-ptm { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
/* Session time at 25px / weight 500 (client, Sept 2). Size does the separating against the
   17px/700 title; the time no longer competes on weight. Do not drop to 400. */
.tss-ptm b { display: block; font-weight: 500; font-size: 25px; line-height: 1.05; }
.tss-ptm i { display: block; font-style: normal; font-family: var(--tss-mono); font-size: 11px; color: var(--tss-faint); margin-top: var(--tss-s1); }
.tss-ptm .tss-tbd { display: block; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 800; color: var(--tss-caution); }

/* A3 · hanging icon: the icon sits beside the title; everything below returns to the body edge */
.tsl-schedule .tss-pn {
  font-family: inherit; font-weight: 700; font-size: 17px; line-height: 1.3; margin: 0;
  display: flex; gap: var(--tss-gap); align-items: center; color: var(--tss-ink); text-transform: none; letter-spacing: 0;
}
.tss-gi {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: var(--tss-icon); height: var(--tss-icon); border: 1px solid var(--tss-line); color: var(--tss-faint);
  font-size: calc(var(--tss-icon) * 0.5);
}
.tss-s.feat .tss-gi { border-color: var(--tss-accent); color: var(--tss-accent-ink); }
.tss-pd { font-size: 13.5px; color: var(--tss-dim); margin: var(--tss-s2) 0 0; line-height: 1.6; max-width: 62ch; }
.tss-pd a { color: var(--tss-accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.tss-pd a:hover { text-decoration-thickness: 2px; }
.tss-pm { display: flex; gap: var(--tss-s4); flex-wrap: wrap; margin-top: var(--tss-s3); font-size: 11.5px; color: var(--tss-faint); }
.tss-pm span { display: inline-flex; align-items: center; gap: 6px; }
.tss-pm .tss-badgeM { color: var(--tss-gold); font-weight: 700; }
.tss-runs { margin: var(--tss-s3) 0 0; padding: 0 0 0 var(--tss-s3); list-style: none; border-left: 2px solid var(--tss-line); }
.tss-runs li { font-size: 13px; color: var(--tss-dim); padding: 2px 0; display: grid; grid-template-columns: 104px 1fr; gap: var(--tss-s3); }
.tss-runs b { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--tss-ink); font-size: 12.5px; }
.tss-bwrap { margin-top: var(--tss-s3); }

/* Watch bar: fits its content rather than spanning the column (Lab 05). */
.tss-b3 {
  background: var(--tss-plate); color: #ffffff; display: inline-flex; align-items: center; gap: var(--tss-s3);
  padding: 10px var(--tss-s4); flex-wrap: wrap; max-width: 100%;
}
.tss-b3 .tss-lb { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.tss-b3 .tss-dotlive { width: 6px; height: 6px; background: var(--tss-accent); border-radius: 50%; box-shadow: 0 0 0 3px rgba(234, 0, 57, 0.28); }
.tss-b3 img { height: 17px; width: auto; display: block; }
.tss-b3 .tss-netname { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 800; }
.tss-b3 .tss-when { font-size: 11.5px; color: rgba(255, 255, 255, 0.72); font-variant-numeric: tabular-nums; }

/* ---------- links + rail ---------- */
.tss-acts { display: flex; justify-content: space-between; align-items: center; gap: var(--tss-s4); flex-wrap: wrap; margin-top: var(--tss-s3); }
.tss-acts .tss-lnks { display: flex; gap: var(--tss-tapgap); flex-wrap: wrap; }
/* The box grows to the tap target; the INK does not. The underline lives on the inner span. */
.tss-alink {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 800;
  color: var(--tss-accent-ink); text-decoration: none; display: inline-flex; gap: 5px; align-items: center;
  min-height: var(--tss-tap);
}
.tss-alink > span { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.tss-alink:hover { color: var(--tss-ink); }
/* A label with no usable URL keeps its words and loses every cue that says "clickable". */
.tss-alink.is-plain { color: var(--tss-faint); cursor: default; }
.tss-alink.is-plain > span { border-bottom: 0; padding-bottom: 0; }

.tss-srail { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: var(--tss-s4); margin-top: var(--tss-s3); }
.tss-pby { display: flex; align-items: center; gap: var(--tss-s2); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800; color: var(--tss-faint); }
.tss-spmark { height: 22px; width: auto; display: block; max-width: 100%; }
.tss-spname { font-size: 12px; letter-spacing: 0.06em; color: var(--tss-dim); }
.tss-splink { display: inline-flex; align-items: center; min-height: var(--tss-tap); }
.tss-abtn2 {
  font: inherit; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 800;
  padding: 9px 13px; border: 1px solid var(--tss-ink); background: var(--tss-ground); color: var(--tss-ink);
  text-decoration: none; white-space: nowrap; min-height: var(--tss-tap); border-radius: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.tss-abtn2:hover { border-color: var(--tss-accent); color: var(--tss-accent-ink); }
.tss-abtn2.is-plain {
  border: 0; background: none; padding: 0; color: var(--tss-faint);
  font-size: 12px; letter-spacing: 0.06em; text-transform: none; font-weight: 500; min-height: 0; cursor: default;
}

/* ---------- footer ---------- */
.tss-ft {
  padding: var(--tss-s3) var(--tss-s6); border-top: 1px solid var(--tss-line); background: var(--tss-tint);
  font-size: 12.5px; color: var(--tss-dim); display: flex; justify-content: space-between; gap: var(--tss-s3); flex-wrap: wrap;
}
.tss-ft a { min-height: var(--tss-tap); display: inline-flex; align-items: center; gap: 6px; color: var(--tss-accent-ink); }

/* ---------- no-JS fallback ---------- */
.tsl-schedule__noscript { font-size: 13px; color: var(--tss-dim); }
.tsl-schedule__noscript-list { font-size: 14px; }

/* ---------- wide: the rail becomes a real third grid column ---------- */
@container (min-width: 641px) {
  .tss-s:has(.tss-srail) { grid-template-columns: 126px 1fr auto; }
  .tss-srail { flex-direction: column; align-items: flex-end; justify-content: center; align-self: center; max-width: 180px; margin-top: 0; }
  .tss-spname { text-align: right; }
}

/* ---------- narrow ---------- */
@container (max-width: 640px) {
  .tss-c { --tss-icon: 32px; --tss-gap: var(--tss-s4); }
  .tss-chd { padding: var(--tss-s6) var(--tss-s4); gap: var(--tss-s4); }
  .tsl-schedule .tss-ev { font-size: 31px; }
  .tss-chdR { width: 100%; }
  .tss-tzt { width: 100%; }
  .tss-tzt button { flex: 1; }
  .tss-daynav, .tss-dayhd, .tss-ft { padding-left: var(--tss-s4); padding-right: var(--tss-s4); }
  .tsl-schedule .tss-dayhd > h3, .tsl-schedule .tss-dayhd > h4, .tsl-schedule .tss-dayhd > h5 { font-size: 20px; }
  .tss-sh { margin-left: 0; width: 100%; }
  /* Option B, the uniform lift: every seam in the session goes up one step on the token scale. */
  .tss-s { grid-template-columns: 1fr; gap: var(--tss-s3); padding: var(--tss-s6); }
  .tss-pd { margin-top: var(--tss-s3); }
  .tss-pm { margin-top: var(--tss-s4); }
  .tss-acts { margin-top: var(--tss-s4); }
  .tss-srail { margin-top: var(--tss-s4); }
  .tss-ptm { display: flex; gap: var(--tss-s3); align-items: baseline; flex-wrap: wrap; }
  .tss-ptm i { margin-top: 0; }
  .tss-runs li { grid-template-columns: 96px 1fr; }
  .tss-b3 { padding: var(--tss-s2) var(--tss-s3); gap: var(--tss-s2); }
}