/**
 * stg-adhd-kit v0.2.0 — widget styles.
 * Follows STG intake-plugin layout conventions and the site design system:
 * ink #0D1748 · navy #1B2E91 · yellow #FEE33E · teal #01696F · paper #F7F5F0
 * Type: Atkinson Hyperlegible (web/brand standard).
 */
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&display=swap');

#stg-adhd-kit-root {
  --sp-ink: #0D1748;
  --sp-navy: #1B2E91;
  --sp-yellow: #FEE33E;
  --sp-teal: #01696F;
  --sp-paper: #F7F5F0;
  --sp-paper-dim: #EDEAE2;
  --sp-line: rgba(13, 23, 72, .14);
  --sp-body: #2A3150;
  --sp-shadow: 0 24px 60px -24px rgba(13,23,72,.28), 0 4px 14px -6px rgba(13,23,72,.14);
  --sp-ease: cubic-bezier(.16, 1, .3, 1);

  font-family: "Atkinson Hyperlegible", Arial, sans-serif;
  color: var(--sp-body);
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.55;
}
#stg-adhd-kit-root *, #stg-adhd-kit-root *::before, #stg-adhd-kit-root *::after { box-sizing: border-box; font-family: inherit; }

/* ── Shell ─────────────────────────────────────────────────────── */
#stg-adhd-kit-root .stg-ak-shell {
  background: #fff;
  border: 1px solid var(--sp-line);
  border-radius: 16px;
  box-shadow: var(--sp-shadow);
  overflow: hidden;
}

/* ── Header: wordmark + noise→signal wave ──────────────────────── */
#stg-adhd-kit-root .stg-ak-header { padding: 22px 28px 0; }
#stg-adhd-kit-root .stg-ak-wordmark {
  font-weight: 700;
  font-size: 1.7rem;
  letter-spacing: -0.01em;
  color: var(--sp-ink);
  line-height: 1;
}
#stg-adhd-kit-root .stg-ak-wordmark .stg-ak-dot { color: var(--sp-yellow); font-size: 1.15em; line-height: 0; }
#stg-adhd-kit-root .stg-ak-org {
  margin-top: 4px;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--sp-teal);
}
#stg-adhd-kit-root .stg-ak-wave { display: block; width: 100%; height: 26px; margin-top: 14px; }
#stg-adhd-kit-root .stg-ak-wave path { stroke: var(--sp-teal); stroke-width: 2; fill: none; opacity: .85; }

/* ── Progress ──────────────────────────────────────────────────── */
#stg-adhd-kit-root .stg-ak-steps { padding: 14px 28px 0; }
#stg-adhd-kit-root .stg-ak-steps-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--sp-ink);
  margin-bottom: 6px;
}
#stg-adhd-kit-root .stg-ak-bar { height: 6px; background: var(--sp-paper-dim); border-radius: 999px; overflow: hidden; }
#stg-adhd-kit-root .stg-ak-bar-fill {
  height: 100%; width: 0;
  background: var(--sp-yellow);
  border-radius: 999px;
  transition: width .45s var(--sp-ease);
}

/* ── Page body ─────────────────────────────────────────────────── */
#stg-adhd-kit-root .stg-ak-page { padding: 22px 28px 26px; }
#stg-adhd-kit-root .stg-ak-q { font-size: 1.22rem; font-weight: 700; color: var(--sp-ink); margin: 0 0 4px; }
#stg-adhd-kit-root .stg-ak-hint { font-size: .92rem; color: var(--sp-body); opacity: .8; margin: 0 0 16px; }

/* Pills — single-select option rows.
   All controls are ID-scoped and appearance-reset so Elementor kit /
   theme global button styles can't restyle them (the red-button class
   of bug — same family as the Brain Dump font-inheritance fix). */
#stg-adhd-kit-root button,
#stg-adhd-kit-root a.stg-ak-btn {
  -webkit-appearance: none;
  appearance: none;
  background-image: none;
  text-transform: none;
  text-decoration: none;
  letter-spacing: normal;
  box-shadow: none;
  line-height: 1.35;
}
#stg-adhd-kit-root a.stg-ak-btn--primary:visited,
#stg-adhd-kit-root a.stg-ak-btn--primary:hover { color: #fff; }
#stg-adhd-kit-root .stg-ak-pills { display: flex; flex-direction: column; gap: 10px; }
#stg-adhd-kit-root .stg-ak-pill {
  display: block; width: 100%; text-align: left;
  padding: 13px 16px;
  border: 2px solid var(--sp-line);
  border-radius: 12px;
  background: #fff;
  color: var(--sp-body);
  font-size: 1rem;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s var(--sp-ease);
}
#stg-adhd-kit-root .stg-ak-pill:hover { border-color: var(--sp-navy); }
#stg-adhd-kit-root .stg-ak-pill[aria-pressed="true"] {
  border-color: var(--sp-navy);
  background: rgba(27, 46, 145, .06);
  color: var(--sp-ink);
  font-weight: 700;
}

