/* ============================================================
   FREE TOOLS  —  the /tools hub grid + the single-tool page shell
   Loaded by tools/index.html and every tools/*-generator.html.

   Needs tokens.css (palette/type) and workshop.css (the generator
   widget itself). Everything here is page furniture AROUND that
   widget — deliberately not a second copy of it.

   Grammar, same as the rest of the site: flat cut shapes, hard
   edges, zero-blur offset shadows. No glow, no backdrop-filter,
   no blend modes, no gilt background-clip.
   --font-display is floored at 1.6rem; anything smaller is
   --font-body at 600-700 with tracking.
   ============================================================ */

:root{
  /* The cast a cut sheet throws. ink-900 with alpha — tokens carry no alpha
     variants, and workshop.css spells the same value for the same reason. */
  --qct-cast: rgba(28, 19, 10, .16);
  --qct-cast-soft: rgba(28, 19, 10, .10);
}

/* ── Shared page furniture ─────────────────────────────────── */
.qct-wrap{ max-width: 60rem; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }

/* Breadcrumb doubles as the only nav on a tool page: a stranger landing from
   search needs one obvious way up and one way across. */
.qct-crumb{
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  max-width: 60rem; margin: 0 auto; padding: 1.2rem clamp(1rem, 4vw, 2rem) 0;
  font-family: var(--font-body); font-size: .82rem; color: var(--ink-soft);
}
.qct-crumb a{ color: var(--ink-700); text-decoration: none; border-bottom: 1px solid var(--ink-soft); }
.qct-crumb a:hover{ color: var(--rubric-deep); border-bottom-color: var(--rubric-deep); }
.qct-crumb a:focus-visible{ outline: 2px solid var(--rubric-deep); outline-offset: 2px; border-radius: 2px; }
.qct-crumb span[aria-current]{ color: var(--ink-900); font-weight: 700; }

/* ── Tool-page hero ────────────────────────────────────────── */
.qct-hero{
  max-width: 60rem; margin: 0 auto;
  padding: clamp(1.6rem, 5vw, 2.6rem) clamp(1rem, 4vw, 2rem) 0;
}
.qct-hero__eyebrow{
  font-family: var(--font-body); font-size: .74rem; font-weight: 700;
  letter-spacing: .38em; text-transform: uppercase;
  color: var(--rubric-deep); margin: 0 0 .7rem;
}
.qct-hero h1{
  /* clamp floor is 1.75rem — above the display face's 1.6rem floor at every width. */
  font-family: var(--font-display); font-weight: 700; line-height: 1.08;
  font-size: clamp(1.75rem, 6vw, 3rem);
  color: var(--ink-900); margin: 0 0 .8rem; letter-spacing: .01em;
}
.qct-hero__lede{
  font-family: var(--font-body); font-size: clamp(1rem, 2.4vw, 1.14rem);
  line-height: 1.6; color: var(--ink-700); max-width: 54ch; margin: 0;
}

/* ── The hub grid ──────────────────────────────────────────── */
.qct-grid{
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1rem, 3vw, 1.5rem);
  /* 20rem, not 15rem: inside the 60rem wrap a 15rem floor fits three across and
     orphans the fourth tool on its own row. There are exactly four of these, so
     the floor is set to land them 2x2 on desktop and 1-up on mobile. It also
     stops the uppercase "OPEN THE ... GENERATOR" CTA wrapping mid-phrase. */
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}
.qct-card{
  position: relative; display: flex; flex-direction: column;
  background: var(--paper-300);
  border: 1px solid var(--ink-500); border-radius: 2px;
  box-shadow: 8px 8px 0 -1px var(--qct-cast);
  padding: clamp(1.1rem, 3vw, 1.5rem);
  transition: transform .16s var(--snap), box-shadow .16s var(--snap), border-color .18s ease;
}
.qct-card:hover{
  transform: translate(-2px, -2px);
  box-shadow: 11px 11px 0 -1px var(--qct-cast);
  border-color: var(--ink-900);
}
/* The whole card is the target; the heading link is stretched over it so the
   accessible name stays the tool's name rather than "card". */
.qct-card__link{ color: inherit; text-decoration: none; }
.qct-card__link::after{ content: ""; position: absolute; inset: 0; border-radius: 2px; }
.qct-card__link:focus-visible::after{ outline: 3px solid var(--rubric-deep); outline-offset: 3px; }

