/*
 * Cinematic marketing pages — the only stylesheet these pages load beyond the
 * design's own inline blocks (which the build step carries over verbatim from
 * design/cinematic/).
 *
 * Everything here is either (a) required for correctness given how the design
 * styles elements, or (b) an accessibility affordance the canvas source lacks.
 * Presentation belongs in the design source, not in this file.
 */

/*
 * REQUIRED. The runtime shows and hides elements with the `hidden` attribute,
 * but nearly every element in the design carries an inline `display` value —
 * and an inline style beats the user-agent's `[hidden]{display:none}` rule.
 * Without `!important` here, hiding silently does nothing: the blog's grid and
 * list views would both render, and the live demo would show its whole
 * transcript at once instead of streaming it.
 */
[hidden] { display: none !important; }

/* Visually hidden but announced — used for the cohort form's fieldset legend. */
.cb-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/*
 * Cohort capture status line. /js/cohort-capture.js sets the text and a
 * `data-state` of "ok" or "err"; with no state the line is empty and takes up
 * no room, so the form does not jump when a message appears.
 */
.cb-cohort-status {
  margin: 0;
  min-height: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(236, 232, 225, .7);
}
.cb-cohort-status:empty { display: none; }
.cb-cohort-status[data-state="ok"] {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(201, 165, 90, .5);
  background: rgba(201, 165, 90, .1);
  color: #ECE8E1;
}
.cb-cohort-status[data-state="err"] {
  color: rgba(236, 200, 180, .95);
}

/*
 * Keyboard focus. The design draws its own hover states but defines no focus
 * ring at all, which leaves keyboard users with no visible position on a page
 * that is almost entirely links and buttons.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #C9A55A;
  outline-offset: 3px;
  border-radius: 4px;
}

/* The skip link parks itself off-screen until focused. */
a[href="#main"]:focus { top: 16px !important; }

/* Expandable rows and FAQ triggers are interactive; say so on hover. */
[data-cb-faq-btn],
[data-cb-card-toggle] { cursor: pointer; }