/* Shared site shell: desktop top navigation + mobile drawer */
.site-sidebar{
  position:fixed;
  inset:0 0 auto 0;
  z-index:80;
  width:100%;
  height:56px;
  display:flex;
  align-items:stretch;
  border-right:0;
  border-bottom:1px solid #e6e6e6;
  background:rgba(255,255,255,.96);
  box-shadow:none;
  backdrop-filter:blur(18px);
}
.sidebar-brand{
  height:56px;
  padding:0 22px;
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
  border:0;
  font-weight:650;
  letter-spacing:-.02em;
}
.sidebar-brand-mark{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  flex:0 0 28px;
  border:0;
  border-radius:2px;
  background:#0067b8;
  color:#fff;
  font:700 .68rem/1 var(--mono);
}
.sidebar-brand-text{font-size:.93rem}
.sidebar-scroll{
  min-width:0;
  flex:1;
  padding:0 14px 0 6px;
  display:flex;
  align-items:stretch;
  overflow:visible;
}
.sidebar-group{
  margin:0!important;
  display:flex;
  align-items:stretch;
}
.sidebar-group:nth-child(2){margin-left:auto!important}
.sidebar-group[data-sidebar-sites],
.sidebar-group[data-sidebar-friends]{display:none}
.sidebar-label{display:none}
.sidebar-nav{
  display:flex;
  align-items:stretch;
  gap:0;
}
.sidebar-link{
  min-height:56px;
  height:56px;
  padding:0 13px;
  display:flex;
  align-items:center;
  gap:7px;
  border:0;
  border-radius:0;
  color:#262626;
  font-size:.83rem;
  transition:background .14s ease,color .14s ease;
}
.sidebar-link:hover{background:#f2f2f2;color:#000}
.sidebar-link[aria-current="page"]{
  background:transparent;
  color:#000;
  font-weight:650;
  box-shadow:inset 0 -2px 0 #0067b8;
}
.sidebar-icon{display:none}
.sidebar-link .external{margin-left:2px;color:#777}
.sidebar-footer{display:none}
.page-frame{
  min-width:0;
  min-height:100svh;
  margin-left:0;
  padding-top:56px;
}
.mobile-header,.sidebar-overlay{display:none}

/* Project page */
.project-toolbar{top:56px}
.filters{scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.card-actions{border-top:0!important;padding-top:0!important}
.project-card .project-summary{margin-bottom:9px}
.project-card .project-detail{margin-top:0;color:var(--muted);font-size:.84rem;line-height:1.72}
.repo-name,.feature-repo,.modal-repo,.detail-repo{word-break:break-word}

/* Existing home/site link components */
.site-link-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.site-link-card{position:relative;min-height:180px;padding:24px;border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--ink);transition:transform .16s ease,box-shadow .16s ease}
.site-link-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.08)}
.site-link-type{display:block;margin-bottom:32px;color:var(--subtle);font:650 .66rem/1.3 var(--mono);letter-spacing:.08em}
.site-link-card h3{margin:0 38px 10px 0;font-size:1.18rem;letter-spacing:-.025em}
.site-link-card p{margin:0;color:var(--muted);font-size:.86rem;line-height:1.7}
.site-link-arrow{position:absolute;top:22px;right:22px;color:var(--accent);font-size:1rem}
.friend-link-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

