/* VANTREL legal pages — components layered on the core theme.
   Loaded after assets/css/style.css. Same design system: CRT cyan/magenta, mono, clip-path panels. */

.doc-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
}
.doc-badges .tag { font-size: .72rem; }
.doc-badge-version { color: var(--cyan); border-color: rgba(0,234,255,.55); }
.doc-badge-status { color: var(--green); border-color: rgba(76,255,154,.55); }

.doc-fingerprint {
  margin: 18px 0 0;
  border: 1px solid rgba(0,234,255,.38);
  background: #00040a;
  border-left: 3px solid var(--cyan);
  padding: 14px 16px;
  color: #d6f9ff;
  overflow-wrap: anywhere;
  font-size: .84rem;
}
.doc-fingerprint .prompt { color: var(--magenta); }
.doc-fingerprint strong { color: var(--cyan-2); }

/* --- Acceptance checkbox (must be unchecked by default; never pre-checked) --- */
.license-check {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  border: 1px solid var(--cyan);
  background: rgba(0,234,255,.045);
  box-shadow: inset 0 0 30px rgba(0,234,255,.03);
  padding: 20px;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.license-check input[type="checkbox"] {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.license-check .box {
  width: 28px; height: 28px;
  margin-top: 2px;
  display: grid;
  place-items: center;
  border: 2px solid var(--cyan);
  background: #030811;
  box-shadow: inset 0 0 12px rgba(0,234,255,.1);
  flex: none;
}
.license-check .box::after {
  content: "X";
  color: #001014;
  font-weight: 900;
  font-size: 1.05rem;
  opacity: 0;
  transform: scale(.4);
  transition: opacity .08s steps(2), transform .08s steps(2);
}
.license-check input:checked + .box {
  background: var(--cyan);
  border-color: var(--cyan-2);
  box-shadow: 0 0 20px rgba(0,234,255,.5);
}
.license-check input:checked + .box::after { opacity: 1; transform: scale(1); }
.license-check input:focus-visible + .box { outline: 2px solid var(--magenta); outline-offset: 2px; }
.license-check .check-label { color: #d8ecf4; line-height: 1.6; }
.license-check .check-label strong { color: #fff; }
.license-check .check-label a { text-decoration: underline; }

/* --- Recurring billing consent (YES / NO — never preselected) --- */
.consent-stack { display: grid; gap: 12px; margin-top: 18px; }
.consent-option {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  border: 1px solid rgba(143,181,200,.42);
  background: rgba(5,14,25,.94);
  padding: 16px;
  cursor: pointer;
}
.consent-option:hover { border-color: var(--cyan); }
.consent-option input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.consent-option .box {
  width: 22px; height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  border: 2px solid var(--magenta);
  background: #030811;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 10px rgba(255,10,118,.14);
}
.consent-option .box::after {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--magenta);
  opacity: 0;
  transform: scale(.3);
  transition: opacity .08s steps(2), transform .08s steps(2);
}
.consent-option input:checked + .box::after { opacity: 1; transform: scale(1); box-shadow: 0 0 12px rgba(255,10,118,.6); }
.consent-option input:focus-visible + .box { outline: 2px solid var(--cyan); outline-offset: 2px; }
.consent-option .consent-title { color: #fff; text-transform: uppercase; letter-spacing: .06em; font-size: .86rem; margin-bottom: 4px; }
.consent-option .consent-copy { color: var(--muted); font-size: .88rem; }
.consent-option.decline { border-style: dashed; }
.consent-option.decline .box { border-color: var(--muted); }
.consent-option.decline .box::after { background: var(--muted); box-shadow: none; }

/* --- Acceptance record receipt --- */
.accept-receipt {
  background: #00040a;
  border: 1px solid rgba(76,255,154,.42);
  border-left: 3px solid var(--green);
  padding: 18px;
  overflow: auto;
  color: #d6ffe9;
  white-space: pre-wrap;
  font-size: .84rem;
  margin-top: 18px;
}
.accept-receipt .prompt { color: var(--magenta); }
.accept-receipt.pending { border-color: rgba(255,216,77,.5); border-left-color: var(--yellow); color: #fff0b0; }

/* --- Annex / collapsible legal blocks --- */
details.legal-annex {
  border: 1px solid rgba(255,216,77,.5);
  background: rgba(255,216,77,.03);
  margin-top: 26px;
}
details.legal-annex > summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 18px;
  color: var(--yellow);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .82rem;
  user-select: none;
}
details.legal-annex > summary::-webkit-details-marker { display: none; }
details.legal-annex > summary::before { content: "+ "; color: var(--yellow); }
details.legal-annex[open] > summary::before { content: "- "; }
details.legal-annex > summary:hover { text-shadow: 0 0 10px rgba(255,216,77,.5); }
details.legal-annex .annex-body { padding: 0 18px 18px; }

/* --- Field rows for demo acceptance capture --- */
.accept-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 18px; }
.field-label {
  display: block;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .72rem;
  margin-bottom: 6px;
}

/* --- Dense legal document flow (30-section agreement) --- */
.section.legal-doc { padding: 34px 0; }

/* --- Alternate wallpaper band --- */
.wallpaper-band.alt {
  background:
    linear-gradient(0deg, rgba(2,4,9,.96), rgba(2,4,9,.15) 70%),
    url('../img/wallpapers/wallpaper_vantrel_terminal_overlook_16x9.png') center/cover no-repeat;
}

/* --- Clause emphasis blocks --- */
.clause-quote {
  border: 1px solid rgba(255,10,118,.52);
  background: rgba(255,10,118,.055);
  padding: 20px;
  color: #ffd7e6;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.clause-quote strong { color: #fff; }
.clause-quote .clause-url { color: var(--cyan-2); overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .accept-fields { grid-template-columns: 1fr; }
}