/*
    Expensify Demo App
    Style Rules CSS
    Written by Aaron Montoya
    howdy@aaronmontoya.com
*/

/* --------- */
/* BEGIN Global Elements style rules */

:root {
    --color-primary: rgb(247 236 208);
    --color-important: tomato;
    --color-success: rgb(60 179 113 / 86%);
    --color-action-primary: #3e3479;
    --color-action-primary-text: white;
    --color-action-secondary: #8d7fdc;
    --color-action-secondary-text: black;
    --color-action-disabled: #5f5f5f;
    --color-screen-darken-0: rgb(0 0 0 / 0%);
    --color-screen-darken-5: rgb(0 0 0 / 5%);
    --color-screen-darken-9: rgb(0 0 0 / 9%);
    --color-screen-darken-15: rgb(0 0 0 / 15%);
    --color-screen-darken-24: rgb(0 0 0 / 24%);
    --color-screen-darken-33: rgb(0 0 0 / 33%);
    --color-screen-darken-67: rgb(0 0 0 / 67%);
    --color-screen-darken-86: rgb(0 0 0 / 86%);
    --color-screen-darken-100: rgb(0 0 0 / 100%);
    --color-screen-lighten-0: rgb(255 255 255 / 0%);
    --color-screen-lighten-15: rgb(255 255 255 / 15%);
    --color-screen-lighten-33: rgb(255 255 255 / 33%);
    --color-screen-lighten-67: rgb(255 255 255 / 67%);
    --color-screen-lighten-86: rgb(255 255 255 / 86%);
    --color-screen-lighten-100: rgb(255 255 255 / 100%);
    --font-size-base: 16px;
    --viewport-height: 100%;
}

