/* Wireframe components (the screens people build). Every colour, corner, font and size comes
   from the theme tokens set on .wf as --wf-* custom properties, so one stylesheet draws all
   five themes and any design system. The code export copies this file, so keep it plain CSS. */

.wf {
  --wf-border: var(--wf-line-w) solid var(--wf-line);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background-color: var(--wf-paper);
  background-image: var(--wf-pattern);
  background-size: var(--wf-pattern-size);
  color: var(--wf-ink);
  font-family: var(--wf-font);
  font-size: var(--wf-msg-size);
  line-height: 1.3;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.wf *, .wf *::before, .wf *::after { box-sizing: border-box; }
.wf h1, .wf h2, .wf p, .wf figure { margin: 0; }
.wf hr { margin: 0; }

/* Regions */
.wf-safe-top { flex: none; height: var(--wf-safe-top); }
.wf-safe-top.wf-raised { background: var(--wf-paper2); }
.wf-safe-bottom { flex: none; height: var(--wf-safe-bottom); }
.wf-region { display: flex; flex-direction: column; }
.wf-top { flex: none; gap: 4px; }
.wf-top-bleed { gap: 0; }
.wf-body { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.wf-content { flex: 1 1 auto; min-height: 0; overflow: hidden; gap: 12px; padding: 10px 0 16px; }
.wf-mode-play .wf-content { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.wf-mode-play .wf-content::-webkit-scrollbar { display: none; }
.wf-content.wf-chatty { justify-content: flex-end; gap: 8px; padding: 12px 0 14px; }
.wf-content.wf-has-fill { padding-bottom: 0; }
.wf-content.wf-bleed-start { padding-top: 0; }
.wf-top:not(.is-empty) + .wf-body .wf-content { padding-top: 10px; }
.wf-bottom { flex: none; gap: 0; }
.wf-bottom:not(.is-empty) { background: var(--wf-paper2); border-top: var(--wf-divider); }
.wf-bottom.wf-bottom-tabs { border-top: 0; }
.wf-bottom.wf-bottom-sheet {
  position: relative;
  z-index: 2;
  margin-top: -22px;
  gap: 14px;
  padding: 10px 4px 0;
  background: var(--wf-paper);
  border-top: var(--wf-border);
  border-radius: var(--wf-sheet-r);
  box-shadow: var(--wf-shadow2);
}
.wf-bottom.wf-bottom-sheet .wf-safe-bottom { height: calc(var(--wf-safe-bottom) + 4px); }
.wf-float { position: absolute; right: 16px; bottom: 16px; z-index: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.wf-free { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.wf-free > .wf-part { position: absolute; padding: 0; pointer-events: auto; display: flex; flex-direction: column; justify-content: center; }
.wf-free > .wf-part > * { max-height: 100%; }

/* A part fills its row inside the readable column; flush parts draw their own side padding. */
.wf-part { position: relative; flex: none; width: 100%; max-width: var(--wf-max-w); margin: 0 auto; padding: 0 16px; }
.wf-part.wf-flush { padding: 0; }
.wf-part.wf-fill-part { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 120px; }
.wf-bottom > .wf-part { padding: 10px 16px; }
.wf-bottom > .wf-part.wf-flush { padding: 0; }
.wf-bottom > .wf-part:first-child { padding-top: 12px; }
.wf-bottom-sheet > .wf-part, .wf-bottom-sheet > .wf-part:first-child { padding: 0 16px; }
.wf-bottom > .wf-p-tab-bar { padding: 0; }
.wf-box {
  flex: none;
  width: calc(100% - 32px);
  max-width: calc(var(--wf-max-w) - 32px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--wf-paper2);
  border: var(--wf-border);
  border-radius: var(--wf-radius);
  box-shadow: var(--wf-shadow);
  overflow: hidden;
}
.wf-box > .wf-part { padding: 0 12px; max-width: none; }
.wf-box > .wf-part + .wf-part { border-top: var(--wf-divider); }
.wf-box .wf-row:last-child { border-bottom: 0; }
.wf-box > .wf-p-slider, .wf-box > .wf-p-text, .wf-box > .wf-p-progress, .wf-box > .wf-p-text-box, .wf-box > .wf-p-dropdown.wf-v-field { padding: 12px; }
.wf-box > .wf-p-divider.wf-v-line { display: none; }

/* Type */
.wf-title { font-family: var(--wf-head-font); font-size: var(--wf-head-size); line-height: 1.15; font-weight: var(--wf-head-weight); text-transform: var(--wf-head-case); letter-spacing: var(--wf-head-track); overflow-wrap: anywhere; }
.wf-h2 { font-family: var(--wf-head-font); font-size: var(--wf-section-size); line-height: 1.2; font-weight: var(--wf-head-weight); text-transform: var(--wf-head-case); letter-spacing: var(--wf-head-track); }
.wf-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; }
.wf-big { font-family: var(--wf-head-font); font-size: var(--wf-big-size); line-height: 1.05; font-weight: var(--wf-head-weight); letter-spacing: var(--wf-head-track); }
.wf-big-30 { font-size: 30px; }
.wf-number { display: flex; flex-direction: column; gap: 4px; }
.wf-number-hero { gap: 10px; padding: 6px 0; }
.wf-number-hero .wf-big { font-size: calc(var(--wf-big-size) + 8px); line-height: 1; }
.wf-sub-line { font-size: var(--wf-meta-size); }
.wf-bodytext { font-size: var(--wf-msg-size); }
.wf-caption { font-size: var(--wf-meta-size); color: var(--wf-muted); }
.wf-with-icon { display: flex; align-items: center; gap: 6px; }
.wf-meta { font-size: var(--wf-meta-size); color: var(--wf-muted); }
.wf-meta-c { font-size: var(--wf-meta-size); }
.wf-meta-size { font-size: var(--wf-meta-size); }
.wf-name-size { font-size: var(--wf-name-size); }
.wf-section { font-size: var(--wf-section-size); }
.wf-strong { font-weight: 700; }
.wf-muted { color: var(--wf-muted); }
.wf-tone-muted { color: var(--wf-muted); }
.wf-tone-accent { color: var(--wf-accent-text); }
.wf-tone-pos { color: var(--wf-pos); }
.wf-tone-danger { color: var(--wf-danger); }
.wf-label { font-size: var(--wf-meta-size); font-weight: 700; color: var(--wf-ink); }
.wf-link { color: var(--wf-accent-text); font-size: var(--wf-msg-size); white-space: nowrap; }
.wf-link-row { font-size: var(--wf-msg-size); }
.wf-nowrap { white-space: nowrap; }
.wf-ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-grow { flex: 1 1 auto; min-width: 0; }
.wf-min0 { min-width: 0; }
.wf-stack { display: flex; flex-direction: column; }
.wf-gap2 { gap: 2px; }
.wf-gap4 { gap: 4px; }
.wf-gap7 { gap: 7px; }
.wf-spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wf-center { display: flex; justify-content: center; }
.wf-row-gap { display: flex; gap: 8px; }

/* Icons and pictures */
.wf-i { display: block; flex: none; stroke-width: var(--wf-icon-w); }
.wf-x { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--wf-img-line); stroke-width: 1; }
.wf-x-soft { opacity: 0.6; stroke: var(--wf-line); }

/* Buttons */
.wf-btn {
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  font-size: var(--wf-name-size);
  font-weight: 700;
  white-space: nowrap;
  border: var(--wf-border);
  border-radius: var(--wf-radius);
}
.wf-btn-primary { color: var(--wf-on-accent); background: var(--wf-accent); box-shadow: var(--wf-shadow2); }
.wf-btn-secondary { color: var(--wf-ink); background: var(--wf-fill); box-shadow: var(--wf-shadow); }
.wf-btn-danger { color: var(--wf-danger); background: none; border-color: var(--wf-danger); }
.wf-btn-box { width: 52px; flex: none; padding: 0; color: var(--wf-ink); background: var(--wf-fill); border-radius: var(--wf-radius-sm); box-shadow: var(--wf-shadow); }
.wf-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wf-pair.wf-pair-icon { display: flex; }
.wf-pair.wf-pair-icon > .wf-btn:last-child { flex: 1 1 auto; width: auto; }
.wf-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.wf-action { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: var(--wf-meta-size); text-align: center; }
.wf-action-icon { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; background: var(--wf-fill); border: var(--wf-border); border-radius: var(--wf-round); box-shadow: var(--wf-shadow); }
.wf-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wf-tile { height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0 4px; font-size: var(--wf-meta-size); text-align: center; background: var(--wf-fill); border: var(--wf-border); border-radius: var(--wf-radius); box-shadow: var(--wf-shadow); }
.wf-icon-btn { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--wf-ink); }
.wf-back-btn { color: var(--wf-ink); }
.wf-bar-contact .wf-back-btn { color: var(--wf-accent-text); }
.wf-icon-wrap { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
.wf-icon-plain { display: flex; width: 44px; height: 44px; align-items: center; justify-content: center; }
.wf-icon-box { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--wf-ink); background: var(--wf-fill); border: var(--wf-border); border-radius: var(--wf-radius-sm); box-shadow: var(--wf-shadow); }
.wf-icon-round { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--wf-ink); background: var(--wf-paper); border: var(--wf-border); border-radius: var(--wf-round); box-shadow: var(--wf-shadow2); }
.wf-free .wf-icon-wrap, .wf-free .wf-icon-round, .wf-free .wf-icon-box { width: 100%; height: 100%; }
.wf-fab { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; color: var(--wf-on-accent); background: var(--wf-accent); border: var(--wf-border); border-radius: var(--wf-fab); box-shadow: var(--wf-shadow2); }
.wf-fab-wide { width: auto; gap: 8px; padding: 0 20px; font-weight: 700; border-radius: var(--wf-pill); }
.wf-p-floating { padding: 0; width: auto; }
.wf-back-text { display: inline-flex; align-items: center; gap: 2px; height: 44px; color: var(--wf-accent-text); font-size: var(--wf-name-size); }

/* Chips, tags, counts */
.wf-chips { display: flex; gap: 8px; padding-left: 16px; overflow: hidden; }
.wf-chip, .wf-chip-on {
  flex: none;
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  font-size: var(--wf-msg-size);
  color: var(--wf-ink);
  white-space: nowrap;
  background: var(--wf-fill);
  border: var(--wf-border);
  border-radius: var(--wf-pill);
}
.wf-chip.wf-chip-on { color: var(--wf-on-accent); background: var(--wf-accent); }
.wf-chip-select { padding-right: 10px; }
.wf-tag { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; font-size: var(--wf-meta-size); white-space: nowrap; background: var(--wf-fill); border: var(--wf-border); border-radius: var(--wf-pill); }
.wf-tag-pos { color: var(--wf-pos); }
.wf-pos-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wf-pos); }
.wf-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.wf-count { min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; font-size: 12px; font-weight: 700; line-height: 1; color: var(--wf-on-accent); background: var(--wf-accent); border-radius: 999px; }
.wf-rating { display: inline-flex; align-items: center; gap: 4px; font-size: var(--wf-meta-size); }
.wf-map-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; font-size: var(--wf-meta-size); white-space: nowrap; background: var(--wf-paper); border: var(--wf-border); border-radius: var(--wf-pill); box-shadow: var(--wf-shadow); }
.wf-tl { position: absolute; left: 10px; top: 10px; }
.wf-br { position: absolute; right: 10px; bottom: 10px; }
.wf-br-chip { position: absolute; right: 12px; bottom: 12px; }

