/* Family Book desktop shell - Phase 1A */
:root{
  --fb-shell-bg:#f3f0e8;
  --fb-shell-panel:#fffdf8;
  --fb-shell-panel-2:#f7f4ec;
  --fb-shell-border:rgba(49,92,67,.16);
  --fb-shell-text:#1f2a22;
  --fb-shell-muted:#738076;
  --fb-shell-accent:#315c43;
  --fb-shell-accent-soft:#e7efe9;
  --fb-shell-shadow:0 8px 30px rgba(35,53,42,.08);
}
html[data-theme="dark"]{
  --fb-shell-bg:#111512;
  --fb-shell-panel:#181e19;
  --fb-shell-panel-2:#202721;
  --fb-shell-border:rgba(207,224,211,.12);
  --fb-shell-text:#eef4ef;
  --fb-shell-muted:#a4afa7;
  --fb-shell-accent:#82b392;
  --fb-shell-accent-soft:#233127;
  --fb-shell-shadow:0 8px 30px rgba(0,0,0,.26);
}

.desktop-left-rail,.desktop-right-rail,.desktop-top-nav{display:none}

@media (min-width:1180px){
  html,body,#app{width:100%;min-height:100%;margin:0}
  body{background:var(--fb-shell-bg)!important;overflow-y:scroll}
  #app>.app{
    width:100%!important;
    max-width:none!important;
    min-height:100vh!important;
    display:grid!important;
    grid-template-columns:minmax(230px,280px) minmax(0,820px) minmax(250px,310px)!important;
    grid-template-rows:68px minmax(calc(100vh - 68px),auto)!important;
    column-gap:20px!important;
    justify-content:space-between!important;
    align-items:start!important;
    padding:0 18px!important;
    box-sizing:border-box!important;
    background:var(--fb-shell-bg)!important;
  }

  #app>.app>.topbar{
    grid-column:1 / -1!important;
    grid-row:1!important;
    position:sticky!important;
    top:0!important;
    z-index:100!important;
    width:calc(100% + 36px)!important;
    max-width:none!important;
    min-height:68px!important;
    margin-left:-18px!important;
    padding:0 18px!important;
    box-sizing:border-box!important;
    border-bottom:1px solid var(--fb-shell-border)!important;
    background:color-mix(in srgb,var(--fb-shell-panel) 95%,transparent)!important;
    backdrop-filter:blur(16px)!important;
    box-shadow:0 1px 0 rgba(0,0,0,.02)!important;
  }
  #app>.app>.topbar .brand-home{min-width:230px;max-width:280px;justify-content:flex-start!important}
  #app>.app>.topbar .brand-tagline{display:none!important}
  #app>.app>.topbar .brand-logo-wrap{max-width:190px!important}
  #app>.app>.topbar .actions{margin-left:auto!important;z-index:3}

  .desktop-top-nav{
    display:grid!important;
    grid-template-columns:repeat(6,64px);
    position:absolute;
    left:50%;top:8px;
    transform:translateX(-50%);
    height:52px;
    align-items:stretch;
    gap:5px;
  }
  .desktop-top-nav button{
    width:64px;
    min-width:0;
    height:52px;
    padding:0;
    border:0;
    border-radius:12px;
    background:transparent;
    color:var(--fb-shell-muted);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:.18s ease;
  }
  .desktop-top-nav button:hover{background:var(--fb-shell-panel-2);color:var(--fb-shell-accent)}
  .desktop-top-nav button.active{background:var(--fb-shell-accent-soft);color:var(--fb-shell-accent)}
  .desktop-top-nav svg{width:23px;height:23px;min-width:23px;min-height:23px}

  .desktop-left-rail,.desktop-right-rail{
    display:block!important;
    grid-row:2!important;
    position:sticky!important;
    top:84px!important;
    max-height:calc(100vh - 100px)!important;
    overflow:auto!important;
    scrollbar-width:thin;
    padding:16px 0 28px!important;
    box-sizing:border-box!important;
  }
  .desktop-left-rail{grid-column:1!important}
  .desktop-right-rail{grid-column:3!important}

  #app>.app>.screen{
    grid-column:2!important;
    grid-row:2!important;
    width:100%!important;
    max-width:820px!important;
    min-width:0!important;
    margin:0 auto!important;
    padding:16px 0 72px!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }
  #app>.app>.bottom{display:none!important}

  .desktop-profile-card{
    width:100%;
    display:flex;
    align-items:center;
    gap:11px;
    border:0;
    border-radius:14px;
    padding:10px;
    background:transparent;
    color:var(--fb-shell-text);
    text-align:left;
    cursor:pointer;
  }
  .desktop-profile-card:hover,.desktop-side-link:hover{background:var(--fb-shell-panel-2)}
  .desktop-profile-avatar{
    width:42px;height:42px;border-radius:50%;overflow:hidden;flex:0 0 42px;
    display:grid;place-items:center;background:var(--fb-shell-accent-soft);color:var(--fb-shell-accent);font-weight:800;
  }
  .desktop-profile-avatar img{width:100%;height:100%;object-fit:cover}
  .desktop-profile-card strong{display:block;color:var(--fb-shell-text);font-size:.93rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .desktop-profile-card small{display:block;color:var(--fb-shell-muted);margin-top:2px}

  .desktop-side-nav{display:grid;gap:4px;margin-top:10px}
  .desktop-side-link{
    border:0;background:transparent;color:var(--fb-shell-text);border-radius:12px;padding:11px 12px;
    display:flex;align-items:center;gap:12px;text-align:left;font-weight:700;cursor:pointer;width:100%;
  }
  .desktop-side-link span:first-child{
    width:34px;height:34px;border-radius:10px;background:var(--fb-shell-accent-soft);color:var(--fb-shell-accent);
    display:grid;place-items:center;flex:0 0 34px;
  }
  .desktop-side-link svg{width:18px;height:18px}
  .desktop-side-divider{height:1px;background:var(--fb-shell-border);margin:14px 8px}
  .desktop-side-caption{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fb-shell-muted);padding:2px 12px 8px;font-weight:800}

  .desktop-widget{
    background:var(--fb-shell-panel);
    border:1px solid var(--fb-shell-border);
    border-radius:16px;
    padding:15px;
    margin-bottom:12px;
    box-shadow:var(--fb-shell-shadow);
    color:var(--fb-shell-text);
  }
  .desktop-widget-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
  .desktop-widget-head h3{margin:0;font-size:1rem}
  .desktop-widget-head button,.desktop-widget-link{
    border:0;background:transparent;color:var(--fb-shell-accent);font-weight:800;font-size:.82rem;cursor:pointer;padding:4px;
  }
  .desktop-widget-list{display:grid;gap:9px}
  .desktop-widget-row{display:flex;gap:10px;align-items:center;min-width:0}
  .desktop-widget-icon{
    width:34px;height:34px;border-radius:10px;background:var(--fb-shell-accent-soft);color:var(--fb-shell-accent);display:grid;place-items:center;flex:0 0 34px;
  }
  .desktop-widget-icon svg{width:17px;height:17px}
  .desktop-widget-row div{min-width:0}
  .desktop-widget-row strong{display:block;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .desktop-widget-row small{display:block;color:var(--fb-shell-muted);font-size:.76rem;margin-top:2px}
  .desktop-widget-empty{color:var(--fb-shell-muted);font-size:.84rem;line-height:1.45;margin:2px 0 0}

  .desktop-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .desktop-stat{background:var(--fb-shell-panel-2);border-radius:12px;padding:10px 8px;text-align:center}
  .desktop-stat strong{display:block;font-size:1.05rem;color:var(--fb-shell-accent)}
  .desktop-stat small{display:block;color:var(--fb-shell-muted);font-size:.69rem;margin-top:2px}

  .desktop-weather-main{display:flex;align-items:center;gap:12px}
  .desktop-weather-main .desktop-weather-icon{width:48px;height:48px;border-radius:14px;background:var(--fb-shell-accent-soft);display:grid;place-items:center;color:var(--fb-shell-accent)}
  .desktop-weather-main .desktop-weather-icon svg{width:25px;height:25px}
  .desktop-weather-copy strong{display:block;font-size:1.25rem}
  .desktop-weather-copy small{color:var(--fb-shell-muted)}
  .desktop-weather-action{margin-top:10px;width:100%;border:0;border-radius:10px;padding:9px 11px;background:var(--fb-shell-accent-soft);color:var(--fb-shell-accent);font-weight:800;cursor:pointer}

  /* Make the current Home feed feel like a centred social column. */
  #app>.app>.screen>section{width:100%;box-sizing:border-box}
  #app>.app>.screen .home-hero,
  #app>.app>.screen .family-wall-panel,
  #app>.app>.screen .home-section,
  #app>.app>.screen .upcoming-section{max-width:100%!important}
}

