/* "It stays on your Mac": a laptop whose screen holds what Lunille reads.
   The 3D laptop is WebGL (privacy3d.js); the line of light, the two exits and the
   three empty sockets are drawn on a 2D canvas above it; every word is DOM text
   placed over the projected scene. Every selector here is scoped to .privacy. */

.privacy {
  --p3-green: #30D158;
  --p3-green-ink: #7BE59A;
  --p3-red: #FF7A6E;
  --p3-wide: 1440px;
  position: relative;
  padding: 0 0 clamp(2.5rem, 4.5vw, 4rem);
  background:
    radial-gradient(56% 40% at 46% 60%, rgb(36 46 92 / 0.24), transparent 72%),
    var(--sc-canvas);
}

.privacy__frame { position: relative; }

/* Desktop: the title sits in the scene's top-left corner, like a slide. */
.privacy__head {
  position: absolute; z-index: 3;
  top: clamp(1.5rem, 5vh, 3.25rem);
  left: max(var(--sc-gutter), calc((100% - var(--p3-wide)) / 2 + var(--sc-gutter)));
  display: grid; gap: var(--sc-4); max-width: 29rem;
}
.privacy__head .body { max-width: 28ch; }

.privacy__stage {
  position: relative; overflow: hidden; overflow: clip;
  height: max(560px, calc(100vh - var(--menubar-h)));
  height: max(560px, calc(100svh - var(--menubar-h)));
  max-height: 1040px;
  visibility: hidden;
}
.privacy.is-live .privacy__stage { visibility: visible; }
.privacy__gl, .privacy__ink { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; }
.privacy__gl { opacity: 0; transition: opacity 700ms var(--sc-ease-out, ease-out); }
.privacy.has-gl .privacy__gl { opacity: 1; }

/* Every mark is placed by privacy3d.js from the projected scene. */
.privacy__marks { position: absolute; inset: 0; pointer-events: none; user-select: none; -webkit-user-select: none; }
.privacy__marks > * { position: absolute; left: 0; top: 0; margin: 0; transform-origin: 0 0; opacity: 0; }

/* The data that stays: chips on the laptop's screen. */
.privacy__chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 5px 10px 5px 8px; border-radius: var(--r-chip, 8px);
  background: #121933;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.11), 0 6px 14px -6px rgb(2 4 12 / 0.8);
  color: var(--sc-ink); font: 500 13px/1.25 var(--sc-font-text); letter-spacing: 0;
}
.privacy__chip i { font-size: 14px; color: var(--p3-green); }

/* The name of the line of light, set into a gap in it like a fieldset legend. */
.privacy__legend {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 0 7px; color: var(--p3-green-ink); font: 600 13.5px/1 var(--sc-font-text);
}
.privacy__legend::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--p3-green); }

.privacy__cap { white-space: nowrap; font: 600 14px/1 var(--sc-font-text); letter-spacing: 0.005em; }
.privacy__cap--leaves { color: var(--sc-accent); }
.privacy__cap--never { color: var(--p3-red); }

/* What leaves, and where to. */
.privacy__exit { display: block; width: var(--p3-exit-w, 300px); font: 400 13.5px/1.42 var(--sc-font-text); color: var(--sc-ink-soft); text-wrap: pretty; }
.privacy__exit b { display: block; margin-bottom: 2px; font-weight: 600; font-size: 14.5px; color: var(--sc-ink); }

/* What never exists. */
.privacy__none { white-space: nowrap; font: 500 13.5px/1.2 var(--sc-font-text); color: #C9CFE0; }

/* The same meaning in words. */
.privacy__ledger {
  width: min(calc(100% - 2 * var(--sc-gutter)), calc(var(--p3-wide) - 2 * var(--sc-gutter)));
  margin: clamp(1rem, 3vw, 2rem) auto 0; display: grid;
}
.privacy__row {
  display: grid; grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr); gap: var(--sc-5);
  padding: 1.25rem 0; border-top: 1px solid var(--sc-hairline);
}
.privacy__row:last-child { border-bottom: 1px solid var(--sc-hairline); }
.privacy__row dt { display: flex; align-items: baseline; gap: 10px; font: 600 var(--sc-t-base)/1.5 var(--sc-font-text); color: var(--sc-ink); }
.privacy__row dt::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; transform: translateY(-1px); }
.privacy__row--stays dt::before { background: var(--p3-green); }
.privacy__row--leaves dt::before { background: var(--sc-accent); }
.privacy__row--never dt::before { background: var(--p3-red); }
.privacy__row dd { margin: 0; max-width: 64ch; font-size: var(--sc-t-base); line-height: 1.6; color: var(--sc-ink-soft); text-wrap: pretty; }

/* Phones and portrait screens: the title above, the scene recomposed as a column. */
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  .privacy__head { position: relative; top: auto; left: auto; max-width: 36rem; padding: clamp(2.25rem, 7vw, 3.5rem) var(--sc-gutter) var(--sc-3); }
  .privacy__head .body { max-width: 32ch; }
  .privacy__stage { height: max(530px, calc(100vh - var(--menubar-h) - 13rem)); height: max(530px, calc(100svh - var(--menubar-h) - 13rem)); max-height: 900px; }
  .privacy__chip { gap: 4px; padding: 4px 7px 4px 6px; font-size: 12px; }
  .privacy__chip i { font-size: 12px; }
  .privacy__legend { font-size: 12px; padding: 0 5px; }
  .privacy__exit { font-size: 13px; line-height: 1.38; text-align: center; }
  .privacy__exit b { font-size: 14px; }
  .privacy__none { font-size: 13px; }
  .privacy__row { grid-template-columns: 1fr; gap: 6px; padding: 0.875rem 0; }
  .privacy__row dt { font-size: 15px; }
  .privacy__row dd { font-size: 15px; line-height: 1.55; }
}

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