/* Fields */
.wf-field-stack { display: flex; flex-direction: column; gap: 6px; }
.wf-field {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 12px;
  color: var(--wf-muted);
  background: var(--wf-fill);
  border: var(--wf-border);
  border-radius: var(--wf-radius);
  box-shadow: var(--wf-shadow);
}
.wf-field-label { flex: none; color: var(--wf-muted); }
.wf-input { flex: 1 1 auto; min-width: 0; color: var(--wf-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-input.wf-muted { color: var(--wf-muted); }
.wf-field-select .wf-i { margin-left: auto; color: var(--wf-ink); }
.wf-search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; color: var(--wf-muted); font-size: var(--wf-name-size); background: var(--wf-fill); border: var(--wf-border); border-radius: var(--wf-radius); box-shadow: var(--wf-shadow); }
.wf-search-row { display: flex; gap: 8px; }
.wf-search-row .wf-search { height: 44px; }
.wf-composer { display: flex; align-items: center; gap: 4px; padding: 6px; }
.wf-composer-field { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; height: 40px; padding: 0 14px; background: var(--wf-paper); border: var(--wf-border); border-radius: var(--wf-pill); }
.wf-mic { color: var(--wf-on-accent); background: var(--wf-accent); border: var(--wf-border); border-radius: var(--wf-round); }
.wf-p-text-box.wf-v-keypad { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 216px; }
.wf-keypad { flex: 1 1 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(48px, 1fr); gap: 4px; }
.wf-key { display: flex; align-items: center; justify-content: center; min-height: 48px; font-family: var(--wf-head-font); font-size: 26px; font-weight: var(--wf-head-weight); border-radius: var(--wf-radius-sm); }
.wf-select-sm { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px 0 12px; font-size: var(--wf-msg-size); background: var(--wf-paper); border: var(--wf-border); border-radius: var(--wf-radius-sm); white-space: nowrap; }
.wf-set-row { display: flex; align-items: center; gap: 12px; min-height: 50px; }
.wf-set-row-tall { min-height: 60px; }
.wf-check-row { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.wf-checkbox { width: 22px; height: 22px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--wf-paper); border: var(--wf-border); border-radius: var(--wf-radius-sm); }
.wf-checkbox.is-on { color: var(--wf-on-accent); background: var(--wf-accent); }
.wf-switch { position: relative; width: 48px; height: 28px; flex: none; display: inline-block; background: var(--wf-fill2); border: var(--wf-border); border-radius: var(--wf-pill); }
.wf-switch.is-on { background: var(--wf-accent); }
.wf-knob { position: absolute; left: 3px; top: 50%; width: 20px; height: 20px; margin-top: -10px; background: var(--wf-paper); border: var(--wf-border); border-radius: var(--wf-round); transition: left 160ms ease; }
.wf-switch.is-on .wf-knob { left: calc(100% - 23px); }

/* Sliders and progress */
.wf-slider { display: flex; flex-direction: column; gap: 10px; padding: 6px 0; }
.wf-slider-size { padding: 12px 0 14px; }
.wf-slider-line { display: flex; align-items: center; gap: 12px; }
.wf-a-small { font-size: 13px; color: var(--wf-muted); }
.wf-a-big { font-size: 22px; color: var(--wf-muted); }
.wf-track { position: relative; display: block; flex: 1 1 auto; height: 6px; background: var(--wf-fill2); border-radius: var(--wf-pill); }
.wf-track-thick { height: 8px; overflow: hidden; }
.wf-track-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--wf-accent); border-radius: var(--wf-pill); }
.wf-track-fill.wf-square { border-radius: 0; }
.wf-row .wf-track { overflow: hidden; }
.wf-track-knob { position: absolute; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; background: var(--wf-paper); border: var(--wf-border); border-radius: var(--wf-round); box-shadow: var(--wf-shadow); }
.wf-progress { display: flex; flex-direction: column; gap: 8px; }
.wf-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.wf-step { height: 8px; background: var(--wf-fill2); border-radius: var(--wf-pill); }
.wf-step.is-on { background: var(--wf-accent); }

