/* The Laboratoire of the test range (Debug > Banc d'essai) and the banner of test mode. Built on the Debug console's tokens (--dc-*). */
.lab-banner { position: fixed; top: 6px; left: 50%; transform: translateX(-50%); z-index: var(--z-debug); display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 12px; border-radius: 999px; background: #3b3753; color: #e7e6ef; border: 2px solid #9994b8; font: 700 var(--fs-body)/1.2 GfFont, system-ui, sans-serif; box-shadow: 0 2px 10px rgba(0, 0, 0, .45); max-width: calc(100vw - 16px); }
.lab-banner.hidden { display: none; }
.lab-banner .gf-btn { min-height: 22px; padding: 1px 9px; font-size: var(--fs-small); border-radius: 999px; white-space: nowrap; }
.lab-head h3 { text-transform: none; letter-spacing: 0; font-size: var(--fs-strong); }
.lab-skill { display: flex; align-items: center; gap: 6px; padding: 3px 6px; cursor: default; }
.lab-skill .dc-itemname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-skill .gf-btn { min-width: 26px; padding: 0 6px; }
.lab-hero .gf-btn.on { background: var(--dc-accent); color: #fff; border-color: var(--dc-accent); }
.lab-picker { display: flex; flex-direction: column; gap: 6px; }
.lab-effects { max-height: 220px; }
.lab-effect-note { min-height: 2.6em; }
.lab-status-row { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.lab-mob { display: flex; flex-direction: column; gap: 3px; padding: 6px 0; border-top: 1px solid var(--dc-line); font-size: var(--fs-body); }
.lab-mob .dc-toolbar { margin: 2px 0 0; }
.lab-meter-idle { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--fs-small); }
.lab-meter-table { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.lab-meter-row { display: grid; grid-template-columns: minmax(90px, 2.2fr) repeat(7, minmax(34px, 1fr)); gap: 4px; padding: 3px 6px; border-radius: 3px; background: linear-gradient(90deg, rgba(85, 80, 120, 0.28) var(--share, 0%), transparent var(--share, 0%)); align-items: center; }
.lab-meter-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.lab-meter-row > span.name { text-align: left; font-weight: 700; }
.lab-meter-row.head { background: none; color: var(--dc-mute); font-size: var(--fs-caption); text-transform: uppercase; }
@media (max-width: 560px) { .lab-meter-row { grid-template-columns: minmax(80px, 2fr) repeat(4, minmax(30px, 1fr)); } .lab-meter-row > span:nth-child(n+7) { display: none; } }

/* The speed of a free camera */
.cam-speed { display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap; font: 600 var(--fs-small)/1.2 GfFont, system-ui, sans-serif; }
.cam-chip { padding: 1px 6px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(0, 0, 0, .35); color: #fff; font: inherit; cursor: pointer; }
.cam-chip.on { background: #9994b8; border-color: #9994b8; color: #191723; }
.cam-read { min-width: 4.2em; text-align: right; opacity: .85; }
.free-cam-bar { position: fixed; top: 6px; left: 50%; transform: translateX(-50%); z-index: var(--z-debug); display: flex; align-items: center; gap: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(20, 24, 32, .86); color: #fff; border: 1px solid rgba(255, 255, 255, .3); font: 700 var(--fs-body)/1.2 GfFont, system-ui, sans-serif; max-width: calc(100vw - 16px); flex-wrap: wrap; justify-content: center; }
.free-cam-bar.hidden { display: none; }
.free-cam-bar .gf-btn { min-height: 22px; padding: 1px 9px; font-size: var(--fs-small); border-radius: 999px; }
.lab-banner:not(.hidden) ~ .free-cam-bar { top: 44px; }