/*
 * ===========
 * == RESET ==
 * ===========
 *
 * Reset user-agent-imposed styles back to a common foundation for the project-specific styles to be built on
 *
 * Inspired by:
 * - https://github.com/elad2412/the-new-css-reset
 * - https://www.joshwcomeau.com/css/custom-css-reset/
 * - https://piccalil.li/blog/a-more-modern-css-reset/
 */

/* Reset all of the user agent styles, with a few exceptions (`symbol *` resolves a Firefox SVG sprite bug) */
:where(:not(canvas, iframe, img, svg, svg *, symbol *, video)) {
    all: unset;
    display: revert;
}

*, *::before, *::after {
    box-sizing: border-box; /* Make element sizing more intuitive */
    font: inherit;
    margin: 0;
    overflow-wrap: break-word; /* Prevent text from overflowing outside parents */
    padding: 0;
}

:root {
    font-size: 16px;
}

html {
    /*
     * Prevent font size inflation on mobile devices in a landscape orientation
     * (See https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/)
     */
    -moz-text-size-adjust: none;
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
}

img, picture, video, canvas, svg {
    display: block; /* A more appropriate default when images are rarely used inline */
    max-inline-size: 100%; /* Prevent images from exceeding the size of their parents */
}

table {
    border-collapse: collapse;
}

ol, ul, menu {
    list-style: none;
}

iframe[src*="youtube"] {
    aspect-ratio: 16 / 9;
}

/*
 * ===========
 * == FONTS ==
 * ===========
 *
 * `@font-face` declarations for project-wide font files
 */

/*
 * EXPORT by XYZ Type
 * (Licensed for trial use only)
 */

@font-face {
    font-family: 'Export';
    font-weight: 400;
    src:
            local('Export Regular'),
            local('Export-Regular'),
            url('/static/fonts/xyz-type/export/Export_Regular.woff2') format('woff2'),
            url('/static/fonts/xyz-type/export/Export_Regular.woff') format('woff');
}

/*
 * GREP by XYZ Type
 * (Licensed for trial use only)
 */

@font-face {
    font-family: 'Grep';
    font-weight: 400;
    src:
            local('Grep Regular'),
            local('Grep-Regular'),
            url('/static/fonts/xyz-type/grep/Grep_Regular.woff2') format('woff2'),
            url('/static/fonts/xyz-type/grep/Grep_Regular.woff') format('woff');
}

@font-face {
    font-family: 'Grep';
    font-weight: 500;
    src:
            local('Grep Medium'),
            local('Grep-Medium'),
            url('/static/fonts/xyz-type/grep/Grep_Medium.woff2') format('woff2'),
            url('/static/fonts/xyz-type/grep/Grep_Medium.woff') format('woff');
}

@font-face {
    font-family: 'Grep';
    font-weight: 600;
    src:
            local('Grep Semibold'),
            local('Grep-Semibold'),
            url('/static/fonts/xyz-type/grep/Grep_Semibold.woff2') format('woff2'),
            url('/static/fonts/xyz-type/grep/Grep_Semibold.woff') format('woff');
}

@font-face {
    font-family: 'Grep';
    font-weight: 700;
    src:
            local('Grep Bold'),
            local('Grep-Bold'),
            url('/static/fonts/xyz-type/grep/Grep_Bold.woff2') format('woff2'),
            url('/static/fonts/xyz-type/grep/Grep_Bold.woff') format('woff');
}

@font-face {
    font-family: 'Grep';
    font-weight: 800;
    src:
            local('Grep Extra Bold'),
            local('Grep-Extra-Bold'),
            url('/static/fonts/xyz-type/grep/Grep_Extra_Bold.woff2') format('woff2'),
            url('/static/fonts/xyz-type/grep/Grep_Extra_Bold.woff') format('woff');
}

@font-face {
    font-family: 'Grep';
    font-weight: 900;
    src:
            local('Grep Black'),
            local('Grep-Black'),
            url('/static/fonts/xyz-type/grep/Grep_Black.woff2') format('woff2'),
            url('/static/fonts/xyz-type/grep/Grep_Black.woff') format('woff');
}

@font-face {
    font-family: 'Grep';
    font-weight: 950;
    src:
            local('Grep Ultra'),
            local('Grep-Ultra'),
            url('/static/fonts/xyz-type/grep/Grep_Ultra.woff2') format('woff2'),
            url('/static/fonts/xyz-type/grep/Grep_Ultra.woff') format('woff');
}

/*
 * ===============
 * == VARIABLES ==
 * ===============
 *
 * Define global variables used throughout the project for typography, spacing, and colors
 */

:root {
    /*
     * TYPE SCALE
     *
     * (Adapted from Every Layout's modular scale; see https://every-layout.dev/rudiments/modular-scale/)
     */

    /* Determines the amount of scaling between each interval of the type scale */
    --type-ratio: 1.2;

    /*
     * Unitless scale
     * (For `rem` and `em` scales below)
     */
    --type-interval--5: calc(var(--type-interval--4) / var(--type-ratio));
    --type-interval--4: calc(var(--type-interval--3) / var(--type-ratio));
    --type-interval--3: calc(var(--type-interval--2) / var(--type-ratio));
    --type-interval--2: calc(var(--type-interval--1) / var(--type-ratio));
    --type-interval--1: calc(var(--type-interval-0)  / var(--type-ratio));
    --type-interval-0:  1;
    --type-interval-1:  calc(var(--type-interval-0)  * var(--type-ratio));
    --type-interval-2:  calc(var(--type-interval-1)  * var(--type-ratio));
    --type-interval-3:  calc(var(--type-interval-2)  * var(--type-ratio));
    --type-interval-4:  calc(var(--type-interval-3)  * var(--type-ratio));
    --type-interval-5:  calc(var(--type-interval-4)  * var(--type-ratio));

    /*
     * `rem` scale
     * (For scaled-`rem` scale below and in rare cases where a `rem` value based on the type scale is needed)
     */
    --type-scale-3xs: calc(var(--type-interval--5) * 1rem);
    --type-scale-2xs: calc(var(--type-interval--4) * 1rem);
    --type-scale-xxs: calc(var(--type-interval--3) * 1rem);
    --type-scale-xs:  calc(var(--type-interval--2) * 1rem);
    --type-scale-sm:  calc(var(--type-interval--1) * 1rem);
    --type-scale-md:  calc(var(--type-interval-0)  * 1rem);
    --type-scale-lg:  calc(var(--type-interval-1)  * 1rem);
    --type-scale-xl:  calc(var(--type-interval-2)  * 1rem);
    --type-scale-xxl: calc(var(--type-interval-3)  * 1rem);
    --type-scale-2xl: calc(var(--type-interval-4)  * 1rem);
    --type-scale-3xl: calc(var(--type-interval-5)  * 1rem);

    /*
     * Scaled-`rem` scale
     * (For setting base font sizes on body/parent elements)
     */
    --type-scale-3xs-2xs: clamp(var(--type-scale-3xs), 1vw,   var(--type-scale-2xs));
    --type-scale-2xs-xxs: clamp(var(--type-scale-2xs), 1vw,   var(--type-scale-xxs));
    --type-scale-xxs-xs:  clamp(var(--type-scale-xxs), 1vw,   var(--type-scale-xs));
    --type-scale-xs-sm:   clamp(var(--type-scale-xs),  1.5vw, var(--type-scale-sm));
    --type-scale-sm-md:   clamp(var(--type-scale-sm),  1.5vw, var(--type-scale-md));
    --type-scale-md-lg:   clamp(var(--type-scale-md),  2vw,   var(--type-scale-lg));
    --type-scale-lg-xl:   clamp(var(--type-scale-lg),  3vw,   var(--type-scale-xl));
    --type-scale-xl-xxl:  clamp(var(--type-scale-xl),  3vw,   var(--type-scale-xxl));
    --type-scale-xxl-2xl: clamp(var(--type-scale-xxl), 4vw,   var(--type-scale-2xl));
    --type-scale-2xl-3xl: clamp(var(--type-scale-2xl), 4vw,   var(--type-scale-3xl));

    /*
     * `em` scale
     * (For setting font sizes directly on textual elements)
     */
    --t-3xs: calc(var(--type-interval--5) * 1em);
    --t-2xs: calc(var(--type-interval--4) * 1em);
    --t-xxs: calc(var(--type-interval--3) * 1em);
    --t-xs:  calc(var(--type-interval--2) * 1em);
    --t-sm:  calc(var(--type-interval--1) * 1em);
    --t-md:  calc(var(--type-interval-0)  * 1em);
    --t-lg:  calc(var(--type-interval-1)  * 1em);
    --t-xl:  calc(var(--type-interval-2)  * 1em);
    --t-xxl: calc(var(--type-interval-3)  * 1em);
    --t-2xl: calc(var(--type-interval-4)  * 1em);
    --t-3xl: calc(var(--type-interval-5)  * 1em);

    /*
     * Scaled-`em` scale
     * (For special cases when scaling up one value on the `em` scale is desired on larger screens)
     */
    --t-3xs-2xs: clamp(var(--t-3xs), 1vw,   var(--t-2xs));
    --t-2xs-xxs: clamp(var(--t-2xs), 1vw,   var(--t-xxs));
    --t-xxs-xs:  clamp(var(--t-xxs), 1vw,   var(--t-xs));
    --t-xs-sm:   clamp(var(--t-xs),  1.5vw, var(--t-sm));
    --t-sm-md:   clamp(var(--t-sm),  1.5vw, var(--t-md));
    --t-md-lg:   clamp(var(--t-md),  2vw,   var(--t-lg));
    --t-lg-xl:   clamp(var(--t-lg),  3vw,   var(--t-xl));
    --t-xl-xxl:  clamp(var(--t-xl),  3vw,   var(--t-xxl));
    --t-xxl-2xl: clamp(var(--t-xxl), 4vw,   var(--t-2xl));
    --t-2xl-3xl: clamp(var(--t-2xl), 4vw,   var(--t-2xl));

    /*
     * SPACING SCALE
     *
     * (Every Layout's modular scale; see https://every-layout.dev/rudiments/modular-scale/)
     */

    /* Determines the amount of scaling between each interval of the spacing scale */
    --spacing-ratio: 1.618; /* Phi (the golden ratio) */

    /*
     * `rem` scale
     * (For setting layout-related margins, padding, and gaps which maintain consistent alignment globally)
     */
    --s-3xs: calc(var(--s-2xs) / var(--spacing-ratio));
    --s-2xs: calc(var(--s-xxs) / var(--spacing-ratio));
    --s-xxs: calc(var(--s-xs)  / var(--spacing-ratio));
    --s-xs:  calc(var(--s-sm)  / var(--spacing-ratio));
    --s-sm:  calc(var(--s-md)  / var(--spacing-ratio));
    --s-md:  1rem;
    --s-lg:  calc(var(--s-md)  * var(--spacing-ratio));
    --s-xl:  calc(var(--s-lg)  * var(--spacing-ratio));
    --s-xxl: calc(var(--s-xl)  * var(--spacing-ratio));
    --s-2xl: calc(var(--s-xxl) * var(--spacing-ratio));
    --s-3xl: calc(var(--s-2xl) * var(--spacing-ratio));

    /*
     * COLOR PALETTE
     */

    /* Neutrals */
    --c-neutral-100: hsl(216, 25%, 99%);
    --c-neutral-200: hsl(215, 18%, 96%);
    --c-neutral-300: hsl(214, 12%, 92%);
    --c-neutral-400: hsl(213, 11%, 78%);
    --c-neutral-500: hsl(212, 12%, 57%);
    --c-neutral-600: hsl(208, 15%, 38%);
    --c-neutral-700: hsl(210, 17%, 23%);
    --c-neutral-800: hsl(211, 20%, 15%);
    --c-neutral-900: hsl(212, 35%, 10%);

    /* Primaries */
    --c-primary-100: hsl(216,  32%, 96%);
    --c-primary-200: hsl(215,  36%, 91%);
    --c-primary-300: hsl(214,  32%, 70%);
    --c-primary-400: hsl(213,  35%, 50%);
    --c-primary-500: hsl(212,  50%, 38%);
    --c-primary-600: hsl(208, 100%, 25%); /* PMS 2154 C */
    --c-primary-700: hsl(210,  80%, 22%);
    --c-primary-800: hsl(211,  85%, 17%);
    --c-primary-900: hsl(212, 100%,  8%);

    /* Accents */
    --c-accent-200: hsl(29,  98%, 92%);
    --c-accent-500: hsl(29,  80%, 51%);
    --c-accent-900: hsl(29, 100%,  5%);

    /*
     * FONTS
     */

    /* "ff" meaning "font family" */
    --ff-body: 'Grep', system-ui, sans-serif;
    --ff-heading: 'Export', system-ui, sans-serif;
    --ff-ui: var(--ff-body);
    --ff-mono--block: monospace;
    --ff-mono--inline: monospace;

    --body--font-weight: 400;
    /* TODO(max): Consider setting --type-scale-sm-md on the body explicitly, and using --t-sm-md here */
    --body--font-size: var(--type-scale-sm-md); /* Scaled-`rem`-based to set global base font size */
    --body--line-height: 1.4;
    --body--font-family: var(--ff-body);
    --body--font:
            var(--body--font-weight)
            var(--body--font-size)/var(--body--line-height)
            var(--body--font-family);

    --heading--font-weight: 400;
    --heading--font-size: var(--t-2xl-3xl); /* Scaled-`em`-based to respond to parent font size as needed */
    --heading--line-height: 1;
    --heading--font-family: var(--ff-heading);
    --heading--font:
            var(--heading--font-weight)
            var(--heading--font-size)/var(--heading--line-height)
            var(--heading--font-family);

    /* TODO(max): Create `font` rules for h# */

    /*
     * COLOR ASSIGNMENTS
     */

    /* Fonts */
    --c--body-bg: var(--c-neutral-100);
    --c--body-text: var(--c-primary-900);

    /* Headings */
    --c--heading-1: var(--c-primary-800);
    --c--heading-2: var(--c-primary-900);
    --c--heading-3: var(--c-primary-700);
    --c--heading-4: var(--c-primary-900);
}

