/* =========================================================
   TOOL SHELL
   assets/css/components/tool-shell.css
   =========================================================
   Shared workspace shell for generator tools (spacing, radius,
   shadow, layout — and Typography once wired).

   Provides the reusable chrome ONLY:
     • Hero (full-width, gradient + decorative arcs)
     • Two-column workspace (sticky sidebar + main)
     • Health-check status bar
     • Preview area + panels + device toggle
     • Mobile drawer (sidebar → slide-up overlay)

   Does NOT style:
     • tool controls mounted INTO the sidebar (each tool's CSS)
     • preview CONTENT inside the panels (each tool's CSS)

   Per-tool identity is set via CSS variables (no structural change):
     --tool-hero-grad-1 / --tool-hero-grad-2  hero gradient tints
     --tool-deco-1 / --tool-deco-2            decorative arc colors
   Defaults below reproduce the Typography Builder look exactly, so a
   tool that overrides nothing renders identically.

   All values use existing website design-system variables.
   Class prefix: tool-
   ========================================================= */


/* =========================================================
   HERO — full-width section above the workspace
   ========================================================= */

.tool-hero-section {
    width: 100%;
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: var(--space-10) var(--space-6);

    background:
        radial-gradient(ellipse 60% 100% at 0% 60%,   var(--tool-hero-grad-1, rgba(145, 45, 110, 0.10)) 0%, transparent 70%),
        radial-gradient(ellipse 60% 100% at 100% 40%, var(--tool-hero-grad-2, rgba(79, 80, 145, 0.09)) 0%, transparent 70%),
        var(--surface-primary);
}

.tool-hero-deco {
    position: absolute;
    width: 360px;
    height: 360px;
    pointer-events: none;
}

.tool-hero-deco--left {
    bottom: -60px;
    left: -60px;
    color: var(--tool-deco-1, #912D6E);
    opacity: 0.18;
}

.tool-hero-deco--right {
    top: -60px;
    right: -60px;
    color: var(--tool-deco-2, #4F5091);
    opacity: 0.15;
}

/* Dark mode: Font Pairing and Shadow set deco-2 to #0F172A (a subtle near-black
   on the light hero), which equals the dark background and vanishes. Give those
   right-side decorations a visible neutral tone in dark mode. */
[data-theme="dark"] [data-page="font-pairing-builder"] .tool-hero-deco--right,
[data-theme="dark"] [data-page="shadow-builder"] .tool-hero-deco--right {
    color: #64748b;
    opacity: 0.32;
}

.tool-hero-content {
    position: relative;
    z-index: 1;
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.tool-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.35rem 0.9rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.80);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-semi-bold);
    margin-bottom: var(--space-2);
    border: 1px solid var(--border-primary);
    backdrop-filter: blur(4px);
    letter-spacing: 0.01em;
}

/* Hero trust chips — informational pill row above the title */
.tool-hero-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.tool-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.3rem 0.7rem;
    border-radius: 9999px;
    background: var(--color-primary-soft);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-semi-bold);
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
}

.tool-hero-chip-icon {
    display: inline-flex;
    color: var(--color-primary);
}

.tool-hero-chip-icon svg { display: block; }

.tool-hero-title {
    font-size: var(--text-6xl);
    font-weight: var(--font-extra-bold);
    letter-spacing: var(--tracking-tight);
    line-height: 1.08;
    margin: 0 0 var(--space-5) 0;
    color: var(--text-primary);
}

.tool-hero-subtitle {
    font-size: var(--text-md);
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.65;
    max-width: 520px;
}


/* =========================================================
   WORKSPACE — two-column grid (sticky sidebar + main)
   ========================================================= */

.tool-workspace-section {
    width: 100%;
    padding: 0 var(--space-6) var(--space-16);
    background: var(--bg-primary);
    margin-top: calc(-1 * var(--space-5));
}

.tool-workspace {
    --tool-rail-w: 56px;
    --tool-panel-w: 280px;
    display: grid;
    /* Default desktop: panel open, no rail column (original two-column look). */
    grid-template-columns: var(--tool-panel-w) 1fr;
    gap: var(--space-6);
    max-width: 1440px;
    margin: 0 auto;
    align-items: start;
}

