/* ODI Workbench: ODI 98's markup and behaviour styled as a technical tool
   rather than a window.
   Type: Hanken Grotesk for reading and controls; IBM Plex Mono for codes,
   counts and technical readouts. Tabular figures throughout.
   Colour follows IBM Carbon's Cool Gray ramp and Blue 60, checked against
   WCAG: text at least 4.5:1, state cues at least 3:1.
   - Greys carry only a faint blue cast, so data stays dominant; colour only
     means interaction.
   - Blue 60 is the one accent: links, the panel with focus, the cursor and
     hover.
   - The row the keys act on: a light Blue 20 tint (text stays 13.8:1) with a
     3px Blue 60 bar (5:1), so it never relies on colour alone. In a list
     without focus the selection is grey.
   - Chosen values are ink check boxes: what you picked, apart from where
     the cursor is.
   - Black keys finish a step (Search, Download, OK).
   - Panels are white regions on a near-white page; tables have a header band
     and no lines between rows. Labels and keys are in sentence case.
   - Square corners throughout.
   Replaces 98.css, app.css and help.css of ../retro-web. */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

:root {
  --chassis: #f7f8fa;      /* near-white page; panels remain just distinguishable */
  --display: #fff;         /* panels */
  --key: #fff;
  --hover: #f2f4f8;        /* Cool Gray 10: row hover, header bands */
  --ink: #121619;          /* Cool Gray 100, 13.9:1 on the page, 18:1 on white */
  --ink-2: #4d5358;        /* Cool Gray 70, 5.9:1 on the page */
  --ink-3: #5a6066;        /* 4.8:1 on the page, 6.4:1 on white */
  --rule: #878d96;         /* Cool Gray 50: control and panel edges */
  --rule-2: #dde1e6;       /* Cool Gray 20: lines inside a panel */
  --disabled: #c1c7cd;     /* Cool Gray 30 */
  --idle: #dde1e6;         /* selection in a list without focus */
  --sel: #d0e2ff;          /* Blue 20: the row the keys act on */
  --focus: #4589ff;        /* Blue 50: keyboard focus, quieter than action blue */
  --accent: #0f62fe;       /* Blue 60, 5:1 on white */
  --accent-deep: #002d9c;  /* Blue 80: link hover */
  --link: #0043ce;         /* Blue 70: link text, 5.5:1 on the page */
  --primary: #121619;
  --primary-text: #fff;
  --notice: #fff1f1;
  --notice-border: #ffb3b8;
  --results: .54;         /* share of the width for the results panel */
  --warn: #da1e28;         /* Red 60 */
  --mono: "IBM Plex Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --ui: "Hanken Grotesk", Arial, sans-serif;
  --tick: url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='7' viewBox='0 0 8 7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 3.6 3 5.6 7 1.2' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --chassis: #16191d;
    --display: #202327;
    --key: #262a2f;
    --hover: #2b3036;
    --ink: #f2f4f8;
    --ink-2: #c1c7cd;
    --ink-3: #a2a9b0;
    --rule: #697077;
    --rule-2: #393f45;
    --disabled: #525960;
    --idle: #343a40;
    --sel: #17385f;
    --focus: #78a9ff;
    --accent: #0f62fe;
    --accent-deep: #a6c8ff;
    --link: #78a9ff;
    --primary: #f2f4f8;
    --primary-text: #121619;
    --notice: #351f22;
    --notice-border: #a64b52;
    --warn: #ff8389;
    --tick: url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='7' viewBox='0 0 8 7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 3.6 3 5.6 7 1.2' fill='none' stroke='%23121619' stroke-width='1.6'/%3E%3C/svg%3E");
  }

  #help-view .method-post { color: #ffb784; }
  #help-view .method-get { color: #6fdc8c; }
}

html, body { height: 100%; margin: 0; }
body {
  display: flex;
  overflow: hidden;
  background: var(--chassis);
  color: var(--ink);
  font: 13px/20px var(--ui);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
@supports (height: 100dvh) { body { height: 100dvh; } }
p, h1 { margin: 0; }
b { font-weight: 600; }
.spacer { flex: 1; }
* { scrollbar-width: thin; scrollbar-color: var(--disabled) transparent; }

/* Links: blue, never underlined; hover deepens the blue. */
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--accent-deep); }

