/* public/css/docs-spaces.css
 *
 * Spaces layer for the public Documentation Center: the space switcher
 * beside the logo, the space cards on the home page, and the flat
 * all-spaces list that replaces the tree in the home sidebar.
 *
 * Loaded after docs.css, so it can lean on the same --p-* tokens.
 */

/* --- Topbar left group --- */
.docs-topnav-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

/* --- Space switcher --- */
.docs-space-switch { position: relative; }

.docs-space-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-sm);
  background: var(--p-surface);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--p-text);
  cursor: pointer;
  max-width: 260px;
}
.docs-space-btn:hover { border-color: var(--p-text); }
.docs-space-btn > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.docs-space-caret { font-size: 12px; color: var(--p-text-tertiary); margin-left: 2px; }

.docs-space-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 260px;
  max-height: 340px;
  overflow-y: auto;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-md);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
  padding: 6px;
  z-index: 200;
}
.docs-space-menu[hidden] { display: none !important; }
.docs-space-menu a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-radius: var(--p-radius-sm);
  text-decoration: none;
  color: var(--p-text);
  font-size: 13.5px;
}
.docs-space-menu a:hover { background: var(--p-border-light); }
.docs-space-menu a.current { font-weight: 600; }
.docs-space-menu a > span { flex: 1; }
.docs-space-tick { font-size: 13px; }

/* --- Home page: space cards --- */
.docs-lead {
  font-size: 14.5px;
  color: var(--p-text-secondary);
  margin: -12px 0 30px;
}

.docs-space-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 14px;
}

.docs-space-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  /* min-height, not height. A fixed height clipped any card whose title ran
     to two lines: the title lost its top and the article count lost its
     bottom, because the card centres its content and hides the overflow.
     Grid rows stretch, so cards on the same row still match each other. */
  min-height: 100px;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  text-decoration: none;
  color: var(--p-text);
  overflow: hidden;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.docs-space-card:hover {
  border-color: var(--p-text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.docs-content .docs-space-card,
.docs-content .docs-space-card:hover { text-decoration: none; }

.docs-space-card-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--p-border-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
.docs-space-card-icon i { font-size: 22px; display: block; }

.docs-space-card-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  /* Clears the absolutely-positioned read-time badge in the top-right
     corner — without this, a title long enough to wrap runs right under
     it, since the badge sits on top of normal flow rather than pushing
     it aside. Small on purpose: the body column already stops short of
     the card's right edge to make room for the arrow icon, so only a
     little extra buffer is actually needed on top of that, not the
     badge's full width. */
  padding-right: 22px;
}
.docs-space-card-title {
  font-family: var(--p-font-display);
  font-size: 16px;
  font-weight: 600;
  /* Titles get room for two lines before they are cut, and an explicit
     line-height so the card's height is predictable rather than dependent
     on the inherited one. Longer than two lines is a naming problem, not a
     layout one, so it ellipsises. */
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.docs-space-card-desc {
  font-size: 13px;
  color: var(--p-text-secondary);
  line-height: 1.5;
  /* Two lines then an ellipsis. -webkit-line-clamp supplies the ellipsis
     itself; text-overflow does nothing on a multi-line box. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.docs-space-card-meta { font-size: 12px; color: var(--p-text-tertiary); }

.docs-space-card-readtime {
  position: absolute;
  top: 14px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--p-text-tertiary);
  background: var(--p-border-light);
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}
.docs-space-card-readtime i { font-size: 11px; }

.docs-space-card-arrow {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 15px;
  color: var(--p-text-tertiary);
  transform: translateX(-3px);
  opacity: 0;
  transition: transform 0.14s, opacity 0.14s;
}
.docs-space-card:hover .docs-space-card-arrow {
  transform: translateX(0);
  opacity: 1;
}

/* --- Home sidebar: every space, main categories only, not expandable --- */
.docs-nav-allspaces { display: flex; flex-direction: column; gap: 20px; }

.docs-nav-space { display: flex; flex-direction: column; gap: 2px; }

.docs-nav-space-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--p-text);
  text-decoration: none;
  border-radius: var(--p-radius-sm);
}
.docs-nav-space-title:hover { background: var(--p-border-light); }

.docs-nav-space-cat {
  display: block;
  padding: 4px 6px 4px 28px;
  font-size: 13px;
  color: var(--p-text-secondary);
  text-decoration: none;
  border-radius: var(--p-radius-sm);
}
.docs-nav-space-cat:hover { color: var(--p-text); background: var(--p-border-light); }

/* Home has no article rail, so keep it to two columns. */
.docs-shell-home { grid-template-columns: 280px minmax(0, 1fr); }
body.docs-nav-collapsed .docs-shell-home { grid-template-columns: 54px minmax(0, 1fr); }

/* Search results carry a space name in their trail; give it room. */
.docs-search-result-trail { line-height: 1.4; }

@media (max-width: 640px) {
  .docs-space-btn { max-width: 150px; }
  .docs-topnav-left { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .docs-space-card-arrow { transition: none; }
}

.docs-space-card-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--p-border-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
.docs-space-card-icon i { font-size: 22px; display: block; }