:root {
    color-scheme: light;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    line-height: 1.6;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: #17202a;
    background: #f7f8fa;
}

.skip-link {
    position: absolute;
    top: 0;
    left: 1rem;
    z-index: 10;
    padding: .75rem 1rem;
    color: #fff;
    background: #143d59;
    transform: translateY(-120%);
}

.skip-link:focus {
    transform: translateY(0);
}

:focus-visible {
    outline: 3px solid #b54708;
    outline-offset: 3px;
}

.site-header,
.content {
    width: min(100% - 2rem, 52rem);
    margin-inline: auto;
}

.site-header {
    padding-block: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.brand {
    font-weight: 700;
    color: #143d59;
    text-decoration: none;
}

nav { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
a { color: #075985; }
.inline-form { display: inline; }
.link-button { border: 0; padding: 0; color: #075985; background: transparent; font: inherit; text-decoration: underline; cursor: pointer; }

.content { margin-block: clamp(1.5rem, 6vw, 4rem); }
.content h1 { font-size: clamp(1.8rem, 6vw, 3rem); }
.content h2 { line-height: 1.3; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.button { display: inline-block; border: 2px solid #143d59; border-radius: .5rem; padding: .7rem 1rem; color: #fff; background: #143d59; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.button.secondary { color: #143d59; background: #fff; }
.form-card { max-width: 36rem; margin-inline: auto; }
.form-card.wide { max-width: none; }
.field { margin-block: 1rem; }
.field label, legend { display: block; font-weight: 700; }
input, textarea { width: 100%; margin-top: .35rem; border: 1px solid #82909b; border-radius: .4rem; padding: .7rem; font: inherit; background: #fff; }
textarea { min-height: 6rem; resize: vertical; }
input[aria-invalid="true"] { border-color: #b42318; }
.field-error, .error { color: #8a1c13; }
.help, .muted { color: #4b5c68; font-size: .95rem; }
.notice { margin-bottom: 1.25rem; border-inline-start: .35rem solid; padding: .8rem 1rem; background: #f4f7f8; }
.notice.success { border-color: #16803c; }
.notice.error { border-color: #b42318; }
fieldset { margin-block: 1.5rem; border: 1px solid #ccd4da; border-radius: .5rem; padding: 1rem; }
.check { display: flex; gap: .65rem; align-items: flex-start; font-weight: 600; }
.check input { width: auto; margin-top: .35rem; }
.dashboard-grid { display: grid; gap: 1rem; margin-block: 1.5rem; }
.panel { border: 1px solid #d8dee4; border-radius: .6rem; padding: 1rem; background: #fbfcfd; }
.status-pill { display: inline-block; border-radius: 999px; padding: .25rem .65rem; background: #e8eef2; font-weight: 700; }
.business-logo-preview { display: block; width: min(100%, 20rem); max-height: 16rem; margin-block: 1rem; object-fit: contain; border: 1px solid #d8dee4; border-radius: .5rem; padding: .75rem; background: #fff; }
.danger-zone { margin-top: 2rem; border: 1px solid #e5a6a0; border-radius: .6rem; padding: 1rem; background: #fff8f7; }
.button.danger { border-color: #8a1c13; background: #8a1c13; }
.item-list { display: grid; gap: 1rem; padding: 0; list-style-position: inside; }
.item-card { border: 1px solid #d8dee4; border-radius: .6rem; padding: 1rem; background: #fff; }
.item-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; }
.item-actions form { margin: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.invoice-history-filters { display: grid; gap: 0 1.25rem; margin-block: 1.5rem; }
.invoice-history-cards { display: grid; gap: 1rem; padding: 0; list-style: none; margin: 0; }
.invoice-history-card { border: 1px solid #d8dee4; border-radius: .6rem; padding: 1rem; background: #fff; }
.invoice-history-card-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .5rem; }
.invoice-history-table { display: none; }
.pagination { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }
dl div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .4rem; border-bottom: 1px solid #e3e8eb; }
dt { font-weight: 700; }

@media (min-width: 44rem) {
    .form-grid, .dashboard-grid, .invoice-history-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; }
    .field.full, .check { grid-column: 1 / -1; }
    .invoice-history-cards { display: none; }
    .invoice-history-table { display: table; width: 100%; border-collapse: collapse; }
    .invoice-history-table th, .invoice-history-table td { text-align: start; padding: .6rem .75rem; border-bottom: 1px solid #e3e8eb; vertical-align: top; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

.content {
    margin-block: clamp(2rem, 10vw, 7rem);
    padding: clamp(1.25rem, 5vw, 3rem);
    background: #fff;
    border: 1px solid #d8dee4;
    border-radius: .75rem;
}

.content h1 {
    max-width: 20ch;
    margin-block: .5rem 1rem;
    font-size: clamp(2rem, 7vw, 3.5rem);
    line-height: 1.2;
}

.content p {
    max-width: 62ch;
}

.eyebrow {
    color: #3b596d;
    font-weight: 700;
}