/* ══════════════════════════════════════════════════════════════════════════
   THE REGISTER — /broker and /broker/{slug}
   ══════════════════════════════════════════════════════════════════════════
   Two views, one stylesheet: .ledger is the directory index, .dossier is a
   single entry. They are always read in that order, so one cached file beats
   two that each miss, and the parts they genuinely share can only be written
   once here.

   Every value resolves to a --ta-* token declared in public/css/ta.css (Shadcn
   design language; zinc ramp in light, the site's slate navy in dark). No hex,
   no one-off font size, no radius, no shadow at rest. Provenance and measured
   contrast: docs/design/tokens.md.

   No @font-face and no @import: the register sets no face of its own. Inter
   carries the whole page — figures included, via its tnum feature — and rides
   in the single Google Fonts request in layouts/app.blade.php.

   The two roots are namespaced (.ledger / .dossier) and their class prefixes
   (.ldg- / .dos-) do not collide, so nothing in one half can reach the other.
   ══════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════
   1. THE LEDGER — broker register index (resources/views/brokers/index.blade.php)
   ══════════════════════════════════════════════════════════════════════════
   Every value here resolves to a --ta-* token declared in public/css/ta.css
   (Shadcn). No hex, no one-off font size, no radius, no shadow at rest.
   Provenance and measured contrast: docs/design/tokens.md.

   The list is a stack of full-width CARDS, not a <table>. A card reads as a
   product surface; a fixed grid template shared by every card keeps the four
   scan stops aligned vertically down the page, which is the one thing a table
   was actually buying us. Semantics moved to <ul>/<li> + <dl> — see
   docs/frontend-stack.md for why that is the right trade for a five-field
   entity record.

   There is no <link> to a font here on purpose: the single family the register
   uses arrives in the layout's one Google Fonts request.
   ══════════════════════════════════════════════════════════════════════════ */

.ledger {
    /* Height of the sticky site header, measured at runtime so the sticky
       filter rail clears it at any breakpoint. */
    --ldg-stick: 56px;
    /* Width of the filter rail. Wide enough for "FSCA South Africa" on two
       lines beside its bar and count, narrow enough to leave the entity name
       the larger half of a 1200px measure. */
    --ldg-rail: 16rem;
    /* The register paints its own surface rather than inheriting the site's, so
       the page keeps working if it is ever dropped into a bare layout. Since the
       ramp was moved onto the site's slate navy, --ta-surface resolves to the
       same value the body already has in both themes; see ta.css. */
    background: var(--ta-surface);
    color: var(--ta-ink);
    font-family: var(--ta-sans);
    /* Every figure on the page lines up in its column. */
    font-variant-numeric: tabular-nums;
}
.ledger *, .ledger *::before, .ledger *::after { box-sizing: border-box; }

/* One container for the whole page, so the masthead, the rail and the list
   share a single content edge top to bottom — and it is the shell the site
   header uses, so that edge is the top menu's too. Both values, including the
   phone step, come from ta.css. */
.ldg-wrap {
    width: 100%; max-width: var(--ta-container);
    margin-inline: auto;
    padding-inline: var(--ta-container-pad);
}

/* Focus is the loudest state on the page and is never removed. */
.ledger a:focus-visible,
.ledger button:focus-visible,
.ledger input:focus-visible,
.ledger select:focus-visible,
.ledger summary:focus-visible {
    outline: var(--ta-focus-width) solid var(--ta-focus);
    outline-offset: var(--ta-focus-offset);
    border-radius: var(--ta-radius-sm);
}

/* ── Masthead ──────────────────────────────────────────────────────────
   No band, no tint, no double rule. The previous masthead painted a
   full-width brand wash across the top, which is exactly the "you are reading
   a document" signal this redesign is removing. It is now type on the page
   surface, closed by a single hairline. */
.ldg-cmd { border-bottom: 1px solid var(--ta-rule-2); }
/* Deliberately shallow. There is no hero here: the first cards of the
   register have to be on screen at 1280 × 800. */
.ldg-cmd-inner { padding-block: var(--ta-sp-6) var(--ta-sp-5); }

.ldg-crumb {
    font-size: var(--ta-fs-data);
    line-height: var(--ta-lh-comp);
    color: var(--ta-ink-3);
    margin-bottom: var(--ta-sp-3);
}
/* Underlined at rest, not on hover: the accent against the crumb's own
   --ta-ink-3 does not clear 3:1, so colour alone would not distinguish the
   link from the text around it (SC 1.4.1). */
.ldg-crumb a { color: var(--ta-brand); text-decoration: underline; text-underline-offset: 2px; }
.ldg-crumb a:hover { color: var(--ta-brand-strong); }
.ldg-crumb span[aria-hidden] { color: var(--ta-rule-strong); margin-inline: var(--ta-sp-1); }

.ldg-headline {
    font-size: var(--ta-fs-display);
    font-weight: var(--ta-fw-semibold);
    line-height: var(--ta-lh-display);
    letter-spacing: var(--ta-ls-tight);
    color: var(--ta-ink);
    margin: 0;
}

.ldg-stand {
    max-width: var(--ta-measure);
    margin: var(--ta-sp-3) 0 0;
    font-size: var(--ta-fs-lead);
    line-height: var(--ta-lh-body);
    color: var(--ta-ink-2);
}
.ldg-stand a { color: var(--ta-brand); text-decoration: underline; text-underline-offset: 2px; }
.ldg-stand a:hover { color: var(--ta-brand-strong); }

/* The colophon is the register's own figures. Label/value pairs, not a run of
   prose — same pattern the cards use, so the page teaches it once at the top. */
.ldg-colophon {
    display: flex; flex-wrap: wrap; gap: var(--ta-sp-6);
    margin-top: var(--ta-sp-5);
}
.ldg-colophon > div { display: flex; flex-direction: column; gap: 2px; }
.ldg-colophon dt {
    font-size: var(--ta-fs-data); font-weight: var(--ta-fw-normal);
    color: var(--ta-ink-3); margin: 0;
}
.ldg-colophon dd {
    font-size: var(--ta-fs-body); font-weight: var(--ta-fw-semibold);
    color: var(--ta-ink); margin: 0;
}

/* ── Risk disclosure ───────────────────────────────────────────────────
   Present on first paint, above the fold, above the controls, not dismissible
   and not a modal. One line, quiet ink, hairline top and bottom, no tint and
   no icon — loud enough to read, too plain to be mistaken for a promotion.
   Legibility is the requirement, dominance is not. */
.ldg-risk {
    border-bottom: 1px solid var(--ta-rule-2);
    background: var(--ta-surface-3);
}
.ldg-risk-inner {
    padding-block: var(--ta-sp-3);
    font-size: var(--ta-fs-data);
    line-height: var(--ta-lh-body);
    color: var(--ta-ink-2);
}
.ldg-risk-inner b { font-weight: var(--ta-fw-semibold); color: var(--ta-ink); }
.ldg-risk-inner a { color: var(--ta-brand); text-decoration: underline; text-underline-offset: 2px; }
.ldg-risk-inner a:hover { color: var(--ta-brand-strong); }

/* ══════════════════════════════════════════════════════════════════════
   THE RAIL — every control on the page
   ══════════════════════════════════════════════════════════════════════
   One column beside the list, in the order a reader narrows a register:
   search, the four facets, the order. It replaced a bar across the top of the
   page, which put ~150px between the masthead and the first entry and could
   only afford a <select> for three of the four facets.

   A facet row is a link with three parts — name, bar, count. The count is what
   makes a facet worth more than a dropdown: "247 entries" is a decision the
   reader can make before clicking. The bar is that same figure read as a
   shape, so the rail doubles as the register's own distribution — and it is
   never the only channel, the figure is always printed beside it.

   The active row is INVERTED rather than tinted: at 13px in a 16rem column a
   tint is not a state, and inverting keeps the accent free for links. */
.ldg-body {
    display: grid;
    grid-template-columns: var(--ldg-rail) minmax(0, 1fr);
    column-gap: var(--ta-sp-8);
    /* No row-gap: the rail spans more rows than the main column has (below),
       and a row gap is charged for every empty one. Each block in the main
       column carries its own margin instead. */
    row-gap: 0;
    align-items: start;
    padding-block: var(--ta-sp-6);
}
/* `1 / -1` reaches the last EXPLICIT line, of which there is one, so the rail
   would sit in row 1 and stretch it to its own height. Spanning past the child
   count is the only way to hold a grid item beside an unknown number of
   siblings without wrapping them in a second element. */
.ldg-side { grid-column: 1; grid-row: 1 / span 20; }
.ldg-body > :not(.ldg-side) { grid-column: 2; }

.ldg-side {
    display: flex; flex-direction: column; gap: var(--ta-sp-5);
    position: sticky; top: var(--ldg-stick);
    /* Taller than a laptop viewport once the alphabet is in it, so the rail
       scrolls itself rather than pinning half of itself off screen. */
    max-height: calc(100vh - var(--ldg-stick) - var(--ta-sp-6));
    overflow-y: auto;
    /* Room for the focus ring on a full-width row against the scrollbar. */
    padding-right: var(--ta-sp-2);
}

.ldg-side-hd {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--ta-sp-3);
    padding-bottom: var(--ta-sp-3);
    border-bottom: 1px solid var(--ta-rule);
}
.ldg-side-h {
    font-size: var(--ta-fs-support); font-weight: var(--ta-fw-semibold);
    color: var(--ta-ink); margin: 0;
}

.ldg-side-q,
.ldg-side-order { display: flex; flex-direction: column; gap: var(--ta-sp-2); }

.ldg-search {
    width: 100%; height: var(--ta-control-h);
    padding: 0 var(--ta-sp-3);
    font-family: inherit; font-size: var(--ta-fs-body);
    color: var(--ta-ink);
    background: var(--ta-surface-2);
    border: 1px solid var(--ta-rule-strong);
    border-radius: var(--ta-radius);
}
.ldg-search::placeholder { color: var(--ta-ink-3); }
.ldg-search:hover { border-color: var(--ta-ink-3); }

.ldg-submit {
    width: 100%; height: var(--ta-control-h); padding-inline: var(--ta-sp-5);
    font-family: inherit; font-size: var(--ta-fs-body); font-weight: var(--ta-fw-medium);
    color: var(--ta-brand-on); background: var(--ta-brand);
    border: 1px solid var(--ta-brand); border-radius: var(--ta-radius);
    cursor: pointer;
    transition: background var(--ta-motion) var(--ta-motion-ease);
}
.ldg-submit:hover { background: var(--ta-brand-strong); border-color: var(--ta-brand-strong); }

/* Order. Real <select>s in the GET form, so they work with JS off; the script
   auto-submits on change and hides the companion button. */
.ldg-select {
    width: 100%; height: var(--ta-control-h); padding: 0 var(--ta-sp-3);
    font-family: inherit; font-size: var(--ta-fs-data); color: var(--ta-ink);
    background: var(--ta-surface-2);
    border: 1px solid var(--ta-rule-strong); border-radius: var(--ta-radius);
    cursor: pointer;
}
.ldg-go {
    width: 100%; height: var(--ta-control-h); padding-inline: var(--ta-sp-4);
    font-family: inherit; font-size: var(--ta-fs-data);
    color: var(--ta-ink); background: var(--ta-surface-2);
    border: 1px solid var(--ta-rule-strong); border-radius: var(--ta-radius);
    cursor: pointer;
}
.ldg-kbd { font-size: var(--ta-fs-data); color: var(--ta-ink-3); }
.ldg-kbd kbd {
    font-family: inherit; font-size: inherit;
    padding: 1px 5px; border: 1px solid var(--ta-rule-2);
    border-radius: var(--ta-radius-sm); background: var(--ta-surface-3);
}

/* ── Facet group ───────────────────────────────────────────────────────
   A caps label, then its rows. The label is the only uppercase type on the
   page: it has to separate five groups of near-identical rows without a box
   around each one. */
.ldg-grp { display: flex; flex-direction: column; }
.ldg-grp-hd {
    font-size: var(--ta-fs-micro); font-weight: var(--ta-fw-semibold);
    text-transform: uppercase; letter-spacing: var(--ta-ls-caps);
    color: var(--ta-ink-3);
    margin: 0 0 var(--ta-sp-2);
}
.ldg-rows { display: flex; flex-direction: column; }
/* The alphabet is 27 rows: capped and scrolled, so it cannot push the three
   facets above it off the rail. */
.ldg-rows.is-tall { max-height: 15rem; overflow-y: auto; }

.ldg-fr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3.5rem auto;
    align-items: center; gap: var(--ta-sp-2);
    /* The "#" row carries a .visually-hidden label, and an absolutely
       positioned descendant of a static parent belongs to the initial
       containing block — where no ancestor's overflow can clip it and it
       inflates documentElement.scrollWidth. See docs/frontend-stack.md. */
    position: relative;
    min-height: 1.75rem; padding: var(--ta-sp-1) var(--ta-sp-2);
    font-size: var(--ta-fs-data); color: var(--ta-ink-2);
    border-radius: var(--ta-radius-sm);
    text-decoration: none;
    transition: background var(--ta-motion) var(--ta-motion-ease),
                color var(--ta-motion) var(--ta-motion-ease);
}
.ldg-fr:hover { background: var(--ta-surface-3); color: var(--ta-ink); }
.ldg-fr-lbl { min-width: 0; }
.ldg-fr-ct { font-size: var(--ta-fs-micro); color: var(--ta-ink-3); text-align: right; }

/* The row's count against the longest row in its group. Track and fill are
   both quiet: this is a scale, not a chart. */
.ldg-fr-bar {
    height: 4px; overflow: hidden;
    background: var(--ta-surface-3);
    border-radius: var(--ta-radius-round);
}
.ldg-fr-bar > span { display: block; height: 100%; background: var(--ta-rule-strong); }

.ldg-fr[aria-current] {
    color: var(--ta-surface); background: var(--ta-ink);
    font-weight: var(--ta-fw-medium);
}
.ldg-fr[aria-current] .ldg-fr-ct { color: var(--ta-surface); }
.ldg-fr[aria-current] .ldg-fr-bar { background: var(--ta-ink-3); }
.ldg-fr[aria-current] .ldg-fr-bar > span { background: var(--ta-surface); }

.ldg-clear-all {
    font-size: var(--ta-fs-data); color: var(--ta-brand);
    text-decoration: underline; text-underline-offset: 2px;
    white-space: nowrap;
}

/* Only the empty state still uses a chip — the facets themselves are rows in
   the rail. */
.ldg-chip {
    display: inline-flex; align-items: center; gap: var(--ta-sp-2);
    min-height: 2rem; padding: 0 var(--ta-sp-3);
    font-size: var(--ta-fs-data); color: var(--ta-ink-2);
    background: var(--ta-surface-2);
    border: 1px solid var(--ta-rule-2); border-radius: var(--ta-radius-sm);
    text-decoration: none;
    transition: border-color var(--ta-motion) var(--ta-motion-ease),
                background var(--ta-motion) var(--ta-motion-ease);
}
.ldg-chip:hover { border-color: var(--ta-rule-strong); background: var(--ta-surface-3); }

/* ── Legend ────────────────────────────────────────────────────────────
   The abbreviations, the class grouping and the three licence states are
   explained on the page rather than assumed. */
.ldg-legend {
    margin-bottom: var(--ta-sp-6);
    border: 1px solid var(--ta-rule-2); border-radius: var(--ta-radius);
    background: var(--ta-surface-2);
}
.ldg-legend > summary {
    padding: var(--ta-sp-3) var(--ta-sp-4);
    font-size: var(--ta-fs-support); font-weight: var(--ta-fw-medium);
    color: var(--ta-ink); cursor: pointer;
}
.ldg-legend-body {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--ta-sp-6);
    padding: 0 var(--ta-sp-4) var(--ta-sp-4);
    border-top: 1px solid var(--ta-rule);
    padding-top: var(--ta-sp-4);
}
.ldg-legend-body h2 {
    font-size: var(--ta-fs-data); font-weight: var(--ta-fw-semibold);
    color: var(--ta-ink); margin: 0 0 var(--ta-sp-2);
}
.ldg-legend-body p, .ldg-legend-body dd {
    font-size: var(--ta-fs-data); line-height: var(--ta-lh-body);
    color: var(--ta-ink-2); margin: 0 0 var(--ta-sp-2);
}
.ldg-legend-body dt {
    font-size: var(--ta-fs-data); font-weight: var(--ta-fw-semibold);
    color: var(--ta-ink); margin-top: var(--ta-sp-2);
}
.ldg-legend-body dl { margin: 0; }
.ldg-legend-body a { color: var(--ta-brand); text-decoration: underline; text-underline-offset: 2px; }

/* ══════════════════════════════════════════════════════════════════════
   THE CARD
   ══════════════════════════════════════════════════════════════════════
   Four columns, identical on every card, so the scan stops form clean
   vertical rules down the list without a table:

     plate | identity | licence strip | action

   The plate is a fixed square so a wordmark can never push the name column,
   which is the failure a fluid logo cell always produces.

   The identity column is capped rather than fluid. Left to take every pixel the
   full-width page gave it, it paid the width out as one dead gap between a short
   brand name and the chips; capped, the identity and the strip stay together as
   one block and the slack collects in the last track, where it reads as the
   margin before a right-aligned action.

   Both middle tracks are fixed lengths, which is what keeps the chips on the
   same x down the whole list. A card is its own grid, so a content-sized track
   is measured per card, not per list: the strip used to be fit-content and each
   row therefore sized it to its own chips, which moved everything after it by a
   few pixels and left the list very slightly ragged. A fixed strip also does the
   job fit-content was there for — a broker on five registers cannot eat the
   name — and the chips wrap inside it instead. */
.ldg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ta-sp-3); }

.ldg-card {
    display: grid;
    grid-template-columns:
        var(--ta-plate-size)
        minmax(0, 30rem)
        11rem
        minmax(8rem, 1fr);
    align-items: center;
    gap: var(--ta-sp-4);
    min-height: var(--ta-card-h);
    padding: var(--ta-sp-4) var(--ta-sp-5);
    background: var(--ta-surface-2);
    border: 1px solid var(--ta-rule-2);
    border-radius: var(--ta-radius);
    /* A card lifts by luminance and a hairline. No shadow: 24 shadowed cards
       is a texture, not a list. */
    transition: border-color var(--ta-motion) var(--ta-motion-ease);
}
.ldg-card:hover { border-color: var(--ta-rule-strong); }
/* The whole card shows the focus ring when the name inside it is focused, so
   keyboard position is visible at card scale rather than at link scale. */
.ldg-card:focus-within { outline: var(--ta-focus-width) solid var(--ta-focus); outline-offset: var(--ta-focus-offset); }
.ldg-card:focus-within .ldg-name:focus-visible { outline: none; }

/* ── Logo plate ────────────────────────────────────────────────────────
   Fixed aspect, so nothing on this page shifts when a logo loads. The plate is
   deliberately white in BOTH themes — it is the stock a brand's mark was drawn
   against, not a surface in our ramp. Marks drawn in white get the inverted
   plate instead, decided per brand by brokers:normalise-logos. */
.ldg-plate {
    width: var(--ta-plate-size); height: var(--ta-plate-size);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--ta-fs-data); font-weight: var(--ta-fw-semibold);
    color: var(--ta-ink-3);
    background: var(--ta-surface-3);
    border: 1px solid var(--ta-rule-2);
    border-radius: var(--ta-radius-sm);
    overflow: hidden; flex-shrink: 0;
}
.ldg-plate.has-logo { background: var(--ta-plate); }
.ldg-plate.is-light-ink { background: var(--ta-plate-ink); }
.ldg-plate img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }

/* ── Identity ──────────────────────────────────────────────────────────
   Three lines. Line 1 is what the reader typed; line 2 is the entity that
   actually holds the licence; line 3 is the supporting detail nobody scans but
   everybody checks. */
.ldg-id { min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.ldg-name {
    font-size: var(--ta-fs-card); font-weight: var(--ta-fw-semibold);
    line-height: var(--ta-lh-comp); color: var(--ta-ink);
    text-decoration: none;
    /* The card is not a link; the name is. That keeps the action button
       unambiguous and gives the accessible name of the item one owner. */
}
.ldg-name:hover { color: var(--ta-brand); }
/* The name's hit area covers the card, so the whole row is clickable without
   the card itself being a link and swallowing the button. */
.ldg-name::after { content: ''; position: absolute; inset: 0; }
.ldg-card { position: relative; }
/* ...and anything that must stay separately clickable sits above it. */
.ldg-act, .ldg-strip a { position: relative; z-index: 1; }

.ldg-entity {
    font-size: var(--ta-fs-support); color: var(--ta-ink-3);
    line-height: var(--ta-lh-comp);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ldg-meta {
    font-size: var(--ta-fs-data); color: var(--ta-ink-3);
    line-height: var(--ta-lh-comp);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ldg-meta b { font-weight: var(--ta-fw-medium); color: var(--ta-ink-2); }
.ldg-sep { color: var(--ta-rule-strong); margin-inline: var(--ta-sp-1); }

.ldg-void { color: var(--ta-ink-3); font-style: italic; }
.ldg-hit { background: var(--ta-brand-soft); color: var(--ta-ink); padding: 0 2px; border-radius: 2px; }

/* ── Licence state glyph ───────────────────────────────────────────────
   Filled disc / half disc / hollow ring — drawn, so it is a real shape
   difference and not a font-dependent character, and so the strip's states
   survive any dichromacy and any loss of colour. Withdrawn is deliberately not
   red: an expired licence is an absence, not an error, and red stays free for a
   real warning. */
.ldg-mark { width: 8px; height: 8px; border-radius: var(--ta-radius-round); flex-shrink: 0; border: 1.5px solid currentColor; }
[data-state="force"] .ldg-mark { background: currentColor; }
[data-state="wind"]  .ldg-mark { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
[data-state="gone"]  .ldg-mark { background: transparent; }

/* ══════════════════════════════════════════════════════════════════════
   SIGNATURE — the licence strip
   ══════════════════════════════════════════════════════════════════════
   One chip per jurisdiction, each carrying its regulator's INK and its own
   licence STATUS shape. Every competitor stores one regulator per broker and
   prints it as a flat fact; we store a broker_licences row per jurisdiction,
   each with its own licence_status, so this shows in ~40px something nobody
   else can — a firm that is still licensed but shrinking. `FCA ● CySEC ○` is
   a very different proposition from `FCA ● CySEC ●`.

   Colour is never the only channel: the glyph differs per state, the regulator
   is named in words, and each chip carries an accessible label. */
.ldg-strip { display: flex; flex-wrap: wrap; gap: var(--ta-sp-1) var(--ta-sp-3); align-items: center; min-width: 0; }
.ldg-jchip {
    display: inline-flex; align-items: center; gap: var(--ta-sp-2);
    font-size: var(--ta-fs-data); font-weight: var(--ta-fw-medium);
    white-space: nowrap;
}
.ldg-jmore { font-size: var(--ta-fs-micro); color: var(--ta-ink-3); }

/* ── Action ────────────────────────────────────────────────────────────
   Suppressed entirely when the site never answered: a dead link is worse than
   no link, and the row already says so. It sits in the row's one fluid track and
   is pushed to its end, so the button holds the same right edge on every card
   whether or not the row above it has one. */
.ldg-act {
    justify-self: end;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--ta-sp-2);
    height: var(--ta-control-h); padding-inline: var(--ta-sp-4);
    font-size: var(--ta-fs-data); font-weight: var(--ta-fw-medium);
    color: var(--ta-ink); background: var(--ta-surface-2);
    border: 1px solid var(--ta-rule-strong); border-radius: var(--ta-radius);
    text-decoration: none; white-space: nowrap;
    transition: background var(--ta-motion) var(--ta-motion-ease),
                border-color var(--ta-motion) var(--ta-motion-ease);
}
.ldg-act:hover { background: var(--ta-surface-3); border-color: var(--ta-ink-3); }
.ldg-act .bi { font-size: var(--ta-fs-micro); }

/* ── Foot ──────────────────────────────────────────────────────────────
   Pagination stays. Traffic here is search-driven and the canonical keeps
   ?page=N so paginated pages stay indexable; load-more or infinite scroll
   would break both. */
.ldg-foot {
    display: flex; flex-wrap: wrap; gap: var(--ta-sp-4);
    align-items: center; justify-content: space-between;
    margin-top: var(--ta-sp-6); padding-top: var(--ta-sp-5);
    border-top: 1px solid var(--ta-rule-2);
}
.ldg-position { font-size: var(--ta-fs-data); color: var(--ta-ink-3); margin: 0; }
.ldg-position b { font-weight: var(--ta-fw-semibold); color: var(--ta-ink); }

.ldg-pages nav { display: flex; }
.ldg-pages svg { width: 1rem; height: 1rem; }
.ldg-pages a, .ldg-pages span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.25rem; height: 2.25rem; padding-inline: var(--ta-sp-2);
    font-size: var(--ta-fs-data); color: var(--ta-ink-2);
    background: var(--ta-surface-2);
    border: 1px solid var(--ta-rule-2); border-radius: var(--ta-radius-sm);
    text-decoration: none; margin-left: -1px;
}
.ldg-pages a:hover { background: var(--ta-surface-3); }
.ldg-pages [aria-current] { color: var(--ta-brand); background: var(--ta-brand-soft); border-color: var(--ta-brand); font-weight: var(--ta-fw-medium); }
.ldg-pages [aria-disabled] { color: var(--ta-rule-strong); }

/* ── Empty ─────────────────────────────────────────────────────────────
   Names the query that failed and offers the two ways back. */
.ldg-empty {
    padding: var(--ta-sp-12) var(--ta-sp-6);
    text-align: center;
    border: 1px dashed var(--ta-rule-strong); border-radius: var(--ta-radius);
}
.ldg-empty-t { font-size: var(--ta-fs-sect); font-weight: var(--ta-fw-semibold); color: var(--ta-ink); margin: 0 0 var(--ta-sp-3); }
.ldg-empty-s { max-width: var(--ta-measure); margin: 0 auto var(--ta-sp-5); font-size: var(--ta-fs-support); line-height: var(--ta-lh-body); color: var(--ta-ink-2); }
.ldg-empty-acts { display: flex; flex-wrap: wrap; gap: var(--ta-sp-2); justify-content: center; }

/* ── Jurisdiction inks ─────────────────────────────────────────────────
   One hue per register, taught once in the legend and used everywhere the
   register is named. Set on the NAME only — never on a card background, which
   would stripe the list. */
.ldg-jur[data-reg="cysec-cyprus"],  .ldg-jchip[data-reg="cysec-cyprus"]  { color: var(--ta-jur-cysec); }
.ldg-jur[data-reg="fsa-seychelles"],.ldg-jchip[data-reg="fsa-seychelles"]{ color: var(--ta-jur-fsa); }
.ldg-jur[data-reg="fca-uk"],        .ldg-jchip[data-reg="fca-uk"]        { color: var(--ta-jur-fca); }
.ldg-jur[data-reg="fsca-south-africa"], .ldg-jchip[data-reg="fsca-south-africa"] { color: var(--ta-jur-fsca); }
.ldg-jur[data-reg="jse"],               .ldg-jchip[data-reg="jse"]               { color: var(--ta-jur-jse); }

/* ── Responsive ────────────────────────────────────────────────────────
   Below 1024 the rail unpins and moves above the list, as a panel with its own
   scroll: three facet groups plus the alphabet and the order controls are far
   too tall to stack in full ahead of the first entry. Below 760 the card becomes
   a single stack in reading order. No horizontal scroll at any width, and every
   target stays ≥44px. */
@media (max-width: 1023px) {
    .ldg-body {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--ta-sp-5);
    }
    .ldg-side, .ldg-body > :not(.ldg-side) { grid-column: 1; }
    /* Full width, so the groups sit beside each other rather than stacking into
       a 900px wall of controls — and a row keeps its own measure, instead of
       stranding its bar and count at the far right of the viewport. */
    .ldg-side {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
        gap: var(--ta-sp-5) var(--ta-sp-6);
        align-content: start;
        grid-row: auto;
        position: static;
        max-height: 70vh;
        padding: var(--ta-sp-4);
        border: 1px solid var(--ta-rule-2); border-radius: var(--ta-radius);
    }
    .ldg-side-hd { grid-column: 1 / -1; }
    .ldg-side-q { grid-column: 1 / -1; max-width: 26rem; }
    .ldg-rows.is-tall { max-height: 11rem; }
}

@media (max-width: 760px) {
    .ldg-card {
        grid-template-columns: var(--ta-plate-size) minmax(0, 1fr);
        grid-template-areas:
            "plate id"
            "strip strip"
            "act   act";
        align-items: start;
        gap: var(--ta-sp-3);
        padding: var(--ta-sp-4);
    }
    .ldg-plate { grid-area: plate; }
    .ldg-id    { grid-area: id; }
    .ldg-strip { grid-area: strip; }
    .ldg-act   { grid-area: act; justify-self: stretch; width: 100%; }
    /* The name wraps rather than truncating: at 375px an ellipsis on the one
       fact the reader came for is the wrong economy. */
    .ldg-entity, .ldg-meta { white-space: normal; }
    .ldg-headline { font-size: var(--ta-fs-sect); }
    .ldg-colophon { gap: var(--ta-sp-4); }
    /* Every target reaches 44px on touch. At desktop these are 28–36px, which
       clears SC 2.5.8's 24px floor on a pointer; a thumb is not a pointer. A
       facet row is full-width, so only its height is ever in question. */
    .ldg-fr { min-height: 2.5rem; }
    .ldg-chip { min-height: var(--ta-control-h); }
    .ldg-pages a, .ldg-pages span { min-width: var(--ta-control-h); height: var(--ta-control-h); }
}

/* ── Motion ────────────────────────────────────────────────────────────
   Everything above is a state transition inside the 120–180ms band. A reader
   who has asked for less motion gets none. */
@media (prefers-reduced-motion: reduce) {
    .ledger *, .ledger *::before, .ledger *::after {
        transition-duration: 0ms !important;
        animation-duration: 0ms !important;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   2. THE DOSSIER — one register entry (resources/views/brokers/show.blade.php)
   ══════════════════════════════════════════════════════════════════════════ */
/* Every value below resolves to a --ta-* token from public/css/ta.css.
   See docs/design/tokens.md for provenance and measured contrast. */
.dossier {
    /* Inter is proportional, so the figures need the feature asked for
       explicitly. Set here and inherited, so licence numbers, dates and
       registration numbers all line up. */
    font-variant-numeric: tabular-nums;
    font-family: var(--ta-sans);
    color: var(--ta-ink);
    /* The register paints its own surface rather than inheriting the site's
       — matching .ledger, so the two pages are one palette. */
    background: var(--ta-surface);
}
.dossier :focus-visible {
    outline: var(--ta-focus-width) solid var(--ta-focus);
    outline-offset: var(--ta-focus-offset);
}
/* The same shell as the directory and the site header, so a reader moving from
   the list to a profile keeps one content edge. See ta.css. */
.dos-wrap { max-width: var(--ta-container); margin: 0 auto; padding-inline: var(--ta-container-pad); }

/* ═══ HEADER ═══
   No band and no double rule. Both were the accent painted across the full
   width to say "front of the record", which is the document grammar this
   redesign removes — and .ldg-cmd on the index dropped the same band, so
   keeping it here would break the pair rather than hold it. Type on the page
   surface, closed by a single hairline. That also frees the accent to mean
   one thing on this page: a control. */
.dos-hero { border-bottom: 1px solid var(--ta-rule-2); }
.dos-hero-inner { padding-block: var(--ta-sp-6) var(--ta-sp-5); }

.dos-crumb {
    font-size: var(--ta-fs-data);
    line-height: var(--ta-lh-comp); color: var(--ta-ink-3);
    margin-bottom: var(--ta-sp-3);
}
/* Underlined at rest: the accent against the crumb's own --ta-ink-3 measures
   1.20:1 light and 1.42:1 dark, so colour alone cannot mark the link
   (SC 1.4.1). Both inks clear 4.5:1 on the band's new tint — 7.56 and 6.28
   light, 8.48 and 5.97 dark — and the separator's --ta-rule-strong holds
   3.58 / 3.21 as a non-text mark. */
.dos-crumb a {
    color: var(--ta-brand); text-decoration: underline; text-underline-offset: 2px;
}
.dos-crumb a:hover { color: var(--ta-brand-strong); }
.dos-crumb span[aria-hidden] { color: var(--ta-rule-strong); margin-inline: var(--ta-sp-1); }

/* ── Identity and action ──
   Name on the left, the one thing a reader came to do on the right. The CTA
   used to open the sticky rail, which on a phone put it below every licence
   card on the page — the rail stacks last, so "Visit website" was the final
   thing in the document. */
/* Bottom-aligned, not centred: the CTA stack is taller than the name block
   (button, then domain, then the leaving-site note), so centring left ~90px
   of dead space under the legal entity. On the bottom edge the two columns
   close on the same line and the hero's own hairline picks it up. */
.dos-head {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--ta-sp-5) var(--ta-sp-8); align-items: end;
}
.dos-cta { justify-self: end; width: 15rem; flex: none; }

/* Identity row */
.dos-identity { display: flex; align-items: center; gap: var(--ta-sp-5); }
/* One fixed square for every brand, logo or not, so an initials plate and a
   16px favicon occupy the same footprint. Wordmarks are the one exception
   below — a 6:1 mark squeezed into a square is a hairline. */
.dos-mono {
    width: 5rem; height: 5rem; flex: none;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--ta-rule-2); border-radius: var(--ta-radius);
    background: var(--ta-surface-3);
    font-size: var(--ta-fs-sub);
    font-weight: var(--ta-fw-semibold); color: var(--ta-ink-3);
}
/* Favicons carry their own colours, so the plate stays white in both
   themes — a dark logo on a dark plate is invisible. */
.dos-mono.has-logo { background: var(--ta-plate); padding: var(--ta-sp-3); }
/* A wordmark drawn for a dark site header is white, and white on that white
   plate is invisible — the single worst logo failure on this page. Those get
   a permanently dark plate. It must be --ta-plate-ink and not
   --ta-surface-ink: the latter is the INVERTED surface, so it turns near-
   white in the dark theme and handed those marks a white plate again.
   The tone is measured once by brokers:normalise-logos, never guessed here. */
.dos-mono.has-logo.is-light-ink { background: var(--ta-plate-ink); }
/* Wordmarks keep the plate's height and take the width they need, so the
   identity row still has one baseline and one top edge. */
.dos-mono.is-wordmark { width: 12rem; }
/* 100%, not max-100%: favicons range from 16px to 256px, and a 16px mark
   left at its intrinsic size reads as a stray coloured dot beside the name. */
.dos-mono.has-logo img { width: 100%; height: 100%; object-fit: contain; }

.dos-name-block { min-width: 0; }
.dos-name {
    font-size: var(--ta-fs-display);
    font-weight: var(--ta-fw-semibold); line-height: var(--ta-lh-display);
    letter-spacing: var(--ta-ls-tight); color: var(--ta-ink); margin: 0;
}
.dos-legal {
    font-size: var(--ta-fs-support);
    line-height: var(--ta-lh-comp); color: var(--ta-ink-3);
    margin-top: var(--ta-sp-2);
}

/* ── Trust row ──
   Three signals, in the order a reader weighs them: where the firm is
   licensed, whether those licences are live, and what other readers made of
   it. A summary line, not the record — every one of them is stated again in
   full further down, which is why it can be this terse. */
.dos-trust {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--ta-sp-2) var(--ta-sp-3);
    margin-top: var(--ta-sp-5); padding-top: var(--ta-sp-4);
    /* The band it used to sit inside is gone, so the rule is the page's own
       hairline again — no accent mix, nothing to compensate for. */
    border-top: 1px solid var(--ta-rule-2);
}
/* The register's hue, on a chip that already names the country in words: the
   dot is a second channel for readers who see it, never the only one. */
.dos-trust-jur {
    display: inline-flex; align-items: center; gap: var(--ta-sp-2);
    min-height: 1.75rem; padding-inline: var(--ta-sp-3);
    border: 1px solid var(--ta-rule-2); border-radius: var(--ta-radius-sm);
    background: var(--ta-surface-2);
    font-size: var(--ta-fs-data); font-weight: var(--ta-fw-medium);
    color: var(--ta-ink-2);
}
.dos-trust-jur::before {
    content: ''; flex: none; width: 6px; height: 6px;
    border-radius: var(--ta-radius-round);
    background: var(--dos-ink, var(--ta-ink-3));
}
/* The same pill the licence cards carry, so one status reads as one status.
   Two overrides only: the auto margin that pins it to the end of a card header
   would push it away from the chips in a wrapping row, and it sits beside
   1.75rem chips here rather than a 22px heading. */
.dos-trust .dos-lic-status {
    margin-left: 0; min-height: 1.75rem;
    padding-inline: calc(var(--ta-sp-3) - 1px);
    font-size: var(--ta-fs-data);
}
.dos-trust-score {
    display: inline-flex; align-items: center; gap: var(--ta-sp-2);
    font-size: var(--ta-fs-data); color: var(--ta-ink-3); text-decoration: none;
}
.dos-trust-score b { color: var(--ta-ink); font-weight: var(--ta-fw-semibold); }
.dos-trust-score:hover { color: var(--ta-brand); }
.dos-trust-score:hover b { color: var(--ta-brand); }

/* ── Section nav ──
   The tabs are anchors into one document, so the page still prints whole and
   still works with scripting off. Sticky under the site header, whose height
   the script publishes as --dos-head-h because a third-party ticker changes
   it after first paint. */
.dos-nav {
    /* The fallback is the header at its shortest, before the ticker loads and
       before the script has measured it: too low hides the bar behind the
       header, which sits at z-index 1000 (layout.css). */
    position: sticky; top: var(--dos-head-h, 4rem); z-index: 20;
    background: var(--ta-surface);
    border-bottom: 1px solid var(--ta-rule-2);
}
.dos-nav-inner { display: flex; align-items: center; gap: var(--ta-sp-5); }
.dos-nav-list {
    display: flex; align-items: center; gap: var(--ta-sp-6);
    margin: 0; padding: 0; list-style: none;
    min-width: 0; overflow-x: auto;
    /* Four tabs never wrap onto a second row: on a phone they scroll, which is
       one bar high whatever the broker holds. */
    scrollbar-width: none;
}
.dos-nav-list::-webkit-scrollbar { display: none; }
.dos-nav-list a {
    display: block; white-space: nowrap;
    padding-block: var(--ta-sp-4); margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    font-size: var(--ta-fs-support); font-weight: var(--ta-fw-medium);
    color: var(--ta-ink-3); text-decoration: none;
    transition: color var(--ta-motion) var(--ta-motion-ease),
                border-color var(--ta-motion) var(--ta-motion-ease);
}
.dos-nav-list a:hover { color: var(--ta-ink); }
/* Ink and a rule together: the current tab is not marked by colour alone. */
.dos-nav-list a[aria-current="true"] {
    color: var(--ta-ink); border-bottom-color: var(--ta-brand);
}
.dos-nav-ct { color: var(--ta-ink-3); font-weight: var(--ta-fw-normal); }
.dos-nav-list a[aria-current="true"] .dos-nav-ct { color: var(--ta-ink-3); }
/* The header's CTA scrolls away; this one takes over. Hidden rather than
   absent, so it costs no layout shift when it arrives — and visibility, not
   opacity alone, so it is out of the tab order while invisible. */
.dos-nav-cta {
    margin-left: auto; flex: none;
    opacity: 0; visibility: hidden;
    transition: opacity var(--ta-motion) var(--ta-motion-ease),
                visibility var(--ta-motion) var(--ta-motion-ease);
}
.dos-nav.is-stuck .dos-nav-cta { opacity: 1; visibility: visible; }
.dos-nav-cta .dos-btn {
    min-height: 2.25rem; padding-inline: var(--ta-sp-5);
    font-size: var(--ta-fs-support);
}

/* ── Overview band ──
   The dot-separated strip put the jurisdictions, the class and the check date
   on one line with one separator, so the class read as a fifth jurisdiction.
   Each figure is now named and sits in its own cell. Only what we hold is
   here — see docs/data-gaps.md for the deposit and spread columns we do not. */
.dos-stats { border-bottom: 1px solid var(--ta-rule-2); }
.dos-stats-inner {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--ta-sp-5) var(--ta-sp-8);
    padding-block: var(--ta-sp-6);
}
/* Sentence case, not caps. Uppercase micro labels are the typographic tic of a
   filing; the whole page now uses one label style — quiet ink above a darker
   value — and it is the same one the cards on the index use. */
.dos-fact-lbl {
    font-size: var(--ta-fs-data);
    color: var(--ta-ink-3); margin-bottom: 2px;
}
/* The band is the answer to "what is on file for this broker", so its figures
   are sized as an answer. At --ta-fs-body they were the same 15px as the
   paragraph below them and the band read as a caption under the header rather
   than the summary of the record. --ta-fs-sect is the section-heading step:
   the numbers now rank with the headings they summarise, and nothing on the
   page outranks them except the broker's own name. */
.dos-fact-val {
    font-size: var(--ta-fs-sect); font-weight: var(--ta-fw-semibold);
    line-height: var(--ta-lh-comp); color: var(--ta-ink);
    letter-spacing: var(--ta-ls-tight);
}
.dos-stat.is-list .dos-fact-val {
    font-size: var(--ta-fs-body); font-weight: var(--ta-fw-medium);
    line-height: var(--ta-lh-body); letter-spacing: 0;
}
.dos-fact-val a { color: var(--ta-brand); text-decoration: none; }
.dos-fact-val a:hover { color: var(--ta-brand-strong); text-decoration: underline; text-underline-offset: 2px; }

/* ── Jurisdiction inks ──
   The same five hues the index uses, joined on the regulator slug, so a
   reader who filtered the listing by FCA meets the FCA's crimson again on
   the entry they opened. Purely a CSS mapping off an attribute already in
   the markup — no data-layer column, and a sixth register simply falls
   through to the neutral default rather than breaking.
   The hue is never the only carrier: every register is named in words, and
   where it lands on a LINK the ink measures only 1.3–2.9:1 against the text
   beside it — well under 3:1 — so those keep a rest-state underline. */
[data-reg="cysec-cyprus"]      { --dos-ink: var(--ta-jur-cysec); }
[data-reg="fsa-seychelles"]    { --dos-ink: var(--ta-jur-fsa); }
[data-reg="fca-uk"]            { --dos-ink: var(--ta-jur-fca); }
[data-reg="fsca-south-africa"] { --dos-ink: var(--ta-jur-fsca); }
[data-reg="jse"]               { --dos-ink: var(--ta-jur-jse); }

/* The overview band's REGULATORS field deliberately does NOT take the ink,
   even though the attribute is on it. Tried and rejected: Tickmill holds four
   registers, so the field became four saturated underlined hues wrapping
   across two lines — a colour swatch, not a key. The ink belongs where each
   hue can own a whole heading, which is the licence card below, and where it
   can be a single dot beside a country, which is the trust row above. Here
   the fact is a summary line and stays on the one accent. */
.dos-fact-val a[data-reg] {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.dos-fact-val a[data-reg]:hover { text-decoration-thickness: 2px; }
.dos-fact-sub {
    display: block; margin-top: 2px;
    font-size: var(--ta-fs-micro); font-weight: var(--ta-fw-normal);
    color: var(--ta-ink-3);
}

/* No .dos-notice: the record opens with no banner of ours. Both cases it
   carried are stated elsewhere or not stated at all — see the body. */

/* ── Risk disclosure ──
   The same strip the index carries, in the same place relative to the header,
   so the warning is not something a reader can leave behind by clicking into
   an entry. Quiet ink on the muted surface: legibility is the requirement,
   dominance is not, and a tinted alert box here would compete with the licence
   states, which are the one thing on this page that must read as a status. */
.dos-risk {
    border-bottom: 1px solid var(--ta-rule-2);
    background: var(--ta-surface-3);
}
.dos-risk-inner {
    padding-block: var(--ta-sp-3);
    font-size: var(--ta-fs-data);
    line-height: var(--ta-lh-body);
    color: var(--ta-ink-2);
}
.dos-risk-inner b { font-weight: var(--ta-fw-semibold); color: var(--ta-ink); }
.dos-risk-inner a { color: var(--ta-brand); text-decoration: underline; text-underline-offset: 2px; }
.dos-risk-inner a:hover { color: var(--ta-brand-strong); }

/* ═══ BODY ═══
   One column. The 20rem rail this replaces spent a fifth of the page on four
   links to neighbouring entries, and pushed the record — the reason the page
   exists — into 80% of the width on desktop and to the bottom of the document
   on a phone. The neighbours are a row at the foot now. */
.dos-body { padding-block: var(--ta-sp-8) var(--ta-sp-16); }

/* A section is a heading ON the page and a surface UNDER it, not one white box
   containing both. Every section being an identical card made the page a stack
   of four indistinguishable rectangles; lifting the headings onto the page
   surface gives the document a spine you can see from a scroll thumbnail.
   brokers/partials/reviews.blade.php uses these names too. */
.dos-sect + .dos-sect { margin-top: var(--ta-sp-12); }
/* A real heading, at heading size, in ink. It was 11px uppercase grey, which
   is a label — and a page whose every section is introduced by a label reads
   as a form to be completed rather than a record to be read. */
.dos-sect-hdr {
    display: flex; align-items: baseline; gap: var(--ta-sp-4); flex-wrap: wrap;
    margin: 0 0 var(--ta-sp-4);
    font-size: var(--ta-fs-sect);
    font-weight: var(--ta-fw-semibold); color: var(--ta-ink);
    line-height: var(--ta-lh-comp);
    letter-spacing: var(--ta-ls-tight);
}
.dos-sect-hdr i { display: none; }
/* The line a section header can carry on its right: the reviews average, the
   licence count, how the neighbours were chosen. A sentence beside a heading,
   so it steps back to support size and quiet ink rather than competing. */
.dos-sect-gloss {
    margin-left: auto;
    font-size: var(--ta-fs-data); font-weight: var(--ta-fw-normal);
    letter-spacing: 0; color: var(--ta-ink-3);
}
/* The card the data sits in, now that the heading is outside it. */
.dos-surface {
    background: var(--ta-surface-2);
    border: 1px solid var(--ta-rule-2);
    border-radius: var(--ta-radius);
    padding: var(--ta-sp-6);
}

/* ── Fields ──
   A grid of named cells, not a 9.5rem label column with one fact per row.
   Vertical rows were the single biggest thing making this page a filing: for a
   firm holding four registers the record ran to six screens, nearly all of it
   whitespace to the right of a short value. The same facts, in the same words,
   laid across the measure instead of down it. */
.dos-fields {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--ta-sp-5) var(--ta-sp-6);
}
/* Chip lists take the whole row: a dozen permissions inside a 13rem cell is a
   column of single words. */
.dos-field.is-wide { grid-column: 1 / -1; }
.dos-fld-lbl {
    font-size: var(--ta-fs-data);
    font-weight: var(--ta-fw-normal); color: var(--ta-ink-3);
    margin-bottom: var(--ta-sp-1);
}
/* No pictogram beside every label: thirteen icons is noise, not guidance. */
.dos-fld-val {
    font-size: var(--ta-fs-support); line-height: var(--ta-lh-body);
    color: var(--ta-ink); max-width: var(--ta-measure);
    overflow-wrap: anywhere;
}
/* One link style on the page: the accent, underlined on hover, never bare blue
   text that could be mistaken for emphasis. */
.dos-fld-val a { color: var(--ta-brand); text-decoration: none; }
.dos-fld-val a:hover { color: var(--ta-brand-strong); text-decoration: underline; text-underline-offset: 2px; }
.dos-ext { font-size: var(--ta-fs-micro); margin-left: var(--ta-sp-1); }

/* Grouped fields. Nine flat rows made a reader read all nine to find the
   phone number; four named groups let them jump. */
.dos-grp + .dos-grp { margin-top: var(--ta-sp-6); }
/* A step above the field keys in both ink and size, or the two levels read
   as one list of fourteen labels again. */
/* Neutral, deliberately — not --dos-ink. These labels used to take the owning
   licence's jurisdiction hue, which meant four tinted headings plus four tinted
   rules per licence, and a broker holding five licences painted twenty coloured
   lines down the page. That is the same defect as a tinted card background in
   the index: it stripes. The hue stays on the one line that answers "who
   licenses them" — .dos-lic-reg, directly above — and nowhere else in the card.
   See docs/design/tokens.md, jurisdiction inks. */
.dos-grp-lbl {
    padding-bottom: var(--ta-sp-2);
    border-bottom: 1px solid var(--ta-rule);
    font-size: var(--ta-fs-support);
    font-weight: var(--ta-fw-semibold); color: var(--ta-ink);
}

/* ── Licences ──
   A tab strip and one panel, rather than four stacked cards. Four filings down
   a page is a document a reader gives up on; four tabs is a question they can
   answer — "which register do I care about?" — and each tab carries its own
   ink and its own status, so the answer is visible before the click.
   With no script every panel is on the page and the strip is a jump list. */
.dos-lic-tabs {
    display: flex; gap: var(--ta-sp-2);
    margin-bottom: var(--ta-sp-4);
    overflow-x: auto; scrollbar-width: none;
}
.dos-lic-tabs::-webkit-scrollbar { display: none; }
.dos-lic-tab {
    flex: none; display: flex; flex-direction: column; gap: 2px;
    padding: var(--ta-sp-3) var(--ta-sp-4);
    border: 1px solid var(--ta-rule-2);
    /* The register's own hue on the top edge, so the strip reads as five
       filings rather than five buttons — and so the selected tab and the panel
       heading under it are the same colour. */
    border-top: 3px solid var(--dos-ink, var(--ta-rule-strong));
    border-radius: var(--ta-radius);
    background: var(--ta-surface-2);
    text-decoration: none; white-space: nowrap;
    transition: background var(--ta-motion) var(--ta-motion-ease),
                border-color var(--ta-motion) var(--ta-motion-ease);
}
.dos-lic-tab:hover { background: var(--ta-surface-3); }
/* Selected is carried by fill and by weight, not by the jurisdiction hue —
   that hue is already spent naming the register and cannot also mean "open". */
.dos-lic-tab[aria-selected="true"] {
    background: var(--ta-surface-2);
    border-color: var(--ta-rule-strong);
    border-top-color: var(--dos-ink, var(--ta-ink));
    box-shadow: inset 0 0 0 1px var(--ta-rule-strong);
}
.dos-lic-tab-nm {
    font-size: var(--ta-fs-support);
    font-weight: var(--ta-fw-medium); color: var(--ta-ink-3);
}
.dos-lic-tab[aria-selected="true"] .dos-lic-tab-nm { color: var(--ta-ink); font-weight: var(--ta-fw-semibold); }
/* The status glyph and word, at label size, under the register's name: the
   one thing a reader wants from a tab they have not opened yet. */
.dos-lic-tab-st {
    display: inline-flex; align-items: center; gap: var(--ta-sp-2);
    font-size: var(--ta-fs-micro); font-weight: var(--ta-fw-medium);
}
.dos-lic-tab-st[data-state="force"] { color: var(--ta-st-force); }
.dos-lic-tab-st[data-state="wind"]  { color: var(--ta-st-wind); }
.dos-lic-tab-st[data-state="gone"]  { color: var(--ta-st-gone); }
.dos-lic-tab-st[data-state="force"] .dos-mark { background: currentColor; }
.dos-lic-tab-st[data-state="wind"] .dos-mark {
    background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}

/* The panel is the surface, so a single-licence broker gets one clean card and
   a multi-licence one gets the same card with a strip above it. */
.dos-lic-panel {
    background: var(--ta-surface-2);
    border: 1px solid var(--ta-rule-2);
    border-radius: var(--ta-radius);
    padding: var(--ta-sp-6);
}
/* Only reachable with scripting off, where every panel prints in sequence. */
.dos-lic-panel + .dos-lic-panel { margin-top: var(--ta-sp-4); }

.dos-lic-hdr {
    display: flex; align-items: baseline; gap: var(--ta-sp-3); flex-wrap: wrap;
    padding-bottom: var(--ta-sp-3);
}
/* The card's title, and the loudest place the jurisdiction ink is used —
   this is the one line on the page that answers "who licenses them". Left
   in --ta-ink it was the fourth identically-black heading down the page.
   Set in the register's own hue it becomes the card's index tab, and a
   broker holding five licences reads as five distinct filings rather than
   one long list. Underlined at rest because it is a link and the hue alone
   measures 1.3–2.9:1 against the ink beside it. */
.dos-lic-reg {
    font-size: var(--ta-fs-card);
    font-weight: var(--ta-fw-semibold); line-height: var(--ta-lh-comp);
    color: var(--dos-ink, var(--ta-ink));
    text-decoration: underline; text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    /* A faded pass of the hue itself. At this size a full-strength underline
       reads as a strike through the descenders, but the neutral rule ink is
       warm, so under a teal or fuchsia title it showed as a stray tan line
       in the light theme and vanished entirely in the dark one. Mixing down
       currentColor is correct in both, and the fallback loses only the
       fade. */
    text-decoration-color: var(--ta-rule-2);
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    transition: text-decoration-color var(--ta-motion) var(--ta-motion-ease);
}
.dos-lic-reg i { display: none; }
.dos-lic-reg:hover { text-decoration-color: currentColor; }
.dos-lic-ref {
    font-size: var(--ta-fs-data);
    color: var(--ta-ink-3);
}
/* Status carries a word, a drawn shape and a tint — three channels, so it
   survives a colourblind reader and a greyscale print. Down to the hairline:
   the border in the state's own ink is what turns a tint into something
   applied to the filing, and each
   of the three clears 3:1 off the surface so the pill's own boundary is
   perceivable without reading the fill (SC 1.4.11). Kept a tint rather than
   a saturated block — this page carries up to five of them. */
.dos-lic-status {
    display: inline-flex; align-items: center; gap: var(--ta-sp-2);
    margin-left: auto;
    /* 1px off each side pays for the border, so the pill's box is unchanged
       and it still sits on the header's baseline row. */
    padding: calc(var(--ta-sp-1) - 1px) calc(var(--ta-sp-2) - 1px);
    border: 1px solid transparent; border-radius: var(--ta-radius-sm);
    white-space: nowrap;
    font-size: var(--ta-fs-micro);
    font-weight: var(--ta-fw-medium);
}
/* Round, 9px, 1.5px stroke — the index's glyph exactly. It was a 8px square
   with a 1px stroke here, which is a different mark for the same fact. */
.dos-mark {
    flex: 0 0 auto; width: 9px; height: 9px;
    border: 1.5px solid currentColor; border-radius: var(--ta-radius-round);
}
.dos-lic-status[data-state="force"] {
    color: var(--ta-st-force); background: var(--ta-st-force-bg);
    border-color: var(--ta-st-force-bd);
}
/* In force — solid. */
.dos-lic-status[data-state="force"] .dos-mark { background: currentColor; }
.dos-lic-status[data-state="wind"] {
    color: var(--ta-st-wind); background: var(--ta-st-wind-bg);
    border-color: var(--ta-st-wind-bd);
}
/* Surrendering — half. A shape difference, legible with no colour vision. */
.dos-lic-status[data-state="wind"] .dos-mark {
    background: linear-gradient(to right, currentColor 0 50%, transparent 50% 100%);
}
/* Withdrawn — hollow, and its hairline is the neutral rule ink rather than a
   hue. Not red: an expired licence is an absence, not an error. */
.dos-lic-status[data-state="gone"] {
    color: var(--ta-st-gone); background: var(--ta-st-gone-bg);
    border-color: var(--ta-st-gone-bd);
}

/* The register's own wording. A rule in the margin is enough to mark the
   exception — a tinted box made every wind-down look like a warning.
   The rule takes the licence's OWN state, not amber always: a withdrawn
   licence was quoting "Withdrawn" behind an amber rule while the pill two
   inches away was neutral, so the page gave one fact two different states. */
.dos-lic-note {
    margin: 0 0 var(--ta-sp-3); padding-left: var(--ta-sp-3);
    border-left: 2px solid var(--ta-st-wind);
    font-size: var(--ta-fs-support); line-height: var(--ta-lh-body);
    color: var(--ta-ink); max-width: var(--ta-measure);
}
.dos-lic-note[data-state="gone"]  { border-left-color: var(--ta-st-gone-bd); }
.dos-lic-note[data-state="force"] { border-left-color: var(--ta-st-force-bd); }
.dos-lic-note i { display: none; }

/* Permissions are facts, not filters: chips that do not pretend to click.
   This is the largest single area of the page — a licence can list thirty of
   them — so on warm --ta-surface-2 it was also the largest grey block, and the
   one that made the profile look flat next to the listing.
   Tinted from the licence's own hue instead, at a tenth strength, the whole
   permissions block becomes that register's colour and the card reads as one
   document. The label deliberately stays --ta-ink-2 and is NOT inked: thirty
   saturated words is a colour swatch, which is the same failure already caught
   and reverted on the hero's regulator field. One large quiet wash beats thirty
   small loud marks. Measured on the tint, floor across all five hues: 7.61:1
   light, 9.69:1 dark. The hairline is decoration around static text, not a
   control boundary, so its 2.47:1 floor owes nothing under SC 1.4.11. */
.dos-chips { display: flex; flex-wrap: wrap; gap: var(--ta-sp-2); }
/* Mixed into --ta-surface-2, not --ta-surface: the section around them is a
   card now, so the base the tint is computed against is the card's stock. */
.dos-chip {
    padding: 2px var(--ta-sp-2);
    border: 1px solid var(--ta-rule-2); border-radius: var(--ta-radius-sm);
    border-color: color-mix(in srgb, var(--dos-ink, var(--ta-rule-strong)) 40%, var(--ta-surface-2));
    background: var(--ta-surface-3);
    background: color-mix(in srgb, var(--dos-ink, var(--ta-ink-3)) 10%, var(--ta-surface-2));
    font-size: var(--ta-fs-data);
    line-height: var(--ta-lh-body); color: var(--ta-ink-2);
}

/* ── About ── */
.dos-about-body {
    font-family: var(--ta-sans); font-size: var(--ta-fs-lead);
    color: var(--ta-ink); line-height: var(--ta-lh-body);
    max-width: var(--ta-measure);
}
/* The fold is added by script and only when there is something to fold, so the
   markup ships open: no JavaScript means the whole description, not a stub. */
.dos-about.is-clamped .dos-about-body {
    /* Six lines at the body line-height, cut on a line rather than mid-glyph. */
    max-height: calc(var(--ta-lh-body) * 6em);
    overflow: hidden;
}
.dos-about-more {
    margin-top: var(--ta-sp-3); padding: 0;
    background: none; border: 0;
    font: inherit; font-size: var(--ta-fs-support);
    font-weight: var(--ta-fw-medium);
    color: var(--ta-brand); cursor: pointer;
}
.dos-about-more:hover { color: var(--ta-brand-strong); text-decoration: underline; text-underline-offset: 2px; }

/* ── Verification ──
   The last line of a licence panel: the link back to the register the panel
   was transcribed from. It was a `Verification | link` row among a dozen other
   rows, which buried the one field on the card a reader can act on. Given the
   full width of the panel and the register's own ink on its left edge, it
   closes the filing the way the filing should close. */
.dos-verify {
    display: flex; align-items: baseline; gap: var(--ta-sp-3); flex-wrap: wrap;
    margin-top: var(--ta-sp-5);
    padding: var(--ta-sp-3) var(--ta-sp-4);
    border: 1px solid var(--ta-rule-2);
    border-left: 3px solid var(--dos-ink, var(--ta-rule-strong));
    border-radius: var(--ta-radius);
    background: var(--ta-surface-3);
    background: color-mix(in srgb, var(--dos-ink, var(--ta-ink-3)) 6%, var(--ta-surface-2));
    text-decoration: none;
    transition: background var(--ta-motion) var(--ta-motion-ease);
}
.dos-verify:hover {
    background: color-mix(in srgb, var(--dos-ink, var(--ta-ink-3)) 14%, var(--ta-surface-2));
}
.dos-verify-lbl {
    flex: none;
    font-size: var(--ta-fs-data); color: var(--ta-ink-3);
}
.dos-verify-txt {
    font-size: var(--ta-fs-support);
    font-weight: var(--ta-fw-medium); color: var(--ta-brand);
}
.dos-verify:hover .dos-verify-txt { text-decoration: underline; text-underline-offset: 2px; }

.dos-btn {
    display: flex; align-items: center; justify-content: center; gap: var(--ta-sp-2);
    min-height: var(--ta-control-h); padding-inline: var(--ta-sp-4);
    border: 1px solid transparent; border-radius: var(--ta-radius);
    text-decoration: none;
    font-size: var(--ta-fs-body);
    font-weight: var(--ta-fw-medium);
    transition: background var(--ta-motion) var(--ta-motion-ease),
                color var(--ta-motion) var(--ta-motion-ease);
}
/* The one filled element on the page, and the only weight it comes in: a
   site we cannot vouch for is not linked at all, so there is no demoted
   variant left to draw. */
.dos-btn-prime { background: var(--ta-brand); color: var(--ta-brand-on); }
.dos-btn-prime:hover { background: var(--ta-brand-strong); color: var(--ta-brand-on); }
.dos-site {
    margin-top: var(--ta-sp-2); text-align: center;
    font-size: var(--ta-fs-data);
    color: var(--ta-ink-3); word-break: break-all;
}
/* The warning sits with the one control that leaves for a broker, because
   that is the moment it is about. Short here — the full statement is in the
   strip at the top of the page and in the footnotes. */
.dos-cta-note {
    margin-top: var(--ta-sp-3);
    font-size: var(--ta-fs-micro); line-height: var(--ta-lh-body);
    color: var(--ta-ink-2);
}
/* Neighbouring entries, at the foot rather than in a rail. They were a
   20rem-wide stack of four rows holding a fifth of every screen for the whole
   length of the page — a lot of furniture for four links a reader wants after
   they have finished reading, not before. As a row of cards across the foot
   they cost nothing above the fold and read as what they are: the next entry
   to open. The logo needs no extra query: neighbours() returns whole Broker
   models, so logo_path and initials are already in hand. */
.dos-rel {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--ta-sp-3);
}
.dos-rel-card {
    display: flex; align-items: center; gap: var(--ta-sp-3);
    padding: var(--ta-sp-4);
    border: 1px solid var(--ta-rule-2); border-radius: var(--ta-radius);
    background: var(--ta-surface-2);
    font-size: var(--ta-fs-body);
    color: var(--ta-ink); text-decoration: none;
    transition: background var(--ta-motion) var(--ta-motion-ease),
                border-color var(--ta-motion) var(--ta-motion-ease);
}
.dos-rel-card:hover {
    background: var(--ta-surface-3);
    border-color: var(--ta-rule-strong);
    color: var(--ta-brand);
}
/* The index's own tile at the index's own size — a reader who arrived from
   the listing spent it scanning exactly this mark-then-name pairing. Plate
   tokens included; see .ldg-plate for why the plate cannot follow the theme. */
.dos-rel-tile {
    flex: 0 0 auto;
    width: var(--ta-sp-8); height: var(--ta-sp-8);
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--ta-rule-2); border-radius: var(--ta-radius-sm);
    background: var(--ta-surface-3); overflow: hidden;
    font-size: var(--ta-fs-micro);
    font-weight: var(--ta-fw-semibold); color: var(--ta-ink-3);
}
.dos-rel-tile.has-logo { background: var(--ta-plate); padding: 2px; }
.dos-rel-tile.has-logo.is-light-ink { background: var(--ta-plate-ink); }
.dos-rel-tile img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.dos-rel-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dos-back {
    font-size: var(--ta-fs-data);
    color: var(--ta-brand);
    text-decoration: underline; text-underline-offset: 2px;
}
.dos-back:hover { color: var(--ta-brand-strong); text-decoration: underline; text-underline-offset: 2px; }

/* ── Reviews ──
   Reader opinion, kept visibly separate from register fact: every claim is
   attributed, and the section takes no JURISDICTION hue — the five register
   inks stop at the licence cards, because nothing here came off a register.
   What it takes instead is the accent. On this page the colours already mean
   something: a jurisdiction hue means "a regulator said this", green means
   "licence in force", amber means "licence being surrendered", and the accent
   means "Trade-Advise is speaking". Reader reviews are the one part of the
   page in that last category, so the accent is the only colour they may
   have — and the only one that can never be misread as a regulatory state.
   It is deliberately NOT the conventional amber for stars: five reader stars
   must not use the ink that means a licence is being surrendered. */
.dos-rev { margin-top: var(--ta-sp-8); }
.dos-rev-flash {
    display: flex; gap: var(--ta-sp-3); align-items: flex-start;
    margin-bottom: var(--ta-sp-5); padding-left: var(--ta-sp-3);
    border-left: 2px solid var(--ta-st-force);
    font-size: var(--ta-fs-support); line-height: var(--ta-lh-body); color: var(--ta-ink);
}
.dos-rev-flash i { color: var(--ta-st-force); font-size: var(--ta-fs-body); }
.dos-rev-flash.is-error { border-left-color: var(--ta-st-wind); }
.dos-rev-flash.is-error i { color: var(--ta-st-wind); }

/* Score panel: the average, then the histogram that stops one 5-star
   review from reading like a consensus. */
.dos-score {
    display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0 var(--ta-sp-5);
    padding-bottom: var(--ta-sp-5); border-bottom: 1px solid var(--ta-rule-2);
}
.dos-score-avg { padding-top: var(--ta-sp-1); }
.dos-score-num { font-size: var(--ta-fs-display); font-weight: var(--ta-fw-semibold); line-height: var(--ta-lh-display); color: var(--ta-ink); }
.dos-score-of { font-size: var(--ta-fs-data); color: var(--ta-ink-3); margin-top: var(--ta-sp-1); }
.dos-score-bars { padding-top: var(--ta-sp-1); display: flex; flex-direction: column; gap: var(--ta-sp-1); max-width: 20rem; }
.dos-bar-row { display: grid; grid-template-columns: 2.25rem 1fr 1.75rem; align-items: center; gap: var(--ta-sp-3); }
.dos-bar-lbl { font-size: var(--ta-fs-data); color: var(--ta-ink-3); }
.dos-bar-track { height: 6px; background: var(--ta-surface-3); border-radius: var(--ta-radius-round); overflow: hidden; }
/* The accent, not grey ink. Five grey bars on a grey track is the one chart on
   the page and it was reading as a loading state. 6.95:1 light / 8.11:1 dark
   against the track, so the filled part of each bar is unmistakable. */
.dos-bar-fill { height: 100%; background: var(--ta-brand); }
.dos-bar-ct { font-size: var(--ta-fs-data); color: var(--ta-ink-3); text-align: right; }

/* 8.50:1 light / 9.90:1 dark on the surface. Filled against unfilled is only
   2.12:1, which is fine and is the reason the unfilled star keeps its own ink
   rather than going pale: the ★/☆ glyph difference is what carries the rating,
   colour only makes the filled run easier to count. */
.dos-stars { color: var(--ta-brand); font-size: var(--ta-fs-support); letter-spacing: 1px; white-space: nowrap; }
.dos-stars .is-off { color: var(--ta-rule-strong); }

/* One review */
.dos-rev-item { padding-block: var(--ta-sp-5); border-bottom: 1px solid var(--ta-rule); }
.dos-rev-item:last-child { border-bottom: none; }
.dos-rev-head { display: flex; align-items: center; gap: var(--ta-sp-3); flex-wrap: wrap; }
.dos-rev-by { font-size: var(--ta-fs-data); color: var(--ta-ink-3); }
/* Was --ta-st-force, i.e. the exact green the licence pill uses for IN FORCE,
   four inches up the same page. That is the conflation the form's own copy
   exists to prevent — "'Verified' means a registered account, never a
   confirmed trading account" — and a green word beside a green licence stamp
   says the opposite. It is not the accent either: the accent is a link on this
   page and a blue word inside a byline invites a click that goes nowhere.
   So it earns a step of ink weight instead of a hue: 9.05:1 light against the
   byline's 6.28, 12.02 against 5.97 dark. */
.dos-rev-verified { color: var(--ta-ink-2); font-weight: var(--ta-fw-medium); }
.dos-rev-title { font-size: var(--ta-fs-support); font-weight: var(--ta-fw-semibold); color: var(--ta-ink); margin: var(--ta-sp-2) 0 var(--ta-sp-1); }
.dos-rev-body { font-size: var(--ta-fs-support); line-height: var(--ta-lh-body); color: var(--ta-ink); max-width: var(--ta-measure); }
.dos-rev-report {
    margin-top: var(--ta-sp-2); background: none; border: none; padding: 0;
    font-family: inherit; font-size: var(--ta-fs-data); color: var(--ta-ink-3);
    cursor: pointer;
}
.dos-rev-report:hover { color: var(--ta-brand); }
/* Your own review: edit sits next to delete, so the row is one line. */
.dos-rev-own { display: flex; align-items: center; gap: var(--ta-sp-4); }
a.dos-rev-report { text-decoration: none; display: inline-block; }
a.dos-rev-report:hover { color: var(--ta-brand); text-decoration: underline; text-underline-offset: 2px; }

.dos-rev-empty { padding-block: var(--ta-sp-6); }
.dos-rev-empty-t { font-size: var(--ta-fs-card); font-weight: var(--ta-fw-semibold); color: var(--ta-ink); }
.dos-rev-empty-s { font-size: var(--ta-fs-support); color: var(--ta-ink-3); margin-top: var(--ta-sp-1); }

/* Form. Closed, the summary is the only thing to do in this section, so it
   is drawn as a control; open, the fields are the affordance and the
   summary steps back to a label. */
.dos-rev-form { padding-top: var(--ta-sp-5); border-top: 1px solid var(--ta-rule-2); }
.dos-rev-form summary {
    cursor: pointer; display: inline-block;
    min-height: var(--ta-control-h); padding: var(--ta-sp-3) var(--ta-sp-4);
    border: 1px solid var(--ta-brand); border-radius: var(--ta-radius);
    font-size: var(--ta-fs-body);
    font-weight: var(--ta-fw-medium); color: var(--ta-brand);
    list-style: none;
    transition: background var(--ta-motion) var(--ta-motion-ease),
                color var(--ta-motion) var(--ta-motion-ease);
}
.dos-rev-form summary:hover { background: var(--ta-brand); color: var(--ta-brand-on); }
.dos-rev-form summary::-webkit-details-marker { display: none; }
.dos-rev-form[open] summary {
    min-height: 0; padding: 0; border-color: transparent; background: none;
    color: var(--ta-ink-3);
}
.dos-rev-form[open] summary:hover { background: none; color: var(--ta-ink-2); }
.dos-rev-form[open] summary::before { content: '\2212\00a0'; }
.dos-rev-fields { margin-top: var(--ta-sp-4); display: flex; flex-direction: column; gap: var(--ta-sp-4); }
/* The edit form opens inside an existing review rather than under a summary, so
   it supplies its own gap from the byline above it. */
