* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html, input, textarea, select, button {
    color-scheme: light;
}

.archive-export-delivery {
    margin-block: 1rem;
    padding: 1rem;
    border: 1px solid var(--color-accent);
    border-radius: var(--shell-radius);
    background: var(--color-background);
    overflow-wrap: anywhere;
}

.archive-export-delivery dl {
    display: grid;
    gap: 0.25rem;
}

.archive-export-delivery dt { font-weight: 700; }
.archive-export-delivery dd { margin: 0 0 0.5rem; }
.archive-export-delivery-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

html {
    background: var(--color-background);
    color: var(--color-text);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    line-height: 1.5;
    max-width: 100%;
    overflow-x: clip;
}

html[data-theme="dark"],
html[data-theme="dark"] :is(input, textarea, select, button) {
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]),
    html:not([data-theme="light"]) :is(input, textarea, select, button) {
        color-scheme: dark;
    }
}

body {
    margin: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    /* A column lets the workspace push the footer below short pages. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background:
        radial-gradient(circle at 80% 0, color-mix(in srgb, var(--color-accent) 12%, transparent), transparent 35rem),
        var(--color-background);
}

button,
input,
select {
    font: inherit;
}

a {
    color: inherit;
}

:focus-visible {
    outline: 0.2rem solid var(--color-focus);
    outline-offset: 0.2rem;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
    background: color-mix(in srgb, var(--color-surface) 88%, transparent);
    backdrop-filter: blur(1rem);
}

.header-inner {
    width: min(74rem, calc(100% - 2rem));
    min-height: 4.75rem;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.brand-mark {
    width: 2rem;
    aspect-ratio: 1;
    border-radius: 0.65rem;
    background:
        linear-gradient(135deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 45%, var(--color-focus)));
    box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--color-accent) 25%, transparent);
}

.navigation ul {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    list-style: none;
}

.navigation a {
    display: inline-flex;
    padding: 0.65rem 0.85rem;
    border-radius: 0.7rem;
    font-weight: 650;
    text-decoration: none;
}

.navigation a:hover {
    background: color-mix(in srgb, var(--color-accent) 9%, transparent);
    color: var(--color-accent);
}

.navigation--header {
    margin-left: auto;
}

.navigation--home-primary a,
.navigation--dashboard-primary a,
.navigation--archive-primary a {
    padding: 0.9rem 1.2rem;
    background: var(--color-accent);
    color: var(--color-on-accent);
    box-shadow: 0 0.8rem 2rem color-mix(in srgb, var(--color-accent) 25%, transparent);
}

.navigation--home-primary li + li a {
    border: 1px solid color-mix(in srgb, var(--color-text) 15%, transparent);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: none;
}

.navigation--register-secondary,
.navigation--login-secondary,
.navigation--mail-sent-secondary,
.navigation--confirmation-pending,
.navigation--login-password-help,
.navigation--password-reset-sent {
    margin-top: 0.5rem;
}

.navigation--register-secondary ul,
.navigation--login-secondary ul,
.navigation--mail-sent-secondary ul,
.navigation--confirmation-pending ul,
.navigation--login-password-help ul,
.navigation--password-reset-sent ul {
    /* Without wrapping, a third link squeezes the row until the words break
       inside each item and spill out of the card. */
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 1.25rem;
    row-gap: 0.5rem;
}

.button {
    border: 0;
    border-radius: 0.75rem;
    padding: 0.8rem 1rem;
    background: var(--color-accent);
    color: var(--color-on-accent);
    cursor: pointer;
    font-weight: 750;
}

.button--primary {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.95rem 1rem;
}

.button--quiet {
    background: transparent;
    color: var(--color-text);
}

/* A secondary action must not carry the same weight as the accent button.
   Cancel and Delete sat side by side with nothing to tell them apart. */
.button-secondary {
    border: 1px solid color-mix(in srgb, var(--color-text) 28%, transparent);
    background: transparent;
    color: var(--color-text);
}

.button-secondary:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* Colour alone must not carry the difference, so the destructive action is
   also outlined and its label sits on its own line of defence. */
.button--danger {
    border-color: color-mix(in srgb, var(--color-conflict) 60%, transparent);
    background: transparent;
    color: var(--color-conflict);
}

.button--danger:hover {
    border-color: var(--color-conflict);
}

main {
    width: min(74rem, calc(100% - 2rem));
    margin: auto;
}

.hero {
    padding: clamp(2.25rem, 4vw, 3.25rem) 0;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
    align-items: start;
    gap: clamp(2rem, 7vw, 7rem);
}

