/* /Components/Layout/CookieNotice.razor.rz.scp.css */
/* The consent notice. A ruled band across the foot of the window, in the site's
   own paper-and-hairline language — not a floating card, which is the shape this
   direction refuses everywhere else.

   Deliberately NOT a blocking modal. It does not trap focus or dim the page: the
   visitor is allowed to read before deciding, and a modal over a marketing page
   the visitor has not yet chosen to trust is hostile. It sits above the content
   and stays until answered. */

.cnotice[b-3pz5pp3iyo] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: var(--paper);
    border-top: 1px solid var(--line-firm);
    box-shadow: 0 -12px 30px -18px rgba(15, 23, 42, 0.35);
    /* Tighter than a section: it is a notice, and on first paint it was covering
       an eighth of a desktop screen and a quarter of a phone's. */
    padding: var(--s-3) var(--s-4);
}

.cnotice[hidden][b-3pz5pp3iyo] { display: none; }

.cnotice__inner[b-3pz5pp3iyo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4) var(--s-6);
    flex-wrap: wrap;
}

.cnotice__say[b-3pz5pp3iyo] { flex: 1 1 34rem; min-width: 0; }

.cnotice__head[b-3pz5pp3iyo] { margin: 0 0 var(--s-1); border-bottom: 0; padding-bottom: 0; }

.cnotice__body[b-3pz5pp3iyo] {
    font-size: var(--t-small);
    line-height: 1.5;
    color: var(--text);
    max-width: 72ch;
}

/* Both buttons share a minimum width so neither reads as the lesser option.
   Consent is invalid if declining is made harder than accepting. */
.cnotice__acts[b-3pz5pp3iyo] {
    display: flex;
    gap: var(--s-2);
    flex: 0 0 auto;
}

.cnotice__btn[b-3pz5pp3iyo] { min-width: 7.5rem; justify-content: center; }

@media (max-width: 620px) {
    .cnotice[b-3pz5pp3iyo] { padding: var(--s-3); }
    .cnotice__inner[b-3pz5pp3iyo] { gap: var(--s-3); }
    .cnotice__acts[b-3pz5pp3iyo] { width: 100%; }
    .cnotice__btn[b-3pz5pp3iyo] { flex: 1 1 0; }
}

/* Enters from an already-visible default, and only when the visitor has not
   asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
    .cnotice[b-3pz5pp3iyo] { animation: cnotice-in-b-3pz5pp3iyo 260ms var(--ease-out) both; }

    @keyframes cnotice-in-b-3pz5pp3iyo {
        from { opacity: 0; transform: translateY(12px); }
        to   { opacity: 1; transform: none; }
    }
}
/* /Components/Layout/SiteFooter.razor.rz.scp.css */
.site-footer[b-vckq0qtj9c] {
    padding: var(--s-7) var(--s-4) var(--s-5);
}


/* Heads the trades band. Wider measure than the old column placement allowed — at 18ch a
   full-width heading breaks after two or three words. */
.site-footer__ask[b-vckq0qtj9c] {
    max-width: 30ch;
    margin-bottom: var(--s-3);
}

.site-footer__mail[b-vckq0qtj9c] { font-size: var(--t-lead); }

/* Sits between the mailbox and the address because that is the order of speed: message, call,
   visit. The phone numbers directly above it are the same two lines, so it names the channel
   rather than repeating the digits. */
.site-footer__wa[b-vckq0qtj9c] {
    margin-top: var(--s-2);
    font-size: var(--t-small);
    font-weight: 600;
}

/* --- footer nav ------------------------------------------------------------ */
/* Contact plus the three link groups, one row across the foot. The nav keeps its own
   three columns inside, so the row reads as four even columns. */
.site-footer__cols[b-vckq0qtj9c] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    gap: var(--s-5) var(--s-6);
    margin-top: var(--s-5);
    align-items: start;
}

.site-footer__nav[b-vckq0qtj9c] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-4) var(--s-6);
    align-items: start;
}

.site-footer__nav ul[b-vckq0qtj9c] {
    margin: var(--s-3) 0 0;
    display: grid;
    gap: 10px;
}

/* The cookie control is a BUTTON, not a link: it runs script and goes nowhere, so an <a href="#">
   lied to the keyboard and jumped the page to the top when script was unavailable. It shares this
   rule rather than copying it, so the two can never drift apart visually. */
.site-footer__nav a[b-vckq0qtj9c],
.site-footer__linkbtn[b-vckq0qtj9c] {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
    font-size: var(--t-small);
    color: var(--on-field-soft);
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .site-footer__nav a:hover[b-vckq0qtj9c],
    .site-footer__linkbtn:hover[b-vckq0qtj9c] {
        color: var(--on-field);
        border-bottom-color: var(--accent-bright);
    }
}


/* The lead-in to the list, one step under the heading above it — matching the heading's
   weight would give the band two apparent titles. */
.site-footer__tradesask[b-vckq0qtj9c] {
    font-size: var(--t-small);
    font-weight: 600;
    color: var(--on-field-soft);
}

/* The trades index: the global .schedule with two columns (name / description),
   because these rows carry no reference. Tighter rows than a page schedule — it
   is a footer index, read by the left column. */
.site-footer__tradeindex[b-vckq0qtj9c] { margin-top: var(--s-4); }

/* THREE columns: trade, description, and the action that carries that trade into a message.
   The third is the schedule own reference column, so the action inherits the house treatment
   (small, tabular-quiet, right-aligned) instead of arriving as seven buttons in a footer. */
.site-footer__tradeindex .schedule__row[b-vckq0qtj9c] {
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr) auto;
    padding-block: var(--s-3);
}

/* Never wrapped: "Talk to us" broken across two lines in a narrow gutter reads as two separate
   labels, and the row is already carrying a long description beside it. */
.site-footer__tradeact[b-vckq0qtj9c] { white-space: nowrap; }

.site-footer__tradeact a[b-vckq0qtj9c] {
    text-decoration: none;
    border-bottom: 1px solid var(--on-field-rule);
    padding-bottom: 1px;
    transition: border-color 160ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .site-footer__tradeact a:hover[b-vckq0qtj9c] { border-bottom-color: var(--accent-bright); }
}

