/* falakbin.ir/lab/elements: this lab's own rules, after sims.css (docs/plans/lab-wave3.md).
   The table on a dark board (it is the sky's chemistry, dark on both themes, like every scene), the
   journey's scene and the element's card side by side under it. The six factories' colours are
   fixed here (--o-*), chosen so every pair stays apart for colour-blind readers too. */

.flk-el {
    --o-bb: #a99ff6; --o-cr: #4fe3cc; --o-lm: #ffc93c; --o-ms: #e07b2c; --o-wd: #5b6cf0; --o-ns: #d0459a;
    --o-rad: #6f8487; --o-made: #2c3f43;
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-areas: "board board" "stage panel";
}
.flk-el-board { grid-area: board; }
.flk-el .flk-el-journey { grid-area: stage; }
.flk-el .flk-el-panel { grid-area: panel; }

/* ---- The board: dark on both themes, so its controls wear the dark tokens. ---- */
.flk-el-board {
    --fg: #e7f5f3; --muted: #93b8b6; --bg: #03181c; --bg-2: #062429; --surface: #0a2e34; --surface-2: #0f3b42;
    --line: #1a4e56; --line-soft: #12424a; --teal: #22b3ad; --teal-ink: #6fe0d8; --teal-soft: #0e3f45; --orange-ink: #ffb054;
    container: elboard / inline-size;
    display: flex; flex-direction: column; gap: 12px; min-width: 0;
    padding: 14px; border-radius: var(--radius); border: 1px solid var(--line); background: #03141a; color: var(--fg); box-shadow: var(--shadow);
}

