/* GIC.css Version 1.5.0
 * (c) Copyright Ariadne (me@aria.rip) 2026.
 * Made available under the MIT license */
:root {
    --font-variable: "Inter", sans-serif;
    --font-weight-normal: 400;
    --font-weight-bold: 700;

    /* Colour palette */
    --blue: #1d70b8;
    --blue-tint-25: #5694ca;
    --blue-tint-50: #8eb8dc;
    --blue-tint-80: #d2e2f1;
    --blue-tint-95: #f4f8fb;
    --blue-shade-25: #16548a;
    --blue-shade-50: #0f385c;
    --blue-shade-10: #1a65a6;;
    --blue-shade-95: #030B12;
    --green: #0f7a52;
    --green-tint-25: #4b9b7d;
    --green-tint-50: #87bca8;
    --green-tint-80: #cfe4dc;
    --green-tint-95: #f3f8f6;
    --green-shade-25: #0b5c3e;
    --green-shade-50: #083d29;
    --teal: #158187;
    --teal-tint-25: #50a1a5;
    --teal-tint-50: #8ac0c3;
    --teal-tint-80: #d0e6e7;
    --teal-tint-95: #f3f9f9;
    --teal-shade-25: #106165;
    --teal-shade-50: #0b4144;
    --teal-accent: #00ffe0;
    --purple: #54319f;
    --purple-tint-25: #7f65b7;
    --purple-tint-50: #aa98cf;
    --purple-tint-80: #ddd6ec;
    --purple-tint-95: #f6f5fa;
    --purple-shade-25: #3f2577;
    --purple-shade-50: #2a1950;
    --magenta: #ca357c;
    --magenta-tint-25: #d7689d;
    --magenta-tint-50: #e59abe;
    --magenta-tint-80: #f4d7e5;
    --magenta-tint-95: #fcf5f8;
    --magenta-shade-25: #98285d;
    --magenta-shade-50: #651b3e;
    --red: #ca3535;
    --red-tint-25: #d76868;
    --red-tint-50: #e59a9a;
    --red-tint-80: #f4d7d7;
    --red-tint-95: #fcf5f5;
    --red-shade-25: #982828;
    --red-shade-50: #651b1b;
    --orange: #f47738;
    --orange-tint-25: #f7996a;
    --orange-tint-50: #fabb9c;
    --orange-tint-80: #fde4d7;
    --orange-tint-95: #fef8f5;
    --orange-shade-25: #b7592a;
    --orange-shade-50: #7a3c1c;
    --yellow: #ffdd00;
    --yellow-tint-25: #ffe640;
    --yellow-tint-50: #ffee80;
    --yellow-tint-80: #fff8cc;
    --yellow-tint-95: #fffdf2;
    --yellow-shade-25: #bfa600;
    --yellow-shade-50: #806f00;
    --brown: #99704a;
    --brown-tint-25: #b39477;
    --brown-tint-50: #ccb8a5;
    --brown-tint-95: #faf8f6;
    --black: #0b0c0c;
    --black-tint-25: #484949;
    --black-tint-50: #858686;
    --black-tint-80: #cecece;
    --black-tint-95: #f3f3f3;
    --white: #ffffff;

    --colour-brand: var(--blue);
    --colour-brand-text: var(--white);

    --colour-text: var(--black);
    --colour-body-background: var(--white);

    /* Used in for example 'muted' text and help text. */
    --colour-text-secondary: var(--black-tint-25);

    --colour-focus: var(--yellow);
    --colour-focus-text: var(--black);

    --colour-error: var(--red);
    --colour-success: var(--green);

    /* Used in for example borders, separators, rules and keylines. */
    --colour-border: var(--black-tint-80);
    /* Used for form inputs and controls */
    --colour-input-border: var(--black);
    /* Used for hover states on form controls */
    --colour-hover: var(--black-tint-80);
    /* Standard links (on white) */
    --colour-link: var(--blue-shade-10);
    --colour-link-visited: var(--purple);
    --colour-link-hover: var(--blue-shade-50);
    --colour-link-active: var(--black);

    /* 'Surfaces' are our name for components that have different colour */
    /* palettes to typical page content. This is the generic surface. */
    --colour-surface-background: var(--blue-tint-95);
    --colour-surface-text: var(--black);
    --colour-surface-board: var(--blue-tint-50);
    --colour-button-text: var(--white);

    @media (prefers-color-scheme: dark) {
        color-scheme: dark;

        /* Dark theme, from catppuccin mocha */
        --blue: #89b4fa;
        --blue-base: #89b4fa;
        --blue-tint-25: #6787bc;
        --blue-tint-50: #455a7d;
        --blue-tint-80: #1b2432;
        --blue-tint-95: #07090d;
        --blue-shade-10: #95bcfb;
        --blue-shade-25: #a7c7fb;
        --blue-shade-50: #c4dafd;
        --blue-shade-95: #f9fbff;
        --green: #a6e3a1;
        --green-tint-25: #7daa79;
        --green-tint-50: #537251;
        --green-tint-80: #212d20;
        --green-tint-95: #080b08;
        --green-shade-25: #bceab9;
        --green-shade-50: #d3f1d0;
        --teal: #94e2d5;
        --teal-tint-25: #6faaa0;
        --teal-tint-50: #4a716b;
        --teal-tint-80: #1e2d2b;
        --teal-tint-95: #070b0b;
        --teal-shade-25: #afe9e0;
        --teal-shade-50: #caf1ea;
        --purple: #cba6f7;
        --purple-tint-25: #987db9;
        --purple-tint-50: #66537c;
        --purple-tint-80: #292131;
        --purple-tint-95: #0a080c;
        --purple-shade-25: #d8bcf9;
        --purple-shade-50: #e5d3fb;
        --pink: #f5c2e7;
        --pink-tint-25: #b892ad;
        --pink-tint-50: #7b6174;
        --pink-tint-80: #31272e;
        --pink-tint-95: #0c0a0c;
        --pink-shade-25: #f8d1ed;
        --pink-shade-50: #fae1f3;
        --red: #f38ba8;
        --red-tint-25: #b6687e;
        --red-tint-50: #7a4654;
        --red-tint-80: #311c22;
        --red-tint-95: #0c0708;
        --red-shade-25: #f6a8be;
        --red-shade-50: #f9c5d4;
        --orange: #fab387;
        --orange-tint-25: #bc8665;
        --orange-tint-50: #7d5a44;
        --orange-tint-80: #32241b;
        --orange-tint-95: #0d0907;
        --orange-shade-25: #fbc6a5;
        --orange-shade-50: #fdd9c3;
        --yellow: #f9e2af;
        --yellow-tint-25: #bbaa83;
        --yellow-tint-50: #7d7158;
        --yellow-tint-80: #322d23;
        --yellow-tint-95: #0c0b09;
        --yellow-shade-25: #fbe9c3;
        --yellow-shade-50: #fcf1d7;
        --brown: #f2cdcd;
        --brown-tint-25: #b69a9a;
        --brown-tint-50: #796767;
        --brown-tint-95: #0c0a0a;
        --black: #1e1e2e;
        --black-tint-25: #171723;
        --black-tint-50: #0f0f17;
        --black-tint-80: #060609;
        --black-tint-95: #020202;
        --white: #cdd6f4;
        --white-shade-25: #9aa1b7;

        /* Alternative Dark theme, from modus operandi (Vivendi) */
        /* A bit higher contrast for those who like that */
        /* --blue: #2fafff; */
        /* --blue-tint-25: #2383bf; */
        /* --blue-tint-50: #185880; */
        /* --blue-tint-80: #092333; */
        /* --blue-tint-95: #02090d; */
        /* --blue-shade-10: #44b7ff; */
        /* --blue-shade-25: #63c3ff; */
        /* --blue-shade-50: #97d7ff; */
        /* --blue-shade-95: #f5fbff; */
        /* --green: #44bc44; */
        /* --green-tint-25: #338d33; */
        /* --green-tint-50: #225e22; */
        /* --green-tint-80: #0e260e; */
        /* --green-tint-95: #030903; */
        /* --green-shade-25: #73cd73; */
        /* --green-shade-50: #a2dea2; */
        /* --teal: #00d3d0; */
        /* --teal-tint-25: #009e9c; */
        /* --teal-tint-50: #006a68; */
        /* --teal-tint-80: #002a2a; */
        /* --teal-tint-95: #000b0a; */
        /* --teal-shade-25: #40dedc; */
        /* --teal-shade-50: #80e9e8; */
        /* --purple: #9099d9; */
        /* --purple-tint-25: #6c73a3; */
        /* --purple-tint-50: #484d6d; */
        /* --purple-tint-80: #1d1f2b; */
        /* --purple-tint-95: #07080b; */
        /* --purple-shade-25: #acb3e3; */
        /* --purple-shade-50: #c8ccec; */
        /* --pink: #feacd0; */
        /* --pink-tint-25: #bf819c; */
        /* --pink-tint-50: #7f5668; */
        /* --pink-tint-80: #33222a; */
        /* --pink-tint-95: #0d090a; */
        /* --pink-shade-25: #fec1dc; */
        /* --pink-shade-50: #ffd6e8; */
        /* --red: #ff5f59; */
        /* --red-tint-25: #bf4743; */
        /* --red-tint-50: #80302d; */
        /* --red-tint-80: #331312; */
        /* --red-tint-95: #0d0504; */
        /* --red-shade-25: #ff8783; */
        /* --red-shade-50: #ffafac; */
        /* --orange: #db7b5f; */
        /* --orange-tint-25: #a45c47; */
        /* --orange-tint-50: #6e3e30; */
        /* --orange-tint-80: #2c1913; */
        /* --orange-tint-95: #0b0605; */
        /* --orange-shade-25: #e49c87; */
        /* --orange-shade-50: #edbdaf; */
        /* --yellow: #d0bc00; */
        /* --yellow-tint-25: #9c8d00; */
        /* --yellow-tint-50: #685e00; */
        /* --yellow-tint-80: #2a2600; */
        /* --yellow-tint-95: #0a0900; */
        /* --yellow-shade-25: #dccd40; */
        /* --yellow-shade-50: #e8de80; */
        /* --brown: #f2cdcd; */
        /* --brown-tint-25: #b69a9a; */
        /* --brown-tint-50: #796767; */
        /* --brown-tint-95: #0c0a0a; */
        /* --black: #000000; */
        /* --black-tint-25: #404040; */
        /* --black-tint-50: #808080; */
        /* --black-tint-80: #cccccc; */
        /* --black-tint-95: #f2f2f2; */
        /* --white: #ffffff; */
        /* --white-shade-250: #bfbfbf; */

        --colour-text: var(--white);
        --colour-body-background: var(--black);
        --colour-text-secondary: var(--white-shade-25);
        --colour-border: var(--white);
        --colour-input-border: var(--white);
        --colour-focus-text: var(--white);
        --colour-link-active: var(--white);
        --colour-surface-background: var(--blue-tint-80);
        --colour-surface-text: #fff;
        --colour-surface-board: var(--blue-tint-50);
        --colour-button-text: var(--black);
        --colour-brand-text: var(--black);
    }


    --width-input-border: 2px;
    --width-form-group-error: 5px;
    --width-focus: 3px;

    --font-size-80: 53px;
    --line-height-80: 55px;
    --font-size-48: 32px;
    --line-height-48: 35px;
    --font-size-36: 27px;
    --line-height-36: 30px;
    --font-size-27: 21px;
    --line-height-27: 25px;
    --font-size-24: 21px;
    --line-height-24: 25px;
    --font-size-19: 19px;
    --line-height-19: 25px;
    --font-size-16: 16px;
    --line-height-16: 20px;

    --spacing-0: 0;
    --spacing-1: 5px;
    --spacing-2: 10px;
    --spacing-3: 15px;
    --spacing-4: 15px;
    --spacing-5: 15px;
    --spacing-6: 20px;
    --spacing-7: 25px;
    --spacing-8: 30px;
    --spacing-9: 40px;

    @media screen and (min-width: 641px) { /* tablet */
        --font-size-80: 80px;
        --line-height-80: 80px;
        --font-size-48: 48px;
        --line-height-48: 50px;
        --font-size-36: 36px;
        --line-height-36: 40px;
        --font-size-27: 27px;
        --line-height-27: 30px;
        --font-size-24: 24px;
        --line-height-24: 30px;
        --spacing-4: 20px;
        --spacing-5: 25px;
        --spacing-6: 30px;
        --spacing-7: 40px;
        --spacing-8: 50px;
        --spacing-9: 60px;
    }

    @media print {
        --colour-text: #000000;
        --font-size-80: 53pt;
        --line-height-80: 1.1;
        --font-size-48: 32pt;
        --line-height-48: 1.15;
        --font-size-36: 24pt;
        --line-height-36: 1.05;
        --font-size-27: 18pt;
        --line-height-27: 1.15;
        --font-size-24: 18pt;
        --line-height-24: 1.15;
        --font-size-19: 14pt;
        --line-height-19: 1.15;
        --font-size-16: 14pt;
        --line-height-16: 1.2;
    }
}


