/* RJV interface layer. Loaded after main.css on every page; main.css stays the small critical sheet and this one
   carries the surfaces that need more: the document reader, capability cards, the developer console, the status
   board and the guided flows. Every colour is a token from main.css, so light, dark and the chosen theme apply. Motion
   is gated on the visitor not asking for less of it, and nothing here hides content from a browser without the script:
   the script adds the classes that animate or rearrange a page, never the page itself. */

/* ---------- scroll reveal and reading progress ---------- */
.ui-progress{position:fixed;inset:0 0 auto 0;block-size:3px;z-index:60;background:var(--grad);transform-origin:0 50%;transform:scaleX(var(--p,0));pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .ui-reveal{opacity:0;transform:translateY(18px);transition:opacity .55s var(--motion-easing-standard),transform .55s var(--motion-easing-standard)}
  .ui-reveal.ui-in{opacity:1;transform:none}
}

/* ---------- document reader (products, services, research, legal) ---------- */
.ui-reader{display:grid;gap:var(--s5);grid-template-columns:minmax(0,1fr);align-items:start}
.ui-reader>*{min-inline-size:0}
@media (min-width:62rem){.ui-reader{grid-template-columns:14.5rem minmax(0,1fr)}}
.ui-rail{position:sticky;inset-block-start:calc(var(--layout-header-height) + var(--s3));display:none;padding:var(--s3);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface-raised);box-shadow:var(--shadow-raised)}
@media (min-width:62rem){.ui-rail{display:block}}
.ui-rail h2{margin:0 0 var(--s2);font-size:var(--type-size-sm);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted)}
.ui-rail ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;counter-reset:rail}
.ui-rail li{counter-increment:rail}
.ui-rail a{display:flex;gap:.6rem;align-items:center;padding:.4rem .5rem;border-radius:8px;color:var(--color-text-muted);text-decoration:none;font-size:var(--type-size-sm);line-height:1.3}
.ui-rail a::before{content:counter(rail);display:grid;place-items:center;flex:none;inline-size:1.35rem;block-size:1.35rem;border-radius:50%;border:1px solid var(--color-control-border);font-size:.7rem;font-variant-numeric:tabular-nums}
.ui-rail a:hover{background:var(--color-surface);color:var(--color-text)}
.ui-rail a[aria-current]{background:color-mix(in srgb,var(--color-brand-primary) 12%,transparent);color:var(--color-text);font-weight:600}
.ui-rail a[aria-current]::before{background:var(--color-brand-primary);border-color:var(--color-brand-primary);color:#fff}
.ui-rail__meter{margin-block-start:var(--s3);padding-block-start:var(--s3);border-block-start:1px solid var(--color-border);display:grid;gap:.35rem;font-size:var(--type-size-sm);color:var(--color-text-muted)}
.ui-bar{appearance:none;inline-size:100%;block-size:.5rem;border:0;border-radius:99px;overflow:hidden;background:var(--color-border)}
.ui-bar::-webkit-progress-bar{background:var(--color-border)}.ui-bar::-webkit-progress-value{background:var(--grad);border-radius:99px}.ui-bar::-moz-progress-bar{background:var(--grad)}

.ui-glance{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));margin-block:var(--s4)}
.ui-stat{position:relative;overflow:hidden;padding:var(--s3) var(--s3) var(--s3) var(--s4);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface-raised)}
.ui-stat::before{content:"";position:absolute;inset:0 auto 0 0;inline-size:4px;background:var(--grad)}
.ui-stat b{display:block;font-size:var(--type-size-xl);line-height:1.1;font-variant-numeric:tabular-nums}
.ui-stat span{display:block;margin-block-start:.2rem;font-size:var(--type-size-sm);color:var(--color-text-muted)}

