/* /fusebox: page-only rules on top of site.css. Everything is scoped to .p-fusebox. */

/* Warm the shared terminal blocks to the page's near-black, with amber prompts. */
.p-fusebox .term, .p-fusebox .shell { background: #0f0d09; color: #e6dfd0; }
.p-fusebox .term .p { color: var(--acc); }
.p-fusebox .shell .c { color: #a0968a; }

/* Request flow diagram in the routing section */
.fb-flow { display: grid; gap: 14px; padding: clamp(20px, 3vw, 34px); border-radius: 22px; border: 1px solid var(--line); background: radial-gradient(ellipse 70% 70% at 50% 50%, var(--acc-soft), transparent 70%), var(--card); }
.fb-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.fb-row li { font-family: var(--mono); font-size: 13px; padding: 9px 13px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--line-2); }
.fb-arrow { text-align: center; font-family: var(--mono); font-size: 12px; color: var(--acc); }
.fb-core { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 20px 16px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--acc) 45%, transparent); background: color-mix(in srgb, var(--bg) 60%, transparent); }
.fb-core b { font-family: var(--mono); font-size: 22px; font-weight: 600; letter-spacing: -.04em; }
.fb-core b span { color: var(--acc); }
.fb-core p { font-family: var(--mono); font-size: 13px; color: var(--fg); }
.fb-core small { font-size: 13px; color: var(--mute); max-width: 320px; }

/* Endpoint list in the clients section */
.fb-endpoints { display: grid; gap: 8px; }
.fb-endpoints li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding: 10px 14px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--line); font-size: 14px; }
.fb-endpoints code { color: var(--acc); overflow-wrap: anywhere; }
.fb-endpoints span { color: var(--mute); }
.fb-tags { margin-top: 0; }
.fb-more .tile__vis { margin-top: 0; }
.p-fusebox .tile .shell { font-size: 13px; }

/* Provider grid */
.fb-prov { grid-template-columns: repeat(5, 1fr); margin-top: 0; }
.fb-prov li { background: var(--card); font-weight: 600; }
.fb-prov small { font-weight: 400; color: var(--mute); margin-top: 2px; line-height: 1.45; }
.fb-note { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--mute); max-width: 820px; }

/* CLIProxyAPI card beside the self-hosted facts */
.fb-switch { scroll-margin-top: 90px; }

@media (max-width: 1080px) {
  .fb-prov { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .fb-prov { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .fb-prov { grid-template-columns: 1fr; }
}