/* Zoono core components. Requires dist/tokens.css.
   Logical properties throughout (inline-start/end), so every component
   mirrors correctly under dir="rtl". */

:root, [dir="ltr"] { --z-flip: 1; }
[dir="rtl"] { --z-flip: -1; }

/* ---------- Text ---------- */
.z-display-xl { font: var(--z-type-display-xl); letter-spacing: var(--z-tracking-display-xl); }
.z-display-lg { font: var(--z-type-display-lg); letter-spacing: var(--z-tracking-display-lg); }
.z-display { font: var(--z-type-display); letter-spacing: var(--z-tracking-display); }
.z-title-1 { font: var(--z-type-title-1); letter-spacing: var(--z-tracking-title-1); }
.z-title-2 { font: var(--z-type-title-2); letter-spacing: var(--z-tracking-title-2); }
.z-title-3 { font: var(--z-type-title-3); }
.z-body-lg { font: var(--z-type-body-lg); }
.z-body { font: var(--z-type-body); }
.z-label { font: var(--z-type-label); }
.z-caption { font: var(--z-type-caption); }
.z-muted { color: var(--z-text-secondary); }
.z-display-xl, .z-display-lg, .z-display, .z-title-1, .z-title-2, .z-title-3 { margin: 0; color: var(--z-text-primary); }

/* ---------- Icons ---------- */
.z-icon {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.z-icon--sm { width: 16px; height: 16px; }
.z-icon--lg { width: 24px; height: 24px; }
/* Arrows and chevrons point the other way in Arabic. */
.z-icon--dir { transform: scaleX(var(--z-flip)); }

/* ---------- Buttons ---------- */
.z-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--z-space-2);
  min-height: var(--z-size-control-md); padding: 0 var(--z-space-5);
  border: 1.5px solid transparent; border-radius: var(--z-radius-pill);
  font: var(--z-type-label); font-weight: 700; text-decoration: none; white-space: nowrap;
  cursor: pointer; user-select: none;
  transition: background-color var(--z-duration-fast) var(--z-ease), border-color var(--z-duration-fast) var(--z-ease), transform var(--z-duration-fast) var(--z-ease);
}
.z-btn:focus-visible { outline: 3px solid var(--z-focus); outline-offset: 2px; }
.z-btn:active { transform: scale(0.97); }
.z-btn--primary { background: var(--z-brand); color: var(--z-text-on-brand); }
.z-btn--primary:hover { background: var(--z-brand-hover); }
.z-btn--secondary { background: var(--z-bg-surface); color: var(--z-text-primary); border-color: var(--z-border-strong); }
.z-btn--secondary:hover { background: var(--z-bg-sunken); }
.z-btn--ghost { background: transparent; color: var(--z-text-brand); }
.z-btn--ghost:hover { background: var(--z-brand-subtle); }
.z-btn--danger { background: var(--z-danger-fill); color: var(--z-text-on-brand); }
.z-btn--sm { min-height: var(--z-size-control-sm); padding: 0 var(--z-space-4); font-size: 13.5px; }
.z-btn--lg { min-height: var(--z-size-control-lg); padding: 0 var(--z-space-6); font-size: 16px; }
.z-btn--block { display: flex; width: 100%; }
.z-btn:disabled, .z-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.z-btn[aria-busy="true"] { cursor: progress; }

.z-spinner {
  width: 16px; height: 16px; border-radius: 50%; flex: none;
  border: 2.5px solid currentColor; border-inline-end-color: transparent;
  animation: z-spin 700ms linear infinite;
}
@keyframes z-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .z-spinner { animation-duration: 2s; } }

.z-icon-btn {
  display: inline-grid; place-items: center; flex: none;
  width: var(--z-size-touch); height: var(--z-size-touch); border-radius: 50%;
  border: 1.5px solid transparent; background: transparent; color: var(--z-text-primary); cursor: pointer;
  transition: background-color var(--z-duration-fast) var(--z-ease);
}
.z-icon-btn:hover { background: var(--z-bg-sunken); }
.z-icon-btn:focus-visible { outline: 3px solid var(--z-focus); outline-offset: 2px; }
.z-icon-btn--outline { border-color: var(--z-border); background: var(--z-bg-surface); }

/* ---------- Form fields ---------- */
.z-field { display: grid; gap: 6px; }
.z-field__label { font: var(--z-type-label); color: var(--z-text-primary); }
.z-field__hint { font: var(--z-type-caption); color: var(--z-text-secondary); }
.z-field__error { font: var(--z-type-caption); color: var(--z-danger); display: flex; gap: 6px; align-items: flex-start; }
.z-field__error .z-icon { margin-top: 1px; }

