/* ════════════════════════════════════════════════════════════════════════════
   RECATOOLS — tool-page.css — Shared template for all tool pages
   Import this in every tool's index.html BEFORE the tool's own style.css.
   Tool-specific overrides live in style.css.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Design tokens ───────────────────────────────────────────────────────────
   v2 BRIGHT THEME — aligned with resources/css/recatools-design.css (Phase 11).
   Class names are unchanged so existing tool HTMLs render without edits;
   only the values shift to the editorial palette. */
:root {
    /* Brand — Signal orange CTAs */
    --accent:       #E8472F;
    --accent-h:     #D43E27;
    --accent-lt:    #FFF5F2;
    --accent-border:#FBD9CE;

    /* Page — pure white background per SKILL critical rule #1 */
    --bg:           #FFFFFF;
    --card:         #FFFFFF;
    --divider:      #EEF0F2;

    /* Text — navy + slate per recatools-design.css tokens */
    --text-dark:    #0D1B2A;
    --text-mid:     #2D3748;
    --text-body:    #64748B;
    --text-muted:   #94A3B8;
    --border:       #E2E4E8;

    /* Fonts — IBM Plex (matches v2 site chrome) */
    --font-serif:   'IBM Plex Serif', Georgia, 'Times New Roman', serif;
    --font-sans:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

    /* Sizing */
    --page-max:     900px;   /* tool page container */
    --text-max:     720px;   /* readable line length */
    --nav-h:        52px;   /* v2 mockup: 52px on tool pages (4px shorter than other pages) */

    /* Radii */
    --r-lg:         16px;
    --r-md:         12px;
    --r-sm:         8px;
    --r-pill:       999px;

    /* Shadows */
    --shadow-card:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-hover: 0 4px 16px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
}

/* ── Reset ───────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family:            var(--font-sans);
    background:             var(--bg);
    color:                  var(--text-body);
    font-size:              15px;
    line-height:            1.7;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; }
img { max-width: 100%; display: block; }

/* ── Page layout ─────────────────────────────────────────────────────────────── */
.tool-page-container {
    max-width: var(--page-max);
    margin:    0 auto;
    padding:   0 1.5rem 4rem;
}

/* Sections: consistent 64px rhythm */
.tool-section {
    padding:    64px 0;
    border-top: 1px solid var(--divider);
}
.tool-section:first-of-type { border-top: none; }

/* Narrow text column (720px) */
.text-col {
    max-width: var(--text-max);
    margin:    0 auto;
}

/* ── Navigation (v2 chrome) ──────────────────────────────────────────────────
   Tool HTMLs use the same v2 site nav as the rest of the bright theme:
   site-stripe + [RT] SVG logo + nav-link tabs + nav-search-trigger. */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 28px; }
@media (max-width: 640px) { .wrap { padding: 0 16px; } }

.site-stripe { height: 4px; background: var(--accent); }
.site-nav {
    background: #fff; border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 200;
}
.nav-inner {
    display: flex; align-items: center; height: var(--nav-h); gap: 0;
}
.site-logo {
    display: flex; align-items: center; gap: 10px;
    margin-right: 24px; flex-shrink: 0; text-decoration: none;
}
.logo-wordmark {
    font-family: var(--font-sans); font-size: 22px; font-weight: 500;
    letter-spacing: -0.4px;
}
.logo-reca  { color: var(--text-dark); }
.logo-tools { color: var(--accent); font-style: normal; }

