/* The site's shell: the end of the header (who the site is powered by, and the light that says
   whether the site is listening), the footer, and the site's pages about itself (About,
   Privacy, Terms). The layout links this file on every page, after site.css and admin.css.

   Written for a phone first, as site.css is: nothing here widens the page at 390 pixels, and
   anything a finger presses is at least 44 pixels high (var(--tap); 38 on a wide screen). */

/* ── The end of the header ───────────────────────────────────────────────── */
/* On a phone: the brand, then the APRS Connect badge and the light, then the menu button at
   the far right, where a thumb expects it. The nav drops down from the header. On a wide
   screen the nav fills the middle and these two close the row. */
.top-end { display: flex; align-items: center; gap: 2px; flex: none; margin-left: auto; }
.top .menu-btn { order: 10; margin-left: 0; }

/* The badge is drawn 34 pixels high inside a link as tall as a finger needs. */
.powered-top { position: relative; z-index: 0; display: inline-flex; align-items: center; gap: 7px; min-height: var(--tap); padding: 0 11px 0 4px; color: var(--text); font-size: 12.5px; white-space: nowrap; }
.powered-top::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 50%; height: 34px; margin-top: -17px; border-radius: 999px; border: 1px solid var(--amber-dim); background: rgba(var(--amber-rgb), 0.08); }
.powered-top:hover { text-decoration: none; }
.powered-top:hover::before { border-color: var(--amber); background: rgba(var(--amber-rgb), 0.14); }
.powered-top:focus-visible { outline: none; }
.powered-top:focus-visible::before { box-shadow: 0 0 0 3px var(--adm-ring); }
.powered-top img { flex: none; width: 26px; height: 26px; border-radius: 8px; }
.powered-top span { display: none; color: var(--muted); }
.powered-top b { color: var(--amber); font-weight: 650; }

/* The light. Its colour is never the only word: the label is beside it on a wide screen, the
   link's name says it for a screen reader, and it leads to the sentence on the About page. */
.listener { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: var(--tap); min-height: var(--tap); color: var(--muted); font-size: 12.5px; white-space: nowrap; border-radius: 9px; }
.listener:hover { color: var(--text); text-decoration: none; }
.listener:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--adm-ring); }
.listener .label { display: none; }
.listener .dot, .listener-line .dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--faint); box-shadow: 0 0 0 2px rgba(var(--tint), 0.06); }
.listener[data-state="on"] > .dot, .listener-line[data-state="on"] > .dot { background: var(--ok-mark); box-shadow: 0 0 10px rgba(var(--ok-rgb), 0.65); }
.listener[data-state="wait"] > .dot, .listener-line[data-state="wait"] > .dot { background: var(--warn); box-shadow: 0 0 8px rgba(var(--amber-rgb), 0.45); }
.listener[data-state="bad"] > .dot, .listener-line[data-state="bad"] > .dot { background: var(--bad); box-shadow: 0 0 8px rgba(var(--bad-rgb), 0.45); }

/* A narrow phone: the badge is its picture alone, so that the site's name is whole. With its
   words the badge left the name 63 of its 81 pixels at 360 wide and 78 at 375 ("APRS N..."),
   and the name fits beside them only from 390. */
@media (max-width: 389px) {
    .powered-top { padding: 0 4px; }
    .powered-top b { display: none; }
}

@media (min-width: 761px) {
    .top-end { gap: 14px; margin-left: 0; }
    /* Between a phone and a full desk the nav needs the room: the badge waits. */
    .powered-top { display: none; }
}
@media (min-width: 900px) {
    .powered-top { display: inline-flex; }
}
@media (min-width: 1100px) {
    .powered-top { padding: 0 13px 0 5px; font-size: 13.5px; gap: 9px; }
    .powered-top span { display: inline; }
    .listener { min-width: 0; padding: 0 4px; }
    .listener .label { display: inline; }
}

/* ── The footer ──────────────────────────────────────────────────────────── */
/* Three parts: whose site it is, the pages about it, and what it is powered by. On a phone the
   links have a row of their own, so each is easy to press. */
.foot .legal { order: 1; }
.foot .powered { order: 2; margin-left: auto; }
.foot .foot-links { order: 3; flex: 1 1 100%; gap: 0 22px; border-top: 1px solid var(--line); margin-top: 2px; }
@media (min-width: 761px) {
    .foot .foot-links { order: 2; flex: 0 1 auto; border-top: 0; margin: 0 auto 0 12px; }
    .foot .powered { order: 3; }
}
/* This page in each language, a row of its own under the rest: each language by its own
   name, the one in force brighter and no link. */