.z-input, .z-input-group {
  width: 100%; min-height: 48px;
  background: var(--z-bg-surface); color: var(--z-text-primary);
  border: 1.5px solid var(--z-border-strong); border-radius: var(--z-radius-md);
  transition: border-color var(--z-duration-fast) var(--z-ease), box-shadow var(--z-duration-fast) var(--z-ease);
}
.z-input { padding: 0 14px; font: var(--z-type-body-lg); }
textarea.z-input { padding: 12px 14px; min-height: 112px; resize: vertical; }
.z-input::placeholder, .z-input-group input::placeholder { color: var(--z-text-secondary); opacity: 1; }
.z-input:hover, .z-input-group:hover { border-color: var(--z-text-secondary); }
/* Focus: brand border thickened by a 1.5px ring, 5:1 against the surface. */
.z-input:focus, .z-input-group:focus-within { outline: none; border-color: var(--z-focus); box-shadow: 0 0 0 1.5px var(--z-focus); }
.z-input[aria-invalid="true"], .z-input-group:has([aria-invalid="true"]) { border-color: var(--z-danger); }
.z-input-group { display: flex; align-items: stretch; overflow: hidden; }
.z-input-group__addon {
  display: flex; align-items: center; gap: 6px; padding: 0 12px; color: var(--z-text-secondary);
  font: var(--z-type-body-lg);
}
.z-input-group__addon--divided { border-inline-end: 1.5px solid var(--z-border); color: var(--z-text-primary); }
.z-input-group input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: inherit; outline: none;
  padding: 0 14px 0 0; padding-inline: 4px 14px; font: var(--z-type-body-lg);
}
.z-input-group__addon--divided + input { padding-inline-start: 12px; }

