/* ==========================================================================
   Scryglass site — components shared by every page: header, footer, buttons,
   chips, the consent banner and the beta dialog.
   Depends on tokens.css and site.css, in that order.
   ========================================================================== */

/* --- Buttons ---------------------------------------------------------------
   One base plus three fills and two outlines. Square by design: no radius,
   no shadow. `.btn` is used on both <button> and <a>, so it normalises the
   two rather than assuming either.                                          */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  /* No border on the base: the filled variants have none in the design, and
     a transparent one would make them 2px taller and wider than the outlined
     ones they sit beside. */
  border: 0;
  border-radius: var(--radius-none);
  background: none;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: normal;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.btn--lg {
  padding: 15px 26px;
  font-size: 14px;
}

.btn--pink {
  background: var(--accent-pink);
  color: var(--bg-page);
  font-weight: 500;
}

.btn--cyan {
  background: var(--accent-cyan);
  color: var(--bg-page);
  font-weight: 500;
}

.btn--outline {
  border: 1px solid var(--border-raised);
  color: var(--text-primary);
}

.btn--outline-pink {
  border: 1px solid var(--accent-pink);
  color: var(--accent-pink);
}

.btn:hover {
  text-decoration: underline;
}

.btn:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 2px;
}

/* --- Mono eyebrows, arrow links and the live status dot ---------------------
   Used on the home page now and by every marketing page later.              */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
}

.eyebrow--cyan { color: var(--accent-cyan); }
.eyebrow--pink { color: var(--accent-pink); }

.arrow-link {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent-cyan);
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-dot);
  background: var(--accent-cyan);
  animation: psPulse 2.4s ease-in-out infinite;
}

/* --- Header ---------------------------------------------------------------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  padding: 0 var(--page-gutter);
  border-bottom: 1px solid var(--hairline);
}

.lockup {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lockup:hover {
  text-decoration: none;
}

.lockup__mark {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-chip);
}

.lockup__words {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.lockup__name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--text-primary);
}

.lockup__by {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--text-dim);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

.site-nav__link {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--nav-link);
}

.site-nav__link.is-current {
  color: var(--accent-pink);
}

/* --- Footer ---------------------------------------------------------------- */

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 24px var(--page-gutter);
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-ghost);
}

.site-footer__right {
  display: flex;
  gap: 24px;
  align-items: baseline;
}

.site-footer__note {
  color: var(--text-ghost-2);
}

/* --- Consent banner --------------------------------------------------------
   Sits on the bottom edge of the page card, spanning its full width. Hidden
   until WP8 decides the visitor is in a region that must be asked.          */

.consent-banner {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  width: var(--page-width);
  max-width: 100%;
  padding: 20px var(--page-gutter);
  background: var(--bg-consent);
  border-top: 1px solid var(--border-raised);
}

.consent-banner__copy {
  max-width: 720px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.consent-banner__actions {
  display: flex;
  gap: 10px;
  white-space: nowrap;
}

.consent-banner__actions .btn {
  padding: 11px 18px;
}

.consent-banner__actions .btn--outline {
  color: var(--text-body);
}

/* --- Beta dialog -----------------------------------------------------------
   A native <dialog>: closed until showModal(), and the top layer keeps it
   clear of .page-card's overflow clipping. The scrim is ::backdrop rather
   than a wrapper div.                                                       */

.beta-dialog {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  padding: 80px 40px;
  border: 0;
  background: none;
  color: var(--text-primary);
  overflow: auto;
}

.beta-dialog[open] {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.beta-dialog::backdrop {
  background: var(--scrim);
}

.beta-panel {
  display: flex;
  flex-direction: column;
  /* 620px of content inside a 1px outline, as on .page-card — so the fields
     and chip rows below measure against the width the design specifies. */
  box-sizing: content-box;
  width: 620px;
  max-width: 100%;
  background: var(--bg-panel);
  border: 1px solid var(--border-raised);
}

.beta-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 32px;
  border-bottom: 1px solid var(--hairline);
}

.beta-panel__intro {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.beta-panel__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--accent-cyan);
}

