/* Maxxwave CoverageMapper - site styles
   Taken from the Maxxwave Encoder site, which is family-matched to DabMan: same typography, Bootstrap base, same nav and footer shapes.
   Differentiated by weight and palette: Maxxwave blue structure, Maxxwave red accent,
   darker sections than DabMan's utility look. */

:root {
    --mw-blue: #0080ff;          /* logo blue */
    --mw-blue-deep: #0a4e9b;
    --mw-blue-dark: #082f5e;
    --mw-red: #e01010;           /* logo red, very slightly deepened for text use */
    --mw-red-dark: #b00b0b;
    --mw-ink: #10151c;
    --mw-ink-soft: #2a3340;
    --mw-body: #3d4753;
    --mw-muted: #6d7785;
    --mw-line: #e2e6ec;
    --mw-tint: #f5f8fc;
    --mw-dark-bg: #0d1b2a;
    --mw-dark-bg-2: #102538;
}

body {
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--mw-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    background: #fff;
}

h1, h2, h3, h4, h5, h6 { font-family: 'IBM Plex Sans', sans-serif; color: var(--mw-ink); font-weight: 600; letter-spacing: -0.015em; }
h1 { font-size: 2.6rem; line-height: 1.18; font-weight: 700; }
h2 { font-size: 1.95rem; line-height: 1.25; margin-bottom: 1.1rem; }
h3 { font-size: 1.35rem; margin-bottom: .7rem; }
h4 { font-size: 1.1rem; margin-bottom: .5rem; }
p  { margin-bottom: 1.1rem; }
a  { color: var(--mw-blue-deep); text-decoration: none; }
a:hover { color: var(--mw-red); text-decoration: underline; }
code, .mono { font-family: 'JetBrains Mono', monospace; font-size: .92em; }

/* ---------- navigation ---------- */
.navbar { border-bottom: 1px solid var(--mw-line); padding: .6rem 0; }
.brand-name { font-weight: 700; font-size: 1.28rem; color: var(--mw-ink); line-height: 1.1; letter-spacing: -.02em; }
.brand-tagline { font-size: .74rem; color: var(--mw-muted); letter-spacing: .06em; text-transform: uppercase; }
.navbar .nav-link { font-weight: 500; color: var(--mw-ink-soft); padding: .5rem .85rem !important; }
.navbar .nav-link:hover { color: var(--mw-blue-deep); }
.navbar .nav-link.active { color: var(--mw-blue-deep); font-weight: 600; box-shadow: inset 0 -2px 0 var(--mw-red); }
.btn-login { background: var(--mw-blue-deep); border-color: var(--mw-blue-deep); font-weight: 500; }
.btn-login:hover { background: var(--mw-blue-dark); border-color: var(--mw-blue-dark); }