/* Panel collapsed to the rail (desktop): swap the sidebar column for the rail.
   The rail/panel show-hide is an opacity crossfade on desktop (see the
   ≥1025 block below); tablet/mobile use display + the flyout/sheet. */
.tool-workspace--rail {
    grid-template-columns: var(--tool-rail-w) 1fr;
}

.tool-sidebar {
    position: sticky;
    top: var(--space-6);
    overflow-y: auto;
}

/* Inner mount — the ONLY element controls clear/rebuild; chrome around it
   (close header, collapse button) lives in the aside and survives. */
.tool-sidebar-body {
    min-width: 0;
}

.tool-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

/* =========================================================
   COLLAPSE BUTTON — desktop control that collapses panel → rail.
   Sits at the panel's top-right; pinned with the sticky sidebar.
   ========================================================= */

.tool-sidebar-collapse {
    position: absolute;
    top: 13px;            /* vertically centred against the ~56px panel header */
    right: var(--space-3);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast);
}

.tool-sidebar-collapse:hover {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* =========================================================
   CONTROLS RAIL — slim toggle. Hidden by default on desktop
   (shown only when collapsed); always visible on tablet.
   ========================================================= */

.tool-rail {
    position: sticky;
    top: var(--space-6);
    align-self: start;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    width: var(--tool-rail-w);
    padding: var(--space-4) var(--space-2) var(--space-5);
    background: var(--surface-primary);
    border: 1px solid var(--border-primary);
    border-radius: 1rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast);
}

.tool-rail:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.tool-rail-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--surface-secondary);
    color: var(--text-secondary);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.tool-rail:hover .tool-rail-icon {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.tool-rail-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-semi-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* =========================================================
   DESKTOP COLLAPSE ANIMATION (≥1025)
   Rail + panel share column 1 and crossfade while the grid
   column width animates. The panel body is a fixed width so its
   controls don't reflow as the column shrinks/grows.
   ========================================================= */
@media (min-width: 1025px) {
    /* The auto first column follows the sidebar's animated width; the 1fr preview
       fills the rest. Animating the sidebar's WIDTH (not the grid tracks) is
       reliably smooth across browsers. */
    .tool-workspace {
        grid-template-columns: auto 1fr;
    }

    .tool-rail,
    .tool-sidebar {
        grid-area: 1 / 1;   /* stack in the same column for the crossfade */
    }

    .tool-sidebar {
        width: var(--tool-panel-w);
        overflow-x: hidden;
        opacity: 1;
        visibility: visible;
        transition:
            width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.2s ease,
            visibility 0.2s ease;
    }

    /* Fixed inner width so controls don't reflow as the column shrinks/grows. */
    .tool-sidebar-body {
        width: var(--tool-panel-w);
    }

    .tool-rail {
        display: flex;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.2s ease, visibility 0.2s ease;
    }

    .tool-workspace--rail .tool-sidebar {
        width: var(--tool-rail-w);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .tool-workspace--rail .tool-rail {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Reserve room for the collapse button so the heading never runs under it. */
    .tb-panel-header,
    .sp-panel-header,
    .rd-panel-header,
    .sh-panel-header,
    .fp-panel-header {
        padding-right: 44px;
    }

    .tb-panel-header-title,
    .sp-panel-header-title,
    .rd-panel-header-title,
    .sh-panel-header-title,
    .fp-panel-header-title {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* =========================================================
   PANEL HEADER — unified across all tools (icon + heading).
   Single source of truth; per-tool header CSS was removed so
   every controls panel shares this exact style.
   ========================================================= */
.tb-panel-header,
.sp-panel-header,
.rd-panel-header,
.sh-panel-header,
.fp-panel-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-primary);
    background: var(--surface-primary);
}

.tb-panel-header-icon,
.sp-panel-header-icon,
.rd-panel-header-icon,
.sh-panel-header-icon,
.fp-panel-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 0.5rem;
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.tb-panel-header-title,
.sp-panel-header-title,
.rd-panel-header-title,
.sh-panel-header-title,
.fp-panel-header-title {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    letter-spacing: -0.01em;
}


/* =========================================================
   RESET FOOTER — shared "Reset all" action at the bottom of
   every controls panel. Neutral by default; danger on hover
   (it clears everything). Single source of truth across tools.
   ========================================================= */
.tool-reset-row {
    margin-top: auto;
    padding: var(--space-4);
    border-top: 1px solid var(--border-primary);
}

.tool-reset-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-primary);
    border-radius: 0.625rem;
    background: var(--surface-secondary);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-semi-bold);
    color: var(--text-secondary);
    cursor: pointer;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast);
}

