/*
 * The training schedule — /training-schedule.
 *
 * Every rule starts at .ts, so the page's styles stay on this page and nothing
 * here reaches the shared header, footer or main.css. The tokens repeat the
 * site palette locally rather than reading main.css variables, because the
 * board must look the same whichever stylesheet a deployment loaded first.
 *
 * The layout this replaces put every session in one 580px scroll box with six
 * columns of equal weight. A learner is looking for one thing — when is my
 * class, and how do I get in — so the time and the way in carry the weight
 * here, and everything else is quiet.
 */

.ts {
  --ts-ink: #062A40;
  --ts-ink-2: #3C5C70;
  --ts-muted: #6B8496;
  --ts-line: #E3EAF0;
  --ts-line-2: #CFE0EC;
  --ts-soft: #F3F8FB;
  --ts-brand: #0C8CE9;
  --ts-brand-600: #0A6FBF;
  --ts-teal: #14B8A6;
  --ts-green: #0E9F6E;
  --ts-amber: #B45309;
  --ts-rose: #E11D48;
  --ts-grad: linear-gradient(120deg, #0C8CE9, #14B8A6);
  --ts-bar-h: 118px;          /* measured by the script; this is the fallback */
  color: var(--ts-ink);
  font-family: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: #fff;
}

.ts *, .ts *::before, .ts *::after { box-sizing: border-box; }

/* The script hides a row by setting [hidden], and a display declared in a rule
   here would beat the browser's own [hidden] { display: none }. Every element
   this page hides carries a display of its own, so it is stated once. */
.ts [hidden] { display: none !important; }
.ts .ts-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.ts .ts-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ts a { text-decoration: none; }
.ts .ts-i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ts :focus-visible { outline: 2px solid var(--ts-brand); outline-offset: 2px; border-radius: 6px; }

/* ------------------------------------------------------------- breadcrumb */
.ts .ts-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 16px 0 0; font-size: 13px; color: var(--ts-muted); }
.ts .ts-crumbs a { color: var(--ts-muted); }
.ts .ts-crumbs a:hover { color: var(--ts-brand); }
.ts .ts-crumbs span[aria-current] { color: var(--ts-ink-2); font-weight: 700; }

/* ------------------------------------------------------------------- hero */
.ts .ts-hero {
  padding: clamp(24px, 3.4vw, 44px) 0 clamp(26px, 3.6vw, 46px);
  background:
    radial-gradient(110% 92% at 88% 4%, #E8F4FD 0%, rgba(232,244,253,0) 58%),
    radial-gradient(86% 78% at -4% 100%, #E6FAF6 0%, rgba(230,250,246,0) 54%),
    #fff;
}
.ts .ts-hero__in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 3.6vw, 48px); align-items: center; }
.ts .ts-eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ts-brand); }
.ts .ts-eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--ts-grad); }
.ts .ts-hero h1 { margin: 0 0 14px; font-size: clamp(30px, 4vw, 48px); line-height: 1.08; letter-spacing: -.028em; color: var(--ts-ink); }
.ts .ts-hero h1 em { font-style: normal; background: var(--ts-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ts .ts-lede { margin: 0; max-width: 56ch; font-size: 16.5px; line-height: 1.66; color: var(--ts-ink-2); }
.ts .ts-facts { display: flex; flex-wrap: wrap; gap: 9px; margin: 22px 0 0; padding: 0; list-style: none; }
.ts .ts-facts li { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--ts-line); font-size: 13px; font-weight: 700; color: var(--ts-ink-2); box-shadow: 0 1px 2px rgba(6,42,64,.04); }
.ts .ts-facts b { color: var(--ts-ink); font-weight: 800; }
.ts .ts-facts .ts-i { width: 15px; height: 15px; stroke: var(--ts-brand); }

/* the next session, called out — the one fact most visitors came for */
/* No overflow:hidden here — the calendar menu opens out of this card, and a
   clipped popover is worse than a bar that has to round its own corners. */
.ts .ts-next { position: relative; padding: 22px; border-radius: 20px; background: #fff; border: 1px solid var(--ts-line); box-shadow: 0 26px 56px -38px rgba(6,42,64,.62); }
.ts .ts-next::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; border-radius: 20px 0 0 20px; background: var(--ts-grad); }
.ts .ts-next__tag { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 12px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ts-teal); }
.ts .ts-next__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ts-teal); animation: ts-pulse 2.2s infinite; }
.ts .ts-next h2 { margin: 0 0 10px; font-size: 20px; line-height: 1.28; letter-spacing: -.015em; color: var(--ts-ink); }
.ts .ts-next h2 a { color: inherit; }
.ts .ts-next h2 a:hover { color: var(--ts-brand); }
.ts .ts-next__when { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 16px; font-size: 14px; font-weight: 700; color: var(--ts-ink-2); }
.ts .ts-next__when span { display: inline-flex; align-items: center; gap: 7px; }
/* the same one time, on the card */
.ts .ts-next__clock { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0 0 14px; }
.ts .ts-next__clock .ts-i { align-self: center; stroke: var(--ts-brand); }
.ts .ts-next__ref { font-size: 12px; font-weight: 700; color: var(--ts-muted); }

