/* ============================================
   LEXEMER, NGO registry

   Built on the workspace's design language so the two read as one product:
   the same teal palette, the same 16px card radius and soft shadows, the
   same tight type scale. Token names are deliberately the workspace's own
   (--ws-*) rather than a parallel set, so a change there is a change here.

   One rule specific to these pages: colour never carries meaning on its own.
   Every verdict states its answer in words, because a funder may be
   colour-blind, printing the page, or pasting it into an email that strips
   styling. And the answer has to survive all three.
   ============================================ */

/* These are the workspace's live values. The second :root in
   workspace.css, which supersedes the teal block above it. The current
   design is violet and flat: --ws-shadow and --ws-shadow-soft are both
   `none`, so every `box-shadow: var(--ws-shadow-soft)` below resolves to
   nothing and the cards sit on borders alone. Keep them as variables rather
   than deleting them, so restoring shadows in the workspace restores them
   here too. */
body.reg-page {
  --ws-bg: #f6f5f8;
  --ws-surface: #ffffff;
  --ws-surface-soft: #f1f0f4;
  --ws-surface-teal: #f7f6fa;
  --ws-text: #17161a;
  --ws-muted: #6c6a73;
  --ws-faint: #98959e;
  --ws-border: #e0dee5;
  --ws-border-strong: #c7c4ce;
  --ws-accent: #6a4fa3;
  --ws-accent-bright: #7c5fbb;
  --ws-accent-soft: #f1ecfa;
  --ws-shadow: none;
  --ws-shadow-soft: none;
  --ws-on-accent: #ffffff;

  --reg-ok-bg: #eef7f0;
  --reg-ok-border: #c6e0cd;
  --reg-ok-text: #226b3a;
  --reg-warn-bg: #fdf5e6;
  --reg-warn-border: #ecd9ae;
  --reg-warn-text: #8a6413;
  --reg-alert-bg: #fceeee;
  --reg-alert-border: #e8c4c4;
  --reg-alert-text: #a64242;
  --reg-none-bg: #f5f4f7;
  --reg-none-border: #e0dee5;
  --reg-none-text: #6c6a73;

  /* The tag an organisation's name sits in: a gold fill, dark lettering,
     and a thin outline offset behind it. The soft pair is the quieter
     version used down a list of results. */
  --reg-tag-fill: #ecc24f;
  --reg-tag-ink: #1d1b14;
  --reg-tag-line: #2a2a24;
  --reg-tag-soft: #f6e8c0;
  --reg-tag-soft-line: #b39a58;

  margin: 0;
  background: var(--ws-bg);
  color: var(--ws-text);
}

html.theme-dark body.reg-page {
  --ws-bg: #0c0c0e;
  --ws-surface: #131215;
  --ws-surface-soft: #18171b;
  --ws-surface-teal: #151417;
  --ws-text: #ededf0;
  --ws-muted: #9a99a0;
  --ws-faint: #68676d;
  --ws-border: #2a2930;
  --ws-border-strong: #3a3941;
  --ws-accent: #c0a9ec;
  --ws-accent-bright: #d3c3f5;
  --ws-accent-soft: #241d33;
  --ws-shadow: none;
  --ws-shadow-soft: none;
  --ws-on-accent: #1a1226;

  --reg-ok-bg: #13251a;
  --reg-ok-border: #2b4c35;
  --reg-ok-text: #8ed5a2;
  --reg-warn-bg: #26200f;
  --reg-warn-border: #524321;
  --reg-warn-text: #e5c273;
  --reg-alert-bg: #271615;
  --reg-alert-border: #552e2c;
  --reg-alert-text: #ef8b8b;
  --reg-none-bg: #151418;
  --reg-none-border: #2a2930;
  --reg-none-text: #9a99a0;

  --reg-tag-fill: #e2b94f;
  --reg-tag-ink: #15130c;
  --reg-tag-line: #d9dee7;
  --reg-tag-soft: #3d3627;
  --reg-tag-soft-line: #9d8752;
}

.reg-main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 30px 22px 70px;
  font-family: var(--lexemer-font-sans, Arial, Helvetica, sans-serif);
  line-height: 1.55;
}

.reg-main h1 { font-size: 25px; line-height: 1.2; margin: 0 0 8px; letter-spacing: -.01em; }
.reg-main h2 { font-size: 15px; margin: 36px 0 10px; letter-spacing: -.005em; }
.reg-main h3 { font-size: 13px; margin: 0 0 5px; }
.reg-main a  { color: var(--ws-accent-bright); }

/* ---- header ---- */
.reg-crumbs { font-size: 11px; color: var(--ws-muted); margin-bottom: 14px; }

.reg-facts {
  display: flex; flex-wrap: wrap; gap: 7px 14px;
  margin: 0 0 15px; padding: 0; font-size: 12px; color: var(--ws-muted);
}
.reg-facts span { white-space: nowrap; }

.reg-summary {
  margin: 0; padding: 13px 16px; border-radius: 14px; font-size: 13px;
  border: 1px solid var(--ws-border); background: var(--ws-surface);
  box-shadow: var(--ws-shadow-soft);
}
.reg-summary-ok      { background: var(--reg-ok-bg);    border-color: var(--reg-ok-border);    color: var(--reg-ok-text); }
/* What the register lists, stated without a verdict: neutral, with the
   accent on the edge so it still reads as the page's headline. */
.reg-summary-info    { background: var(--ws-surface);   border-color: var(--ws-border);        color: var(--ws-text);
                       border-left: 3px solid var(--ws-accent); }
.reg-summary-warn    { background: var(--reg-warn-bg);  border-color: var(--reg-warn-border);  color: var(--reg-warn-text); }
.reg-summary-alert   { background: var(--reg-alert-bg); border-color: var(--reg-alert-border); color: var(--reg-alert-text); }
.reg-summary-unknown { background: var(--reg-none-bg);  border-color: var(--reg-none-border);  color: var(--reg-none-text); }

.reg-declared-warning, .reg-fixture-warning {
  margin: 0 0 18px; padding: 12px 16px; border-radius: 14px; font-size: 12.5px;
  background: var(--reg-warn-bg); color: var(--reg-warn-text);
  border: 1px solid var(--reg-warn-border);
}
.reg-fixture-warning { border-style: dashed; }

/* ---- the organisation's name, as a tag ----
   A gold label with pointed ends, and a thin outline of the same shape set
   up and to the left behind it. Both shapes are clip-paths sized in em, so
   the points keep their angle however long the name is. The outline is a
   hollow polygon (evenodd: the outer edge, then the inner edge), so the
   page, or a row's hover colour, shows through its middle. */
.reg-name-tag {
  --tip: .55em;
  --line: 1.5px;
  --shift: .2em;
  position: relative; isolation: isolate;
  display: inline-block; max-width: calc(100% - var(--shift));
  margin: var(--shift) 0 0 var(--shift);
  padding: .2em calc(var(--tip) + .45em);
  color: var(--reg-tag-ink);
  letter-spacing: .03em;
}
.reg-name-tag::before,
.reg-name-tag::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
}
.reg-name-tag::before {
  transform: translate(calc(-1 * var(--shift)), calc(-1 * var(--shift)));
  background: var(--reg-tag-line);
  clip-path: polygon(evenodd,
    var(--tip) 0, calc(100% - var(--tip)) 0, 100% 50%,
    calc(100% - var(--tip)) 100%, var(--tip) 100%, 0 50%, var(--tip) 0,
    calc(var(--tip) + var(--line)) var(--line),
    calc(100% - var(--tip) - var(--line)) var(--line),
    calc(100% - var(--line) * 1.6) 50%,
    calc(100% - var(--tip) - var(--line)) calc(100% - var(--line)),
    calc(var(--tip) + var(--line)) calc(100% - var(--line)),
    calc(var(--line) * 1.6) 50%,
    calc(var(--tip) + var(--line)) var(--line));
}
.reg-name-tag::after {
  background: var(--reg-tag-fill);
  clip-path: polygon(
    var(--tip) 0, calc(100% - var(--tip)) 0, 100% 50%,
    calc(100% - var(--tip)) 100%, var(--tip) 100%, 0 50%);
}

/* Down a list of results the full gold would be twenty-five alarms, so the
   rows carry the same shape in a quieter tone. */
.reg-name-tag-soft {
  --tip: .5em;
  --line: 1px;
  --shift: .22em;
  padding: .16em calc(var(--tip) + .4em);
  color: var(--ws-text);
}
.reg-name-tag-soft::before { background: var(--reg-tag-soft-line); }
.reg-name-tag-soft::after  { background: var(--reg-tag-soft); }

.reg-main .reg-profile-head h1 { font-size: 24px; letter-spacing: -.005em; }

/* ---- profile head: address, kind and PAN as one row of facts ----
   Each fact is a tile in the same "listed" colours as the approval cards
   below (--reg-listed*, defined with them): an icon in a filled badge, a
   small label, and the value in the page's own ink. */
.reg-profile-facts {
  list-style: none; display: flex; flex-wrap: wrap; gap: 10px;
  margin: 16px 0 0; padding: 0;
}
.reg-profile-facts li {
  display: flex; align-items: center; gap: 11px; min-width: 0;
  padding: 9px 16px 9px 9px; border-radius: 14px;
  border: 1px solid var(--reg-listed-border);
  background: linear-gradient(180deg, var(--reg-listed-soft) 0%, var(--ws-surface) 100%);
}
.reg-fact-icon {
  flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--reg-listed); color: var(--reg-listed-ink);
}
.reg-fact-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.reg-fact-label {
  font-size: 10px; font-weight: 750; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ws-muted); line-height: 1.2;
}
.reg-fact-value {
  font-size: 14px; font-weight: 650; line-height: 1.3;
  color: var(--ws-text); overflow-wrap: anywhere;
}
@media (max-width: 560px) {
  .reg-profile-facts li { flex: 1 1 0; }
  .reg-profile-facts .reg-fact-address { flex-basis: 100%; }
}