.ui-sec{position:relative;padding:var(--s4);margin-block-end:var(--s4);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface-raised);box-shadow:var(--shadow-raised)}
.ui-sec>h2{display:flex;gap:.75rem;align-items:center;margin:0 0 var(--s3);font-size:var(--type-size-xl);line-height:1.15;scroll-margin-block-start:calc(var(--layout-header-height) + var(--s4))}
.ui-sec__ico{display:grid;place-items:center;flex:none;inline-size:2.6rem;block-size:2.6rem;border-radius:12px;background:color-mix(in srgb,var(--color-brand-primary) 14%,transparent);color:var(--color-brand-primary)}
.ui-sec__ico svg{inline-size:1.4rem;block-size:1.4rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ui-sec>:not(h2){max-inline-size:none}
.ui-sec--limits{border-color:color-mix(in srgb,var(--color-warning) 55%,var(--color-border));background:linear-gradient(135deg,color-mix(in srgb,var(--color-warning) 8%,var(--color-surface-raised)),var(--color-surface-raised))}
.ui-sec--limits .ui-sec__ico{background:color-mix(in srgb,var(--color-warning) 18%,transparent);color:var(--color-warning)}
.ui-sec--limits ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.ui-sec--limits li{position:relative;padding-inline-start:1.7rem}
.ui-sec--limits li::before{content:"";position:absolute;inset-inline-start:.2rem;inset-block-start:.5em;inline-size:.7rem;block-size:.7rem;border-radius:2px;rotate:45deg;background:var(--color-warning)}
.ui-sec--evidence .ui-sec__ico{background:color-mix(in srgb,var(--color-success) 16%,transparent);color:var(--color-success)}

/* capability cards: a table whose rows are things you can open */
.ui-caps{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));margin:var(--s3) 0 0;padding:0;list-style:none}
.ui-cap{position:relative;display:grid;gap:.5rem;align-content:start;padding:var(--s3);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);transition:border-color var(--motion-duration-fast),transform var(--motion-duration-fast),box-shadow var(--motion-duration-fast)}
.ui-cap:hover{border-color:var(--color-brand-primary);transform:translateY(-3px);box-shadow:var(--shadow-raised)}
.ui-cap h3{margin:0;font-size:var(--type-size-lg);line-height:1.2}
.ui-cap p{margin:0;color:var(--color-text-muted);font-size:var(--type-size-sm);line-height:1.55}
.ui-cap__more{margin-block-start:auto}
.ui-cap a.button{justify-self:start;min-block-size:2.4rem;padding-block:.3rem}
.ui-cap__tag{justify-self:start;padding:.1rem .55rem;border-radius:99px;background:color-mix(in srgb,var(--color-brand-secondary) 16%,transparent);color:var(--color-text);font-size:.74rem;font-weight:600}

/* key-value tables become definition rows */
.ui-kv{display:grid;margin:var(--s3) 0 0;border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}
.ui-kv>div{display:grid;gap:.15rem var(--s3);padding:.65rem var(--s3);border-block-end:1px solid var(--color-border)}
.ui-kv>div:last-child{border-block-end:0}
.ui-kv dt{font-weight:600}.ui-kv dd{margin:0;color:var(--color-text-muted)}
@media (min-width:40rem){.ui-kv>div{grid-template-columns:12rem minmax(0,1fr)}}
.ui-kv>div:nth-child(odd){background:var(--color-surface)}

/* ---------- next steps strip ---------- */
.ui-next{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;justify-content:space-between;padding:var(--s4);border-radius:var(--radius-lg);background:linear-gradient(120deg,var(--color-surface-inverse),color-mix(in srgb,var(--color-brand-primary) 40%,var(--color-surface-inverse)));color:var(--color-text-inverse)}
.ui-next h2{margin:0;font-size:var(--type-size-xl);color:inherit}.ui-next p{margin:.2rem 0 0;color:var(--color-text-inverse-muted)}
.ui-next .button--secondary{color:var(--color-text-inverse);border-color:var(--color-text-inverse-muted)}

