/* ============================================================
   EQ2 Signature Guides — shared enhancement styles
   Loaded by index.html (hub) and every *-signature-guide.html
   ============================================================ */

:root{
  --eq2bar-bg:#ffffffee;
  --eq2bar-line:#e2e2ea;
  --eq2bar-ink:#241f2e;
  --eq2bar-soft:#6c6678;
  --eq2-accent:#8a3f9c;
}
html[data-theme="dark"]{
  /* Flip the neutral tokens every guide + the hub share, so all 11
     guides go dark automatically. Accent/zone hues are left intact. */
  --paper:#13121a;
  --card:#1d1b25;
  --ink:#ece8f1;
  --ink-soft:#b7b0c4;
  --muted:#8b8398;
  --line:#2b2935;
  --line-soft:#22212b;
  --wpbg:#272534;
  --wpborder:#3b3849;
  --eq2bar-bg:#191822f2;
  --eq2bar-line:#2c2a37;
  --eq2bar-ink:#ece8f1;
  --eq2bar-soft:#9a93a8;
}
html[data-theme="dark"] body{
  background:
    radial-gradient(1200px 600px at 50% -200px, #20202e 0%, rgba(32,32,46,0) 60%),
    #13121a !important;
}
html[data-theme="dark"] .quest,
html[data-theme="dark"] .pre,
html[data-theme="dark"] .tip,
html[data-theme="dark"] .meta span{ box-shadow:none; }

/* ---------- top bar ---------- */
#eq2bar{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:9px 16px;
  background:var(--eq2bar-bg);
  -webkit-backdrop-filter:saturate(1.4) blur(8px);
  backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--eq2bar-line);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--eq2bar-ink);
}
#eq2bar .e2-brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.01em;font-size:15px;text-decoration:none;color:var(--eq2bar-ink);}
#eq2bar .e2-brand svg{width:20px;height:20px;color:var(--eq2-accent);}
#eq2bar .e2-back{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--eq2bar-soft);font-weight:600;font-size:13.5px;padding:6px 10px;border-radius:8px;border:1px solid transparent;}
#eq2bar .e2-back:hover{background:color-mix(in srgb,var(--eq2-accent) 12%,transparent);color:var(--eq2bar-ink);}
#eq2bar .e2-back svg{width:14px;height:14px;}
#eq2bar .e2-spacer{flex:1 1 auto;}

#eq2bar .e2-charwrap{display:inline-flex;align-items:center;gap:6px;}
#eq2bar label.e2-lbl{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--eq2bar-soft);}
#eq2bar select.e2-char{
  appearance:none; font:600 13.5px inherit; color:var(--eq2bar-ink);
  background:transparent; border:1px solid var(--eq2bar-line); border-radius:8px;
  padding:7px 28px 7px 11px; cursor:pointer; max-width:46vw;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23888' d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat; background-position:right 7px center; background-size:16px;
}
#eq2bar .e2-prog{display:inline-flex;align-items:center;gap:9px;min-width:150px;}
#eq2bar .e2-prog .e2-track{width:110px;height:7px;border-radius:99px;background:color-mix(in srgb,var(--eq2bar-soft) 28%,transparent);overflow:hidden;}
#eq2bar .e2-prog .e2-fill{height:100%;width:0;border-radius:99px;background:var(--eq2-accent);transition:width .35s ease;}
#eq2bar .e2-prog .e2-pct{font-size:12.5px;font-weight:700;color:var(--eq2bar-soft);white-space:nowrap;}

#eq2bar button.e2-ico{
  appearance:none;border:1px solid var(--eq2bar-line);background:transparent;color:var(--eq2bar-ink);
  width:34px;height:34px;border-radius:8px;cursor:pointer;display:inline-grid;place-items:center;
}
#eq2bar button.e2-ico:hover{background:color-mix(in srgb,var(--eq2-accent) 12%,transparent);}
#eq2bar button.e2-ico svg{width:17px;height:17px;}

