/* Reusable components. Every component here is shown on /styleguide. */

/* ============ Buttons ============ */
.btn {
  --btn-bg: var(--color-surface);
  --btn-fg: var(--color-text);
  --btn-border: var(--color-border-strong);
  --btn-bg-hover: var(--color-surface-sunken);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.5rem;
  padding: 0 var(--space-4);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  box-shadow: var(--shadow-xs);
  transition: background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.btn:hover {
  background: var(--btn-bg-hover);
  color: var(--btn-fg);
}

.btn:active { transform: translateY(1px); }

.btn:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  pointer-events: none;
  box-shadow: none;
}

.btn-primary {
  --btn-bg: var(--color-accent);
  --btn-fg: var(--color-on-accent);
  --btn-border: transparent;
  --btn-bg-hover: var(--color-accent-hover);
  box-shadow: var(--shadow-accent);
}

.btn-secondary {
  --btn-bg: var(--color-accent-soft);
  --btn-fg: var(--color-accent-soft-text);
  --btn-border: transparent;
  --btn-bg-hover: color-mix(in srgb, var(--color-accent-soft) 70%, var(--color-accent) 12%);
  box-shadow: none;
}

.btn-ghost {
  --btn-bg: transparent;
  --btn-border: transparent;
  --btn-fg: var(--color-text-muted);
  box-shadow: none;
}

.btn-ghost:hover { --btn-fg: var(--color-text); }

.btn-danger {
  --btn-bg: var(--color-danger);
  --btn-fg: var(--color-text-inverse);
  --btn-border: transparent;
  --btn-bg-hover: var(--color-danger-hover);
}

.btn-danger-outline {
  --btn-fg: var(--color-danger);
  --btn-bg-hover: var(--color-danger-soft);
}

.btn-sm { min-height: 2rem; padding: 0 var(--space-3); font-size: var(--text-xs); border-radius: var(--radius-sm); }
.btn-lg { min-height: 3rem; padding: 0 var(--space-6); font-size: var(--text-base); border-radius: var(--radius-lg); }
.btn-xl { min-height: 3.75rem; padding: 0 var(--space-8); font-size: var(--text-lg); border-radius: var(--radius-lg); }
/* Full-width buttons may wrap: long labels (German, Polish…) must not push the page wider than the screen. */
.btn-block { width: 100%; white-space: normal; text-align: center; }

.btn-icon {
  padding: 0;
  width: 2.5rem;
  min-height: 2.5rem;
}

.btn-icon.btn-sm { width: 2rem; min-height: 2rem; }

/* Loading state: <button class="btn" aria-busy="true"> */
.btn[aria-busy="true"] {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  width: 1.1em;
  height: 1.1em;
  border: 2px solid var(--btn-fg);
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ============ Forms ============ */
.field {
  display: grid;
  gap: var(--space-1-5);
}

.field + .field { margin-top: var(--space-5); }

.label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.label .optional {
  font-weight: var(--weight-regular);
  color: var(--color-text-subtle);
}

.hint {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

.error-text {
  font-size: var(--text-xs);
  color: var(--color-danger);
  font-weight: var(--weight-medium);
}

.input,
.textarea,
.select {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-base); /* ≥16px avoids iOS zoom */
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.input::placeholder,
.textarea::placeholder { color: var(--color-text-subtle); }

.input:hover,
.textarea:hover,
.select:hover { border-color: var(--color-text-subtle); }

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--color-focus);
  box-shadow: var(--ring-focus);
}

.input[aria-invalid="true"],
.textarea[aria-invalid="true"] {
  border-color: var(--color-danger);
}

.textarea {
  min-height: 7rem;
  resize: vertical;
  line-height: var(--leading-snug);
}

.select {
  appearance: none;
  padding-inline-end: var(--space-10);
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
    linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 52%, calc(100% - 0.8rem) 52%;
  background-size: 0.35rem 0.35rem;
  background-repeat: no-repeat;
}

.input-group {
  display: flex;
  align-items: stretch;
}

.input-group .input { border-start-end-radius: 0; border-end-end-radius: 0; }
.input-group .btn { border-start-start-radius: 0; border-end-start-radius: 0; min-height: 2.75rem; }

.check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  cursor: pointer;
}

.check input[type="checkbox"],
.check input[type="radio"] {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.15rem;
  accent-color: var(--color-accent);
  flex: none;
}

/* Toggle switch: <label class="switch"><input type="checkbox" role="switch"><span>Label</span></label> */
.switch {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.switch input {
  appearance: none;
  position: relative;
  width: 2.5rem;
  height: 1.5rem;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--color-border-strong);
  transition: background var(--duration-base) var(--ease-out);
  cursor: pointer;
}

.switch input::after {
  content: "";
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: var(--gray-0);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-out);
}

.switch input:checked { background: var(--color-accent); }
.switch input:checked::after { transform: translateX(1rem); }
[dir="rtl"] .switch input:checked::after { transform: translateX(-1rem); }
.switch input:focus-visible { outline: none; box-shadow: var(--ring-focus); }

