/* The family page: one card under Jenny's logo. Same palette and type as the
   admin screens (src/web/admin/admin.css), sized for phones first. */

/* Inter, self-hosted (SIL Open Font License; see src/web/fonts/OFL-Inter.txt). */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --bg: #f6f6f3;
    --surface: #ffffff;
    --surface-muted: #fafaf8;
    --border: #e4e5df;
    --border-strong: #d3d5cd;
    --surface-hover: #f4f5f1;
    --text: #1c2019;
    --text-muted: #5a5f54;

    --primary: #5F7E46;
    --primary-hover: #506b3b;
    --primary-soft: #eef3ea;
    --primary-text: #3f5a2c;
    --ring: 0 0 0 3px rgba(95, 126, 70, 0.22);

    --danger: #b42318;
    --danger-soft: #fef3f2;
    --danger-border: #f4c7c2;

    --radius-sm: 6px;
    --radius: 8px;
    --shadow-xs: 0 1px 2px rgba(20, 24, 16, 0.05);
    --shadow-sm: 0 1px 3px rgba(20, 24, 16, 0.07), 0 1px 2px rgba(20, 24, 16, 0.04);
    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color-scheme: light;
}

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

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

body {
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.55;
    color: var(--text);
    background-color: var(--bg);
    min-height: 100vh;
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[hidden] { display: none !important; }

.site-head {
    display: flex;
    justify-content: center;
    padding: 20px 16px;
    background-color: var(--surface);
    border-bottom: 1px solid var(--border);
}

.logo { display: block; width: auto; height: 44px; }

.card {
    display: grid;
    gap: 20px;
    width: calc(100% - 32px);
    max-width: 560px;
    margin: 24px auto 0;
    padding: 28px 24px;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

@media (min-width: 600px) {
    .site-head { padding: 24px 16px; }
    .logo { height: 52px; }
    .card { margin-top: 48px; padding: 40px; }
}

h1 { font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; }
h1:focus { outline: none; }

h2 { font-size: 15px; font-weight: 600; }

section, form { display: grid; gap: 16px; }

strong { font-weight: 600; }

.lead { font-size: 17px; line-height: 1.6; }

.hint { font-size: 14px; color: var(--text-muted); }

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

.field { display: grid; gap: 8px; }

label { font-size: 14px; font-weight: 500; }

input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    font: inherit;
    font-size: 16px; /* 16px keeps iOS from zooming on focus */
    width: 100%;
    height: 46px;
    padding: 0 12px;
    color: var(--text);
    background-color: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xs);
    transition: border-color 0.15s, box-shadow 0.15s;
}

input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }

textarea {
    height: auto;
    min-height: 104px;
    padding: 10px 12px;
    line-height: 1.5;
    resize: vertical;
}

select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a5f54' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    cursor: pointer;
}

input:disabled { color: var(--text-muted); background-color: var(--surface-muted); }

input[type="checkbox"], input[type="radio"] {
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    flex: none;
    accent-color: var(--primary);
    cursor: pointer;
}

input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

#code {
    height: 56px;
    font-size: 26px;
    letter-spacing: 0.4em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

button, .button {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    padding: 0 18px;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background-color: var(--primary);
    border: 1px solid transparent;
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s;
}

button.secondary {
    color: var(--text);
    background-color: var(--surface);
    border-color: var(--border-strong);
}

button.secondary:hover { background-color: var(--surface-hover); }

button:hover, .button:hover { background-color: var(--primary-hover); }

button:disabled { opacity: 0.55; cursor: wait; }

button:focus-visible, a:focus-visible, summary:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

button.link {
    width: auto;
    height: auto;
    justify-self: center;
    padding: 8px 10px;
    font-size: 15px;
    font-weight: 500;
    color: var(--primary-text);
    background: none;
    box-shadow: none;
}

button.link:hover { background-color: var(--primary-soft); }

.message {
    padding: 12px 14px;
    font-size: 15px;
    color: var(--danger);
    background-color: var(--danger-soft);
    border: 1px solid var(--danger-border);
    border-radius: var(--radius);
}

.message.ok {
    color: var(--primary-text);
    background-color: var(--primary-soft);
    border-color: #d5e2cc;
}

/* Where the code goes, with an envelope drawn in the sage color. */
.sent-to {
    padding: 12px 14px 12px 44px;
    font-size: 15px;
    color: var(--text-muted);
    background-color: var(--surface-muted);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F7E46' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3.5 6.5l8.5 6 8.5-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow-wrap: anywhere;
}

.sent-to strong { color: var(--text); }

/* The packet */

#packet { gap: 24px; }

.welcome { display: grid; gap: 10px; color: var(--text); }

.block { display: grid; gap: 10px; }

.fees { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }

.fees th, .fees td {
    padding: 10px 0;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border);
}

