/* Keep the complete branded scientist portrait in its home card. */
.flk-hm-card[data-module="vivairan"] .flk-hm-cover { aspect-ratio: 1200 / 630; object-fit: contain; }

/* falakbin.ir: the home page. Loaded after public.css on / alone; colours
   and pieces come from there (tokens, .flk-tile, .flk-btn, .flk-chip). */

/* The hero bleeds to the window's edges (100vw counts the scrollbar too), so the page never scrolls sideways.
   On body, not html: the viewport takes it over, a long-supported path that keeps the header sticky in Firefox. */
body { overflow-x: hidden; }
/* The home grids are drawn for the content width, not the shell with its column: wider, they leave holes. */
.flk-hm { max-width: var(--frame); margin-inline: auto; padding-bottom: 12px; }
.flk-hm-bots .flk-sec-head { flex-wrap: wrap; }

/* ---- Hero: the Earth right now behind the day's words ------------------- */
.flk-hm-hero {
    position: relative; isolation: isolate; overflow: hidden;
    width: 100vw; margin-inline: calc(50% - 50vw);
    min-height: clamp(470px, 46vw, 640px);
    display: flex; align-items: flex-end;
    background:
        radial-gradient(900px 420px at 30% 40%, rgba(34, 179, 173, .12), transparent 70%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
    border-bottom: 1px solid var(--line-soft);
}
.flk-hm-map { position: absolute; inset: 0; z-index: -1; }
.flk-hm-canvas { display: block; width: 100%; height: 100%; }
.flk-hm-canvas[hidden] { display: none; }
/* While the globe loads (fb-hero.js adds .flk-hm-ready once it or the flat map is drawn): a soft disc where the
   Earth will stand (the globe's own centre, 30% from the left beside the words) and a ring turning in it. With no
   script it fades out by itself. */
.flk-hm-wait { position: absolute; left: 30%; top: 52%; transform: translate(-50%, -50%); margin: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 12px; width: clamp(220px, 34vw, 520px); aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle at 42% 38%, rgba(34, 179, 173, .16), rgba(34, 179, 173, .05) 62%, transparent 72%);
    color: var(--muted); font-size: .84rem; pointer-events: none; animation: flk-hm-wait-out .6s ease 20s forwards; }
.flk-hm-wait-ring { width: 46px; height: 46px; box-sizing: border-box; border-radius: 50%; border: 3px solid var(--line);
    border-top-color: var(--teal); animation: flk-ct-spin .9s linear infinite; }
.flk-hm-ready .flk-hm-wait { display: none; }
@keyframes flk-hm-wait-out { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .flk-hm-wait-ring { animation-duration: 2.4s; } }
/* The globe's layers (fb-globe.js): the air behind, the Earth, then what moves. */
.flk-globe-layer { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* The cursor is fb-globe.js's: grab over the Earth, the arrow around it. */
/* The words sit on a soft scrim on the reading side. */
.flk-hm-hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(270deg, rgba(3, 24, 28, .86) 0%, rgba(3, 24, 28, .6) 34%, rgba(3, 24, 28, 0) 62%),
        linear-gradient(0deg, rgba(3, 24, 28, .85) 0%, rgba(3, 24, 28, 0) 34%);
}
:root[data-theme="light"] .flk-hm-hero::after {
    background: linear-gradient(270deg, rgba(246, 241, 230, .96) 0%, rgba(246, 241, 230, .78) 34%, rgba(246, 241, 230, 0) 62%),
        linear-gradient(0deg, rgba(246, 241, 230, .9) 0%, rgba(246, 241, 230, 0) 34%);
}
.flk-hm-hero-text {
    width: 100%; max-width: var(--frame); margin: 0 auto; padding: 40px 16px 26px;
}
.flk-hm-hero-text > * { max-width: 560px; }
/* The words' box spans the hero; only the words themselves catch the pointer, so the globe beside them turns. */
.flk-hm-hero-text { pointer-events: none; }
.flk-hm-hero-text > * { pointer-events: auto; }
/* The name first: the mark alive, «فلک‌بین» large, the address under it. */
.flk-hm-brand { display: flex; align-items: center; gap: 16px; margin: 0 0 6px; }
.flk-hm-logo { width: clamp(72px, 9vw, 104px); height: auto; }
/* The gradient paints only inside the box, so the box holds the dots above «ف» and below «ب» (padding, cancelled by the margin);
   Persian letters are joined, so no letter-spacing. */
.flk-hm-wordmark { margin: -.22em 0 -.12em; padding: .22em 0 .12em; font-size: clamp(2.4rem, 6.4vw, 4.2rem); font-weight: 900; line-height: 1.05;
    background: linear-gradient(100deg, var(--fg) 30%, var(--teal-ink) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.flk-hm-sub { margin: 8px 0 0; font-size: clamp(1rem, 1.9vw, 1.3rem); font-weight: 800; color: var(--teal-ink); line-height: 1.4; }
.flk-hm-host { margin: 4px 0 0; font-size: clamp(.78rem, 1.3vw, .95rem); font-weight: 800; letter-spacing: .34em; text-transform: uppercase; color: var(--orange-ink); text-align: right; }
.flk-hm-intro { text-wrap: balance; margin: 6px 0 18px; font-size: clamp(1.02rem, 1.7vw, 1.2rem); font-weight: 700; line-height: 1.9; }
/* What the site is behind it, in three figures: the site's identity line. */
.flk-hm-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 22px; padding: 12px 0; border-radius: 18px;
    border: 1px solid var(--line); background: var(--glass); color: var(--fg); text-decoration: none; transition: border-color .2s var(--ease); }
.flk-hm-figures:hover { border-color: var(--teal); color: var(--fg); }
.flk-hm-figures > span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 10px; text-align: center; color: var(--muted); font-size: .85rem; line-height: 1.5; }
.flk-hm-figures > span + span { border-inline-start: 1px solid var(--line); }
.flk-hm-figures b { color: var(--teal-ink); font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 900; line-height: 1.2; font-variant-numeric: tabular-nums; }
.flk-hm-figures b small { font-size: .7em; margin-inline-start: 1px; }
.flk-hm-today { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 12px; }
.flk-hm-today > b { font-size: 1rem; font-weight: 800; }
.flk-hm-dates { color: var(--muted); font-size: .88rem; }
.flk-hm-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
/* The site's other main parts: a quiet row under the calls, lighter than any button, so the orange one still leads. */
.flk-hm-jumps { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin: 0 0 18px; font-size: .86rem; }
.flk-hm-jumps-k { color: var(--muted); font-size: .8rem; margin-inline-end: 4px; }
.flk-hm-jumps a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 3px 10px; border-radius: 999px; color: var(--fg);
    font-weight: 700; text-decoration: none; transition: background-color .15s var(--ease), color .15s var(--ease); }
.flk-hm-jumps a .flk-i { width: 1.05em; height: 1.05em; color: var(--teal-ink); }
.flk-hm-jumps a:hover { background: var(--teal-soft); color: var(--teal-ink); }
.flk-hm-jumps a:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.flk-hm-key { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--muted); font-size: .78rem; }
.flk-hm-key li { display: inline-flex; align-items: center; }
/* Each item turns its layer of the globe on and off (fb-hero.js). */
.flk-hm-key-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 8px; border: 0; border-radius: 8px; background: transparent;
    color: var(--muted); font: inherit; cursor: pointer; transition: color .15s var(--ease), background-color .15s var(--ease), opacity .15s var(--ease); }
