/* ------------------------------------------------------------------
   Growth Readiness Grader — shadcn/ui design tokens + component styles
   Tailwind CDN handles utilities; this file provides the shadcn theme,
   component recipes (button, card, badge, input, progress, accordion)
   and a few report-specific pieces.
------------------------------------------------------------------- */
:root {
  --background: 0 0% 100%;
  --foreground: 222 47% 11%;
  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;
  --popover: 0 0% 100%;
  --popover-foreground: 222 47% 11%;
  --primary: 222 47% 18%;            /* deep navy — single primary color */
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96%;
  --secondary-foreground: 222 47% 11%;
  --muted: 210 40% 96%;
  --muted-foreground: 215 16% 47%;
  --accent: 210 40% 96%;
  --accent-foreground: 222 47% 11%;
  --destructive: 0 72% 51%;          /* red — high-impact missing */
  --destructive-foreground: 210 40% 98%;
  --success: 142 71% 35%;            /* green — pass */
  --success-foreground: 0 0% 100%;
  --warning: 32 95% 44%;             /* amber — needs improvement */
  --warning-foreground: 0 0% 100%;
  --border: 214 32% 91%;
  --input: 214 32% 91%;
  --ring: 222 47% 18%;
  --radius: 0.625rem;
}

.dark {
  --background: 222 47% 7%;
  --foreground: 210 40% 96%;
  --card: 222 40% 10%;
  --card-foreground: 210 40% 96%;
  --popover: 222 40% 10%;
  --popover-foreground: 210 40% 96%;
  --primary: 210 40% 96%;
  --primary-foreground: 222 47% 11%;
  --secondary: 217 28% 17%;
  --secondary-foreground: 210 40% 96%;
  --muted: 217 28% 17%;
  --muted-foreground: 215 20% 65%;
  --accent: 217 28% 17%;
  --accent-foreground: 210 40% 96%;
  --destructive: 0 72% 60%;
  --destructive-foreground: 210 40% 98%;
  --success: 142 60% 50%;
  --success-foreground: 222 47% 7%;
  --warning: 36 90% 58%;
  --warning-foreground: 222 47% 7%;
  --border: 217 28% 20%;
  --input: 217 28% 22%;
  --ring: 213 27% 84%;
  color-scheme: dark;
}

/* Tailwind Preflight injects its own `*, ::before, ::after { border-color }` after this sheet
   (it is the CDN default gray-200), so we also set it via tw-config's borderColor.DEFAULT and
   repeat it here with the same specificity to win the cascade order. */
*, ::before, ::after { border-color: hsl(var(--border)); }
.dark *, .dark ::before, .dark ::after { border-color: hsl(var(--border)); }
html { scroll-behavior: smooth; }
body {
  background-color: hsl(210 20% 98%);
  transition: background-color .2s, color .2s;
  color: hsl(var(--foreground));
  font-family: 'Inter', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.dark body { background-color: hsl(222 47% 5%); }

/* ---------- shadcn: Button ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  white-space: nowrap; border-radius: var(--radius); font-size: .875rem; font-weight: 500;
  height: 2.5rem; padding: 0 1rem; transition: background-color .15s, color .15s, opacity .15s, box-shadow .15s;
  outline: none; cursor: pointer; border: 1px solid transparent;
}
.btn:focus-visible { box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)); }
.btn:disabled { pointer-events: none; opacity: .5; }
.btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.btn-primary:hover { background: hsl(var(--primary) / .9); }
.btn-secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.btn-secondary:hover { background: hsl(var(--secondary) / .8); }
.btn-outline { border-color: hsl(var(--input)); background: hsl(var(--background)); }
.btn-outline:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: hsl(var(--accent)); }
.btn-link { color: hsl(var(--primary)); text-underline-offset: 4px; height: auto; padding: 0; }
.btn-link:hover { text-decoration: underline; }
.btn-sm { height: 2.25rem; padding: 0 .75rem; border-radius: calc(var(--radius) - 2px); font-size: .8125rem; }
.btn-lg { height: 2.75rem; padding: 0 1.5rem; font-size: .9375rem; }
.btn-xs { height: 1.75rem; padding: 0 .625rem; font-size: .75rem; border-radius: calc(var(--radius) - 4px); }

/* ---------- shadcn: Input ---------- */
.input {
  display: flex; height: 2.75rem; width: 100%; min-width: 0; border-radius: var(--radius);
  -webkit-appearance: none; appearance: none; /* iOS Safari: drop the native rounded-search styling that shrinks the box */
  box-sizing: border-box; flex-shrink: 1;
  border: 1px solid hsl(var(--input)); background: hsl(var(--background));
  padding: 0 .875rem; font-size: .9375rem; color: hsl(var(--foreground));
  transition: box-shadow .15s, border-color .15s; outline: none;
}
.input::placeholder { color: hsl(var(--muted-foreground)); }
.input:focus-visible { border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / .15); }
.input[aria-invalid="true"] { border-color: hsl(var(--destructive)); box-shadow: 0 0 0 3px hsl(var(--destructive) / .15); }

