/* Hi-Whyders components (TCH-016 design system). Needs tokens.css first. Class names are what the Django
   templates will use in sprint-2: .hw-nav, .hw-btn, .hw-chip, .hw-panel, .hw-table, .hw-field, .hw-legend, … */
@import url("fonts.5bc8a08f3137.css");   /* the Roboto trio, self-hosted (D-050); @import must stay the first rule */

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; background: var(--hw-bg-0); }
body {
  margin: 0; min-height: 100vh; background: var(--hw-bg-0); color: var(--hw-ink);
  font: var(--hw-text-md)/var(--hw-leading) var(--hw-sans); -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: var(--hw-glow); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--hw-focus); outline-offset: 2px; border-radius: var(--hw-radius-1); }
::selection { background: var(--hw-electric); color: var(--hw-on-electric); }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── type ─────────────────────────────────────────────────────────────────────────────────────────── */
h1, h2, h3 { margin: 0 0 var(--hw-space-4); line-height: var(--hw-leading-tight); letter-spacing: var(--hw-track-tight); font-weight: 650; }
h1 { font-size: var(--hw-text-2xl); }
h2 { font-size: var(--hw-text-xl); }
h3 { font-size: var(--hw-text-lg); }
p { margin: 0 0 var(--hw-space-4); }
.hw-eyebrow {             /* small uppercase mono label above a heading or value */
  display: block; margin-bottom: var(--hw-space-2); font: 600 var(--hw-text-xs)/1 var(--hw-mono);
  letter-spacing: var(--hw-track-caps); text-transform: uppercase; color: var(--hw-glow);
}
.hw-meta { color: var(--hw-ink-3); font-size: var(--hw-text-sm); }
.hw-num { font-family: var(--hw-mono); font-variant-numeric: tabular-nums; }
.hw-intro { font-size: var(--hw-text-lg); color: var(--hw-ink-2); max-width: 60ch; }

/* ── layout ───────────────────────────────────────────────────────────────────────────────────────── */
.hw-wrap { width: min(100% - 2 * var(--hw-space-6), var(--hw-content)); margin-inline: auto; }
.hw-section { padding-block: var(--hw-space-8); }
.hw-grid { display: grid; gap: var(--hw-space-5); }
.hw-stack > * + * { margin-top: var(--hw-space-4); }
.hw-row { display: flex; align-items: center; gap: var(--hw-space-3); flex-wrap: wrap; }
.hw-spacer { flex: 1; }

/* ── top navigation ───────────────────────────────────────────────────────────────────────────────── */
.hw-nav {
  position: sticky; top: 0; z-index: 10; height: var(--hw-nav-h);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--hw-bg-0) 92%, transparent), color-mix(in srgb, var(--hw-bg-0) 72%, transparent));
  backdrop-filter: blur(10px); border-bottom: var(--hw-hairline);
}
.hw-nav__inner { height: 100%; display: flex; align-items: center; gap: var(--hw-space-6); }
.hw-nav__brand img { height: 22px; width: auto; }
.hw-nav__links { display: flex; gap: var(--hw-space-1); }
.hw-nav__link {
  position: relative; padding: var(--hw-space-2) var(--hw-space-3); border-radius: var(--hw-radius-2);
  color: var(--hw-ink-2); font-size: var(--hw-text-sm); font-weight: 550; letter-spacing: .01em;
  transition: color var(--hw-dur-1) var(--hw-ease), background var(--hw-dur-1) var(--hw-ease);
}
.hw-nav__link:hover { color: var(--hw-ink); background: var(--hw-bg-2); text-decoration: none; }
.hw-nav__link[aria-current="page"] { color: var(--hw-ink); }
.hw-nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--hw-space-3); right: var(--hw-space-3); bottom: -13px; height: 2px;
  background: var(--hw-electric); box-shadow: 0 0 12px var(--hw-electric);
}
.hw-nav__tools { margin-left: auto; display: flex; align-items: center; gap: var(--hw-space-4); }

