/* ============================================================================
   layout.css — the shared shell and the components more than one page uses.
   Page-specific rules live in home.css / weather.css / solar.css / admin.css.
   ========================================================================= */

/* Visible to screen readers and nothing else. Used for the page's <h1> on
   pages whose first visible heading is a section, not a page title. */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── Page scaffold ───────────────────────────────────────────────────────── */
.page {
	position: relative;
	z-index: 1;
}

.page-body {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 28px 24px 48px;
}

/* Full-bleed: the page manages its own inner widths (index.php's hero). */
.page-body-wide {
	max-width: none;
	padding: 0;
}

/* ── Sticky site header ──────────────────────────────────────────────────── */
.site-header {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 32px;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	-webkit-backdrop-filter: blur(12px);   /* Safari, incl. iOS */
	backdrop-filter: blur(12px);
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 2px 24px var(--glow);
	transition: background var(--transition), border-color var(--transition);
}

.logo-area {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	color: inherit;
	flex-shrink: 0;
	margin-right: auto;   /* pushes the nav and theme toggle to the right */
}

.logo-icon {
	width: 44px;
	height: 44px;
	background: linear-gradient(135deg, var(--accent), var(--accent2));
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	box-shadow: 0 0 18px var(--glow);
	flex-shrink: 0;
}

.logo-text {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

/* Accent gradient painted through the glyphs — the logo and the home page's
   hero both want it, so the four fiddly prefixed lines live here only. */
.gradient-text {
	background: linear-gradient(90deg, var(--accent), var(--accent2));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.logo-title {
	font-family: var(--font-head);
	font-size: 1.25rem;
	font-weight: 900;
	letter-spacing: 1px;
}

.logo-sub {
	font-family: var(--font-mono);
	font-size: 0.65rem;
	color: var(--text3);
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-top: 4px;
}

.header-right {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.site-nav {
	display: flex;
	align-items: center;
	gap: 4px;
}

.nav-link {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--text2);
	text-decoration: none;
	letter-spacing: 0.5px;
	padding: 6px 12px;
	border-radius: 6px;
	white-space: nowrap;
	transition: color 0.2s, background 0.2s, box-shadow 0.2s;
}

.nav-link:hover {
	color: var(--accent);
	background: var(--glow);
}

/* The page you're on. The inset ring is what separates it from :hover — an
   inset shadow rather than a border so nothing shifts by a pixel. */
.nav-link.is-active {
	color: var(--accent);
	font-weight: 700;
	background: var(--glow);
	box-shadow: inset 0 0 0 1px var(--border-hi);
}

/* Current page that isn't in the nav — a label, not a link. */
.nav-link.is-static {
	cursor: default;
}

/* ── Theme toggle ────────────────────────────────────────────────────────── */
.theme-btn {
	display: flex;
	align-items: center;
	gap: 7px;
	background: var(--surface2);
	border: 1px solid var(--border);
	border-radius: 20px;
	padding: 6px 14px;
	cursor: pointer;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	color: var(--text2);
	transition: border-color 0.2s, color 0.2s, background 0.2s;
	white-space: nowrap;
}

.theme-btn:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.theme-btn .icon {
	font-size: 0.9rem;
	line-height: 1;
}

/* ── Section headings ────────────────────────────────────────────────────── */
/* Big heading above a block of content. `.warn` / `.danger` recolour it. */
.section-heading {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.section-heading::before {
	content: '▲';
	font-size: 0.55rem;
	opacity: 0.7;
}

.section-heading.warn { color: var(--warn); }

/* Small label with a trailing rule. */
.section-label {
	font-family: var(--font-head);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--accent-dim);
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.section-label::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--border);
}

/* Muted annotation that sits inside a heading, e.g. "As of 3:15 PM". */
.heading-note {
	font-family: var(--font-mono);
	font-size: 0.62rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	color: var(--text2);
	text-transform: none;
}

.section-divider {
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--border), transparent);
	margin: 4px 32px 20px;
}

/* A row inset into a card or panel — the mesh node list, the weather summary
   on the home page, the admin node roster. These were three near-identical
   copies in three stylesheets. */
.inset-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	border-radius: 10px;
	background: var(--bg2);
	border: 1px solid var(--border2);
	transition: border-color 0.2s;
}

.inset-row:hover { border-color: var(--border); }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: 0 4px 32px var(--glow2);
	transition: background var(--transition), border-color var(--transition), box-shadow 0.2s;
}