.ts .ts-next__cd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0 0 18px; padding: 12px 14px; border-radius: 13px; background: var(--ts-soft); border: 1px solid var(--ts-line); font-size: 13px; font-weight: 700; color: var(--ts-muted); }
.ts .ts-next__cd b { font-size: 19px; font-weight: 800; color: var(--ts-ink); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ts .ts-next__cta { display: flex; flex-wrap: wrap; gap: 9px; }

@keyframes ts-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(20,184,166,.5); }
  70%  { box-shadow: 0 0 0 9px rgba(20,184,166,0); }
  100% { box-shadow: 0 0 0 0 rgba(20,184,166,0); }
}

/* ---------------------------------------------------------------- buttons */
.ts .ts-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border: 0; border-radius: 12px; font-family: inherit; font-size: 14px; font-weight: 800; line-height: 1; white-space: nowrap; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease; }
.ts .ts-btn--brand { color: #fff; background: var(--ts-grad); box-shadow: 0 12px 26px -14px rgba(12,140,233,.85); }
.ts .ts-btn--brand:hover { transform: translateY(-1px); color: #fff; box-shadow: 0 16px 30px -14px rgba(12,140,233,.95); }
.ts .ts-btn--join { color: #fff; background: linear-gradient(120deg, #0E9F6E, #14B8A6); box-shadow: 0 12px 26px -14px rgba(14,159,110,.9); }
.ts .ts-btn--join:hover { transform: translateY(-1px); color: #fff; }
.ts .ts-btn--ghost { color: var(--ts-ink); background: #fff; border: 1.5px solid var(--ts-line-2); }
.ts .ts-btn--ghost:hover { color: var(--ts-brand); border-color: var(--ts-brand); }
.ts .ts-btn--sm { height: 38px; padding: 0 14px; font-size: 13px; border-radius: 10px; }

/* ------------------------------------------------------------- filter bar */
.ts .ts-bar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255,255,255,.93);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--ts-line); border-bottom: 1px solid var(--ts-line);
}
.ts .ts-bar__in { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 12px 0; }

/* the class-type switch: three states, one control */
.ts .ts-seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--ts-soft); border: 1px solid var(--ts-line); }
.ts .ts-seg a { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 9px; font-size: 13.5px; font-weight: 700; color: var(--ts-ink-2); transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; }
.ts .ts-seg a:hover { color: var(--ts-brand); }
.ts .ts-seg a[aria-current="true"] { color: var(--ts-ink); background: #fff; box-shadow: 0 1px 3px rgba(6,42,64,.13); }
.ts .ts-seg a[aria-current="true"] .ts-pip { opacity: 1; }
.ts .ts-pip { width: 7px; height: 7px; border-radius: 50%; opacity: .55; }
.ts .ts-pip--demo { background: var(--ts-green); }
.ts .ts-pip--regular { background: var(--ts-brand); }

/* a field and its label, sized to sit level with the switch */
.ts .ts-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ts .ts-field > label { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ts-muted); }
.ts .ts-select, .ts .ts-input {
  height: 42px; padding: 0 13px; max-width: 100%;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ts-ink);
  background-color: #fff; border: 1.5px solid var(--ts-line); border-radius: 11px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ts .ts-select { -webkit-appearance: none; appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B8496' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.ts .ts-select:hover, .ts .ts-input:hover { border-color: var(--ts-line-2); }
.ts .ts-select:focus, .ts .ts-input:focus { outline: none; border-color: var(--ts-brand); box-shadow: 0 0 0 3px rgba(12,140,233,.16); }
.ts .ts-field--cat .ts-select { min-width: 150px; }
.ts .ts-field--course .ts-select { min-width: 185px; max-width: 250px; }
.ts .ts-field--find { flex: 1 1 170px; min-width: 150px; }

