/* ═══════════════════════════════════════════════════════════════════════════
   Erlyc design-system harmonisation for the editor's dialogs.

   The codegen editor is an OPERATE surface, so it follows the workspace half
   of DESIGN.md: strictly monochrome zinc, hairline borders, 8px radii, soft-ink
   shadows, dense 13-14px text, IBM Plex Mono reserved for labels and metadata
   (the Annotation Rule). Approval-Stamp Purple never appears here
   (the Marketing-Only Purple Rule), and neither does the stock blue the
   prototype's style.css shipped — that is the system's binding anti-reference.

   Loaded after style.css and aaab-overrides.css, so it wins on equal
   specificity; !important appears only where the prototype's own markup
   carries inline styles.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Zinc ramp — the workspace palette, matching the app shell's Flux surfaces. */
    --erlyc-paper: #ffffff;
    --erlyc-surface: #fafafa;       /* zinc-50  */
    --erlyc-surface-2: #f4f4f5;     /* zinc-100 */
    --erlyc-line: #e4e4e7;          /* zinc-200 */
    --erlyc-line-strong: #d4d4d8;   /* zinc-300 */
    --erlyc-muted: #71717a;         /* zinc-500 */
    --erlyc-text-soft: #52525b;     /* zinc-600 */
    --erlyc-text: #3f3f46;          /* zinc-700 */
    --erlyc-ink: #18181b;           /* zinc-900 */

    /* Functional signals. Semantic, not brand accents — allowed in the workspace. */
    --erlyc-good: #15803d;
    --erlyc-good-line: #bbf7d0;
    --erlyc-good-bg: #f6fdf9;
    --erlyc-bad: #b91c1c;
    --erlyc-bad-line: #fecaca;
    --erlyc-bad-bg: #fef7f7;

    --erlyc-radius: 8px;            /* DESIGN.md: panels, buttons, inputs */
    --erlyc-radius-sm: 6px;         /* small tiles */

    /* Overlay veil + soft-ink shadow, per DESIGN.md Elevation. */
    --erlyc-veil: rgb(8 5 10 / 0.88);
    --erlyc-shadow: 0 24px 60px -24px rgb(23 18 28 / 0.35);

    /* Instrument Sans is adopted from the host app's self-hosted stylesheet by
       aaab-bootstrap.js; the stack below is what the standalone shell falls
       back to. The label face follows the workspace rather than DESIGN.md's
       IBM Plex Mono: the app shell does not self-host Plex either, so system
       mono is what actually matches the surface this editor sits inside. */
    --erlyc-font: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --erlyc-font-mono: ui-monospace, SFMono-Regular, 'Cascadia Mono', Menlo, Consolas, monospace;
}

body {
    font-family: var(--erlyc-font);
}

/* ── Modal chrome ─────────────────────────────────────────────────────────
   Shared by every dialog in the editor, so the Laravel Options and Deploy
   Options popups are the same object with different contents. */

.modal {
    background-color: var(--erlyc-veil);
    backdrop-filter: blur(4px);
}

.modal-content {
    background-color: var(--erlyc-paper);
    border: 1px solid var(--erlyc-line);
    border-radius: var(--erlyc-radius);
    box-shadow: var(--erlyc-shadow);
    color: var(--erlyc-text);
    font-size: 13px;
    line-height: 1.5;
}

/* The two large options modals and the deploy modal share one size language:
   header and footer hold their height, the body owns the scroll. */
.erlyc-modal--wide,
.erlyc-modal--md {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    margin: 6vh auto !important;
    max-height: 88vh !important;
}

.erlyc-modal--wide { max-width: 900px !important; }
.erlyc-modal--md { max-width: 640px !important; }

.erlyc-modal--wide > .modal-header,
.erlyc-modal--md > .modal-header,
.erlyc-modal--wide > .modal-footer,
.erlyc-modal--md > .modal-footer { flex: 0 0 auto; }

.erlyc-modal--wide > .modal-body,
.erlyc-modal--md > .modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.modal-header {
    background: var(--erlyc-paper);
    border-bottom: 1px solid var(--erlyc-line);
    border-radius: var(--erlyc-radius) var(--erlyc-radius) 0 0;
    padding: 14px 16px;
}

.modal-header h3 {
    font-family: var(--erlyc-font);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--erlyc-ink);
}

/* A quiet ghost control, not a 28px typographic cross. */
.close {
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    color: var(--erlyc-muted);
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--erlyc-radius-sm);
    transition: background .12s, color .12s;
}

.close:hover {
    background: var(--erlyc-surface-2);
    color: var(--erlyc-ink);
}

.modal-body { padding: 16px; }

.modal-footer {
    background: var(--erlyc-surface);
    border-top: 1px solid var(--erlyc-line);
    border-radius: 0 0 var(--erlyc-radius) var(--erlyc-radius);
    padding: 12px 16px;
    gap: 8px;
}

