:root {
    --cl-black: #000;
    --cl-white: #fff;
    --cl-blush: #b3407b;
    --cl-orange: #ffa500ff;
    --cl-darkorange: #ed9a00;
    --cl-gray: hsl(from #8c92ac h s 50%);

    --cl-tableau10-blue: #4e79a7;
    --cl-tableau10-orange: #f28e2c;
    --cl-tableau10-red: #e15759;
    --cl-tableau10-cyan: #76b7b2;
    --cl-tableau10-green: #59a14f;
    --cl-tableau10-yellow: #edc949;
    --cl-tableau10-purple: #af7aa1;
    --cl-tableau10-pink: #ff9da7;
    --cl-tableau10-brown: #9c755f;
    --cl-tableau10-gray: #bab0ab;


    --cl-gray-100: color-mix(in oklch, var(--cl-gray), #000 calc((1 - pow(0.2, 2.0)) * 100%));
    --cl-gray-200: color-mix(in oklch, var(--cl-gray), #000 calc((1 - pow(0.4, 2.0)) * 100%));
    --cl-gray-300: color-mix(in oklch, var(--cl-gray), #000 calc((1 - pow(0.6, 2.0)) * 100%));
    --cl-gray-400: color-mix(in oklch, var(--cl-gray), #000 calc((1 - pow(0.8, 2.0)) * 100%));
    --cl-gray-500: var(--cl-gray);
    --cl-gray-600: color-mix(in oklch, var(--cl-gray), #fff calc((1 - pow(0.8, 2.0)) * 100%));
    --cl-gray-700: color-mix(in oklch, var(--cl-gray), #fff calc((1 - pow(0.6, 2.0)) * 100%));
    --cl-gray-800: color-mix(in oklch, var(--cl-gray), #fff calc((1 - pow(0.4, 2.0)) * 100%));
    --cl-gray-900: color-mix(in oklch, var(--cl-gray), #fff calc((1 - pow(0.2, 2.0)) * 100%));

    --cl-accent: var(--cl-blush);
    --cl-success: var(--cl-tableau10-green);
    --cl-danger: var(--cl-tableau10-red);
    --cl-info: var(--cl-tableau10-blue);
    --cl-warning: var(--cl-tableau10-orange);

    --ff-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --fs-xs: 0.714rem;
    --fs-sm: 0.857rem;
    --fs-lg: 1.14rem;
    --fs-xl: 1.28rem;
    --fs-xxl: 1.5714rem;
    --fw-medium: 500;
    --fw-bold: 600;
    --fw-black: 700;

    --shadow-sm: 0 0.5rem 1rem hsl(from var(--cl-black) h s l / 20%);
    --shadow-lg: 0 1rem 2rem 0 hsl(from var(--cl-black) h s l / 10%), 0 0 .5rem 0 hsl(from var(--cl-black) h s l / 10%);

    --radius-lg: 3rem;
    --radius-md: 1.5rem;
    --radius-sm: 0.66rem;
    --radius-xs: 0.33rem;
}

html {
    color-scheme: light dark;

    margin: 0;

    background: light-dark(var(--cl-gray-900), var(--cl-gray-200));
    color: light-dark(var(--cl-gray-300), var(--cl-gray-800));
    accent-color: var(--cl-accent);

    font-family: var(--ff-sans);
    font-size: 14px;
    font-variant-numeric: tabular-nums;

    &[data-theme="light"] {
        color-scheme: only light;
    }

    &[data-theme="dark"] {
        color-scheme: dark;
    }
}

html, body, .layout {
    min-height: 100vh;
}

@view-transition {
    navigation: auto;
}

*:focus-visible {
    outline: 2px solid var(--cl-accent);
    outline-offset: 2px;
}

/* region Naked tags */
a {
    color: inherit;
    text-decoration: inherit;
}

input, select, textarea {
    padding: .5rem;
    border: 1px solid var(--cl-gray-800);
    border-radius: var(--radius-xs);
}
input[type="number"][size] {
    width: 5ch;
    width: calc(attr(size type(<number>)) * 1.2ch + 2em); /* adjust size for spinner */
}
/* endregion */


/* region Utilities */
.no-cap {
    text-box: trim-both cap alphabetic;
}

.nowrap {
    white-space: nowrap;
}

.fw-bold {
    font-weight: var(--fw-bold);
}
.fw-black {
    font-weight: var(--fw-black);
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.text-end {
    text-align: end
}
.text-start {
    text-align: start
}
.text-sm {
    font-size: small;
}
/* endregion */

/*
    Blocks
*/

/* region Aside */
.aside {
    height: 100dvh;
    width: 20rem;

    overflow-y: auto;
    color-scheme: dark;

    display: grid;
    grid-template-rows: auto 1fr auto;
    background: var(--cl-black);
    color: var(--cl-white);

    position: fixed;

    /* background: radial-gradient(circle at 20% 30%, rgba(88, 28, 135, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(6, 182, 212, 0.25) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(109, 40, 217, 0.2) 0%, transparent 60%),
        radial-gradient(circle at 10% 80%, rgba(34, 211, 238, 0.15) 0%, transparent 40%),
        linear-gradient(180deg, #0f0a1e 0%, #1a1333 100%); */
}

/* endregion */


/* region Badge */
.badge {
    --badge-color: deeppink;
    background: hsl(from var(--badge-color) h s l / 30%);
    padding: 0 0.5rem;
    white-space: nowrap;
    border-radius: 9999px;
    font-size: var(--fs-sm);
}

/* endregion */


/* region Branding */
.branding {
    display: grid;
    justify-items: right;
    padding: 2rem;
    gap: 1rem;
}

.branding__logo {
    width: 120px;
    height: auto;
}

.branding__website {
    font-weight: 600;
}

/* endregion */


/* region Layout */
.layout {
    display: grid;
    height: 100%;
    grid-template-columns: 20rem 1fr;
}

.layout__body {
    position: relative;
    container-type: inline-size;
}

/* endregion */


/* region Menu */
.menu {
    color: var(--cl-gray-700);

    a:hover,
    a:focus-visible {
        color: var(--cl-white);
    }
}

.menu__item {
    display: block;
    padding: 1rem 2rem;
}

.menu__item--active {
    background: hsl(from currentColor h s l / 20%);
}

.menu__subtitle {
    font-weight: bolder;
    text-transform: uppercase;
    font-size: var(--fs-xs);
    padding: 0.5rem 2rem;
    margin-top: 2rem;
}

/* endregion */


/* region Profile */
.profile {
    display: grid;
    grid-template:
        "a b b" auto
        "_ c d" auto
        / 2.5rem 1fr max-content;
    padding: 1rem;
    gap: 0.5rem;
}

.profile__avatar {
    grid-area: a;
}

.profile__identity {
    grid-area: b;
    align-content: center;
}

.profile__name {
    font-weight: 500;
}

.profile__email {
    font-size: smaller;
    opacity: 50%;
}

.profile__role {
    grid-area: c;
    font-size: smaller;
}

.profile__exit {
    grid-area: d;
    font-size: smaller;
}

/* endregion */


/* region Table */
table {
    min-width: 100%;
    border-collapse: collapse;

    td,
    th {
        padding: 0.5rem 1.5rem;
    }

    tr:not(:last-child) {
        border-bottom: 1px solid hsl(from currentColor h s l / 5%);
    }

    th {
        position: relative;
        padding-block: 0.25rem;
        text-align: initial;
        font-weight: 600;
        text-transform: uppercase;
        font-size: var(--fs-xs);
        background: hsl(from currentColor h s l / 10%);

        &[aria-sort="ascending"] > a::after {
            content: '↓';
        }
        &[aria-sort="descending"] > a::after {
            content: '↑';
        }
        > a {
            display: block; /* fills up space */
            &::after {
                margin-inline-start: .25rem;
            }
        }
    }

    tfoot {
        border-top: 2px solid hsl(from currentColor h s l / 10%);
    }

    .cell-num, .cell-date {
        text-align: end;
    }

    .cell-min, .cell-actions, .cell-author {
        width: 0.1%;
        white-space: nowrap;
    }
}

/* endregion */


/*









 */


.actions {
    display: flex;
    gap: 0.75rem;
    flex-flow: row-reverse wrap;
    align-items: baseline;
}

.btn {
    --btn-bg: light-dark(var(--cl-black), var(--cl-white));
    --btn-cl: light-dark(var(--cl-white), var(--cl-black));

    display: inline-block;
    background: var(--btn-bg);
    color: var(--btn-cl);
    border-radius: var(--radius-xs);
    border: none;
    cursor: pointer;
    padding: round(0.75rem, 1px) round(1.25rem, 1px);
    text-box: trim-both cap alphabetic;
}

.btn.btn--link {
    background: none;
    color: inherit;
}


/*








 */

.bento {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(12, 1fr);

    container-type: inline-size;
    container-name: bento;

    > * {
        grid-column: span 12;
        container-type: inline-size;
        @container bento (width <= 70ch) {
            grid-column: span 12 !important;
        }
    }
}

.col-1 {
    grid-column: span 1;
}

.col-2 {
    grid-column: span 2;
}

.col-3 {
    grid-column: span 3;
}

.col-4 {
    grid-column: span 4;
}

.col-5 {
    grid-column: span 5;
}

.col-6 {
    grid-column: span 6;
}

.col-7 {
    grid-column: span 7;
}

.col-8 {
    grid-column: span 8;
}

.col-9 {
    grid-column: span 9;
}

.col-10 {
    grid-column: span 10;
}

.col-11 {
    grid-column: span 11;
}

.col-12 {
    grid-column: span 12;
}


/*









*/

.f__row {
    margin-bottom: 1rem;

    display: grid;
    gap: .25rem;
}

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

.f__errors {
    color: var(--cl-warning);
    font-size: var(--fs-sm);
    padding: 0;

    li {
        list-style: none;
    }
}

.f__control {
    /*border: 2px solid #dc143c;*/
}

.f__help {
    opacity: 66%;
    font-size: var(--fs-sm);
}