@font-face {
  font-family: 'Noto Sans Thai';
  src: url('../fonts/noto-sans-thai-regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans Thai';
  src: url('../fonts/noto-sans-thai-semibold.ttf') format('truetype');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans Thai';
  src: url('../fonts/noto-sans-thai-bold.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
:root{
  --navy:#252737;
  --ink:#252a3c;
  --cyan:#00afea;
  --pale:#e9f8fe;
  --muted:#5e6b7b;
  --line:#e1e7ec;
  --background:#f5f7f9;
  --white:#fff;
  --radius:16px;
  --font-body:"Noto Sans Thai",Arial,sans-serif;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
}
*{
  box-sizing:border-box
}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--background);
  font-size:15px;
  line-height:1.8;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
a{
  color:inherit;
  text-decoration:none
}
button,input{
  font:inherit
}
button,a,input,summary{
  touch-action:manipulation
}
button{
  cursor:pointer
}
button:disabled{
  cursor:wait;
  opacity:.6
}
img{
  max-width:100%
}
[hidden]{
  display:none!important
}
h1,h2,h3,p{
  margin:0
}
h1,h2,h3{
  line-height:1.5;
  font-weight:600;
  letter-spacing:normal;
  text-wrap:balance;
}
h2{
  font-size:23px
}
h3{
  font-size:21px
}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:3px solid #0085b8;
  outline-offset:4px
}
input{
  min-width:0
}
input:focus{
  outline:2px solid var(--cyan);
  outline-offset:2px
}
.shell{
  width:min(1160px,calc(100% - 64px));
  margin-inline:auto
}
.main-content{
  padding-block:var(--space-10) 64px;
  flex:1;
}
.text-link:hover{
  color:#007ca9
}
.eyebrow{
  font-family:Arial,sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:1.3px;
  color:var(--muted);
  line-height:1.5;
}
.hero{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  background:var(--navy);
  border-radius:var(--radius);
  overflow:hidden;
  color:white;
  min-height:455px
}
.hero-copy{
  padding:var(--space-12) var(--space-10);
  align-self:center;
}
.hero .eyebrow{
  color:#b9c4d6;
  display:flex;
  gap:9px;
  align-items:center
}
.status-dot{
  width:6px;
  height:6px;
  background:var(--cyan);
  border-radius:50%;
  display:inline-block
}
.hero h1{
  font-size:44px;
  line-height:1.5;
  margin-top:var(--space-6);
  letter-spacing:normal;
}
.hero h1 span{
  color:#38c8ff
}
.hero-description{
  color:#d1d6e0;
  font-size:16px;
  line-height:1.9;
  margin-top:var(--space-6);
  max-width:410px;
}
.hero-tags{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  margin-top:var(--space-6);
}
.hero-tags span{
  font-size:12px;
  border:1px solid #55596d;
  border-radius:40px;
  padding:6px var(--space-3);
  color:#e3e9f3;
  line-height:1.6;
}
.hero-guide{
  display:inline-block;
  margin-top:var(--space-6);
  font-size:14px;
  color:#74d7fc;
}
.hero-image{
  position:relative;
  overflow:hidden
}
.hero-image>img{
  height:100%;
  width:100%;
  object-fit:cover;
  object-position:center 45%;
  display:block
}
.image-caption{
  position:absolute;
  inset:auto 0 0;
  padding:var(--space-12) var(--space-6) var(--space-6);
  background:linear-gradient(transparent,rgba(17,23,40,.9))
}
.image-caption span{
  display:block;
  font:9px Arial,sans-serif;
  letter-spacing:1.5px;
  color:#d0dbe7
}
.image-caption strong{
  font-size:15px;
  display:block;
  margin-top:var(--space-2);
  font-weight:600;
  line-height:1.8;
}
.lookup-card{
  position:relative;
  margin:var(--space-6) 0 0;
  background:white;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--space-8);
  display:grid;
  grid-template-columns:minmax(280px,.9fr) minmax(0,1.5fr);
  gap:var(--space-3) var(--space-8);
  box-shadow:0 10px 35px #25354607;
}
.lookup-heading{
  display:flex;
  align-items:center;
  gap:var(--space-4);
}
.lookup-icon{
  width:45px;
  height:45px;
  border-radius:12px;
  background:var(--pale);
  color:#0085b7;
  font-size:34px;
  line-height:1.1;
  text-align:center;
  display:grid;
  place-items:center;
  flex-shrink:0;
}
.lookup-heading h2{
  font-size:22px;
  margin-top:var(--space-2);
}
.lookup-form{
  display:flex;
  gap:var(--space-3);
  align-items:end;
}
.lookup-form input{
  height:52px;
  background:#f8fafc;
  border:1px solid #d7e0e7;
  border-radius:8px;
  padding:0 var(--space-4);
  width:100%;
  font-size:15px
}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-3);
  min-height:48px;
  padding:var(--space-3) 20px;
  border-radius:8px;
  border:1px solid transparent;
  white-space:nowrap;
  font-weight:600;
  font-size:14px;
  line-height:1.65;
}
.button-primary{
  background:var(--cyan);
  color:#082c40
}
.button-primary:hover{
  background:#2cc4f8
}
.button-dark{
  background:var(--navy);
  color:white
}
.button-outline{
  border-color:#cfd9e1;
  background:white
}
.button-outline:hover{
  border-color:var(--cyan);
  color:#007ba8
}
.button-quiet{
  background:none;
  color:var(--muted);
  padding-inline:10px
}
.lookup-help{
  grid-column:2;
  font-size:12px;
  color:var(--muted);
  line-height:1.8;
  display:flex;
  flex-wrap:wrap;
  gap:4px var(--space-4);
  justify-content:space-between;
}
.lookup-card>.message{
  grid-column:1/-1
}
.lookup-compact{
  margin-top:0
}
.overview{
  margin-top:48px
}
.section-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
  margin:var(--space-8) 0 var(--space-6);
}
.section-heading h2{
  margin-top:var(--space-2);
}
.text-link{
  font-size:14px;
  font-weight:700
}
.feature-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-8);
}
.feature-grid article{
  border-top:2px solid #c8dce8;
  padding:23px 0
}
.feature-number{
  font:10px Arial,sans-serif;
  font-weight:700;
  letter-spacing:1.2px;
  color:#008aba;
  font-size:11px;
}
.feature-grid h3{
  margin-top:var(--space-4);
  font-size:21px;
}
.feature-grid p{
  color:var(--muted);
  margin-top:var(--space-3);
  font-size:15px;
  max-width:none;
  line-height:1.9;
}
.report-heading{
  display:flex;
  justify-content:space-between;
  gap:var(--space-6);
  align-items:center;
  margin-top:var(--space-10);
}
.report-heading h1{
  font-size:28px;
  margin:var(--space-2) 0;
  line-height:1.6;
}
.muted{
  font-size:13px;
  color:var(--muted);
  line-height:1.8;
}
.export-actions{
  display:flex;
  gap:9px
}
.range-form{
  display:flex;
  gap:var(--space-4);
  align-items:end;
  padding:var(--space-6) 0 var(--space-8);
  flex-wrap:wrap;
}
.range-form label{
  display:block;
  font-size:13px;
  margin-bottom:var(--space-2);
  color:var(--muted);
  font-weight:600;
}
.range-form input{
  height:48px;
  border:1px solid #d7e0e7;
  border-radius:7px;
  background:white;
  padding:var(--space-2) var(--space-3);
  color:var(--ink);
  font-size:14px;
}
.range-dash{
  padding-bottom:13px;
  color:#97a4b1;
}
.message{
  padding:15px 19px;
  border-radius:8px
}
.message-error{
  background:#fff0ec;
  color:#9b3528;
  border:1px solid #f0c7bd;
  font-size:14px
}
.loading-state{
  padding:70px 20px;
  text-align:center;
  color:var(--muted);
  font-size:15px
}
.spinner{
  display:inline-block;
  width:17px;
  height:17px;
  border:2px solid #c6e2f0;
  border-top-color:#008fbe;
  border-radius:50%;
  vertical-align:middle;
  margin-right:10px;
  animation:spin .8s linear infinite
}
@keyframes spin{
  to{
    transform:rotate(360deg)
  }
}
.day-list{
  display:flex;
  gap:var(--space-2);
  overflow-x:auto;
  padding:5px 3px 13px;
  scrollbar-width:thin
}
.day-button{
  border:1px solid var(--line);
  background:white;
  border-radius:10px;
  min-width:108px;
  padding:var(--space-3) var(--space-4);
  text-align:left;
  line-height:1.6;
}
.day-button strong{
  display:block;
  font-size:15px;
  font-weight:600;
}
.day-button span{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-top:4px;
}
.day-button[aria-pressed=true]{
  border-color:var(--navy);
  background:var(--navy);
  color:white
}
.day-button[aria-pressed=true] span{
  color:#b9e5f9
}
.report-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
  margin:var(--space-2) 0 var(--space-6);
  flex-wrap:wrap;
}
.type-filters{
  display:flex;
  gap:var(--space-2);
  flex-wrap:wrap;
}
.filter-button{
  background:transparent;
  border:1px solid var(--line);
  border-radius:30px;
  padding:6px 14px;
  color:var(--muted);
  font-size:13px;
  min-height:40px;
}
.filter-button[aria-pressed=true]{
  background:var(--pale);
  border-color:#8bd7f4;
  color:#006f99
}
.filter-button small{
  margin-left:var(--space-2);
  opacity:.8;
  font:10px Arial,sans-serif;
  font-size:11px;
}
.report-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:var(--space-6);
  align-items:stretch;
}
.panel{
  border:1px solid var(--line);
  border-radius:12px;
  background:white;
  overflow:hidden
}
.panel-heading{
  padding:16px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--space-3);
  border-bottom:1px solid var(--line);
  min-height:76px;
}
.panel-heading h2{
  font-size:18px;
  margin-top:4px;
}
.panel-heading .eyebrow{
  font-size:10px;
  letter-spacing:1.2px;
}
.map-indicator{
  font:700 10px Arial,sans-serif;
  background:var(--pale);
  color:#007ba8;
  border-radius:5px;
  padding:6px 8px
}
.report-map{
  height:340px;
  background:#eef3f6;
  display:flex;
  align-items:center;
  justify-content:center
}
.map-message{
  padding:var(--space-8);
  max-width:370px;
  text-align:center;
  font-size:14px;
  color:var(--muted);
  line-height:1.9;
}
.map-message strong{
  display:block;
  font-size:17px;
  color:var(--ink);
  margin-bottom:10px
}
.panel-note{
  padding:var(--space-4) var(--space-6);
  font-size:12px;
  color:var(--muted);
  line-height:1.8;
}
.timeline{
  position:relative;
  height:394px;
  overflow-y:auto;
  padding:0 12px;
  scrollbar-width:thin;
}
.event{
  position:relative;
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  gap:10px;
  padding:12px 10px;
  margin:6px 0;
  border:1px solid transparent;
  border-bottom-color:#edf0f4;
  border-radius:8px;
}
.event:hover{background:#f7fafc}
.event.is-selected{background:#f0faff;border-color:#a9def0}
.event-select{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  border-radius:8px;
  background:transparent;
  z-index:1;
}
.event-select:focus-visible{outline:2px solid #008fc2;outline-offset:-2px}
.event-marker{
  width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  background:#f0f3f7;border-radius:8px;
  font:700 10px Arial,sans-serif;color:#68788a;
}
.event.start .event-marker{background:#e6f6ef;color:#217153}
.event.end .event-marker{background:#fff2e7;color:#925828}
.event.patrol .event-marker{background:var(--pale);color:#007fae}
.event-content{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;align-items:start}
.event-heading{display:contents}
.event-title{grid-column:1;grid-row:1;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.event-heading h3{font-size:15px;font-weight:600}
.event-meta{grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.event-time{font:700 13px Arial,sans-serif;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.event-time small{font:11px var(--font-body);color:var(--muted);margin-left:5px}
.event-location-link{font-size:12px;color:#007fae;white-space:nowrap;text-underline-offset:3px}
.event-meta .no-gps{font-size:11px;color:var(--muted)}
.event-location{grid-column:1;grid-row:2;font-size:13px;margin-top:3px;overflow-wrap:anywhere;line-height:1.7}
.event-status{display:inline-block;font-size:10px;border-radius:4px;padding:1px 5px;background:#f1f3f6;color:#657182;line-height:1.8}
.event-status.failed{background:#fff0ec;color:#9b3528}
.event-memo{grid-column:1 / -1;font-size:12px;color:#566475;margin-top:3px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.event-actions{grid-column:1 / -1;display:flex;gap:12px;margin-top:4px;flex-wrap:wrap;align-items:start}
.event-actions button{font:600 12px/1.8 var(--font-body);background:none;border:0;padding:3px 0;color:#007fae;text-decoration:underline;text-underline-offset:3px}
.event a,.event button:not(.event-select),.event details{position:relative;z-index:2}
.event details{font-size:12px;color:var(--muted);line-height:1.8}
.event details[open]{flex-basis:100%}
.event details summary{cursor:pointer;padding:3px 0}
.event details dl{display:grid;grid-template-columns:72px minmax(0,1fr);gap:5px 10px;margin:6px 0 0;padding:10px;background:#f7fafc;border-radius:6px}
.event dt,.event dd{margin:0;overflow-wrap:anywhere}
.playback-panel{position:relative;margin-top:20px;padding:18px 24px}
.playback-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.playback-heading h2{font-size:18px;margin-top:3px}
.playback-heading .eyebrow{font-size:10px;letter-spacing:1.2px}
.playback-controls{display:flex;align-items:center;gap:6px}
.playback-zoom{display:flex;padding:3px;background:#f0f4f7;border-radius:8px;margin-right:6px}
.playback-zoom button{border:0;border-radius:6px;padding:5px 12px;background:transparent;font-size:12px;color:var(--muted);white-space:nowrap}
.playback-zoom button[aria-pressed=true]{background:white;color:#007ba8;box-shadow:0 1px 4px #1e3d5520;font-weight:600}
.playback-step{width:34px;height:34px;border:1px solid var(--line);border-radius:8px;background:white;color:#007fae;font-size:18px}
.playback-step:hover:not(:disabled){background:var(--pale)}
.playback-step:disabled{opacity:.35;cursor:default}
.playback-window-row{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:14px;color:var(--muted);font-size:12px;flex-wrap:wrap}
.playback-axis{position:relative;height:117px;margin:4px 14px 0;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.playback-axis.is-panning,.playback-axis.is-panning *{cursor:grabbing}
.playback-axis:focus-visible{outline:2px solid #008fc2;outline-offset:4px;border-radius:6px}
.playback-rule{position:absolute;top:78px;left:0;right:0;border-top:2px solid #dce6ed;pointer-events:none}
.time-mark{position:absolute;top:69px;height:10px;border-left:1px solid #d5dfe6;pointer-events:none}
.time-mark.major{top:60px;height:19px;border-color:#bbcbd7}
.time-mark.midnight{top:20px;height:75px;border-left:1px dashed #6fa8bc}
.time-label{position:absolute;top:-31px;left:0;transform:translateX(-50%);font:11px/1.5 Arial,sans-serif;color:#566475;white-space:nowrap}
.midnight .time-label{top:9px;color:#007ba8;font-weight:700}
.time-label.align-start{transform:none}
.time-label.align-end{transform:translateX(-100%)}
.time-date{position:absolute;top:-16px;left:0;transform:translateX(-50%);font:600 11px/1.5 var(--font-body);color:#007ba8;white-space:nowrap}
.playback-point{position:absolute;top:79px;transform:translate(-50%,-50%);width:32px;height:36px;display:grid;place-items:center;border:0;background:transparent;z-index:2;padding:0;touch-action:pan-y}
.playback-point::before{content:'';width:10px;height:10px;background:var(--record-color);border:2px solid white;border-radius:50%}
.playback-point.no-gps::before{background:white;border-color:var(--record-color)}
.playback-point[aria-pressed=true]::before{width:14px;height:14px;box-shadow:0 0 0 3px #008fc233}
.playback-point.is-cluster{height:28px;width:32px;border-radius:14px;border:2px solid white;background:#e8eff4;color:#374d61;font:600 11px var(--font-body);box-shadow:0 0 0 1px #c9d6df}
.playback-point.is-cluster::before{content:none}
.playback-point.is-cluster[aria-pressed=true]{background:#008fc2;color:white;box-shadow:0 0 0 3px #008fc233}
.playback-point:focus-visible{outline:2px solid #008fc2;outline-offset:2px;border-radius:50%}
.playback-cursor{position:absolute;top:52px;bottom:9px;border-left:1px solid #008fc2;pointer-events:none}
.playback-selection{border-top:1px solid #edf1f4;padding-top:10px;min-height:52px}
.playback-selection strong{display:block;font-size:13px;font-weight:600}
.playback-selection .muted{display:block;font-size:12px;margin-top:2px;overflow-wrap:anywhere}
.playback-hint{font-size:11px;color:var(--muted)}
.playback-window-empty{font-size:12px;color:var(--muted);text-align:center;margin:-18px 0 10px;pointer-events:none}
.playback-cluster{position:absolute;z-index:5;right:20px;bottom:18px;width:min(400px,calc(100% - 40px));max-height:260px;overflow:auto;background:white;border:1px solid #cbdce5;border-radius:10px;padding:8px;box-shadow:0 8px 30px #1c3f5926}
.cluster-heading{display:flex;justify-content:space-between;align-items:center;padding:0 8px 6px;font-size:13px}
.cluster-close{border:0;background:transparent;font-size:22px;color:var(--muted);padding:0 5px}
.cluster-record{display:block;width:100%;text-align:left;padding:8px;border:0;border-radius:5px;background:white;color:var(--ink);font:12px/1.7 var(--font-body)}
.cluster-record:hover,.cluster-record[aria-pressed=true]{background:var(--pale)}
#security-tracker .range-form{padding:18px 0 16px}
#report-result>.section-heading{margin:10px 0 14px}
#report-result>.section-heading h2{margin:0}
.empty-state{
  padding:45px 25px;
  color:var(--muted);
  text-align:center;
  font-size:14px
}
.evidence-dialog{
  border:0;
  border-radius:14px;
  padding:var(--space-8);
  width:min(720px,calc(100% - 32px));
  max-height:90vh;
  color:var(--ink);
  box-shadow:0 24px 100px #10192d50;
}
.evidence-dialog::backdrop{
  background:#1b223abb
}
.dialog-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px
}
.dialog-heading h2{
  margin-top:7px
}
.dialog-close{
  border:0;
  border-radius:8px;
  width:40px;
  height:40px;
  background:#edf2f6;
  font-size:27px;
  line-height:1
}
.evidence-dialog>p{
  margin-top:12px
}
.evidence-content{
  padding-top:20px;
  text-align:center;
  min-height:100px
}
.evidence-content img{
  max-height:65vh;
  object-fit:contain
}
.guide{
  max-width:850px
}
.guide>.eyebrow{
  margin-top:42px
}
.guide h1{
  font-size:38px;
  margin-top:var(--space-6);
  line-height:1.6;
}
.guide-intro{
  font-size:16px;
  color:var(--muted);
  margin:var(--space-6) 0 var(--space-10);
  line-height:1.9;
  max-width:65ch;
}
.guide-steps article{
  padding:var(--space-8) 0;
  border-top:1px solid var(--line);
}
.guide-steps h2{
  margin-top:var(--space-4);
}
.guide-steps p{
  font-size:15px;
  color:#5c6878;
  margin-top:var(--space-4);
  line-height:1.95;
}
.help-card{
  background:var(--navy);
  color:white;
  border-radius:14px;
  padding:30px;
  display:flex;
  gap:25px;
  justify-content:space-between;
  align-items:center;
  margin-top:25px
}
.help-card p{
  font-size:13px;
  margin-top:10px;
  color:#c0c8d7;
  line-height:1.8;
}
.sr-only,.skip-link:not(:focus){
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.skip-link:focus{
  position:fixed;
  z-index:100;
  top:8px;
  left:8px;
  padding:var(--space-3);
  background:white
}
@media(max-width:1000px){
  .shell{
    width:calc(100% - 40px)
  }
  .hero-copy{
    padding:var(--space-8);
  }
  .hero h1{
    font-size:36px;
  }
  .hero-description{
    font-size:15px;
  }
  .hero-tags span{
    font-size:12px;
  }
  .lookup-card{
    grid-template-columns:1fr;
    padding:28px;
    gap:var(--space-4);
  }
  .lookup-form{
    margin-top:8px
  }
  .lookup-help{
    grid-column:1
  }
  .hero-guide{
    margin-top:var(--space-6);
  }
  .report-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  }
  .panel-heading{
    padding:20px;
  }
  .panel-heading h2{
    font-size:18px;
  }
}
@media(max-width:700px){
  .shell{
    width:calc(100% - 32px)
  }
  .main-content{
    padding-block:var(--space-6) var(--space-12);
  }
  .hero{
    grid-template-columns:1fr;
    min-height:0
  }
  .hero-copy{
    padding:var(--space-8) var(--space-6);
  }
  .hero h1{
    font-size:34px;
    margin-top:20px;
    line-height:1.5;
  }
  .hero-image{
    height:240px
  }
  .hero-image>img{
    object-position:center 42%
  }
  .image-caption{
    padding:45px 20px 16px
  }
  .hero-description{
    font-size:15px;
    margin-top:20px;
    line-height:1.9;
  }
  .hero-tags{
    margin-top:20px;
  }
  .hero-guide{
    margin-top:var(--space-6);
  }
  .lookup-card{
    margin-top:var(--space-6);
    padding:var(--space-6);
    gap:var(--space-4);
  }
  .lookup-heading h2{
    font-size:20px
  }
  .lookup-heading .eyebrow{
    font-size:10px;
  }
  .lookup-icon{
    width:38px;
    height:38px;
    font-size:29px
  }
  .lookup-form{
    flex-direction:column;
    align-items:stretch;
    margin-top:0;
    gap:var(--space-3);
  }
  .lookup-form input{
    height:50px;
  }
  .lookup-form .button{
    min-height:50px;
  }
  .lookup-help{
    font-size:12px;
    gap:6px;
  }
  .feature-grid{
    grid-template-columns:1fr;
    gap:0;
  }
  .feature-grid article{
    padding:var(--space-6) 0;
  }
  .feature-grid p{
    max-width:none
  }
  .overview{
    margin-top:var(--space-10);
  }
  .section-heading{
    align-items:start;
    flex-wrap:wrap;
    gap:var(--space-2);
    margin:28px 0 20px;
  }
  .section-heading h2{
    font-size:21px
  }
  .section-heading>.muted{
    font-size:12px;
    padding-top:0;
  }
  .section-heading .eyebrow{
    font-size:10px;
  }
  .text-link{
    font-size:13px;
  }
  .lookup-compact{
    margin-top:0
  }
  .report-heading{
    margin-top:var(--space-8);
    align-items:start;
    flex-wrap:wrap;
    gap:var(--space-4);
  }
  .report-heading h1{
    font-size:24px;
  }
  .export-actions .button{
    font-size:13px;
    min-height:44px;
    padding:10px var(--space-4);
  }
  .range-form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--space-4) var(--space-3);
    padding-block:var(--space-6);
  }
  .range-form>div{
    min-width:0
  }
  .range-form input{
    width:100%;
    font-size:14px;
    padding-inline:10px;
  }
  .range-dash{
    display:none
  }
  .range-form .button{
    padding-inline:10px;
    font-size:13px;
  }
  .day-button{
    min-width:100px;
    padding:var(--space-3) 14px;
  }
  .report-grid{
    grid-template-columns:1fr
  }
  .report-map{
    height:260px
  }
  .timeline{height:360px}
  .report-toolbar{
    gap:var(--space-3);
    margin-top:var(--space-2);
  }
  .filter-button{
    font-size:12px;
    padding-inline:var(--space-3);
  }
  .guide h1{
    font-size:30px;
  }
  .guide>.eyebrow{
    margin-top:30px
  }
  .guide-intro{
    font-size:15px
  }
  .help-card{
    flex-direction:column;
    align-items:stretch;
    padding:24px
  }
  .help-card h2{
    font-size:20px
  }
}
@media(prefers-reduced-motion:reduce){
  .spinner{
    animation:none
  }
  *{
    scroll-behavior:auto!important
  }
}
.lookup-field {
  flex: 1;
  min-width: 0;
}
.lookup-field label {
  display: block;
  margin-bottom:var(--space-2);
  font-size: 13px;
  font-weight: 600;
}
.lookup-form .button {
  min-height: 52px;
}
.lookup-window {
  white-space: nowrap;
}
.lookup-icon svg {
  width: 22px;
  height: 22px;
}
@media (max-width: 700px) {
  .lookup-field {
    width: 100%;
    flex: none;
  }
  .lookup-help {
    flex-direction: column;
  }
  .event{grid-template-columns:28px minmax(0,1fr);gap:8px;padding:12px 6px}
  .event-marker{width:28px;height:28px}
  .event-heading h3{font-size:14px}
  .event-status{font-size:9px}
  .playback-panel{padding:18px 16px}
  .playback-heading h2{font-size:16px}
  .playback-heading{gap:10px}
  .playback-controls{width:100%;justify-content:flex-end}
  .playback-zoom{margin-right:auto}
  .playback-window-row{margin-top:10px;gap:3px}
  .playback-axis{margin-inline:10px}
  .playback-point{height:44px}
  .playback-point.is-cluster{height:28px}
  .playback-selection strong{font-size:12px}
  .evidence-dialog {
    padding:var(--space-6);
  }
}

.nowrap { white-space: nowrap; }