/* The starred street ("Plo* **, ****"), a shade quieter than the place. */
.reg-masked { color: var(--ws-faint); letter-spacing: .03em; }
.reg-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .02em;
}

/* ---- the approval cards ----
   The register is named once, in the small heading over the cards, with
   the date it was read. Each card leads with the approval itself; whether
   the register lists it is the pill beside it. */
.reg-approvals { margin-top: 28px; }
.reg-approvals-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0 0 12px;
}
.reg-main .reg-approvals-head h2 {
  margin: 0; font-size: 11px; font-weight: 750; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ws-muted);
}

.reg-matrix {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(198px, 1fr));
}

.reg-cell {
  position: relative; overflow: hidden;
  border: 1px solid var(--ws-border); border-radius: 16px;
  padding: 16px 17px; background: var(--ws-surface);
  box-shadow: var(--ws-shadow-soft);
  transition: border-color .15s ease, transform .15s ease;
}
.reg-cell-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 0 12px;
}
.reg-main .reg-cell-scheme {
  margin: 0; font-size: 22px; font-weight: 750; line-height: 1.1;
  letter-spacing: -.01em; color: var(--ws-text);
}
.reg-cell-question { margin: 0 0 7px; font-size: 11px; color: var(--ws-muted); }
.reg-cell-verdict {
  margin: 0; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  font-size: 11px; font-weight: 700; line-height: 1.2;
  border: 1px solid var(--reg-none-border); background: var(--reg-none-bg); color: var(--reg-none-text);
}
.reg-cell-verdict::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.reg-cell-note     { margin: 0 0 12px; font-size: 11.5px; color: var(--ws-muted); }

/* "Listed" is a listing, not a clearance, so it is not painted green. The
   accent marks it as present; a register's own "surrendered" or "cancelled"
   gets amber, a fact worth a second look rather than an alarm. */
/* A listed approval is the thing a visitor came to find, so it carries the
   page's accent: a strip across the top, a wash of the accent fading into
   the card, a larger name and a solid pill with a tick. The cards the
   register does not list stay flat and dashed, which is what makes these
   stand out. Colours come from the site theme, light and dark alike. */
/* "Listed" colours. Light: the theme's bronze. Dark: the site's own gold
   (the consent button's #c9a84c); the dark theme's accent is a pale silver
   that would leave these cards as flat as the rest. */
.reg-page {
  --reg-listed: var(--ws-accent);
  --reg-listed-ink: var(--ws-on-accent, #fff);
  --reg-listed-soft: var(--ws-accent-soft);
  --reg-listed-border: var(--goldbdr, var(--ws-border-strong));
}
html.theme-dark .reg-page {
  --reg-listed: #c9a84c;
  --reg-listed-ink: #090a0c;
  --reg-listed-soft: rgba(201, 168, 76, .12);
  --reg-listed-border: rgba(201, 168, 76, .42);
}
.reg-cell-yes {
  border-color: var(--reg-listed-border);
  background: linear-gradient(180deg, var(--reg-listed-soft) 0%, var(--ws-surface) 85%);
  padding-top: 19px;
}
.reg-cell-yes::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--reg-listed);
}
.reg-main .reg-cell-yes .reg-cell-scheme { font-size: 26px; letter-spacing: -.02em; }
.reg-cell-yes .reg-cell-verdict {
  background: var(--reg-listed); border-color: transparent;
  color: var(--reg-listed-ink);
}
.reg-cell-yes .reg-cell-verdict::before {
  width: 8px; height: 4px; border-radius: 0; background: none;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-1px) rotate(-45deg);
}
.reg-cell-yes .reg-cell-detail dd { color: var(--ws-text); }

/* FCRA is the rare one: about 14,000 active associations against several
   hundred thousand 12A/80G holders. Its card's edge carries a band of
   light that travels round it, so it reads as the find it is.

   Built for every browser, Safari and older iPhones included: no
   @property, no masks. The ring (.reg-fcra-ring, a real element in the
   card) holds an oversized square painted with a conic gradient that
   turns with a plain transform: rotate, and a cover inset 2px painted
   like the card, so only a 2px edge of the turning gradient shows. The
   card's content sits above both. With reduced motion asked for, the ring
   stays still, a gold edge with its glint parked at one corner. */
.reg-cell-fcra::before { display: none; }   /* the ring replaces the top strip */
.reg-cell-fcra > :not(.reg-fcra-ring) { position: relative; z-index: 2; }
.reg-fcra-ring {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0;
  border-radius: 15px; overflow: hidden; pointer-events: none;
  /* Older Safari ignores overflow + border-radius for a transformed
     child unless the clipping box has its own layer. */
  -webkit-transform: translateZ(0); transform: translateZ(0);
}
.reg-fcra-ring::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 300%; height: 0; padding-bottom: 300%;   /* a square, sized from the width */
  background: var(--reg-listed);                   /* plain gold edge without conic-gradient */
  background: conic-gradient(
    var(--reg-listed-border) 0deg,
    var(--reg-listed) 40deg,
    #fff6dc 62deg,
    var(--reg-listed) 84deg,
    var(--reg-listed-border) 130deg,
    var(--reg-listed-border) 360deg);
  -webkit-transform: translate(-50%, -50%) rotate(0deg);
          transform: translate(-50%, -50%) rotate(0deg);
  -webkit-animation: reg-fcra-spin 4s linear infinite;
          animation: reg-fcra-spin 4s linear infinite;
}
.reg-fcra-ring::after {
  content: ""; position: absolute; top: 2px; right: 2px; bottom: 2px; left: 2px;
  border-radius: 13px;
  background: linear-gradient(180deg, var(--reg-listed-soft) 0%, var(--ws-surface) 85%), var(--ws-surface);
}
@-webkit-keyframes reg-fcra-spin {
  to { -webkit-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes reg-fcra-spin {
  to { -webkit-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .reg-fcra-ring::before { -webkit-animation: none; animation: none; }
}
@media (hover: hover) {
  .reg-cell-yes:hover { transform: translateY(-2px); border-color: var(--reg-listed); }
}
@media (prefers-reduced-motion: reduce) {
  .reg-cell, .reg-cell-yes:hover { transition: none; transform: none; }
}
.reg-cell-expiring { background: var(--reg-warn-bg);  border-color: var(--reg-warn-border); }
.reg-cell-expired,
.reg-cell-no       { background: var(--reg-warn-bg);  border-color: var(--reg-warn-border); }
.reg-cell-expiring .reg-cell-verdict,
.reg-cell-expired .reg-cell-verdict,
.reg-cell-no .reg-cell-verdict { background: var(--ws-surface); border-color: var(--reg-warn-border); color: var(--reg-warn-text); }
.reg-cell-unknown  { background: var(--reg-none-bg);  border-color: var(--reg-none-border); box-shadow: none; }
.reg-main .reg-cell-unknown .reg-cell-scheme { color: var(--ws-faint); }
.reg-cell-unknown .reg-cell-verdict { background: transparent; border-style: dashed; border-color: var(--ws-border-strong); color: var(--ws-faint); }
.reg-cell-unknown .reg-cell-verdict::before { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }

.reg-cell-declared {
  margin: 0 0 9px; padding: 3px 8px; display: inline-block;
  font-size: 10px; font-weight: 750; letter-spacing: .02em;
  border: 1px dashed var(--reg-warn-border); border-radius: 7px;
  background: var(--reg-warn-bg); color: var(--reg-warn-text);
}

.reg-cell-detail {
  margin: 0; display: grid; grid-template-columns: auto 1fr;
  gap: 3px 11px; font-size: 11px;
}
.reg-cell-detail dt { color: var(--ws-faint); }
.reg-cell-detail dd { margin: 0; word-break: break-word; color: var(--ws-muted); }
.reg-cell-source { margin: 10px 0 0; font-size: 11px; }

.reg-caveat {
  margin: 18px 0 0; font-size: 11.5px; color: var(--ws-muted);
  border-left: 2px solid var(--ws-border-strong); padding-left: 13px;
  max-width: 88ch;
}
.reg-caveat p { margin: 0; }
.reg-caveat p + p { margin-top: 7px; }
.reg-caveat strong { color: var(--ws-text); }

/* ---- obligations ---- */
.reg-section-intro { margin: 0 0 13px; font-size: 12px; color: var(--ws-muted); }

.reg-obligation-list { list-style: none; margin: 0; padding: 0; }
.reg-obligation {
  border: 1px solid var(--ws-border); border-left: 3px solid var(--ws-border-strong);
  border-radius: 14px; padding: 13px 16px; margin-bottom: 9px;
  background: var(--ws-surface); box-shadow: var(--ws-shadow-soft);
}
.reg-obligation-due {
  margin: 0 0 4px; font-size: 11px; color: var(--ws-muted);
  display: flex; gap: 10px; align-items: baseline;
}
.reg-urgency { font-weight: 750; letter-spacing: .02em; }
.reg-obligation-title   { margin: 0 0 4px; font-weight: 650; font-size: 13px; }
.reg-obligation-basis   { margin: 0; font-size: 11.5px; color: var(--ws-muted); }
.reg-obligation-penalty { margin: 5px 0 0; font-size: 11.5px; color: var(--reg-alert-text); }

.reg-obligation.reg-overdue { border-left-color: var(--reg-alert-text); }
.reg-obligation.reg-overdue .reg-urgency { color: var(--reg-alert-text); }
.reg-obligation.reg-urgent  { border-left-color: var(--reg-warn-text); }
.reg-obligation.reg-urgent .reg-urgency  { color: var(--reg-warn-text); }
.reg-obligation.reg-soon    { border-left-color: var(--ws-accent-bright); }

/* ---- carry on into a tool ---- */
.reg-carryon-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
}
.reg-carryon-card {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--ws-border); border-radius: 16px;
  padding: 15px 17px; background: var(--ws-surface-teal);
  box-shadow: var(--ws-shadow-soft);
  transition: border-color .15s ease, background .15s ease;
}
.reg-carryon-card:hover {
  border-color: var(--ws-accent); background: var(--ws-accent-soft);
}
.reg-carryon-label {
  display: block; font-weight: 750; font-size: 13px;
  color: var(--ws-accent-bright); margin-bottom: 3px;
}
.reg-carryon-why { display: block; font-size: 11.5px; color: var(--ws-muted); }

/* ---- buttons and fields, matching the workspace ---- */
.reg-watch-row, .reg-search-row { display: flex; gap: 9px; flex-wrap: wrap; }
.reg-watch-row input, .reg-search-row input,
.reg-field input, .reg-field select, #reg-bulk {
  padding: 11px 13px; font-size: 13px;
  border: 1px solid var(--ws-border); border-radius: 10px;
  background: var(--ws-surface); color: var(--ws-text); font-family: inherit;
}
.reg-watch-row input, .reg-search-row input { flex: 1 1 250px; min-width: 0; }
.reg-field input, .reg-field select, #reg-bulk { width: 100%; box-sizing: border-box; }
.reg-watch-row input:focus, .reg-search-row input:focus,
.reg-field input:focus, .reg-field select:focus, #reg-bulk:focus {
  outline: none; border-color: var(--ws-accent);
  box-shadow: 0 0 0 3px var(--ws-accent-soft);
}

