/* The chart kit's look (wwwroot/js/charts/charts.js): bars, stacked bars, an area, bars by the
hour, a sparkline, a ranked list with bars, flags, and the two-handle slider of months. In
the aprsthursday look: dark, amber, the type of site.css, which this file comes after.
Every chart is written by the page as words and numbers first (a table, a list, a line of
text), and the kit draws over that. So a screen reader, a reader whose script failed and a
reader who would sooner have the numbers all get them: nothing is told by a picture alone. */
/* ── A chart drawn from a table ──────────────────────────────────────────── */
.chart { position: relative; margin: 8px 0 0; padding: 0; min-width: 0; }
.chart-plot { position: relative; width: 100%; }
.chart-plot canvas { display: block; width: 100% !important; }
/* The table the page wrote. Until the chart is drawn it is what the reader sees, inside a box
that scrolls and never widens the page. Once drawn it is kept for a screen reader and
shown again by the button under the chart. */
.chart-data { margin: 0; font-size: 14px; }
.chart-data caption { text-align: left; color: var(--muted); font-size: 13px; padding: 0 0 6px; }
.chart-data th[scope="row"], .chart-data tbody th { text-align: left; font-weight: 400; color: var(--text); text-transform: none; letter-spacing: 0; font-size: 14px; white-space: normal; padding: 7px 8px; border-bottom: 1px solid var(--line); }
.chart-data td { text-align: right; font-family: var(--mono); padding: 7px 8px; }
.chart-data thead th + th { text-align: right; }
.chart-table { max-height: 320px; overflow: auto; margin-top: 8px; border: 1px solid var(--line); border-radius: 9px; }
.chart.chart-drawn:not(.show-table) .chart-table { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.chart-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; margin-top: 4px; }
.chart-toggle { flex: none; display: inline-flex; align-items: center; min-height: var(--tap); margin-left: auto; padding: 0 2px; border: 0; background: none; color: var(--muted); font-size: 13px; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.chart-toggle:hover { color: var(--text); }
.chart-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--adm-ring); border-radius: 6px; }
/* What a tapped bar says: its own line under the chart, with the way to its page. A phone has
no hover, and a line that stays put is easier to read than a card over the bars. */
.chart-readout { flex: 1 1 100%; min-width: 0; margin: 0; padding: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.chart-readout b { color: var(--text); font-weight: 600; }
.chart-readout a { display: inline-flex; align-items: center; min-height: var(--tap); margin-left: 4px; font-weight: 600; }
.chart-readout.idle { color: var(--faint); font-size: 13px; }
/* Words where a chart would have nothing honest to draw. */
.chart-empty { margin: 0; padding: 22px 8px; text-align: center; color: var(--muted); }
.chart-empty[hidden], .chart-plot[hidden], .chart-foot[hidden] { display: none; }
.chart-words { margin: 0 0 6px; color: var(--muted); font-size: 13.5px; }
.chart-card h2 + .chart-words { margin-top: -4px; }
/* ── A sparkline ─────────────────────────────────────────────────────────── */
.spark { display: block; position: relative; }
.spark svg { display: block; width: 100%; height: 60px; }
.spark .bar { fill: var(--amber-mark); }
.spark .base { stroke: var(--line-strong); stroke-width: 1; }
/* A marked day (a day the net met) is a faint band the full height, so a missed one reads as a gap. */
.spark .band { fill: rgba(var(--ok-rgb), 0.14); }
.spark-ends { display: flex; justify-content: space-between; color: var(--faint); font: 11px var(--mono); margin-top: 3px; }
.spark-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 12.5px; }
.spark-key li { display: inline-flex; align-items: center; gap: 6px; }
.spark-key i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--amber-mark); }
.spark-key i.band { background: rgba(var(--ok-rgb), 0.35); }
/* A sparkline whose bars have names of their own (a session each, data-labels). A bar is
never wider than 16 pixels, so three sessions are a small picture at the left and not three
slabs across the card. The kit says how many bars there are (--spark-bars). The two names
under its ends keep room to be read when the picture is narrower than they are. */
.spark-drawn.by-label { max-width: calc(var(--spark-bars, 90) * 16px); }
.spark-drawn.by-label .spark-ends { min-width: 190px; gap: 12px; }
.spark-drawn.by-label .spark-ends span { white-space: nowrap; }
/* ── A ranked list with bars: countries, most sessions ───────────────────── */
.rank { margin: 0; padding: 0; list-style: none; }
.rank li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; padding: 8px 0 11px; border-bottom: 1px solid var(--line); }
.rank li:last-child { border-bottom: 0; }
.rank .rank-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank .rank-name a.tap { min-height: 0; }
.rank .rank-num { font-family: var(--mono); color: var(--text); white-space: nowrap; }
.rank .rank-num small { color: var(--faint); font-size: 12px; margin-left: 6px; }
/* The bar is the row's own lower edge, as long as the row's share of the longest. The kit
sets --rank; with no script there is no bar and the numbers stand as they are. */
.rank li::after { content: ""; position: absolute; left: 0; bottom: 4px; height: 4px; width: var(--rank, 0%); min-width: 0; border-radius: 0 2px 2px 0; background: var(--chart-amber); }
.rank li[data-value="0"]::after { display: none; }
.rank.columns { columns: 2 260px; column-gap: 28px; }
.rank.columns li { break-inside: avoid; }
/* ── Flags ───────────────────────────────────────────────────────────────── */
/* : the kit writes the flag. Windows draws no flag
glyphs and shows two letters in their place; there the flag is a small badge of the code. */
.flag { display: inline-block; margin-right: 5px; font-size: 15px; line-height: 1; vertical-align: -1px; }
.flag:empty { display: none; }
html.no-flags .flag { font-size: 0; }
html.no-flags .flag::after { content: attr(data-code); font: 600 10px/1 var(--mono); color: var(--muted); border: 1px solid var(--line-strong); border-radius: 4px; padding: 2px 4px; vertical-align: 1px; }
/* ── Which months the charts show: two handles on one track ──────────────── */
.month-range { display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; margin: 0 0 14px; }
.month-range[hidden] { display: none; }
.month-label { flex: 0 0 auto; font-family: var(--mono); font-size: 14px; color: var(--text); white-space: nowrap; }
/* The two sliders are native range inputs laid over one track; only their thumbs take a touch. */
.month-track { position: relative; flex: 1 1 220px; min-width: 0; height: var(--tap); margin: 0 14px; }
.month-track::before { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 2px); height: 4px; border-radius: 2px; background: rgba(var(--tint), 0.12); }
.month-fill { position: absolute; top: calc(50% - 2px); height: 4px; border-radius: 2px; background: var(--amber-mark); }
.month-track input[type="range"] { position: absolute; left: -14px; right: -14px; top: 0; width: calc(100% + 28px); height: 100%; margin: 0; padding: 0; background: transparent; -webkit-appearance: none; appearance: none; pointer-events: none; }
.month-track input[type="range"]::-webkit-slider-runnable-track { background: transparent; height: 100%; }
.month-track input[type="range"]::-moz-range-track { background: transparent; height: 100%; }
.month-track input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; width: 28px; height: 28px; margin-top: calc((var(--tap) - 28px) / 2); border-radius: 50%; background: var(--amber-mark); border: 3px solid var(--panel-solid); box-shadow: 0 0 0 1px var(--line-strong); cursor: pointer; }
.month-track input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 22px; height: 22px; border-radius: 50%; background: var(--amber-mark); border: 3px solid var(--panel-solid); box-shadow: 0 0 0 1px var(--line-strong); cursor: pointer; }
.month-track input[type="range"]:focus-visible { outline: none; }
.month-track input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--adm-ring); }
.month-track input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--adm-ring); }
@media (min-width: 761px) {
.chart-readout { flex: 1 1 320px; }
.month-range { max-width: 620px; }
.chart-data, .chart-data tbody th { font-size: 13.5px; }
}
/* ── A pie with its key ──────────────────────────────────────────────────── */
/* with an the page wrote: the key says every
name, number and share, and the kit draws the ring beside it. Eight colours and no more, in
this order and never another: the order is what keeps two slices that touch apart for
somebody who is colour-blind (the dataviz validator, on the card's colour, dark). The ninth
name to the twelfth take the first four again in stripes, and the rest are one grey. The
kit holds the same colours (APRSNETS.charts.colors.slices); a test holds the two equal. */
.pie { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin: 0; }
.pie-drawn { position: relative; flex: 0 0 auto; width: 200px; height: 200px; margin: 0 auto; }
.pie-drawn svg { display: block; width: 100%; height: 100%; }
/* Two pixels of the card between two slices. */
.pie-drawn path { stroke: var(--panel-solid); stroke-width: 1; stroke-linejoin: round; transition: opacity 0.12s; }
.pie.picking .pie-drawn path:not(.on) { opacity: 0.3; }
.pie-centre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0 46px; text-align: center; pointer-events: none; }
.pie-centre b { color: var(--text); font: 600 22px/1.15 var(--mono); letter-spacing: -0.02em; }
.pie-centre span { color: var(--muted); font-size: 12px; line-height: 1.25; overflow-wrap: anywhere; }
.pie-key { flex: 1 1 260px; min-width: 0; margin: 0; padding: 0; list-style: none; columns: 2 230px; column-gap: 28px; }
.pie-key li { break-inside: avoid; display: grid; grid-template-columns: auto minmax(0, 1fr) auto 5ch; align-items: center; gap: 0 9px; min-height: 30px; padding: 2px 6px; border-radius: 6px; }
.pie-key li.on { background: rgba(var(--tint), 0.07); }
.pie-dot { width: 12px; height: 12px; border-radius: 3px; }
.pie-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pie-num { color: var(--text); font-family: var(--mono); }
.pie-share { color: var(--muted); font-size: 13px; text-align: right; white-space: nowrap; }
.pie-c1 { background: #3987e5; }
.pie-c2 { background: #d95926; }
.pie-c3 { background: #199e70; }
.pie-c4 { background: #c98500; }
.pie-c5 { background: #d55181; }
.pie-c6 { background: #008300; }
.pie-c7 { background: #9085e9; }
.pie-c8 { background: #e66767; }
.pie-rest { background: #6c7689; }
.pie-h1 { background: repeating-linear-gradient(45deg, #3987e5 0 3px, rgba(57, 135, 229, 0.28) 3px 6px); }
.pie-h2 { background: repeating-linear-gradient(45deg, #d95926 0 3px, rgba(217, 89, 38, 0.28) 3px 6px); }
.pie-h3 { background: repeating-linear-gradient(45deg, #199e70 0 3px, rgba(25, 158, 112, 0.28) 3px 6px); }
.pie-h4 { background: repeating-linear-gradient(45deg, #c98500 0 3px, rgba(201, 133, 0, 0.28) 3px 6px); }
/* The same eight hues in the same order for the light look: the palette's light steps, which
the same validator passes on the light card. Three of them (the aqua, the yellow and the
magenta) are under 3 to 1 against white, which it allows where every slice is also named in
words, as the key does. The grey is the one colour that serves both looks. The kit holds
these too (APRSNETS.charts.colors.slicesLight), and the same test holds the two equal. */
:root[data-theme="light"] .pie-c1 { background: #2a78d6; }
:root[data-theme="light"] .pie-c2 { background: #eb6834; }
:root[data-theme="light"] .pie-c3 { background: #1baf7a; }
:root[data-theme="light"] .pie-c4 { background: #eda100; }
:root[data-theme="light"] .pie-c5 { background: #e87ba4; }
:root[data-theme="light"] .pie-c6 { background: #008300; }
:root[data-theme="light"] .pie-c7 { background: #4a3aa7; }
:root[data-theme="light"] .pie-c8 { background: #e34948; }
:root[data-theme="light"] .pie-h1 { background: repeating-linear-gradient(45deg, #2a78d6 0 3px, rgba(42, 120, 214, 0.28) 3px 6px); }
:root[data-theme="light"] .pie-h2 { background: repeating-linear-gradient(45deg, #eb6834 0 3px, rgba(235, 104, 52, 0.28) 3px 6px); }
:root[data-theme="light"] .pie-h3 { background: repeating-linear-gradient(45deg, #1baf7a 0 3px, rgba(27, 175, 122, 0.28) 3px 6px); }
:root[data-theme="light"] .pie-h4 { background: repeating-linear-gradient(45deg, #eda100 0 3px, rgba(237, 161, 0, 0.28) 3px 6px); }
@media (prefers-reduced-motion: reduce) {
.pie-drawn path { transition: none; }
}