/* ═══ Imago ═══ APIs become interfaces ═══════════════════════════ */
/*
   BRAND SYSTEM
   ────────────
   Mark      "Reveal" — two response fields merge into one rounded body with a
             knocked-out aperture: the interface found inside the response.
             Defined once as a symbol in index.html, and duplicated in
             favicon.svg, assets/*.svg and brand/og.html, which nothing syncs.
   Brand     No brand hue. Ink and paper only. The semantic set already owns
             amber, green and red, plus the single --link blue; every remaining
             family either collides with a meaning or is the banned purple.
             Colour means the user's data moved, never "us".
   Voice     Plain and precise. State what happened, not how clever it was.
             "Schema already known — reused cached interface."
   Colour    Paper (#f6f5f1) not white: this is a reading surface, and warm
             grey keeps 284 KB of JSON from glaring. Ink is near-black, never
             pure #000. Amber is the only decorative accent and it always
             means "something changed". Green means live, red means failed.
             Never introduce a colour that doesn't carry a meaning.
   Type      One family. Weight and size do the work, not colour.
   Motion    120-220ms, ease-out. Motion confirms an action; it never
             performs. Everything collapses under prefers-reduced-motion.
*/

:root {
  /* brand */
  --mark-tile: #1b1b19;
  --mark-ink:  #ffffff;

  --bg:         #f6f5f1;
  --bg-sink:    #f1efe9;
  --card:       #ffffff;
  --card-2:     #faf9f6;
  --line:       #e7e5df;
  --line-soft:  #efedE8;
  --ink:        #1b1b19;
  --ink-2:      #45443f;
  --muted:      #66655f;   /* 5.4:1 on paper; captions must still be readable */
  --muted-2:    #6f6e67;   /* 4.7:1 on paper; the step down is size, not lightness */

  --yellow:     #f5ce47;
  --yellow-bg:  #fdf3cd;
  --yellow-ink: #6f570b;   /* 6.2:1 on yellow-bg */
  --yellow-line: #efe0a8;
  --green:      #4fa96a;
  --green-bg:   #e4f4e8;
  --red:        #d9534f;
  --red-bg:     #fbeaea;
  --red-ink:    #a83e3a;   /* red text on red-bg: 5.3:1 */
  --link:       #3f6fb5;   /* the one link blue; 5.1:1 on white */

  /* Steps the palette above did not name, so a dark theme can restate them. */
  --on-ink:      #ffffff;   /* text on an ink fill */
  --ink-hover:   #33322e;
  --line-strong: #cfccc3;   /* hover borders */
  --line-focus:  #bdbab1;
  --switch-off:  #d9d6ce;
  --knob:        #ffffff;
  --green-ink:   #2f7a48;
  --green-line:  #c6e5cf;
  --red-line:    #e6b9b7;
  --red-ink-2:   #8a4442;
  --yellow-wash: #fffdf5;
  --yellow-edge: #e8cf82;
  --faint:       #c9c7bf;   /* JSON line numbers */
  --tok-key:     #9a5b2d;
  --tok-str:     #3f7a4f;
  --panel:       #1b1b19;   /* the landing's dark response panel, dark in both themes */
  --toast:       #1b1b19;   /* toasts stay a dark pill in both themes */

  --r-lg: 16px;
  --r:    12px;
  --r-sm: 9px;
  --r-xs: 7px;
  --r-2xs: 4px;

  --sh-xs: 0 1px 2px rgba(27,27,25,.05);
  --sh-sm: 0 1px 2px rgba(27,27,25,.05), 0 2px 6px -2px rgba(27,27,25,.06);
  --sh:    0 1px 3px rgba(27,27,25,.05), 0 8px 20px -10px rgba(27,27,25,.12);
  --sh-lg: 0 2px 6px rgba(27,27,25,.04), 0 18px 46px -16px rgba(27,27,25,.20);

  --sans: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --display: "Inter Display", "SF Pro Display", "Segoe UI Variable Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Dark theme. The same warm paper-and-ink system, turned down: surfaces are
   warm near-blacks, ink is the light paper colour, and the meanings (amber
   changed, green live, red failed, one link blue) keep their hues. Chosen in
   Settings → Appearance, or taken from the system when that says System.
   js/theme-boot.js sets data-theme before first paint, so there is no flash. */
:root { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --mark-tile: #f1efe9;
  --mark-ink:  #161614;

  --bg:         #161614;
  --bg-sink:    #121210;
  --card:       #1e1e1b;
  --card-2:     #242420;
  --line:       #34332f;
  --line-soft:  #2a2926;
  --ink:        #f1efe9;
  --ink-2:      #d6d4cc;
  --muted:      #a8a69d;   /* 7.4:1 on card */
  --muted-2:    #9c9a91;

  --yellow:     #f5ce47;
  --yellow-bg:  #3a3115;
  --yellow-ink: #f3d77a;
  --yellow-line: #5c4c1d;
  --green:      #5dbb78;
  --green-bg:   #173020;
  --red:        #e36e6a;
  --red-bg:     #3b1d1c;
  --red-ink:    #f2a5a2;
  --link:       #8db4ec;

  --on-ink:      #161614;
  --ink-hover:   #ffffff;
  --line-strong: #4a4943;
  --line-focus:  #5e5c55;
  --switch-off:  #3f3e39;
  --knob:        #f1efe9;
  --green-ink:   #86d6a0;
  --green-line:  #2d5539;
  --red-line:    #5e2d2b;
  --red-ink-2:   #dba3a0;
  --yellow-wash: #29251a;
  --yellow-edge: #7d6726;
  --faint:       #57564f;
  --tok-key:     #e3ab7e;
  --tok-str:     #93d2a3;
  --panel:       #0e0e0d;
  --toast:       #3a3935;

  --sh-xs: 0 1px 2px rgba(0,0,0,.30);
  --sh-sm: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px -2px rgba(0,0,0,.35);
  --sh:    0 1px 3px rgba(0,0,0,.30), 0 8px 20px -10px rgba(0,0,0,.50);
  --sh-lg: 0 2px 6px rgba(0,0,0,.30), 0 18px 46px -16px rgba(0,0,0,.60);
}
/* A dark switch knob on a light track would vanish; it goes dark when on. */
:root[data-theme="dark"] .switch[aria-checked="true"] .switch-knob { background: var(--on-ink); }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Zoho PageSense hides the whole page (html and body at opacity 0, visibility
   hidden) until its A/B and location checks finish; in Safari that left a
   blank page for seconds. Imago runs no experiments, so the page is never
   hidden: these selectors outrank PageSense's plain html and body rules. */
html:root, html:root > body { opacity: 1 !important; visibility: visible !important; }
html:root > body { background: var(--bg) !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.015em; }
p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
.mono { font-family: var(--mono); font-size: max(12px, 0.92em); }

.view[hidden], [hidden] { display: none !important; }

::selection { background: var(--ink); color: var(--card); }

/* Keyboard focus is ink, like everything else that means "you are here". */
button:focus-visible, a:focus-visible, [role="button"]:focus-visible, select:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px;
}
button:focus:not(:focus-visible) { outline: none; }

/* Fingers get 44px; pointers keep the dense desktop sizing. */
@media (pointer: coarse) {
  .stage-back, .action-btn, .chip, .appnav button, .tabs button, .link-btn, .btn-xs { min-height: 44px; }
  .link-btn { padding: 12px 8px; }
}

/* ─── Buttons ──────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  padding: 0 14px;
  height: 38px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.btn-dark { background: var(--ink); color: var(--on-ink); box-shadow: var(--sh-xs); }
.btn-dark:hover:not(:disabled) { background: var(--ink-hover); }

.btn-ghost { background: var(--card); color: var(--ink-2); border-color: var(--line); box-shadow: var(--sh-xs); }
.btn-ghost:hover:not(:disabled) { border-color: var(--line-strong); color: var(--ink); }
.btn-danger:hover:not(:disabled) { color: var(--red-ink); border-color: var(--red-line); background: var(--red-bg); }

.btn-lg { height: 44px; padding: 0 20px; font-size: 14.5px; }
.btn-xs { height: 28px; padding: 0 9px; font-size: 12px; border-radius: var(--r-xs); }
/* Saved: the star fills in ink. Colour stays reserved for changed, live, failed. */
#saveBtn.is-saved { color: var(--ink); }
#saveBtn.is-saved svg path { fill: currentColor; }
.btn-block { width: 100%; }

.link-btn {
  background: none; border: none; padding: 0;
  font-family: inherit; font-size: 13.5px; color: var(--muted);
  cursor: pointer; transition: color .15s ease;
}
.link-btn:hover { color: var(--ink); }

/* ─── Inputs ───────────────────────────────────────────────────── */

input[type="text"], input[type="url"], input[type="password"], textarea, select {
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { font-family: var(--mono); font-size: 12.5px; resize: vertical; line-height: 1.6; }
input::placeholder, textarea::placeholder { color: var(--muted-2); }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--line-focus);
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--ink) 7%, transparent);
}

.field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 7px;
}
.muted-note { font-size: 12.5px; color: var(--muted); margin-top: 9px; line-height: 1.55; }

