/* riverb.co - components.css
   Page-specific components: hero/thesis, product cards, founders, schematic,
   app screens, FAQ, contact form. Load after base.css. */

/* ================= Editorial margin panel (Home hero facts / About history timeline) =================
   Fix 1 (P0/P1, 2026-09-11): the single-column thesis/prose pattern left the right half of
   wide viewports bare (rightHalfEmptyPct 84 on index.html at 1366px). A top-aligned two-column
   row - main content left, a hairline-edged margin panel right - gives the empty half an
   editorial reason to exist instead of decoration. Stacks below the main column on narrow
   viewports; never display:none. */
.editorial-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: start;
}
@media (min-width: 860px) {
  .editorial-row {
    grid-template-columns: minmax(0, 1fr) minmax(13rem, 17rem);
    gap: var(--space-6);
  }
}
.editorial-row__main { min-width: 0; }

.margin-panel {
  border-left: 1px solid var(--colour-accent);
  padding-left: var(--space-3);
}
.margin-panel__item + .margin-panel__item { margin-top: var(--space-3); }
.margin-panel__label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem; /* 12px, per the brief's 12-13px micro-label spec */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em; /* ~1px tracking at this size */
  /* NOT --colour-text-muted: this panel sits on the About history section's
     --colour-surface band, where muted measures 4.3:1 and fails AA. See Fix 4. */
  color: var(--colour-grey-600);
  margin-bottom: 0.3rem;
}
.margin-panel__value {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--colour-grey-900);
}
.margin-panel__value + .margin-panel__value { margin-top: 0.3rem; }
.margin-panel__value .quiet-link { font-size: var(--fs-small); }

/* ================= Home: hero / thesis ================= */
.hero { padding-block: var(--space-5) var(--space-6); }
@media (min-width: 768px) { .hero { padding-block: var(--space-6) var(--space-7); } }

.hero__brandline {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--colour-primary);
  margin-bottom: var(--space-3);
}

.hero__thesis {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-lead-mobile);
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--colour-grey-900);
  max-width: 44rem;
}
@media (min-width: 640px) {
  .hero__thesis { font-size: var(--fs-lead); }
}

/* ================= Home: product cards ================= */
.products__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 768px) {
  .products__grid { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
}

.product-card__num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--colour-primary);
  margin-bottom: var(--space-2);
}
.product-card h2 { margin-bottom: var(--space-2); }
.product-card p { margin-bottom: var(--space-3); color: var(--colour-text); }

/* ================= Home: founders teaser ================= */
.founders-teaser__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-block: var(--space-4);
}
@media (max-width: 560px) {
  .founders-teaser__grid { grid-template-columns: 1fr; max-width: 20rem; margin-inline: auto; }
}
.founder-mini { text-align: center; }
.founder-mini__photo {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  border: 1px solid var(--colour-border);
  margin: 0 auto var(--space-2);
}
.founder-mini__name {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--colour-grey-900);
}
.founder-mini__role {
  font-size: var(--fs-caption);
  /* sits on --colour-surface-alt: --colour-text-muted measures 4.05:1, fails AA. See Fix 4. */
  color: var(--colour-grey-600);
}

/* ================= CTA band ================= */
.cta { text-align: left; }
.cta h2 { margin-bottom: var(--space-3); }
.cta__lead { max-width: 34rem; margin-bottom: var(--space-4); color: var(--colour-text); }

/* ================= Inner-page page-heads ================= */
.page-head { padding-block: var(--space-5) var(--space-4); }
@media (min-width: 768px) { .page-head { padding-block: var(--space-6) var(--space-4); } }
.page-head .eyebrow { margin-bottom: var(--space-2); }
.page-head h1 { max-width: 36rem; }
.page-head__lead {
  margin-top: var(--space-3);
  font-size: var(--fs-body);
  max-width: 42rem;
  color: var(--colour-text);
}

