/* Guides browse rail, search, and mobile drawer.
   Sticky layout lives in guides.css. Colours follow the forest tokens. */

.guides-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.guides-heading {
  margin: 0;
}

.guides-search label {
  display: block;
  margin-top: 0.85rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gnm-muted);
}

.guides-search input {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  box-sizing: border-box;
  border: 1px solid rgba(8, 7, 6, 0.12);
  border-radius: var(--gnm-radius-pill);
  background: var(--gnm-bg-white);
  color: var(--gnm-ink);
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 0.875rem;
}

.guides-search input::placeholder {
  color: var(--gnm-muted);
}

.guides-tree {
  margin-top: 1rem;
}

.guides-tree .guides-all,
.guides-tree .guides-leaves a,
.guides-results a {
  display: block;
  border-radius: 0.5rem;
  padding: 0.28rem 0.45rem;
  color: var(--gnm-muted);
  text-decoration: none;
  font-size: 0.875rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.guides-tree .guides-all {
  font-weight: 600;
  color: var(--gnm-ink);
}

.guides-tree summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--gnm-ink);
  padding: 0.28rem 0.15rem;
  overflow-wrap: anywhere;
}

.guides-tree summary::-webkit-details-marker {
  display: none;
}

.guides-tree summary::before {
  content: "▸";
  display: inline-block;
  width: 0.85rem;
  color: var(--gnm-muted);
  font-size: 0.75rem;
}

.guides-tree details[open] > summary::before {
  content: "▾";
}

.guides-topics,
.guides-leaves {
  margin: 0.1rem 0 0.35rem 0.7rem;
  padding: 0;
}

.guides-leaves {
  list-style: none;
}

.guides-tree a:hover,
.guides-results a:hover {
  color: var(--gnm-ink);
  background: #eef6f2;
}

.guides-tree a[aria-current="page"],
.guides-results a[aria-current="page"] {
  color: var(--gnm-forest);
  background: #eef6f2;
  font-weight: 600;
}

.guides-results {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}

.guides-results a span,
.guides-result-meta {
  display: block;
  margin-top: 0.1rem;
  color: var(--gnm-muted);
  font-size: 0.75rem;
  font-weight: 400;
}

.guides-results .guides-empty {
  padding: 0.35rem 0.15rem;
  color: var(--gnm-muted);
  font-size: 0.875rem;
}

.guides-fallback-summary {
  display: inline-flex;
  align-items: center;
  margin-top: 1rem;
  border: 1px solid rgba(8, 7, 6, 0.12);
  background: var(--gnm-bg-white);
  color: var(--gnm-ink);
  border-radius: 0.75rem;
  padding: 0.5rem 0.85rem;
  font: 600 0.875rem/1.25rem Inter, ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  list-style: none;
}

.guides-fallback-summary::-webkit-details-marker {
  display: none;
}

.guides-mobile-fallback[open] .guides-fallback-summary {
  margin-bottom: 0.25rem;
}

.guides-drawer-trigger {
  display: none;
  align-items: center;
  margin-top: 1rem;
  border: 1px solid rgba(8, 7, 6, 0.12);
  background: var(--gnm-bg-white);
  color: var(--gnm-ink);
  border-radius: 0.75rem;
  padding: 0.5rem 0.85rem;
  font: 600 0.875rem/1.25rem Inter, ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}

@media (max-width: 1023px) {
  html.guides-ia-ready .guides-drawer-trigger {
    display: inline-flex;
  }

  html.guides-ia-ready .guides-mobile-fallback {
    display: none !important;
  }
}

@media (min-width: 1024px) and (max-width: 1279.98px) {
  /* Keep the hub card class the publish pipeline looks for, and use two columns beside the rail. */
  [data-guides-main] .grid.md\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .guides-desktop {
    border-right: 1px solid rgba(8, 7, 6, 0.12);
    padding-right: 1.25rem;
    max-height: calc(100vh - var(--gnm-nav-height) - 1.5rem);
    overflow-y: auto;
  }

  html.guides-ia-ready .guides-mobile-fallback {
    display: none !important;
  }
}

.guides-drawer[hidden] {
  display: none !important;
}

.guides-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
}

.guides-drawer-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(28, 25, 23, 0.45);
  cursor: pointer;
}

.guides-drawer-panel {
  position: relative;
  z-index: 1;
  height: 100%;
  width: min(20rem, 92vw);
  box-sizing: border-box;
  overflow: auto;
  background: var(--gnm-bg);
  padding: 1rem 1rem 2rem;
  box-shadow: 0 16px 40px rgba(28, 25, 23, 0.18);
}

.guides-drawer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.guides-drawer-bar button {
  border: 1px solid rgba(8, 7, 6, 0.12);
  background: var(--gnm-bg-white);
  color: var(--gnm-ink);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  font: 600 0.75rem/1rem Inter, ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}

.guides-search input:focus-visible,
.guides-tree a:focus-visible,
.guides-tree summary:focus-visible,
.guides-results a:focus-visible,
.guides-drawer-trigger:focus-visible,
.guides-fallback-summary:focus-visible,
.guides-drawer-bar button:focus-visible {
  outline: 2px solid var(--gnm-accent);
  outline-offset: 2px;
}

body.guides-ia-lock {
  overflow: hidden;
}

[data-guides-results][hidden],
[data-guides-tree][hidden] {
  display: none !important;
}