/* Free tools: the widget, the result page. Lexend/uni-core supplies the rest; the tiles live in
   tool-cards.css (the homepage and pSEO pages render them too). */

/* ------------------------------------------------------------------ theme gaps
   The Lexend theme CSS is PURGED: utilities nothing else on the site used were stripped, and the tool
   templates were written against the full set. Each class below was referenced by a tool template and
   defined nowhere, which is how the "Include" pills never wrapped (squeezed on desktop, off the card on a
   phone), the busy spinner never showed and the result page's outline buttons had no outline.
   ToolTemplateCssCoverageTest fails on the next one. */
.flex-wrap { flex-wrap: wrap !important; }
.btn-outline-gray { border: 1px solid #d1d5db; background: #fff; color: #1f2937; }
.btn-outline-gray:hover, .btn-outline-gray:focus-visible { background: #f3f4f6; color: #111827; }
.spinner-border { display: inline-block; width: 2rem; height: 2rem; vertical-align: -.125em; border: .25em solid currentColor; border-right-color: transparent; border-radius: 50%; animation: tool-spin .75s linear infinite; }
.spinner-border-sm { width: 1rem; height: 1rem; border-width: .2em; }
@keyframes tool-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ the form card
   Modelled on the "Live Demo" card of whisperbro.com: the brand's dark teal, a 1px dark border, a hard
   8px offset shadow, mint headings, white fields and a lime call to action. Values measured there. */
.tool-widget { position: relative; z-index: 2; }
.tool-widget--dark {
    --tw-bg: #194A54;
    --tw-title: #E0FFD3;
    --tw-text: #FFFFFF;
    --tw-muted: rgba(255, 255, 255, .78);
    --tw-lime: #E2FF5E;
    --tw-lime-soft: #F3FFBA;
    --tw-ink: #16404B;
    --tw-error: #FCA5A5;
    background-color: var(--tw-bg);
    color: var(--tw-text);
    border: 1px solid #212529;
    border-radius: 16px;
    box-shadow: 6px 6px 0 0 #000;
    padding: 1rem;
}
@media (min-width: 576px) { .tool-widget--dark { padding: 1.5rem; box-shadow: 8px 8px 0 0 #000; } }
@media (min-width: 992px) { .tool-widget--dark { padding: 2.5rem; } }

.tool-form-col { width: 100%; max-width: 820px; margin-inline: auto; }
.tool-widget--dark .tool-label { color: var(--tw-title); }
.tool-widget--dark .tool-required { color: var(--tw-lime); }
.tool-widget--dark .tool-help { color: var(--tw-muted); font-weight: 500; }

/* Fields: white, rounded like the reference's textarea. The theme pins .form-control's border, background,
   colour and focus ring with !important — hence the variables and the !important focus rule. */
.tool-widget .form-control, .tool-widget .form-select { --border-color: rgba(0, 0, 0, .28); border: 1px solid var(--border-color); border-radius: 16px; padding: .75rem 1rem; font-size: 1rem; width: 100%; background: #fff; color: #111827; }
.tool-widget .form-control:focus, .tool-widget .form-select:focus { outline: none; border-color: var(--tw-lime, #4f46e5) !important; box-shadow: 0 0 0 3px rgba(226, 255, 94, .55) !important; }
.tool-widget textarea.form-control { min-height: 130px; resize: vertical; }
.tool-widget .tool-color { width: 120px; height: 52px; padding: .35rem; border-radius: 12px; cursor: pointer; }
/* An invalid or over-long field. --border-color, not border-color: the theme's !important reads the variable. */
.tool-field.has-error .form-control, .tool-field.has-error .form-select, .tool-field.is-over .form-control { --border-color: #dc2626; border-color: #dc2626; box-shadow: 0 0 0 2px rgba(252, 165, 165, .7); }
.tool-field-count { text-align: right; font-variant-numeric: tabular-nums; color: #6b7280; }
.tool-widget--dark .tool-field-count { color: var(--tw-muted); }
.tool-field-count.is-over, .tool-widget--dark .tool-field-count.is-over { color: var(--tw-error, #dc2626); font-weight: 700; }
.tool-field-error { color: #b91c1c; }
.tool-widget--dark .tool-field-error { color: var(--tw-error); font-weight: 600; }
.tool-widget--dark .tool-field-error::before { content: '⚠ '; }
.tool-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Multi-select chips: an equal-width grid, so a long label wraps inside its own chip instead of
   squeezing the row (1 per row on a phone, 3 on a desktop card). */
.tool-chip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .5rem; }
.tool-toggle { display: flex; align-items: center; gap: .625rem; min-height: 44px; padding: .55rem .9rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .38); color: #fff; font-size: .95rem; line-height: 1.3; cursor: pointer; user-select: none; transition: background .15s, border-color .15s, color .15s; }
.tool-toggle input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--tw-lime, #E2FF5E); cursor: pointer; }
.tool-toggle:hover { border-color: var(--tw-title, #E0FFD3); background: rgba(224, 255, 211, .08); }
.tool-toggle:has(input:focus-visible) { outline: 2px solid var(--tw-lime, #E2FF5E); outline-offset: 2px; }
.tool-toggle:has(input:checked) { background: var(--tw-lime, #E2FF5E); border-color: var(--tw-lime, #E2FF5E); color: var(--tw-ink, #16404B); font-weight: 600; }

/* Examples: mint outline chips, centered above the call to action. */
.tool-examples { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; }
.tool-example { border: 1px solid rgba(224, 255, 211, .6); background: transparent; color: var(--tw-title, #16404B); border-radius: 999px; padding: .3rem .9rem; font-weight: 600; cursor: pointer; transition: background .15s; }
.tool-example:hover, .tool-example:focus-visible { background: rgba(224, 255, 211, .14); }

.tool-submit-row { display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; }
/* The call to action: the reference card's lime button, as a pill, with the brand's dark teal label —
   the same pairing as the result page's "Build it now" (.tool-build-btn: tertiary fill, primary text). */
.tool-cta, .tool-cta:visited { background-color: #E6FF76; background-image: linear-gradient(135deg, var(--tw-lime-soft, #F3FFBA) 0%, var(--tw-lime, #E2FF5E) 100%); color: var(--color-primary, #16404B); border: 1px solid transparent; box-shadow: 0 4px 15px rgba(226, 255, 94, .4); transition: filter .15s, transform .15s; }
.tool-cta:hover, .tool-cta:focus-visible { color: var(--color-primary, #16404B); filter: brightness(1.05); transform: translateY(-1px); }
/* Busy: tools.js disables the button while a run starts ("Working…" + spinner). The theme's
   `.btn:disabled` repaints any disabled button with --bs-btn-disabled-color (#fff), its own background and
   opacity .65 — white on pale lime, unreadable. Three classes outrank it; the button keeps its colours, and
   the spinner (currentColor) and a quieter glow are what say it is working. */
.btn.tool-cta:disabled, .btn.tool-cta.disabled { color: var(--color-primary, #16404B); background-color: #E6FF76; background-image: linear-gradient(135deg, var(--tw-lime-soft, #F3FFBA) 0%, var(--tw-lime, #E2FF5E) 100%); border-color: transparent; opacity: .9; box-shadow: 0 2px 8px rgba(226, 255, 94, .25); filter: none; transform: none; }
.tool-outline-btn { border: 1px solid rgba(224, 255, 211, .6); background: transparent; color: var(--tw-title, #16404B); }
.tool-outline-btn:hover, .tool-outline-btn:focus-visible { background: rgba(224, 255, 211, .14); color: var(--tw-title, #16404B); }

/* Error and limit boxes: light on the white result page, translucent tints on the dark card. */
.tool-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.tool-limit { background: #fffbeb; border: 1px solid #fcd34d; }
.tool-widget--dark .tool-error { background: rgba(220, 38, 38, .18); color: #FECACA; border-color: rgba(252, 165, 165, .5); }
.tool-widget--dark .tool-limit { background: rgba(245, 158, 11, .14); border-color: rgba(253, 230, 138, .55); color: rgba(255, 255, 255, .9); }
.tool-widget--dark #tool-limit-title { color: #FDE68A; }
/* A failed result: its message and "Try again" side by side, one under the other on a phone. */
.tool-error-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; }
.tool-retry, .tool-retry:visited { background: #fff; color: #991b1b; border: 1px solid #fca5a5; white-space: nowrap; }
.tool-retry:hover, .tool-retry:focus-visible { background: #fee2e2; color: #7f1d1d; border-color: #f87171; }
.tool-retry:disabled { opacity: .7; }

/* Spreadsheet dropzone; the preview table sits on a white inset so it stays a table. */
.tool-dropzone { cursor: pointer; transition: background .15s; border: 1px dashed #c7cbd4; }
.tool-dropzone.is-over { background: #eef2ff; }
.tool-widget--dark .tool-dropzone { border: 2px dashed rgba(224, 255, 211, .5); background: rgba(255, 255, 255, .06); }
.tool-widget--dark .tool-dropzone.is-over { background: rgba(226, 255, 94, .14); border-color: var(--tw-lime); }
.tool-widget--dark .tool-sheet-preview { background: #fff; color: #111827; border-radius: 12px; padding: .5rem; overflow-x: auto; }
.tool-sheet-preview table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.tool-sheet-preview th, .tool-sheet-preview td { border: 1px solid #e5e7eb; padding: .25rem .4rem; text-align: left; white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.tool-sheet-preview th small { display: block; color: #6b7280; font-weight: 400; }

/* ROI: the result is a light inset on the dark card. */
.tool-roi-result { background: #F2F6F6; color: #16404B; border-radius: 16px; }
.tool-roi-bars .bar-row { display: grid; grid-template-columns: 120px 1fr 90px; gap: .5rem; align-items: center; font-size: .85rem; }
.tool-roi-bars .bar-row > div { background: #E0FFD3; border-radius: 999px; }
.tool-roi-bars .bar { height: 10px; border-radius: 999px; background: #16404B; }
.tool-roi-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }

/* ------------------------------------------------------------------ the result page */
.tool-result { min-height: 200px; }
.tool-markdown { font-size: 1rem; line-height: 1.65; }
.tool-markdown h2 { margin-top: 1.6rem; font-size: 1.35rem; }
.tool-markdown h3 { margin-top: 1.2rem; font-size: 1.1rem; }
.tool-markdown table { width: 100%; border-collapse: collapse; margin: .75rem 0; font-size: .92rem; display: block; overflow-x: auto; }
.tool-markdown th, .tool-markdown td { border: 1px solid #e5e7eb; padding: .45rem .6rem; text-align: left; vertical-align: top; }
.tool-markdown th { background: #f8fafc; }
/* Code blocks — the Build prompt, SQL, the PWA files. The theme paints every <pre> light with
   !important and styles `pre code` like INLINE code: a translucent background per line at a 24px line
   height. This file used to pair that light block with light text, so the Build prompt showed as grey
   bars and could only be read by selecting it. One light block, dark text, no per-line background. */
.tool-markdown pre { background-color: #f6f8fa !important; color: #1f2937; border: 1px solid #e5e7eb; padding: 1rem 5rem 1rem 1rem; border-radius: 10px; overflow-x: auto; font-size: .85rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; position: relative; }
.tool-markdown pre code { display: block; background: none !important; padding: 0; border-radius: 0; color: inherit; font-size: inherit; font-style: normal; line-height: inherit; white-space: inherit; }
.tool-markdown pre.mermaid { background-color: #fff !important; color: inherit; text-align: center; padding: 1rem; }
.tool-markdown pre .tool-copy-block { position: absolute; top: .5rem; right: .5rem; font-size: .7rem; line-height: 1.4; padding: .2rem .6rem; border-radius: 999px; border: 1px solid #475569; background: #1e293b; color: #e2e8f0; cursor: pointer; }
.tool-markdown blockquote { border-left: 3px solid #4f46e5; margin: .75rem 0; padding: .25rem .9rem; color: #475569; background: #f8fafc; }
.tool-markdown .tool-cursor::after { content: '▍'; animation: tool-blink 1s steps(1) infinite; color: #4f46e5; }
@keyframes tool-blink { 50% { opacity: 0; } }
.tool-frame-wrap { background: #f1f5f9; }
.tool-frame-wrap iframe { width: 100%; height: 720px; border: 0; background: #fff; }
.tool-raw { white-space: pre-wrap; word-break: break-word; max-height: 360px; overflow: auto; background: #0f172a; color: #94a3b8; padding: 1rem; border-radius: 10px; }
.tool-handoff { box-shadow: 0 10px 30px rgba(79,70,229,.25); }
#result-handoff .tool-handoff-title { color: rgb(224, 255, 211) !important; }
/* The card is the primary colour, so the button carries the tertiary one — visible at rest, not only
   on hover as btn-primary was. */
#result-handoff .tool-build-btn { background-color: var(--color-tertiary, #e2ff5e); color: var(--color-primary, #16404b); border: 1px solid transparent; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.18); transition: filter .15s, transform .15s; }
#result-handoff .tool-build-btn:hover, #result-handoff .tool-build-btn:focus-visible { background-color: var(--color-tertiary, #e2ff5e); color: var(--color-primary, #16404b); filter: brightness(1.06); transform: translateY(-1px); }
#result-handoff .tool-build-btn:disabled { opacity: .7; }
.tool-action { white-space: nowrap; }
.tool-input-echo dd { margin: 0 0 .5rem 0; }
.tool-screenshot { max-width: 100%; border-radius: 10px; border: 1px solid #e5e7eb; margin-bottom: 1rem; }
@media (max-width: 640px) { .tool-frame-wrap iframe { height: 520px; } }
/* Listing page closing CTA: the theme gives every heading its dark colour, which vanishes on the primary band. */
.tools-listing-cta-title { color: rgb(224, 255, 211) !important; }