/* ============================================================
   Layer 4: Shell — topbar, sidebar, layout frame
   The showcase + admin chrome that wraps a workspace.
   ============================================================ */

/* ── Topbar: brand + tabsbar (tab links) ── */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center;
  padding: 0 var(--space-24);
  background-color: var(--neutral);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%224%22%20height%3D%224%22%3E%3Crect%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%23e8e8e8%22/%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221.5%22%20fill%3D%22%23b8b6b2%22%20opacity%3D%220.15%22/%3E%3C/svg%3E");
  background-size: 4px 4px;
  border-bottom: var(--rule-30);
}
.topbar-tabsbar {
  display: flex; align-items: stretch;
}
.topbar-tabsbar-tab {
  padding: 15px 22px;
  font-family: var(--font); font-size: var(--text-base); font-weight: 500;
  letter-spacing: 0.01em; white-space: nowrap;
  color: var(--primary); opacity: 0.5;
  text-decoration: none;
  position: relative;
  cursor: pointer;
  transition: opacity 0.15s;
}
.topbar-tabsbar-tab.active {
  opacity: 1; font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--primary);
}
.topbar-tabsbar-tab:not(.active):hover {
  opacity: 1;
  box-shadow: inset 0 -1px 0 var(--primary);
}

.topbar-brandtitle {
  font-family: 'Barlow', sans-serif;
  font-size: var(--text-md); font-weight: 600;
  color: var(--primary); letter-spacing: -0.02em;
  padding: var(--space-12) 26px var(--space-12) 0px; margin-right: var(--space-8);
  border-right: 1px solid var(--ink-30);
  white-space: nowrap;
}
.topbar-brandtitle em {
  margin-left: 3px;
  font-family: 'Instrument Serif', serif;
  font-style: italic; font-weight: 400;
  font-size: 1.1em;
}

/* ── Workspace: per-tab view container (sidebar + canvas) ── */
.workspace { display: none; }
.workspace.active {
  display: flex; flex-direction: row;
  height: calc(100vh - 53px);
  overflow: hidden;
}

/* ── Sidebar ── */
.sidebar {
  width: 168px; flex-shrink: 0;
  border-right: var(--rule-30);
  padding: var(--space-32) 0;
  height: calc(100vh - 53px);
  overflow-y: auto;
  background-color: var(--neutral);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%224%22%20height%3D%224%22%3E%3Crect%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%23e8e8e8%22/%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221.5%22%20fill%3D%22%23b8b6b2%22%20opacity%3D%220.15%22/%3E%3C/svg%3E");
  background-size: 4px 4px;
}
.sidebar-group { margin-bottom: 28px; }
.sidebar-group-label {
  font-family: var(--font-cond); font-size: var(--text-tiny); font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
  padding: 0 var(--space-24) var(--space-8); display: block;
}
.sidebar-link {
  display: block; padding: 7px var(--space-24);
  font-family: var(--font); font-size: var(--text-meta); font-weight: 500;
  color: var(--secondary); text-decoration: none;
  transition: all 0.12s; cursor: pointer;
  border-left: 2px solid transparent;
}
.sidebar-link:hover { color: var(--primary); background: var(--ink-08); }
.sidebar-link.active { color: var(--primary); font-weight: 700; border-left-color: var(--primary); background: var(--ink-08); }

/* ── Canvas + section structure ── */
.canvas { flex: 1; padding: 40px 40px var(--space-96); overflow-y: auto; height: calc(100vh - 53px); background: var(--canvas-bg); }
.section { margin-bottom: 80px; scroll-margin-top: 80px; }
.section-header { margin-bottom: 28px; padding-bottom: var(--space-12); border-bottom: var(--rule); }
.section-num { font-family: var(--font-mono); font-size: var(--text-label); color: var(--muted); margin-bottom: var(--space-4); }
.section-title { font-size: var(--text-h3); font-weight: 600; letter-spacing: -0.01em; color: var(--primary); }
.section-desc { font-size: var(--text-sm); font-weight: 500; color: var(--secondary); line-height: 1.65; margin-top: var(--space-8); max-width: 600px; }

/* Small eyebrow above a sub-block (no rule) */
.section-label {
  display: block;
  font-family: var(--font-cond);
  font-size: var(--text-label); font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--primary);
  margin: 80px 0 10px 0;
}
.section-header + .section-label,
.section > .section-label:first-child {
  margin-top: 0;
}