/* ==========================================================================
   KC AI PET MATCH - DESIGN SYSTEM
   ==========================================================================

   Every value is a token. Nothing below hardcodes a colour outside :root, so
   the palette can be adjusted in one place and a component can never quietly
   drift off-brand.

   CONTRAST CONTRACT (measured against #000000):
     --kcai-white   #FEFEFE  ~20.4:1   AAA
     --kcai-silver  #C7D0D9  ~13.1:1   AAA
     --kcai-muted   #98A5B3  ~ 8.2:1   AAA (large) / AA
     --kcai-blue    #00A4FD  ~ 7.5:1   AA
     --kcai-slate   #657789  ~ 4.1:1   AA large text and non-text only

   Electric blue is ~2.7:1 on white and MUST NOT be used as text on a light
   surface. There is deliberately no light-surface text token for it.
   ========================================================================== */

:root {
  /* ---- brand, sampled from the supplied logo ---- */
  --kcai-blue:        #00A4FD;
  --kcai-white:       #FEFEFE;
  --kcai-black:       #000000;

  /* ---- surfaces ---- */
  --kcai-elevated:    #080B0F;
  --kcai-panel:       #10151B;
  --kcai-charcoal:    #181F27;
  --kcai-border:      #2A3541;

  /* ---- text ---- */
  --kcai-silver:      #C7D0D9;
  --kcai-muted:       #98A5B3;
  --kcai-slate:       #657789;

  /* ---- functional ---- */
  --kcai-success:     #31C48D;
  --kcai-warning:     #F5A623;
  --kcai-urgent:      #E5484D;

  /* ---- derived (no new hues introduced) ---- */
  --kcai-blue-12:     rgba(0, 164, 253, 0.12);
  --kcai-blue-20:     rgba(0, 164, 253, 0.20);
  --kcai-blue-40:     rgba(0, 164, 253, 0.40);
  --kcai-white-08:    rgba(254, 254, 254, 0.08);
  --kcai-white-22:    rgba(254, 254, 254, 0.22);

  /* ---- type ---- */
  --kcai-font-head: 'Space Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --kcai-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* ---- spacing scale ---- */
  --kcai-s1: 4px;   --kcai-s2: 8px;   --kcai-s3: 12px;  --kcai-s4: 16px;
  --kcai-s5: 24px;  --kcai-s6: 32px;  --kcai-s7: 48px;  --kcai-s8: 64px;
  --kcai-s9: 96px;

  --kcai-radius:    12px;
  --kcai-radius-sm: 8px;
  --kcai-maxw:      1200px;

  --kcai-ease: cubic-bezier(0.2, 0, 0.2, 1);
}

/* ------------------------------------------------------------------ base */

body.kcai {
  background: var(--kcai-black);
  color: var(--kcai-silver);
  font-family: var(--kcai-font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body.kcai h1, body.kcai h2, body.kcai h3, body.kcai h4 {
  font-family: var(--kcai-font-head);
  color: var(--kcai-white);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--kcai-s4);
}

body.kcai h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); font-weight: 700; }
body.kcai h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 600; }
body.kcai h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 600; }

body.kcai p { margin: 0 0 var(--kcai-s4); }
body.kcai a { color: var(--kcai-blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
body.kcai a:hover { color: var(--kcai-white); }

/* Focus: a visible ring on every interactive element. box-shadow rather than
   outline so a rounded control is not clipped by an ancestor's overflow. */
body.kcai a:focus-visible,
body.kcai button:focus-visible,
body.kcai input:focus-visible,
body.kcai select:focus-visible,
body.kcai textarea:focus-visible,
body.kcai [tabindex]:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px var(--kcai-black), 0 0 0 6px var(--kcai-blue);
  border-radius: var(--kcai-radius-sm);
}

.kcai-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--kcai-blue); color: #001018;
  padding: var(--kcai-s3) var(--kcai-s5);
  font-weight: 700; z-index: 999;
}
.kcai-skip:focus { left: var(--kcai-s4); top: var(--kcai-s4); }

/* ESCAPING THE BLOCK THEME'S CONSTRAINED LAYOUT.
   Twenty Twenty-Five wraps post content in `.is-layout-constrained`, which caps
   every direct child at the theme's content-size (~620px). Our page wrapper is
   such a child, so without this the entire site renders in a narrow column
   inside a wide black page. Releasing the wrapper lets each section span the
   viewport and `.kcai-wrap` do the measuring instead. */
