styles.css

/* AU Mobile Coverage Checker — mobile-first, high-contrast, WCAG 2.2 AA. */

:root {
  --navy: #0b3d64;
  --navy-dark: #082d4a;
  --ink: #1a1a1a;
  --muted: #5a5f66;
  --line: #d5dae0;
  --bg: #f4f6f8;
  --card: #ffffff;
  --yes: #1b5e20;
  --yes-bg: #e7f4e8;
  --no: #8a1c1c;
  --no-bg: #fbeaea;
  --warn: #7a4f00;
  --warn-bg: #fbf3e0;
  --focus: #0a58ca;
  --radius: 10px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
}

.wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 16px; }

/* Focus + skip links */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.skip-link {
  position: absolute; left: -999px; top: 0;
  background: #fff; color: var(--navy); padding: 10px 14px;
  border: 2px solid var(--navy); border-radius: 6px; z-index: 1000; font-weight: 600;
}
.skip-link:focus { left: 8px; top: 8px; }
.skip-link.inline { position: static; display: inline-block; margin: 0 0 8px; left: auto; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Header */
.site-header { background: var(--navy); color: #fff; padding: 24px 0 20px; }
.site-header h1 { margin: 0 0 6px; font-size: 1.55rem; line-height: 1.2; }
.tagline { margin: 0 0 12px; font-size: 1.05rem; }
.site-header strong { color: #fff; }
.disclaimer {
  margin: 0; font-size: 0.9rem; background: rgba(255, 255, 255, 0.12);
  border-left: 4px solid #ffd24d; padding: 10px 12px; border-radius: 0 6px 6px 0;
}
.disclaimer strong { color: #ffe9a8; }
.disclaimer a { color: #ffe9a8; text-decoration: underline; }

/* Panels */
main { padding: 20px 0 8px; }
.panel {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; margin: 0 0 16px;
}
.panel > h2 { margin: 0 0 12px; font-size: 1.2rem; }
.hint { margin: -6px 0 12px; font-size: 0.88rem; color: var(--muted); }
/* Map + coverage-layer filter bar (network toggles + data-version selector) */
.map-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 0 0 12px; }
.version-toggle { border: 0; margin: 0; padding: 0; display: inline-flex; align-items: center; gap: 8px; }
.version-toggle .version-label { font-weight: 600; color: var(--muted); font-size: 0.9rem; }
.version-toggle label { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; cursor: pointer; }
.version-toggle input { width: 16px; height: 16px; accent-color: var(--navy); }
.fn-ref { color: var(--navy); text-decoration: none; }
.data-footnote { font-size: 0.82rem; color: var(--muted); margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--line); }
.data-footnote a { color: var(--navy); }
#version-note { margin: 10px 0 0; }

/* Map layer toggles (networks & technologies as buttons) */
.layer-toggles { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.net-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; font-size: 1rem; font-weight: 600;
  color: var(--navy); background: #fff;
  border: 1.5px solid var(--line); border-radius: 999px; cursor: pointer;
}
.net-toggle:hover { background: rgba(11, 61, 100, 0.06); }
.net-toggle .sw { width: 14px; height: 14px; border: 1px solid #888; border-radius: 3px; }
.net-toggle[aria-pressed="true"] {
  border-color: var(--navy); background: rgba(11, 61, 100, 0.1); box-shadow: inset 0 0 0 1px var(--navy);
}
.net-toggle[aria-pressed="true"]::after { content: "✓"; font-weight: 700; }

.layer-advanced { margin-top: 14px; }
.layer-advanced > summary { cursor: pointer; color: var(--navy); font-weight: 600; }

.tech-grid { display: grid; gap: 8px; margin: 8px 0 10px; }
.tech-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tech-net { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; min-width: 150px; }
.tech-net .sw { width: 13px; height: 13px; border: 1px solid #888; border-radius: 3px; }
.tech-toggle {
  padding: 4px 14px; font-size: 0.9rem; font-weight: 600;
  color: var(--navy); background: #fff;
  border: 1.5px solid var(--line); border-radius: 999px; cursor: pointer;
}
.tech-toggle:hover:not(:disabled) { background: rgba(11, 61, 100, 0.06); }
.tech-toggle[aria-pressed="true"] { border-color: var(--navy); background: rgba(11, 61, 100, 0.12); box-shadow: inset 0 0 0 1px var(--navy); }
.tech-toggle:disabled { opacity: 0.4; cursor: not-allowed; }

.brands-details { margin-top: 12px; }
.brands-details > summary { cursor: pointer; color: var(--navy); font-weight: 600; font-size: 0.95rem; }
.net-brands { display: grid; gap: 12px; margin-top: 10px; }
.net-brand h3 { margin: 0 0 4px; font-size: 1rem; }
.net-brand ul { margin: 6px 0 0; padding-left: 20px; columns: 2; font-size: 0.9rem; }
.net-brand li { break-inside: avoid; }
.warn {
  background: var(--warn-bg); color: var(--warn); border-left: 4px solid #d99a00;
  padding: 8px 10px; border-radius: 0 6px 6px 0; font-size: 0.88rem; margin: 8px 0;
}

/* Form */
.field { margin: 0 0 14px; }
.field label { display: block; font-weight: 600; margin-bottom: 4px; }
.req { color: var(--no); font-weight: 600; }
.opt, .field .opt { color: var(--muted); font-weight: 400; font-size: 0.88rem; }
input[type="text"] {
  width: 100%; padding: 11px 12px; font-size: 1rem; border: 1px solid #9aa2ab;
  border-radius: 8px; background: #fff; color: var(--ink);
}
input[type="text"]::placeholder { color: #808790; }
button.primary {
  background: var(--navy); color: #fff; border: 0; padding: 12px 18px;
  font-size: 1rem; font-weight: 600; border-radius: 8px; cursor: pointer;
}
button.primary:hover { background: var(--navy-dark); }
button.primary:disabled { background: #6b7783; cursor: progress; }
button.ghost {
  background: transparent; color: var(--navy); border: 1px solid var(--navy);
  padding: 9px 16px; font-size: 0.95rem; font-weight: 600; border-radius: 8px; cursor: pointer; margin-top: 4px;
}
button.ghost:hover { background: rgba(11, 61, 100, 0.08); }

/* Status + results */
.status { min-height: 1.2em; font-weight: 600; color: var(--navy); margin: 0 0 10px; }
.status:empty { display: none; }
.estimate-note {
  font-size: 0.85rem; color: var(--muted); background: #eef2f6;
  padding: 8px 10px; border-radius: 6px; margin: 0 0 12px;
}
.card {
  border: 1px solid var(--line); border-left-width: 5px; border-radius: 8px;
  padding: 12px 14px; margin: 0 0 12px; background: #fff;
}
.card h3 { margin: 0 0 8px; font-size: 1.05rem; }
.card.v-yes { border-left-color: var(--yes); }
.card.v-no { border-left-color: var(--no); }
.card.v-unknown { border-left-color: #b58900; }
.card.v-between { border-left-color: var(--navy); }
.verdict { font-weight: 700; margin: 0 0 8px; font-size: 1.05rem; }
.v-yes .verdict .sym, .v-yes .verdict { color: var(--yes); }
.v-no .verdict .sym, .v-no .verdict { color: var(--no); }
.v-unknown .verdict { color: var(--warn); }
.card .sym { font-size: 1.15rem; }
.addr { font-style: normal; }
.muted { color: var(--muted); font-size: 0.9rem; }
.coord { font-size: 0.9rem; margin: 6px 0; }
button.copy {
  background: #eef2f6; border: 1px solid var(--line); border-radius: 6px;
  padding: 3px 10px; font-size: 0.85rem; cursor: pointer; margin-left: 4px;
}
button.copy:hover { background: #e2e8ee; }
.links { margin: 8px 0 2px; }
.links a { color: var(--navy); font-weight: 600; }
a.official { display: inline-block; }
.note { font-size: 0.83rem; color: var(--muted); margin: 4px 0 0; }
.error {
  background: var(--no-bg); color: var(--no); border-left: 5px solid var(--no);
  padding: 10px 12px; border-radius: 0 6px 6px 0; font-weight: 600;
}

/* Comparison table */
.table-wrap { overflow-x: auto; margin: 0 0 12px; }
table.compare { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
table.compare caption { text-align: left; font-size: 0.82rem; color: var(--muted); padding: 0 0 8px; }
table.compare th, table.compare td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }
table.compare thead th { background: #eef2f6; font-size: 0.92rem; white-space: nowrap; }
table.compare th[scope="row"] { font-weight: 600; white-space: nowrap; }
table.compare .net-col .sw { width: 13px; height: 13px; display: inline-block; border: 1px solid #888; border-radius: 3px; vertical-align: middle; }
td.cmp { font-weight: 600; }
td.cmp.c-yes { color: var(--yes); background: var(--yes-bg); }
td.cmp.c-no { color: var(--no); background: var(--no-bg); }
td.cmp.c-unknown { color: var(--warn); background: var(--warn-bg); }
td.cmp.c-count { color: var(--ink); font-variant-numeric: tabular-nums; }
table.compare [data-net].sel { outline: 3px solid var(--navy); outline-offset: -3px; }
table.compare thead th[data-net].sel { background: #dbe6f0; }
.focus-h { margin: 4px 0 10px; font-size: 1rem; color: var(--muted); }
.note.mvno { font-size: 0.86rem; background: #eef2f6; padding: 8px 10px; border-radius: 6px; margin: 0 0 14px; }

/* Map */
#map { height: 420px; border: 1px solid var(--line); border-radius: 8px; background: #e9eef2; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 0.88rem; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend .sw { width: 16px; height: 16px; border: 1px solid #888; border-radius: 3px; display: inline-block; }

/* Advanced */
.adv-group { border: 1px solid var(--line); border-radius: 8px; margin: 12px 0 0; padding: 10px 12px; }
.adv-group legend { font-weight: 600; padding: 0 6px; }
.adv-group label { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; }
.adv-group input { width: 18px; height: 18px; accent-color: var(--navy); }

.pattern-toggle { display: inline-flex; align-items: center; gap: 8px; margin: 8px 0; font-weight: 600; cursor: pointer; }
.pattern-toggle input { width: 18px; height: 18px; accent-color: var(--navy); }

/* Footer */
.site-footer { background: #eceff2; border-top: 1px solid var(--line); padding: 20px 0 40px; margin-top: 8px; }
.site-footer p { font-size: 0.85rem; margin: 0 0 10px; }
.site-footer a { color: var(--navy); }
.footer-checkers { margin: 0 0 16px; }
.footer-checkers h2 { font-size: 1.05rem; margin: 0 0 6px; color: var(--navy); }
.checker-links { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.checker-links a { font-weight: 600; }

/* Larger screens */
@media (min-width: 620px) {
  .site-header h1 { font-size: 1.9rem; }
  #map { height: 480px; }
}

/* Respect reduced motion + forced colours */
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }
@media (forced-colors: active) {
  .net-toggle[aria-pressed="true"], .tech-toggle[aria-pressed="true"] { outline: 2px solid; }
  .card { border-left-width: 5px; }
}