* {
  box-sizing: border-box;
}

/* Pin the rem base at 16px. Everything sized in rem across the app — ours and
   @inglorious/ui's — is calibrated against this, so it must not drift with a
   browser or OS default font-size setting. Users who need larger text get it
   from page zoom, which scales rem and px alike. */
html {
  font-size: 100%;
}

/* App feel: no tap flash, no sticky focus rings from touch/mouse.
   Keyboard focus keeps its ring via :focus-visible. */
* {
  -webkit-tap-highlight-color: transparent;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible) {
  outline: none;
}

input,
textarea {
  line-height: var(--iw-line-height-normal);
}

/* UI package primary lives in src/theme/tokens.css (per-category bridge) */

/* Calibrate UI package primitives to our sizing/colors.
   NOTE: selectors carry an element prefix on purpose — package rules are
   .iw-x.iw-y (0,2,0) and inject after this file, so bare classes lose. */
/* UI package calibration (buttons, chips) */

/* The page-level "back" affordance, shared by every screen that can be
   drilled into. Identical in all five templates, so it lives here rather than
   being copy-pasted into five CSS modules.

   Tripled selector on purpose: it has to outrank `.iw-button-ghost` (0,1,0)
   for the colour and `button.iw-button` (0,1,1) for the height floor, and the
   package loads after this file. A back link should hug its label, not carry
   a 48px touch-target box — see the note on .vaitu-compact below. */
button.iw-button.vaitu-back {
  --iw-button-bg: var(--vmuted);
  --iw-button-color: var(--vmuted);
  min-height: 0;
  padding: 0.375rem 0 0.875rem;
  font-size: var(--iw-font-size-sm);
}

/* Compact controls opt out of the touch-target floor above — a back link or
   an inline icon toggle should hug its label, not carry a 48px box. Declared
   here rather than in each page module because the rule being overridden is
   here, and the doubled class keeps it winning on specificity. */
button.iw-button.vaitu-compact {
  min-height: 0;
}

button.iw-button.iw-button-primary {
  --iw-button-text: var(--iw-color-primary-text);
}

span.iw-chip.iw-chip {
  border: 1px solid var(--vchip-border);
  background: transparent;
  color: var(--vmuted);
}

span.iw-chip.iw-chip-primary {
  background: var(--iw-color-primary);
  color: var(--iw-color-primary-text);
  border-color: var(--iw-color-primary);
}

span.iw-chip.iw-chip-success {
  background: var(--iw-color-primary);
  color: var(--iw-color-primary-text);
  border-color: var(--iw-color-primary);
}

span.iw-chip.iw-chip-error {
  background: color-mix(in srgb, var(--verror) 12%, transparent);
  color: var(--verror);
  border-color: color-mix(in srgb, var(--verror) 35%, transparent);
}

span.iw-chip.iw-chip-info {
  background: var(--iw-color-gray-500);
  color: var(--vsurface);
  border-color: var(--iw-color-gray-500);
}

/* UI Select tuned to our inputs (same box, only the picker differs) */
select.iw-select {
  min-height: var(--vcontrol-height);
  font-size: var(--vinput-font-size);
  color: var(--vink);
  background-color: var(--vsurface);
  border: 1px solid var(--vline);
  border-radius: var(--iw-radius-xl);
  padding: var(--vcontrol-padding-block) 2.25rem var(--vcontrol-padding-block)
    var(--vcontrol-padding-inline);
}

.iw-bottom-navigation-action-selected .iw-bottom-navigation-label {
  font-weight: 800;
}

nav.iw-bottom-navigation .iw-bottom-navigation-action-selected {
  color: var(--vchip-active-bg);
}

/* App-wide calibration of the iw Alert, shared by every page's error box.
   Doubled class on purpose — see the note at the top of this file: the
   package's .iw-alert-error is a bare (0,1,0) class that loads after us, so a
   single-class override would lose on order.

   Deliberately NOT used for .warn / .disclaimer. Those are neutral notes, not
   failures, and Alert hardcodes role="alert" — an assertive live region. Making
   screen readers announce "Only 5 names will be forwarded to the organizer" as
   an error would be worse than the duplication it saves. */
.iw-alert.vaitu-alert {
  --iw-alert-color: var(--verror);
  font-size: var(--iw-font-size-sm);
  line-height: var(--iw-line-height-normal);
}

/* Search box rebuilt on the UI Input frame. Lives here (not in the module)
   because public/ edits force a full reload, unlike module HMR. */
.vaitu-search .iw-input-field .iw-input-frame {
  background: var(--vsurface);
  border-radius: var(--iw-radius-xl);
  padding: var(--iw-space-3) 0.875rem;
  gap: 0.5625rem;
}

.vaitu-search .iw-input-field input.iw-input {
  border: none;
  background: transparent;
  min-height: 0;
  height: auto;
  padding: 0 0 0 1.25rem;
  font-size: var(--vinput-font-size);
  color: var(--vink);
}

.vaitu-search .iw-input-field input.iw-input::placeholder {
  color: var(--vmuted);
}

.vaitu-search .iw-input-field input.iw-input:hover,
.vaitu-search .iw-input-field input.iw-input:focus {
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
}

.vaitu-search .iw-input-field span.iw-input-icon {
  color: var(--vmuted);
}

body {
  margin: 0;
  background: #e7e2d3;
  font-family: var(--iw-font-family-sans);
  -webkit-font-smoothing: antialiased;
}