/* seed-control.css — shared random-seed widget.
   Pairs with shared/js/rng_utils.js (window.SeedControl).
   Sized to sit inside a <details class="advanced-settings"> panel without
   restyling it, and to stand alone in a primary control column. */

.seed-ctl {
    display: block;
    font-size: 0.9rem;
    color: var(--app-text, #1f2a37);
}

.seed-ctl-label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}

.seed-ctl-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.seed-ctl-input {
    flex: 1 1 7ch;
    min-width: 7ch;
    padding: 6px 8px;
    font: inherit;
    font-variant-numeric: tabular-nums;
    color: inherit;
    background: var(--app-card-bg, #ffffff);
    border: 1px solid var(--app-border, #d6dfea);
    border-radius: 6px;
}

.seed-ctl-input:focus-visible {
    outline: 2px solid var(--app-accent, #2a7de1);
    outline-offset: 1px;
}

.seed-ctl-btn {
    flex: 0 0 auto;
    padding: 6px 10px;
    font: inherit;
    font-size: 0.85rem;
    white-space: nowrap;
    cursor: pointer;
    color: var(--app-text, #1f2a37);
    background: var(--app-subtle-bg, #f4f7fb);
    border: 1px solid var(--app-border, #d6dfea);
    border-radius: 6px;
}

.seed-ctl-btn:hover {
    border-color: var(--app-accent, #2a7de1);
    color: var(--app-accent, #2a7de1);
}

.seed-ctl-btn:focus-visible {
    outline: 2px solid var(--app-accent, #2a7de1);
    outline-offset: 2px;
}

.seed-ctl-hint,
.seed-ctl-status {
    margin: 6px 0 0 0;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--app-muted, #5f6b7a);
}

/* Reserve the line so flashing a message never reflows the panel. */
.seed-ctl-status {
    min-height: 1.1em;
    color: var(--app-accent, #2a7de1);
}

@media (max-width: 480px) {
    .seed-ctl-input {
        flex-basis: 100%;
    }
}