/* falakbin.ir/lab/spectra: the spectrum detective (fb-sim-spectra.js), after sims.css. */

.flk-spec [hidden] { display: none !important; }
.flk-spec-modes button { padding: 7px 6px; font-size: .86rem; }
.flk-spec-part { display: flex; flex-direction: column; gap: 12px; }
.flk-spec-part > .flk-sim-note { margin: 0; }
.flk-spec-pick { flex: 1 1 150px; min-width: 0; display: flex; }
.flk-spec-pick .flk-sim-select { width: 100%; }
.flk-spec .flk-sim-ctl .flk-sim-select { width: 100%; }
.flk-spec-classes { flex-wrap: nowrap; direction: ltr; }
/* Hot on the left, as on the class chart under the scene; the template slides as the wavelengths run, left to right. */
.flk-spec [data-spec-zt], .flk-spec-nudges { direction: ltr; }
.flk-spec-classes button { min-width: 0; padding: 5px 0; font-family: inherit; font-weight: 800; letter-spacing: .02em; }
.flk-spec-label { margin: 2px 0 -6px; color: var(--muted); font-size: .8rem; font-weight: 700; }
.flk-spec-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.flk-spec-chips .flk-chip { cursor: pointer; font: inherit; font-size: .8rem; padding: 3px 10px; gap: 6px; min-height: 30px; }
.flk-spec-chips .flk-chip bdi { color: var(--muted); font-size: .76rem; font-weight: 700; }
.flk-spec-chips .flk-chip[aria-pressed="true"] bdi { color: inherit; }
.flk-spec-zoom .flk-chip { min-width: 34px; justify-content: center; }
.flk-spec-zoom [data-spec-norm] { margin-inline-start: auto; }
.flk-sim-row-sm [data-spec-nudge] { min-width: 44px; justify-content: center; font-size: 1rem; line-height: 1.4; }

/* Each group's colour, as the scene draws its lines (on its dark space). */
.flk-spec-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(3, 20, 26, .55); opacity: .45; }
[aria-pressed="true"] > .flk-spec-dot { opacity: 1; }
.flk-spec-el-h { background: #3fcac3; } .flk-spec-el-e { background: #b4a8ff; } .flk-spec-el-k { background: #2f6bff; }
.flk-spec-el-n { background: #ff8c1a; } .flk-spec-el-g { background: #a4e05a; } .flk-spec-el-f { background: #fff1a8; }
.flk-spec-el-t { background: #ff3d3d; } .flk-spec-el-m { background: #ff5ab4; } .flk-spec-el-x { background: #ffffff; }
.flk-spec-mol-w { background: #2f6bff; } .flk-spec-mol-m { background: #a4e05a; } .flk-spec-mol-c { background: #ff8c1a; }
.flk-spec-mol-o { background: #b4a8ff; } .flk-spec-mol-s { background: #ff3d3d; } .flk-spec-mol-n { background: #fff1a8; } .flk-spec-mol-k { background: #ff5ab4; }

/* The answer to a check: no score, only what is right and why. */
.flk-spec-result { margin: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); font-size: .86rem; line-height: 1.9; }
.flk-spec-ok { border-color: var(--ok); }
.flk-spec-near { border-color: var(--warn); }
.flk-spec-off { border-color: var(--orange); }
.flk-spec .flk-sim-read dd { font-size: .92rem; }

/* The seven classes under the scene. */
.flk-spec-classlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.flk-spec-classlist li { display: flex; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.flk-spec-classlist button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; background: none; border: 0; color: var(--fg); font: inherit; text-align: start; cursor: pointer; }
.flk-spec-classlist button:hover { background: var(--teal-soft); }
.flk-spec-cls { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; font-weight: 900; font-size: 1.15rem; color: #10262a; box-shadow: 0 0 14px rgba(255, 255, 255, .12); }
/* The colour of a black body at each class's typical temperature (sRGB, as the scene's chart uses them). */
.flk-spec-cls-o { background: #9db4ff; } .flk-spec-cls-b { background: #b2c5ff; } .flk-spec-cls-a { background: #dde5ff; }
.flk-spec-cls-f { background: #fbf6ff; } .flk-spec-cls-g { background: #fff1df; } .flk-spec-cls-k { background: #ffd2a1; } .flk-spec-cls-m { background: #ffb46b; }
.flk-spec-cls-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.flk-spec-cls-text small { color: var(--muted); font-size: .8rem; line-height: 1.8; }
.flk-spec-cls-text .flk-spec-cls-eg { color: var(--teal-ink); }

@media (max-width: 560px) {
    .flk-spec-modes button { font-size: .8rem; padding: 7px 2px; }
    .flk-spec-classlist { grid-template-columns: minmax(0, 1fr); }
}

/* Comfortable touch controls, with visible keyboard focus. */
.flk-spec .flk-chip, .flk-spec .flk-sim-seg button { min-height: 44px; }
.flk-spec button:focus-visible { outline: 2px solid var(--orange-ink); outline-offset: 3px; }