:root {
  --dx-header-fg: #14213d;
  --dx-header-muted: #4c5c76;
  --dx-header-border: #b7c9e2;
  --dx-header-control: rgba(255, 255, 255, 0.42);
  --dx-header-control-hover: rgba(255, 255, 255, 0.7);
  --dx-header-control-border: rgba(45, 70, 110, 0.24);
  --dx-header-bg:
    radial-gradient(circle at 12% -90%, rgba(74, 225, 176, 0.65), transparent 52%),
    radial-gradient(circle at 78% 155%, rgba(143, 79, 255, 0.34), transparent 58%),
    linear-gradient(115deg, #f0fffc 0%, #edf4ff 52%, #f8efff 100%);
  --dx-composer-bg:
    radial-gradient(circle at 15% -90%, rgba(70, 190, 240, 0.4), transparent 55%),
    radial-gradient(circle at 82% 155%, rgba(85, 120, 245, 0.28), transparent 62%),
    linear-gradient(115deg, #effaff 0%, #e6f0ff 58%, #edf0ff 100%);
}
@media(prefers-color-scheme:dark) { :root {
    --dx-header-fg: #f4f8ff;
    --dx-header-muted: #b8c6df;
    --dx-header-border: #263b63;
    --dx-header-control: rgba(8, 17, 39, 0.26);
    --dx-header-control-hover: rgba(73, 103, 164, 0.38);
    --dx-header-control-border: rgba(184, 206, 255, 0.25);
    --dx-header-bg:
      radial-gradient(circle at 14% -100%, rgba(50, 221, 164, 0.32), transparent 54%),
      radial-gradient(circle at 78% 170%, rgba(139, 64, 255, 0.48), transparent 60%),
      linear-gradient(115deg, #08152a 0%, #10274d 55%, #1d164a 100%);
    --dx-composer-bg:
      radial-gradient(circle at 15% -100%, rgba(32, 151, 226, 0.3), transparent 56%),
      radial-gradient(circle at 82% 170%, rgba(70, 106, 238, 0.34), transparent 62%),
      linear-gradient(115deg, #081b31 0%, #102b52 58%, #18264d 100%);
} }
body > header { background:var(--dx-header-bg); color:var(--dx-header-fg); border-color:var(--dx-header-border) }
body > header button { color:var(--dx-header-fg); border-color:var(--dx-header-control-border); background:transparent }
body > header button:hover, body > header button.active { background:var(--dx-header-control-hover); color:var(--dx-header-fg) }
body > header #user { color:var(--dx-header-muted) }
#composer { background:var(--dx-composer-bg); border-color:var(--dx-header-border); color:var(--dx-header-fg) }
#composer .dim, #composer label, #composer .cx-kind { color:var(--dx-header-muted) }
#composer .cx-target, #composer .cx-prev, #composer .cx-next { color:var(--dx-header-fg) }
.nav-icon { opacity:.8; margin-right:.3rem; font-size:.8em }
.dispatch-connection { display:inline-block; width:.5rem; height:.5rem; border-radius:50%; background:var(--green); margin-right:.4rem; box-shadow:0 0 8px color-mix(in srgb,var(--green) 30%,transparent) }

/* The whole gauge strip is the trigger, and the detail lives in a top-layer panel placed under it
   by app.js (the header is sticky, so an in-flow panel would paint under the page chrome). */
.usage-open { padding:0; border:0; background:none; color:inherit; font:inherit; cursor:pointer }
/* white-space resets because the panel lives inside #user, which keeps the header on one line;
   inherited nowrap made every row overflow the panel instead of wrapping inside it. */
.usage-panel { position:fixed; inset:auto; margin:0; white-space:normal; width:max-content; max-width:min(42rem, calc(100vw - 16px));
	padding:.6rem .75rem; border:1px solid var(--line); border-radius:6px; background:var(--panel); color:var(--fg);
	box-shadow:0 6px 20px #0005; font-size:.85rem }
.usage-panel-row { display:flex; gap:.5rem; padding:.25rem 0; align-items:baseline }
/* min-width:0 or the flex item refuses to shrink below its content and the line is clipped by
   the panel's max-width instead of wrapping inside it. */
.usage-panel-row > span:last-child { flex:1; min-width:0; overflow-wrap:anywhere }
.usage-panel-icon { flex:none }
.usage-panel-note { margin-top:.5rem; padding-top:.5rem; border-top:1px solid var(--line) }