/* Footers that pair a left-hand note with right-hand actions. */
.erlyc-footer--split { justify-content: space-between !important; }
.erlyc-footer--split > :last-child { margin-left: auto; }

/* ── Buttons ──────────────────────────────────────────────────────────────
   Same vocabulary as the toolbar chips, one step larger for a dialog action. */

.modal .btn {
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    padding: 7px 14px;
    border-radius: var(--erlyc-radius);
    border: 1px solid transparent;
    transition: background .12s, border-color .12s, color .12s;
}

.modal .btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.modal .btn-primary {
    background: var(--erlyc-ink);
    border-color: var(--erlyc-ink);
    color: #fafafa;
}

.modal .btn-primary:not(:disabled):hover {
    background: #27272a;
    border-color: #27272a;
}

.modal .btn-secondary {
    background: var(--erlyc-paper);
    border-color: var(--erlyc-line);
    color: var(--erlyc-text);
}

.modal .btn-secondary:not(:disabled):hover {
    background: var(--erlyc-surface-2);
    border-color: var(--erlyc-line-strong);
    color: var(--erlyc-ink);
}

.modal .btn-danger {
    background: var(--erlyc-paper);
    border-color: var(--erlyc-bad-line);
    color: var(--erlyc-bad);
}

.modal .btn-danger:not(:disabled):hover {
    background: var(--erlyc-bad-bg);
    border-color: #f87171;
}

/* ── Option groups ────────────────────────────────────────────────────────
   Fieldsets are panels; legends are annotations (mono, uppercase, tracked). */

.erlyc-fieldset {
    border: 1px solid var(--erlyc-line) !important;
    border-radius: var(--erlyc-radius) !important;
    padding: 12px 14px 14px !important;
    margin: 0 0 12px !important;
    background: var(--erlyc-paper);
}

.erlyc-legend {
    font-family: var(--erlyc-font-mono) !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    color: var(--erlyc-muted) !important;
    padding: 0 6px !important;
}

/* One option per row: the control hangs in the gutter so the label text — and
   any inline hint inside it — stays on one flowing line. Deliberately NOT a
   grid/flex row: those turn every child (including a trailing <small>) into a
   track item, which throws inline hints into the checkbox column. */
.erlyc-opt {
    display: block !important;
    position: relative;
    padding-left: 24px;
    margin: 0 0 8px !important;
    color: var(--erlyc-text);
    cursor: pointer;
}

.erlyc-opt:last-child { margin-bottom: 0 !important; }

.erlyc-opt > input[type="checkbox"],
.erlyc-opt > input[type="radio"] {
    position: absolute;
    left: 0;
    top: 2px;
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--erlyc-ink);
    cursor: pointer;
}

.erlyc-opt > input:disabled { cursor: not-allowed; }

.erlyc-opt:has(> input:disabled) {
    color: var(--erlyc-muted);
    cursor: not-allowed;
}

/* A block hint belonging to the option above it, aligned to the label column. */
.erlyc-opt__hint {
    display: block !important;
    margin: 2px 0 0 !important;
    color: var(--erlyc-muted) !important;
    font-size: 12px !important;
    line-height: 1.45;
}

/* A dependent OPTION (not just a hint) indented under the one it belongs to. */
.erlyc-opt.erlyc-opt__hint {
    margin: -4px 0 10px 24px !important;
    color: var(--erlyc-text-soft) !important;
}

/* Two-column option layout in the wide options modal. */
.erlyc-cols {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px !important;
}

@media (max-width: 720px) {
    .erlyc-cols { grid-template-columns: 1fr; }
}

/* ── Fields ───────────────────────────────────────────────────────────── */

.erlyc-row { margin: 0 0 10px !important; }

.erlyc-label {
    display: block !important;
    margin: 0 0 4px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--erlyc-text-soft) !important;
}

.erlyc-input,
.modal-body select,
.modal-body input[type="text"],
.modal-body input[type="number"] {
    width: 100% !important;
    padding: 6px 8px !important;
    font-family: inherit;
    font-size: 13px;
    color: var(--erlyc-ink);
    background: var(--erlyc-paper);
    border: 1px solid var(--erlyc-line-strong) !important;
    border-radius: var(--erlyc-radius-sm) !important;
}

.erlyc-input:focus,
.modal-body select:focus,
.modal-body input[type="text"]:focus,
.modal-body input[type="number"]:focus,
.erlyc-opt > input:focus-visible,
.modal .btn:focus-visible,
.close:focus-visible {
    outline: 2px solid var(--erlyc-ink);
    outline-offset: 2px;
    border-color: var(--erlyc-ink) !important;
}

/* ── Presets strip ────────────────────────────────────────────────────── */

.erlyc-presets {
    background: var(--erlyc-surface) !important;
    border: 1px solid var(--erlyc-line);
    border-radius: var(--erlyc-radius) !important;
    padding: 12px !important;
    margin: 0 0 14px !important;
}