html {
    font-family: sans-serif;
    font-size: var(--font-size-base);
    height: 100vh;
    height: var(--viewport-height);
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

.button {
    appearance: none;
    background-color: var(--color-action-primary);
    background-image: radial-gradient(transparent 45%, var(--color-screen-darken-0) 72%);
    border-radius: 0.25em;
    border: 0;
    box-shadow:
        0 0 0 0 var(--color-screen-lighten-33),
        1px 2px 3px 0 var(--color-screen-darken-33);
    color: var(--color-action-primary-text);
    cursor: pointer;
    font-family: sans-serif;
    font-size: 1em;
    font-weight: bold;
    outline: none;
    padding: 1em;
    position: relative;
    text-transform: uppercase;
    transition:
        background-image 0.1s ease-out 0s,
        box-shadow 0.1s ease-out 0s;
    will-change:
        background-image,
        box-shadow;
}

@media(hover: hover) {
    .button:hover {
        background-image: radial-gradient(transparent 45%, var(--color-screen-darken-5));
        box-shadow:
            0 0 0 3px var(--color-screen-lighten-33),
            2px 3px 3px 3px var(--color-screen-darken-33);
    }
}

.button:focus,
.button:focus-visible {
    background-image: radial-gradient(transparent 45%, var(--color-screen-darken-9));
    box-shadow:
        0 0 0 3px var(--color-screen-lighten-33),
        2px 3px 3px 3px var(--color-screen-darken-33);
}

@media(hover: hover) {
    .button:hover:focus,
    .button:hover:focus-visible {
        background-image: radial-gradient(transparent 45%, var(--color-screen-darken-15));
        box-shadow:
            0 0 0 3px var(--color-screen-lighten-67),
            3px 4px 9px 4px var(--color-screen-darken-33);
    }
}

.button:active,
.button:active:focus,
.button:active:focus-visible {
    background-image: radial-gradient(transparent 45%, var(--color-screen-darken-24));
    box-shadow:
        0 0 0 3px var(--color-screen-lighten-100),
        0 0 0 0 var(--color-screen-darken-33);
}

@media(hover: hover) {
    .button:hover:active,
    .button:hover:active:focus,
    .button:hover:active:focus-visible {
        background-image: radial-gradient(transparent 45%, var(--color-screen-darken-24));
        box-shadow:
            0 0 0 3px var(--color-screen-lighten-100),
            0 0 0 0 var(--color-screen-darken-33);
    }
}

.button[disabled]:not([disabled="false"]) {
    background-color: var(--color-action-disabled);
    box-shadow:
        inset 0 0 0 0 var(--color-screen-darken-67),
        0 0 0 0 var(--color-screen-lighten-0),
        0 0 0 0 var(--color-screen-darken-33);
    cursor: not-allowed;
}

.button[disabled]:not([disabled="false"]):active,
.button[disabled]:not([disabled="false"]):active:focus,
.button[disabled]:not([disabled="false"]):active:focus-visible {
    background-image: radial-gradient(transparent 45%, var(--color-screen-darken-0));
}

.button--secondary {
    background-color: var(--color-action-secondary);
    color: var(--color-action-secondary-text);
}

.button--small {
    margin: auto;
    padding: 0.5625em 0.5625em 0.5em;
}

.button--loading::after {
    animation: loading-button 1s infinite;
    background-image: radial-gradient(circle, var(--color-screen-lighten-100) 0.25em, transparent 0.25em);
    content: '';
    height: 1em;
    left: calc(25% + 0.3675em * 2);
    position: absolute;
    top: calc(100% - 0.675em);
    width: calc(50% - 1.1675em);
}

.button--dismiss {
    box-sizing: content-box;
    height: 2em;
    padding: 0;
    position: absolute;
    right: -1.125em;
    top: -1.125em;
    width: 2em;
}

.button--dismiss::before {
    content: 'X';
    position: absolute;
    transform: scaleX(1.25) translate(calc(-50% + 0.15ch), -50%);
}

.button--add-record-form-toggle {
    z-index: 10;
    position: absolute;
    top: 0.5em;
    left: 50%;
    transform: translateX(-50%);
}

.button--add-record-form-amount-sign-toggle,
.button--login-form-password-mask-toggle {
    background-image: none;
    background: var(--color-screen-lighten-15);
    border-radius: 99em;
    box-shadow:
        0 0 0 1px var(--color-screen-lighten-67),
        0 0 0 1px var(--color-action-secondary);
    color: var(--color-action-secondary-text);
    display: grid;
    font-size: 1.25em;
    grid-template-columns: 1fr 1fr;
    left: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0.675em;
}

.button--add-record-form-amount-sign-toggle::before,
.button--login-form-password-mask-toggle::before {
    background-color: var(--color-action-secondary);
    background-image: radial-gradient(circle, var(--color-screen-lighten-33), transparent 67%);
    border-radius: 99em;
    box-shadow:
        0 0 0 0 var(--color-screen-lighten-33),
        1px 2px 3px 0 var(--color-screen-darken-33);
    content: '';
    height: calc(100% + 0.25em);
    left: calc(0.25em / -2);
    position: absolute;
    top: calc(0.25em / -2);
    width: calc(50% + 0.25em);
    transition:
        box-shadow 0.1s ease-in-out,
        transform 0.3s ease-in-out;
    will-change:
        box-shadow,
        transform;
}

@media(hover: hover) {
    .button--add-record-form-amount-sign-toggle:hover,
    .button--login-form-password-mask-toggle:hover {
        background-image: none;
        box-shadow:
            0 0 0 1px var(--color-screen-lighten-67),
            0 0 0 1px var(--color-action-secondary);
    }
    .button--add-record-form-amount-sign-toggle:hover::before,
    .button--login-form-password-mask-toggle:hover::before {
        box-shadow:
            0 0 0 3px var(--color-screen-lighten-33),
            2px 3px 3px 3px var(--color-screen-darken-33);
    }
}

.button--add-record-form-amount-sign-toggle:focus,
.button--add-record-form-amount-sign-toggle:focus-visible,
.button--login-form-password-mask-toggle:focus,
.button--login-form-password-mask-toggle:focus-visible {
    background-image: none;
    box-shadow:
        0 0 0 1px var(--color-screen-lighten-67),
        0 0 0 1px var(--color-action-secondary);
}

.button--add-record-form-amount-sign-toggle:focus::before,
.button--add-record-form-amount-sign-toggle:focus-visible::before,
.button--login-form-password-mask-toggle:focus:before,
.button--login-form-password-mask-toggle:focus-visible:before {
    box-shadow:
        0 0 0 3px var(--color-screen-lighten-33),
        2px 3px 3px 3px var(--color-screen-darken-33);
}

@media(hover: hover) {
    .button--add-record-form-amount-sign-toggle:hover:focus,
    .button--add-record-form-amount-sign-toggle:hover:focus-visible,
    .button--login-form-password-mask-toggle:hover:focus,
    .button--login-form-password-mask-toggle:hover:focus-visible {
        background-image: none;
        box-shadow:
            0 0 0 1px var(--color-screen-lighten-67),
            0 0 0 1px var(--color-action-secondary);
    }

    .button--add-record-form-amount-sign-toggle:hover:focus::before,
    .button--add-record-form-amount-sign-toggle:hover:focus-visible::before,
    .button--login-form-password-mask-toggle:hover:focus::before,
    .button--login-form-password-mask-toggle:hover:focus-visible::before {
        box-shadow:
            0 0 0 3px var(--color-screen-lighten-67),
            3px 4px 9px 4px var(--color-screen-darken-33);
    }
}

.button--add-record-form-amount-sign-toggle:active,
.button--add-record-form-amount-sign-toggle:active:focus,
.button--add-record-form-amount-sign-toggle:active:focus-visible,
.button--login-form-password-mask-toggle:active,
.button--login-form-password-mask-toggle:active:focus,
.button--login-form-password-mask-toggle:active:focus-visible {
    background-image: none;
    box-shadow:
        0 0 0 1px var(--color-screen-lighten-67),
        0 0 0 1px var(--color-action-secondary);
}

.button--add-record-form-amount-sign-toggle:active::before,
.button--add-record-form-amount-sign-toggle:active:focus::before,
.button--add-record-form-amount-sign-toggle:active:focus-visible::before,
.button--login-form-password-mask-toggle:active::before,
.button--login-form-password-mask-toggle:active:focus::before,
.button--login-form-password-mask-toggle:active:focus-visible::before {
    box-shadow:
        0 0 0 3px var(--color-screen-lighten-100),
        0 0 0 0 var(--color-screen-darken-33);
}

@media(hover: hover) {
    .button--add-record-form-amount-sign-toggle:hover:active,
    .button--add-record-form-amount-sign-toggle:hover:active:focus,
    .button--add-record-form-amount-sign-toggle:hover:active:focus-visible,
    .button--login-form-password-mask-toggle:hover:active,
    .button--login-form-password-mask-toggle:hover:active:focus,
    .button--login-form-password-mask-toggle:hover:active:focus-visible {
        background-image: none;
        box-shadow:
            0 0 0 1px var(--color-screen-lighten-67),
            0 0 0 1px var(--color-action-secondary);
    }

    .button--add-record-form-amount-sign-toggle:hover:active::before,
    .button--add-record-form-amount-sign-toggle:hover:active:focus::before,
    .button--add-record-form-amount-sign-toggle:hover:active:focus-visible::before,
    .button--login-form-password-mask-toggle:hover:active::before,
    .button--login-form-password-mask-toggle:hover:active:focus::before,
    .button--login-form-password-mask-toggle:hover:active:focus-visible::before {
        box-shadow:
            0 0 0 3px var(--color-screen-lighten-100),
            0 0 0 0 var(--color-screen-darken-33);
    }
}

.button--add-record-form-amount-sign-toggle--negative::before,
.button--login-form-password-mask-toggle--on::before {
    transform: translateX(calc(100% - 0.25em));
}

.button--add-record-form-amount-sign-toggle-negative-label,
.button--add-record-form-amount-sign-toggle-positive-label,
.button--login-form-password-mask-toggle-label {
    border-radius: 99em;
    font-size: 1em;
    grid-template-columns: none;
    height: 1em;
    line-height: 1;
    padding: 0.125em;
    pointer-events: none;
    position: relative;
    width: 1em;
}

.button--login-form-password-mask-toggle--password-mask .button--login-form-password-mask-toggle-label {
    padding: 0.25em;
}

.button--add-record-form-amount-sign-toggle-label-text,
.button--login-form-password-mask-toggle-label-text {
    margin: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -56%);
}

