/* controls.css — the main shell, field labels, panels, form inputs and the
   button ranks. */

/* =================== MAIN =================== */
main { flex: 1; min-height: 0; display: flex; position: relative; overflow: hidden; }

.view-panel { display: none; flex: 1; min-height: 0; width: 100%; }
.view-panel.active { display: flex; animation: viewEnter var(--dur-med) var(--ease-out); }
.view-panel.no-enter-anim { animation: none; }   /* keyboard-driven switch: snap, don't replay the enter */

/* generic field labels */
.field-label {
    font-family: var(--font-display); font-weight: 600; font-size: var(--type-data); letter-spacing: var(--track-label); line-height: var(--leading-label); text-transform: uppercase;
    color: var(--accent-color); display: flex; align-items: center; gap: var(--space-snug);
}
.field-label .code { font-family: var(--font-data); color: var(--text-faint); font-weight: 400; letter-spacing: var(--track-tab); }
/* Plain-language decoder for the in-world jargon — keeps the voice, adds a footing. */
.field-hint { font-size: var(--type-caption); line-height: var(--leading-data); color: var(--text-secondary); margin-top: -var(--space-hair); }
.field-hint b { color: var(--text-primary); font-weight: 600; }

/* panel chrome with corner ticks */
.panel { position: relative; background: var(--surface-color); border: 1px solid var(--surface-border); border-radius: var(--radius); }

/* =================== INPUTS / CONTROLS =================== */
input[type="text"], textarea, select {
    font-family: var(--font-body); font-size: var(--type-body);
    background: var(--control-ground); color: var(--text-primary);
    border: 1px solid var(--control-border); border-radius: var(--radius);
    padding: var(--space-snug) var(--space-base); outline: none; transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease; width: 100%;
}
input[type="text"]:focus, textarea:focus, select:focus {
    border-color: var(--accent-color); background-color: var(--control-ground-focus);   /* -color: the shorthand dropped <select>'s chevron on focus */
    box-shadow: 0 0 0 3px var(--focus-ring);
}
::placeholder { color: var(--text-faint); }

select {
    appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: var(--space-section);
    /* A data-URI SVG cannot read a custom property, so the chevron used to
       ship doctrine olive hardcoded into all three themes — the one mark
       in the console that never changed when the theme did. Each theme
       defines the whole URI instead; the rule references a token like
       every other colour here. */
    background-image: var(--select-chevron);
    background-repeat: no-repeat; background-position: right 13px center;
}
select optgroup { font-family: var(--font-display); text-transform: uppercase; color: var(--accent-color); background: var(--optgroup-ground); }
select option { font-family: var(--font-body); color: var(--text-primary); background: var(--option-ground); }

input[type="checkbox"] {
    appearance: none; -webkit-appearance: none; width: 18px; height: 18px; flex-shrink: 0;
    background: var(--surface-recessed); border: 1px solid var(--surface-border-strong); border-radius: 2px; cursor: pointer; position: relative; transition: background 0.16s ease, border-color 0.16s ease;
}
input[type="checkbox"]:checked { background: var(--accent-color); border-color: var(--accent-color); }
input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }

input[type="file"] {
    font-family: var(--font-data); font-size: var(--type-control); color: var(--text-secondary);
    background: var(--dropzone-ground); border: 1px dashed var(--control-border); border-radius: var(--radius); padding: var(--space-snug) var(--space-base); width: 100%;
}
input[type="file"]::file-selector-button {
    font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--track-control); font-size: var(--type-caption);
    background: var(--tint-objective); color: var(--accent-color); border: 1px solid var(--surface-border-strong); border-radius: 2px; padding: var(--space-micro) var(--space-base); margin-right: var(--space-base); cursor: pointer;
}

/* buttons */
button {
    font-family: var(--font-display); font-weight: 500; font-size: var(--type-control); letter-spacing: var(--track-control); text-transform: uppercase;
    background: var(--button-ground); color: var(--text-primary);
    border: 1px solid var(--control-border); border-radius: var(--radius); padding: var(--space-snug) var(--space-shell); cursor: pointer; transition: all 0.16s ease;
}
button:hover { border-color: var(--surface-border-strong); background: var(--tint-objective); }
button:active { transform: translateY(1px); }
/* Inline SVG icon system (self-contained sprite, no runtime dependency).
   Inherits text color via currentColor, so it themes automatically. */
