/*
  P1 (2026-10-05): the one stylesheet for the four signer-facing pages —
  legislative-sign, legislative-record, legislative-preferences, legislative-my-letters.
  Served by src/server.js at /legislative/assets/public.css (the public host proxies
  /legislative/ whole, so no nginx change). The look follows acsatm.com — navy, cream,
  gold, the red of the flag; Cormorant Garamond for headlines, Plus Jakarta Sans for the
  rest — with the fonts self-hosted under /legislative/assets/fonts (OFL-1.1, from
  @fontsource 5.3.0): a signer's browser talks to this host and Turnstile, nothing else.
  No prefers-color-scheme: the brand look is the look.
*/

@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("/legislative/assets/fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("/legislative/assets/fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("/legislative/assets/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("/legislative/assets/fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 600; font-display: swap; src: url("/legislative/assets/fonts/cormorant-garamond-latin-600-italic.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/legislative/assets/fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/legislative/assets/fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/legislative/assets/fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2"); }

:root {
  --navy: #0a0d17; --navy-2: #12182a; --cream: #f0ede8; --paper: #f6f3ec; --white: #fffdf9;
  --ink: #1b1f2a; --muted: #5f6573; --muted-hero: #b3b9c8;
  --gold: #c9a84c; --gold-soft: rgba(201, 168, 76, .28); --gold-faint: rgba(201, 168, 76, .12);
  --red: #b22234; --red-deep: #8e1a29;
  --line: rgba(27, 31, 42, .14); --line-soft: rgba(27, 31, 42, .08);
  --ok: #1f6b3a; --bad: #9d1f2a; --warn: #8a6d1f;
  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ui: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius: 4px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.6 var(--ui); font-weight: 400; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--red-deep); text-decoration-color: var(--gold-soft); text-underline-offset: 2px; }
a:hover { color: var(--red); text-decoration-color: var(--gold); }
.wrap { width: 100%; max-width: 840px; margin: 0 auto; padding: 0 20px; }
.wrap.narrow { max-width: 680px; }

/* ── the flag ribbon: red / cream / red, then a gold hairline ───────────── */
.ribbon { height: 7px; background: linear-gradient(90deg, var(--red) 0 33.4%, var(--cream) 33.4% 66.7%, var(--red) 66.7%); }
.ribbon::after { content: ""; display: block; height: 1px; background: var(--gold); opacity: .9; }