.button--login-form-password-mask-toggle--password-mask {
    left: auto;
    right: 0;
    top: 0.25em;
}

.button--login-form-password-mask-toggle-label-text {
    transform: translate(-50%, -45%);
}

.button--login-form-password-mask-toggle-label-text--mouth-zipper {
    transform: translate(-48%, -45%);
}

.user-feedback-layout {
    display: grid;
}

.user-feedback-layout .button--dismiss {
    display: none;
}

.user-feedback-layout--dismiss {
    margin-top: 1.25em
}

.user-feedback-layout--dismiss .button--dismiss {
    display: block;
}

.user-feedback {
    align-items: center;
    background: var(--color-important);
    border-radius: 0.125em;
    box-shadow:
        0 0 0 1px var(--color-screen-lighten-33),
        0 0 0 5px var(--color-important);
    box-sizing: border-box;
    font-weight: bold;
    margin: 5px auto;
    max-width: calc(100% - 10px);
    padding: 1.25em;
    position: relative;
}

.user-feedback--login {
    max-width: calc(100% - 2em);
}

.user-feedback--success {
    background: var(--color-success);
    box-shadow: 0 0 0 1px var(--color-screen-darken-33), 0 0 0 5px var(--color-success);
}

.user-feedback-body {
    display: grid;
    grid-gap: 0.5em;
}

