/* UDB product page (udb.html), loaded after styles.css. Colours on tokens, text at 11px or more,
   letter-spacing in em. Light-theme rules for this page are at the end of this file.
   Motion here: the pinned workflow chapters (one sticky frame, 300ms crossfade), the dialog fade and the FAQ
   answer fade. The hero entrance, reveals and section nav come from motion.js and styles.css. */

/* ---------- Hero: copy on the left, the real window on the right ---------- */
.hero{padding-block:var(--s-8) var(--s-8)}
.hero-copy{min-width:0}
.hero-status{margin:0 0 var(--s-5)}
.hero-status .status-dot{margin-right:0}
.hero h1{font-size:clamp(2.75rem,1.2rem + 5.4vw,5.5rem);font-weight:400;line-height:1.02;margin:0 0 var(--s-5)}
.hero-description{color:var(--text-soft);font-size:var(--step-1);line-height:1.6;max-width:var(--measure);margin:0}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-5);margin-top:var(--s-6)}
.hero-actions .button{margin-right:var(--s-1)}
.play-icon{flex:none;display:grid;place-items:center;width:24px;height:24px;padding-left:1px;border:1px solid var(--line-strong);border-radius:50%;font-size:var(--label);line-height:1}

/* At a glance: one hard fact on the first screen (from the FAQ copy) */
.glance{margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--line);max-width:var(--measure)}
.glance-title{margin:0 0 var(--s-2);font-size:var(--step--1);font-weight:600;color:var(--white)}
.glance-list{display:flex;flex-wrap:wrap;gap:var(--s-2) 0;margin:0;padding:0;list-style:none;font-size:var(--step--1);line-height:1.5;color:var(--text-soft)}
.glance-list li{padding-right:var(--s-4);margin-right:var(--s-4);border-right:1px solid var(--line-strong)}
.glance-list li:last-child{padding-right:0;margin-right:0;border-right:0}
.glance .text-link{margin-top:var(--s-1);font-size:var(--step--1)}

/* Product frame (a dark island in both themes, see themes.css) */
.product-stage{min-width:0;margin-top:var(--s-7);border:1px solid var(--frame-line);border-radius:var(--radius-2);box-shadow:var(--shadow-3);overflow:hidden;background:var(--surface-1)}
.stage-topbar{min-height:42px;display:flex;align-items:center;gap:var(--s-4);padding:0 var(--s-4);font-size:var(--step--1);color:var(--muted)}
.window-dots{display:flex;gap:5px}
.window-dots i{width:7px;height:7px;background:var(--line-strong);border-radius:100%}
.stage-live{margin-left:auto;display:flex;align-items:center;gap:var(--s-2);white-space:nowrap}
.stage-live i{width:6px;height:6px;border-radius:50%;background:var(--green)}
.stage-image-button{display:block;position:relative;cursor:zoom-in;background:var(--ink)}
.stage-image-button img{width:100%}
.image-expand{position:absolute;right:var(--s-3);bottom:var(--s-3);display:grid;place-items:center;width:36px;height:36px;background:var(--ink-soft);border:1px solid var(--green-40);border-radius:var(--radius-1);color:var(--green);transition:background-color var(--dur-in) var(--ease-ui)}
.image-expand svg{width:16px;height:16px;transition:transform var(--dur-in) var(--ease-ui)}
.stage-footer{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);min-height:42px;padding:var(--s-3) var(--s-4);font-size:var(--step--1);line-height:1.5;color:var(--muted)}
.stage-footer>span:last-child{flex:none}
.stage-footer .status-dot{width:6px;height:6px;margin-right:var(--s-2)}

