/* ============================================================================
   LinkedIQ - shared chassis for /tools/* pages
   ----------------------------------------------------------------------------
   Every page under src/pages/tools/ used to carry its own near-identical copy
   of this block inside a <style is:global> in its head slot: six copies, six
   separate CSS bundles, and any change meant editing six files.

   This file is the single source. It is linked once from
   src/layouts/ToolPage.astro, BEFORE that layout's <slot name="head" />, so a
   page can still override anything here from its own <style is:global>.

   Colours come from --ss-* tokens only (see public/assets/styles.css). Mono
   micro-labels are 11px minimum - see docs/theme/design-system.md.

   Bump the ?v= query in ToolPage.astro when you edit this file.
   ========================================================================== */


/* ---- Hero & breadcrumb ------------------------------------------------- */
.tool-hero { padding:64px 0 48px; border-bottom:1px solid var(--ss-line-soft); }
.breadcrumb { display:flex; align-items:center; gap:6px; font-family:var(--ss-font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ss-text-muted); margin-bottom:28px; }
.breadcrumb a { color:var(--ss-text-muted); text-decoration:none; }
.breadcrumb a:hover { color:var(--ss-accent); }
.breadcrumb-sep { opacity:.4; }
.tool-hero h1 { font-family:var(--ss-font-display); font-size:clamp(28px,4.5vw,48px); font-weight:400; letter-spacing:-.022em; line-height:1.1; margin-bottom:16px; }
.tool-hero h1 em { font-style:italic; color:var(--ss-accent); }
.tool-hero .lede { font-size:15px; color:var(--ss-text-2); line-height:1.65; max-width:520px; margin-bottom:20px; }
.hero-meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.badge-free { display:inline-flex; align-items:center; gap:5px; font-family:var(--ss-font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ss-good); background:var(--ss-good-soft); border:1px solid rgba(122,162,136,.28); padding:4px 10px; border-radius:999px; }
.badge-free::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--ss-good); display:inline-block; }
.hero-stat { font-family:var(--ss-font-mono); font-size:11px; color:var(--ss-text-muted); letter-spacing:.04em; }

/* ---- Workspace shell --------------------------------------------------- */
.tool-workspace { padding:56px 0 80px; }
.workspace-layout { display:grid; grid-template-columns:1fr 320px; gap:40px; align-items:start; }
.tool-card { background:var(--ss-surface); border:1px solid var(--ss-line); border-radius:var(--ss-r-4); padding:36px; }
.tool-card-title { font-family:var(--ss-font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ss-text-muted); margin-bottom:24px; }

/* ---- Form controls ----------------------------------------------------- */
.field-group { margin-bottom:18px; }
.field-group label { display:flex; justify-content:space-between; align-items:baseline; font-size:11px; font-family:var(--ss-font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ss-text-2); margin-bottom:7px; }
.field-group textarea::placeholder { color:var(--ss-text-subtle); }
.field-hint { font-size:11px; color:var(--ss-text-muted); margin-top:5px; line-height:1.5; }
.char-count { font-family:var(--ss-font-mono); font-size:11px; color:var(--ss-text-muted); text-transform:none; letter-spacing:.02em; }
.generate-btn { width:100%; padding:13px 24px; font-size:14px; margin-top:4px; justify-content:center; }
.generate-btn:disabled { opacity:.45; cursor:not-allowed; }

/* ---- Loading, errors & rate limiting ----------------------------------- */
.loading-state { display:none; text-align:center; padding:48px 0; }
.loading-text { font-family:var(--ss-font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ss-text-muted); }
.error-banner { display:none; background:rgba(196,98,98,.08); border:1px solid rgba(196,98,98,.28); border-radius:var(--ss-r-2); padding:13px 16px; font-size:13px; color:var(--ss-critical); margin-top:16px; line-height:1.5; }
.rate-limit-banner { display:none; background:linear-gradient(135deg,rgba(200,161,99,.08) 0%,rgba(200,161,99,0) 100%); border:1px solid var(--ss-accent-border); border-radius:var(--ss-r-3); padding:20px 22px; margin-top:16px; }
.rate-limit-banner .rl-eyebrow { font-family:var(--ss-font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ss-accent); margin-bottom:8px; }
.rate-limit-banner .rl-title { font-size:14px; font-weight:500; color:var(--ss-text); margin-bottom:6px; }
.rate-limit-banner .rl-msg { font-size:13px; color:var(--ss-text-2); line-height:1.6; margin-bottom:16px; }
.rate-limit-banner .rl-reset { font-family:var(--ss-font-mono); font-size:11px; color:var(--ss-text-muted); margin-bottom:16px; }
.usage-counter { display:none; font-family:var(--ss-font-mono); font-size:11px; letter-spacing:.06em; color:var(--ss-text-muted); margin-top:12px; padding-top:12px; border-top:1px solid var(--ss-line-soft); }
.usage-dots { display:inline-flex; gap:4px; margin-right:8px; vertical-align:middle; }
.usage-dot { width:7px; height:7px; border-radius:50%; background:var(--ss-line); display:inline-block; transition:background 200ms; }
.usage-dot.used { background:var(--ss-accent); }

