/* ============================================================ AI Tools ===
   Directory + detail styling. Uses the site's existing design tokens
   (--w-primary, --w-border, --w-bg-alt, --w-muted, --w-radius…).
   ======================================================================= */

/* --- Hero --- */
.w-ai-hero {
    background: linear-gradient(135deg, #02162d 0%, #0a2748 100%);
    color: #fff; border-radius: var(--w-radius-lg, 16px);
    padding: clamp(2rem, 5vw, 3.5rem); text-align: center; margin-bottom: var(--w-space-6, 2rem);
}
.w-ai-hero h1 { color: #fff; font-size: clamp(1.6rem, 4vw, 2.4rem); margin-bottom: .6rem; }
.w-ai-hero p { color: rgba(255,255,255,.85); max-width: 640px; margin: 0 auto 1.4rem; }
.w-ai-search { max-width: 560px; margin: 0 auto; position: relative; }
.w-ai-search input { width: 100%; padding: .85rem 1rem; border-radius: 999px; border: 0; font-size: 1rem; }
.w-ai-suggest { position: absolute; top: 110%; left: 0; right: 0; background: #fff; color: #111;
    border-radius: 12px; box-shadow: 0 12px 30px rgba(2,22,45,.18); text-align: left; overflow: hidden; z-index: 20; display: none; }
.w-ai-suggest a { display: flex; gap: .6rem; align-items: center; padding: .6rem .9rem; color: inherit; text-decoration: none; }
.w-ai-suggest a:hover { background: var(--w-bg-alt, #f5f6fa); }
.w-ai-suggest img { width: 26px; height: 26px; object-fit: contain; border-radius: 6px; }

/* --- Section headers --- */
.w-ai-section { margin: var(--w-space-6, 2.4rem) 0; }
.w-ai-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; gap: 1rem; }
.w-ai-section-head h2 { font-size: 1.3rem; margin: 0; }
.w-ai-section-head a { font-size: .9rem; white-space: nowrap; }

/* --- Category chips --- */
.w-ai-cats { display: flex; flex-wrap: wrap; gap: .6rem; }
.w-ai-cat-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem;
    border: 1px solid var(--w-border, #e5e7eb); border-radius: 999px; text-decoration: none;
    color: var(--w-body, #1f2937); background: var(--w-bg, #fff); font-size: .9rem; transition: .15s; }
.w-ai-cat-chip:hover { border-color: var(--w-primary, #02162d); color: var(--w-primary, #02162d); }
.w-ai-cat-chip .n { color: var(--w-muted, #6b7280); font-size: .82em; }

/* --- Card grid --- */
.w-ai-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }

.w-ai-card { border: 1px solid var(--w-border, #e5e7eb); border-radius: var(--w-radius, 12px);
    background: var(--w-bg, #fff); padding: 1rem; display: flex; flex-direction: column; gap: .7rem; transition: box-shadow .18s, transform .18s; }
.w-ai-card:hover { box-shadow: 0 12px 30px rgba(2,22,45,.08); transform: translateY(-2px); }
.w-ai-card-head { display: flex; align-items: flex-start; gap: .7rem; position: relative; }
.w-ai-logo { width: 48px; height: 48px; object-fit: contain; border-radius: 10px; border: 1px solid var(--w-border,#eee); background:#fff; flex: 0 0 auto; }
.w-ai-logo--sm { border-radius: 6px; }
.w-ai-card-title { min-width: 0; flex: 1 1 auto; }
.w-ai-name a { overflow-wrap: anywhere; }

/* Fallback avatar: first letter on a per-tool colour (size via --s, hue via --h). */
.w-ai-initial {
    --s: 48px;
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: var(--s); height: var(--s); border-radius: 10px; border: 0;
    background: linear-gradient(135deg, hsl(var(--h, 220) 62% 48%), hsl(calc(var(--h, 220) + 28) 62% 38%));
    color: #fff; font-weight: 700; font-size: calc(var(--s) * .46); line-height: 1;
    text-transform: uppercase; user-select: none; letter-spacing: 0;
}
.w-ai-logo--sm.w-ai-initial { border-radius: 6px; }

/* Card quick actions (save / compare) */
.w-ai-card-tools { display: flex; gap: .3rem; flex: 0 0 auto; }
.w-ai-icon-btn {
    width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--w-border,#e5e7eb); border-radius: 8px; background: var(--w-bg,#fff);
    color: var(--w-muted,#6b7280); font-size: .95rem; padding: 0; transition: .15s; cursor: pointer;
}
.w-ai-icon-btn:hover { border-color: var(--w-primary,#02162d); color: var(--w-primary,#02162d); }
.w-ai-icon-btn[aria-pressed="true"] { background: var(--w-primary,#02162d); border-color: var(--w-primary,#02162d); color: #fff; }
.btn.js-ai-compare[aria-pressed="true"], .btn.wBookmarkBtn[aria-pressed="true"] { background: var(--w-primary,#02162d); border-color: var(--w-primary,#02162d); color: #fff; }
.js-ai-compare span { margin-left: .35rem; }
.w-ai-name { font-size: 1.05rem; margin: 0; line-height: 1.2; }
.w-ai-name a { color: var(--w-heading, #0f172a); text-decoration: none; }
.w-ai-verified { color: #0ea5e9; font-size: .85em; margin-left: .2rem; }
.w-ai-cat { font-size: .8rem; color: var(--w-muted, #6b7280); text-decoration: none; }
.w-ai-desc { font-size: .9rem; color: var(--w-muted, #6b7280); margin: 0; line-height: 1.5; }
.w-ai-badges { display: flex; flex-wrap: wrap; gap: .35rem; }
.w-ai-badge { font-size: .72rem; font-weight: 600; padding: .2rem .5rem; border-radius: 6px; background: var(--w-bg-alt,#f1f5f9); color: var(--w-body,#334155); }
.w-ai-badge--success { background: #dcfce7; color: #166534; }
.w-ai-badge--info { background: #e0f2fe; color: #075985; }
.w-ai-badge--warning { background: #fef3c7; color: #92400e; }
.w-ai-badge--muted { background: var(--w-bg-alt,#f1f5f9); color: var(--w-muted,#64748b); }
.w-ai-badge--featured { background: #fde68a; color: #92400e; }
.w-ai-card-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; }
.w-ai-views { font-size: .8rem; color: var(--w-muted,#6b7280); }
.w-ai-actions { display: flex; gap: .4rem; margin-left: auto; }

/* --- Empty state --- */
.w-ai-empty { text-align: center; padding: 3rem 1rem; color: var(--w-muted,#6b7280); }
.w-ai-empty i { font-size: 2.4rem; display: block; margin-bottom: .6rem; opacity: .5; }

/* --- Filters bar --- */
.w-ai-filters { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; margin-bottom: 1.2rem;
    padding: 1rem; border: 1px solid var(--w-border,#e5e7eb); border-radius: var(--w-radius,12px); background: var(--w-bg-alt,#f9fafb); }
.w-ai-filters .fld { display: flex; flex-direction: column; font-size: .8rem; }
.w-ai-filters select, .w-ai-filters input { padding: .45rem .6rem; border: 1px solid var(--w-border,#e5e7eb); border-radius: 8px; }

/* --- Detail page --- */
.w-ai-detail-head { display: flex; gap: 1.2rem; align-items: flex-start; flex-wrap: wrap;
    padding: 1.4rem; border: 1px solid var(--w-border,#e5e7eb); border-radius: var(--w-radius-lg,16px); background: var(--w-bg,#fff); }
.w-ai-detail-head .logo { width: 72px; height: 72px; object-fit: contain; border-radius: 14px; border: 1px solid var(--w-border,#eee); flex: 0 0 auto; }
.w-ai-detail-head .logo.w-ai-initial { border: 0; }
.w-ai-detail-head .min-w-0 { min-width: 0; }
.w-ai-detail-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.w-ai-detail-head h1 { margin: 0 0 .3rem; font-size: clamp(1.4rem, 3.5vw, 2rem); }
.w-ai-detail-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.w-ai-block { margin-top: var(--w-space-5, 1.8rem); }
.w-ai-block h2 { font-size: 1.25rem; margin-bottom: .6rem; }
.w-ai-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.w-ai-proscons ul { margin: 0; padding-left: 1.1rem; }
.w-ai-spec { width: 100%; border-collapse: collapse; }
.w-ai-spec th, .w-ai-spec td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--w-border,#eee); font-size: .92rem; }
.w-ai-spec th { width: 40%; color: var(--w-muted,#6b7280); font-weight: 600; }
/* The global .w-card has height:100% (for equal-height grids). In the sidebar
   that stretched the CTA card to the full column height and pushed the related
   blocks out of the column, over the footer. */
.w-ai-side .w-card { height: auto; }

@media (max-width: 575.98px) {
    .w-ai-proscons { grid-template-columns: 1fr; }
    .w-ai-detail-head { padding: 1rem; gap: .9rem; }
    .w-ai-detail-head .logo { width: 56px !important; height: 56px !important; --s: 56px !important; }
    .w-ai-detail-actions .btn { flex: 1 1 auto; }
    .w-ai-detail-actions .btn:first-child { flex-basis: 100%; }
    .w-ai-grid { grid-template-columns: 1fr; }
    .w-ai-hero { border-radius: var(--w-radius, 12px); }
}

/* ---------------------------------------------- Prompts / News / Finder --- */
.w-prompt-box { background: var(--w-bg-alt,#f8fafc); border: 1px solid var(--w-border,#e5e7eb);
    border-radius: var(--w-radius,12px); padding: 1rem; white-space: pre-wrap; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .92rem; line-height: 1.6; }
.w-var-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: .7rem; margin: 1rem 0; }
.w-var-grid label { font-size: .8rem; color: var(--w-muted,#6b7280); display: block; }
.w-var-grid input { width: 100%; padding: .45rem .6rem; border: 1px solid var(--w-border,#e5e7eb); border-radius: 8px; }
.w-copy-btn { cursor: pointer; }
.w-diff { font-size: .72rem; font-weight: 600; padding: .2rem .5rem; border-radius: 6px; text-transform: capitalize; }
.w-diff-beginner { background:#dcfce7;color:#166534; } .w-diff-intermediate { background:#fef3c7;color:#92400e; } .w-diff-advanced { background:#fee2e2;color:#991b1b; }

.w-news-card { border:1px solid var(--w-border,#e5e7eb); border-radius:var(--w-radius,12px); overflow:hidden; background:var(--w-bg,#fff); display:flex; flex-direction:column; }
.w-news-card img { width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--w-bg-alt,#f1f5f9); }
.w-news-card .body { padding:1rem; display:flex; flex-direction:column; gap:.4rem; }
.w-news-card h3 { font-size:1.02rem; margin:0; line-height:1.3; }
.w-news-card h3 a { color:var(--w-heading,#0f172a); text-decoration:none; }
.w-news-meta { font-size:.78rem; color:var(--w-muted,#6b7280); }
.w-source-note { font-size:.85rem; background:var(--w-bg-alt,#f8fafc); border-left:3px solid var(--w-primary,#02162d); padding:.6rem .9rem; border-radius:0 8px 8px 0; }

/* Comparison table */
.w-cmp-table { width:100%; border-collapse:collapse; }
.w-cmp-table th, .w-cmp-table td { padding:.6rem .8rem; border-bottom:1px solid var(--w-border,#eee); text-align:left; font-size:.92rem; }
.w-cmp-table thead th { background:var(--w-bg-alt,#f8fafc); }
.w-cmp-table td:first-child { color:var(--w-muted,#6b7280); font-weight:600; width:34%; }

/* Finder wizard */
.w-finder-q { border:1px solid var(--w-border,#e5e7eb); border-radius:var(--w-radius,12px); padding:1.1rem; margin-bottom:1rem; background:var(--w-bg,#fff); }
.w-finder-q h3 { font-size:1.05rem; margin:0 0 .7rem; }
.w-finder-opts { display:flex; flex-wrap:wrap; gap:.5rem; }
.w-finder-opt { border:1px solid var(--w-border,#e5e7eb); border-radius:999px; padding:.45rem .9rem; cursor:pointer; font-size:.9rem; }
.w-finder-opt input { margin-right:.35rem; }
.w-finder-opt:has(input:checked) { border-color:var(--w-primary,#02162d); background:var(--w-primary,#02162d); color:#fff; }

/* Rating */
.w-stars { color:#f59e0b; letter-spacing:1px; }
.w-rating-bar { height:8px; background:var(--w-bg-alt,#eef2f7); border-radius:4px; overflow:hidden; flex:1; }
.w-rating-bar span { display:block; height:100%; background:#f59e0b; }
.w-review { border-top:1px solid var(--w-border,#eee); padding:.9rem 0; }
.w-match-badge { background:#dcfce7; color:#166534; font-weight:700; border-radius:999px; padding:.25rem .7rem; font-size:.85rem; }

/* ------------------------------------------------------- Compare tray --- */
/* Default (tablet/laptop): a centred bar at the bottom. Phones: above the bottom
   nav. Wide screens (≥1280px, where the page margin has room): a vertical stack
   on the right edge. */
.w-ai-tray {
    position: fixed; z-index: 1045; bottom: 16px; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: row; align-items: center; gap: .6rem;
    padding: .5rem .6rem; background: var(--w-bg,#fff); border: 1px solid var(--w-border,#e5e7eb);
    border-radius: 14px; box-shadow: 0 12px 32px rgba(2,22,45,.18);
    animation: wAiTrayUp .2s ease-out;
}
@keyframes wAiTrayUp { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
.w-ai-tray-items { display: flex; flex-direction: row; gap: .55rem; }
.w-ai-tray-item { position: relative; width: 42px; height: 42px; }
.w-ai-tray-item img, .w-ai-tray-item .w-ai-initial { width: 42px; height: 42px; --s: 42px; border-radius: 10px; }
.w-ai-tray-item img { object-fit: contain; border: 1px solid var(--w-border,#eee); background: #fff; }
.w-ai-tray-x {
    position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%;
    border: 0; background: #dc2626; color: #fff; font-size: 13px; line-height: 18px; padding: 0; cursor: pointer;
}
.w-ai-tray-go {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    height: 40px; padding: 0 .85rem; border-radius: 10px; background: var(--w-primary,#02162d); color: #fff;
    text-decoration: none; font-weight: 600; font-size: .85rem; white-space: nowrap;
}
.w-ai-tray-go:hover { color: #fff; filter: brightness(1.15); }
.w-ai-tray-go.is-disabled { opacity: .45; cursor: not-allowed; }
.w-ai-tray-clear { border: 0; background: none; color: var(--w-muted,#6b7280); font-size: .9rem; padding: .25rem; cursor: pointer; }
.w-ai-tray-clear:hover { color: #dc2626; }

@media (max-width: 767.98px) {
    /* Above the bottom nav (≈62px), left of the back-to-top button (right 18px, 44px wide). */
    .w-ai-tray { bottom: calc(70px + env(safe-area-inset-bottom)); left: 12px; right: 72px; transform: none; gap: .4rem; }
    .w-ai-tray-items { gap: .45rem; }
    .w-ai-tray-item, .w-ai-tray-item img, .w-ai-tray-item .w-ai-initial { width: 36px; height: 36px; --s: 36px; }
    .w-ai-tray-go { margin-left: auto; height: 36px; padding: 0 .6rem; font-size: .8rem; }
}
@media (min-width: 1280px) {
    .w-ai-tray { bottom: auto; top: 50%; left: auto; right: 16px; transform: translateY(-50%); flex-direction: column; animation-name: wAiTrayIn; }
    @keyframes wAiTrayIn { from { opacity: 0; translate: 12px 0; } to { opacity: 1; translate: 0 0; } }
    .w-ai-tray-items { flex-direction: column; gap: .5rem; }
    .w-ai-tray-item, .w-ai-tray-item img, .w-ai-tray-item .w-ai-initial { width: 44px; height: 44px; --s: 44px; }
    .w-ai-tray-go { width: 44px; padding: 0; }
    .w-ai-tray-label { display: none; }
}

/* ------------------------------------------------ Side-by-side compare --- */
.w-cmp-add { max-width: 520px; margin-bottom: 1.2rem; }
.w-cmp-add .w-ai-suggest { top: calc(100% + 4px); }
.w-cmp-add .w-ai-suggest .w-ai-initial { --s: 26px; border-radius: 6px; }
.w-cmp-scroll {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border: 1px solid var(--w-border,#e5e7eb); border-radius: var(--w-radius,12px); background: var(--w-bg,#fff);
}
.w-cmp-multi { min-width: calc(150px + var(--cols, 2) * 190px); margin: 0; }
.w-cmp-multi th, .w-cmp-multi td { vertical-align: top; border-bottom: 1px solid var(--w-border,#eee); }
.w-cmp-multi td { width: calc((100% - 170px) / var(--cols, 2)); font-size: .9rem; }
.w-cmp-multi td:first-child { width: auto; } /* override the 2-tool table's first-column rule */
/* Labels stay visible while the tool columns scroll sideways. */
.w-cmp-multi .w-cmp-label {
    position: sticky; left: 0; z-index: 2; width: 170px; min-width: 150px;
    background: var(--w-bg-alt,#f8fafc); color: var(--w-muted,#6b7280); font-weight: 600; font-size: .85rem;
    box-shadow: 1px 0 0 var(--w-border,#eee);
}
.w-cmp-multi thead th { background: var(--w-bg,#fff); }
.w-cmp-multi thead .w-cmp-label { background: var(--w-bg-alt,#f8fafc); }
.w-cmp-head { position: relative; text-align: center !important; padding-top: 1rem !important; }
.w-cmp-head .w-ai-logo, .w-cmp-head .w-ai-initial { display: flex; margin: 0 auto .5rem; }
.w-cmp-name { display: block; font-weight: 700; color: var(--w-heading,#0f172a); text-decoration: none; line-height: 1.25; }
.w-cmp-remove {
    position: absolute; top: .4rem; right: .4rem; width: 26px; height: 26px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; font-size: .75rem;
    color: var(--w-muted,#6b7280); background: var(--w-bg-alt,#f1f5f9); text-decoration: none;
}
.w-cmp-remove:hover { background: #fee2e2; color: #b91c1c; }
.w-cmp-group th, .w-cmp-group td {
    background: #eef2f7 !important; color: var(--w-heading,#0f172a) !important;
    font-size: .72rem !important; text-transform: uppercase; letter-spacing: .06em; padding: .45rem .8rem !important;
}
.w-cmp-yes { color: #15803d; font-weight: 600; white-space: nowrap; }
.w-cmp-no { color: var(--w-muted,#6b7280); white-space: nowrap; }
.w-cmp-list, .w-cmp-rich ul, .w-cmp-rich ol { margin: 0; padding-left: 1.05rem; }
.w-cmp-list li, .w-cmp-rich li { margin-bottom: .2rem; }
.w-cmp-rich p { margin-bottom: .4rem; }
@media (max-width: 767.98px) {
    .w-cmp-multi { min-width: calc(112px + var(--cols, 2) * 168px); }
    .w-cmp-multi .w-cmp-label { width: 112px; min-width: 112px; font-size: .78rem; }
    .w-cmp-multi td { font-size: .85rem; }
}

/* Submit-a-tool confirmation */
.w-submit-done { border-color: #bbf7d0; background: #f0fdf4; }
.w-submit-done .bi-check-circle-fill { font-size: 2.6rem; color: #16a34a; display: block; margin-bottom: .5rem; }