/* ================= Shared: prose column (riverb-app.html / inkysites.html) =================
   Fix 1c, SUPERSEDED 2026-09-11 by the visual review of the deployed site. Centring these two
   pages' prose left their page-heads at the page margin while the section below started 187px
   further right, so the left margin visibly shifted inside one page - a misalignment, not a
   convention. Both pages now keep the page margin and carry the same editorial margin panel as
   Home and About, which makes the panel the site's system rather than a one-off and gives these
   pages the sourced facts a reader wants anyway. */
.prose {
  max-width: 48rem; /* matches p.measure-wide, the widest element in this column */
}

/* ================= riverb-app.html ================= */
.app-frame {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.app-frame img { height: 28px; width: auto; }

.not-therapy {
  background: var(--colour-surface);
  border-left: 2px solid var(--colour-primary);
  padding: var(--space-3) var(--space-4);
  margin-block: var(--space-4);
  max-width: 42rem;
}
.not-therapy p { font-size: var(--fs-body-sm); margin: 0; max-width: none; }

.app-screens {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  max-width: 40rem;
}
@media (min-width: 560px) {
  .app-screens { grid-template-columns: 1fr 1fr; }
}
.app-screen__figure { text-align: center; }
.app-screen__figure img {
  max-width: 220px;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--colour-border);
  border-radius: 12px;
}
.app-screen__figure figcaption { margin-top: var(--space-2); }

.store-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

/* ================= inkysites.html ================= */
.inky-mark {
  height: 48px; /* hard display cap per image ledger */
  width: 48px;
  object-fit: contain;
}
.inky-lockup {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.inky-lockup__name {
  font-family: var(--font-display);
  font-size: 1.375rem;
}

/* ================= about.html: history + founders ================= */
.history p { margin-bottom: var(--space-3); }

.founders-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-4);
}
@media (min-width: 700px) {
  .founders-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
}
.founder-card__photo {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  object-fit: cover;
  object-position: center 22%;
  border: 1px solid var(--colour-border);
  margin-bottom: var(--space-3);
}
.founder-card__name { margin-bottom: 0.25rem; }
.founder-card__role {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--colour-primary);
  margin-bottom: var(--space-2);
}
.founder-card__cred {
  font-size: var(--fs-small);
  color: var(--colour-text);
}
/* Visual review, 2026-09-11: the three LinkedIn links sat at different heights because the
   bios run one, two and three lines with nothing sharing a baseline. On the page an investor
   reads most closely, that raggedness is worth removing. The card becomes a flex column and
   the link is pushed to the bottom, so all three align however long a bio runs. */
.founder-card { display: flex; flex-direction: column; }
.founder-card__cred { flex: 1 1 auto; }
.founder-card__link { margin-top: var(--space-3); }

/* ================= about.html: echo/ripple schematic ================= */
/* Was max-width 34rem (544px) in a 1076px column - read as a small diagram floating in a
   mostly-empty band (~204px of dead space below the caption). Scaled to 48rem (768px), the
   same measure as the prose paragraph above it, so it reads as a deliberate editorial plate;
   vertical padding/margin tightened so the figure + caption sit as one composed unit. See
   Fix 3, 2026-09-11. */
.schematic {
  margin-block: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--colour-surface);
  border-radius: 4px;
}
.schematic__frame { width: 100%; height: auto; margin-inline: auto; }
.sch-wide { display: block; max-width: 48rem; }
.sch-tall { display: none; }
@media (max-width: 640px) {
  .sch-wide { display: none; }
  .sch-tall { display: block; max-width: 20rem; margin-inline: auto; }
}
.schematic__ring, .schematic__ring--faint { fill: none; stroke-width: 1.5; }
.schematic__ring { stroke: var(--colour-primary); }
.schematic__ring--faint { stroke: var(--colour-accent); }
.schematic__dot { fill: var(--colour-primary); }
.schematic figcaption {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  /* sits on this component's own --colour-surface background: --colour-text-muted
     measures 4.3:1, fails AA. See Fix 4. */
  color: var(--colour-grey-600);
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
}