/* ---- Results shell ----------------------------------------------------- */
.tool-results { display:none; }
.results-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--ss-line-soft); }
.results-label { font-family:var(--ss-font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ss-text-muted); }
.results-reset { font-size:12px; color:var(--ss-accent); cursor:pointer; background:none; border:none; font-family:var(--ss-font-sans); padding:0; text-decoration:underline; text-underline-offset:3px; }
.results-cta { background:linear-gradient(135deg,rgba(200,161,99,.07) 0%,rgba(200,161,99,0) 100%); border:1px solid var(--ss-accent-border); border-radius:var(--ss-r-3); padding:28px; }
.results-cta .cta-eyebrow { font-family:var(--ss-font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ss-accent); margin-bottom:10px; }
.results-cta h3 { font-family:var(--ss-font-display); font-size:20px; font-weight:400; letter-spacing:-.015em; color:var(--ss-text); margin-bottom:10px; line-height:1.3; }
.results-cta p { font-size:13px; color:var(--ss-text-2); line-height:1.65; margin-bottom:20px; }

/* ---- Sidebar ----------------------------------------------------------- */
.sidebar-card { background:var(--ss-surface); border:1px solid var(--ss-line); border-radius:var(--ss-r-3); padding:24px; margin-bottom:16px; }
.sidebar-card-title { font-family:var(--ss-font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ss-text-muted); margin-bottom:16px; }
.tip-list { list-style:none; display:flex; flex-direction:column; gap:12px; }
.tip-item { font-size:13px; color:var(--ss-text-2); line-height:1.6; padding-left:16px; position:relative; }

/* ---- How it works ------------------------------------------------------ */
.how-section { padding:64px 0; border-top:1px solid var(--ss-line-soft); }
.how-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px; }
.how-step { padding:24px; background:var(--ss-surface); border:1px solid var(--ss-line); border-radius:var(--ss-r-3); }
.how-step-num { font-family:var(--ss-font-mono); font-size:11px; letter-spacing:.12em; color:var(--ss-accent); text-transform:uppercase; margin-bottom:14px; }
.how-step h3 { font-size:14px; font-weight:500; color:var(--ss-text); margin-bottom:8px; }
.how-step p { font-size:13px; color:var(--ss-text-2); line-height:1.65; }

/* ---- FAQ --------------------------------------------------------------- */
.faq-section { padding:64px 0; border-top:1px solid var(--ss-line-soft); }
.faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:40px; }

/* ---- Related tools ----------------------------------------------------- */
.more-tools-section { padding:64px 0; border-top:1px solid var(--ss-line-soft); }
.tools-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; margin-top:32px; }
.tool-link-card { display:block; padding:20px 22px; background:var(--ss-surface); border:1px solid var(--ss-line); border-radius:var(--ss-r-3); text-decoration:none; transition:border-color 180ms; }
.tool-link-card:hover { border-color:var(--ss-accent); }
.tool-link-card.current { border-color:var(--ss-accent); background:linear-gradient(135deg,rgba(200,161,99,.06),rgba(200,161,99,0)); pointer-events:none; }
.tool-link-tag { font-family:var(--ss-font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ss-text-muted); margin-bottom:8px; }
.tool-link-card.current .tool-link-tag { color:var(--ss-accent); }
.tool-link-name { font-size:13px; font-weight:500; color:var(--ss-text); margin-bottom:5px; }
.tool-link-desc { font-size:12px; color:var(--ss-text-2); line-height:1.55; }

/* ---- Closing CTA ------------------------------------------------------- */
.cta-band { padding:80px 0; border-top:1px solid var(--ss-line-soft); text-align:center; }
.cta-band h2 { font-family:var(--ss-font-display); font-size:clamp(24px,3.5vw,38px); font-weight:400; letter-spacing:-.02em; color:var(--ss-text); margin-bottom:14px; }
.cta-band h2 em { font-style:italic; color:var(--ss-accent); }
.cta-band p { font-size:15px; color:var(--ss-text-2); margin-bottom:28px; max-width:480px; margin-left:auto; margin-right:auto; line-height:1.65; }
.cta-band .cta-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ---- Misc -------------------------------------------------------------- */
@media(max-width:900px) { .workspace-layout { grid-template-columns:1fr; } }
.overall-score { display:flex; align-items:center; gap:24px; padding:24px; background:var(--ss-surface-2); border:1px solid var(--ss-line-soft); border-radius:var(--ss-r-3); margin-bottom:20px; }
.score-badge-weak { color:var(--ss-critical); background:rgba(196,98,98,.08); border:1px solid rgba(196,98,98,.25); }
.score-badge-avg { color:var(--ss-warn); background:rgba(200,161,80,.1); border:1px solid rgba(200,161,80,.25); }
.score-badge-good { color:var(--ss-accent); background:var(--ss-accent-soft); border:1px solid var(--ss-accent-border); }
.score-badge-strong { color:var(--ss-good); background:var(--ss-good-soft); border:1px solid rgba(122,162,136,.3); }
.score-bar-fill { height:100%; border-radius:2px; transition:width 500ms ease; }
.fill-weak { background:var(--ss-critical); }
.fill-avg { background:var(--ss-warn); }
.fill-good { background:var(--ss-accent); }
.fill-strong { background:var(--ss-good); }
@media(max-width:700px) { .faq-grid { grid-template-columns:1fr; } }