/* Satsana Design Language v1.1 (styleguide.satsana.ai/satsana) */
:root {
  /* brand: green-anchored, warmed with a yellow secondary */
  --green: #528b69; --green-700: #3f6e52; --green-800: #33583f; --green-50: #eef3f0; --green-100: #dce8e1;
  --green-text: #3f7058; /* green as small text on light surfaces (WCAG AA) */
  --charcoal: #1a202c; --slate: #444d5f;
  --yellow: #ffbf69; --yellow-600: #f3a838; --yellow-50: #fff5e6;
  --coral: #e3655b; --coral-50: #fbe8e6;
  --sky: #06aed5; --sky-50: #e2f5fb;
  /* neutral foundation: warm-leaning off-white */
  --page: #fafafa; --card: #ffffff; --frame: #f2f1ec; --stroke: #e8e6e0; --divider: #ecebe6;
  --text: #1a202c; --text-2: #444d5f; --gray: #9aa0aa;
  --header: rgba(250, 250, 250, 0.85);

  /* type: Lora for display, Inter for body and UI */
  --display: "Lora", Georgia, "Times New Roman", serif;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* radius grows with the surface */
  --radius-md: 16px; --radius: 20px; --radius-lg: 28px; --radius-xl: 40px; --radius-pill: 999px;
  /* spacing scale, 4px base */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px; --s12: 48px; --s16: 64px;
  /* line-height scales inversely with size */
  --lh-display: 1.08; --lh-head: 1.18; --lh-body: 1.62; --lh-small: 1.4;
  --maxw: 1040px;
  --shadow-raised: 0 8px 24px rgba(26, 32, 44, 0.07);
  --shadow-overlay: 0 18px 44px rgba(26, 32, 44, 0.16);

  /* demo-specific: the darkest step on a risk scale */
  --coral-deep: #b8473e;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  background: var(--page);
  color: var(--text);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}

/* ---------- type roles ---------- */
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-text); line-height: var(--lh-small); }
h2.sec { font-family: var(--display); font-size: clamp(28px, 3.8vw, 38px); font-weight: 600; letter-spacing: -0.01em; color: var(--charcoal); line-height: var(--lh-head); }
.g { color: var(--green); } /* two-tone headline emphasis, once per view */
h3.sub { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); line-height: var(--lh-small); }
.card-title { font-family: var(--display); font-size: 21px; font-weight: 600; color: var(--charcoal); line-height: var(--lh-head); }

/* ---------- wordmark + nav ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--header); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--stroke); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 62px; flex-wrap: wrap; padding-top: var(--s2); padding-bottom: var(--s2); }
.mark { display: inline-flex; align-items: baseline; gap: 9px; font-family: var(--display); font-weight: 600; font-size: 21px; color: var(--charcoal); letter-spacing: -0.01em; }
.mark .endorse { font-family: var(--font); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray); align-self: center; }
.header-controls { display: flex; align-items: center; gap: var(--s4); }

.tabs { display: flex; gap: var(--s6); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  appearance: none; border: 0; background: none; cursor: pointer;
  font: 600 13px var(--font); color: var(--text-2); line-height: var(--lh-small);
  padding: var(--s2) 0 var(--s3); border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color 0.2s;
}
.tab:hover { color: var(--green); }
.tab[aria-selected="true"] { color: var(--charcoal); border-bottom-color: var(--green); }
.tab .tag { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-left: var(--s2); color: var(--gray); }

/* ---------- switch ---------- */
.switch { display: inline-flex; align-items: center; gap: var(--s2); cursor: pointer; user-select: none; font-size: 13px; font-weight: 600; color: var(--text-2); }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch-track { width: 40px; height: 24px; border-radius: var(--radius-pill); background: var(--stroke); position: relative; transition: background 0.2s; }
.switch-thumb { position: absolute; top: 4px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--card); box-shadow: 0 1px 2px rgba(26, 32, 44, 0.2); transition: transform 0.2s; }
.switch input:checked + .switch-track { background: var(--green); }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(16px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--green); outline-offset: 2px; }