/*
 * =============
 * == GLOBALS ==
 * =============
 *
 * Project-specific styles applied globally
 */

@view-transition {
    navigation: auto;
}

body {
    background-color: var(--c--body-bg);
    color: var(--c--body-text);
    font: var(--body--font);

    /*
     * Flawless Typography Checklist #23: Enable standard ligatures
     * (See https://app.typographychecklist.com)
     */
    font-feature-settings: 'kern', 'liga', 'clig', 'calt';
    -moz-font-feature-settings: 'kern', 'liga', 'clig', 'calt';
    -webkit-font-feature-settings: 'kern', 'liga', 'clig', 'calt';
    font-kerning: normal;
}

::selection {
    background-color: var(--c-primary-500);
    color: white; /* For a slight contrast boost compared to `--c-neutral-100` */
}

/*
 * `h1` elements are used for page structure and SEO purposes by default, so should be visually
 *  hidden. There should also only ever be one, so no need for a `:first-of-type` selector.
 */
h1 {
    /* PATTERN: Hide visually */
    inset-block-start: -999vw;
    position: absolute;
}

main h2 {
    letter-spacing: 0.02em;
}

@media screen and (width <= 800px) {
    main, footer {
        padding: var(--s-sm);
    }
}

a {
    cursor: pointer; /* `a` elements aren't likely to look clickable, so should almost always have a pointer */
}

/*
 * CONTENT
 */

.content * + *:not(section, input, select, textarea, dt, dd, table *) {
    margin-block-start: var(--t-sm);
}

.content form * + *:not(section, form, input, select, textarea, dt, dd) {
    margin-block-start: var(--t-xl);
}

.content:not(.fragment) > :first-child {
    margin-block-start: unset;
}

/*
 * Headings
 */

.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
    font: var(--heading--font);
    margin-block-start: var(--t-lg);
    text-wrap: balance;
}

.content h1 + *,
.content h2 + *,
.content h3 + *,
.content h4 + *,
.content h5 + *,
.content h6 + * {
    margin-block-start: var(--t-md);
}

/* Heading 1 */

.content h1,
.content h2 {
    color: var(--c--heading-1);
    font-size: var(--t-xxl-2xl);
}

/*
 * The below pattern (e.g., `h1 ~ h2, h3`) shifts styles to the next
 * heading level when no previous sibling `h1` exists.
 *
 * TODO(max): Adapt the below pattern to work on nested siblings
 */

/* Heading 2 */

.content h1 ~ h2,
.content h3 {
    color: var(--c--heading-2);
    font-size: var(--t-xl-xxl);
    letter-spacing: 0.035em;
}

/* Heading 3 */

.content h1 ~ h3,
.content h4 {
    color: var(--c--heading-3);
    font-size: var(--t-lg-xl);
    letter-spacing: 0.025em;
}

/* Headings 4-6 */

.content h1 ~ h4,
.content h5,
.content h6 {
    color: var(--c--heading-4);
    font-family: var(--body--font-family);
    font-size: var(--t-md);
    font-weight: 600;
    text-transform: uppercase;
}

.content p {
    text-wrap: pretty;
}

.content p a {
    color: var(--c-primary-700);
    font-weight: 500;
    text-decoration: underline;
}

.content strong {
    font-weight: 600;
}

.content em {
    font-style: italic;
}

.content blockquote {
    padding-inline-start: var(--t-md);
}

/* Lists */

.content > * + ul,
.content > * + ol,
.content > ul + *,
.content > ol + * {
    margin-top: var(--t-md);
}

.content ul li,
.content ol li {
    position: relative;
}

.content ul li {
    margin-inline-start: var(--s-lg); /* ul elements get their bullets from list-style */
}

.content ol li {
    padding-inline-start: var(--s-lg); /* ol elements get their counters from a pseudo element */
}

.content ul li + li,
.content ol li + li {
    margin-block-start: var(--t-xs);
}

.content ul li::before,
.content ol li::before {
    inset-inline-start: var(--s-xxs);
    position: absolute;
}

.content ul li {
    list-style: square;
}

.content ol li::before {
    content: counter(list-item) ".";
}

/* Definition lists */

.content dl,
dl.content { /* Support using `dl` itself as content container */
    display: grid;
    gap: var(--t-2xs) var(--s-md);
    grid-template-columns: auto 1fr;
}

.content dt {
    grid-column: 1;
}

.content dd {
    grid-column: 2;
}

/*
 * FORMS
 */

.content form,
button,
a.button,
input[type="submit"] {
    font-size: var(--type-scale-md); /* Prevent the font size from scaling down below `md` (it hurts labels) */
}

/* Labels */

form label {
    background-color: var(--c-neutral-100);
    color: var(--c-neutral-700);
    font-weight: 500;
}

form label:not([for]) {
    border: 2px solid var(--c-neutral-500);
    display: flex;
    flex-direction: column;
    gap: var(--s-2xs);
    justify-content: center;
    padding-block: var(--t-3xs);
    padding-inline: var(--s-xs);
    position: relative;
    transition: all 50ms;
}

form label:not([for]):hover {
    border-color: var(--c-primary-600);
}

form label:not([for]) span,
form fieldset legend {
    cursor: pointer;
}

form label:not([for], fieldset label):focus-within {
    color: var(--c-primary-800);
    border: 2px solid var(--c-primary-600);
    outline: 3px solid var(--c-primary-300);
}

form label:not([for]) span:first-child, /* Infield label */
form fieldset legend {
    display: block;
    font-size: var(--t-sm);
    font-weight: 500;
    padding-inline-end: var(--s-xs);
}

form label:not([for]) span:last-child { /* Field suffix */
    color: var(--c-primary-900);
    font-weight: 400;
    margin-block-start: unset;
}

.content form label + p { /* Select either the error message or the form field description */
    font-size: var(--t-sm);
    margin-block-start: var(--t-xxs);
}

p.error-message {
    background-color: var(--c-accent-200);
    border: 1px solid var(--c-accent-500);
    color: var(--c-accent-900);
    font-weight: 500;
    max-width: max-content;
    padding-block: var(--s-xxs) var(--s-2xs);
    padding-inline: var(--s-xs);
}

.content form label + p.error-message + p {
    display: none;
}

form fieldset {
    border-inline-start: 2px solid var(--c-neutral-500);
    display: flex;
    flex-direction: column;
    padding-inline-start: var(--s-xs);
}

form fieldset legend {
    float: inline-start; /* Otherwise the legend is positioned over the fieldset's top border */
}