.eyebrow {
    display: block;
    margin-bottom: 0.7rem;
    color: var(--color-accent);
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1 {
    max-width: var(--heading-max-width);
    margin-bottom: 1.25rem;
    font-size: var(--heading-primary-size);
    font-weight: var(--heading-weight);
    line-height: var(--heading-line-height);
    letter-spacing: var(--heading-letter-spacing);
}

h2 {
    margin-bottom: 0.8rem;
    font-size: var(--heading-secondary-size);
    font-weight: var(--heading-weight);
    line-height: var(--heading-line-height);
    letter-spacing: var(--heading-letter-spacing);
}

h3 {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.lead {
    max-width: 39rem;
    margin-bottom: 2rem;
    color: color-mix(in srgb, var(--color-text) 72%, transparent);
    font-size: 1.18rem;
}

.trust-line {
    margin-top: 1.2rem;
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
    font-size: 0.9rem;
}

.proof-card {
    position: relative;
    overflow: hidden;
    margin-top: clamp(4rem, 5vw, 5rem);
    padding: 2rem;
    border: 1px solid color-mix(in srgb, var(--color-text) 11%, transparent);
    border-radius: 1.5rem;
    background: color-mix(in srgb, var(--color-surface) 94%, transparent);
    box-shadow: 0 2rem 5rem color-mix(in srgb, var(--color-text) 12%, transparent);
}

.proof-card::after {
    content: "";
    position: absolute;
    right: -3rem;
    bottom: -4rem;
    width: 10rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
    filter: blur(0.5rem);
}

.proof-icon,
.empty-state-icon {
    display: block;
    width: 3rem;
    aspect-ratio: 1;
    margin-bottom: 2rem;
    border: 0.55rem double var(--color-accent);
    border-radius: 50%;
    box-shadow: inset 0 0 0 0.25rem var(--color-surface);
}

.proof-label {
    margin-bottom: 0.25rem;
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.proof-card strong {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 1.35rem;
}

.proof-card p:not(.proof-label) {
    color: color-mix(in srgb, var(--color-text) 66%, transparent);
}

.proof-status,
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.2rem 0 0;
    padding: 0.45rem 0.7rem;
    border-radius: 10rem;
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    color: var(--color-accent);
    font-size: 0.82rem;
    font-weight: 750;
}

.proof-status span {
    width: 0.45rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--color-accent);
}

.steps-section,
.dashboard-section {
    padding: 3.5rem 0 4.5rem;
}

.section-heading {
    margin-bottom: 2.5rem;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
}

.section-heading--center {
    max-width: 45rem;
    margin-inline: auto;
    text-align: center;
    display: block;
}

.step-grid,
.metric-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.step-grid article,
.metric-card,
.settings-card {
    padding: 1.6rem;
    border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
    border-radius: 1.1rem;
    background: var(--color-surface);
}

.step-grid article > span {
    display: block;
    margin-bottom: 2.5rem;
    color: var(--color-accent);
    font-size: 0.85rem;
    font-weight: 850;
}

.step-grid p,
.section-heading p,
.empty-state p {
    color: color-mix(in srgb, var(--color-text) 65%, transparent);
}

.privacy-band {
    margin-bottom: 5rem;
    padding: clamp(2rem, 5vw, 4rem);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    border-radius: 1.5rem;
    background: color-mix(in srgb, var(--color-accent) 9%, var(--color-surface));
}

.privacy-band p {
    align-self: center;
    margin: 0;
    color: color-mix(in srgb, var(--color-text) 70%, transparent);
    font-size: 1.05rem;
}

.metric-card span {
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

.metric-card strong {
    display: block;
    margin-top: 1rem;
    font-size: 1.75rem;
}

.account-shell {
    min-height: calc(100vh - 4.75rem);
    padding: clamp(1.5rem, 4vh, 3.5rem) 0;
    display: grid;
    grid-template-columns: 1fr minmax(20rem, 27rem);
    align-items: center;
    /* Nine rem of gap pushed the form off a laptop screen. The card has to
       be reachable without scrolling for anything to get done here. */
    gap: clamp(2rem, 6vw, 5rem);
}

/* One grid cell holding the status and the form together. As separate
   children they landed in different columns and different rows. */
.account-panel {
    display: grid;
    gap: 1rem;
    align-content: center;
}

.account-shell--compact {
    min-height: 38rem;
}

.account-copy p,
.account-copy li {
    color: color-mix(in srgb, var(--color-text) 68%, transparent);
}

.account-copy li {
    margin-bottom: 0.7rem;
}

.account-card {
    padding: 2rem;
    display: grid;
    gap: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--color-text) 11%, transparent);
    border-radius: 1.4rem;
    background: var(--color-surface);
    box-shadow: 0 1.5rem 4rem color-mix(in srgb, var(--color-text) 10%, transparent);
}

label {
    margin-top: 0.3rem;
    font-size: 0.9rem;
    font-weight: 750;
}

/* A radio is a control, not a field: stretching it made its dot sit
   wherever its label left room, so no two rows lined up. */
input:not([type="radio"]):not([type="checkbox"]),
select {
    width: 100%;
    min-height: 3rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent);
    border-radius: 0.65rem;
    background: var(--color-background);
    color: var(--color-text);
}

small {
    color: color-mix(in srgb, var(--color-text) 58%, transparent);
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 2.75rem;
}

.checkbox-row input {
    width: 1rem;
    min-height: 1rem;
}

.validation-summary,
.status-message {
    padding: 0.8rem 1rem;
    border-radius: 0.65rem;
    background: color-mix(in srgb, var(--color-focus) 12%, transparent);
    color: var(--color-text);
}

.validation-summary p,
.status-message {
    margin-bottom: 0;
}

.status-message:empty {
    display: none;
}

.page-shell {
    min-height: calc(100vh - 4.75rem);
    padding: 5rem 0;
}

.page-shell--narrow {
    max-width: 46rem;
    margin: auto;
}

.settings-card {
    margin-top: 2rem;
    display: grid;
    gap: 0.8rem;
}

.empty-state {
    min-height: 23rem;
    padding: 4rem 2rem;
    display: grid;
    place-items: center;
    align-content: center;
    border: 1px dashed color-mix(in srgb, var(--color-text) 22%, transparent);
    border-radius: 1.4rem;
    text-align: center;
}

.empty-state-icon {
    margin-bottom: 1rem;
}

.pricing-currency {
    min-width: min(100%, 22rem);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 0.6rem;
}

.pricing-currency label {
    grid-column: 1 / -1;
    margin: 0;
}

.pricing-disclaimer,
.pricing-warning {
    padding: 1rem 1.2rem;
    border-left: 0.3rem solid var(--color-accent);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-accent) 9%, var(--color-surface));
}

.pricing-list {
    display: grid;
    gap: 1.2rem;
    margin-top: 2rem;
}

.pricing-card {
    padding: clamp(1.2rem, 4vw, 2rem);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    border: 1px solid color-mix(in srgb, var(--color-text) 11%, transparent);
    border-radius: 1.2rem;
    background: var(--color-surface);
}

.pricing-card header {
    grid-column: 1 / -1;
}

.pricing-card h2 {
    margin: 0;
    font-size: clamp(1.5rem, 4vw, 2.3rem);
}

.pricing-range {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
}

.pricing-range div,
.pricing-evidence {
    padding: 1rem;
    border-radius: 0.8rem;
    background: color-mix(in srgb, var(--color-accent) 6%, var(--color-background));
}

.pricing-card dl {
    margin: 0;
}

.pricing-card dl div + div {
    margin-top: 0.75rem;
}

