/* UQL page (uql.html). Shared tokens come from tokens.css, shared components from styles.css.
   Page surfaces are page tokens below, with their light values at the end of this file.
   Motion on this page: the shared hero entrance and heading reveal, the workbench tab fade and
   sliding indicator, and the run-once code reveal (uql.js). Nothing else moves. */

.uql-page {
  --uql-wb: #131c16;            /* workbench body */
  --uql-wb-bar: var(--surface-1); /* workbench title bar, tabs and footer */
  --uql-wb-code: #101813;       /* code column */
  --uql-tab-on: #1f2c20;        /* selected tab */
  --uql-code-ink: #c3ddad;      /* code text */
  --uql-chip: #233020;          /* inline code and command chips */
  --uql-band: #19241c;          /* agent band */
  --uql-band-2: #151e17;        /* availability band */
  --uql-card: #1b2a1f;          /* flow steps, note, cards */
  --uql-card-strong: #21311f;   /* the bundle card */
  --uql-card-strong-line: #4e6841;
}

/* ---------- Hero ---------- */
.uql-hero { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 60px; padding-block: 72px var(--s-7); align-items: end; }
.uql-hero-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin: 0 0 var(--s-5); }
.uql-hero-status .label { font-size: 13px; color: var(--green); }
.uql-hero-status .status-dot { margin-right: 0; }
.uql-hero-name { font-size: var(--step--1); color: var(--muted); }
.uql-hero h1 { font-size: clamp(2.5rem, 1.5rem + 5vw, 5.625rem); font-weight: 400; line-height: 1.06; margin: 0 0 var(--s-5); }
.uql-hero-lead { max-width: 62ch; margin: 0; font-size: var(--step-0); line-height: 1.7; color: var(--text-soft); }
.uql-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) 28px; margin-top: var(--s-6); }
.uql-hero-note { display: flex; flex-direction: column; justify-content: flex-end; align-self: stretch; padding-left: 26px; border-left: 1px solid var(--frame-line); }
.uql-wordmark { align-self: flex-start; margin-bottom: 36px; font: 86px/1 var(--mono); letter-spacing: -.2em; color: var(--green-40); }
.uql-hero-note-lead { margin: 0 0 var(--s-3); font-size: var(--step-0); font-weight: 500; line-height: 1.45; color: var(--paper-heading); }
.uql-hero-note > p:last-child { margin: 0; font-size: var(--step--1); line-height: 1.6; color: var(--muted); }

/* Status chip, used for real status words only */
.uql-preview-label { display: inline-block; align-self: flex-start; padding: 4px 8px; border: 1px solid var(--frame-line); border-radius: var(--radius-1); background: var(--surface-2); font: 400 var(--label)/1.5 var(--mono); letter-spacing: .02em; color: var(--accent-soft); white-space: nowrap; }

/* Find, Check, Trace, Review */
.uql-scope-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); padding: 22px 0 30px; border-bottom: 1px solid var(--line); }
.uql-scope-title { margin: 0 auto 0 0; font-size: var(--step--1); color: var(--muted); }
.uql-scope-strip ol { display: flex; flex-wrap: wrap; align-items: center; row-gap: var(--s-2); margin: 0; padding: 0; list-style: none; font-size: 15px; color: var(--text-soft); }
.uql-scope-strip li + li::before { content: ''; display: inline-block; width: 20px; height: 1px; margin: 0 var(--s-3); background: var(--line-strong); vertical-align: middle; }

/* ---------- Section headings ---------- */
.uql-examples, .uql-capabilities, .uql-guide { padding-block: 76px; }
.uql-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 50px; margin-bottom: 36px; }
.uql-kicker { margin: 0 0 var(--s-4); font-size: var(--step--1); font-weight: 500; line-height: 1.5; color: var(--accent-soft); }
.uql-section-heading h2 { font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3.25rem); }
.uql-section-heading > p { max-width: 38ch; margin: 0 0 4px; font-size: var(--step-0); line-height: 1.65; color: var(--text-soft); }