.reg-watch-row button, .reg-search-row button, .reg-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 41px; padding: 0 19px; border-radius: 10px;
  border: 1px solid transparent; cursor: pointer;
  background: var(--ws-accent); color: var(--ws-on-accent);
  font-size: 12px; font-weight: 750; font-family: inherit;
  text-decoration: none;
  transition: filter .15s ease;
}
.reg-watch-row button:hover, .reg-search-row button:hover, .reg-button:hover {
  filter: brightness(1.08);
}

.reg-watch {
  margin-top: 34px; padding: 22px; border-radius: 16px;
  border: 1px solid var(--ws-border); background: var(--ws-surface);
  box-shadow: var(--ws-shadow-soft);
}
.reg-watch h2 { margin-top: 0; }
.reg-watch p  { font-size: 12.5px; color: var(--ws-muted); }
.reg-watch-form label, .reg-pf-label, .reg-search-form label {
  display: block; font-size: 11px; color: var(--ws-muted); margin-bottom: 6px;
}
.reg-watch-note { margin: 9px 0 0; font-size: 11px; }

/* ---- search ---- */
.reg-search-head { margin-bottom: 26px; }
.reg-lede { font-size: 14px; color: var(--ws-muted); margin: 0 0 20px; max-width: 62ch; }

.reg-result-count { font-size: 11px; color: var(--ws-muted); margin: 0 0 11px; }
.reg-result-list { list-style: none; margin: 0; padding: 0; }
.reg-result-list > li {
  display: flex; flex-wrap: wrap; gap: 9px 16px; align-items: center;
  justify-content: space-between; padding: 14px 17px; margin-bottom: 9px;
  border: 1px solid var(--ws-border); border-radius: 16px;
  background: var(--ws-surface); box-shadow: var(--ws-shadow-soft);
}
.reg-result-list a { text-decoration: none; color: inherit; }
.reg-result-name  { display: block; font-weight: 650; font-size: 13.5px; }
.reg-result-where { display: block; font-size: 11px; color: var(--ws-muted); }
.reg-result-chips { display: flex; gap: 5px; flex-wrap: wrap; }

/* The search results page: one table-like panel, a row per organisation in
   three columns (who, where, what the register lists). The city pages still
   use the plain .reg-result-list cards above; everything here is scoped to
   .reg-result-table so they are not affected. */
.reg-main .reg-results-title { margin: 4px 0 4px; font-size: 22px; }
.reg-results-title span { color: var(--ws-accent); }
.reg-results .reg-result-count { font-size: 12px; margin: 0 0 16px; }

.reg-result-table {
  --reg-result-grid: 40px minmax(0, 2fr) minmax(0, 1.25fr) minmax(170px, 1.1fr) 16px;
  border: 1px solid var(--ws-border); border-radius: 16px;
  background: var(--ws-surface); overflow: hidden;
}
.reg-result-cols {
  display: grid; grid-template-columns: var(--reg-result-grid); gap: 18px;
  padding: 10px 20px; border-bottom: 1px solid var(--ws-border);
  background: var(--ws-surface-soft);
  font-size: 10.5px; font-weight: 750; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ws-muted);
}
.reg-result-table .reg-result {
  position: relative;
  display: grid; grid-template-columns: var(--reg-result-grid); gap: 18px; align-items: center;
  margin: 0; padding: 15px 20px;
  border: 0; border-top: 1px solid var(--ws-border); border-radius: 0;
  background: transparent; box-shadow: none;
  transition: background .15s ease;
}
.reg-result-table .reg-result:first-child { border-top: 0; }
.reg-result-table .reg-result:hover,
.reg-result-table .reg-result:focus-within { background: var(--ws-surface-soft); }

.reg-result-avatar {
  width: 40px; height: 40px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ws-accent-soft); color: var(--ws-accent);
  font-size: 13px; font-weight: 750; letter-spacing: .03em;
}

.reg-result-who { min-width: 0; }
.reg-main .reg-result-table .reg-result-name {
  display: block; font-size: 14px; font-weight: 700; line-height: 1.35;
  color: var(--ws-text); text-decoration: none; overflow-wrap: anywhere;
}
/* The name is the link; stretched over the row so the whole row opens it. */
.reg-result-table .reg-result-name::after { content: ""; position: absolute; inset: 0; }
/* The searched words, inside the name's tag: underlined in the tag's own
   outline colour rather than boxed, so the tag still reads as one shape. */
.reg-result-table .reg-result-name mark {
  color: inherit; padding: 0; background: none;
  text-decoration: underline; text-decoration-color: var(--reg-tag-soft-line);
  text-decoration-thickness: 2px; text-underline-offset: 2px;
}
.reg-result-meta {
  display: flex; flex-wrap: wrap; gap: 3px 0; margin: 3px 0 0;
  font-size: 11.5px; color: var(--ws-muted);
}
.reg-result-meta > span + span::before { content: "·"; margin: 0 8px; color: var(--ws-faint); }

.reg-result-table .reg-result-where {
  display: flex; align-items: flex-start; gap: 8px; min-width: 0;
  font-size: 11.5px; color: var(--ws-muted);
}
.reg-result-table .reg-result-where svg { flex: none; margin-top: 2px; color: var(--ws-faint); }
.reg-result-table .reg-result-where div { min-width: 0; }
.reg-result-state { display: block; font-size: 13px; font-weight: 650; color: var(--ws-text); }
.reg-result-street {
  display: block; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.reg-result-table .reg-result-chips { list-style: none; margin: 0; padding: 0; gap: 6px; }
.reg-result-table .reg-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 9px; font-size: 10.5px;
}
.reg-result-table .reg-chip b { font-weight: 800; }
.reg-result-table .reg-chip span { font-weight: 550; letter-spacing: 0; opacity: .85; }
/* Struck through on the approval only: the register's word for why stays legible. */
.reg-result-table .reg-chip-no,
.reg-result-table .reg-chip-expired { text-decoration: none; }
.reg-result-table .reg-chip-no b,
.reg-result-table .reg-chip-expired b { text-decoration: line-through; }
.reg-result-none { font-size: 11.5px; color: var(--ws-faint); }

.reg-result-go { color: var(--ws-faint); transition: transform .15s ease, color .15s ease; }
.reg-result-table .reg-result:hover .reg-result-go { color: var(--ws-accent); transform: translateX(2px); }

/* Phones and narrow windows: the columns stack beside the badge. */
@media (max-width: 760px) {
  .reg-result-cols { display: none; }
  .reg-result-table .reg-result {
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-areas: "avatar who" "avatar where" "avatar chips";
    gap: 8px 13px; align-items: start; padding: 14px 15px;
  }
  .reg-result-avatar { grid-area: avatar; width: 36px; height: 36px; border-radius: 10px; font-size: 12px; }
  .reg-result-who { grid-area: who; }
  .reg-result-table .reg-result-where { grid-area: where; }
  .reg-result-table .reg-result-chips { grid-area: chips; }
  .reg-result-go { display: none; }
  .reg-result-state { display: inline; font-size: 12px; }
  .reg-result-street { display: inline; white-space: normal; }
  .reg-result-street::before { content: " · "; color: var(--ws-faint); }
}

/* ---- toolbar: where you are, and the quick search ----
   One slim row on results and profile pages, pinned under the site header
   (64px on this page at every width; see site-beige-chrome.css), so the
   search stays in reach however far down someone has scrolled. Solid
   background with a hairline, so content scrolls under it cleanly. */