/* clock / countdown chip (warm accent = time) */
.hw-clock {
  display: inline-flex; align-items: baseline; gap: var(--hw-space-2); padding: 6px var(--hw-space-3);
  border: 1px solid color-mix(in srgb, var(--hw-accent-2) 35%, transparent); border-radius: var(--hw-radius-pill);
  font: 600 var(--hw-text-sm)/1 var(--hw-mono); font-variant-numeric: tabular-nums; color: var(--hw-accent-2);
}
.hw-clock__value { font-family: var(--hw-counter); }   /* counters keep the system mono (D-050) */
.hw-clock__label { font-family: var(--hw-mono); font-size: 10px; letter-spacing: var(--hw-track-caps); text-transform: uppercase; color: var(--hw-ink-3); }

/* FI | EN segmented switch */
.hw-lang { display: inline-flex; padding: 2px; border: var(--hw-hairline); border-radius: var(--hw-radius-pill); }
.hw-lang button {
  all: unset; cursor: pointer; padding: 4px 10px; border-radius: var(--hw-radius-pill);
  font: 600 var(--hw-text-xs)/1.2 var(--hw-mono); letter-spacing: .08em; color: var(--hw-ink-3);
}
.hw-lang button[aria-pressed="true"] { background: var(--hw-bg-2); color: var(--hw-ink); box-shadow: inset 0 0 0 1px var(--hw-edge-2); }
.hw-lang button:focus-visible { outline: 2px solid var(--hw-focus); }

/* phone nav (D-020, the user's pick of Q-L13 B): up to 1080 px (AP20, the user's pick; it was 560 px, and the full
   row needs up to 1055 px: signed in, FI, a 16-ch nick, a 3-digit-day countdown) one 56-px row with brand, clock and
   a menu button; the links, the language switch and login move into a sheet under it (48-px rows; the clock stays
   visible). The wordmark never shrinks. */
.hw-nav__brand { flex: none; }
.hw-nav__menu-btn, .hw-nav__sheet { display: none; }
@media (max-width: 560px) {
  .hw-wrap { width: calc(100% - 2 * var(--hw-space-4)); }
}
@media (max-width: 1080px) {
  .hw-nav { height: 56px; }
  .hw-nav__inner { gap: var(--hw-space-3); }
  .hw-nav__brand img { height: 18px; }
  .hw-nav__links, .hw-nav__tools > .hw-lang, .hw-nav__tools > .hw-btn { display: none; }
  .hw-nav__tools { gap: var(--hw-space-2); }
  .hw-clock { padding: 5px 9px; font-size: 13px; }
  .hw-clock__label { display: none; }
  .hw-nav__menu-btn {
    display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--hw-radius-2);
    border: 1px solid var(--hw-edge-2); background: none; color: var(--hw-ink); cursor: pointer;
  }
  .hw-nav__menu-btn[aria-expanded="true"] { background: var(--hw-bg-2); box-shadow: var(--hw-glow-1); }
  .hw-nav__sheet[data-open] {
    display: grid; gap: var(--hw-space-2); position: absolute; left: 0; right: 0; top: 56px; padding: var(--hw-space-4);
    background: color-mix(in srgb, var(--hw-bg-1) 97%, transparent); border-bottom: 1px solid var(--hw-edge-2); box-shadow: 0 24px 40px rgba(0, 0, 0, .6);
  }
  .hw-nav__sheet-link { display: flex; align-items: center; min-height: 48px; padding: 0 var(--hw-space-3);
    border-radius: var(--hw-radius-2); color: var(--hw-ink); font-size: var(--hw-text-lg); font-weight: 600; }
  .hw-nav__sheet-link:hover { text-decoration: none; background: var(--hw-bg-2); }
  .hw-nav__sheet-link[aria-current="page"] { background: var(--hw-bg-2); box-shadow: inset 3px 0 0 var(--hw-electric); }
  .hw-nav__sheet-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--hw-space-2); padding: var(--hw-space-2) var(--hw-space-3) 0; }   /* a long nick wraps logout under it */
  .hw-nav__sheet-row > .hw-btn { max-width: 100%; overflow: hidden; white-space: nowrap; }
  .hw-nav__sheet .hw-lang button { padding: 10px 16px; }
}

