/* ==========================================================================
   KC AI PET MATCH - AUTHORITY PAGE SECTION SYSTEM
   ==========================================================================

   The reusable vocabulary every KCAI public page is assembled from. It is a
   separate file from kcai-ui.css on purpose: kcai-ui.css owns the tokens, base
   typography and site chrome, and this file owns the things a page is built out
   of. One can be audited without the other.

   SCOPING CONTRACT

   Every selector below is either prefixed with `body.kcai` or begins with a
   `.kcaipm-` class that only KCAI section markup carries. Nothing here can
   reach a Gravity Form, a WordPress admin screen, a block-editor preview, or a
   future page that has not opted in. There are no element selectors, no
   `!important`, and no rules on `*`.

   NAMING

     .kcaipm-sec                 every section carries this, plus...
     .kcaipm-sec-<name>          ...its own stable identity class
     .kcaipm-<component>         a reusable component
     .kcaipm-<component>__part   a piece of that component

   Section identity classes and anchors are a contract. Once a page is
   published, renaming one is a breaking change.

   COLOUR NOTE - THE CONNECTION POINTS

   KCAI is jet black plus ONE electric blue. The single exception in this file
   is `--kcaipm-connect`, a restrained amber used only for the small joining
   dots in the sources diagram and the process rail, where two different kinds
   of thing meet and colour alone should not be doing the work anyway. It is
   never used for text, never for a surface, and never for a status.
   ========================================================================== */

:root {
  --kcaipm-connect: var(--kcai-warning);        /* small joining points only */
  --kcaipm-edge:    rgba(254, 254, 254, 0.14);  /* metallic-white hairline   */
  --kcaipm-edge-lit: rgba(254, 254, 254, 0.30);
}

/* ------------------------------------------------------------- 1. SECTION */

body.kcai .kcaipm-sec {
  position: relative;
  padding-block: clamp(56px, 7.5vw, 96px);
}
body.kcai .kcaipm-sec--tight { padding-block: clamp(40px, 5vw, 64px); }

/* Alternating surface. Used to group sections into bands so a long page reads
   as chapters rather than one continuous scroll. */
body.kcai .kcaipm-sec--alt {
  background: var(--kcai-elevated);
  border-top: 1px solid var(--kcai-border);
  border-bottom: 1px solid var(--kcai-border);
}

body.kcai .kcaipm-sec__head { max-width: 68ch; margin-bottom: clamp(32px, 4vw, 48px); }
body.kcai .kcaipm-sec__head > :last-child { margin-bottom: 0; }
body.kcai .kcaipm-sec p { color: var(--kcai-muted); }
body.kcai .kcaipm-sec strong { color: var(--kcai-silver); }

/* ----------------------------------------------------------- 2. UTILITIES */

/* Metallic-white hairline. The brand's borders are white at low alpha rather
   than a grey, so they pick up the surface behind them instead of sitting on
   top of it as a flat line. */
body.kcai .kcaipm-edge { border: 1px solid var(--kcaipm-edge); }
body.kcai .kcaipm-edge-top { border-top: 1px solid var(--kcaipm-edge); }

/* Electric-blue highlight for a word or short phrase inside prose. */
body.kcai .kcaipm-hl { color: var(--kcai-blue); font-weight: 600; }

/* Section divider. A hairline that fades out at both ends so it reads as a
   seam rather than a border. */
body.kcai .kcaipm-divider {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--kcaipm-edge-lit) 20%, var(--kcaipm-edge-lit) 80%, transparent);
}

/* Breadcrumbs. Present in the system now so the authority pages that follow
   inherit one implementation rather than each inventing its own. */
/* --kcai-muted, not --kcai-slate: slate is 4.1:1 and fails AA for text this
   size. See the token contract at the top of kcai-ui.css. */
body.kcai .kcaipm-crumbs { font-size: .88rem; color: var(--kcai-muted); margin-bottom: var(--kcai-s5); }
body.kcai .kcaipm-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--kcai-s2); margin: 0; padding: 0; }
body.kcai .kcaipm-crumbs li + li::before { content: '/'; color: var(--kcai-muted); margin-right: var(--kcai-s2); }
body.kcai .kcaipm-crumbs a { color: var(--kcai-muted); text-decoration: none; }
body.kcai .kcaipm-crumbs a:hover { color: var(--kcai-blue); text-decoration: underline; }
body.kcai .kcaipm-crumbs [aria-current="page"] { color: var(--kcai-silver); }

