/* ========================================================================== API Console — VS Code treatment The console reads as an editor embedded in TMS: explorer rail, editor tabs, a line-numbered code surface using the Dark+ syntax palette, and a status bar. The VS Code tokens are scoped to .apic-root so they never leak into the rest of the app, and TMS's own tokens still supply the page chrome around it. Every selector is namespaced `apic-` because `.shell`, `.step-row` and `.badge` already mean something else in styles.css. ========================================================================== */ /* The console fills the content column instead of the 1100px reading width. Toggled on by the global after-mount hook in app.js, so it lifts the Back-button row and the page together and clears itself on navigation. */ body.apic-fullwidth .container { max-width: none; padding: 18px 22px; } body.apic-fullwidth .nav-back-wrap { padding-bottom: 0; } .apic-root { /* VS Code Dark+ — surfaces */ --vsc-editor: #1e1e1e; --vsc-side: #252526; --vsc-tabbar: #252526; --vsc-border: #3c3c3c; --vsc-hover: #2a2d2e; --vsc-active: #37373d; --vsc-focus: #094771; /* text */ --vsc-fg: #d4d4d4; --vsc-dim: #858585; --vsc-bright: #e7e7e7; /* accents */ --vsc-blue: #007acc; --vsc-green: #89d185; --vsc-red: #f48771; --vsc-yellow: #cca700; /* Dark+ syntax */ --vsc-key: #9cdcfe; --vsc-str: #ce9178; --vsc-num: #b5cea8; --vsc-kw: #569cd6; --vsc-comment: #6a9955; --vsc-fn: #dcdcaa; --vsc-type: #4ec9b0; --vsc-mono: Consolas, "Cascadia Mono", "SF Mono", Menlo, "Liberation Mono", monospace; border: 1px solid var(--vsc-border); border-radius: 8px; overflow: hidden; background: var(--vsc-editor); color: var(--vsc-fg); box-shadow: var(--shadow); } /* --- window layout ------------------------------------------------------ */ .apic-window { display: grid; grid-template-columns: 340px minmax(0, 1fr) 300px; /* Fills the viewport the way an editor does, rather than sizing to content and leaving the page half empty. */ height: calc(100vh - 168px); min-height: 520px; } @media (max-width: 1280px) { .apic-window { grid-template-columns: 280px minmax(0, 1fr); } .apic-aside { display: none; } } @media (max-width: 900px) { .apic-window { grid-template-columns: minmax(0, 1fr); } .apic-explorer { display: none; } } .apic-explorer { min-height: 0; background: var(--vsc-side); border-right: 1px solid var(--vsc-border); min-width: 0; display: flex; flex-direction: column; } .apic-editor { min-height: 0; background: var(--vsc-editor); min-width: 0; display: flex; flex-direction: column; } .apic-aside { min-height: 0; background: var(--vsc-side); border-left: 1px solid var(--vsc-border); min-width: 0; display: flex; flex-direction: column; } /* Panel headings use VS Code's tiny uppercase explorer label. */ .apic-panehead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 14px 8px; font-size: 11px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vsc-dim); flex: none; } .apic-panehead b { color: var(--vsc-fg); font-weight: 600; } /* --- explorer: the flow ------------------------------------------------- */ .apic-flowmeta { padding: 0 14px 12px; border-bottom: 1px solid var(--vsc-border); } .apic-flowmeta h3 { margin: 0; font-size: 13px; font-weight: 600; color: var(--vsc-bright); } .apic-flowmeta p { margin: 6px 0 8px; font-size: 11.5px; line-height: 1.55; color: var(--vsc-dim); } .apic-src { font-family: var(--vsc-mono); font-size: 11px; color: var(--vsc-type); word-break: break-all; } .apic-steps { padding: 6px 0; overflow-y: auto; flex: 1; min-height: 0; } /* Rows are flush like editor tree items — no cards, no radius. */ .apic-step { width: 100%; text-align: left; appearance: none; cursor: pointer; background: transparent; border: 0; border-left: 2px solid transparent; color: inherit; font: inherit; padding: 5px 12px 5px 10px; display: grid; grid-template-columns: 16px 40px minmax(0, 1fr) auto; align-items: center; gap: 8px; } .apic-step:hover { background: var(--vsc-hover); } .apic-step[aria-current="true"] { background: var(--vsc-active); border-left-color: var(--vsc-blue); } .apic-step:focus-visible { outline: 1px solid var(--vsc-blue); outline-offset: -1px; } .apic-step-n { font-family: var(--vsc-mono); font-size: 11px; color: var(--vsc-dim); text-align: right; font-variant-numeric: tabular-nums; } .apic-step-body { min-width: 0; } .apic-step-name { font-size: 12.5px; display: flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .apic-step-sub { display: block; margin-top: 1px; font-family: var(--vsc-mono); font-size: 10.5px; color: var(--vsc-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .apic-step-sub em { font-style: normal; color: var(--vsc-key); } .apic-step-ms { font-family: var(--vsc-mono); font-size: 10.5px; color: var(--vsc-dim); font-variant-numeric: tabular-nums; } /* Status reads by shape as well as colour. */ .apic-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; } .apic-dot-pass { background: var(--vsc-green); } .apic-dot-fail { background: var(--vsc-red); } .apic-dot-ready { background: var(--vsc-dim); opacity: 0.45; } .apic-dot-blocked { background: transparent; border: 1.5px solid var(--vsc-yellow); } .apic-dot-teardown { background: transparent; border: 1.5px solid var(--vsc-dim); } .apic-dot-running { background: var(--vsc-blue); animation: apic-pulse 0.9s ease-in-out infinite; } @keyframes apic-pulse { 50% { opacity: 0.25; } } @media (prefers-reduced-motion: reduce) { .apic-dot-running { animation: none; } } /* --- HTTP verbs, coloured like language keywords ------------------------ */ .apic-verb { font-family: var(--vsc-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-align: center; flex: none; } .apic-verb-get { color: var(--vsc-type); } .apic-verb-post { color: var(--vsc-fn); } .apic-verb-delete { color: var(--vsc-red); } /* --- editor tabs -------------------------------------------------------- */ .apic-tabs { display: flex; align-items: stretch; background: var(--vsc-tabbar); border-bottom: 1px solid var(--vsc-border); overflow-x: auto; flex: none; } .apic-tab { appearance: none; background: var(--vsc-tabbar); border: 0; border-right: 1px solid var(--vsc-border); border-top: 1px solid transparent; color: var(--vsc-dim); font: inherit; font-size: 12.5px; padding: 8px 16px 9px; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 7px; } .apic-tab:hover { color: var(--vsc-fg); } .apic-tab[aria-selected="true"] { background: var(--vsc-editor); color: var(--vsc-bright); border-top-color: var(--vsc-blue); } /* The little coloured file-type square VS Code puts before a filename. */ .apic-tab-icon { width: 8px; height: 8px; border-radius: 2px; flex: none; background: var(--vsc-dim); } .apic-tab[aria-selected="true"] .apic-tab-icon { background: var(--vsc-type); } /* --- breadcrumb, as under the tab strip --------------------------------- */ .apic-crumb { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 6px 16px; font-family: var(--vsc-mono); font-size: 11.5px; color: var(--vsc-dim); border-bottom: 1px solid var(--vsc-border); flex: none; } .apic-crumb-sep { opacity: 0.5; } .apic-crumb b { color: var(--vsc-fg); font-weight: 400; } /* --- URL line ----------------------------------------------------------- */ .apic-urlbar { display: flex; gap: 10px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--vsc-border); flex: none; } .apic-urlbox { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; background: #3c3c3c; border: 1px solid #3c3c3c; border-radius: 3px; padding: 6px 10px; overflow-x: auto; } .apic-urlbox:focus-within { border-color: var(--vsc-blue); } .apic-url { font-family: var(--vsc-mono); font-size: 12.5px; white-space: nowrap; color: var(--vsc-str); } .apic-host { color: var(--vsc-dim); } .apic-var-tok { color: var(--vsc-key); } /* VS Code's own button styling for the primary action inside the window. */ .apic-btn { appearance: none; border: 0; background: #0e639c; color: #fff; font: inherit; font-size: 12.5px; padding: 6px 14px; border-radius: 2px; cursor: pointer; flex: none; } .apic-btn:hover { background: #1177bb; } .apic-btn:disabled { opacity: 0.4; cursor: default; } .apic-btn-quiet { background: transparent; border: 1px solid var(--vsc-border); color: var(--vsc-fg); } .apic-btn-quiet:hover { background: var(--vsc-hover); } /* --- editor body -------------------------------------------------------- */ .apic-body { padding: 14px 16px 18px; overflow-y: auto; flex: 1; min-height: 0; } .apic-empty { font-family: var(--vsc-mono); font-size: 12.5px; color: var(--vsc-comment); padding: 24px 2px; } /* --- the code surface, with a line-number gutter ------------------------ */ /* The block itself is the scroller, on both axes. Scrolling the gutter and the code as one element is what keeps the line numbers aligned with their lines — letting the

 scroll on its own would slide the code out from under them.
   Patient search returns ~1,400 lines, so this has to work. */
.apic-code {
  display: flex;
  align-items: flex-start;
  background: var(--vsc-editor);
  border: 1px solid var(--vsc-border);
  border-radius: 3px;
  margin: 0 0 14px;
  overflow: auto;
  max-height: 62vh;
  overscroll-behavior: contain;
}
/* Pinned on the inline axis only: it holds position while a long line scrolls
   sideways, but still travels with the content vertically. */
.apic-gutter {
  position: sticky;
  left: 0;
  z-index: 1;
  flex: none;
  margin: 0;
  padding: 10px 10px 10px 14px;
  background: var(--vsc-editor);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--vsc-mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--vsc-dim);
  text-align: right;
  user-select: none;
  font-variant-numeric: tabular-nums;
  white-space: pre;
}

