/* ============================================================
   ProDesk Apps — Guides
   Loaded AFTER tools.css on /guides/ pages only. tools.css styles
   .prose for short explanatory blocks under a calculator; a guide
   is a long-form article, so it needs the elements that block
   never used: h3, ordered lists, tables, callouts and figures.
   Everything here is additive — no tools.css rule is redefined
   except where a guide needs it (noted inline).
   ============================================================ */

/* ---------------------------------------------------- article shell ---- */
.guide{max-width:760px;margin:0 auto}
.guide-meta{
  display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;
  color:var(--muted);font-size:.85rem;margin:18px 0 0;
}
.guide-meta__dot{color:var(--muted-2)}
.guide-updated{color:var(--muted)}

/* Standfirst — the one paragraph that says what the reader gets. */
.guide-standfirst{
  font-size:clamp(1.05rem,1.6vw,1.22rem);line-height:1.7;
  color:var(--text-dim);margin:0 0 8px;
}

/* --------------------------------------------------------- contents ---- */
.guide-toc{
  background:var(--panel-alt);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:22px 24px;margin:0 0 44px;
}
.guide-toc h2{font-size:.78rem!important;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:0 0 14px!important;font-weight:600}
.guide-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.guide-toc li{
  counter-increment:toc;position:relative;padding:0 0 0 30px;margin:0 0 9px;
  color:var(--text-dim);line-height:1.5;
}
/* tools.css paints a blue dot on every .prose li; the contents list is
   numbered instead, so that dot is replaced rather than left underneath. */
.guide-toc li::before{
  content:counter(toc);position:absolute;left:0;top:0;
  width:auto;height:auto;border-radius:0;background:none;
  color:var(--muted-2);font-variant-numeric:tabular-nums;font-size:.85rem;
}
.guide-toc a{color:var(--text-dim);border-bottom:1px solid transparent}
.guide-toc a:hover{color:var(--blue-bright);border-bottom-color:rgba(91,155,255,.3)}
.guide-toc li:last-child{margin-bottom:0}

/* ------------------------------------------------- long-form elements -- */
.prose h3{
  font-size:clamp(1.12rem,2vw,1.32rem);font-weight:650;color:var(--text);
  margin:34px 0 12px;
}
.prose h4{font-size:1.02rem;font-weight:650;color:var(--text);margin:26px 0 10px}
.prose h2{scroll-margin-top:calc(var(--nav-h) + 24px)}
.prose h3{scroll-margin-top:calc(var(--nav-h) + 24px)}

/* Ordered lists. tools.css gives every .prose li a blue dot via ::before,
   which would sit on top of the number, so the counter replaces it. */
.prose ol{list-style:none;margin:0 0 20px;padding-left:0;counter-reset:step}
.prose ol > li{
  counter-increment:step;position:relative;padding-left:34px;margin-bottom:11px;
  color:var(--text-dim);line-height:1.72;
}
.prose ol > li::before{
  content:counter(step) ".";position:absolute;left:2px;top:0;
  width:auto;height:auto;border-radius:0;background:none;
  color:var(--blue-bright);font-weight:600;font-variant-numeric:tabular-nums;
}

/* ------------------------------------------------------------ tables --- */
/* Wrapped in .table-scroll so a wide table scrolls itself instead of
   forcing the whole page to scroll sideways on a phone. */
.table-scroll{overflow-x:auto;margin:0 0 24px;-webkit-overflow-scrolling:touch}
.prose table{
  width:100%;border-collapse:collapse;font-size:.92rem;
  min-width:460px;background:var(--panel-alt);
  border:1px solid var(--line);border-radius:var(--radius-sm);
}
.prose caption{
  caption-side:top;text-align:left;color:var(--muted);font-size:.84rem;
  padding:0 0 10px;line-height:1.5;
}
.prose th,.prose td{
  padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);
  color:var(--text-dim);vertical-align:top;
}
.prose thead th{
  color:var(--text);font-weight:600;font-size:.8rem;letter-spacing:.04em;
  text-transform:uppercase;background:rgba(255,255,255,.025);
  border-bottom:1px solid var(--line-2);white-space:nowrap;
}
.prose tbody tr:last-child td{border-bottom:0}
.prose td.num,.prose th.num{text-align:right;font-variant-numeric:tabular-nums}
.prose td strong{color:var(--text)}

/* ---------------------------------------------------------- callouts --- */
.callout{
  border:1px solid var(--line-2);border-left:3px solid var(--blue);
  background:var(--blue-soft);border-radius:var(--radius-sm);
  padding:18px 20px;margin:0 0 24px;
}
.callout p:last-child{margin-bottom:0}
.callout__label{
  display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue-bright);font-weight:650;margin-bottom:8px;
}
.callout--warn{border-left-color:var(--red);background:rgba(240,82,106,.09)}
.callout--warn .callout__label{color:var(--red)}

/* Worked example — visually distinct from the surrounding argument so a
   reader scanning for "show me the numbers" can find it. */
.worked{
  background:var(--card);border:1px solid var(--line-2);
  border-radius:var(--radius-sm);padding:22px 24px;margin:0 0 26px;
}
.worked > h3:first-child,.worked > h4:first-child{margin-top:0}
.worked p:last-child,.worked .table-scroll:last-child{margin-bottom:0}

/* ------------------------------------------- inline tool call-to-action - */
.guide-tool{
  display:flex;flex-wrap:wrap;gap:16px 22px;align-items:center;
  justify-content:space-between;
  background:var(--card);border:1px solid var(--line-2);
  border-radius:var(--radius-sm);padding:20px 24px;margin:0 0 28px;
}
.guide-tool__text{flex:1 1 260px;min-width:0}
.guide-tool__text strong{display:block;color:var(--text);font-weight:650;margin-bottom:4px}
.guide-tool__text span{color:var(--muted);font-size:.9rem;line-height:1.55;display:block}

/* -------------------------------------------------------------- hub ---- */
.guide-list{display:grid;gap:18px;margin:0 0 8px}
.guide-item{
  display:block;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px 26px;transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.guide-item:hover{border-color:var(--line-2);transform:translateY(-2px)}
.guide-item h3{font-size:1.16rem;font-weight:650;color:var(--text);margin:8px 0 8px;line-height:1.35}
.guide-item p{color:var(--text-dim);margin:0 0 12px;line-height:1.65;font-size:.95rem}
.guide-item__tag{
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue-bright);font-weight:650;
}
.guide-item__go{color:var(--muted);font-size:.88rem}
.guide-item:hover .guide-item__go{color:var(--blue-bright)}
.guide-item__meta{color:var(--muted-2);font-size:.82rem;margin-left:10px}

@media (max-width:640px){
  .guide-toc{padding:18px 18px}
  .worked,.guide-tool{padding:18px}
  .guide-item{padding:20px}
}