/* Wizbang Sites: the one-page capability statement (/capability.html). Letter size, prints on one page. */
.cs-body { background: color-mix(in srgb, var(--ground) 70%, #9aa1b2); min-height: 100vh; margin: 0; font-family: var(--body); color: #141A2B; }
html[data-theme="dark"] .cs-body { background: #0B0E18; }
.cs-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 16px; background: var(--panel); border-bottom: 1px solid var(--line); color: var(--cream); }
.cs-back { color: var(--cream); font-weight: 600; text-decoration: none; }
.cs-bar-note { color: var(--muted); font-size: 14px; margin-right: auto; }
.cs-sheet { box-sizing: border-box; width: min(8.5in, calc(100% - 32px)); min-height: 11in; margin: 28px auto 48px; padding: 0.5in 0.55in; background: #fff; box-shadow: 0 30px 60px -30px rgba(0,0,0,.45); display: flex; flex-direction: column; gap: 16px; font-size: 9.5pt; line-height: 1.4; }
.cs-loading, .cs-empty { color: #555; }
.cs-empty h1 { font-family: var(--serif); font-weight: 400; font-size: 30px; margin: 0 0 10px; }
.cs-empty a { color: var(--amber); font-weight: 600; }

.cs-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-bottom: 14px; border-bottom: 3px solid var(--amber); }
.cs-id { display: flex; gap: 14px; align-items: center; }
.cs-logo .site-mono { border-radius: 10px; }
.cs-id h1 { margin: 0; font-family: var(--serif); font-weight: var(--hw, 400); letter-spacing: var(--ht, -0.015em); font-size: 21pt; line-height: 1.05; color: #141A2B; }
.cs-tag { margin: 4px 0 0; color: #4A5163; max-width: 44ch; }
.cs-title { text-align: right; display: flex; flex-direction: column; gap: 6px; flex: none; }
.cs-title span { font-size: 9pt; font-weight: 600; letter-spacing: .08em; color: #646C82; }
.cs-title b { font-size: 9.5pt; padding: 5px 10px; border-radius: 999px; background: var(--amber); color: var(--on-accent); }

.cs-cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 26px; flex: 1; }
.cs-block h2 { margin: 0 0 6px; font-size: 9.5pt; font-weight: 700; letter-spacing: .06em; color: var(--amber); }
.cs-main { display: flex; flex-direction: column; gap: 13px; }
.cs-lede { margin: 0; font-size: 10pt; }
.cs-comp, .cs-diff, .cs-perf, .cs-list, .cs-naics { list-style: none; margin: 0; padding: 0; }
.cs-comp { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.cs-comp li { display: flex; flex-direction: column; gap: 2px; padding-left: 10px; border-left: 2px solid color-mix(in srgb, var(--amber) 45%, #fff); }
.cs-comp span { color: #4A5163; font-size: 8.5pt; }
.cs-diff li, .cs-list li { position: relative; padding-left: 14px; margin-bottom: 3px; }
.cs-diff li::before, .cs-list li::before { content: ''; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.cs-perf li { padding: 6px 0; border-top: 1px solid #E3E6ED; }
.cs-perf li:first-child { border-top: 0; padding-top: 0; }
.cs-perf-top { display: flex; justify-content: space-between; gap: 10px; }
.cs-perf-top span, .cs-perf-who { color: #646C82; font-size: 8.5pt; }
.cs-perf p { margin: 2px 0 0; color: #4A5163; font-size: 8.5pt; }

.cs-side { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border-radius: 10px; background: color-mix(in srgb, var(--amber) 7%, #F7F8FB); }
.cs-kvs { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.cs-kv { display: flex; justify-content: space-between; gap: 10px; }
.cs-kv dt { color: #646C82; }
.cs-kv dd { margin: 0; font-weight: 600; text-align: right; word-break: break-word; }
.cs-naics li { display: flex; gap: 8px; margin-bottom: 3px; }
.cs-naics b, .cs-kv dd.code { font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-size: 9pt; }
.cs-small { margin: 0; color: #4A5163; }
.cs-foot { display: flex; justify-content: space-between; padding-top: 10px; border-top: 1px solid #E3E6ED; color: #858CA1; font-size: 9pt; }

@media (max-width: 720px) {
  .cs-sheet { padding: 24px 20px; min-height: 0; }
  .cs-head { flex-direction: column; }
  .cs-title { text-align: left; }
  .cs-cols, .cs-comp { grid-template-columns: 1fr; }
}
@page { size: letter; margin: 0; }
@media print {
  .cs-body { background: #fff; }
  .cs-bar { display: none; }
  .cs-sheet { width: 8.5in; min-height: 11in; margin: 0; box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.cs-lede + .cs-lede, .cs-small + .cs-small { margin-top: 7px; }