.reg-toolbar {
  position: sticky; top: 64px; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin: -12px 0 22px; padding: 10px 0;
  border-bottom: 1px solid var(--ws-border);
  background: var(--ws-bg);
}
.reg-toolbar .reg-crumbs {
  min-width: 0; margin: 0; font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.reg-crumbs a { color: var(--ws-muted); text-decoration: none; }
.reg-crumbs a:hover { color: var(--ws-accent); text-decoration: underline; }
.reg-toolbar .reg-crumbs span:last-child { color: var(--ws-text); }

/* Looks like a field, opens the quick search: the same panel as Ctrl+K. */
.reg-search-trigger {
  flex: 0 1 320px; min-width: 0; height: 36px;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 0 5px 0 13px;
  border: 1px solid var(--ws-border-strong); border-radius: 999px;
  background: var(--ws-surface); color: var(--ws-faint);
  font: inherit; font-size: 13px; text-align: left; cursor: text;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.reg-search-trigger:hover {
  border-color: var(--ws-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ws-accent) 12%, transparent);
}
.reg-search-trigger svg { flex: none; width: 15px; height: 15px; color: var(--ws-accent); }
.reg-search-trigger-text {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.reg-search-trigger.has-query .reg-search-trigger-text { color: var(--ws-text); }
.reg-search-trigger-keys { flex: none; display: inline-flex; gap: 3px; }
.reg-search-trigger-keys kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 24px; padding: 0 6px;
  border: 1px solid var(--ws-border); border-bottom-width: 2px; border-radius: 999px;
  background: var(--ws-surface-soft); color: var(--ws-muted);
  font: inherit; font-size: 10.5px; font-weight: 600; line-height: 1;
}

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

/* Phones: the search takes the row. The breadcrumb's job is done by the
   page heading right below it and by the site menu, and there is no
   keyboard for the shortcut. */
@media (max-width: 640px) {
  .reg-toolbar .reg-crumbs, .reg-search-trigger-keys { display: none; }
  .reg-search-trigger { flex: 1 1 auto; height: 40px; font-size: 14px; }
}

.reg-chip {
  font-size: 10px; font-weight: 750; letter-spacing: .03em;
  padding: 4px 8px; border-radius: 7px; border: 1px solid; white-space: nowrap;
}
/* Same reasoning as the cells: a listed approval is marked present, not
   cleared. An ended one is struck through as well as amber, so the
   difference survives without colour. */
.reg-chip-yes      { background: var(--ws-accent-soft); border-color: transparent;            color: var(--ws-accent); }
.reg-chip-expiring { background: var(--reg-warn-bg);  border-color: var(--reg-warn-border);  color: var(--reg-warn-text); }
.reg-chip-expired,
.reg-chip-no       { background: var(--reg-warn-bg);  border-color: var(--reg-warn-border);  color: var(--reg-warn-text);
                     text-decoration: line-through; }
.reg-chip-unknown  {
  background: transparent; border-style: dashed;
  border-color: var(--ws-border-strong); color: var(--ws-faint); opacity: .8;
}

.reg-noresults, .reg-empty p { font-size: 13px; color: var(--ws-muted); max-width: 62ch; }

/* ---- explainer ---- */
.reg-explainer-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
}
.reg-explainer-grid article {
  border: 1px solid var(--ws-border); border-radius: 16px;
  padding: 15px 17px; background: var(--ws-surface); box-shadow: var(--ws-shadow-soft);
}
.reg-explainer-grid p { margin: 0; font-size: 11.5px; color: var(--ws-muted); }
.reg-explainer-grid p + p { margin-top: 9px; }
/* The registry attribution sits under the answer, quieter than it and set off
   by a hairline, so the card reads as a statement with a source rather than
   two sentences of equal weight. */
.reg-explainer-src {
  padding-top: 8px; border-top: 1px solid var(--ws-border);
  font-size: 10.5px; letter-spacing: .01em; color: var(--ws-faint, var(--ws-muted));
  opacity: .78;
}

/* ---- funder portfolio ---- */
.reg-portfolio { margin-top: 20px; }
.reg-pf-row {
  display: grid; gap: 11px 18px; align-items: center;
  grid-template-columns: minmax(200px, 2fr) auto minmax(180px, 1.4fr) auto;
  border: 1px solid var(--ws-border); border-left: 3px solid var(--ws-border-strong);
  border-radius: 16px; padding: 15px 18px; margin-bottom: 9px;
  background: var(--ws-surface); box-shadow: var(--ws-shadow-soft);
}
.reg-pf-rank0 { border-left-color: var(--reg-alert-text); }
.reg-pf-rank1 { border-left-color: var(--reg-warn-text); }
.reg-pf-rank2 { border-left-color: var(--ws-accent-bright); }

.reg-pf-name {
  display: block; font-weight: 650; font-size: 13.5px;
  color: var(--ws-text); text-decoration: none;
}
.reg-pf-name:hover { color: var(--ws-accent-bright); }
.reg-pf-where   { display: block; font-size: 11px; color: var(--ws-muted); }
.reg-pf-summary { display: block; font-size: 11.5px; color: var(--ws-muted); margin-top: 3px; }

.reg-pf-reason { display: block; font-size: 11.5px; font-weight: 700; margin-top: 3px; }
.reg-pf-reason0 { color: var(--reg-alert-text); }
.reg-pf-reason1 { color: var(--reg-warn-text); }
.reg-pf-reason2 { color: var(--ws-accent-bright); }

.reg-pf-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.reg-pf-next-date { display: block; font-size: 11.5px; font-weight: 700; }
.reg-pf-next-date.reg-overdue { color: var(--reg-alert-text); }
.reg-pf-next-date.reg-urgent  { color: var(--reg-warn-text); }
.reg-pf-next-what { display: block; font-size: 11px; color: var(--ws-muted); }
.reg-pf-quiet { font-style: italic; }

.reg-pf-remove { margin: 0; }
.reg-pf-remove button {
  background: none; border: 1px solid var(--ws-border); border-radius: 9px;
  color: var(--ws-muted); font-size: 11px; padding: 7px 12px; cursor: pointer;
  font-family: inherit;
}
.reg-pf-remove button:hover { border-color: var(--reg-alert-text); color: var(--reg-alert-text); }

#reg-bulk {
  margin-bottom: 11px;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; resize: vertical;
}

.reg-pf-unresolved { margin-top: 28px; }
.reg-pf-candidates, .reg-pf-missing { list-style: none; margin: 0 0 16px; padding: 0; }
.reg-pf-candidates li, .reg-pf-missing li {
  padding: 11px 15px; margin-bottom: 7px; font-size: 12px;
  border: 1px solid var(--ws-border); border-radius: 14px; background: var(--ws-surface);
}
.reg-pf-candidates strong { display: block; margin-bottom: 3px; }
.reg-pf-candidates a { margin-right: 12px; font-size: 11.5px; }

/* ---- claim form ---- */
.reg-claim-form fieldset {
  border: 1px solid var(--ws-border); border-radius: 16px;
  padding: 18px 20px 20px; margin: 0 0 16px;
  background: var(--ws-surface); box-shadow: var(--ws-shadow-soft);
}
.reg-claim-form legend {
  font-weight: 750; font-size: 12.5px; padding: 0 8px; color: var(--ws-text);
}
.reg-field { display: block; margin-bottom: 14px; }
.reg-field > span { display: block; font-size: 12px; margin-bottom: 6px; color: var(--ws-text); }
.reg-field > span em { font-style: normal; color: var(--ws-muted); font-size: 11px; }
.reg-field-row {
  display: grid; gap: 0 15px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.reg-claim-scheme { grid-template-columns: minmax(240px, 2fr) minmax(140px, 1fr); }
.reg-err {
  display: block; margin-top: 5px; font-style: normal;
  font-size: 11px; color: var(--reg-alert-text);
}

/* ---- provenance ---- */
/* Provenance sits below the Note now, outside <main>, so it carries its own
   width and padding rather than inheriting the page's. Small type on
   purpose: it is there to be found when someone wants to check where a fact
   came from, not to compete with the answer. */
.reg-provenance {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 22px 44px;
  font-family: var(--lexemer-font-sans, Arial, Helvetica, sans-serif);
}
.reg-provenance h2 {
  margin: 0 0 7px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ws-faint);
}
.reg-provenance ul { margin: 0; padding-left: 16px; font-size: 10.5px; line-height: 1.6; color: var(--ws-faint); }
.reg-provenance li { margin-bottom: 3px; }
.reg-provenance a { color: var(--ws-muted); }
.reg-correction { font-size: 10.5px; line-height: 1.6; color: var(--ws-faint); margin: 8px 0 0; }

@media (max-width: 520px) {
  .reg-provenance { padding: 0 15px 34px; }
}

@media (max-width: 720px) {
  .reg-pf-row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .reg-claim-scheme { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .reg-main { padding: 22px 15px 50px; }
  .reg-main h1, .reg-main .reg-profile-head h1 { font-size: 22px; }
  .reg-matrix { grid-template-columns: 1fr; }
}

/* ============================================
   Quick search (Ctrl/Cmd+K)

   Same .ws-command-* class names as the workspace palette, so the two are
   one object to a user. Styled here as the registry's front door: a soft
   blurred backdrop, one calm field, the typed words marked in each name,
   recent organisations before anything is typed, and the keys kept in a
   footer rather than in the way.

   Colours are tokens only. On the hub the beige theme overrides --ws-*,
   elsewhere the violet workspace values apply, and both have a dark set.
   ============================================ */

.ws-command-palette {
  position: fixed; z-index: 900; inset: 0;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 24px 24px;
}
.ws-command-palette[hidden] { display: none; }

.ws-command-backdrop {
  position: absolute; inset: 0;
  background: rgba(24, 22, 16, .28);
  -webkit-backdrop-filter: blur(6px) saturate(115%);
  backdrop-filter: blur(6px) saturate(115%);
  animation: lex-ngo-fade .18s ease-out both;
}
html.theme-dark .ws-command-backdrop { background: rgba(0, 0, 0, .58); }

.ws-command-panel {
  position: relative; width: min(880px, 100%); max-height: 100%;
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--ws-border); border-radius: 16px;
  background: var(--ws-surface);
  box-shadow:
    0 1px 2px rgba(24, 22, 16, .04),
    0 8px 20px -6px rgba(24, 22, 16, .10),
    0 32px 72px -16px rgba(24, 22, 16, .30);
  animation: lex-ngo-rise .22s cubic-bezier(.16, 1, .3, 1) both;
}
html.theme-dark .ws-command-panel {
  border-color: var(--ws-border-strong);
  box-shadow: 0 32px 80px -12px rgba(0, 0, 0, .7);
}

