/* ═══════════════════════════════════════════════════════════════════════════
   AllurePOS Design System: ds.css (components/bundle.css, preview stage removed)
   Loaded after tokens.css. Every colour, space, size, radius, shadow and layer
   is a token custom property (var(--<token>)), so each component follows the
   active data-theme. Geometry is copied from the kasir redesign (css/kasir.css,
   pos-redesign); class names keep kasir's k- prefix, and kasir's legacy or id
   selectors get class equivalents (listed in each component's README).

   Rules carried over from kasir.css:
   - Fonts and colour go on a wrapper (.k-scope), never on html or body: the
     fiscal receipt keeps body typography.
   - Hover lives only inside @media (hover: hover) and (pointer: fine), so a
     tap on a touch till never leaves a hover state behind. Pressed feedback is
     a colour change, never a transform.
   - Never create .hidden, .active, .disabled or .show here as new state: kasir
     JS owns them. .active is READ as the selected state (kasir writes it);
     other surfaces use the ARIA state that sits beside it.
   - Motion answers an action only: 120ms (fast) or 180ms, cubic-bezier(.2, .7,
     .2, 1). Nothing moves under prefers-reduced-motion.

   Role tokens: text on paper, surface and sunken is --ink (not --navy); text on
   a fill is its --on-* token; controls told apart only by fill carry a 1px
   --control-edge (transparent in the brand themes, a real border in Kontras
   tinggi). A selected navy fill on paper, surface or sunken carries a 1px
   --selected-edge, and a modal sheet a 1px --sheet-edge; both are
   transparent except in Malam.

   .is-pressed and .is-focus are static renditions of :active and
   :focus-visible for previews and documentation; production markup never
   needs them.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── 0. Scope and utilities ──────────────────────────────────────────────── */

.k-scope {
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-text-size-adjust: 100%;
}
/* Zero specificity, so every component rule below wins over these resets. */
:where(.k-scope),
:where(.k-scope) *,
:where(.k-scope) *::before,
:where(.k-scope) *::after { box-sizing: border-box; }
:where(.k-scope) :where(button, input, select, textarea) { font-family: inherit; }
[data-theme="malam"] .k-scope { color-scheme: dark; } /* native scrollbars, pickers, checkboxes */

/* Focus: 2px solid ring, offset 2px, on every keyboard stop; light gold on a
   navy slab. (0,2,1) beats an `outline: none` on a single class. */
:where(.k-scope) :is(button, a[href], input, select, textarea, summary, [tabindex]):focus-visible,
:where(.k-scope) .is-focus {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
:where(.k-check, .k-plan--featured) :is(button, a[href], input, select, textarea, summary, [tabindex]):focus-visible,
:where(.k-check, .k-plan--featured) .is-focus {
  outline-color: var(--focus-on-slab);
}

.k-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Sentence case for copy that arrives in Title Case or caps; the copy itself
   does not change. Block-level boxes only (a span inside a flex row counts). */
.k-sentence { text-transform: lowercase; }
.k-sentence::first-letter { text-transform: uppercase; }
/* Money, quantities, clocks. */
.k-num { font-variant-numeric: tabular-nums lining-nums; }

/* Icons: the vendored Tabler webfont (an i element with ti plus ti-<name>) in
   the apps; the previews inline the same Tabler 3.0.0 outlines as an svg with
   class ti. Both are sized by font-size, so one rule serves both. */
svg.ti {
  display: inline-block;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}


/* ── 1. Button (.k-btn, .k-iconbtn, .k-count) ────────────────────────────────
   44px, radius 6, 15/600, icon 20, gap 8. The primary action is navy; brass
   only on the one money confirm; red only when destructive. */

.k-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex-shrink: 0;
  min-width: var(--hit);
  height: var(--hit);
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--r-control);
  background: transparent;
  color: var(--ink);
  font: 600 15px/1.25 var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.k-btn > .ti {
  flex-shrink: 0;
  font-size: 20px;
  line-height: 1;
}
.k-btn__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.k-btn--compact {
  padding: 0 var(--space-3);
  font-family: var(--font-condensed);
}
.k-btn--lg { height: var(--h-key2); }
.k-btn--xl {
  height: var(--h-key);
  font-size: 17px;
  line-height: 1.25;
}
.k-btn--block {
  flex: 1 1 100%;
  width: 100%;
}

.k-btn--primary { background: var(--navy); color: var(--on-navy); }
.k-btn--secondary { background: var(--surface); border-color: var(--line-strong); }
.k-btn--quiet { color: var(--slate); }
.k-btn--money { background: var(--brass); border-color: var(--control-edge); color: var(--on-brass); }
.k-btn--danger { background: var(--danger); color: var(--on-danger); }
.k-btn--danger-ghost { background: var(--surface); border-color: var(--danger); color: var(--danger); }
.k-btn--warn { background: var(--warn-tint); border-color: var(--warn-line); color: var(--warn-ink); }

/* Hover (pointer devices only), then pressed, then disabled: hover and
   pressed share a specificity, so source order lets a press win. */
@media (hover: hover) and (pointer: fine) {
  .k-btn--primary:hover { background: var(--navy-raised); }
  .k-btn--secondary:hover,
  .k-btn--quiet:hover { background: var(--sunken); }
  .k-btn--money:hover { background: var(--brass-hover); }
  .k-btn--danger:hover { background: var(--danger-ink); }
  .k-btn--danger-ghost:hover { background: var(--danger-tint); }
  .k-btn--warn:hover { background: var(--warn-hover); }
}
.k-btn--primary:is(:active, .is-pressed) { background: var(--navy-raised); }
.k-btn--secondary:is(:active, .is-pressed),
.k-btn--quiet:is(:active, .is-pressed) { background: var(--sunken-press); }
.k-btn--money:is(:active, .is-pressed) { background: var(--brass-press); }
.k-btn--danger:is(:active, .is-pressed) { background: var(--danger-ink); }
.k-btn--danger-ghost:is(:active, .is-pressed) { background: var(--danger-tint); color: var(--danger-ink); }
.k-btn--warn:is(:active, .is-pressed) { background: var(--warn-hover); }

.k-btn:is([disabled], .is-disabled) { cursor: default; }
.k-btn:is(.k-btn--primary, .k-btn--danger):is([disabled], .is-disabled) {
  background: var(--sunken);
  border-color: transparent;
  color: var(--ink-3);
}
.k-btn--secondary:is([disabled], .is-disabled) {
  background: var(--sunken);
  border-color: var(--line);
  color: var(--ink-3);
}
.k-btn--quiet:is([disabled], .is-disabled) { background: transparent; color: var(--ink-3); }
.k-btn--danger-ghost:is([disabled], .is-disabled) {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink-3);
}
/* The money key keeps its brass and dims (kasir's JS writes the same .5
   inline on the payment confirms). */
.k-btn--money:is([disabled], .is-disabled) { opacity: .5; }