/* The catch-all under the list. Set apart from the implementation note above it so it reads as an
   invitation rather than another sentence of explanation. */
.site-footer__tradeother[b-vckq0qtj9c] {
    margin-top: var(--s-4);
    font-size: var(--t-small);
    font-weight: 600;
}

.site-footer__tradeindex .schedule__name[b-vckq0qtj9c] { font-size: var(--t-small); }

.site-footer__tradeindex .schedule__note[b-vckq0qtj9c] {
    font-size: var(--t-small);
    line-height: 1.6;
    max-width: 72ch;
}

.site-footer__tradenote[b-vckq0qtj9c] {
    margin-top: var(--s-4);
    font-size: var(--t-small);
    line-height: 1.6;
    color: var(--on-field-soft);
    max-width: 62ch;
}

.site-footer__tradenote strong[b-vckq0qtj9c] { color: var(--on-field); font-weight: 600; }

/* <address> is italic by browser default; an address is a fact, not an aside. */
.site-footer__addr[b-vckq0qtj9c] { font-style: normal; }

/* --- the close ------------------------------------------------------------- */
.site-footer__rule[b-vckq0qtj9c] { margin: var(--s-6) 0 var(--s-4); }

/* Ruled off from the link columns above: the tagline used to sit a line under
   the last nav link with nothing between them. */
.site-footer__base[b-vckq0qtj9c] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3) var(--s-5);
    margin-top: var(--s-6);
    padding-top: var(--s-4);
    border-top: 1px solid var(--on-field-rule);
}

.site-footer__line[b-vckq0qtj9c] {
    font-size: var(--t-lead);
    font-weight: 500;
    color: var(--on-field);
    letter-spacing: -0.01em;
}

.site-footer__meta[b-vckq0qtj9c] {
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
    flex-wrap: wrap;
    font-size: 0.8125rem;
    color: var(--on-field-soft);
}

.site-footer__mark[b-vckq0qtj9c] { font-size: 1rem; }

@media (max-width: 860px) {
    /* Stacked: Contact above the link groups, which drop to two columns. */
    .site-footer__cols[b-vckq0qtj9c] { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }

    .site-footer__nav[b-vckq0qtj9c] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--s-4);
    }

    .site-footer__ask[b-vckq0qtj9c] { max-width: 24ch; }

    /* The trade and its action share the first line, the description runs full width beneath.
       ASSIGNED, not auto-placed: left to itself the action dropped below the description, where a
       row of the index ended on a call to act that no longer looked attached to anything. */
    .site-footer__tradeindex .schedule__row[b-vckq0qtj9c] {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--s-1) var(--s-3);
    }
    .site-footer__tradeindex .schedule__name[b-vckq0qtj9c] { grid-area: 1 / 1; }
    .site-footer__tradeact[b-vckq0qtj9c] { grid-area: 1 / 2; justify-self: end; }
    .site-footer__tradeindex .schedule__note[b-vckq0qtj9c] { grid-area: 2 / 1 / 3 / -1; }
}

/* The legal entity, set quieter than the closing line above it — it is a
   statement of record, not a claim. */
.site-footer__entity[b-vckq0qtj9c] {
    flex-basis: 100%;
    margin-top: var(--s-2);
    font-size: 0.8125rem;
    color: var(--on-field-soft);
    max-width: 80ch;
}

.site-footer__entity strong[b-vckq0qtj9c] { color: var(--on-field); font-weight: 600; }

@media (max-width: 620px) {
    /* One column at phone width: two columns of link lists leaves each label wrapping. */
    .site-footer__nav[b-vckq0qtj9c] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Layout/SiteHeader.razor.rz.scp.css */
/* THE MASTHEAD IS A RULE ACROSS THE PAGE, AT REST AND WHEN SCROLLING.
   Flush to both edges, square, a hairline underneath — the running head of the
   document. Once the page moves under it the only thing that changes is that it
   casts a shadow, so the reader knows the document is passing beneath it.

   HISTORY (2026-09-11): the bar used to detach on scroll — inset from the edges,
   rounded, floated 12px clear of the top with the blue field showing either
   side. That animated `top`, `margin` and `border-radius`, which are LAYOUT
   properties (the design detector flagged it, and on a slow phone it forced a
   reflow on every scroll frame), and it needed the body ground to be the field
   colour so the gap around the floating bar would not show a paper band. The
   floating bar was also the one element on the site shaped like a card. Gone.

   site.js still toggles .is-scrolled past 8px inside a rAF; if the script never
   runs the bar stays in its at-rest state, which is a complete design. */
.site-header[b-kwakfvk44b] {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--paper);
    border-bottom: 1px solid var(--line-firm);
    transition: box-shadow 260ms var(--ease-out), border-color 160ms linear;
}

.site-header.is-scrolled[b-kwakfvk44b] {
    box-shadow: 0 12px 32px -20px rgba(15, 23, 42, 0.32);
}

/* Reduced motion: the shadow still arrives — it is information — but instantly. */
@media (prefers-reduced-motion: reduce) {
    .site-header[b-kwakfvk44b] { transition: none; }
}

.site-header__inner[b-kwakfvk44b] {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-2) var(--s-4);
    min-height: 60px;
}

.site-header__nav[b-kwakfvk44b] {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    margin-left: auto;
    font-size: var(--t-small);
    font-weight: 500;
}

.site-header__link[b-kwakfvk44b] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--strong);
    text-decoration: none;
    padding: 6px 0;
    border-bottom: 1px solid transparent;
    white-space: nowrap;
    transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .site-header__link:hover[b-kwakfvk44b] {
        color: var(--ink);
        border-bottom-color: var(--accent);
    }
}

/* Where the reader is. site.js marks the link whose section has passed the
   reading line with aria-current — the same ink and underline the hover gives,
   so the bar answers "where am I" on a 10,000px page without a second device. */
.site-header__link[aria-current="true"][b-kwakfvk44b] {
    color: var(--ink);
    border-bottom-color: var(--accent);
}

/* Sized to the theme toggle beside it — same 36px height, same hairline, same
   quiet ink — so the masthead ends in two matched controls rather than a button
   shouting next to an icon. The weight drops to 600: at 700 a bordered control
   still reads as a primary action even without a fill. */
.site-header__cta[b-kwakfvk44b] {
    height: 36px;
    padding: 0 0.85rem;
    border-radius: var(--r-sm);
    font-weight: 600;
    white-space: nowrap;
}

/* The nav links warm to --ink with an accent underline on hover; this warms the
   same way, borrowing the accent on its border instead. .btn--ghost's own hover
   already supplies the soft accent wash and the darker ink. */
@media (hover: hover) and (pointer: fine) {
    .site-header__cta:hover[b-kwakfvk44b] { border-color: var(--accent-line); }
}

/* (The modules disclosure — a <details> menu of module pages — is gone with the
   module pages; its rules were removed 2026-09-11 rather than left as dead CSS.) */

/* --- narrow ---------------------------------------------------------------
   The links wrap to a second ruled line and scroll sideways rather than
   collapsing into a hamburger, which would need the JavaScript this site
   deliberately does not load. The row's right edge fades so a reader can see
   there is more to the right; with five links it rarely needs to scroll at all. */
@media (max-width: 1080px) {
    .site-header__nav[b-kwakfvk44b] { gap: var(--s-3); }
    .site-header__inner[b-kwakfvk44b] { gap: var(--s-3); }
}

@media (max-width: 940px) {
    .site-header__inner[b-kwakfvk44b] {
        flex-wrap: wrap;
        row-gap: 0;
        padding-bottom: 0;
    }

    .site-header__nav[b-kwakfvk44b] {
        order: 3;
        width: 100%;
        margin-left: 0;
        border-top: 1px solid var(--line);
        padding: 4px 0;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        mask-image: linear-gradient(to right, currentColor calc(100% - 36px), transparent);
    }
    .site-header__nav[b-kwakfvk44b]::-webkit-scrollbar { display: none; }

    .site-header__cta[b-kwakfvk44b] { margin-left: auto; }
}

/* On a phone the mark comes down a step so mark, theme toggle and Customer Login
   share the first row; before this the button fell alone onto a second row and
   the bar stood 130px tall on a 390px screen. */
@media (max-width: 620px) {
    .site-header__inner[b-kwakfvk44b] { padding-inline: var(--s-3); }
    .site-header .mark[b-kwakfvk44b] { font-size: var(--t-body); }
    .site-header__cta[b-kwakfvk44b] { padding: 0 0.7rem; }
}
/* /Components/Pages/Error.razor.rz.scp.css */
/* Rhythm only — every colour and type value on this page comes from wwwroot/app.css. */

.err__head[b-vkhlkgphnt] { margin-top: var(--s-2); }

.err__say[b-vkhlkgphnt] { margin-top: var(--s-4); }

/* The request reference set the way a ledger sets one: the column head ruled underneath, the value
   beneath the rule. .colhead is the site's primitive for that head; it only needs to become a block
   so the rule runs the width of the reference. */
.err__ref[b-vkhlkgphnt] {
    margin-top: var(--s-5);
    max-width: 46ch;
}

.err__reflabel[b-vkhlkgphnt] { display: block; }

/* Heebo, not a monospace face — the One Family Rule holds here. Tabular lining figures do the work
   monospace would: the identifier reads back cleanly, digit by digit, over the telephone. */
.err__refval[b-vkhlkgphnt] {
    display: block;
    margin-top: var(--s-2);
    font-family: var(--face);
    font-size: var(--t-small);
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
    letter-spacing: 0.02em;
    line-height: 1.45;
    overflow-wrap: anywhere;
    color: var(--on-field);
}

.err__actions[b-vkhlkgphnt] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-top: var(--s-5);
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* The whole site is this page. The scroll is paced deliberately: a dense opening
   (the statement beside the trace), a quiet reading passage, the capability list,
   the four documents, then alternating field and paper to the close — with the
   short sections (multi-currency, people, contact) taking the quieter heading
   step so the page has peaks and rests instead of nine sections at one volume.
   One spacing rhythm throughout. */

/* --- hero ------------------------------------------------------------------
   Two columns from 1100px: the statement left, the posting trace right, so the
   proof paints in the first viewport. The statement column is the narrower one
   (5 of 12) because the trace has three columns of its own to fit. */
.home-hero[b-rwzai41w30] {
    padding-top: var(--s-6);
    padding-bottom: var(--s-6);
}

.home-hero__grid[b-rwzai41w30] {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--s-6) var(--s-7);
    align-items: start;
}

/* One step under the full display size: in a five-twelfths column the 4.5rem
   statement would break "everywhere." mid-word. Three short lines at this size
   are the whole left column's job. */
.home-hero__title[b-rwzai41w30] {
    font-size: var(--t-display-beside);
    margin-bottom: var(--s-4);
}

.home-hero__lead[b-rwzai41w30] { max-width: 40ch; }

.home-hero__actions[b-rwzai41w30] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-top: var(--s-5);
}

/* The trace begins level with the eyebrow, so the two column heads of the trace
   and the eyebrow read as one running head across the screen. */
.home-hero__trace[b-rwzai41w30] { padding-top: 2px; }

@media (max-width: 1100px) {
    .home-hero[b-rwzai41w30] { padding-bottom: var(--s-7); }

    .home-hero__grid[b-rwzai41w30] {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s-6);
    }

    .home-hero__title[b-rwzai41w30] {
        font-size: var(--t-display);
        max-width: 14ch;
    }

    .home-hero__lead[b-rwzai41w30] { max-width: 54ch; }

    /* Stacked, the trace sits on its own hairline below the statement, as a
       schedule sits below the narrative in a set of accounts. */
    .home-hero__trace[b-rwzai41w30] {
        padding-top: var(--s-5);
        border-top: 1px solid var(--on-field-rule);
    }
}

/* --- overview: copy beside a portrait photograph ---------------------------
   The text column leads and the photograph balances it. Weighted toward the
   copy, because the picture is here to warm the page, not to carry it. */
