/* ============================================================
   Resources hub — shared component styles.
   Every hub page links /workshop/shared/app.css (tokens + topbar)
   THEN this file. Single-scroll layout (no sidebar router).
   Tokens come from app.css :root: --ink --ink-mid --ink-soft --gold
   --gold-tint --gold-line --blue --good --bad --line --card --panel
   --display --body --mono --ease. Reference by var(), never hardcode.
   House style: no em dashes, British spelling, concise.
   ============================================================ */

/* layout */
.hubwrap{max-width:880px;margin:0 auto;padding:32px 22px 84px}
.back{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-mid);text-decoration:none;margin:0 0 22px;border:1px solid var(--line);border-radius:999px;padding:7px 14px;background:var(--card);transition:border-color .15s,color .15s,background .15s}
.back:hover{color:var(--gold);border-color:var(--gold-line);background:var(--gold-tint)}
/* forward / onward nav buttons — same pill family as .back */
.fwd{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-mid);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:7px 14px;background:var(--card);transition:border-color .15s,color .15s,background .15s}
.fwd:hover{color:var(--gold);border-color:var(--gold-line);background:var(--gold-tint)}
.pagenav{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 0}

/* heads */
.eyebrow{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:600;margin:0 0 10px}
.h1{font-family:var(--display);font-weight:800;letter-spacing:-.03em;font-size:clamp(2rem,1.5rem+2.4vw,3rem);line-height:1.05;margin:0 0 14px}
.lede{font-family:var(--display);font-weight:700;font-size:clamp(1.08rem,1rem+.6vw,1.35rem);line-height:1.4;color:var(--ink);margin:0 0 10px;max-width:64ch}
.sub{font-size:1.02rem;line-height:1.6;color:var(--ink-mid);margin:0 0 26px;max-width:66ch}
.sub.lead-in{font-size:1.05rem;color:var(--ink)}
.hub-foot{margin-top:34px;font-size:.86rem}
.sec{margin:40px 0 0}
.sec-h{font-family:var(--display);font-weight:800;font-size:1.32rem;letter-spacing:-.02em;color:var(--ink);margin:0 0 4px}
.sec-sub{font-size:.96rem;color:var(--ink-mid);margin:0 0 16px;max-width:64ch}

/* body text */
.body p{font-size:1.02rem;line-height:1.6;margin:0 0 13px;max-width:66ch;color:var(--ink)}
.body ul{margin:0 0 14px;padding:0;list-style:none;max-width:66ch}
.body li{font-size:1rem;line-height:1.5;padding-left:18px;position:relative;margin-bottom:9px;color:var(--ink)}
.body li:before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:2px;background:var(--gold)}
.body b{color:var(--ink)}

/* tile grid (front door) */
.tiles{display:grid;grid-template-columns:1fr;gap:14px;margin:6px 0 0}
@media(min-width:620px){.tiles{grid-template-columns:1fr 1fr}}
.tile{display:block;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 22px;transition:transform .15s var(--ease),border-color .15s var(--ease),box-shadow .15s var(--ease)}
.tile:hover{transform:translateY(-2px);border-color:var(--gold-line);box-shadow:0 10px 28px rgba(30,48,80,.09)}
.tile .tl{font-family:var(--mono);font-size:.82rem;letter-spacing:.03em;text-transform:uppercase;color:var(--rust);font-weight:700}
.tile h3{font-family:var(--display);font-weight:800;font-size:1.22rem;letter-spacing:-.02em;color:var(--ink);margin:8px 0 6px}
.tile p{font-size:.95rem;line-height:1.5;color:var(--ink-mid);margin:0}
.tile .go{display:inline-block;margin:12px 0 0;font-family:var(--mono);font-size:.84rem;color:var(--rust);font-weight:700}
.tile.wide{grid-column:1/-1}

/* step cards (start here) */
.steps{display:flex;flex-direction:column;gap:12px;margin:6px 0 0}
.step{display:flex;gap:15px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.step .sn{flex:0 0 auto;width:30px;height:30px;border-radius:9px;background:var(--gold-tint);color:var(--gold);font-family:var(--mono);font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.step .stx{flex:1}
.step h3{font-family:var(--display);font-weight:700;font-size:1.08rem;color:var(--ink);margin:0 0 4px}
.step p{font-size:.95rem;line-height:1.5;color:var(--ink-mid);margin:0}
.step .win{display:block;margin:7px 0 0;font-size:.86rem;color:var(--good);font-weight:600}
.step a{color:var(--gold);font-weight:600;text-decoration:none}

/* decision table (which tool when) */
.tbl-wrap{overflow-x:auto;margin:6px 0 0}
.tbl{width:100%;border-collapse:collapse;font-size:.95rem;min-width:520px}
.tbl th{text-align:left;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mid);font-weight:700;padding:0 12px 9px;border-bottom:1px solid var(--line)}
.tbl td{padding:12px;border-bottom:1px solid var(--line);line-height:1.45;color:var(--ink);vertical-align:top}
.tbl tr td:first-child{font-weight:600}
.tbl .tool{font-family:var(--display);font-weight:700;color:var(--gold)}

/* spine cards (mental model) */
.spine{display:grid;grid-template-columns:1fr;gap:13px;margin:6px 0 0}
@media(min-width:620px){.spine{grid-template-columns:1fr 1fr}}
.scard{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:0 14px 14px 0;padding:17px 19px}
.scard .sk{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:700}
.scard h3{font-family:var(--display);font-weight:800;font-size:1.15rem;color:var(--ink);margin:6px 0 6px}
.scard p{font-size:.94rem;line-height:1.5;color:var(--ink-mid);margin:0}

/* cheat cards */
.cheats{display:grid;grid-template-columns:1fr;gap:14px;margin:6px 0 0}
@media(min-width:620px){.cheats{grid-template-columns:1fr 1fr}}
.cheat{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.cheat h3{font-family:var(--display);font-weight:800;font-size:1.08rem;color:var(--ink);margin:0 0 10px}
.cheat .formula{font-family:var(--mono);font-size:.9rem;line-height:1.7;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:9px;padding:11px 13px;margin:0 0 10px}
.cheat ul{margin:0;padding:0;list-style:none}
.cheat li{font-size:.92rem;line-height:1.45;padding-left:16px;position:relative;margin-bottom:6px;color:var(--ink-mid)}
.cheat li:before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:2px;background:var(--gold)}

/* download list (templates) */
.dls{display:flex;flex-direction:column;gap:11px;margin:6px 0 0}
.dl{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:15px 18px}
.dl .di{flex:1;min-width:60%}
.dl h3{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--ink);margin:0 0 3px}
.dl p{font-size:.9rem;line-height:1.45;color:var(--ink-mid);margin:0}
.dl .fn{font-family:var(--mono);font-size:.74rem;color:var(--ink-soft)}