@keyframes lex-ngo-fade { from { opacity: 0; } }
@keyframes lex-ngo-rise { from { opacity: 0; transform: translateY(-10px) scale(.985); } }

/* ---- the field ---- */
.ws-command-search {
  position: relative; flex: none; height: 60px;
  display: flex; align-items: center; gap: 14px;
  padding: 0 14px 0 22px; border-bottom: 1px solid var(--ws-border);
  color: var(--ws-faint);
  transition: color .15s ease;
}
/* The glass takes the accent once there is something to search for. */
.ws-command-search:has(input:not(:placeholder-shown)) { color: var(--ws-accent); }
.ws-command-search > svg { flex: none; width: 18px; height: 18px; }
.ws-command-search input {
  flex: 1; min-width: 0; height: 100%; padding: 0;
  border: 0; outline: 0; background: transparent;
  color: var(--ws-text); caret-color: var(--ws-accent);
  font: inherit; font-size: 17px; font-weight: 400; letter-spacing: -.01em;
}
/* site-beige.css rings every focused input from an id selector. Here the
   whole panel is the field and the caret shows focus, so the ring only
   boxes the text in. !important because nothing class-level outranks it. */
.ws-command-search input:focus-visible { outline: none !important; }
.ws-command-search input::placeholder { color: var(--ws-faint); opacity: .8; }
.ws-command-search input::-webkit-search-cancel-button { display: none; }

/* Searching: a hairline sweeps along the field's bottom edge. Quieter than
   a spinner, and it never moves the text. */
.ws-command-search::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ws-accent), transparent) no-repeat;
  background-size: 40% 100%; background-position: -70% 0;
  opacity: 0; transition: opacity .2s ease;
}
.lex-ngo-palette.is-loading .ws-command-search::after {
  opacity: 1; animation: lex-ngo-sweep 1.1s ease-in-out infinite;
}
@keyframes lex-ngo-sweep {
  from { background-position: -70% 0; }
  to   { background-position: 170% 0; }
}

.lex-ngo-clear, .lex-ngo-esc {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; background: transparent; cursor: pointer;
  color: var(--ws-faint); font: inherit;
}
.lex-ngo-clear {
  width: 28px; height: 28px; border-radius: 50%;
  transition: background .15s ease, color .15s ease;
}
.lex-ngo-clear:hover { background: var(--ws-surface-soft); color: var(--ws-text); }
.lex-ngo-clear[hidden] { display: none; }
.lex-ngo-clear svg { width: 14px; height: 14px; }
.lex-ngo-esc { height: 28px; padding: 0 4px; border-radius: 8px; }
.lex-ngo-esc:hover kbd { color: var(--ws-text); border-color: var(--ws-border-strong); }
.lex-ngo-cancel { display: none; font-size: 14px; color: var(--ws-accent); }

/* Keycaps. A heavier bottom edge reads as a key without any gradient. */
.lex-ngo-palette kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  border: 1px solid var(--ws-border); border-bottom-width: 2px; border-radius: 6px;
  background: var(--ws-surface); color: var(--ws-muted);
  font: inherit; font-size: 11px; font-weight: 600; line-height: 1;
}

/* ---- results ---- */
.ws-command-results {
  flex: 1; min-height: 0; max-height: min(56vh, 560px); overflow: auto;
  padding: 4px 8px 8px; overscroll-behavior: contain; scroll-padding: 8px;
}
.lex-ngo-group {
  margin: 0; padding: 12px 12px 6px;
  color: var(--ws-faint); font-size: 10.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
}

.ws-command-item {
  width: 100%; min-height: 58px; display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 14px; padding: 10px 12px;
  border: 0; border-radius: 11px; background: transparent;
  color: var(--ws-text); font: inherit; text-align: left; cursor: pointer;
  transition: background .12s ease, box-shadow .12s ease;
}
/* The beige theme's selected tint is close to its surface, so a hairline
   in the accent gives the highlighted row an edge. */
.ws-command-item.is-active {
  background: var(--ws-accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ws-accent) 16%, transparent);
}

.lex-ngo-avatar {
  width: 36px; height: 36px; flex: none; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ws-border); background: var(--ws-surface-soft);
  color: var(--ws-muted); font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.ws-command-item.is-active .lex-ngo-avatar {
  border-color: transparent; background: var(--ws-surface); color: var(--ws-accent);
  box-shadow: 0 1px 2px rgba(24, 22, 16, .08);
}
.lex-ngo-avatar svg { width: 16px; height: 16px; }

.lex-ngo-text { min-width: 0; display: grid; gap: 3px; }
.lex-ngo-name {
  font-size: 14.5px; font-weight: 600; letter-spacing: -.005em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lex-ngo-name mark {
  padding: 0 1px; border-radius: 3px; color: inherit;
  background: color-mix(in srgb, var(--ws-accent) 18%, transparent);
}
.lex-ngo-meta {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  font-size: 12.5px; color: var(--ws-muted); white-space: nowrap;
}
.lex-ngo-meta > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lex-ngo-dot {
  flex: none; width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; opacity: .55;
}
.lex-ngo-id { flex: none; font-variant-numeric: tabular-nums; letter-spacing: .04em; }

.lex-ngo-end { display: flex; align-items: center; gap: 10px; }
/* Capped so a row holding every registration still leaves the name room. */
.lex-ngo-chips {
  display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end;
  max-width: 360px;
}
.lex-ngo-chips:empty { display: none; }
.lex-ngo-palette .lex-ngo-enter {
  opacity: 0; transform: translateX(-4px);
  transition: opacity .12s ease, transform .12s ease;
}
.ws-command-item.is-active .lex-ngo-enter { opacity: 1; transform: none; }

.lex-ngo-all .lex-ngo-avatar { color: var(--ws-accent); }
.lex-ngo-all .lex-ngo-name { font-weight: 400; }

/* ---- empty, no match, offline ---- */
.lex-ngo-state {
  display: grid; justify-items: center; gap: 6px;
  padding: 40px 24px 44px; text-align: center;
}
.lex-ngo-state-icon {
  width: 46px; height: 46px; margin-bottom: 8px;
  display: grid; place-items: center; border-radius: 13px;
  border: 1px solid var(--ws-border); background: var(--ws-surface-soft);
  color: var(--ws-muted);
}
.lex-ngo-state-icon svg { width: 20px; height: 20px; }
.lex-ngo-state strong { font-size: 14.5px; font-weight: 600; color: var(--ws-text); }
.lex-ngo-state span { max-width: 46ch; font-size: 13px; line-height: 1.55; color: var(--ws-muted); }

/* ---- footer ---- */
.lex-ngo-foot {
  flex: none; display: flex; align-items: center; gap: 18px;
  min-height: 44px; padding: 0 18px;
  border-top: 1px solid var(--ws-border);
  background: color-mix(in srgb, var(--ws-surface-soft) 55%, var(--ws-surface));
  color: var(--ws-muted); font-size: 12px;
}
.lex-ngo-keys { display: inline-flex; align-items: center; gap: 4px; }
.lex-ngo-keys kbd { min-width: 20px; height: 20px; margin-right: 2px; font-size: 10.5px; }
.ws-command-summary {
  margin: 0 0 0 auto; padding: 0; border: 0;
  color: var(--ws-faint); font-size: 12px; font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .ws-command-backdrop, .ws-command-panel { animation: none; }
  .lex-ngo-palette.is-loading .ws-command-search::after { animation: none; background-position: 50% 0; }
}

/* The shortcut hint on the search page. Without it, Ctrl+K is folklore. */
.reg-kbd-hint {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  margin: 0 0 18px; padding: 8px 13px; border-radius: 10px;
  border: 1px solid var(--ws-border); background: var(--ws-surface);
  color: var(--ws-muted); font: inherit; font-size: 12px;
}
.reg-kbd-hint:hover { border-color: var(--ws-accent); color: var(--ws-text); }
.reg-kbd-hint kbd {
  font: inherit; font-size: 10px; font-weight: 700; padding: 2px 6px;
  border-radius: 5px; border: 1px solid var(--ws-border-strong);
  background: var(--ws-surface-soft); color: var(--ws-text);
}

/* Phones: no keyboard, so no keycaps. Esc becomes a Cancel button, and the
   footer keeps only the result count. 16px type stops iOS zooming the page
   when the field takes focus. */
@media (max-width: 520px) {
  .ws-command-palette { padding: 10px; }
  .ws-command-panel { border-radius: 14px; }
  .ws-command-search { height: 56px; gap: 12px; padding: 0 8px 0 16px; }
  .ws-command-search input { font-size: 16px; }
  .lex-ngo-esc { padding: 0 8px; }
  .lex-ngo-esc kbd { display: none; }
  .lex-ngo-cancel { display: inline; }
  .ws-command-results { max-height: 64vh; }
  .lex-ngo-chips, .lex-ngo-palette .lex-ngo-enter, .lex-ngo-keys { display: none; }
  .lex-ngo-foot { min-height: 38px; padding: 0 16px; }
}
/* ============================================
   Registry hub. Hero, one search, live counts

   The page previously led with a plain form and five near-identical cards,
   which read as unfinished. Three changes: a single search control that is
   obviously the way in, real counts from the register so the page has
   something to say, and a calmer card grid beneath.
   ============================================ */

.reg-hero {
  padding: 34px 32px 30px;
  margin-bottom: 26px;
  border: 1px solid var(--ws-border);
  border-radius: 20px;
  background:
    radial-gradient(1100px 240px at 8% -30%, var(--ws-accent-soft) 0%, transparent 62%),
    var(--ws-surface);
}

.reg-hero-eyebrow {
  margin: 0 0 8px; font-size: 10px; font-weight: 750;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ws-accent-bright);
}
.reg-hero h1 { font-size: 30px; line-height: 1.15; margin: 0 0 10px; letter-spacing: -.02em; }
.reg-hero .reg-lede { font-size: 14.5px; max-width: 58ch; margin: 0 0 22px; }

