.aidemo .btn.filled{background:var(--accent);color:#15110E}
.aidemo .btn.filled:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.aidemo .flow{--gron:#6FB38C;--rod:rgba(160,72,48,.55);--trad-pad:clamp(26px,3vw,34px);
  margin-top:3.2em;display:grid;grid-template-columns:minmax(0,21rem) minmax(0,1fr);
  gap:clamp(26px,4vw,58px);align-items:start}
.aidemo .fcard{background:var(--panel);border:1px solid rgba(188,153,87,.22);border-radius:6px;
  padding:clamp(20px,2.6vw,28px)}
.aidemo .ftag{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-secondary);display:block;margin-bottom:1.3em}
.aidemo .ffalt{border-top:1px solid rgba(188,153,87,.14);padding:11px 0}
.aidemo .ffalt:first-of-type{border-top:0;padding-top:0}
.aidemo .ffalt b{display:block;font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-secondary);font-weight:400;margin-bottom:5px}
.aidemo .ffalt span{font-size:.97rem;color:var(--text-primary);line-height:1.5}
.aidemo .frad{display:flex;align-items:center;gap:15px;flex-wrap:wrap;margin-top:1.6em}
.aidemo .fklocka{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;color:var(--text-secondary)}
.aidemo .fbyt{margin:1.3em 0 0;font-size:.9rem;color:var(--text-secondary)}
.aidemo .lankbtn{background:none;border:0;padding:0;cursor:pointer;font:inherit;color:var(--accent);
  text-decoration:underline;text-underline-offset:3px;transition:color .3s var(--ease)}
.aidemo .lankbtn:hover{color:var(--accent-hover)}
.aidemo .trad{list-style:none;margin:0;padding:0 0 0 var(--trad-pad);position:relative}
.aidemo .trad::before, .aidemo .trad::after{content:"";position:absolute;left:5px;width:2px;border-radius:2px}
.aidemo .trad::before{top:10px;bottom:10px;background:var(--rod)}
.aidemo .trad::after{top:10px;height:var(--fyllpx,0px);background:var(--gron);
  transition:height .55s var(--ease-soft);box-shadow:0 0 12px rgba(111,179,140,.3)}
.aidemo .steg{position:relative;padding-bottom:clamp(18px,2.2vw,26px)}
.aidemo .steg:last-child{padding-bottom:0}
.aidemo .prick{position:absolute;left:calc(var(--trad-pad) * -1);top:9px;width:12px;height:12px;border-radius:50%;
  background:var(--canvas);border:2px solid var(--rod);
  transition:border-color .45s var(--ease),background .45s var(--ease),box-shadow .45s var(--ease)}
.aidemo .sblock{background:rgba(242,234,217,.028);border:1px solid rgba(188,153,87,.15);
  border-left:2px solid var(--rod);border-radius:6px;
  padding:clamp(14px,1.8vw,19px) clamp(16px,2vw,22px);
  transition:border-color .45s var(--ease),background .45s var(--ease)}
.aidemo .stitel{margin:0;font-family:var(--display);font-weight:500;line-height:1.25;
  font-size:clamp(1.02rem,1.7vw,1.2rem);display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.aidemo .stext{margin:.5em 0 0;color:var(--text-secondary);font-size:.96rem}
.aidemo .smarke{font-family:var(--mono);font-size:.53rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-secondary);opacity:0;transition:opacity .3s var(--ease),color .3s var(--ease)}
.aidemo .akutmarke{font-family:var(--mono);font-size:.53rem;letter-spacing:.14em;text-transform:uppercase;
  color:#D98A72;border:1px solid rgba(217,138,114,.45);border-radius:99px;padding:2px 9px}
.aidemo .svar{margin:.95em 0 0;padding:14px 17px;border-radius:5px;background:rgba(242,234,217,.05);
  font-family:var(--display);font-weight:300;font-size:1.01rem;line-height:1.52;color:var(--text-primary)}
.aidemo .flow.redo .steg{opacity:.3;transition:opacity .5s var(--ease)}
.aidemo .flow.redo .steg.pa, .aidemo .flow.redo .steg.klar{opacity:1}
.aidemo .steg.pa .prick{border-color:var(--accent);background:var(--accent);box-shadow:0 0 0 5px rgba(188,153,87,.15)}
.aidemo .steg.pa .sblock{border-left-color:var(--accent);background:rgba(188,153,87,.055)}
.aidemo .steg.pa .smarke{opacity:1;color:var(--accent)}
.aidemo .steg.klar .prick{border-color:var(--gron);background:var(--gron);box-shadow:0 0 0 5px rgba(111,179,140,.13)}
.aidemo .steg.klar .sblock{border-left-color:var(--gron)}
.aidemo .steg.klar .smarke{opacity:1;color:var(--gron)}
.aidemo .flodesnot{margin-top:2.2em;font-size:.93rem;color:var(--text-secondary);max-width:58ch;
  border-left:1px solid var(--accent-muted);padding-left:18px}
.aidemo .tider{margin-top:1.4em}
.aidemo .tidrub{font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-secondary);display:block;margin-bottom:.85em}
.aidemo .tidlista{display:grid;gap:7px}
.aidemo .tidval{display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;
  background:rgba(242,234,217,.03);border:1px solid rgba(188,153,87,.2);border-radius:5px;
  padding:10px 13px;color:var(--text-primary);font-family:var(--body);font-size:.92rem;
  transition:border-color .3s var(--ease),background .3s var(--ease),opacity .3s var(--ease)}
