/* The demo's own stylesheet, served by Caddy at /__demo/demo.css. The consoles' Content-Security-Policy allows
   same-origin styles, so the landing page and the bar added to the console pages use this file and nothing inline. */
:root { color-scheme: light dark; }
.dbs-landing { margin: 0; font: 16px/1.5 system-ui, sans-serif; background: #f6f7f9; color: #14161a; }
.dbs-landing main { max-width: 40rem; margin: 0 auto; padding: 2rem 1rem 3rem; }
.dbs-landing h1 { font-size: 1.75rem; margin: 0 0 .5rem; }
.dbs-landing h2 { font-size: 1.15rem; margin: 2rem 0 .25rem; }
.dbs-landing section { border-top: 1px solid #d5d8de; }
.dbs-credentials { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 1rem 0; }
.dbs-credentials dt { color: #4a505c; }
.dbs-credentials dd { margin: 0; }
.dbs-landing code { background: #e8eaee; padding: .1rem .35rem; border-radius: 4px; }
.dbs-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.dbs-button { display: inline-block; padding: .5rem 1rem; border: 1px solid #3b5bdb; border-radius: 6px; color: #3b5bdb; text-decoration: none; font-weight: 600; }
.dbs-button.dbs-primary { background: #3b5bdb; color: #fff; }
.dbs-note { color: #4a505c; font-size: .9rem; }
.dbs-landing footer { margin-top: 2rem; font-size: .9rem; }
.dbs-landing a { color: #3b5bdb; }
.dbs-landing h3 { font-size: 1.02rem; margin: 1.5rem 0 .25rem; }
.dbs-code { background: #e8eaee; padding: .6rem .75rem; border-radius: 6px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .88rem; line-height: 1.4; margin: .4rem 0 1rem; }
.dbs-code code { background: none; padding: 0; }
.dbs-banner { border: 2px solid #c92a2a; background: #fff5f5; color: #7d1a1a; padding: .75rem 1rem; border-radius: 6px; font-weight: 600; }

/* The bar added after <body> of the console pages (replace-response). Fixed, so it does not move the console's layout. Bottom left, 32px up: the
   consoles' own toast is bottom right (the monitor's 40px up, the admin console's 20px up) and the monitor's status bar runs along the bottom edge. */
.dbs-demo-bar { position: fixed; left: 12px; bottom: 32px; z-index: 2147483647; display: flex; flex-wrap: wrap; gap: 6px;
  max-width: calc(100vw - 24px); font: 13px/1.2 system-ui, sans-serif; }
.dbs-demo-bar a { padding: 7px 11px; border-radius: 6px; background: #3b5bdb; color: #fff; text-decoration: none; border: 1px solid #fff; }
.dbs-demo-bar a.dbs-demo-home, .dbs-demo-bar a.dbs-demo-legal { background: #1f2430; color: #e6e8ee; border-color: #4a505c; }
.dbs-demo-bar a:hover, .dbs-demo-bar a:focus { text-decoration: underline; }
/* The bar sits over the foot of the consoles' left menus (monitor .rail, admin console .tabs): leave room below the last item so it can still be reached. */
.rail, .tabs { padding-bottom: 76px !important; }

@media (prefers-color-scheme: dark) {
  .dbs-landing { background: #0f1117; color: #e6e8ee; }
  .dbs-landing section { border-top-color: #2a2f3a; }
  .dbs-credentials dt, .dbs-note { color: #aab0bc; }
  .dbs-landing code { background: #1f2430; }
  .dbs-code { background: #1f2430; }
  .dbs-button { border-color: #8da2ff; color: #8da2ff; }
  .dbs-button.dbs-primary { background: #3b5bdb; color: #fff; border-color: #3b5bdb; }
  .dbs-landing a { color: #8da2ff; }
  .dbs-banner { background: #2b1214; color: #ffb3b3; border-color: #e03131; }
}