/*
 * FreshAnkara — project styles.
 *
 * Plain CSS on purpose: this host has no Node, so there is no Sass or Tailwind build step.
 * Bootstrap 5 is loaded first and this file only adds what Bootstrap does not cover.
 *
 * ---------------------------------------------------------------------------------------
 * Breakpoints
 * ---------------------------------------------------------------------------------------
 * Bootstrap's, because Bootstrap's grid classes are used in the markup and two competing
 * sets of breakpoints would tear the layout apart in the gap between them:
 *
 *   < 576   phone portrait      one column, full-width controls, 48px targets, step dots
 *   >= 576  phone landscape     controls back to normal height, step labels appear
 *   >= 768  tablet              related fields pair up, the form becomes a card
 *   >= 992  laptop              progress moves to a sticky rail beside the form
 *   >= 1200 desktop             wider card, larger headings
 *   >= 1400 large desktop       the band stops growing; it is centred instead
 *
 * The layout genuinely differs across these rather than being one column that stretches: a
 * six-step indicator reads as a horizontal strip on a phone and as a vertical stepper beside
 * the form on a laptop, and neither works at the other's width.
 *
 * Two rules that look like details and are not:
 *   - form controls never drop below 16px, because iOS Safari zooms the whole page when an
 *     input smaller than that takes focus, and does not zoom back out — the applicant is
 *     then panning a magnified form one field at a time;
 *   - tap targets are 48px on a phone, which is what the narrow layout spends its space on.
 */

:root {
    --fa-measure: 68ch; /* comfortable reading width for the Katılım Şartları text */
    --fa-accent: #1b3a6b;

    /*
     * The green from the logo mark. Sampled from the artwork, not guessed.
     *
     * Used for decoration only. As a background behind white text it lands around 1.7:1,
     * far under the 4.5:1 that body text needs, so buttons and labels stay on --fa-accent.
     */
    --fa-brand: #00ff37;
    --fa-brand-dark: #1b9100;

    --fa-line: #dee2e6;
    --fa-muted: #6c757d;

    /* The two widths the step layout is built from, so the rail and the card cannot drift
       apart at a breakpoint. */
    --fa-rail: 15rem;
    --fa-card: 40rem;
}

/*
 * Above 1400px Bootstrap widens .container to 1320px. Nothing here wants to be that wide —
 * the form would sit in the left third of an empty band — so the page stops growing and
 * centres instead. Applied to .container itself so the header, the content and the footer
 * stay on one left edge; capping only the content would leave the logo hanging out to its
 * left.
 */
@media (min-width: 1400px) {
    .container {
        max-width: 1140px;
    }
}

/* ---------------------------------------------------------------- header ---------------- */

.fa-header__logo {
    display: inline-block;
    line-height: 0; /* kills the descender gap under an inline image */
}

/*
 * Scales continuously with the viewport instead of jumping at a breakpoint. The logo is a
 * wordmark, so how legible it is depends on width, not on device class: a 700px window on a
 * laptop should get the same size as a 700px tablet.
 */
.fa-header__logo img {
    width: 100%;
    max-width: clamp(11rem, 8rem + 12vw, 19rem);
    height: auto;
}

/* The rules text in step 0 is long and numbered; unconstrained line length on a wide
   monitor makes it genuinely hard to read, and applicants must actually read it. */
.fa-prose {
    max-width: var(--fa-measure);
}

/* Diagnostics page: byte dumps must not wrap, or the hex stops lining up. */
.fa-bytes {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    white-space: nowrap;
    overflow-x: auto; /* a 40-byte hex dump scrolls rather than widening the phone */
}

/* ---------------------------------------------------------------- step layout ----------- */

/*
 * The shell every step page sits in: the progress indicator, then the step's own content.
 *
 * One column up to 992px. From 992px the indicator becomes a sticky rail on the left and the
 * content takes the width beside it — which is what turns the empty right-hand third of a
 * desktop window into something the page actually uses.
 *
 * minmax(0, ...) rather than a bare width on the content column: without the zero minimum a
 * long unbroken string — an applicant's e-mail address, an uploaded filename — can force a
 * grid column wider than its track and push the whole layout sideways.
 */
