/* DECK client — app-level LAYOUT only. Everything visual (colour, type, elevation, the per-app accent) comes
   from the kit's tokens and its components' scoped styles, so a theme change in helm-tokens.css reaches DECK
   without a DECK edit. Nothing here sets a colour that is not a token fallback. */

.stack { display: flex; flex-direction: column; gap: 1rem; }
.row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem; }
.spacer { height: .75rem; }
.muted { color: var(--color-text-muted, #6b7280); font-size: .9em; }
.brand-name { font-weight: 600; letter-spacing: .06em; margin-left: .4rem; }
.bare { max-width: 32rem; margin: 10vh auto; padding: 0 1rem; }

/* Order detail: a definition list rather than a table, because these are facts about one record. */
.order-facts { display: grid; grid-template-columns: minmax(9rem, max-content) 1fr; gap: .4rem 1rem; margin: 0; }
.order-facts dt { color: var(--color-text-muted, #6b7280); font-size: .9em; }
.order-facts dd { margin: 0; word-break: break-all; }

.handles { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .35rem; }

/* The top-bar acting-site field: narrow, so the bar keeps its shape; the chip beside it confirms the parse. */
.site-selector { flex-wrap: nowrap; }
.site-selector input { width: 20rem; max-width: 40vw; }

/* The scan station's camera preview. Fixed aspect so the frame does not jump when the stream starts. */
.scan-video { width: 100%; max-width: 640px; aspect-ratio: 16/9; background: #000; border-radius: .5rem; margin-top: .75rem; display: block; }

#scan-hits { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .35rem; }

/* Template's boot progress ring (kept: it is the only thing on screen while the runtime downloads — a cold
   load fetches about 3.2 MB brotli, measured in M23, so the ring is doing real work). */
.loading-progress { position: relative; display: block; width: 8rem; height: 8rem; margin: 20vh auto 1rem auto; }
.loading-progress circle { fill: none; stroke: #e0e0e0; stroke-width: .6rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child { stroke: #1b6ec2; stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * .8), 500%; transition: stroke-dasharray .05s ease-in-out; }
.loading-progress-text { position: absolute; text-align: center; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto .2rem; }
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }

#blazor-error-ui { color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2); box-sizing: border-box; display: none; left: 0; padding: .6rem 1.25rem .7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }