/* =========================================================
   guides.css — styling for long-form guide pages
   Builds on redesign.css design tokens (--ink, --blue, etc.)
   ========================================================= */

/* ---- Guide hero tweaks ---- */
.guide-hero .lede{max-width:52ch;}
.guide-hero .sfc-eyebrow{color:var(--blue);}
.g-hero-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px 24px;}
.g-hero-card h4{font-family:var(--font-mono);font-size:0.845rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 12px;font-weight:600;}
.g-hero-card .g-fact{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
  border-top:1px solid var(--line-soft);font-size:1.025rem;}
.g-hero-card .g-fact:first-of-type{border-top:0;}
.g-hero-card .g-fact span:first-child{color:var(--ink-soft);}
.g-hero-card .g-fact span:last-child{color:var(--ink);font-weight:600;font-family:var(--font-mono);}

/* ---- Table of contents ---- */
.g-toc{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 24px;margin:0 auto 34px;max-width:820px;box-shadow:var(--shadow-sm);}
.g-toc h2{font-size:1.175rem !important;margin:0 0 12px !important;display:flex;align-items:center;gap:9px;}
.g-toc h2 .dot{width:8px;height:8px;border-radius:50%;background:var(--amber);}
.g-toc ol{columns:2;column-gap:34px;margin:0;padding-left:20px;color:var(--ink-soft);}
.g-toc li{margin-bottom:7px;break-inside:avoid;}
.g-toc a{font-weight:500;border-bottom:none !important;color:var(--blue-dk);}
.g-toc a:hover{text-decoration:underline;}
@media(max-width:640px){.g-toc ol{columns:1;}}

/* ---- Figures / diagrams ---- */
.g-figure{margin:24px auto;text-align:center;max-width:640px;}
.g-figure svg{max-width:100%;height:auto;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:14px;}
.g-figure figcaption{font-family:var(--font-mono);font-size:0.885rem;color:var(--ink-faint);
  margin-top:10px;letter-spacing:.02em;}

/* ---- Formula block ---- */
.g-formula{background:linear-gradient(180deg,var(--blue-tint),var(--paper));
  border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:var(--radius-sm);
  padding:18px 22px;margin:20px 0;text-align:center;}
.g-formula .eq{font-family:var(--font-mono);font-size:1.305rem;color:var(--ink);font-weight:600;
  line-height:1.5;}
.g-formula .where{display:block;font-family:var(--font-body);font-size:0.985rem;color:var(--ink-faint);
  margin-top:10px;}

/* ---- Data tables ---- */
.g-table-wrap{overflow-x:auto;margin:22px 0;}
.g-table{width:100%;border-collapse:collapse;font-size:1.045rem;min-width:420px;}
.g-table caption{caption-side:bottom;font-size:0.905rem;color:var(--ink-faint);margin-top:8px;text-align:left;
  font-family:var(--font-mono);}
.g-table th{background:var(--ink);color:#fff;text-align:left;padding:11px 14px;font-weight:600;
  font-size:0.955rem;letter-spacing:.02em;}
.g-table th:first-child{border-top-left-radius:8px;}
.g-table th:last-child{border-top-right-radius:8px;}
.g-table td{padding:10px 14px;border-bottom:1px solid var(--line-soft);color:var(--ink-soft);}
.g-table tbody tr:nth-child(even) td{background:var(--paper-2);}
.g-table tbody tr:hover td{background:var(--blue-tint);}
.g-table td strong{color:var(--ink);}

/* ---- Callouts ---- */
.g-callout{border-radius:var(--radius-sm);padding:16px 20px;margin:20px 0;border:1px solid var(--line);
  display:flex;gap:14px;align-items:flex-start;background:var(--paper);}
.g-callout .ic{flex:0 0 auto;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;font-size:1.175rem;color:#fff;}
.g-callout .bd{flex:1;}
.g-callout .bd strong{display:block;margin-bottom:3px;color:var(--ink);}
.g-callout .bd p{margin:0;font-size:1.045rem;}
.g-callout.tip{background:#effaf4;border-color:#bfe6d2;}
.g-callout.tip .ic{background:var(--green);}
.g-callout.warn{background:#fdf3ec;border-color:#f4d3ba;}
.g-callout.warn .ic{background:#e07b1d;}
.g-callout.key{background:var(--blue-tint);border-color:#bcd8f7;}
.g-callout.key .ic{background:var(--blue);}
.g-callout.note{background:var(--paper-2);border-color:var(--line);}
.g-callout.note .ic{background:var(--ink-soft);}

/* ---- Step list ---- */
.g-steps{list-style:none;counter-reset:step;padding:0;margin:20px 0;}
.g-steps li{position:relative;padding:0 0 18px 52px;margin:0;}
.g-steps li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:-2px;
  width:34px;height:34px;background:var(--blue);color:#fff;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:700;font-size:1.075rem;}
.g-steps li:not(:last-child)::after{content:"";position:absolute;left:16px;top:34px;bottom:2px;
  width:2px;background:var(--line);}
.g-steps li strong{color:var(--ink);}

/* ---- Related cards ---- */
.g-related{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:20px 0;}
.g-related a{display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:15px 17px;box-shadow:var(--shadow-sm);border-bottom:1px solid var(--line) !important;}
.g-related a:hover{border-color:var(--blue);box-shadow:var(--shadow);}
.g-related a .t{display:block;font-weight:600;color:var(--ink);margin-bottom:3px;}
.g-related a .d{display:block;font-size:0.955rem;color:var(--ink-faint);}

/* ---- Key-takeaways band ---- */
.g-takeaways{background:var(--ink);color:#dfe8f4;border-radius:var(--radius);padding:26px 30px;margin:26px 0;}
.g-takeaways h2{color:#fff !important;font-size:1.375rem !important;margin:0 0 14px !important;}
.g-takeaways ul{margin:0;padding-left:20px;color:#c7d4e6;}
.g-takeaways li{margin-bottom:9px;}
.g-takeaways li::marker{color:var(--amber);}
.g-takeaways strong{color:#fff;}