/* Shared finish for the existing WCWA shells. Load after their lane styles. */

/* The public pages keep their photographic/editorial layout and route-specific cards. */
body:not(.ops-body) main :is(input, select, textarea):focus-visible {
  outline: 3px solid var(--navy-2, #174e7a);
  outline-offset: 2px;
}

/* Admin, coach, and parent use the same Lovable surface and type tokens. */
.ops-body:not(.ops-kiosk) {
  --ops-bg: var(--cream);
  --ops-border: var(--line);
  --ops-text: var(--charcoal);
  --ops-muted: #596671;
  --ops-blue: var(--navy-2);
}

.ops-body:not(.ops-kiosk) .ops-card,
.ops-body:not(.ops-kiosk) .ops-metric-grid article {
  border-color: var(--line);
  border-radius: var(--radius, 10px);
  background-color: var(--paper);
  box-shadow: var(--shadow-card);
}

.ops-body:not(.ops-kiosk) .ops-page-heading h1 {
  color: var(--navy);
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .005em;
  line-height: 1.05;
}

.ops-body:not(.ops-kiosk) :is(.ops-kicker, .ops-section-title > span, .ops-card-title > span) {
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ops-body:not(.ops-kiosk) :is(.ops-section-title h2, .ops-card-title h2) {
  color: var(--navy);
  line-height: 1.25;
}

.ops-body:not(.ops-kiosk) :is(.ops-primary-button, .ops-secondary-button, .ops-outline-button) {
  border-radius: 8px;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.ops-body:not(.ops-kiosk) :is(.ops-primary-button, .ops-secondary-button, .ops-outline-button):focus-visible,
.ops-body:not(.ops-kiosk) :is(input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--navy-2);
  outline-offset: 2px;
}

.ops-body:not(.ops-kiosk) .ops-form-stack :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-width: 0;
  border-color: var(--line);
  border-radius: 8px;
  color: var(--charcoal);
}

.ops-body:not(.ops-kiosk) .ops-form-stack :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
  border-color: var(--navy-2);
}

.ops-body:not(.ops-kiosk) .ops-table-wrap { max-width: 100%; overflow-x: auto; }
.ops-body:not(.ops-kiosk) .ops-table { font-size: 14px; line-height: 1.45; }
.ops-body:not(.ops-kiosk) .ops-table th {
  border-color: var(--line);
  color: #52616d;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}
.ops-body:not(.ops-kiosk) .ops-table td { border-color: var(--line); color: var(--charcoal); }
.ops-body:not(.ops-kiosk) .ops-table tbody tr:hover { background: #fbf9f5; }

.ops-body:not(.ops-kiosk) .ops-alert { border-radius: 10px; line-height: 1.5; }
.ops-body:not(.ops-kiosk) .ops-status { line-height: 1.25; }

/* Keep the kiosk dark and its keypad geometry intact; improve only focus visibility. */
.ops-kiosk :is(.kiosk-keypad button, .kiosk-submit, .kiosk-action, .kiosk-pin-input):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

@media (max-width: 720px) {
  .ops-body:not(.ops-kiosk) .ops-page-heading { gap: 14px; }
  .ops-body:not(.ops-kiosk) .ops-card { min-width: 0; }
  .ops-body:not(.ops-kiosk) .ops-table { min-width: max-content; }
}

@media (prefers-reduced-motion: reduce) {
  .ops-body:not(.ops-kiosk) :is(.ops-primary-button, .ops-secondary-button, .ops-outline-button) {
    transition: none;
  }
}