/*
 * passport-check.co.uk
 *
 * Loaded after site.css, so it only has to state what changes.
 *
 * The idea: this is a document check, so the page behaves like the document.
 * A British passport is one of the few pieces of design most people own and
 * can picture: burgundy board, guilloche security printing, fields numbered
 * down the observation page, and the machine-readable strip along the bottom
 * that a border officer actually reads. None of that is decoration here. The
 * masthead is the cover, the form is the observation page, and the answer is
 * printed back as the strip.
 *
 * What it replaces: a centred column of white rounded cards of identical
 * weight, where the answer was the same size as a section heading and the
 * three things nobody came for sat in boxes exactly as loud as the one thing
 * they did.
 */

/* ------------------------------------------------------------------ type */

:root {
    /*
     * The house scale is a 1.2 ratio, which keeps a heading and its paragraph
     * in the same voice but leaves no room for anything to be genuinely big.
     * The answer to "can I travel" has to be the largest thing on the page, so
     * the top of the scale is extended rather than the whole ratio changed.
     */
    --step-6: 3.2rem;
    --step-7: 4.4rem;

    /* Archivo is already the pairing here. The strip needs a real monospace. */
    --font-strip: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

    --board: #4F1A28;

    /*
     * --accent does two jobs here and they pull in opposite directions on a
     * dark ground: it is the ground the masthead and the submit button paint
     * white type onto, and it is the ink and the focus ring everywhere else.
     * Lifting the token for the second job turns the masthead pale pink under
     * white type; leaving it dark leaves every `outline: 3px solid var(--accent)`
     * at 1.52:1 on the dark card, which is no focus indicator at all.
     *
     * So the ground is split out. --accent-solid never moves and always carries
     * white; --accent is free to lift for dark mode below.
     */
    --accent-solid: #6B2436;
    --accent-solid-deep: #4F1A28;
}

/*
 * Small caps with tracking, for anything that is a field name rather than
 * prose. This is the one typographic mannerism the page allows itself, and it
 * is doing the job the old design gave to bold 14px sans.
 */
.field-name,
.masthead-kicker,
.strip-label,
.doc-form .form-legend,
.section-index {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-feature-settings: 'tnum';
}

/* -------------------------------------------------------------- masthead */

/*
 * Full bleed, because the cover of a passport has no margin. The texture is
 * multiplied over the accent rather than laid on top of it, which can only
 * darken the ground: white type on this band is never worse than white on the
 * accent alone, whatever the image turns out to look like.
 */
.masthead {
    background-color: var(--accent-solid);
    background-image: url('/img/guilloche.webp');
    background-size: 560px auto;
    background-blend-mode: multiply;
    color: #fff;
    padding-block: clamp(2.5rem, 7vw, 5rem) clamp(2rem, 5vw, 3.5rem);
    border-bottom: 4px solid var(--board);
}

.masthead-inner {
    max-width: var(--page);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

.masthead-kicker {
    color: #fff;
    opacity: 0.75;
    display: block;
    margin-bottom: 1.25rem;
}

.masthead h1 {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 5.5vw, var(--step-6));
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    max-width: 16ch;
    color: #fff;
}

.masthead-standfirst {
    margin-top: 1.1rem;
    font-size: var(--step-1);
    line-height: 1.5;
    max-width: 46ch;
    color: #fff;
    opacity: 0.88;
}

/* --------------------------------------------------------- the main body */

.doc {
    max-width: var(--page);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
    padding-block: clamp(2rem, 5vw, 3.5rem) 4rem;
}

/*
 * An editorial grid rather than one centred column: prose runs in a readable
 * measure on the right, and the left column carries the section number and
 * anything marginal. Below 60rem it collapses and the margin note sits above
 * its section, which is where it reads anyway on a phone.
 */
.doc-grid {
    display: grid;
    gap: clamp(1rem, 3vw, 2.5rem);
}

