/* Shared components. Structure and states only; every colour, face, radius and duration comes from tokens.
   An option changes their look with tokens first and option.css second. */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs);
  min-height: var(--button-h); padding: 0.75rem 1.5rem;
  border: var(--border-w) solid transparent; border-radius: var(--radius-button);
  font-family: var(--font-text); font-size: var(--text-size); font-weight: 700; line-height: 1.1; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.btn--primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); border-color: transparent; text-decoration: underline; text-underline-offset: 0.2em; padding-inline: var(--space-2xs); }
.btn:hover { transform: translateY(-1px); }
.btn--primary:hover { background: color-mix(in srgb, var(--primary) 88%, var(--ink)); }
.btn--secondary:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; opacity: 0.55; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"]::before {
  content: ""; width: 1em; height: 1em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn--block { width: 100%; }

/* ---------- Badges: always text plus an icon, never colour alone ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 0.3em;
  padding: 0.2em 0.55em 0.2em 0.45em; border-radius: var(--radius-s);
  font-family: var(--font-text); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.04em; line-height: 1.2; text-transform: uppercase;
  white-space: nowrap;
}
.badge svg { width: 1em; height: 1em; flex: none; }
.badge--booked { background: var(--success); color: var(--on-success); }
.badge--urgent { background: var(--urgent); color: var(--on-urgent); }
.badge--quote { background: var(--info); color: var(--on-info); }

/* ---------- Call example card ---------- */
.call-card { display: grid; gap: var(--space-xs); padding: var(--space-m); background: var(--surface); border-radius: var(--radius-m); min-width: 0; }
.call-card__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-xs); }
.call-card__time { margin-left: auto; color: var(--muted); font-size: var(--step-n1); font-variant-numeric: tabular-nums; }
.call-card__who { font-weight: 700; font-size: var(--step-1); line-height: 1.2; }
.call-card__job { max-width: none; }
.call-card__meta { display: grid; gap: 0.15rem; color: var(--muted); font-size: var(--step-n1); }
.call-card__booked { font-weight: 700; }

