/* Page layout and the rest of the Swat.io tokens, taken from the playground's source (swatio-ui theme.css, Layout.module.css, Navigation, the
   settings card, the inbox list item). Loaded after swatio.css. Sizes are in px: the design system uses rem on a 10px root. */
:root{
  --theme-space-0:0;--theme-space-4:4px;--theme-space-8:8px;--theme-space-12:12px;--theme-space-16:16px;--theme-space-20:20px;--theme-space-24:24px;--theme-space-32:32px;--theme-space-40:40px;
  --theme-radius-0:0;--theme-border-width-0:0;--theme-border-width-1:1px;--theme-border-width-2:2px;--theme-border-width-3:3px;
  --theme-font-size-10:10px;--theme-font-size-12:12px;--theme-font-size-13:13px;--theme-font-size-15:15px;--theme-font-size-16:16px;--theme-font-size-20:20px;--theme-font-size-24:24px;
  --theme-line-height-110:110%;--theme-line-height-120:120%;--theme-line-height-125:125%;--theme-line-height-140:140%;
  --theme-letter-spacing-10:.01em;--theme-letter-spacing-20:.02em;--theme-letter-spacing-40:.04em;
  --theme-font-weight-400:400;--theme-font-weight-500:500;--theme-font-weight-700:700;
  --theme-component-height-16:16px;--theme-component-height-24:24px;--theme-component-height-32:32px;--theme-component-height-40:40px;--theme-component-height-48:48px;
  --theme-shadow-modal:5px 5px 20px rgb(99 117 129 / 10%);--theme-shadow-dropdown:5px 5px 20px rgb(99 117 129 / 20%);
  --theme-shadow-focus:0 0 0 1px #fff,0 0 0 3px #86c7ea;--theme-outline-focus:3px solid #86c7ea;
  --theme-color-transparent:transparent;
}

/* ----- page: grey background, grey navigation, white cards ----- */
body{background:var(--theme-color-secondary-10);font-size:var(--theme-font-size-15)}
.app{background:var(--theme-color-secondary-10)}
main{padding:0 var(--theme-space-32) var(--theme-space-32)}

/* navigation: 240px, secondary-30, 32px rows with an 8px radius; the row under the pointer turns white, the active one takes the product colour */
aside{width:240px;background:var(--theme-color-secondary-30);border-right:0;padding:var(--theme-space-16) var(--theme-space-8);gap:var(--theme-space-4)}
.team{gap:var(--theme-space-8);padding:var(--theme-space-0) var(--theme-space-4);margin-bottom:var(--theme-space-8);height:var(--theme-component-height-40)}
.logo{width:32px;height:32px;border-radius:var(--theme-radius-8);font-size:var(--theme-font-size-15)}
.logo svg{width:20px;height:20px}
.team-t b{font-weight:var(--theme-font-weight-500);font-size:var(--theme-font-size-15);line-height:var(--theme-line-height-120)}
.team-t small{font-size:var(--theme-font-size-12);color:var(--theme-color-secondary-70)}
.nav{height:var(--theme-component-height-32);padding:0 var(--theme-space-8);gap:var(--theme-space-8);margin:var(--theme-space-0);border-radius:var(--theme-radius-8);color:var(--theme-color-secondary-90);font-size:var(--theme-font-size-15);font-weight:var(--theme-font-weight-400);transition:background-color .2s ease-in-out,color .2s ease-in-out}
.nav:hover{background:var(--theme-color-white);color:var(--theme-color-secondary-70)}
.nav.active,.nav.active:hover{background:var(--theme-color-primary-10);color:var(--theme-color-primary-70)}
.nav svg{width:20px;height:20px}
.nav:focus-visible{outline:none;box-shadow:var(--theme-shadow-focus)}
.user{border-top:1px solid var(--theme-color-secondary-base);margin-top:var(--theme-space-8);padding:var(--theme-space-12) var(--theme-space-4) 0;gap:var(--theme-space-8)}
.user-t b{font-weight:var(--theme-font-weight-500);font-size:var(--theme-font-size-13)}
.user-t small{font-size:var(--theme-font-size-12);color:var(--theme-color-secondary-70)}

/* page header: 64px high, title on the grey, no border */
main>h1{display:flex;align-items:center;min-height:64px;margin:0;font-size:var(--theme-font-size-20);font-weight:var(--theme-font-weight-700);line-height:var(--theme-line-height-125)}
main>h1.row{justify-content:space-between}
.tabrow{border-bottom:var(--theme-border-width-1) solid var(--theme-color-secondary-base);margin-bottom:var(--theme-space-16)}
.tabs{gap:var(--theme-space-24);padding:0}
.tab{padding:var(--theme-space-8) 0 var(--theme-space-12);font-size:var(--theme-font-size-15);font-weight:var(--theme-font-weight-500);color:var(--theme-color-secondary-70)}
.tab:hover{color:var(--theme-color-secondary-90)}
.tab.on{color:var(--theme-color-primary-accessible-base)}
.tab.on:after{height:var(--theme-border-width-2);background:var(--theme-color-primary-accessible-base)}
.bar{gap:var(--theme-space-8);padding-bottom:var(--theme-space-8)}
.filter{height:var(--theme-component-height-32);padding:0 var(--theme-space-8);border-radius:var(--theme-radius-8);font-size:var(--theme-font-size-15);color:var(--theme-color-secondary-90)}
.filter:hover{background:var(--theme-color-white)}
.search{height:var(--theme-component-height-32);border-radius:var(--theme-radius-8);background:var(--theme-color-white);border:1px solid var(--theme-color-secondary-base);padding:0 var(--theme-space-8);width:220px;font-size:var(--theme-font-size-15)}

