/* Guides — secondary sidebar layout, nested inside the dashboard's own .content column.
   Visual language matches the primary .sidebar/.nav-item in ../app.css on purpose (same
   colors/spacing/hover treatment), just narrower and without icons.

   The sidebar is position: fixed rather than sticky — same pattern the primary .sidebar in
   app.css already uses successfully (fixed + a matching margin-left on the content beside it).
   Flex + sticky inside this page's nested flex containers wasn't actually staying put when
   scrolling a long guide; fixed positioning sidesteps that entirely by taking the sidebar out
   of document flow, so it can't be affected by a flex ancestor's sizing at all. */

.guides-content {
  max-width: none;
  padding: 0;
}

/* .content's own .loading (app.css) assumes a block container it can fill — fine as-is here
   since .guides-content is no longer a flex row itself. */

.guides-sidebar {
  position: fixed;
  top: 0;
  left: 220px; /* right edge of the primary .sidebar (app.css) */
  width: 230px;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* legacy Edge */
  border-right: 1px solid var(--border);
  padding: 48px 20px 80px;
}

.guides-sidebar::-webkit-scrollbar { display: none; }

.guides-sidebar-group { margin-bottom: 28px; }
.guides-sidebar-group:last-child { margin-bottom: 0; }

.guides-nav-item {
  display: block;
  padding: 8px 10px;
  margin-bottom: 1px;
  border-radius: 8px;
  color: var(--muted);
  text-decoration: none;
  font-size: 13.5px;
  cursor: pointer;
  transition: color .15s, background .15s;
}

.guides-nav-item:hover { color: var(--text); background: rgba(240,237,232,0.04); }
.guides-nav-item.active { color: var(--text); background: rgba(240,237,232,0.06); }

.guides-body {
  margin-left: 230px; /* room for the fixed sidebar beside it */
  padding: 48px 56px 160px;
  max-width: 780px;
}

@media (max-width: 900px) {
  .guides-sidebar { width: 180px; padding: 32px 12px 40px; }
  .guides-body { margin-left: 180px; padding: 32px 28px 100px; }
}

/* Site guides — prose layout (sections + per-mode field lists), distinct from the
   numbered .doc-step list used elsewhere. A site's tasks aren't a sequence of steps,
   they're a set of modes, each with its own fields, so a step numbering here would be
   arbitrary rather than meaningful. */

.doc-guide-section { margin-bottom: 48px; }
.doc-guide-section:last-child { margin-bottom: 0; }

.doc-guide-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 6px;
}

.doc-guide-intro {
  font-size: 13.5px;
  color: rgba(240,237,232,0.62);
  line-height: 1.7;
  margin-bottom: 8px;
}

.doc-mode {
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
}
.doc-mode:first-of-type { padding-top: 18px; }
.doc-mode:last-child { border-bottom: none; }

.doc-mode-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.doc-mode-desc {
  font-size: 13.5px;
  color: rgba(240,237,232,0.62);
  line-height: 1.7;
  margin-bottom: 16px;
}

.doc-field-list {
  display: grid;
  grid-template-columns: minmax(150px, max-content) 1fr;
  row-gap: 11px;
  column-gap: 20px;
  margin: 0;
}

.doc-field-list dt {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.6;
}

.doc-field-list dd {
  margin: 0;
  font-size: 13px;
  color: rgba(240,237,232,0.62);
  line-height: 1.6;
}

@media (max-width: 640px) {
  .doc-field-list { grid-template-columns: 1fr; row-gap: 4px; }
  .doc-field-list dd { margin-bottom: 8px; }
}