/* NH Class Timetable - v1.8.2
 * Everything is scoped under .nht so it doesn't clash with the theme.
 * To change colours, override these variables in Appearance > Customize > Additional CSS, e.g.
 *   .nht { --nht-accent: #e91e63; }
 */
.nht {
  --nht-accent: #0f766e;        /* sentence words, focus, links */
  --nht-accent-soft: #e6f2f1;
  --nht-ink: #1f2328;
  --nht-ink-2: #4b5563;
  --nht-muted: #6b7280;
  --nht-line: #e3e3de;
  --nht-surface: #ffffff;
  --nht-band: #f7f7f4;          /* alternate club rows */
  --nht-good: #0ca30c;
  --nht-full-bg: #fff6e3;
  --nht-full-line: #f0c46a;
  --nht-full-dot: #d98a00;
  --nht-cancel-bg: #f1f1ef;
  --nht-radius: 6px;
  position: relative;
  color: var(--nht-ink);
  font-size: 15px;
  line-height: 1.45;
  margin: 0 0 2em;
  text-align: left;
}
.nht *, .nht *::before, .nht *::after { box-sizing: border-box; }
.nht .nht-loading, .nht .nht-error { color: var(--nht-ink-2); padding: 1em 0; }
.nht .nht-error { color: #b42318; }

/* ---- theme-proof resets (Hestia / Elementor style buttons & tables heavily) ---- */
.nht button, .nht button:hover, .nht button:focus, .nht button:active {
  -webkit-appearance: none; appearance: none;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  margin: 0; padding: 0; min-height: 0; min-width: 0; width: auto; height: auto;
  font: inherit; font-size: inherit; font-weight: inherit; line-height: inherit;
  color: inherit; text-transform: none; letter-spacing: normal; text-shadow: none;
  cursor: pointer; transition: none; opacity: 1;
}
.nht button:focus-visible, .nht input:focus-visible, .nht a:focus-visible {
  outline: 2px solid var(--nht-accent); outline-offset: 2px;
}
.nht table, .nht th, .nht td { border: 0; background: none; margin: 0; }
.nht input[type="checkbox"] {
  -webkit-appearance: auto; appearance: auto; position: static; opacity: 1;
  width: 16px; height: 16px; margin: 0; accent-color: var(--nht-accent); flex: none;
}

/* ---- header ---- */
.nht .nht-head { margin-bottom: 14px; }
.nht .nht-title {
  font-size: 1.5em; line-height: 1.25; margin: 0 0 4px; padding: 0;
  color: var(--nht-ink); font-weight: 600; text-transform: none; letter-spacing: 0;
}
.nht .nht-meta { color: var(--nht-ink-2); font-size: .9em; }
.nht .nht-stale { color: #b42318; font-weight: 600; }

/* ---- filters ---- */
.nht .nht-filters {
  background: var(--nht-band);
  border: 1px solid var(--nht-line);
  border-radius: var(--nht-radius);
  padding: 14px 16px;
  display: grid; gap: 12px;
}
.nht .nht-sentence { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 1.05em; }
.nht .nht-word { color: var(--nht-accent); font-weight: 600; }
.nht .nht-refine {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  border-top: 1px dashed var(--nht-line); padding-top: 12px; font-size: .92em;
}
.nht .nht-refine-label { color: var(--nht-muted); font-size: .85em; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.nht .nht-check { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; color: var(--nht-ink); cursor: pointer; font-size: 1em; }

.nht .nht-drop { position: relative; }
.nht .nht-drop .nht-drop-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--nht-surface); color: var(--nht-ink);
  border: 1px solid #cfcfc9; border-radius: var(--nht-radius);
  padding: 6px 10px; max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nht .nht-drop .nht-drop-btn::after {
  content: ""; flex: none; width: 7px; height: 7px; margin-left: auto;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); opacity: .6;
}
.nht .nht-drop .nht-drop-btn:hover { border-color: var(--nht-accent); }
.nht .nht-drop .nht-drop-btn.is-set { border-color: var(--nht-accent); background: var(--nht-accent-soft); font-weight: 600; }
.nht .nht-refine .nht-drop-btn { padding: 4px 9px; }

.nht .nht-drop-panel {
  position: absolute; z-index: 1000; top: calc(100% + 4px); left: 0;
  width: 290px; max-width: calc(100vw - 24px);
  background: var(--nht-surface); border: 1px solid var(--nht-line); border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.06);
  padding: 8px; font-size: 14px;
}
.nht .nht-drop-panel.is-right { left: auto; right: 0; }
.nht .nht-drop-panel[hidden] { display: none; }
.nht .nht-search {
  width: 100%; padding: 7px 9px; margin: 0 0 6px; border: 1px solid #cfcfc9; border-radius: 5px;
  font: inherit; font-size: 14px; background: #fff; color: var(--nht-ink); height: auto; box-shadow: none;
}
.nht .nht-drop-actions { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 6px; color: var(--nht-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.nht .nht-drop-actions button { color: var(--nht-accent); font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 600; }
.nht .nht-opts { max-height: 300px; overflow-y: auto; overscroll-behavior: contain; }
.nht .nht-opt {
  display: flex; align-items: center; gap: 8px; padding: 6px 6px; margin: 0; border-radius: 4px;
  cursor: pointer; font-weight: 400; color: var(--nht-ink); font-size: 14px; line-height: 1.3;
}
.nht .nht-opt:hover { background: var(--nht-band); }
.nht .nht-opt-label { flex: 1; min-width: 0; }
.nht .nht-opt-count { color: var(--nht-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.nht .nht-opt.is-empty .nht-opt-label { color: var(--nht-muted); }
.nht .nht-opt-none { color: var(--nht-muted); padding: 8px; margin: 0; }

.nht .nht-reset { color: var(--nht-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.nht .nht-refine .nht-reset { margin-left: auto; }

/* ---- summary bar ---- */
.nht .nht-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 16px 0 10px; }
.nht .nht-summary { margin: 0; font-weight: 600; flex: 1 1 260px; }
.nht .nht-legend { display: flex; gap: 14px; list-style: none; margin: 0; padding: 0; font-size: .85em; color: var(--nht-ink-2); }
.nht .nht-legend li { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.nht .nht-key { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.nht .nht-key.is-spaces { background: var(--nht-good); }
.nht .nht-key.is-full { background: var(--nht-full-dot); }
.nht .nht-key.is-waitfull { background: #d03b3b; }
.nht .nht-key.is-notopen { background: #a3acb9; }
.nht .nht-chips .nht-chip.is-notopen { background: #f5f6f8; border-color: #d5d9df; }
.nht .nht-chips .nht-chip.is-notopen::before { background: #a3acb9; }
.nht .nht-notopen-tag {
  display: block; margin-top: 2px; font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--nht-muted);
}
.nht .nht-day-h .nht-notopen-tag { display: inline; margin: 0 0 0 8px; }
.nht .nht-key.is-cancelled { background: transparent; border: 1.5px solid var(--nht-muted); }
.nht .nht-group-wrap { display: inline-flex; align-items: center; gap: 8px; }
.nht .nht-group-label { font-size: .85em; color: var(--nht-ink-2); }
.nht .nht-view { display: inline-flex; border: 1px solid #cfcfc9; border-radius: var(--nht-radius); overflow: hidden; }
.nht .nht-view button { padding: 4px 12px; font-size: .88em; color: var(--nht-ink-2); }
.nht .nht-view button + button { border-left: 1px solid #cfcfc9; }
.nht .nht-view button[aria-pressed="true"] { background: var(--nht-ink); color: #fff; }

/* ---- grid ---- */
.nht .nht-grid-wrap { overflow-x: auto; border: 1px solid var(--nht-line); border-radius: var(--nht-radius); background: var(--nht-surface); }
.nht .nht-grid { width: 100%; min-width: 800px; border-collapse: collapse; table-layout: fixed; font-size: 14px; }
.nht .nht-grid .nht-col-club { width: 118px; }
.nht .nht-grid thead th {
  text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--nht-line);
  font-weight: 600; color: var(--nht-ink); vertical-align: bottom; background: var(--nht-surface);
}
.nht .nht-grid thead .nht-dow { display: block; font-size: 1em; }
.nht .nht-grid thead .nht-dom { display: block; font-weight: 400; color: var(--nht-muted); font-size: .85em; }
.nht .nht-grid thead .nht-corner { color: var(--nht-ink-2); }
.nht .nht-grid tbody th, .nht .nht-grid tbody td { padding: 8px 6px; vertical-align: top; border-bottom: 1px solid var(--nht-line); }
.nht .nht-grid tbody tr:nth-child(even) th, .nht .nht-grid tbody tr:nth-child(even) td { background: var(--nht-band); }
.nht .nht-grid tbody tr:last-child th, .nht .nht-grid tbody tr:last-child td { border-bottom: 0; }
.nht .nht-grid .nht-club { font-weight: 600; text-align: left; padding-left: 10px; line-height: 1.25; color: var(--nht-ink); }

/* ---- chips ---- */
.nht .nht-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.nht .nht-chips .nht-chip {
  position: relative; display: inline-flex; flex-direction: column; align-items: flex-start;
  background: var(--nht-surface); border: 1px solid #d6d6cf; border-radius: 5px;
  padding: 3px 7px 3px 15px; font-size: 13px; line-height: 1.2; color: var(--nht-ink); text-align: left;
}
.nht .nht-chips .nht-chip::before {
  content: ""; position: absolute; left: 6px; top: 8px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--nht-good);
}
.nht .nht-chips .nht-chip:hover, .nht .nht-chips .nht-chip.is-active { border-color: var(--nht-ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.nht .nht-chips .nht-chip.is-active { outline: 2px solid var(--nht-accent); outline-offset: 1px; }
.nht .nht-chip .nht-t { font-weight: 600; font-variant-numeric: tabular-nums; }
.nht .nht-chip .nht-top { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.nht .nht-chip .nht-len { display: inline-flex; align-items: center; gap: 2px; font-size: 11.5px; color: var(--nht-ink-2); font-variant-numeric: tabular-nums; }
.nht .nht-chip .nht-clock { width: 11px; height: 11px; flex: none; display: block; }
.nht .nht-chip .nht-n {
  font-size: 12px; color: var(--nht-ink-2); margin-top: 1px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word;
}
.nht .nht-chip .nht-c {
  display: block; max-width: 100%; font-size: 11.5px; color: var(--nht-muted); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nht .nht-chips .nht-chip { min-width: 0; max-width: 100%; }
.nht .nht-chip .nht-badge { font-size: 11px; font-weight: 700; margin-top: 1px; color: #8a5a00; white-space: nowrap; }
.nht .nht-chips .nht-chip.is-full { background: var(--nht-full-bg); border-color: var(--nht-full-line); }
.nht .nht-chips .nht-chip.is-full::before { background: var(--nht-full-dot); }
.nht .nht-chips .nht-chip.is-waitfull { background: #fdecec; border-color: #eba5a5; }
.nht .nht-chips .nht-chip.is-waitfull::before { background: #d03b3b; }
.nht .nht-chip.is-waitfull .nht-badge { color: #a12a2a; }
.nht .nht-chips .nht-chip.is-cancelled { background: var(--nht-cancel-bg); border-style: dashed; color: var(--nht-muted); }
.nht .nht-chips .nht-chip.is-cancelled::before { background: transparent; border: 1.5px solid var(--nht-muted); width: 7px; height: 7px; left: 5px; }
.nht .nht-chip.is-cancelled .nht-t { text-decoration: line-through; }
.nht .nht-chip.is-cancelled .nht-badge { color: var(--nht-muted); }
.nht .nht-chips .nht-chip.is-past { opacity: .5; }
/* when class names show, chips stack full-width inside grid cells */
.nht .nht-grid .nht-chip.is-wide { width: 100%; }

/* ---- list (narrow screens) ---- */
.nht .nht-list { display: grid; gap: 18px; }
.nht .nht-day { border: 1px solid var(--nht-line); border-radius: var(--nht-radius); overflow: hidden; background: var(--nht-surface); }
.nht .nht-day-h { margin: 0; padding: 9px 12px; font-size: 1em; font-weight: 600; background: var(--nht-band); border-bottom: 1px solid var(--nht-line); color: var(--nht-ink); text-transform: none; letter-spacing: 0; line-height: 1.3; }
.nht .nht-list-club { padding: 10px 12px; border-bottom: 1px solid var(--nht-line); }
.nht .nht-list-club:last-child { border-bottom: 0; }
.nht .nht-list-club h4 { margin: 0 0 6px; font-size: .92em; font-weight: 600; color: var(--nht-ink-2); text-transform: none; letter-spacing: 0; line-height: 1.3; }
.nht .nht-list .nht-chip { min-height: 32px; justify-content: flex-start; }
.nht .nht-list .nht-chip.is-wide { max-width: 210px; }

.nht .nht-empty { text-align: center; padding: 30px 12px; border: 1px dashed var(--nht-line); border-radius: var(--nht-radius); color: var(--nht-ink-2); }
.nht .nht-empty p { margin: 0 0 8px; }

.nht .nht-disclaimer { margin: 12px 0 0; font-size: .85em; color: var(--nht-ink-2); }
.nht .nht-warn-icon { color: #b54708; }

/* ---- details popover (v1.8.2 "Option D") ---- */
.nht .nht-pop {
  position: fixed; z-index: 100000; width: 380px; max-width: calc(100vw - 16px);
  background: var(--nht-surface); color: var(--nht-ink);
  border: 1px solid var(--nht-line); border-radius: 14px; overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.07);
  padding: 0; font-size: 14px; line-height: 1.4; text-align: left;
}
.nht .nht-pop[hidden] { display: none; }
.nht .nht-pop.is-sheet {
  left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none;
  border-radius: 16px 16px 0 0; max-height: 85vh; overflow-y: auto; padding-bottom: env(safe-area-inset-bottom);
}
.nht .nht-pop .nht-pop-close {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%;
  font-size: 20px; line-height: 30px; text-align: center; color: var(--nht-ink-2); background: rgba(255,255,255,.85);
}
.nht .nht-pi { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nht .nht-pi-sm { width: 13px; height: 13px; stroke-width: 1.8; }

.nht .nht-pop-band { display: flex; gap: 14px; align-items: center; padding: 16px 18px 14px; background: #e9f6ea; }
.nht .nht-pop.is-full .nht-pop-band { background: var(--nht-full-bg); }
.nht .nht-pop.is-waitfull .nht-pop-band { background: #fdecec; }
.nht .nht-pop.is-cancelled .nht-pop-band, .nht .nht-pop.is-notopen .nht-pop-band { background: #f1f3f6; }
.nht .nht-pop-clock { text-align: center; min-width: 66px; padding-right: 14px; border-right: 1px dashed rgba(0,0,0,.18); }
.nht .nht-pop-time { display: block; font-size: 22px; line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; }
.nht .nht-pop-mins { display: block; font-size: 12px; color: var(--nht-ink-2); }
.nht .nht-pop-head { min-width: 0; }
.nht .nht-pop-title { font-size: 16.5px; font-weight: 700; line-height: 1.25; margin: 0 30px 0 0; }
.nht .nht-pop.is-cancelled .nht-pop-title { text-decoration: line-through; }
.nht .nht-pop-date { font-size: 13px; color: var(--nht-ink-2); margin-top: 2px; }
.nht .nht-pop-pill { display: inline-block; margin-top: 6px; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #fff; color: #17692a; }
.nht .nht-pop.is-full .nht-pop-pill { color: var(--nht-full-ink, #8a5a00); }
.nht .nht-pop.is-waitfull .nht-pop-pill { color: #a12a2a; }
.nht .nht-pop.is-cancelled .nht-pop-pill, .nht .nht-pop.is-notopen .nht-pop-pill { color: var(--nht-muted); }

.nht .nht-pop-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px 14px; padding: 14px 18px 12px; }
.nht .nht-pop-cell { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.nht .nht-pop-cell .nht-pi { color: var(--nht-muted); margin-top: 2px; }
.nht .nht-pop-cell-txt { min-width: 0; }
.nht .nht-pop-lbl { display: block; font-size: 11.5px; color: var(--nht-muted); text-transform: uppercase; letter-spacing: .05em; line-height: 1.3; }
.nht .nht-pop-val { display: block; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nht .nht-pop-avail { margin: 2px 18px 16px; padding: 12px; border-radius: 10px; background: var(--nht-band); }
.nht .nht-pop-avail-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; font-size: 13px; }
.nht .nht-pop-avail-main { font-size: 15px; font-weight: 700; color: #17692a; }
.nht .nht-pop.is-full .nht-pop-avail-main { color: #8a5a00; }
.nht .nht-pop.is-waitfull .nht-pop-avail-main { color: #a12a2a; }
.nht .nht-pop.is-cancelled .nht-pop-avail-main, .nht .nht-pop.is-notopen .nht-pop-avail-main { color: var(--nht-muted); }
.nht .nht-pop-avail-side { color: var(--nht-ink-2); white-space: nowrap; }
.nht .nht-pop-bar { display: flex; height: 10px; border-radius: 5px; background: #ecece8; overflow: hidden; }
.nht .nht-pop-bar span { display: block; height: 100%; }
.nht .nht-bar-booked { background: var(--nht-good); }
.nht .nht-pop.is-full .nht-bar-booked, .nht .nht-pop.is-waitfull .nht-bar-booked { background: var(--nht-full-dot); }
.nht .nht-bar-wait { background: repeating-linear-gradient(135deg, var(--nht-full-dot) 0 4px, #f4c56b 4px 8px); }
.nht .nht-pop.is-waitfull .nht-bar-wait { background: repeating-linear-gradient(135deg, #d03b3b 0 4px, #eba5a5 4px 8px); }
.nht .nht-pop-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12px; color: var(--nht-ink-2); }
.nht .nht-pop-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.nht .nht-lg-booked { background: var(--nht-good); }
.nht .nht-pop.is-full .nht-lg-booked, .nht .nht-pop.is-waitfull .nht-lg-booked { background: var(--nht-full-dot); }
.nht .nht-lg-free { background: #ecece8; box-shadow: inset 0 0 0 1px #d9d9d3; }
.nht .nht-lg-wait { background: repeating-linear-gradient(135deg, var(--nht-full-dot) 0 3px, #f4c56b 3px 6px); }
.nht .nht-pop.is-waitfull .nht-lg-wait { background: repeating-linear-gradient(135deg, #d03b3b 0 3px, #eba5a5 3px 6px); }
.nht .nht-pop-note { font-size: 12.5px; color: var(--nht-muted); }
.nht .nht-pop-asof { display: flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 11.5px; color: var(--nht-muted); }

.nht .nht-pop-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 18px 13px; border-top: 1px solid var(--nht-line); font-size: 12.5px; }
.nht .nht-pop .nht-pop-link { display: inline-flex; align-items: center; gap: 5px; color: var(--nht-accent); font-weight: 600; text-decoration: none; min-width: 0; }
.nht .nht-pop .nht-pop-link:hover, .nht .nht-pop .nht-pop-link:focus { text-decoration: underline; color: var(--nht-accent); }
.nht .nht-pop-book { color: var(--nht-muted); white-space: nowrap; }

@media (max-width: 560px) {
  .nht .nht-sentence { font-size: 1em; }
  .nht .nht-drop { flex: 1 1 calc(50% - 40px); min-width: 0; }
  .nht .nht-drop .nht-drop-btn { width: 100%; max-width: none; }
  .nht .nht-refine .nht-reset { margin-left: 0; }
  .nht .nht-legend { order: 3; }
}
@media (prefers-reduced-motion: no-preference) {
  .nht .nht-chips .nht-chip { transition: box-shadow .12s, border-color .12s; }
}
@media (forced-colors: active) {
  .nht .nht-chips .nht-chip::before { forced-color-adjust: none; }
}

/* uniform card widths: grid cards fill their (equal-width) day column; list cards share an even grid */
.nht .nht-grid .nht-chips .nht-chip { width: 100%; }
.nht .nht-list .nht-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; }
.nht .nht-list .nht-chips .nht-chip, .nht .nht-list .nht-chip.is-wide { width: 100%; max-width: none; }

/* ---- theme-proof interaction states (v1.8.2) ----
 * Hestia/Elementor style every button:hover/:focus/:active (white text, accent background,
 * big shadow), sometimes with !important. That turned the start time white on hover.
 * Every text span gets its own colour, and every plugin button pins its hover/focus/active look. */
.nht .nht-chip .nht-t { color: var(--nht-ink); }
.nht .nht-chip.is-cancelled .nht-t { color: var(--nht-muted); }

.nht .nht-chips .nht-chip:hover, .nht .nht-chips .nht-chip:focus, .nht .nht-chips .nht-chip:active {
  color: var(--nht-ink) !important; background-color: var(--nht-surface) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.12) !important; transform: none !important; text-decoration: none !important;
}
.nht .nht-chips .nht-chip.is-full:hover, .nht .nht-chips .nht-chip.is-full:focus, .nht .nht-chips .nht-chip.is-full:active { background-color: var(--nht-full-bg) !important; }
.nht .nht-chips .nht-chip.is-waitfull:hover, .nht .nht-chips .nht-chip.is-waitfull:focus, .nht .nht-chips .nht-chip.is-waitfull:active { background-color: #fdecec !important; }
.nht .nht-chips .nht-chip.is-cancelled:hover, .nht .nht-chips .nht-chip.is-cancelled:focus, .nht .nht-chips .nht-chip.is-cancelled:active { background-color: var(--nht-cancel-bg) !important; color: var(--nht-muted) !important; }
.nht .nht-chips .nht-chip.is-notopen:hover, .nht .nht-chips .nht-chip.is-notopen:focus, .nht .nht-chips .nht-chip.is-notopen:active { background-color: #f5f6f8 !important; }

.nht .nht-drop .nht-drop-btn:hover, .nht .nht-drop .nht-drop-btn:focus, .nht .nht-drop .nht-drop-btn:active {
  color: var(--nht-ink) !important; background-color: var(--nht-surface) !important; box-shadow: none !important;
}
.nht .nht-drop .nht-drop-btn.is-set:hover, .nht .nht-drop .nht-drop-btn.is-set:focus, .nht .nht-drop .nht-drop-btn.is-set:active { background-color: var(--nht-accent-soft) !important; }

.nht .nht-view button:hover, .nht .nht-view button:focus, .nht .nht-view button:active {
  color: var(--nht-ink) !important; background-color: var(--nht-band) !important; box-shadow: none !important;
}
.nht .nht-view button[aria-pressed="true"]:hover, .nht .nht-view button[aria-pressed="true"]:focus, .nht .nht-view button[aria-pressed="true"]:active {
  color: #fff !important; background-color: var(--nht-ink) !important;
}

.nht .nht-reset:hover, .nht .nht-reset:focus, .nht .nht-reset:active,
.nht .nht-drop-actions button:hover, .nht .nht-drop-actions button:focus, .nht .nht-drop-actions button:active {
  color: var(--nht-accent) !important; background-color: transparent !important; box-shadow: none !important;
}
.nht .nht-pop .nht-pop-close:hover, .nht .nht-pop .nht-pop-close:focus, .nht .nht-pop .nht-pop-close:active {
  color: var(--nht-ink) !important; background-color: var(--nht-band) !important; box-shadow: none !important;
}

/* v1.8.2: bold class names; spaces line on available classes */
.nht .nht-chip .nht-n { font-weight: 700; color: var(--nht-ink); -webkit-line-clamp: 3; }
.nht .nht-chip.is-cancelled .nht-n { color: var(--nht-muted); }
.nht .nht-chip .nht-badge.nht-spaces { color: #17692a; }

/* ---- v1.8.2: week-on-week changes ---- */
.nht { --nht-chg: #3451b2; --nht-chg-bg: #eef1fd; --nht-chg-line: #c7cff2; }
.nht .nht-chgbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 14px 0 0; padding: 9px 12px;
  border: 1px solid #d7ddf6; background: var(--nht-chg-bg); border-radius: var(--nht-radius); font-size: 14px;
}
.nht .nht-chg-lead { font-weight: 700; color: var(--nht-chg); cursor: help; }
.nht .nht-chg-sp { flex: 1; }
.nht .nht-chgbar .nht-check { font-size: 13px; color: var(--nht-ink-2); }
.nht .nht-chgbar .nht-cf {
  border: 1px solid var(--nht-chg-line); background: #fff; border-radius: 999px; padding: 3px 11px;
  font-size: 13px; color: var(--nht-ink); font-variant-numeric: tabular-nums;
}
.nht .nht-chgbar .nht-cf[aria-pressed="true"] { background: var(--nht-chg); border-color: var(--nht-chg); color: #fff; }
.nht .nht-chgbar .nht-cf:disabled { opacity: .5; cursor: default; }
.nht .nht-chgbar .nht-cf:hover, .nht .nht-chgbar .nht-cf:focus, .nht .nht-chgbar .nht-cf:active {
  background-color: #fff !important; color: var(--nht-ink) !important; border-color: var(--nht-chg) !important; box-shadow: none !important;
}
.nht .nht-chgbar .nht-cf[aria-pressed="true"]:hover, .nht .nht-chgbar .nht-cf[aria-pressed="true"]:focus, .nht .nht-chgbar .nht-cf[aria-pressed="true"]:active {
  background-color: var(--nht-chg) !important; color: #fff !important;
}

/* tags on cards */
.nht .nht-ctag {
  display: inline-block; align-self: flex-start; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; line-height: 1.5; padding: 0 6px; border-radius: 4px; white-space: nowrap;
}
.nht .nht-chip .nht-ctag { margin: 0 0 3px -9px; max-width: calc(100% + 9px); overflow: hidden; text-overflow: ellipsis; }
.nht .nht-ctag-new { background: var(--nht-chg); color: #fff; }
.nht .nht-ctag-chg { background: var(--nht-chg-bg); color: var(--nht-chg); box-shadow: inset 0 0 0 1px var(--nht-chg-line); }
.nht .nht-ctag-rm { background: #f1f1ef; color: var(--nht-muted); box-shadow: inset 0 0 0 1px #d0d0c9; }
.nht .nht-chips .nht-chip.has-tag::before { top: 27px; }
.nht .nht-chips .nht-chip.is-chg-new, .nht .nht-chips .nht-chip.is-chg-chg { box-shadow: inset 3px 0 0 var(--nht-chg); }
.nht .nht-chips .nht-chip.is-chg-new:hover, .nht .nht-chips .nht-chip.is-chg-chg:hover,
.nht .nht-chips .nht-chip.is-chg-new:focus, .nht .nht-chips .nht-chip.is-chg-chg:focus {
  box-shadow: inset 3px 0 0 var(--nht-chg), 0 1px 3px rgba(0,0,0,.12) !important;
}
.nht .nht-chip .nht-was { font-size: 11px; font-weight: 400; color: var(--nht-muted); margin-left: 3px; }
.nht .nht-chip .nht-top .nht-was { margin-left: -2px; }

/* removed placeholders */
.nht .nht-chips .nht-chip.is-removed { background: transparent; border-style: dashed; border-color: #cfcfc8; opacity: .85; }
.nht .nht-chips .nht-chip.is-removed::before { background: transparent; border: 1.5px solid var(--nht-muted); width: 7px; height: 7px; left: 5px; }
.nht .nht-chip.is-removed .nht-t, .nht .nht-chip.is-removed .nht-n { text-decoration: line-through; color: var(--nht-muted); }
.nht .nht-chip.is-removed .nht-badge { color: var(--nht-muted); }
.nht .nht-chips .nht-chip.is-removed:hover, .nht .nht-chips .nht-chip.is-removed:focus, .nht .nht-chips .nht-chip.is-removed:active { background-color: #fafaf8 !important; }

/* pop-up */
.nht .nht-pop.is-removed .nht-pop-band { background: #f1f3f6; }
.nht .nht-pop.is-removed .nht-pop-title { text-decoration: line-through; color: var(--nht-ink-2); }
.nht .nht-pop.is-removed .nht-pop-pill, .nht .nht-pop.is-removed .nht-pop-avail-main { color: var(--nht-muted); }
.nht .nht-pop-chg { margin: 12px 18px 0; padding: 10px 12px; border-radius: 10px; background: var(--nht-chg-bg); border: 1px solid #d7ddf6; font-size: 13px; color: var(--nht-ink); }
.nht .nht-pop-chg-h { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--nht-chg); }
.nht .nht-pop-chg ul { margin: 6px 0 0; padding: 0 0 0 20px; list-style: disc; }
.nht .nht-pop-chg li { margin: 2px 0; }
.nht .nht-pop-chg s { color: var(--nht-muted); font-size: 12px; }
.nht .nht-pop-chg-note { margin-top: 4px; font-size: 12px; color: var(--nht-ink-2); }
.nht .nht-chg-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--nht-chg); margin-left: 5px; vertical-align: 2px; }

/* "Changes" view */
.nht .nht-clist { display: grid; gap: 14px; }
.nht .nht-clist-none { color: var(--nht-ink-2); padding: 20px 0; margin: 0; }
.nht .nht-cday { border: 1px solid var(--nht-line); border-radius: var(--nht-radius); background: var(--nht-surface); overflow: hidden; }
.nht .nht-cday-h {
  margin: 0; padding: 9px 12px; font-size: 1em; font-weight: 600; background: var(--nht-band); border-bottom: 1px solid var(--nht-line);
  color: var(--nht-ink); text-transform: none; letter-spacing: 0; line-height: 1.3;
}
.nht .nht-cday-h span { font-weight: 400; color: var(--nht-muted); font-size: .85em; margin-left: 8px; }
.nht .nht-clist .nht-citem {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; width: 100%; text-align: left;
  padding: 8px 12px; border-bottom: 1px solid #f0f0ec; font-size: 14px; color: var(--nht-ink); background: #fff;
}
.nht .nht-clist .nht-citem:last-child { border-bottom: 0; }
.nht .nht-clist .nht-citem:hover, .nht .nht-clist .nht-citem:focus, .nht .nht-clist .nht-citem:active {
  background-color: var(--nht-band) !important; color: var(--nht-ink) !important; box-shadow: none !important;
}
.nht .nht-citem .nht-ctag { min-width: 96px; text-align: center; }
.nht .nht-citem-club { font-weight: 700; }
.nht .nht-citem-txt { color: var(--nht-ink-2); }
@media (max-width: 560px) {
  .nht .nht-chgbar .nht-chg-sp { flex-basis: 100%; height: 0; }
}

/* v1.8.2: change list uses plain spans with fixed sizes so the theme's list/bold styles can't enlarge it */
.nht .nht-pop-chg-list { margin: 6px 0 0; padding: 0; }
.nht .nht-pop-chg .nht-pop-chg-row {
  display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 8px;
  margin: 0 0 5px; padding: 0; font-size: 13px; line-height: 1.35; color: var(--nht-ink);
}
.nht .nht-pop-chg .nht-pop-chg-lbl { grid-row: span 2; font-size: 12px; line-height: 1.5; color: var(--nht-ink-2); }
.nht .nht-pop-chg .nht-pop-chg-now { font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.nht .nht-pop-chg .nht-pop-chg-was { font-size: 12px; font-weight: 400; color: var(--nht-muted); text-decoration: line-through; overflow-wrap: anywhere; }
.nht .nht-pop-chg .nht-pop-chg-note { font-size: 12px; line-height: 1.4; }
.nht .nht-pop-chg .nht-pop-chg-h { font-size: 13px; line-height: 1.4; }

/* v1.8.2: the time column must never shrink or wrap (long day names squeezed it) */
.nht .nht-pop-clock { flex: 0 0 auto; }
.nht .nht-pop-time, .nht .nht-pop-mins { white-space: nowrap; }
.nht .nht-pop-head { flex: 1 1 auto; }