/* dropdown menu */
.e2-menu{position:relative;}
.e2-menu .e2-pop{
  position:absolute; right:0; top:42px; min-width:212px; z-index:70;
  background:var(--eq2bar-bg); border:1px solid var(--eq2bar-line); border-radius:12px;
  box-shadow:0 12px 34px rgba(0,0,0,.18); padding:6px; display:none;
}
.e2-menu.open .e2-pop{display:block;}
.e2-menu .e2-pop button{
  appearance:none;width:100%;text-align:left;background:transparent;border:0;border-radius:8px;
  padding:9px 11px;font:600 13.5px inherit;color:var(--eq2bar-ink);cursor:pointer;display:flex;align-items:center;gap:10px;
}
.e2-menu .e2-pop button:hover{background:color-mix(in srgb,var(--eq2-accent) 12%,transparent);}
.e2-menu .e2-pop button svg{width:15px;height:15px;color:var(--eq2bar-soft);flex:none;}
.e2-menu .e2-pop hr{border:0;border-top:1px solid var(--eq2bar-line);margin:5px 4px;}
.e2-menu .e2-pop button.danger{color:#d23b30;}
.e2-menu .e2-pop button.danger svg{color:#d23b30;}

/* the guides' own sticky print toolbar shouldn't fight our bar */
.toolbar{position:static !important;}

/* ---------- quest completion (guides) ---------- */
.quest .seal, .quest .qhead{cursor:pointer;}
.quest .qhead{border-radius:8px;transition:background .12s ease;padding:2px 6px;margin:-2px -6px 4px;}
.quest .qhead:hover{background:color-mix(in srgb,var(--accent,var(--shadow)) 9%,transparent);}
.quest .seal{transition:transform .1s ease, background .15s ease;}
.quest .seal:hover{transform:scale(1.06);}
.quest.done{opacity:.58;}
.quest.done .seal{background:var(--accent,var(--shadow)) !important;border-color:var(--accent,var(--shadow)) !important;}
.quest.done .seal .num{opacity:0;}
.quest.done .seal .mk{opacity:0;}
.quest.done .seal::after{content:"";position:absolute;inset:0;display:grid;place-items:center;}
.quest.done .seal::before{
  content:""; position:absolute; left:50%; top:48%; width:34%; height:58%;
  border:solid #fff; border-width:0 3px 3px 0; transform:translate(-50%,-55%) rotate(45deg);
}
.quest.done h3{text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:color-mix(in srgb,var(--ink) 45%,transparent);}
body.eq2-hide-done .quest.done{display:none;}

/* a tiny "done" pill the script can drop into .qhead */
.e2-doneflag{display:none;}
.quest.done .e2-doneflag{display:inline-flex;align-items:center;gap:5px;font:700 10.5px/1 inherit;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--accent,var(--shadow));padding:4px 8px;border-radius:6px;}

/* cross-guide search highlight + dim */
.quest.e2-dim{opacity:.18;}
mark.e2-hit{background:color-mix(in srgb,var(--accent,var(--shadow)) 38%,#fff5);color:inherit;border-radius:3px;padding:0 2px;}

/* ---------- toast ---------- */
#eq2-toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(14px);
  background:#241f2e; color:#fff; font:600 14px/-apple-system,system-ui,sans-serif;
  padding:11px 18px; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.28);
  z-index:90; opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
  display:flex; align-items:center; gap:9px; max-width:88vw;
}
#eq2-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
#eq2-toast svg{width:17px;height:17px;color:#7fe0a3;flex:none;}
#eq2-toast code{font-family:ui-monospace,Menlo,Consolas,monospace;background:#ffffff22;padding:1px 6px;border-radius:5px;}

/* ---------- modal ---------- */
.e2-modal-backdrop{
  position:fixed; inset:0; background:rgba(15,12,22,.5); z-index:100;
  display:none; align-items:center; justify-content:center; padding:18px;
}
.e2-modal-backdrop.open{display:flex;}
.e2-modal{
  width:min(420px,100%); background:var(--card,#fff); color:var(--ink,#241f2e);
  border-radius:16px; box-shadow:0 24px 60px rgba(0,0,0,.32); padding:22px 22px 18px;
  font-family:-apple-system,system-ui,sans-serif; border:1px solid var(--line,#e2e2ea);
}
.e2-modal h3{margin:0 0 6px;font-size:19px;font-family:"Spectral",Georgia,serif;font-weight:700;}
.e2-modal p{margin:0 0 14px;font-size:14px;color:var(--ink-soft,#6c6678);line-height:1.5;}
.e2-modal input[type=text]{
  width:100%; font:15px inherit; padding:11px 13px; border-radius:10px;
  border:1px solid var(--line,#d8d8e2); background:var(--paper,#fff); color:inherit; margin-bottom:16px;
}
.e2-modal input[type=text]:focus{outline:2px solid var(--eq2-accent);outline-offset:1px;border-color:transparent;}
.e2-modal .e2-row{display:flex;gap:10px;justify-content:flex-end;}
.e2-btn{appearance:none;border:0;border-radius:10px;padding:10px 17px;font:700 14px inherit;cursor:pointer;}
.e2-btn.ghost{background:transparent;border:1px solid var(--line,#d8d8e2);color:var(--ink,#241f2e);}
.e2-btn.primary{background:var(--eq2-accent);color:#fff;}
.e2-btn.danger{background:#d23b30;color:#fff;}

/* ============================================================
   HUB (index.html)
   ============================================================ */
.hub-wrap{max-width:1040px;margin:0 auto;padding:34px 22px 90px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);}
.hub-hero{position:relative;border-bottom:2px solid var(--ink);padding:8px 0 26px;margin-bottom:30px;}
.hub-hero .eyebrow{font:700 12.5px/1 inherit;letter-spacing:.22em;text-transform:uppercase;color:var(--eq2-accent);margin:0 0 14px;}
.hub-hero h1{font-family:"Spectral",Georgia,serif;font-weight:800;font-size:clamp(34px,6.5vw,56px);line-height:1;margin:0;letter-spacing:-.015em;}
.hub-hero p.sub{font-family:"Spectral",Georgia,serif;font-style:italic;font-size:clamp(16px,2.3vw,20px);color:var(--ink-soft);margin:12px 0 0;max-width:60ch;}
.hub-stats{display:flex;flex-wrap:wrap;gap:22px;margin-top:22px;align-items:center;}
.hub-stat{display:flex;flex-direction:column;gap:2px;}
.hub-stat .big{font-family:"Spectral",Georgia,serif;font-weight:800;font-size:30px;line-height:1;color:var(--ink);}
.hub-stat .lbl{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);}
.hub-bigbar{flex:1 1 240px;min-width:200px;}
.hub-bigbar .track{height:11px;border-radius:99px;background:color-mix(in srgb,var(--muted) 26%,transparent);overflow:hidden;}
.hub-bigbar .fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#0f8fa0,#8a3f9c);transition:width .5s ease;}

.hub-search{margin:6px 0 22px;position:relative;}
.hub-search input{width:100%;font:15px inherit;padding:13px 15px 13px 42px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);}
.hub-search input:focus{outline:2px solid var(--eq2-accent);outline-offset:1px;border-color:transparent;}
.hub-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted);}

.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;}
.xcard{position:relative;display:block;text-decoration:none;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 20px 18px;overflow:hidden;transition:transform .12s ease, box-shadow .15s ease, border-color .15s ease;box-shadow:0 1px 2px rgba(0,0,0,.04);}
.xcard:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.12);border-color:color-mix(in srgb,var(--xa) 50%,var(--line));}
.xcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--xa);}
.xcard .xtop{display:flex;align-items:center;gap:13px;}
.xcard .xcrest{width:46px;height:46px;flex:none;color:var(--xa);}
.xcard .xno{font:700 11px/1 inherit;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.xcard .xname{font-family:"Spectral",Georgia,serif;font-weight:700;font-size:21px;line-height:1.05;margin:2px 0 0;color:var(--ink);}
.xcard .xmeta{display:flex;gap:8px;margin-top:3px;}
.xcard .xchip{font:600 11px/1 inherit;color:var(--ink-soft);background:color-mix(in srgb,var(--xa) 9%,transparent);border:1px solid color-mix(in srgb,var(--xa) 28%,transparent);padding:4px 8px;border-radius:6px;}
.xcard .xblurb{font-size:13.5px;color:var(--ink-soft);margin:13px 0 14px;line-height:1.5;min-height:40px;}
.xcard .xprog{display:flex;align-items:center;gap:10px;}
.xcard .xprog .track{flex:1;height:8px;border-radius:99px;background:color-mix(in srgb,var(--muted) 24%,transparent);overflow:hidden;}
.xcard .xprog .fill{height:100%;width:0;border-radius:99px;background:var(--xa);transition:width .4s ease;}
.xcard .xprog .pct{font:700 12.5px/1 inherit;color:var(--ink-soft);white-space:nowrap;min-width:54px;text-align:right;}
.xcard.complete{border-color:color-mix(in srgb,var(--xa) 60%,var(--line));}
.xcard .xdone{position:absolute;top:14px;right:14px;width:22px;height:22px;border-radius:50%;background:var(--xa);color:#fff;display:none;place-items:center;}
.xcard.complete .xdone{display:grid;}
.xcard .xdone svg{width:13px;height:13px;}

.hub-foot{margin-top:40px;text-align:center;color:var(--muted);font-size:12.5px;line-height:1.6;}

@media print{
  #eq2bar, #eq2-toast, .e2-modal-backdrop{display:none !important;}
}
@media (max-width:560px){
  #eq2bar .e2-prog .e2-track{width:74px;}
  #eq2bar select.e2-char{max-width:38vw;}
  .hub-grid{grid-template-columns:1fr;}
}

/* optional cover art (only appears if images/<slug>/cover.jpg exists) */
.xbanner{display:none;}
.xbanner.ok{display:block;width:calc(100% + 40px);height:120px;object-fit:cover;margin:-20px -20px 14px;border-bottom:1px solid var(--line);}
.xcard.hasbanner .xcrest{width:38px;height:38px;}

/* ============================================================
   FIXES: dark-mode readability for light helper boxes
   ============================================================ */
html[data-theme="dark"] .pre,
html[data-theme="dark"] .tip,
html[data-theme="dark"] .meta span{
  background:var(--card) !important;
  border-color:var(--line) !important;
}
html[data-theme="dark"] .pre{ border-left-color:var(--gold) !important; }
/* hazard / warning callouts: keep the red identity but go dark-friendly */
html[data-theme="dark"] .hazard{ background:#3a201e !important; border-color:#5e302b !important; }
html[data-theme="dark"] .hazard p{ color:#f4cbc5 !important; }
html[data-theme="dark"] .hazard b{ color:#ffd9d3 !important; }
html[data-theme="dark"] .hazard .ico{ color:#ff8d80 !important; }
/* "Start:" lines use a var bg already, but force-confirm contrast */
html[data-theme="dark"] .start{ background:var(--line-soft) !important; }

/* ============================================================
   FIXES: per-step checkboxes inside each quest
   ============================================================ */
/* hide the guides' decorative diamond bullet; we draw a checkbox instead */
.quest ul.steps>li::before{ display:none !important; }
.quest ul.steps>li{ cursor:pointer; padding-left:30px; transition:opacity .12s ease; }
.quest ul.steps>li .e2-cb{
  position:absolute; left:2px; top:9px; width:15px; height:15px; border-radius:4px;
  border:2px solid color-mix(in srgb, var(--accent,var(--shadow)) 55%, var(--line));
  background:transparent; box-sizing:border-box; pointer-events:none; transition:background .12s ease, border-color .12s ease;
}
.quest ul.steps>li:hover .e2-cb{ border-color:var(--accent,var(--shadow)); }
.quest ul.steps>li.e2-checked .e2-cb{ background:var(--accent,var(--shadow)); border-color:var(--accent,var(--shadow)); }
.quest ul.steps>li.e2-checked .e2-cb::after{
  content:""; position:absolute; left:4px; top:1px; width:4px; height:8px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.quest ul.steps>li.e2-checked{ opacity:.55; }
/* when the whole quest is complete, the dim is handled by .quest.done */
.quest.done ul.steps>li{ opacity:1; }

/* ============================================================
   FIXES round 3 — dark-mode contrast pass
   ============================================================ */

/* (a) character dropdown: give the select a solid surface so the OPEN native
   option list isn't light-on-light in dark mode */
html[data-theme="dark"] #eq2bar select.e2-char{ background-color:#1d1b25; color:var(--eq2bar-ink); }
html[data-theme="dark"] #eq2bar select.e2-char option{ background-color:#1d1b25; color:#ece8f1; }

/* (b) hub "Jump back into …" line + link (was default link color, low contrast) */
#hubResume{ color:var(--ink-soft); }
#hubResume a{ color:var(--eq2-accent); font-weight:700; text-decoration:none; }
#hubResume a:hover{ text-decoration:underline; }
html[data-theme="dark"] #hubResume a{ color:color-mix(in srgb, var(--eq2-accent) 60%, #ffffff); }

/* (c) primary-accent TEXT on dark surfaces — lighten so it reads */
html[data-theme="dark"] .eyebrow{ color:color-mix(in srgb, var(--shadow) 56%, #ffffff); }
html[data-theme="dark"] .wp{ color:color-mix(in srgb, var(--shadow) 58%, #ffffff) !important; }
html[data-theme="dark"] .crest,
html[data-theme="dark"] .crescent{ color:color-mix(in srgb, var(--shadow) 52%, #ffffff); }
html[data-theme="dark"] .tip .ico{ color:color-mix(in srgb, var(--shadow) 58%, #ffffff); }

/* (d) zone-accent surfaces — were near-white (#fff mix); dark-tint the fills and
   lighten the accent text/borders for contrast */
html[data-theme="dark"] .quest .seal{
  background:color-mix(in srgb, var(--accent) 22%, var(--card));
  border-color:color-mix(in srgb, var(--accent) 60%, #ffffff);
  color:color-mix(in srgb, var(--accent) 64%, #ffffff);
}
html[data-theme="dark"] .quest .seal .num,
html[data-theme="dark"] .quest .seal .mk{ color:color-mix(in srgb, var(--accent) 64%, #ffffff); }
html[data-theme="dark"] .quest .zone{
  background:color-mix(in srgb, var(--accent) 18%, var(--card));
  border-color:color-mix(in srgb, var(--accent) 42%, var(--line));
  color:color-mix(in srgb, var(--accent) 64%, #ffffff);
}
html[data-theme="dark"] .quest .start .ico,
html[data-theme="dark"] .quest .tag .ico{ color:color-mix(in srgb, var(--accent) 60%, #ffffff); }
html[data-theme="dark"] .quest h3{ color:var(--ink); }

/* (e) step checkbox outline visible on dark (checked fill stays solid for the white tick) */
html[data-theme="dark"] .quest ul.steps>li .e2-cb{ border-color:color-mix(in srgb, var(--accent) 52%, #ffffff); }

/* (f) misc */
html[data-theme="dark"] .hub-search input::placeholder{ color:var(--muted); }

/* ============================================================
   Print: hide the Ko-fi widget; stamp eq2sig.com bottom-right
   ============================================================ */
@media print{
  /* Ko-fi floating button / popup must not appear in print */
  [class*="floatingchat-container-wrap"],
  [class*="floating-chat-kofi-popup-iframe"],
  iframe[src*="ko-fi.com"]{ display:none !important; }

  /* small, unobtrusive site mark on every printed page */
  @page{ margin-bottom:16mm; }
  body::after{
    content:"eq2sig.com";
    position:fixed; bottom:5mm; right:6mm;
    font:400 8pt/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
    color:#9a9aa2; letter-spacing:.04em;
  }
}