/* FreeToolBank — Guides section.
   Loaded ONLY on /guides/ and single guides (ftb_guides_assets). Same rule as
   front-page.css: the archive's filter chips and article typography are not
   worth shipping on 32 tool pages.

   Every value is a token. No hex, no px sizes except the handful of pixel
   affordances the design system already sets in px (icon boxes, hairlines).
   Colour comes from --ftb-accent, which .ftb-cat-* sets — the same mechanism
   the tool cards use, so a guide is tinted by its category for free. */

/* ============================================================ ARCHIVE HERO */

.ftb-guides-hero{max-width:var(--ftb-maxw-prose);margin-bottom:var(--ftb-space-10)}
.ftb-guides-hero h1{margin-bottom:var(--ftb-space-4)}
.ftb-guides-count{margin:var(--ftb-space-4) 0 0;font-size:var(--ftb-text-sm);
  color:var(--ftb-text-subtle)}

/* Shared section heading, used by every band on the archive. */
.ftb-section-h{display:flex;align-items:center;gap:var(--ftb-space-3);
  margin:0 0 var(--ftb-space-2)}
.ftb-section-h svg{width:24px;height:24px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--ftb-primary)}
.ftb-section-sub{margin:0 0 var(--ftb-space-6);max-width:var(--ftb-maxw-prose);
  color:var(--ftb-text-muted)}

/* ============================================================ TOOLBAR */

.ftb-guides-toolbar{margin-bottom:var(--ftb-space-10)}

.ftb-guides-search label{display:block;margin-bottom:var(--ftb-space-2);
  font-size:var(--ftb-text-sm);font-weight:var(--ftb-fw-semi);color:var(--ftb-text-muted)}
.ftb-guides-search-field{display:flex;gap:var(--ftb-space-2);position:relative}
.ftb-guides-search-icon{position:absolute;left:var(--ftb-space-4);top:50%;
  transform:translateY(-50%);pointer-events:none;color:var(--ftb-text-subtle);
  display:flex}
.ftb-guides-search-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ftb-guides-search input[type=search]{flex:1 1 auto;min-width:0;
  height:var(--ftb-control-h);padding:0 var(--ftb-space-4) 0 var(--ftb-space-12);
  font:inherit;font-size:var(--ftb-text-base);color:var(--ftb-text);
  background:var(--ftb-surface);border:1px solid var(--ftb-border-interactive);
  border-radius:var(--ftb-radius);appearance:none}
.ftb-guides-search input[type=search]::placeholder{color:var(--ftb-text-subtle)}
.ftb-guides-search input[type=search]:focus-visible{border-color:var(--ftb-primary)}

/* Topic chips. A chip is a real link to ?topic=slug and works with JS off. */
.ftb-guides-topics{display:flex;flex-wrap:wrap;gap:var(--ftb-space-2);
  margin-top:var(--ftb-space-5)}
/* `.ftb .ftb-chip`, not `.ftb-chip`. The base link rule in style.css is
   `.ftb a` — one class plus one type, (0,1,1) — which outranks a single class
   and was underlining every chip. The same specificity trap style.css already
   documents for `.ftb p`. Measured in the browser, not assumed. */
.ftb .ftb-chip{display:inline-flex;align-items:center;gap:var(--ftb-space-2);
  min-height:var(--ftb-tap);padding:var(--ftb-space-2) var(--ftb-space-4);
  font-size:var(--ftb-text-sm);font-weight:var(--ftb-fw-medium);
  letter-spacing:var(--ftb-ls-tight);
  color:var(--ftb-text);text-decoration:none;background:var(--ftb-surface);
  border:1px solid var(--ftb-border-strong);border-radius:var(--ftb-radius-full);
  transition:border-color var(--ftb-transition),background var(--ftb-transition),
             color var(--ftb-transition)}
.ftb-chip:hover{border-color:var(--ftb-accent,var(--ftb-primary));
  color:var(--ftb-accent,var(--ftb-primary))}