/* ---------- pills / badges: one meaning per color ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; padding: 6px 13px; border-radius: var(--radius-pill); text-transform: uppercase; white-space: nowrap; line-height: var(--lh-small); }
.pill-idle { background: var(--frame); color: var(--text-2); }
.pill-green { background: var(--green-50); color: var(--green-800); }
.pill-yellow { background: var(--yellow-50); color: #9a6a16; }
.pill-coral { background: var(--coral-50); color: #9c3b34; }
.pill-sky { background: var(--sky-50); color: #04789a; }
.pill-dark { background: var(--charcoal); color: #fff; }

/* ---------- intro ---------- */
.intro { padding: var(--s12) 0 var(--s8); display: grid; gap: var(--s3); }
.intro .lede { font-size: 16px; color: var(--text-2); max-width: 62ch; line-height: var(--lh-body); }
.challenge { display: flex; gap: var(--s3); align-items: center; margin-top: var(--s2); padding: var(--s3) var(--s4); border-radius: var(--radius-md); background: var(--yellow-50); color: var(--charcoal); font-size: 14px; font-weight: 500; max-width: 62ch; }
.challenge i { font-size: 20px; color: var(--yellow-600); flex: none; }

/* ---------- layout ---------- */
.grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); align-items: start; padding-bottom: var(--s12); }
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-raised); padding: var(--s6); display: grid; gap: var(--s4); min-width: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }

/* ---------- inputs ---------- */
.examples { display: flex; gap: var(--s2); flex-wrap: wrap; }
.chip {
  appearance: none; cursor: pointer; border: 0; background: var(--frame);
  font: 600 12px var(--font); color: var(--text-2); padding: var(--s2) var(--s3); border-radius: var(--radius-pill); line-height: var(--lh-small);
  transition: background 0.2s, color 0.2s;
}
.chip:hover { background: var(--green-50); color: var(--green-800); }
.chip[aria-pressed="true"] { background: var(--green-50); color: var(--green-800); box-shadow: inset 0 0 0 1.5px var(--green); }

textarea {
  width: 100%; min-height: 264px; resize: vertical; border: 0; border-radius: var(--radius-md);
  padding: var(--s4); font: 15px/1.62 var(--font); color: var(--text); background: var(--frame);
}
textarea.json { font-family: var(--mono); font-size: 13px; line-height: 1.55; }
textarea:focus { outline: 2px solid var(--green); outline-offset: 0; background: var(--card); }

.actions { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.hint { font-size: 12px; color: var(--gray); line-height: var(--lh-small); }

/* ---------- buttons: pills that lift ---------- */
.btn {
  font-family: var(--font); font-size: 14px; font-weight: 600; border: none; border-radius: var(--radius-pill);
  padding: 13px 24px; cursor: pointer; display: inline-flex; align-items: center; gap: var(--s2); line-height: 1;
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.25s ease, color 0.2s ease;
}
.btn:hover:not(:disabled) { transform: translateY(-2px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn i { font-size: 16px; transition: transform 0.2s ease; }
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--green-700); box-shadow: 0 10px 24px rgba(82, 139, 105, 0.28); }
.btn-primary:hover:not(:disabled) i { transform: translateX(4px); }
.btn-secondary { background: var(--green-50); color: var(--green-800); }
.btn-secondary:hover:not(:disabled) { background: var(--green-100); box-shadow: 0 8px 20px rgba(82, 139, 105, 0.16); }
.btn-ghost { background: transparent; color: var(--green-800); box-shadow: inset 0 0 0 1.5px var(--green); }
.btn-ghost:hover:not(:disabled) { background: var(--green); color: #fff; box-shadow: 0 8px 20px rgba(82, 139, 105, 0.18); }
.btn:focus-visible, .chip:focus-visible, .tab:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* ---------- results ---------- */
.results { display: grid; gap: var(--s6); }
.empty { color: var(--gray); font-size: 14px; }
.error, .notice { padding: var(--s3) var(--s4); border-radius: var(--radius-md); font-size: 14px; line-height: var(--lh-small); }
.error { background: var(--coral-50); color: #9c3b34; }
.notice { background: var(--yellow-50); color: #6b4a10; }

.insight { padding: var(--s6); border-radius: var(--radius); background: var(--sky-50); display: grid; gap: var(--s2); }
.insight.good { background: var(--green-50); }
.insight.warn { background: var(--yellow-50); }
.insight.bad { background: var(--coral-50); }
.insight .headline { font-family: var(--display); font-size: 22px; font-weight: 600; color: var(--charcoal); line-height: var(--lh-head); }
.insight .detail { font-size: 14px; color: var(--text-2); }

.answer { display: grid; gap: var(--s2); }
.answer-head { display: flex; justify-content: space-between; gap: var(--s3); align-items: baseline; }
.answer-label { font-size: 14px; font-weight: 600; color: var(--charcoal); line-height: var(--lh-small); }
.answer-value { font-size: 14px; font-weight: 700; color: var(--charcoal); white-space: nowrap; line-height: var(--lh-small); }

.bar { height: 8px; border-radius: var(--radius-pill); background: var(--frame); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: var(--radius-pill); transition: width 0.5s ease; }
.fill-risk { background: var(--coral); }
.fill-good { background: var(--green); }
.fill-info { background: var(--sky); }

.options { display: grid; gap: var(--s2); }
.option { display: grid; grid-template-columns: minmax(88px, 160px) 1fr 40px; gap: var(--s3); align-items: center; font-size: 13px; line-height: var(--lh-small); color: var(--text-2); }
.option .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.option.top .name { font-weight: 600; color: var(--charcoal); }
.option .num { text-align: right; font-variant-numeric: tabular-nums; color: var(--gray); }
.option.top .num { color: var(--charcoal); font-weight: 600; }

.scale { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--s1); }
.scale .seg { height: 8px; border-radius: var(--radius-pill); background: var(--frame); }
.scale-labels { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; font-size: 12px; color: var(--gray); line-height: var(--lh-small); }
.scale-labels span:last-child { text-align: right; }
.scale-labels span:not(:first-child):not(:last-child) { text-align: center; }
.scale-labels .active { color: var(--charcoal); font-weight: 600; }

.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--s2); padding-top: var(--s4); border-top: 1px solid var(--divider); }
.metric { display: grid; gap: var(--s1); padding: var(--s3); border-radius: var(--radius-md); background: var(--frame); }
.metric .k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); font-weight: 700; line-height: var(--lh-small); }
.metric .v { font-size: 16px; font-weight: 700; color: var(--charcoal); font-variant-numeric: tabular-nums; line-height: var(--lh-small); }
.metric.money { background: var(--yellow-50); }

