/* ==========================================================================
   jeremy.ie — data dashboard
   Dark "control-room" theme. Modular 12-column tile grid.
   Shares the homepage language: Fraunces / Inter / Chivo Mono, racing green.
   ========================================================================== */

:root {
	--bg: #06140e;
	--bg-2: #081b13;
	--tile: #0b2419;
	--tile-2: #0e2c1f;
	--edge: rgba(210, 232, 220, 0.09);
	--edge-strong: rgba(210, 232, 220, 0.18);

	--text: #dbe4dd;
	--text-strong: #f2f6f1;
	--text-soft: rgba(219, 228, 221, 0.66);
	--text-faint: rgba(219, 228, 221, 0.42);

	--accent: #cdb06a;        /* muted gold */
	--accent-soft: #e4cf96;
	--leaf: #6fd0a0;          /* cool green, for data */
	--cyan: #6cc6d6;

	--font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
	--font-mono: "Chivo Mono", "Courier New", monospace;

	--maxw: 1320px;
	--radius: 16px;
	--shadow: 0 22px 48px -28px rgba(0, 0, 0, 0.85);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
	margin: 0;
	background:
		radial-gradient(90% 60% at 82% -5%, rgba(79, 157, 120, 0.12), transparent 60%),
		radial-gradient(70% 55% at 0% 0%, rgba(205, 176, 106, 0.07), transparent 55%),
		var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: -0.006em;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 max(4vw, 1.25rem); }

.kicker {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent);
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0 0 1.1rem;
}
.kicker::before { content: ""; width: 1.8rem; height: 1px; background: currentColor; }

/* ---------- Header ---------- */

.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem max(4vw, 1.25rem);
	transition: background 300ms ease, border-color 300ms ease, padding 300ms ease;
	border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
	background: rgba(6, 20, 14, 0.88);
	backdrop-filter: blur(10px);
	border-bottom-color: var(--edge);
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}
.brand { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; letter-spacing: -0.03em; color: var(--text-strong); }
.brand span { color: var(--accent); }
.nav-links { display: flex; align-items: center; gap: 1.6rem; }
.nav-links a { font-size: 0.9rem; font-weight: 500; color: var(--text-soft); transition: color 180ms ease; }
.nav-links a:hover { color: var(--text-strong); }
.nav-links a.nav-cta { border: 1px solid var(--edge-strong); border-radius: 999px; padding: 0.42rem 0.95rem; color: var(--text); }
.nav-links a.nav-cta:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }

.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 2.6rem; height: 2.6rem; background: transparent; border: 1px solid var(--edge-strong); border-radius: 10px; cursor: pointer; padding: 0; }
.nav-toggle span { display: block; width: 1.15rem; height: 2px; margin: 0 auto; background: var(--text); transition: transform 220ms ease, opacity 220ms ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Page intro ---------- */

.page-intro { padding: clamp(7.5rem, 16vh, 10rem) 0 2.5rem; }
.page-intro h1 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; line-height: 1; font-size: clamp(2.6rem, 6vw, 4.6rem); color: var(--text-strong); margin: 0; }
.page-intro .lead { max-width: 68ch; color: var(--text-soft); font-size: clamp(1rem, 1.5vw, 1.12rem); margin: 1.4rem 0 0; }
.status-row { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.6rem; }
.status-chip { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); border: 1px solid var(--edge); border-radius: 999px; padding: 0.4rem 0.8rem; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 0 rgba(111, 208, 160, 0.6); animation: pulse 2.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(111,208,160,0.5); } 70% { box-shadow: 0 0 0 6px rgba(111,208,160,0); } 100% { box-shadow: 0 0 0 0 rgba(111,208,160,0); } }

/* ---------- Section band ---------- */

.grid-section { padding: 1.25rem 0; }
.section-label { margin: 2.25rem 0 1.1rem; }
.section-label:first-child { margin-top: 0.5rem; }
.section-label h2 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; font-size: clamp(1.4rem, 2.6vw, 2rem); color: var(--text-strong); margin: 0; }