/* Nav links — sit AFTER the search bar; flex:1 + justify-content:flex-end pushes right. */
.nav-links {
    display: none; gap: 2px; flex: 1;
    margin-left: 16px;
}
@media (min-width: 900px) { .nav-links { display: flex; } }
.nav-link {
    font-size: 13px; color: var(--text-body); padding: 6px 13px;
    border-radius: 6px; transition: all .15s; text-decoration: none;
    white-space: nowrap;
}
.nav-link:hover  { color: var(--text-dark); background: #F7F8F9; }
.nav-link.active { color: var(--text-dark); font-weight: 500; }
.nav-link-badge {
    display: inline-block; background: var(--accent); color: #fff;
    font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 4px;
    vertical-align: middle; margin-left: 5px; letter-spacing: 0.04em;
    text-transform: uppercase;
}
.nav-right { margin-left: auto; }
.nav-search-trigger {
    display: flex; align-items: center; gap: 8px;
    background: #F7F8F9; border: 1px solid var(--border);
    border-radius: 7px; padding: 7px 14px; font-size: 13px;
    color: var(--text-muted); font-family: var(--font-mono);
    cursor: text; transition: all .15s; text-decoration: none;
    position: relative; min-width: 220px;
}
@media (min-width: 900px) { .nav-search-trigger { min-width: 280px; } }
.nav-search-trigger:hover,
.nav-search-trigger:focus-within { border-color: #CDD0D6; background: #EEF0F2; }
.nav-search-trigger:focus-within { border-color: var(--accent); background: #fff; }
.nav-search-trigger svg { width: 14px; height: 14px; stroke: var(--text-muted); flex-shrink: 0; }
.nav-search-trigger input[type="search"] {
    flex: 1; min-width: 0;
    border: none; background: transparent; outline: none;
    padding: 0; margin: 0;
    font: inherit; color: var(--text-dark); font-family: var(--font-sans);
}
.nav-search-trigger input[type="search"]::placeholder { color: var(--text-muted); font-family: var(--font-mono); }
.nav-search-trigger input[type="search"]::-webkit-search-cancel-button { display: none; }
.nav-search-trigger kbd {
    font-size: 10px; background: #fff; border: 1px solid var(--border);
    border-radius: 3px; padding: 1px 5px; font-family: var(--font-mono);
    flex-shrink: 0;
}
.nav-search-trigger:focus-within kbd { display: none; }
.nav-clock .nc-zone { display: inline-flex; align-items: center; gap: 5px; }
.nav-clock .nc-city { color: var(--text-body); font-weight: 500; }
.nav-clock .nc-time { color: var(--text-dark); font-weight: 500; font-variant-numeric: tabular-nums; }
.nav-clock .nc-sep  { color: #CDD0D6; }
.nav-clock .nc-date { color: var(--text-body); }

/* Legacy nav rules retained for any non-migrated tool that hasn't run the v2 chrome rewrite */
.nav-logo {
    font-family: var(--font-sans); font-weight: 800; font-size: 1.125rem;
    letter-spacing: -0.02em; color: var(--text-dark);
}
.nav-logo span { color: var(--accent); }
.nav-links a   { font-size: 0.875rem; font-weight: 500; color: var(--text-body); text-decoration: none; white-space: nowrap; }
.nav-links a:hover { color: var(--text-dark); }
.nav-cta {
    background: var(--accent); color: #fff !important;
    padding: 0.375rem 1rem; border-radius: var(--r-pill); font-weight: 600;
}
.nav-cta:hover { background: var(--accent-h) !important; }
.nav-search { flex: 1; max-width: 440px; margin: 0 1rem; }
.nav-search form {
    display: flex; align-items: center;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: var(--r-pill); padding: 0 0.5rem 0 1rem;
    transition: border-color 0.15s;
}
.nav-search form:focus-within { border-color: var(--accent); }
.nav-search input {
    flex: 1; border: none; background: transparent;
    font-size: 0.9rem; color: var(--text-dark); outline: none;
    padding: 0.5rem 0; font-family: var(--font-sans);
}
.nav-search input::placeholder { color: var(--text-muted); }
.nav-search button {
    background: var(--accent); color: #fff; border: none;
    border-radius: var(--r-pill); padding: 0.35rem 0.875rem;
    font-size: 0.8125rem; font-weight: 600; cursor: pointer;
    transition: background 0.15s; font-family: var(--font-sans);
}
.nav-search button:hover { background: var(--accent-h); }

/* ── Breadcrumb ──────────────────────────────────────────────────────────────── */
.breadcrumb {
    display:     flex;
    align-items: center;
    gap:         0.375rem;
    padding:     1rem 0 0.5rem;
    font-size:   0.8125rem;
    color:       var(--text-muted);
    flex-wrap:   wrap;
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb-sep     { opacity: 0.5; }
.breadcrumb-current { color: var(--text-body); font-weight: 500; }

/* ── COMPACT TOOL STRIP (v2) — sticky 44px below 60px nav ───────────────────── */
.tool-strip {
    background: #fff;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: var(--nav-h);
    z-index: 199;
}
.tool-strip-inner {
    display: flex;
    align-items: center;
    height: 44px;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.tool-strip-inner::-webkit-scrollbar { display: none; }

.ts-breadcrumb {
    display: none;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    gap: 5px; align-items: center; white-space: nowrap;
    flex-shrink: 0; margin-right: 12px;
}
.ts-breadcrumb a       { color: var(--text-muted); transition: color .15s; }
.ts-breadcrumb a:hover { color: var(--text-mid); }
.ts-breadcrumb .sep    { color: var(--border); }
@media (min-width: 768px) { .ts-breadcrumb { display: flex; } }

.ts-icon {
    width: 30px; height: 30px; border-radius: 7px;
    background: var(--accent-lt); border: 1px solid var(--accent-border);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-right: 10px; font-size: 16px;
}
.ts-icon svg { width: 16px; height: 16px; }
.ts-name {
    font-family: var(--font-serif);
    font-size: 19px; font-weight: 700; color: var(--text-dark);
    letter-spacing: -0.01em;
    white-space: nowrap; flex-shrink: 0;
    /* margin reset: .ts-name is now an <h1> (SEO/a11y) — kill the UA heading
       margins so it stays centred in the 44px flex strip. */
    margin: 0 12px 0 0;
}
.ts-tags { display: none; gap: 4px; margin-right: 10px; flex-shrink: 0; }
@media (min-width: 900px) { .ts-tags { display: flex; } }
.ts-tag {
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.05em; text-transform: uppercase;
    padding: 2px 8px; border-radius: 4px;
    background: var(--bg); color: var(--text-muted);
    border: 1px solid var(--border); white-space: nowrap;
}
/* Phase C — clickable tag pill → unified /tag/{slug} page */
a.ts-tag--link { text-decoration: none; transition: color .12s, border-color .12s; }
a.ts-tag--link:hover { color: var(--text-body); border-color: var(--text-muted); }
.ts-divider {
    width: 1px; height: 20px; background: var(--border);
    margin: 0 10px; flex-shrink: 0;
}
.ts-divider--md { display: none; }
@media (min-width: 768px) { .ts-divider--md { display: block; } }

/* ── Batch 4 — Chinese language toggle pill ────────────────────────────── */
/* Renders only on tools where ui_language='zh' (see                       */
/* tools/partials/language-toggle.blade.php).                              */
/* English-only tools skip the partial entirely → no layout impact.        */
.rt-lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    margin: 0 4px 0 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    flex-shrink: 0;
}
.rt-lang-opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 22px;
    padding: 0 8px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: 999px;
    transition: background 120ms ease, color 120ms ease;
    line-height: 1;
    letter-spacing: 0;
}
.rt-lang-opt:hover { color: var(--text-dark); background: rgba(0,0,0,.04); }
.rt-lang-opt.is-active {
    color: #fff;
    background: var(--brand, #e8622a);
    cursor: default;
}
.rt-lang-opt.is-active:hover { background: var(--brand, #e8622a); }
/* Use Noto Sans CJK style sources naturally — system stacks handle 简/繁 */
.rt-lang-opt[hreflang="zh-CN"], .rt-lang-opt[hreflang="zh-TW"] {
    font-size: 14px; /* CJK glyphs read smaller; bump for parity with EN */
}

.ts-share { display: none; gap: 4px; margin-left: auto; flex-shrink: 0; }
@media (min-width: 640px) { .ts-share { display: flex; align-items: center; } }
.ts-shr {
    width: 28px; height: 28px; border-radius: 5px;
    border: 1px solid #CDD0D6; background: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0;
    transition: background .15s, border-color .15s;
}
.ts-shr:hover { background: var(--text-dark); border-color: var(--text-dark); }
.ts-shr svg { width: 13px; height: 13px; stroke: var(--text-body); transition: stroke .15s; }
.ts-shr:hover svg { stroke: #fff; }
.ts-shr--ok { background: #ECFDF5 !important; border-color: rgba(5,150,105,.4) !important; }
.ts-shr--ok svg { stroke: #059669 !important; }

/* ── MAIN BODY + 2-COL GRID (v2) ───────────────────────────────────────────── */
.main-body { padding: 16px 0 52px; }
.main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}
/* Grid items default to min-width:auto, which lets wide/unbreakable content
   expand the track past the viewport. Pin to 0 so columns stay clamped and
   inner content wraps/scrolls within its own box instead of the page. */
.main-grid > * { min-width: 0; }
/* Inputs/selects/textareas must never force a grid track wider than the viewport.
   min-width:0 lets them shrink in narrow columns; max-width:100% stops a long
   <select> option (intrinsic preferred width) from blowing out the page. Field
   wrappers (class ending in -field) shrink instead of growing the track too. */
.main-grid [class$="-field"] { min-width: 0; }
.main-grid input,
.main-grid select,
.main-grid textarea { min-width: 0; max-width: 100%; }
/* Long unbreakable tokens in inline <code> (base64, encoded URLs, hashes) must
   wrap rather than push the page sideways. No effect inside white-space:pre
   blocks, so <pre> code samples still scroll as before. */
.main-grid code { overflow-wrap: anywhere; }
@media (min-width: 1024px) {
    .main-grid {
        grid-template-columns: minmax(0, 1fr) 308px;
        gap: 40px;
        align-items: start;
    }
}
/* The legacy max-width on .tool-page-container would clip the 2-col grid.
   Override: let the grid fill the full .wrap (1280px). */
.tool-page-container { max-width: none; padding: 0; }

/* ── SIDEBAR (v2) — desktop only ───────────────────────────────────────────── */
.tool-sidebar { display: none; }
@media (min-width: 1024px) { .tool-sidebar { display: block; } }
.sticky-sb {
    position: sticky;
    top: calc(var(--nav-h) + 44px + 12px);
    display: flex; flex-direction: column; gap: 20px;
}
.sb-title {
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--text-muted);
    padding-bottom: 10px; border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
}
.sb-tool {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 11px; background: #fff;
    border: 1px solid var(--border); border-radius: 7px;
    margin-bottom: 7px; cursor: pointer;
    transition: all .15s; text-decoration: none; color: inherit;
}
.sb-tool:hover { background: var(--bg); }
.sb-ti {
    width: 28px; height: 28px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; background: var(--accent-lt);
}
.sb-tname { font-size: 12px; font-weight: 500; color: var(--text-dark); }
.sb-tdesc { font-size: 11px; color: var(--text-body); }
.sb-fact-box .sb-fact-text { font-size: 12px; color: var(--text-mid); line-height: 1.6; }

/* Sidebar feedback widget — sits below "Did you know" */
.sb-feedback {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
}
.sb-feedback .sb-title { margin-bottom: 12px; }
.sb-fb-btns { display: flex; gap: 6px; }
.sb-fb-btn {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    padding: 8px 10px;
    border: 1px solid #CDD0D6;
    border-radius: 6px;
    background: #fff;
    font-family: var(--font-sans);
    font-size: 12px; font-weight: 500;
    color: var(--text-mid);
    cursor: pointer;
    transition: all .15s;
}
.sb-fb-btn:hover    { border-color: var(--text-body); color: var(--text-dark); background: #F7F8F9; }
.sb-fb-btn.voted    { opacity: .55; pointer-events: none; }
.sb-fb-btn[data-rating="up"].voted   { background: #F0FDF4; border-color: rgba(22,163,74,.3); color: #16A34A; }
.sb-fb-btn[data-rating="down"].voted { background: #FEF2F2; border-color: rgba(239,68,68,.3); color: #DC2626; }
.sb-fb-btn svg { width: 12px; height: 12px; stroke: currentColor; flex-shrink: 0; }
.sb-fb-thanks {
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: #16A34A;
}

/* The .tool-header stays in the DOM as a hidden fallback; the v2 transformer
   removes it from the markup, but if any tool was missed we don't want the
   old big card to render alongside the new tool-strip. */
.tool-header { display: none !important; }

/* ── Tool header (legacy, kept for any non-migrated tool — display:none above) — */
.tool-header-legacy {
    background:    var(--card);
    border:        1px solid var(--border);
    border-radius: 10px;
    padding:       18px 22px;
    margin:        1rem 0 1.25rem;
}

/* Top row: icon + title + desc */
.tool-header-row {
    display:     flex;
    align-items: center;
    gap:         0.875rem;
    margin-bottom: 0.75rem;
}
.tool-icon-badge {
    width:           38px;
    height:          38px;
    background:      var(--accent-lt);
    border:          1px solid var(--accent-border);
    border-radius:   9px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.1875rem;
    flex-shrink:     0;
}
.tool-header-content { flex: 1; min-width: 0; }
.tool-title {
    font-family:    var(--font-serif);
    font-size:      1.5rem;
    font-weight:    700;
    line-height:    1.2;
    letter-spacing: -0.02em;
    color:          var(--text-dark);
    margin-bottom:  0.2rem;
}
.tool-desc {
    font-size:   0.875rem;
    color:       var(--text-muted);
    line-height: 1.5;
    margin:      0;
    /* Allow wrapping on narrow viewports; max 2 lines via line-clamp */
    display:            -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:           hidden;
}

/* Bottom row: tags left · share right — on one line */
.tool-meta-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             0.75rem;
    flex-wrap:       wrap;
}
.tool-tags {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.3rem;
}
.tool-tag {
    font-size:      0.625rem;
    font-weight:    700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color:          var(--text-muted);
    background:     var(--bg);
    border:         1px solid var(--border);
    border-radius:  var(--r-pill);
    padding:        0.175rem 0.5rem;
}

/* ── Share bar — compact inline ──────────────────────────────────────────────── */
/* Rendered into #share-bar by social-share.js · overrides injected CSS          */
#share-bar .share-bar   { margin: 0; gap: 8px; }
#share-bar .share-label {
    font-size:   0.75rem;
    color:       var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
}
#share-bar .share-buttons { gap: 6px; }
#share-bar .share-btn {
    width:  28px !important;
    height: 28px !important;
}
#share-bar .share-btn img {
    width:  14px !important;
    height: 14px !important;
    filter: brightness(0) invert(1);
}
/* Tooltip still works but arrow adjusted for smaller button */
#share-bar .share-btn::before { font-size: 0.625rem; padding: 0.2rem 0.4rem; }

@media (max-width: 640px) {
    .tool-desc     { white-space: normal; }
    .tool-meta-row { flex-direction: column; align-items: flex-start; }
    /* Result tables hold many columns whose intrinsic width exceeds a phone
       viewport. Let them scroll horizontally inside their own box instead of
       pushing the whole page sideways (display:block makes overflow-x work on
       a table element). Mobile-only — desktop tables render normally. */
    .main-grid table { display: block; max-width: 100%; overflow-x: auto; }
}

/* ── Ad containers ───────────────────────────────────────────────────────────── */
.ad-wrapper {
    display:         flex;
    justify-content: center;
    width:           100%;
    margin:          1.5rem 0;
}
.ad-container { display: block; }

/* ── Tool card (v2 styling: 10px radius, no shadow, slightly less padding) ──── */
.tool-card {
    background:    var(--card);
    border:        1px solid var(--border);
    border-radius: 10px;
    padding:       28px;
    margin-bottom: 1.25rem;
}

/* ── Input ───────────────────────────────────────────────────────────────────── */
.tool-input-row {
    display:   flex;
    gap:       0.5rem;
    margin-bottom: 1.125rem;
    position:  relative;
}
.tool-input-wrap { flex: 1; position: relative; }
.tool-input {
    width:         100%;
    height:        56px;
    padding:       0 3.5rem 0 1.25rem;
    border:        2px solid var(--border);
    border-radius: var(--r-md);
    font-size:     1.125rem;
    font-weight:   600;
    color:         var(--text-dark);
    background:    var(--bg);
    outline:       none;
    transition:    border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.tool-input::placeholder { font-weight: 400; font-size: 1rem; color: var(--text-muted); }
.tool-input:focus {
    border-color: var(--accent);
    background:   var(--card);
    box-shadow:   0 0 0 4px rgba(232,98,42,0.1);
}
.char-count {
    position:    absolute;
    right:       1rem;
    top:         50%;
    transform:   translateY(-50%);
    font-size:   0.75rem;
    color:       var(--text-muted);
    pointer-events: none;
}
.clear-btn {
    height:        56px;
    width:         48px;
    border:        2px solid var(--border);
    border-radius: var(--r-md);
    background:    var(--bg);
    color:         var(--text-muted);
    font-size:     1rem;
    cursor:        pointer;
    flex-shrink:   0;
    transition:    border-color 0.1s, color 0.1s;
}
.clear-btn:hover { border-color: var(--border); color: var(--text-dark); background: var(--card); }

/* ── Filter pills (min-length) ───────────────────────────────────────────────── */
.filter-row {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    flex-wrap:   wrap;
    margin-bottom: 1.125rem;
}
.filter-label {
    font-size:   0.8125rem;
    font-weight: 600;
    color:       var(--text-muted);
    white-space: nowrap;
}
.filter-pill {
    padding:       0.3rem 0.75rem;
    border:        1px solid var(--border);
    border-radius: var(--r-pill);
    background:    var(--bg);
    font-size:     0.8125rem;
    font-weight:   600;
    color:         var(--text-body);
    cursor:        pointer;
    transition:    all 0.1s;
}
.filter-pill:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-lt); }
.filter-pill.active {
    background: var(--accent); border-color: var(--accent); color: #fff;
}

/* ── Action row ──────────────────────────────────────────────────────────────── */
.action-row {
    display:   flex;
    gap:       0.625rem;
    flex-wrap: wrap;
}
.btn-primary {
    flex:          1;
    height:        52px;
    padding:       0 1.5rem;
    background:    var(--accent);
    color:         #fff;
    border:        none;
    border-radius: var(--r-md);
    font-size:     1rem;
    font-weight:   700;
    cursor:        pointer;
    transition:    background 0.15s;
    display:       flex;
    align-items:   center;
    justify-content: center;
    gap:           0.375rem;
    text-decoration: none;
}
.btn-primary:hover    { background: var(--accent-h); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-ghost {
    height:        52px;
    padding:       0 1.25rem;
    border:        1px solid var(--border);
    border-radius: var(--r-md);
    background:    transparent;
    font-size:     0.9375rem;
    font-weight:   600;
    color:         var(--text-body);
    cursor:        pointer;
    transition:    all 0.12s;
    display:       flex;
    align-items:   center;
    gap:           0.375rem;
}
.btn-ghost:hover { background: var(--bg); color: var(--text-dark); }

/* ── Error message ───────────────────────────────────────────────────────────── */
.error-msg {
    margin-top:    0.875rem;
    padding:       0.75rem 1rem;
    background:    #fff5f5;
    border:        1px solid #fecaca;
    border-radius: var(--r-sm);
    color:         #9b1c1c;
    font-size:     0.875rem;
}

/* ── Results ─────────────────────────────────────────────────────────────────── */
#results-section { margin-top: 1.5rem; }

.results-summary {
    display:        flex;
    align-items:    center;
    flex-wrap:      wrap;
    gap:            0.5rem;
    padding:        0.875rem 1.125rem;
    background:     var(--bg);
    border:         1px solid var(--border);
    border-radius:  var(--r-sm);
    font-size:      0.9rem;
    margin-bottom:  1.25rem;
}
.results-summary em { color: var(--accent); font-style: normal; font-weight: 700; }
.copy-all-btn {
    margin-left:   auto;
    padding:       0.3rem 0.875rem;
    border:        1px solid var(--border);
    border-radius: var(--r-pill);
    background:    var(--card);
    font-size:     0.8125rem;
    font-weight:   600;
    color:         var(--text-body);
    cursor:        pointer;
    transition:    all 0.1s;
}
.copy-all-btn:hover { border-color: var(--accent); color: var(--accent); }

.word-group          { margin-bottom: 1.25rem; }
.word-group-title {
    font-size:      0.75rem;
    font-weight:    700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color:          var(--text-muted);
    margin-bottom:  0.5rem;
    display:        flex;
    align-items:    center;
    gap:            0.375rem;
}
.word-group-count { color: var(--border); font-weight: 500; }

.word-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.word-chip {
    display:        inline-block;
    padding:        0.3rem 0.75rem;
    background:     var(--card);
    border:         1px solid var(--border);
    border-radius:  var(--r-sm);
    font-family:    'SFMono-Regular', 'Consolas', monospace;
    font-size:      0.9rem;
    font-weight:    600;
    color:          var(--text-dark);
    letter-spacing: 0.02em;
    transition:     all 0.1s;
    text-decoration:none;
    cursor:         pointer;
}
.word-chip:hover {
    border-color: var(--accent);
    background:   var(--accent-lt);
    color:        var(--accent);
}

.results-actions {
    display:  flex;
    gap:      0.625rem;
    flex-wrap:wrap;
    margin-top:    1.25rem;
    padding-top:   1.25rem;
    border-top:    1px solid var(--border);
}
.results-actions .btn-primary { flex: none; height: 44px; }
.results-actions .btn-ghost   { height: 44px; }

/* Loading state */
.loading-state, .no-results {
    padding:    2rem;
    text-align: center;
    color:      var(--text-muted);
    font-size:  0.9375rem;
}
.loading-spinner {
    display: flex; align-items: center; justify-content: center;
    gap: 0.45rem; margin: 0 auto 1rem; width: fit-content;
}
.loading-spinner::before, .loading-spinner::after, .loading-spinner span {
    content: ''; display: block;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--accent);
    animation: rt-pulse 1.1s ease-in-out infinite;
}
.loading-spinner::before { animation-delay: 0s; }
.loading-spinner span    { animation-delay: 0.18s; }
.loading-spinner::after  { animation-delay: 0.36s; }
@keyframes rt-pulse {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40%           { transform: scale(1);   opacity: 1; }
}

/* ── Premium nudge ───────────────────────────────────────────────────────────── */
.premium-nudge {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    flex-wrap:       wrap;
    padding:         0.875rem 1.25rem;
    background:      var(--accent-lt);
    border:          1px solid var(--accent-border);
    border-radius:   var(--r-md);
    margin-bottom:   1.25rem;
}
.premium-nudge-text {
    font-size:   0.9rem;
    color:       var(--text-mid);
    font-weight: 500;
}
.premium-nudge-text span { color: var(--accent); margin-right: 0.25rem; }
.premium-nudge-cta {
    font-size:     0.875rem;
    font-weight:   700;
    color:         var(--accent);
    white-space:   nowrap;
    padding:       0.375rem 0.875rem;
    border:        1px solid var(--accent);
    border-radius: var(--r-pill);
    transition:    background 0.12s, color 0.12s;
}
.premium-nudge-cta:hover { background: var(--accent); color: #fff; }

/* ── Section headings (v2: signal-orange left rule instead of bottom border) ── */
.section-heading {
    font-family:    var(--font-serif);
    font-size:      1.375rem;
    font-weight:    700;
    letter-spacing: -0.01em;
    color:          var(--text-dark);
    margin-bottom:  1.25rem;
    padding-left:   14px;
    border-left:    3px solid var(--accent);
    line-height:    1.3;
}

/* ── How-to section ──────────────────────────────────────────────────────────── */
.how-to-steps {
    display:        flex;
    flex-direction: column;
    gap:            1.5rem;
}
.how-to-step {
    display:    flex;
    align-items:flex-start;
    gap:        1.125rem;
}
.step-num {
    width:           36px;
    height:          36px;
    background:      var(--accent);
    color:           #fff;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       0.9375rem;
    font-weight:     700;
    flex-shrink:     0;
    margin-top:      0.125rem;
}
.step-body h3 {
    font-family:   var(--font-sans);
    font-size:     1.0625rem;
    font-weight:   600;
    color:         var(--text-dark);
    margin-bottom: 0.375rem;
}
.step-body p {
    font-size:   0.9375rem;
    color:       var(--text-body);
    line-height: 1.65;
    margin:      0;
}

/* ── Educational content ─────────────────────────────────────────────────────── */
.educational-content { max-width: var(--text-max); }
.educational-content h3 {
    font-family:   var(--font-serif);
    font-size:     1.1875rem;
    font-weight:   700;
    color:         var(--text-dark);
    margin:        2rem 0 0.75rem;
    letter-spacing:-0.01em;
}
.educational-content h3:first-of-type { margin-top: 0; }
.educational-content p {
    font-size:   0.9375rem;
    color:       var(--text-body);
    line-height: 1.8;
    margin-bottom: 1.25rem;
}
.educational-content p:last-child { margin-bottom: 0; }
.educational-content ul { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.educational-content li { font-size: 0.9375rem; color: var(--text-body); line-height: 1.7; margin-bottom: 0.375rem; }
.educational-content strong { color: var(--text-dark); font-weight: 600; }

/* Pull quote — v2: simple left rule, no background, italic serif */
.pull-quote {
    border-left:  3px solid var(--accent);
    padding:      8px 20px;
    margin:       1.5rem 0;
    background:   transparent;
}
.pull-quote p {
    font-family: var(--font-serif);
    font-size:   1.125rem;
    font-style:  italic;
    color:       var(--text-mid);
    line-height: 1.6;
    margin:      0;
}

/* ── Fact cards grid — v2: 8px radius, mono number, lighter shadow ──────────── */
.fact-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.875rem;
}
.fact-card {
    background:    var(--card);
    border:        1px solid var(--border);
    border-radius: 8px;
    padding:       1.125rem 1.25rem;
    transition:    box-shadow 0.15s, transform 0.15s;
}
.fact-card:hover {
    box-shadow: 0 4px 16px rgba(13,27,42,.08);
    transform:  translateY(-1px);
}
.fact-num {
    font-family:    var(--font-mono);
    font-size:      1.125rem;
    font-weight:    500;
    color:          var(--accent);
    margin-bottom:  0.5rem;
    line-height:    1;
    letter-spacing: 0.06em;
}
.fact-card p {
    font-size:  0.875rem;
    color:      var(--text-mid);
    line-height:1.6;
    margin:     0;
}
.fact-card strong { color: var(--text-dark); font-weight: 600; }

/* ── FAQ accordion — v2: no outer border, square chevron, hairline rows ─────── */
.faq-list { list-style: none; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-item:last-child  { border-bottom: 1px solid var(--border); }

.faq-question {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    width:           100%;
    text-align:      left;
    padding:         14px 4px;
    background:      transparent;
    border:          none;
    cursor:          pointer;
    font-family:     var(--font-serif);
    font-size:       1rem;
    font-weight:     700;
    color:           var(--text-dark);
    line-height:     1.4;
}
.faq-question:hover { color: var(--accent); }

.faq-icon {
    width:       22px;
    height:      22px;
    border:      1px solid var(--border);
    border-radius:5px;          /* square chevron, not pill */
    display:     flex;
    align-items: center;
    justify-content: center;
    font-size:   0.875rem;
    flex-shrink: 0;
    color:       var(--text-muted);
    transition:  all 0.15s;
    font-style:  normal;
}
.faq-item.open .faq-icon {
    background:   var(--text-dark);
    border-color: var(--text-dark);
    color:        #fff;
    transform:    rotate(45deg);
}

/* ⚠ DO NOT add the HTML5 `hidden` attribute to <div class="faq-answer">.
   The `hidden` attribute renders the element display:none and CANNOT be
   overridden by CSS — so the max-height reveal below silently fails.
   The shared FAQ handler in recatools-core.js toggles .faq-item.open
   which this CSS reads. The parity-check rule `faq_no_hidden_attr`
   (added May 2026 after a 10-tool bug batch shipped this anti-pattern)
   blocks the regression at CI time. See docs/tool-faq-conventions.md. */
.faq-answer {
    max-height: 0;
    overflow:   hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item.open .faq-answer { max-height: 800px; }
.faq-answer-inner {
    padding:    0 4px 14px;
    font-size:  0.9375rem;
    color:      var(--text-body);
    line-height:1.75;
}
.faq-answer-inner a { color: var(--accent); text-decoration: underline; }

/* ── Related tools grid ──────────────────────────────────────────────────────── */
.related-tools-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.875rem;
}
.related-tool-card {
    background:    var(--card);
    border:        1px solid var(--border);
    border-radius: 8px;
    padding:       1rem 1.125rem;
    display:       flex;
    gap:           0.75rem;
    align-items:   flex-start;
    transition:    box-shadow 0.15s, border-color 0.15s, transform 0.15s;
    text-decoration: none;
}
.related-tool-card:hover {
    border-color: rgba(232,71,47,0.3);
    box-shadow:   0 4px 16px rgba(13,27,42,.08);
    transform:    translateY(-1px);
}
.related-tool-icon {
    width:           36px;
    height:          36px;
    border-radius:   8px;
    background:      var(--accent-lt);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1rem;
    flex-shrink:     0;
}
.related-tool-info { flex: 1; min-width: 0; }
.related-tool-name {
    font-size:   0.9375rem;
    font-weight: 700;
    color:       var(--text-dark);
    margin-bottom: 0.25rem;
}
.related-tool-desc {
    font-size:   0.8125rem;
    color:       var(--text-body);
    line-height: 1.5;
    margin-bottom: 0.625rem;
}
.related-tool-meta {
    display:     flex;
    align-items: center;
    justify-content: space-between;
}
.related-tool-cat {
    font-size:      0.6875rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:          var(--text-muted);
    background:     var(--bg);
    padding:        0.15rem 0.5rem;
    border-radius:  var(--r-pill);
    border:         1px solid var(--border);
}
.related-tool-cta {
    font-size:   0.875rem;
    font-weight: 700;
    color:       var(--accent);
}

/* ── Promoted Link card (v1.1) — single editorial cross-promotion card,
   sits below the related-tools grid. Distinct from related-tool-card to
   signal "this leaves the Tools system" (AI Directory, news, etc.). ───── */
.promo-link-card {
    display:         flex;
    align-items:     center;
    gap:             1.25rem;
    padding:         1.125rem 1.5rem;
    background:      linear-gradient(135deg, #fff5f2 0%, #ffffff 100%);
    border:          1px solid rgba(232, 71, 47, 0.35);
    border-radius:   12px;
    text-decoration: none;
    color:           var(--text-primary, #1a1814);
    transition:      transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.promo-link-card:hover {
    transform:    translateY(-1px);
    border-color: var(--accent);
    box-shadow:   0 4px 18px rgba(232, 71, 47, 0.12);
}
.promo-link-body {
    flex: 1;
    min-width: 0;
}
.promo-link-title {
    margin:      0 0 4px;
    font-size:   1.0625rem;
    font-weight: 700;
    color:       var(--text-primary, #1a1814);
    line-height: 1.3;
}
.promo-link-desc {
    margin:      0;
    font-size:   0.875rem;
    color:       var(--text-muted);
    line-height: 1.55;
}
.promo-link-cta {
    flex-shrink:  0;
    display:      inline-flex;
    align-items:  center;
    padding:      0.625rem 1.125rem;
    background:   var(--accent);
    color:        #fff;
    border-radius: 999px;
    font-weight:  700;
    font-size:    0.8125rem;
    letter-spacing: 0.01em;
    white-space:  nowrap;
    transition:   background 0.12s;
}
.promo-link-card:hover .promo-link-cta {
    background: var(--accent-h, #d43e27);
}
@media (max-width: 560px) {
    .promo-link-card { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
    .promo-link-cta { align-self: stretch; justify-content: center; }
}

/* ── Dark newsletter banner — brand v3: navy + Plex Sans + 6px button radius ── */
.tool-newsletter {
    background:    var(--rt-result-bg, #0D1B2A);
    border-radius: 12px;
    padding:       40px 32px 36px;
    margin-top:    1.5rem;
    text-align:    center;
    position:      relative;
    overflow:      hidden;
    font-family:   var(--rt-font-sans, 'IBM Plex Sans', system-ui, sans-serif);
}
.tool-newsletter::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
}
.tool-newsletter > * { position: relative; }
.tool-newsletter h2 {
    font-family:    var(--rt-font-sans, 'IBM Plex Sans', system-ui, sans-serif);
    font-size:      1.625rem;
    font-weight:    600;
    color:          var(--rt-result-ink, #fff);
    letter-spacing: -0.02em;
    margin-bottom:  0.75rem;
    line-height:    1.2;
}
.tool-newsletter p {
    font-size:     0.9375rem;
    color:         var(--rt-result-muted, rgba(255,255,255,0.65));
    margin-bottom: 1.5rem;
    line-height:   1.6;
}
.tool-newsletter-form {
    display:       flex;
    gap:           0.5rem;
    max-width:     480px;
    margin:        0 auto 0.875rem;
}
.tool-newsletter-form input {
    flex:          1;
    height:        46px;
    padding:       0 1rem;
    border:        1px solid rgba(255,255,255,0.18);
    border-radius: 6px;
    background:    rgba(255,255,255,0.06);
    color:         var(--rt-result-ink, #fff);
    font-family:   var(--rt-font-sans, 'IBM Plex Sans', system-ui, sans-serif);
    font-size:     0.9375rem;
    outline:       none;
    transition:    border-color 0.15s;
}
.tool-newsletter-form input::placeholder { color: rgba(255,255,255,0.45); }
.tool-newsletter-form input:focus { border-color: var(--rt-accent, #E8472F); }
.tool-newsletter-form button {
    height:        46px;
    padding:       0 1.5rem;
    background:    var(--rt-accent, #E8472F);
    color:         #fff;
    border:        none;
    border-radius: 6px;
    font-family:   var(--rt-font-sans, 'IBM Plex Sans', system-ui, sans-serif);
    font-size:     0.9375rem;
    font-weight:   500;
    cursor:        pointer;
    white-space:   nowrap;
    transition:    filter 0.15s;
}
.tool-newsletter-form button:hover { filter: brightness(1.05); }
.tool-newsletter-note {
    font-family:    var(--rt-font-mono, 'IBM Plex Mono', monospace);
    font-size:      0.75rem;
    font-weight:    500;
    letter-spacing: 0.05em;
    color:          var(--rt-result-muted, rgba(255,255,255,0.5));
    margin:         0;
}
.tool-newsletter-note a { color: var(--rt-result-muted, rgba(255,255,255,0.55)); text-decoration: underline; }

/* ── Feedback / rating — v2: 10px radius, lighter ──────────────────────────── */
.feedback-section {
    text-align:    center;
    padding:       1.75rem 1.5rem;
    background:    var(--card);
    border:        1px solid var(--border);
    border-radius: 10px;
    margin-top:    1.25rem;
}
.feedback-section p    { font-size: 0.9375rem; color: var(--text-body); margin-bottom: 1rem; }
.feedback-btns         { display: flex; gap: 0.625rem; justify-content: center; }
.feedback-btn {
    padding:       0.5rem 1.25rem;
    border:        1px solid var(--border);
    border-radius: var(--r-pill);
    background:    var(--bg);
    font-size:     1rem;
    cursor:        pointer;
    transition:    all 0.12s;
}
.feedback-btn:hover { border-color: var(--accent); background: var(--accent-lt); }
.feedback-btn.voted { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.feedback-thanks {
    font-size:   0.875rem;
    color:       var(--accent);
    font-weight: 600;
    margin-top:  0.75rem;
    display:     none;
}

/* ── Toast ───────────────────────────────────────────────────────────────────── */
.toast {
    position:      fixed;
    bottom:        2rem;
    left:          50%;
    transform:     translateX(-50%) translateY(10px);
    background:    #0D1B2A;
    color:         #fff;
    padding:       0.625rem 1.375rem;
    border-radius: var(--r-pill);
    font-size:     0.875rem;
    font-weight:   600;
    opacity:       0;
    transition:    opacity 0.25s, transform 0.25s;
    pointer-events:none;
    z-index:       9000;
    white-space:   nowrap;
}
.toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Shareable result URL — Copy-link button (Phase 4) ──────────────────── */
.rt-share-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: var(--card, #fff);
    border: 1px solid var(--accent, #e8622a);
    color: var(--accent, #e8622a);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.rt-share-link-btn:hover { background: var(--accent, #e8622a); color: #fff; }

/* ── AI newsfeed stub (LEGACY — kept for unmigrated widgets) ──────────────── */
.newsfeed-section { padding: 2rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); }
.newsfeed-section p { font-size: 0.9375rem; color: var(--text-body); margin: 0; }

/* ── News Feed v2.0 — server-rendered cards (tools.partials.news-feed) ────── */
.tool-newsfeed-subtitle {
    font-size: 0.95rem;
    color: var(--text-muted, var(--muted, #6b6760));
    margin: -0.5rem 0 1.25rem 0;
    line-height: 1.55;
}
.tool-newsfeed-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 720px) {
    .tool-newsfeed-list { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
.tool-newsfeed-item { margin: 0; }
.tool-newsfeed-card {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg, 14px);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    height: 100%;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.tool-newsfeed-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(26, 24, 20, 0.08);
    border-color: var(--accent, #e8622a);
}
.tool-newsfeed-thumb {
    width: 100%;
    aspect-ratio: 3 / 2;
    background: #f0eee9;
    overflow: hidden;
}
.tool-newsfeed-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tool-newsfeed-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 8px;
}
.tool-newsfeed-title {
    font-family: var(--font-serif, 'DM Serif Display', serif);
    font-size: 1.0625rem;
    line-height: 1.25;
    margin: 0;
    color: var(--text-heading, #1a1814);
    /* clamp to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tool-newsfeed-excerpt {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-body, #6b6760);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tool-newsfeed-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 0.75rem;
    color: var(--text-muted, #8a857d);
    margin-top: auto;
    padding-top: 4px;
}
.tool-newsfeed-cat {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(232, 98, 42, 0.08);
    color: var(--accent, #e8622a);
    border-radius: 999px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 0.6875rem;
}
.tool-newsfeed-meta time,
.tool-newsfeed-read { white-space: nowrap; }
.tool-newsfeed-viewall {
    display: inline-block;
    margin-top: 18px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--accent, #e8622a);
    text-decoration: none;
}
.tool-newsfeed-viewall:hover { text-decoration: underline; }

/* Empty-state recovery (v2.2.11) — compact CTA when no posts resolve */
.tool-newsfeed-empty {
    padding: 1.5rem 1.75rem;
    background: var(--card);
    border: 1px dashed var(--border);
    border-radius: var(--r-lg, 14px);
    text-align: center;
}
.tool-newsfeed-empty p {
    margin: 0 0 12px;
    font-size: 0.9375rem;
    color: var(--text-body, #6b6760);
}
.tool-newsfeed-empty-cta {
    display: inline-block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--accent, #e8622a);
    text-decoration: none;
}
.tool-newsfeed-empty-cta:hover { text-decoration: underline; }

/* ── Footer (v2 chrome — navy bg, brand col, 5 coloured dots) ─────────────── */
.site-footer {
    background: #0D1B2A;
    border-top: 1px solid rgba(255,255,255,.05);
    padding:    38px 0 24px;
    color:      rgba(255,255,255,0.6);
    font-size:  0.875rem;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 28px;
}
@media (min-width: 768px) {
    .footer-grid { grid-template-columns: repeat(5, 1fr); gap: 32px; }
}
.footer-brand { display: flex; flex-direction: column; gap: 8px; }
.footer-brand .site-logo { display: flex; align-items: center; gap: 9px; margin: 0 0 2px; text-decoration: none; }
.footer-tagline {
    font-size: 12px; color: rgba(255,255,255,.35);
    line-height: 1.65; margin-bottom: 4px;
}
.footer-mono {
    font-family: var(--font-mono); font-size: 11px;
    color: rgba(255,255,255,.2); letter-spacing: 0.05em;
}
.footer-col-title {
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.11em; text-transform: uppercase;
    color: rgba(255,255,255,.25); margin-bottom: 12px;
}
.footer-links { display: flex; flex-direction: column; gap: 8px; }
.footer-link {
    font-size: 13px; color: rgba(255,255,255,.45);
    transition: color .15s; text-decoration: none;
}
.footer-link:hover { color: #fff; }
.footer-bottom {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 18px; border-top: 1px solid rgba(255,255,255,.06);
    flex-wrap: wrap; gap: 8px;
}
.footer-copy {
    font-family: var(--font-mono); font-size: 12px;
    color: rgba(255,255,255,.2);
}
.footer-copy a { color: inherit; text-decoration: underline; }
.footer-dots { display: flex; gap: 7px; }
.fdot { width: 7px; height: 7px; border-radius: 50%; }

/* Legacy footer rules kept for backwards compat (any page not yet migrated) */
.footer-inner {
    max-width: var(--page-max); margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 1rem;
}
.footer-logo { font-weight: 800; font-size: 1rem; color: #fff; }
.footer-logo span { color: var(--accent); }
.footer-links a { color: rgba(255,255,255,0.5); transition: color 0.1s; }
.footer-links a:hover { color: #fff; }
.ccpa-link { display: none; }

/* ── CTA strip (v2) — pre-footer "75 more free tools" navy strip ──────────── */
.cta-strip { background: var(--text-dark); padding: 22px 0; }
.cta-strip .wrap {
    max-width: 1280px; margin: 0 auto; padding: 0 20px;
}
@media (min-width: 768px) { .cta-strip .wrap { padding: 0 28px; } }
.cta-strip .ci {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.cta-strip .ct h3 {
    font-family: var(--font-serif); font-size: 17px; font-weight: 700;
    color: #fff; margin-bottom: 3px; line-height: 1.3;
}
.cta-strip .ct p { font-size: 13px; color: rgba(255,255,255,.5); }
.cta-strip .cb {
    display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap;
}
@media (min-width: 640px) { .cta-strip .cb { margin-left: auto; } }
.cta-strip .bp {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 18px; background: var(--accent); color: #fff;
    border-radius: 6px; font-size: 13px; font-weight: 500;
    text-decoration: none;
}
.cta-strip .bp:hover { background: var(--accent-h); }
.cta-strip .bs {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 18px;
    background: rgba(255,255,255,.08); color: rgba(255,255,255,.75);
    border: 1px solid rgba(255,255,255,.14); border-radius: 6px;
    font-size: 13px; font-weight: 500; text-decoration: none;
}
.cta-strip .bs:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ── About-this-tool collapsible (v2) ────────────────────────────────────────
   Sits directly below the tool widget, above AD-W1.
   Keeps long descriptions out of the critical path. */
.about-toggle {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    margin: 8px 0;
    transition: background .15s ease;
}
.about-toggle:hover { background: #F7F8F9; }
.at-left { display: flex; align-items: center; gap: 10px; }
.at-icon {
    width: 28px; height: 28px; border-radius: 6px;
    background: #FFF5F2;
    border: 1px solid var(--accent-border);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.at-icon svg { width: 14px; height: 14px; stroke: var(--accent); }
.at-name { font-size: 13px; font-weight: 500; color: var(--text-dark); }
.at-desc { font-size: 12px; color: var(--text-body); margin-top: 1px; }
.at-chevron {
    width: 22px; height: 22px;
    border: 1px solid #CDD0D6; border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: transform .2s ease;
}
.at-chevron svg { width: 10px; height: 10px; stroke: var(--text-body); }
.about-toggle.open .at-chevron { transform: rotate(180deg); }

.about-panel {
    display: none;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px; margin-bottom: 16px;
}
.about-panel.open { display: block; }
.ab-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 12px; }
.ab-tag {
    font-family: var(--font-mono);
    font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
    padding: 3px 9px; border-radius: 4px;
    background: #F7F8F9; color: var(--text-body);
    border: 1px solid #CDD0D6;
}
.ab-desc { font-size: 14px; color: var(--text-mid); line-height: 1.7; }
.ab-meta { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border, #ebebeb);
    font-size: 12px; color: var(--text-soft, #6b6760); letter-spacing: .01em; }

/* ── Screen-reader only ──────────────────────────────────────────────────────── */
.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;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .tool-header { padding: 20px; }
    .tool-card   { padding: 20px; }
    .tool-header-row { flex-direction: column; gap: 0.875rem; }
    .fact-cards-grid { grid-template-columns: minmax(0, 1fr); }
    .related-tools-grid { grid-template-columns: 1fr; }
    .action-row { flex-direction: column; }
    .btn-primary { flex: none; width: 100%; }
    .btn-ghost   { width: 100%; justify-content: center; }
    .nav-links a:not(.nav-cta) { display: none; }
    .tool-newsletter { padding: 28px 20px; }
    .tool-newsletter-form { flex-direction: column; }
    .footer-links { gap: 0.875rem; }
}
@media (max-width: 480px) {
    .results-actions { flex-direction: column; }
}

/* ════════════════════════════════════════════════════════════════════
   Disclaimer blocks (May 2026 consolidation)
   Single source of truth — replaces per-tool definitions in tool-local
   style.css files. Each tool with disclaimer_type in {health, finance,
   custom} must render the matching block inside its .tool-card.
   ════════════════════════════════════════════════════════════════════ */

.health-disclaimer,
.finance-disclaimer,
.tool-disclaimer {
    font-size:     0.8125rem;
    color:         var(--text-muted);
    background:    #FFFFFF;
    border:        1px solid var(--border);
    border-radius: 8px;
    padding:       0.625rem 0.875rem;
    margin-top:    1rem;
    line-height:   1.55;
}

/* Health disclaimer — neutral grey */
.health-disclaimer {
    border-left:   3px solid #06b6d4;  /* cyan accent */
}

/* Finance disclaimer — amber accent for regulatory weight */
.finance-disclaimer {
    border-left:   3px solid #f59e0b;
}

/* Custom disclaimer — uses brand accent (e.g. Cantonese Converter quality note) */
.tool-disclaimer,
.tool-disclaimer--custom {
    border-left:   3px solid var(--accent);
    background:    var(--accent-lt, #fff5f2);
    color:         var(--text-primary, #1a1814);
}

.health-disclaimer strong,
.finance-disclaimer strong,
.tool-disclaimer strong { color: var(--text-primary, #1a1814); }