/* ---------- Example workbench ---------- */
.uql-workbench { overflow: hidden; border: 1px solid var(--frame-line); border-radius: var(--radius-2); background: var(--uql-wb); box-shadow: var(--shadow-3); }
.uql-workbench-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 14px 22px; border-bottom: 1px solid var(--dark-line); background: var(--uql-wb-bar); }
.uql-workbench-title { font-size: var(--step--1); font-weight: 500; color: var(--paper-heading); }

.uql-example-tabs { position: relative; display: flex; border-bottom: 1px solid var(--dark-line); background: var(--uql-wb-bar); }
.uql-example-tabs button { flex: 1; display: flex; align-items: center; min-height: 56px; padding: 14px 25px; border-bottom: 2px solid transparent; background: transparent; font-size: 14px; font-weight: 500; line-height: 1.3; text-align: left; color: var(--muted); transition: background-color var(--dur-in) var(--ease-ui), color var(--dur-in) var(--ease-ui); }
.uql-example-tabs button[aria-selected="true"] { background: var(--uql-tab-on); color: var(--white); }
.uql-example-tabs:not(:has(.uql-tab-indicator)) button[aria-selected="true"] { border-bottom-color: var(--green); }
.uql-example-tabs button:focus-visible { outline-offset: -5px; }
.uql-tab-indicator { position: absolute; left: 0; bottom: -1px; width: 1px; height: 2px; background: var(--green); transform-origin: 0 50%; transform: scaleX(0); opacity: 0; pointer-events: none; }
.uql-example-tabs.has-indicator .uql-tab-indicator { transition: transform var(--dur-panel) var(--ease-ui), opacity var(--dur-in) var(--ease-ui); }

.uql-example-panel { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); min-height: 330px; }
.uql-example-panel + .uql-example-panel { border-top: 1px solid var(--dark-line); }
html.js .uql-example-panel + .uql-example-panel { border-top: 0; }
.uql-code-column { display: flex; flex-direction: column; min-width: 0; padding: 22px 25px 25px; border-right: 1px solid var(--dark-line); background: var(--uql-wb-code); }
.uql-code-label { display: flex; justify-content: space-between; align-items: center; gap: 15px; min-height: 32px; font: 400 var(--label)/1.5 var(--mono); letter-spacing: var(--track-label); color: var(--muted); }
.uql-code-meta { display: flex; align-items: center; gap: var(--s-3); }
.uql-code-column pre { flex: 1; margin: 0; padding: 18px 0 21px; overflow: auto; white-space: pre; font: 13px/2 var(--mono); color: var(--uql-code-ink); scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.uql-code-column pre code { font: inherit; }
.uql-code-note { margin: 0; padding-top: 16px; border-top: 1px solid var(--dark-line); font-size: var(--step--1); line-height: 1.65; color: var(--muted); }
.uql-result-column { min-width: 0; padding: 28px 28px 23px; }
.uql-result-kicker { margin: 0 0 var(--s-3); font-size: var(--step--1); font-weight: 500; color: var(--accent-soft); }
.uql-result-column h3 { margin: 0 0 14px; font-size: var(--step-2); font-weight: 500; line-height: 1.25; letter-spacing: var(--track-h2); color: var(--paper-heading); }
.uql-result-column > p:not(.uql-result-kicker) { margin: 0 0 21px; font-size: var(--step-0); line-height: 1.65; color: var(--text-soft); }
.uql-result-column ol { margin: 0; padding: 0; list-style: none; }
.uql-result-column li { display: flex; gap: 14px; padding: 13px 0; border-top: 1px solid var(--dark-line); }
.uql-result-column li > span { flex: none; padding-top: 2px; font: 400 var(--label)/1.6 var(--mono); color: var(--accent-soft); }
.uql-result-column li strong { font-size: 15px; font-weight: 500; color: var(--paper-heading); }
.uql-result-column li p { margin: 4px 0 0; font-size: var(--step--1); line-height: 1.6; color: var(--muted); }
.uql-workbench-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s-2) 20px; padding: 12px 22px; border-top: 1px solid var(--dark-line); background: var(--uql-wb-bar); font-size: var(--step--1); line-height: 1.6; color: var(--muted); }
.uql-workbench-footer .uql-preview-label { margin-left: var(--s-2); vertical-align: 1px; }

