/* Swat.io product design system (mirrors swatio-ui: tokens, Button, Input, TabBar, Tag, Toggle, Banner, Toast).
   Loaded last so it wins over the base rules in index.html and extra.css. Sizes are in px (swatio-ui uses rem on a 10px root). */
@font-face{font-display:swap;font-family:'ABC Favorit Variable';font-weight:100 900;src:url('ABCFavoritVariable.woff2') format('woff2')}
:root{
  --theme-color-black:#0e1116;--theme-color-white:#fff;
  --theme-color-primary-0:#eef9ff;--theme-color-primary-10:#cbe7f6;--theme-color-primary-30:#86c7ea;--theme-color-primary-base:#2b9cda;--theme-color-primary-70:#18638b;--theme-color-primary-90:#0c3146;
  --theme-color-primary-accessible-base:#0073ba;--theme-color-primary-accessible-70:#0078b8;--theme-color-primary-accessible-hover:#0073b1;--theme-color-primary-accessible-pressed:#00679e;
  --theme-color-secondary-10:#f8f9fa;--theme-color-secondary-30:#f3f5f7;--theme-color-secondary-base:#dae0e7;--theme-color-secondary-60:#abb9c7;--theme-color-secondary-70:#61768e;--theme-color-secondary-90:#405063;--theme-color-secondary-accessible:#53667a;
  --theme-color-red-0:#ffecee;--theme-color-red-base:#e71d36;--theme-color-red-70:#94101f;--theme-color-red-10:#f9c8ce;
  --theme-color-green-0:#f0fff7;--theme-color-green-10:#cef3df;--theme-color-green-base:#17aa5a;--theme-color-green-70:#11723c;
  --theme-color-orange-0:#fff2e6;--theme-color-orange-10:#ffdfc2;--theme-color-orange-70:#a34f00;
  --theme-radius-4:4px;--theme-radius-8:8px;--theme-radius-12:12px;--theme-radius-16:16px;--theme-radius-pill:100px;
  --theme-shadow-modal:5px 5px 20px rgb(99 117 129 / 10%);--theme-shadow-dropdown:5px 5px 20px rgb(99 117 129 / 20%);
  --theme-outline-focus:3px solid #86c7ea;--theme-transition-default:.2s ease-in-out;

  /* app variables now resolve to the design system */
  --primary:var(--theme-color-primary-accessible-70);--sel:var(--theme-color-primary-0);--text:var(--theme-color-black);--muted:var(--theme-color-secondary-60);--mid:var(--theme-color-secondary-accessible);
  --line:var(--theme-color-secondary-base);--neutral:var(--theme-color-secondary-30);--beige:var(--theme-color-primary-0);--green:var(--theme-color-green-base);--red:var(--theme-color-red-base);
  --blue70:var(--theme-color-primary-70);--blue10:var(--theme-color-primary-10);--blue0:var(--theme-color-primary-0);--orange0:var(--theme-color-orange-0);--orange10:var(--theme-color-orange-10);--orange70:var(--theme-color-orange-70);
  --sh:var(--theme-shadow-modal);
}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:'ABC Favorit Variable',system-ui,-apple-system,sans-serif;background:var(--theme-color-white);color:var(--theme-color-black)}
*:focus{outline:none}
a{color:var(--theme-color-primary-accessible-base)}a:hover{text-decoration:underline}
button:focus-visible,[type=button]:focus-visible,[type=submit]:focus-visible,a:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:var(--theme-outline-focus);outline-offset:0;border-radius:var(--theme-radius-8)}
/* Headings follow swatio-ui Text variants: H1 24px/400, H2 20px/500, H3 16px/700 */
h1,h2,h3,h4{letter-spacing:var(--theme-letter-spacing-10);margin-top:0}
h1{font-size:24px;font-weight:400;line-height:110%}
h2{font-size:20px;font-weight:500;line-height:110%}
h3{font-size:16px;font-weight:700;line-height:125%}

