/* Event evidence report (task 1670), shared by the staff and public views. */

.er-intro { max-width: 62rem; color: #444; }
.er-hint { color: #666; font-size: 13px; max-width: 62rem; }
.er-note { color: #777; font-size: 11px; }
.er-empty { color: #777; font-style: italic; }
.er-mono { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.er-reference { color: #555; margin-top: -0.6rem; }
.er-share { margin: 8px 0; }

.er-button { display: inline-block; padding: 6px 14px; background: #2a6fb0; color: #fff; border: 0; border-radius: 3px; text-decoration: none; cursor: pointer; font-size: 14px; }
.er-button:hover { background: #23598e; color: #fff; }
.er-cancel { display: inline-block; margin-left: 10px; color: #2a6fb0; }
.er-danger { background: #fff; border: 1px solid #c22; color: #c22; border-radius: 3px; padding: 2px 8px; cursor: pointer; font-size: 12px; }
.er-inline-form { display: inline; margin-left: 8px; }

.er-error { background: #fdecea; border: 1px solid #e0b4b0; border-radius: 4px; padding: 10px 12px; margin: 12px 0; max-width: 62rem; }

/* index */
table.er-index { border-collapse: collapse; width: 100%; }
table.er-index th, table.er-index td { padding: 6px 8px; border-bottom: 1px solid #e2e6ec; text-align: left; vertical-align: top; font-size: 13px; }
table.er-index thead th { background: #dde2ea; }

/* form */
.er-form { max-width: 46rem; }
.er-form fieldset { border: 1px solid #ccd; border-radius: 4px; padding: 12px 14px; margin-bottom: 14px; }
.er-form legend { font-weight: 600; padding: 0 6px; }
.er-form label { display: block; margin-bottom: 10px; font-size: 14px; }
.er-form input[type=text], .er-form input[type=number], .er-form select, .er-form textarea { display: block; width: 100%; max-width: 34rem; margin-top: 3px; padding: 5px 7px; border: 1px solid #bbc; border-radius: 3px; font-size: 14px; }
.er-form input[type=number] { max-width: 8rem; display: inline-block; }

/* report sections */
.er-section { margin: 26px 0; padding-top: 6px; border-top: 1px solid #e2e6ec; }
.er-section h2 { font-size: 18px; margin-bottom: 8px; }
.er-section h3 { font-size: 15px; margin: 14px 0 6px; }

table.er-kv { border-collapse: collapse; }
table.er-kv th { text-align: left; padding: 3px 14px 3px 0; color: #555; font-weight: 500; vertical-align: top; }
table.er-kv td { padding: 3px 0; }

table.er-table { border-collapse: collapse; width: 100%; margin-top: 6px; }
table.er-table th, table.er-table td { padding: 5px 8px; border-bottom: 1px solid #e2e6ec; text-align: left; font-size: 13px; }
table.er-table thead th { background: #dde2ea; }

/* layer status */
.er-layer-list { list-style: none; padding: 0; margin: 6px 0; max-width: 62rem; }
.er-layer-list li { padding: 6px 10px; border-left: 4px solid #ccc; margin-bottom: 5px; background: #f7f9fb; }
.er-layer-list li.er-ok { border-left-color: #1f9d55; }
.er-layer-list li.er-partial { border-left-color: #d99a00; }
.er-layer-list li.er-missing { border-left-color: #c22; }
.er-layer-list li.er-na { border-left-color: #bbb; }
.er-status { display: inline-block; min-width: 6.5rem; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: #555; }
.er-counts { color: #666; font-size: 12px; margin-left: 8px; }
.er-reason { color: #555; font-size: 13px; margin-top: 3px; }

/* radar frames
   The picture box is reserved BEFORE any image loads — aspect-ratio on the box, plus
   width and height attributes on every image inside it. A frame with no reserved box collapses to
   nothing until its bytes arrive, so everything below it jumps as the page is scrolled with an
   empty cache. The inner stack stays square so every overlay retains the source's 512-pixel
   coordinate space; the outer box clips the blank 16-pixel source header. */
.er-frame-controls { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; padding: 6px 8px; flex-wrap: wrap; border: 1px solid #d9dee7; border-radius: 6px 6px 0 0; background: #f7f9fb; }
.er-frame-controls input[type=range] { flex: 1 1 220px; min-width: 180px; }
.er-frame-controls button:disabled { cursor: default; opacity: 0.5; }
.er-frame-button-group { display: inline-flex; align-items: center; gap: 3px; }
.er-frame-icon-button, .er-frame-reset-button { min-width: 34px; height: 34px; padding: 7px 9px; border: 1px solid #bbc4d1; border-radius: 4px; background: #fff; color: #26364b; cursor: pointer; }
.er-frame-icon-button img { display: block; width: 18px; height: 18px; }
.er-frame-reset-button { width: auto; font: inherit; font-size: 12px; white-space: nowrap; }
.er-frame-speed { display: inline-flex; align-items: center; gap: 5px; color: #555; font-size: 13px; white-space: nowrap; }
.er-frame-speed select { font: inherit; }
.er-frame-toggle { display: inline-flex; align-items: center; gap: 4px; color: #555; font-size: 13px; white-space: nowrap; }
.er-frame-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; margin: 0 0 10px; padding: 6px 8px; border: 1px solid #d9dee7; border-top: 0; border-radius: 0 0 6px 6px; color: #4b5563; font-size: 12px; }
.er-frame-meta > :nth-child(even) { text-align: right; }
.er-frames { display: flex; gap: 14px; flex-wrap: wrap; }
.er-frame { margin: 0; flex: 1 1 380px; max-width: 520px; }
.er-frame-image { position: relative; aspect-ratio: 512 / 496; overflow: hidden; line-height: 0; border: 1px solid #ccd; background: #e2cb8c; }
.er-frame-image.is-zoomed { cursor: grab; touch-action: none; }
.er-frame-image.is-dragging { cursor: grabbing; }
.er-frame-stack { position: absolute; inset: 0 auto auto 0; width: 100%; aspect-ratio: 1 / 1; transform: translate(var(--er-frame-pan-x, 0px), calc(-3.125% + var(--er-frame-pan-y, 0px))) scale(var(--er-frame-zoom, 1)); transform-origin: center; will-change: transform; }
.er-frame-stack img { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.er-frame-cross { position: absolute; width: 15px; height: 15px; margin: -8px 0 0 -8px; transform: scale(var(--er-frame-marker-scale, 1)); transform-origin: center; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #d3382f inset, 0 0 4px rgba(0,0,0,0.8); pointer-events: none; }
.er-frame-missing { position: absolute; inset: auto 0 0 0; background: rgba(255,255,255,0.85); border-top: 1px solid #bbc; color: #555; font-size: 13px; line-height: 1.4; text-align: center; padding: 8px 10px; }
.er-frame figcaption { font-size: 12px; color: #555; padding-top: 4px; }
.er-frame-gauge, .er-frame-station { position: absolute; z-index: 2; width: 13px; height: 13px; margin: -7px 0 0 -7px; padding: 0; transform: scale(var(--er-frame-marker-scale, 1)); transform-origin: center; border: 2px solid #fff; cursor: pointer; line-height: normal; }
.er-frame-gauge:hover, .er-frame-gauge:focus, .er-frame-gauge.is-open, .er-frame-station:hover, .er-frame-station:focus, .er-frame-station.is-open { z-index: 4; }
.er-frame-gauge { border-radius: 50%; background: #8e5ac0; box-shadow: 0 0 0 1px #5c3288, 0 0 4px rgba(0,0,0,0.8); }
.er-frame-station { border-radius: 2px; background: #1f78a8; box-shadow: 0 0 0 1px #0d5075, 0 0 4px rgba(0,0,0,0.8); }
.er-frame-observation-popup { display: none; position: absolute; z-index: 3; left: 50%; bottom: calc(100% + 8px); width: max-content; max-width: 240px; transform: translateX(-50%); padding: 6px 8px; border: 1px solid #bbc; border-radius: 4px; background: rgba(255,255,255,0.96); color: #222; box-shadow: 0 2px 6px rgba(0,0,0,0.25); font: 12px/1.35 system-ui, sans-serif; text-align: left; pointer-events: none; }
.er-frame-observation-popup.is-below { top: calc(100% + 8px); bottom: auto; }
.er-frame-observation-popup.is-left { left: 50%; transform: none; }
.er-frame-observation-popup.is-right { right: 50%; left: auto; transform: none; }
.er-frame-gauge:hover .er-frame-observation-popup, .er-frame-gauge:focus .er-frame-observation-popup, .er-frame-gauge.is-open .er-frame-observation-popup, .er-frame-station:hover .er-frame-observation-popup, .er-frame-station:focus .er-frame-observation-popup, .er-frame-station.is-open .er-frame-observation-popup { display: block; }
@media (max-width: 430px) { .er-frame-observation-popup { max-width: 176px; } }

/* chart */
.er-chart { width: 100%; height: 340px; }

/* Doppler point series. A gate that resolved no velocity is printed rather than left blank, so it
   reads as a measured absence instead of a hole in the table, and is greyed so a column of them
   does not compete with the readings beside it. */
.er-muted { color: #777; }

/* A station listed because the report names it, rather than because it fell inside the search area.
   Marked in the table because "why is a station 99 km away in this report" is the first question a
   reader asks, and the answer is one word. */
.er-tag { display: inline-block; margin-left: 6px; padding: 0 5px; border: 1px solid #bbc; border-radius: 3px; background: #f2f4f8; color: #556; font-size: 11px; vertical-align: 1px; }

/* The explanatory row under a station outside the search area. Its own row rather than a cell so the
   sentence can run the width of the table instead of wrapping inside one narrow column. */
tr.er-subrow td { border-top: 0; padding-top: 0; font-size: 12px; }

/* The warning's own text. Whitespace is preserved because BoM writes these as several separate
   statements and running them into one paragraph loses the separation. */
.er-warning-text { max-width: 62rem; margin: 8px 0; border: 1px solid #d9dee7; border-radius: 4px; }
.er-warning-text > summary { padding: 10px 12px; cursor: pointer; }
.er-warning-title { display: block; font-weight: 600; }
.er-warning-meta { display: block; margin-top: 2px; color: #666; font-size: 12px; font-weight: 400; }
.er-warning-body { padding: 0 12px 12px; }
.er-warning-text .er-hint { margin: 0 0 6px; }
.er-warning-text details { margin-top: 6px; }
.er-warning-text summary { cursor: pointer; color: #36c; font-size: 13px; }
.er-warning-text > summary { color: #1a202c; font-size: 14px; }

/* The Bureau's own warning map. Its box is reserved before it loads for the same reason the radar
   frames' is — an img whose dimensions the browser does not know collapses to nothing and the page
   jumps as it arrives. */
.er-warning-map { margin: 10px 0 0; max-width: 700px; }
.er-warning-map img { display: block; width: 100%; height: auto; aspect-ratio: 700 / 750; border: 1px solid #ccd; background: #f7f9fb; }
.er-warning-map figcaption { margin-top: 4px; color: #666; font-size: 12px; }

/* sources and limitations */
.er-sources { max-width: 62rem; color: #444; font-size: 13px; }
.er-limitation { max-width: 62rem; margin-bottom: 12px; }
.er-limitation h3 { margin-bottom: 3px; }
.er-limitation p { margin-top: 0; color: #333; }
.er-notes { max-width: 62rem; white-space: pre-wrap; background: #f7f9fb; border-left: 4px solid #bbc; padding: 8px 12px; }

/* The published report sits in the public site layout but remains a light evidence sheet. Keeping
   the sheet light also keeps the ECharts canvas labels, the Bureau maps and the radar furniture on
   one known palette when the surrounding site is in dark mode. */
.event-report-public { color-scheme: light; box-sizing: border-box; max-width: 82rem; margin: 24px auto; padding: 24px 28px 40px; background: #fff; color: #1a202c; border: 1px solid #e2e6ec; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.event-report-public h1, .event-report-public h2, .event-report-public h3, .event-report-public h4 { color: #1a202c; }
.er-public-header { max-width: 62rem; }
.er-public-header h1 { margin: 2px 0 10px; }
.er-public-header p:last-child { font-size: 16px; line-height: 1.5; color: #444; }
.er-kicker { margin: 0; color: #2a6fb0; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.er-details { margin-top: 12px; }
.er-details > summary { color: #2a6fb0; cursor: pointer; font-weight: 600; }
@media (max-width: 700px) {
  .event-report-public { margin: 0; padding: 18px 12px 32px; border-width: 0; border-radius: 0; }
  .er-public-header h1 { font-size: clamp(30px, 9vw, 42px); line-height: 1.1; }
  .er-frame { flex-basis: 100%; }
  .er-frame-controls input[type=range] { flex-basis: 100%; order: 4; }
  .er-frame-meta { gap: 4px 8px; font-size: 11px; }
  #er-frame-offset { grid-column: 1 / -1; text-align: left; }
  table.er-index, table.er-table { display: block; overflow-x: auto; }
}