/* nrag-components.css — SP3's shared component layer.
   Loads AFTER nrag-tokens.css and BEFORE every element stylesheet, enforced by
   WordPress style dependencies rather than by file naming.

   Two strictly separate layers:
     A. the reset    — element-keyed, neutralises the theme once
     B. the taxonomy — element-agnostic, works on <button> AND <a>
   Layer B must be element-agnostic: the CTAs are <a>, Нов разговор is <button>.

   ---- Layer A: the bare-<button> reset ------------------------------------
   Two stylesheets on the fleet sites style bare <button> — the GeneratePress
   child theme and 73.css:

       button        { background: rgb(85,85,94); color: #fff; padding: 10px 20px; }
       button:hover,
       button:focus  { background: var(--cl-color-main-500);   #01c2d9 cyan }

   Note it covers :focus, NOT just :hover. A MOUSE CLICK leaves an element in
   :focus but not :focus-visible — which is why a clicked control stayed bright
   cyan until the user clicked elsewhere. Six controls each paid for this
   separately before SP3.

   Keyed on `button` (via `button:where(...)`), never bare `[class*="nrag-"]`: a
   rule setting background:none/padding:0 on every element carrying an nrag class
   would strip the panels, rails and drawers too.

   SELECTION SPECIFICITY IS DELIBERATELY MINIMAL. The whole attribute+opt-out
   filter lives INSIDE `:where()`, which contributes ZERO specificity, so the
   resting reset is only (0,0,1) — just the `button` element. That is BELOW the
   class-only taxonomy (`.nrag-btn--primary` etc. are (0,1,0)), so every variant
   paints its own fill/border/padding/colour over this reset. The reset does NOT
   need to beat the theme at rest: the theme's resting `button { background;
   color; padding }` is only (0,0,1), and each variant's (0,1,0) already clears
   it. The reset's real job is only the state/font work the taxonomy can't reach
   — see the pointer-focus rule below and the double-class font-weight rule.
   Do NOT move `[class*="nrag-"]` back outside `:where()`: that was the original
   bug — it made the resting reset (0,1,1), out-specifying the taxonomy, and
   painted every filled <button> transparent while the <a> CTAs (which `button`
   never matches) rendered correctly.

   The opt-out exists because .nrag-intake-send (nrag-intake.js:152) and
   .mxchat-nrag-suggestion (nrag-suggestions.js:47) carry
   .mxchat-popular-question ON PURPOSE, so they match core's own popular
   questions. Resetting them would split that row. Note the second one matches
   this selector via the substring `nrag-` inside `mxchat-nrag-suggestion`.

   Browser support is not a concern: SP2a already ships :has() in production
   (nrag-frontend.css), and :has() is strictly newer than :where(). */
button:where([class*="nrag-"]:not(.mxchat-popular-question)) {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    /* Shorthand — resets font-family/size/style AND LINE-HEIGHT (which is why
       .nrag-btn below must set line-height explicitly, or every labelled
       control changes height). It does NOT win the font-WEIGHT: at (0,0,1) this
       reset is below the theme's `button:not(.menu-toggle) { font-weight:600 }`
       (0,1,1), so non-filled variants inherit that 600 by design; the filled
       variants take 700 via the double-class font-weight rule further down. */
    font: inherit;
    cursor: pointer;
}

/* Reset ONLY the pointer-focus case, so keyboard users keep a visible focus
   state. (0,2,1) — `button` + `:focus` + `:not(:focus-visible)`; the attribute
   filter stays inside `:where()` and adds nothing. Still beats the theme's
   `button:focus` (0,1,1). This single rule replaces the five-selector list SP2a
   accumulated in nrag-history.css. */
button:where([class*="nrag-"]:not(.mxchat-popular-question)):focus:not(:focus-visible) {
    background: none;
    color: inherit;
}

