/*
 * CD Method — Shared Page Shell
 * ==============================
 * Beige device shell, sticky header, topnav buttons.
 * Used by ALL non-index pages (triggers, trigger, about, chamber, etc.)
 * Extracted from trigger-library.css for route splitting.
 */

/* ============================================
   FONT VARIABLE
   ============================================ */
.cd-trigger-page {
  --cd-font-body: 'Space Mono', monospace;
  --cd-shell-top-gap: clamp(12px, 3vh, 28px);
  --cd-shell-page-gutter: clamp(12px, 2vw, 24px);
  --cd-shell-content-inline: 24px;
  --cd-shell-content-top: 32px;
  --cd-shell-content-bottom: 64px;
  --cd-shell-content-max: 1100px;
  --cd-shell-case-radius: 16px;
  --cd-shell-case-inline: 16px;
  --cd-shell-case-top: 16px;
  --cd-shell-case-bottom: 12px;
  --cd-shell-page-bg: linear-gradient(145deg, #e8e4dc 0%, #d8d4cc 100%);
  --cd-shell-surface: linear-gradient(180deg,
    rgba(255,255,255,0.06) 0%,
    transparent 40%,
    rgba(0,0,0,0.03) 100%
  );
}

/* ============================================
   SHARED PAGE SHELL
   ============================================ */
.cd-trigger-page {
  min-height: 100vh;
  padding: 0 var(--cd-shell-page-gutter) 48px;
  background: var(--cd-shell-page-bg);
  background-attachment: fixed;
  font-family: var(--cd-font);
  color: var(--cd-dark);
  position: relative;
  scrollbar-gutter: stable;
}

/* Old Mac plastic grain texture */
.cd-trigger-page::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

.cd-trigger-page > * {
  position: relative;
  z-index: 1;
}

/* ============================================
   STICKY HEADER BACKDROP
   Full-width beige panel that hides scrolling content.
   Extends into page gutters via negative margins.
   Must come AFTER the > * rule so sticky wins over relative.
   ============================================ */
.cd-header-backdrop {
  position: sticky;
  top: 0;
  z-index: 50;
  margin: 0 calc(var(--cd-shell-page-gutter) * -1);
  padding: var(--cd-shell-top-gap) var(--cd-shell-page-gutter) 0;
  background: var(--cd-shell-page-bg);
  background-attachment: fixed;
  /* Clip header's outer shadow at the bottom edge only —
     sides survive because backdrop is wider than the device */
  overflow: clip;
}

/* ============================================
   DEVICE HEADER (top half of the plastic case)
   Centered, same width as body, rounded top corners.
   ============================================ */
.cd-device-header {
  position: relative;
  max-width: calc(var(--cd-shell-content-max) + (var(--cd-shell-case-inline) * 2));
  margin: 0 auto;
  padding: var(--cd-shell-case-top) var(--cd-shell-case-inline) 0;
  border-radius: var(--cd-shell-case-radius) var(--cd-shell-case-radius) 0 0;
  /* Plastic texture on device shell only — flat cream, no gradient */
  background:
    url('../images/computer-plastic.png'),
    #e0dcd4;
  background-size: 100px 100px, auto;
  background-blend-mode: soft-light;
  border: 1px solid;
  border-color:
    rgba(255,255,255,0.55)
    rgba(0,0,0,0.06)
    transparent
    rgba(255,255,255,0.35);
  border-bottom: none;
  /* Top + side insets, outer shadows. Backdrop clips bottom bleed.
     No bottom insets — those would show as a dark band at the seam. */
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,0.7),
    inset 0 5px 10px rgba(255,255,255,0.2),
    inset 2px 0 1px rgba(255,255,255,0.4),
    inset 5px 0 8px rgba(255,255,255,0.08),
    inset -2px 0 1px rgba(0,0,0,0.07),
    inset -4px 0 8px rgba(0,0,0,0.04),
    0 12px 30px -4px rgba(0,0,0,0.14),
    0 6px 12px -2px rgba(0,0,0,0.08),
    0 3px 4px rgba(0,0,0,0.06),
    3px 4px 10px rgba(0,0,0,0.04);
  isolation: isolate;
}

/* Top highlight line across device header */
.cd-device-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,0.6) 20%,
    rgba(255,255,255,0.8) 50%,
    rgba(255,255,255,0.6) 80%,
    transparent
  );
  pointer-events: none;
  z-index: 5;
}

/* Align nav buttons with content area padding */
.cd-device-header .cd-trigger-topnav {
  padding: 12px var(--cd-shell-content-inline) 16px;
}

/* ============================================
   DEVICE BODY (bottom half of the plastic case)
   Centered, same width as header, rounded bottom corners.
   ============================================ */