/* Choice cards: radio inputs styled as selectable cards */
.choice-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.choice {
  position: relative;
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  padding-inline-end: var(--space-10);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.choice input {
  position: absolute;
  top: var(--space-4);
  inset-inline-end: var(--space-4);
  accent-color: var(--color-accent);
  width: 1.125rem;
  height: 1.125rem;
}

.choice .choice-title { font-weight: var(--weight-semibold); display: flex; align-items: center; gap: var(--space-2); }
.choice .choice-desc { font-size: var(--text-sm); color: var(--color-text-muted); }

.choice:has(input:checked) {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
  background: color-mix(in srgb, var(--color-accent-soft) 50%, var(--color-surface));
}

.choice:has(input:focus-visible) { box-shadow: var(--ring-focus); }

/* ============ Cards ============ */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.card-body { padding: var(--space-6); }
.card-body.compact { padding: var(--space-4); }

.card-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.card-head h3 { font-size: var(--text-base); }

.card-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}

.card-link:hover {
  color: inherit;
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Feature card (marketing) */
.feature {
  padding: var(--space-6);
}

.feature-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}

.feature h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.feature p { color: var(--color-text-muted); font-size: var(--text-sm); }

/* Stat */
.stat .stat-label { font-size: var(--text-xs); color: var(--color-text-subtle); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.stat .stat-value { font-size: var(--text-2xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); }

/* ============ Badges & status ============ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 1.5rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.badge::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: currentColor;
  display: var(--badge-dot, none);
}

.badge.dot { --badge-dot: block; }
.badge-accent { background: var(--color-accent-soft); color: var(--color-accent-soft-text); border-color: transparent; }
.badge-success { background: var(--color-success-soft); color: var(--color-success); border-color: transparent; }
.badge-warning { background: var(--color-warning-soft); color: var(--color-warning); border-color: transparent; }
.badge-danger { background: var(--color-danger-soft); color: var(--color-danger); border-color: transparent; }

.badge-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-danger);
  box-shadow: 0 0 0 2px var(--color-surface);
}

.count {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.6875rem;
  font-weight: var(--weight-bold);
}

/* ============ Alerts ============ */
.alert {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: var(--text-sm);
}

.alert .icon { margin-top: 0.1rem; }
.grid > .alert { align-self: start; }
.alert strong { display: block; margin-bottom: var(--space-0-5); }
.alert-info { background: var(--color-accent-soft); border-color: transparent; color: var(--color-accent-soft-text); }
.alert-success { background: var(--color-success-soft); border-color: transparent; color: var(--color-success); }
.alert-warning { background: var(--color-warning-soft); border-color: transparent; color: var(--color-warning); }
.alert-danger { background: var(--color-danger-soft); border-color: transparent; color: var(--color-danger); }
.alert p { color: var(--color-text); }

/* ============ Tables ============ */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.table th,
.table td {
  padding: var(--space-3) var(--space-4);
  text-align: start;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.table th {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  background: var(--color-bg-subtle);
}

.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--color-bg-subtle); }

/* ============ Tabs (segmented) ============ */
.tabs {
  display: inline-flex;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  max-width: 100%;
  overflow-x: auto;
}

.tabs [role="tab"] {
  border: 0;
  background: transparent;
  padding: var(--space-1-5) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.tabs [role="tab"][aria-selected="true"] {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

/* ============ Dialog ============ */
.dialog {
  width: min(32rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface-raised);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
}

.dialog::backdrop {
  background: var(--color-overlay);
  backdrop-filter: blur(2px);
}

.dialog[open] { animation: dialog-in var(--duration-slow) var(--ease-out); }

@keyframes dialog-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
}

.dialog-body { padding: var(--space-6); }
.dialog-body h2 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.dialog-body p { color: var(--color-text-muted); }

.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
}

/* ============ Alerts and confirmations (SweetAlert2) ============ */
/* The vendored stylesheet (static/vendor/sweetalert2) loads before this one,
   on first use; these rules give it our colours, type and buttons in both
   themes. Its variables are set on the container so they win over its :root. */
.swal2-container {
  --swal2-background: var(--color-surface-raised);
  --swal2-color: var(--color-text);
  --swal2-backdrop: var(--color-overlay);
  --swal2-border: 1px solid var(--color-border);
  --swal2-border-radius: var(--radius-xl);
  --swal2-width: 26rem;
  --swal2-padding: var(--space-6) var(--space-5) var(--space-5);
  --swal2-title-padding: var(--space-3) 0 0;
  --swal2-html-container-padding: var(--space-2) 0 0;
  --swal2-actions-margin: var(--space-6) 0 0;
  --swal2-outline: var(--ring-focus);
  z-index: var(--z-overlay);
  font-family: var(--font-sans);
}

