/* css/components.css — ScoutEdge component library.
 * Buttons, forms, cards, badges/chips, alerts, tables, tabs, profile hero,
 * completion ring, stat tiles, empty/loading states.
 */

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-4);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 650;
  letter-spacing: 0.005em;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--navy-900);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard), box-shadow var(--dur) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

.btn:hover {
  text-decoration: none;
}

.btn:active:not(:disabled) {
  transform: translateY(1px) scale(0.985);
}

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

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Busy state set by withButtonLoading() (js/ui/spinner.js) via data-loading.
   Shows a small inline spinner before the working label and blocks re-clicks
   (the JS also sets disabled). Spinner animates transform only. */
.btn[data-loading='true'] { cursor: progress; }
.btn[data-loading='true']::before {
  content: '';
  width: 15px;
  height: 15px;
  margin-right: 2px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  opacity: 0.9;
  animation: spin 0.7s linear infinite;
  flex: none;
}
@media (prefers-reduced-motion: reduce) {
  .btn[data-loading='true']::before { animation-duration: 1.4s; }
}

.btn svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* Primary = lime (the one main action on a screen). */
.btn--primary {
  background: var(--lime-400);
  border-color: var(--lime-500);
  color: var(--navy-900);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 1px 2px rgba(74, 97, 20, 0.25);
}

.btn--primary:hover:not(:disabled) {
  background: var(--lime-500);
  color: var(--navy-950);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 6px 14px -6px rgba(135, 173, 37, 0.7);
}

/* Navy = strong secondary (identity actions). */
.btn--navy {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: #fff;
}

.btn--navy:hover:not(:disabled) {
  background: var(--navy-800);
  color: #fff;
}

.btn--ghost {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
  color: var(--navy-900);
  box-shadow: var(--shadow-sm);
}

.btn--ghost:hover:not(:disabled) {
  border-color: var(--navy-700);
  background: var(--navy-50);
  color: var(--navy-900);
}

.btn--danger {
  background: var(--color-surface);
  border-color: #f4c7bb;
  color: var(--color-error);
}

.btn--danger:hover:not(:disabled) {
  background: var(--color-error-bg);
  border-color: var(--color-error);
  color: var(--color-error);
}

/* On the navy hero. */
.btn--on-dark {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

.btn--on-dark:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.btn--sm {
  min-height: 32px;
  padding: 0 var(--space-3);
  font-size: var(--font-size-xs);
}

.btn--lg {
  min-height: 46px;
  padding: 0 var(--space-5);
  font-size: var(--font-size-base);
}

.btn--block {
  width: 100%;
}

/* ── Forms ──────────────────────────────────────────────────────────────── */
.field {
  display: block;
  margin-bottom: var(--space-4);
  min-width: 0;
}

.field__label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--ink-700);
}

.field__input,
.field__select,
.field__textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px var(--space-3);
  font-size: var(--font-size-base);
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-field);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard),
    background var(--dur-fast) var(--ease-standard);
}

.field__select {
  appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}

.field__textarea {
  min-height: 96px;
  resize: vertical;
}

.field__input::placeholder,
.field__textarea::placeholder {
  color: #98a2b3;
}

.field__input:hover,
.field__select:hover,
.field__textarea:hover {
  border-color: var(--color-border-field-hover);
}

.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  outline: none;
  border-color: var(--lime-500);
  box-shadow: var(--ring-focus);
}

.field__input[aria-invalid='true'],
.field__select[aria-invalid='true'],
.field__textarea[aria-invalid='true'] {
  border-color: var(--color-error);
  background: #fffbfa;
}

.field__input[aria-invalid='true']:focus,
.field__select[aria-invalid='true']:focus,
.field__textarea[aria-invalid='true']:focus {
  box-shadow: 0 0 0 3px rgba(196, 50, 10, 0.18);
}

/* Disabled / read-only controls: visibly inert so editable vs locked is clear
   (design.md: editable vs read-only distinction; not colour-only — also the
   not-allowed cursor + reduced opacity). */
.field__input:disabled,
.field__select:disabled,
.field__textarea:disabled,
.field__input[readonly] {
  background: var(--color-surface-sunken, #eef2f7);
  color: var(--color-text-muted);
  cursor: not-allowed;
  box-shadow: none;
  border-color: var(--color-border);
}
.field__input[readonly] { cursor: default; }

/* Validated-OK state: a quiet lime edge (paired with a check in the markup
   where used, never colour-only on its own). */
.field__input[data-valid='true'],
.field__select[data-valid='true'],
.field__textarea[data-valid='true'] {
  border-color: var(--lime-500);
}

/* A form mid-submit: dim + block the whole fieldset so inputs can't be edited
   or the form double-submitted while a request is in flight. */
.form-submitting { position: relative; opacity: 0.7; pointer-events: none; }
.form-submitting * { cursor: progress !important; }

.field__hint {
  display: block;
  margin-top: 6px;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.field__error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 6px;
  color: var(--color-error);
  font-size: var(--font-size-xs);
  font-weight: 500;
  animation: se-fade-up var(--dur) var(--ease-out) both;
}

.field__error::before {
  content: '!';
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--color-error);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

.field__error[hidden] {
  display: none;
}

.field--checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.field--checkbox input {
  margin-top: 0.25rem;
  accent-color: var(--lime-500);
}

/* Profile form sections (js/ui/profile-form.js) */
.form-section {
  scroll-margin-top: calc(var(--header-height) + var(--space-5));
}

.form-section + .form-section {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.form-section__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-lg);
}

.form-section .grid > .field {
  margin-bottom: 0;
}

.check-group {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  grid-column: 1 / -1;
}

.check-group__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: 2px;
}

.check-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 36px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--ink-700);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}

.check-chip:hover {
  border-color: var(--navy-700);
}

.check-chip:active {
  transform: scale(0.97);
}

.check-chip input {
  margin: 0;
  accent-color: var(--navy-900);
}

.check-chip:has(input:checked) {
  border-color: var(--navy-900);
  background: var(--navy-900);
  color: #fff;
}

.check-chip:has(input:checked) input {
  accent-color: var(--lime-400);
}

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

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

.card + .card {
  margin-top: var(--space-4);
}

.card--flat {
  box-shadow: none;
  background: var(--color-surface-alt);
}

.card--interactive:hover,
.result-list .card:hover,
.card.result-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--ink-300);
}