/* flex:none so the block keeps its natural width and long lines scroll
   horizontally rather than being squeezed into the column. */
.apic-codetext {
  flex: none;
  margin: 0;
  padding: 10px 16px 10px 12px;
  font-family: var(--vsc-mono);
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre;
  color: var(--vsc-fg);
}

/* Dark+ token colours */
.apic-j-key { color: var(--vsc-key); }
.apic-j-str { color: var(--vsc-str); }
.apic-j-num { color: var(--vsc-num); }
.apic-j-bool { color: var(--vsc-kw); }
.apic-j-null { color: var(--vsc-kw); }
.apic-j-comment { color: var(--vsc-comment); font-style: italic; }
.apic-j-punc { color: var(--vsc-fg); }

/* --- editor notices, styled like VS Code inline diagnostics ------------- */

.apic-note {
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid var(--vsc-dim);
  border-radius: 0 3px 3px 0;
  padding: 10px 13px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--vsc-fg);
  margin-bottom: 14px;
}
.apic-note strong { color: var(--vsc-bright); font-weight: 600; }
.apic-note code {
  font-family: var(--vsc-mono);
  font-size: 12px;
  color: var(--vsc-str);
}
.apic-note-fail { border-left-color: var(--vsc-red); }
.apic-note-ok { border-left-color: var(--vsc-green); }
.apic-note-sub { margin-top: 6px; font-size: 12px; color: var(--vsc-dim); }

