/* The base presence stylesheet.

   What makes a presence with no stylesheet of its own presentable: the top
   bar, the page frame, the funnel rail, the bands of a brochure page and the
   footer. layouts/presence.blade.php loads it, BEFORE the presence's own
   sheet (BasePresence::getPresenceStylesheet()), and puts `presence--base`
   on <body> — the one class every rule here hangs off.

   When: BasePresence::usesBaseStylesheet() decides, in code — on for a
   presence with no stylesheet of its own, off for one that ships a sheet,
   because such a sheet was written against bare markup and every property
   it leaves alone would otherwise change under it. A presence whose sheet
   is written to sit on top of this one overrides that method.

   Neutral on purpose. Every colour, face and size comes from the PORTAL's
   brand properties, as the presence's scope resolves them — a presence
   overrides any of them in its own scope (presence:<key> or presence:*)
   and declares nothing of its own:

     --top-nav-bg-colour, --top-nav-text-colour,
     --top-nav-border-colour, --top-nav-border-width,
     --top-nav-height, --top-nav-padding, --top-nav-gap,
     --top-nav-logo-height, --top-nav-anchor-offset,
     --top-nav-bg-mix, --top-nav-backdrop-filter,
     --top-nav-link-{size|weight|transform|letter-spacing|gap},
     --top-nav-link-hover-{colour|decoration}, --top-nav-cta-colour
                                                  the top bar (Header)
     --button-primary-*, --buttons-border-radius,
     --buttons-text-transform,
     --top-nav-sign-in-{padding|colour|border-colour|border-width}
                                                  the bar's sign-in control
     --page-bg-colour, --page-bg-image            the page ground
     --content-font-size, --content-line-height   the reading size and leading
     --content-max-width                          the measure
     --page-content-gap, --content-band-gap       room between brochure bands
     --page-footer-bg-colour, --page-footer-text-colour,
     --page-footer-border-colour, --page-footer-font-size,
     --page-footer-padding-{x|y}, --page-footer-margin-top,
     --page-footer-measure, --page-footer-column-gap,
     --page-footer-divider-{width|space-above|space-below},
     --page-footer-heading-{colour|transform|variant|size|weight|
       letter-spacing|space},
     --page-footer-link-{gap|opacity|hover-colour|hover-decoration},
     --page-footer-strapline-{size|colour|weight|transform|variant|
       measure|space},
     --page-footer-note-{size|opacity},
     --page-footer-logo-{height|filter}           the footer

   and the classes the partials add once a choice is made: from
   header-style, .presence-nav--{masthead|capsule}; from top-nav-sticky,
   top-nav-show-name, top-nav-show-user and top-nav-sign-in-style,
   .presence-nav--sticky, .presence-nav--name-hidden,
   .presence-nav--user-hidden and .presence-nav--sign-in-{solid|outline|
   text}; on an entry, .presence-nav__link--{button|outline|emphasis} from
   its link_style. The footer's own classes (.page-footer--{columns|
   centred|minimal}, --divider-*, --top-*, --columns-*,
   --strapline-heading) are drawn by styles.css, where the one footer
   partial's rules live (DEV-260); this sheet only hands the footer its
   site-footer defaults on body.presence--base. No class draws as a bar and
   as columns. top-nav-collapse-width is the one choice a class cannot carry:
   a media query cannot read a property, so the nav partial prints that
   rule itself.

   Three expressions recur rather than being named, so the sheet declares
   no custom property of its own: the side gutter,
   `clamp(1.25rem, 5vw, 4rem)`; the measure, `var(--content-max-width,
   1280px)`, which every band, the bar's padding and the footer centre in;
   and the band spacing, `var(--content-band-gap, calc(4 *
   var(--page-content-gap, 1rem)))` — the content.bands setting when set,
   else four times the portal's content gap, so the 1rem it ships at gives
   brochure bands the room they have always had (Bugs 12).

   Easy to override, by construction: every chrome rule is written
   `:where(.presence--base) .x`, which weighs one class — enough to beat the
   element resets, never enough to beat a presence sheet's
   `.presence--<key> .x`. The portal's radius scale does not reach here; a
   presence's shape is its own sheet's business. */

