/* ============================================================
   apimock — an endpoint console.
   Deep aubergine-navy panels, electric iris accent, HTTP-semantic
   method badges (GET green, POST amber, 200 OK mint). Payloads are
   monospace with syntax tokens. Signature motif: request -> braces.
   ============================================================ */

:root {
  /* console surfaces — dark by default (this is a dev tool) */
  --void:    #14121F;   /* page background */
  --panel:   #1D1A2B;   /* raised card */
  --panel2:  #23203373; /* subtle inner */
  --code-bg: #221E33;   /* payload background */
  --code-bg2:#1A1728;
  --line:    #322E45;   /* hairline */
  --line2:   #2A2740;

  --ink:      #DED9F0;  /* primary text */
  --ink-soft: #A9A2CC;  /* muted */
  --ink-faint:#948EB6;  /* captions — AA on panel/code/void */

  /* the signature: electric iris */
  --iris:      #7C6BF5;
  --iris-bri:  #9A8CF9;
  --iris-btn:  #6A57E8;  /* button base (AA with white) */
  --iris-btn2: #5B48DA;
  --iris-wash: #241F3D;
  --iris-line: #4A3F86;

  /* HTTP semantics */
  --get:   #4FD69A;   --get-wash:  #16241E;  --get-line:  #23503C;
  --post:  #F0B15C;   --post-wash: #26200F;  --post-line: #55431C;
  --put:   #6BB6F5;   --put-wash:  #131F2C;  --put-line:  #274763;
  --del2:  #F0796B;   --del-wash:  #2A1614;  --del-line:  #5A2A24;
  --ok:    #7FE6B4;   /* 200 status text */

  /* payload token colours (on --code-bg) */
  --tok-key:  #C9C3EC;
  --tok-str:  #9E8CFB;
  --tok-num:  #4FD69A;
  --tok-bool: #F0B15C;
  --tok-null: #948EB6;
  --tok-mono: #CFC9EC;

  /* text/placeholder that always sit on the dark --code-bg surface
     (inputs, selects) — stays light in both themes because the code
     surface stays dark in both themes. */
  --on-code:        #DED9F0;
  --on-code-faint:  #948EB6;
  --iris-on-code:   #9A8CF9;

  --danger: #F0796B;

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --radius:   14px;
  --radius-sm:10px;
  --radius-xs:8px;
  --shadow:   0 1px 2px rgba(0,0,0,0.35), 0 16px 40px -22px rgba(0,0,0,0.7);
  --shadow-lift: 0 2px 6px rgba(0,0,0,0.4), 0 26px 54px -24px rgba(0,0,0,0.75);
  --glow: 0 0 0 1px var(--iris-line), 0 14px 40px -18px rgba(124,107,245,0.45);
  --wrap: 1240px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-color-scheme: light) {
  :root {
    --void:    #F4F2FB;
    --panel:   #FBFAFE;
    --panel2:  #F1EEFB;
    --code-bg: #211E33;   /* keep the console payload dark — the signature reads best this way */
    --code-bg2:#1A1728;
    --line:    #E2DEF3;
    --line2:   #ECE8F8;

    --ink:      #211E33;
    --ink-soft: #524C6B;
    --ink-faint:#635C80;

    --iris:      #6350DE;
    --iris-bri:  #5B49D6;
    --iris-btn:  #6A57E8;
    --iris-btn2: #5B48DA;
    --iris-wash: #EBE7FB;
    --iris-line: #D6CEF6;

    --get:   #147A4E;   --get-wash:  #E4F5EC;  --get-line:  #BFE7D2;
    --post:  #965E12;   --post-wash: #FBEEDA;  --post-line: #F0D6A6;
    --put:   #1A6299;   --put-wash:  #E2F0FB;  --put-line:  #BEDCF2;
    --del2:  #B83324;   --del-wash:  #FBE7E4;  --del-line:  #F1CBC5;
    --ok:    #147A4E;

    --danger: #C33B2C;

    --shadow:   0 1px 2px rgba(33,30,51,0.06), 0 14px 34px -20px rgba(33,30,51,0.28);
    --shadow-lift: 0 2px 6px rgba(33,30,51,0.09), 0 24px 50px -24px rgba(33,30,51,0.34);
    --glow: 0 0 0 1px var(--iris-line), 0 14px 36px -18px rgba(99,80,222,0.28);
  }
  /* payload tokens on the dark console block stay bright in light mode too */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ambient console grid + iris glow so the void never reads dead */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 520px at 100% -8%, var(--iris-wash), transparent 60%),
    radial-gradient(760px 500px at -6% 100%, var(--get-wash), transparent 62%);
  opacity: 0.85;
  pointer-events: none;
}

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.022em; line-height: 1.1; }
p { margin: 0; }
code { font-family: var(--mono); }