/* the two dates are one control: the pair either fits on the row or wraps
   together, so "To" never ends up orphaned on a line below "From" */
.ts .ts-field--range { flex: 0 0 auto; }
.ts .ts-range { display: flex; align-items: center; gap: 7px; }
.ts .ts-range .ts-input { width: 146px; min-width: 0; padding: 0 10px; }
.ts .ts-range > span { flex: none; font-size: 13px; font-weight: 800; color: var(--ts-muted); }
.ts .ts-find { position: relative; display: flex; align-items: center; }
.ts .ts-find .ts-i { position: absolute; left: 12px; width: 16px; height: 16px; stroke: var(--ts-muted); pointer-events: none; }
.ts .ts-find .ts-input { width: 100%; padding-left: 36px; }
.ts .ts-bar__go { display: flex; gap: 8px; }
.ts .ts-bar__clear { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 12px; font-size: 13px; font-weight: 700; color: var(--ts-muted); border-radius: 10px; }
.ts .ts-bar__clear:hover { color: var(--ts-rose); background: #FFF1F4; }

/* quick ranges, under the controls */
.ts .ts-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 0 12px; }
.ts .ts-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--ts-ink-2); background: #fff; border: 1px solid var(--ts-line); transition: color .15s ease, border-color .15s ease, background-color .15s ease; }
.ts .ts-chip:hover { color: var(--ts-brand); border-color: var(--ts-brand); }
.ts .ts-chip[aria-current="true"] { color: #fff; background: var(--ts-ink); border-color: var(--ts-ink); }

/* ---------------------------------------------------------------- results */
.ts .ts-board { padding: 26px 0 clamp(40px, 5vw, 70px); }
.ts .ts-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; }
.ts .ts-count { margin: 0; font-size: 14px; font-weight: 700; color: var(--ts-ink-2); }
.ts .ts-count b { color: var(--ts-ink); font-weight: 800; }

/* which clocks the board is written on — a statement, not a control */
.ts .ts-zones { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 13px; border-radius: 999px; background: var(--ts-soft); border: 1px solid var(--ts-line); font-size: 12.5px; font-weight: 600; color: var(--ts-ink-2); }
.ts .ts-zones b { font-weight: 800; color: var(--ts-ink); }
.ts .ts-zones .ts-i { width: 15px; height: 15px; stroke: var(--ts-brand); }

/* the batches already running, folded away from the ones still to come */
.ts .ts-earlier { margin: 0 0 26px; border: 1px solid var(--ts-line); border-radius: 16px; background: var(--ts-soft); }
.ts .ts-earlier > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 15px; font-size: 14px; font-weight: 700; color: var(--ts-ink-2); cursor: pointer; list-style: none; }
.ts .ts-earlier > summary::-webkit-details-marker { display: none; }
.ts .ts-earlier > summary:hover { color: var(--ts-brand); }
.ts .ts-earlier > summary b { color: var(--ts-ink); font-weight: 800; }
.ts .ts-earlier > summary em { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--ts-muted); }
.ts .ts-earlier > summary .ts-i { stroke: var(--ts-muted); transition: transform .18s ease; }
.ts .ts-earlier[open] > summary { border-bottom: 1px solid var(--ts-line); border-radius: 15px 15px 0 0; }
.ts .ts-earlier[open] > summary .ts-i { transform: rotate(90deg); }
.ts .ts-earlier__in { padding: 16px 18px 20px; }
.ts .ts-earlier__in .ts-day__head { background: linear-gradient(var(--ts-soft) 76%, rgba(243,248,251,0)); }

/* a day, and the sessions under it */
.ts .ts-day + .ts-day { margin-top: 26px; }
.ts .ts-day__head {
  position: sticky; top: var(--ts-bar-h); z-index: 12;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  margin: 0 0 12px; padding: 9px 0;
  background: linear-gradient(#fff 76%, rgba(255,255,255,0));
}
.ts .ts-day__dow { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ts-muted); }
.ts .ts-day__date { font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--ts-ink); }
.ts .ts-day__n { font-size: 12.5px; font-weight: 700; color: var(--ts-muted); }
.ts .ts-day__flag { padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--ts-rose); }
.ts .ts-day__rule { flex: 1 1 60px; height: 1px; background: var(--ts-line); }