/* eeeee e    e eeeee eeeee eeeee eeeee  eeeee eeeee e   e e    e  */
/*   8   8    8 8   8 8  88 8   8 8   8  8   8 8   8 8   8 8    8  */
/*   8e  8eeee8 8eee8 8   8 8e    8eee8e 8eee8 8eee8 8eee8 8eeee8  */
/*   88    88   88    8   8 88 "8 88   8 88  8 88    88  8   88    */
/*   88    88   88    8eee8 88ee8 88   8 88  8 88    88  8   88 */
html { background: var(--colour-body-background); }
html:has(footer) { background: var(--colour-surface-background); }

body {
    font-family: var(--font-variable);
    font-weight: var(--font-weight-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    color: var(--colour-text);
    background: var(--colour-body-background);

    margin: 0;

    /* Prevent automatic text sizing, as we already cater for small devices and */
    /* would like the browser to stay on 100% text zoom by default. */
    text-size-adjust: 100%;
}

h1,h2,h3,h4 { font-weight: var(--font-weight-bold); margin-top: 0; }
span.caption { color: var(--colour-text-secondary); display: block; }

p {
    margin-top: 0;
}

/* sizing stuff. */
h1 { font-size: var(--font-size-48); line-height: var(--line-height-48); margin-bottom: var(--spacing-8); }
h2 { font-size: var(--font-size-36); line-height: var(--line-height-36); margin-bottom: var(--spacing-6); }
h3 { font-size: var(--font-size-24); line-height: var(--line-height-24); margin-bottom: var(--spacing-4); }
h4 { font-size: var(--font-size-19); line-height: var(--line-height-19); margin-bottom: var(--spacing-4); }
p { font-size: var(--font-size-19); line-height: var(--line-height-19); margin-bottom: var(--spacing-4); }
p.large { font-size: var(--font-size-24); line-height: var(--line-height-24); margin-bottom: var(--spacing-6); }
p.small { font-size: var(--font-size-16); line-height: var(--line-height-16); margin-bottom: var(--spacing-4); }

span.caption:has(+ h1) { font-size: var(--font-size-27); line-height: var(--line-height-27); margin-bottom: var(--spacing-1); }
span.caption:has(+ h2) { font-size: var(--font-size-24); line-height: var(--line-height-24); margin-bottom: var(--spacing-1); }
span.caption:has(+ h3) { font-size: var(--font-size-19); line-height: var(--line-height-19); }

/* Add top padding to headings that appear directly after paragraphs. */
p.large + h2 { padding-top: var(--spacing-1); }

p + h2,
ul + h2,
ol + h2 { padding-top: var(--spacing-4); }

p + h3,
ul + h3,
ol + h3,
p + h4,
ul + h4,
ol + h4 { padding-top: var(--spacing-1); }

a {
    text-decoration: underline;
    text-decoration-thickness: max(1px, .0625rem);
    text-decoration-offset: 0.1578em;
    color: var(--colour-link);

    &:not(.no-visited):visited {
        color: var(--colour-link-visited);
    }

    &:hover {
        color: var(--colour-link-hover);
        text-decoration-thickness: max(3px, .1875rem, .12em);
        text-decoration-skip-ink: none;
        text-decoration-skip: none;
    }

    &:active {
        color: var(--colour-link-active);
    }

    /* When focussed, the text colour needs to be darker to ensure that colour */
    /* contrast is still acceptable */
    &:focus {
        color: var(--colour-focus-text);
    }

    /* Show URL when printing */
    @media print {
        &[href^="/"],
        &[href^="http://"],
        &[href^="https://"] {
            &::after {
                content: " (" attr(href) ")";
                font-size: 90%;
                word-wrap: break-word;
            }
        }
    }

    &.error {
        &,
        &:visited {
            color: var(--colour-error);
        }

        &:hover {
            color: var(--red-shade-50);
        }

        &:active {
            color: var(--colour-error);
        }

        &:focus {
            color: var(--colour-focus-text);
        }
    }

    &.success {
        &,
        &:visited {
            color: var(--colour-success);
        }

        &:hover {
            color: var(--green-shade-50);
        }

        &:active {
            color: var(--colour-success);
        }

        &:focus {
            color: var(--colour-focus-text);
        }
    }


    &.no-underline:not(:hover):not(:active) {
        text-decoration: none;
    }
}


ul, ol {
    font-size: var(--font-size-19);
    line-spacing: var(--line-spacing-19);

    margin-top: 0;
    margin-bottom: var(--spacing-4);

    color: var(--colour-text);

    padding-left: var(--spacing-4);
    /* list-style-type: disc; */
    &.no-bullet {
        padding-left: 0;
        list-style-type: none;
        > li {
            margin-bottom: var(--spacing-1);
        }
    }

    /* Add a top margin for nested lists */
    ul, ol {
      margin-top: var(--spacing-2);
    }


    /* Lists without numbers or bullets should always have extra space between */
    /* list items. Lists with numbers or bullets only have this extra space on */
    /* tablet and above */
    > li {
        margin-bottom: 0;
        @media screen and (min-width: 641px) { /* tablet */
            margin-bottom: var(--spacing-1);
        }
    }

    &.extra-space > li {
        margin-bottom: var(--spacing-2);
        @media screen and (min-width: 641px) { /* tablet */
            margin-bottom: var(--spacing-3);
        }
    }
}


/* section spacer */
hr { margin: var(--spacing-4) 0; border: 0; }
hr.xl { margin: var(--spacing-8) 0; }
hr.l { margin: var(--spacing-6) 0; }
hr.visible { border-bottom: 1px solid var(--colour-border) }

/* utilities */
.break-word { word-break: break-word; }

/*                   oo       dP           */
/*                            88           */
/* .d8888b. 88d888b. dP .d888b88 .d8888b.  */
/* 88'  `88 88'  `88 88 88'  `88 Y8ooooo.  */
/* 88.  .88 88       88 88.  .88       88  */
/* `8888P88 dP       dP `88888P8 `88888P'  */
/*      .88                                */
/*  d8888P */
main {
    padding: var(--spacing-6) 0;
}

grid-container {
    --size-gutter: 30px;
    --size-gutter-half: calc(var(--size-gutter) / 2);
    --size-page-width: 960px;

    max-width: var(--size-page-width);

    margin-left: var(--size-gutter-half);
    margin-right: var(--size-gutter-half);

    /* On tablet, add full width gutters */
    @media screen and (min-width: 641px) { /* tablet */
        margin-right: var(--size-gutter);
        margin-left: var(--size-gutter);
    }

    /* As soon as the viewport is greater than the width of the page plus the */
    /* gutters, just centre the content instead of adding gutters. */
    @media (min-width: 1020px) {
        margin-right: auto;
        margin-left: auto;
    }

    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: var(--size-gutter);
}


/* By default, column spans only apply past the tablet breakpoint */
.whole-row { grid-column-start: span 12; }
.one-third { grid-column-start: span 12; }
.two-thirds { grid-column-start: span 12; }
.one-half { grid-column-start: span 12; }
.one-quarter { grid-column-start: span 12; }
.two-quarters { grid-column-start: span 12; }
.three-quarters { grid-column-start: span 12; }

/* Force applying the whole time */
.mobile-whole-row { grid-column-start: span 12; }
.mobile-one-third { grid-column-start: span 4; }
.mobile-two-thirds { grid-column-start: span 8; }
.mobile-one-half { grid-column-start: span 6; }
.mobile-one-quarter { grid-column-start: span 3; }
.mobile-two-quarters { grid-column-start: span 6; }
.mobile-three-quarters { grid-column-start: span 9; }

@media screen and (min-width: 641px) { /* tablet */
    .whole-row { grid-column-start: span 12; }
    .one-third { grid-column-start: span 4; }
    .two-thirds { grid-column-start: span 8; }
    .one-half { grid-column-start: span 6; }
    .one-quarter { grid-column-start: span 3; }
    .two-quarters { grid-column-start: span 6; }
    .three-quarters { grid-column-start: span 9; }

    .tablet-whole-row { grid-column-start: span 12; }
    .tablet-one-third { grid-column-start: span 4; }
    .tablet-two-thirds { grid-column-start: span 8; }
    .tablet-one-half { grid-column-start: span 6; }
    .tablet-one-quarter { grid-column-start: span 3; }
    .tablet-two-quarters { grid-column-start: span 6; }
    .tablet-three-quarters { grid-column-start: span 9; }
}

@media screen and (min-width: 769px) { /* desktop */
    .desktop-whole-row { grid-column-start: span 12; }
    .desktop-one-third { grid-column-start: span 4; }
    .desktop-two-thirds { grid-column-start: span 8; }
    .desktop-one-half { grid-column-start: span 6; }
    .desktop-one-quarter { grid-column-start: span 3; }
    .desktop-two-quarters { grid-column-start: span 6; }
    .desktop-three-quarters { grid-column-start: span 9; }
}

/* _  _ ____ ____ ___  ____ ____    ____ ____ ____ ___ ____ ____  */
/* |__| |___ |__| |  \ |___ |__/    |___ |  | |  |  |  |___ |__/  */
/* |  | |___ |  | |__/ |___ |  \    |    |__| |__|  |  |___ |  \  */
/*                                                                */
header.masthead {
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-bold);
    line-height: 1;

    border-bottom: 1px solid transparent;
    color: var(--colour-brand-text);
    background: var(--colour-brand);

    &:has(> a) { padding: 16px; }

    > a {
        display: inline;
        margin-right: var(--spacing-2);
        font-size: var(--font-size-27);
        line-height: var(--line-height-27);
        text-decoration: none;
        color: inherit;

        &:visited { color: inherit; }
    }

    nav {
        display: flex;
        flex-direction: row;
        align-items: center;

        &:has(input:checked) {
            padding-top: var(--spacing-3);
            flex-direction: column;
        }

        ul {
            list-style-type: none;
            align-items: center;
            margin: 0; padding: 0;
            height: 100%;

            /* On mobile layouts, hide items by default (except for the first one, which is a checkbox in disguise).
              When checkbox is checked, flex in a column */
            display: flex;
            flex-grow: 1;
            flex-direction: row;
            justify-content: flex-end;
            li:not(:first-child) { display: none; }
            &:has(input:checked){
                width: 100%;
                display: flex;
                flex-direction: column;
                margin-top: var(--spacing-3);
                li {
                    display: block;
                    width: 100%;
                    text-align: center;
                    border-top: 1px solid var(--colour-text);
                }
            }

            /* On tablet and above, show in a row */
            @media screen and (min-width: 641px) { /* tablet */
                li:has(input) { display: none !important; }
                li { display: block !important; }
                flex-direction: row;
                justify-content: flex-start;
            }

            li {
                margin: 0;
                box-sizing: border-box;

                /* Checkbox used for show/hide on mobile */
                input {
                    appearance: none;
                    display: block; width: 100%; height: 100%;
                    outline: none;
                    border: none;
                    margin: 0 auto;
                    &::before {
                        font-size: var(--font-size-16);
                        display: block;
                        width: 100%;
                        text-align: center;
                        content: "Open Navbar";
                        font-weight: var(--font-weight-bold);
                    }
                    &:checked::before { content: "Close navbar"; }
                }

                a,input {
                    padding: var(--spacing-4);
                    display: block;
                    box-sizing: border-box;
                    width: 100%; height: 100%;

                    color: var(--colour-brand-text) !important;
                    text-decoration: none;

                    &:hover, &:focus {
                        background: var(--colour-hover);
                        color: var(--colour-text) !important;
                    }
                }
            }
        }
    }
}