/* ---------- developer console ---------- */
.ui-dev{display:grid;gap:var(--s4);grid-template-columns:minmax(0,1fr)}
@media (min-width:64rem){.ui-dev{grid-template-columns:minmax(0,20rem) minmax(0,1fr)}}
.ui-dev>*{min-inline-size:0}
.ui-ops{display:grid;gap:var(--s2);align-content:start;max-block-size:42rem;overflow:auto;padding:var(--s2);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface-raised)}
.ui-ops input[type=search]{inline-size:100%;margin:0 0 var(--s2)}
.ui-op{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.2rem .6rem;align-items:center;inline-size:100%;padding:.5rem .6rem;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--color-text);font:inherit;text-align:start;cursor:pointer}
.ui-op:hover{background:var(--color-surface)}.ui-op[aria-pressed=true]{border-color:var(--color-brand-primary);background:color-mix(in srgb,var(--color-brand-primary) 10%,transparent)}
.ui-op code{overflow-wrap:anywhere;font-size:.82rem}.ui-op small{grid-column:2;color:var(--color-text-muted);line-height:1.35}
.ui-verb{display:inline-grid;place-items:center;min-inline-size:3.1rem;padding:.12rem .4rem;border-radius:6px;font:700 .68rem/1.4 var(--type-family-mono);letter-spacing:.04em;color:#fff;background:var(--color-brand-primary)}
.ui-verb[data-verb=POST]{background:#0f8a5f}.ui-verb[data-verb=PUT],.ui-verb[data-verb=PATCH]{background:#a96a00}.ui-verb[data-verb=DELETE]{background:var(--color-danger)}
.ui-try{display:grid;gap:var(--s3);align-content:start;padding:var(--s4);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface-raised);box-shadow:var(--shadow-raised)}
.ui-try h2{margin:0;font-size:var(--type-size-lg);display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.ui-try__path{font-family:var(--type-family-mono);font-size:.95rem;overflow-wrap:anywhere}
.ui-try dl{margin:0;display:grid;gap:.3rem}.ui-try dt{font-weight:600}.ui-try dd{margin:0 0 .4rem;color:var(--color-text-muted)}
.ui-code{position:relative;margin:0;padding:var(--s3);border-radius:var(--radius-md);background:var(--color-surface-inverse);color:var(--color-text-inverse);font:.85rem/1.55 var(--type-family-mono);overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}
.ui-code .ui-copy{position:absolute;inset:.4rem .4rem auto auto;padding:.2rem .6rem;border:1px solid var(--color-border-inverse);border-radius:8px;background:transparent;color:var(--color-text-inverse);font:inherit;font-size:.75rem;cursor:pointer}
.ui-resp{display:grid;gap:.5rem}
.ui-resp__head{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;font-size:var(--type-size-sm)}
.ui-pill{display:inline-flex;align-items:center;gap:.4rem;padding:.12rem .6rem;border-radius:99px;border:1px solid var(--color-border);background:var(--color-surface);font-size:.8rem;font-weight:600}
.ui-pill::before{content:"";inline-size:.5rem;block-size:.5rem;border-radius:50%;background:var(--color-text-muted)}
.ui-pill[data-tone=ok]::before{background:var(--color-success)}.ui-pill[data-tone=bad]::before{background:var(--color-danger)}.ui-pill[data-tone=warn]::before{background:var(--color-warning)}

/* ---------- status board ---------- */
.ui-board{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin-block:var(--s4)}
.ui-probe{display:grid;gap:.4rem;padding:var(--s3);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface-raised)}
.ui-probe header{display:flex;align-items:center;gap:.6rem}
.ui-led{inline-size:.8rem;block-size:.8rem;border-radius:50%;background:var(--color-text-muted);box-shadow:0 0 0 4px color-mix(in srgb,var(--color-text-muted) 18%,transparent)}
.ui-led[data-tone=ok]{background:var(--color-success);box-shadow:0 0 0 4px color-mix(in srgb,var(--color-success) 22%,transparent)}
.ui-led[data-tone=bad]{background:var(--color-danger);box-shadow:0 0 0 4px color-mix(in srgb,var(--color-danger) 22%,transparent)}
.ui-probe h3{margin:0;font-size:var(--type-size-base)}.ui-probe b{font-size:var(--type-size-xl);font-variant-numeric:tabular-nums;line-height:1.1}
.ui-probe small{color:var(--color-text-muted)}
.ui-probe svg{inline-size:100%;block-size:2.6rem}
.ui-probe svg path{fill:none;stroke:var(--color-brand-primary);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}

/* ---------- guided flows: explore, forms ---------- */
.ui-wizard{display:grid;gap:var(--s4);padding:var(--s4);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface-raised);box-shadow:var(--shadow-raised)}
.ui-wizard h2{margin:0;font-size:var(--type-size-xl)}
.ui-choices{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.ui-choice{display:grid;gap:.3rem;padding:var(--s3);border:1.5px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);color:var(--color-text);font:inherit;text-align:start;cursor:pointer;transition:border-color var(--motion-duration-fast),transform var(--motion-duration-fast)}
.ui-choice:hover{border-color:var(--color-brand-primary);transform:translateY(-2px)}
.ui-choice strong{font-size:var(--type-size-lg)}.ui-choice span{color:var(--color-text-muted);font-size:var(--type-size-sm)}
.ui-trail{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none;font-size:var(--type-size-sm);color:var(--color-text-muted)}
.ui-trail li+li::before{content:"›";margin-inline-end:.4rem}
.ui-result{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.ui-hit{display:grid;gap:.3rem;padding:var(--s3);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);text-decoration:none;color:var(--color-text)}
.ui-hit:hover{border-color:var(--color-brand-primary)}.ui-hit strong{font-size:var(--type-size-lg)}.ui-hit span{color:var(--color-text-muted);font-size:var(--type-size-sm)}