.cd-device-body {
  position: relative;
  max-width: calc(var(--cd-shell-content-max) + (var(--cd-shell-case-inline) * 2));
  /* Extend 200px behind the sticky header so the visible portion starts
     from the "middle" of this element — no top-edge artifacts at the seam. */
  margin: -200px auto 0;
  padding: 200px var(--cd-shell-case-inline) var(--cd-shell-case-bottom);
  border-radius: 0 0 var(--cd-shell-case-radius) var(--cd-shell-case-radius);
  /* Plastic texture on device shell only — flat cream, no gradient */
  background:
    url('../images/computer-plastic.png'),
    #e0dcd4;
  background-size: 100px 100px, auto;
  background-blend-mode: soft-light;
  border: 1px solid;
  border-color:
    transparent
    rgba(0,0,0,0.06)
    rgba(0,0,0,0.12)
    rgba(255,255,255,0.35);
  border-top: none;
  /* Full shadow list — top effects are hidden 200px behind the header.
     Visible sides show only steady-state mid-element shadow. */
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,0.7),
    inset 0 5px 10px rgba(255,255,255,0.2),
    inset 2px 0 1px rgba(255,255,255,0.4),
    inset 5px 0 8px rgba(255,255,255,0.08),
    inset 0 -2px 1px rgba(0,0,0,0.1),
    inset 0 -5px 10px rgba(0,0,0,0.06),
    inset -2px 0 1px rgba(0,0,0,0.07),
    inset -4px 0 8px rgba(0,0,0,0.04),
    0 12px 30px -4px rgba(0,0,0,0.14),
    0 6px 12px -2px rgba(0,0,0,0.08),
    0 3px 4px rgba(0,0,0,0.06),
    3px 4px 10px rgba(0,0,0,0.04);
  isolation: isolate;
}

/* Bottom shadow ellipse beneath device */
.cd-device-body::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 4%;
  right: 4%;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,0.08) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: -1;
}

/* Inner clip for bottom rounded corners */
.cd-page-body {
  position: relative;
  border-radius: 0 0 calc(var(--cd-shell-case-radius) - 2px) calc(var(--cd-shell-case-radius) - 2px);
  overflow: clip;
}

/* No scanlines or vignette — clean beige like index.html */

/* ============================================
   TOP NAVIGATION — Mechanical Keyboard Buttons
   ============================================ */
.cd-trigger-topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 12px 0 12px;
  font-family: var(--cd-font);
  font-size: 10px;
  line-height: 1;
}

.cd-topnav-btn {
  display: flex;
  align-items: center;
  white-space: nowrap;
  gap: 12px;
  height: 44px;
  min-height: auto;
  min-width: auto;
  padding: 0 24px;
  border: none;
  border-radius: 8px;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  font-family: var(--cd-font);
  font-size: 10px;
  line-height: 1;
  color: #404040;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: background 0.08s steps(2), box-shadow 0.08s steps(2), transform 0.08s steps(2), color 0.08s steps(2);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  background: linear-gradient(180deg,
    #faf8f4 0%, #f5f2ec 10%, #ede9e2 40%, #e5e1da 70%, #ddd9d2 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 2px 2px rgba(255,255,255,0.5),
    inset 0 -1px 2px rgba(0,0,0,0.03),
    0 4px 0 #c9c5be, 0 5px 0 #bab6af, 0 6px 0 #a8a49d,
    0 7px 3px rgba(0,0,0,0.15), 0 8px 8px rgba(0,0,0,0.08);
  transform: translateY(0);
}