form fieldset legend ~ p,
.content form fieldset legend ~ p { /* Targets increased specificity */
    font-size: var(--t-sm);
    margin-block-start: var(--t-3xs);
}

form fieldset legend ~ * + p,
.content form fieldset legend ~ * + p { /* Targets increased specificity */
    margin-block-start: var(--t-xxs);
}

form fieldset div {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-xs);
}

.content form fieldset div {
    align-items: center;
    margin-block-start: var(--t-3xs);
}

form fieldset div label:not([for]) {
    align-items: center;
    border: none;
    background-color: var(--c-neutral-300);
    display: inline-flex;
    flex-direction: row;
    gap: var(--s-xs);
    margin-block-start: unset;
}

form fieldset label input:first-child:not([type='checkbox'], [type='radio']) {
    background-color: var(--c-neutral-100);
    border: 2px solid var(--c-neutral-500);
    padding-block: var(--t-3xs);
    padding-inline: var(--s-xs);
}

form fieldset label input:first-child:not([type='checkbox'], [type='radio']):hover {
    border-color: var(--c-primary-600);
}

form fieldset label input:first-child:not([type='checkbox'], [type='radio']) + span {
    padding-inline: var(--s-xxs);
}

form fieldset label input:first-child:focus {
    border: 2px solid var(--c-primary-600);
    outline: 3px solid var(--c-primary-300);
}

/* TODO(max): Finish implementing the `focus` or `focus-visible` styles */

form input,
form select,
form textarea {
    color: var(--c--body-text);
    font-weight: initial;
}

form label.disabled, /* Labels can't have the `disabled` attribute set directly */
form :not(label) input:disabled,
form :not(label) select:disabled,
form :not(label) textarea:disabled {
    opacity: 0.75;
    cursor: not-allowed;
}

form label.disabled:hover {
    border-color: var(--c-neutral-600);
}

form label.disabled > span {
    cursor: not-allowed;
}

form span.select {
    block-size: 100%;
    display: flex;
    gap: var(--t-3xs);
    padding-inline-end: var(--s-2xs);
}

form span.select::after {
    content: '';
    block-size: 0;
    border: var(--t-3xs) solid transparent;
    border-block-start-color: black;
    inline-size: 0;
    margin-block-start: var(--t-2xs);
    margin-inline: auto;
}

/* Inputs: Checkbox/Radio */

form input[type='checkbox'],
form input[type='radio'] {
    --size: calc(var(--body--line-height) * var(--t-md));
    align-items: center;
    background-color: var(--c-neutral-100);
    block-size: var(--size);
    border: 2px solid var(--c-neutral-500);
    display: flex;
    inline-size: var(--size);
    justify-content: center;
    position: relative;
    transition: all 50ms;
}

form input[type='checkbox']:hover,
form input[type='radio']:hover {
    border-color: var(--c-primary-600);
}

form input[type='radio'] {
    border-radius: 50%;
}

form input[type='checkbox']::after,
form input[type='radio']::after {
    block-size: 100%;
    inline-size: 100%;
    transform: scale(0);
}

form input[type='checkbox']::after {
    content: '\2714'; /* TODO(max): Replace with on-brand icon checkmark */
    font-size: var(--t-xl);
    line-height: 0.75; /* TODO(max): Remove after content is replaced with icon */
}

form input[type='radio']::after {
    background-color: var(--c-primary-900);
    border-radius: 50%;
    content: '';
}

form input[type='checkbox']:checked::after {
    transform: scale(1);
}

form input[type='radio']:checked::after {
    block-size: 60%;
    inline-size: 60%;
    transform: scale(1);
}

/* Textarea */

form textarea {
    block-size: 100%;
    inline-size: 100%;
}

/* Inputs: File */

form input[type='file'] {
    margin-block-start: var(--s-xxs);
    padding-inline-start: var(--s-2xs); /* To counter typical rounded button optical alignment */
}

form input[type='file']::file-selector-button {
    font-family: var(--body--font-family); /* Isn't inherited by default */
    margin-inline-end: var(--t-xxs);
}

/* Inputs: Submit */

form input[type='file']::file-selector-button,
form input[type='submit'],
button,
a.button {
    /* Includes styles only relevant when using an icon via a pseudo element (e.g., `display: flex`) */
    align-items: center;
    background-color: var(--c-primary-500);
    border: none;
    border-radius: 999px;
    color: var(--c-neutral-100);
    cursor: default;
    display: inline-flex;
    font-weight: 500;
    gap: var(--s-sm);
    margin-inline-start: calc(var(--s-3xs) * -1);
    padding-block: var(--t-xs);
    padding-inline: var(--t-lg);
}

form input[type='file']::file-selector-button:hover,
form input[type='submit']:hover,
button:hover,
a.button:hover {
    background-color: var(--c-primary-600);
    color: var(--c-neutral-100);
}

form input[type="submit"],
button,
a.button {
    margin-block-start: var(--t-sm);
}

/* Represents a button-styled link */
a.primary-action,
a.secondary-action {
    align-items: center;
    background-color: var(--c-primary-500);
    border: none;
    border-radius: 999px;
    color: var(--c-neutral-100);
    cursor: default;
    display: inline-flex;
    font-weight: 500;
    gap: var(--s-sm);
    padding-block: var(--t-xs);
    padding-inline: var(--t-lg);
    text-decoration: none;
}

a.primary-action:first-child,
a.secondary-action:first-child {
    margin-inline-start: calc(var(--s-3xs) * -1);
}

a.primary-action:last-child,
a.secondary-action:last-child {
    margin-inline-end: calc(var(--s-3xs) * -1);
}

a.secondary-action {
    background-color: var(--c-primary-200);
    color: var(--c-primary-900);
}

a.primary-action:hover {
    background-color: var(--c-primary-600);
    color: var(--c-neutral-100);
}

a.secondary-action:hover {
    background-color: var(--c-primary-300);
}

/*
 * ============================
 * == COMPONENT (layout.php) ==
 * ============================
 */

body {
    /*
     * PATTERN: Every Layout's center layout
     * (See https://every-layout.dev/layouts/center/)
     */
    box-sizing: content-box;
    margin-inline: auto;
    max-inline-size: 1400px; /* TODO(max): Replace with a non-fixed value */
    overflow-wrap: break-word;

    display: grid;
    grid-column-gap: var(--s-md);
    grid-template:
        'sidebar header'  min-content
        'sidebar content' 1fr
        'sidebar footer'  min-content
        /
        calc(var(--t-2xl) * 7) /* Arbitrary size based on a pleasant visual width */
        1fr;
    padding-inline: var(--s-md);
}

@media screen and (width <= 800px) {
    body {
        grid-template:
            'header'  min-content
            'content' minmax(100vh, 1fr)
            'footer'  min-content
            'sidebar'
            /
            100vw;
        padding-inline: 0;
    }

    h1 {
        inset-block-start: unset;
        position: unset;
    }
}

.pop-up {
    align-items: center;
    background-color: hsla(0, 0%, 100%, 0.85);
    display: flex;
    inset: 0;
    justify-content: center;
    position: fixed;
    z-index: 999;
}

.pop-up[hidden] {
    display: none;
}

.pop-up > div {
    background-color: var(--c-primary-100);
    block-size: max-content;
    border: 1px solid var(--c-primary-200);
    border-block-start: 2px solid var(--c-primary-400);
    inline-size: 400px;
    max-inline-size: calc(100vw - (var(--s-sm) * 2));
    padding: var(--s-md) var(--t-md);
}

/* This button is injected via JS */
.pop-up > div button {
    background-color: var(--c-primary-200);
    color: var(--c-primary-900);
    margin-block-start: var(--t-sm);
    margin-inline-start: var(--s-xxs);
}

header {
    grid-area: header;
    padding-block: var(--t-sm);
    position: relative; /* For the nested `a` to position itself to */
    z-index: 10;
}

header > img,
header > hgroup > p {
    display: none;
}

header > hgroup > h1 > a::before {
    /* PATTERN: Overlay anchor */
    content: '';
    inset: 0;
    position: absolute;
}

header > p {
    font-style: italic;
    font-weight: 600;
}

@media screen and (width <= 800px) {
    header {
        align-items: center;
        background-color: var(--c-neutral-100);
        border-block-end: 1px solid var(--c-neutral-400);
        display: flex;
        gap: var(--s-xs);
        inline-size: 100%;
        inset-block-start: 0;
        inset-inline: 0 0;
        max-block-size: calc(var(--t-2xl) * 2); /* Arbitrary size based on a pleasant visual height */
        padding-block: var(--t-xxs);
        padding-inline: var(--s-sm);
    }

    header > img {
        display: initial;
    }

    header > hgroup > h1 {
        color: var(--c--heading-1);
        display: block;
        font: var(--heading--font);
        font-size: var(--t-xxl);
    }

    header > hgroup > p {
        color: var(--c-primary-700);
        display: initial;
        font: var(--heading--font);
        font-size: var(--t-md);
        letter-spacing: 0.1em; /* Arbitrary value based on a pleasant visual spacing */
    }

    header > p {
        display: none;
    }
}

nav {
    block-size: 100vh;
    display: flex;
    flex-direction: column;
    gap: var(--t-xs);
    grid-area: sidebar;
    inset-block-start: 0;
    inset-inline: 0 0;
    overflow-y: auto;
    padding-block: var(--s-md);
    position: sticky;
    z-index: 100;
}

nav > a {
    margin-block-end: var(--s-xxs);
    padding-inline: var(--s-md);
}

nav > h2 {
    /* PATTERN: Hide visually */
    inset-block-start: -999vw;
    position: absolute;
}

nav > menu {
    display: contents;
}

menu.admin-nav {
    display: flex;
    flex-direction: column;
    gap: var(--t-xs);
}

nav > menu > li > a,
menu.admin-nav > li > a,
nav > label[for='show-more'] {
    align-items: center;
    background-color: var(--c-primary-100);
    color: var(--c-primary-900);
    display: flex;
    gap: var(--t-xxs);
    inline-size: 100%;
    padding-block: var(--t-xxs);
    padding-inline: var(--s-sm);
    transition: all 50ms;
}

nav > menu > li > a:hover,
menu.admin-nav > li > a:hover,
nav > label[for='show-more']:checked {
    background-color: var(--c-primary-200);
}

nav > menu > li > a > img,
menu.admin-nav > li > a > img,
nav > label[for='show-more'] > img {
    block-size: var(--t-lg);
}

