/* ==========================================================================
   /tools — the interactive index
   --------------------------------------------------------------------------
   Extracted from css/caffeine.css when the Caffeine Cutoff Calculator was
   retired. That file styled two different things: the calculator itself, and
   the index page that listed it alongside the quizzes. Only the index
   survived, so only the index's rules are here — the form, chart, result
   panel, entry rows and offer block went with the tool.

   The `.caff-*` prefix went with it too. It named the page after the one tool
   that happened to be built first, which is how a shared index ends up
   depending on a file called `caffeine.css` and why deleting the tool looked,
   for a moment, like it would take the quiz listing with it.

   Hand-written rather than Tailwind utilities, following css/hub.css and
   css/checkout.css: css/app.css is a compiled build, so a new utility class
   does not exist until someone re-runs it — and a feature that only styles
   correctly after a build step is a feature that ships broken.

   Palette is the SleepOriginal system, declared once here as custom properties
   so nothing downstream hardcodes a hex value.
   ========================================================================== */

.tools {
  --tools-ivory:    #FBF6EC;
  --tools-surface:  #FFFDF9;
  --tools-navy:     #071B45;
  --tools-terra:    #C47B55;
  --tools-secondary:#5F6978;
  --tools-dusk:     #6F829B;
  --tools-border:   #DED5C9;
  --tools-gold:     #B99A5E;

  --tools-radius: 18px;
  --tools-gap: clamp(1rem, 3vw, 1.75rem);

  background: var(--tools-ivory);
  color: var(--tools-navy);
  padding: clamp(1.5rem, 5vw, 3.5rem) 0 clamp(3rem, 8vw, 5rem);
  overflow-x: hidden;
}

.tools-shell {
  width: min(1120px, 100% - 2rem);
  margin-inline: auto;
}

/* --- Breadcrumb --------------------------------------------------------- */

.tools-crumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  font-size: .85rem;
  color: var(--tools-secondary);
}
.tools-crumb li + li::before { content: '/'; margin-right: .5rem; color: var(--tools-border); }
.tools-crumb a { color: var(--tools-dusk); text-decoration: none; }
.tools-crumb a:hover { text-decoration: underline; }

/* --- Header ------------------------------------------------------------- */

.tools-head { max-width: 46rem; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }

.tools-eyebrow {
  margin: 0 0 .75rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tools-gold);
}

.tools-head h1 {
  margin: 0 0 .75rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2rem, 5.5vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.tools-standfirst {
  margin: 0 0 1.25rem;
  font-size: clamp(1.02rem, 2.4vw, 1.18rem);
  line-height: 1.6;
  color: var(--tools-secondary);
}

/* --- Card grid ---------------------------------------------------------- */

.tools-grid {
  display: grid;
  gap: var(--tools-gap);
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0 0 var(--tools-gap);
  padding: 0;
}

@media (min-width: 40rem)  { .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem)  { .tools-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tools-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.15rem, 3vw, 1.6rem);
  background: var(--tools-surface);
  border: 1px solid var(--tools-border);
  border-radius: var(--tools-radius);
  transition: border-color .2s ease, transform .2s ease;
}

@media (prefers-reduced-motion: no-preference) {
  .tools-card:hover { transform: translateY(-2px); }
}
.tools-card:hover { border-color: var(--tools-dusk); }

/* The kind of thing it is, where a price badge used to sit. */
.tools-kind {
  margin: 0 0 .6rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tools-gold);
}

.tools-card-title {
  margin: 0 0 .5rem;
  font-family: Georgia, serif;
  font-size: 1.2rem;
  line-height: 1.3;
}

.tools-card-title a {
  color: var(--tools-navy);
  text-decoration: none;
}
.tools-card-title a:hover { color: var(--tools-terra); }

/* The whole card is clickable, but the link stays a real link — so it is
   reachable by keyboard, appears in a screen reader's link list, and can be
   opened in a new tab. A stretched pseudo-element does the rest. */
.tools-card-title a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.tools-card-title a:focus-visible {
  outline: 3px solid var(--tools-dusk);
  outline-offset: 3px;
  border-radius: 4px;
}

.tools-card-summary {
  margin: 0 0 1.25rem;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--tools-secondary);
}

.tools-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  margin: auto 0 0;
  font-size: .84rem;
}

/* What it asks of you — the thing someone actually weighs before starting. */
.tools-meta { color: var(--tools-secondary); }

.tools-action {
  font-weight: 700;
  color: var(--tools-terra);
}

/* --- Prose -------------------------------------------------------------- */

.tools-prose { max-width: 46rem; margin-top: var(--tools-gap); }
.tools-prose h2 { margin: 0 0 .85rem; font-family: Georgia, serif; font-size: clamp(1.3rem, 3.5vw, 1.7rem); }
.tools-prose p  { margin: 0 0 1rem; line-height: 1.7; color: var(--tools-secondary); }
.tools-prose h3 { margin: 1.25rem 0 .5rem; font-size: 1rem; }
.tools-prose ul { margin: 0 0 1rem; padding-left: 1.15rem; }
.tools-prose li { margin-bottom: .5rem; line-height: 1.65; color: var(--tools-secondary); }
.tools-prose a  { color: var(--tools-dusk); }

/* --- Narrow screens ----------------------------------------------------- */

@media (max-width: 22.5rem) {
  .tools-shell { width: calc(100% - 1.5rem); }
}