footer {
    font-size: var(--font-size-19);
    line-height: var(--line-height-19);

    padding: var(--spacing-5) 0;

    border-top: 10px solid var(--colour-brand);
    color: var(--colour-footer-text);
    background: var(--colour-surface-background);
}

/* ______  ___  ____  __     ____  __  */
/* | || | // \\ || )) ||    ||    (( \ */
/*   ||   ||=|| ||=)  ||    ||==   \\  */
/*   ||   || || ||_)) ||__| ||___ \_)) */
/*                                     */
table {
    font-size: var(--font-size-19);
    line-height: var(--line-height-19);

    margin-bottom: var(--spacing-6);

    width: 100%;
    display: block;
    overflow: auto;

    border-spacing: 0;
    border-collapse: collapse;

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

    td,th {
        padding: var(--spacing-2) var(--spacing-4) var(--spacing-2) 0;
        border-bottom: 1px solid var(--colour-border);
        text-align: left;
        vertical-align: top;

        &.numeric { text-align: right; }
        &:last-child { padding-right: 0; }
    }


    caption {
        display: table-caption;
        font-weight: var(--font-weight-bold);
        text-align: left;


        &.xl, &.l, &.m { margin-bottom: var(--spacing-3); }

        &.xl { font-size: var(--font-size-48); line-height: var(--line-height-48); }
        &.l { font-size: var(--font-size-36); line-height: var(--line-height-36); }
        &.m { font-size: var(--font-size-24); line-height: var(--line-height-24); }
    }
}

