/* ===========================================================================
   halligan.dev — shared stylesheet.

   Everything here is used by more than one page. Page-specific rules stay in
   that page's <style> block, so this file never becomes a dumping ground.

   Two palettes, on purpose:

   --d-*   the brand band (nav, hero). Fixed dark in both themes, because it
           reads as a designed band rather than a bug.
   the rest follows the viewer's theme, and deliberately uses the SAME token
           names as report.py's stylesheet, so the report preview on the
           landing page looks like the file you would actually generate.

   NOTE: those token values are duplicated in src/halligan/report.py. That
   report has to be one portable file with no sidecar, so it cannot link this.
   If you change a status colour, change it in both places.

   404.html intentionally does NOT use this file. An error page that depends
   on another request to look right is an error page that can fail twice.
   =========================================================================== */

:root{
  /* Brand band — fixed in both themes */
  --d-bg:#08090a; --d-fg:#f4f5f7; --d-muted:#9297a1; --d-line:#23262b;
  --d-panel:#0f1114;
  /* Three roles, three tokens — one value cannot satisfy all of them.
     Ratios are WCAG 2.1 AA, measured, not estimated.
       --brand       identity red, text/border on the dark band  5.09:1 on #08090a
       --brand-solid button fill; white text must clear 4.5      5.10:1 white-on-fill
       --brand-text  small text on page backgrounds, theme-aware 4.89:1 light card */
  --brand:#e5484d; --brand-solid:#cf2f38; --brand-text:#cf2f38;

  /* Page — follows the viewer */
  --bg:#ffffff; --fg:#1a1a1a; --muted:#4d535c; --line:#e2e2e2; --card:#fafafa;
  --pass:#1a7f37; --fail:#cf222e; --warn:#9a6700; --accent:#0b5fff; --flake:#8250df;
  --pass-bg:#dafbe1; --fail-bg:#ffebe9; --flake-bg:#f3eefc;

  --sans:ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  /* Pages override this; 70rem suits the wide landing page. */
  --wrap:70rem;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0d1117; --fg:#e6edf3; --muted:#b0b8c4; --line:#30363d; --card:#161b22;
    --pass:#3fb950; --fail:#f85149; --warn:#d29922; --accent:#58a6ff; --flake:#a371f7;
    --pass-bg:#0d2818; --fail-bg:#2d1214; --flake-bg:#1d1630;
    /* The light-theme red is far too dark on a dark card (3.39:1). */
    --brand-text:#f0645f;   /* 5.51:1 on card, 6.03:1 on bg */
  }
}

/* ---------------------------------  base  ------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:17.5px/1.72 var(--sans);
     -webkit-font-smoothing:antialiased}
code,kbd,pre,.mono{font-family:var(--mono)}
a{color:var(--accent)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.5rem}
.rule{border:0;border-top:1px solid var(--line);margin:0}

/* ----------------------------  skip link  ------------------------------- */
/* First thing in the tab order on every page. Parked off-screen rather than
   display:none, because a hidden element cannot be focused and a skip link
   you cannot focus is no skip link at all. */
.skip{position:absolute;left:-100vw;top:0;z-index:30;padding:.7rem 1.15rem;
      background:var(--brand-solid);color:#fff;font-size:.95rem;font-weight:650;
      text-decoration:none;border-radius:0 0 .35rem 0}
.skip:focus{left:0}

/* ---------------------------------  nav  -------------------------------- */
/* Dark on every page, so the brand bar is one consistent thing site-wide.
   The sticky sits on the banner rather than the nav: a sticky child only
   sticks within its parent's box, so leaving it on the nav would unstick the
   bar the moment its wrapper scrolled past. */
header.site{position:sticky;top:0;z-index:20}
nav{background:rgba(8,9,10,.86);
    backdrop-filter:blur(12px);border-bottom:1px solid var(--d-line)}
nav .wrap{display:flex;align-items:center;gap:2rem;height:4rem;position:relative;
          max-width:70rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--d-fg)}
.brand .mark{width:2.1rem;height:2.1rem;display:block;object-fit:contain;flex:none}
.brand .word{font-weight:750;letter-spacing:.16em;font-size:.86rem;text-transform:uppercase}
nav .spacer{flex:1}
nav a.navlink{color:#e3e6ea;text-decoration:none;font-size:.95rem;font-weight:520;
              white-space:nowrap}
nav a.navlink:hover{color:#fff}
nav .ext{display:inline-block;width:.62em;height:.62em;margin-left:.3em;opacity:.7}
@media(max-width:900px){nav a.navlink.hide-md{display:none}}
@media(max-width:560px){nav .wrap{gap:1rem}nav a.navlink.hide-sm{display:none}}

/* -------------------------------  buttons  ------------------------------ */
.cta{display:flex;flex-wrap:wrap;gap:.7rem}
.btn{display:inline-block;padding:.72rem 1.35rem;border-radius:.35rem;font-size:.95rem;
     font-weight:650;text-decoration:none;border:1px solid var(--line);color:var(--fg)}
.btn.primary{background:var(--brand-solid);border-color:var(--brand-solid);color:#fff}
.btn.primary:hover{filter:brightness(1.08)}
.btn:hover{border-color:var(--muted)}

/* -------------------------------  sections  ----------------------------- */
/* Content sections get a narrower column than the page container. At 70rem a
   66ch paragraph is a ribbon against the left edge with half the screen empty
   — the right measure in the wrong frame. Full-bleed elements (the hero grid,
   the report preview, nav and footer) keep the wider wrap. */
section .wrap{max-width:58rem}
section{padding:4rem 0}
h2.sec{font-size:clamp(1.95rem,4vw,2.8rem);letter-spacing:-.028em;margin:0 0 .6rem;
       font-weight:740;line-height:1.12}
.kicker{font-size:1.05rem;font-weight:760;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-text);margin:0 0 .55rem}
.prose{max-width:none;font-size:1.06rem}
.prose p{margin:0 0 1.15rem}
.pull{font-size:clamp(1.2rem,2.8vw,1.55rem);font-weight:640;line-height:1.35;
      border-left:3px solid var(--brand);padding-left:1.15rem;margin:1.75rem 0;max-width:44ch}
.pull em{font-family:var(--serif);font-style:italic;font-weight:400}
.note{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--warn);
      border-radius:.5rem;padding:1rem 1.15rem;font-size:.95rem;color:var(--fg);margin-top:2rem}
.note strong{color:var(--fg)}
.note.imp{border-left-color:var(--fail)}

/* A plain-language lead-in. Every technical section opens with one, so a
   reader who does not know the jargon is never stranded — they can read the
   grey paragraph, get the point, and skip the rest. */
.plain{font-size:1.12rem;line-height:1.68;color:var(--fg);max-width:none;
       border-left:3px solid var(--brand-text);padding:.2rem 0 .2rem 1.2rem;
       margin:0 0 1.75rem}
.plain strong{font-weight:670}
.plain + .prose{margin-top:0}

/* --------------------------------  cards  ------------------------------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1rem;
      margin-top:1.9rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:.6rem;
      padding:1.2rem 1.3rem}
.card .tag{font-size:.66rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase;
           color:var(--brand-text);display:block;margin-bottom:.5rem}
.card h3{margin:0 0 .45rem;font-size:1.15rem;font-weight:680}
.card p{margin:0;color:var(--fg);font-size:.97rem;line-height:1.62}
.card p code{color:var(--fg);font-size:.85em}

/* -----------------------------  code blocks  ---------------------------- */
/* Always dark, on every page and in both themes — a terminal is a terminal. */
.termlight{background:#0b0d10;border:1px solid #23262b;border-radius:.55rem;
           overflow:hidden;margin:1.5rem 0;max-width:100%;min-width:0}