.cd-topnav-btn:hover {
  background: linear-gradient(180deg,
    #ffffff 0%, #faf8f4 10%, #f2efe8 40%, #eae6df 70%, #e2ded7 100%);
  color: #2a2a2a;
}

.cd-topnav-btn:active {
  background: linear-gradient(180deg,
    #e8e4dc 0%, #ebe7e0 20%, #f0ece5 60%, #ede9e2 100%);
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.08), inset 0 2px 4px rgba(0,0,0,0.05),
    0 1px 0 #c9c5be, 0 2px 0 #bab6af, 0 2px 2px rgba(0,0,0,0.1);
  transform: translateY(4px);
}

.cd-topnav-icon {
  font-family: system-ui, -apple-system, 'Segoe UI Symbol', sans-serif;
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: -1px;
}

/* Dice ⚄ renders tiny in system font, scale it up */
.cd-topnav-btn--dark .cd-topnav-icon {
  font-size: 18px;
  top: 0;
}

.cd-topnav-label { line-height: 1; white-space: nowrap; }

/* Desktop: long labels, Mobile: short labels */
.cd-topnav-label--short { display: none; }

@media (max-width: 768px) {
  .cd-topnav-label--long { display: none; }
  .cd-topnav-label--short { display: inline; }
}

/* ── Black keycap variant ── reusable .cd-topnav-btn--dark */
.cd-topnav-btn--dark {
  color: #d0ccc4;
  background: linear-gradient(180deg,
    #3a3a38 0%,
    #2e2e2c 10%,
    #242422 40%,
    #1c1c1a 70%,
    #141412 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 2px 2px rgba(255,255,255,0.06),
    inset 0 -1px 2px rgba(0,0,0,0.2),
    0 4px 0 #4a4a48,
    0 5px 0 #3a3a38,
    0 6px 0 #2a2a28,
    0 7px 3px rgba(0,0,0,0.2),
    0 8px 8px rgba(0,0,0,0.1);
}

.cd-topnav-btn--dark:hover {
  color: #e8e4dc;
  background: linear-gradient(180deg,
    #4a4a48 0%,
    #3e3e3c 10%,
    #343432 40%,
    #2c2c2a 70%,
    #242422 100%
  );
}

.cd-topnav-btn--dark:active {
  color: #c8c4bc;
  background: linear-gradient(180deg,
    #1c1c1a 0%,
    #202020 20%,
    #262624 60%,
    #222220 100%
  );
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,0.4),
    inset 0 2px 4px rgba(0,0,0,0.2),
    0 1px 0 #4a4a48,
    0 2px 0 #3a3a38,
    0 2px 2px rgba(0,0,0,0.15);
  transform: translateY(4px);
}


/* ============================================
   RESPONSIVE — SHELL VARIABLES & HEADER NAV
   ============================================ */
@media (max-width: 768px) {
  .cd-trigger-page {
    --cd-shell-page-gutter: 12px;
    --cd-shell-content-inline: 16px;
    --cd-shell-content-top: 20px;
    --cd-shell-content-bottom: 48px;
  }

  .cd-device-header .cd-trigger-topnav {
    padding: 10px var(--cd-shell-content-inline);
  }

  .cd-topnav-btn {
    font-size: 9px;
    height: 40px;
    padding: 0 18px;
    gap: 10px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,1),
      inset 0 2px 2px rgba(255,255,255,0.5),
      0 3px 0 #c9c5be, 0 4px 0 #bab6af,
      0 5px 2px rgba(0,0,0,0.12), 0 5px 6px rgba(0,0,0,0.06);
  }

  .cd-topnav-btn:active {
    box-shadow:
      inset 0 1px 2px rgba(0,0,0,0.08),
      0 1px 0 #c9c5be, 0 1px 2px rgba(0,0,0,0.1);
    transform: translateY(3px);
  }

  .cd-topnav-btn--dark {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.12),
      inset 0 2px 2px rgba(255,255,255,0.06),
      0 3px 0 #0e0e0c, 0 4px 0 #080806,
      0 5px 2px rgba(0,0,0,0.2), 0 5px 6px rgba(0,0,0,0.1);
  }

  .cd-topnav-btn--dark:active {
    box-shadow:
      inset 0 1px 3px rgba(0,0,0,0.4),
      0 1px 0 #0e0e0c, 0 1px 2px rgba(0,0,0,0.2);
    transform: translateY(3px);
  }
}

@media (max-width: 480px) {
  .cd-trigger-page {
    --cd-shell-page-gutter: 10px;
    --cd-shell-top-gap: clamp(8px, 1.5vh, 12px);
    --cd-shell-case-radius: 12px;
    --cd-shell-case-inline: 8px;
    --cd-shell-case-top: 10px;
    --cd-shell-case-bottom: 8px;
  }

  .cd-device-header .cd-trigger-topnav {
    padding: 8px var(--cd-shell-content-inline);
  }

  .cd-trigger-topnav {
    gap: 6px;
  }

  .cd-topnav-btn {
    flex: 1;
    justify-content: center;
    font-size: 8px;
    height: 38px;
    padding: 0 8px;
    gap: 6px;
    border-radius: 6px;
  }
}

/* ============================================
   MOBILE STICKY SURPRISE BUTTON
   Slides up from bottom when hero scrolls off
   ============================================ */
.trigger-sticky-surprise {
  display: none;
}

@media (max-width: 768px) {
  .trigger-sticky-surprise {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transform: translateY(100%);
    transition: transform 0.25s ease;
    pointer-events: none;
    padding: 0 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    background: transparent;
  }

  .trigger-sticky-surprise.visible {
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Make the keycap full-width inside the sticky container */
  .cd-sticky-surprise-btn {
    width: 100%;
    justify-content: center;
    padding: 16px 24px;
    font-size: 11px;
    gap: 14px;
  }

  .cd-sticky-surprise-btn .cd-topnav-icon {
    font-size: 16px;
  }

  .cd-sticky-surprise-btn .cd-topnav-label {
    font-size: 11px;
    letter-spacing: 1px;
  }

  /* CD-Method detail: no random button in grid, mechanism → row 3 */
  .trigger-detail-header {
    grid-template-rows: auto auto auto;
  }

  .trigger-mechanism-block {
    grid-row: 3;
  }
}