/* ____ ____ ____ _  _ ____  */
/* |___ |  | |__/ |\/| [__   */
/* |    |__| |  \ |  | ___]  */
/*                           */
input {
    font-size: var(--font-size-19);
    line-height: var(--line-height-19);

    box-sizing: border-box;
    width: 100%;
    margin-top: 0;
    padding: var(--spacing-1);


    border: var(--width-input-border) var(--colour-input-border) solid;
    border-radius: 0;
    appearance: none;

    &:focus {
        outline: var(--width-focus) solid var(--colour-focus);
        outline-offset: 0;
        /* Double the border by adding its width again. Use `box-shadow` for this */
        /* instead of changing `border-width` - this is for consistency with */
        /* components such as textarea where we avoid changing `border-width` as */
        /* it will change the element size. Also, `outline` cannot be utilised */
        /* here as it is already used for the yellow focus state. */
        box-shadow: inset 0 0 0 var(--width-input-border) var(--colour-input-border);
    }

    &:disabled {
        opacity: 0.5;
        color: inherit;
        background-color: transparent;
        cursor: not-allowed;
    }

    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
        margin: 0;
        -webkit-appearance: none;
    }

    &[type="number"] {
        -moz-appearance: textfield;
    }

    &.extra-letter-spacing {
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.05em;
    }

    @media screen and (max-width: 640px) { /* until mobile */
        display: block;
        max-width: 100%;
    }

    &[type=checkbox], &[type=radio] {
        width: 44px;
        height: 44px;
        box-sizing: border-box;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        &:checked::before {
            content: "✓";
            font-size: 29px;
            line-height: 100%;
            padding: 0; margin: 0;
        }

        &[type=radio] { border-radius: 22px; }
        &[type=radio]:checked::before { content: ""; height: 80%; width: 80%; background: var(--colour-text); border-radius: 22px; }
    }
}