@media (min-width: 60rem) {
    .doc-grid {
        grid-template-columns: 9rem minmax(0, 1fr);
        align-items: start;
    }
}

.section-index {
    color: var(--accent);
    padding-top: 0.5rem;
}

@media (min-width: 60rem) {
    .section-index {
        text-align: right;
        border-top: 2px solid var(--accent);
    }
}

/* ------------------------------------------------------------- the form */

/*
 * The observation page. Fields are numbered and sit on a ruled baseline
 * instead of in rounded boxes, so the tool reads as something to be filled in
 * rather than as a widget.
 */
.doc-form {
    border: 1px solid var(--rule-strong);
    border-top: 4px solid var(--accent);
    background: var(--card);
    padding: clamp(1.25rem, 4vw, 2.25rem);
}

.doc-form .form-legend {
    color: var(--accent);
    padding: 0;
    margin-bottom: 1.5rem;
}

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

@media (min-width: 46rem) {
    .fields {
        grid-template-columns: 1fr 1fr;
    }

    .fields > li:first-child {
        grid-column: 1 / -1;
    }
}

.fields > li {
    display: grid;
    grid-template-columns: 1.6rem 1fr;
    column-gap: 0.6rem;
    align-items: baseline;
}

.field-num {
    font-family: var(--font-strip);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.field-body {
    min-width: 0;
}

.field-name {
    display: block;
    color: var(--ink-soft);
    margin-bottom: 0.4rem;
}

/*
 * A ruled line, not a box. The rule thickens and takes the accent on focus,
 * which is a visible change of state on its own; the outline is kept as well,
 * because a colour change is not a focus indicator for anyone who cannot see
 * the colour.
 */
.doc-form input[type='text'] {
    width: 100%;
    border: 0;
    /*
     * --rule-strong is 1.62:1 on the card, and once the box is gone this rule is
     * the only thing identifying the field, which SC 1.4.11 wants at 3:1.
     * --muted is 4.75:1 and reads more like a line on a printed form anyway.
     */
    border-bottom: 2px solid var(--muted);
    border-radius: 0;
    background: transparent;
    padding: 0.35rem 0 0.45rem;
    font-family: var(--font-strip);
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    color: var(--ink);
    box-shadow: none;
}

.doc-form input[type='text']:hover {
    border-bottom-color: var(--ink);
}

.doc-form input[type='text']:focus-visible {
    border-bottom-color: var(--accent);
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

.doc-form input::placeholder {
    /* #6B747E on white is 4.75:1, so the hint is readable rather than a ghost. */
    color: var(--muted);
    font-size: 0.92rem;
    letter-spacing: 0;
}

.field-hint {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.82rem;
    color: var(--muted);
}

.doc-form .error {
    display: none;
    margin-top: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--bad);
}

.doc-form .error.active {
    display: block;
}

.doc-form button[type='submit'] {
    margin-top: 2rem;
    width: 100%;
    background: var(--accent-solid);
    color: #fff;
    border: 0;
    border-radius: 0;
    padding: 0.95rem 1.5rem;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
}

@media (min-width: 46rem) {
    .doc-form button[type='submit'] {
        width: auto;
        min-width: 18rem;
    }
}

.doc-form button[type='submit']:hover {
    background: var(--accent-solid-deep);
}

.doc-form button[type='submit']:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

/* ------------------------------------------------------- the autocomplete */

.autocomplete-wrapper {
    position: relative;
}

.autocomplete-results {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    z-index: 20;
    background: var(--card);
    border: 1px solid var(--rule-strong);
    border-top: 0;
    max-height: 17rem;
    overflow-y: auto;
    box-shadow: var(--lift-lg);
    margin: 0;
    padding: 0;
    list-style: none;
}

.autocomplete-results.active {
    display: block;
}

.autocomplete-item {
    padding: 0.55rem 0.8rem;
    cursor: pointer;
    font-size: 0.95rem;
}

.autocomplete-item + .autocomplete-item {
    border-top: 1px solid var(--rule);
}

.autocomplete-item:hover,
.autocomplete-item[aria-selected='true'] {
    background: var(--accent-solid);
    color: #fff;
}

/* ------------------------------------------------------------ the answer */

/*
 * The reason the site exists, and previously the same size as a section
 * heading. It is now the largest thing on the page by a wide margin, it says
 * the verdict in words before it says anything else, and it is announced.
 */
.verdict {
    display: none;
    margin-top: 2.5rem;
    border: 1px solid var(--rule-strong);
    border-left: 6px solid var(--muted);
    background: var(--card);
}

.verdict.active {
    display: block;
}

.verdict-head {
    padding: clamp(1.25rem, 4vw, 2rem);
}

/*
 * Sized in rem rather than em so the mark stays a fixed stamp rather than
 * growing with the clamped headline beside it.
 */
.verdict-mark {
    display: block;
    width: 2.1rem;
    height: 2.1rem;
    margin-bottom: 0.85rem;
    color: var(--muted);
}

.verdict-mark .icon {
    width: 100%;
    height: 100%;
    vertical-align: top;
    stroke-width: 2.4;
}

.verdict-status {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2rem, 6vw, var(--step-6));
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.verdict-message {
    margin-top: 0.85rem;
    font-size: var(--step-1);
    line-height: 1.5;
    max-width: 52ch;
    color: var(--ink-soft);
}

.verdict-details {
    padding: 0 clamp(1.25rem, 4vw, 2rem) clamp(1.25rem, 4vw, 2rem);
    font-size: 0.95rem;
    color: var(--ink-soft);
}

.verdict-details ul {
    margin: 0.35rem 0 0;
    padding-left: 1.1rem;
}

.verdict-details li + li {
    margin-top: 0.3rem;
}

.verdict-details dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.3rem 1rem;
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
}