/* --- documentation ------------------------------------------------------ */

.apic-h4 {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vsc-dim);
  margin: 20px 0 8px;
}
.apic-h4:first-child { margin-top: 0; }

.apic-doc-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--vsc-bright);
}
.apic-doc-lede {
  margin: 0 0 18px;
  color: var(--vsc-dim);
  font-size: 13px;
  line-height: 1.6;
  max-width: 68ch;
}

.apic-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  border: 1px solid var(--vsc-border);
  border-radius: 3px;
  overflow: hidden;
}
.apic-table th,
.apic-table td {
  text-align: left;
  padding: 7px 11px;
  border-bottom: 1px solid var(--vsc-border);
  vertical-align: top;
}
.apic-table tr:last-child td { border-bottom: 0; }
.apic-table th {
  background: var(--vsc-side);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vsc-dim);
  font-weight: 400;
}
.apic-table td { color: var(--vsc-dim); }
.apic-table td:first-child { color: var(--vsc-fg); }
.apic-table code {
  font-family: var(--vsc-mono);
  font-size: 12px;
  color: var(--vsc-key);
}
.apic-tablewrap { overflow-x: auto; }

.apic-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--vsc-border);
  border: 1px solid var(--vsc-border);
  border-radius: 3px;
  overflow: hidden;
}
.apic-fact { background: var(--vsc-side); padding: 10px 12px; }
.apic-fact dt {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vsc-dim);
}
.apic-fact dd {
  margin: 5px 0 0;
  font-family: var(--vsc-mono);
  font-size: 11.5px;
  color: var(--vsc-type);
  word-break: break-word;
}