.skip-to-main-content {
    height: 1px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 20;
}

.skip-to-main-content .button {
    display: block;
    margin: 1em;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-300%);
    transition:
        background-image 0.1s ease-out 0s,
        box-shadow 0.1s ease-out 0s,
        transform 0.3s ease-in-out;
    width: max-content;
    will-change:
        background-image,
        box-shadow,
        transform;
}

.skip-to-main-content .button:focus,
.skip-to-main-content .button:focus:hover,
.skip-to-main-content .button:focus-visible:hover,
.skip-to-main-content .button:active:focus,
.skip-to-main-content .button:active:focus:hover,
.skip-to-main-content .button:active:focus-visible:hover {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.skip-to-main-content .button:focus .u-screen-readers-only,
.skip-to-main-content .button:focus:hover .u-screen-readers-only,
.skip-to-main-content .button:focus-visible:hover .u-screen-readers-only,
.skip-to-main-content .button:active:focus .u-screen-readers-only,
.skip-to-main-content .button:active:focus:hover .u-screen-readers-only,
.skip-to-main-content .button:active:focus-visible:hover .u-screen-readers-only {
    clip-path: none;
    position: static;
}

abbr {
    cursor: help;
}

[tabindex="-1"]:focus {
    outline: 0;
}

/* END Global Elements style rules */
/* --------- */

/* --------- */
/* BEGIN Global Layout style rules */

body {
    background: var(--color-primary);
    font-size: 1rem;
    height: 100%;
    margin: 0;
}

.layout {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    margin: auto;
    max-width: 1200px;
}

header {
    align-items: center;
    display: grid;
    grid-gap: 1em;
    grid-template-columns: 1fr auto;
    padding: 1em;
    z-index: 10;
}

main {
    display: grid;
    overflow: hidden;
    position: relative;
}

.main-loading-message {
    display: none;
    font-size: 1.5em;
    font-weight: bold;
    margin: auto;
    position: relative;
    text-transform: uppercase;
    top: -1.5em;
}

main.loading .main-loading-message {
    display: block;
}

.main-loading-message::after {
    animation: loading infinite 1250ms ease;
    background: var(--color-important);
    border-radius: 99em;
    content: '';
    height: 1em;
    left: 50%;
    opacity: 86%;
    position: absolute;
    top: calc(100% + 0.5em);
    transform: translate(calc(-50% - 2em), -50%);
    width: 1em;
}

/* END Global Layout style rules */
/* --------- */

/* --------- */
/* BEGIN Global Form style rules */

form {
    display: grid;
    grid-gap: 1em;
}

form .button[type="submit"] {
    display: block;
    margin-left: auto;
    margin-right: 0;
}

fieldset {
    border: 0;
    display: contents;
    margin: 0;
    padding: 0;
}

legend {
    padding: 0;
    text-transform: uppercase;
}

.form-input-layout {
    box-shadow: inset 3px 0 0 0 transparent;
    padding-left: 0;
    position: relative;
    transition:
        box-shadow 0.1s ease-in-out,
        padding-left 0.1s ease-in-out;
    will-change:
        box-shadow,
        padding-left;
}

.form-input-layout--error {
    box-shadow: inset 3px 0 0 0 var(--color-important);
    padding-left: 1ch;
}

input {
    appearance: none;
    background: none;
    background-color: transparent;
    border: 0;
    border-radius: 0.18em 0.18em 0 0;
    box-shadow:
        0 0 0 0 var(--color-important),
        0 3px 0 0 var(--color-action-primary);
    box-sizing: border-box;
    display: block;
    font-family: sans-serif;
    font-size: 1.25em;
    font-weight: bold;
    margin-bottom: 0.75em;
    min-height: 2.25em;
    outline: 0;
    padding: 0.5em 0 0.25em;
    transition:
        background-color 0.1s ease-out 0s,
        box-shadow 0.1s ease-out 0s;
    width: 100%;
    will-change:
        background-color,
        box-shadow;
}

@media(hover: hover) {
    input:hover {
        background-color: var(--color-screen-lighten-67);
        border: 0;
        box-shadow:
            0 0 0 0 var(--color-important),
            0 5px 0 0 var(--color-action-primary);
    }
}

input:focus,
input:focus-visible,
input:focus-within {
    background-color: var(--color-screen-lighten-67);
    border: 0;
    box-shadow:
        0 0 0 0 var(--color-important),
        0 5px 0 0 var(--color-action-primary);
}

@media(hover: hover) {
    input:focus:hover,
    input:focus-visible:hover,
    input:focus-within:hover {
        background-color: var(--color-screen-lighten-86);
        border: 0;
        box-shadow:
            0 0 0 0 var(--color-important),
            0 5px 0 0 var(--color-action-primary);
    }
}

input:not(.form-input-untouched):invalid {
    box-shadow:
        0 3px 0 0 var(--color-important),
        0 3px 0 0 var(--color-action-primary);
}

@media(hover: hover) {
    input:hover:not(.form-input-untouched):invalid {
        box-shadow:
            0 3px 0 0 var(--color-important),
            0 7px 0 0 var(--color-action-primary);
    }
}

input:focus:not(.form-input-untouched):invalid,
input:focus-visible:not(.form-input-untouched):invalid,
input:focus-within:not(.form-input-untouched):invalid {
    box-shadow:
        0 3px 0 0 var(--color-important),
        0 7px 0 0 var(--color-action-primary);
}

@media(hover: hover) {
    input:hover:focus:not(.form-input-untouched):invalid,
    input:hover:focus-visible:not(.form-input-untouched):invalid,
    input:hover:focus-within:not(.form-input-untouched):invalid {
        box-shadow:
            0 3px 0 0 var(--color-important),
            0 7px 0 0 var(--color-action-primary);
    }
}

input[type="password"]::-ms-reveal {
    display: none;
}

label {
    align-items: center;
    display: block;
    display: grid;
    font-size: 0.75em;
    font-weight: bold;
    grid-gap: 0.5em;
    grid-template-columns: auto auto 1fr;
    grid-template-rows: 1.625em auto;
    line-height: 1;
    text-transform: uppercase;
}

.form-input-label-text {
    margin-top: 0.125em;
}

.form-input-help {
    font-size: 1rem;
    grid-column-end: 4;
    grid-column-start: 1;
    line-height: 1.25;
    margin-top: 0;
    text-transform: none;
}

.form-input-flag-invalid {
    font-weight: bolder;
    color: black;
    background: var(--color-important);
    padding: 0.375em 0.5em 0.25em;
    border-radius: 0.25em;
}

.form-input-flag-invalid,
.form-input-help {
    display: none;
}

input:not(.form-input-untouched):invalid + label .form-input-flag-invalid,
input:not(.form-input-untouched):invalid + label .form-input-help {
    display: block;
}

/* END Global Form style rules */
/* --------- */

/* --------- */
/* BEGIN Add Record Section style rules */

.add-record-section {
    align-items: end;
    display: grid;
    height: calc(100% - 1.625em);
    margin-left: auto;
    margin-right: auto;
    max-width: calc(100% - 2em);
    overflow: hidden;
    padding-top: 2em;
    position: relative;
    width: 100%;
}

main.drawer-open .add-record-section {
    padding-top: 1.625em;
}

.add-record-section-drawer {
    background-color: var(--color-screen-lighten-33);
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
    box-sizing: border-box;
    height: 100%;
    overflow: hidden;
    padding: 2em 1em 1em;
}

.add-record-section-contents {
    display: none;
    height: 100%;
    overflow: hidden auto;
}

main.drawer-open .add-record-section-contents {
    display: grid;
    grid-gap: 1em;
}

.add-record-form {
    align-items: start;
    box-sizing: border-box;
    display: grid;
    margin: auto;
    padding: 0.5em 0.5em 1.25em;
    width: 100%;
}

.add-record-form legend {
    display: contents;
}

.add-record-form-inputs {
    display: grid;
    grid-gap: 1em;
    margin: auto;
    max-width: 36ch;
}

.add-record-form-amount-input-sign-overlay {
    position: relative;
}

.add-record-form-amount-input-sign-overlay::before {
    box-sizing: border-box;
    content: '$';
    font-size: 1.25em;
    position: absolute;
    left: 3em;
    top: 0.675em;
}

.add-record-form-amount-input-sign-overlay input {
    padding-left: calc(3em + 1ch);
}

.form-input-layout--add-record-date {
    display: grid;
    grid-template-columns: 6ch 5ch minmax(7ch, auto);
}

.form-input-layout--add-record-amount .button span {
    pointer-events: none;
}

.add-record-form-date-input-error-message {
    align-items: center;
    display: grid;
    font-size: 0.75em;
    font-weight: bold;
    grid-column-end: 4;
    grid-column-start: 1;
    grid-gap: 0.5em;
    grid-template-columns: auto auto 1fr;
    line-height: 1;
    text-transform: uppercase;
}

.add-record-form-date-input-error-message--visible .form-input-flag-invalid,
.add-record-form-date-input-error-message--visible .form-input-help {
    display: block;
}

.add-record-form .button[type="submit"] {
    margin-right: auto;
}

/* END Add Record Section style rules */
/* --------- */

/* --------- */
/* BEGIN Login Section style rules */

.login-section {
    display: grid;
    height: 100%;
    overflow: hidden auto;
}

.login-section-layout {
    display: grid;
    grid-gap: 1.5em;
    margin: auto;
    max-width: 320px;
    padding: 1em 0;
    width: 100%;
}

.login-form {
    box-sizing: border-box;
    margin: auto;
    padding: 0 1em;
    width: 100%;
}

.login-form-inputs {
    display: grid;
    grid-gap: 1em;
}

.form-input-layout--user-password input {
    padding-right: calc(3em + 1ch);
}

/* END Login Section style rules */
/* --------- */

/* --------- */
/* BEGIN Transaction Records Section style rules */

.transaction-records-interface {
    grid-template-rows: 1fr auto;
}

.transaction-records-section {
    align-items: center;
    display: grid;
    grid-auto-rows: 100%;
    overflow: hidden;
}

.transaction-records {
    align-items: stretch;
    box-sizing: border-box;
    display: grid;
    grid-gap: 1em;
    grid-template-columns: auto 1fr;
    height: 100%;
    padding: 0 1em;
}

.transaction-records-nav {
    display: grid;
    grid-gap: 2em;
    padding: 1.125em 0 1em;
}

.transaction-records-nav .button {
    font-size: 1.5em;
    margin: auto;
    padding: 0.125em 0.25em;
}

.transaction-records-nav .button:first-of-type {
    margin-top: 0;
}

.transaction-records-nav .button:last-of-type {
    margin-bottom: 0;
}

.transaction-records-nav .button:last-of-type span:not(.u-screen-readers-only) {
    display: block;
    transform: scaleY(-1);
}

.transaction-records-viewport {
    height: 100%;
    overflow: hidden auto;
    padding: 0 1em;
}

.transaction-records-viewport::after,
.transaction-records-viewport::before {
    background: transparent;
    content: '';
    display: block;
    height: 1em;
    position: sticky;
    width: 100%;
}

.transaction-records-viewport::after {
    background-image: linear-gradient(to top, var(--color-primary), transparent);
    bottom: 0;
}

.transaction-records-viewport::before {
    background-image: linear-gradient(to bottom, var(--color-primary), transparent);
    top: 0;
}

.transaction-records-table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}