.fa-step {
    display: block;
}

/* Constrained at every width, not only inside the grid: below 992px the shell is a plain
   block and without this the content would run the full width of the container on a
   tablet in landscape. */
.fa-step__main {
    max-width: var(--fa-card);
}

@media (min-width: 992px) {
    .fa-step {
        display: grid;
        grid-template-columns: var(--fa-rail) minmax(0, var(--fa-card));
        gap: 3rem;
        align-items: start;
    }
}

@media (min-width: 1200px) {
    :root {
        --fa-card: 44rem;
    }
}

/* Step 0 is a document, not a form: it needs its reading measure, which is wider than the
   card the form fields want. */
.fa-step--wide {
    --fa-card: var(--fa-measure);
}

.fa-step__title {
    margin-bottom: 0.5rem;
    font-weight: 600;
    /* Roughly 20px to 27px, tracking the viewport rather than stepping at each breakpoint,
       so no window width gets a heading out of proportion to its body text. */
    font-size: clamp(1.25rem, 1.05rem + 0.85vw, 1.7rem);
}

.fa-step__lead {
    color: var(--fa-muted);
    margin-bottom: 1.5rem;
    max-width: var(--fa-measure);
}

/* ---------------------------------------------------------------- progress indicator ---- */

.fa-progress {
    margin-bottom: 1.75rem;
}

.fa-progress__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fa-progress__item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: var(--fa-muted);
}

.fa-progress__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 0.75rem;
    flex: 0 0 auto;
}

.fa-progress__item--current {
    color: var(--fa-accent);
    font-weight: 600;
}

.fa-progress__item--current .fa-progress__num {
    background: var(--fa-accent);
    border-color: var(--fa-accent);
    color: #fff;
}

.fa-progress__item--done {
    color: #198754;
}

/* On a narrow screen the six labels wrap into an unreadable block, so only the current step
   keeps its name; the rest stay as numbered dots. */
@media (max-width: 575.98px) {
    .fa-progress__list {
        gap: 0.5rem;
    }

    .fa-progress__item:not(.fa-progress__item--current) .fa-progress__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

/*
 * From 992px the strip becomes a vertical stepper in the rail.
 *
 * Sticky, so on the longer steps the applicant can still see where they are without
 * scrolling back up. The connector is drawn per item rather than as one line behind the
 * list, because the items are different heights as soon as a label wraps.
 */
@media (min-width: 992px) {
    .fa-progress {
        position: sticky;
        top: 1.5rem;
        margin-bottom: 0;
    }

    .fa-progress__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .fa-progress__item {
        position: relative;
        align-items: flex-start;
        gap: 0.65rem;
        padding-bottom: 1.35rem;
        font-size: 0.875rem;
    }

    .fa-progress__item:last-child {
        padding-bottom: 0;
    }

    .fa-progress__item:not(:last-child)::after {
        content: "";
        position: absolute;
        left: 0.75rem; /* the centre of the 1.5rem numbered circle */
        top: 1.75rem;
        bottom: 0.2rem;
        width: 1px;
        background: var(--fa-line);
    }

    .fa-progress__item--done::after {
        background: #198754;
    }

    .fa-progress__label {
        padding-top: 0.15rem;
    }
}

/* ---------------------------------------------------------------- terms gate ------------ */

.fa-terms {
    /* Clears the sticky action bar so the last rule is never hidden behind it — which would
       also mean the sentinel never becomes visible and the button never enables. */
    padding-bottom: 1rem;
}

/*
 * Justified body text for the rules — but only where the column is wide enough to carry it.
 *
 * Justification works by stretching the spaces between words, and it only looks right when
 * the browser can also break long words. It cannot here: `hyphens: auto` is set and <html>
 * carries lang="tr", yet Chrome ships no Turkish hyphenation dictionary, which was measured
 * rather than assumed — an identical line count with hyphenation on and off. Turkish
 * agglutinates ("gerçekleştirmekle", "değiştirmemek kaydıyla"), so on a phone-width column
 * the unbreakable words force gaps wide enough to read as rivers running down the page.
 *
 * So: justified from small tablets up, where the measure absorbs it, and ragged-right below
 * that. The rules are fifteen numbered paragraphs an applicant has to actually read, and on
 * the device most of them will use, legibility wins over the even edge.
 *
 * `hyphens` stays declared: browsers that do have the dictionary will use it, and the setting
 * costs nothing in those that do not.
 */
.fa-terms p,
.fa-terms li {
    hyphens: auto;
    -webkit-hyphens: auto;
    text-wrap: pretty; /* ignored where unsupported; stops a lone orphaned last word */
}

@media (min-width: 576px) {
    .fa-terms p,
    .fa-terms li {
        text-align: justify;
    }
}

.fa-terms h3 {
    margin-top: 2.25rem;
    margin-bottom: 1rem;
    font-size: 1.15rem;
}

.fa-terms ol {
    padding-left: 1.4rem;
}

.fa-terms li {
    margin-bottom: 0.85rem;
}

.fa-terms__end {
    height: 1px;
}

.fa-skip-end:focus {
    outline: 2px solid var(--fa-accent);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- action bar ------------ */

/*
 * Sticky so the applicant never has to scroll fifteen numbered rules back down to find the
 * buttons. It sits at the bottom rather than the top because that is where the decision is
 * made — at the end of the reading, not before it.
 */
.fa-actions {
    position: sticky;
    bottom: 0;
    z-index: 1030;
    background: #fff;
    border-top: 1px solid var(--fa-line);
    box-shadow: 0 -2px 8px rgb(0 0 0 / 6%);
}

.fa-actions__inner {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.fa-actions__hint {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    color: var(--fa-muted);
}

.fa-actions__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Full width and stacked on a phone: two side-by-side buttons at this length become two
   cramped targets, and the accept button is the one that must be unambiguous. */
@media (max-width: 575.98px) {
    .fa-actions__buttons {
        flex-direction: column;
    }

    .fa-actions__buttons .btn,
    .fa-actions__buttons form {
        width: 100%;
    }

    .fa-actions__buttons .btn {
        padding-top: 0.7rem;
        padding-bottom: 0.7rem;
    }
}

/*
 * A phone held sideways has around 350px of height, and a two-line hint above two stacked
 * full-width buttons would take most of it. Orientation is not a width question, so it gets
 * its own query rather than being folded into one of the width breakpoints.
 */
@media (max-height: 480px) and (orientation: landscape) {
    .fa-actions__inner {
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;
    }

    .fa-actions__buttons {
        flex-direction: row;
    }

    .fa-actions__buttons .btn,
    .fa-actions__buttons form {
        width: auto;
    }

    .fa-actions__hint {
        margin-bottom: 0.25rem;
    }
}

/* A disabled button with no explanation reads as a broken page. The hint above it says why,
   and the cursor reinforces that it is deliberate rather than unresponsive. */
#fa-accept:disabled {
    cursor: not-allowed;
}

/* ---------------------------------------------------------------- declined -------------- */

.fa-declined {
    padding-top: 1rem;
}

/* ---------------------------------------------------------------- form steps ------------ */

/*
 * The form itself.
 *
 * Below 768px it sits bare against the page background: a card outline costs horizontal
 * space a phone does not have, and buys nothing when the card is the only thing on screen.
 * From 768px there is width to spare and the outline starts doing real work — separating
 * the fields from the page and giving the step a visible extent.
 */
.fa-form {
    max-width: var(--fa-card);
}

@media (min-width: 768px) {
    .fa-form {
        padding: 2rem;
        background: #fff;
        border: 1px solid var(--fa-line);
        border-radius: 0.5rem;
    }
}

@media (min-width: 1200px) {
    .fa-form {
        padding: 2.5rem;
    }
}

/* Bootstrap's row gutters carry the vertical rhythm between fields; a bottom margin on each
   field as well would double it. */
.fa-field {
    margin-bottom: 0;
}

/*
 * Two short fields sharing a line, whose labels are not the same length.
 *
 * "Posta Kodu (isteğe bağlı)" wraps to two lines in half a phone-width column while "Ülke"
 * stays on one, which drops one input 24px below the other and makes a tidy pair look like
 * a mistake. Measured at 320, 360 and 390px: the long label is two lines and never three, so
 * reserving two is enough. From 768px both labels fit on one line and the reservation would
 * only add dead space, which is why this stops there.
 */
@media (max-width: 767.98px) {
    .fa-pair .form-label {
        min-height: 3rem; /* two 24px lines */
    }
}

/*
 * 48px targets and 16px text on a phone.
 *
 * The font size is not a preference. Below 16px iOS Safari zooms the page on focus and does
 * not zoom back out, on the device most of these applications will be filled in on.
 */
@media (max-width: 575.98px) {
    .form-control,
    .form-select {
        min-height: 3rem;
        font-size: 1rem;
    }

    .form-label {
        margin-bottom: 0.35rem;
        font-weight: 600;
    }
}

/* The Back and Continue pair at the foot of each step. On a phone they stack and go full
   width, because a 44px target reached with a thumb is the whole point; side by side at
   375px they end up narrow enough to mis-tap, and mis-tapping "Geri" mid-form is the kind
   of thing that loses an application. Continue comes first in the stacked order. */
.fa-form-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--fa-line);
}

@media (max-width: 575.98px) {
    .fa-form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .fa-form-actions .btn {
        width: 100%;
        padding-top: 0.7rem;
        padding-bottom: 0.7rem;
    }
}

/* From phone-landscape up there is room for the pair on one line, pushed to opposite ends:
   Back where a back action is looked for, Continue where the eye finishes. */
@media (min-width: 576px) {
    .fa-form-actions {
        justify-content: space-between;
    }
}

/* The certificate already on file, shown above the replace field. */
.fa-file-current {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: baseline;
    margin-bottom: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #f1f8f4;
    border: 1px solid #badbcc;
    border-radius: 0.375rem;
    font-size: 0.875rem;
}

.fa-file-current__label {
    color: #0f5132;
    font-weight: 600;
}

/* A filename an applicant chose can be long and unbroken; it must wrap rather than push the
   panel wider than the phone. Same for an e-mail address echoed back in a message. */
.fa-file-current__name,
.fa-wrap {
    word-break: break-word;
}

/* The error summary is focused by script after a failed POST, and a focus ring on a block
   element that was never keyboard-reachable looks like a rendering fault. */
#fa-errors:focus {
    outline: none;
}

#fa-errors:focus-visible {
    outline: 2px solid var(--fa-accent);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- artworks -------------- */

/*
 * Step 4 is three near-identical blocks on one page, which is the layout problem of this
 * step: an applicant scrolling on a phone has to be able to tell at a glance which block
 * they are in and which ones are finished. Hence the card, the numbered heading and the
 * state badge, rather than three sets of fields separated by a rule.
 *
 * The step is also wider than the others. A block carries a thumbnail beside its file
 * details, and the artwork fields pair up two to a row above 768px; at the 40rem the other
 * steps use, none of that fits.
 */
.fa-step--works {
    max-width: 46rem;
}

.fa-work {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #fff;
    border: 1px solid var(--fa-line);
    border-left: 4px solid var(--fa-line);
    border-radius: 0.5rem;
    /* So the anchor a failed POST redirects to does not land the heading under the
       header, and so #eser-2 from the error summary lands somewhere readable. */
    scroll-margin-top: 1rem;
}

