/* ============================================================
   .tool-interface-next — proposed canonical tool-input card (loaded only on /docs/ui-kit)
   ============================================================
   Replaces the per-tool input-card chrome in `public/css/style.css`:

     .tool-input-card             -> .tool-interface-next                (card chrome)
     .tool-check-description      -> .tool-interface-next-description    (leading muted note)
     .tool-privacy-note           -> .tool-interface-next-privacy        (trailing privacy/disclosure)
     .tool-privacy-note a         -> .tool-interface-next-privacy a      (tinted-underline link)
     .tool-privacy-note strong    -> .tool-interface-next-privacy strong (key word in text colour)

   Used by every `/tools/*` page (http-check, ping, port-check, dns-lookup,
   whois, ssl) as the wrapper around the form input + submit + options.

   Owns *only* the card chrome and the leading/trailing text slots. The
   form pieces inside compose with existing canonicals:

     – `.tabs-next` + `--pill` for tabs.css for the mode chip row
       (HTTP / HTTPS / GET / HEAD …)
     – `.input-next` + `.btn-primary` for the input + submit row
     – `.checkbox-next` for the option row

   Ship a slim canonical here so swapping any one of those sub-canonicals
   later doesn't ripple back through this file.

   Composes with: nothing strict — but expects the inner content to be
   built from those existing canonicals. The catalog showcase below
   illustrates the production assembly.
   ============================================================ */

/* ============================================
   Root — card chrome
   ============================================
   `min-width: 0` lets the card sit inside a 2-column tools-demo grid
   without forcing a horizontal scrollbar when the inner mono input is
   long.
   ============================================ */
.tool-interface-next {
    padding: var(--space-xl);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    min-width: 0;
}

/* ============================================
   Description — leading muted note
   ============================================
   "Check response status, timing, and availability of any URL from
   28 servers worldwide." Drops directly under the card edge with
   `--space-md` below to clear the form row.
   ============================================ */
.tool-interface-next-description {
    margin: 0 0 var(--space-md);
    color: var(--color-text-muted);
    font-size: var(--font-sm);
    line-height: var(--line-snug);
}

/* ============================================
   Privacy note — trailing disclosure
   ============================================
   "All checks are public. To keep yours private, create a free account."
   `<strong>` lifts to text colour for emphasis. Inline link gets the
   tinted-underline treatment matching `.alert-link` from alerts.css.
   ============================================ */
.tool-interface-next-privacy {
    margin: var(--space-md) 0 0;
    color: var(--color-text-muted);
    font-size: var(--font-sm);
    line-height: var(--line-snug);
}

.tool-interface-next-privacy strong {
    color: var(--color-text);
    font-weight: 600;
}

.tool-interface-next-privacy a {
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.45);
    transition: border-color var(--transition-base);
}

.tool-interface-next-privacy a:hover,
.tool-interface-next-privacy a:focus-visible {
    border-bottom-color: var(--color-primary);
}

/* ============================================
   --compact — tighter padding
   ============================================
   For sidebar contexts or stacked-layouts where the card sits inside
   an already-padded shell.
   ============================================ */
.tool-interface-next--compact {
    padding: var(--space-lg);
}

/* ============================================
   --no-border — transparent placement
   ============================================
   When the tool interface sits inside another card (a tabs-next pane,
   a docs prose section), strip the chrome so it reads as inline content
   rather than a nested card.
   ============================================ */
.tool-interface-next--no-border {
    padding: 0;
    background: transparent;
    border: none;
}