/*
 * Cookie notice.
 *
 * Its own file because index.html loads styles.css while the other pages load
 * support.css, and the notice appears on all of them.
 *
 * Those two do NOT share a vocabulary, which this file used to assume they
 * did: styles.css names its ink --text-color, --text-secondary and
 * --accent-color, while support.css names the same three --ink, --ink-soft
 * and --accent. Only --surface, --hairline and --lift-high are common. The
 * result was a notice that rendered correctly on the homepage and lost its
 * title, body and link colours on all six other pages — an undefined var()
 * makes the property inherit rather than fail loudly.
 *
 * Every colour below therefore reads both names before falling back to a
 * literal. The literals are a backstop for a stylesheet that defines neither,
 * not a theme: whichever token exists wins, so light and dark still come from
 * the host page.
 */

.consent-notice {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  justify-content: flex-start;
  padding: 1rem;
  /* The bar spans the viewport so the card can sit in the corner, but only the
     card should take clicks. */
  pointer-events: none;
}

.consent-card {
  pointer-events: auto;
  /* Neither stylesheet sets a global border-box — both apply it per element —
     so without this the padding and border are added to max-width and the card
     renders 422px rather than the 380 it asks for. */
  box-sizing: border-box;
  width: 100%;
  max-width: 380px;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: var(--lift-high);
}

.consent-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-color, var(--ink, #14161a));
}

.consent-body {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-secondary, var(--ink-soft, #5a616b));
}

.consent-body a {
  color: var(--accent-color, var(--accent, #5b63d3));
  text-underline-offset: 3px;
}

.consent-actions {
  display: flex;
  gap: 0.625rem;
  margin-top: 1.125rem;
}

.consent-actions button {
  flex: 1;
  /* 44px is the minimum comfortable touch target, and this is a PWA people
     install on phones. */
  min-height: 44px;
  padding: 0 1rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition:
    opacity 0.15s ease,
    border-color 0.15s ease;
}

.consent-actions button:disabled {
  opacity: 0.5;
  cursor: default;
}

.consent-accept {
  background: var(--accent-color, var(--accent, #5b63d3));
  color: #fff;
  border: 1px solid var(--accent-color, var(--accent, #5b63d3));
}

.consent-accept:hover:not(:disabled) {
  opacity: 0.9;
}

.consent-decline {
  background: transparent;
  color: var(--text-color, var(--ink, #14161a));
  border: 1px solid var(--hairline);
}

.consent-decline:hover:not(:disabled) {
  border-color: var(--text-secondary, var(--ink-soft, #5a616b));
}

@media (min-width: 640px) {
  .consent-notice {
    padding: 1.5rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .consent-card {
    animation: consent-rise 0.32s ease-out;
  }
}

@keyframes consent-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/*
 * The control that reopens the notice. It sits among links — in the site
 * footer on most pages, and inside the settings dialog on index.html, which is
 * where that page keeps its nav — so it has to read as one rather than as a
 * button that wandered in. Colour and size are inherited from whichever
 * container it lands in.
 */
.consent-settings-link {
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
}

.consent-settings-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}