/* ---------- Tile grid ---------- */

.tile-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.15rem; align-items: stretch; }

.tile {
	grid-column: span 12;
	display: flex;
	flex-direction: column;
	background: var(--tile);
	border: 1px solid var(--edge);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
	transition: border-color 240ms ease, transform 240ms ease;
}
.tile:hover { border-color: var(--edge-strong); }

.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }

.tile-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.15rem 1.35rem 0.9rem;
	border-bottom: 1px solid var(--edge);
}
.tile-head .t-label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.tile-head h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; letter-spacing: -0.01em; color: var(--text-strong); margin: 0.35rem 0 0; }
.tile-head .t-meta { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.06em; color: var(--text-faint); white-space: nowrap; }
.tile-head-stack { display: flex; flex-direction: column; }

.tile-body { padding: 1.25rem 1.35rem 1.35rem; flex: 1; }
.tile-body.flush { padding: 0; }

/* ---------- Map tile ---------- */

#trainmap { height: 560px; width: 100%; }
.map-tile .tile-body { position: relative; }

/* route / station list */
.route-panel { max-height: 560px; overflow-y: auto; padding: 1.25rem 1.35rem; font-size: 0.9rem; color: var(--text); }
.route-panel h4 { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 0 0 1rem; }
#station-list ul { list-style: none; padding-left: 0; margin: 0; }
#station-list li { padding: 0.55rem 0; border-bottom: 1px solid var(--edge); }
#station-list li strong { color: var(--text-strong); font-weight: 600; }
#station-list li small { color: var(--text-soft); font-family: var(--font-mono); font-size: 0.72rem; }
.route-empty { color: var(--text-faint); }

/* Leaflet dark overrides */
.leaflet-container { background: #05100b !important; font-family: var(--font-body); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--tile-2); color: var(--text); box-shadow: var(--shadow); }
.leaflet-popup-content-wrapper { border: 1px solid var(--edge-strong); border-radius: 12px; }
.leaflet-popup-content strong { color: var(--text-strong); }
.leaflet-container a.leaflet-popup-close-button { color: var(--text-soft); }
.leaflet-bar a, .leaflet-control-layers { background: var(--tile-2); color: var(--text); border-color: var(--edge-strong); }
.leaflet-bar a { color: var(--text); }
.leaflet-bar a:hover { background: var(--tile); }
.leaflet-control-attribution { background: rgba(6,20,14,0.7) !important; color: var(--text-faint) !important; }
.leaflet-control-attribution a { color: var(--text-soft) !important; }
.info_legend { background: rgba(11, 36, 25, 0.92); color: var(--text); padding: 0.7rem 0.85rem; border: 1px solid var(--edge-strong); border-radius: 10px; font-size: 0.78rem; box-shadow: var(--shadow); }
.info_legend h4 { margin: 0 0 0.5rem; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }

/* ---------- arXiv cards ---------- */

.arxiv-card .tile-body { display: flex; flex-direction: column; gap: 0.75rem; }
.arxiv-title { font-family: var(--font-display); font-weight: 500; font-size: 1.02rem; line-height: 1.25; color: var(--text-strong); }
.arxiv-authors { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.03em; color: var(--accent); }
.arxiv-abstract { font-size: 0.85rem; line-height: 1.5; color: var(--text-soft); }
.arxiv-card .btn-mini { margin-top: auto; }

.feed-credit { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.03em; color: var(--text-faint); margin: 1rem 0 0; }
.feed-credit a { color: var(--text-soft); border-bottom: 1px solid var(--edge-strong); }
.feed-credit a:hover { color: var(--accent); }

/* ---------- Solar info ---------- */

.solar-list { display: grid; gap: 0.15rem; }
.solar-row { display: flex; align-items: center; gap: 0.85rem; padding: 0.6rem 0; border-bottom: 1px solid var(--edge); }
.solar-row:last-child { border-bottom: 0; }
.solar-row img { width: 22px; height: 22px; object-fit: contain; filter: brightness(0) saturate(100%) invert(78%) sepia(18%) saturate(480%) hue-rotate(5deg); }
.solar-row .s-label { color: var(--text-soft); font-size: 0.85rem; }
.solar-row .s-value { margin-left: auto; font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-strong); }
.solar-date { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-faint); }

