/* noga.es XC section figures (figures.js). Copied into every release as
 * <app>_map/assets/figures.css. Figures always sit on a white card, like the
 * former images, so the colours below are light-surface values in both site themes. */
.noga-fig { --nf-text: #1e293b; --nf-muted: #525f73; --nf-grid: #e5e7eb; --nf-accent: #2E9E39;
            margin: 0 0 16px; padding: 14px 16px 10px; background: #fff; color: var(--nf-text);
            border: 1px solid rgba(148,163,184,.25); border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,.06);
            font-size: 13px; line-height: 1.4; min-height: 120px; }
/* Placeholder about as tall as the drawn chart (measured: ~600 px at 1100 px wide, ~520 px
 * at 540 px), so drawing it barely shifts the page. Height only: an aspect-ratio would turn
 * the min-height into a minimum width and widen the placeholder beyond its column. */
.noga-fig[data-state="waiting"], .noga-fig[data-state="loading"] { min-height: 540px; }
.nf-head { margin: 0 0 4px; }
.nf-title { display: block; font-size: 15px; font-weight: 700; color: var(--nf-text); }
.nf-note { display: block; font-size: 12.5px; color: var(--nf-muted); margin-top: 2px; }
.nf-ylabel { font-size: 11.5px; color: var(--nf-muted); margin: 6px 0 2px; }
.nf-plot { position: relative; }
.nf-plot > svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y;
                 font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 11px; }
.nf-tip svg, .nf-legend svg { display: inline-block; flex: none; width: 18px; height: 10px; }
.nf-grid { stroke: var(--nf-grid); stroke-width: 1; }
.nf-base { stroke: #94a3b8; stroke-width: 1; }
.nf-tick { stroke: #94a3b8; }
.nf-axis, .nf-value { fill: var(--nf-muted); }
.nf-label { fill: var(--nf-text); }
.nf-cross { stroke: #64748b; stroke-width: 1; stroke-dasharray: 3 3; }
.nf-series { transition: opacity .15s; }
.nf-tip { position: absolute; z-index: 5; pointer-events: none; min-width: 140px; max-width: 280px;
          padding: 6px 9px; background: #fff; color: var(--nf-text); border: 1px solid #cbd5e1; border-radius: 8px;
          box-shadow: 0 6px 20px rgba(15,23,42,.14); font-size: 12px; }
.nf-tip strong { display: block; margin-bottom: 3px; }
.nf-tip-row { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.nf-tip-row span { overflow: hidden; text-overflow: ellipsis; flex: 1; }
.nf-tip-row b { font-weight: 600; font-variant-numeric: tabular-nums; }
.nf-legend { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12.5px; }
.nf-legend li { display: inline-flex; align-items: center; gap: 2px; }
.nf-key { display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; background: none; border: 0;
          color: inherit; font: inherit; cursor: pointer; text-align: left; }
.nf-key[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
.nf-key:focus-visible, .nf-pager button:focus-visible { outline: 2px solid var(--nf-accent); outline-offset: 2px; }
.nf-link { padding: 0 3px; color: var(--nf-accent); text-decoration: none; font-weight: 700; }
.nf-link:hover { text-decoration: underline; }
.nf-band { display: inline-block; width: 16px; height: 10px; border-radius: 2px; opacity: .25; vertical-align: -1px; margin-left: 8px; }
.nf-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.nf-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 6px 0 2px; }
.nf-pager { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--nf-muted); }
.nf-pager[hidden] { display: none; }
.nf-hint { display: none; font-size: 11.5px; color: var(--nf-muted); }
.nf-zoomed .nf-hint, .nf-is-full .nf-hint { display: inline; }
@media (hover: none) { .nf-zoomed:not(.nf-is-full) .nf-hint { display: none; } }  /* phones: keep the bar on one line */
.nf-tools { display: flex; gap: 4px; margin-left: auto; }
.nf-tool { min-width: 30px; height: 28px; padding: 0 6px; border: 1px solid rgba(148,163,184,.5); border-radius: 6px;
           background: #fff; color: var(--nf-text); font: inherit; font-size: 14px; line-height: 1; cursor: pointer; }
.nf-tool:hover:not(:disabled) { border-color: var(--nf-accent); color: var(--nf-accent); }
.nf-tool:disabled { opacity: .35; cursor: default; }
.nf-tool:focus-visible { outline: 2px solid var(--nf-accent); outline-offset: 2px; }
.noga-fig[data-title="off"]:not(.nf-is-full) .nf-title { display: none; }
.nf-zoomed .nf-plot > svg { cursor: grab; }
.nf-plot.nf-dragging > svg { cursor: grabbing; }
/* Full screen: the Fullscreen API (:fullscreen) or, where it is missing (iPhone), a fixed
 * overlay. The plot is the flexible row, and figures.js draws the chart at its height. */
.noga-fig:fullscreen { margin: 0; border: 0; border-radius: 0; box-shadow: none; overflow: auto;
                       display: flex; flex-direction: column; padding: 16px 20px 12px; }
.noga-fig.nf-full { position: fixed; inset: 0; z-index: 10000; margin: 0; border: 0; border-radius: 0; box-shadow: none;
                    overflow: auto; display: flex; flex-direction: column;
                    padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right))
                             max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
.nf-is-full .nf-plot { flex: 1 1 auto; min-height: 260px; }
.nf-is-full .nf-plot > svg { touch-action: none; }
.nf-is-full > :not(.nf-plot) { flex: none; }
html.nf-noscroll, html.nf-noscroll body { overflow: hidden; }
/* Collapsible groups (data-show="N"): the button after the group; hidden items stay hidden
 * even where page styles give them a display value. */
[data-show-ready] > [hidden] { display: none !important; }
.nf-more { display: block; margin: 4px auto 24px; padding: 8px 18px; border: 1px solid currentColor; border-radius: 999px;
           background: transparent; color: var(--accent, #2E9E39); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.nf-more:hover { background: rgba(46,158,57,.08); }
.nf-more:focus-visible { outline: 2px solid var(--accent, #2E9E39); outline-offset: 2px; }
.nf-pager button { min-width: 34px; height: 30px; padding: 0 8px; border: 1px solid rgba(148,163,184,.5); border-radius: 6px;
                   background: #fff; color: var(--nf-text); font-size: 16px; line-height: 1; cursor: pointer; }
.nf-pager button:hover { border-color: var(--nf-accent); color: var(--nf-accent); }
.nf-table { margin-top: 8px; }
.nf-table summary { cursor: pointer; font-size: 12.5px; color: var(--nf-accent); font-weight: 600; }
.nf-table-wrap { max-height: 360px; overflow: auto; margin-top: 6px; border: 1px solid var(--nf-grid); border-radius: 6px; }
.nf-table table { width: auto; min-width: 100%; border-collapse: collapse; background: #fff; color: var(--nf-text);
                  box-shadow: none; border-radius: 0; font-size: 12px; }
.nf-table th, .nf-table td { padding: 3px 8px; border-bottom: 1px solid var(--nf-grid); text-align: right;
                             white-space: nowrap; font-variant-numeric: tabular-nums; }
.nf-table thead th { position: sticky; top: 0; background: #f8fafc; color: var(--nf-text); font-weight: 600; }
.nf-table tbody th { text-align: left; font-weight: 500; }
.nf-source { margin: 6px 0 0; font-size: 11px; color: #64748b; }