/* ---------- router ---------- */
.router { display: grid; gap: var(--s3); border-top: 1px solid var(--divider); padding-top: var(--s4); }
.router-buttons { display: flex; gap: var(--s2); flex-wrap: wrap; }
.router-buttons .pick { font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 2px var(--s2); border-radius: var(--radius-pill); background: var(--yellow); color: var(--charcoal); }
.router-answer { border-radius: var(--radius-md); padding: var(--s4); background: var(--frame); }
.router-answer .meta { display: flex; gap: var(--s3); flex-wrap: wrap; font-size: 12px; color: var(--text-2); margin-bottom: var(--s2); line-height: var(--lh-small); }
.router-answer .meta strong { color: var(--charcoal); }
.router-answer .text { white-space: pre-wrap; font-size: 14px; color: var(--text); }
.router-table, .compare-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: var(--lh-small); }
.router-table th, .router-table td, .compare-table th, .compare-table td { text-align: left; padding: var(--s2); border-bottom: 1px solid var(--divider); }
.router-table th, .compare-table th { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); font-weight: 700; }
.agree { color: var(--green-text); font-weight: 700; }
.disagree { color: #9c3b34; font-weight: 700; }

/* ---------- under the hood ---------- */
.hood { display: none; gap: var(--s3); border-top: 1px dashed var(--stroke); padding-top: var(--s4); }
body.hood-on .hood { display: grid; }
.hood-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.hood-note { font-size: 13px; color: var(--text-2); line-height: 1.55; }
pre {
  padding: var(--s3) var(--s4); border-radius: var(--radius-md); background: var(--charcoal); color: #e6edf3;
  font: 12px/1.55 var(--mono); overflow: auto; max-height: 340px; white-space: pre-wrap; word-break: break-word;
}
.compare-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--s2); }

.site-footer { display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; padding-top: var(--s2); padding-bottom: var(--s12); font-size: 12px; color: var(--gray); line-height: var(--lh-small); }
.presenter { display: inline-flex; gap: var(--s2); align-items: center; cursor: pointer; }
.presenter input { accent-color: var(--green); }

.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.5); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; }
.btn-secondary .spinner, .btn-ghost .spinner { border-color: var(--green-100); border-top-color: var(--green); }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 860px) {
  .grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 var(--s4); }
  .mark .endorse { display: none; }
  .intro { padding-top: var(--s8); }
  .card { padding: var(--s4); }
  .option { grid-template-columns: minmax(72px, 112px) 1fr 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .bar > span, .switch-thumb, .switch-track, .btn, .btn i { transition: none; }
  .btn:hover:not(:disabled) { transform: none; }
  .spinner { animation-duration: 2s; }
}