/* Application widgets (tables, code views, mapper, structure trees). The look — tokens, shell and
   Tabler component styles — lives in theme.css, which is loaded after this file. */

/* ── Help ───────────────────────────────────────────────────────── */
.help-hero-icon {
    font-size: 3rem;
}

/* ── Tables: a row that opens its record on click ───────────────── */
tr[data-id],
body:has(#modal-user) tr[data-user-id] {
    cursor: pointer;
}

/* ── Tables: filter, column chooser, sortable headers (shared/data-table.js) ── */
.table-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .625rem 1rem;
    border-block-end: 1px solid var(--tblr-border-color);
}
.table-toolbar .table-filter { inline-size: min(100%, 18rem); }
.table-toolbar .table-choice { max-inline-size: 14rem; }
.table-columns { position: relative; }
.table-columns > summary { list-style: none; }
.table-columns > summary::-webkit-details-marker { display: none; }
.table-columns-panel {
    position: absolute;
    inset-block-start: calc(100% + .25rem);
    inset-inline-start: 0;
    z-index: 20;
    min-inline-size: 12rem;
    box-shadow: var(--tblr-box-shadow-dropdown, 0 .5rem 1rem rgba(0, 0, 0, .15));
}
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable::after {
    content: "\2195";
    margin-inline-start: .35rem;
    opacity: .35;
    font-size: .8em;
}
th.sortable[aria-sort="ascending"]::after  { content: "\2191"; opacity: .9; }
th.sortable[aria-sort="descending"]::after { content: "\2193"; opacity: .9; }
th.sortable:focus-visible { outline: 2px solid var(--tblr-primary); outline-offset: -2px; }

/* ── Project pages: code editing and viewing ────────────────────── */
.code-area {
    font-size: .8125rem;
    line-height: 1.5;
    tab-size: 4;
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
}
.code-view {
    max-block-size: 60vh;
    overflow: auto;
    padding: .75rem 1rem;
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    background: var(--tblr-bg-surface-secondary);
    color: var(--tblr-body-color);   /* Tabler gives <pre> light text for its dark default background */
    font-size: .8125rem;
    line-height: 1.5;
    white-space: pre;
}