/* Copy button (copy.js puts it in the code label row) */
.copy-button { position: relative; display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-1); background: transparent; font: 500 13px/1 var(--font); letter-spacing: 0; color: var(--text-soft); transition: transform var(--dur-in) var(--ease-ui), background-color var(--dur-in) var(--ease-ui), border-color var(--dur-in) var(--ease-ui), color var(--dur-in) var(--ease-ui); }
.copy-button::after { content: ''; position: absolute; inset: -6px -4px; }
.copy-button:active { transform: scale(.97); transition-duration: var(--dur-press); }
.copy-button.is-copied { border-color: var(--green-40); color: var(--green); }
.copy-button:focus-visible { background: var(--hover-fill); color: var(--white); }
@media (hover: hover) and (pointer: fine) {
  .uql-example-tabs button:hover { background: var(--hover-fill); color: var(--white); }
  .copy-button:hover { background: var(--hover-fill); border-color: var(--green-40); color: var(--white); }
}

/* Tab switch: the shown panel fades in once. Run once: code lines, then steps (uql.js arms and ends it). */
@keyframes uql-panel-in { from { opacity: 0; } }
@keyframes uql-line-in { from { opacity: 0; translate: -6px 0; } }
@keyframes uql-step-light { from { opacity: .35; } }
@media (prefers-reduced-motion: no-preference) {
  html.js .uql-example-panel.is-entering { animation: uql-panel-in 200ms var(--ease-out); }
  /* inline-block only during the run (translate needs a box); afterwards the lines are plain text again */
  html.js .uql-workbench.is-armed .uql-code-line { display: inline-block; }
  html.js .uql-workbench.is-armed:not(.is-running) .uql-code-line { opacity: 0; }
  html.js .uql-workbench.is-armed:not(.is-running) .uql-result-column li { opacity: .35; }
  html.js .uql-workbench.is-running .uql-code-line { animation: uql-line-in 260ms var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 90ms); }
  html.js .uql-workbench.is-running .uql-result-column li { animation: uql-step-light 320ms var(--ease-out) backwards; animation-delay: calc(var(--n, 0) * 90ms + 460ms + var(--k, 0) * 180ms); }
}
@media print {
  .uql-code-line, .uql-result-column li { opacity: 1 !important; animation: none !important; }
  .copy-button { display: none; }
}

/* ---------- What UQL does ---------- */
.uql-capabilities { padding-top: 4px; }
.uql-capability-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.uql-capability-grid article { display: flex; flex-direction: column; padding: 31px 30px 30px 0; border-bottom: 1px solid var(--line); }
.uql-capability-grid article:nth-child(3n+2), .uql-capability-grid article:nth-child(3n) { padding-left: 28px; border-left: 1px solid var(--line); }
.uql-card-kicker { font-size: var(--step--1); font-weight: 500; color: var(--accent-soft); }
.uql-capability-grid h3 { margin: var(--s-4) 0 var(--s-3); font-size: var(--step-1); font-weight: 500; line-height: 1.35; letter-spacing: -.01em; color: var(--paper-heading); }
.uql-capability-grid p { flex: 1; margin: 0 0 var(--s-5); font-size: var(--step-0); line-height: 1.65; color: var(--text-soft); }
.uql-command-tag { display: flex; flex-wrap: wrap; gap: 6px; }
.uql-command-tag > * { padding: 2px 7px; border-radius: var(--radius-1); background: var(--uql-chip); font: 400 var(--label)/1.6 var(--mono); letter-spacing: .02em; color: var(--accent-soft); }

/* ---------- Work with your agent ---------- */
.uql-agent-section { background: var(--uql-band); border-block: 1px solid var(--dark-line); }
.uql-agent-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-9); padding-block: 70px; }
.uql-agent-layout h2 { font-size: clamp(2.25rem, 1.9rem + 1.2vw, 2.75rem); line-height: 1.15; }
.uql-agent-copy > p { max-width: 44ch; margin: 27px 0 var(--s-4); font-size: var(--step-0); line-height: 1.7; color: var(--text-soft); }
.uql-agent-flow ol { margin: 0; padding: 0; list-style: none; }
.uql-agent-flow li { position: relative; padding: 18px 20px 17px 56px; border: 1px solid var(--frame-line); border-radius: var(--radius-1); background: var(--uql-card); }
.uql-agent-flow li + li { margin-top: var(--s-5); }
.uql-agent-flow li + li::before { content: ''; position: absolute; left: 27px; top: calc(-1 * var(--s-5) - 1px); width: 1px; height: var(--s-5); background: var(--line-strong); }
.flow-number { position: absolute; left: 19px; top: 20px; font: 400 var(--label)/1.6 var(--mono); color: var(--accent-soft); }
.uql-agent-flow strong { font-size: 15px; font-weight: 500; color: var(--paper-heading); }
.uql-agent-flow li p { margin: 6px 0 0; font-size: var(--step--1); line-height: 1.6; color: var(--muted); }
.uql-agent-note { margin: 18px 0 0; font-size: var(--step--1); line-height: 1.6; color: var(--muted); }

