/* BUBB_TABLET_PORTRAIT_V1 · 2026-10-22
   Dedicated portrait tablet authority. Phones below 600px keep mobile-production-v5.css;
   desktop remains >=1367px or landscape. */
@media (min-width:600px) and (max-width:1366px) and (orientation:portrait){
  :root{
    --bubb-tablet-gutter:clamp(22px,3.6vw,46px);
    --bubb-tablet-topbar-h:calc(72px + env(safe-area-inset-top,0px));
    --bubb-tablet-content-max:1180px;
  }

  html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important}
  body{-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important;background:#fff!important}
  html body .app{display:block!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important;max-width:100%!important;min-height:100dvh!important;margin:0!important;padding:0!important}
  html body.bubb-launch-structure-active .app>.sidebar,
  html body.bubb-launch-structure-active #bubb-launch-nav.bubb-launch-mobile{
    display:none!important;visibility:hidden!important;pointer-events:none!important;
    width:0!important;height:0!important;min-width:0!important;min-height:0!important;
    margin:0!important;padding:0!important;overflow:hidden!important;
  }

  /* Tablet chrome: same approved 42px BUBB logo as phone/Home. */
  html:not(.lce-bubb-eco-open) body.bubb-launch-structure-active .pro-topbar{
    position:fixed!important;inset:0 0 auto 0!important;z-index:2147481000!important;
    display:grid!important;grid-template-columns:48px minmax(0,1fr) 48px!important;
    align-items:center!important;column-gap:12px!important;
    width:100%!important;height:var(--bubb-tablet-topbar-h)!important;min-height:var(--bubb-tablet-topbar-h)!important;
    padding:calc(10px + env(safe-area-inset-top,0px)) max(18px,env(safe-area-inset-right,0px)) 8px max(18px,env(safe-area-inset-left,0px))!important;
    box-sizing:border-box!important;background:#fff!important;background-image:none!important;
    border:0!important;box-shadow:none!important;filter:none!important;-webkit-filter:none!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transform:none!important;
  }
  html:not(.lce-bubb-eco-open) body.bubb-launch-structure-active .pro-topbar-left{grid-column:1!important;justify-self:start!important;min-width:48px!important;max-width:48px!important}
  html:not(.lce-bubb-eco-open) body.bubb-launch-structure-active .pro-topbar-center{
    grid-column:2!important;display:grid!important;place-items:center!important;
    visibility:visible!important;opacity:1!important;overflow:visible!important;
    clip-path:none!important;-webkit-clip-path:none!important;contain:none!important;isolation:auto!important;
  }
  html:not(.lce-bubb-eco-open) body.bubb-launch-structure-active .pro-topbar-right{grid-column:3!important;justify-self:end!important;min-width:48px!important;max-width:48px!important}
  html:not(.lce-bubb-eco-open) body.bubb-launch-structure-active .pro-topbar .pro-topbar-logo{
    display:block!important;width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;
    max-width:42px!important;max-height:42px!important;object-fit:contain!important;object-position:center!important;
    filter:none!important;-webkit-filter:none!important;box-shadow:none!important;transform:none!important;
    mask-image:none!important;-webkit-mask-image:none!important;clip-path:none!important;-webkit-clip-path:none!important;
    opacity:1!important;overflow:visible!important;contain:none!important;isolation:auto!important;
  }
  html body.bubb-launch-home-mode .pro-topbar-left,
  html body.bubb-launch-home-mode .pro-topbar-right,
  html body.bubb-launch-structure-active:has(#bubb-launch-legacy.active) .pro-topbar-left,
  html body.bubb-launch-structure-active:has(#bubb-launch-legacy.active) .pro-topbar-right{
    visibility:hidden!important;pointer-events:none!important;
  }
  html body.bubb-launch-home-mode #bubb-launch-home .bubb-approved-header>img,
  html body.bubb-launch-structure-active:has(#bubb-launch-legacy.active) #bubb-launch-legacy [data-bubb-original-logo-slot]{
    visibility:hidden!important;opacity:0!important;pointer-events:none!important;
  }

  html body .app>main,
  html body main{
    width:100%!important;max-width:100%!important;min-width:0!important;
    margin:0!important;padding-top:var(--bubb-tablet-topbar-h)!important;overflow-x:clip!important;
  }
  html body .page,
  html body main>.page.active{
    width:100%!important;max-width:var(--bubb-tablet-content-max)!important;min-width:0!important;
    margin:0 auto!important;padding:clamp(18px,2.6vw,30px) var(--bubb-tablet-gutter) calc(68px + env(safe-area-inset-bottom,0px))!important;
    box-sizing:border-box!important;overflow-x:clip!important;background:#fff!important;
  }
  html body main>.page.active :is(img,picture,video,canvas,iframe,svg){max-width:100%!important}
  html body main>.page.active :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select){
    max-width:100%!important;font-size:16px!important;box-sizing:border-box!important;
  }

  /* Current Home + Legacy launcher use the tablet width instead of phone/desktop compromises. */
  html body.bubb-launch-structure-active #bubb-launch-home,
  html body.bubb-launch-structure-active #bubb-launch-legacy{
    width:100%!important;max-width:none!important;
    padding:18px var(--bubb-tablet-gutter) calc(72px + env(safe-area-inset-bottom,0px))!important;
    box-sizing:border-box!important;background:#fff!important;overflow-x:clip!important;
  }
  html body.bubb-launch-structure-active #bubb-launch-home .bubb-approved-shell{
    width:100%!important;max-width:1080px!important;margin:0 auto!important;
  }
  html body.bubb-launch-structure-active #bubb-launch-legacy .bubb-approved-shell{
    width:100%!important;max-width:980px!important;margin:0 auto!important;
  }
  #bubb-launch-home .bubb-approved-header,
  #bubb-launch-legacy .bubb-approved-inside-header{
    min-height:48px!important;height:48px!important;margin:0 0 12px!important;padding:0!important;
  }
  #bubb-launch-home .bubb-approved-welcome{max-width:760px!important;margin:12px auto 18px!important;text-align:center!important}
  #bubb-launch-home .bubb-approved-welcome h1{font-size:clamp(32px,4.4vw,44px)!important}
  #bubb-launch-home .bubb-approved-welcome p{font-size:14px!important}

  #bubb-launch-home .bubb-approved-visuals{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    column-gap:clamp(20px,3vw,34px)!important;row-gap:clamp(26px,3vw,38px)!important;
    width:100%!important;max-width:1040px!important;margin:0 auto!important;align-items:start!important;
  }
  #bubb-launch-home .bubb-approved-visuals>.bubb-visual-section{min-width:0!important;max-width:none!important;margin:0!important;padding:0!important}
  #bubb-launch-home .bubb-approved-visuals .bubb-original-artwork{width:100%!important;max-width:100%!important;aspect-ratio:1!important}
  #bubb-launch-home .bubb-approved-visuals .bubb-visual-section h2{
    margin-top:11px!important;font-size:clamp(20px,2.5vw,28px)!important;line-height:1.13!important;
  }
  #bubb-launch-home .bubb-approved-visuals .bubb-home-grid-tile>p{
    max-width:360px!important;margin-top:7px!important;font-size:clamp(12px,1.35vw,15px)!important;line-height:1.4!important;
  }
  #bubb-launch-home [data-bubb-home-actions]{
    width:100%!important;max-width:760px!important;margin:0 auto 28px!important;
  }

  /* Legacy: more breathing room, more useful media density, no phone-only horizontal rail. */
  html body.bubb-launch-structure-active #bubb-launch-legacy .bubb-approved-group{margin-bottom:32px!important}
  html body.bubb-launch-structure-active #bubb-launch-legacy .bubb-approved-grouphead h2{
    font-size:clamp(25px,3vw,32px)!important;
  }
  html body.bubb-launch-structure-active #bubb-launch-legacy .bubb-approved-group>p{font-size:13.5px!important;max-width:760px!important}
  html body.bubb-launch-structure-active #bubb-launch-legacy .bubb-approved-memories{
    display:grid!important;grid-auto-flow:row!important;grid-auto-columns:auto!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;
    overflow:visible!important;padding:0!important;scroll-snap-type:none!important;
  }
  html body.bubb-launch-structure-active #bubb-launch-legacy .bubb-approved-two{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important;
  }
  html body.bubb-launch-structure-active #bubb-launch-legacy .bubb-approved-row{
    min-height:84px!important;padding:10px 12px!important;gap:12px!important;
  }
  html body.bubb-launch-structure-active #bubb-launch-legacy .bubb-approved-tile{
    min-height:132px!important;padding:12px!important;gap:12px!important;
  }
  html body.bubb-launch-structure-active #bubb-launch-legacy .bubb-approved-wool-frame,
  html body.bubb-launch-structure-active #bubb-launch-legacy .bubb-approved-wool-icon{
    width:74px!important;height:74px!important;min-width:74px!important;min-height:74px!important;flex-basis:74px!important;
  }

  /* Detail pages: tablet density without desktop sidebar and without phone-only single columns. */
  html body.lce-v10-detail main>.page.active>.hero{margin:0 0 18px!important;padding:8px 0 14px!important}
  html body.lce-v10-detail main>.page.active>.hero h1{font-size:clamp(34px,4.5vw,48px)!important}
  html body.lce-v10-detail main>.page.active>.hero p{font-size:14px!important;line-height:1.5!important;max-width:760px!important}
  html body.lce-v10-detail main>.page.active :is(
    .grid,.split,.home-cards,.quick,.map-layout,.lce-rel-form,.people-final-stats,.people-final-tools,
    .sp2-grid,.sp2-profile-grid,.moi-grid,.moi-project-grid,.moi-goal-grid,.legacy-grid-v2,
    .journal-prompt-grid-v3,.caps-grid,.capsules-grid,.caps-list,.mem-grid
  ){
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:14px!important;width:100%!important;max-width:100%!important;min-width:0!important;
  }

  html body.lce-v10-detail #people .lce-rel-grid{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:14px!important;width:100%!important;max-width:100%!important;
  }
  html body.lce-v10-detail #people .lce-rel-person{min-width:0!important;overflow:visible!important}
  html body.lce-v10-detail #people .people-complete-photo{grid-template-columns:76px minmax(0,1fr)!important}
  html body.lce-v10-detail #people .lce-rel-person-actions{gap:8px!important}
  html body.lce-v10-detail #people .lce-rel-person-actions button{min-height:42px!important;font-size:12px!important}

  /* Family Tree gets the complete portrait tablet canvas; its own pan/zoom remains authoritative. */
  html body.bubb-launch-family-mode #people [data-lce-people-view="tree"],
  html body.bubb-launch-family-mode #people .lce-tree-shell,
  html body.bubb-launch-family-mode #people .lce-tree-board{
    width:100%!important;max-width:100%!important;min-width:0!important;
  }
  html body.bubb-launch-family-mode #people .lce-tree-shell{
    min-height:calc(100dvh - var(--bubb-tablet-topbar-h) - 84px)!important;
    max-height:calc(100dvh - var(--bubb-tablet-topbar-h) - 28px)!important;
    border-radius:20px!important;overflow:hidden!important;
  }

  /* Profile/Settings stays a stacked settings experience, but panes use tablet width. */
  html body.lce-v10-detail #settings{max-width:1050px!important}
  html body.lce-v10-detail #settings .sp2-shell{width:100%!important;max-width:980px!important;margin:0 auto!important}
  html body.lce-v10-detail #settings .sp2-nav{width:100%!important;max-width:760px!important;margin-inline:auto!important}
  html body.lce-v10-detail #settings .sp2-pane{width:100%!important;max-width:920px!important;margin-inline:auto!important}

  /* Modal/forms: centered tablet sheets with room for keyboard + safe areas. */
  html body :is(.pro-modalback,.lce-modalback,.moi-modalback,.lce-rel-modalback,.depth-modalback){
    padding:max(24px,env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px))
      max(24px,env(safe-area-inset-bottom,0px)) max(24px,env(safe-area-inset-left,0px))!important;
    box-sizing:border-box!important;
  }
  html body :is(.pro-modal,.lce-modal,.moi-modal,.lce-rel-modal,.depth-modal){
    width:min(820px,calc(100vw - 48px))!important;max-width:min(820px,calc(100vw - 48px))!important;
    max-height:calc(100dvh - 48px)!important;border-radius:24px!important;overflow:auto!important;
  }
  html body .lce-memory-create-form-v1,
  html body .lce-capsule-create-modal{
    width:min(860px,calc(100vw - 48px))!important;max-width:min(860px,calc(100vw - 48px))!important;
    height:auto!important;max-height:calc(100dvh - 48px)!important;border-radius:24px!important;
  }

  /* Never let historic desktop widths escape a portrait tablet. */
  html body main>.page.active :is(
    .card,.panel,.stat,.event,.place,.lce-entry,.lce-rel-person,.caps-card-v2,.legacy-card-v2,
    .journal-card-v2,[data-memory],[data-person],table,form
  ){
    min-width:0!important;max-width:100%!important;box-sizing:border-box!important;
  }
}

@media (min-width:600px) and (max-width:899px) and (orientation:portrait){
  :root{--bubb-tablet-gutter:clamp(18px,3vw,28px)}
  #bubb-launch-home .bubb-approved-visuals{column-gap:16px!important;row-gap:24px!important}
  #bubb-launch-home .bubb-approved-visuals .bubb-visual-section h2{font-size:clamp(18px,2.7vw,23px)!important}
  html body.bubb-launch-structure-active #bubb-launch-legacy .bubb-approved-memories{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  html body.lce-v10-detail main>.page.active :is(.moi-grid,.moi-project-grid,.moi-goal-grid,.caps-grid,.capsules-grid,.mem-grid){
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (min-width:1000px) and (max-width:1366px) and (orientation:portrait){
  #bubb-launch-home .bubb-approved-visuals{max-width:1100px!important;column-gap:34px!important;row-gap:40px!important}
  html body.bubb-launch-structure-active #bubb-launch-legacy .bubb-approved-memories{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  html body.lce-v10-detail #people .lce-rel-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  html body.lce-v10-detail main>.page.active :is(.moi-grid,.moi-project-grid,.moi-goal-grid,.caps-grid,.capsules-grid,.mem-grid){
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}