/* Compasso home density + mobile CTA contract.
   Scope: authenticated teacher home, product mark and mobile dock/modal actions only. */

.teacher-brand-group .td-brand{
  width:34px!important;
  min-width:34px!important;
  height:34px!important;
  min-height:34px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
}
.teacher-brand-group .td-brand img{
  width:30px!important;
  height:30px!important;
  max-width:30px!important;
  object-fit:contain!important;
  transform:none!important;
}
.teacher-brand-group{
  gap:10px!important;
}
.teacher-product-name{
  margin-left:0!important;
}

/* Desktop: reduce vertical density without scaling the interface. */
@media(min-width:901px){
  .ped-home.ped-home-reference{
    width:min(calc(100% - 48px),1560px)!important;
    margin:0 auto!important;
    padding:0 0 28px!important;
  }
  .ped-home-reference .ped-home-hero{
    min-height:0!important;
    padding:42px 0 20px!important;
    overflow:hidden!important;
  }
  .ped-home-reference .ped-home-hero>header{
    max-width:760px!important;
  }
  .ped-home-reference .ped-home-kicker{
    margin-bottom:8px!important;
  }
  .ped-home-reference .ped-home-hero h1{
    margin:0 0 2px!important;
    font-size:clamp(34px,3.1vw,48px)!important;
    line-height:1!important;
  }
  .ped-home-reference .ped-home-hero h2{
    margin:0!important;
    font-size:clamp(32px,2.8vw,44px)!important;
    line-height:1.06!important;
  }
  .ped-home-reference .ped-home-hero header>p:last-child{
    margin-top:8px!important;
  }
  .ped-home-reference .ped-home-ambient{
    inset:0 0 auto auto!important;
    width:min(34%,470px)!important;
    height:210px!important;
    overflow:visible!important;
  }
  .ped-home-reference .ped-home-ambient-art{
    width:100%!important;
    height:100%!important;
    max-height:210px!important;
    object-fit:contain!important;
    overflow:visible!important;
  }
  .ped-home-reference .ped-home-intent{
    min-height:60px!important;
    height:60px!important;
    margin-top:18px!important;
    padding:6px 8px 6px 18px!important;
    border-radius:14px!important;
  }
  .ped-home-reference .ped-home-intent input{
    min-height:46px!important;
    height:46px!important;
    padding:0 10px!important;
  }
  .ped-home-reference .ped-home-intent .td-primary{
    width:154px!important;
    min-width:154px!important;
    min-height:48px!important;
    height:48px!important;
    padding:0 18px!important;
  }
  .ped-home-reference .ped-home-next-section{
    margin-top:22px!important;
  }
  .ped-home-reference .ped-home-section-label{
    margin-bottom:8px!important;
  }
  .ped-home-reference .ped-home-next{
    min-height:78px!important;
    padding:10px 14px!important;
    border-radius:13px!important;
  }
  .ped-home-reference .ped-next-icon{
    width:42px!important;
    height:42px!important;
    flex:0 0 42px!important;
  }
  .ped-home-reference .ped-home-next>div p{
    margin-top:3px!important;
  }
  .ped-home-reference .ped-home-next>.td-primary{
    min-height:44px!important;
    height:44px!important;
    padding:0 18px!important;
  }
  .ped-home-reference .ped-home-access{
    margin-top:24px!important;
  }
  .ped-home-reference .ped-access-heading{
    margin-bottom:10px!important;
  }
  .ped-home-reference .ped-home-actions{
    gap:12px!important;
  }
  .ped-home-reference .ped-access-card{
    min-height:132px!important;
    padding:14px 16px!important;
    gap:7px!important;
  }
  .ped-home-reference .ped-access-icon{
    width:40px!important;
    height:40px!important;
    flex:0 0 40px!important;
  }
  .ped-home-reference .ped-access-card strong{
    margin-top:2px!important;
  }
}

/* Compact laptops: keep the complete hero visible and bring the access cards into the first fold. */
@media(min-width:901px) and (max-height:820px){
  .ped-home-reference .ped-home-hero{padding-top:26px!important;padding-bottom:14px!important}
  .ped-home-reference .ped-home-ambient{height:180px!important}
  .ped-home-reference .ped-home-ambient-art{max-height:180px!important}
  .ped-home-reference .ped-home-intent{margin-top:12px!important}
  .ped-home-reference .ped-home-next-section{margin-top:16px!important}
  .ped-home-reference .ped-home-access{margin-top:18px!important}
  .ped-home-reference .ped-access-card{min-height:118px!important;padding:12px 14px!important}
}

/* Mobile dock: prohibit full-tile CTA paint. Only the center plus medallion may carry a filled surface. */
@media(max-width:720px){
  html body .mobile-routine-nav{
    z-index:80!important;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom))!important;
    background:#fff!important;
  }
  html body .mobile-routine-nav>button,
  html body .mobile-routine-nav>button:hover,
  html body .mobile-routine-nav>button:focus,
  html body .mobile-routine-nav>button:active,
  html body .mobile-routine-nav>button.active,
  html body .mobile-routine-nav>button.mobile-routine-create{
    appearance:none!important;
    -webkit-appearance:none!important;
    width:auto!important;
    min-width:0!important;
    min-height:50px!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    background-image:none!important;
    box-shadow:none!important;
    transform:none!important;
    color:#344054!important;
  }
  html body .mobile-routine-nav>button.active{color:#0f6f67!important}
  html body .mobile-routine-nav>button.mobile-routine-create{
    transform:translateY(-10px)!important;
  }
  html body .mobile-routine-nav .mobile-routine-plus{
    width:48px!important;
    height:48px!important;
    border-radius:50%!important;
    background:#0f6f67!important;
    color:#fff!important;
    box-shadow:0 7px 18px rgba(15,111,103,.24)!important;
  }
  html body .mobile-routine-nav>button>span:last-child{
    background:transparent!important;
    color:inherit!important;
  }

  /* A creation dialog owns the viewport. The dock must not compete with its actions. */
  body:has(.teacher-create-layer) .mobile-routine-nav,
  body:has(.ped-studio-layer) .mobile-routine-nav{
    visibility:hidden!important;
    pointer-events:none!important;
  }

  .teacher-create-layer{
    z-index:1200!important;
    padding:10px!important;
    align-items:center!important;
  }
  .teacher-create-dialog{
    width:100%!important;
    max-height:calc(100dvh - 20px)!important;
    border-radius:18px!important;
  }
  .teacher-create-dialog>header{
    padding:20px 18px 15px!important;
  }
  .teacher-create-form{
    padding:18px!important;
  }
  .teacher-create-dialog>footer{
    position:sticky!important;
    bottom:0!important;
    z-index:2!important;
    padding:12px 18px calc(12px + env(safe-area-inset-bottom))!important;
    background:#fff!important;
  }
  .teacher-create-dialog>footer .teacher-x-secondary,
  .teacher-create-dialog>footer .teacher-x-primary{
    min-height:46px!important;
    height:46px!important;
    padding:0 18px!important;
    border-radius:10px!important;
    box-shadow:none!important;
    transform:none!important;
  }
  .teacher-create-dialog>footer .teacher-x-secondary{
    background:#fff!important;
    color:#142622!important;
    border:1px solid #c7d4ce!important;
  }
  .teacher-create-dialog>footer .teacher-x-primary{
    background:#0f6f67!important;
    color:#fff!important;
    border:1px solid #0f6f67!important;
  }
}


/* Mobile navigation hard guard moved to static CSS to avoid route-bundle inflation. */
/* Canonical mobile navigation contract.
   This guard intentionally outranks generic mobile button/CTA rules.
   Navigation tiles are navigation, never filled CTAs. */
