@layer base {
*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role="list"],ol[role="list"]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}

}
@layer base {
@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 100;
  font-display: swap;
  src: url(/dist/de9194d1cf4ce0dd3b56.woff2?v=3.18) format("woff2"),
       url(/dist/fcc912460dcaea1ee8d4.woff?v=3.18) format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 100;
  font-display: swap;
  src: url(/dist/ec0fcc99e9d879db77ba.woff2?v=3.18) format("woff2"),
       url(/dist/6b5565d76adf0660b406.woff?v=3.18) format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 200;
  font-display: swap;
  src: url(/dist/21843ac6e40e9c4fd1c6.woff2?v=3.18) format("woff2"),
       url(/dist/7b7bd05c50e77a1dea5f.woff?v=3.18) format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 200;
  font-display: swap;
  src: url(/dist/04abe79a58b830b05436.woff2?v=3.18) format("woff2"),
       url(/dist/a7a00555699d20ff4912.woff?v=3.18) format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 300;
  font-display: swap;
  src: url(/dist/51f4d17560f77b8a0b38.woff2?v=3.18) format("woff2"),
       url(/dist/c08cfeeb313675a65efc.woff?v=3.18) format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 300;
  font-display: swap;
  src: url(/dist/8942ebe85375956847c9.woff2?v=3.18) format("woff2"),
       url(/dist/203b9b31308f80781b13.woff?v=3.18) format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: url(/dist/6cc68d6b835a3dd06e7e.woff2?v=3.18) format("woff2"),
       url(/dist/8398b3762d7b06fc3b8c.woff?v=3.18) format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 400;
  font-display: swap;
  src: url(/dist/e2f52803eb133261314f.woff2?v=3.18) format("woff2"),
       url(/dist/635afeed439bcb3e4823.woff?v=3.18) format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 500;
  font-display: swap;
  src: url(/dist/ba68c34a21c5751a2838.woff2?v=3.18) format("woff2"),
       url(/dist/f5549f68ca7db479bc7d.woff?v=3.18) format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 500;
  font-display: swap;
  src: url(/dist/d29ef50afbad4a107530.woff2?v=3.18) format("woff2"),
       url(/dist/2812ec5af03af477a492.woff?v=3.18) format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 600;
  font-display: swap;
  src: url(/dist/625474d6ebbfe4e3b0ae.woff2?v=3.18) format("woff2"),
       url(/dist/25b1ffc9587070462342.woff?v=3.18) format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 600;
  font-display: swap;
  src: url(/dist/c632fb9629c16866b4b6.woff2?v=3.18) format("woff2"),
       url(/dist/80d799bef2a34b9d253c.woff?v=3.18) format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 700;
  font-display: swap;
  src: url(/dist/a808c21aaa221f6d24f9.woff2?v=3.18) format("woff2"),
       url(/dist/1c3dfbb05cd4ae02710e.woff?v=3.18) format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 700;
  font-display: swap;
  src: url(/dist/974439652aea7e778bf7.woff2?v=3.18) format("woff2"),
       url(/dist/32e2b20f6958d2d2b42d.woff?v=3.18) format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 800;
  font-display: swap;
  src: url(/dist/1ca2a2cfb6b4cad40001.woff2?v=3.18) format("woff2"),
       url(/dist/30c3d891c030615a228a.woff?v=3.18) format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 800;
  font-display: swap;
  src: url(/dist/a0a103e5c1d773038d85.woff2?v=3.18) format("woff2"),
       url(/dist/cd6682866c7a0fead62a.woff?v=3.18) format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 900;
  font-display: swap;
  src: url(/dist/ef2d12b9f04d00e319f2.woff2?v=3.18) format("woff2"),
       url(/dist/e258f99875304915b846.woff?v=3.18) format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 900;
  font-display: swap;
  src: url(/dist/a1ea21b039cc259b6452.woff2?v=3.18) format("woff2"),
       url(/dist/70d2cf354617b8400370.woff?v=3.18) format("woff");
}

/* -------------------------------------------------------
Variable font.
Usage:

  html { font-family: 'Inter', sans-serif; }
  @supports (font-variation-settings: normal) {
    html { font-family: 'Inter var', sans-serif; }
  }
*/
@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  font-named-instance: 'Regular';
  src: url(/dist/b65534c5223684261945.woff2?v=3.18) format("woff2");
}
@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-display: swap;
  font-style: italic;
  font-named-instance: 'Italic';
  src: url(/dist/b27297c148a7ef314ce2.woff2?v=3.18) format("woff2");
}


/* --------------------------------------------------------------------------
[EXPERIMENTAL] Multi-axis, single variable font.

Slant axis is not yet widely supported (as of February 2019) and thus this
multi-axis single variable font is opt-in rather than the default.

When using this, you will probably need to set font-variation-settings
explicitly, e.g.

  * { font-variation-settings: "slnt" 0deg }
  .italic { font-variation-settings: "slnt" 10deg }

*/
@font-face {
  font-family: 'Inter var experimental';
  font-weight: 100 900;
  font-display: swap;
  font-style: oblique 0deg 10deg;
  src: url(/dist/9df5db385c3370707c5b.woff2?v=3.18) format("woff2");
}

}
@layer base {

/* https://rsms.me/inter/ */

body {
    font-family: 'Inter', sans-serif;
    font-feature-settings: "kern";
    line-height: initial;
    /* only do "tnum" for metrics (not dates, etc.) */
    /* "ss01" is funky numerals */
}

@supports (font-variation-settings: normal) {
    body {
        font-family: 'Inter var', sans-serif;
    }
}


h1 {
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 2rem;
    margin: 1rem 0;
    color: var(--body-color);
    @if $debug-grid {
        background: #cc000099;
    }
}

h2 {
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 2rem;
    margin: 1rem 0 0.5rem;
    color: #555;

    @if $debug-grid {
        background: #00cc0099;
    }
}

p {
    line-height: 1.25rem;
    margin: 0 0 1rem;
}

a {
    text-decoration: none;
     &:hover {
         text-decoration: underline;
     }
}

/* fix a problem with the reset stylesheet */
input, button, textarea, select {
    font: initial;
    font-family: inherit;
}

/* https://www.smashingmagazine.com/2012/12/css-baseline-the-good-the-bad-and-the-ugly/ */
/*
h1 {
    font-size: 32px;
    line-height: 36px;
    margin: 18px 0;
}

h2 {
    font-size: 26px;
    line-height: 36px;
    margin: 18px 0;
}

h3 {
    font-size: 20px;
    line-height: 36px;
    margin: 18px 0;
}

h4 {
    font-size: 16px;
    line-height: 18px;
    margin: 18px 0;
}

h5 {
    font-size: 15px;
    line-height: 18px;
    margin: 18px 0;
}

h6 {
    font-size: 14px;
    line-height: 18px;
    margin: 18px 0;
}


p {
    font-size: 13px;
    line-height: 18px;
    margin: 18px 0;
}

    p.small {
        font-size: 11px;
        line-height: 18px;
        margin: 18px 0;
    }
 */
}
:root{--body-background: #fff;--body-color: #333;--podtrac-blue: #3690b4;--podtrac-blue-darker: #00668f;--nav-background-color: #e6e6e6;--nav-hover-color: #f9f9f9;--nav-active-color: #f1f1f1;--border-color-low-contrast: #eee;--menu-background-color: #f9f9f9;--menu-background-color-lighter: #fcfcfc;--menu-hover-color: #ddd;--menu-border-color: #ccc}@layer base{a{color:var(--podtrac-blue-darker)}a:active{color:var(--podtrac-blue)}}.layout{--left-width: 28ch;display:grid;grid-template-columns:var(--left-width) 1fr;grid-template-rows:min-content auto;grid-template-areas:"logo top" "left main";height:100vh}.layout>a.logo{grid-area:logo;display:flex;align-items:center;border-bottom:.0625rem solid var(--border-color-low-contrast)}.layout>a.logo>.podtrac-logo{display:block;height:2.5rem;margin:.5rem 1rem}.layout>header{border-bottom:.0625rem solid var(--border-color-low-contrast);grid-area:top;display:flex;justify-content:flex-end;align-items:center}.layout>header>a{margin:.5rem}.layout>nav{grid-area:left;border-right:.0625rem solid var(--border-color-low-contrast);font-size:.85rem;font-weight:400;display:flex;flex-direction:column;overflow:hidden}.layout>main{grid-area:left/left/main/main;overflow:auto;padding:0 3rem 3rem;position:relative}.layout>nav+main{grid-area:main;padding-top:0}.left-nav{position:relative}.left-nav .handle{position:absolute;border-right:3px solid var(--podtrac-blue);opacity:0;width:.25rem;right:0;top:0;bottom:0;cursor:ew-resize;transition:opacity .1s 0s}.left-nav .handle:hover,.left-nav .handle:active{opacity:.8;transition:opacity .1s .1s}@media print{.layout{grid-template-columns:0 1fr;height:auto}.layout>header{display:none}.layout>nav{display:none}.layout>nav{display:none}.layout>a.logo{display:none}.layout>main .feedback{display:none}}.podtrac-logo{fill:var(--podtrac-blue)}a>.podtrac-logo{transition:fill .2s}a:hover>.podtrac-logo{fill:var(--podtrac-blue-darker)}.form{display:grid;grid-template-columns:auto 1fr;grid-gap:.5rem}.form .label{grid-column:1/2;font-size:.75rem;font-weight:700;line-height:2rem;color:#666}.form .field,.form .buttons{grid-column:2/3}.form .field>label{line-height:1.25rem;display:block}.form div.error,.form em.error,.form div.info,.form em.info{font-size:.65rem;line-height:.85rem;font-weight:500}.form .error{color:#c00}.form .info{color:#666}.form input[type=text],.form input[type=email],.form input[type=password]{border:2px solid #ddd;padding:.2rem;font-size:1rem;height:2rem;width:30vw}.form input[type=text].error,.form input[type=email].error,.form input[type=password].error{border-color:#c00;font-size:inherit;color:inherit}.form input[type=text][readonly],.form input[type=email][readonly],.form input[type=password][readonly]{border-color:rgba(0,0,0,0)}.drop-menu{cursor:pointer}.drop-menu ul,.drop-menu-menu{--menu-background-color: var(--warm-90);all:unset;cursor:pointer;list-style:none;background:var(--menu-background-color);position:fixed;font-size:.85rem;font-weight:400;z-index:100;box-shadow:.15rem .15rem .5rem 0 rgba(0,0,0,.5);border-radius:.25rem;max-height:80vh;overflow-y:auto;scrollbar-width:thin}.drop-menu ul li,.drop-menu-menu li{all:unset;display:block;padding:.15rem 1rem;border:.15rem solid var(--menu-background-color);border-radius:.3rem;white-space:nowrap}.drop-menu ul li:hover,.drop-menu-menu li:hover{background:var(--menu-hover-color)}.drop-menu ul li.border,.drop-menu-menu li.border{border-bottom:1px solid var(--menu-border-color)}.placeholder{height:.9em;position:relative;overflow:hidden;background:#eee;vertical-align:-0.1em;border-radius:1em;display:block}.placeholder::before{content:"";display:block;position:absolute;left:-150px;top:0;height:100%;width:150px;background:linear-gradient(to right, transparent 0%, #ddd 50%, transparent 100%);animation:loading 1s cubic-bezier(0.4, 0, 0.2, 1) infinite}@keyframes loading{from{left:-150px}to{left:100%}}.as-of{line-height:1.5rem;font-size:.75rem}.export-button{background:green;border:.0625rem solid #59d359;cursor:pointer;font-size:.75rem;line-height:1rem;color:#fff;display:flex;justify-self:end;align-items:center;padding:.25rem .5rem}.export-button>svg{margin-right:.25rem}.export-button:hover{background:#007000}.icon-spin{-webkit-animation:icon-spin 2s infinite linear;animation:icon-spin 2s infinite linear}@-webkit-keyframes icon-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes icon-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@media print{html{font-size:13px}#saberfeedback_button{width:0;height:0;overflow:hidden}}
@layer reset, base, layout, components, utility;
@layer base {
:root {
    --white: oklch(1 0 none);
    --black: oklch(0 0 none);
    --neutral-100: oklch(1 0 0);
    --neutral-95: oklch(0.985 0 0);
    --neutral-90: oklch(0.96 0 0);
    --neutral-80: oklch(0.91 0 0);
    --neutral-70: oklch(0.795 0 0);
    --neutral-60: oklch(0.6675 0 0);
    --neutral-50: oklch(0.56 0 0);
    --neutral-40: oklch(0.4625 0 0);
    --neutral-30: oklch(0.4025 0 0);
    --neutral-20: oklch(0.335 0 0);
    --neutral-10: oklch(0.2625 0 0);
    --neutral-5: oklch(0.17 0 0);
    --neutral-0: oklch(0 0 0);
    --warm-100: oklch(1 0.002 71);
    --warm-95: oklch(0.985 0.002 71);
    --warm-90: oklch(0.96 0.002 71);
    --warm-80: oklch(0.91 0.002 71);
    --warm-70: oklch(0.795 0.002 71);
    --warm-60: oklch(0.6675 0.002 71);
    --warm-50: oklch(0.56 0.002 71);
    --warm-40: oklch(0.4625 0.002 71);
    --warm-30: oklch(0.4025 0.002 71);
    --warm-20: oklch(0.335 0.002 71);
    --warm-10: oklch(0.2625 0.002 71);
    --warm-5: oklch(0.17 0.002 71);
    --warm-0: oklch(0 0.002 71);
    --brand-100: oklch(1 0 227);
    --brand-95: oklch(0.985 0.018 227);
    --brand-90: oklch(0.96 0.032 227);
    --brand-80: oklch(0.91 0.053 227);
    --brand-70: oklch(0.795 0.07 227);
    --brand-60: oklch(0.6625 0.1 227);
    --brand-50: oklch(0.555 0.1 227);
    --brand-40: oklch(0.4575 0.085 227);
    --brand-30: oklch(0.4025 0.085 227);
    --brand-20: oklch(0.335 0.085 227);
    --brand-10: oklch(0.2625 0.085 227);
    --brand-5: oklch(0.17 0.085 227);
    --brand-0: oklch(0 0.085 227);
    --accent-100: oklch(1 0 70);
    --accent-95: oklch(0.985 0.02 70);
    --accent-90: oklch(0.96 0.04 70);
    --accent-80: oklch(0.91 0.069 65);
    --accent-70: oklch(0.795 0.108 55);
    --accent-60: oklch(0.685 0.163 44);
    --accent-50: oklch(0.58 0.185 40);
    --accent-40: oklch(0.4825 0.168 35);
    --accent-30: oklch(0.4025 0.168 28);  
    --accent-20: oklch(0.335 0.168 22);
    --accent-10: oklch(0.2625 0.168 20);
    --accent-5: oklch(0.17 0.168 20);
    --accent-0: oklch(0 0.168 20);
    --green-100: oklch(1 0 140);
    --green-95: oklch(0.985 0.018 140);
    --green-90: oklch(0.96 0.038 140);
    --green-80: oklch(0.91 0.069 140);
    --green-70: oklch(0.795 0.108 140);
    --green-60: oklch(0.6525 0.17 140);
    --green-50: oklch(0.545 0.17 140);
    --green-40: oklch(0.4475 0.17 140);
    --green-30: oklch(0.4025 0.17 140);
    --green-20: oklch(0.335 0.17 140);
    --green-10: oklch(0.2625 0.17 140);
    --green-5: oklch(0.17 0.17 140);
    --green-0: oklch(0 0.17 140); 
    --purple-100: oklch(1 0 311);
    --purple-95: oklch(0.985 0.018 311);
    --purple-90: oklch(0.96 0.038 311);
    --purple-80: oklch(0.91 0.069 311);
    --purple-70: oklch(0.795 0.1 311);
    --purple-60: oklch(0.68 0.12 311);
    --purple-50: oklch(0.5725 0.12 311);
    --purple-40: oklch(0.4775 0.12 311);
    --purple-30: oklch(0.4025 0.12 311);
    --purple-20: oklch(0.335 0.12 311);
    --purple-10: oklch(0.2625 0.12 311);
    --purple-5: oklch(0.17 0.12 311);
    --purple-0: oklch(0 0.12 311);
}

}
@layer base {
:root {

    /*
        BTW, it's ok for case-specific colors to mix up or down
        fromed named colors if they need less contrast than the
        named color steps have
    */

    --text-default: var(--warm-20);
    --text-subtle: var(--warm-60);










    /* 
        some tokens for alpha color values that will darken/lighten 
        whatever background that they are on
    */
    --alpha-low-color: var(--black);
    --alpha-high-color: var(--white);
    --alpha-lower-0: oklch(from var(--alpha-low-color) l c h / 0%);
    --alpha-lower-5: oklch(from var(--alpha-low-color) l c h / 5%);
    --alpha-lower-10: oklch(from var(--alpha-low-color) l c h / 10%);
    --alpha-lower-15: oklch(from var(--alpha-low-color) l c h / 15%);
    --alpha-lower-20: oklch(from var(--alpha-low-color) l c h / 20%);
    --alpha-lower-25: oklch(from var(--alpha-low-color) l c h / 25%);
    --alpha-lower-30: oklch(from var(--alpha-low-color) l c h / 30%);
    --alpha-lower-35: oklch(from var(--alpha-low-color) l c h / 35%);
    --alpha-lower-40: oklch(from var(--alpha-low-color) l c h / 40%);
    --alpha-lower-45: oklch(from var(--alpha-low-color) l c h / 45%);
    --alpha-lower-50: oklch(from var(--alpha-low-color) l c h / 50%);
    --alpha-lower-55: oklch(from var(--alpha-low-color) l c h / 55%);
    --alpha-lower-60: oklch(from var(--alpha-low-color) l c h / 60%);
    --alpha-lower-65: oklch(from var(--alpha-low-color) l c h / 65%);
    --alpha-lower-70: oklch(from var(--alpha-low-color) l c h / 70%);
    --alpha-lower-75: oklch(from var(--alpha-low-color) l c h / 75%);
    --alpha-lower-80: oklch(from var(--alpha-low-color) l c h / 80%);
    --alpha-lower-85: oklch(from var(--alpha-low-color) l c h / 85%);
    --alpha-lower-90: oklch(from var(--alpha-low-color) l c h / 90%);
    --alpha-lower-95: oklch(from var(--alpha-low-color) l c h / 95%);
    --alpha-lower-100: oklch(from var(--alpha-low-color) l c h / 100%);

    --alpha-higher-0: oklch(from var(--alpha-high-color) l c h / 0%);
    --alpha-higher-5: oklch(from var(--alpha-high-color) l c h / 5%);
    --alpha-higher-10: oklch(from var(--alpha-high-color) l c h / 10%);
    --alpha-higher-15: oklch(from var(--alpha-high-color) l c h / 15%);
    --alpha-higher-20: oklch(from var(--alpha-high-color) l c h / 20%);
    --alpha-higher-25: oklch(from var(--alpha-high-color) l c h / 25%);
    --alpha-higher-30: oklch(from var(--alpha-high-color) l c h / 30%);
    --alpha-higher-35: oklch(from var(--alpha-high-color) l c h / 35%);
    --alpha-higher-40: oklch(from var(--alpha-high-color) l c h / 40%);
    --alpha-higher-45: oklch(from var(--alpha-high-color) l c h / 45%);
    --alpha-higher-50: oklch(from var(--alpha-high-color) l c h / 50%);
    --alpha-higher-55: oklch(from var(--alpha-high-color) l c h / 55%);
    --alpha-higher-60: oklch(from var(--alpha-high-color) l c h / 60%);
    --alpha-higher-65: oklch(from var(--alpha-high-color) l c h / 65%);
    --alpha-higher-70: oklch(from var(--alpha-high-color) l c h / 70%);
    --alpha-higher-75: oklch(from var(--alpha-high-color) l c h / 75%);
    --alpha-higher-80: oklch(from var(--alpha-high-color) l c h / 80%);
    --alpha-higher-85: oklch(from var(--alpha-high-color) l c h / 85%);
    --alpha-higher-90: oklch(from var(--alpha-high-color) l c h / 90%);
    --alpha-higher-95: oklch(from var(--alpha-high-color) l c h / 95%);
    --alpha-higher-100: oklch(from var(--alpha-high-color) l c h / 100%);
}

}
@layer base {
:root {
    --measure-x-small: 32ch;
    --measure-small: 48ch;
    --measure-normal: 64ch;

    --size-xx-small: 0.125rem;
    --size-x-small: 0.25rem;
    --size-small: 0.5rem;
    --size-normal: 1rem;
    --size-medium:  1.5rem;
    --size-large: 2rem;
    --size-x-large: 3rem;
    --size-xx-large: 4rem;

    /*

{
    --ds-space-0: 0rem;
    --ds-space-025: 0.125rem;
    --ds-space-050: 0.25rem;
    --ds-space-075: 0.375rem;
    --ds-space-100: 0.5rem;
    --ds-space-150: 0.75rem;
    --ds-space-200: 1rem;
    --ds-space-250: 1.25rem;
    --ds-space-300: 1.5rem;
    --ds-space-400: 2rem;
    --ds-space-500: 2.5rem;
    --ds-space-600: 3rem;
    --ds-space-800: 4rem;
    --ds-space-1000: 5rem;
    --ds-space-negative-025: -0.125rem;
    --ds-space-negative-050: -0.25rem;
    --ds-space-negative-075: -0.375rem;
    --ds-space-negative-100: -0.5rem;
    --ds-space-negative-150: -0.75rem;
    --ds-space-negative-200: -1rem;
    --ds-space-negative-250: -1.25rem;
    --ds-space-negative-300: -1.5rem;
    --ds-space-negative-400: -2rem;
}
    */

    --space-xx-small: var(--size-xx-small);
    --space-x-small: var(--size-x-small);
    --space-small: var(--size-small);
    --space-normal: var(--size-normal);
    --space-medium:  var(--size-medium);
    --space-large: var(--size-large);
    --space-x-large: var(--size-x-large);
    --space-xx-large: var(--size-xx-large);
}
}
@layer base {
:root {
    /* TODO: get rid of fluid sizes? */
    /*
        Fluid font size tokens, calculated here (but renamed):
        https://utopia.fyi/type/calculator?c=320,13,1.125,1240,16,1.2,4,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
    */
    --font-size-xx-small: clamp(0.5706rem, 0.5678rem + 0.014vw, 0.5787rem);
    --font-size-x-small: clamp(0.642rem, 0.6237rem + 0.0913vw, 0.6944rem);
    --font-size-small: clamp(0.7222rem, 0.6836rem + 0.1932vw, 0.8333rem);
    --font-size-normal: clamp(0.8125rem, 0.7473rem + 0.3261vw, 1rem);
    --font-size-medium: clamp(0.9141rem, 0.8146rem + 0.4973vw, 1.2rem);
    --font-size-large: clamp(1.0283rem, 0.8851rem + 0.716vw, 1.44rem);
    --font-size-x-large: clamp(1.1569rem, 0.9582rem + 0.9933vw, 1.728rem);
    --font-size-xx-large: clamp(1.3015rem, 1.0329rem + 1.3428vw, 2.0736rem);
    /*
        Font weight tokens
    */
    --font-weight-thin: 200;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-heavy: 800;
    /*
        Default font
    */
    --font-family: Inter, system-ui, sans-serif;
}
}
@layer base {

}
@layer layout {
/*
    Does "top" even need to stick?
*/

/*
    A simple layout with collapsible side bar.

    This needs to augmented with some javascript so that link
    clicks in the side bar and overlay clicks will close the
    side bar when it's floating.
*/
.layout {
    --side-resized: true; /* flag for when side is resizable */

    --top-height: 3rem; /* we still need this for sticky side placement */

    /* these are the same for all states */
    container-name: layout;

    display: grid;
    grid-template-rows: var(--top-height) 1fr;

    margin: 0;
    min-height: 100vh;
    
    /* the base state when there's no side */
    /* in this state the toggle will be hidden */
    grid-template-areas:
        "top"
        "main";
}

/* if we have a side... */
.layout:has(.layout__side) {

    /* the grid template changes */
    grid-template-areas:
        "top  top"
        "side main";
    grid-template-columns: min-content 1fr;

     /* and the toggle is displayed */
    .layout__toggle {
        display: grid;
        place-content: center;
    }
}

.layout__toggle {
    /* in the base state the toggle is hidden */
    display: none;
}

.layout__toggle [type=checkbox] {
    display: none;
}

.layout__backdrop {
    display: none;
}

.layout__top {
    align-items: center;
    background-color: var(--warm-90);
    display: flex;
    grid-area: top;
    position: sticky;
    top: 0;
    z-index: 5;
}

.layout__side {
    background-color: lightskyblue;
    grid-area: side;

    z-index: 3;
}

.layout__side  {
    background-color: var(--warm-90);
    transition: transform 100ms ease-in-out;

    /* side should have a single child which we assume is a sticky nav */
    > :only-child {
        position: sticky;
        top: var(--top-height);

        /* 
            we're going to treat this immediate child element as a wrapper,
            any real nav will be inside of it
        */
        max-height: calc(100dvh - var(--top-height));
        overflow: clip;
        

        /* maintain the same squish even when it's floating */
        width: min-content;

        /* leave the scroll behavior to the child elmements
        overflow-y: auto;
        overscroll-behavior: contain; */
    }
}

.layout__main {
    /*background-color: antiquewhite;*/
    grid-area: main;
    padding-inline: 4rem;
    padding-block: 0 4rem;
}


/* in the default state checked means side is hidden */
.layout:has(.layout__toggle :checked) {

    /* put the side in its own column that will collaspse... */
    grid-template-areas:
        ".    top"
        "side main";
    grid-template-columns: min-content 1fr;

    /* ...because the position takes the side out of the flow */
    .layout__side {
        position: fixed;
        inset-block: 0;
        transform: translateX(-100%);
    }
}

/* can we make the breakpoint configurable somehow? */
@media only screen and (max-width: 100ch) {
    /** {
        outline: 2px solid purple;
    }*/

    /* when the screen is smaller the side is hidden by default */
    .layout:has(.layout__side) {
        grid-template-areas:
            ".    top"
            "side main";
        grid-template-columns: min-content 1fr;

        .layout__side {
            position: fixed;
            inset-block: 0;
            transform: translateX(-100%);
        }
    }
    
    /* when the screen is smaller checked means side slides above main */
    .layout:has(.layout__toggle :checked) {

        .layout__side {
            transform: translateX(0);
        }

        /* and the backdrop covers everything */
        .layout__backdrop {
            background-color: var(--alpha-lower-50);
            display: block;
            grid-column: 1 / -1;
            grid-row: 1 / -1;
        }
    }
}

/*

I think this is an AI lie... "style" is a fake value, but "normal" probably gets us there

    Actually... we can probably just use a style query to un-hide the resize shim in the first place...

if (window.CSS && CSS.supports('container-type', 'style')) {
  console.log('CSS Style Queries are supported.');
  // Execute code that relies on style queries
} else {
  console.log('CSS Style Queries are NOT supported.');
  // Provide fallback or alternative behavior
}

*/

@container style(--nav-resized: true) {
/*    .layout__left {
        width: var(--nav-width);
    }*/
}
}
@layer layout {
.gayout {
    --side-resized: true; /* flag for when side is resizable */

    --top-height: 3rem; /* we still need this for sticky side placement */

    /* these are the same for all states */
    container-name: layout;

    display: grid;
    grid-template-rows: var(--top-height) 1fr;

    margin: 0;
    min-height: 100dvh;
    
    /* the base state when there's no side */
    /* in this state the toggle will be hidden */
    grid-template-areas:
        "top"
        "body";
}

.gayout__top {
    align-items: center;
    background-color: var(--warm-90);
    display: flex;
    grid-area: top;
}

.gayout__body {
    grid-area: body;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "main";
}
.gayout__body:has(.gayout__side) {
    grid-template-columns: min-content 1fr;
    grid-template-areas:
        "side main";
}

.gayout__side {
    background-color: var(--warm-90);
    display: flex;
    grid-area: side;
    min-height: calc(100dvh - var(--top-height));
}

.gayout__rail {
    display: flex;
    flex-direction: column;
    width: var(--top-height);
}

.gayout__rail > ul {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-normal);
    list-style: none;
    margin: 0;
    padding: 0;
    position: sticky;
}

.gayout__rail > ul:first-child {
    inset-block-start: 0;
}

.gayout__rail > ul:last-child {
    inset-block-end: 0;
    margin-block: auto 0;
}

.gayout__rail > ul > li > a {
    align-items: center;
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-xx-small);
    text-decoration-line: none;
}

.gayout__rail .icon {
    font-size: var(--font-size-x-large);
}

.gayout__left {
    background-color: coral;
}

.gayout__main {
    grid-area: main;
}
}
@layer layout {
#layout {
    --layout-top-height: 3rem;
    --layout-left-width: 300px;
}

#layout__top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--layout-top-height);
    /* Assume some things about the content for now */
    display: flex;
    align-items: center;
    gap: var(--space-normal);
}

#layout__left {
    width: var(--layout-left-width);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: var(--warm-95);
    font-size: 0.85rem;
    font-weight: 400;
}
/*#layout__left::after {
        content: "";
        position: absolute;
        top: 0;
        right: -16px;
        width: 16px;
        height: 16px;
        background-color: var(--warm-95);
        pointer-events: none;
        clip-path: path("M 0,0 L 0,16 A 16 16 90 0 1 16,0 L 0,0" );
    }*/

#layout__top ~ #layout__left {
    top: var(--layout-top-height);
}

#layout__main {
    --sticky-top: 0;
    /* Assume some things about the content for now */
    padding-inline: var(--space-x-large);
    padding-block: var(--space-normal) var(--space-x-large);
}

#layout__top ~ #layout__main {
    --sticky-top: var(--layout-top-height);
    margin-block-start: var(--layout-top-height);
}

#layout__left ~ #layout__main {
    margin-inline-start: var(--layout-left-width);
}

#layout__rail {
    background-color: var(--warm-90);
    position: relative;
    display: flex;
    flex-direction: column;
}

#layout__rail::after {
    content: "";
    position: absolute;
    top: 0;
    right: -16px;
    width: 16px;
    height: 16px;
    background-color: var(--warm-90);
    pointer-events: none;
    clip-path: path("M 0,0 L 0,16 A 16 16 90 0 1 16,0 L 0,0");
}

#layout__top {
    background-color: var(--warm-90);
}

#layout__scroll {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    scrollbar-gutter: stable;
}

#layout__scroll:hover {
    scrollbar-color: var(--warm-50) transparent;
}

#layout__scroll > :first-child {
    display: flex;
    min-height: 100%;
}

}
@layer components {
/*
    HMMM... another option is that the ::before is used for the active
    behavior instead of hover, see Google Calendar
*/

/*
    "flat" buttons with text should probably have more affordance like
    and underline or something?
*/

.button {
    /*
        TODO: some defaults should probably be semantic tokens
        set by the theme and the rest can just be merged
        into the private variable definitions
    */
    --default-background: var(--alpha-lower-5);
    --default-border: var(--alpha-lower-60);
    --default-border-width: 1px;
    --default-hover-background: var(--alpha-lower-5);
    --default-active-background: var(--alpha-lower-10);
    --default-radius: 100vw;

    /*
        the "public" api is the variable names with the "button" prefix, 
        and the private variables have no "button" prefix
    */
    --background: var(--button-background, var(--default-background));
    --before-background: var(--button-hover-background, var(--default-hover-background));
    --active-background:  var(--button-active-background, var(--default-active-background));
    --border: var(--button-border, var(--default-border));
    --active-border: var(--button-active-border, var(--button-border, var(--default-border)));
    --border-width: var(--button-border-width, var(--default-border-width));
    --color: var(--button-color, inherit);
    --radius: var(--button-radius, var(--default-radius));
    --padding-block: var(--button-padding-block, 0.25em);
    --padding-inline: var(--button-padding-inline, 0.75em);


    /* rules below here should only use the private variables */

    background-color: var(--background);
    border-color: var(--border);
    border-style: solid;
    border-radius: var(--radius);
    border-width: var(--border-width);
    color: var(--color);
    cursor: pointer;
    
    display: inline-flex;
    gap: var(--space-xx-small);
    align-items: center;
    justify-content: center;

    /* make this a stacking context so the ::before doesn't go all the way behind the background */
    isolation: isolate;

    padding-block: var(--padding-block);
    padding-inline: var(--padding-inline);
    position: relative;

    text-decoration-line: none;
    
    /* 
        instead of just transitioning the background color on hover we're 
        using a ::before element that we're scaling for a bounce effect
    */
    &::before {
        background-color: var(--before-background);

        /*
            in order to get this inner element to have the same radius as the
            outer button, we need to also give it the same border width
        */
        border-radius: var(--radius);
        border-style: solid;
        border-color: var(--border);
        border-width: var(--border-width);

        content: "";
        position: absolute;
        /* 
            this element is border-width smaller than the parent 
            and needs to be pulled out by that amount to cover it
        */
        inset: calc(-1 * var(--border-width));
        z-index: -1;

        /* normal buttons only get the opacity transitioned */
        transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
        opacity: 0;
    }

    &:hover::before,
    &:focus::before {
        opacity: 1;
    }

    &:active {
        --before-background: var(--active-background);
        --border: var(--active-border);
        top: -1px;
        left: -1px;
        box-shadow: var(--button-active-shadow, var(--alpha-lower-20) 1px 1px 1px);

    }

    &:where(.flat) {
        --button-color: var(--button-flat-color, var(--button-color));
        --button-background: var(--button-flat-background, transparent);
        --button-border: var(--button-flat-border, transparent);
        --button-active-border: var(--button-flat-active-border, var(--alpha-lower-30));

        &::before {
            /* we save the scale transition for flat buttons */
            scale: 0;
        }

        &:hover::before,
        &:focus::before {
            scale: 1;
        }
    }
}

/* icon-only buttons, which must have screen reader text */
.button:where(:has(.sr-only)) {
    aspect-ratio: 1;
    padding: 0.5em;
}

/* minimum size for non-icon-only buttons with really short labels */
.button:where(:not(:has(.sr-only))) {
    min-inline-size: 6ch;
}

/* HACK */
.button:where(.active) {
    background-color: var(--alpha-higher-60);
}

/* a class should be able to override the colors completely */
.hot-dog {
    --button-background: red;
    --button-border: yellow;
    --button-border-width: 4px;
    --button-radius: 1px;
    --button-color: yellow;
    --button-hover-background: darkblue;
    --button-flat-color: red;
    --button-flat-border: purple;
    --button-flat-active-border: cyan;
    --button-flat-background: yellow;
    --button-active-border: lime;
    --button-active-shadow: cyan 10px 10px 10px 10px;
}

.square {
    --button-radius: var(--space-small);
}

.danger {
    --button-active-border: darkred;
    --button-flat-active-border: darkred;
    background-color: papayawhip;
    font-size: 4rem;
}

.accent {
    --button-background: var(--accent-50);
    --button-hover-background: var(--accent-60);
    --button-active-background: var(--accent-40);
    --button-border: var(--accent-30);
    --button-border-width: 2px;
    --button-color: var(--accent-95);
}
}
@layer components {
.dialog {
    border: none;
    border-radius: var(--space-normal);
    box-shadow: var(--warm-90) 1px 1px 16px 2px;
    padding: var(--space-medium);
}
}
@layer components {
.icon {
    height: 1em;
    width: 1em;
    vertical-align: -0.16em;
}
}
@layer components {
.error-list {
    margin: 0;
    background-color: seashell;
    padding: 1em 2em;
    border: 2px solid #a00;
    color: #600;
    list-style: disc;
}

.input {
    padding: var(--space-small);
    border: 1px solid var(--warm-80);
    border-radius: 4px;
}
}
@layer components {
.left-nav {
    flex: 1;
    margin: var(--space-medium);
}

    .left-nav h3 {
        font-size: var(--font-size-medium);
        font-weight: var(--font-weight-semibold);
        margin-block-start: var(--space-normal);
        margin-block-end: var(--space-medium);
        white-space: nowrap;
        color: var(--warm-50);
    }

    .left-nav a {
        color: var(--warm-40);
        text-decoration: none;
    }

        .left-nav a:hover {
        }

    .left-nav ul {
        display: flex;
        flex-direction: column;
        gap: var(--space-normal);
        list-style: none;
        padding: 0;
    }

    .left-nav li {
        font-weight: var(--font-weight-medium);
        font-size: var(--font-size-normal);
    }

    .left-nav /*> ul > li >*/ a {
        display: flex;
        align-items: center;
        gap: var(--space-small);
        padding: var(--space-x-small);
        border-radius: 0px var(--space-normal) var(--space-normal) 0px;
        transition: background-color 0.1s;
    }

        .left-nav /*> ul > li >*/ a:hover {
            background-color: var(--warm-90);
        }


    .left-nav /*> ul > li >*/ a.active {
        font-weight: var(--font-weight-semibold);
        background-color: var(--warm-90);
    }

        .left-nav /*> ul > li >*/ a.active:hover {
            background-color: var(--warm-80);
        }

    .left-nav > ul > li > a.active {
        font-weight: var(--font-weight-semibold);
        background-color: var(--warm-90);
        border-radius: var(--space-small) var(--space-normal) var(--space-normal) 0px;
    }

    .left-nav li ul {
        gap: var(--space-small);
        font-weight: var(--font-weight-normal);
        margin-block-end: var(--space-small);
        /*margin-inline-start: var(--space-x-small);*/
        padding-block: var(--space-normal);
        /*padding-inline-start: var(--space-normal);*/
        border-inline-start: 1px solid var(--warm-80);
    }

        .left-nav li ul li {
            font-size: var(--font-size-small);
        }

        .left-nav li ul a {
            padding-inline-start: var(--space-large);
        }

            .left-nav li ul a.active {
                font-weight: var(--font-weight-bold);
            }

}
@layer components {
.logo {
    display: inline-grid;

    > svg {
        fill: var(--logo-fill, oklch(0.62 0.1 227)); /* this is in between two brand colors in the palette */
        height: 2em;
        transition: fill 100ms ease-in-out;
    }
}

/*.logo svg {
    display: block;
}
*/
a:hover .logo > svg {
    fill: var(--logo-fill-hover, var(--brand-50));
}
}
@layer components {
.rail {
    list-style: none;
    margin-inline: var(--space-x-small);
    padding: 0;
    position: sticky;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-medium);
    width: var(--space-x-large);
}

    .rail:first-child {
        top: 0;
        top: 1rem;
    }

    .rail + .rail:last-child {
        margin-block-start: auto;
        bottom: 1.5rem;
    }

    .rail a {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 2px;
        align-items: center;
        justify-content: center;
        color: var(--warm-40);
        font-size: xx-small;
        font-weight: 600;
        text-decoration: none;
    }

        .rail a .icon {
            border-radius: var(--space-x-small);
            font-size: x-large;
            padding: var(--space-x-small);
            width: 1.25rem;
            height: 1.25rem;
            transition: background-color 0.1s;
        }

        .rail a:hover .icon {
            background-color: var(--warm-80);
            text-decoration: none;
        }

        .rail a.active .icon {
            color: var(--warm-95);
            background-color: var(--warm-50);
        }

        .rail a.active:hover .icon {
            background-color: var(--warm-40);
        }
}
@layer components {
.table {
    --padding-inline: var(--table-padding-inline, var(--space-medium));
    --padding-block-td: var(--table-padding-block-td, var(--table-padding-block, var(--space-normal)));
    --padding-block-th: var(--table-padding-block-th, var(--table-padding-block, var(--space-small)));

    border-collapse: collapse;
    background-color: white;

    & :is(tbody, thead) > tr {
        border-bottom: 1px solid var(--warm-90);

        & > :is(th, td) {
            padding-inline: var(--padding-inline);
        }
        & > th {
            padding-block: var(--padding-block-th);
            font-size: .875em;
        }
        & > td {
            padding-block: var(--padding-block-td);
        }
    }

    & thead > tr {
        background-color: var(--warm-90);
    }
}

.tal {
    text-align: left;
}
.tac {
    text-align: center;
}
.tar {
    text-align: right;
}
}
@layer components {
.top-nav {
    align-items: center;
    display: flex;
    flex: 1;
    gap: var(--space-normal);
    margin-inline: var(--space-normal);
}

.top-nav:has(> :only-child) {
    justify-content: center;
}
}
@layer components {
.account-list {
    --button-background: white;
    --button-border: var(--brand-40);
    --button-border-width: 3px;
    --button-color: var(--brand-40);
    --button-padding-block: 2rem;
}
}
@layer components {
/* page-specific components */
}
@layer utility {
/* https://css-tricks.com/inclusively-hidden/ */

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}
}
@layer utility {
/* This was generated with a script, see: css-generator.linq */

/* gap ============================ */

/* gap ------------------------- */
:is(.gap-0, .gap-xx-small, .gap-x-small, .gap-small, .gap-normal, .gap, .gap-medium, .gap-large, .gap-x-large, .gap-xx-large) {
    column-gap: var(--column-gap);
    row-gap: var(--row-gap);
}
.gap-0 {
    --column-gap: 0;
    --row-gap: 0;
}
.gap-xx-small {
    --column-gap: var(--space-xx-small);
    --row-gap: var(--space-xx-small);
}
.gap-x-small {
    --column-gap: var(--space-x-small);
    --row-gap: var(--space-x-small);
}
.gap-small {
    --column-gap: var(--space-small);
    --row-gap: var(--space-small);
}
.gap-normal {
    --column-gap: var(--space-normal);
    --row-gap: var(--space-normal);
}
.gap {
    --column-gap: var(--space-normal);
    --row-gap: var(--space-normal);
}
.gap-medium {
    --column-gap: var(--space-medium);
    --row-gap: var(--space-medium);
}
.gap-large {
    --column-gap: var(--space-large);
    --row-gap: var(--space-large);
}
.gap-x-large {
    --column-gap: var(--space-x-large);
    --row-gap: var(--space-x-large);
}
.gap-xx-large {
    --column-gap: var(--space-xx-large);
    --row-gap: var(--space-xx-large);
}

/* column-gap ------------------------- */
:is(.column-gap-0, .column-gap-xx-small, .column-gap-x-small, .column-gap-small, .column-gap-normal, .column-gap, .column-gap-medium, .column-gap-large, .column-gap-x-large, .column-gap-xx-large) {
    column-gap: var(--column-gap);
    row-gap: var(--row-gap);
}
.column-gap-0 {
    --column-gap: 0;
    --row-gap: 0;
}
.column-gap-xx-small {
    --column-gap: var(--space-xx-small);
    --row-gap: var(--space-xx-small);
}
.column-gap-x-small {
    --column-gap: var(--space-x-small);
    --row-gap: var(--space-x-small);
}
.column-gap-small {
    --column-gap: var(--space-small);
    --row-gap: var(--space-small);
}
.column-gap-normal {
    --column-gap: var(--space-normal);
    --row-gap: var(--space-normal);
}
.column-gap {
    --column-gap: var(--space-normal);
    --row-gap: var(--space-normal);
}
.column-gap-medium {
    --column-gap: var(--space-medium);
    --row-gap: var(--space-medium);
}
.column-gap-large {
    --column-gap: var(--space-large);
    --row-gap: var(--space-large);
}
.column-gap-x-large {
    --column-gap: var(--space-x-large);
    --row-gap: var(--space-x-large);
}
.column-gap-xx-large {
    --column-gap: var(--space-xx-large);
    --row-gap: var(--space-xx-large);
}

/* row-gap ------------------------- */
:is(.row-gap-0, .row-gap-xx-small, .row-gap-x-small, .row-gap-small, .row-gap-normal, .row-gap, .row-gap-medium, .row-gap-large, .row-gap-x-large, .row-gap-xx-large) {
    column-gap: var(--column-gap);
    row-gap: var(--row-gap);
}
.row-gap-0 {
    --column-gap: 0;
    --row-gap: 0;
}
.row-gap-xx-small {
    --column-gap: var(--space-xx-small);
    --row-gap: var(--space-xx-small);
}
.row-gap-x-small {
    --column-gap: var(--space-x-small);
    --row-gap: var(--space-x-small);
}
.row-gap-small {
    --column-gap: var(--space-small);
    --row-gap: var(--space-small);
}
.row-gap-normal {
    --column-gap: var(--space-normal);
    --row-gap: var(--space-normal);
}
.row-gap {
    --column-gap: var(--space-normal);
    --row-gap: var(--space-normal);
}
.row-gap-medium {
    --column-gap: var(--space-medium);
    --row-gap: var(--space-medium);
}
.row-gap-large {
    --column-gap: var(--space-large);
    --row-gap: var(--space-large);
}
.row-gap-x-large {
    --column-gap: var(--space-x-large);
    --row-gap: var(--space-x-large);
}
.row-gap-xx-large {
    --column-gap: var(--space-xx-large);
    --row-gap: var(--space-xx-large);
}


/* margin ============================ */

/* margin ------------------------- */
:is(.m-0, .m-auto, .m-xx-small, .m-x-small, .m-small, .m-normal, .m, .m-medium, .m-large, .m-x-large, .m-xx-large) {
    margin-block-start: var(--margin-block-start);
    margin-block-end: var(--margin-block-end);
    margin-inline-start: var(--margin-inline-start);
    margin-inline-end: var(--margin-inline-end);
}
.m-0 {
    --margin-block-start: 0;
    --margin-block-end: 0;
    --margin-inline-start: 0;
    --margin-inline-end: 0;
}
.m-auto {
    --margin-block-start: auto;
    --margin-block-end: auto;
    --margin-inline-start: auto;
    --margin-inline-end: auto;
}
.m-xx-small {
    --margin-block-start: var(--space-xx-small);
    --margin-block-end: var(--space-xx-small);
    --margin-inline-start: var(--space-xx-small);
    --margin-inline-end: var(--space-xx-small);
}
.m-x-small {
    --margin-block-start: var(--space-x-small);
    --margin-block-end: var(--space-x-small);
    --margin-inline-start: var(--space-x-small);
    --margin-inline-end: var(--space-x-small);
}
.m-small {
    --margin-block-start: var(--space-small);
    --margin-block-end: var(--space-small);
    --margin-inline-start: var(--space-small);
    --margin-inline-end: var(--space-small);
}
.m-normal {
    --margin-block-start: var(--space-normal);
    --margin-block-end: var(--space-normal);
    --margin-inline-start: var(--space-normal);
    --margin-inline-end: var(--space-normal);
}
.m {
    --margin-block-start: var(--space-normal);
    --margin-block-end: var(--space-normal);
    --margin-inline-start: var(--space-normal);
    --margin-inline-end: var(--space-normal);
}
.m-medium {
    --margin-block-start: var(--space-medium);
    --margin-block-end: var(--space-medium);
    --margin-inline-start: var(--space-medium);
    --margin-inline-end: var(--space-medium);
}
.m-large {
    --margin-block-start: var(--space-large);
    --margin-block-end: var(--space-large);
    --margin-inline-start: var(--space-large);
    --margin-inline-end: var(--space-large);
}
.m-x-large {
    --margin-block-start: var(--space-x-large);
    --margin-block-end: var(--space-x-large);
    --margin-inline-start: var(--space-x-large);
    --margin-inline-end: var(--space-x-large);
}
.m-xx-large {
    --margin-block-start: var(--space-xx-large);
    --margin-block-end: var(--space-xx-large);
    --margin-inline-start: var(--space-xx-large);
    --margin-inline-end: var(--space-xx-large);
}

/* margin-block ------------------------- */
:is(.mb-0, .mb-auto, .mb-xx-small, .mb-x-small, .mb-small, .mb-normal, .mb, .mb-medium, .mb-large, .mb-x-large, .mb-xx-large) {
    margin-block-start: var(--margin-block-start);
    margin-block-end: var(--margin-block-end);
}
.mb-0 {
    --margin-block-start: 0;
    --margin-block-end: 0;
}
.mb-auto {
    --margin-block-start: auto;
    --margin-block-end: auto;
}
.mb-xx-small {
    --margin-block-start: var(--space-xx-small);
    --margin-block-end: var(--space-xx-small);
}
.mb-x-small {
    --margin-block-start: var(--space-x-small);
    --margin-block-end: var(--space-x-small);
}
.mb-small {
    --margin-block-start: var(--space-small);
    --margin-block-end: var(--space-small);
}
.mb-normal {
    --margin-block-start: var(--space-normal);
    --margin-block-end: var(--space-normal);
}
.mb {
    --margin-block-start: var(--space-normal);
    --margin-block-end: var(--space-normal);
}
.mb-medium {
    --margin-block-start: var(--space-medium);
    --margin-block-end: var(--space-medium);
}
.mb-large {
    --margin-block-start: var(--space-large);
    --margin-block-end: var(--space-large);
}
.mb-x-large {
    --margin-block-start: var(--space-x-large);
    --margin-block-end: var(--space-x-large);
}
.mb-xx-large {
    --margin-block-start: var(--space-xx-large);
    --margin-block-end: var(--space-xx-large);
}

/* margin-block-start ------------------------- */
:is(.mbs-0, .mbs-auto, .mbs-xx-small, .mbs-x-small, .mbs-small, .mbs-normal, .mbs, .mbs-medium, .mbs-large, .mbs-x-large, .mbs-xx-large) {
    margin-block-start: var(--margin-block-start);
}
.mbs-0 {
    --margin-block-start: 0;
}
.mbs-auto {
    --margin-block-start: auto;
}
.mbs-xx-small {
    --margin-block-start: var(--space-xx-small);
}
.mbs-x-small {
    --margin-block-start: var(--space-x-small);
}
.mbs-small {
    --margin-block-start: var(--space-small);
}
.mbs-normal {
    --margin-block-start: var(--space-normal);
}
.mbs {
    --margin-block-start: var(--space-normal);
}
.mbs-medium {
    --margin-block-start: var(--space-medium);
}
.mbs-large {
    --margin-block-start: var(--space-large);
}
.mbs-x-large {
    --margin-block-start: var(--space-x-large);
}
.mbs-xx-large {
    --margin-block-start: var(--space-xx-large);
}

/* margin-block-end ------------------------- */
:is(.mbe-0, .mbe-auto, .mbe-xx-small, .mbe-x-small, .mbe-small, .mbe-normal, .mbe, .mbe-medium, .mbe-large, .mbe-x-large, .mbe-xx-large) {
    margin-block-end: var(--margin-block-end);
}
.mbe-0 {
    --margin-block-end: 0;
}
.mbe-auto {
    --margin-block-end: auto;
}
.mbe-xx-small {
    --margin-block-end: var(--space-xx-small);
}
.mbe-x-small {
    --margin-block-end: var(--space-x-small);
}
.mbe-small {
    --margin-block-end: var(--space-small);
}
.mbe-normal {
    --margin-block-end: var(--space-normal);
}
.mbe {
    --margin-block-end: var(--space-normal);
}
.mbe-medium {
    --margin-block-end: var(--space-medium);
}
.mbe-large {
    --margin-block-end: var(--space-large);
}
.mbe-x-large {
    --margin-block-end: var(--space-x-large);
}
.mbe-xx-large {
    --margin-block-end: var(--space-xx-large);
}

/* margin-inline ------------------------- */
:is(.mi-0, .mi-auto, .mi-xx-small, .mi-x-small, .mi-small, .mi-normal, .mi, .mi-medium, .mi-large, .mi-x-large, .mi-xx-large) {
    margin-inline-start: var(--margin-inline-start);
    margin-inline-end: var(--margin-inline-end);
}
.mi-0 {
    --margin-inline-start: 0;
    --margin-inline-end: 0;
}
.mi-auto {
    --margin-inline-start: auto;
    --margin-inline-end: auto;
}
.mi-xx-small {
    --margin-inline-start: var(--space-xx-small);
    --margin-inline-end: var(--space-xx-small);
}
.mi-x-small {
    --margin-inline-start: var(--space-x-small);
    --margin-inline-end: var(--space-x-small);
}
.mi-small {
    --margin-inline-start: var(--space-small);
    --margin-inline-end: var(--space-small);
}
.mi-normal {
    --margin-inline-start: var(--space-normal);
    --margin-inline-end: var(--space-normal);
}
.mi {
    --margin-inline-start: var(--space-normal);
    --margin-inline-end: var(--space-normal);
}
.mi-medium {
    --margin-inline-start: var(--space-medium);
    --margin-inline-end: var(--space-medium);
}
.mi-large {
    --margin-inline-start: var(--space-large);
    --margin-inline-end: var(--space-large);
}
.mi-x-large {
    --margin-inline-start: var(--space-x-large);
    --margin-inline-end: var(--space-x-large);
}
.mi-xx-large {
    --margin-inline-start: var(--space-xx-large);
    --margin-inline-end: var(--space-xx-large);
}

/* margin-inline-start ------------------------- */
:is(.mis-0, .mis-auto, .mis-xx-small, .mis-x-small, .mis-small, .mis-normal, .mis, .mis-medium, .mis-large, .mis-x-large, .mis-xx-large) {
    margin-inline-start: var(--margin-inline-start);
}
.mis-0 {
    --margin-inline-start: 0;
}
.mis-auto {
    --margin-inline-start: auto;
}
.mis-xx-small {
    --margin-inline-start: var(--space-xx-small);
}
.mis-x-small {
    --margin-inline-start: var(--space-x-small);
}
.mis-small {
    --margin-inline-start: var(--space-small);
}
.mis-normal {
    --margin-inline-start: var(--space-normal);
}
.mis {
    --margin-inline-start: var(--space-normal);
}
.mis-medium {
    --margin-inline-start: var(--space-medium);
}
.mis-large {
    --margin-inline-start: var(--space-large);
}
.mis-x-large {
    --margin-inline-start: var(--space-x-large);
}
.mis-xx-large {
    --margin-inline-start: var(--space-xx-large);
}

/* margin-inline-end ------------------------- */
:is(.mie-0, .mie-auto, .mie-xx-small, .mie-x-small, .mie-small, .mie-normal, .mie, .mie-medium, .mie-large, .mie-x-large, .mie-xx-large) {
    margin-inline-end: var(--margin-inline-end);
}
.mie-0 {
    --margin-inline-end: 0;
}
.mie-auto {
    --margin-inline-end: auto;
}
.mie-xx-small {
    --margin-inline-end: var(--space-xx-small);
}
.mie-x-small {
    --margin-inline-end: var(--space-x-small);
}
.mie-small {
    --margin-inline-end: var(--space-small);
}
.mie-normal {
    --margin-inline-end: var(--space-normal);
}
.mie {
    --margin-inline-end: var(--space-normal);
}
.mie-medium {
    --margin-inline-end: var(--space-medium);
}
.mie-large {
    --margin-inline-end: var(--space-large);
}
.mie-x-large {
    --margin-inline-end: var(--space-x-large);
}
.mie-xx-large {
    --margin-inline-end: var(--space-xx-large);
}


/* padding ============================ */

/* padding ------------------------- */
:is(.p-0, .p-auto, .p-xx-small, .p-x-small, .p-small, .p-normal, .p, .p-medium, .p-large, .p-x-large, .p-xx-large) {
    padding-block-start: var(--padding-block-start);
    padding-block-end: var(--padding-block-end);
    padding-inline-start: var(--padding-inline-start);
    padding-inline-end: var(--padding-inline-end);
}
.p-0 {
    --padding-block-start: 0;
    --padding-block-end: 0;
    --padding-inline-start: 0;
    --padding-inline-end: 0;
}
.p-auto {
    --padding-block-start: auto;
    --padding-block-end: auto;
    --padding-inline-start: auto;
    --padding-inline-end: auto;
}
.p-xx-small {
    --padding-block-start: var(--space-xx-small);
    --padding-block-end: var(--space-xx-small);
    --padding-inline-start: var(--space-xx-small);
    --padding-inline-end: var(--space-xx-small);
}
.p-x-small {
    --padding-block-start: var(--space-x-small);
    --padding-block-end: var(--space-x-small);
    --padding-inline-start: var(--space-x-small);
    --padding-inline-end: var(--space-x-small);
}
.p-small {
    --padding-block-start: var(--space-small);
    --padding-block-end: var(--space-small);
    --padding-inline-start: var(--space-small);
    --padding-inline-end: var(--space-small);
}
.p-normal {
    --padding-block-start: var(--space-normal);
    --padding-block-end: var(--space-normal);
    --padding-inline-start: var(--space-normal);
    --padding-inline-end: var(--space-normal);
}
.p {
    --padding-block-start: var(--space-normal);
    --padding-block-end: var(--space-normal);
    --padding-inline-start: var(--space-normal);
    --padding-inline-end: var(--space-normal);
}
.p-medium {
    --padding-block-start: var(--space-medium);
    --padding-block-end: var(--space-medium);
    --padding-inline-start: var(--space-medium);
    --padding-inline-end: var(--space-medium);
}
.p-large {
    --padding-block-start: var(--space-large);
    --padding-block-end: var(--space-large);
    --padding-inline-start: var(--space-large);
    --padding-inline-end: var(--space-large);
}
.p-x-large {
    --padding-block-start: var(--space-x-large);
    --padding-block-end: var(--space-x-large);
    --padding-inline-start: var(--space-x-large);
    --padding-inline-end: var(--space-x-large);
}
.p-xx-large {
    --padding-block-start: var(--space-xx-large);
    --padding-block-end: var(--space-xx-large);
    --padding-inline-start: var(--space-xx-large);
    --padding-inline-end: var(--space-xx-large);
}

/* padding-block ------------------------- */
:is(.pb-0, .pb-auto, .pb-xx-small, .pb-x-small, .pb-small, .pb-normal, .pb, .pb-medium, .pb-large, .pb-x-large, .pb-xx-large) {
    padding-block-start: var(--padding-block-start);
    padding-block-end: var(--padding-block-end);
}
.pb-0 {
    --padding-block-start: 0;
    --padding-block-end: 0;
}
.pb-auto {
    --padding-block-start: auto;
    --padding-block-end: auto;
}
.pb-xx-small {
    --padding-block-start: var(--space-xx-small);
    --padding-block-end: var(--space-xx-small);
}
.pb-x-small {
    --padding-block-start: var(--space-x-small);
    --padding-block-end: var(--space-x-small);
}
.pb-small {
    --padding-block-start: var(--space-small);
    --padding-block-end: var(--space-small);
}
.pb-normal {
    --padding-block-start: var(--space-normal);
    --padding-block-end: var(--space-normal);
}
.pb {
    --padding-block-start: var(--space-normal);
    --padding-block-end: var(--space-normal);
}
.pb-medium {
    --padding-block-start: var(--space-medium);
    --padding-block-end: var(--space-medium);
}
.pb-large {
    --padding-block-start: var(--space-large);
    --padding-block-end: var(--space-large);
}
.pb-x-large {
    --padding-block-start: var(--space-x-large);
    --padding-block-end: var(--space-x-large);
}
.pb-xx-large {
    --padding-block-start: var(--space-xx-large);
    --padding-block-end: var(--space-xx-large);
}

/* padding-block-start ------------------------- */
:is(.pbs-0, .pbs-auto, .pbs-xx-small, .pbs-x-small, .pbs-small, .pbs-normal, .pbs, .pbs-medium, .pbs-large, .pbs-x-large, .pbs-xx-large) {
    padding-block-start: var(--padding-block-start);
}
.pbs-0 {
    --padding-block-start: 0;
}
.pbs-auto {
    --padding-block-start: auto;
}
.pbs-xx-small {
    --padding-block-start: var(--space-xx-small);
}
.pbs-x-small {
    --padding-block-start: var(--space-x-small);
}
.pbs-small {
    --padding-block-start: var(--space-small);
}
.pbs-normal {
    --padding-block-start: var(--space-normal);
}
.pbs {
    --padding-block-start: var(--space-normal);
}
.pbs-medium {
    --padding-block-start: var(--space-medium);
}
.pbs-large {
    --padding-block-start: var(--space-large);
}
.pbs-x-large {
    --padding-block-start: var(--space-x-large);
}
.pbs-xx-large {
    --padding-block-start: var(--space-xx-large);
}

/* padding-block-end ------------------------- */
:is(.pbe-0, .pbe-auto, .pbe-xx-small, .pbe-x-small, .pbe-small, .pbe-normal, .pbe, .pbe-medium, .pbe-large, .pbe-x-large, .pbe-xx-large) {
    padding-block-end: var(--padding-block-end);
}
.pbe-0 {
    --padding-block-end: 0;
}
.pbe-auto {
    --padding-block-end: auto;
}
.pbe-xx-small {
    --padding-block-end: var(--space-xx-small);
}
.pbe-x-small {
    --padding-block-end: var(--space-x-small);
}
.pbe-small {
    --padding-block-end: var(--space-small);
}
.pbe-normal {
    --padding-block-end: var(--space-normal);
}
.pbe {
    --padding-block-end: var(--space-normal);
}
.pbe-medium {
    --padding-block-end: var(--space-medium);
}
.pbe-large {
    --padding-block-end: var(--space-large);
}
.pbe-x-large {
    --padding-block-end: var(--space-x-large);
}
.pbe-xx-large {
    --padding-block-end: var(--space-xx-large);
}

/* padding-inline ------------------------- */
:is(.pi-0, .pi-auto, .pi-xx-small, .pi-x-small, .pi-small, .pi-normal, .pi, .pi-medium, .pi-large, .pi-x-large, .pi-xx-large) {
    padding-inline-start: var(--padding-inline-start);
    padding-inline-end: var(--padding-inline-end);
}
.pi-0 {
    --padding-inline-start: 0;
    --padding-inline-end: 0;
}
.pi-auto {
    --padding-inline-start: auto;
    --padding-inline-end: auto;
}
.pi-xx-small {
    --padding-inline-start: var(--space-xx-small);
    --padding-inline-end: var(--space-xx-small);
}
.pi-x-small {
    --padding-inline-start: var(--space-x-small);
    --padding-inline-end: var(--space-x-small);
}
.pi-small {
    --padding-inline-start: var(--space-small);
    --padding-inline-end: var(--space-small);
}
.pi-normal {
    --padding-inline-start: var(--space-normal);
    --padding-inline-end: var(--space-normal);
}
.pi {
    --padding-inline-start: var(--space-normal);
    --padding-inline-end: var(--space-normal);
}
.pi-medium {
    --padding-inline-start: var(--space-medium);
    --padding-inline-end: var(--space-medium);
}
.pi-large {
    --padding-inline-start: var(--space-large);
    --padding-inline-end: var(--space-large);
}
.pi-x-large {
    --padding-inline-start: var(--space-x-large);
    --padding-inline-end: var(--space-x-large);
}
.pi-xx-large {
    --padding-inline-start: var(--space-xx-large);
    --padding-inline-end: var(--space-xx-large);
}

/* padding-inline-start ------------------------- */
:is(.pis-0, .pis-auto, .pis-xx-small, .pis-x-small, .pis-small, .pis-normal, .pis, .pis-medium, .pis-large, .pis-x-large, .pis-xx-large) {
    padding-inline-start: var(--padding-inline-start);
}
.pis-0 {
    --padding-inline-start: 0;
}
.pis-auto {
    --padding-inline-start: auto;
}
.pis-xx-small {
    --padding-inline-start: var(--space-xx-small);
}
.pis-x-small {
    --padding-inline-start: var(--space-x-small);
}
.pis-small {
    --padding-inline-start: var(--space-small);
}
.pis-normal {
    --padding-inline-start: var(--space-normal);
}
.pis {
    --padding-inline-start: var(--space-normal);
}
.pis-medium {
    --padding-inline-start: var(--space-medium);
}
.pis-large {
    --padding-inline-start: var(--space-large);
}
.pis-x-large {
    --padding-inline-start: var(--space-x-large);
}
.pis-xx-large {
    --padding-inline-start: var(--space-xx-large);
}

/* padding-inline-end ------------------------- */
:is(.pie-0, .pie-auto, .pie-xx-small, .pie-x-small, .pie-small, .pie-normal, .pie, .pie-medium, .pie-large, .pie-x-large, .pie-xx-large) {
    padding-inline-end: var(--padding-inline-end);
}
.pie-0 {
    --padding-inline-end: 0;
}
.pie-auto {
    --padding-inline-end: auto;
}
.pie-xx-small {
    --padding-inline-end: var(--space-xx-small);
}
.pie-x-small {
    --padding-inline-end: var(--space-x-small);
}
.pie-small {
    --padding-inline-end: var(--space-small);
}
.pie-normal {
    --padding-inline-end: var(--space-normal);
}
.pie {
    --padding-inline-end: var(--space-normal);
}
.pie-medium {
    --padding-inline-end: var(--space-medium);
}
.pie-large {
    --padding-inline-end: var(--space-large);
}
.pie-x-large {
    --padding-inline-end: var(--space-x-large);
}
.pie-xx-large {
    --padding-inline-end: var(--space-xx-large);
}
}
@layer utility {
.measure,
.measure-x-small,
.measure-small,
.measure-normal {
    max-inline-size: var(--measure);
}

.measure-x-small {
    --measure: var(--measure-x-small);
}

.measure-small {
    --measure: var(--measure-small);
}

.measure,
.measure-normal {
    --measure: var(--measure-normal);
}
}
@layer utility {
.center {
    box-sizing: content-box;
    margin-inline: auto;
    max-inline-size: var(--measure, fit-content);
}

/*.cc {
    display: grid;
    place-content: center;
}*/
}
@layer utility {
.inline-block {
    display: inline-block;
}
}
@layer utility {
.pointer {
    cursor: pointer;
}
}
@layer utility {
.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.flex-none {
    flex: none;
}

.flex-column {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.flex-wrap-reverse {
    flex-wrap: wrap-reverse;
}

.flex-column-reverse {
    flex-direction: column-reverse;
}

.flex-row-reverse {
    flex-direction: row-reverse;
}

.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.items-center {
    align-items: center;
}

.items-baseline {
    align-items: baseline;
}

.items-stretch {
    align-items: stretch;
}

.self-start {
    align-self: flex-start;
}

.self-end {
    align-self: flex-end;
}

.self-center {
    align-self: center;
}

.self-baseline {
    align-self: baseline;
}

.self-stretch {
    align-self: stretch;
}

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.content-start {
    align-content: flex-start;
}

.content-end {
    align-content: flex-end;
}

.content-center {
    align-content: center;
}

.content-between {
    align-content: space-between;
}

.content-around {
    align-content: space-around;
}

.content-stretch {
    align-content: stretch;
}

}
@layer utility {
.grid {
    display: grid;
}

.inline-grid {
    display: inline-grid;
}

.auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(min(var(--min-column-size, 16rem), 100%), 1fr));
}

.auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(min(var(--min-column-size, 16rem), 100%), 1fr));
}

.subgrid {
    display: grid;
    grid-template-columns: subgrid;
}

/* hmm.... */

.column-size-small {
    --min-column-size: 8rem;
}

.column-size-normal {
    --min-column-size: 16rem;
}

.column-size-medium {
    --min-column-size: 32rem;
}
}
@layer utility {
/* stack might be usefull on its own, but forms will always have a first child that's a hidden input */

.stack {
    display: grid;
}

.stack > * {
    margin-block: 0;
}
}
@layer utility {
.decoration-none {
    text-decoration: none;
}

.nw, .nowrap {
    white-space: nowrap;
}

.subtle {
    color: var(--text-subtle);
}

/* Font weights */
.weight-thin {
    font-weight: var(--font-weight-thin);
}
.weight-light {
    font-weight: var(--font-weight-light);
}
.weight-normal {
    font-weight: var(--font-weight-normal);
}
.weight-medium {
    font-weight: var(--font-weight-medium);
}
.weight-semibold {
    font-weight: var(--font-weight-semibold);
}
.weight-bold {
    font-weight: var(--font-weight-bold);
}
.weight-heavy {
    font-weight: var(--font-weight-heavy);
}

/* Font sizes */
.font-size-xx-small {
    font-size: var(--font-size-xx-small);
}
.font-size-x-small {
    font-size: var(--font-size-x-small);
}
.font-size-small {
    font-size: var(--font-size-small);
}
.font-size-normal {
    font-size: var(--font-size-normal);
}
.font-size-medium {
    font-size: var(--font-size-medium);
}
.font-size-large {
    font-size: var(--font-size-large);
}
.font-size-x-large {
    font-size: var(--font-size-x-large);
}
.font-size-xx-large {
    font-size: var(--font-size-xx-large);
}

}
@layer utility {


}


/*# sourceMappingURL=shared.css.map*/