body.kcai .kcai-page,
body.kcai .is-layout-constrained > .kcai-page,
body.kcai .wp-block-post-content > .kcai-page {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Same release, for the modular section blocks.
   A page built to the section standard is a RUN of top-level wp:group blocks
   rather than one wrapper, so every one of them is a direct child of the
   constrained container and every one of them needs releasing. `.kcaipm-sec` is
   carried by every section in addition to its own `.kcaipm-sec-<name>` class
   precisely so this rule can be written once and never chase a section list. */
body.kcai .kcaipm-sec,
body.kcai .is-layout-constrained > .kcaipm-sec,
body.kcai .wp-block-post-content > .kcaipm-sec {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
body.kcai .entry-content.has-global-padding { padding-left: 0; padding-right: 0; }

/* DUPLICATE H1.
   Twenty Twenty-Five renders the page title as an H1 through its post-title
   block, and every KCAI page also renders its own H1 in the hero - so each
   inner page shipped with two H1s carrying identical text. `display:none`
   rather than a visually-hidden class is deliberate: the heading is genuinely
   redundant, and display:none removes it from the accessibility tree too, so a
   screen-reader user hears the title once rather than twice. */
body.kcai .wp-block-post-title { display: none; }

.kcai-wrap { max-width: var(--kcai-maxw); margin: 0 auto; padding: 0 var(--kcai-s5); }
.kcai-section { padding: var(--kcai-s9) 0; }
.kcai-section--tight { padding: var(--kcai-s8) 0; }
.kcai-eyebrow {
  font-family: var(--kcai-font-head); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--kcai-blue);
  margin: 0 0 var(--kcai-s3);
}
.kcai-lede { font-size: 1.12rem; color: var(--kcai-muted); max-width: 62ch; }

/* Controlled silver-to-white heading gradient. Falls back to solid white where
   background-clip:text is unsupported. */
.kcai-gradient-head {
  background: linear-gradient(180deg, var(--kcai-white) 0%, #9FB0BF 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports not (background-clip: text) {
  .kcai-gradient-head { color: var(--kcai-white); -webkit-text-fill-color: currentColor; }
}

/* --------------------------------------------------------------- buttons */

/* EVERY button colour rule is prefixed with `body.kcai`, and that is
   load-bearing rather than stylistic.
   The base link rule above is `body.kcai a` at (0,1,1). A button rule written
   as `.kcai-btn--primary` is only (0,1,0), so the link rule wins and every
   anchor button renders its label in link-blue ON the blue fill - invisible.
   Prefixing takes these to (0,2,1) so they beat it. No !important needed.
   This is the same specificity trap the KCPSR matching plugin hit at v0.6.0. */

body.kcai .kcai-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--kcai-s2);
  min-height: 52px; padding: var(--kcai-s3) var(--kcai-s6);
  border-radius: var(--kcai-radius); border: 1px solid transparent;
  font-family: var(--kcai-font-body); font-size: 1rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s var(--kcai-ease), border-color .18s var(--kcai-ease), transform .18s var(--kcai-ease);
}
/* Dark text on blue: #001018 on #00A4FD is ~7.9:1. White on blue would be 2.7:1. */
body.kcai .kcai-btn--primary { background: var(--kcai-blue); color: #001018; }
body.kcai .kcai-btn--primary:hover { background: #3FBBFF; color: #001018; transform: translateY(-1px); }

body.kcai .kcai-btn--secondary { background: transparent; color: var(--kcai-white); border-color: var(--kcai-white-22); }
body.kcai .kcai-btn--secondary:hover { background: var(--kcai-white-08); border-color: var(--kcai-white); color: var(--kcai-white); }

body.kcai .kcai-btn--ghost { background: transparent; color: var(--kcai-blue); border-color: var(--kcai-blue-40); }
body.kcai .kcai-btn--ghost:hover { background: var(--kcai-blue-12); color: var(--kcai-white); }

body.kcai .kcai-btn--wide { width: 100%; }

/* Same reason: the nav and footer links sit inside `body.kcai a`. */
body.kcai .kcai-nav a { color: var(--kcai-silver); }
body.kcai .kcai-nav a:hover { color: var(--kcai-white); }
body.kcai .kcai-footer a { color: var(--kcai-silver); }
body.kcai .kcai-footer a:hover { color: var(--kcai-blue); }
body.kcai .kcai-header__logo { text-decoration: none; }

/* ---------------------------------------------------------------- panels */

.kcai-panel {
  background: var(--kcai-panel);
  border: 1px solid var(--kcai-border);
  border-radius: var(--kcai-radius);
  padding: var(--kcai-s6);
}
.kcai-panel--elevated { background: var(--kcai-elevated); }
.kcai-panel--edge {
  position: relative;
  box-shadow: 0 0 0 1px rgba(0,164,253,0.10), 0 18px 40px rgba(0,0,0,0.55);
}
/* Subtle blue edge lighting along the top of a panel. */
.kcai-panel--edge::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--kcai-blue), transparent);
  opacity: .55;
}

