/* Directory content; shared header, body, hero and footer use tools-layout.css. */
.tools-directory .tool-title span { color: var(--muted); }
.meta-list { margin: 24px 0 0; color: var(--muted); font-size: 14px; }
.meta-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; padding: 6px 0; }
.meta-row dt { color: var(--accent-2); }
.meta-row dd { margin: 0; }
.meta-row dd::before { content: "= "; color: var(--dim); }
.command::before { content: "> "; color: var(--accent); }
.command { text-decoration: none; font-size: 14px; }
.module { margin-bottom: 56px; scroll-margin-top: 120px; }
.module-head { margin-bottom: 20px; }
.comment { color: var(--dim); font-size: 12px; }
.module h2 { margin: 5px 0 0; color: var(--text); font-size: 24px; font-weight: 500; letter-spacing: -.02em; }
.module h2::before { content: "export "; color: var(--danger); font-size: .62em; }
.entries { display: grid; }
.entry { display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: 8px 24px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--line); color: var(--muted); text-decoration: none; }
.entry-name { color: var(--accent-2); overflow-wrap: anywhere; }
.entry-name::after { content: "()"; color: var(--dim); }
.entry p { grid-row: 2; grid-column: 1 / -1; margin: 0; max-width: 760px; font-size: 14px; }
.entry-state { grid-row: 1; grid-column: 2; color: var(--accent); font-size: 12px; white-space: nowrap; }
.entry:hover .entry-name { text-decoration: underline; text-underline-offset: 4px; }
.block { display: grid; grid-template-columns: 32px minmax(140px, .75fr) minmax(0, 1.6fr); gap: 16px; padding: 24px 0; color: var(--muted); border-top: 1px solid var(--line); }
.block-index { color: var(--dim); font-size: 12px; }
.block h3 { margin: 0; color: var(--accent-2); font-size: 15px; font-weight: 500; }
.block p { margin: 0; font-size: 14px; }
.route-list { margin: 0; padding: 0; list-style: none; }
.route { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 20px; padding: 12px 0; color: var(--muted); font-size: 14px; }
.route code { color: var(--warning); font: inherit; }
@media (max-width: 620px) {
  .entry { grid-template-columns: 1fr; }
  .entry-state { grid-row: 3; grid-column: 1; }
  .block { grid-template-columns: 24px minmax(0, 1fr); }
  .block-copy { grid-column: 2; }
  .meta-row, .route { grid-template-columns: 1fr; gap: 4px; }
}