.card__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-lg);
  color: var(--color-heading);
}

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.card__head .card__title {
  margin: 0;
}

.card__icon {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 9px;
  background: var(--navy-50);
  color: var(--navy-700);
}

.card__icon svg {
  width: 17px;
  height: 17px;
}

/* Eyebrow/kicker in the sports display face. */
.kicker {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lime-ink);
}

/* ── Stat tiles ─────────────────────────────────────────────────────────── */
.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

.stat::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--navy-100);
  transition: background var(--dur) var(--ease-standard);
}

.stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.stat:hover::after {
  background: var(--lime-400);
}

.stat__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--navy-900);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.stat__note {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

a.stat:hover {
  text-decoration: none;
}

/* ── Badges, chips ──────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  font-size: var(--font-size-xs);
  font-weight: 650;
  letter-spacing: 0.01em;
  white-space: nowrap;
  border-radius: 999px;
  background: var(--ink-100);
  border: 1px solid var(--ink-200);
  color: var(--ink-600);
  animation: se-fade-in var(--dur) var(--ease-standard) both;
}

.badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  flex: none;
}

.badge--role {
  background: var(--navy-50);
  border-color: var(--navy-100);
  color: var(--navy-700);
}

.badge--success {
  background: var(--lime-100);
  border-color: var(--lime-300);
  color: var(--lime-ink);
  animation: se-pop var(--dur-slow) var(--ease-out) both;
}

.badge--warning {
  background: var(--color-warning-bg);
  border-color: #fedf89;
  color: var(--color-warning);
}

.badge--error {
  background: var(--color-error-bg);
  border-color: #fecdca;
  color: var(--color-error);
}

/* Verified tick (lime) */
.badge--verified::before {
  width: 14px;
  height: 14px;
  background: var(--lime-500)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23012350' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 8.5 2.5 2.5L12 5.5'/%3E%3C/svg%3E")
    center / 10px no-repeat;
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  background: var(--navy-50);
  border: 1px solid var(--navy-100);
  color: var(--navy-800);
  font-size: var(--font-size-sm);
  font-weight: 600;
  white-space: nowrap;
}

.chip__label {
  font-weight: 500;
  color: var(--color-text-muted);
}

.chip--accent {
  background: var(--lime-100);
  border-color: var(--lime-300);
  color: var(--lime-ink);
}

.chip--muted {
  background: var(--ink-100);
  border-color: var(--ink-200);
  color: var(--ink-600);
  font-weight: 500;
}

/* ── Alerts ─────────────────────────────────────────────────────────────── */
.alert {
  position: relative;
  padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + 6px);
  border-radius: var(--radius);
  border: 1px solid transparent;
  margin-bottom: var(--space-4);
  font-size: var(--font-size-sm);
  animation: se-fade-up var(--dur) var(--ease-out) both;
}

.alert::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: var(--radius) 0 0 var(--radius);
  background: currentColor;
  opacity: 0.85;
}

.alert p:last-child {
  margin-bottom: 0;
}

.alert--error {
  background: var(--color-error-bg);
  border-color: #fecdca;
  color: #912018;
}

.alert--success {
  background: var(--lime-50);
  border-color: var(--lime-300);
  color: var(--lime-ink);
}

.alert--warning {
  background: var(--color-warning-bg);
  border-color: #fedf89;
  color: #93370d;
}

.alert--info {
  background: var(--navy-50);
  border-color: var(--navy-100);
  color: var(--navy-800);
}

/* ── Tables ─────────────────────────────────────────────────────────────── */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  background: var(--color-surface);
}

.table th,
.table td {
  text-align: left;
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.table th {
  font-size: var(--font-size-xs);
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
}

.table tbody tr {
  transition: background var(--dur-fast) var(--ease-standard);
}

.table tbody tr:hover {
  background: var(--navy-50);
}

/* ── Spinner + skeletons ────────────────────────────────────────────────── */
.spinner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.spinner__dot {
  width: 18px;
  height: 18px;
  border: 2px solid var(--ink-200);
  border-top-color: var(--lime-500);
  border-right-color: var(--navy-700);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

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

.skeleton {
  display: block;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--ink-100) 25%, #e9edf3 37%, var(--ink-100) 63%);
  background-size: 400% 100%;
  animation: se-shimmer 1.4s ease infinite;
}

.skeleton--line {
  height: 0.9rem;
  margin: var(--space-2) 0;
}

.skeleton--card {
  height: 120px;
  border-radius: var(--radius-lg);
}

.skeleton--hero {
  height: 240px;
  border-radius: var(--radius-xl);
}

.skeleton-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  margin-top: var(--space-5);
}

/* ── Empty state ────────────────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-7) var(--space-5);
  border: 1px dashed var(--ink-300);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(400px 160px at 50% 0%, rgba(166, 205, 62, 0.1), transparent 70%),
    var(--color-surface);
  color: var(--color-text-muted);
  animation: se-fade-up var(--dur-slow) var(--ease-out) both;
}

.empty-state::before {
  content: '';
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-3);
  border-radius: 14px;
  background: var(--navy-50)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c3d72' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")
    center / 22px no-repeat;
  border: 1px solid var(--navy-100);
}

.empty-state--forbidden::before {
  background: var(--color-error-bg)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4320a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")
    center / 22px no-repeat;
  border-color: #fecdca;
}

.empty-state__title {
  font-weight: 700;
  font-size: var(--font-size-lg);
  color: var(--color-heading);
  margin-bottom: var(--space-1);
}

.empty-state__message {
  max-width: 44ch;
  margin: 0 auto var(--space-4);
}

.empty-state .btn {
  margin-top: var(--space-1);
}

.empty-state--compact {
  padding: var(--space-5) var(--space-4);
}

.empty-state--compact::before {
  width: 36px;
  height: 36px;
  background-size: 18px;
  border-radius: 10px;
}

.empty-state--compact .empty-state__title {
  font-size: var(--font-size-base);
}

/* ── Pagination ─────────────────────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-5);
}

.pagination__status {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.list-note {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: center;
}

/* ── Detail rows / lists ────────────────────────────────────────────────── */
.detail-list {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: 0;
  margin: 0;
}

.detail-list dt,
.detail-list dd {
  padding: 10px 0;
  border-bottom: 1px solid var(--ink-100);
}

.detail-list dt {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  padding-right: var(--space-3);
}