.tool-reset-btn:hover {
    background: rgba(220, 38, 38, 0.08);
    border-color: var(--danger);
    color: var(--danger);
}

.tool-reset-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}


/* =========================================================
   HEALTH CHECK — horizontal status bar
   ========================================================= */

.tool-health-check {
    display: flex;
    align-items: center;
    background: var(--surface-primary);
    border: 1px solid var(--border-primary);
    border-radius: 1rem;
    padding: var(--space-3);
    gap: 0;
    min-width: 0;
    z-index: 1;

    /* Health palette — no design-system equivalents exist */
    --hc-logo-bg:            #0F172A;
    --hc-blue-bg:            #DBEAFE;  --hc-blue-fg:   #2563EB;
    --hc-green-bg:           #DCFCE7;  --hc-green-fg:  #16A34A;
    --hc-purple-bg:          #EDE9FE;  --hc-purple-fg: #7C3AED;
    --hc-amber-bg:           #FEF3C7;  --hc-amber-fg:  #D97706;
    --hc-red-fg:             #DC2626;
    --hc-green-tint:         rgba(22,  163, 74,  0.10);
    --hc-blue-tint:          rgba(37,  99,  235, 0.10);
    --hc-amber-tint:         rgba(217, 119, 6,   0.10);
    --hc-red-tint:           rgba(220, 38,  38,  0.10);
    --hc-badge-excellent-bg: #f0fdf4;
    --hc-badge-good-bg:      #ecfdf5;
    --hc-badge-warning-bg:   #fff7ed;
    --hc-badge-critical-bg:  #fef2f2;
}

.tool-health-identity {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
    padding-right: var(--space-4);
    border-right: 1px solid var(--border-primary);
}

.tool-health-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--hc-logo-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-primary);
}

.tool-health-identity-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.tool-health-title {
    font-size: var(--text-sm);
    font-weight: var(--font-semi-bold);
    color: var(--text-primary);
    white-space: nowrap;
}

.tool-health-metrics {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.tool-health-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-2);
    flex: 1;
    padding: 0 var(--space-3);
    border-right: 1px solid var(--border-primary);
    min-width: 0;
}

/* Icon + title/metric row; the status badge sits centered below it. */
.tool-health-card-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    min-width: 0;
}

.tool-health-card:last-child {
    border-right: none;
}

.tool-health-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tool-health-card-icon--blue   { background: var(--hc-blue-bg);   color: var(--hc-blue-fg); }
.tool-health-card-icon--green  { background: var(--hc-green-bg);  color: var(--hc-green-fg); }
.tool-health-card-icon--purple { background: var(--hc-purple-bg); color: var(--hc-purple-fg); }
.tool-health-card-icon--orange { background: var(--hc-amber-bg);  color: var(--hc-amber-fg); }

.tool-health-card-body {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    overflow: hidden;
}

.tool-health-card-label {
    font-size: var(--text-sm);
    font-weight: var(--font-semi-bold);
    color: var(--text-primary);
    line-height: 1.3;
    white-space: nowrap;
}

.tool-health-card-metric {
    font-size: var(--text-xs);
    font-weight: var(--font-regular);
    color: var(--text-primary);
    line-height: 1.3;
    white-space: nowrap;
}

.tool-health-card-summary {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.2rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: var(--font-semi-bold);
    line-height: 1;
    white-space: nowrap;
    color: var(--text-muted);
    background: var(--surface-secondary);
    align-self: center;
    max-width: 100%;
}

.tool-health-summary--excellent { background: var(--hc-green-tint); color: var(--hc-green-fg); }
.tool-health-summary--good      { background: var(--hc-blue-tint);  color: var(--hc-blue-fg); }
.tool-health-summary--warning   { background: var(--hc-amber-tint); color: var(--hc-amber-fg); }
.tool-health-summary--critical  { background: var(--hc-red-tint);   color: var(--hc-red-fg); }