/* Icon-only button: a real 44x44 box, always with an aria-label. */
.k-iconbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--hit);
  height: var(--hit);
  padding: 0;
  border: 0;
  border-radius: var(--r-control);
  background: transparent;
  color: var(--slate);
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.k-iconbtn > .ti { font-size: 20px; }
.k-iconbtn--secondary {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}
.k-iconbtn--danger-ghost {
  border: 1px solid var(--danger);
  background: var(--surface);
  color: var(--danger);
}
.k-iconbtn--danger { color: var(--danger); }
@media (hover: hover) and (pointer: fine) {
  .k-iconbtn:hover { background: var(--sunken); color: var(--ink); }
  .k-iconbtn--secondary:hover { background: var(--sunken); color: var(--ink); }
  .k-iconbtn--danger-ghost:hover,
  .k-iconbtn--danger:hover { background: var(--danger-tint); color: var(--danger); }
}
.k-iconbtn:is(:active, .is-pressed) { background: var(--sunken-press); color: var(--ink); }
.k-iconbtn--secondary:is(:active, .is-pressed) { background: var(--sunken-press); color: var(--ink); }
.k-iconbtn--danger-ghost:is(:active, .is-pressed),
.k-iconbtn--danger:is(:active, .is-pressed) { background: var(--danger-tint); color: var(--danger-ink); }

/* Count bubble on a button: grows for 2-3 digit counts. Shown by default;
   kasir JS hides and shows it with an inline display, which wins. */
.k-count {
  position: absolute;
  top: -6px;
  right: -6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--r-round);
  background: var(--danger);
  color: var(--on-danger);
  font: 700 13px/1 var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums;
}


/* ── 2. Check (.k-check): the navy slab with the total and the pay keys ──────
   The one dark object in the order column, like the bill folder a waiter
   carries. Tier 1 (Gotovina brass, Kartica surface): 3 of 6 columns, 56px,
   17/600. Tier 2 (IPS QR, Online, Podeljeno): 2 columns, 48px, 15/600
   condensed, navy-raised with a 1px slab-edge. */

.k-check {
  container-type: inline-size;
  margin: 0 var(--space-2) var(--space-2);
  padding: var(--space-3);
  border-radius: var(--r-sheet);
  background: var(--navy);
  color: var(--on-navy);
  box-shadow: var(--e1);
}
.k-check__total {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "label amount" "eur amount";
  align-items: center;
  column-gap: var(--space-3);
}
.k-check__label {
  grid-area: label;
  align-self: end;
  color: var(--slab-ink-2);
  font: 600 15px/1.25 var(--font-sans);
}
.k-check__amount {
  grid-area: amount;
  justify-self: end;
  min-width: 0;
  color: var(--on-navy);
  font: 700 36px/1.1 var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.k-check__eur {
  grid-area: eur;
  align-self: start;
  color: var(--slab-ink-2);
  font: 400 13px/1.3 var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.k-check__keys {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.k-check__key {
  grid-column: span 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 0;
  height: var(--h-key2);
  padding: 0 var(--space-1);
  border: 1px solid var(--slab-edge);
  border-radius: var(--r-control);
  background: var(--navy-raised);
  color: var(--on-navy);
  font: 600 15px/1.25 var(--font-condensed);
  text-align: center;
  text-wrap: balance;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.k-check__key:not(button, a) { cursor: default; } /* static rendition (the Website hero) */
.k-check__key > .ti {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
}
.k-check__key > span {
  min-width: 0;
  overflow-wrap: break-word;
}
.k-check__key:is(.k-check__key--cash, .k-check__key--card) {
  grid-column: span 3;
  height: var(--h-key);
  padding: 0 var(--space-2);
  border: 0;
  font: 600 17px/1.25 var(--font-sans);
}
.k-check__key:is(.k-check__key--cash, .k-check__key--card) > .ti { font-size: 20px; }
.k-check__key--cash { background: var(--brass); color: var(--on-brass); }
.k-check__key--card { background: var(--surface); color: var(--ink); }
/* Simple payment mode (no Kartica, no IPS QR): Gotovina takes the row. */
.k-check__key.k-check__key--full { grid-column: span 6; }
.k-check__key.k-check__key--half { grid-column: span 3; }
@media (hover: hover) and (pointer: fine) {
  .k-check__key:hover { background: var(--navy-hover); }
  .k-check__key--cash:hover { background: var(--brass-hover); }
  .k-check__key--card:hover { background: var(--paper); }
}
.k-check__key:is(:active, .is-pressed) { background: var(--navy); }
.k-check__key--cash:is(:active, .is-pressed) { background: var(--brass-press); }
.k-check__key--card:is(:active, .is-pressed) { background: var(--sunken-press); }
/* Disabled keys dim but keep their colours, so Gotovina still reads as brass
   on an empty bill. Never pointer-events: none on the check. */
.k-check__key:is([disabled], .is-disabled) { opacity: .45; cursor: default; }
/* Narrow check (kasir: order column under 380px, viewport 1309px and less):
   tier-2 and Kartica icons go so the labels fit; Gotovina keeps its icon. */
@container (max-width: 340px) {
  .k-check__key:not(.k-check__key--cash) > .ti { display: none; }
}


/* ── 3. Pill (.k-pill): status, not interactive ──────────────────────────────
   28px (32 in the header), round, 15/600 condensed, 8px leading dot. */

.k-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  height: 28px;
  padding: 0 var(--space-3);
  border-radius: var(--r-round);
  font: 600 15px/1 var(--font-condensed);
  white-space: nowrap;
}
.k-pill > .ti { font-size: 16px; line-height: 1; }
.k-pill--head,
.k-bar .k-pill { height: 32px; }
.k-pill--ok { background: var(--ok-tint); color: var(--ok-ink); }
.k-pill--danger { background: var(--danger); color: var(--on-danger); }
.k-pill--info { background: var(--info-tint); color: var(--info); }
.k-pill--warn { background: var(--warn-tint); color: var(--warn-ink); }
.k-pill--neutral { background: var(--sunken); color: var(--slate); }
/* Tinted pills sit close to their ground in Kontras tinggi: the edge sets them apart. */
.k-pill:is(.k-pill--ok, .k-pill--info, .k-pill--warn, .k-pill--neutral) { box-shadow: inset 0 0 0 1px var(--control-edge); }
.k-pill__dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.k-pill--ok > .k-pill__dot { background: var(--ok); }
.k-pill--danger > .k-pill__dot {
  background: var(--danger);
  box-shadow: 0 0 0 2px var(--on-danger);
}


/* ── 4. Field (.k-field, .k-label, .k-group, .k-checkrow) ────────────────────
   44px (48 in sheets, 56 for the cash amount), surface, 1px line-strong,
   17/400 ink (17 avoids zoom on focus), ink-3 placeholder. */

.k-field {
  display: block;
  width: 100%;
  min-width: 0;
  height: var(--hit);
  padding: 0 var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--ink);
  font: 400 17px/1.25 var(--font-sans);
  text-overflow: ellipsis;
}
.k-field::placeholder {
  color: var(--ink-3);
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  .k-field:hover { border-color: var(--slate); }
}
.k-field:focus,
.k-field.is-focus { border-color: var(--ink); }
.k-field:is([aria-invalid="true"], .k-field--error) { border-color: var(--danger); }
.k-field:disabled {
  background: var(--sunken);
  color: var(--ink-3);
}
textarea.k-field {
  height: auto;
  min-height: calc(2 * var(--hit));
  padding: var(--space-2) var(--space-3);
  resize: vertical;
}
/* Select: no native arrow; a chevron drawn from two token-coloured triangles
   (no image, no network), with room kept for it. */
.k-field--select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: calc(var(--space-3) + 20px);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--slate) 50%),
    linear-gradient(135deg, var(--slate) 50%, transparent 50%);
  background-position:
    calc(100% - var(--space-3) - 10px) 50%,
    calc(100% - var(--space-3) - 4px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.k-field--lg,
.k-modal .k-field { height: var(--h-key2); }
.k-field--num { font-variant-numeric: tabular-nums lining-nums; }
.k-field[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.k-field[type="number"]::-webkit-inner-spin-button,
.k-field[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* The typed cash amount: 56px, 28/700, right-aligned. */
.k-field.k-field--cash {
  height: var(--h-key);
  padding: 0 var(--space-4);
  font: 700 28px/1.1 var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums;
  text-align: right;
}
/* A label (13/600 slate, sentence case) above its field. */
.k-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.k-label {
  display: block;
  margin: 0;
  color: var(--slate);
  font: 600 13px/1.3 var(--font-sans);
}
.k-row {
  display: flex;
  gap: var(--space-3);
}
.k-row__grow { flex: 1 1 0; }
.k-row__pax { flex: 0 0 96px; }
/* Field message: one reserved line, so the form does not jump. */
.k-field-error {
  min-height: 17px;
  margin: 0;
  color: var(--danger);
  font: 600 13px/1.3 var(--font-sans);
}
/* Checkbox row: 20px box inside a 44px label row. */
.k-checkrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  min-height: var(--hit);
  color: var(--ink);
  font: 400 15px/1.25 var(--font-sans);
  cursor: pointer;
}
.k-checkrow > [type="checkbox"],
.k-checkrow > [type="radio"] {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--ink);
}
/* Search field with a leading icon and an optional trailing scan glyph. */
.k-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}
.k-search > .k-field {
  height: var(--h-key2);
  padding: 0 calc(var(--space-3) + 20px + var(--space-2));
}
.k-search__icon,
.k-search__scan {
  position: absolute;
  z-index: 1;
  color: var(--ink-3);
  font-size: 20px;
  line-height: 1;
  pointer-events: none;
}
.k-search__icon { left: var(--space-3); }
.k-search__scan { right: var(--space-3); }