.apic-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.apic-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--vsc-side);
  border: 1px solid var(--vsc-border);
  border-radius: 3px;
  padding: 5px 11px 5px 9px;
  font-family: var(--vsc-mono);
  font-size: 11.5px;
}

/* --- variables rail ----------------------------------------------------- */

.apic-vars {
  padding: 0 0 10px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* Rendered like a settings list rather than cards. */
.apic-var {
  padding: 7px 14px;
  border-left: 2px solid transparent;
  font-family: var(--vsc-mono);
  font-size: 11.5px;
}
.apic-var.is-set { border-left-color: var(--vsc-green); }
.apic-var-name { color: var(--vsc-key); }
.apic-var-val { display: block; margin-top: 3px; color: var(--vsc-str); word-break: break-all; }
.apic-var-val.is-empty { color: var(--vsc-comment); font-style: italic; }
.apic-var-src { display: block; margin-top: 3px; font-size: 10.5px; color: var(--vsc-dim); }

.apic-legend {
  border-top: 1px solid var(--vsc-border);
  padding: 11px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 11px;
  color: var(--vsc-dim);
  flex: none;
}
.apic-legend div { display: flex; align-items: center; gap: 8px; }

/* --- status bar --------------------------------------------------------- */

.apic-statusbar {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--vsc-blue);
  color: #fff;
  font-size: 11.5px;
  padding: 0 4px;
  min-height: 24px;
  flex-wrap: wrap;
}
.apic-statusbar.is-fail { background: #a1260d; }
.apic-statusbar.is-running { background: #0e639c; }

.apic-sb {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.apic-sb-push { margin-left: auto; }
.apic-sb-mono { font-family: var(--vsc-mono); }

/* Environment switch, rendered as a status-bar item like VS Code's
   remote/branch indicator. */
.apic-env {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font: inherit;
  font-size: 11.5px;
  padding: 3px 9px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.apic-env:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.apic-env[aria-pressed="true"] { background: rgba(255, 255, 255, 0.2); color: #fff; }
.apic-region { font-weight: 700; letter-spacing: 0.05em; opacity: 0.85; }

.apic-warn {
  font-size: 11.5px;
  color: var(--vsc-yellow);
  font-family: var(--vsc-mono);
}

/* --- scrollbars ---------------------------------------------------------
   VS Code's overlay scrollbars: visible enough to signal that a pane has
   more content, quiet enough not to compete with the code. The default
   Windows scrollbar is both wider and brighter than anything else here. */

.apic-root * {
  scrollbar-width: thin;
  scrollbar-color: #4f4f4f transparent;
}
.apic-root ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
.apic-root ::-webkit-scrollbar-track { background: transparent; }
.apic-root ::-webkit-scrollbar-thumb {
  background: #4f4f4f;
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 8px;
}
.apic-root ::-webkit-scrollbar-thumb:hover { background: #6b6b6b; background-clip: content-box; }
.apic-root ::-webkit-scrollbar-corner { background: transparent; }

/* --- explorer tree: Collection > Suite > Case > requests -----------------
   Rows are flush and indented like an editor's file tree. Each level carries
   its own run control, so a whole collection, one suite or a single case can
   be run without leaving the tree. */

.apic-tree { padding: 4px 0 10px; overflow-y: auto; flex: 1; min-height: 0; }

.apic-node { display: block; }
.apic-indent { margin-left: 11px; border-left: 1px solid rgba(255, 255, 255, 0.06); }

.apic-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 5px 10px 5px 6px;
  cursor: pointer;
  border-left: 2px solid transparent;
  color: var(--vsc-fg);
  font-size: 12.5px;
  user-select: none;
}
.apic-row:hover { background: var(--vsc-hover); }
.apic-row:focus-visible { outline: 1px solid var(--vsc-blue); outline-offset: -1px; }

.apic-row-collection { font-weight: 600; color: var(--vsc-bright); }
.apic-row-suite { color: var(--vsc-fg); }
.apic-row-case { color: var(--vsc-fg); }
.apic-row-case[aria-current="true"] {
  background: var(--vsc-active);
  border-left-color: var(--vsc-blue);
}

.apic-row-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.apic-caret {
  flex: none;
  width: 10px;
  text-align: center;
  color: var(--vsc-dim);
  transition: transform 0.12s ease;
}
.apic-caret.is-open { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .apic-caret { transition: none; } }

/* Counts double as the result summary once a case has run. */
.apic-count {
  flex: none;
  font-family: var(--vsc-mono);
  font-size: 10.5px;
  color: var(--vsc-dim);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 9px;
  padding: 1px 7px;
}
.apic-count.is-pass { color: var(--vsc-green); background: rgba(137, 209, 133, 0.12); }
.apic-count.is-fail { color: var(--vsc-red); background: rgba(244, 135, 113, 0.14); }

/* Revealed on hover, the way editor tree actions are. */
.apic-run {
  flex: none;
  opacity: 0;
  color: var(--vsc-dim);
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 3px;
  cursor: pointer;
}
.apic-row:hover .apic-run { opacity: 1; }
.apic-run:hover { color: var(--vsc-green); background: rgba(255, 255, 255, 0.08); }
.apic-run:focus-visible { opacity: 1; outline: 1px solid var(--vsc-blue); }

/* Steps sit one level deeper again. */
.apic-tree .apic-steps { padding: 2px 0 4px; margin-left: 11px; border-left: 1px solid rgba(255, 255, 255, 0.06); }
.apic-tree .apic-step { cursor: pointer; }

/* --- row actions ---------------------------------------------------------
   Hidden until the row is hovered or something inside it has focus, so the
   tree stays readable but every level is one click from being extended. */

.apic-actions {
  display: flex;
  align-items: center;
  gap: 1px;
  flex: none;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.apic-row:hover .apic-actions,
.apic-step:hover .apic-actions,
.apic-actions:focus-within { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .apic-actions { transition: none; } }

.apic-act {
  color: var(--vsc-dim);
  font-size: 12px;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
}
.apic-act:hover { color: var(--vsc-bright); background: rgba(255, 255, 255, 0.1); }
.apic-act:focus-visible { outline: 1px solid var(--vsc-blue); outline-offset: -1px; opacity: 1; }
.apic-act.apic-run:hover { color: var(--vsc-green); }
.apic-act-danger:hover { color: var(--vsc-red); background: rgba(244, 135, 113, 0.14); }

/* The Explorer header's "+ Collection" is always visible — with no collections
   there is no row to hover. */
.apic-panehead .apic-act {
  opacity: 1;
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
}

/* Placeholder rows that double as create buttons. */
.apic-emptyrow {
  margin: 4px 10px;
  padding: 8px 10px;
  border: 1px dashed var(--vsc-border);
  border-radius: 3px;
  color: var(--vsc-dim);
  font-size: 12px;
  cursor: pointer;
  text-align: center;
}
.apic-emptyrow:hover { color: var(--vsc-fg); border-color: var(--vsc-blue); background: var(--vsc-hover); }
.apic-emptyrow:focus-visible { outline: 1px solid var(--vsc-blue); }

/* --- request editor ------------------------------------------------------
   The URL bar and the Headers/Body panes are editable in place. Inputs adopt
   the editor's own surfaces rather than the browser's, so a field reads as
   part of the code surface rather than a form pasted on top of it. */

.apic-verbselect {
  appearance: none;
  flex: none;
  background: #3c3c3c;
  border: 1px solid #3c3c3c;
  border-radius: 3px;
  color: var(--vsc-fg);
  font-family: var(--vsc-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 6px 8px;
  cursor: pointer;
}
.apic-verbselect:focus-visible { outline: 1px solid var(--vsc-blue); outline-offset: -1px; }
/* Colour-coded by method, matching the tree. */
.apic-verbselect.apic-verb-get { color: var(--vsc-type); }
.apic-verbselect.apic-verb-post { color: var(--vsc-fn); }
.apic-verbselect.apic-verb-put,
.apic-verbselect.apic-verb-patch { color: var(--vsc-key); }
.apic-verbselect.apic-verb-delete { color: var(--vsc-red); }

.apic-urlinput {
  flex: 1;
  min-width: 0;
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--vsc-str);
  font-family: var(--vsc-mono);
  font-size: 12.5px;
  padding: 0;
}
.apic-urlinput:focus { outline: none; }
.apic-urlinput::placeholder { color: var(--vsc-dim); }

.apic-input {
  width: 100%;
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--vsc-fg);
  font-family: var(--vsc-mono);
  font-size: 12px;
  padding: 3px 5px;
}
.apic-input:hover { border-color: var(--vsc-border); }
.apic-input:focus { outline: none; border-color: var(--vsc-blue); background: var(--vsc-editor); }
.apic-input::placeholder { color: var(--vsc-dim); }

.apic-textarea {
  width: 100%;
  min-height: 190px;
  resize: vertical;
  background: var(--vsc-editor);
  border: 1px solid var(--vsc-border);
  border-radius: 3px;
  color: var(--vsc-fg);
  font-family: var(--vsc-mono);
  font-size: 12.5px;
  line-height: 1.55;
  padding: 10px 12px;
  tab-size: 2;
}
.apic-textarea:focus { outline: none; border-color: var(--vsc-blue); }
.apic-textarea::placeholder { color: var(--vsc-dim); }

/* Headers table: tighter than the documentation tables, and its cells hold
   inputs rather than text. */
.apic-htable td { padding: 3px 6px; vertical-align: middle; }
.apic-htable th:first-child, .apic-hcell:first-child { width: 30px; text-align: center; }
.apic-hcell-act { width: 34px; text-align: right; }
.apic-htable .apic-act { opacity: 0.55; }
.apic-htable tr:hover .apic-act { opacity: 1; }

/* The Authorization row is generated, not stored — shown so the full picture
   of what gets sent is visible, but not editable. */
.apic-hauto td { color: var(--vsc-dim); font-family: var(--vsc-mono); font-size: 12px; }
.apic-hauto-tag {
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vsc-dim);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  padding: 1px 5px;
}

.apic-addrow {
  display: inline-block;
  margin-top: 8px;
  opacity: 1;
  font-size: 11.5px;
}

.apic-hint {
  font-size: 12px;
  line-height: 1.55;
  color: var(--vsc-dim);
  margin-bottom: 10px;
}
.apic-hint code { font-family: var(--vsc-mono); color: var(--vsc-str); }

/* --- test results --------------------------------------------------------
   Rendered on both the Tests tab and the Response tab, so a script failure is
   visible without switching away from the body that caused it. */

.apic-tests {
  border: 1px solid var(--vsc-border);
  border-radius: 3px;
  margin: 14px 0;
  overflow: hidden;
}

.apic-testhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 12px;
  background: var(--vsc-side);
  border-bottom: 1px solid var(--vsc-border);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vsc-dim);
}

.apic-testrow {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 7px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 12.5px;
}
.apic-testrow:last-child { border-bottom: 0; }

.apic-testname { flex: 1; min-width: 0; color: var(--vsc-fg); }

.apic-testverdict {
  font-family: var(--vsc-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--vsc-green);
  background: rgba(137, 209, 133, 0.12);
  border-radius: 3px;
  padding: 2px 7px;
}
.apic-testverdict.is-fail { color: var(--vsc-red); background: rgba(244, 135, 113, 0.14); }

.apic-testerr {
  flex-basis: 100%;
  margin-left: 16px;
  font-family: var(--vsc-mono);
  font-size: 11.5px;
  color: var(--vsc-red);
}

/* The script surface is code, so it gets the editor's colours and a little
   more room than the body editor. */
.apic-script { min-height: 240px; color: var(--vsc-fn); }

/* --- validation output ---------------------------------------------------
   Empty states are rendered rather than omitted: a pane that shows nothing is
   indistinguishable from one that is broken. */

.apic-testempty {
  padding: 14px 12px;
  font-size: 12.5px;
  color: var(--vsc-comment);
  font-family: var(--vsc-mono);
}

.apic-testhead-sub {
  border-top: 1px solid var(--vsc-border);
  border-bottom: 1px solid var(--vsc-border);
}

/* Console output, styled like a terminal pane rather than a table row. */
.apic-logrow {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 5px 12px;
  font-family: var(--vsc-mono);
  font-size: 12px;
  color: var(--vsc-fg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  white-space: pre-wrap;
  word-break: break-word;
}
.apic-logrow:last-child { border-bottom: 0; }

.apic-loglevel {
  flex: none;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vsc-dim);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  padding: 1px 6px;
}
.apic-logrow.is-warn .apic-loglevel { color: var(--vsc-yellow); background: rgba(204, 167, 0, 0.16); }
.apic-logrow.is-error .apic-loglevel { color: var(--vsc-red); background: rgba(244, 135, 113, 0.16); }
.apic-logrow.is-error { color: var(--vsc-red); }

/* ==========================================================================
   API Runs — schedules, history and the run report.
   Uses the app's own tokens rather than the console's VS Code palette: this is
   a reporting page people read, not an editor they operate.
   ========================================================================== */

.apir-table td { vertical-align: middle; }
.apir-clickable { cursor: pointer; }
.apir-clickable:hover { background: var(--surface-alt); }
.apir-name { font-weight: 600; }
.apir-sub { color: var(--muted); font-size: 12px; }
.apir-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.apir-actions { white-space: nowrap; text-align: right; }
.apir-actions .btn { margin-left: 4px; }
.apir-empty { color: var(--muted); margin: 0; }
.apir-ok { color: var(--success); font-weight: 600; }
.apir-no { color: var(--danger); font-weight: 600; }

.apir-verdict {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: 999px;
}
.apir-verdict.is-pass { color: var(--success); background: rgba(74, 222, 128, 0.13); }
.apir-verdict.is-fail { color: var(--danger); background: rgba(248, 113, 113, 0.14); }
.apir-verdict.is-run { color: var(--info); background: rgba(96, 165, 250, 0.14); }

.apir-chip {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  margin-right: 4px;
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
}
.apir-chip.is-on { color: var(--success); background: rgba(74, 222, 128, 0.13); }
.apir-chip.is-warn { color: var(--warning); background: rgba(251, 191, 36, 0.14); }

.apir-summary { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.apir-running { color: var(--info); font-size: 12.5px; margin-top: 10px; }

.apir-warn {
  border-left: 3px solid var(--warning);
  background: var(--surface-alt);
  border-radius: 0 8px 8px 0;
  padding: 10px 13px;
  margin-top: 12px;
  font-size: 12.5px;
}
.apir-warn ul { margin: 6px 0 0 18px; }

/* --- the report body --- */

.apir-case { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
.apir-casehead {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; cursor: pointer; background: var(--surface-alt);
}
.apir-casehead:hover { background: var(--border); }
.apir-casehead .apir-name { flex: 1; min-width: 0; }
.apir-caret { color: var(--muted); transition: transform 0.12s ease; }
.apir-caret.is-open { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .apir-caret { transition: none; } }

.apir-casebody { padding: 4px 12px 10px; }

.apir-req { padding: 9px 0; border-bottom: 1px solid var(--border); }
.apir-req:last-child { border-bottom: 0; }
.apir-req.is-fail { background: rgba(248, 113, 113, 0.05); }
.apir-req.is-skip { opacity: 0.55; }

.apir-reqline { display: flex; align-items: baseline; gap: 10px; }
.apir-verb {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 10px; font-weight: 700; min-width: 42px; color: var(--muted);
}
.apir-url {
  flex: 1; min-width: 0;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 11.5px; word-break: break-all; color: var(--text);
}

.apir-tests { margin: 6px 0 0 52px; }
.apir-test { font-size: 12px; padding: 1px 0; }
.apir-err {
  color: var(--danger);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 11.5px;
  margin: 2px 0 0 52px;
}
.apir-logs { margin: 4px 0 0 52px; }
.apir-log {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 11px; color: var(--muted);
}
.apir-log span {
  text-transform: uppercase; font-size: 9px; letter-spacing: 0.06em;
  background: var(--surface-alt); border-radius: 3px; padding: 1px 5px; margin-right: 6px;
}
.apir-script { margin: 6px 0 0 52px; }
.apir-script summary { font-size: 11.5px; color: var(--muted); cursor: pointer; }
.apir-script pre {
  margin: 6px 0 0;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  padding: 9px 11px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 11px; line-height: 1.5; overflow-x: auto;
}
.apir-hash {
  margin: 5px 0 0 52px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 10px; color: var(--muted); word-break: break-all;
}

/* --- schedule dialog --- */

.apir-modal {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.apir-dialog {
  width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px;
}
.apir-dialog h3 { margin: 0 0 16px; }
.apir-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }

.apir-checks { display: flex; gap: 8px; flex-wrap: wrap; }
.apir-check {
  display: flex; align-items: center; gap: 7px;
  border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 12px; cursor: pointer; font-size: 13px;
}
.apir-check:hover { background: var(--surface-alt); }
.apir-check b { color: var(--primary); font-size: 11px; letter-spacing: 0.05em; }

.apir-hint { color: var(--muted); font-size: 11.5px; margin-top: 6px; }

/* The summary toggle beside the report buttons. */
.apir-lite {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.apir-lite:hover { color: var(--text); }

/* A PDF takes puppeteer a while; the button says so and stops taking clicks. */
.btn.is-busy { opacity: 0.7; pointer-events: none; }

/* --- live run progress ---------------------------------------------------- */

.apir-progress { margin-top: 14px; }

.apir-progressbar {
  height: 5px;
  background: var(--surface-alt);
  border-radius: 999px;
  overflow: hidden;
}
.apir-progressbar span {
  display: block;
  height: 100%;
  background: var(--info);
  border-radius: 999px;
  transition: width 0.4s ease;
}
@media (prefers-reduced-motion: reduce) { .apir-progressbar span { transition: none; } }

.apir-progresstext {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--muted);
}
.apir-progresstext b { color: var(--text); font-variant-numeric: tabular-nums; }

.apir-spinner {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--info);
  border-right-color: transparent;
  animation: apir-spin 0.7s linear infinite;
  flex: none;
}
@keyframes apir-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .apir-spinner { animation: none; } }

/* The case that just landed, so the eye can find it as the page follows along. */
.apir-case.is-newest { border-color: var(--info); }
.apir-case.is-newest .apir-casehead { background: rgba(96, 165, 250, 0.10); }

/* Link back out to the mirrored Test Runs. An API run that only lived in the
   console was a dead end; these hand the reader to the rest of TMS.
   Uses the app-wide tokens, not the --apic-* ones: those are scoped to the
   console shell, and this sits on the API Runs page instead. */
.apir-mirror {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 0 0 14px; padding: 9px 12px;
  border: 1px solid var(--border); border-left: 3px solid var(--primary);
  border-radius: var(--radius); background: var(--surface-alt);
  font-size: 12.5px; color: var(--muted);
}
.apir-mirror-link {
  padding: 2px 10px; border-radius: 3px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--primary); font-weight: 600; text-decoration: none;
}
.apir-mirror-link:hover { border-color: var(--primary); }