/*
 * Hand-authored layout glue for pages the design system did not ship markup
 * for: the policy pages and the purchase entry point. Everything here is built
 * from existing tokens and reuses the design system's own components; it adds
 * no new colours, type sizes or spacing values.
 *
 * Unlike the other stylesheets in this folder, this file is not generated by
 * tools/extract-assets.mjs — edit it directly.
 */

/* Prose pages (terms, privacy, refunds, accessibility).
   The help-centre article layout is a two-column grid built around its table of
   contents rail; these pages have no rail, so they get a single measure column
   with the same rhythm. */
.prose-layout {
    width: min(100% - 40px, var(--measure));
    margin-inline: auto;
    padding: 76px 0 112px;
}

.prose-hero .container > .eyebrow,
.prose-hero .container > h1,
.prose-hero .container > .standfirst {
    max-width: var(--measure);
}

.prose-status {
    margin-top: var(--space-8);
    padding: var(--space-5) var(--space-6);
    border: 1px solid var(--line);
    border-left: 3px solid var(--warning);
    border-radius: var(--radius-sm);
    background: var(--warning-soft);
    color: var(--ink-900);
    font-size: var(--type-ui);
    line-height: 1.6;
}

.prose-status strong {
    display: block;
    margin-bottom: var(--space-1);
}

@media (max-width: 900px) {
    .prose-layout {
        width: min(100% - 28px, var(--measure));
        padding: 50px 0 75px;
    }
}

/* Purchase entry point. */
.start-form-footer {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.start-form-footer .button {
    justify-self: start;
}

.start-form-footer .button[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

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

.start-summary li {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    font-size: var(--type-ui);
}

.start-summary svg {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--success-strong);
}

/* Small print on the light form panel. The design system's .free-small is
   tuned for the dark .free-card and drops to 1.02:1 against a light ground. */
.start-note {
    margin: 0;
    color: var(--ink-600);
    font-size: 0.82rem;
    line-height: 1.55;
}

/* Order form: grouping, optional markers, the error summary and the
   Development-only persona picker. */
.start-group { margin: var(--space-8) 0 var(--space-3); font-size: 1.05rem; }
.start-form > .start-group:first-child { margin-top: 0; }
.start-form .ds-form-grid + .start-note,
.start-form .start-note + .ds-form-grid { margin-top: var(--space-3); }
.start-optional { color: var(--muted); font-weight: 500; }
.start-previous { margin-top: var(--space-6); }
.start-previous summary { cursor: pointer; color: var(--ink); font-weight: 600; }
.start-previous[open] summary { margin-bottom: var(--space-3); }
.start-errors { margin: 0 0 var(--space-6); padding: var(--space-5); border: 2px solid var(--red); border-radius: 13px; background: var(--white); }
.start-errors h3 { margin: 0 0 var(--space-2); font-size: 1rem; }
.start-errors ul { margin: 0; padding-left: 1.2em; }
.start-errors a { color: var(--red); }
.start-errors p { margin: 0; }
.start-dev { display: grid; gap: var(--space-3); margin: 0 0 var(--space-8); padding: var(--space-5); border: 1px dashed var(--gold-500); border-radius: 13px; }
.start-dev p { margin: 0; font-size: .82rem; line-height: 1.55; }
.start-dev .button { justify-self: start; }

/* Order steps after the form: payment, identity check, waiting. */
.order-step { padding-top: 64px; }
.order-panel { max-width: 720px; }
.order-panel > * + * { margin-top: var(--space-5); }
.order-ref { font-family: var(--mono); }
.order-actions .button, .order-passcode .button { margin-top: var(--space-2); }
.order-kba fieldset { margin: 0 0 var(--space-5); padding: var(--space-5); border: 1px solid rgba(15,23,42,.14); border-radius: 13px; }
.order-kba legend { padding: 0 var(--space-2); color: var(--ink); font-weight: 700; }
.order-kba .ds-choice { margin-top: var(--space-2); }
.order-passcode { display: grid; gap: var(--space-3); max-width: 280px; }
.order-link { padding: 0; border: 0; background: none; color: var(--forest-700); font: inherit; text-decoration: underline; cursor: pointer; }
.order-skip { padding-top: var(--space-5); border-top: 1px solid rgba(15,23,42,.1); }
.order-skip p { margin: 0 0 var(--space-2); }

/* Address lookup on /start: postcode and "Find address" side by side. */
.start-address > * + * { margin-top: var(--space-3); }
.start-postcode-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-start; }
.start-postcode-row .ds-field { flex: 1 1 220px; max-width: 320px; }
.start-find { align-self: flex-start; margin-top: 26px; min-height: 52px; border: 1px solid rgba(15,23,42,.18); background: var(--white); color: var(--ink); }
.start-find:hover { border-color: rgba(15,23,42,.32); }
.start-address-pick { max-width: 560px; }
.start-address [data-address-status]:empty { display: none; }

/* .button and .ds-field set their own display, which would otherwise override the hidden attribute. */
.start-find[hidden], .start-address-pick[hidden] { display: none; }