.foot .foot-langs { order: 4; flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 0 18px; border-top: 1px solid var(--line); margin-top: 2px; }
.foot .foot-langs span { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--text); font-weight: 600; }

/* ── About the site ──────────────────────────────────────────────────────── */
/* The heading stands above the night side of the Earth (img/globe.svg, drawn by
   tests/AprsNets.Tests/Web/shell/make-preview.mjs). On a phone the words are at the top and
   the globe rises under them; on a wide screen the words are on the left and the globe on the
   right. A shade keeps the words readable wherever the globe falls. The picture is of the
   night, so this box is dark in the light look too: its colours are written out, and its
   words are the dark look's. */
.about-hero { margin: 0 0 14px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: #e6ebf5; background-color: #070b14; background-image: linear-gradient(180deg, rgba(7, 9, 15, 0.96) 0%, rgba(7, 9, 15, 0.9) 46%, rgba(7, 9, 15, 0) 82%), url(/img/globe.svg); background-position: left top, 72% bottom; background-size: 100% 100%, auto 78%; background-repeat: no-repeat; }
.about-hero-in { padding: 26px 16px 128px; max-width: 36em; }
.about-hero h1 { font-size: 28px; line-height: 1.2; }
.about-hero .lede { margin-top: 8px; color: #c6cddb; font-size: 16px; line-height: 1.5; }

.about-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.about-grid > .card { margin: 0; }
/* A place on the page a link leads to shows clear of the top of the screen. */
.about-card, .legal-page h2 { scroll-margin-top: 14px; }
.about-card:target { border-color: var(--amber-dim); }
.about-card p { margin: 0 0 12px; color: var(--text-soft); line-height: 1.55; }
.about-card p:last-child { margin-bottom: 0; }
.about-card h2 { display: flex; align-items: center; gap: 4px; min-height: 22px; }

/* A few steps, in order. */
.about-steps { margin: 0 0 14px; padding: 0; list-style: none; counter-reset: step; }
.about-steps li { counter-increment: step; position: relative; padding: 5px 0 5px 36px; color: var(--text-soft); line-height: 1.5; }
.about-steps li::before { content: counter(step); position: absolute; left: 0; top: 4px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--amber-dim); color: var(--amber); font: 600 12px/22px var(--mono); text-align: center; }

/* A net's three things, each with its picture: a column on a phone, a row from a tablet up. */
.about-three { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.about-three li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 1px 12px; align-items: start; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(var(--tint), 0.025); }
.about-three svg { grid-row: 1 / span 2; width: 30px; height: 30px; color: var(--amber); }
.about-three b { font-weight: 600; }
.about-three span { color: var(--muted); font-size: 14px; line-height: 1.45; }

/* Whether the site is listening, in words. shell.js keeps it current. */
.listener-line { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(var(--tint), 0.025); }
.about-card .listener-line { color: var(--text); }

.about-app { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; }
.about-app img { flex: none; width: 56px; height: 56px; border-radius: 13px; }
.about-app p { margin: 0; }

.about-sources li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; }
.about-sources span { font-size: 14px; line-height: 1.5; }

@media (min-width: 620px) {
    .about-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 761px) {
    .about-hero { background-image: linear-gradient(90deg, rgba(7, 9, 15, 0.94) 0%, rgba(7, 9, 15, 0.72) 42%, rgba(7, 9, 15, 0) 80%), url(/img/globe.svg); background-position: left top, right bottom; background-size: 100% 100%, cover; }
    .about-hero-in { padding: 46px 28px 50px; }
    .about-hero h1 { font-size: 34px; }
    .about-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .about-card.wide { grid-column: 1 / -1; }
    .about-sources li { grid-template-columns: 220px minmax(0, 1fr); gap: 12px; align-items: baseline; }
}

/* ── Privacy and Terms ───────────────────────────────────────────────────── */
/* Read whole, top to bottom: one column of short parts, each under its own heading. */
.legal-page { margin: 0 auto; }
.legal-page p { margin: 0 0 10px; }
.legal-page .lede { margin-top: 6px; color: var(--muted); font-size: 14px; }
.legal-page h2 { margin: 26px 0 8px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 17px; }
.legal-foot { margin-top: 26px; padding-top: 6px; border-top: 1px solid var(--line); }