@kerusiweb/react 2.3.0 → 3.1.0

package/styles.css

@@ -1,365 +1,541 @@
-/*
- * @kerusiweb/react — the one stylesheet the package ships.
- *
- *   import '@kerusiweb/react/styles.css';
- *
- * It owns layout, opacity, cursor, paint order and the focus ring, and nothing
- * else. Every colour is bound inline by the components instead, because a
- * `var(--kerusi-selected-bg, …)` written here would carry the *library* default
- * as its fallback and silently skip the `colors` prop tier — only the
- * TypeScript side can resolve that one. See `cssVar()` in @kerusiweb/core for
- * the three tiers and their precedence.
- */
-
-/* --- the map ------------------------------------------------------------- */
-
-.kerusi-seatmap {
-  display: flex;
-  flex-direction: column;
-  gap: 1.25rem;
-}
-
-.kerusi-seatmap__section {
-  display: flex;
-  flex-direction: column;
-  gap: 0.4rem;
-}
-
-.kerusi-section-label {
-  margin: 0;
-  font-size: 0.85rem;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  opacity: 0.75;
-}
-
-/* Visually hidden, still announced. */
-.kerusi-sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  white-space: nowrap;
-  border: 0;
-}
-
-/* --- a section ----------------------------------------------------------- */
-
-/* The viewBox carries the proportions; CSS only decides how wide it gets. */
-.kerusi-section-svg {
-  display: block;
-  width: 100%;
-  height: auto;
-  max-width: 100%;
-}
-
-.kerusi-seat {
-  cursor: pointer;
-  outline: none;
-}
-
-.kerusi-seat--unselectable {
-  cursor: not-allowed;
-}
-
-.kerusi-seat__label,
-.kerusi-element__label {
-  pointer-events: none;
-  user-select: none;
-  font-family: inherit;
-}
-
-/* A selected seat's number is stroked with the core colour and painted stroke
-   first, so the halo sits behind the glyphs and knocks the occupant figure out
-   from under them. Only the ordering lives here: the colour and width are bound
-   inline, for the reason at the top of this file. */
-.kerusi-seat__label {
-  paint-order: stroke;
-  stroke-linejoin: round;
-}
-
-/* No `transition: fill` here, deliberately. Every fill is a
-   `var(--kerusi-*, …)` substitution, and Chromium cannot transition a paint
-   property to a variable-derived value — the transition never advances and the
-   seat keeps its previous color for good, so a selected seat would never turn
-   selected. That covers the core's fill and the label's halo stroke too.
-   Correct color beats a 120ms fade. */
-
-/* Drawn over the seat's own type-colour fill, so a held or booked seat still
-   recedes even though its hue no longer changes. Fill colour is bound inline;
-   opacity is the only thing this rule owns. */
-.kerusi-seat__wash {
-  pointer-events: none;
-  opacity: 0.5;
-}
-
-/* The bright plate inside a selected seat's frame. Colour is bound inline;
-   this rule only keeps it out of hit-testing, so a click still lands on the
-   seat group. */
-.kerusi-seat__core {
-  pointer-events: none;
-}
-
-/* Fill/stroke colour is bound inline per variant; these rules only set the
-   weight each variant reads at. Solid = settled (yours, or sold); hollow = a
-   hold still in progress. */
-.kerusi-seat__occupant {
-  pointer-events: none;
-}
-
-/* Lighter than the other variants: this one is a dark mark on a bright plate,
-   and a dark mark reads heavier than a light one at the same opacity. Kept as
-   texture so it does not compete with the number sitting on top of it. */
-.kerusi-seat__occupant--selected {
-  opacity: 0.2;
-}
-
-.kerusi-seat__occupant--booked {
-  opacity: 0.55;
-}
-
-.kerusi-seat__occupant--held {
-  opacity: 0.75;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-
-/* The number competes with the silhouette behind it. */
-.kerusi-seat--selected .kerusi-seat__label {
-  font-weight: 600;
-}
-
-/* The focus ring is drawn on the seat box so it follows a rotated seat. It is
-   a separate mark from the selected frame — it strokes the outermost path, so a
-   focused selected seat shows both.
-
-   Two levels of fallback, so this token keeps the same precedence as every
-   other one: a `--kerusi-focus-ring` from the consumer's stylesheet wins;
-   otherwise `--kerusi-focus-ring-input`, which the component writes on the
-   `<svg>` from the `colors` prop; otherwise the inherited text color. */
-.kerusi-seat:focus-visible .kerusi-seat__box {
-  stroke: var(--kerusi-focus-ring, var(--kerusi-focus-ring-input, currentColor));
-  stroke-width: 2.5;
-  paint-order: stroke;
-}
-
-/* With a custom seat template the library cannot assume a `.kerusi-seat__box`
-   exists, so it draws this outline of the seat's body over the custom content
-   instead (the stock seat never renders it). Same colour chain as the ring
-   above; the stroke is centred on the outline because there is no fill of its
-   own to sit behind. */
-.kerusi-seat__focus {
-  fill: none;
-  stroke: none;
-  pointer-events: none;
-}
-
-.kerusi-seat:focus-visible .kerusi-seat__focus {
-  stroke: var(--kerusi-focus-ring, var(--kerusi-focus-ring-input, currentColor));
-  stroke-width: 2.5;
-}
-
-.kerusi-element__void {
-  stroke-width: 1;
-  stroke-dasharray: 4 3;
-  opacity: 0.7;
-}
-
-/* --- the legend ---------------------------------------------------------- */
-
-.kerusi-legend {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1.5rem;
-  font-size: 0.85rem;
-}
-
-.kerusi-legend__block {
-  display: flex;
-  flex-direction: column;
-  gap: 0.4rem;
-  min-width: 0;
-}
-
-.kerusi-legend__heading {
-  margin: 0;
-  font-size: 0.72rem;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  opacity: 0.65;
-}
-
-.kerusi-legend__list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.35rem 0.9rem;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.kerusi-legend__item {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.4rem;
-}
-
-.kerusi-legend__swatch {
-  display: inline-block;
-  flex: none;
-  width: 0.85rem;
-  height: 0.85rem;
-  border-radius: 3px;
-}
-
-/* The seat glyph carries its own corner radius in the viewBox. */
-.kerusi-legend__swatch--glyph {
-  border-radius: 0;
-  overflow: visible;
-}
-
-/* Mirrors `.kerusi-seat__occupant--*` on the map, so the key matches what it
-   is keying. Fill/stroke colour is bound inline; these set the weight. */
-.kerusi-legend__occupant--selected {
-  opacity: 0.2;
-}
-
-.kerusi-legend__occupant--booked {
-  opacity: 0.55;
-}
-
-.kerusi-legend__occupant--held {
-  opacity: 0.75;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-
-.kerusi-legend__price {
-  opacity: 0.7;
-  font-variant-numeric: tabular-nums;
-}
-
-/* --- zoom, pan and maximize -------------------------------------------------
-   Everything below applies only when `zoomable` or `maximizable` is on; a plain
-   map renders none of these elements. Colours are bound inline from the
-   `--kerusi-*` tokens, so this file owns layout, motion and the focus ring.
-   The same rules as the Angular component's stylesheet. */
-
-/* Same column the sections sit in without the wrapper, so turning a feature on
-   does not move anything. */
-.kerusi-seatmap__stage {
-  display: flex;
-  flex-direction: column;
-  gap: 1.25rem;
-}
-
-.kerusi-toolbar {
-  display: flex;
-  gap: 0.35rem;
-  align-self: flex-end;
-  /* Stays put under a maximized map's scrolling stage. */
-  flex: none;
-}
-
-.kerusi-control {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  /* 44px: a comfortable touch target on the phones this exists for. */
-  width: 2.75rem;
-  height: 2.75rem;
-  padding: 0;
-  border: 1px solid;
-  border-radius: 0.4rem;
-  font: inherit;
-  cursor: pointer;
-}
-
-/* `aria-disabled`, not `disabled`: a disabled button drops out of the tab order,
-   and pressing "zoom in" until the ceiling would throw focus away mid-press. */
-.kerusi-control[aria-disabled='true'] {
-  opacity: 0.45;
-  cursor: default;
-}
-
-.kerusi-control svg {
-  width: 1.4rem;
-  height: 1.4rem;
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 2;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  pointer-events: none;
-}
-
-.kerusi-control:focus-visible,
-.kerusi-viewport:focus-visible {
-  outline: 2px solid var(--kerusi-focus-ring, var(--kerusi-focus-ring-input, currentColor));
-  outline-offset: 2px;
-}
-
-/* A window onto the map. `clip` rather than `hidden`: a hidden box can still be
-   scrolled by the browser when a seat inside takes focus, which would fight the
-   transform; a clipped one cannot be scrolled at all. */
-.kerusi-viewport {
-  position: relative;
-  overflow: hidden;
-  overflow: clip;
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-/* The same column the sections sit in outside a viewport. */
-.kerusi-viewport__content {
-  display: flex;
-  flex-direction: column;
-  gap: 1.25rem;
-  transform-origin: 0 0;
-}
-
-/* Only for a button, key or reveal. A finger or wheel moves the map directly, and
-   easing behind it would feel like lag. */
-.kerusi-viewport__content--animated {
-  transition: transform 160ms ease-out;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .kerusi-viewport__content--animated {
-    transition: none;
-  }
-}
-
-/* Maximized: the map fills the screen. This is the whole feature on iPhone,
-   which has no element full screen; elsewhere native full screen is requested
-   on top. `Canvas` / `CanvasText` and the backdrop come from inline styles. */
-.kerusi-seatmap--maximized {
-  position: fixed;
-  inset: 0;
-  z-index: var(--kerusi-maximized-z-index, 1000);
-  box-sizing: border-box;
-  padding: 0.75rem;
-  gap: 0.5rem;
-  overflow: hidden;
-  overscroll-behavior: contain;
-}
-
-.kerusi-seatmap--maximized .kerusi-seatmap__stage {
-  flex: 1 1 auto;
-  min-height: 0;
-  gap: 0.5rem;
-  /* A map that is not zoomable has no viewport to pan, so it scrolls instead. */
-  overflow: auto;
-}
-
-.kerusi-seatmap--maximized .kerusi-viewport {
-  flex: 1 1 auto;
-  min-height: 0;
-}
+/*
+ * @kerusiweb/react — the one stylesheet the package ships.
+ *
+ *   import '@kerusiweb/react/styles.css';
+ *
+ * It owns layout, opacity, cursor, paint order and the focus ring, and nothing
+ * else. Every colour is bound inline by the components instead, because a
+ * `var(--kerusi-selected-bg, …)` written here would carry the *library* default
+ * as its fallback and silently skip the `colors` prop tier — only the
+ * TypeScript side can resolve that one. See `cssVar()` in @kerusiweb/core for
+ * the three tiers and their precedence.
+ */
+
+/* --- the map ------------------------------------------------------------- */
+
+.kerusi-seatmap {
+  /* The containing block for a seat card, which is positioned in the map's root. */
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+/* A section's label, drawn inside the map at the top-left of its bounds (D5).
+   Its size comes from the section's seat size, so it scales with the map. */
+.kerusi-section-label {
+  font-family: inherit;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  opacity: 0.75;
+  pointer-events: none;
+  user-select: none;
+}
+
+/* Visually hidden, still announced. */
+.kerusi-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* --- the drawing: one svg, a group per section ---------------------------- */
+
+/* The viewBox is the document's canvas and carries its proportions; CSS only
+   decides how wide it gets. */
+.kerusi-seatmap__svg {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-width: 100%;
+}
+
+.kerusi-seat {
+  cursor: pointer;
+  outline: none;
+}
+
+.kerusi-seat--unselectable {
+  cursor: not-allowed;
+}
+
+.kerusi-seat__label,
+.kerusi-element__label {
+  pointer-events: none;
+  user-select: none;
+  font-family: inherit;
+}
+
+/* A selected seat's number is stroked with the core colour and painted stroke
+   first, so the halo sits behind the glyphs and knocks the occupant figure out
+   from under them. Only the ordering lives here: the colour and width are bound
+   inline, for the reason at the top of this file. */
+.kerusi-seat__label {
+  paint-order: stroke;
+  stroke-linejoin: round;
+}
+
+/* No `transition: fill` here, deliberately. Every fill is a
+   `var(--kerusi-*, …)` substitution, and Chromium cannot transition a paint
+   property to a variable-derived value — the transition never advances and the
+   seat keeps its previous color for good, so a selected seat would never turn
+   selected. That covers the core's fill and the label's halo stroke too.
+   Correct color beats a 120ms fade. */
+
+/* Drawn over the seat's own type-colour fill, so a held or booked seat still
+   recedes even though its hue no longer changes. Fill colour is bound inline;
+   opacity is the only thing this rule owns. */
+.kerusi-seat__wash {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+/* The bright plate inside a selected seat's frame. Colour is bound inline;
+   this rule only keeps it out of hit-testing, so a click still lands on the
+   seat group. */
+.kerusi-seat__core {
+  pointer-events: none;
+}
+
+/* Fill/stroke colour is bound inline per variant; these rules only set the
+   weight each variant reads at. Solid = settled (yours, or sold); hollow = a
+   hold still in progress. */
+.kerusi-seat__occupant {
+  pointer-events: none;
+}
+
+/* Lighter than the other variants: this one is a dark mark on a bright plate,
+   and a dark mark reads heavier than a light one at the same opacity. Kept as
+   texture so it does not compete with the number sitting on top of it. */
+.kerusi-seat__occupant--selected {
+  opacity: 0.2;
+}
+
+.kerusi-seat__occupant--booked {
+  opacity: 0.55;
+}
+
+.kerusi-seat__occupant--held {
+  opacity: 0.75;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* The number competes with the silhouette behind it. */
+.kerusi-seat--selected .kerusi-seat__label {
+  font-weight: 600;
+}
+
+/* The focus ring is drawn on the seat box so it follows a rotated seat. It is
+   a separate mark from the selected frame — it strokes the outermost path, so a
+   focused selected seat shows both.
+
+   Two levels of fallback, so this token keeps the same precedence as every
+   other one: a `--kerusi-focus-ring` from the consumer's stylesheet wins;
+   otherwise `--kerusi-focus-ring-input`, which the component writes on the
+   `<svg>` from the `colors` prop; otherwise the inherited text color. */
+.kerusi-seat:focus-visible .kerusi-seat__box {
+  stroke: var(--kerusi-focus-ring, var(--kerusi-focus-ring-input, currentColor));
+  stroke-width: 2.5;
+  paint-order: stroke;
+}
+
+/* With a custom seat template the library cannot assume a `.kerusi-seat__box`
+   exists, so it draws this outline of the seat's body over the custom content
+   instead (the stock seat never renders it). Same colour chain as the ring
+   above; the stroke is centred on the outline because there is no fill of its
+   own to sit behind. */
+.kerusi-seat__focus {
+  fill: none;
+  stroke: none;
+  pointer-events: none;
+}
+
+.kerusi-seat:focus-visible .kerusi-seat__focus {
+  stroke: var(--kerusi-focus-ring, var(--kerusi-focus-ring-input, currentColor));
+  stroke-width: 2.5;
+}
+
+.kerusi-element__void {
+  stroke-width: 1;
+  stroke-dasharray: 4 3;
+  opacity: 0.7;
+}
+
+/* --- the legend ---------------------------------------------------------- */
+
+.kerusi-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+  font-size: 0.85rem;
+}
+
+.kerusi-legend__block {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  min-width: 0;
+}
+
+.kerusi-legend__heading {
+  margin: 0;
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  opacity: 0.65;
+}
+
+.kerusi-legend__list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem 0.9rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.kerusi-legend__item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.kerusi-legend__swatch {
+  display: inline-block;
+  flex: none;
+  width: 0.85rem;
+  height: 0.85rem;
+  border-radius: 3px;
+}
+
+/* The seat glyph carries its own corner radius in the viewBox. */
+.kerusi-legend__swatch--glyph {
+  border-radius: 0;
+  overflow: visible;
+}
+
+/* Mirrors `.kerusi-seat__occupant--*` on the map, so the key matches what it
+   is keying. Fill/stroke colour is bound inline; these set the weight. */
+.kerusi-legend__occupant--selected {
+  opacity: 0.2;
+}
+
+.kerusi-legend__occupant--booked {
+  opacity: 0.55;
+}
+
+.kerusi-legend__occupant--held {
+  opacity: 0.75;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.kerusi-legend__price {
+  opacity: 0.7;
+  font-variant-numeric: tabular-nums;
+}
+
+/* --- zoom, pan and maximize -------------------------------------------------
+   Everything below applies only when `zoomable` or `maximizable` is on; a plain
+   map renders none of these elements. Colours are bound inline from the
+   `--kerusi-*` tokens, so this file owns layout, motion and the focus ring.
+   The same rules as the Angular component's stylesheet. */
+
+/* Same column the map sits in without the wrapper, so turning a feature on
+   does not move anything. */
+.kerusi-seatmap__stage {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+/* One grouped bar rather than four loose squares. Every measure and colour is a
+   `--kerusi-control-*` token so a host can restyle it from its own stylesheet;
+   the private `--kc-*` values below only resolve the tiers once. The `*-input`
+   colours are the `[colors]` palette, written inline by the component. */
+.kerusi-toolbar {
+  --kc-size: var(--kerusi-control-size, 2rem);
+  --kc-bg: var(--kerusi-control-bg, var(--kerusi-control-bg-input));
+  --kc-fg: var(--kerusi-control-fg, var(--kerusi-control-fg-input));
+  --kc-border: var(
+    --kerusi-control-border,
+    color-mix(in srgb, var(--kerusi-control-border-input) 40%, transparent)
+  );
+  display: flex;
+  align-self: flex-end;
+  /* Stays put under a maximized map's scrolling stage. */
+  flex: none;
+  box-sizing: border-box;
+  border: 1px solid var(--kc-border);
+  border-radius: var(--kerusi-control-radius, 0.5rem);
+  overflow: hidden;
+  box-shadow: var(--kerusi-control-shadow, 0 1px 3px rgb(0 0 0 / 0.14));
+}
+
+/* A fingertip needs more than a cursor does: keep the 44px target on touch. */
+@media (pointer: coarse) {
+  .kerusi-toolbar {
+    --kc-size: var(--kerusi-control-size, 2.75rem);
+  }
+}
+
+.kerusi-control {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--kc-size);
+  height: var(--kc-size);
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: var(--kc-bg);
+  color: var(--kc-fg);
+  font: inherit;
+  cursor: pointer;
+  transition: background-color 120ms ease-out;
+}
+
+.kerusi-control + .kerusi-control {
+  border-inline-start: 1px solid var(--kc-border);
+}
+
+.kerusi-control:hover {
+  background: var(--kerusi-control-hover-bg, color-mix(in srgb, var(--kc-fg) 10%, var(--kc-bg)));
+}
+
+.kerusi-control:active {
+  background: var(--kerusi-control-hover-bg, color-mix(in srgb, var(--kc-fg) 18%, var(--kc-bg)));
+}
+
+/* `aria-disabled`, not `disabled`: a disabled button drops out of the tab order,
+   and pressing "zoom in" until the ceiling would throw focus away mid-press. */
+.kerusi-control[aria-disabled='true'] {
+  opacity: 0.4;
+  cursor: default;
+  background: var(--kc-bg);
+}
+
+.kerusi-control svg {
+  width: var(--kerusi-control-icon-size, 1rem);
+  height: var(--kerusi-control-icon-size, 1rem);
+  fill: none;
+  stroke: currentColor;
+  stroke-width: var(--kerusi-control-icon-stroke, 1.75);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  pointer-events: none;
+}
+
+/* Inset, so the bar's `overflow: hidden` does not clip it. */
+.kerusi-control:focus-visible {
+  outline: 2px solid var(--kerusi-focus-ring, var(--kerusi-focus-ring-input, currentColor));
+  outline-offset: -2px;
+}
+
+.kerusi-viewport:focus-visible {
+  outline: 2px solid var(--kerusi-focus-ring, var(--kerusi-focus-ring-input, currentColor));
+  outline-offset: 2px;
+}
+
+/* A window onto the map. `clip` rather than `hidden`: a hidden box can still be
+   scrolled by the browser when a seat inside takes focus, which would fight the
+   transform; a clipped one cannot be scrolled at all. */
+.kerusi-viewport {
+  position: relative;
+  overflow: hidden;
+  overflow: clip;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* The same column the map sits in outside a viewport. */
+.kerusi-viewport__content {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  transform-origin: 0 0;
+}
+
+/* Only for a button, key or reveal. A finger or wheel moves the map directly, and
+   easing behind it would feel like lag. */
+.kerusi-viewport__content--animated {
+  transition: transform 160ms ease-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kerusi-viewport__content--animated {
+    transition: none;
+  }
+}
+
+/* Maximized: the map fills the screen. This is the whole feature on iPhone,
+   which has no element full screen; elsewhere native full screen is requested
+   on top. `Canvas` / `CanvasText` and the backdrop come from inline styles. */
+.kerusi-seatmap--maximized {
+  position: fixed;
+  inset: 0;
+  z-index: var(--kerusi-maximized-z-index, 1000);
+  box-sizing: border-box;
+  padding: 0.75rem;
+  gap: 0.5rem;
+  overflow: hidden;
+  overscroll-behavior: contain;
+}
+
+.kerusi-seatmap--maximized .kerusi-seatmap__stage {
+  flex: 1 1 auto;
+  min-height: 0;
+  gap: 0.5rem;
+  /* A map that is not zoomable has no viewport to pan, so it scrolls instead. */
+  overflow: auto;
+}
+
+.kerusi-seatmap--maximized .kerusi-viewport {
+  flex: 1 1 auto;
+  min-height: 0;
+  container-type: size;
+}
+
+/* Fit the whole canvas to the screen: as wide as the viewport allows, or as
+   wide as its height allows at the canvas's proportions, whichever is less.
+   `--kerusi-canvas-aspect` is the canvas's width over its height, set inline. */
+.kerusi-seatmap--maximized .kerusi-viewport__content {
+  width: min(100cqw, 100cqh * var(--kerusi-canvas-aspect, 1));
+}
+
+/* --- seat cards -------------------------------------------------------------
+   Only when `renderHoverCard` or `renderClickCard` is set; a map without them
+   renders none of these elements. The card is positioned by the component
+   (`left`, `top`, `data-placement`); this file owns what it looks like by
+   default, entirely through custom properties, so a consumer restyles it from
+   their own stylesheet without `!important` (D11):
+
+     --kerusi-seat-card-bg, -fg, -border, -radius, -shadow, -padding, -max-width,
+     -font, -offset, -arrow-size, -z-index
+
+   None is set here on `.kerusi-seatmap`, so a value set on the map or any
+   ancestor wins. The same rules as the Angular component's stylesheet. */
+
+:where(.kerusi-seat-card) {
+  position: absolute;
+  z-index: var(--kerusi-seat-card-z-index, 10);
+  box-sizing: border-box;
+  max-width: min(var(--kerusi-seat-card-max-width, 280px), 100%);
+  padding: var(--kerusi-seat-card-padding, 8px 12px);
+  border: var(--kerusi-seat-card-border, 1px solid rgb(0 0 0 / 0.12));
+  border-radius: var(--kerusi-seat-card-radius, 8px);
+  background: var(--kerusi-seat-card-bg, var(--kerusi-element-bg, #fff));
+  color: var(--kerusi-seat-card-fg, var(--kerusi-element-fg, #1a1d24));
+  box-shadow: var(--kerusi-seat-card-shadow, 0 4px 14px rgb(0 0 0 / 0.16));
+  font: var(--kerusi-seat-card-font, inherit);
+  text-align: start;
+  /* Text in a card can be selected and its links followed. */
+  user-select: text;
+  -webkit-user-select: text;
+  animation: kerusi-seat-card-in 120ms ease-out;
+}
+
+:where(.kerusi-seat-card):focus-visible {
+  outline: 2px solid var(--kerusi-focus-ring, var(--kerusi-focus-ring-input, currentColor));
+  outline-offset: 2px;
+}
+
+:where(.kerusi-seat-card__body) {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+/* No chrome: the consumer's content is the card. Only positioning is left. */
+:where(.kerusi-seat-card--bare) {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: none;
+  box-shadow: none;
+}
+
+/* The arrow is a square turned 45 degrees and centred on the card's edge that
+   faces the seat, so half of it shows. `--kerusi-seat-card-arrow-shift` is how
+   far along that edge, set inline from the placement. Its background covers the
+   card's own border where they meet; only the two sides that point out are
+   drawn, from the same border token as the card. The component leaves the arrow
+   out when `--kerusi-seat-card-arrow-size` is `0`. */
+:where(.kerusi-seat-card__arrow) {
+  position: absolute;
+  box-sizing: border-box;
+  width: calc(var(--kerusi-seat-card-arrow-size, 6px) * 1.4142);
+  height: calc(var(--kerusi-seat-card-arrow-size, 6px) * 1.4142);
+  background: inherit;
+  pointer-events: none;
+}
+
+/* The card is above the seat: the arrow is on its bottom edge, pointing down. */
+:where(.kerusi-seat-card[data-placement='top'] .kerusi-seat-card__arrow) {
+  bottom: 0;
+  left: var(--kerusi-seat-card-arrow-shift);
+  transform: translate(-50%, 50%) rotate(45deg);
+  border-right: var(--kerusi-seat-card-border, 1px solid rgb(0 0 0 / 0.12));
+  border-bottom: var(--kerusi-seat-card-border, 1px solid rgb(0 0 0 / 0.12));
+}
+
+:where(.kerusi-seat-card[data-placement='bottom'] .kerusi-seat-card__arrow) {
+  top: 0;
+  left: var(--kerusi-seat-card-arrow-shift);
+  transform: translate(-50%, -50%) rotate(45deg);
+  border-top: var(--kerusi-seat-card-border, 1px solid rgb(0 0 0 / 0.12));
+  border-left: var(--kerusi-seat-card-border, 1px solid rgb(0 0 0 / 0.12));
+}
+
+:where(.kerusi-seat-card[data-placement='left'] .kerusi-seat-card__arrow) {
+  right: 0;
+  top: var(--kerusi-seat-card-arrow-shift);
+  transform: translate(50%, -50%) rotate(45deg);
+  border-top: var(--kerusi-seat-card-border, 1px solid rgb(0 0 0 / 0.12));
+  border-right: var(--kerusi-seat-card-border, 1px solid rgb(0 0 0 / 0.12));
+}
+
+:where(.kerusi-seat-card[data-placement='right'] .kerusi-seat-card__arrow) {
+  left: 0;
+  top: var(--kerusi-seat-card-arrow-shift);
+  transform: translate(-50%, -50%) rotate(45deg);
+  border-bottom: var(--kerusi-seat-card-border, 1px solid rgb(0 0 0 / 0.12));
+  border-left: var(--kerusi-seat-card-border, 1px solid rgb(0 0 0 / 0.12));
+}
+
+/* A short fade and settle, from the side the card grows out of. */
+:where(.kerusi-seat-card[data-placement='top']) {
+  transform-origin: bottom center;
+}
+:where(.kerusi-seat-card[data-placement='bottom']) {
+  transform-origin: top center;
+}
+:where(.kerusi-seat-card[data-placement='left']) {
+  transform-origin: center right;
+}
+:where(.kerusi-seat-card[data-placement='right']) {
+  transform-origin: center left;
+}
+
+@keyframes kerusi-seat-card-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where(.kerusi-seat-card) {
+    animation: none;
+  }
+}