/* Access keys: invisible until Alt is held, then inverted (see index.html). */
u { text-decoration: none; }
body.show-keys u { color: var(--primary-text); background: var(--ink); box-shadow: 0 0 0 1px var(--ink); }

/* Same-document swaps without a flash (see ../retro-web/app.css). */
@view-transition { navigation: auto; }
::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation: none; }

/* ── Keys ── */
button {
  height: 28px;
  min-width: 64px;
  padding: 0 12px;
  font: 500 13px/1 var(--ui);
  white-space: nowrap;
  color: var(--ink);
  background: var(--key);
  border: 1px solid var(--rule);
  box-shadow: 0 1px 0 var(--rule);
  cursor: pointer;
}
/* Hover is blue on every key: outline keys take a blue edge and label, black keys turn blue. */
button:hover:not(:disabled) { color: var(--accent); background: var(--key); border-color: var(--accent); }
button:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
button:disabled { cursor: default; color: var(--ink-3); background: transparent; border-color: var(--disabled); box-shadow: none; }
/* Black keys finish a step. */
button.default, #dl:not(:disabled) { color: var(--primary-text); background: var(--primary); border-color: var(--primary); box-shadow: 0 1px 0 var(--rule); }
button.default:hover:not(:disabled), #dl:hover:not(:disabled) { color: #fff; background: var(--accent); border-color: var(--accent); box-shadow: 0 1px 0 var(--accent-deep); }
button.default:disabled { color: var(--ink-3); background: transparent; border-color: var(--disabled); box-shadow: none; }
.ai-button:not(:disabled) { color: var(--ink); background: var(--key); border-color: var(--rule); box-shadow: 0 1px 0 var(--rule); }
/* The AI sparkle: four points, so a quarter turn on hover lands it back on itself,
   and it snaps back unseen on unhover (only the hover state animates). */
.ai-button, #mcp-btn { display: inline-flex; align-items: center; gap: 6px; }
.sparkle { flex: none; width: 12px; height: 12px; fill: currentColor; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; } /* the stroke rounds the tips */
:is(.ai-button, #mcp-btn):hover .sparkle { transform: rotate(90deg); transition: transform .3s ease; }
@media (prefers-reduced-motion: reduce) { :is(.ai-button, #mcp-btn):hover .sparkle { transition: none; } }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ── Display fields ── */
input[type=search], input[type=text], textarea {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  height: 28px;
  padding: 0 8px;
  font: 14px var(--ui);
  color: var(--ink);
  background: var(--display);
  border: 1px solid var(--rule);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06);
}
input:focus, textarea:focus { border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus); }
input:focus-visible, textarea:focus-visible { outline: none; }
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none; }
input::placeholder { color: var(--ink-3); }
input[type=checkbox] {
  -webkit-appearance: none;
  appearance: none;
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  margin: 0;
  background: var(--display);
  border: 1px solid var(--ink-2);
 
}
input[type=checkbox]:checked { background: var(--ink) var(--tick) center no-repeat; border-color: var(--ink); }

label, .col-label, .pane-label { font: 13px/18px var(--ui); color: var(--ink-2); }
.col-label { margin-bottom: 5px; }

/* Displays: the lighter panels set into the chassis. */
.sunken-panel { overflow: auto; background: var(--display); border: 1px solid var(--rule); }
.sunken-panel:focus, .sunken-panel:focus-visible { outline: none; }
/* The display with focus gets the blue frame: where the keys act. */
.sunken-panel:focus { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }

/* ── Page ── */
#app { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }

/* Search header: name, search and quiet utility links. */
.masthead {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 0 16px;
}
.brand { flex-shrink: 0; width: 28px; font-size: 15px; font-weight: 700; letter-spacing: -.2px; color: var(--ink); }
.brand:hover { color: var(--accent); }
body.home .masthead, body.help .masthead { display: none; }