@media(max-width:720px){
  body.compasso-product-focus .mobile-routine-nav>button,
  body.compasso-product-focus .mobile-routine-nav>button:hover,
  body.compasso-product-focus .mobile-routine-nav>button:focus,
  body.compasso-product-focus .mobile-routine-nav>button:focus-visible,
  body.compasso-product-focus .mobile-routine-nav>button:active,
  body.compasso-product-focus .mobile-routine-nav>button.active{
    -webkit-appearance:none!important;
    appearance:none!important;
    width:auto!important;
    min-width:0!important;
    height:auto!important;
    min-height:50px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    outline-offset:2px!important;
    background:transparent!important;
    background-color:transparent!important;
    background-image:none!important;
    box-shadow:none!important;
    transform:none!important;
  }
  body.compasso-product-focus .mobile-routine-nav>button.active{
    color:#0f6f67!important;
  }
  body.compasso-product-focus .mobile-routine-nav>button.mobile-routine-create{
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    transform:translateY(-10px)!important;
  }
  body.compasso-product-focus .mobile-routine-nav .mobile-routine-plus{
    width:48px!important;
    height:48px!important;
    border-radius:50%!important;
    background:#0f6f67!important;
    color:#fff!important;
    box-shadow:0 7px 18px rgba(15,111,103,.24)!important;
  }
  body.compasso-product-focus:has(.teacher-create-layer) .mobile-routine-nav,
  body.compasso-product-focus:has(.ped-studio-layer) .mobile-routine-nav,
  body.compasso-product-focus:has(.mobile-routine-sheet-layer) .teacher-create-layer~.mobile-routine-nav{
    visibility:hidden!important;
    pointer-events:none!important;
  }
}


/* V1.1 — mobile CTA matrix.
   No mobile navigation/list option may inherit primary CTA paint.
   Filled background is reserved for explicit primary actions only. */
@media(max-width:720px){
  body.compasso-product-focus .mobile-routine-sheet{
    background:#fff!important;
    border-radius:18px 18px 0 0!important;
  }

  body.compasso-product-focus .mobile-routine-sheet>header>button{
    display:grid!important;
    place-items:center!important;
    width:36px!important;
    min-width:36px!important;
    height:36px!important;
    min-height:36px!important;
    padding:0!important;
    border:1px solid #d7e0e8!important;
    border-radius:9px!important;
    background:#fff!important;
    background-image:none!important;
    color:#475569!important;
    box-shadow:none!important;
    transform:none!important;
  }

  body.compasso-product-focus .mobile-routine-sheet>div{
    display:grid!important;
    gap:8px!important;
  }

  body.compasso-product-focus .mobile-routine-sheet>div>button,
  body.compasso-product-focus .mobile-routine-sheet>div>button:hover,
  body.compasso-product-focus .mobile-routine-sheet>div>button:focus,
  body.compasso-product-focus .mobile-routine-sheet>div>button:active{
    display:grid!important;
    grid-template-columns:1fr!important;
    align-content:center!important;
    width:100%!important;
    min-height:64px!important;
    height:auto!important;
    padding:11px 13px!important;
    border:1px solid #dce4ea!important;
    border-radius:11px!important;
    background:#fff!important;
    background-color:#fff!important;
    background-image:none!important;
    color:#10263f!important;
    text-align:left!important;
    box-shadow:none!important;
    transform:none!important;
    filter:none!important;
  }

  body.compasso-product-focus .mobile-routine-sheet>div>button strong{
    color:#10263f!important;
    font-size:14px!important;
    line-height:1.25!important;
    font-weight:750!important;
  }

  body.compasso-product-focus .mobile-routine-sheet>div>button span{
    margin-top:3px!important;
    color:#64748b!important;
    font-size:11.5px!important;
    line-height:1.35!important;
    font-weight:500!important;
  }

  /* canonical primary/secondary button matrix for teacher mobile */
  body.compasso-product-focus .teacher-x-primary,
  body.compasso-product-focus .td-primary,
  body.compasso-product-focus .teacher-create-button{
    background:#0f6f67!important;
    background-image:none!important;
    border-color:#0f6f67!important;
    color:#fff!important;
    box-shadow:none!important;
    transform:none!important;
  }

  body.compasso-product-focus .teacher-x-secondary,
  body.compasso-product-focus .td-secondary{
    background:#fff!important;
    background-image:none!important;
    border-color:#cbd7d2!important;
    color:#17302b!important;
    box-shadow:none!important;
    transform:none!important;
  }

  /* non-primary card/list/navigation actions must never be painted as filled CTAs */
  body.compasso-product-focus .ped-access-card,
  body.compasso-product-focus .teacher-module-subnav button,
  body.compasso-product-focus .teacher-primary-nav button,
  body.compasso-product-focus .teacher-unified-account-menu button,
  body.compasso-product-focus .teacher-x-link{
    background-image:none!important;
    box-shadow:none!important;
    transform:none!important;
  }
}