.ftb-chip svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  color:var(--ftb-accent,var(--ftb-text-muted))}
.ftb-chip-n{font-size:var(--ftb-text-xs);color:var(--ftb-text-subtle);
  font-variant-numeric:tabular-nums}
/* Active state carries a border and a fill, never colour alone — §9 forbids
   identifying state by colour on its own, and a tinted background at chip size
   is easy to miss. aria-current on the link is the programmatic half. */
.ftb-chip.is-active{background:var(--ftb-accent-soft,var(--ftb-primary-soft));
  border-color:var(--ftb-accent,var(--ftb-primary));
  color:var(--ftb-accent,var(--ftb-primary));font-weight:var(--ftb-fw-semi)}
.ftb-chip.is-active .ftb-chip-n{color:inherit}

/* ============================================================ GUIDE CARD */

.ftb-guides-grid{display:grid;gap:var(--ftb-space-6);grid-template-columns:1fr}
@media (min-width:600px){.ftb-guides-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.ftb-guide-card{position:relative;display:flex;flex-direction:column;
  background:var(--ftb-surface);border:1px solid var(--ftb-border);
  border-radius:var(--ftb-radius-lg);overflow:hidden;
  transition:border-color var(--ftb-transition),box-shadow var(--ftb-transition),
             transform var(--ftb-transition)}
.ftb-guide-card:hover{border-color:var(--ftb-accent,var(--ftb-primary));
  box-shadow:var(--ftb-shadow-md);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){
  .ftb-guide-card,.ftb-guide-card:hover{transform:none;transition:none}
}

/* The cover. No stock illustration: a category-tinted panel carrying the
   category icon. §5.2 — gradients carry icons, never text — applied to a card.
   Zero image requests, correct in both themes, and it cannot go stale. */
.ftb-guide-cover{display:block;position:relative;aspect-ratio:16/9;
  background:var(--ftb-accent-soft,var(--ftb-surface-2));overflow:hidden}
.ftb-guide-cover--tile{display:flex;align-items:center;justify-content:center;
  background-image:linear-gradient(135deg,
    var(--ftb-accent-soft,var(--ftb-surface-2)) 0%,
    var(--ftb-surface-2) 100%)}
.ftb-guide-cover--tile svg{width:46px;height:46px;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  color:var(--ftb-accent,var(--ftb-text-muted));opacity:.9}
.ftb-guide-cover--img img{width:100%;height:100%;object-fit:cover;display:block}

.ftb-guide-card-body{display:flex;flex-direction:column;gap:var(--ftb-space-3);
  flex:1 1 auto;padding:var(--ftb-space-6)}
.ftb-guide-card-eyebrow{margin:0;min-height:0}
.ftb-guide-card-eyebrow:empty{display:none}
.ftb-guide-card-title{margin:0;font-size:var(--ftb-text-lg);
  font-weight:var(--ftb-fw-semi);line-height:var(--ftb-lh-tight);
  letter-spacing:var(--ftb-ls-tight)}
.ftb-guide-card-title a{color:var(--ftb-text);text-decoration:none}
.ftb-guide-card-title a:hover{color:var(--ftb-accent,var(--ftb-primary))}
/* One tab stop for the card: the title link is stretched over the whole thing.
   The tool link inside is lifted back above it so it stays clickable — that is
   a genuinely different destination and must not be swallowed. */
.ftb-guide-card-title a::after{content:"";position:absolute;inset:0}
.ftb-guide-card-excerpt{margin:0;font-size:var(--ftb-text-base);
  color:var(--ftb-text-muted);line-height:var(--ftb-lh-snug)}
.ftb-guide-card-meta{display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--ftb-space-2);margin:0;font-size:var(--ftb-text-xs);
  color:var(--ftb-text-subtle)}
