/* Class timetable - day tabs (or a week of day columns on wide frames),
   filter chips, a time rail and Now / Next markers that carry text. */
.tt { display: grid; gap: 10px; min-width: 0; }
.tt > * { min-width: 0; }
.tt-head { display: grid; gap: 2px; }
.tt-title { margin: 0; font-size: 1.15em; font-weight: 750; letter-spacing: -.012em; overflow-wrap: anywhere; }
.tt-zone { margin: 0; font-size: .82em; color: var(--e-ink-3); }
.tt-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.tt-filter-l { font-size: .74em; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--e-ink-3); min-width: 42px; }
.tt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tt-chip {
    font: inherit; font-size: .8em; font-weight: 650; cursor: pointer; min-height: 40px; padding: 4px 13px; border-radius: 999px;
    color: var(--e-ink-2); background: var(--e-surface); border: 1px solid var(--e-line-strong);
}
.tt-chip:hover { border-color: var(--e-accent); color: var(--e-ink); }
.tt-chip[aria-pressed="true"] { background: var(--e-accent); border-color: var(--e-accent); color: var(--e-accent-ink); }
.tt-chip[aria-pressed="true"]::before { content: "\2713\00a0"; }
.tt-chip:focus-visible, .tt-tab:focus-visible, .tt-panel:focus-visible, .tt-scroll:focus-visible { outline: 2px solid var(--e-focus); outline-offset: 2px; }

.tt-tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--e-line); scrollbar-width: thin; }
.tt-tab {
    position: relative; flex: 1 0 auto; min-width: 44px; min-height: 44px; padding: 6px 10px; font: inherit; font-weight: 700; font-size: .88em; cursor: pointer;
    background: transparent; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; color: var(--e-ink-3);
}
.tt-tab:hover { color: var(--e-ink); }
.tt-tab[aria-selected="true"] { color: var(--e-accent-fg); border-bottom-color: var(--e-accent); }
.tt-dot { position: absolute; top: 7px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--e-coral); }
.tt-panel .tt-day { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.tt-list { list-style: none; margin: 0; padding: 0; display: grid; }
.tt-row { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 10px 8px; border-bottom: 1px solid var(--e-line); border-radius: 8px; }
.tt-row:last-child { border-bottom: 0; }
.tt-time { display: grid; align-content: start; font-variant-numeric: tabular-nums; }
.tt-from { font-weight: 750; font-size: .95em; }
.tt-to { font-size: .8em; color: var(--e-ink-3); }
.tt-body { display: grid; gap: 4px; min-width: 0; justify-items: start; }
.tt-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.tt-name { font-weight: 700; overflow-wrap: anywhere; }
.tt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; font-size: .84em; color: var(--e-ink-2); overflow-wrap: anywhere; }
.tt-room { color: var(--e-ink-3); }
.tt-level { font-size: .76em; }
.tt-state:empty { display: none; }
.tt-book { min-height: 40px; padding: 3px 14px; font-size: .8em; border-radius: 999px; text-decoration: none; display: inline-flex; align-items: center; }
.tt-live { background: color-mix(in srgb, var(--e-ok) 9%, var(--e-bg)); box-shadow: inset 3px 0 0 var(--e-ok); border-bottom-color: transparent; }
.tt-next { box-shadow: inset 3px 0 0 var(--e-accent); }
.tt-none { margin: 0; padding: 14px 8px; font-size: .88em; color: var(--e-ink-3); }
.tt-note { margin: 0; font-size: .78em; color: var(--e-ink-3); }

.tt-scroll { overflow-x: auto; border: 1px solid var(--e-line); border-radius: calc(var(--e-radius-sm) + 2px); }
.tt-week { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(128px, 1fr); }
.tt-col { min-width: 0; border-right: 1px solid var(--e-line); }
.tt-col:last-child { border-right: 0; }
.tt-col .tt-day {
    display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 0; padding: 9px 10px; position: sticky; top: 0;
    background: var(--e-surface); border-bottom: 1px solid var(--e-line); font-size: .86em; font-weight: 750;
}
.tt-today .tt-day { color: var(--e-accent-fg); box-shadow: inset 0 3px 0 var(--e-accent); }
.tt-today-pill { font-size: .72em; }
.tt-col .tt-row { grid-template-columns: 1fr; gap: 3px; padding: 8px 9px; border-radius: 0; }
.tt-col .tt-time { display: flex; gap: 5px; align-items: baseline; }
.tt-col .tt-to::before { content: "– "; }
.tt-col .tt-none { padding: 10px; font-size: .8em; }

@media (max-width: 360px) {
    .tt-row { grid-template-columns: 1fr; gap: 3px; padding: 9px 6px; }
    .tt-time { display: flex; gap: 6px; align-items: baseline; }
    .tt-to::before { content: "– "; }
    .tt-tab { padding: 6px 7px; }
}
html[data-compact="1"] .tt-row { padding: 7px 6px; }