/* ============================================================
   Shared styles for the anonymized client-work sample mini-site
   Light brand standard: white, ink text, sky-blue accent.
   ============================================================ */
:root{--ink:#0f172a;--ink-soft:#475569;--paper:#fff;--paper-soft:#f8fafc;--rule:#e2e8f0;--accent:#0ea5e9;--accent-bg:#f0f9ff;--good:#16a34a;--good-bg:#f0fdf4;--warn:#b45309;--warn-bg:#fef3c7;--bad:#dc2626;--bad-bg:#fef2f2;}
*{box-sizing:border-box;} html,body{margin:0;padding:0;} html{scroll-behavior:smooth;}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Inter",sans-serif;color:var(--ink);background:var(--paper);line-height:1.6;font-size:15px;}
.container{max-width:920px;margin:0 auto;padding:48px 28px 88px;}

/* sample cross-nav strip */
.xnav{background:#0f172a;color:#cbd5e1;font-size:12.5px;font-weight:600;letter-spacing:.02em;padding:9px 0;}
.xnav .xinner{max-width:920px;margin:0 auto;padding:0 28px;display:flex;gap:8px 14px;align-items:center;flex-wrap:wrap;}
.xnav .tag{color:#7dd3fc;text-transform:uppercase;letter-spacing:.1em;font-size:11px;}
.xnav a{color:#e2e8f0;border-bottom:1px solid transparent;padding-bottom:1px;text-decoration:none;}
.xnav a:hover{color:#7dd3fc;border-bottom-color:#7dd3fc;}
.xnav a.active{color:#fff;border-bottom-color:#7dd3fc;}
.xnav .sep{opacity:.4;}

header.doc{border-bottom:2px solid var(--ink);padding-bottom:22px;margin-bottom:26px;}
.eyebrow{text-transform:uppercase;font-size:12px;letter-spacing:.12em;color:var(--ink-soft);font-weight:600;margin:0 0 8px;}
h1{font-size:28px;line-height:1.15;margin:0 0 12px;font-weight:700;}
.lede{color:var(--ink-soft);margin:0;max-width:74ch;font-size:16px;}

h2{font-size:20px;margin:36px 0 8px;font-weight:700;}
h3.inline{font-size:15px;margin:18px 0 6px;font-weight:700;}
.sub{color:var(--ink-soft);font-size:13.5px;margin:0 0 14px;}
p{margin:0 0 14px;} ul{margin:0 0 12px;padding-left:20px;} li{margin:6px 0;}
a{color:var(--accent);}
code{background:var(--paper-soft);border:1px solid var(--rule);border-radius:4px;padding:1px 6px;font-size:13px;}

.act{display:flex;align-items:center;gap:12px;margin:0 0 4px;}
.act-num{flex:none;width:34px;height:34px;border-radius:9px;background:var(--accent);color:#fff;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;}
.act h2{margin:0;font-size:22px;font-weight:700;}
.act-kicker{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);font-weight:700;margin:0;}

.card{border:1px solid var(--rule);border-radius:12px;background:var(--paper-soft);padding:18px 20px;margin:0 0 16px;}
.card h3{margin:0 0 4px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);font-weight:700;}

table{border-collapse:collapse;width:100%;margin:0 0 16px;font-size:13.5px;}
th,td{border:1px solid var(--rule);padding:8px 12px;text-align:left;vertical-align:top;}
th{background:var(--paper-soft);font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);}

.pill{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:999px;vertical-align:middle;}
.pill.draft{background:var(--warn-bg);color:var(--warn);border:1px solid #fcd34d;}
.pill.done{background:var(--good-bg);color:var(--good);border:1px solid var(--good);}
.pill.pend{background:var(--bad-bg);color:var(--bad);border:1px solid #fca5a5;}
.pill.new{background:var(--accent-bg);color:#0c4a6e;border:1px solid #bae6fd;}

.callout{border-radius:8px;padding:14px 18px;margin:8px 0 22px;font-size:14.5px;background:var(--accent-bg);border:1px solid #bae6fd;border-left:4px solid var(--accent);}
.callout.good{background:var(--good-bg);border:1px solid var(--good);border-left:4px solid var(--good);}
.callout strong{display:block;margin-bottom:4px;}

/* dark task-brief block */
.brief{background:#0f172a;color:#e2e8f0;border-radius:12px;padding:22px 24px;font-size:13.5px;line-height:1.6;font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;white-space:pre-wrap;margin:0 0 20px;overflow:auto;}
.brief .hd{color:#7dd3fc;font-weight:700;}
.brief .sub2{color:#fcd34d;}

/* GHL deep-link buttons */
.ghl-link{display:inline-block;font-size:12px;font-weight:600;color:var(--accent);border:1px solid #bae6fd;background:var(--accent-bg);border-radius:6px;padding:2px 8px;text-decoration:none;}
.ghl-link:hover{background:#e0f2fe;}

/* prev / next nav */
.prevnext{display:flex;justify-content:space-between;gap:12px;margin-top:40px;padding-top:18px;border-top:1px solid var(--rule);font-size:14px;}
.prevnext a{font-weight:600;text-decoration:none;}
.prevnext .nx{margin-left:auto;text-align:right;}

.footnote{color:var(--ink-soft);font-size:13px;margin-top:40px;padding-top:16px;border-top:1px solid var(--rule);}

/* hub cards */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:8px 0 24px;}
.hub-card{display:block;border:1px solid var(--rule);border-radius:12px;background:var(--paper-soft);padding:20px;text-decoration:none;color:var(--ink);transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;}
.hub-card:hover{border-color:var(--accent);box-shadow:0 6px 22px rgba(15,23,42,.08);transform:translateY(-2px);}
.hub-card .num{font-size:12px;font-weight:800;color:var(--accent);letter-spacing:.08em;text-transform:uppercase;}
.hub-card h3{margin:6px 0 6px;font-size:17px;font-weight:700;}
.hub-card p{margin:0;font-size:13.5px;color:var(--ink-soft);}

/* mermaid preview component (used on build page) */
.present-row{display:flex;justify-content:flex-end;margin:0 0 8px;}
.present-btn{font:inherit;font-size:13px;font-weight:600;color:#fff;background:var(--ink);border:none;border-radius:7px;padding:8px 16px;cursor:pointer;}
.present-btn:hover{background:#1e293b;}
.mermaid{position:relative;height:560px;overflow:hidden;border:1px solid var(--rule);border-radius:10px;background:var(--paper-soft);margin:0 0 24px;}
.mermaid svg{width:100%;height:100%;display:block;}
.mermaid-hint{position:absolute;bottom:8px;right:12px;font-size:11px;color:var(--ink-soft);background:rgba(255,255,255,.85);padding:2px 8px;border-radius:6px;pointer-events:none;}
.mermaid.present{position:fixed;inset:0;height:100vh;width:100vw;z-index:9999;border-radius:0;border:none;margin:0;background:#fff;}
.present-close{position:absolute;top:12px;right:14px;z-index:10000;font:inherit;font-size:13px;font-weight:600;color:#fff;background:rgba(15,23,42,.85);border:none;border-radius:7px;padding:7px 14px;cursor:pointer;display:none;}
.mermaid.present .present-close{display:block;}