/* ---------- Plan card ---------- */
.plan-card { display: grid; gap: var(--space-m); align-content: start; padding: var(--space-l); background: var(--surface); border-radius: var(--radius-m); min-width: 0; }
.plan-card__name { font-size: var(--step-2); }
.plan-card__who { color: var(--muted); margin-top: calc(var(--space-xs) * -1); }
.plan-card__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2xs); }
.plan-card__amount { font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch); font-size: var(--step-4); line-height: 0.9; letter-spacing: var(--display-tracking); font-variant-numeric: tabular-nums lining-nums; }
.plan-card__per { color: var(--muted); font-size: var(--step-n1); }
.plan-card__rows { display: grid; gap: var(--space-2xs); padding: 0; margin: 0; list-style: none; }
.plan-card__rows li { display: flex; justify-content: space-between; gap: var(--space-s); }
.plan-card__rows li > :last-child { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.plan-card__trial { font-size: var(--step-n1); }

/* ---------- Trust line ---------- */
.trust { display: flex; flex-wrap: wrap; gap: var(--space-3xs) var(--space-s); color: var(--muted); font-size: var(--step-n1); padding: 0; list-style: none; }
.trust li { display: inline-flex; align-items: center; gap: 0.4em; }
.trust svg { width: 1.05em; height: 1.05em; color: var(--success); flex: none; }

/* ---------- Phone mock-up (flat, no gradients). The screen is always dark, like a real lock screen. ---------- */
.phone { width: min(100%, 18rem); aspect-ratio: 9 / 19; container-type: inline-size; justify-self: center; }
.phone__frame { height: 100%; padding: 2.4cqi; border-radius: 15cqi; background: #2a2b2e; }
.phone__screen {
  position: relative; height: 100%; border-radius: 12.6cqi; overflow: hidden; display: flex; flex-direction: column;
  padding: 14cqi 4.5cqi 8cqi; background: #111214; color: #f2f2f0;
}
.phone__island { position: absolute; top: 3.6cqi; left: 50%; translate: -50% 0; width: 30%; height: 8.5cqi; border-radius: 99px; background: #000; }
.phone__clock { text-align: center; font-size: 21cqi; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; font-family: system-ui, -apple-system, sans-serif; }
.phone__date { text-align: center; font-size: 4.6cqi; color: #d6d6d2; font-family: system-ui, -apple-system, sans-serif; }
.phone__notes { margin-top: auto; display: grid; gap: 2.6cqi; }
.note { padding: 3.4cqi 3.8cqi; border-radius: 5.5cqi; background: #2b2c30; font-size: max(4.4cqi, 0.75rem); line-height: 1.35; font-family: system-ui, -apple-system, sans-serif; }
.note__head { display: flex; align-items: center; gap: 2cqi; margin-bottom: 1cqi; font-size: max(3.8cqi, 0.6875rem); color: #c4c4bf; }
.note__time { margin-left: auto; }
.note__icon { width: 6cqi; height: 6cqi; border-radius: 1.6cqi; display: grid; place-items: center; flex: none; font-weight: 800; font-size: 3.6cqi; }
.note__icon--phone { background: #2fb350; color: #fff; }
.note__icon--k { background: var(--note-icon, #ffd60a); color: var(--note-icon-ink, #15171a); }
.note__title { font-weight: 700; }
.note .badge { font-size: max(3.2cqi, 0.625rem); margin-right: 0.35em; vertical-align: 0.08em; }

/* ---------- Email frame (product UI: may have lines, see data-ui) ---------- */
.mail { display: grid; background: var(--surface); border-radius: var(--radius-l); overflow: hidden; min-width: 0; font-family: var(--font-text); }
.mail__bar { display: grid; gap: 0.15rem; padding: var(--space-s) var(--space-m); background: var(--sunken); font-size: var(--step-n1); }
.mail__subject { font-weight: 700; font-size: var(--text-size); color: var(--ink); }
.mail__body { display: grid; gap: var(--space-s); padding: var(--space-m); }
.mail__rows { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2xs) var(--space-m); margin: 0; }
.mail__rows dt { color: var(--muted); }
.mail__rows dd { font-weight: 600; min-width: 0; }

/* ---------- Audio player and transcript ---------- */
.player { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-s); min-width: 0; }
.player__play {
  width: 3.5rem; height: 3.5rem; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: var(--primary); color: var(--on-primary); cursor: pointer;
  transition: transform var(--dur-fast) var(--ease);
}
.player__play:hover { transform: scale(1.04); }
.player__play svg { width: 1.4rem; height: 1.4rem; }
.player__play .icon-pause, .player__play[aria-pressed="true"] .icon-play { display: none; }
.player__play[aria-pressed="true"] .icon-pause { display: block; }
.player__label { display: grid; gap: 0.1rem; min-width: 0; }
.player__title { font-weight: 700; }
.player__meta { color: var(--muted); font-size: var(--step-n1); }
.wave { display: flex; align-items: center; gap: 3px; height: 2rem; }
.wave span { flex: 1; min-width: 2px; max-width: 5px; border-radius: 99px; background: var(--wave, currentColor); height: 40%; transform-origin: center; }
/* A fixed, speech-like profile (no inline styles under the CSP). */
.wave span:nth-child(9n+1) { height: 30%; } .wave span:nth-child(9n+2) { height: 55%; } .wave span:nth-child(9n+3) { height: 85%; }
.wave span:nth-child(9n+4) { height: 60%; } .wave span:nth-child(9n+5) { height: 100%; } .wave span:nth-child(9n+6) { height: 70%; }
.wave span:nth-child(9n+7) { height: 45%; } .wave span:nth-child(9n+8) { height: 75%; } .wave span:nth-child(9n+9) { height: 35%; }
@media (prefers-reduced-motion: no-preference) {
  .is-playing .wave span { animation: talk 900ms var(--ease) infinite alternate; }
  .is-playing .wave span:nth-child(3n+2) { animation-delay: -300ms; } .is-playing .wave span:nth-child(3n) { animation-delay: -600ms; }
}
@keyframes talk { from { transform: scaleY(0.45); } to { transform: scaleY(1); } }

.convo { display: grid; gap: var(--space-s); padding: 0; margin: 0; list-style: none; }
.convo__line { display: grid; gap: 0.15rem; max-width: 34rem; }
.convo__who { font-size: var(--step-n1); font-weight: 700; color: var(--muted); }
.convo__said { max-width: none; }
.convo__line--kumara .convo__who { color: var(--ink); }

/* ---------- Missed-calls calculator ---------- */
.calc { display: grid; gap: var(--space-m); }
.calc__inputs { display: grid; gap: var(--space-s); }
.calc__field { display: grid; gap: var(--space-2xs); }
.calc__field label { font-weight: 700; }
.stepper { display: grid; grid-template-columns: var(--target) minmax(0, 1fr) var(--target); align-items: stretch; border: var(--border-w) solid var(--control); border-radius: var(--radius-s); }
.stepper button { border: 0; background: transparent; font-size: 1.5rem; font-weight: 700; cursor: pointer; min-height: var(--target); }
.stepper input { width: 100%; min-width: 0; border: 0; background: transparent; text-align: center; font-weight: 700; font-size: var(--step-1); font-variant-numeric: tabular-nums; appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.calc__result { font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch); font-size: var(--step-4); line-height: 0.9; font-variant-numeric: tabular-nums lining-nums; }
.calc__note { color: var(--muted); font-size: var(--step-n1); }

/* ---------- Preview indicator (every preview page) ---------- */
.preview-flag {
  position: fixed; z-index: 90; right: max(0.75rem, env(safe-area-inset-right, 0px)); bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
  padding: 0.4rem 0.75rem; border-radius: 99px; background: #111; color: #fff; font: 700 0.8125rem/1.2 system-ui, sans-serif;
  box-shadow: var(--shadow-float); text-decoration: none;
}

/* ---------- Logo SVGs: classes map to tokens; an option may set --logo-* to tune its mark per mode ---------- */
.lg-ink { fill: var(--logo-ink, var(--ink)); }
.lg-paper { fill: var(--logo-paper, var(--bg)); }
.lg-primary { fill: var(--logo-primary, var(--primary)); }
.lg-primary-stroke { stroke: var(--logo-primary, var(--primary)); }
.lg-on-primary { fill: var(--logo-on-primary, var(--on-primary)); }
.lg-on-primary-stroke { stroke: var(--logo-on-primary, var(--on-primary)); }
.lg-accent { fill: var(--logo-accent, var(--accent)); }
.lg-muted { fill: var(--muted); }
/* The current logo (option A, src/assets/logo.svg): KŪMARA follows the text colour, tape and AI stay hi-vis. */
.logo-current .logo-tape { fill: var(--tape); }

/* ---------- Hero. A container (the page section or a moodboard frame); option.css changes its composition. ---------- */
.hero-wrap { container: hero / inline-size; }
.hero { display: grid; gap: var(--space-l); padding: var(--space-l) var(--space-m); align-items: center; }
.hero__copy { display: grid; gap: var(--space-m); justify-items: start; min-width: 0; }
.hero__title { font-size: clamp(2rem, 10cqi, 5rem); }
.hero__lede { font-size: var(--step-1); line-height: 1.45; max-width: 36ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.hero__media { margin: 0; display: grid; gap: var(--space-s); justify-items: center; min-width: 0; }
@container hero (min-width: 50rem) {
  .hero { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-xl); padding: var(--space-2xl) var(--space-xl); }
  .hero__title { font-size: clamp(2.75rem, 4.6cqi, 5rem); }
}
@container hero (max-width: 30rem) {
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__title { font-size: clamp(2rem, 10cqi, 2.75rem); }
}

/* ---------- Pieces used by several heroes ---------- */
.annotations { display: grid; gap: var(--space-2xs); padding: 0; list-style: none; font-size: var(--step-n1); justify-self: stretch; }
.annotations li { display: flex; gap: var(--space-xs); align-items: baseline; }
.annotations li::before { content: ""; flex: none; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--primary); translate: 0 0.1em; }
.photo-slot { display: grid; place-items: end start; aspect-ratio: 4 / 3; width: 100%; padding: var(--space-s); background: var(--sunken); color: var(--muted); font-size: var(--step-n1); border-radius: var(--radius-m); }
.calc__label { font-weight: 700; }
.calc__per { font-size: 0.4em; letter-spacing: 0; white-space: nowrap; }
.calc__vs { font-size: var(--step-n1); }

/* ---------- Toast ---------- */
.toast { position: fixed; z-index: 95; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom, 0px)); translate: -50% 0; max-width: min(28rem, calc(100% - 2rem));
  padding: var(--space-s) var(--space-m); background: var(--ink); color: var(--bg); border-radius: var(--radius-m); box-shadow: var(--shadow-float); font-size: var(--step-n1); }
@media (prefers-reduced-motion: no-preference) { .toast { animation: rise var(--dur-base) var(--ease) both; } }