/* SilverDesk PWA client — phone shell + screen router.
   The app is a real full-screen PWA on mobile; on wider viewports it is centred
   inside a phone-sized frame purely for presentation (the frame is NOT chrome
   the user interacts with — it just mimics a handset). */

body{background:var(--desk)}

.device-stage{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 12px;
}

.device{
  position:relative;
  width:402px;
  height:874px;
  max-height:calc(100vh - 48px);
  background:var(--bg);
  border-radius:54px;
  border:12px solid #0d0d0d;
  box-shadow:0 30px 70px rgba(17,24,39,.28);
  overflow:hidden;
}

/* status-bar notch */
.device__notch{
  position:absolute;top:12px;left:50%;transform:translateX(-50%);
  width:120px;height:30px;background:#0d0d0d;border-radius:0 0 18px 18px;z-index:60;
}

.device__screens{position:absolute;inset:0;overflow:hidden}

/* Each screen fills the device and scrolls internally. */
.screen{
  position:absolute;inset:0;
  flex-direction:column;
  min-height:100%;
  background:var(--bg);
  overflow-y:auto;
  overflow-x:hidden;
}

/* On a real handset (or narrow viewport) drop the frame and go full-bleed. */
@media (max-width:460px){
  .device-stage{padding:0}
  .device{width:100vw;height:100vh;max-height:none;border:0;border-radius:0}
  .device__notch{display:none}
}

/* On desktop, a slim install/help ribbon above the phone. */
.stage-hint{
  position:fixed;top:14px;left:0;right:0;text-align:center;
  font-size:12px;color:var(--ts);pointer-events:none;
}
.stage-hint b{color:var(--gold)}

/* ---- Filters: segmented status control ---- */
.seg{
  flex:1;padding:10px 0;border-radius:6px;font-size:12px;cursor:pointer;
  font-family:'Inter',sans-serif;font-weight:500;
  border:1px solid var(--border);background:transparent;color:var(--tp);
}
.seg.active{border-color:var(--gold);background:var(--gold);color:#fff;font-weight:700}

/* ---- Product detail: selectable piece rows ---- */
.piece-row .piece-dot{border:2px solid var(--ts)}
.piece-row.selected{border-left:3px solid var(--gold);background:rgba(114,6,18,.10)}
.piece-row.selected .piece-dot{border:5px solid var(--gold)}