.sr-only {
  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: 12px; top: -60px;
  background: var(--iris-btn); color: #fff;
  padding: 10px 16px; border-radius: 10px; font-weight: 700;
  z-index: 50; transition: top 0.18s var(--ease); text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* shared focus ring — iris */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
pre:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--iris-bri);
  outline-offset: 2px;
  border-radius: 8px;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  font-weight: 500;
}

/* ============================================================
   METHOD / STATUS BADGES — the recurring HTTP motif
   ============================================================ */
.badge {
  display: inline-flex; align-items: center;
  font-family: var(--mono);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  background: var(--panel2);
  white-space: nowrap;
}
.badge--get,
.badge--ok    { color: var(--get);  background: var(--get-wash);  border-color: var(--get-line); }
.badge--post  { color: var(--post); background: var(--post-wash); border-color: var(--post-line); }
.badge--put,
.badge--patch { color: var(--put);  background: var(--put-wash);  border-color: var(--put-line); }
.badge--delete{ color: var(--del2); background: var(--del-wash);  border-color: var(--del-line); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel), transparent 90%);
}
.hero__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 46px) clamp(20px, 5vw, 48px) clamp(30px, 4vw, 44px);
}

.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.brand__mark { width: 34px; height: 34px; flex: none; }
.brand__bg { fill: var(--iris-btn); }
.brand__brace { fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.brand__dot { fill: var(--get); }
.brand__word { font-size: 1.26rem; font-weight: 800; letter-spacing: -0.04em; }

.hero__title {
  font-size: clamp(2rem, 5vw, 3.25rem);
  margin: 20px 0 0;
  max-width: 20ch;
}
.hero__accent { color: var(--iris-bri); }
.hero__lede {
  margin-top: 16px;
  max-width: 62ch;
  color: var(--ink-soft);
  font-size: clamp(0.98rem, 1.25vw, 1.1rem);
}
.hero__lede code {
  font-size: 0.92em; color: var(--iris-bri);
  background: var(--iris-wash); border: 1px solid var(--iris-line);
  padding: 1px 6px; border-radius: 6px;
}

/* request -> response flow chip pair (signature) */
.hero__flow {
  margin-top: 26px;
  display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
  font-family: var(--mono);
  font-size: 0.94rem;
  color: var(--ink);
}
.chip code { color: var(--ink); font-size: 0.94rem; }
.chip--res { box-shadow: var(--glow); border-color: var(--iris-line); }
.flow-arrow { color: var(--iris-bri); font-size: 1.4rem; font-weight: 700; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent;
  padding: 12px 22px;
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform 0.12s var(--ease), background 0.16s var(--ease),
              box-shadow 0.16s var(--ease), border-color 0.16s var(--ease), color 0.16s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--sm { padding: 7px 13px; font-size: 0.83rem; border-radius: 8px; }
.btn--icon { padding: 8px; border-radius: 8px; }

.btn--primary {
  background: var(--iris-btn);
  color: #fff;
  box-shadow: 0 12px 28px -14px rgba(106,87,232,0.75);
}
.btn--primary:hover { background: var(--iris-btn2); }
.btn--build { width: 100%; margin-top: 16px; padding: 14px; font-size: 1rem; }

.btn--ghost {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--iris-line); color: var(--ink); background: var(--panel2); }

/* ============================================================
   LAYOUT
   ============================================================ */
.grid {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(22px, 3vw, 34px) clamp(20px, 5vw, 48px) 24px;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(18px, 2vw, 26px);
  align-items: start;
}
.col { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 22px); min-width: 0; }
.col--output { position: sticky; top: 20px; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px 22px;
}
.card--input { border-color: var(--iris-line); }
.card__head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.card__title { font-size: 1.1rem; letter-spacing: -0.02em; }
.card__head-actions { margin-left: auto; display: flex; gap: 8px; }
.card__hint-inline { margin-left: auto; font-size: 0.76rem; color: var(--ink-faint); font-family: var(--mono); }

