:root {
  --c-rgb: 71 85 105;
  --cl-rgb: 163 176 194;
  --warn: #a3341f;
  --warn-bg: #fdf0ed;
  --warn-border: #eabfb5;
}

@media (prefers-color-scheme: dark) {
  :root {
    --warn: #f2a493;
    --warn-bg: #2a1815;
    --warn-border: #5c2f26;
  }
}

[data-color="sky"] { --c-rgb: 3 105 161; --cl-rgb: 124 196 234; }
[data-color="indigo"] { --c-rgb: 79 70 229; --cl-rgb: 165 160 245; }
[data-color="violet"] { --c-rgb: 124 58 237; --cl-rgb: 196 164 251; }
[data-color="magenta"] { --c-rgb: 190 24 93; --cl-rgb: 245 145 184; }
[data-color="rose"] { --c-rgb: 225 29 72; --cl-rgb: 251 154 172; }
[data-color="clay"] { --c-rgb: 194 65 12; --cl-rgb: 247 161 121; }
[data-color="amber"] { --c-rgb: 161 98 7; --cl-rgb: 232 183 85; }
[data-color="olive"] { --c-rgb: 77 124 15; --cl-rgb: 168 207 107; }
[data-color="forest"] { --c-rgb: 21 128 61; --cl-rgb: 110 208 146; }
[data-color="teal"] { --c-rgb: 15 118 110; --cl-rgb: 99 200 191; }
[data-color="cyan"] { --c-rgb: 8 145 178; --cl-rgb: 103 203 230; }
[data-color="slate"] { --c-rgb: 71 85 105; --cl-rgb: 163 176 194; }

.state {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0 0 22px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.state[hidden] { display: none; }
.state svg { width: 22px; height: 22px; flex: none; margin-top: 2px; color: var(--text-muted); }
.state__text { min-width: 0; }

.state__title {
  margin: 0;
  font-family: var(--ui);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.012em;
  color: var(--text);
}

.state__body { margin: 6px 0 0; max-width: 62ch; font-size: .92rem; color: var(--text-secondary); }

.state--failed { background: var(--warn); background: var(--warn-bg); border-color: var(--warn-border); }
.state--failed svg { color: var(--warn); }
.state--failed .state__title { color: var(--warn); }

.state--empty { background: var(--accent); }

.retry {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  margin: 12px 0 0;
  padding: 0 18px;
  background: var(--brand);
  color: var(--brand-ink);
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--ui);
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
}

.retry:hover { filter: brightness(1.12); }
.retry svg { width: 16px; height: 16px; color: currentColor; margin: 0; }

.panel--next { }
.panel--next p { margin: 0 0 12px; max-width: 62ch; color: var(--text-secondary); }
.panel--next p:last-child { margin-bottom: 0; }

.cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  background: var(--brand);
  color: var(--brand-ink);
  border-radius: var(--radius-pill);
  font-family: var(--ui);
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none;
}

.cta:hover { filter: brightness(1.12); text-decoration: none; }
.cta svg { width: 16px; height: 16px; flex: none; }

.sub { display: block; margin-top: 4px; font-size: .8rem; line-height: 1.5; color: var(--text-muted); }

.seats {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface-sunken);
  font-family: var(--ui);
  font-size: .74rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--text-secondary);
}

.seats svg { width: 13px; height: 13px; flex: none; }
.seats--open { border-color: rgb(21 128 61 / .45); color: #15803d; background: rgb(21 128 61 / .1); }
.seats--full { border-color: rgb(163 52 31 / .45); color: var(--warn); background: rgb(163 52 31 / .1); }

@media (prefers-color-scheme: dark) {
  .seats--open { color: #6ed092; border-color: rgb(110 208 146 / .4); background: rgb(110 208 146 / .14); }
}

.next {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  font-family: var(--ui);
  font-size: .8rem;
  font-weight: 700;
  color: var(--brand-text);
  text-decoration: none;
  white-space: nowrap;
}

.next:hover { text-decoration: underline; }
.next svg { width: 14px; height: 14px; flex: none; }

.card__note {
  margin: 0;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface-sunken);
  font-size: .78rem;
  color: var(--text-muted);
}

.noscript {
  margin: 0 0 22px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.noscript p { margin: 0; max-width: 62ch; color: var(--text-secondary); }
.noscript p + p { margin-top: 8px; }

@media (max-width: 560px) {
  table:not(.grid) thead { display: none; }
  table:not(.grid), table:not(.grid) tbody, table:not(.grid) tr, table:not(.grid) td { display: block; width: 100%; }

  table:not(.grid) tr {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
  }

  table:not(.grid) tbody tr:last-child { border-bottom: 0; }

  table:not(.grid) td {
    padding: 3px 0;
    border-bottom: 0;
  }

  table:not(.grid) td[data-label]::before {
    content: attr(data-label) ": ";
    font-family: var(--ui);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  table:not(.grid) td.cell-class[data-label]::before { content: none; }
  table:not(.grid) tbody tr:hover td { background: none; }
}

@media print {
  .state, .panel--next, .noscript, .next, .card__note { display: none; }
  .seats { border: 0; background: none; padding: 0; color: #000000; }

  table:not(.grid) thead { display: table-header-group; }
  table:not(.grid), table:not(.grid) tbody, table:not(.grid) tr, table:not(.grid) td { display: revert; }
  table:not(.grid) td[data-label]::before { content: none; }

  .sub { font-size: 6pt; color: #3d3d3d; }
}

.block__link { color: var(--text); text-decoration: none; }
.block__link:hover { text-decoration: underline; }