/* instant search */
.ui-live{display:grid;gap:var(--s3);margin-block:var(--s3)}
.ui-live[hidden]{display:none}
.ui-live h3{margin:0;font-size:var(--type-size-sm);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted)}

/* multi-step forms */
.ui-steps{display:flex;gap:.5rem;margin:0 0 var(--s3);padding:0;list-style:none}
.ui-steps li{flex:1;block-size:.35rem;border-radius:99px;background:var(--color-border)}
.ui-steps li[data-done]{background:var(--color-brand-primary)}.ui-steps li[aria-current]{background:var(--grad)}
.ui-pane[hidden]{display:none}
.ui-navrow{display:flex;gap:.6rem;flex-wrap:wrap;margin-block-start:var(--s3)}

/* ---------- live figures ---------- */
.ui-figs{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));margin-block:var(--s4)}
.ui-fig{padding:var(--s3);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface-raised)}
.ui-fig b{display:block;font-size:2rem;line-height:1.1;font-variant-numeric:tabular-nums;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ui-fig span{display:block;color:var(--color-text-muted);font-size:var(--type-size-sm)}
.ui-heat{inline-size:100%;block-size:auto}
.ui-heat rect{rx:3}

/* ---------- richer legacy surfaces ---------- */
.section--hero{position:relative;overflow:hidden}
.table-wrap{border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-raised)}
.table-wrap table{margin:0}
.table-wrap thead th{background:var(--color-surface);position:sticky;inset-block-start:0}
.table-wrap tbody tr:hover{background:color-mix(in srgb,var(--color-brand-primary) 6%,transparent)}
.catalog__item{transition:border-color var(--motion-duration-fast),transform var(--motion-duration-fast),box-shadow var(--motion-duration-fast)}
.catalog__item:hover{border-color:var(--color-brand-primary);transform:translateY(-2px);box-shadow:var(--shadow-raised)}
.notice{border-radius:var(--radius-md)}
.breadcrumbs{font-size:var(--type-size-sm)}