.ftb-guide-card-tool{display:flex;align-items:center;gap:var(--ftb-space-2);
  margin:auto 0 0;padding-top:var(--ftb-space-4);
  border-top:1px solid var(--ftb-border);
  font-size:var(--ftb-text-sm);color:var(--ftb-text-muted)}
.ftb-guide-card-tool svg{width:17px;height:17px;flex:0 0 auto;fill:none;
  stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  color:var(--ftb-accent,var(--ftb-primary))}
.ftb-guide-card-toollink{position:relative;z-index:1;font-weight:var(--ftb-fw-semi)}

/* Compact variant: no cover, no excerpt. Used where a list reads better. */
.ftb-guide-card--compact .ftb-guide-card-body{padding:var(--ftb-space-5)}

/* Featured variant: side-by-side above 900px, stacked below. */
.ftb-guides-featured{margin-bottom:var(--ftb-space-12)}
.ftb-guide-card--feature .ftb-guide-card-title{font-size:var(--ftb-text-xl)}
@media (min-width:900px){
  .ftb-guide-card--feature{flex-direction:row;align-items:stretch}
  .ftb-guide-card--feature .ftb-guide-cover{flex:0 0 42%;aspect-ratio:auto;
    min-height:100%}
  .ftb-guide-card--feature .ftb-guide-card-body{padding:var(--ftb-space-8)}
  .ftb-guide-card--feature .ftb-guide-card-title{font-size:var(--ftb-text-2xl);
    line-height:var(--ftb-lh-tight)}
  .ftb-guide-card--feature .ftb-guide-card-excerpt{font-size:var(--ftb-text-md)}
}

/* ============================================================ ARCHIVE LAYOUT */

.ftb-guides-layout{display:grid;gap:var(--ftb-space-10);grid-template-columns:1fr}
/* min-width:0 on the main column, or a long unbroken string in a card title
   makes the grid track refuse to shrink and the whole page scrolls sideways.
   §12 has that overflow class of bug on record from the tool pages. */
.ftb-guides-main{min-width:0}
@media (min-width:1024px){
  .ftb-guides-layout{grid-template-columns:minmax(0,1fr) 320px;
    gap:var(--ftb-space-12);align-items:start}
  .ftb-guides-rail{position:sticky;top:calc(var(--ftb-header-h) + var(--ftb-space-6))}
}

.ftb-guides-main .ftb-section-h{margin-bottom:var(--ftb-space-6)}

/* ============================================================ RAIL */

.ftb-guides-rail{display:flex;flex-direction:column;gap:var(--ftb-space-6);min-width:0}
.ftb-rail-card{padding:var(--ftb-space-6);background:var(--ftb-surface);
  border:1px solid var(--ftb-border);border-radius:var(--ftb-radius-lg)}
.ftb-rail-card h2{margin:0 0 var(--ftb-space-4);font-size:var(--ftb-text-lg);
  font-weight:var(--ftb-fw-semi);letter-spacing:var(--ftb-ls-tight)}
.ftb-rail-intro{margin:0 0 var(--ftb-space-4);font-size:var(--ftb-text-sm);
  color:var(--ftb-text-muted)}

.ftb-rail-list{margin:0;padding:0;list-style:none;display:flex;
  flex-direction:column;gap:var(--ftb-space-4)}
.ftb-rail-list li{display:flex;flex-direction:column;gap:var(--ftb-space-1)}
/* min-height, because these measured 20px tall. WCAG 2.2 2.5.8 exempts links
   inside a sentence, which is why the "Tool: X" link in a card is left alone —
   but a list of navigation links is not a sentence and gets a real target. */
.ftb-rail-list a{display:block;min-height:24px;color:var(--ftb-text);
  text-decoration:none;font-weight:var(--ftb-fw-medium);
  line-height:var(--ftb-lh-snug)}
.ftb-rail-list a:hover{color:var(--ftb-primary);text-decoration:underline}
.ftb-rail-meta{font-size:var(--ftb-text-xs);color:var(--ftb-text-subtle)}

