/* Shared presentation primitives, loaded after feature styles in every surface.
   Feature styles still own layout and state. These rules do not hide evidence,
   change image crops, or restyle unclassified interactive controls. */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body { font-family: var(--font-ui); color: var(--ink); background: var(--canvas); }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
::selection { color: var(--ink); background: var(--accent-soft); }
:where(button, input, select, textarea, summary, a) { touch-action: manipulation; }
:where(button, input, select, textarea, summary, a):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
:where(button, input, select, textarea):disabled { cursor: not-allowed; }
a { text-underline-offset: 3px; }
:where(h1, h2, h3, h4) { text-wrap: pretty; }
:where(pre, code) { font-family: var(--font-code); }

/* A single control scale. Keep primary, secondary and destructive actions distinct. */
:is(.primary, .secondary, .ghost, .danger, .auth-button, .auth-form button, .report-tools-actions > button, .report-utility > button) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--control-height); padding: 8px 14px; border-radius: var(--radius-control);
  font: 600 var(--text-control)/1.45 var(--font-ui); text-decoration: none;
  box-shadow: none; cursor: pointer; transition: background-color .15s, border-color .15s;
}
:is(.primary, .auth-button, .auth-form button) { border: 1px solid var(--accent); color: var(--on-accent); background: var(--accent); }
html[data-theme="dark"] :is(.primary, .auth-button, .auth-form button) { color: var(--on-accent); }
:is(.secondary, .report-tools-actions > button, .report-utility > button) { border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); }
.ghost { border: 1px solid transparent; background: transparent; color: var(--ink); font-weight: 500; }
.danger { border: 1px solid color-mix(in srgb, var(--red) 35%, var(--line)); background: var(--red-soft); color: var(--red); }
:is(.primary, .auth-button, .auth-form button):hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); }
:is(.secondary, .report-tools-actions > button, .report-utility > button):hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.ghost:hover:not(:disabled) { border-color: transparent; background: var(--paper-2); color: var(--ink); }
.ghost[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.danger:hover:not(:disabled) { border-color: var(--red); }
:is(.primary, .secondary, .ghost, .danger, .auth-button, .auth-form button):disabled { opacity: .5; cursor: not-allowed; }
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]), select, textarea) {
  min-width: 0; max-width: 100%; min-height: var(--control-height); padding: 8px 11px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-control);
  background-color: var(--paper); color: var(--ink); font: 400 var(--text-control)/1.5 var(--font-ui);
}
textarea { resize: vertical; }
::placeholder { color: var(--muted); opacity: .85; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
input:disabled, select:disabled, textarea:disabled { color: var(--muted); background-color: var(--paper-2); opacity: .75; }

/* Reading components are identical inside the workspace and exported files. */
:is(.node-reading-dialog, .workspace-read-dialog, .asset-dialog, .dialog-card, .it-dialog, .dx-dialog, .retrieval-cache-dialog) {
  border-color: var(--line); border-radius: 16px; box-shadow: var(--shadow-dialog); color: var(--ink); background: var(--paper);
}
dialog::backdrop { background: #0d172d80; backdrop-filter: blur(3px); }
dialog { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
.dialog-head > button { flex-shrink: 0; min-width: 36px; min-height: 36px; }
:is(.dialog-head, .workspace-dialog-head, .node-reading-dialog-head) { gap: 16px; }
:is(.dialog-head, .workspace-dialog-head, .node-reading-dialog-head) > div { min-width: 0; }
:is(.node-reading-dialog-body, .workspace-dialog-body, .asset-detail-content, .knowledge-reader) { font-size: var(--text-body); line-height: 1.8; }
:is(.node-reading-dialog-body, .workspace-dialog-body) pre { font-size: 12px; line-height: 1.8; background: var(--paper-2); }
.node-reading-dialog-nav button { min-height: 36px; font-size: var(--text-control); }
.node-reading-dialog-nav [aria-current="page"] { border-color: transparent; background: var(--accent-soft); }
.node-reading-dialog-body :is(h3, h4) { margin-top: 0; }
.node-business-reading { gap: 24px; }
.node-business-reading > p { margin: 0; }
.node-photo-score { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--paper); }
.node-photo-score h4 { font-size: 16px; line-height: 1.6; margin-bottom: 8px; }
.node-photo-score > p { margin-block: 8px; }
.node-photo-score .node-reading-table th:first-child { width: 12%; }
.node-photo-score .node-reading-table th:nth-child(2) { width: 10%; }
.node-reading-table th { color: var(--muted); background: var(--paper-2); }
.node-reading-table :is(th, td) { line-height: 1.75; }
.node-cost-calculation { padding: 16px; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-control); }
.node-cost-calculation h4 { margin-bottom: 10px; }
.node-cost-calculation p { margin: 6px 0; font-size: 13px; }
.node-context-button, .node-purpose-entry > .node-context-button { border-radius: var(--radius-control); }
.node-context-button:not(:disabled):hover { border-color: var(--line-strong); }
.run-overview, .dx-run-stages > .dx-stage { border-radius: var(--radius-panel); }
.node-resource-metric > span, .node-resource-note { font-size: var(--text-caption); }

/* Tables may scroll inside their own surface; the document never clips data. */
:is(.costs-table-wrap, .space-table-wrap, .node-reading-table-wrap) { min-width: 0; overscroll-behavior-inline: contain; }
:is(.costs-table, .space-table) { font-size: var(--text-control); }
:is(.costs-table, .space-table) th { font-weight: 600; color: var(--muted); background: var(--paper-2); }
:is(.costs-table, .space-table) :is(th, td) { padding: 12px 14px; line-height: 1.6; }
:is(.costs-table, .space-table) tbody th { color: var(--ink); background: var(--paper); }
:is(.costs-table, .space-table) tbody tr:hover > :is(th, td) { background: var(--paper-2); }
:is(.costs-table-wrap, .space-table-wrap) { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
:is(.empty, .run-empty-state, .page-region-placeholder) { color: var(--muted); font-size: var(--text-control); line-height: 1.75; }
:is(.page-region-status, .detail-local-loading, .detail-local-error) { border-radius: var(--radius-control); font-size: var(--text-control); }

@media (max-width: 600px) {
  :root { --page-gutter: 16px; --control-height: 44px; }
  /* A 16px input prevents mobile Safari zoom without enlarging surrounding copy. */
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]), select, textarea) { font-size: 16px; }
  .dialog-head > button { min-width: 44px; min-height: 44px; }
  .node-photo-score { padding: 14px; }
  .node-photo-score .node-reading-table tr { padding-inline: 0; }
  .node-reading-dialog-nav button { min-height: 40px; font-size: 13px; }
  :is(.primary, .secondary, .ghost, .danger, .auth-button, .auth-form button) { padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print {
  :root, html[data-theme="dark"] {
    --canvas: #fff; --paper: #fff; --paper-2: #f1f3f5; --ink: #202938; --muted: #515d6f;
    --line: #d2d7df; --line-strong: #b6beca; --accent: #264aab; --accent-soft: #edf2ff;
    --green: #17633f; --green-soft: #edf5ef; --red: #992c29; --red-soft: #f9eeee;
    --amber: #755113; --amber-soft: #faf3e6; --shadow: none; color-scheme: light;
  }
  html { scrollbar-gutter: auto; }
  :focus-visible { outline: none !important; }
  body { color: var(--ink); background: #fff; }
  .report-utility, .report-tools, .workspace-menu-toggle, .workspace-nav-backdrop { display: none !important; }
  .node-photo-score { box-shadow: none; break-inside: auto; }
  .node-photo-score h4 { break-after: avoid; }
  .node-reading-table tr { break-inside: avoid; }
  dialog { display: none !important; }
}

/* Reusable control and toolbar contract. Dense tables keep a smaller scale. */
:root { --control-height-compact:34px; --text-control-compact:13px; }
html[data-ui-surface="workspace"] :is(.asset-filterbar, .asset-look-toolbar, .run-filter-bar, .space-filters, .costs-toolbar) { gap:12px; align-items:center; }
html[data-ui-surface="workspace"] :is(.asset-filterbar, .asset-look-toolbar, .run-filter-bar, .space-filters, .costs-toolbar) :is(input:not([type="checkbox"]):not([type="radio"]), select) { min-height:var(--control-height); border-radius:var(--radius-control); font-size:var(--text-control); }
html[data-ui-surface="workspace"] .space-filters { align-items:end; }
html select:not([multiple]):not([size]) {
  appearance:none; padding-right:32px;
  background-image:linear-gradient(45deg,transparent 48%,var(--muted) 50%,var(--muted) 70%,transparent 72%),linear-gradient(-45deg,transparent 48%,var(--muted) 50%,var(--muted) 70%,transparent 72%);
  background-size:5px 6px; background-repeat:no-repeat; background-position:right 14px center,right 10px center;
}
html[data-ui-surface="workspace"] .workspace-workflow select { min-height:var(--control-height); padding:8px 32px 8px 11px; border:1px solid var(--line-strong); border-radius:var(--radius-control); font-size:var(--text-control); }
html[data-ui-surface="workspace"] .workspace-workflow-menu { border-color:var(--line-strong); border-radius:var(--radius-control); font-size:var(--text-control); box-shadow:var(--shadow-dialog); }
html[data-ui-surface="workspace"] .workspace-workflow-menu [role="option"] { min-height:var(--control-height); display:flex; align-items:center; padding:8px 10px; border-radius:6px; }
html[data-ui-surface="workspace"] .prompt-section-tabs { gap:8px; margin-bottom:16px; }
html[data-ui-surface="workspace"] :is(.prompt-section-tabs, .asset-segments) button { min-height:var(--control-height-compact); border-radius:var(--radius-control); font-size:var(--text-control-compact); line-height:1.5; }
html[data-ui-surface="workspace"] :is(.prompt-section-tabs button.active, .asset-segments button[aria-pressed="true"]) { background:var(--accent-soft); color:var(--accent); border-color:var(--accent); font-weight:600; }
:is(.space-dialog, .space-selection) .danger { color:var(--red); background:var(--red-soft); border-color:color-mix(in srgb,var(--red) 35%,var(--line)); }
/* Compact pagination is shared by the library, experiments, pickers and storage. */
:is(.asset-pager, .space-pagination) { display:flex; align-items:center; flex-wrap:wrap; gap:8px; min-width:0; font-variant-numeric:tabular-nums; }
:is(.asset-pager, .space-pagination) > button, .asset-pager-numbers .asset-pager-page-number { min-width:var(--control-height-compact); height:var(--control-height-compact); min-height:var(--control-height-compact); padding:6px 10px; border:1px solid var(--line-strong); border-radius:var(--radius-control); color:var(--ink); background:var(--paper); font:500 var(--text-control-compact)/1.4 var(--font-ui); }
.asset-pager-numbers { display:flex; align-items:center; gap:4px; padding:0; border:0; background:transparent; }
.asset-pager-numbers .asset-pager-page-number { border-color:transparent; }
.asset-pager-numbers .asset-pager-page-number[aria-current="page"] { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); font-weight:650; }
:is(.asset-pager, .space-pagination) button:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
:is(.asset-pager, .space-pagination) button:disabled { opacity:.45; cursor:not-allowed; }
:is(.asset-pager-size, .asset-pager-jump) { gap:6px; font:400 12px/1.5 var(--font-ui); color:var(--muted); white-space:nowrap; }
.asset-pager .asset-pager-size select, .asset-pager .asset-pager-jump input { min-height:var(--control-height-compact); height:var(--control-height-compact); border-radius:var(--radius-control); font-size:var(--text-control-compact); }
.asset-pager .asset-pager-size select { width:70px; padding:6px 27px 6px 9px; background-position:right 11px center,right 7px center; }
.asset-pager .asset-pager-jump input { width:56px; padding:6px; }
.asset-pager-summary { position:static; width:auto; height:auto; margin:0; padding:0; overflow:visible; clip:auto; color:var(--muted); font-size:12px; }
.asset-pager-footer { align-items:center; flex-wrap:wrap; gap:12px 20px; }
.asset-pager-footer > span { color:var(--muted); font-size:12px; }
html[data-ui-surface="workspace"] .prompt-document-list { gap:12px; }
html[data-ui-surface="workspace"] .workflow-node-settings > footer { padding:10px 20px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); }
html[data-ui-surface="workspace"] .report-history-head { display:flex; align-items:center; gap:8px; }
html[data-ui-surface="workspace"] .report-history-head h3 { margin:0; font-size:16px; }
html[data-ui-surface="workspace"] .report-history-head > .secondary { margin-left:auto; }
/* Help stays visually compact while keeping a usable touch target. */
.ui-help-popover header span { font-size:13px; color:var(--ink); }
.ui-help-popover .ui-help-body { font-size:13px; line-height:1.8; }
.ui-help-popover { width:min(380px,calc(100vw - 24px)); }
@media(max-width:600px) {
 :root { --control-height-compact:44px; --text-control-compact:14px; }
 html[data-ui-surface="workspace"] .workspace-workflow select,
 .asset-pager .asset-pager-size select, .asset-pager .asset-pager-jump input { min-height:44px; font-size:16px; }
 html[data-ui-surface="workspace"] :is(.asset-filterbar, .asset-look-toolbar, .run-filter-bar, .space-filters, .costs-toolbar) :is(input:not([type="checkbox"]):not([type="radio"]), select) { font-size:16px; }
 .asset-pager-footer .asset-pager { justify-content:flex-start; gap:8px; }
 .asset-pager-numbers { max-width:100%; flex-wrap:wrap; }
 .asset-pager-numbers .asset-pager-page-number { min-width:36px; padding-inline:8px; }
 .asset-pager-summary { flex-basis:100%; }
 .ui-help-popover { width:calc(100vw - 24px); }
}
@media(forced-colors:active) { html select:not([multiple]):not([size]) { appearance:auto; background-image:none; } }

/* Modal button rules must not stretch the shared circular help affordance. */
button.ui-help-button, .dx-dialog button.ui-help-button, .ui-help-heading button.ui-help-button {
 width:24px; height:24px; min-width:24px; min-height:24px; padding:0; border-radius:50%; flex:none;
}
button.ui-help-button.ui-help-compact { width:22px; height:22px; min-width:22px; min-height:22px; }
.dx-footer > .dx-actions { margin-left:auto; }