/* BUBB_DESKTOP_RESPONSIVE_V1 · 2026-10-22
   Laptop / desktop / landscape-tablet authority. Keeps the current BUBB DA,
   prevents over-stretching on ultrawide and preserves readable density from
   compact 900px landscape canvases through 4K. */
@media (min-width:900px) and (orientation:landscape), (min-width:1367px){
  :root{
    --bubb-desktop-sidebar:clamp(184px,13.8vw,228px);
    --bubb-desktop-gutter:clamp(22px,2.8vw,52px);
    --bubb-desktop-page-max:1480px;
    --bubb-desktop-home-max:1180px;
    --bubb-desktop-legacy-max:1260px;
  }

  html,body{
    width:100%!important;max-width:100%!important;min-width:0!important;
    overflow-x:hidden!important;background:#fff!important;
  }
  body{
    -webkit-text-size-adjust:100%!important;text-size-adjust:100%!important;
  }

  html body .app{
    display:grid!important;
    grid-template-columns:var(--bubb-desktop-sidebar) minmax(0,1fr)!important;
    width:100%!important;max-width:100%!important;min-width:0!important;min-height:100dvh!important;
    margin:0!important;
  }
  html body .app>.sidebar{
    min-width:var(--bubb-desktop-sidebar)!important;
    width:var(--bubb-desktop-sidebar)!important;
    max-width:var(--bubb-desktop-sidebar)!important;
    overflow-x:hidden!important;
  }
  html body .app>main,
  html body main{
    min-width:0!important;width:100%!important;max-width:100%!important;
    overflow-x:clip!important;
  }

  html body main>.page.active,
  html body .page.active{
    width:100%!important;
    max-width:min(var(--bubb-desktop-page-max),calc(100vw - var(--bubb-desktop-sidebar) - 28px))!important;
    min-width:0!important;
    margin-inline:auto!important;
    padding:clamp(22px,2.4vw,40px) var(--bubb-desktop-gutter) clamp(52px,5vw,84px)!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;box-sizing:border-box!important;
  }

  /* Home remains the approved 2x2 composition, but no longer looks like a 620px phone column. */
  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;
    box-sizing:border-box!important;
    overflow-x:clip!important;background:#fff!important;
    padding:clamp(28px,3.2vw,52px) var(--bubb-desktop-gutter) clamp(60px,5vw,92px)!important;
  }
  html body.bubb-launch-structure-active #bubb-launch-home .bubb-approved-shell{
    width:100%!important;max-width:var(--bubb-desktop-home-max)!important;margin:0 auto!important;
  }
  html body.bubb-launch-structure-active #bubb-launch-legacy .bubb-approved-shell{
    width:100%!important;max-width:var(--bubb-desktop-legacy-max)!important;margin:0 auto!important;
  }
  #bubb-launch-home .bubb-approved-header{
    min-height:48px!important;height:auto!important;
    margin:0 auto 16px!important;padding:0!important;
  }
  #bubb-launch-home .bubb-approved-header>img,
  #bubb-launch-home .bubb-approved-header-logo,
  #bubb-launch-home #bubb-one-home-logo{
    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;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    box-shadow:none!important;transform:none!important;
    clip-path:none!important;-webkit-clip-path:none!important;
    mask-image:none!important;-webkit-mask-image:none!important;
  }
  #bubb-launch-home .bubb-approved-welcome{
    max-width:780px!important;margin:10px auto 24px!important;text-align:center!important;
  }
  #bubb-launch-home .bubb-approved-welcome h1{
    font-size:clamp(34px,3.1vw,46px)!important;line-height:1.08!important;
  }
  #bubb-launch-home .bubb-approved-welcome p{
    font-size:clamp(13px,1.05vw,15px)!important;line-height:1.48!important;
  }
  #bubb-launch-home [data-bubb-home-actions]{
    width:100%!important;max-width:820px!important;margin:0 auto 30px!important;
  }
  #bubb-launch-home .bubb-approved-visuals{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:clamp(28px,3vw,44px) clamp(28px,3.6vw,52px)!important;
    width:100%!important;max-width:1120px!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:12px!important;
    font-size:clamp(22px,1.7vw,30px)!important;line-height:1.12!important;
  }
  #bubb-launch-home .bubb-approved-visuals .bubb-home-grid-tile>p{
    max-width:440px!important;margin-top:7px!important;
    font-size:clamp(12.5px,.9vw,15px)!important;line-height:1.45!important;
  }

  /* Legacy uses desktop density without stretching media or converting to a giant rail. */
  html body.bubb-launch-structure-active #bubb-launch-legacy .bubb-approved-group{
    margin-bottom:clamp(28px,2.5vw,38px)!important;
  }
  html body.bubb-launch-structure-active #bubb-launch-legacy .bubb-approved-grouphead h2{
    font-size:clamp(26px,2vw,34px)!important;line-height:1.12!important;
  }
  html body.bubb-launch-structure-active #bubb-launch-legacy .bubb-approved-group>p{
    max-width:820px!important;font-size:13.5px!important;line-height:1.5!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(4,minmax(0,1fr))!important;
    gap:12px!important;overflow:visible!important;
    scroll-snap-type:none!important;padding:0!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:88px!important;padding:11px 14px!important;gap:13px!important;
  }
  html body.bubb-launch-structure-active #bubb-launch-legacy .bubb-approved-tile{
    min-height:138px!important;padding:13px!important;gap:13px!important;
  }
  html body.bubb-launch-structure-active #bubb-launch-legacy :is(.bubb-approved-wool-frame,.bubb-approved-wool-icon){
    width:78px!important;height:78px!important;min-width:78px!important;min-height:78px!important;flex-basis:78px!important;
  }

  /* Detail pages use useful desktop density while retaining the current visual language. */
  html body.lce-v10-detail main>.page.active>.hero{
    margin:0 0 22px!important;padding:10px 0 16px!important;
  }
  html body.lce-v10-detail main>.page.active>.hero h1{
    font-size:clamp(34px,2.8vw,50px)!important;
  }
  html body.lce-v10-detail main>.page.active>.hero p{
    max-width:820px!important;font-size:14px!important;line-height:1.5!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
  ){
    min-width:0!important;width:100%!important;max-width:100%!important;
    gap:clamp(14px,1.4vw,22px)!important;
  }

  html body.lce-v10-detail #people .lce-rel-grid{
    display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:16px!important;width:100%!important;max-width:100%!important;
  }
  html body.lce-v10-detail #people .lce-rel-person{
    min-width:0!important;max-width:100%!important;overflow:visible!important;
  }
  html body.lce-v10-detail #people .people-complete-photo{
    grid-template-columns:82px minmax(0,1fr)!important;
  }

  /* Family Tree uses available laptop/desktop height while preserving its own pan/zoom engine. */
  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:clamp(520px,calc(100dvh - 150px),980px)!important;
    max-height:calc(100dvh - 72px)!important;
    border-radius:20px!important;overflow:hidden!important;
  }

  /* Profile/Settings and long-form areas stay centered instead of spanning ultrawide canvases. */
  html body.lce-v10-detail #settings{width:100%!important;max-width:1280px!important}
  html body.lce-v10-detail #settings .sp2-shell{
    width:100%!important;max-width:1180px!important;margin-inline:auto!important;
  }
  html body.lce-v10-detail #settings .sp2-nav{
    width:100%!important;max-width:900px!important;margin-inline:auto!important;
  }
  html body.lce-v10-detail #settings .sp2-pane{
    width:100%!important;max-width:1080px!important;margin-inline:auto!important;
  }

  /* Desktop sheets/forms remain usable on 768px-high laptops and do not explode on 4K. */
  html body :is(.pro-modalback,.lce-modalback,.moi-modalback,.lce-rel-modalback,.depth-modalback){
    padding:clamp(18px,3vh,36px) clamp(22px,3vw,48px)!important;
    box-sizing:border-box!important;
  }
  html body :is(.pro-modal,.lce-modal,.moi-modal,.lce-rel-modal,.depth-modal){
    width:min(900px,calc(100vw - 64px))!important;
    max-width:min(900px,calc(100vw - 64px))!important;
    max-height:min(900px,calc(100dvh - 130px))!important;
    border-radius:24px!important;overflow:auto!important;
  }
  html body :is(.lce-memory-create-form-v1,.lce-capsule-create-modal){
    width:min(960px,calc(100vw - 72px))!important;
    max-width:min(960px,calc(100vw - 72px))!important;
    max-height:min(940px,calc(100dvh - 130px))!important;
    border-radius:24px!important;overflow:auto!important;
  }

  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;
  }
}