.ftb-rail-tools{margin:0 0 var(--ftb-space-5);padding:0;list-style:none;
  display:flex;flex-direction:column;gap:var(--ftb-space-1)}
.ftb-rail-tools a{display:flex;align-items:center;gap:var(--ftb-space-3);
  min-height:var(--ftb-tap);padding:var(--ftb-space-2);margin:0 calc(var(--ftb-space-2) * -1);
  border-radius:var(--ftb-radius);color:var(--ftb-text);text-decoration:none;
  font-size:var(--ftb-text-sm);font-weight:var(--ftb-fw-medium)}
.ftb-rail-tools a:hover{background:var(--ftb-surface-2);color:var(--ftb-accent,var(--ftb-primary))}
.ftb-rail-tools .ftb-tile{width:34px;height:34px;border-radius:var(--ftb-radius-sm)}
.ftb-rail-tools .ftb-tile svg{width:18px;height:18px}
.ftb-rail-cta{width:100%}
.ftb-rail-cta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

.ftb-rail-card--trust{background:var(--ftb-success-soft);border-color:transparent}
.ftb-rail-trust{display:flex;gap:var(--ftb-space-3);margin:0;
  font-size:var(--ftb-text-sm);color:var(--ftb-text)}
.ftb-rail-trust svg{width:20px;height:20px;flex:0 0 auto;margin-top:2px;fill:none;
  stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  color:var(--ftb-success)}

/* ============================================================ BY TOPIC */

.ftb-guides-bytopic{margin-top:var(--ftb-section-y)}
.ftb-topic-grid{display:grid;gap:var(--ftb-space-5);grid-template-columns:1fr}
@media (min-width:600px){.ftb-topic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.ftb-topic-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

.ftb-topic-card{padding:var(--ftb-space-6);background:var(--ftb-surface);
  border:1px solid var(--ftb-border);border-radius:var(--ftb-radius-lg);
  display:flex;flex-direction:column;gap:var(--ftb-space-4);min-width:0}
.ftb-topic-card h3{display:flex;align-items:center;gap:var(--ftb-space-3);margin:0;
  font-size:var(--ftb-text-lg);font-weight:var(--ftb-fw-semi)}
.ftb-topic-card ul{margin:0;padding:0;list-style:none;display:flex;
  flex-direction:column;gap:var(--ftb-space-3)}
.ftb-topic-card li a{display:block;min-height:24px;color:var(--ftb-text);
  text-decoration:none;font-size:var(--ftb-text-sm);line-height:var(--ftb-lh-snug)}
.ftb-topic-card li a:hover{color:var(--ftb-accent,var(--ftb-primary));text-decoration:underline}
.ftb-topic-links{display:flex;flex-wrap:wrap;gap:var(--ftb-space-4);margin:auto 0 0;
  padding-top:var(--ftb-space-2);font-size:var(--ftb-text-sm);
  font-weight:var(--ftb-fw-semi)}

/* ============================================================ ARCHIVE CTA */

.ftb-guides-cta{display:flex;flex-direction:column;gap:var(--ftb-space-6);
  margin-top:var(--ftb-section-y);padding:var(--ftb-space-10);
  background:var(--ftb-surface-2);border-radius:var(--ftb-radius-lg)}
.ftb-guides-cta h2{margin:0 0 var(--ftb-space-3);font-size:var(--ftb-text-xl)}
.ftb-guides-cta p{margin:0;max-width:var(--ftb-maxw-prose);color:var(--ftb-text-muted)}
.ftb-guides-cta-actions{display:flex;flex-wrap:wrap;gap:var(--ftb-space-3)}
.ftb-guides-cta-actions svg{width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:900px){
  .ftb-guides-cta{flex-direction:row;align-items:center;
    justify-content:space-between;gap:var(--ftb-space-10)}
  .ftb-guides-cta-actions{flex:0 0 auto}
}

/* ============================================================ PAGINATION */

/* Targets our own <nav>, not the_posts_pagination()'s. The parent theme
   strips that function's wrapper and leaves a bare .nav-links div, so a
   `.pagination` selector matched nothing and the pagination shipped unstyled.
   Found by fetching /guides/page/2/, not by reading the code. */
.ftb-guides-pagination{margin-top:var(--ftb-space-10)}
.ftb-guides-pagination ul{display:flex;flex-wrap:wrap;gap:var(--ftb-space-2);
  align-items:center;list-style:none;margin:0;padding:0}
.ftb-guides .page-numbers{display:inline-flex;align-items:center;
  justify-content:center;min-width:var(--ftb-tap);min-height:var(--ftb-tap);
  padding:0 var(--ftb-space-3);border:1px solid var(--ftb-border-strong);
  border-radius:var(--ftb-radius);color:var(--ftb-text);text-decoration:none;
  font-size:var(--ftb-text-sm);font-weight:var(--ftb-fw-medium)}
.ftb-guides a.page-numbers:hover{border-color:var(--ftb-primary);color:var(--ftb-primary)}
.ftb-guides .page-numbers.current{background:var(--ftb-primary);
  border-color:var(--ftb-primary);color:var(--ftb-on-primary);
  font-weight:var(--ftb-fw-semi)}
.ftb-guides .page-numbers.dots{border-color:transparent}

/* ============================================================ SINGLE GUIDE */

.ftb-guide-article{max-width:var(--ftb-maxw-prose);margin:0 auto}
.ftb-guide-head{margin-bottom:var(--ftb-space-8)}
.ftb-guide-kicker{margin:0 0 var(--ftb-space-4)}
.ftb-guide-kicker a{text-decoration:none}
.ftb-guide-kicker a:hover{text-decoration:underline}
.ftb-guide-head h1{margin-bottom:var(--ftb-space-5)}
.ftb-guide-meta{display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--ftb-space-2);margin:var(--ftb-space-5) 0 0;
  font-size:var(--ftb-text-sm);color:var(--ftb-text-subtle)}