.swal2-container .swal2-popup { box-shadow: var(--shadow-lg); }
.swal2-container .swal2-title { font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: var(--leading-snug); color: var(--color-text); }
.swal2-container .swal2-html-container { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-text-muted); }
.swal2-container .swal2-actions { gap: var(--space-2); width: 100%; }
.swal2-container .swal2-actions .btn { margin: 0; min-width: 7rem; }

.swal2-container .swal2-icon { margin-top: 0; }
.swal2-container .swal2-icon.swal2-warning { border-color: var(--color-warning); color: var(--color-warning); }
.swal2-container .swal2-icon.swal2-error { border-color: var(--color-danger); color: var(--color-danger); }
.swal2-container .swal2-icon.swal2-error [class^="swal2-x-mark-line"] { background-color: var(--color-danger); }
.swal2-container .swal2-icon.swal2-info,
.swal2-container .swal2-icon.swal2-question { border-color: var(--color-accent); color: var(--color-accent); }
.swal2-container .swal2-icon.swal2-success { border-color: var(--color-success); color: var(--color-success); }
.swal2-container .swal2-icon.swal2-success [class^="swal2-success-line"] { background-color: var(--color-success); }
.swal2-container .swal2-icon.swal2-success .swal2-success-ring { border-color: var(--color-success-soft); }
.swal2-container .swal2-icon.swal2-success [class^="swal2-success-circular-line"],
.swal2-container .swal2-icon.swal2-success .swal2-success-fix { background-color: var(--swal2-background); }

/* Narrow phones: buttons share the row and wrap in long-word languages. */
@media (max-width: 30rem) {
  .swal2-container .swal2-actions .btn { flex: 1 1 auto; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .swal2-container,
  .swal2-container * { animation: none !important; transition: none !important; }
}

/* ============ Toasts ============ */
.toast-region {
  position: fixed;
  z-index: var(--z-toast);
  left: 50%;
  bottom: calc(var(--tabbar-h) + var(--space-4) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: grid;
  gap: var(--space-2);
  width: min(26rem, calc(100vw - 2rem));
  pointer-events: none;
}

@media (min-width: 64rem) {
  .toast-region { left: auto; inset-inline-end: var(--space-6); bottom: var(--space-6); transform: none; }
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--gray-900);
  color: var(--gray-0);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: toast-in var(--duration-slow) var(--ease-out);
}

.toast.is-leaving { animation: toast-out var(--duration-base) var(--ease-in-out) forwards; }
.toast .icon { color: var(--brand-300); }
.toast-success .icon { color: var(--green-400); }
.toast-error .icon { color: var(--red-400); }
.toast .toast-action { margin-inline-start: auto; color: var(--brand-300); background: none; border: 0; font-weight: var(--weight-semibold); }

@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(10px); } }

/* ============ Empty state ============ */
.empty {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-6);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
}

.empty-icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.empty h3 { font-size: var(--text-lg); }
.empty h1 { font-size: var(--text-2xl); }
.empty p { color: var(--color-text-muted); max-width: 26rem; font-size: var(--text-sm); }

/* ============ Skeleton ============ */
.skeleton {
  display: block;
  height: 1em;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--color-surface-sunken) 25%, var(--color-border) 37%, var(--color-surface-sunken) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}

@keyframes shimmer {
  from { background-position: 100% 50%; }
  to { background-position: 0 50%; }
}

/* ============ List rows (inbox, call log) ============ */
.list {
  list-style: none;
  padding: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.list-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  color: inherit;
  text-decoration: none;
}

.list > li + li { border-top: 1px solid var(--color-border); }
a.list-row:hover { background: var(--color-bg-subtle); color: inherit; }
.list-row .row-main { flex: 1; min-width: 0; }
.list-row .row-title { font-weight: var(--weight-semibold); font-size: var(--text-sm); display: flex; gap: var(--space-2); align-items: center; }
.list-row .row-sub { font-size: var(--text-sm); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-row .row-meta { font-size: var(--text-xs); color: var(--color-text-subtle); text-align: end; display: grid; gap: var(--space-1); justify-items: end; }
/* Android ringer: setup steps and the install banner (SPEC §3.14). */
.ringer-banner { margin-bottom: var(--space-4); }
.ringer-banner .cluster { margin-top: var(--space-3); }
.android-card { margin-bottom: var(--space-6); }
.setup-steps { margin: 0; padding-inline-start: var(--space-10); display: grid; gap: var(--space-6); }
.setup-steps > li { padding-inline-start: var(--space-1); }
.setup-steps > li::marker { font-weight: var(--weight-semibold); color: var(--color-accent); }
.setup-steps p { color: var(--color-text-muted); font-size: var(--text-sm); margin-block: var(--space-1) var(--space-3); }
.pair-qr { margin-top: var(--space-3); font-size: var(--text-sm); }
.pair-qr summary { cursor: pointer; color: var(--color-text-muted); }
.pair-qr .qr-card { max-width: 14rem; margin-block: var(--space-3) var(--space-2); }

/* An invitation to join someone's doorbell, on the touchpoints page. */
.invite-banner { margin-bottom: var(--space-4); }
.invite-banner .cluster, .app-own-prompt .cluster { margin-top: var(--space-3); }
.app-own-prompt { margin-top: var(--space-6); }

/* Buttons at the end of a row (e.g. Send again / Remove). */
.list-row .row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1); margin-inline-start: auto; }
/* Rows with buttons wrap: on narrow screens the buttons move under the text. */
.list-row:has(> .row-actions) { flex-wrap: wrap; }
.list-row:has(> .row-actions) .row-main { flex-basis: 12rem; }
.list-row:has(> .row-actions) .row-title { overflow-wrap: anywhere; }