.tool-health-card-tip { display: none !important; }

.tool-health-check-status {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    font-size: var(--text-xs);
    font-weight: var(--font-semi-bold);
    color: var(--text-muted);
    background: var(--surface-secondary);
    line-height: 1;
    white-space: nowrap;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.tool-health-status--excellent { background: var(--hc-badge-excellent-bg); color: var(--hc-green-fg); }
.tool-health-status--good      { background: var(--hc-badge-good-bg);      color: var(--hc-green-fg); }
.tool-health-status--warning   { background: var(--hc-badge-warning-bg);   color: var(--hc-amber-fg); }
.tool-health-status--critical  { background: var(--hc-badge-critical-bg);  color: var(--hc-red-fg); }


/* =========================================================
   PREVIEW AREA + PANELS
   ========================================================= */

.tool-preview-area {
    min-height: 400px;
    overflow: hidden;
}

.tool-preview-panel {
    display: none;
    width: 100%;
    min-width: 0;

    /* Shared neutral chrome palette for preview content. */
    --preview-bg:        #ffffff;
    --preview-surface:   #f8fafc;
    --preview-text:      #0f172a;
    --preview-muted:     #64748b;
    --preview-border:    #e2e8f0;
    --preview-accent:    #4f46e5;
    --preview-accent-ct: #ffffff;
}

/* Dark-mode preview chrome — opt-in per tool. Palette & Shadow are excluded
   (they manage preview theme separately); Font Pairing already uses site
   tokens. Scoped by data-page so shadow (which shares .tool-preview-panel)
   is not affected. Specificity (0,3,0) overrides the base panel rule. */
[data-theme="dark"] [data-page="typography-builder"] .tb-preview-panel,
[data-theme="dark"] [data-page="spacing-builder"]   .tool-preview-panel,
[data-theme="dark"] [data-page="radius-builder"]    .tool-preview-panel {
    --preview-bg:        #1e293b;
    --preview-surface:   #0f172a;
    --preview-text:      #f1f5f9;
    --preview-muted:     #94a3b8;
    --preview-border:    #334155;
    --preview-accent:    #818cf8;
    --preview-accent-ct: #ffffff;
}

.tool-preview-panel--active {
    display: block;
}

/* Opt-in: panels that centre a device frame (e.g. mobile previews) */
.tool-preview-panel--center.tool-preview-panel--active {
    display: flex;
    justify-content: center;
}


/* =========================================================
   DEVICE TOGGLE — Desktop / Mobile segmented control
   Lives at the right edge of the .tool-tabs-nav row.
   ========================================================= */

.tool-device-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: auto;
    flex-shrink: 0;
    background: var(--surface-primary);
    border: 1px solid var(--border-primary);
    border-radius: 0.5rem;
    padding: 0.15rem;
}

.tool-device-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    border: none;
    background: transparent;
    border-radius: 0.4rem;
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.tool-device-btn:hover {
    color: var(--text-primary);
}

.tool-device-btn--active {
    background: var(--color-primary);
    color: var(--text-inverse);
    font-weight: var(--font-semi-bold);
}

/* ── Small mobile — icon-only device toggle, Desktop disabled ──
   Mirrors the tab icon-only breakpoint (tabs.css). The toggle's
   full-text buttons were crowding the tab row enough to push
   the other tabs out; "Desktop" preview also doesn't make sense
   on a real mobile viewport, so it's dropped entirely, leaving
   Mobile as the only (icon-only) option. ─────────────────────── */
@media (max-width: 767px) {
    .tool-device-btn span {
        display: none;
    }

    .tool-device-btn[data-device="desktop"] {
        display: none;
    }
}


/* =========================================================
   OVERLAY TOGGLE — single circular on/off button
   Sits next to .tool-device-toggle in the .tool-tabs-nav row.
   ========================================================= */

.tool-overlay-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    margin-left: 0.35rem;
    border: 1px solid var(--border-primary);
    border-radius: 50%;
    background: var(--surface-primary);
    color: var(--text-muted);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.tool-overlay-toggle:hover {
    color: var(--text-primary);
    border-color: var(--color-primary);
}

