/* API-143: additions to the vendored Graphite docs.css for multi-product sites.
   Tokens only (tokens.css); docs.css stays byte-identical to welt-python. */

/* Product switcher: a disclosure next to the brand, no script needed. */
.product-switcher { position: relative; margin-right: 8px; }
.product-switcher > summary { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 6px 0 8px; border: 1px solid var(--border); border-radius: var(--radius-control); color: var(--muted-foreground); font-size: 13px; font-weight: 500; cursor: pointer; list-style: none; white-space: nowrap; }
.product-switcher > summary::-webkit-details-marker { display: none; }
.product-switcher > summary:hover, .product-switcher[open] > summary { background: var(--hover); color: var(--foreground); }
.product-switcher > summary .icon { width: 14px; height: 14px; }
.product-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; display: grid; gap: 2px; width: 260px; padding: 4px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--background); box-shadow: var(--shadow-sm); }
.product-menu a { display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--radius-control); }
.product-menu a:hover { background: var(--hover); }
.product-menu a[aria-current="true"] { background: var(--secondary); }
.product-menu strong { display: flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 600; }
.product-menu strong .icon { width: 12px; height: 12px; color: var(--muted-foreground); }
.product-menu small { font-size: 12.5px; color: var(--muted-foreground); }

/* A program's header links its download. */
.code-download { margin-left: auto; font-size: 12px; color: var(--muted-foreground); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.code-download:hover { color: var(--foreground); }
/* A program that needs an outside service says so; the checker does not run it. */
.code-requires { margin-left: auto; padding: 1px 8px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; white-space: nowrap; }
.code-requires + .code-download { margin-left: 12px; }

@media (max-width: 860px) { .product-switcher { margin-right: 0; } .product-menu { left: auto; right: -40px; } }

/* The landing's run card shows a program and its recorded output. */
.start-card .code-wrap + .output { margin-top: -1px; }
.start-card .output { margin-bottom: 0; }

/* Reference pages list their names in the sidebar until the outline rail appears. */
@media (min-width: 1181px) { .sidebar .page-index { display: none; } }

/* The dark brand tile gets a hairline ring on dark backgrounds so it stays visible. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand img { box-shadow: 0 0 0 1px var(--border-strong); } }
:root[data-theme="dark"] .brand img { box-shadow: 0 0 0 1px var(--border-strong); }