/* chertrepat.com — only what the shared CHERT site system does not already provide.
 *
 * Everything that could be an `sx-` component is one. These are the four shapes this product needs and
 * the family did not have: a six-band architecture stack, a component card with a bulleted body, a table
 * that scrolls instead of squashing, and the capability state chip.
 *
 * Tokens only — no colour is written here, it is referenced (hard rule 8, and the hex lint enforces it).
 * Logical properties throughout, because this page ships in Arabic from the same stylesheet and `left`
 * would be the wrong side half the time. */

/* ---- architecture bands ------------------------------------------------------------------------- */
.cr-arch { display: grid; gap: 14px; margin-block-start: 28px; }
.cr-arch .sx-layer { border-radius: 14px; }
.cr-arch__note {
  margin-block-start: 22px; padding-inline-start: 10px;
  display: flex; align-items: flex-start; gap: 10px;
  color: var(--chert-muted); font-size: .92rem; line-height: 1.65; max-inline-size: 70ch;
}
.cr-arch__note svg { flex: 0 0 auto; margin-block-start: 3px; }

/* ---- component cards --------------------------------------------------------------------------- */
.cr-comps { display: grid; gap: 18px; margin-block-start: 28px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.cr-comp {
  border: 1px solid var(--chert-border); border-radius: 16px;
  background: var(--chert-surface); padding: 22px;
}
.cr-comp header { display: flex; gap: 14px; align-items: flex-start; margin-block-end: 14px; }
.cr-comp h3 { margin: 0 0 2px; font-size: 1.12rem; }
.cr-comp__what { margin: 0; color: var(--chert-muted); font-size: .86rem; }
.cr-comp ul { margin: 0; padding-inline-start: 1.15rem; display: grid; gap: 7px; }
.cr-comp li { font-size: .92rem; line-height: 1.6; }

/* ---- tables that scroll rather than squash ----------------------------------------------------- */
.cr-table { overflow-x: auto; margin-block-start: 26px;
  border: 1px solid var(--chert-border); border-radius: 14px; background: var(--chert-surface); }
.cr-table table { inline-size: 100%; border-collapse: collapse; min-inline-size: 36rem; }
.cr-table th, .cr-table td {
  padding: 13px 16px; text-align: start; vertical-align: top;
  border-block-end: 1px solid var(--chert-border); font-size: .92rem; line-height: 1.6;
}
.cr-table thead th { background: var(--chert-surface-alt); color: var(--chert-ink);
  font-weight: 700; font-size: .84rem; letter-spacing: .02em; }
.cr-table tbody tr:last-child th, .cr-table tbody tr:last-child td { border-block-end: 0; }
.cr-table tbody th { font-weight: 600; inline-size: 30%; }

/* ---- capability groups ------------------------------------------------------------------------- */
.cr-fgroup { margin-block-start: 48px; }
.cr-fgroup header { display: flex; gap: 14px; align-items: flex-start; }
.cr-fgroup h2 { margin: 0 0 4px; font-size: 1.35rem; }
.cr-fgroup header p { margin: 0; color: var(--chert-muted); }

/* ---- state chips: a word first, a colour second (Design System §8) ----------------------------- */
.cr-state {
  display: inline-block; white-space: nowrap;
  padding: 3px 10px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; letter-spacing: .01em;
  border: 1px solid var(--chert-border-strong); color: var(--chert-ink);
  background: var(--chert-surface-alt);
}
.cr-state--live { background: var(--chert-success-tint); border-color: var(--chert-success); }
.cr-state--proving { background: var(--chert-info-tint); border-color: var(--chert-info); }
.cr-state--building { background: var(--chert-warning-tint); border-color: var(--chert-warning); }

.cr-legend { list-style: none; margin: 26px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 22px; }
.cr-legend li { display: flex; align-items: center; gap: 8px;
  color: var(--chert-muted); font-size: .88rem; }

/* ---- a stage panel needs no JS to be readable -------------------------------------------------- */
.sx-life__panels { display: grid; gap: 16px; margin-block-start: 30px;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }

/* ---- the reveal animates position, never visibility -------------------------------------------- */
/* The shared system fades reveals in: `.js .sx-reveal { opacity: 0 }` until an IntersectionObserver adds
 * `is-in`. That makes every below-the-fold element genuinely invisible until script and scroll both
 * cooperate, and it is why an accessibility sweep of this page reported sixty contrast failures — it was
 * measuring faded text against the ground and reading 1.02 where the real pair is 15:1.
 *
 * So the slide stays and the fade goes. The motion still reads as a reveal; the words are simply always
 * there to be measured, read, found by search, or seen when the observer never fires. Worth taking back
 * upstream to the other three sites, which share the same behaviour. */
.js .sx-reveal { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .sx-reveal, .js .sx-reveal { opacity: 1 !important; transform: none !important; }
}

/* ---- orange cannot carry small text on cream --------------------------------------------------- */
/* One finding, three places it showed up. Measured against --chert-cream:
 *
 *     --chert-orange        2.28:1
 *     --chert-orange-deep   2.89:1      AA wants 4.5:1 for text, 3:1 for large text
 *     --chert-muted         5.11:1      passes
 *     --chert-ink          16.64:1      passes
 *
 * So no orange in the palette reaches the threshold on the light ground, at any size this page uses. The
 * accent has to go rather than get darker, and the two places it appears as small text become ink.
 *
 * This is the shared system's, not this page's. `.sx-nav__brand b` is orange and the nav goes solid after
 * 40px of scroll on all four sites, so the brand word fails contrast on every one of them as soon as
 * anyone scrolls. `.sx-stage__count` fails wherever a lifecycle wheel sits on cream. Both are worth taking
 * upstream with the reveal change. */
.sx-nav.is-solid .sx-nav__brand b { color: var(--chert-ink); }
.sx-stage__count { color: var(--chert-ink); }

/* ---- the gallery: real screens from the real console -------------------------------------------- */
/* The family shows product screenshots in a browser-chrome frame; those styles are each site's own, so
   these are ours. The frame is three dots and a bar — enough to read as "a window" without pretending to
   be a particular browser. */
.cr-gallery { background: var(--chert-dark); color: var(--chert-dark-text); }
.cr-gallery__grid { display: grid; gap: 26px; margin-block-start: 34px;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.cr-shot { margin: 0; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--chert-dark-border); background: var(--chert-dark-surface); }
.cr-shot__frame { display: flex; gap: 6px; align-items: center;
  padding: 10px 14px; background: var(--chert-dark); border-block-end: 1px solid var(--chert-dark-border); }
.cr-shot__frame span { inline-size: 9px; block-size: 9px; border-radius: 50%;
  background: color-mix(in srgb, var(--chert-dark-text) 28%, transparent); }
.cr-shot img { display: block; inline-size: 100%; block-size: auto; }
.cr-shot figcaption { padding: 13px 16px; font-size: .88rem; line-height: 1.55;
  color: var(--chert-dark-muted); }