/* ===== Legal and policy ===== */
/* =============================================================================
 * iDrive frontend tranche 2 — LEGAL AND POLICY family append.
 *
 * APPEND-ONLY, to the END of assets/css/app.css. The theme registers exactly
 * one style handle, so this is the only place these rules can live. Nothing
 * below restates a token, a font, a breakpoint or a component that already
 * exists above; the family reuses .content-main, .content-hero, .prose-layout,
 * .explore-stream, .prose, .explore-sidebar, .explore-provenance, .action-row,
 * .search-state-card, .section--tight and .breadcrumb as shipped.
 *
 * Nine new class names in total, all emitted by template-legal.php,
 * template-legal-index.php or the render partials in inc/legal-pages.php:
 *   .legal-toc  .legal-toc__list  .legal-index  .legal-index__row
 *   .legal-index__label  .legal-status  .legal-status--approved
 *   .legal-status--pending  .legal-identity
 *
 * Breakpoints reused, never invented: 760 / 430.
 * Colours are --idrive-* tokens plus the two literal tints already used by the
 * live sheet's chip pattern (#e7f6ec) and its warning-tinted sibling.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 1. Table of contents. Built from the headings the approved document actually
 *    contains, so it is a navigation aid, never a summary of the wording. Every
 *    row is a 44px target; h3 rows indent through the data-level attribute the
 *    partial already emits, which avoids a tenth class.
 * -------------------------------------------------------------------------- */