/* Numbered procedures (quickstart, self-hosting): a timeline of cards with a rail and a numeral disc. */
.ui-steps-list{list-style:none;margin:0;padding:0;counter-reset:ui-step;display:grid;gap:var(--s3);position:relative}
.ui-steps-list::before{content:"";position:absolute;inset-block:1.5rem;inset-inline-start:1.1rem;inline-size:2px;background:linear-gradient(var(--color-brand-primary),transparent);opacity:.35}
.ui-steps-list>li{counter-increment:ui-step;position:relative;margin:0;padding:var(--s3) var(--s3) var(--s3) 3.4rem;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface-raised);box-shadow:0 1px 0 rgb(0 0 0/.03),0 12px 30px -22px rgb(20 40 90/.45)}
.ui-steps-list>li::before{content:counter(ui-step);position:absolute;inset-block-start:var(--s3);inset-inline-start:.55rem;inline-size:1.15rem;block-size:1.15rem;box-sizing:content-box;padding:.2rem;display:grid;place-items:center;border-radius:50%;background:var(--grad,var(--color-brand-primary));color:#fff;font:700 .8rem/1 var(--type-family-mono)}
.ui-steps-list>li>p{margin:0 0 var(--s2)}
.ui-steps-list .button{margin-block-start:var(--s2)}
@media (prefers-reduced-motion:no-preference){.ui-steps-list>li{transition:transform .2s,box-shadow .2s}.ui-steps-list>li:hover{transform:translateY(-2px)}}

/* The live finder: pressed states, pill label on a hit, chips without the assistant's inset. */
.ui-wizard .rjv-chips{padding:0}
.ui-wizard .rjv-chip[aria-pressed="true"],.ui-choice[aria-pressed="true"]{border-color:var(--color-brand-primary);background:var(--color-surface-alt);box-shadow:inset 0 0 0 1px var(--color-brand-primary)}
.ui-wizard input[type="search"]{inline-size:100%;min-block-size:var(--button-min-target);padding:0 var(--s3);border:1px solid var(--color-control-border);border-radius:var(--radius-md);background:var(--color-canvas);color:var(--color-text);font:inherit}
.ui-hit small{justify-self:start;padding:.1rem .55rem;border-radius:99px;background:var(--color-surface-alt);color:var(--color-brand-primary-strong);font-weight:600;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase}
.ui-hit{transition:transform var(--motion-duration-fast),border-color var(--motion-duration-fast),box-shadow var(--motion-duration-fast)}
.ui-hit:hover{transform:translateY(-2px);box-shadow:var(--shadow-raised)}

/* Forms across the account, console and public pages: one control language, no markup change. */
main form{display:grid;gap:var(--s3);max-inline-size:44rem}
main form input:not([type="checkbox"],[type="radio"],[type="hidden"],[type="submit"],[type="file"]),main form select,main form textarea{inline-size:100%;min-block-size:var(--button-min-target);padding:.55rem var(--s3);border:1px solid var(--color-control-border);border-radius:var(--radius-md);background:var(--color-canvas);color:var(--color-text);font:inherit;transition:border-color var(--motion-duration-fast),box-shadow var(--motion-duration-fast)}
main form textarea{min-block-size:7rem;resize:vertical}
main form input:focus-visible,main form select:focus-visible,main form textarea:focus-visible{outline:none;border-color:var(--color-brand-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-brand-primary) 28%,transparent)}
main form fieldset{margin:0;padding:var(--s3) var(--s4);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface)}
main form legend{padding:.15rem .7rem;border-radius:99px;background:var(--grad);color:#fff;font-weight:600;font-size:var(--type-size-sm)}
main form fieldset label.button{display:inline-flex;align-items:center;gap:.5rem;margin:.25rem .25rem .25rem 0;cursor:pointer}
main form fieldset label.button:has(input:checked){background:var(--color-brand-primary);border-color:var(--color-brand-primary);color:#fff}
main form fieldset label.button:has(input:checked) *{color:#fff}
main form label{font-weight:600}
main form label small,main form .hint{font-weight:400;color:var(--color-text-muted)}
main form button[type="submit"],main form .button--primary{justify-self:start}
main form input[type="checkbox"],main form input[type="radio"]{inline-size:1.15rem;block-size:1.15rem;accent-color:var(--color-brand-primary)}
.table-wrap table tbody tr{transition:background var(--motion-duration-fast)}
.table-wrap table tbody tr:hover{background:var(--color-surface-alt)}
.table-wrap table thead th{position:sticky;inset-block-start:0;background:var(--color-surface-raised);z-index:1}