/* ---------- Selection controls ---------- */
.z-control {
  appearance: none; margin: 0; flex: none; cursor: pointer;
  width: 22px; height: 22px; display: inline-grid; place-items: center;
  background: var(--z-bg-surface); border: 2px solid var(--z-border-strong); border-radius: 50%;
  transition: background-color var(--z-duration-fast) var(--z-ease), border-color var(--z-duration-fast) var(--z-ease);
}
.z-control[type="checkbox"] { border-radius: 7px; }
.z-control:checked { border-color: var(--z-brand); background: var(--z-brand); }
.z-control[type="radio"]:checked { box-shadow: inset 0 0 0 4px var(--z-bg-surface); }
.z-control[type="checkbox"]:checked {
  background: var(--z-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' stroke='white' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.z-control:focus-visible { outline: 3px solid var(--z-focus); outline-offset: 2px; }
.z-check { display: inline-flex; align-items: center; gap: 10px; font: var(--z-type-body); color: var(--z-text-primary); cursor: pointer; min-height: var(--z-size-touch); }

.z-switch {
  appearance: none; margin: 0; flex: none; cursor: pointer; position: relative;
  width: 48px; height: 28px; border-radius: var(--z-radius-pill);
  background: var(--z-border-strong); transition: background-color var(--z-duration-base) var(--z-ease);
}
.z-switch::before {
  content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
  transition: transform var(--z-duration-base) var(--z-ease);
}
.z-switch:checked { background: var(--z-brand); }
.z-switch:checked::before { transform: translateX(calc(20px * var(--z-flip))); }
.z-switch:focus-visible { outline: 3px solid var(--z-focus); outline-offset: 2px; }

/* Choice card: one answer to a request question. The selected card gets the
   logo's burst on its top corner. This is the one expressive moment in the kit. */
.z-choices { display: grid; gap: var(--z-space-2); }
.z-choice {
  position: relative; display: flex; align-items: center; gap: var(--z-space-3);
  min-height: 56px; padding: 14px 16px;
  background: var(--z-bg-surface); color: var(--z-text-primary);
  border: 1.5px solid var(--z-border); border-radius: var(--z-radius-lg);
  font: var(--z-type-body-lg); cursor: pointer;
  transition: border-color var(--z-duration-fast) var(--z-ease), background-color var(--z-duration-fast) var(--z-ease);
}
.z-choice:hover { border-color: var(--z-border-strong); }
.z-choice:has(.z-control:checked) { border-color: var(--z-brand); background: var(--z-brand-subtle); }
.z-choice:has(.z-control:focus-visible) { outline: 3px solid var(--z-focus); outline-offset: 2px; }
.z-choice .z-control:focus-visible { outline: none; }
.z-choice__text { flex: 1; min-width: 0; }
.z-choice__hint { display: block; font: var(--z-type-caption); color: var(--z-text-secondary); margin-top: 2px; }
.z-choice::after {
  content: ""; position: absolute; top: -18px; inset-inline-end: -13px; width: 36px; height: 36px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cg stroke='%23FF6B3D' stroke-width='4.2' stroke-linecap='round'%3E%3Cpath d='M6 15 2.5 8'/%3E%3Cpath d='M13.5 11 15 3'/%3E%3Cpath d='M19 18.5l7.5-3.5'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0; transform: scaleX(var(--z-flip)) scale(0.3) rotate(-25deg); transform-origin: 30% 70%;
  transition: opacity var(--z-duration-fast) var(--z-ease), transform 260ms cubic-bezier(0.3, 1.6, 0.5, 1);
  pointer-events: none;
}
.z-choice:has(.z-control:checked)::after { opacity: 1; transform: scaleX(var(--z-flip)); }
@media (prefers-reduced-motion: reduce) { .z-choice::after { transition: none; } }

/* Chips: filters and quick multi-select. */
.z-chips { display: flex; flex-wrap: wrap; gap: var(--z-space-2); }
.z-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px;
  background: var(--z-bg-surface); color: var(--z-text-primary);
  border: 1.5px solid var(--z-border-strong); border-radius: var(--z-radius-pill);
  font: var(--z-type-label); cursor: pointer; white-space: nowrap;
  transition: background-color var(--z-duration-fast) var(--z-ease), border-color var(--z-duration-fast) var(--z-ease);
}
.z-chip:hover { background: var(--z-bg-sunken); }
.z-chip:focus-visible { outline: 3px solid var(--z-focus); outline-offset: 2px; }
.z-chip .z-chip__check { display: none; }
.z-chip[aria-pressed="true"] { background: var(--z-brand-subtle); border-color: var(--z-brand); }
.z-chip[aria-pressed="true"] .z-chip__check { display: block; color: var(--z-text-brand); }

.z-segmented { display: inline-flex; gap: 2px; padding: 4px; background: var(--z-bg-sunken); border-radius: var(--z-radius-pill); }
.z-segmented button {
  min-height: 36px; padding: 0 16px; border: 0; border-radius: var(--z-radius-pill); cursor: pointer;
  background: transparent; color: var(--z-text-secondary); font: var(--z-type-label);
}
.z-segmented button[aria-pressed="true"] { background: var(--z-bg-surface); color: var(--z-text-primary); box-shadow: 0 1px 2px rgb(26 26 26 / 0.12); }
.z-segmented button:focus-visible { outline: 3px solid var(--z-focus); outline-offset: 1px; }

/* ---------- Badges ---------- */
.z-badge {
  display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 2px 10px;
  border-radius: var(--z-radius-pill); font: var(--z-type-caption); font-weight: 600; white-space: nowrap;
  background: var(--z-bg-sunken); color: var(--z-text-primary);
}
.z-badge .z-icon { width: 14px; height: 14px; stroke-width: 2.4; }
.z-badge--brand { background: var(--z-brand-subtle); color: var(--z-text-brand); }
.z-badge--success { background: var(--z-success-subtle); color: var(--z-success); }
.z-badge--warning { background: var(--z-warning-subtle); color: var(--z-warning-text); }
.z-badge--danger { background: var(--z-danger-subtle); color: var(--z-danger); }
.z-badge--orange { background: var(--z-accent-orange); color: var(--z-text-on-accent); }
.z-badge--pink { background: var(--z-accent-pink); color: var(--z-text-on-accent); }
.z-badge--yellow { background: var(--z-accent-yellow); color: var(--z-text-on-accent); }
.z-badge--green { background: var(--z-accent-green); color: var(--z-text-on-accent); }

/* ---------- Avatars and ratings ---------- */
/* Rounded square, echoing the Z app icon on the board. */
.z-avatar {
  --z-avatar-size: 40px;
  width: var(--z-avatar-size); height: var(--z-avatar-size); flex: none;
  display: inline-grid; place-items: center; overflow: hidden;
  border-radius: calc(var(--z-avatar-size) * 0.32);
  background: var(--z-accent-orange); color: var(--z-text-on-accent);
  font-family: var(--z-font); font-weight: 800; font-size: calc(var(--z-avatar-size) * 0.42); line-height: 1;
}
.z-avatar img { width: 100%; height: 100%; object-fit: cover; }
.z-avatar--sm { --z-avatar-size: 32px; }
.z-avatar--lg { --z-avatar-size: 56px; }
.z-avatar--xl { --z-avatar-size: 80px; }
.z-avatar--pink { background: var(--z-accent-pink); }
.z-avatar--yellow { background: var(--z-accent-yellow); }
.z-avatar--green { background: var(--z-accent-green); }
.z-avatar-stack { display: inline-flex; }
.z-avatar-stack > .z-avatar { box-shadow: 0 0 0 2.5px var(--z-bg-surface); }
.z-avatar-stack > .z-avatar + .z-avatar { margin-inline-start: -10px; }

.z-rating { display: inline-flex; align-items: center; gap: 4px; font: var(--z-type-label); color: var(--z-text-primary); }
.z-rating__count { font-weight: 400; color: var(--z-text-secondary); }
/* Set on the svg so it also reaches shapes drawn through <use>. */
.z-star { width: 16px; height: 16px; flex: none; fill: var(--z-accent-yellow); stroke: var(--z-text-on-accent); stroke-width: 1.4; stroke-linejoin: round; }
.z-star--empty { fill: none; stroke: var(--z-border-strong); }
.z-stars { display: inline-flex; gap: 2px; }

/* ---------- Messages ---------- */
.z-alert {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px;
  border-radius: var(--z-radius-md); font: var(--z-type-body);
}
.z-alert .z-icon { margin-top: 1px; }
.z-alert__title { display: block; font-weight: 700; }
.z-alert--info { background: var(--z-brand-subtle); color: var(--z-text-brand); }
.z-alert--success { background: var(--z-success-subtle); color: var(--z-success); }
.z-alert--warning { background: var(--z-warning-subtle); color: var(--z-warning-text); }
.z-alert--danger { background: var(--z-danger-subtle); color: var(--z-danger); }

/* Toast: inverted colors, so it reads as temporary and sits above the page. */
.z-toast {
  --z-toast-action: var(--z-purple-300);
  display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; padding-inline: 16px 8px;
  background: var(--z-text-primary); color: var(--z-bg-page);
  border-radius: var(--z-radius-lg); box-shadow: var(--z-shadow-raised); font: var(--z-type-body);
}
.z-toast > span { flex: 1; }
.z-toast .z-btn { color: var(--z-toast-action); background: transparent; min-height: 36px; padding: 0 12px; }
.z-toast .z-btn:hover { background: rgb(255 255 255 / 0.1); }
[data-theme="dark"] .z-toast { --z-toast-action: var(--z-purple-600); }
[data-theme="dark"] .z-toast .z-btn:hover { background: rgb(0 0 0 / 0.06); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .z-toast { --z-toast-action: var(--z-purple-600); }
}

/* ---------- Surfaces ---------- */
/* Cards are flat white on Sand; only things that float (sheets, toasts, dialogs) get a shadow. */
.z-card { background: var(--z-bg-surface); color: var(--z-text-primary); border-radius: var(--z-radius-lg); padding: var(--z-space-4); }
a.z-card, button.z-card { display: block; text-align: start; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; font: inherit; width: 100%; }
a.z-card:hover, button.z-card:hover { border-color: var(--z-border-strong); }
a.z-card:focus-visible, button.z-card:focus-visible { outline: 3px solid var(--z-focus); outline-offset: 2px; }

.z-list { background: var(--z-bg-surface); border-radius: var(--z-radius-lg); overflow: hidden; margin: 0; padding: 0; list-style: none; }
.z-list__item {
  display: flex; align-items: center; gap: var(--z-space-3); width: 100%;
  min-height: 56px; padding: 12px 16px; border: 0; background: transparent; text-align: start;
  color: var(--z-text-primary); font: var(--z-type-body-lg); text-decoration: none;
}
.z-list > li + li .z-list__item { border-top: 1px solid var(--z-border); }
a.z-list__item, button.z-list__item { cursor: pointer; }
a.z-list__item:hover, button.z-list__item:hover { background: var(--z-bg-page); }
a.z-list__item:focus-visible, button.z-list__item:focus-visible { outline: 3px solid var(--z-focus); outline-offset: -3px; }
.z-list__text { flex: 1; min-width: 0; }
.z-list__sub { display: block; font: var(--z-type-caption); color: var(--z-text-secondary); }
.z-list__end { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; color: var(--z-text-secondary); font: var(--z-type-body); }

/* ---------- Progress ---------- */
.z-progress { height: 6px; background: var(--z-bg-sunken); border-radius: var(--z-radius-pill); overflow: hidden; }
.z-progress__bar { height: 100%; width: var(--z-progress, 0%); background: var(--z-brand); border-radius: var(--z-radius-pill); transition: width var(--z-duration-base) var(--z-ease); }

/* ---------- App chrome ---------- */
.z-topbar { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; min-height: 56px; padding: 4px 8px; }
.z-topbar__title { font: var(--z-type-title-3); text-align: center; color: var(--z-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.z-tabbar {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  background: var(--z-bg-surface); border-top: 1px solid var(--z-border);
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
}
.z-tabbar a {
  display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 52px;
  color: var(--z-text-secondary); text-decoration: none; font: var(--z-type-caption); font-size: 11.5px;
  border-radius: var(--z-radius-md);
}
.z-tabbar a[aria-current="page"] { color: var(--z-text-brand); font-weight: 700; }
.z-tabbar a[aria-current="page"] .z-icon { stroke-width: 2.4; }
.z-tabbar a:focus-visible { outline: 3px solid var(--z-focus); outline-offset: -3px; }

/* ---------- Sheets and dialogs ---------- */
.z-scrim { position: absolute; inset: 0; background: rgb(26 26 26 / 0.5); }
.z-sheet {
  position: relative; background: var(--z-bg-surface); color: var(--z-text-primary);
  border-radius: var(--z-radius-xl) var(--z-radius-xl) 0 0; box-shadow: var(--z-shadow-raised);
  padding: 8px 20px calc(20px + env(safe-area-inset-bottom));
}
.z-sheet__handle { width: 40px; height: 5px; border-radius: var(--z-radius-pill); background: var(--z-border-strong); margin: 0 auto 16px; }
.z-dialog {
  position: relative; background: var(--z-bg-surface); color: var(--z-text-primary);
  border-radius: var(--z-radius-xl); box-shadow: var(--z-shadow-raised); padding: 24px; max-width: 340px;
}
.z-actions { display: flex; gap: var(--z-space-2); margin-top: var(--z-space-5); }
.z-actions > .z-btn { flex: 1; }

/* ---------- Zoonies, spark and smile (step 5) ----------
   Markup and shapes come from dist/zoonies.js (zoonieSvg, SPARK_SVG, SMILE_SVG).
   Product colors are the four brights only (2.2). Motion answers a tap or good
   news, never loops in the product, one moving Zoonie per screen (5.5). */
.z-zoonie { display: block; width: 64px; height: 64px; flex: none; }
.z-zoonie--orange { fill: var(--z-accent-orange); }
.z-zoonie--pink { fill: var(--z-accent-pink); }
.z-zoonie--yellow { fill: var(--z-accent-yellow); }
.z-zoonie--green { fill: var(--z-accent-green); }

/* Pop: add when good news arrives ("Booked!"). */
.z-pop { animation: z-pop 460ms cubic-bezier(0.34, 1.56, 0.64, 1) both; transform-origin: 50% 60%; }
@keyframes z-pop { from { transform: scale(0); } to { transform: scale(1); } }

/* Drift: slow float. Website heroes and marketing only, never in the product. */
.z-drift { animation: z-drift 6s ease-in-out infinite alternate; }
@keyframes z-drift { from { transform: translate(0, 0) rotate(0); } to { transform: translate(8px, -10px) rotate(6deg); } }

/* Spark: the logo's three lines. Add .z-spark--draw to draw them in. */
.z-spark { display: block; width: 24px; height: 24px; flex: none; transform: scaleX(var(--z-flip)); }
.z-spark__line { stroke-dasharray: 30; }
.z-spark--draw .z-spark__line { animation: z-draw 360ms ease-out both; }
.z-spark--draw .z-spark__line:nth-child(2) { animation-delay: 80ms; }
.z-spark--draw .z-spark__line:nth-child(3) { animation-delay: 160ms; }
@keyframes z-draw { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }

/* Smile: the hand-drawn mark next to words (5.3, 5.4). Good news, empty
   states, onboarding and marketing only; never on errors or payments. */
.z-smile { display: inline-block; width: 1.2em; height: 1.2em; color: var(--z-accent-orange); vertical-align: -0.2em; }

@media (prefers-reduced-motion: reduce) {
  .z-pop, .z-drift, .z-spark--draw .z-spark__line { animation: none; }
}