/* CueTracker shared foundation v1. Keep identical in both app repositories.
   Opt-in only: setup, live play, scoring and controller screens are excluded. */
:root {
  --ct-font: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --ct-radius: 12px;
  --ct-control-radius: 8px;
  --ct-gutter: 12px;
  --ct-panel-padding: 18px;
}
@media (min-width: 600px) { :root { --ct-gutter: 24px; --ct-panel-padding: 22px; } }
@media (min-width: 1200px) { :root { --ct-gutter: 32px; --ct-panel-padding: 28px; } }

[data-ct-surface] {
  --ct-accent: var(--yellow, var(--gold));
  --ct-border: var(--line, var(--border));
  --ct-surface: var(--card, var(--surface));
  --ct-muted: var(--muted, var(--text-muted));
  font-family: var(--ct-font);
  line-height: 1.5;
  box-sizing: border-box;
  width: min(1200px, calc(100% - 2 * var(--ct-gutter)));
  max-width: 1200px;
  margin-inline: auto;
  padding: 24px 0 60px;
  min-width: 0;
}
[data-ct-surface="auth"] {
  width: min(600px, calc(100% - 2 * var(--ct-gutter)));
  max-width: 600px;
  min-height: 0;
  padding-block: 24px 60px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
}
[data-ct-surface] :is(button, input, select, textarea) { font-family: var(--ct-font); }
[data-ct-surface] :is(.card, .panel, .extras-card, .tutorial-resources-card) {
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-radius);
  background: var(--ct-surface);
  box-shadow: none;
}
[data-ct-surface] :is(.card, .auth-card) { padding: var(--ct-panel-padding); }
[data-ct-surface] :is(.btn, .button, .google-button) {
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.3;
  border-radius: var(--ct-control-radius);
  white-space: normal;
}
[data-ct-surface] :is(.btn, .button, .google-button):not(.btn-sm):not(.small) {
  min-height: 44px;
  padding: 12px 16px;
}
[data-ct-surface] :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
  min-height: 44px;
  font-size: 1rem;
  line-height: 1.4;
  border-radius: var(--ct-control-radius);
}
[data-ct-surface] :is(button, input, select, textarea, a):focus-visible {
  outline: 3px solid var(--ct-accent);
  outline-offset: 3px;
}
[data-ct-surface] :is(.muted, .text-muted) { color: var(--ct-muted); }
[data-ct-surface] :is(.btn, .button):disabled { cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {
  [data-ct-surface] :is(button, a, input, select, textarea) { transition: none; }
}

/* Shared public account screens; authentication handlers remain app-specific. */
[data-ct-surface="auth"] :is(.auth-card, .card) { width: 100%; max-width: none; }
[data-ct-surface="auth"] h2 { font-size: 1.25rem; line-height: 1.3; margin: 0 0 20px; }
[data-ct-surface="auth"] label {
  display: block; margin: 0 0 4px; color: var(--ct-muted);
  font-size: .85rem; font-weight: 400; line-height: 1.5;
}
[data-ct-surface="auth"] label:has(input) { margin: 0; }
[data-ct-surface="auth"] label > span { display: block; margin-bottom: 4px; }
[data-ct-surface="auth"] input { padding: 10px 14px; margin: 0 0 12px; border-width: 1px; }
[data-ct-surface="auth"] :is(.btn-primary, .button.primary) {
  width: 100%; height: auto; min-height: 46px; margin: 0; border-width: 1px;
}
[data-ct-surface="auth"] .ct-auth-links {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 4px 8px; height: auto; margin: 8px 0 4px; color: var(--ct-muted); font-size: .85rem;
}
[data-ct-surface="auth"] :is(.ct-auth-links button, #back-login, .ct-auth-signin) {
  padding: 8px 0; margin: 0; min-height: 44px; background: none; border: 0;
  color: var(--ct-accent); font-size: .85rem; font-weight: 600; line-height: 1.5;
  text-decoration: underline; cursor: pointer;
}
[data-ct-surface="auth"] .ct-google-button {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: auto; min-height: 46px; margin: 0; padding: 12px 16px;
  border: 1px solid #dadce0; background: #fff; color: #1f1f1f; font-weight: 600;
}
[data-ct-surface="auth"] .ct-google-button :is(svg, img) { width: 18px; height: 18px; flex: 0 0 18px; }
[data-ct-surface="auth"] #auth-submit { height: auto; border: 1px solid transparent; }
[data-ct-surface="auth"] .ct-auth-back {
  width: 100%; min-height: 46px; margin: 10px 0 0;
  background: transparent; color: var(--ct-muted); border: 1px solid var(--ct-border);
}
[data-ct-surface="auth"] :is(.auth-or, .ct-auth-or) {
  display: flex; align-items: center; gap: 10px; margin: 10px 0 14px;
  color: var(--ct-muted); font-size: .78rem; font-weight: 400; line-height: 1.5;
}
[data-ct-surface="auth"] :is(.auth-or, .ct-auth-or)::before,
[data-ct-surface="auth"] :is(.auth-or, .ct-auth-or)::after {
  content: ''; flex: 1; height: 1px; background: var(--ct-border);
}
[data-ct-surface="auth"] .form-error:empty { display: none; }
[data-ct-surface="home"] :is(.home-logo h1, .dashboard-intro h1) { font-size: 2rem; }
[data-ct-surface="home"] :is(.home-logo-tracker) { font-size: .85em; letter-spacing: 1.5px; }