.detail-list dd {
  margin: 0;
  font-weight: 550;
  color: var(--ink-900);
  overflow-wrap: anywhere;
}

.detail-list dt:last-of-type,
.detail-list dd:last-of-type {
  border-bottom: 0;
}

.detail-list dd.is-empty {
  color: #98a2b3;
  font-weight: 400;
}

@media (max-width: 480px) {
  .detail-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-list dt {
    border-bottom: 0;
    padding-bottom: 0;
  }
}

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

.item-list > li {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--ink-100);
}

.item-list > li:last-child {
  border-bottom: 0;
}

.item-list > li > :first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ── Tabs (animated underline) ──────────────────────────────────────────── */
.tabs {
  position: relative;
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--color-border);
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  position: relative;
  flex: none;
  padding: var(--space-3) var(--space-4);
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-standard);
}

.tab:hover {
  color: var(--navy-900);
}

.tab[aria-selected='true'] {
  color: var(--navy-900);
}

.tab__count {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--ink-100);
  color: var(--ink-600);
  font-size: var(--font-size-xs);
  font-weight: 700;
}

.tab[aria-selected='true'] .tab__count {
  background: var(--lime-100);
  color: var(--lime-ink);
}

.tabs__indicator {
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 3px;
  width: 0;
  border-radius: 3px 3px 0 0;
  background: var(--lime-400);
  transition: transform var(--dur-slow) var(--ease-out), width var(--dur-slow) var(--ease-out);
}

.tab-panel {
  padding-top: var(--space-5);
}

.tab-panel[hidden] {
  display: none;
}

.tab-panel:not([hidden]) {
  animation: se-fade-up var(--dur-slow) var(--ease-out) both;
}

/* ── Avatar ─────────────────────────────────────────────────────────────── */
.avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--navy-700), var(--navy-900));
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  user-select: none;
}

.avatar--sm {
  width: 30px;
  height: 30px;
  font-size: 0.72rem;
}

.avatar--lg {
  width: 56px;
  height: 56px;
  font-size: 1.15rem;
}

.avatar--accent {
  background: linear-gradient(145deg, var(--lime-300), var(--lime-500));
  color: var(--navy-900);
}

/* ── Profile hero ───────────────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  color: #fff;
  background:
    radial-gradient(700px 320px at 100% 0%, rgba(166, 205, 62, 0.16), transparent 60%),
    radial-gradient(600px 400px at 0% 120%, rgba(42, 83, 148, 0.55), transparent 60%),
    linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 55%, var(--navy-700) 100%);
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}

/* Two lime "edge" stripes echo the arrows in the logo. */
.hero::before,
.hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  right: -60px;
  width: 360px;
  height: 22px;
  background: linear-gradient(90deg, transparent, rgba(166, 205, 62, 0.55));
  transform: rotate(-32deg);
  border-radius: 4px;
  animation: se-stripe 900ms var(--ease-out) both 150ms;
}

.hero::before {
  top: 54px;
}

.hero::after {
  top: 104px;
  right: -110px;
  opacity: 0.5;
  animation-delay: 260ms;
}

@keyframes se-stripe {
  from {
    opacity: 0;
    transform: translateX(80px) rotate(-32deg);
  }
}

.hero__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-5) var(--space-6) var(--space-5);
}

.hero__identity {
  min-width: 0;
}

.hero__portrait {
  position: relative;
  width: 132px;
  height: 132px;
  flex: none;
  /* Single source of truth for the gap between the portrait edge (where the
     completion ring sits) and the inner avatar circle. The photo, the hover
     overlay and the busy spinner ALL inset by this amount, so they are the
     exact same concentric circle — no mismatched 12px/13px insets. */
  --portrait-gap: 12px;
  animation: se-pop 600ms var(--ease-out) both 80ms;
}

.hero__avatar {
  /* Explicit CENTERED SQUARE (not inset-sized). An <img> sized only by inset
     keeps its intrinsic aspect ratio in some browsers, so the circle came out
     as an off-centre ellipse. Fixing width == height == the circle diameter and
     centring with a transform guarantees a perfect concentric circle for BOTH
     the initials <span> and the photo <img>. */
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% - 2 * var(--portrait-gap));
  height: calc(100% - 2 * var(--portrait-gap));
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #2a5394, #0d2c56);
  border: 3px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
  font-size: 2.3rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  text-transform: uppercase;
}

.hero__ring {
  position: absolute;
  inset: 0;
  /* Pin the SVG to the portrait box and keep it centred so the ring is always
     concentric with the avatar (which is centred via inset:var(--portrait-gap)).
     Explicit size avoids intrinsic-size scaling surprises across browsers. */
  width: 100%;
  height: 100%;
  display: block;
}

.hero__ring-label {
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--lime-400);
  color: var(--navy-900);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.5);
}

.hero__name {
  margin: var(--space-1) 0 var(--space-2);
  color: #fff;
  font-size: var(--font-size-3xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--font-size-sm);
}

.hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hero__meta-item svg {
  width: 15px;
  height: 15px;
  opacity: 0.75;
}

.hero__id {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: #fff;
}

.hero__bio {
  max-width: 62ch;
  margin: var(--space-3) 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--font-size-sm);
}

.hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 11px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: 600;
  white-space: nowrap;
  animation: se-fade-up var(--dur-slow) var(--ease-out) both;
}

.hero-tag__label {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}

.hero-tag--accent {
  background: rgba(166, 205, 62, 0.16);
  border-color: rgba(166, 205, 62, 0.5);
  color: var(--lime-300);
}

.hero__tags .hero-tag:nth-child(2) { animation-delay: 40ms; }
.hero__tags .hero-tag:nth-child(3) { animation-delay: 80ms; }
.hero__tags .hero-tag:nth-child(4) { animation-delay: 120ms; }
.hero__tags .hero-tag:nth-child(n + 5) { animation-delay: 160ms; }

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-self: start;
  min-width: 180px;
}