/* ── buttons ──────────────────────────────────────────────────────────────────────────────────────── */
.hw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--hw-space-2);
  min-height: 40px; padding: 0 var(--hw-space-5); border: 1px solid transparent; border-radius: var(--hw-radius-2);
  font: 650 var(--hw-text-sm)/1 var(--hw-sans); letter-spacing: .02em; cursor: pointer; text-decoration: none;
  transition: box-shadow var(--hw-dur-2) var(--hw-ease), background var(--hw-dur-2) var(--hw-ease), transform var(--hw-dur-1);
}
.hw-btn:hover { text-decoration: none; }
.hw-btn:active { transform: translateY(1px); }
.hw-btn--primary { background: var(--hw-electric); color: var(--hw-on-electric); box-shadow: 0 0 0 1px var(--hw-electric), 0 0 22px color-mix(in srgb, var(--hw-electric) 35%, transparent); }
.hw-btn--primary:hover { box-shadow: 0 0 0 1px var(--hw-glow), 0 0 32px color-mix(in srgb, var(--hw-glow) 45%, transparent); }
.hw-btn--ghost { background: transparent; color: var(--hw-ink); border-color: var(--hw-edge-2); }
.hw-btn--ghost:hover { background: var(--hw-bg-2); box-shadow: var(--hw-glow-1); }
.hw-btn--danger { background: transparent; color: var(--hw-danger); border-color: color-mix(in srgb, var(--seat-booked) 50%, transparent); }
.hw-btn--lg { min-height: 52px; padding: 0 var(--hw-space-6); font-size: var(--hw-text-md); }
.hw-btn[disabled] { opacity: .4; cursor: not-allowed; box-shadow: none; }

/* ── chips and badges ─────────────────────────────────────────────────────────────────────────────── */
.hw-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--hw-radius-pill);
  border: var(--hw-hairline); font: 600 var(--hw-text-xs)/1.4 var(--hw-mono); letter-spacing: .06em; color: var(--hw-ink-2);
  white-space: nowrap;
}
.hw-chip--live { color: var(--hw-accent-2); border-color: color-mix(in srgb, var(--hw-accent-2) 45%, transparent); }
.hw-chip--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: hw-blink 1.6s ease-in-out infinite; }
.hw-chip--open { color: var(--seat-free); border-color: color-mix(in srgb, var(--seat-free) 40%, transparent); }
.hw-chip--closed { color: var(--hw-ink-3); }
button.hw-chip { background: none; cursor: pointer; }
button.hw-chip[aria-pressed="true"] { color: var(--hw-ink); border-color: var(--hw-electric); box-shadow: 0 0 12px color-mix(in srgb, var(--hw-electric) 30%, transparent); }

/* rank: military-style insignia chip. The rank is public (D-003), so it sits beside every nick */
.hw-rank {
  display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1 var(--hw-mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--hw-ink-2);
}
/* the insignia: <svg class="hw-rank__icon" aria-hidden="true"><use href="/static/ranks/hw-ranks.svg#hw-rank-<slug>"/></svg>
   drawn by outputs/ranks/build_ranks.py; the sprite's colours are these properties, so the tokens recolour it */
.hw-rank {
  --hw-rank-dim: var(--hw-ink-3); --hw-rank-glow: var(--hw-glow); --hw-rank-blue: var(--hw-electric);
  --hw-rank-exit: var(--hw-accent); --hw-rank-knock: var(--hw-on-electric); --hw-rank-core: var(--hw-bg-1);
}
.hw-rank__icon { flex: none; width: 31.5px; height: 18px; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--hw-glow) 35%, transparent)); }
.hw-rank--lg { gap: var(--hw-space-3); font-size: var(--hw-text-sm); color: var(--hw-ink); }
.hw-rank--lg .hw-rank__icon { width: 84px; height: 48px; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--hw-glow) 40%, transparent)); }

/* ── panels and cards ─────────────────────────────────────────────────────────────────────────────── */
.hw-panel {
  position: relative; padding: var(--hw-space-5); border-radius: var(--hw-radius-3);
  background: linear-gradient(180deg, color-mix(in srgb, var(--hw-bg-2) 55%, transparent), color-mix(in srgb, var(--hw-bg-1) 85%, transparent)); box-shadow: var(--hw-glow-1);
}
.hw-panel--glow { box-shadow: var(--hw-glow-2); }
.hw-panel__corner::before, .hw-panel__corner::after {   /* HUD corner ticks */
  content: ""; position: absolute; width: 14px; height: 14px; border-color: var(--hw-glow); border-style: solid; opacity: .8;
}
.hw-panel__corner::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; border-top-left-radius: var(--hw-radius-3); }
.hw-panel__corner::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; border-bottom-right-radius: var(--hw-radius-3); }

