/* ============================================================================================
   DocketEye — CIVIC theme.  Loaded AFTER ui.css and overriding it.

   Moshe pointed at entitysearch.us, saw a version at shifted hues, and said: make it like that
   website. So this is the real thing rather than an impression of it.

   WHAT IT IS. That site is built on the U.S. Web Design System, and the tokens below are USWDS's
   published values, read off the live site: #005ea2 primary, #1a4480 primary-dark, #162e51
   primary-darker, #ffbe2e accent-warm, #d83933 error, #71767a gray-cool-50, Source Sans Pro. The
   palette and the typeface are both openly licensed and free to use. USWDS's one real restriction
   is the government-identity chrome — the flag banner and the "An official website of the United
   States government" strip — and that is not here, is not coming, and is the only part of this
   system that would actually be impersonation. The reassurance row says "Not a government agency"
   in plain words, which is the honest price of wearing a civic palette.

   Source Sans Pro is SIL Open Font License 1.1 and is SELF-HOSTED at /assets/fonts/, which is
   also what entitysearch.us does. The vhost's CSP is font-src 'self', so a Google Fonts link
   would be silently blocked and the page would fall back to Arial on every visitor's screen. See
   site/assets/fonts/OFL.txt for the licence that ships with the files.

   HOW IT WORKS. ui.css is written entirely against custom properties, so most of this file is
   token values and every page picks the change up at once. Nothing here renames a class or
   deletes a selector, so page scripts that write literal class strings ('notice error', 'pill ok')
   keep working untouched. Reversible by deleting one <link> per page.
   ========================================================================================== */

/* ---------------------------------------------------------------- Source Sans Pro, self-hosted */
@font-face{
  font-family:'Source Sans Pro';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/source-sans-pro-400.woff2') format('woff2');
}
@font-face{
  font-family:'Source Sans Pro';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/source-sans-pro-600.woff2') format('woff2');
}
@font-face{
  font-family:'Source Sans Pro';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/source-sans-pro-700.woff2') format('woff2');
}

:root{
  /* --- USWDS surfaces ------------------------------------------------------------------- */
  --paper:#f8f9fa;            /* color-surface        */
  --paper-2:#f3f4f5;          /* surface-container-low */
  --white:#ffffff;
  --pure:#ffffff;

  /* --- USWDS ink ------------------------------------------------------------------------ */
  --ink:#1b1b1b;              /* on-surface          */
  --body:#3d4551;             /* on-surface-variant  */
  --muted:#565c65;            /* gray-cool-60 — 7.0:1 on #f8f9fa, so small text still passes.
                                 NOT #71767a (outline): that is a BORDER colour and measures
                                 3.4:1, which fails 4.5:1 for the captions this token sets. */

  /* --- USWDS lines ---------------------------------------------------------------------- */
  --line:#c6cace;             /* outline-variant     */
  --line-soft:#e1e3e4;        /* surface-container-highest */
  --control-line:#71767a;     /* outline — the edge of an input. 3.4:1 on white, which is what
                                 WCAG 1.4.11 asks of a control boundary. */

  /* --- USWDS blue. The lead colour now, not furniture. ---------------------------------- */
  --green:#005ea2;            /* primary — links, focus, the mark. Name is historic, see ui.css */
  --green-deep:#162e51;       /* primary-darker — the hero and the bars */
  --green-tint:#d9e8f6;       /* primary-fixed */
  --green-line:#73b3e7;       /* primary-fixed-dim */
  --blue-mid:#1a4480;         /* primary-dark — hovers and the second layer of navy */

  /* --- USWDS accent-warm. The gold. ----------------------------------------------------- */
  --gold:#ffbe2e;
  --gold-deep:#936f38;        /* secondary — for text on light where gold cannot carry contrast */
  --gold-tint:#fef4e4;

  /* --- functional colour: USWDS error, plus green and amber tuned to sit with it --------- */
  --warn:#d83933; --warn-bg:#fdeceb; --warn-line:#f4c4c2; --warn-ink:#8b1a17;
  --ok:#00a91c;   --ok-bg:#ecf3ec;   --ok-line:#b7d4b5;   --ok-ink:#154c21;
  --amber:#936f38;--amber-bg:#fef4e4;--amber-line:#f0d9a8;

  /* --- ONE voice, and it is Source Sans Pro. The editorial direction's Georgia display is
         what made the old site read as a broadsheet; this direction is a civic form. --------- */
  --sans:'Source Sans Pro',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --serif:'Source Sans Pro',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --shadow-fn:0 1px 2px rgba(0,0,0,.1);
}

body{font-family:var(--sans)}

/* Display type, matched to the reference: 700 weight, -0.015em tracking, 1.15 leading. */
h1,h2,h3,.big,.h2,.ans-h,.brand{font-family:var(--sans)}
h1,h2,.big,.h2,.ans-h{letter-spacing:-.015em;font-weight:700}
.big{line-height:1.15}

