/* Student Apps Design System v1 - legacy flagship bridge.
 * Keeps the current collectible-card identity while sourcing shared semantic tokens
 * and interaction rules. Remove this bridge after config-backed flagship migration.
 */
body[data-style-preset="flagship"]{
  --bg:var(--sd-canvas);
  --surface:var(--sd-surface);
  --ink:var(--sd-text-primary);
  --muted:var(--sd-text-secondary);
  --accent:var(--sd-accent);
  --accent-2:var(--sd-secondary);
  --violet:var(--sd-secondary);
  --line:var(--sd-border);
  --soft:var(--sd-accent-soft);
  --soft-violet:var(--sd-secondary-soft);
  --shadow:var(--sd-shadow-float);
  --shadow-soft:var(--sd-shadow-card);
}

body[data-style-preset="flagship"] .site-header{
  color:var(--sd-text-primary);
  border-color:color-mix(in srgb,var(--sd-border) 82%,transparent);
  background:color-mix(in srgb,var(--sd-surface) 86%,transparent);
}
body[data-style-preset="flagship"] .brand{color:var(--sd-text-primary)}
body[data-style-preset="flagship"] .kicker{
  color:var(--sd-accent);
  border-color:color-mix(in srgb,var(--sd-accent) 18%,var(--sd-border));
  background:linear-gradient(135deg,var(--sd-accent-soft),var(--sd-secondary-soft));
}
body[data-style-preset="flagship"] .title-gradient{
  background:linear-gradient(110deg,var(--sd-accent),var(--sd-secondary) 62%,color-mix(in srgb,var(--sd-secondary) 62%,var(--sd-accent)));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
body[data-style-preset="flagship"] .panel,
body[data-style-preset="flagship"] .home-features,
body[data-style-preset="flagship"] .feature-card,
body[data-style-preset="flagship"] .stat,
body[data-style-preset="flagship"] .result-card{
  border-color:var(--sd-border);
  background-color:var(--sd-surface);
}

body[data-style-preset="flagship"] .primary{
  min-height:52px;
  background:linear-gradient(110deg,var(--sd-accent),var(--sd-secondary));
  color:var(--sd-accent-contrast);
  box-shadow:0 12px 28px color-mix(in srgb,var(--sd-accent) 26%,transparent);
}
body[data-style-preset="flagship"] .secondary,
body[data-style-preset="flagship"] .ghost,
body[data-style-preset="flagship"] .danger,
body[data-style-preset="flagship"] .answer,
body[data-style-preset="flagship"] .brand{
  min-height:48px;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
body[data-style-preset="flagship"] .ghost{
  border-color:var(--sd-border);
  background:var(--sd-surface);
  color:var(--sd-text-primary);
}
body[data-style-preset="flagship"] .answer{
  position:relative;
  min-height:52px;
  padding-right:52px;
  border-color:var(--sd-border);
  background:var(--sd-surface);
  color:var(--sd-text-primary);
  transition:transform var(--sd-motion-feedback) ease,border-color var(--sd-motion-selection) ease,background var(--sd-motion-selection) ease,box-shadow var(--sd-motion-selection) ease;
}
body[data-style-preset="flagship"] .answer:hover{
  border-color:color-mix(in srgb,var(--sd-accent) 55%,var(--sd-border));
  background:color-mix(in srgb,var(--sd-accent-soft) 44%,var(--sd-surface));
}
body[data-style-preset="flagship"] .answer.is-selected,
body[data-style-preset="flagship"] .answer[aria-pressed="true"]{
  border-color:var(--sd-accent);
  background:var(--sd-accent-soft);
  box-shadow:inset 4px 0 0 var(--sd-accent),0 7px 18px color-mix(in srgb,var(--sd-accent) 13%,transparent);
}
body[data-style-preset="flagship"] .answer.is-selected:after,
body[data-style-preset="flagship"] .answer[aria-pressed="true"]:after{
  content:"✓";
  position:absolute;
  right:16px;
  top:50%;
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:999px;
  background:var(--sd-accent);
  color:var(--sd-accent-contrast);
  transform:translateY(-50%);
  font-size:13px;
  font-weight:950;
}
body[data-style-preset="flagship"] .answer:disabled{cursor:default}
body[data-style-preset="flagship"] .progress{background:var(--sd-surface-muted)}
body[data-style-preset="flagship"] .progress>div{
  background:linear-gradient(90deg,var(--sd-accent),var(--sd-secondary));
  transition:width var(--sd-motion-selection) ease;
}
body[data-style-preset="flagship"] .progress-meta,
body[data-style-preset="flagship"] .microcopy,
body[data-style-preset="flagship"] .hero-lead,
body[data-style-preset="flagship"] .feature-card p{color:var(--sd-text-secondary)}

body[data-style-preset="flagship"] .primary:focus-visible,
body[data-style-preset="flagship"] .secondary:focus-visible,
body[data-style-preset="flagship"] .ghost:focus-visible,
body[data-style-preset="flagship"] .danger:focus-visible,
body[data-style-preset="flagship"] .answer:focus-visible,
body[data-style-preset="flagship"] .brand:focus-visible,
body[data-style-preset="flagship"] a:focus-visible,
body[data-style-preset="flagship"] input:focus-visible{
  outline:3px solid color-mix(in srgb,var(--sd-focus) 72%,#fff);
  outline-offset:3px;
}

@media(max-width:390px){
  body[data-style-preset="flagship"] .app-shell{width:min(100% - 24px,1160px)}
  body[data-style-preset="flagship"] .panel{padding:20px 16px}
  body[data-style-preset="flagship"] .answer{min-height:52px;padding:14px 50px 14px 14px}
}

@media(max-width:340px){
  body[data-style-preset="flagship"] .app-shell{width:min(100% - 20px,1160px)}
  body[data-style-preset="flagship"] .panel{padding:18px 14px}
}

@media(prefers-reduced-motion:reduce){
  body[data-style-preset="flagship"] .primary:hover,
  body[data-style-preset="flagship"] .answer:hover,
  body[data-style-preset="flagship"] .hero-cta:hover .cta-arrow{
    transform:none;
  }
}