/* ====================================================== PSYCHE FACTS CONSENT
   The banner, the manage panel, and the footer link back to them.

   SEPARATE FROM site.css ON PURPOSE. site.css was cut out of the spike
   mechanically and is kept in parity with it by a byte comparison, so anything
   that did not come from the spike goes here instead. It borrows the same
   tokens, which is what keeps it looking like the site rather than a plugin.

   The panel is the label's own form: paper, a hairline rule, a hard rule under
   the head, and the mono face the label body uses. A consent notice on this
   site should read like the small print on the back of the panel, because that
   is exactly what it is.
   ========================================================================= */

.pf-consent {
  position: fixed;
  z-index: 60; /* over the theme toggle at 40, under nothing */
  left: 50%;
  bottom: 22px;
  width: min(560px, calc(100vw - 36px));
  transform: translate(-50%, 14px);
  opacity: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: 0 18px 46px rgb(0 0 0 / 0.16);
  transition:
    opacity var(--t-ui) ease,
    transform var(--t-ui) ease;
}

.pf-consent.is-open {
  opacity: 1;
  transform: translate(-50%, 0);
}

.pf-consent.is-closing {
  opacity: 0;
  transform: translate(-50%, 14px);
}

.pf-consent-body {
  padding: 20px 22px 18px;
}

.pf-consent-head {
  margin: 0 0 10px;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--ink);
  font-family: var(--f);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-bright);
}

.pf-consent-copy {
  margin: 0 0 15px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  line-height: 1.62;
  color: var(--ink);
}

/* ------------------------------------------------------------- the actions

   Accept and Decline share .pf-btn with NOTHING added to either. That is the
   whole mechanism for equal prominence the standard asks for: there is no
   primary variant to reach for, so the two cannot drift apart later. Manage is
   quieter because it opens a panel rather than making a choice. */
.pf-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.pf-btn {
  flex: 0 0 auto;
  padding: 8px 18px;
  border: 1px solid var(--ink);
  background: transparent;
  color: inherit;
  font-family: var(--f);
  font-size: 13.5px;
  line-height: 1.2;
  cursor: pointer;
  transition:
    background var(--t-ui) ease,
    color var(--t-ui) ease,
    border-color var(--t-ui) ease;
}

.pf-btn:hover {
  background: var(--ink);
  color: var(--paper);
}

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

.pf-btn--quiet {
  margin-left: auto;
  border-color: var(--rule);
  color: var(--ink-dim);
}

.pf-btn--quiet:hover {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

.pf-btn--save {
  margin-top: 13px;
}

/* -------------------------------------------------------- the manage panel */

.pf-consent-manage {
  margin: 0 0 15px;
  padding: 14px 0 2px;
  border-top: 1px solid var(--rule-soft);
}

.pf-consent-manage[hidden] {
  display: none;
}

.pf-consent-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  align-items: start;
  margin-bottom: 13px;
  cursor: pointer;
}

.pf-consent-row input {
  margin: 2px 0 0;
  accent-color: var(--ink);
}

.pf-consent-row input:disabled {
  cursor: not-allowed;
}

.pf-consent-row strong {
  display: block;
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-bright);
}

.pf-row-note {
  display: block;
  margin-top: 3px;
  font-family: var(--f-mono);
  font-size: 11px;
  line-height: 1.55;
  color: var(--ink-dim);
}

/* ------------------------------------------------------------- the foot link */

.pf-consent-foot {
  margin: 13px 0 0;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
}

.pf-consent-foot a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--rule);
  transition: color var(--t-ui) ease, text-decoration-color var(--t-ui) ease;
}

.pf-consent-foot a:hover {
  color: var(--ink);
  text-decoration-color: var(--ink);
}

/* --------------------------------------- the persistent way back, in the footer

   Styled to disappear into the footer's existing row rather than announce
   itself. It is a button because it opens a dialog, and it should not look
   like one. */
.pf-prefs {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--rule);
  transition: color var(--t-ui) ease, text-decoration-color var(--t-ui) ease;
}

.pf-prefs:hover {
  color: var(--ink);
  text-decoration-color: var(--ink);
}

.pf-prefs:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------ motion */

@media (prefers-reduced-motion: reduce) {
  .pf-consent {
    transition: opacity var(--t-ui) ease;
    transform: translate(-50%, 0);
  }
  .pf-consent.is-open,
  .pf-consent.is-closing {
    transform: translate(-50%, 0);
  }
}

/* ------------------------------------------------------------------ narrow */

@media (max-width: 620px) {
  .pf-consent {
    bottom: 12px;
    width: calc(100vw - 24px);
  }
  .pf-consent-body {
    padding: 17px 17px 15px;
  }
  .pf-btn--quiet {
    margin-left: 0;
  }
}