/* The address parts: a narrow column for the flat and number, a wide one for
   the property and street names, then full-width rows. */
.start-address-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 18px; }
.start-address-grid .start-wide { grid-column: 1 / -1; }
.start-address-grid .start-wide input { max-width: 420px; }
@media (max-width: 520px) {
  .start-address-grid { grid-template-columns: 1fr; }
}


/* Order progress: "Step 1 of 3" and the three steps, in place of a label above every heading. */
.order-progress { margin: 0 0 var(--space-6); }
.order-progress-label { margin: 0 0 var(--space-2); color: var(--muted); font-size: .82rem; font-weight: 600; }
.order-progress ol { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.order-progress li { flex: 1 1 0; padding-top: 10px; border-top: 4px solid rgba(15,23,42,.12); color: var(--muted); font-size: .8rem; }
.order-progress li.is-done { border-top-color: var(--blue-700); }
/* The current step's bar is half filled, so the last step never looks finished while it is still in progress. */
.order-progress li.is-current { border-image: linear-gradient(90deg, var(--blue-700) 50%, rgba(15,23,42,.12) 50%) 1; color: var(--ink); font-weight: 700; }
.start-address-grid[hidden], .start-manual[hidden] { display: none; }
.start-manual { display: block; }

/* Payment: what is being bought, and the reassurances, before the button. */
.order-summary { padding: var(--space-5); border: 1px solid rgba(15,23,42,.14); border-radius: 13px; background: var(--white); }
.order-summary h2 { margin: 0 0 var(--space-3); font-size: 1.05rem; }
.order-summary dl { display: grid; gap: var(--space-2); margin: 0; }
.order-summary dl > div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: var(--space-3); }
.order-summary dt { color: var(--muted); font-size: .88rem; }
.order-summary dd { margin: 0; color: var(--ink); }
.order-change { display: inline-block; margin-top: var(--space-4); }
.order-assurances { display: grid; gap: var(--space-2); margin-bottom: 0; padding-left: 1.2em; color: var(--body); }
@media (max-width: 520px) {
  .order-summary dl > div { grid-template-columns: 1fr; gap: 0; }
}

/* Identity questions: GOV.UK-sized radios, each question set apart by space rather than a box. */
.order-kba fieldset { margin: 0 0 var(--space-8); padding: 0; border: 0; }
.order-kba legend { margin-bottom: var(--space-3); padding: 0; color: var(--ink); font-size: 1.15rem; font-weight: 700; line-height: 1.35; }
.order-kba .ds-choice { align-items: center; gap: 12px; margin: 0; padding: 8px 0; font-size: 1rem; color: var(--ink); }
.order-kba .ds-choice input { width: 28px; height: 28px; margin: 0; flex: none; }

/* A checkbox inside a .ds-field wrapper (the consent box, for its error
   state) must not take the text-input sizing .ds-field gives every input. */
.ds-field .ds-choice input { width: 19px; height: 19px; min-height: 0; padding: 0; box-shadow: none; flex: none; }
.order-summary .order-total { margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid rgba(15,23,42,.12); }
.order-summary .order-total dt, .order-summary .order-total dd { color: var(--ink); font-weight: 700; }


/* A secondary action on a light page: outlined, no fill or glow. */
.button-quiet { min-height: 48px; border: 1px solid rgba(15,23,42,.22); background: var(--white); color: var(--ink); box-shadow: none; }
.button-quiet:hover { border-color: rgba(15,23,42,.4); }

/* Order form text at a readable size (GOV.UK uses 19px labels and hints);
   the design system's form sizes are for its compact demo panels. */
.start-form .ds-field-label { font-size: 1rem; }
.start-form .ds-field-help, .start-form .ds-field-error { font-size: .92rem; line-height: 1.45; }
.start-form .ds-field-help { color: var(--body); }
.start-form .ds-field-error { font-weight: 600; }
.start-form .ds-choice { font-size: 1rem; align-items: center; }
.start-form .ds-choice input, .start-form .ds-field .ds-choice input { width: 28px; height: 28px; margin: 0; }

/* Date of birth: three boxes sized to their contents. */
.start-date { margin: 0; padding: 0; border: 0; min-width: 0; }
.start-date legend { padding: 0; margin-bottom: 7px; }
.start-date-parts { display: flex; gap: 14px; margin-top: 4px; }
.start-date-parts label { display: grid; gap: 4px; color: var(--body); font-size: .92rem; }
.start-date-parts input.start-date-2 { width: 4.2em; }
.start-date-parts input.start-date-4 { width: 6em; }

/* Body-size text for the notes around the order form and the identity check. */
.start-form .start-note, .start-form .ds-form-note, .order-panel .start-note { font-size: 1rem; line-height: 1.5; }
.start-form .start-group + .start-note { margin: 0 0 var(--space-4); }


/* A button inside prose (the call to action on /prices) keeps the button's own
   colours, rather than taking the article's blue, underlined link style. */
.article-body a.button { color: var(--forest-950); text-decoration: none; }