/* ================= FAQ (accordion injected by build-found-ready.mjs) ================= */
/* The generator injects this section outside the site's .wrap container, so it ran full-bleed
   (left:0, width:1366 at 1366px) while every other section sits inset (left:113, width:1140).
   Matched here rather than in the markup (the block sits between the generator's own
   found-ready:faq markers, and build-found-ready.mjs must not be re-run for this page - see
   CLAUDE.md) - kept in sync with .wrap in base.css by hand. See Fix 2, 2026-09-11. */
.se-faq {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--colour-border);
}
@media (min-width: 640px) {
  .se-faq { --gutter: 2rem; }
}
.se-faq__title { margin-bottom: var(--space-3); }
.se-faq__item {
  border-bottom: 1px solid var(--colour-border);
  padding-block: var(--space-2);
}
.se-faq__q {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-body-sm);
  color: var(--colour-grey-900);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: var(--space-1);
  transition: color 0.15s ease;
}
.se-faq__q::-webkit-details-marker { display: none; }
/* Was un-stated on every axis (hover/focus-visible/active read identical to rest, and
   focus fell through to the browser's own untoned "auto" ring) - polish pass, 2026-09-11. */
.se-faq__q:hover { color: var(--colour-primary); }
.se-faq__q:hover::after { color: var(--colour-primary); }
.se-faq__q:active { color: var(--colour-primary-active); }
.se-faq__q:focus-visible {
  outline: 2px solid var(--colour-primary);
  outline-offset: 2px;
}
.se-faq__q::after {
  content: "+";
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--colour-primary);
  flex: 0 0 auto;
}
.se-faq__item[open] .se-faq__q::after { content: "\2212"; }
.se-faq__a { padding-block: 0 var(--space-2); color: var(--colour-text); max-width: 42rem; }
.se-faq__a p { margin: 0; }

/* ================= Contact form (injected by build-contact-form.mjs) ================= */
.contact-routes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-block: var(--space-4) var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--colour-surface);
  border-radius: 4px;
}
.contact-routes dt {
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  /* sits on this component's own --colour-surface background: --colour-text-muted
     measures 4.3:1, fails AA. See Fix 4. */
  color: var(--colour-grey-600);
  margin-bottom: 0.2rem;
}
.contact-routes dd {
  font-size: var(--fs-small);
  color: var(--colour-primary);
}
.contact-routes dd a { text-decoration: underline; text-underline-offset: 0.15em; }

.cf-form { max-width: 34rem; margin-top: var(--space-4); }
.cf-field { margin-bottom: var(--space-3); }
.cf-label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--colour-grey-900);
  margin-bottom: 0.4rem;
}
.cf-input, .cf-textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  background: var(--colour-white);
  border: 1px solid var(--colour-border);
  border-radius: 4px;
  font-size: var(--fs-body-sm);
  color: var(--colour-grey-900);
  transition: border-color 0.15s ease;
}
/* Was static until focus (no hover cue at all) - polish pass, 2026-09-11. */
.cf-input:hover, .cf-textarea:hover { border-color: var(--colour-grey-400); }
.cf-input:focus, .cf-textarea:focus {
  border-color: var(--colour-primary);
}
/* Conformance guard, 2026-09-11: the border-colour swap alone was a visible but
   materially quieter affordance than the 2px ring every other control on the site
   shows. The form is the one place a visitor types, so it gets the same ring. */
.cf-input:focus-visible, .cf-textarea:focus-visible {
  outline: 2px solid var(--colour-primary);
  outline-offset: 2px;
}
.cf-input:active, .cf-textarea:active { border-color: var(--colour-primary-active); }
.cf-textarea { min-height: 8rem; resize: vertical; }
.cf-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
  font-size: var(--fs-small);
  white-space: nowrap;
  color: var(--colour-grey-900);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--colour-grey-900);
  border-radius: 0;
  padding: 0 0 0.25em;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.cf-submit:hover { color: var(--colour-primary); border-bottom-color: var(--colour-primary); }
.cf-submit:active { color: var(--colour-primary-active); border-bottom-color: var(--colour-primary-active); }
.cf-submit:focus-visible { outline: 2px solid var(--colour-primary); outline-offset: 4px; }
.cf-status { margin-top: var(--space-3); font-size: var(--fs-small); }