/* falakbin.ir/constellations (ConstellationPages): the chart and the numbers side by side, a phone's
   one under the other; the lists of the 88. The chart is the night sky, dark on both themes. */

.flk-kicker a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.flk-kicker a:hover { color: var(--orange-hi); }

.flk-cs-top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; margin-top: 18px; align-items: start; }
.flk-cs-figure { margin: 0; }
.flk-cs-chart { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); }
.flk-cs-figure figcaption { margin-top: 6px; color: var(--muted); font-size: .78rem; line-height: 1.8; }
.flk-cs-sky { fill: #03141a; }
.flk-cs-bound { fill: rgba(63, 202, 195, .05); stroke: rgba(63, 202, 195, .55); stroke-width: 1; stroke-dasharray: 4 4; }
.flk-cs-line { fill: none; stroke: #ffb054; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; opacity: .9; }
.flk-cs-star { fill: #f2fbff; }
.flk-cs-far { opacity: .28; }
.flk-cs-name { fill: #cfe9e6; font-family: Vazirmatn, Tahoma, sans-serif; font-size: 13px; font-weight: 700; paint-order: stroke; stroke: #03141a; stroke-width: 3px; }

.flk-cs-facts { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.flk-cs-facts dl { margin: 0; display: grid; gap: 12px; }
.flk-cs-facts dt { color: var(--muted); font-size: .78rem; }
.flk-cs-facts dd { margin: 2px 0 0; font-weight: 700; line-height: 1.8; }
.flk-cs-go { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }

.flk-cs-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.flk-cs-list a { display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; color: var(--fg); text-decoration: none; }
.flk-cs-list a:hover { border-color: var(--teal); }
.flk-cs-list b { font-weight: 800; }
.flk-cs-list small { color: var(--muted); font-size: .76rem; }
.flk-cs-list .flk-cs-famous { border-color: var(--teal-soft); background: linear-gradient(var(--teal-soft), var(--teal-soft)), var(--surface); }

.flk-cs-deep { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.flk-cs-deep li { display: flex; align-items: baseline; gap: 10px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.flk-cs-deep b { color: var(--orange-ink); font-weight: 900; min-width: 2.6em; }
.flk-cs-deep span { flex: 1; }
.flk-cs-deep small { color: var(--muted); font-size: .76rem; }

@media (max-width: 860px) {
    .flk-cs-top { grid-template-columns: minmax(0, 1fr); }
}
/* The constellation's story in two columns, as a lab's «how it works». */
.flk-cs-story .flk-cs-cols { columns: 2 320px; column-gap: 32px; max-width: none; }
.flk-cs-story .flk-cs-cols p { break-inside: avoid; margin-top: 0; }