/* Why-UiChemy markup graphics: the Tailwind utilities uichemy-spk.css lacks, plus the
   panel inset fix. Loaded from PAGE code on the AI-to-WordPress hub and all 12 spokes,
   so it needs no site-wide write. Ported 2026-09-04. */
/* Why-UiChemy markup graphics — the 58 Tailwind utilities uichemy-spk.css lacks.
   Ported 2026-09-04 when the six borrowed .webm clips were replaced by WhyMocks.
   Scoped to .uc-spk; lives in uichemy-spk-claude.css, which page 33516 loads from
   PAGE code, so no site-wide write is needed. */
.uc-spk .top-\[10px\]{top: 10px;}
.uc-spk .right-\[10px\]{right: 10px;}
.uc-spk .z-\[2\]{z-index: 2;}
.uc-spk .mt-\[9px\]{margin-top: 9px;}
.uc-spk .mt-\[12px\]{margin-top: 12px;}
.uc-spk .h-\[10px\]{height: 10px;}
.uc-spk .h-\[11px\]{height: 11px;}
.uc-spk .h-\[12px\]{height: 12px;}
.uc-spk .h-\[22px\]{height: 22px;}
.uc-spk .w-\[7px\]{width: 7px;}
.uc-spk .w-\[9px\]{width: 9px;}
.uc-spk .w-\[10px\]{width: 10px;}
.uc-spk .w-\[11px\]{width: 11px;}
.uc-spk .w-\[12px\]{width: 12px;}
.uc-spk .w-\[22px\]{width: 22px;}
.uc-spk .max-w-\[76\%\]{max-width: 76%;}
.uc-spk .grid-cols-3{grid-template-columns: repeat(3, minmax(0, 1fr));}
.uc-spk .flex-wrap{flex-wrap: wrap;}
.uc-spk .gap-\[2px\]{gap: 2px;}
.uc-spk .rounded-\[7px\]{border-radius: 7px;}
.uc-spk .rounded-tr-\[4px\]{border-top-right-radius: 4px;}
.uc-spk .border-l-\[3px\]{border-left-style: var(--tw-border-style);
    border-left-width: 3px;}
.uc-spk .border-\[\#e7e7ea\]{border-color: #e7e7ea;}
.uc-spk .border-\[\#f1f1f3\]{border-color: #f1f1f3;}
.uc-spk .border-\[\#fd6a35\]{border-color: #fd6a35;}
.uc-spk .border-\[rgba\(16\,24\,40\,\.06\)\]{border-color: rgba(16,24,40,.06);}
.uc-spk .border-l-\[\#fd6a35\]{border-left-color: #fd6a35;}
.uc-spk .bg-\[\#3a3a42\]{background-color: #3a3a42;}
.uc-spk .bg-\[\#159f54\]{background-color: #159f54;}
.uc-spk .bg-\[\#3858e9\]{background-color: #3858e9;}
.uc-spk .bg-\[\#17171a\]{background-color: #17171a;}
.uc-spk .bg-\[\#d1435b\]{background-color: #d1435b;}
.uc-spk .bg-\[\#e6f8ef\]{background-color: #e6f8ef;}
.uc-spk .bg-\[\#f4f4f6\]{background-color: #f4f4f6;}
.uc-spk .bg-\[\#fbfbfc\]{background-color: #fbfbfc;}
.uc-spk .bg-\[\#fff1ea\]{background-color: #fff1ea;}
.uc-spk .bg-\[\#fff6f2\]{background-color: #fff6f2;}
.uc-spk .p-\[2px\]{padding: 2px;}
.uc-spk .p-\[3px\]{padding: 3px;}
.uc-spk .px-\[4px\]{padding-inline: 4px;}
.uc-spk .px-\[20px\]{padding-inline: 20px;}
.uc-spk .py-\[5px\]{padding-block: 5px;}
.uc-spk .py-\[11px\]{padding-block: 11px;}
.uc-spk .py-\[13px\]{padding-block: 13px;}
.uc-spk .py-\[14px\]{padding-block: 14px;}
.uc-spk .py-\[18px\]{padding-block: 18px;}
.uc-spk .pt-\[11px\]{padding-top: 11px;}
.uc-spk .text-\[12\.5px\]{font-size: 12.5px;}
.uc-spk .text-\[13\.5px\]{font-size: 13.5px;}
.uc-spk .leading-\[17px\]{--tw-leading: 17px;
    line-height: 17px;}
.uc-spk .text-\[\#0b6b3f\]{color: #0b6b3f;}
.uc-spk .text-\[\#0b8a4a\]{color: #0b8a4a;}
.uc-spk .text-\[\#6c6c72\]{color: #6c6c72;}
.uc-spk .text-\[\#8b8b95\]{color: #8b8b95;}
.uc-spk .text-\[\#159f54\]{color: #159f54;}
.uc-spk .text-\[\#202124\]{color: #202124;}
.uc-spk .shadow-\[0_0_0_1px_\#fd6a35\]{--tw-shadow: 0 0 0 1px var(--tw-shadow-color, #fd6a35);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);}
.uc-spk .shadow-\[0_18px_44px_-18px_rgba\(0\,0\,0\,\.55\)\]{--tw-shadow: 0 18px 44px -18px var(--tw-shadow-color, rgba(0,0,0,.55));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);}

/* Why-UiChemy mock panels: restore the 12px inset React gives them.
   In the source each mock is a FLOW child of .wq-shots, so it sits inside that
   container's `padding: 12px`. The WordPress port wraps each mock in .wq-shot so the
   existing accordion can toggle `is-on` — but .wq-shot is `position:absolute; inset:0`,
   and an absolutely positioned child fills the PADDING BOX, ignoring the padding. The
   card went flush to the frame edges. `div.wq-shot` hits only the ported markup panels,
   never the <video> panels the other 11 spokes still use, and at (0,2,1) it outranks
   `.uc-spk .wq-shot` (0,2,0). The plate gradient stays inset:0 — full-bleed by design. */
.uc-spk div.wq-shot {
  inset: 0;
  width: auto;
  height: auto;
  box-sizing: border-box;
  /* `inherit` deliberately, not a literal: .wq-shots' padding resolves to 18px 32px at
     this breakpoint even though the sheet says 12px, and it changes responsively. Copying
     the number would drift. Inheriting reproduces React's geometry whatever it is.
     width/height auto are required too: .uc-spk .wq-shot sets both to 100%, and an
     explicit width beats the right inset, which is what pushed the card 12px past the
     frame on the right while leaving 13px on the left. */
  padding: inherit;
}

/* "Soon" badge on the AI-to-WordPress cards that are not live yet. Geometry copied from
   uichemy.com's `.src-tile.is-soon::after` (10px/700/.05em uppercase, top-right, pill),
   recoloured onto OUR tokens — that grid is on a dark surface there and the values were
   rgba(255,255,255,...). A real <span> instead of ::after so the tooltip's data-t/data-d
   still drive the hover panel, and var() only so the section-CSS pipeline has no colour
   literal to rewrite into a Global Manager token.
   .is-soon cards carry no href, so they also lose the pointer affordance. */
/* On a SPOKE these cards link to the hub's card list, so they keep the pointer cursor.
   The hub's own copy of this rule (uichemy-atw.css) DOES set cursor:default, because
   there the cards would self-link to the section they already sit in. */
.ucx-rel-card.is-soon {
    position: relative;
}
.uc-soon-card {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-sprout-color-text-weaker);
    background: var(--color-sprout-color-background-weaker);
    border: 1px solid var(--color-sprout-color-border-weak);
}