/* ---------- Workflows: pinned chapters (signature moment) ---------- */
.workflow-section{background:var(--paper);color:var(--paper-heading);padding:var(--s-9) 0 0}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-7)}
.section-heading>p{font-size:var(--step-0);line-height:1.7;color:var(--paper-muted);max-width:40ch;margin:0 0 3px}
.chapters{margin:var(--s-7) 0 0;border-top:1px solid var(--dark-line)}
.chapter{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5);padding-block:var(--s-6);border-bottom:1px solid var(--dark-line)}
.chapter-copy h3{margin:0;font-size:var(--step-2);line-height:1.25;font-weight:500;letter-spacing:var(--track-h2);color:var(--paper-heading)}
.chapter-copy p{margin:var(--s-3) 0 0;max-width:46ch;font-size:var(--step-0);line-height:1.65;color:var(--paper-text)}
.chapter-figure{margin:0;min-width:0;border:1px solid var(--dark-line);border-radius:var(--radius-1);background:var(--paper-panel);overflow:hidden}
.visual-label{display:flex;justify-content:space-between;gap:var(--s-3);padding:var(--s-3) var(--s-4);font-size:var(--step--1);color:var(--paper-muted)}
.visual-label>span:first-child{font-weight:500;color:var(--paper-heading)}
.visual-label>span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
/* Crop to the Editor window with object-position instead of the old translate hack; the lightbox shows the whole image. */
.chapter-shot{position:relative;display:block;aspect-ratio:4/3;background:var(--surface-1);cursor:zoom-in}
.chapter-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:100% 50%}
.chapter-shot.shot-graphs img{object-position:97% 50%}
.chapter-figure figcaption{padding:var(--s-3) var(--s-4) var(--s-4);font-size:var(--step--1);line-height:1.6;color:var(--paper-text)}
.visual-footnote{color:var(--paper-muted)}
.workflow-summary{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-6);padding:var(--s-5) 0;font-size:var(--step--1);color:var(--paper-muted)}
.workflow-summary ul{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-6);margin:0;padding:0;list-style:none}
.workflow-summary li::before{content:'✓';color:var(--accent-soft);margin-right:var(--s-2)}
.workflow-summary>a{margin-left:auto}
@media (hover:hover) and (pointer:fine){
  :is(.stage-image-button,.chapter-shot):hover .image-expand{background:var(--hover-fill)}
  :is(.stage-image-button,.chapter-shot):hover .image-expand svg{transform:scale(1.1)}
}
:is(.stage-image-button,.chapter-shot):focus-visible .image-expand{background:var(--hover-fill)}
/* Both image links fill a frame that clips its overflow, so the focus ring goes inside. */
:is(.stage-image-button,.chapter-shot):focus-visible{outline-offset:-3px}

/* Wide screens without the pinned mode (no JS, or reduced motion): each figure sits beside its own step. */
@media (min-width:900px){
  .chapter{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:var(--s-8);align-items:center;padding-block:var(--s-7)}
}

/* Pinned mode: app.js adds .is-pinned when it can follow the scroll. The figures leave their articles visually
   and share one sticky frame in the right column; the step crossing the middle of the viewport is [data-active]. */
@media screen and (min-width:900px) and (prefers-reduced-motion:no-preference){
  .chapters.is-pinned{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:var(--s-8);border-top:0}
  .chapters.is-pinned .chapter{display:contents}
  .chapters.is-pinned .chapter-copy{grid-column:1;display:flex;flex-direction:column;justify-content:center;min-height:70vh;padding-left:var(--s-5);border-left:2px solid var(--dark-line);transition:border-color 300ms var(--ease-out)}
  .chapters.is-pinned .chapter:nth-child(1) .chapter-copy{grid-row:1}
  .chapters.is-pinned .chapter:nth-child(2) .chapter-copy{grid-row:2}
  .chapters.is-pinned .chapter:nth-child(3) .chapter-copy{grid-row:3}
  .chapters.is-pinned .chapter-copy :is(h3,p){transition:color 300ms var(--ease-out)}
  /* Inactive steps step back to the muted tokens (AA in both themes) instead of a 55% opacity. */
  .chapters.is-pinned .chapter:not([data-active]) .chapter-copy :is(h3,p){color:var(--paper-muted)}
  .chapters.is-pinned .chapter[data-active] .chapter-copy{border-left-color:var(--green)}
  .chapters.is-pinned .chapter-figure{grid-column:2;grid-row:1/span 3;align-self:start;position:sticky;top:calc(var(--header-h) + var(--subnav-h) + 26px);opacity:0;pointer-events:none;box-shadow:var(--shadow-2);transition:opacity 300ms var(--ease-out)}
  .chapters.is-pinned .chapter[data-active] .chapter-figure{opacity:1;pointer-events:auto}
  /* Keep the whole frame inside short viewports: the image box gives up height first. */
  .chapters.is-pinned .chapter-shot{max-height:calc(100vh - var(--header-h) - var(--subnav-h) - 230px);min-height:240px}
  .chapters.is-pinned + .workflow-summary{border-top:1px solid var(--dark-line);margin-top:var(--s-8)}
}