/* ---- Layer B: the component taxonomy -------------------------------------
   Element-agnostic on purpose — the CTAs are <a> and Нов разговор is <button>,
   so a button-keyed rule could not unify them.

   Seven variants. All share radius and border width; the type scale is pinned
   at (0,2,0) on the .nrag-btn.nrag-btn double-class rules further down (so it
   beats the theme's button font-size), and hover is instant (no transition, by
   design). Only fill and role differ. Applied ALONGSIDE each control's existing
   semantic class, never replacing it — the JS queries by the semantic class. */

.nrag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nrag-space-xs);
    box-sizing: border-box;
    border: var(--nrag-border-width) solid transparent;
    border-radius: var(--nrag-radius-sm);
    /* font-size is pinned at (0,2,0) on the .nrag-btn.nrag-btn double-class rule
       further down, so it beats the theme's button:not(.menu-toggle) (0,1,1); a
       single-class font-size here would lose. See that block. */
    /* REQUIRED: the reset's `font: inherit` shorthand cleared line-height.
       Without this every labelled control silently changes height. */
    line-height: var(--nrag-leading-tight);
    text-decoration: none;
    cursor: pointer;
    /* No transition: hover must be INSTANT. SP3 briefly added a 0.15s fade here,
       which made quick hovers show only a fraction of the hover state (and the
       fade was on top of an already near-invisible brand-soft). Pre-SP3 buttons
       had no transition; this restores that. */
}

/* Keyboard focus only. Drawn as an outline so it stays visible on the filled
   variants — a background swap would be invisible against their own fill. */
.nrag-btn:focus-visible {
    outline: var(--nrag-focus-ring);
    outline-offset: var(--nrag-focus-offset);
}

.nrag-btn:disabled { opacity: 0.6; }

/* --- filled: brand teal. Actions taken INSIDE the tool. */
.nrag-btn--primary {
    background: var(--nrag-brand);
    color: var(--nrag-brand-contrast);
    padding: var(--nrag-space-sm) var(--nrag-space-md);
}
/* colour is pinned here too, not just background: the theme's
   `button:hover, button:focus { color:#073b4c }` (0,1,1) beats the resting
   (0,1,0) `.nrag-btn--primary` colour on hover — and #073b4c is ALSO
   --nrag-brand-dark, this rule's own background — so without pinning the colour
   the label would render dark-on-dark (invisible). This selector is (0,2,0),
   above the theme's (0,1,1). (:focus/:focus-visible are already held by the
   (0,4,1) focus pin further down.) Same class of fix as the CTA colour pin. */
.nrag-btn--primary:hover,
.nrag-btn--primary:active {
    background: var(--nrag-brand-dark);
    color: var(--nrag-brand-contrast);
}

/* --- filled: fleet blue. Actions that LEAVE the tool or cost money.
   Deliberately not the per-site accent — white text fails AA on all four
   (rose 3.6:1, green 1.9:1, gold 1.4:1, tan 2.3:1). */
.nrag-btn--cta {
    background: var(--nrag-cta);
    /* colour lives on the (0,2,0) pin below — see the CTA-colour note. */
    padding: var(--nrag-space-sm) var(--nrag-space-md);
}
.nrag-btn--cta:hover,
.nrag-btn--cta:active { background: var(--nrag-cta-dark); }

.nrag-btn--cta-quiet {
    background: none;
    /* colour lives on the (0,2,0) pin below — see the CTA-colour note. */
    padding: var(--nrag-space-sm) var(--nrag-space-md);
}
.nrag-btn--cta-quiet:hover,
.nrag-btn--cta-quiet:active { text-decoration: underline; }