/* An input with its button on one line; the button drops below on narrow screens. */
.input-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.input-row .input { flex: 1 1 14rem; min-width: 0; }
.input-row .btn { flex: none; }

.list-row.is-unread .row-title::after { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-accent); }

.avatar {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: 50%;
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.avatar-accent { background: var(--color-accent-soft); color: var(--color-accent); border-color: transparent; }
.avatar-success { background: var(--color-success-soft); color: var(--color-success); border-color: transparent; }
.avatar-danger { background: var(--color-danger-soft); color: var(--color-danger); border-color: transparent; }

/* ============ Chat thread ============ */
.thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.bubble {
  max-width: 82%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.bubble time {
  display: block;
  margin-top: var(--space-1);
  font-size: 0.6875rem;
  opacity: 0.7;
}

.bubble-in {
  align-self: flex-start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-end-start-radius: var(--radius-sm);
}

.bubble-out {
  align-self: flex-end;
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-end-end-radius: var(--radius-sm);
}

.thread-day {
  align-self: center;
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  padding: var(--space-2) 0;
}

.composer {
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
  padding: var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.composer textarea {
  flex: 1;
  min-height: 2.5rem;
  max-height: 10rem;
  border: 0;
  resize: none;
  background: transparent;
  padding: var(--space-2);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
}

.composer textarea:focus { outline: none; }
.composer:focus-within { border-color: var(--color-focus); box-shadow: var(--ring-focus); }

/* ============ Touch code & QR ============ */
.touch-code {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  max-width: 100%;
  overflow-wrap: anywhere;
}

.qr-card {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--gray-0); /* QR codes must stay dark-on-light for scanners */
  color: var(--gray-900);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
}

.qr-card img,
.qr-card svg {
  width: 100%;
  max-width: 14rem;
  aspect-ratio: 1;
  image-rendering: pixelated;
}

.qr-card .qr-caption { font-size: var(--text-sm); font-weight: var(--weight-semibold); text-align: center; }
.qr-card .touch-code { background: var(--gray-50); border-color: var(--gray-200); }

/* ============ Touchpoint card (app) ============ */
.tp-card .card-body { display: grid; gap: var(--space-4); }
.tp-card .tp-top { display: flex; gap: var(--space-3); align-items: flex-start; }
.tp-card .tp-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
.tp-card .tp-kind { font-size: var(--text-xs); color: var(--color-text-subtle); display: flex; align-items: center; gap: var(--space-1); }
.tp-card .tp-top .badge { margin-inline-start: auto; }
.tp-card .tp-meta { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }
.tp-card .tp-meta span { display: inline-flex; align-items: center; gap: var(--space-1); }

/* ============ Big action buttons (visitor page) ============ */
.action-list { display: grid; gap: var(--space-3); }

.action-btn {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  color: var(--color-text);
  text-align: start;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}

.action-btn:hover { color: var(--color-text); border-color: var(--color-border-strong); box-shadow: var(--shadow-md); }
.action-btn:active { transform: scale(0.99); }
.action-btn .action-icon { display: grid; place-items: center; width: 3rem; height: 3rem; flex: none; border-radius: var(--radius-lg); background: var(--color-accent-soft); color: var(--color-accent); }
.action-btn .action-title { font-weight: var(--weight-semibold); font-size: var(--text-base); }
.action-btn .action-desc { font-size: var(--text-sm); color: var(--color-text-muted); }
.action-btn .chev { margin-inline-start: auto; color: var(--color-text-subtle); }

.action-btn.primary { background: var(--color-accent); border-color: transparent; color: var(--color-on-accent); box-shadow: var(--shadow-accent); }
.action-btn.primary .action-icon { background: var(--on-dark-fill-strong); color: inherit; }
.action-btn.primary .action-desc,
.action-btn.primary .chev { color: inherit; opacity: 0.8; }

/* ============ Call screen ============ */
.call-screen {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  grid-template-rows: 1fr auto;
  background: radial-gradient(40rem 30rem at 50% 20%, var(--brand-800), var(--gray-950) 70%);
  color: var(--gray-0);
  overflow: hidden;
}

.call-screen.is-inline {
  position: relative;
  inset: auto;
  min-height: 34rem;
  border-radius: var(--radius-2xl);
  z-index: auto;
}

.call-stage {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-6);
  text-align: center;
}

.call-stage video.remote {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--gray-950);
}

