/* BRACE public website (D-127): concept D, "The Circle". The logo keeps its own six colours. Since D-300 the site around it uses quieter versions of them. Since D-141 the remastered logo (Option A, "Vivid True"); text uses
   only shades that pass 4.5:1 on its background (yellow and green colour shapes and buttons, never text on white). */
:root {
  --navy: #274472; --navy-dark: #1B3154; --deep: #131C2E; --deep-2: #1E2A44; --line-dark: #3A4A68;
  --ink: #1F2430; --muted: #59606E; --paper: #F7F5F0; --line: #E3DFD6; --white: #FFFFFF;
  --red: #B0404D; --red-text: #A13543; --orange: #C47A3C; --orange-dark: #85491C; --yellow: #D8B554; --green: #4F9170;
  --blue: #5490B8; --blue-dark: #2F6486; --purple: #6E4F88;
  --display: 'Fraunces', Georgia, serif; --sans: 'IBM Plex Sans', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.55 var(--sans); overflow-wrap: break-word; }
a { color: var(--navy); } a:hover { color: var(--navy-dark); }
/* D-143: a two-tone focus ring, visible on white, on the yellow buttons and on the dark bands alike. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--deep); outline-offset: 2px; box-shadow: 0 0 0 5px var(--yellow); }
.site-foot a:focus-visible, .places a:focus-visible, .card-navy a:focus-visible { outline-color: var(--yellow); box-shadow: none; }
code, .mono, pre, .prose { overflow-wrap: anywhere; } td, td.mono, .prose td { overflow-wrap: break-word; }   /* 'anywhere' lets a table squeeze a column to one letter wide (D-246) */ fieldset { min-width: 0; }
img { max-width: 100%; height: auto; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--deep); color: #fff; padding: 12px 16px; z-index: 10; }
.skip:focus { left: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header */
/* The error pages' simple header. */
.site-head { background: var(--white); border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-top: 12px; padding-bottom: 12px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand img { width: 56px; height: 56px; border-radius: 50%; }
.brand span { font: 900 28px/1 var(--display); color: var(--navy); letter-spacing: .02em; }
.stripe { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); height: 6px; }
.stripe span:nth-child(1) { background: var(--red); } .stripe span:nth-child(2) { background: var(--orange); } .stripe span:nth-child(3) { background: var(--yellow); }
.stripe span:nth-child(4) { background: var(--green); } .stripe span:nth-child(5) { background: var(--blue); } .stripe span:nth-child(6) { background: var(--purple); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border-radius: 999px; font: 600 16px/1.2 var(--sans);
  text-decoration: none; border: 2px solid transparent; cursor: pointer; }
.btn-navy { background: var(--navy); color: #fff; } .btn-navy:hover { background: var(--navy-dark); color: #fff; }
.btn-line { border-color: var(--ink); color: var(--ink); background: transparent; } .btn-line:hover { background: var(--ink); color: #fff; }
.btn-yellow { background: var(--yellow); color: var(--deep); } .btn-yellow:hover { color: var(--deep); background: #FFDF5C; }

/* Type */
.eyebrow { font: 500 13px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--red-text); margin: 0 0 12px; }
.display { font: 900 clamp(44px, 7vw, 84px)/.95 var(--display); letter-spacing: -.02em; color: var(--navy); margin: 0; }
h1, h2, h3 { font-family: var(--display); line-height: 1.1; }
.h-section { font: 900 clamp(30px, 4vw, 40px)/1.05 var(--display); color: var(--navy); margin: 0; }
.lede { font-size: 20px; color: #3D4452; max-width: 620px; }
.muted { color: var(--muted); } .mono { font-family: var(--mono); }

/* Home: hero */
.hero { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; padding: 56px 0 48px; }
.hero > div:first-child { flex: 1 1 520px; min-width: 0; }
.hero-mark { flex: 1 1 380px; display: flex; justify-content: center; }
.ring { position: relative; width: min(440px, 100%); aspect-ratio: 1; }
.ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--red) 0 60deg, var(--orange) 60deg 120deg, var(--yellow) 120deg 180deg, var(--green) 180deg 240deg, var(--blue) 240deg 300deg, var(--purple) 300deg 360deg); }
.ring .inner { position: absolute; inset: 9%; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; }
.ring img { width: 92%; height: 92%; border-radius: 50%; }
.search { display: flex; flex-wrap: wrap; gap: 10px; max-width: 580px; margin-top: 28px; }
.search input { flex: 1 1 280px; min-height: 56px; padding: 0 22px; font: 17px var(--sans); border: 2px solid var(--navy); border-radius: 999px; background: #fff; color: var(--ink); }
.search .btn { min-height: 56px; }

/* Programme tiles */
.programmes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 12px; padding-bottom: 48px; }
.prog { display: block; text-decoration: none; color: var(--ink); background: #fff; border-top: 8px solid var(--c, var(--navy)); padding: 16px 16px 18px; border-radius: 0 0 14px 14px; box-shadow: 0 1px 0 var(--line); }
.prog strong { display: block; font: 600 19px/1.15 var(--display); } .prog span { display: block; font-size: 14px; color: var(--muted); margin-top: 6px; }
a.prog:hover { box-shadow: 0 0 0 2px var(--c, var(--navy)); color: var(--ink); }

/* The Record */
.band { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band .wrap { padding-top: 44px; padding-bottom: 44px; }
.row-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.record { overflow-x: auto; }
.record table { width: 100%; min-width: min(680px, 100%); border-collapse: collapse; font-size: 15px; }
.record td { padding: 14px 12px 14px 0; border-top: 1px solid var(--line); vertical-align: baseline; }
.record td.when { font-family: var(--mono); color: var(--muted); white-space: nowrap; width: 130px; }
.kind { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); white-space: nowrap; }
.kind::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--navy)); }
.pill { display: inline-block; border: 1px solid currentColor; padding: 2px 10px; border-radius: 999px; font: 12px var(--mono); white-space: nowrap; }
.pill-red { color: var(--red-text); } .pill-navy { color: var(--navy); } .pill-grey { color: var(--muted); }
/* A supporter's distinctions and their toppings (D-202) */
.distinctions { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: .5rem 0 0; padding: 0; }
.distinction { display: inline-flex; align-items: center; gap: 8px; padding: 3px 4px 3px 12px; border: 1px solid var(--navy); border-radius: 999px; color: var(--navy); font: 600 13px var(--mono); }
.distinction span { padding: 1px 8px; border-radius: 999px; background: #EEF0F2; color: var(--muted); font-weight: 400; }
.distinction.is-active span { background: #2C6E4A; color: #fff; }

/* Front page + side column */
.front { display: flex; flex-wrap: wrap; gap: 32px; padding: 52px 0; }
.front article { flex: 2 1 560px; min-width: 0; }
.front aside { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.lead-title { font: 900 clamp(34px, 5vw, 52px)/1 var(--display); letter-spacing: -.02em; margin: 8px 0 16px; }
.lead-title a { color: var(--ink); text-decoration: none; } .lead-title a:hover { color: var(--navy); }
.photo { display: block; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: 18px; background: #EDEFE9; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: 0 1px 2px rgba(19, 28, 46, .05), 0 8px 22px rgba(19, 28, 46, .06); }
.card-navy { background: var(--navy); color: #fff; border-color: var(--navy); } .card-navy a { color: var(--yellow); }
.stamp { font: 600 12px var(--mono); color: var(--red-text); border: 2px solid var(--red-text); padding: 2px 8px; transform: rotate(-3deg); display: inline-block; letter-spacing: .08em; }
.ledger { display: flex; flex-direction: column; margin-top: 12px; }
.ledger div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.counts b { display: block; font: 900 40px/1 var(--display); }

/* Places band */
.places { background: var(--deep); color: #E8EEF2; }
.places .wrap { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; padding-top: 52px; padding-bottom: 52px; }
.places a { color: var(--yellow); } .places .muted { color: #B8C6D1; }
.places h2 { font: 900 clamp(30px, 4vw, 44px)/1 var(--display); margin: 8px 0 12px; color: #fff; }
.places .eyebrow { color: var(--green); }

/* Join */
.join { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 14px; margin-top: 20px; }
.join a { display: block; padding: 26px 22px; border-radius: 18px; font: 600 24px/1.15 var(--display); text-decoration: none; }
.join .j-red { background: var(--red); color: #fff; } .join .j-purple { background: var(--purple); color: #fff; }
.join .j-green { background: var(--green); color: var(--deep); } .join .j-yellow { background: var(--yellow); color: var(--deep); }
.join .j-blue { background: var(--blue-dark); color: #fff; }
.join a:hover { filter: brightness(.95); }

/* Footer */
.site-foot { background: var(--deep); color: #B8C6D1; font-size: 14px; margin-top: 56px; }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 24px 48px; justify-content: space-between; align-items: flex-start; padding-top: 36px; padding-bottom: 40px; }
.site-foot a { color: #fff; } .foot-name { color: #fff; } .foot-brand { display: flex; gap: 14px; align-items: flex-start; max-width: 620px; line-height: 1.6; }
.foot-brand img { width: 56px; height: 56px; border-radius: 50%; background: #fff; flex: 0 0 auto; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.foot-policies { display: flex; flex-wrap: wrap; gap: 6px 18px; flex-basis: 100%; font-size: 13px; padding-top: 14px; border-top: 1px solid var(--line-dark); }
.foot-social { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; flex-basis: 100%; }
.foot-social span { font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #B8C6D1; margin-right: 6px; }
.foot-social a { border: 1px solid var(--line-dark); border-radius: 999px; padding: 6px 14px; text-decoration: none; font-size: 14px; }
.foot-social a:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Pages and articles */
.page { max-width: 820px; padding: 48px 24px; margin: 0 auto; }
.page h1 { font: 900 clamp(36px, 5vw, 56px)/1.02 var(--display); color: var(--navy); margin: 0 0 16px; letter-spacing: -.01em; }
.prose { font-size: 18px; line-height: 1.7; }
.prose h2 { font-size: 30px; margin: 36px 0 12px; color: var(--navy); } .prose h3 { font-size: 23px; margin: 28px 0 10px; }
.prose img { border-radius: 12px; margin: 12px 0; } .prose blockquote { border-left: 4px solid var(--yellow); margin: 20px 0; padding: 4px 18px; color: #3D4452; }
.prose table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; } .prose td, .prose th { border: 1px solid var(--line); padding: 8px; }
.note { background: #FFF6D6; border: 1px solid #E8C35A; border-radius: 12px; padding: 14px 18px; margin: 0 0 24px; }
.list-articles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; padding: 32px 0; }
.list-articles a { display: block; text-decoration: none; color: var(--ink); background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 1px 0 var(--line); }
.list-articles a > div { padding: 16px 18px 20px; } .list-articles strong { display: block; font: 600 22px/1.2 var(--display); margin-top: 6px; }
.list-articles img, .list-articles .noimg { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; background: #EDEFE9; }
.card-pic { display: block; position: relative; }
.card-pic small { position: absolute; right: 10px; bottom: 16px; padding: 2px 9px; border-radius: 999px; background: rgba(11, 22, 48, .78); color: #fff; font-size: 12px; line-height: 1.5; }
.pager { display: flex; gap: 12px; flex-wrap: wrap; padding-bottom: 24px; }
.page-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; font-size: 16px; line-height: 1.25; }
.page-links a, .page-links .now, .page-links .off { padding: 9px 14px; border: 1px solid var(--line); border-radius: 10px; }
.page-links a { background: #fff; color: var(--navy); font-weight: 600; text-decoration: none; }
.page-links a:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.page-links .now { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
.page-links .off { border-color: transparent; color: var(--muted); }
.page-links .count { margin-left: auto; color: var(--muted); font-size: 14px; }
@media (max-width: 640px) { body { font-size: 16px; } .hero { padding-top: 32px; } }
/* Phones (D-143): the main menu folds behind a Menu button; "Become a Supporter" stays in view. */
@media (max-width: 480px) { .wrap, .legacy, .page { padding-left: 16px; padding-right: 16px; } .legacy .card { padding: 16px; } }
/* D-246: on a phone a record reads downward (date, kind, what happened, status), so its description keeps the screen's width. */
@media (max-width: 640px) {
    .record table, .record tbody, .record tr, .record td { display: block; width: auto; min-width: 0; }
    .record tr { border-top: 1px solid var(--line); padding: 10px 0; }
    .record td { border-top: 0; padding: 2px 0; }
    .record td.when { white-space: normal; width: auto; }
    .kind { white-space: normal; }
}
.wrap.top { padding-top: 40px; } .note.flush { margin: 0; }
@media print {
  .site-foot, .skip, .stripe, .btn, .filters { display: none !important; }
  body { background: #fff; font-size: 12pt; } .card, .work-card { break-inside: avoid; box-shadow: none; border: 1px solid #999; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: var(--muted); }
}

/* Our Work (D-128): the register of BRACE's matters. A timeline marker's shape shows its evidence: hollow for BRACE's own account,
   half for a third-party report, solid for a document on file, ringed for independent verification. */
.work-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 8px; }
.work-tabs a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); text-decoration: none; font-size: 15px; }
.work-tabs a[aria-current="page"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.work-tabs a:hover { border-color: var(--navy); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 18px 0 8px; }
.stat-grid div { background: #fff; border-radius: 14px; padding: 14px 16px; border-top: 6px solid var(--c, var(--navy)); }
.stat-grid b { display: block; font: 900 34px/1 var(--display); color: var(--ink); }
.stat-grid span { display: block; font-size: 14px; color: var(--muted); margin-top: 6px; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 18px 0; }
.filters label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.filters input, .filters select { min-height: 44px; padding: 0 12px; border: 1px solid #9AA1AD; border-radius: 10px; background: #fff; font: 16px var(--sans); color: var(--ink); max-width: 100%; }
.filters input[type=search] { min-width: min(280px, 100%); }
.work-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 18px; margin: 10px 0 24px; }
.work-card { display: flex; flex-direction: column; gap: 8px; background: #fff; border-radius: 0 0 18px 18px; border-top: 8px solid var(--c, var(--navy)); padding: 18px 20px 20px;
  text-decoration: none; color: var(--ink); box-shadow: 0 1px 0 var(--line); }
a.work-card:hover { box-shadow: 0 0 0 2px var(--c, var(--navy)); color: var(--ink); }
.work-card strong { font: 600 22px/1.2 var(--display); }
.work-card .meta { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 13px; color: var(--muted); }
.t-regulatory { --c: var(--blue); } .t-legal { --c: var(--purple); } .t-correspondence { --c: var(--navy); } .t-applications { --c: var(--orange); }
.t-meetings { --c: var(--yellow); } .t-campaigns { --c: var(--red); } .t-research { --c: var(--green); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 0 24px; margin: 18px 0; }
.facts div { padding: 10px 0; border-top: 1px solid var(--line); }
.facts dt { font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.facts dd { margin: 4px 0 0; }
.work-layout { display: flex; flex-wrap: wrap; gap: 36px; }
.work-layout > section { flex: 2 1 560px; min-width: 0; }
.work-layout > aside { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.timeline { list-style: none; margin: 18px 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.timeline li { position: relative; padding: 0 0 26px 38px; }
.timeline li::before { content: ""; position: absolute; left: 1px; top: 5px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--navy); background: var(--paper); }
.timeline li.ev-reported::before { background: linear-gradient(90deg, var(--blue) 50%, var(--paper) 50%); border-color: var(--blue); }
.timeline li.ev-documented::before { background: var(--navy); }
.timeline li.ev-verified::before { background: var(--green); border-color: var(--green); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--green); }
.timeline .when { font: 500 14px var(--mono); color: var(--muted); }
.timeline h3 { font: 600 20px/1.25 var(--display); margin: 4px 0 6px; }
.timeline .ev { font-size: 14px; color: var(--muted); }
.timeline .withheld { font-style: italic; color: var(--muted); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--navy); display: inline-block; }
.legend .l-reported { background: linear-gradient(90deg, var(--blue) 50%, #fff 50%); border-color: var(--blue); } .legend .l-documented { background: var(--navy); }
.legend .l-verified { background: var(--green); border-color: var(--green); }
.doc-list { list-style: none; padding: 0; margin: 0; }
.doc-list li { padding: 12px 0; border-top: 1px solid var(--line); }
.doc-list .mono { font-size: 12px; word-break: break-all; }
.corrected { font-size: 14px; background: #F3F4F1; border-left: 3px solid var(--orange); padding: 8px 12px; margin-top: 8px; }

/* Older public pages and forms inside the Circle layout (D-131): the scheme portal, disclosures, office bearers, election results,
   About, sign-in, registration and report a case. Their markup is unchanged; this restyles it in the brand. */
.legacy { max-width: 980px; margin: 0 auto; padding: 36px 24px 8px; }
.legacy h1 { font: 900 clamp(32px, 5vw, 48px)/1.05 var(--display); color: var(--navy); margin: 0 0 14px; letter-spacing: -.01em; }
.legacy h2 { font: 600 26px/1.2 var(--display); color: var(--navy); margin: 22px 0 10px; }
.legacy h3 { font: 600 20px/1.25 var(--display); margin: 18px 0 8px; }
.legacy .card { background: #fff; border: 1px solid var(--line); border-top: 6px solid var(--navy); border-radius: 0 0 18px 18px; padding: 24px; margin-bottom: 18px; overflow-x: auto; }
.legacy section.card:nth-of-type(6n+1) { border-top-color: var(--red); } .legacy section.card:nth-of-type(6n+2) { border-top-color: var(--orange); }
.legacy section.card:nth-of-type(6n+3) { border-top-color: var(--yellow); } .legacy section.card:nth-of-type(6n+4) { border-top-color: var(--green); }
.legacy section.card:nth-of-type(6n+5) { border-top-color: var(--blue); } .legacy section.card:nth-of-type(6n+6) { border-top-color: var(--purple); }
.legacy table { width: 100%; border-collapse: collapse; font-size: 15px; }
.legacy th { text-align: left; font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 10px 10px 8px 0; border-bottom: 2px solid var(--line); }
.legacy td { text-align: left; padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.legacy label { display: block; margin: 14px 0 6px; font-weight: 600; font-size: 15px; }
.legacy form.filters label { margin: 0; font-weight: 400; color: var(--muted); font-size: 13px; }
.legacy form.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.legacy input:not([type=checkbox]):not([type=radio]), .legacy select, .legacy textarea { width: 100%; box-sizing: border-box; min-height: 46px; padding: 10px 12px;
  border: 1px solid #9AA1AD; border-radius: 10px; background: #fff; font: 16px var(--sans); color: var(--ink); }
.legacy textarea { min-height: 110px; }
.legacy form.filters input, .legacy form.filters select { width: auto; max-width: 100%; }
.legacy input[type=checkbox], .legacy input[type=radio] { width: 18px; height: 18px; accent-color: var(--navy); vertical-align: middle; margin-right: 6px; }
.legacy button, .legacy a.button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; margin-top: 16px; padding: 10px 22px;
  border: 0; border-radius: 999px; background: var(--navy); color: #fff; font: 600 16px var(--sans); cursor: pointer; text-decoration: none; }
.legacy button:hover, .legacy a.button:hover { background: var(--navy-dark); color: #fff; }
.legacy button.secondary { background: #fff; color: var(--ink); border: 2px solid var(--ink); } .legacy button.danger { background: var(--red-text); }
.legacy .row { display: flex; gap: 16px; flex-wrap: wrap; } .legacy .row > * { flex: 1 1 220px; min-width: 0; }
.legacy .error { color: var(--red-text); font-weight: 600; } .legacy .ok { color: #1F7A2E; font-weight: 600; }
.legacy .marker { background: #FFF6D6; color: #6B4A00; border: 1px solid #E8C35A; padding: 1px 8px; border-radius: 999px; font: 600 13px var(--sans); }
.legacy .badge { display: inline-block; padding: 1px 10px; border-radius: 999px; border: 1px solid var(--line); background: #F3F4F1; font: 12px var(--mono); }
.legacy .badge.official { background: #E6F5E8; border-color: #9BD3A3; } .legacy .badge.reported { background: #FFF6D6; border-color: #E8C35A; }
.legacy fieldset { border: 1px solid var(--line); border-radius: 14px; padding: 12px 18px 18px; margin: 18px 0; }
.legacy legend { font-weight: 600; padding: 0 6px; }
.legacy .narrow { max-width: 460px; margin: 0 auto; }
/* The registration form: one column on a phone, two from tablet width, and nothing stretched across a row by itself (D-258). */
.legacy .form-grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 20px; align-items: start; }
.legacy .form-hint { font-size: 13.5px; line-height: 1.45; color: var(--muted); margin: 6px 0 0; }
.legacy .form-tips .form-hint { margin-top: 10px; }
.legacy .form-grid .error { font-size: 14px; margin: 6px 0 0; }
.legacy .form-note { background: #FFF6D6; color: #6B4A00; border: 1px solid #E8C35A; border-radius: 10px; padding: 10px 12px; margin: 12px 0; font-size: 14px; line-height: 1.45; }
.legacy label.tick { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; font-weight: 400; line-height: 1.4; cursor: pointer; }
.legacy label.tick input { flex: none; margin: 1px 0 0; }
.legacy .form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.legacy .form-actions button { margin-top: 0; }
.legacy .apply-form h2 { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.legacy .apply-form > h2:first-child { margin-top: 12px; padding-top: 0; border-top: 0; }
.legacy .apply-form .locate button { margin-top: 6px; }
.legacy details.form-more { margin-top: 10px; }
.legacy details.form-more > summary { display: list-item; width: fit-content; max-width: 100%; padding: 6px 0; color: var(--muted); font-size: 14px; line-height: 1.4; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.legacy .form-grid .form-wide { grid-column: 1 / -1; }
@media (min-width: 640px) {
    .legacy .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .legacy .form-tips { padding-top: 34px; }   /* level with the mobile's box, beside it */
}
@media (max-width: 480px) {
    .legacy .apply-form fieldset { padding: 8px 12px 14px; }
    .legacy .apply-form .locate button, .legacy .apply-form .form-actions button, .legacy .apply-form > button[type=submit] { width: 100%; }
}

/* BRACE history (D-138): the timeline of Our Work, with each message or minutes folded under its entry. */
.hist-body p { margin: 0 0 10px; max-width: 760px; }
.hist-quote { margin: 8px 0 0; max-width: 760px; }
.hist-quote summary { cursor: pointer; font: 500 14px var(--mono); color: var(--navy); }
.hist-quote blockquote { margin: 10px 0 0; padding: 12px 16px; border-left: 3px solid var(--line); background: #F7F7F4; font-size: 15px; }
.hist-quote blockquote p { margin: 0 0 8px; }

/* D-143: Our Work follow, share and yearly report */
.work-follow form { margin: 0; }
.work-qr svg { display: block; width: 168px; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; }
.work-url { font-size: 13px; word-break: break-all; margin: 10px 0 6px; }
.work-years { margin-top: 20px; }
.work-years a { white-space: nowrap; }
.work-report-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 20px 0 28px; }
.work-report-matter { margin: 0 0 32px; }
.work-report-scroll { overflow-x: auto; }
.work-report-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.work-report-table th, .work-report-table td { text-align: left; vertical-align: top; padding: 8px 10px 8px 0; border-top: 1px solid var(--line); }
.work-report-table td:first-child { white-space: nowrap; }
@media (max-width: 480px) { .work-report-table td:first-child { white-space: normal; } .work-report-tools .btn { flex: 1 1 100%; } }
@media print {
  .site-foot, .skip, .no-print { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .work-report .display, .work-report .h-section { color: #000; }
  .work-report a { color: #000; text-decoration: none; }
  .work-report-matter { break-inside: avoid-page; }
  .work-report-scroll { overflow: visible; }
}

/* D-152: the Join BRACE page */
.join-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); gap: 16px; }
.join-link { display: flex; gap: 16px; align-items: center; justify-content: space-between; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.join-link h3 { margin: 0 0 6px; font-size: 20px; color: var(--navy); }
.join-link p { margin: 0 0 12px; }
.join-qr { flex: 0 0 auto; width: 120px; }
.join-qr svg { display: block; width: 100%; height: auto; }
.btn-whatsapp { background: #1F7A2E; color: #fff; } .btn-whatsapp:hover { background: #17612A; color: #fff; }
@media (max-width: 480px) { .join-link { flex-direction: column; align-items: flex-start; } .join-qr { width: 140px; } }
/* D-190: long edited pages: a contents list, headings that can be linked to, readable tables, and a way back to the top. */
.page-contents { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; margin: 8px 0 28px; }
.page-contents ol { margin: 0; padding-left: 20px; columns: 2 220px; column-gap: 28px; }
.page-contents li { margin: 0 0 6px; break-inside: avoid; }
.prose h2, .prose h3 { scroll-margin-top: 16px; }
.prose th { text-align: left; vertical-align: top; background: var(--paper); font-weight: 600; }
.prose td { vertical-align: top; }
.prose tbody th { width: 30%; min-width: 140px; }
.page-top { margin: 36px 0 0; font-size: 15px; }
a.prog { transition: transform .15s ease, box-shadow .15s ease; }
a.prog:hover, a.prog:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(19, 28, 46, .12); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { a.prog { transition: none; } a.prog:hover, a.prog:focus-visible { transform: none; } }
@media print { .page-contents, .page-top { display: none; } }