/* --- CTA link colour must beat the theme's own `a` rules -------------------
   The CTAs are <a> links. The fleet theme paints link colour at (0,1,1) — e.g.
   `.entry-content a { color }` (rest) and `.entry-content a:hover` (0,2,1) — which
   OUT-SPECIFIES a single-class (0,1,0) `.nrag-btn--cta` colour and reverts the
   white CTA text to the theme's link colour on its blue fill. Pre-SP3 the CTAs
   forced colour with `!important` precisely to win this; SP3 dropped that.
   Every CTA carries BOTH .nrag-btn and its .nrag-btn--cta / --cta-quiet class
   (guaranteed by the markup + test_controls_carry_component_classes), so a
   double-class selector reaches (0,2,0) and beats the theme WITHOUT !important —
   and, being class-only (deliberately NOT button-keyed: CTAs are links), it
   applies to the <a> CTAs. The state selectors stop a theme `a:hover`/`a:focus`
   from repainting the text. (A theme that uses !important on link colour would
   still win — that residual is covered by the live-E2E gate, not specificity.) */
.nrag-btn.nrag-btn--cta,
.nrag-btn.nrag-btn--cta:hover,
.nrag-btn.nrag-btn--cta:focus,
.nrag-btn.nrag-btn--cta:focus-visible,
.nrag-btn.nrag-btn--cta:active { color: var(--nrag-cta-contrast); }

.nrag-btn.nrag-btn--cta-quiet,
.nrag-btn.nrag-btn--cta-quiet:hover,
.nrag-btn.nrag-btn--cta-quiet:focus,
.nrag-btn.nrag-btn--cta-quiet:focus-visible,
.nrag-btn.nrag-btn--cta-quiet:active { color: var(--nrag-cta); }

/* Filled variants must render BOLD. font-weight is the one property the
   taxonomy can't carry on its own class: the theme's `button:not(.menu-toggle)`
   pins font-weight:600 at (0,1,1), which beats a variant's (0,1,0). Every
   control carries BOTH .nrag-btn and its .nrag-btn--variant class (guaranteed by
   the markup + test_controls_carry_component_classes), so a double-class
   selector reaches (0,2,0) and beats the theme — and, being class-only, it
   applies to BOTH <button> and the <a> CTAs. Deliberately NOT button-keyed.
   The non-filled variants (--chip/--icon/--row/--pill) set no font-weight and
   keep the theme's 600, matching their pre-SP3 bare-button appearance. */
.nrag-btn.nrag-btn--primary,
.nrag-btn.nrag-btn--cta,
.nrag-btn.nrag-btn--cta-quiet { font-weight: var(--nrag-weight-bold); }

/* --- chip: bordered, transparent, small type. The shell's workhorse. */
.nrag-btn--chip {
    background: none;
    color: var(--nrag-text);
    border-color: var(--nrag-border);
    padding: var(--nrag-space-xs) var(--nrag-space-md);
    /* font-size lives on the .nrag-btn.nrag-btn--chip (0,2,0) pin below. */
    min-height: 0;
}
/* :active is NOT optional — it is the state during a touch. Omitting it makes
   the chip flash solid theme-cyan under the finger on mobile (observed live). */
.nrag-btn--chip:hover,
.nrag-btn--chip:active {
    background: var(--nrag-brand-hover);
    color: var(--nrag-text);
}

/* --- icon: square, borderless, glyph-sized. */
.nrag-btn--icon {
    background: none;
    color: var(--nrag-text);
    padding: 0;
    min-width: 32px;
    min-height: 32px;
    /* font-size lives on the .nrag-btn.nrag-btn--icon (0,2,0) pin below. */
    line-height: 1;
}
.nrag-btn--icon:hover,
.nrag-btn--icon:active {
    background: var(--nrag-brand-hover);
    color: var(--nrag-text);
}

/* --- row: full-width list item, left-aligned. */
.nrag-btn--row {
    background: none;
    color: var(--nrag-text);
    justify-content: flex-start;
    text-align: left;
    width: 100%;
    padding: var(--nrag-space-sm);
    min-height: 44px;
}
/* colour re-pinned (like --primary): theme `button:hover` (0,1,1) would else
   repaint the label to #073b4c on hover. Here the hover bg is light so it stays
   readable, but the taxonomy must own the colour across states, not the theme. */