.legal-toc { padding: clamp(1rem, 2.5vw, 1.35rem) clamp(1rem, 2.5vw, 1.4rem); border: 1px solid var(--idrive-line); border-radius: var(--idrive-radius); background: var(--idrive-mist); }
.legal-toc h2 { margin: 0 0 .5rem; color: var(--idrive-ink); font-size: .78rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.legal-toc__list { display: grid; gap: .05rem; margin: 0; padding: 0; list-style: none; }
.legal-toc__list li { display: block; }
.legal-toc__list a { display: flex; align-items: center; min-height: 2.75rem; padding: .45rem .55rem; border-radius: .6rem; color: var(--idrive-green-deep); font-size: .92rem; font-weight: 700; }
.legal-toc__list a:hover { color: var(--idrive-ink); background: var(--idrive-white); }
.legal-toc__list a:focus-visible { background: var(--idrive-white); }
.legal-toc__list li[data-level="3"] a { padding-left: 1.6rem; color: var(--idrive-text); font-size: .87rem; font-weight: 650; }

/* The tabindex the partial adds must not paint a permanent outline on a mouse
   click.

   The 5.5rem scroll-margin-top that used to sit on these two selectors is
   REMOVED. It was the only sticky-header mitigation in the whole composition
   and it covered article body headings alone, leaving the skip link, the
   article outline, the booking error summary and sequential Tab focus to land
   under the header. That is now fixed once, for every target on every page, by
   html { scroll-padding-top: 6rem } in app.css. Keeping both would have stacked
   6rem of scrollport padding on top of 5.5rem of element margin and dropped
   anchored headings 11.5rem down the viewport. */
.prose h2[id]:focus:not(:focus-visible), .prose h3[id]:focus:not(:focus-visible) { outline: none; }

/* -----------------------------------------------------------------------------
 * 2. The policy index. One row per document in the registry, carrying its real
 *    state. A document with no published page renders as <strong>, not <a>, so
 *    the index cannot contain a dead link.
 * -------------------------------------------------------------------------- */
.legal-index { display: grid; gap: .5rem; }
.legal-index__row { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; min-height: 3.5rem; padding: .7rem 1rem; border: 1px solid var(--idrive-line); border-radius: .85rem; background: var(--idrive-white); }
.legal-index__label { min-width: 0; display: grid; gap: .15rem; }
.legal-index__label a { display: inline-flex; align-items: center; min-height: 2rem; color: var(--idrive-green-deep); font-size: 1rem; font-weight: 800; }
.legal-index__label a:hover { color: var(--idrive-ink); text-decoration: underline; text-underline-offset: .18em; }
.legal-index__label strong { color: var(--idrive-text); font-size: 1rem; font-weight: 750; }
.legal-index__label small { color: var(--idrive-muted); font-size: .78rem; font-weight: 650; }

/* -----------------------------------------------------------------------------
 * 3. Status pill. Two states only, because the template only has two: a
 *    document is either approved and rendered, or it is not and the placeholder
 *    is rendered. --idrive-green-deep on #e7f6ec measures 5.6:1 and
 *    --idrive-warning #8f5000 on #fdf3e6 measures 7.4:1; both clear AA at this
 *    size, which --idrive-green would not.
 * -------------------------------------------------------------------------- */
.legal-status { flex: none; padding: .3rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.legal-status--approved { color: var(--idrive-green-deep); background: #e7f6ec; }
.legal-status--pending { color: var(--idrive-warning); background: #fdf3e6; }

/* -----------------------------------------------------------------------------
 * 4. Contracting identity. Rendered from idrive_platform_legal_identity() on
 *    legal pages only. Deliberately quiet: it is a disclosure, not a badge, and
 *    it must not read as a trust signal.
 * -------------------------------------------------------------------------- */
.legal-identity { display: grid; gap: .35rem; padding: 1rem 1.2rem; border: 1px solid var(--idrive-line); border-left: 3px solid var(--idrive-lime); border-radius: 0 var(--idrive-radius) var(--idrive-radius) 0; background: var(--idrive-mist); }
.legal-identity h2, .legal-identity h3 { margin: 0; color: var(--idrive-ink); font-size: .78rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.legal-identity p { margin: 0; color: var(--idrive-text); font-size: .95rem; }
.legal-identity strong { color: var(--idrive-ink); font-weight: 800; }
.legal-identity .text-link { text-align: left; }

/* -----------------------------------------------------------------------------
 * 5. Responsive. Existing breakpoints only.
 * -------------------------------------------------------------------------- */
@media (max-width: 760px) {
	.legal-toc { padding: 1rem; }
}

@media (max-width: 430px) {
	.legal-index__row { flex-direction: column; align-items: flex-start; gap: .5rem; }
	.legal-status { align-self: flex-start; }
}

/* -----------------------------------------------------------------------------
 * 6. PRINT. A policy document is a document: people print it, save it to PDF
 *    and attach it to a complaint. The stylesheet had no print rules at all, so
 *    this is the first block. Site chrome, the rail, the in-page table of
 *    contents and every button come off; the wording, the version strip and the
 *    contracting identity stay. In-body links print their href so a printed
 *    copy stays traceable, and headings do not orphan across a page break.
 * -------------------------------------------------------------------------- */
@media print {
	.site-header,
	.site-footer,
	.skip-link,
	.mobile-drawer,
	.drawer-backdrop,
	.explore-sidebar,
	.page-booking-card,
	.breadcrumb,
	.legal-toc,
	.action-row { display: none !important; }

	.content-main,
	.prose-layout,
	.explore-stream { display: block; }
	.container { width: 100%; max-width: none; margin: 0; padding: 0; }

	.content-hero { padding: 0 0 .75rem; background: none; border-bottom: 1px solid #000; }
	.content-hero h1 { max-width: none; font-size: 22pt; }

	.prose > * { max-width: none; }
	.prose h2, .prose h3 { break-after: avoid-page; page-break-after: avoid; }
	.prose p, .prose li, .prose blockquote, .prose table { break-inside: avoid; page-break-inside: avoid; }
	.prose a:not(.button)::after { content: " (" attr(href) ")"; font-size: .85em; font-weight: 400; word-break: break-all; }

	.explore-provenance,
	.legal-identity,
	.legal-index__row,
	.search-state-card { border: 1px solid #000; background: none; box-shadow: none; }
	.legal-identity { border-left-width: 1px; border-radius: 0; }
	.search-state-card__icon { display: none; }
	.legal-status { border: 1px solid #000; background: none; }
}
/* ===== Trust and brand — About iDrive, How it works, Safety and vetting, Reviews and testimonials, Press ===== */
/* =============================================================================
   TRANCHE 2 — TRUST AND BRAND FAMILY
   Append to the END of wordpress-theme/idrive-platform/assets/css/app.css.

   Appended, never a second file: the theme registers exactly one style handle
   ('idrive-platform', assets/css/app.css, filemtime()-busted) and this family
   registers none.

   Nothing already declared in app.css is restated here. The trust templates
   reuse the existing .container/.section/.section--tight/.section-heading/
   .eyebrow/.button/.text-link/.content-hero/.content-main/.breadcrumb/.prose/
   .travel-panel/.action-row/.faq-list/.result-card__details/
   .result-card__detail-panel/.search-state-card/.topic-rail/.how-section/
   .how-grid/.steps-list/.service-grid/.service-card/.global-cta/
   .destination-grid/.destination-grid--compact/.explore-provenance/.sr-only
   components as they stand. Every rule below is a class those templates emit
   that app.css did not already declare.

   Breakpoints reuse the four already in the file: 1050 / 760 / 430 / 350.
   No new custom property is introduced; --idrive-green-deep is used for every
   piece of coloured text because --idrive-green is 3.91:1 on white.
   (An earlier revision of this file recorded 3.53:1 in three places; that
   figure was wrong. Recomputed with the WCAG relative-luminance formula,
   #15944b on #ffffff is 3.91:1. It still fails AA 4.5:1 at body size, so
   every declaration below is unchanged - only the evidence is corrected.)
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Page scaffold. Trust pages are read, not scanned, so the measure is
      narrower than a city or route hub and the vertical rhythm is tighter.
   -------------------------------------------------------------------------- */

.content-main--trust > .section > .container { max-width: 68rem; }
.content-main--trust > .global-cta > .container { max-width: var(--idrive-width); }

/* Two products, not three: .service-grid is a hard 3-up and would strand a gap. */
.service-grid--pair { grid-template-columns: repeat(2, 1fr); }

/* -----------------------------------------------------------------------------
   2. Trust-specific text inside the existing .post-grid / .post-card system.
      The shared cards own layout; these three hooks carry only factual counts,
      attributed quotations and an optional recorded rating.
   -------------------------------------------------------------------------- */

.trust-count { margin: 0; color: var(--idrive-green-deep); font-size: .72rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.trust-quote { margin: 0; padding: 0; border: 0; color: var(--idrive-ink); font-size: clamp(1rem, 1.8vw, 1.12rem); font-weight: 600; line-height: 1.55; }
.trust-rating { margin: 0; color: var(--idrive-green-deep); font-size: 1.05rem; font-weight: 800; letter-spacing: .1em; line-height: 1; }

/* -----------------------------------------------------------------------------
   3. .trust-note — the honest-limits block. Every line inside it is a claim
      iDrive declines to make, so it is styled as a stated boundary (a solid
      left rule) rather than as a warning: nothing here is broken.
   -------------------------------------------------------------------------- */

.trust-note { padding: 1.3rem 1.5rem; border: 1px solid var(--idrive-line); border-left: .35rem solid var(--idrive-green-deep); border-radius: var(--idrive-radius); background: var(--idrive-mist); }
.trust-note > p { margin: 0 0 .9rem; color: var(--idrive-ink); font-weight: 750; }
.trust-note ul { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.trust-note li { position: relative; padding-left: 1.6rem; color: var(--idrive-text); font-size: .93rem; line-height: 1.6; }
.trust-note li::before { content: "—"; position: absolute; top: 0; left: 0; color: var(--idrive-green-deep); font-weight: 900; }

/* -----------------------------------------------------------------------------
   4. .trust-facts — the on-the-record definition list, shared by About (facts),
      Safety (the vetting checklist) and Press (media facts).
   -------------------------------------------------------------------------- */

.trust-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0; }
.trust-facts > div { display: grid; gap: .3rem; padding: 1.05rem 1.2rem; border: 1px solid var(--idrive-line); border-radius: 1rem; background: var(--idrive-white); }
.trust-facts dt { margin: 0; color: var(--idrive-green-deep); font-size: .68rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.trust-facts dd { margin: 0; color: var(--idrive-text); font-size: .93rem; line-height: 1.55; }

/* -----------------------------------------------------------------------------
   5. Responsive. Reuses the existing 1050 / 760 / 430 breakpoints.
   -------------------------------------------------------------------------- */

@media (max-width: 1050px) {
	.content-main--trust > .section > .container { max-width: none; }
}

@media (max-width: 760px) {
	.service-grid--pair,
	.trust-facts { grid-template-columns: 1fr; }
	.trust-note { padding: 1.1rem 1.2rem; }
}

@media (max-width: 430px) {
	.trust-quote { font-size: 1rem; }
	.trust-facts > div { padding: .9rem 1rem; }
}
/* ===== help ===== */

/* =========================================================================
 * TRANCHE 2 — HELP AND SUPPORT CENTRE, AND THE 404 RECOVERY SURFACE
 *
 * APPEND to the end of wordpress-theme/idrive-platform/assets/css/app.css.
 *
 * ONE STYLESHEET. The theme registers exactly one style handle,
 * 'idrive-platform', pointing at this file and versioned with filemtime().
 * Nothing below creates a second file, a second handle or a second :root.
 * No brand token is redefined here; --idrive-warning and --idrive-error are
 * already declared by the tranche 1 append above.
 *
 * REUSE FIRST. The help centre borrows every component that already exists:
 * .content-hero, .breadcrumb, .section, .section--tight, .section-heading,
 * .explore-layout, .explore-sidebar, .explore-search, .field-control,
 * .search-state-card, .action-row, .faq-list, .result-card__details,
 * .explore-provenance, .page-booking-card, .prose and .global-cta are used
 * unchanged and are NOT restated. Only genuinely new components appear below.
 *
 * CONTRAST. --idrive-green (#15944b) is 3.91:1 on white and fails AA at body
 * sizes, so it is used for filled surfaces only. Every text colour below is
 * --idrive-ink, --idrive-text, --idrive-muted or --idrive-green-deep.
 *
 * RESPONSIVE. Every new grid is intrinsically fluid
 * (auto-fill + minmax(min(100%, X), 1fr)), so it needs no breakpoint of its
 * own. The three shared breakpoints it depends on — .explore-layout stacking
 * at 760, .explore-search stacking at 430 and .action-row .button going full
 * width at 430 — are already declared above and are not duplicated. The only
 * new query is one 430 rule for the two card grids' internal padding.
 * ====================================================================== */

/* Layout hook for both help templates. Spacing only: it introduces no new
   card or panel treatment, exactly like .content-main--city above. */
.content-main--help { display: block; }
.content-main--help .explore-layout { padding-top: clamp(1.5rem, 4vw, 2.5rem); }
.content-main--help .explore-layout > div:first-child { min-width: 0; display: grid; align-content: start; gap: clamp(1.25rem, 3vw, 2rem); }

/* --- Topic cards on the /help/ hub ------------------------------------- */
.help-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); gap: 1rem; }
.help-topic { display: grid; align-content: start; gap: .35rem; padding: 1.3rem 1.25rem 1.4rem; border: 1px solid var(--idrive-line); border-radius: var(--idrive-radius); background: var(--idrive-white); box-shadow: 0 12px 36px rgba(6, 26, 18, .055); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.help-topic:hover { transform: translateY(-3px); border-color: #c4d9cb; box-shadow: var(--idrive-shadow); }
.help-topic > .help-topic__mark { display: grid; width: 2.75rem; height: 2.75rem; margin-bottom: .4rem; place-items: center; color: var(--idrive-white); border-radius: .8rem; background: var(--idrive-green-deep); font-size: .82rem; font-weight: 900; letter-spacing: .06em; }
.help-topic strong { color: var(--idrive-ink); font-size: 1.08rem; line-height: 1.25; letter-spacing: -.015em; }
.help-topic > .help-topic__summary { color: var(--idrive-muted); font-size: .88rem; }
.help-topic > .help-topic__count { margin-top: .3rem; color: var(--idrive-green-deep); font-size: .7rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }

/* --- Article rows: hub results, search results and related lists ------- */
.help-results { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.help-result { display: grid; gap: .22rem; min-height: 2.75rem; padding: 1rem 1.15rem; border: 1px solid var(--idrive-line); border-radius: var(--idrive-radius); background: var(--idrive-white); box-shadow: 0 10px 30px rgba(6, 26, 18, .05); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.help-result:hover { transform: translateY(-2px); border-color: #c4d9cb; box-shadow: var(--idrive-shadow); }
.help-result strong { color: var(--idrive-ink); font-size: 1.02rem; line-height: 1.3; letter-spacing: -.015em; }
.help-result:hover strong { color: var(--idrive-green-deep); }
.help-result__topic { color: var(--idrive-green-deep); font-size: .67rem; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.help-result__summary { color: var(--idrive-muted); font-size: .88rem; }
.help-results__count { font-size: .84rem; font-weight: 700; }

/* --- Contact, complaint and lost-property routes ----------------------- */
.help-channels { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); gap: 1rem; }
.help-channel { display: grid; align-content: start; gap: .45rem; padding: 1.3rem 1.25rem; border: 1px solid var(--idrive-line); border-radius: var(--idrive-radius); background: var(--idrive-white); box-shadow: 0 12px 36px rgba(6, 26, 18, .055); }
.help-channel__mark { display: grid; width: 2.75rem; height: 2.75rem; margin-bottom: .3rem; place-items: center; color: var(--idrive-white); border-radius: .8rem; background: var(--idrive-ink-soft); font-size: .82rem; font-weight: 900; letter-spacing: .06em; }
.help-channel h3, .help-channel h4 { margin: 0; color: var(--idrive-ink); font-size: 1.05rem; line-height: 1.25; letter-spacing: -.015em; }
.help-channel > p { margin: 0; color: var(--idrive-text); font-size: .9rem; }
.help-channel .action-row { margin: .4rem 0 0; }
.help-channel .action-row .button { width: 100%; }
.help-channel > p.help-channel__note { color: var(--idrive-muted); font-size: .76rem; font-weight: 650; }
/* --- 404 recovery ------------------------------------------------------ */
/* The live .not-found block above keeps its h1 and paragraph treatment; this
   modifier only reduces the outer padding, because the page now carries a
   search box, an action row and three recovery panels rather than one line. */
.not-found--recovery { padding: clamp(2.75rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5rem); }
.not-found__lead { max-width: 60ch; margin: 0 0 clamp(1.25rem, 3vw, 1.75rem); font-size: clamp(1rem, 1.4vw, 1.12rem); }
.not-found__search { width: min(100%, 42rem); display: grid; gap: .5rem; margin: 0 0 clamp(1.25rem, 3vw, 1.75rem); }
.not-found__search-note { margin: 0; font-size: .78rem; }
.not-found__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0 0 clamp(2rem, 5vw, 3rem); }
.recovery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.recovery-panel { display: grid; align-content: start; gap: .3rem; padding: 1.2rem 1.25rem; border: 1px solid var(--idrive-line); border-radius: var(--idrive-radius); background: var(--idrive-white); box-shadow: 0 12px 36px rgba(6, 26, 18, .055); }
.recovery-panel h3 { margin: 0 0 .3rem; color: var(--idrive-ink); font-size: .78rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.recovery-panel__list { display: grid; gap: .1rem; margin: 0; padding: 0; list-style: none; }
.recovery-panel__list a { display: block; min-height: 2.75rem; padding: .7rem .5rem; border-radius: .6rem; color: var(--idrive-green-deep); font-size: .92rem; font-weight: 700; }
.recovery-panel__list a:hover { color: var(--idrive-ink); background: var(--idrive-mist); }

@media (max-width: 430px) {
	.help-topic,
	.help-channel { padding: 1.1rem 1rem 1.2rem; }
	.help-result { padding: .9rem 1rem; }
}

/* The live reduced-motion block clamps transition duration globally but not
   the hover transforms introduced here, so both are neutralised explicitly. */
@media (prefers-reduced-motion: reduce) {
	.help-topic,
	.help-result { transition: none; }
	.help-topic:hover,
	.help-result:hover { transform: none; }
}

/* ===== supply ===== */

/* =============================================================================
 * iDrive Platform — SUPPLY-SIDE FAMILY append.
 *
 * APPEND-ONLY, to the END of assets/css/app.css. The theme registers exactly
 * ONE style handle, so this is not a new file: it is the tail of the existing
 * one. Nothing below restates a token, a font, a breakpoint or any rule that
 * already exists above.
 *
 * Breakpoints reused, never invented: 1050 / 760 / 430.
 * Colour: --idrive-green-deep is used for every piece of text and every rule
 * on a light ground, because --idrive-green is 3.91:1 on white and fails AA at
 * these sizes. No new token is declared.
 *
 * Classes this block declares for the first time:
 *   .content-main--supply  .supply-switch     .supply-programmes
 *   .supply-card  .supply-card__mark  .supply-card__body  .supply-card__list
 *   .supply-paths  .supply-path
 *   .supply-evidence  .supply-evidence__group
 *   .supply-note
 *
 * Plus one repair to an existing component: .results-assumptions declares only
 * an h2 rule, while page-self-drive-car-rental-pakistan.php (tranche 1) and
 * every supply template put h3 inside it, leaving those headings unstyled and
 * near-invisible on the dark panel. The h3 rule below closes that.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 1. Page scope. One local custom property, not a brand token: it sets the
 *    reading measure for the long explanatory paragraphs this family is made
 *    of, in one place.
 * -------------------------------------------------------------------------- */
.content-main--supply { --idrive-supply-measure: 74ch; }

/* -----------------------------------------------------------------------------
 * 2. Programme switch. Two real links, rendered inside .content-hero__inner.
 *    The current programme is a --primary button carrying aria-current, so the
 *    state is not signalled by colour alone.
 * -------------------------------------------------------------------------- */
.supply-switch { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .35rem; }
.supply-switch .button { font-size: .88rem; }
.supply-switch .button[aria-current="page"] { box-shadow: 0 0 0 3px rgba(141, 221, 63, .3); }

/* -----------------------------------------------------------------------------
 * 3. The two programme cards. Never one merged card: DEC-134 keeps chauffeur
 *    transport and self-drive rental as separate approved programmes, and the
 *    layout keeps them visually separate too.
 * -------------------------------------------------------------------------- */
.supply-programmes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: clamp(.9rem, 2.5vw, 1.35rem); }

.supply-card { min-width: 0; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1rem; align-items: start; padding: clamp(1.15rem, 2.5vw, 1.6rem); border: 1px solid var(--idrive-line); border-radius: var(--idrive-radius); background: var(--idrive-white); box-shadow: 0 12px 36px rgba(6, 26, 18, .055); }
.supply-card__mark { display: grid; width: 3.5rem; height: 3.5rem; place-items: center; color: var(--idrive-white); background: linear-gradient(145deg, var(--idrive-green-deep), var(--idrive-ink)); border-radius: 1rem; font-size: .92rem; font-weight: 900; letter-spacing: .06em; }
.supply-card__body { min-width: 0; display: grid; gap: .55rem; align-content: start; }
.supply-card__body h2, .supply-card__body h3 { margin: 0; color: var(--idrive-ink); font-size: clamp(1.15rem, 2.2vw, 1.45rem); line-height: 1.2; letter-spacing: -.02em; }
.supply-card__body > p { margin: 0; color: var(--idrive-muted); font-size: .95rem; }
.supply-card .action-row { margin-top: .35rem; }

.supply-card__list { display: grid; gap: .4rem; margin: .15rem 0 0; padding: 0; list-style: none; color: var(--idrive-text); font-size: .88rem; }
.supply-card__list li { position: relative; padding-left: 1.25rem; }
.supply-card__list li::before { content: ""; position: absolute; top: .55em; left: 0; width: .45rem; height: .45rem; border: 1px solid var(--idrive-green-deep); border-radius: 50%; }

/* -----------------------------------------------------------------------------
 * 4. Entry paths (DEC-021: sole driver vs fleet/business). A tinted panel, so
 *    it never reads as a third programme card.
 * -------------------------------------------------------------------------- */
.supply-paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); gap: clamp(.9rem, 2.5vw, 1.35rem); }
.supply-path { min-width: 0; display: grid; gap: .55rem; align-content: start; padding: clamp(1.15rem, 2.5vw, 1.6rem); border: 1px solid var(--idrive-line); border-radius: var(--idrive-radius); background: var(--idrive-mist); }
.supply-path h2, .supply-path h3 { margin: 0; color: var(--idrive-ink); font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.25; letter-spacing: -.02em; }
.supply-path p { max-width: 60ch; margin: 0; color: var(--idrive-text); font-size: .92rem; }
.supply-path p + p { color: var(--idrive-muted); font-size: .86rem; }

/* -----------------------------------------------------------------------------
 * 5. Evidence checklist. Categories of evidence only — no page in this family
 *    collects a document, an identity number or a bank detail in the browser,
 *    so there is no field, no fieldset and no form styling here by design.
 * -------------------------------------------------------------------------- */
.supply-evidence { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: clamp(.8rem, 2vw, 1.15rem); }
.supply-evidence__group { min-width: 0; display: grid; gap: .6rem; align-content: start; padding: clamp(1.05rem, 2.2vw, 1.4rem); border: 1px solid var(--idrive-line); border-radius: 1rem; background: var(--idrive-white); box-shadow: 0 12px 36px rgba(6, 26, 18, .055); }
.supply-evidence__group h2, .supply-evidence__group h3 { margin: 0; color: var(--idrive-green-deep); font-size: .72rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.supply-evidence__group ul { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; color: var(--idrive-text); font-size: .88rem; }
.supply-evidence__group li { position: relative; padding-left: 1.35rem; }
.supply-evidence__group li::before { content: ""; position: absolute; top: .48em; left: .1rem; width: .55rem; height: .55rem; border: 1px solid var(--idrive-green-deep); border-radius: .2rem; }

/* -----------------------------------------------------------------------------
 * 6. The explanatory paragraph this family leans on. Capped to the local
 *    measure so a governance sentence never runs the full 1240px.
 * -------------------------------------------------------------------------- */
.supply-note { max-width: var(--idrive-supply-measure, 74ch); margin: clamp(1rem, 2.5vw, 1.5rem) 0 0; color: var(--idrive-text); font-size: .95rem; }
.supply-note + .supply-note { margin-top: .75rem; }
.selfdrive-panel .supply-note { margin-top: 0; } /* the panel is a grid; its gap owns the rhythm */
.supply-note a { color: var(--idrive-green-deep); font-weight: 800; text-decoration: underline; }

/* -----------------------------------------------------------------------------
 * 7. Repair: .results-assumptions styles h2 only, but the self-drive hub and
 *    every supply template use h3 there to keep the heading order legal under
 *    a section h2. Same treatment, matching the existing h2 rule.
 * -------------------------------------------------------------------------- */
.results-assumptions h3 { margin: 0 0 .45rem; color: var(--idrive-white); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; }
.results-assumptions h3:not(:first-child) { margin-top: 1.1rem; }

/* -----------------------------------------------------------------------------
 * 8. Responsive. Existing breakpoints only.
 * -------------------------------------------------------------------------- */
@media (max-width: 1050px) {
	.supply-evidence { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
}

@media (max-width: 760px) {
	.supply-card { grid-template-columns: 1fr; gap: .85rem; }
	.supply-note { max-width: none; }
}

@media (max-width: 430px) {
	.supply-switch .button { flex: 1 1 100%; }
	.supply-card__mark { width: 3rem; height: 3rem; font-size: .84rem; }
}

/* ===== account-and-authentication ===== */

/* =============================================================================
 * TRANCHE 2 - ACCOUNT AND AUTHENTICATION FAMILY
 * page-account.php, page-sign-in.php, page-register.php,
 * page-password-reset.php and inc/account-pages.php.
 *
 * Appended to the ONE stylesheet. No new handle, no second file.
 *
 * The family deliberately reuses the live account shell rather than inventing a
 * second one: .account-gateway__grid is the two-column layout, and
 * .account-gateway__card / .account-gateway__status are the panel and the dark
 * status note. Only the column stacks, the page rail and the form controls are
 * new. Actions use the existing .action-row, empty and gated states use the
 * existing .search-state-card, and the booking prompt uses the existing
 * .page-booking-card through template-parts/cta-booking.php.
 *
 * Every control here clears 44px: .account-nav rows are 2.75rem, the check
 * labels are 2.75rem, and .account-form__field is 2.15rem of input inside
 * .6rem of vertical padding. Contrast: labels and hints are --idrive-muted on
 * white and links are --idrive-green-deep, never --idrive-green, which fails AA
 * at body sizes.
 *
 * Breakpoints reuse the existing 760 / 430 steps. .account-gateway__grid
 * already collapses to one column at 760, so nothing is restated here.
 * ========================================================================== */

.account-main,
.account-rail { min-width: 0; display: grid; gap: 1.25rem; align-content: start; }

/* Panel extensions. The live rules declare .account-gateway__card h2 and li
   only, and these four pages also put paragraphs and lists in the panel. */
.account-gateway__card > p { color: var(--idrive-muted); }
.account-gateway__card > p:last-child { margin-bottom: 0; }
.account-gateway__card > ul { margin: 0 0 1rem; padding-left: 1.15rem; color: var(--idrive-text); }
.account-gateway__card .search-state-card { margin-top: 1rem; box-shadow: none; }
.account-gateway__status strong { display: block; margin-bottom: .4rem; color: var(--idrive-white); }
.account-gateway__status p:last-child { margin-bottom: 0; }

/* The rail across the four account surfaces. Crawlable list, no JS. */
.account-nav { padding: clamp(1.1rem, 2.4vw, 1.5rem); border: 1px solid var(--idrive-line); border-radius: var(--idrive-radius); background: var(--idrive-mist); }
.account-nav h2 { margin: 0 0 .5rem; color: var(--idrive-ink); font-size: .78rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.account-nav ol { display: grid; gap: .15rem; margin: 0; padding: 0; list-style: none; }
.account-nav li { margin: 0; }
.account-nav a,
.account-nav span { display: flex; align-items: center; min-height: 2.75rem; padding: .35rem .6rem; border-radius: .6rem; font-size: .9rem; font-weight: 700; }
.account-nav a { color: var(--idrive-green-deep); }
.account-nav a:hover { background: var(--idrive-white); text-decoration: underline; text-underline-offset: .18em; }
.account-nav span { color: var(--idrive-muted); }
.account-nav [aria-current="page"] { color: var(--idrive-ink); background: var(--idrive-white); box-shadow: inset 0 0 0 1px var(--idrive-line); }

/* Forms. Plain POST to admin-post.php, so every rule here has to work with no
   script running at all. */
.account-form { display: grid; gap: 1rem; margin: 1.15rem 0 0; }
.account-form + .account-form { margin-top: .35rem; padding-top: 1rem; border-top: 1px solid var(--idrive-line); }
.account-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .75rem; }
.account-form__field { min-width: 0; display: grid; gap: .2rem; padding: .6rem .9rem; border: 1px solid var(--idrive-line); border-radius: .9rem; background: var(--idrive-white); transition: border-color .18s ease, box-shadow .18s ease; }
.account-form__field:focus-within { border-color: var(--idrive-green-deep); box-shadow: 0 0 0 3px rgba(21, 148, 75, .18); }
.account-form__label { color: var(--idrive-muted); font-size: .66rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.account-form__hint { max-width: 62ch; margin: 0; color: var(--idrive-muted); font-size: .82rem; line-height: 1.5; }
.account-form__check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: start; }
.account-form__check input { width: 1.35rem; height: 1.35rem; margin: .7rem 0 0; accent-color: var(--idrive-green-deep); }
.account-form__check label { min-height: 2.75rem; display: flex; align-items: center; color: var(--idrive-text); font-size: .92rem; line-height: 1.45; }
.account-form__check a { color: var(--idrive-green-deep); font-weight: 700; text-decoration: underline; text-underline-offset: .18em; }
.account-form__check a:hover { color: var(--idrive-ink); }
.account-form__actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 0; }
.account-form__actions .button { min-height: 2.75rem; }

/* What registration will ask for, in order. */
.account-steps { display: grid; gap: .65rem; margin: 0 0 1.15rem; padding: 0; list-style: none; counter-reset: idrive-account-step; }
.account-steps li { position: relative; margin: 0; padding-left: 2.5rem; color: var(--idrive-muted); font-size: .92rem; line-height: 1.5; }
.account-steps li::before { counter-increment: idrive-account-step; content: counter(idrive-account-step); position: absolute; top: 0; left: 0; display: grid; width: 1.8rem; height: 1.8rem; place-items: center; color: var(--idrive-white); border-radius: 50%; background: var(--idrive-green-deep); font-size: .8rem; font-weight: 850; }
.account-steps li strong { display: block; color: var(--idrive-ink); font-weight: 800; }

@media (max-width: 430px) {
	.account-form__grid { grid-template-columns: 1fr; }
	.account-form__actions .button { width: 100%; }
}

/* =============================================================================
 * FORCED-COLORS (Windows High Contrast) SUPPORT for the two current-state
 * markers this file owns. SC 1.4.11 Non-text Contrast / SC 1.3.1.
 *
 * forced-colors mode discards author background-color, background-image and
 * box-shadow, so both of these lost their marker entirely:
 *
 *   tranche2:360  .supply-switch .button[aria-current="page"] - a box-shadow
 *                 ring and nothing else; the .button--primary gradient that
 *                 otherwise distinguishes it is discarded at the same time, so
 *                 the current programme became indistinguishable from the rest.
 *   tranche2:485  .account-nav [aria-current="page"] - background + box-shadow.
 *
 * Re-expressed with the Highlight / HighlightText system pair, which
 * forced-colors honours from author stylesheets. No outline is declared here,
 * so the global :focus-visible ring in app.css stays the only outline and
 * cannot be out-specified on an element that is both current and focused.
 * ========================================================================== */
@media (forced-colors: active) {
	.supply-switch .button[aria-current="page"],
	.account-nav [aria-current="page"] { background-color: Highlight; color: HighlightText; }
}