/* ---------- A first workflow ---------- */
.uql-guide-steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.uql-guide-steps > li { display: grid; grid-template-columns: 70px 1fr; gap: 20px; padding: 25px 0; border-bottom: 1px solid var(--line); }
.uql-guide-steps > li > span { padding-top: 4px; font: 400 13px var(--mono); color: var(--accent-soft); }
.uql-guide-steps h3 { margin: 0 0 10px; font-size: var(--step-1); font-weight: 500; letter-spacing: -.01em; color: var(--paper-heading); }
.uql-guide-steps p { max-width: 70ch; margin: 0; font-size: var(--step-0); line-height: 1.7; color: var(--text-soft); }
.uql-guide-steps code { padding: 2px 5px; border-radius: 2px; background: var(--uql-chip); font: .875em var(--mono); color: var(--uql-code-ink); }
.uql-guide-steps strong { font-weight: 500; color: var(--paper-heading); }
.uql-guide-note { margin-top: 25px; padding: 19px 23px; border-left: 2px solid var(--green); background: var(--uql-card); font-size: 15px; line-height: 1.6; color: var(--paper-heading); }
.uql-guide-note strong { font-weight: 500; }
.uql-guide-note p { max-width: var(--measure); margin: 6px 0 0; font-size: 15px; line-height: 1.7; color: var(--text-soft); }

/* ---------- UQL and UDB ---------- */
.uql-suite-section { padding-block: 70px; background: var(--uql-band-2); border-block: 1px solid var(--dark-line); }
.uql-suite-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.uql-suite-card { display: flex; flex-direction: column; padding: 29px; border: 1px solid var(--frame-line); border-radius: var(--radius-2); background: var(--uql-card); }
.uql-suite-bundle { background: var(--uql-card-strong); border-color: var(--uql-card-strong-line); }
.uql-suite-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: 28px; }
.uql-suite-name { font-size: 24px; font-weight: 600; letter-spacing: -.04em; color: var(--paper-heading); }
.uql-suite-name > span { color: var(--green); }
.uql-suite-card h3 { margin: 0 0 19px; font-size: var(--step-2); font-weight: 400; line-height: 1.18; letter-spacing: var(--track-h2); color: var(--paper-heading); }
.uql-suite-card > p { max-width: 42ch; margin: 0; font-size: var(--step-0); line-height: 1.7; color: var(--text-soft); }
.uql-suite-card ul { flex: 1; margin: 23px 0; padding: 21px 0; border-top: 1px solid var(--frame-line); list-style: none; font-size: 15px; line-height: 1.6; color: var(--paper-heading); }
.uql-suite-card li { margin: 7px 0; padding-left: 24px; position: relative; }
.uql-suite-card li::before { content: ''; position: absolute; left: 0; top: .8em; width: 12px; height: 1px; background: var(--green); }
.uql-suite-card .button { align-self: flex-start; }
.uql-suite-card small { margin-top: 13px; font-size: var(--step--1); line-height: 1.6; color: var(--muted); }
.uql-suite-bundle small { color: var(--text-soft); }