/* The development tag. Every unfinished thing on this site wears one, and it is
   text plus a border rather than a colour, so it survives greyscale and
   forced-colours mode. */
body.kcai .kcaipm-devtag {
  display: inline-flex; align-items: center; gap: var(--kcai-s2);
  font-family: var(--kcai-font-head);
  font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--kcai-warning);
  border: 1px solid rgba(245,166,35,.45); background: rgba(245,166,35,.08);
  border-radius: 999px; padding: 3px var(--kcai-s3);
}
body.kcai .kcaipm-devtag::before { content: '\25CB'; font-size: .85em; line-height: 1; }

/* -------------------------------------------------------------- 3. HERO */

body.kcai .kcaipm-sec-hero { padding-block: clamp(56px, 8vw, 104px) clamp(48px, 6vw, 80px); overflow: hidden; }

/* A very faint, STATIC node field. No animation, no canvas, no library - two
   radial tints and a 46px dot grid, all in one painted layer. */
body.kcai .kcaipm-sec-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 16% 20%, rgba(0,164,253,.13), transparent 44%),
    radial-gradient(circle at 84% 8%,  rgba(0,164,253,.08), transparent 40%),
    radial-gradient(rgba(0,164,253,.16) 1px, transparent 1px);
  background-size: auto, auto, 46px 46px;
  opacity: .55;
}
/* The hero deliberately does NOT narrow its own wrapper. Capping it here put
   the hero's left edge ~57px inside every other section's, so the page visibly
   stepped in and out as you scrolled. The measure is controlled on the text
   itself instead, which keeps one continuous left rail down the whole page. */
body.kcai .kcaipm-hero__inner { position: relative; }
/* em, not ch or px: the headline is a clamp(), so an em cap scales with it and
   holds roughly the same two-line shape from phone to desktop. */
body.kcai .kcaipm-hero__title { margin-bottom: var(--kcai-s5); max-width: 18em; }
body.kcai .kcaipm-hero__lede { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--kcai-silver); max-width: 60ch; }
body.kcai .kcaipm-hero__actions {
  display: flex; flex-wrap: wrap; gap: var(--kcai-s3);
  margin: clamp(28px, 3vw, 40px) 0 var(--kcai-s5);
}
body.kcai .kcaipm-hero__powered { margin: 0; }

/* --------------------------------------------------- 4. NOTICES / STATUS */

/* Builds on .kcai-notice from the base system. The status variant is the one
   used for "this is not finished yet", which on this site is a first-class
   piece of information rather than a disclaimer to be hidden. */
body.kcai .kcaipm-status {
  display: flex; gap: var(--kcai-s4); align-items: flex-start;
  max-width: 74ch;
  border: 1px solid var(--kcai-blue-40);
  border-left-width: 3px;
  background: var(--kcai-blue-12);
  border-radius: var(--kcai-radius);
  padding: var(--kcai-s4) var(--kcai-s5);
  color: var(--kcai-silver);
}
body.kcai .kcaipm-status__mark { color: var(--kcai-blue); flex-shrink: 0; line-height: 1.4; }
body.kcai .kcaipm-status p { margin: 0; color: var(--kcai-silver); }
body.kcai .kcaipm-status strong { color: var(--kcai-white); }

/* Accuracy / trust callout - the "similar is not the same" family of notices. */
body.kcai .kcaipm-accuracy {
  border: 1px solid var(--kcaipm-edge);
  border-radius: var(--kcai-radius);
  background: var(--kcai-panel);
  padding: clamp(20px, 3vw, 32px);
}
body.kcai .kcaipm-accuracy > :last-child { margin-bottom: 0; }

/* ------------------------------------------------- 5. FOUR-SOURCE DIAGRAM */

body.kcai .kcaipm-flow { display: grid; gap: 0; }
body.kcai .kcaipm-flow__sources {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--kcai-s4);
}
body.kcai .kcaipm-flow__source {
  position: relative;
  background: var(--kcai-panel);
  border: 1px solid var(--kcai-border);
  border-radius: var(--kcai-radius);
  padding: var(--kcai-s5);
}
body.kcai .kcaipm-flow__source h3 { font-size: 1.02rem; margin: 0 0 var(--kcai-s2); }
body.kcai .kcaipm-flow__source p { margin: 0; font-size: .93rem; }