.hero__status {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.hero .badge {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.hero .badge--success,
.hero .badge--verified {
  background: rgba(166, 205, 62, 0.18);
  border-color: rgba(166, 205, 62, 0.6);
  color: var(--lime-300);
}

.hero .badge--warning {
  background: rgba(253, 176, 34, 0.16);
  border-color: rgba(253, 176, 34, 0.5);
  color: #fec84b;
}

/* Strip of key facts across the bottom of the hero. */
.hero__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(1, 21, 47, 0.35);
}

.hero-fact {
  padding: var(--space-4) var(--space-5);
  min-width: 0;
}

.hero-fact + .hero-fact {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.hero-fact__value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-fact__label {
  display: block;
  margin-top: 2px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.hero-fact--empty .hero-fact__value {
  color: rgba(255, 255, 255, 0.35);
}

.hero--compact .hero__body {
  padding: var(--space-6);
}

.hero--compact .hero__portrait {
  width: 96px;
  height: 96px;
}

/* Branded QR corner (Scout + Organisation heroes), mirroring the athlete card. */
.hero__qr {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 8px;
  border-radius: 12px;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.5);
}
.hero__qr svg, .hero__qr img { width: 136px; height: 136px; display: block; }
/* caption removed per design */
.hero__qr-cap { display: none; }
/* Reserve room on the right so the QR never overlaps the actions/facts. */
.hero--qr .hero__body { padding-right: 184px; }
@media (max-width: 900px) {
  .hero--qr .hero__body { padding-right: var(--space-5); }
  .hero__qr { position: static; align-self: flex-start; margin: var(--space-4) 0 0 var(--space-5); }
}
@media (max-width: 600px) {
  .hero__qr { margin: var(--space-4) auto 0; order: -1; }
  .hero__qr svg, .hero__qr img { width: 140px; height: 140px; }
}

.hero--compact .hero__portrait {
  --portrait-gap: 8px;
}
.hero--compact .hero__avatar {
  font-size: 1.6rem;
}

/* Organisation logo tile instead of a round portrait. */
.hero__logo-tile {
  width: 104px;
  height: 104px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: #fff;
  color: var(--navy-900);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.55);
  animation: se-pop 600ms var(--ease-out) both 80ms;
}

@media (max-width: 900px) {
  .hero__body {
    grid-template-columns: auto minmax(0, 1fr);
    padding: var(--space-6) var(--space-5) var(--space-5);
    gap: var(--space-5);
  }

  .hero__actions {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    min-width: 0;
  }
}

@media (max-width: 600px) {
  .hero__body {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }

  .hero__portrait {
    width: 104px;
    height: 104px;
    --portrait-gap: 9px;
  }

  /* Identity hero portrait shrinks on phones too (its desktop rule is more
     specific, so it must be overridden at matching specificity). The ring SVG
     scales down uniformly from its 160px viewBox, staying crisp and concentric. */
  .idhero__photo .hero__portrait {
    width: 128px;
    height: 128px;
    --portrait-gap: 11px;
  }

  .hero__avatar {
    font-size: 1.8rem;
  }

  .idhero__photo .hero__avatar {
    font-size: 2rem;
  }

  .hero__actions .btn {
    flex: 1 1 auto;
  }

  .hero__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-fact:nth-child(odd) {
    border-left: 0;
  }

  .hero-fact {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }

  .hero::before,
  .hero::after {
    width: 220px;
  }
}

/* Completion ring (SVG): stroke animates from 0 to the value. */
.ring__track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.14);
}

.ring__value {
  fill: none;
  stroke: var(--lime-400);
  stroke-linecap: round;
  transition: stroke-dashoffset 1100ms var(--ease-out);
  /* Softer, tighter glow so it does not bleed inward across the gap and touch
     the photo (the previous 6px glow visually overlapped the image). */
  filter: drop-shadow(0 0 3px rgba(166, 205, 62, 0.35));
}

.ring--light .ring__track {
  stroke: var(--ink-200);
}

.ring--light .ring__value {
  filter: none;
}

/* Linear progress meter */
.meter {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: var(--ink-100);
  overflow: hidden;
}

.meter__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--lime-500), var(--lime-400));
  transition: width 900ms var(--ease-out);
}

/* ── Info cards grid (profile overview) ─────────────────────────────────── */
.bento {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.bento > * {
  grid-column: span 6;
  margin: 0 !important;
}

.bento > .span-4 { grid-column: span 4; }
.bento > .span-8 { grid-column: span 8; }
.bento > .span-12 { grid-column: span 12; }

@media (max-width: 960px) {
  .bento > *,
  .bento > .span-4,
  .bento > .span-8 {
    grid-column: span 6;
  }
}

@media (max-width: 720px) {
  .bento > *,
  .bento > .span-4,
  .bento > .span-8,
  .bento > .span-12 {
    grid-column: span 12;
  }
}

.bento > * {
  animation: se-fade-up var(--dur-slow) var(--ease-out) both;
}
.bento > *:nth-child(2) { animation-delay: 40ms; }
.bento > *:nth-child(3) { animation-delay: 80ms; }
.bento > *:nth-child(4) { animation-delay: 120ms; }
.bento > *:nth-child(5) { animation-delay: 160ms; }
.bento > *:nth-child(n + 6) { animation-delay: 200ms; }

/* Attribute tiles (cricket identity, physical) */
.attr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  gap: var(--space-3);
}

.attr {
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--color-surface-alt);
  border: 1px solid var(--ink-100);
  min-width: 0;
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}

.attr:hover {
  border-color: var(--navy-100);
  background: var(--navy-50);
}

.attr__label {
  display: block;
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.attr__value {
  display: block;
  margin-top: 2px;
  font-weight: 650;
  color: var(--navy-900);
  overflow-wrap: anywhere;
}

.attr__value--big {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
}

.attr__unit {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  margin-left: 2px;
}

.attr--empty .attr__value {
  color: #98a2b3;
  font-weight: 450;
}

/* Score bars (assessments) */
.score-bars {
  display: grid;
  gap: var(--space-3);
}

.score-bar {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) 3rem;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
}

.score-bar__label {
  color: var(--ink-700);
  font-weight: 550;
}

.score-bar__value {
  text-align: right;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy-900);
  font-variant-numeric: tabular-nums;
}

/* Timeline (achievements / history) */
.timeline {
  position: relative;
  margin: 0;
  padding: 0 0 0 var(--space-5);
  list-style: none;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(var(--navy-100), var(--ink-100));
}

.timeline__item {
  position: relative;
  padding-bottom: var(--space-5);
}

.timeline__item:last-child {
  padding-bottom: 0;
}

.timeline__item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-5) + 1px);
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--navy-700);
}

.timeline__item--accent::before {
  border-color: var(--lime-500);
  background: var(--lime-100);
}

