/* The Career Centre's look (DEC-172; layouts 9-07 and 9-08; brand kit v3.1, MD-B03): the website's type
   scale and the kit's tokens, loaded by the Career Centre alone after the shared av.css, so the ERP's
   look is unchanged. Light theme (DEC-073), phone first (DEC-066), Montserrat and Cairo, logical
   properties so Arabic mirrors right to left. WCAG 2.2 AA: filled buttons in Teal Dark or Navy (white
   on Teal is under 4.5:1), Light Teal only on Navy, Sand Gold only for rules. No inline style anywhere. */

:root {
    --av-text: 1rem;
    --av-text-small: 0.9375rem;
    --av-text-label: 0.875rem;
    --av-title: 1.75rem;
    --av-section: 1.25rem;
    --av-subsection: 1.0625rem;
    --cc-width: 72rem;
    --cc-gutter: 16px;
    --cc-target: 2.75rem;
    line-height: 1.6;
}

[dir="rtl"] {
    --av-text: 1.0625rem;
    --av-text-small: 1rem;
    --av-text-label: 0.9375rem;
}

body.cc {
    background: var(--av-mist);
    color: var(--av-charcoal);
    font-size: var(--av-text);
}

.cc a { color: var(--av-navy); }
.cc a:hover { color: var(--av-teal-dark); }

/* ---- The top bar ---- */

/* The top bar and the footer stay in place, the page scrolling between them (his staging review of 1.1,
   A-5); on a phone the footer follows the page. In-page links and focus stop clear of both. */
:root { scroll-padding-block: 5.5rem 4.5rem; }
.cc-bar { position: sticky; inset-block-start: 0; z-index: 30; background: var(--av-navy); color: var(--av-white); }
.cc-bar-inner > * { min-inline-size: 0; }
.cc-bar :focus-visible { outline-color: var(--av-light-teal); }

.cc-bar-inner {
    display: flex;
    align-items: center;
    gap: calc(var(--av-space) * 2);
    max-inline-size: var(--cc-width);
    min-block-size: 4.25rem;
    margin-inline: auto;
    padding-inline: var(--cc-gutter);
}

.cc-brand {
    display: flex;
    align-items: center;
    gap: calc(var(--av-space) * 1.5);
    margin: 0;
    color: var(--av-white);
    text-decoration: none;
    flex: none;
}

.cc .cc-brand, .cc .cc-brand:hover { color: var(--av-white); }
.cc-brand img { display: block; inline-size: 9.5rem; block-size: auto; }

.cc-app {
    padding-inline-start: calc(var(--av-space) * 1.5);
    border-inline-start: 1px solid rgb(255 255 255 / 35%);
    color: var(--av-light-teal);
    font-weight: 600;
    white-space: nowrap;
}

.cc-menu { margin-inline-start: auto; }
.cc-menu ul { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }

.cc .cc-menu a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--cc-target);
    padding-inline: calc(var(--av-space) * 1.25);
    border-radius: var(--av-radius-small);
    color: var(--av-white);
    text-decoration: none;
    white-space: nowrap;
}

.cc .cc-menu a:hover { background: var(--av-navy-tint); color: var(--av-white); }
.cc .cc-menu a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--av-light-teal); font-weight: 600; }

.cc-tools { display: flex; align-items: center; gap: var(--av-space); margin-inline-start: auto; }
.cc-menu + .cc-tools { margin-inline-start: 0; }

.cc-language { display: flex; align-items: center; gap: 6px; margin: 0; white-space: nowrap; }
.cc-language span[aria-hidden] { color: rgb(255 255 255 / 60%); }
.cc-language-current { color: var(--av-light-teal); font-weight: 600; }

.cc .cc-language a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--cc-target);
    padding-inline: 4px;
    color: var(--av-white);
}

.cc-bar-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-block-size: var(--cc-target);
    min-inline-size: var(--cc-target);
    justify-content: center;
    padding-inline: calc(var(--av-space) * 1.25);
    border: 1px solid rgb(255 255 255 / 30%);
    border-radius: var(--av-radius);
    background: transparent;
    color: var(--av-white);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.cc-bar-button::-webkit-details-marker { display: none; }
.cc-bar-button:hover, details[open] > .cc-bar-button { background: var(--av-navy-tint); }
.cc-bar-button .av-icon { inline-size: 1.25rem; block-size: 1.25rem; color: var(--av-light-teal); }

