/* Sidebar groups (src/ui/layout.tsx NavGroupRow, public/nav-groups.js): a <details> whose
   <summary> looks like a nav row, with a chevron; its pages sit indented under a thin guide line.
   Collapsed, the header shows its pages' badges added up (.ng-roll / .ng-dot). */
/* Undo the global FAQ-card look of <details> (styles.css). */
.side-nav .ng { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; max-width: none; }
.side-nav .ng-head {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  color: var(--ink-soft); font-weight: 500; font-size: 14px; cursor: pointer; user-select: none;
  list-style: none;
}
.side-nav .ng-head::-webkit-details-marker { display: none; }
.side-nav .ng-head::marker { content: ""; }
.side-nav .ng-head:hover { background: var(--hover); color: var(--ink); }
.side-nav .ng-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The group holding the open page: darker label, so it's findable even when collapsed. */
.side-nav .ng-head.has-on { color: var(--ink); font-weight: 700; }
.side-nav .ng:not([open]) > .ng-head.has-on { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); color: var(--accent); }

.side-nav .ng-chev { flex: none; margin-left: auto; color: var(--ink-faint); transition: transform 0.15s ease; }
.side-nav .ng[open] > .ng-head .ng-chev { transform: rotate(90deg); }
/* A badge before the chevron takes the auto margin instead. */
.side-nav .ng:not([open]) > .ng-head .ng-roll:not([hidden]) ~ .ng-chev,
.side-nav .ng:not([open]) > .ng-head .ng-dot:not([hidden]) ~ .ng-chev { margin-left: 6px; }

.side-nav .ng-roll {
  margin-left: auto; min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--accent-fill);
  color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.side-nav .ng-dot { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-fill); }
.side-nav .ng-roll[hidden], .side-nav .ng-dot[hidden], .side-nav .ng[open] > .ng-head .ng-roll, .side-nav .ng[open] > .ng-head .ng-dot { display: none; }

/* Pages in a group: indented, a thin vertical line on the left (under the group's icon). */
.side-nav .ng-kids { display: grid; gap: 1px; margin: 2px 0 6px 18px; padding-left: 8px; border-left: 1px solid var(--line); }
.side-nav .ng-kids a { position: relative; padding: 6px 10px; font-size: 13.5px; }
.side-nav .ng-kids a.on { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent); font-weight: 700; }
.side-nav .ng-kids a.on::before {
  content: ""; position: absolute; left: -9px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--accent-fill);
}

/* Keyboard focus on every sidebar row. */
.side-nav a:focus-visible, .side-nav .ng-head:focus-visible, .side-out:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -2px;
}

/* Account area: Profile / Help / Notifications as one tight list. */
.side-links { display: grid; gap: 2px; }
.side-out.on { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .side-nav .ng-chev { transition: none; }
}