.timeline__date {
  font-size: var(--font-size-xs);
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.timeline__title {
  margin: 2px 0;
  font-weight: 700;
  color: var(--navy-900);
}

.timeline__meta {
  font-size: var(--font-size-sm);
  color: var(--ink-600);
}

/* Section nav for long edit forms (sticky on desktop) */
.edit-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.section-nav {
  position: sticky;
  top: calc(var(--header-height) + var(--space-5));
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.section-nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 9px var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--ink-600);
  font-size: var(--font-size-sm);
  font-weight: 600;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}

.section-nav__link:hover {
  background: var(--ink-100);
  color: var(--navy-900);
  text-decoration: none;
}

.section-nav__link--active {
  background: var(--navy-50);
  color: var(--navy-900);
  box-shadow: inset 3px 0 0 var(--lime-400);
}

.section-nav__num {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--ink-100);
  color: var(--ink-600);
  font-size: 0.7rem;
  font-weight: 700;
}

.section-nav__link--active .section-nav__num {
  background: var(--navy-900);
  color: var(--lime-300);
}

.form-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  margin: var(--space-6) calc(-1 * var(--space-5)) calc(-1 * var(--space-5));
  padding: var(--space-4) var(--space-5);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.form-actions__note {
  margin-right: auto;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

@media (max-width: 900px) {
  .edit-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .section-nav {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .section-nav__link {
    flex: none;
  }
}

@media (max-width: 480px) {
  .form-actions {
    flex-wrap: wrap;
  }

  .form-actions .btn {
    flex: 1 1 auto;
  }

  .form-actions__note {
    flex-basis: 100%;
  }
}

/* Step list (next steps / checklist) */
.steps {
  display: grid;
  gap: var(--space-2);
}

.step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius);
  border: 1px solid var(--ink-100);
  background: var(--color-surface-alt);
  font-size: var(--font-size-sm);
}

.step__mark {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--ink-300);
  background: #fff;
}

.step--done .step__mark {
  border-color: var(--lime-500);
  background: var(--lime-400)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23012350' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 8.5 2.5 2.5L12 5.5'/%3E%3C/svg%3E")
    center / 12px no-repeat;
}

.step--done .step__text {
  color: var(--color-text-muted);
}

.step__text {
  flex: 1;
  font-weight: 550;
  color: var(--ink-700);
}

/* Person / athlete list card */
.person {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.person__text {
  min-width: 0;
}

.person__name {
  display: block;
  font-weight: 700;
  color: var(--navy-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person__meta {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Copy-to-clipboard toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-6);
  z-index: 60;
  transform: translateX(-50%);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius);
  background: var(--navy-900);
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  animation: se-fade-up var(--dur) var(--ease-out) both;
}

.toast::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: var(--space-2);
  border-radius: 50%;
  background: var(--lime-400);
}

.hero .kicker {
  color: var(--lime-300);
}

/* Assessment score inputs (range + number) */
.score-input {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) 4.5rem;
  align-items: center;
  gap: var(--space-3);
}

.score-input .field__input {
  min-height: 36px;
  padding: 6px 8px;
  text-align: center;
}

.score-range {
  width: 100%;
  accent-color: var(--navy-900);
  cursor: pointer;
}

@media (max-width: 480px) {
  .score-input {
    grid-template-columns: minmax(0, 1fr) 4.5rem;
  }

  .score-input .score-range {
    grid-column: 1 / -1;
    order: 3;
  }
}

/* Label + chips group inside a card */
.value-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stack > .value-group + .value-group {
  margin-top: var(--space-5);
}

.score-range.is-unset {
  opacity: 0.4;
  filter: grayscale(1);
}

/* ── Athlete Identity Card (athlete-profile-view.js#playerHero) ─────────── */
.idhero__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-6);
  align-items: start;
  padding: var(--space-6) var(--space-6) var(--space-5);
}

/* LEFT: photo + readiness */
.idhero__photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-1);
}

/* The portrait box is sized to match the ring SVG's own pixel space
   (heroPortrait draws the ring at 160px), so viewBox === rendered size: the
   ring is crisp and truly concentric with the photo. The photo diameter is
   160 - 2*gap = 134px — a generous, balanced avatar for this card. */
.idhero__photo .hero__portrait {
  width: 160px;
  height: 160px;
  --portrait-gap: 13px;
}

.idhero__photo .hero__avatar {
  font-size: 2.6rem;
}

.idhero__readiness {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1.05;
}

.idhero__readiness strong {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--lime-300);
}

.idhero__readiness span {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

/* With the readiness figure shown below, the ring's own % pill is redundant.
   The explicit marker class is the primary rule (works everywhere); the :has()
   rule is kept as a progressive enhancement for any dynamically-built markup. */
.idhero__photo--has-readiness .hero__ring-label,
.idhero__photo:has(.idhero__readiness) .hero__ring-label {
  display: none;
}

/* CENTER */
.idhero__main {
  min-width: 0;
}

.idhero__namerow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  flex-wrap: wrap;
  margin: 6px 0 6px;
}

.idhero__namerow .hero__name {
  margin: 0;
}

.idhero__namerow .idhero__actions {
  margin: 0;
}

.idhero__namerow .btn {
  min-height: 38px;
  padding: 0 14px;
  font-size: var(--font-size-sm);
}

/* ROLE | BATTING | BOWLING — the card's primary cricket facts. */
.idcricket {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: var(--space-4);
}

.idfield {
  position: relative;
  min-width: 0;
  padding: 12px 14px 12px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.idfield::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--lime-400);
}

.idfield__label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime-300);
}