.ts .ts-row {
  display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; align-items: center; gap: 18px;
  padding: 15px 18px; border: 1px solid var(--ts-line); border-radius: 16px; background: #fff;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.ts .ts-row + .ts-row { margin-top: 10px; }
.ts .ts-row:hover { transform: translateY(-1px); border-color: var(--ts-line-2); box-shadow: 0 18px 34px -28px rgba(6,42,64,.7); }
.ts .ts-row--live { border-color: rgba(20,184,166,.55); background: linear-gradient(90deg, rgba(20,184,166,.07), rgba(255,255,255,0) 42%); }
.ts .ts-row--past { background: #FCFDFE; }
.ts .ts-row--past .ts-name a { color: var(--ts-ink-2); }

/* One time, the reader's own, with IST beneath it as the reference — small,
   present, and clearly secondary. The IST line is hidden until the script
   finds the reader somewhere other than IST, in which case the headline is no
   longer IST and the reference has something to say. */
.ts .ts-when { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ts .ts-when__line { display: flex; align-items: baseline; gap: 7px; }
.ts .ts-when__t { font-size: 18px; font-weight: 800; letter-spacing: -.015em; color: var(--ts-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ts .ts-when__z { flex: none; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ts-muted); }
.ts .ts-when__line--ref .ts-when__t { font-size: 12px; font-weight: 700; color: var(--ts-muted); }
.ts .ts-when__line--ref .ts-when__z { font-size: 10px; color: var(--ts-faint, #8AABC0); }
.ts .ts-when__off { display: inline-block; margin-left: 3px; padding: 0 5px; border-radius: 5px; font-size: 10px; font-weight: 800; font-style: normal; color: var(--ts-amber); background: #FEF6E7; text-transform: none; letter-spacing: 0; }
.ts .ts-when__in { margin-top: 3px; font-size: 11.5px; font-weight: 700; color: var(--ts-brand); }

.ts .ts-name { min-width: 0; }
.ts .ts-name a { display: inline-block; font-size: 15.5px; font-weight: 800; line-height: 1.34; letter-spacing: -.01em; color: var(--ts-ink); }
.ts .ts-name a:hover { color: var(--ts-brand); text-decoration: underline; text-underline-offset: 3px; }
.ts .ts-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 7px; }
.ts .ts-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; }
.ts .ts-tag--demo { color: #0B7C56; background: #E6F7F0; }
.ts .ts-tag--regular { color: var(--ts-brand-600); background: #E7F3FD; }
.ts .ts-tag--live { color: #0B7C56; background: #E6F7F0; }
.ts .ts-tag--live .ts-pip { background: var(--ts-green); opacity: 1; animation: ts-pulse 2.2s infinite; }
.ts .ts-tag--today { color: #A21C40; background: #FFEDF1; }
.ts .ts-tag--started { color: var(--ts-amber); background: #FEF6E7; }
.ts .ts-tag--upcoming { color: var(--ts-ink-2); background: var(--ts-soft); }
.ts .ts-note { margin: 7px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ts-muted); }

.ts .ts-acts { display: flex; align-items: center; gap: 8px; }

/* ---------------------------------------------------- add to calendar menu */
.ts .ts-cal { position: relative; }
.ts .ts-cal > summary { list-style: none; cursor: pointer; }
.ts .ts-cal > summary::-webkit-details-marker { display: none; }
.ts .ts-cal > summary::marker { content: ""; }
.ts .ts-cal > summary .ts-i { stroke: currentColor; }
.ts .ts-cal__chev { width: 12px; height: 12px; stroke-width: 3; opacity: .7; transition: transform .18s ease; }
.ts .ts-cal[open] > summary { color: var(--ts-brand); border-color: var(--ts-brand); }
.ts .ts-cal[open] .ts-cal__chev { transform: rotate(90deg); }

/* An open menu has to outrank the rows underneath it.
   A row lifts on hover, and a transform makes a stacking context, so the row
   below an open menu was painting its own card — and its own button — over
   it. Two rules, because which element needs the rank depends on whether that
   row happens to be hovered at the time:
     .ts-cal[open]  when the row is not a stacking context, and
     the row itself when it is.
   25 sits above the sticky day headings (12) and below the filter bar (30),
   which is chrome and should stay on top. */
.ts .ts-cal[open] { z-index: 25; }
.ts .ts-row:has(.ts-cal[open]), .ts .ts-row--open, .ts .ts-next--open { position: relative; z-index: 25; }

.ts .ts-cal__menu {
  position: absolute; right: 0; top: calc(100% + 7px); z-index: 1;
  min-width: 230px; max-width: calc(100vw - 32px); padding: 6px;
  border-radius: 13px; background: #fff; border: 1px solid var(--ts-line);
  box-shadow: 0 24px 46px -20px rgba(6,42,64,.42);
}
.ts .ts-cal__menu a, .ts .ts-cal__menu button {
  display: block; width: 100%; padding: 9px 11px; border: 0; border-radius: 9px;
  font-family: inherit; font-size: 13.5px; font-weight: 700; line-height: 1.3;
  color: var(--ts-ink); background: transparent; text-align: left; cursor: pointer;
  transition: background-color .14s ease, color .14s ease;
}
.ts .ts-cal__menu a:hover, .ts .ts-cal__menu button:hover,
.ts .ts-cal__menu a:focus-visible, .ts .ts-cal__menu button:focus-visible { color: var(--ts-brand); background: var(--ts-soft); }
.ts .ts-cal__menu small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 600; color: var(--ts-muted); }

/* in the hero the card would clip it, so it opens upward from the left */
.ts .ts-next .ts-cal__menu { right: auto; left: 0; }

/* nothing matched */
.ts .ts-empty { padding: 44px 24px; text-align: center; border: 1px dashed var(--ts-line-2); border-radius: 18px; background: var(--ts-soft); }
.ts .ts-empty h2 { margin: 0 0 8px; font-size: 19px; font-weight: 800; color: var(--ts-ink); }
.ts .ts-empty p { margin: 0 0 16px; font-size: 14.5px; color: var(--ts-ink-2); }
.ts .ts-empty__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }

/* The closing offer.
   A dark slab at the foot of an otherwise light page read as a different
   site. It keeps its weight through the tinted wash and the brand edge
   instead, and the heading is the page's own navy. */
.ts .ts-help {
  position: relative; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
  margin-top: 34px; padding: clamp(22px, 3vw, 32px); padding-left: clamp(26px, 3.2vw, 38px);
  border-radius: 20px; color: var(--ts-ink);
  background: linear-gradient(118deg, #EEF6FC 0%, #EAF6F8 55%, #E8F7F2 100%);
  border: 1px solid var(--ts-line);
  box-shadow: 0 22px 46px -36px rgba(6,42,64,.55);
}
.ts .ts-help::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 5px; background: var(--ts-grad); }
.ts .ts-help h2 { margin: 0 0 7px; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.2; letter-spacing: -.02em; color: var(--ts-ink); }
.ts .ts-help p { margin: 0; max-width: 60ch; font-size: 14.5px; line-height: 1.6; color: var(--ts-ink-2); }

/* ------------------------------------------------------------ small print */
.ts .ts-legend { margin: 18px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ts-muted); }

/* --------------------------------------------------------------- narrower */
@media (max-width: 1080px) {
  .ts .ts-hero__in { grid-template-columns: 1fr; }
  .ts .ts-next { order: -1; }
}
@media (max-width: 900px) {
  .ts { --ts-bar-h: 0px; }
  .ts .ts-bar { position: static; }
  .ts .ts-day__head { position: static; background: none; }
  .ts .ts-field--course .ts-select, .ts .ts-field--cat .ts-select { min-width: 0; max-width: none; width: 100%; }
  .ts .ts-field { flex: 1 1 180px; }
  /* narrow enough that the pair shares one row rather than forcing a scroll */
  .ts .ts-field--range { flex: 1 1 100%; }
  .ts .ts-range .ts-input { flex: 1 1 0; width: auto; }
}
@media (max-width: 720px) {
  .ts .ts-wrap { padding: 0 16px; }
  .ts .ts-row { grid-template-columns: 1fr; gap: 12px; padding: 15px; }
  /* the time and its IST reference sit side by side rather than stacked */
  .ts .ts-when { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
  .ts .ts-when__t { font-size: 16px; }
  .ts .ts-when__line--ref .ts-when__t { font-size: 12px; }
  .ts .ts-acts { flex-wrap: wrap; }
  .ts .ts-acts .ts-btn, .ts .ts-acts .ts-cal { flex: 1 1 auto; }
  .ts .ts-acts .ts-cal > summary { width: 100%; }
  .ts .ts-help { flex-direction: column; align-items: flex-start; }
}

/* the board should print as a list, without the chrome around it */
@media print {
  .ts .ts-bar, .ts .ts-chips, .ts .ts-acts, .ts .ts-help, .ts .ts-next__cta { display: none !important; }
  .ts .ts-row { break-inside: avoid; border-color: #ccc; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ts *, .ts *::before, .ts *::after { animation: none !important; transition: none !important; }
  .ts .ts-row:hover, .ts .ts-btn:hover { transform: none; }
}