.termlight pre{margin:0;padding:1rem 1.1rem;overflow-x:auto;font-family:var(--mono);
               font-size:.86rem;line-height:1.75;color:#d4dae1}
.termlight .c{color:#7d8590}.termlight .k{color:#58a6ff}.termlight .s{color:#d29922}
.termlight .g{color:#3fb950}.termlight .r{color:#f85149}.termlight .m{color:#a371f7}
.termlight .p{color:#7d8590;user-select:none}
.pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem}
@media(max-width:800px){.pair{grid-template-columns:minmax(0,1fr)}}
.pair .lbl{font-size:.76rem;color:var(--muted);margin:0 0 .4rem;font-weight:640}
@media(max-width:560px){.termlight pre{font-size:.78rem;padding:.85rem .9rem}}

/* --------------------------------  tables  ------------------------------ */
.tablewrap{overflow-x:auto;margin-top:1.5rem}
table{border-collapse:collapse;width:100%;font-size:.98rem}
th,td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--line);
      vertical-align:top}
th{color:var(--muted);font-weight:640;font-size:.7rem;text-transform:uppercase;
   letter-spacing:.08em}
td code{font-size:.86em;white-space:nowrap}
td.num,th.num{text-align:right;white-space:nowrap}
.bar-cell{display:inline-block;vertical-align:middle;width:5rem;height:.45rem;
          background:var(--pass);border-radius:999px;overflow:hidden;margin-right:.5rem}
.bar-cell>i{display:block;height:100%;background:var(--fail)}

/* --------------------------------  footer  ------------------------------ */
footer{border-top:1px solid var(--line);padding:2.75rem 0 3.5rem;color:var(--muted);
       font-size:.86rem}
footer .cols{display:flex;flex-wrap:wrap;gap:2.5rem;justify-content:space-between;
             max-width:70rem}
footer a{color:var(--muted)}
footer a:hover{color:var(--fg)}

/* -----------------------------  legal pages  ---------------------------- */
/* /privacy, /terms, /security. All three share one shape — header, summary
   box, then a numbered spine of sections — so the rules live here rather than
   being pasted into three <style> blocks. Each page still sets its own
   --wrap, because a policy is read start to finish and wants a shorter line
   than a landing page does. */
.legal main>header{padding:3.5rem 0 1.5rem}
.legal h1{font-size:clamp(2rem,5vw,2.75rem);line-height:1.05;margin:0 0 .5rem;
          letter-spacing:-.03em}
.legal .lede{color:var(--muted);font-size:1.14rem;margin:0}
.legal .updated{font-size:.85rem;color:var(--muted);margin:1rem 0 0}
.legal section{padding:2.5rem 0}
.legal section .wrap{max-width:var(--wrap)}
.legal h2{font-size:clamp(1.45rem,3vw,1.85rem);letter-spacing:-.02em;margin:0 0 .8rem;
          scroll-margin-top:5rem}
.legal h3{font-size:1.08rem;font-weight:680;margin:1.8rem 0 .55rem}
.legal p{margin:0 0 1.1rem;font-size:1.04rem}
.legal ul,.legal ol{margin:0 0 1.15rem;padding-left:1.35rem}
.legal li{margin:0 0 .55rem;font-size:1.04rem}
.legal li::marker{color:var(--muted)}

/* The plain-English summary that opens every legal page. It is a summary, not
   the agreement — the section that follows is what binds — but a policy no
   one reads protects no one. */
.legal .tldr{background:var(--card);border:1px solid var(--line);
             border-left:3px solid var(--brand-text);border-radius:.6rem;
             padding:1.25rem 1.4rem;margin:0 0 2rem}
.legal .tldr strong{display:block;font-size:.7rem;font-weight:750;
                    letter-spacing:.1em;text-transform:uppercase;
                    color:var(--brand-text);margin-bottom:.6rem}
.legal .tldr p:last-child,.legal .tldr ul:last-child{margin-bottom:0}

/* Contents. Anchors rather than a sidebar: two columns of links at the top
   of a document that is only ever going to be a few screens long. */
.legal .toc{list-style:none;padding:0;margin:0 0 1rem;columns:2;column-gap:2rem}
.legal .toc li{margin:0 0 .4rem;font-size:.97rem;break-inside:avoid}
@media(max-width:560px){.legal .toc{columns:1}}

/* Used for the "we do not do X" lists, where the point is the absence. */
.legal .none li{list-style:none;position:relative}
.legal .none li::before{content:"—";position:absolute;left:-1.35rem;color:var(--muted)}

.legal .addr{font-style:normal;color:var(--fg);margin:0 0 1.1rem;font-size:1.04rem}
.legal footer{margin-top:2rem}