/* ---------- shadcn: Card ---------- */
.card {
  border-radius: var(--radius); border: 1px solid hsl(var(--border));
  background: hsl(var(--card)); color: hsl(var(--card-foreground));
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / .04);
}
.dark .card { box-shadow: none; }
.card-header { display: flex; flex-direction: column; gap: .375rem; padding: 1.25rem 1.25rem 0; }
.card-title { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.card-description { font-size: .875rem; color: hsl(var(--muted-foreground)); }
.card-content { padding: 1.25rem; }
.card-footer { display: flex; align-items: center; padding: 0 1.25rem 1.25rem; }

/* ---------- shadcn: Badge ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .25rem; border-radius: 9999px;
  border: 1px solid transparent; padding: .125rem .625rem; font-size: .75rem; font-weight: 600;
  line-height: 1.25rem; white-space: nowrap;
}
.badge-default { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.badge-secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.badge-outline { border-color: hsl(var(--border)); color: hsl(var(--foreground)); }
.badge-success { background: hsl(var(--success) / .1); color: hsl(var(--success)); border-color: hsl(var(--success) / .25); }
.badge-warning { background: hsl(var(--warning) / .1); color: hsl(var(--warning)); border-color: hsl(var(--warning) / .25); }
.badge-destructive { background: hsl(var(--destructive) / .1); color: hsl(var(--destructive)); border-color: hsl(var(--destructive) / .25); }
.badge-muted { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }

/* ---------- shadcn: Alert ---------- */
.alert {
  position: relative; width: 100%; border-radius: var(--radius); border: 1px solid hsl(var(--border));
  padding: .875rem 1rem; font-size: .875rem; background: hsl(var(--card));
  display: flex; gap: .75rem; align-items: flex-start;
}
.alert-destructive { border-color: hsl(var(--destructive) / .4); color: hsl(var(--destructive)); background: hsl(var(--destructive) / .04); }
.alert-warning { border-color: hsl(var(--warning) / .4); color: hsl(28 80% 30%); background: hsl(var(--warning) / .06); }
.dark .alert-warning { color: hsl(36 90% 70%); }
.alert-title { font-weight: 600; margin-bottom: .125rem; line-height: 1.3; }
.alert-description { color: inherit; opacity: .9; }

/* ---------- shadcn: Progress ---------- */
.progress { position: relative; height: .5rem; width: 100%; overflow: hidden; border-radius: 9999px; background: hsl(var(--secondary)); }
.progress-indicator { height: 100%; width: 0%; border-radius: 9999px; background: hsl(var(--primary)); transition: width .6s cubic-bezier(.4,0,.2,1); }
.progress-indicator.is-pass { background: hsl(var(--success)); }
.progress-indicator.is-partial { background: hsl(var(--warning)); }
.progress-indicator.is-fail { background: hsl(var(--destructive)); }

/* ---------- shadcn: Separator ---------- */
.separator { height: 1px; width: 100%; background: hsl(var(--border)); }

/* ---------- shadcn: Accordion ---------- */
.accordion-item { border-bottom: 1px solid hsl(var(--border)); }
.accordion-item:last-child { border-bottom: 0; }
.accordion-trigger {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .875rem 0; font-size: .875rem; font-weight: 500; text-align: left; background: none; border: 0; cursor: pointer;
  color: inherit;
}
.accordion-trigger:hover .accordion-label { text-decoration: underline; text-underline-offset: 3px; }
.accordion-chevron { flex-shrink: 0; transition: transform .2s; color: hsl(var(--muted-foreground)); }
.accordion-trigger[aria-expanded="true"] .accordion-chevron { transform: rotate(180deg); }
.accordion-content { overflow: hidden; font-size: .875rem; color: hsl(var(--muted-foreground)); padding-bottom: 1rem; }
.accordion-content[hidden] { display: none; }

/* ---------- shadcn: Skeleton ---------- */
.skeleton { border-radius: calc(var(--radius) - 4px); background: hsl(var(--muted)); animation: pulse 1.6s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .45 } }