:where(body.presence--base) {
    margin: 0;
    /* page-bg-image is painted on <html> (styles.css), and this body paints an
       opaque ground straight over it, so on a presence the image never showed
       (DEV-140 step 29a; Ashcombe B2, Brightwater 1). The body carries it.

       Through the `background` shorthand, not `background-image`: the
       setting's validator accepts a position/size tail (`url(…) center /
       382px`), which `background-image` cannot take — a value with one was
       invalid and painted nothing at all (DEV-167). The shorthand takes it,
       and resets the colour, so the colour is restated after it. No colour
       goes IN the shorthand: a multi-layer value would then be invalid,
       since only its last layer may carry one. */
    background: var(--page-bg-image, none);
    background-color: var(--page-bg-colour, #ffffff);
    color: var(--page-text-colour, inherit);
    /* The site's own size, then the reading size for content, then the rem it
       always was — the same order the portal reads them in (styles.css:553).
       Reading only content-font-size left a presence on the browser default
       while the portal it belongs to drew at the site's size. */
    font-size: var(--content-font-size, var(--font-size, inherit));
}

/* And the leading beside it: the portal reads content-line-height on
   .main-panel, which a presence does not have, so a presence drew at the
   preflight's 1.5 whatever it was set to (Ashcombe B1). A rule of its own,
   weighing one class: the preflight's `body { line-height: inherit }`
   outweighs the :where() above. A presence sheet's `.presence--<key>` still
   beats it. */
body.presence--base {
    line-height: var(--content-line-height, inherit);

    /* The site-footer defaults (DEV-260). The footer is the one partial and
       the one rule set in styles.css, read through the page-footer-*
       settings; a brochure wants more room and larger type than the app
       shell's band when those settings are BLANK, so the presence body hands
       .page-footer this second tier of fallbacks. A setting, in any scope,
       still wins: these sit beneath var(--page-footer-*), never over it. */
    --footer-margin-top: clamp(2rem, 5vw, 4rem);
    --footer-padding-y: clamp(2rem, 4vw, 3.5rem);
    --footer-padding-x: max(clamp(1.25rem, 5vw, 4rem), calc((100% - var(--content-max-width, 1280px)) / 2));
    --footer-padding-bottom: 2rem;
    --footer-font-size: 0.9375rem;
    --footer-line-height: var(--content-line-height, 1.5);
    --footer-text-colour: currentColor;
}

:where(.presence--base) img {
    max-width: 100%;
}

/* ---- Top bar ---------------------------------------------------------- */

:where(.presence--base) .presence-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem var(--top-nav-gap, 2rem);
    /* top-nav-height, not top-nav-size: that one is the portal bar's
       default / compact choice, and substituting the keyword into a length
       drew nothing (DEV-140 step 29a, Emberwell A1). */
    min-height: var(--top-nav-height, auto);
    /* A set height is the bar's height, not only its least: a sign-in slab
       drawn full-height would otherwise grow the bar by its own padding.
       Blank is auto, as it always was. */
    height: var(--top-nav-height, auto);
    /* Padded to the content measure unless top-nav-padding says otherwise —
       a value is the padding itself, so a bar can run to the page gutter. */
    padding: var(--top-nav-padding, 0.875rem max(clamp(1.25rem, 5vw, 4rem), calc((100% - var(--content-max-width, 1280px)) / 2)));
    background: var(--top-nav-bg-colour, transparent);
    color: var(--top-nav-text-colour, inherit);
    border-bottom: var(--top-nav-border-width, 1px) solid var(--top-nav-border-colour, var(--content-border-colour, #e5e7eb));
}

/* top-nav-backdrop `blur`: the resolver emits the mix and the filter; the
   bar keeps most of its colour and blurs what scrolls beneath (Residual 4). */
:where(.presence--base) .presence-nav--sticky {
    position: sticky;
    top: 0;
    z-index: 30;
    background: color-mix(in srgb, var(--top-nav-bg-colour, var(--page-bg-colour, #ffffff)) var(--top-nav-bg-mix, 100%), transparent);
    -webkit-backdrop-filter: var(--top-nav-backdrop-filter, none);
    backdrop-filter: var(--top-nav-backdrop-filter, none);
}

/* top-nav-sticky: overlay (DEV-167) — the bar floats over the first band
   rather than sitting above it, which is what a brochure site does with a
   transparent bar on a full-bleed hero. Out of the flow, so the first band
   starts at the top of the page; the band keeps its own padding, and a hero
   that wants room for the bar says so with content-hero-padding.

   The bar is still first in the DOM, so it is still the first thing a
   screen reader and the keyboard meet.

   Nothing here touches the first band: a band's ground already runs to the
   top of the page once the bar leaves the flow, and a hero that wants its
   copy clear of the bar says so with content-hero-padding. */
:where(.presence--base) .presence-nav--overlay {
    /* Out of the flow by a negative margin rather than position: absolute.
       Absolute anchors the bar to the document, so anything ABOVE it — the
       dev-task strip, the CMS editor bar, a top banner — ends up sitting on
       the hero instead of above it, and the bar rides up under the banner
       with it. In the flow with its own height taken back, the bar overlays
       what FOLLOWS it and nothing else, whatever precedes it.

       So an overlay bar has a definite height: the content beneath has to
       know that nothing was reserved for it. Blank is 4rem, and the height
       and the margin always read the same value. */
    position: relative;
    z-index: 30;
    height: var(--top-nav-height, 4rem);
    margin-bottom: calc(-1 * var(--top-nav-height, 4rem));
    background: var(--top-nav-bg-colour, transparent);
}


/* In-page anchors clear a sticky bar (Residual 28) — its height, and the
   top-nav-anchor-offset room beyond it. */
:where(.presence--base) .presence-nav--sticky ~ * [id^="section-"] {
    scroll-margin-top: calc(var(--top-nav-height, 4rem) + var(--top-nav-anchor-offset, 0px));
}

:where(.presence--base) .presence-nav--name-hidden .presence-nav__name,
:where(.presence--base) .presence-nav--name-hidden .presence-nav__tagline,
:where(.presence--base) .presence-nav--user-hidden .presence-nav__user {
    display: none;
}

:where(.presence--base) .presence-nav__brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: inherit;
    text-decoration: none;
}

:where(.presence--base) .presence-nav__logo {
    height: var(--top-nav-logo-height, 2rem);
    width: auto;
}

:where(.presence--base) .presence-nav__name {
    font-weight: 700;
    font-size: 1.0625rem;
}

:where(.presence--base) .presence-nav__tagline {
    font-size: 0.875rem;
    opacity: 0.7;
}

:where(.presence--base) .presence-nav__links {
    display: flex;
    flex-wrap: wrap;
    /* Centred on the row: an entry drawn as a button or an outline is taller
       than a plain link, and stretched the others to its height, a few px
       off the bar's centre line (DEV-140 step 29a). */
    align-items: center;
    gap: 0.5rem var(--top-nav-link-gap, 1.5rem);
    margin-left: auto;
}

:where(.presence--base) .presence-nav__account {
    display: flex;
    align-items: center;
    gap: 1rem;
}

:where(.presence--base) .presence-nav__links + .presence-nav__account {
    margin-left: 0;
}

:where(.presence--base) .presence-nav__brand + .presence-nav__account {
    margin-left: auto;
}

:where(.presence--base) .presence-nav__link {
    color: inherit;
    font-size: var(--top-nav-link-size, 0.9375rem);
    font-weight: var(--top-nav-link-weight, 500);
    text-transform: var(--top-nav-link-transform, none);
    letter-spacing: var(--top-nav-link-letter-spacing, normal);
    text-decoration: none;
}

/* An entry's link_style (Residual 6): a button, an outline, or emphasis. */
/* The three styles paint in top-nav-cta-colour, else the primary button's. */
:where(.presence--base) .presence-nav__links .presence-nav__link--button,
:where(.presence--base) .presence-nav__links .presence-nav__link--outline {
    padding: 0.5rem 1rem;
    border-radius: var(--buttons-border-radius, 0.375rem);
    border: 2px solid var(--top-nav-cta-colour, var(--button-primary-bg, var(--brand-primary-colour)));
}

:where(.presence--base) .presence-nav__links .presence-nav__link--button {
    background: var(--top-nav-cta-colour, var(--button-primary-bg, var(--brand-primary-colour)));
    color: var(--button-primary-fg, var(--brand-primary-ink, #ffffff));
}

:where(.presence--base) .presence-nav__links .presence-nav__link--outline {
    color: var(--top-nav-cta-colour, var(--button-primary-bg, var(--brand-primary-colour)));
}

:where(.presence--base) .presence-nav__links .presence-nav__link--emphasis {
    color: var(--top-nav-cta-colour, var(--button-primary-bg, var(--brand-primary-colour)));
    font-weight: 700;
    font-style: italic;
}

:where(.presence--base) .presence-nav__links .presence-nav__link--button:hover,
:where(.presence--base) .presence-nav__links .presence-nav__link--outline:hover {
    text-decoration: none;
    opacity: 0.9;
}

:where(.presence--base) .presence-nav__link:hover {
    text-decoration: var(--top-nav-link-hover-decoration, underline);
    text-underline-offset: 0.25em;
}

/* A folder domain on the bar: a drop-down of its pages (DEV-260). <details>
   opens without script; the menu hangs under its item on the bar's ground. */
:where(.presence--base) .presence-nav__dropdown {
    position: relative;
}

:where(.presence--base) .presence-nav__dropdown > summary {
    list-style: none;
    cursor: pointer;
}

:where(.presence--base) .presence-nav__dropdown > summary::-webkit-details-marker {
    display: none;
}

:where(.presence--base) .presence-nav__dropdown > summary::after {
    content: '';
    display: inline-block;
    margin-left: 0.35em;
    border: 0.3em solid transparent;
    border-top-color: currentColor;
    border-bottom: 0;
    vertical-align: middle;
}

:where(.presence--base) .presence-nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    display: grid;
    gap: 0.125rem;
    min-width: 12rem;
    margin-top: 0.5rem;
    padding: 0.375rem;
    background: var(--top-nav-bg-colour, #fff);
    border: 1px solid var(--top-nav-border-colour, rgba(0, 0, 0, 0.1));
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

:where(.presence--base) .presence-nav__menu-link {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

:where(.presence--base) .presence-nav__menu-link:hover {
    background: color-mix(in srgb, currentColor 8%, transparent);
}

/* A plain link's hover colour. Only the plain links in the row: an entry
   drawn as a button, an outline or with emphasis keeps its own colours, and
   so does the sign-in control. */
:where(.presence--base) .presence-nav__links .presence-nav__link:not(.presence-nav__link--button, .presence-nav__link--outline, .presence-nav__link--emphasis):hover {
    color: var(--top-nav-link-hover-colour, inherit);
}

:where(.presence--base) .presence-nav__account .presence-nav__link {
    padding: var(--top-nav-sign-in-padding, 0.5rem 1rem);
    border-radius: var(--buttons-border-radius, 0.375rem);
    border: var(--top-nav-sign-in-border-width, 1px) solid var(--top-nav-sign-in-border-colour, var(--button-primary-bg, var(--brand-primary-colour)));
    background: var(--button-primary-bg, var(--brand-primary-colour));
    color: var(--top-nav-sign-in-colour, var(--button-primary-fg, var(--brand-primary-ink, #ffffff)));
    text-transform: var(--buttons-text-transform, none);
}

/* top-nav-sign-in-style (Residual 5): solid is the button above; outline
   and text strip it back. */
:where(.presence--base) .presence-nav--sign-in-outline .presence-nav__account .presence-nav__link {
    background: transparent;
    color: var(--top-nav-sign-in-colour, var(--button-primary-bg, var(--brand-primary-colour)));
}

:where(.presence--base) .presence-nav--sign-in-text .presence-nav__account .presence-nav__link {
    background: transparent;
    border-color: var(--top-nav-sign-in-border-colour, transparent);
    color: var(--top-nav-sign-in-colour, inherit);
    padding: var(--top-nav-sign-in-padding, 0.5rem 0);
}

:where(.presence--base) .presence-nav__account .presence-nav__link:hover {
    text-decoration: none;
    opacity: 0.9;
}

:where(.presence--base) .presence-nav__user {
    font-size: 0.875rem;
    opacity: 0.7;
}

/* Masthead: the brand centred over a centred row of links. */
:where(.presence--base) .presence-nav--masthead {
    flex-direction: column;
    gap: 0.875rem;
    padding: var(--top-nav-padding, 1.5rem max(clamp(1.25rem, 5vw, 4rem), calc((100% - var(--content-max-width, 1280px)) / 2)) 1rem);
    text-align: center;
}

:where(.presence--base) .presence-nav--masthead .presence-nav__brand {
    flex-direction: column;
    gap: 0.375rem;
}

:where(.presence--base) .presence-nav--masthead .presence-nav__logo {
    height: var(--top-nav-logo-height, 3rem);
}

:where(.presence--base) .presence-nav--masthead .presence-nav__links,
:where(.presence--base) .presence-nav--masthead .presence-nav__account {
    margin-left: 0;
    justify-content: center;
}

/* Capsule: a rounded bar floating clear of the page edge. */
:where(.presence--base) .presence-nav--capsule {
    position: sticky;
    top: 0.75rem;
    z-index: 30;
    width: min(100% - 2 * clamp(1.25rem, 5vw, 4rem), var(--content-max-width, 1280px));
    margin: 0.75rem auto 0;
    padding: var(--top-nav-padding, 0.625rem 0.75rem 0.625rem 1.5rem);
    /* The capsule reads the border width and the top-nav-backdrop mix and
       blur like the sticky bar does — it floats over the page the same way,
       and its own literals used to win over both (DEV-140 step 29a,
       Brightwater 3, 5). */
    border: var(--top-nav-border-width, 1px) solid var(--top-nav-border-colour, var(--content-border-colour, #e5e7eb));
    border-radius: 9999px;
    background: color-mix(in srgb, var(--top-nav-bg-colour, var(--content-bg-colour, #ffffff)) var(--top-nav-bg-mix, 100%), transparent);
    -webkit-backdrop-filter: var(--top-nav-backdrop-filter, none);
    backdrop-filter: var(--top-nav-backdrop-filter, none);
    box-shadow: 0 8px 24px -12px rgb(0 0 0 / 0.25);
}

:where(.presence--base) .presence-nav--capsule .presence-nav__account .presence-nav__link {
    border-radius: 9999px;
}

/* ---- Page frame ------------------------------------------------------- */

:where(.presence--base) .presence-main {
    display: block;
    min-height: 50vh;
}

:where(.presence--base) .presence-header {
    width: min(100% - 2 * clamp(1.25rem, 5vw, 4rem), var(--content-max-width, 1280px));
    margin: 0 auto;
    padding-block: clamp(2rem, 5vw, 3.5rem) 0.5rem;
}

:where(.presence--base) .presence-title {
    margin: 0;
    font-size: clamp(1.875rem, 4vw, 2.75rem);
    line-height: 1.1;
    font-weight: 700;
}

:where(.presence--base) .presence-description {
    margin: 0.75rem 0 0;
    max-width: 44rem;
    font-size: 1.125rem;
    opacity: 0.8;
}

:where(.presence--base) [id^="section-"] {
    scroll-margin-top: var(--top-nav-anchor-offset, 5rem);
}

/* ---- Funnel rail ------------------------------------------------------ */

/* Every value here is a `presence.funnel` brand setting with today's literal
   as the var() fallback (DEV-140 step 26), so a rail nobody has branded draws
   exactly as it always did. The four rail STYLES are classes the markup
   carries (PresencePage::railStyle()), because they move markup around rather
   than change a value: they come after the state rules below, so the style a
   presence chose wins on equal specificity. */
:where(.presence--base) .presence-funnel {
    display: flex;
    flex-wrap: wrap;
    gap: var(--funnel-gap, 0.5rem 1.5rem);
    width: min(100% - 2 * clamp(1.25rem, 5vw, 4rem), var(--content-max-width, 1280px));
    margin: var(--funnel-spacing, 1.5rem) auto 0;
    padding: var(--funnel-padding, 0);
    list-style: none;
    background: var(--funnel-bg, transparent);
    border-bottom: var(--funnel-rule-width, 0) solid var(--funnel-rule-colour, var(--content-border-colour, #e5e7eb));
}

/* funnel-rail-width `full`: the rail runs edge to edge under the bar, its
   steps kept to the page gutter unless funnel-padding says otherwise. */
:where(.presence--base) .presence-funnel--full {
    width: 100%;
    margin-inline: 0;
    padding: var(--funnel-padding, 0 clamp(1.25rem, 5vw, 4rem));
}

/* funnel-align `centre`: the rail's steps on the centre line (the step head
   takes the same choice, below). */
:where(.presence--base) .presence-funnel--align-centre {
    justify-content: center;
}

:where(.presence--base) .presence-funnel__step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--funnel-label-size, 0.875rem);
    font-weight: var(--funnel-label-weight, 600);
    letter-spacing: var(--funnel-label-letter-spacing, normal);
    text-transform: var(--funnel-label-transform, none);
    font-variant: var(--funnel-label-variant, normal);
    /* An upcoming step is dimmed to .55 — unless funnel-upcoming-opacity says
       otherwise, or a chosen funnel-upcoming-label-colour already says how
       faint it is (the resolver then emits the default opacity 1 beside
       it), which the fixed .55 used to dim a second time (Ashcombe B8). */
    opacity: var(--funnel-upcoming-opacity, var(--funnel-upcoming-default-opacity, 0.55));
    color: var(--funnel-upcoming-label-colour, inherit);
}

:where(.presence--base) .presence-funnel__step--current,
:where(.presence--base) .presence-funnel__step--done {
    opacity: 1;
}

:where(.presence--base) .presence-funnel__step--done {
    color: var(--funnel-done-label-colour, inherit);
}

:where(.presence--base) .presence-funnel__step--current {
    color: var(--funnel-current-label-colour, inherit);
}

:where(.presence--base) .presence-funnel__index {
    display: grid;
    place-items: center;
    width: var(--funnel-marker-size, 1.75rem);
    height: var(--funnel-marker-size, 1.75rem);
    border: var(--funnel-marker-border-width, 1px) solid currentColor;
    border-radius: 9999px;
    font-size: var(--funnel-marker-text-size, 0.8125rem);
    background: var(--funnel-upcoming-marker-bg, transparent);
    color: var(--funnel-upcoming-marker-colour, inherit);
}

/* The two filled markers were one rule; they are two so each state's ground
   and ink are its own setting. Unset, both are the brand fill they were. */
:where(.presence--base) .presence-funnel__step--done .presence-funnel__index {
    border-color: var(--funnel-done-marker-bg, var(--brand-primary-colour));
    background: var(--funnel-done-marker-bg, var(--brand-primary-colour));
    color: var(--funnel-done-marker-colour, var(--brand-primary-ink, #ffffff));
}

:where(.presence--base) .presence-funnel__step--current .presence-funnel__index {
    border-color: var(--funnel-current-marker-bg, var(--brand-primary-colour));
    background: var(--funnel-current-marker-bg, var(--brand-primary-colour));
    color: var(--funnel-current-marker-colour, var(--brand-primary-ink, #ffffff));
}

:where(.presence--base) .presence-funnel__step--done .presence-funnel__label {
    opacity: 0.7;
}

:where(.presence--base) .presence-funnel__caption {
    width: min(100% - 2 * clamp(1.25rem, 5vw, 4rem), var(--content-max-width, 1280px));
    margin: 0.5rem auto 0;
    font-size: 0.8125rem;
    opacity: 0.6;
}

/* The marker's shape — the disc is what it already draws, so the square is
   the only radius worth a rule; `none` is not a radius at all, so it hides
   the marker instead. */
:where(.presence--base) .presence-funnel--marker-circle .presence-funnel__index {
    border-radius: 9999px;
}

:where(.presence--base) .presence-funnel--marker-square .presence-funnel__index {
    border-radius: 0.25rem;
}

:where(.presence--base) .presence-funnel--marker-none .presence-funnel__index {
    display: none;
}

/* The caption is the rail's next sibling, so the choice the rail carries
   reaches it without a class of its own; a hidden rail takes it too. */
:where(.presence--base) .presence-funnel--caption-hidden + .presence-funnel__caption,
:where(.presence--base) .presence-funnel--hidden + .presence-funnel__caption,
:where(.presence--base) .presence-funnel--hidden {
    display: none;
}

/* Rail style: the markers joined by a rule. */
:where(.presence--base) .presence-funnel--line .presence-funnel__step + .presence-funnel__step::before {
    content: "";
    width: 1.5rem;
    border-top: var(--funnel-connector-width, 1px) solid var(--funnel-connector-colour, currentColor);
    opacity: 0.6;
}

/* Rail style: bare numerals, no disc. */
:where(.presence--base) .presence-funnel--numbers .presence-funnel__index {
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: inherit;
    font-weight: 700;
    color: inherit;
}

/* The numeral is the whole marker here, so the state's ink is the numeral's
   own colour — the rule above would otherwise leave the three
   funnel-*-marker-colour settings with nothing to paint. */
:where(.presence--base) .presence-funnel--numbers .presence-funnel__step--done .presence-funnel__index {
    color: var(--funnel-done-marker-colour, inherit);
}

:where(.presence--base) .presence-funnel--numbers .presence-funnel__step--current .presence-funnel__index {
    color: var(--funnel-current-marker-colour, inherit);
}

:where(.presence--base) .presence-funnel--numbers .presence-funnel__step .presence-funnel__index {
    color: var(--funnel-upcoming-marker-colour, inherit);
}

/* Rail style: journey pills — the whole step is the marker, so the state's
   ground paints the pill and its label colour is the ink on it. This is the
   rail AxisOps Assure wrote by hand before these settings existed. */
:where(.presence--base) .presence-funnel--pills .presence-funnel__step {
    padding: 0.1875rem 0.625rem;
    border-radius: 9999px;
    opacity: 1;
}

:where(.presence--base) .presence-funnel--pills .presence-funnel__index {
    display: none;
}

:where(.presence--base) .presence-funnel--pills .presence-funnel__step--done {
    background: var(--funnel-done-marker-bg, color-mix(in srgb, var(--brand-primary-colour) 16%, transparent));
    font-weight: 600;
}

:where(.presence--base) .presence-funnel--pills .presence-funnel__step--current {
    background: var(--funnel-current-marker-bg, var(--brand-primary-colour));
    color: var(--funnel-current-label-colour, var(--brand-primary-ink, #ffffff));
    font-weight: 700;
}

:where(.presence--base) .presence-funnel--pills .presence-funnel__step--done .presence-funnel__label {
    opacity: 1;
}


/* ---- Brochure bands (laravel-cms serves these) ------------------------ */

/* The brochure is one static section inside the portal's section column.
   Both bring portal chrome — the column's padding and gap, the section's
   inset — that a public page must not have, and both are drawn by rules of
   one class in a sheet loaded after this one. So these few rules weigh two
   classes, and are limited to a column that holds a brochure: every other
   presence page keeps the section chrome it has. */
.presence--base .presence-sections:where(:has(.cms-brochure)) {
    padding: 0;
    gap: 0;
}

.presence--base .static-section:where(:has(.cms-brochure)) > div,
.presence--base .presence-sections:where(:has(.cms-brochure)) > div {
    padding: 0;
}

.presence--base .cms-brochure {
    gap: var(--content-band-gap, calc(4 * var(--page-content-gap, 1rem)));
    padding-block: var(--content-band-gap, calc(4 * var(--page-content-gap, 1rem)));
}

:where(.presence--base) .cms-brochure__band {
    width: min(100% - 2 * clamp(1.25rem, 5vw, 4rem), var(--content-max-width, 1280px));
    margin-inline: auto;
}

/* An opening hero is drawn up over the brochure's top padding. A brochure whose
   bands bleed has no top padding (its bands space themselves), so there the
   pull would tuck the hero under the header instead. */
:where(.presence--base) .cms-brochure:where(:not(.cms-brochure--bleeds)) > .cms-brochure__band--hero:first-child {
    margin-top: calc(-2 * var(--page-content-gap, 1rem));
}

:where(.presence--base) .cms-brochure__body {
    max-width: 46rem;
    font-size: 1.0625rem;
    line-height: 1.7;
}

@media (max-width: 48rem) {
    :where(.presence--base) .presence-nav__links {
        order: 3;
        width: 100%;
        margin-left: 0;
    }

    :where(.presence--base) .presence-nav__brand + .presence-nav__links + .presence-nav__account,
    :where(.presence--base) .presence-nav__account {
        margin-left: auto;
    }

    :where(.presence--base) .presence-nav--masthead .presence-nav__account {
        margin-left: 0;
    }

    :where(.presence--base) .presence-nav--capsule {
        border-radius: 1.25rem;
    }

    :where(.presence--base) .presence-nav__tagline {
        display: none;
    }
}

/* ---- Funnel step (DEV-140 steps 23, 26) -------------------------------- */

/* The pages of a declared funnel (BasePresence::funnels()): the step head
   above the step form, and the done page. Kept to the reading measure, the
   heading in the page-heading colour, the actions as the portal's buttons —
   every value a portal brand property or a `presence.funnel` one with today's
   literal as the fallback, like the rest of this sheet. The step FORM itself
   is the ordinary form section, so it reads the form and button settings
   without a rule here. The layout choices — the actions' alignment, the back
   link's style, the reference's — are classes the markup carries
   (PresenceFunnelPage::stepStyle()). */
:where(.presence--base) .presence-funnel-step {
    max-width: var(--funnel-step-width, var(--content-reading-measure, 44rem));
    margin: 0 auto;
    padding: var(--funnel-step-padding, 0 0 0.5rem);
    font-size: var(--content-font-size, inherit);
    background: var(--funnel-step-bg, transparent);
    border: var(--funnel-step-border-width, 0) solid var(--funnel-step-border-colour, transparent);
    border-radius: var(--funnel-step-radius, 0);
}

:where(.presence--base) .presence-funnel-step__count {
    margin: 0 0 0.5rem;
    font-size: var(--funnel-count-size, 0.875em);
    font-weight: var(--funnel-count-weight, inherit);
    letter-spacing: var(--funnel-count-letter-spacing, 0.04em);
    text-transform: var(--funnel-count-transform, uppercase);
    font-variant: var(--funnel-count-variant, normal);
    color: var(--funnel-count-colour, inherit);
    /* A chosen colour is drawn at full strength: the resolver emits the
       opacity beside it (COMPANION_DECLARATIONS). */
    opacity: var(--funnel-count-opacity, 0.7);
}

:where(.presence--base) .presence-funnel-step__heading {
    margin: 0 0 0.75rem;
    font-size: var(--funnel-step-heading-size, clamp(1.5rem, 3.5vw, 2.25rem));
    font-weight: var(--funnel-step-heading-weight, 700);
    line-height: var(--funnel-step-heading-line-height, 1.15);
    color: var(--page-heading-colour, inherit);
}

:where(.presence--base) .presence-funnel-step__help,
:where(.presence--base) .presence-funnel-step__body {
    margin: 0 0 1rem;
    line-height: 1.6;
}

:where(.presence--base) .presence-funnel-step__help {
    max-width: var(--funnel-help-measure, none);
}

/* funnel-align `centre`: the head on the centre line, its help too. */
:where(.presence--base) .presence-funnel-step--align-centre {
    text-align: center;
}

:where(.presence--base) .presence-funnel-step--align-centre .presence-funnel-step__help {
    margin-inline: auto;
}

/* funnel-notice-position `below`: the notice and the way back, drawn again
   after the form as a foot of their own. It keeps the step's measure and
   none of the head's card or padding. */
:where(.presence--base) .presence-funnel-step--foot {
    padding: 0 0 0.5rem;
    background: transparent;
    border: 0;
}

:where(.presence--base) .presence-funnel-step__notice,
:where(.presence--base) .presence-funnel-step__test {
    margin: 0 0 1rem;
    padding: 0.625rem 0.875rem;
    border-left: 4px solid var(--brand-primary-colour, currentColor);
    border-radius: var(--radius-panel, 0.375rem);
}

:where(.presence--base) .presence-funnel-step__notice {
    background: var(--funnel-notice-bg, var(--callout-warning-bg, rgba(0, 0, 0, 0.04)));
    color: var(--funnel-notice-colour, var(--callout-warning-text, inherit));
}

:where(.presence--base) .presence-funnel-step__test {
    background: var(--funnel-test-bg, var(--callout-warning-bg, rgba(0, 0, 0, 0.04)));
    color: var(--funnel-test-colour, var(--callout-warning-text, inherit));
    font-weight: 600;
}

:where(.presence--base) .presence-funnel-step__reference {
    margin: 0 0 1rem;
    font-size: 1.125em;
    font-weight: 700;
    color: var(--funnel-reference-colour, inherit);
}

:where(.presence--base) .presence-funnel-step--reference-panel .presence-funnel-step__reference {
    padding: 0.625rem 0.875rem;
    border-radius: var(--radius-panel, 0.375rem);
    background: color-mix(in srgb, currentColor 8%, transparent);
}

:where(.presence--base) .presence-funnel-step--reference-mono .presence-funnel-step__reference {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.04em;
}

:where(.presence--base) .presence-funnel-step__back {
    margin: 0;
    font-size: 0.9375em;
}

:where(.presence--base) .presence-funnel-step--back-hidden .presence-funnel-step__back {
    display: none;
}

:where(.presence--base) .presence-funnel-step--back-arrow .presence-funnel-step__back a::before {
    content: "\2190\00a0";
}

:where(.presence--base) .presence-funnel-step--back-button .presence-funnel-step__back a {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    border: 1px solid currentColor;
    border-radius: var(--buttons-border-radius, 0.375rem);
    text-decoration: none;
}

:where(.presence--base) .presence-funnel-step__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1.5rem 0 0;
}

:where(.presence--base) .presence-funnel-step--actions-left .presence-funnel-step__actions {
    justify-content: flex-start;
}

:where(.presence--base) .presence-funnel-step--actions-centre .presence-funnel-step__actions {
    justify-content: center;
}

:where(.presence--base) .presence-funnel-step--actions-right .presence-funnel-step__actions {
    justify-content: flex-end;
}

:where(.presence--base) .presence-funnel-step__home {
    padding: 0.625rem 1.25rem;
    border-radius: var(--buttons-border-radius, 0.375rem);
    background: var(--button-primary-bg, var(--brand-primary-colour));
    color: var(--button-primary-fg, var(--brand-primary-ink, #ffffff));
    text-transform: var(--buttons-text-transform, none);
    text-decoration: none;
}

:where(.presence--base) .presence-funnel-step__sign-in {
    padding: 0.625rem 1.25rem;
    border-radius: var(--buttons-border-radius, 0.375rem);
    border: 1px solid var(--button-secondary-bg, var(--brand-primary-colour));
    color: var(--button-secondary-fg, var(--brand-primary-colour));
    text-transform: var(--buttons-text-transform, none);
    text-decoration: none;
}

/* ---- Funnel step form (DEV-140 step 29a) ------------------------------ */

/* The step form is the portal's own form section (FunnelStepForm): its
   Tailwind markup, its section card. These rules give it a funnel
   presentation from the `presence.funnel` settings, every value today's
   literal as the fallback — Tailwind's text-sm / font-medium / gray-700 on
   a label, the card's rounded-lg — so a funnel nobody has branded draws as
   it did, and a portal form, which never carries .presence-funnel-form, is
   untouched. The card's ground and edge reach it at all only because the
   section card no longer paints them inline (DEV-146). */
:where(.presence--base) .form-section:has(.presence-funnel-form) {
    width: min(100%, var(--funnel-form-width, 100%));
    margin-inline: auto;
}

:where(.presence--base) .form-section:has(.presence-funnel-form) .section-card {
    background-color: var(--funnel-form-bg, var(--content-bg-colour, #ffffff));
    border: var(--funnel-form-border-width, 1px) solid var(--funnel-form-border-colour, var(--content-border-colour, #e5e7eb));
    border-radius: var(--funnel-form-radius, 0.5rem);
    box-shadow: var(--funnel-form-shadow, none);
}

:where(.presence--base) .presence-funnel-form label.block {
    font-size: var(--funnel-field-label-size, 0.875rem);
    font-weight: var(--funnel-field-label-weight, 900);
    text-transform: var(--funnel-field-label-transform, none);
    font-variant: var(--funnel-field-label-variant, normal);
    color: var(--funnel-field-label-colour, #374151);
}

/* The text inputs, boxed as the portal draws them (the forms plugin's white
   ground, Tailwind's border-gray-300); the colours and the edge's width are
   settings. The edge colour leaves a focused input alone, so the brand
   focus colour still shows. */
:where(.presence--base) .presence-funnel-form :is(input:not([type="radio"], [type="checkbox"], [type="hidden"]), textarea, select) {
    background-color: var(--funnel-input-bg, #ffffff);
    border-width: var(--funnel-input-border-width, 1px);
    /* The entry box's own shape (DEV-167). Blank leaves the portal form's,
       which is what every funnel drew before these existed — the gap
       Brightwater's parity notes asked for by name. */
    border-radius: var(--funnel-input-radius, var(--radius-control, 0.375rem));
    padding: var(--funnel-input-padding, 0.5rem 0.75rem);
    min-height: var(--funnel-input-height, auto);
    color: var(--funnel-input-colour, inherit);
}

/* The placeholder carries the field's meaning when the label is hidden, so
   it is readable rather than a hint. */
:where(.presence--base) .presence-funnel-form ::placeholder {
    color: var(--funnel-input-placeholder-colour, inherit);
    opacity: var(--funnel-input-placeholder-opacity, 0.7);
}

/* funnel-field-label-display `hidden`: the label is taken off the page but
   left in the accessibility tree — a form whose fields are named only by a
   placeholder is unusable with a screen reader, and unlabelled to a
   password manager. */
/* The label's WRAPPER is taken off the page, not the label itself: hiding
   only the label leaves its inline-flex parent holding a line box, so the
   fields still sat a line further apart than they should (DEV-167). The
   label goes with it and stays in the accessibility tree. */
:where(.presence--base) .presence-funnel-form--labels-hidden .field > span:has(> label.block),
:where(.presence--base) .presence-funnel-form--labels-hidden .field > label.block {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* The honeypot is off screen but its field wrapper was not, so every funnel
   form carried a field's worth of empty space above its button — the trap
   Brightwater's parity notes wrote down. A hidden wrapper still submits its
   input, so the honeypot works exactly as before (DEV-167). */
:where(.presence--base) .presence-funnel-form .field:has(input[aria-hidden="true"]) {
    display: none;
}

/* And the gap between the boxes is the field's own padding alone. */
:where(.presence--base) .presence-funnel-form--labels-hidden .field > .mt-1 {
    margin-top: 0;
}

/* The step's submit reads the portal's own button palette (DEV-167). It read
   nothing at all before — the one gap every demo presence's parity notes
   called the biggest — so a site whose buttons were gold got a blue one. */
:where(.presence--base) .presence-funnel-form .form-actions button[type="submit"] {
    background-color: var(--button-primary-bg, var(--brand-primary-colour, #691EDA));
    color: var(--button-primary-fg, var(--text-primary-colour, #ffffff));
    border-radius: var(--funnel-submit-radius, var(--buttons-border-radius, var(--radius-control, 0.375rem)));
    min-height: var(--funnel-submit-height, auto);
    /* The button is the portal's literal Tailwind one — uppercase, extra
       small, widely tracked. Blank keeps every word of that, so no funnel
       that exists changes; a site that wants its own says so. */
    font-size: var(--funnel-submit-size, 0.75rem);
    letter-spacing: var(--funnel-submit-letter-spacing, 0.1em);
    text-transform: var(--funnel-submit-transform, uppercase);
    justify-content: var(--cms-funnel-submit-justify, flex-start);
}

/* The alignment choice reaches the button as a property the rule above
   reads — `centre` is not a CSS value. */
:where(.presence--base) .presence-funnel-form { --cms-funnel-submit-justify: flex-start; }
:where(.presence--base) .presence-funnel-form--submit-centre { --cms-funnel-submit-justify: center; }
}

:where(.presence--base) .presence-funnel-form--submit-full .form-actions,
:where(.presence--base) .presence-funnel-form--submit-full .form-actions button[type="submit"] {
    width: 100%;
}

:where(.presence--base) .presence-funnel-form :is(input:not([type="radio"], [type="checkbox"], [type="hidden"]), textarea, select):not(:focus) {
    border-color: var(--funnel-input-border-colour, #d1d5db);
}

/* funnel-input-style `underlined`: a single rule under each entry, on the
   page's own ground. */
:where(.presence--base) .presence-funnel-form--input-underlined :is(input:not([type="radio"], [type="checkbox"], [type="hidden"]), textarea, select) {
    border-width: 0 0 var(--funnel-input-border-width, 1px);
    border-radius: 0;
    box-shadow: none;
    padding-inline: 0;
    background-color: var(--funnel-input-bg, transparent);
}

:where(.presence--base) .presence-funnel-form--input-underlined :is(input:not([type="radio"], [type="checkbox"], [type="hidden"]), textarea, select):not(:focus) {
    border-color: var(--funnel-input-border-colour, currentColor);
}

/* funnel-choice-style `tiles`: a choice's options as a grid of bordered
   tiles, the chosen one in the brand colour. `:not([hidden])` outweighs the
   list's own space-y spacing, which a grid does not want. */
:where(.presence--base) .presence-funnel-form--choices-tiles [data-radio-group] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 0.5rem;
}

:where(.presence--base) .presence-funnel-form--choices-tiles [data-radio-group] > label:not([hidden]) {
    margin: 0;
    padding: 0.75rem 1rem;
    border: var(--funnel-input-border-width, 1px) solid var(--funnel-input-border-colour, var(--content-border-colour, #e5e7eb));
    border-radius: var(--radius-control, 0.375rem);
    background-color: var(--funnel-input-bg, transparent);
}

:where(.presence--base) .presence-funnel-form--choices-tiles [data-radio-group] > label:has(input:checked) {
    border-color: var(--brand-primary-colour, currentColor);
    background-color: color-mix(in srgb, var(--brand-primary-colour, currentColor) 8%, var(--funnel-input-bg, transparent));
}