/* /private-chatgpt/ and /private-llm-hosting/: the few parts landing.css
 * does not cover. Load after landing.css. Prefix lx-, hairlines only. */

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

/* Two-column rows: title and text, no trailing meta column */
.lx-rows-2 .lx-row { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); }
.lx-split .lx-rows-2 .lx-row { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr); gap: 28px; }
.lx-row p a, .lx-steps p a, .lx-figure p a { color: var(--accent); }

/* Tables: scroll inside their own box on narrow screens, never the page */
.lx-table-wrap { overflow-x: auto; }
.lx-figures + .lx-table-wrap { margin-top: 88px; }
.lx-table-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.lx-table tbody th { font-weight: 600; color: var(--text); }
.lx-table td { color: var(--text-dim); }
.lx-table td.good { color: var(--text); }
.lx-table td a { color: var(--accent); }
.lx-table-qa tbody th { width: 36%; }

/* Architecture diagram: plain monospace on the band, no box */
.lx-diagram { margin: 0; padding: 28px 0; border-top: 1px solid var(--border-hi); font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Cascadia Mono", monospace; font-size: 14px; line-height: 1.6; color: #d7dbd5; overflow-x: auto; white-space: pre; }
.lx-diagram:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* Guide directory: one hairline disclosure per group, links in two columns */
.lx-dir { border-top: 1px solid var(--border-hi); }
.lx-dir details { border-bottom: 1px solid var(--border); }
.lx-dir summary { list-style: none; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr) auto 12px; gap: 32px; align-items: baseline; padding: 30px 0; cursor: pointer; }
.lx-dir summary::-webkit-details-marker { display: none; }
.lx-dir summary h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.lx-dir-desc { color: var(--text-dim); font-size: 15.5px; text-wrap: pretty; }
.lx-dir-count { color: var(--accent); font-weight: 600; font-size: 14.5px; white-space: nowrap; }
.lx-dir summary::after { content: ""; align-self: center; width: 12px; height: 12px; background: linear-gradient(var(--text-dim), var(--text-dim)) center / 12px 1.5px no-repeat, linear-gradient(var(--text-dim), var(--text-dim)) center / 1.5px 12px no-repeat; transition: transform 0.5s ease; }
.lx-dir details[open] summary::after { transform: rotate(45deg); }
.lx-dir summary:hover h3 { color: var(--accent); }
.lx-dir summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.lx-dir-list { list-style: none; margin: 0 0 36px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; border-top: 1px solid var(--border); }
.lx-dir-list li { border-bottom: 1px solid var(--border); }
.lx-dir-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; row-gap: 4px; padding: 18px 0; color: inherit; text-decoration: none; }
.lx-dir-list b { font-size: 15.5px; font-weight: 600; color: var(--text); transition: color 0.3s; }
.lx-dir-list small { grid-column: 2; grid-row: 1; padding-top: 2px; font-size: 12.5px; color: var(--text-dim); white-space: nowrap; }
.lx-dir-list span { grid-column: 1 / -1; font-size: 14px; color: var(--text-dim); }
.lx-dir-list a:hover b, .lx-dir-list a:focus-visible b { color: var(--accent); }

.lx-band-cta { margin-top: 48px; }

@media (max-width: 960px) {
  .lx-rows-2 .lx-row, .lx-split .lx-rows-2 .lx-row { grid-template-columns: 1fr; gap: 10px; }
  .lx-dir summary { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 20px; }
  .lx-dir summary h3 { grid-column: 1; }
  .lx-dir-desc { grid-column: 1 / -1; grid-row: 2; }
  .lx-dir-count { grid-column: 1; grid-row: 3; }
  .lx-dir summary::after { grid-column: 2; grid-row: 1; }
  .lx-dir-list { grid-template-columns: 1fr; }
  .lx-table-qa tbody th { width: 40%; }
}
@media (max-width: 560px) {
  .lx-diagram { font-size: 11px; }
  .lx-figures + .lx-table-wrap { margin-top: 56px; }
  .lx-table-qa thead { display: none; }
  .lx-table-qa tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--border); }
  .lx-table-qa tbody th, .lx-table-qa td { display: block; width: auto; padding: 0; border-bottom: 0; }
  .lx-table-qa tbody th { margin-bottom: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .lx-dir summary::after { transition: none; }
}