/* The finished blocks recede and the unfinished one stands out. The colour is the only
   thing that changes: a finished block is still fully editable, and dimming its contents
   would suggest otherwise. */
.fa-work--complete {
    border-left-color: var(--fa-brand-dark);
}

.fa-work__header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.fa-work__heading {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--fa-accent);
}

/* Not colour alone: the badge carries its own word, so the state survives a monochrome
   screen and colour blindness. */
.fa-work__state {
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
    background: #f8f9fa;
    border: 1px solid var(--fa-line);
    color: var(--fa-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.fa-work__state--complete {
    background: #e8f5e9;
    border-color: #badbcc;
    color: #0f5132;
}

/* The stored image and its details. Stacked on a phone, side by side as soon as there is
   room for the thumbnail not to squeeze the filename into one word per line. */
.fa-work__current {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    background: #f8f9fa;
    border: 1px solid var(--fa-line);
    border-radius: 0.375rem;
}

@media (min-width: 576px) {
    .fa-work__current {
        flex-direction: row;
        align-items: flex-start;
    }
}

/* height:auto beside a width cap, so the intrinsic width/height attributes in the markup
   still reserve the right aspect ratio while the file is loading. */
.fa-work__thumb {
    width: 120px;
    height: auto;
    flex: none;
    border-radius: 0.25rem;
    background: #fff;
}

.fa-work__meta {
    min-width: 0; /* or a long filename pushes the flex row wider than the phone */
    word-break: break-word;
}

.fa-work__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

/* Full width on a phone, where a right-aligned button is the hardest thing on the screen
   to reach one-handed. */
@media (max-width: 575.98px) {
    .fa-work__actions .btn {
        width: 100%;
    }
}

/* ---------------------------------------------------------------- upload progress ------- */

.fa-upload {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.5rem;
}

.fa-upload .progress {
    flex: 1 1 100%;
    height: 0.75rem;
}

/*
 * The transferred size, in bytes, beside the bar. A percentage alone is what makes an
 * applicant reload: at 6 MB on mobile data the bar can sit visibly still for several
 * seconds, and "3,2 MB / 5,8 MB" is the difference between waiting and assuming it hung.
 */
.fa-upload__status {
    flex: 1 1 auto;
    color: var(--fa-muted);
}

.fa-upload__status.is-error {
    color: #b02a37;
    font-weight: 600;
}

.fa-upload__offer {
    margin-top: 0.75rem;
}

.fa-upload__offer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ---------------------------------------------------------------- works progress -------- */

.fa-works__count {
    margin-bottom: 1.25rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    background: #f8f9fa;
    border: 1px solid var(--fa-line);
    font-weight: 600;
    color: var(--fa-muted);
}

.fa-works__count--done {
    background: #e8f5e9;
    border-color: #badbcc;
    color: #0f5132;
}

.fa-works__note {
    margin-top: 1rem;
}

/* The step's action row holds a link and a one-button form rather than two buttons, so the
   form must not introduce a line of its own between them. */
.fa-form-actions form {
    margin: 0;
}

/* ---------------------------------------------------------------- consents -------------- */

/*
 * Step 5 is five checkboxes and a textarea, and its layout problem is the opposite of the
 * artworks step: the boxes are short and near-identical, so what has to be visible at a
 * glance is which of them are required and which single one is not.
 */
.fa-step--consents,
.fa-step--summary {
    max-width: 46rem;
}

.fa-consent {
    margin-bottom: 1rem;
    padding: 0.875rem 1rem;
    background: #fff;
    border: 1px solid var(--fa-line);
    border-left: 4px solid var(--fa-accent);
    border-radius: 0.5rem;
    scroll-margin-top: 1rem;
}

/* The optional consent is visibly a different kind of thing, not a required one the applicant
   happens to have missed. Under KVKK the freedom to decline has to be legible, not buried. */
.fa-consent--optional {
    border-left-color: var(--fa-line);
    background: #f8f9fa;
}

.fa-consent--invalid {
    border-left-color: #b02a37;
}

.fa-consent__check .form-check-input {
    /* Larger than the Bootstrap default: this is the control the whole page exists for and it
       has to be an easy target with a thumb. */
    width: 1.15em;
    height: 1.15em;
    margin-top: 0.2em;
}

.fa-consent__check .form-check-label {
    padding-left: 0.35rem;
    font-weight: 500;
}

.fa-consent__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
    margin-top: 0.5rem;
    padding-left: 1.85rem;
    font-size: 0.8125rem;
    color: var(--fa-muted);
}

.fa-consent__read {
    font-weight: 600;
}

/* The version and date are small but they are the point of the whole consent_documents table;
   they must not be so faint that nobody can read them back later from a screenshot. */
.fa-consent__version {
    font-variant-numeric: tabular-nums;
}

.fa-consent--optional .fa-consent__requirement {
    font-weight: 600;
    color: var(--fa-brand-dark);
}

/* ---------------------------------------------------------------- AI declaration -------- */

.fa-ai {
    margin: 1.5rem 0;
    padding: 1rem;
    background: #fff;
    border: 1px solid var(--fa-line);
    border-radius: 0.5rem;
}

.fa-ai__heading {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--fa-accent);
}