.beta-panel__title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.beta-panel__standfirst {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

.beta-panel__close {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--text-dim);
  cursor: pointer;
}

.beta-form__body {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 28px 32px;
}

.beta-field {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

/* Honeypot. Taken out of view and out of layout without display:none or
   visibility:hidden, both of which the scripts worth catching know to skip. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.beta-field__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--text-muted);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  padding: 9px 15px;
  border: 1px solid var(--border-raised);
  border-radius: var(--radius-none);
  background: none;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: normal;
  color: var(--text-body);
  cursor: pointer;
}

.chip[aria-pressed="true"],
.chip.is-selected {
  border-color: var(--accent-pink);
  background: var(--accent-pink);
  color: var(--bg-page);
}

.beta-textarea,
.beta-input {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--border-raised);
  border-radius: var(--radius-none);
  background: var(--bg-well);
  color: var(--text-primary);
}

.beta-textarea {
  height: 74px;
  resize: none;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
}

.beta-input {
  padding: 14px 15px;
  font-family: var(--font-mono);
  font-size: 14px;
}

.beta-textarea::placeholder,
.beta-input::placeholder {
  color: var(--text-faint);
}

.beta-form__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 32px;
  border-top: 1px solid var(--hairline);
}

.beta-form__note {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--text-faint);
}

.beta-form__send {
  padding: 14px 24px;
}

.beta-sent {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 34px 32px;
}

.beta-sent__title {
  font-size: 22px;
  font-weight: 700;
}

.beta-sent__body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
}

.beta-sent__close {
  align-self: flex-start;
  margin-top: 6px;
  padding: 12px 20px;
}

/* ==========================================================================
   Docs search
   The `/ search the docs` field and the Pagefind results panel search.js hangs
   off it. Two pages carry one and no page carries both: the article sidebar's
   compact field, in a 270px rail, and the support index's hero field, one step
   larger under `--lg`. Both page stylesheets needed the component and neither
   could own it, so it lives here; article.css and support.css keep only the
   page layout around it.
   ========================================================================== */

/* The border is on the wrapper so the cyan slash sits inside it, and the
   wrapper is the positioning context search.js appends the panel to.        */

.doc-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--border-raised);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-faint);
}

.doc-search:focus-within {
  border-color: var(--accent-cyan);
}

.doc-search__slash {
  color: var(--accent-cyan);
}

.doc-search__input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-primary);
}

.doc-search__input:focus {
  outline: none; /* the wrapper takes the focus ring, above */
}

.doc-search__input::placeholder {
  color: var(--text-faint);
  opacity: 1;
}

.doc-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.doc-search--lg {
  max-width: 620px;
  gap: 14px;
  padding: 16px 18px;
  font-size: 14px;
}

.doc-search--lg .doc-search__input {
  font-size: 14px;
}

/* --- Results panel ---------------------------------------------------------
   Built by search.js, never present in the markup. A panel, not a card: one
   step up from the ground it sits on, square and unshadowed like everything
   else, with rows separated by hairlines rather than gaps.

   The base is the sidebar's. That rail is 270px and this panel is 340px:
   results are given the width a title and an excerpt need, and overhang the
   article column to get it. The z-index only has to beat the body content it
   covers. Under `--lg` the field is already wide enough to carry its own
   results, so the panel takes the field's width and a little more height,
   and every row is set one step larger to match the field.                  */

.doc-results {
  position: absolute;
  top: calc(100% + 6px);
  left: -1px;
  z-index: 20;
  width: 340px;
  max-height: 340px;
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  font-family: var(--font-ui);
}

.doc-search--lg .doc-results {
  right: -1px;
  width: auto;
  max-height: 400px;
}

.doc-results__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
}

.doc-search--lg .doc-results__row {
  padding: 13px 18px;
}

.doc-results__row:last-child {
  border-bottom: 0;
}

/* Hover and keyboard selection are deliberately the same state: the highlight
   should not be able to appear in two places at once. */
.doc-results__row:hover,
.doc-results__row.is-active {
  background: var(--bg-recessed);
}

.doc-results__title {
  font-size: 14px;
  color: var(--text-primary);
}