/* ── 5. Tabs (.k-tabs, .k-tab) ───────────────────────────────────────────────
   48px strip on surface with a line below; 44px tabs, 15/600 condensed slate,
   icon 18. Selected: ink text and a 3px inset bar (no border, so no shift). */

.k-tabs {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  gap: var(--space-1);
  height: var(--h-tabs);
  padding: 0 var(--space-3);
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.k-tabs::-webkit-scrollbar { display: none; }
.k-tab {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--space-2);
  min-height: var(--hit);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--r-control) var(--r-control) 0 0;
  background: transparent;
  color: var(--slate);
  font: 600 15px/1.25 var(--font-condensed);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  scroll-snap-align: start;
  -webkit-tap-highlight-color: transparent;
}
.k-tab > .ti {
  font-size: 18px;
  line-height: 1;
}
.k-tab:is(.active, [aria-selected="true"], [aria-current="page"]) {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 -3px 0 var(--ink);
}
@media (hover: hover) and (pointer: fine) {
  .k-tab:hover { background: var(--sunken); }
}
.k-tab:is(:active, .is-pressed) { background: var(--sunken-press); }
/* The strip scrolls (a clipping box): the ring goes inside the tab. */
.k-tabs .k-tab:is(:focus-visible, .is-focus) { outline-offset: -2px; }


/* ── 6. Chip (.k-chips, .k-chip): category filter ────────────────────────────
   44px, radius 6, surface with a line-strong edge, 15/600 condensed ink.
   Selected: navy fill, on-navy text. The row scrolls sideways; its right edge
   fades as an overflow hint and the end padding lets the last chip clear it. */

.k-chips {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-2);
  padding: 0 var(--space-6) 0 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, var(--ink) calc(100% - var(--space-6)), transparent);
  mask-image: linear-gradient(to right, var(--ink) calc(100% - var(--space-6)), transparent);
}
.k-chips::-webkit-scrollbar { display: none; }
.k-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 0;
  height: var(--hit);
  padding: 0 var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--ink);
  font: 600 15px/1.25 var(--font-condensed);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.k-chip > .ti { display: none; } /* the name carries the meaning */
@media (hover: hover) and (pointer: fine) {
  .k-chip:hover { background: var(--sunken); }
}
.k-chip:is(:active, .is-pressed) { background: var(--sunken-press); }
/* selected-edge is transparent except in Malam, where navy alone misses 3:1
   on the row's ground and the edge draws the selected shape. */
.k-chip:is(.active, [aria-pressed="true"], [aria-selected="true"]) {
  border-color: var(--selected-edge);
  background: var(--navy);
  color: var(--on-navy);
}
/* The row scrolls (a clipping box): the ring goes inside the chip, as in the
   tab strip. On a selected chip that inset ring sits on navy, so it takes the
   slab's gold-light ring (3:1 or more on navy in every theme). */
.k-chips .k-chip:is(:focus-visible, .is-focus) { outline-offset: -2px; }
.k-chips .k-chip:is(.active, [aria-pressed="true"], [aria-selected="true"]):is(:focus-visible, .is-focus) {
  outline-color: var(--focus-on-slab);
}


/* ── 7. Segmented (.k-seg, .k-seg__btn) ──────────────────────────────────────
   A sunken track (inset 1px line, so it adds no height: track = 48px) with
   44x44 segments. Selected: navy fill, on-navy icon or text. */

.k-seg {
  display: inline-flex;
  flex-shrink: 0;
  padding: 2px;
  border-radius: var(--r-control);
  background: var(--sunken);
  box-shadow: inset 0 0 0 1px var(--line);
}
.k-seg__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--hit);
  height: var(--hit);
  padding: 0;
  border: 0;
  border-radius: var(--r-control);
  background: transparent;
  color: var(--slate);
  font: 600 15px/1 var(--font-sans);
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.k-seg__btn > .ti {
  font-size: 20px;
  line-height: 1;
}
.k-seg__btn:is(.active, [aria-pressed="true"], [aria-checked="true"]) {
  background: var(--navy);
  color: var(--on-navy);
  box-shadow: inset 0 0 0 1px var(--selected-edge); /* Malam: navy alone misses 3:1 on the track */
  cursor: default;
}
@media (hover: hover) and (pointer: fine) {
  .k-seg__btn:not(.active, [aria-pressed="true"], [aria-checked="true"]):hover { background: var(--sunken-press); color: var(--ink); }
}
.k-seg__btn:not(.active, [aria-pressed="true"], [aria-checked="true"]):is(:active, .is-pressed) { background: var(--sunken-press); color: var(--ink); }


/* ── 8. OrderLine (.k-orderline, .k-stepper) ─────────────────────────────────
   Ruled rows on surface, no boxes, about 72px each. Grid areas "name price rm"
   / "meta qty rm". The stepper keys and the remove key are real 44x44 boxes. */

