/* ============================================================================
   07 · DEVICES, the device-preview harness.
   ----------------------------------------------------------------------------
   Used only by the preview shell that frames the app in a phone / tablet /
   desktop viewport. None of this ships inside the product itself, so it is
   kept out of layout.css and components.css deliberately.

   Frame sizes live in one place (--dev-w / --dev-h, set per modifier) so a new
   device is a few lines, not a new stylesheet.
   ========================================================================== */

.shell {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--bg-app);
}

/* ---------- toolbar ---------- */
.devbar {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-surface);
  border-bottom: var(--border-width) solid var(--border);
}
.devbar__group { display: flex; align-items: center; gap: var(--sp-2); }
.devbar__spacer { margin-left: auto; }

/* segmented control, used for both role and device */
.segment {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--bg-sunken);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
}
.segment__btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: 30px; padding: 0 var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  color: var(--text-muted); white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.segment__btn:hover { color: var(--text); background: var(--bg-raised); }
.segment__btn[aria-pressed="true"] {
  background: var(--brand); color: var(--brand-on);
}
.segment__btn svg { width: 14px; height: 14px; flex: none; }
.segment__btn .segment__label { display: none; }
@media (min-width: 640px) { .segment__btn .segment__label { display: inline; } }

/* ---------- stage ---------- */
.stage {
  flex: 1; display: grid; place-items: center;
  padding: var(--sp-6) var(--sp-4);
  overflow: auto;
  background:
    radial-gradient(circle at 50% 0%, var(--brand-soft), transparent 60%),
    var(--bg-app);
}
@media (max-width: 700px) { .stage { padding: var(--sp-4) var(--sp-2); } }

/* The frame is sized in CSS pixels, then scaled down by JS to fit the stage,
   so the embedded app always believes it is at the real device width. */
.frame {
  --dev-w: 1440px;
  --dev-h: 900px;
  --dev-scale: 1;
  width: var(--dev-w); height: var(--dev-h);
  transform: scale(var(--dev-scale));
  transform-origin: top center;
  background: var(--bg-surface);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transition: width var(--dur-base) var(--ease), height var(--dur-base) var(--ease);
}
.frame__screen { width: 100%; height: 100%; border: 0; display: block; background: var(--bg-app); }

.frame--desktop { --dev-w: 1440px; --dev-h: 900px; }
.frame--tablet  { --dev-w: 834px;  --dev-h: 1112px; border-radius: 22px; padding: 12px;
                  background: #111417; border-color: #2A3036; }
.frame--mobile  { --dev-w: 390px;  --dev-h: 844px;  border-radius: 34px; padding: 10px;
                  background: #111417; border-color: #2A3036; }

.frame--tablet .frame__screen,
.frame--mobile .frame__screen {
  height: 100%; border-radius: 14px; overflow: hidden;
}
.frame--mobile .frame__screen { border-radius: 26px; }

/* phone speaker / camera nub */
.frame--mobile::before {
  content: ""; position: absolute; top: 18px; left: 50%; translate: -50% 0;
  width: 86px; height: 5px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.16); z-index: 2; pointer-events: none;
}
.frame--mobile, .frame--tablet { position: relative; }

/* ---------- size caption ---------- */
.stage__meta {
  margin-top: var(--sp-3); text-align: center;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: .06em; color: var(--text-subtle);
}

/* ---------- device chooser on the login screen ---------- */
.device-pick {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
  margin-bottom: var(--sp-5); padding-bottom: var(--sp-5);
  border-bottom: var(--border-width) solid var(--border);
}
.device-pick__label { font-size: var(--text-sm); color: var(--text-muted); }