/* Top-level rules */
:root {
	--bg: #eef1f5;
	--card: #ffffff;
	--ink: #1c2430;
	--muted: #5c6675;
	--line: #d7dde5;
	--link: #1a5fb4;
	--radius: 10px;
	--shadow: 0 1px 3px rgba(16, 24, 40, .08);

	/* Colorblind-safe accents (Okabe-Ito hues), AA-checked text colors */
	--danger-deep: #67001f;   /* extreme        + white text */
	--danger: #b34700;        /* severe/active  + white text */
	--warn: #e69f00;          /* moderate       + ink text   */
	--caution: #f0e442;       /* possible       + ink text   */
	--ok: #009e73;            /* minor/past     + ink text   */
	--neutral: #8a9099;       /* unknown/system + ink text   */
	--badge-ink: #1c2430;     /* fixed dark; badges stay saturated */
	--strip: #f4f6f9;
	--future-bg: #fff8e1;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0 auto;
	padding: 1.25rem 1rem 3rem;
	max-width: 60rem;
	background: var(--bg);
	color: var(--ink);
	font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
}

a {
	color: var(--link);
}

h1, h2, h3, p {
	margin: 0.1em 0;
}

h1 {
	margin-bottom: 0.35rem;
	font-size: 1.75rem;
	letter-spacing: -0.01em;
}

/* Lookup form ------------------------------------------------------------ */

#lookup_box {
	float: left;
	margin-bottom: 1rem;
	padding: 1rem 1.25rem;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

#fips_form p {
	margin-bottom: 0.6rem;
	color: var(--muted);
}

#fips_form input[type="text"] {
	width: 9rem;
	padding: 0.4rem 0.6rem;
	font: inherit;
	color: var(--ink);
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 6px;
}

#fips_form input[type="text"]:focus {
	outline: 2px solid var(--link);
	outline-offset: 1px;
	border-color: var(--link);
}

#fips_form input[type="submit"] {
	padding: 0.4rem 0.9rem;
	font: inherit;
	border: 0;
	border-radius: 6px;
	background: #1a5fb4;
	color: #fff;
	cursor: pointer;
}

#fips_form input[type="submit"]:hover {
	filter: brightness(1.1);
}

/* Nearby locations ------------------------------------------------------- */

#nearby {
	display: none;
	float: right;
	margin: 0 0 1rem 1rem;
	padding: 0.75rem 1rem;
	font-size: 85%;
	text-align: left;
	list-style: none;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

#nearby ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Alerts ----------------------------------------------------------------- */

#alerts {
	clear: both;
}

.alerts {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}

/* Outer cell wraps one alert card. engine.js builds rows directly under
   <table.alerts> (no <tbody>); parsed HTML gets an implicit <tbody>. Match both. */
.alerts > tr > td,
.alerts > tbody > tr > td {
	width: 100%;
	padding: 0 0 1rem;
	border: 0;
}

.alerts > tr:last-child > td,
.alerts > tbody > tr:last-child > td {
	padding-bottom: 0;
}