.call-stage video.local {
  position: absolute;
  inset-inline-end: var(--space-4);
  top: var(--space-4);
  width: 6.5rem;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 2px solid var(--on-dark-border);
  box-shadow: var(--shadow-lg);
  z-index: 2;
}

.call-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  background: var(--on-dark-fill);
  border: 1px solid var(--on-dark-fill-strong);
}

.call-avatar .icon { width: 3rem; height: 3rem; }

.is-ringing .call-avatar::before,
.is-ringing .call-avatar::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 2px solid var(--on-dark-border);
  animation: ring-pulse 2s var(--ease-out) infinite;
}

.is-ringing .call-avatar::after { animation-delay: 1s; }

@keyframes ring-pulse {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(1.9); opacity: 0; }
}

.call-title { font-size: var(--text-2xl); font-weight: var(--weight-semibold); position: relative; }
.call-status { color: var(--on-dark-text-muted); font-size: var(--text-sm); position: relative; }

.call-controls {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-6) calc(var(--space-10) + env(safe-area-inset-bottom));
}

.call-btn {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--on-dark-text);
  background: none;
  border: 0;
}

.call-btn .call-btn-circle {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--on-dark-fill);
  color: var(--gray-0);
  transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.call-btn:hover .call-btn-circle { background: var(--on-dark-fill-strong); }
.call-btn:active .call-btn-circle { transform: scale(0.95); }
.call-btn[aria-pressed="true"] .call-btn-circle { background: var(--gray-0); color: var(--gray-900); }
.call-btn.accept .call-btn-circle { background: var(--green-500); }
.call-btn.decline .call-btn-circle,
.call-btn.hangup .call-btn-circle { background: var(--red-500); }
.call-btn .icon { width: 1.75rem; height: 1.75rem; }
.call-btn:focus-visible { outline: none; }
.call-btn:focus-visible .call-btn-circle { box-shadow: 0 0 0 3px var(--on-dark-focus); }

/* ============ Marketing: pricing ============ */
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-8) var(--space-6);
}

.price-card.featured {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent), var(--shadow-lg);
}

.price-card .ribbon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

.price-card .price { display: flex; align-items: baseline; gap: var(--space-1); }
.price-card .price .amount { font-size: var(--text-4xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); line-height: 1; }
.price-card .price .per { color: var(--color-text-muted); font-size: var(--text-sm); }
.price-card ul { list-style: none; padding: 0; display: grid; gap: var(--space-3); font-size: var(--text-sm); }
.price-card li { display: flex; gap: var(--space-2); align-items: flex-start; }
.price-card li .icon { color: var(--color-success); margin-top: 0.1rem; }
.price-card .btn { margin-top: auto; }

/* ============ Shop (SPEC §3.17) ============ */
/* A product card on /shop: the tag's picture, its name, pack and price. */
.shop-card { display: flex; flex-direction: column; overflow: hidden; }
.shop-pic {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: var(--space-6);
  background: var(--color-bg-subtle);
  color: var(--color-accent);
}
.shop-pic > svg:not(.icon) { max-width: 100%; max-height: 100%; height: auto; box-shadow: var(--shadow-sm); }
.shop-pic .icon { width: 3rem; height: 3rem; }
.shop-body { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; padding: var(--space-5) var(--space-6) var(--space-6); }
.shop-body h3 { font-size: var(--text-lg); }
.shop-body .btn { margin-top: auto; }
.shop-price { font-size: var(--text-2xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); }

/* A line of the order form: thumbnail, name and price, quantity. */
.shop-line { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.shop-line .row-main { flex: 1; min-width: 0; }
.shop-line .row-title { font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.shop-line .row-sub { font-size: var(--text-sm); color: var(--color-text-muted); }
.shop-thumb {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  padding: var(--space-1);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  color: var(--color-accent);
}
.shop-thumb > svg:not(.icon) { max-width: 100%; max-height: 100%; height: auto; }
.shop-qty { flex: none; width: 4.5rem; }
.shop-qty .input { text-align: center; }

/* Admin: a shipping zone's fields in a row on wide screens. */
.admin-zone { display: grid; gap: var(--space-3); align-items: end; }
@media (min-width: 48rem) { .admin-zone { grid-template-columns: 2fr 3fr 1fr auto; } }
.admin-zone-delete { margin-top: calc(var(--space-2) * -1); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }

/* Totals under an order's lines. */
.order-total { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-border); font-size: var(--text-sm); }
.order-total > div { display: flex; justify-content: space-between; gap: var(--space-4); }
.order-total .grand { font-size: var(--text-lg); font-weight: var(--weight-bold); }
.order-address { white-space: pre-line; overflow-wrap: anywhere; }

/* ============ Marketing: steps ============ */
.steps {
  counter-reset: step;
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  list-style: none;
  padding: 0;
}

.steps li { counter-increment: step; position: relative; padding-top: var(--space-12); }
.steps li::before {
  content: counter(step);
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--gradient-accent);
  color: var(--gray-0);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
}
.steps h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.steps p { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ============ FAQ (details/summary) ============ */
.faq { display: grid; gap: var(--space-3); }

.faq details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  transition: border-color var(--duration-base) var(--ease-out);
}