.hw-stat { display: grid; gap: 2px; }
.hw-stat__value { font: 650 var(--hw-text-xl)/1 var(--hw-mono); font-variant-numeric: tabular-nums; color: var(--hw-ink); }
.hw-stat__label { font: 600 var(--hw-text-xs)/1.3 var(--hw-mono); letter-spacing: var(--hw-track-caps); text-transform: uppercase; color: var(--hw-ink-3); }

/* the big countdown: digits as an LED-style read-out */
.hw-countdown { display: flex; gap: var(--hw-space-3); }
.hw-countdown__unit { display: grid; justify-items: center; gap: 6px; min-width: 76px; padding: var(--hw-space-3) var(--hw-space-2);
  border-radius: var(--hw-radius-2); background: color-mix(in srgb, var(--hw-accent-2) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hw-accent-2) 28%, transparent); }
.hw-countdown__value { font: 700 36px/1 var(--hw-counter); font-variant-numeric: tabular-nums; color: var(--hw-accent-2); white-space: nowrap;
  text-shadow: 0 0 14px color-mix(in srgb, var(--hw-accent-2) 55%, transparent); }
.hw-countdown__label { font: 600 10px/1 var(--hw-mono); letter-spacing: var(--hw-track-caps); text-transform: uppercase; color: var(--hw-ink-3); }

/* meter (registered / seats) */
.hw-meter { height: 6px; border-radius: var(--hw-radius-pill); background: var(--hw-bg-2); overflow: hidden; }
.hw-meter > i { display: block; height: 100%; background: linear-gradient(90deg, var(--hw-electric), var(--hw-glow)); box-shadow: 0 0 10px var(--hw-glow); }

/* ── table (LAN list, attendees) ──────────────────────────────────────────────────────────────────── */
.hw-table { width: 100%; border-collapse: collapse; font-size: var(--hw-text-sm); }
.hw-table th {
  text-align: left; padding: var(--hw-space-3) var(--hw-space-4); border-bottom: 1px solid var(--hw-edge-2);
  font: 600 var(--hw-text-xs)/1 var(--hw-mono); letter-spacing: var(--hw-track-caps); text-transform: uppercase; color: var(--hw-ink-3);
}
.hw-table td { padding: var(--hw-space-3) var(--hw-space-4); border-bottom: 1px solid color-mix(in srgb, var(--hw-glow) 8%, transparent); }
.hw-table tbody tr { transition: background var(--hw-dur-1); }
.hw-table tbody tr:hover { background: color-mix(in srgb, var(--hw-bg-2) 60%, transparent); }
.hw-table td.num, .hw-table th.num { text-align: right; font-family: var(--hw-mono); font-variant-numeric: tabular-nums; }
.hw-table__year td { padding-top: var(--hw-space-5); border-bottom: none; font: 700 var(--hw-text-lg)/1 var(--hw-mono); color: var(--hw-glow); }
.hw-table__year:hover { background: none !important; }
/* sortable headings (the LAN page's participants; D-021 Historia): the heading is a button, the arrow shows the order */
.hw-table th[data-sort-key] { padding: 0; }
.hw-table th[data-sort-key] button {
  display: inline-flex; align-items: center; gap: .45em; width: 100%; padding: var(--hw-space-3) var(--hw-space-4);
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; cursor: pointer;
}
.hw-table th.num[data-sort-key] button { justify-content: flex-end; }
/* compact: a table in a side panel (the participants list). Edge cells sit on the panel padding; the rank chip
   tightens its tracking so the longest name (Kenttärovasti, Sotilaskarkuri) still fits 292 px */