/* Checks — multi-select rows */
#stg-adhd-kit-root .stg-ak-checks { display: flex; flex-direction: column; gap: 10px; }
#stg-adhd-kit-root .stg-ak-check {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  border: 2px solid var(--sp-line);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
#stg-adhd-kit-root .stg-ak-check:hover { border-color: var(--sp-navy); }
#stg-adhd-kit-root .stg-ak-check input { margin-top: 3px; accent-color: var(--sp-navy); width: 18px; height: 18px; flex: none; }
#stg-adhd-kit-root .stg-ak-check.stg-ak-on { border-color: var(--sp-navy); background: rgba(27, 46, 145, .06); }

/* Scale 1–10 */
#stg-adhd-kit-root .stg-ak-scale { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
#stg-adhd-kit-root .stg-ak-scale button {
  padding: 12px 0;
  border: 2px solid var(--sp-line);
  border-radius: 10px;
  background: #fff; color: var(--sp-body);
  font-weight: 700; font-size: 1rem; cursor: pointer;
}
#stg-adhd-kit-root .stg-ak-scale button[aria-pressed="true"] { border-color: var(--sp-navy); background: var(--sp-navy); color: #fff; }
#stg-adhd-kit-root .stg-ak-scale-ends { display: flex; justify-content: space-between; font-size: .78rem; opacity: .7; margin-top: 6px; }

/* Time pair */
#stg-adhd-kit-root .stg-ak-times { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
#stg-adhd-kit-root .stg-ak-field label { display: block; font-size: .82rem; font-weight: 700; color: var(--sp-ink); margin-bottom: 6px; }
#stg-adhd-kit-root .stg-ak-field input[type="time"], #stg-adhd-kit-root .stg-ak-field input[type="email"] {
  width: 100%; padding: 12px 14px;
  border: 2px solid var(--sp-line); border-radius: 10px;
  font-size: 1rem; color: var(--sp-ink); background: #fff;
}
#stg-adhd-kit-root .stg-ak-field input:focus { border-color: var(--sp-navy); outline: none; }

/* Textarea (Q10) */
#stg-adhd-kit-root .stg-ak-textarea {
  width: 100%; min-height: 120px; resize: vertical;
  padding: 12px 14px;
  border: 2px solid var(--sp-line); border-radius: 12px;
  font-size: 1rem; color: var(--sp-ink);
}
#stg-adhd-kit-root .stg-ak-textarea:focus { border-color: var(--sp-navy); outline: none; }
#stg-adhd-kit-root .stg-ak-counter { text-align: right; font-size: .78rem; opacity: .65; margin-top: 4px; }

/* Why-we-ask expandable */
#stg-adhd-kit-root .stg-ak-why { margin: -6px 0 14px; }
#stg-adhd-kit-root .stg-ak-why summary {
  cursor: pointer;
  color: var(--sp-teal);
  font-size: .88rem;
  font-weight: 700;
  list-style-position: inside;
}
#stg-adhd-kit-root .stg-ak-why[open] summary { margin-bottom: 8px; }
#stg-adhd-kit-root .stg-ak-why .stg-ak-callout { margin-top: 0; }

/* Callouts */
#stg-adhd-kit-root .stg-ak-callout {
  border-left: 4px solid var(--sp-yellow);
  background: var(--sp-paper);
  border-radius: 0 10px 10px 0;
  padding: 12px 16px;
  font-size: .9rem;
  margin: 18px 0 0;
}
#stg-adhd-kit-root .stg-ak-callout--teal { border-left-color: var(--sp-teal); }

/* ── Navbar ────────────────────────────────────────────────────── */
#stg-adhd-kit-root .stg-ak-navbar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 16px 28px 22px;
  border-top: 1px solid var(--sp-line);
}
#stg-adhd-kit-root .stg-ak-btn {
  padding: 13px 26px;
  border-radius: 10px;
  font-size: 1rem; font-weight: 700;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .15s var(--sp-ease), box-shadow .15s;
}
#stg-adhd-kit-root .stg-ak-btn--primary { background: var(--sp-navy); color: #fff; }
#stg-adhd-kit-root .stg-ak-btn--primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(27,46,145,.55); }
#stg-adhd-kit-root .stg-ak-btn--primary:disabled { opacity: .45; cursor: not-allowed; }
#stg-adhd-kit-root .stg-ak-btn--ghost { background: transparent; color: var(--sp-ink); border-color: var(--sp-line); }
#stg-adhd-kit-root .stg-ak-btn--ghost:hover { border-color: var(--sp-navy); }

#stg-adhd-kit-root :focus-visible { outline: 3px solid var(--sp-yellow); outline-offset: 2px; border-radius: 4px; }