.fa-ai__lead,
.fa-ai__notice {
    font-size: 0.875rem;
    color: var(--fa-muted);
}

.fa-ai__statement {
    margin-top: 0.875rem;
}

.fa-ai__notice {
    margin: 0.875rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--fa-line);
}

.fa-ai__counter {
    font-variant-numeric: tabular-nums;
}

.fa-ai__counter.is-short {
    color: #b02a37;
}

/* ---------------------------------------------------------------- winners' form -------- */

/* The CV's live word count. Tabular figures so the line does not jitter as digits change;
   red once over the limit — a colour plus the server's refusal, never a block on typing. */
.fa-word-count {
    margin: 0.35rem 0 0;
    font-size: 0.875rem;
    color: var(--fa-muted);
    font-variant-numeric: tabular-nums;
}

.fa-word-count.is-over {
    color: #b02a37;
    font-weight: 600;
}

/* textarea.… to outrank Bootstrap's own `textarea.form-control` min-height. */
textarea.fa-winner__cv {
    min-height: 14rem;
}

.fa-winner__accepted summary {
    cursor: pointer;
}

/* ---------------------------------------------------------------- summary --------------- */

.fa-summary {
    margin-bottom: 1.25rem;
    padding: 1rem;
    background: #fff;
    border: 1px solid var(--fa-line);
    border-radius: 0.5rem;
}

.fa-summary__header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--fa-line);
}

.fa-summary__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--fa-accent);
}

.fa-summary__edit {
    font-size: 0.875rem;
    font-weight: 600;
}

/*
 * Label above value on a phone, two columns from tablet up. A definition list set as a grid
 * keeps the semantics — a screen reader still pairs each term with its description — while
 * letting the labels line up, which is what makes a summary scannable.
 */
.fa-summary__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.15rem 1rem;
    margin: 0;
}

.fa-summary__list dt {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--fa-muted);
}

.fa-summary__list dd {
    margin: 0 0 0.6rem;
}

@media (min-width: 576px) {
    .fa-summary__list {
        grid-template-columns: 12rem 1fr;
    }

    .fa-summary__list dt,
    .fa-summary__list dd {
        margin-bottom: 0.35rem;
        padding-bottom: 0.35rem;
        border-bottom: 1px solid #f1f3f5;
    }
}

.fa-summary__works {
    display: grid;
    gap: 1rem;
}

.fa-summary__work {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--fa-line);
}

.fa-summary__work:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

@media (min-width: 576px) {
    .fa-summary__work {
        flex-direction: row;
        align-items: flex-start;
    }
}

.fa-summary__thumb {
    width: 110px;
    height: auto;
    flex: none;
    border-radius: 0.25rem;
    background: #fff;
}