/* ── Badges: a solid colour badge always has readable text (Tabler leaves it to text-*-fg) ── */
.badge.bg-primary   { color: var(--tblr-primary-fg, #fff); }
.badge.bg-secondary { color: var(--tblr-secondary-fg, #fff); }
.badge.bg-success   { color: var(--tblr-success-fg, #fff); }
.badge.bg-danger    { color: var(--tblr-danger-fg, #fff); }
.badge.bg-warning   { color: var(--tblr-warning-fg, #fff); }
.badge.bg-info      { color: var(--tblr-info-fg, #fff); }

/* A scrolling table keeps its absolutely positioned children (visually-hidden labels) inside,
   so they cannot widen the page on a phone. */
.table-responsive { position: relative; }

/* ── Structure trees (schema preview, mapper) ───────────────────── */
.structure-tree, .structure-tree ul { list-style: none; margin: 0; padding: 0; }
.structure-row {
    display: flex;
    align-items: center;
    gap: .35rem;
    min-block-size: 1.875rem;
    padding-block: .125rem;
    padding-inline: calc(.5rem + var(--depth, 0) * 1rem) .5rem;
    border-radius: var(--tblr-border-radius-sm, 4px);
    font-size: .8125rem;
    cursor: default;
    white-space: nowrap;
}
.structure-row:hover { background: var(--tblr-bg-surface-secondary); }
.structure-row:focus-visible { outline: 2px solid var(--tblr-primary); outline-offset: -2px; }
.structure-row.selected { background: var(--tblr-primary-lt, rgba(32, 107, 196, .1)); }
.structure-row.armed { box-shadow: inset 3px 0 0 var(--tblr-warning); }
.structure-row.drop { background: var(--tblr-green-lt, rgba(47, 179, 68, .12)); }
.structure-row[draggable="true"] { cursor: grab; }
.structure-toggle { inline-size: .75rem; color: var(--tblr-secondary); cursor: pointer; }
.structure-icon { color: var(--tblr-secondary); }
.structure-name { font-family: var(--tblr-font-monospace); }
.structure-type { color: var(--tblr-secondary); font-size: .75rem; }
.structure-card { margin-inline-start: 0; }
.structure-preview { max-block-size: 28rem; overflow: auto; border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius); padding: .25rem; }
/* Pipelines: step editor rows (badge · target · condition / action · move buttons) and try-it output. */
.pipeline-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem; align-items: center; }
.pipeline-step-kind { min-inline-size: 6.5rem; }
.pipeline-step-pin { grid-column: 2 / -1; }
.pipeline-step-pin:empty { display: none; }
#pipeline-try-steps td[data-depth="1"] { padding-inline-start: 1.75rem; }
#pipeline-try-steps td[data-depth="2"] { padding-inline-start: 3rem; }
#pipeline-try-steps td[data-depth="3"] { padding-inline-start: 4.25rem; }
#pipeline-try-steps td[data-depth="4"] { padding-inline-start: 5.5rem; }
.pipeline-step-branches { grid-column: 1 / -1; padding-inline-start: 1.5rem; border-inline-start: 2px solid var(--tblr-border-color); }
.pipeline-branch { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem; align-items: center; margin-block-end: .5rem; }
@media (min-width: 768px) {
  .pipeline-branch { grid-template-columns: 1.5rem minmax(0, 1fr) minmax(0, 1fr) auto; }
  .pipeline-step.pipeline-step-route { grid-template-columns: auto 6.5rem minmax(0, 4fr) auto; }
}
@media (min-width: 768px) {
  .pipeline-step { grid-template-columns: auto 6.5rem minmax(0, 2fr) minmax(0, 2fr) auto; }
}
/* Pipeline diagram (pipeline-diagram.js): input → step boxes → output, left → right or top → down. */
.pipeline-diagram { --pd-accent: var(--tblr-secondary); overflow-x: auto; padding: 1rem; border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-lg, .5rem); background:
  radial-gradient(circle, var(--tblr-border-color) 1px, transparent 1px) 0 0 / 1rem 1rem, var(--tblr-bg-surface-secondary, var(--tblr-bg-surface)); }
.pd-flow { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; inline-size: max-content; min-inline-size: 100%; }
.pipeline-diagram[data-orientation="column"] .pd-flow { flex-direction: column; inline-size: auto; }
.pd-item { display: flex; align-items: center; flex: none; }
.pipeline-diagram[data-orientation="column"] .pd-item { flex-direction: column; }
.pd-arrow { position: relative; display: block; inline-size: 2.25rem; block-size: 2px; background: var(--tblr-secondary); opacity: .7; }
.pd-arrow::after { content: ""; position: absolute; inset-inline-end: -1px; inset-block-start: -4px; border-block: 5px solid transparent;
  border-inline-start: 8px solid var(--tblr-secondary); }
.pipeline-diagram[data-orientation="column"] .pd-arrow { inline-size: 2px; block-size: 1.75rem; }
.pipeline-diagram[data-orientation="column"] .pd-arrow::after { inset-inline-end: auto; inset-inline-start: -4px; inset-block-start: auto;
  inset-block-end: -1px; border-block: 0; border-inline: 5px solid transparent; border-block-start: 8px solid var(--tblr-secondary); }
.pd-end { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .875rem; border-radius: 999px; font-weight: 600;
  font-size: .8125rem; color: var(--tblr-body-color); background: var(--tblr-bg-surface); border: 1px dashed var(--tblr-secondary); white-space: nowrap; }
.pd-box { display: flex; flex-direction: column; gap: .375rem; inline-size: 13.5rem; padding: .5rem .75rem .625rem; background: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color); border-block-start: 3px solid var(--pd-accent); border-radius: var(--tblr-border-radius);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .04); }
.pipeline-diagram[data-orientation="column"] .pd-box { inline-size: 20rem; max-inline-size: calc(100vw - 6rem); }
.pd-detect { --pd-accent: var(--tblr-yellow); }
.pd-transform { --pd-accent: var(--tblr-azure); }
.pd-extract { --pd-accent: var(--tblr-green); }
.pd-route { --pd-accent: var(--tblr-purple); inline-size: 17rem; }
.pd-head { display: flex; align-items: center; gap: .375rem; font-size: .6875rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--pd-accent); }
.pd-ref { display: flex; flex-direction: column; min-inline-size: 0; }
.pd-name { font-weight: 600; overflow-wrap: anywhere; }
.pd-key { font-family: var(--tblr-font-monospace); font-size: .75rem; color: var(--tblr-secondary); overflow-wrap: anywhere; }
.pd-missing .pd-name { font-weight: 400; font-style: italic; color: var(--tblr-secondary); }
.pd-branches { display: flex; flex-direction: column; gap: .375rem; margin: 0; padding: 0; list-style: none; }
.pd-branch { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .375rem;
  padding: .25rem .375rem; border-radius: var(--tblr-border-radius-sm, .25rem); background: var(--tblr-purple-lt, rgba(174, 62, 201, .1)); font-size: .8125rem; }
.pd-condition, .pd-exit { display: flex; align-items: center; gap: .25rem; font-size: .75rem; color: var(--tblr-secondary); }
.pd-condition { align-self: flex-start; padding: .0625rem .375rem; border-radius: 999px; background: var(--tblr-yellow-lt, rgba(245, 159, 0, .1)); }
[data-diagram-toggle] [aria-pressed="true"] { color: var(--tblr-btn-active-color, #fff); background: var(--tblr-secondary); border-color: var(--tblr-secondary); }
/* Pipeline Try it dialog (pipeline-try.js): toolbar · input / output cards · Steps / Performance / Log / History. */
.pipeline-try .modal-dialog.modal-xl { max-inline-size: min(96vw, 110rem); }
.pt-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem .875rem; margin-block-end: .875rem; }
.pt-field { display: flex; flex-direction: column; gap: .25rem; margin: 0; min-inline-size: 11rem; }
.pt-field > span { color: var(--muted); font-size: .75rem; }
.pt-field-narrow { min-inline-size: 0; inline-size: 5.5rem; }
.pt-hint { flex: 1 1 14rem; color: var(--muted); font-size: .75rem; padding-block-end: .375rem; }
.pt-docs { display: grid; grid-template-columns: minmax(0, 1fr); gap: .875rem; }
@media (min-width: 992px) { .pt-docs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pt-docs .wb-card { block-size: clamp(16rem, 42vh, 34rem); }
.pt-input.drop { border-color: var(--accent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.pt-text { flex: 1 1 auto; min-block-size: 0; margin: 0; padding: .75rem; overflow: auto; font: 12.5px/1.55 var(--mono); color: var(--text); background: transparent; border: 0; }
pre.pt-text { white-space: pre; }
pre.pt-text.pt-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.pt-code { flex: 1 1 auto; background: transparent; }
.pt-total td { border-block-start: 2px solid var(--border); font-weight: 600; }

/* Code view (code-view.js): numbered, highlighted lines. The number is a CSS counter, so a copied selection holds
   only the code. */
.code-view { counter-reset: cv; font: 12.5px/1.55 var(--mono); tab-size: 2; }
.code-view.pt-text { padding-inline: 0 .75rem; }
.code-view .cv-line {
    position: relative; display: block; min-inline-size: 100%; padding-inline-start: 3.75rem; white-space: pre;
}
.code-view:not(.pt-wrap) .cv-line { inline-size: max-content; }
.code-view.pt-wrap .cv-line { white-space: pre-wrap; overflow-wrap: anywhere; }
.code-view .cv-line::before {
    counter-increment: cv; content: counter(cv); position: absolute; inset-block: 0; inset-inline-start: 0;
    inline-size: 3rem; padding-inline-end: .625rem; border-inline-end: 1px solid var(--border); background: var(--bg);
    color: var(--muted); text-align: end; user-select: none; font-variant-numeric: tabular-nums;
}
.cv-line:empty::after { content: " "; }
/* Highlighted textarea: the coloured copy sits behind the transparent text, same font, padding and scroll. */
.code-stack { position: relative; display: flex; flex: 1 1 auto; min-inline-size: 0; }
.code-highlight {
    position: absolute; inset: 0; margin: 0; padding: .75rem; overflow: hidden; pointer-events: none;
    font: 12.5px/1.55 var(--mono); tab-size: 2; white-space: pre; color: var(--text); background: transparent;
}
.code-highlight .cv-line { display: block; }
.code-input.code-colored { position: relative; color: transparent; caret-color: var(--text); }
.code-input.code-colored::selection { color: transparent; background: color-mix(in srgb, var(--accent) 28%, transparent); }
.cv-tag, .cv-key { color: var(--info); }
.cv-attr { color: var(--warn); }
.cv-value, .cv-string { color: var(--ok); }
.cv-number, .cv-literal { color: var(--accent); }
.cv-comment, .cv-meta, .cv-punct { color: var(--muted); }
.pt-panes { padding-block-start: .75rem; }
.pt-panes .table-responsive { max-block-size: 22rem; overflow: auto; }
.pt-timeline-col { inline-size: 30%; min-inline-size: 8rem; }
.pt-bar { position: relative; block-size: .625rem; border-radius: 99px; background: var(--bg); overflow: hidden; }
.pt-bar > span {
    position: absolute; inset-block: 0; inset-inline-start: var(--start, 0%); inline-size: max(var(--share, 0%), 2px);
    border-radius: 99px; background: var(--accent);
}
.pt-bar[data-status="SKIPPED"] > span, .pt-bar[data-status="NOT_REACHED"] > span { background: var(--muted); opacity: .4; }
.pt-bar[data-status="NOT_MATCHED"] > span { background: var(--warn); }
.pt-bar[data-status="FAILED"] > span { background: var(--danger); }
.pt-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .625rem; margin: 0; }
.pt-metric { margin: 0; padding: .625rem .875rem; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.pt-metric dt { color: var(--muted); font-size: .75rem; font-weight: 500; }
.pt-metric dd { margin: .125rem 0 0; font: 500 1.125rem var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }
.pt-metric small { display: block; margin-block-start: .125rem; color: var(--muted); font: 400 .6875rem/1.4 var(--sans); }
.pt-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr)); gap: .75rem; margin-block-start: .75rem; }
.pt-chart { min-inline-size: 0; padding: .75rem .875rem; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.pt-chart-head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.pt-chart-title { margin: 0; font-size: .875rem; font-weight: 600; color: var(--text); }
.pt-chart-readout {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; block-size: 2.25rem;
    margin: .25rem 0 .5rem; color: var(--muted); font-size: .75rem; line-height: 1.125rem; overflow-wrap: anywhere;
}
[data-slot="1"] { --series: var(--series-1); } [data-slot="2"] { --series: var(--series-2); }
[data-slot="3"] { --series: var(--series-3); } [data-slot="4"] { --series: var(--series-4); }
[data-slot="5"] { --series: var(--series-5); } [data-slot="6"] { --series: var(--series-6); }
[data-slot="7"] { --series: var(--series-7); } [data-slot="8"] { --series: var(--series-8); }
[data-slot="other"] { --series: var(--series-other); } [data-slot="rest"] { --series: var(--series-rest); }
.pt-plot { position: relative; block-size: 11rem; margin-inline-start: 3.75rem; border-block-end: 1px solid var(--border); }
.pt-grid { position: absolute; inset: 0; pointer-events: none; }
.pt-grid > span { position: absolute; inset-inline: 0; inset-block-end: var(--at); border-block-start: 1px solid var(--border); }
.pt-grid > span::before {
    content: attr(data-tick); position: absolute; inset-inline-end: calc(100% + .375rem); transform: translateY(-50%);
    font: 400 .6875rem var(--mono); color: var(--muted); white-space: nowrap;
}
.pt-cols { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 2px; }
.pt-col {
    flex: 1 1 0; min-inline-size: 0; block-size: 100%; display: flex; align-items: flex-end; padding: 0;
    border: 0; border-radius: 4px 4px 0 0; background: transparent; cursor: default;
}
.pt-col:hover, .pt-col:focus-visible { background: var(--accent-soft); outline: none; }
.pt-col[aria-pressed] { cursor: pointer; }
.pt-col[aria-pressed="true"] .pt-stack { outline: 2px solid var(--text); outline-offset: 1px; }
.pt-stack {
    display: flex; flex-direction: column-reverse; inline-size: 100%; max-inline-size: 3rem; margin-inline: auto;
    block-size: max(var(--h, 0%), 2px); border-radius: 4px 4px 0 0; overflow: hidden; gap: 1px; background: var(--surface);
}
.pt-stack > span { flex: 0 0 var(--share); min-block-size: 1px; background: var(--series); }
.pt-ref {
    position: absolute; inset-inline: 0; inset-block-end: var(--at); padding-inline-end: .25rem;
    border-block-end: 1px dashed var(--text); pointer-events: none; font: 400 .6875rem/1.4 var(--mono); color: var(--muted);
    text-align: end;
}
.pt-ref > span { padding: 0 .25rem; border-radius: 3px; background: var(--surface); }
.pt-xlabels { display: flex; gap: 2px; margin-inline-start: 3.75rem; padding-block-start: .25rem; }
.pt-xlabels > span {
    flex: 1 1 0; min-inline-size: 0; overflow: visible; white-space: nowrap; text-align: center;
    font: 400 .6875rem var(--mono); color: var(--muted);
}
.pt-legend { display: flex; flex-wrap: wrap; gap: .25rem .875rem; margin: .5rem 0 0; padding: 0; list-style: none; font-size: .75rem; color: var(--text); }
.pt-legend li { display: inline-flex; align-items: center; gap: .375rem; }
.pt-swatch { inline-size: .625rem; block-size: .625rem; border-radius: 2px; background: var(--series); }
.pt-chart-table { margin-block-start: .5rem; font-size: .75rem; }
.pt-chart-table summary { color: var(--muted); cursor: pointer; }
.pt-hbars { display: grid; gap: .375rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.pt-hbar { display: grid; grid-template-columns: minmax(0, 14rem) minmax(4rem, 1fr) 7.5rem; align-items: center; gap: .625rem; font-size: .75rem; }
.pt-hbar[data-depth] .pt-hbar-label { padding-inline-start: 1rem; color: var(--muted); }
.pt-hbar[data-depth="2"] .pt-hbar-label { padding-inline-start: 2rem; }
.pt-hbar[data-depth="3"] .pt-hbar-label, .pt-hbar[data-depth="4"] .pt-hbar-label { padding-inline-start: 3rem; }
.pt-hbar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.pt-hbar-value { font: 400 .75rem var(--mono); font-variant-numeric: tabular-nums; color: var(--text); text-align: end; }
.pt-track { block-size: .75rem; }
.pt-track > span { display: block; block-size: 100%; inline-size: max(var(--share, 0%), 2px); border-radius: 0 4px 4px 0; background: var(--series); }
.pt-hbar[data-depth] .pt-track > span { opacity: .6; }
.pt-hbar[data-status="SKIPPED"] .pt-track > span, .pt-hbar[data-status="NOT_REACHED"] .pt-track > span { opacity: .4; }
.pt-hbar[data-status="FAILED"] .pt-track > span { background: var(--danger); }
.pt-pane-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-block-end: .5rem; }
.pt-log {
    max-block-size: 22rem; overflow: auto; margin: 0; padding: .5rem .75rem; list-style: none;
    border: 1px solid var(--border); border-radius: var(--r); background: var(--bg); font: 12px/1.6 var(--mono);
}
.pt-log:empty::before { content: "No runs yet."; color: var(--muted); }
.pt-log li { display: grid; grid-template-columns: 7rem 3.5rem minmax(0, 1fr); gap: .5rem; overflow-wrap: anywhere; }
.pt-log time, .pt-log .pt-level { color: var(--muted); }
.pt-log [data-level="ok"] .pt-level { color: var(--ok); }
.pt-log [data-level="warn"] .pt-level { color: var(--warn); }
.pt-log [data-level="error"] .pt-level, .pt-log [data-level="error"] .pt-line { color: var(--danger); }
#pipeline-try-history tbody tr { cursor: pointer; }
#pipeline-try-history tbody tr[aria-current="true"] { background: var(--ok-soft); }
.pipeline-expression { max-inline-size: 28rem; }

/* ── Develop page ───────────────────────────────────────────────── */
.develop-status { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
/* A table with many columns in a narrow card: half the cell padding keeps its row buttons in view. */
.table.table-compact > :not(caption) > * > * { padding-inline: calc(var(--pad) / 2); }
/* Four row buttons as two pairs, so the column stays narrow. */
.row-actions-pairs { display: grid; grid-template-columns: repeat(2, max-content); gap: .25rem; }
.diff-view .diff-line { display: block; }
.diff-view .diff-add { background: rgba(47, 179, 68, .14); }
.diff-view .diff-del { background: rgba(214, 57, 57, .14); }
.ai-examples { display: flex; flex-wrap: wrap; gap: .25rem .375rem; }

/* ── Editor tab: visual ⇄ technical switch and sync state ───────── */
.editor-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-block-end: 1rem; }
.editor-switch { display: inline-flex; gap: .125rem; padding: .1875rem; border: 1px solid var(--border); border-radius: 99px; background: var(--surface); }
.editor-switch button { border: 0; background: transparent; color: var(--muted); border-radius: 99px; padding: .25rem .875rem; font-size: .8125rem; }
.editor-switch button.active { background: var(--text); color: var(--bg); }
.editor-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.editor-sync { font-size: .75rem; color: var(--muted); }
.editor-sync[data-state="ok"] { color: var(--ok); }
.editor-sync[data-state="error"] { color: var(--danger); }

/* ── Editor tab, technical view: code card | test input + live output ── */
/* Settings: one summary line ("XML → application/xml · …"), opened to edit. */
.wb-settings { margin-block-end: .75rem; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.wb-settings > summary {
    display: flex; align-items: center; gap: .5rem; padding: .4375rem .875rem; cursor: pointer;
    list-style: none; font-size: .8125rem; color: var(--muted);
}
.wb-settings > summary::-webkit-details-marker { display: none; }
.wb-settings > summary::before { content: "\25B8"; font-size: .75rem; transition: transform .15s; }
.wb-settings[open] > summary::before { transform: rotate(90deg); }
.wb-settings > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r); }
.wb-settings-label { color: var(--text); font-weight: 500; }
.wb-settings-summary { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: .75rem; }
.wb-settings-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: .75rem;
    padding: .75rem .875rem .875rem; border-block-start: 1px solid var(--border);
}
.wb-setting { display: flex; flex-direction: column; gap: .25rem; margin: 0; min-inline-size: 0; }
.wb-setting > span { color: var(--muted); font-size: .75rem; }
.wb-setting-hint { color: var(--muted); font-size: .6875rem; }
.workbench {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: .875rem;
    block-size: clamp(30rem, calc(100vh - 21rem), 62rem);
}
.wb-side { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: .875rem; min-block-size: 0; }
.wb-card {
    display: flex; flex-direction: column; min-inline-size: 0; min-block-size: 0; overflow: hidden;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
}
.wb-head {
    display: flex; flex: none; align-items: center; flex-wrap: wrap; gap: .375rem .625rem;
    min-block-size: 2.625rem; padding: .375rem .5rem .375rem .875rem; border-block-end: 1px solid var(--border);
}
.wb-title { margin: 0; font: 500 1.0625rem var(--serif); color: var(--text); }
.wb-title label { margin: 0; font: inherit; cursor: text; }
.wb-sub { color: var(--muted); font-size: .75rem; }
.wb-spacer { flex: 1 1 0; }
.wb-cursor { font-variant-numeric: tabular-nums; white-space: nowrap; }
.wb-check, .wb-run { font-size: .75rem; color: var(--muted); white-space: nowrap; }
.wb-check:empty, .wb-run:empty { display: none; }
.wb-check { padding: .0625rem .5rem; border-radius: 99px; background: var(--bg); }
.wb-check[data-state="ok"], .wb-run[data-state="ok"] { color: var(--ok); }
.wb-check[data-state="ok"] { background: var(--ok-soft); }
.wb-check[data-state="warning"] { color: var(--warn); background: var(--warn-soft); }
.wb-check[data-state="error"], .wb-run[data-state="error"] { color: var(--danger); }
.wb-check[data-state="error"] { background: var(--danger-soft); }
.wb-button {
    display: inline-flex; align-items: center; gap: .3125rem; padding: .1875rem .75rem;
    border: 1px solid var(--border); border-radius: 99px; background: var(--surface); color: var(--muted);
    font-size: .75rem; font-weight: 500; white-space: nowrap;
}
.wb-button:hover:not(:disabled) { color: var(--text); border-color: var(--text); }
.wb-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.wb-button-run { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); }
.wb-select { inline-size: auto; max-inline-size: 12rem; text-overflow: ellipsis; }
.wb-foot { display: flex; align-items: center; gap: .5rem; padding: .3125rem .5rem .3125rem .875rem; border-block-start: 1px solid var(--border); }
.wb-foot label { margin: 0; color: var(--muted); font-size: .75rem; white-space: nowrap; }
.wb-media { inline-size: 11rem; min-inline-size: 0; }
.wb-foot .form-control, .wb-head .form-select { min-block-size: 0; padding-block: .125rem; font-size: .75rem; }

/* Code editor: line-number gutter + textarea, scrolled together (code-editor.js). */
.code-editor { position: relative; display: flex; flex: 1 1 auto; min-block-size: 0; background: var(--surface); }
.code-gutter {
    flex: none; min-inline-size: 3rem; overflow: hidden; padding-block: .75rem; padding-inline: .5rem .625rem;
    border-inline-end: 1px solid var(--border); background: var(--bg); color: var(--muted);
    font: 12.5px/1.55 var(--mono); text-align: end; user-select: none; font-variant-numeric: tabular-nums;
}
.code-gutter span { display: block; }
.code-gutter .code-mark-error { color: var(--danger); font-weight: 700; box-shadow: inset 3px 0 0 var(--danger); background: var(--danger-soft); }
.code-gutter .code-mark-warning { color: var(--warn); font-weight: 700; box-shadow: inset 3px 0 0 var(--warn); }
.code-input {
    display: block; flex: 1 1 auto; inline-size: 100%; min-inline-size: 0; margin: 0; resize: none;
    padding: .75rem; border: 0; outline: 0; background: transparent; color: var(--text);
    font: 12.5px/1.55 var(--mono); tab-size: 2; white-space: pre; overflow: auto;
}
.code-input::placeholder { color: var(--muted); opacity: .8; }
.code-input[readonly] { color: var(--muted); }
.wb-card:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.wb-note { margin: 0; padding: .5rem .875rem; color: var(--muted); font-size: .8125rem; border-block-start: 1px solid var(--border); }
.wb-fields { flex: 1 1 auto; overflow: auto; }
/* One capture field = two lines: name · type · required · actions, then language · expression. The inputs
   carry their own labels, so the column heads are left out. */
#fields-editor, #fields-editor tbody { display: block; }
#fields-editor thead { display: none; }
#fields-editor tr {
    display: grid; gap: .375rem .5rem; align-items: center; padding: .625rem .875rem; border-block-end: 1px solid var(--border);
    grid-template-columns: 7rem minmax(0, 1fr) 7.5rem auto auto;
    grid-template-areas: "name name type req act" "lang expr expr expr expr";
}
#fields-editor td { display: block; padding: 0; border: 0; }
#fields-editor td:nth-child(1) { grid-area: name; }
#fields-editor td:nth-child(2) { grid-area: lang; }
#fields-editor td:nth-child(3) { grid-area: expr; }
#fields-editor td:nth-child(4) { grid-area: type; }
#fields-editor td:nth-child(5) { grid-area: req; }
#fields-editor td:nth-child(6) { grid-area: act; }
.wb-required { display: inline-flex; align-items: center; gap: .375rem; margin: 0; color: var(--muted); font-size: .75rem; white-space: nowrap; }
@media (max-width: 575.98px) {
    #fields-editor tr { grid-template-columns: 6.5rem minmax(0, 1fr) auto; grid-template-areas: "name name name" "type req act" "lang expr expr"; }
}
.wb-fields-empty { border: 0; }

/* Problems under the code: one row per message, a click selects the line. */
.wb-problems { list-style: none; margin: 0; padding: 0; max-block-size: 9rem; overflow: auto; border-block-start: 1px solid var(--border); }
.wb-problems:empty { display: none; }
.wb-problem {
    display: flex; gap: .75rem; inline-size: 100%; padding: .3125rem .875rem; border: 0; background: transparent;
    text-align: start; font-size: .8125rem; color: var(--text);
}
.wb-problem:hover:not(:disabled) { background: var(--bg); }
.wb-problem:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.wb-problem-where { flex: none; min-inline-size: 3.5rem; font-family: var(--mono); font-size: .75rem; font-variant-numeric: tabular-nums; }
.wb-problem-error .wb-problem-where { color: var(--danger); }
.wb-problem-warning .wb-problem-where { color: var(--warn); }

/* Test input and output. */
.wb-input-text { flex: 1 1 auto; min-block-size: 0; }
.wb-params { margin-inline-start: auto; }
.wb-params-toggle[aria-expanded="true"] { color: var(--text); border-color: var(--text); }
.wb-params-box { border-block-start: 1px solid var(--border); }
.wb-params-box .code-input { block-size: 5rem; }
.wb-output-body { flex: 1 1 auto; min-block-size: 0; overflow: auto; }
.wb-output-text { margin: 0; padding: .75rem; border: 0; background: transparent; color: var(--text); font: 12.5px/1.55 var(--mono); white-space: pre; }
.wb-empty { margin: 0; padding: 1rem .875rem; color: var(--muted); font-size: .8125rem; }
.wb-error { display: flex; flex-direction: column; gap: .25rem; margin: .75rem; padding: .625rem .75rem; border-radius: var(--r); background: var(--danger-soft); color: var(--danger); font-size: .8125rem; overflow-wrap: anywhere; }
.wb-error strong { font-family: var(--mono); font-size: .75rem; }
.wb-verdict-detail { margin: 0; padding: .375rem .875rem; border-block-end: 1px solid var(--border); background: var(--danger-soft); color: var(--danger); font-size: .75rem; overflow-wrap: anywhere; }
.wb-verdict-detail:empty { display: none; }
.wb-error span { color: var(--text); white-space: pre-wrap; }
.wb-verdict { margin: .875rem; padding: .625rem .875rem; border-radius: var(--r); font-weight: 600; }
.wb-verdict-yes { background: var(--ok-soft); color: var(--ok); }
.wb-verdict-no { background: var(--bg); color: var(--muted); }
.wb-result-table td, .wb-result-table th { padding-inline: .875rem; }
.wb-messages { list-style: none; margin: 0; padding: .375rem .875rem; max-block-size: 6rem; overflow: auto; border-block-start: 1px solid var(--border); color: var(--muted); font-size: .75rem; }
.wb-messages:empty { display: none; }
.wb-keys { margin: .5rem 0 0; color: var(--muted); font-size: .75rem; }
@media (max-width: 1199.98px) {
    .workbench { grid-template-columns: minmax(0, 1fr); block-size: auto; }
    .wb-code { block-size: 32rem; }
    .wb-side { grid-template-rows: 18rem 18rem; }
}
@media (max-width: 575.98px) {
    .wb-select { max-inline-size: none; flex: 1 1 8rem; }
}

/* ── Mapper: source · lines · target, Properties panel, live output ── */
.mapper-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem); gap: 1rem; align-items: start; }
.mapper-layout.side-hidden { grid-template-columns: minmax(0, 1fr) 2.75rem; }
.mapper-layout.side-hidden #mapper-side-body, .mapper-layout.side-hidden .mapper-side-tabs .nav { display: none; }
.mapper-main { min-inline-size: 0; display: flex; flex-direction: column; gap: .75rem; }
.mapper-card, .mapper-output, .mapper-side {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    min-inline-size: 0;
}
.mapper-head {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) auto minmax(0, 1fr);
    align-items: center;
    gap: .5rem;
    padding: .625rem .875rem;
    border-block-end: 1px solid var(--border);
}
.mapper-head-side { display: flex; align-items: baseline; gap: .5rem; min-inline-size: 0; white-space: nowrap; }
.mapper-head-side .mapper-sub { min-inline-size: 0; }
.mapper-head-end { justify-content: flex-end; }
.mapper-head-mid { display: flex; align-items: center; gap: .375rem; }
.mapper-title { font-family: var(--serif); font-size: 1.0625rem; color: var(--text); }
.mapper-sub { color: var(--muted); font-size: .75rem; overflow: hidden; text-overflow: ellipsis; }
.mapper-round {
    inline-size: 1.5rem; block-size: 1.5rem; border-radius: 50%;
    border: 1px solid var(--border); background: var(--surface); color: var(--text); line-height: 1; padding: 0;
}
.mapper-round:disabled { opacity: .4; }
.mapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(3rem, 12%, 9rem) minmax(0, 1.1fr);
    block-size: min(68vh, 46rem);
}
.mapper-pane { overflow: auto; padding-block: .375rem; min-inline-size: 0; }
.mapper-source.drop { outline: 2px dashed var(--accent); outline-offset: -4px; }
.mapper-target { border-inline-start: 1px solid var(--border); }
.mapper-lines { inline-size: 100%; block-size: 100%; border-inline-start: 1px solid var(--border); }
.mapper-line { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: .45; pointer-events: none; }
.mapper-line.selected { stroke-width: 2.5; opacity: 1; }
/* One end is scrolled out of its pane or inside a collapsed branch: drawn to the edge / the shown ancestor. */
.mapper-line.partial { stroke-dasharray: 4 3; opacity: .3; }
.mapper-line.partial.selected { opacity: .8; }
.mapper-line-hit { fill: none; stroke: transparent; stroke-width: 10; cursor: pointer; pointer-events: stroke; }
.mapper-line-hit:hover { stroke: var(--danger-soft); }
.mapper-tree, .mapper-tree ul { list-style: none; margin: 0; padding: 0; }
.mapper-row {
    display: flex; align-items: center; gap: .5rem;
    min-block-size: 2.125rem;
    padding-inline: calc(.625rem + var(--depth, 0) * .875rem) .625rem;
    font-family: var(--mono); font-size: .8125rem; color: var(--text);
    cursor: pointer; position: relative;
}
.mapper-row:hover { background: var(--surface2); }
.mapper-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mapper-row.selected { background: var(--surface2); }
.mapper-row.armed { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.mapper-row.drop { background: var(--accent-soft); }
.mapper-row[draggable="true"] { cursor: grab; }
.mapper-source .mapper-row.mapped::after, .mapper-target .mapper-row.mapped::before {
    content: ""; position: absolute; inset-block: .375rem; inline-size: 3px; background: var(--accent);
}
.mapper-source .mapper-row.mapped::after { inset-inline-end: 0; }
.mapper-target .mapper-row.mapped::before { inset-inline-start: 0; }
.mapper-toggle { inline-size: .625rem; color: var(--muted); flex: none; }
.mapper-tag {
    font-family: var(--mono); font-size: .625rem; letter-spacing: .04em; color: var(--muted);
    min-inline-size: 2rem; flex: none;
}
.mapper-name { white-space: nowrap; }
.mapper-occurs { font-size: .6875rem; color: var(--muted); }
.mapper-value, .mapper-statement {
    margin-inline-start: auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: .75rem; color: var(--muted);
}
.mapper-value { max-inline-size: 45%; font-family: var(--sans); }
.mapper-statement { max-inline-size: 50%; color: var(--accent); }
.mapper-icon {
    flex: none; border: 1px solid var(--border); background: var(--surface); color: var(--muted);
    border-radius: 99px; font-size: .75rem; line-height: 1; padding: .1875rem .5rem;
}
.mapper-icon:hover { color: var(--text); border-color: var(--text); }
.mapper-empty { color: var(--muted); padding: 1rem; font-family: var(--sans); font-size: .8125rem; }
.mapper-drop-hint { color: var(--muted); font-size: .75rem; padding: .75rem .875rem; }
.mapper-drop-hint .btn-link { font-size: inherit; }
.mapper-empty-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.mapper-add {
    display: block; inline-size: calc(100% - 1rem); margin: .5rem; padding: .5rem;
    border: 1px dashed var(--border); border-radius: var(--r); background: transparent; color: var(--muted);
    font-size: .75rem; text-align: start;
}
.mapper-add:hover { color: var(--text); border-color: var(--text); }
.mapper-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.mapper-hint { flex: 1 1 22rem; margin: 0; color: var(--muted); font-size: .8125rem; }
.mapper-action-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.mapper-output-head {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding-inline: .5rem .875rem; border-block-end: 1px solid var(--border);
}
.mapper-output-head .nav-tabs { border: 0; }
.mapper-run-status { font-size: .75rem; color: var(--muted); }
.mapper-run-status[data-state="ok"] { color: var(--ok); }
.mapper-run-status[data-state="error"] { color: var(--danger); }
.mapper-run-verdict { font-size: .75rem; overflow-wrap: anywhere; }
.mapper-run-verdict:empty { display: none; }
.mapper-run-verdict[data-state="ok"] { color: var(--ok); }
.mapper-run-verdict[data-state="error"] { color: var(--danger); }
.mapper-output-code { margin: 0; border: 0; border-radius: 0 0 var(--r) var(--r); max-block-size: 24rem; min-block-size: 6rem; overflow: auto; }
.mapper-tests { list-style: none; margin: 0; padding: .5rem .875rem; }
.mapper-tests li { display: flex; align-items: baseline; gap: .625rem; padding-block: .375rem; border-block-end: 1px solid var(--border); }
.mapper-tests li:last-child { border-block-end: 0; }
.mapper-tests .pass .mapper-test-mark { color: var(--ok); }
.mapper-tests .fail .mapper-test-mark { color: var(--danger); }
.mapper-test-name { font-weight: 600; }
.mapper-side { position: sticky; inset-block-start: calc(var(--topbar-h) + 1rem); max-block-size: calc(100vh - var(--topbar-h) - 2rem); overflow: auto; }
.mapper-side-tabs { display: flex; align-items: stretch; border-block-end: 1px solid var(--border); }
.mapper-side-tabs .nav { flex: 1; border: 0; padding-inline: .5rem; }
.mapper-side-tabs .nav { flex-wrap: nowrap; }
.mapper-side-tabs .nav-link { white-space: nowrap; padding-inline: .625rem; }
.mapper-side-toggle { border: 0; border-inline-start: 1px solid var(--border); background: transparent; color: var(--muted); padding-inline: .875rem; }
.mapper-side-toggle:hover { color: var(--text); }
.mapper-layout.side-hidden .mapper-side-toggle { border: 0; inline-size: 100%; padding-block: .75rem; }
.mapper-props-head { padding: .875rem; border-block-end: 1px solid var(--border); display: flex; flex-direction: column; gap: .5rem; }
.mapper-props-kind { display: flex; align-items: center; gap: .5rem; }
.mapper-props-kind .mapper-tag { border: 1px solid var(--border); border-radius: 4px; padding: .0625rem .375rem; min-inline-size: 0; }
.mapper-props-name { font-family: var(--mono); font-weight: 600; }
.mapper-props-buttons { display: flex; flex-wrap: wrap; gap: .375rem; }
.mapper-props-buttons .btn, .mapper-props-section .btn-sm { border-radius: 99px; }
.mapper-props-section { padding: .875rem; border-block-end: 1px solid var(--border); display: flex; flex-direction: column; gap: .5rem; }
.mapper-props-section:last-child { border-block-end: 0; }
.mapper-props-section > .btn, .mapper-props-section > .btn-link { align-self: flex-end; margin-block-start: -1.875rem; }
.mapper-props-title { font-family: var(--serif); font-size: 1rem; font-weight: 500; margin: 0; }
.mapper-props-field { display: flex; flex-direction: column; gap: .25rem; }
.mapper-props-field .form-label { margin: 0; font-size: .75rem; color: var(--muted); }
.mapper-condition { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1fr); gap: .375rem; }
.mapper-segmented { display: inline-flex; flex-wrap: wrap; gap: .125rem; padding: .125rem; border: 1px solid var(--border); border-radius: 99px; align-self: flex-start; }
.mapper-segmented button { border: 0; background: transparent; color: var(--muted); border-radius: 99px; padding: .125rem .625rem; font-size: .75rem; }
.mapper-segmented button.active { background: var(--text); color: var(--bg); }
.mapper-likely { display: flex; flex-direction: column; gap: .25rem; }
/* Transform: ordered transformation steps of a value. */
.mapper-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .375rem; }
.mapper-step { border: 1px solid var(--border); border-radius: var(--r); padding: .375rem .5rem; display: flex; flex-direction: column; gap: .375rem; }
.mapper-step-head { display: flex; align-items: center; gap: .375rem; }
.mapper-step-head .form-select { flex: 1; min-inline-size: 0; }
.mapper-step-number { font-family: var(--mono); font-size: .75rem; color: var(--muted); min-inline-size: 1.25rem; }
.mapper-step-params { display: grid; grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); gap: .375rem; padding-inline-start: 1.625rem; }
.mapper-step-result { font-size: .75rem; overflow-wrap: anywhere; color: var(--muted); }
.mapper-likely .btn { justify-content: flex-start; text-align: start; }
.mapper-when { border: 1px solid var(--border); border-radius: var(--r); padding: .5rem; display: flex; flex-direction: column; gap: .375rem; }
.mapper-when .mapper-when { margin-inline-start: .75rem; }
.mapper-branch-head { display: flex; align-items: center; gap: .375rem; flex-wrap: wrap; }
.mapper-branch-head .mapper-tag { font-family: var(--mono); font-size: .75rem; color: var(--muted); }
/* Condition tree: groups indent by depth with a guide line; rules are field · operator · value · remove. */
.mapper-cond-group { display: flex; flex-direction: column; gap: .375rem; }
.mapper-cond-group:not(.root) { border-inline-start: 2px solid var(--border); padding-inline-start: .625rem; margin-inline-start: .25rem; }
.mapper-cond-head, .mapper-cond-actions { display: flex; align-items: center; gap: .375rem; flex-wrap: wrap; }
.mapper-cond-head .form-select { inline-size: auto; }
.mapper-cond-not { margin: 0; display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; }
.mapper-cond-rule { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(5.5rem, .8fr) minmax(0, 1fr) auto; gap: .375rem; align-items: center; }
/* ƒ button beside every XPath control and its function menu (native popover, placed by JS). */
.mapper-xpath { display: flex; gap: .25rem; align-items: flex-start; }
.mapper-xpath > .form-control { flex: 1; min-inline-size: 0; }
.mapper-fn { font-family: var(--serif); font-style: italic; padding-inline: .5rem; }
.mapper-fn-menu { position: fixed; inset: auto; margin: 0; inline-size: min(22rem, calc(100vw - 1rem)); max-block-size: 24rem; padding: .5rem; overflow: hidden;
    display: none; flex-direction: column; gap: .375rem; background: var(--surface); color: var(--text); border: 1px solid var(--border);
    border-radius: var(--r); box-shadow: var(--pop-shadow); }