/* ---------- Questions and closing band ---------- */
.uql-faq .faq-list p { margin-right: 10px; }
.closing-inner .uql-kicker { margin-bottom: 18px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .uql-hero { grid-template-columns: minmax(0, 1fr) 210px; gap: 30px; }
  .uql-hero-note { padding-left: 21px; }
  .uql-example-panel { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .uql-code-column, .uql-result-column { padding: 21px; }
  .uql-agent-layout { gap: 50px; }
  .uql-section-heading { gap: 30px; }
  .uql-scope-title { flex-basis: 100%; }
}
@media (max-width: 800px) {
  .uql-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 48px 31px; }
  .uql-hero-actions { margin-top: var(--s-5); }
  .uql-hero-note { display: block; padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--frame-line); }
  .uql-wordmark { display: none; }
  .uql-examples, .uql-guide { padding-block: 48px; }
  .uql-section-heading { display: block; margin-bottom: 26px; }
  .uql-section-heading > p { max-width: 60ch; margin-top: 20px; }
  .uql-workbench-bar { padding: 12px 15px; gap: 10px; }
  .uql-example-tabs button { justify-content: center; padding: 12px 10px; text-align: center; }
  .uql-example-panel { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .uql-code-column { padding: 18px 20px 20px; border-right: 0; border-bottom: 1px solid var(--dark-line); }
  .uql-result-column { padding: 24px 20px; }
  .uql-workbench-footer { padding: 12px 17px; }
  .uql-capabilities { padding-bottom: 48px; }
  .uql-capability-grid { grid-template-columns: 1fr 1fr; }
  .uql-capability-grid article, .uql-capability-grid article:nth-child(3n+2), .uql-capability-grid article:nth-child(3n) { padding: 25px 20px 25px 0; border-left: 0; }
  .uql-capability-grid article:nth-child(2n) { padding-left: 20px; padding-right: 0; border-left: 1px solid var(--line); }
  .uql-agent-layout { grid-template-columns: 1fr; gap: 33px; padding-block: 48px; }
  .uql-guide-steps > li { grid-template-columns: 35px 1fr; gap: 15px; padding-block: 23px; }
  .uql-suite-section { padding-block: 48px; }
  .uql-suite-grid { grid-template-columns: 1fr; gap: 17px; }
  .uql-suite-card { padding: 24px; }
}
@media (max-width: 560px) {
  .uql-capability-grid { grid-template-columns: 1fr; }
  .uql-capability-grid article, .uql-capability-grid article:nth-child(2n) { padding: 24px 0; border-left: 0; }
}
@media (max-width: 420px) {
  .uql-hero-actions { flex-direction: column; align-items: flex-start; }
  .uql-scope-strip li + li::before { width: 12px; margin-inline: var(--s-2); }
  .uql-example-tabs button { padding-inline: 6px; }
  .uql-code-column, .uql-result-column { padding-inline: 15px; }
  .uql-guide-steps > li { grid-template-columns: 28px 1fr; gap: 10px; }
  .uql-guide-note { padding: 17px 16px; }
  .uql-suite-card { padding: 20px 16px; }
  .uql-suite-top { gap: 10px; }
  .uql-suite-top .uql-preview-label { white-space: normal; }
  .uql-workbench-bar { flex-wrap: wrap; }
}

/* ---------- Light theme for this page ---------- */
:root[data-theme="light"] .uql-page {
  --uql-wb: var(--paper-panel);
  --uql-wb-bar: #e1e6d9;
  --uql-wb-code: #e6eadf;
  --uql-tab-on: #d4e0c9;
  --uql-code-ink: #35563b;
  --uql-chip: #dce5d3;
  --uql-band: #dfe5d7;
  --uql-band-2: #dfe5d7;
  --uql-card: var(--paper-panel);
  --uql-card-strong: #d4e0c9;
  --uql-card-strong-line: #91ab83;
}
:root[data-theme="light"] .uql-workbench { border-color: var(--dark-line); box-shadow: 0 25px 65px -40px rgba(54, 66, 44, .25); }
:root[data-theme="light"] :is(.uql-agent-flow li, .uql-suite-card:not(.uql-suite-bundle), .uql-hero-note) { border-color: var(--dark-line); }
:root[data-theme="light"] .uql-wordmark { color: rgba(63, 108, 72, .55); }
:root[data-theme="light"] .uql-code-column pre { scrollbar-color: #849574 transparent; }
:root[data-theme="light"] .uql-suite-card ul { border-color: #b5c4ab; }
:root[data-theme="light"] .uql-suite-bundle .uql-preview-label { background: var(--paper-panel); }