/* Top bars */
.wf-bar { width: 100%; max-width: var(--wf-max-w); margin: 0 auto; }
.wf-bar-large { display: flex; flex-direction: column; padding: 0 8px 0 16px; }
.wf-bar-row { display: flex; align-items: center; justify-content: space-between; height: 44px; }
.wf-bar-icons { display: flex; gap: 2px; }
.wf-bar-link { display: flex; align-items: center; height: 44px; padding: 0 4px; font-size: var(--wf-name-size); color: var(--wf-accent-text); }
.wf-bar-inline { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 6px 8px 0 16px; }
.wf-bar-center { display: flex; align-items: center; height: 52px; padding: 0 6px; }
.wf-bar-title { flex: 1 1 auto; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-bar-pad { width: 44px; flex: none; }
.wf-bar-contact { display: flex; align-items: center; gap: 6px; height: 56px; padding: 0 6px 0 2px; background: var(--wf-paper2); border-bottom: var(--wf-divider); max-width: none; }
.wf-bar-person { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 4px; }
.wf-bar-greeting { display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 6px 0 16px; }
.wf-has-dot { position: relative; }
.wf-dot-badge { position: absolute; right: 10px; top: 9px; width: 9px; height: 9px; background: var(--wf-accent); border: 1.5px solid var(--wf-paper); border-radius: 50%; }

/* Avatars */
.wf-avatar { flex: none; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: var(--wf-muted); background: var(--wf-fill2); border: var(--wf-border); border-radius: var(--wf-round); }
.wf-avatar-btn { width: 42px; height: 42px; }
.wf-fill-avatar { width: 100%; height: 100%; }
.wf-avatar-block { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.wf-avatar-ringed { position: relative; display: inline-flex; padding: 0; border-radius: var(--wf-round); }
.wf-ring-solid, .wf-ring-dashed { padding: 3px; border: 2.5px solid var(--wf-accent); }
.wf-ring-dashed { border-style: dashed; }
.wf-av-dot { position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; background: var(--wf-pos); border: 2px solid var(--wf-paper); border-radius: 50%; }

/* Tab bars, tabs and menus */
.wf-tabbar { display: flex; justify-content: space-around; padding: 6px 8px calc(var(--wf-safe-bottom) + 6px); background: var(--wf-paper2); border-top: var(--wf-border); }
.wf-tab { min-width: 64px; height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0 8px; font-size: 11px; color: var(--wf-muted); border-radius: var(--wf-radius-sm); }
.wf-tab.is-on { font-weight: 700; color: var(--wf-tab-on-ink); background: var(--wf-tab-on-bg); }
.wf-seg { display: flex; gap: 4px; padding: 4px; background: var(--wf-fill); border: var(--wf-border); border-radius: var(--wf-pill); }
.wf-seg-item { flex: 1 1 0; height: 34px; display: flex; align-items: center; justify-content: center; padding: 0 8px; font-size: var(--wf-msg-size); color: var(--wf-muted); border-radius: var(--wf-pill); white-space: nowrap; }
.wf-seg-item.is-on { font-weight: 700; color: var(--wf-on-accent); background: var(--wf-accent); }
.wf-under { display: flex; gap: 18px; border-bottom: var(--wf-divider); }
.wf-under-item { padding: 8px 0 9px; color: var(--wf-muted); border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.wf-under-item.is-on { color: var(--wf-accent-text); font-weight: 700; border-bottom-color: var(--wf-accent); }
.wf-stepper { display: flex; align-items: center; margin-left: -12px; }
.wf-side { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--wf-paper2); border-right: var(--wf-border); min-height: 100%; }
.wf-side-list { display: flex; flex-direction: column; gap: 2px; }
.wf-side-item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; font-size: var(--wf-name-size); border-radius: var(--wf-radius-sm); }
.wf-side-item.is-on { color: var(--wf-accent-text); background: var(--wf-fill); font-weight: 700; }
.wf-menu { align-self: flex-start; width: 220px; max-width: 100%; display: flex; flex-direction: column; background: var(--wf-paper); border: var(--wf-border); border-radius: var(--wf-radius); box-shadow: var(--wf-shadow2); overflow: hidden; }
.wf-menu-item { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 14px; font-size: var(--wf-name-size); border-bottom: var(--wf-divider); }
.wf-menu-item:last-child { border-bottom: 0; }
.wf-toast { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 16px; color: var(--wf-paper); background: var(--wf-ink); border-radius: var(--wf-radius); box-shadow: var(--wf-shadow2); }
.wf-toast-action { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Lists */
.wf-list { display: flex; flex-direction: column; }
.wf-row { position: relative; display: flex; align-items: center; gap: 12px; border-bottom: var(--wf-divider); }
.wf-row-chat { min-height: 68px; }
.wf-row-set { min-height: 46px; }
.wf-row-profile { padding: 12px 0; }
.wf-row-tx { min-height: 60px; }
.wf-row-channel { min-height: 62px; }
.wf-row-detail { justify-content: space-between; min-height: 42px; }
.wf-row-contact { min-height: 64px; padding: 10px 0; }
.wf-row-person { min-height: 64px; }
.wf-row-end { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.wf-row-icon { flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--wf-ink); background: var(--wf-fill2); border: var(--wf-border); border-radius: var(--wf-radius-sm); }
.wf-thumb { flex: none; width: 44px; height: 44px; background: var(--wf-fill2); border: var(--wf-border); border-radius: var(--wf-radius-sm); }
.wf-row-profile .wf-avatar { width: 58px; height: 58px; }
.wf-row-chat .wf-avatar { width: 48px; height: 48px; }

/* Cards */
.wf-cards { display: flex; flex-direction: column; gap: 12px; }
.wf-card { position: relative; display: flex; flex-direction: column; background: var(--wf-paper); border: var(--wf-border); border-radius: var(--wf-radius); box-shadow: var(--wf-shadow); overflow: hidden; }
.wf-card-basic { gap: 6px; padding: 14px; }
.wf-card-button { align-self: flex-start; margin-top: 6px; color: var(--wf-accent-text); font-weight: 700; }
.wf-card-media .wf-card-img { position: relative; display: block; height: 118px; background: var(--wf-fill); border-bottom: var(--wf-border); }
.wf-card-text { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; }
.wf-card-tags { display: flex; align-items: center; gap: 10px; margin-top: 5px; }
.wf-card-save { position: absolute; right: 10px; top: 10px; width: 40px; height: 40px; }
.wf-card-accent { color: var(--wf-on-accent); background: var(--wf-accent); box-shadow: var(--wf-shadow2); }
.wf-card-balance { height: 174px; justify-content: space-between; padding: 16px 18px; }
.wf-card-pay { height: 208px; justify-content: space-between; padding: 18px 20px; }
.wf-pay-brand { font-family: var(--wf-head-font); font-size: 22px; font-weight: var(--wf-head-weight); text-transform: var(--wf-head-case); letter-spacing: var(--wf-head-track); }
.wf-pay-chip { width: 44px; height: 32px; border: var(--wf-line-w) solid currentColor; border-radius: 6px; background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 100% 1px, 1px 100%; background-position: 0 50%, 50% 0; background-repeat: no-repeat; opacity: 0.75; }
.wf-pay-number { font-family: var(--wf-head-font); font-size: 20px; letter-spacing: 0.1em; white-space: nowrap; }
.wf-card-stats { display: grid; }
.wf-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; text-align: center; }
.wf-stat + .wf-stat { border-left: var(--wf-divider); }
.wf-card-chart { gap: 8px; padding: 12px 14px; }
.wf-bars { position: relative; height: 124px; display: grid; gap: 14px; align-items: end; border-bottom: var(--wf-border); }
.wf-bar-col { background: var(--wf-fill2); border: var(--wf-border); border-bottom: 0; border-radius: var(--wf-radius-sm) var(--wf-radius-sm) 0 0; }
.wf-bar-col.is-on { background: var(--wf-accent); }
.wf-avg { position: absolute; left: 0; right: 0; border-top: 1.5px dashed var(--wf-muted); }
.wf-avg-label { position: absolute; right: 0; padding: 0 4px; font-size: var(--wf-meta-size); color: var(--wf-muted); background: var(--wf-paper); }
.wf-bar-labels { display: grid; gap: 14px; text-align: center; }
.wf-on-label { color: var(--wf-ink); font-weight: 700; }
.wf-chart-line { display: block; width: 100%; height: 76px; }
.wf-chart-area { fill: var(--wf-accent); fill-opacity: 0.2; stroke: none; }
.wf-chart-stroke { fill: none; stroke: var(--wf-accent); stroke-width: 2.5; stroke-linejoin: round; }
.wf-notice { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: var(--wf-fill); border: var(--wf-border); border-radius: var(--wf-radius); }
.wf-card-banner { flex-direction: row; align-items: center; gap: 14px; padding: 12px 16px; }
.wf-free .wf-card { height: 100%; }
.wf-card-preview { box-shadow: var(--wf-shadow2); }
.wf-preview-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: var(--wf-divider); }
.wf-preview-head .wf-avatar { width: 36px; height: 36px; }
.wf-preview-body { display: flex; flex-direction: column; gap: 8px; padding: 12px; }