/* Compact landscape tablet / small laptop. */
@media (min-width:900px) and (max-width:1199px) and (orientation:landscape){
  :root{
    --bubb-desktop-sidebar:176px;
    --bubb-desktop-gutter:clamp(18px,2vw,26px);
    --bubb-desktop-page-max:1060px;
    --bubb-desktop-home-max:860px;
    --bubb-desktop-legacy-max:900px;
  }
  #bubb-launch-home .bubb-approved-visuals{gap:24px 26px!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 #people .lce-rel-grid{
    grid-template-columns:repeat(2,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){
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* Standard laptop / desktop. */
@media (min-width:1200px) and (max-width:1599px){
  html body.lce-v10-detail main>.page.active :is(.moi-grid,.moi-project-grid,.moi-goal-grid,.caps-grid,.capsules-grid,.mem-grid){
    display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

/* Large desktop. */
@media (min-width:1600px){
  :root{
    --bubb-desktop-page-max:1580px;
    --bubb-desktop-home-max:1240px;
    --bubb-desktop-legacy-max:1360px;
  }
  html body.bubb-launch-structure-active #bubb-launch-legacy .bubb-approved-memories{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
  }
  html body.lce-v10-detail #people .lce-rel-grid{
    grid-template-columns:repeat(4,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){
    display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
}

/* 2K / ultrawide / 4K: increase usable content modestly, never full-bleed stretch. */
@media (min-width:2200px){
  :root{
    --bubb-desktop-sidebar:228px;
    --bubb-desktop-page-max:1740px;
    --bubb-desktop-home-max:1280px;
    --bubb-desktop-legacy-max:1480px;
  }
  html body.bubb-launch-structure-active #bubb-launch-legacy .bubb-approved-memories{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
  }
  html body.lce-v10-detail #people .lce-rel-grid{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
  }
}