.flk-el-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.flk-el-key {
    display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px;
    border: 1px solid rgba(147, 184, 182, .22); background: rgba(10, 46, 52, .7); color: var(--fg); font: inherit; font-size: .8rem; font-weight: 700;
}
button.flk-el-key { cursor: pointer; }
button.flk-el-key:hover { border-color: rgba(147, 184, 182, .5); }
button.flk-el-key[aria-pressed="true"] { border-color: #ff8c1a; background: rgba(255, 140, 26, .14); }
.flk-el-key-static { background: none; border-style: dashed; color: var(--muted); font-weight: 600; }
.flk-el-sw { display: inline-block; flex: none; width: 13px; height: 13px; border-radius: 4px; vertical-align: -2px; }
.flk-el-sw-bb { background: var(--o-bb); } .flk-el-sw-cr { background: var(--o-cr); } .flk-el-sw-lm { background: var(--o-lm); }
.flk-el-sw-ms { background: var(--o-ms); } .flk-el-sw-wd { background: var(--o-wd); } .flk-el-sw-ns { background: var(--o-ns); }
.flk-el-sw-rad { background: repeating-linear-gradient(135deg, #6f8487 0 3px, #2c3f43 3px 6px); }
.flk-el-sw-made { background: none; border: 1.5px dashed #93b8b6; }

/* ---- The table: 18 columns, the f-block in rows 9 and 10, row 8 a gap. Laid left to right, as everywhere. ---- */
.flk-el-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #1a4e56 transparent; padding-bottom: 2px; }
.flk-el-table {
    position: relative; display: grid; gap: 3px; min-width: 0;
    grid-template-columns: repeat(18, minmax(0, 1fr));
    grid-template-rows: repeat(7, auto) 8px repeat(2, auto);
}
/* Until the script lays the cells, the table keeps their room (18 columns of cells 1:1.12, nine rows, a gap row): no jump. */
.flk-el-table:empty { aspect-ratio: 1.76; }
.flk-el-r1 { grid-row: 1; } .flk-el-r2 { grid-row: 2; } .flk-el-r3 { grid-row: 3; } .flk-el-r4 { grid-row: 4; } .flk-el-r5 { grid-row: 5; }
.flk-el-r6 { grid-row: 6; } .flk-el-r7 { grid-row: 7; } .flk-el-r9 { grid-row: 9; } .flk-el-r10 { grid-row: 10; }
.flk-el-c1 { grid-column: 1; } .flk-el-c2 { grid-column: 2; } .flk-el-c3 { grid-column: 3; } .flk-el-c4 { grid-column: 4; } .flk-el-c5 { grid-column: 5; } .flk-el-c6 { grid-column: 6; }
.flk-el-c7 { grid-column: 7; } .flk-el-c8 { grid-column: 8; } .flk-el-c9 { grid-column: 9; } .flk-el-c10 { grid-column: 10; } .flk-el-c11 { grid-column: 11; } .flk-el-c12 { grid-column: 12; }
.flk-el-c13 { grid-column: 13; } .flk-el-c14 { grid-column: 14; } .flk-el-c15 { grid-column: 15; } .flk-el-c16 { grid-column: 16; } .flk-el-c17 { grid-column: 17; } .flk-el-c18 { grid-column: 18; }

.flk-el-cell {
    position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; aspect-ratio: 1 / 1.12;
    padding: 8% 0 18%; margin: 0; border: 1px solid rgba(147, 184, 182, .14); border-radius: 6px;
    background-color: #0a2a30; color: #f2fbfa; font: inherit; line-height: 1; cursor: pointer; overflow: hidden;
    transition: transform .12s ease, opacity .2s ease, box-shadow .12s ease;
}
.flk-el-cell:hover { border-color: rgba(231, 245, 243, .55); z-index: 2; }
/* :focus for browsers without :focus-visible (Safari before 15.4), taken back where it is known. */
.flk-el-cell:focus { outline: 2px solid #ff8c1a; outline-offset: 1px; z-index: 3; }
.flk-el-cell:focus:not(:focus-visible) { outline: none; }
.flk-el-cell[aria-pressed="true"] { border-color: #ff8c1a; box-shadow: 0 0 0 2px #ff8c1a, 0 6px 18px rgba(0, 0, 0, .5); transform: scale(1.08); z-index: 4; }
.flk-el-z { position: absolute; top: 3px; left: 4px; font-size: .58rem; font-weight: 700; color: #a9c6c4; line-height: 1; }
.flk-el-sym { font-size: 1rem; font-size: clamp(.78rem, 1.9cqi, 1.12rem); font-weight: 800; letter-spacing: -.01em; }
.flk-el-g { position: absolute; left: 3px; right: 3px; bottom: 3px; height: 17%; border-radius: 3px; background: var(--g, #2c3f43); }
/* The tint of the factory that made most of it. */
.flk-el-d-bb { background-color: rgba(169, 159, 246, .2); } .flk-el-d-cr { background-color: rgba(79, 227, 204, .17); }
.flk-el-d-lm { background-color: rgba(255, 201, 60, .16); } .flk-el-d-ms { background-color: rgba(224, 123, 44, .2); }
.flk-el-d-wd { background-color: rgba(91, 108, 240, .24); } .flk-el-d-ns { background-color: rgba(208, 69, 154, .22); }
.flk-el-rad { background: repeating-linear-gradient(135deg, rgba(147, 184, 182, .2) 0 4px, rgba(147, 184, 182, .05) 4px 8px); }
.flk-el-rad .flk-el-g { background: #4c5d60; }
.flk-el-made { background: transparent; border: 1px dashed rgba(147, 184, 182, .4); }
.flk-el-made .flk-el-sym { color: #93b8b6; font-weight: 700; }
.flk-el-made .flk-el-g { display: none; }
/* Time: how much of it the universe had made (an element not yet made is a ghost). */
.flk-el-lv0 { opacity: .16; } .flk-el-lv1 { opacity: .45; } .flk-el-lv2 { opacity: .65; } .flk-el-lv3 { opacity: .85; }
.flk-el-lv0 .flk-el-g { visibility: hidden; }
/* The filter: the rest dims; with a factory chosen, what it made most of is outlined. */
.flk-el-cell.flk-el-dim { opacity: .14; }
.flk-el-cell.flk-el-dim[aria-pressed="true"] { opacity: .6; }
.flk-el-strong { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .8); }
.flk-el-ph { display: flex; align-items: center; justify-content: center; border: 1px dashed rgba(147, 184, 182, .3); border-radius: 6px; color: #8fb2b0; font-size: .6rem; font-weight: 700; direction: ltr; }

/* The chosen element, in the table's empty bay (columns 3 to 12, rows 1 to 3). */
.flk-el-pick {
    grid-column: 3 / 13; grid-row: 1 / 4; display: flex; align-items: center; gap: 14px; min-width: 0;
    padding: 6px 12px 14px; color: var(--fg); text-align: start;
}
.flk-el-pick-tile, .flk-el-strip-tile, .flk-el-big {
    position: relative; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 12px;
    border: 1px solid rgba(147, 184, 182, .35); background-color: #0a2a30; color: #fff; font-weight: 800; direction: ltr;
}
.flk-el-pick-tile { width: 88px; width: clamp(70px, 13cqi, 104px); aspect-ratio: 1 / 1.1; font-size: 2.2rem; font-size: clamp(1.7rem, 4.6cqi, 2.6rem); box-shadow: 0 0 0 2px #ff8c1a; }
.flk-el-pick-tile .flk-el-z, .flk-el-strip-tile .flk-el-z { font-size: .7rem; top: 6px; left: 7px; }
.flk-el-pick-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.flk-el-pick-text b { font-size: 1.3rem; font-size: clamp(1.1rem, 2.6cqi, 1.45rem); font-weight: 850; line-height: 1.4; }
.flk-el-pick-text small { color: var(--muted); font-size: .78rem; }
.flk-el-pick-lead { font-size: .86rem; line-height: 1.7; color: #dfeeed; }
.flk-el-pick-body { font-size: .78rem; color: var(--orange-ink); font-weight: 700; }
.flk-el-then { font-size: .78rem; color: #c6b8ff; font-weight: 700; }
.flk-el-then[hidden] { display: none; }
.flk-el-minibar { display: flex; gap: 2px; height: 9px; margin: 3px 0 1px; max-width: 320px; direction: ltr; }
.flk-el-minibar .flk-el-bodyseg { border-radius: 3px; }

/* On a narrow board: the table scrolls sideways and the chosen element sits under it. */
.flk-el-swipe { display: none; margin: -6px 0 0; color: var(--muted); font-size: .74rem; text-align: center; }
.flk-el-strip { display: none; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; background: rgba(10, 46, 52, .8); border: 1px solid rgba(147, 184, 182, .2); }
.flk-el-strip-tile { width: 50px; height: 54px; font-size: 1.35rem; }
.flk-el-strip-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.flk-el-strip-text b { font-size: 1.05rem; font-weight: 850; }
.flk-el-strip-text small { color: var(--muted); font-size: .76rem; line-height: 1.6; }
.flk-el-strip .flk-chip { cursor: pointer; font: inherit; font-size: .8rem; flex: none; }

/* ---- The filters and the time ---- */
.flk-el-ctl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 12px 22px; align-items: start; padding-top: 12px; border-top: 1px solid rgba(147, 184, 182, .14); }
.flk-el-seg { align-self: start; }
.flk-el-time { display: flex; flex-direction: column; gap: 8px; }
.flk-el-time .flk-sim-row .flk-btn { padding: 7px 14px; }
.flk-el-time .flk-chip { cursor: pointer; font: inherit; font-size: .82rem; }
.flk-el-ticks { position: relative; height: 1.2em; margin-top: -4px; color: var(--muted); font-size: .7rem; }
.flk-el-ticks span { position: absolute; top: 0; white-space: nowrap; }
.flk-el-ticks span:nth-child(1) { inset-inline-start: 0; }
.flk-el-ticks span:nth-child(2) { inset-inline-start: 70.6%; transform: translateX(50%); }
.flk-el-ticks span:nth-child(3) { inset-inline-end: 0; }

.flk-el-sum { min-height: 2.6em; color: var(--fg); font-size: .88rem; line-height: 1.9; }
.flk-el-sum p { margin: 0; }
.flk-el-sum b { font-weight: 800; }
.flk-el-sum .flk-el-sw { margin-inline-end: 6px; }
.flk-el-sum-note { color: var(--muted); font-size: .82rem; }
.flk-el-bodybar { display: flex; gap: 2px; height: 14px; margin: 6px 0; direction: ltr; }
.flk-el-bodyseg { flex: var(--w, 0) 1 0; min-width: 3px; border-radius: 4px; }
.flk-el-sumks { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.flk-el-sumk { display: inline-flex; align-items: center; font-size: .8rem; font-weight: 700; }

/* ---- The journey ---- */
.flk-el-journey .flk-sim-canvas { touch-action: manipulation; cursor: pointer; }
.flk-el-cap { margin: 0; padding: 10px 14px 12px; min-height: 5.4em; color: #cfe9e6; font-size: .86rem; line-height: 1.95; border-top: 1px solid rgba(147, 184, 182, .14); }

/* ---- The element's card ---- */
.flk-el-head { display: flex; align-items: center; gap: 12px; }
.flk-el-big { width: 58px; height: 62px; font-size: 1.6rem; }
.flk-el-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.flk-el-title h2 { margin: 0; font-size: 1.3rem; font-weight: 850; line-height: 1.5; }
.flk-el-title small { color: var(--muted); font-size: .8rem; }
.flk-el-step { display: flex; gap: 4px; }
.flk-el-step .flk-icon-btn { width: 36px; height: 36px; border: 1px solid var(--line); background: var(--bg-2); color: var(--fg); cursor: pointer; }
.flk-el-step .flk-icon-btn:disabled { opacity: .35; cursor: default; }
.flk-el-step .flk-icon-btn:first-child .flk-i { transform: scaleX(-1); }
.flk-el-shares { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.flk-el-shares li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; font-size: .86rem; }
.flk-el-shares b { font-variant-numeric: tabular-nums; font-weight: 800; }
.flk-el-sh-bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--bg-2); overflow: hidden; }
.flk-el-sh-bar span { display: block; height: 100%; width: calc(var(--w, 0) * 100%); border-radius: 3px; }
.flk-el-sh-wide { grid-template-columns: auto minmax(0, 1fr) !important; }
.flk-el-sh-wide .flk-el-sh-name { color: var(--muted); line-height: 1.8; }
.flk-el-panel .flk-sim-note { color: var(--fg); opacity: .85; }
.flk-el-panel .flk-sim-chips .flk-chip { cursor: pointer; }
:root[data-theme="light"] .flk-el-panel .flk-el-sw, :root[data-theme="light"] .flk-el-sh-bar span { box-shadow: inset 0 0 0 1px rgba(16, 38, 42, .18); }

/* ---- The guided questions under «چرا» ---- */
.flk-el-guide { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 10px; }
.flk-el-guide button {
    display: flex; align-items: center; gap: 12px; width: 100%; height: 100%; padding: 12px 14px; text-align: start;
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px; color: var(--fg); font: inherit; cursor: pointer;
}
.flk-el-guide button:hover { background: var(--teal-soft); }
.flk-el-guide .flk-i { flex: none; width: 22px; height: 22px; color: var(--orange-ink); }
.flk-el-guide span { display: flex; flex-direction: column; gap: 2px; }
.flk-el-guide b { font-weight: 800; }
.flk-el-guide small { color: var(--muted); font-size: .8rem; line-height: 1.7; }

@container elboard (max-width: 700px) {
    .flk-el-table { width: 640px; }
    .flk-el-pick { display: none; }
    .flk-el-strip { display: flex; }
    .flk-el-strip:empty { min-height: 91px; }
    .flk-el-cell { padding: 16% 0 14%; }
    .flk-el-sym { font-size: .84rem; }
    .flk-el-z { font-size: .48rem; top: 2px; left: 3px; }
    .flk-el-ctl { grid-template-columns: minmax(0, 1fr); }
    .flk-el-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
    .flk-el-key { font-size: .72rem; padding: 5px 8px; border-radius: 10px; line-height: 1.5; }
    .flk-el-swipe { display: block; }
}
/* Without container queries (Safari before 16, Chrome before 105): the same by the window's width, the board being
   the page's width less its margins there. */
@supports not (container-type: inline-size) {
    @media (max-width: 740px) {
        .flk-el-table { width: 640px; }
        .flk-el-pick { display: none; }
        .flk-el-strip { display: flex; }
    .flk-el-strip:empty { min-height: 91px; }
        .flk-el-cell { padding: 16% 0 14%; }
        .flk-el-sym { font-size: .84rem; }
        .flk-el-z { font-size: .48rem; top: 2px; left: 3px; }
        .flk-el-ctl { grid-template-columns: minmax(0, 1fr); }
        .flk-el-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
        .flk-el-key { font-size: .72rem; padding: 5px 8px; border-radius: 10px; line-height: 1.5; }
        .flk-el-swipe { display: block; }
    }
}
@media (max-width: 920px) {
    .flk-el { grid-template-columns: minmax(0, 1fr); grid-template-areas: "board" "stage" "panel"; }
}
@media (max-width: 560px) {
    .flk-el-board { padding: 10px; gap: 10px; }
    .flk-el-cap { font-size: .82rem; }
}

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