/* =========================================================================
   Math Solver AI — Design Tokens & Component System
   Built on Blocksy. BEM-ish, mobile-first. All brand styling flows from here.
   ========================================================================= */

:root {
  /* Brand palette */
  --ms-primary:       #4F46E5;
  --ms-primary-dark:  #3730A3;
  --ms-primary-soft:  #EEF0FE;
  --ms-accent:        #10B981;
  --ms-accent-soft:   #E7F8F1;
  --ms-highlight:     #F59E0B;
  --ms-highlight-soft:#FEF3E2;
  --ms-ink:           #0F172A;
  --ms-muted:         #64748B;
  --ms-surface:       #FFFFFF;
  --ms-surface-2:     #F8FAFC;
  --ms-border:        #E2E8F0;

  /* Typography */
  --ms-font-head: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --ms-font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Scale & shape */
  --ms-radius:   14px;
  --ms-radius-sm: 9px;
  --ms-radius-lg: 22px;
  --ms-shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05);
  --ms-shadow:    0 4px 14px rgba(15,23,42,.08);
  --ms-shadow-lg: 0 18px 48px rgba(79,70,229,.16);
  --ms-container: 1200px;

  /* Map onto Blocksy where helpful */
  --theme-palette-color-1: var(--ms-primary);
  --theme-palette-color-2: var(--ms-primary-dark);
  --theme-palette-color-3: var(--ms-ink);
  --theme-palette-color-4: var(--ms-muted);
  --theme-link-color: var(--ms-primary);
  --theme-link-hover-color: var(--ms-primary-dark);
}

/* ---- Dark mode (opt-in via [data-theme="dark"]) ---- */
[data-theme="dark"] {
  --ms-ink:        #E5E7EB;
  --ms-muted:      #94A3B8;
  --ms-surface:    #111827;
  --ms-surface-2:  #0B1120;
  --ms-border:     #1F2937;
  --ms-primary-soft: #1E2348;
  --ms-accent-soft:  #0E2A22;
  --ms-highlight-soft:#2A2113;
}

