/* Parent dashboard: its own calm layout (sidebar + one section at a time), without the kids' robots and stars. */
body.pp { display: flex; min-height: 100vh; background: #070d22; }
body.pp::before { display: none; }
.pp-side {
  position: sticky; top: 0; align-self: flex-start; height: 100vh; width: 250px; flex: none;
  display: flex; flex-direction: column; gap: 18px; padding: 18px 14px;
  background: #0a1230; border-right: 1px solid var(--line);
}
.pp-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.pp-brand b { display: block; font: 800 18px/1.1 var(--font-head); color: var(--gold); }
.pp-brand small { color: var(--muted); }
.pp-tabs { display: flex; flex-direction: column; gap: 4px; }
.pp-tabs a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; min-height: 44px;
  color: var(--ink); text-decoration: none; font-weight: 800;
}
.pp-tabs a:hover { background: rgba(47,128,255,.14); }
.pp-tabs a.on { background: rgba(255,199,44,.16); color: var(--gold); box-shadow: inset 3px 0 0 var(--gold); }
.pp-count { margin-left: auto; min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--red); color: #fff; font-size: 13px; text-align: center; }
.pp-side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.pp-main { flex: 1; min-width: 0; padding: clamp(16px, 3vw, 34px); max-width: 1100px; }
.pp-main:focus { outline: none; }
.pp-main .page-title { margin-top: 0; }
/* One tab at a time: portal.js sets data-tab on <main>. */
.pp-main[data-tab] [data-sec] { display: none; }
.pp-main[data-tab="children"] [data-sec="children"],
.pp-main[data-tab="children"] [data-sec="linkable"],
.pp-main[data-tab="controls"] [data-sec="controls"],
.pp-main[data-tab="messages"] [data-sec="messages"],
.pp-main[data-tab="add"] [data-sec="add"],
.pp-main[data-tab="devices"] [data-sec="devices"],
.pp-main[data-tab="account"] [data-sec="account"] { display: flex; }
.pp-login { max-width: 520px; margin: 6vh auto; }
.pd-ctl { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; background: var(--panel-2); display: flex; flex-direction: column; gap: 8px; }
.pd-ctl h3 { display: flex; align-items: center; gap: 10px; margin: 0; }
.pd-ctl h4 { margin: 8px 0 0; }
@media (max-width: 760px) {
  body.pp { flex-direction: column; }
  .pp-side { position: static; height: auto; width: auto; gap: 10px; border-right: 0; border-bottom: 1px solid var(--line); }
  .pp-side { padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left)); }
  /* Every tab stays on screen on phones: a 2-column grid instead of a strip that scrolls sideways. */
  .pp-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .pp-tabs a { gap: 8px; padding: 8px 10px; font-size: 14px; line-height: 1.2; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
  .pp-tabs a.on { box-shadow: inset 0 -3px 0 var(--gold); }
  .pp-side-foot { flex-direction: row; flex-wrap: wrap; }
  .pp-side-foot .btn { flex: 1 1 auto; }
  .pp-main { padding: 16px max(12px, env(safe-area-inset-right)) 32px max(12px, env(safe-area-inset-left)); }
}