/* app-viz.css: charts, lean text and skins. Draft 2, 2 Nov 2026. */
/* ---- lean text ---- */
.ai-about{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:6px;margin-top:10px;min-height:36px;padding:0 12px;border:0;border-radius:999px;background:var(--ai-fill);color:var(--ai-sub);font:600 13px var(--ai-font);cursor:pointer}
.ai-about svg{width:17px;height:17px}
.ai-aboutbox{grid-column:1/-1}
.ai-aboutbox[hidden]{display:none!important}
html.ai-on section.card.ai-fold{padding:0!important}
html.ai-on section.card.ai-fold>h2{margin:0!important;padding:16px 46px 16px 16px!important;cursor:pointer;position:relative;font-size:16px!important;font-weight:600!important}
[dir=rtl] html.ai-on section.card.ai-fold>h2,html[dir=rtl].ai-on section.card.ai-fold>h2{padding:16px 16px 16px 46px!important}
html.ai-on section.card.ai-fold>h2::after{content:"";position:absolute;inset-inline-end:18px;top:50%;width:9px;height:9px;border:solid var(--ai-faint);border-width:0 2px 2px 0;transform:translateY(-70%) rotate(45deg);transition:transform .2s}
html.ai-on section.card.ai-fold.open>h2::after{transform:translateY(-30%) rotate(-135deg)}
html.ai-on section.card.ai-fold>:not(h2){display:none!important}
html.ai-on section.card.ai-fold.open>:not(h2){display:block!important;padding:0 16px 16px}
/* ---- chart box ---- */
.ai-viz{margin:4px 0 12px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ai-viz[hidden]{display:none}
.ai-ring,.ai-donut{position:relative;width:150px;height:150px;flex:none}
.ai-ring svg,.ai-donut svg{width:100%;height:100%;transform:rotate(-90deg)}
.ai-ring circle,.ai-donut circle{fill:none;stroke-width:12;stroke-linecap:round}
.ai-donut circle{stroke-width:14;stroke-linecap:butt}
.ai-ring .trk{stroke:var(--ai-fill2)}
.ai-ring .val{transition:stroke-dashoffset .8s cubic-bezier(.3,1,.4,1)}
.ai-ring-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 22px}
.ai-ring-c b{font:800 26px/1.05 var(--ai-font);color:var(--ai-text);overflow-wrap:anywhere}
.ai-donut .ai-ring-c b{font-size:18px}
.ai-ring-c span{font-size:12px;color:var(--ai-sub);margin-top:3px;line-height:1.2}
.ai-ring-side{flex:1;min-width:120px}
.ai-ring-side b{display:block;font:800 24px/1.15 var(--ai-font);color:var(--ai-text)}
.ai-ring-side span{color:var(--ai-sub);font-size:13px}
.ai-legend{list-style:none;margin:0;padding:0;flex:1;min-width:130px;display:grid;gap:8px}
.ai-legend li{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ai-text)}
.ai-legend i{width:12px;height:12px;border-radius:4px;flex:none}
.ai-bars{width:100%;display:grid;gap:12px}
.ai-bar-l{display:flex;justify-content:space-between;gap:10px;font-size:14px;margin-bottom:5px}
.ai-bar-l span{color:var(--ai-sub)}
.ai-bar-l b{color:var(--ai-text);font-weight:700;white-space:nowrap}
.ai-bar-t{height:12px;border-radius:999px;background:var(--ai-fill2);overflow:hidden}
.ai-bar-t i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 70%,#fff),var(--c));opacity:calc(1 - var(--k)*.14);transition:width .7s cubic-bezier(.3,1,.4,1)}
.ai-hero{width:100%;border-radius:20px;padding:18px;background:linear-gradient(150deg,color-mix(in srgb,var(--c) 85%,#fff),var(--c) 55%,color-mix(in srgb,var(--c) 65%,#000));color:#06101f}
.ai-hero span{display:block;font-size:14px;font-weight:600;opacity:.75}
.ai-hero b{display:block;font:800 40px/1.05 var(--ai-font);letter-spacing:-.02em;overflow-wrap:anywhere}
/* when a chart is drawn, the old tiles become a compact list underneath */
html.ai-has-viz[data-ai-viz=hero] #stats .stat:first-child,html.ai-has-viz[data-ai-viz=donut] #stats .stat.hl{display:none!important}
html.ai-has-viz[data-ai-viz=donut] #split,html.ai-has-viz[data-ai-viz=donut] #legend,html.ai-has-viz[data-ai-viz=ring] #meter,html.ai-has-viz[data-ai-viz=ring] .bar{display:none!important}
html.ai-has-viz[data-ai-viz=bars] #stats{display:none!important}
html.ai-has-viz.ai-on .stats .stat.hl{grid-column:auto}
/* ---- skins ---- */
html[data-ai-skin=tint].ai-on body{background:linear-gradient(180deg,color-mix(in srgb,var(--c) 55%,#070a12) 0,color-mix(in srgb,var(--c) 22%,#070a12) 340px,#070a12 720px)!important}
html[data-ai-skin=tint] .ai-wall i:nth-child(1){opacity:.25}
html[data-ai-skin=tint] .ai-nav{background:color-mix(in srgb,var(--c) 30%,rgba(7,10,18,.7))}
html[data-ai-skin=tint] .ai-ico{box-shadow:0 0 0 3px rgba(255,255,255,.25),0 10px 24px rgba(0,0,0,.35)}
html[data-ai-skin=tint].ai-on section.card{background:rgba(10,12,22,.55)!important}
html[data-ai-skin=light]{--ai-bg:#f2f5fb;--ai-text:#0B0D18;--ai-sub:rgba(20,24,40,.62);--ai-faint:rgba(20,24,40,.45);--ai-glass:rgba(255,255,255,.82);--ai-hair:rgba(10,20,40,.08);--ai-fill:rgba(10,20,40,.05);--ai-fill2:rgba(10,20,40,.10);color-scheme:light}
html[data-ai-skin=light] .ai-wall i{opacity:.28}
html[data-ai-skin=light].ai-on section.card{box-shadow:0 6px 24px rgba(30,40,80,.08)!important}
html[data-ai-skin=light].ai-on *:not(.ai-hero):not(.ai-hero *):not(.stat.hl):not(.stat.hl *):not(.ai-bar button.main):not(.ai-bar button.main *):not(.ai-ico):not(.ai-ico *){color:inherit}
html[data-ai-skin=light].ai-on table.res td,html[data-ai-skin=light].ai-on table.res th,html[data-ai-skin=light].ai-on .legend span{color:var(--ai-text)!important}
html[data-ai-skin=light] .ai-back,html[data-ai-skin=light].ai-on .btn{color:color-mix(in srgb,var(--c) 70%,#000)!important}
@media (prefers-reduced-motion:reduce){.ai-ring .val,.ai-bar-t i{transition:none}}
/* fixes 2b */
html[data-ai-skin=light],html[data-ai-skin=light] body{background:var(--ai-bg)!important}
html[data-ai-skin=light].ai-on header,html[data-ai-skin=light].ai-on header *:not(.ai-ico){background-image:none!important}
html[data-ai-skin=light].ai-on header::before,html[data-ai-skin=light].ai-on header::after,html[data-ai-skin=light] body::before,html[data-ai-skin=light] body::after{display:none!important}
html[data-ai-skin=light].ai-on header h1,html[data-ai-skin=light] .ai-ring-c b,html[data-ai-skin=light] .ai-ring-side b{color:var(--ai-text)!important}
html[data-ai-skin=light] .ai-nav{background:rgba(242,245,251,.82)!important}
html[data-ai-skin=light] .ai-bar{background:rgba(255,255,255,.8)!important}
.ai-viz,.ai-viz *{text-align:start!important}
.ai-viz .ai-ring-c,.ai-viz .ai-ring-c *{text-align:center!important}
.ai-bars{display:grid!important}
.ai-bar-l{display:flex!important;justify-content:space-between!important;align-items:baseline}
.ai-legend{display:grid!important;justify-items:start}
.ai-legend li{display:flex!important}
html.ai-has-viz[data-ai-viz=ring] #stats .stat.hl{display:none!important}
/* batch 2 (Nov 2026): result numbers from any box (sel), chips under bars, coloured edge on the result card (tint) */
html.ai-has-viz[data-ai-viz=bars] .ai-src{display:none!important}
.ai-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.ai-chips span{padding:6px 11px;border-radius:999px;background:var(--ai-fill);color:var(--ai-sub);font-size:13px;line-height:1.3}
.ai-chips b{color:var(--ai-text);font-weight:700}
.ai-bar-l{flex-wrap:wrap}
.ai-bar-l span{min-width:0;overflow-wrap:anywhere}
html[data-ai-skin=tint].ai-on .ai-res{border-inline-start:4px solid var(--c)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 22%,transparent)!important}
html.ai-has-viz[data-ai-viz=donut] #split ~ .legend{display:none!important}

/* align 3 (2 Nov 2026): boxes in a row line up whatever the label length; buttons, selects and inputs share one height, text centred */
html.ai-on :has(> :is(div,p,fieldset) > label + :is(input,select,textarea)):not(.ai-col),
html.ai-on :has(> label > :is(input:not([type=checkbox]):not([type=radio]),select)):not(.ai-col){align-items:end}
html.ai-on :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=button]):not([type=submit]),select){box-sizing:border-box!important;height:48px!important;min-height:48px;line-height:normal!important;padding-top:0!important;padding-bottom:0!important}
html.ai-on :is(main,section,form) :is(a,label,span,div).btn:not([hidden]){display:inline-flex;align-items:center;justify-content:center;text-align:center}
html.ai-on :is(main,section,form) :is(button,.btn,input[type=button],input[type=submit]):not(.ai-bar *):not(.ai-about):not(.ai-back){line-height:1.2!important;padding-top:8px!important;padding-bottom:8px!important;min-height:44px;box-sizing:border-box;vertical-align:middle}
html.ai-on :is(.row,.btns,.actions,.toolbar,.btnrow):has(> :is(button,.btn)){align-items:stretch!important}