/* SUPPAR SYNTHESIS components. Tokens in tokens.css. No hard-coded colours below this line except via tokens. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:var(--fs-1)/1.55 var(--font);min-height:100vh;min-height:100dvh;overflow-x:hidden;padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
[hidden]{display:none!important}
/* ambient background: static gradients on one fixed layer (cheap to composite; removed in lite mode) */
.bg-fx{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60vmax 60vmax at 12% -10%,color-mix(in srgb,var(--violet) 26%,transparent),transparent 60%),radial-gradient(55vmax 55vmax at 105% 8%,color-mix(in srgb,var(--blue) 22%,transparent),transparent 60%),radial-gradient(50vmax 50vmax at 60% 115%,color-mix(in srgb,var(--cyan) 18%,transparent),transparent 62%),var(--bg)}
:root[data-fx=lite] .bg-fx{background:var(--bg)}
@supports not (background:color-mix(in srgb,red 10%,blue)){.bg-fx{background:var(--bg)}}
/* ---- glass (structure) ---- */
.glass{background:var(--glass);border:1px solid var(--glass-edge);border-radius:var(--r-lg);box-shadow:var(--shadow-panel);-webkit-backdrop-filter:blur(var(--blur)) saturate(var(--sat));backdrop-filter:blur(var(--blur)) saturate(var(--sat));position:relative}
/* ---- liquid glass (selective luminous edge + sheen on hero surfaces) ---- */
.liquid::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;background:linear-gradient(135deg,var(--glass-hi),transparent 35%,transparent 65%,color-mix(in srgb,var(--cyan) 55%,transparent));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
:root[data-fx=lite] .liquid::before{display:none}
.liquid::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.10) 48%,transparent 62%);background-size:220% 100%;background-position:120% 0;transition:background-position calc(var(--dur)*4) var(--ease)}
.liquid:hover::after{background-position:-20% 0}
:root[data-fx=lite] .liquid::after{display:none}
/* ---- shell / layout (adaptive: data-layout compact|medium|expanded) ---- */
.shell{display:grid;grid-template-columns:1fr;gap:var(--s-4);padding:var(--s-4);max-width:1280px;margin:0 auto}
.topbar{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;padding:var(--s-3) var(--s-4)}
.brand{display:flex;align-items:center;gap:var(--s-2);font-weight:700;letter-spacing:.04em;margin-right:auto}
.brand img{width:28px;height:28px;border-radius:8px}
h1{font-size:var(--fs-2);margin:0}h2{font-size:var(--fs-3);margin:0 0 var(--s-3);line-height:1.2}h3{font-size:var(--fs-2);margin:0 0 var(--s-2)}
.chip{display:inline-flex;align-items:center;gap:.4rem;border-radius:var(--r-pill);padding:.15rem .7rem;font-size:var(--fs-0);border:1px solid var(--glass-edge);background:var(--glass);color:var(--text)}
.chip::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--sec)}
.chip.state-succeeded::before{background:var(--ok)}.chip.state-failed::before,.chip.state-cancelled::before{background:var(--danger)}.chip.state-waiting::before{background:var(--warn)}.chip.state-running::before{background:var(--cyan)}
.nav{display:flex;gap:var(--s-2);flex-wrap:wrap;padding:var(--s-2)}
.nav button{display:flex;align-items:center;gap:var(--s-2);flex-direction:row;justify-content:flex-start}
.ico{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* expanded: left rail */
:root[data-layout=expanded] .shell{grid-template-columns:230px minmax(0,1fr);align-items:start}
:root[data-layout=expanded] .topbar{grid-column:1/-1}
:root[data-layout=expanded] .nav{flex-direction:column;position:sticky;top:var(--s-4);align-self:start}
:root[data-layout=expanded] .nav button{width:100%}
/* compact: thumb-reach bottom tab bar (hides while the virtual keyboard is open) */
:root[data-layout=compact] .shell{padding-bottom:calc(5.5rem + env(safe-area-inset-bottom))}
:root[data-layout=compact] .nav{position:fixed;left:max(var(--s-2),env(safe-area-inset-left));right:max(var(--s-2),env(safe-area-inset-right));bottom:max(var(--s-2),env(safe-area-inset-bottom));z-index:20;flex-wrap:nowrap;justify-content:space-around;border-radius:var(--r-xl);background:var(--glass-strong);border:1px solid var(--glass-edge);box-shadow:var(--shadow-panel);-webkit-backdrop-filter:blur(var(--blur)) saturate(var(--sat));backdrop-filter:blur(var(--blur)) saturate(var(--sat))}
:root[data-layout=compact] .nav button{flex-direction:column;gap:2px;font-size:.72rem;padding:.35rem .25rem;min-width:0;flex:1;border-radius:var(--r-lg);min-height:56px}
:root[data-layout=compact] .nav button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root[data-kb=open] .nav{display:none}:root[data-kb=open] .shell{padding-bottom:var(--s-4)}
/* foldables / dual-segment screens: two panes either side of the fold */
@media (horizontal-viewport-segments:2){:root[data-layout=expanded] .shell{grid-template-columns:env(viewport-segment-width 0 0) minmax(0,1fr);column-gap:calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0))}}
main{min-width:0}main:focus{outline:none}
.card{padding:var(--s-4);margin:0 0 var(--s-4)}
.grid{display:grid;gap:var(--s-4);grid-template-columns:1fr}
:root[data-layout=expanded] .grid.two{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
:root[data-layout=medium] .grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
/* ---- clay controls ---- */
button,.btn{font:inherit;color:var(--text);cursor:pointer;border:1px solid var(--control-border);background:var(--control-bg);border-radius:var(--r-md);padding:.55rem .95rem;min-height:44px;box-shadow:var(--clay);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),filter var(--dur) var(--ease);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:hover{filter:brightness(1.08)}button:active{transform:translateY(1px) scale(.99);box-shadow:var(--clay-press)}
button.primary{background:var(--accent-grad);color:var(--on-accent);border-color:transparent;font-weight:650}
button[aria-current=page]{border-color:var(--sec);box-shadow:var(--clay),0 0 0 2px color-mix(in srgb,var(--sec) 55%,transparent)}
button[disabled]{opacity:.55;cursor:not-allowed;box-shadow:none}
button.ghost{background:transparent;box-shadow:none;border-color:var(--glass-edge)}
button.danger{color:var(--danger);border-color:var(--danger)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;box-shadow:0 0 0 5px var(--focus-2)}
label{display:block;margin:var(--s-3) 0 var(--s-1);font-weight:600}
input,textarea,select{font:inherit;font-size:16px;color:var(--text);background:var(--control-bg);border:1px solid var(--control-border);border-radius:var(--r-md);padding:.6rem .8rem;min-height:44px;width:100%;box-shadow:inset 0 2px 5px rgba(0,0,0,.25)}
input[type=checkbox],input[type=radio]{width:1.4rem;height:1.4rem;min-height:0;accent-color:var(--blue);box-shadow:none}
.row{display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:center}.muted{color:var(--muted)}.err{color:var(--danger)}.ok{color:var(--ok)}
ul.list{list-style:none;padding:0;margin:0}ul.list li{padding:var(--s-3) 0;border-bottom:1px solid var(--glass-edge);display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:center;justify-content:space-between}ul.list li:last-child{border-bottom:0}
.msgs{display:flex;flex-direction:column;gap:var(--s-2);max-height:55vh;max-height:55dvh;overflow:auto;padding:var(--s-1)}
.msg{padding:var(--s-3) var(--s-4);border-radius:var(--r-lg);background:var(--control-bg);border:1px solid var(--glass-edge);white-space:pre-wrap;overflow-wrap:anywhere;max-width:min(100%,72ch)}
.msg.me{align-self:flex-end;background:color-mix(in srgb,var(--blue) 22%,var(--control-bg))}
@supports not (background:color-mix(in srgb,red 10%,blue)){.msg.me{background:var(--control-bg);border-color:var(--blue)}}
.composer{position:sticky;bottom:calc(var(--s-2) + var(--kb));padding:var(--s-3);margin-top:var(--s-3)}
:root[data-layout=compact] .composer{bottom:calc(.5rem + var(--kb))}
.chips{display:flex;gap:var(--s-2);flex-wrap:wrap;margin:var(--s-2) 0}
.chips button{min-height:44px;padding:.25rem .8rem;font-size:var(--fs-0);border-radius:var(--r-pill)}
pre.out{white-space:pre-wrap;overflow-wrap:anywhere;font:var(--fs-1)/1.55 var(--font);margin:0;max-height:60vh;overflow:auto}
table{width:100%;border-collapse:collapse}th,td{text-align:start;padding:var(--s-2);border-bottom:1px solid var(--glass-edge)}
.tablewrap{overflow-x:auto;max-width:100%}
:root[data-layout=compact] table.stack thead{display:none}:root[data-layout=compact] table.stack td{display:flex;justify-content:space-between;gap:var(--s-3)}:root[data-layout=compact] table.stack td::before{content:attr(data-label);color:var(--muted)}
dialog{color:var(--text);background:var(--glass-strong);border:1px solid var(--glass-edge);border-radius:var(--r-xl);padding:var(--s-5);width:min(92vw,520px);max-height:88dvh;overflow:auto;box-shadow:var(--shadow-panel);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){dialog{background:var(--solid)}}
dialog::backdrop{background:rgba(5,6,10,.6)}
.banner{padding:var(--s-2) var(--s-4);text-align:center;border-radius:var(--r-pill);margin:0 auto;width:fit-content;max-width:100%}
.skip{position:absolute;left:-999px;top:0}.skip:focus{left:8px;top:8px;z-index:50;background:var(--solid);color:var(--text);padding:.6rem 1rem;border-radius:var(--r-md)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(6.5rem + env(safe-area-inset-bottom));z-index:60;max-width:90vw}
:root:not([data-layout=compact]) .toast{bottom:1.5rem}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:var(--s-1) var(--s-4)}
img,video,canvas,svg{max-width:100%}code{font-family:var(--mono);overflow-wrap:anywhere}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
main>div>*{animation:rise calc(var(--dur)*1.6) var(--ease) both}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
:root[data-motion=reduce] *,:root[data-motion=reduce] *::before,:root[data-motion=reduce] *::after{animation:none!important;transition:none!important}
@media (hover:none) and (pointer:coarse){button,select,input,textarea{min-height:48px}}
@media (forced-colors:active){.glass,button,input,select,textarea,dialog{border:1px solid ButtonText;box-shadow:none}.bg-fx{display:none}button.primary{background:ButtonFace;color:ButtonText}}
@media print{.topbar,.nav,.banner,.composer,.bg-fx{display:none!important}body{background:#fff;color:#000}}

.nav .short{display:none}:root[data-layout=compact] .nav .full{display:none}:root[data-layout=compact] .nav .short{display:inline}
:root[data-view=nova]{--sec:var(--sec-nova)}:root[data-view=core]{--sec:var(--sec-core)}:root[data-view=ai]{--sec:var(--sec-ai)}
.hero{padding:var(--s-5)}
.jobcard{display:flex;flex-direction:column;gap:var(--s-2)}
.stat{font-size:var(--fs-3);font-weight:700}

/* utility classes (replace inline styles: CSP style-src 'self') */
.sprite{position:absolute}select.auto{width:auto}
.dlg-actions{margin-top:1rem;justify-content:flex-end}.mt{margin-top:.6rem}.ms-auto{margin-inline-start:auto}.ms-s{margin-inline-start:.5rem}
label.btn.inline{margin:0;display:inline-flex;align-items:center}fieldset.plain{border:0;padding:0;margin:0}
label.choice{display:flex;gap:.6rem;align-items:center;font-weight:500}label.choice.strong{font-weight:600}li.block{display:block}
input.vh{position:absolute;width:1px;height:1px;opacity:0;min-height:0;padding:0;border:0}
:root[data-fx=lite] .glass,:root[data-fx=lite] .nav,:root[data-fx=lite] dialog{-webkit-backdrop-filter:none;backdrop-filter:none}
label.muted.ms-auto{display:inline;margin:0;margin-inline-start:auto;font-weight:500}

/* --- v2 refinements from visual review --- */
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem}
details.hist ul.list li button{justify-content:flex-start;text-align:start;width:100%}
details.hist>summary,details.opts>summary{cursor:pointer;font-weight:650;min-height:44px;display:flex;align-items:center}
details.hist,details.opts{width:100%}
.nav .more{display:none}.morelist{display:grid;gap:var(--s-2)}.morelist button{justify-content:flex-start;width:100%}
:root[data-layout=compact] .nav .more{display:flex;flex-direction:column;gap:2px;font-size:.78rem;padding:.35rem .25rem;min-width:0;flex:1;border-radius:var(--r-lg);min-height:56px}
:root[data-layout=compact] .nav button[data-view=memory],:root[data-layout=compact] .nav button[data-view=account],:root[data-layout=compact] .nav button[data-view=settings]{display:none}
:root[data-layout=compact] .nav button{font-size:.78rem}
:root[data-layout=compact]{--navh:5.4rem}:root[data-kb=open]{--navh:.5rem}
:root[data-layout=compact] .composer{bottom:calc(var(--navh) + env(safe-area-inset-bottom) + var(--kb))}
/* compact header: one row, icon-only actions (names stay available to assistive tech) */
:root[data-layout=compact] .topbar{flex-wrap:nowrap;gap:var(--s-2)}
:root[data-layout=compact] .topbar button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:root[data-layout=compact] .topbar button{padding:.5rem;min-width:44px}
:root[data-layout=compact] .topbar #section-chip{display:none}
:root[data-layout=compact] select.auto{max-width:7.5rem}
:root[data-theme=light] .bg-fx{background:radial-gradient(60vmax 60vmax at 12% -10%,color-mix(in srgb,var(--violet) 38%,transparent),transparent 62%),radial-gradient(55vmax 55vmax at 105% 8%,color-mix(in srgb,var(--blue) 30%,transparent),transparent 62%),radial-gradient(50vmax 50vmax at 60% 115%,color-mix(in srgb,var(--cyan) 28%,transparent),transparent 64%),var(--bg)}
:root[data-theme=light][data-fx=lite] .bg-fx{background:var(--bg)}

.sh{display:none}.row.nowrap{flex-wrap:nowrap}
:root[data-layout=compact] .sh{display:inline}:root[data-layout=compact] .lg{display:none}.sh-sr{position:absolute}
:root[data-layout=compact] .composer{padding:var(--s-2) var(--s-3)}
:root[data-layout=compact] .composer .msg-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:root[data-layout=compact] .composer .chips{margin:.25rem 0}
:root[data-layout=compact] .composer textarea{min-height:44px}
:root[data-layout=compact] .composer details.opts>summary{min-height:36px;font-weight:500}
details>summary{list-style:none}details>summary::-webkit-details-marker{display:none}
details>summary::after{content:"";width:.5rem;height:.5rem;margin-inline-start:auto;border-inline-end:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform var(--dur) var(--ease)}
details[open]>summary::after{transform:rotate(225deg)}

.chip.state-active::before{background:var(--ok)}.chip.state-used_up::before{background:var(--warn)}.chip.state-expired::before,.chip.state-revoked::before{background:var(--danger)}
code.issued{display:block;font-size:var(--fs-2);padding:var(--s-3) var(--s-4);border-radius:var(--r-md);border:1px dashed var(--control-border);background:var(--control-bg);user-select:all;-webkit-user-select:all;word-break:break-all}
button.danger[disabled]{color:var(--muted);border-color:var(--glass-edge)}