/* Button: 40px, 8px radius, 1px border, no lift */
.btn{height:40px;padding:0 16px;border-radius:var(--theme-radius-8);border:1px solid var(--theme-color-primary-accessible-70);background:var(--theme-color-primary-accessible-70);color:var(--theme-color-white);font-weight:700;font-size:15px;justify-content:center;transform:none;transition:background-color var(--theme-transition-default),border-color var(--theme-transition-default),color var(--theme-transition-default)}
.btn:hover{background:var(--theme-color-primary-accessible-hover);border-color:transparent;transform:none}
.btn:active{background:var(--theme-color-primary-accessible-pressed);border-color:var(--theme-color-primary-70);transform:none}
.btn.out,.sb .btn{background:var(--theme-color-white);color:var(--theme-color-black);border:1px solid var(--theme-color-secondary-base)}
.btn.out:hover,.sb .btn:hover{background:var(--theme-color-secondary-30);border-color:var(--theme-color-secondary-base)}
.btn.out:active,.sb .btn:active{background:var(--theme-color-secondary-base)}
.btn.dark,.sb .btn.dark{background:var(--theme-color-primary-accessible-70);border-color:var(--theme-color-primary-accessible-70);color:var(--theme-color-white)}
.btn.dark:hover,.sb .btn.dark:hover{background:var(--theme-color-primary-accessible-hover)}
.btn.neg{background:var(--theme-color-white);color:var(--theme-color-red-base);border-color:var(--theme-color-red-base)}.btn.neg:hover{background:var(--theme-color-red-0)}
.btn.dis,.btn[disabled]{background:var(--theme-color-secondary-base);border-color:var(--theme-color-secondary-base);color:var(--theme-color-secondary-70);opacity:1;cursor:not-allowed}
.btn.sm{height:32px;padding:0 12px;font-size:13px;border-width:1px}
.btn:focus-visible{outline:var(--theme-outline-focus)}

/* Input: 40px, 8px radius, 1px border */
.inp,.big,.edit textarea,.search,select.inp,.doc,.tbar{border-radius:var(--theme-radius-8)}
.tbar{border-radius:var(--theme-radius-8) var(--theme-radius-8) 0 0}.doc{border-radius:0 0 var(--theme-radius-8) var(--theme-radius-8)}
.inp,.big,.edit textarea,.search{border:1px solid var(--theme-color-secondary-base);background:var(--theme-color-white);transition:border-color var(--theme-transition-default)}
.search{height:40px;background:var(--theme-color-white)}
.inp:hover,.big:hover,.edit textarea:hover,.search:hover{border-color:var(--theme-color-secondary-70)}
.inp:focus,.big:focus,.edit textarea:focus,.search:focus-within{border-color:var(--theme-color-secondary-70);outline:var(--theme-outline-focus);outline-offset:0}
.inp[disabled]{background:var(--theme-color-secondary-30);color:var(--theme-color-secondary-70);cursor:not-allowed}
.inp.err{border-color:var(--theme-color-red-base)}
.inp.sm{height:32px}
.field label{font-size:13px;font-weight:500;color:var(--theme-color-secondary-90);margin-bottom:6px}
::placeholder{color:var(--theme-color-secondary-70);opacity:1}

/* Tabs: underline, 3px pill indicator */
.tabrow{border-bottom:1px solid var(--theme-color-secondary-base)}
.tab{font-weight:500;font-size:15px;color:var(--theme-color-secondary-accessible);padding:10px 0 13px}
.tab:hover{color:var(--theme-color-secondary-90)}
.tab:hover:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;border-radius:3px;background:var(--theme-color-primary-10)}
.tab.on{color:var(--theme-color-black);font-weight:700}
.tab.on:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;border-radius:3px;background:var(--theme-color-primary-30)}

/* Navigation */
/* Main navigation follows swatio-ui Navigation: grey panel, 32px items in 4px slots, white hover, primary-10 active */
aside{background:var(--theme-color-secondary-30);border-right:0}
.nav{height:32px;padding:0 8px;gap:8px;margin:4px 0;font-size:15px;font-weight:400;color:var(--theme-color-secondary-90)}
.nav:hover{background:var(--theme-color-white);color:var(--theme-color-secondary-70)}
.nav.active{background:var(--theme-color-primary-10);color:var(--theme-color-primary-90);font-weight:400}
.nav.active:hover{background:var(--theme-color-primary-10);color:var(--theme-color-primary-90)}
.nav svg{color:inherit}
.side{border-radius:var(--theme-radius-8);color:var(--theme-color-secondary-accessible);font-weight:500}
.side:hover{background:var(--theme-color-secondary-30);color:var(--theme-color-black)}
.side.on,.rail button.on{background:var(--theme-color-primary-0);color:var(--theme-color-primary-70);font-weight:700}
.side.on svg{color:var(--theme-color-primary-accessible-70)}
.logo{border-radius:var(--theme-radius-8);background:var(--theme-color-primary-accessible-70)}
.rail button{border-radius:var(--theme-radius-8)}.rail button:hover{background:var(--theme-color-secondary-30)}
.studybar{border-bottom:1px solid var(--theme-color-secondary-base)}

