/* CiteGPT website — shared base (from the approved v2 design system).
   Violet BULDRR palette, Clash Display for display type, Satoshi for text.

   LAYOUT SYSTEM (single source of truth — every page follows this):
   · Breakpoints:  sm 480 · md 768 · nav 900 · lg 1024 · xl 1280
   · Container:    .container  → max 1240, auto-centered, padding clamp(16,5vw,32)
   · Spacing:      --s1..--s7  (8/12/16/24/32/48/72)
   · Grid utils:   .g2/.g3/.g4 collapse predictably (see media queries)
   · Components:   .switch (toggle) · .statuspill (pass/fail) · .statbar (meter)
   · Tables:       wrap fixed-column grids in .table-scroll to kill overflow   */
@import url('https://api.fontshare.com/v2/css?f[]=clash-display@500,600,700&f[]=satoshi@400,500,700&display=swap');

:root{
  --violet:#6D3AED; --violet-d:#5a24d6; --violet-t:#F3EFFE;
  --ink:#1A1626; --muted:#6B6580; --line:#ECE9F5; --bg:#FBFAFF;
  --emerald:#10985E; --rose:#E0447A; --amber:#B0740F;
  --s1:8px; --s2:12px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:72px;
  --container:1240px;
  --pad:16px; /* global content padding — 16 on mobile, 20 tablet/desktop (below) */
}
@media(min-width:768px){ :root{ --pad:20px } }
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Satoshi',system-ui,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
/* main is a flex child of the column body; several pages set `margin:0 auto`
   on it, which cancels flex-stretch and lets it size to content (overflowing
   narrow viewports). width:100% pins it to the viewport at every breakpoint. */
main{flex:1 0 auto;min-width:0;width:100%}
#nav,#foot{flex-shrink:0}
img{max-width:100%}
a{color:var(--violet-d);text-decoration:none}
a:hover{color:var(--violet)}
::selection{background:#E4D9FE;color:var(--ink)}
h1,h2,h3,.display{font-family:'Clash Display','Satoshi',sans-serif}
button{font-family:'Satoshi',sans-serif;cursor:pointer}
input,select{font-family:'Satoshi',sans-serif}
/* Let flex-child inputs (search bars) shrink instead of overflowing their row. */
input{min-width:0}
.btn{border:none;background:var(--violet);color:#fff;font-weight:700;font-size:15px;padding:12px 22px;border-radius:11px;cursor:pointer;box-shadow:0 1px 2px rgba(109,58,237,.4)}
.btn:hover{background:var(--violet-d)}
.btn2{border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:700;font-size:14px;padding:11px 18px;border-radius:11px}
.btn2:hover{background:var(--violet-t)}
.card{background:#fff;border:1px solid var(--line);border-radius:16px}
.chip{display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--line);padding:6px 14px 6px 6px;border-radius:100px;cursor:pointer;font-weight:600;font-size:14px;color:#A39EB5;user-select:none}
.chip.on{color:var(--ink)}
.plogo{width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:12px;flex-shrink:0}
.field{width:100%;border:1px solid var(--line);border-radius:11px;padding:12px 14px;font-size:15px;font-weight:500;outline:none;background:#fff}
.field:focus{border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-t)}
.flabel{display:block;font-size:13px;font-weight:700;color:var(--muted);margin:14px 0 7px}
.note{font-size:12.5px;color:#B7B1C6;font-weight:500}
.pillok{background:#E7F6EF;color:var(--emerald);font-size:11px;font-weight:700;padding:3px 10px;border-radius:100px}
.pillmut{background:#F4F2F8;color:var(--muted);font-size:11px;font-weight:700;padding:3px 10px;border-radius:100px}
#toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 20px;border-radius:11px;font-size:13.5px;font-weight:600;opacity:0;transition:.25s;pointer-events:none;z-index:99;max-width:calc(100vw - 32px);text-align:center}
#toast.show{opacity:1}
.hidden{display:none!important}

/* ── Layout container ─────────────────────────────────────────────────────── */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--pad)}

/* ── Grid utilities — inline grid-template-columns wins on desktop; these
   !important rules take over the collapse below each breakpoint. ──────────── */
.g2,.g3,.g4{min-width:0}
.g2>*,.g3>*,.g4>*{min-width:0}
@media(max-width:1024px){ .g4{grid-template-columns:repeat(2,minmax(0,1fr))!important} }
@media(max-width:768px){
  .g2,.g3,.g4{grid-template-columns:1fr!important}
}

/* ── Fixed-column data tables: never clip, scroll inside their own box ─────── */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ── Toggle switch (promoted from the consent page — reusable everywhere) ──── */
.switch{position:relative;display:inline-block;width:52px;height:30px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch .track{position:absolute;inset:0;background:#DDD8EA;border-radius:100px;transition:.2s;cursor:pointer}
.switch .thumb{position:absolute;top:3px;left:3px;width:24px;height:24px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2);pointer-events:none}
.switch input:checked+.track{background:var(--violet)}
.switch input:checked+.track+.thumb{left:25px}
.switch input:disabled+.track{cursor:default}

/* ── Status pill — color-coded pass/fail for read-only binary facts ───────── */
.statuspill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:4px 11px 4px 8px;border-radius:100px;white-space:nowrap}
.statuspill svg{width:13px;height:13px;flex-shrink:0}
.statuspill.ok{background:#E7F6EF;color:var(--emerald)}
.statuspill.bad{background:#FBE9F0;color:var(--rose)}
.statuspill.mid{background:#FEF3E2;color:var(--amber)}
.statuspill.off{background:#F4F2F8;color:var(--muted)}

/* ── Stat meter — turns a bare number into a gauge (label · value · track) ── */
.statbar-track{height:7px;border-radius:100px;background:#F1EDF9;overflow:hidden;margin-top:8px}
.statbar-fill{height:100%;border-radius:100px;background:var(--violet);transition:width .3s}

/* ── Responsive navigation (hamburger + drawer below the nav breakpoint) ──── */
.navburger{display:none;background:#fff;border:1px solid var(--line);border-radius:10px;width:42px;height:42px;align-items:center;justify-content:center;color:var(--ink);flex-shrink:0}
/* Opaque white panel + elevation so the open menu reads as a distinct layer
   above the page (page bg is the light --bg, so pure #fff + shadow separates). */
.navdrawer{display:none;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 22px 44px -14px rgba(26,22,38,.30)}
.navdrawer.open{display:block}
.navdrawer a:not(.btn):not(.btn2){display:block;padding:13px 4px;font-size:16px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line)}
.navdrawer a:not(.btn):not(.btn2):last-child{border-bottom:none}
/* keep button contrast inside the drawer (base .navdrawer a rule must not win) */
.navdrawer a.btn{color:#fff}
.navdrawer a.btn2{color:var(--ink)}
@media(max-width:900px){
  .mainnav{display:none!important}
  .navburger{display:inline-flex}
}

/* ── Footer columns ───────────────────────────────────────────────────────── */
.footcols{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:32px}
@media(max-width:820px){.footcols{grid-template-columns:1fr 1fr;gap:28px 24px}}
@media(max-width:480px){.footcols{grid-template-columns:1fr;gap:26px}}

/* ── Kept for backward-compat (older pages referenced these) ──────────────── */
@media(max-width:900px){.g2,.g3{grid-template-columns:1fr!important}}