/* Pictures and maps */
.wf-photo-wrap { display: flex; flex-direction: column; gap: 6px; }
.wf-photo, .wf-map { position: relative; overflow: hidden; background: var(--wf-fill); border: var(--wf-border); border-radius: var(--wf-radius); box-shadow: var(--wf-shadow); }
.wf-bleed-box { border-width: 0 0 var(--wf-line-w) 0; border-radius: 0; box-shadow: none; }
.wf-fill { flex: 1 1 auto; min-height: 120px; }
.wf-fill-part > .wf-photo-wrap { flex: 1 1 auto; }
.wf-map.wf-fill.wf-bleed-box { border-width: 0; }
.wf-photo-controls { position: absolute; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 12px; }
.wf-photo-caption { padding: 0 2px; }
.wf-map-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wf-m-bg { fill: var(--wf-map-bg); }
.wf-m-water { fill: var(--wf-water); stroke: var(--wf-map-line); stroke-width: 1.5; }
.wf-m-line { fill: none; stroke: var(--wf-map-line); stroke-width: 1.2; }
.wf-m-road { fill: none; stroke: var(--wf-map-line); stroke-width: 5; stroke-linecap: round; }
.wf-m-road-wide { stroke-width: 6; }
.wf-m-route-dots { fill: none; stroke: var(--wf-accent); stroke-width: 3; stroke-dasharray: 1 7; stroke-linecap: round; }
.wf-m-route-ahead { fill: none; stroke: var(--wf-accent); stroke-width: 5; stroke-dasharray: 2 10; stroke-linecap: round; }
.wf-m-route-done { fill: none; stroke: var(--wf-accent); stroke-width: 7; stroke-linecap: round; }
.wf-m-pin { fill: var(--wf-accent); stroke: var(--wf-line); stroke-width: 1.5; }
.wf-m-dot { fill: var(--wf-paper); }
.wf-m-halo { fill: var(--wf-accent); fill-opacity: 0.2; }
.wf-m-me { fill: var(--wf-accent); stroke: var(--wf-paper); stroke-width: 2.5; }
.wf-m-me-big { stroke-width: 3.5; }
.wf-m-start { fill: var(--wf-paper); stroke: var(--wf-accent); stroke-width: 4; }
.wf-m-beam { fill: var(--wf-accent); fill-opacity: 0.35; }