/* Surfaces */
.card,.gcard,.opt,.screen,.mock,.menu,.addmenu,.wgt,.rcard,.ropt{border-radius:var(--theme-radius-8)}
.card,.menu,.rcard,.screen{border-radius:var(--theme-radius-12)}
.card{border:1px solid var(--theme-color-secondary-base);box-shadow:none}
.menu,.addmenu,.wgt{box-shadow:var(--theme-shadow-dropdown),0 0 0 1px var(--theme-color-secondary-base)}
.rcard,.screen{box-shadow:var(--theme-shadow-modal)}
.flow,.prev{background:var(--theme-color-secondary-10)}
.step{border-radius:var(--theme-radius-8);border:1px solid var(--theme-color-secondary-base);height:44px;font-weight:500;color:var(--theme-color-secondary-accessible);transition:border-color var(--theme-transition-default),background-color var(--theme-transition-default)}
.step:hover{border-color:var(--theme-color-secondary-70);color:var(--theme-color-black)}
.step.on{background:var(--theme-color-primary-0);border:1px solid var(--theme-color-primary-accessible-70);color:var(--theme-color-primary-70);font-weight:700}
.opt:hover,.ropt:hover{border-color:var(--theme-color-secondary-70)}
.ropt:has(input:checked){border-color:var(--theme-color-primary-accessible-70);background:var(--theme-color-primary-0)}

/* Tables */
th{font-size:13px;font-weight:500;color:var(--theme-color-secondary-accessible)}
td{font-size:14px}
tr.row:hover td{border-color:var(--theme-color-secondary-70);background:var(--theme-color-secondary-10)}
table td:first-child{border-radius:var(--theme-radius-8) 0 0 var(--theme-radius-8)}table td:last-child{border-radius:0 var(--theme-radius-8) var(--theme-radius-8) 0}

/* Tag / label pills */
.bt,.tpill,.chip,.tag{border-radius:var(--theme-radius-pill);font-weight:500}
.bt{background:var(--theme-color-primary-10);color:var(--theme-color-primary-70);padding:2px 10px;font-size:12px}
.tpill,.chip{background:var(--theme-color-secondary-30);color:var(--theme-color-secondary-90);border:0;padding:2px 10px;font-size:12px}
.tag.pos{background:var(--theme-color-green-10);color:var(--theme-color-green-70)}
.tag.neg{background:var(--theme-color-red-10);color:var(--theme-color-red-70)}

/* Toggle: 36x20 pill, primary when on */
.toggle{width:36px;height:20px;border-radius:var(--theme-radius-pill);background:var(--theme-color-secondary-70);transition:background-color var(--theme-transition-default)}
.toggle:after{top:2px;left:2px;width:16px;height:16px;transition:transform var(--theme-transition-default),left 0s}
.toggle.on{background:var(--theme-color-primary-base)}.toggle.on:after{left:2px;transform:translateX(16px)}

/* Banners */
.infob,.rnote{background:var(--theme-color-primary-10);color:var(--theme-color-primary-70);border-radius:var(--theme-radius-8)}
.warn{background:var(--theme-color-orange-10);color:var(--theme-color-orange-70);border:0;border-radius:var(--theme-radius-8)}
.rerr{color:var(--theme-color-red-70)}

/* Toast */
.toast{background:var(--theme-color-black);color:var(--theme-color-white);border-radius:var(--theme-radius-8);box-shadow:7px 12px 25px rgb(196 202 207 / 60%);font-weight:500}