nav > menu > li > a[aria-current="page"],
menu.admin-nav > li > a[aria-current="page"] {
    background-color: var(--c-primary-200);
}

nav > menu > li > a,
menu.admin-nav > li > a,
nav > label[for='show-more'] > span {
    color: var(--c-primary-900);
    font-weight: 600;
}

nav > menu > li > a > span,
menu.admin-nav > li > a > span {
    padding-block-end: 1px; /* To fix slight vertical offset */
}

/* The label will share styles with other rules above, but shouldn't be shown on desktop */
nav > label[for='show-more'],
nav > input#show-more {
    display: none;
}

@media screen and (width <= 800px) {
    nav {
        block-size: initial;
        border-block-start: 1px solid var(--c-neutral-400);
        flex-direction: row;
        gap: 0;
        inline-size: 100%;
        inset: 0;
        inset-block-start: initial;
        justify-content: space-around;
        overflow-y: initial;
        padding-block: 0;
        position: sticky;
    }

    nav > a {
        display: none;
    }

    nav > menu > li,
    nav > label[for='show-more'] {
        flex-basis: calc(100% / 6); /* Where the second value is the number of nav items */
        flex-grow: 1;
    }

    nav > menu > li > a,
    nav > label[for='show-more'] {
        background-color: var(--c-neutral-100);
        cursor: pointer;
        display: flex;
        flex-direction: column; /* Affects children, not self */
        gap: var(--s-2xs);
        justify-content: space-between;
        padding-block: var(--t-xs) var(--t-3xs);
    }

    nav > menu > li > a > img,
    nav > label[for='show-more'] > img {
        block-size: unset;
    }

    nav > menu > li > a > span > span,
    nav > .user-nav {
        display: none;
    }

    nav > input#show-more:checked ~ .user-nav {
        background-color: var(--c-neutral-100);
        border-block: 1px solid var(--c-neutral-400);
        border-inline: none;
        display: unset;
        font-size: var(--t-lg);
        inline-size: 100%;
        inset-block-end: 100%;
        margin-block: 0;
        padding-block: var(--t-sm);
        position: absolute;
    }
}

main {
    grid-area: content;
    margin-block-end: var(--t-lg);
}

footer {
    font-size: var(--type-scale-sm); /* Prevent the font size from scaling below `sm` */
    grid-area: footer;
    padding-block-end: var(--t-lg);
}

footer > h2 {
    /* PATTERN: Hide visually */
    inset-block-start: -999vw;
    position: absolute;
}

footer > ul {
    margin-block-start: var(--t-3xs);
}

footer > ul > li {
    color: var(--c-primary-700);
    display: inline-block;
}

footer > ul > li + li::before {
    content: '\2022';
    margin-inline: var(--t-3xs) var(--t-xxs);
}

footer > ul a {
    color: var(--c-primary-700);
    font-weight: 500;
    text-decoration: underline;
}

section.notice {
    background-color: var(--c-neutral-200);
    padding: var(--t-xs);
}

section.notice h2 {
    /* PATTERN: Hide visually */
    inset-block-start: -999vw;
    position: absolute;
}

section.notice p:first-of-type {
    font-weight: 600;
    margin-block-start: 0;
}

section.notice[data-notice-type$='-deleted'],
section.notice[data-notice-type$='-error'] {
    background-color: #ffc5c5;
    border: 1px solid #ff9797;
    color: hsl(0, 100%, 8%);;
}

section.notice[data-notice-type='listing-published'] {
    background-color: var(--c-primary-200);
    border: 1px solid var(--c-primary-300);
    color: var(--c-primary-900);
}

section.notice[data-notice-type='post-deleted'] {
    margin-block-end: var(--t-xl);
}

section.notice[data-notice-type='post-deleted'] > p > span {
    font-style: italic;
}

/*
 * ===============================================
 * == COMPONENT (blogroll-post-form-fields.php) ==
 * ===============================================
 */

form fieldset div.datetime-fields > label:not([for]) {
    align-items: initial;
    /* Reapplies styles for `form fieldset div label:not([for])` */
    border: 2px solid var(--c-neutral-600);
    display: flex;
    flex-direction: column;
    gap: var(--s-2xs);
    justify-content: center;
    padding-block: var(--t-3xs);
    padding-inline: var(--s-xs);
}

form fieldset div.datetime-fields > label {
    /* Reapplies styles for `form fieldset div label` */
    background-color: var(--c-neutral-100);
    color: var(--c-neutral-700);
    font-weight: 500;
}

form fieldset div.datetime-fields > div {
    margin-block-start: 0;
}

form fieldset div.datetime-fields + p {
    background-color: var(--c-primary-200);
    border: 1px solid var(--c-primary-500);
    color: var(--c-primary-900);
    font-weight: 500;
    max-width: max-content;
    padding-block: var(--s-xxs) var(--s-2xs);
    padding-inline: var(--s-xs);
}

form fieldset div.datetime-fields + p span {
    font-weight: 600;
}

/*
 * =========================================
 * == COMPONENT (listing-photos.php) ==
 * =========================================
 */

fieldset > table.listing-photos {
    margin: 0;
}

fieldset > table.listing-photos thead {
    /* PATTERN: Hide visually */
    inset-block-start: -999vw;
    position: absolute;
}

fieldset > table.listing-photos tbody {
    display: grid;
    gap: var(--s-sm);
    grid-template-columns: repeat(auto-fill, minmax(11em, 1fr));
    margin-block-start: var(--t-3xs);
    padding-inline-end: var(--t-3xs);
}

fieldset > table.listing-photos tr {
    display: grid;
    position: relative;
}

fieldset > table.listing-photos tr + tr {
    margin: 0;
}

fieldset > table.listing-photos td:first-of-type {
    align-items: center;
    background-color: var(--c-neutral-200);
    border: 1px solid var(--c-neutral-400);
    display: flex;
    justify-content: center;
}

fieldset > table.listing-photos td:first-of-type img {
    aspect-ratio: 1.4;
    block-size: 100%;
    inline-size: 100%;
    object-fit: contain;
}

fieldset > table.listing-photos td + td {
    border: 1px solid rgba(0, 0, 0, 0); /* To align contents with the first td, above */
    margin: 0;
    position: absolute;
}

/* TODO(max): Invert the input borders and outlines so the outer border is dark and the inner border is light */

fieldset > table.listing-photos td.delete-photo label:hover,
fieldset > table.listing-photos td.feature-photo label:hover {
    border-color: var(--c-primary-200);
}

fieldset > table.listing-photos td.delete-photo {
    inset: 0;
}

fieldset > table.listing-photos td.delete-photo label {
    margin-block-start: var(--s-xxs);
    margin-inline-start: var(--s-xxs);
}

fieldset > table.listing-photos td.delete-photo label::after {
    content: '';
    inset: 0;
    position: absolute;
}

fieldset > table.listing-photos td input:hover::before,
fieldset > table.listing-photos td input:checked::before {
    background-color: var(--c-primary-200);
    content: 'delete';
    font-weight: 500;
    inset-inline-start: calc(100% + 5px);
    min-inline-size: max-content;
    padding: var(--s-2xs) var(--s-xs);
    position: absolute;
}

fieldset > table.listing-photos td.feature-photo input:hover::before,
fieldset > table.listing-photos td.feature-photo input:checked::before {
    content: 'set featured';
}

@media screen and (width < 800px) {
    fieldset > table.listing-photos td.delete-photo input::before {
        content: 'delete';
    }

    fieldset > table.listing-photos td.feature-photo input::before {
        content: 'set featured';
    }
}

fieldset > table.listing-photos td input:hover::before,
fieldset > table.listing-photos td input:checked::before {
    border-end-end-radius: 0;
    border-start-end-radius: 0;
}

fieldset > table.listing-photos td.feature-photo {
    inset-block-end: 0;
    inset-inline-start: 0;
}

fieldset > table.listing-photos td.feature-photo label {
    border-radius: 50%;
    margin-block-end: var(--s-xxs);
    margin-inline-start: var(--s-xxs);
}

fieldset > table.listing-photos td.feature-photo label::after {
    content: '';
    inset-block-end: 0;
    inset-inline-start: 0;
    block-size: 3em;
    inline-size: 3em;
    position: absolute;
}

fieldset > table.listing-photos td.feature-photo label {
    border-radius: 0;
    background-color: var(--c-primary-200);
    margin-block-end: var(--s-xxs);
    margin-inline-start: var(--s-xxs);
}

fieldset > table.listing-photos td + td label {
    border: 3px solid var(--c-primary-200);
    padding: 0;
}

fieldset > table.listing-photos td + td label span {
    /* PATTERN: Hide visually */
    inset-block-start: -999vw;
    position: absolute;
}

/*
 * ==============================
 * == COMPONENT (user-nav.php) ==
 * ==============================
 */

.user-nav {
    border: 1px solid var(--c-neutral-600);
    padding-block: var(--t-xxs);
    padding-inline: var(--s-sm);
}

.user-nav a {
    color: var(--c-primary-700);
    font-weight: 500;
    text-decoration: underline;
}

.user-nav h2 {
    font-weight: 600;
}

.user-nav.signed-out {
    background-color: var(--c-primary-100);
    border: none;
    border-block-start: 2px solid var(--c-primary-300);
}

.user-nav.signed-out form {
    margin-block-start: var(--t-xxs);
}

.user-nav.signed-out form input[type='submit'],
.user-nav.signed-out form input[type='submit'] + a {
    margin-block-start: var(--t-xxs);
    padding: var(--t-2xs) var(--t-sm);
}

.user-nav.signed-in h2 {
    /* PATTERN: Hide visually */
    inset-block-start: -999vw;
    position: absolute;
}

.user-nav.signed-in p span {
    font-weight: 600;
}

.user-nav.signed-in menu {
    display: flex;
    flex-direction: column;
    gap: var(--t-3xs);
}

.user-nav.signed-in p + menu {
    padding-block-start: var(--t-3xs);
}

.user-nav.signed-in li:last-of-type {
    margin-block-start: var(--t-md);
}

/*
 * =========================================
 * == COMPONENT (listing-search-form.php) ==
 * =========================================
 */

.listing-search-form {
    display: flex;
    gap: var(--s-sm);
    flex-wrap: wrap;
}