.k-cart-id {
  flex: 1 1 auto;
  min-width: 0;
}
.k-cart-id__table {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font: 700 17px/1.25 var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.k-cart-id__waiter {
  display: block;
  overflow: hidden;
  color: var(--slate);
  font: 400 13px/1.3 var(--font-sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.k-cart-id__waiter strong { font-weight: 600; }
.k-orderlist {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
}
.k-orderhead {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--space-3);
  min-height: 60px;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.k-orderline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto var(--hit);
  grid-template-areas: "name price rm" "meta qty rm";
  align-items: center;
  flex-shrink: 0;
  gap: 2px var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.k-orderline__name {
  grid-area: name;
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink);
  font: 600 15px/1.25 var(--font-sans);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.k-orderline__meta {
  grid-area: meta;
  min-width: 0;
  overflow: hidden;
  color: var(--ink-3);
  font: 400 13px/1.3 var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Price: the tap target that edits it. A 36px box with a 19px footprint. */
.k-orderline__price {
  grid-area: price;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  min-width: 84px;
  height: 36px;
  margin: -9px 0 -8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 700 15px/1.25 var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
  cursor: pointer;
}
.k-orderline__price > .ti {
  color: var(--ink-3);
  font-size: 14px;
  line-height: 1;
}
.k-orderline > .k-stepper { grid-area: qty; justify-self: end; }
/* Remove: a quiet 44x44 icon spanning both rows; danger on press. */
.k-orderline__rm {
  grid-area: rm;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--hit);
  height: var(--hit);
  padding: 0;
  border: 0;
  border-radius: var(--r-control);
  background: transparent;
  color: var(--slate);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.k-orderline__rm > .ti { font-size: 20px; }
@media (hover: hover) and (pointer: fine) {
  .k-orderline__rm:hover { background: var(--sunken); color: var(--ink); }
}
.k-orderline__rm:is(:active, .is-pressed) { background: var(--danger-tint); color: var(--danger); }

/* Stepper: each key is a 44x44 box laid out as 40x32 (negative margins); the
   visible key is a ::before. It sits above the price box (z-canvas). */
.k-stepper {
  position: relative;
  z-index: var(--z-canvas);
  display: flex;
  align-items: center;
  gap: 0;
}
.k-stepper__key {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--hit);
  height: var(--hit);
  margin: -6px -2px;
  padding: 0;
  border: 0;
  border-radius: var(--r-control);
  background: transparent;
  color: var(--ink);
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.k-stepper__key > .ti {
  font-size: 18px;
  line-height: 1;
}
.k-stepper__key::before {
  content: "";
  position: absolute;
  inset: 6px 2px;
  z-index: -1;
  border-radius: var(--r-control);
  background: var(--sunken);
  box-shadow: inset 0 0 0 1px var(--control-edge);
}
@media (hover: hover) and (pointer: fine) {
  .k-stepper__key:hover::before { background: var(--sunken-press); }
}
.k-stepper__key:is(:active, .is-pressed) { color: var(--on-navy); }
.k-stepper__key:is(:active, .is-pressed)::before { background: var(--navy); }
/* (0,3,0): beats the (0,2,1) ring rule, so the ring sits inside the key. */
.k-stepper .k-stepper__key:is(:focus-visible, .is-focus) { outline-offset: -2px; }
/* Quantity: tap to type a decimal quantity; the dotted underline says so. */
.k-stepper__count {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--hit);
  height: var(--hit);
  margin: -6px 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 700 17px/1 var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums;
  text-decoration: underline dotted var(--line-strong);
  text-underline-offset: 4px;
  cursor: pointer;
}


/* ── 9. MenuKey (.k-keys, .k-key) ────────────────────────────────────────────
   Surface keys, 1px line, radius 6, no shadow. Name 15/600 in up to 3 whole
   lines; price 15/700 tabular at the foot; VAT 13 ink-3 in md and detail. A
   press fills the key navy at once and fades back over 120ms. */

.k-keys {
  --key-min: 136px;
  --key-row: 96px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--key-min), 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  gap: 6px;
  min-height: 0;
  margin-top: var(--space-1);
  padding: 0;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.k-keys--md { --key-min: 168px; --key-row: 120px; }
.k-keys--lg { --key-min: 216px; --key-row: 120px; }
.k-keys--detail { --key-min: 100%; --key-row: 56px; }
@media (min-width: 1600px) {
  .k-keys:not(.k-keys--md, .k-keys--lg, .k-keys--detail) { --key-min: 152px; }
}
.k-key {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  min-height: var(--key-row, 96px);
  margin: 0;
  padding: 10px var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 120ms cubic-bezier(.2, .7, .2, 1),
    border-color 120ms cubic-bezier(.2, .7, .2, 1),
    color 120ms cubic-bezier(.2, .7, .2, 1);
}
.k-key__icon,
.k-key__img,
.k-key__vat { display: none; }
.k-key__name {
  display: -webkit-box;
  flex-shrink: 0;
  overflow: hidden;
  font: 600 15px/1.25 var(--font-sans);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.k-key__price {
  flex-shrink: 0;
  margin-top: auto;
  font: 700 15px/1.25 var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.k-key__vat {
  flex-shrink: 0;
  color: var(--ink-3);
  font: 400 13px/1.3 var(--font-sans);
  white-space: nowrap;
  transition: color 120ms cubic-bezier(.2, .7, .2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .k-key:hover { border-color: var(--line-strong); }
}
.k-key:is(:active, .is-pressed) {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--on-navy);
  transition: none;
}
.k-key:is(:active, .is-pressed) .k-key__vat {
  color: var(--slab-ink-2);
  transition: none;
}
/* md: name, price, VAT. */
.k-keys--md .k-key__vat { display: block; }
/* lg: the 4:3 photo when the item has one, then name and price at 17. */
.k-keys--lg .k-key { gap: var(--space-2); }
.k-keys--lg .k-key__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-control);
  background: var(--sunken);
  object-fit: cover;
}
.k-keys--lg :is(.k-key__name, .k-key__price) {
  font-size: 17px;
  line-height: 1.25;
}
/* detail: one row per item; name (one line, ellipsis), VAT, then the price
   right-aligned in a fixed column. */
.k-keys--detail .k-key {
  flex-direction: row;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-4);
}
.k-keys--detail .k-key__name {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: none;
  line-clamp: none;
}
.k-keys--detail .k-key__vat {
  display: block;
  order: 1;
}
.k-keys--detail .k-key__price {
  order: 2;
  min-width: 96px;
  margin-top: 0;
  text-align: right;
}


/* ── 10. FloorTable (.k-floor, .k-floortable, .k-res-chip, .k-legend) ────────
   Tables sit at their admin-set positions and sizes (inline left, top, width,
   height) on the paper floor. Free: surface with a 1.5px line-strong edge. Open
   bill: SOLID NAVY with an on-navy label and bill, so from across the room the
   navy shapes are the tables still owing. Each table is a size container, so
   its label scales with the table. */

.k-floor {
  position: relative;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  scrollbar-color: var(--line-strong) transparent;
}
.k-floortable {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.k-floortable:not(.k-floortable--wall) { container-type: size; }
.k-floortable--round { border-radius: 50%; }
.k-floortable__label {
  flex-shrink: 0;
  max-width: 100%;
  overflow: hidden;
  color: inherit;
  font: 600 clamp(15px, 18cqmin, 21px)/1.2 var(--font-condensed);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.k-floortable__seats {
  max-width: 100%;
  overflow: hidden;
  color: var(--ink-3);
  font: 400 13px/1.3 var(--font-sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.k-floortable--occ {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--on-navy);
  box-shadow: var(--e1);
}
/* The waiter line ("By: Milica"). */
.k-floortable--occ .k-floortable__seats {
  color: var(--slab-ink-2);
  font: 600 13px/1.3 var(--font-condensed);
}
/* The bill: plain on-navy figures, the RSD unit quieter; no pill, no icon
   (brass stays reserved for money actions). The unit shows only when it fits
   whole: otherwise it wraps to a clipped second row. */
.k-floortable__bill {
  display: flex;
  flex-shrink: 0;
  align-items: baseline;
  max-width: 100%;
  color: var(--on-navy);
  font: 700 clamp(15px, 16cqmin, 17px)/1.2 var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.k-floortable__bill > span {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  justify-content: safe center;
  row-gap: 1em;
  min-width: 0;
  max-height: 1.2em;
  max-height: 1lh;
  overflow: hidden;
}
.k-floortable__unit {
  margin-left: var(--space-1);
  color: var(--slab-ink-2);
  font: 600 13px/1 var(--font-sans);
}
@media (hover: hover) and (pointer: fine) {
  .k-floortable:not(.k-floortable--occ, .k-floortable--wall):hover { border-color: var(--slate); }
}
.k-floortable:not(.k-floortable--occ, .k-floortable--wall):is(:active, .is-pressed) { background: var(--sunken); }
.k-floortable--occ:is(:active, .is-pressed) {
  border-color: var(--navy-raised);
  background: var(--navy-raised);
}
/* Reservation time: an info chip inside the top-right corner; it owns a
   28px band (4 inset + 20 chip + 4 gap), so the label never runs under it. */
.k-res-chip {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  z-index: 1;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-1);
  height: 20px;
  padding: 0 var(--space-1);
  border-radius: var(--r-control);
  background: var(--info-tint);
  color: var(--info);
  font: 700 13px/1 var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.k-res-chip > .ti {
  font-size: 14px;
  line-height: 1;
}
.k-res-chip ~ .k-floortable__label { margin-top: calc(20px + 2 * var(--space-1)); }
.k-floortable--round > .k-res-chip {
  position: static;
  margin-bottom: var(--space-1);
}
.k-floortable--round > .k-res-chip ~ .k-floortable__label { margin-top: 0; }
/* Walls: line-strong bars, radius 2; the name sits on a surface tag. */
.k-floortable--wall {
  border: 0;
  border-radius: 2px;
  background: var(--line-strong);
  cursor: default;
}
.k-wall-label {
  padding: 0 var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--slate);
  font: 600 13px/20px var(--font-sans);
  white-space: nowrap;
  pointer-events: none;
}
/* Small tables keep label, bill and time: seats go below 64px of height, the
   RSD unit and the chip's clock below 72px of width. */
@container (max-height: 64px) {
  .k-floortable__seats { display: none; }
  .k-res-chip { position: static; }
  .k-floortable > .k-res-chip { height: 16px; margin-bottom: 1px; }
  .k-res-chip ~ .k-floortable__label { margin-top: 0; }
  .k-res-chip ~ :is(.k-floortable__label, .k-floortable__bill) { line-height: 1; }
}
@container (max-width: 72px) {
  .k-floortable__unit,
  .k-res-chip > .ti { display: none; }
}
@container (max-height: 88px) {
  .k-res-chip ~ .k-floortable__seats:has(~ .k-floortable__bill) { display: none; }
}
@container (max-height: 116px) {
  .k-floortable--round > .k-res-chip ~ .k-floortable__seats:has(~ .k-floortable__bill) { display: none; }
}
@container (max-width: 96px) {
  .k-floortable--round > .k-res-chip > .ti,
  .k-floortable--round .k-floortable__unit { display: none; }
}
/* Legend: a flat 36px row on the floor with real swatches. */
.k-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex-shrink: 0;
  gap: var(--space-1) var(--space-5);
  min-height: 36px;
  padding: 0 var(--space-1);
  color: var(--slate);
  font: 600 13px/1.3 var(--font-sans);
}
.k-legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.k-legend__swatch {
  flex-shrink: 0;
  width: 24px;
  height: 18px;
  border-radius: var(--r-control);
}
.k-legend__swatch--free {
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
}
.k-legend__swatch--occ { background: var(--navy); }
.k-legend__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 20px;
  border-radius: var(--r-control);
  background: var(--info-tint);
  color: var(--info);
  font-size: 14px;
  line-height: 1;
}
.k-legend__mode {
  margin-left: auto;
  color: var(--ink-3);
}


/* ── 11. Modal (.k-overlay, .k-modal) and the cash sheet ─────────────────────
   Surface sheet, radius 14, e3; a 64px head (title 21/600 + 44px close), a
   body that scrolls, a foot with the actions on the right (secondary before
   primary; payment sheets use one full-width 56px key). Widths 400 sm, 440
   default, 480 split, 760 wide. Scrim without blur. */

.k-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: var(--scrim);
}
.k-modal {
  --modal-w: 440px;
  display: flex;
  flex-direction: column;
  width: min(var(--modal-w), calc(100vw - 2 * var(--space-4)));
  max-height: calc(100vh - 96px);
  overflow: hidden;
  border-radius: var(--r-sheet);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  /* sheet-edge: transparent except in Malam (a dark sheet on a near-black
     scrim); a spread shadow, so it adds no layout. */
  box-shadow: 0 0 0 1px var(--sheet-edge), var(--e3);
  transform: translateY(8px);
  transition: transform 180ms cubic-bezier(.2, .7, .2, 1);
}
.k-overlay:is(.active, .is-open) > .k-modal,
.k-modal.is-open { transform: none; }
.k-modal--sm { --modal-w: 400px; }
.k-modal--split { --modal-w: 480px; }
.k-modal--wide { --modal-w: 760px; }
.k-modal__head {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--space-3);
  min-height: 64px;
  padding: 0 var(--space-4) 0 var(--space-5);
  border-bottom: 1px solid var(--line);
}
.k-modal__title {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font: 600 21px/1.2 var(--font-sans);
}
.k-modal__title > .ti {
  flex-shrink: 0;
  font-size: 24px;
  line-height: 1;
}
.k-modal__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 0;
  overflow-y: auto;
  padding: 20px var(--space-5);
  overscroll-behavior: contain;
}
.k-modal__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-shrink: 0;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--line);
}
.k-modal__text {
  margin: 0;
  color: var(--slate);
  font: 400 15px/1.4 var(--font-sans);
}
.k-modal__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
/* Wait sheet (EDC): centred, no head. */
.k-modal--wait .k-modal__body {
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
  text-align: center;
}
.k-modal--wait .k-modal__title {
  flex: 0 0 auto;
  justify-content: center;
}
/* Indeterminate progress: a 3px navy bar sliding on a sunken track. */
.k-progress {
  position: relative;
  width: 100%;
  max-width: 240px;
  height: 3px;
  overflow: hidden;
  border-radius: var(--r-round);
  background: var(--sunken);
}
.k-progress__bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 25%;
  border-radius: inherit;
  background: var(--navy);
  box-shadow: inset 0 0 0 1px var(--selected-edge); /* Malam: navy alone misses 3:1 on the track */
  animation: k-indeterminate 1.4s cubic-bezier(.2, .7, .2, 1) infinite;
}
@keyframes k-indeterminate {
  from { transform: translateX(-100%); }
  to { transform: translateX(400%); }
}
/* Cash sheet: amount due 28/700, the typed amount in a 56px field, quick keys
   52px, the change due as the largest number (36/700 ok-ink on ok-tint: it is
   read aloud), and the one brass key in the foot. */