.fa-summary__work-body {
    min-width: 0;
    flex: 1 1 auto;
}

.fa-summary__work-title {
    margin: 0 0 0.5rem;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--fa-muted);
}

/* The price is what the warning at the top of the page is about, so it is the one value in
   the summary set apart from its neighbours. */
.fa-summary__price {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.fa-summary__consents {
    margin: 0;
    padding: 0;
    list-style: none;
}

.fa-summary__consent {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.6rem;
    align-items: baseline;
    padding: 0.4rem 0;
    border-bottom: 1px solid #f1f3f5;
}

.fa-summary__consent:last-child {
    border-bottom: none;
}

/* Word and colour together, never colour alone: a declined optional consent is a legitimate
   answer and has to read as one on a monochrome screen too. */
.fa-summary__consent-state {
    flex: none;
    min-width: 6.5rem;
    padding: 0.1rem 0.5rem;
    border-radius: 1rem;
    background: #e8f5e9;
    color: #0f5132;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
}

.fa-summary__consent--declined .fa-summary__consent-state {
    background: #f8f9fa;
    border: 1px solid var(--fa-line);
    color: var(--fa-muted);
}

.fa-summary__consent-label {
    flex: 1 1 14rem;
    min-width: 0;
}

.fa-summary__consent-version {
    font-size: 0.75rem;
    color: var(--fa-muted);
    font-variant-numeric: tabular-nums;
}

.fa-summary__ai {
    margin: 0.875rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--fa-line);
}

.fa-summary__ai-statement {
    margin: 0.5rem 0 0;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 0.375rem;
    font-size: 0.9375rem;
}

.fa-summary__submit {
    margin-top: 1.5rem;
    padding: 1rem;
    background: #fff;
    border: 1px solid var(--fa-line);
    border-radius: 0.5rem;
    text-align: center;
}

.fa-summary__submit-notice {
    margin: 0 0 0.75rem;
    color: var(--fa-muted);
}

.fa-summary__submit .btn {
    width: 100%;
}

@media (min-width: 576px) {
    .fa-summary__submit .btn {
        width: auto;
        min-width: 16rem;
    }
}

.fa-summary__blocked {
    margin: 0.75rem 0 0;
    color: #b02a37;
    font-weight: 600;
}

/* ---------------------------------------------------------------- success --------------- */

.fa-done {
    padding: 1.5rem;
    background: #fff;
    border: 1px solid #badbcc;
    border-top: 4px solid var(--fa-brand-dark);
    border-radius: 0.5rem;
}

.fa-done__title {
    margin: 0 0 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--fa-brand-dark);
}

.fa-done__body {
    margin-bottom: 1.25rem;
    font-size: 1.0625rem;
    line-height: 1.6;
}

.fa-done__reference {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.875rem;
    background: #f8f9fa;
    border: 1px solid var(--fa-line);
    border-radius: 0.375rem;
}

.fa-done__reference-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--fa-muted);
}

/* A uuid is 36 characters and does not break where a browser would like it to. Monospace so
   it can be read out over a telephone, and wrapping anywhere so it never widens the phone. */
.fa-done__reference-value {
    font-size: 0.9375rem;
    word-break: break-all;
    color: var(--fa-accent);
}

.fa-done__reference-hint {
    font-size: 0.8125rem;
    color: var(--fa-muted);
}

.fa-done__actions {
    margin-top: 1.25rem;
}

/* The consent documents inside a modal: the same reading treatment the rules text gets at
   step 0, because they are the same kind of thing. */
.fa-consent-doc h3 {
    font-size: 1.15rem;
    margin: 0 0 1rem;
}

.fa-consent-doc h4 {
    font-size: 1rem;
    margin: 1.5rem 0 0.6rem;
}

.fa-consent-doc p,
.fa-consent-doc li {
    line-height: 1.65;
}

.fa-consent-doc ul {
    padding-left: 1.4rem;
}

.fa-consent-doc li {
    margin-bottom: 0.5rem;
}