.idfield__value {
  display: block;
  margin-top: 3px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.idfield__sub {
  display: block;
  margin-top: 1px;
  font-size: var(--font-size-xs);
  color: rgba(226, 235, 246, 0.7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.idfield--empty::before {
  background: rgba(255, 255, 255, 0.2);
}

.idfield--empty .idfield__label {
  color: rgba(226, 235, 246, 0.6);
}

.idfield--empty .idfield__value {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.42);
}

.iddetails {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.15fr) minmax(0, 1.5fr);
  gap: 0;
  margin: 10px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(1, 21, 47, 0.28);
  overflow: hidden;
}

.iddetail {
  min-width: 0;
  padding: 12px 14px;
}

.iddetail + .iddetail {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.iddetail dt {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.iddetail dd {
  margin: 3px 0 0;
  font-weight: 650;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.iddetail--empty dd {
  font-size: 0.92rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
}

/* Owner's empty field: a quiet, actionable "+ Add" chip that deep-links to the
   existing edit flow — makes missing data feel completable, not like an error.
   Lime affordance on hover/focus; keyboard-focusable (it is an <a>). */
.iddetail__add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 1px;
  padding: 2px 9px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--lime-300, #c3e078);
  background: rgba(166, 205, 62, 0.1);
  border: 1px dashed rgba(166, 205, 62, 0.4);
  border-radius: 999px;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.iddetail__add:hover {
  background: rgba(166, 205, 62, 0.2);
  border-color: var(--lime-400);
  color: #fff;
}
.iddetail__add:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(166, 205, 62, 0.5);
  border-style: solid;
}

/* De-duplicated bottom summary strip: it now carries at most one unique fact
   (Highest level / Experience), so centre it and let it read as a quiet footer
   rather than a full-width 3-column band competing with the details grid. */
.hero__facts--summary {
  grid-template-columns: auto;
  justify-content: start;
}
.hero__facts--summary .hero-fact {
  padding: var(--space-3) var(--space-5);
}
.hero__facts--summary .hero-fact + .hero-fact { border-left: 1px solid rgba(255, 255, 255, 0.08); }

@media (prefers-reduced-motion: reduce) {
  .iddetail__add { transition: none; }
}
/* Very small phones: the add-chip and details stay comfortable; the summary
   strip spans full width so the single fact isn't cramped against the edge. */
@media (max-width: 480px) {
  .hero__facts--summary { justify-content: stretch; }
  .hero__facts--summary .hero-fact { width: 100%; }
}

.idhero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* RIGHT: QR column */
.idhero__qr {
  width: 172px;
  padding-top: var(--space-1);
}

.idpanel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.idpanel__qr {
  align-self: center;
  width: 136px;
  padding: 9px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 36px -16px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.4);
  animation: se-pop 600ms var(--ease-out) both 160ms;
}

.idpanel__qr svg, .idpanel__qr img {
  display: block;
  width: 100%;
  height: auto;
}

.idpanel__scan {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lime-300);
}

.idpanel__actions {
  display: grid;
  gap: 6px;
}

.idpanel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 8px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font: inherit;
  font-size: var(--font-size-xs);
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

.idpanel__btn svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.idpanel__btn:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.5);
}

.idpanel__btn:active {
  transform: scale(0.98);
}

.idpanel__btn--primary {
  background: var(--lime-400);
  border-color: var(--lime-500);
  color: var(--navy-900);
}

.idpanel__btn--primary:hover {
  background: var(--lime-500);
  border-color: var(--lime-500);
}

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

.idpanel__note {
  margin: 0;
  font-size: 0.72rem;
  text-align: center;
  color: rgba(226, 235, 246, 0.7);
}

/* Tablet: photo + identity on top, QR beside the details below. */
@media (max-width: 1100px) {
  .iddetails {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .iddetail:nth-child(4) {
    border-left: 0;
  }

  .iddetail:nth-child(n + 4) {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
}

@media (max-width: 900px) {
  .idhero__body {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-5);
    padding: var(--space-5);
  }

  .idhero__qr {
    grid-column: 1 / -1;
    width: 100%;
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .idpanel {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    grid-template-areas: 'qr scan' 'qr actions';
    align-content: center;
    align-items: center;
    column-gap: var(--space-5);
    row-gap: 8px;
  }

  .idpanel__qr { grid-area: qr; width: 120px; }
  .idpanel__scan { grid-area: scan; text-align: left; }
  .idpanel__actions { grid-area: actions; grid-template-columns: 1fr 1fr; max-width: 340px; }

  .idhero__photo .hero__portrait {
    width: 112px;
    height: 112px;
  }

  .idhero__photo .hero__avatar {
    inset: 10px;
    font-size: 1.9rem;
  }
}

/* Phone: one column; QR centred. */
@media (max-width: 600px) {
  .idhero__body {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
  }

  .idhero__photo {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--space-4);
    padding-top: 0;
  }

  .idhero__readiness {
    align-items: flex-start;
  }

  .iddetails {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .iddetail:nth-child(n) {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .iddetail:nth-child(-n + 2) {
    border-top: 0;
  }

  .iddetail:nth-child(even) {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
  }

  .iddetail:last-child {
    grid-column: 1 / -1;
    border-left: 0;
  }

  .idcricket {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  /* Compact rows on phones: label left, value (and detail) right. */
  .idfield {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    column-gap: 10px;
    align-items: center;
    padding: 9px 12px 9px 14px;
  }

  .idfield__label { grid-column: 1; grid-row: 1 / span 2; }
  .idfield__value { grid-column: 2; margin-top: 0; font-size: 0.98rem; }
  .idfield__sub { grid-column: 2; }

  .idpanel {
    grid-template-columns: 112px minmax(0, 1fr);
    column-gap: var(--space-4);
  }

  .idpanel__qr { width: 112px; }
  .idpanel__actions { grid-template-columns: minmax(0, 1fr); max-width: none; }
}

/* Profile photo (S3-backed) — fills the same circular avatar footprint as the
   initials fallback. Uses the existing .hero__avatar positioning (absolute,
   inset:var(--portrait-gap), border-radius:50%). The image must cover that
   circle exactly: square aspect, centred crop, clipped to the circle, and a
   neutral background so there is no layout shift or flash while it loads. */
.hero__avatar--photo {
  display: block;
  /* Inherits the centred-square geometry from .hero__avatar (width == height ==
     diameter, centred by transform). box-sizing keeps the 3px border INSIDE the
     square so the image stays a true circle; object-fit crops any aspect ratio
     to a centred, face-safe fill. */
  box-sizing: border-box;
  object-fit: cover;
  object-position: center;
  overflow: hidden;
  padding: 0;
  background: var(--color-surface-alt);
  background-clip: padding-box;
}

/* Owner photo-upload control under the hero portrait. */
.idhero__photo-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  text-align: center;
}
/* The actions wrapper now holds only the hidden file input and the SR-only
   status live region, so it must not reserve any visible vertical space (that
   would push the readiness figure down and look like an inconsistent gap). */
.idhero__photo-actions:empty,
.idhero__photo-actions { margin: 0; }
.idhero__photo-actions .btn[aria-disabled='true'] {
  opacity: 0.55;
  pointer-events: none;
}

/* ── Dialog (js/ui/dialog.js) ───────────────────────────────────────────── */
.dialog {
  width: min(560px, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 0;
  border-radius: var(--radius-xl);
  background:
    linear-gradient(90deg, rgba(166, 205, 62, 0), var(--lime-400) 30%, var(--lime-400) 70%, rgba(166, 205, 62, 0)) top center / calc(100% - 3rem) 3px no-repeat,
    var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 24px 48px -20px rgba(1, 21, 47, 0.55), 0 60px 120px -40px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  animation: se-dialog-in 260ms var(--ease-out) both;
}
.dialog[open] {
  display: flex;
  flex-direction: column;
}
.dialog--wide {
  width: min(820px, calc(100vw - 2rem));
}
.dialog::backdrop {
  background: rgba(1, 21, 47, 0.62);
  backdrop-filter: blur(3px);
  animation: se-fade 200ms ease both;
}
.dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5) var(--space-3);
}
.dialog__title {
  margin: 2px 0 0;
  font-size: var(--font-size-xl, 1.3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy-900);
}
.dialog__close {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--ink-700);
  cursor: pointer;
}
.dialog__close:hover { background: var(--navy-50); color: var(--navy-900); }
.dialog__close:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.dialog__close svg { width: 18px; height: 18px; }
.dialog__body {
  display: grid;
  gap: var(--space-4);
  padding: 0 var(--space-5) var(--space-4);
  overflow-y: auto;
  min-height: 0;
}
.dialog__message {
  margin: 0;
  color: var(--ink-700);
  line-height: 1.55;
}
.dialog__actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-alt, #f8fafc);
}
@keyframes se-dialog-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes se-dialog-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(8px) scale(0.985); }
}
@keyframes se-fade {
  from { opacity: 0; }
}
/* Graceful close: JS adds .dialog--closing, waits for this to finish, then
   removes the node. transform+opacity only (compositor-friendly). */
