@font-face { font-family: 'Source Sans Pro'; src: url('/assets/source-sans-pro-regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Sans Pro'; src: url('/assets/source-sans-pro-semibold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
:root { color-scheme: light; font: 16px/1.4 'Source Sans Pro', Arial, sans-serif; color: #414141; background: #f3f3f0; --brand: #fd600b; --charcoal: #333; --muted: #707070; --border: #e5e5e0; --soft: #f8f8f5; --orange-wash: #fff2e9; }
* { box-sizing: border-box; }
body { margin: 0; letter-spacing: .015em; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; font-weight: 400; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 1px solid #d5d5ce; border-radius: 6px; background: white; padding: 9px 13px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; line-height: 1.25; }
button:hover { background: var(--soft); }
button:disabled { opacity: .45; cursor: default; }
:focus-visible { outline: 2px solid var(--charcoal); outline-offset: 3px; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
button .icon { width: 18px; height: 18px; }
.brand-header { height: 96px; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; background: var(--charcoal); color: white; }
.brand-lockup { display: flex; align-items: center; gap: 28px; }
.brand-lockup img { width: 184px; height: 72px; object-fit: contain; }
.brand-divider { width: 1px; height: 30px; background: #5b5b5b; }
.brand-lockup h1 { font-size: 21px; letter-spacing: .02em; color: #eeeeeb; }
.deployment { display: flex; align-items: center; gap: 12px; line-height: 1.25; }
.deployment > .icon { width: 23px; height: 23px; color: var(--brand); }
.deployment > div { display: flex; flex-direction: column; gap: 5px; }
.overline { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #c8c8c4; font-weight: 600; }
.deployment b { font-size: 11px; font-weight: 400; letter-spacing: .08em; background: #4c4c4c; color: #ddd; padding: 3px 6px; margin-left: 10px; border-radius: 3px; }
main { display: grid; grid-template-columns: minmax(0, 1fr) 326px; gap: 24px; padding: 25px 32px 0; }
main.filters-collapsed { grid-template-columns: minmax(0, 1fr); }
.workspace { grid-column: 1; grid-row: 1; min-width: 0; display: flex; flex-direction: column; gap: 17px; }
.filters { grid-column: 2; grid-row: 1; position: sticky; top: 20px; align-self: start; max-height: calc(100vh - 40px); overflow-y: auto; scrollbar-width: thin; background: white; border: 1px solid var(--border); border-radius: 10px; }
.filter-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 16px; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 2; background: white; }
.filter-heading h2 { font-size: 23px; color: #5c5c59; }
.icon-button.panel-toggle { width: 32px; height: 32px; flex-shrink: 0; padding: 4px; border-color: #dcdcd4; border-radius: 5px; color: #77776f; }
.filter-expand .icon { transform: scaleX(-1); }
.filter-backdrop { display: none; }
fieldset { min-width: 0; margin: 0; border: 0; }
.filter-section { padding: 18px 20px 20px; border-bottom: 1px solid var(--border); }
.filter-section legend { float: left; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0; margin-bottom: 13px; font-size: 16px; color: #333; }
.filter-section legend + * { clear: both; }
.filter-section::after { content: ''; display: block; clear: both; }
.hint { font-size: 12px; line-height: 1.5; color: var(--muted); }
.filter-section > .hint { margin-top: 10px; font-size: 11px; }
.text-actions { display: flex; align-items: center; gap: 12px; font-size: 12px; }
.text-actions button, .text-button { border: 0; padding: 0; background: transparent; color: #a54517; font-size: 13px; }
.text-actions button:hover, .text-button:hover { text-decoration: underline; }
#no-robots, #clear-codes { color: var(--muted); }
.robot-options { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
.robot-choice { position: relative; cursor: pointer; }
.robot-choice input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.robot-choice span { display: flex; height: 35px; align-items: center; justify-content: center; border: 1px solid #deded6; border-radius: 5px; color: #75756e; }
.robot-choice input:checked + span { border-color: #fdbd9b; background: var(--orange-wash); color: #8e380e; }
.robot-choice input:focus-visible + span { outline: 2px solid var(--charcoal); outline-offset: 2px; }
.timezone { display: flex; align-items: center; gap: 6px; margin: -4px 0 15px; color: var(--muted); font-size: 12px; }
.timezone .icon { width: 14px; height: 14px; }
label[for='from-date'], label[for='to-date'] { display: block; margin: 11px 0 6px; font-size: 13px; color: #75756e; }
input[type='search'], input[type='date'], input[type='text'] { min-width: 0; width: 100%; height: 40px; border: 1px solid #dcdcd4; border-radius: 5px; background: white; padding: 0 9px; font-size: 14px; }
.datetime-input { display: grid; grid-template-columns: minmax(0, 1fr) 90px; gap: 8px; }
.datetime-input input[type='text'] { text-align: center; font-variant-numeric: tabular-nums; }
.search-field { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; border: 1px solid #dcdcd4; border-radius: 5px; }
.search-field .icon { width: 16px; height: 16px; color: #85857c; }
.search-field input { border: 0; padding: 0; height: 34px; font-size: 13px; }
.search-field:focus-within { outline: 2px solid var(--charcoal); outline-offset: 2px; }
.search-field input:focus-visible { outline: none; }
input::placeholder { color: #85857c; opacity: 1; }
.code-shortcuts { justify-content: space-between; margin: 12px 0 9px; }
.code-options { display: grid; gap: 4px; max-height: 245px; overflow: auto; scrollbar-width: thin; }
.code-option { display: flex; align-items: flex-start; gap: 10px; padding: 10px 9px; border: 1px solid #ebebe5; border-radius: 5px; background: #fafaf7; cursor: pointer; font-size: 12px; line-height: 1.3; }
.code-option:has(input:checked) { border-color: #ecc6af; background: #fff7f0; }
.code-option:hover { background: #f4f3ee; }
.code-option > span { min-width: 0; color: var(--muted); }
.code-option .code-name { display: flex; align-items: center; gap: 7px; font-weight: 600; color: #454540; font-size: 14px; margin-bottom: 4px; }
.code-option .swatch { width: 7px; height: 7px; flex-shrink: 0; }
.check { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 14px; }
.check input, .code-option input { appearance: none; width: 16px; height: 16px; border: 1px solid #b8b8b0; border-radius: 3px; margin: 0; background: white; flex-shrink: 0; cursor: pointer; }
.code-option input { margin-top: 3px; }
.check input:checked, .code-option input:checked { background: var(--brand); border-color: var(--brand); position: relative; }
.check input:checked::after, .code-option input:checked::after { content: ''; position: absolute; width: 7px; height: 4px; left: 3px; top: 3px; border-left: 1.5px solid #333; border-bottom: 1.5px solid #333; transform: rotate(-45deg); }
.state-section { padding-bottom: 12px; border-bottom: 0; }
.state-options, .segment { display: flex; gap: 3px; padding: 3px; background: #f6f6f2; border: 1px solid #e3e3dc; border-radius: 5px; }
.state-options label, .segment label { position: relative; flex: 1; text-align: center; cursor: pointer; }
.state-options input, .segment input { position: absolute; opacity: 0; margin: 0; width: 100%; height: 100%; left: 0; top: 0; cursor: pointer; }
.state-options span { display: flex; align-items: center; justify-content: center; min-height: 32px; height: 100%; padding: 5px; color: var(--muted); font-size: 12px; line-height: 1.25; border-radius: 3px; }
.state-options input:checked + span { background: white; color: #45453e; box-shadow: 0 1px 3px #0001; }
.state-options input:focus-visible + span, .segment input:focus-visible + span { outline: 2px solid var(--charcoal); outline-offset: 2px; }
.filter-actions { padding: 8px 20px 12px; }
.query-actions { display: flex; flex-direction: column; gap: 10px; }
button.primary { justify-content: space-between; width: 100%; min-height: 46px; padding: 0 15px; background: var(--brand); border-color: var(--brand); color: #292929; font-size: 16px; font-weight: 600; }
button.primary:hover { background: #f1732e; }
.refresh-button { background: transparent; border: 0; color: var(--muted); font-size: 13px; padding: 4px 0; }
.refresh-button .icon { width: 14px; height: 14px; }
.pending-filters { color: #9e4115; margin-bottom: 10px; }
#query-progress:empty { display: none; }
#query-progress { margin-top: 8px; }
.notice { padding: 12px; margin: 8px 20px 16px; font-size: 12px; color: #775528; border-left: 3px solid #d88e3e; background: #fff8e9; }
.help { border-top: 1px solid var(--border); padding: 16px 20px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.help summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
.help summary::-webkit-details-marker { display: none; }
.help summary .icon { width: 14px; height: 14px; }
.help[open] summary .icon { transform: rotate(180deg); }
.help p { margin-top: 10px; }
.status { padding: 12px 16px; border-radius: 6px; font-size: 14px; overflow-wrap: anywhere; }
.status.error { background: #fdece8; color: #8c3525; border: 1px solid #f0ccc1; }
.map-panel, .list-panel, .detail-panel { background: white; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; flex-wrap: wrap; }
.panel-header h2 { font-size: 23px; color: #5c5c59; }
.map-heading { position: relative; }
.map-heading > .filter-expand { position: absolute; right: 53px; top: 50%; transform: translateY(-50%); }
.map-heading:has(.filter-expand:not([hidden])) .totals { padding-right: 42px; }
#map-content { border-top: 1px solid #edede6; }
.totals { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-left: auto; }
.total-number { font-size: 17px; color: #333; }
.total-divider { color: #b0b0a6; margin: 0 5px; }
.map-toolbar { display: flex; align-items: center; gap: 22px; padding: 10px 22px; min-height: 59px; flex-wrap: wrap; }
.color-control { display: flex; align-items: center; gap: 11px; padding: 0; font-size: 14px; }
.segment { border-color: #dfdfd8; background: #fafaf8; gap: 2px; border-radius: 6px; }
.segment span { display: block; padding: 5px 16px; border-radius: 3px; font-size: 14px; color: var(--muted); min-width: 66px; }
.segment input:checked + span { background: var(--charcoal); color: white; }
.point-label-control { white-space: nowrap; }
#download-png { margin-left: auto; }
#png-status { flex-basis: 100%; }
#png-status:empty { display: none; }
#png-status.error { color: #8c3525; }
#map-wrap { position: relative; height: clamp(530px, calc(100vh - 400px), 850px); overflow: hidden; background: #f1f1ed; border-block: 1px solid var(--border); }
#map { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#map.dragging { cursor: grabbing; }
.loading-reports #map { cursor: progress; }
#base-layer image { image-rendering: pixelated; filter: grayscale(1); opacity: .61; }
.road { stroke: #888b87; stroke-width: 1.8; stroke-opacity: .85; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.node { fill: white; stroke: #777c75; stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.map-label, .point-label { fill: #4a4a44; stroke: white; paint-order: stroke; stroke-linejoin: round; font-family: 'Source Sans Pro', Arial, sans-serif; pointer-events: none; }
.event-dot { stroke-width: 1.4; vector-effect: non-scaling-stroke; cursor: pointer; fill-opacity: .92; }
.event-dot.selected { stroke: #333; stroke-width: 3; }
.layer-controls { position: absolute; left: 18px; top: 18px; display: flex; gap: 17px; background: #fffffff5; border: 1px solid #deded7; padding: 11px 14px; border-radius: 6px; box-shadow: 0 2px 6px #33333306; }
.layer-controls .check { font-size: 13px; white-space: nowrap; }
.layer-controls input { width: 14px; height: 14px; }
.layer-controls input:checked::after { left: 2px; top: 2px; }
.zoom-controls { position: absolute; top: 18px; right: 18px; border: 1px solid #dadad2; border-radius: 6px; overflow: hidden; background: white; box-shadow: 0 2px 6px #33333308; }
.zoom-controls button { display: flex; width: 37px; height: 37px; padding: 0; border: 0; border-radius: 0; }
.zoom-controls button + button { border-top: 1px solid var(--border); }
.north { position: absolute; left: 25px; bottom: 68px; display: flex; align-items: center; flex-direction: column; gap: 5px; font-size: 11px; color: var(--muted); pointer-events: none; }
.north svg { width: 14px; height: 23px; }
.map-scale { position: absolute; left: 22px; bottom: 20px; text-align: center; color: var(--muted); font-size: 11px; pointer-events: none; }
#scale-bar { height: 7px; width: 90px; max-width: 180px; border: 1px solid #707070; border-top: 0; margin-top: 3px; }
#map-empty { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); max-width: calc(100% - 36px); text-align: center; background: #fffffff2; border: 1px solid var(--border); border-radius: 6px; padding: 12px 18px; color: var(--muted); font-size: 15px; pointer-events: none; }
.map-tooltip { position: absolute; pointer-events: none; width: 258px; max-width: calc(100% - 24px); border-radius: 6px; background: #333; color: white; padding: 14px 16px; box-shadow: 0 5px 20px #0002; font-size: 14px; z-index: 2; }
.tooltip-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 7px; }
.tooltip-secondary { color: #ff945d; }
.tooltip-time { color: #c6c6c3; font-size: 12px; }
.tooltip-metrics { margin-top: 9px; padding-top: 9px; border-top: 1px solid #555; color: #e5e5df; font-size: 13px; }
.legend { padding: 16px 22px; min-height: 53px; display: flex; align-items: center; gap: 23px; flex-wrap: wrap; font-size: 13px; color: #55554e; }
.legend-item { display: inline-flex; align-items: center; gap: 8px; }
.swatch { display: inline-block; border-radius: 50%; width: 11px; height: 11px; background: var(--dot-color); }
.legend-states { display: flex; gap: 16px; margin-left: auto; color: var(--muted); font-size: 12px; }
.state-swatch { width: 8px; height: 8px; border-radius: 50%; border: 1px solid #77776f; background: #77776f; }
.state-swatch.hollow { background: white; }
.detail-panel { padding: 19px 22px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; min-height: 104px; }
#detail { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 18px 24px; flex-wrap: wrap; }
.detail-identity { flex: 1 1 320px; min-width: 0; display: flex; align-items: center; gap: 15px; }
.event-badge { flex-shrink: 0; font-size: 16px; display: inline-block; border-radius: 5px; padding: 10px 12px; border: 1px solid; line-height: 1; }
.detail-title { font-size: 16px; color: #333; margin-bottom: 4px; overflow-wrap: anywhere; }
.detail-subtitle { font-size: 12px; color: var(--muted); }
.detail-metrics { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.detail-metric { display: flex; flex-direction: column; gap: 5px; }
.metric-name { font-size: 11px; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
.metric-value { font-size: 16px; color: #53534c; white-space: nowrap; }
.metric-value small { font-size: 12px; color: var(--muted); margin-left: 4px; }
.metric-speed .metric-value { font-size: 24px; line-height: 1.05; }
.detail-more { flex-basis: 100%; color: var(--muted); font-size: 12px; margin-top: -6px; }
.detail-more summary { cursor: pointer; }
.detail-more p { margin-top: 7px; }
#center-event { font-size: 12px; }
.list-controls { display: flex; gap: 16px; align-items: center; font-size: 13px; }
.list-controls .check { font-size: 13px; }
.list-controls .text-button { color: var(--muted); }
.list-controls .icon { width: 15px; height: 15px; }
.table-wrap { overflow: auto; max-height: 345px; }
table { border-collapse: collapse; width: 100%; font-size: 13px; text-align: left; white-space: nowrap; }
th { position: sticky; top: 0; z-index: 1; background: #fafaf7; color: #77776f; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 400; border-top: 1px solid var(--border); }
th, td { padding: 12px 22px; border-bottom: 1px solid #eeeeea; }
td:last-child { white-space: normal; min-width: 160px; }
tr.selected { background: #fff2e9; }
tbody tr:hover { background: #faf9f5; }
.report-link { border: 0; padding: 0; background: transparent; color: #55554e; font-size: 13px; }
.report-link:hover { text-decoration: underline; }
.pagination { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 12px 22px; font-size: 12px; color: var(--muted); }
.pagination button { font-size: 12px; padding: 6px 10px; }
.app-footer { padding: 24px 32px; color: #85857c; display: flex; justify-content: space-between; font-size: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
@media (max-width: 1250px) {
  main { padding: 22px 22px 0; grid-template-columns: minmax(0, 1fr) 306px; gap: 18px; }
  .map-toolbar { gap: 12px; }
  .totals { font-size: 12px; flex-wrap: wrap; justify-content: flex-end; gap: 3px; }
  .detail-metrics { gap: 17px; }
  .detail-title { font-size: 15px; }
  .legend { gap: 16px; }
}
@media (max-width: 900px) {
  main { grid-template-columns: minmax(0, 1fr); }
  .brand-header { height: 82px; padding: 0 22px; }
  .brand-lockup { gap: 16px; }
  .brand-lockup img { width: 150px; height: 60px; }
  .brand-lockup h1 { font-size: 17px; }
  .deployment { display: none; }
  .filters { position: fixed; z-index: 30; top: 100px; bottom: 18px; right: 18px; width: min(326px, calc(100vw - 36px)); max-height: none; box-shadow: 0 12px 60px #0003; }
  .filter-backdrop:not([hidden]) { display: block; position: fixed; inset: 82px 0 0; padding: 0; border: 0; border-radius: 0; background: #3333; z-index: 20; }
  #map-wrap { height: max(530px, 70vh); }
  .panel-header { padding: 16px 18px; }
  .map-toolbar { padding-inline: 18px; }
  .detail-panel { flex-direction: column; }
  .layer-controls { gap: 12px; }
  .legend-states { margin-left: 0; }
}
@media (max-width: 520px) {
  main { padding: 16px 12px 0; }
  .brand-header { padding: 0 14px; }
  .brand-lockup { gap: 12px; }
  .brand-lockup img { width: 132px; }
  .brand-lockup h1 { font-size: 16px; }
  .brand-divider { height: 25px; }
  .panel-header { gap: 9px; }
  .filter-expand { margin-left: auto; }
  .map-toolbar { gap: 12px 14px; }
  #download-png { margin-left: 0; }
  .layer-controls { top: 12px; left: 12px; gap: 8px; padding: 9px; }
  .layer-controls .check { font-size: 12px; }
  .zoom-controls { top: 62px; right: 12px; }
  .detail-panel { padding: 17px; }
  .detail-identity { flex-basis: auto; align-items: flex-start; }
  .detail-metrics { gap: 15px; }
  .metric-name { font-size: 10px; }
  .metric-value { font-size: 14px; }
  .app-footer { padding-inline: 12px; }
}

/* Approved event explorer layout, sampled map and incident details. */
/* Only the standalone preview uses these additions. The application is untouched. */
.prototype-badge{font-size:11px;letter-spacing:.025em;color:#d4d4cd;border:1px solid #66665e;border-radius:4px;padding:4px 8px;margin-left:-12px;white-space:nowrap}
.preview-source{padding:11px 20px 16px;color:#78786f;font-size:11px;line-height:1.6}
.filters{display:flex;flex-direction:column;max-height:calc(100vh - 40px);overflow:hidden}
.filter-heading{position:relative;top:auto;flex-shrink:0;display:grid;grid-template-columns:minmax(0,1fr) auto 32px;gap:10px;padding:14px 16px}.filter-heading button.primary{width:auto;min-height:36px;padding:0 10px;gap:7px;font-size:13px;white-space:nowrap}.filter-heading button.primary .icon{width:15px;height:15px}.filter-heading .pending-filters{grid-column:1/-1;margin:0;font-size:11px}.filter-scroll{min-height:0;overflow-y:auto;scrollbar-width:thin}
.sample-notice{position:relative;background:#fff8ef;border-top:1px solid #f3e4d1;padding:8px 22px;color:#735039;font-size:14px;line-height:1.6}
.sample-notice p{margin:0}.sample-notice strong{font-weight:600;color:#543e2d}.sample-notice .hint{font-size:12px;color:#8a735f}.sample-notice button{display:inline;border:0;border-radius:0;background:transparent;color:#6f4528;padding:0;font:inherit;text-decoration:underline;text-underline-offset:2px}.sample-notice button:hover{color:#a54517;background:transparent}.sample-notice.complete{background:#f4f7f2;border-color:#e1e8dc;color:#526548}.sample-notice.complete strong{color:#526548}.sample-notice.complete button{color:#526548}
#full-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:#f0e3d3}#full-progress span{display:block;height:100%;width:0;background:var(--brand);transition:width .15s linear}
body.incident-open #map-wrap{height:430px}body.incident-open.map-expanded #map-wrap{height:700px}
#map-points{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.north,.map-scale{z-index:1}
#map-window-key{display:flex;align-items:center;gap:7px;border-top:1px solid #f0f0e8;padding:9px 22px;font-size:11px;color:#77776e}.window-key-dot{width:6px;height:6px;border-radius:50%;background:var(--brand)}#map-size{margin-left:auto;font-size:11px;color:#77776e}
.incident-unavailable{display:flex;align-items:center;gap:13px;background:#f9f9f6;border:1px dashed #d4d4ca;border-radius:9px;padding:18px 22px;color:#77776d}.incident-unavailable>.icon{width:23px;height:23px;color:#99998c}.incident-unavailable span{color:#51514b;font-size:15px}.incident-unavailable p{font-size:12px;margin-top:4px}
.incident-analysis,.incident-content{display:grid;grid-template-columns:minmax(0,1fr);gap:0;min-width:0}.incident-analysis{background:white;border:1px solid var(--border);border-radius:10px;overflow:hidden}.incident-content{border-top:1px solid #edede6}.section-toggle{width:100%;justify-content:flex-start;min-height:54px;padding:13px 22px;background:transparent;border:0;border-radius:0;color:#5c5c59;font-size:18px;font-weight:600;text-align:left}.section-toggle:focus-visible{outline-offset:-4px}.incident-toggle-help{margin-left:auto;font-size:12px;font-weight:400;color:#89897d}.section-toggle>.icon{margin-left:auto;width:17px;height:17px;transition:transform .15s ease}.incident-toggle-help:not([hidden])+.icon{margin-left:10px}.section-toggle[aria-expanded="true"]>.icon{transform:rotate(180deg)}
.map-toggle .totals{min-width:0;font-size:12px;font-weight:400;justify-content:flex-end}.map-toggle>.icon{margin-left:10px}
.incident-navigator,.pulse-panel{background:transparent;border:0;border-radius:0;overflow:hidden;min-width:0}.pulse-panel{border-top:1px solid #edede6}
.incident-heading{padding:18px 22px 10px;display:flex;align-items:center;justify-content:space-between;gap:16px}.incident-heading h2,.pulse-heading h2{font-size:18px;color:#5c5c59}.incident-heading .hint{font-size:12px;margin-top:4px}.tractor-badge{display:inline-flex;vertical-align:middle;font-size:11px;font-weight:400;color:#78786e;background:#f4f4ef;border:1px solid #e2e2d9;border-radius:4px;padding:3px 7px;margin-left:8px}.max-duration{display:inline-flex;align-items:center;gap:6px;color:#7c7c70;font-size:12px;white-space:nowrap}.max-duration .icon{width:14px;height:14px}
.window-controls{display:flex;align-items:flex-end;gap:12px;padding:2px 22px 10px}.window-controls label{display:flex;flex-direction:column;gap:5px;font-size:11px;color:#89897d}.window-controls input{height:33px;width:96px;padding:0 9px;font-size:13px;font-variant-numeric:tabular-nums}.window-controls select{height:33px;font-size:13px;border:1px solid #dcdcd4;border-radius:5px;background:white;padding:0 9px;max-width:120px}.window-arrow{color:#b1b1a4;padding-bottom:8px}.duration-control{margin-left:3px}#window-date{font-size:12px;color:#77776d;padding-bottom:9px;margin-left:5px}.navigator-zoom{margin-left:auto;display:flex;gap:4px;padding-bottom:1px}.navigator-zoom button{height:30px;min-width:29px;padding:3px 8px;font-size:12px}.navigator-zoom button:last-child{margin-left:3px}#window-error{padding:0 22px 7px;color:#9e4115}
.navigator-container{height:86px;position:relative;margin:0 22px;touch-action:none;user-select:none}#time-navigator{width:100%;height:86px;display:block;overflow:visible}.time-selection{position:absolute;top:14px;height:42px;border-block:1.5px solid #fd600b;background:#fd600b16;touch-action:none;min-width:1px}.time-selection:focus-visible{outline-color:#a54517;outline-offset:5px}#window-drag{position:absolute;inset:0;cursor:grab;touch-action:none}#window-drag:active{cursor:grabbing}#window-callout{position:absolute;left:50%;bottom:calc(100% + 5px);transform:translateX(-50%);white-space:nowrap;color:#9b4114;background:#fff3e8;border:1px solid #facfb4;border-radius:4px;padding:2px 6px;font-size:10px;letter-spacing:.02em;pointer-events:auto;cursor:grab}.window-handle{position:absolute;top:-1.5px;height:42px;width:10px;min-width:0;padding:0;background:#fd600b;border:0;border-radius:3px;cursor:ew-resize;touch-action:none;z-index:2}.window-handle:after{content:'';position:absolute;top:15px;left:4px;height:11px;border-left:1px solid #fff9}.left-handle{right:100%;margin-right:-3px}.right-handle{left:100%;margin-left:-3px}.window-handle:hover{background:#de5710}
.navigator-footer{padding:1px 22px 13px;display:flex;justify-content:space-between;gap:15px;font-size:10px;color:#8b8b7e}
.pulse-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:18px 22px 11px}.pulse-heading p{font-size:12px;color:#77776c;margin-top:4px;font-variant-numeric:tabular-nums}.pulse-status{display:flex;align-items:flex-end;flex-direction:column;gap:5px;font-size:11px;color:#68806b}.pulse-status>span:first-child:before{content:'';display:inline-block;width:5px;height:5px;background:#7c967c;border-radius:50%;margin-right:5px}.illustrative-tag{color:#929285;font-size:10px}
.pulse-toolbar{display:flex;align-items:center;gap:14px;padding:0 22px 13px;font-size:12px;flex-wrap:wrap;border-bottom:1px solid #edede6}.pulse-state-key{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#6f6f63}.pulse-state-key i{display:inline-block;width:6px;height:6px;background:#77776a;border-radius:50%}.key-zero{margin-left:12px;color:#8e8e81}.overlay-label{margin-left:auto;color:#8d8d80;font-size:11px}.pulse-toolbar .check{font-size:12px;gap:6px}.pulse-toolbar .check input{width:14px;height:14px}.pulse-toolbar .check input:checked:after{left:2px;top:2px}.pulse-toolbar button{font-size:12px;padding:6px 9px;color:#68685d}.pulse-toolbar button .icon{width:14px;height:14px}
#pulse-chart-wrap{position:relative;height:316px;touch-action:pan-y}#pulse-chart{width:100%;height:100%;display:block;user-select:none}#pulse-chart text{font-family:'Source Sans Pro',Arial,sans-serif}#pulse-hover{position:absolute;pointer-events:none;background:#333;color:#eee;border-radius:6px;padding:11px 13px;width:209px;box-shadow:0 5px 20px #0002;font-size:12px;line-height:1.7;z-index:4}#pulse-hover strong{font-weight:600;color:white;display:block;margin-bottom:4px}.hover-signal{display:flex;justify-content:space-between;gap:12px}.hover-key{display:flex;align-items:center;gap:6px}.hover-dot{width:6px;height:6px;border-radius:50%;display:inline-block}
.pulse-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 22px 8px;border-top:1px solid #edede6;flex-wrap:wrap}.sequence-comparison{display:flex;align-items:center;gap:9px;font-size:12px;color:#656558}.comparison-dot{height:6px;width:6px;display:inline-block;border-radius:50%;background:#fd600b}.sequence-comparison strong{font-weight:600;color:#9e4115;background:#fff3e9;border:1px solid #f8dac6;border-radius:4px;padding:3px 7px}.sequence-comparison .hint{font-size:11px;color:#929284}.telemetry-legend{display:flex;gap:15px;font-size:11px;color:#7f7f70}.trace-key{display:flex;align-items:center;gap:7px}.trace-key i{display:inline-block;width:18px;height:0;border-top:2px solid var(--trace)}.trace-key.soc i{border-top-style:dashed}.pulse-help{font-size:11px;line-height:1.5;color:#8e8e80;padding:0 22px 14px}
#map-content>.detail-panel{min-height:0;padding:13px 22px;background:transparent;border:0;border-top:1px solid var(--border);border-radius:0}.detail-panel .hint{font-size:12px}.detail-panel .detail-title{font-size:14px}.detail-panel .detail-subtitle{font-size:11px}.detail-panel .event-badge{font-size:13px;padding:8px 10px}.detail-panel #detail{gap:10px}.detail-panel .detail-metrics{gap:22px}.detail-panel .metric-speed .metric-value{font-size:21px}
.reports-summary{list-style:none;display:flex;align-items:center;gap:8px;padding:16px 22px;font-size:16px;color:#68685c;cursor:pointer}.reports-summary::-webkit-details-marker{display:none}.reports-summary>span{font-size:12px;color:#98988a}.reports-summary .icon{margin-left:auto;width:15px;height:15px}.list-panel[open]>.reports-summary{border-bottom:1px solid var(--border)}.list-panel[open]>.reports-summary .icon{transform:rotate(180deg)}.reports-content>.panel-header{padding-block:12px}.reports-content>.panel-header h2{display:none}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#333;color:white;box-shadow:0 4px 20px #0002;border-radius:7px;padding:11px 18px;font-size:13px;z-index:50}
@media(max-width:1250px){.prototype-badge{font-size:10px}.pulse-toolbar{gap:10px}.overlay-label{margin-left:0}.window-controls{flex-wrap:wrap}.navigator-zoom{margin-left:auto}.sequence-comparison .hint{display:none}}
@media(max-width:900px){.prototype-badge{display:none}body.incident-open #map-wrap{height:400px}.section-toggle{padding-inline:18px}.incident-heading,.pulse-heading{padding-inline:18px}.window-controls{padding-inline:18px}.navigator-container{margin-inline:18px}.navigator-footer{padding-inline:18px}.pulse-toolbar{padding-inline:18px}.pulse-state-key{flex-basis:100%}.overlay-label{margin-left:0}.sample-notice{padding-inline:18px}.sample-notice .hint{font-size:11px}.window-controls #window-date{display:none}}
@media(max-width:520px){body.incident-open #map-wrap{height:360px}.incident-toggle-help{display:none}.incident-toggle-help:not([hidden])+.icon{margin-left:auto}.max-duration{font-size:10px}.incident-heading h2{font-size:17px}.tractor-badge{font-size:10px}.incident-heading .hint{font-size:11px}.window-controls{gap:8px}.window-controls input{width:87px}.window-controls .window-arrow{display:none}.window-controls select{max-width:100px}.navigator-zoom{margin-left:0}.navigator-footer{font-size:9px}.navigator-footer span:last-child{display:none}.pulse-bottom{padding-inline:16px}.pulse-heading h2{font-size:17px}.pulse-toolbar{gap:10px}.pulse-help{padding-inline:16px}.pulse-toolbar button{margin-left:auto}.pulse-state-key{font-size:10px}.key-zero{margin-left:4px}.pulse-status{font-size:10px}.pulse-heading p{font-size:11px}.sequence-comparison{font-size:11px;gap:6px}.detail-metrics{gap:14px}}

.query-actions:empty{display:none}.sample-notice.loading #full-progress{display:block}.sample-notice .hint:empty{display:none}#cancel{font-size:12px}.pulse-message{font-size:12px;color:#9e4115;padding:0 22px 10px}#map-content>.detail-panel:has(.detail-metrics){align-items:flex-start}#map-points{z-index:1}.layer-controls,.zoom-controls,.map-tooltip{z-index:2}.north,.map-scale{z-index:2}.pending-filters{font-weight:400}

.filter-heading .request-status{grid-column:1/-1;display:flex;align-items:center;gap:10px;font-size:11px}.filter-heading .request-status:has(#query-progress:empty):has(#cancel[hidden]){display:none}.filter-heading #query-progress{margin:0;flex:1}.filter-heading #cancel{padding:4px 7px;min-height:26px}#navigator-caption{max-width:55%;text-align:right}
.header-account { display: flex; align-items: center; gap: 26px; }
#account { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 12px; }
#account[hidden] { display: none; }
#account button { border-color: #707070; background: transparent; color: white; padding: 4px 10px; }
.login-main { display: grid; place-items: start center; padding: 70px 20px; }
.login-card { width: min(100%, 430px); padding: 36px; background: white; border: 1px solid var(--border); border-radius: 10px; }
.login-card h2 { font-size: 28px; color: var(--charcoal); }
.login-intro { color: var(--muted); margin: 8px 0 26px; }
.login-card label { display: block; margin: 16px 0 6px; font-size: 14px; }
.login-card input { width: 100%; height: 44px; border: 1px solid #dcdcd4; border-radius: 5px; padding: 0 10px; background: white; }
.password-field { position: relative; }
.login-card .password-field input { padding-right: 72px; }
.password-toggle { position: absolute; top: 5px; right: 5px; bottom: 5px; min-width: 54px; padding: 0 10px; border: 0; background: transparent; color: #8e380e; }
.password-toggle:hover { background: var(--orange-wash); }
.login-card .primary { margin: 26px 0 16px; justify-content: center; }
.login-card > .hint { border-top: 1px solid var(--border); padding-top: 22px; margin-top: 22px; }
#login-status { margin-top: 18px; font-size: 14px; color: #8c3525; }
@media (max-width: 760px) { .header-account { gap: 10px; } #account-email { display: none; } .login-main { padding-top: 30px; } }