/* falakbin.ir/lab/curve — the Earth-curvature lab. Only `cv-` classes, so it
   never touches the site's own `pub-` look; colours come from the site's tokens
   when they exist (public.css), with the same palette as fallback. */

.cv {
    --cv-bg: var(--bg, #03181c);
    --cv-surface: var(--surface, #0a2e34);
    --cv-surface-2: var(--surface-2, #0f3b42);
    --cv-line: var(--line, #1a4e56);
    --cv-line-soft: var(--line-soft, #12424a);
    --cv-fg: var(--fg, #e7f5f3);
    --cv-muted: var(--muted, #93b8b6);
    --cv-teal: var(--teal, #22b3ad);
    --cv-teal-ink: var(--teal-ink, #6fe0d8);
    --cv-teal-soft: var(--teal-soft, #0e3f45);
    --cv-orange: var(--orange, #ff8c1a);
    --cv-orange-ink: var(--orange-ink, #ffb054);
    --cv-orange-soft: var(--orange-soft, #3a2a14);
    --cv-bad: var(--bad, #ff6b5d);
    --cv-radius: var(--radius, 16px);
    --cv-radius-sm: var(--radius-sm, 10px);
    --cv-shadow: var(--shadow, 0 10px 30px rgba(0, 0, 0, .28));
    color: var(--cv-fg);
    padding-top: 18px;
}

.cv-head { max-width: 760px; margin-bottom: 14px; }
.cv-eyebrow { margin: 0; color: var(--cv-orange-ink); font-size: .85rem; font-weight: 700; letter-spacing: 0; }
.cv-title { margin: 2px 0 6px; font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1.3; }
.cv-lead { margin: 0; color: var(--cv-muted); line-height: 1.9; }
.cv-h { font-size: 1.1rem; margin: 0 0 10px; }
.cv-muted { color: var(--cv-muted); font-size: .9rem; line-height: 1.8; margin: 0 0 10px; }

.cv-presets { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 16px; padding: 0; }
.cv-chip {
    font: inherit; font-size: .85rem; cursor: pointer; color: var(--cv-fg);
    padding: 5px 14px; border-radius: 999px; border: 1px solid var(--cv-line); background: var(--cv-surface);
    transition: border-color .15s, background .15s;
}
.cv-chip:hover { border-color: var(--cv-teal); background: var(--cv-teal-soft); }
.cv-chip:focus-visible, .cv-tab:focus-visible, .cv-tool:focus-visible, .cv-btn:focus-visible, .cv-seg button:focus-visible { outline: 2px solid var(--cv-orange); outline-offset: 2px; }

.cv-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }

/* The stage: tabs, the drawing and the answer under it. */
.cv-stage { background: var(--cv-surface); border: 1px solid var(--cv-line-soft); border-radius: var(--cv-radius); overflow: hidden; box-shadow: var(--cv-shadow); }
.cv-tabs { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--cv-line-soft); overflow-x: auto; scrollbar-width: none; }
.cv-tab {
    flex: 1 0 auto; font: inherit; font-size: .9rem; cursor: pointer; padding: 7px 12px; border: 0; border-radius: var(--cv-radius-sm);
    background: transparent; color: var(--cv-muted);
}
.cv-tab:hover { color: var(--cv-fg); background: var(--cv-surface-2); }
.cv-tab[aria-selected="true"] { color: var(--cv-fg); background: var(--cv-teal-soft); box-shadow: inset 0 -2px 0 var(--cv-teal); }
.cv-tab[hidden] { display: none; }

.cv-screen { position: relative; height: clamp(340px, 58vh, 600px); background: #020d10; touch-action: none; user-select: none; -webkit-user-select: none; }
.cv-screen:fullscreen { height: 100vh; }
.cv-canvas, .cv-gl, .cv-gl canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cv-gl[hidden], .cv-canvas[hidden] { display: none; }
.cv-gl canvas { cursor: grab; }
.cv-gl canvas:active { cursor: grabbing; }
.cv-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cv-tag {
    position: absolute; left: 0; top: 0; white-space: nowrap; font-size: .78rem; line-height: 1.5; padding: 1px 8px;
    border-radius: 6px; background: rgba(3, 24, 28, .78); color: #e7f5f3; border: 1px solid rgba(111, 224, 216, .35);
    transform: translate(-50%, -130%); will-change: transform;
}
.cv-tag-warn { border-color: rgba(255, 107, 93, .6); }
.cv-tag-hot { border-color: rgba(255, 140, 26, .7); }
.cv-tag[hidden] { display: none; }
.cv-tools { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; }
.cv-tool {
    width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer; padding: 0;
    border-radius: 9px; border: 1px solid rgba(111, 224, 216, .25); background: rgba(3, 24, 28, .7); color: #e7f5f3;
}
.cv-tool:hover { border-color: #22b3ad; }
.cv-tool svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cv-caption { position: absolute; bottom: 8px; right: 12px; left: 12px; margin: 0; font-size: .75rem; color: rgba(231, 245, 243, .72); pointer-events: none; text-shadow: 0 1px 3px #000; }
.cv-loading { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; color: #93b8b6; font-size: .9rem; }
.cv-loading[hidden] { display: none; }

.cv-viewbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 10px 14px; border-bottom: 1px solid var(--cv-line-soft); font-size: .85rem; }
.cv-viewbar [hidden] { display: none; }
.cv-inline { display: flex; align-items: center; gap: 8px; color: var(--cv-muted); }
.cv-inline output { min-width: 4.5em; color: var(--cv-fg); font-variant-numeric: tabular-nums; }
.cv-check { display: inline-flex; align-items: center; gap: 6px; color: var(--cv-muted); cursor: pointer; }
.cv-check input { accent-color: var(--cv-teal); margin: 0; }

.cv-answer { padding: 14px 16px 16px; }
.cv-answer-main { margin: 0 0 10px; font-size: 1.05rem; line-height: 1.9; }
.cv-answer-main strong { font-size: 1.45rem; color: var(--cv-orange-ink); font-variant-numeric: tabular-nums; }
.cv-answer-sub { margin: 10px 0 0; color: var(--cv-muted); font-size: .88rem; line-height: 1.8; }
.cv-bar { position: relative; height: 10px; border-radius: 999px; background: var(--cv-teal); overflow: hidden; }
.cv-bar-hidden { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--cv-p, 0%); background: repeating-linear-gradient(-45deg, var(--cv-bad) 0 6px, color-mix(in srgb, var(--cv-bad) 70%, #000) 6px 12px); transition: width .25s; }

/* The controls. */
.cv-panel { background: var(--cv-surface); border: 1px solid var(--cv-line-soft); border-radius: var(--cv-radius); padding: 14px; box-shadow: var(--cv-shadow); position: sticky; top: calc(var(--top-h, 60px) + 12px); max-height: calc(100vh - var(--top-h, 60px) - 24px); overflow-y: auto; scrollbar-width: thin; }
.cv-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.cv-panel-head .cv-h { margin: 0; }
.cv-seg { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--cv-bg); border: 1px solid var(--cv-line-soft); }
.cv-seg button { font: inherit; font-size: .78rem; cursor: pointer; border: 0; padding: 3px 10px; border-radius: 7px; background: transparent; color: var(--cv-muted); }
.cv-seg .cv-seg-on { background: var(--cv-teal-soft); color: var(--cv-fg); }

.cv-set { border: 0; border-top: 1px solid var(--cv-line-soft); margin: 10px 0 0; padding: 10px 0 0; min-width: 0; }
.cv-set legend { padding: 0 0 0 8px; font-weight: 700; font-size: .92rem; color: var(--cv-teal-ink); }
.cv-field { display: grid; grid-template-columns: minmax(0, 1fr) 150px; align-items: center; gap: 2px 10px; margin: 8px 0; }
.cv-label { font-size: .88rem; color: var(--cv-fg); }
.cv-input { display: flex; align-items: center; border: 1px solid var(--cv-line); border-radius: 9px; background: var(--cv-bg); overflow: hidden; }
.cv-input:focus-within { border-color: var(--cv-teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cv-teal) 25%, transparent); }
.cv-num { flex: 1; min-width: 0; width: 100%; font: inherit; font-size: .92rem; padding: 5px 8px; border: 0; background: transparent; color: var(--cv-fg); direction: ltr; text-align: left; font-variant-numeric: tabular-nums; outline: none; }
.cv-num.cv-bad-input { color: var(--cv-bad); }
.cv-unit { padding: 0 8px; font-size: .75rem; color: var(--cv-muted); white-space: nowrap; }
.cv-unit:empty { display: none; }
.cv-range { grid-column: 1 / -1; width: 100%; margin: 2px 0 0; accent-color: var(--cv-teal); direction: ltr; height: 18px; }
.cv-range-sm { width: 130px; grid-column: auto; margin: 0; }
.cv-hint { grid-column: 1 / -1; margin: 0; font-size: .75rem; color: var(--cv-muted); line-height: 1.7; }
.cv-select { font: inherit; font-size: .88rem; width: 100%; padding: 5px 8px; border-radius: 9px; border: 1px solid var(--cv-line); background: var(--cv-bg); color: var(--cv-fg); }
.cv-field:has(.cv-select) { grid-template-columns: minmax(0, 1fr) 190px; }
.cv-sub { padding: 2px 10px; margin: 6px 0; border-inline-start: 2px solid var(--cv-teal-soft); }
.cv-sub[hidden] { display: none; }
.cv-readout { margin: 6px 0 0; font-size: .8rem; color: var(--cv-muted); line-height: 1.8; }
.cv-readout b { color: var(--cv-fg); font-weight: 600; }
.cv-readout .cv-warn { color: var(--cv-orange-ink); }
.cv-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--cv-line-soft); }
.cv-btn { font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; padding: 8px 14px; border-radius: 10px; border: 0; background: var(--cv-teal); color: var(--on-teal, #03181c); }
.cv-btn:hover { filter: brightness(1.1); }
.cv-btn-soft { background: var(--cv-surface-2); color: var(--cv-fg); font-weight: 400; }

/* Every number. */
.cv-results, .cv-chart-box, .cv-explain { margin-top: 22px; }
.cv-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.cv-stat { background: var(--cv-surface); border: 1px solid var(--cv-line-soft); border-radius: var(--cv-radius-sm); padding: 10px 12px; }
.cv-stat-hot { border-color: color-mix(in srgb, var(--cv-orange) 55%, transparent); }
.cv-stat-k { margin: 0; font-size: .8rem; color: var(--cv-muted); }
.cv-stat-v { margin: 2px 0 0; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cv-stat-n { margin: 2px 0 0; font-size: .75rem; color: var(--cv-muted); line-height: 1.7; }

.cv-chart-box { background: var(--cv-surface); border: 1px solid var(--cv-line-soft); border-radius: var(--cv-radius); padding: 14px; }
.cv-chart { display: block; width: 100%; height: 280px; }

.cv-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.cv-cols article { background: var(--cv-surface); border: 1px solid var(--cv-line-soft); border-radius: var(--cv-radius-sm); padding: 12px 14px; }
.cv-cols h3 { margin: 0 0 6px; font-size: 1rem; color: var(--cv-teal-ink); }
.cv-cols p, .cv-cols li { color: var(--cv-muted); font-size: .9rem; line-height: 1.9; }
.cv-cols p { margin: 0 0 8px; }
.cv-cols ul { margin: 0; padding-inline-start: 18px; }
.cv-cols b { color: var(--cv-fg); }
.cv-formula { font-family: "Cambria Math", "STIX Two Math", Georgia, serif; font-size: .95rem; color: var(--cv-fg) !important; background: var(--cv-bg); border-radius: 8px; padding: 6px 10px; overflow-x: auto; white-space: nowrap; text-align: left; }
.cv-credit { margin: 18px 0 0; text-align: center; color: var(--cv-muted); font-size: .8rem; }

@media (max-width: 960px) {
    .cv-grid { grid-template-columns: minmax(0, 1fr); }
    .cv-panel { position: static; max-height: none; }
}
@media (max-width: 520px) {
    .cv-presets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
    .cv-chip { white-space: nowrap; }
    .cv-lead { font-size: .92rem; }
    .cv-screen { height: clamp(300px, 62vh, 460px); }
    .cv-field { grid-template-columns: minmax(0, 1fr) 132px; }
    .cv-field:has(.cv-select) { grid-template-columns: minmax(0, 1fr); }
    .cv-range-sm { width: 100px; }
    .cv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    .cv-bar-hidden, .cv-chip { transition: none; }
}