/* Shared styles for case-analysis theme walkthroughs */
:root{
  --ink:#16161f; --paper:#f7f6f2; --card:#fff; --line:#dedacd; --accent:#b3122b;
  --accent2:#0a4d68; --gold:#bd8a2c; --muted:#5d5d55; --good:#1f6b3a; --soft:#f0ede3;
  --shadow:0 6px 24px rgba(0,0,0,.12); --shadow-lg:0 14px 40px rgba(0,0,0,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Georgia,'Times New Roman',serif;color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased}
.sans{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif}
.mono{font-family:'Courier New',Courier,monospace}

.conf{position:sticky;top:0;z-index:200;background:repeating-linear-gradient(45deg,#241f12,#241f12 14px,#2c2616 14px,#2c2616 28px);
  color:#fff;text-align:center;padding:7px 14px;font-family:-apple-system,sans-serif;font-size:12.5px;letter-spacing:.03em;border-bottom:2px solid var(--gold)}

/* bottom-line banner — the one sentence to remember, shown above the steps */
.bottomline{max-width:760px;margin:26px auto 0;background:#fff;border:1px solid var(--line);border-left:5px solid var(--accent2);border-radius:10px;
  padding:16px 22px;box-shadow:var(--shadow);font-family:-apple-system,sans-serif}
.bottomline .bl-lbl{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent2);display:block;margin-bottom:5px}
.bottomline .bl-txt{font-size:16px;line-height:1.5;color:var(--ink);font-weight:600}

/* sticky step-progress chip (top-right) */
.stepprog{position:fixed;top:46px;right:14px;z-index:190;background:var(--ink);color:#fff;font-family:-apple-system,sans-serif;
  font-size:12px;font-weight:600;padding:6px 12px;border-radius:20px;box-shadow:var(--shadow);opacity:0;transition:opacity .3s;pointer-events:none}
.stepprog.show{opacity:.94}

/* prev / up / next chapter bar */
.chapternav{max-width:1000px;margin:0 auto;padding:30px 24px 10px;display:flex;gap:10px;align-items:stretch;justify-content:space-between;flex-wrap:wrap}
.chapternav a{flex:1 1 30%;min-width:200px;text-decoration:none;font-family:-apple-system,sans-serif;border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;background:#fff;box-shadow:var(--shadow);transition:transform .15s ease,border-color .15s ease;display:block}
.chapternav a:hover{transform:translateY(-3px);border-color:var(--accent2)}
.chapternav a .dir{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.chapternav a .ttl{font-size:14.5px;font-weight:700;color:var(--ink);margin-top:3px;line-height:1.3}
.chapternav a.up{flex:0 0 auto;min-width:120px;text-align:center;background:var(--soft)}
.chapternav a.next{text-align:right}
.chapternav a.disabled{visibility:hidden}
.conf strong{color:#ffd36b}
.conf a{color:#ffd36b;text-decoration:underline}
.progress{position:fixed;top:0;left:0;height:4px;width:0;background:linear-gradient(90deg,var(--accent),var(--gold));z-index:300;transition:width .1s}

.backbar{background:var(--ink);padding:8px 18px;font-family:-apple-system,sans-serif;font-size:13px}
.backbar a{color:#cfcfd8;text-decoration:none;font-weight:600}
.backbar a:hover{color:#fff}

header.hero{min-height:74vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:54px 24px;background:#fbfbf7}
.kicker{font-family:-apple-system,sans-serif;text-transform:uppercase;letter-spacing:.22em;font-size:12.5px;color:var(--accent);font-weight:700;margin-bottom:20px}
header.hero h1{font-size:clamp(30px,5.2vw,56px);line-height:1.07;max-width:16ch;margin-bottom:22px;letter-spacing:-.015em}
header.hero h1 .hot{color:var(--accent)}
header.hero p.sub{max-width:60ch;font-size:clamp(16px,2.1vw,20px);color:var(--muted)}
.scrollcue{margin-top:46px;font-family:-apple-system,sans-serif;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);opacity:.8;animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

section.step{max-width:1000px;margin:0 auto;padding:70px 24px;border-top:1px solid var(--line)}
.reveal{opacity:0;transform:translateY(34px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--accent);color:#fff;font-family:-apple-system,sans-serif;font-weight:700;font-size:19px;margin-bottom:16px;box-shadow:var(--shadow)}
section.step h2{font-size:clamp(24px,3.4vw,38px);margin-bottom:14px;line-height:1.13}
section.step .lead{font-size:clamp(16px,2vw,19px);color:var(--muted);max-width:66ch;margin-bottom:30px}

.chip{display:inline-block;background:var(--accent);color:#fff;font-weight:700;padding:1px 10px;border-radius:6px;font-family:-apple-system,sans-serif;font-size:.92em}
.callout{background:#fff7ed;border-left:4px solid var(--gold);padding:16px 20px;border-radius:0 8px 8px 0;margin-top:26px;font-size:15px}
.callout .lbl{font-family:-apple-system,sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:700;display:block;margin-bottom:4px}
.contradiction{background:#fbeaec;border-left:4px solid var(--accent);padding:16px 20px;border-radius:0 8px 8px 0;margin-top:26px;font-size:15px}
.contradiction .lbl{font-family:-apple-system,sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:700;display:block;margin-bottom:6px}

/* document facsimile */
.doc-frame{position:relative;max-width:680px;margin:0 auto}
.doc-cap{font-family:-apple-system,sans-serif;font-size:12px;color:var(--muted);text-align:center;margin-top:14px;letter-spacing:.02em}
.doc-cap b{color:var(--accent2)}
.paper-doc{background:#fff;border:1px solid #ccc;box-shadow:0 10px 30px rgba(0,0,0,.16);padding:28px 32px;position:relative;overflow:hidden}
.keyhi{background:rgba(255,214,107,.0);border-radius:4px;transition:background 1.1s ease,box-shadow 1.1s ease;padding:0 2px}
.keyhi.lit{background:rgba(255,214,107,.55);box-shadow:0 0 0 3px rgba(192,138,45,.45)}

/* declaration / legal-doc facsimile */
.legaldoc{font-family:Georgia,serif;font-size:13.5px;line-height:1.7}
.legaldoc .lh{text-align:center;font-family:-apple-system,sans-serif;font-size:11.5px;color:#555;border-bottom:1px solid #999;padding-bottom:8px;margin-bottom:14px;line-height:1.5}
.legaldoc .para{display:flex;gap:10px;margin:9px 0}
.legaldoc .para .pn{flex:0 0 auto;color:#888;font-family:-apple-system,sans-serif;font-size:12px;width:20px;text-align:right}
.legaldoc .swear{margin-top:14px;border-top:1px dashed var(--line);padding-top:10px;font-style:italic;color:#444;font-size:12.5px}

/* email facsimile */
.email{font-family:-apple-system,sans-serif;font-size:13px}
.email .eh{border-bottom:1px solid #ddd;padding-bottom:9px;margin-bottom:10px;line-height:1.6;font-size:12.5px;color:#333}
.email .eh b{color:#111}
.email .eb{font-size:13.5px;color:#222;font-family:Georgia,serif;line-height:1.6}
.email .nested{border-left:3px solid #dde;margin:12px 0;padding:10px 0 2px 14px}

/* certificate facsimile */
.cert{border:3px double #6a5a2a;background:linear-gradient(#fffdf6,#fbf6e8);padding:22px 26px;text-align:center;font-family:Georgia,serif;position:relative}
.cert .cno{position:absolute;top:12px;left:16px;font-family:-apple-system,sans-serif;font-size:12px;color:#8a6612;font-weight:700}
.cert .ct{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#6a5a2a;margin-bottom:6px}
.cert .cpct{font-size:30px;font-weight:800;color:var(--accent);margin:6px 0}
.cert .cbody{font-size:13px;color:#333;max-width:46ch;margin:10px auto;line-height:1.6}
.cert .csig{margin-top:18px;font-size:13px}
.cert .csig .mgr{font-family:'Brush Script MT',cursive;font-size:22px;color:#13315c}
.cert .cdate{font-family:'Bradley Hand',cursive;color:#13315c}

/* statement-style table */
.kv{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed var(--line);font-size:14px}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--muted);font-family:-apple-system,sans-serif;font-size:13px}
.kv .v{font-weight:700}
.kv .v.hot{color:var(--accent);font-size:16px}

/* annotation callout — rendered as a strip BELOW the document, never overlapping text */
.ann{display:block;margin:14px auto 0;max-width:560px;opacity:0;transform:translateY(10px);transition:opacity .6s ease .3s,transform .6s ease .3s;width:auto!important;position:static!important;left:auto!important;top:auto!important}
.ann.in{opacity:1;transform:none}
.ann .albl{position:relative;display:block;font-family:-apple-system,sans-serif;font-size:13px;font-weight:700;color:#fff;background:var(--accent);
  padding:11px 15px 11px 16px;border-radius:9px;box-shadow:0 6px 18px rgba(0,0,0,.18);line-height:1.4;border-left:5px solid #7d0c1d}
.ann .albl::before{content:"";position:absolute;top:-8px;left:26px;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid var(--accent)}
.ann .albl::after{content:"\2191";position:absolute;top:10px;right:14px;font-size:13px;opacity:.7}
.ann .albl small{display:block;font-weight:500;opacity:.95;font-size:11.5px;margin-top:3px}
.ann svg{display:none!important}

/* verify button */
.verify{text-align:center;margin-top:16px}
.verify a{display:inline-flex;align-items:center;gap:8px;font-family:-apple-system,sans-serif;font-size:14px;font-weight:600;color:#fff;background:var(--accent2);text-decoration:none;padding:10px 18px;border-radius:8px;box-shadow:var(--shadow);transition:all .15s}
.verify a:hover{background:#0c6388;transform:translateY(-2px)}
.verify a svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2}
.verify .vnote{display:block;font-family:-apple-system,sans-serif;font-size:11.5px;color:var(--muted);margin-top:8px;line-height:1.5}
.verify .vnote code{background:#efece2;padding:1px 6px;border-radius:4px;font-size:11px;color:var(--ink)}
.docket-record-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:22px}
.docket-record-grid a{display:flex;min-height:138px;flex-direction:column;justify-content:flex-start;padding:15px;background:#fff;border:1px solid var(--line);border-top:4px solid var(--accent2);border-radius:8px;box-shadow:var(--shadow);color:var(--ink);font-family:-apple-system,sans-serif;text-decoration:none}
.docket-record-grid a:hover{border-top-color:var(--accent);transform:translateY(-2px)}
.docket-record-grid span{color:var(--accent);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.docket-record-grid strong{margin-top:5px;font-size:14px;line-height:1.25}
.docket-record-grid small{margin-top:7px;color:var(--muted);font-size:11.5px;line-height:1.35}
@media(max-width:900px){.docket-record-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.docket-record-grid{grid-template-columns:1fr}.docket-record-grid a{min-height:0}}

.redact{display:inline-block;background:#111;color:#111;border-radius:2px;padding:0 2px;user-select:none}

footer{background:var(--ink);color:#cfcfd8;padding:48px 24px;font-family:-apple-system,sans-serif;font-size:13px;line-height:1.7;margin-top:30px}
footer .fin{max-width:880px;margin:0 auto}
footer h3{color:#fff;font-size:14px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:12px}
footer .legal{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:16px 18px;margin-top:16px}
footer .legal strong{color:#ffd36b}
footer a{color:#ffd36b}
