/* =====================================================================
   SaveSaveSaveSave — shared paper stylesheet

   Used by whitepaper.html, privacy.html and terms.html. It exists so the
   three document pages cannot drift apart: the chrome, the paper sheet,
   the accents and the print rules are defined once.

   index.html deliberately does NOT use this file. The scanner is a single
   self-contained page by design, and splitting its CSS out would break
   that property for no benefit.
   ===================================================================== */
:root{
    /* Chrome — matches the scanner: near-black, with purple and blue doing
       the colour work. */
    --ink:#08080C;
    --surface:#131318;
    --border:#2A2A35;
    --text-muted:#9B9BAB;
    --accent:#B98CFF;
    --accent-solid:#9945FF;
    --accent-2:#00D1FF;

    /* Paper — this is a document, so it stays a light sheet. Both accents
       were contrast-checked against white: 7.1:1 and 6.7:1. */
    --paper:#FFFFFF;
    --paper-text:#1B2430;
    --paper-muted:#5B677D;
    --paper-border:#E4E8ED;
    --paper-accent:#6D28D9;
    --paper-accent-2:#1D4ED8;
    --paper-tint:#F6F2FF;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:
      radial-gradient(ellipse 900px 520px at 12% -12%, rgba(153,69,255,0.20), transparent 70%),
      radial-gradient(ellipse 760px 520px at 100% -4%, rgba(0,209,255,0.10), transparent 70%),
      var(--ink);
    color:var(--paper-text);
    font-family:'IBM Plex Sans', system-ui, sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  a{color:var(--paper-accent);}
  a:focus-visible, button:focus-visible{outline:3px solid var(--accent); outline-offset:2px;}

  header.top{display:flex; align-items:center; justify-content:space-between; padding:22px 20px; max-width:820px; margin:0 auto; gap:16px; flex-wrap:wrap;}
  .brand{display:flex; align-items:center; gap:12px; font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:1.15rem; color:#ECECF2;}
  .brand-mark{width:26px; height:26px; border-radius:0;
    background:linear-gradient(135deg, var(--accent-solid) 0%, var(--accent-2) 100%);
    box-shadow: -5px 5px 0 -1px rgba(153,69,255,0.55), -10px 10px 0 -2px rgba(153,69,255,0.22);
    margin-right:8px;}
  .wordmark{display:flex; white-space:nowrap;}
  .wordmark .wm{margin-right:0.14em;}
  .wordmark .wm:nth-child(1){opacity:1; color:#ECECF2;}
  .wordmark .wm:nth-child(2){opacity:0.68; color:#ECECF2;}
  .wordmark .wm:nth-child(3){opacity:0.42; color:#ECECF2;}
  .wordmark .wm:nth-child(4){opacity:1; color:var(--accent); margin-right:0;}
  .nav-link{color:var(--text-muted); font-size:0.85rem; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--border);}
  .nav-link:hover{color:var(--accent);}
  .top-rule{height:1px; max-width:820px; margin:0 auto 22px;
    background:linear-gradient(90deg, var(--accent-solid), var(--accent-2) 45%, transparent 85%);
    opacity:0.55;}

  .paper-wrap{max-width:820px; margin:0 auto; padding:0 20px 60px;}
  .paper{
    background:var(--paper); color:var(--paper-text);
    border-radius:0; padding:52px 56px 60px;
    border-top:3px solid var(--accent-solid);
    box-shadow:0 30px 80px -30px rgba(0,0,0,0.7);
  }

  /* One button, centred. It carried two lines of explanatory text until
     they were removed as clutter — a download button does not need to be
     told what a PDF is. */
  .toolbar{
    display:flex; align-items:center; justify-content:center;
    background:var(--surface); border:1px solid var(--border); border-radius:0;
    padding:14px 20px; max-width:820px; margin:0 auto 22px;
  }
  .dl-btn{
    display:inline-flex; align-items:center; gap:8px;
    background:linear-gradient(135deg, var(--accent-solid), #7B2FE0); color:#FFFFFF; font-weight:700;
    font-family:'Space Grotesk', sans-serif; font-size:0.92rem;
    padding:12px 20px; border-radius:2px; text-decoration:none; white-space:nowrap;
  }
  .dl-btn:hover{filter:brightness(1.12);}

  .eyebrow{font-family:'IBM Plex Mono', monospace; font-size:0.78rem; letter-spacing:0.06em; color:var(--paper-accent); text-transform:uppercase; margin:0 0 10px;}
  h1.title{font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:2.1rem; line-height:1.2; margin:0 0 8px; color:var(--paper-text);}
  .subtitle{font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:1.2rem; color:var(--paper-accent); margin:0 0 18px;}
  .meta{color:var(--paper-muted); font-size:1rem; margin:0 0 26px;}
  blockquote.tagline{
    font-style:italic; font-size:1.15rem; line-height:1.6; color:var(--paper-accent);
    border-left:3px solid var(--paper-accent); margin:0 0 36px; padding:4px 0 4px 20px;
  }

  h2{font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:1.5rem; color:var(--paper-text); margin:44px 0 16px; padding-top:8px; border-top:1px solid var(--paper-border);}
  h2:first-of-type{border-top:none; margin-top:0;}
  h3{font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:1.08rem; color:var(--paper-accent); margin:26px 0 8px;}
  p{font-size:1.13rem; line-height:1.75; margin:0 0 18px; color:var(--paper-text);}
  ul, ol{font-size:1.13rem; line-height:1.7; margin:0 0 18px; padding-left:1.4em;}
  li{margin-bottom:10px;}
  strong{color:var(--paper-text);}
  em{color:var(--paper-accent);}
  code{font-family:'IBM Plex Mono', monospace; font-size:0.92em; background:var(--paper-tint); padding:1px 5px; border-radius:2px; color:var(--paper-accent);}

  .tag-live{color:#15803D; font-weight:600;}
  .tag-new{background:var(--paper-accent); color:#FFFFFF; font-family:'IBM Plex Mono', monospace;
    font-size:0.68rem; letter-spacing:0.06em; padding:2px 7px; border-radius:2px; vertical-align:2px; margin-left:8px;}
  .tag-roadmap{color:#B45309; font-weight:600;}

  .rule-box{background:var(--paper-tint); border-left:3px solid var(--paper-accent); padding:18px 22px; margin:0 0 20px;}
  .rule-box .ladder{font-family:'IBM Plex Mono', monospace; font-size:1rem; color:var(--paper-accent);
    margin:0 0 10px; font-weight:600; letter-spacing:0.02em;}
  .rule-box p:last-child{margin-bottom:0;}

  table.chains{width:100%; border-collapse:collapse; margin:0 0 20px; font-size:1.02rem;}
  table.chains th{text-align:left; font-family:'Space Grotesk', sans-serif; color:var(--paper-text); border-bottom:2px solid var(--paper-border); padding:8px 10px;}
  table.chains td{padding:8px 10px; border-bottom:1px solid var(--paper-border); color:var(--paper-muted); vertical-align:top;}
  table.chains td.num{font-family:'IBM Plex Mono', monospace; color:var(--paper-text); white-space:nowrap;}

  .glossary dt{font-weight:700; font-size:1.1rem; margin-top:18px; color:var(--paper-text);}
  .glossary dd{margin:4px 0 0; color:var(--paper-muted); font-size:1.05rem; line-height:1.6;}

  /* ---- Explanatory figures (guide pages) --------------------------
     Diagrams are inline SVG so they need no extra request, inherit the
     page font, and print with the document. Figure text is kept large in
     viewBox units so it stays legible when the SVG scales down on a
     phone. */
  .fig{margin:26px 0 30px; padding:0;}
  .fig svg{width:100%; height:auto; display:block;}
  .fig figcaption{font-size:0.92rem; color:var(--paper-muted); margin-top:10px; line-height:1.55;
    border-left:3px solid var(--paper-border); padding-left:12px;}
  .fig-frame{border:1px solid var(--paper-border); padding:18px 16px; background:#FDFCFF;}

  /* Step cards — reflow on a phone in a way an SVG cannot. */
  .steps{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:24px 0 28px;}
  .step-card{border:1px solid var(--paper-border); padding:14px 16px; background:#FDFCFF;}
  .step-card .n{font-family:'IBM Plex Mono',monospace; font-size:0.72rem; letter-spacing:0.08em;
    color:var(--paper-accent); display:block; margin-bottom:6px;}
  .step-card h4{font-family:'Space Grotesk',sans-serif; font-size:1rem; margin:0 0 8px; color:var(--paper-text);}
  .step-card p{font-size:0.95rem; line-height:1.55; margin:0 0 6px;}
  .step-card .yes{color:#15803D; font-weight:600;}
  .step-card .no{color:#B45309; font-weight:600;}
  @media (max-width: 640px){ .steps{grid-template-columns:1fr;} }

  /* ---- Live demo blocks (guide 2 onwards) -------------------------- */
  .demo{border:1px solid var(--paper-border); background:#FDFCFF; padding:16px 18px; margin:0 0 12px;}
  .demo .lab{font-family:'IBM Plex Mono',monospace; font-size:0.7rem; letter-spacing:0.07em;
    text-transform:uppercase; color:var(--paper-muted); display:block; margin-bottom:9px;}
  .demo .line{font-size:1.08rem; line-height:1.9; margin:0; color:var(--paper-text);}
  .zw{display:inline-block; background:#FEF3C7; border:1px solid #B45309; color:#7C2D12;
    font-family:'IBM Plex Mono',monospace; font-size:0.62rem; line-height:1.5; padding:0 4px;
    border-radius:2px; vertical-align:2px; margin:0 1px;}
  .tagch{background:#EDE9FE; border-color:#6D28D9; color:#4C1D95;}
  .counts{display:flex; gap:18px; flex-wrap:wrap; font-family:'IBM Plex Mono',monospace;
    font-size:0.82rem; color:var(--paper-muted); margin-top:4px;}
  .counts b{color:var(--paper-text); font-weight:600;}
  .homo{color:#B91C1C; text-decoration:underline; text-decoration-style:wavy; text-underline-offset:4px;}

  /* ---- Reveal blocks · native <details>, no script needed ---------- */
  .reveal{border:1px solid var(--paper-border); background:#FDFCFF; margin:0 0 14px;}
  .reveal summary{cursor:pointer; padding:14px 18px; font-family:'Space Grotesk',sans-serif;
    font-weight:600; font-size:0.98rem; color:var(--paper-accent); list-style:none;}
  .reveal summary::-webkit-details-marker{display:none;}
  .reveal summary::before{content:"▸ "; font-size:0.9em;}
  .reveal[open] summary::before{content:"▾ ";}
  .reveal summary:hover{background:var(--paper-tint);}
  .reveal .inner{padding:0 18px 16px; border-top:1px solid var(--paper-border);}
  .reveal .inner p{font-size:1rem; line-height:1.65; margin:12px 0 0;}
  .msg{font-family:'IBM Plex Mono',monospace; font-size:0.9rem; line-height:1.75;
    background:#FFFFFF; border:1px solid var(--paper-border); padding:14px 16px; margin:0 0 10px;
    white-space:pre-wrap; color:var(--paper-text);}
  .msg .inj{background:#FEE2E2; border-bottom:2px solid #B91C1C; color:#7F1D1D;}

  /* ---- Keyed tiles · a labelled block that keeps ordinary prose -----
     The step-card grid is for short parallel items. These are for the
     numbered sections of a guide, where each one runs to a paragraph or
     two and a two-column grid would leave one column half empty. */
  .tile{border-left:3px solid var(--paper-accent); background:var(--paper-tint);
    padding:16px 20px; margin:0 0 18px;}
  .tile .n{display:block; font-family:'IBM Plex Mono',monospace; font-size:0.74rem;
    letter-spacing:0.08em; text-transform:uppercase; color:var(--paper-accent); margin:0 0 6px;}
  .tile h3{margin:0 0 10px; color:var(--paper-text);}
  .tile p{font-size:1.05rem; line-height:1.68;}
  .tile ul{margin:0 0 14px;}
  .tile > :last-child{margin-bottom:0;}

  /* A one-line shape, stated as a shape. Monospace because the point is
     the arrow, not the sentence. */
  .pattern{background:#FFFFFF; border:1px solid var(--paper-border);
    font-family:'IBM Plex Mono',monospace; font-size:0.98rem; line-height:2;
    text-align:center; padding:14px 16px; margin:0 0 20px; color:var(--paper-accent);}
  .pattern b{color:var(--paper-text); font-weight:600;}

  /* Two sources side by side. The colours are load-bearing: green is the
     instruction the reader wrote, red is the one they didn't. */
  .two-up{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:0 0 22px;}
  .two-up .src{border:1px solid var(--paper-border); padding:14px 16px; background:#FFFFFF;}
  .two-up .src .lbl{display:block; font-family:'Space Grotesk',sans-serif; font-weight:700;
    font-size:0.95rem; margin:0 0 8px;}
  .two-up .src q{font-family:'IBM Plex Mono',monospace; font-size:0.9rem; line-height:1.6;
    color:var(--paper-text); quotes:none;}
  .two-up .yours{border-left:3px solid #15803D;}
  .two-up .yours .lbl{color:#15803D;}
  .two-up .theirs{border-left:3px solid #B91C1C;}
  .two-up .theirs .lbl{color:#B91C1C;}
  @media (max-width: 640px){ .two-up{grid-template-columns:1fr;} }

  /* ---- Guides index ----------------------------------------------- */
  .guide-list{display:grid; gap:14px; margin:26px 0 10px;}
  .guide-card{display:block; border:1px solid var(--paper-border); border-left:3px solid var(--paper-accent);
    padding:18px 20px; text-decoration:none; background:#FFFFFF;}
  .guide-card:hover{background:var(--paper-tint);}
  .guide-card h3{margin:0 0 6px; color:var(--paper-text); font-size:1.15rem;}
  .guide-card p{margin:0 0 8px; font-size:1rem; line-height:1.6; color:var(--paper-muted);}
  .guide-meta{font-family:'IBM Plex Mono',monospace; font-size:0.72rem; letter-spacing:0.06em;
    color:var(--paper-accent); text-transform:uppercase;}
  .guide-soon{border:1px dashed var(--paper-border); border-left:3px solid var(--paper-border);
    padding:16px 20px; background:#FCFCFD;}
  .guide-soon h3{margin:0 0 6px; color:var(--paper-muted); font-size:1.05rem;}
  .guide-soon p{margin:0; font-size:0.96rem; line-height:1.6; color:var(--paper-muted);}
  .guide-soon .guide-meta{color:var(--paper-muted);}

  .closing-quote{font-size:1.2rem; line-height:1.7; color:var(--paper-text); margin:24px 0;}
  hr.sep{border:none; border-top:1px solid var(--paper-border); margin:36px 0;}
  .living-note{font-style:italic; color:var(--paper-muted); font-size:1rem;}

  .bottom-cta{text-align:center; margin-top:40px; padding-top:32px; border-top:1px solid var(--paper-border);}

  footer.site-footer{max-width:820px; margin:40px auto 60px; padding:0 20px; text-align:center; color:var(--text-muted); font-size:0.8rem;}

  /* Print / PDF. The dark chrome is screen furniture; on paper only the
     document itself should survive. The PDF shipped from this site is
     generated by printing this page, so these rules are what that file
     looks like — keeping the two editions from drifting apart. */
  @media print{
    @page{size:A4; margin:18mm 16mm 20mm;}
    body{background:#FFFFFF !important; font-family:'IBM Plex Sans', 'Liberation Sans', system-ui, sans-serif;}
    header.top, .top-rule, .toolbar, .bottom-cta, footer.site-footer{display:none !important;}
    .paper-wrap{max-width:none; padding:0;}
    .paper{box-shadow:none; padding:0; border-top:none;}
    h1.title{font-size:30pt;}
    .subtitle{font-size:15pt;}
    h2{font-size:16pt; margin-top:26px; page-break-after:avoid;}
    h3{font-size:12.5pt; page-break-after:avoid;}
    p, ul, ol{font-size:11.5pt; line-height:1.6;}
    li{margin-bottom:6px;}
    table.chains{font-size:10.5pt; page-break-inside:avoid;}
    .rule-box, .glossary dt, .glossary dd{page-break-inside:avoid;}
    .glossary dd{font-size:11pt;}
    blockquote.tagline{font-size:12pt;}
    a{color:var(--paper-accent); text-decoration:none;}
  }

  @media (max-width: 640px){
    /* Long hostnames in the privacy table pushed the page 122px wider than
       the viewport. Break inside them and fix the column widths rather than
       letting the table decide it needs more room than the phone has. */
    table.chains{table-layout:fixed; width:100%;}
    table.chains th, table.chains td{overflow-wrap:anywhere; padding:7px 6px;}
    code{overflow-wrap:anywhere;}
    .paper{padding:32px 22px 40px;}
    h1.title{font-size:1.6rem;}
    p, ul, ol{font-size:1.05rem;}
    table.chains{font-size:0.9rem;}
    .rule-box{padding:14px 16px;}
    .rule-box .ladder{font-size:0.82rem;}
  }