.nrag-btn--row:hover,
.nrag-btn--row:active {
    background: var(--nrag-surface-2);
    color: var(--nrag-text);
}

/* --- pill: content affordance inside the transcript, NOT chrome. Keeps the
   round radius so it matches core's own popular questions. */
.nrag-btn--pill {
    background: var(--nrag-surface-2);
    color: var(--nrag-text);
    border-color: var(--nrag-border);
    border-radius: var(--nrag-radius-pill);
    padding: var(--nrag-space-sm) var(--nrag-space-md);
    min-height: 44px;
}
/* colour re-pinned for the same reason as --row/--primary: keep the theme's
   button:hover (0,1,1) from repainting the label; hover bg is light so readable. */
.nrag-btn--pill:hover,
.nrag-btn--pill:active {
    background: var(--nrag-surface-hover);
    color: var(--nrag-text);
}

/* --- font-size pin ---------------------------------------------------------
   Beat the theme's button:not(.menu-toggle) font-size (0,1,1); .nrag-btn alone
   (0,1,0) loses. Every control carries .nrag-btn twice-over via its variant, so
   a double-class pin reaches (0,2,0). Base first; --chip/--icon override after.
   These three (0,2,0) rules are the ONLY font-size sources for the taxonomy —
   the single-class font-size declarations were removed so there is exactly one
   winning source per variant. Ordered so chip/icon win over the base by source
   order (all three are (0,2,0)). */
.nrag-btn.nrag-btn        { font-size: var(--nrag-font-base); }
.nrag-btn.nrag-btn--chip  { font-size: var(--nrag-font-sm); }
.nrag-btn.nrag-btn--icon  { font-size: var(--nrag-font-lg); }

/* --- filled variants must be PINNED, not cleared -------------------------
   The blanket pointer-focus reset above is (0,2,1). These filled variants are
   brand/CTA coloured BY DESIGN and must keep their fill after a mouse click.
   The pin carries `button[class*="nrag-"]` (attribute OUTSIDE :where here, on
   purpose) plus .nrag-btn and .nrag-btn--variant plus :focus, reaching (0,4,1)
   — comfortably above the (0,2,1) reset. (Even the leaner
   `button[...].nrag-btn--primary:focus` at (0,3,1) would clear the reset now,
   but keeping .nrag-btn preserves the margin and matches the taxonomy.) */
button[class*="nrag-"].nrag-btn.nrag-btn--primary:focus,
button[class*="nrag-"].nrag-btn.nrag-btn--primary:focus-visible {
    background: var(--nrag-brand);
    color: var(--nrag-brand-contrast);
}
button[class*="nrag-"].nrag-btn.nrag-btn--cta:focus,
button[class*="nrag-"].nrag-btn.nrag-btn--cta:focus-visible {
    background: var(--nrag-cta);
    color: var(--nrag-cta-contrast);
}

/* --- pointer-aware tap targets -------------------------------------------
   32px is the shell-chrome size on precise pointers — the compact look
   approved in SP2a. 44px is the floor wherever the pointer is coarse.
   Note the asymmetry this fixes: .nrag-rail-toggle is desktop-only (44px
   irrelevant), while .nrag-history-toggle and .nrag-history-close appear ONLY
   in the mobile drawer — the two controls that most need a touch target were
   the ones at 32px. */
@media (pointer: coarse) {
    .nrag-btn--icon,
    .nrag-btn--chip {
        min-width: 44px;
        min-height: 44px;
    }
}

/* --- the one deliberate exception to a taxonomy colour --------------------
   .nrag-expand-icon is injected into core's .chatbot-top-bar (nrag-widgets.css
   sets color: inherit for this reason). Core themes that bar dark or light per
   install, so a fixed --nrag-text would paint the glyph near-black on a dark
   bar and make it effectively invisible. The variant supplies its geometry;
   the colour stays inherited. Do not "consistency-fix" this away. */
.nrag-expand-icon.nrag-btn--icon { color: inherit; }