/* tools.css — layout for the standalone tool pages: the two hub directories
   (all-nickname/, all-tools/) and every individual tool folder inside them.
   .tool-page--hub gets the 3-up grid (no sidebar); .tool-page--single gets the
   2-column .stack/.side layout shared with the homepage (see css/Home-style.css). */
/* The SPA shell mounts every alt-view route INSIDE <main class="page">, which carries the
   card feed's own gutters. .tool-page and legal/info page containers carry matching gutters, because
   on a cold load they ARE the <main>. Nested, the two stack: 28px side padding instead of
   14, and 52px above the footer instead of 32 — the same markup rendering wider gutters
   and a deeper footer gap over SPA navigation than over a hard refresh. js/app.js's
   showView() adds .is-alt for exactly as long as an alt route is showing. */
.page.is-alt { padding: 0; }

/* 760px was a leftover from when this was a single narrow tool page. It capped both hubs
   and every tool page from 760px up to the 1024px breakpoint, which is what made the card
   grid render conspicuously narrow on a tablet. The ≥1024px modifiers below still set the
   hub and single-tool widths; this is only the floor they build on. */
.tool-page { max-width: 1200px; margin: 0 auto; padding: 10px 14px 20px; }
/* The error branch of renderToolView(). One line of text is not enough for the footer to
   sit under once the boot reserve is scoped to the pending state — a short error view still needs a small height floor. Short, but not collapsed. */
.tool-page--empty { min-height: 60vh; }
.tool-head { margin: 4px 0 16px; }
.tool-title { font-size: 22px; font-weight: 800; letter-spacing: -.4px; margin: 0; }
.tool-path { font-size: 12px; font-weight: 600; color: var(--c-faint); margin-top: 4px; }
.tool-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 16px; padding: 14px; }
.tool-card .kicker { color: var(--c-faint); }
.tool-input { width: 100%; height: 44px; padding: 0 12px; border: 1.5px solid var(--c-line); border-radius: var(--r-md); background: var(--c-bg); font-size: 16px; font-weight: 700; outline: none; }
.tool-input:focus { border-color: var(--c-green); }
.tool-out { display: grid; gap: 8px; margin-top: 14px; }
.tool-row { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--c-border); padding-top: 10px; }
.tool-row-text { flex: 1; min-width: 0; text-align: center; font-size: 18px; line-height: 1.35; padding: 0 6px; white-space: normal; overflow-wrap: anywhere; word-break: break-word; overflow: hidden; font-family: 'Times New Roman', Times, serif, system-ui, sans-serif; }
.tool-note { margin: 10px 2px 0; font-size: 12px; line-height: 1.55; color: var(--c-dim); }
.tool-note:empty { display: none; }
.tool-row-n { flex: none; font-size: 10px; font-weight: 800; color: var(--c-dim); font-variant-numeric: tabular-nums; }
.tool-copy { flex: none; height: 30px; padding: 0 12px; border: 1.5px solid var(--c-line); border-radius: var(--r-sm); background: var(--c-surface); font-size: 11px; font-weight: 800; transition: border-color .14s ease, color .14s ease; }
.tool-copy:hover { border-color: var(--c-green); color: var(--c-green); }
.tool-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
/* A hub DIRECTORY card — the tappable tile on /all-nickname and /all-tools. This used to
   be called .tool-card too, i.e. the same class as the generator card above, and being
   second in the file it won: every individual tool page's input card silently picked up
   centre-alignment, a column flex context and 18px/16px padding meant for a tile. Two
   components, two names. Centre-aligned by design: icon, name, blurb and button all stack
   on the card's axis, no slug/path line. */
.tool-dir-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 18px 16px; border: 1px solid var(--c-hair); border-radius: var(--r-lg); background: var(--c-surface); color: var(--c-text); transition: transform .18s var(--ease), border-color .18s ease, box-shadow .18s ease; }
.tool-dir-card:hover { transform: translateY(-2px); border-color: var(--c-green); box-shadow: 0 10px 24px -12px rgba(16, 24, 40, .18); color: var(--c-text); }
.tool-card-head { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tool-ico { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: var(--r-md); background: var(--c-green-t); color: var(--c-green); font-size: 20px; }
.tool-dir-card b { display: block; font-size: 16.5px; font-weight: 800; letter-spacing: -.2px; }
.tool-desc { font-size: 13px; line-height: 1.6; color: var(--c-muted); margin: 0; text-wrap: pretty; }
.tool-open { align-self: center; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 18px; border: 1.5px solid var(--c-green); border-radius: var(--r-md); background: var(--c-green-t); color: var(--c-green); font-size: 13px; font-weight: 800; transition: background-color .16s ease, color .16s ease; }
.tool-dir-card:hover .tool-open { background: var(--c-green); color: #fff; }
/* The hub directory's own SEO article, injected from all-nickname/content.html or
   all-tools/content.html. Centred on the page with its own reading measure and safe side
   padding — the two hub pages have no sidebar, so the article must not inherit a feed
   column's left-hand alignment. (Individual tool pages are different: their content.html
   sits inside the .stack layout's main column instead, using the shared .seo class from
   css/Home-style.css — see the .tool-page--single rules below.) */
.tool-seo { margin: 18px auto 0; max-width: 720px; padding: 0 4px; }
.tool-seo:empty { display: none; }
.tool-seo h2 { font-size: 17px; font-weight: 800; letter-spacing: -.3px; margin: 22px 0 8px; }
.tool-seo h3 { font-size: 14.5px; font-weight: 800; margin: 18px 0 6px; }
.tool-seo p, .tool-seo li { font-size: 13.5px; line-height: 1.75; color: var(--c-muted); text-wrap: pretty; }
.tool-seo p { margin: 0 0 10px; }
.tool-seo ul { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 5px; }
.tool-seo strong { color: var(--c-text); font-weight: 700; }
@media (min-width: 1024px) {
  .tool-seo { padding: 0 20px; }
}
/* The grid went straight from one column to three at 1024px, so every width in between
   rendered one very wide card per row. This is the missing tier; it makes the card width
   a function of the viewport alone, decided by the stylesheet before any script runs. */
@media (min-width: 640px) {
  .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (min-width: 1024px) {
  .tool-page { padding: 18px 22px 24px; }
  /* Hub pages (/all-nickname, /all-tools): wide enough for a balanced 3-up grid without
     the cards looking stretched thin. No sidebar on these two pages, so the container
     just needs to be its own comfortable reading/browsing width. Fixed-size (not 1fr)
     columns + auto-fit + centering is deliberate: both hubs currently list only 2 tools
     each, and a plain repeat(3, 1fr) grid would stretch those 2 cards to fill 3 columns'
     worth of width with an empty gap where the 3rd column should be — auto-fit collapses
     the unused track instead, so 2 cards centre as a pair and 3+ cards fill a proper
     3-up row, in both cases at the same comfortable card width. minmax's 300px floor is
     sized so at most 3 tracks ever fit inside .tool-page--hub's 1100px, so this never
     silently becomes a 4-up grid on a wider screen. */
  .tool-page--hub { max-width: 1100px; }
  .tool-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 340px)); justify-content: center; gap: 16px; }
  /* Individual tool pages (/ff-bio-style, /ff-color-picker, …): same .stack/.side/
     .side-mobile 2-column mechanics as the homepage (see css/Home-style.css), but its
     own narrower 1200px width rather than the homepage's own 1440px — at 1440 the main
     column (minus the 336px sidebar and 22px gap) left a single-input tool card sitting
     in roughly 1000px of column with most of it empty; 1200px keeps the same layout but
     without that leftover space. */
  .tool-page--single { max-width: 1200px; }
}