form-group:has(> input[type=checkbox] + label),
form-group:has(> input[type=radio] + label) {
    display: grid;
    grid-template-columns: 50px 1fr;
    align-items: center;
    grid-gap: var(--spacing-2);
}

input-wrapper {
    display: flex;
    input { flex: 0 1 auto; }
}

input-prefix, input-suffix {
    font-family: var(--font-size-19);
    line-height: var(--line-height-19);

    box-sizing: border-box;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 1rem;
    padding: var(--spacing-1);
    border: var(--width-input-border) var(--colour-input-border) solid;

    background-color: var(--black-tint-95);
    text-align: center;
    white-space: nowrap;
    cursor: default;

}
input-prefix { border-right: 0; }
input-suffix { border-left: 0; }

.width-30 { max-width: 29.5em; }
.width-20 { max-width: 20.5em; }
.width-10 { max-width: 11.5em; }
.width-5 { max-width: 5.5em; }
.width-4 { max-width: 4.5em; }
.width-3 { max-width: 3.75em; }
.width-2 { max-width: 2.75em; }


form-group {
    margin-bottom: var(--spacing-6);
    display: block;

    &:has(.error), &:has(input:invalid) {
        padding-left: var(--spacing-3);
        border-left: var(--width-form-group-error) solid var(--colour-error);
    }
}

