/* One session's page and the list of a net's sessions (Pages/Public/Session.cshtml and
   Sessions.cshtml). Only what those two pages need beyond site.css, map.css and charts.css,
   which come before this file. Written for a phone first: nothing here widens the page at 390
   pixels, and everything a finger presses is 44 pixels high. */

/* ── One session ─────────────────────────────────────────────────────────── */

/* The session before and the session after, under the heading: the one before at the left,
   the one after at the right, wherever only one of them is there. */
.session-steps { display: flex; align-items: center; gap: 8px; margin: 10px -10px 0; }
.session-steps .later { margin-left: auto; }
/* The session's two files, under the heading: the report and the net log, each a PDF that
   opens in a tab of its own, and the i that says which is which. */
.session-files { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; }
/* A session that is on: the line that says so, and the way to the page that follows it. */
.session-now { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; margin: 0 0 14px; }
.session-now .net-state { flex: 1 1 220px; margin: 0; }

/* Six numbers: three across on a phone, all six in a row on a desk. */
.counts.six { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.counts.six > div { padding: 10px 10px; min-width: 0; }
.counts.six b { font-size: 21px; }
.counts.six span { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.summary.under-counts { margin: -6px 2px 14px; }

/* A number beside a card's heading: "Countries 49", "US states 43 of 50". */
.card h2 .count { margin-left: 6px; color: var(--faint); font-weight: 500; letter-spacing: 0.02em; text-transform: none; }

/* The rest of a ranked list, under the first ten: closed until it is asked for. */
.more-rows { border-top: 1px solid var(--line); }
.more-rows > summary { display: flex; align-items: center; min-height: var(--tap); color: var(--blue); cursor: pointer; list-style: none; }
.more-rows > summary::-webkit-details-marker { display: none; }
.more-rows > summary::after { content: ""; width: 7px; height: 7px; margin: -3px 0 0 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.more-rows[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
.more-rows > summary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--adm-ring); border-radius: 6px; }
.more-rows .rank li:first-child { border-top: 1px solid var(--line); }
.summary.after-rank { margin: 12px 0 0; }

/* Which operators the roster lists. */
.roster-show { margin: 0 0 12px; }
#roster .filter { margin-bottom: 12px; }
/* While the roster is being asked for again, it stays where it is and dims a little. */
#roster[aria-busy="true"] [data-roster-part="list"] { opacity: 0.55; transition: opacity 0.15s ease 0.15s; }
[data-fly-hint] { color: var(--faint); }
/* "Tap it" for a finger, "Click it" for a mouse. */
[data-fly-hint] .by-mouse { display: none; }
@media (hover: hover) and (pointer: fine) {
    [data-fly-hint] .by-finger { display: none; }
    [data-fly-hint] .by-mouse { display: inline; }
}
/* With no map drawn (session.js says so), a row that would have gone to it is a plain row. */
#roster.no-map [data-map-fly] { cursor: auto; }

/* The roster. It is a table only where its seven columns fit, each on one line: from 1121
   pixels wide. Narrower than that, on a phone, a tablet and a phone held sideways alike,
   each line is a small card: the callsign and the time on the first line, what was said
   under them, and then the country, the program and how many check-ins on one line of small
   print. The site's other folded tables are tables again from 761 pixels (.cards in
   site.css). This one was too, and at 800 pixels it was 888 wide in a card of 749: the whole
   page scrolled sideways. On a net whose time zone is not UTC the time has its UTC time
   beside it and the table wants about 1,015 pixels, which a page has from 1121. */
/* The callsign's cell is two columns: a place for the station's symbol, kept also when
   there is none to draw, and beside it the callsign with its tags on a line under it. So
   every callsign starts at one place and every tag under one. */
.session-roster .who-lines { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: start; row-gap: 3px; }
/* As tall as the callsign's line, so the symbol is beside the callsign and not beside what
   is under it. */
.session-roster .who-sym { grid-column: 1; grid-row: 1; display: flex; align-items: center; height: 22px; }
.session-roster .who-sym .sym { margin: 0; }
/* The cell's own baseline is the callsign's: in a card the time stands on that line. */
.session-roster .who-name { grid-column: 2; min-width: 0; align-self: baseline; }
.session-roster .who-lines .tags { grid-column: 2; }
.session-roster .who-lines .tag { vertical-align: 0; }
/* Another SSID of the callsign is a line of its own under it: beside it, it fitted on a
   phone and broke on a wide screen. */
.session-roster .who-name .also { display: block; margin: 0; }
/* A callsign that leads to its station's page: as tall as a finger needs, without making
   the line any taller. */
.session-roster a.station { display: inline-flex; align-items: center; min-height: 44px; margin: -11px 0; }
@media (max-width: 1120px) {
    .session-roster tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
    .session-roster td.who { flex: 1 1 0; min-width: 50%; }
    .session-roster td.when { flex: 0 0 auto; margin-left: auto; }
    .session-roster td.said { flex: 0 0 100%; }
    /* A check-in with no words keeps its line, at no height: with the cell gone the small
       print came up beside the time. */
    .session-roster td.said:empty { display: block; height: 0; }
    .session-roster td.fact { flex: 0 1 auto; color: var(--muted); font-size: 13px; text-align: left; }
    .session-roster td.fact.quiet { display: none; }
    /* A dot between two of them. */
    .session-roster td.fact:not(:empty):not(.quiet) ~ td.fact:not(:empty):not(.quiet)::before { content: "\00B7"; margin: 0 10px 0 0; color: var(--faint); }
    /* The Raw button ends that line of small print, at its right. */
    .session-roster td.raw { flex: none; width: auto; margin-left: auto; }
}
/* From 761 pixels site.css has made every folded table a table again. Up to 1120 this one
   is put back as it is folded, rule for rule (".cards" there, and what its "Wider screens"
   undo): a rule added to either of those wants its answer here. */
@media (min-width: 761px) and (max-width: 1120px) {
    .session-roster thead { display: none; }
    .session-roster, .session-roster tbody { display: block; width: 100%; }
    .session-roster tr { padding: 10px 2px; border-bottom: 1px solid var(--line); }
    .session-roster td { display: block; padding: 0; border: 0; min-width: 0; }
    .session-roster td:empty { display: none; }
    .session-roster td.when { text-align: right; font-size: 13px; white-space: normal; }
    .session-roster td.when .utc-only { display: inline; }
}
@media (min-width: 761px) {
    .counts.six { grid-template-columns: repeat(6, 1fr); gap: 10px; }
    .counts.six > div { padding: 10px 14px; }
    .counts.six b { font-size: 24px; }
    .counts.six span { font-size: 12px; }
}
@media (min-width: 1121px) {
    /* The table's headings put it in order, so the list to pick an order from is not shown. */
    select.roster-order-pick { display: none; }
    /* Wide enough for the tags of a line on one line (Early, Radio and First time are the
       most a line has had). */
    .session-roster td.who { min-width: 226px; }
    .session-roster .who-lines .tags { flex-wrap: nowrap; }
    /* The heading stands over the callsigns, past the place kept for the symbol. */
    .session-roster th:first-child { padding-left: 34px; }
    /* The time's heading names the net's time zone, and a long name goes on to a second
       line: on one line "Time (Kuala Lumpur time)" alone made its column 177 pixels wide. */
    .session-roster th:nth-child(2) { white-space: normal; }
    .session-roster th { vertical-align: bottom; }
    /* The words give up the width the Raw button's cell takes, so the table is no wider for it. */
    .session-roster td.said { min-width: 196px; }
    .session-roster td.fact { color: var(--muted); font-size: 13.5px; white-space: nowrap; }
    /* Room for "United Kingdom" on one line. A longer name goes on to a second line and
       does not widen the table. */
    .session-roster td.fact.country { white-space: normal; min-width: 140px; }
    .session-roster td.fact.from { white-space: normal; min-width: 160px; max-width: 220px; }
    .session-roster td.fact.num { text-align: right; }
    .session-roster .unit { display: none; }
    #roster:not(.no-map) .session-roster tr[data-map-fly]:hover td { background: rgba(var(--tint), 0.03); }
}

/* ── The list of sessions ────────────────────────────────────────────────── */

/* One card for each session, newest first: one column on a phone, more where there is room. */
.session-list { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0; padding: 0; list-style: none; }
.session-list > li { margin: 0; min-width: 0; }
.session-card { height: 100%; padding: 6px 14px 14px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); }
.session-card[data-href] { cursor: pointer; }
.session-card[data-href]:hover { border-color: var(--amber-dim); }
.session-card.on { border-color: rgba(var(--ok-rgb), 0.4); }
.session-card header { display: flex; align-items: center; justify-content: space-between; gap: 4px 10px; flex-wrap: wrap; }
.session-card h2 { font-size: 17px; font-weight: 650; }
.session-card h2 a { color: var(--text); }
.session-card .hours { margin: -4px 0 0; color: var(--muted); font-size: 13px; }
.session-card .quiet { margin: 12px 0 0; color: var(--muted); }
/* How many, and under it a bar as long as this session's share of the net's biggest. */
.session-card .size { margin: 12px 0 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.size-bar { display: block; width: 100%; height: 6px; margin: 6px 0 0; border-radius: 3px; background: rgba(var(--tint), 0.08); }
.size-bar rect { fill: var(--chart-amber); }
.session-card.on .size-bar rect { fill: var(--ok-mark); }
.session-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 10px; margin: 12px 0 0; }
.session-facts div { display: flex; flex-direction: column-reverse; min-width: 0; }
.session-facts dt { color: var(--muted); font-size: 12px; }
.session-facts dd { margin: 0; font-family: var(--mono); font-size: 16px; }
.session-times { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 12px; margin: 10px 0 0; font-size: 13px; }
.session-times div { display: contents; }
.session-times dt { color: var(--faint); }
.session-times dd { margin: 0; color: var(--muted); }
.sessions-count { margin: 0 2px 12px; }

@media (min-width: 761px) {
    .session-list { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
}