/* --------------------------------------------------------------------- the hero */
.front{
  background:var(--green-deep);
  color:#fff;
  border-bottom:0;
  padding-block:clamp(40px,7vw,76px) clamp(32px,5vw,56px);
}
.front .front-in{text-align:center}
.front h1,.front .big,.front .h2{color:#fff}
.front .deck{color:#dfe5ec;margin-left:auto;margin-right:auto;max-width:44rem}
.front .deck b{color:#fff}
.front a{color:var(--gold)}
/* The eyebrow: gold, 700, uppercase, wide tracking — measured at 1.28px on 12.8px text. */
.front .kicker{color:var(--gold);font-weight:700;letter-spacing:.1em;font-size:.8rem}

/* The white panel floating on the navy. The shape the whole direction turns on. */
.front .chk{
  background:#fff;
  border:0;
  border-radius:8px;
  box-shadow:var(--shadow-fn),0 12px 32px rgba(0,0,0,.24);
  padding:clamp(18px,2.6vw,28px);
  color:var(--body);
  text-align:left;
  max-width:46rem;margin-left:auto;margin-right:auto;
}
.front .chk .chk-lbl,.front .chk h2,.front .chk h3{color:var(--ink)}
.front .chk-fine{color:var(--muted)}

.front .nc-scope{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.24);
  border-radius:8px;color:#e4ebf4;
  text-align:left;max-width:46rem;margin-left:auto;margin-right:auto;
}
.front .nc-scope h2{color:#fff}
.front .nc-scope a{color:var(--gold)}

/* --------------------------------------------------------------------- controls */
input[type=text],input[type=search],input[type=email],input[type=password],select,textarea{
  border-radius:6px;border:1px solid var(--line);font-family:var(--sans);
}
input:focus,select:focus,textarea:focus{
  outline:.25rem solid var(--green);outline-offset:0;border-color:var(--green);box-shadow:none;
}
.btn{border-radius:6px;font-weight:700;font-family:var(--sans);letter-spacing:0}
/* The gold call to action. Dark text on gold — #1b1b1b on #ffbe2e is 11.2:1. */
.btn-primary{background:var(--gold);border-color:var(--gold);color:#1b1b1b}
.btn-primary:hover{background:#e5a729;border-color:#e5a729;color:#1b1b1b}
.btn-ghost{border-radius:6px}

.chk-seg{gap:4px}
.chk-seg button{border-radius:4px;font-family:var(--sans)}
.chk-seg button[aria-pressed=true]{background:var(--green);border-color:var(--green);color:#fff}

/* --------------------------------------------------------------------- the top bar */
.bar{background:var(--green-deep);border-bottom:0}
.bar .brand,.bar .brand b{color:#fff}
.bar .navlink{color:#dfe5ec}
.bar .navlink:hover{color:#fff}
.bar .signin{
  background:var(--gold);color:#1b1b1b;border-color:var(--gold);
  border-radius:6px;font-weight:700;
}
.bar .signin:hover{background:#e5a729;border-color:#e5a729;color:#1b1b1b}

/* --------------------------------------------------------------------- sections */
.band,.sec{border-top-color:var(--line)}
.card{border-radius:8px;border-color:var(--line);box-shadow:var(--shadow-fn)}
.notice{border-radius:6px}
a{color:var(--green)}
a:visited{color:#54278f}                      /* USWDS visited-link violet */

/* --------------------------------------------------------------------- reassurance chips
   The row under the search panel on the reference. Each chip is a FACT about what the page does,
   never a claim about what it will find — the copy rules in tests/test_site_html.py apply here
   exactly as they do to the headline. */
.chips{
  display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;
  margin:18px 0 0;padding:0;list-style:none;
}
.chips li{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.86rem;font-weight:600;color:#e4ebf4;
}
.chips li::before{
  content:"";width:15px;height:15px;flex:none;background:var(--gold);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 11.4 3.1 8.3l1.1-1.1 2 2 4.6-4.6 1.1 1.1z' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 11.4 3.1 8.3l1.1-1.1 2 2 4.6-4.6 1.1 1.1z' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* The count row beneath the chips, in the reference's shape: a number, then what it counts. */
.counts{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin:18px 0 0;padding:0;list-style:none;
}
.counts li{
  display:inline-flex;align-items:baseline;gap:7px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  border-radius:6px;padding:7px 14px;font-size:.86rem;color:#e4ebf4;
}
.counts b{color:var(--gold);font-weight:700;font-size:1rem}

/* --------------------------------------------------------------------- the verdict panel */
.nc-verdict{border-radius:8px;border-color:var(--line);overflow:hidden;box-shadow:var(--shadow-fn)}
.nc-bar{letter-spacing:.1em;font-family:var(--sans)}
.nc-bar.taken{background:var(--warn)}
.nc-bar.close{background:var(--gold-deep)}
.nc-bar.clear{background:#2e8540}
.nc-why{font-family:var(--sans)}

/* --------------------------------------------------------------------- footer */
.foot{background:var(--green-deep);border-top:0;color:#dfe5ec}
.foot a{color:#fff}
.foot a:visited{color:#fff}
.foot a:hover{color:var(--gold)}
.foot .co{color:#fff}
.foot .contact{color:#c3d0e2}