.listing-search-form > label:nth-of-type(2) {
    flex-grow: 1;
}

.listing-search-form > button {
    margin: 0;
}

.listing-search-form > span {
    flex-basis: 100%;
    align-self: center;
}

@media screen and (width < 800px) {
    .listing-search-form > span {
        flex-basis: unset;
    }
}

.listing-search-form > span > a {
    color: var(--c-primary-700);
    font-weight: 500;
    margin: 0;
    text-decoration: underline;
}

/*
 * ==================================
 * == COMPONENT (listings-table.php) ==
 * ==================================
 */

.listings-table {
    inline-size: 100%;
}

.listings-table thead {
    /* PATTERN: Hide visually */
    inset-block-start: -999vw;
    position: absolute;
}

.listings-table tbody {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14em, 1fr));
    gap: var(--t-lg) var(--s-sm);
}

.listings-table tr {
    display: grid;
    grid-template:
        'thumbnail thumbnail' 1fr
        'title     title' calc(var(--t-md) * var(--body--line-height) * 2)
        'date      location'
        / 1fr;
    position: relative; /* For the nested `a` to position itself to */
}

.listings-table td.thumbnail {
    align-items: center;
    aspect-ratio: 1.4; /* To maintain thumbnail size even without an image */
    background-color: var(--c-neutral-200);
    display: flex;
    grid-area: thumbnail;
    justify-content: center;
    margin-block-end: var(--t-xxs);
    overflow: hidden;
    position: relative;
}

.listings-table td.thumbnail img {
    aspect-ratio: 1.4;
    object-fit: contain;
    transform: scale(1.1);
    z-index: 2;
}

/* TODO(max): Replace this element with a blur hash */
.listings-table td.thumbnail img.fill-image {
    filter: blur(10px) brightness(90%);
    inset: 0;
    object-fit: cover;
    position: absolute;
    transform: scale(110%);
    z-index: 1;
}

/* TODO(max): Restrict the maximum height of the title to 2 lines, then add an ellipses on overflow */
.listings-table td.title {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    flex-grow: 1;
    font-weight: 500;
    grid-area: title;
    overflow: clip;
    word-break: break-word;
}

.listings-table td.title a::after {
    /* PATTERN: Overlay anchor */
    content: '';
    inset: 0;
    position: absolute;
    z-index: 10; /* Addition to the pattern */
}

.listings-table td.location,
.listings-table td.asking-price,
.listings-table td.published-date {
    grid-area: thumbnail;
    margin: 1px; /* Accommodate the border */
    padding-block-end: var(--s-3xs);
    padding-block-start: var(--s-2xs);
    position: absolute;
    z-index: 3;
}

/* TODO(max): Ensure the following can gracefully handle the entire possible length of a city/state */
.listings-table td.location,
.listings-table td.published-date {
    inset-inline-end: 0;
}

.listings-table td.location span,
.listings-table td.published-date time {
    background-color: hsl(212, 35%, 10%, 0.6); /* --c-neutral-900 with alpha channel */
    color: var(--c-neutral-100);
    font-size: var(--t-sm);
    font-weight: 500;
    margin-inline-end: var(--s-xxs);
    padding: var(--s-3xs) var(--s-2xs);
}

.listings-table td.asking-price,
.listings-table td.published-date {
    inset-block-end: var(--t-xxs); /* Accommodate the block-end thumbnail margin */
}

.listings-table td.location {
    inset-block-start: 0;
}

.listings-table td.location span {
    margin-block-start: var(--s-xs);
}

/* TODO(max): Check on tabular figures options or anything able to fix the vertical misalignment of the text */
.listings-table td.asking-price {
    background-color: hsl(215, 100%, 96%, 0.9);
    border: 1px solid var(--c-primary-300);
    border-radius: 999px;
    color: var(--c-primary-800);
    font-weight: 600;
    inset-block-end: var(--t-xs);
    inset-inline-start: var(--s-2xs);
    padding-inline: var(--s-xs);
}

/* TODO(max): Check on tabular figures options or anything able to fix the vertical misalignment of the text */
.listings-table td.asking-price::first-letter {
    baseline-shift: 2px;
}

/*
 * ====================================
 * == COMPONENT (blogroll-posts.php) ==
 * ====================================
 */

.blogroll-post {
    background-color: var(--c-primary-100);
    display: flex;
    flex-direction: column;
    position: relative;
}

.blogroll-post img:first-of-type {
    aspect-ratio: 7 / 5;
    flex-shrink: 0;
    inline-size: 100%;
    object-fit: cover;
}

.blogroll-post > div {
    align-items: start;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    margin-block-start: 0;
    padding: var(--t-lg);
}

.blogroll-post > div > h3 {
    color: var(--c--heading-1);
    font-size: var(--t-xxl);
}

.blogroll-post > div > h3 + .metadata {
    color: var(--c-neutral-600);
}

.blogroll-post > div > h3 + .metadata.future {
    background-color: var(--c-accent-200);
    border-inline-start: 2px solid var(--c-accent-500);
    border-start-end-radius: 999px;
    border-end-end-radius: 999px;
    color: var(--c-accent-900);
    padding: var(--s-xxs) var(--s-md) var(--s-xxs) var(--s-xs);
}

.blogroll-post > div > h3 + .metadata.future > time {
    font-weight: 600;
}

.blogroll-post > div > h3 + .metadata + .preview-text > p {
    margin-block-start: 0;
}

.blogroll-post > div > a:last-of-type {
    align-items: center;
    background-color: var(--c-primary-200);
    border-radius: 999px;
    color: var(--c-primary-900);
    display: inline-flex;
    font-weight: 500;
    gap: var(--s-sm);
    padding-block: var(--t-xs);
    padding-inline: var(--t-lg);
    text-decoration: none;
}

.blogroll-post > div > a:last-of-type::after {
    /* PATTERN: Overlay anchor */
    content: '';
    inset: 0;
    position: absolute;
}

/*
 * ==================================
 * == COMPONENT (sign-in-form.php) ==
 * ==================================
 */

#css-bot-check-field {
    /* PATTERN: Hide visually */
    inset-block-start: -999vw;
    position: absolute;
    scale: 0;
}

form[action="/sign-in"] > span:last-of-type {
    margin-inline-start: var(--s-xxs);
}

form[action="/sign-in"] > span:last-of-type a {
    color: var(--c-primary-700);
    font-weight: 500;
    text-decoration: underline;
}

/*
 * ===============
 * == TEMPLATES ==
 * ===============
 */

/*
 * BLOGROLL/INDEX, BLOGROLL/SHOW
 */

[data-template^='blogroll/'] main,
[data-template^='pages/']    main {
    max-inline-size: 720px; /* TODO(max): Replace with non-px value */
}

[data-template^='blogroll/'] article,
[data-template^='pages/']    article {
    background-color: var(--c-primary-100);
    border-block-start: 2px solid var(--c-primary-300);
    padding-block-end: var(--t-lg);
    padding-inline: var(--s-md);
}

[data-template^='blogroll/'] article > h2:first-child,
[data-template^='pages/']    article > h2:first-child {
    margin-block-start: var(--t-xxs);
}

[data-template='blogroll/show'] article > img:first-child {
    margin-block-start: -2px;                        /* Match accent border */
    margin-inline: calc(var(--t-md) * -1);           /* Match gutter */
    max-inline-size: calc(100% + (var(--t-md) * 2)); /* Match width + gutter */
}

[data-template='blogroll/show'] article > img:first-child + h2 {
    margin-block-start: var(--t-xxs);
}

[data-template='blogroll/index'] main > div:first-of-type {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--t-xs);
    justify-content: space-between;
}

[data-template='blogroll/index'] main > div:first-of-type h2 {
    font-family: var(--heading--font-family);
    font-size: var(--t-2xl);
    color: var(--c-primary-800);
}

[data-template='blogroll/index'] main > div + div {
    display: flex;
    flex-direction: column;
    gap: var(--t-md);
    margin-block-start: var(--t-md);
}

[data-template='blogroll/index'] main > div + p {
    background-color: var(--c-neutral-200);
    margin-block-start: var(--t-md);
    padding: var(--s-sm);
}

[data-template='blogroll/index'] main h3 + .metadata,
[data-template='blogroll/show']  main h2 + p {
    color: var(--c-neutral-600);
    margin-block-start: var(--t-sm);
}

[data-template='blogroll/show'] .metadata.future {
    background-color: var(--c-accent-200);
    border-inline-start: 2px solid var(--c-accent-500);
    border-start-end-radius: 999px;
    border-end-end-radius: 999px;
    color: var(--c-accent-900);
    display: inline-block;
    padding: var(--s-xxs) var(--s-md) var(--s-xxs) var(--s-xs);
}

[data-template='blogroll/show'] .metadata.future > time {
    font-weight: 600;
}

[data-template='blogroll/show'] .metadata + .preview-text > p {
    margin-block-start: 0;
}

[data-template='blogroll/index'] main h3 + .metadata + .preview-text > p {
    margin-block-start: 0;
}

[data-template='blogroll/index'] main h3 ~ a,
[data-template='blogroll/show']  main h3 ~ a {
    color: var(--c-primary-700);
    display: block;
    font-weight: 500;
    text-decoration: underline;
}

[data-template='blogroll/show'] main h3 ~ a {
    margin-block-start: var(--t-xs);
}

[data-template='blogroll/show'] article > div:last-of-type,
[data-template='pages/show']    article > div:last-of-type {
    align-items: baseline;
    display: flex;
    flex-direction: row;
    gap: var(--s-sm);
}

[data-template='blogroll/show'] article > div:last-of-type *,
[data-template='pages/show']    article > div:last-of-type * {
    margin-block-start: unset;
}

[data-template='blogroll/show'] article > div:last-of-type a.button:last-of-type,
[data-template='pages/show']    article > div:last-of-type input {
    color: var(--c-primary-900);
    background-color: var(--c-primary-200);
    margin-inline-start: var(--s-xxs);
}

[data-template='blogroll/show'] article > div:last-of-type a.button:last-of-type:hover,
[data-template='pages/show']    article > div:last-of-type input:hover {
    background-color: var(--c-primary-300);
}

[data-template='blogroll/show'] blockquote.instagram-media,
[data-template='pages/show'] blockquote.instagram-media {
    margin-block: var(--t-md) !important;
}