.erlyc-presets__title {
    font-family: var(--erlyc-font-mono) !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--erlyc-muted);
    margin: 0 0 8px !important;
}

.erlyc-presets__row {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap;
}

.modal .erlyc-preset {
    flex: 1 1 160px;
    text-align: left;
    background: var(--erlyc-paper);
    border-color: var(--erlyc-line);
    color: var(--erlyc-ink);
    padding: 9px 12px;
}

.modal .erlyc-preset:hover {
    background: var(--erlyc-surface-2);
    border-color: var(--erlyc-line-strong);
}

.erlyc-preset__sub {
    display: block !important;
    margin-top: 2px;
    font-size: 11.5px !important;
    font-weight: 400;
    line-height: 1.35;
    color: var(--erlyc-muted);
    opacity: 1 !important;
}

/* ── Prose + annotations ──────────────────────────────────────────────── */

.erlyc-note-text {
    margin: 0 0 10px !important;
    font-size: 12.5px !important;
    line-height: 1.5;
    color: var(--erlyc-text-soft) !important;
}

.erlyc-note-text--loose { margin-top: 10px !important; }

.erlyc-muted,
.modal-body .erlyc-muted {
    color: var(--erlyc-muted) !important;
    font-size: 12px;
}

.erlyc-hint {
    color: var(--erlyc-muted) !important;
    font-size: 12px !important;
    opacity: 1 !important;
}

.erlyc-mono {
    font-family: var(--erlyc-font-mono);
    font-size: 12px;
    color: var(--erlyc-ink);
}

/* ── Deploy modal: run panels ─────────────────────────────────────────── */

.erlyc-run { margin-bottom: 14px; }

.erlyc-panel {
    border: 1px solid var(--erlyc-line);
    border-radius: var(--erlyc-radius);
    background: var(--erlyc-surface);
    padding: 12px 14px;
}

.erlyc-panel__title {
    display: block;
    margin-bottom: 2px;
    font-size: 13px;
    font-weight: 600;
    color: var(--erlyc-ink);
}

.erlyc-panel--good {
    border-color: var(--erlyc-good-line);
    background: var(--erlyc-good-bg);
}

.erlyc-panel--good .erlyc-panel__title { color: var(--erlyc-good); }

.erlyc-panel--bad {
    border-color: var(--erlyc-bad-line);
    background: var(--erlyc-bad-bg);
}

.erlyc-panel--bad .erlyc-panel__title { color: var(--erlyc-bad); }

.erlyc-panel__detail {
    margin-top: 6px;
    font-size: 12px;
    color: var(--erlyc-bad);
}

/* A quiet aside inside a panel: what the pipeline is waiting on, or why the
   instance came up with different data than was asked for. */
.erlyc-panel__detail-muted {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--erlyc-text-soft);
}

.erlyc-panel__link { margin: 8px 0 2px; }

.erlyc-panel__link a {
    font-family: var(--erlyc-font-mono);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--erlyc-ink);
    text-underline-offset: 3px;
}

/* Credentials read as a spec sheet: mono values, label column at rest. */
.erlyc-creds { margin-top: 10px; }

.erlyc-creds__title {
    font-family: var(--erlyc-font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--erlyc-muted);
    margin-bottom: 4px;
}

.erlyc-creds__table { border-collapse: collapse; }

.erlyc-creds__table th {
    text-align: left;
    font-weight: 400;
    color: var(--erlyc-text-soft);
    padding: 1px 14px 1px 0;
    white-space: nowrap;
}

.erlyc-creds__table td { padding: 1px 0; }

/* Actions offered inside a run panel — stopping a wedged deployment. */
.erlyc-panel__actions {
    margin-top: 10px;
    display: flex;
    gap: 8px;
}

/* Step timeline while a deploy is in flight. */
.erlyc-steps {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 14px;
    font-size: 12px;
}

.erlyc-step { color: var(--erlyc-line-strong); }
.erlyc-step.is-pending { color: var(--erlyc-line-strong); }
.erlyc-step.is-running { color: var(--erlyc-ink); font-weight: 500; }
.erlyc-step.is-completed { color: var(--erlyc-text-soft); }
.erlyc-step.is-failed,
.erlyc-step.is-stopped { color: var(--erlyc-bad); }

.erlyc-blocked {
    margin-bottom: 10px;
    font-size: 12.5px;
    color: var(--erlyc-bad);
}

/* Toggled from JS. A class, not an inline style: the layout rules above use
   !important to beat the prototype's inline markup, and an author !important
   beats a plain inline declaration — so `el.style.display = 'none'` would not
   hide an .erlyc-opt at all. */
.is-hidden { display: none !important; }

/* Options are dimmed, not hidden, while deploying is impossible — the user
   can still read what they would have chosen. */
.is-muted {
    opacity: 0.5;
    pointer-events: none;
}