.tool-overlay-toggle--active {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: var(--shadow-sm), 0 0 0 3px var(--color-primary-soft);
}


/* =========================================================
   MOBILE DRAWER ELEMENTS — hidden on desktop, revealed below
   ========================================================= */

.tool-sidebar-backdrop { display: none; }
.tool-sidebar-close    { display: none; }
.tool-mobile-bar       { display: none; }


/* =========================================================
   CLOSE HEADER — shared by the bottom sheet (≤768) and tablet
   flyout (769–1024). Hidden on desktop via the display:none
   above; each breakpoint flips it back to display:flex.
   ========================================================= */

/* Drag-to-dismiss: drop the slide transition while the finger is down so the
   sheet tracks the touch 1:1 (re-enabled on release to animate the snap). */
.tool-sidebar--dragging { transition: none; }

.tool-sidebar-close {
    position: sticky;
    top: 0;
    z-index: 2;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    padding: calc(var(--space-4) + 10px) var(--space-5) var(--space-4);
    background: var(--surface-primary);
    border: none;
    border-bottom: 1px solid var(--border-primary);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    font-family: var(--font-primary);
    font-size: var(--text-md);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    flex-shrink: 0;
    letter-spacing: -0.01em;
}

/* Grab handle — pinned to the top of the sticky header so it stays visible
   and signals the sheet is draggable / dismissable. */
.tool-sidebar-close::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 5px;
    border-radius: 999px;
    background: var(--border-secondary);
}

.tool-sidebar-close-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Explicit close affordance on the right — reads instantly as "tap to close". */
.tool-sidebar-close-action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.tool-sidebar-close-hint {
    font-size: var(--text-sm);
    font-weight: var(--font-semi-bold);
    color: var(--text-secondary);
    letter-spacing: 0;
}

.tool-sidebar-close-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--surface-secondary);
    border: 1px solid var(--border-primary);
    color: var(--text-secondary);
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast);
}

.tool-sidebar-close:hover .tool-sidebar-close-icon,
.tool-sidebar-close:active .tool-sidebar-close-icon {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.tool-sidebar-close:hover .tool-sidebar-close-hint {
    color: var(--color-primary);
}

.tool-sidebar-close svg {
    flex-shrink: 0;
}


/* =========================================================
   RESPONSIVE — shell only (preview content lives per tool)
   ========================================================= */

/* ── Tablet ≤ 1024px ── */
@media (max-width: 1024px) {

    .tool-hero-section {
        padding: var(--space-12) var(--space-5) var(--space-10);
    }

    .tool-hero-title {
        font-size: 2.75rem;
    }

    /* Tablet: preview is full-width; the panel is a flyout and its trigger is a
       floating button (both fixed / out of flow), so no rail column is needed. */
    .tool-workspace,
    .tool-workspace--rail {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    /* Desktop-only collapse control; tablet/mobile use the flyout/sheet header. */
    .tool-sidebar-collapse { display: none; }

    .tool-workspace-section {
        padding: var(--space-6) var(--space-5) var(--space-12);
    }
}


/* ── Tablet flyout panel — 769–1024px ── */
@media (min-width: 769px) and (max-width: 1024px) {

    /* Sidebar slides in from the left over the preview; rail stays as the trigger. */
    .tool-sidebar,
    .tool-workspace--rail .tool-sidebar {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 360px;
        max-width: 88vw;
        z-index: 1000;
        background: var(--bg-primary);
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
        scrollbar-width: none;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
    }

    .tool-sidebar::-webkit-scrollbar { display: none; }

    .tool-sidebar--open { transform: translateX(0); }

    .tool-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 999;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    .tool-sidebar-backdrop--visible {
        opacity: 1;
        pointer-events: auto;
    }

    /* Show the sticky close header (with grab handle) inside the flyout. */
    .tool-sidebar-close { display: flex; }

    /* Trigger becomes a bottom-left floating action button (opens the flyout).
       Sits below the flyout/backdrop so it's covered by the dim when open. */
    .tool-rail {
        position: fixed;
        top: auto;
        bottom: var(--space-6);
        left: var(--space-6);
        z-index: 997;
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        width: auto;
        height: auto;
        padding: var(--space-4) var(--space-5);
        border: none;
        border-radius: 999px;
        background: var(--color-primary);
        color: var(--text-inverse);
        box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.45);
        transition:
            transform var(--transition-fast),
            box-shadow var(--transition-fast),
            filter var(--transition-fast);
    }

    .tool-rail:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.5);
        filter: brightness(1.05);
    }

    /* Extended FAB: icon + horizontal "Controls" label. */
    .tool-rail-text {
        display: block;
        writing-mode: horizontal-tb;
        transform: none;
        font-family: var(--font-primary);
        font-size: var(--text-sm);
        font-weight: var(--font-semi-bold);
        letter-spacing: 0.01em;
        text-transform: none;
        color: inherit;
    }

    .tool-rail-icon,
    .tool-rail:hover .tool-rail-icon {
        width: auto;
        height: auto;
        background: transparent;
        color: inherit;
    }

    .tool-rail svg {
        width: 20px;
        height: 20px;
    }
}


