/* GazettePulse wiki supplement -- additions the marketing stylesheet
   (styles.css, vendored byte-identical from gazettepulse-marketing) doesn't cover:
   document status badges, the superseded callout, index-page card grids,
   two-tier regulator sections, topic tag chips, and the wiki footer. Kept
   in its own file so styles.css stays easy to re-sync from the source. */

/* ---------- Search results as real links ----------
   Same issue as .brand below: .hero-result was styled for a non-anchor
   element (div + click handler) on the marketing site. The wiki's results
   are real <a> elements so they work without JS and are crawlable. */
a.hero-result { display: block; text-decoration: none; color: inherit; }
/* The jurisdiction · regulator · type prefix on each result. Set as mono
   micro-type (the card system's label voice) so it reads as a scope label
   rather than as the opening words of the excerpt beside it.

   Deliberately NOT white-space: nowrap. The longest real combination
   ("Guernsey · GFSC · Statement of Principles") measures 307px in a 341px
   dropdown at 375px -- 34px of headroom, which a longer doc-type label would
   eat, and a nowrap run that outgrows its container is exactly the overflow
   this session already fixed once in the nav. Wrapping at the separators is
   the safe direction; the mono caps still read as one label.

   Not scoped to .hero-result: the /search/ page reuses the same markup. */
.snip-scope {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--maroon-2);
}
.hero-result .h mark {
  background: rgba(74, 31, 26, 0.12);
  color: var(--maroon);
  padding: 0 2px;
  border-radius: 2px;
  font-weight: 700;
}

/* ---------- /search/ results page (roadmap step 21) ----------
   The full ranked list behind the dropdown's "see all". Rows are the
   dropdown's shape one size up; facets reuse the .tag-list chip. */
.count-all { margin-left: 8px; font-weight: 600; white-space: nowrap; }

.search-count {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 28px 0 18px;
}
.facet-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.facet-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.facet-row .tag-list { margin: 0; }
/* values are already correctly cased ("Statement of Guidance"), so opt out of
   the .tag-list capitalize rule rather than render "Statement Of Guidance" */
.tag-list a.facet { text-transform: none; }
.tag-list a.facet-on {
  background: var(--maroon);
  border-color: var(--maroon);
  color: var(--cream);
}
.search-results-list { margin: 26px 0 0; border-top: 1px solid var(--line-soft); }
a.search-result {
  display: block;
  padding: 20px 0;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  color: inherit;
}
a.search-result:hover .h { color: var(--maroon); }
.search-result .h {
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 7px;
  text-wrap: pretty;
}
.search-result .snip {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.search-result .h mark,
.search-result .snip mark {
  background: rgba(74, 31, 26, 0.12);
  color: var(--maroon);
  padding: 1px 4px;
  border-radius: 2px;
  font-weight: 500;
}
.more-results {
  display: block;
  margin: 26px auto 0;
  padding: 12px 26px;
  background: transparent;
  border: 1px solid var(--maroon);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--maroon);
  cursor: pointer;
}
.more-results:hover { background: rgba(74, 31, 26, 0.06); }

/* On a phone the type facet can run to a dozen chips and push the first
   result off the screen. Compress them rather than truncate the list: a
   hidden filter is a filter the reader can't know to ask for. */
@media (max-width: 650px) {
  .facet-row { gap: 6px; margin-bottom: 8px; }
  .facet-row .tag-list { gap: 6px; }
  .facet-row .tag-list a { padding: 3px 9px; font-size: 11px; }
  .search-count { margin: 20px 0 14px; }
}

/* ---------- Nav brand as a real link ----------
   The vendored sheet's .brand was written for a non-anchor element (the
   marketing site used a JS click handler); the wiki links it to "/", so it
   needs the anchor underline reset explicitly. */
.nav .brand { text-decoration: none; }

/* ---------- Current section in the nav ----------
   The vendored sheet already recolours .nav-links a.active; on a nav where
   every item is the same short uppercase word, colour alone is a weak signal
   (and no signal at all to anyone who can't distinguish it), so the active
   item also carries a rule. Offset so it sits clear of the letterforms. */
.nav-links a.active {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  font-weight: 600;
}