/* Misc */
.x{border-radius:var(--theme-radius-4)}.x:hover{background:var(--theme-color-secondary-30);color:var(--theme-color-black)}
.avatar{background:var(--theme-color-secondary-base)}
.drop{border:2px dashed var(--theme-color-primary-30);border-radius:var(--theme-radius-8)}.drop:hover{border-color:var(--theme-color-primary-accessible-70);background:var(--theme-color-primary-0)}
.run{background:linear-gradient(180deg,var(--theme-color-primary-0),var(--theme-color-secondary-10) 63%)}
.rbar i{background:var(--theme-color-primary-base)}
pre,code{background:var(--theme-color-secondary-30);border-radius:var(--theme-radius-8)}
.sname:focus{outline:var(--theme-outline-focus)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* UX review */
.issue{border-top:1px solid var(--theme-color-secondary-base);padding:12px 0}.issue:first-of-type{border-top:0}
.tag[class*=sev-]{display:inline-block;padding:1px 8px;font-size:12px;text-transform:capitalize;vertical-align:middle}
.tag.sev-high{background:var(--theme-color-red-10);color:var(--theme-color-red-70)}
.tag.sev-medium{background:var(--theme-color-orange-10);color:var(--theme-color-orange-70)}
.tag.sev-low{background:var(--theme-color-secondary-30);color:var(--theme-color-secondary-90)}

/* project list filter */
.filter.on{color:var(--theme-color-primary-70);font-weight:700}
.fpanel{width:280px;padding:14px 16px;top:48px}.fpanel .field{margin:12px 0 0}
th.sortable{cursor:pointer;user-select:none}th.sortable:hover{color:var(--theme-color-black)}th.sorted{color:var(--theme-color-black)}
th .sico{font-size:11px;color:var(--theme-color-secondary-70)}
th.dropcol{box-shadow:inset 3px 0 0 var(--theme-color-primary-base)}
.filter{color:var(--theme-color-secondary-90);border-radius:var(--theme-radius-8)}.filter:hover{background:var(--theme-color-secondary-30);color:var(--theme-color-black)}

/* tertiary button: quiet text action */
.btn.ghost,.sb .btn.ghost{background:transparent;border-color:transparent;color:var(--theme-color-secondary-accessible);font-weight:500}
.btn.ghost:hover,.sb .btn.ghost:hover{background:transparent;border-color:var(--theme-color-secondary-base);color:var(--theme-color-black)}
.btn.ghost:active,.sb .btn.ghost:active{background:transparent;border-color:transparent;color:var(--theme-color-primary-90)}

/* Library */
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;margin:10px 0 20px}
.lcard{border:1px solid var(--theme-color-secondary-base);border-radius:var(--theme-radius-12);padding:16px 18px;background:var(--theme-color-white);display:flex;flex-direction:column;gap:2px}
.lcard:hover{border-color:var(--theme-color-secondary-70)}
.lcard .lrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.lcard .lrow .btn.ghost{padding:0 8px}
.btn.ghost.neg{color:var(--theme-color-red-base)}.btn.ghost.neg:hover{background:var(--theme-color-red-0);border-color:transparent}
.lcard .sq{margin:8px 0 0;padding-left:20px;font-size:14px}
.libedit{margin-top:10px}.libedit .field{margin-bottom:10px}
.dashed{border:2px dashed var(--theme-color-secondary-base);border-radius:var(--theme-radius-8);padding:20px;color:var(--theme-color-secondary-accessible);font-size:14px;margin:10px 0 20px}
.qlist{margin-top:12px;display:flex;flex-direction:column;gap:10px}.qedit{border:1px solid var(--theme-color-secondary-base);border-radius:var(--theme-radius-8);padding:12px;background:var(--theme-color-secondary-10)}
.qedit .x[disabled]{opacity:.35;pointer-events:none}.qedit .optrow{margin-bottom:6px}
.qedit [data-lib-q]{flex:1;min-width:0;width:auto}

/* editing: the card takes the full width so the questions have room */
.lcard.wide{grid-column:1/-1}
.lcard.wide .libedit{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;max-width:900px}
.lcard.wide .qlist{max-width:900px}.lcard.wide .qedit{padding:16px}
.lcard.wide .qedit [data-lib-q]{font-size:16px;font-weight:700;height:44px}
.lcard.wide .qedit .optrow .inp{height:36px}

/* conditional logic */
.logicbox .rule.lg{flex-wrap:wrap;gap:6px 8px;padding:10px;border:1px solid var(--theme-color-secondary-base);border-radius:var(--theme-radius-8);background:var(--theme-color-secondary-10);margin-bottom:8px}
.logicbox .rule.lg .inp{width:auto;flex:0 1 auto}.logicbox .rule.lg .inp[data-lg=to]{flex:1 1 220px}

/* Swat mark in the logo tile */
.logo:has(svg){background:var(--theme-color-white);border:1px solid var(--theme-color-secondary-base)}
.logo svg{width:72%;height:72%;color:var(--theme-color-black)}

/* study flow: marks questions that can screen participants out */
.step .stscr{margin-left:6px;flex:none}

/* project list: row selection, bulk bar, row menu */
.cb{cursor:pointer;position:relative;background:var(--theme-color-white);flex:none}
.cb:focus-visible{outline:3px solid var(--theme-color-primary-30);outline-offset:1px}
.cb.on,.cb.part{background:var(--primary);border-color:var(--primary)}
.cb.on::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid var(--theme-color-white);border-width:0 2px 2px 0;transform:rotate(45deg)}
.cb.part::after{content:"";position:absolute;left:2px;top:5px;width:8px;height:2px;background:var(--theme-color-white)}
tr.row.sel td{background:var(--sel);border-color:var(--primary)}
.bulk{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;padding:8px 12px;background:var(--sel);border:1px solid var(--primary);border-radius:12px;font-size:13px}
.bulk .bsp{flex:1}
.btn.neg{color:var(--theme-color-red-base)}
.more{position:relative;text-align:right}
.more .x{width:28px;height:28px;border-radius:6px;font-size:16px;color:var(--theme-color-secondary-70)}.more .x:hover{background:var(--theme-color-secondary-30)}
.menu.rmenu{width:200px;top:40px;right:8px;text-align:left}
.rmenu .mi{padding:8px 16px;font-size:13px;width:100%;text-align:left}.rmenu .mi.neg{color:var(--theme-color-red-base)}
.rmenu hr{margin:4px 0;border:0;border-top:1px solid var(--theme-color-secondary-base)}