/* Per-provider key status under each key field. */
.key-status { font-size: 12.5px; margin-top: 7px; color: var(--muted); }
.key-status[data-state="ready"] { color: var(--green-ink); }
.key-status[data-state="missing"] { color: var(--muted); }
.settings-card .key-field { margin-top: 0; }

/* ═══ Landing ════════════════════════════════════════════════════ */

#landingView { min-height: 100vh; display: flex; flex-direction: column; }

.landing-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 34px;
  max-width: 1180px; width: 100%; margin: 0 auto;
}
.landing-nav { display: flex; gap: 24px; }

.brand { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.brand-mark { color: var(--ink); display: flex; }
.brand-word { font-size: 15.5px; font-weight: 600; letter-spacing: -0.021em; }

.landing-main {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  max-width: 1180px; width: 100%;
  margin: 0 auto;
  padding: 20px 34px 80px;
}

.landing-title { font-size: clamp(38px, 5.4vw, 60px); line-height: 1.04; letter-spacing: -0.035em; }
.landing-sub { margin: 22px 0 30px; font-size: 16px; color: var(--ink-2); line-height: 1.6; }


























/* ═══ Setup ══════════════════════════════════════════════════════ */

.key-field { position: relative; margin-top: 26px; }
.key-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--muted-2); display: flex; pointer-events: none;
}
.key-field input { padding-left: 36px; height: 44px; }

/* ═══ App shell ══════════════════════════════════════════════════ */

.appbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  height: 60px;
  padding: 0 26px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.appnav { display: flex; gap: 4px; }
