/* Pixel Pet Studio v2.0.0-alpha.24.27.0 — shared UI polish */

/* ---------- Field Guide navigation ---------- */
.pps-field-guide-nav-v2427{
  position:sticky;
  top:0;
  z-index:3;
  display:flex;
  align-items:center;
  gap:8px;
  min-height:54px;
  padding:9px 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(6,22,31,.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.pps-field-guide-tab-v2427{
  min-height:36px;
  padding:7px 12px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  background:rgba(255,255,255,.035);
  color:#b9d6ca;
  font:inherit;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
}
.pps-field-guide-tab-v2427:hover{border-color:rgba(119,239,185,.42);color:#effff8}
.pps-field-guide-tab-v2427.is-active{
  border-color:rgba(119,239,185,.48);
  background:rgba(52,211,153,.15);
  color:#dfffee;
}
.pps-field-guide-tab-v2427:focus-visible,
.pps-field-guide-search-v2427 input:focus-visible{
  outline:3px solid rgba(119,239,185,.72);
  outline-offset:2px;
}
.pps-field-guide-search-v2427{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
  color:#91ad9f;
  font-size:12px;
  font-weight:750;
}
.pps-field-guide-search-v2427[hidden]{display:none!important}
.pps-field-guide-search-v2427 input{
  width:min(220px,30vw);
  min-height:36px;
  padding:7px 11px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:11px;
  background:rgba(2,13,20,.78);
  color:#effff8;
  font:inherit;
  font-size:16px;
}
.pps-field-guide-scroll-v2426{scrollbar-gutter:stable}
.pps-guide-badge-v2427{
  display:inline-grid;
  place-items:center;
  min-width:40px;
  padding:2px 6px;
  margin-left:3px;
  border-radius:999px;
  background:rgba(119,239,185,.13);
  color:#aef7d4;
  font-size:10px;
  font-weight:900;
  font-variant-numeric:tabular-nums;
}

/* ---------- Desktop readability / laptop-width resilience ---------- */
@media (min-width:901px){
  .topbar-actions{
    min-width:0;
    max-width:min(100%,900px);
    overflow-x:auto;
    scrollbar-width:none;
    padding:2px 1px 4px;
  }
  .topbar-actions::-webkit-scrollbar{display:none}
  .topbar-actions>.chip,
  .topbar-actions>.primary,
  .topbar-actions>.auth-area{flex:0 0 auto}
  #inspector.panel-inspector:not(.is-floating) .panel-body{
    max-height:min(52vh,620px);
    overflow:auto;
    scrollbar-gutter:stable;
  }
  #inspector.panel-inspector:not(.is-floating) .panel-header{
    position:sticky;
    top:0;
    z-index:2;
  }
}
@media (min-width:901px) and (max-width:1240px){
  .topbar{gap:.5rem}
  .topbar-actions{gap:.3rem}
  .topbar-actions .chip{padding-inline:.65rem}
  .auth-area{margin-left:.15rem;padding-left:.25rem}
  #authUser{display:none}
  .version-pill{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* Shared inspector cards become easier to scan on both shells. */
.pps-goal-card{
  transition:border-color 140ms ease,background 140ms ease;
}
.pps-goal-card:hover{border-color:rgba(119,239,185,.26)}
.pps-fold>summary{
  min-height:38px;
  display:flex;
  align-items:center;
  cursor:pointer;
  border-radius:10px;
}
.pps-fold>summary:focus-visible{
  outline:2px solid rgba(119,239,185,.82);
  outline-offset:2px;
}
.pps-info-pair{
  gap:12px;
}
.pps-info-pair>b{
  text-align:right;
  overflow-wrap:anywhere;
}

/* ---------- Mobile menu grouping + guide progress ---------- */
.m-menu-group-label-v2427{
  grid-column:1/-1;
  margin:8px 2px -1px;
  color:#86a99d;
  font-size:10px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.m-menu-group-label-v2427:first-child{margin-top:0}
#mBtnFieldGuide{position:relative}
.m-menu-badge-v2427{
  position:absolute;
  top:9px;
  right:9px;
  min-width:25px;
  height:25px;
  display:grid;
  place-items:center;
  padding:0 6px;
  border:1px solid rgba(99,237,172,.35);
  border-radius:999px;
  background:rgba(32,121,83,.34);
  color:#caffdf;
  font-size:10px;
  font-weight:900;
}
body.m-shell .pps-fold>summary{min-height:44px}
body.m-shell .pps-info-pair{padding-block:7px}
body.m-shell .pps-goal-card{border-radius:16px}

/* Keep modal navigation reachable above the mobile browser/dock area. */
body.m-shell .pps-field-guide-card-v2426{
  max-height:calc(var(--m-vv-height,100dvh) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 16px);
}
body.m-shell .pps-field-guide-scroll-v2426{
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

@media(max-width:620px){
  .pps-field-guide-nav-v2427{
    padding:8px 12px;
    flex-wrap:wrap;
  }
  .pps-field-guide-tab-v2427{
    flex:1 1 0;
    min-width:0;
    padding-inline:8px;
  }
  .pps-field-guide-search-v2427{
    width:100%;
    margin-left:0;
  }
  .pps-field-guide-search-v2427 span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .pps-field-guide-search-v2427 input{width:100%}
  .pps-guide-badge-v2427{display:none}
}
@media (prefers-reduced-motion:reduce){
  .pps-goal-card{transition:none}
}