/* ---------- What's next: UQL ---------- */
.uql-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:100px;padding-block:var(--s-9)}
.uql-title>p{font-size:var(--step-0);color:var(--text-soft);line-height:1.7;max-width:var(--measure);margin:var(--s-5) 0}
.uql-preview{border:1px solid var(--frame-line);border-radius:var(--radius-1);background:linear-gradient(130deg,var(--surface-2),var(--ink-soft))}
.uql-preview-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:var(--s-4) 20px;border-bottom:1px solid var(--line)}
.uql-preview-title{font-size:var(--step--1);font-weight:500;color:var(--white)}
.status-label{font:var(--label) var(--mono);letter-spacing:var(--track-label);padding:5px 8px;background:var(--surface-2);color:var(--accent-soft);white-space:nowrap}
.query-prompt{display:flex;gap:15px;padding:21px 24px;border-bottom:1px solid var(--line);align-items:flex-start}
.prompt-mark{color:var(--green);font:24px var(--mono)}
.query-prompt p{margin:3px 0 0;color:var(--green);font:14px/1.8 var(--mono)}
.query-steps{list-style:none;margin:0;padding:9px 25px 0}
.query-steps li{display:flex;gap:21px;padding:16px 0}
.query-steps li>span{font:var(--label) var(--mono);padding-top:4px;color:var(--muted)}
.query-steps strong{font-size:15px;font-weight:500}
.query-steps p{font-size:14px;line-height:1.65;color:var(--muted);margin:7px 0 0}
.uql-caption{font-size:13px;line-height:1.7;color:var(--muted);margin:8px 25px 23px;padding-top:15px;border-top:1px solid var(--line)}

/* ---------- Editions: the full version filled and wider, Lite and UQL outlined ---------- */
.editions-section{background:var(--paper);color:var(--paper-heading);padding:var(--s-9) 0 var(--s-7)}
.edition-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,1fr);gap:var(--s-4);align-items:stretch;margin-top:var(--s-7)}
.edition{display:flex;flex-direction:column;min-width:0;padding:var(--s-5);border:1px solid var(--frame-line);border-radius:var(--radius-2);background:transparent}
.edition-featured{padding:var(--s-6);background:var(--surface-2);color:var(--white);border-color:var(--green-40);box-shadow:var(--shadow-2)}
.edition-top{display:flex;justify-content:space-between;align-items:center;gap:var(--s-2);margin-bottom:var(--s-6)}
.edition-status{display:inline-flex;align-items:center;font:var(--label)/1.6 var(--mono);letter-spacing:var(--track-label)}
.planned{color:var(--paper-muted)}
.available{color:var(--green)}
.available i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:var(--s-2)}
.edition-symbol{font-size:22px;line-height:1;color:var(--paper-muted)}
.edition-symbol-uql{font:400 18px/1 var(--mono);letter-spacing:-.1em}
.edition-featured .edition-symbol{color:var(--green)}
.edition h3{margin:0;font-size:var(--step-2);font-weight:500;letter-spacing:var(--track-h2);line-height:1.15}
.edition-featured h3{font-size:var(--step-3)}
.edition h3 span{display:block;margin-top:var(--s-2);font-size:var(--step--1);font-weight:400;letter-spacing:0;color:var(--paper-muted)}
.edition-featured h3 span{color:var(--accent-soft)}
.edition>p{margin:var(--s-4) 0 var(--s-5);font-size:15px;line-height:1.65;color:var(--paper-text)}
.edition-featured>p{font-size:var(--step-0);color:var(--text-soft)}
.edition ul{flex:1;margin:0 0 var(--s-5);padding:var(--s-4) 0 0;list-style:none;border-top:1px solid var(--dark-line);font-size:14px}
.edition li{display:flex;align-items:baseline;gap:var(--s-2);padding:6px 0}
.edition li::before{content:'';flex:none;width:6px;height:6px;border-radius:1px;background:var(--accent-soft);transform:translateY(-2px)}
.edition-featured ul{border-color:var(--band-line);font-size:15px}
.edition-featured li::before{background:var(--green)}
.edition .button{width:100%}
.edition-note{display:block;margin:var(--s-3) 0 0;font-size:var(--step--1);line-height:1.6;color:var(--paper-muted);text-align:center}
.edition-featured .edition-note{color:var(--muted)}
.release-note{margin:var(--s-5) 0 0;font-size:var(--step--1);line-height:1.7;color:var(--paper-muted)}

/* ---------- FAQ: the answer fades in (no height animation; the + already turns) ---------- */
@keyframes udb-fade{from{opacity:0}}
.faq-list details[open]>:not(summary){animation:udb-fade var(--dur-in) var(--ease-ui)}

/* ---------- Closing band ---------- */
.closing-kicker{margin:0 0 var(--s-3);font-size:var(--step-0);font-weight:500;color:var(--accent-soft)}