/* ---------- SDO images ---------- */

.sdo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.sdo-grid a { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--edge); line-height: 0; }
.sdo-grid img { width: 100%; height: auto; display: block; }
.sdo-caption { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; color: var(--text-faint); text-align: center; margin-top: 0.7rem; }

/* ---------- Chart ---------- */
#chartContainer { height: 320px; width: 100%; }

/* ---------- Third-party widget shells ---------- */
.widget-shell { padding: 0.4rem; }
.weatherwidget-io { border-radius: 12px; overflow: hidden; }
#contain_moon { color: var(--text); }
#contain_moon > div:first-child { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); font-weight: 500 !important; }

/* ---------- Buttons / link tiles ---------- */
.btn-mini {
	display: inline-flex; align-items: center; gap: 0.4rem;
	font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em;
	color: var(--bg); background: var(--accent); border: 0; border-radius: 999px;
	padding: 0.5rem 0.95rem; cursor: pointer; transition: background 180ms ease;
	align-self: flex-start; text-decoration: none;
}
.btn-mini:hover { background: var(--accent-soft); }

.link-tile { justify-content: space-between; }
.link-tile .tile-body { display: flex; flex-direction: column; gap: 0.4rem; }
.link-tile .lt-name { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; color: var(--text-strong); }
.link-tile .lt-desc { color: var(--text-soft); font-size: 0.88rem; }
.link-tile .lt-go { margin-top: 0.6rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--accent); }
.link-tile:hover { transform: translateY(-3px); }
.link-tile:hover .lt-go { color: var(--text-strong); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--edge); margin-top: 3.5rem; padding: 3rem 0 2.5rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 0.9fr; gap: 2.5rem; align-items: end; }
.site-footer h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 3.5vw, 2.6rem); color: var(--text-strong); margin: 0.8rem 0 0; max-width: 20ch; }
.footer-lead { color: var(--text-soft); margin: 1rem 0 1.5rem; max-width: 46ch; }
.footer-contact dt { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-top: 1rem; }
.footer-contact dd { margin: 0.2rem 0 0; color: var(--text); }
.footer-contact dd a:hover { color: var(--accent); }
.socials { display: flex; gap: 0.5rem; list-style: none; margin: 0.6rem 0 0; padding: 0; }
.socials a { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--edge); color: var(--text-soft); transition: all 180ms ease; }
.socials a:hover { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; margin-top: 2.5rem; padding-top: 1.3rem; border-top: 1px solid var(--edge); }
.footer-bottom p { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); margin: 0; }
.footer-bottom a:hover { color: var(--accent); }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 600ms cubic-bezier(0.22,1,0.36,1), transform 600ms cubic-bezier(0.22,1,0.36,1); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media screen and (max-width: 1080px) {
	.span-4, .span-3, .span-5 { grid-column: span 6; }
	.span-7, .span-8 { grid-column: span 12; }
}
@media screen and (max-width: 850px) {
	.nav-links {
		position: fixed; inset: 0 0 0 auto; width: min(78vw, 320px);
		flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.5rem;
		padding: 2rem; background: rgba(6,20,14,0.97); backdrop-filter: blur(12px);
		border-left: 1px solid var(--edge); transform: translateX(100%);
		transition: transform 320ms cubic-bezier(0.22,1,0.36,1);
	}
	.nav-links.is-open { transform: translateX(0); }
	.nav-links a { font-size: 1.05rem; }
	.nav-toggle { display: flex; }
	.span-3, .span-4, .span-5, .span-6, .span-7, .span-8 { grid-column: span 12; }
	.footer-grid { grid-template-columns: 1fr; }
	.sdo-grid { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.reveal { opacity: 1; transform: none; transition: none; }
	.status-dot { animation: none; }
	.link-tile:hover { transform: none; }
}