.hw-table--compact td, .hw-table--compact th, .hw-table--compact th[data-sort-key] button { padding-inline: var(--hw-space-2); }
.hw-table--compact tr > :first-child, .hw-table--compact tr > :first-child button { padding-left: 0; }
.hw-table--compact tr > :last-child, .hw-table--compact tr > :last-child button { padding-right: 0; }
.hw-table--compact .hw-rank { gap: 5px; font-size: 10px; letter-spacing: .04em; white-space: nowrap; }
.hw-table th[data-sort-key] button::after { content: "\2195"; opacity: .35; }
.hw-table th[data-sort-key] button:hover { color: var(--hw-ink); }
.hw-table th[data-sort-key] button:focus-visible { outline: 1px solid var(--hw-glow); outline-offset: -2px; }
.hw-table th[aria-sort] { color: var(--hw-ink); }
.hw-table th[aria-sort="ascending"] button::after { content: "\25B2"; opacity: 1; color: var(--hw-glow); font-size: .8em; }
.hw-table th[aria-sort="descending"] button::after { content: "\25BC"; opacity: 1; color: var(--hw-glow); font-size: .8em; }

/* ── form fields ──────────────────────────────────────────────────────────────────────────────────── */
.hw-field { display: grid; gap: 6px; }
.hw-field label { font: 600 var(--hw-text-xs)/1 var(--hw-mono); letter-spacing: var(--hw-track-caps); text-transform: uppercase; color: var(--hw-ink-2); }
.hw-input {
  min-height: 42px; padding: 0 var(--hw-space-3); border-radius: var(--hw-radius-2); border: 1px solid var(--hw-edge);
  background: var(--hw-bg-1); color: var(--hw-ink); font: inherit;
}
.hw-input:focus { outline: none; border-color: var(--hw-glow); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hw-glow) 18%, transparent); }
.hw-help { font-size: var(--hw-text-xs); color: var(--hw-ink-3); }
.hw-error { display: block; font-size: var(--hw-text-xs); color: var(--hw-danger); }

/* ── seat-state legend (D-008 rev 2) ──────────────────────────────────────────────────────────────── */
.hw-legend { display: flex; flex-wrap: wrap; gap: var(--hw-space-4); font-size: var(--hw-text-sm); color: var(--hw-ink-2); }
.hw-legend__item { display: inline-flex; align-items: center; gap: var(--hw-space-2); }
.hw-legend__swatch {      /* a tiny LED tile: deep panel, lit edge in the state colour */
  width: 18px; height: 18px; border-radius: 4px; background: var(--deep); box-shadow: inset 0 0 0 2px var(--lit), 0 0 8px var(--lit);
}
.hw-legend__swatch--selected { position: relative; }
.hw-legend__swatch--selected::after {      /* the selection ring: same colour, outside the tile, pulsing */
  content: ""; position: absolute; inset: -5px; border-radius: 7px; border: 2px solid var(--lit); opacity: .9;
  animation: hw-ring 2.6s ease-in-out infinite;
}
.hw-legend__count { font-family: var(--hw-mono); color: var(--hw-ink-3); }
.s-free { --lit: var(--seat-free); --deep: var(--seat-free-deep); }
.s-selected { --lit: var(--seat-selected-fill); --deep: var(--seat-selected-deep-fill); }
.s-mine { --lit: var(--seat-mine); --deep: var(--seat-mine-deep); }      /* your confirmed seat (D-030) */
.s-booked { --lit: var(--seat-booked); --deep: var(--seat-booked-deep); }
.s-prebooked { --lit: var(--seat-prebooked); --deep: var(--seat-prebooked-deep); }
.s-unavailable { --lit: var(--seat-unavailable); --deep: var(--seat-unavailable-deep); }

/* the booking bar under the map */
.hw-bookbar { display: flex; align-items: center; gap: var(--hw-space-4); padding: var(--hw-space-4) var(--hw-space-5);
  border-radius: var(--hw-radius-2); background: var(--hw-bg-1); box-shadow: var(--hw-glow-1); }
.hw-bookbar__seat { font: 700 var(--hw-text-xl)/1 var(--hw-mono); color: var(--seat-selected-led-fill); text-shadow: 0 0 12px color-mix(in srgb, var(--seat-selected-glow) 80%, transparent); }