.dialog--closing { animation: se-dialog-out 160ms var(--ease-standard, ease) both; }
.dialog--closing::backdrop { animation: se-fade 160ms ease reverse both; }
@media (prefers-reduced-motion: reduce) {
  .dialog { animation: none !important; }
  .dialog--closing { animation: none !important; }
}
.btn--danger-solid {
  background: var(--color-error);
  border-color: var(--color-error);
  color: #fff;
}
.btn--danger-solid:hover:not(:disabled) {
  background: #a3290a;
  border-color: #a3290a;
  color: #fff;
}
@media (max-width: 600px) {
  .dialog {
    width: 100vw;
    max-width: 100vw;
    max-height: 92dvh;
    margin: auto 0 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }
  .dialog__actions .btn { flex: 1 1 auto; }
}

/* Skeleton rows/tiles for in-card loading */
.skeleton--row { height: 64px; margin-bottom: var(--space-2); border-radius: var(--radius); }
.skeleton--tile { height: 92px; border-radius: var(--radius-lg); }

/* ── Performances (js/ui/performance-panel.js) ─────────────────────────── */
.perf-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}
.perf-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.perf-row {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--ink-200);
  border-radius: var(--radius);
  background: var(--color-surface);
  animation: se-fade-up 360ms var(--ease-out) both;
}
.perf-row[data-status='VERIFIED'] { border-left-color: var(--lime-500); }
.perf-row[data-status='PENDING'] { border-left-color: #f0b429; }
.perf-row[data-status='REJECTED'] { border-left-color: var(--color-error); }
.perf-row__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.perf-row__title {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.perf-row__title strong {
  color: var(--navy-900);
  font-size: 1.02rem;
  overflow-wrap: anywhere;
}
.perf-row__head .badge { flex: none; }
.perf-row__lines {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.perf-figure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--navy-50);
  font-size: var(--font-size-sm);
}
.perf-figure svg { width: 15px; height: 15px; flex: none; color: var(--navy-700); }
.perf-figure__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lime-ink);
}
.perf-figure__value {
  font-weight: 600;
  color: var(--navy-900);
  overflow-wrap: anywhere;
}
.perf-row__notes {
  margin: 0;
  color: var(--ink-700);
  white-space: pre-line;
}
.perf-row__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.perf-form .grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.perf-form__group {
  margin: 0;
  padding: var(--space-3) var(--space-4) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.perf-form__group legend {
  padding: 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lime-ink);
}
.perf-form__static {
  margin: 0;
  padding: 10px 0;
  font-weight: 600;
  color: var(--navy-900);
}
@media (max-width: 900px) {
  .perf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .perf-form .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perf-row__head { flex-direction: column; }
  .perf-row__actions .btn { flex: 1 1 auto; }
}

