/* For apps: what this page adds to console.css. An on-this-page list of links, and two panels side by side from
   tablet width (one column on a phone). */
.toc { margin: 0 0 var(--space-5); }
.toc ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0; min-width: 0; }
.toc a {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--space-3); border: 1px solid var(--line);
  border-radius: 999px; background: var(--surface); color: var(--ink); font-size: var(--text-sm); font-weight: 500;
}
.toc a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: 0 0 var(--space-4); }
.pair > .panel { margin: 0; min-width: 0; }
.panel > h3:first-child { margin-top: 0; }
.main > h3 { margin-top: var(--space-6); }
.panel h3 + p.hint { margin-top: 0; }
@media (max-width: 767px) {
  .pair { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .toc a { min-height: 40px; }
}