/* ── backgrounds ──────────────────────────────────────────────────────────────────────────────────── */
.hw-grid-bg {
  background-image:
    radial-gradient(ellipse 60% 50% at 50% 35%, color-mix(in srgb, var(--hw-electric) 16%, transparent), transparent 70%),
    linear-gradient(color-mix(in srgb, var(--hw-glow) 4.5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--hw-glow) 4.5%, transparent) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
}

/* ── motion ───────────────────────────────────────────────────────────────────────────────────────── */
@keyframes hw-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes hw-ring { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.12); opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── shape: the chamfer (TCH-016 D-080; the user picked version A of outputs/prototypes/cut-corners/) ───────────────
   Every box loses its top-left and bottom-right corner at 45°, the angle of the wordmark's rail ends and of its d and R
   bowls; one rule at three sizes. A cut box draws its 1 px outline as a cut ring (clip-path with an evenodd hole), so the
   45° edge is stroked too; a clipped border or box-shadow would lose it. Panels stay unclipped (content, focus rings and
   pop-ups are never cut): their fill and ring are layers behind and over them. Controls clip themselves, and their focus
   ring sits inside. The highlighted panel (.hw-panel__corner) glows along its two cuts, where the HUD ticks were. */
:root { --hw-cut-lg: 18px; --hw-cut-md: 9px; --hw-cut-sm: 6px; }
.hw-panel, .hw-bookbar, .hw-btn, .hw-chip, .hw-clock, .hw-countdown__unit, .hw-input, .hw-lang, .hw-lang button,
.hw-nav__menu-btn, .hw-nav__link, .hw-nav__sheet-link {
  --hw-chamfer: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  --hw-ring: polygon(evenodd, var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c), var(--c) 0,
    calc(var(--c) + .42px) 1px, 1px calc(var(--c) + .42px), 1px calc(100% - 1px), calc(100% - var(--c) - .42px) calc(100% - 1px),
    calc(100% - 1px) calc(100% - var(--c) - .42px), calc(100% - 1px) 1px, calc(var(--c) + .42px) 1px);
  border-radius: 0;
}

/* panels and the booking bar: a fill layer behind, the ring over, the box itself unclipped */
.hw-panel { --c: var(--hw-cut-lg); --hw-edge-ring: var(--hw-edge); background: none; box-shadow: none; isolation: isolate; }
.hw-bookbar { --c: var(--hw-cut-md); --hw-edge-ring: var(--hw-edge); position: relative; background: none; box-shadow: none; isolation: isolate; }
.hw-panel::before, .hw-panel__corner::before, .hw-bookbar::before {
  content: ""; position: absolute; inset: 0; width: auto; height: auto; z-index: -1; border: 0; border-radius: 0; opacity: 1;
  clip-path: var(--hw-chamfer); background: linear-gradient(180deg, color-mix(in srgb, var(--hw-bg-2) 55%, transparent), color-mix(in srgb, var(--hw-bg-1) 85%, transparent)); }
.hw-bookbar::before { background: var(--hw-bg-1); }
.hw-panel::after, .hw-panel__corner::after, .hw-bookbar::after {
  content: ""; position: absolute; inset: 0; width: auto; height: auto; border: 0; border-radius: 0; opacity: 1; pointer-events: none;
  clip-path: var(--hw-ring); background: var(--hw-edge-ring); }
.hw-panel__corner { --hw-edge-ring: linear-gradient(135deg, var(--hw-glow) 0 34px, color-mix(in srgb, var(--hw-glow) 28%, transparent) 110px,
  color-mix(in srgb, var(--hw-glow) 28%, transparent) calc(100% - 110px), var(--hw-glow) calc(100% - 34px)); filter: drop-shadow(0 0 12px color-mix(in srgb, var(--hw-electric) 22%, transparent)); }
.hw-panel--glow { filter: drop-shadow(0 0 16px color-mix(in srgb, var(--hw-electric) 30%, transparent)); }