.k-due {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.k-due__label {
  color: var(--slate);
  font: 600 15px/1.25 var(--font-sans);
}
.k-due__amount {
  color: var(--ink);
  font: 700 28px/1.1 var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.k-quick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}
.k-quick > .k-btn {
  height: 52px;
  padding: 0 var(--space-2);
  font-size: 17px;
  line-height: 1.25;
  font-variant-numeric: tabular-nums lining-nums;
}
.k-change {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-card);
  background: var(--ok-tint);
  color: var(--ok-ink);
  box-shadow: inset 0 0 0 1px var(--control-edge);
}
.k-change__label { font: 600 15px/1.25 var(--font-sans); }
.k-change__amount {
  font: 700 36px/1.1 var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}


/* ── 12. DataTable (.k-table) ────────────────────────────────────────────────
   A surface card that scrolls on both axes inside its view (the page never
   scrolls sideways), a sticky sunken header row (13/600 slate, sentence
   case), 52px rows of 15/400 with line rules, figures tabular and
   right-aligned in their own columns. Row actions are 44px keys. */

.k-table {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  overscroll-behavior: contain;
  scrollbar-color: var(--line-strong) transparent;
  container-type: inline-size;
}
.k-table__grid {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--ink);
  text-align: left;
}
.k-table__grid th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--line);
  background: var(--sunken);
  color: var(--slate);
  font: 600 13px/1.3 var(--font-sans);
  text-align: left;
  white-space: nowrap;
  text-transform: lowercase;
}
.k-table__grid th::first-letter { text-transform: uppercase; }
.k-table__grid td {
  height: 52px;
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--line);
  font: 400 15px/1.25 var(--font-sans);
  vertical-align: middle;
}
/* 16 at the card edges and 16 between columns (8 a side), so a history row
   keeps every cell to two lines in the 944px card at 1366 with the order
   column open. */