/* ---------- Dialogs: screenshot lightbox and overview video ---------- */
dialog{border:1px solid var(--frame-line);border-radius:var(--radius-2);padding:0;background:var(--ink-soft);color:var(--white);box-shadow:var(--shadow-3);max-height:90dvh;overflow:auto}
dialog::backdrop{background:var(--backdrop);backdrop-filter:blur(8px)}
@keyframes udb-dialog-in{from{opacity:0;scale:.98}}
@keyframes udb-backdrop-in{from{opacity:0}}
dialog[open]{animation:udb-dialog-in var(--dur-panel) var(--ease-out)}
dialog[open]::backdrop{animation:udb-backdrop-in var(--dur-panel) var(--ease-out)}
.media-dialog{width:min(1200px,94vw);max-width:none}
.dialog-toolbar{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:8px 12px 8px 20px;border-bottom:1px solid var(--line)}
.dialog-toolbar h2{font-size:14px;letter-spacing:0;font-weight:500}
.icon-button{display:grid;place-items:center;min-width:44px;min-height:44px;background:transparent;font-size:28px;line-height:1;padding:0;color:var(--muted)}
.icon-button:hover,.icon-button:focus-visible{color:var(--green)}
.media-dialog>p{font-size:14px;color:var(--muted);padding:0 20px;margin:18px 0}
.video-dialog{width:min(1000px,94vw);max-width:none}
.video-frame{aspect-ratio:16/9;background:var(--ink)}
.video-frame iframe{height:100%;width:100%;border:0;display:block}
.video-fallback{font-size:13px;padding:0 20px;color:var(--muted)}
.video-fallback a{color:var(--green);text-decoration:underline}

/* ---------- Responsive ---------- */
@media (min-width:1200px){
  .hero{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;column-gap:56px;padding-block:72px 80px}
  .hero h1{font-size:clamp(3.75rem,1.2rem + 3.4vw,4.5rem)}
  .hero-description{font-size:var(--step-0)}
  .product-stage{margin-top:0}
}
@media (max-width:1100px){
  .uql-section{gap:50px}
  .edition{padding:var(--s-5) 20px}
  .edition-featured{padding:var(--s-5)}
}
@media (max-width:899.98px){
  .edition-grid{grid-template-columns:minmax(0,1fr)}
  .section-heading{display:block}
  .section-heading>p{margin-top:var(--s-4)}
}
@media (max-width:800px){
  .hero{padding-block:var(--s-7)}
  .stage-topbar{min-height:38px;padding:0 var(--s-3);gap:var(--s-3)}
  .stage-footer{padding:var(--s-2) var(--s-3)}
  .stage-footer>span:last-child{display:none}
  .image-expand{width:32px;height:32px;right:var(--s-2);bottom:var(--s-2)}
  .workflow-section,.editions-section{padding-top:var(--s-8)}
  .chapters{margin-top:var(--s-6)}
  .workflow-summary>a{margin-left:0}
  .uql-section{grid-template-columns:minmax(0,1fr);gap:32px;padding-block:var(--s-8)}
}
@media (max-width:639.98px){
  .edition,.edition-featured{padding:var(--s-5) 20px}
}
@media (max-width:479.98px){
  .hero-actions{flex-direction:column;align-items:flex-start;gap:var(--s-1)}
  .hero-actions .button{width:100%;margin:0 0 var(--s-2)}
  .stage-live{display:none}
  .stage-topbar>span{margin-left:auto}
  .glance-list{display:block}
  .glance-list li{margin:0;padding:var(--s-1) 0;border-right:0}
  .uql-preview-header{padding:14px}
  .query-prompt{padding:19px}
  .query-prompt p{font-size:13px}
  .query-steps{padding-inline:19px}
  .query-steps li{gap:15px}
}

/* ---------- Light theme. The product frame and dialogs stay dark islands (themes.css). ---------- */
:root[data-theme="light"] :is(
  .query-steps li > span, .query-steps p, .uql-caption,
  .edition-symbol, .edition-featured h3 span,
  .edition-featured .edition-note, .release-note
) { color: var(--paper-muted); }
:root[data-theme="light"] .uql-preview { background: var(--paper-panel); border-color: var(--dark-line); }
:root[data-theme="light"] .uql-preview-title { color: var(--paper-heading); }
:root[data-theme="light"] .status-label { background: #dce5d3; color: #3c603d; }
:root[data-theme="light"] .edition { border-color: var(--dark-line); }
:root[data-theme="light"] .edition-featured { background: #dce5d3; color: var(--paper-heading); border-color: #91ab83; }
:root[data-theme="light"] .edition-featured ul { border-color: #b2c4a5; }
:root[data-theme="light"] .edition-featured .edition-top .edition-symbol { color: var(--green); }
:root[data-theme="light"] .available { color: #345e3b; }
:root[data-theme="light"] .product-stage { background: #1b251e; border-color: #43583a; box-shadow: 0 25px 55px -35px #28332170; }
:root[data-theme="light"] dialog { background: #18221d; border-color: #52664a; }
:root[data-theme="light"] dialog::backdrop { background: #182019bd; }
/* The expand chip sits on a screenshot, so it stays dark in both themes. */
:root[data-theme="light"] .chapter-shot .image-expand { background: #18221d; border-color: rgba(194, 239, 145, .4); color: #c2ef91; }
:root[data-theme="light"] .chapter-shot { background: #1b251e; }