@media screen and (width <= 800px) {
    [data-template='blogroll/show'] main,
    [data-template='pages/show'] main {
        font-size: var(--type-scale-md);
        max-inline-size: 100%;
        padding: 0;
    }

    [data-template='blogroll/show'] article,
    [data-template='pages/show']    article {
        background-color: var(--c-neutral-100);
        border-block-start: none;
        padding-block-end: 0;
        padding-inline: 0;
    }

    [data-template='blogroll/show'] article > *,
    [data-template='pages/show']    article > * {
        padding-inline: var(--s-sm);
    }

    [data-template='blogroll/show'] article > img:first-child,
    [data-template='pages/show']    article > img:first-child {
        margin-block-start: 0;
        margin-inline: 0;
        max-inline-size: 100%;
        padding-inline: 0;
    }

    [data-template='blogroll/show'] .metadata.future {
        margin-inline: var(--s-sm);
    }
}

/*
 * BLOGROLL/NEW, BLOGROLL/EDIT,
 * PAGES/EDIT
 */

@media screen and (width > 800px) {
    [data-template='blogroll/new'] main > section,
    [data-template='blogroll/edit'] main > section,
    [data-template='pages/edit'] main > section {
        background-color: var(--c-neutral-200);
        padding: var(--s-md);
    }
}

/* NOTE: The only state(s) currently implemented for the notice are error-related, hence the limited palette */
[data-template='blogroll/new'] main > section.notice,
[data-template='blogroll/edit'] main > section.notice,
[data-template='pages/edit'] main > section.notice {
    background-color: var(--c-accent-200);
    color: var(--c-accent-900);
}

[data-template='blogroll/new'] main > section:nth-of-type(2),
[data-template='blogroll/edit'] main > section:nth-of-type(2),
[data-template='pages/edit'] main > section:nth-of-type(2) {
    margin-block-start: var(--t-md);
}

[data-template='blogroll/new'] form > label,
[data-template='blogroll/edit'] form > label,
[data-template='pages/edit'] form > label {
    inline-size: 48em;
    max-inline-size: 100%;
}

[data-template='blogroll/new'] form label.multiline-text-field-label,
[data-template='blogroll/edit'] form label.multiline-text-field-label,
[data-template='pages/edit'] form label.multiline-text-field-label {
    block-size: 36em;
    max-block-size: max-content;
}

/*
 * HOME/INDEX
 */

[data-template='home/index'] main {
    display: flex;
    flex-direction: column;
    gap: var(--t-xl);
    padding-block-end: var(--t-md);
    padding-inline: var(--s-md);
}

[data-template='home/index'] main > div:first-of-type {
    display: grid;
    gap: var(--s-sm);
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    margin-inline: calc(var(--s-md) * -1);
}

[data-template='home/index'] main > div:first-of-type > input {
    display: none;
}

[data-template='home/index'] main > div:first-of-type section {
    background-color: var(--c-primary-100);
    border-block-start: 2px solid var(--c-primary-300);
    padding: var(--s-md);
}

[data-template='home/index'] main h2,
[data-template='home/index'] [name='select-tab'] + label {
    color: var(--c-primary-800);
    font: var(--heading--font);
    font-size: var(--t-xxl-2xl);
    letter-spacing: 0.02em;
}

[data-template='home/index'] [name='select-tab'] + label {
    display: none;
    text-align: center;
    padding: var(--s-sm);
}

@media screen and (width <= 800px) {
    [data-template='home/index'] main > div:first-of-type {
        grid-column-gap: var(--s-sm);
        grid-row-gap: 0;
        grid-template-rows: auto 1fr;
        overflow: hidden;
    }

    [data-template='home/index'] main > div:first-of-type section {
        grid-column: 1 / 3;
        grid-row: 2 / 3;
        border-block-end: 1px solid var(--c-primary-200);
        border-block-start: none;
    }

    [data-template='home/index'] [name='select-tab'] + label {
        background-color: var(--c-primary-200);
        border-block-end: none;
        border-block-start: 2px solid var(--c-primary-200);
        display: unset;
        position: relative;
    }

    [data-template='home/index'] [name='select-tab'] + label::before {
        content: '';
        position: absolute;
        inset: 0;
        inset-inline: calc(calc(var(--s-sm) + 1px) * -1);
    }

    [data-template='home/index'] [name='select-tab']:checked + label {
        background-color: var(--c-primary-100);
        border-block-start: 2px solid var(--c-primary-300);
        z-index: -1;
    }

    [data-template='home/index'] [name='select-tab']:checked + label::before {
        z-index: -1;
    }

    [data-template='home/index'] main > div:first-of-type > label:first-of-type {
        margin-inline-start: var(--s-sm);
    }

    [data-template='home/index'] main > div:first-of-type > label:last-of-type {
        margin-inline-end: var(--s-sm);
    }

    [data-template='home/index'] #select-tab--buy-a-boat ~ #buy-a-boat h2,
    [data-template='home/index'] #select-tab--sell-a-boat ~ #sell-a-boat h2 {
        /* PATTERN: Hide visually */
        inset-block-start: -999vw;
        position: absolute;
    }

    [data-template='home/index'] #select-tab--buy-a-boat:checked ~ #buy-a-boat,
    [data-template='home/index'] #select-tab--sell-a-boat:checked ~ #sell-a-boat {
        z-index: 10;
    }
}

[data-template='home/index'] #buy-a-boat,
[data-template='home/index'] #sell-a-boat {
    display: flex;
    flex-direction: column;
    gap: var(--t-xs);
}

[data-template='home/index'] #buy-a-boat button:last-of-type::after,
[data-template='home/index'] #sell-a-boat .button:last-of-type::after {
    content: url('/static/icons/streamline/Line-Arrow-Right-Large-1--Streamline-Sharp.svg');
    block-size: var(--t-md);
}

[data-template='home/index'] #buy-a-boat .listing-search-form {
    row-gap: var(--s-md);
}

[data-template='home/index'] #buy-a-boat .listing-search-form > button,
[data-template='home/index'] #buy-a-boat .listing-search-form > span {
    flex-basis: max-content;
}

[data-template='home/index'] #sell-a-boat {
    align-items: start;
}

[data-template='home/index'] #sell-a-boat ol {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-around;
}

[data-template='home/index'] #sell-a-boat ol li span {
    font-weight: 600;
}

[data-template='home/index'] #sell-a-boat * + *,
[data-template='home/index'] #sell-a-boat a.button {
    margin: 0;
}

[data-template='home/index'] #sell-a-boat div {
    align-items: center;
    display: flex;
    gap: var(--s-sm);
}

[data-template='home/index'] main > section {
    position: relative;
}

[data-template='home/index'] main > section:not(:last-of-type) {
    border-block-end: 1px solid var(--c-neutral-400);
    padding-block-end: var(--t-md);
}

[data-template='home/index'] main > section h2 {
    font-size: var(--t-xl);
}

[data-template='home/index'] main > section > a:first-of-type {
    block-size: var(--t-xl);
    color: var(--c-primary-700);
    display: inline-block;
    font-weight: 600;
    inset-block-start: 0;
    inset-inline-end: 0;
    position: absolute;
    text-decoration: underline;
}

[data-template='home/index'] main > section > div:last-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-block: var(--t-lg);
}

[data-template='home/index'] #newest-listings > .listings-table {
    margin-block-start: var(--t-lg);
}

[data-template='home/index'] #newest-listings > h2 + a + p,
[data-template='home/index'] #recent-posts > p {
    background-color: var(--c-neutral-200);
    margin-block-start: var(--t-md);
    padding: var(--s-sm);
}

[data-template='home/index'] #recent-posts > div {
    display: flex;
    flex-direction: column;
    gap: var(--t-lg);
}

[data-template='home/index'] #recent-posts > div:first-of-type {
    margin-block-start: var(--t-lg);
}

@media screen and (width > 1080px) {
    [data-template='home/index'] .blogroll-post {
        flex-direction: row;
    }

    [data-template='home/index'] .blogroll-post img:first-of-type {
        inline-size: 40%;
    }

    [data-template='home/index'] .blogroll-post > div {
        border-block-start: 2px solid var(--c-primary-300);
    }
}

[data-template='home/index'] footer {
    padding-inline: var(--s-md);
}

[data-template='home/index'] main > section.notice {
    border-block-end: 0;
    padding: var(--t-md);
    margin-inline: calc(var(--s-md) * -1);
}

/*
 * LISTINGS/INDEX
 */

[data-template='listings/index'] main {
    padding-inline: var(--s-md);
}

[data-template='listings/index'] main > section + section {
    margin-block-start: var(--t-md);
}

[data-template='listings/index'] #search {
    background-color: var(--c-primary-100);
    border-block-start: 2px solid var(--c-primary-300);
    margin-inline: calc(var(--s-md) * -1);
    padding: var(--s-md);
}

[data-template='listings/index'] #search h2 {
    color: var(--c--heading-1);
    font: var(--heading--font);
}

[data-template='listings/index'] #search .listing-search-form {
    margin-block-start: var(--t-md);
}

[data-template='listings/index'] #search .listing-search-form .actions :first-child {
    align-self: stretch;
}

[data-template='listings/index'] #search .listing-search-form .actions button {
    padding-inline: var(--s-md);
}

[data-template='listings/index'] h3 {
    font-weight: 500;
}

[data-template='listings/index'] main .listings-table {
    margin-block-start: var(--t-md);
}

[data-template='listings/index'] main section:last-of-type p:last-of-type {
    /* Overrides the "no results" text of the listings table */
    background-color: var(--c-neutral-200);
    margin-block-start: var(--t-md);
    padding: var(--s-sm);
}

[data-template='listings/index'] footer {
    padding-inline: var(--s-md);
}

@media screen and (width <= 800px) {
    [data-template='listings/index'] main {
        padding-block-start: 0;
        padding-inline: var(--s-sm);
    }

    [data-template='listings/index'] #search {
        border-block-start: none;
        margin-inline: calc(var(--s-sm) * -1);
        padding-inline: var(--s-sm);
    }
}

/*
 * LISTINGS/NEW, LISTINGS/EDIT
 */

[data-template='listings/new'] h2,
[data-template='listings/edit'] h2 {
    font-size: var(--t-2xl);
}