.qct-card h2, .qct-card h3{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.6rem, 3.2vw, 1.85rem); line-height: 1.12;
  color: var(--ink-900); margin: 0 0 .5rem;
}
.qct-card__blurb{
  font-family: var(--font-body); font-size: .95rem; line-height: 1.55;
  color: var(--ink-700); margin: 0 0 .9rem;
}
/* A real sample, not a placeholder — the card has to prove the tool is worth
   a click before anyone clicks it. */
.qct-card__sample{
  margin: auto 0 0; padding: .7rem .85rem;
  background: var(--paper-100);
  border: 1px solid var(--ink-500); border-left: 4px solid var(--rubric);
  border-radius: 2px;
  font-family: var(--font-body); font-size: .88rem; font-style: italic;
  line-height: 1.5; color: var(--ink-700);
}
.qct-card__cta{
  display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem;
  font-family: var(--font-body); font-size: .8rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--rubric-deep);
}
.qct-card:hover .qct-card__cta{ color: var(--ink-900); }

/* ── Section headings between blocks ───────────────────────── */
.qct-section{ padding: clamp(2.2rem, 6vw, 3.4rem) 0 0; }
.qct-section > h2{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.7rem, 4.4vw, 2.3rem); line-height: 1.14;
  color: var(--ink-900); margin: 0 0 .6rem;
}
.qct-section__lede{
  font-family: var(--font-body); font-size: 1rem; line-height: 1.6;
  color: var(--ink-700); max-width: 56ch; margin: 0 0 1.4rem;
}

/* ── Prose: the "how to use this" body a tool page needs to rank ── */
.qct-prose{ font-family: var(--font-body); color: var(--ink-700); max-width: var(--measure); }
.qct-prose h3{
  font-family: var(--font-body); font-weight: 700; font-size: 1.08rem;
  letter-spacing: .02em; color: var(--ink-900); margin: 1.6rem 0 .4rem;
}
.qct-prose p{ font-size: 1rem; line-height: 1.65; margin: 0 0 .9rem; }
.qct-prose ul{ margin: 0 0 .9rem; padding-left: 1.1rem; }
.qct-prose li{ font-size: 1rem; line-height: 1.6; margin-bottom: .35rem; }
.qct-prose a{ color: var(--ember-text); text-decoration: underline; text-underline-offset: 2px; }
.qct-prose a:hover{ color: var(--rubric-deep); }
.qct-prose a:focus-visible{ outline: 2px solid var(--rubric-deep); outline-offset: 2px; border-radius: 2px; }

/* ── FAQ (matches the FAQPage JSON-LD on each tool page verbatim) ── */
.qct-faq{ display: grid; gap: .6rem; max-width: var(--measure); }
.qct-faq details{
  background: var(--paper-300); border: 1px solid var(--ink-500); border-radius: 2px;
  box-shadow: 4px 4px 0 var(--qct-cast-soft);
}
.qct-faq summary{
  cursor: pointer; list-style: none; padding: .85rem 1rem;
  font-family: var(--font-body); font-weight: 700; font-size: .98rem; line-height: 1.4;
  color: var(--ink-900);
}
.qct-faq summary::-webkit-details-marker{ display: none; }
.qct-faq summary::before{ content: "\002B"; color: var(--rubric-deep); font-weight: 700; margin-right: .55rem; }
.qct-faq details[open] summary::before{ content: "\2212"; }
.qct-faq summary:focus-visible{ outline: 2px solid var(--rubric-deep); outline-offset: -2px; border-radius: 2px; }
.qct-faq .qct-faq__a{ padding: 0 1rem 1rem; }
.qct-faq .qct-faq__a p{ margin: 0; font-size: .96rem; line-height: 1.6; color: var(--ink-700); }

