/* A net's stations (Pages/Public/Stations.cshtml), one station on a net (Station.cshtml) and one
   callsign over every listed net (Callsign.cshtml). Only what these pages need and site.css,
   map.css and charts.css do not give: the layout of a ledger card, the station page's grid, a
   few lines of its facts, and the list of an operator's SSIDs. Written for a phone first, as
   site.css is; the wider layout is at the bottom. */

/* ── The list of stations ────────────────────────────────────────────────── */
/* Three numbers in one row, also on a phone. */
.counts.three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.counts.three > div { padding: 10px 12px; min-width: 0; }
.counts.three b { font-size: 20px; }

/* The orders, above the list: one tap each. */

/* The stations' search on a phone: the box has a line to itself, and the list to pick an
   order from is under it beside the button. Beside the box it cut the box's own words off. */
@media (max-width: 760px) {
    .stations-filter input[type="search"] { flex: 1 1 100%; }
    .stations-filter select { flex: 1 1 0; min-width: 0; }
}
/* A line of the ledger as a card: the callsign and its last check-in, how often under them in
   one row, then its last message. The cells are in the order the table has them on a wide
   screen, and the card fills in that same order. */
.ledger tr { grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 0 12px; padding: 6px 2px 10px; }
.ledger td.who { grid-column: 1 / 4; display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px; }
.ledger td.who .flag { margin: 0; }
.ledger td.who .also { margin: 0 0 4px; }
.ledger td.when { grid-column: 4; align-self: center; }
.ledger td.stat, .ledger td.first { color: var(--muted); font-size: 13px; text-align: left; }
.ledger td.stat::after { content: " " attr(data-unit); }
.ledger td.first { grid-column: 3 / -1; }
.ledger td.first::before { content: "first heard "; }
.ledger td.first.none::before { content: none; }
.ledger td.said { grid-column: 1 / -1; margin-top: 3px; }
/* Which check-in method the station used, on a net that has more than one: a line of small
   print of its own in a card, a column in the table. */
.ledger td.door { margin-top: 2px; }
.ledger tr[data-href] { cursor: pointer; }

/* ── One station ─────────────────────────────────────────────────────────── */
.page h1 .sym { margin: -4px 8px -2px 0; }
.out-links { margin-top: 10px; }
/* The way back to the operator, after the way back to the list, on a page narrowed to one SSID. */
.crumb a + a::before { content: "\203A"; margin: 0 8px 0 4px; color: var(--faint); }
/* "N0CALL on all nets": one plain link under the head. */
.all-nets { margin: 6px 0 0; font-size: 14px; }
/* The line that says the page shows one SSID alone, with the way back to all of them. */
.narrowed { display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px; margin: 0 0 14px; padding: 4px 14px; border: 1px solid var(--amber-dim); border-radius: var(--radius); background: rgba(var(--amber-rgb), 0.08); color: var(--muted); font-size: 14px; }
.narrowed .call { color: var(--text); font-weight: 600; }

/* An operator's SSIDs, each with a bar of its check-ins (the chart kit's ranked list). A row
   is as tall as a finger needs and the whole of it is the link that shows that SSID alone. */
.card h2.ssids-head { display: flex; align-items: center; gap: 6px; }
.ssids-head .count { margin-left: 0; }
.station-ssids li { min-height: var(--tap); align-content: center; padding-top: 10px; padding-bottom: 12px; }
.station-ssids .rank-name a { color: var(--blue); }
.station-ssids .rank-name a::after { content: ""; position: absolute; inset: 0; }
.station-ssids .rank-name a:focus-visible { outline: none; }
.station-ssids .rank-name a:focus-visible::after { box-shadow: 0 0 0 3px var(--adm-ring); border-radius: 6px; }
.station-ssids .rank-num small { margin-left: 2px; }
/* Narrowed to one of them: that row stands out, and the others step back. */
.station-ssids li.on .rank-name a { color: var(--text); font-weight: 600; }
.station-ssids li.off { color: var(--muted); }
.station-ssids li.off .rank-num { color: var(--muted); }
.station-ssids li.off::after { background: var(--line-strong); }
.more-chips .station-ssids { border-top: 1px solid var(--line); }

