/* The U.S. Government Directory: the app's night and gold (index.html's .dark and .light colours), Gelasio for
   headlines. Dark unless the visitor's device or the ◐ button asks for light. */
@font-face{font-family:'Gelasio';src:url(/fonts/Gelasio-Regular.ttf) format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Gelasio';src:url(/fonts/Gelasio-Bold.ttf) format('truetype');font-weight:600 700;font-display:swap}
:root{--bg:#080e18;--bg-secondary:#0a1220;--bg-card:#111827;--bg-input:#0f1723;--border:#1f2937;--border2:#2d3748;
      --text:#e5e7eb;--text-muted:#9ca3af;--text-dim:#6b7280;--accent:#c8a96e;--accent-dim:#c8a96e1f;--accent-border:#c8a96e55;
      --on-accent:#080e18;--rep:#f87171;--dem:#60a5fa;--ind:#c4b5fd;color-scheme:dark}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]){--bg:#f0f4f8;--bg-secondary:#ffffff;--bg-card:#ffffff;--bg-input:#f8fafc;
      --border:#e2e8f0;--border2:#cbd5e1;--text:#1e293b;--text-muted:#475569;--text-dim:#64748b;--accent:#9a7d43;--accent-dim:#9a7d4317;
      --accent-border:#9a7d4355;--on-accent:#ffffff;--rep:#b91c1c;--dem:#1d4ed8;--ind:#6d28d9;color-scheme:light}}
:root[data-theme="light"]{--bg:#f0f4f8;--bg-secondary:#ffffff;--bg-card:#ffffff;--bg-input:#f8fafc;--border:#e2e8f0;--border2:#cbd5e1;
      --text:#1e293b;--text-muted:#475569;--text-dim:#64748b;--accent:#9a7d43;--accent-dim:#9a7d4317;--accent-border:#9a7d4355;
      --on-accent:#ffffff;--rep:#b91c1c;--dem:#1d4ed8;--ind:#6d28d9;color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text)}
body{font-family:Georgia,serif;-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.5}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
a.card:hover,a.btn:hover,a.chip:hover,.nav a:hover{text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3{font-family:'Gelasio',Georgia,serif;font-weight:600;margin:0;text-wrap:balance}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
@media(max-width:560px){.wrap{padding:0 16px}}

/* top bar */
.bar{background:var(--bg-secondary);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:5}
.bar .wrap{display:flex;align-items:center;gap:14px;min-height:66px}
.mark{width:36px;height:36px;border-radius:8px;flex-shrink:0;display:block}
.brand{line-height:1.15;color:var(--text)}
.brand b{font-family:'Gelasio',serif;font-size:18px;font-weight:600}
.brand small{display:block;font-size:11.5px;color:var(--text-dim)}
.brand small a{color:var(--accent)}
.sp{flex:1}
.nav{display:flex;align-items:center}
.nav a{color:var(--text-muted);font-size:14.5px;padding:6px 10px}
.nav a.on{color:var(--accent)}
.btn{display:inline-flex;align-items:center;gap:7px;border-radius:8px;padding:9px 16px;font-weight:700;font-size:14.5px;white-space:nowrap;
     font-family:Georgia,serif;cursor:pointer;border:1px solid transparent;background:none;line-height:1.3}
.btn.gold{background:var(--accent);color:var(--on-accent)}
.btn.line{border-color:var(--accent-border);color:var(--accent)}
.btn.sm{padding:6px 12px;font-size:13px}
.icon-btn{border:1px solid var(--border2);border-radius:6px;min-width:38px;height:34px;display:inline-flex;align-items:center;justify-content:center;
          color:var(--text-muted);background:none;cursor:pointer;font-size:16px;font-family:system-ui,sans-serif}
.theme{margin-left:2px}
.burger{display:none}
.bar .menu{display:none;border-top:1px solid var(--border);padding:6px 0 12px}
.menu a{display:block;padding:11px 4px;color:var(--text-muted);border-bottom:1px solid var(--border)}
.menu a:last-child{border-bottom:0}
.bar .menu.open{display:block}
@media(max-width:900px){.nav{display:none}.burger{display:inline-flex}}
@media(min-width:901px){.bar .menu.open{display:none}}
@media(max-width:560px){.bar .btn{display:none}.brand b{font-size:16.5px}}

/* bits */
.crumbs{font-size:13.5px;color:var(--text-dim);margin:18px 0 10px}
.crumbs a{color:var(--text-muted)}
.muted{color:var(--text-muted)}
.dim{color:var(--text-dim)}
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px}
.label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);font-weight:700;margin:26px 0 10px}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;padding:3px 9px;border-radius:5px;background:var(--bg-input);
      border:1px solid var(--border);color:var(--text-muted);white-space:nowrap}
.chip.group{border-radius:4px}
.chip.group:before{content:'👥';font-size:11px}
.chip.org:before{content:'🏛️';font-size:11px}
.chip.gold{color:var(--accent);border-color:var(--accent-border)}
a.chip:hover{border-color:var(--accent-border);color:var(--accent)}
.pty{font-weight:700;font-size:12px;padding:1px 7px;border-radius:4px;border:1px solid currentColor;white-space:nowrap}
.pty.R{color:var(--rep)}.pty.D{color:var(--dem)}.pty.I{color:var(--ind)}
.photo{object-fit:cover;background:var(--bg-input);border-radius:10px;display:block}
.ini{display:flex;align-items:center;justify-content:center;font-family:'Gelasio',serif;font-size:26px;color:var(--accent);
     background:var(--accent-dim);border-radius:10px;flex-shrink:0}