.faq details[open] { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }

.faq summary {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  margin-inline-start: auto;
  width: 0.55rem;
  height: 0.55rem;
  flex: none;
  border-right: 2px solid var(--color-text-subtle);
  border-bottom: 2px solid var(--color-text-subtle);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--duration-base) var(--ease-out);
}

.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq .faq-body { padding: 0 var(--space-5) var(--space-5); color: var(--color-text-muted); font-size: var(--text-sm); }

/* ============ Marketing: phone mockup ============ */
.phone {
  position: relative;
  width: min(18rem, 80vw);
  aspect-ratio: 9 / 19;
  margin-inline: auto;
  padding: 0.75rem;
  border-radius: 2.75rem;
  background: var(--gray-900);
  box-shadow: var(--shadow-lg), inset 0 0 0 2px var(--gray-700);
}

.phone::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 5.5rem;
  height: 1.5rem;
  border-radius: var(--radius-full);
  background: var(--gray-950);
  z-index: 2;
}

.phone-screen {
  height: 100%;
  border-radius: 2.1rem;
  overflow: hidden;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-4) var(--space-4);
  font-size: var(--text-sm);
}

/* ============ Misc ============ */
.divider-text {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
}

.divider-text::before,
.divider-text::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--color-border);
}

.kbd {
  display: inline-block;
  padding: 0 0.4em;
  border: 1px solid var(--color-border-strong);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.85em;
}

.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

fieldset.choice-grid { border: 0; padding: 0; min-width: 0; }

/* ============ Detail list (key/value) ============ */
.detail-list { display: grid; gap: 0; }
.detail-list > div { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); }
.detail-list > div:first-child { padding-top: 0; }
.detail-list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.detail-list dt { color: var(--color-text-muted); }
.detail-list dd { margin: 0; font-weight: var(--weight-medium); overflow-wrap: anywhere; }
@media (max-width: 30rem) {
  .detail-list > div { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* ============ App: page bits ============ */
.flash { margin-bottom: var(--space-6); }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  text-decoration: none;
}

.back-link:hover { color: var(--color-text); }
.page-sub.cluster { --cluster-gap: var(--space-2); font-size: var(--text-sm); }

.form-card { max-width: 40rem; }
.form-card fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.card fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.card fieldset legend { margin-bottom: var(--space-2); }

.tp-link { display: grid; gap: var(--space-4); color: inherit; text-decoration: none; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.tp-link:hover { color: inherit; background: var(--color-bg-subtle); }
.tp-names { min-width: 0; }
.tp-card .tp-title { overflow-wrap: anywhere; }

.detail-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: minmax(0, 1fr);
  margin-block: var(--space-6);
  align-items: start;
}

@media (min-width: 56rem) {
  .detail-grid { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
}

.qr-card-flat { box-shadow: none; padding: var(--space-4); }
.qr-card-flat svg { max-width: 12rem; }

.activate-card { margin-bottom: var(--space-6); border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent), var(--shadow-sm); }
.activate { display: flex; gap: var(--space-4); align-items: flex-start; }
.activate .feature-icon { margin: 0; flex: none; }
.activate h2 { font-size: var(--text-xl); }
.activate-actions { margin-top: var(--space-5); }
.activate-card .hint { margin-top: var(--space-3); display: block; }

.manage-list { list-style: none; padding: 0; margin: 0; }

.manage-list li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
}

.manage-list li + li { border-top: 1px solid var(--color-border); }
.manage-list li > div { flex: 1 1 18rem; min-width: 0; }
.manage-list p { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-1); }
.manage-form { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.manage-form .select { width: auto; min-height: 2.5rem; }

.check-disabled { opacity: 0.55; cursor: not-allowed; }

/* ============ Visitor contact page ============ */
.contact-head {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  text-align: center;
  padding-top: var(--space-6);
}

.contact-head h1 { font-size: var(--text-3xl); overflow-wrap: anywhere; }

.contact-icon {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

.contact-desc { color: var(--color-text-muted); white-space: pre-line; overflow-wrap: anywhere; max-width: 24rem; }
.contact-gone { padding-top: var(--space-16); }
.contact-gone .contact-icon { color: var(--color-text-muted); }
.contact-privacy { font-size: var(--text-xs); color: var(--color-text-subtle); text-align: center; }
.action-btn.is-preview { cursor: default; }
.action-btn.is-preview:hover { box-shadow: var(--shadow-sm); border-color: var(--color-border); }
.action-btn.primary.is-preview:hover { box-shadow: var(--shadow-accent); border-color: transparent; }

.visitor-brand { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; }

/* ============ Messaging ============ */
/* Honeypot field: off-screen for people, still filled in by naive bots. */
/* Honeypot field: hidden by clipping, not by moving it off-screen (an off-screen
   offset becomes horizontal scroll in right-to-left pages). */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.message-form { scroll-margin-top: var(--space-6); }
.message-form-title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-lg); }
.message-form-title .icon { color: var(--color-accent); }