.transaction-records-table thead {
    display: none;
}

.transaction-records-table th {
    padding-bottom: 1.25em;
    text-align: left;
    text-transform: uppercase;
}

.transaction-records-table tbody {
    display: grid;
}

.transaction-records-table tr {
    display: grid;
    grid-gap: 1em;
    box-shadow: 0 1px 0 0 var(--color-screen-darken-100);
    padding: 1.25em 0;
}

.transaction-records-table tbody tr:first-child {
    box-shadow:
        0 -1px 0 0 var(--color-screen-darken-100),
        0 1px 0 0 var(--color-screen-darken-100);
}

.transaction-records-table tbody tr.new-record {
    background-image: linear-gradient(to bottom, transparent, transparent 1px, var(--color-success) 1px, var(--color-success));
    padding: 1em;
}

.transaction-records-table tbody tr.new-record:first-child {
    background-image: linear-gradient(to bottom, var(--color-success), var(--color-success));
}

.transaction-records-table td {
    display: grid;
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.transaction-records-table-cell-contents {
    font-weight: bold;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.transaction-records-table span.u-small-viewports-only {
    font-size: 0.75em;
    text-transform: uppercase;
}

/* END Transaction Records Section style rules */
/* --------- */

/* --------- */
/* BEGIN Utilities style rules */

.u-display--block {
    display: block;
}

.u-display--none {
    display: none;
}

.u-text--align--right,
th.u-text--align--right {
    text-align: right;
}

.u-screen-readers-only {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    left: -999em;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    position: absolute;
    right: auto;
    top: auto;
    white-space: pre-wrap;
    width: 1px;
}

.u-text-wrap--none {
    white-space: nowrap;
}

/* END Utilities style rules */
/* --------- */

/* --------- */
/* BEGIN Animations style rules */

@keyframes loading {
    0% {
        transform: translate(calc(-50% - 2em), -50%);
    }

    50% {
        transform: translate(calc(-50% + 2em), -50%);
    }

    100% {
        transform: translate(calc(-50% - 2em), -50%);
    }
}

@keyframes loading-button {
    0% {
        transform: translate(calc(-100%), -50%);
    }

    50% {
        transform: translate(calc(100% - 0.33em), -50%);
    }

    100% {
        transform: translate(calc(-100%), -50%);
    }
}

/* END Animations style rules */
/* --------- */

/* --------- */
/* BEGIN Responsive style rules */

@media(min-width: 390px) {
    .transaction-records-table tr {
        grid-template-columns: 1fr 1fr;
    }

    .transaction-records-table td:nth-of-type(2) {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row: 2;
    }

    /* BEGIN Utilities style rules that apply to viewports larger than breakpoint 1 (390px) */

    .bp1-u-text--align--right {
        text-align: right;
    }

    /* END Utilities style rules that apply to viewports larger than breakpoint 1 (390px) */
}

@media(min-width: 750px) {
    .add-record-form-inputs {
        align-items: start;
        margin: 0;
        max-width: none;
        grid-template-columns: 23ch minmax(23ch, auto) 24ch;
    }
}

@media(min-width: 800px) {
    main {
        grid-gap: 0;
    }

    .transaction-records-section::before {
        content: none;
    }

    .transaction-records {
        padding: 1em 1em 0;
    }
    
    .transaction-records-viewport::before {
        content: none;
    }

    .transaction-records-nav {
        padding: 0.25em 0 1em;
    }

    .transaction-records-table thead {
        display: table-header-group;
        background-image: linear-gradient(to bottom, var(--color-primary) 1.5em, transparent);
        position: sticky;
        top: 0;
    }

    .transaction-records-table thead tr {
        box-shadow: none;
        padding: 0;
    }

    .transaction-records-table tbody {
        display: table-row-group;
    }

    .transaction-records-table tbody tr:first-child {
        box-shadow:
            0 -1px 0 0 var(--color-screen-darken-100),
            0 1px 0 0 var(--color-screen-darken-100);
    }

    .transaction-records-table tr {
        grid-template-columns: 10ch 1fr 15ch;
        padding: 1em 0;
    }

    .transaction-records-table tbody tr.new-record {
        padding: 1em 0;
    }

    .transaction-records-table td {
        display: table-cell;
        grid-template-columns: auto;
    }

    .transaction-records-table td:nth-of-type(2) {
        grid-column: auto;
        grid-row: auto;
    }
    
    .u-small-viewports-only,
    .transaction-records-table span.u-small-viewports-only {
        display: none;
    }
}

@media(min-width:930px) {
    .add-record-form {
        grid-template-columns: 1fr auto;
        padding: 0.75em 1.25em 1.25em;
    }
}

@media(min-width: 1200px) {
    .layout {
        max-width: none;
    }

    .transaction-records-interface {
        box-sizing: border-box;
        grid-template-columns: 1fr 24em;
        grid-template-rows: auto;
        height: 100%;
    }

    .add-record-section,
    main.drawer-open .add-record-section {
        align-items: start;
        align-self: start;
        grid-template-columns: auto;
        grid-template-rows: auto 1fr;
        height: calc(100% - 2em);
        max-width: none;
        padding: 1em 1em 1em 0;
        width: calc(100% - 1em);
    }

    .add-record-section-drawer {
        border-radius: 0.5em;
        padding-top: 1.25em;
    }

    .add-record-section-contents,
    main.drawer-open .add-record-section-contents {
        display: grid;
        grid-gap: 1em;
    }

    .button--add-record-form-toggle  {
        display: none;
    }

    .add-record-form {
        grid-template-columns: auto;
    }

    .add-record-form-inputs {
        grid-template-columns: auto;
    }

    .add-record-form .button[type="submit"] {
        margin-right: 0;
    }
}

@media(min-width: 1600px) {
    body {
        font-size: 1.125rem;
    }
}

@media(min-width: 2400px) {
    body {
        font-size: 1.25rem;
    }
}

@media(min-width: 3600px) {
    body {
        font-size: 1.375rem;
    }
}

@media(min-width: 4800px) {
    body {
        font-size: 1.5rem;
    }
}

@media(min-width: 6000px) {
    body {
        font-size: 1.675rem;
    }
}

@media(min-width: 7200px) {
    body {
        font-size: 1.75rem;
    }
}

@media(min-width: 8400px) {
    body {
        font-size: 1.875rem;
    }
}

@media(min-width: 9600px) {
    body {
        font-size: 2rem;
    }
}

/* END Responsive style rules */
/* --------- */