/* The connection point. Small, amber, and paired with a ring so it reads as a
   junction rather than a decoration. */
body.kcai .kcaipm-flow__dot {
  display: block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--kcaipm-connect);
  box-shadow: 0 0 0 4px rgba(245,166,35,.14);
  margin: 0 0 var(--kcai-s4);
}

body.kcai .kcaipm-flow__converge { display: block; width: 100%; height: 72px; }
body.kcai .kcaipm-flow__converge svg { display: block; width: 100%; height: 100%; }

body.kcai .kcaipm-flow__result {
  max-width: 46rem; margin: 0 auto; text-align: center;
  background: var(--kcai-elevated);
  border: 1px solid var(--kcai-blue-40);
  border-radius: var(--kcai-radius);
  padding: clamp(22px, 3vw, 32px);
}
body.kcai .kcaipm-flow__result h3 { margin: 0 0 var(--kcai-s2); }
body.kcai .kcaipm-flow__result p { margin: 0; }

/* Below the breakpoint the four sources stack, so a converging fan makes no
   sense. The SVG is dropped and a single vertical rail takes over. */
@media (max-width: 900px) {
  body.kcai .kcaipm-flow__sources { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.kcai .kcaipm-flow__converge {
    height: 48px;
    background: linear-gradient(180deg, transparent, var(--kcai-blue-40) 30%, var(--kcai-blue-40) 70%, transparent);
    background-size: 2px 100%; background-repeat: no-repeat; background-position: center;
  }
  body.kcai .kcaipm-flow__converge svg { display: none; }
}
@media (max-width: 560px) {
  body.kcai .kcaipm-flow__sources { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------ 6. AUTHORITY CARD */

/* 320px rather than 270px is a content decision, not a taste one: the six-card
   sets on this page (privacy, participation) fell into 4+2 at desktop, which
   reads as two of them having been left over. At 320 the widest track count is
   three, so six cards make an even 3+3 and two cards make a clean pair. */
body.kcai .kcaipm-authority {
  display: grid; gap: var(--kcai-s5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
body.kcai .kcaipm-authority__card {
  background: var(--kcai-panel);
  border: 1px solid var(--kcai-border);
  border-radius: var(--kcai-radius);
  padding: clamp(20px, 2.6vw, 28px);
  display: flex; flex-direction: column; gap: var(--kcai-s3);
  transition: border-color .18s var(--kcai-ease);
}
body.kcai .kcaipm-authority__card:hover { border-color: var(--kcai-blue-40); }
body.kcai .kcaipm-authority__card h3 { margin: 0; font-size: 1.05rem; }
body.kcai .kcaipm-authority__card p { margin: 0; font-size: .95rem; }
body.kcai .kcaipm-authority__card ul { margin: 0; padding-left: 18px; color: var(--kcai-muted); font-size: .95rem; }
body.kcai .kcaipm-authority__card li { margin-bottom: var(--kcai-s2); }
body.kcai .kcaipm-authority__card li:last-child { margin-bottom: 0; }

/* The "available now" / "being built" split. Two columns that must not be
   confused with each other, distinguished by a rule colour AND a heading. */
body.kcai .kcaipm-authority__card--now  { border-left: 3px solid var(--kcai-blue); }
body.kcai .kcaipm-authority__card--soon { border-left: 3px solid var(--kcai-warning); }

/* ------------------------------------------------------- 7. PROCESS STEPS */

body.kcai .kcaipm-process { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--kcai-s5); }
body.kcai .kcaipm-process--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.kcai .kcaipm-process__step { position: relative; padding-left: 60px; counter-increment: kcaipm-step; }
body.kcai .kcaipm-process { counter-reset: kcaipm-step; }
body.kcai .kcaipm-process__step::before {
  content: counter(kcaipm-step, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--kcai-font-head); font-weight: 700; font-size: .95rem;
  color: var(--kcai-blue);
  border: 1px solid var(--kcai-blue-40);
  background: var(--kcai-blue-12);
}
/* The rail joining one step to the next. Drawn from the numbered marker down,
   and suppressed on the last step so the chain has a visible end. */
body.kcai .kcaipm-process__step::after {
  content: ''; position: absolute; left: 21px; top: 50px; bottom: -24px; width: 1px;
  background: linear-gradient(180deg, var(--kcai-blue-40), transparent);
}
body.kcai .kcaipm-process__step:last-child::after { display: none; }
body.kcai .kcaipm-process__step h3 { margin: 8px 0 var(--kcai-s2); font-size: 1.05rem; }
body.kcai .kcaipm-process__step p { margin: 0; font-size: .95rem; }

@media (min-width: 901px) {
  body.kcai .kcaipm-process--3 .kcaipm-process__step::after { display: none; }
}
@media (max-width: 900px) {
  body.kcai .kcaipm-process--3 { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------ 8. PATHWAYS */

/* Five pathways. At 260px they landed 4+1, which makes the fifth look like an
   afterthought; 330 caps the row at three so it reads 3+2. */
body.kcai .kcaipm-paths {
  display: grid; gap: var(--kcai-s4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
}
body.kcai .kcaipm-path {
  display: flex; flex-direction: column; gap: var(--kcai-s3);
  background: var(--kcai-panel);
  border: 1px solid var(--kcai-border);
  border-radius: var(--kcai-radius);
  padding: clamp(20px, 2.6vw, 28px);
  text-decoration: none;
  transition: border-color .18s var(--kcai-ease), transform .18s var(--kcai-ease), background-color .18s var(--kcai-ease);
}
/* A pathway that leads somewhere is an <a>; one that does not is a <div>. The
   difference is real, not cosmetic - a keyboard user should not be able to tab
   to something that cannot be followed. */
body.kcai a.kcaipm-path:hover {
  border-color: var(--kcai-blue-40); background: var(--kcai-charcoal); transform: translateY(-2px);
}
body.kcai .kcaipm-path h3 { margin: 0; font-size: 1.08rem; }
body.kcai .kcaipm-path p { margin: 0; font-size: .93rem; }
body.kcai .kcaipm-path__go {
  margin-top: auto; font-weight: 600; color: var(--kcai-blue); font-size: .93rem;
}
body.kcai a.kcaipm-path:hover .kcaipm-path__go { color: var(--kcai-white); }

/* The closing label on a pathway that deliberately does not link anywhere. It
   has to read as inactive without becoming hard to read - so it drops the blue
   affordance colour and the arrow, but keeps muted-level contrast rather than
   the slate it was originally given inline (3.98:1, an AA failure). Having it as
   a class also gets a colour out of the page markup, where it could not be
   audited with the rest of the palette. */
body.kcai .kcaipm-path__go--none { color: var(--kcai-muted); font-weight: 500; }

body.kcai .kcaipm-path--pending { border-style: dashed; border-color: var(--kcai-border); }
body.kcai .kcaipm-path--pending h3 { color: var(--kcai-silver); }

/* ------------------------------------------------------ 9. RESOURCE CARDS */

body.kcai .kcaipm-resources {
  display: grid; gap: var(--kcai-s4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
body.kcai .kcaipm-resource {
  display: flex; flex-direction: column; gap: var(--kcai-s2);
  border: 1px solid var(--kcai-border);
  border-radius: var(--kcai-radius);
  background: var(--kcai-panel);
  padding: var(--kcai-s5);
  text-decoration: none;
  transition: border-color .18s var(--kcai-ease);
}
body.kcai a.kcaipm-resource:hover { border-color: var(--kcai-blue-40); }
body.kcai .kcaipm-resource h3 { margin: 0; font-size: 1rem; }
body.kcai .kcaipm-resource p { margin: 0; font-size: .9rem; }
body.kcai .kcaipm-resource__state { margin-top: auto; font-size: .82rem; color: var(--kcai-blue); font-weight: 600; }
body.kcai .kcaipm-resource--pending { border-style: dashed; }
/* "Resource coming soon" must still be comfortably legible - it is the label
   that stops someone hunting for a link that is not there. Muted (8.2:1), not
   slate (3.98:1 measured on this panel). */
body.kcai .kcaipm-resource--pending .kcaipm-resource__state { color: var(--kcai-muted); font-weight: 500; }

/* --------------------------------------------------------- 10. CTA PANEL */

body.kcai .kcaipm-cta {
  position: relative; overflow: hidden;
  background: var(--kcai-panel);
  border: 1px solid var(--kcaipm-edge);
  border-radius: var(--kcai-radius);
  padding: clamp(36px, 5vw, 64px) clamp(20px, 4vw, 48px);
  text-align: center;
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
}
body.kcai .kcaipm-cta::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--kcai-blue), transparent);
  opacity: .6;
}
body.kcai .kcaipm-cta__lede { margin: 0 auto var(--kcai-s6); max-width: 58ch; color: var(--kcai-silver); }
body.kcai .kcaipm-cta__links {
  display: flex; flex-wrap: wrap; gap: var(--kcai-s3); justify-content: center;
}
body.kcai .kcaipm-cta__note { margin: var(--kcai-s5) 0 0; font-size: .9rem; color: var(--kcai-muted); }

/* ---------------------------------------------------------------- 10b. FAQ

   A column of questions wants a narrower measure than a card grid. Narrowing
   the section WRAPPER to get it would pull the FAQ's left edge inwards and
   break the page's continuous left rail, so the cap goes on the list. */

body.kcai .kcaipm-sec-faq .kcai-faq { max-width: 900px; }

/* ------------------------------------------------------- 11. SPLIT LAYOUT */

body.kcai .kcaipm-split {
  display: grid; gap: clamp(28px, 4vw, 48px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
body.kcai .kcaipm-split--center { align-items: center; }
@media (max-width: 860px) {
  body.kcai .kcaipm-split { grid-template-columns: minmax(0, 1fr); }
}

/* Labelled point list - "Coat patterns", "Image quality", and similar, where a
   term carries the weight and the sentence explains it. */
body.kcai .kcaipm-points { list-style: none; margin: 0; padding: 0; }
body.kcai .kcaipm-points li {
  position: relative; padding-left: 22px; margin-bottom: var(--kcai-s3);
  color: var(--kcai-muted); font-size: .96rem;
}
body.kcai .kcaipm-points li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--kcai-blue);
}
body.kcai .kcaipm-points li:last-child { margin-bottom: 0; }
body.kcai .kcaipm-points b { color: var(--kcai-white); font-weight: 600; }

/* ------------------------------------------------------ 12. MOBILE SPACING

   One place where vertical rhythm tightens on small screens, rather than each
   section carrying its own guess. Horizontal overflow is guarded here too: any
   grid child that cannot shrink below its content is the usual cause, and
   min-width:0 on the grid items removes it at the source. */

body.kcai .kcaipm-sec > .kcai-wrap { min-width: 0; }
body.kcai .kcaipm-flow__sources > *,
body.kcai .kcaipm-authority > *,
body.kcai .kcaipm-paths > *,
body.kcai .kcaipm-resources > *,
body.kcai .kcaipm-split > * { min-width: 0; }

@media (max-width: 700px) {
  body.kcai .kcaipm-sec { padding-block: 52px; }
  body.kcai .kcaipm-sec-hero { padding-block: 44px 40px; }
  body.kcai .kcaipm-sec__head { margin-bottom: 28px; }
  body.kcai .kcaipm-hero__actions .kcai-btn,
  body.kcai .kcaipm-cta__links .kcai-btn { width: 100%; }
  body.kcai .kcaipm-status { padding: var(--kcai-s4); gap: var(--kcai-s3); }
}

/* ------------------------------------------------------- 13. REDUCED MOTION

   The base system already flattens transitions globally. Repeated here for the
   two components that also move on hover, so the intent survives if the base
   rule is ever narrowed. */

@media (prefers-reduced-motion: reduce) {
  body.kcai a.kcaipm-path:hover { transform: none; }
  body.kcai .kcaipm-authority__card:hover { transform: none; }
}

/* ------------------------------------------------------- 14. FORCED COLOURS

   In forced-colours mode the browser replaces our palette wholesale. Anything
   that carried meaning through colour alone needs a border to survive, and the
   decorative node field needs to disappear rather than become a solid block. */

@media (forced-colors: active) {
  body.kcai .kcaipm-sec-hero::before { display: none; }
  body.kcai .kcaipm-flow__source,
  body.kcai .kcaipm-flow__result,
  body.kcai .kcaipm-path,
  body.kcai .kcaipm-resource,
  body.kcai .kcaipm-cta,
  body.kcai .kcaipm-devtag { border: 1px solid CanvasText; }
}