.home-overview[b-rwzai41w30] { padding-bottom: var(--s-6); }

.home-overview__grid[b-rwzai41w30] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--s-5) var(--s-7);
    align-items: center;
}

.home-overview__title[b-rwzai41w30] {
    max-width: 15ch;
    margin-bottom: var(--s-4);
}

.home-overview__prose[b-rwzai41w30] { max-width: 54ch; }

/* CAPPED, and pushed to the outer edge. At full column width a 3:4 portrait
   stands about 650px tall against three short paragraphs, which left the text
   column looking abandoned beside it. The photograph is here to warm the
   section, not to dominate it. The plate frame is the global one; only the
   ratio (the photograph's own — nothing is cropped) and the cap are set here. */
.home-overview__shot[b-rwzai41w30] {
    width: 100%;
    max-width: 400px;
    margin-left: auto;
}
.home-overview__shot .plate__area[b-rwzai41w30] { aspect-ratio: 3 / 4; }
.home-overview__shot figcaption[b-rwzai41w30] { max-width: 34ch; }

/* --- what it does ----------------------------------------------------------
   A ruled schedule, not a grid of identical cards — cards are the scaffold this
   site's direction refuses. The rules do the separating. */
.home-does[b-rwzai41w30] { padding-top: var(--s-6); }

.home-does__title[b-rwzai41w30] { max-width: 16ch; }

.home-does__lead[b-rwzai41w30] {
    margin-top: var(--s-3);
    max-width: 58ch;
}

.home-does__list[b-rwzai41w30] {
    margin-top: var(--s-6);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--s-7);
    border-top: 1px solid var(--line-firm);
}

/* align-content: start keeps the name and its description together at the top
   of the row; without it the implicit rows stretched and the gap between the
   two wandered between 26px and 50px from row to row. */
.cap[b-rwzai41w30] {
    padding: var(--s-4) 0;
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: var(--s-3);
    align-items: start;
    align-content: start;
}

/* ::deep is REQUIRED here. The <svg> is rendered by CapabilityGlyph, a different
   component, so it never carries this page's scope attribute — a plain
   `.cap__glyph` rule silently does nothing. Without it the svg keeps its own
   width="100%", the grid placement below is lost, and the paragraph drops into
   the 26px icon column and wraps one word per line. */
[b-rwzai41w30] .cap__glyph {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 26px;
    height: 26px;
    color: var(--accent);
    margin-top: 2px;
}

/* Placed explicitly rather than left to auto-flow, so the row survives even if
   the glyph is missing or its rule is ever lost again. */
.cap__name[b-rwzai41w30] {
    grid-column: 2;
    grid-row: 1;
    font-size: var(--t-body);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.cap__what[b-rwzai41w30] {
    grid-column: 2;
    grid-row: 2;
    margin-top: 4px;
    font-size: var(--t-small);
    line-height: 1.55;
    color: var(--strong);
    max-width: 46ch;
}

/* --- the closer-look stage --------------------------------------------------
   Radio-driven, no script. Everything below hangs off `:checked ~`. */
.home-look__title[b-rwzai41w30] { max-width: 18ch; }

.home-look__lead[b-rwzai41w30] {
    margin-top: var(--s-3);
    max-width: 48ch;
}

.stage[b-rwzai41w30] {
    margin-top: var(--s-5);
    display: grid;
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
    gap: var(--s-6);
    align-items: start;
}

/* Clipped, never display:none — an input hidden that way cannot be focused, and
   the keyboard is the whole reason this is a radio group. */
.stage__radio[b-rwzai41w30] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* The option column's top rule spans the options' full width, including the
   negative inline margin the selected band uses, so the band never pokes past
   the rule above it. */
.stage__side[b-rwzai41w30] {
    grid-column: 1;
    grid-row: 1;
    margin-inline: calc(var(--s-3) * -1);
    border-top: 1px solid var(--line-firm);
}

.stage__opt[b-rwzai41w30] {
    display: block;
    padding: var(--s-4) var(--s-3);
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    transition: background-color 180ms var(--ease-out);
}

.stage__optname[b-rwzai41w30] {
    display: block;
    font-size: var(--t-body);
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
}

.stage__optwhat[b-rwzai41w30] {
    display: block;
    margin-top: 4px;
    font-size: var(--t-small);
    line-height: 1.55;
    color: var(--strong);
}

@media (hover: hover) and (pointer: fine) {
    .stage__opt:hover[b-rwzai41w30] { background: var(--accent-soft); }
}

/* Every pane occupies the same grid cell; opacity decides which is seen, so the
   stage never changes height as you move between options — the tallest document
   sets it. */
.stage__panes[b-rwzai41w30] {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.stage__shot[b-rwzai41w30] {
    margin: 0;
    grid-area: 1 / 1;
    min-width: 0;
    opacity: 0;
    visibility: hidden;   /* also keeps inactive panes out of the a11y tree */
    transition: opacity 260ms var(--ease-out), visibility 0s linear 260ms;
}

.stage__shot > figcaption[b-rwzai41w30] { margin-top: var(--s-3); }

/* --- the wiring: the nth radio drives the nth option and the nth pane -------- */
.stage__radio:nth-of-type(1):checked ~ .stage__side .stage__opt:nth-child(1)[b-rwzai41w30],
.stage__radio:nth-of-type(2):checked ~ .stage__side .stage__opt:nth-child(2)[b-rwzai41w30],
.stage__radio:nth-of-type(3):checked ~ .stage__side .stage__opt:nth-child(3)[b-rwzai41w30],
.stage__radio:nth-of-type(4):checked ~ .stage__side .stage__opt:nth-child(4)[b-rwzai41w30] {
    background: var(--accent-soft);
    box-shadow: inset 2px 0 0 var(--accent);
}

/* The chosen document arrives the way the trace does: it settles by a few pixels
   as it fades in — the sheet being laid on the desk — never a scale from nothing. */
.stage__radio:nth-of-type(1):checked ~ .stage__panes .stage__shot:nth-child(1)[b-rwzai41w30],
.stage__radio:nth-of-type(2):checked ~ .stage__panes .stage__shot:nth-child(2)[b-rwzai41w30],
.stage__radio:nth-of-type(3):checked ~ .stage__panes .stage__shot:nth-child(3)[b-rwzai41w30],
.stage__radio:nth-of-type(4):checked ~ .stage__panes .stage__shot:nth-child(4)[b-rwzai41w30] {
    opacity: 1;
    visibility: visible;
    transition: opacity 260ms var(--ease-out), visibility 0s linear 0s;
}

/* The focus ring belongs on the LABEL, since the input itself is clipped. */
.stage__radio:nth-of-type(1):focus-visible ~ .stage__side .stage__opt:nth-child(1)[b-rwzai41w30],
.stage__radio:nth-of-type(2):focus-visible ~ .stage__side .stage__opt:nth-child(2)[b-rwzai41w30],
.stage__radio:nth-of-type(3):focus-visible ~ .stage__side .stage__opt:nth-child(3)[b-rwzai41w30],
.stage__radio:nth-of-type(4):focus-visible ~ .stage__side .stage__opt:nth-child(4)[b-rwzai41w30] {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* Reduced motion: the pane still changes, it just does not fade. */
@media (prefers-reduced-motion: reduce) {
    .stage__shot[b-rwzai41w30] { transition: none; }
}

/* --- projects ----------------------------------------------------------------
   Copy on the right; on the left, under the heading, the margin the hero's
   invoice yields for its project — set in the trace's own ledger marks on the
   field, not on a sheet, because it is a note to the passage rather than a
   document of its own. */
.home-projects__grid[b-rwzai41w30] {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--s-5) var(--s-7);
    align-items: start;
}

.home-projects__title[b-rwzai41w30] { max-width: 14ch; }

.home-projects__margin[b-rwzai41w30] {
    margin-top: var(--s-5);
    max-width: 24rem;
}

.home-projects__colhead[b-rwzai41w30] { max-width: 30ch; }

.home-projects__lines[b-rwzai41w30] {
    margin: var(--s-3) 0 0;
    display: grid;
    gap: 6px;
}

.home-projects__line[b-rwzai41w30] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-3);
    align-items: baseline;
    font-size: var(--t-small);
}
.home-projects__line dt[b-rwzai41w30] { color: var(--on-field-soft); }
.home-projects__line dd[b-rwzai41w30] { margin: 0; color: var(--on-field); }

.home-projects__rule[b-rwzai41w30] { margin: var(--s-2) 0; }

.home-projects__lines--total .home-projects__line[b-rwzai41w30] {
    font-size: var(--t-body);
    font-weight: 700;
}
.home-projects__lines--total dt[b-rwzai41w30] { color: var(--on-field); }

.home-projects__pct[b-rwzai41w30] {
    font-weight: 500;
    color: var(--on-field-soft);
    margin-left: var(--s-1);
}

.home-projects__margin .rule--double[b-rwzai41w30] { margin-top: var(--s-2); }
.home-projects__margin .synthetic[b-rwzai41w30] { margin-top: var(--s-2); }

/* --- multi-currency ------------------------------------------------------------ */
.home-currency__grid[b-rwzai41w30] {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--s-4) var(--s-7);
    align-items: start;
}

/* Three ruled cells: the document's own currency, the rate, the base figure.
   One transaction read across, the way the ledger keeps it. */
.home-currency__eg[b-rwzai41w30] {
    margin-top: var(--s-5);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, auto));
    gap: var(--s-4) var(--s-6);
    justify-content: start;
}

.home-currency__cell[b-rwzai41w30] { min-width: 0; }

.home-currency__fig[b-rwzai41w30] {
    margin-top: var(--s-2);
    font-size: var(--t-h3);
    font-weight: 700;
    color: var(--ink);
    text-align: left;
}

.home-currency__body .synthetic[b-rwzai41w30] { margin-top: var(--s-2); }

/* --- reporting -------------------------------------------------------------- */
.home-reporting__title[b-rwzai41w30] { margin-bottom: var(--s-3); }

.home-reporting__lead[b-rwzai41w30] {
    max-width: 60ch;
    margin-bottom: var(--s-5);
}

/* The rows are the global .schedule — name / note / source. Only the source column
   needs anything here: it names a module rather than a figure, so it drops the
   tabular-numeral treatment the schedule uses for references and takes a width cap
   so the note column keeps the room it needs. */
.home-reporting__list .schedule__ref[b-rwzai41w30] {
    font-variant-numeric: normal;
    letter-spacing: 0.04em;
    max-width: 11rem;
    text-align: right;
}

.home-reporting__rule[b-rwzai41w30] { margin-top: var(--s-1); }

.home-reporting__foot[b-rwzai41w30] {
    margin-top: var(--s-3);
    color: var(--muted);
}

/* --- about ------------------------------------------------------------------ */
.home-about__title[b-rwzai41w30] { margin-bottom: var(--s-5); }

/* The company line, set between the About heading and the commitments. */
.home-about__who[b-rwzai41w30] {
    margin-top: calc(var(--s-5) * -1 + var(--s-2));
    margin-bottom: var(--s-5);
    max-width: 60ch;
}

/* --- people ----------------------------------------------------------------- */
.home-people__title[b-rwzai41w30] { max-width: 18ch; }

.home-people__lead[b-rwzai41w30] {
    margin-top: var(--s-3);
    color: var(--strong);
}

.home-people__row[b-rwzai41w30] {
    margin-top: var(--s-5);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-4);
}

/* 3:2 is the native ratio of the supplied photographs; matching it exactly means
   object-fit: cover crops nothing. */
.home-people__shot .plate__area[b-rwzai41w30] { aspect-ratio: 3 / 2; }
.home-people__shot figcaption[b-rwzai41w30] { max-width: 34ch; }

/* --- contact ---------------------------------------------------------------- */
.home-contact__title[b-rwzai41w30] { margin-bottom: var(--s-5); }

/* Office / Telephone / Email as three ruled columns — one schedule-like row of
   facts. */
.home-contact__cols[b-rwzai41w30] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-5) var(--s-6);
    align-items: start;
}

/* <address> is italic by browser default; this is a fact, not an aside. */
.home-contact__address[b-rwzai41w30] {
    font-style: normal;
    color: var(--text);
    line-height: 1.7;
    margin: var(--s-3) 0 0;
}

.home-contact__lines[b-rwzai41w30] {
    list-style: none;
    margin: var(--s-3) 0 0;
    padding: 0;
    display: grid;
    gap: var(--s-1);
}

.home-contact__line[b-rwzai41w30] {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--line-firm);
    text-underline-offset: 4px;
    font-variant-numeric: tabular-nums lining-nums;
    transition: color 180ms var(--ease-out), text-decoration-color 180ms var(--ease-out);
}

.home-contact__line:hover[b-rwzai41w30] {
    color: var(--accent-600);
    text-decoration-color: var(--accent-600);
}

.home-contact__act[b-rwzai41w30] { margin: var(--s-3) 0 0; }

/* The two enquiry controls, stacked and full-width in their column so neither reads as the
   afterthought of the other. Stacked rather than side by side because the column is a third of the
   section: two buttons abreast would each be about 130px wide and would both wrap. */
.home-contact__actions[b-rwzai41w30] {
    display: grid;
    gap: var(--s-2);
    margin: var(--s-3) 0 0;
}

/* Long enough to carry the address itself, so they wrap to two lines on a narrow column rather
   than overflowing. */
.home-contact__wa[b-rwzai41w30],
.home-contact__mail[b-rwzai41w30] {
    max-width: 100%;
    text-align: center;
    overflow-wrap: anywhere;
}

.home-contact__wanote[b-rwzai41w30] { color: var(--muted); margin: var(--s-2) 0 0; }

.home-contact__hint[b-rwzai41w30] {
    color: var(--muted);
    max-width: 36ch;
    margin: var(--s-3) 0 0;
}

/* Click-to-load map. The summary is a text link with the address beside it; the
   frame appears beneath it when opened. */
.home-contact__map[b-rwzai41w30] { margin: var(--s-6) 0 0; }

.home-contact__mapsummary[b-rwzai41w30] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s-2);
    cursor: pointer;
    list-style: none;
    width: fit-content;
}
.home-contact__mapsummary[b-rwzai41w30]::-webkit-details-marker { display: none; }
.home-contact__mapsummary[b-rwzai41w30]::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    align-self: center;
    flex: none;
}
.home-contact__map[open] .home-contact__mapsummary[b-rwzai41w30]::before { background: var(--accent-bright); }

.home-contact__frame[b-rwzai41w30] {
    margin-top: var(--s-3);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
}

.home-contact__frame iframe[b-rwzai41w30] {
    display: block;
    width: 100%;
    height: clamp(320px, 36vw, 440px);
    border: 0;
}

/* --- close ------------------------------------------------------------------ */
.home-close__inner[b-rwzai41w30] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4) var(--s-6);
}

.home-close__title[b-rwzai41w30] { max-width: 22ch; }
.home-close__lead[b-rwzai41w30] { margin-top: var(--s-2); }

.home-close__actions[b-rwzai41w30] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

/* --- narrow ----------------------------------------------------------------- */
@media (max-width: 980px) {
    .stage[b-rwzai41w30] {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s-5);
    }
    /* Document first on narrow: it is the point of the section, and a reader on a
       phone should not scroll past four options before seeing anything. */
    .stage__side[b-rwzai41w30] { grid-column: 1; grid-row: 2; }
    .stage__panes[b-rwzai41w30] { grid-column: 1; grid-row: 1; }
}

@media (max-width: 900px) {
    .home-overview__grid[b-rwzai41w30],
    .home-projects__grid[b-rwzai41w30],
    .home-currency__grid[b-rwzai41w30] {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s-4);
    }

    .home-contact__cols[b-rwzai41w30] {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s-5);
    }

    /* Stacked, a tall map pushes the closing section far down; a landscape band
       keeps the address readable and the page moving. */
    .home-contact__frame iframe[b-rwzai41w30] { height: auto; aspect-ratio: 16 / 10; }

    /* Stacked, a full-height portrait pushes the rest of the page a long way
       down, so it crops to a landscape band instead. The photograph is a 2:3
       portrait and all four faces sit between roughly 18% and 64% down it; 4/3
       with the crop shifted up to 35% keeps every face inside the band at about
       340px tall on a phone rather than the ~680px a full portrait would be. */
    .home-overview__shot[b-rwzai41w30] {
        max-width: none;
        margin-left: 0;
    }
    .home-overview__shot .plate__area[b-rwzai41w30] { aspect-ratio: 4 / 3; }
    .home-overview__shot img[b-rwzai41w30] { object-position: 50% 35%; }

    .home-overview__title[b-rwzai41w30],
    .home-projects__title[b-rwzai41w30] { max-width: 20ch; }

    .home-projects__margin[b-rwzai41w30] { max-width: 28rem; }

    .home-does__list[b-rwzai41w30] { grid-template-columns: minmax(0, 1fr); gap: 0; }

    .home-people__row[b-rwzai41w30] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-people__shot:last-child[b-rwzai41w30] { grid-column: 1 / -1; }
    .home-people__shot:last-child .plate__area[b-rwzai41w30] { aspect-ratio: 16 / 9; }

    .home-currency__eg[b-rwzai41w30] {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s-3);
    }
}

@media (max-width: 620px) {
    .home-hero[b-rwzai41w30] { padding-top: var(--s-5); }

    .home-hero__actions .btn[b-rwzai41w30],
    .home-close__actions .btn[b-rwzai41w30] {
        flex: 1 1 auto;
        justify-content: center;
    }

    .home-people__row[b-rwzai41w30] { grid-template-columns: minmax(0, 1fr); }
    .home-people__shot:last-child .plate__area[b-rwzai41w30] { aspect-ratio: 3 / 2; }
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
/* The 404 is built from the site's primitives; only RHYTHM lives here. No colour, no type size and
   no new component — those belong to wwwroot/app.css, and a status page is not a reason to fork the
   design system. */

/* More space above a heading than below it: the eyebrow already carries its own bottom margin, so
   the heading only needs a little air under the label. */
.nf__head[b-6csi3owsqc] { margin-top: var(--s-2); }

.nf__say[b-6csi3owsqc] { margin-top: var(--s-4); }

/* The recovery actions sit under the sentence that promises them. */
.nf__actions[b-6csi3owsqc] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-top: var(--s-5);
}