/* ── Mobile drawer ≤ 768px ── */
@media (max-width: 768px) {

    .tool-hero-section {
        padding: var(--space-10) var(--space-4) var(--space-8);
    }

    .tool-hero-title    { font-size: 2.25rem; }
    .tool-hero-subtitle { font-size: var(--text-sm); }

    .tool-hero-deco {
        width: 220px;
        height: 220px;
    }

    .tool-workspace-section {
        padding: var(--space-5) var(--space-4) calc(var(--space-10) + 72px);
    }

    .tool-workspace {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    /* Rail is replaced by the bottom "Edit" bar on phones. */
    .tool-rail { display: none; }

    /* Sidebar → full-screen slide-up drawer */
    .tool-sidebar {
        position: fixed;
        inset: 0;
        z-index: 1000;
        background: var(--bg-primary);
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        display: flex;
        flex-direction: column;
    }

    .tool-sidebar::-webkit-scrollbar { display: none; }

    .tool-sidebar--open { transform: translateY(0); }

    .tool-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 999;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    .tool-sidebar-backdrop--visible {
        opacity: 1;
        pointer-events: auto;
    }

    /* Bottom-sheet header shown (full styling defined globally — see CLOSE HEADER). */
    .tool-sidebar-close { display: flex; }

    .tool-mobile-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        padding: var(--space-3) var(--space-4);
        background: var(--surface-primary);
        border-top: 1px solid var(--border-primary);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    }

    .tool-mobile-bar-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        width: 100%;
        padding: var(--space-3) var(--space-4);
        background: var(--color-primary);
        color: var(--text-inverse);
        border: none;
        border-radius: 0.75rem;
        font-family: var(--font-primary);
        font-size: var(--text-sm);
        font-weight: var(--font-semi-bold);
        cursor: pointer;
        min-height: 48px;
        transition: opacity var(--transition-fast);
    }

    .tool-mobile-bar-btn:hover  { opacity: 0.9; }
    .tool-mobile-bar-btn:active { opacity: 0.8; }

    /* Generic touch sizing for controls mounted in the drawer */
    .tool-section { padding: var(--space-4); }

    .tool-dropdown-card { padding: 0.75rem 1rem; }

    .tool-dropdown-opt {
        padding: 0.65rem 1rem;
        min-height: 44px;
    }

    /* Health bar — compact (stays one row until 540px) */
    .tool-health-check   { padding: var(--space-3); gap: 0; }
    .tool-health-identity { padding-right: var(--space-3); flex-shrink: 0; }
    .tool-health-logo    { width: 34px; height: 34px; }
    .tool-health-card    { padding: 0 var(--space-3); gap: var(--space-2); }
    .tool-health-card-icon { width: 30px; height: 30px; }
    .tool-health-card-label,
    .tool-health-card-metric { font-size: 0.7rem; }
    .tool-health-card-summary { font-size: 0.625rem; padding: 0.15rem 0.4rem; }
    .tool-health-title   { font-size: var(--text-xs); }
}