.k-table__grid tr > :first-child { padding-left: var(--space-4); }
.k-table__grid tr > :last-child { padding-right: var(--space-4); }
.k-table__grid tbody tr:last-child > td { border-bottom: 0; }
.k-table__grid :is(th, td).k-table__num {
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.k-table__grid .k-table__nums {
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
/* Date and time: one line when there is room, otherwise the date over the
   time (never split inside the date). */
.k-table__grid .k-table__when {
  min-width: 112px;
  font-variant-numeric: tabular-nums lining-nums;
}
.k-table__grid :is(th, td).k-table__end {
  text-align: right;
  white-space: nowrap;
}
/* Invoice numbers: the sans face, tabular, slashed zero where the font has
   it. Short of room, "AB12CD34-AB12CD34-1042" wraps at its hyphens; the
   8.25em floor keeps it to two lines. */
.k-table__grid .k-table__invoice {
  min-width: 8.25em;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "zero";
}
/* "Sto / kasir": in a card of 936px or more a first and last name stay on
   one line, so the row keeps to 52px; narrower cards let it wrap. */
@container (min-width: 936px) {
  .k-table__grid .k-table__who { min-width: 8.5em; }
}
.k-table__grid .k-table__strong { font-weight: 600; }
.k-table__grid .k-table__meta {
  display: block;
  margin-top: var(--space-1);
  color: var(--ink-3);
  font: 400 13px/1.3 var(--font-sans);
}
/* Status: 600 in the state colour behind a dot of the same colour; the word
   always carries the state. */
.k-table__grid .k-table__status {
  font-weight: 600;
  white-space: nowrap;
}
.k-table__status::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: var(--space-2);
  border-radius: 50%;
  background: currentColor;
  vertical-align: 1px;
}
.k-table__status--ok { color: var(--ok); }
.k-table__status--danger { color: var(--danger); }
.k-table__status--warn { color: var(--warn-ink); }
.k-table__status--info { color: var(--info); }
.k-table__actions > * + * { margin-left: var(--space-1); }
.k-table__grid .k-table__select {
  display: inline-block;
  width: auto;
  min-width: 152px;
}
.k-table__grid .k-table__empty {
  height: auto;
  padding: var(--space-6) var(--space-4);
  color: var(--slate);
  text-align: center;
}
.k-table__grid .k-table__empty--error { color: var(--danger); }


/* ── 13. Banner (.k-banner) ──────────────────────────────────────────────────
   Full-width strips above the page. Training: warn fill, 15/600, min 36px.
   Fiscal alert (L-PFR geometry): 15/1.4, padding 10 16 10 48, over modals. */

.k-banner {
  position: relative;
  flex-shrink: 0;
  min-height: 36px;
  margin: 0;
  padding: var(--space-2) var(--space-4) var(--space-2) calc(var(--space-4) + 20px + var(--space-2));
  font: 600 15px/1.25 var(--font-sans);
  text-align: left;
  box-shadow: inset 0 -1px 0 var(--control-edge);
}
.k-banner > .ti:first-child {
  position: absolute;
  top: var(--space-2);
  left: var(--space-4);
  font-size: 20px;
  line-height: 20px;
}
.k-banner--training { background: var(--warn-fill); color: var(--on-warn-fill); }
.k-banner--danger { background: var(--danger); color: var(--on-danger); }
.k-banner--info { background: var(--info-tint); color: var(--info); }
.k-banner--alert {
  z-index: var(--z-lpfr);
  padding: 10px var(--space-4) 10px 48px;
  line-height: 1.4;
}
.k-banner--alert > .ti:first-child {
  top: 10px;
  line-height: 21px;
}
.k-banner--sticky {
  position: sticky;
  top: 0;
  z-index: var(--z-banner);
}


/* ── 14. Popover (.k-menu): the Više menu ────────────────────────────────────
   300px, radius 10, e2, padding 8; 44px rows of icon 20 + 15/600. As a native
   [popover] it is fixed under its trigger (anchored where supported); without
   [popover] it renders in flow (docs, or an inline menu). */

.k-menu {
  flex-direction: column;
  width: 300px;
  max-width: calc(100vw - 2 * var(--space-3));
  margin: 0;
  padding: var(--space-2);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--e2);
}
.k-menu:not([popover]) { display: flex; }
.k-menu[popover] {
  position: fixed;
  inset: auto;
  top: calc(var(--h-head) + var(--space-1));
  right: var(--space-3);
  max-height: calc(100vh - var(--h-head) - var(--space-5));
}
.k-menu[popover]:popover-open {
  display: flex;
  animation: k-fade-in 120ms cubic-bezier(.2, .7, .2, 1);
}
@keyframes k-fade-in {
  from { opacity: 0; }
}
@supports (anchor-name: --k-a) {
  .k-bar__more { anchor-name: --k-more; }
  .k-menu[popover] {
    position-anchor: --k-more;
    top: anchor(bottom);
    right: anchor(right);
    margin-top: var(--space-1);
  }
}
.k-menu__item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--hit);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--r-control);
  background: transparent;
  color: var(--ink);
  font: 600 15px/1.25 var(--font-sans);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.k-menu__item > .ti {
  flex-shrink: 0;
  width: 20px;
  font-size: 20px;
  line-height: 1;
  text-align: center;
}
.k-menu__item > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (hover: hover) and (pointer: fine) {
  .k-menu__item:hover { background: var(--sunken); }
}
.k-menu__item:is(:active, .is-pressed) { background: var(--sunken-press); }
/* Toggle rows that are ON: training (warn fill) and PDA mode (navy). */
.k-menu__item.k-menu__item--warn { background: var(--warn-fill); color: var(--on-warn-fill); }
.k-menu__item.k-menu__item--on { background: var(--navy); color: var(--on-navy); box-shadow: inset 0 0 0 1px var(--selected-edge); }
/* Connection dot at the end of a row (server state). */
.k-menu__dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--ink-3);
}
.k-menu__dot--ok { background: var(--ok); }
.k-menu__dot--danger { background: var(--danger); }
.k-menu__dot--info { background: var(--info); }
.k-menu__lang {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-1);
  padding: var(--space-2) var(--space-3) var(--space-1);
  border-top: 1px solid var(--line);
  color: var(--slate);
}
.k-menu__lang > .ti {
  width: 20px;
  font-size: 20px;
  line-height: 1;
  text-align: center;
}
.k-menu__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  color: var(--ink-3);
  font: 400 13px/1.3 var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums;
}