/* Dividers */
.wf-hr { height: 0; border: 0; border-top: var(--wf-divider); }
.wf-day { display: flex; justify-content: center; }
.wf-day > .wf-t { padding: 3px 12px; font-size: var(--wf-meta-size); color: var(--wf-muted); background: var(--wf-fill); border: var(--wf-border); border-radius: var(--wf-pill); }
.wf-handle-row { display: flex; justify-content: center; padding: 2px 0; }
.wf-grab { width: 40px; height: 5px; background: var(--wf-muted); border-radius: 3px; opacity: 0.5; }

/* Chat */
.wf-bubble { align-self: flex-start; max-width: 76%; display: flex; flex-direction: column; gap: 2px; padding: 7px 11px; background: var(--wf-fill); border: var(--wf-border); border-radius: var(--wf-radius); box-shadow: var(--wf-shadow); overflow-wrap: anywhere; }
.wf-bubble-out { align-self: flex-end; color: var(--wf-bubble-out-ink); background: var(--wf-bubble-out); }
.wf-bubble-flat { box-shadow: none; max-width: 78%; }
.wf-p-chat-bubble { display: flex; flex-direction: column; padding: 0 12px; }
.wf-bubble-time { align-self: flex-end; font-size: var(--wf-meta-size); color: var(--wf-muted); }
.wf-bubble-out .wf-bubble-time { color: inherit; opacity: 0.75; }
.wf-bubble-photo { width: 62%; max-width: 62%; gap: 6px; padding: 6px; }
.wf-bubble-img { position: relative; display: block; height: 128px; overflow: hidden; background: var(--wf-fill2); border: var(--wf-border); border-radius: var(--wf-radius-sm); }
.wf-bubble-img .wf-x { stroke: var(--wf-line); }
.wf-bubble-text, .wf-bubble-photo .wf-bubble-time { padding: 0 5px; }
.wf-p-typing-dots { padding: 0 12px; }
.wf-typing { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 14px; background: var(--wf-fill); border: var(--wf-border); border-radius: var(--wf-radius); }
.wf-typing-plain { background: none; border: 0; padding: 0; }
.wf-typing-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wf-muted); }
.wf-typing-dot:nth-child(2) { opacity: 0.7; }
.wf-typing-dot:nth-child(3) { opacity: 0.45; }