.verdict-details dt {
    font-weight: 600;
    color: var(--muted);
}

.verdict-details dd {
    margin: 0;
    font-family: var(--font-strip);
    font-variant-numeric: tabular-nums;
}

/* Verdict state is carried by the rule, the word, and an icon: never by colour alone. */
.verdict.valid {
    border-left-color: var(--good);
}

.verdict.valid .verdict-status {
    color: var(--good);
}

.verdict.valid .verdict-mark {
    color: var(--good);
}

.verdict.warning {
    border-left-color: var(--warn);
}

.verdict.warning .verdict-status {
    color: var(--warn);
}

.verdict.warning .verdict-mark {
    color: var(--warn);
}

.verdict.invalid {
    border-left-color: var(--bad);
}

.verdict.invalid .verdict-status {
    color: var(--bad);
}

.verdict.invalid .verdict-mark {
    color: var(--bad);
}

/*
 * The machine-readable strip. It carries the same facts as the panel above in
 * the form a border officer's scanner reads, which is the one detail on the
 * page that could not belong to any other site in the estate. It is real data,
 * not ornament, so it is left readable rather than hidden from assistive tech;
 * only the filler chevrons are.
 */
.strip {
    background: var(--board);
    color: #fff;
    padding: clamp(0.9rem, 3vw, 1.25rem);
    overflow-x: auto;
}

.strip-label {
    display: block;
    opacity: 0.6;
    margin-bottom: 0.5rem;
}

.strip code {
    display: block;
    font-family: var(--font-strip);
    font-size: clamp(0.72rem, 2.1vw, 0.95rem);
    line-height: 1.7;
    letter-spacing: 0.08em;
    white-space: pre;
    color: #fff;
}

.strip .fill {
    opacity: 0.4;
}

.verdict-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0 clamp(1.25rem, 4vw, 2rem) clamp(1.25rem, 4vw, 2rem);
}

.verdict-actions button {
    background: transparent;
    border: 1px solid var(--rule-strong);
    border-radius: 0;
    padding: 0.55rem 1rem;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
    cursor: pointer;
}

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

.verdict-actions button:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