/* ---------- Global /topics/ index: topic cards ----------
   One card per topic on the feature-card chrome (cream, hairline border,
   card shadow), replacing the old text-block-and-chips list. Head row is
   numbered mono eyebrow / serif-display title / total count; the foot is a
   per-jurisdiction stat grid (mono label, count, proportional bar scaled to
   the topic's largest jurisdiction). The card itself is not a link -- there
   is no global topic page -- so each jurisdiction column is its own anchor
   through to that jurisdiction's topic page. */
.tcard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 24px;
  margin: 36px 0 44px;
}
.tcard {
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-card);
  border-radius: 2px;
  padding: 30px 34px 26px;
  transition: box-shadow .2s ease, transform .2s ease, background .2s ease;
}
.tcard:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
  background: var(--cream-2);
}
.tcard-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 10px;
}
.tcard-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--maroon-link);
}
.tcard-title {
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.005em;
  color: var(--maroon);
  margin: 0;
  text-wrap: balance;
}
.tcard-total {
  margin-left: auto;
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: clamp(24px, 2.4vw, 30px);
  color: var(--maroon-2);
  font-variant-numeric: oldstyle-nums;
}
.tcard-lede {
  font-family: var(--serif-text);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 26px;
  text-wrap: pretty;
}
.tcard-juris {
  /* margin-top:auto pins the stat row to the bottom edge so hairline rules
     line up across a card row, same trick as .feature-rule / .card .meta */
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.tcard-j { display: flex; flex-direction: column; gap: 4px; text-decoration: none; min-width: 0; }
.tcard-j-name {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tcard-j-count {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--ink);
}
.tcard-j:hover .tcard-j-count { color: var(--maroon); }
.tcard-j-bar {
  display: block;
  height: 3px;
  background: var(--line-soft);
  border-radius: 1px;
  overflow: hidden;
}
.tcard-j-bar span {
  display: block;
  height: 100%;
  background: var(--maroon-2);
  border-radius: 1px;
}
.tcard-j:hover .tcard-j-bar span { background: var(--maroon); }
@media (max-width: 700px) {
  .tcard { padding: 24px 20px 22px; }
  .tcard-juris { grid-template-columns: repeat(3, 1fr); gap: 14px 16px; }
  .tcard-title { font-size: 24px; }
  .tcard-total { font-size: 22px; }
}

/* ---------- Nav links wrap on mobile ----------
   The vendored sheet already stacks the nav below 650px (brand / search /
   links, centred), but .nav-links stays a nowrap flex row. That was fine for
   the marketing site's handful of links; the wiki carries one per published
   jurisdiction plus Home and Topics -- seven today, more as jurisdictions are
   added -- whose min-content is ~459px. A grid `1fr` column floors at its
   min-content, so those links were forcing the whole nav column (and with it
   the full-width search box) past a 375px viewport and scrolling the page
   sideways. Letting them wrap drops the min-content to the widest single
   link, which fixes the search box's width as a side effect -- same root
   cause, one rule.

   The wrap is deliberately NOT behind a breakpoint. A width sweep found the
   overflow at three different widths as each fix moved it -- 375 (stacked),
   651 (the band where the vendored sheet puts brand and links side by side),
   then 901, just above the vendored sheet's own 900px breakpoint, because a
   seven-link row needs ~970px to sit beside the brand and search. Every fixed
   breakpoint here is a number that goes stale the next time a jurisdiction is
   added; an unconditional wrap drops nav-links' min-content to its widest
   single link at ANY width, so the nav can always fit and simply stays one
   row when there's room for one.

   Wrapping can cost a second row on a sticky header, so the stacked nav is
   tightened to pay for it: the bar stays roughly the height it was while the
   search box -- the reason this header is sticky on a 5,000-page reference
   site -- stays reachable from anywhere on the page. */
.nav-links { flex-wrap: wrap; row-gap: 8px; }
@media (max-width: 650px) {
  .nav-links { column-gap: 14px; margin-top: 0; }
  .nav-inner { gap: 9px; padding: 10px 16px; }
  .search { padding: 9px 14px; }
}

/* ---------- Breadcrumbs: wrap, never scroll ----------
   The vendored sheet sets the trail nowrap with overflow-x:auto and a hidden
   scrollbar, so a long trail slid out of view with no visual cue that it had.
   Now that the trail carries ancestors only (see publish._breadcrumbs) it is
   short enough to wrap on the rare occasion it needs to -- and wrapping shows
   everything, which a scrollbar-less scroll container does not. The vendored
   .breadcrumbs__item--active rules are simply never matched any more. */
.breadcrumbs { overflow: visible; }
.breadcrumbs__list {
  flex-wrap: wrap;
  overflow-x: visible;
  row-gap: 4px;
}

/* ---------- Page heading, sized by title length ----------
   The vendored clamp floor of 48px is a marketing-site value, written for
   headings of two or three words. Applied to a 5,000-document reference site
   it rendered the MEDIAN citation (66 chars) six lines and 294px tall at
   375px, and the longest (238 chars) at 930px -- more than a full phone
   viewport before any content.

   Three tiers, keyed on character count by publish._h1_class (CSS can't
   count characters, and doing it in JS would flash the large size first).
   Measured at 375px: median 294 -> 147px, p90 490 -> 221px, max 930 -> 259px.
   Desktop is barely touched -- 6.4vw resolves to 76.8px at 1200px, well above
   every floor here, so the short tier's change is mobile-only. */
h1.display {
  font-size: clamp(38px, 6.4vw, 84px);
  /* a pathological single token must never widen the page */
  overflow-wrap: break-word;
}
h1.display.h1-long {
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.15;      /* 1.02 suits 84px display type, not this */
  text-wrap: pretty;
}
h1.display.h1-xlong {
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.2;
  text-wrap: pretty;
}

/* ---------- Status badges ---------- */
.badge {
  display: inline-block;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 2px;
}
.badge-in-force { background: rgba(47, 122, 79, 0.14); color: #2f7a4f; }
.badge-repealed { background: rgba(178, 60, 50, 0.14); color: #b23c32; }
.badge-superseded { background: rgba(180, 138, 58, 0.16); color: #8a6520; }
.badge-draft { background: rgba(74, 31, 26, 0.10); color: var(--ink-muted); }
.badge-unknown { background: rgba(74, 31, 26, 0.08); color: var(--ink-muted); }
/* point-in-time docs (notice/circular/advisory/consultation): informational
   "Issued <date>", not a status claim -- quiet blue, outside the status palette */
.badge-issued { background: rgba(58, 96, 138, 0.12); color: #3a608a; }
/* amendment instruments at unknown status: the honest claim is the
   relationship to the parent instrument, not an in-force status --
   quiet, outside the status palette, like .badge-issued. The badge
   contains the parent link; text-transform stays off so the parent
   citation reads as a citation. */
.badge-consolidated {
  background: rgba(58, 96, 138, 0.12);
  color: #3a608a;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 12px;
}
.badge-consolidated a { color: inherit; }
.amends-line {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-muted);
}
.amends-line a { color: inherit; }

/* ---------- Superseded callout ---------- */
.callout {
  background: var(--cream-3);
  border: 1px solid var(--line);
  border-left: 3px solid #b48a3a;
  border-radius: 4px;
  padding: 14px 18px;
  margin: 18px 0;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-soft);
}
.callout a { font-weight: 600; }

/* ---------- Index-page card grids ----------
   The index cards run the same system as .feature-card above, one size down:
   monospace eyebrow, roman serif-display title, and a stat line pinned to the
   card's bottom edge behind a hairline rule. The vendored sheet styles these
   for the marketing site (sans eyebrow, italic serif title, italic serif
   meta); overriding here rather than there keeps styles.css a clean re-sync
   target. Scoped to .card-grid so any other .card use is untouched. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: 20px;
  margin: 28px 0;
}
.card-grid a.card {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  padding: 26px 28px 22px;
}
.card-grid .card .label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  margin-bottom: 16px;
}
/* .title-italic is the vendored sheet's class name, not a promise -- the
   card system's italic now lives in the feature-card accent phrase only. */
.card-grid .card .title-italic {
  font-style: normal;
  font-size: 25px;
  line-height: 1.12;
  text-wrap: balance;
}
.card-grid .card .meta {
  /* margin-top:auto pins the stat line to the bottom, so cards of differing
     title length still line their rules up across a row */
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
@media (max-width: 560px) {
  .card-grid .card .title-italic { font-size: 22px; }
}

/* ---------- Feature cards ----------
   The topic index and the compliance calendar are the site's two
   cross-cutting destinations, and both used to hang off a small text link
   that read as a footnote. These give each one a whole clickable card:
   eyebrow, headline with an italic accent, lede, and a stat/CTA foot.
   Anchor-is-the-card (same shape as .card), so the entire block is the
   click target and it still works without JS. */
.feature-grid {
  display: grid;
  /* min() guard: a bare minmax(360px,…) is a floor, so on a 375px phone the
     column stays 360 wide inside a ~319px container and the page scrolls
     sideways. min(...,100%) lets the column collapse to the container. */
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 24px;
  margin: 36px 0 44px;
}
a.feature-card {
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-card);
  border-radius: 2px;
  padding: 34px 38px 30px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .2s ease, transform .2s ease;
}
a.feature-card.hover:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
/* the calendar variant: a maroon rule along the top edge, the strongest
   accent on the page without introducing a new colour. Selector must carry
   the a. prefix -- a.feature-card's border shorthand outranks a bare class
   and would silently win the border-top back. */
a.feature-card--accent { border-top: 3px solid var(--maroon); padding-top: 32px; }

.feature-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 18px;
}
.feature-title {
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: clamp(30px, 3.2vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.005em;
  color: var(--maroon);
  margin: 0 0 16px;
  text-wrap: balance;
}
.feature-title em { font-style: italic; }
.feature-lede {
  font-family: var(--serif-text);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  text-wrap: pretty;
}
.feature-rule {
  display: block;
  height: 1px;
  background: var(--line);
  margin: 26px 0 18px;
  /* pushes the foot to the card's bottom edge so cards of differing lede
     length still line their stat rows up across the grid */
  margin-top: auto;
  padding-top: 0;
}
.feature-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.feature-meta, .feature-cta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.feature-meta { color: var(--ink-muted); }
.feature-card--accent .feature-meta { color: var(--maroon-link); }
.feature-cta { color: var(--maroon); font-weight: 500; }
.feature-cta .arrow { display: inline-block; transition: transform .2s ease; }
a.feature-card:hover .feature-cta .arrow { transform: translateX(3px); }

@media (max-width: 560px) {
  a.feature-card { padding: 26px 22px 24px; }
  .feature-lede { font-size: 16px; }
  .feature-meta, .feature-cta { font-size: 11px; letter-spacing: 0.12em; }
}

/* ---------- Two-tier regulator sections ---------- */
.tier-section { margin: 40px 0 0; }
/* operational reference reads one step quieter than the instruments tier */
.card-grid .tier-secondary .card .title-italic,
.tier-secondary .card-grid .card .title-italic { font-size: 21px; }

/* ---------- Topic tag chips ---------- */
.tag-list { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.tag-list a {
  display: inline-block;
  padding: 4px 12px;
  background: var(--cream-2);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--maroon-2);
  text-decoration: none;
}
.tag-list a:hover { background: var(--cream); color: var(--maroon); }

/* ---------- Document meta / links rows ---------- */
.doc-meta { font-family: var(--sans); font-size: 13px; color: var(--ink-muted); margin: 6px 0; }
.doc-links { font-family: var(--sans); font-size: 13px; margin: 14px 0; }
.doc-links a { margin-right: 18px; }

/* ---------- Wiki footer ---------- */
.wiki-footer { margin-top: 60px; padding: 24px 0; border-top: 1px solid var(--line); }
.wiki-footer p { font-family: var(--sans); font-size: 12px; color: var(--ink-muted); line-height: 1.6; margin: 0 0 8px; }

/* ---------- Concept overviews on topic pages (roadmap step 13) ---------- */
.concept-overview { margin-bottom: 8px; }
.overview-sources {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-muted);
}
.overview-sources a { margin-right: 4px; }
/* .overview-rule needs no rules of its own: the vendored sheet's .prose hr
   (1px --line, 32px margins) already styles it -- the class is only a hook. */

/* ---------- Title Case as presentation (Daniel, eleventh session) ----------
   Headings/subheadings/topic labels display Title Case via CSS, never by
   rewriting the stored text. Note the CSS-capitalize semantics: every word's
   first letter is uppercased, including small words ("Exemptions And
   Carve-Outs"), and already-uppercase acronyms (AML/CFT, DNFBPs) are
   untouched. The HTML <title> tag is out of CSS reach and keeps raw case. */
.title-caps,
.concept-overview h2,
.concept-overview h3,
.tag-list a { text-transform: capitalize; }