.h1{font-size:34px}
.lead{margin:6px 0 16px}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.hidden{display:none!important}

/* people cards (as the app's People page) */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.pc{display:flex;gap:13px;padding:14px;color:var(--text)}
.pc .photo,.pc .ini{width:72px;height:88px;flex-shrink:0}
.pc b{font-family:'Gelasio',serif;font-weight:600;font-size:16.5px;display:block;line-height:1.25}
.pc .t{font-size:13px;color:var(--text-muted)}
.pc .ph{font-size:13.5px;margin-top:6px}
.pc .role{font-size:11.5px;color:var(--accent);text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-bottom:2px}
.more{margin:12px 0 0;font-size:14px}

/* home */
.hero{padding:46px 0 26px;text-align:center}
.hero .label{margin:0 0 10px;color:var(--accent)}
.hero h1{font-size:clamp(30px,5vw,48px);line-height:1.1}
.hero p.muted{max-width:640px;margin:14px auto 22px;font-size:17px}
.search{max-width:560px;margin:0 auto;position:relative;text-align:left}
.search form{display:flex;gap:8px}
.search input{flex:1;min-width:0;background:var(--bg-input);border:1px solid var(--border2);border-radius:10px;padding:13px 15px;font-size:16px;
              color:var(--text);font-family:inherit}
.search input::placeholder{color:var(--text-dim)}
.search .btn{border-radius:10px}
.results{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--bg-secondary);border:1px solid var(--border2);border-radius:10px;
         box-shadow:0 10px 28px rgba(0,0,0,.35);z-index:4;max-height:420px;overflow-y:auto}
.results a{display:flex;gap:10px;align-items:center;padding:9px 13px;border-bottom:1px solid var(--border);color:var(--text)}
.results a:last-child{border-bottom:0}
.results a:hover,.results a.sel{background:var(--accent-dim);text-decoration:none}
.results small{display:block;color:var(--text-dim);font-size:12.5px}
.results .none{padding:12px 14px;color:var(--text-dim);font-size:14px}
.results .zh{padding:10px 13px 8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);border-bottom:1px solid var(--border)}
.hint{font-size:13.5px;margin-top:10px;text-align:center}
.h2{margin:38px 0 14px;font-size:26px;color:var(--accent)}
.states{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.states a{padding:10px 13px;display:flex;justify-content:space-between;color:var(--text)}
.cc{padding:15px;color:var(--text);display:block}
.cc b{display:block;font-family:'Gelasio',serif;font-weight:600;font-size:17px;margin:8px 0 3px}
.cc .dim{font-size:13.5px}
.org{padding:15px}
.org b{display:block;font-family:'Gelasio',serif;font-weight:600;font-size:16.5px;margin:8px 0 2px}
.org .dim{font-size:13.5px}

/* call to action */
.cta{border:1px solid var(--accent-border);background:linear-gradient(135deg,var(--accent-dim),transparent);border-radius:14px;padding:22px 24px;
     display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:26px}
.cta h3{font-size:20px}
.cta p{margin:5px 0 0;color:var(--text-muted);font-size:14.5px}
.cta .txt{flex:1;min-width:240px}
.cta .from{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:4px}
@media(max-width:560px){.cta{padding:18px}.cta .btn{white-space:normal}}

/* a person's page (as the app's person page) */
.person{padding:22px;margin-top:4px}
.person .top{display:flex;gap:22px;flex-wrap:wrap}
.person .top .photo,.person .top .ini{width:170px;height:208px}
.person .top .ini{font-size:52px}
.person h1{font-size:30px}
.person .who{flex:1;min-width:240px}
.person .sub{margin:3px 0 10px}
.person .facts{margin:0 0 14px;font-size:14px}
.cols2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 34px;margin-top:8px}
@media(max-width:560px){.person{padding:16px}.cols2{grid-template-columns:1fr}.person .top .photo,.person .top .ini{width:140px;height:171px}}
.row{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--border)}
.row .k{width:110px;color:var(--text-dim);font-size:14px;flex-shrink:0}
.row .v{flex:1;word-break:break-word;min-width:0}
.row .v.sm{font-size:14.5px}
.crow{flex-wrap:wrap;row-gap:4px}
.crow .v{min-width:160px}
.crow.sub{padding:7px 4px 7px 22px;font-size:14.5px;gap:8px}
@media(max-width:560px){.crow .v{flex-basis:100%;order:2}}
.call{font-size:12.5px;padding:3px 10px;border-radius:6px;background:var(--bg-input);border:1px solid var(--border);color:var(--accent);white-space:nowrap}
.note{font-size:13px;margin-top:8px}
.src{font-size:13px;margin-top:14px}

/* footer */
footer{margin-top:56px;border-top:1px solid var(--border);background:var(--bg-secondary);padding:28px 0 36px;font-size:13.5px;color:var(--text-dim)}
footer .cols{display:flex;gap:30px;flex-wrap:wrap;justify-content:space-between}
footer p{margin:0 0 8px;max-width:640px}
footer a{color:var(--text-muted)}
footer .made{display:flex;align-items:center;gap:10px;color:var(--text)}
footer .made a{color:var(--accent)}
footer .made .mark{width:26px;height:26px}

/* the plain pages (about, privacy, terms) */
.prose{max-width:760px}
.prose h2{font-size:22px;margin:28px 0 8px}
.prose p,.prose li{color:var(--text-muted);margin:0 0 10px}
.prose ul{padding-left:22px}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--bg-card);border:1px solid var(--accent-border);
       color:var(--text);padding:9px 16px;border-radius:8px;font-size:14px;z-index:9}