/* lists: strips with a hairline, as the inbox list does; the pointer turns a row secondary-30, a selected one primary-0 */
table{border-spacing:0;margin-top:var(--theme-space-8);font-size:var(--theme-font-size-13)}
th{font-weight:var(--theme-font-weight-500);color:var(--theme-color-secondary-70);padding:var(--theme-space-8) var(--theme-space-12);font-size:var(--theme-font-size-13);border-bottom:var(--theme-border-width-1) solid var(--theme-color-secondary-base)}
td{padding:0 var(--theme-space-12);height:48px;border:0;border-bottom:var(--theme-border-width-1) solid var(--theme-color-secondary-base);background:transparent;font-size:var(--theme-font-size-15);color:var(--theme-color-secondary-90)}
td:first-child{border:0;border-bottom:var(--theme-border-width-1) solid var(--theme-color-secondary-base);border-radius:var(--theme-radius-4) 0 0 var(--theme-radius-4)}
td:last-child{border:0;border-bottom:var(--theme-border-width-1) solid var(--theme-color-secondary-base);border-radius:0 var(--theme-radius-4) var(--theme-radius-4) 0}
tr.row:hover td{background:var(--theme-color-secondary-30);border-color:var(--theme-color-secondary-base)}
tr.row.sel td{background:var(--theme-color-primary-0)}
.name{font-weight:var(--theme-font-weight-500);font-size:var(--theme-font-size-15);color:var(--theme-color-black)}
.count{font-size:var(--theme-font-size-12);color:var(--theme-color-secondary-70)}
.empty{color:var(--theme-color-secondary-70);font-size:var(--theme-font-size-15)}
.empty h3{color:var(--theme-color-black);font-weight:var(--theme-font-weight-700);font-size:var(--theme-font-size-16)}

/* settings: one white card, 800px wide, centred, with the modal shadow */
.setcol{max-width:800px;margin:0 auto}
.sec{max-width:none;margin:var(--theme-space-4) 0 var(--theme-space-0);padding:var(--theme-space-32);background:var(--theme-color-white);border-radius:var(--theme-radius-12);box-shadow:var(--theme-shadow-modal)}
.card{background:var(--theme-color-white);border:0;border-radius:var(--theme-radius-12);box-shadow:var(--theme-shadow-modal);max-width:none;margin:0 0 var(--theme-space-12)}
@media (max-width:992px){aside{width:200px}main{padding:0 var(--theme-space-16) var(--theme-space-24)}}

/* study page: the same grey rail and 32px rows, a 64px bar, white working panels on the grey page */
.studybar{height:64px;padding:0 var(--theme-space-32);border-bottom:0;background:var(--theme-color-secondary-10)}
.side{height:var(--theme-component-height-32);padding:0 var(--theme-space-8);gap:var(--theme-space-8);border-radius:var(--theme-radius-8);font-size:var(--theme-font-size-15);color:var(--theme-color-secondary-90);margin-bottom:var(--theme-space-4);transition:background-color .2s ease-in-out,color .2s ease-in-out}
.side:hover:not(.dis){background:var(--theme-color-white);color:var(--theme-color-secondary-70)}
.side.on,.side.on:hover{background:var(--theme-color-primary-10);color:var(--theme-color-primary-70)}
.side.dis{color:var(--theme-color-secondary-60)}
.flow{background:var(--theme-color-secondary-30);border-right:0;padding:var(--theme-space-16) var(--theme-space-8)}
.flow h6{font-size:var(--theme-font-size-13);font-weight:var(--theme-font-weight-500);color:var(--theme-color-secondary-70)}
.step{height:var(--theme-component-height-40);border:0;border-radius:var(--theme-radius-8);font-size:var(--theme-font-size-15);color:var(--theme-color-secondary-90);box-shadow:none}
.step:hover{background:var(--theme-color-secondary-10)}
.step.on{border:0;background:var(--theme-color-white);color:var(--theme-color-primary-70);box-shadow:inset 0 0 0 2px var(--theme-color-primary-base)}
.edit{background:var(--theme-color-white);padding:var(--theme-space-32)}
.edit h2{font-size:var(--theme-font-size-20);font-weight:var(--theme-font-weight-700)}