.hint { margin-top: 10px; font-size: 0.8rem; color: var(--ink-faint); line-height: 1.45; }
.empty { font-size: 0.9rem; color: var(--ink-faint); font-style: italic; }
.empty--big {
  padding: 60px 24px; text-align: center; font-style: normal;
  border: 1.5px dashed var(--line); border-radius: var(--radius);
  background: var(--panel2); font-size: 1rem;
}
.empty--big strong { color: var(--iris-bri); }

/* ============================================================
   CODE INPUT (the paste area)
   ============================================================ */
.code-input {
  width: 100%;
  min-height: 220px;
  resize: vertical;
  font-family: var(--mono);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--tok-mono);
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 15px;
  tab-size: 2;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.code-input::placeholder { color: var(--on-code-faint); }
.code-input:hover { border-color: var(--iris-line); }
.code-input:focus { outline: none; border-color: var(--iris); box-shadow: 0 0 0 3px var(--iris-wash); }

.formerror { color: var(--danger); font-size: 0.85rem; font-weight: 600; margin-top: 8px; }
.formerror:empty { display: none; }

/* ============================================================
   CONTROLS (endpoint / count / seed)
   ============================================================ */
.controls { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }
.controls__row { display: grid; grid-template-columns: 130px 1fr; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink-faint);
}

.input {
  font-family: var(--mono);
  font-size: 0.92rem;
  color: var(--on-code);
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  width: 100%;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.input::placeholder { color: var(--on-code-faint); }
.input:hover { border-color: var(--iris-line); }
.input:focus { outline: none; border-color: var(--iris); box-shadow: 0 0 0 3px var(--iris-wash); }
.input--num { text-align: center; font-weight: 700; }

/* endpoint: method select fused with path input */
.endpoint { display: flex; align-items: stretch; }
.endpoint .select--method select {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  border-right: none;
  font-weight: 700;
  color: var(--iris-on-code);
  padding-right: 30px;
}
.input--path {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  flex: 1;
}

.select { position: relative; display: inline-flex; }
.select::after {
  content: "";
  position: absolute; right: 11px; top: 50%;
  width: 7px; height: 7px; margin-top: -5px;
  border-right: 2px solid var(--on-code-faint);
  border-bottom: 2px solid var(--on-code-faint);
  transform: rotate(45deg);
  pointer-events: none;
}
.select select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  font-family: var(--mono);
  font-size: 0.9rem; font-weight: 600;
  color: var(--on-code);
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 30px 10px 12px;
  cursor: pointer;
}
.select select:hover { border-color: var(--iris-line); }
.select select:focus { outline: none; border-color: var(--iris); box-shadow: 0 0 0 3px var(--iris-wash); }

.seedwrap { display: flex; gap: 8px; }
.seedwrap .input--seed { flex: 1; }
.btn--icon svg { display: block; }

/* ============================================================
   SCHEMA TREE
   ============================================================ */
.schema { font-family: var(--mono); font-size: 0.86rem; }
.schema-root {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 10px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line2);
}
.schema-root__kind {
  color: var(--iris-bri); font-weight: 700;
  background: var(--iris-wash); border: 1px solid var(--iris-line);
  padding: 2px 9px; border-radius: 6px; font-size: 0.8rem;
}
.schema-list { list-style: none; margin: 0; padding: 0 0 0 2px; }
.schema-row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 5px 0;
  flex-wrap: wrap;
}
.schema-key { color: var(--tok-key); font-weight: 600; }
.schema-colon { color: var(--ink-faint); margin-left: -4px; }
.schema-type {
  color: var(--iris-bri);
  font-size: 0.78rem; font-weight: 600;
  background: var(--panel2); border: 1px solid var(--line);
  padding: 1px 7px; border-radius: 5px;
}
.schema-fmt {
  color: var(--get);
  font-size: 0.72rem; font-weight: 600;
  border: 1px solid var(--get-line); background: var(--get-wash);
  padding: 1px 6px; border-radius: 5px;
}
.schema-eg { color: var(--ink-faint); font-size: 0.8rem; margin-left: auto; }
.schema-nested {
  margin: 2px 0 4px 6px;
  padding-left: 12px;
  border-left: 1.5px solid var(--line);
}
.schema-nested__label {
  font-size: 0.72rem; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 3px 0;
}

