/* Lab page chrome: layout around the phone, explanation panel, tunables, QR, debug layer. */

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: #E9EBEE;
  color: #16181D;
  font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.lab {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 56px;
  padding: 16px 32px;
}
.lab-stage { position: sticky; top: 16px; flex: none; }
.lab-panel { flex: 0 1 600px; min-width: 0; padding: 20px 0 64px; }

/* Panel typography */
.panel-head { position: relative; }
.eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #a35f00; }
.panel-head h1 { margin: 0 0 10px; font-size: 34px; line-height: 1.15; letter-spacing: -.02em; }
.lede { margin: 0; font-size: 17px; color: #374151; }

.panel-section {
  margin-top: 20px;
  padding: 20px 22px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 0 #dde1e6;
}
.panel-section h2 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; font-size: 18px; line-height: 1.3; }
.panel-section h2 .num { font-size: 12px; font-weight: 700; color: #9aa1ab; font-variant-numeric: tabular-nums; }
.panel-section p { margin: 0 0 10px; }
.panel-section p:last-child { margin-bottom: 0; }
.muted { color: #6b7280; font-size: 13.5px; }

kbd {
  padding: 1px 6px;
  border: 1px solid #cfd5dc;
  border-bottom-width: 2px;
  border-radius: 5px;
  background: #f7f8fa;
  font: 600 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.table-wrap { overflow-x: auto; }
.gestures { width: 100%; border-collapse: collapse; font-size: 14px; }
.gestures th, .gestures td { padding: 9px 0; border-top: 1px solid #edf0f3; text-align: left; vertical-align: top; }
.gestures th { width: 40%; padding-right: 14px; font-weight: 600; }
.gestures tr:first-child th, .gestures tr:first-child td { border-top: 0; }

.diagram { overflow-x: auto; margin: 4px -4px 0; }
.diagram svg { display: block; width: 100%; min-width: 500px; height: auto; }
.d-box { fill: #fff; stroke: #203438; stroke-width: 1.5; }
.d-box.is-hot { fill: #f69d20; stroke: #d98613; }
.d-state { font: 700 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; fill: #203438; text-anchor: middle; }
.d-arrow { fill: none; stroke: #203438; stroke-width: 1.4; }
.d-arrow.is-soft { stroke: #9aa1ab; stroke-dasharray: 4 3; }
.d-label { font: 11.5px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; fill: #4b5563; }

.points { margin: 0; padding: 0; list-style: none; }
.points li + li { margin-top: 14px; }
.points b { display: block; margin-bottom: 2px; }
.risks { margin: 0; padding-left: 18px; }
.risks li + li { margin-top: 8px; }

/* Tunables */
.tune { padding: 11px 0; border-top: 1px solid #edf0f3; }
.tune:first-child { border-top: 0; }
.tune-head { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 600; }
.tune output { color: #203438; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tune.is-changed output, .tune-bool.is-changed span { color: #a35f00; }
.tune input[type="range"] { width: 100%; margin: 8px 0 0; accent-color: #203438; }
.tune-hint { width: 100%; margin: 4px 0 0; font-size: 12.5px; font-weight: 400; line-height: 1.45; color: #6b7280; }
.tune-bool { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; cursor: pointer; }
.tune-bool input { width: 18px; height: 18px; margin: 0; accent-color: #203438; }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.btn {
  height: 36px;
  padding: 0 16px;
  border: 1px solid #cfd5dc;
  border-radius: 999px;
  background: #fff;
  color: #203438;
  font: 600 14px/1 inherit;
  cursor: pointer;
}
.btn-primary { border-color: #203438; background: #203438; color: #fff; }

/* Share */
.share { display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: center; }
.qr { width: 150px; aspect-ratio: 1; }
.qr svg { display: block; width: 100%; height: 100%; }
.qr-url { margin: 0 0 8px; font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; color: #203438; word-break: break-all; }

.panel-foot { margin: 22px 0 0; font-size: 12.5px; color: #6b7280; }

/* Debug layer (inside the phone screen, above the zoom overlay) */
.debug-layer { position: absolute; inset: 0; z-index: 45; pointer-events: none; }
.dbg-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  background: rgba(246, 157, 32, .6);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(32, 52, 56, .7);
}
.dbg-ring { position: absolute; top: 0; left: 0; border: 1.5px dashed #d53827; border-radius: 50%; }
.dbg-dead { position: absolute; border: 1.5px dashed rgba(32, 52, 56, .6); border-radius: 10px; }
.dbg-pill {
  position: absolute;
  top: 66px;
  left: 50%;
  transform: translateX(-50%);
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(17, 24, 39, .88);
  color: #a7f3d0;
  font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}
.dbg-pill.is-bad { background: rgba(153, 27, 27, .92); color: #fee2e2; }

.lab-pill, .sheet-close { display: none; }

@media (max-width: 960px) {
  .lab { flex-direction: column; align-items: center; gap: 8px; padding: 16px; }
  .lab-stage { position: static; }
  .lab-panel { flex: none; width: 100%; max-width: 600px; }
}

/* Real phone: the product page is the page; the panel becomes a bottom sheet behind the "Lab" pill */
@media (max-width: 500px) {
  html, body { height: 100%; overflow: hidden; overscroll-behavior: none; background: #fff; }
  .lab { display: block; padding: 0; }
  .lab-panel {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    max-height: 84dvh;
    padding: 18px 16px calc(28px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 18px 18px 0 0;
    background: #E9EBEE;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, .28);
    transform: translateY(105%);
    visibility: hidden;
    transition: transform .28s ease, visibility 0s linear .28s;
  }
  body.sheet-open .lab-panel { transform: none; visibility: visible; transition: transform .28s ease; }
  .panel-head { padding-right: 76px; }
  .panel-head h1 { font-size: 26px; }
  .sheet-close { display: block; position: absolute; top: 0; right: 0; }
  .lab-pill {
    display: block;
    position: absolute;
    right: 12px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 30;
    padding: 9px 15px;
    border: 0;
    border-radius: 999px;
    background: rgba(32, 52, 56, .74);
    color: #fff;
    font: 700 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  .desktop-only { display: none; }
  .share { grid-template-columns: 1fr; }
}

@media (min-width: 501px) {
  .phone-only { display: none; }
}