/* buttons: the button is the shape; an outlined one draws its ring in ::before */
.hw-btn { --c: var(--hw-cut-md); clip-path: var(--hw-chamfer); }
.hw-btn--primary, .hw-btn--primary:hover { box-shadow: none; }
.hw-btn--primary:hover { background: color-mix(in srgb, var(--hw-electric) 80%, #fff); }
.hw-btn--ghost, .hw-btn--danger { position: relative; border-color: transparent; }
.hw-btn--ghost::before, .hw-btn--danger::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  clip-path: var(--hw-ring); background: var(--hw-edge-2); }
.hw-btn--danger::before { background: color-mix(in srgb, var(--seat-booked) 55%, transparent); }
.hw-btn--ghost:hover { box-shadow: none; }
.hw-btn:focus-visible { outline-offset: -4px; border-radius: 0; }

/* chips, the nav clock, the countdown cells: cut, with the ring in ::after (the live chip's dot keeps ::before) */
.hw-chip { --c: var(--hw-cut-sm); --hw-edge-ring: var(--hw-edge-2); position: relative; clip-path: var(--hw-chamfer); border-color: transparent; }
.hw-chip--live { --hw-edge-ring: color-mix(in srgb, var(--hw-accent-2) 50%, transparent); }
.hw-chip--open { --hw-edge-ring: color-mix(in srgb, var(--seat-free) 45%, transparent); }
.hw-chip--error { --hw-edge-ring: color-mix(in srgb, var(--seat-booked) 50%, transparent); }
button.hw-chip[aria-pressed="true"] { --hw-edge-ring: var(--hw-electric); box-shadow: none; background: color-mix(in srgb, var(--hw-electric) 16%, transparent); }
.hw-clock { --c: var(--hw-cut-sm); --hw-edge-ring: color-mix(in srgb, var(--hw-accent-2) 40%, transparent); position: relative; clip-path: var(--hw-chamfer); border-color: transparent; }
.hw-countdown__unit { --c: var(--hw-cut-md); --hw-edge-ring: color-mix(in srgb, var(--hw-accent-2) 32%, transparent); position: relative; clip-path: var(--hw-chamfer); box-shadow: none; }
.hw-chip::after, .hw-clock::after, .hw-countdown__unit::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  clip-path: var(--hw-ring); background: var(--hw-edge-ring); }
.hw-chip:focus-visible, .hw-clock:focus-visible { outline-offset: -3px; border-radius: 0; }

/* fields and the nav: the same cut, small */
.hw-input { --c: var(--hw-cut-sm); clip-path: var(--hw-chamfer); }
.hw-input:focus { box-shadow: inset 0 0 0 1px var(--hw-glow); }
.hw-lang { --c: var(--hw-cut-sm); clip-path: var(--hw-chamfer); }
.hw-lang button { --c: 4px; clip-path: var(--hw-chamfer); }
.hw-nav__menu-btn { --c: var(--hw-cut-sm); clip-path: var(--hw-chamfer); }
/* nav links are never clipped (the current page's underline hangs 13 px below the link): their hover fill is cut by
   two gradient halves instead */
.hw-nav__link:hover, .hw-nav__sheet-link:hover, .hw-nav__sheet-link[aria-current="page"] {
  background: linear-gradient(135deg, transparent 4px, var(--hw-bg-2) 4px) left / 50% 100% no-repeat,
              linear-gradient(315deg, transparent 4px, var(--hw-bg-2) 4px) right / 50% 100% no-repeat; }
.hw-lang button:focus-visible, .hw-nav__menu-btn:focus-visible { outline-offset: -3px; }
/* the seat-state legend's LED tiles follow the seats (D-080, the user: "Cut the seats too"); the selected tile keeps its
   pulsing ring outside, so it is squared rather than clipped */
.hw-legend__swatch { border-radius: 0; clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); }
.hw-legend__swatch--selected { clip-path: none; }
.hw-legend__swatch--selected::after { border-radius: 0; }

/* labels in Roboto Condensed, as GUI kit v2 (AI-026 / SPEC-008: the trio's Condensed is "labels (uppercase kickers, rail
   buttons)"; TCH-016 D-085, the user: "do the change"). Figures, counters and seat numbers keep their faces */
.hw-eyebrow, .hw-clock__label, .hw-rank, .hw-stat__label, .hw-countdown__label, .hw-table th, .hw-field label { font-family: var(--hw-cond); }
.hw-table th.num { font-family: var(--hw-cond); }   /* D-085: a number column's header is a label too; its cells keep the mono */