/* Looks like a field, is a button. One obvious way in, on every page. */
.reg-hero-search {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 0 16px; min-height: 56px; cursor: text;
  border: 1px solid var(--ws-border-strong); border-radius: 14px;
  background: var(--ws-bg); color: var(--ws-faint);
  font: inherit; font-size: 15px; text-align: left;
  transition: border-color .15s ease, background .15s ease;
}
.reg-hero-search:hover {
  border-color: var(--ws-accent); background: var(--ws-surface);
}
.reg-hero-search svg { flex: none; color: var(--ws-accent); }
.reg-hero-search-text {
  flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; color: var(--ws-muted);
}
.reg-hero-keys { flex: none; display: flex; gap: 4px; }
.reg-hero-keys kbd {
  font: inherit; font-size: 10px; font-weight: 700; padding: 3px 7px;
  border-radius: 6px; border: 1px solid var(--ws-border-strong);
  background: var(--ws-surface-soft); color: var(--ws-muted);
}

/* Live counts. Present only once the register actually holds something
   "0 organisations" is worse than no number at all. */
.reg-stats {
  display: flex; flex-wrap: wrap; gap: 10px 34px;
  margin: 24px 0 0; padding: 20px 0 0;
  border-top: 1px solid var(--ws-border);
}
.reg-stats div { display: flex; flex-direction: column-reverse; gap: 2px; }
.reg-stats dt { font-size: 11px; color: var(--ws-muted); }
.reg-stats dd {
  margin: 0; font-size: 22px; font-weight: 750; line-height: 1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}

/* Explainer cards, quieter now that the hero carries the weight. */
.reg-explainer h2 { margin-top: 34px; }
.reg-explainer-grid article { background: var(--ws-surface); }
.reg-explainer-grid h3 { font-size: 12.5px; line-height: 1.35; }

@media (max-width: 640px) {
  .reg-hero { padding: 26px 20px 24px; border-radius: 16px; }
  .reg-hero h1 { font-size: 23px; }
  .reg-hero-keys { display: none; }
  .reg-hero-search { min-height: 50px; font-size: 14px; }
  .reg-stats { gap: 14px 24px; }
  .reg-stats dd { font-size: 19px; }
}
/* ============================================
   Hub v2. Split hero, big type, counters

   Shaped after Google Trends: a large statement on one side, one obvious
   search on the other, and live numbers immediately beneath rather than
   marketing copy. The registry has real counts now, so the page can lead
   with what it holds instead of describing itself.
   ============================================ */

.reg-hero {
  display: grid; gap: 30px 48px; align-items: center;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  padding: 52px 40px;
  border: 1px solid var(--ws-border); border-radius: 22px;
  /* Flat. The circuit below is the only thing in the background now. */
  background: var(--ws-surface);
}

.reg-hero h1 {
  font-size: clamp(28px, 3.4vw, 43px);
  line-height: 1.08; letter-spacing: -.03em;
  margin: 0 0 14px; font-weight: 700;
}
/* One highlighted phrase, the way Trends does it. */
.reg-hero h1 mark {
  background: var(--ws-accent-soft);
  color: var(--ws-accent);
  padding: 0 .12em; border-radius: 5px;
}
html.theme-dark .reg-hero h1 mark { color: var(--ws-accent-bright); }

.reg-hero .reg-lede {
  font-size: 15.5px; margin: 0; max-width: 40ch; color: var(--ws-muted);
}