.appnav button {
  background: none; border: none;
  font-family: inherit; font-size: 13.5px; font-weight: 500;
  color: var(--muted);
  padding: 7px 12px; border-radius: var(--r-xs);
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.appnav button:hover { color: var(--ink-2); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.appnav button.is-active { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); font-weight: 600; }

.appbar-right { display: flex; align-items: center; gap: 12px; }
.key-pill {
  font-size: 11.5px; font-weight: 500;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  white-space: nowrap;
}
.key-pill[data-state="ready"] { color: var(--green-ink); background: var(--green-bg); border-color: var(--green-line); }
/* A missing key is not a change, so it stays neutral (the default above). */


.app-main { max-width: 1120px; margin: 0 auto; padding: 30px 26px 80px; }

.pane-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.pane-title { font-size: 26px; letter-spacing: -0.025em; }

/* ─── Request bar ──────────────────────────────────────────────── */

.reqbar {
  display: flex; align-items: center; gap: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  padding: 8px;
}
.method-chip {
  font-family: var(--mono);
  font-size: 12px; font-weight: 600;
  color: var(--ink-2);
  background: var(--bg-sink);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 8px 11px;
  flex: 0 0 auto;
}
.url-input {
  flex: 1 1 auto; min-width: 0;
  border: none; background: none; box-shadow: none !important;
  font-family: var(--mono); font-size: 13px;
  padding: 8px 4px;
}
.url-input:focus { border: none; }
.btn-go { width: 38px; padding: 0; flex: 0 0 auto; }

.reqtools { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.refresh-group { display: flex; align-items: center; gap: 9px; }
.refresh-label { font-size: 13px; color: var(--ink-2); }

.switch {
  position: relative;
  width: 40px; height: 23px;
  border-radius: 999px;
  background: var(--switch-off);
  border: none; padding: 0; cursor: pointer;
  transition: background .18s ease;
  flex: 0 0 auto;
}
.switch[aria-checked="true"] { background: var(--ink); }
.switch-knob {
  position: absolute; top: 3px; left: 3px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--knob);
  box-shadow: 0 1px 3px rgba(0,0,0,.22);
  transition: transform .18s cubic-bezier(.4,.1,.2,1);
}
.switch[aria-checked="true"] .switch-knob { transform: translateX(17px); }

.mini-select {
  width: auto; padding: 5px 8px; font-size: 12.5px;
  border-radius: var(--r-xs);
  background: var(--card);
  cursor: pointer;
}
.mini-select:disabled { opacity: .45; cursor: not-allowed; }

.live-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500;
  color: var(--green-ink); background: var(--green-bg);
  border: 1px solid var(--green-line); border-radius: 999px;
  padding: 4px 11px;
}
.live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
}
.live-dot.is-beat { animation: pulse 1.9s ease-in-out 1; }
.live-count { color: var(--green-ink); font-variant-numeric: tabular-nums; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

.runmeta { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.meta-chip {
  font-size: 11.5px; color: var(--muted);
  background: var(--card); border: 1px solid var(--line-soft);
  border-radius: 999px; padding: 4px 11px;
  white-space: nowrap;
}
.meta-chip b { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.meta-chip.is-hot { background: var(--yellow-bg); border-color: var(--yellow-line); color: var(--yellow-ink); }
.meta-chip.is-hot b { color: var(--yellow-ink); }

/* ─── Tabs ─────────────────────────────────────────────────────── */

.tabs {
  display: flex; gap: 2px;
  margin: 22px 0 16px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  background: none; border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: inherit; font-size: 13.5px; font-weight: 500;
  color: var(--muted);
  padding: 9px 13px;
  cursor: pointer; white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.tabs button:hover { color: var(--ink-2); }
.tabs button.is-active { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }

.tab-pane { display: none; }
.tab-pane.is-active { display: block; animation: fade .22s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* ─── Cards ────────────────────────────────────────────────────── */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  padding: 20px;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: -20px -20px 20px; padding: 14px 20px;
  border-bottom: 1px solid var(--line-soft);
}
.card-title { font-size: 14px; font-weight: 600; }
.sub-head { font-size: 13.5px; font-weight: 600; margin-bottom: 12px; }

.badge-chip {
  font-size: 11.5px; font-weight: 500;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); background: var(--card-2);
  white-space: nowrap;
}
/* Provenance is information, not status: yellow means a value changed and
   green means live/OK, so neither belongs here. Weight tells them apart. */
.badge-chip[data-kind="generated"] { color: var(--ink); }
.badge-chip[data-kind="fallback"]  { color: var(--muted); background: var(--card); }

/* ─── Empty / loading / error states ───────────────────────────── */

.empty { text-align: center; padding: 56px 24px; }
.empty-icon {
  width: 46px; height: 46px; margin: 0 auto 18px;
  border-radius: var(--r);
  background: var(--bg-sink);
  display: grid; place-items: center;
  color: var(--ink-2);
}
.empty-icon.is-amigo { width: auto; height: auto; background: none; color: var(--ink); }
.empty-title { font-size: 17px; font-weight: 600; }
.empty-body { margin: 9px auto 0; font-size: 13.5px; color: var(--muted); max-width: 400px; line-height: 1.6; }


/* ─── Full-HTML builder ──────────────────────────────────────── */

.html-frame {
  width: 100%;
  height: 70vh;
  min-height: 420px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  margin-top: 18px;
}
.html-stale {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; padding: 8px 12px;
  font-size: 12.5px;
  color: var(--yellow-ink);
  background: var(--yellow-bg);
  border: 1px solid var(--yellow-line);
  border-radius: var(--r-xs);
}
.html-stale[hidden] { display: none; }
.chip {
  font-family: inherit; font-size: 12.5px; font-weight: 500;
  color: var(--ink-2);
  background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 14px;
  cursor: pointer; box-shadow: var(--sh-xs);
  transition: border-color .15s ease, transform .12s ease, color .15s ease;
}
.chip:hover { border-color: var(--line-strong); color: var(--ink); }
.chip:active { transform: translateY(1px); }

.loading { display: flex; flex-direction: column; align-items: center; padding: 56px 24px; gap: 14px; }
.spinner {
  width: 22px; height: 22px;
  border: 2px solid var(--line);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading span { font-size: 13.5px; color: var(--muted); }

.gen-prompt { text-align: center; padding: 48px 24px; }
.gen-spark {
  width: 46px; height: 46px; margin: 0 auto 18px;
  border-radius: var(--r);
  background: var(--bg-sink);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--ink-2);
}

.alert {
  display: flex; gap: 11px;
  background: var(--red-bg);
  border: 1px solid var(--red-line);
  border-radius: var(--r-sm);
  padding: 13px 15px;
  margin-bottom: 18px;
}
.alert-ico { color: var(--red); flex: 0 0 auto; margin-top: 1px; }
.alert-title { font-size: 13px; font-weight: 600; color: var(--red-ink); }
.alert-body { font-size: 12.5px; color: var(--red-ink-2); margin-top: 3px; word-break: break-word; line-height: 1.55; }
/* A notice, not a failure: neutral, so red keeps meaning "this broke". */
.alert-note { background: var(--card-2); border-color: var(--line); }
.alert-note .alert-ico { color: var(--ink-2); }
.alert-note .alert-title { color: var(--ink); }
.alert-note .alert-body { color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2.4s; }
  .live-dot, .live-dot.is-beat { animation: none; }
  .tab-pane.is-active { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* ─── Stage: the generated page owns the screen ────────────────── */

.stagebar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px;
  height: 52px; padding: 0 22px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.stage-mark { display: inline-flex; flex: 0 0 auto; margin-right: -4px; }
.stage-mark svg { display: block; }
.stage-back {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 13.5px; font-weight: 500; color: var(--ink);
  background: transparent; border: 1px solid transparent; border-radius: var(--r-sm);
  padding: 7px 10px 7px 8px; cursor: pointer;
  transition: background .15s ease;
}
.stage-back:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.stage-crumb {
  font-size: 12.5px; color: var(--muted); font-family: var(--mono);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.stage-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* The chrome no longer steps aside for a page: the page IS the canvas. */
/* Wrapper the renderer puts around every generated layout. It carries the
   layout-* modifier, so it needs to exist as a stacking context even though
   the visual weight lives on the children. */
.spec-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }


.stage-head { margin: 0 0 22px; }
.stage-head-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.stage-title { font-size: 26px; letter-spacing: -0.025em; line-height: 1.15; font-weight: 600; }
.stage-sub { margin-top: 8px; font-size: 15px; color: var(--muted); max-width: 64ch; }

.action-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.action-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 13px 7px 14px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.action-btn:hover { border-color: var(--ink); }
.action-btn:active { transform: translateY(1px); }
.action-btn svg { flex: 0 0 auto; color: var(--muted); }
.action-btn.is-primary { background: var(--ink); color: var(--card); border-color: var(--ink); }
.action-btn.is-primary svg { color: inherit; }
.action-btn.is-on { background: var(--green-bg); border-color: var(--green-line); color: var(--green-ink); }
.action-btn.is-on svg { color: inherit; }


/* Layout shells — the plan's `layout` decides the page's shape. */
.layout-article .spec-section { max-width: 760px; }
.layout-article .fact-strip { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.profile-grid {
  display: grid; grid-template-columns: minmax(200px, 280px) 1fr; gap: 14px; align-items: start;
}
.profile-grid > .comp { grid-column: auto; }
.profile-grid .comp-image img { max-width: 100%; }
.profile-grid .profile-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

@media (max-width: 720px) {
  .stagebar { padding: 0 12px; gap: 10px; }
  /* The crumb is the only thing naming the host and the depth. Hiding it left
     the phone stage bar as just Back + Live, so "what am I looking at?" had no
     answer. It already ellipsises, so let it shrink instead of disappear. */
  .stage-crumb { flex: 1 1 auto; min-width: 0; }

  /* The tab strip scrolls with its scrollbar hidden, so the last tab sat
     off-screen with nothing to suggest it existed. Fade the right edge at the
     widths where it actually overflows; the five tabs fit on desktop, so this
     stays out of the way there. */
  .tabs {
    mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
  }
  .stage-title { font-size: 26px; }
  .profile-grid { grid-template-columns: 1fr; }
}

/* ─── Generated interface ──────────────────────────────────────── */


.spec-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }

/* Sections give the page its shape: headline values, then a fact sheet, then
   the wide structures. Three tiers, never one uniform wall of cards. */
.spec-section { margin-bottom: 26px; }
.spec-section:last-child { margin-bottom: 0; }
.spec-section-head {
  font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 8px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}
.spec-section > * + * { margin-top: 14px; }

.hero-row {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.hero-row .comp { grid-column: auto; }   /* the hero row does its own tracking */
.comp-hero {
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--sh-xs);
  padding: 18px 20px 19px;
}

/* The fact sheet: one panel, hairline cells — not N identical boxes. */
.fact-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: var(--card-2);
  overflow: hidden;
}
.fact {
  padding: 13px 15px 14px;
  min-width: 0;
  box-shadow: inset -1px -1px 0 var(--line-soft);
  position: relative;
}
.fact.is-changed { background: var(--yellow-wash); box-shadow: inset -1px -1px 0 var(--yellow-line); }
.fact-label {
  display: block;
  font-size: 12px; font-weight: 600; color: var(--muted);
  margin-bottom: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fact-note { display: block; font-size: 12px; color: var(--muted-2); font-style: italic; margin-top: 3px; }

/* ── Values ─────────────────────────────────────────────────────── */

.val { min-width: 0; }
.val-main { display: flex; align-items: baseline; gap: 5px; min-width: 0; flex-wrap: wrap; }
.val-text { word-break: break-word; }
.val-unit { font-size: max(12px, .62em); color: var(--muted); font-weight: 500; letter-spacing: 0; }
.val-sub { font-size: 12px; color: var(--muted-2); margin-top: 4px; line-height: 1.4; }
/* Emitted by renderImage's non-URL degrade path for plain values. Was shipping
   with no rule at all, so it inherited nothing and broke the reading rhythm. */
.comp-text-value {
  font-size: 14px; color: var(--ink-2); line-height: 1.55;
  word-break: break-word; white-space: pre-wrap;
}
.val-link { color: var(--link); text-decoration: none; word-break: break-all; }
.val-link:hover { text-decoration: underline; }
.val-swatch {
  width: 14px; height: 14px; border-radius: var(--r-2xs);
  border: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); display: inline-block; flex: 0 0 auto;
}

.val-hero .val-main   { font-size: 32px; font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; }
.val-metric .val-main { font-size: 22px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; }
.val-fact .val-main   { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.val-inline .val-main { font-size: 13px; font-weight: 500; }

/* Numbers get tabular figures; prose stays a normal reading weight. */
.val.kind-number .val-main, .val.kind-percent .val-main, .val.kind-duration .val-main,
.val.kind-bytes .val-main, .val.kind-coordinate .val-main, .val.kind-money .val-main,
.val.kind-temperature .val-main, .val.kind-datetime .val-main, .val.kind-clock .val-main,
.val.kind-epoch .val-main, .val.kind-epochMs .val-main {
  font-variant-numeric: tabular-nums;
}
.val.kind-string .val-fact, .val-fact.kind-string .val-main { font-weight: 500; }
.val.kind-prose .val-main, .val-metric.kind-prose .val-main {
  font-size: 14px; font-weight: 400; color: var(--ink-2); line-height: 1.6;
  white-space: pre-wrap; display: block;
}
.val-metric.kind-url .val-main, .val-metric.kind-email .val-main { font-size: 13px; font-weight: 500; }
.val.kind-empty .val-main, .val.kind-null .val-main { color: var(--muted-2); font-weight: 500; }

.val-meter {
  height: 4px; border-radius: 999px; background: var(--bg-sink);
  margin-top: 9px; overflow: hidden;
}
.val-meter-fill {
  height: 100%; border-radius: 999px; background: var(--ink);
  transition: width .45s cubic-bezier(.4,.1,.2,1);
}

.fact.is-quiet .val-main { font-weight: 500; color: var(--ink-2); }
.fact.is-quiet .fact-label { color: var(--muted-2); }

/* ── Key/value sheet ────────────────────────────────────────────── */

.kv { display: flex; flex-direction: column; }
.kv-row {
  display: grid; grid-template-columns: minmax(96px, 42%) 1fr;
  gap: 12px; align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid var(--line-soft);
}
.kv-row:last-child { border-bottom: none; }
.kv-row:first-child { padding-top: 0; }
.kv-key { font-size: 12px; color: var(--muted); min-width: 0; word-break: break-word; }
.kv-row .val-sub { font-size: 12px; margin-top: 2px; }

.spark { display: flex; align-items: center; gap: 9px; min-width: 0; }
.spark-svg { width: 96px; height: 22px; flex: 0 0 auto; }
.spark-line { fill: none; stroke: var(--ink); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.spark-range { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── Gauge ──────────────────────────────────────────────────────── */

.gauge { position: relative; width: 104px; height: 104px; margin: 2px auto 0; }
.gauge-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge-track { fill: none; stroke: var(--bg-sink); stroke-width: 9; }
.gauge-arc {
  fill: none; stroke: var(--ink); stroke-width: 9; stroke-linecap: round;
  transition: stroke-dashoffset .45s cubic-bezier(.4,.1,.2,1);
}
.gauge-center {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 2px;
}
.gauge-value { font-size: 21px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.gauge-unit { font-size: 12px; color: var(--muted); }

/* ── Timeline ───────────────────────────────────────────────────── */

.timeline { padding: 4px 0 2px; }
.timeline-rail { position: relative; height: 104px; }
.timeline-track {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: var(--line); transform: translateY(-50%);
}
.timeline-mark { position: absolute; top: 50%; transform: translate(-50%, -50%); }
.timeline-dot {
  display: block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--ink); border: 2px solid var(--card);
  box-shadow: 0 0 0 1px var(--ink);
}
.timeline-tag {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  width: 74px; text-align: center;
}
.timeline-mark[data-lane] .timeline-tag { transition: none; }
.timeline-time { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Narrow columns: the same moments as a list, in time order. */
.timeline-rail.is-stacked { height: auto; display: flex; flex-direction: column; gap: 0; }
.timeline-rail.is-stacked .timeline-track { display: none; }
.timeline-rail.is-stacked .timeline-mark {
  position: static; transform: none;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--line-soft);
}
.timeline-rail.is-stacked .timeline-mark:last-child { border-bottom: none; }
.timeline-rail.is-stacked .timeline-tag {
  position: static; transform: none;
  flex-direction: row; align-items: baseline; gap: 10px;
  width: auto; text-align: left; min-width: 0;
}
.timeline-rail.is-stacked .timeline-time { flex: 0 0 auto; min-width: 44px; }
.timeline-rail.is-stacked .timeline-name { font-size: 12.5px; }
.timeline-name { font-size: 12px; color: var(--muted); line-height: 1.25; }

.comp {
  grid-column: span 4;
  background: var(--card-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: 15px 16px;
  min-width: 0;
  position: relative;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.comp.span-6  { grid-column: span 6; }
.comp.span-12 { grid-column: span 12; }

.comp.is-changed {
  border-color: var(--yellow-edge);
  background: var(--yellow-wash);
  box-shadow: 0 0 0 3px rgba(245,206,71,.14);
}
.comp-flag {
  position: absolute; top: 12px; right: 13px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
  color: var(--yellow-ink); background: var(--yellow-bg);
  border-radius: var(--r-xs); padding: 2px 6px;
}
/* A Watch tick swaps in only the values that moved: an amber wash settles
   and the new value rises into place. Set once per change, never looped. */
.fact.is-fresh, .comp.is-fresh { animation: fresh-wash .22s ease-out; }
.is-fresh .val-main { animation: fresh-rise .18s ease-out; }
@keyframes fresh-wash { from { background-color: var(--yellow-bg); } }
@keyframes fresh-rise { from { opacity: .35; transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) {
  .fact.is-fresh, .comp.is-fresh, .is-fresh .val-main { animation: none; }
}

.comp-label {
  display: block;
  font-size: 12px; font-weight: 600;
  color: var(--muted);
  margin-bottom: 9px;
}
.comp-missing { font-size: 12.5px; color: var(--muted-2); font-style: italic; }

.comp-title-value { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; word-break: break-word; }

/* The well sits on the wrapper, not the image, so the card keeps its shape
   while the image is still loading or has failed. */
.comp-image {
  display: grid; place-items: center;
  min-height: 118px;
  background: var(--bg-sink);
  border-radius: var(--r-sm);
  padding: 10px;
}
.comp-image img {
  display: block; width: 100%; max-width: 150px; height: auto;
}
.comp-image img.is-pixel { image-rendering: pixelated; }

.badge-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.badge {
  font-size: 12px; font-weight: 500;
  padding: 4px 11px; border-radius: 999px;
  background: var(--bg-sink); color: var(--ink-2);
  border: 1px solid var(--line);
}

.comp-list { display: flex; flex-direction: column; gap: 7px; }
.comp-list li {
  font-size: 13px; color: var(--ink-2);
  padding-left: 15px; position: relative; word-break: break-word;
}
.comp-list li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--muted-2);
}

.comp-table-scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
table.comp-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.comp-table th, table.comp-table td {
  text-align: left; padding: 8px 10px;
  border-bottom: 1px solid var(--line-soft);
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
table.comp-table th { font-size: 12px; font-weight: 600; color: var(--muted); }
table.comp-table td { color: var(--ink-2); }
table.comp-table tr:last-child td { border-bottom: none; }

.statbar { display: flex; align-items: center; gap: 12px; margin-bottom: 11px; }
.statbar:last-child { margin-bottom: 0; }
.statbar-name { font-size: 12.5px; color: var(--ink-2); width: 86px; flex: 0 0 auto; }
.statbar-track { flex: 1 1 auto; height: 8px; background: var(--bg-sink); border-radius: 999px; overflow: hidden; }
/* Brand rule: colour means the data moved, never decoration. Bars are ink;
   the eye ranks them by length, which is the point of a bar. */
.statbar-fill { height: 100%; border-radius: 999px; background: var(--ink); transition: width .45s cubic-bezier(.4,.1,.2,1); }
.statbar-val { font-size: 12.5px; font-weight: 600; color: var(--ink); width: 34px; text-align: right; flex: 0 0 auto; font-variant-numeric: tabular-nums; }


.comp-json pre {
  margin: 0; font-family: var(--mono); font-size: 12px; line-height: 1.6;
  color: var(--ink-2); white-space: pre-wrap; word-break: break-word;
  max-height: 280px; overflow: auto;
}

.more-note { font-size: 12px; color: var(--muted-2); margin-top: 10px; font-style: italic; }
.table-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.table-foot .more-note { margin-top: 0; }
.framed-note { max-width: 420px; margin: 20vh auto 0; padding: 0 24px; text-align: center; }
.framed-title { font-size: 17px; font-weight: 600; margin-bottom: 12px; }
.framed-link { color: var(--ink); font-weight: 500; }

/* chart */
.chart-wrap { width: 100%; }
.chart-svg { display: block; width: 100%; height: 130px; overflow: visible; }
.chart-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-area { fill: url(#imagoChartFill); }
.chart-dot { stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.chart-plot { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; }
.chart-axis { position: relative; height: 130px; min-width: 2.5em; }
.chart-tick {
  position: absolute; right: 0; transform: translateY(-50%);
  font-size: 11px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--muted-2); white-space: nowrap;
}
.chart-grid { stroke: var(--line-soft); stroke-width: 1; }

/* ─── Code panes ───────────────────────────────────────────────── */

.card-code { padding: 0; overflow: hidden; }
.code-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--card-2);
}
.code-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.hash-chip { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.code-wrap { max-height: 560px; overflow: auto; }
.code {
  margin: 0; padding: 16px 18px;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.65;
  color: var(--ink-2);
  white-space: pre; tab-size: 2;
}
.code .ln {
  display: inline-block; width: 30px;
  margin-right: 14px; text-align: right;
  color: var(--faint); user-select: none;
}
.tok-key { color: var(--tok-key); }
.tok-str { color: var(--tok-str); }
.tok-num { color: var(--link); }
.tok-bool { color: var(--ink); font-weight: 600; }
.tok-null { color: var(--muted-2); }

/* ─── Changes pane ─────────────────────────────────────────────── */

.diff-row {
  display: flex; align-items: baseline; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  margin-bottom: 7px;
  background: var(--card-2);
}
.diff-row.is-changed { border-left: 3px solid var(--yellow); }
.diff-row.is-added   { border-left: 3px solid var(--green); }
.diff-row.is-removed { border-left: 3px solid var(--red); }
.diff-path { font-family: var(--mono); font-size: 12px; color: var(--ink); word-break: break-all; flex: 1 1 auto; }
.diff-vals { font-family: var(--mono); font-size: 12px; white-space: nowrap; flex: 0 0 auto; }
.diff-before { color: var(--muted-2); text-decoration: line-through; }
.diff-arrow { color: var(--muted-2); padding: 0 6px; }
.diff-after { color: var(--yellow-ink); font-weight: 600; }

.snap-block { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line-soft); }
.snap-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border-radius: var(--r-sm);
  font-size: 12.5px;
}
.snap-row:nth-child(odd) { background: var(--card-2); }
.snap-when { font-weight: 500; }
.snap-meta { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }

/* ─── Saved ────────────────────────────────────────────────────── */

.saved-list { display: flex; flex-direction: column; gap: 10px; }
.saved-item {
  display: flex; align-items: center; gap: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  padding: 14px 16px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.saved-item:hover { border-color: var(--line-strong); box-shadow: var(--sh); }
.saved-avatar {
  width: 38px; height: 38px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-size: 15px; font-weight: 600;
  flex: 0 0 auto;
  background: var(--bg-sink); color: var(--ink);
}
.saved-main { flex: 1 1 auto; min-width: 0; }
.saved-name { font-size: 14px; font-weight: 600; display: block; }
.saved-url {
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px;
}
.saved-when { font-size: 12px; color: var(--muted); text-align: right; flex: 0 0 auto; line-height: 1.35; }
.saved-when b { display: block; color: var(--ink-2); font-weight: 500; }
.saved-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.icon-btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-xs); cursor: pointer;
  color: var(--ink-2);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.icon-btn:hover { border-color: var(--line-strong); background: var(--card-2); }
.icon-btn.danger:hover { color: var(--red); border-color: var(--red-line); background: var(--red-bg); }

/* ─── Settings ─────────────────────────────────────────────────── */

/* Four cards of very different heights. A row-based grid aligned them to the
   tallest row, which left a large dead gap under the two short cards and
   orphaned the last one on a row of its own. Columns pack by height instead,
   so the cards flow into whatever space is there. */
.settings-grid {
  /* Two deliberate columns on a wide screen, one on a narrow one. Column
     balancing settles on two anyway once the tall keys card sets the height,
     so ask for two and use the full width rather than leaving a third empty. */
  column-width: 440px;
  column-gap: 16px;
}
.settings-grid > .settings-card {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 16px;
  display: inline-block;   /* Safari needs this to honour break-inside */
  width: 100%;
}
.settings-card { margin-bottom: 0; max-width: none; }
.settings-card > .btn { margin-top: 14px; }

/* Key blocks read as rows: label, field, then status + test on one line. */
.key-block + .key-block {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.key-meta { display: flex; align-items: center; gap: 10px; margin-top: 7px; flex-wrap: wrap; }
.key-meta .key-status { margin-top: 0; }
.key-meta .btn { margin-top: 0; }
.key-meta-plain .muted-note { margin-top: 0; }
/* Key status inside the row label: muted suffix, not a second row. */
.key-status-inline { display: inline; margin: 0 0 0 6px; font-weight: 500; }
/* Breathing room between stacked sections inside a card. */
.settings-card .field-label { margin-top: 16px; }
.key-block > .field-label:first-child { margin-top: 0; }
.text-input { font-family: var(--mono); }

/* ─── Toast ────────────────────────────────────────────────────── */

.toast {
  position: fixed; left: 50%; bottom: 28px;
  transform: translate(-50%, 12px);
  z-index: 80;
  display: flex; align-items: center; gap: 9px;
  background: var(--toast); color: #fff;
  font-size: 13px;
  padding: 11px 17px;
  border-radius: 999px;
  box-shadow: var(--sh-lg);
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  max-width: calc(100vw - 40px);
}
.toast.is-up { opacity: 1; transform: translate(-50%, 0); }
.toast[data-kind="error"] { background: #9c3b38; }
.toast[data-kind="ok"] { background: #2f6b45; }

/* ─── Scrollbars ───────────────────────────────────────────────── */

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; border: 3px solid var(--card); }
::-webkit-scrollbar-thumb:hover { background: var(--line-focus); }

/* ─── Responsive ───────────────────────────────────────────────── */

@media (max-width: 960px) {
  .landing-main { grid-template-columns: 1fr; padding-bottom: 50px; }




  .comp { grid-column: span 6; }
}

@media (max-width: 720px) {
  .appbar { padding: 0 16px; height: 56px; gap: 10px; }
  .brand-word { display: none; }
  .appnav button { padding: 7px 9px; font-size: 13px; }
  .key-pill { display: none; }
  .app-main { padding: 22px 16px 60px; }
  .pane-title { font-size: 22px; }

  .landing-bar { padding: 18px 20px; }
  .landing-main { padding: 12px 20px 50px; }







  /* GET chip + arrow are narrow enough to stay inline even at 360px. */
  .reqbar { gap: 7px; padding: 7px; }
  .method-chip { padding: 8px 9px; font-size: 11px; }
  .url-input { font-size: 12.5px; }
  .reqtools { gap: 10px; }

  .comp, .comp.span-6 { grid-column: span 12; }
  .timeline-rail { height: 132px; }
  .timeline-tag { width: 62px; }
  .fact-strip { grid-template-columns: repeat(2, 1fr); }
  .hero-row { grid-template-columns: 1fr; }

  .saved-item { flex-wrap: wrap; gap: 10px; }
  .saved-main { flex-basis: calc(100% - 52px); }
  .saved-when { text-align: left; flex-basis: 100%; }
  .saved-actions { margin-left: auto; }

  .diff-row { flex-direction: column; gap: 4px; }
  .diff-vals { white-space: normal; }
  .code { font-size: 12px; }
}

/* ─── Settings: try-it chat ────────────────────────────────────── */

/* Screen-reader-only label: the input has a visible placeholder, but a
   placeholder is not a name. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.chat-meta { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.chat-meta .key-status { margin-top: 0; }
.chat-meta .btn { margin-top: 0; margin-left: auto; }

/* Bounded so a long exchange scrolls inside the card instead of stretching
   the settings column past everything beside it. */
.chat-log {
  margin-top: 10px;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card-2);
  padding: 10px 12px;
}
.chat-log > .muted-note:only-child { margin: 0; }

.chat-turn { margin: 0 0 10px; }
.chat-turn:last-child { margin-bottom: 0; }
.chat-role {
  font-size: 12px; font-weight: 600; color: var(--muted);
  letter-spacing: .02em; margin: 0 0 2px;
}
.chat-text {
  font-size: 13.5px; line-height: 1.5; color: var(--ink);
  margin: 0; white-space: pre-wrap; word-break: break-word;
}
.chat-turn[data-role="you"] .chat-text { color: var(--ink-2); }
.chat-turn[data-role="error"] .chat-role,
.chat-turn[data-role="error"] .chat-text { color: var(--red-ink); }

/* A reasoning model answers with thought and no text. Showing it is the
   difference between "it works" and "it returned nothing". */
.chat-thinking {
  font-size: 12.5px; line-height: 1.5; color: var(--muted);
  margin: 4px 0 0; white-space: pre-wrap;
  border-left: 2px solid var(--line); padding-left: 8px;
}

.chat-form { display: flex; gap: 8px; margin-top: 10px; }
.chat-form .text-input { flex: 1 1 auto; min-width: 0; margin-top: 0; }
.chat-form .btn { margin-top: 0; flex: 0 0 auto; }
.chat-thinking-wrap { margin-top: 4px; }
.chat-thinking-toggle {
  font-size: 12px; color: var(--muted); cursor: pointer;
  list-style: none; display: inline-block;
}
.chat-thinking-toggle::-webkit-details-marker { display: none; }
.chat-thinking-toggle::before { content: "▸ "; }
.chat-thinking-wrap[open] .chat-thinking-toggle::before { content: "▾ "; }
.chat-thinking-toggle:hover { color: var(--ink-2); }

/* ─── Surfaces: a border or a shadow, never both ───────────────── */
/* In-flow surfaces are drawn by their 1px line; a wide soft shadow on top of
   it is the generated-UI signature. Shadows are kept only for things that
   float above the page (toast, landing art, the onboarding panel), and those
   drop the hairline instead. */
.card, .reqbar, .saved-item, .comp-hero { box-shadow: none; }
.saved-item:hover { box-shadow: none; border-color: var(--line-strong); }


/* ═══ One screen ═════════════════════════════════════════════════
   Command bar on top, endpoints on the left, the page as the canvas in the
   middle, the inspector on the right when asked for. Settings is a sheet.
   The chrome is paper; the page the response became is the one white sheet.
   ═══════════════════════════════════════════════════════════════ */

#appView:not([hidden]) { min-height: 100vh; display: flex; flex-direction: column; }

.appbar {
  justify-content: flex-start; gap: 16px;
  height: 56px; padding: 0 16px;
  background: var(--bg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.appbar .brand { width: 228px; flex: 0 0 auto; }

.reqbar.cmdbar {
  flex: 1 1 auto; max-width: 760px; min-width: 0;
  height: 40px; padding: 4px 4px 4px 5px; gap: 8px;
  border-radius: 10px;
}
.cmdbar .method-chip { padding: 5px 8px; font-size: 11px; background: var(--bg-sink); color: var(--ink-2); }
.cmdbar .url-input { font-size: 13px; height: 30px; padding: 0 4px; }
.cmdbar .btn-go { width: 32px; height: 32px; border-radius: 7px; }

.appnav { margin-left: auto; gap: 2px; }
.appnav .appnav-page, .appnav .appnav-endpoints { display: none; }
.appnav .appnav-settings { display: inline-flex; align-items: center; gap: 7px; }
.appbar-right { gap: 10px; }
button.key-pill { font-family: inherit; cursor: pointer; }
button.key-pill:hover { border-color: var(--line-strong); color: var(--ink-2); }

.app-shell { display: flex; flex: 1 1 auto; min-height: 0; align-items: stretch; }

/* ── Endpoints rail ─────────────────────────────────────────── */
.rail {
  width: 260px; flex: 0 0 260px;
  position: sticky; top: 56px; align-self: flex-start;
  height: calc(100vh - 56px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 12px 16px;
  border-right: 1px solid var(--line);
}
.rail-head { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 6px 8px; }
.rail-title { font-size: 12.5px; font-weight: 600; color: var(--ink-2); letter-spacing: 0; }
.rail .icon-btn { width: 28px; height: 28px; }
.rail-close { display: none !important; }
.rail .saved-list { display: flex; flex-direction: column; gap: 2px; }
.rail .saved-item {
  position: relative; display: flex; align-items: center;
  padding: 0; gap: 0; border: 0; background: none; box-shadow: none; border-radius: 8px;
}
.rail .saved-item:hover { box-shadow: none; }
.saved-open {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border: 1px solid transparent; border-radius: 8px;
  background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.saved-open:hover { background: var(--card-2); }
.saved-item.is-active .saved-open { background: var(--card); border-color: var(--line); }
.rail .saved-avatar {
  width: 28px; height: 28px; border-radius: 7px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--bg-sink); color: var(--ink); font-size: 12.5px; font-weight: 600;
}
.saved-item.is-active .saved-avatar { background: var(--ink); color: var(--card); }
.rail .saved-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.rail .saved-name { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.saved-item.is-active .saved-name { font-weight: 600; }
.rail .saved-url { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.saved-status { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.rail .saved-when { font-size: 11.5px; color: var(--muted-2); text-align: right; }
.saved-changed { font-size: 11px; font-weight: 600; color: var(--yellow-ink); background: var(--yellow-bg); border-radius: 999px; padding: 1px 6px; font-variant-numeric: tabular-nums; }
.saved-live { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.saved-delete { position: absolute; right: 6px; opacity: 0; transition: opacity .12s ease; background: var(--card); }
.saved-item:hover .saved-delete, .saved-delete:focus-visible { opacity: 1; }
.saved-item:hover .saved-status { visibility: hidden; }
/* Touch has no hover: keep delete visible and in the flow so a tap on the row never lands on it unseen */
@media (hover: none) {
  .saved-delete { position: static; opacity: 1; }
  .saved-item:hover .saved-status { visibility: visible; }
}
.rail-empty { font-size: 12.5px; color: var(--muted); line-height: 1.5; padding: 2px 8px 10px; }
.rail-examples { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.rail-examples .rail-title { padding: 0 8px 4px; }
.rail-example {
  width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 6px 8px; border: 0; border-radius: 7px; background: none;
  font: inherit; text-align: left; cursor: pointer;
}
.rail-example:hover { background: var(--card-2); }
.rail-example-name { font-size: 13px; color: var(--ink-2); }
.rail-example-host { font-family: var(--mono); font-size: 10.5px; color: var(--muted-2); }

/* ── The canvas ─────────────────────────────────────────────── */
.app-main { flex: 1 1 auto; min-width: 0; max-width: none; margin: 0; padding: 0; display: flex; align-items: stretch; }
#panePlayground.canvas { flex: 1 1 auto; min-width: 0; background: var(--card); padding: 18px 48px 72px; }
.canvas > * { max-width: 1120px; }
.layout-article { max-width: 760px; }

.page-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 22px; }
.page-tools .runmeta { margin: 0; gap: 4px 14px; }
.page-tools .meta-chip { border: 0; background: none; padding: 0; font-size: 12px; }
.page-tools .meta-chip.is-hot { background: var(--yellow-bg); padding: 1px 8px; }
.page-tools-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.btn-sm { height: 32px; padding: 0 11px; font-size: 13px; gap: 6px; }
#inspectBtn[aria-pressed="true"] { background: var(--ink); color: var(--card); border-color: var(--ink); }

.canvas #interfaceCard { background: none; border: 0; box-shadow: none; padding: 0; }
.canvas .stagebar { position: static; height: auto; padding: 0 0 14px; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.canvas .stage-back { padding-left: 4px; margin-left: -4px; }

/* History strip: one tick per fetch, yellow where it changed something */
.history { margin: 0 0 28px; }
.history-head { display: flex; align-items: baseline; gap: 10px; font-size: 12.5px; }
.history-title { font-weight: 600; color: var(--ink-2); }
.history-count { color: var(--muted); }
.history-hot { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.history-hot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); }
.history-track { position: relative; display: flex; justify-content: space-between; align-items: center; height: 32px; margin-top: 6px; }
.history-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--line); transform: translateY(-50%); }
.history-tick { position: relative; min-width: 24px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; }
.history-tick::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 2px; height: 10px; background: var(--muted-2);
}
.history-tick.is-changed::after { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); }
.history-tick.is-now::after { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--card); }
.history-tick:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.history-foot { display: flex; justify-content: space-between; margin-top: 2px; font-family: var(--mono); font-size: 11px; color: var(--muted-2); }

/* The generated page: one authored sheet, not a wall of boxes */
.canvas .stage-head { margin: 0 0 26px; }
.canvas .stage-title { font-family: var(--display); font-size: 44px; letter-spacing: -0.035em; line-height: 1.05; }
.canvas .stage-sub { margin-top: 6px; font-size: 14.5px; }
.canvas .spec-body { gap: 36px; }
.canvas .spec-section { margin-bottom: 36px; }
.canvas .spec-section > * + * { margin-top: 28px; }
.canvas .spec-section-head,
.canvas .comp-label {
  font-size: 16px; font-weight: 600; letter-spacing: -0.01em; text-transform: none;
  color: var(--ink); border: 0; padding: 0; margin: 0 0 12px;
}
/* Top-aligned: a meter under one value must not lift that value's label */
.canvas .hero-row { display: flex; flex-wrap: wrap; gap: 28px 64px; align-items: flex-start; }
.canvas .comp-hero, .canvas .comp { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.canvas .comp-hero .comp-label { font-size: 14px; font-weight: 400; color: var(--muted); margin-bottom: 4px; }
.canvas .val-hero .val-main { font-size: 88px; letter-spacing: -0.045em; line-height: 1; }
.canvas .val-hero .val-unit { font-size: 26px; letter-spacing: 0; }
.canvas .spec-grid { gap: 40px 48px; }

.canvas .fact-strip {
  /* auto-fit, not auto-fill: two facts share the row instead of leaving a phantom third track empty */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); column-gap: 48px;
  border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; background: none; overflow: visible;
}
.canvas .fact {
  display: flex; align-items: baseline; gap: 12px;
  padding: 12px 0; box-shadow: none; border-bottom: 1px solid var(--line-soft);
}
.canvas .fact-label { flex: 0 0 42%; margin: 0; font-size: 13.5px; font-weight: 400; white-space: normal; }
.canvas .fact > .val, .canvas .fact > div { flex: 1 1 auto; min-width: 0; }
.canvas .val-fact .val-main { font-size: 17px; }
.canvas .fact.is-changed { background: none; box-shadow: none; border-bottom-color: var(--yellow-line); }
.canvas .fact.is-changed .val-main { background: var(--yellow-bg); border-radius: 6px; padding: 0 6px; margin-left: -6px; }
.canvas .comp.is-changed { background: none; border: 0; box-shadow: none; }
.canvas .comp-flag { top: 2px; right: 0; }

.canvas .profile-grid { grid-template-columns: minmax(200px, 260px) 1fr; gap: 40px; align-items: center; }
.canvas .comp-image { background: var(--bg-sink); border-radius: 20px; }

/* Details: the bookkeeping, one click away */
.spec-details { border-top: 1px solid var(--line); padding-top: 14px; }
.spec-details-summary { display: flex; align-items: baseline; gap: 10px; cursor: pointer; list-style: none; min-width: 0; }
.spec-details-summary::-webkit-details-marker { display: none; }
.spec-details-summary::before { content: "›"; font-size: 16px; line-height: 1; color: var(--ink-2); transition: transform .15s ease; }
.spec-details[open] > .spec-details-summary::before { transform: rotate(90deg); }
.spec-details-title { font-size: 14px; font-weight: 500; flex: 0 0 auto; }
.spec-details-hint { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.spec-details > .fact-strip, .spec-details > .spec-grid { margin-top: 16px; }

.alert { align-items: flex-start; }
.alert-action { margin-left: auto; align-self: center; flex: 0 0 auto; }

/* ── Inspector ─────────────────────────────────────────────── */
.inspector {
  display: none;
  width: 420px; flex: 0 0 420px;
  position: sticky; top: 56px; align-self: flex-start;
  height: calc(100vh - 56px); overflow-y: auto;
  background: var(--card); border-left: 1px solid var(--line);
}
body.inspector-open .inspector { display: block; }
.inspector-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 2px; padding: 0 10px; background: var(--card); border-bottom: 1px solid var(--line); }
.inspector-head[hidden] { display: none; }
.inspector .tabs { margin: 0; padding: 0; border-bottom: 0; background: none; flex: 1 1 auto; min-width: 0; }
.inspector-close { flex: 0 0 auto; color: var(--muted); }
.inspector .tab-pane .card { border: 0; border-radius: 0; padding: 16px 18px; background: none; }

/* ── Settings sheet ────────────────────────────────────────── */
.sheet-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(12,12,11,.36); }
.settings-sheet {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
  width: min(760px, 100%); overflow-y: auto;
  background: var(--bg); padding: 22px 26px 60px;
  box-shadow: var(--sh-lg);
}
.settings-sheet .pane-head { position: sticky; top: -22px; margin: -22px -26px 18px; padding: 18px 26px 14px; background: var(--bg); border-bottom: 1px solid var(--line); z-index: 1; }
.settings-sheet .settings-grid { grid-template-columns: 1fr 1fr; }

@media (max-width: 1100px) {
  .inspector { position: fixed; top: 56px; right: 0; bottom: 0; height: auto; z-index: 50; box-shadow: var(--sh-lg); border-left: 0; }
  .settings-sheet .settings-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .rail { display: none; }
  body.sheet-saved .rail {
    display: flex; position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 60;
    width: auto; height: auto; max-height: 78vh; align-self: auto;
    background: var(--card); border: 0; border-radius: 18px 18px 0 0;
    padding: 14px 12px calc(20px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 32px -8px rgba(12,12,11,.22);
  }
  body.sheet-saved .rail-close { display: inline-flex !important; }
  .appnav .appnav-endpoints { display: inline-flex; }
  #panePlayground.canvas { padding: 18px 20px 120px; }
}

@media (max-width: 720px) {
  .appbar { height: 56px; padding: 0 12px; gap: 10px; }
  .appbar .brand { width: auto; }
  .appbar .brand-word, .appbar-right .key-pill, .appnav .appnav-label { display: none; }
  .appnav { margin-left: auto; }
  .appnav button { min-height: 44px; }
  /* A plain button until its sheet is open; a filled one read as "selected" */
  .appnav .appnav-endpoints { color: var(--ink); font-weight: 500; }
  body.sheet-saved .appnav .appnav-endpoints { background: color-mix(in srgb, var(--ink) 6%, transparent); font-weight: 600; }
  /* The command bar moves to the thumb zone */
  .reqbar.cmdbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    max-width: none; height: auto; border-radius: 0; border: 0; border-top: 1px solid var(--line);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--bg);
  }
  .cmdbar .url-input { height: 44px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; font-size: 16px; }
  .cmdbar .btn-go { width: 44px; height: 44px; border-radius: 10px; }
  .cmdbar .method-chip { display: none; }
  #panePlayground.canvas { padding: 16px 18px 120px; }
  .page-tools .runmeta { display: none; }
  .page-tools-right { margin-left: 0; }
  .canvas .stage-title { font-size: 32px; }
  .canvas .val-hero .val-main { font-size: 60px; }
  .canvas .hero-row { gap: 20px 40px; }
  .canvas .fact-strip { grid-template-columns: 1fr; }
  .canvas .profile-grid { grid-template-columns: 1fr; }
  .inspector { top: 56px; width: 100%; flex-basis: auto; }
  .settings-sheet { padding: 18px 16px 60px; }
  .settings-sheet .pane-head { margin: -18px -16px 16px; padding: 14px 16px 12px; }
}
/* A portrait needs no caption saying "Image". */
.canvas .profile-grid > .comp > .comp-label { display: none; }
.history-tick.is-now.is-changed::after { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--yellow); }
.rail .saved-name::first-letter { text-transform: uppercase; }
/* The live pill already counts down; one countdown is enough. */
.page-tools .meta-next { display: none !important; }
/* Eleven column gaps have to fit the narrowest canvas (inspector open). */
.canvas .spec-grid { column-gap: 32px; }
.appnav button { display: inline-flex; align-items: center; }
@media (max-width: 720px) {
  .canvas .spec-grid { display: flex; flex-direction: column; gap: 32px; }
}
/* The page head already carries the provenance badge; the trail need not. */
.canvas .stagebar .badge-chip { display: none; }

/* ═══ Landing: the hero is the transformation ════════════════════
   No illustration. One real response on the left, the interface Imago
   renders from it on the right, the mark on the seam where one becomes
   the other. The highlighted lines are the fields the interface uses.
   ═══════════════════════════════════════════════════════════════ */

#landingView .landing-bar { max-width: 1180px; width: 100%; margin: 0 auto; padding: 18px 24px; }
#landingView .landing-nav { align-items: center; gap: 18px; }
#landingView .landing-main { display: block; max-width: 1180px; width: 100%; margin: 0 auto; padding: 72px 24px 40px; }

/* The hero follows the brand banner: the promise on the left, the live
   transformation on the right. A dark response panel sits under the white
   interface card that overlaps it, the way the response becomes the page. */
/* The hero is pinned to the top of the row, not centred on it: the demo
   card grows when its live response arrives and differs per example, and a
   centred hero jumped with it. */
.landing-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.landing-hero { text-align: left; padding-top: 112px; }
#landingView .landing-title { font-size: clamp(40px, 5.2vw, 64px); line-height: 1.02; letter-spacing: -0.04em; }
#landingView .landing-sub { margin: 22px 0 0; max-width: 440px; font-size: 17px; line-height: 1.55; color: var(--muted); }
.landing-ctas { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
/* The banner's call to action: the app's own command bar, set large. */
.landing-bar-form {
  display: flex; align-items: center; gap: 8px; max-width: 480px; margin-top: 30px;
  padding: 6px 6px 6px 20px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--card); box-shadow: var(--sh-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.landing-bar-form:focus-within { border-color: var(--ink-2); }
#landingView .landing-url {
  flex: 1 1 auto; min-width: 0; height: 44px; padding: 0;
  border: none; background: none; box-shadow: none !important; outline: none;
  font-family: inherit; font-size: 15px; color: var(--ink);
}
#landingView .landing-url::placeholder { color: var(--muted); }
.landing-go { width: 48px; height: 44px; padding: 0; flex: 0 0 auto; justify-content: center; border-radius: 10px; }
.landing-try { font-size: inherit; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.landing-caption { margin-top: 18px; max-width: 480px; font-size: 14px; color: var(--muted); }

.specimen { min-width: 0; }
.spec-pane { display: grid; grid-template-columns: 44% 6% 50%; min-height: 400px; }
.spec-pane[hidden] { display: none; }
/* Size containment: the panel takes the card's height, however long the JSON. */
.spec-response {
  grid-column: 1 / 3; grid-row: 1; contain: size; overflow: hidden;
  padding: 18px 20px; border-radius: var(--r-lg); background: var(--panel);
}
.specimen-url {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.12);
}
.specimen-url .method-chip { padding: 4px 8px; font-size: 11px; background: rgba(255,255,255,.1); border-color: transparent; color: #fff; }
.specimen-url-text { font-family: var(--mono); font-size: 12px; color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spec-json { margin: 0; font-family: var(--mono); font-size: 12px; line-height: 1.8; color: rgba(255,255,255,.4); white-space: pre; overflow: hidden; }
.spec-interface {
  grid-column: 2 / 4; grid-row: 1; margin-top: 28px; position: relative; z-index: 1; min-width: 0;
  padding: 22px 26px 26px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--card); box-shadow: var(--sh-lg);
}
.specimen-foot { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 18px; }

.proofs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  margin-top: 80px; padding-top: 40px; border-top: 1px solid var(--line);
}
.proof h2 { font-size: 16px; letter-spacing: -0.01em; }
.proof p { margin-top: 10px; font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 340px; }
.proof-ev { display: flex; align-items: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.proof-ev code { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.proof-ev .live-pill { display: inline-flex; }

/* Pricing: the proofs' grid, with the heading in the first column. */
.pricing {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--line);
}
.pricing-title { font-size: 21px; letter-spacing: -0.02em; }
.price h3 { font-size: 16px; letter-spacing: -0.01em; }
.price p { margin-top: 10px; font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 340px; }
.price-link, .waitlist-note a {
  color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line);
}
.price-link { font-size: 14px; }
.price-link:hover, .waitlist-note a:hover { color: var(--ink); text-decoration-color: currentColor; }
/* Touch: a 44px target without moving the text around it. */
@media (pointer: coarse) {
  .price-link, .waitlist-note a { display: inline-block; padding: 12px 0; margin: -12px 0; }
}

/* The landing's section headings, and the sections added under the hero:
   the launch film, the rest of the features, and how it works. They share
   the proofs' rule and rhythm. */
.section-title { font-size: 21px; letter-spacing: -0.02em; }

.film { margin-top: 80px; padding-top: 40px; border-top: 1px solid var(--line); }
.film-head { display: flex; align-items: baseline; justify-content: space-between; gap: 32px; }
.film-note { max-width: 520px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.film-video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin-top: 24px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--sh-lg);
}

.features {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 32px;
  margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--line);
}
.features .section-title { grid-column: 1 / -1; }
.feature h3, .how-steps h3 { font-size: 16px; letter-spacing: -0.01em; }
.feature p, .how-steps p { margin-top: 10px; font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 340px; }
.feature code { font-family: var(--mono); font-size: 13px; color: var(--ink); }

.how { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--line); }
.how-steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
  margin: 28px 0 0; padding: 0; list-style: none; counter-reset: how;
}
.how-steps li { counter-increment: how; }
.how-steps li::before {
  content: counter(how, decimal-leading-zero); display: block; margin-bottom: 12px;
  font-family: var(--mono); font-size: 12px; color: var(--muted);
}
.how-limits { margin-top: 32px; max-width: 760px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.how-limits b { color: var(--ink-2); font-weight: 600; }

.foot-links { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.foot-links a { white-space: nowrap; }
.landing-foot .name-note { max-width: 460px; }
.foot-links a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.foot-links a:hover { color: var(--ink); text-decoration-color: currentColor; }
@media (pointer: coarse) {
  .foot-links a { display: inline-block; padding: 12px 0; margin: -12px 0; }
}

@media (max-width: 1000px) {
  .how-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .film { margin-top: 56px; }
  .film-head { flex-direction: column; gap: 10px; }
  .features { grid-template-columns: 1fr; gap: 28px; margin-top: 48px; }
  .how { margin-top: 48px; }
}
@media (max-width: 560px) {
  .how-steps { grid-template-columns: 1fr; gap: 28px; }
  .film-video { border-radius: var(--r); }
}

.landing-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 1180px; width: 100%; margin: 48px auto 0; padding: 28px 24px 48px;
  border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted);
}
.landing-foot .brand-word { font-size: 15px; }
/* imago ↔ amigo: the two letters that trade places wear the colour the app
   gives a value that changed. */
.anagram { color: var(--ink-2); }
.anagram b { font-weight: inherit; background: var(--yellow-bg); box-shadow: inset 0 -2px 0 var(--yellow); border-radius: 2px; padding: 0 1px; }

@media (max-width: 1000px) {
  .landing-top { grid-template-columns: 1fr; gap: 44px; }
  .landing-hero { padding-top: 0; }
}
@media (max-width: 860px) {
  .proofs { grid-template-columns: 1fr; margin-top: 56px; }
  .pricing { grid-template-columns: 1fr; gap: 28px; margin-top: 48px; }
}
@media (max-width: 720px) {
  #landingView .landing-bar { padding: 16px 20px; }
  #landingView .landing-main { padding: 36px 20px 24px; }
  .landing-hero { text-align: left; }
  #landingView .landing-title { font-size: 40px; }
  #landingView .landing-sub { margin-left: 0; font-size: 16px; }
  .landing-ctas { flex-direction: column; }
  .landing-ctas .btn { width: 100%; justify-content: center; }
  .landing-bar-form { max-width: none; padding: 5px 5px 5px 14px; gap: 6px; }
  .landing-go { width: 44px; }
  #landingView .landing-url { font-size: 16px; }   /* 16px: iOS does not zoom into the field */
  .landing-top { gap: 32px; }
  /* Phones: the card overlaps the bottom of the panel instead of its side. */
  .spec-pane { grid-template-columns: 1fr; min-height: 0; }
  .spec-response { grid-column: 1; contain: none; height: 250px; padding-bottom: 48px; }
  .spec-interface { grid-column: 1; grid-row: 2; margin: -32px 12px 0; padding: 18px 16px 22px; }
  .specimen-foot { flex-direction: column; align-items: flex-start; gap: 6px; }
  .spec-json { font-size: 11.5px; }
  .si-facts { grid-template-columns: 1fr 1fr; }
  .si-big b { font-size: 52px; }
  .landing-foot { flex-direction: column; text-align: center; }
}
.spec-response { position: relative; }
.spec-response::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48px; background: linear-gradient(transparent, var(--panel)); pointer-events: none; }

/* ── UI pass: one signal per fact ─────────────────────────────────────────── */

/* No key: one quiet line under the title, never a banner */
.keyline { margin: 10px 0 0; font-size: 13.5px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.keyline-action {
  padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); cursor: pointer;
}
.keyline-action:hover { text-decoration-color: currentColor; }
.keyline-action:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 3px; }
.interface-out > .keyline, #interfaceOut > .keyline { margin: 0 0 16px; }

/* Empty page: nothing to watch, save or inspect yet, so none of it shows */
#panePlayground.is-empty .page-tools { display: none; }
#panePlayground.is-empty .empty { padding-top: 14vh; }
.empty-hint { margin: 18px auto 0; font-size: 13px; color: var(--muted); }
.empty-examples { display: none; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
.empty-example {
  min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); font: inherit; font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer;
}
.empty-example:hover { border-color: var(--ink-2); }
.empty-example:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Below the rail breakpoint the list is behind a sheet: offer four here instead */
@media (max-width: 860px) {
  .empty-hint { display: none; }
  .empty-examples { display: flex; }
}

/* Settings: provider first, one provider's block at a time */
select.text-input, .chat-form .text-input { font-family: var(--sans); }   /* mono is for model ids and addresses */
.provider-block { margin-top: 2px; }
.provider-block > .muted-note { margin-top: 8px; }
.key-status[data-state="idle"]:empty { display: none; }
.settings-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.settings-foot .muted-note { margin: 0; flex: 1 1 220px; }

.history-item { display: flex; }   /* display: contents would drop the listitem role in some browsers */
.toast-action {
  margin-left: 14px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600;
  color: #fff; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.toast-action:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 3px; }

/* Landing specimen: the response column was empty below the JSON. The JSON
   sits in the middle of it and a key at the foot says what the highlight means. */
.spec-key { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.spec-credit { white-space: nowrap; font-size: 12.5px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.spec-credit:hover { color: var(--ink-2); }

/* Headers are set: say so in the command bar, next to the URL they go with */
.headers-chip {
  flex: 0 0 auto; align-self: center; margin-right: 6px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-sink); color: var(--ink-2);
  font: inherit; font-size: 12px; font-weight: 500; white-space: nowrap; cursor: pointer;
}
.headers-chip:hover { border-color: var(--ink-2); color: var(--ink); }
.headers-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.headers-chip[hidden] { display: none; }

/* Phones: Save, Share and Inspect are icons (with their names kept for
   assistive tech), so the toolbar stays one row. Four labelled buttons wrapped. */
@media (max-width: 720px) {
  .page-tools-right .btn .btn-label { display: none; }
  .page-tools-right .btn { min-width: 44px; justify-content: center; padding-left: 0; padding-right: 0; }
}

/* Page edits: a bar on each field, a panel above the page */
.edit-panel {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 18px 0 8px;
  padding: 12px 14px; border: 1px dashed var(--line); border-radius: var(--r); background: var(--card-2);
}
.edit-panel-note { margin: 0; flex: 1 1 260px; font-size: 13px; color: var(--muted); }
.edit-hidden { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex-basis: 100%; }
.edit-hidden-label { font-size: 12.5px; color: var(--muted); }
.edit-show {
  padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--card);
  font: inherit; font-size: 12.5px; color: var(--ink-2); cursor: pointer;
}
.edit-show:hover { border-color: var(--ink-2); }
.edit-panel-actions { display: flex; gap: 8px; margin-left: auto; }
.edit-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; }
.edit-bar .edit-label { flex: 1 1 140px; min-width: 0; height: 32px; padding: 4px 8px; font-size: 13px; }
.edit-bar .edit-weight { width: auto; height: 32px; padding: 4px 8px; font-size: 12.5px; font-family: var(--sans); }
.edit-bar .edit-hide { height: 32px; }
body.is-editing .fact { flex-wrap: wrap; }
body.is-editing .fact > .edit-bar { flex-basis: 100%; }
body.is-editing .comp, body.is-editing .fact { outline: 1px dashed var(--line); outline-offset: 6px; border-radius: 4px; }
#editBtn[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
@media (max-width: 720px) { .edit-bar .edit-label { flex-basis: 100%; } }
/* Phones: the interval picker waits until Watch is on (it is disabled until
   then), which keeps Watch, Save, Edit, Share and Inspect on one row. */
@media (max-width: 720px) { .page-tools .watch-group .mini-select:disabled { display: none; } }

/* Phones. Last in the file so the component rules above cannot undo them. */
@media (pointer: coarse) {
  .btn, .btn-sm, .mini-select, .text-input, .spec-details-summary { min-height: 44px; }
  .appnav button { min-width: 44px; justify-content: center; }
  .icon-btn, .rail .icon-btn { width: 44px; height: 44px; }
  .edit-bar .edit-label, .edit-bar .edit-weight { height: 44px; }
  .spec-details-summary { align-items: center; }
  .appbar .brand { min-width: 44px; min-height: 44px; justify-content: center; }
  /* Small controls keep their look and grow an invisible 44px hit area. */
  .switch::before { content: ""; position: absolute; inset: -11px -4px; }
  .keyline-action, .toast-action { padding: 12px 0; margin-top: -12px; margin-bottom: -12px; }
  .landing-nav .link-btn { min-width: 44px; }
  /* iOS zooms the page into any field set below 16px the moment it is focused. */
  input, select, textarea { font-size: 16px !important; }
}
@media (max-width: 720px) {
  /* A pill wrapping three lines of text became a circle: span the screen instead. */
  .toast { bottom: 84px; left: 16px; right: 16px; max-width: none; border-radius: 14px; justify-content: space-between; transform: translateY(12px); }
  .toast.is-up { transform: none; }
  .method-chip, .rail-example-host, .hash-chip, .badge-chip, .meta-chip { font-size: 12px; }
  /* Watch takes its own row when the four page buttons would not fit beside
     it, so they wrap together instead of stranding one on a second line. */
  .page-tools-right { gap: 8px; }
  .page-tools-right:has(#refreshToggle[aria-checked="true"]) .watch-group { flex-basis: 100%; }
  /* Full HTML gets its own row, so Watch and the four buttons keep theirs. */
  .page-tools-right .builder-group { flex-basis: 100%; }
}
@media (max-width: 360px) {
  .page-tools-right .watch-group { flex-basis: 100%; }
}

/* Landing demo: the real renderer, drawn live, shown at a reduced scale. It is
   a preview, so it cannot be clicked into and it fades out where it is cut.
   A fixed height, not a cap: every example, and the moment it is still
   fetching, fills the same box, so switching tabs never moves the page. */
.spec-interface { position: relative; overflow: hidden; height: 492px; }
@media (max-width: 720px) { .spec-interface { height: 380px; } }
.spec-live { zoom: .62; pointer-events: none; user-select: none; }
.spec-live-status { margin: 28px 0 0; font-size: 21px; color: var(--muted); }   /* 13px after the zoom */
.spec-live .stage-title { margin: 6px 0 22px; }
.spec-interface::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(color-mix(in srgb, var(--card) 0%, transparent), var(--card)); pointer-events: none; }
.spec-json .tok-key { color: rgba(255,255,255,.62); }
.spec-json .tok-str, .spec-json .tok-num, .spec-json .tok-bool { color: #fff; }
.spec-json .tok-null { color: rgba(255,255,255,.4); }