@media (min-width:1500px){
  #app>.app{
    grid-template-columns:minmax(250px,310px) minmax(700px,900px) minmax(280px,330px)!important;
    column-gap:28px!important;
    padding:0 28px!important;
  }
  #app>.app>.topbar{width:calc(100% + 56px)!important;margin-left:-28px!important;padding-left:28px!important;padding-right:28px!important}
  #app>.app>.screen{max-width:900px!important}
}

@media (min-width:1180px) and (max-width:1320px){
  #app>.app{grid-template-columns:220px minmax(0,1fr) 250px!important;column-gap:14px!important;padding:0 12px!important}
  #app>.app>.topbar{width:calc(100% + 24px)!important;margin-left:-12px!important;padding-left:12px!important;padding-right:12px!important}
  .desktop-top-nav{grid-template-columns:repeat(6,58px);gap:4px}
  .desktop-top-nav button{width:58px}
}

@media (max-width:1179px){
  .desktop-left-rail,.desktop-right-rail,.desktop-top-nav{display:none!important}
}

/* Desktop profile avatar: never expose a broken-image placeholder. */
@media(min-width:1180px){
  .desktop-profile-avatar{position:relative!important}
  .desktop-profile-initials{
    position:absolute;inset:0;
    display:grid;place-items:center;
    font-weight:800;color:var(--fb-shell-accent);
  }
  .desktop-profile-avatar img{
    position:absolute;inset:0;z-index:1;
    width:100%;height:100%;object-fit:cover;
    background:var(--fb-shell-accent-soft);
  }
}