/* Resource list and detail pages: full-width tables, tab links and stat tiles. */
/* The old side-list plus editor plus integration split is gone; the detail Edit */
/* tab keeps the workbench full width and the Code tab keeps the guide full width. */
.definition-panel { min-width: 0; }
.integration-guide { min-width: 0; position: sticky; top: 72px; padding: .75rem; }
.integration-guide > p, .integration-guide .muted { font-size: .82rem; line-height: 1.5; margin: .25rem 0 .5rem; }
.integration-guide .notice { padding: .5rem .75rem; margin: .5rem 0; font-size: .82rem; }
.integration-guide .copy-row { flex-direction: column; }
.integration-guide .copy-row pre { width: 100%; }
.definition-heading { position: static; }
.workbench-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 16px 0; overflow-x: auto; }
.workbench-tabs button { background: transparent; color: var(--muted); border: 0; border-radius: 0; padding: 9px 14px; white-space: nowrap; box-shadow: none; }
.workbench-tabs button[aria-selected="true"] { color: var(--accent-fg); background: transparent; border-radius: 0; box-shadow: inset 0 -2px var(--accent); }
.workbench-tabs button:hover { color: var(--text); background: var(--surface-2); border-radius: 0; }
[hidden] { display: none !important; }
.source-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 6px; }
.source-heading label { margin: 0; }
.source-heading span, #editor-state { font-size: 12px; }
.source-editor { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--code-bg); }
.source-editor:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.source-editor textarea.code-editor, .source-editor pre.source-highlight { margin: 0; padding: 16px; border: 0; border-radius: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.65; letter-spacing: normal; tab-size: 2; white-space: pre; overflow-wrap: normal; word-break: normal; box-sizing: border-box; }
.source-editor textarea.code-editor, .source-editor pre.source-highlight { padding-left: 64px; }
.source-lines { position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: 48px; padding: 16px 0; overflow: hidden; background: var(--code-bg); border-right: 1px solid var(--border); color: var(--muted); text-align: right; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.source-lines > div { height: 21.45px; line-height: 21.45px; font-size: 11px; padding-right: 10px; cursor: pointer; }
.source-lines > div:hover, .source-lines > div[aria-selected="true"] { background: var(--surface-2); color: var(--accent-fg); }
.source-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin: 8px 0; }
.source-actions > span { margin-right: auto; font-size: 12px; }
.source-actions > button { min-height: 28px; padding: 3px 9px; font-size: 12px; }
.table-sort { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 0; background: transparent; color: inherit; border: 0; font-size: inherit; font-weight: inherit; border-radius: var(--radius-sm); white-space: normal; text-align: left; box-shadow: none; }
.table-sort:hover { background: transparent; color: var(--text); }
.table-sort-marker { color: var(--muted); font-size: 12px; }
th[aria-sort="ascending"] .table-sort, th[aria-sort="descending"] .table-sort { color: var(--accent-fg); }
.table-sort-help { color: var(--muted); font-size: 12px; margin: 0 0 8px; }
.source-editor textarea.code-editor { position: relative; display: block; width: 100%; min-height: 360px; resize: vertical; background: transparent; color: transparent; caret-color: var(--text); -webkit-text-fill-color: transparent; outline: none; box-shadow: none; }
.source-editor textarea.record-editor { min-height: 260px; }
.source-editor textarea.manage-input { min-height: 180px; }
/* The textarea text is transparent, so the highlighted tokens underneath show through the tint. */
.source-editor textarea.code-editor::selection { background: var(--selection-bg); -webkit-text-fill-color: transparent; }
.source-editor pre.source-highlight { position: absolute; inset: 0; color: var(--text); pointer-events: none; overflow: hidden; max-height: none; background: transparent; }
.source-editor.raw-source textarea.code-editor { color: var(--text); -webkit-text-fill-color: var(--text); }
.source-editor.raw-source textarea.code-editor::selection { background: var(--selection-bg); -webkit-text-fill-color: var(--text); }
.source-editor.raw-source .source-highlight { visibility: hidden; }
.syntax-keyword { color: var(--syn-keyword); }
.syntax-string { color: var(--syn-string); }
.syntax-number { color: var(--syn-number); }
.syntax-boolean { color: var(--syn-boolean); }
.syntax-comment { color: var(--syn-comment); font-style: italic; }
.syntax-property { color: var(--syn-property); }
.syntax-function { color: var(--syn-function); }
.syntax-type { color: var(--syn-type); }
.syntax-variable { color: var(--syn-variable); }
.syntax-operator { color: var(--syn-operator); }
.syntax-punctuation { color: var(--syn-punctuation); }
.syntax-template { color: var(--syn-template); }
.syntax-regex { color: var(--syn-regex); }
.syntax-builtin { color: var(--syn-builtin); }
.syntax-api { color: var(--syn-api); }
.integration-guide .copy-row { position: relative; display: flex; align-items: flex-start; gap: 8px; }
.integration-guide .copy-row pre { flex: 1; min-width: 0; max-height: 420px; margin: 0; padding: .6rem 4.25rem .6rem .75rem; font-size: 12.5px; line-height: 1.6; }
.integration-guide .copy-row button { position: absolute; top: .4rem; right: .4rem; flex-shrink: 0; }
/* Page-level resource tabs are links so they work without JavaScript. */
.resource-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 0 0 1rem; overflow-x: auto; }
.resource-tabs a { color: var(--muted); text-decoration: none; padding: 9px 14px; border-radius: 0; white-space: nowrap; }
.resource-tabs a[aria-current="page"] { color: var(--accent-fg); background: transparent; border-radius: 0; box-shadow: inset 0 -2px var(--accent); }
.resource-tabs a:hover { color: var(--text); background: var(--surface-2); border-radius: 0; }
.stat-tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.stat-tiles strong { font-variant-numeric: tabular-nums; }
.preview-stats p { display: flex; justify-content: space-between; gap: .5rem; margin: .25rem 0; }
.preview-stats strong { font-variant-numeric: tabular-nums; }
td.actions { white-space: nowrap; }
#resource-filter { max-width: 28rem; }
.resource-list input[type="search"] { margin-bottom: 10px; }
.resource-list ul { max-height: 65vh; overflow-y: auto; }
#definition-examples .example { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none; padding: 16px 0; }
#definition-examples .example:last-child { border-bottom: 0; }
.editor-shortcuts { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; margin: 8px 0; color: var(--muted); }
@media (max-width: 700px) { .source-editor textarea.code-editor { min-height: 300px; } .integration-guide .copy-row { flex-direction: column; } .integration-guide .copy-row pre { width: 100%; } .editor-shortcuts { flex-wrap: wrap; } }
@media (forced-colors: active) { .source-editor textarea.code-editor { color: CanvasText; -webkit-text-fill-color: CanvasText; } .source-highlight { display: none; } }
@media (max-width: 1250px) { .integration-guide { position: static; } }
@media (max-width: 760px) { .source-actions > button, .table-sort { min-height: 44px; } }
/* Stat strip: one bordered panel with hairline dividers, never separate cards. */
.stat-strip { display: grid; gap: 1px; margin: 0 0 .25rem; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--border); overflow: hidden; }
.stat-strip.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-strip.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-strip.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-strip > div { background: var(--card); padding: .65rem .9rem; min-width: 0; }
.stat-strip dt { font-size: .76rem; color: var(--muted); }
.stat-strip dd { margin: .15rem 0 0; font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-strip dd.zero, .stat-strip dd.muted-value { color: var(--muted); font-weight: 400; }
.stat-strip-caption { margin: .4rem 0 1rem; font-size: .8rem; }
/* Definition outline: left-aligned summary shared by detail and quick preview. */
.outline h3 { font-size: .9rem; margin: 1.1rem 0 .35rem; }
.outline h3:first-child { margin-top: 0; }
.outline > p { font-size: .88rem; }
ol.pipeline { margin: .35rem 0 0; padding-left: 1.4rem; }
ol.pipeline > li { padding: .4rem 0; border-bottom: 1px solid var(--border); }
ol.pipeline > li > * + * { margin-left: .5rem; }
.pipeline-target { color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }
table.outline-table { margin-top: .35rem; }
dl.outline-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .3rem .9rem; margin: .35rem 0 0; font-size: .88rem; }
dl.outline-facts dt { color: var(--muted); }
dl.outline-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
/* Resource list toolbar and table tune-ups. */
.resource-toolbar { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.resource-toolbar input[type="search"] { flex: 1 1 auto; max-width: 28rem; margin-top: 0; }
.resource-count { margin: 0 0 0 auto; white-space: nowrap; }
.resource-name > a { font-weight: 700; }
.resource-id { display: block; margin-top: .15rem; }
.resource-id code { color: var(--muted); }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.num.zero { color: var(--muted); }
td.resource-row-actions { text-align: right; }
.resource-row-actions.actions { justify-content: flex-end; flex-wrap: nowrap; }
/* The sort helper stays for screen readers; the toolbar already explains the table. */
.table-sort-help { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Quick preview dialog reads at 720px and scrolls inside on small screens. */
dialog#quick-preview { width: min(720px, calc(100vw - 2rem)); }
#quick-preview .copy-row { display: flex; align-items: flex-start; gap: .5rem; }
#quick-preview .copy-row pre { flex: 1; min-width: 0; }
@media (max-width: 760px) { .stat-strip.cols-3, .stat-strip.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }