@font-face{font-family:"Public Sans";font-style:normal;font-weight:400 700;
 font-display:swap;src:url(/fonts/PublicSans-Variable.woff2) format("woff2")}

body{margin:0;background:#f6f7f9;color:#14181f;
 font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
.wrap{max-width:660px;margin:0 auto;background:#fff;padding:32px 28px}
h1{font-size:23px;line-height:1.25;margin:0 0 4px;letter-spacing:-.02em}
h2{font-size:13px;text-transform:uppercase;letter-spacing:.09em;color:#6b7280;
 margin:34px 0 14px;padding-bottom:7px;border-bottom:1px solid #e5e7eb}
h3{font-size:17px;margin:0 0 5px;line-height:1.3}
p{margin:0 0 13px}
a{color:#1b4dd8}
.kicker{font-size:12px;text-transform:uppercase;letter-spacing:.11em;color:#8a93a0;margin:0 0 18px}
.lede{font-size:16px;color:#374151;border-left:3px solid #14181f;padding-left:14px;margin:0 0 8px}
.stats{width:100%;border-collapse:collapse;margin:18px 0 6px}
.stats td{padding:11px 12px;border:1px solid #e5e7eb;font-size:14px;width:50%}
.stats .n{font-size:21px;font-weight:650;display:block;letter-spacing:-.02em}
.stats .k{color:#6b7280;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.deal{border:1px solid #e5e7eb;padding:16px 17px;margin:0 0 13px}
.deal.top{border-color:#14181f;border-width:2px}
.meta{font-size:13px;color:#6b7280;margin:0 0 9px}
.figs{font-size:14px;margin:0 0 9px}
.figs b{font-variant-numeric:tabular-nums}
.desc{font-size:14px;color:#4b5563;margin:0 0 10px}
.credits{font-size:13px;color:#14181f;background:#f3f4f6;padding:8px 10px;margin:0 0 10px}
.cite{font-size:12px;color:#6b7280;margin:0}
.tag{display:inline-block;font-size:11px;background:#eef1f5;color:#374151;
 padding:3px 7px;margin:0 4px 4px 0;letter-spacing:.01em}
.event{float:right;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#6b7280}
table.rows{width:100%;border-collapse:collapse;font-size:13px;margin:0 0 8px}
table.rows th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
 color:#6b7280;border-bottom:1px solid #e5e7eb;padding:7px 8px;font-weight:600}
table.rows td{border-bottom:1px solid #f1f2f4;padding:8px;vertical-align:top}
.corr{margin:0 0 13px;padding-left:20px;font-size:14px;color:#4b5563}
.corr li{margin:0 0 6px}
.corrnote{border-left:3px solid #b45309;background:#fffbeb;padding:13px 15px;
 margin:22px 0 0;font-size:14px;color:#4b5563}
.corrnote .k{display:block;font-size:11px;text-transform:uppercase;
 letter-spacing:.08em;color:#b45309;font-weight:650;margin:0 0 7px}
.corrnote ul{margin:0;padding-left:19px}
.corrnote li{margin:0 0 5px}
.gate{border:2px dashed #c9ced6;padding:22px;margin:22px 0}
.gate .big{font-size:19px;font-weight:650;margin:0 0 8px;letter-spacing:-.01em}
.gate p{font-size:14px;color:#4b5563;margin:0 0 15px}
.gate ul{margin:0 0 16px;padding-left:20px;font-size:14px;color:#374151}
.gate li{margin:0 0 5px}
.btn{display:inline-block;background:#14181f;color:#fff!important;text-decoration:none;
 padding:12px 26px;font-weight:600;font-size:15px}
.foot{margin-top:34px;padding-top:16px;border-top:1px solid #e5e7eb;
 font-size:12px;color:#8a93a0}
.foot p{margin:0 0 7px}
@media(prefers-color-scheme:dark){
 body{background:#0e1116;color:#e6e8ec}.wrap{background:#151a21}
 h2{color:#9aa3b0;border-color:#262c36}.lede{color:#c3c9d2;border-color:#e6e8ec}
 .stats td{border-color:#262c36}.deal{border-color:#262c36}.deal.top{border-color:#e6e8ec}
 .desc{color:#a8b0bc}.credits{background:#1c222b;color:#e6e8ec}.tag{background:#1c222b;color:#c3c9d2}
 table.rows td{border-color:#1c222b}table.rows th{border-color:#262c36}
 .gate{border-color:#39414d}.gate p,.gate ul{color:#a8b0bc}
 .corr{color:#a8b0bc}
 .corrnote{background:#231c10;border-color:#d97706;color:#c3c9d2}
 .corrnote .k{color:#f59e0b}
 .btn{background:#e6e8ec;color:#0e1116!important}a{color:#7aa2ff}
}

:root{--ink:#16191d;--muted:#565d66;--faint:#78808a;--rule:#d4d8dd;
 --hair:#e7eaee;--surface:#fff;--accent:#0b4ea2;--sunk:#f2f4f6;
 --band:#14181f;--band-ink:#f4f5f7;--band-mute:#9aa3af;
 --measure:660px;--frame:1440px;--gut:32px}
/* ★ `--frame` is the page and `--measure` is the text. A page embedding an issue
   collapses the first onto the second, so the chrome still aligns to the sample
   (S048). `brief.CSS` pins `.wrap` to 660px on its own, so the fragment itself is
   the same width either way. */
body.narrow{--frame:var(--measure);--gut:28px}
.masthead,.hero,.signup,.sample-head,.listing,.sitefoot,.homesec,.figstrip{
 font-family:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
.bound{max-width:var(--frame);margin:0 auto;padding-left:var(--gut);
 padding-right:var(--gut)}
/* ── the masthead ──────────────────────────────────────────────────────────
   ★★ A dark band, which is the one place this design spends contrast. The
   reference class stays a public register — no radius, no shadow, one typeface —
   but a register that charges for a subscription needs a masthead that reads as a
   publication rather than a form. The band does that with weight instead of
   colour, so it survives the dark-scheme flip without a second palette. */
.masthead{background:var(--band);border-bottom:2px solid var(--accent)}
.masthead-in{max-width:var(--frame);margin:0 auto;
 padding:0 var(--gut);display:flex;justify-content:space-between;
 align-items:center;gap:20px;flex-wrap:wrap;min-height:56px}
.masthead .brand{font-weight:700;font-size:17px;letter-spacing:-.012em;
 text-decoration:none;color:var(--band-ink);display:flex;align-items:center;
 gap:9px;padding:11px 0}
.masthead .mark{flex:none;display:block}
.masthead nav{display:flex;flex-wrap:wrap}
.masthead a.link{font-size:12px;color:var(--band-mute);text-decoration:none;
 text-transform:uppercase;letter-spacing:.085em;font-weight:700;
 padding:19px 0 17px;margin-left:24px;border-bottom:2px solid transparent}
.masthead a.link:hover{color:var(--band-ink)}
.masthead a.link.on{color:var(--band-ink);border-bottom-color:var(--accent)}
/* ── page furniture ─────────────────────────────────────────────────────── */
.hero{max-width:var(--frame);margin:0 auto;background:var(--surface);
 padding:38px var(--gut) 6px}
.hero h1{font-size:36px;line-height:1.1;letter-spacing:-.024em;margin:0 0 14px;
 font-weight:700;max-width:30ch}
.hero .sub{font-size:18px;line-height:1.5;color:var(--muted);margin:0 0 24px;
 max-width:74ch}
/* ⚠⚠ **The register's own hero, and it is a fix rather than a variant.** At the
   full scale a listing page spent ~300px of vertical space on a headline and a
   standfirst before the filter bar, on the one surface whose whole brief was "see
   many deals on one screen". A facet page's heading is a *label* — "Mining &
   metals", "Over $1B" — and a label does not need 36px. Checked by rendering. */
.hero.tight{padding:20px var(--gut) 4px}
.hero.tight h1{font-size:25px;margin:0 0 6px;letter-spacing:-.02em;
 max-width:46ch}
.hero.tight .sub{font-size:14.5px;line-height:1.5;margin:0 0 14px;
 max-width:96ch}
.hero.tight .eyebrow{margin:0 0 7px}
.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.13em;
 color:var(--faint);font-weight:700;margin:0 0 12px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 4px}
.cta a{display:inline-block;font-size:15px;font-weight:700;text-decoration:none;
 padding:12px 24px;border:1px solid var(--ink);color:var(--ink)}
.cta a.solid{background:var(--ink);color:var(--surface)}
.cta a:hover{border-color:var(--accent);color:var(--accent)}
.cta a.solid:hover{background:var(--accent);border-color:var(--accent);
 color:#fff}
/* The coverage block: a labelled list read as a spec sheet, not bullets. */
.cover{list-style:none;padding:0;margin:0;border-top:1px solid var(--rule)}
.cover li{font-size:14px;line-height:1.5;color:var(--ink);padding:11px 0;
 border-bottom:1px solid var(--rule);max-width:88ch}
.who{font-size:13px;color:var(--faint);margin:16px 0 0}
/* ── the figure strip: what the register holds, in numbers ────────────────
   ⚠ Every number here is counted off the build, never written in prose. A
   hardcoded "3,000+ deals" is a claim that rots on the first Monday. */
.figstrip{max-width:var(--frame);margin:0 auto;background:var(--surface);
 padding:6px var(--gut) 0}
.figstrip dl{display:flex;flex-wrap:wrap;gap:0;margin:0;
 border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.figstrip div{padding:14px 26px 13px 0;margin-right:26px;
 border-right:1px solid var(--hair)}
.figstrip div:last-child{border-right:0;margin-right:0}
.figstrip dt{font-size:11px;text-transform:uppercase;letter-spacing:.1em;
 color:var(--faint);font-weight:700;margin:0 0 3px}
.figstrip dd{margin:0;font-size:25px;font-weight:700;letter-spacing:-.022em;
 font-variant-numeric:tabular-nums;line-height:1.1}
.figstrip dd small{display:block;font-size:12px;font-weight:400;
 letter-spacing:0;color:var(--muted);margin-top:3px}
/* ── a home-page section ─────────────────────────────────────────────────── */
.homesec{max-width:var(--frame);margin:0 auto;background:var(--surface);
 padding:30px var(--gut) 4px}
.homesec h2{font-size:13px;text-transform:uppercase;letter-spacing:.1em;
 color:var(--ink);margin:0 0 4px;padding:0 0 9px;font-weight:700;
 border-bottom:1px solid var(--ink)}
.homesec .lead{font-size:15px;color:var(--muted);margin:12px 0 16px;
 max-width:74ch;line-height:1.55}
.homesec .more{font-size:13px;font-weight:700;margin:12px 0 0}
.homesec .more a{color:var(--accent);text-decoration:none}
.homesec .more a:hover{text-decoration:underline}
/* The four lanes, as entry points. A grid of ruled cells rather than cards:
   same reference class as the register table, one step up in scale. */
.lanes{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
 gap:1px;background:var(--hair);border:1px solid var(--hair);margin:14px 0 0}
.lanes a{background:var(--surface);padding:17px 18px 18px;text-decoration:none;
 display:block;color:var(--ink)}
.lanes a:hover{background:var(--sunk)}
.lanes .n{font-size:23px;font-weight:700;letter-spacing:-.02em;
 font-variant-numeric:tabular-nums;display:block}
.lanes .k{font-size:13px;font-weight:700;color:var(--accent);display:block;
 margin:2px 0 5px}
.lanes .d{font-size:12.5px;color:var(--muted);line-height:1.5;display:block}
.signup{max-width:var(--frame);margin:0 auto;background:var(--surface);
 padding:26px var(--gut) 34px}
.signup .box{border:1px solid var(--ink);padding:22px 22px 18px;
 max-width:var(--measure)}
.signup h2{margin:0 0 10px;border:0;padding:0;font-size:13px;
 text-transform:uppercase;letter-spacing:.09em;color:var(--ink)}
.signup p{font-size:14px;color:var(--muted)}
.signup .note{font-size:12px;color:var(--faint);margin:12px 0 0}
.unwired{border:1px solid var(--accent);border-left-width:4px;padding:16px 18px;
 font-size:14px;color:var(--muted)}
.unwired b{color:var(--ink)}
.sample-head{max-width:var(--frame);margin:0 auto;background:var(--surface);
 padding:8px var(--gut) 0}
.sample-head .label{font-size:11px;text-transform:uppercase;letter-spacing:.13em;
 color:var(--faint);font-weight:700;margin:0 0 6px;padding-top:22px;
 border-top:1px solid var(--ink)}
.sample-head p{font-size:13px;color:var(--muted);margin:0}
/* ── the register table ───────────────────────────────────────────────────
   ★★ The company names in it are the whole free acquisition channel (2e), so
   they stay in the markup at full length.
   ⚠⚠ **S048 halved the row height, and density is the product.** At 14px with
   13px of padding a row was 44px tall and eleven of them filled a laptop screen;
   a deal professional scans a register the way they scan a blotter. 13px type on
   7px padding puts a row at 30px and ~24 on the same screen, which is what the
   secondary metadata moving from a second line into its own columns bought. */
.listing{max-width:var(--frame);margin:0 auto;background:var(--surface);
 padding:4px var(--gut) 26px}
.listing.flush{padding-top:0}
.reg{width:100%;border-collapse:collapse;font-size:13px;
 font-variant-numeric:tabular-nums}
.reg caption{text-align:left;font-size:11px;text-transform:uppercase;
 letter-spacing:.13em;color:var(--faint);font-weight:700;padding:0 0 9px}
.reg th{text-align:left;font-size:10.5px;text-transform:uppercase;
 letter-spacing:.085em;color:var(--muted);font-weight:700;padding:0 14px 7px 0;
 border-bottom:1px solid var(--ink);white-space:nowrap}
.reg td{padding:7px 14px 7px 0;border-bottom:1px solid var(--hair);
 vertical-align:top;color:var(--ink);line-height:1.45}
.reg td:last-child,.reg th:last-child{padding-right:0}
.reg tbody tr:hover{background:var(--sunk)}
.reg .num{white-space:nowrap;font-weight:700}
.reg .when{white-space:nowrap;color:var(--muted);width:6.6em}
.reg a{color:var(--accent);text-decoration:none;font-weight:700}
.reg a:hover{text-decoration:underline}
.reg .names{color:var(--muted);font-size:12.5px;line-height:1.45;
 margin:3px 0 0;display:block}
/* A dimension cell: the value, small caps, not a coloured pill. A pill grid is
   the tell that a design came out of a component library. */
.reg .dim{font-size:11px;text-transform:uppercase;letter-spacing:.055em;
 color:var(--muted);white-space:nowrap}
.reg .amt{white-space:nowrap;text-align:right;font-weight:700}
/* ── the archive table's own density pass (item 56, S051) ─────────────────
   ⚠⚠ **It already had two thirds of what the register got, for free.** 13px type
   on 7px padding is on `.reg` itself, so the archive shares it; what it did not
   share was the deterministic layout, because `table-layout:fixed` is scoped to
   `.reg.dense` on purpose — this table has four columns and the three league
   tables have three, and fixed layout divides the width equally where no width is
   declared. Hence a **third** class rather than reusing `dense`: its column count
   is its own, and its widths are declared here against it.
   ⚠ Measured before and after by rendering, not by reading this: a row was
   **73px at 1512, 1280 and 1024 and 91px at 820**, because the company list wrapped
   to two lines and then three as the frame narrowed. It is **55px and the same 55px
   at all four**, which is the register's actual finding — the row height is a
   *constant*, and one line per line of content is what makes it one.
   ⚠⚠ **Clipped, never summarised.** The names are the whole free acquisition
   channel (2e), so the full string stays in the markup and in a `title`, exactly as
   `browse`'s `.reg td.nm a` keeps a transaction's whole name in a clipped cell.
   ⚠ The middle three columns are declared and `Covered in this issue` is not: it
   takes the remainder, which is `.reg.dense`'s rule and the reason the slack does
   not all land in the one cell with long content. */
.reg.issues{table-layout:fixed}
.reg.issues th:nth-child(1){width:4.6em}
.reg.issues th:nth-child(2){width:7.6em}
.reg.issues th:nth-child(3){width:8.2em}
.reg.issues td.cov a,.reg.issues td.cov .names{display:block;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reg.issues .names{margin:1px 0 0}
.empty{font-size:14px;color:var(--muted)}
/* The correction note sits outside the published fragment by design, so it
   needs the measure applied to it here — see `issue_page`. */
.corrbox{max-width:var(--frame);margin:0 auto;background:var(--surface);
 padding:0 var(--gut) 30px}
.corrbox .corrnote{margin-top:0;max-width:var(--measure)}
/* ── the footer, as a route rather than a signature ──────────────────────
   ⚠ A column of links per surface. The old footer named three; a crawler
   reaching a detail page 3,000 links deep needs a way back up to the lane, the
   league tables and the archive from wherever it landed. */
.sitefoot{max-width:var(--frame);margin:0 auto;background:var(--surface);
 padding:26px var(--gut) 48px;font-size:12px;line-height:1.6;color:var(--faint);
 border-top:1px solid var(--ink)}
.sitefoot a{color:var(--muted);text-decoration:none}
.sitefoot a:hover{color:var(--ink);text-decoration:underline}
.sitefoot .cols{display:grid;
 grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:20px 26px;
 margin:0 0 24px}
.sitefoot h2{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;
 color:var(--ink);font-weight:700;margin:0 0 7px;padding:0;border:0}
.sitefoot ul{list-style:none;margin:0;padding:0}
.sitefoot li{font-size:12.5px;line-height:1.85}
.sitefoot .fine{max-width:82ch}
.sitefoot .fine p{margin:0 0 7px}
@media(max-width:1080px){
 :root{--gut:24px}
 .reg .hide-l{display:none}
 .reg th.hide-l{display:none}
}
@media(max-width:820px){
 .reg .hide-m,.reg th.hide-m{display:none}
 .figstrip div{padding-right:20px;margin-right:20px}
 .figstrip dd{font-size:21px}
}
@media(max-width:560px){
 :root{--gut:18px}
 .hero{padding-top:26px}.hero h1{font-size:28px}.hero .sub{font-size:16px}
 .masthead-in{padding-top:2px;padding-bottom:2px}
 .masthead a.link{margin:0 20px 0 0;padding:8px 0 12px}
 .masthead .brand{padding:11px 0 5px}
 /* A multi-column register does not fit a phone: the header row is dropped and
    each row reads as a stacked record. Same markup, so the table is still a
    table to a crawler and to a screen reader. */
 .reg thead{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0)}
 .reg td{display:block;border:0;padding:0 0 3px}
 .reg td.when{width:auto;color:var(--faint)}
 .reg td.amt{text-align:left}
 .reg tr{display:block;padding:11px 0;border-bottom:1px solid var(--rule)}
 .reg tbody tr:hover{background:transparent}
 /* ⚠ The fixed layout goes with the stacked row, for `browse`'s reason on
    `.reg.dense`: the widths are proportions of a desktop table, and on a phone a
    clipped one-line company list shows three names of eight. Here the names are
    the channel, so on the narrow layout they wrap and nothing is clipped. */
 .reg.issues{table-layout:auto}
 .reg.issues th{width:auto}
 .reg.issues td.cov a,.reg.issues td.cov .names{white-space:normal;
  overflow:visible}
}
@media(prefers-color-scheme:dark){
 :root{--ink:#e8eaed;--muted:#a6adb6;--faint:#828a94;--rule:#272c33;
  --hair:#22272e;--surface:#151a21;--accent:#7fb0ff;--sunk:#1b2129;
  --band:#0c1016;--band-ink:#f0f2f5;--band-mute:#8b949f}
 .cta a.solid{background:var(--ink);color:#0c1016}
 .cta a.solid:hover{color:#0c1016}
}

/* Screen-reader-only. ⚠ Not `display:none`, which removes it from the
   accessibility tree as well as from the page — the disclosure button's only
   accessible name is in here. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
 clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* ── the filter bar (S048) ────────────────────────────────────────────────
   Sticky, because a register is scrolled and a filter you have to scroll back up
   to reach is one nobody uses twice. Full frame width, on the sunk surface, with a
   rule under it — the same ruled vocabulary as the table it controls, one shade
   apart so it reads as chrome rather than as data. */
.fbar{position:sticky;top:0;z-index:5;background:var(--sunk);
 border-bottom:1px solid var(--ink);margin:0 0 2px}
.fbar-in{max-width:var(--frame);margin:0 auto;padding:10px var(--gut) 8px;
 display:flex;flex-wrap:wrap;gap:10px 13px;align-items:flex-end}
.fc{display:flex;flex-direction:column;gap:3px;position:relative;min-width:0}
/* ⚠ Sized so the search box and all six axes hold **one line** at 1400px, which
   is where the frame is. Measured by rendering: at 210px of search and 132px of
   select the row wrapped and put Status and Sort on a second line, which reads as
   two unrelated control groups rather than one bar. */
.fc.grow{flex:1 1 150px;max-width:250px}
.fc label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;
 color:var(--faint);font-weight:700}
/* ⚠ `appearance:none` plus an explicit square border, because a native select is
   rounded on macOS and the owner's no-radius rule is the one constant of this
   design. The chevron is a CSS triangle on the wrapper rather than a background
   data-URI, so it inherits `currentColor` and survives the dark-scheme flip —
   a data-URI arrow would need a second copy of the file per palette. */
.fc select,.fc input{font:inherit;font-size:13px;color:var(--ink);
 background:var(--surface);border:1px solid var(--rule);padding:6px 9px;
 border-radius:0;appearance:none;-webkit-appearance:none;min-height:31px;
 max-width:100%}
.fc.sel select{padding-right:24px;min-width:112px}
.fc.sel::after{content:"";position:absolute;right:10px;bottom:12px;width:0;
 height:0;border-left:4px solid transparent;border-right:4px solid transparent;
 border-top:5px solid var(--muted);pointer-events:none}
.fc select:focus,.fc input:focus{outline:2px solid var(--accent);
 outline-offset:-1px;border-color:var(--accent)}
.fc input::placeholder{color:var(--faint)}
.fstate{max-width:var(--frame);margin:0 auto;padding:0 var(--gut) 9px;
 display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.fsort{margin-left:auto;display:flex;gap:8px;align-items:center}
.fsort label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;
 color:var(--faint);font-weight:700}
.fsort select{font:inherit;font-size:12.5px;color:var(--ink);
 background:var(--surface);border:1px solid var(--rule);padding:4px 7px;
 border-radius:0;min-height:26px}
.fcount{margin:0;font-size:12px;font-weight:700;color:var(--muted);
 font-variant-numeric:tabular-nums;text-transform:uppercase;letter-spacing:.05em}
.fclear{font:inherit;font-size:12px;font-weight:700;color:var(--accent);
 background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
/* ── the expandable row ───────────────────────────────────────────────────
   ⚠ The panel is a sibling <tr> with the `hidden` attribute, not a CSS-collapsed
   cell, and it carries free fields only (`index_row`). `PAYWALL.md` Part 2 §1 is
   about *gated* values: those are absent from the index, so they cannot reach a
   panel whether it is open or shut. */
/* ⚠⚠ **The name column is given a share and the rest size to content.** Without
   this the table's whole slack landed in the one cell with long content, so at
   1512px there was ~150px of blank between the transaction name and the LANE
   column and the five dimension columns were jammed against the right edge — it
   read as a broken layout rather than a wide one. A percentage makes the slack
   distribute. Checked by rendering. */
/* ⚠⚠⚠ **`table-layout:fixed`, and it took three measurements to get here.** With
   auto layout the declared widths are advisory: the browser sizes each column by its
   longest unbreakable content, and since every cell here is `nowrap` the table came
   out **1,533px inside a 1,376px container** and pushed TERMS and the disclosure off
   the right edge at every viewport width — 1512, 1280 and 1024 all overflowed.
   Before that, with the name unbounded, the slack all landed in it and left ~150px
   of blank between the transaction and LANE. Fixed layout is the only one of the
   three that is deterministic: the declared widths are honoured, the name column
   takes whatever is left, and long values clip instead of widening the table.
   ⚠ Scoped to `.reg.dense` and not to `.reg`, because the archive table and the
   three league tables share that class with four and three columns — fixed layout
   there would divide the width equally and wreck both. */
.reg.dense{table-layout:fixed}
/* ⚠ Each of these was widened after rendering clipped a real value: `ANNOUNCED`
   collided with the header beside it at 6.5em, `RESTRUCTURING` read `RESTRUCTU…` at
   7.5em, and `CONSTRUCTION & BUILDING` lost its second word at 13em. The 4em they
   cost comes out of the name column, which has the slack. */
.reg.dense th:nth-child(1){width:7.2em}
.reg.dense th:nth-child(3){width:9.6em}
.reg.dense th:nth-child(4){width:14.5em}
.reg.dense th:nth-child(5){width:3.4em}
.reg.dense th:nth-child(6){width:9.5em}
.reg.dense th:nth-child(7){width:3.6em}
.reg.dense th:nth-child(8){width:2.2em}
/* The name column is the one that is *not* declared: it takes the remainder. */
.reg td.nm{min-width:0}
.reg td.dim{overflow:hidden;text-overflow:ellipsis}
/* ⚠⚠ **One line per row, clipped, and that is what makes the row height a
   constant.** With the name allowed to wrap, a two-line row was 56px and a one-line
   row 34px, so the register scanned unevenly and fitted 14 deals rather than 22 —
   the owner's brief was "see many deals on one screen". The reference is
   stockanalysis.com's screener, which sets `white-space:nowrap` on the whole table
   and exempts one text column with a max-width.
   ⚠ Clipped and **not** truncated in the markup: the whole name is in the document
   for a crawler and for a screen reader, and `PAYWALL.md`'s "absent, never hidden"
   governs *gated values* — a company name is the one thing this surface exists to
   publish. The full name is also in the expanded panel and in the `title`. */
.reg td.nm a{display:block;white-space:nowrap;overflow:hidden;
 text-overflow:ellipsis}
.reg th.xc,.reg td.xc{width:30px;padding-right:0;text-align:right}
.reg .x{font:inherit;font-size:15px;line-height:1;font-weight:700;
 color:var(--muted);background:none;border:1px solid transparent;
 padding:2px 5px;cursor:pointer;border-radius:0}
.reg .x:hover{color:var(--ink);border-color:var(--rule)}
.reg .x:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.reg tr.dp>td{background:var(--sunk);padding:12px 14px 14px;
 border-bottom:1px solid var(--rule)}
.reg tr.dp .pm{margin:0 0 7px;font-size:11px;text-transform:uppercase;
 letter-spacing:.06em;color:var(--faint);font-weight:700}
.reg tr.dp .pw{margin:0 0 9px;font-size:13.5px;line-height:1.55;color:var(--ink);
 max-width:96ch}
.reg tr.dp .pt{margin:0 0 5px;font-size:12.5px;color:var(--muted)}
.reg tr.dp .pt b{color:var(--ink)}
.reg tr.dp .pl{margin:9px 0 0;font-size:12.5px;font-weight:700}
.reg tr.dp .pl a{margin-right:16px}
.loadmore{margin:14px 0 0;font-size:13px}
.mb{font:inherit;font-size:13px;font-weight:700;color:var(--ink);
 background:var(--surface);border:1px solid var(--ink);padding:9px 20px;
 cursor:pointer;border-radius:0}
.mb:hover{background:var(--ink);color:var(--surface)}
.mb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* ── the crawlable filter ─────────────────────────────────────────────────
   ⚠ Kept, and kept below the table. It is the no-JavaScript route to the same
   narrowing, and each of its links is an indexable page — "CCAA filings in
   Alberta" is a search, and this is what gives it somewhere to land. The bar above
   is faster for a reader; this is what a crawler follows. */
.facets{max-width:var(--frame);margin:0 auto;background:var(--surface);
 padding:0 var(--gut) 18px}
.facets .grid{display:grid;
 grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:20px 24px;
 border-top:1px solid var(--ink);padding-top:16px}
.facets .col{min-width:0}
.facets h2{margin:0 0 8px;border:0;padding:0;font-size:11px;
 text-transform:uppercase;letter-spacing:.11em;color:var(--faint);font-weight:700}
.facets ul{list-style:none;margin:0;padding:0}
.facets li{font-size:13px;line-height:1.7}
.facets a{color:var(--accent);text-decoration:none}
.facets a:hover{text-decoration:underline}
.facets .n{color:var(--faint);font-variant-numeric:tabular-nums}
/* ⚠ The value whose facet page **is** this page: marked, never linked (item 56).
   The count stays beside it, so a reader loses the link and no information.
   ⚠⚠ **Deliberately not `.pager .nums .here`'s accent underline, and rendering the
   block is what settled it.** A pager marks one digit in a row of digits, where
   weight alone is too weak; here every sibling is an accent link with
   `text-decoration:none`, so an underline would make the one item that is *not* a
   link the only underlined thing in the column. Ink and weight against blue is the
   contrast that already exists on the page. */
.facets .here{color:var(--ink);font-weight:700}
/* ── the computed roll-up (S051, item 55) ─────────────────────────────────
   Same grid mechanics as the filter above, and deliberately a different block:
   that one is a list of links, this is a distribution counted off the build. The
   two never sit next to each other — the free sample separates them — but they
   are told apart by weight rather than by position, so a reader who lands mid-page
   can see which is which. ⚠ No `<a>` anywhere in here, which is a property a test
   asserts rather than a style choice: every value it names is a bucket of the
   listing already on the page, and a link per bucket would be `facet_nav` twice. */
.roll{max-width:var(--frame);margin:0 auto;background:var(--surface);
 padding:26px var(--gut) 20px}
.roll>h2{margin:0 0 5px;border:0;padding:0;font-size:15px;font-weight:700;
 letter-spacing:-.008em;color:var(--ink)}
.roll .note{margin:0;font-size:12.5px;color:var(--muted);line-height:1.55;
 max-width:88ch}
/* ⚠ The strip is **nested** here rather than a sibling, so the heading and the
   sentence sit above the figures they head — found by reading the built page, where
   a sibling strip landed between the pager and its own title and read as part of the
   table above it. `.figstrip` carries its own frame width and gutters for the home
   page, so both are cancelled inside this block, and its lower rule comes off
   because `.grid`'s own border-top is the next line down. */
.roll .figstrip{max-width:none;margin:13px 0 0;padding:0}
.roll .figstrip dl{border-bottom:0}
.roll .figstrip div{padding-bottom:9px}
.roll .grid{display:grid;
 grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:18px 24px;
 border-top:1px solid var(--ink);padding-top:15px;margin-top:15px}
.roll .col{min-width:0}
.roll h3{margin:0;font-size:11px;text-transform:uppercase;letter-spacing:.11em;
 color:var(--ink);font-weight:700}
.roll .den{margin:1px 0 7px;font-size:11px;color:var(--faint);
 font-variant-numeric:tabular-nums}
.roll ul{list-style:none;margin:0;padding:0}
.roll li{font-size:13px;line-height:1.65;display:flex;gap:10px;
 justify-content:space-between;align-items:baseline}
.roll .k{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.roll .n{flex:none;color:var(--muted);font-variant-numeric:tabular-nums}
.roll .n em{font-style:normal;color:var(--faint)}
.roll .more{margin:5px 0 0;font-size:11.5px;color:var(--faint)}
.crumb{max-width:var(--frame);margin:0 auto;background:var(--surface);
 padding:12px var(--gut) 0;font-size:12px;color:var(--faint)}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--ink)}
.terms{display:block;font-size:12px;color:var(--faint);margin:5px 0 0}
.reg .full{display:block;margin:7px 0 0;font-size:13px;color:var(--ink);
 font-variant-numeric:tabular-nums}
.pager{max-width:var(--frame);margin:0 auto;background:var(--surface);
 padding:0 var(--gut) 34px;font-size:13px;display:flex;gap:18px;
 align-items:baseline;border-top:1px solid var(--rule)}
.pager a{color:var(--accent);text-decoration:none;font-weight:700;padding-top:14px}
.pager .of{color:var(--faint);padding-top:14px;white-space:nowrap}
.pager .nums{padding-top:14px;display:flex;flex-wrap:wrap;gap:0 9px;
 font-variant-numeric:tabular-nums}
.pager .nums a{padding-top:0}
.pager .nums .here{font-weight:700;color:var(--ink);
 border-bottom:2px solid var(--accent)}
/* ── a transaction's own page (item 56, S051) ─────────────────────────────
   ⚠⚠⚠ **Still a `<dl>`, and that is deliberate rather than left over.** The
   element is right: these are label/value pairs and a `<table>` would claim two
   dimensions of data where there is one. What was wrong was that it *rendered*
   stacked — the label on one line and the value on the next, **69px a pair** — on
   the one surface whose own register runs at 37px a row, so "Alberta" cost 69px and
   a 15-field record was 1,126px of scrolling. The grid pairs them across: measured
   by rendering, a single-line pair is **69px → 45px** and the record **1,126px →
   772px**, with the label's bottom rule level with the value's on **15 of 15** rows
   where it sat 39 to 83px above it.
   ⚠⚠⚠ **Grid on the `<dl>`, and the markup is untouched, which is the point.**
   `PAYWALL.md` Part 2 §1's guarantee is that a withheld figure is **absent from the
   markup**, and `detail_page` delivers it by not appending the pair at all —
   `tests/test_site.py`'s `GATED_LABELS` reads `<dt>…</dt><dd>…</dd>` off the served
   bytes to assert it. Changing the element or nesting a wrapper between them would
   move that test's selector, which is S048's silently-disabled-guard failure aimed
   at the one test that cannot be allowed to select nothing.
   ⚠ The rule is drawn on **both** cells, because in a two-column grid a rule under
   the value alone stops half way across and reads as a broken row.
   ⚠⚠ **The band spans the frame and the record keeps the measure**, which is
   `CLAUDE.md`'s `--frame`/`--measure` distinction arriving on this page: at 1512px
   the crumb, the hero and the footer are 1,504px of surface and `.rec` was **716px**,
   so **788px of page background showed through on either side** of a record sitting
   between two full-width white blocks. The prose still sets at 660px; what changed
   is the colour behind it. */
.rec{max-width:var(--frame);margin:0 auto;background:var(--surface);
 padding:4px var(--gut) 10px}
.rec dl{max-width:var(--measure);margin:0 auto;
 border-top:1px solid var(--rule);display:grid;
 grid-template-columns:minmax(0,10.6em) minmax(0,1fr)}
/* ⚠⚠ **No `align-self:start`, and the first version had it.** The label needs to
   sit on the row's first line, which a stretched grid item already does because text
   flows from the top of its box — and stretching is what puts its bottom rule at the
   *row's* height. With `align-self:start` the label box ended at its own text, so on
   the three rows carrying a quote the rule broke into two segments **30, 31 and 50px
   apart** (`bid deadline`, `claims bar date`, `stay expiry`) and the record read as a
   stepped ladder. Found by rendering the page. */
.rec dt{font-size:11px;text-transform:uppercase;letter-spacing:.09em;
 color:var(--faint);font-weight:700;padding:11px 14px 11px 0;
 border-bottom:1px solid var(--rule);line-height:1.45}
.rec dd{margin:0;padding:9px 0 11px;font-size:15px;color:var(--ink);
 border-bottom:1px solid var(--rule);font-variant-numeric:tabular-nums;
 min-width:0;overflow-wrap:break-word}
.rec dd .q{display:block;font-size:13px;color:var(--muted);line-height:1.5;
 margin:5px 0 0}
.rec dd .basis{color:var(--faint);font-size:13px}
.rec ul.docs{list-style:none;margin:0;padding:0}
.rec ul.docs li{font-size:14px;line-height:1.6;padding:0 0 5px}
.rec .none{color:var(--faint);font-size:14px;margin:0}
/* ⚠⚠ `box-sizing:border-box`, and without it the gate is **48px wider than the
   record it sits under**. `brief.CSS` gives `.gate` a 2px border and 22px of padding
   and this sheet must not touch that file, so under the default content-box sizing a
   `max-width` of 660 renders a 708px box — measured at 708px wide, 24px left of the
   record's own column. It was aligned before only because an `auto` width absorbs the
   padding into the parent's content box, which stopped being 660px the moment the band
   widened to the frame. */
.rec .gate{max-width:var(--measure);margin:20px auto 6px;box-sizing:border-box}
/* ── the sideways links (item 43, S050) ───────────────────────────────────
   ⚠ In this sheet and not a third one, for the reason the league rules below
   record: `site.stylesheet_path` is content-addressed on `extra_css` and
   `site.build` emits exactly two sheets, so a page passing a third string links a
   URL nobody wrote. Same measure as `.rec`, because it sits under the record and
   has to align to it. A row is a name and a date on one line, ruled — the same
   vocabulary as the archive table and `.rec`'s definition list.
   ⚠ Frame-wide band, measure-wide content, for the reason `.rec` records above: the
   two blocks are one white column under the hero, and they still align to each
   other because both cap their content at `--measure`. */
/* ⚠⚠ `display:flow-root`, and it is load-bearing rather than tidy: `.rel` has no
   top padding, so `h2`'s 24px top margin **collapsed out of the block** and became a
   gap above it. Measured on the rendered page — `.rec` ended at 1004 and this block
   began at 1028, so **24px of page background showed as a grey stripe across the full
   frame** between two white bands. It was invisible while both were 716px columns on
   grey; widening the band is what exposed it. A new formatting context stops the
   collapse without moving the spacing into a second place. */
.rel{max-width:var(--frame);margin:0 auto;background:var(--surface);
 padding:0 var(--gut) 30px;display:flow-root}
.rel h2{max-width:var(--measure);margin:24px auto 6px;font-size:11px;
 text-transform:uppercase;
 letter-spacing:.09em;color:var(--faint);font-weight:700;border:0;padding:0;
 border-top:1px solid var(--ink);padding-top:14px}
.rel ul{list-style:none;max-width:var(--measure);margin:0 auto;padding:0}
.rel li{display:flex;gap:14px;justify-content:space-between;
 align-items:baseline;font-size:14px;line-height:1.5;padding:7px 0;
 border-bottom:1px solid var(--rule)}
.rel a{color:var(--accent);text-decoration:none}
.rel a:hover{text-decoration:underline}
/* ⚠ `nowrap` on the date only. The name is the cell that has to give, and it
   wraps rather than clipping: this is a link a reader chooses between, not a
   register row scanned at 22 to the screen (`.reg td.nm a`'s rule). */
.rel li .n{color:var(--faint);font-size:12.5px;white-space:nowrap;
 font-variant-numeric:tabular-nums}
.rel .more{max-width:var(--measure);margin:10px auto 0;font-size:13px}
.rel .more a{color:var(--accent);text-decoration:none;font-weight:700}
/* The league tables (TODO 17). ⚠⚠★★★ **In this sheet and not in a third one, and
   that is a correctness rule rather than tidiness.** `site.stylesheet_path` is
   content-addressed on its `extra_css` (TODO 15, S038), so a page passing
   `BROWSE_CSS + LEAGUE_CSS` links `/assets/site-<hash of both>.css` — a URL
   `site.build` never writes, because it emits exactly two sheets. The first
   version of this shipped four **unstyled** pages, found by resolving the href
   against the build tree rather than by looking at the markup. A test now asserts
   every page's sheet exists. */
.lg{max-width:var(--measure);margin:0 auto;background:var(--surface);
 padding:0 28px 8px}
.lg table{width:100%;border-collapse:collapse;margin:0 0 6px}
.lg caption{text-align:left;font-size:12px;color:var(--faint);padding:0 0 8px}
.lg th{text-align:left;font-size:11px;text-transform:uppercase;
 letter-spacing:.09em;color:var(--faint);font-weight:700;
 border-bottom:1px solid var(--rule);padding:0 0 6px}
.lg td{font-size:15px;color:var(--ink);padding:7px 0;
 border-bottom:1px solid var(--rule);font-variant-numeric:tabular-nums}
.lg td.rank,.lg th.rank{width:2.6em;color:var(--faint);font-size:13px}
.lg td.num,.lg th.num{text-align:right;width:7em}
.lg .note{font-size:13px;color:var(--muted);line-height:1.55;margin:0 0 18px}
.lg .more{font-size:13px;margin:0 0 30px}
.lg .more a{color:var(--accent);text-decoration:none;font-weight:700}
.lg h2{font-size:19px;margin:26px 0 4px;border:0;padding:0}
/* The disclosure is desktop-invisible: above 720px every control is on one line. */
.ftoggle{display:none}
@media(max-width:720px){
 .ftoggle{display:block;width:100%;font:inherit;font-size:13px;font-weight:700;
  text-align:left;color:var(--ink);background:var(--surface);
  border:1px solid var(--ink);border-radius:0;padding:10px 12px;cursor:pointer;
  margin:9px var(--gut) 0;width:calc(100% - 2*var(--gut))}
 .ftoggle::after{content:" ▾";color:var(--muted)}
 .fbar[open-filters] .ftoggle::after{content:" ▴"}
 .fbar-in{display:none}
 .fbar[open-filters] .fbar-in{display:flex}
 .fbar-in{gap:9px 12px}
 .fc,.fc.grow{flex:1 1 132px;max-width:none}
 .fc select,.fc input{width:100%}
 /* ⚠ Sticky is wrong on a phone: the bar is two-thirds of the viewport when open,
    so pinning it leaves no register to look at. */
 .fbar{position:static}
 .fsort{margin-left:0}
}
@media(max-width:560px){
 .facets,.crumb,.pager,.rec,.lg,.rel,.roll{padding-left:var(--gut);
  padding-right:var(--gut)}
 .facets .grid,.roll .grid{gap:16px}
 /* ⚠ The record stacks again on a phone, which is `.reg`'s own rule one page over:
    a 10.6em label column leaves 184px for a value at 390px, and the description is
    600 characters of prose. So the two columns become one and the rule goes back
    under the value, where a stacked pair needs it. Measured at 390px. */
 .rec dl{grid-template-columns:minmax(0,1fr)}
 .rec dt{padding:11px 0 0;border-bottom:0}
 .rec dd{padding:2px 0 11px}
 /* ⚠⚠ **`display:block` on a `<tr>` overrides the `hidden` attribute, and that had
    every detail panel open on a phone.** `hidden` works by a UA-stylesheet
    `display:none`, which an author-level `display:block` beats — so the stacked-row
    rules in `site.SITE_CSS` were silently un-hiding the collapsed panel. Found by
    rendering at 390px. It has to be restated here rather than fixed there, because
    the stacked layout is what needs the block display in the first place. */
 .reg tr[hidden]{display:none}
 /* ⚠ And the fixed layout has to go with it: the column widths are proportions of a
    desktop table, and on a stacked row they squeezed the name into a ~20-character
    column that broke a headline across seven lines. */
 .reg.dense{table-layout:auto}
 .reg.dense th{width:auto}
 .reg td.nm a{white-space:normal;overflow:visible}
 .reg td.dim{max-width:none}
 /* ⚠ The disclosure is pulled out of the stack and onto the date's line, where it
    reads as the row's own control. Left in flow it sat alone under the size, three
    lines below the name it belongs to. */
 .reg tbody tr.r{position:relative;padding-right:34px}
 .reg th.xc{display:none}
 .reg td.xc{position:absolute;top:8px;right:0;width:auto;text-align:right;
  padding:0}
 .reg tr.dp>td{padding:10px 0 12px}
}