/* ---------------------------------------------------------- the reference */

/*
 * Everything below the tool is reference material, so it is set as reference
 * material: one measure, real rules between sections, and no cards. The old
 * page put each of these in its own bordered box, which made six things of
 * equal weight out of an introduction, a rule, a list and an aside.
 */
.reference h2 {
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: 0.75rem;
    max-width: 30ch;
}

.reference h3 {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 0.35rem;
}

.reference p,
.reference li {
    max-width: 66ch;
}

.reference > .doc-grid + .doc-grid {
    margin-top: clamp(2rem, 5vw, 3.5rem);
    padding-top: clamp(2rem, 5vw, 3.5rem);
    border-top: 1px solid var(--rule);
}

/*
 * The three things nobody arrives for. They stay, because people do use them,
 * but they are one section with one heading instead of three bordered boxes
 * shouting at the same volume as the answer.
 */
.keepsakes {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 52rem) {
    .keepsakes {
        grid-template-columns: repeat(3, 1fr);
    }
}

.keepsake {
    border-top: 1px solid var(--rule-strong);
    padding-top: 0.9rem;
}

.keepsake h3 {
    margin-top: 0;
    font-size: var(--step-0);
}

.keepsake p {
    font-size: 0.88rem;
    color: var(--muted);
    margin-top: 0.25rem;
}

.keepsake input[type='text'] {
    width: 100%;
    border: 0;
    border-bottom: 2px solid var(--muted);
    border-radius: 0;
    background: transparent;
    padding: 0.3rem 0;
    font-family: var(--font-strip);
    font-size: 0.9rem;
}

.keepsake input[type='text']:focus-visible {
    border-bottom-color: var(--accent);
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

.keepsake button {
    margin-top: 0.75rem;
    background: transparent;
    border: 1px solid var(--rule-strong);
    border-radius: 0;
    padding: 0.45rem 0.9rem;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    color: var(--ink);
}

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

.keepsake button:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.keepsake-list {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    font-size: 0.85rem;
}

.keepsake-list li {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.35rem 0;
    border-top: 1px solid var(--rule);
    font-family: var(--font-strip);
}

.keepsake-list button {
    margin: 0;
    border: 0;
    padding: 0 0.2rem;
    letter-spacing: 0;
    color: var(--muted);
}

/* --------------------------------------------------------------- the FAQ */

.faq-list {
    display: grid;
    gap: 0;
}

.faq-list > div {
    border-top: 1px solid var(--rule);
    padding-block: 1.1rem;
    background: none;
    border-radius: 0;
    box-shadow: none;
}

.faq-list > div:last-child {
    border-bottom: 1px solid var(--rule);
}

.faq-list h3 {
    margin-top: 0;
    font-size: var(--step-0);
    font-weight: 700;
}

.faq-list p {
    margin-top: 0.3rem;
    color: var(--ink-soft);
}

/* ------------------------------------------------------------ dark mode */

/*
 * The accent is a dark burgundy, which is legible against white but sits too
 * close to a dark ground. On dark the board lifts to a lighter burgundy for
 * anything that has to be read as text or as a rule.
 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        --board: #7E2E42;
        /* 6.9:1 on the dark card, against the 1.52:1 the burgundy managed. */
        --accent: #D98BA0;
        --accent-deep: #E9B4C2;
    }

    :root:not([data-theme='light']) .section-index,
    :root:not([data-theme='light']) .field-num {
        color: #D98BA0;
    }

    :root:not([data-theme='light']) .masthead {
        border-bottom-color: #7E2E42;
    }
}

:root[data-theme='dark'] {
    --board: #7E2E42;
    --accent: #D98BA0;
    --accent-deep: #E9B4C2;
}

:root[data-theme='dark'] .section-index,
:root[data-theme='dark'] .field-num {
    color: #D98BA0;
}

/* --------------------------------------------------------------- print */

/*
 * People print this to put in with their tickets, so the answer prints and
 * the chrome does not.
 */