.pricing-card dt {
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
    font-size: 0.82rem;
    font-weight: 700;
}

.pricing-card dd {
    margin: 0.15rem 0 0;
    font-weight: 750;
}

.pricing-warning {
    margin: 1rem 0 0;
}

.capture-shell {
    min-width: 0;
    max-width: 64rem;
    margin-inline: auto;
    overflow-x: clip;
    touch-action: pan-y;
}

body:has([data-capture-root]) {
    overflow-x: clip;
    overscroll-behavior-x: none;
    touch-action: pan-y;
}

.capture-heading {
    max-width: 44rem;
    margin-bottom: 2rem;
}

.capture-heading p,
.capture-card > p {
    color: color-mix(in srgb, var(--color-text) 68%, transparent);
}

.capture-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    min-width: 0;
    max-width: 100%;
}

.capture-area-create {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.6rem;
    min-width: 0;
}

.capture-area-create > * {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 42rem) {
    .capture-area-create { grid-template-columns: 1fr; }
}

/* The receipt takes the full width of the form grid so the way onward is
   not squeezed into one column beside the progress panel. */
.capture-receipt {
    grid-column: 1 / -1;
}

.capture-card,
.capture-actions {
    min-width: 0;
    max-width: 100%;
    padding: clamp(1.2rem, 4vw, 2rem);
    display: grid;
    align-content: start;
    gap: 0.7rem;
    border: 1px solid color-mix(in srgb, var(--color-text) 11%, transparent);
    border-radius: 1.2rem;
    background: var(--color-surface);
}

.capture-card h2,
.capture-actions h2 {
    margin-bottom: 0.3rem;
    font-size: clamp(1.35rem, 3vw, 1.8rem);
}

.capture-count {
    margin: 0.3rem 0;
    font-weight: 750;
}

.capture-preview,
.capture-actions {
    grid-column: 1 / -1;
}

.capture-preview ul {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    list-style: none;
}

.capture-preview li {
    overflow: hidden;
    border-radius: 0.8rem;
    background: var(--color-background);
}

.capture-preview img {
    width: 100%;
    aspect-ratio: 4 / 3;
    display: block;
    object-fit: cover;
}

.capture-actions {
    gap: 0.8rem;
}

.capture-actions .validation-summary:empty {
    display: none;
}

.capture-recovery-code {
    display: block;
    margin-block: 1rem;
    overflow-wrap: anywhere;
    font-family: monospace;
    font-size: 1.05rem;
    font-weight: 750;
    user-select: all;
}

.help-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 2.65rem;
    min-height: 2.65rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
    border-radius: var(--shell-radius);
    background: var(--color-background);
    color: var(--color-text);
    cursor: pointer;
    font-weight: 750;
}

.help-button > span:first-child {
    display: grid;
    width: 1.4rem;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-on-accent);
}

dialog {
    width: min(32rem, calc(100% - 2rem));
    padding: 0;
    border: 0;
    border-radius: 1.2rem;
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 2rem 7rem color-mix(in srgb, var(--color-text) 25%, transparent);
}

dialog::backdrop {
    background: color-mix(in srgb, var(--color-text) 45%, transparent);
    backdrop-filter: blur(0.2rem);
}

.dialog-content {
    padding: 2rem;
}

.travel-delete-dialog .dialog-content {
    display: grid;
    gap: 1rem;
}

.travel-delete-name {
    overflow-wrap: anywhere;
    font-weight: 750;
}

/* The shape the trip detail already used, now shared by every confirmation
   that stands in front of something irreversible. */
.confirm-dialog .dialog-content {
    display: grid;
    gap: 1rem;
}

.confirm-name {
    overflow-wrap: anywhere;
    font-weight: 750;
}

.confirm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

/* A summary that lists sentences is not enough: each error points at its
   field, and the field carries the message too. */
.validation-summary-heading {
    font-weight: 750;
}

.validation-summary ul {
    margin: 0;
    padding-inline-start: 1.2rem;
}

.field-error {
    color: var(--color-conflict);
    font-size: 0.9rem;
}

.required-marker {
    color: var(--color-conflict);
    margin-inline-start: 0.15rem;
}

.required-legend {
    color: color-mix(in srgb, var(--color-text) 68%, transparent);
    font-size: 0.9rem;
}

.travel-form-section,
.travel-detail-section {
    display: grid;
    gap: 1rem;
    grid-column: 1 / -1;
    padding-block: 1rem;
    border-top: 1px solid
        color-mix(in srgb, var(--color-text) 12%, transparent);
}

.travel-entry-list,
.travel-entry,
.travel-value-grid {
    display: grid;
    gap: 1rem;
}

.travel-entry {
    padding: 1rem;
    border: 1px solid
        color-mix(in srgb, var(--color-text) 12%, transparent);
    border-radius: var(--shell-radius);
    background: var(--color-surface);
}

.travel-media-preview {
    display: block;
    width: min(100%, 32rem);
    height: auto;
    margin-top: 1rem;
    border-radius: var(--shell-radius);
}