/* ── Narrow phone ≤ 540px — health stacks 2×2 ── */
@media (max-width: 540px) {

    .tool-health-check {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
        padding: var(--space-3);
    }

    .tool-health-identity {
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid var(--border-primary);
        padding-bottom: var(--space-3);
    }

    .tool-health-metrics {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2);
    }

    .tool-health-card {
        border-right: none;
        padding: var(--space-2) var(--space-3);
        background: var(--surface-secondary);
        border-radius: 0.625rem;
        gap: var(--space-2);
    }

    .tool-health-card-icon { width: 32px; height: 32px; }

    .tool-health-card-label,
    .tool-health-card-metric { font-size: var(--text-xs); }
}


/* ── Small phone ≤ 480px ── */
@media (max-width: 480px) {

    .tool-hero-section {
        padding: var(--space-8) var(--space-4) var(--space-6);
    }

    .tool-hero-title { font-size: 1.85rem; }
    .tool-hero-badge { font-size: 0.6875rem; }

    .tool-workspace-section {
        padding: var(--space-4) var(--space-3) calc(var(--space-8) + 72px);
    }

    .tool-dropdown-card { padding: 0.65rem 0.875rem; }
}


/* ── Tiny phone ≤ 360px ── */
@media (max-width: 360px) {

    .tool-hero-title { font-size: 1.65rem; }

    .tool-workspace-section {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }

    .tool-section { padding: var(--space-3); }

    .tool-mobile-bar { padding: var(--space-2) var(--space-3); }
}


/* =========================================================
   SEO BODY SECTIONS — how-to / FAQ / related / custom
   Rendered by templates/seo-sections.php beneath the workspace.
   Shared across every tool; styled with the website design system.
   ========================================================= */

.tool-seo-sections {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: var(--space-12) var(--space-6) var(--space-24);
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    background: var(--bg-primary);
}

.tool-seo-section { min-width: 0; }

.tool-seo-heading {
    font-family: var(--font-primary);
    font-size: var(--text-3xl);
    font-weight: var(--font-extra-bold);
    line-height: var(--leading-tight);
    color: var(--text-primary);
    margin: 0 0 var(--space-3);
    letter-spacing: -0.02em;
}

.tool-seo-intro {
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    color: var(--text-muted);
    margin: 0 0 var(--space-6);
    max-width: 60ch;
}

/* Centered section headers for FAQ / Related (How-to uses a 2-col left header) */
.tool-seo-faq .tool-seo-heading,
.tool-seo-related .tool-seo-heading {
    text-align: center;
}

.tool-seo-faq .tool-seo-intro,
.tool-seo-related .tool-seo-intro {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* ── How to use — 2-column (sticky header + vertical numbered timeline) ── */
.tool-seo-howto-layout {
    display: grid;
    grid-template-columns: minmax(240px, 320px) 1fr;
    gap: var(--space-12);
    align-items: start;
}

.tool-seo-howto-header {
    position: sticky;
    top: var(--space-8);
}

.tool-seo-howto-header .tool-seo-heading { margin-bottom: var(--space-3); }
.tool-seo-howto-header .tool-seo-intro { margin-bottom: 0; }

.tool-seo-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tool-seo-tl-step {
    position: relative;
    display: grid;
    grid-template-columns: 1.75rem 1fr;
    gap: var(--space-4);
    padding-bottom: var(--space-8);
}

.tool-seo-tl-step:last-child { padding-bottom: 0; }

/* connector line running through the node centers */
.tool-seo-tl-step::before {
    content: "";
    position: absolute;
    left: calc(1.75rem / 2 - 1px);
    top: 1.75rem;
    bottom: 0;
    width: 2px;
    background: var(--border-primary);
}

.tool-seo-tl-step:last-child::before { display: none; }

.tool-seo-tl-node {
    position: relative;
    z-index: 1;
    width: 1.75rem;
    height: 1.75rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-primary);
    color: #ffffff;
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
}

.tool-seo-tl-body { padding-top: 0.1rem; }

.tool-seo-tl-title {
    font-family: var(--font-primary);
    font-size: var(--text-md);
    font-weight: var(--font-semi-bold);
    color: var(--text-primary);
    margin: 0 0 var(--space-1);
}