.card:hover {
	box-shadow: 0 4px 40px var(--glow);
}

.card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px 14px;
	border-bottom: 1px solid var(--border2);
	background: var(--surface2);
}

.card-title {
	font-family: var(--font-head);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--accent);
}

.card-badge {
	font-family: var(--font-mono);
	font-size: 0.65rem;
	padding: 3px 10px;
	border-radius: 12px;
	background: var(--glow);
	border: 1px solid var(--border);
	color: var(--text3);
	letter-spacing: 1px;
	white-space: nowrap;
}

.card-body {
	padding: 20px;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn-primary,
.btn-secondary {
	font-family: var(--font-body);
	font-size: 0.88rem;
	padding: 12px 28px;
	border-radius: var(--radius-sm);
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	letter-spacing: 0.5px;
}

.btn-primary {
	background: linear-gradient(135deg, var(--accent), var(--accent-dim));
	color: #000;
	font-weight: 700;
	border: none;
	box-shadow: 0 0 24px var(--glow);
	transition: transform 0.18s, box-shadow 0.18s;
}

.btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 0 36px var(--border-hi);
}

.btn-secondary {
	background: var(--surface);
	color: var(--text);
	font-weight: 600;
	border: 1px solid var(--border);
	transition: border-color 0.18s, color 0.18s, transform 0.18s;
}

.btn-secondary:hover {
	border-color: var(--accent);
	color: var(--accent);
	transform: translateY(-2px);
}

/* Compact outlined action button, used in data tables. */
.btn-ctl {
	cursor: pointer;
	background: transparent;
	border: 1px solid;
	border-radius: 6px;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.65rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 5px 12px;
	transition: background 0.15s, color 0.15s;
	white-space: nowrap;
}

.btn-mini {
	cursor: pointer;
	background: transparent;
	border: 1px solid var(--border);
	border-radius: 6px;
	font-family: var(--font-mono);
	font-size: 0.65rem;
	letter-spacing: 0.05em;
	color: var(--text2);
	padding: 2px 8px;
	margin-left: 6px;
	transition: border-color 0.15s, color 0.15s, background 0.15s;
	white-space: nowrap;
}

.btn-mini:hover {
	border-color: var(--accent);
	color: var(--accent);
}

/* ── Status pills ────────────────────────────────────────────────────────── */
.pill {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 3px 12px;
	border-radius: 14px;
	border: 1px solid;
	white-space: nowrap;
}

/* Border and fill keep the vivid colour; only the label uses the text-safe one. */
.pill.good { color: var(--online-text); border-color: var(--online); background: var(--tint-good); }
.pill.fair { color: var(--warn-text);   border-color: var(--warn);   background: var(--tint-fair); }
.pill.poor { color: var(--danger-text); border-color: var(--danger); background: var(--tint-poor); }
.pill.dim  { color: var(--text3);  border-color: var(--text3);  background: var(--surface2); }

/* ── Status dots (online / unavailable / offline) ────────────────────────── */
.status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.status-dot.online      { background: var(--online);      box-shadow: 0 0 8px var(--online); animation: pulse 2s infinite; }
.status-dot.unavailable { background: var(--unavailable); box-shadow: 0 0 8px var(--unavailable); }
.status-dot.offline     { background: var(--offline);     box-shadow: 0 0 8px var(--offline); }

.status-text.online      { color: var(--online-text); }
.status-text.unavailable { color: var(--unavailable-text); }
.status-text.offline     { color: var(--danger-text); }

.status-pill {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.5px;
}

/* ── Data tables ─────────────────────────────────────────────────────────── */
.data-table-wrap {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 28px;
	box-shadow: 0 4px 32px var(--glow2);
}

.data-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.83rem;
}

.data-table thead th {
	background: var(--surface2);
	color: var(--text2);
	font-family: var(--font-head);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	padding: 12px 14px;
	border-bottom: 1px solid var(--border);
	text-align: left;
	white-space: nowrap;
}

.data-table tbody td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--border2);
	color: var(--text);
	vertical-align: top;
	line-height: 1.45;
}

.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td      { background: var(--row-hover); }

.data-table tfoot td {
	padding: 8px 14px;
	font-family: var(--font-mono);
	font-size: 0.62rem;
	color: var(--text3);
	text-align: center;
	border-top: 1px solid var(--border);
}

/* ── Table cell helpers ──────────────────────────────────────────────────── */
.node-tag {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	background: var(--surface2);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 1px 6px;
	color: var(--accent);
	white-space: nowrap;
}