/* ── Cross-sell strip: the app, stated plainly, after the free thing works ── */
.qct-pitch{
  margin: clamp(2.4rem, 6vw, 3.4rem) 0 0;
  padding: clamp(1.3rem, 4vw, 2rem);
  background: var(--paper-100);
  border: 1px solid var(--ink-900); border-radius: 2px;
  box-shadow: 8px 8px 0 -1px var(--qct-cast);
}
.qct-pitch h2{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.05rem); line-height: 1.14;
  color: var(--ink-900); margin: 0 0 .6rem;
}
.qct-pitch p{ font-family: var(--font-body); font-size: 1rem; line-height: 1.6; color: var(--ink-700); margin: 0 0 1rem; max-width: 56ch; }
.qct-pitch__cta{
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-body); font-size: .88rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--paper-100); background: var(--ink-900);
  border: 1px solid var(--ink-900); border-radius: 2px;
  padding: .8rem 1.5rem; min-height: 48px; text-decoration: none;
  box-shadow: 5px 5px 0 var(--qct-cast);
  transition: background-color .18s ease, border-color .18s ease, box-shadow .14s var(--snap), transform .14s var(--snap);
}
.qct-pitch__cta:hover{ background: var(--rubric-deep); border-color: var(--rubric-deep); box-shadow: 7px 7px 0 var(--qct-cast); }
.qct-pitch__cta:active{ transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--qct-cast); }
.qct-pitch__cta:focus-visible{ outline: 2px solid var(--rubric-deep); outline-offset: 3px; }

/* ── "Other tools" strip at the foot of every single-tool page ── */
.qct-more{ margin: clamp(2.2rem, 6vw, 3rem) 0 clamp(2.5rem, 7vw, 3.5rem); }
.qct-more h2{
  font-family: var(--font-body); font-size: .76rem; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase; color: var(--rubric-deep);
  margin: 0 0 .9rem;
}
.qct-more ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.qct-more a{
  display: inline-block; padding: .6rem 1rem;
  font-family: var(--font-body); font-size: .9rem; font-weight: 700;
  color: var(--ink-700); background: var(--paper-100);
  border: 1px solid var(--ink-500); border-radius: 2px; text-decoration: none;
  box-shadow: 3px 3px 0 var(--qct-cast-soft);
  transition: color .18s, border-color .18s, background-color .18s, transform .12s var(--snap), box-shadow .12s var(--snap);
}
.qct-more a:hover{ color: var(--ink-900); border-color: var(--ink-900); background: var(--paper-500); }
.qct-more a:active{ transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--qct-cast-soft); }
.qct-more a:focus-visible{ outline: 2px solid var(--rubric-deep); outline-offset: 2px; }

/* ── Standalone tool page: body ground + the widget's own margins ── */
.qct-body{
  margin: 0; background: var(--paper-100); color: var(--ink-700);
  font-family: var(--font-body);
  /* The site's grain lives on the parchment; url() resolves against this
     stylesheet, which sits at the root, so it holds from /tools/ too. */
  background-image: url('./assets/parchment-grain.svg');
  background-size: 220px 220px; background-repeat: repeat; background-blend-mode: soft-light;
}
/* On a single-tool page the widget is the main event, so it loses the section
   padding it carries when it is one block among many on the hub. Its .qcw-head
   is omitted from the markup entirely rather than hidden here — the page's own
   h1 says what the tool is, and a display:none heading is just weight. */
.qct-body .qcw{ padding-top: clamp(1.2rem, 3vw, 1.8rem); }

.qct-skip{
  position: absolute; left: -9999px; top: 0;
  background: var(--ink-900); color: var(--paper-100);
  padding: .7rem 1.1rem; z-index: 100; border-radius: 2px;
  font-family: var(--font-body); font-weight: 700;
}
.qct-skip:focus{ left: .5rem; top: .5rem; }
/* The first tab stop on all four generator pages had no authored indicator — it relied
   on the UA ring, which several engines suppress once left/position are animated. Same
   remedy styles.css:36-39 already applies to .skip; these pages do not load styles.css. */
.qct-skip:focus-visible{ outline: 2px solid var(--paper-100); outline-offset: 3px; }

@media (max-width: 520px){
  .qct-more ul{ flex-direction: column; }
  .qct-more a{ text-align: center; }
}

@media (prefers-reduced-motion: reduce){
  /* State still applies — only the tween is dropped. A reduced-motion visitor
     must still get the hover/active affordances, just instantly. */
  .qct-card, .qct-more a, .qct-pitch__cta{ transition-duration: .001ms; }
  .qct-card:hover{ transform: none; }
}