@import url("tokens-1NI9d62.css");

/* Fonts: SIL Open Font License, see assets/fonts/OFL-*.txt */
@font-face {
    font-family: "Atkinson Hyperlegible Next";
    src: url("../fonts/atkinson-hyperlegible-next-latin-kiaiMj2.woff2") format("woff2");
    font-weight: 200 800;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Atkinson Hyperlegible Mono";
    src: url("../fonts/atkinson-hyperlegible-mono-latin-e8kAYl9.woff2") format("woff2");
    font-weight: 200 800;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Base ------------------------------------------------------------------- */

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

[hidden] { display: none !important; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 18px;
    line-height: 27px;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }

h1 { font-size: 30px; line-height: 36px; font-weight: 700; text-wrap: balance; }
h2 { font-size: 22px; line-height: 28px; font-weight: 700; text-wrap: balance; }

a { color: var(--ink); text-underline-offset: 3px; }

:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: var(--space-4);
    top: calc(-1 * var(--tap-target) - var(--space-4));
    padding: var(--space-3) var(--space-4);
    background: var(--signal);
    color: var(--on-signal);
    font-weight: 600;
    border: 2px solid var(--ink);
    border-radius: var(--radius-sm);
}
.skip-link:focus { top: var(--space-2); }

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

/* Layout ----------------------------------------------------------------- */

.app-header {
    border-bottom: 1px solid var(--line);
    background: var(--raised);
}

.app-header__inner,
.page {
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--space-4);
}

.app-header__inner {
    display: flex;
    align-items: center;
    min-height: 56px;
}

.app-header__inner { justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }

.account-nav {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 16px;
    line-height: 22px;
}
.account-nav a,
.link-button {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-target);
    color: var(--ink);
    font-weight: 600;
}

.link-button {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.app-name {
    font-size: 22px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-target);
}

.page {
    display: grid;
    gap: var(--space-6);
    padding-block: var(--space-6);
}

.page__header {
    display: grid;
    gap: var(--space-2);
}

.back-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-target);
    font-weight: 600;
}

.stack { display: grid; gap: var(--space-3); }

/* Sticky action bar: the one primary action, within thumb reach */
.actions {
    position: sticky;
    bottom: 0;
    display: grid;
    gap: var(--space-3);
    margin-inline: calc(-1 * var(--space-4));
    padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    background: var(--paper);
    border-top: 1px solid var(--line);
}

/* Text ------------------------------------------------------------------- */

.muted, .caption { color: var(--ink-muted); }
.caption { font-size: 16px; line-height: 22px; }

.amount {
    font-family: var(--font-mono);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.reference {
    font-family: var(--font-mono);
    font-size: 16px;
    line-height: 22px;
    overflow-wrap: anywhere;
}

/* Buttons ---------------------------------------------------------------- */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--tap-target);
    min-width: var(--tap-target);
    padding: var(--space-2) var(--space-4);
    border: 2px solid var(--ink);
    border-radius: var(--radius-sm);
    background: var(--raised);
    color: var(--ink);
    font: inherit;
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.button--primary {
    background: var(--signal);
    color: var(--on-signal);
}

.button--block { width: 100%; }

.button:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Forms ------------------------------------------------------------------ */

.form { display: grid; gap: var(--space-6); }

.field { display: grid; gap: var(--space-2); }

.field label,
.field legend {
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
}

.field__hint {
    color: var(--ink-muted);
    font-size: 16px;
    line-height: 22px;
}

.field__error {
    color: var(--danger);
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
}

.input {
    width: 100%;
    min-height: var(--tap-target);
    padding: var(--space-2) var(--space-3);
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--raised);
    color: var(--ink);
    font: inherit;
}

textarea.input { min-height: calc(3 * var(--tap-target)); resize: vertical; }

.input--amount {
    max-width: 12ch;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.input[aria-invalid="true"] { border-color: var(--danger); }

.error-summary {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 3px solid var(--danger);
    border-radius: var(--radius-md);
    background: var(--raised);
}
.error-summary h2 { color: var(--danger); }
.error-summary a { color: var(--danger); font-weight: 600; }

/* Cards and journal ------------------------------------------------------ */

.card {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

.card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
}

.list { list-style: none; padding: 0; display: grid; gap: var(--space-3); }

/* A frame only wraps a card's content: its children keep the card's layout. */
turbo-frame { display: contents; }

.card-link {
    display: grid;
    gap: var(--space-2);
    text-decoration: none;
}
.card-link:hover .card-link__title { text-decoration: underline; text-underline-offset: 3px; }
.card-link__title { font-size: 22px; line-height: 28px; font-weight: 700; }

.facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-2) var(--space-4);
}
.facts dt { color: var(--ink-muted); }

@media (max-width: 22rem) {
    .facts { grid-template-columns: 1fr; gap: 0; }
    .facts dd { margin-bottom: var(--space-2); }
}

.empty {
    padding: var(--space-4);
    border: 2px dashed var(--line);
    border-radius: var(--radius-md);
}

/* Status: always an icon and a word, never colour alone */
.status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 2px var(--space-3);
    border: 2px solid currentColor;
    border-radius: var(--radius-pill);
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
}
.status svg { width: 18px; height: 18px; flex: none; }
.status--draft { color: var(--ink); }
.status--pending { color: var(--on-signal); background: var(--signal); border-color: var(--ink); }
.status--confirmed { color: var(--confirmed); }
.status--refused { color: var(--danger); }

/* Home page -------------------------------------------------------------- */

.banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--raised);
    border: 2px solid var(--ink);
    border-radius: var(--radius-md);
    font-size: 16px;
    line-height: 22px;
}

.banner__label {
    padding: 2px var(--space-3);
    background: var(--signal);
    color: var(--on-signal);
    border: 2px solid var(--ink);
    border-radius: var(--radius-pill);
    font-weight: 600;
}

.hero { display: grid; gap: var(--space-4); }
.hero__lead { font-size: 20px; line-height: 30px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.photo { display: grid; gap: var(--space-2); }
.photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
}

.steps { display: grid; gap: var(--space-3); padding-left: var(--space-6); }
.steps li::marker { font-weight: 700; }

.checklist { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.checklist__item { display: flex; gap: var(--space-3); align-items: flex-start; }
.checklist__item svg { flex: none; width: 22px; height: 22px; margin-top: 3px; color: var(--ink-muted); }
.checklist__item--done svg { color: var(--confirmed); }

/* Client confirmation page ----------------------------------------------- */

.recap {
    white-space: pre-line;
    padding: var(--space-4);
    background: var(--raised);
    border: 2px solid var(--ink);
    border-radius: var(--radius-md);
}

.notice {
    padding: var(--space-4);
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

.share-link {
    display: grid;
    gap: var(--space-2);
}