/* ---------- buttons ---------- */
.btn { font-weight: 500; border-radius: .35rem; padding: .62rem 1.35rem; }
.btn-primary { background: var(--mw-blue-deep); border-color: var(--mw-blue-deep); }
.btn-primary:hover, .btn-primary:focus { background: var(--mw-blue-dark); border-color: var(--mw-blue-dark); }
.btn-accent { background: var(--mw-red); border-color: var(--mw-red); color: #fff; }
.btn-accent:hover { background: var(--mw-red-dark); border-color: var(--mw-red-dark); color: #fff; }
.btn-outline-light-mw { border: 1px solid rgba(255,255,255,.55); color: #fff; }
.btn-outline-light-mw:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ---------- hero ---------- */
.hero {
    background: linear-gradient(160deg, var(--mw-dark-bg) 0%, var(--mw-dark-bg-2) 55%, #143451 100%);
    color: #fff; padding: 5rem 0 4.5rem;
}
.hero h1 { color: #fff; max-width: 20ch; }
.hero .hero-sub { font-size: 1.25rem; color: #c6d4e3; max-width: 52ch; margin-top: 1.4rem; }
.hero-rule { width: 64px; height: 4px; background: var(--mw-red); border: 0; opacity: 1; margin: 0 0 1.9rem; }
.page-head { background: var(--mw-tint); border-bottom: 1px solid var(--mw-line); padding: 3rem 0 2.6rem; }
.page-head h1 { font-size: 2.2rem; }
.page-head p { color: var(--mw-muted); font-size: 1.15rem; margin: .6rem 0 0; max-width: 62ch; }

/* ---------- sections ---------- */
section { padding: 3.6rem 0; }
section.tint { background: var(--mw-tint); }
section.dark { background: var(--mw-dark-bg); color: #c6d4e3; }
section.dark h2, section.dark h3, section.dark h4 { color: #fff; }
section.dark a { color: #7fc0ff; }
.lead-narrow { max-width: 68ch; }
.section-rule { border: 0; border-top: 1px solid var(--mw-line); margin: 0; }

/* ---------- benefit strip ---------- */
.benefit { border-left: 3px solid var(--mw-red); padding-left: 1.15rem; height: 100%; }
.benefit h3 { font-size: 1.16rem; color: var(--mw-ink); margin-bottom: .45rem; }
.benefit p { color: var(--mw-body); margin: 0; font-size: 1rem; }

/* ---------- cards / panels ---------- */
.panel { background: #fff; border: 1px solid var(--mw-line); border-radius: .5rem; padding: 1.6rem; }
.panel-fill { height: 100%; }   /* only for equal-height card grids, never for stacked panels */
.panel h3 { font-size: 1.12rem; }
.panel { overflow-wrap: anywhere; }
.panel p:last-child { margin-bottom: 0; }
.panel-accent { border-top: 3px solid var(--mw-blue); }
.check-item { border-left: 3px solid var(--mw-blue); padding-left: 1.15rem; margin-bottom: 1.6rem; }
.check-item:last-child { margin-bottom: 0; }
.step { display: flex; gap: 1.1rem; margin-bottom: 1.5rem; }
.step-n { flex: 0 0 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--mw-blue-deep); color: #fff;
         display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: .98rem; }
.step p:last-child { margin-bottom: 0; }
.step > div:last-child { min-width: 0; }
.panel .step { margin-bottom: 1.1rem; }
.panel .step:last-of-type { margin-bottom: 1rem; }

/* ---------- diagrams and figures ---------- */
figure.diagram { margin: 2rem 0; }
figure.diagram img, figure.diagram object { width: 100%; height: auto; display: block; }
figure.diagram figcaption { font-size: .92rem; color: var(--mw-muted); margin-top: .7rem; }
.figure-wide img { width: 100%; height: auto; border: 1px solid var(--mw-line); border-radius: .35rem; }
.file-pill { display: inline-flex; align-items: center; gap: .55rem; border: 1px solid var(--mw-line);
             border-radius: .35rem; padding: .55rem 1rem; margin: .3rem .5rem .3rem 0; background: #fff;
             font-size: .95rem; color: var(--mw-ink-soft); }
.file-pill span.mono { color: var(--mw-muted); }

/* ---------- tables ---------- */
.table-mw { width: 100%; border-collapse: collapse; margin: 1.4rem 0 1rem; }
.table-mw th, .table-mw td { border: 1px solid var(--mw-line); padding: .72rem .9rem; text-align: left; font-size: 1rem; }
.table-mw thead th { background: var(--mw-tint); font-weight: 600; color: var(--mw-ink); }
.table-mw tbody th { background: var(--mw-tint); font-weight: 600; color: var(--mw-ink); }
.rate-list dt { font-weight: 600; color: var(--mw-ink); margin-top: 1rem; }
.rate-list dd { margin: .15rem 0 0; color: var(--mw-body); }

/* ---------- forms ---------- */
.form-label { font-weight: 500; color: var(--mw-ink-soft); }
.form-control, .form-select { border-color: var(--mw-line); padding: .6rem .8rem; }
.form-control:focus, .form-select:focus { border-color: var(--mw-blue); box-shadow: 0 0 0 .2rem rgba(0,128,255,.12); }

/* ---------- footer ---------- */
.footer { background: var(--mw-dark-bg); color: #9fb0c2; padding: 3.2rem 0 1.6rem; margin-top: 0; }
.footer-heading { color: #fff; font-size: 1rem; margin-bottom: .9rem; font-weight: 600; }
.footer a, .footer .footer-links a { color: #9fb0c2; }
.footer a:hover { color: #fff; text-decoration: none; }
.footer-links li { margin-bottom: .45rem; font-size: .95rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 2.4rem; padding-top: 1.3rem; }
.footer .text-muted { color: #8395a8 !important; }

/* ---------- responsive ---------- */
@media (max-width: 991.98px) {
    h1 { font-size: 2.05rem; }
    h2 { font-size: 1.62rem; }
    .hero { padding: 3.4rem 0 3rem; }
    .hero .hero-sub { font-size: 1.1rem; }
    section { padding: 2.6rem 0; }
}
@media (max-width: 575.98px) {
    body { font-size: 1rem; }
    h1 { font-size: 1.8rem; }
}

/* =====================================================================
   CoverageMapper application styles
   ===================================================================== */

/* The site-wide a:hover underline must not reach buttons. */
a.btn, a.btn:hover, a.btn:focus { text-decoration: none; }

/* Honeypot: off-screen, not display:none, which some bots skip. */
.hp-field { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }

.btn-outline-primary { color: var(--mw-blue-deep); border-color: var(--mw-blue-deep); }
.btn-outline-primary:hover, .btn-check:checked + .btn-outline-primary {
    background: var(--mw-blue-deep); border-color: var(--mw-blue-deep); color: #fff;
}
.navbar form { margin: .4rem 0; }

/* ---------- FM / DAB choice ---------- */
.band-choice { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.band-choice .btn { font-size: 1.15rem; font-weight: 600; padding: .85rem 1rem; }
.band-choice .btn-check:disabled + .btn { background: var(--mw-tint); border-color: var(--mw-line); color: var(--mw-muted);
                                          opacity: 1; cursor: not-allowed; }
.band-choice .btn small { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.band-note { display: none; }
.band-note.show { display: block; }
legend.form-label { font-size: 1.0625rem; float: none; }

/* ---------- site picker ---------- */
.picker-map { height: 62vh; min-height: 340px; max-height: 640px; border: 1px solid var(--mw-line);
              border-radius: .5rem; z-index: 1; background: var(--mw-tint); }
.cm-pin { width: 30px; height: 30px; border-radius: 50% 50% 50% 0; background: var(--mw-red);
          border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.45); transform: rotate(-45deg); }
.cm-pin::after { content: ''; position: absolute; left: 7px; top: 7px; width: 10px; height: 10px;
                 border-radius: 50%; background: #fff; }
.cm-pin.outside { background: var(--mw-muted); }
.leaflet-container { font-family: inherit; }

/* ---------- coverage image: fills the width, tap to zoom ---------- */
.coverage-frame { border: 1px solid var(--mw-line); border-radius: .5rem; overflow: hidden; background: var(--mw-tint);
                  cursor: zoom-in; line-height: 0; -webkit-tap-highlight-color: transparent; }
.coverage-frame img { width: 100%; height: auto; display: block; }
.coverage-frame.zoomed { overflow: auto; cursor: zoom-out; max-height: 85vh; -webkit-overflow-scrolling: touch; }
.coverage-frame.zoomed img { width: auto; max-width: none; }
.coverage-frame:focus-visible { outline: 3px solid var(--mw-blue); outline-offset: 2px; }

/* ---------- waiting page ---------- */
#status-bar { background: var(--mw-blue-deep); transition: width .6s ease; }

/* ---------- history ---------- */
.history-table td, .history-table th { white-space: nowrap; }
.history-table td:first-child { white-space: normal; min-width: 11rem; }
.table-mw.small th, .table-mw.small td { padding: .5rem .7rem; font-size: .95rem; }
.table-mw.small { margin-top: 0; }

@media (max-width: 575.98px) {
    .picker-map { height: 52vh; }
    .page-head { padding: 2rem 0 1.6rem; }
    .page-head h1 { font-size: 1.7rem; }
    .panel { padding: 1.2rem; }
}

/* ---------- antenna patterns ---------- */
.ant-plot { max-width: 100%; height: auto; }
.ant-plot .ant-ring { fill: none; stroke: var(--mw-line); stroke-width: 1; }
.ant-plot .ant-ring-outer { stroke: #c9d1db; }
.ant-plot .ant-spoke { stroke: var(--mw-line); stroke-width: 1; }
.ant-plot .ant-tick { font-family: 'IBM Plex Sans', sans-serif; font-size: 10px; fill: var(--mw-muted); text-anchor: middle; }
.ant-plot .ant-trace { fill: rgba(0, 128, 255, .18); stroke: var(--mw-blue); stroke-width: 1.6; stroke-linejoin: round; }
.ant-plot .ant-front { stroke: var(--mw-red); stroke-width: 1.2; stroke-dasharray: 3 3; }
.ant-thumb { flex: 0 0 150px; }
.ant-admin-row.ant-hidden { background: var(--mw-tint); }
.ant-admin-row.ant-hidden .ant-plot { opacity: .55; }