.ts {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	color: var(--text2);
	white-space: nowrap;
}

.ts sup       { font-size: 0.58rem; }
.ts-current   { color: var(--online-text); }

.muted { color: var(--text3); }

.empty {
	color: var(--text3);
	font-style: italic;
	text-align: center;
	padding: 20px !important;
}

.delete-link {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	color: var(--danger);
	text-decoration: none;
	opacity: 0.6;
	transition: opacity 0.15s;
}

.delete-link:hover { opacity: 1; }

/* ── Notices ─────────────────────────────────────────────────────────────── */
/* Amber callout for stale data, missing tables, etc. */
.banner {
	background: var(--surface);
	border: 1px solid var(--warn);
	border-radius: var(--radius-sm);
	padding: 14px 18px;
	margin-bottom: 24px;
	color: var(--warn);
	font-size: 0.9rem;
}

/* Red callout — the "report weather in Skywarn-F" reminder. */
.notice-alert {
	padding: 10px 12px;
	border-radius: var(--radius-sm);
	font-family: var(--font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.8px;
	text-align: center;
	background: rgba(255, 80, 80, 0.08);
	border: 1px solid rgba(255, 80, 80, 0.25);
	color: #ff6b6b;
	transition: background var(--transition), border-color var(--transition), color var(--transition);
}

[data-theme="light"] .notice-alert {
	background: rgba(200, 60, 60, 0.08);
	border-color: rgba(200, 60, 60, 0.25);
	color: #b54747;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
	position: relative;
	z-index: 1;
	text-align: center;
	padding: 28px 32px 36px;
	border-top: 1px solid var(--border2);
	font-family: var(--font-mono);
	font-size: 0.7rem;
	color: var(--text3);
	letter-spacing: 1px;
	line-height: 1.9;
	transition: border-color var(--transition);
}

.site-footer a {
	color: var(--accent);
	text-decoration: none;
}

.site-footer a:hover { text-decoration: underline; }

.footer-note   { margin-bottom: 6px; letter-spacing: 0.5px; }
.footer-credit { margin-top: 6px; opacity: 0.5; }

/* Quiet by design — the site's only admin affordance, in or out. */
.site-footer .footer-admin { color: var(--text3); }
.site-footer .footer-admin:hover { color: var(--accent); }

/* Signed in. The dot is the only "you are logged in" indicator on the page. */
.site-footer .footer-admin.is-in { color: var(--text2); }
.site-footer .footer-admin.is-in:hover { color: var(--danger); }

.site-footer .footer-admin.is-in::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 6px;
	border-radius: 50%;
	background: var(--accent2);
	box-shadow: 0 0 8px var(--accent2);
	vertical-align: 1px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.site-header { padding: 12px 16px; }
	.page-body   { padding: 20px 14px 40px; }
	.nav-link    { padding: 6px 9px; font-size: 0.78rem; }
}

/* Phones. The nav takes a row of its own beneath the logo rather than being
   hidden — there is no other way to move between pages on a touch device.
   It scrolls sideways if the labels ever outgrow the screen. */
@media (max-width: 720px) {
	.site-header {
		flex-wrap: wrap;
		row-gap: 10px;
		padding: 10px 14px;
	}

	.site-nav {
		order: 3;             /* after the theme toggle, so it lands on row two */
		flex: 1 0 100%;
		justify-content: flex-start;
		gap: 2px;

		/* Bleed to the screen edges so the scroll doesn't look clipped. */
		margin: 0 -14px -10px;
		padding: 6px 14px;
		border-top: 1px solid var(--border2);

		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.site-nav::-webkit-scrollbar { display: none; }

	/* 44px is the minimum comfortable tap target on iOS. */
	.nav-link {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 0 12px;
		font-size: 0.82rem;
		flex-shrink: 0;
	}

	.header-right { gap: 8px; }

	/* Claw back height: the header is sticky and now two rows tall. */
	.logo-icon  { width: 38px; height: 38px; font-size: 19px; border-radius: 9px; }
	.logo-title { font-size: 1.05rem; }
	.logo-sub   { font-size: 0.6rem; letter-spacing: 1.5px; }
	.theme-btn  { padding: 6px 11px; }
}

/* Narrow phones: the theme toggle keeps its icon but drops the word. */
@media (max-width: 400px) {
	.theme-btn #theme-label { display: none; }
	.theme-btn { padding: 8px 10px; }
}