.dos-rev-fields.is-inline { margin-top: var(--ta-sp-3); }
/* Cancel beside Save. --ta-sp-4, replacing an inline `margin-left: 14px`. */
.dos-rev-cancel { margin-left: var(--ta-sp-4); }
.dos-lbl {
    display: block; font-size: var(--ta-fs-data);
    font-weight: var(--ta-fw-medium); color: var(--ta-ink-2);
    margin-bottom: var(--ta-sp-1);
}
.dos-hint {
    font-size: var(--ta-fs-data);
    color: var(--ta-ink-3); margin-top: var(--ta-sp-1); line-height: var(--ta-lh-body);
}
.dos-rev-remember label {
    display: flex; align-items: baseline; gap: var(--ta-sp-2); cursor: pointer;
    font-size: var(--ta-fs-data); color: var(--ta-ink-2);
}
.dos-rev-remember input { accent-color: var(--ta-brand); margin: 0; flex: none; }
/* Signed-in identity: shown, not editable, so it reads as a statement. */
.dos-rev-as { font-size: var(--ta-fs-data); color: var(--ta-ink); }
.dos-rev-as span { color: var(--ta-ink-3); }
/* The anonymity checkbox sits under the identity it overrides, so it needs a
   step away from it. Was an inline `margin-top: 10px` — a value from no scale;
   this is --ta-sp-3, the nearest step, and it only appears in the one place the
   two elements are adjacent. */
.dos-rev-as + label { margin-top: var(--ta-sp-3); }
/* Registration wall. It stands where the form would and carries the same
   outlined control, so a guest meets the same affordance a member does.
   Set on the accent tint, which is the same band as the filing header and the
   index's masthead: with one user on the site almost every reader sees this
   block, and as plain text on paper it was the largest dead area on the page
   and read as small print rather than as an invitation. Tinted, it is the site
   asking for something — which is exactly what it is — and the tint is the
   page's established mark for "Trade-Advise speaking".
   A band, not a card: no radius, no shadow, no border. Contrast on the tint —
   title 15.75 light / 13.96 dark, body 8.05 / 10.30, the outlined control
   7.56 / 8.48, all well past 4.5:1. */
.dos-rev-gate {
    margin-top: var(--ta-sp-5);
    padding: var(--ta-sp-5);
    border: 1px solid var(--ta-brand);
    border-color: color-mix(in srgb, var(--ta-brand) 35%, var(--ta-brand-soft));
    border-radius: var(--ta-radius);
    background: var(--ta-brand-soft);
}
.dos-rev-gate-t { font-size: var(--ta-fs-card); font-weight: var(--ta-fw-semibold); color: var(--ta-ink); }
.dos-rev-gate-s {
    font-size: var(--ta-fs-support);
    color: var(--ta-ink-2); line-height: var(--ta-lh-body);
    margin-top: var(--ta-sp-2); max-width: var(--ta-measure);
}
.dos-rev-gate-a { display: flex; align-items: center; gap: var(--ta-sp-5); margin-top: var(--ta-sp-4); flex-wrap: wrap; }
.dos-rev-gate-btn {
    display: inline-flex; align-items: center;
    min-height: var(--ta-control-h); padding-inline: var(--ta-sp-4);
    border: 1px solid var(--ta-brand); border-radius: var(--ta-radius);
    font-size: var(--ta-fs-body);
    font-weight: var(--ta-fw-medium); color: var(--ta-brand);
    text-decoration: none;
    transition: background var(--ta-motion) var(--ta-motion-ease),
                color var(--ta-motion) var(--ta-motion-ease);
}
.dos-rev-gate-btn:hover { background: var(--ta-brand); color: var(--ta-brand-on); }
.dos-rev-gate-alt { font-size: var(--ta-fs-data); color: var(--ta-ink-2); }
/* Radios styled as stars. The inputs stay real so the control is
   keyboard-operable; the stars sit 5→1 in the DOM and are reversed
   visually, which is what lets "checked plus later siblings" fill
   downwards from the chosen rating. */
.dos-rate { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: var(--ta-sp-1); }
.dos-rate input { position: absolute; opacity: 0; width: 0; height: 0; }
.dos-rate label {
    cursor: pointer; font-size: var(--ta-fs-sub); color: var(--ta-rule-strong);
    line-height: var(--ta-lh-display);
    transition: color var(--ta-motion) var(--ta-motion-ease);
}
/* The same accent the published stars use. Filling the control in ink while
   every star already on the page was blue meant the reader picked one colour
   and got another. */
.dos-rate input:checked + label,
.dos-rate input:checked + label ~ label { color: var(--ta-brand); }
.dos-rate input:focus-visible + label {
    outline: var(--ta-focus-width) solid var(--ta-focus);
    outline-offset: var(--ta-focus-offset);
}
.dos-rev-hp { position: absolute; left: -9999px; }

/* ── Footnotes ── */
.dos-foot {
    margin-top: var(--ta-sp-10); padding-top: var(--ta-sp-4);
    border-top: 1px solid var(--ta-rule-2);
}
.dos-disc {
    font-size: var(--ta-fs-data);
    color: var(--ta-ink-2); line-height: var(--ta-lh-body);
    max-width: 90ch;
}
.dos-disc strong { font-weight: var(--ta-fw-medium); color: var(--ta-ink-2); }
.dos-disc + .dos-disc { margin-top: var(--ta-sp-3); }
.dos-report {
    display: inline-block; margin-top: var(--ta-sp-4);
    font-size: var(--ta-fs-data);
    color: var(--ta-brand);
    text-decoration: underline; text-underline-offset: 2px;
}
.dos-report:hover { color: var(--ta-brand-strong); text-decoration: underline; text-underline-offset: 2px; }

/* ═══ RESPONSIVE ═══ */
/* The CTA stops being a column of its own before the identity row breaks, so
   the button gets the full measure rather than a 15rem gutter beside a
   squeezed name. */
@media (max-width: 900px) {
    .dos-head { grid-template-columns: minmax(0, 1fr); }
    .dos-cta { justify-self: stretch; width: 100%; }
    .dos-site, .dos-cta-note { text-align: left; }
}
@media (max-width: 768px) {
    /* Logo above the name rather than beside it, but the plate stays square. */
    .dos-identity { flex-direction: column; align-items: flex-start; gap: var(--ta-sp-4); }
    .dos-name { font-size: var(--ta-fs-sect); }
    .dos-mono { width: 4rem; height: 4rem; font-size: var(--ta-fs-card); }
    .dos-mono.is-wordmark { width: 100%; max-width: 14rem; height: 3.25rem; }
    /* Two-up: the labels are short and a single column made the band four
       screens tall before the reader reached the record. */
    .dos-stats-inner {
        grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
        gap: var(--ta-sp-4) var(--ta-sp-5);
    }
    /* One step down from the desktop --ta-fs-sect: still the loudest thing in
       the band, but two of these per row must not wrap a date onto two lines. */
    .dos-fact-val { font-size: var(--ta-fs-card); }
    /* The tabs already scroll; the compact CTA would eat half that width. */
    .dos-nav-cta { display: none; }
    .dos-nav-list { gap: var(--ta-sp-5); }
    /* One field per row. auto-fit at 13rem would still fit two on a 390px
       screen, and a legal entity name has nowhere to go in half of that. */
    .dos-fields { grid-template-columns: minmax(0, 1fr); gap: var(--ta-sp-4); }
    .dos-score { grid-template-columns: minmax(0, 1fr); }
    /* Cards on a phone are gutters wrapped around a gutter. */
    .dos-surface, .dos-lic-panel { padding: var(--ta-sp-4); }
    .dos-lic-tab { padding: var(--ta-sp-2) var(--ta-sp-3); }
    /* Two neighbours abreast at 13rem would each be 40 characters wide. */
    .dos-rel { grid-template-columns: minmax(0, 1fr); }
}


/* ═══ PRINT ═══
   A register entry is a thing people print and file. Everything that only
   works on screen comes off, and every link prints its destination. */
@media print {
    .dossier { color: #000; }
    .dos-hero, .dos-lic-status, .dos-chip, .dos-trust-jur { background: transparent !important; }
    /* Tabs are navigation for a scrolling screen; on paper every section is
       already there. The CTA prints its destination via .dos-site below it. */
    /* The licence tabs are a way of showing one panel at a time on a screen
       that only has room for one. Paper has every page it needs, so the strip
       comes off and every panel prints — including the ones script hid. */
    .dos-nav, .dos-cta .dos-btn, .dos-lic-tabs,
    .dos-rev-form, .dos-rev-gate, .dos-rev-report, .dos-report { display: none !important; }
    .dos-lic-panel[hidden] { display: block !important; }
    /* Nothing on paper can be folded, so the description prints whole. */
    .dos-about.is-clamped .dos-about-body { max-height: none; overflow: visible; }
    .dos-about-more { display: none !important; }
    .dos-sect { break-inside: avoid; }
    .dos-lic-panel { break-inside: avoid; }
    .dos-fld-val a[href^="http"]::after,
    .dos-fld-val a[href^="mailto:"]::after,
    .dos-fld-val a[href^="tel:"]::after,
    .dos-verify::after {
        content: ' (' attr(href) ')';
        font-size: var(--ta-fs-micro);
    }
    .dos-ext { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   3. SHARED
   ══════════════════════════════════════════════════════════════════════════ */

/* The only rule the two views ever stated twice. Both roots are named so the
   declaration stays scoped to the register rather than becoming a site-wide
   reset. Last in the file, so it wins over anything above it. */
@media (prefers-reduced-motion: reduce) {
    .ledger *, .ledger *::before, .ledger *::after,
    .dossier *, .dossier *::before, .dossier *::after {
        transition-duration: 0ms !important;
    }
}