/* Pill search, filled action. The one way in. */
.reg-hero-search {
  width: 100%; display: flex; align-items: center; gap: 13px;
  padding: 7px 7px 7px 20px; min-height: 62px; cursor: text;
  border: 1px solid var(--ws-border-strong); border-radius: 999px;
  background: var(--ws-bg); color: var(--ws-muted);
  font: inherit; font-size: 15.5px; text-align: left;
  transition: border-color .15s ease, background .15s ease;
}
.reg-hero-search:hover { border-color: var(--ws-accent); background: var(--ws-surface); }
.reg-hero-search svg { flex: none; color: var(--ws-accent); }
.reg-hero-search-text {
  flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.reg-hero-go {
  flex: none; padding: 0 22px; height: 46px;
  display: inline-flex; align-items: center; border-radius: 999px;
  background: var(--ws-accent); color: var(--ws-on-accent);
  font-size: 13px; font-weight: 750;
}
.reg-hero-hint {
  margin: 12px 0 0; padding-left: 4px;
  font-size: 11.5px; color: var(--ws-faint);
}
.reg-hero-hint a { color: var(--ws-accent); text-decoration: none; font-weight: 600; }
.reg-hero-hint a:hover { text-decoration: underline; }
.reg-hero-hint kbd {
  font: inherit; font-size: 10px; font-weight: 700; padding: 2px 6px;
  margin: 0 1px; border-radius: 5px;
  border: 1px solid var(--ws-border-strong);
  background: var(--ws-surface-soft); color: var(--ws-muted);
}

/* Counters. Live numbers, not claims. */
.reg-counters {
  display: grid; gap: 12px; margin: 14px 0 0;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
}
.reg-counter {
  padding: 20px 22px; border-radius: 16px;
  border: 1px solid var(--ws-border); background: var(--ws-surface);
}
.reg-counter-lead { background: var(--ws-accent-soft); border-color: transparent; }
.reg-counter-lead .reg-counter-n { color: var(--ws-accent); }
html.theme-dark .reg-counter-lead .reg-counter-n { color: var(--ws-accent-bright); }
.reg-counter-n {
  margin: 0; font-size: 30px; font-weight: 750; line-height: 1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.reg-counter-l { margin: 7px 0 0; font-size: 11.5px; color: var(--ws-muted); }

/* A small label beside the status. 'cycle' is context (where the approval
   sits in its usual term) and is styled as information, never as urgency;
   the other two come only from an end date a source published. */
.reg-cell-flag {
  display: inline-block; margin: 0 0 9px; padding: 3px 9px;
  font-size: 10.5px; font-weight: 750; letter-spacing: .01em;
  border-radius: 999px;
}
.reg-flag-cycle    { background: var(--ws-accent-soft); color: var(--ws-accent); }
.reg-flag-expiring { background: var(--reg-warn-text); color: var(--ws-surface); }
.reg-flag-expired  { background: var(--reg-warn-text); color: var(--ws-surface); }
html.theme-dark .reg-flag-expiring,
html.theme-dark .reg-flag-expired { color: #14131a; }

/* The explainer card about what the register leaves out. Set apart by a
   dashed edge so it reads as the footnote to the other cards. */
.reg-explainer-grid article.reg-explainer-limits {
  background: var(--ws-surface-soft); border-style: dashed;
}

.reg-notyet {
  margin: 18px 0 0; padding: 13px 16px; border-radius: 14px;
  font-size: 12px; color: var(--ws-muted);
  background: var(--ws-surface-soft); border: 1px solid var(--ws-border);
}
.reg-notyet strong { color: var(--ws-text); }

@media (max-width: 860px) {
  /* minmax(0, 1fr), not 1fr. A bare fr track keeps an automatic min-content
     floor, and the search button's floor is wider than a phone, so the track
     grew past the hero and clipped the headline mid-word behind
     overflow: hidden. The desktop tracks were already written this way. */
  .reg-hero { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 34px 24px; }
}
@media (max-width: 520px) {
  .reg-hero { padding: 28px 18px; border-radius: 16px; }
  .reg-hero-search { min-height: 54px; font-size: 14px; padding-left: 16px; }
  .reg-hero-go { height: 40px; padding: 0 16px; }
  .reg-counter { padding: 16px 18px; }
  .reg-counter-n { font-size: 24px; }
}
/* ============================================
   Obligations. Quiet cards, one small bar of colour

   Eight filings tinted amber and red read as eight emergencies, and the
   whole point of the list is to rank them against each other. So the card
   is neutral, and colour is reduced to a 3px bar on the left edge:

     red     overdue
     orange  due inside 30 days
     amber   inside 90
     grey    beyond that

   The bar is never the only signal, "Overdue, 105 days ago" says the same
   thing in words.
   ============================================ */

.reg-obligation-list { list-style: none; margin: 0; padding: 0; }

.reg-ob {
  position: relative;
  display: grid; align-items: start;
  grid-template-columns: 3px minmax(0, 1fr) auto;
  gap: 0 16px;
  padding: 15px 17px 15px 0;
  margin-bottom: 8px;
  border: 1px solid var(--ws-border);
  border-radius: 12px;
  background: var(--ws-surface-soft);
  overflow: hidden;
}

/* The one piece of colour: a short marker near the top, not a stripe down
   the whole card. A full-height rule scales with the text and ends up
   shouting on a tall card; a fixed 16px mark stays the same weight whatever
   is beside it. */
.reg-ob-bar {
  grid-column: 1; align-self: start;
  margin-top: 4px;
  width: 3px; height: 16px;
  border-radius: 999px;
  background: var(--ws-border-strong);
}
.reg-ob-overdue .reg-ob-bar { background: #c0392b; }
.reg-ob-urgent  .reg-ob-bar { background: #e07b1f; }
.reg-ob-soon    .reg-ob-bar { background: #d9a520; }
.reg-ob-later   .reg-ob-bar { background: var(--ws-border-strong); }

html.theme-dark .reg-ob-overdue .reg-ob-bar { background: #e2685c; }
html.theme-dark .reg-ob-urgent  .reg-ob-bar { background: #eb9a4a; }
html.theme-dark .reg-ob-soon    .reg-ob-bar { background: #dcb85f; }

.reg-ob-body { grid-column: 2; min-width: 0; }

.reg-ob-head {
  margin: 0 0 4px;
  font-size: 11.5px; color: var(--ws-muted);
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.reg-ob-head time { font-variant-numeric: tabular-nums; color: var(--ws-text); font-weight: 650; }
.reg-ob-sep { color: var(--ws-faint); }
.reg-ob-overdue .reg-ob-when { color: #c0392b; font-weight: 650; }
.reg-ob-urgent  .reg-ob-when { color: #b0620f; font-weight: 650; }
html.theme-dark .reg-ob-overdue .reg-ob-when { color: #e2685c; }
html.theme-dark .reg-ob-urgent  .reg-ob-when { color: #eb9a4a; }

.reg-ob-est {
  font-size: 10px; padding: 1px 6px; border-radius: 4px;
  border: 1px dashed var(--ws-border-strong); color: var(--ws-faint);
  cursor: help;
}

.reg-ob-title {
  margin: 0 0 5px; font-size: 13.5px; font-weight: 650;
  color: var(--ws-text); line-height: 1.35;
}

.reg-ob-meta {
  margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--ws-faint);
}
.reg-ob-penalty { display: block; margin-top: 3px; }

/* The form number, set back so it reads as a label rather than a heading. */
.reg-ob-form {
  grid-column: 3; align-self: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  padding: 4px 9px; border-radius: 6px; white-space: nowrap;
  background: var(--ws-surface); border: 1px solid var(--ws-border);
  color: var(--ws-muted);
}

@media (max-width: 620px) {
  .reg-ob { grid-template-columns: 3px minmax(0, 1fr); padding-right: 14px; }
  .reg-ob-form { grid-column: 2; justify-self: start; margin-top: 9px; }
}
/* ============================================
   A clean reading surface

   site-protection.js paints a repeating "do not reproduce" watermark over
   the page and disables text selection. That is reasonable on the drafting
   tools, whose output is the product. It is wrong here: this page
   republishes a public government register, and the whole promise is that a
   funder can read a number, check it, and copy it into their own file.
   Watermarking somebody else's public record. And then blocking selection
   of it. Argues against the thing the page is for.
   ============================================ */
body.reg-page .lexemer-watermark { display: none !important; }
body.reg-page.lexemer-protected {
  -webkit-user-select: text;
  user-select: text;
}
/* ============================================
   Obligations, grouped

   "Missed" and "Coming up" as separate headed lists. The single graded list
   asked the reader to work out direction from a number and a colour, which
   put the most important distinction on the weakest signal. A heading
   settles it before colour is involved at all.
   ============================================ */

.reg-ob-group {
  display: flex; align-items: center; gap: 8px;
  margin: 22px 0 9px; font-size: 11px; font-weight: 750;
  letter-spacing: .09em; text-transform: uppercase;
}
.reg-ob-group:first-of-type { margin-top: 14px; }
.reg-ob-group-missed { color: #c0392b; }
.reg-ob-group-coming { color: var(--ws-muted); }
html.theme-dark .reg-ob-group-missed { color: #e2685c; }

.reg-ob-count {
  font-size: 10px; font-weight: 700; letter-spacing: 0;
  min-width: 18px; padding: 1px 6px; border-radius: 999px; text-align: center;
  background: var(--ws-surface-soft); border: 1px solid var(--ws-border);
  color: var(--ws-muted);
}
.reg-ob-group-missed .reg-ob-count {
  background: #fceeee; border-color: #e8c4c4; color: #c0392b;
}
html.theme-dark .reg-ob-group-missed .reg-ob-count {
  background: #271615; border-color: #552e2c; color: #e2685c;
}

/* The number leads now, so it reads "17 days" then the date, never the
   other way round. */
.reg-ob-lead { font-weight: 700; color: var(--ws-text); }
.reg-ob-overdue .reg-ob-lead { color: #c0392b; }
.reg-ob-urgent  .reg-ob-lead { color: #b0620f; }
html.theme-dark .reg-ob-overdue .reg-ob-lead { color: #e2685c; }
html.theme-dark .reg-ob-urgent  .reg-ob-lead { color: #eb9a4a; }
.reg-ob-head time { font-weight: 400; color: var(--ws-muted); }
/* ============================================
   Hero circuit, and the scan panel

   Two separate things that happen to live in the same box.

   The circuit is the background: traces routed into the search box and the
   register panel, drawn on a canvas by ngo-circuit.js. Without script the
   canvas is simply empty.

   The scan panel is the foreground, and its movement is the original one:
   a beam passes down the stack and each row wakes as it arrives. What
   changed is the content. The bars used to be seven invented widths; each
   is now a real count expressed as a share of the register.
   ============================================ */

.reg-hero { position: relative; overflow: hidden; isolation: isolate; }

.reg-circuit {
  /* top/left as well as inset: Safari before 14.1 has no inset. */
  position: absolute; top: 0; left: 0; inset: 0; z-index: -1;
  display: block; width: 100%; height: 100%;
  pointer-events: none;
}

/* ---- the scrolling panel ---- */
.reg-stream {
  margin-top: 26px; padding: 15px 0 14px;
  border: 1px solid var(--ws-border); border-radius: 16px;
  background: var(--ws-bg);
}
.reg-stream-head {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 6px; padding: 0 18px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ws-faint);
}
.reg-stream-pulse {
  flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ws-accent);
  animation: reg-pulse 2.4s ease-in-out infinite;
}
@keyframes reg-pulse {
  0%, 100% { opacity: .35; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.25); }
}

/* The mask is what stops this reading as a clipped list: rows fade out at
   both edges instead of being cut by the panel border, so the stack looks
   like it continues past the frame rather than ending at it. */
.reg-stream-view {
  position: relative; height: 150px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
}

/* Half the track is one full copy of the list, so translating by -50% lands
   exactly where it started. No seam, no reset, no script. */
.reg-stream-track {
  display: flex; flex-direction: column;
  animation: reg-stream-scroll 34s linear infinite;
  will-change: transform;
}
@keyframes reg-stream-scroll {
  to { transform: translateY(-50%); }
}

.reg-stream-row {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 18px; min-height: 30px;
}
.reg-stream-pip {
  flex: none; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ws-border-strong);
}
.reg-stream-meta {
  flex: 1; min-width: 0; font-size: 11.5px; color: var(--ws-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.reg-stream-chips { flex: none; display: flex; gap: 4px; }
.reg-stream-chip {
  font-size: 9px; font-weight: 700; letter-spacing: .02em;
  padding: 2px 6px; border-radius: 5px;
  background: var(--ws-surface-soft); color: var(--ws-muted);
  border: 1px solid var(--ws-border);
}

@media (prefers-reduced-motion: reduce) {
  .reg-stream-track,
  .reg-stream-pulse { animation: none; }
}
@media (max-width: 860px) { .reg-stream { display: none; } }

/* ============================================
   Bulk check

   A funder reads this to decide whether to release money, so it is a table
   and not a set of cards: forty rows have to be scannable down a column,
   and the eye needs to be able to run down "what the registers record"
   without the layout reflowing under it.
   ============================================ */

.reg-bulk-head { margin: 8px 0 20px; }
.reg-bulk-head h1 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.12; letter-spacing: -.025em; margin: 0 0 10px; }

.reg-bulk-form {
  padding: 20px 22px; border: 1px solid var(--ws-border);
  border-radius: 18px; background: var(--ws-surface);
}
.reg-bulk-form label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 5px; }
.reg-bulk-hint { margin: 0 0 11px; font-size: 11.5px; color: var(--ws-muted); }
.reg-bulk-form textarea {
  width: 100%; box-sizing: border-box; resize: vertical;
  padding: 13px 15px; border-radius: 12px;
  border: 1px solid var(--ws-border-strong); background: var(--ws-bg);
  color: var(--ws-text); font: inherit; font-size: 13px; line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
.reg-bulk-form textarea:focus { outline: 2px solid var(--ws-accent); outline-offset: 1px; }

.reg-bulk-actions {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 13px;
}
.reg-bulk-actions button {
  flex: none; padding: 0 24px; height: 44px; border: 0; border-radius: 999px;
  background: var(--ws-accent); color: var(--ws-on-accent);
  font: inherit; font-size: 13.5px; font-weight: 750; cursor: pointer;
}
.reg-bulk-actions button:hover { filter: brightness(1.06); }
.reg-bulk-privacy { flex: 1; min-width: 240px; margin: 0; font-size: 11px; line-height: 1.5; color: var(--ws-faint); }

.reg-bulk-results { margin-top: 26px; }
.reg-bulk-summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 13px;
}
.reg-bulk-summary p { margin: 0; font-size: 13px; color: var(--ws-muted); }
.reg-bulk-summary strong { color: var(--ws-text); font-variant-numeric: tabular-nums; }
.reg-bulk-summary button {
  padding: 0 16px; height: 36px; border-radius: 999px;
  border: 1px solid var(--ws-border-strong); background: var(--ws-surface);
  color: var(--ws-text); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.reg-bulk-summary button:hover { border-color: var(--ws-accent); color: var(--ws-accent); }

.reg-bulk-note {
  margin: 0 0 13px; padding: 12px 15px; border-radius: 12px;
  font-size: 11.5px; line-height: 1.55; color: var(--ws-muted);
  background: var(--ws-surface-soft); border: 1px solid var(--ws-border);
}
.reg-bulk-note strong { color: var(--ws-text); }

/* Wide content scrolls inside its own box rather than pushing the page. */
.reg-bulk-table-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid var(--ws-border); }
.reg-bulk-table { width: 100%; border-collapse: collapse; background: var(--ws-surface); }
.reg-bulk-table th {
  text-align: left; padding: 11px 16px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ws-faint);
  border-bottom: 1px solid var(--ws-border); white-space: nowrap;
}
.reg-bulk-table td {
  padding: 12px 16px; font-size: 12.5px; vertical-align: top;
  border-bottom: 1px solid var(--ws-border);
}
.reg-bulk-table tr:last-child td { border-bottom: 0; }

.reg-bulk-in {
  font-variant-numeric: tabular-nums; color: var(--ws-muted);
  white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis;
}
.reg-bulk-who a { color: var(--ws-text); font-weight: 650; text-decoration: none; }
.reg-bulk-who a:hover { color: var(--ws-accent); text-decoration: underline; }
.reg-bulk-where, .reg-bulk-by { display: block; font-size: 10.5px; color: var(--ws-faint); margin-top: 2px; }
.reg-bulk-flag { color: var(--ws-muted); font-style: normal; }
.reg-bulk-cands { display: block; margin-top: 4px; }
.reg-bulk-cands a { display: block; font-size: 11px; margin-top: 2px; }

/* A row that found nothing is dimmed rather than tinted. Colour here would
   read as a judgement on the organisation, and absence from a register is
   usually just absence. */
.reg-bulk-not_found .reg-bulk-who,
.reg-bulk-not_found .reg-bulk-holds { opacity: .62; }

/* The date sits under the verdict rather than beside it. On one line the
   column needs about 280px and gets clipped on anything narrow, and the
   verdict is what the eye runs down: the date is the detail it stops for. */
.reg-bulk-scheme { display: block; margin-bottom: 8px; }
.reg-bulk-scheme:last-child { margin-bottom: 0; }
.reg-bulk-scheme .reg-chip { margin-right: 6px; }
.reg-bulk-verdict { font-weight: 650; }
.reg-bulk-until {
  display: block; margin-top: 2px; padding-left: 2px;
  color: var(--ws-faint); font-size: 10.5px; white-space: nowrap;
}
.reg-bulk-none { color: var(--ws-faint); }

@media (max-width: 620px) {
  .reg-bulk-form { padding: 16px 15px; border-radius: 14px; }
  .reg-bulk-table th, .reg-bulk-table td { padding: 10px 12px; }
  .reg-bulk-in { max-width: 120px; }
}

/* The registered address under the profile heading. */
.reg-address { margin: -8px 0 15px; font-size: 12px; color: var(--ws-muted); max-width: 80ch; }

/* "More in <city>" at the foot of a profile, and the city list on the hub. */
.reg-nearby-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 6px 22px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  font-size: 12.5px;
}
.reg-nearby-list li { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reg-nearby-list a { text-decoration: none; }
.reg-nearby-list a:hover { text-decoration: underline; }
.reg-nearby-all { margin: 12px 0 0; font-size: 12px; }
.reg-hub-places { margin-top: 8px; }

/* "Further reading" under the search results. A footnote, not a feature:
   a small-capitals heading, hairline rules, titles in body colour and dates
   faint at the right. No thumbnails and no cards, so it never competes with
   the results above it, and a narrower measure than the table says the
   same. */
.reg-main .reg-reading { margin-top: 46px; max-width: 720px; }
.reg-main .reg-reading h2 {
  margin: 0 0 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ws-faint);
}
.reg-reading-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ws-border); }
.reg-reading-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 3px 24px;
  padding: 10px 0; border-bottom: 1px solid var(--ws-border);
}
.reg-main .reg-reading-list a {
  min-width: 0; font-size: 13px; line-height: 1.45;
  color: var(--ws-text); text-decoration: none;
}
.reg-main .reg-reading-list a:hover { color: var(--ws-accent-bright); }
.reg-reading-list time {
  flex: none; font-size: 11px; color: var(--ws-faint); font-variant-numeric: tabular-nums;
}
.reg-reading-all { margin: 10px 0 0; font-size: 11.5px; }
.reg-main .reg-reading-all a { color: var(--ws-muted); text-decoration: none; }
.reg-main .reg-reading-all a:hover { color: var(--ws-accent-bright); }
.reg-reading-all a::after { content: " \2192"; }

@media (max-width: 520px) {
  .reg-reading-list li { flex-direction: column; }
}

/* "Worth reading" at the foot of a profile. One card, so the page does not
   end on an empty stretch once the reader has their answer. Each article is
   its title, then its opening lines, three across on a wide screen to echo
   the approval cards above.
   The only ornament is a field of gold dots fading out of the top-left
   corner, in the name tag's colours, so it belongs to this page in both
   themes. */
.reg-main .reg-readcard {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: 40px; padding: 24px 26px 18px;
  border: 1px solid var(--ws-border); border-radius: 18px;
  background: var(--ws-surface); box-shadow: var(--ws-shadow-soft);
}
.reg-readcard::before,
.reg-readcard::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
}
.reg-readcard::before {
  inset: 0;
  background-image:
    radial-gradient(circle, var(--reg-tag-fill) 1.1px, transparent 1.7px),
    radial-gradient(circle, var(--reg-tag-soft-line) .8px, transparent 1.3px);
  background-size: 10px 10px, 14px 14px;
  background-position: 0 0, 5px 7px;
  opacity: .75;
  -webkit-mask-image: radial-gradient(ellipse 42% 120% at 0% 0%, #000 0%, rgba(0, 0, 0, .3) 45%, transparent 72%);
          mask-image: radial-gradient(ellipse 42% 120% at 0% 0%, #000 0%, rgba(0, 0, 0, .3) 45%, transparent 72%);
}
.reg-readcard::after {
  left: -120px; top: -140px; width: 420px; height: 320px;
  background: radial-gradient(closest-side, var(--reg-tag-fill), transparent);
  opacity: .1;
}
/* Gold reads stronger on a dark card than on a pale one. */
html.theme-dark .reg-readcard::before { opacity: .5; }

/* !important only because site-chrome.css sets every heading to 600 with
   it, and this one is meant to be heavier. */
.reg-main .reg-readcard h2 {
  margin: 0 0 18px; font-size: 18px; font-weight: 750 !important; letter-spacing: -.01em;
  color: var(--ws-text);
}

.reg-readcard-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 18px 30px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.reg-main .reg-readcard-item {
  display: block; font-size: 13.5px; line-height: 1.45;
  color: inherit; text-decoration: none; border-radius: 8px;
}
.reg-main .reg-readcard-item:focus-visible { outline: 2px solid var(--ws-accent); outline-offset: 4px; }
.reg-readcard-title { font-weight: 700; color: var(--ws-text); }
.reg-readcard-item:hover .reg-readcard-title {
  text-decoration: underline; text-decoration-color: var(--reg-tag-soft-line);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.reg-readcard-text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  margin-top: 8px; font-size: 12px; line-height: 1.6; color: var(--ws-muted);
}

.reg-readcard-all {
  margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--ws-border);
  font-size: 11.5px;
}
.reg-main .reg-readcard-all a { color: var(--ws-muted); text-decoration: none; }
.reg-main .reg-readcard-all a:hover { color: var(--ws-text); }
.reg-readcard-all a::after { content: " \2192"; }

@media (max-width: 520px) {
  .reg-main .reg-readcard { padding: 20px 18px 16px; border-radius: 16px; }
  .reg-main .reg-readcard h2 { font-size: 16.5px; }
}

/* City pages (/ngo/in/): password form, link lists, filters, pager. */
.reg-places { margin-top: 30px; }
.reg-link-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 6px 22px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  font-size: 12.5px;
}
.reg-link-list li { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reg-link-list a { text-decoration: none; }
.reg-link-list a:hover { text-decoration: underline; }
.reg-link-list span { color: var(--ws-faint); font-size: 11px; margin-left: 4px; font-variant-numeric: tabular-nums; }
.reg-letters, .reg-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.reg-letters a, .reg-filters a, .reg-pager a, .reg-pager span[aria-current] {
  display: inline-block; padding: 4px 10px; border-radius: 8px;
  border: 1px solid var(--ws-border); background: var(--ws-surface);
  font-size: 12px; font-weight: 650; text-decoration: none;
}
.reg-filters a[aria-current], .reg-pager span[aria-current] {
  background: var(--ws-accent-soft); border-color: transparent; color: var(--ws-accent);
}
.reg-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 22px; font-size: 12px; }
.reg-login form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; max-width: 420px; }
.reg-login label { width: 100%; font-size: 12px; color: var(--ws-muted); }
.reg-login input {
  flex: 1 1 200px; height: 40px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--ws-border-strong); background: var(--ws-surface); color: var(--ws-text); font: inherit;
}
.reg-login button {
  height: 40px; padding: 0 18px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--ws-accent); color: var(--ws-on-accent); font: inherit; font-weight: 700;
}
.reg-login-error { width: 100%; margin: 0; font-size: 12px; color: var(--reg-alert-text); }