/* Inner table is the card; its class carries the severity */
.alerts > tr > td > table,
.alerts > tbody > tr > td > table {
	width: 100%;
	overflow: hidden;
	background: var(--card);
	border: 1px solid var(--line);
	border-left: 6px solid var(--sev, #455a64);
	border-radius: var(--radius);
	border-collapse: collapse;
	box-shadow: var(--shadow);
}

.alerts table tr > th,
.alerts table tr > td {
	padding: 0.45rem 0.8rem;
	text-align: left;
	vertical-align: top;
	border-top: 1px solid var(--line);
}

.alerts table tr:first-child > th,
.alerts table tr:first-child > td {
	border-top: 0;
}

/* Field labels */
.alerts th {
	width: 8.5rem;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}

/* Severity accent, applied to the card table */
.alerts table.extreme  { --sev: var(--danger-deep); --sev-ink: #fff; }
.alerts table.severe   { --sev: var(--danger);      --sev-ink: #fff; }
.alerts table.moderate { --sev: var(--warn);        --sev-ink: var(--badge-ink); }
.alerts table.minor    { --sev: var(--ok);          --sev-ink: var(--badge-ink); }
.alerts table.unknown  { --sev: var(--neutral);     --sev-ink: var(--badge-ink); }
.alerts table.expired  { --sev: #9e9e9e;            --sev-ink: var(--badge-ink); }

/* Title bar: the first row of each card, click to collapse */
.alerts table tr.card-header > th {
	display: none;
}

.alerts table tr.card-header > td {
	font-size: 1.05rem;
	font-weight: 700;
	cursor: pointer;
	background: var(--sev, #455a64);
	color: var(--sev-ink, #fff);
}

.alerts table tr.card-header > td::before {
	content: "\25BE";
	display: inline-block;
	width: 1.2em;
}

.alerts tr.collapsed table tr.card-header > td::before {
	content: "\25B8";
}

/* When collapsed, hide every row but the title bar, keeping the affected
   areas visible so the collapsed card still says where the alert applies. */
.alerts tr.collapsed td > table tr:not(.card-header):not(.ad) {
	display: none;
}

/* Event Code row */
.sa th, .sa td {
	background: var(--strip);
}

/* Preserve whitespace in description and instructions */
.de td, .in td {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
		"Liberation Mono", monospace;
	font-size: 0.85rem;
	line-height: 1.5;
	white-space: pre-wrap;
}

/* Allow word-wrapping of long message ID string */
.id td {
	word-wrap: break-word;
}

/* Value badges ----------------------------------------------------------- */

td.extreme {
	background: var(--danger-deep);
	color: #fff;
}

td.severe,
td.observed,
td.actual,
td.immediate {
	background: var(--danger);
	color: #fff;
}

td.moderate,
td.likely,
td.expected {
	background: var(--warn);
	color: var(--badge-ink);
}

td.minor,
td.exercise,
td.past,
td.unlikely {
	background: var(--ok);
	color: var(--badge-ink);
}

td.possible {
	background: var(--caution);
	color: var(--badge-ink);
}

td.unknown,
td.system,
td.test,
td.draft {
	background: var(--neutral);
	color: var(--badge-ink);
}

/* Expired / future alerts ------------------------------------------------ */

.alerts table.expired td {
	color: var(--muted);
	background: var(--card);
}

.alerts table.expired tr.card-header > td {
	color: var(--muted);
	background: var(--strip);
}

.alerts table.expired a {
	color: inherit;
}

.alerts table tr.future > td {
	background: var(--future-bg);
}

/* Maps ------------------------------------------------------------------- */

div.polymap {
	min-height: 1.5rem;
}

/* Misc ------------------------------------------------------------------- */

.updated_time {
	font-size: 0.8rem;
	color: var(--muted);
}

.contiguous {
	white-space: nowrap;
}

.tagline {
	margin-top: 0.4rem;
	font-size: 0.75rem;
	color: var(--muted);
}

option {
	background-color: white;
	color: black;
}

.inactive {
	background-color: white;
	color: darkgrey;
}

#debug {
	white-space: pre-wrap;
}

/* Theme toggle ----------------------------------------------------------- */

#theme_toggle {
	position: fixed;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 1000;
	width: 2.4rem;
	height: 2.4rem;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	color: var(--ink);
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 50%;
	box-shadow: var(--shadow);
}

/* Dark palette: follows the system unless the user has toggled a theme */

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #12161c;
		--card: #1b2129;
		--ink: #e6e9ee;
		--muted: #9aa4b2;
		--line: #2c3541;
		--link: #7cb3ff;
		--shadow: 0 1px 3px rgba(0, 0, 0, .45);
		--strip: #232b35;
		--future-bg: #3a3320;
	}
}

:root[data-theme="dark"] {
	--bg: #12161c;
	--card: #1b2129;
	--ink: #e6e9ee;
	--muted: #9aa4b2;
	--line: #2c3541;
	--link: #7cb3ff;
	--shadow: 0 1px 3px rgba(0, 0, 0, .45);
	--strip: #232b35;
	--future-bg: #3a3320;
}