.ftb-guide-byline{display:inline-flex;align-items:center;gap:var(--ftb-space-2)}
.ftb-guide-meta svg{width:17px;height:17px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* The tool offer, above the article. */
.ftb-guide-cta{display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--ftb-space-5);padding:var(--ftb-space-6);
  background:var(--ftb-accent-soft,var(--ftb-primary-soft));
  border:1px solid var(--ftb-accent,var(--ftb-primary));
  border-radius:var(--ftb-radius-lg);margin-bottom:var(--ftb-space-10)}
.ftb-guide-cta .ftb-tile{background:var(--ftb-surface);color:var(--ftb-accent,var(--ftb-primary))}
.ftb-guide-cta-text{flex:1 1 220px;min-width:0}
.ftb-guide-cta-eyebrow{margin:0;font-size:var(--ftb-text-xs);
  font-weight:var(--ftb-fw-semi);letter-spacing:var(--ftb-ls-wide);
  text-transform:uppercase;color:var(--ftb-accent,var(--ftb-primary))}
.ftb-guide-cta-name{margin:var(--ftb-space-1) 0 0;font-size:var(--ftb-text-lg);
  font-weight:var(--ftb-fw-semi);color:var(--ftb-text)}
.ftb-guide-cta-desc{margin:var(--ftb-space-1) 0 0;font-size:var(--ftb-text-sm);
  color:var(--ftb-text-muted)}
.ftb-guide-cta .ftb-btn{flex:0 0 auto}
.ftb-guide-cta .ftb-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Article typography. */
.ftb-guide-body h2{margin-top:var(--ftb-space-12);font-size:var(--ftb-text-xl)}
.ftb-guide-body h3{margin-top:var(--ftb-space-8);font-size:var(--ftb-text-lg)}
.ftb-guide-body ul,.ftb-guide-body ol{margin:0 0 var(--ftb-space-5);
  padding-left:var(--ftb-space-6)}
