/* ════════════════════════════════════════════════════════════════════
   Performance notice  ·  shown once per session at load (ui/perf-notice.js)
   ────────────────────────────────────────────────────────────────────
   First-load heads-up: the WebGL real-time 3D lab is graphics-intensive;
   laptop users should connect power + enable a high-performance plan, plus
   three quick controls. Self-contained stylesheet (linked from index.html).

   v2.7.03 — restyled to the DESIGN.md system (user: "开屏页风格切换到
   DESIGN.md"). Monochrome only (P2 / §3.5 — no laser-spectrum band, no
   colored badges/tints/buttons); hairline surfaces (P4); radius ≤ 8px (§6.1);
   modal sheet on --surface-2 + --shadow-modal (§6.3 / §8); buttons follow the
   §8.1 system (primary = --ink-1 fill / --bg text per §3.3; ghost = hairline);
   eyebrow 0.08em (§4.4); EN-only (P5). Neutral token family throughout so
   contrast holds in both themes (§13).
   ════════════════════════════════════════════════════════════════════ */

.perf-notice {
  position: fixed;
  inset: 0;
  z-index: 2400;            /* above modals (2000), below debug overlay (9999) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--overlay-3);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  animation: perf-backdrop-in var(--dur-modal, 0.24s) ease;
}
/* explicit display:flex overrides UA [hidden]{display:none}; re-assert hidden
   with higher specificity (same pattern as .modal-backdrop[hidden]). */
.perf-notice[hidden] { display: none; }

@keyframes perf-backdrop-in { from { opacity: 0; } to { opacity: 1; } }

.perf-notice-card {
  position: relative;
  width: min(460px, 100%);
  background: var(--surface-2);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-lg, 8px);
  box-shadow: var(--shadow-modal);
  padding: 0 0 20px;
  overflow: hidden;
  animation: perf-card-in var(--dur-modal, 0.24s) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

@keyframes perf-card-in {
  from { transform: translateY(8px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0)   scale(1);    opacity: 1; }
}

/* Decorative laser-spectrum band removed (P2 monochrome). The element is gone
   from index.html; this guard keeps any stale copy from rendering color. */
.perf-notice-spectrum { display: none; }

/* ── Header: monochrome icon badge + title ────────────────────────── */
.perf-notice-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px 0;
}

.perf-notice-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md, 5px);
  background: var(--surface-3);
  border: 1px solid var(--line-1);
  color: var(--ink-2);
}
.perf-notice-icon svg { width: 22px; height: 22px; }

.perf-notice-head-text { min-width: 0; }

.perf-notice-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}

.perf-notice-title {
  font-family: var(--font-ui);
  margin: 0;
  display: flex;
  flex-direction: column;
}
/* EN-only title (P5) — the main heading now. */
.perf-notice-title-en {
  font-size: 16px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--ink-1);
}

/* ── Lead paragraph: why ──────────────────────────────────────────── */
.perf-notice-lead {
  font-family: var(--font-ui);
  margin: 14px 24px 16px;
}
.perf-notice-lead-en {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* ── Tips: hairline neutral rows (no color tints) ─────────────────── */
.perf-notice-tips {
  list-style: none;
  margin: 0 24px 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.perf-notice-tip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md, 5px);
  background: var(--surface-1);
  border: 1px solid var(--line-1);
}

.perf-notice-tip-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md, 5px);
  background: var(--surface-3);
  color: var(--ink-2);
}
.perf-notice-tip-icon svg { width: 18px; height: 18px; }

.perf-notice-tip-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.perf-notice-tip-en {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-1);
}
.perf-notice-tip-en b { font-weight: 600; }

/* ── Footer: remember toggle + actions ────────────────────────────── */
.perf-notice-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 24px;
}
.perf-notice-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  cursor: pointer;
  user-select: none;
}
.perf-notice-remember input {
  width: 15px;
  height: 15px;
  accent-color: var(--ink-1);    /* monochrome (was laser violet) */
  cursor: pointer;
  flex: 0 0 auto;
}
.perf-notice-remember-text { display: flex; flex-direction: column; line-height: 1.25; }
.perf-notice-remember-en { font-size: 12px; color: var(--ink-2); }

/* Right-aligned action cluster (Back / Skip / Next / Got it). Buttons follow
   the DESIGN.md §8.1 system: primary = --ink-1 fill / --bg text (§3.3 reverse
   on a solid fill); ghost = transparent + hairline. No color, no glow. */
.perf-notice-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.perf-notice-btn[hidden] { display: none; }

.perf-notice-btn {
  flex: 0 0 auto;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  height: 36px;
  padding: 0 18px;
  color: var(--bg);
  background: var(--ink-1);
  border: 1px solid var(--ink-1);
  border-radius: var(--radius-md, 5px);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.perf-notice-btn:hover { background: var(--ink-2); border-color: var(--ink-2); }
.perf-notice-btn:active { background: var(--ink-2); }
.perf-notice-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--overlay-2);
}

/* Ghost variant for secondary actions (Back / Skip): transparent + hairline so
   the solid primary (Next / Got it) stays the clear default. */
.perf-notice-btn-ghost {
  color: var(--ink-1);
  background: transparent;
  border: 1px solid var(--line-1);
}
.perf-notice-btn-ghost:hover {
  background: var(--overlay-1);
  border-color: var(--line-2);
  color: var(--ink-1);
}

@media (max-width: 520px) {
  .perf-notice-head { padding-inline: 20px; }
  .perf-notice-lead,
  .perf-notice-tips,
  .perf-notice-foot { margin-inline: 20px; padding-inline: 0; }
  .perf-notice-foot { flex-direction: column-reverse; align-items: stretch; }
  .perf-notice-actions { width: 100%; }
  .perf-notice-actions .perf-notice-btn { flex: 1 1 0; }
  .perf-notice-remember { justify-content: center; }
}

/* Respect reduced-motion: skip the entrance animations. */
@media (prefers-reduced-motion: reduce) {
  .perf-notice,
  .perf-notice-card { animation: none; }
}