/* falakbin.ir/dark-sky: Iran's dark-sky atlas (DarkSkyPages, fb-darksky.js).
   The map is a night map on both themes: its own dark ground, like the lab's scenes. The swatches are the map's
   own colour at each Bortle class's middle (ops/dark-sky/tiles.py's palette, a single-hue ramp checked with the
   dataviz validator against the dark surface, 2026-10-07). No inline style: places and scale go through
   fb.cssVars, and the SVG's viewBox is an attribute. */

.flk-ds { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; margin-top: 18px; }
.flk-ds-mapbox { margin: 0; min-width: 0; }
.flk-ds-stage { position: relative; border-radius: var(--radius); overflow: hidden; background: #24393a; border: 1px solid var(--line); touch-action: none; }
.flk-ds-map { display: block; width: 100%; height: auto; aspect-ratio: 865 / 800; cursor: crosshair; user-select: none; -webkit-user-select: none; }
.flk-ds-map.is-drag { cursor: grabbing; }
.flk-ds-map image { image-rendering: auto; }
/* The outline is QuakeSvg's symbol through <use>, whose copies only match selectors from the symbol up; so this
   page does not load quakes.css and gives the symbol's classes its own look here: lines only, no fills, on both
   themes, so the tiles' colours stay the legend's. */
.flk-qz-land { fill: none; stroke: rgba(228, 247, 242, .22); stroke-width: .8; vector-effect: non-scaling-stroke; }
.flk-qz-prov { fill: transparent; stroke: rgba(228, 247, 242, .42); stroke-width: .9; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.flk-qz-prov:hover { fill: rgba(255, 255, 255, .06); }
.flk-qz-lake { fill: none; stroke: none; }
/* Names over the map: light ink with a dark halo (the group's stroke-width is set per zoom by the script). */
.flk-ds-labels { stroke: rgba(4, 14, 16, .88); stroke-linejoin: round; pointer-events: none; }
.flk-ds-lbl { paint-order: stroke; text-anchor: middle; font-family: inherit; font-weight: 700; fill: #f2fbf9; }
.flk-ds-city { font-weight: 850; }
.flk-ds-town { fill: #e2f2ef; }
.flk-ds-village { font-weight: 600; fill: #d4e6e2; }
.flk-ds-prov { fill: rgba(228, 247, 242, .72); font-weight: 600; letter-spacing: .02em; }
.flk-ds-dot { fill: #f2fbf9; stroke: rgba(4, 14, 16, .88); stroke-width: 1; vector-effect: non-scaling-stroke; }
.flk-ds-spot { fill: rgba(4, 14, 16, .55); stroke: #ffd9a8; stroke-width: 2; vector-effect: non-scaling-stroke; cursor: pointer; }
.flk-ds-spot:hover { fill: rgba(255, 217, 168, .35); }
.flk-ds-credit { margin: 0; font-size: .74rem; }
.flk-ds-spotname { font-style: italic; font-weight: 600; fill: #e8ddc6; }
.flk-ds-peak { font-weight: 600; fill: #f1e2c4; }
.flk-ds-peakmark { fill: #f1e2c4; stroke: rgba(4, 14, 16, .88); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* The layers box: what the map shows. Off, a layer's group is not drawn; in Bortle mode the stage behind empty
   classes is darker, and the swatches take the class steps of the ramp (tiles.py's RAMP, the classes' colours). */
.flk-ds-map.no-roads [data-ds-roads], .flk-ds-map.no-labels [data-ds-labels], .flk-ds-map.no-spots [data-ds-spots],
.flk-ds-map.no-outline .flk-ds-outline { display: none; }
.flk-ds.is-bortle .flk-ds-stage { background: #0c1c1e; }
.flk-ds.is-bortle .flk-ds-sw[data-b="1"] { background: #354d4b; }
.flk-ds.is-bortle .flk-ds-sw[data-b="2"] { background: #306561; }
.flk-ds.is-bortle .flk-ds-sw[data-b="3"] { background: #2a7e77; }
.flk-ds.is-bortle .flk-ds-sw[data-b="4"] { background: #32958b; }
.flk-ds.is-bortle .flk-ds-sw[data-b="5"] { background: #4eaa9f; }
.flk-ds.is-bortle .flk-ds-sw[data-b="6"] { background: #76beb3; }
.flk-ds.is-bortle .flk-ds-sw[data-b="7"] { background: #a3cfc7; }
.flk-ds.is-bortle .flk-ds-sw[data-b="8"] { background: #cddfdb; }
.flk-ds.is-bortle .flk-ds-sw[data-b="9"] { background: #e4f7f2; }
.flk-ds-side { display: flex; flex-direction: column; gap: 12px; }
.flk-ds-side .flk-ds-card { position: static; }
.flk-ds-layers { padding: 14px 16px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; gap: 10px; }
.flk-ds-layers[hidden] { display: none; }
.flk-ds-layers .flk-kicker { margin: 0; }
.flk-ds-seg { display: flex; gap: 4px; padding: 4px; background: var(--surface-2); border-radius: 12px; }
.flk-ds-seg button { flex: 1; padding: 7px 8px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }
.flk-ds-seg button[aria-pressed="true"] { background: var(--surface); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); }
.flk-ds-classes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.flk-ds-cls { width: 100%; display: flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--fg); font: inherit; font-size: .82rem; text-align: start; cursor: pointer; }
.flk-ds-cls:hover { background: var(--surface-2); }
.flk-ds-cls span:not(.flk-ds-sw) { flex: 1; }
.flk-ds-cls small { color: var(--muted); font-size: .74rem; }
.flk-ds.is-bortle .flk-ds-cls[aria-pressed="false"] { opacity: .42; }
.flk-ds.is-bortle .flk-ds-cls[aria-pressed="false"] .flk-ds-sw { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.flk-ds-quick { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.flk-ds-toggles { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .84rem; }
.flk-ds-toggles label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.flk-ds-toggles input { accent-color: var(--teal); width: 16px; height: 16px; }
.flk-ds-mark { fill: #ff8c1a; stroke: #0b1d20; stroke-width: 2; vector-effect: non-scaling-stroke; }
.flk-ds-mark-dark { fill: #e4f7f2; stroke: #0b1d20; stroke-width: 2; vector-effect: non-scaling-stroke; }
.flk-ds-line { stroke: #ff8c1a; stroke-width: 1.6; stroke-dasharray: 5 4; fill: none; vector-effect: non-scaling-stroke; }

.flk-ds-tools { position: absolute; top: 10px; inset-inline-start: 10px; display: flex; flex-direction: column; gap: 6px; }
.flk-ds-tools[hidden] { display: none; }
.flk-ds-tool { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(8, 22, 24, .78); color: #e4f7f2; cursor: pointer; }
.flk-ds-tool:hover { background: rgba(8, 22, 24, .95); }
.flk-ds-tool .flk-i { width: 18px; height: 18px; }

.flk-ds-mapbox figcaption { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.flk-ds-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .8rem; color: var(--muted); }
.flk-ds-legend li { display: inline-flex; align-items: center; gap: 5px; }
.flk-ds-legend b { color: var(--fg); }
.flk-ds-hint { margin: 0; font-size: .8rem; }
.flk-ds-hint[hidden] { display: none; }

.flk-ds-sw { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-inline-end: 4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.flk-ds-sw[data-b="1"] { background: #354d4b; }
.flk-ds-sw[data-b="2"] { background: #335452; }
.flk-ds-sw[data-b="3"] { background: #31605d; }
.flk-ds-sw[data-b="4"] { background: #2d867e; }
.flk-ds-sw[data-b="5"] { background: #51aba0; }
.flk-ds-sw[data-b="6"] { background: #7dc1b6; }
.flk-ds-sw[data-b="7"] { background: #9cccc4; }
.flk-ds-sw[data-b="8"] { background: #b8d7d1; }
.flk-ds-sw[data-b="9"] { background: #d4e6e2; }

.flk-ds-card { position: sticky; top: 76px; padding: 14px 16px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; gap: 8px; }
.flk-ds-card .flk-kicker { margin: 0; }
.flk-ds-where { margin: 0; font-weight: 850; font-size: 1.05rem; }
.flk-ds-big { margin: 0; font-size: 1.02rem; }
.flk-ds-big .flk-ds-sw { width: 16px; height: 16px; vertical-align: -3px; }
.flk-ds-big b { color: var(--orange-ink); }
.flk-ds-facts { margin: 0; display: grid; gap: 6px; }
.flk-ds-facts div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 10px; background: var(--surface-2); font-size: .84rem; }
.flk-ds-facts dt { color: var(--muted); }
.flk-ds-facts dd { margin: 0; font-weight: 750; text-align: end; }
.flk-ds-facts small { display: block; font-weight: 400; font-size: .7rem; color: var(--muted); }
.flk-ds-about { margin: 0; font-size: .86rem; line-height: 1.8; }
.flk-ds-near { margin: 0; padding: 8px 10px; border-radius: 10px; border: 1px dashed var(--line); font-size: .86rem; line-height: 1.8; }
.flk-ds-near[hidden] { display: none; }
.flk-ds-links { margin: 0; }
.flk-ds-note { margin: 0; font-size: .76rem; }

.flk-ds-table td, .flk-ds-table th[scope="row"] { white-space: nowrap; }
.flk-ds-table td:last-child { white-space: normal; }
.flk-ds-spots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: .82rem; color: var(--muted); }
.flk-ds-go { display: inline-flex; align-items: center; gap: 2px; padding: 1px 7px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--fg); font: inherit; font-weight: 700; cursor: pointer; }
.flk-ds-go:disabled { cursor: default; }
.flk-ds-go:not(:disabled):hover { border-color: var(--teal); }

.flk-ds-places { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.flk-ds-places a { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; padding: 9px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--fg); text-decoration: none; font-size: .88rem; }
.flk-ds-places a:hover { border-color: var(--teal); }
.flk-ds-places a span:last-child { flex-basis: 100%; color: var(--muted); font-size: .78rem; }

.flk-ds-scale { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.flk-ds-scale li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.flk-ds-scale .flk-ds-sw { width: 18px; height: 18px; margin-top: 4px; }
.flk-ds-scale p { margin: 2px 0 0; font-size: .84rem; color: var(--muted); line-height: 1.8; }

@media (max-width: 900px) {
    .flk-ds { grid-template-columns: minmax(0, 1fr); }
    .flk-ds-card { position: static; }
}