.mapper-fn-menu:popover-open { display: flex; }
.mapper-fn-menu .function-palette { max-block-size: none; flex: 1; min-block-size: 0; }
/* ── Assistant (AI) tab of the side panel ── */
.mapper-ai-mark { color: var(--accent); margin-inline-end: .25rem; }
.mapper-ai { display: flex; flex-direction: column; min-block-size: 32rem; }
.mapper-ai-head { display: flex; align-items: center; gap: .5rem; padding: .5rem .875rem; border-block-end: 1px solid var(--border); }
.mapper-ai-context { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapper-ai-provider { font-size: .75rem; color: var(--muted); border: 1px solid var(--border); border-radius: 99px; padding: .0625rem .5rem; max-inline-size: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapper-ai-notice { margin: 0; padding: .5rem .875rem; font-size: .75rem; color: var(--muted); border-block-end: 1px solid var(--border); }
.mapper-ai-notice[data-variant="warning"] { color: var(--warn); }
.mapper-ai-log { flex: 1; overflow: auto; padding: .875rem; display: flex; flex-direction: column; gap: .625rem; min-block-size: 12rem; max-block-size: 28rem; }
.mapper-ai-msg { align-self: flex-start; max-inline-size: 92%; display: flex; flex-direction: column; gap: .375rem; }
.mapper-ai-msg.user { align-self: flex-end; }
.mapper-ai-text { padding: .5625rem .75rem; border-radius: 12px; background: var(--surface2); font-size: .8125rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.mapper-ai-msg.user .mapper-ai-text { background: var(--accent); color: var(--accent-ink); }
.mapper-ai-msg.busy .mapper-ai-text { color: var(--muted); animation: mapper-ai-pulse 1.2s infinite; }
@keyframes mapper-ai-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .mapper-ai-msg.busy .mapper-ai-text { animation: none; } }
.mapper-ai-steps { margin: 0; padding-inline-start: 1.25rem; font-size: .75rem; color: var(--muted); }
.mapper-ai-steps .ok { color: var(--ok); }
.mapper-ai-steps .failed { color: var(--danger); }
.mapper-ai-actions { display: flex; flex-wrap: wrap; gap: .375rem; }
.mapper-ai-actions .btn { border-radius: 99px; }
.mapper-ai-examples { margin: 0; padding: .5rem .875rem 0; border: 0; }
.mapper-ai-examples legend { float: none; inline-size: auto; margin-block-end: .25rem; font-size: .75rem; }
.mapper-ai-example { display: inline-flex; align-items: center; gap: .375rem; font-size: .75rem; border: 1px solid var(--border); border-radius: 99px; padding: .125rem .5rem; cursor: pointer; }
.mapper-ai-example .form-check-input { margin: 0; }
.mapper-ai-chips { display: flex; flex-wrap: wrap; gap: .375rem; padding: .5rem .875rem; }
.mapper-ai-chip, .mapper-ask { border: 1px solid var(--border); border-radius: 99px; background: var(--bg); color: var(--muted); font-size: .75rem; padding: .1875rem .625rem; }
.mapper-ai-chip:hover, .mapper-ai-chip:focus-visible { border-color: var(--accent); color: var(--text); }
.mapper-ask { margin-inline-start: auto; border-color: transparent; background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.mapper-ask:hover, .mapper-ask:focus-visible { filter: brightness(1.05); }
.mapper-ai-compose { display: flex; align-items: flex-end; gap: .5rem; padding: .625rem .875rem; border-block-start: 1px solid var(--border); }
.mapper-ai-compose textarea { flex: 1; min-inline-size: 0; resize: vertical; border-radius: 12px; }
.mapper-ai-send { flex: none; inline-size: 2.125rem; block-size: 2.125rem; border: 0; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.mapper-ai-send:disabled { opacity: .45; }
.mapper-ai-send:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mapper-menu {
    position: fixed; margin: 0; padding: .25rem; min-inline-size: 11rem;
    background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r);
    box-shadow: var(--pop-shadow);
}
.mapper-menu-item { display: block; inline-size: 100%; text-align: start; border: 0; background: transparent; color: inherit; padding: .375rem .625rem; border-radius: 6px; font-family: var(--mono); font-size: .8125rem; }
.mapper-menu-item:hover, .mapper-menu-item:focus-visible { background: var(--surface2); }
.mapper-list { font-family: var(--mono); font-size: .8125rem; }
.function-palette { list-style: none; padding: 0; margin: 0; max-block-size: 32rem; overflow: auto; }
.function-palette li { padding-block: .375rem; border-block-end: 1px solid var(--border); }
@media (max-width: 1199.98px) {
    .mapper-layout, .mapper-layout.side-hidden { grid-template-columns: minmax(0, 1fr); }
    .mapper-side { position: static; max-block-size: none; }
}
@media (max-width: 767.98px) {
    .mapper { grid-template-columns: minmax(0, 1fr) 1.5rem minmax(0, 1fr); block-size: 60vh; }
    .mapper-value, .mapper-statement { display: none; }
    .mapper-head { grid-template-columns: 1fr; }
    .mapper-head-end { justify-content: flex-start; }
}

/* AI routing: keep tier / feature pickers readable on phones (the table scrolls inside its card). */
#routing-form .form-select { min-inline-size: max-content; }
#routing-form .form-control { min-inline-size: 10rem; }

/* Check-out bar: the lock icon stays beside its text; the buttons wrap below on narrow screens. */
.checkout-bar-text { display: flex; align-items: center; gap: .5rem; flex: 1 1 20rem; min-inline-size: 0; }

/* Logo upload on the branding pages */
.logo-upload-preview { block-size: 40px; max-inline-size: 160px; object-fit: contain; border: 1px solid var(--border); border-radius: var(--r); padding: 4px; background: var(--surface); }
.logo-upload-input { max-inline-size: 22rem; }

/* Branding assistant: colour swatches and the accent preview (colours set through CSSOM custom properties, no inline style). */
.brand-swatch { display: inline-block; inline-size: 1.5rem; block-size: 1.5rem; flex: none; border-radius: var(--r); border: 1px solid var(--border); background: var(--swatch, transparent); }
.brand-swatch-lg { inline-size: 3.5rem; block-size: 3.5rem; }
.brand-candidate { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .5rem; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: inherit; font-family: var(--tblr-font-monospace, monospace); font-size: .8125rem; }
.brand-candidate[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 1px; }
.brand-image { display: flex; align-items: center; gap: .75rem; padding: .5rem; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); min-inline-size: 0; }
.brand-image-preview { inline-size: 4rem; block-size: 4rem; flex: none; object-fit: contain; border: 1px solid var(--border); border-radius: var(--r); padding: 4px; background: #fff; }
.brand-image-meta { min-inline-size: 0; overflow-wrap: anywhere; }
.branding-preview { --preview-accent: var(--accent); --preview-ink: var(--accent-ink); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.branding-preview-bar { display: flex; align-items: center; gap: .5rem; padding: .625rem .75rem; background: var(--preview-accent); color: var(--preview-ink); font-weight: 600; }
.branding-preview-body { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .75rem; }
.branding-preview-dark { background: #17130f; color: #f4f1ee; }
.branding-preview-btn { padding: .35rem .75rem; border: 1px solid var(--preview-accent); border-radius: var(--r); background: var(--preview-accent); color: var(--preview-ink); font-weight: 500; }
.branding-preview-btn-outline { padding: .35rem .75rem; border: 1px solid var(--preview-accent); border-radius: var(--r); color: var(--preview-accent); }
.branding-preview-link { color: var(--preview-accent); text-decoration: underline; }
.branding-preview-badge { padding: .1rem .5rem; border-radius: 999px; background: color-mix(in srgb, var(--preview-accent) 16%, transparent); color: var(--preview-accent); font-size: .75rem; font-weight: 600; }
.branding-preview-track { flex: 1 1 8rem; block-size: .5rem; border-radius: 999px; background: var(--border); overflow: hidden; }
.branding-preview-fill { display: block; inline-size: 60%; block-size: 100%; background: var(--preview-accent); }

/* Debug captures: wide viewer, request and response side by side, label/value grid of the capture's metadata. */
.debug-viewer-dialog { max-inline-size: min(1600px, 96vw); }
.debug-body { min-block-size: 8rem; max-block-size: 55vh; }
.debug-meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .5rem 1rem; margin-block-end: 1rem; }
.debug-meta > div { min-inline-size: 0; }
.debug-meta dt { font-weight: 500; color: var(--tblr-secondary); font-size: .75rem; }
.debug-meta dd { margin: 0; overflow-wrap: anywhere; }
.debug-headers td:first-child { white-space: nowrap; font-weight: 500; }
.debug-headers td { overflow-wrap: anywhere; font-family: var(--tblr-font-monospace, monospace); font-size: .75rem; }

/* Pipeline test suite dialog (pipeline-suite.js); the downloaded report repeats the chart rules (pipeline-suite-model.js). */
.suite-filter { inline-size: min(100%, 18rem); }
.suite-cases { max-block-size: 18rem; overflow: auto; }
.suite-charts { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; margin-block-start: .75rem; }
@media (min-width: 48rem) { .suite-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.suite-chart-wide { grid-column: 1 / -1; }
.suite-time { max-block-size: 28rem; overflow: auto; }
.suite-report { --failed: var(--danger); --error: var(--warn); }
.suite-report .sr-chart { display: block; max-inline-size: 100%; block-size: auto; font: 12px var(--sans); }
.suite-report .sr-ok { fill: var(--ok); stroke: var(--ok); }
.suite-report .sr-failed { fill: var(--failed); stroke: var(--failed); }
.suite-report .sr-error { fill: var(--error); stroke: var(--error); }
.suite-report .sr-ring { fill: none; }
.suite-report rect.sr-ok, .suite-report rect.sr-failed, .suite-report rect.sr-error { stroke: none; }
.suite-report .sr-track { stroke: var(--border); }
.suite-report .sr-bar { fill: var(--accent); }
.suite-report .sr-grid { stroke: var(--border); stroke-width: 1; }
.suite-report .sr-p95 { stroke: var(--text); stroke-width: 2; }
.suite-report .sr-label { fill: var(--text); }
.suite-report .sr-value, .suite-report .sr-tick { fill: var(--muted); font-family: var(--mono); font-size: 11px; }
.suite-report .sr-big { fill: var(--text); font-size: 22px; font-weight: 700; }
.suite-report .sr-error-text { fill: var(--error); }
.suite-report .pt-metric[data-tone="ok"] dd { color: var(--ok); }
.suite-report .pt-metric[data-tone="bad"] dd { color: var(--danger); }