/* Dialog title rows. */
.title-bar-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 600 14px/1 var(--ui); }
.title-bar-controls { display: flex; gap: 6px; }
.title-bar-controls button { width: 24px; min-width: 0; height: 22px; padding: 0; font: 600 13px/1 var(--ui); letter-spacing: 0; text-transform: none; }
.title-bar-controls button[aria-label=Close]::before { content: "\00d7"; font-size: 16px; }

#body { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.toolbar { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.docs-link {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  font: 500 13px/1 var(--ui);
  white-space: nowrap;
  color: var(--ink);
  background: var(--key);
  border: 1px solid var(--rule);
  box-shadow: 0 1px 0 var(--rule);
}
.docs-link:hover { color: var(--accent); border-color: var(--accent); }
.toolbar-docs, #mcp-btn {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  height: 32px;
  padding: 0 2px;
  font: 500 12px/1 var(--ui);
  white-space: nowrap;
  color: var(--ink-3);
  background: none;
  border: 0;
  box-shadow: none;
}
.toolbar-docs:hover { color: var(--link); background: none; border: 0; box-shadow: none; }
#mcp-btn { padding: 0 10px; font-weight: 600; color: var(--link); background: var(--display); border: 1px solid var(--rule); }
#mcp-btn:hover:not(:disabled) { color: var(--accent); background: var(--hover); border-color: var(--accent); }

/* No status bar: coverage is on the home view, and the results speak for themselves. */
.status-bar { display: none; }

/* ── Home ── */
/* Center the working area without stretching its reading width. */
#home { display: none; flex: 1; min-height: 0; overflow: auto; padding: 24px 12px; }
body.home #home { display: flex; align-items: center; }
body.home .panes { display: none; }
/* Rhythm: title and context, search, examples, then secondary actions. */
.home-inner { width: 100%; max-width: 640px; margin: auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
#home h1 { font-size: 36px; line-height: 40px; font-weight: 700; letter-spacing: -.01em; }
.lead { margin-top: 12px; color: var(--ink-2); font-size: 15px; line-height: 23px; }
#home-search-slot { width: 100%; max-width: 560px; margin-top: 24px; }
#home .examples { margin-top: 12px; }
.home-actions { display: flex; gap: 8px; margin-top: 20px; }
#coverage { display: block; margin-top: 6px; color: var(--ink-3); font: 300 13px/20px var(--mono); }
.examples, .home-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; }
/* Secondary links under Connect to AI: quiet grey until hovered. */
.home-links { margin-top: -6px; gap: 6px 18px; }
.home-links a { color: var(--ink-3); }
.home-links a:hover { color: var(--accent-deep); }
.examples { color: var(--ink-2); }

/* The search field: large on the home view, compact in the toolbar. */
.search-slot { display: flex; min-width: 0; }
/* Align the search controls with the results pane; links stay at the far edge. */
#toolbar-search-slot { flex: 0 1 calc((100vw - 32px) * var(--results) - 36px); }
.toolbar .spacer { flex: 1; min-width: 16px; }
.search-group { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.search-group input { flex: 1; min-width: 120px; }
#src-btn { flex-shrink: 0; }
.toolbar .search-group > label { display: none; }
#toolbar-search-slot :is(input, button) { height: 32px; }
#home .search-group input { height: 40px; padding: 0 12px; font-size: 15px; }
#home .search-group button { height: 40px; }
/* On the home page Search is the one action, so it is blue from the start. */
#home #go { color: #fff; background: var(--accent); border-color: var(--accent); box-shadow: 0 1px 0 var(--accent-deep); }
#home #go:hover { background: var(--link); border-color: var(--link); }
body:not(.home) #go { display: none; }

/* ── Results and dataset ── */
.panes { flex: 1; display: flex; min-height: 0; }
#results {
  flex: 0 0 calc(var(--results) * 100%);
  min-width: 0;
  border: 0;
  border-top: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
}
#results:focus { border-color: var(--rule); box-shadow: none; }
#detail { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 16px; }

table { border-collapse: collapse; text-align: left; white-space: nowrap; }
.sunken-panel table { width: 100%; table-layout: fixed; }
th {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 32px;
  padding: 0 10px;
  font: 600 12.5px/1 var(--ui);
  color: var(--ink-2);
  background: var(--hover);
  box-shadow: inset 0 -1px var(--disabled), inset -1px 0 var(--rule-2);
}
/* Rows are separated by space, not lines; only the selection marks a row. */
td { height: 28px; padding: 0 10px; }
.sunken-panel td, .sunken-panel th { overflow: hidden; text-overflow: ellipsis; }
.sunken-panel tbody tr { scroll-margin-top: 32px; }
#results th:last-child { box-shadow: inset 0 -1px var(--disabled); }
.sunken-panel tbody tr:first-child td { padding-top: 2px; }
table.interactive > tbody > tr[data-i] { cursor: pointer; }
table.interactive > tbody > tr[data-i]:hover { background: var(--hover); }
col.c-src { width: 76px; }
col.c-dims { width: 30%; }
col.c-dim { width: calc(100% - 72px); }
col.c-count { width: 72px; }
td.num { text-align: right; color: var(--ink-2); font: 400 12px var(--mono); }
#results td:first-child { font: 400 12px var(--mono); color: var(--ink-2); }
#results td:nth-child(3) { color: var(--ink-2); }
/* Filters suggested by the search, in bold ink. */
#results td b { font-weight: 600; color: var(--ink); }
#d-dims td, #d-dims-panel th { padding-left: 8px; padding-right: 8px; }
#d-dims td:first-child { font: 400 12px var(--mono); }
#d-dims-panel th:last-child { text-align: right; }
tr.empty td, tr.more td { padding: 8px 10px; color: var(--ink-3); border-bottom: 0; cursor: default; }
tr.warn td { color: var(--warn); }

/* Selection: grey when idle; a pale blue cursor in the list the keys act on. */
table > tbody > tr.highlighted, table.interactive > tbody > tr.highlighted:hover { background: var(--idle); }
.sunken-panel:focus tr.highlighted, .sunken-panel:focus tr.highlighted:hover { background: var(--sel); box-shadow: inset 3px 0 var(--focus); }
:is(#results, #d-dims-panel):focus tr.highlighted :is(td, td b) { color: var(--ink); }

#detail .placeholder { display: none; }
#detail.empty > * { display: none; }
#detail.empty > .placeholder { display: block; margin: auto; text-align: center; color: var(--ink-3); line-height: 20px; }
#d-head { min-height: 56px; }
/* Long titles wrap to two lines at most. */
.d-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: 24px;
  line-height: 30px;
  font-weight: 700;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.d-meta { margin-top: 4px; color: var(--ink-2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.url-pending { color: var(--ink-3); }
.err { margin-top: 6px; display: flex; gap: 8px; align-items: center; color: var(--warn); }

#d-body { flex: 1; display: flex; min-height: 0; overflow: hidden; }
#d-body:focus-within { border-color: var(--focus); }
#d-dims-panel { flex: 0 0 36%; min-width: 0; border: 0; border-right: 1px solid var(--rule-2); }
#vals-col { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#d-vals { flex: 1; min-height: 0; border: 0; }
#d-dims-panel:focus, #d-vals:focus { box-shadow: none; }
#vals-col .field-row { flex: 0 0 32px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px; padding: 0 8px; background: var(--hover); border-bottom: 1px solid var(--disabled); }
#vals-col .field-row input { min-width: 0; width: 100%; height: 26px; }
#vals-col .field-row button { min-width: 40px; height: 26px; padding: 0 4px; }
#v-count { padding: 4px 8px 6px; font: 300 13px/18px var(--mono); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#detail.loading #d-body { color: var(--ink-3); }

/* Value rows: one element each, with a check box. */
.v {
  position: relative;
  height: 28px;
  line-height: 28px;
  padding: 0 10px 0 32px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  user-select: none;
  content-visibility: auto;
  contain-intrinsic-size: auto 28px;
}
.v:hover { background: var(--hover); }
.v::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 7px;
  width: 13px;
  height: 13px;
  background: var(--display);
  border: 1px solid var(--ink-2);
 
}
.v.on::before { background: var(--ink) var(--tick) center no-repeat; border-color: var(--ink); }
.v.cur { background: var(--idle); }
#d-vals:focus .v.cur { background: var(--sel); box-shadow: inset 3px 0 var(--focus); }
.note { padding: 6px 10px; color: var(--ink-3); }

/* Filters taken from the search terms: one quiet line of text, no box. */
#d-rec {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 12px;
  max-height: 56px;
  overflow-y: auto;
  margin-top: -4px;
  font-size: 12.5px;
  color: var(--ink-3);
}
#d-rec .rec-label { color: var(--ink-3); }
#d-rec .rec-group { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; white-space: nowrap; overflow: hidden; }
#d-rec button.rec-dim { height: auto; min-width: 0; padding: 0; font: 500 12.5px var(--ui); letter-spacing: 0; text-transform: none; color: var(--ink); background: none; border: 0; box-shadow: none; }
#d-rec button.rec-dim:hover { color: var(--accent); background: none; }
#d-rec button.rec-x { width: 14px; min-width: 0; height: 14px; padding: 0; font: 13px/1 var(--ui); color: var(--ink-3); background: none; border: 0; box-shadow: none; }
#d-rec button.rec-x:hover { color: var(--warn); }
#d-rec button.rec-x::before { content: "\00d7"; }

#d-notice {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  background: var(--notice);
  border: 1px solid var(--notice-border);
  border-left: 4px solid var(--warn);
 
}
.actions { display: flex; gap: 8px; align-items: center; padding-top: 8px; border-top: 1px solid var(--rule-2); }
.actions button { flex-shrink: 0; height: 32px; }
.d-id { flex: 1 1 0; min-width: 0; font: 400 11.5px var(--mono); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: text; }
#d-msg { flex: 0 1 auto; min-width: 0; font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#d-msg:empty { display: none; }