/* ── Generating state ──────────────────────────────────────────── */
#stg-adhd-kit-root .stg-ak-generating { text-align: center; padding: 10px 0 4px; }
#stg-adhd-kit-root .stg-ak-wave--live path {
  stroke-dasharray: 6 8;
  animation: stg-ak-flow 1.4s linear infinite;
}
@keyframes stg-ak-flow { to { stroke-dashoffset: -28; } }

/* ── Plan render ───────────────────────────────────────────────── */
#stg-adhd-kit-root .stg-ak-plan h2 { font-size: 1.5rem; color: var(--sp-ink); margin: 0 0 10px; line-height: 1.25; }
#stg-adhd-kit-root .stg-ak-plan h3 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--sp-teal); margin: 26px 0 8px;
}
#stg-adhd-kit-root .stg-ak-plan p { margin: 0 0 10px; }
#stg-adhd-kit-root .stg-ak-skillcard {
  border: 1px solid var(--sp-line); border-radius: 12px;
  padding: 16px 18px; margin-top: 6px;
}
#stg-adhd-kit-root .stg-ak-skillcard strong.stg-ak-skillname { color: var(--sp-navy); font-size: 1.05rem; }
#stg-adhd-kit-root .stg-ak-skillcard ol { margin: 10px 0 0; padding-left: 20px; }
#stg-adhd-kit-root .stg-ak-skillcard ol li { margin-bottom: 6px; }
#stg-adhd-kit-root .stg-ak-runners { display: flex; flex-direction: column; gap: 8px; }
#stg-adhd-kit-root .stg-ak-runner { padding: 10px 14px; background: var(--sp-paper); border-radius: 10px; font-size: .95rem; }
#stg-adhd-kit-root .stg-ak-runner strong { color: var(--sp-navy); }
#stg-adhd-kit-root .stg-ak-checklist { list-style: none; margin: 0; padding: 0; }
#stg-adhd-kit-root .stg-ak-checklist li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px dashed var(--sp-line); }
#stg-adhd-kit-root .stg-ak-checklist input { margin-top: 4px; accent-color: var(--sp-teal); width: 17px; height: 17px; flex: none; }
#stg-adhd-kit-root .stg-ak-cursor { display: inline-block; width: .55em; height: 1em; background: var(--sp-yellow); vertical-align: -0.15em; animation: stg-ak-blink 1s steps(2) infinite; }
@keyframes stg-ak-blink { 50% { opacity: 0; } }
#stg-adhd-kit-root .stg-ak-plan-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }



/* ── Consent controls ───────────────────────────────────────────── */
#stg-adhd-kit-root .stg-ak-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 12px 0;
  padding: 12px 14px;
  background: var(--sp-paper);
  border: 1px solid var(--sp-line);
  border-radius: 12px;
  color: var(--sp-ink);
  font-size: .95rem;
  line-height: 1.45;
}
#stg-adhd-kit-root .stg-ak-consent input {
  flex: none;
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--sp-navy);
}

/* ── Crisis screen ─────────────────────────────────────────────── */
#stg-adhd-kit-root .stg-ak-crisis { border-top: 6px solid var(--sp-yellow); }
#stg-adhd-kit-root .stg-ak-crisis .stg-ak-page { padding-top: 26px; }
#stg-adhd-kit-root .stg-ak-crisis h2 { color: var(--sp-ink); font-size: 1.3rem; margin: 0 0 10px; }
#stg-adhd-kit-root .stg-ak-resources { list-style: none; margin: 16px 0; padding: 0; }
#stg-adhd-kit-root .stg-ak-resources li {
  padding: 12px 16px; margin-bottom: 8px;
  background: var(--sp-paper); border-radius: 10px;
}
#stg-adhd-kit-root .stg-ak-resources strong { display: block; color: var(--sp-navy); }

/* ── Mobile ────────────────────────────────────────────────────── */
@media (max-width: 782px) {
  #stg-adhd-kit-root .stg-ak-header, #stg-adhd-kit-root .stg-ak-steps, #stg-adhd-kit-root .stg-ak-page, #stg-adhd-kit-root .stg-ak-navbar { padding-left: 18px; padding-right: 18px; }
  #stg-adhd-kit-root .stg-ak-scale { grid-template-columns: repeat(5, 1fr); }
  #stg-adhd-kit-root .stg-ak-times { grid-template-columns: 1fr; }
  #stg-adhd-kit-root .stg-ak-btn { padding: 13px 20px; }
  #stg-adhd-kit-root .stg-ak-wordmark { font-size: 1.45rem; }
}

@media (prefers-reduced-motion: reduce) {
  #stg-adhd-kit-root * { animation: none !important; transition: none !important; }
}

/* Honeypot — off-screen, not display:none (some bots skip hidden fields) */
#stg-adhd-kit-root .stg-ak-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }