/* Let's wait to re-introduce layers as we need them
@layer reset, base, layout, component, utility;
*/
@layer reset, base, layout, component, utility;

/* Import the Inter font css so we can update it separately */
@import "inter/inter.css";

/* Let's try keeping everything else inline in one file? */

/*
    Reset
    ==============================================================
    Minimal reset of default browser styles, inspired by:
    https://www.joshwcomeau.com/css/custom-css-reset/
    https://github.com/jensimmons/cssremedy
*/
@layer reset {
    *, ::before, ::after {
        box-sizing: border-box;
    }

    :not(dialog, [popover]) {
        margin: 0;
    }

    html {
        line-height: 1.5;
        text-size-adjust: none;
    }

    [hidden] {
        display: none;
    }

    pre {
        white-space: pre-wrap;
    }

    img, svg, video, canvas, audio, iframe, embed, object {
        display: block;
        vertical-align: middle;
        /*max-width: 100%;*/ /* doesn't work well in flex containers in FF */
    }

        audio:not([controls]) {
            display: none;
        }

    img, svg, video, canvas {
        height: auto;
    }

    input, button, textarea, select {
        font: inherit;
    }

    audio {
        width: 100%;
    }

    h1, h2, h3, h4, h5, h6 {
        line-height: 1.25;
    }

    caption, figcaption, label, legend {
        line-height: 1.375;
    }

    p, h1, h2, h3, h4, h5, h6 {
        overflow-wrap: break-word;
    }

    p {
        text-wrap: pretty;
    }

    h1, h2, h3, h4, h5, h6 {
        text-wrap: balance;
    }

    hr {
        border-style: solid;
        border-width: 1px 0 0;
        color: inherit;
        height: 0;
        overflow: visible;
    }
}

/*
    Design tokens
    ==============================================================
    "design decisions, translated into data"
     https://spectrum.adobe.com/page/design-tokens/
*/
:root {
    /* 
        Color tokens (JMD: these were fine-tuned with a custom tool) 
    */
    --white: oklch(1 0 none);
    --black: oklch(0 0 none);
    /*
    --gray-10: oklch(0.99 0.002 71);
    --gray-20: oklch(0.9825 0.002 71);
    --gray-30: oklch(0.9725 0.002 71);
    --gray-40: oklch(0.965 0.002 71);
    --gray-50: oklch(0.955 0.002 71);
    --gray-100: oklch(0.925 0.002 71);
    --gray-200: oklch(0.835 0.002 71);
    --gray-300: oklch(0.7475 0.002 71);
    --gray-400: oklch(0.6575 0.002 71);
    --gray-500: oklch(0.5625 0.002 71);
    --gray-600: oklch(0.475 0.002 71);
    --gray-700: oklch(0.39 0.002 71);
    --gray-800: oklch(0.3 0.002 71);
    --gray-900: oklch(0.2225 0.002 71);
    */
    --gray-0: oklch(1 0.002 71);
    --gray-10: oklch(0.985 0.002 71);
    --gray-30: oklch(0.97 0.002 71);
    --gray-50: oklch(0.9475 0.002 71);
    --gray-100: oklch(0.91 0.002 71);
    --gray-200: oklch(0.795 0.002 71);
    --gray-300: oklch(0.71 0.002 71);
    --gray-400: oklch(0.61 0.002 71);
    --gray-500: oklch(0.56 0.002 71);
    --gray-600: oklch(0.465 0.002 71);
    --gray-700: oklch(0.3675 0.002 71);
    --gray-800: oklch(0.31 0.002 71);
    --gray-850: oklch(0.27 0.002 71);
    --gray-900: oklch(0.2125 0.002 71);
    --gray-1000: oklch(0 0.002 71);
    --brand-0: oklch(1 0 229);
    --brand-10: oklch(0.985 0.015 229);
    --brand-30: oklch(0.97 0.025 229);
    --brand-50: oklch(0.945 0.04 229);
    --brand-100: oklch(0.905 0.06 229);
    --brand-200: oklch(0.79 0.08 229);
    --brand-300: oklch(0.705 0.09 229);
    --brand-400: oklch(0.6025 0.095 229);
    --brand-500: oklch(0.555 0.1 229);
    --brand-600: oklch(0.46 0.1 229);
    --brand-700: oklch(0.3625 0.1 229);
    --brand-800: oklch(0.305 0.1 229);
    --brand-850: oklch(0.265 0.1 229);
    --brand-900: oklch(0.21 0.1 229);
    --brand-1000: oklch(0 0.1 229);
    /*
        Fluid size/space tokens, calculated here (but renamed):
        https://utopia.fyi/space/calculator/?c=320,13,1.125,1240,16,1.2,4,3,&s=0.55|0.25|0.1,1.5|2|3|4|6,s-l&g=s,l,xl,12
    */
    --space-xx-small: clamp(0.0625rem, 0.0408rem + 0.1087vw, 0.125rem);
    --space-x-small: clamp(0.4375rem, 0.4158rem + 0.1087vw, 0.5rem);
    --space-small: clamp(0.4375rem, 0.394rem + 0.2174vw, 0.5625rem);
    --space-normal: clamp(0.8125rem, 0.7473rem + 0.3261vw, 1rem);
    --space-medium: clamp(1.25rem, 1.163rem + 0.4348vw, 1.5rem);
    --space-large: clamp(1.625rem, 1.4946rem + 0.6522vw, 2rem);
    --space-x-large: clamp(2.4375rem, 2.2418rem + 0.9783vw, 3rem);
    --space-xx-large: clamp(3.25rem, 2.9891rem + 1.3043vw, 4rem);
    --space-none-to-normal: clamp(0rem, -1.8182rem + 3.6364vw, 1rem);
    --space-small-to-large: clamp(0.625rem, 0.1467rem + 2.3913vw, 2rem);
    /*
        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;
}
/* Use variable font if browser supports it */
@supports (font-variation-settings: normal) {
    :root {
        --font-family: InterVariable, system-ui, sans-serif;
    }
}

/*
    Color schemes
    ==============================================================
    using the built-in support for light/dark modes,
    with optional override classes
    https://css-tricks.com/come-to-the-light-dark-side/
*/
/*:root {
    color-scheme: light dark;
}*/

    /*html.light,
    :root:has(#theme-light:checked) {
        color-scheme: light;
    }*/

    /*html.dark,
    :root:has(#theme-dark:checked) {
        color-scheme: dark;
    }*/

/*
    Semantic tokens
    ==============================================================
    everthing with a color should map to one of these values
*/
:root {
    /* naming convention is still a work-in-progress */
    --background-color: light-dark(var(--white), var(--gray-800));
    --background-color-hover: light-dark(var(--gray-10), var(--gray-850));
    --border-color: light-dark(var(--gray-100), var(--gray-700));
    --brand-logo-color: light-dark(var(--brand-500), var(--brand-500));
    --button-background-color: light-dark(var(--gray-50), var(--gray-600));
    --button-background-color-active: light-dark(var(--gray-30), var(--gray-600));
    --button-background-color-hover: light-dark(var(--gray-100), var(--gray-500));
    --button-border-color: light-dark(var(--gray-300), var(--gray-800));
    --button-text-color: light-dark(var(--gray-700), var(--gray-100));
    --button-primary-background-color: light-dark(var(--brand-500), var(--brand-500));
    --button-primary-background-color-active: light-dark(var(--brand-400), var(--brand-400));
    --button-primary-background-color-hover: light-dark(var(--brand-600), var(--brand-600));
    --button-primary-border-color: light-dark(var(--brand-700), var(--brand-700));
    --button-primary-text-color: light-dark(var(--white), var(--white));
    --info-background-color: light-dark(var(--gray-10), var(--gray-800));
    --nav-primary-background-color: light-dark(var(--gray-30), var(--gray-850));
    --nav-primary-text-color: light-dark(var(--gray-700), var(--gray-200));
    --nav-secondary-background-color: light-dark(var(--gray-50), var(--gray-900));
    --nav-secondary-background-color-hover: light-dark(var(--gray-100), var(--gray-800));
    --nav-secondary-text-color: light-dark(var(--gray-700), var(--gray-200));
    --pill-background-color: light-dark(var(--brand-30), var(--brand-30));
    --pill-border-color: light-dark(var(--brand-50), var(--brand-50));
    --skeleton-background-color: light-dark(var(--gray-50), var(--gray-800));
    --skeleton-alternating-background-color: light-dark(var(--gray-100), var(--gray-700));
    --shadow-color: light-dark(rgb(0 0 0 / 0.25), rgb(255 255 255 / 0.25));
    --subtle-text-color: light-dark(var(--gray-500), var(--gray-300));
    --table-header-background-color: light-dark(var(--gray-30), var(--gray-700));
    --text-color: light-dark(var(--gray-700), var(--gray-100));
    --text-invalid-color: light-dark(darkred, pink); /* HACK */
}

/*
    Root styles
    ==============================================================
*/
:root {
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: var(--font-family);
    font-size: var(--font-size-normal);
    font-weight: var(--font-weight-normal);
    font-feature-settings: 'liga' 1, 'calt' 1; /* Inter docs call for this fix for Chrome */
}


/*
    Base styles
    ==============================================================
*/
@layer base {

    :is(h1, h2, h3, h4, h5, h6) {
        line-height: 1.2;
        margin-block: 2em 1em;
        font-weight: var(--font-weight-medium);
    }

        :is(h1, h2, h3, h4, h5, h6):first-child {
            margin-block-start: 0;
        }

    :is(h1, h2, h3, h4, h5, h6) > span {
        font-weight: var(--font-weight-light);
    }

    h1 {
        font-size: var(--font-size-xx-large);
    }

    h2 {
        font-size: var(--font-size-x-large);
    }

    h3 {
        font-size: var(--font-size-large);
    }

    h4 {
        font-size: var(--font-size-medium);
    }

    h5 {
        font-size: var(--font-size-normal);
    }

    h6 {
        font-size: var(--font-size-small);
    }

    a {
        color: inherit;
        text-decoration-line: underline;
        text-decoration-thickness: max(1px, .0625rem);
        text-underline-offset: .125em;
    }

        a.primary {
            color: var(--text-primary-color);
        }

        a:hover,
        a:focus {
            text-decoration-thickness: max(2px, .125rem, .125em);
            text-decoration-skip-ink: none;
        }

    p {
        max-width: 70ch;
    }

    /* if we put a class on a list we won't want the default list style */
    :where(ol[class], ul[class]) {
        padding: 0;
        list-style: none;
    }

    dialog, [popover] {
        padding: var(--space-normal);
        border-radius: var(--space-normal);
        border: 1px solid var(--border-color);
        box-shadow: var(--shadow-color) 2px 2px 8px 1px;
    }
}

/*
    Layout primitives
    ==============================================================
*/
@layer utility {

    /* https://every-layout.dev/layouts/sidebar/ */
    .with-sidebar {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        gap: var(--sidebar-gap, 0);
        /* for debugging percentage wrap breakpoints */
        /*background: repeating-linear-gradient(90deg, whitesmoke, whitesmoke 5%, pink 5%, pink 10% );*/
    }

        .with-sidebar > :first-child {
            flex-basis: var(--sidebar-width, 0);
            flex-grow: 1;
        }

        .with-sidebar > :last-child {
            flex-basis: 0;
            flex-grow: 999;
            min-inline-size: var(--sidebar-wrap, 70%);
        }

    /* https://every-layout.dev/layouts/cluster/ */
    .cluster {
        display: flex;
        flex-wrap: wrap;
        gap: var(--gap, var(--space-normal));
    }

    /* https://every-layout.dev/layouts/stack/ */
    .stack > * + * {
        margin-block-start: var(--stack-margin, var(--space-normal));
    }

    /* https://every-layout.dev/layouts/center/ */
    .center {
        box-sizing: content-box;
        margin-inline: auto;
        max-inline-size: var(--measure, 60ch);
        padding-inline: var(--center-padding, var(--space-normal));
    }

    .cover {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-block-size: 100vh;
    }
}

/*
    Utility classes
    ==============================================================
*/
@layer utility {

    .anchor {
        position: fixed;
        margin: 0;
    }

    .anchor-bottom-left {
        position-area: bottom left;
        position-try-fallbacks: top left;
        margin-inline-end: calc(-1 * anchor-size(width));
    }

    .flex {
        display: flex;
        gap: var(--gap, var(--space-normal));
    }

    .grid {
        display: grid;
        gap: var(--gap, var(--space-normal));
    }

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

    .gap-none {
        --gap: 0;
    }

    .gap-xx-small,
    .gap-smallest {
        --gap: var(--space-xx-small);
    }

    .gap-x-small {
        --gap: var(--space-x-small);
    }

    .gap-small {
        --gap: var(--space-small);
    }

    .gap-normal {
        --gap: var(--space-normal);
    }

    .gap-medium {
        --gap: var(--space-medium);
    }

    .gap-large {
        --gap: var(--space-large);
    }

    .gap-x-large {
        --gap: var(--space-x-large);
    }

    .gap-xx-large {
        --gap: var(--space-xx-large);
    }

    .grow {
        flex-grow: 1;
    }

    .grow-0 {
        flex-grow: 0;
    }

    .shrink-0 {
        flex-shrink: 0;
    }

    .font-size-xx-small,
    .font-size-smallest {
        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);
    }

    .tnum {
        font-feature-settings: "tnum";
    }

    .font-weight-thin {
        font-weight: var(--font-weight-thin);
    }

    .font-weight-light {
        font-weight: var(--font-weight-light);
    }

    .font-weight-normal {
        font-weight: var(--font-weight-normal);
    }

    .font-weight-medium {
        font-weight: var(--font-weight-medium);
    }

    .font-weight-semibold {
        font-weight: var(--font-weight-semibold);
    }

    .font-weight-bold {
        font-weight: var(--font-weight-bold);
    }

    .font-weight-heavy {
        font-weight: var(--font-weight-heavy);
    }

    .uppercase {
        text-transform: uppercase;
    }

    .elide {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

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

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

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

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

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

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

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

    .push {
        margin-inline-start: auto;
    }

    .position-fixed {
        position: fixed;
    }

    .position-sticky {
        position: sticky;
    }

    .stack-margin-xx-small {
        --stack-margin: var(--space-xx-small);
    }

    .stack-margin-x-small {
        --stack-margin: var(--space-x-small);
    }

    .stack-margin-small {
        --stack-margin: var(--space-small);
    }

    .stack-margin-normal {
        --stack-margin: var(--space-normal);
    }

    .stack-margin-large {
        --stack-margin: var(--space-large);
    }

    .top-0 {
        top: 0;
    }

    .left-0 {
        left: 0;
    }

    .right-0 {
        right: 0;
    }

    .height-xx-small {
        height: var(--space-xx-small);
    }

    .height-x-small {
        height: var(--space-x-small);
    }

    .height-small {
        height: var(--space-small);
    }

    .margin-0 {
        margin: 0;
    }

    .margin-block-start-normal {
        margin-block-start: var(--space-normal);
    }

    .margin-block-start-large {
        margin-block-start: var(--space-large);
    }

    .padding-small {
        padding: var(--space-small);
    }

    .padding-block-x-small {
        padding-block: var(--space-x-small);
    }

    .padding-block-small {
        padding-block: var(--space-small);
    }

    .padding-block-normal {
        padding-block: var(--space-normal);
    }

    .padding-normal {
        padding: var(--space-normal);
    }

    .padding-inline-small {
        padding-inline: var(--space-small);
    }

    .padding-inline-normal {
        padding-inline: var(--space-normal);
    }

    .padding-inline-medium {
        padding-inline: var(--space-medium);
    }

    .text-align-left {
        text-align: left;
    }

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

    .text-align-right {
        text-align: right;
    }

    .text-decoration-none {
        text-decoration-line: none;
    }

    .text-decoration-underline-hover:hover {
        text-decoration-line: underline;
    }

    .balance {
        text-wrap: balance;
    }

    .pretty {
        text-wrap: pretty;
    }

    .with-js .js-hidden {
        display: none;
    }

    .nowrap {
        white-space: nowrap;
    }
}

/*
    Layout
    ==============================================================
*/
@layer layout {
    .dashboard {
        --dashboard-top-height: 3rem;
    }

    .dashboard__top {
        min-height: var(--dashboard-top-height);
    }

    .dashboard__top,
    .dashboard__bar {
        background-color: var(--nav-secondary-background-color);
        color: var(--nav-secondary-text-color);
    }

    .dashboard__left {
        background-color: var(--nav-primary-background-color);
        color: var(--nav-primary-text-color);
        position: relative;
        border-start-start-radius: var(--space-none-to-normal);
        /*isolation: isolate;*/
    }

        .dashboard__left::before {
            content: "";
            position: absolute;
            background-color: var(--nav-secondary-background-color);
            inset: 0;
            z-index: -1;
        }

    main {
        padding: var(--space-small) var(--space-small-to-large) var(--space-large);
        position: relative;
        background-color: var(--background-color);
        border-start-start-radius: var(--space-none-to-normal);
        min-height: calc(100dvh - var(--dashboard-top-height));
    }

        main::before {
            content: "";
            position: absolute;
            background-color: var(--nav-primary-background-color);
            inset: 0;
            z-index: -1;
        }

    hr.dashboard__indicator {
        position: fixed;
        top: 0;
        left: 0;
        height: var(--space-xx-small);
        right: 100%;
        background-color: var(--brand-logo-color);
        transition: right 0s;
    }

        hr.dashboard__indicator.htmx-request {
            right: 0;
            transition: right ease-out 0.4s;
        }

    .test {
        position: fixed;
        inset: 100% 100% 0 0;
        background-color: white;
        opacity: 0.5;
        overflow: clip;
        transition: inset 0s 0s;
    }

    .test.htmx-request {
        inset: 0;
        transition: inset 0s 0.5s;
    }

    .left-nav {
        position: sticky;
        inset-block-start: 0;
        padding: var(--space-l);
    }

        .left-nav summary {
            white-space: nowrap;
        }

        .left-nav h1 {
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--gray-500);
            white-space: nowrap;
        }

        .left-nav ul {
            list-style: none;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }

            .left-nav ul > * {
                flex-grow: 1;
                flex-basis: calc(( 30rem - 100%) * 999);
            }

            .left-nav ul > :nth-last-child(n+ 5),
            .left-nav ul > :nth-last-child(n+ 5) ~ * {
                flex-basis: 100%;
            }


        .left-nav .selected a {
        }


        .left-nav a {
            white-space: nowrap;
            text-decoration-line: none;
            color: var(--text-default);
        }

            .left-nav a > * {
                margin: 0.5rem;
                display: flex;
                padding: 0.5rem 1rem;
                border-radius: 0.5rem;
                transition: background-color linear 0.1s;
            }

            .left-nav a:hover {
                text-decoration-line: underline;
            }

            .left-nav a:hover > * {
                background-color: var(--gray-50);
            }


        .left-nav svg {
            display: block;
            font-size: 0.75rem;
            margin-inline-start: -0.875rem;
            margin-block: 0.25rem;
        }
    /* EXAMPLE OF CHANGING SIDEBARS USING CONTAINER QUERIES
    dashboard-bar {
        display: block;
        contain: content;
        container-type: inline-size;
        contain-intrinsic-inline-size: 6rem;
        background-color: lightyellow;
    }

    @container (min-width: 20rem) {
        dashboard-bar nav {
            background-color: rebeccapurple;
        }
    }
    */
}

/*
    Components
    ==============================================================
*/
@layer component {
    /* Icons */

    /* 
        Our hand-rolled icons are sized based on this
        https://every-layout.dev/layouts/icon/
    */
    svg.icon{
        display: inline-block;
        height: 0.875em;
        height: 1cap;
    }
        /*
            ...but we're mostly grabbing icons from Google Fonts
            which have a different sizing regime that expects a
            vertical offset (and Font Awesome)
        */
        svg.icon.fa,
        svg.icon.google {
            height: 1em;
            width: 1em;
            vertical-align: -0.16em;
        }

    /*
        Buttons
        https://moderncss.dev/css-button-styling-guide/
    */

    button.link-button {
        color: var(--link-default);
        text-decoration: underline;
        text-decoration-thickness: max(1px, .0625rem);
        text-underline-offset: .125em;
    }

    button.link-button {
        background: transparent;
        cursor: pointer;
        border: none;
        padding: 0;
    }

        button.link-button:hover,
        button.link-button:focus {
            text-decoration-thickness: max(2px, .125rem, .125em);
            text-decoration-skip-ink: none;
        }

    a.button {
        text-decoration: none;
    }

    button.button {
        cursor: pointer;

        @media screen and (-ms-high-contrast: active) {
            border: 2px solid currentcolor;
        }
    }

    .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: var(--button-background-color);
        border-width: max(1px, 0.0875em);
        border-style: solid;
        border-color: var(--button-border-color);
        border-radius: 9em;
        font-weight: var(--font-weight-normal);
        color: var(--button-text-color);
        padding: 0.5em 0.75em;
        text-align: center;
        line-height: 1.1;
        transition: 0.1s all ease-in-out;
    }

        .button.primary {
            background-color: var(--button-primary-background-color);
            border-color: var(--button-primary-border-color);
            color: var(--button-primary-text-color);
        }
            .button.primary:hover {
                background-color: var(--button-primary-background-color-hover);
            }
            .button.primary:active {
                background-color: var(--button-primary-background-color-active);
            }

    .button.bb {
        background-color: transparent;
        border-color: transparent;
    }

        .button.with-icon {
            padding: 0;
            width: 2em;
            height: 2em;
        }

    a.button:hover,
    button.button:hover {
        background-color: var(--button-background-color-hover);
    }

    a.button:active,
    button.button:active {
        background-color: var(--button-background-color-active);
    }

    /* down arrow expander for buttons */
    .expand {
        display: flex;
        align-items: center;
        gap: 0.5em;
    }

        .expand::after {
            content: "";
            display: block;
            border: 0.325em solid transparent;
            border-block-start: 0.5em solid currentColor;
            margin-block-start: 0.325em;
        }

    .breadcrumbs {
        --gap: var(--space-small);
        font-size: var(--font-size-small);
        align-items: center;
    }

        .breadcrumbs li {
            display: flex;
            align-items: center;
        }

            .breadcrumbs li:not(:last-child)::after {
                content: "›";
                margin-inline-start: var(--gap);
            }


    .info-header {
        border-radius: var(--space-x-small);
        border: 1px solid var(--border-color);
        background-color: var(--info-background-color);
        padding: var(--space-small);
        font-size: var(--font-size-small);
    }

    .filter-pill {
        background-color: var(--pill-background-color);
        border-radius: 2em;
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: var(--space-xx-small);
        font-size: var(--font-size-small);
        padding: var(--space-xx-small) var(--space-xx-small) var(--space-xx-small) var(--space-x-small);
        border: 2px solid var(--pill-border-color);
    }
    
    .podtrac-logo {
        color: var(--brand-logo-color);
        flex-shrink: 0;
    }

    .podtrac-logo svg {
        height: 3em;
        width: auto;
        flex-shrink: 0;
    }

    .sticky-header {
        position: sticky;
        background-color: var(--background-color);
        top: var(--space-normal);
        box-shadow: 0 calc(-1 * var(--space-normal)) 0 var(--background-color), 0 var(--space-normal) 0 var(--background-color);
    }

    .table {
        border-collapse: collapse;
        border-spacing: 0;
        min-width: 100%;
    }

    .table thead {
        background-color: var(--table-header-background-color);
    }
        .table th,
        .table td {
            border: 1px solid var(--border-color);
            padding: var(--space-small) var(--space-normal);
            font-feature-settings: "tnum";
            line-height: 1.1;
        }

        .table th {
            font-size: var(--font-size-x-small);
            font-weight: var(--font-weight-semibold);
        }

    .table th:has(.elide),
    .table td:has(.elide) {
        /*why width/max-width works here: https://weblog.west-wind.com/posts/2023/Jan/26/HTML-Table-Cell-Overflow-Handling */
        /*max-width: 100px;*/ /*arbitrary*/
    }

        .table tr.total {
            background-color: var(--background-color-hover);
            font-weight: var(--font-weight-semibold);
        }

    .table td {
        min-height: 3rem;
    }

    .skeleton {
        height: 0.875em;
        animation: skeleton-loading 0.5s linear infinite alternate;
        border-radius: 1em;
    }

    @keyframes skeleton-loading {
        0% {
            background-color: var(--skeleton-background-color);
        }

        100% {
            background-color: var(--skeleton-alternating-background-color);
        }
    }


    /* Tabs */
    .tabs {
        display: flex;
        align-items: stretch;
        gap: var(--space-x-small);
        /*border-block-end: 1px solid var(--border-color);*/
    }

        .tabs > li > :is(a, button) {
            display: block;
            text-decoration: none;
            padding: var(--space-small) var(--space-normal);
            white-space: nowrap;
            font-size: var(--font-size-x-small);
            border: 1px solid var(--border-color);
            border-block-end: 1px solid var(--background-color);
            opacity: 0.7;
            border-radius: var(--space-x-small) var(--space-x-small) 0 0;
            background-color: var(--background-color);
            cursor: pointer;
            position: relative;
            line-height: 1;
        }
        .tabs > li > :is(a, button).active {
            opacity: 1;
            font-weight: var(--font-weight-semibold);
        }
        .tabs > li > :is(a, button).active::after {
            content: "";
            position: absolute;
            inset: -3px 0;
            border-block-end: 3px solid var(--background-color);
        }

    .validation-message {
        color: var(--text-invalid-color);
        font-size: var(--font-size-small);
    }

    /* stuff for forms in campaigns React code*/
    .form, section.settings form {
        /* * { border: 1px solid pink; } */
        display: grid;
        gap: 0 2rem;
        grid-template-columns: min-content 1fr;
        align-items: center;
    }

        .form.no-top-margin, section.settings form.no-top-margin {
            margin-top: 0;
        }

        .form > label, section.settings form > label {
            font-weight: 600;
            color: #666;
            white-space: nowrap;
        }

        .form > div, section.settings form > div {
            /*background: yellow;*/
            padding: 1.25rem 0;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

            .form > div > div, section.settings form > div > div {
                /*background: orange;*/
                display: flex;
                align-items: center;
                gap: 0.5rem;
                position: relative;
                /** { background: cyan; }*/
            }

                .form > div > div input[type=checkbox] + label, section.settings form > div > div input[type=checkbox] + label {
                    margin-left: -0.375rem;
                }

        .form select, section.settings form select, .form option, section.settings form option, .form input, section.settings form input {
            padding: 0.25em;
        }

        .form input, section.settings form input, .form select, section.settings form select {
            border: 2px solid #ddd;
            width: 12rem;
        }

            .form input.error, section.settings form input.error, .form select.error, section.settings form select.error {
                border-color: #c00;
                font-size: inherit;
                color: inherit;
            }

            .form input[type=number], section.settings form input[type=number] {
                text-align: right;
            }

            .form input[type=radio], section.settings form input[type=radio], .form input[type=checkbox], section.settings form input[type=checkbox] {
                border: initial;
                width: auto;
            }

        .form label:has(input[type=radio], input[type=checkbox]), section.settings form label:has(input[type=radio], input[type=checkbox]) {
            display: flex;
            align-items: center;
        }

        .form .error, section.settings form .error {
            color: #c00;
        }

        .form .help, section.settings form .help {
            color: #666;
        }

        .form em.error, section.settings form em.error, .form em.help, section.settings form em.help {
            font-style: normal;
            font-size: 0.75rem;
            height: 1rem;
            margin-bottom: -1rem;
        }

        .form .hanging, section.settings form .hanging {
            position: absolute;
            padding-right: 0.25rem;
            transform: translateX(-100%);
        }

    section.settings {
        border-bottom: 0.0625rem solid #eee;
    }

        section.settings:last-of-type {
            border-bottom: none;
        }

        .form.settings, section.settings form.settings {
            grid-template-columns: 17ch 1fr;
        }

}
    /*:root {
    color: var(--text-default);
    accent-color: var(--brand-500);
    background-color: var(--background-default);
}*/

    /*#logo {
    color: var(--brand-logo);
    font-size: x-large;
}*/

    /* https://every-layout.dev/layouts/center/ */
    /* intrinsic size is possible also */
    /*.center {
    --measure: 60ch;
    box-sizing: content-box;
    margin-inline: auto;
    max-inline-size: var(--measure);
}*/
    /* JUNK */

    /* https://design-system.service.gov.uk/styles/ */
    /*a,
button.link-button {
    color: var(--link-default);
    text-decoration: underline;
    text-decoration-thickness: max(1px, .0625rem);
    text-underline-offset: .125em;
}
button.link-button {
    background: transparent;
    cursor: pointer;
    border: none;
    padding: 0;
}
    a:hover,
    button.link-button:hover,
    a:focus,
    button.link-button:focus {
        text-decoration-thickness: max(2px, .125rem, .125em);
        text-decoration-skip-ink: none;
    }*/

    /*h1 { font-size: 2rem; font-weight: 400; }
p { }
b { font-weight: 600; }*/





    /* button */
    /* TODO: tokens for font, spacing, etc. */
    /*.button {
    border-width: max(2px, 0.0875em);
    border-style: solid;
    border-color: var(--border-default);
    background-color: var(--fill-default);
    border-radius: 999rem;
    display: inline-block;
    color: var(--text-default);
    font-weight: 500;
    padding: 0.25em 0.75em;
    cursor: pointer;
    transition: background-color 0.1s;
    text-decoration: none;
}
    .button:hover {
        background-color: var(--fill-default-hover);
    }
    .button:active {
        background-color: var(--fill-default-active);
    }

    .button.primary {
        background-color: var(--fill-primary);
        border-color: var(--border-primary);
        color: var(--text-on-primary);
    }
        .button.primary:hover {
            background-color: var(--fill-primary-hover);
        }
        .button.primary:active {
            background-color: var(--fill-primary-active);
        }

    .button.accent {
        background-color: var(--fill-accent);
        border-color: var(--border-accent);
        color: var(--text-on-accent);
    }

        .button.accent:hover {
            background-color: var(--fill-accent-hover);
        }

        .button.accent:active {
            background-color: var(--fill-accent-active);
        }


.bb {
    background-color: transparent;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 500;
    padding-inline: 0;
    padding-block: 0;
    position: relative;
    display: inline-block;
    color: inherit;
    margin-inline: calc(max(2px, 0.0875em) + 0.75em);
}

    .bb::before {
        content: "";
        position: absolute;
        top: calc(-1 * (max(2px, 0.0875em) + 0.25em));
        bottom: calc(-1 * (max(2px, 0.0875em) + 0.25em));
        right: calc(-1 * (max(2px, 0.0875em) + 0.75em));
        left: calc(-1 * (max(2px, 0.0875em) + 0.75em));
        background-color: var(--gray-50);
        border-radius: 999px;
        z-index: -1;
        transform: scale(0);
        opacity: 0;
        transition-duration: .1s;
        transition-property: transform, opacity;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }

    .bb:hover::before {
        opacity: 1;
        transform: scale(1);
    }

    .bb:active::before {
        background-color: var(--gray-100);
    }

    .bb.icon {
        padding: 0;
        width: 1.5em;
        height: 1.5em;
        text-align: center;
        margin-inline: calc(max(2px, 0.0875em) + 0.25em);
    }

        .bb.icon::before {
            right: calc(-1 * (max(2px, 0.0875em) + 0.25em));
            left: calc(-1 * (max(2px, 0.0875em) + 0.25em));
        }*/



    /*@layer bar {
    thead {
        background-color: floralwhite;
    }
}*/

   /*    @layer foo {
         .table {
        border-collapse: separate;
        border-spacing: 0;
        font-feature-settings: "tnum";
        width: 100%;
    }

        .table thead {
            background-color: var(--fill-default);
        }

        .table td,
        .table th {
            border-bottom: 1px solid var(--gray-200);
            padding: 0.3875rem 0.5rem;
        }

        .table th {
        }

        .table thead th {
            font-weight: 500;
            color: var(--text-default-subtle);
            font-size: 0.75em;
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
            white-space: nowrap;
        }

        .table tbody th {
            font-weight: 500;
        }

        .table tbody tr {
            transition: background-color 0.1s;
        }
            .table tr[hx-on-click]:hover, 
            .table tr[hx-get]:hover {
                background-color: var(--background-default-hover);
                cursor: pointer;
            }


    scroll-table:defined .table thead {
        position: sticky;
        top: 0;
        z-index: 2;
    }

    [data-type=Total] {
        font-weight: 600;
        background-color: var(--gray-25);
    }

        [data-type=Total] th {
            font-weight: 600;
        }

    [data-type=Group] {
        background-color: var(--gray-50);
    }

        [data-type=Group] td {
            font-weight: 500;
        }*/


        /*    .text-align\:left {
        text-align: left;
    }
    .text-align\:center {
        text-align: center;
    }
    .text-align\:right {
        text-align: right;
    }

    .small {
        font-size: small;
    }

    .smaller {
        font-size: smaller;
    }*/
    }

    /* PUT THIS SOMEWHERE */
    /*
scroll-table,
line-chart {
    display: block;
}



*/