/* ══════════════════════════════════════════════════════════════════════
   CONSENT — the cookie banner (.nt-cookie-*)
   ══════════════════════════════════════════════════════════════════════

   Small, ink, bottom-left on desktop; full width above the home indicator on
   a phone. Ported from Testarium's public_pages.css, retokenised onto
   notarium.css (--nt-surface-inverse / --nt-text-inverse rather than
   Testarium's --nt-on-ink pair).

   It is deliberately NOT a full-width bar across the bottom of every page.
   That is the shape a consent banner takes when nobody designed it: it eats
   the bottom of the viewport, covers the footer, and makes "answer me" the
   loudest thing on a page about administering a selskab.

   Picked up automatically by `stylesheet_link_tag :app` (Propshaft bulk
   inclusion in shared/_head) — there is no list to add it to.

   ONE GRID, TWO EQUAL COLUMNS, ONE CLASS STRING for the two buttons. They
   cannot drift into a bright yes and a grey no, because there is no second
   class string to drift into. A refuse option that is harder to press than
   accept is not freely given consent. */

.nt-cookie {
  position: fixed;
  z-index: var(--nt-z-toast);
  /* Phone: full width, and ABOVE the home indicator. At `bottom: 0` the sheet
     sits over the gesture bar and takes navigation hostage until the question
     is answered. */
  inset: auto 0 0 0;
  padding: 0 0.75rem calc(env(safe-area-inset-bottom, 0px) + 0.75rem);
}

.nt-cookie[hidden] { display: none; }

@media (min-width: 52rem) {
  .nt-cookie {
    inset: auto auto 2rem 2rem;
    width: 420px;
    padding: 0;
  }
}

.nt-cookie-panel {
  background: var(--nt-surface-inverse);
  color: var(--nt-text-inverse);
  border-radius: var(--nt-radius-lg);
  padding: 1.15rem 1.25rem 1.25rem;
  box-shadow: var(--nt-shadow-3);

  /* The resting state is CLOSED — translated down and transparent — and the
     controller flips data-state to "open" two frames after it unhides the
     banner. That is what the entrance transitions from; flipping in the same
     tick as `hidden = false` produces no transition at all in Safari. */
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition:
    opacity var(--nt-duration-slow) var(--nt-ease-seal),
    transform var(--nt-duration-slow) var(--nt-ease-seal);
}

.nt-cookie-panel[data-state="open"] {
  opacity: 1;
  transform: none;
}

.nt-cookie-eyebrow {
  margin: 0;
  font-family: var(--nt-font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nt-seal-tint);
}

.nt-cookie-title {
  margin: 0.5rem 0 0;
  font-family: var(--nt-font-display);
  font-weight: 500;
  font-size: 1.18rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--nt-text-inverse);
}

.nt-cookie-body {
  margin: 0.5rem 0 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: color-mix(in oklab, var(--nt-text-inverse) 78%, transparent);
}

.nt-cookie-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 1rem;
}

.nt-cookie-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px is the touch target the rest of the product holds to; a consent
     button below it is a refuse button people mis-tap. */
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: 10px;
  /* The two tokens swapped: the button's ground is the panel's TEXT colour and
     its label is the panel's ground. Both flip together with the theme, so the
     ink panel gets a paper button in light and the bone panel gets a night
     button in dark — never dark-on-dark, which is what a literal #101215 here
     produced the moment the page was viewed in dark mode. */
  background: var(--nt-text-inverse);
  color: var(--nt-surface-inverse);
  font-family: var(--nt-font-body);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition:
    background-color var(--nt-duration-fast) var(--nt-ease),
    transform var(--nt-duration-fast) var(--nt-ease);
}

.nt-cookie-btn:hover { background: color-mix(in oklab, var(--nt-text-inverse) 92%, var(--nt-surface-inverse)); }
.nt-cookie-btn:active { transform: scale(0.985); }

.nt-cookie-btn:focus-visible {
  outline: 2px solid var(--nt-seal-tint);
  outline-offset: 2px;
}

.nt-cookie-choices {
  margin: 0.85rem 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
}

.nt-cookie-choices a {
  color: var(--nt-seal-tint);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nt-cookie-choices a:hover { text-decoration: none; }

/* "Vælg selv" is a button that looks like the link it replaced: it expands the
   panel in place instead of leaving the page. */
.nt-cookie-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--nt-seal-tint);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.nt-cookie-link:hover { text-decoration: none; }

.nt-cookie-link:focus-visible {
  outline: 2px solid var(--nt-seal-tint);
  outline-offset: 2px;
  border-radius: 4px;
}

/* In "choices" mode the two quick buttons step aside; the answer is then the
   checkboxes plus one wide save button. */
.nt-cookie-panel[data-mode="choices"] .nt-cookie-actions { display: none; }

.nt-cookie-form[hidden] { display: none; }

.nt-cookie-fieldset {
  margin: 0.85rem 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.nt-cookie-legend {
  padding: 0;
  margin-bottom: 0.35rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--nt-text-inverse);
}

.nt-cookie-choice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
  padding: 0.45rem 0;
  min-height: 44px;
  cursor: pointer;
  border-top: 1px solid color-mix(in oklab, var(--nt-text-inverse) 12%, transparent);
}

.nt-cookie-choice:first-of-type { border-top: 0; }

.nt-cookie-choice input {
  margin: 0.15rem 0 0;
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--nt-seal);
}

/* The necessary category is shown checked and disabled rather than hidden: a
   consent form that conceals what cannot be refused is the pattern the
   regulators keep fining. */
.nt-cookie-choice input:disabled { opacity: 0.6; cursor: not-allowed; }

.nt-cookie-choice-text {
  display: grid;
  gap: 0.1rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: color-mix(in oklab, var(--nt-text-inverse) 78%, transparent);
}

.nt-cookie-choice-text strong {
  font-weight: 600;
  color: var(--nt-text-inverse);
}

.nt-cookie-btn-wide {
  width: 100%;
  margin-top: 0.85rem;
}

@media (prefers-reduced-motion: reduce) {
  .nt-cookie-panel {
    transform: none;
    transition: opacity var(--nt-duration-fast) linear;
  }

  .nt-cookie-btn { transition: none; }
  .nt-cookie-btn:active { transform: none; }
}