.fees th { font-size: 13px; font-weight: 500; color: var(--text-muted); }
.fees td:last-child, .fees th:last-child { padding-left: 16px; text-align: right; white-space: nowrap; }
.fees td strong { font-weight: 600; }
.fees .unit { display: block; font-size: 13px; color: var(--text-muted); }

.note {
    display: grid;
    gap: 8px;
    padding: 14px 16px;
    font-size: 15px;
    color: var(--primary-text);
    background-color: var(--primary-soft);
    border: 1px solid #d5e2cc;
    border-radius: var(--radius);
}

.note a { font-weight: 500; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
    input, button, .bar span { transition: none; }
}

/* The forms: overview --------------------------------------------------------- */

#overview { display: grid; gap: 28px; }

.progress { display: grid; gap: 10px; }
.progress:empty { display: none; }
.progress-text { font-size: 15px; color: var(--text-muted); }

.bar {
    height: 8px;
    overflow: hidden;
    background-color: var(--border);
    border-radius: 999px;
}

.bar span { display: block; height: 100%; background-color: var(--primary); border-radius: inherit; transition: width 0.3s; }

#section-groups { display: grid; gap: 24px; }
#section-groups:empty { display: none; }

.group { display: grid; gap: 8px; }

/* A group the family opens when they like: the optional history, the fee table. */
details.fold-group { display: block; }
details.fold-group[open] { display: grid; gap: 8px; }
.fold-group > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 12px;
    align-items: center;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
    background-color: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.fold-group > summary::-webkit-details-marker { display: none; }
.fold-group > summary .hint { grid-row: 2; }
.fold-group > summary::after { content: "+"; grid-row: 1 / span 2; grid-column: 2; font-size: 22px; color: var(--text-muted); }
.fold-group[open] > summary::after { content: "\2212"; }
.fold-group > summary:hover { background-color: var(--surface-hover); }

.sections {
    list-style: none;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.sections li + li { border-top: 1px solid var(--border); }

.section-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px 12px;
    padding: 12px 14px;
    color: var(--text);
    text-decoration: none;
}

.section-link:hover { background-color: var(--surface-hover); }
.section-title { font-weight: 500; }
.section-meta { grid-row: 2; font-size: 13px; color: var(--text-muted); }

.state {
    grid-row: 1 / span 2;
    grid-column: 2;
    padding: 3px 9px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--text-muted);
    background-color: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: 999px;
}