.aidemo .tidval:hover{border-color:var(--accent);background:rgba(188,153,87,.07)}
.aidemo .tidval[aria-pressed="true"]{border-color:var(--accent);background:rgba(188,153,87,.12)}
.aidemo .tidval[disabled]{opacity:.38;cursor:default}
.aidemo .tidval[disabled]:hover{border-color:rgba(188,153,87,.2);background:rgba(242,234,217,.03)}
.aidemo .kryss{width:14px;height:14px;border-radius:50%;flex:none;
  border:1px solid rgba(188,153,87,.5);transition:background .3s var(--ease),border-color .3s var(--ease)}
.aidemo .tidval[aria-pressed="true"] .kryss{background:var(--accent);border-color:var(--accent)}
.aidemo .tidval i{font-style:normal;color:var(--text-secondary);font-size:.82rem;margin-left:auto}
.aidemo .tidval.snabb{border-style:dashed}
.aidemo .tidnot{margin:.9em 0 0;font-size:.84rem;color:var(--text-secondary)}
.aidemo .sms, .aidemo .mejl{margin:.9em 0 0;border-radius:6px;padding:12px 15px;font-size:.92rem;line-height:1.52}
.aidemo .sms{background:rgba(111,179,140,.08);border:1px solid rgba(111,179,140,.28)}
.aidemo .sms.bradskande{background:rgba(217,138,114,.09);border-color:rgba(217,138,114,.42)}
.aidemo .mejl{background:rgba(242,234,217,.045);border:1px solid rgba(188,153,87,.18)}
.aidemo .sms b, .aidemo .mejl b{display:block;font-family:var(--mono);font-size:.53rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-secondary);font-weight:400;margin-bottom:7px}
.aidemo .mejlamne{display:block;font-weight:500;margin-bottom:4px;color:var(--text-primary)}
.aidemo .tidnot.jour{border-left:2px solid rgba(217,138,114,.5);padding-left:13px;color:var(--text-primary)}
.aidemo .tidnot.jour b{display:block;font-family:var(--mono);font-size:.53rem;letter-spacing:.14em;
  text-transform:uppercase;color:#D98A72;font-weight:400;margin-bottom:5px}
.aidemo .tidval.jour{border-style:dashed;border-color:rgba(217,138,114,.42)}
.aidemo .tidval.jour:hover, .aidemo .tidval.jour[aria-pressed="true"]{border-color:#D98A72;background:rgba(217,138,114,.1)}
.aidemo .tidval.jour[aria-pressed="true"] .kryss{background:#D98A72;border-color:#D98A72}
.aidemo .valjare{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:rgba(188,153,87,.18);margin-top:2.8em}
@media (max-width:760px){.aidemo .valjare{grid-template-columns:1fr}}
.aidemo .valjare button{text-align:left;cursor:pointer;background:var(--canvas);border:0;position:relative;
  padding:clamp(18px,2.4vw,26px);color:var(--text-primary);font-family:var(--body);
  transition:background .3s var(--ease)}
.aidemo .valjare button:hover{background:rgba(188,153,87,.05)}
.aidemo .valjare button[aria-pressed="true"]{background:var(--panel)}
.aidemo .valjare button[aria-pressed="true"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent)}
.aidemo .valjare .vn{font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:.7em}
.aidemo .valjare .vt{font-family:var(--display);font-size:clamp(1.1rem,1.8vw,1.35rem);font-weight:500;display:block;line-height:1.2}
.aidemo .valjare .vb{display:block;margin-top:.45em;font-size:.9rem;color:var(--text-secondary);line-height:1.5}
.aidemo .abeskriv{margin:1.7em 0 0;color:var(--text-secondary);max-width:64ch}
.aidemo .fregel{margin:1.1em 0 0;font-size:.86rem;color:var(--text-secondary);
  border-left:1px solid var(--accent-muted);padding-left:12px;line-height:1.5}
.aidemo .ljudrad{display:flex;align-items:center;gap:10px}
.aidemo .spela{width:0;height:0;border-left:11px solid var(--accent);border-top:7px solid transparent;
  border-bottom:7px solid transparent;flex:none}
.aidemo .vag{flex:1;height:20px;display:block}
.aidemo .vag rect{fill:var(--accent);opacity:.7}
.aidemo .ljudrad>span{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:var(--text-secondary);white-space:nowrap}
.aidemo .lista{margin:.9em 0 0;border-radius:6px;padding:12px 15px;font-size:.92rem;line-height:1.5;
  background:rgba(242,234,217,.045);border:1px solid rgba(188,153,87,.18)}
.aidemo .lista b{display:block;font-family:var(--mono);font-size:.53rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-secondary);font-weight:400;margin-bottom:8px}
.aidemo .lista dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:5px 16px}
.aidemo .lista dt{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-secondary);padding-top:4px;white-space:nowrap}
.aidemo .lista dd{margin:0;color:var(--text-primary)}
.aidemo .lista dd.summa{font-weight:500}
.aidemo .lista dt.summa, .aidemo .lista dd.summa{border-top:1px solid rgba(188,153,87,.22);margin-top:3px;padding-top:8px}
@media(max-width:900px){
.aidemo .flow{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
.aidemo .flow.redo .steg{opacity:1!important}
.aidemo .trad::after{transition:none!important}
}
@media(pointer:coarse){
.aidemo .tidval{min-height:46px}
}
@media(max-width:420px){
.aidemo .lista dl{grid-template-columns:1fr;gap:2px}
.aidemo .lista dt{padding-top:6px}
}
@media (max-width:760px){
.aidemo .film .spela span{width:52px;height:52px}
}


/* Flödesdemon från digitalkompaniet.se, nedskalad och lagd i förslagets
   färger. Allt inuti .aidemo får sina egna variabler, så den inte krockar
   med resten av sidan. */
.aidemo{--accent:var(--guld);--accent-hover:var(--guld-ljus);
  --panel:var(--panel-2);--bg:var(--djup);--canvas:var(--canvas);
  --text-primary:var(--kram);--text-secondary:var(--dimma);
  --display:var(--rubrik);--gut:0px;
  font-size:.94rem}
.aidemo .flow{margin-top:1.6em;grid-template-columns:minmax(0,18rem) minmax(0,1fr);
  gap:clamp(20px,3vw,40px)}
.aidemo .fcard{padding:clamp(16px,2vw,22px)}
.aidemo .btn{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;padding:12px 20px;border-radius:2px}
@media (max-width:860px){ .aidemo .flow{grid-template-columns:1fr} }

/* Förslagets egna .steg och .btn krockar med demons. Här nollställs de
   och demons egna värden gäller i stället. */
.aidemo .steg{display:block!important;grid-template-columns:none!important;
  list-style:none;margin:0;padding:0 0 clamp(18px,2.2vw,26px);counter-reset:none;
  border-top:0;gap:0}
.aidemo .steg::before{content:none}
.aidemo .steg h3{margin:0}
.aidemo .steg p{font-size:inherit;color:inherit;margin:0}
.aidemo .btn{display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--accent);background:transparent;color:var(--text-primary);
  cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease)}
.aidemo .btn:hover{background:var(--accent);color:#15110E}
.aidemo .btn[disabled]{opacity:.55;cursor:default}

/* Demons minsta etiketter var mindre än resten av förslaget. Höjda till
   samma golv, mest för telefon men samma värde överallt för enhetlighet. */
.aidemo .valjare .vn,.aidemo .ftag,.aidemo .ffalt b,.aidemo .tidrub,.aidemo .fklocka,
.aidemo .smarke,.aidemo .sms b,.aidemo .mejl b,.aidemo .lista .rub,
.aidemo .akutmarke,.aidemo .btn{font-size:.72rem}
.aidemo .vb,.aidemo .tidval span,.aidemo .tidnot,.aidemo .fregel{font-size:.86rem}
.aidemo .valjare button .vn{font-size:.72rem}