/* Shared interactive components; no page or section may redefine their dimensions. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.ui-button,
.ui-icon-button,
.ui-link {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: var(--control-sm);
  min-height: var(--control-md);
  padding: 0 var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-text);
  font: 500 var(--control-label)/var(--control-line) var(--font-body);
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: color var(--motion-fast), background-color var(--motion-fast), border-color var(--motion-fast),
    box-shadow var(--motion-fast), transform var(--motion-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.ui-button--primary {
  background: var(--color-action);
  box-shadow: inset 0 1px 0 #ffffff80, 0 2px 4px #0000001a;
  border-color: var(--color-action);
  color: var(--color-on-action);
}
.ui-button--secondary {
  background: #ffffff06;
  border-color: var(--color-border-interactive);
  color: var(--color-text);
}
.ui-button--ghost,
.ui-icon-button {
  color: var(--color-text-secondary);
  border-color: transparent;
  background: transparent;
}
.ui-button--sm { min-height: var(--control-sm); padding-inline: var(--space-4); font-size: var(--control-label-sm); line-height: var(--control-line-sm); }
.ui-icon-button { width: var(--control-sm); height: var(--control-sm); min-height: var(--control-sm); padding: 0; flex: none; }
.ui-link {
  min-height: var(--control-sm);
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  color: var(--color-text-secondary);
  justify-content: flex-start;
  font-weight: 400;
  font-size: var(--control-label-sm);
  line-height: var(--control-line-sm);
}
.ui-link--prominent { min-height: var(--control-md); font-size: var(--control-label); line-height: var(--control-line); }
.ui-button:not(.ui-button--sm) .ui-icon, .ui-link--prominent .ui-icon { width: 18px; height: 18px; }
.ui-icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ui-button:focus-visible,
.ui-icon-button:focus-visible,
.ui-link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}
@media (hover: hover) {
  .ui-button:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):hover {
    background: var(--color-surface-raised);
    border-color: var(--color-focus);
    transform: translateY(-1px);
  }
  .ui-button--primary:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):hover {
    background: var(--color-action-hover);
    border-color: var(--color-action-hover);
  }
  .ui-icon-button:not(:disabled):hover,
  .ui-button--ghost:not(:disabled):hover { background: var(--color-surface-raised); }
  .ui-link:not([aria-disabled="true"]):hover { color: var(--color-action-hover); text-decoration: underline; text-underline-offset: 5px; }
}
.ui-button:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):active,
.ui-icon-button:not(:disabled):active { transform: translateY(1px); background: var(--color-secondary-active); }
.ui-button--primary:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):active { background: var(--color-action-active); border-color: var(--color-action-active); }
.ui-button:disabled,
.ui-button[aria-disabled="true"],
.ui-icon-button:disabled {
  background: var(--color-disabled-surface);
  border-color: var(--color-border);
  color: var(--color-disabled-text);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.ui-button[aria-busy="true"] { cursor: wait; transform: none; }
.ui-spinner { width: 16px; height: 16px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ui-spin .8s linear infinite; flex: none; }
.status-label { display: inline-flex; align-items: center; gap: 8px; color: var(--color-text-muted); font-size: var(--text-caption); line-height: 1.6; }
.status-label::before { content: ""; width: 5px; height: 5px; background: currentColor; border-radius: 50%; flex: none; }
@keyframes ui-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ui-button, .ui-icon-button, .ui-link { transition: none; }
  .ui-button:hover, .ui-button:active, .ui-icon-button:active { transform: none !important; }
  .ui-spinner { animation: none; }
}
/* Native hidden semantics must win over component display declarations. */
[hidden] { display: none !important; }

/* One silhouette for the image and its border; keep link focus outside it. */
.ui-media {
  position: relative;
  display: block;
  border-radius: var(--media-radius, var(--radius-panel));
}
.ui-media > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}
/* Match the source silhouettes: Loomy 28/922 × 28/629; AStudio 50/1600 × 50/991. */
.ui-media--loomy { --media-radius: 3.03688% / 4.45151%; }
.ui-media--astudio { --media-radius: 3.125% / 5.04541%; }
.ui-media--phone { --media-radius: 20px; }
.ui-media--outlined::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--color-divider);
  border-radius: inherit;
  pointer-events: none;
}

/* Website QR codes remain visible at every viewport size, including without JS. */
.qr-card { display: flex; flex: none; flex-direction: column; align-items: center; gap: 10px; width: 176px; max-width: 100%; margin: 0; }
.qr-card img { display: block; box-sizing: border-box; width: 176px; height: 176px; max-width: 100%; padding: 10px; background: #fff; border-radius: var(--radius-panel); object-fit: contain; }
.qr-card figcaption { color: var(--color-text-secondary); font-size: var(--text-caption); line-height: 1.6; text-align: center; }
.download-options { min-width: 0; }
.download-heading { margin: 0; color: var(--color-text); font-size: var(--text-body); font-weight: 500; }
.download-platforms { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin-top: 12px; }
.download-note { margin: 12px 0 0; max-width: 44em; color: var(--color-text-muted); font-size: var(--text-caption); line-height: 1.8; }