.kcai-grid { display: grid; gap: var(--kcai-s5); }
.kcai-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kcai-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kcai-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ----------------------------------------------------------------- cards */

.kcai-card {
  background: var(--kcai-panel);
  border: 1px solid var(--kcai-border);
  border-radius: var(--kcai-radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .18s var(--kcai-ease), transform .18s var(--kcai-ease);
}
.kcai-card:hover { border-color: var(--kcai-blue-40); transform: translateY(-2px); }
.kcai-card__media {
  aspect-ratio: 4 / 3; background: var(--kcai-charcoal);
  display: flex; align-items: center; justify-content: center;
  color: var(--kcai-slate); font-size: .85rem;
}
.kcai-card__body { padding: var(--kcai-s4); display: flex; flex-direction: column; gap: var(--kcai-s2); }
.kcai-card__title { font-family: var(--kcai-font-head); font-weight: 600; color: var(--kcai-white); margin: 0; font-size: 1.05rem; }
.kcai-card__meta { color: var(--kcai-muted); font-size: .9rem; margin: 0; }

/* --------------------------------------------------------------- status
   Colour is never the only signal: every chip carries a text label and a
   glyph, so the meaning survives greyscale and colour blindness. */

.kcai-status {
  display: inline-flex; align-items: center; gap: var(--kcai-s2);
  padding: 4px var(--kcai-s3); border-radius: 999px;
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid currentColor; background: rgba(0,0,0,.35);
}
.kcai-status__glyph { font-size: .9em; line-height: 1; }
.kcai-status--lost     { color: var(--kcai-blue); }
.kcai-status--found    { color: var(--kcai-silver); }
.kcai-status--match    { color: var(--kcai-blue); background: var(--kcai-blue-12); }
.kcai-status--reunited { color: var(--kcai-success); }
.kcai-status--urgent   { color: var(--kcai-urgent); }
.kcai-status--private  { color: var(--kcai-muted); }
.kcai-status--review   { color: var(--kcai-warning); }

/* ------------------------------------------------------------------ steps */

.kcai-steps { counter-reset: kcai-step; }
.kcai-step { position: relative; padding-left: 56px; }
.kcai-step::before {
  counter-increment: kcai-step; content: counter(kcai-step);
  position: absolute; left: 0; top: 0;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--kcai-font-head); font-weight: 700; font-size: 1rem;
  color: var(--kcai-blue); border: 1px solid var(--kcai-blue-40); background: var(--kcai-blue-12);
}

/* ----------------------------------------------------------------- header */

.kcai-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(0,0,0,.88);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--kcai-border);
}
.kcai-header__inner {
  max-width: var(--kcai-maxw); margin: 0 auto; padding: var(--kcai-s3) var(--kcai-s5);
  display: flex; align-items: center; gap: var(--kcai-s5); flex-wrap: wrap;
}
.kcai-header__logo { display: flex; align-items: center; flex-shrink: 0; }
.kcai-header__logo-img { height: 44px; width: auto; display: block; }
.kcai-logo-fallback { font-family: var(--kcai-font-head); font-weight: 700; color: var(--kcai-white); }

/* The menu is one element so the burger's aria-controls points at exactly the
   thing that shows and hides. On desktop it is a row; on mobile the same
   element becomes a full-width stack under the logo. */
.kcai-header__menu {
  display: flex; align-items: center; gap: var(--kcai-s5);
  margin-left: auto;
}
.kcai-nav { display: flex; align-items: center; gap: var(--kcai-s5); }
.kcai-nav a {
  color: var(--kcai-silver); text-decoration: none; font-size: .95rem; font-weight: 500;
  padding: var(--kcai-s2) 0; border-bottom: 2px solid transparent;
}
.kcai-nav a:hover { color: var(--kcai-white); border-bottom-color: var(--kcai-blue); }
.kcai-nav a[aria-current="page"] { color: var(--kcai-white); border-bottom-color: var(--kcai-blue); }
.kcai-header__actions { display: flex; gap: var(--kcai-s3); flex-shrink: 0; }
.kcai-header__actions .kcai-btn { min-height: 44px; padding: var(--kcai-s2) var(--kcai-s4); font-size: .9rem; }

