/* Prototype shell — makes the 390px design frames behave like a phone app. */
html,body{background:var(--bg);}
body{overscroll-behavior-y:none;}
#root{min-height:100vh;}

/* shell header (outside the app) */
.pshell{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:6px;height:40px;padding:0 8px;
  background:var(--ink-navy);color:#fff;font-size:12px;}
.pshell .pb{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;color:#fff;background:transparent;}
.pshell .pb:active{background:rgba(255,255,255,.15);}
.pshell .ptitle{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;color:rgba(255,255,255,.85);}
.pshell .prole{display:flex;background:rgba(255,255,255,.12);border-radius:999px;padding:2px;}
.pshell .prole button{height:26px;padding:0 10px;border-radius:999px;font-size:11px;font-weight:600;color:rgba(255,255,255,.75);}
.pshell .prole button.on{background:#fff;color:var(--ink-navy);}

/* the frame fills the phone */
.pscreen{max-width:430px;margin:0 auto;position:relative;}
.pscreen .frame,.pscreen .frame.sub{width:100%;border:none;border-radius:0;box-shadow:none;min-height:calc(100vh - 40px);}
.pscreen .frame-body{min-height:calc(100vh - 40px) !important;}
.pscreen .frame.has-tab .frame-body{min-height:calc(100vh - 40px - 62px) !important;}
.pscreen .tabbar{position:sticky;bottom:0;z-index:20;}
.pscreen .fab{position:fixed;right:max(18px,calc(50% - 215px + 18px));bottom:84px;}
.pscreen .sheet-frame .frame-body{min-height:calc(100vh - 40px) !important;}
.pscreen .map-frame .frame-body{min-height:calc(100vh - 40px) !important;}
.pscreen .pmodal{max-width:300px;}
.pscreen .card[style*="width:300px"],.pscreen .card[style*="width: 300px"]{width:100% !important;}
@media (min-width:480px){
  body{background:#E4E9F0;}
  .pscreen{max-width:430px;}
  .pscreen .frame,.pscreen .frame.sub{border-left:1px solid rgba(16,32,48,.1);border-right:1px solid rgba(16,32,48,.1);}
}

/* screen index drawer */
.pdrawer{position:fixed;inset:0;z-index:60;background:var(--bg);overflow:auto;padding:16px 16px 40px;}
.pdrawer h2{font-size:18px;margin:8px 0 2px;color:var(--ink-navy);}
.pdrawer .hint{font-size:13px;color:var(--text-secondary);margin-bottom:16px;}
.pdrawer .batch{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-tertiary);margin:18px 4px 6px;}
.pdrawer .srow{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--surface);border:1px solid var(--border);
  border-radius:10px;margin-bottom:6px;cursor:pointer;}
.pdrawer .srow:active{background:var(--primary-tint);}
.pdrawer .srow .num{font-size:11px;font-weight:700;color:#fff;background:var(--ink-navy);border-radius:6px;padding:2px 6px;min-width:26px;text-align:center;}
.pdrawer .srow .nm{flex:1;font-size:14px;font-weight:500;}
.pdrawer .srow .rl{font-size:11px;color:var(--text-secondary);}
.pdrawer .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.pdrawer .close{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;color:var(--text);background:var(--surface);border:1px solid var(--border);}
.pdrawer .start{margin:6px 0 10px;}

/* tap hint: every mapped control shows a cursor on desktop */
.pscreen [data-nav]{cursor:pointer;}
/* tur 3: sheets grow the frame; landscape viewer */
.pscreen .sheet-frame .frame-body{display:flex;flex-direction:column;}
.pscreen .sheet-frame .backdrop{position:relative;inset:auto;flex:0 0 auto;min-height:140px;}
.pscreen .sheet-frame .sheet{position:relative;left:auto;right:auto;bottom:auto;margin-top:auto;z-index:3;}
.pscreen:has(.frame.land){max-width:640px;}
.pscreen .frame.land .frame-body{min-height:400px !important;}