.state-draft .state { color: #1d4f91; background-color: #eef4fc; border-color: #cfe0f5; }
.state-done .state { color: var(--primary-text); background-color: var(--primary-soft); border-color: #d5e2cc; }
.state-skipped .state { color: #7a4d0b; background-color: #fdf6e8; border-color: #f1dfb8; }

/* The forms: one section ------------------------------------------------------- */

.section-view { display: grid; gap: 16px; }

.back {
    justify-self: start;
    padding: 4px 0;
    font-size: 15px;
    font-weight: 500;
}

.back::before { content: "\2190\00a0"; }

.section-sub { margin-top: -8px; }

.fields { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px 12px; }
.fields > * { grid-column: span 6; }
.fields > .w-third { grid-column: span 2; }

@media (min-width: 440px) {
    .fields > .w-half { grid-column: span 3; }
}

fieldset { border: 0; min-width: 0; }
fieldset.field { gap: 8px; }
legend { padding: 0; margin-bottom: 8px; font-size: 15px; font-weight: 500; line-height: 1.45; }
.field > label { font-size: 15px; line-height: 1.45; }
.field .hint { margin-top: -4px; }

.req {
    display: inline-block;
    margin-left: 8px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    vertical-align: 1px;
    color: var(--text-muted);
    background-color: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: 4px;
}

.options {
    overflow: hidden;
    background-color: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
}

.options label.option, .option-block { border-top: 1px solid var(--border); }
.options > :first-child { border-top: 0; }
.option-block label.option { border-top: 0; }

label.option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
    cursor: pointer;
}

label.option:hover { background-color: var(--surface-hover); }
label.option:has(input:checked) { background-color: var(--primary-soft); }

.option-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.option-text small { font-size: 13px; color: var(--text-muted); }
.option-text .req { justify-self: start; margin: 2px 0 0; }

.detail { padding: 0 14px 12px 46px; background-color: var(--primary-soft); }
.detail input:not([type="checkbox"]) { height: 40px; }

.confirm label.option {
    background-color: var(--surface-muted);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
}

.confirm label.option:has(input:checked) { background-color: var(--primary-soft); border-color: #c7d8bb; }

.suffixed { position: relative; display: flex; align-items: center; }
.suffixed input { padding-right: 64px; }
.suffixed span { position: absolute; right: 12px; font-size: 14px; color: var(--text-muted); pointer-events: none; }

.q-heading { display: grid; gap: 4px; padding-top: 8px; border-top: 1px solid var(--border); }
.q-heading h2 { font-size: 17px; }
.fields > .q-heading:first-child { padding-top: 0; border-top: 0; }

.note-box {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    font-size: 15px;
    background-color: #fdf6e8;
    border: 1px solid #f1dfb8;
    border-radius: var(--radius);
}

.note-box summary { font-weight: 500; color: var(--primary-text); cursor: pointer; }
.note-box details p { margin-top: 6px; color: var(--text-muted); }

.repeat { display: grid; gap: 12px; }
.repeat-list { display: grid; gap: 12px; }
.repeat-list:empty { display: none; }

.repeat-item {
    display: grid;
    gap: 12px;
    padding: 14px;
    background-color: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.repeat-item legend { float: left; width: 100%; margin: 0; font-size: 14px; font-weight: 600; }
.repeat-item .fields { gap: 12px; }
.repeat-item .field > label { font-size: 14px; }
.repeat .secondary { justify-self: start; width: auto; height: 42px; font-size: 15px; }
button.link.remove { justify-self: start; padding: 4px 0; font-size: 14px; }

.ages { display: grid; border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; }

.age-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px auto;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-top: 1px solid var(--border);
}

.age-row:first-child { border-top: 0; }
.age-row > label:first-child { font-size: 15px; }
.age-row input:not([type="checkbox"]) { height: 40px; }
.not-sure { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); white-space: nowrap; cursor: pointer; }
.not-sure input[type="checkbox"] { width: 18px; height: 18px; margin: 0; }

.field.invalid input:not([type="checkbox"]):not([type="radio"]),
.field.invalid select,
.field.invalid textarea,
.field.invalid .options,
.field.invalid .ages,
.field.invalid.confirm label.option { border-color: var(--danger); }

.error { font-size: 14px; font-weight: 500; color: var(--danger); }
.age { margin-top: 0; }

.save-status { min-height: 1.5em; }

.actions { display: grid; gap: 10px; }
.actions button { height: auto; min-height: 48px; padding: 11px 18px; line-height: 1.3; text-align: center; }

@media (min-width: 600px) {
    .actions { grid-template-columns: auto auto; justify-content: start; }
    .actions button { width: auto; }
}

/* Documents --------------------------------------------------------------------- */

.doc-view { display: grid; gap: 14px; font-size: 16px; line-height: 1.6; }
.doc-view h2 { margin-top: 8px; font-size: 17px; color: var(--primary-text); }
.doc-view h3 { margin-top: 4px; font-size: 16px; }
.doc-view .doc-list { display: grid; gap: 6px; padding-left: 22px; }
.doc-view .doc-list .doc-list { margin-top: 6px; }
.doc-view a { overflow-wrap: anywhere; }

.doc-box {
    display: grid;
    gap: 8px;
    padding: 14px 16px;
    background-color: var(--primary-soft);
    border: 1px solid #d5e2cc;
    border-radius: var(--radius);
}

.doc-checks { display: grid; gap: 10px; margin-top: 4px; }

label.doc-check {
    align-items: flex-start;
    font-size: 16px;
    font-weight: 500;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
}

.doc-fees { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.doc-fees th, .doc-fees td { padding: 10px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.doc-fees th { font-size: 13px; font-weight: 500; color: var(--text-muted); }
.doc-fees td:last-child, .doc-fees th:last-child { padding-left: 16px; text-align: right; white-space: nowrap; }

.doc-pending { padding: 0 4px; background-color: #fdf6e8; border: 1px dashed #e7c98c; border-radius: 4px; }

/* A long document folds into sections (doc-markdown.js, foldBlocks). */
.doc-fold { border-bottom: 1px solid var(--border); }
.doc-fold + .doc-fold { margin-top: -14px; }
details.doc-fold:first-of-type, .doc-open-all + .doc-fold { border-top: 1px solid var(--border); }

.doc-fold summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 2px;
    font-weight: 600;
    color: var(--primary-text);
    cursor: pointer;
    list-style: none;
}

.doc-fold summary::-webkit-details-marker { display: none; }
.doc-fold summary::after { content: "+"; margin-left: auto; font-size: 20px; font-weight: 400; line-height: 1; color: var(--text-muted); }
.doc-fold[open] summary::after { content: "\2212"; }
.doc-fold summary:hover { color: var(--text); }
.doc-fold summary .doc-heading { margin: 0; font-size: 16px; color: inherit; }
.doc-fold-title { font-size: 16px; }
.doc-fold-body { display: grid; gap: 12px; padding: 0 2px 16px; }
.doc-view .doc-open-all { justify-self: end; margin-bottom: -10px; padding: 4px 6px; font-size: 14px; }

.doc-fields {
    padding: 16px;
    background-color: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.note-box.decline { gap: 10px; }
.note-box.decline button { justify-self: start; width: auto; height: auto; min-height: 44px; }

a.button.secondary {
    color: var(--text);
    background-color: var(--surface);
    border: 1px solid var(--border-strong);
}

a.button.secondary:hover { background-color: var(--surface-hover); }

/* Signing ----------------------------------------------------------------------- */

.sign-list { display: grid; list-style: none; border: 1px solid var(--border); border-radius: var(--radius); counter-reset: doc; }

.sign-list li {
    display: grid;
    gap: 4px;
    padding: 12px 14px 12px 44px;
    border-top: 1px solid var(--border);
    counter-increment: doc;
    position: relative;
}

.sign-list li:first-child { border-top: 0; }
.sign-list li::before { content: counter(doc) "."; position: absolute; left: 16px; top: 12px; font-weight: 600; color: var(--text-muted); }
.sign-doc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; text-decoration: none; }
.sign-doc .sign-title { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sign-choice { font-size: 15px; }
.sign-choice.warn { color: #7a4d0b; }

.note-box.needs ul { display: grid; gap: 4px; padding-left: 20px; }
.needs-title { font-weight: 600; }

.block.ask .actions { margin-top: 4px; }

.signing { gap: 16px; padding-top: 20px; border-top: 1px solid var(--border); }
.statement { padding: 14px 16px; font-size: 15px; background-color: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--radius); }
.signing .label { font-size: 15px; font-weight: 500; }

.sig-pad {
    display: block;
    width: 100%;
    max-width: 560px;
    aspect-ratio: 3 / 1;
    background-color: var(--surface);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    touch-action: none;
    cursor: crosshair;
}

.sig-pad.off { opacity: 0.4; cursor: not-allowed; }
.signing button.link { justify-self: start; padding: 4px 0; font-size: 14px; }
.typed-signature { margin-top: 4px; border: 1px solid var(--border); border-radius: var(--radius); }

#signed { display: grid; gap: 16px; }

@media (min-width: 600px) {
    #signed .actions a.button { width: auto; }
}

/* Files ------------------------------------------------------------------------- */

.jenny-note p { white-space: pre-line; }

.file-slot {
    position: relative;
    display: grid;
    gap: 10px;
    padding: 16px;
    background-color: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.file-slot h2 { font-size: 16px; }
.file-slot .hint { margin-top: -4px; }

.file-list { display: grid; list-style: none; background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.file-list:empty { display: none; }

.file-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px 12px;
    padding: 10px 14px;
    border-top: 1px solid var(--border);
}

.file-list li:first-child { border-top: 0; }
.file-name { font-weight: 500; overflow-wrap: anywhere; }
.file-size { grid-row: 2; font-size: 13px; }
.file-list button.link.remove { grid-row: 1 / span 2; grid-column: 2; }

/* The real file input stays out of sight; the button opens it. */
.file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.file-slot > button.secondary { justify-self: start; width: auto; height: 44px; font-size: 15px; }
.file-status { min-height: 1.4em; overflow-wrap: anywhere; }
.file-status:empty { display: none; }
.file-status.error { font-weight: 500; color: var(--danger); }

.send-files { padding-top: 16px; border-top: 1px solid var(--border); }

#files-only, #sent { display: grid; gap: 16px; }

/* Cost estimate ------------------------------------------------------------------ */

.estimate-box {
    display: grid;
    gap: 8px;
    margin-top: 6px;
    padding: 14px 16px;
    background-color: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.estimate-box h3 { font-size: 16px; font-weight: 600; }
.estimate-box a.button { justify-self: start; width: auto; }

#estimate-only { display: grid; gap: 16px; }

.estimate-facts { display: grid; gap: 8px; }
.estimate-facts div { display: grid; grid-template-columns: minmax(96px, 30%) minmax(0, 1fr); gap: 12px; }
.estimate-facts dt { color: var(--text-muted); }
.estimate-facts dd { overflow-wrap: anywhere; white-space: pre-line; }

.estimate-table tfoot th { font-size: 15px; font-weight: 600; color: var(--text); border-bottom: 0; }
.estimate-table tfoot td { border-bottom: 0; }
.estimate-separate { display: grid; gap: 4px; padding-left: 20px; }

.estimate-details {
    padding: 12px 14px;
    font-size: 15px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.estimate-details summary { font-weight: 500; color: var(--primary-text); cursor: pointer; }
.estimate-details[open] { display: grid; gap: 10px; }
.estimate-details p { color: var(--text-muted); }

#estimate-only a.button { width: auto; }
#estimate-only button.link { justify-self: start; }

.sign-files { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); }
.sign-files-link { justify-self: start; font-weight: 500; }