.thread-head { display: grid; gap: var(--space-1); }
.thread-head h1 { font-size: var(--text-2xl); }
.thread-head .back-link { margin-bottom: var(--space-1); }

.save-link .input-group { width: 100%; }
.save-link .input { font-size: var(--text-sm); min-width: 0; }
.save-link > div { flex: 1; min-width: 0; }

.thread { min-height: 4rem; }
.thread .bubble { scroll-margin-bottom: var(--space-24); }

.notify-title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-base); }

.card-head .badge { margin-inline-start: auto; }

.inbox-tabs { margin-bottom: var(--space-5); }
.tabs a[role="tab"] {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1-5) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  text-decoration: none;
}
.tabs a[role="tab"][aria-selected="true"] { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-sm); }

.thread-panel .card-body { max-height: min(60vh, 40rem); overflow-y: auto; }
.thread-foot { display: grid; gap: var(--space-2); }
.thread-foot .composer { box-shadow: none; }
.thread-foot .hint { display: flex; align-items: center; gap: var(--space-1); }

.list-row .row-title { min-width: 0; }
.app-tabbar a .count { position: absolute; top: 0.35rem; inset-inline-start: calc(50% + 0.35rem); min-width: 1.1rem; height: 1.1rem; font-size: 0.625rem; }

/* ============ Call screen states ============
   <section class="call-screen" data-state="ready|ringing|connecting|live|over|elsewhere">
   Each .when-* group of controls shows only in its state. */
.call-controls > div { display: none; justify-content: center; gap: var(--space-6); flex-wrap: wrap; }
.call-screen[data-state="ready"] .when-ready,
.call-screen[data-state="ringing"] .when-ringing,
.call-screen[data-state="connecting"] .when-live,
.call-screen[data-state="live"] .when-live,
.call-screen[data-state="over"] .when-over,
.call-screen[data-state="elsewhere"] .when-over { display: flex; }
/* The caller's screen has no Answer/Decline: while ringing it shows "End". */
.call-screen[data-state="ringing"]:not(:has(.when-ringing)) .when-live { display: flex; }
.call-screen[data-state="ringing"]:not(:has(.when-ringing)) .when-live [data-action="mute"],
.call-screen[data-state="ringing"]:not(:has(.when-ringing)) .when-live [data-action="camera"] { display: none; }

.call-screen[data-state="ringing"] .call-avatar::before,
.call-screen[data-state="ringing"] .call-avatar::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 2px solid var(--on-dark-border);
  animation: ring-pulse 2s var(--ease-out) infinite;
}
.call-screen[data-state="ringing"] .call-avatar::after { animation-delay: 1s; }

/* With remote video playing, the text sits on a scrim at the top. */
.call-screen:has(video.remote:not([hidden])) .call-avatar { display: none; }
.call-screen:has(video.remote:not([hidden])) .call-stage { align-content: start; }
.call-screen:has(video.remote:not([hidden])) .call-title,
.call-screen:has(video.remote:not([hidden])) .call-status { z-index: 1; text-shadow: 0 1px 8px var(--color-overlay); }

.call-note { position: relative; max-width: 22rem; font-size: var(--text-xs); color: var(--on-dark-text-muted); }
.call-note .icon { vertical-align: -0.15em; }

/* Visitor's consent to a direct (non-relayed) call, before it starts. */
.call-direct {
  position: relative;
  display: grid;
  gap: var(--space-2);
  max-width: 22rem;
  margin-top: var(--space-3);
  text-align: start;
  color: var(--on-dark-text);
}
.call-direct .icon { vertical-align: -0.15em; }
.call-direct-hint { font-size: var(--text-xs); color: var(--on-dark-text-muted); }
.call-screen:not([data-state="ready"]) .call-direct { display: none; }
.call-controls .btn { min-width: 10rem; }
a.call-btn { text-decoration: none; }

.ring-overlay { z-index: var(--z-toast); } /* appears instantly: it's a ringing phone */
.call-screen[data-state="live"] .call-note,
.call-screen[data-state="connecting"] .call-note { display: none; }

.device-list .list-row form { margin-inline-start: auto; }