.kcai-burger {
  display: none; background: transparent; border: 1px solid var(--kcai-border);
  border-radius: var(--kcai-radius-sm); color: var(--kcai-white);
  width: 48px; height: 48px; margin-left: auto; cursor: pointer;
  align-items: center; justify-content: center;
}
/* One control, two glyphs: the open state shows a close icon, so the button
   always describes what pressing it will do. */
.kcai-burger__close { display: none; }
.kcai-header.is-open .kcai-burger__open { display: none; }
.kcai-header.is-open .kcai-burger__close { display: block; }

/* ------------------------------------------------------------------- hero */

.kcai-hero { position: relative; padding: var(--kcai-s9) 0 var(--kcai-s8); overflow: hidden; }
/* Very faint node/connection field. Static, low contrast, decorative only. */
.kcai-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(0,164,253,.10), transparent 42%),
    radial-gradient(circle at 82% 12%, rgba(0,164,253,.07), transparent 38%),
    radial-gradient(rgba(0,164,253,.16) 1px, transparent 1px);
  background-size: auto, auto, 46px 46px;
  opacity: .5;
}
.kcai-hero__inner { position: relative; }
.kcai-hero__logo { max-width: 460px; width: 68%; height: auto; margin: 0 0 var(--kcai-s6); display: block; }
.kcai-hero__actions { display: flex; flex-wrap: wrap; gap: var(--kcai-s3); margin: var(--kcai-s6) 0 var(--kcai-s5); }
.kcai-powered {
  font-family: var(--kcai-font-head); font-size: .95rem; font-weight: 600;
  color: var(--kcai-silver); margin: 0;
}
.kcai-powered strong { color: var(--kcai-white); }

/* -------------------------------------------------------- action panels */

.kcai-action {
  display: flex; flex-direction: column; gap: var(--kcai-s3);
  padding: var(--kcai-s7) var(--kcai-s6);
  border-radius: var(--kcai-radius);
  background: var(--kcai-panel); border: 1px solid var(--kcai-border);
  position: relative; overflow: hidden;
}
/* Lost vs Found are separated by label, icon and weight - not by unrelated
   hues. Lost gets the blue rule, Found gets the silver rule. */
.kcai-action::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
.kcai-action--lost::after  { background: var(--kcai-blue); }
.kcai-action--found::after { background: var(--kcai-silver); }
.kcai-action__icon { font-size: 1.8rem; line-height: 1; }
.kcai-action h3 { margin: 0; }

/* ------------------------------------------------------------------- FAQ */

.kcai-faq { border-top: 1px solid var(--kcai-border); }
.kcai-faq details { border-bottom: 1px solid var(--kcai-border); }
.kcai-faq summary {
  cursor: pointer; padding: var(--kcai-s5) 0; list-style: none;
  font-family: var(--kcai-font-head); font-weight: 600; color: var(--kcai-white);
  display: flex; justify-content: space-between; align-items: center; gap: var(--kcai-s4);
  min-height: 48px;
}
.kcai-faq summary::-webkit-details-marker { display: none; }
.kcai-faq summary::after { content: '+'; color: var(--kcai-blue); font-size: 1.5rem; flex-shrink: 0; }
.kcai-faq details[open] summary::after { content: '\2212'; }
.kcai-faq details > div { padding-bottom: var(--kcai-s5); color: var(--kcai-muted); }

/* ----------------------------------------------------------------- notice */

.kcai-notice {
  display: flex; gap: var(--kcai-s3); align-items: flex-start;
  border-radius: var(--kcai-radius); padding: var(--kcai-s4) var(--kcai-s5);
  border: 1px solid var(--kcai-warning); background: rgba(245,166,35,.08);
  color: var(--kcai-silver);
}
.kcai-notice strong { color: var(--kcai-warning); }
.kcai-notice--info { border-color: var(--kcai-blue-40); background: var(--kcai-blue-12); }
.kcai-notice--info strong { color: var(--kcai-blue); }

/* ----------------------------------------------------------------- footer */

.kcai-footer { border-top: 1px solid var(--kcai-border); padding: var(--kcai-s8) 0 var(--kcai-s6); background: var(--kcai-elevated); }
.kcai-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--kcai-s6); }

/* Column headings are H2s, not H4s. They are genuine second-level landmarks in
   the document outline, and jumping H1 -> H4 for styling reasons is exactly the
   heading-order defect this build set out to remove. The small-caps look is
   done in CSS, where appearance belongs. */