/* The button shows download progress without shifting the action row. */
#dl { position: relative; }
#dl.is-busy:disabled { color: #fff; background: var(--accent); border-color: var(--accent); }
#dl.is-busy .button-label { visibility: hidden; }
#dl.is-busy::after { content: ""; position: absolute; top: calc(50% - 7px); left: calc(50% - 7px); width: 14px; height: 14px; border: 2px solid #fff; border-right-color: transparent; border-radius: 50%; animation: download-spin .7s linear infinite; }
@keyframes download-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  #dl.is-busy::after { animation: none; }
}

/* Tooltips (see app.js). */
.tooltip {
  position: fixed;
  z-index: 100;
  max-width: 420px;
  padding: 4px 8px;
  font: 12.5px/17px var(--ui);
  color: #fff;
  background: var(--ink);
  overflow-wrap: anywhere;
  pointer-events: none;
}

/* ── Dialogs: smaller units of the same instrument ── */
.dialog {
  position: fixed;
  z-index: 10;
  display: flex;
  flex-direction: column;
  background: var(--chassis);
  border: 1px solid var(--rule);
  box-shadow: 0 0 0 100vmax rgba(18, 22, 25, .2), 0 18px 48px rgba(0, 0, 0, .22);
}
.dialog > .title-bar { display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 8px 0 14px; border-bottom: 1px solid var(--rule); }
.dialog > .window-body { padding: 14px 16px 16px; overflow: auto; }
#src-dlg { top: 64px; left: 50%; transform: translateX(-50%); width: min(760px, calc(100vw - 24px)); max-height: calc(100vh - 88px); }
#help, #mcp-dlg { top: 50%; left: 50%; transform: translate(-50%, -50%); max-height: calc(100vh - 24px); }
#help { width: min(420px, calc(100vw - 24px)); }
#mcp-dlg { width: min(540px, calc(100vw - 24px)); }
#mcp-dlg .window-body > p { margin-bottom: 12px; }
.mcp-try { margin-top: 12px; color: var(--ink-2); font-size: 13px; }
.dlg-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
.field-row { display: flex; align-items: center; gap: 6px; }

