/* chart-generator additions on top of ds.css (WiseMetering design system, copied verbatim from
   holidays-api assets/ds.css). Only layout pieces the design system has no component for. */

/* documentation: one page with a side menu */
html { scroll-behavior: smooth; scroll-padding-top: 74px; }
.section { scroll-margin-top: 74px; }
.section h3 { scroll-margin-top: 74px; }
.docs-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.docs-footer { text-align: center; padding: 8px 0 24px; }
.topbar .brand { text-decoration: none; }
.topbar .brand:hover { text-decoration: none; }
.topbar form { margin: 0; }
.topbar .nav { overflow-x: auto; }
@media (max-width: 900px) { .topbar { flex-wrap: wrap; height: auto; min-height: 50px; padding: 8px 16px; } }
@media (max-width: 640px) { .topbar .brand img { display: none !important; } }
.btn:focus-visible, .menu a:focus-visible, .nav a:focus-visible, .input:focus-visible, .select:focus-visible,
.textarea:focus-visible, input[type="checkbox"]:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; }
.table td code.chip, .table td.nowrap { white-space: nowrap; }
.table td.wrap code.chip { white-space: normal; }
.table tbody th { text-align: left; width: 220px; font-weight: 500; color: hsl(var(--muted-foreground)); padding: 12px 16px; border-top: 1px solid hsl(var(--border)); vertical-align: top; }

/* charts are drawn for reports: they sit on white paper in both themes */
.paper { background: #fff; border: 1px solid hsl(var(--border)); border-radius: 6px; overflow: hidden; }
.paper img, .paper svg { display: block; width: 100%; height: auto; }
.chart-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.chart-cards a.card { display: flex; flex-direction: column; gap: 8px; color: inherit; text-decoration: none; padding: 12px; }
.chart-cards a.card:hover { border-color: hsl(var(--primary)); }
.examples { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
.examples article { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.grid-2 { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); }

/* playground */
.play { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: start; }
.play .textarea { min-height: 420px; font-family: var(--font-mono); font-size: 13px; tab-size: 2; }
#output:empty { display: none; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }

/* request bodies in the backoffice */
.code pre.wrap { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 480px; }
.row .spacer { flex: 1; }