.cc-avatar-button { padding: 2px; border-radius: var(--av-radius-pill); }
.cc-inline { display: inline; margin: 0; }

/* Panels opened from the top bar (<details>, no script): help, account and, on a phone, the menu. */
.cc-pop { position: relative; }
.cc-pop > summary { list-style: none; }

.cc-pop-panel {
    position: absolute;
    inset-block-start: calc(100% + var(--av-space));
    inset-inline-end: 0;
    z-index: 40;
    min-inline-size: 16rem;
    max-block-size: calc(100dvh - 6rem);
    overflow-y: auto;
    padding: var(--av-space);
    border: 1px solid var(--av-cool-gray);
    border-radius: var(--av-radius);
    background: var(--av-white);
    color: var(--av-charcoal);
    box-shadow: var(--av-shadow-3);
}

/* The panels are white inside the navy bar: their focus ring goes back to Teal Dark (5.9:1 on white). */
.cc-pop-panel:focus-visible, .cc-pop-panel :focus-visible { outline-color: var(--av-teal-dark); }

.cc-help-panel { inline-size: min(28rem, calc(100vw - 2 * var(--cc-gutter))); padding: calc(var(--av-space) * 2.5); }
.cc-help-panel h1 { font-size: var(--av-section); }
.cc-help-panel h1::before { content: ""; display: block; inline-size: 48px; block-size: 4px; margin-block-end: var(--av-space); border-radius: 2px; background: var(--av-gold); }

.cc-account-panel ul, .cc-menu-panel ul { margin: 0; padding: 0; list-style: none; }
.cc-account-name { margin: 0 0 4px; padding: 4px calc(var(--av-space) * 1.5) var(--av-space); border-block-end: 1px solid var(--av-line); color: var(--av-navy); font-weight: 600; overflow-wrap: anywhere; }
.cc-account-panel form { margin: 0; }

.cc-account-panel a, .cc-account-panel button, .cc-menu-panel a {
    display: flex;
    align-items: center;
    gap: var(--av-space);
    inline-size: 100%;
    min-block-size: var(--cc-target);
    padding-inline: calc(var(--av-space) * 1.5);
    border: 0;
    border-radius: var(--av-radius-small);
    background: none;
    color: var(--av-navy);
    font: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

.cc-account-panel a:hover, .cc-account-panel button:hover, .cc-menu-panel a:hover { background: var(--av-mist); }
.cc-account-panel .av-icon { color: var(--av-teal-dark); }
.cc .cc-menu-panel a[aria-current="page"] { background: var(--av-teal-tint); font-weight: 600; }
.cc-menu-pop { display: none; }

/* ---- The page ---- */

.cc-main {
    flex: 1;
    inline-size: 100%;
    max-inline-size: var(--cc-width);
    margin-inline: auto;
    padding: calc(var(--av-space) * 4) var(--cc-gutter) calc(var(--av-space) * 6);
}

.cc-main:focus { outline: none; }
.cc-narrow { max-inline-size: 46rem; margin-inline: auto; }

.cc h1 { font-size: var(--av-title); }
.cc h2 { font-size: var(--av-section); }

.cc-page-head { margin-block-end: calc(var(--av-space) * 3); }
.cc-page-head h1 { margin-block-end: var(--av-space); }
.cc-page-head h1::before, .cc-notice-card h1::after {
    content: "";
    display: block;
    inline-size: 56px;
    block-size: 4px;
    margin-block-end: calc(var(--av-space) * 1.5);
    border-radius: 2px;
    background: var(--av-gold);
}

.cc-notice-card h1::after { margin: calc(var(--av-space) * 1.5) auto 0; }
.cc-lead { font-size: 1.0625rem; color: var(--av-charcoal); }
.cc-meta { color: var(--av-slate); font-size: var(--av-text-small); }
.cc-label { margin-block-end: 4px; color: var(--av-slate); font-size: var(--av-text-label); font-weight: 600; }

.cc-card {
    margin-block-end: calc(var(--av-space) * 3);
    padding: calc(var(--av-space) * 3);
    border: 1px solid var(--av-cool-gray);
    border-radius: var(--av-radius);
    background: var(--av-white);
    box-shadow: var(--av-shadow-1);
}

.cc-grid .cc-card { margin-block-end: 0; }
.cc-card > :last-child { margin-block-end: 0; }
.cc-card-planned { border-style: dashed; background: #FAFBFC; box-shadow: none; }
.cc-card-danger { border-color: #E5B8BA; }

.cc-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--av-space);
    margin-block-end: calc(var(--av-space) * 2);
}

.cc-card-head h2, .cc-card > h2 { display: flex; align-items: center; gap: var(--av-space); margin: 0; }
.cc-card > h2 { margin-block-end: calc(var(--av-space) * 1.5); }
.cc-card h2 .av-icon { color: var(--av-teal-dark); inline-size: 1.25rem; block-size: 1.25rem; }

.cc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    gap: calc(var(--av-space) * 3);
}