/* ---------- Status dot / icons ---------- */
.status-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 9999px; flex-shrink: 0; }
.status-pass { background: hsl(var(--success)); }
.status-partial { background: hsl(var(--warning)); }
.status-fail { background: hsl(var(--destructive)); }
.status-unknown { background: hsl(var(--muted-foreground) / .5); }
.text-pass { color: hsl(var(--success)); }
.proof-score { font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; min-width: 2.75rem; text-align: center; font-variant-numeric: tabular-nums; }
.text-partial { color: hsl(var(--warning)); }
.text-fail { color: hsl(var(--destructive)); }

/* ---------- Score ring ---------- */
.score-ring { --pct: 0; --ring-color: hsl(var(--primary)); position: relative; width: 168px; height: 168px; border-radius: 9999px;
  background: conic-gradient(var(--ring-color) calc(var(--pct) * 1%), hsl(var(--secondary)) 0);
  display: grid; place-items: center; transition: --pct .8s; }
.score-ring::before { content: ''; position: absolute; inset: 12px; border-radius: 9999px; background: hsl(var(--card)); }
.score-ring > * { position: relative; }
.score-number { font-size: 3.25rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }

/* ---------- Scan progress steps ---------- */
.scan-step { display: flex; align-items: center; gap: .75rem; padding: .625rem 0; font-size: .9375rem; color: hsl(var(--muted-foreground)); transition: color .2s; }
.scan-step .step-icon { width: 1.25rem; height: 1.25rem; display: grid; place-items: center; flex-shrink: 0; }
.scan-step.is-active { color: hsl(var(--foreground)); font-weight: 500; }
.scan-step.is-done { color: hsl(var(--foreground)); }
.spinner { width: 1rem; height: 1rem; border-radius: 9999px; border: 2px solid hsl(var(--border)); border-top-color: hsl(var(--primary)); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg) } }

/* ---------- Misc ---------- */
.mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; }
.kbd { font-family: inherit; font-size: .6875rem; border: 1px solid hsl(var(--border)); border-bottom-width: 2px; border-radius: 4px; padding: 0 .375rem; background: hsl(var(--secondary)); }
.fix-number { width: 1.75rem; height: 1.75rem; border-radius: 9999px; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); display: grid; place-items: center; font-size: .8125rem; font-weight: 600; flex-shrink: 0; }
.evidence { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .75rem; background: hsl(var(--muted)); border-radius: 6px; padding: .5rem .625rem; color: hsl(var(--muted-foreground)); word-break: break-word; }
.dark .toast { background: hsl(var(--secondary)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); }
.toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%) translateY(20px); opacity: 0; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-size: .875rem; padding: .625rem 1rem; border-radius: var(--radius); box-shadow: 0 10px 30px rgb(0 0 0 / .15); transition: all .25s; z-index: 50; pointer-events: none; }
.toast.is-visible { transform: translateX(-50%) translateY(0); opacity: 1; }
.checklist-item { display: flex; gap: .75rem; align-items: flex-start; padding: .625rem 0; border-bottom: 1px solid hsl(var(--border)); font-size: .875rem; }
.checklist-item:last-child { border-bottom: 0; }
.checklist-item input[type="checkbox"] { margin-top: .2rem; width: 1rem; height: 1rem; accent-color: hsl(var(--primary)); flex-shrink: 0; }
.checklist-item input:checked + span { color: hsl(var(--muted-foreground)); text-decoration: line-through; }
.share-canvas { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid hsl(var(--border)); display: block; }

@media (max-width: 640px) {
  .score-ring { width: 140px; height: 140px; }
  .score-number { font-size: 2.75rem; }
}