/* =============================================================
   SenHost Tools - Shared Design System
   Location: assets/css/tools.css
   Spec:     tools/DESIGN.md  (dark-first · violet → cyan)

   Load order on a tool page:
     1. bootstrap.min.css
     2. font-awesome
     3. ../../assets/css/style.css   (host theme)
     4. ../../assets/css/tools.css   (this file)
     5. per-tool <style> block       (tool-specific only)

   Everything here is prefixed `sg-` / `tool-` so it can never
   collide with the host theme or with Bootstrap utilities.
   The header + footer partials are owned by the parent site and
   are deliberately NOT restyled here.
   ============================================================= */

/* -------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------- */
:root {
    /* Brand -------------------------------------------------
       Tracks the shell's aurora accents (--a1 cyan / --a2 indigo) so the
       tools read as the same product. The -rgb pairs are the sRGB values of
       those same oklch colours, kept literal because they feed rgba(). */
    --sg-accent: var(--a1, #00d2d3);
    --sg-accent-2: var(--a2, #5c87ec);
    --sg-accent-rgb: 0, 210, 211;
    --sg-accent-2-rgb: 85, 119, 229;
    --sg-accent-grad: linear-gradient(135deg, var(--a1, #00d2d3), var(--a2, #5577e5));

    --sg-support: var(--a3, #a665cb);
    --sg-support-rgb: 166, 101, 203;
    /* The display accent is a light cyan: 10.9:1 on the dark canvas, but only
       1.6:1 on the light one. Accent-coloured *text* uses this instead. */
    --sg-accent-ink: var(--a1, #00d2d3);

    /* Surfaces ---------------------------------------------- */
    --sg-canvas: var(--page, #02040c);
    --sg-glass: var(--glass, rgba(24, 28, 44, 0.55));
    --sg-glass-solid: #181c2c;
    --sg-raise: #232838;
    --sg-raise-2: #2c3244;
    --sg-well: var(--well, rgba(6, 8, 18, 0.85));
    --sg-track: rgba(0, 0, 0, 0.28);
    --sg-chip: rgba(255, 255, 255, 0.03);
    --sg-chip-active: rgba(var(--sg-accent-rgb), 0.14);

    /* Text -------------------------------------------------- */
    --sg-ink: var(--ink, #f4f6fa);
    --sg-muted: var(--ink2, rgba(230, 234, 245, 0.62));
    --sg-faint: var(--ink3, rgba(230, 234, 245, 0.4));

    /* Lines ------------------------------------------------- */
    --sg-border: var(--stroke, rgba(255, 255, 255, 0.10));
    --sg-border-strong: var(--strokeA, rgba(255, 255, 255, 0.16));
    --sg-ring: rgba(var(--sg-accent-rgb), 0.25);

    /* Semantic ---------------------------------------------- */
    --sg-danger: #ef4444;
    --sg-warn: #fb923c;
    --sg-caution: #facc15;
    --sg-ok: #4ade80;
    --sg-ok-strong: #22c55e;
    --sg-info: #06b6d4;

    /* Type -------------------------------------------------- */
    --sg-font-head: 'Geist', 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --sg-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --sg-font-mono: 'JetBrains Mono', 'Geist Mono', ui-monospace, SFMono-Regular, 'Cascadia Code', Consolas, monospace;

    /* Radii ------------------------------------------------- */
    --sg-r-card: 22px;
    --sg-r-lg: 14px;
    --sg-r-md: 12px;
    --sg-r-sm: 10px;
    --sg-r-pill: 999px;

    /* Elevation --------------------------------------------- */
    --sg-shadow-card: 0 20px 50px rgba(0, 0, 0, 0.35);

    /* Motion ------------------------------------------------ */
    --sg-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --sg-blur: 18px;

    /* Spacing scale (DESIGN.md §spacing) --------------------- */
    --sg-xs: 4px;
    --sg-sm: 8px;
    --sg-md: 16px;
    --sg-lg: 24px;
    --sg-xl: 40px;
}

/* Light-theme reconciliation. The tools are dark-first, but the host
   shell can be toggled to light - keep text legible if that happens. */
html[data-bs-theme="light"] {
    --sg-canvas: var(--page, #e9effb);
    --sg-glass: var(--glass, rgba(255, 255, 255, 0.72));
    --sg-glass-solid: #ffffff;
    --sg-raise: #eef2fb;
    --sg-raise-2: #e1e8f6;
    --sg-well: var(--well, rgba(20, 26, 44, 0.04));
    --sg-track: rgba(20, 26, 44, 0.06);
    --sg-chip: rgba(20, 26, 44, 0.03);
    --sg-ink: var(--ink, #2b3040);
    --sg-muted: var(--ink2, rgba(20, 26, 44, 0.62));
    --sg-faint: var(--ink3, rgba(20, 26, 44, 0.42));
    --sg-border: var(--stroke, rgba(20, 26, 44, 0.10));
    --sg-border-strong: var(--strokeA, rgba(20, 26, 44, 0.18));
    --sg-shadow-card: 0 20px 50px rgba(24, 32, 60, 0.10);
    --sg-accent-ink: oklch(0.48 0.11 195);
}

/* -------------------------------------------------------------
   1b. Skin: Professional

   Mirrors the html[data-skin="pro"] block in style.css for the tool-side
   tokens. Custom properties only - the tool layouts are untouched. Each tool
   keeps its own accent from tools_meta.json; only the surfaces flatten.
   ------------------------------------------------------------- */
html[data-skin="pro"] {
    --sg-blur: 0px;
    /* Flat: no elevation on tool surfaces, and the per-tool accent fills solid
       instead of running a gradient. Specificity beats the :root block
       tool_header.php emits, so each tool keeps its own colour. */
    --sg-shadow-card: 0 0 transparent;
    --sg-shadow-overlay: 0 4px 12px -4px rgba(0, 0, 0, .45);
    --sg-accent-grad: var(--sg-accent-fill, var(--sg-accent));
}

html[data-skin="pro"]:not([data-bs-theme="light"]) {
    --sg-glass: var(--glass, #1e1e1e);
    --sg-glass-solid: #1a1a1a;
    --sg-raise: #242424;
    --sg-raise-2: #2e2e2e;
    --sg-track: rgba(255, 255, 255, .06);
    --sg-chip: rgba(255, 255, 255, .04);
}

html[data-skin="pro"][data-bs-theme="light"] {
    --sg-glass: var(--glass, #ffffff);
    --sg-glass-solid: #ffffff;
    --sg-raise: oklch(0.955 0.003 260);
    --sg-raise-2: oklch(0.935 0.004 260);
    --sg-track: rgba(28, 30, 34, .06);
    --sg-chip: rgba(28, 30, 34, .03);
}

/* The ambient colour wash is part of the playful look, not the professional
   one. Flat canvas instead. */
html[data-skin="pro"] body.tool-page::before {
    background: none;
}

/* --- The other flat skins, same contract as Professional --- */
html[data-skin="black"],
html[data-skin="midnight"],
html[data-skin="contrast"],
html[data-skin="warm"] {
    --sg-blur: 0px;
    --sg-accent-grad: var(--sg-accent-fill, var(--sg-accent));
    --sg-shadow-card: var(--lift);
    --sg-shadow-overlay: var(--shadow-menu);
}

/* Glassmorphism keeps its blur, so it stays out of the flat-skin group above
   and only restates the surfaces. --sg-blur tracks the shell's deeper frost. */
html[data-skin="glassmorphism"] {
    --sg-blur: 40px;
}

html[data-skin="glassmorphism"]:not([data-bs-theme="light"]) {
    --sg-glass: var(--glass, rgba(255, 255, 255, .14));
    --sg-glass-solid: rgba(48, 26, 72, .8);
    --sg-raise: rgba(255, 255, 255, .18);
    --sg-raise-2: rgba(255, 255, 255, .26);
    --sg-track: rgba(20, 8, 34, .34);
    --sg-chip: rgba(255, 255, 255, .10);
}

html[data-skin="glassmorphism"][data-bs-theme="light"] {
    --sg-glass: var(--glass, rgba(255, 255, 255, .58));
    --sg-glass-solid: rgba(255, 255, 255, .88);
    --sg-raise: rgba(255, 255, 255, .74);
    --sg-raise-2: rgba(255, 255, 255, .9);
    --sg-track: rgba(90, 40, 120, .10);
    --sg-chip: rgba(255, 255, 255, .5);
}

html[data-skin="black"]:not([data-bs-theme="light"]) {
    --sg-glass: var(--glass, #0c0c0c);
    --sg-glass-solid: #0a0a0a;
    --sg-raise: #141414;
    --sg-raise-2: #1e1e1e;
    --sg-track: rgba(255, 255, 255, .08);
    --sg-chip: rgba(255, 255, 255, .05);
}

html[data-skin="midnight"]:not([data-bs-theme="light"]) {
    --sg-glass: var(--glass, #16203a);
    --sg-glass-solid: #131c31;
    --sg-raise: #1b2642;
    --sg-raise-2: #23304f;
    --sg-track: rgba(150, 175, 225, .10);
    --sg-chip: rgba(150, 175, 225, .07);
}

html[data-skin="contrast"]:not([data-bs-theme="light"]) {
    --sg-glass: var(--glass, #0d0d0d);
    --sg-glass-solid: #0d0d0d;
    --sg-raise: #1f1f1f;
    --sg-raise-2: #2b2b2b;
    --sg-track: rgba(255, 255, 255, .18);
    --sg-chip: rgba(255, 255, 255, .12);
}

html[data-skin="warm"]:not([data-bs-theme="light"]) {
    --sg-glass: var(--glass, #262019);
    --sg-glass-solid: #221c16;
    --sg-raise: #2e2720;
    --sg-raise-2: #3a3128;
    --sg-track: rgba(232, 214, 190, .10);
    --sg-chip: rgba(232, 214, 190, .07);
}

html[data-skin="black"][data-bs-theme="light"],
html[data-skin="midnight"][data-bs-theme="light"],
html[data-skin="contrast"][data-bs-theme="light"],
html[data-skin="warm"][data-bs-theme="light"] {
    --sg-glass: var(--glass, #ffffff);
    --sg-glass-solid: #ffffff;
    --sg-raise: var(--glassH);
    --sg-raise-2: var(--well);
    --sg-track: rgba(0, 0, 0, .07);
    --sg-chip: rgba(0, 0, 0, .04);
}

html[data-skin="black"] body.tool-page::before,
html[data-skin="midnight"] body.tool-page::before,
html[data-skin="contrast"] body.tool-page::before,
html[data-skin="warm"] body.tool-page::before {
    background: none;
}

/* Photo Collage Studio blurs its chrome through Tailwind utilities rather than
   a token, so the skin has to reach them by class. */
html[data-skin="pro"] .backdrop-blur-md,
html[data-skin="pro"] .backdrop-blur-sm,
html[data-skin="black"] .backdrop-blur-md,
html[data-skin="black"] .backdrop-blur-sm,
html[data-skin="midnight"] .backdrop-blur-md,
html[data-skin="midnight"] .backdrop-blur-sm,
html[data-skin="contrast"] .backdrop-blur-md,
html[data-skin="contrast"] .backdrop-blur-sm,
html[data-skin="warm"] .backdrop-blur-md,
html[data-skin="warm"] .backdrop-blur-sm {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* -------------------------------------------------------------
   2. Page canvas + ambient backdrop  (DESIGN.md §2)
   ------------------------------------------------------------- */
body.tool-page {
    /* Header pill and footer panel line up with .tool-shell below them. */
    --shell-max: 1280px;
    /* Focus rings follow the tool's accent, not the shell's. */
    --focus: var(--sg-accent);
    font-family: var(--sg-font-body);
    color: var(--sg-ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.tool-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    width: auto;
    height: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0;
    filter: none;
    opacity: 1;
    animation: none;
    background:
        radial-gradient(46rem 30rem at 8% -8%, rgba(var(--sg-accent-rgb), 0.16), transparent 62%),
        radial-gradient(40rem 26rem at 95% 2%, rgba(var(--sg-accent-2-rgb), 0.14), transparent 60%),
        radial-gradient(52rem 30rem at 50% 108%, rgba(var(--sg-accent-rgb), 0.10), transparent 65%);
}

/* The host theme paints a second animated blob via body::after - the
   tool backdrop above replaces it so the two glow systems don't fight. */
body.tool-page::after {
    content: none;
}

html[data-bs-theme="light"] body.tool-page::before {
    background:
        radial-gradient(46rem 30rem at 8% -8%, rgba(var(--sg-accent-rgb), 0.14), transparent 62%),
        radial-gradient(40rem 26rem at 95% 2%, rgba(var(--sg-accent-2-rgb), 0.12), transparent 60%),
        radial-gradient(52rem 30rem at 50% 108%, rgba(var(--sg-accent-rgb), 0.09), transparent 65%);
}

/* Main column - sits between the host header and host footer. */
.tool-shell {
    flex: 1 0 auto;
    width: 100%;
    /* One column width for every tool. Two tiers (1180 / 1400) meant the
       content block jumped ~90px wider or narrower as you moved between tools,
       which read as the pages not belonging to the same site. */
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: var(--sg-md);
    padding-bottom: var(--sg-xl);
}

/* Kept for a genuinely single-column reading layout. */
.tool-shell--narrow {
    max-width: 780px;
}

/* Deprecated: retained so existing markup does not break, but it now resolves
   to the standard width. Prefer plain `.tool-shell`. */
.tool-shell--wide {
    max-width: 1280px;
}

@media (min-width: 992px) {
    .tool-shell {
        padding-inline: 32px;
    }
}

/* -------------------------------------------------------------
   3. Typography  (DESIGN.md §typography)
   ------------------------------------------------------------- */
.tool-page h1,
.tool-page h2,
.tool-page h3,
.tool-page h4,
.tool-page h5,
.tool-page h6,
.sg-display,
.sg-eyebrow,
.tool-section-title,
.btn-brand,
.tool-tabs .tool-tab {
    font-family: var(--sg-font-head);
}

.sg-display {
    font-size: clamp(30px, 5vw, 40px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0;
}

.sg-headline {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
    margin: 0;
}

.sg-lead {
    font-size: 18px;
    line-height: 1.6;
    color: var(--sg-muted);
    margin: 0;
}

.sg-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--sg-accent-ink);
    margin-bottom: 0.6rem;
}

.tool-section-title {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--sg-faint);
    margin-bottom: 0.65rem;
}

.sg-muted {
    color: var(--sg-muted) !important;
}

.sg-faint {
    color: var(--sg-faint) !important;
}

.sg-mono {
    font-family: var(--sg-font-mono);
    font-size: 13px;
    line-height: 1.4;
}

/* -------------------------------------------------------------
   4. Hero
   ------------------------------------------------------------- */
/* A full-width band, not a centred column. Centring the eyebrow, lead and
   trust strip left the page's whole width empty on both flanks while the
   panels below ran edge to edge. Grid areas group eyebrow + lead on the left
   without needing a wrapper element in each tool's markup. */
.tool-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "eyebrow trust"
        "lead    trust";
    align-items: center;
    column-gap: var(--sg-xl);
    row-gap: var(--sg-xs);
    text-align: left;
    padding: var(--sg-sm) 0 var(--sg-lg);
}

/* The header pill already carries the tool's icon and name, so the hero was
   repeating both and pushing the tool itself toward the fold. The icon goes;
   the <h1> stays in the document for structure, outline and SEO, but is
   visually hidden - the pill is what the reader sees. */
.tool-hero__icon {
    display: none;
}

.tool-hero .sg-display {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.tool-hero .sg-eyebrow {
    grid-area: eyebrow;
    margin-bottom: 0;
}

.tool-hero .sg-lead {
    grid-area: lead;
    max-width: 76ch;
    margin: 0;
}

.tool-hero .tool-trust {
    grid-area: trust;
    justify-content: flex-end;
    margin-top: 0;
}

/* Too narrow to sit side by side - stack, still left-aligned. */
@media (max-width: 767.98px) {
    .tool-hero {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "eyebrow"
            "lead"
            "trust";
        row-gap: var(--sg-sm);
    }

    .tool-hero .tool-trust {
        justify-content: flex-start;
    }
}

/* Trust / feature strip under the hero */
.tool-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
    justify-content: center;
    margin-top: var(--sg-md);
}

.tool-trust__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--sg-muted);
    font-size: 0.85rem;
}

.tool-trust__item i {
    color: var(--sg-accent-ink);
    font-size: 0.9rem;
}

/* -------------------------------------------------------------
   4b. Footer

   style.css owns the footer's glass panel, width and padding, shared with the
   dashboard. Only the spacing above it and the tool-tuned text colours live
   here - an earlier full-bleed bar duplicated the panel and pinned it to dead
   --youtube-* tokens, so it never followed the theme.
   ------------------------------------------------------------- */
.tool-page .footer {
    margin-top: var(--sg-xl);
}

.tool-page .footer .text-muted {
    /* Bootstrap's --bs-secondary-color landed under AA on the canvas; use the
       tool muted token, which is tuned for these surfaces. */
    color: var(--sg-muted) !important;
}

/* :not(.back-to-top) so the chip keeps the neutral outline it has on the
   dashboard - the accent colour and underline are for the prose link only. */
.tool-page .footer a:not(.back-to-top) {
    color: var(--sg-accent-ink);
    text-decoration: none;
    font-weight: 500;
}

.tool-page .footer a:not(.back-to-top):hover {
    text-decoration: underline;
}

/* -------------------------------------------------------------
   5. Surfaces
   ------------------------------------------------------------- */
.tool-card {
    background: var(--sg-glass);
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-r-card);
    box-shadow: var(--sg-shadow-card);
    backdrop-filter: blur(var(--sg-blur));
    -webkit-backdrop-filter: blur(var(--sg-blur));
    padding: clamp(1.15rem, 3vw, 2rem);
}

.tool-card--flush {
    padding: 0;
    overflow: hidden;
}

.tool-panel {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-r-md);
    padding: var(--sg-md);
}

.tool-well {
    background: var(--sg-well);
    border: 1px solid var(--sg-border-strong);
    border-radius: var(--sg-r-lg);
    padding: var(--sg-md);
}

.tool-divider {
    height: 1px;
    border: 0;
    margin: var(--sg-lg) 0;
    background: var(--sg-border);
    opacity: 1;
}

/* Gradient-framed output field (DESIGN.md §5) */
.tool-output-frame {
    border-radius: var(--sg-r-lg);
    padding: 2px;
    background: linear-gradient(135deg, rgba(var(--sg-accent-rgb), 0.5), rgba(var(--sg-accent-2-rgb), 0.35));
}

.tool-output-frame > * {
    border-radius: calc(var(--sg-r-lg) - 2px);
    background: var(--sg-well);
}

/* -------------------------------------------------------------
   6. Buttons
   ------------------------------------------------------------- */
.btn-brand,
.tool-page .btn-brand {
    --bs-btn-focus-shadow-rgb: var(--sg-accent-rgb);
    background: var(--sg-accent-grad);
    border: 0;
    color: var(--sg-on-accent, #fff);
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: var(--sg-r-md);
    padding: 0.7rem 1.5rem;
    transition: transform 0.18s var(--sg-ease), filter 0.18s var(--sg-ease);
}

/* Flat by design. These carried a coloured drop-shadow that read as a glow
   under every control; hover feedback is a brightness lift instead. Focus
   rings are untouched - they are an affordance, not decoration. */
.btn-brand:hover,
.btn-brand:focus-visible {
    color: #fff;
    transform: translateY(-1px);
    filter: brightness(1.08);
}

.btn-brand:active {
    transform: translateY(0) scale(0.99);
}

.btn-brand:disabled,
.btn-brand.disabled {
    filter: grayscale(0.55);
    opacity: 0.55;
    transform: none;
}

.btn-ghost,
.tool-page .btn-ghost {
    background: transparent;
    border: 1px solid var(--sg-border-strong);
    color: var(--sg-ink);
    font-weight: 500;
    border-radius: var(--sg-r-md);
    padding: 0.65rem 1.25rem;
    transition: background-color 0.18s var(--sg-ease), border-color 0.18s var(--sg-ease), color 0.18s var(--sg-ease);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
    background: rgba(var(--sg-accent-rgb), 0.10);
    border-color: rgba(var(--sg-accent-rgb), 0.45);
    color: var(--sg-ink);
}

.btn-ghost:disabled,
.btn-ghost.disabled {
    opacity: 0.45;
}

/* Square icon button */
.sg-icon-btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid var(--sg-border-strong);
    color: var(--sg-muted);
    border-radius: var(--sg-r-md);
    transition: background-color 0.18s var(--sg-ease), color 0.18s var(--sg-ease), transform 0.12s var(--sg-ease);
}

.sg-icon-btn:hover,
.sg-icon-btn:focus-visible {
    background: rgba(var(--sg-accent-rgb), 0.12);
    color: var(--sg-accent);
}

.sg-icon-btn:active {
    transform: scale(0.95);
}

.sg-icon-btn.is-done {
    color: var(--sg-ok-strong);
    border-color: rgba(34, 197, 94, 0.4);
}

/* -------------------------------------------------------------
   7. Segmented tabs  (DESIGN.md §5 - active tab uses brand gradient)
   ------------------------------------------------------------- */
.tool-tabs {
    display: inline-flex;
    gap: var(--sg-xs);
    padding: var(--sg-xs);
    border-radius: var(--sg-r-md);
    background: var(--sg-track);
    border: 1px solid var(--sg-border);
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

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

.tool-tabs .tool-tab {
    appearance: none;
    background: transparent;
    border: 0;
    white-space: nowrap;
    color: var(--sg-muted);
    border-radius: var(--sg-r-sm);
    padding: 0.55rem 1.4rem;
    font-weight: 600;
    font-size: 0.95rem;
    transition: color 0.2s var(--sg-ease), background 0.2s var(--sg-ease);
}

.tool-tabs .tool-tab:hover {
    color: var(--sg-ink);
}

.tool-tabs .tool-tab.is-active {
    background: var(--sg-accent-grad);
    color: var(--sg-on-accent, #fff);
}

/* -------------------------------------------------------------
   8. Chips / toggles
   ------------------------------------------------------------- */
.tool-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    border-radius: var(--sg-r-md);
    border: 1px solid var(--sg-border);
    background: var(--sg-chip);
    color: var(--sg-muted);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: background 0.18s var(--sg-ease), border-color 0.18s var(--sg-ease), color 0.18s var(--sg-ease);
}

.tool-chip:hover {
    border-color: var(--sg-border-strong);
    color: var(--sg-ink);
}

.tool-chip.is-active {
    background: var(--sg-chip-active);
    border-color: rgba(var(--sg-accent-rgb), 0.45);
    color: var(--sg-ink);
}

.tool-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.8rem;
    border-radius: var(--sg-r-pill);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: var(--sg-accent-grad);
    color: var(--sg-on-accent, #fff);
}

.tool-pill--quiet {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--sg-border);
    color: var(--sg-muted);
}

.tool-pill--info {
    background: rgba(var(--sg-support-rgb), 0.12);
    border: 1px solid rgba(var(--sg-support-rgb), 0.35);
    color: var(--sg-info);
}

/* -------------------------------------------------------------
   9. Form controls
   ------------------------------------------------------------- */

/* Native form-control popups - the <select> option list, date pickers, and
   scrollbars - are painted by the browser, not the page, and only follow the
   theme when `color-scheme` is set. That value came only from Bootstrap's CDN
   CSS (`[data-bs-theme=dark] { color-scheme: dark }`); when that sheet is stale,
   blocked or slow, the popup fell back to a white background while the option
   text kept its light colour - light-on-white, and the options vanished.
   Declare it here so it no longer depends on the CDN. */
html[data-bs-theme="dark"]  { color-scheme: dark; }
html[data-bs-theme="light"] { color-scheme: light; }

/* Belt-and-braces for platforms that paint the option row rather than defer to
   color-scheme (notably Windows): give options a solid, theme-correct fill.
   Values are literal per theme, not --sg-ink, so they can't inherit a wrong
   value if the token chain resolves to the other theme. */
.tool-page select option,
.tool-page select optgroup {
    background-color: #14121c;
    color: #f4f4f5;
}
html[data-bs-theme="light"] .tool-page select option,
html[data-bs-theme="light"] .tool-page select optgroup {
    background-color: #ffffff;
    color: #0f172a;
}

.tool-page .form-control,
.tool-page .form-select,
.tool-page .input-group-text {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--sg-border-strong);
    color: var(--sg-ink);
    border-radius: var(--sg-r-sm);
    padding: 0.6rem 0.85rem;
    transition: border-color 0.18s var(--sg-ease), box-shadow 0.18s var(--sg-ease), background-color 0.18s var(--sg-ease);
}

.tool-page .form-control::placeholder {
    color: var(--sg-faint);
}

.tool-page .form-control:focus,
.tool-page .form-select:focus {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--sg-accent);
    box-shadow: 0 0 0 3px var(--sg-ring);
    color: var(--sg-ink);
}

.tool-page .form-control:disabled,
.tool-page .form-select:disabled {
    opacity: 0.5;
}

.tool-page .form-label {
    font-family: var(--sg-font-head);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--sg-muted);
    margin-bottom: 0.4rem;
}

.tool-page .form-text {
    color: var(--sg-faint);
}

/* Checkbox / switch */
.tool-page .form-check-input {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: var(--sg-border-strong);
}

.tool-page .form-check-input:checked {
    background-color: var(--sg-accent);
    border-color: var(--sg-accent);
}

.tool-page .form-check-input:focus {
    border-color: var(--sg-accent);
    box-shadow: 0 0 0 3px var(--sg-ring);
}

/* Range slider */
.tool-page .form-range {
    height: 1.4rem;
}

.tool-page .form-range::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: var(--sg-r-pill);
    background: var(--sg-track);
    border: 1px solid var(--sg-border);
}

.tool-page .form-range::-moz-range-track {
    height: 6px;
    border-radius: var(--sg-r-pill);
    background: var(--sg-track);
    border: 1px solid var(--sg-border);
}

.tool-page .form-range::-webkit-slider-thumb {
    margin-top: -6px;
    width: 18px;
    height: 18px;
    border: 2px solid #fff;
    background: var(--sg-accent);
}

.tool-page .form-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 2px solid #fff;
    background: var(--sg-accent);
}

.tool-page .form-range:focus::-webkit-slider-thumb,
.tool-page .form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 4px var(--sg-ring);
}

/* Native colour input, de-chromed */
.tool-page input[type="color"] {
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid var(--sg-border-strong);
    border-radius: var(--sg-r-sm);
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.tool-page input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 3px;
}

.tool-page input[type="color"]::-webkit-color-swatch {
    border: 0;
    border-radius: calc(var(--sg-r-sm) - 4px);
}

.tool-page input[type="color"]::-moz-color-swatch {
    border: 0;
    border-radius: calc(var(--sg-r-sm) - 4px);
}

/* Dropzone */
.tool-drop {
    border: 1.5px dashed var(--sg-border-strong);
    border-radius: var(--sg-r-lg);
    background: rgba(255, 255, 255, 0.02);
    padding: var(--sg-xl) var(--sg-md);
    text-align: center;
    color: var(--sg-muted);
    cursor: pointer;
    transition: border-color 0.18s var(--sg-ease), background 0.18s var(--sg-ease), color 0.18s var(--sg-ease);
}

.tool-drop:hover,
.tool-drop:focus-visible {
    border-color: rgba(var(--sg-accent-rgb), 0.6);
    color: var(--sg-ink);
}

.tool-drop.is-over {
    border-color: var(--sg-accent);
    background: rgba(var(--sg-accent-rgb), 0.08);
    color: var(--sg-ink);
}

/* -------------------------------------------------------------
   10. Meters & status
   ------------------------------------------------------------- */
.tool-meter {
    height: 6px;
    border-radius: var(--sg-r-pill);
    background: var(--sg-track);
    overflow: hidden;
}

.tool-meter__fill {
    height: 100%;
    width: 0;
    border-radius: var(--sg-r-pill);
    background: var(--sg-accent);
    transition: width 0.4s var(--sg-ease), background-color 0.4s var(--sg-ease);
}

.tool-note {
    border-radius: var(--sg-r-md);
    padding: 0.8rem 1rem;
    font-size: 0.9rem;
    border: 1px solid var(--sg-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--sg-muted);
}

.tool-note--info {
    background: rgba(var(--sg-support-rgb), 0.08);
    border-color: rgba(var(--sg-support-rgb), 0.2);
    color: var(--sg-ink);
}

.tool-note--warn {
    background: rgba(251, 146, 60, 0.08);
    border-color: rgba(251, 146, 60, 0.25);
    color: var(--sg-ink);
}

.tool-note--error {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.28);
    color: var(--sg-ink);
}

.tool-note--ok {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.25);
    color: var(--sg-ink);
}

/* Empty state */
.tool-empty {
    text-align: center;
    padding: var(--sg-xl) var(--sg-md);
    color: var(--sg-faint);
}

.tool-empty i {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.75rem;
    opacity: 0.55;
}

/* Toast - bottom-centre, no Bootstrap JS required */
.tool-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 1080;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.1rem;
    border-radius: var(--sg-r-pill);
    background: var(--sg-raise);
    border: 1px solid var(--sg-border-strong);
    color: var(--sg-ink);
    font-size: 0.9rem;
    box-shadow: var(--sg-shadow-overlay, 0 12px 32px rgba(0, 0, 0, 0.45));
    transform: translate(-50%, 16px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s var(--sg-ease), transform 0.22s var(--sg-ease), visibility 0.22s;
}

.tool-toast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.tool-toast i {
    color: var(--sg-ok-strong);
}

.tool-toast--error i {
    color: var(--sg-danger);
}

/* -------------------------------------------------------------
   11. Tables & lists
   ------------------------------------------------------------- */
.tool-page .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--sg-ink);
    --bs-table-border-color: var(--sg-border);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
    --bs-table-striped-color: var(--sg-ink);
    --bs-table-hover-bg: rgba(var(--sg-accent-rgb), 0.07);
    --bs-table-hover-color: var(--sg-ink);
    margin-bottom: 0;
}

.tool-page .table > thead th {
    font-family: var(--sg-font-head);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--sg-faint);
    border-bottom-color: var(--sg-border-strong);
    white-space: nowrap;
}

.tool-scroll {
    overflow: auto;
    max-height: 60vh;
}

/* Slim, on-brand scrollbars inside tool surfaces */
.tool-scroll,
.tool-tabs {
    scrollbar-color: rgba(var(--sg-accent-rgb), 0.45) transparent;
}

.tool-scroll::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.tool-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.tool-scroll::-webkit-scrollbar-thumb {
    background: rgba(var(--sg-accent-rgb), 0.35);
    border-radius: var(--sg-r-pill);
    border: 3px solid transparent;
    background-clip: content-box;
}

.tool-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--sg-accent-rgb), 0.55);
    background-clip: content-box;
}

