/* assets/style.css - PPH Mobile Menu (clean, minimal, mobile-first) */
:root{
  --pph-bg:#ffffff;
  --pph-border:#e6e6e6;
  --pph-text:#111111;
  --pph-muted:#6b6b6b;
  --pph-radius:14px;
  --pph-shadow: 0 12px 30px rgba(18,18,18,0.06);
  --pph-gap:12px;
  --pph-accent: #111111;
}

/* Container */
.pph-menu-wrap{
  width:100%;
  max-width:720px;
  margin:0 auto;
  background:var(--pph-bg);
  border-radius:var(--pph-radius);
  box-shadow:var(--pph-shadow);
  overflow:hidden;
  -webkit-tap-highlight-color: transparent;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* header with handle like mobile sheet */
.pph-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  border-bottom:1px solid var(--pph-border);
  position:relative;
}
.pph-handle{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:8px;
  width:38px;
  height:4px;
  background:var(--pph-border);
  border-radius:999px;
}
.pph-title{
  font-weight:600;
  font-size:16px;
  color:var(--pph-text);
  margin:6px 0;
}
.pph-close{
  background:transparent;
  border:0;
  font-size:26px;
  line-height:1;
  padding:6px;
  color:var(--pph-muted);
  opacity:0.9;
}

/* search */
.pph-search{
  padding:10px 14px;
  border-bottom:1px solid var(--pph-border);
}
.pph-search-input{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--pph-border);
  font-size:15px;
  box-sizing:border-box;
  outline:none;
}

/* menu list */
.pph-menu{
  padding:var(--pph-gap);
  max-height:70vh;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.pph-item{
  margin-bottom:6px;
  border-radius:12px;
  overflow:hidden;
}
.pph-row{
  width:100%;
  text-align:left;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  background:transparent;
  border:0;
  cursor:pointer;
  font-size:15px;
  color:var(--pph-text);
  transition: background .18s ease, transform .12s ease;
}
.pph-row:active{
  transform:scale(.998);
}
.pph-name{flex:1; font-weight:500;}
.pph-meta{color:var(--pph-muted); font-size:13px; margin-left:8px;}

/* arrow */
.pph-arrow{
  display:inline-block;
  transform:rotate(90deg);
  transition: transform .28s cubic-bezier(.2,.9,.3,1);
  font-size:20px;
  color:var(--pph-muted);
}

/* children - iPhone style smooth collapse */
.pph-children{
  padding-left:10px;
  overflow:hidden;
  will-change:height, opacity;
  border-left:1px solid transparent;
  margin-top:6px;
}

/* arrow when open */
.pph-row[aria-expanded="true"] .pph-arrow{
  transform:rotate(-90deg);
}

/* empty */
.pph-empty{padding:16px; color:var(--pph-muted); text-align:center;}

/* responsive tweaks */
@media (max-width:600px){
  .pph-menu-wrap{ border-radius:12px; }
  .pph-title{ font-size:15px; }
  .pph-row{ padding:14px; font-size:16px; }
}