/* ── One callsign over every net ─────────────────────────────────────────── */
.ssid-chips { margin-top: 4px; }
.ssid-chips .chip { font-size: 13px; }
/* A net's name is words, not a callsign: it may run on to a second line of its card. */
.on-nets td.who a.tap { overflow-wrap: anywhere; }

.station-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.counts.pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.facts dd { overflow-wrap: anywhere; }
.facts dd.said { color: var(--text); }
.facts .mono-list { font-family: var(--mono); font-size: 14px; }
.facts .wide { grid-column: 1 / -1; }
/* A label with an i beside it: the i is as tall as a finger needs and the label is a line of
   small capitals, so the label's row is given the room. */
.facts dt.with-info { display: flex; align-items: center; gap: 4px; min-height: 26px; }
.facts dt.with-info .info-btn { margin: -10px -8px -10px -2px; }
/* "4 d ago" after a time, once the page's script has written it. With no script there is
   nothing in it and nothing is shown. */
.ago { color: var(--faint); font-size: 13px; white-space: nowrap; }
.ago:not(:empty)::before { content: " ("; }
.ago:not(:empty)::after { content: ")"; }

.place-card .summary { margin-bottom: 10px; }
.card h2.after { margin-top: 20px; }
.session-chips { margin-bottom: 0; }
.more-chips { margin-top: 6px; }
.more-chips > summary { display: inline-flex; list-style: none; padding-left: 0; }
.more-chips > summary::-webkit-details-marker { display: none; }
.more-chips > summary::after { content: ""; width: 7px; height: 7px; margin: -3px 0 0 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.more-chips[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
.more-chips[open] > summary { margin-bottom: 6px; }

/* The tapped day of the small chart, said in words under it (station.js). */
.spark-said { min-height: 1.5em; margin: 6px 0 0; color: var(--muted); font-size: 13.5px; }
.spark-said b { color: var(--text); font-weight: 600; }
.spark .cursor { fill: rgba(var(--tint), 0.22); pointer-events: none; }
.spark.can-tap svg { cursor: pointer; touch-action: pan-y; }

/* A station's messages: what kind of line and when on the first row of a card, the words under. */
.station-messages td.who { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 8px; }
.station-messages td.who .call { font-size: 13px; }
.station-messages td.who .door { color: var(--faint); font-size: 12.5px; }
.station-messages .tag.is-checkin { color: var(--amber); border-color: var(--amber-dim); }
/* On a net whose clock is not UTC the time is said twice: the second under the first, so the
   kind of line keeps its room on the row. */
.station-messages td.when .utc { display: block; }
.station-messages td.said { margin-top: 2px; }
.station-messages tr.new { animation: flash 1.6s ease-out; }
#messages .pager .btn[aria-busy="true"] { opacity: 0.55; pointer-events: none; }

/* ── Wider screens ───────────────────────────────────────────────────────── */
@media (min-width: 761px) {
    .counts.three { gap: 10px; }
    .counts.three > div { padding: 10px 14px; }
    .counts.three b { font-size: 24px; }

    /* The ledger is a table again. */
    .ledger td.who { display: table-cell; }
    .ledger td.who .flag { margin: 0 2px 0 8px; }
    .ledger td.who .also { margin: 0 0 0 6px; }
    .ledger td.when { white-space: nowrap; }
    .ledger td.stat, .ledger td.first { color: inherit; font-size: inherit; white-space: nowrap; }
    .ledger td.stat { text-align: right; font-family: var(--mono); }
    .ledger td.stat::after, .ledger td.first::before { content: none; }
    .ledger td { vertical-align: middle; }
    .ledger td.who a.tap { min-height: 30px; }
    .ledger td.said { margin-top: 0; color: var(--muted); }
    .ledger td.door { margin-top: 0; white-space: nowrap; }
    .ledger tbody tr:hover td { background: rgba(var(--tint), 0.03); }

    /* The facts beside the place, the place's map as tall as the facts. */
    .station-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; align-items: stretch; }
    .place-card { display: flex; flex-direction: column; }
    .place-card .map.small:not([data-state="empty"]):not([data-state="missing"]) { flex: 1 1 auto; height: auto; min-height: 280px; }

    .station-messages td.who { display: table-cell; white-space: nowrap; }
    .station-messages td.when .utc { display: inline; }
    .station-messages td.who .call, .station-messages td.who .door { margin-left: 8px; }
    .station-messages td.said { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .station-messages tr.new { animation: none; }
}