:root {
    --bg          : #eef1f4;
    --surface     : #ffffff;
    --label       : #dbe1e8;
    --line        : #cfd6dd;
    --text        : #2f3438;
    --muted       : #6b7379;
    --placeholder : #dde2e8;
    --shimmer     : #f0f4f8;
    --theme-icon  : url("moon.svg");
}

/* The dark palette is declared twice: for the system preference and for an explicit toggle choice */
@media (prefers-color-scheme : dark) {
    :root:not([data-theme="light"]) {
        --bg          : #2b2f34;
        --surface     : #363b41;
        --label       : #22262a;
        --line        : #4c535b;
        --text        : #d6dbe0;
        --muted       : #99a1a9;
        --placeholder : #454b53;
        --shimmer     : #59616a;
        --theme-icon  : url("sun.svg");
    }
}

:root[data-theme="dark"] {
    --bg          : #2b2f34;
    --surface     : #363b41;
    --label       : #22262a;
    --line        : #4c535b;
    --text        : #d6dbe0;
    --muted       : #99a1a9;
    --placeholder : #454b53;
    --shimmer     : #59616a;
    --theme-icon  : url("sun.svg");
}

h1, h2, h3 {
    text-align  : center;
    margin      : 0.3em;
    font-weight : 600;
    color       : var(--text);
}

h2 {
    font-size : 1.35em;
}

h3 {
    font-size : 1.05em;
    color     : var(--muted);
}

/* Column layout so the footer is pushed to the bottom of short pages */
body {
    display          : flex;
    flex-direction   : column;
    min-height       : 100vh;
    margin           : 0;
    font-family      : sans-serif;
    background-color : var(--bg);
    color            : var(--text);
}

header {
    position         : relative;
    background       : var(--surface);
    border-block-end : 1px solid var(--line);
    padding-block    : 0.9em;
}

.theme-toggle {
    position         : absolute;
    inset-inline-end : 1.2em;
    top              : 50%;
    transform        : translateY(-50%);
    display          : flex;
    align-items      : center;
    justify-content  : center;
    width            : 2.2em;
    height           : 2.2em;
    background       : var(--label);
    color            : var(--muted);
    border           : 1px solid var(--line);
    border-radius    : 6px;
    padding          : 0;
    cursor           : pointer;
}

.theme-toggle:hover {
    border-color : var(--muted);
    color        : var(--text);
}

/* The icon for the theme the button switches to, masked so it follows the button color */
.theme-toggle::before {
    content          : '';
    width            : 1.1em;
    height           : 1.1em;
    background-color : currentColor;
    -webkit-mask     : var(--theme-icon) center / contain no-repeat;
    mask             : var(--theme-icon) center / contain no-repeat;
}

header h1 {
    margin         : 0;
    font-size      : 1.5em;
    letter-spacing : 0.02em;
}

main {
    flex          : 1 0 auto;
    padding-block : 1.5em;
}

footer {
    flex-shrink        : 0;
    background         : var(--surface);
    border-block-start : 1px solid var(--line);
    color              : var(--muted);
    text-align         : center;
    padding            : 1.2em;
    font-size          : 0.85em;
    letter-spacing     : 0.02em;
}

.branch {
    margin-inline-start   : auto;
    margin-inline-end     : auto;
    width                 : 1400px;
    display               : grid;
    grid-template-columns : 1fr 1fr;
    grid-template-rows    : 1fr;
    gap                   : 10px;
    margin-bottom         : 2em;
}

/* Public page: sections always stacked, one table above the other */
.sections {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    gap            : 1em;
}

.branch.single {
    grid-template-columns : 1fr;
    width                 : auto;
}

/* Separate borders, so the outer corners can be rounded and clipped */
.table {
    background          : var(--surface);
    display             : table;
    border-collapse     : separate;
    border-spacing      : 0;
    border              : 1px solid var(--line);
    border-radius       : 8px;
    overflow            : hidden;
    margin-inline-start : auto;
    margin-inline-end   : auto;
}

.row {
    display : table-row;
}

.cell {
    display           : table-cell;
    border-inline-end : 1px solid var(--line);
    border-block-end  : 1px solid var(--line);
    padding           : 8px;
    text-align        : center;
    width             : 120px;
    height            : 40px;
    vertical-align    : middle;
}

.cell:last-child {
    border-inline-end : none;
}

.row:last-child .cell {
    border-block-end : none;
}

/* Header rows and the product column read as labels rather than data */
.row.head .cell,
.cell:first-child {
    background : var(--label);
}

/* The public page badge is a single short label, so its cells shrink to it */
.branch.single .cell {
    width   : 70px;
    height  : auto;
    padding : 6px;
}

.cell img {
    vertical-align : middle;
}

/* Skeleton box. Sized in CSS, not img attributes, so a failed badge cannot grow the cell */
.badge {
    display       : block;
    margin        : 0 auto;
    width         : 120px;
    height        : 40px;
    border-radius : 4px;
    overflow      : hidden;
    background    : linear-gradient(115deg, var(--placeholder) 35%, var(--shimmer) 50%, var(--placeholder) 65%) 0 0 / 300% 100%;
    animation     : badge-loading 2.4s linear infinite;
}

.branch.single .badge {
    width  : 70px;
    height : 22px;
}

/* Retire the skeleton once its badge is on screen, so no animation is left running */
.badge:has(.loaded) {
    background : none;
    animation  : none;
}

.badge-img {
    display    : block;
    width      : 100%;
    height     : 100%;
    opacity    : 0;
    transition : opacity 0.25s ease;
}

.badge-img.loaded {
    opacity : 1;
}

@keyframes badge-loading {
    from {
        background-position : 150% 0;
    }

    to {
        background-position : -50% 0;
    }
}

a {
    color           : var(--text);
    text-decoration : none;
}

a:hover {
    text-decoration : underline;
}