/* ── oz-handshake — the 🤝 "one dance" pairing button, panel, and the build stamp ── */

/* the button — sits on the wellness top bar (and any card/bot that calls ozPairButton) */
.ozp-btn {
  background: var(--surface-2); border: 1px solid var(--lav-deep); color: var(--lav-bright);
  border-radius: 8px; padding: 4px 9px; font-size: var(--fs-chrome); cursor: pointer; line-height: 1;
}
.ozp-btn:hover { background: var(--lav-deep); color: #fff; }

/* the 🤝 fix-it button dropped into any card's gear settings (the data-in mini) */
.oz-pair-open { background: var(--lav-deep); border: 1px solid var(--lav-deep); color: #fff; border-radius: 8px; padding: 8px 15px; font-size: var(--fs-chrome); font-weight: 600; cursor: pointer; }
.oz-pair-open:hover { filter: brightness(1.14); }
.oz-datain-mini p { margin: 5px 0 9px; }
.sleep-setup-note { font-size: var(--fs-chrome); color: var(--text-dim); opacity: .8; margin-top: 6px; }

/* the build stamp — muted, always-there "which binary am I on" line */
.oz-build {
  font-size: var(--fs-ui); color: var(--text-dim); opacity: .6; letter-spacing: .2px;
  font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: 2px; user-select: text;
}

/* modal shell */
.ozp-wrap {
  position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55); backdrop-filter: blur(3px); padding: 24px;
}
.ozp-modal {
  width: min(560px, 94vw); max-height: 88vh; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--lav-deep); border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,.6); overflow: hidden;
}
.ozp-head {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "title x" "sub x";
  gap: 1px 8px; padding: 14px 16px; border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, var(--lav-deep), transparent 70%);
}
.ozp-title { grid-area: title; font-size: var(--fs-label); font-weight: 800; color: var(--text); }
.ozp-sub   { grid-area: sub; font-size: var(--fs-chrome); color: var(--text-dim); }
.ozp-x {
  grid-area: x; align-self: start; background: none; border: 1px solid var(--line); color: var(--text-dim);
  border-radius: 7px; width: 28px; height: 28px; cursor: pointer; font-size: var(--fs-chrome);
}
.ozp-x:hover { background: var(--surface-2); color: var(--text); }

.ozp-body { padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }

/* the 4 steps */
.ozp-steps { list-style: none; counter-reset: dance; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ozp-steps li { counter-increment: dance; display: grid; grid-template-columns: 26px 1fr; align-items: baseline; gap: 4px 10px; }
.ozp-steps li::before {
  content: counter(dance); grid-row: span 2; align-self: start;
  width: 24px; height: 24px; border-radius: 50%; background: var(--lav-deep); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: var(--fs-chrome); font-weight: 700;
}
.ozp-steps b { font-size: var(--fs-chrome); color: var(--text); font-weight: 700; }
.ozp-steps span { font-size: var(--fs-chrome); color: var(--text-dim); line-height: 1.45; }

/* the pairing card — QR placeholder + big code */
.ozp-pair { display: flex; gap: 16px; align-items: stretch; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.ozp-qr {
  flex: 0 0 96px; height: 96px; border-radius: 10px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px; text-align: center;
  border: 2px dashed var(--lav-deep);
  background:
    repeating-linear-gradient(0deg, transparent 0 6px, rgba(124,109,214,.10) 6px 12px),
    repeating-linear-gradient(90deg, transparent 0 6px, rgba(124,109,214,.10) 6px 12px);
}
.ozp-qr-glyph { font-size: 26px; opacity: .8; }
.ozp-qr-cap { font-size: 13px; color: var(--text-dim); line-height: 1.25; }
.ozp-pairinfo { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.ozp-codelbl { font-size: var(--fs-chrome); color: var(--text-dim); }
.ozp-code { font-size: 30px; font-weight: 800; letter-spacing: 5px; color: var(--lav-bright); font-variant-numeric: tabular-nums; }
.ozp-host { font-size: var(--fs-ui); color: var(--text-dim); }
.ozp-host i { opacity: .7; }
.ozp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 3px; vertical-align: middle; }
.ozp-dot-off { background: var(--warn); box-shadow: 0 0 6px var(--warn); }

/* section labels */
.ozp-sect { font-size: var(--fs-chrome); font-weight: 700; color: var(--text); letter-spacing: .3px; margin-bottom: -6px; }

/* device classes */
.ozp-classes { display: flex; flex-direction: column; gap: 6px; }
.ozp-class {
  display: grid; grid-template-columns: 24px 92px 1fr auto; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2);
}
.ozp-cic { font-size: 16px; text-align: center; }
.ozp-cname { font-size: var(--fs-chrome); font-weight: 600; color: var(--text); }
.ozp-cvia { font-size: var(--fs-ui); color: var(--text-dim); }
.ozp-cstat { font-size: var(--fs-ui); color: var(--lav-bright); white-space: nowrap; }

/* paired list */
.ozp-devices { display: flex; flex-direction: column; gap: 6px; }
.ozp-dev { display: flex; justify-content: space-between; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; font-size: var(--fs-chrome); color: var(--text); }
.ozp-devlast { color: var(--text-dim); }
.ozp-empty { font-size: var(--fs-chrome); color: var(--text-dim); padding: 8px 2px; }

/* works-today path */
.ozp-today { font-size: var(--fs-chrome); color: var(--text-dim); line-height: 1.5; border-top: 1px solid var(--line); padding-top: 12px; }
.ozp-import { background: var(--surface-2); border: 1px solid var(--lav-deep); color: var(--lav-bright); border-radius: 7px; padding: 4px 9px; font-size: var(--fs-chrome); cursor: pointer; }
.ozp-import:hover { background: var(--lav-deep); color: #fff; }