/* faq */
.faq details{border:1px solid var(--line);border-radius:12px;padding:0 18px;margin:0 0 10px;background:var(--card)}
.faq summary{font-family:var(--display);font-weight:700;font-size:1.04rem;color:var(--ink);cursor:pointer;list-style:none;padding:15px 0;display:flex;align-items:center;gap:9px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:before{content:"+";font-family:var(--mono);color:var(--gold);font-weight:700;font-size:1.1rem}
.faq details[open] summary:before{content:"\2212"}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq .fa{padding:13px 0 16px;font-size:.97rem;line-height:1.6;color:var(--ink-mid)}
.faq .fa p{margin:0 0 10px}

/* watch/read ranked list */
.reads{display:flex;flex-direction:column;gap:12px;margin:6px 0 0}
.read{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:15px 18px}
.read .rt{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:0 0 5px}
.read .star{color:var(--gold);font-size:.9rem;letter-spacing:1px}
.read h3{font-family:var(--display);font-weight:700;font-size:1.06rem;color:var(--ink);margin:0}
.read h3 a{color:var(--ink);text-decoration:none}
.read h3 a:hover{color:var(--gold)}
.read .meta{font-family:var(--mono);font-size:.7rem;color:var(--ink-soft)}
.read p{font-size:.93rem;line-height:1.5;color:var(--ink-mid);margin:0}

/* prompt block + copy (shared with /loops/) */
.lab{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mid);margin:14px 0 7px}
.prompt{font-family:var(--mono);font-size:.84rem;line-height:1.6;white-space:pre-wrap;background:var(--ink);color:#e9eefb;border-radius:12px;padding:18px 20px;margin:0;overflow-x:auto}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin:13px 0 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--body);font-weight:650;cursor:pointer;border:1.5px solid transparent;border-radius:999px;padding:.55em 1.3em;font-size:.95rem;text-decoration:none;transition:transform .15s var(--ease),background .15s var(--ease)}
.btn-primary{background:var(--ink);color:#fff;box-shadow:0 4px 14px rgba(20,20,20,.16)}
.btn-primary:hover{background:#14213e;transform:translateY(-1px)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn.is-copied{background:var(--good);border-color:var(--good);color:#fff}
.btn.is-error{background:var(--bad);border-color:var(--bad);color:#fff}

/* callouts */
.callout{margin:26px 0 0;padding:15px 18px;border-radius:12px}
.callout .c-l{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin:0 0 5px}
.callout p{font-size:.96rem;line-height:1.55;margin:0;max-width:66ch}
.callout.gold{background:var(--gold-tint);border:1px solid var(--gold-line)}
.callout.gold .c-l{color:var(--gold)}
.callout.gold a{color:var(--gold);font-weight:700;text-decoration:none}
.callout.blue{background:#f7fafe;border:1px solid #cfe0f1}
.callout.blue .c-l{color:var(--blue)}
.callout.blue a{color:var(--blue);font-weight:700;text-decoration:none}

/* persona chip (reused from /loops/ examples) */
.persona{display:inline-block;font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--gold);background:var(--gold-tint);border:1px solid var(--gold-line);border-radius:999px;padding:3px 11px;margin:0 0 12px}

/* click-to-pause overlay for hero/concept videos (drives, and is driven by, resources/video-pause.js).
   The play affordance is shared here; each page keeps its own .hero-fig container + video sizing inline.
   A page opts in by: link this file, add a .hero-fig video, and load video-pause.js. */
.hero-fig .vtoggle{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s var(--ease);pointer-events:none}
.hero-fig.is-paused .vtoggle{opacity:1}
.hero-fig .vtoggle i{width:60px;height:60px;border-radius:50%;background:rgba(30,48,80,.85);position:relative}
.hero-fig .vtoggle i:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-40%,-50%);border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent #fff}