.tool-seo-tl-text {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--text-muted);
    margin: 0;
}

@media (max-width: 768px) {
    .tool-seo-howto-layout {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    .tool-seo-howto-header { position: static; }
}

/* ── FAQ — native <details> accordions ── */
.tool-seo-faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.tool-seo-faq-item {
    background: var(--surface-primary);
    border: 1px solid var(--border-primary);
    border-radius: 0.75rem;
    overflow: hidden;
}

.tool-seo-faq-item[open] {
    border-color: var(--color-primary);
}

.tool-seo-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    list-style: none;
    font-size: var(--text-md);
    font-weight: var(--font-semi-bold);
    color: var(--text-primary);
    transition: background var(--transition-fast);
}

.tool-seo-faq-q::-webkit-details-marker { display: none; }
.tool-seo-faq-q:hover { background: var(--surface-hover); }

.tool-seo-faq-icon {
    flex: 0 0 auto;
    position: relative;
    width: 0.875rem;
    height: 0.875rem;
}

.tool-seo-faq-icon::before,
.tool-seo-faq-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--text-muted);
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.tool-seo-faq-icon::before { width: 0.875rem; height: 2px; }
.tool-seo-faq-icon::after  { width: 2px; height: 0.875rem; }

.tool-seo-faq-item[open] .tool-seo-faq-icon::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }
.tool-seo-faq-item[open] .tool-seo-faq-icon::before { background: var(--color-primary); }

.tool-seo-faq-a {
    padding: 0 var(--space-5) var(--space-5);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
}

.tool-seo-faq-a a { color: var(--color-primary); }

/* ── Related tools — cross-link cards ── */
.tool-seo-related-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
}

.tool-seo-related-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1 1 240px;
    max-width: 320px;
    gap: var(--space-1);
    padding: var(--space-5);
    background: var(--surface-primary);
    border: 1px solid var(--border-primary);
    border-radius: 0.75rem;
    text-decoration: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.tool-seo-related-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.tool-seo-related-name {
    font-size: var(--text-md);
    font-weight: var(--font-semi-bold);
    color: var(--text-primary);
}

.tool-seo-related-desc {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--text-muted);
}

.tool-seo-related-arrow {
    color: var(--color-primary);
    font-size: var(--text-lg);
    line-height: 1;
    margin-top: var(--space-1);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.tool-seo-related-card:hover .tool-seo-related-arrow {
    opacity: 1;
    transform: translateY(0);
}

/* ── "Why use" features — badge + 3-col card grid + highlight callout ── */
.tool-seo-features-header {
    text-align: center;
    max-width: 60ch;
    margin: 0 auto var(--space-8);
}

.tool-seo-badge {
    display: inline-block;
    margin-bottom: var(--space-4);
    padding: var(--space-1) var(--space-3);
    border-radius: 9999px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tool-seo-features-header .tool-seo-heading { margin-bottom: var(--space-3); }
.tool-seo-features-header .tool-seo-intro { margin: 0 auto; }

.tool-seo-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.tool-seo-feature-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    background: var(--surface-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 0.875rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.tool-seo-feature-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.tool-seo-feature-icon {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.tool-seo-feature-title {
    font-family: var(--font-primary);
    font-size: var(--text-md);
    font-weight: var(--font-semi-bold);
    color: var(--text-primary);
    margin: 0;
}

.tool-seo-feature-desc {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--text-muted);
    margin: 0;
}

.tool-seo-feature-highlight {
    margin-top: var(--space-6);
    padding: var(--space-8);
    border-radius: 0.875rem;
    background: var(--color-primary);
    text-align: center;
}

.tool-seo-feature-highlight p {
    max-width: 70ch;
    margin: 0 auto;
    color: #ffffff;
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-normal);
}

@media (max-width: 900px) {
    .tool-seo-features-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .tool-seo-features-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .tool-seo-sections {
        padding: var(--space-10) var(--space-4) var(--space-16);
        gap: var(--space-12);
    }
    .tool-seo-heading { font-size: var(--text-2xl); }
    .tool-seo-feature-highlight p { font-size: var(--text-lg); }
}

@media (max-width: 360px) {
    .tool-seo-sections {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }
}