input:invalid,
textarea:invalid,
form-group:has(.error) input,
form-group:has(.error) textarea {
    border-color: var(--colour-error);
    &:focus { border-color: var(--colour-input-border); }
}

.error:not(a) {
    font-size: var(--font-size-19);
    line-height: var(--line-height-19);

    font-weight: var(--font-weight-bold);

    display: block;
    margin-top: 0;
    margin-bottom: var(--spacing-3);
    clear: both;
    color: var(--colour-error);
}

label {
    display: block;
    margin-bottom: var(--spacing-1);
    color: var(--colour-text);
}

h1 > label,
h2 > label,
h3 > label {
    margin-bottom: var(--spacing-3);
}

h1 > label { font-size: var(--font-size-48); }

h1:has(> label),
h2:has(> label),
h3:has(> label) {
    margin: 0;
}

.hint {
    font-size: var(--font-size-19);
    line-height: var(--line-height-19);

    display: block;
    margin-bottom: var(--spacing-3);

    color: var(--colour-secondary-text);
}

textarea {
    font-size: var(--font-size-19);
    line-height: 1.25;

    display: block;
    width: 100%;
    min-height: 50px;
    margin-bottom: var(--spacing-6);
    padding: var(--spacing-1);

    resize: vertical;
    border: var(--width-input-border) solid var(--colour-input-border);
    border-radius: 0;
    -webkit-appearance: none;

    &:focus {
        outline: var(--width-focus) solid var(--colour-focus);
        outline-offset: 0;
        box-shadow: inset 0 0 0 var(--width-input-border) var(--colour-input-border);
    }

    &:disabled {
      opacity: 0.5;
      color: inherit;
      background-color: transparent;
      cursor: not-allowed;
    }
}