.ico { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -0.16em; flex-shrink: 0;
       fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Visible keyboard focus for every interactive control (was hover/active only). */
button:focus-visible,
.tab-btn:focus-visible,
.theme-switch button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}
/* A focusable region (a tab panel, a table or article that scrolls, the live
   reasoning) draws the same ring inside its own edge, where an ancestor's
   overflow cannot clip it. */
[tabindex="0"]:focus-visible { outline: 2px solid var(--accent-color); outline-offset: -2px; }

/* Three button ranks, and nothing else. The !important that used to sit on
   every declaration here was never needed — a class already outranks the
   bare `button` element rule — but it silently ate any authored override,
   which is how Clear Knowledge Base came to render byte-identical to
   Restore Default Doctrine. Rank is a class now, so it is visible in the
   markup and can be checked.
   ONE PRIMARY PER VIEW. #btn-synthesize used to carry the Command Red fill
   alongside #ingest-btn, so Data Ingestion shipped two competing primaries
   in one column; it is a secondary now, which is the class it was already
   wearing. */
.btn-primary, button#submit-btn, button#ingest-btn {
    background: var(--accent-danger); color: var(--on-danger); border: 1px solid var(--accent-danger); font-weight: 600;
}
.btn-primary:hover, button#submit-btn:hover, button#ingest-btn:hover {
    background: var(--accent-danger-hot); border-color: var(--accent-danger-hot); box-shadow: var(--shadow-action);
}
/* A primary that cannot run says so. DESIGN.md: disabled is never full
   saturation. Measured before this (phase 13): Transmit Order, Re-run this
   order and Recording finished all rendered full Command Red while disabled,
   hover and Action shadow included, so on a projector the presenter's one red
   control looked armed through the whole boot and the whole turn. The label
   and the dashed edge carry it without colour. */
.btn-primary:disabled, button#submit-btn:disabled, button#ingest-btn:disabled,
.btn-primary:disabled:hover, button#submit-btn:disabled:hover, button#ingest-btn:disabled:hover {
    background: transparent; color: var(--text-faint); border: 1px dashed var(--control-border); box-shadow: none; cursor: default;
}
.btn-ghost { background: transparent; color: var(--accent-color); border: 1px solid var(--control-border); }
.btn-ghost:hover { background: var(--tint-objective); border-color: var(--accent-color); }
/* Destructive. Irreversible work never wears the workhorse accent: the
   border and label carry Command Red, the fill stays empty so it can't be
   mistaken for the primary. The icon is the non-colour half of the signal
   — this console is read projected and over compressed video. */
.btn-danger { background: transparent; color: var(--danger-text); border: 1px solid var(--danger-border); }
.btn-danger:hover { background: var(--tint-command); border-color: var(--accent-danger); color: var(--danger-text); }
/* Compact controls that live INSIDE a log entry or a readout box. They
   annotate content rather than commanding the console, so they sit a step
   below the rail buttons. .on-terminal is the phosphor variant, for the
   ones printed on the green readout ground. */
.btn-inline { font-size: var(--type-caption); padding: var(--space-tight) var(--space-snug); background: transparent; color: var(--text-primary); border: 1px solid var(--control-border); }
.btn-inline:hover { background: var(--tint-objective); border-color: var(--accent-color); }
.btn-inline.on-terminal { color: var(--terminal-fg); border-color: var(--terminal-fg); }
.btn-inline.on-terminal:hover { background: var(--tint-terminal); border-color: var(--terminal-fg); }
/* Lowest rank: reads as text, used where a bordered control would be
   heavier than the thing it undoes. */
.btn-link { background: transparent; border: none; color: var(--accent-color); font-size: var(--type-data); padding: 0; letter-spacing: var(--track-control); }
.btn-link:hover { background: transparent; color: var(--text-primary); text-decoration: underline; }