.cc-profile-head { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--av-space) * 3); }
.cc-profile-head h1 { margin: 0 0 4px; overflow-wrap: anywhere; }
.cc-profile-head p { margin: 0; }
.cc-picture-row { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--av-space) * 3); }
.cc-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--av-space); }
.cc-actions p { margin: 0; }

.cc-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    background: var(--av-navy-tint);
    color: var(--av-white);
    font-weight: 700;
}

.cc-avatar-small { inline-size: 2.25rem; block-size: 2.25rem; font-size: 0.875rem; }
.cc-avatar-large { inline-size: 6rem; block-size: 6rem; font-size: 1.75rem; }
.cc-preview { display: flex; justify-content: center; }

.cc-facts { display: grid; gap: var(--av-space); margin: 0; }
.cc-facts > div { display: grid; grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr); gap: var(--av-space); }
.cc-facts dt { color: var(--av-slate); font-size: var(--av-text-small); }
.cc-facts dd { margin: 0; overflow-wrap: anywhere; }

.cc-file { display: flex; flex-direction: column; gap: 2px; }
.cc-file a, .cc-files a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.cc-file-name { overflow-wrap: anywhere; }
.cc-files { margin: var(--av-space) 0; padding: 0; list-style: none; display: grid; gap: var(--av-space); }
.cc-files li { display: flex; flex-direction: column; gap: 2px; }
.cc-details summary { color: var(--av-navy); font-weight: 600; cursor: pointer; min-block-size: var(--cc-target); display: flex; align-items: center; }

.cc-methods { margin: 0; padding: 0; list-style: none; }

.cc-methods li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--av-space);
    padding-block: calc(var(--av-space) * 1.5);
    border-block-end: 1px solid var(--av-line);
}

.cc-methods li:last-child { border-block-end: 0; }
.cc-methods li > div { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; overflow-wrap: anywhere; }
.cc-methods .av-badge { align-self: flex-start; }
.cc-delete-list { padding-inline-start: calc(var(--av-space) * 3); }

.cc-planned, .cc-notice-card { text-align: center; }

.cc-planned-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 5.5rem;
    block-size: 5.5rem;
    margin-block-end: calc(var(--av-space) * 2);
    border-radius: 50%;
    background: var(--av-teal-tint);
    color: var(--av-teal-dark);
}

.cc-icon-warning { background: var(--av-warning-tint); color: var(--av-warning); }
.cc-notice-page .av-prose, .cc-notice .av-prose { max-inline-size: none; }

/* ---- 1.2: the public pages, Opportunities, Apply, My applications, Messages and Alerts ---- */

