/*
 * Site-wide policy gate.
 *
 * This is a CONSENT RECORD, not access control: the page HTML is already in
 * the response by the time this paints, so view-source, curl and crawlers all
 * still read it. Treat it as "the visitor was shown the terms and clicked
 * agree", never as "the content is protected".
 *
 * It is painted by consent-gate.js only when consent is missing, so a
 * returning visitor never sees a flash of it.
 *
 * Colours come from design.css. This file used the pre-82a10f6 token names
 * (--bg / --fg / --amber / --rule), none of which exist any more, so every
 * declaration was falling through to its dark literal -- the first thing a
 * visitor saw was a black overlay in front of a pale site. The fallbacks are
 * kept but are now the light values, so a page that somehow loads this
 * without design.css still looks like the site rather than the opposite of it.
 */

.cgate-lock { overflow: hidden !important; }

.cgate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* Opaque, not translucent: a blurred peek at the content invites the reader
     to try to read around the dialog instead of answering it. */
  background: var(--st-0, #EEF1F0);
}

.cgate-panel {
  width: min(560px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 38px 34px 30px;
  border: 1px solid var(--rule-2, #B0BDBB);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(16, 26, 28, .10);
}

.cgate-mark {
  width: 30px; height: 30px;
  margin-bottom: 22px;
  background: url('/logo.svg') center/contain no-repeat;
}
/* logo.svg is stroked #ffffff, which is invisible on this ground. Invert it
   rather than shipping a second asset. */
.cgate-mark { filter: invert(1); }


.cgate-kicker {
  margin: 0 0 10px;
  color: var(--flux, #14606C);
  font-family: var(--code, monospace);
  font-size: .58rem; font-weight: 800; letter-spacing: .16em;
}
.cgate h2 {
  margin: 0 0 16px;
  font-size: 1.35rem; line-height: 1.35;
  color: var(--bone, #101A1C);
}
.cgate p {
  margin: 0 0 14px;
  color: var(--bone-2, #3D4A49);
  font-size: .85rem; line-height: 1.85;
}
.cgate a { color: var(--flux, #14606C); text-underline-offset: 3px; }

/* The status note carries the same wording as the rest of the site: say what
   is provisional rather than implying the documents are settled. */
.cgate-note {
  margin: 18px 0 22px;
  padding: 13px 15px;
  border: 1px solid var(--rule, #C7D1CF);
  border-radius: 9px;
  color: var(--bone-3, #54605F);
  font-size: .74rem; line-height: 1.75;
}

.cgate-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cgate-btn {
  min-height: 42px;
  padding: 0 20px;
  border: 1px solid var(--rule-2, #B0BDBB);
  border-radius: 999px;
  background: transparent;
  color: var(--bone, #101A1C);
  font: inherit; font-size: .82rem;
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease, color 200ms ease;
}
.cgate-btn:hover { border-color: var(--flux, #14606C); }
.cgate-btn:focus-visible { outline: 2px solid var(--flux, #14606C); outline-offset: 3px; }
.cgate-btn.primary {
  border-color: var(--flux, #14606C);
  background: var(--flux, #14606C);
  color: #fff;
  font-weight: 700;
}
.cgate-btn.primary:hover { filter: brightness(1.08); }

.cgate-decline-msg {
  margin: 16px 0 0;
  color: var(--bone-3, #54605F);
  font-size: .76rem; line-height: 1.8;
}
.cgate-decline-msg[hidden] { display: none; }

@media (max-width: 520px) {
  .cgate-panel { padding: 28px 22px 24px; }
  .cgate-actions .cgate-btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cgate-btn { transition: none; }
}