/* ── Observations (js/ui/observations-panel.js) ────────────────────────── */
.obs-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.obs-item {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.obs-item.is-new {
  border-color: var(--lime-500);
  box-shadow: 0 0 0 4px rgba(166, 205, 62, 0.18);
  animation: se-fade-up 420ms var(--ease-out) both;
}
.obs-item__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.obs-item__vis {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--ink-600, #4e5866);
}
.obs-item__vis svg { width: 14px; height: 14px; }
.obs-item__mine {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--navy-900);
  color: var(--lime-400);
  font-size: 0.7rem;
  font-weight: 700;
}
.obs-item__date { margin-left: auto; }
.obs-item__text {
  margin: 0;
  color: var(--ink-900, #151920);
  line-height: 1.55;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* ── Organisation staff, invitations, trial form ───────────────────────── */
.staff-list li { gap: var(--space-3); flex-wrap: wrap; }
.staff-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.staff-role {
  width: auto;
  min-width: 132px;
  min-height: 36px !important;
  padding-top: 4px;
  padding-bottom: 4px;
}
.staff-you {
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--navy-900);
  color: var(--lime-400);
  font-size: 0.7rem;
  font-weight: 700;
  vertical-align: middle;
}
.invite-link {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px dashed var(--lime-500);
  border-radius: var(--radius);
  background: rgba(166, 205, 62, 0.08);
}
.invite-link__row {
  display: flex;
  gap: var(--space-2);
  min-width: 0;
}
.invite-link__row .field__input { flex: 1 1 auto; min-width: 0; font-size: var(--font-size-sm); }
.invite-card { max-width: 640px; }
.invite-who {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.invite-hint a { font-weight: 700; text-decoration: underline; }
.trial-form__static {
  margin: 0;
  padding: 10px 0 2px;
  font-weight: 600;
  color: var(--navy-900);
}
@media (max-width: 600px) {
  .staff-controls { width: 100%; }
  .staff-controls > * { flex: 1 1 auto; }
  .invite-link__row { flex-direction: column; }
}

/* Avatar image (central profile photo) — fills the circular avatar. */
.avatar__img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* ── QR scanner dialog (js/ui/qr-scanner.js) ───────────────────────────── */
.qrscan {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(360px, 82vw);
}
.qrscan__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #0b1220;
  box-shadow: inset 0 0 0 1px var(--color-border);
}
.qrscan__frame[hidden] { display: none; }
.qrscan__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.qrscan__reticle {
  position: absolute;
  inset: 16%;
  border-radius: 12px;
  box-shadow: 0 0 0 100vmax rgba(11, 18, 32, 0.45);
  pointer-events: none;
}
.qrscan__reticle::before,
.qrscan__reticle::after,
.qrscan__reticle {
  --c: var(--color-accent, #c6f135);
}
.qrscan__reticle::before,
.qrscan__reticle::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border: 3px solid var(--c);
}
.qrscan__reticle::before { top: -3px; left: -3px; border-right: none; border-bottom: none; border-top-left-radius: 10px; }
.qrscan__reticle::after { bottom: -3px; right: -3px; border-left: none; border-top: none; border-bottom-right-radius: 10px; }
.qrscan__status {
  margin: 0;
  text-align: center;
  font-size: 0.86rem;
  color: var(--color-text-muted);
}
.qrscan__status--warn { color: var(--color-danger, #b4232a); }
.qrscan__manual {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}
.qrscan__or {
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.qrscan__manual-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.qrscan__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  font-size: 0.95rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.qrscan__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.qrscan__input--err {
  border-color: var(--color-danger, #b4232a);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger, #b4232a) 16%, transparent);
}
.qrscan__use { flex: 0 0 auto; white-space: nowrap; }

/* ── ScoutEdge LIVE gateway (js/ui/live-gateway.js) ────────────────────────
   A deliberately premium, dark surface so launching LIVE feels like entering a
   different product. Navy base + lime accent (brand), subtle glow. */
.live-gateway {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg, 14px);
  background: linear-gradient(135deg, var(--navy-900, #012350) 0%, var(--navy-700, #1c3d72) 100%);
  color: #fff;
  box-shadow: 0 10px 30px -12px rgba(1, 35, 80, 0.55);
}
.live-gateway__glow {
  position: absolute;
  top: -40%;
  right: -10%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, color-mix(in srgb, var(--lime-400, #a6cd3e) 55%, transparent) 0%, transparent 70%);
  filter: blur(10px);
  opacity: 0.5;
  pointer-events: none;
}
.live-gateway__body {
  position: relative;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.live-gateway__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.live-gateway__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--navy-900, #012350);
  background: var(--lime-400, #a6cd3e);
  border-radius: 999px;
}
.live-gateway__badge svg { width: 13px; height: 13px; }
.live-gateway__plan {
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, #fff 72%, transparent);
}
.live-gateway__title {
  margin: 2px 0 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
}
.live-gateway__lede {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: color-mix(in srgb, #fff 80%, transparent);
  max-width: 48ch;
}

/* The LIVE action button — lime, used in the gateway and per-athlete rows. */
.btn--live {
  background: var(--lime-400, #a6cd3e);
  color: var(--navy-900, #012350);
  border: 0;
  font-weight: 700;
  align-self: flex-start;
  margin-top: 6px;
}
.btn--live:hover { background: var(--lime-500, #97bf31); }
.btn--live:disabled { opacity: 0.55; cursor: not-allowed; }
.btn--live svg { width: 15px; height: 15px; }
/* Compact per-row variant sits inline with the status badge (no top margin). */
.item-list .btn--live.btn--sm { margin-top: 0; align-self: center; }

/* ── File inputs (evidence/media upload) ───────────────────────────────────
   Authoritative styling that wins over .field__input (components.css loads
   after base.css). A branded, dropzone-like control with a lime action button,
   instead of the browser default / an awkward text-box look. Uses real app
   tokens (navy/lime). Applies on dashboard pages (.app scope). */
.app input[type="file"],
.app input[type="file"].field__input {
  display: block;
  width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  padding: 9px 12px;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  background: var(--navy-50);
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-md, 10px);
  box-shadow: none;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.app input[type="file"]:hover,
.app input[type="file"].field__input:hover {
  border-color: var(--lime-500);
  background: var(--lime-50);
}
.app input[type="file"]:focus-visible { outline: none; box-shadow: var(--ring-focus); border-style: solid; }
.app input[type="file"]::file-selector-button {
  font: inherit;
  font-weight: 700;
  margin-right: 14px;
  padding: 8px 16px;
  color: var(--navy-900);
  background: var(--lime-400);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}
.app input[type="file"]::file-selector-button:hover { background: var(--lime-500); }
.app input[type="file"]::-webkit-file-upload-button {
  font: inherit; font-weight: 700; margin-right: 14px; padding: 8px 16px;
  color: var(--navy-900); background: var(--lime-400); border: 0; border-radius: var(--radius-sm); cursor: pointer;
}

/* Upload progress — brand the native <progress> on dashboard pages. */
.app progress {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 8px; border: 0; border-radius: 999px; overflow: hidden;
  background: var(--color-surface-sunken, #eef2f7);
}
.app progress::-webkit-progress-bar { background: var(--color-surface-sunken, #eef2f7); border-radius: 999px; }
.app progress::-webkit-progress-value { background: var(--lime-500); border-radius: 999px; transition: width var(--dur) var(--ease-standard); }
.app progress::-moz-progress-bar { background: var(--lime-500); border-radius: 999px; }

/* Phone field: dial-code select + national number on one row (geo-fields.js
   and the SE-auth onboarding form). The dial select is sized to its content;
   the number input takes the rest. */
.phone-field {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
}
.phone-field .phone__dial {
  flex: 0 0 auto;
  max-width: 46%;
  min-width: 7.5rem;
}
.phone-field .phone__number {
  flex: 1 1 auto;
  min-width: 0;
}
/* Host span that swaps the state <select> / <input> keeps the control
   full-width like any other field control. */
.field__control-host { display: block; }
.field__control-host > select,
.field__control-host > input { width: 100%; }