/* Carousels */
.wf-carousel { display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.wf-reel { display: flex; gap: 12px; padding: 0 16px 6px; }
.wf-carousel-cards .wf-reel { padding-right: 0; }
.wf-slide-card { flex: none; width: calc(100% - 44px); height: 174px; display: flex; flex-direction: column; justify-content: space-between; padding: 16px 18px; color: var(--wf-ink); background: var(--wf-fill2); border: var(--wf-border); border-radius: var(--wf-radius); }
.wf-slide-card.is-accent { color: var(--wf-on-accent); background: var(--wf-accent); box-shadow: var(--wf-shadow2); }
.wf-banner { position: relative; flex: none; width: calc(100% - 72px); min-width: 220px; height: 150px; overflow: hidden; background: var(--wf-fill2); border: var(--wf-border); border-radius: var(--wf-radius); box-shadow: var(--wf-shadow); }
.wf-banner-caption { position: absolute; left: 10px; bottom: 10px; display: flex; flex-direction: column; padding: 6px 10px; background: var(--wf-paper); border: var(--wf-border); border-radius: var(--wf-radius-sm); }
.wf-dots { display: flex; align-items: center; justify-content: center; gap: 6px; }
.wf-dot { width: 7px; height: 7px; background: var(--wf-fill2); border: 1px solid var(--wf-line); border-radius: var(--wf-pill); }
.wf-dot.is-on { width: 18px; background: var(--wf-accent); }
.wf-stories { display: flex; gap: 14px; padding: 0 16px; overflow: hidden; }
.wf-story { flex: none; width: 70px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wf-story-me { position: relative; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; color: var(--wf-muted); background: var(--wf-fill2); border: var(--wf-border); border-radius: var(--wf-round); }
.wf-story-plus { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; color: var(--wf-on-accent); background: var(--wf-accent); border: 2px solid var(--wf-paper); border-radius: var(--wf-round); }
.wf-story-ring { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; padding: 3px; border: 2.5px solid var(--wf-accent); border-radius: var(--wf-round); }
.wf-story-ring.is-seen { border-style: dashed; }

/* Spinner */
.wf-spinner-block { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 0; }
.wf-spinner { width: 30px; height: 30px; border: 3px solid var(--wf-fill2); border-top-color: var(--wf-accent); border-radius: 50%; }

/* Overlays (sheets, dialogs, menus and toasts belong to their screen) */
.wf-layer { position: absolute; inset: 0; z-index: 10; }
.wf-scrim { position: absolute; inset: 0; background: var(--wf-scrim); }
.wf-sheet-box { position: absolute; display: flex; flex-direction: column; gap: 14px; }
.wf-sheet-box > .wf-part, .wf-sheet-box > .wf-box { max-width: none; }
.wf-kind-sheet {
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 88%;
  overflow: hidden;
  padding: 10px 4px calc(var(--wf-safe-bottom) + 16px);
  background: var(--wf-paper);
  border-top: var(--wf-border);
  border-radius: var(--wf-sheet-r);
  box-shadow: var(--wf-shadow2);
}
.wf-kind-dialog {
  left: 28px;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  gap: 12px;
  padding: 20px 4px 16px;
  background: var(--wf-paper);
  border: var(--wf-border);
  border-radius: var(--wf-radius);
  box-shadow: var(--wf-shadow2);
}
.wf-layer-menu .wf-sheet-box { left: 0; right: 0; top: calc(var(--wf-safe-top) + 96px); gap: 10px; }
.wf-layer-menu .wf-sheet-box > .wf-part { padding: 0 16px; }
.wf-layer-toast .wf-sheet-box { left: 0; right: 0; bottom: calc(var(--wf-safe-bottom) + 84px); }
.wf-kind-dialog .wf-btn { height: 46px; }

/* Home indicator */
.wf-home { position: absolute; left: 50%; z-index: 20; pointer-events: none; background: var(--wf-ink); }
.wf-home-ios { bottom: 8px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; opacity: 0.85; }
.wf-home-android { bottom: 7px; width: 108px; height: 4px; margin-left: -54px; border-radius: 2px; opacity: 0.7; }

/* Real words or scribbles: the text stays in place (so sizes hold) and becomes a wavy line
   in its own colour. The renderer wraps the glyphs in .wf-w only in Scribbles mode. */
.wf-scribbles .wf-t {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: currentColor;
  text-decoration-thickness: 0.14em;
  text-underline-offset: -0.42em;
  text-decoration-skip-ink: none;
}
.wf-scribbles .wf-w { -webkit-text-fill-color: transparent; }
.wf-scribbles .wf-key .wf-t { text-decoration-line: none; }
.wf-scribbles .wf-key .wf-w { -webkit-text-fill-color: currentColor; }

/* Things that move by themselves (also in the builder, unless paused) */
@keyframes wf-slide3 {
  0%, 26% { transform: translateX(0); }
  33%, 59% { transform: translateX(var(--wf-step)); }
  66%, 92% { transform: translateX(calc(var(--wf-step) * 2)); }
  100% { transform: translateX(0); }
}
@keyframes wf-dot3 {
  0%, 30% { width: 18px; background: var(--wf-accent); }
  33%, 97% { width: 7px; background: var(--wf-fill2); }
  100% { width: 18px; background: var(--wf-accent); }
}
@keyframes wf-spin { to { transform: rotate(360deg); } }
@keyframes wf-bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }
@keyframes wf-fill { 0% { width: 0; } 70%, 100% { width: var(--to); } }
.wf-carousel-images { --wf-step: calc(-100% + 92px); }
.wf-carousel-cards { --wf-step: calc(-100% + 48px); }
.wf-anim .wf-reel { animation: wf-slide3 9s ease-in-out infinite; }
.wf-anim .wf-dot { animation: wf-dot3 9s ease-in-out infinite; }
.wf-anim .wf-dot:nth-child(1) { animation-delay: 0s; }
.wf-anim .wf-dot:nth-child(2) { animation-delay: -6s; }
.wf-anim .wf-dot:nth-child(3) { animation-delay: -3s; }
.wf-anim .wf-dot:nth-child(n+4) { animation: none; }
.wf-moves .wf-spinner { animation: wf-spin 0.9s linear infinite; }
.wf-moves .wf-typing-dot { animation: wf-bounce 1.2s ease-in-out infinite; }
.wf-moves .wf-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.wf-moves .wf-typing-dot:nth-child(3) { animation-delay: 0.3s; }
.wf-moves .wf-progress-fill { animation: wf-fill 3.2s ease-out infinite; }
.wf-still *, .wf-still *::before, .wf-still *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .wf *, .wf *::before, .wf *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}