:root {
    --space-xs: 0.25em;
    --space-sm: 0.5em;
    --space-md: 1em;
    --space-lg: 2em;

    --border: #d8dde0; /* did i take this from the nhs design system? yes */

    --black: #212b32;
    --grey-1: #4c6272;
    --grey-2: #768692;
    --grey-3: #aeb7bd;
    --grey-4: #d8dde0;
    --grey-5: #f0f4f5;
    --white: #ffffff;
    --yellow: #fbb400;
    --green: #007f3b;

    --bg: var(--grey-5);
    --font-size: 14px;
}

*, *::after, *::before { box-sizing: border-box; }

a:focus, a:active,
.button:focus, .button:active {
    background-color: var(--yellow);
    color: var(--black);
}
:is(.input, .select select):focus {
    outline: 4px solid var(--yellow);
}

body {
    background-color: var(--bg);
    font-family: system-ui;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    font-size: var(--font-size);
}

table { width: 100%; }

th, td { text-align: left; }
.numeric { text-align: right; font-variant-numeric: tabular-nums; }

h1, h2, h3, h4, h5, h6, p, ul, li { margin-block: 0; }
[role="list"] { list-style: none; padding: 0; margin: 0; }
a { color: inherit; }

.stack > * + * { margin-block-start: 1em; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }

.hidden { display: none; }

.navigation {
    background-color: var(--black);
    color: var(--white);
    padding-block: 1em;
}

.flex { display: flex; align-items: center; }
.flex-1 { flex: 1; }

.nav { display: flex; align-items: center; gap: 1em; }

.container {
    max-width: 900px;
    padding-inline: 1vw;
    margin-inline: auto;
}

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

.bold { font-weight: 700; }

.table-section-heading :is(td, th) {
    padding-top: var(--space-sm);
    border-bottom: 1px solid var(--border);
}

a:has(.clothes-name) { text-decoration: none; }
.clothes-name { display: flex; align-items: center; gap: 0.5em; }
.clothes-name-name { font-weight: 700; }
a:has(.clothes-name) .clothes-name-name { text-decoration: underline; }


.clothes-icon {
    position: relative;
    display: inline-block;
    border: 4px solid;
    height: 22px;
    width: 22px;
    border-radius: 100px;
    box-sizing: border-box;
    box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
    vertical-align: middle;
}

.breadcrumbs {
    padding-block: var(--space-md);
    border-bottom: 1px solid var(--grey-3);
    background-color: var(--grey-4);
}

.breadcrumbs ol {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

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

.breadcrumbs ol > li:not(:last-child)::after {
    display: inline-block;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23768692' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 100%;
    background-position: 0 1px;
    height: calc(0.85 * var(--font-size));
    width: calc(0.85 * var(--font-size));
    content: "";
    color: var(--grey-2);
    margin-inline-start: 0.5em;
}

.button,
.input,
.select select {
    padding: 6px 10px 7px;
    border: 1px solid var(--grey-4);
    font-size: var(--font-size);
    border-radius: 4px;
    appearance: none;
}

.input, .select select { width: 100%; }

.select { position: relative; display: inline-block; }
.select::after {
    display: block;
    content: "";
    position: absolute;
    right: 13px;
    top: 10px;
    height: 8px;
    width: 8px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}

.button {
    background-color: var(--black);
    color: var(--white);
    text-decoration: none;
    border: 1px solid transparent;
    font-size: calc(0.9 * var(--font-size));
}

.button-success { background-color: var(--green); }

.button + .select select { font-size: calc(0.9 * var(--font-size)); }

.form { max-width: 600px; }

.control {
    label { display: block; }
    .input, .select { display: block; }

    label + :is(.input, .select) {
        margin-top: var(--space-xs);
    }
}