/* Stage 5.2 — Enquiry / Quote / Client intake front door styling. Additive only. */

.enquiry-list { display: flex; flex-direction: column; gap: 8px; }
.enquiry-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    width: 100%; text-align: left; padding: 14px 16px; border: 1px solid #e2e2e2;
    border-radius: 10px; background: #fff; cursor: pointer;
}
.enquiry-row:hover { border-color: var(--color-primary); }
.enquiry-row > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.enquiry-row strong { font-size: .9rem; }
.enquiry-row span { color: #666; font-size: .76rem; }
.enquiry-row small { color: #888; font-size: .72rem; }
.enquiry-row-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.enquiry-row-meta time { color: #888; font-size: .72rem; }

.enquiry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 900px) { .enquiry-grid { grid-template-columns: 1fr; } }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 8px 0 14px; }
.form-grid .full-width { grid-column: 1 / -1; }
.form-field { display: flex; flex-direction: column; gap: 4px; }
.form-field label { font-size: .72rem; color: #555; font-weight: 600; }
.form-field input, .form-field textarea, .form-field select { padding: 7px 9px; border: 1px solid #ccc; border-radius: 7px; font: inherit; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }

.document-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.document-list li { display: flex; flex-direction: column; gap: 1px; }
.document-list small { color: #888; font-size: .71rem; }

.line-items-heading { margin: 14px 0 6px; font-size: .9rem; }
.line-items { width: 100%; border-collapse: collapse; font-size: .8rem; }
.line-items th { text-align: left; color: #666; font-size: .7rem; padding: 4px 6px; border-bottom: 1px solid #e2e2e2; }
.line-items td { padding: 4px 6px; border-bottom: 1px solid #f0f0f0; }
.line-items input { width: 100%; padding: 5px 7px; border: 1px solid #ccc; border-radius: 6px; font: inherit; }
.line-items input.num { width: 80px; } .line-items input.unit { width: 90px; }
.link-button { background: none; border: none; color: #c0392b; cursor: pointer; font-size: .74rem; padding: 0; }

.quote-totals { display: flex; gap: 18px; justify-content: flex-end; margin: 12px 0; font-size: .84rem; }
.quote-totals strong { color: #111; }

/* THE ESTIMATE ON A PHONE (4 October 2026). Seven columns in 400px cut every description to eight letters
   - "Due dilig…" - and the Send button ran off its edge. Each line stacks: what it is across the top, then
   the numbers in a row of three, each with its name; the buttons wrap. */
@media (max-width: 600px) {
    .line-items thead { display: none; }
    .line-items, .line-items tbody { display: block; width: 100%; }
    .line-items tr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px 10px;
        padding: 10px 0;
        border-bottom: 1px solid #e2e2e2;
    }
    .line-items td { display: block; padding: 0; border: 0; min-width: 0; font-size: .9rem; }
    .line-items td:first-child { grid-column: 1 / -1; }
    .line-items td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        font-size: .7rem;
        font-weight: 600;
        color: #666;
    }
    .line-items input, .line-items input.num, .line-items input.unit { width: 100%; box-sizing: border-box; font-size: 16px; }
    .line-items input[type="checkbox"] { width: 22px; height: 22px; }
    .line-items td:last-child { align-self: end; text-align: right; }
    .line-items ~ .quote-totals { flex-wrap: wrap; justify-content: flex-start; gap: 6px 14px; }
    .line-items ~ .form-actions { flex-wrap: wrap; }
    .line-items ~ .form-actions > button { flex: 1 1 100%; white-space: normal; }
}

.secure-link { margin-top: 12px; padding: 12px; border: 1px dashed var(--color-primary-light); border-radius: 8px; background: #fff8f2; display: flex; flex-direction: column; gap: 4px; }
.secure-link code { word-break: break-all; font-size: .78rem; color: #333; }
.secure-link small { color: #8a6a4f; font-size: .72rem; }
.accepted-banner { margin-top: 12px; padding: 12px; border-radius: 8px; background: #eafaef; border: 1px solid #bfe6cd; }

.summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.summary-grid .full-width { grid-column: 1 / -1; }
.summary-grid div { display: flex; flex-direction: column; gap: 2px; }
.summary-grid span { color: #777; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; }
.summary-grid strong { font-size: .86rem; }
@media (max-width: 700px) { .summary-grid { grid-template-columns: 1fr; } }

.missing-list { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.missing-list label { display: flex; align-items: center; gap: 8px; font-size: .82rem; }
.review-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.review-actions textarea { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 7px; font: inherit; margin-bottom: 8px; }
.review-actions h3 { margin: 0 0 6px; font-size: .9rem; }
@media (max-width: 800px) { .review-actions { grid-template-columns: 1fr; } }

.error { color: #c0392b; font-size: .78rem; margin: 6px 0; }

/* ---- External portal ---- */
.external-portal { min-height: 100vh; background: #0d100f; color: #f7f2e8; display: flex; flex-direction: column; }
.external-portal-header { display: flex; align-items: baseline; gap: 12px; padding: 20px 28px; border-bottom: 1px solid #23282400; }
.external-brand { font-weight: 800; letter-spacing: .04em; color: var(--color-primary); font-size: 20px; }
.external-tag { color: #9aa39c; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.external-portal-body { flex: 1; display: flex; justify-content: center; padding: 28px 16px 48px; }
.external-portal-footer { text-align: center; padding: 16px; color: #7d867e; }

.external-card { width: 100%; max-width: 820px; background: #14100c; background: #fbf8f2; color: #201a12; border-radius: 16px; padding: 32px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.external-card h1 { font-size: 28px; margin: 6px 0 14px; }
.external-card h2 { font-size: 17px; margin: 22px 0 8px; }
.external-eyebrow { color: var(--color-primary); font-weight: 700; letter-spacing: .14em; font-size: 12px; margin: 0; }
.external-lede { color: #5a5147; }
.external-pre { white-space: pre-wrap; }
.external-hint { color: #6a6157; font-size: .82rem; }
.external-note { background: #fff3e8; border: 1px solid var(--color-primary-light); border-radius: 10px; padding: 12px 14px; margin: 12px 0; }

.external-table { width: 100%; border-collapse: collapse; font-size: .86rem; margin: 8px 0; }
.external-table th { text-align: left; color: #6a6157; font-size: .72rem; padding: 6px; border-bottom: 1px solid #e6ddce; }
.external-table td { padding: 6px; border-bottom: 1px solid #efe8dc; }
.external-totals { display: flex; gap: 18px; justify-content: flex-end; margin: 12px 0; font-size: .9rem; }

.external-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 8px 0 4px; }
.external-form .full-width { grid-column: 1 / -1; }
.external-form label { display: flex; flex-direction: column; gap: 4px; font-size: .74rem; font-weight: 600; color: #5a5147; }
.external-form input, .external-form textarea { padding: 8px 10px; border: 1px solid #d7cdbb; border-radius: 8px; font: inherit; background: #fff; }
@media (max-width: 640px) { .external-form { grid-template-columns: 1fr; } }

.external-declarations { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.external-declarations label { display: flex; align-items: center; gap: 8px; font-size: .84rem; }
.external-declarations label:last-child { flex-direction: column; align-items: flex-start; }
.external-declarations input[type=text], .external-declarations label > input:not([type=checkbox]) { padding: 7px 9px; border: 1px solid #d7cdbb; border-radius: 8px; font: inherit; }

.external-actions { display: flex; gap: 12px; margin-top: 20px; }
.external-primary { background: var(--color-primary); color: #fff; border: none; border-radius: 9px; padding: 11px 22px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block; }
.external-primary:disabled { opacity: .5; cursor: not-allowed; }
.external-secondary { background: #fff; color: #333; border: 1px solid #cabfad; border-radius: 9px; padding: 11px 22px; cursor: pointer; }
.external-error { color: #c0392b; font-size: .82rem; }
.external-saved { color: #2e7d46; font-size: .82rem; }

.completion-bar { height: 10px; background: #ece3d4; border-radius: 6px; overflow: hidden; margin: 6px 0 4px; }
.completion-fill { height: 100%; background: var(--color-primary); transition: width .2s ease; }
.completion-label { color: #6a6157; font-size: .78rem; margin: 0 0 12px; }

/* ---- WR-61 slice 2: accepted-quote intake -------------------------------- */
/* Inherited facts are shown, not re-asked. They read as a record, not a form. */
.inherited-facts { display: grid; grid-template-columns: minmax(160px, 30%) 1fr;
  gap: 6px 18px; margin: 12px 0 18px; font-size: .9rem; }
.inherited-facts dt { color: #6a6157; font-weight: 500; }
.inherited-facts dd { margin: 0; color: #2f2a24; }
.parcel-list { margin: 6px 0 0; padding-left: 18px; color: #6a6157; font-size: .84rem;
  columns: 2; }
.role-chip { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  background: #efe9e1; color: #6a6157; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .04em; }
.property-map { height: 280px; border: 1px solid #e2d9cd; border-radius: 10px;
  background: #f6f2ec; margin: 12px 0 18px; }

/* The gate question carries legal weight, so it is given the weight to match. */
.gate-question { border: 1px solid #e2d9cd; border-radius: 12px; padding: 16px 18px;
  margin: 16px 0; background: #fdfbf8; }
.gate-question legend { font-weight: 600; color: #2f2a24; padding: 0 6px; }
.gate-option { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0;
  cursor: pointer; }
.gate-option input { margin-top: 3px; }

.verification-result { border: 1px solid #e2d9cd; border-radius: 12px; padding: 16px 18px;
  margin: 16px 0; }
.verification-result.ok { border-color: #b9d3b2; background: #f4faf2; }
.verification-result.bad { border-color: #e8b4ab; background: var(--color-primary-light); }
.verification-result h3 { margin-top: 0; }

/* A trust is a stop, not a warning to be scrolled past. */
.trust-warning { border-color: #e0b64f; background: #fdf7e6; }

/* Register-supplied values are not casually editable: a different name is a
   different legal person. */
.verified-field { background: #f1ece4; color: #2f2a24; font-weight: 600;
  border: 1px solid #ded4c6; cursor: not-allowed; }

.party-block { border-top: 1px solid #ece5db; padding-top: 14px; margin-top: 14px; }
.party-block h3 { margin: 0 0 2px; font-size: .96rem; }

/* The corrections box is a real answer, not an afterthought — give it room. */
.external-declarations label.full-width { display: block; width: 100%; }
.external-declarations label.full-width textarea { display: block; width: 100%;
  margin-top: 6px; min-height: 64px; }

/* ---- WR-62 slice 3: client activity-area confirmation -------------------- */
.client-map { height: 420px; border: 1px solid #e2d9cd; border-radius: 10px;
  background: #f1ece4; margin: 16px 0 10px; }

/* The statement the client agrees to. Set apart so it cannot be skimmed past as
   part of the surrounding prose. */
.acceptance-statement { border: 2px solid #c01c1c; border-radius: 10px;
  background: #fdf5f4; padding: 16px 18px; margin: 16px 0; }
.acceptance-statement p { margin: 0; font-size: .95rem; line-height: 1.6;
  color: #2f2a24; }

.map-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: .84rem;
  color: #4a4238; margin-bottom: 14px; }
.map-legend span { display: flex; align-items: center; gap: 7px; }
.map-legend .swatch { width: 16px; height: 12px; border-radius: 2px; display: inline-block; }

/* Quote register (M-147; R-23, 15 September 2026). */
.register-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.register-filters .status-pill { cursor: pointer; border: 1px solid #e2e2e2; }
.register-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; margin-bottom: 14px; }
@media (max-width: 900px) { .register-grid { grid-template-columns: 1fr; } }
.register-map { height: 360px; width: 100%; border: 1px solid #e2e2e2; border-radius: 10px; overflow: hidden; }
.register-analysis { overflow-x: auto; min-width: 0; }
.register-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 8px 0; font-size: .74rem; color: #555; }
.register-legend .swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: -2px; }
.swatch.outcome-open { background: #475569; }
.swatch.outcome-won { background: #15803d; }
.swatch.outcome-lost { background: #b91c1c; }
.swatch.outcome-declined { background: var(--color-primary-dark); }
.swatch.outcome-expired { background: #7c5c3b; }
.swatch.outcome-withdrawn { background: #6d28d9; }
.register-notes { margin: 4px 0 0 18px; font-size: .8rem; }

/* ---- The website enquiry form (24 September 2026) -------------------------
   Adam Deane, looking at the first render: "that looks fucked, lets be honest."
   It was: the page had been written against invented class names - ext-card, ext-grid, ext-form -
   none of which existed, so every rule matched nothing and the browser fell back to raw HTML with
   the labels and inputs strung along one line. The external portal already had a whole design
   language (external-card, external-form, external-primary) and it simply was not looked at.

   These are the two things that language was missing for a form this shape: a full-width field
   outside a grid, and a file input that does not look like a 1996 upload button. */
.external-field { display: flex; flex-direction: column; gap: 4px; margin: 14px 0;
  font-size: .74rem; font-weight: 600; color: #5a5147; }
.external-field > input,
.external-field > textarea { padding: 9px 11px; border: 1px solid #d7cdbb; border-radius: 8px;
  font: inherit; font-weight: 400; color: #201a12; background: #fff; }
.external-field > textarea { resize: vertical; min-height: 92px; }
.external-field > .external-hint { font-weight: 400; margin: 2px 0 0; }

/* "DO YOU HAVE PLANS OR SPATIAL FILES?" DRESSED LIKE THE REST (3 October 2026). It had no styles at all, so
   it was the browser's own grey box and legend in the middle of the form - the one part that looked
   unfinished, just where a client is deciding whether to go on. Its two answers are equal chips, because
   "Not yet" is not the wrong answer. */
.external-choice { margin: 14px 0; padding: 0; border: 0; min-width: 0; }
.external-choice > legend { padding: 0; margin: 0 0 8px; font-size: .74rem; font-weight: 600; color: #5a5147; }
.external-radio { display: inline-flex; align-items: center; gap: 8px; margin: 0 8px 8px 0; padding: 9px 14px;
  border: 1px solid #d7cdbb; border-radius: 999px; background: #fff; color: #201a12;
  font-size: .8rem; font-weight: 500; cursor: pointer; }
.external-radio:has(input:checked) { border-color: var(--color-primary, #F26C21); background: #FFF4EC;
  box-shadow: inset 0 0 0 1px var(--color-primary, #F26C21); }
.external-radio input { margin: 0; accent-color: var(--color-primary, #F26C21); }
.external-choice > .external-hint { margin: 2px 0 0; font-size: .74rem; font-weight: 400; }

/* Required is a quiet note beside the label, not a shout. It was set in capitals, five times down the
   form - REQUIRED REQUIRED REQUIRED - which is the shout this note says it is not (3 October 2026). */
.external-field em, .external-form label em { font-style: normal; font-weight: 600;
  color: var(--color-primary); font-size: .78rem; margin-left: 6px; }

.external-form select { padding: 8px 10px; border: 1px solid #d7cdbb; border-radius: 8px;
  font: inherit; font-weight: 400; color: #201a12; background: #fff; }

/* The file input, given room: the surround reads as a drop zone rather than as an afterthought. The
   button inside it was the browser's own small grey one; every current browser lets it be dressed
   (::file-selector-button), so it now looks like the rest of the form and is big enough to tap. */
.external-field > input[type=file] { padding: 14px; border: 1px dashed #cabfad; border-radius: 10px;
  background: #fdfbf8; cursor: pointer; font-size: 15px; font-weight: 400; color: #4a423a; }
.external-field > input[type=file]::file-selector-button { margin-right: 12px; padding: 10px 16px;
  border: 1px solid #cabfad; border-radius: 9px; background: #fff; color: #201a12; font: inherit;
  font-weight: 600; cursor: pointer; }

.external-form + .external-hint { margin-top: 6px; }
.external-primary { margin-top: 20px; }

/* ---- The address lookup on the website form (24 September 2026) ------------
   The suggestions are an offer, not a gate: Vicmap holds "45 YEA ROAD WHITTLESEA" for a property
   everyone involved calls 45 Whittlesea-Yea Road, and a new subdivision may have no address at all.
   So the escape out of the list is styled as plainly as the matches, not hidden beneath them. */
.addr-field { position: relative; }

/* The box and its list, together, so the list hangs from the box and not from the hint below it. */
.addr-box { position: relative; }

.addr-list {
    position: absolute;
    left: 0; right: 0;
    top: calc(100% + 4px);
    z-index: 30;
    max-height: 264px;
    overflow-y: auto;
    border: 1px solid #d7cdbb;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .18);
}

.addr-option {
    display: block;
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    border: 0;
    border-bottom: 1px solid #f0e9dd;
    background: transparent;
    color: #201a12;
    font: inherit;
    font-weight: 400;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
}

.addr-option:last-child { border-bottom: 0; }
.addr-option:hover, .addr-option:focus-visible { background: #fdf4ec; outline: none; }

/* The way out. Given its own weight so nobody feels they must pick from the list. */
.addr-escape { color: #6a6157; font-style: italic; border-top: 1px solid #e6ddce; }

.addr-property {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 4px 0 0;
    padding: 14px 16px;
    border: 1px solid var(--color-primary-light, #f0c9ab);
    border-radius: 10px;
    background: #fff7f1;
}

.addr-property strong { font-size: .9rem; }
.addr-detail { font-size: .84rem; color: #4a423a; }
.addr-caveat { font-size: .78rem; color: #8a5a1e; }

.addr-reject {
    align-self: flex-start;
    margin-top: 4px;
    padding: 6px 12px;
    border: 1px solid #cabfad;
    border-radius: 8px;
    background: #fff;
    color: #333;
    font: inherit;
    font-size: .78rem;
    cursor: pointer;
}

.addr-map {
    height: 240px;
    margin: 10px 0 0;
    border: 1px solid #e2d9cd;
    border-radius: 10px;
    overflow: hidden;
    background: #f6f2ec;
}

/* The "show me a map" way in, for a road or a paddock that cannot be typed. */
.addr-mapoffer { margin: 2px 0 10px; }

.addr-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-primary);
    font: inherit;
    font-size: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.addr-confirm {
    align-self: flex-start;
    margin-top: 6px;
    min-height: 44px;
    padding: 10px 20px;
    border: 0;
    border-radius: 9px;
    background: var(--color-primary);
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

/* Once they have said yes, the panel stops asking. */
.addr-property[data-confirmed="true"] { border-color: #8bb897; background: #f2f8f3; }
.addr-property[data-confirmed="true"] .addr-confirm { display: none; }
.addr-detail.is-confirmed { color: #2e7d46; font-weight: 600; }

/* ---- Phone-sized, everywhere a client types (3 October 2026) ---------------------------------
   Adam Deane, before testing the enquiry form as a client on his iPhone: "make sure it user friendly".

   EVERY BOX WAS 11.8 PIXELS. The inputs took their size from their label (font: inherit, at .74rem),
   and iPhone Safari zooms the whole page in whenever a field under 16 pixels is focused - so on a
   phone the form lurched sideways at every tap and the client had to pinch it back to find the next
   question. 16 pixels is the line Safari draws, so it is the floor here, in every box a client fills
   in: the website enquiry and the intake after a quote both use these classes.

   And the boxes were 36 pixels tall, the button 37. A thumb wants about 44. */
.external-form label,
.external-field,
.external-choice > legend { font-size: .9rem; }

.external-form input,
.external-form textarea,
.external-form select,
.external-field > input:not([type=file]),
.external-field > textarea,
.addr-box > input,
.external-declarations input[type=text],
.external-declarations label > input:not([type=checkbox]) { font-size: 16px; }

.external-form input:not([type=checkbox]):not([type=radio]),
.external-form select,
.external-field > input:not([type=file]),
.addr-box > input { min-height: 46px; padding: 10px 12px; box-sizing: border-box; }

.external-form textarea,
.external-field > textarea { padding: 10px 12px; }

/* The address box, in a wrapper of its own since the list moved under it, dressed like the rest. */
.addr-box > input { display: block; width: 100%; border: 1px solid #d7cdbb; border-radius: 8px;
  font-family: inherit; font-weight: 400; color: #201a12; background: #fff; }

.external-radio { min-height: 44px; padding: 10px 16px; font-size: .95rem; }

/* Three short parts instead of one long list - see the note in WebsiteEnquiry.razor. */
.enquiry-card .enquiry-part { margin: 30px 0 4px; padding-top: 22px; border-top: 1px solid #e6ddce;
  font-size: 18px; color: #201a12; }

/* "Rather talk it through?" - the number is a link, so a tap on a phone rings the office. */
.enquiry-card .external-hint a { color: var(--color-primary); font-weight: 600; text-decoration: none;
  white-space: nowrap; }
.enquiry-ring { margin-top: -4px; }

.enquiry-send { min-height: 50px; padding: 13px 28px; font-size: 16px; margin-top: 24px; }

@media (max-width: 640px) {
    /* A phone gets the room back: 32 pixels of padding each side was a tenth of the screen. */
    .external-card { padding: 26px 20px; }
    .enquiry-send { display: block; width: 100%; }
    .addr-map { height: 300px; }
}

/* ---- Accepting an estimate: the three statements (4 October 2026) ----------------------------------
   Each one is a whole tap target - box and words - because on a phone a 13-pixel checkbox is a guess.
   A ticked statement turns green so the client can see at a glance which are still to do. */
.accept-statements { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 18px; }
.accept-statement { display: grid; grid-template-columns: 26px 1fr; gap: 4px 12px; align-items: start;
  padding: 14px 14px 12px; border: 1px solid #d7cdbb; border-radius: 12px; background: #fff; }
.accept-statement.is-ticked { border-color: #6aa77f; background: #f1f8f3; }
.accept-statement input[type=checkbox] { width: 24px; height: 24px; margin: 1px 0 0; accent-color: #2e7d46; cursor: pointer; }
.accept-statement label { font-size: 15px; line-height: 1.45; color: #201a12; cursor: pointer; }
.accept-statement-link { grid-column: 2; font-size: 14px; font-weight: 600; color: var(--color-primary);
  text-decoration: none; padding: 4px 0; justify-self: start; }
.accept-terms-link { font-weight: 600; color: var(--color-primary); text-decoration: none; white-space: nowrap; }
.accept-why-not { margin-top: 8px; }
.accept-receipt { background: #f1f8f3; border: 1px solid #b9dcc4; border-radius: 12px; padding: 14px 16px; margin: 4px 0 16px; }
.accept-receipt p { margin: 4px 0; }
.accept-receipt a { color: var(--color-primary); font-weight: 600; }

@media (max-width: 640px) {
    .external-actions { flex-direction: column; }
    .external-actions .external-primary, .external-actions .external-secondary { width: 100%; min-height: 48px; }
    .external-totals { flex-wrap: wrap; gap: 6px 14px; }
}

/* ---- ArchEx's Terms and Conditions (4 October 2026) -----------------------------------------------
   A legal document read on a phone as often as on a desk: one column, a hanging indent for every
   lettered and numbered item so the markers line up, and the clause a link points at lit up. */
.terms-card { max-width: 820px; font-size: 15px; line-height: 1.55; }
.terms-card h1 { margin-bottom: 4px; }
.terms-meta { color: #6a6157; margin: 0 0 16px; }
.terms-contents { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 18px;
  margin: 0 0 18px; padding: 12px 14px; border: 1px solid #e6ddce; border-radius: 12px; background: #fff; font-size: 14px; }
.terms-contents a { color: var(--color-primary); text-decoration: none; padding: 4px 0; }
.terms-card h2 { font-size: 15px; letter-spacing: .03em; margin: 26px 0 8px; padding-top: 14px;
  border-top: 1px solid #e6ddce; scroll-margin-top: 12px; }
.terms-num { color: var(--color-primary); margin-right: 4px; }
.terms-card p { margin: 6px 0; }
.terms-def strong { color: #201a12; }
.terms-item, .terms-subitem { display: grid; grid-template-columns: 2.2em 1fr; gap: 0 6px; scroll-margin-top: 12px; }
.terms-subitem { margin-left: 2.2em; grid-template-columns: 2.6em 1fr; }
.terms-mark { color: #6a6157; font-weight: 600; }
.terms-cont { margin-left: 2.2em; }
.terms-item:target { background: #fff3d6; border-radius: 8px; box-shadow: 0 0 0 6px #fff3d6; }
.terms-updated { margin-top: 22px; color: #6a6157; }
.terms-fingerprint { margin-top: 18px; color: #8a8175; font-size: 12px; word-break: break-all; }
.terms-fingerprint code { font-size: 11px; }
.terms-editions { color: #6a6157; font-size: 13px; }
.terms-editions a, .terms-earlier a { color: var(--color-primary); font-weight: 600; text-decoration: none; }