/* AIvantage portal — layout and components on top of tokens.css.
   Same material as the sales page: dark teal-black, chamfered panels, Archivo
   display type, green = own capacity / savings, mint = EU, dim = US, orange = blocked. */

body{min-height:100svh;background:
  radial-gradient(1100px 520px at 78% -120px,rgba(31,203,79,.10),transparent 70%),
  radial-gradient(800px 400px at -10% 0,rgba(46,230,166,.04),transparent 70%),var(--bg);background-repeat:no-repeat}
::selection{background:rgba(31,203,79,.35);color:var(--tx)}
a{text-decoration-color:rgba(159,176,179,.4);text-underline-offset:3px}
a:hover{text-decoration-color:currentColor}
p a,.auth-alt a,.flash a{color:var(--g2)}
code,pre,.secret{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.88em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--mu)}
.small{font-size:13px;line-height:var(--lh-ui)}
.num{font-variant-numeric:tabular-nums}
.nowrap{white-space:nowrap}
.own-tx{color:var(--g)}
.bad-tx{color:#FF7A66}
.strong{font-weight:600}
:focus-visible{outline:2px solid var(--g);outline-offset:2px}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:40;background:rgba(13,21,23,.82);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid rgba(56,70,74,.6)}
.topbar-in{max-width:1440px;margin:0 auto;padding:0 var(--gut);height:64px;display:flex;align-items:center;gap:28px}
.brand{display:inline-flex;align-items:center;gap:14px;text-decoration:none;flex:none}
.brand img{height:22px;width:auto}
.brand-tag{font-family:var(--disp);font-stretch:125%;font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mu);padding:3px 0 3px 14px;border-left:1px solid var(--line)}
.links{display:flex;align-items:center;gap:2px;flex:1;min-width:0}
.links a{position:relative;font-size:13.5px;font-weight:500;color:var(--mu);text-decoration:none;padding:8px 10px;white-space:nowrap;transition:color .2s}
.links a:hover{color:var(--tx)}
.links a[aria-current=page]{color:var(--tx)}
.links a[aria-current=page]::after{content:"";position:absolute;left:10px;right:10px;bottom:-13px;height:2px;background:var(--g);box-shadow:0 0 12px rgba(31,203,79,.6)}
.who{display:flex;align-items:center;gap:16px;flex:none}
.who-id{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:13px;color:var(--mu)}
.who-id:hover .who-mail{color:var(--tx)}
.who-mail{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who form{display:contents}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-size:13px;font-weight:500;color:var(--g2);cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .2s}
.linkbtn:hover{text-decoration-color:currentColor}
.linkbtn.bad{color:#FF7A66}
.who .linkbtn{color:var(--mu)}
.who .linkbtn:hover{color:var(--tx)}
/* Tilivalikko oikeassa yläkulmassa: oma tili, käyttäjänvaihto, uloskirjautuminen */
.who-menu{position:relative}
.who-menu summary{list-style:none;cursor:pointer;padding:8px 0}
.who-menu summary::-webkit-details-marker{display:none}
.who-caret{width:7px;height:7px;border-right:1.5px solid var(--mu);border-bottom:1.5px solid var(--mu);transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.who-menu[open] .who-caret{transform:translateY(1px) rotate(-135deg)}
.who-menu[open] .who-mail{color:var(--tx)}
.who-panel{position:absolute;right:0;top:calc(100% + 10px);min-width:260px;background:rgba(16,26,29,.98);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:12px;padding:6px;display:grid;box-shadow:0 18px 40px rgba(0,0,0,.45);animation:drop .2s ease-out;z-index:50}
.who-panel form{display:block}
.who-item{display:block;width:100%;text-align:left;background:none;border:0;font:inherit;font-size:13.5px;font-weight:500;color:var(--tx);text-decoration:none;padding:9px 12px;border-radius:8px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who-item:hover,.who-item:focus-visible{background:var(--s2)}
.who-item.mu{color:var(--mu)}
.who-sep{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mu2);padding:10px 12px 4px;border-top:1px solid rgba(56,70,74,.6);margin-top:4px}
.known-accounts{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 18px}
.acct-chip{border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:13px;color:var(--mu);text-decoration:none;transition:border-color .2s,color .2s}
.acct-chip:hover{color:var(--tx);border-color:var(--mu2)}
.acct-chip.on{color:var(--tx);border-color:rgba(31,203,79,.6);background:rgba(31,203,79,.08)}

.mnav{display:none;margin-left:auto;position:relative}
.mnav summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer;padding:8px 2px;font-size:14px;font-weight:500;color:var(--tx)}
.mnav summary::-webkit-details-marker{display:none}
.burger{display:inline-flex;flex-direction:column;gap:5px;width:18px}
.burger i{display:block;height:2px;background:var(--tx);transition:transform .25s}
.mnav[open] .burger i:first-child{transform:translateY(3.5px) rotate(45deg)}
.mnav[open] .burger i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.mnav-panel{position:fixed;left:0;right:0;top:64px;background:rgba(13,21,23,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding:10px var(--gut) 20px;display:grid;max-height:calc(100svh - 64px);overflow:auto;animation:drop .25s ease-out}
.mnav-panel a{padding:13px 0;font-size:16px;font-weight:500;color:var(--mu);text-decoration:none;border-bottom:1px solid rgba(56,70,74,.45)}
.mnav-panel a[aria-current=page]{color:var(--tx);box-shadow:inset 3px 0 0 var(--g);padding-left:12px}
.mnav-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:16px;flex-wrap:wrap}
.mnav-foot .mnav-acc{border:0;padding:0;font-size:13px;display:flex;gap:8px;align-items:center}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (max-width:1180px){
  .links,.who{display:none}
  .mnav{display:block}
}

/* ---------- page frame ---------- */
#main:not(.auth-main){display:block}
.page{max-width:1200px;margin:0 auto;padding:0 var(--gut) 112px}
.page.wide{max-width:1360px}
.page.narrow{max-width:780px}
.page>section,.page>form,.page>.stack,.page>.grid,.page>.tblwrap,.page>details,.page>.statrow,.page>.mgrid,.page>.filters{margin-top:22px}

.ph{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:58px 0 30px;isolation:isolate}
.ph::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);
  background-image:radial-gradient(rgba(159,176,179,.16) 1px,transparent 1.2px);background-size:28px 28px;
  -webkit-mask-image:radial-gradient(ellipse 46% 90% at 72% 30%,#000 10%,transparent 75%);mask-image:radial-gradient(ellipse 46% 90% at 72% 30%,#000 10%,transparent 75%)}
.ph h1{font-size:clamp(30px,3.3vw,46px);margin-top:16px;max-width:22ch;text-wrap:balance}
.ph .lead{margin-top:14px;color:var(--mu);font-size:16px;line-height:1.6;max-width:64ch;text-wrap:pretty}
.ph-actions{display:flex;gap:10px;flex:none}
/* Pitkä yhdyssana otsikossa ("vaatimustenmukaisuusselvitys", "Teollisuuskunnossapito") ei mahdu puhelimen
   leveyteen: tavutus vain kapealla, eikä otsikkolohko saa levitä sanaa leveämmäksi (sivu vuoti 131 px, 14.10.2026). */
.ph-text{min-width:0}
@media (max-width:720px){.ph h1{-webkit-hyphens:auto;hyphens:auto}}
.ph-text>*{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.ph-text>h1{animation-delay:.05s}
.ph-text>.lead{animation-delay:.1s}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.h-sec{font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:19px;letter-spacing:-.01em;line-height:var(--lh-head)}
h2.h-sec.mt{margin-top:26px}
.h-sub{font-family:var(--disp);font-stretch:112%;font-weight:600;font-size:14.5px;line-height:var(--lh-head);margin-bottom:12px;color:var(--tx)}
section>h2.h-sec{margin-bottom:14px}
.stack{display:grid;gap:20px}
.grid{display:grid;gap:20px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.two.tight{gap:14px}
.card>.in{padding:26px}
.after{margin-top:22px}
.ro-note{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--mu);margin-top:4px}
hr.sep{border:0;border-top:1px solid rgba(56,70,74,.6);margin:24px 0}

/* ---------- flash ---------- */
.flash{display:flex;gap:14px;align-items:flex-start;padding:14px 18px;margin-top:18px;border:1px solid var(--line);background:rgba(25,39,43,.8);font-size:14.5px;line-height:1.5;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);animation:rise .45s cubic-bezier(.2,.7,.2,1) both}
.flash p{color:var(--tx)}
.flash-ic{flex:none;width:10px;height:10px;margin-top:6px;background:var(--mu);clip-path:polygon(16% 14%,47% 4%,82% 10%,95% 35%,100% 69%,91% 80%,54% 100%,14% 83%,0 72%,2% 28%)}
.flash.ok{border-color:rgba(31,203,79,.45);background:linear-gradient(100deg,rgba(31,203,79,.12),rgba(25,39,43,.8) 60%)}
.flash.ok .flash-ic{background:var(--g)}
.flash.err{border-color:rgba(240,73,55,.5);background:linear-gradient(100deg,rgba(240,73,55,.12),rgba(25,39,43,.8) 60%)}
.flash.err .flash-ic{background:var(--o)}
.flash.warn{border-color:rgba(243,201,105,.45);background:linear-gradient(100deg,rgba(243,201,105,.10),rgba(25,39,43,.8) 60%)}
.flash.warn .flash-ic{background:#F3C969}
.flash .reasons{margin-top:6px}

/* ---------- pills extras ---------- */
.pills{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center}
.pill.strong{color:#04170A;background:var(--g);border-color:var(--g);font-weight:600}
.pill .dot{width:6px;height:6px}

/* ---------- tables ---------- */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:1px solid var(--line);scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.card .tblwrap{border-top:0}
.tbl{width:100%;border-collapse:collapse;font-size:14px;line-height:var(--lh-ui)}
.tbl th{font-family:var(--disp);font-stretch:125%;font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;line-height:var(--lh-caps);color:var(--mu2);text-align:left;padding:14px 14px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:13px 14px;border-bottom:1px solid rgba(56,70,74,.55);vertical-align:top}
.tbl tbody tr{transition:background .15s}
.tbl tbody tr:hover{background:rgba(255,255,255,.025)}
.tbl th.n,.tbl td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl th.r,.tbl td.r{text-align:right}
.tbl th:first-child,.tbl td:first-child{padding-left:12px}
.tbl th:last-child,.tbl td:last-child{padding-right:12px}
.card .tbl th:first-child,.card .tbl td:first-child{padding-left:12px}
.tbl small.sub,.sub{display:block;font-size:12px;color:var(--mu2);margin-top:2px}
.tbl small.ver{display:block;font-size:11.5px;color:var(--mu2);font-family:ui-monospace,Menlo,monospace}
.tbl code{color:var(--tx);font-size:12.5px}
.tbl tr.dim td{opacity:.5}
.tbl tr.sub-row td{border-bottom-color:rgba(56,70,74,.25)}
.tbl tr.blocked td{background:rgba(240,73,55,.045)}
.tbl tr.blocked td:first-child{box-shadow:inset 3px 0 0 var(--o);padding-left:12px}
.tbl tr.warnrow td:first-child{box-shadow:inset 3px 0 0 #F3C969;padding-left:12px}
.tbl .why{display:block;font-size:12px;color:var(--mu);margin-top:4px;max-width:30ch}
.tbl .why.bad{color:#FF8B79}
.tbl td.costs span{display:block;white-space:nowrap}
.tbl td.costs small{color:var(--mu2);font-size:11px;margin-left:2px}
.tbl td.costs .own{color:var(--g)}
.tbl a.strong{text-decoration:none}
.tbl a.strong:hover{color:var(--g2)}
.w-dot{width:28px}
.hops{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.hop-arrow{display:inline-block;width:6px;height:6px;border-top:1.5px solid var(--mu2);border-right:1.5px solid var(--mu2);transform:rotate(45deg);margin:0 3px 0 1px}
.tbl.log td{font-size:13.5px}
.tbl.audit td.details{font-size:12.5px;color:var(--mu)}
.kvp{display:inline-block;margin:0 12px 2px 0}
.kvp i{font-style:normal;color:var(--mu2)}
code.act{color:var(--g2)}
code.tag{display:inline-block;background:var(--s1);border:1px solid var(--line);padding:1px 6px;margin:0 4px 4px 0;font-size:11.5px}

/* ---------- forms ---------- */
.form{display:grid;gap:16px}
.form.compact{gap:12px}
.form.inline{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px}
.f{display:grid;gap:7px;min-width:0}
.f>span{font-size:12.5px;font-weight:500;color:var(--mu)}
.f>span em{font-style:normal;color:var(--mu2);font-weight:400;margin-left:6px}
.f.grow{flex:1 1 240px}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{
  width:100%;min-width:0;background:#0E181B;border:1px solid var(--line);color:var(--tx);font:inherit;font-size:15px;line-height:20px;min-height:var(--ctl);padding:11px 13px;border-radius:2px;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
input::placeholder,textarea::placeholder{color:#55686C}
input:hover,select:hover,textarea:hover{border-color:#4A5B5F}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--g);box-shadow:0 0 0 3px rgba(31,203,79,.16)}
input:disabled,select:disabled,textarea[readonly]{opacity:.6;cursor:not-allowed}
select{padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239FB0B3' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center}
select option{background:#0E181B}
input.code{font-size:26px;letter-spacing:.32em;text-align:center;font-variant-numeric:tabular-nums;font-family:var(--disp);font-stretch:112%;font-weight:600;padding:12px}
textarea.code-area{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:13px;line-height:1.6;resize:vertical;min-height:320px;tab-size:2}
.actions{display:flex;gap:12px;align-items:center}
.btn.wide{width:100%;min-height:48px;padding:0 20px;font-size:15.5px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.copied{background:var(--g2)}
.row-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.row-actions.end{justify-content:flex-end}
.row-actions form{display:inline}

/* chips (checkbox pills) */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative;display:inline-flex;cursor:pointer}
.chip input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:8px 16px 8px 12px;font-size:14px;color:var(--mu);transition:border-color .2s,background .2s,color .2s}
.chip span::before{content:"";width:14px;height:14px;border-radius:50%;border:1.5px solid var(--mu2);transition:all .2s;flex:none}
.chip small{color:var(--mu2);font-size:11.5px}
.chip input:checked+span{color:var(--tx);border-color:rgba(31,203,79,.6);background:rgba(31,203,79,.08)}
.chip input:checked+span::before{background:var(--g);border-color:var(--g);box-shadow:inset 0 0 0 3px #0E181B}
.chip.eu input:checked+span{border-color:rgba(46,230,166,.55);background:rgba(46,230,166,.07)}
.chip.eu input:checked+span::before{background:var(--mint);border-color:var(--mint)}
.chip input:focus-visible+span{outline:2px solid var(--g);outline-offset:2px}
.chip input:disabled+span{opacity:.6;cursor:not-allowed}
.chip.sm span{padding:6px 12px 6px 10px;font-size:13px}

/* switch */
.switch{position:relative;display:inline-flex;align-items:center;gap:14px;cursor:pointer;font-size:14.5px;color:var(--tx)}
.switch input{position:absolute;opacity:0;width:44px;height:24px;cursor:pointer}
.switch .sw{flex:none;position:relative;width:44px;height:24px;border-radius:999px;background:var(--s1);border:1px solid var(--line);transition:background .25s,border-color .25s}
.switch .sw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--mu);transition:transform .25s cubic-bezier(.2,.7,.2,1),background .25s}
.switch input:checked+.sw{background:rgba(31,203,79,.22);border-color:var(--g)}
.switch input:checked+.sw::after{transform:translateX(20px);background:var(--g)}
.switch input:focus-visible+.sw{outline:2px solid var(--g);outline-offset:2px}
.switch input:disabled+.sw{opacity:.55}

/* segmented tier choice */
.seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.seg.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.seg-opt input:disabled+.seg-body{opacity:.45;cursor:not-allowed}
.cmp-verdict{margin-top:18px}
.seg-note{margin:10px 0 14px}
.seg.four{margin-bottom:14px}
.tbl td.win{color:var(--g2);font-weight:600}
.seg-opt{position:relative;cursor:pointer}
.seg-opt input{position:absolute;opacity:0;inset:0;cursor:pointer}
.seg-body{display:grid;gap:4px;align-content:start;height:100%;padding:14px 16px;border:1px solid var(--line);background:rgba(14,24,27,.6);transition:border-color .2s,background .2s;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.seg-body b{font-family:var(--disp);font-stretch:112%;font-size:16px}
.seg-body small{font-size:12.5px;color:var(--mu);line-height:var(--lh-ui)}
.seg-opt input:checked+.seg-body{border-color:var(--g);background:linear-gradient(160deg,rgba(31,203,79,.16),rgba(14,24,27,.6))}
.seg-opt input:checked+.seg-body b{color:var(--g2)}
.seg-opt input:focus-visible+.seg-body{outline:2px solid var(--g);outline-offset:2px}

.sec-grid{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:28px;align-items:start}
.sec-intro p{margin-top:6px}
.sec-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.sec-head+p{margin-bottom:16px}

/* provider list */
.plist{margin-top:14px;border-top:1px solid rgba(56,70,74,.6)}
.prow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(180px,230px);gap:18px;align-items:center;padding:12px 0;border-bottom:1px solid rgba(56,70,74,.45)}
.pcheck{display:flex;align-items:center;gap:14px;cursor:pointer;min-width:0}
.pcheck input{width:18px;height:18px;accent-color:var(--g);flex:none}
.pname{display:grid;min-width:0}
.pname b{font-weight:600;font-size:14.5px}
.pname small{font-size:12px}
.pmeta{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.pnote{text-align:right}
.inline-sel select{min-height:var(--ctl-sm);padding-top:6px;padding-bottom:6px;font-size:13.5px}

.savebar{position:sticky;bottom:16px;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 16px 14px 22px;margin-top:22px;background:var(--bg2);border:1px solid rgba(31,203,79,.35);clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);box-shadow:0 12px 40px rgba(0,0,0,.35)}

details.adv{display:block}
details.adv>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
details.adv>summary::-webkit-details-marker{display:none}
details.adv>summary::before{content:"";width:8px;height:8px;border-right:1.5px solid var(--g);border-bottom:1.5px solid var(--g);transform:rotate(-45deg);transition:transform .2s;align-self:center}
details.adv[open]>summary::before{transform:rotate(45deg)}
details.adv>.adv-sum{height:auto;clip-path:none}
details.adv>.adv-body{padding-top:0;clip-path:none}
.card>details,.card>summary{display:block}
.yaml-peek summary{cursor:pointer;color:var(--g2);font-size:13px;margin-top:10px}
.yaml-peek.inline summary{margin:0}
.yaml-peek pre,.code-block{margin-top:10px;background:#0B1416;border:1px solid rgba(56,70,74,.6);padding:14px 16px;overflow:auto;font-size:12.5px;line-height:1.6;color:#C9D6D8;max-height:420px}
.hist{margin-top:44px}

/* pending (loosening) */
.pending-card{margin-top:20px}
.pending-card .in{background:linear-gradient(170deg,rgba(52,40,22,.94),rgba(25,39,43,.94))}
.card.warn.pending-card{background:linear-gradient(160deg,rgba(243,201,105,.7),rgba(243,201,105,.12) 50%,rgba(243,201,105,.4))}
.pending-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.reasons{list-style:none;display:grid;gap:6px;margin:12px 0 4px}
.reasons li{position:relative;padding-left:18px;font-size:14.5px}
.reasons li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:2px;background:#F3C969}
.pending-card .row-actions{margin-top:18px}
.pendingbox{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:18px;padding:14px 16px;border:1px dashed rgba(243,201,105,.5);background:rgba(243,201,105,.05)}
.pendingbox p{flex:1 1 300px;font-size:14px}

/* ---------- apps ---------- */
.app-h{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.app-h p{margin-top:4px}
.usage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:22px}
.meter-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px;font-size:13.5px;color:var(--mu)}
.meter-h b{color:var(--tx);font-weight:600}
.bar{height:6px;background:rgba(56,70,74,.5);overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,#14A23D,var(--g2));box-shadow:0 0 12px rgba(31,203,79,.5);transform-origin:left;animation:grow 1s cubic-bezier(.2,.7,.2,1) .15s both}
.bar.hot i{background:linear-gradient(90deg,#C9402F,#FF7A66);box-shadow:0 0 12px rgba(240,73,55,.5)}
.bar.nolimit{background:repeating-linear-gradient(-45deg,rgba(56,70,74,.55) 0 6px,rgba(56,70,74,.2) 6px 12px)}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.app-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:32px;margin-top:26px;padding-top:22px;border-top:1px solid rgba(56,70,74,.55)}
.app-grid .form.compact{grid-template-columns:1fr 1fr}
.app-grid .form.compact .actions{grid-column:1/-1}
.app-grid>div>.muted.small{margin-top:10px}
.card.create{margin-top:28px}
.card.create .h-sec{margin-bottom:16px}
.card.create .muted.small{margin-top:12px}

.secretbox{display:flex;align-items:center;gap:14px;margin:12px 0 14px;padding:16px 16px 16px 18px;background:#0B1416;border:1px solid rgba(31,203,79,.4)}
.secretbox code{flex:1;min-width:0;font-size:15px;color:var(--g2);word-break:break-all;line-height:1.5;user-select:all}
.snippet{margin-top:22px}
.snippet pre{margin-top:8px;background:#0B1416;border:1px solid rgba(56,70,74,.6);padding:14px 16px;overflow:auto;font-size:12.5px;line-height:1.65;color:#C9D6D8}

/* ---------- models ---------- */
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:20px}
.mcard-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:18px}
.mcard-h p{margin-top:2px}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 18px;font-size:14px}
.kv{align-items:baseline}
.kv dt{color:var(--mu);font-size:13px}
.kv dd code{color:var(--tx);word-break:break-all}
.kv.row{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin-top:22px}
.kv.row dd{margin-right:18px}
.offer{display:grid;gap:10px;margin-top:20px;padding-top:18px;border-top:1px solid rgba(31,203,79,.3)}
.offer form{margin-top:2px}
.rollback{margin-top:16px}

/* ---------- cascade stairs (the signature element) ---------- */
.stairs-wrap{position:relative;padding:34px 0 8px}
.stairs{list-style:none;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));align-items:end;gap:0;counter-reset:st}
.stair{display:flex;flex-direction:column;min-width:0}
.stair-card{position:relative;display:grid;gap:8px;align-content:start;padding:18px 18px 16px;margin-right:10px;animation:rise .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * .09s + .1s)}
.stair-no{display:inline-grid;place-items:center;width:30px;height:30px;font-family:var(--disp);font-stretch:118%;font-weight:700;font-size:14px;color:var(--g);border:1.5px solid rgba(31,203,79,.6);clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.stair-model{font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:19px;line-height:var(--lh-head);letter-spacing:-.01em}
.gates{list-style:none;display:grid;gap:4px;font-size:13px;color:var(--mu)}
.gates li{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.gates li::before{content:"";width:6px;height:6px;background:var(--mint);flex:none;transform:translateY(-1px)}
.gates b{color:var(--tx);font-weight:600}
.gates small{color:var(--mu2)}
.gates-none{font-size:13px;color:var(--mu2)}
.riser{height:calc(26px + var(--i) * 44px);background:linear-gradient(180deg,rgba(31,203,79,.20),rgba(31,203,79,.03) 85%);border-top:2px solid var(--g);box-shadow:0 -8px 24px -12px rgba(31,203,79,.7);transform-origin:bottom;animation:riseup .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * .09s)}
.stair+.stair .riser{border-left:1px solid rgba(31,203,79,.35)}
.stair.top .riser{background:linear-gradient(180deg,rgba(31,203,79,.34),rgba(31,203,79,.05) 85%)}
.stair.blocked .riser{border-top-color:var(--o);background:linear-gradient(180deg,rgba(240,73,55,.2),rgba(240,73,55,.02) 85%);box-shadow:0 -8px 24px -12px rgba(240,73,55,.7)}
.stair.blocked .stair-no{color:var(--o);border-color:rgba(240,73,55,.6)}
@keyframes riseup{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.stairs-legend{display:flex;align-items:center;gap:14px;margin-top:12px;font-family:var(--disp);font-stretch:125%;font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mu2)}
.stairs-legend .arrow{flex:1;height:1px;background:linear-gradient(90deg,var(--line),var(--g));position:relative}
.stairs-legend .arrow::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1.5px solid var(--g);border-right:1.5px solid var(--g);transform:rotate(45deg)}

.cascade-form{display:grid;gap:16px;margin-top:34px}
fieldset.stepf{border:0;min-width:0}
fieldset.stepf.newstep{opacity:.82}
fieldset.stepf.newstep:focus-within{opacity:1}
.stepf-h{display:flex;align-items:center;gap:14px;width:100%;margin-bottom:18px;float:left}
.stepf-h+*{clear:both}
.stepf-h .rm{margin-left:auto;font-size:13px;color:var(--mu);display:flex;gap:8px;align-items:center}
.stepf-h .rm input{accent-color:var(--o)}
.stepf-grid{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:28px;align-items:start}
.stepf-grid.three{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.gatesf{display:grid;gap:10px}
.gatef{display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr) minmax(0,200px);gap:12px;align-items:center;padding:10px 12px;background:rgba(14,24,27,.55);border:1px solid rgba(56,70,74,.5)}
.gatef.newgate{border-style:dashed;background:transparent}
.gatef[data-type=none] .thr,.gatef[data-type=none] .f:last-child{opacity:.35}
.gatef[data-type=structure] .thr{visibility:hidden}
.gatef:not([data-type=judge]) .f:last-child select{opacity:.4}
.gatef select{padding-top:8px;padding-bottom:8px;font-size:13.5px}
.thr{display:grid;grid-template-columns:auto minmax(0,1fr) 74px;align-items:center;gap:12px}
.thr .label{font-size:10px}
.thr-in{display:grid;grid-template-columns:minmax(0,1fr) 84px;gap:12px;align-items:center}
.thr input[type=number],.thr-in input[type=number]{padding:8px 8px;font-size:14px;text-align:right;font-variant-numeric:tabular-nums}
.f.thr{grid-template-columns:1fr}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:20px;background:transparent;cursor:pointer;--fill:50%}
input[type=range]::-webkit-slider-runnable-track{height:4px;background:linear-gradient(90deg,var(--g) var(--fill),rgba(56,70,74,.8) var(--fill))}
input[type=range]::-moz-range-track{height:4px;background:rgba(56,70,74,.8)}
input[type=range]::-moz-range-progress{height:4px;background:var(--g)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-6px;background:var(--tx);border:3px solid var(--g);border-radius:50%;box-shadow:0 0 0 4px rgba(31,203,79,.15)}
input[type=range]::-moz-range-thumb{width:12px;height:12px;background:var(--tx);border:3px solid var(--g);border-radius:50%}
input[type=range]:focus-visible{outline:none}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 6px rgba(31,203,79,.35)}

/* ---------- log / audit filters ---------- */
.filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 14px;padding:16px 0 18px}
.filters .f{min-width:180px}
.filters select{font-size:14px}
.filters .chip{align-self:flex-end}
.filters .chip span{min-height:var(--ctl)}
.filters .btn{min-height:var(--ctl)}
.filters-n{margin-left:auto;align-self:flex-end;line-height:var(--ctl)}
.pager{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:22px;color:var(--mu);font-size:14px}

/* ---------- credentials ---------- */
.cred-h{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.cred-h p{margin-top:2px}
.cred-meta{margin-top:12px;color:var(--mu)}
.cred-forms{display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px 24px;margin-top:18px}
.cred-forms .form.inline{flex:1 1 420px}

/* ---------- users ---------- */
.rolef{display:flex;align-items:center;gap:10px}
.rolef select{width:auto;min-height:var(--ctl-sm);padding:6px 32px 6px 10px;font-size:13.5px}

/* ---------- operator ---------- */
.statrow{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,56px);padding:20px 0 4px;border-top:1px solid rgba(56,70,74,.7)}
.stat{display:grid;gap:8px}
.stat b{font-family:var(--disp);font-stretch:118%;font-weight:700;font-size:clamp(20px,2vw,28px);letter-spacing:-.02em;line-height:1.05}
.statlist{list-style:none;display:grid}
.statlist li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid rgba(56,70,74,.45);font-size:14px;flex-wrap:wrap}
.statlist li>span{display:inline-flex;gap:8px;align-items:center}
.dedicated{margin-top:30px}
.dedicated .h-sec{display:flex;align-items:center;gap:12px}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.dcard{display:grid;gap:6px}
.dcard-h{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.dcard-h b{font-family:var(--disp);font-stretch:112%;font-size:17px;flex:1}
.dcard-t{font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:22px}
.dcard-t a{text-decoration:none;color:var(--g2)}
.page>section>h2.h-sec{margin-top:34px}
.offerf{display:inline-flex;gap:8px;align-items:center}
.offerf select{width:220px;max-width:100%;min-height:var(--ctl-sm);padding:6px 32px 6px 10px;font-size:13px}

/* ---------- empty state ---------- */
.empty{display:grid;justify-items:center;text-align:center;gap:10px;padding:56px 24px;margin-top:22px;border:1px dashed rgba(56,70,74,.9);background:radial-gradient(400px 160px at 50% 0,rgba(31,203,79,.06),transparent 70%)}
.empty svg{width:48px;height:48px;color:var(--g);margin-bottom:6px}
.empty h3{font-size:20px}
.empty p{color:var(--mu);max-width:48ch}
.empty-act{margin-top:10px}

/* ---------- auth ---------- */
body.auth{background:var(--bg)}
.auth-shell{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);min-height:100svh}
.auth-side{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:44px clamp(32px,5vw,72px);overflow:hidden;isolation:isolate;border-right:1px solid rgba(56,70,74,.55)}
.auth-side::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(760px 560px at 70% 62%,rgba(31,203,79,.18),transparent 62%),radial-gradient(600px 400px at 0 100%,rgba(31,203,79,.07),transparent 70%)}
.auth-side::after{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(159,176,179,.17) 1px,transparent 1.2px);background-size:28px 28px;-webkit-mask-image:radial-gradient(ellipse 75% 70% at 60% 55%,#000 20%,transparent 78%);mask-image:radial-gradient(ellipse 75% 70% at 60% 55%,#000 20%,transparent 78%)}
.auth-side .brand img{height:24px}
.auth-claim{max-width:560px;margin:auto 0}
.auth-k{font-family:var(--disp);font-stretch:125%;font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--g)}
.auth-h{font-family:var(--disp);font-stretch:108%;font-weight:700;font-size:clamp(34px,3.4vw,52px);line-height:1.04;letter-spacing:-.02em;color:var(--tx);margin-top:20px;text-wrap:balance}
.auth-facts{list-style:none;display:grid;gap:12px;margin-top:40px;padding-top:26px;border-top:1px solid rgba(56,70,74,.7)}
.auth-facts li{display:flex;align-items:center;gap:14px;font-size:15px;color:var(--mu)}
.auth-facts .pill{min-width:84px;justify-content:center}
.auth-stairs{position:absolute;right:-2px;bottom:0;width:min(62%,460px);height:auto;color:var(--g);opacity:.55;z-index:-1}
.auth-stairs circle{fill:var(--g)}
.auth-main{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px var(--gut)}
.auth-box{width:100%;max-width:400px;animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
.auth-box .flash{margin:0 0 22px}
.auth-title{font-size:clamp(28px,2.4vw,34px);margin:16px 0 10px}
.auth-p{color:var(--mu);font-size:15px;margin-bottom:24px}
.auth-box .form{margin-top:22px}
.auth-p+.form{margin-top:0}
.auth-alt{margin-top:22px;font-size:14px;color:var(--mu)}
.auth-alt .linkbtn{font-size:14px;color:var(--mu)}
.auth-brand-m{display:none;margin-bottom:40px}
.enrol{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;padding:18px;margin:4px 0 6px;background:rgba(25,39,43,.7);border:1px solid rgba(56,70,74,.7)}
.qr img{width:150px;height:150px;image-rendering:pixelated;display:block}
.enrol-steps p{font-size:13.5px;color:var(--mu)}
.manual summary{cursor:pointer;font-size:13px;color:var(--g2);margin-top:10px}
.secret{display:block;margin-top:8px;font-size:13px;letter-spacing:.06em;color:var(--tx);word-break:break-all;user-select:all}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .grid.two,.app-grid,.sec-grid,.stepf-grid,.stepf-grid.three{grid-template-columns:minmax(0,1fr)}
  .sec-grid{gap:14px}
  .seg{grid-template-columns:minmax(0,1fr)}
  .seg.four{grid-template-columns:minmax(0,1fr)}
  .gatef{grid-template-columns:minmax(0,1fr)}
  .prow{grid-template-columns:minmax(0,1fr) auto}
  .prow .inline-sel,.prow .pnote{grid-column:1/-1;text-align:left}
  .auth-shell{grid-template-columns:minmax(0,1fr)}
  .auth-side{display:none}
  .auth-brand-m{display:block}
  .auth-main{justify-content:flex-start;padding-top:40px}
}
@media (max-width:720px){
  .ph{flex-direction:column;align-items:flex-start;padding:36px 0 20px}
  .ph h1{font-size:30px}
  .ph .lead{font-size:15px}
  .card>.in{padding:20px}
  .usage{grid-template-columns:minmax(0,1fr);gap:16px}
  .app-h{flex-direction:column}
  .app-grid .form.compact{grid-template-columns:minmax(0,1fr)}
  .form.inline{flex-direction:column;align-items:stretch}
  .form.inline .f{flex:none}
  .tblwrap{margin-right:calc(var(--gut) * -1);padding-right:var(--gut);-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .card .tblwrap{margin-right:0;padding-right:0}
  .tbl{font-size:13.5px}
  .stairs{display:flex;flex-direction:column-reverse;gap:10px}
  .stair{flex-direction:row;align-items:stretch;padding-left:calc(var(--i) * 14px)}
  .stair .riser{order:-1;width:4px;height:auto;flex:none;border-top:0;background:var(--g);box-shadow:0 0 14px rgba(31,203,79,.5);transform-origin:top}
  .stair.blocked .riser{background:var(--o)}
  .stair+.stair .riser{border-left:0}
  .stair-card{flex:1;margin:0;background:rgba(25,39,43,.7);border:1px solid rgba(56,70,74,.6);border-left:0;padding:14px 16px}
  .stairs-legend{display:none}
  .filters .f{min-width:0;flex:1 1 150px}
  .filters-n{margin-left:0;width:100%}
  .savebar{flex-direction:column;align-items:stretch;bottom:10px;padding:12px}
  .savebar .muted{display:none}
  .secretbox{flex-direction:column;align-items:stretch}
  .enrol{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
  .mgrid{grid-template-columns:minmax(0,1fr)}
  .row-actions.end{justify-content:flex-start}
  .statrow{gap:20px 28px}
}
@media (prefers-reduced-motion:reduce){
  .bar i,.riser,.stair-card,.ph-text>*,.auth-box,.flash{animation:none!important}
}
.tbl td .row-actions{flex-wrap:nowrap}
.form-intro{display:grid;gap:6px;margin-bottom:4px}
.form-intro p{max-width:80ch}
.stepf-grid.three+p{margin-top:16px}
@media (max-width:720px){
  .tblwrap.stackwrap{margin-right:0;padding-right:0;-webkit-mask-image:none;mask-image:none;overflow:visible}
  .tbl.stack-m thead{display:none}
  .tbl.stack-m,.tbl.stack-m tbody{display:block}
  .tbl.stack-m tr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:14px 0;border-bottom:1px solid rgba(56,70,74,.55)}
  .tbl.stack-m td{display:block;padding:0;border:0}
  .tbl.stack-m td:first-child{flex:1 1 auto}
  .tbl.stack-m td[data-label]{flex:1 1 100%;font-size:12.5px;color:var(--mu)}
  .tbl.stack-m td[data-label]::before{content:attr(data-label) " ";color:var(--mu2)}
  .tbl.stack-m td.r{flex:1 1 100%;text-align:left}
  .tbl.stack-m tr.blocked td:first-child{box-shadow:none}
}
@media (max-width:480px){
  .topbar-in{gap:14px}
  .brand{gap:10px;min-width:0}
  .brand-tag{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:10px}
  .mnav-cur{display:none}
}
@media (max-width:720px){
  .stair{padding-left:0}
  .stair .riser{width:calc(4px + var(--i) * 3px)}
}
@media (max-width:980px){
  .gatef[data-type=structure] .thr,.gatef[data-type=structure] .f:last-child,
  .gatef[data-type=none] .thr,.gatef[data-type=none] .f:last-child,
  .gatef[data-type=confidence] .f:last-child{display:none}
}
@media (max-width:720px){
  .stairs{align-items:stretch}
  .tbl.log.stack-m td.c-app{flex:1 1 auto;color:var(--mu)}
  .tbl.log.stack-m td.c-path,.tbl.log.stack-m td.c-status{flex:1 1 100%}
  .tbl.log.stack-m td.c-status{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
  .tbl.log.stack-m td.c-status .why{flex-basis:100%;margin-top:0}
  .tbl.log.stack-m td.n[data-label]{flex:0 1 auto;text-align:left;white-space:normal}
  .tbl.log.stack-m td.n small.sub{display:none}
  .tbl.log.stack-m td.costs span{display:inline;margin-right:8px}
  .tbl.log.stack-m td[data-label]:not(.n){flex:1 1 100%}
  .tbl.log.stack-m td small.ver{display:inline;margin-left:6px}
}
@media (max-width:720px){
  .tbl.stack-m tr.blocked{background:rgba(240,73,55,.05);box-shadow:inset 3px 0 0 var(--o);padding-left:12px}
  .tbl.stack-m tr.blocked td{background:none}
}
.offer .pill{justify-self:start}

/* operator model catalog */
.catalog-form{flex-wrap:wrap}
.catalog-form .f{min-width:180px}
.catalog-form .pick{flex-basis:100%;border:0;padding:0;margin:0}
.catalog-form .checks{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:8px}
.catalog-form .chk{display:inline-flex;align-items:flex-start;gap:8px;font-size:14px;color:var(--tx);cursor:pointer}
.catalog-form .chk input{accent-color:var(--g);width:16px;height:16px}
.catalog-form .form-actions{flex-basis:100%}


/* ---------- yhteiset perusteet (UI-läpikäynti 11.10.2026) ---------- */
/* Kortin otsikko ei saa istua sisällön päällä: sama 14px kuin osioissa. */
.card>.in>.h-sec{margin-bottom:14px}
.card>.in>.h-sec+p.small,.card>.in>.h-sec+p.muted{margin-top:-6px;margin-bottom:14px}
.card .form+.muted.small,.card .form+p.small{margin-top:14px}
/* Pilleri taulukon rivillä: ei kasvata riviä eikä putoa perusviivan alle. */
.tbl td .pill{margin-block:-2px;vertical-align:middle}
.tbl td>.pill:first-child{vertical-align:baseline}
/* Merkityt rivit (estetty/varoitus): sama vasen reuna kaikilla riveillä — ei siksakkia. */
.tbl:has(tr.blocked,tr.warnrow) tr>:first-child{padding-left:12px}
.card .tbl:has(tr.blocked,tr.warnrow) tr>:first-child{padding-left:12px}
.tbl code,.tbl small.ver{white-space:nowrap}
/* Numerokentät: ei selaimen valkoisia nuolinappeja tummaan teemaan. */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
/* Valintaruudut teeman väreissä (natiivi valkoinen ruutu oli sivun kirkkain elementti). */
input[type=checkbox]:not(.chip input):not(.switch input){-webkit-appearance:none;appearance:none;width:18px;height:18px;flex:none;margin:0;border:1.5px solid var(--mu2);border-radius:3px;background:#0E181B;cursor:pointer;display:inline-grid;place-content:center;transition:background .15s,border-color .15s}
input[type=checkbox]:not(.chip input):not(.switch input)::before{content:"";width:10px;height:10px;clip-path:polygon(14% 44%,0 59%,40% 100%,100% 22%,86% 8%,40% 70%);background:#04170A;transform:scale(0);transition:transform .12s}
input[type=checkbox]:not(.chip input):not(.switch input):checked{background:var(--g);border-color:var(--g)}
input[type=checkbox]:not(.chip input):not(.switch input):checked::before{transform:scale(1)}
input[type=checkbox]:not(.chip input):not(.switch input):focus-visible{outline:2px solid var(--g);outline-offset:2px}
input[type=checkbox]:not(.chip input):not(.switch input):disabled{opacity:.45;cursor:not-allowed}
/* Kaksirivinen kytkin: vipu ensimmäisen rivin kohdalle. */
.switch{align-items:flex-start}
.switch .sw{margin-top:-1px}
/* Kosketus: pienet napit ja tekstilinkit vähintään 40px osumaksi puhelimessa. */
@media (max-width:720px){
  .btn.sm{min-height:40px}
  .tbl .row-actions{gap:20px}
  .tbl .row-actions .linkbtn{padding:10px 0}
}
.err-page{padding:120px var(--gut);display:grid;justify-items:start;gap:18px}
.err-page .lead{color:var(--mu);font-size:16px;line-height:var(--lh-body);max-width:56ch}


/* ---------- alue: ylläpito ja live ---------- */
/* Mobiilipinot: ylläpidon taulukot korteiksi (sama .stack-m kuin asiakkaan lokissa). */
@media (max-width:720px){
  .tbl.stack-m.op td.n[data-label]{flex:0 1 auto;text-align:left;white-space:normal;font-size:12.5px;color:var(--mu)}
  .tbl.stack-m.op td.n.own-tx{color:var(--g)}
  .tbl.stack-m.op td.m-hide,.tbl.stack-m.op td.c-ded.none{display:none}
  .tbl.stack-m.op tr.sub-row{padding-top:8px}
  .tbl.stack-m.op tr.sub-row td.c-model{display:none}
  .tbl.stack-m.op td.c-model,.tbl.stack-m.op td.c-act{flex:1 1 100%}
  .tbl.stack-m.op td.c-path{flex:0 0 auto}
  .tbl.stack-m.op td.r .offerf{display:flex;width:100%}
  .tbl.stack-m.op td.r .offerf select{flex:1;width:auto;min-width:0}
  .tbl.stack-m.op td.r{min-width:0}
  .tbl.stack-m.insts td:first-child{flex:none;align-self:flex-start;padding-top:6px}
  .tbl.stack-m.insts td:nth-child(2){flex:1 1 0;min-width:0}
  .tbl.stack-m.audit td.details{flex:1 1 100%}
  .tbl.stack-m.audit tr.warnrow{box-shadow:inset 3px 0 0 #F3C969;padding-left:12px}
  .tbl.stack-m.audit tr.warnrow td:first-child{box-shadow:none;padding-left:0}
  .tbl.stack-m.audit td.nowrap{flex:1 1 100%;font-size:12.5px;color:var(--mu2)}
  /* Lukurivi: kaksi saraketta tasaisesti, ei rikkonaista rivitystä. */
  .statrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
  .stat b{overflow-wrap:anywhere}
}
.stat b small.of{font-size:.55em;font-weight:600;color:var(--mu);letter-spacing:0}

/* Malliversiot: teksti, valinta ja nappi samalle keskilinjalle. */
.tbl.versions td{vertical-align:middle}

/* BYOK-tila: pilleri ja tila-sana kiinteissä paikoissa, pillerit samaan sarakkeeseen. */
.statlist.creds .cred-st{gap:10px}
.statlist.creds .mode{display:inline-block;min-width:40px;text-align:left}

/* Palveluntarjoajat. */
.dgrid{grid-template-columns:repeat(auto-fill,minmax(360px,1fr))}
@media (max-width:420px){.dgrid{grid-template-columns:minmax(0,1fr)}}
.tbl.insts th.c-mdl,.tbl.insts td.c-mdl{padding-left:32px}

/* Mallikatalogi: taulukko mahtuu leveyteen, tunnisteet eivät katkea kesken. */
.tbl.catalog td.c-model{min-width:150px}
.tbl.catalog td.c-model b{margin-right:4px}
.tbl.catalog small.sub{white-space:nowrap}
.tbl.catalog td.c-inst .srv{display:flex;align-items:center;flex-wrap:wrap;gap:6px;white-space:nowrap}
.tbl.catalog td.c-inst .srv+.srv{margin-top:6px}
details.how{margin-top:14px;max-width:80ch;font-size:14px;line-height:var(--lh-body);color:var(--mu)}
details.how>summary{display:inline-flex;align-items:center;gap:10px;cursor:pointer;list-style:none;color:var(--g2);font-size:13.5px;line-height:var(--lh-ui)}
details.how>summary::-webkit-details-marker{display:none}
details.how>summary::before{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .2s}
details.how[open]>summary::before{transform:rotate(45deg)}
details.how ul{margin:10px 0 0;padding-left:18px;display:grid;gap:6px}
.form.catalog-form{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));align-items:end;gap:16px 14px}
.catalog-form .f{min-width:0}
.catalog-form .pick,.catalog-form .form-actions{grid-column:1/-1}
.catalog-form .chk{display:flex;align-items:center;gap:10px;line-height:var(--lh-ui)}
.catalog-form .chk>span{min-width:0}
.catalog-form .chk small{margin-left:4px;white-space:nowrap}
@media (max-width:720px){
  .form.catalog-form{grid-template-columns:minmax(0,1fr)}
  .catalog-form .checks{flex-direction:column;gap:12px}
}

/* Tapahtumaloki: tiedot luettavina pareina. */
.tbl.audit .kvp{white-space:nowrap}
.catalog-form .f.wide{grid-column:span 2}
@media (max-width:720px){.catalog-form .f.wide{grid-column:auto}}
.catalog-form .chk{align-items:flex-start}
.catalog-form .chk input{margin-top:1px}
@media (max-width:720px){
  .tbl.stack-m.op:not(.insts) td:first-child{flex:1 1 100%}
  .tbl.stack-m.versions td:first-child{flex:1 1 auto}
  .statrow .label{letter-spacing:.08em}
}
/* ---------- alue: raportit ja lomakkeet ---------- */
/* Avaimet: puuttuva pakollinen avain näkyy; käyttämättömän avaimen lomake on toissijainen. */
.cred.missing{background:linear-gradient(160deg,rgba(240,73,55,.55),rgba(255,255,255,.04) 45%,rgba(240,73,55,.2))}
.cred-warn{color:#FF8B79;font-weight:500}
.cred-more{flex:0 1 auto}
.cred-more[open]{flex:1 1 100%}
details.cred-more>summary{width:max-content;align-items:center;line-height:var(--lh-ui);gap:10px;min-height:var(--ctl-sm);font-size:14px;font-weight:500;color:var(--g2)}
.cred-more>summary:hover{color:var(--tx)}
.cred-more>.form{margin-top:12px}
/* Käyttäjät: rivit keskitettyinä ja yhtä korkeina, roolivalinta rivinsisäisen ohjaimen korkuinen. */
.tbl.users td{vertical-align:middle;height:calc(var(--ctl-sm) + 20px);padding-block:10px}
.tbl.users td>.pill:first-child{vertical-align:middle}
.tbl.users .rolef select{height:var(--ctl-sm)}
@media (max-width:720px){
  .tbl.users td{height:auto;padding-block:0}
}
/* ---------- alue: asiakkaan näkymät ja kirjautuminen ---------- */
/* Sovellukset: avaintaulukon toiminnot mahtuvat sarakkeeseen (rivittyvät tarvittaessa). */
.app .tbl td .row-actions{flex-wrap:wrap;gap:4px 14px}
.app .tbl td .sub{white-space:nowrap}
/* "ei rajaa": ei raidallista palkkia jokaiselle mittarille, teksti kertoo jo. */
.bar.nolimit{display:none}
/* Lomakkeen nappi samaa korkeutta kuin kentät (44px), myös puhelimessa. */
.app-grid .form.compact .actions .btn{min-height:var(--ctl)}
.filters .btn.sm{min-height:var(--ctl)}

/* Tallennuspalkki: puhelimessa koko leveys, ei leikattuja kulmia, kotipalkin turvaväli. */
@media (max-width:720px){
  .savebar{margin-inline:calc(var(--gut) * -1);bottom:0;clip-path:none;border-width:1px 0 0;padding:12px var(--gut) calc(12px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px rgba(0,0,0,.4)}
}

/* Politiikka: mallisirut eivät näytä valituilta, kun rajaus on pois päältä. */
.card:has(input[name=restrict_models]:not(:checked)) .chips.models .chip,
.chips.models.off .chip{pointer-events:none}
.card:has(input[name=restrict_models]:not(:checked)) .chips.models .chip span,
.chips.models.off .chip span{opacity:.42;filter:saturate(.2)}

/* Loki: syy- ja versiorivit eivät pätki lyhyitä lauseita; pitkä versio katkeaa pisteisiin. */
.tbl.log .why{max-width:none;min-width:22ch}
.tbl.log .why.esc{color:var(--mint)}
.tbl.log td.c-status{min-width:200px}
.tbl.log small.ver{max-width:24ch;overflow:hidden;text-overflow:ellipsis}
.tbl.log .hops{margin-top:6px}
.tbl.log td.costs .sub{white-space:nowrap;margin-top:2px}
.tbl.log td.c-app .pill{margin-left:6px}
@media (max-width:720px){
  .tbl.stack-m td:first-child,.card .tbl.stack-m td:first-child{padding-left:0}
  .tbl.stack-m:has(tr.blocked,tr.warnrow) tr{padding-left:12px}
  .tbl.stack-m td.nil{display:none}
  .tbl.log.stack-m td.c-app{margin-left:auto;text-align:right;flex:0 1 auto}
  .tbl.log.stack-m td.costs .sub{display:inline;margin:0 0 0 6px}
  .tbl.log.stack-m td.c-status .why{min-width:0}
}

/* Rinnakkaiset dt/dd-parit: puhelimessa kaksi saraketta, pari ei koskaan halkea. */
.kv.row.pairs{gap:8px 32px}
.kv.row.pairs>div{display:flex;align-items:baseline;gap:8px;min-width:0}
.kv.row.pairs dd{margin-right:0}
@media (max-width:720px){
  .kv.row.pairs{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 14px}
  .kv.row.pairs>div{display:contents}
}
.period{display:inline-flex;gap:4px;flex-wrap:wrap}
.period a,.period b{display:inline-block;padding:1px 9px;border-radius:999px;font-size:13px;line-height:20px;text-decoration:none;border:1px solid transparent}
.period a{color:var(--g2)}
.period a:hover{border-color:var(--line)}
.period b.on{color:var(--tx);font-weight:600;border-color:rgba(31,203,79,.55);background:rgba(31,203,79,.1)}

/* Päätösmallien vertailu */
section>h2.h-sec+p.muted{margin:-6px 0 14px}
.cal-empty{padding:16px 0;border-top:1px solid var(--line);color:var(--mu);font-size:14px}
.tbl .m-prov{display:none}
@media (max-width:720px){
  .tbl.cmp th{white-space:normal;vertical-align:bottom}
  .tbl.cmp td:first-child{font-size:13px}
  .tbl.cmp td.n[colspan]{white-space:normal}
  .tbl.cmp th,.tbl.cmp td{padding-left:8px;padding-right:8px}
  .tbl.calib.stack-m td:first-child{flex-basis:100%;font-weight:600;color:var(--tx)}
  .tbl.calib.stack-m td.m-prov{display:block;flex:0 0 120px;font-size:12.5px;color:var(--mu)}
  .tbl.calib.stack-m td.n[data-label]{flex:0 1 auto;font-size:12.5px}
  .tbl.pairs.stack-m td.n[data-label]{flex:1 1 100%;text-align:left;white-space:normal}
  .tbl.pairs.stack-m td.n small.sub{display:inline;margin-left:6px}
  .tbl.hist-t.stack-m td:first-child::before{content:"#"}
  .tbl.hist-t.stack-m td.n{flex:0 0 auto;text-align:left}
  .tbl.hist-t.stack-m td.c-st{flex:1 1 auto}
  .tbl.hist-t.stack-m td[data-label]{flex:0 1 auto;margin-right:10px}
  .tbl.hist-t.stack-m td.c-yaml{flex:1 1 100%}
}

.hist .yaml-peek summary{list-style:none;display:inline-flex;align-items:center;gap:8px}
.hist .yaml-peek summary::-webkit-details-marker{display:none}
.hist .yaml-peek summary::before{content:"";width:6px;height:6px;border-right:1.5px solid var(--g);border-bottom:1.5px solid var(--g);transform:rotate(-45deg);transition:transform .2s}
.hist .yaml-peek[open] summary::before{transform:rotate(45deg)}

/* Kaskadi: lyhyet valintatekstit, tila valinnan alla. */
.f-state{font-size:12px;color:var(--mu2);line-height:var(--lh-ui)}
.f-state.bad{color:#FF8B79}
.thr input.dec,.thr-in input.dec{padding:8px;font-size:14px;text-align:right;font-variant-numeric:tabular-nums}

/* Malliversiot: hinta yhdellä rivillä */
.mcard .kv dd .muted{font-size:12.5px}

/* ---------- kirjautuminen ---------- */
.auth-box .form{gap:20px}
.auth-alt{margin-top:20px}
input.code{min-height:48px;padding:8px 12px;font-size:22px;line-height:30px}
input.code::placeholder{color:#3E5054;letter-spacing:.32em}
.enrol{grid-template-columns:auto minmax(0,1fr);gap:18px;padding:16px;align-items:start}
.auth-box .form>.enrol{margin:0}
.qr img{width:120px;height:120px}
.enrol-steps p{line-height:var(--lh-ui)}
.manual summary{list-style:none;display:inline-flex;align-items:center;gap:8px}
.manual summary::-webkit-details-marker{display:none}
.manual summary::before{content:"";width:6px;height:6px;border-right:1.5px solid var(--g);border-bottom:1.5px solid var(--g);transform:rotate(-45deg);transition:transform .2s}
.manual[open] summary::before{transform:rotate(45deg)}
@media (max-width:720px){
  .enrol{grid-template-columns:auto minmax(0,1fr);justify-items:start;text-align:left}
}
@media (max-width:980px){
  .auth-main{align-items:stretch}
  .auth-brand-m,.auth-box{width:100%;max-width:400px;margin-inline:auto}
}

/* ---------- osion välilehdet (ylävalikon ryhmän näkymät) ---------- */
.subnav{border-bottom:1px solid rgba(56,70,74,.55);background:rgba(13,21,23,.6)}
.subnav-in{max-width:1200px;margin:0 auto;padding:0 var(--gut);display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.subnav-in::-webkit-scrollbar{display:none}
.subnav a{position:relative;flex:none;display:inline-flex;align-items:center;min-height:var(--ctl);padding:0 12px;font-size:13.5px;font-weight:500;line-height:1;color:var(--mu);text-decoration:none;white-space:nowrap;transition:color .2s}
.subnav a:first-child{margin-left:-12px}
.subnav a:hover{color:var(--tx)}
.subnav a[aria-current=page]{color:var(--tx)}
.subnav a[aria-current=page]::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--g)}
.who-item[aria-current=page]{color:var(--g2)}
body:has(.subnav) .page>.ph:first-child{padding-top:38px}
@media (max-width:720px){
  .tbl.audit .kvp{white-space:normal}
  .tbl.audit td.details,.tbl.audit td{overflow-wrap:anywhere;min-width:0}
}
/* Poista avain samaan riviin ja kokoon kuin "Vaihda avain" */
.cred-forms>form>.linkbtn{display:inline-flex;align-items:center;min-height:var(--ctl-sm);font-size:14px;line-height:var(--lh-ui)}
/* Porrastus: mallivalitsin samalle keskilinjalle kuin porttirivin valitsimet (porttilaatikon kehys + täyte) */
@media (min-width:981px){.stepf-grid>.f>select{margin-top:10px}}
/* Mallikatalogi: hintatarkistus */
.pricecheck{margin-bottom:36px}
.pricecheck .sec-head{align-items:flex-start;margin-bottom:14px}
.pricecheck .sec-head .muted{margin-top:4px}
.pricecheck .tbl+.muted,.pricecheck .tblwrap+.muted{margin-top:12px}
.pricecheck .pill{white-space:nowrap}
.pc-ok{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--mu)}
/* Viistetty kulma + reunaviiva: clip-path leikkaa reunan pois kulmasta, joten viisto
   piirretään erikseen (--cc = viisteen koko, --bc = reunan väri, --bw = reunan paksuus).
   Jokainen elementti, jolla on sekä border että viistävä clip-path, kuuluu tähän listaan
   (tests/test_css_integrity.py valvoo). */
.seg-body,.flash,.stair-no,.dp{position:relative}
.seg-body::before,.seg-body::after,.flash::before,.flash::after,.savebar::before,.savebar::after,.stair-no::before,.stair-no::after,.dp::before,.dp::after{
  content:"";position:absolute;inset:calc(var(--bw,1px) * -1);pointer-events:none;background:var(--bc);transition:background .2s;
  --w:calc(var(--bw,1px) * 2.1)}
.seg-body::before,.flash::before,.savebar::before,.stair-no::before,.dp::before{clip-path:polygon(var(--cc) 0,calc(var(--cc) + var(--w)) 0,0 calc(var(--cc) + var(--w)),0 var(--cc))}
.seg-body::after,.flash::after,.savebar::after,.stair-no::after,.dp::after{clip-path:polygon(100% calc(100% - var(--cc)),100% calc(100% - var(--cc) - var(--w)),calc(100% - var(--cc) - var(--w)) 100%,calc(100% - var(--cc)) 100%)}
.seg-body{--cc:8px;--bc:var(--line)}
.seg-opt input:checked+.seg-body{--bc:var(--g)}
.flash{--cc:10px;--bc:var(--line)}
.flash.ok{--bc:rgba(31,203,79,.45)}
.flash.err{--bc:rgba(240,73,55,.5)}
.flash.warn{--bc:rgba(243,201,105,.45)}
.savebar{--cc:12px;--bc:rgba(31,203,79,.35)}
.stair-no{--cc:6px;--bw:1.5px;--bc:rgba(31,203,79,.6)}
.stair.blocked .stair-no{--bc:rgba(240,73,55,.6)}
.dp{--cc:12px;--bc:rgba(31,203,79,.45)}
@media (max-width:720px){.savebar::before,.savebar::after{display:none}}
/* Sovellukset: avaimen käyttöindikaattori */
.act{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;line-height:var(--lh-ui);color:var(--tx)}
.act>i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--mu2)}
.act-live>i{background:var(--g);box-shadow:0 0 0 0 rgba(31,203,79,.6);animation:act-pulse 1.8s ease-out infinite}
.act-active>i{background:var(--g)}
.act-idle{color:#F3C969}.act-idle>i{background:#F3C969}
.act-unused{color:var(--mu)}.act-unused>i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--mu2)}
.act-new>i{background:var(--mint)}
.act-none{color:var(--mu)}.act-none>i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--mu2)}
@keyframes act-pulse{0%{box-shadow:0 0 0 0 rgba(31,203,79,.55)}100%{box-shadow:0 0 0 8px rgba(31,203,79,0)}}
@media (prefers-reduced-motion:reduce){.act-live>i{animation:none}}
.app-act{margin-top:8px}
.unused-note{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;padding:10px 14px;margin-bottom:12px;border:1px dashed rgba(243,201,105,.4);background:rgba(243,201,105,.05)}
.unused-note p{color:var(--tx)}
.revoked-keys ul{list-style:none;display:grid;gap:6px;margin-top:10px}
.revoked-keys code{color:var(--mu)}
/* Kierrätys: siirtymäajan ohje ja vanhan avaimen tila */
.rotate-note{display:grid;gap:6px;margin-top:16px;padding:12px 14px;border-left:2px solid #F3C969;background:rgba(243,201,105,.06)}
.rotate-note p{color:var(--tx)}
.warn-t{color:#F3C969}
/* Peräkkäiset kortit ilman .stack-käärettä (esim. lomakkeen sisällä) eivät saa olla kiinni toisissaan */
form>.card+.card,.page>.card+.card{margin-top:20px}
/* Avattavan osion otsikkorivi: otsikon oma marginaali ei saa siirtää sitä pois nuolen keskilinjalta */
details.adv>summary>*,.card>.in.adv-sum>.h-sec{margin:0}
.manual summary{margin-top:10px;line-height:var(--lh-ui)}
/* Otsikko + selite samalla rivillä: tiivis rivikorkeus, jotta laatikon keskikohta = tekstin keskikohta */
details.adv>summary.adv-sum>*{line-height:1.15}
/* Otsikko + selite voi rivittyä (mobiili): nuoli pysyy otsikkorivillä, ei rivien välissä */
details.adv>summary.adv-sum{align-items:flex-start}
details.adv>summary.adv-sum::before{align-self:flex-start;margin-top:calc((19px * 1.15 - 8px) / 2)}
details.adv>summary.adv-sum>.muted{align-self:center}
.manual summary{align-items:flex-start}
.manual summary::before{margin-top:calc((13px * 1.45 - 6px) / 2)}
/* Sovellusten arkistointi */
.app-meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 14px;margin-top:4px}
.app-h .app-meta p{margin-top:0}
.app-meta form{display:inline-flex}
.app-meta .linkbtn{line-height:var(--lh-ui);color:var(--mu)}
.app-meta .linkbtn:hover{color:var(--tx)}
details.archived-apps>p{margin-top:10px}
details.archived-apps ul{list-style:none;padding-left:0;gap:0}
details.archived-apps li{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 18px;padding:10px 0;border-top:1px solid var(--line)}
details.archived-apps li:first-child{border-top:0}
details.archived-apps .arch-name b{color:var(--tx);font-weight:600}
details.archived-apps .linkbtn{line-height:var(--lh-ui)}
/* Liput: lainkäyttöalueet */
/* Lippu + nimi (ui.juris / ui.cls). Kaikilla alueilla sama neutraali ulkoasu: väri ei ohjaa asiakasta
   kohti mitään aluetta eikä siitä pois. "Oma" on oma merkkinsä lipun vieressä (kapasiteetin omistaja). */
.flag{display:block;flex:none;width:18px;height:12px;border-radius:2px;overflow:hidden}
.flag .fe{fill:none;stroke:rgba(255,255,255,.18);stroke-width:1}
.pill.juris{gap:6px;padding-left:7px}
.juris-grp{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;white-space:nowrap}
.tbl td .juris-grp{margin-block:-2px}
.juris.bare{display:inline-flex;align-items:center;gap:6px;vertical-align:top;margin-right:8px;color:var(--mu)}
.chip span .flag{margin-right:-1px}
.tbl.catalog td.c-inst .juris-grp{margin:0 3px 0 0}
/* Asiakkaan hallinta (ylläpito) */
.adm-head{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;margin:-6px 0 8px}
.card>.in>.adm-head>.h-sec{margin:0}
.adm-head+p.small{margin-top:0;margin-bottom:14px}
.adm .statlist+.adm-form,.adm .tblwrap+.adm-sub{margin-top:22px}
.adm .adm-form+p.small{margin-top:12px}
.adm-state{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid rgba(56,70,74,.45)}
.adm-state p{flex:1 1 240px}
.adm-state form{flex:none}
.adm-sub{margin-bottom:12px}
.adm-wrap{flex-wrap:wrap;justify-content:flex-end;text-align:right;min-width:0;overflow-wrap:anywhere}
.adm-note{margin-top:14px}
.tbl td.r .linkbtn{white-space:nowrap}
.tbl.adm-apps td.r form{display:inline}
.tbl.tenants td.c-manage{width:1%;white-space:nowrap}
.tbl.tenants tr.linkrow>td{vertical-align:middle}
@media (min-width:721px){.brand-tag{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
@media (max-width:720px){
  .tbl.stack-m.op.adm-users td:first-child,.tbl.stack-m.op.adm-apps td:first-child{flex:1 1 100%}
  .tbl.stack-m.op td.r .row-actions,.tbl.stack-m.op.adm-apps td.r{flex:1 1 100%}
  .tbl.tenants td.c-manage{flex:1 1 100%;width:auto}
  .adm-wrap{text-align:left;justify-content:flex-start}
}

/* Porrastus: selitteet */
.flow-wrap{display:grid;gap:14px;margin-top:8px}
.flow{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.flow>li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start}
.flow>li>div{display:grid;gap:4px}
.flow b{font-size:14.5px;line-height:30px;color:var(--tx)}
.flow small{font-size:12.5px;color:var(--mu);line-height:var(--lh-ui)}
.gatef .gate-hint{display:none;grid-column:1/-1;order:1}
.gatef[data-type=structure] .gate-hint[data-for=structure],.gatef[data-type=decision] .gate-hint[data-for=decision],
.gatef[data-type=confidence] .gate-hint[data-for=confidence],.gatef[data-type=judge] .gate-hint[data-for=judge]{display:block}
.stream-hint{display:none}
.f:has(option[value=resolve_first]:checked) .stream-hint[data-for=resolve_first],
.f:has(option[value=fixed]:checked) .stream-hint[data-for=fixed]{display:block}
.cascade-form .form-intro p{max-width:none}
.flow small,.flow-wrap>p,.cascade-form .f-state,.cascade-form p.small,.cascade-form .seg-body small{text-wrap:pretty}
@media (max-width:980px){.flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.flow{grid-template-columns:minmax(0,1fr);gap:14px}}
/* Rivitys: luettavuus */
/* Periaate (mitattu tests/manual/ui_audit.py "rivitys"): lyhyt nimiö mahtuu riville — tila tulee
   asettelusta, ei pienemmästä fontista; lauseet ladotaan ilman leskiä (pretty), ei tasapainottaen —
   balance kaventaisi kappaleen mielivaltaiseksi puolikkaaksi. Tasapainoon vain kapeiden komponenttien
   vihjeet, joiden leveyden palsta jo määrää. Perussäännöt (otsikot balance, leipäteksti pretty): tokens.css. */
.f>span em,.seg-body small,.f-state,.why,.switch>span:not(.sw),.kv dd,.lv-empty>span{text-wrap-style:balance}
/* Lomakkeen vihje omalle rivilleen nimen alle: nimi ei katkea kesken, vihje rivittyy palstaansa. */
.f>span em{display:block;margin:3px 0 0}
/* Lomakkeen esittelykappale kortin levyinen (80ch jätti sen puolikkaaksi koko leveiden kenttien yllä). */
.form-intro p{max-width:none}
/* Politiikka: osion nimi ("Kolmannen osapuolen pilvet") mahtuu esittelypalstaan yhdelle riville. */
.sec-grid{grid-template-columns:minmax(0,300px) minmax(0,1fr)}
@media (max-width:720px){.sec-grid{grid-template-columns:minmax(0,1fr)}}
/* Loki ja mallikatalogi: sovelluksen tai mallin nimi on yksi asia — ei katkea sanojen väliltä. */
.tbl td.c-model b{white-space:nowrap}
@media (min-width:721px){.tbl.log td.c-app{white-space:nowrap}}
/* Dedikoitu instanssi: nimi pysyy yhtenä, pilleri siirtyy tarvittaessa seuraavalle riville. */
.dcard-h{flex-wrap:wrap;row-gap:6px}
.dcard-h b{flex:1 0 auto;max-width:100%}
/* Arkistoidut sovellukset: tunnistetiedot omalle rivilleen nimen alle. */
details.archived-apps .arch-name>.muted{display:block;margin-top:2px}
@media (max-width:720px){
  /* Lukurivi puhelimessa: nimiö vasemmalle, luku oikealle — versaalinimiö ei katkea kahteen palstaan. */
  .statrow{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding-top:6px}
  .statrow .stat{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid rgba(56,70,74,.45)}
  .statrow .stat:last-child{border-bottom:0}
  .statrow .stat b{font-size:20px;text-align:right}
  .statrow .label{letter-spacing:.12em}
  /* TOTP-käyttöönotto: koodi + ohje vierekkäin, "Syötä avain käsin" koko leveydeltä alle. */
  .enrol-steps{display:contents}
  .enrol .manual{grid-column:1/-1}
  .enrol .manual summary{margin-top:0}
  /* Politiikka: palveluntarjoajan nimi koko leveydelle, liput ja merkit sen alle nimen linjaan. */
  .prow{grid-template-columns:minmax(0,1fr);row-gap:8px}
  .prow .pmeta{justify-content:flex-start;padding-left:32px}
  /* Live-kartta tyhjänä: kapeassa porraspalstassa kumpikin lause omalle rivilleen. */
  .lv-empty>span{display:block}
  /* Päätösmallien vertailu: mittarin nimi omalle rivilleen, arvot sen alle mallien sarakkeisiin. */
  .tbl.cmp,.tbl.cmp thead,.tbl.cmp tbody{display:block}
  .tbl.cmp tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:1px solid rgba(56,70,74,.55)}
  .tbl.cmp th:first-child{display:none}
  .tbl.cmp th,.tbl.cmp td{border-bottom:0}
  .tbl.cmp th{white-space:nowrap}
  .tbl.cmp td:first-child{grid-column:1/-1;padding-bottom:0;color:var(--mu)}
  .tbl.cmp td.n{padding-top:4px}
  .tbl.cmp td[colspan]{grid-column:1/-1}
}
@media (max-width:640px){
  /* (body: report.css ladataan tämän jälkeen) Raportin tunnusluvut allekkain: nimiö ja selite yhdelle riville, ei kahden palstan pätkintää. */
  body .rp-kpis{grid-template-columns:minmax(0,1fr)}
  body .rp-kpi .label{min-height:0;letter-spacing:.16em}
  /* Laatuvertailun luvut: nimiö vasemmalle, luku oikealle. */
  body .rp-scores{grid-template-columns:minmax(0,1fr);gap:0}
  body .rp-scores>div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:8px 0;border-top:1px solid rgba(56,70,74,.45)}
  body .rp-scores dd{margin-top:0}
}
/* Taulukon YAML: avautuu koko levyiseksi riviksi (portal.js), solun sisäinen kopio piiloon */
.tbl details.yaml-peek[open]>pre{display:none}
.tbl tr.yaml-row td{padding-top:0;padding-bottom:16px}
.tbl tr.yaml-row:hover{background:none}
.tbl tr.yaml-row pre{margin-top:0;max-height:480px}
/* Kulutusmittarit: luku nimiön alle omaan laatikkoonsa, ettei se näytä kuuluvan viereiseen mittariin */
.usage{gap:16px}
.meter{padding:12px 14px 14px;background:rgba(14,24,27,.45);border:1px solid rgba(56,70,74,.5)}
.meter-h{flex-direction:column;align-items:flex-start;gap:4px}
.meter-h .num{font-size:15px;color:var(--mu)}
.meter-h .num b{font-size:17px}
/* Pillerit: väli edeltävään tekstiin. Pillerin teksti aina isolla alkukirjaimella (yhtenäinen optinen keskitys). */
.pill.after{margin-left:4px;margin-top:0}   /* not the .after section-spacing utility */
/* Taulukon otsikkorivi: oma sävy, erottuu rivistä tyylikkäästi */
.tbl thead th{background:rgba(31,203,79,.06);color:var(--g2);border-bottom:1px solid rgba(31,203,79,.28)}
/* Mallikortit: tiiviimpi riviväli tietoriveille */
.mcard .kv{row-gap:4px;line-height:var(--lh-ui)}
/* Pyyntöloki: mahtuu leveyteen ilman vaakaskrollia (sovelluksen nimi ja mallipolut saavat rivittyä) */
@media (min-width:721px){.tbl.log td.c-app{white-space:nowrap}}
.tbl.log td.c-status{min-width:150px}
.tbl.log td code,.tbl.log td .hops{overflow-wrap:anywhere}
.tbl.log small.ver{max-width:18ch}
.tbl.log th,.tbl.log td{padding-left:10px;padding-right:10px}
.tbl.log th:first-child,.tbl.log td:first-child{padding-left:12px}
/* Pyydetty malli saa katketa vain kauttaviivan kohdalta ("aivantage/" + "claude-sonnet"): yhdellä rivillä
   se ja "Vastannut malli (i)" -otsikko levittivät taulukon 28 px yli 1440 px:llä (14.10.2026). */
.tbl.log td code.rq{white-space:normal;overflow-wrap:normal}
.tbl.log td code.rq>span{white-space:nowrap}
/* 1024–1180 px: lisäksi otsikko "Vastannut malli (i)" ja sovelluksen merkintä (Demo, Yhteystesti) rivittyvät */
@media (min-width:721px) and (max-width:1180px){
  .tbl.log th.c-served{white-space:normal}
  .tbl.log td.c-app{white-space:normal}
  .tbl.log td.c-app .pill{margin-left:0}
}
@media (min-width:721px) and (max-width:1100px){.tbl.log td.costs span>small{display:block;margin-left:0}}
@media (min-width:721px) and (max-width:1180px){
  .tbl.log td{font-size:13px}
  .tbl.log th,.tbl.log td{padding-left:7px;padding-right:7px}
  .tbl.log td.c-status{min-width:120px}
  .tbl.log .why{min-width:16ch}
}

/* Taulukot: ei vaakaskrollia
   Työpöydällä taulukko mahtuu aina sivulle: pitkä teksti (sähköposti, mallipolku, versiotunnus, tapahtuman
   tiedot) rivittyy; luvut, päivämäärät ja rahasummat pysyvät yhdellä rivillä. */
/* Pillerit ryhmässä: negatiivinen margin-block (ettei rivi kasva) kuuluu ryhmälle. Pillerin omana se söi
   rivittyneen ryhmän rivivälin 6 px → 2 px, ja "Korvattu"/"Kevennys" näyttivät olevan kiinni toisissaan. */
.tbl td .pills,.tbl td .hops{row-gap:6px}
.tbl td .pills>.pill,.tbl td .hops>.pill,.tbl td .srv>.pill{margin-block:0}
.tbl td .pills{margin-block:-2px;vertical-align:middle}
/* Versiohistoria: tila ja kevennys aina rinnakkain; sähköpostit rivittyvät @:n ja pisteiden kohdalta. */
.tbl.hist-t td.c-st .pills{flex-wrap:nowrap}
.tbl td.c-mail{overflow-wrap:anywhere}
/* Pitkät tunnukset rivittyvät sen sijaan että levittäisivät taulukkoa. */
.tbl.audit .kvp{white-space:normal;overflow-wrap:anywhere}
.tbl.catalog td.c-model{min-width:0}
.tbl.catalog small.sub,.tbl.catalog td code{white-space:normal;overflow-wrap:anywhere}
.tbl.catalog td.c-inst .srv{white-space:normal}
.tbl.catalog td.c-inst .srv small{white-space:nowrap}
/* Lyhyet nimet eivät katkea (tila otetaan pitkiltä tunnuksilta, ei nimiltä). */
.tbl.insts td:nth-child(2)>b,.tbl.versions td:first-child>b,.tbl.adm-apps td .nm,.tbl.insts td .muted{white-space:nowrap}
/* Monisanainen otsikko: tarkenne omalle rivilleen, ettei sarake levene otsikon mittaiseksi. */
.tbl th .th-sub{display:block;margin-top:3px}
.tbl thead th{vertical-align:bottom}
/* Kapeammalla työpöydällä solujen väli 14 → 10 px (reunasolut pitävät 12 px). */
@media (min-width:721px) and (max-width:1300px){
  .tbl th,.tbl td{padding-left:10px;padding-right:10px}
  .tbl th:first-child,.tbl td:first-child{padding-left:12px}
  .tbl th:last-child,.tbl td:last-child{padding-right:12px}
  .tbl.insts th.c-mdl,.tbl.insts td.c-mdl{padding-left:24px}
}
/* Mobiilipino: rivittyvä pilleri ei saa negatiivista marginaalia (seuraavan kentän pilleri osui siihen). */
@media (max-width:720px){
  .tbl.stack-m td .pill{margin-block:0}
  .tbl.stack-m.op.tenants td.n small.sub{display:inline;margin:0 0 0 6px}
}
/* Raportin mallitaulukko: mallin nimi ei katkea ("Qwen 2.5 / 3B"), versiotunnus saa. */
body .rp-table td>strong{white-space:nowrap}
/* 1024–1100 px: instanssitaulukko (9 saraketta) ja muut ahtaat kohdat. */
@media (min-width:721px) and (max-width:1100px){
  .tbl.insts td .juris-grp{flex-wrap:wrap;row-gap:6px;margin-block:0}
  .tbl.insts td .juris-grp>.pill{margin-block:0}
  .tbl.versions .offerf select{width:180px}
  .seg-body b{text-wrap:balance}
  /* Raportin osion selite: otsikon viereen tai sen alle koko leveydelle, ei puolileveäksi palstaksi. */
  body .rp-sec-h p{flex:1 1 360px;max-width:none}
  /* Laatuvertailun luvut: sarakkeet sisällön levyisiksi, ettei "Keskipiste, vertailumalli" katkea. */
  body .rp-scores{grid-template-columns:repeat(3,auto);justify-content:start;column-gap:28px}
}
/* Vaaralliset toiminnot ovat aina punaisia, myös harmaiden metarivien sisällä */
.app-meta .linkbtn.bad,.linkbtn.bad{color:#FF7A66}
.app-meta .linkbtn.bad:hover{color:#FF9A8A}

/* Mallipyynnöt */
/* Modaali: natiivi <dialog>, sisällä viistetty .card (reuna piirtyy kortin gradienttitäytteestä, ei border + clip-path) */
.mreq-dlg{width:min(560px,calc(100vw - 32px));max-width:none;max-height:calc(100svh - 32px);margin:auto;padding:0;border:0;background:none;color:var(--tx);overflow:visible;filter:drop-shadow(0 24px 48px rgba(0,0,0,.55))}
.mreq-dlg::backdrop{background:rgba(6,11,12,.84);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.mreq-dlg[open]{animation:rise .3s cubic-bezier(.2,.7,.2,1) both}
.mreq-dlg .card>.in{max-height:calc(100svh - 34px);overflow:auto;overscroll-behavior:contain}
.mreq-card>.in{display:grid;gap:12px;align-content:start}
.mreq-intro{margin-bottom:6px}
.mreq-form{gap:18px}
.mreq-form textarea{resize:vertical;min-height:88px}
.mreq-set{border:0;margin:0;padding:0;min-width:0}
.mreq-set>legend{padding:0;margin-bottom:9px;font-size:12.5px;font-weight:500;line-height:var(--lh-ui);color:var(--mu)}
.mreq-set>legend em{font-style:normal;color:var(--mu2);font-weight:400;margin-left:6px}
.mreq-actions{flex-wrap:wrap;margin-top:4px}
/* Asiakkaan omat pyynnöt */
.page>.mreq-mine{margin-top:40px}
.tbl.mreqs .mreq-note{color:var(--mu);max-width:44ch}
/* Ylläpito: avoimet pyynnöt Mallikatalogissa + lukumäärä valikossa */
.mreq-op{margin-bottom:36px}
.mreq-op .sec-head{align-items:flex-start;margin-bottom:14px}
.mreq-op .sec-head .muted{margin-top:4px}
.mreq-op .h-sec .pill{margin-left:8px;vertical-align:3px}
.mreq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:20px}
.mreq-item>.in{display:grid;gap:12px;align-content:start}
.mreq-h .h-sub{margin-bottom:4px}
.mreq-purpose{font-size:14.5px;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere}
.mreq-act{display:grid;gap:12px;margin-top:4px;padding-top:14px;border-top:1px solid rgba(56,70,74,.55)}
.nav-n{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:7px;border-radius:999px;background:#F3C969;color:#1A1403;font-size:11px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
@media (max-width:720px){
  .mreq-grid{grid-template-columns:minmax(0,1fr)}
  .mreq-dlg .card>.in{padding:20px}
}
/* Porrastus: vuorovaikutus */
/* Portaan tekstit (numero, malli, pillerit, portit) keskitetään portaan päälle kaikilla leveyksillä. */
.stair-card{justify-items:center;text-align:center;container-type:inline-size}
/* Numerolaatta kokonaiseen pikseliin: puolen pikselin keskitys sumentaa viisteen viivan. */
.stair-card>.stair-no{justify-self:start;margin-left:round(down,calc((100cqw - 30px) / 2),1px)}
.stair-card .pills{justify-content:center}
.gates{justify-items:center}
.gates li{justify-content:center}
/* Poista askel: punainen linkkinappi, poisto vasta data-confirm-vahvistuksen jälkeen. */
.stepf-h .rm.linkbtn{color:#FF7A66;font-size:13.5px;line-height:var(--lh-ui)}
/* + Lisää porras: tyhjä askel paljastuu vasta napista (details toimii ilman JS:ää). */
details.addstep{display:grid}
details.addstep>summary{list-style:none;justify-self:end}
details.addstep>summary::-webkit-details-marker{display:none}
details.addstep[open]>summary{display:none}
details.addstep>fieldset.stepf.newstep{opacity:1}
/* Esittelykappaleen ja säätimien väliin ilmaa (vrt. .h-sec+p → 14px). */
.cascade-form .card .form-intro{margin-bottom:16px}
/* Päätösmalli: esireitityksen kynnys ja opetusdata koko kortin levyisesti; sarakeväli sama kuin
   vaihtoehtokorteilla, joten oikea palsta alkaa kolmannen kortin kohdalta. */
.stepf-grid.three.dec-opts{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:10px}
.stepf-grid.three.dec-opts>.f:first-child{padding-right:16px}
/* Porttirivi kapeassa palstassa (n. 981–1200 px): tyyppi ja arvioija rinnakkain, kynnys omalle rivilleen,
   ettei liukusäädin ja lukukenttä mene päällekkäin (ui_audit: "säätimet päällekkäin"). */
.gatesf{container:gates/inline-size}
@media (min-width:981px){@container gates (max-width:700px){
  .gatef{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gatef .thr{grid-column:1/-1;order:1}
  .gatef .gate-hint{order:2}
  .gatef[data-type=structure] .thr,.gatef[data-type=none] .thr{display:none}
}}
/* Vaihtoehtokortit 2×2 kun neljälle ei ole tilaa: nimi ("Oma päättää, Jev rinnalla") pysyy yhdellä rivillä. */
@media (min-width:981px) and (max-width:1180px){.cascade-form .seg.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:980px){
  .stepf-grid.three.dec-opts{grid-template-columns:minmax(0,1fr)}
  .stepf-grid.three.dec-opts>.f:first-child{padding-right:0}
  /* Vaihtoehtokortit allekkain koko leveinä: selite ladotaan kuin leipäteksti, ei tasapainottaen
     (WebKitin pretty kavensi kappaleen 200/282 px:iin). */
  .cascade-form .seg-body small{text-wrap-style:auto}
  /* Lyhyt kahden lauseen vihje: tasapainoon, ettei viimeiselle riville jää yksi sana. */
  .cascade-form .seg-body small.bal{text-wrap-style:balance}
}
/* Sivun pääosiot (korttien ulkopuolella): selvästi korttiotsikkoa suurempi otsikko ja oma väli, ettei sekoitu edelliseen */
.h-sec.lg,.page>section>h2.h-sec{font-size:24px;letter-spacing:-.015em}
.form-intro.sec-break{margin-top:56px;padding-top:28px;border-top:1px solid rgba(56,70,74,.55)}

/* ---------- Selitys (i): ui.info-makro + portal.js [data-info] ----------
   17 px ympyrä tekstirivin optisessa keskessä: vertical-align:middle osuu x-korkeuden puoliväliin, ja
   top:-.09em nostaa sen versaalikorkeuden puoliväliin (Inter ja Archivo: = tekstirivin sisältölaatikon keskikohta).
   font:inherit → em on nimiön oma koko. Negatiivinen margin-block: ympyrä ei kasvata rivikorkeutta
   (KPI-nimiöt ja taulukon otsakkeet pysyvät linjassa naapureidensa kanssa). Osuma-alue ::after laajentaa. */
.info-nw{white-space:nowrap}
.info-btn{position:relative;top:-.09em;display:inline-grid;place-items:center;width:17px;height:17px;margin:-3px 0 -3px 6px;padding:0;
  vertical-align:middle;font:inherit;line-height:1;letter-spacing:0;text-transform:none;color:var(--mu);background:transparent;
  border:1px solid rgba(111,130,134,.75);border-radius:50%;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.info-btn svg{width:13px;height:13px;fill:currentColor;display:block}
.info-btn::after{content:"";position:absolute;inset:-7px}
.info-btn:hover,.info-btn:focus-visible,.info-btn[aria-expanded=true]{color:var(--g2);border-color:var(--g2);background:rgba(31,203,79,.08)}
.info-btn:focus-visible{outline:2px solid var(--g);outline-offset:2px}
.info-nw>.info-btn:only-child{margin-left:0}
template.info-tpl{display:none}
/* Modaali: sama materiaali kuin mallipyynnön dialogi (.mreq-dlg + .card), kapeampi lukumitta */
.info-dlg{width:min(520px,calc(100vw - 32px))}
.info-dlg .card>.in{display:grid;gap:14px;align-content:start}
.info-dlg-h{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.info-dlg-h .h-sec{padding-top:3px;text-wrap:balance}
.info-x{flex:none;display:grid;place-items:center;width:32px;height:32px;margin:-4px -8px 0 0;padding:0;background:none;border:0;border-radius:8px;color:var(--mu);cursor:pointer;transition:color .2s,background .2s}
.info-x:hover,.info-x:focus-visible{color:var(--tx);background:var(--s3)}
.info-x svg{width:14px;height:14px;display:block}
.info-body{display:grid;gap:10px;font-size:14.5px;line-height:var(--lh-body);color:var(--mu)}
.info-body b,.info-body strong{color:var(--tx);font-weight:600}
.info-body ul,.info-body dl{display:grid;gap:8px;padding:0;list-style:none}
.info-body li{position:relative;padding-left:16px}
.info-body li::before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;background:var(--g);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.info-body dt{color:var(--tx);font-weight:600;font-size:14px;line-height:var(--lh-head)}
.info-body dd{margin:2px 0 4px}
@media (max-width:640px){.info-dlg .card>.in{padding:20px}}

/* ---------- Optimointi (ylläpito, /operator/tenants/<id>/optimize) ----------
   Syötteen koostumus: pinottu palkki + selite. Pilotin vaiheet: numeroitu lista, nykyinen vihreällä reunalla.
   Ei viistettyjä reunallisia elementtejä (kortit ovat tavallisia .card-elementtejä). */
.opt .ph-actions .btn[aria-current=page]{background:var(--g);color:#04170A}
.opt-mix{display:flex;height:14px;gap:2px;margin:4px 0 12px;background:rgba(56,70,74,.35)}
.opt-mix span{display:block;min-width:2px}
.opt .m-tools{background:#F3C969}
.opt .m-system{background:var(--mint)}
.opt .m-history{background:#7C8E92}
.opt .m-user{background:var(--g)}
.opt-legend{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:16px;font-size:13.5px;color:var(--mu)}
.opt-legend li{display:inline-flex;align-items:center;gap:8px}
.opt-legend i{width:10px;height:10px;flex:none}
.opt-legend b{color:var(--tx);font-weight:600}
.tbl.opt-opps td.opt-rank{width:1%;color:var(--mu2)}
.tbl.opt-opps td.opt-what small.sub{line-height:var(--lh-ui)}
.tbl tr.opt-total td{border-top:1px solid var(--line);font-weight:600}
.opt-cst{display:block}
.opt-cst+.opt-cst{margin-top:8px}
.opt .tbl .nm{white-space:nowrap}
.opt #porrastus .statlist{margin-bottom:14px}
.opt-phases{list-style:none;display:grid;margin-top:4px}
.opt-phases>li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;padding:14px 0 14px 12px;border-bottom:1px solid rgba(56,70,74,.45);border-left:2px solid transparent}
.opt-phases>li.now{border-left-color:var(--g);background:linear-gradient(90deg,rgba(31,203,79,.07),transparent 60%)}
.opt-ph-no{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--line);border-radius:50%;font-family:var(--disp);font-weight:700;font-size:13px;line-height:1;color:var(--mu)}
.opt-phases>li.done .opt-ph-no{color:var(--g);border-color:rgba(31,203,79,.45)}
.opt-phases>li.now .opt-ph-no{color:#04170A;background:var(--g);border-color:var(--g)}
.opt-ph-body{display:grid;gap:6px;min-width:0}
.opt-ph-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;min-height:28px}
.opt-ph-head b{font-family:var(--disp);font-stretch:112%;font-size:15px}
.opt .adm-state .row-actions{flex:none;display:flex;gap:10px;flex-wrap:wrap}
.opt-invite,.opt-decide{margin-top:20px}
.opt-decide{display:grid;gap:16px}
.opt-decide .btn{justify-self:start}
.opt-sum{margin-top:6px;border-top:0;padding-top:4px}
.opt-sum-h{margin-top:22px}
/* Pilotin tarkistuslista (asiakkaan kortti + ylläpidon aikajana): rasti datasta */
.pilot-checks{list-style:none;display:grid;gap:8px;margin-top:4px}
.card .pilot-checks{margin:14px 0 4px}
.pilot-checks li{display:flex;align-items:center;gap:10px;color:var(--mu)}
.pilot-checks li>i{flex:none;width:16px;height:16px;border:1.5px solid var(--mu2);border-radius:50%}
.pilot-checks li.ok{color:var(--tx)}
.pilot-checks li.ok>i{border-color:var(--g);background:var(--g) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%2304170A' stroke-width='2'/%3E%3C/svg%3E") center/12px no-repeat}
.pilot-checks a{flex:1 1 auto;min-width:0;color:inherit}
.page>.pilot-card{margin-top:22px}
/* Pilottipalkki asiakkaan portaalissa (valikon alla) */
.pilotbar{border-bottom:1px solid rgba(56,70,74,.55);background:linear-gradient(90deg,rgba(31,203,79,.08),rgba(13,21,23,.6) 70%)}
.pilotbar-in{max-width:1200px;margin:0 auto;padding:10px var(--gut);display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:13.5px;line-height:var(--lh-ui)}
.pilotbar-in b{font-weight:600}
.pilotbar-tx{color:var(--mu)}
body:has(.pilotbar) .page>.ph:first-child{padding-top:38px}
/* Viesti kopioitavaksi, kun sähköposti ei lähtenyt */
.pm-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px}
.pm-head .h-sub{margin:0}
.pm-body{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13.5px}
@media (max-width:720px){
  .opt-phases>li{grid-template-columns:28px minmax(0,1fr);gap:10px;padding-left:8px}
  .tbl.stack-m.opt-opps td.opt-rank{display:none}
  .tbl.stack-m.opt-opps td.opt-what{flex:1 1 100%}
}
/* Yhdistä-sivu (/app/connect) ja avaimen näyttösivun koodiesimerkit */
.connect>.card+.card,.connect>.card+.grid,.connect>.grid+.card{margin-top:20px}
.urlrows{display:grid;gap:18px}
.urlrow{display:grid;gap:8px;min-width:0}
.urlpaths{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline}
.urlpaths code,.sn-lead code,.ks-urls code{font-size:12.5px;color:var(--tx);overflow-wrap:anywhere}
.urlbox{display:flex;align-items:center;gap:14px;min-width:0;padding:10px 10px 10px 16px;background:#0B1416;border:1px solid rgba(56,70,74,.6)}
.urlbox code{flex:1;min-width:0;font-size:15px;color:var(--g2);overflow-wrap:anywhere;line-height:1.5;user-select:all}
.urlbox .btn{flex:none}
.preview-url{margin:12px 0 22px}
.urlkey{display:grid;gap:8px;margin-top:20px}
.sn-lead{margin:-6px 0 16px}
.sn{min-width:0}
.sn-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.sn-tabs[hidden]{display:none}
.sn-tab{display:inline-flex;align-items:center;min-height:var(--ctl-sm);padding:0 14px;border:1px solid var(--line);border-radius:999px;background:none;color:var(--mu);font:inherit;font-size:13px;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.sn-tab:hover{color:var(--tx)}
.sn-tab[aria-selected=true]{color:var(--tx);border-color:rgba(31,203,79,.6);background:rgba(31,203,79,.08)}
.sn-tab:focus-visible{outline:2px solid var(--g);outline-offset:2px}
.sn-panel{min-width:0}
.sn-panel+.sn-panel{margin-top:22px}
.sn.on .sn-panel+.sn-panel{margin-top:0}
.sn.on .sn-panel[hidden]{display:none}
.sn.on .sn-h{display:none}
.sn-block{min-width:0}
.sn-block+.sn-block{margin-top:16px}
.sn-bh{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.sn-title{font-size:13px;color:var(--mu);line-height:var(--lh-ui);min-width:0;overflow-wrap:anywhere}
.sn-code{margin-top:8px;max-width:100%;white-space:pre;max-height:none}
.sn-code code{font-size:12.5px}
.capps li,.cmodels li{align-items:center}
.statlist li>.capp-n{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;min-width:0}
.capp-n code{font-size:12.5px;color:var(--mu)}
.statlist li>.cm-id{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.cm-id code{color:var(--tx);overflow-wrap:anywhere}
.ctest-form{margin-top:4px}
.ctest-form .f.grow{flex:1 1 220px}
.ctest{margin-top:22px;padding:16px 18px;background:#0B1416;border:1px solid rgba(56,70,74,.6)}
.ctest.ok{border-color:rgba(31,203,79,.45)}
.ctest.bad{border-color:rgba(240,73,55,.5)}
.ctest-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.ctest-msg{margin-top:10px;font-size:14px}
.ctest .statlist{margin-top:8px}
.ctest .statlist li:last-child{border-bottom:0}
.ctest-reply{min-width:0;overflow-wrap:anywhere}
.statlist li>.chops{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.hop{display:inline-flex;align-items:center;gap:6px}
.hop code{font-size:12.5px;color:var(--tx)}
.ks-urls{margin:8px 0 6px}
.ks-urls li{padding:8px 0}
.ctest .after{margin-top:8px}
.snippet .sn{margin-top:12px}
@media (max-width:720px){
  .urlbox{flex-direction:column;align-items:stretch;padding:12px}
  .urlbox code{font-size:13.5px}
  .ctest-form .f.grow{flex:none}
}

/* Palvelutaso (SLA): sama vihreä / keltainen / punainen kuin muualla portaalissa (sla.state_of) */
.sla-ok{color:var(--g)}
.sla-risk{color:#F3C969}
.sla-bad{color:#FF7A66}
.sla-none{color:var(--mu2)}
.sla-card .sla-body{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:16px 48px;align-items:start}
.sla-fig{display:flex;flex-direction:column;gap:8px;min-width:0}
.sla-fig b{font-family:var(--disp);font-stretch:118%;font-weight:800;font-size:clamp(32px,3.4vw,44px);line-height:var(--lh-display);letter-spacing:-.02em;white-space:nowrap}
.sla-fig .small{max-width:34ch}
.sla-card .adm-form{margin-top:22px}
@media (max-width:720px){.sla-card .sla-body{grid-template-columns:minmax(0,1fr)}}

/* ---------- varakoodit, kirjautumisen apurivi ---------- */
.secretbox code.codes{white-space:pre;columns:2;column-gap:32px;font-size:16px;letter-spacing:.06em;line-height:1.9}
.codes-actions{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 18px}
input.code.bk{letter-spacing:.1em;font-size:20px}
input.code.bk::placeholder{letter-spacing:.1em}
.auth-help{margin-top:14px}
.mailed-note{margin:0 0 14px;color:var(--tx);font-size:15px}

/* ---------- alatunniste: yhtiö + tukiyhteystieto (base.html) ---------- */
.site-foot{border-top:1px solid rgba(56,70,74,.45)}
.site-foot-in{max-width:var(--wrap);margin:0 auto;padding:18px var(--gut) calc(18px + env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:12.5px;line-height:var(--lh-ui);color:var(--mu2)}
.site-foot a{color:var(--mu);text-decoration-color:rgba(159,176,179,.35)}
.site-foot a:hover{color:var(--tx)}
.live-page .site-foot-in{max-width:1400px}

/* ---------- Porrastus: esiasetukset (Säästö / Tasapaino / Laatu) ja Edistyneet asetukset ---------- */
.page>.presets{margin-top:22px}
.presets .form-intro{margin-bottom:16px}
.presets-seg{margin-bottom:4px}
.presets-seg .seg-body b{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pdesc{display:none;margin-top:16px;padding:16px 18px;background:rgba(14,24,27,.55);border-left:2px solid var(--g)}
.presets-form:has(input[value=save]:checked) .pdesc[data-for=save],
.presets-form:has(input[value=balance]:checked) .pdesc[data-for=balance],
.presets-form:has(input[value=quality]:checked) .pdesc[data-for=quality]{display:block}
.pdesc p{color:var(--mu);line-height:var(--lh-ui);max-width:80ch}
.pdesc p b{color:var(--tx);font-weight:600}
.pladder{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;margin-bottom:12px}
.pladder li{display:inline-flex;align-items:center;gap:10px;font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:15px}
.pladder li+li::before{content:"";width:28px;height:1px;margin:0 12px;background:linear-gradient(90deg,rgba(31,203,79,.25),var(--g))}
.pladder .stair-no{width:26px;height:26px;font-size:13px}
.presets .custom-note{margin-top:16px}
.pstats{margin-top:16px;color:var(--mu);line-height:var(--lh-ui)}
.pstats .num{color:var(--tx);font-weight:600}
.presets .actions{margin-top:18px}
.stairs-wrap .stairs-h{margin-bottom:6px}
details.cascade-adv>summary{padding:6px 0 14px;border-bottom:1px solid rgba(56,70,74,.6)}
details.cascade-adv>summary .h-sec{font-size:22px}
details.cascade-adv>.adv-in{padding-top:8px}
details.cascade-adv .flow-wrap{margin-top:22px}
details.cascade-adv .cascade-form{margin-top:30px}
@media (max-width:720px){
  details.cascade-adv>summary{align-items:flex-start}
  details.cascade-adv>summary::before{align-self:flex-start;margin-top:10px}
  details.cascade-adv>summary .muted{flex-basis:100%;padding-left:24px}
}

/* Tallennuspalkki lepää lomakkeen lopussa, kunnes lomakkeen alku on vieritetty ohi (portal.js) */
.savebar.rest{position:relative;bottom:auto}
.savebar-mark{display:block;height:1px;margin-bottom:-1px}

/* ---------- Sovellukset: kuukausirajan käyttöaste ja varoitus 80 %:sta ---------- */
.bar.warn i{background:linear-gradient(90deg,#C99A2E,#F3C969);box-shadow:0 0 12px rgba(243,201,105,.4)}
.meter-pct{margin-left:6px;font-size:12px;color:var(--mu2)}
.card .limit-note{margin:0 0 16px}

/* ---------- Loki: aikaväli ja CSV-vienti ---------- */
.filters .f.f-date{min-width:0;flex:0 0 132px}
.filters .f-date input{font-size:14px;font-variant-numeric:tabular-nums}
.filters-reset{align-self:center;margin-top:18px;color:var(--mu)}
.filters-end{margin-left:auto;align-self:flex-end;display:flex;align-items:center;gap:14px}
.filters-end .filters-n{margin-left:0}
@media (max-width:720px){
  .filters .f.f-date{flex:1 1 140px}
  .filters-end{margin-left:0;width:100%;justify-content:space-between}
  .filters-end .filters-n{width:auto}
}

/* ---------- Kalenterivalitsin (portal.js): kenttä + kalenterinappi, kalenteri viistettynä korttina ---------- */
.dp-field{position:relative;display:block;min-width:0}
.dp-field>.dp-input{width:100%;padding-right:42px;font-variant-numeric:tabular-nums}
.dp-btn{position:absolute;top:1px;right:1px;bottom:1px;width:38px;display:grid;place-items:center;border:0;background:none;color:var(--mu);cursor:pointer;border-radius:0 1px 1px 0}
.dp-btn svg{width:16px;height:16px}
.dp-btn:hover,.dp-btn[aria-expanded=true]{color:var(--g)}
.dp-btn:focus-visible{outline:2px solid var(--g);outline-offset:-4px}
.dp-pop{position:absolute;z-index:60;filter:drop-shadow(0 18px 40px rgba(0,0,0,.55))}
.dp{width:min(316px,calc(100vw - 32px));padding:14px 14px 10px;background:var(--bg2);border:1px solid var(--bc);
  clip-path:polygon(var(--cc) 0,100% 0,100% calc(100% - var(--cc)),calc(100% - var(--cc)) 100%,0 100%,0 var(--cc))}
.dp-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.dp-title{flex:1;text-align:center;font-family:var(--disp);font-stretch:118%;font-weight:700;font-size:15.5px;line-height:var(--lh-head);letter-spacing:-.01em;color:var(--tx)}
.dp-nav{flex:none;width:34px;height:34px;display:grid;place-items:center;border:0;background:none;color:var(--mu);cursor:pointer;border-radius:2px}
.dp-nav::before{content:"";width:8px;height:8px;border-left:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateX(2px) rotate(45deg)}
.dp-next::before{transform:translateX(-2px) rotate(-135deg)}
.dp-nav:hover:not(:disabled){color:var(--g);background:rgba(31,203,79,.08)}
.dp-nav:disabled{opacity:.3;cursor:default}
.dp-nav:focus-visible,.dp-day:focus-visible,.dp-link:focus-visible{outline:2px solid var(--g);outline-offset:1px}
.dp-grid{display:grid;gap:2px}
.dp-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.dp-wdc{font-family:var(--disp);font-stretch:125%;font-weight:600;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;line-height:var(--lh-caps);color:var(--mu2);text-align:center;padding:4px 0 6px}
.dp-cell{display:block}
.dp-day{display:grid;place-items:center;width:100%;height:38px;border:0;background:none;color:var(--tx);font:inherit;font-size:14px;font-variant-numeric:tabular-nums;line-height:1;cursor:pointer;border-radius:2px}
.dp-day.out{color:var(--mu2)}
.dp-day:hover:not(:disabled){background:rgba(31,203,79,.12)}
.dp-day.today{box-shadow:inset 0 0 0 1px rgba(31,203,79,.7);color:var(--g2)}
.dp-day.sel{background:var(--g);color:#04170A;font-weight:600;box-shadow:none}
.dp-day.sel:hover{background:var(--g2)}
.dp-day:disabled{color:#3E4E52;cursor:not-allowed;background:none}
.dp-foot{display:flex;justify-content:space-between;gap:12px;margin-top:8px;padding-top:8px;border-top:1px solid rgba(56,70,74,.6)}
.dp-link{border:0;background:none;color:var(--g);font:inherit;font-size:13.5px;font-weight:500;line-height:var(--lh-ui);padding:6px 4px;cursor:pointer}
.dp-link:hover{color:var(--g2);text-decoration:underline}
.filters .f.f-date{flex-basis:150px}
@media (max-width:720px){.dp-day{height:42px;font-size:15px}}


/* Kielivalinta kirjautumissivulla (auth/_layout.html): FI | EN, nykyinen korostettuna. */
.auth-main{position:relative}
.lang-switch{display:flex;gap:2px;margin:0 0 0 auto;font-size:12.5px;letter-spacing:.06em}
.lang-switch a,.lang-switch button{font:inherit;letter-spacing:inherit;color:var(--mu2);background:none;border:0;cursor:pointer;text-decoration:none;padding:4px 8px;border-radius:6px}
.lang-switch a:hover,.lang-switch button:hover{color:var(--tx)}
.lang-switch [aria-current]{color:var(--tx);background:rgba(255,255,255,.06)}
.site-foot-in{align-items:center}
.auth-foot{display:flex;justify-content:center;margin-top:28px}
.auth-foot .lang-switch{margin:0}