/* -------------------------------------------------------------
   12. Code / copyable output
   ------------------------------------------------------------- */
.tool-code {
    font-family: var(--sg-font-mono);
    font-size: 13px;
    line-height: 1.55;
    color: var(--sg-ink);
    background: var(--sg-well);
    border: 1px solid var(--sg-border-strong);
    border-radius: var(--sg-r-md);
    padding: var(--sg-md);
    margin: 0;
    white-space: pre;
    overflow: auto;
}

.tool-code .tok-prop {
    color: var(--sg-accent-ink);
}

.tool-code .tok-val {
    color: var(--sg-info);
}

.tool-code .tok-sel {
    color: var(--sg-caution);
}

/* -------------------------------------------------------------
   13. Accessibility & motion
   ------------------------------------------------------------- */
/* Icon-only controls were rendering at 29x21, under the 24px minimum target.
   Padding stays as authored; this only sets a floor. */
.tool-page .btn-sm,
.tool-page .sg-icon-btn,
.tool-page .form-check-input {
    min-height: 24px;
    min-width: 24px;
}

.tool-page :focus-visible {
    outline: 2px solid var(--sg-accent);
    outline-offset: 2px;
}

.sg-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sg-skip-link {
    position: absolute;
    left: 50%;
    top: -60px;
    transform: translateX(-50%);
    z-index: 1090;
    padding: 0.6rem 1.1rem;
    border-radius: 0 0 var(--sg-r-md) var(--sg-r-md);
    background: var(--sg-accent-fill, var(--sg-accent));
    color: var(--sg-on-accent, #fff);
    text-decoration: none;
    transition: top 0.18s var(--sg-ease);
}

.sg-skip-link:focus {
    top: 0;
    color: var(--sg-on-accent, #fff);
}

@media (prefers-reduced-motion: reduce) {
    .tool-page *,
    .tool-page *::before,
    .tool-page *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Print - drop the chrome, keep the content */
@media print {
    body.tool-page::before {
        display: none;
    }

    .tool-card,
    .tool-well,
    .tool-panel {
        box-shadow: none;
        backdrop-filter: none;
        border-color: rgba(0, 0, 0, 0.2);
    }

    .tool-no-print {
        display: none !important;
    }
}