/* ============================================================
   iPad frame - 28px bezel, thin black border, slim home bar.
   Uses the extra width for sidebar + split (master/detail) views.
   ============================================================ */
.ipad{width:1194px;height:834px;background:#000;border-radius:40px;padding:13px;
  box-shadow:0 30px 80px rgba(0,0,0,.4),0 0 0 2px #2a2a2c;flex:none}
.ipad.portrait{width:834px;height:1112px}
.ipad .screen{width:100%;height:100%;background:var(--bg);border-radius:28px;overflow:hidden;
  display:flex;flex-direction:column;position:relative}

/* slim iPad status bar */
.ipadstatus{height:30px;flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:0 22px;font-size:13px;font-weight:600;color:var(--label);z-index:30}
.ipadstatus .st-icons{display:flex;align-items:center;gap:6px}
.ipadstatus .st-icons svg{height:12px;width:auto}

/* app shell: sidebar + content */
.padshell{flex:1;display:flex;min-height:0}
.padside{width:260px;flex:none;background:var(--grouped);border-right:.5px solid var(--sep);
  display:flex;flex-direction:column;padding:8px 10px;overflow-y:auto}
.padside .brandrow{display:flex;align-items:center;gap:10px;padding:12px 8px 16px}
.padside .brandrow img{height:24px;width:auto}
.padside .brandrow .role{font-size:13px;color:var(--label2)}
.padnav{display:flex;flex-direction:column;gap:2px}
.padnav a{display:flex;align-items:center;gap:12px;min-height:42px;padding:0 12px;border-radius:10px;
  font-size:16px;color:var(--label);font-weight:500}
.padnav a svg{width:22px;height:22px;color:var(--label2)}
.padnav a.on{background:var(--tint);color:#fff}
.padnav a.on svg{color:#fff}
.padnav a .tcount{margin-left:auto;background:var(--red);color:#fff;font-size:12px;font-weight:700;
  min-width:20px;height:20px;border-radius:10px;display:grid;place-items:center;padding:0 5px;
  font-variant-numeric:tabular-nums}
.padnav a.on .tcount{background:rgba(255,255,255,.25)}
.padside .userchip{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px 8px;
  border-top:.5px solid var(--sep)}
.padside .userchip b{font-size:14px;font-weight:600;display:block}
.padside .userchip small{font-size:12px;color:var(--label2)}

.padmain{flex:1;min-width:0;display:flex;background:var(--bg)}
.padmain.grouped{background:var(--grouped)}

/* split (master + detail) */
.split{flex:1;display:flex;min-height:0}
.pane-list{width:380px;flex:none;border-right:.5px solid var(--sep);display:flex;flex-direction:column;
  background:var(--bg)}
.pane-list .scrollwrap{flex:1;overflow-y:auto}
.pane-detail{flex:1;min-width:0;display:flex;flex-direction:column;overflow-y:auto;background:var(--bg)}
.pane-side{width:340px;flex:none;border-left:.5px solid var(--sep);display:flex;flex-direction:column;
  background:var(--grouped)}

/* single scrolling column inside the iPad main (non-split screens) */
.padcol{flex:1;overflow-y:auto}
.padcol-wrap{max-width:720px;margin:0 auto;padding-bottom:30px}

.ipad .homebar{bottom:7px;width:240px}
.page-ipad .cap{max-width:1194px}
.page-ipad.portrait-page .cap{max-width:834px}