/* ── 15. AppShell (.k-shell, .k-bar, .k-sidenav, .k-main) ────────────────────
   Intentional addition for Admin and SuperAdmin. The bar is kasir's header
   (.k-bar: one 52px row at every width); the side nav is the Više list laid
   flat (same 44px rows, same 300px width); the main area is kasir's data
   view (panel padding 12, 24 at 1600px and up). */

.k-shell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: var(--h-head) minmax(0, 1fr);
  grid-template-areas: "bar bar" "nav main";
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
}
.k-shell--bare {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "bar" "main";
}
.k-bar {
  grid-area: bar;
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--space-2);
  height: var(--h-head);
  padding: 0 var(--space-3);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
}
.k-brand {
  display: flex;
  align-items: center;
  flex: 0 1000 auto; /* the shop name gives way first */
  gap: var(--space-2);
  min-width: 28px;
  margin: 0;
  font-size: 17px;
  line-height: 1.25;
}
/* The logo mark is a fixed navy-and-gold image: it sits on a light plate
   (on-navy is light in every theme), invisible on the light headers and
   what keeps it legible on Malam's dark one. */
.k-brand__mark {
  display: block;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--r-control);
  background: var(--on-navy);
  object-fit: contain;
}
.k-brand__shop {
  display: block;
  min-width: 0;
  max-width: 240px;
  overflow: hidden;
  color: var(--ink);
  font: 600 17px/1.25 var(--font-sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.k-bar__status {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--space-2);
}
.k-bar__spacer {
  flex: 1 1 0;
  min-width: 0;
}
.k-clock {
  flex-shrink: 0;
  color: var(--ink);
  font: 600 17px/1 var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums;
}
.k-bar__alert { padding-right: var(--space-5); }
.k-bar__alert .k-count { top: -4px; }
.k-bar__logout {
  flex: 0 1 auto;
  min-width: var(--hit);
}
.k-bar__logout .k-btn__label { max-width: 160px; }
/* Više trigger: pressed look while the menu is open; an amber dot while
   training mode is on. */
.k-bar__more:is(.is-open, [aria-expanded="true"]),
.k-bar:has(.k-menu:popover-open) .k-bar__more {
  background: var(--sunken-press);
  color: var(--ink);
}
.k-bar__more--dot::after {
  content: "";
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 8px;
  height: 8px;
  border: 1px solid var(--warn-line);
  border-radius: 50%;
  background: var(--warn-fill);
  box-shadow: 0 0 0 2px var(--surface);
}
/* Side nav. */
.k-sidenav {
  grid-area: nav;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 300px;
  min-height: 0;
  padding: var(--space-2);
  overflow-y: auto;
  border-right: 1px solid var(--line);
  background: var(--surface);
  overscroll-behavior: contain;
}
.k-sidenav__group {
  margin: 0;
  padding: var(--space-3) var(--space-3) var(--space-1);
  color: var(--ink-3);
  font: 600 13px/1.3 var(--font-sans);
}
.k-sidenav__item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--hit);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--r-control);
  background: transparent;
  color: var(--slate);
  font: 600 15px/1.25 var(--font-sans);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.k-sidenav__item > .ti {
  flex-shrink: 0;
  width: 20px;
  font-size: 20px;
  line-height: 1;
  text-align: center;
}
.k-sidenav__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.k-sidenav__item > .k-pill { margin-left: auto; }
@media (hover: hover) and (pointer: fine) {
  .k-sidenav__item:hover { background: var(--sunken); color: var(--ink); }
}
.k-sidenav__item:is(:active, .is-pressed) { background: var(--sunken-press); color: var(--ink); }
.k-sidenav__item:is(.active, [aria-current="page"]) {
  border-radius: 0 var(--r-control) var(--r-control) 0;
  background: var(--sunken);
  color: var(--ink);
  box-shadow: inset 3px 0 0 var(--ink);
}
.k-sidenav__foot {
  margin-top: auto;
  padding: var(--space-2) var(--space-3);
  color: var(--ink-3);
  font: 400 13px/1.3 var(--font-sans);
}
.k-main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  min-height: 0;
  padding: var(--space-3);
  overflow: auto;
}
@media (min-width: 1600px) {
  .k-main { padding: var(--space-5); }
}
/* 1300px and below: header alerts become icon plus count, Odjava icon-only,
   the shop name ellipsis at 180px; the side nav becomes a 60px icon rail
   (labels stay in the accessibility tree; give each row a title). */
@media (max-width: 1300px) {
  .k-brand__shop { max-width: 180px; }
  .k-bar__alert-label,
  .k-bar__logout .k-btn__label,
  .k-sidenav__label,
  .k-sidenav__group {
    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;
  }
  .k-bar__alert { padding-right: var(--space-3); }
  .k-bar__logout { padding: 0; }
  .k-sidenav { width: auto; }
  .k-sidenav__item { justify-content: center; padding: 0; width: var(--hit); }
  .k-sidenav__item > .k-pill,
  .k-sidenav__foot { display: none; }
}
/* 899px and below: status text hides (the dot stays), the clock goes, the
   shop name takes the room; the side nav folds into the Više menu. */
@media (max-width: 899px) {
  .k-bar .k-pill__text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .k-clock { display: none; }
  .k-brand__shop { max-width: none; }
  .k-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "bar" "main";
  }
  .k-sidenav { display: none; }
}


/* ── 16. PageHeader (.k-pagehead, .k-view-title, .k-filter) ──────────────────
   Intentional addition built from kasir's data-view bar: the view title
   (21/600 ink, icon 24 slate) with its actions or filters, wrapping cleanly. */

.k-pagehead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: var(--space-3);
}
.k-pagehead__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.k-view-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--ink);
  font: 600 21px/1.2 var(--font-sans);
  white-space: nowrap;
}
.k-view-title > .ti {
  color: var(--slate);
  font-size: 24px;
  line-height: 1;
}
.k-pagehead__desc {
  margin: 0;
  color: var(--slate);
  font: 400 15px/1.4 var(--font-sans);
}
.k-pagehead__actions,
.k-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.k-filter__search { width: 200px; }
.k-filter__date {
  width: auto;
  font-variant-numeric: tabular-nums lining-nums;
}
.k-filter__sep {
  color: var(--slate);
  font: 400 15px/1.25 var(--font-sans);
}


/* ── 17. StatTile (.k-stats, .k-stat) ────────────────────────────────────────
   Intentional addition for dashboards: one surface strip divided by 1px lines
   (not a row of cards); label 13/600 slate, value 28/700 ink tabular (money
   weight), meta 13 ink-3. A change carries an arrow and a word, never colour
   alone. */

.k-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
}
.k-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line);
}
.k-stat__label {
  margin: 0;
  color: var(--slate);
  font: 600 13px/1.3 var(--font-sans);
}
.k-stat__value {
  margin: 0;
  color: var(--ink);
  font: 700 28px/1.1 var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.k-stat__unit {
  margin-left: var(--space-1);
  color: var(--slate);
  font: 600 13px/1 var(--font-sans);
}
.k-stat__meta {
  margin: 0;
  color: var(--ink-3);
  font: 400 13px/1.3 var(--font-sans);
}
.k-stat__delta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  font: 600 13px/1.3 var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums;
}
.k-stat__delta > .ti { font-size: 16px; line-height: 1; }
/* good / bad name the news, not the direction: more cancellations is bad news
   with an arrow that points up. */