@media (max-width:900px){
  body{overflow-x:hidden}
  .page-frame{margin-left:0;padding-top:56px}
  .site-sidebar{
    inset:56px auto 0 0;
    width:min(86vw,340px);
    height:auto;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    border-right:1px solid #e0e0e0;
    border-bottom:0;
    background:#fff;
    transform:translateX(-105%);
    transition:transform .2s cubic-bezier(.2,.7,.2,1);
    box-shadow:18px 0 48px rgba(0,0,0,.12);
    backdrop-filter:none;
  }
  .site-sidebar.is-open{transform:translateX(0)}
  .site-sidebar>.sidebar-brand{display:none}
  .sidebar-scroll{
    flex:1;
    display:block;
    overflow:auto;
    padding:18px 12px 30px;
  }
  .sidebar-group,.sidebar-group:nth-child(2){
    display:block;
    margin:0!important;
  }
  .sidebar-group+.sidebar-group{margin-top:24px!important}
  .sidebar-group[data-sidebar-sites],
  .sidebar-group[data-sidebar-friends]{display:block}
  .sidebar-label{
    display:block;
    margin:0 10px 8px;
    color:#757575;
    font:600 .65rem/1.4 var(--mono);
    letter-spacing:.07em;
    text-transform:uppercase;
  }
  .sidebar-nav{display:grid;gap:2px}
  .sidebar-link{
    min-height:44px;
    height:auto;
    padding:0 10px;
    border-radius:3px;
  }
  .sidebar-link:hover{background:#f2f2f2}
  .sidebar-link[aria-current="page"]{
    background:#f2f8fd;
    color:#0067b8;
    box-shadow:inset 3px 0 0 #0067b8;
  }
  .sidebar-icon{
    width:24px;
    display:grid;
    place-items:center;
    color:#737373;
    font:650 .68rem/1 var(--mono);
  }
  .sidebar-footer{display:none}
  .sidebar-overlay{
    display:block;
    position:fixed;
    inset:56px 0 0 0;
    z-index:70;
    background:rgba(0,0,0,.28);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .18s ease,visibility .18s ease;
  }
  .sidebar-overlay.is-open{opacity:1;visibility:visible;pointer-events:auto}
  .mobile-header{
    position:fixed;
    inset:0 0 auto 0;
    z-index:90;
    height:56px;
    padding:0 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid #e6e6e6;
    background:rgba(255,255,255,.98);
    backdrop-filter:blur(18px);
  }
  .mobile-brand{display:flex;align-items:center;gap:10px;font-weight:650;letter-spacing:-.02em}
  .mobile-menu-button{
    display:grid!important;
    place-items:center;
    width:38px!important;
    height:38px!important;
    padding:0!important;
    border:0!important;
    border-radius:2px!important;
    background:transparent!important;
    box-shadow:none!important;
    cursor:pointer;
  }
  .mobile-menu-button:hover{background:#f2f2f2!important}
  .menu-lines,.menu-lines span,.menu-lines:before,.menu-lines:after{
    display:block;
    width:19px;
    height:1.5px;
    background:#222;
    border-radius:2px;
    transition:transform .18s ease,opacity .18s ease;
  }
  .menu-lines{position:relative;background:transparent}
  .menu-lines:before,.menu-lines:after{content:"";position:absolute;left:0}
  .menu-lines:before{top:-5px}
  .menu-lines:after{top:5px}
  .mobile-menu-button.is-open .menu-lines span{opacity:0}
  .mobile-menu-button.is-open .menu-lines:before{top:0;transform:rotate(45deg)}
  .mobile-menu-button.is-open .menu-lines:after{top:0;transform:rotate(-45deg)}
  .project-toolbar{top:56px}
  .toolbar-inner{padding:12px 0 14px;display:grid!important;gap:12px!important}
  .search-box{width:100%!important}
  .filters{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:6px!important;overflow:visible!important;padding:0!important}
  .filter{min-width:0!important;padding:9px 7px!important;white-space:normal!important;text-align:center;line-height:1.3}
  .project-card{min-height:0!important;display:flex;flex-direction:column;overflow:hidden}
  .card-actions{position:static!important;left:auto!important;right:auto!important;bottom:auto!important;margin-top:20px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:10px!important}
  .card-actions-left{display:flex!important;flex-wrap:wrap!important;gap:12px!important}
  .project-card .card-tags{margin-top:16px}
  .site-link-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:520px){
  .app-shell{width:min(calc(100% - 32px),var(--shell))}
  .filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-link-grid,.friend-link-grid{grid-template-columns:1fr}
  .site-link-card{min-height:150px;padding:20px}
  .site-link-type{margin-bottom:24px}
}