/* ============================================================
   layout.css — app shell: sidebar, topbar, page container, grids.
   Shell markup is injected by js/shell.js.
   ============================================================ */

.app-shell { display: flex; min-height: 100vh; min-height: 100dvh; background: var(--bg); }

/* ---------- Sidebar ---------- */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-right: 1px solid var(--hair);
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar__logo { display: flex; align-items: center; gap: 10px; padding: 22px 20px 20px; }
.sidebar__logo img { height: 25px; width: auto; }
.sidebar__logo button:hover { opacity: .75; }
.sidebar__close { display: none; margin-left: auto; color: var(--faint); font-size: 13px; }
.sidebar__cta { padding: 0 14px 16px; }
.sidebar__group { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; color: var(--faint); padding: 6px 22px 8px; }
.sidebar__nav { display: flex; flex-direction: column; gap: 3px; padding: 0 12px; }
.sidebar__foot { margin-top: auto; padding: 14px; }

.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; border-radius: var(--r-md);
  font-size: 13.5px; font-weight: 500; color: var(--body);
  text-align: left; transition: background .12s;
}
.nav-item:hover { background: var(--bg); }
.nav-item .ico { width: 17px; text-align: center; flex-shrink: 0; }
.nav-item.is-active {
  background: var(--grad); color: #fff; font-weight: 700;
  box-shadow: 0 8px 18px -10px rgba(91, 33, 182, .65);
}

.credit-card {
  border: 1px solid #E7E3F8; border-radius: 16px; padding: 16px;
  background: linear-gradient(180deg, #F7F3FF, #FFFFFF);
}
.credit-card__meter { height: 5px; border-radius: 3px; background: #EAE6F7; overflow: hidden; margin-bottom: 13px; }
.credit-card__fill { height: 100%; background: var(--grad); border-radius: 3px; transition: width .3s; }

.who { display: flex; align-items: center; gap: 11px; padding: 14px 6px 4px; border-top: 1px solid var(--rule); margin-top: 14px; }
.who__mail { font-size: 11px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Topbar ---------- */
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 24px; border-bottom: 1px solid var(--hair);
  position: sticky; top: 0; z-index: 20;
  background: rgba(247, 248, 252, .88);
  backdrop-filter: blur(14px);
}
.topbar__title { font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.topbar__burger { display: none; place-items: center; width: 34px; height: 34px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--card); font-size: 13px; }

/* ---------- Page ---------- */
.page { padding: 30px 24px 70px; width: 100%; max-width: var(--page-max); }
.page--narrow { max-width: 1040px; }
.page--search { max-width: 920px; }
.page__head { margin-bottom: 22px; }
.page__head h1 { margin-bottom: 10px; }

/* ---------- Common grids ---------- */
.grid { display: grid; gap: 16px; }
.grid--stats { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 14px; }
.grid--cards { grid-template-columns: repeat(auto-fit, minmax(min(262px, 100%), 1fr)); }
.grid--tiles { grid-template-columns: repeat(auto-fill, minmax(min(184px, 100%), 1fr)); gap: 13px; }
.grid--templates { grid-template-columns: repeat(auto-fill, minmax(min(252px, 100%), 1fr)); }
.grid--plans { grid-template-columns: repeat(auto-fit, minmax(min(244px, 100%), 1fr)); }
.grid--split { grid-template-columns: repeat(auto-fit, minmax(min(305px, 100%), 1fr)); }
.grid--hero { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 26px; align-items: center; }

/* Editor: preview column + control rail */
.editor-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 366px; gap: 18px;
  align-items: start; width: 100%; max-width: 1440px;
  padding: 26px 24px 70px;
}

/* ---------- Mobile ---------- */
.scrim { display: none; position: fixed; inset: 0; background: rgba(20, 20, 40, .35); z-index: 50; }
.scrim.is-open { display: block; }

@media (max-width: 1000px) {
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 60;
    height: 100%; transform: translateX(-104%);
    transition: transform .22s cubic-bezier(.4, 0, .2, 1);
  }
  .sidebar.is-open { transform: translateX(0); box-shadow: 0 20px 60px -20px rgba(20, 20, 40, .25); }
  .sidebar__close { display: block; }
  .topbar__burger { display: grid; }
  .editor-grid { grid-template-columns: 1fr; padding: 22px 16px 70px; }
  .page { padding: 24px 16px 70px; }
}

@media (max-width: 620px) {
  /* The drawer must not run past the screen on small phones. */
  .sidebar { width: min(var(--sidebar-w), 84vw); }

  .topbar { padding: 12px 14px; gap: 10px; }
  .topbar__title { font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .page { padding: 20px 14px 64px; }
  .editor-grid { padding: 18px 14px 64px; gap: 14px; }

  /* One card per row beats a cramped two-up on a phone. */
  .grid--stats, .grid--cards, .grid--templates, .grid--plans, .grid--split, .grid--hero { grid-template-columns: 1fr; }
  .grid--tiles { grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap: 10px; }
  .grid { gap: 13px; }

  /* Dashboard's "Recent projects" card is hard-coded to span 2 columns. */
  .page section[style*="span 2"] { grid-column: auto !important; }
}

/* Below 1000px the sidebar is a drawer parked at translateX(-104%). Moved
   off-screen is not hidden: every link in it stayed in the tab order and in
   the accessibility tree, so tabbing from the topbar walked into an invisible
   menu. visibility removes it from both and still animates.
   (css/pages.css does the same for the public nav drawer.) */
@media (max-width: 1000px) {
  .sidebar:not(.is-open) { visibility: hidden; }
  .sidebar { transition: transform .22s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .22s; }
  .sidebar.is-open { visibility: visible; transition-delay: 0s; }
}