/* NOTE: The only state(s) currently implemented for the notice are error-related, hence the limited palette */
[data-template='listings/new'] main > section.notice,
[data-template='listings/edit'] main > section.notice {
    background-color: var(--c-accent-200);
    border-block-start: 2px solid var(--c-accent-500);
    color: var(--c-accent-900);
}

[data-template='listings/new'] main > section:nth-of-type(2),
[data-template='listings/edit'] main > section:nth-of-type(2) {
    margin-block-start: var(--t-md);
}

@media screen and (width > 800px) {
    [data-template='listings/new'] main > section,
    [data-template='listings/edit'] main > section {
        background-color: var(--c-primary-100);
        border-block-start: 2px solid var(--c-primary-300);
        padding: var(--s-md);
    }
}

/* TODO(max): Target the specific form below */

[data-template='listings/new'] form h3,
[data-template='listings/edit'] form h3 {
    border-block-start: 1px solid var(--c-neutral-500);
    padding-block-start: var(--t-3xs);
    position: relative;
}

[data-template='listings/new'] form h3:first-of-type,
[data-template='listings/edit'] form h3:first-of-type {
    margin-block-start: var(--t-lg);
}

[data-template='listings/new'] form h3:not(section.optional > h3)::after,
[data-template='listings/edit'] form h3:not(section.optional > h3)::after {
    content: 'required*';
    font: var(--body--font);
    inset-inline-end: 0;
    letter-spacing: initial;
    position: absolute;
    text-align: right;
}

[data-template='listings/new'] form label:not([for]),
[data-template='listings/edit'] form label:not([for]) {
    max-inline-size: max-content;
}

[data-template='listings/new'] form label.multiline-text-field-label,
[data-template='listings/edit'] form label.multiline-text-field-label {
    block-size: 16em;
    inline-size: 36em;
    max-block-size: max-content;
    max-inline-size: 100%;
}

[data-template='listings/new'] form label.multiline-text-field-label:nth-of-type(1),
[data-template='listings/new'] form label.multiline-text-field-label:nth-of-type(2),
[data-template='listings/edit'] form label.multiline-text-field-label:nth-of-type(1),
[data-template='listings/edit'] form label.multiline-text-field-label:nth-of-type(2) {
    block-size: 8em;
}

[data-template='listings/new'] form > div:last-of-type,
[data-template='listings/edit'] form > div:last-of-type {
    display: flex;
    flex-wrap: wrap;
    gap: var(--t-md) var(--s-md);
}

[data-template='listings/new'] form input[type='submit'],
[data-template='listings/edit'] form input[type='submit'] {
    flex-shrink: 0;
    margin: 0;
}

[data-template='listings/new'] form input[type='submit'] + input[type='submit'],
[data-template='listings/edit'] form input[type='submit'] + input[type='submit'] {
    color: var(--c-primary-900);
    background-color: var(--c-primary-200);
}

[data-template='listings/new'] form input[type='submit'] + input[type='submit']:hover,
[data-template='listings/edit'] form input[type='submit'] + input[type='submit']:hover {
    background-color: var(--c-primary-300);
}

[data-template='listings/edit'] form input[type='submit'] + a.secondary-action {
    margin-block-start: 0;
}

/*
 * LISTINGS/SHOW
 */

[data-template='listings/show'] main {
    display: grid;
    grid-column-gap: var(--s-md);
    grid-template:
        'notice          notice'
        'photos          photos'
        'title           sidebar'
        'listing-details sidebar'
        'description     sidebar'
        'message-form    sidebar'
        'seller-actions  sidebar' 1fr
        / 2fr 1fr;
}

[data-template='listings/show'] main > section.notice {
    grid-area: notice;
    margin-block-end: var(--t-md);
}

[data-template='listings/show'] main > h2 {
    grid-area: title;
    font: var(--heading--font);
    text-wrap: pretty;
}

[data-template='listings/show'] section.listing-photos {
    aspect-ratio: 2;
    display: grid;
    gap: var(--t-3xs);
    grid-area: photos;
    grid-template:
        'focused-photo all-photos'
        / 7fr 3fr;
    margin-block-end: var(--t-md);
}

[data-template='listings/show'] section.listing-photos > h3 {
    /* PATTERN: Hide visually */
    inset-block-start: -999vw;
    position: absolute;
}

[data-template='listings/show'] section.listing-photos .focused-photo {
    aspect-ratio: 1.4;
    block-size: 100%;
    grid-area: focused-photo;
    inline-size: 100%;
    position: relative;
}

[data-template='listings/show'] section.listing-photos .focused-photo img {
    max-block-size: 100%;
    max-inline-size: 100%;
}

[data-template='listings/show'] section.listing-photos .focused-photo iframe {
    position: absolute;
    block-size: 100%;
    inline-size: 100%;
}

[data-template='listings/show'] section.listing-photos .all-photos {
    border-block-end: 1px solid var(--c-neutral-300);
    display: grid;
    grid-area: all-photos;
    gap: var(--t-3xs);
    grid-template-columns: 1fr 1fr;
    align-content: start;
    overflow-y: auto; /* NOTE: Logical properties overflow-block/overflow-inline don't seem to have an effect */
    padding-block-end: var(--t-3xs);
}

[data-template='listings/show'] section.listing-photos img:first-of-type {
    aspect-ratio: 1;
    background-color: var(--c-neutral-200);
    border: 1px solid var(--c-neutral-300);
    inline-size: 100%;
    object-fit: contain;
}

[data-template='listings/show'] section.listing-photos a.video-thumbnail div {
    aspect-ratio: 1;
    display: grid;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

[data-template='listings/show'] section.listing-photos a.video-thumbnail div::before {
    background-color: hsl(214, 70%, 99%, 0.5);
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
}

[data-template='listings/show'] section.listing-photos a.video-thumbnail img {
    grid-column: 1 / 1;
    grid-row: 1 / 1;
}

[data-template='listings/show'] section.listing-photos a.video-thumbnail img:first-of-type {
    filter: blur(5px);
    object-fit: cover;
    transform: scale(1.5);
}

[data-template='listings/show'] section.listing-photos a.video-thumbnail img + img {
    margin: auto;
    opacity: 0.35;
    z-index: 3;
}

[data-template='listings/show'] section.listing-details {
    grid-area: listing-details;
    margin-block: var(--t-sm);
}

[data-template='listings/show'] section.listing-details > h3 {
    /* PATTERN: Hide visually */
    inset-block-start: -999vw;
    position: absolute;
}

[data-template='listings/show'] section.listing-details div {
    display: inline-block;
}

[data-template='listings/show'] section.listing-details .listing-price {
    background-color: var(--c-primary-200);
    padding-block: calc(var(--t-3xs) / 2);
    padding-inline: var(--s-xs);
    margin-inline-end: var(--s-xs);
}

[data-template='listings/show'] section.listing-details .listing-asking-price {
    font-weight: 600;
}

[data-template='listings/show'] section.listing-details .listing-location {
    font-weight: 500;
}

[data-template='listings/show'] section.description {
    grid-area: description;
}

[data-template='listings/show'] section.description > h3:first-of-type {
    /* PATTERN: Hide visually */
    inset-block-start: -999vw;
    position: absolute;
}

[data-template='listings/show'] section.description > h3:first-of-type + p {
    margin-block-start: unset;
}

[data-template='listings/show'] .details {
    grid-area: sidebar;
}

[data-template='listings/show'] section.boat-details,
[data-template='listings/show'] section.seller-details {
    background-color: var(--c-primary-100);
    padding: var(--t-xs);
}

[data-template='listings/show'] section.seller-details {
    margin-block-start: var(--t-xs);
}

[data-template='listings/show'] section.seller-details div:first-of-type {
    margin-block-start: var(--t-xs);
}

[data-template='listings/show'] section.seller-details div:last-of-type {
    margin-block-end: var(--t-xs);
}

[data-template='listings/show'] section.seller-details a {
    color: var(--c-primary-700);
    font-weight: 500;
    text-decoration: underline;
}

[data-template='listings/show'] section.seller-details div:first-of-type a {
    font-weight: 600;
    text-decoration: none;
}

[data-template='listings/show'] section.boat-details h3 {
    border-block-end: 1px solid var(--c-neutral-400);
    font-weight: 600;
    padding-block-end: var(--t-xxs);
}

[data-template='listings/show'] section.boat-details h4,
[data-template='listings/show'] section.seller-details h3 {
    font-weight: 600;
}

[data-template='listings/show'] dl {
    margin-block-start: var(--t-xxs);
}

[data-template='listings/show'] dd {
    font-weight: 600;
}

[data-template='listings/show'] dl + h3 {
    margin-block-start: var(--t-md);
}

[data-template='listings/show'] dl + h4,
[data-template='listings/show'] dl + h4 + p {
    margin-block-start: var(--t-2xs);
}

[data-template='listings/show'] section.message-form {
    grid-area: message-form;
}

[data-template='listings/show'] section.message-form .seller-email-address {
    font-weight: 600;
}

[data-template='listings/show'] section.message-form label {
    inline-size: 100%;
    max-inline-size: 32em;
}

[data-template='listings/show'] section.message-form label.multiline-text-field-label {
    block-size: 8em;
    max-block-size: max-content;
}

[data-template='listings/show'] section.seller-actions {
    grid-area: seller-actions;
}

[data-template='listings/show'] section.seller-actions > a.secondary-action {
    margin-inline-start: var(--s-sm);
}

[data-template='listings/show'] section.seller-actions > div {
    background-color: var(--c-primary-100);
    border-block-start: 2px solid var(--c-primary-300);
    margin-block-start: var(--t-xl);
    padding: var(--s-md);
}

[data-template='listings/show'] section.seller-actions > div > p:first-of-type {
    font-weight: 600;
}

[data-template='listings/show'] section.seller-actions input[type='submit'] {
    background-color: var(--c-primary-200);
    color: var(--c-primary-900);
    margin-block-start: 0;
}

@media screen and (width <= 1300px) {
    [data-template='listings/show'] main {
        grid-template:
            'notice'
            'photos'
            'title'
            'listing-details'
            'description'
            'sidebar'
            'message-form'
            'seller-actions'
            / 1fr;
    }

    [data-template='listings/show'] section.listing-photos {
        aspect-ratio: unset;
        grid-template:
            'focused-photo'
            'all-photos' max-content
            / 100%;
    }

    [data-template='listings/show'] section.listing-photos .all-photos {
        display: flex;
        border-block-end: none;
        border-inline-start: 1px solid var(--c-neutral-300);
        margin-inline-end: calc(var(--s-md) * -1); /* Match the gutter on `main` */
        overflow-x: auto;
        overflow-y: hidden;
        padding-inline-end: var(--s-md); /* Match the gutter on `main` */
        padding-block-end: 0;
    }

    [data-template='listings/show'] section.listing-photos .all-photos div {
        flex-basis: max-content;
    }

    [data-template='listings/show'] section.listing-photos .all-photos img:first-of-type {
        flex: 0 0;
        inline-size: 20vw;
        margin-inline-start: -1px; /* Match the border */
        min-inline-size: 20vw;
    }

    [data-template='listings/show'] .details {
        margin-block-start: var(--t-xl);
    }
}

@media screen and (width <= 800px) {
    [data-template='listings/show'] main {
        padding-inline: var(--s-sm);
    }

    [data-template='listings/show'] section.listing-photos {
        margin-inline: calc(var(--s-sm) * -1); /* Match the gutter on `main` */
        overflow-x: hidden;
        padding-inline: var(--s-sm); /* Match the gutter on `main` */
    }

    [data-template='listings/show'] section.listing-photos .all-photos {
        border-inline-start: none;
        margin-inline: calc(var(--s-sm) * -1); /* Match the gutter on `main` */
        padding-inline: var(--s-sm); /* Match the gutter on `main` */
    }

    [data-template='listings/show'] section.listing-photos .all-photos img:first-of-type {
        margin-inline-start: 0;
    }
}

/*
 * PUBLISHED-LISTINGS/NEW
 */

@media screen and (width > 800px) {
    [data-template='published-listings/new'] main {
        background-color: var(--c-neutral-200);
        padding: var(--s-md);
    }
}

[data-template='published-listings/new'] form h3 {
    border-block-start: 1px solid var(--c-neutral-500);
    padding-block-start: var(--t-3xs);
}

[data-template='published-listings/new'] form h3:first-of-type {
    margin-block-start: var(--t-lg);
}

[data-template='published-listings/new'] form label:not(fieldset label) {
    max-inline-size: max-content;
}

[data-template='published-listings/new'] .listing-tiers {
    border-inline-start: none;
    display: grid;
    gap: var(--s-sm);
    grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
    padding-inline-start: 0;
}

[data-template='published-listings/new'] form .listing-tiers legend {
    /* PATTERN: Hide visually */
    inset-block-start: -999vw;
    position: absolute;
}

[data-template='published-listings/new'] form .listing-tiers label {
    margin-block-start: 0;
}

[data-template='published-listings/new'] form label + p {
    font-size: var(--t-md);
    margin-block-start: var(--t-xl);
}

[data-template='published-listings/new'] form dl dt:last-of-type,
[data-template='published-listings/new'] form dl dd:last-of-type {
    font-weight: 600;
}

[data-template='published-listings/new'] form span:last-of-type {
    margin-inline-start: var(--s-2xs);
}

[data-template='published-listings/new'] form span:last-of-type a {
    color: var(--c-primary-700);
    font-weight: 500;
    margin: 0;
    text-decoration: underline;
}

/*
 * SESSIONS/NEW, SESSIONS/SHOW
 */

[data-template='sessions/new'] main form {
    max-inline-size: 24em;
}

[data-template='sessions/new'] main > p:first-of-type > span,
[data-template='sessions/show'] main > p:first-of-type > span {
    font-weight: 600;
}

[data-template='sessions/show'] main form {
    margin-block-start: var(--t-lg);
}

[data-template='sessions/show'] main form label {
    inline-size: max-content;
}

[data-template='sessions/show'] main form span:last-of-type {
    margin-inline-start: var(--s-2xs);
}

[data-template='sessions/show'] main form span:last-of-type a {
    color: var(--c-primary-700);
    font-weight: 500;
    text-decoration: underline;
}

/*
 * SESSIONS/UPDATE
 */

[data-template='sessions/update'] main form input[type='submit'] {
    margin-block-start: 0;
}

/*
 * SETTINGS/EDIT
 */

@media screen and (width > 800px) {
    [data-template='settings/edit'] main {
        background-color: var(--c-primary-100);
        border-block-start: 2px solid var(--c-primary-300);
        padding-block: var(--t-lg);
        padding-inline: var(--s-md);
    }
}

[data-template='settings/edit'] form label:not([for]) {
    max-inline-size: max-content;
}

/*
 * USERS/NEW
 */

[data-template='users/new'] form label {
    max-inline-size: max-content;
}

[data-template='users/new'] form #agree-to-emails-label,
[data-template='users/new'] form #agree-to-terms-label {
    background-color: var(--c-primary-100);
    border: none;
    flex-direction: row;
    gap: var(--t-2xs);
    padding-inline-end: var(--t-xs);
}

