* {
    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; }
.archive-workspace .archive-item-title {
    display: -webkit-box;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

@media (min-width: 800px) {
    .archive-workspace .archive-item-summary {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
    }
    .archive-workspace .archive-item-summary-fields { grid-column: 1 / -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;
}

.offline-shell {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 1rem;
}

.offline-shell > .settings-card {
    max-width: 32rem;
    width: 100%;
}

/* 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)); }