/* 99-utilities.css: the classes that replace the inline style="" attributes of index.html and of the section-logo and
   card templates (docs/improvements/06-morph-branding.md 5.3, T1). T1 copied every value from the inline style it
   replaced, so T1 left the computed styles unchanged (the ui_visual harness proved it); 06 T4a then restyled them.
   Linked LAST of all stylesheets (07 C52 link order: 00-fonts, 01-11, css/features/*, 12-responsive, 20-29,
   99-utilities). An inline style beat every rule; a class does not, so these classes win over every earlier rule of
   the same specificity by source order, and a utility used where a legacy rule is more specific than one class is
   qualified to that specificity (.input-field .color-input-full against .input-field input). The utilities set only
   spacing, typography and the read-out, preview-window and logo-row looks, which neither the media query nor the
   feature sheets set on these elements. Not a slice of the original <style>: tests/static/css-slices.mjs never
   scans it. Since 06 T4a every colour is a role token of 02-tokens.css (static rule R-B1): the read-outs are
   --color-surface-1 blocks with primary JetBrains Mono values (the five formerly cyan read-outs), the preview window
   has a 1 px Signal Red border plus a 1 px Morph Black outline (outside the border, so no rect changes) and the
   --shadow-overlay shadow, its header and footer sit on --color-scrim, and its resize grip draws in currentColor
   (--color-text-secondary). */

/* Spacing (sidebar blocks, rows, buttons) */
.mt-6 { margin-top: 6px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mb-8 { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; }
.section-row--flush { margin-top: 10px; margin-bottom: 0; }
.btn-block { width: 100%; }

/* Form controls (#led-layout, #camera-filmback; #panel-font-color, #section-label-color) */
.ui-select {
    width: 100%;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-subtle);
    color: var(--color-text-primary);
    padding: 6px;
    border-radius: 4px;
    font-family: var(--font-ui);
    font-size: 12px;
}

.input-field .color-input-full {
    width: 100%;
    height: 30px;
    cursor: pointer;
}

/* Subsection titles ("Section Logos", "Camera Position", "Camera Rotation"); the class had no rule before T1 */
.subsection-title {
    margin: 14px 0 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-secondary);
}

.subsection-title--tight {
    margin-top: 6px;
}

/* Read-outs (.camera-info, .frustum-status) */
.readout {
    margin-top: 10px;
    padding: 10px;
    background: var(--color-surface-1);
    border-radius: 6px;
    font-size: 11px;
}

.readout-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.readout-row--gap { margin-bottom: 8px; }
.readout-row--last { margin-bottom: 0; }
.readout-label { color: var(--color-text-secondary); }
.readout-value { color: var(--color-text-primary); font-family: var(--font-mono); font-weight: 500; }

/* The static initial colours of #frustum-status-text and #safe-distance. Since 06 T3 they read the layer-4 status
   tokens, which ThemeBridge also reads into theme.ui.status, the colours CameraPanel writes to style.color at
   runtime: the initial and the runtime status colours come from one token. */
.status-pending { color: var(--status-off-center); }
.status-ok { color: var(--status-within); }

/* Camera preview window: the static parts only (display, width and height stay inline: PreviewWindow owns them).
   07 R2 (07 3.6): the main renderer draws the preview into the main canvas by scissor, so the window's body is
   transparent and its corners square (the scissor rectangle is square); the border and the outline stay. */
.preview-window {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: transparent;
    border: 1px solid var(--color-accent);
    outline: 1px solid var(--color-bg-app);
    border-radius: 0;
    overflow: hidden;
    box-shadow: var(--shadow-overlay);
}

/* 07 R2: #camera-preview-canvas is a layout placeholder with no WebGL context (no width/height attributes): its client
   rect (the window's inner box, from its inline 100% size) is the preview rectangle the main canvas draws at. */
#camera-preview-canvas {
    display: block;
    visibility: hidden;
}

.preview-window__resize {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    cursor: nw-resize;
    z-index: 20;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-window__icon { opacity: 0.5; }

.preview-window__header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 4px 8px;
    padding-left: 24px;
    background: var(--color-scrim);
    font-size: 10px;
    color: var(--color-text-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
}

/* The header's title: the 12 px camera icon (06 T4a, it replaced an emoji) and "Camera View" on one line */
.preview-window__title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.preview-window__footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 4px 8px;
    background: var(--color-scrim);
    font-size: 9px;
    color: var(--color-text-secondary);
    display: flex;
    justify-content: space-between;
}

/* Section-logo rows (ui/SectionLogosPanel.js template) */
.logo-row {
    margin-bottom: 12px;
    padding: 10px;
    background: var(--color-surface-2);
    border-radius: 6px;
}

.logo-row__title {
    font-size: 11px;
    color: var(--color-text-primary);
    margin-bottom: 8px;
    font-weight: 500;
}

.logo-row__label {
    font-size: 10px;
    color: var(--color-text-secondary);
    display: block;
    margin-bottom: 4px;
}

.logo-row__input {
    width: 100%;
    background: var(--color-surface-1);
    border: 1px solid var(--color-border-subtle);
    color: var(--color-text-primary);
    padding: 6px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
}

/* Section cards (ui/SectionListPanel.js template): the "Rotation before section" hint */
.curve-hint--small { font-size: 9px; }