/* ── the hero band ──────────────────────────────────────────────────────── */
.hero { position: relative; background: var(--navy); color: var(--cream); overflow: hidden; isolation: isolate; }
.hero::before {
  /* a quiet star field, fading toward the right — no image, no request */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(240, 237, 232, .55) 0 1px, transparent 1.6px),
    radial-gradient(circle at 1px 1px, rgba(201, 168, 76, .5) 0 1px, transparent 1.6px);
  background-size: 54px 54px, 86px 86px; background-position: 7px 11px, 31px 29px;
  -webkit-mask-image: linear-gradient(100deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .12) 55%, transparent 85%);
  mask-image: linear-gradient(100deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .12) 55%, transparent 85%);
}
.hero::after {
  /* the glow behind the headline */
  content: ""; position: absolute; inset: auto -20% -60% 30%; height: 120%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(178, 34, 52, .22), transparent 60%);
}
.hero .wrap { padding-top: 22px; padding-bottom: 40px; }
.brand-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 22px; border-bottom: 1px solid rgba(240, 237, 232, .12); margin-bottom: 30px; }
.wordmark { display: inline-flex; align-items: center; gap: 14px; color: var(--cream); text-decoration: none; }
.wordmark img { display: block; height: 64px; width: auto; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45)); }
.wordmark .name { font: 700 13px/1 var(--ui); letter-spacing: 3px; text-transform: uppercase; }
.wordmark .name small { display: block; margin-top: 6px; font-size: 11px; letter-spacing: 2px; color: var(--muted-hero); font-weight: 500; }
.brand-row .aside { font: 500 12px/1.5 var(--ui); letter-spacing: 2px; text-transform: uppercase; color: var(--muted-hero); }
.eyebrow { font: 700 14px/1.4 var(--ui); letter-spacing: 3px; text-transform: uppercase; color: #d9344a; margin: 0 0 14px; }
.eyebrow::before { content: ""; display: inline-block; width: 26px; height: 2px; background: #d9344a; vertical-align: middle; margin-right: 10px; }
.hero h1 { font: 600 clamp(2.4rem, 5.2vw, 3.6rem)/1.06 var(--display); letter-spacing: -.01em; margin: 0 0 12px; color: var(--cream); max-width: 26ch; }
.hero h1 em, .accent { font-style: italic; color: var(--gold); }
.hero .sub { font: italic 600 clamp(1.3rem, 2.5vw, 1.65rem)/1.3 var(--display); color: var(--gold); margin: 0; max-width: 46ch; }
.hero .lede { color: var(--muted-hero); margin: 16px 0 0; max-width: 56ch; font-size: 1.02rem; }

/* ── the paper ──────────────────────────────────────────────────────────── */
main { flex: 1; }
main .wrap { padding-top: 34px; padding-bottom: 72px; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; color: var(--ink); letter-spacing: -.005em; }
h1 { font-size: 2rem; line-height: 1.15; margin: 0 0 8px; }
h2 { font-size: 1.6rem; line-height: 1.2; margin: 26px 0 8px; }
h3 { font-size: 1.25rem; margin: 18px 0 6px; }
h2.ok, h1.ok { color: var(--ok); }
p { margin: 8px 0; }
.muted { color: var(--muted); } .small { font-size: .9rem; }
.ok { color: var(--ok); font-weight: 700; } .bad, .err { color: var(--bad); font-weight: 600; } .warn { color: var(--warn); font-weight: 600; }
.err { margin-top: 8px; }
.hidden { display: none !important; }
code { font-family: var(--mono); font-size: .88em; background: var(--gold-faint); padding: 1px 6px; border-radius: 3px; }
.hash { display: block; font-family: var(--mono); font-size: .82rem; word-break: break-all; background: var(--gold-faint); padding: 6px 8px; margin: 4px 0; border-radius: 3px; }

/* a section of the page: a card with a gold rule on top, breathing room, no heavy box */
.card { position: relative; background: var(--white); border: 1px solid var(--line-soft); border-top: 3px solid var(--gold); border-radius: var(--radius); padding: 24px 26px 26px; margin: 0 0 22px; box-shadow: 0 1px 0 rgba(27, 31, 42, .04), 0 12px 30px -24px rgba(10, 13, 23, .35); }
.card > h1:first-child, .card > h2:first-child { margin-top: 0; }
@media (max-width: 560px) { .card { padding: 18px 16px 20px; } .brand-row .aside { display: none; } .hero .wrap { padding-bottom: 32px; } .wordmark img { height: 52px; } footer.foot .mark { height: 84px; } }

/* the three steps of the signing */
.steps { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; font: 700 12px/1.4 var(--ui); letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.steps b { color: var(--red); font-weight: 700; }
.steps b::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); margin-right: 8px; vertical-align: 1px; }
.steps span:where(:nth-child(2), :nth-child(4)) { color: var(--gold); font-size: 14px; letter-spacing: 0; }

/* forms */
label { display: block; font-weight: 700; font-size: .92rem; letter-spacing: .02em; margin: 14px 0 5px; color: var(--ink); }
input, select, textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); font: inherit; font-size: 1rem; transition: border-color .15s, box-shadow .15s, background .15s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); background: #fff; box-shadow: 0 0 0 3px var(--gold-faint); }
input::placeholder, textarea::placeholder { color: #9b9fa9; }
textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .row3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .row, .row3 { grid-template-columns: 1fr; gap: 4px; } }

button, a.btn { display: inline-block; background: var(--red); color: var(--cream); border: 1px solid var(--red); border-radius: var(--radius); padding: 12px 22px; font: 700 .95rem/1.2 var(--ui); letter-spacing: .01em; cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, transform .05s; }
button:hover, a.btn:hover { background: var(--red-deep); border-color: var(--red-deep); color: var(--cream); }
button:active, a.btn:active { transform: translateY(1px); }
button.secondary, a.btn.secondary { background: transparent; color: var(--red-deep); border-color: var(--gold-soft); }
button.secondary:hover, a.btn.secondary:hover { background: var(--gold-faint); border-color: var(--gold); color: var(--red-deep); }
button[disabled], button:disabled { opacity: .55; cursor: default; transform: none; }
button:focus-visible, a.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.check { display: flex; gap: 12px; align-items: flex-start; margin: 12px 0; font-weight: 400; font-size: .97rem; letter-spacing: 0; cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--red); flex: none; }

/* the letter as the office will read it */
.letter { white-space: pre-wrap; font: 500 1.18rem/1.55 var(--display); color: var(--ink); background: var(--white); border: 1px solid var(--line-soft); border-left: 3px solid var(--gold); border-radius: var(--radius); padding: 20px 22px; margin: 8px 0 18px; }
.consent { white-space: pre-wrap; background: var(--paper); border-left: 4px solid var(--red); padding: 12px 16px; border-radius: 0 var(--radius) var(--radius) 0; font-size: .94rem; }
.pill { display: inline-block; padding: 2px 11px; border-radius: 999px; border: 1px solid var(--gold-soft); background: transparent; color: var(--ink); font-size: .82rem; font-weight: 500; margin: 2px 6px 2px 0; white-space: nowrap; }
.pill.accepted { border-color: var(--ok); color: var(--ok); } .pill.rejected, .pill.review_rejected { border-color: var(--bad); color: var(--bad); }
.callout { border: 1px solid var(--gold-soft); border-radius: var(--radius); padding: 12px 16px; margin: 10px 0 14px; background: var(--white); }

/* one office: the hand-off card */
.hcard { border: 1px solid var(--line-soft); border-left: 3px solid var(--red); border-radius: var(--radius); padding: 14px 16px; margin: 12px 0; background: var(--white); }
.hcard .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .hcard .acts button, .hcard .acts a { font-size: .9rem; padding: 9px 14px; }
.hcard .done { color: var(--ok); font-weight: 700; margin-top: 8px; }

/* tables (the record page) */
table { width: 100%; border-collapse: collapse; font-size: .94rem; }
th, td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th { font: 700 12px/1.4 var(--ui); letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
dt { font: 700 12px/1.7 var(--ui); letter-spacing: 2px; text-transform: uppercase; color: var(--muted); } dd { margin: 0; }
@media (max-width: 560px) { dl { grid-template-columns: 1fr; } dt { margin-top: 8px; } }

/* my letters */
.letter-row { border-top: 1px solid var(--line-soft); padding: 12px 0; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.letter-row .who { flex: 1 1 260px; }
.letter-row .btn, .letter-row button { font-size: .88rem; padding: 8px 13px; }
.signing-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.signing-head h2 { margin: 0; }

/* ── the footer band ────────────────────────────────────────────────────── */
footer.foot { background: var(--navy); color: var(--muted-hero); border-top: 1px solid var(--gold); }
footer.foot .wrap { padding: 30px 20px 34px; display: flex; gap: 26px; flex-wrap: wrap; align-items: center; font-size: .92rem; line-height: 1.55; }
footer.foot .mark { display: block; height: 96px; width: auto; flex: none; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45)); }
footer.foot .name { font: 700 13px/1 var(--ui); letter-spacing: 3px; text-transform: uppercase; color: var(--cream); margin: 0 0 10px; }
footer.foot .name small { display: block; margin-top: 6px; font-size: 11px; letter-spacing: 2px; color: var(--gold); font-weight: 500; }
footer.foot .about { flex: 1 1 380px; }
footer.foot p { margin: 0; max-width: 60ch; }
footer.foot a { color: var(--cream); }