.k-stat__delta--good { color: var(--ok); }
.k-stat__delta--bad { color: var(--danger); }


/* ── 18. Panel (.k-panel) ────────────────────────────────────────────────────
   Intentional addition, only where a separate object is needed (a settings
   group, a side summary). Surface, 1px line, radius 10, flat; a head as tall
   as the header row. Lists, rows and forms inside a view stay unboxed. */

.k-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--ink);
}
.k-panel__head {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--space-3);
  min-height: var(--h-head);
  padding: 0 var(--space-3) 0 var(--space-4);
  border-bottom: 1px solid var(--line);
}
.k-panel__title {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font: 600 17px/1.25 var(--font-sans);
}
.k-panel__title > .ti {
  color: var(--slate);
  font-size: 20px;
  line-height: 1;
}
.k-panel__meta {
  color: var(--slate);
  font: 400 13px/1.3 var(--font-sans);
}
.k-panel__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
}
.k-panel--flush > .k-panel__body { gap: 0; padding: 0 var(--space-4); }
.k-panel__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--line);
}


/* ── 19. FormRow (.k-formrow) ────────────────────────────────────────────────
   Intentional addition for settings pages: ruled rows (like order lines), a
   label column (15/600 ink, help 13 ink-3) beside the control; stacked at
   899px and below. */

.k-formrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: start;
  gap: var(--space-2) var(--space-5);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
}
.k-formrow:last-child { border-bottom: 0; }
.k-formrow__label {
  display: block;
  margin: 0;
  padding-top: var(--space-3);
  color: var(--ink);
  font: 600 15px/1.25 var(--font-sans);
}
.k-formrow__help {
  display: block;
  margin: var(--space-1) 0 0;
  color: var(--ink-3);
  font: 400 13px/1.3 var(--font-sans);
}
.k-formrow__control {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
  min-width: 0;
}
@media (max-width: 899px) {
  .k-formrow { grid-template-columns: minmax(0, 1fr); }
  .k-formrow__label { padding-top: 0; }
}


/* ── 20. Toast (.k-toasts, .k-toast) ─────────────────────────────────────────
   Intentional addition (kasir S8.1): light toasts, top-right under the
   header, above modals (z-toast). Surface, 1px line, radius 10, e2; a status
   icon and a word, never colour alone. */

.k-toasts {
  position: fixed;
  top: calc(var(--h-head) + var(--space-2));
  right: var(--space-3);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(360px, calc(100vw - 2 * var(--space-3)));
  pointer-events: none;
}
.k-toast {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 var(--space-3);
  min-height: 60px;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--e2);
  pointer-events: auto;
}
.k-toast > .ti:first-child {
  font-size: 20px;
  line-height: 1;
}
.k-toast__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: var(--space-1) 0;
}
.k-toast__title {
  margin: 0;
  color: var(--ink);
  font: 600 15px/1.25 var(--font-sans);
}
.k-toast__text {
  margin: 0;
  color: var(--slate);
  font: 400 13px/1.3 var(--font-sans);
}
.k-toast:not(:has(> .k-iconbtn, > .k-btn)) { padding-right: var(--space-4); }
.k-toast--ok > .ti:first-child { color: var(--ok); }
.k-toast--danger > .ti:first-child { color: var(--danger); }
.k-toast--warn > .ti:first-child { color: var(--warn-ink); }
.k-toast--info > .ti:first-child { color: var(--info); }


/* ── 21. EmptyState (.k-empty, .k-empty-line) ────────────────────────────────
   From kasir's empty order column: centred, a 32px outline icon in ink-3,
   15/400 slate copy, padding 48 16. */

.k-empty {
  padding: 48px var(--space-4);
  color: var(--ink-3);
  text-align: center;
}
.k-empty > .ti {
  display: block;
  margin: 0 auto var(--space-3);
  font-size: 32px;
  line-height: 1;
}
.k-empty__title {
  margin: 0 0 var(--space-1);
  color: var(--ink);
  font: 600 17px/1.25 var(--font-sans);
}
.k-empty > p,
.k-empty__text {
  margin: 0;
  color: var(--slate);
  font: 400 15px/1.25 var(--font-sans);
}
.k-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.k-empty-line {
  padding: var(--space-6) var(--space-4);
  color: var(--slate);
  font: 400 15px/1.25 var(--font-sans);
  text-align: center;
}


/* ── 22. Hero (.k-hero): the Website's first screen ──────────────────────────
   Intentional addition. Copy on paper at the top of the scale (36/1.1, 600:
   titles stay 600, only money is 700), a 17px lede in slate, a navy primary
   and a secondary key; the figure is the check itself, at order-column width. */

.k-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--cart);
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-5);
  background: var(--paper);
  color: var(--ink);
}
.k-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  min-width: 0;
}
.k-hero__title {
  margin: 0;
  color: var(--ink);
  font: 600 36px/1.1 var(--font-sans);
}
.k-hero__lede {
  margin: 0;
  color: var(--slate);
  font: 400 17px/1.25 var(--font-sans);
}
.k-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.k-hero__figure {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
}
.k-hero__figure > .k-check { margin: 0; }
.k-hero__caption {
  margin: var(--space-2) var(--space-1) 0;
  color: var(--ink-3);
  font: 400 13px/1.3 var(--font-sans);
}
@media (max-width: 899px) {
  .k-hero {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-5) var(--space-4);
  }
}


/* ── 23. PricingCard (.k-plans, .k-plan) ─────────────────────────────────────
   Intentional addition for the Website. Plans are separate objects, so they
   are cards: surface, 1px line, radius 10. The recommended plan is the check:
   a navy slab (radius 14, e1) whose call to action is the section's one brass
   key, because it starts a subscription. */

.k-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: stretch;
  gap: var(--space-4);
}
.k-plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--ink);
}
.k-plan__name {
  margin: 0;
  font: 600 21px/1.2 var(--font-sans);
}
.k-plan__desc {
  margin: var(--space-1) 0 0;
  color: var(--slate);
  font: 400 15px/1.4 var(--font-sans);
}
.k-plan__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  margin: 0;
}
.k-plan__amount {
  font: 700 36px/1.1 var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.k-plan__unit {
  color: var(--slate);
  font: 600 13px/1.3 var(--font-sans);
}
.k-plan__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.k-plan__list > li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font: 400 15px/1.25 var(--font-sans);
}
.k-plan__list > li > .ti {
  flex-shrink: 0;
  color: var(--ok);
  font-size: 20px;
  line-height: 1;
}
.k-plan__cta { margin-top: auto; }
.k-plan__flag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  height: 28px;
  padding: 0 var(--space-3);
  border-radius: var(--r-round);
  background: var(--navy-raised);
  color: var(--on-navy);
  font: 600 15px/1 var(--font-condensed);
  box-shadow: inset 0 0 0 1px var(--slab-edge);
}
.k-plan--featured {
  border-color: var(--navy);
  border-radius: var(--r-sheet);
  background: var(--navy);
  color: var(--on-navy);
  box-shadow: var(--e1);
}
.k-plan--featured :is(.k-plan__desc, .k-plan__unit) { color: var(--slab-ink-2); }
.k-plan--featured .k-plan__list > li > .ti { color: var(--slab-ink-2); }


/* ── Reduced motion: nothing animates. ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .k-scope *,
  .k-scope *::before,
  .k-scope *::after,
  .k-key,
  .k-modal,
  .k-menu,
  .k-progress__bar {
    animation: none !important;
    transition: none !important;
  }
}