.kcai-footer__heading {
  font-family: var(--kcai-font-head);
  font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--kcai-muted); margin: 0 0 var(--kcai-s3);
}
.kcai-footer ul { list-style: none; margin: 0; padding: 0; }
.kcai-footer li { margin-bottom: var(--kcai-s2); }
.kcai-footer a { color: var(--kcai-silver); text-decoration: none; }
.kcai-footer a:hover { color: var(--kcai-blue); text-decoration: underline; }

.kcai-footer__logo { max-width: 200px; width: 100%; height: auto; margin: 0 0 var(--kcai-s4); display: block; }
.kcai-footer__name {
  font-family: var(--kcai-font-head); font-size: 1.05rem; font-weight: 700;
  color: var(--kcai-white); margin: 0;
}
.kcai-footer__descriptor {
  font-family: var(--kcai-font-head); font-size: .82rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--kcai-blue);
  margin: var(--kcai-s1) 0 var(--kcai-s3);
}
.kcai-footer__blurb { color: var(--kcai-muted); font-size: .92rem; max-width: 40ch; margin: var(--kcai-s4) 0 0; }
.kcai-footer .kcai-powered a { color: var(--kcai-silver); }
.kcai-footer .kcai-powered a:hover { color: var(--kcai-blue); }

.kcai-footer__legal {
  margin-top: var(--kcai-s7); padding-top: var(--kcai-s5);
  border-top: 1px solid var(--kcai-border); color: var(--kcai-slate); font-size: .85rem;
}
.kcai-footer__legal p { margin: 0 0 var(--kcai-s3); }
.kcai-footer__privacy { color: var(--kcai-muted); max-width: 96ch; }
.kcai-footer__privacy strong { color: var(--kcai-silver); }
.kcai-footer__copyright { margin-bottom: 0; }

/* ------------------------------------------------------------ responsive */

/* Footer links are inline text and rendered ~20px tall, under the 44px touch
   target minimum. Applied at the tablet breakpoint and below, because a 768px
   tablet is a touch device too - the first fix only covered <=700px and left
   768 failing. Measured at 375, 390, 768 and 1440. */
@media (max-width: 1023px) {
  body.kcai .kcai-footer li { margin-bottom: 0; }
  body.kcai .kcai-footer li a { display: inline-block; padding: 12px 0; min-height: 44px; }
}

@media (max-width: 1023px) {
  .kcai-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kcai-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .kcai-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* MOBILE NAVIGATION.
   The switch is at 980px, not 860: five navigation items plus the action button
   plus the logo stop fitting comfortably well before 860, and the row was
   crowding rather than wrapping. Above the breakpoint the burger does not
   exist; below it the burger is the only control and the menu is a full-width
   stack that scrolls if the viewport is short. */
@media (max-width: 980px) {
  .kcai-burger { display: flex; }
  .kcai-header__menu { display: none; }
  .kcai-header.is-open .kcai-header__menu {
    display: flex; flex-direction: column; align-items: stretch;
    width: 100%; margin: 0; gap: var(--kcai-s2);
    padding-bottom: var(--kcai-s3);
    max-height: calc(100vh - 76px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .kcai-header.is-open .kcai-nav {
    flex-direction: column; align-items: stretch; gap: 0; width: 100%;
  }
  .kcai-header.is-open .kcai-nav a {
    padding: var(--kcai-s3) 0; border-bottom: 1px solid var(--kcai-border);
    border-top: 0; min-height: 48px; display: flex; align-items: center;
  }
  .kcai-header.is-open .kcai-header__actions { width: 100%; margin-top: var(--kcai-s3); }
  .kcai-header.is-open .kcai-header__actions .kcai-btn { min-height: 52px; width: 100%; }
}
@media (max-width: 700px) {
  body.kcai { font-size: 16px; }
  .kcai-section { padding: var(--kcai-s8) 0; }

  .kcai-grid--2, .kcai-grid--3, .kcai-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .kcai-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .kcai-hero { padding: var(--kcai-s7) 0 var(--kcai-s6); }
  .kcai-hero__logo { width: 84%; }
  .kcai-hero__actions .kcai-btn { width: 100%; }
  .kcai-panel, .kcai-action { padding: var(--kcai-s5); }
}

/* ------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  body.kcai *, body.kcai *::before, body.kcai *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .kcai-card:hover, .kcai-btn--primary:hover { transform: none; }
}

/* ------------------------------------------------------- forced colours */

@media (forced-colors: active) {
  .kcai-btn, .kcai-panel, .kcai-card, .kcai-status { border: 1px solid CanvasText; }
}