/* The SITE's stylesheet: the treatment this product gives to shared design system components.
   It is neither the design system (which is overwritten on every refresh) nor a page's CSS. */

/* ---------- Site chrome ---------- */
/* The chrome shares the canvas in both themes. The nav gets that from qf-nav--transparent and here
   only what that modifier does not bring is added; the footer has no equivalent. */
.qf-nav--transparent {
  border-radius: 0;
  border-bottom: 1px solid var(--border-hairline);
}

.qf-footer {
  background: var(--surface-page);
}

/* ---------- Brand lockup ---------- */
/* qf-logo centres BOXES, and the wordmark's box is its line box: half-leading centres the font's
   em box, leaving the glyphs 0.078em below the mark's centre. This nudges the ink, not the layout. */
.qf-logo .qf-wordmark {
  top: -0.078em;
}

/* ---------- Code blocks ---------- */
/* .qf-codeblock__line provides the horizontal padding; when the content is a bare
   <pre class="qf-code"> there is no line to provide it, and without pre-wrap a long URL escapes the box with no scroll. */
.qf-codeblock__scroll > .qf-code {
  padding-inline: var(--space-lg);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---------- Account area ---------- */
/* .qf-shell__side is sized by its content, so the sidebar's background used to cut off at the last
   link. Same convention as .documentation-sidebar. */
.account-sidebar {
  min-height: 100vh;
}

/* ---------- Confirmation dialogs ---------- */
/* The native <dialog> carries UA border, padding and margins: they are stripped so what is left is
   the design system's card, at elevation 2 because it is a floating panel. */
.site-modal {
  display: none;
  border: 0;
  max-width: 420px;
  width: 100%;
  margin: auto;
  box-shadow: var(--shadow-panel);
}

.site-modal[open] {
  display: grid;
  gap: var(--space-lg);
}

.site-modal::backdrop {
  background: rgba(13, 53, 61, 0.45);
}

/* "Go back" on the left, confirmation on the right: the <form method="dialog"> of the button that
   only closes is just another item in the row, so space-between provides the separation. */
.site-modal__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
}

/* ---------- Requests widget ---------- */
/* Floating over any page, hence elevation 2 like every panel that does not rest on the canvas. It
   carries the primary fill without breaking the one-per-band rule: it is site chrome and competes
   inside none of them. */
.site-feedback-fab {
  --fab-size: 52px;
  position: fixed;
  right: var(--space-xl);
  bottom: var(--space-xl);
  z-index: 10;
  width: var(--fab-size);
  height: var(--fab-size);
  /* qf-btn carries min-height and the padding of a labelled pill: both deform a circular button. */
  min-height: 0;
  padding: 0;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-panel);
}

.site-feedback-fab svg {
  width: 22px;
  height: 22px;
}

/* .site-modal[open]'s gap separates the <dialog>'s direct children; here the only child is the form,
   so the internal rhythm is defined again on the form and on its body. */
.site-feedback-form,
.site-feedback-form__body {
  display: grid;
  gap: var(--space-lg);
}

.site-modal--feedback {
  max-width: 480px;
}

/* The design system has no textarea: .qf-input gives it the chrome and here only the height and the
   resize go, which do not exist on an <input>. */
.site-feedback-form__message {
  min-height: 120px;
  resize: vertical;
}

/* Honeypot: out of sight and out of flow, but not display:none — a bot that fills fields in tends to
   skip the ones hidden that way. */
.site-feedback-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* qf-link assumes an <a>: on the footer's <button> that opens the modal, the background, the border
   and the typography the user agent puts on it have to be stripped. */
button.qf-link {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}