/* The side panel keeps the same width on every screen; only collapsing it
   (any screen, with its button) narrows it, with a short transition. */
.layout{
  --sidebar-width:240px;
  display:grid;
  grid-template-columns:var(--sidebar-width) 1fr;
  grid-template-rows:var(--header-height) 1fr;
  grid-template-areas:
    "top top"
    "side main";
  min-height:100vh;
  transition:grid-template-columns .2s ease;
}

.layout.sidebar-collapsed{
  grid-template-columns:72px 1fr;
}

/* Focus mode of the configuration matrix: no header and no side panel, only the matrix. */
.layout.matrix-focus{
  grid-template-columns:1fr;
  grid-template-rows:1fr;
  grid-template-areas:"main";
}

.layout.matrix-focus .topbar,
.layout.matrix-focus .sidebar{
  display:none;
}

.layout.matrix-focus .main{
  padding:12px 16px;
}

/* Header of VISUAL_STYLE_GUIDE.md, without the navigation pills: the menu is in the side panel. */
.topbar{
  grid-area: top;
  position:sticky;
  top:0;
  z-index:100;
  background:var(--header-bg);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap:16px;
  padding: 0 24px;
  height: var(--header-height);
  border-bottom: 2px solid var(--highlight);
  box-shadow: 0 10px 24px rgba(17,17,20,.18);
}

.topbar-brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
  color:#fff;
}

.topbar-logo{
  height: 30px;
  width: auto;
  display: block;
}

.topbar-sep{
  width:1px;
  height:30px;
  background:rgba(255,255,255,.22);
}

.topbar-name{
  display:grid;
  gap:4px;
  line-height:1.1;
  text-transform:uppercase;
  white-space:nowrap;
}

.topbar-name strong{
  font-size:15px;
  font-weight:700;
  letter-spacing:.06em;
}

.topbar-name span{
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.08em;
  color:rgba(255,255,255,.6);
}

.topbar-right{
  display: flex;
  align-items: center;
  gap: 14px;
}

.topbar-user{
  display:flex;
  align-items:center;
  gap:10px;
}

.topbar-avatar{
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:700;
}

.topbar-user-name{
  display:grid;
  gap:2px;
  line-height:1.15;
}

.topbar-user-name strong{
  font-size:13px;
  font-weight:600;
}

.topbar-user-name span{
  font-size:11px;
  color:rgba(255,255,255,.6);
}

@media (max-width: 1500px){
  .topbar{ padding:0 20px; }
}

.top-actions{
  display:flex;
  gap:10px;
}

.sidebar{
  grid-area:side;
  position:sticky;
  top:var(--header-height);
  align-self:start;
  height:calc(100vh - var(--header-height));
  background:rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  border-right:1px solid var(--line);
  padding:18px 16px;
  overflow-x:hidden;
  overflow-y:auto;
}

.main{
  grid-area:main;
  padding:24px;
  min-width:0;
  /* clip, not hidden: it does not make a scroll box, so sticky bars (Back / Continue) stick to the window */
  overflow:clip;
}

.top-actions{
  display:flex;
  gap:10px;
}

/* Main menu at the top of the side panel ------------------------------------ */
.sidebar-nav{
  display:grid;
  gap:4px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}

.sidebar-nav:last-child{
  padding-bottom:0;
  border-bottom:0;
}

.sidebar-nav-head{
  display:flex;
  align-items:center;
  gap:8px;
  height:24px;
  margin:0 0 6px 2px;
}

.sidebar-nav-title{
  font-size:10.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted-soft);
}

.sidebar-nav-item{
  display:flex;
  align-items:center;
  gap:10px;
  height:36px;
  padding:0 12px;
  border-radius:var(--radius-control);
  color:var(--muted);
  font-size:13px;
  font-weight:500;
  text-decoration:none;
  transition:background-color .15s ease, color .15s ease;
}

.sidebar-nav-item:hover{
  background:rgba(204,78,0,.07);
  color:var(--text);
}

.sidebar-nav-item:focus-visible{
  outline:2px solid var(--highlight);
  outline-offset:2px;
}

.sidebar-nav-item.is-active{
  background:var(--highlight);
  color:#fff;
  font-weight:600;
}

.sidebar-nav-item .btn-icon{
  width:15px;
  height:15px;
  flex:0 0 auto;
}

.sidebar-nav-item span{
  white-space:nowrap;
}

/* Collapsed panel: the menu stays, as icons in the same place. */
.sidebar-shell.is-collapsed .sidebar-nav-title,
.sidebar-shell.is-collapsed .sidebar-nav-item span{
  display:none;
}

.nav-item{
  padding:12px 14px;
  border-radius:12px;
  color:var(--muted);
  margin-bottom:6px;
  border:1px solid transparent;
  font-size:var(--fs-copy-sm);
  font-weight:500;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}

.nav-item:hover{
  background:rgba(112,0,189,.05);
  border-color:rgba(112,0,189,.12);
  color:var(--text);
}

.nav-item.active{
  background:linear-gradient(90deg, rgba(112,0,189,.12), rgba(237,208,255,.6));
  color:var(--accent-active);
  font-weight:700;
  border-color:rgba(112,0,189,.18);
}

.sidebar-shell{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.sidebar-panel{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.sidebar-toggle{
  margin-left:auto;
  width:24px;
  height:24px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:6px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--muted);
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}

.sidebar-toggle:hover{
  border-color:var(--highlight);
  color:var(--highlight);
}

.sidebar-toggle:focus-visible{
  outline:2px solid var(--highlight);
  outline-offset:2px;
}

/* Content under the menu, only while configuring (cell details). It fades in
   when it appears; min-width avoids text reflowing while the panel expands. */
.sidebar-context{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:200px;
}

.sidebar-context.is-entering{
  animation:sidebar-context-in .22s ease-out both;
}

@keyframes sidebar-context-in{
  from{ opacity:0; transform:translateY(4px); }
  to{ opacity:1; transform:none; }
}

/* Cards of the configuration panel (cell details). */
.sidebar-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px;
}

.sidebar-card-title{
  font-size:var(--fs-label);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
  margin-bottom:6px;
}

.layout.sidebar-collapsed .nav-item{
  padding:10px 8px;
  text-align:center;
  font-size:11px;
}

/* Narrow screens: only the menu is kept, as a row under the header. */
@media (max-width: 1100px){
  .layout,
  .layout.sidebar-collapsed{
    grid-template-columns:1fr;
    grid-template-rows:var(--header-height) auto 1fr;
    grid-template-areas:
      "top"
      "side"
      "main";
  }

  .sidebar{
    position:static;
    height:auto;
    padding:8px 16px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .sidebar-panel > :not(.sidebar-nav),
  .sidebar-nav-head{
    display:none;
  }

  .sidebar-nav{
    display:flex;
    flex-wrap:wrap;
    padding-bottom:0;
    border-bottom:0;
  }

  .sidebar-shell.is-collapsed .sidebar-nav-item span{
    display:inline;
  }

  .topbar-user-name{
    display:none;
  }
}

@media (max-width: 560px){
  .topbar-sep,
  .topbar-name span{
    display:none;
  }
}

@media (prefers-reduced-motion: reduce){
  .layout{ transition:none; }
  .sidebar-context.is-entering{ animation:none; }
}