#help table { width: 100%; }
#help td { height: auto; padding: 5px 10px; white-space: normal; }
#help td:first-child { width: 45%; font-weight: 600; color: var(--ink-2); }
#help tr:last-child td { border-bottom: 0; }

/* Segmented keys: the AI app tabs here and in the documentation. */
menu[role=tablist] { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
menu[role=tablist] > li { margin-left: -1px; }
menu[role=tablist] > li:first-child { margin-left: 0; }
menu[role=tablist] > li > a {
  display: block;
  height: 26px;
  padding: 0 12px;
  font: 500 13px/24px var(--ui);
  color: var(--ink-2);
  background: var(--key);
  border: 1px solid var(--rule);
  box-shadow: none;
}
menu[role=tablist] > li > a:hover { color: var(--accent); background: var(--hover); box-shadow: none; }
menu[role=tablist] > li[aria-selected=true] > a { position: relative; z-index: 1; color: var(--ink); background: var(--sel); border-color: var(--accent); }
.mcp-steps [role=tabpanel] { margin-top: 10px; background: var(--display); border: 1px solid var(--rule); }
.mcp-steps [role=tabpanel] > .window-body { display: grid; padding: 12px 14px; line-height: 21px; }
/* All panels share one grid cell, so the box keeps the tallest panel's height. */
.mcp-steps .mcp-panel { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; }
.mcp-steps .mcp-panel[hidden] { display: flex !important; visibility: hidden; }
.mcp-steps p { margin-bottom: 6px; }
.mcp-steps ol { margin: 0; padding-left: 18px; }
.mcp-steps ol > li + li { margin-top: 8px; }
.mcp-url { margin-top: 6px; align-items: flex-start; }
.mcp-url input, .mcp-url textarea { flex: 1; min-width: 0; font: 400 12px var(--mono); }
.mcp-url textarea { height: auto; padding: 4px 8px; resize: none; line-height: 18px; }

/* Sources */
.src-cols { display: flex; gap: 14px; }
.src-cols > div { flex: 1; min-width: 0; }
.src-list { max-height: 55vh; padding: 4px 0; }
.src-row { display: flex; align-items: center; gap: 10px; height: 26px; padding: 0 10px; }
.src-row:hover { background: var(--hover); }
.src-row label { flex: 1; min-width: 0; display: flex; gap: 10px; font: 13px/20px var(--ui); letter-spacing: 0; text-transform: none; color: var(--ink); cursor: pointer; }
.src-row label > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.src-code { flex: 0 0 98px; font: 400 12px/20px var(--mono); }
.src-name { flex: 1; min-width: 0; }
.src-row input:not(:checked) + label { color: var(--ink-3); }

/* ── Documentation view (fragments from /help/, see app.js) ── */
body.help #body, body:not(.help) #help-view, body.help #st-search { display: none; }
#help-view { flex: 1; display: flex; gap: 14px; min-height: 0; padding: 12px 16px; }
#help-view .docs-sidebar { flex: 0 0 220px; display: flex; flex-direction: column; min-height: 0; }
#help-view .help-toolbar { margin-bottom: 12px; }
#help-view .help-back::before { content: "\2190"; margin-right: 6px; }
#help-view .pane-label { margin-bottom: 5px; }
#help-view .tree-view { flex: 1; overflow: auto; margin: 0; padding: 4px 0 8px; list-style: none; background: var(--display); border: 1px solid var(--rule); }
#help-view .tree-view ul { margin: 0; padding: 0; list-style: none; }
#help-view .tree-heading { padding: 10px 12px 3px; font: 600 13px/18px var(--ui); color: var(--ink); }
#help-view .tree-view a { display: block; padding: 3px 12px 3px 22px; color: var(--ink-2); }
#help-view .tree-view a:hover { background: var(--hover); }
#help-view .tree-view a.active { background: var(--sel); box-shadow: inset 3px 0 var(--accent); }

#help-view .help-page { flex: 1; min-width: 0; overflow: auto; padding: 28px 36px 48px; background: var(--display); border: 1px solid var(--rule); outline: none; }
#help-view .help-note { color: var(--ink-2); }
/* Documentation prose and headings use Hanken; literal syntax uses Plex Mono. */
#help-view .docs-main { max-width: 720px; font: 15px/24px var(--ui); }
#help-view .docs-eyebrow { font-size: 13px; color: var(--ink-3); }
#help-view .docs-main h1 { margin: 6px 0 8px; font-size: 26px; line-height: 32px; font-weight: 700; }
#help-view .docs-lead { color: var(--ink-2); font-size: 16px; }
#help-view .docs-main h2 { margin: 32px 0 10px; padding-top: 14px; font-size: 17px; line-height: 24px; font-weight: 700; border-top: 1px solid var(--rule); }
#help-view .docs-main h3 { margin: 20px 0 6px; font-size: 15px; font-weight: 700; }
#help-view .docs-main p { margin: 0 0 12px; }
#help-view .docs-main ol, #help-view .docs-main ul { margin: 0 0 12px; padding-left: 22px; }
#help-view .docs-main li + li { margin-top: 4px; }
#help-view .docs-main section { scroll-margin-top: 16px; }
#help-view code { font: 12px/20px var(--mono); }
#help-view :not(pre) > code { padding: 1px 4px; background: var(--chassis); }
#help-view pre.docs-code { position: relative; margin: 8px 0 14px; padding: 12px 76px 12px 14px; color: var(--chassis); background: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
#help-view .copy-btn { position: absolute; top: 8px; right: 8px; height: 24px; min-width: 0; padding: 0 8px; font-size: 10.5px; }
#help-view .server-box { display: inline-flex; align-items: center; gap: 10px; margin: 4px 0; padding: 3px 3px 3px 10px; background: var(--display); border: 1px solid var(--rule); }
#help-view .server-box code { background: none; padding: 0; }
#help-view .docs-table { overflow-x: auto; margin: 8px 0 16px; }
#help-view table { width: 100%; white-space: normal; font-size: 14px; line-height: 20px; }
#help-view th { position: static; height: auto; padding: 6px 10px; box-shadow: none; border-bottom: 1px solid var(--disabled); }
#help-view td { border-bottom: 1px solid var(--rule-2); }
#help-view td { height: auto; padding: 7px 10px; vertical-align: top; }
#help-view .method { margin-right: 6px; font: 700 10.5px var(--mono); }
#help-view .method-post { color: #9b4a10; }
#help-view .method-get { color: #23744a; }
#help-view .docs-cards { display: grid; gap: 8px; margin: 16px 0 6px; }
#help-view .docs-card { display: block; }
#help-view .docs-card-title { font-weight: 600; }
#help-view .docs-flow li strong::after { content: " - "; font-weight: 400; }
#help-view .docs-flow br { display: none; }
#help-view .docs-note { margin: 12px 0; padding: 8px 12px; background: var(--chassis); border-left: 4px solid var(--ink-3); }
#help-view .docs-main section .mcp-url { margin: 0 0 12px; }
/* Connect to AI guide: an app picker, then numbered steps with screenshots. */
#help-view .docs-apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin: 20px 0 8px; }
#help-view .docs-apps a { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; color: var(--ink); background: var(--key); border: 1px solid var(--rule); box-shadow: 0 1px 0 var(--rule); }
#help-view .docs-apps a:hover { color: var(--accent); border-color: var(--accent); }
#help-view .docs-apps span { font-size: 13px; line-height: 18px; color: var(--ink-3); }
#help-view .docs-meta { color: var(--ink-3); font-size: 13px; }
/* The steps also fill the Connect to AI dialog's guide (see app.js). */
:is(#help-view, #mcp-dlg) ol.docs-steps { counter-reset: step; margin: 16px 0 0; padding: 0; list-style: none; }
:is(#help-view, #mcp-dlg) .docs-steps > li { counter-increment: step; position: relative; padding-left: 40px; }
:is(#help-view, #mcp-dlg) .docs-steps > li + li { margin-top: 28px; }
:is(#help-view, #mcp-dlg) .docs-steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 26px; height: 26px; font: 600 13px/26px var(--ui); text-align: center; color: #fff; background: var(--accent); border-radius: 50%; }
:is(#help-view, #mcp-dlg) .docs-steps p { margin: 1px 0 10px; }
:is(#help-view, #mcp-dlg) .docs-steps .mcp-url { margin: 0 0 10px; }
/* Screenshots are white app UI, so each sits on a grey mat to stand apart from the page. */
:is(#help-view, #mcp-dlg) .docs-shot { margin: 0; padding: 16px; background: var(--rule-2); }
:is(#help-view, #mcp-dlg) .docs-shot img { display: block; max-width: 100%; height: auto; margin: 0 auto; border: 1px solid var(--disabled); box-shadow: 0 2px 8px rgba(18, 22, 25, .12); }
/* Guide mode: wider, the screenshot steps replace the short ones, and the buttons stay in view. */
#mcp-dlg.guide { width: min(720px, calc(100vw - 24px)); }
#mcp-dlg.guide :is(.mcp-steps [role=tabpanel], .mcp-try) { display: none; }
#mcp-dlg.guide .mcp-guide { font-size: 14px; line-height: 22px; }
/* An outlined blue key, so the guide stands out a little next to OK. */
.mcp-guide-link { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; font: 600 13px/1 var(--ui); white-space: nowrap; color: var(--link); background: var(--key); border: 1px solid var(--accent); box-shadow: 0 1px 0 var(--accent); }
.mcp-guide-link:hover { color: var(--accent-deep); background: var(--sel); }
.mcp-guide-link[hidden] { display: none; }
#mcp-dlg.guide .dlg-buttons { position: sticky; bottom: -16px; margin: 14px -16px -16px; padding: 10px 16px 16px; background: var(--chassis); border-top: 1px solid var(--rule-2); }
#help-view .docs-prompts { padding-left: 0; list-style: none; }
#help-view .docs-prompts li { padding: 8px 12px; font-style: italic; background: var(--chassis); border-left: 4px solid var(--accent); }
#help-view .docs-prompts li + li { margin-top: 6px; }
#help-view .docs-faq dt { margin-top: 14px; font-weight: 600; }
#help-view .docs-faq dd { margin: 2px 0 0; color: var(--ink-2); }

/* Stack only when two readable panes no longer fit. */
@media (max-width: 620px) {
  .panes { flex-direction: column; }
  #results { flex: 0 0 clamp(112px, 18vh, 160px); border-right: 0; border-bottom: 1px solid var(--rule); }
}

/* ── Narrow screens ── */
@media (max-width: 820px) {
  .masthead { gap: 6px; padding: 0 10px; }
  #toolbar-search-slot { flex: 1; }
  #detail { padding: 10px; }
  .toolbar .toolbar-docs, .toolbar #mcp-btn, .toolbar .spacer { display: none; }
  .search-group input { min-width: 0; }
  #home { padding: 24px 4px; }
  #home h1 { font-size: 30px; line-height: 34px; }
  .search-group #src-btn { min-width: 0; padding: 0 8px; }
  .search-group > label { display: none; }
  #results col.c-src { width: 64px; }
  #results col.c-dims { width: 30%; }
  .src-cols { flex-direction: column; }
  #help-view { flex-direction: column; padding: 10px; }
  #help-view .docs-sidebar { flex: 0 0 auto; max-height: 30vh; }
  #help-view .help-page { padding: 18px 16px 32px; }
}

@media (max-width: 700px) {
  .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d-id, #d-msg { grid-column: 1 / -1; }
  .actions button { width: 100%; }
}

@media (max-width: 480px) {
  #home .search-group { flex-wrap: wrap; }
  #home .search-group input { flex-basis: 100%; }
  #home .search-group button { flex: 1; }
}

@media print {
  body.help { display: block; padding: 0; overflow: visible; background: #fff; }
  body.help .masthead, body.help .status-bar, #help-view .docs-sidebar { display: none; }
  #help-view .help-page { border: 0; overflow: visible; }
}