@media print {
  .ribbon, .hero::before, .hero::after, footer.foot { display: none; }
  .hero { background: #fff; color: #000; } .hero h1, .hero .sub { color: #000; }
  .card { box-shadow: none; border-color: #999; }
  body { background: #fff; }
}

/* LD-2 (D37): "Need help?" — the assistant on the public pages (help.js). Opens only when clicked. */
.ldh-open { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px 11px 13px; border-radius: 999px; border: 1px solid var(--gold); background: var(--navy); color: var(--cream); font: 700 13px/1 var(--ui); letter-spacing: .3px; cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.ldh-open:hover { background: var(--navy-2); }
.ldh-open .ldh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px var(--gold-faint); }
.ldh-open.is-open { opacity: 0; pointer-events: none; }
.ldh-panel { position: fixed; right: 18px; bottom: 18px; z-index: 61; width: min(380px, calc(100vw - 36px)); max-height: min(560px, calc(100vh - 36px)); display: flex; flex-direction: column; background: var(--white); color: var(--ink, #111); border: 1px solid var(--line-soft); border-top: 3px solid var(--gold); border-radius: var(--radius); box-shadow: 0 18px 50px rgba(0, 0, 0, .35); overflow: hidden; }
.ldh-panel[hidden] { display: none; }
.ldh-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: var(--navy); color: var(--cream); }
.ldh-head b { font: 600 1.15rem/1.1 var(--display); display: block; }
.ldh-head small { display: block; font: 600 10.5px/1.4 var(--ui); letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-top: 3px; }
.ldh-close { background: none; border: 0; color: var(--cream); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 2px; }
.ldh-msgs { flex: 1 1 auto; min-height: 160px; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; background: var(--paper); }
.ldh-msg { max-width: 92%; padding: 9px 12px; border-radius: 12px; font: 400 .93rem/1.45 var(--ui); }
.ldh-msg p { margin: 0 0 6px; } .ldh-msg p:last-child { margin: 0; }
.ldh-bot { align-self: flex-start; background: var(--white); border: 1px solid var(--line-soft); border-bottom-left-radius: 4px; }
.ldh-me { align-self: flex-end; background: var(--navy); color: var(--cream); border-bottom-right-radius: 4px; }
.ldh-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line-soft); background: var(--white); }
.ldh-form input { flex: 1 1 auto; min-width: 0; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 8px; font: 400 .95rem/1.3 var(--ui); background: var(--white); }
.ldh-form input:focus { outline: 2px solid var(--gold-soft); border-color: var(--gold); }
.ldh-form button { padding: 10px 14px; border-radius: 8px; border: 1px solid var(--gold); background: var(--navy); color: var(--cream); font: 700 13px/1 var(--ui); cursor: pointer; }
.ldh-form button:disabled { opacity: .5; cursor: default; }
.ldh-note { margin: 0; padding: 8px 14px 10px; font: 400 11.5px/1.4 var(--ui); color: var(--muted); background: var(--white); }
@media (max-width: 560px) { .ldh-panel { right: 0; bottom: 0; width: 100vw; max-height: 85vh; border-radius: var(--radius) var(--radius) 0 0; } }
@media print { #ldh-root { display: none; } }

/* R1 (D40): a comment campaign. The pages carry both sets of words; the campaign's kind picks one. */
.k-rule { display: none !important; }
body[data-kind="rulemaking"] .k-rule { display: revert !important; }
body[data-kind="rulemaking"] .k-congress { display: none !important; }
/* L9 (D43): a state campaign is a letter campaign (every .k-congress element shows); only what belongs to an office of Congress is hidden */
body[data-kind="state"] .k-federal { display: none !important; }
/* a 43-character reference and the record link are single unbreakable words: on a phone they pushed step 3 a screen wide (measured 5 Oct 2026, 305 px at 390) */
#public-ref, #record-link { overflow-wrap: anywhere; }
/* the docket: which rule, which agency, when the comment period closes */
.docket { border: 1px solid var(--gold-soft); border-left: 3px solid var(--navy); border-radius: var(--radius); background: var(--paper); padding: 14px 16px; margin: 0 0 18px; }
.docket dl { grid-template-columns: max-content 1fr; gap: 4px 16px; }
.docket .closes { font-weight: 700; color: var(--red-deep); }
.docket .public-note { margin: 10px 0 0; font-size: .9rem; color: var(--muted); }
/* the tracking number Regulations.gov shows after filing */
.track { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.track input { flex: 1 1 220px; width: auto; font-family: var(--mono); font-size: .95rem; padding: 9px 12px; }
.track button { font-size: .9rem; padding: 9px 14px; }
/* until the page knows the campaign's kind, neither opening line shows (no flash of the wrong one) */
body:not([data-kind]) .lede.k-congress { visibility: hidden; }
/* a comment asks for less: two even columns where a letter's form has three */
body[data-kind="rulemaking"] .row3 { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { body[data-kind="rulemaking"] .row3 { grid-template-columns: 1fr; } }