.cc-hero h1 { margin-block-end: var(--av-space); }
.cc-hero .cc-form-bar { margin-block: calc(var(--av-space) * 2); }
.cc-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: calc(var(--av-space) * 1.5); align-items: end; margin-block-end: calc(var(--av-space) * 2); }
.cc-search .av-field { margin-block-end: 0; }
.cc-benefits { display: grid; gap: calc(var(--av-space) * 1.5); margin: 0; padding: 0; list-style: none; }
.cc-benefits li { display: flex; gap: calc(var(--av-space) * 1.5); align-items: flex-start; }
.cc-benefits .av-icon { flex: none; color: var(--av-teal-dark); margin-block-start: 2px; }
.cc-vacancies { display: grid; gap: calc(var(--av-space) * 2); margin: 0; padding: 0; list-style: none; }
.cc-vacancies > li { margin-block-end: 0; }
.cc-vacancy h2, .cc-vacancy h3 { margin: 0 0 4px; font-size: 1.125rem; }
.cc-vacancy h2 a, .cc-vacancy h3 a { text-decoration: none; }
.cc-vacancy h2 a:hover, .cc-vacancy h3 a:hover { text-decoration: underline; }
.cc-vacancy .cc-form-bar { margin-block-start: var(--av-space); }
.cc-vacancy:not(.cc-card) { padding-block: calc(var(--av-space) * 1.5); border-block-end: 1px solid var(--av-cool-gray); }
.cc-vacancy:not(.cc-card):last-child { border-block-end: 0; }
.cc-prewrap { white-space: pre-wrap; }
.cc-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cc-filters .cc-form-bar { margin-block-start: 0; }
.cc-form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cc-steps { display: flex; gap: var(--av-space); margin: 0 0 calc(var(--av-space) * 2); padding: 0; list-style: none; counter-reset: cc-step; }
.cc-steps li { flex: 1; padding: var(--av-space) 0; border-block-start: 3px solid var(--av-cool-gray); color: var(--av-slate); font-size: var(--av-text-small); counter-increment: cc-step; }
.cc-steps li::before { content: counter(cc-step) ". "; font-weight: 600; }
.cc-steps li[aria-current="step"] { border-color: var(--av-teal-dark); color: var(--av-navy); font-weight: 600; }
.cc-steps li.cc-step-done { border-color: var(--av-success); }
.cc-message-unread { border-inline-start: 4px solid var(--av-teal-dark); }
.cc-menu-badge { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 1.25rem; block-size: 1.25rem; margin-inline-start: 6px; padding-inline: 5px; border-radius: var(--av-radius-pill); background: var(--av-light-teal); color: var(--av-navy); font-size: 0.75rem; font-weight: 700; line-height: 1; }
.cc-menu-panel .cc-menu-badge { background: var(--av-teal-dark); color: var(--av-white); }

/* ---- Buttons (filled in Teal Dark: white on it is about 5.9:1) ---- */

.cc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--av-space);
    min-block-size: var(--cc-target);
    padding-inline: calc(var(--av-space) * 2.5);
    border: 1px solid var(--av-teal-dark);
    border-radius: var(--av-radius);
    background: var(--av-teal-dark);
    color: var(--av-white);
    font: inherit;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.cc a.cc-button, .cc a.cc-button:hover { color: var(--av-white); }
.cc-button:hover { background: #125A5A; border-color: #125A5A; }
.cc-button .av-icon { inline-size: 1.125rem; block-size: 1.125rem; }

.cc .cc-button-secondary, .cc a.cc-button-secondary { background: var(--av-white); border-color: var(--av-navy); color: var(--av-navy); }
.cc .cc-button-secondary:hover, .cc a.cc-button-secondary:hover { background: var(--av-mist); color: var(--av-navy); }
.cc .cc-button-danger, .cc a.cc-button-danger { background: var(--av-danger); border-color: var(--av-danger); color: var(--av-white); }
.cc .cc-button-danger:hover, .cc a.cc-button-danger:hover { background: var(--av-danger-dark); border-color: var(--av-danger-dark); color: var(--av-white); }
.cc .cc-button-danger-quiet, .cc a.cc-button-danger-quiet { background: var(--av-white); border-color: #D9A3A6; color: var(--av-danger); }
.cc .cc-button-danger-quiet:hover, .cc a.cc-button-danger-quiet:hover { background: var(--av-danger-tint); color: var(--av-danger); }
.cc-button-small { min-block-size: 2.5rem; padding-inline: calc(var(--av-space) * 1.5); font-size: var(--av-text-small); }

.cc-link { display: inline-flex; align-items: center; min-block-size: var(--cc-target); padding-inline: var(--av-space); font-weight: 600; }

/* ---- Forms ---- */

.cc-form { margin: 0; }
.cc-form h2 { margin-block: calc(var(--av-space) * 3) calc(var(--av-space) * 1.5); }
.cc-form h2:first-of-type { margin-block-start: 0; }
.cc-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 calc(var(--av-space) * 3); }
.cc-form-grid .av-field-wide { grid-column: 1 / -1; }
.cc-form-bar { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--av-space) * 1.5); margin-block-start: calc(var(--av-space) * 2); }
.cc-cancel { margin-block-start: calc(var(--av-space) * 3); }
.cc-cancel p { margin-block-end: var(--av-space); }