/* =========================== Base typography =========================== */
body {
  font-family: var(--ms-font-body);
  color: var(--ms-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5,h6,.entry-title,.page-title {
  font-family: var(--ms-font-head);
  color: var(--ms-ink);
  letter-spacing: -0.015em;
  line-height: 1.18;
}
h1 { font-weight: 800; }
h2,h3 { font-weight: 700; }
h4 { font-weight: 600; }
a { color: var(--ms-primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ms-primary-dark); }
::selection { background: var(--ms-primary); color:#fff; }

/* Logo already contains the wordmark — hide Blocksy's redundant text site title. */
.site-title-container { display:none; }

.ms-skip-link {
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--ms-primary); color:#fff; padding:10px 16px; border-radius:0 0 8px 0;
}
.ms-skip-link:focus { left:0; }

/* =========================== Buttons =========================== */
.ms-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family: var(--ms-font-body); font-weight:600; font-size:1rem; line-height:1;
  padding:.85em 1.4em; border-radius: var(--ms-radius-sm);
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.ms-btn:active { transform: translateY(1px); }
.ms-btn--primary { background: var(--ms-primary); color:#fff; box-shadow: var(--ms-shadow); }
.ms-btn--primary:hover { background: var(--ms-primary-dark); color:#fff; box-shadow: var(--ms-shadow-lg); }
.ms-btn--accent { background: var(--ms-accent); color:#fff; }
.ms-btn--accent:hover { background:#0E9F70; color:#fff; }
.ms-btn--ghost { background: transparent; color: var(--ms-primary); border-color: var(--ms-border); }
.ms-btn--ghost:hover { background: var(--ms-primary-soft); border-color: var(--ms-primary); }
.ms-btn--block { width:100%; }
.ms-btn[disabled], .ms-btn:disabled { opacity:.55; cursor:not-allowed; }

/* Visible keyboard focus for all custom interactive controls (WCAG 2.4.7). */
.ms-btn:focus-visible, .ms-chip:focus-visible, .ms-card:focus-visible,
.ms-solver__tab:focus-visible, .ms-faq summary:focus-visible, .ms-footer__col a:focus-visible {
  outline: 3px solid var(--ms-primary);
  outline-offset: 2px;
  border-radius: 6px;
}

/* =========================== Layout helpers =========================== */
.ms-container { max-width: var(--ms-container); margin-inline:auto; padding-inline: clamp(16px, 4vw, 28px); }
.ms-section { padding-block: clamp(40px, 7vw, 80px); }
.ms-section--alt { background: var(--ms-surface-2); }
.ms-eyebrow {
  display:inline-block; font-weight:700; font-size:.8rem; letter-spacing:.08em;
  text-transform:uppercase; color: var(--ms-primary);
  background: var(--ms-primary-soft); padding:.35em .8em; border-radius:999px;
}
.ms-lede { font-size: clamp(1.05rem, 2.4vw, 1.25rem); color: var(--ms-muted); max-width: 60ch; }

/* =========================== Hero =========================== */
.ms-hero { position:relative; overflow:hidden; }
.ms-hero__bg {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 50% at 12% 0%, rgba(79,70,229,.10), transparent 60%),
    radial-gradient(50% 60% at 100% 30%, rgba(16,185,129,.08), transparent 60%);
}
.ms-hero > * { position:relative; z-index:1; }
.ms-hero__title { font-size: clamp(2rem, 5.2vw, 3.25rem); margin:.2em 0 .35em; }
.ms-hero__title .ms-grad {
  background: linear-gradient(100deg, var(--ms-primary), var(--ms-accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* =========================== Subject cards =========================== */
.ms-subjects { display:grid; grid-template-columns: repeat(2, 1fr); gap: clamp(12px,2vw,18px); }
@media (min-width: 720px){ .ms-subjects { grid-template-columns: repeat(4, 1fr); } }
.ms-card {
  display:flex; flex-direction:column; gap:.4rem;
  background: var(--ms-surface); border:1px solid var(--ms-border);
  border-radius: var(--ms-radius); padding:1.1rem 1.15rem;
  box-shadow: var(--ms-shadow-sm); text-decoration:none; color: var(--ms-ink);
  transition: transform .14s ease, box-shadow .18s ease, border-color .18s ease;
}
.ms-card:hover { transform: translateY(-3px); box-shadow: var(--ms-shadow); border-color: var(--ms-primary); color: var(--ms-ink); }
.ms-card__icon {
  width:42px; height:42px; display:grid; place-items:center; border-radius:11px;
  background: var(--ms-primary-soft); color: var(--ms-primary); font-size:1.25rem; font-weight:800;
}
.ms-card__title { font-family: var(--ms-font-head); font-weight:700; font-size:1.02rem; margin:0; }
.ms-card__desc { color: var(--ms-muted); font-size:.9rem; margin:0; }

/* =========================== Steps =========================== */
.ms-steps { display:grid; gap: clamp(14px,2.4vw,22px); grid-template-columns:1fr; counter-reset: msstep; }
@media (min-width: 760px){ .ms-steps { grid-template-columns: repeat(3,1fr); } }
.ms-step { position:relative; background:var(--ms-surface); border:1px solid var(--ms-border);
  border-radius:var(--ms-radius); padding:1.5rem 1.3rem 1.3rem; box-shadow:var(--ms-shadow-sm); }
.ms-step::before {
  counter-increment: msstep; content: counter(msstep);
  position:absolute; top:-18px; left:1.3rem; width:36px; height:36px;
  display:grid; place-items:center; border-radius:50%;
  background: var(--ms-primary); color:#fff; font-family:var(--ms-font-head); font-weight:800; box-shadow:var(--ms-shadow);
}
.ms-step h3 { margin:.4rem 0 .35rem; font-size:1.1rem; }
.ms-step p { color:var(--ms-muted); margin:0; }

/* =========================== Callouts & boxes =========================== */
.ms-callout {
  border:1px solid var(--ms-border); border-left-width:4px; border-left-color:var(--ms-primary);
  background: var(--ms-surface-2); border-radius: var(--ms-radius-sm);
  padding:1rem 1.15rem; margin:1.5rem 0;
}
.ms-callout--info    { border-left-color: var(--ms-primary);   background: var(--ms-primary-soft); }
.ms-callout--success { border-left-color: var(--ms-accent);    background: var(--ms-accent-soft); }
.ms-callout--warn    { border-left-color: var(--ms-highlight); background: var(--ms-highlight-soft); }
.ms-callout p:last-child { margin-bottom:0; }
.ms-callout__title { font-family:var(--ms-font-head); font-weight:700; margin:0 0 .35rem; }

.ms-answer {
  display:flex; align-items:flex-start; gap:.7rem;
  background: var(--ms-accent-soft); border:1px solid #BFEAD9;
  border-radius: var(--ms-radius); padding:1rem 1.2rem; margin:1.2rem 0;
}
.ms-answer__label { font-family:var(--ms-font-head); font-weight:800; color:#047857; white-space:nowrap; }

.ms-example {
  background: var(--ms-surface); border:1px dashed var(--ms-border);
  border-radius: var(--ms-radius); padding:1.1rem 1.25rem; margin:1.25rem 0;
}
.ms-example__tag {
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color: var(--ms-primary); margin-bottom:.4rem;
}

/* =========================== FAQ (details/summary) =========================== */
.ms-faq { border:1px solid var(--ms-border); border-radius: var(--ms-radius); overflow:hidden; background:var(--ms-surface); }
.ms-faq details { border-bottom:1px solid var(--ms-border); }
.ms-faq details:last-child { border-bottom:0; }
.ms-faq summary {
  cursor:pointer; list-style:none; padding:1.05rem 1.2rem; font-family:var(--ms-font-head);
  font-weight:600; font-size:1.02rem; display:flex; justify-content:space-between; gap:1rem; align-items:center;
}
.ms-faq summary::-webkit-details-marker { display:none; }
.ms-faq summary::after { content:"+"; color:var(--ms-primary); font-size:1.4rem; line-height:1; transition: transform .18s ease; }
.ms-faq details[open] summary::after { transform: rotate(45deg); }
.ms-faq details > div, .ms-faq .ms-faq__a { padding:0 1.2rem 1.15rem; color:var(--ms-muted); }

/* =========================== KaTeX & math display =========================== */
.katex { font-size: 1.06em; }
.katex-display { overflow-x:auto; overflow-y:hidden; padding:.35rem 0; }
.katex-display > .katex { white-space: nowrap; }
.ms-mathline { background:var(--ms-surface-2); border-radius:var(--ms-radius-sm); padding:.6rem .9rem; margin:.5rem 0; }

/* =========================== Archive head (blog) =========================== */
.ms-archive-head { margin: 0 0 2rem; }
.ms-archive-head .page-title { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 .5rem; }
.ms-archive-head .ms-lede { margin: 0; }

/* =========================== Trust strip =========================== */
.ms-trust { display:flex; flex-wrap:wrap; gap: clamp(14px,3vw,30px); align-items:center; justify-content:center; }
.ms-trust__item { display:flex; align-items:center; gap:.5rem; color:var(--ms-muted); font-weight:500; }
.ms-trust__item b { color:var(--ms-ink); }

/* =========================== Article content polish =========================== */
.entry-content table { border-collapse:collapse; width:100%; margin:1.4rem 0; font-size:.95rem; }
.entry-content th, .entry-content td { border:1px solid var(--ms-border); padding:.6rem .8rem; text-align:left; }
.entry-content thead th { background: var(--ms-primary-soft); color: var(--ms-primary-dark); }
.entry-content blockquote {
  border-left:4px solid var(--ms-primary); background:var(--ms-surface-2);
  margin:1.5rem 0; padding:.8rem 1.2rem; border-radius:0 var(--ms-radius-sm) var(--ms-radius-sm) 0; color:var(--ms-ink);
}
.entry-content :where(h2) { margin-top:2.2rem; }

/* =========================== Related guides =========================== */
.ms-related { margin: 2.5rem 0 0; padding: 1.3rem 1.5rem; background: var(--ms-surface-2); border: 1px solid var(--ms-border); border-radius: var(--ms-radius); }
.ms-related h2 { margin: 0 0 .7rem; font-size: 1.15rem; }
.ms-related ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .4rem; }
@media (min-width: 720px){ .ms-related ul { grid-template-columns: 1fr 1fr; } }
.ms-related a { font-weight: 500; }

/* =========================== Footer brand =========================== */
.ms-foot-brand { display:flex; flex-direction:column; gap:.6rem; max-width:34ch; }
.ms-foot-brand img { height:34px; width:auto; }
.ms-foot-brand p { color:var(--ms-muted); font-size:.92rem; margin:0; }

/* =========================== Site footer =========================== */
.ms-footer { background: var(--ms-surface-2); border-top:1px solid var(--ms-border); padding: clamp(36px,6vw,64px) 0 8px; }
[data-theme="dark"] .ms-footer { background:#0B1120; }
.ms-footer__grid { display:grid; gap: clamp(24px,4vw,40px); grid-template-columns: 1fr; }
@media (min-width:680px){ .ms-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.ms-footer__h { font-size:.82rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ms-muted); margin:0 0 .9rem; font-weight:700; }
.ms-footer__col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.ms-footer__col a { color:var(--ms-ink); text-decoration:none; font-size:.94rem; }
.ms-footer__col a:hover { color:var(--ms-primary); }
.ms-footer__bottom { margin-top: clamp(28px,4vw,44px); padding-top:1.2rem; border-top:1px solid var(--ms-border); display:flex; flex-wrap:wrap; gap:.5rem 2rem; align-items:center; justify-content:space-between; }
.ms-footer__bottom p { margin:0; color:var(--ms-muted); font-size:.86rem; }
.ms-footer__note { max-width:62ch; }
.ms-footer__note a { color:var(--ms-primary); }

/* =========================== Contact form =========================== */
.ms-contact { margin: 1.4rem 0; }
.ms-contact .ms-field { display:flex; flex-direction:column; gap:.35rem; margin:0 0 1rem; }
.ms-contact label { font-weight:600; font-size:.92rem; color:var(--ms-ink); }
.ms-contact input, .ms-contact textarea {
	font-family: var(--ms-font-body); font-size:1rem; color:var(--ms-ink);
	border:1.5px solid var(--ms-border); border-radius: var(--ms-radius-sm); padding:.7rem .85rem; background:var(--ms-surface);
}
.ms-contact input:focus, .ms-contact textarea:focus { border-color:var(--ms-primary); box-shadow:0 0 0 4px var(--ms-primary-soft); outline:none; }
.ms-field__hint { font-size:.85rem; color:var(--ms-muted); }
.ms-field__hint a { color:var(--ms-primary); }

/* =========================== Ad zones (empty until approval) =========================== */
.ms-ad { margin: 1.6rem auto; text-align:center; min-height:0; }
.ms-ad:empty { display:none; }

/* =========================== Utilities =========================== */
.ms-mt-0{margin-top:0}.ms-mb-0{margin-bottom:0}
.ms-center{ text-align:center }
.ms-grid-2{ display:grid; gap:clamp(14px,2.5vw,24px); grid-template-columns:1fr; }
@media(min-width:820px){ .ms-grid-2{ grid-template-columns:1fr 1fr; } }