/* ============ Plans & billing ============ */
.plan-card { margin-bottom: var(--space-6); scroll-margin-top: var(--space-6); }
.household-card, .plate-card { margin-bottom: var(--space-6); scroll-margin-top: var(--space-6); }
.plan-attention { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent), var(--shadow-sm); }
.plan-options { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.plan-option {
  display: grid;
  gap: var(--space-1);
  align-content: start;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-subtle);
}
.plan-option .btn { margin-top: var(--space-3); }
.plan-trial { background: var(--color-accent-soft); border-color: transparent; }
.plan-name { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.plan-price { font-size: var(--text-2xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); }
.plan-price span { font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--color-text-muted); }
.plan-desc { font-size: var(--text-xs); color: var(--color-text-subtle); }
.plan-sub { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between; }
.plan-sub > div { flex: 1 1 16rem; }
.plan-card .hint { display: flex; align-items: center; gap: var(--space-1); }
.list-flat { border: 0; border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
.table-flat { border: 0; border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
.table td a { color: inherit; font-weight: var(--weight-medium); }
.checkout-card { max-width: 32rem; }
.alert + .plan-card { margin-top: var(--space-4); }
.contact-report { text-align: center; font-size: var(--text-xs); }
.contact-report a { color: var(--color-text-subtle); text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-1); }
.contact-report a:hover { color: var(--color-danger); }
.field legend { margin-bottom: var(--space-2); }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
.danger-card { border-color: color-mix(in srgb, var(--color-danger) 35%, var(--color-border)); }
.danger-card .card-head h3 { color: var(--color-danger); }
.pow-status:empty { display: none; }
.pow-status { text-align: center; }

/* ============ Languages & right-to-left ============ */
/* Arrows and chevrons point along the reading direction (the icon template
   function adds .icon-dir to them). */
[dir="rtl"] .icon-dir { transform: scaleX(-1); }

/* Codes, links and emails read left to right even inside Hebrew or Arabic. */
.touch-code, .mono, .sign-code, .poster-code strong { direction: ltr; unicode-bidi: isolate; }

/* Language menu: a native <details>, so it works without JavaScript. */
.lang-menu { position: relative; }
.lang-menu > summary { list-style: none; cursor: pointer; gap: var(--space-1); }
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-list {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + var(--space-1));
  z-index: var(--z-overlay);
  min-width: 11rem;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.lang-list a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  text-align: start;
}
.lang-list a:hover { background: var(--color-surface-sunken); }
.lang-list a[aria-current="true"] { color: var(--color-accent); font-weight: var(--weight-semibold); }
.lang-list [dir="rtl"] { text-align: right; }

/* "This page is also available in your language" */
.lang-banner {
  background: var(--color-surface-sunken);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  padding: var(--space-2) 0;
}
.lang-banner .container { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.lang-banner a { font-weight: var(--weight-semibold); }

/* In the phone menu the languages are listed in full, not in a dropdown
   (a dropdown would run off the bottom of the fixed menu). */
.mobile-langs { display: grid; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.mobile-langs-label { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-lg); font-weight: var(--weight-medium); }
.lang-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.mobile-nav .lang-grid a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--color-text);
  text-decoration: none;
  text-align: center;
}
.mobile-nav .lang-grid a[aria-current="true"] { border-color: var(--color-accent); color: var(--color-accent); font-weight: var(--weight-semibold); }

.legal-note { padding-block-end: 0; }
/* On the caller's call screen: top corner, light on the dark background,
   and only before the call starts (switching reloads the page). */
.call-lang {
  position: absolute;
  top: calc(var(--space-3) + env(safe-area-inset-top));
  inset-inline-end: var(--space-3);
  z-index: 1;
  display: none;
}
.call-screen[data-state="ready"] .call-lang { display: block; }
.call-lang .lang-menu > summary { color: var(--gray-0); }

/* ============ Admin: physical-tag products and batches (operator only) ============ */
.admin-card { margin-bottom: var(--space-6); }
.admin-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.admin-batch-form {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  align-items: end;
  border-bottom: 1px solid var(--color-border);
}
.admin-product { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 72rem) {
  .admin-product { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .admin-preview { position: sticky; top: var(--space-6); }
}
.admin-legend { font-size: var(--text-lg); font-weight: var(--weight-semibold); margin-bottom: var(--space-3); }
.admin-fields {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
  align-items: end;
}
.admin-wide { grid-column: 1 / -1; }
.admin-color { padding: var(--space-1); min-height: 2.5rem; cursor: pointer; }
.admin-texts { display: grid; gap: var(--space-2); }
.admin-text {
  display: grid;
  gap: var(--space-2) var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.5rem), 1fr));
  align-items: end;
  padding-block-end: var(--space-2);
  border-bottom: 1px dashed var(--color-border);
}
.admin-text .admin-text-content { grid-column: 1 / -1; }
.admin-mini { display: grid; gap: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); }
.admin-mini .input, .admin-mini .select { font-size: var(--text-sm); }
.tag-preview { display: flex; justify-content: center; background: var(--color-bg-subtle); }
.tag-preview > svg { max-width: 100%; height: auto; box-shadow: var(--shadow-sm); }
.tag-preview-sheet > svg { max-height: 28rem; width: auto; }