.nf__nexthead[b-6csi3owsqc] { margin-bottom: var(--s-4); }
/* /Components/Pages/Privacy.razor.rz.scp.css */
/* The policy page. Narrow measure, ruled headings, nothing decorative — it is a
   document to be read and checked, not a marketing surface. */

.pv-hero__title[b-1nrd2gq7zm] { max-width: 16ch; }
.pv-hero__lead[b-1nrd2gq7zm] { margin-top: var(--s-4); }

.pv-body > p[b-1nrd2gq7zm] { max-width: 68ch; }

.pv-h2[b-1nrd2gq7zm] {
    margin-top: var(--s-6);
    margin-bottom: var(--s-3);
    padding-bottom: var(--s-2);
    border-bottom: 1px solid var(--line);
}

.pv-h2:first-child[b-1nrd2gq7zm] { margin-top: 0; }

.pv-back[b-1nrd2gq7zm] { margin-top: var(--s-6); }
/* /Components/Shared/PostingTrace.razor.rz.scp.css */
/* The posting trace — see the comment at the top of PostingTrace.razor.
   This is the one authored motion moment on the site: the bracket draws itself once, in sequence,
   the way a posting run strikes through. Everything it draws is decorative; every word is visible
   before, during and after the animation.

   The source document's own typesetting (sheet, head, lines, rules, total) is the shared .doc
   primitive in app.css §6c — only the trace's geometry lives here. */

.trace[b-j1e45v1tox] { margin: 0; }

/* Three columns: the sheet, a 56px lane the bracket is drawn in, the records. The lane is an
   empty grid column; the bracket's pieces belong to the records and reach LEFT into it. */
.trace__grid[b-j1e45v1tox] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1.08fr);
    grid-template-rows: auto auto;
    column-gap: 0;
    row-gap: var(--s-3);
    align-items: start;
}

.trace__head[b-j1e45v1tox] { margin: 0; }
.trace__head--src[b-j1e45v1tox] { grid-column: 1; }
.trace__spacer[b-j1e45v1tox] { grid-column: 2; }

/* --- the source document ---------------------------------------------------
   A sheet of paper at its natural height. */
.trace__source[b-j1e45v1tox] {
    grid-column: 1;
    align-self: start;
}

/* --- the destinations, and the bracket they draw ---------------------------- */
.trace__list[b-j1e45v1tox] {
    grid-column: 3;
    margin: 0;
    display: grid;
    grid-template-rows: none;     /* every record is its own height */
}

.trace__dest[b-j1e45v1tox] {
    position: relative;
    padding: var(--s-3) 0 var(--s-3) var(--s-3);
    border-bottom: 1px solid var(--on-field-rule);
    min-width: 0;
}
.trace__dest:last-child[b-j1e45v1tox] { border-bottom: 0; }

/* The spine is drawn in pieces: each record's ::after runs its full height at the spine's x
   (22px into the lane, i.e. 34px left of the record's box). The first record's piece starts at
   its centre, the last record's ends at its centre, so the spine begins and ends on a tick. */
.trace__dest[b-j1e45v1tox]::after {
    content: "";
    position: absolute;
    left: -34px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--accent-bright);
    transform-origin: top center;
}
.trace__dest:first-child[b-j1e45v1tox]::after { top: 50%; }
.trace__dest:last-child[b-j1e45v1tox]::after { bottom: 50%; }

/* The tick: from the spine to the record, at the record's vertical centre, ending in the
   posting dot. The FIRST tick is longer — it runs from the sheet's edge, across the spine, to
   the record, and so is also the stem out of the document. */
.trace__mark[b-j1e45v1tox] {
    position: absolute;
    left: -34px;
    top: 50%;
    width: 34px;
    height: 1px;
    background: var(--accent-bright);
    transform-origin: left center;
}
.trace__dest:first-child .trace__mark[b-j1e45v1tox] {
    left: -56px;
    width: 56px;
}

/* A round terminal where each tick meets its record — the posting mark. */
.trace__mark[b-j1e45v1tox]::after {
    content: "";
    position: absolute;
    right: -1px;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -2.5px;
    border-radius: 50%;
    background: var(--accent-bright);
}

.trace__destname[b-j1e45v1tox] {
    font-size: var(--t-small);
    font-weight: 700;
    color: var(--on-field);
    letter-spacing: -0.005em;
}

.trace__destwhat[b-j1e45v1tox] {
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--on-field-soft);
    margin-top: 2px;
}

/* The general-ledger leg shows the journal itself rather than asserting that it
   balances. Two columns so the figures align under each other and the addition
   is checkable at a glance — which is the entire point of the graphic. */
.trace__journal[b-j1e45v1tox] {
    margin: 3px 0 0;
    display: grid;
    gap: 1px;
    font-size: 0.875rem;
}

.trace__journal li[b-j1e45v1tox] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-2);
    align-items: baseline;
}

.trace__leg[b-j1e45v1tox] { color: var(--on-field-soft); }

/* The cost entry is a SECOND journal, not more lines on the first — selling goods
   posts revenue and relieves stock as two separate double-entries. A gap is what
   says so; a rule here would read as a total, which this is not. */
.trace__journal + .trace__journal[b-j1e45v1tox] { margin-top: var(--s-2); }

.trace > figcaption[b-j1e45v1tox] { margin-top: var(--s-3); }