@media print {
    .site-nav,
    .breadcrumb-nav,
    .verdict-actions,
    .keepsakes,
    .faq-list,
    .editorial-footer,
    .book-plug {
        display: none !important;
    }

    .masthead {
        background: none;
        color: #000;
        border-bottom: 2px solid #000;
    }

    .masthead h1,
    .masthead-standfirst,
    .masthead-kicker {
        color: #000;
        opacity: 1;
    }

    .strip {
        background: none;
        border: 1px solid #000;
    }

    .strip code,
    .strip-label {
        color: #000;
    }
}


/* ------------------------------------------------------- form additions */

/*
 * The field/value pairs in the keepsakes were used in index.html and defined
 * nowhere, so the labels and inputs stacked unstyled.
 */
.keepsake-fields {
    display: grid;
    gap: 0.35rem 1rem;
    margin-top: 0.75rem;
}

@media (min-width: 30rem) {
    .keepsake-fields {
        grid-template-columns: 6rem minmax(0, 1fr);
        align-items: baseline;
    }
}

.keepsake-status {
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0.5rem 0 0;
    min-height: 1.3em;
}

.keepsake-status:empty {
    min-height: 0;
    margin: 0;
}

.form-aside {
    border-top: 1px solid var(--rule);
    color: var(--ink-soft);
    font-size: 0.9rem;
    margin-top: 2rem;
    max-width: 60ch;
    padding-top: 1rem;
}

/* ------------------------------------------------- the interior pages */

/*
 * The redesign was applied to the homepage only, so every other page carried
 * the old estate template inside the new frame: rounded cards with drop
 * shadows sitting under a guilloche masthead. These bring the shared box
 * classes into the same language rather than restyling each page.
 */
.reference .highlight-box,
.reference .warning-box,
.reference .info-box,
.reference .example-box,
.reference .tip-box,
.reference .cta-box,
.reference .faq-item,
.reference .blog-card,
.reference .contact-box {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.reference .highlight-box,
.reference .warning-box,
.reference .info-box,
.reference .example-box,
.reference .tip-box {
    border: 0;
    border-left: 3px solid var(--accent);
    margin-block: 1.75rem;
    padding: 0.25rem 0 0.25rem 1.25rem;
}

.reference .warning-box {
    border-left-color: var(--bad);
}

.reference .cta-box {
    border: 0;
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    margin-block: 2.5rem;
    padding-block: 1.5rem;
    text-align: left;
}

.reference .faq-item {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: 0;
    padding-block: 1.5rem;
}

.reference .faq-item h3 {
    margin-top: 0;
}

.reference .blog-grid {
    display: grid;
    gap: 0;
}

.reference .blog-card {
    border: 0;
    border-top: 1px solid var(--rule);
    padding: 1.5rem 0;
}

.reference .last-updated {
    color: var(--muted);
    font-family: var(--font-strip);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 2rem;
}

.reference .table-scroll {
    border: 1px solid var(--rule);
    overflow-x: auto;
}

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

.reference th,
.reference td {
    border-bottom: 1px solid var(--rule);
    padding: 0.6rem 0.8rem;
    text-align: left;
}

.reference th {
    font-family: var(--font-strip);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/*
 * Landmark and skip link. Neither existed on any page, so a keyboard user met
 * the same seven nav links before the content on every one of the seventeen.
 */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--accent-solid);
    color: #fff;
    padding: 0.75rem 1.25rem;
    font-weight: 700;
}

.skip-link:focus {
    left: 0;
}

/* ------------------------------------------------------------ brand mark */

/*
 * The mark is not an icon from the shared set and never will be, so it does
 * not carry svg.icon: the design build refreshes those from a registry and
 * would rewrite this one back to whatever it holds. Same sizing and weight,
 * its own class.
 */
.brand-mark {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.135em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

.brand-mark-lg {
    width: 1.35em;
    height: 1.35em;
}