.cc .av-field > label, .cc .av-field > fieldset > legend { font-size: var(--av-text-small); }
.cc .av-hint { font-size: var(--av-text-label); }
.cc .av-field-error { display: block; margin-block-start: 4px; color: var(--av-danger); font-size: var(--av-text-small); }

/* Phone inputs at 16 px or more, or the phone zooms in on focus; every text box whatever its type (round 4, item 11). */
.cc input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="range"], [type="color"], [type="submit"], [type="button"]), .cc select {
    min-block-size: var(--cc-target);
    font-size: 1rem;
}

/* A screening answer (round 4, item 25, the guide's G9 within the static pages): Yes and No side by side, several choices
   one a line, each box on its label's first line; a number and a year sized to their value (the guide's number box);
   a date typed day/month/year with its calendar button, shown by cc-forms.js. */
.cc-choices { display: flex; flex-wrap: wrap; gap: calc(var(--av-space) * 0.75) calc(var(--av-space) * 2.5); }
.cc-choices-column { flex-direction: column; gap: calc(var(--av-space) * 0.75); }
.cc-choices .av-check { align-items: flex-start; }
.cc-choices .av-check input { margin-block-start: 0.2em; }
.cc .av-num-box input { min-inline-size: 0; }
.cc-date { position: relative; inline-size: 13rem; }
.cc-date .av-date-typed { flex: 1 1 auto; min-inline-size: 0; font-variant-numeric: tabular-nums; }
.cc-date .av-date-open[hidden] { display: none; }
.cc-date .av-date-open { flex: none; inline-size: var(--cc-target); }
.cc-date-native { position: absolute; inset-block-end: 0; inset-inline-end: 0; inline-size: 1px; block-size: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }

/* A wait shows (round 4, item 16): over the page while a form posts, faded in after 0.6 s so a quick post shows nothing. */
.cc-busy { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: rgb(255 255 255 / 0.65); animation: cc-busy-in 0.2s ease 0.6s both; cursor: progress; }
.cc-busy[hidden] { display: none; }
.cc-busy-box { display: inline-flex; align-items: center; gap: var(--av-space); padding: calc(var(--av-space) * 1.25) calc(var(--av-space) * 2); border-radius: var(--av-radius); background: var(--av-white); box-shadow: 0 6px 24px rgb(15 34 58 / 0.18); color: var(--av-navy); font-weight: 600; }
@keyframes cc-busy-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cc-busy { animation: none; } }

.cc input[readonly] { background: var(--av-mist); color: var(--av-charcoal); }
.cc input[type="file"] { font-size: 1rem; }
.cc-code { max-inline-size: 14rem; font-size: 1.375rem !important; letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }

.cc-consent { align-items: flex-start; font-size: var(--av-text); }
.cc-consent input { margin-block-start: 0.25rem; inline-size: 1.25rem; block-size: 1.25rem; accent-color: var(--av-teal-dark); }

.cc-notice {
    margin-block-end: calc(var(--av-space) * 2);
    padding: calc(var(--av-space) * 1.5) calc(var(--av-space) * 2);
    border: 1px solid var(--av-line);
    border-radius: var(--av-radius);
    background: #FAFBFC;
}

.cc-notice > summary { color: var(--av-navy); font-weight: 600; cursor: pointer; min-block-size: var(--cc-target); display: flex; align-items: center; }

/* ---- Forms opened on the page: a drawer on a computer, the full screen on a phone; confirmations centred ---- */

/* The frame (skip link, bar, page, footer) takes no box of its own: it only carries "inert" while a dialog is open. */
.cc-frame { display: contents; }

/* One scrolling area while a form is open: the page behind stays still (review UX-13). */
body:has(.cc-overlay) { overflow: hidden; }

.cc-overlay { position: fixed; inset: 0; z-index: 50; display: flex; }
.cc-overlay-scrim { position: absolute; inset: 0; background: rgb(16 48 79 / 45%); }

dialog.cc-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    max-block-size: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--av-white);
    color: var(--av-charcoal);
    box-shadow: var(--av-shadow-3);
    overflow-y: auto;
    overscroll-behavior: contain;
}

dialog.cc-drawer { inline-size: min(36rem, 100%); block-size: 100%; margin-inline-start: auto; }
dialog.cc-confirm { inline-size: min(34rem, calc(100% - 2 * var(--cc-gutter))); max-block-size: calc(100% - 2 * var(--cc-gutter)); margin: auto; border-radius: var(--av-radius); }

