/* ==========================================================================
   b2b.asydata.com — ASYDATA's registry surface
   "Registrul liniștit": the data is the spectacle, the chassis keeps quiet.

   Spectral is the document's own voice (titles, field labels, the certification
   statement); Inter is the controls and JetBrains Mono the identifiers and money,
   both shared with ASYDATA. Hairline rules divide
   where a dashboard would draw boxes — an extract is ruled, not carded. One
   certification green owns the validity apparatus, and that apparatus reports
   real provenance rather than decorating the page.

   See DESIGN.md.
   ========================================================================== */

/* --- Faces ---------------------------------------------------------------
   Self-hosted with Cyrillic subsets: much of the registry's people data is
   Cyrillic, and a Latin-only build renders those real records in a fallback. */

@font-face { font-family:'Spectral'; font-weight:400; font-style:normal; font-display:swap;
  src:url('fonts/Spectral-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2192,U+2212,U+2215; }
@font-face { font-family:'Spectral'; font-weight:400; font-style:normal; font-display:swap;
  src:url('fonts/Spectral-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Spectral'; font-weight:400; font-style:normal; font-display:swap;
  src:url('fonts/Spectral-400-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Spectral'; font-weight:600; font-style:normal; font-display:swap;
  src:url('fonts/Spectral-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2192,U+2212,U+2215; }
@font-face { font-family:'Spectral'; font-weight:600; font-style:normal; font-display:swap;
  src:url('fonts/Spectral-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Spectral'; font-weight:600; font-style:normal; font-display:swap;
  src:url('fonts/Spectral-600-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }

/* Inter and JetBrains Mono arrive from ASYDATA, self-hosted here rather than
   linked from a CDN for the same reason every other face on this page is: much
   of the registry's people data is Cyrillic, and the app declares a strict
   security policy that an external font host would have to be opened for.

   One file per subset, not per weight: Google now serves both families as
   variable fonts, and the four "weights" it hands back are byte-identical. Named
   without a weight and declared across the axis, so the browser fetches 208 KB
   once instead of the same bytes four times. */
@font-face { font-family:'Inter'; font-weight:100 900; font-style:normal; font-display:swap;
  src:url('fonts/Inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2192,U+2212,U+2215; }
@font-face { font-family:'Inter'; font-weight:100 900; font-style:normal; font-display:swap;
  src:url('fonts/Inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Inter'; font-weight:100 900; font-style:normal; font-display:swap;
  src:url('fonts/Inter-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }

@font-face { font-family:'JetBrains Mono'; font-weight:100 800; font-style:normal; font-display:swap;
  src:url('fonts/JetBrainsMono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2192,U+2212,U+2215; }
@font-face { font-family:'JetBrains Mono'; font-weight:100 800; font-style:normal; font-display:swap;
  src:url('fonts/JetBrainsMono-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'JetBrains Mono'; font-weight:100 800; font-style:normal; font-display:swap;
  src:url('fonts/JetBrainsMono-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }

/* --- Tokens -------------------------------------------------------------- */

:root {
  /* ASYDATA's neutral ramp: cool slate, not the warm paper this page began with.
     Cold neutrals read as "precise" and add no emotion where none is wanted —
     the same reasoning the accounting side gives — and the shared ramp is what
     makes two products look like one company. Mapped onto this page's own
     vocabulary rather than renamed: "paper" and "ink" still describe what a
     registry extract is, whatever the hex says. */
  --paper:#F8FAFC; --paper-sunk:#F1F5F9;
  --surface:#FFFFFF;
  --ink:#0F172A; --ink-2:#64748B; --ink-3:#94A3B8;
  --rule:#E2E8F0; --rule-strong:#CBD5E1;

  /* The validity apparatus, and nothing else. Aligned to ASYDATA's brand green:
     the two were already siblings — #1F5C4A here against #1F7A4D there, both
     forest rather than fintech neon — so this is a nudge into register, not a
     change of meaning. It stays the only saturated colour on the page. */
  --cert:#1F7A4D; --cert-deep:#15603C; --cert-tint:#E8F3ED;
  --cert-2:#3AA073;

  /* The two degraded states of a record, on ASYDATA's status ramp. */
  --superseded:#D97706; --superseded-tint:#FEF3C7; --superseded-ink:#78350F;
  --struck:#E11D48; --struck-tint:#FFE4E6; --struck-ink:#9F1239;

  /* ASYDATA's ladder, and the point of it is how little the rungs differ:
     hierarchy comes from weight and colour, not size. A section title is 15.5px
     against a 13px body — a gap you feel rather than see. Only a metric is
     allowed to be large, because a figure is the one thing worth shouting. */
  --t-micro:10px; --t-label:11px; --t-caption:12px;
  --t-base:13px; --t-lg:14px; --t-title:15.5px; --t-metric:28px;

  /* Three voices, and the split is the point. The document speaks in Spectral —
     the titles, the field labels, the certification statement — because an
     extract's authority is carried by its typesetting and a grotesque here would
     make it read as a dashboard. Everything the reader operates is Inter, which
     is what ASYDATA uses, so the controls belong to the same family of products.
     Identifiers and money are JetBrains Mono: an IDNO is a code, not a word, and
     a column of sums only aligns if the digits are one width. */
  /* Inter carries everything. Spectral stays declared but unused: ASYDATA builds
     hierarchy from weight, and a serif here would reintroduce the second visual
     identity the system exists to avoid. */
  --doc:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --data:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --measure:72ch;
  --gutter:clamp(1.25rem, 4vw, 3rem);
  --ease:cubic-bezier(0.16, 1, 0.3, 1);

  /* ASYDATA's radius scale. The extract is ruled rather than carded, so `card`
     and `panel` exist for the controls and notices only — a page of boxes would
     undo the thing that makes this read as a document. */
  --r-field:6px; --r-card:12px; --r-panel:16px;

  /* Cards lift off the ground by shadow, not by outline. Low alpha, never hard:
     a hard shadow reads as a widget, and this is meant to read as a sheet. */
  --lift:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --lift-2:0 2px 4px rgba(15,23,42,.04), 0 4px 12px rgba(15,23,42,.06);
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }

body {
  margin:0; background:var(--paper); color:var(--ink);
  font:400 var(--t-base)/1.5 var(--data);
  font-synthesis-weight:none; text-rendering:optimizeLegibility;
}

/* --- Browser surfaces: the parts we did not draw still carry the design --- */

::selection { background:var(--cert); color:var(--paper); }
::placeholder { color:var(--ink-3); opacity:1; }
:focus-visible { outline:2px solid var(--cert); outline-offset:2px; border-radius:1px; }

* { scrollbar-width:thin; scrollbar-color:var(--rule) transparent; }
*::-webkit-scrollbar { width:10px; height:10px; }
*::-webkit-scrollbar-track { background:transparent; }
*::-webkit-scrollbar-thumb { background:var(--rule); border:3px solid var(--paper); border-radius:99px; }
*::-webkit-scrollbar-thumb:hover { background:var(--ink-3); }

a { color:var(--cert); text-decoration-thickness:1px; text-underline-offset:0.18em; }
a:hover { color:var(--cert-deep); }

/* Identifiers are measured values: columns must hold as digits change. */
/* Every identifier, count and sum already carries .num, so this one rule moves
   the whole numeric surface onto the mono face. Slightly smaller because
   JetBrains Mono runs wider than Inter at the same size, and an IDNO should not
   outweigh the company's name beside it. */
.num { font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:0.94em; letter-spacing:0; }

/* --- Document furniture -------------------------------------------------- */

.sheet { max-width:74rem; margin:0 auto; padding:0 var(--gutter) 3rem; }

/* Compact bar, not a title block. ASYDATA gives the first viewport to data:
   a page-sized heading would spend exactly the space the reader came for. */
.masthead { display:flex; flex-wrap:wrap; align-items:center; gap:0.75rem 1.5rem;
  padding:0.9rem 0; border-bottom:1px solid var(--rule); }
.masthead__issuer { flex:1 1 auto; display:flex; align-items:baseline; gap:0.75rem;
  margin:0; font:700 var(--t-title)/1.2 var(--data); letter-spacing:-0.025em; }
.masthead__issuer span { font:700 var(--t-micro)/1.3 var(--data);
  letter-spacing:0.09em; text-transform:uppercase; color:var(--cert); }
.masthead__issuer a { color:var(--ink); text-decoration:none; }
.masthead__issuer a:hover { color:var(--cert); }

/* Section navigation reads as navigation, not as part of the title. */
.masthead__link { font:500 var(--t-caption)/1.3 var(--data); color:var(--ink-2);
  text-decoration:none; padding:0.3rem 0.6rem; border-radius:var(--r-field); }
.masthead__link:hover { color:var(--ink); background:var(--paper-sunk); }

/* The validity seal. Not decoration: it carries the snapshot the whole surface
   answers from, and changes state when that answer goes stale. */
.seal { position:relative; display:grid; gap:0.15rem; min-width:15rem;
  padding:0.7rem 1rem 0.7rem 3.1rem; border:1px solid var(--cert); border-radius:2px;
  background:repeating-linear-gradient(-45deg, transparent 0 5px, rgba(31,92,74,0.045) 5px 6px), var(--cert-tint);
  color:var(--cert-deep); }
.seal__mark { position:absolute; left:0.85rem; top:50%; transform:translateY(-50%); }
.seal__label { font-size:var(--t-label); font-weight:600; letter-spacing:0.1em; text-transform:uppercase; }
.seal__value { font:600 var(--t-base)/1.4 var(--doc); }
.seal__meta { font-size:var(--t-label); color:var(--cert); }
.seal[data-state='stale'] { border-color:var(--superseded); background:var(--superseded-tint); color:var(--superseded-ink); }
.seal[data-state='stale'] .seal__meta { color:var(--superseded); }
.seal[data-state='unknown'] { border-color:var(--rule); background:var(--paper-sunk); color:var(--ink-2); }
.seal[data-state='unknown'] .seal__meta { color:var(--ink-3); }

/* --- The request line: a form field on a document, not a website search --- */

.request { padding:2.25rem 0 1.5rem; }
.request__label { display:block; margin-bottom:0.5rem; font-size:var(--t-label); font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-3); }
.request__line { display:flex; align-items:stretch; gap:0.75rem; border-bottom:2px solid var(--rule-strong); }
.request__line:focus-within { border-bottom-color:var(--cert); }
.request__field { flex:1; min-width:0; border:0; background:transparent; padding:0.35rem 0 0.6rem;
  font:400 var(--t-xl)/1.25 var(--doc); color:var(--ink); }
.request__field:focus { outline:none; }
/* The native search affordance is unstyleable across engines and reads as
   foreign chrome on a document; the request button is the affordance here. */
.request__field::-webkit-search-cancel-button,
.request__field::-webkit-search-decoration { -webkit-appearance:none; appearance:none; }

.request__submit { border:0; border-radius:var(--r-card); margin-bottom:0.4rem;
  height:36px; padding:0 1rem; cursor:pointer;
  background:var(--ink); color:var(--paper); font:600 var(--t-label)/1 var(--data);
  letter-spacing:0.12em; text-transform:uppercase; transition:background 0.18s var(--ease); }
.request__submit:hover { background:var(--cert); }
.request__submit:disabled { background:var(--ink-3); cursor:default; }

/* Six filters share one row and split it evenly, so a select can't grow to its
   natural width and push a sibling onto a lonely second line. minmax(0,1fr) lets
   each cell shrink below the control's intrinsic width; the control fills its cell. */
.filters { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:0.85rem 1.25rem; padding-top:1rem; align-items:end; }
.filter { display:grid; gap:0.25rem; }
.filter > span { font-size:var(--t-label); font-weight:600; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--ink-3); }
.filter select, .filter input { min-width:0; width:100%; padding:0.4rem 0.6rem; border-radius:2px;
  border:1px solid var(--rule); background:var(--paper-sunk); color:var(--ink);
  font:400 var(--t-base)/1.4 var(--data); }
.filter select:hover, .filter input:hover { border-color:var(--ink-3); }

/* Medium widths: two balanced rows of three rather than six cramped columns. */
@media (max-width: 68rem) {
  .filters { grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

/* --- Register: ruled rows, nothing enclosed ------------------------------ */

.tally { display:flex; justify-content:space-between; gap:1rem; padding:1.5rem 0 0.5rem;
  border-bottom:1px solid var(--rule); font-size:var(--t-label); font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-3); }

.register { list-style:none; margin:0; padding:0; }
.entry { display:grid; grid-template-columns:1fr auto; gap:0.15rem 1.5rem;
  padding:1.15rem 0; border-bottom:1px solid var(--rule); }
.entry:hover { background:linear-gradient(90deg, var(--paper-sunk), transparent 75%); }

.entry__name { grid-column:1; margin:0; font:600 var(--t-lg)/1.3 var(--doc); letter-spacing:-0.01em; }
.entry__name a { color:var(--ink); text-decoration:underline; text-decoration-color:transparent;
  text-decoration-thickness:1px; text-underline-offset:0.16em; transition:text-decoration-color 0.16s var(--ease); }
.entry__name a:hover { color:var(--cert-deep); text-decoration-color:var(--cert); }

.entry__ident { grid-column:1; margin:0; color:var(--ink-2); }
.entry__ident b { font-weight:500; color:var(--ink); }
.entry__place { grid-column:1; margin:0; color:var(--ink-3); }

/* Status is the largest thing after the name — it is what changes the decision.
   Kind sits beneath it in the same cell; spanning rows stretched the middle row. */
.entry__status { grid-column:2; grid-row:1 / span 3; align-self:start; justify-self:end;
  display:grid; gap:0.35rem; justify-items:end; text-align:right; }
.entry__kind { margin:0; font-size:var(--t-label); color:var(--ink-3); }

.status { display:inline-flex; align-items:center; gap:0.4rem; white-space:nowrap;
  padding:0.35rem 0.6rem; border:1px solid currentColor; border-radius:2px;
  font:600 var(--t-label)/1 var(--data); letter-spacing:0.1em; text-transform:uppercase; }
.status--active { color:var(--cert); background:var(--cert-tint); }
.status--liquidated { color:var(--struck); background:var(--struck-tint); }
.status--absent { color:var(--superseded); background:var(--superseded-tint); }

/* --- Extract ------------------------------------------------------------- */

.extract { padding:1rem 0 3rem; }
.extract__head { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem 1.5rem;
  margin-top:1rem; padding:1.25rem; background:var(--surface);
  border-radius:var(--r-card); box-shadow:var(--lift); }
.extract__ident { flex:1 1 24rem; }
.extract__title { margin:0; font:700 var(--t-metric)/1.15 var(--data);
  letter-spacing:-0.025em; text-wrap:balance; }
.extract__legal { margin:0.25rem 0 0; font-size:var(--t-caption); color:var(--ink-2); }
/* A struck record reads as struck: the document says so in its own voice. */
.extract[data-struck='true'] .extract__title { text-decoration:line-through;
  text-decoration-thickness:2px; text-decoration-color:var(--struck); }

.fields { display:grid; grid-template-columns:minmax(11rem,16rem) 1fr; margin:0; padding:0; }
.fields > dt { grid-column:1; padding:0.5rem 1.5rem 0.5rem 0; border-bottom:1px solid var(--rule);
  font:600 var(--t-label)/1.45 var(--data); letter-spacing:0.025em; text-transform:uppercase;
  color:var(--ink-2); align-self:center; }
.fields > dd { grid-column:2; margin:0; padding:0.5rem 0; border-bottom:1px solid var(--rule);
  font-weight:500; align-self:center; }
.fields > dd[data-empty='true'] { color:var(--ink-3); font-weight:400; font-style:italic; }

/* The blank form: real labels over empty ruled values, so an unsearched page is
   obviously a form awaiting entry rather than a failed load. */
.fields--blank > dt { color:var(--ink-3); }
.fields--blank > dd { min-height:1.7em; }

/* A card, lifted by shadow. The extract used hairline rules on flat ground;
   ASYDATA layers surfaces instead, and the layering is what makes a dense page
   readable without drawing boxes around everything. */
.section { margin-top:1rem; padding:1.25rem; background:var(--surface);
  border-radius:var(--r-card); box-shadow:var(--lift); }
.section > h2 { margin:0 0 0.85rem; padding-bottom:0;
  font:700 var(--t-title)/1.3 var(--data); letter-spacing:-0.025em; }

.people { list-style:none; margin:0; padding:0; }
.people li { display:flex; flex-wrap:wrap; gap:0.3rem 0.9rem; align-items:baseline;
  padding:0.6rem 0; border-bottom:1px solid var(--rule); }
.people__name { font-weight:500; }
.people__role { font-size:var(--t-label); font-weight:600; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink-3); }
.people__share { margin-left:auto; font-weight:600; color:var(--cert-deep); }

.acts { list-style:none; margin:0; padding:0; }
.acts li { display:grid; grid-template-columns:5.5rem 1fr auto; gap:0.9rem; align-items:baseline;
  padding:0.55rem 0; border-bottom:1px solid var(--rule); }
.acts__code { font-weight:600; color:var(--ink-2); }
.acts__caem { font-size:var(--t-label); color:var(--ink-3); white-space:nowrap; }
.acts li[data-licensed='true'] .acts__code { color:var(--cert-deep); }

/* Provenance closes the document, as a certification statement does. Its rule
   spans the sheet; only the reading text is held to a measure. */
.provenance { margin-top:3rem; padding-top:1.25rem; border-top:2px solid var(--rule-strong);
  font-family:var(--doc); color:var(--ink-2); }
.provenance p { margin:0 0 0.5rem; max-width:var(--measure); }
.provenance dl { display:grid; grid-template-columns:max-content 1fr; gap:0.2rem 1rem;
  margin:0.75rem 0 0; font-family:var(--data); font-size:var(--t-label); }
.provenance dt { color:var(--ink-3); text-transform:uppercase; letter-spacing:0.08em; font-weight:600; }
.provenance dd { margin:0; }

/* --- Notices: absence is a finding, stated plainly ----------------------- */

.notice { display:flex; gap:0.75rem; align-items:flex-start; margin:1.25rem 0;
  padding:0.9rem 1.1rem; border:1px solid var(--superseded); border-radius:2px;
  background:var(--superseded-tint); color:var(--superseded-ink); }
.notice--struck { border-color:var(--struck); background:var(--struck-tint); color:var(--struck-ink); }
.notice p { margin:0; }
.notice strong { display:block; font-weight:600; }

.empty { padding:2.5rem 0 1.75rem; color:var(--ink-2); font:400 var(--t-lg)/1.5 var(--doc); }
.failure { padding:4rem 0; text-align:center; color:var(--struck); font:400 var(--t-lg)/1.5 var(--doc); }

/* --- Chrome -------------------------------------------------------------- */

.langs { display:flex; gap:0.15rem; }
.langs button { padding:0.35rem 0.5rem; cursor:pointer; border:1px solid transparent; border-radius:2px;
  background:transparent; color:var(--ink-3); font:600 var(--t-label)/1 var(--data);
  letter-spacing:0.08em; text-transform:uppercase; }
.langs button:hover { color:var(--ink); }
.langs button[aria-pressed='true'] { color:var(--cert-deep); border-color:var(--cert); background:var(--cert-tint); }

.pager { display:flex; gap:1rem; align-items:center; justify-content:center; padding:2rem 0; }
.pager button { padding:0.6rem 1rem; cursor:pointer; border:1px solid var(--rule); border-radius:2px;
  background:transparent; color:var(--ink); font:600 var(--t-label)/1 var(--data);
  letter-spacing:0.1em; text-transform:uppercase; }
.pager button:hover:not(:disabled) { border-color:var(--ink); }
.pager button:disabled { color:var(--ink-3); cursor:default; }
.pager span { font-size:var(--t-label); letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3); }

.back { display:inline-flex; align-items:center; gap:0.4rem; padding:0.5rem 0; margin-bottom:0.5rem;
  border:0; background:transparent; cursor:pointer; color:var(--ink-3);
  font:600 var(--t-label)/1 var(--data); letter-spacing:0.1em; text-transform:uppercase;
  text-decoration:none; }
.back:hover { color:var(--cert-deep); }

.colophon { border-top:1px solid var(--rule); padding:1.5rem 0 3rem;
  color:var(--ink-3); font-size:var(--t-label); }

.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* --- The one authored moment ---------------------------------------------
   The seal stamps when a fresh answer lands: a document being certified. It
   fires on results only, so it stays an event rather than an idle. */

@keyframes stamp {
  0%   { transform:scale(1.06) rotate(-1.1deg); opacity:0.5; }
  60%  { transform:scale(0.995) rotate(0.12deg); opacity:1; }
  100% { transform:scale(1) rotate(0deg); opacity:1; }
}
.seal[data-stamping='true'] { animation:stamp 0.44s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

/* --- Narrow: checked on a phone beside a printed contract ---------------- */

@media (max-width: 44rem) {
  .fields { grid-template-columns:1fr; }
  .fields > dt { grid-column:1; padding-bottom:0; border-bottom:0;
    font:600 var(--t-label)/1.4 var(--data); letter-spacing:0.1em;
    text-transform:uppercase; color:var(--ink-3); }
  .fields > dd { grid-column:1; padding-top:0.15rem; }

  .entry { grid-template-columns:1fr; }
  .entry__status { grid-column:1; grid-row:auto; justify-self:start; justify-items:start;
    text-align:left; margin-top:0.5rem; grid-auto-flow:column; align-items:center; gap:0.6rem; }

  .filters { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem 1rem; }
  .filter select, .filter input { min-width:0; width:100%; }

  .acts li { grid-template-columns:4.5rem 1fr; }
  .acts__caem { grid-column:2; }

  .request__field { font-size:var(--t-lg); }
  .seal { min-width:0; width:100%; }
}

/* --- Enrichment sections: procurement, financials, contact ---------------
   Same ruled-document grammar as the registry fields. Money is tabular and
   emphasised; the honesty notes and attribution carry provenance in the
   document's own voice. */

.section-note { margin:0 0 1rem; max-width:var(--measure); color:var(--ink-3);
  font-family:var(--doc); font-size:var(--t-base); }
.attribution { margin:1rem 0 0; color:var(--ink-3); font-size:var(--t-label); font-style:italic; }

.money { font-variant-numeric:tabular-nums; }
.fields > dd.money { font-weight:600; }
.muted { color:var(--ink-3); }

/* Awarded-contract list — ruled rows, nothing enclosed. */
.contracts { list-style:none; margin:1.25rem 0 0; padding:0; }
.contracts li { display:grid; grid-template-columns:9rem 1fr auto; gap:0.4rem 1.25rem;
  align-items:baseline; padding:0.7rem 0; border-bottom:1px solid var(--rule); }
.contract__date { color:var(--ink-3); font-size:var(--t-label); white-space:nowrap; }
.contract__body { display:flex; flex-wrap:wrap; align-items:baseline; gap:0.3rem 0.7rem; }
.contract__subject { font-weight:500; }
.contract__buyer { color:var(--ink-2); }
.contract__amount { font-weight:600; white-space:nowrap; }
.contract__link { font-size:var(--t-label); }
.contracts li[data-kind="amendment"] .contract__amount::before { content:"± "; color:var(--superseded); }
.contracts li[data-kind="cancellation"] .contract__subject {
  text-decoration:line-through; text-decoration-color:var(--struck); }
.contracts li[data-quarantined="true"] { opacity:0.55; }

.tag { font-size:var(--t-label); font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  padding:0.1rem 0.45rem; border:1px solid var(--rule); border-radius:2px; color:var(--ink-3); }

/* Financial statements table. */
.scroll { overflow-x:auto; }
.fin { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.fin th, .fin td { padding:0.55rem 0.9rem; border-bottom:1px solid var(--rule); text-align:left; }
.fin th.num, .fin td.num { text-align:right; }
.fin th { font:600 var(--t-label)/1.4 var(--data); letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink-3); }
.fin thead th { border-bottom:1px solid var(--rule-strong); }

@media (max-width: 44rem) {
  .contracts li { grid-template-columns:1fr auto; }
  .contract__date { grid-column:1 / -1; }
}

/* --- Procurement discovery: landing entry + search-row signal ------------ */

.browse { display:flex; width:100%; align-items:center; justify-content:space-between; gap:1rem;
  margin:1.5rem 0; padding:1.1rem 1.25rem; cursor:pointer; text-align:left;
  background:var(--paper); border:1px solid var(--rule-strong); border-radius:2px;
  color:var(--ink); font:inherit; transition:background 0.18s var(--ease); }
.browse:hover { background:var(--paper-sunk); }
.browse__body { display:grid; gap:0.15rem; }
.browse__label { font:600 var(--t-lg)/1.2 var(--doc); letter-spacing:-0.01em; }
.browse__hint { font-size:var(--t-label); color:var(--ink-3); }
.browse__arrow { font-size:var(--t-lg); color:var(--ink-3); transition:transform 0.18s var(--ease); }
.browse:hover .browse__arrow { transform:translateX(3px); color:var(--ink); }

/* One public-contracts marker on a search row. Green tint marks the category,
   like the active-status badge; the money itself stays in ink. */
.entry__proc { grid-column:1; margin:0.35rem 0 0; display:flex; align-items:baseline;
  flex-wrap:wrap; gap:0.4rem 0.6rem; }
.tag--proc { color:var(--cert-deep); border-color:var(--cert); background:var(--cert-tint); }

/* --- Polish pass ---------------------------------------------------------- */

/* Comfortable touch targets on the filter controls and language switch. */
.filter select, .filter input { min-height: 40px; }
.langs button { min-height: 34px; }

/* Supplier-ranking mode header: names the ranked view so results read as a
   leaderboard, not a plain match list. The tally rule below is the divider. */
.mode { display:flex; flex-wrap:wrap; align-items:baseline; gap:0.3rem 0.9rem; margin:1.5rem 0 0; }
.mode__label { font:600 var(--t-lg)/1.2 var(--doc); letter-spacing:-0.01em; }
.mode__hint { font-size:var(--t-label); color:var(--ink-3); }

/* --- Change-history timeline ---------------------------------------------- */

.load { padding:0.6rem 1.1rem; cursor:pointer; border:1px solid var(--rule-strong); border-radius:2px;
  background:var(--paper); color:var(--ink); font:600 var(--t-label)/1 var(--data);
  letter-spacing:0.1em; text-transform:uppercase; }
.load:hover { background:var(--paper-sunk); }

.timeline { list-style:none; margin:1rem 0 0; padding:0; }
.tl { display:grid; grid-template-columns:minmax(9rem,12rem) 1fr; gap:0.5rem 1.5rem;
  padding:0.9rem 0; border-bottom:1px solid var(--rule); }
.tl__date { color:var(--ink-2); font-weight:500; }
.tl__changes { list-style:none; margin:0; padding:0; display:grid; gap:0.5rem; }
.chg { display:flex; flex-wrap:wrap; align-items:baseline; gap:0.3rem 0.7rem; }
.chg__kind { font-weight:600; }
/* The from/to are normalised comparison values, not prose — mono signals that. */
.chg__diff { display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:0.25rem 0.4rem;
  max-width:100%; font-family:ui-monospace,'Cascadia Code','Consolas',monospace;
  font-size:0.7rem; color:var(--ink-3); word-break:break-word; overflow-wrap:anywhere; }
.chg__from, .chg__to { word-break:break-word; overflow-wrap:anywhere; }
.chg__arrow { color:var(--ink-3); }
.chg__to { color:var(--ink-2); }
/* Appearance / disappearance are events, tinted like the state they imply. */
.chg[data-kind="appeared"] .chg__kind, .chg[data-kind="reappeared"] .chg__kind { color:var(--cert-deep); }
.chg[data-kind="disappeared"] .chg__kind { color:var(--superseded); }
/* Status values are human labels, so they read in the data font, not mono. */
.chg[data-kind="status"] .chg__diff { font-family:var(--data); font-size:var(--t-base); }
.chg[data-kind="status"] .chg__to { font-weight:600; }

/* Activities change as a delta of CAEM names: one activity per line, what left
   struck in red, what arrived in ink. Prose, not mono — these are sentences. */
.delta { flex-basis:100%; list-style:none; margin:0.3rem 0 0; padding:0; display:grid; gap:0.25rem; }
.delta__row { display:grid; grid-template-columns:0.9rem 1fr; gap:0.45rem; align-items:baseline;
  font:400 var(--t-base)/1.35 var(--data); }
.delta__mark { font-weight:600; text-align:center; }
.delta__row--out { color:var(--struck); }
.delta__row--in { color:var(--ink-2); }

@media (max-width: 44rem) {
  .tl { grid-template-columns:1fr; gap:0.25rem; }
}

/* --- Change-timeline chart ------------------------------------------------ */

.chart { width:100%; height:auto; max-width:52rem; margin:0.75rem 0; }
.chart__axis { stroke:var(--rule-strong); stroke-width:1; }
.chart__year { fill:var(--ink-3); font:400 12px var(--data); }
.dot { stroke:var(--paper); stroke-width:1.5; }
.dot--appeared { fill:var(--cert); }
.dot--gone { fill:var(--superseded); }
.dot--status { fill:var(--struck); }
.dot--control { fill:var(--ink); }
.dot--detail { fill:var(--ink-3); }

.chart__legend { display:flex; flex-wrap:wrap; gap:0.35rem 1.1rem; margin:0 0 1.25rem;
  font-size:var(--t-label); color:var(--ink-2); }
.chart__legend span { display:inline-flex; align-items:center; gap:0.4rem; }
.sw { width:10px; height:10px; border-radius:50%; display:inline-block; }
.sw--appeared { background:var(--cert); }
.sw--gone { background:var(--superseded); }
.sw--status { background:var(--struck); }
.sw--control { background:var(--ink); }
.sw--detail { background:var(--ink-3); }

/* --- Ownership split — the bar fills to the founder's share on load ------- */

.founder { display:block; }
.founder__head { display:flex; flex-wrap:wrap; gap:0.3rem 0.9rem; align-items:baseline; }
.share { height:6px; margin-top:0.45rem; max-width:22rem; background:var(--paper-sunk);
  border-radius:99px; overflow:hidden; }
.share__fill { height:100%; background:var(--cert); border-radius:99px;
  transform-origin:left; animation:share-grow 0.9s var(--ease) both; }
@keyframes share-grow { from { transform:scaleX(0); } }

/* --- Ownership network — entities reached through shared people ----------- */

.net { list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:0; }
.net__person { padding:0.95rem 0; border-bottom:1px solid var(--rule); }
.net__person:last-child { border-bottom:0; }
.net__head { display:flex; flex-wrap:wrap; align-items:baseline; gap:0.4rem 0.9rem; }
.net__who { font:600 var(--t-lg)/1.2 var(--doc); letter-spacing:-0.01em; }
.net__count { font-size:var(--t-label); color:var(--ink-3); }

/* Each entity the person reaches, indented under their name and marked with a
   small node. No connecting rule — the page's grammar is horizontal hairlines,
   not vertical stripes, and the node alone carries the "reached through" sense. */
.net__links { list-style:none; margin:0.55rem 0 0; padding:0; display:grid; gap:0.5rem; }
.link { display:flex; flex-wrap:wrap; align-items:baseline; gap:0.3rem 0.7rem;
  position:relative; padding-left:1rem; }
.link::before { content:""; position:absolute; left:0; top:0.5em; width:5px; height:5px;
  border-radius:50%; background:var(--ink-3); }
.link__name { font:500 var(--t-base)/1.25 var(--data); color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--rule-strong); transition:border-color 0.15s var(--ease); }
.link__name:hover { border-bottom-color:var(--ink); }
.link__role { font-size:var(--t-label); color:var(--ink-2); }
.link__status { font-size:var(--t-label); color:var(--ink-3); }
/* A liquidated (but still-listed) entity: state tinted like a superseded seal. */
.link__status--liquidated, .link__status--absent { color:var(--superseded); }

/* An entity no longer in the register: dimmed, its node hollowed. */
.link--gone .link__name { color:var(--ink-3); }
.link--gone::before { background:var(--paper); border:1px solid var(--superseded); }


/* ==========================================================================
   ASYDATA control kit
   One radius, one height, one motion per role — the system's rule that a field,
   a pill and a card each get exactly one of each, so nothing drifts.
   ========================================================================== */

.load {
  height:36px; padding:0 1rem; border:1px solid var(--rule-strong);
  border-radius:var(--r-card); background:var(--surface); color:var(--ink);
  font:500 var(--t-caption)/1 var(--data); cursor:pointer;
  transition:background .12s var(--ease), border-color .12s var(--ease);
}
.load:hover { background:var(--paper-sunk); border-color:var(--ink-3); }

/* The tonal variant: brand tint, brand text. Reserved for the one action a
   screen is actually about — the single-voice rule means it cannot be everywhere. */
.load--primary { background:var(--cert-soft, var(--cert-tint)); border-color:transparent; color:var(--cert-deep); }

.filter select, .filter input {
  height:36px; padding:0 0.75rem; border:1px solid var(--rule);
  border-radius:var(--r-field); background:var(--surface); color:var(--ink);
  font:400 var(--t-base)/1 var(--data);
}
.filter select:focus, .filter input:focus,
.request__field:focus-visible {
  outline:none; border-color:var(--cert); box-shadow:0 0 0 3px var(--cert-tint);
}
.filter__label {
  font:600 var(--t-label)/1.45 var(--data); letter-spacing:0.025em;
  text-transform:uppercase; color:var(--ink-2);
}

/* Metadata under a title, row meta, field help — the most used step after body. */
.section-note, .attribution { font-size:var(--t-caption); line-height:1.5; }

/* Table headings and section labels sit at the same rung as field labels. */
.acts__caem, .people__role, .link__role, .contract__buyer {
  font-size:var(--t-caption); color:var(--ink-2);
}