.flk-hm-key-btn:hover { color: var(--fg); background: var(--teal-soft); }
.flk-hm-key-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.flk-hm-key-btn[aria-pressed="false"] { opacity: .5; text-decoration: line-through; text-decoration-thickness: 1px; }
.flk-hm-key-btn[aria-pressed="false"] i { filter: grayscale(1); box-shadow: none; }
.flk-hm-key i { flex: none; display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
/* The swatches draw what the globe draws. */
.flk-hm-k-iss { background: var(--orange); box-shadow: 0 0 8px var(--orange); }
.flk-hm-k-tiangong { background: #bcd0ff; box-shadow: 0 0 8px rgba(143, 176, 255, .8); }
.flk-hm-k-hubble { background: #7ddc8f; box-shadow: 0 0 8px rgba(125, 220, 143, .8); }
/* As the globe draws a quake: a red dot on a dark edge, and its ring. */
.flk-hm-key .flk-hm-k-quakes { width: 7px; height: 7px; margin: 0 2px; background: #ff5448; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px #ff5448; }
:root[data-theme="light"] .flk-hm-key .flk-hm-k-quakes { background: #c82822; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px #c82822; }
.flk-hm-key .flk-hm-k-launch { width: 10px; height: 9px; border-radius: 0; background: #c4b5ff; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
:root[data-theme="light"] .flk-hm-key .flk-hm-k-launch { background: #6f58e0; }
.flk-hm-k-sky { background: linear-gradient(90deg, #dce6f5 50%, #ffc45c 50%); box-shadow: 0 0 8px rgba(255, 196, 92, .6); }
:root[data-theme="light"] .flk-hm-k-sky { background: linear-gradient(90deg, #8d9bb3 50%, #f0a020 50%); }
/* The reader's city: where the clock sits, and the way to change it. */
.flk-hm-key-city { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; margin: -3px 0; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font: inherit; cursor: pointer; }
.flk-hm-key-city[hidden] { display: none; }
.flk-hm-key-city b { color: var(--fg); font-weight: 700; }
/* «change» as a small pencil, the word kept for screen readers. */
.flk-hm-key-city .flk-i.flk-hm-key-edit { color: var(--teal-ink); opacity: .8; }
.flk-hm-key-city:hover .flk-i.flk-hm-key-edit { opacity: 1; }
.flk-hm-key-city .flk-i { width: 1em; height: 1em; color: var(--orange-ink); }
.flk-hm-key-city:hover, .flk-hm-key-city:focus-visible { border-color: var(--teal); background: var(--teal-soft); }

/* The card a tap on the globe opens, over the point it is about (fb-hero.js places it). */
.flk-hm-tip { position: absolute; z-index: 3; left: var(--tip-x, 0); top: var(--tip-y, 0); width: max-content; max-width: min(300px, calc(100% - 24px));
    padding: 10px 14px 12px; padding-inline-end: 36px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--fg);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .35); font-size: .84rem; line-height: 1.7;
    opacity: 0; transform: translateY(4px); transition: opacity .16s var(--ease), transform .16s var(--ease); }
.flk-hm-tip[hidden] { display: none; }
.flk-hm-tip-on { opacity: 1; transform: none; }
.flk-hm-tip-below { transform: translateY(-4px); }
.flk-hm-tip-below.flk-hm-tip-on { transform: none; }
/* Its pointer, down to the point (or up to it, when the card sits under it). */
.flk-hm-tip::after { content: ""; position: absolute; left: calc(var(--tip-a, 50%) - 6px); bottom: -6px; width: 11px; height: 11px;
    background: var(--surface); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(45deg); }
.flk-hm-tip-below::after { bottom: auto; top: -6px; border: 0; border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.flk-hm-tip p { margin: 0; }
.flk-hm-tip-k { color: var(--muted); font-size: .76rem; }
.flk-hm-tip-t { font-size: .95rem; }
.flk-hm-tip-t b { font-weight: 800; }
.flk-hm-tip-m { color: var(--muted); }
.flk-hm-tip-row { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.flk-hm-tip-go { display: inline-flex; align-items: center; gap: 2px; margin-top: 6px; padding: 0; border: 0; background: none; color: var(--teal-ink);
    font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.flk-hm-tip-go:hover { text-decoration: underline; text-underline-offset: 3px; }
.flk-hm-tip-go .flk-i { width: 1em; height: 1em; }
.flk-hm-tip-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; }
.flk-hm-tip-list a { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; padding: 4px 6px; margin: 0 -6px; border-radius: 8px; color: var(--fg); text-decoration: none; }
.flk-hm-tip-list a:hover { background: var(--teal-soft); }
.flk-hm-tip-list b { grid-row: span 2; align-self: center; min-width: 2.2em; color: var(--bad); font-weight: 900; }
.flk-hm-tip-list small { color: var(--muted); font-size: .74rem; }
.flk-hm-tip-x { position: absolute; top: 6px; inset-inline-end: 6px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
    border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.flk-hm-tip-x:hover { color: var(--fg); background: var(--teal-soft); }
.flk-hm-tip-x .flk-i { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .flk-hm-tip { transition: none; transform: none; } }

@media (max-width: 760px) {
    .flk-hm-hero { flex-direction: column; align-items: stretch; min-height: 0; }
    .flk-hm-map { position: relative; inset: auto; order: 2; aspect-ratio: 1.55; z-index: 0; }
    .flk-hm-map.flk-hm-globe { aspect-ratio: 1.08; }
    .flk-hm-wait { left: 50%; top: 50%; width: min(200px, 80%); }
    .flk-hm-hero::after { display: none; }
    .flk-hm-hero-text { padding: 22px 16px 6px; }
    .flk-hm-brand { gap: 12px; }
    .flk-hm-key { margin-top: 4px; }
    /* The call on its own line, the two others as a pair under it. */
    .flk-hm-hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .flk-hm-hero-actions .flk-btn { justify-content: center; padding-inline: 10px; }
    .flk-hm-hero-actions .flk-btn-primary { grid-column: 1 / -1; }
    /* The other parts as a row of small tiles, one tap each. */
    .flk-hm-jumps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; font-size: .74rem; }
    .flk-hm-jumps-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .flk-hm-jumps a { flex-direction: column; justify-content: center; gap: 4px; min-height: 58px; padding: 6px 2px; border-radius: 12px;
        border: 1px solid var(--line-soft); background: var(--glass); text-align: center; white-space: nowrap; }
    .flk-hm-jumps a .flk-i { width: 20px; height: 20px; }
}

/* ---- Section heads that name the reader's city ------------------------- */
.flk-hm-incity { color: var(--muted); font-weight: 600; font-size: .78em; white-space: nowrap; }
.flk-hm-incity b { color: var(--teal-ink); font-weight: 800; }
.flk-hm-city { cursor: pointer; font: inherit; font-size: .85rem; }
.flk-hm-sec { scroll-margin-top: calc(var(--top-h) + 12px); }
.flk-hm-now { margin-top: 22px; }
.flk-hm-now .flk-tile-note .flk-rel { color: var(--fg); }
.flk-hm-now .flk-tile-live .flk-tile-note .flk-rel { color: var(--orange-ink); font-weight: 700; }

/* ---- The cards' grid: lead cards across, the rest by how many there are -- */
.flk-hm-feature + .flk-hm-feature, .flk-hm-feature + .flk-hm-cards { margin-top: 14px; }
/* Dense: a wide card never leaves a hole that a later card could fill. */
.flk-hm-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 14px; align-items: stretch; }
.flk-hm-n1 { grid-template-columns: minmax(0, 1fr); }
.flk-hm-n2, .flk-hm-n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.flk-hm-n3, .flk-hm-n5, .flk-hm-n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.flk-hm-span-2 { grid-column: span 2; }
@media (max-width: 980px) {
    .flk-hm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .flk-hm-n1 { grid-template-columns: minmax(0, 1fr); }
    .flk-hm-span-2 { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .flk-hm-cards { grid-template-columns: minmax(0, 1fr) !important; }
}

.flk-hm-card {
    position: relative; min-width: 0; display: flex; flex-direction: column; gap: 12px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px;
    box-shadow: var(--shadow);
}
.flk-hm-feature { padding: 18px 20px; background: linear-gradient(160deg, var(--surface) 0%, var(--bg-2) 100%); }
.flk-hm-head { display: flex; align-items: flex-start; gap: 10px; }
.flk-hm-head h3 { font-size: 1.06rem; font-weight: 850; margin: 0; line-height: 1.5; }
.flk-hm-head h3 a { color: var(--fg); text-decoration: none; }
.flk-hm-head h3 a:hover { color: var(--teal-ink); }
.flk-hm-icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--teal-soft); color: var(--teal-ink); }
.flk-hm-icon .flk-i { width: 21px; height: 21px; }
.flk-hm-kicker { margin: 0; color: var(--orange-ink); font-size: .74rem; font-weight: 800; line-height: 1.6; }
.flk-hm-body { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.95; }
.flk-hm-small { font-size: .86rem; }
.flk-hm-prose p { margin: 0 0 .6rem; font-size: .95rem; line-height: 2; }
.flk-hm-prose p:last-child { margin-bottom: 0; }
.flk-hm-src { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.7; }
.flk-hm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 2px; }
.flk-hm-actions:empty { display: none; }
.flk-hm-cover { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; background: var(--surface-2); }
.flk-hm-badge { flex: none; width: 1.6em; text-align: center; font-size: 1.05rem; line-height: 1.6; }
.flk-hm-li { display: flex; flex-direction: column; min-width: 0; line-height: 1.6; }
.flk-hm-li b { font-weight: 700; color: var(--fg); }
.flk-hm-li small { color: var(--muted); font-size: .8rem; }

.flk-hm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.flk-hm-list li { border-top: 1px solid var(--line-soft); }
.flk-hm-list li:first-child { border-top: 0; }
.flk-hm-list a, .flk-hm-list li > .flk-hm-li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 2px; color: var(--fg); text-decoration: none; }
.flk-hm-list a:hover b { color: var(--teal-ink); }
.flk-hm-ranked { counter-reset: rank; }
.flk-hm-ranked a::before { counter-increment: rank; content: counter(rank, persian); flex: none; width: 1.6em; height: 1.6em; display: grid; place-items: center; border-radius: 8px; background: var(--teal-soft); color: var(--teal-ink); font-weight: 800; font-size: .82rem; margin-top: 2px; }

.flk-hm-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin: 0; }
.flk-hm-facts div { background: var(--surface-2); border-radius: 10px; padding: 7px 10px; min-width: 0; }
.flk-hm-facts dt { color: var(--muted); font-size: .72rem; line-height: 1.6; }
.flk-hm-facts dd { margin: 0; font-weight: 800; font-size: .98rem; line-height: 1.6; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.flk-hm-facts dd small { font-weight: 500; color: var(--muted); font-size: .74rem; }
.flk-hm-big { margin: 0; color: var(--muted); }
.flk-hm-big b { font-size: 2rem; font-weight: 900; color: var(--fg); line-height: 1.2; }
.flk-hm-phase { margin: 0 0 8px; font-weight: 700; color: var(--teal-ink); }

/* ---- Sky: the dome and tonight's list ------------------------------------ */
.flk-hm-sky { display: grid; grid-template-columns: minmax(280px, 460px) minmax(0, 1fr); gap: 22px; align-items: start; }
.flk-hm-dome { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.flk-hm-dome-box { position: relative; aspect-ratio: 1; width: 100%; border-radius: 50%; background: radial-gradient(circle at 50% 45%, #10243c 0%, #091527 70%, #050d18 100%); box-shadow: 0 0 0 1px var(--line), 0 20px 50px rgba(0, 0, 0, .35); }
:root[data-theme="light"] .flk-hm-dome-box { box-shadow: 0 0 0 1px var(--line), 0 14px 30px rgba(4, 53, 61, .14); }
.flk-hm-dome-canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; touch-action: none; cursor: crosshair; }
.flk-hm-dome-wait { position: absolute; inset: 0; margin: 0; padding: 16px; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; color: #9fb8c8; font-size: .9rem; }
.flk-hm-dome-ready .flk-hm-dome-wait { display: none; }
.flk-hm-dome-bar { display: flex; align-items: center; gap: 10px; }
.flk-hm-dome-bar[hidden] { display: none; }
.flk-hm-dome-bar .flk-range { flex: 1; }
.flk-hm-dome-bar output { min-width: 4.6rem; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.flk-hm-dome-bar .flk-btn { flex: none; }
.flk-hm-dome-info { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.8; min-height: 2.9em; }
.flk-hm-dome-info b { color: var(--fg); }
.flk-hm-sky-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.flk-hm-quote { margin: 0; padding: 10px 14px; border-inline-start: 3px solid var(--orange); background: var(--orange-soft); border-radius: 10px; font-size: .95rem; line-height: 1.95; }
.flk-hm-tonight { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.flk-hm-tonight li { display: flex; gap: 10px; align-items: flex-start; background: var(--surface-2); border-radius: 12px; padding: 9px 12px; }
.flk-hm-tonight b { font-weight: 800; }
.flk-hm-tonight small { display: block; color: var(--muted); font-size: .78rem; line-height: 1.7; }
.flk-hm-tonight .flk-hm-tool { color: var(--teal-ink); }
.flk-hm-sym { flex: none; width: 1.6em; text-align: center; font-size: 1.35rem; line-height: 1.4; color: var(--orange-ink); }
.flk-hm-stars { color: var(--orange); font-size: .78rem; letter-spacing: 1px; margin-inline-start: 4px; }
.flk-hm-stars i { color: var(--line); font-style: normal; }
.flk-hm-events { margin: 0; padding: 0 1rem 0 0; color: var(--muted); font-size: .86rem; }
@media (max-width: 860px) {
    .flk-hm-sky { grid-template-columns: minmax(0, 1fr); }
    .flk-hm-dome { max-width: 460px; width: 100%; margin: 0 auto; }
}

/* ---- The news desk (home_news): the lead story large, the rest of the day beside it, the days before under them ---- */
.flk-hm-nw { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
/* A desk with nothing beside its lead: the lead across, its picture beside its words. */
.flk-hm-nw-solo { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 981px) {
    .flk-hm-nw-solo .flk-hm-nw-lead.flk-hm-nw-has-pic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-auto-rows: min-content; column-gap: 22px; }
    .flk-hm-nw-solo .flk-hm-nw-has-pic > * { grid-column: 1; }
    .flk-hm-nw-solo .flk-hm-nw-pic { grid-column: 2; grid-row: 1 / span 6; margin-block: -20px; margin-inline: 0 -22px; border-radius: 0; border-start-end-radius: var(--radius); border-end-end-radius: var(--radius); }
    .flk-hm-nw-solo .flk-hm-nw-pic img { height: 100%; aspect-ratio: auto; min-height: 320px; }
}
.flk-hm-nw-lead, .flk-hm-nw-today, .flk-hm-nw-day { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.flk-hm-nw-lead { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; background: linear-gradient(160deg, var(--surface) 0%, var(--bg-2) 100%); }
/* The lead's picture across the top of its card, the credit over its foot. */
.flk-hm-nw-pic { position: relative; margin: -20px -22px 4px; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; background: var(--surface-2); }
.flk-hm-nw-pic img { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; transition: transform .4s var(--ease); }
.flk-hm-nw-pic a:hover img { transform: scale(1.02); }
.flk-hm-nw-credit { position: absolute; inset: auto 0 0; margin: 0; padding: 18px 14px 7px; background: linear-gradient(0deg, rgba(2, 10, 12, .78), rgba(2, 10, 12, 0)); color: #dcebea; font-size: .72rem; }
.flk-hm-nw-credit a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.flk-hm-nw-thumb { flex: none; width: 96px; height: 72px; border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.flk-hm-nw-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.flk-hm-nw-daypic { display: block; margin: -14px -16px 10px; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; }
.flk-hm-nw-daypic img { display: block; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
/* A day with no picture keeps the same rhythm: the same box, its first story's emoji on a soft sky. */
.flk-hm-nw-daypic-none { display: grid; place-items: center; aspect-ratio: 16 / 8; background: radial-gradient(120% 90% at 30% 20%, var(--teal-soft), var(--surface-2) 70%); }
.flk-hm-nw-daypic-none span { font-size: 2.4rem; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .35)); }
.flk-hm-nw-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; color: var(--muted); font-size: .8rem; }
.flk-hm-nw-cat { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; background: var(--teal-soft); color: var(--teal-ink); font-weight: 700; text-decoration: none; }
.flk-hm-nw-cat:hover { background: var(--teal); color: var(--on-teal); }
.flk-hm-nw-lead h3 { margin: 0; font-size: clamp(1.2rem, 2.1vw, 1.55rem); font-weight: 900; line-height: 1.55; text-wrap: balance; }
.flk-hm-nw-lead h3 a { color: var(--fg); text-decoration: none; }
.flk-hm-nw-lead h3 a:hover { color: var(--teal-ink); }
.flk-hm-nw-body { margin: 0; color: var(--fg); opacity: .88; line-height: 2; }
.flk-hm-nw-why { margin: 0; padding: 10px 14px; border-radius: 12px; border-inline-start: 3px solid var(--orange); background: var(--surface-2); font-size: .88rem; line-height: 1.9; }
.flk-hm-nw-why b { color: var(--orange-ink); font-weight: 800; }
/* The rest of the day: one line a story, its subject above it. */
.flk-hm-nw-today { display: flex; flex-direction: column; padding: 16px 18px; }
.flk-hm-nw-today h3, .flk-hm-nw-day h3 { margin: 0 0 8px; font-size: .92rem; font-weight: 850; }
.flk-hm-nw-today ol, .flk-hm-nw-day ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
/* The rest of the day shares the lead's height: the rows split it evenly, each centred, a line between them. */
.flk-hm-nw-today ol { flex: 1 1 auto; grid-auto-rows: 1fr; gap: 0; }
.flk-hm-nw-today li { display: flex; border-top: 1px solid var(--line-soft); }
.flk-hm-nw-today li:first-child { border-top: 0; }
.flk-hm-nw-today li a { flex: 1 1 auto; display: flex; gap: 12px; align-items: center; padding: 10px 8px; margin: 0 -8px; border-radius: 12px; color: var(--fg); text-decoration: none; }
.flk-hm-nw-today i { font-style: normal; color: var(--muted); font-size: .8rem; line-height: 1.8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.flk-hm-nw-today li a:hover { background: var(--surface-2); }
.flk-hm-nw-today li a > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.7; }
.flk-hm-nw-today small { color: var(--muted); font-size: .74rem; }
.flk-hm-nw-today b { font-weight: 700; font-size: .92rem; }
.flk-hm-nw-emoji { display: grid; place-items: center; font-size: 1.6rem; }
.flk-hm-nw-all { display: inline-flex; align-items: center; gap: 2px; margin-top: auto; padding-top: 10px; color: var(--teal-ink); font-size: .86rem; font-weight: 700; text-decoration: none; }
.flk-hm-nw-all:hover { text-decoration: underline; text-underline-offset: 3px; }
.flk-hm-nw-all .flk-i { width: 1em; height: 1em; }
/* The days before: a column each, their three first stories. */
.flk-hm-nw-days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.flk-hm-nw-day { padding: 14px 16px; }
.flk-hm-nw-day h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.flk-hm-nw-day h3 a { color: var(--fg); text-decoration: none; }
.flk-hm-nw-day h3 a:hover { color: var(--teal-ink); }
.flk-hm-nw-day h3 small { color: var(--muted); font-weight: 600; font-size: .74rem; }
.flk-hm-nw-day li a { display: flex; gap: 6px; padding: 6px 0; border-top: 1px solid var(--line-soft); color: var(--fg); font-size: .85rem; line-height: 1.75; text-decoration: none; }
.flk-hm-nw-day li:first-child a { border-top: 0; }
.flk-hm-nw-day li a:hover { color: var(--teal-ink); }
.flk-hm-nw-day li a > span { flex: none; }
@media (max-width: 980px) {
    .flk-hm-nw { grid-template-columns: minmax(0, 1fr); }
    .flk-hm-nw-days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .flk-hm-nw-lead { padding: 16px; }
    .flk-hm-nw-pic { margin: -16px -16px 4px; }
    /* On a phone the days before scroll sideways, a card and a bit at a time. */
    .flk-hm-nw-days { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
    .flk-hm-nw-day { flex: 0 0 82%; scroll-snap-align: start; }
}

/* ---- Moon and Sun ---------------------------------------------------------- */
.flk-hm-moon { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; align-items: start; }
.flk-hm-moon-photo { margin: 0; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #000; box-shadow: 0 0 0 1px var(--line), 0 0 40px rgba(220, 230, 255, .12); }
.flk-hm-round { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The Sun as the Moon beside it: the disc round at the same size, with a warm glow. */
.flk-hm-sun { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; align-items: start; }
.flk-hm-sun-photo { margin: 0; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #0b1530; box-shadow: 0 0 0 1px rgba(255, 170, 60, .35), 0 0 40px rgba(255, 170, 60, .2); }
.flk-hm-crop { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
/* The sun bot's picture is a 4:5 card with its disc 41% down: a square on the disc, the disc filling it, in a round frame. */
.flk-hm-sun-photo .flk-hm-crop { object-position: 50% 5%; transform: scale(1.64); }
.flk-hm-sun .flk-hm-phase { color: var(--orange-ink); }
.flk-hm-sun .flk-hm-facts { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.flk-hm-flares { display: flex; flex-wrap: wrap; gap: 4px; }
.flk-hm-flare { font-size: .74rem; font-weight: 800; padding: 0 6px; border-radius: 6px; background: var(--surface); color: var(--muted); direction: ltr; }
.flk-hm-flare-on.flk-hm-flare-c { background: rgba(201, 133, 0, .22); color: var(--warn); }
.flk-hm-flare-on.flk-hm-flare-m { background: rgba(224, 112, 10, .28); color: var(--orange-ink); }
.flk-hm-flare-on.flk-hm-flare-x { background: rgba(255, 107, 93, .3); color: var(--bad); }
@media (max-width: 560px) {
    .flk-hm-moon, .flk-hm-sun { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .flk-hm-moon-photo, .flk-hm-sun-photo { width: 132px; justify-self: center; }
    .flk-hm-moon > div, .flk-hm-sun > div { text-align: center; }
    .flk-hm-facts, .flk-hm-sun .flk-hm-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Passes and launches -------------------------------------------------- */
.flk-hm-passes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.flk-hm-passes li { background: var(--surface-2); border-radius: 12px; padding: 9px 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; }
.flk-hm-passes b { font-weight: 800; font-size: .92rem; }
.flk-hm-passes small { grid-column: 1 / -1; color: var(--muted); font-size: .78rem; }
.flk-hm-pass-time { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--teal-ink); white-space: nowrap; }
.flk-hm-pass-time .flk-rel { color: var(--muted); font-weight: 500; font-size: .78rem; }
.flk-hm-launches { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.flk-hm-launches a { display: flex; gap: 12px; align-items: stretch; color: var(--fg); text-decoration: none; background: var(--surface-2); border-radius: 12px; padding: 8px; }
.flk-hm-launches a:hover { box-shadow: 0 0 0 1px var(--teal); }
.flk-hm-lphoto { flex: none; width: 76px; border-radius: 9px; overflow: hidden; background: var(--bg-2); }
.flk-hm-lphoto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.flk-hm-lphoto-none { display: grid; place-items: center; color: var(--teal-ink); }
.flk-hm-lphoto-none .flk-i { width: 28px; height: 28px; }
.flk-hm-when { color: var(--fg) !important; }
.flk-hm-count { color: var(--orange-ink); font-weight: 800; font-size: .84rem; }
.flk-hm-sure { font-style: normal; font-size: .7rem; font-weight: 700; color: var(--ok); border: 1px solid var(--ok); border-radius: 999px; padding: 0 6px; margin-inline-start: 4px; }

/* ---- Picture of the day ---------------------------------------------------- */
.flk-hm-card[data-view="apod"] { padding: 0; overflow: hidden; }
.flk-hm-apod { margin: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); min-height: 100%; }
.flk-hm-apod-stage { position: relative; overflow: hidden; background: #000; min-height: 320px; }
.flk-hm-apod-bg { position: absolute; inset: -30px; width: calc(100% + 60px); height: calc(100% + 60px); object-fit: cover; filter: blur(26px) saturate(1.2) brightness(.55); }
.flk-hm-apod-img { position: relative; display: block; width: 100%; height: 100%; max-height: 520px; object-fit: contain; }
.flk-hm-apod-video { position: absolute; top: 12px; inset-inline-start: 12px; display: inline-flex; gap: 4px; align-items: center; background: rgba(0, 0, 0, .6); color: #fff; font-size: .78rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; }
.flk-hm-apod-cap { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; }
.flk-hm-apod-cap h3 { margin: 0; font-size: 1.35rem; font-weight: 900; line-height: 1.5; }
.flk-hm-apod-cap h3 a { color: var(--fg); text-decoration: none; }
.flk-hm-apod-cap h3 a:hover { color: var(--teal-ink); }
.flk-hm-apod-excerpt { margin: 0; color: var(--muted); font-size: .92rem; line-height: 2; text-wrap: pretty; }
.flk-hm-apod-excerpt a { display: inline-flex; align-items: center; gap: 2px; font-weight: 800; color: var(--teal-ink); text-decoration: none; white-space: nowrap; }
.flk-hm-apod-excerpt a:hover { text-decoration: underline; }
.flk-hm-apod-excerpt .flk-i { width: 16px; height: 16px; }
.flk-hm-en { margin: 0; color: var(--muted); font-size: .86rem; text-align: right; }
.flk-hm-credit { margin: 0; color: var(--muted); font-size: .8rem; }
@media (max-width: 860px) {
    .flk-hm-apod { grid-template-columns: minmax(0, 1fr); }
    .flk-hm-apod-img { max-height: 70vh; }
}

/* ---- News --------------------------------------------------------------- */
.flk-hm-news { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.flk-hm-news a { display: flex; gap: 8px; height: 100%; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border-inline-start: 3px solid var(--cat, var(--teal)); color: var(--fg); text-decoration: none; }
.flk-hm-news a:hover b { color: var(--teal-ink); }
.flk-hm-cat { color: var(--cat, var(--muted)) !important; font-weight: 700; }

/* ---- Earthquakes ------------------------------------------------------------ */
.flk-hm-quakes { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.flk-hm-qmap { margin: 0; }
.flk-hm-qsvg { display: block; width: 100%; height: auto; border-radius: 14px; background: radial-gradient(circle at 50% 50%, var(--bg-2), var(--bg)); }
:root[data-theme="light"] .flk-hm-qsvg { background: radial-gradient(circle at 50% 50%, var(--surface), var(--bg-2)); }
.flk-hm-q { stroke: rgba(3, 24, 28, .55); stroke-width: 1; }
.flk-hm-q-a { fill: #e9c46a; } .flk-hm-q-b { fill: #f4a259; } .flk-hm-q-c { fill: #ff8c1a; } .flk-hm-q-d { fill: #f2542d; } .flk-hm-q-e { fill: #c81d25; }
.flk-hm-q-o { fill-opacity: .38; } .flk-hm-q-w { fill-opacity: .7; } .flk-hm-q-n { fill-opacity: .95; stroke: #fff; stroke-width: 1.4; }
/* The latest quake's wave: three rings that crack out fast and far, then a breath (as on the quake pages, quakes.css). */
.flk-hm-q-ring { fill: none; stroke: #ff6b5d; stroke-width: 4; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; opacity: 0; animation: flk-hm-whip 2.6s cubic-bezier(.08, .82, .17, 1) infinite; }
.flk-hm-q-w2 { stroke: #ffb054; stroke-width: 3; animation-delay: .2s; }
.flk-hm-q-w3 { stroke: #fff; stroke-width: 2.2; animation-delay: .4s; }
@keyframes flk-hm-whip { 0% { opacity: 0; transform: scale(.5); } 4% { opacity: 1; } 40% { opacity: .95; } 70% { opacity: 0; transform: scale(7.5); } 100% { opacity: 0; transform: scale(7.5); } }
@media (prefers-reduced-motion: reduce) { .flk-hm-q-ring { animation: none; opacity: .85; } .flk-hm-q-w2, .flk-hm-q-w3 { display: none; } }
.flk-hm-qkey { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: center; margin-top: 8px; color: var(--muted); font-size: .74rem; }
.flk-hm-qkey span { display: inline-flex; align-items: center; gap: 5px; }
.flk-hm-qkey i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.flk-hm-qkey .flk-hm-q-a { background: #e9c46a; } .flk-hm-qkey .flk-hm-q-b { background: #f4a259; } .flk-hm-qkey .flk-hm-q-c { background: #ff8c1a; }
.flk-hm-qkey .flk-hm-q-d { background: #f2542d; } .flk-hm-qkey .flk-hm-q-e { background: #c81d25; }
.flk-hm-qside { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.flk-hm-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.flk-hm-stats div { background: var(--surface-2); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; min-width: 0; }
.flk-hm-stats b { font-size: 1.5rem; font-weight: 900; line-height: 1.3; }
.flk-hm-stats span { color: var(--muted); font-size: .74rem; line-height: 1.5; overflow-wrap: anywhere; }
.flk-hm-qlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.flk-hm-qlist li { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.flk-hm-qlist a { flex: 1; min-width: 0; display: flex; gap: 12px; align-items: center; color: var(--fg); text-decoration: none; }
.flk-hm-qlist a:hover b { color: var(--teal-ink); }
.flk-hm-qlink { display: block; border-radius: 14px; }
.flk-hm-qlink:hover .flk-hm-qsvg { box-shadow: 0 0 0 1px var(--teal); }
.flk-hm-qlist li:first-child { border-top: 0; }
.flk-hm-mag { flex: none; width: 3rem; text-align: center; font-weight: 900; font-size: 1rem; border-radius: 10px; padding: 4px 0; color: #1a0d00; font-variant-numeric: tabular-nums; }
.flk-hm-mag-a { background: #e9c46a; } .flk-hm-mag-b { background: #f4a259; } .flk-hm-mag-c { background: #ff8c1a; }
.flk-hm-mag-d { background: #f2542d; color: #fff; } .flk-hm-mag-e { background: #c81d25; color: #fff; }
@media (max-width: 860px) { .flk-hm-quakes { grid-template-columns: minmax(0, 1fr); } }

/* ---- Knowledge and tools ------------------------------------------------------- */
.flk-hm-year { margin: 0 0 -4px; font-size: 2.6rem; font-weight: 900; line-height: 1.1; color: transparent; -webkit-text-stroke: 1.5px var(--orange-ink); letter-spacing: .02em; }
.flk-hm-chat { display: flex; flex-direction: column; gap: 6px; }
.flk-hm-ask, .flk-hm-answer { margin: 0; padding: 8px 12px; border-radius: 14px; font-size: .9rem; max-width: 92%; }
.flk-hm-ask { align-self: flex-start; background: var(--surface-2); border-end-start-radius: 4px; }
.flk-hm-answer { align-self: flex-end; background: var(--teal-soft); color: var(--teal-ink); font-weight: 800; border-end-end-radius: 4px; }
.flk-hm-formula { font-family: "Cambria Math", "STIX Two Math", "Times New Roman", serif; font-size: 1.1rem; font-weight: 600; }

/* ---- Bots and the maker -------------------------------------------------------- */
.flk-hm-audience { margin: 0; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
.flk-hm-audience b { font-size: 1.8rem; font-weight: 900; color: var(--orange-ink); }
.flk-hm-audience span { color: var(--muted); font-size: .8rem; }
.flk-hm-botlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.flk-hm-botlist li { position: relative; display: flex; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.flk-hm-botlist li:hover { border-color: var(--teal); }
.flk-hm-bot { flex: 1; min-width: 0; display: flex; gap: 10px; align-items: center; padding: 9px 12px; color: var(--fg); text-decoration: none; }
.flk-hm-bot small { text-align: right; }
.flk-hm-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.flk-hm-avatar-none { display: grid; place-items: center; font-size: 1.3rem; }
.flk-hm-botpage { flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin-inline-end: 8px; border-radius: 10px; color: var(--teal-ink); background: var(--teal-soft); }
.flk-hm-bots-cta { margin: 16px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }


@media (prefers-reduced-motion: reduce) { .flk-hm-q-ring { animation: none; opacity: .8; } }

/* ---- The lab section: the lead lab across the width (its card is public.css's .flk-lab-feature) -- */
.flk-hm-lab .flk-lab-feature { margin-top: 2px; }

/* «فضا»: the site's space scenes beside the launches (card_spacelabs). */
.flk-hm-spacelabs { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.flk-hm-spacelabs a { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); color: var(--fg); text-decoration: none; }
.flk-hm-spacelabs a:hover { outline: 1px solid var(--teal); }
.flk-hm-spacelabs a > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.7; }
.flk-hm-spacelabs b { font-weight: 800; font-size: .95rem; }
.flk-hm-spacelabs small { color: var(--muted); font-size: .8rem; }
.flk-hm-sl-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--teal-soft); color: var(--teal-ink); }
.flk-hm-sl-icon .flk-i { width: 22px; height: 22px; }
/* A video day of the picture of the day: the clip on black, whole. */
.flk-hm-apod-clip video { background: #000; }

/* The Starlink card: the reader's city first. */
.flk-hm-sl-here { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); line-height: 1.9; }
.flk-hm-sl-here b { color: var(--teal-ink); }

/* Today in the history of science: the main stories with their year, then the short items. */
.flk-hm-otd { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.flk-hm-otd a { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); color: var(--fg); text-decoration: none; }
.flk-hm-otd a:hover { outline: 1px solid var(--teal); }
.flk-hm-otd-year { flex: none; min-width: 3.2em; padding: 2px 6px; border-radius: 8px; background: var(--teal-soft); color: var(--teal-ink); font-weight: 900; text-align: center; }
.flk-hm-otd a > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.8; }
.flk-hm-otd small { color: var(--muted); font-size: .82rem; }
.flk-hm-otd-brief { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .85rem; line-height: 1.85; color: var(--muted); }
.flk-hm-otd-brief li { padding-top: 6px; border-top: 1px solid var(--line-soft); }
.flk-hm-otd-brief b { color: var(--orange-ink); font-weight: 800; margin-inline-end: 4px; }
/* A small heading inside a card (Persian science: today, then the week). */
.flk-hm-subhead { margin: 4px 0 6px; font-size: .82rem; font-weight: 800; color: var(--orange-ink); }

/* Every tool or lab under its home section, group by group (home_index). */
.flk-hm-index { margin-top: 14px; padding: 16px 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.flk-hm-index-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.flk-hm-index-head h3 { margin: 0; font-size: 1rem; font-weight: 850; }
.flk-hm-index-groups { display: flex; flex-direction: column; }
.flk-hm-index-groups > section { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 6px 14px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line-soft); min-width: 0; }
.flk-hm-index-groups > section:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 640px) { .flk-hm-index-groups > section { grid-template-columns: minmax(0, 1fr); } }
.flk-hm-index h4 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .84rem; color: var(--orange-ink); }
.flk-hm-index h4 .flk-i { width: 16px; height: 16px; }
.flk-hm-index ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.flk-hm-index li a { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--fg); font-size: .78rem; line-height: 1.8; text-decoration: none; }
.flk-hm-index li a:hover { background: var(--teal-soft); color: var(--teal-ink); }
.flk-hm-index li .flk-i { width: 13px; height: 13px; color: var(--teal-ink); }
/* Every lab's moving card on home, five to a row (three on a tablet, two, one); a card off screen is
   neither laid out nor painted (content-visibility), so only the few in view animate. */
.flk-hm-alllabs .flk-lab-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.flk-hm-alllabs .flk-lab-grid > li { content-visibility: auto; contain-intrinsic-size: auto 220px; }
.flk-hm-alllabs .flk-lab-card b { font-size: .9rem; }
@media (max-width: 1100px) { .flk-hm-alllabs .flk-lab-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .flk-hm-alllabs .flk-lab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .flk-hm-alllabs .flk-lab-grid { grid-template-columns: minmax(0, 1fr); } }

/* Dedicated SkyTonight home card. */
.flk-sky-card{border-block-start:2px solid var(--orange);padding-block-start:1rem}.flk-sky-card>p:last-child{font-size:.85rem;color:var(--muted);margin-block-end:0}


/* Home previews: editorial order, compact media, and optional deep catalogues. */
.flk-hm-preview-grid { display: flex; flex-wrap: wrap; align-items: stretch; }
.flk-hm-preview-grid > .flk-hm-card { flex: 1 1 calc((100% - 14px) / 2); min-width: 0; margin-top: 0; }
.flk-hm-preview-grid > [data-view="sky"] { flex-basis: 100%; }
#highlights .flk-hm-preview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#highlights .flk-hm-quakes, #highlights .flk-hm-apod { grid-template-columns: minmax(0, 1fr); gap: 12px; min-height: 0; }
#highlights .flk-hm-qmap { margin: 0; }
#highlights .flk-hm-qsvg { max-height: 170px; }
#highlights .flk-hm-qkey { font-size: .65rem; }
#highlights .flk-hm-apod-stage { min-height: 0; height: 300px; flex-shrink: 0; border-radius: 12px 12px 0 0; }
#highlights .flk-hm-apod-stage.flk-hm-apod-portrait { height: clamp(380px, 40vw, 540px); }
#highlights .flk-hm-apod-img { height: 100%; max-height: none; object-fit: contain; }
#highlights .flk-hm-apod-cap { padding: 18px 20px 20px; flex: 1; }
#highlights .flk-hm-apod { display: flex; flex-direction: column; height: 100%; gap: 0; }
#highlights .flk-hm-apod-excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.flk-hm-expand { margin-block: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.flk-hm-expand > summary { cursor: pointer; font-weight: 800; color: var(--teal-ink); }
.flk-hm-expand[open] > summary { margin-bottom: 18px; }
.flk-hm-footer-link { font-size: .8rem; margin: 8px 0; }
.flk-hm-footer-link a { color: var(--muted); }

@media (min-width: 761px) {
    .flk-hm-hero { min-height: 440px; }
    .flk-hm-hero-text { padding-block: 24px 18px; }
    .flk-hm-brand { margin-block: 10px; }
    .flk-hm-figures { margin-bottom: 12px; }
}
@media (max-width: 980px) { #highlights .flk-hm-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
    .flk-hm-map, .flk-hm-map.flk-hm-globe { aspect-ratio: auto; height: 220px; }
    .flk-hm-hero-text { padding-top: 16px; }
    .flk-hm-figures { margin-bottom: 10px; padding-block: 8px; }
}
@media (max-width: 640px) { .flk-hm-preview-grid > .flk-hm-card { grid-column: auto; } }

.flk-hm-preview-grid.flk-hm-n1, #highlights .flk-hm-preview-grid.flk-hm-n1 { grid-template-columns: minmax(0, 1fr); }
#highlights .flk-hm-preview-grid.flk-hm-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.flk-hm-preview-grid > .flk-hm-card[data-view="moon"] .flk-hm-moon,
.flk-hm-preview-grid > .flk-hm-card[data-view="sun"] .flk-hm-sun { grid-template-columns: 100px minmax(0, 1fr); }
@media (max-width: 640px) {
    .flk-hm-preview-grid > .flk-hm-card[data-view="moon"] .flk-hm-moon,
    .flk-hm-preview-grid > .flk-hm-card[data-view="sun"] .flk-hm-sun { grid-template-columns: minmax(0, 1fr); }
}

#knowledge .flk-hm-preview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#knowledge .flk-hm-cover { max-height: 220px; object-fit: contain; }
.flk-hm-hero-text > * { max-width: 620px; }
.flk-hm-hero .flk-hm-logo { width: 76px; }
.flk-hm-hero .flk-hm-wordmark { font-size: clamp(2.4rem, 5vw, 3.2rem); }
.flk-hm-hero .flk-hm-intro { font-size: 1rem; line-height: 1.8; margin-bottom: 10px; }
@media (max-width: 980px) { #knowledge .flk-hm-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The lead lab stays visible; its inline illustration is painted near the viewport. */
.flk-hm-lab > .flk-lab-feature { content-visibility: auto; contain-intrinsic-size: auto 320px; }

/* Flexible rows grow their final cards to fill the remainder without reordering content. */
#highlights .flk-hm-preview-grid > .flk-hm-card,
#knowledge .flk-hm-preview-grid > .flk-hm-card { flex-basis: calc((100% - 28px) / 3); }
@media (max-width: 980px) {
    #highlights .flk-hm-preview-grid > .flk-hm-card,
    #knowledge .flk-hm-preview-grid > .flk-hm-card { flex-basis: calc((100% - 14px) / 2); }
}
@media (max-width: 640px) {
    .flk-hm-preview-grid > .flk-hm-card,
    #highlights .flk-hm-preview-grid > .flk-hm-card,
    #knowledge .flk-hm-preview-grid > .flk-hm-card { flex-basis: 100%; }
    #highlights .flk-hm-apod-cap { padding: 16px 18px 18px; }
}

/* Real reports: important images earn their space. Cards side by side share one height (a short card's
   buttons sit at its foot, level with its neighbour's), and the stacked pair's last card takes what is left. */
.flk-hm-preview-grid { align-items: stretch; }
.flk-hm-highlight-stack { flex: 1 1 calc((100% - 28px) / 3); min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.flk-hm-highlight-stack > .flk-hm-card { margin: 0; }
.flk-hm-highlight-stack > .flk-hm-card:last-child { flex: 1 1 auto; }
/* The picture of the day grows into a taller row instead of leaving a hole under its words. */
#highlights .flk-hm-apod-stage { flex: 1 1 300px; height: auto; min-height: 300px; }
#highlights .flk-hm-apod-cap { flex: 0 0 auto; }
#highlights .flk-hm-apod-stage.flk-hm-apod-portrait { flex-basis: clamp(380px, 40vw, 540px); }
#highlights .flk-hm-apod-stage > .flk-hm-apod-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.flk-hm-preview-grid > [data-module="earthnow"] .flk-hm-cover { aspect-ratio: 1; max-height: 420px; object-fit: contain; background: #050e18; }
.flk-hm-spacelabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.flk-hm-spacelabs a { height: 100%; padding: 9px; gap: 8px; }
.flk-hm-spacelabs .flk-hm-sl-icon { width: 30px; height: 30px; }
.flk-hm-card[data-module="observe"] .flk-hm-list,
.flk-sky-card .flk-hm-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.flk-hm-card[data-module="observe"] .flk-hm-list li,
.flk-sky-card .flk-hm-list li { border: 0; background: var(--surface-2); padding: 8px; border-radius: 10px; min-width: 0; }
.flk-hm-preview-grid > .flk-hm-card[data-view="sun"] .flk-hm-sun { grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); }
.flk-hm-sun-photo { width: 100%; }
.flk-hm-labs-title { margin: 24px 0 14px; font-size: 1.05rem; }
@media (max-width: 980px) { .flk-hm-highlight-stack { flex-basis: calc((100% - 14px) / 2); } }
@media (max-width: 760px) { .flk-hm-jumps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
    .flk-hm-highlight-stack { flex-basis: 100%; }
    .flk-hm-preview-grid > .flk-hm-card[data-view="sun"] .flk-hm-sun { grid-template-columns: minmax(0, 1fr); }
    .flk-hm-sun-photo { width: min(260px, 100%); }
}
@media (max-width: 380px) { .flk-hm-spacelabs, .flk-hm-card[data-module="observe"] .flk-hm-list, .flk-sky-card .flk-hm-list { grid-template-columns: minmax(0, 1fr); } }

.flk-en-globe figure { margin: 0; }
.flk-en-globe img { display: block; width: min(100%, 640px); height: auto; margin-inline: auto; border-radius: 16px; background: #050e18; }
.flk-en-globe figcaption { margin-top: 12px; color: var(--muted); text-align: center; }

/* ---- The article desk (home_learn): today's article large, its cover beside its words; the ones before in a column ---- */
.flk-hm-lr { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.flk-hm-lr-solo { grid-template-columns: minmax(0, 1fr); }
.flk-hm-lr-lead, .flk-hm-lr-more { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.flk-hm-lr-lead { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border-top: 3px solid var(--teal);
    background: linear-gradient(160deg, var(--surface) 0%, var(--bg-2) 100%); }
.flk-hm-lr-has-pic { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.flk-hm-lr-pic { position: relative; margin: 0; min-height: 100%; background: var(--surface-2); }
.flk-hm-lr-pic a { display: block; height: 100%; }
.flk-hm-lr-pic img { display: block; width: 100%; height: 100%; min-height: 300px; max-height: 460px; object-fit: cover; transition: transform .4s var(--ease); }
.flk-hm-lr-pic a:hover img { transform: scale(1.02); }
.flk-hm-lr-pic figcaption { position: absolute; inset: auto 0 0; padding: 18px 14px 7px; background: linear-gradient(0deg, rgba(2, 10, 12, .78), rgba(2, 10, 12, 0));
    color: #dcebea; font-size: .7rem; line-height: 1.6; }
.flk-hm-lr-text { display: flex; flex-direction: column; gap: 12px; padding: 24px 26px; min-width: 0; }
.flk-hm-lr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; color: var(--muted); font-size: .8rem; }
.flk-hm-lr-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.flk-hm-lr-meta .flk-i { width: 1em; height: 1em; }
.flk-hm-lr-cat { padding: 2px 10px; border-radius: 999px; background: var(--teal-soft); color: var(--teal-ink); font-weight: 700; }
.flk-hm-lr-text h3 { margin: 0; font-size: clamp(1.3rem, 2.3vw, 1.75rem); font-weight: 900; line-height: 1.55; text-wrap: balance; }
.flk-hm-lr-text h3 a { color: var(--fg); text-decoration: none; }
.flk-hm-lr-text h3 a:hover { color: var(--teal-ink); }
.flk-hm-lr-sum { margin: 0; color: var(--fg); opacity: .88; font-size: 1rem; line-height: 2.05; text-wrap: pretty; }
.flk-hm-lr-more { display: flex; flex-direction: column; padding: 16px 18px; }
.flk-hm-lr-more h3 { margin: 0 0 8px; font-size: .92rem; font-weight: 850; }
.flk-hm-lr-more ol { flex: 1 1 auto; list-style: none; margin: 0; padding: 0; display: grid; grid-auto-rows: 1fr; }
.flk-hm-lr-more li { display: flex; border-top: 1px solid var(--line-soft); }
.flk-hm-lr-more li:first-child { border-top: 0; }
.flk-hm-lr-more li a { flex: 1 1 auto; display: flex; gap: 12px; align-items: center; padding: 10px 8px; margin: 0 -8px; border-radius: 12px; color: var(--fg); text-decoration: none; }
.flk-hm-lr-more li a:hover { background: var(--surface-2); }
.flk-hm-lr-more li img, .flk-hm-lr-thumb-none { flex: none; width: 84px; height: 64px; border-radius: 10px; object-fit: cover; background: var(--surface-2); }
.flk-hm-lr-thumb-none { display: grid; place-items: center; color: var(--teal-ink); }
.flk-hm-lr-more li a > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.75; }
.flk-hm-lr-more small { color: var(--muted); font-size: .74rem; }
.flk-hm-lr-more b { font-weight: 700; font-size: .9rem; }
@media (max-width: 980px) {
    .flk-hm-lr { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
    .flk-hm-lr-has-pic { grid-template-columns: minmax(0, 1fr); }
    .flk-hm-lr-pic img { min-height: 0; max-height: none; height: auto; aspect-ratio: 16 / 9; }
    .flk-hm-lr-text { padding: 16px 18px 18px; }
}

/* Home's short previews (home_card fill): the words and list take the height the row leaves, so a short card next to a
   tall one reads on. Toward the row's height the box counts only as tall as its words (--fill-need, measured by fb-core.js;
   11.5rem until then), at most 18rem, so a long text never makes its row taller than the picture cards beside it; fb-core.js hides a list row that does
   not fit whole and fades the foot when a paragraph runs past it. */
.flk-hm-fill { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; overflow: hidden;
    contain: size; contain-intrinsic-block-size: min(var(--fill-need, 11.5rem), var(--fill-cap, 18rem)); }
.flk-hm-fill > .flk-hm-list { flex: none; }
.flk-hm-fill .flk-hm-out { visibility: hidden; }
.flk-hm-fill.flk-hm-cut { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3.4em), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 3.4em), transparent); }

/* The Moon tonight: its disc large beside how much is lit, the facts in a row of three under them, all in the middle of the card's height. */
.flk-hm-preview-grid > .flk-hm-card[data-view="moon"] .flk-hm-moon {
    flex: 1 1 auto; display: grid; grid-template-columns: minmax(150px, 46%) minmax(0, 1fr); grid-template-areas: "photo say" "facts facts" "note note";
    gap: 16px 22px; align-items: center; align-content: center; }
.flk-hm-card[data-view="moon"] .flk-hm-moon-photo { grid-area: photo; width: 100%; max-width: 280px; justify-self: center; }
.flk-hm-moon-say { grid-area: say; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.flk-hm-moon-say .flk-hm-big b { font-size: clamp(2.4rem, 4.4vw, 3.4rem); }
.flk-hm-moon-say .flk-hm-phase { margin: 0; font-size: 1.05rem; }
.flk-hm-moon-age { margin: 0; color: var(--muted); font-size: .88rem; }
.flk-hm-card[data-view="moon"] .flk-hm-facts { grid-area: facts; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.flk-hm-card[data-view="moon"] [data-moon-note] { grid-area: note; }
@media (max-width: 560px) {
    .flk-hm-preview-grid > .flk-hm-card[data-view="moon"] .flk-hm-moon { grid-template-columns: minmax(0, 1fr); grid-template-areas: "photo" "say" "facts" "note"; }
    .flk-hm-card[data-view="moon"] .flk-hm-moon-photo { max-width: 220px; }
    .flk-hm-moon-say { text-align: center; align-items: center; }
}

/* ---- One rhythm for every home card (Ashkan, 2026-10-20): room inside the frame, a clear step from the title to the
   words under it, and the same step between the parts; the title's kicker sits close over it, the icon centred beside both. ---- */
.flk-hm-card { padding: 20px 22px 22px; gap: 14px; }
.flk-hm-head { align-items: center; gap: 12px; }
.flk-hm-head h3 { line-height: 1.45; }
.flk-hm-head .flk-hm-kicker { margin-bottom: 3px; line-height: 1.5; }
.flk-hm-card > .flk-hm-head + *, .flk-hm-qside > .flk-hm-head + *, .flk-hm-sky-side > .flk-hm-head + *,
.flk-hm-apod-cap > .flk-hm-head + * { margin-top: 4px; }
.flk-hm-body { line-height: 2; }
.flk-hm-fill { gap: 12px; }
.flk-hm-fill > .flk-hm-subhead { margin: 4px 0 -4px; }
.flk-hm-src { line-height: 1.85; }
.flk-hm-src a { color: var(--teal-ink); }
.flk-hm-actions { padding-top: 6px; }
@media (max-width: 640px) { .flk-hm-card { padding: 18px 18px 20px; } }

/* Tonight's observing plan: the picks and hunts as tiles two to a row. */
.flk-hm-card[data-view="skytonight"] .flk-hm-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.flk-hm-card[data-view="skytonight"] .flk-hm-list li { border: 0; border-radius: 12px; background: var(--surface-2); min-width: 0; }
.flk-hm-card[data-view="skytonight"] .flk-hm-list li > a, .flk-hm-card[data-view="skytonight"] .flk-hm-list li > .flk-hm-li { padding: 10px 12px; }
@media (max-width: 380px) { .flk-hm-card[data-view="skytonight"] .flk-hm-list { grid-template-columns: minmax(0, 1fr); } }

/* «امشب چه ببینیم»: the planets as full rows (two to a row from four on), the side centred against the dome. */
.flk-hm-sky { align-items: center; }
.flk-hm-sky-side { gap: 14px; }
.flk-hm-tonight { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.flk-hm-tonight:has(> li:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.flk-hm-tonight li { padding: 12px 14px; gap: 12px; }
.flk-hm-tonight small { line-height: 1.8; }
.flk-hm-events { margin: 0; padding: 12px 1.2rem 12px 14px; border-radius: 12px; background: var(--surface-2); line-height: 2; }
@media (max-width: 560px) { .flk-hm-tonight:has(> li:nth-child(4)) { grid-template-columns: minmax(0, 1fr); } }

/* «همین حالا»: the tiles in rows of equal length on a wide screen (home_now picks the count), no empty places on the second row. */
@media (min-width: 761px) {
    .flk-hm-now-c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .flk-hm-now-c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .flk-hm-now-c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* The lead story: its words whole (to 30rem), its «why» right under them, then its tags and its outlets. */
.flk-hm-nw-fill { --fill-cap: 30rem; flex: 0 1 auto; }
.flk-hm-nw-has-pic .flk-hm-nw-fill { --fill-cap: 8rem; }
.flk-hm-nw-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.flk-hm-nw-tags a { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--teal-ink); font-size: .8rem; text-decoration: none; }
.flk-hm-nw-tags a:hover { background: var(--teal-soft); }
.flk-hm-nw-src { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 4px; font-size: .8rem; line-height: 1.8; }
.flk-hm-nw-src li { display: block; min-width: 0; }
.flk-hm-nw-src li > * + * { margin-inline-start: 6px; }
.flk-hm-nw-src span { color: var(--muted); }
.flk-hm-nw-src span::after { content: " ·"; }
.flk-hm-nw-src a, .flk-hm-nw-src i { color: var(--fg); font-style: normal; text-decoration: none; overflow-wrap: anywhere; }
.flk-hm-nw-src a:hover { color: var(--teal-ink); }
/* «امشب چه ببینیم», one planet a row: its name and stars, its times, and what to see it with across the row's width. */
@media (min-width: 700px) {
    .flk-hm-tonight:not(:has(> li:nth-child(4))) li > div { display: grid; grid-template-columns: minmax(7.5rem, auto) minmax(0, 1fr) minmax(0, auto);
        grid-template-areas: "name times tool" "stars times tool"; column-gap: 18px; align-items: center; flex: 1; }
    .flk-hm-tonight:not(:has(> li:nth-child(4))) li > div > b { grid-area: name; }
    .flk-hm-tonight:not(:has(> li:nth-child(4))) li > div > .flk-hm-stars { grid-area: stars; margin: 0; }
    .flk-hm-tonight:not(:has(> li:nth-child(4))) li > div > small:not(.flk-hm-tool) { grid-area: times; }
    .flk-hm-tonight:not(:has(> li:nth-child(4))) li > div > .flk-hm-tool { grid-area: tool; text-align: end; }
    .flk-hm-tonight li { align-items: center; }
}
/* The sky calendar: the events two to a row. */
.flk-hm-card[data-module="almanac"] .flk-hm-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
.flk-hm-card[data-module="almanac"] .flk-hm-list li:nth-child(2) { border-top: 0; }
@media (max-width: 520px) { .flk-hm-card[data-module="almanac"] .flk-hm-list { grid-template-columns: minmax(0, 1fr); } .flk-hm-card[data-module="almanac"] .flk-hm-list li:nth-child(2) { border-top: 1px solid var(--line-soft); } }