/* ============================================================
   ENDPOINT META BAR (output header)
   ============================================================ */
.endpoint-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border-bottom: none;
}
.route {
  font-family: var(--mono); font-size: 0.94rem; font-weight: 600;
  color: var(--ink);
}
.status {
  font-family: var(--mono); font-size: 0.78rem; font-weight: 700;
  color: var(--ok);
  background: var(--get-wash); border: 1px solid var(--get-line);
  padding: 3px 8px; border-radius: 6px;
}
.record-meta {
  margin-left: auto;
  font-family: var(--mono); font-size: 0.78rem;
  color: var(--ink-faint);
}

/* ============================================================
   TABS
   ============================================================ */
.tabs {
  display: flex; gap: 2px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-bottom: none;
  padding: 0 6px;
  overflow-x: auto;
}
.tab {
  font-family: var(--mono);
  font-size: 0.86rem; font-weight: 600;
  color: var(--ink-faint);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 12px 14px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.14s var(--ease), border-color 0.14s var(--ease);
}
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--iris-bri); border-bottom-color: var(--iris); }

/* ============================================================
   PANELS + PAYLOADS
   ============================================================ */
.panel {
  border: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--panel);
  overflow: hidden;
}
.panel__bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line2);
}
.panel__label { font-size: 0.8rem; color: var(--ink-soft); font-weight: 600; }
.panel__actions { margin-left: auto; display: flex; gap: 8px; }

.payload {
  margin: 0;
  padding: 16px 16px 18px;
  background: var(--code-bg);
  color: var(--tok-mono);
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1.6;
  tab-size: 2;
  overflow-x: auto;
  max-height: 560px;
  overflow-y: auto;
  white-space: pre;
}
/* token colours */
.tok-key  { color: var(--tok-key); }
.tok-str  { color: var(--tok-str); }
.tok-num  { color: var(--tok-num); }
.tok-bool { color: var(--tok-bool); font-weight: 600; }
.tok-null { color: var(--tok-null); font-style: italic; }

/* run box for db.json */
.runbox {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line2);
  background: var(--iris-wash);
}
.runbox__label {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--iris-bri);
}
.runbox__cmd {
  flex: 1; min-width: 220px;
  margin: 0; padding: 9px 12px;
  background: var(--code-bg); color: var(--tok-mono);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  font-family: var(--mono); font-size: 0.82rem;
  overflow-x: auto; white-space: pre;
  line-height: 1.5;
}

/* ============================================================
   TOAST
   ============================================================ */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--iris-btn); color: #fff;
  padding: 11px 20px; border-radius: 999px;
  font-size: 0.9rem; font-weight: 600;
  box-shadow: var(--shadow-lift); z-index: 40;
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot { border-top: 1px solid var(--line); background: var(--panel); margin-top: 16px; }
.foot__inner { max-width: var(--wrap); margin: 0 auto; padding: 26px clamp(20px, 5vw, 48px) 38px; }
.foot__disclaimer { font-size: 0.85rem; color: var(--ink-soft); max-width: 92ch; line-height: 1.55; }
.foot__disclaimer strong { color: var(--ink); }
.foot__meta {
  margin-top: 15px; display: flex; flex-wrap: wrap; gap: 6px 10px;
  font-family: var(--mono); font-size: 0.76rem; color: var(--ink-faint);
}
.foot__dot { color: var(--line); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 940px) {
  .grid { grid-template-columns: 1fr; }
  .col--output { position: static; }
}
@media (max-width: 560px) {
  .controls__row { grid-template-columns: 1fr; }
  .card { padding: 18px 15px 20px; }
  .hero__flow { gap: 8px; }
  .chip { font-size: 0.86rem; padding: 8px 11px; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
}