[data-template='users/new'] form #agree-to-terms-label {
    margin-block-start: var(--t-lg);
}

[data-template='users/new'] form #agree-to-emails-label a,
[data-template='users/new'] form #agree-to-terms-label a {
    color: var(--c-primary-700);
    font-weight: 500;
    text-decoration: underline;
}

/*
 * USERS/SHOW
 */

[data-template='users/show'] main div:first-child {
    display: flex;
    justify-content: space-between;
}

[data-template='users/show'] main div:first-child input[type="submit"] {
    margin-block-start: 0;
}

[data-template='users/show'] main h2,
[data-template='users/show'] main h3 {
    color: var(--c-primary-800);
    font-family: var(--heading--font-family);
    font-size: var(--t-2xl);
    margin-block-start: 0;
}

[data-template='users/show'] main h3 {
    font-size: var(--t-xl);
    margin-block-start: var(--t-3xs);
}

[data-template='users/show'] main section {
    border-block-start: 1px solid var(--c-neutral-400);
    display: flex;
    flex-direction: column;
    margin-block-start: var(--t-lg);
    padding-block-start: var(--t-2xs);
}

[data-template='users/show'] main section > :first-child + * {
    margin-block-start: var(--t-md);
}

[data-template='users/show'] main section:first-of-type > div:first-of-type {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

[data-template='users/show'] main section:first-of-type h3 + a {
    color: var(--c-primary-700);
    display: block;
    font-weight: 500;
    margin-block-start: var(--t-xs);
    text-align: right;
    text-decoration: underline;
}

[data-template='users/show'] main section > p:last-of-type {
    background-color: var(--c-neutral-200);
    padding: var(--s-sm);
}

/*
 * /DELETE
 */

[data-template$='/delete'] main > p:first-of-type > span:first-of-type {
    font-style: italic;
}

[data-template$='/delete'] main form {
    float: left;
}

[data-template$='/delete'] main form input[type='submit'] {
    margin-block-start: 0;
}

[data-template$='/delete'] main a {
    margin-inline-start: var(--t-sm);
}

/*
 * ADMIN/*
 */

[data-template^='admin/'] {
    grid-template:
        'sidebar admin-nav content' 1fr
        'sidebar admin-nav footer'  min-content
        /
        calc(var(--t-2xl) * 7)
        calc(var(--t-2xl) * 7)
        1fr;
}

[data-template^='admin/'] menu.admin-nav {
    grid-area: admin-nav;
    padding-block: var(--t-sm);
}

[data-template^='admin/'] main {
    padding-block-start: var(--t-sm);
}

[data-template^='admin/'] main h2 {
    color: var(--c-primary-800);
    font: var(--heading--font);
    font-size: var(--t-xxl-2xl);
    margin-block-end: var(--t-3xs);
    letter-spacing: 0.02em;
}

@media screen and (width > 800px) {
    [data-template^='admin/'] header {
        /* PATTERN: Hide visually */
        inset-block-start: -999vw;
        position: absolute;
    }
}

@media screen and (width <= 800px) {
    [data-template^='admin/'] {
        grid-template:
            'header'    min-content
            'admin-nav' min-content
            'content'   minmax(100vh, 1fr)
            'footer'    min-content
            'sidebar'
            /
            100vw;
    }

    [data-template^='admin/'] menu.admin-nav {
        padding: var(--s-sm);
    }
}

/*
 * TinyMCE
 */

form .multiline-text-field-label .tox {
    margin-block-end: calc(var(--t-3xs) * -1);
    margin-block-start: var(--t-3xs);
    margin-inline: calc(var(--s-xs) * -1);
}

form .multiline-text-field-label .tox img {
    margin-inline: 100%;
}

/*
 * Data tables
 */

table.data {
    border-block: 1px solid var(--c-primary-300);
    inline-size: 100%;
    margin-block-start: var(--t-lg);
}

table.data thead tr {
    border-block-end: 1px solid var(--c-primary-300);
    color: var(--c--heading-1);
    font-weight: 600;
}

table.data tr {
    display: grid;
}

table.data tr:nth-child(even) {
    background-color: var(--c-primary-100);
}

table.data th,
table.data td {
    overflow-inline: hidden;
    padding-block: var(--t-2xs);
}

table.data th,
table.data td {
    padding-inline: var(--s-sm);
}

table.data th:last-of-type,
table.data td:last-of-type {
    padding-inline-end: var(--s-sm);
}

table.data a {
    color: var(--c-primary-700);
    font-weight: 500;
    text-decoration: underline;
}

/* Data table variants */

table.data.users tr,
table.data.posts tr,
table.data.pages tr {
    grid-template-columns: 3fr 2fr 14ch;
}

table.data.listings tr {
    grid-template-columns: 9fr 4fr 3fr 3fr;
}

table.data.users td:first-of-type > span,
table.data.listings td:first-of-type > span,
table.data.posts td:first-of-type > span,
table.data.pages td:first-of-type > span {
    font-weight: 500;
}

table.data.users td:first-of-type > div,
table.data.listings td:first-of-type > div,
table.data.posts td:first-of-type > div,
table.data.pages td:first-of-type > div {
    display: flex;
    gap: var(--t-2xs);
    padding-inline-start: var(--s-md);
}

table.data.listings td:first-of-type > div > span {
    color: var(--c-neutral-600);
}

table.data.listings .no-title {
    font-style: italic;
}

@media screen and (width <= 800px) {
    table.data thead {
        display: none;
    }

    table.data.users tr,
    table.data.listings tr,
    table.data.posts tr,
    table.data.pages tr {
        grid-template-columns: 1fr;
    }
}

/*
 * Share button
 */

button.share {
    display: none;
}