.cc-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--av-space);
    padding: calc(var(--av-space) * 2) calc(var(--av-space) * 3);
    border-block-end: 1px solid var(--av-line);
}

.cc-dialog-head h2 { display: flex; align-items: center; gap: var(--av-space); margin: 0; font-size: var(--av-section); }
.cc-dialog-head h2 .av-icon { color: var(--av-teal-dark); inline-size: 1.25rem; block-size: 1.25rem; }
.cc-danger .cc-dialog-head h2, .cc-danger .cc-dialog-head h2 .av-icon { color: var(--av-danger); }

.cc-dialog-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--cc-target);
    block-size: var(--cc-target);
    border-radius: var(--av-radius);
    flex: none;
}

.cc-dialog-close:hover { background: var(--av-mist); }
.cc-dialog-body { padding: calc(var(--av-space) * 3); }
.cc-form-help { margin: 0 calc(var(--av-space) * 3) calc(var(--av-space) * 3); padding-block-start: calc(var(--av-space) * 1.5); border-block-start: 1px solid var(--av-line); }
.cc-form-help > summary { display: flex; align-items: center; gap: var(--av-space); min-block-size: var(--cc-target); color: var(--av-navy); font-weight: 600; cursor: pointer; }
.cc-form-help .av-prose h1 { font-size: var(--av-subsection); }

/* ---- The footer ---- */

.cc-footer { position: sticky; inset-block-end: 0; z-index: 30; border-block-start: 1px solid var(--av-cool-gray); background: var(--av-white); color: var(--av-slate); font-size: var(--av-text-small); }

.cc-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--av-space) calc(var(--av-space) * 3);
    max-inline-size: var(--cc-width);
    margin-inline: auto;
    padding: calc(var(--av-space) * 2) var(--cc-gutter);
}

.cc-footer p { margin: 0; }
.cc-footer-links { display: flex; flex-wrap: wrap; gap: var(--av-space) calc(var(--av-space) * 2.5); margin: 0; padding: 0; list-style: none; }
.cc-footer-links a { display: inline-flex; align-items: center; gap: 6px; min-block-size: 2rem; }
.cc-footer-links .av-icon { color: var(--av-teal-dark); }

/* ---- Computer and phone ---- */

@media (max-width: 60rem) {
    .cc-menu { display: none; }
    .cc-menu-pop { display: block; }
    .cc-tools { margin-inline-start: auto; }
    .cc-menu + .cc-tools { margin-inline-start: auto; }
}

@media (max-width: 40rem) {
    :root { --av-title: 1.5rem; --av-section: 1.125rem; scroll-padding-block-end: 0; }
    /* The tools go to a second row when the brand and they do not fit beside each other. */
    .cc-bar-inner { flex-wrap: wrap; gap: 4px var(--av-space); min-block-size: 3.75rem; padding-block: 6px; }
    .cc-brand { gap: var(--av-space); }
    .cc-brand img { inline-size: 7.25rem; }
    .cc-app { padding-inline-start: var(--av-space); font-size: 0.875rem; }
    .cc-tools { gap: 4px; }
    .cc-bar-button { padding-inline: 6px; }

    /* The labels stay for screen readers; the icons carry them on a phone. */
    .cc-bar-label {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* The panels open under the whole bar, across the screen. */
    .cc-pop { position: static; }

    .cc-pop-panel {
        inset-block-start: 100%;
        inset-inline: var(--av-space);
        min-inline-size: 0;
        inline-size: auto;
    }

    .cc-main { padding-block-start: calc(var(--av-space) * 3); }
    .cc-card { padding: calc(var(--av-space) * 2); }
    .cc-form-grid, .cc-form-grid-3 { grid-template-columns: minmax(0, 1fr); }
    .cc-search { grid-template-columns: minmax(0, 1fr); }
    .cc-steps li { font-size: 0.75rem; }
    .cc-facts > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .cc-footer { position: static; }
    .cc-footer-inner { flex-direction: column; align-items: flex-start; }

    dialog.cc-drawer, dialog.cc-confirm { inline-size: 100%; block-size: 100%; max-block-size: 100%; margin: 0; border-radius: 0; }
}