.travel-value-grid {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

@media (max-width: 40rem) {
    .travel-delete-dialog,
    .confirm-dialog {
        width: 100%;
        max-width: none;
        margin: auto 0 0;
        border-radius: var(--shell-radius) var(--shell-radius) 0 0;
    }
}

.archive-filters,
.archive-inline-edit {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

/* Naming an area is a small, separate act, so it stands as its own block
   above the filters rather than becoming a sixth control inside them. */
.archive-area-form {
    background: var(--color-surface);
    border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
    border-radius: 1.1rem;
    display: grid;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
}

/* The archive landing view is for reading the archive and its posts.
   Area setup and capture diagnostics remain available to their workflows,
   but do not compete with the primary mobile view. */
.archive-tools > summary {
    cursor: pointer;
    padding-block: 1rem;
}

.archive-area-form h2 {
    margin: 0;
}

.archive-area-form button {
    justify-self: start;
}

.archive-selected-analysis {
    background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
    border-radius: 1.1rem;
    display: grid;
    gap: 0.65rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
}

.archive-selected-analysis h2,
.archive-selected-analysis p {
    margin: 0;
}

.archive-selected-analysis button {
    justify-self: start;
}

.archive-filters label,
.archive-inline-edit label {
    display: grid;
    gap: 0.4rem;
}

.archive-item-documentation {
    display: grid;
    gap: 1rem;
    grid-column: 1 / -1;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.archive-item-documentation legend,
.archive-item-wide {
    grid-column: 1 / -1;
}

.archive-filter-actions,
.archive-item-actions,
.archive-pagination,
.archive-summary {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.archive-summary {
    justify-content: space-between;
    margin: 1.5rem 0;
}

.archive-workspace--recent-first > .section-heading { order: 2; }
.archive-workspace--recent-first > [data-archive-content] { order: 1; }
.archive-workspace--recent-first > [data-archive-unlock] { order: 1; }
.archive-workspace--recent-first > [data-archive-unlocked] { order: 3; }
.archive-workspace--recent-first > [data-archive-live-status] { order: 4; }
.archive-workspace--recent-first > [data-archive-content]:not([hidden]) {
    display: flex;
    flex-direction: column;
}
.archive-workspace--recent-first [data-archive-content] > .archive-summary { order: 1; }
.archive-workspace--recent-first [data-archive-content] > .archive-item-list { order: 2; }
.archive-workspace--recent-first [data-archive-content] > .archive-pagination { order: 3; }
.archive-workspace--recent-first [data-archive-content] > .archive-tools,
.archive-workspace--recent-first [data-archive-content] > .archive-filters { order: 4; }
.archive-workspace--recent-first [data-archive-content] > .empty-state,
.archive-workspace--recent-first [data-archive-content] > .archive-analysis-hits { order: 2; }

.archive-lock-state,
.archive-list-hint {
    overflow-wrap: anywhere;
}

.archive-capture-overview {
    display: grid;
    gap: 0.65rem;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--color-accent) 7%, var(--color-surface));
}

.archive-capture-overview h2,
.archive-capture-overview p {
    margin: 0;
}

.archive-capture-overview__row {
    display: grid;
    gap: 0.5rem;
    padding-top: 0.65rem;
    border-top: 1px solid color-mix(in srgb, var(--color-accent) 18%, transparent);
}

.archive-capture-overview__media {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.archive-capture-dialog {
    width: min(92vw, 70rem);
    max-height: 90vh;
}

.archive-capture-dialog__images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.75rem;
    max-height: 70vh;
    overflow: auto;
}

.archive-capture-dialog__images img {
    width: 100%;
    max-height: 28rem;
    object-fit: contain;
    border-radius: 0.75rem;
    background: var(--color-background);
}

.archive-item-list {
    display: grid;
    gap: 0.4rem;
}

.archive-analysis-hits {
    margin-block: 1.5rem;
}

[data-archive-analysis-hit-list] {
    display: grid;
    gap: 0.75rem;
}

.archive-analysis-hit {
    background: var(--color-surface);
    border: 1px solid var(--color-focus);
    border-radius: var(--shell-radius);
    padding: 1rem;
}

.archive-item-card {
    background: var(--color-surface);
    border: 1px solid var(--color-focus);
    border-radius: 1rem;
    padding: 0;
}

.archive-workspace[data-item-open="true"] [data-archive-content] > :not(.archive-item-list),
.archive-workspace[data-item-open="true"] > .section-heading,
.archive-workspace[data-item-open="true"] .archive-item-card:not([data-open="true"]) {
    display: none;
}
.archive-workspace [data-archive-lock-state] { display: none; }

.archive-item-detail > details,
.archive-detail-section,
.archive-edit-more {
    padding: 0.8rem;
    border: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent);
    border-radius: 0.5rem;
}

.archive-item-detail summary {
    scroll-margin-top: calc(var(--shell-header-height) + 1rem);
    cursor: pointer;
    font-weight: 650;
    padding: 0.4rem 0;
}

.archive-edit-more { grid-column: 1 / -1; }
.archive-edit-more[open] > fieldset { margin-top: 0.75rem; }
.archive-item-detail > [data-item-back] { justify-self: start; }
.archive-workspace .archive-filters { margin-block: 1rem; }
.archive-report-tools { margin-block: 0.5rem; }
.archive-report-tools > summary { cursor: pointer; padding: 0.75rem 0; }
.archive-workspace .section-heading { margin-bottom: 1rem; }
.archive-workspace .archive-summary { margin-block: 0.5rem; }
.archive-filter-more { grid-column: 1 / -1; }
.archive-filter-more summary { cursor: pointer; padding: 0.75rem 0; }
.archive-filter-more[open] { display: grid; gap: 0.75rem; }
.capture-card textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.8rem;
    font: inherit;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid color-mix(in srgb, var(--color-text) 25%, transparent);
    border-radius: 0.5rem;
}
.archive-workspace .archive-item-summary { gap: 0.25rem; padding: 0.75rem; }
.archive-workspace .archive-item-card { border-color: color-mix(in srgb, var(--color-text) 20%, transparent); }
.archive-workspace .archive-item-summary { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.archive-workspace .archive-item-summary > .archive-item-title { grid-column: 1; grid-row: 1; }
.archive-workspace .archive-item-summary > .eyebrow { grid-column: 2; grid-row: 1; font-size: 0.7rem; }
.archive-workspace .archive-item-summary > .status-pill { grid-column: 2; grid-row: 2; font-size: 0.7rem; padding: 0.2rem 0.4rem; }
.archive-workspace .archive-item-summary-fields { grid-column: 1; grid-row: 2; }
.archive-workspace .archive-item-title { font-size: 1rem; }
.archive-workspace .archive-item-summary-fields { font-size: 0.85rem; }
.archive-workspace .archive-item-summary-fields > div { display: flex; gap: 0.3rem; }

@media (min-width: 800px) {
    .archive-workspace .archive-item-summary { grid-template-columns: 7rem minmax(10rem, 1fr) auto; align-items: center; }
    .archive-workspace .archive-item-summary-fields { grid-column: 2 / -1; }
}

/* A card title is a row in a list, not the title of a page. It inherited the
   page-heading size and came out three centimetres tall. */
.archive-item-card h2,
.archive-item-card h3 {
    margin-bottom: 0.35rem;
    font-size: 1.1rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.archive-item-card[data-conflict="true"] {
    border-color: var(--color-conflict);
}

.archive-item-card > header {
    align-items: start;
    display: flex;
    justify-content: space-between;
}

.archive-item-evidence {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.archive-item-evidence dd {
    margin: 0.25rem 0 0;
}

.archive-item-media {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-block: 1rem;
}

.archive-item-media-select {
    align-items: center;
    display: inline-flex;
    gap: 0.45rem;
}

.archive-item-media-select input {
    accent-color: var(--color-accent);
    block-size: 1.25rem;
    inline-size: 1.25rem;
}

.archive-item-documentation-summary,
.archive-item-analysis-observations,
.archive-item-value-history,
.archive-item-reviews,
.archive-item-analysis-comparison,
.archive-item-timeline,
.archive-item-matches {
    border-top: 1px solid
        color-mix(in srgb, var(--color-text) 12%, transparent);
    display: grid;
    gap: 0.65rem;
    margin-top: 1rem;
    padding-top: 1rem;
}

.archive-item-documentation-summary p,
.archive-item-analysis-comparison p {
    margin: 0;
    overflow-wrap: anywhere;
}

.archive-item-timeline ol {
    margin: 0;
    padding-inline-start: 1.25rem;
}

.archive-item-review {
    align-items: center;
    border-top: 1px solid var(--color-focus);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-block: 0.75rem;
}

.archive-item-review p {
    flex: 1 1 14rem;
    margin: 0;
}

[data-archive-media-dialog] {
    padding: 1rem;
}

[data-archive-media-image] {
    display: block;
    width: 100%;
    height: auto;
    max-height: 70vh;
    margin-block: 1rem;
    object-fit: contain;
    border-radius: var(--shell-radius);
}

.archive-pagination {
    justify-content: center;
    margin-top: 1.5rem;
}

.archive-live-status:focus {
    outline: 2px solid var(--color-focus);
}

.proof-artifacts {
    display: grid;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.travel-workspace {
    padding-block: clamp(2rem, 6vw, 5rem);
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
}

.travel-top-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.travel-unlock,
.travel-filters,
.travel-form {
    margin-block: 1.5rem;
    padding: 1rem;
    display: grid;
    align-items: end;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
    border-radius: 1rem;
    background: var(--color-surface);
}

.travel-unlock label,
.travel-filters label,
.travel-form label {
    display: grid;
    gap: 0.4rem;
}

.travel-passphrase-field {
    display: grid;
    grid-column: 1 / -1;
    gap: .55rem;
    min-width: 0;
}

.travel-passphrase-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .65rem;
}

.travel-passphrase-guidance {
    color: color-mix(in srgb, var(--color-text) 68%, transparent);
    font-size: .95rem;
    line-height: 1.55;
    margin: 0;
}

.travel-unlock[hidden],
.travel-unlocked[hidden],
[data-travel-create][hidden] {
    display: none;
}

.travel-unlocked {
    margin-block: 1.5rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--color-accent) 9%, var(--color-surface));
}

.travel-unlocked p {
    margin: 0;
}

.travel-form-section,
.travel-entry-list,
.travel-entry,
.travel-pricing-controls,
.travel-value-grid,
.travel-form-guidance {
    min-width: 0;
    max-width: 100%;
}

.travel-entry {
    margin-inline: 0;
}

.travel-entry input,
.travel-entry select,
.travel-entry textarea,
.travel-filters input,
.travel-filters select,
.travel-form > label input,
.travel-form > label select,
.travel-form > label textarea {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.travel-entry button,
.travel-form-guidance {
    overflow-wrap: anywhere;
}

@media (max-width: 42rem) {
    .travel-passphrase-control { grid-template-columns: 1fr; }

    .travel-entry,
    .travel-value-grid,
    .travel-pricing-controls {
        grid-template-columns: minmax(0, 1fr);
    }

    .travel-entry {
        padding-inline: 0.75rem;
    }
}

.travel-list {
    display: grid;
    gap: 1rem;
}

.travel-card {
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
    border-radius: 1rem;
    background: var(--color-surface);
}

.travel-card a {
    padding: 1.1rem;
    display: block;
    text-decoration: none;
}

.travel-card a:hover {
    border-radius: inherit;
    background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}

.travel-card h2,
.travel-card p {
    margin: 0;
    overflow-wrap: anywhere;
}

.travel-card p {
    margin-top: 0.45rem;
    color: color-mix(in srgb, var(--color-text) 65%, transparent);
}

.travel-pagination,
.travel-actions {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.travel-details {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.travel-details div {
    min-width: 0;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
    border-radius: 1rem;
    background: var(--color-surface);
}

.travel-details dt {
    font-weight: 750;
}

.travel-details dd {
    margin: 0.35rem 0 0;
    overflow-wrap: anywhere;
}

.travel-live-status {
    min-height: 1.5rem;
}

.travel-live-status:not(:empty) {
    padding: .8rem 1rem;
    border-left: .3rem solid var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 9%, var(--color-surface));
}

.travel-live-status:focus {
    outline: 0.2rem solid var(--color-focus);
}

.proof-evidence {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.proof-evidence div {
    background: var(--color-surface);
    border: 1px solid var(--color-focus);
    border-radius: 1rem;
    min-width: 0;
    padding: 1rem;
}

.proof-evidence dd {
    margin: 0.4rem 0 0;
    overflow-wrap: anywhere;
}

.proof-actions,
.archive-item-proof-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* A member row folds like an archive row: a few columns on desktop, stacked
   on a phone, with the rest of the membership behind the fold. */
.family-member-summary {
    display: grid;
    gap: 0.5rem;
    align-items: baseline;
    padding: 0.75rem 0;
    color: inherit;
    text-decoration: none;
    grid-template-columns: 2fr repeat(3, 1fr);
}

.family-member-summary:hover {
    text-decoration: underline;
}

.family-member-name {
    font-weight: 700;
}

.family-member-detail {
    display: grid;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid
        color-mix(in srgb, var(--color-text) 12%, transparent);
}

.family-member-change {
    display: grid;
    gap: 0.5rem;
}

@media (max-width: 40rem) {
    .family-member-summary {
        grid-template-columns: 1fr;
    }
}

/* The three actions that cannot be taken back sit apart from the reversible
   ones, and the confirmation that carries them is a bottom sheet on a phone. */
.archive-item-danger {
    display: grid;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding: 1rem;
    border: 1px solid
        color-mix(in srgb, var(--color-conflict) 45%, transparent);
    border-radius: var(--shell-radius);
}

.archive-item-danger h3 {
    margin: 0;
    font-size: 1rem;
}

.archive-item-danger-actions,
.archive-confirm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.archive-confirm-dialog .dialog-content {
    display: grid;
    gap: 1rem;
}

.archive-confirm-name {
    margin: 0;
    overflow-wrap: anywhere;
    font-weight: 750;
}

@media (max-width: 40rem) {
    .archive-confirm-dialog {
        width: 100%;
        max-width: none;
        margin: auto 0 0;
        border-radius: var(--shell-radius) var(--shell-radius) 0 0;
    }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 100;
    padding: 0.7rem 1rem;
    border-radius: var(--shell-radius);
    background: var(--color-accent);
    color: var(--color-on-accent);
    font-weight: 800;
    transform: translateY(-160%);
}

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

.vault-header {
    position: sticky;
    top: 0;
    z-index: 40;
    height: var(--shell-header-height);
    border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
    background: color-mix(in srgb, var(--color-surface) 94%, transparent);
    backdrop-filter: blur(1rem);
}

.vault-header__inner {
    height: 100%;
    padding-inline: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.vault-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    margin-right: auto;
    font-weight: 850;
    letter-spacing: -0.025em;
    text-decoration: none;
}

.vault-brand .brand-mark {
    width: 1.75rem;
}

.vault-public-nav ul,
.vault-profile ul,
.vault-sidebar ul,
.vault-footer ul {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    list-style: none;
}

.vault-public-nav a,
.vault-profile a,
.vault-sidebar a,
.vault-footer a {
    border-radius: var(--shell-radius);
    text-decoration: none;
}

.vault-public-nav a {
    display: inline-flex;
    padding: 0.55rem 0.7rem;
    font-weight: 700;
}

.vault-preferences {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.vault-preference,
.vault-theme-button,
.vault-menu-button,
.vault-sidebar__close,
.vault-profile summary {
    min-width: 2.65rem;
    min-height: 2.65rem;
    border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
    border-radius: var(--shell-radius);
    background: var(--color-background);
    color: var(--color-text);
}

.vault-preference {
    width: auto;
    max-width: 8rem;
    padding-inline: 0.45rem;
    font-size: 0.78rem;
    font-weight: 850;
}

#shell-culture {
    flex: 0 0 6rem;
}

#shell-currency {
    flex: 0 0 6.5rem;
}

.vault-theme-button,
.vault-menu-button,
.vault-sidebar__close {
    cursor: pointer;
}

.vault-menu-button,
.vault-sidebar__close {
    display: none;
}

.vault-profile {
    position: relative;
}

.vault-profile summary {
    display: grid;
    place-items: center;
    border-radius: 50%;
    cursor: pointer;
    font-weight: 850;
    list-style: none;
}

.vault-profile summary::-webkit-details-marker {
    display: none;
}

.vault-profile__menu {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    width: min(19rem, calc(100vw - 2rem));
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
    border-radius: var(--shell-radius);
    background: var(--color-surface);
    box-shadow: 0 1rem 3rem color-mix(in srgb, var(--color-text) 16%, transparent);
}

.vault-profile__menu p {
    overflow: hidden;
    color: color-mix(in srgb, var(--color-text) 65%, transparent);
    font-size: 0.82rem;
    text-overflow: ellipsis;
}

.vault-profile__menu ul {
    display: grid;
}

.vault-profile__menu a,
.vault-profile__menu button {
    width: 100%;
    padding: 0.65rem;
    display: block;
    text-align: left;
}

.vault-workspace {
    min-height: 0;
    flex: 1 0 auto;
    display: grid;
    grid-template-columns: var(--shell-sidebar-width) minmax(0, 1fr);
}

.vault-workspace--public {
    display: block;
}

.vault-workspace > main {
    width: min(74rem, calc(100% - 3rem));
    min-width: 0;
}

.vault-sidebar {
    position: sticky;
    top: var(--shell-header-height);
    height: calc(100vh - var(--shell-header-height));
    padding: 1.4rem 1rem;
    border-right: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
    background: color-mix(in srgb, var(--color-surface) 88%, transparent);
}

.vault-sidebar section + section {
    margin-top: 2rem;
}

.vault-sidebar h2 {
    margin: 0 0 0.5rem 0.7rem;
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.vault-sidebar ul {
    display: grid;
}

.vault-sidebar a {
    padding: 0.7rem;
    display: block;
    font-weight: 700;
}

.vault-sidebar a:hover,
.vault-sidebar a[aria-current="page"],
.vault-public-nav a:hover,
.vault-public-nav a[aria-current="page"] {
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    color: var(--color-accent);
}

.vault-overlay {
    display: none;
}

/* The footer follows the content so it never covers controls or reading. */
.vault-footer {
    z-index: 10;
    border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
    backdrop-filter: blur(0.6rem);
}

.vault-footer__inner {
    width: min(90rem, calc(100% - 2rem));
    margin: auto;
    padding: 0.45rem 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem 1.25rem;
}

.vault-footer p {
    margin: 0;
    color: color-mix(in srgb, var(--color-text) 62%, transparent);
    font-size: 0.78rem;
}

.vault-footer__owner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
}

.vault-footer__identity {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-inline-start: auto;
    overflow-wrap: anywhere;
}

.vault-footer a {
    padding: 0.4rem;
    font-size: 0.82rem;
}

@media (max-width: 48rem) {
    .travel-unlock,
    .travel-filters,
    .travel-form,
    .travel-details {
        grid-template-columns: 1fr;
    }

    .travel-card {
        width: 100%;
    }

    .header-inner {
        min-height: auto;
        padding: 0.8rem 0;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .brand {
        margin-right: auto;
    }

    .navigation--header {
        order: 3;
        width: 100%;
        overflow-x: auto;
    }

    .hero,
    .account-shell,
    .privacy-band {
        grid-template-columns: 1fr;
    }

    .hero {
        padding-top: 4rem;
    }

    .hero .proof-card {
        margin-top: 0;
    }

    .step-grid,
    .metric-grid,
    .pricing-card,
    .capture-form {
        grid-template-columns: 1fr;
    }

    .pricing-range,
    .capture-preview ul {
        grid-template-columns: 1fr;
    }

    .section-heading {
        align-items: start;
        flex-direction: column;
    }

    .help-button > span:last-child {
        display: none;
    }

    .vault-header__inner {
        padding-inline: 0.6rem;
        gap: 0.35rem;
    }

    .vault-brand > span:last-child,
    .vault-public-nav li:first-child,
    .vault-preference[title] {
        font-size: 0.72rem;
    }

    .vault-menu-button,
    .vault-sidebar__close {
        display: inline-grid;
        place-items: center;
    }

    .vault-public-nav {
        display: none;
    }

    .vault-workspace {
        display: block;
    }

    .vault-workspace > main {
        width: min(100% - 2rem, 74rem);
    }

    .vault-overlay {
        position: fixed;
        inset: var(--shell-header-height) 0 0;
        z-index: 45;
        width: 100%;
        border: 0;
        display: block;
        background: var(--shell-overlay);
    }

    .vault-overlay[hidden] {
        display: none;
    }

    .vault-sidebar {
        position: fixed;
        inset: var(--shell-header-height) auto 0 0;
        z-index: 50;
        width: min(var(--shell-sidebar-width), calc(100vw - 3rem));
        height: auto;
        transform: translateX(-105%);
    }

    .vault-sidebar[data-open] {
        transform: translateX(0);
    }

    .vault-sidebar__close {
        margin: 0 0 1rem auto;
    }

    .vault-footer__inner {
        align-items: start;
        flex-direction: column;
    }

    .vault-footer ul {
        flex-wrap: wrap;
    }
}

@media (max-width: 26rem) {
    .vault-header__inner {
        min-width: 0;
        max-width: 100%;
        overflow: visible;
        padding-inline: 0.5rem;
        gap: 0.2rem;
    }

    .vault-brand,
    .vault-preferences {
        min-width: 0;
    }

    .vault-preferences {
        flex-shrink: 1;
    }

    .vault-preference {
        min-width: 0;
        max-width: 3.1rem;
        padding-inline: 0.2rem;
    }

    #shell-culture {
        flex: 0 0 5.6rem;
        width: 5.6rem;
        max-width: 5.6rem;
    }

    #shell-currency {
        flex: 0 0 4.6rem;
        width: 4.6rem;
        max-width: 4.6rem;
    }

    .vault-profile,
    .vault-theme-button,
    .vault-menu-button {
        flex: 0 0 auto;
    }

    .help-button {
        flex: 0 0 2.65rem;
        width: 2.65rem;
        overflow: hidden;
        padding-inline: 0.45rem;
    }

    .help-button > span:last-child {
        display: none;
    }

    .vault-profile__menu {
        position: fixed;
        top: calc(var(--shell-header-height) - 0.1rem);
        right: 0.5rem;
        z-index: 60;
        width: min(19rem, calc(100vw - 1rem));
    }

    .vault-brand > span:last-child {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .skip-link,
    .vault-sidebar {
        transition: transform 160ms ease-out;
    }
}

/* Help is a drawer, not a box dropped in the middle of what the reader was
   reading. It comes in from the right on a desktop and up from the bottom on
   a phone, so the page underneath stays where the eye left it. */
[data-help-dialog] {
    width: min(30rem, calc(100% - 2rem));
    height: 100dvh;
    max-height: 100dvh;
    margin: 0 0 0 auto;
    border-radius: 1.2rem 0 0 1.2rem;
    overflow-y: auto;
    translate: 100% 0;
    transition: translate 220ms ease-out;
}

[data-help-dialog][data-open] {
    translate: 0 0;
}

[data-help-dialog] .dialog-content {
    display: grid;
    align-content: start;
    gap: 1rem;
}

@media (max-width: 48rem) {
    [data-help-dialog] {
        width: 100%;
        /* The browser caps a dialog's width on its own, which leaves a bottom
           sheet floating with a gutter on each side instead of edge to edge. */
        max-width: none;
        height: auto;
        max-height: 85dvh;
        margin: auto 0 0;
        border-radius: 1.2rem 1.2rem 0 0;
        translate: 0 100%;
    }

    [data-help-dialog][data-open] {
        translate: 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-help-dialog] {
        transition: none;
    }
}

.password-field {
    position: relative;
    display: block;
    min-width: 0;
    max-width: 100%;
}

.password-field input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    padding-right: 5.5rem;
}

.password-field__toggle {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    min-height: 2.65rem;
    border: 1px solid color-mix(in srgb, var(--color-text) 28%, transparent);
    border-radius: 0.5rem;
    padding: 0.35rem 0.7rem;
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
}

.password-field__toggle:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.password-field__toggle:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.account-status {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border-left: 4px solid var(--color-accent);
    border-radius: 0.5rem;
    background: var(--color-surface);
    color: var(--color-text);
}

/* Surfaces that were rendered with class names the stylesheet never defined.
   Everything below leans on the same tokens and spacing as the rest of the
   shell; nothing here introduces a colour of its own. */

.hero-copy {
    display: grid;
    align-content: center;
    gap: 0;
}

@media (min-width: 48.01rem) {
    .hero-copy {
        grid-template-columns: max-content minmax(0, 1fr);
        column-gap: 1.25rem;
    }

    .hero-copy > .eyebrow,
    .hero-copy > h1,
    .hero-copy > .lead {
        grid-column: 1 / -1;
    }

    .hero-copy > .navigation--home-primary {
        grid-column: 1;
        grid-row: 4;
    }

    .hero-copy > .trust-line {
        grid-column: 2;
        grid-row: 4;
        align-self: center;
        margin: 0;
    }
}

.field-hint {
    margin: 0.35rem 0 0;
    color: color-mix(in srgb, var(--color-text) 68%, transparent);
    font-size: 0.9rem;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.archive-workspace,
.proof-details {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-content: start;
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
    width: 100%;
}

.archive-item-card,
.archive-item-detail,
.archive-item-summary {
    min-width: 0;
    max-width: 100%;
}

.archive-unlock {
    display: grid;
    gap: 0.75rem;
    width: 100%;
    max-width: 28rem;
}

.capture-shell,
.capture-form,
.capture-card,
.archive-workspace > *,
.archive-item-list,
.archive-item-detail,
.archive-item-detail fieldset,
.archive-item-detail label {
    min-inline-size: 0;
    max-inline-size: 100%;
}

.capture-shell,
.archive-item-detail {
    overflow-wrap: anywhere;
}

.capture-shell :is(input:not([type=checkbox]):not([type=radio]), select, textarea):not(.visually-hidden),
.archive-workspace :is(input:not([type=checkbox]):not([type=radio]), select, textarea):not(.visually-hidden) {
    min-inline-size: 0;
    max-inline-size: 100%;
    inline-size: 100%;
    font-size: max(1rem, 16px);
}

.capture-shell .visually-hidden,
.archive-workspace .visually-hidden {
    inline-size: 1px;
    max-inline-size: 1px;
}

.archive-workspace .archive-item-summary-fields > div { flex-wrap: wrap; }
.capture-shell { scroll-margin-top: var(--shell-header-height); }

.archive-unlock label,
.archive-unlock input,
.archive-unlocked label,
.archive-unlocked input {
    display: grid;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.archive-unlocked {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.75rem;
    min-width: 0;
    max-width: 100%;
}

.archive-list {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.proof-public-result {
    display: grid;
    gap: 0.75rem;
    padding: 1.25rem;
    border-radius: 0.9rem;
    background: var(--color-surface);
}

.admin-shell {
    display: grid;
    gap: 1.5rem;
    align-content: start;
    padding: 3rem 0;
}

.admin-card {
    display: grid;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: 0.9rem;
    background: var(--color-surface);
}

.admin-copy {
    display: grid;
    gap: 0.5rem;
    color: color-mix(in srgb, var(--color-text) 68%, transparent);
}

.admin-message,
.admin-status {
    padding: 0.8rem 1rem;
    border-radius: 0.65rem;
    background: color-mix(in srgb, var(--color-focus) 12%, transparent);
    color: var(--color-text);
}

.admin-message:empty,
.admin-status:empty {
    display: none;
}

/* An interim measure only. `lists-forms.md` requires stacked rows on a phone
   rather than a wide table that scrolls sideways; that rebuild is tracked
   separately. Until then the table at least gets a real scroll container
   instead of bursting the page. */
.table-scroll {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid
        color-mix(in srgb, var(--color-text) 14%, transparent);
    text-align: left;
    vertical-align: top;
}

.admin-table th {
    font-weight: 750;
}

/* The folded row. Pressing anywhere on it unfolds the rest in place, so the
   whole summary is the button rather than a small chevron beside it. */
.archive-item-summary {
    display: grid;
    gap: 0.5rem;
    width: 100%;
    padding: 1rem;
    border: 0;
    border-radius: 0.9rem;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    text-align: left;
}

.archive-item-summary:hover {
    background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}

.archive-item-title {
    display: block;
    font-size: 1.2rem;
    font-weight: 750;
}

.archive-item-summary-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.5rem;
    margin: 0;
}

.archive-item-summary-fields dt {
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
    font-size: 0.82rem;
}

.archive-item-summary-fields dd {
    margin: 0;
}

.archive-item-detail {
    display: grid;
    gap: 1rem;
    padding: 0 1rem 1rem;
}

/* Three dropdowns gave no room to say what a choice affects. The surfaces
   are large enough to hit on a phone and carry the explanation with them. */
.choice-group {
    display: grid;
    gap: 0.6rem;
    margin: 0 0 1.5rem;
    padding: 0;
    border: 0;
}

.choice-group legend {
    padding: 0;
    font-weight: 750;
}

.choice-explanation {
    margin: 0 0 0.4rem;
    color: color-mix(in srgb, var(--color-text) 68%, transparent);
    font-size: 0.9rem;
}

.choice {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    min-height: 3rem;
    padding: 0.75rem 1rem;
    border: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent);
    border-radius: 0.75rem;
    cursor: pointer;
}

.choice input {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
}

.choice:hover,
.choice:focus-within {
    border-color: var(--color-accent);
}

.choice:has(input:checked) {
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

/* A document is a stack of sections, each with room to breathe. */
.information-section {
    margin-top: 2rem;
}

.information-section h2 {
    margin-bottom: 0.6rem;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
}

.information-section p {
    max-width: 44rem;
    margin-bottom: 0.8rem;
    color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

/* The status page reports what it found, one part per line. */
.status-components {
    margin: 0 0 0.75rem;
    padding: 0;
    display: grid;
    gap: 0.4rem;
    list-style: none;
    max-width: 44rem;
}

.status-components li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
    border-radius: 0.75rem;
}

/* Cancel and confirm side by side, with cancel first so the safe choice
   is the one reached first by keyboard. */
.dialog-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.2rem;
}

.archive-field-choice { min-width: 0; position: relative; }
.archive-field-suggestions { position: absolute; inset-inline: 0; top: 100%; z-index: 10; max-height: 14rem; overflow-y: auto; border: 1px solid var(--color-focus); border-radius: .5rem; }
.archive-field-suggestions button { display: block; width: 100%; text-align: start; padding: .75rem; border: 0; background: var(--color-surface); color: var(--color-text); overflow-wrap: anywhere; }
.archive-field-suggestions button[aria-selected="true"], .archive-field-suggestions button:hover { background: color-mix(in srgb, var(--color-focus) 18%, var(--color-surface)); }