/* ── Base + design-system components ────────────────────────────────────────
   Ported from the design system's base.css and the React component bundle
   (Button, Input, Select, Textarea, Accordion, Badge, Tag, Card, Checkbox).
   Class names match the design system so markup stays recognisable. */

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:var(--leading-normal);
  color:var(--text-body);
  background:var(--surface-page);
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--text-heading);
  line-height:var(--leading-snug);
  margin:0 0 var(--space-3);
}

/* figure/blockquote carry a UA `margin: 1em 40px` that breaks column layouts */
figure,blockquote,figcaption{margin:0}

a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-hover);text-decoration:underline}
::selection{background:var(--lemon-400);color:var(--purple-900)}
button{font-family:var(--font-body)}
img{max-width:100%;display:block}

:focus-visible{outline:3px solid var(--purple-500);outline-offset:2px}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--lemon-400);color:var(--purple-900);
  font-weight:800;padding:12px 20px;border-radius:0 0 var(--radius-md) 0;
}
.skip-link:focus{left:0;text-decoration:none}

/* ── Button ─────────────────────────────────────────────────────────────── */
.toc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;cursor:pointer;font-family:var(--font-body);font-weight:700;
  border-radius:var(--radius-pill);
  transition:background .15s ease-out,color .15s ease-out,box-shadow .15s ease-out;
  text-decoration:none;line-height:1;
}
.toc-btn:hover{text-decoration:none}
.toc-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.toc-btn--primary{background:var(--brand);color:var(--text-on-brand)}
.toc-btn--primary:hover{background:var(--brand-hover);color:var(--text-on-brand)}
.toc-btn--primary:active{background:var(--brand-active)}
.toc-btn--secondary{background:var(--surface-card);color:var(--brand);box-shadow:inset 0 0 0 2px var(--purple-200)}
.toc-btn--secondary:hover{background:var(--surface-tint);color:var(--brand)}
.toc-btn--secondary:active{background:var(--purple-200)}
.toc-btn--accent{background:var(--accent);color:var(--text-on-accent)}
.toc-btn--accent:hover{background:var(--accent-hover);color:var(--text-on-accent)}
.toc-btn--ghost{background:transparent;color:var(--brand);box-shadow:inset 0 0 0 2px var(--purple-200)}
.toc-btn--ghost:hover{background:var(--surface-tint);color:var(--brand);box-shadow:inset 0 0 0 2px var(--purple-500)}
.toc-btn--sm{font-size:15px;padding:11px 22px}
.toc-btn--md{font-size:17px;padding:15px 30px}
.toc-btn--lg{font-size:19px;padding:18px 38px}
.toc-btn--full{width:100%}
.toc-btn[disabled]{opacity:.45;pointer-events:none}

/* ── Form fields (Input / Select / Textarea) ────────────────────────────── */
.toc-field{display:flex;flex-direction:column;gap:6px;font-family:var(--font-body)}
.toc-field__label{font-size:14px;font-weight:700;color:var(--text-heading)}
.toc-field__control{
  border:1.5px solid var(--border-strong);
  border-radius:var(--radius-md);
  padding:11px 14px;
  font-family:var(--font-body);font-size:16px;
  color:var(--text-heading);background:var(--surface-card);
  transition:border-color .15s ease-out,box-shadow .15s ease-out;
  width:100%;
}
.toc-field__control::placeholder{color:var(--text-muted)}
.toc-field__control:focus{outline:none;border-color:var(--brand);box-shadow:var(--focus-ring)}
.toc-field__hint{font-size:12px;color:var(--text-muted)}
.toc-field--error .toc-field__control{border-color:var(--danger)}
.toc-field--error .toc-field__hint{color:var(--danger)}
.toc-field__control[disabled]{background:var(--surface-tint);opacity:.7}
textarea.toc-field__control{resize:vertical}

.toc-select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23653A9F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  padding-right:40px;
}

/* ── Accordion ──────────────────────────────────────────────────────────── */
.toc-acc{display:flex;flex-direction:column;gap:12px;font-family:var(--font-body)}
.toc-acc__item{background:var(--surface-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.toc-acc__btn{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:18px 22px;border:0;background:none;cursor:pointer;
  font-family:var(--font-display);font-weight:700;font-size:17px;
  color:var(--text-heading);text-align:left;
}
.toc-acc__btn:hover{background:var(--surface-tint)}
.toc-acc__chev{transition:transform .18s ease-out;flex:none;display:flex}
.toc-acc__item--open .toc-acc__chev{transform:rotate(180deg)}
.toc-acc__body{padding:18px 22px 18px;font-size:15px;color:var(--text-body)}
.toc-acc__body[hidden]{display:none}
.toc-acc__body p{margin:0}

/* ── Badge / Tag ────────────────────────────────────────────────────────── */
.toc-badge{
  display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-pill);
  font-family:var(--font-body);font-weight:800;font-size:12px;
  letter-spacing:.04em;text-transform:uppercase;padding:5px 12px;line-height:1;
}
.toc-badge--purple{background:var(--purple-200);color:var(--purple-800)}
.toc-badge--lemon{background:var(--accent);color:var(--text-on-accent)}
.toc-badge--solid{background:var(--brand);color:#fff}
.toc-badge--success{background:#DFF2E6;color:#1F7A43}

/* ── Checkbox ───────────────────────────────────────────────────────────── */
.toc-check{
  display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  font-family:var(--font-body);font-size:14px;line-height:1.55;color:var(--text-body);
}
.toc-check input{
  width:19px;height:19px;margin:2px 0 0;flex:none;
  accent-color:var(--purple-700);cursor:pointer;
}