.doc-search--lg .doc-results__title {
  font-size: 15px;
}

.doc-results__excerpt {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
}

.doc-search--lg .doc-results__excerpt {
  font-size: 13px;
}

/* Cyan is the informational accent; the matched terms are information, not an
   action, and take no ground of their own. */
.doc-results__excerpt mark {
  background: none;
  color: var(--accent-cyan);
}

.doc-results__empty {
  padding: 12px 13px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-faint);
}

.doc-search--lg .doc-results__empty {
  padding: 14px 18px;
  font-size: 13px;
}

/* ==========================================================================
   WP9 — responsive
   Header, footer, consent banner and beta dialog below 1240px. See the
   breakpoint table at the foot of site.css. Nothing here matches at 1240.
   ========================================================================== */

/* --- Header ----------------------------------------------------------------
   No hamburger and no script: the nav is five mono links and a button, which
   is little enough to wrap honestly. The 82px row is the first thing to go —
   it can only hold one line — so the header becomes auto-height and lets its
   own children wrap. The nav keeps the default `flex:0 1 auto` on purpose:
   it shrinks and wraps inside its box before the header wraps it away, which
   is the gentler of the two transitions.                                   */

@media (max-width: 1000px) {
  .site-nav { gap: 22px; }
}

@media (max-width: 860px) {
  .site-header {
    flex-wrap: wrap;
    height: auto;
    gap: 14px 20px;
    padding: 17px var(--page-gutter);
  }

  .site-nav {
    flex-wrap: wrap;
    gap: 12px 18px;
  }
}

/* Below this the lockup and the nav stop competing for one line: the nav
   claims the full width and drops beneath it. */
@media (max-width: 700px) {
  .site-nav { width: 100%; }
}

/* --- Footer ----------------------------------------------------------------
   One mono row becomes two blocks, and the link list wraps rather than
   compressing the analytics note to a column of single words.             */

@media (max-width: 900px) {
  .site-footer {
    flex-direction: column;
    gap: 14px;
  }

  .site-footer__right {
    flex-wrap: wrap;
    gap: 8px 20px;
  }
}

/* --- Consent banner --------------------------------------------------------
   Stacks, and caps its own height so it can never bury a short page on a
   phone. `white-space` goes back to normal because the two buttons no longer
   have to share a line.                                                    */

@media (max-width: 760px) {
  .consent-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    max-height: 62vh;
    padding: 18px var(--page-gutter);
    overflow-y: auto;
  }

  .consent-banner__copy {
    max-width: none;
    font-size: 13px;
  }

  .consent-banner__actions {
    flex-wrap: wrap;
    white-space: normal;
  }
}

/* --- Beta dialog -----------------------------------------------------------
   The panel is content-box 620px, so `max-width:100%` leaves its 1px outline
   outside the dialog's content box and the dialog scrolls sideways by two
   pixels. Taking those two pixels back is the whole of the fix; the rest is
   padding, which is all that stands between the form and the screen edge at
   375px. The dialog itself already scrolls vertically.                     */

@media (max-width: 760px) {
  .beta-dialog { padding: 40px 20px; }

  .beta-panel { max-width: calc(100% - 2px); }
}

/* --- Docs search -----------------------------------------------------------
   The results panel carries the sidebar rail's only fixed width — 340px, sized
   to overhang a 270px rail. Below 900 the article grid folds to one column and
   the field runs the full width of the page, so the panel should simply match
   the field. That is already what `--lg` does on the support index, where this
   changes nothing.                                                          */

@media (max-width: 900px) {
  .doc-results {
    right: -1px;
    width: auto;
  }
}

@media (max-width: 560px) {
  .beta-dialog { padding: 16px; }

  .beta-panel__head {
    gap: 14px;
    padding: 22px 20px;
  }

  .beta-panel__title { font-size: 21px; }

  .beta-form__body {
    gap: 22px;
    padding: 22px 20px;
  }

  .beta-form__foot {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 20px;
  }

  .beta-form__send { width: 100%; }

  .beta-sent { padding: 26px 20px; }
}