.ftb-guide-body li{margin-bottom:var(--ftb-space-2);line-height:var(--ftb-lh-base)}
.ftb-guide-body li::marker{color:var(--ftb-text-subtle)}
/* overflow-wrap:anywhere on inline code, or a long token in prose scrolls the
   whole page sideways at 360px. §12 records that exact bug from the tool pages. */
.ftb-guide-body code{padding:2px 6px;background:var(--ftb-surface-2);
  border-radius:var(--ftb-radius-sm);font-size:var(--ftb-text-code);
  overflow-wrap:anywhere}
.ftb-guide-body pre{padding:var(--ftb-space-5);background:var(--ftb-surface-2);
  border:1px solid var(--ftb-border);border-radius:var(--ftb-radius);
  overflow-x:auto}
.ftb-guide-body pre code{padding:0;background:none;overflow-wrap:normal}
.ftb-guide-body blockquote{margin:0 0 var(--ftb-space-5);
  padding:var(--ftb-space-1) 0 var(--ftb-space-1) var(--ftb-space-5);
  border-left:3px solid var(--ftb-accent,var(--ftb-primary));
  color:var(--ftb-text-muted)}
.ftb-guide-body table{width:100%;border-collapse:collapse;
  margin-bottom:var(--ftb-space-6);font-size:var(--ftb-text-sm)}
.ftb-guide-body th,.ftb-guide-body td{padding:var(--ftb-space-3);text-align:left;
  border-bottom:1px solid var(--ftb-border);vertical-align:top}
.ftb-guide-body th{font-weight:var(--ftb-fw-semi);color:var(--ftb-text)}
/* A wide table scrolls inside itself; the page never scrolls sideways. */
.ftb-guide-body .ftb-table-scroll{overflow-x:auto;margin-bottom:var(--ftb-space-6)}
.ftb-guide-body .ftb-table-scroll table{margin-bottom:0;min-width:32rem}

.ftb-guide-tools,.ftb-guide-related{margin-top:var(--ftb-section-y)}
.ftb-guide-tools h2,.ftb-guide-related h2{font-size:var(--ftb-text-xl)}
/* The prose column is 70ch; the card grids beneath it are allowed to use the
   full width, which is why they escape the article's max-width. */
.ftb-guide-tools .ftb-grid,.ftb-guide-related .ftb-guides-grid{
  grid-template-columns:1fr}
@media (min-width:600px){
  .ftb-guide-tools .ftb-grid,.ftb-guide-related .ftb-guides-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))}
}

.ftb-updated{margin-top:var(--ftb-space-10);font-size:var(--ftb-text-sm);
  color:var(--ftb-text-subtle)}

/* ============================================================ ARTICLE FIGURES

   width and height are set on every <img> in the markup so the browser
   reserves the box before the file arrives. Without that, five 16:9 images
   loading lazily shove the article down as they land — CLS, and §10 caps it
   at 0.05. aspect-ratio here backs that up if an image ever ships without
   explicit dimensions. */

.ftb-guide-figure{margin:var(--ftb-space-8) 0;padding:0}
.ftb-guide-figure img{display:block;width:100%;height:auto;aspect-ratio:16/9;
  object-fit:cover;background:var(--ftb-surface-2);
  border:1px solid var(--ftb-border);border-radius:var(--ftb-radius-lg)}
.ftb-guide-figure figcaption{margin-top:var(--ftb-space-3);
  font-size:var(--ftb-text-sm);line-height:var(--ftb-lh-snug);
  color:var(--ftb-text-muted);text-wrap:pretty}
.ftb-guide-figure figcaption code{font-size:var(--ftb-text-sm)}

/* The closing pointer to the wider catalogue. Reads as an aside, not a banner. */
.ftb-guide-outro{margin-top:var(--ftb-space-8);padding-top:var(--ftb-space-6);
  border-top:1px solid var(--ftb-border);color:var(--ftb-text-muted);
  font-size:var(--ftb-text-sm)}