button {
    --button-bg: var(--green-shade-25);
    --button-bg-darker: var(--green-shade-50);
    --text: var(--colour-button-text);

    text-decoration: none;
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-80)
    line-height: 1;
    text-align: center;

    display: inline-block;
    position: relative;

    margin: 0 0 22px;
    margin-bottom: 22px;
    padding: 8px 10px 7px;
    border: 2px solid transparent;

    color: var(--text);
    box-shadow: 0 2px 0 var(--button-bg-darker);
    background-color: var(--button-bg);

    &:hover {
        background-color: var(--button-bg-darker);
    }

    &:active {
        top: 2px;
    }

    &:focus {
        border-color: var(--colour-focus);
        box-shadow: 0 var(--width-input-border) 0 var(--colour-focus-text);
        outline: var(--width-focus) solid transparent;
    }

    &.secondary {
        --button-bg: var(--black-tint-95);
        --button-bg-darker: var(--black-tint-80);
        --text: var(--colour-text);
    }
    &.warning {
        --button-bg: var(--red-shade-25);
        --button-bg-darker: var(--red-shade-50);
    }
    &[disabled] {
        opacity: .5;
        cursor: notallowed;

        &:hover {
            background-color: var(--button-bg);
        }
        &:active {
            top: 0;
        }
    }
}