/* ---------------------------------------------------------------------------
   THE ORCHESTRATED MOMENT
   The stem-and-first-tick leaves the document; the spine runs down piece by piece;
   the remaining ticks strike out to their records; the dots land. Strong ease-out
   throughout — never ease-in, which delays the movement at exactly the moment the
   eye is on it. Marketing motion is allowed to run longer than UI motion; this
   settles at ~1.3s.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .trace__mark[b-j1e45v1tox] { transform: scaleX(0); animation: trace-x-b-j1e45v1tox 300ms var(--ease-out) forwards; }
    .trace__dest:nth-child(1) .trace__mark[b-j1e45v1tox] { animation-delay: 120ms; animation-duration: 340ms; }
    .trace__dest:nth-child(2) .trace__mark[b-j1e45v1tox] { animation-delay: 760ms; }
    .trace__dest:nth-child(3) .trace__mark[b-j1e45v1tox] { animation-delay: 840ms; }
    .trace__dest:nth-child(4) .trace__mark[b-j1e45v1tox] { animation-delay: 920ms; }

    .trace__dest[b-j1e45v1tox]::after { transform: scaleY(0); animation: trace-y-b-j1e45v1tox 240ms var(--ease-out) forwards; }
    .trace__dest:nth-child(1)[b-j1e45v1tox]::after { animation-delay: 420ms; }
    .trace__dest:nth-child(2)[b-j1e45v1tox]::after { animation-delay: 520ms; }
    .trace__dest:nth-child(3)[b-j1e45v1tox]::after { animation-delay: 620ms; }
    .trace__dest:nth-child(4)[b-j1e45v1tox]::after { animation-delay: 720ms; }

    .trace__mark[b-j1e45v1tox]::after {
        opacity: 0;
        animation: trace-dot-b-j1e45v1tox 220ms var(--ease-out) forwards;
    }
    .trace__dest:nth-child(1) .trace__mark[b-j1e45v1tox]::after { animation-delay: 420ms; }
    .trace__dest:nth-child(2) .trace__mark[b-j1e45v1tox]::after { animation-delay: 1000ms; }
    .trace__dest:nth-child(3) .trace__mark[b-j1e45v1tox]::after { animation-delay: 1080ms; }
    .trace__dest:nth-child(4) .trace__mark[b-j1e45v1tox]::after { animation-delay: 1160ms; }
}

@keyframes trace-x-b-j1e45v1tox { to { transform: scaleX(1); } }
@keyframes trace-y-b-j1e45v1tox { to { transform: scaleY(1); } }
@keyframes trace-dot-b-j1e45v1tox { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }

/* WITHOUT JavaScript the run above plays on load — the no-script page still draws.
   WITH it, site.js sets html.js-trace and holds the run paused until the graphic is
   actually on screen, so a visitor who scrolls down to it sees the posting happen
   instead of arriving after it finished. Pausing (rather than re-triggering) keeps
   the sequence intact and costs nothing to resume. */
html.js-trace .trace__mark[b-j1e45v1tox],
html.js-trace .trace__mark[b-j1e45v1tox]::after,
html.js-trace .trace__dest[b-j1e45v1tox]::after {
    animation-play-state: paused;
}

html.js-trace .trace.is-drawing .trace__mark[b-j1e45v1tox],
html.js-trace .trace.is-drawing .trace__mark[b-j1e45v1tox]::after,
html.js-trace .trace.is-drawing .trace__dest[b-j1e45v1tox]::after {
    animation-play-state: running;
}

/* ---------------------------------------------------------------------------
   NARROW
   The bracket is a two-column device; below 720px the trace becomes a vertical
   run — document above, records below — and the bracket is removed rather than
   squeezed. The meaning survives because the column heads carry it in words.
   (720, not 880: inside the two-column hero the trace already lives in a column
   of ~690px and keeps its three-column form there; only a genuinely narrow
   screen stacks it.)
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {
    .trace__grid[b-j1e45v1tox] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto auto;
        row-gap: var(--s-2);
    }

    /* Rows are ASSIGNED, not auto-placed: left to flow, the second column head
       ("Posted everywhere") landed above the invoice on phones. */
    .trace__head--src[b-j1e45v1tox] { grid-column: 1; grid-row: 1; }
    .trace__source[b-j1e45v1tox]    { grid-column: 1; grid-row: 2; }
    .trace__head:not(.trace__head--src)[b-j1e45v1tox] { grid-column: 1; grid-row: 3; }
    .trace__list[b-j1e45v1tox]      { grid-column: 1; grid-row: 4; }

    .trace__spacer[b-j1e45v1tox] { display: none; }

    .trace__source[b-j1e45v1tox] { margin-bottom: var(--s-3); }

    .trace__head[b-j1e45v1tox] { margin-top: var(--s-3); }
    .trace__head--src[b-j1e45v1tox] { margin-top: 0; }

    /* No bracket: the pieces are hidden and each record keeps its posting mark as a
       bullet on the left rule instead. */
    .trace__mark[b-j1e45v1tox],
    .trace__dest[b-j1e45v1tox]::after { display: none; }

    .trace__dest[b-j1e45v1tox] { padding-left: var(--s-4); }

    .trace__dest[b-j1e45v1tox]::before {
        content: "";
        position: absolute;
        left: 0;
        top: calc(var(--s-3) + 0.6em);
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--accent-bright);
    }
}
/* /Components/Shared/WorkDocument.razor.rz.scp.css */
/* The four documents in "A closer look". Their sheet, head, table and rules are the shared .doc
   primitive in app.css §6c; only what is particular to these sheets lives here. */

/* Dates and codes hold their width so the movement column beside them lines up. */
.wd__date[b-nganujca12] {
    white-space: nowrap;
    font-variant-numeric: tabular-nums lining-nums;
}

/* The pay run's posting, set like the ledger leg in the hero: two columns, figures under each
   other, small enough to sit as a footnote to the register above it. */
.wd__journal[b-nganujca12] {
    margin: var(--s-2) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 2px;
    font-size: 0.8125rem;
    max-width: 30rem;
}

.wd__journal li[b-nganujca12] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-2);
    align-items: baseline;
    color: var(--text);
}

/* Debits first, credits indented — the convention of a written journal. */
.wd__journal li > .credit:first-child[b-nganujca12] { padding-left: var(--s-3); }