/* end gic.aria.rip */

/* loading spinner */
loading,
loading:after {
    box-sizing: border-box;
}
loading {
    display: block;
    color: var(--colour-brand);
    margin: 2lh auto;
    width: 80px;
    height: 80px;
}
loading:after {
    content: " ";
    display: block;
    width: 64px;
    height: 64px;
    margin: 8px;
    border-radius: 50%;
    border: 6.4px solid currentColor;
    border-color: currentColor transparent currentColor transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* items */
log-page ul#previews,
input-page ul#items {
    display: flex;
    list-style-type: none;
    padding: 1lh;
    align-content: flex-start;
    flex-direction: row;

    li {
        display: block;
        width: 100%;
    }
}

log-list-item,
expanded-log,
input-item{
    display: block;
    border: 1px solid var(--colour-brand);

    .header {
        span {
            display: inline-block;
            font-family: monospace;
            font-size: 1rem;
        }
        span.id {
            background: var(--colour-brand);
            color: var(--colour-brand-text);
            padding: 0.5rem;
            margin-right: 0.5rem;
        }
        span.input {
            font-family: monospace;
        }

        .collapse {
            float: right;
            background: var(--colour-text);
            color: var(--colour-body-background);
            border: 0;
            padding: 0.5rem;
            font-size: 1rem;
        }
    }

    #root-span, .content {
        padding: 1rem;
    }
}

#root-span {
    padding: 1rem;
}

log-span {
    border-left: 1rem solid var(--span-colour);
    display: block;
    padding-top: 0.5lh;
    attributes {
        display: block;
        padding: 0.5lh 1rem;
        pre {
            margin: 0;
        }
        border-bottom: 1px solid var(--colour-text);
    }

    #events,#children {
        list-style-type: none;
        padding: 0;
    }

}

form-group.any-of {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;

    border: var(--width-input-border) var(--colour-input-border) solid;
    margin: 1rem;
    padding: 1rem;

    > form-group {
        padding: 1rem;
        flex-grow: 1;
    }

    > form-group:not(:has(input[type=radio]:first-child:checked)) {
        opacity: 0.5;
    }

    > span {
        width: 100%;
        text-align: center;
        margin-bottom: 1rem;
    }
}