*{box-sizing:border-box}html{background:#f5f7fb;color:#0b1734;font-family:Arial,Helvetica,sans-serif}body{margin:0;min-height:100vh;background:#f5f7fb}.skip-link{position:absolute;left:-999px;top:8px}.skip-link:focus{left:12px;z-index:100;background:#fff;padding:10px;border-radius:8px}.emergency-header{height:74px;padding:0 clamp(18px,4vw,56px);display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid rgba(3,17,47,.09);position:sticky;top:0;z-index:20}.brand img{display:block;width:190px;height:auto}.connection-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border-radius:999px;background:#eef2f7;font-size:12px;color:#43506b}.connection-pill span{width:8px;height:8px;border-radius:50%;background:#8b95a6}.connection-pill.online{background:#e9f7ef;color:#135f36}.connection-pill.online span{background:#23a35a}.connection-pill.offline{background:#fff2e8;color:#8b3d06}.connection-pill.offline span{background:#e06a12}.emergency-hero{background:#03112f;color:#fff;padding:clamp(46px,7vw,96px) clamp(20px,7vw,100px);position:relative;overflow:hidden}.emergency-hero:after{content:"";position:absolute;width:360px;height:360px;border:70px solid rgba(255,199,0,.12);border-radius:50%;right:-150px;top:-120px}.eyebrow{font-size:12px;letter-spacing:.16em;font-weight:800;color:#ffc700;margin:0 0 16px}.eyebrow.dark{color:#123a8a}.emergency-hero h1{max-width:850px;font-size:clamp(38px,6vw,78px);line-height:.98;letter-spacing:-.045em;margin:0}.lead{max-width:780px;font-size:clamp(16px,2vw,20px);line-height:1.6;color:#d7dfef;margin:24px 0 0}.critical-callout{max-width:820px;margin-top:34px;padding:15px 16px 15px 20px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);border-radius:16px;display:flex;align-items:center;justify-content:space-between;gap:16px}.critical-callout div{display:flex;flex-direction:column;gap:3px}.critical-callout strong{font-size:15px}.critical-callout span{font-size:13px;color:#c6d0e3}.critical-callout a,.call-911,.offline-fallback a{background:#e61e25;color:#fff;text-decoration:none;font-weight:800;border-radius:10px;padding:12px 18px;white-space:nowrap}.agency-picker,.report-panel,.active-report,.offline-guide{max-width:1180px;margin:0 auto;padding:clamp(44px,6vw,78px) clamp(18px,4vw,40px)}.section-heading p,.active-report-head p{margin:0 0 7px;color:#6c7890;font-size:11px;font-weight:800;letter-spacing:.15em}.section-heading h2,.active-report-head h2,.offline-guide h2{font-size:clamp(28px,4vw,46px);letter-spacing:-.035em;margin:0}.agency-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px}.agency-card{text-align:left;border:1px solid #dce3ed;border-radius:20px;background:#fff;padding:22px;display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;cursor:pointer;box-shadow:0 10px 30px rgba(8,22,52,.04);transition:.2s transform,.2s border-color,.2s box-shadow;color:inherit}.agency-card:hover,.agency-card.selected{transform:translateY(-2px);border-color:#1e63e9;box-shadow:0 18px 40px rgba(8,22,52,.09)}.agency-card.mdrrmo:hover,.agency-card.mdrrmo.selected{border-color:#e61e25}.agency-icon{width:58px;height:58px;border-radius:16px;background:#eaf1ff;color:#0d3b9e;display:grid;place-items:center;font-weight:900}.mdrrmo .agency-icon{background:#fff0ef;color:#b2141b}.agency-card strong{display:block;font-size:21px}.agency-card small{display:block;color:#66728a;line-height:1.5;margin-top:5px;font-size:13px}.agency-card b{font-size:12px;color:#0d3b9e}.mdrrmo b{color:#b2141b}.report-panel{padding-top:0}.location-card{margin-top:28px;background:#071f4e;color:#fff;border-radius:18px;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:18px}.location-copy{display:flex;align-items:center;gap:13px}.location-mark{font-size:30px;color:#ffc700}.location-copy strong,.location-copy small{display:block}.location-copy small{color:#bdc9df;font-size:12px;margin-top:4px}.location-card.captured{background:#0f5835}.location-card.failed{background:#66420b}.location-card button{border:0;border-radius:10px;background:#fff;color:#071f4e;font-weight:800;padding:12px 15px;cursor:pointer}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}.field{display:flex;flex-direction:column;gap:8px}.field.full{grid-column:1/-1}.field span{font-size:12px;font-weight:800;color:#34415a}.field input,.field select,.field textarea{width:100%;font:inherit;color:#0b1734;background:#fff;border:1px solid #cfd7e4;border-radius:12px;padding:14px;min-height:48px;outline:none}.field textarea{resize:vertical;line-height:1.5}.field input:focus,.field select:focus,.field textarea:focus{border-color:#1e63e9;box-shadow:0 0 0 3px rgba(30,99,233,.1)}.contact-details{margin-top:20px;border:1px solid #dce3ed;background:#fff;border-radius:14px;padding:14px 16px}.contact-details summary{font-weight:800;cursor:pointer}.contact-grid{margin-top:16px}.delivery-rule{margin-top:22px;border-left:4px solid #ffc700;background:#fff8d9;padding:16px 18px}.delivery-rule strong{display:block}.delivery-rule p{margin:6px 0 0;color:#655c34;font-size:13px;line-height:1.5}.form-actions{display:flex;align-items:center;gap:12px;margin-top:24px}.submit-report{border:0;border-radius:12px;background:#0d3b9e;color:#fff;font-weight:900;font-size:15px;padding:15px 22px;cursor:pointer}.submit-report[disabled]{opacity:.55;cursor:wait}.call-911{font-size:14px}.form-error{background:#fff0f1;color:#9d1820;border:1px solid #f1c1c5;padding:12px 14px;border-radius:10px}.active-report{padding-top:44px}.active-report-head{display:flex;align-items:flex-end;justify-content:space-between;gap:15px}.active-report-head button,.chat-heading button,.active-report #newReportBtn{border:1px solid #ccd5e3;background:#fff;color:#1b2b4a;border-radius:10px;padding:10px 13px;font-weight:800;cursor:pointer}.status-card{margin-top:24px;padding:18px;border-radius:16px;background:#fff2e8;border:1px solid #f0d1bc;display:flex;align-items:center;gap:13px}.status-dot{width:14px;height:14px;border-radius:50%;background:#e06a12;box-shadow:0 0 0 5px rgba(224,106,18,.12)}.status-card.received,.status-card.acknowledged,.status-card.assigned,.status-card.dispatched,.status-card.en_route,.status-card.on_scene{background:#eaf2ff;border-color:#bed3f8}.status-card.received .status-dot,.status-card.acknowledged .status-dot,.status-card.assigned .status-dot,.status-card.dispatched .status-dot,.status-card.en_route .status-dot,.status-card.on_scene .status-dot{background:#1e63e9;box-shadow:0 0 0 5px rgba(30,99,233,.12)}.status-card.resolved,.status-card.closed{background:#eaf7ef;border-color:#bfdfcb}.status-card.resolved .status-dot,.status-card.closed .status-dot{background:#209b53;box-shadow:0 0 0 5px rgba(32,155,83,.12)}.status-card strong,.status-card small{display:block}.status-card small{margin-top:3px;color:#56657d}.report-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}.report-meta div{background:#fff;border:1px solid #dfe5ed;border-radius:12px;padding:14px}.report-meta span{display:block;color:#7a8597;font-size:10px;text-transform:uppercase;letter-spacing:.1em}.report-meta strong{display:block;margin-top:6px;font-size:13px;word-break:break-word}.chat-card{margin-top:20px;background:#fff;border:1px solid #dce3ed;border-radius:18px;overflow:hidden}.chat-heading{padding:16px 18px;border-bottom:1px solid #e4e9f0;display:flex;align-items:center;justify-content:space-between}.chat-heading strong,.chat-heading small{display:block}.chat-heading small{color:#7a8597;margin-top:3px}.messages{min-height:160px;max-height:390px;overflow:auto;padding:18px;display:flex;flex-direction:column;gap:10px;background:#f7f9fc}.message{max-width:78%;padding:11px 13px;border-radius:13px;background:#fff;border:1px solid #dfe5ed}.message.resident{align-self:flex-end;background:#0d3b9e;color:#fff;border-color:#0d3b9e}.message.agency{align-self:flex-start;background:#eaf2ff;border-color:#c8d9fa}.message.system{align-self:center;background:#fff8d9;border-color:#eedf9e;max-width:90%}.message small{display:block;margin-top:5px;opacity:.7;font-size:10px}.message-form{padding:15px 18px}.message-form>label{display:block;font-weight:800;font-size:12px;margin-bottom:8px}.message-form>div{display:grid;grid-template-columns:1fr auto;gap:10px}.message-form textarea{border:1px solid #ccd5e3;border-radius:10px;padding:11px;font:inherit;resize:vertical}.message-form button{border:0;border-radius:10px;background:#0d3b9e;color:#fff;font-weight:800;padding:0 18px}.message-form>small{display:block;color:#788399;margin-top:7px}.offline-fallback{margin-top:20px;background:#fff;border:1px solid #dce3ed;border-radius:16px;padding:18px;display:flex;align-items:center;justify-content:space-between;gap:20px}.offline-fallback p{margin:5px 0 0;color:#66728a;line-height:1.5;font-size:13px}.offline-guide{border-top:1px solid #dce3ed}.offline-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px}.offline-grid article{background:#fff;border:1px solid #dce3ed;border-radius:14px;padding:18px}.offline-grid p{color:#69758b;line-height:1.5;font-size:13px;margin:7px 0 0}footer{max-width:1180px;margin:0 auto;padding:26px 40px 42px;display:flex;justify-content:space-between;color:#7b8699;font-size:12px}footer a{color:#0d3b9e;font-weight:800;text-decoration:none}

/* ==========================================================================
   Resident interface — approved design pass.

   Mobile-first, light surfaces on a soft ground, and nothing that delays the
   first tap: no entrance animation, no decorative motion, no gradient work.
   Every control a person reaches for under pressure has a 64px floor and a
   visible focus ring, and the 911 route is present on every screen state.
   ========================================================================== */

.screen-title{
  max-width:1180px;margin:0 auto;
  padding:clamp(20px,5vw,34px) clamp(18px,4vw,40px) 0;
  font-size:clamp(26px,5.2vw,38px);line-height:1.1;letter-spacing:-.035em;
}

/* The 911 callout is no longer inside a dark hero, so it carries its own
   ground. It stays above the form on every width. */
.critical-callout{
  max-width:1180px;margin:16px auto 0;
  padding:14px 16px;border-radius:16px;
  border:1px solid #f3c9cb;background:#fff5f5;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;
}
.critical-callout strong{color:#9d1820}
.critical-callout span{color:#7c5b5d;font-size:13px}

.step-title{
  font-size:clamp(17px,2.6vw,21px);letter-spacing:-.015em;
  margin:0 0 14px;
}
.report-panel .step-title{margin-top:30px}
.report-panel .step-title:first-of-type{margin-top:0}

/* --- section 1: who do you need ----------------------------------------- */

.agency-card{
  /* Reset the old three-column row into a tap card. */
  grid-template-columns:1fr;justify-items:center;text-align:center;
  gap:10px;padding:20px 16px;min-height:132px;
}
.agency-icon{width:52px;height:52px;border-radius:15px}
.agency-icon svg{width:28px;height:28px}
.agency-name{font-size:20px;font-weight:900;letter-spacing:.02em;line-height:1}
.agency-role{font-size:12.5px;color:#66728a;line-height:1.4}
.agency-card.selected{border-width:2px}
.agency-card.pnp.selected{background:#f5f8ff}
.agency-card.mdrrmo.selected{background:#fff7f7}
.agency-card:focus-visible,.mode-card:focus-visible{outline:3px solid #ffc700;outline-offset:2px}

/* --- section 2: emergency or assistance --------------------------------- */

.mode-picker{max-width:1180px;margin:0 auto;padding:0 clamp(18px,4vw,40px) 8px}
.mode-grid{display:grid;gap:12px}
@media(min-width:620px){.mode-grid{grid-template-columns:1fr 1fr}}

.mode-card{
  display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px;
  text-align:left;min-height:64px;padding:16px 18px;font:inherit;color:inherit;
  border:1px solid #dce3ed;border-radius:16px;background:#fff;cursor:pointer;
}
.mode-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none}
.mode-icon svg{width:22px;height:22px}
.mode-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.mode-body strong{font-size:15px;letter-spacing:.06em}
.mode-body small{font-size:12.5px;color:#66728a;line-height:1.45}

.mode-card.emergency .mode-icon{background:#fdeced;color:#c2151c}
.mode-card.emergency .mode-body strong{color:#c2151c}
.mode-card.emergency.selected{border-color:#e61e25;border-width:2px;background:#fff7f7}
.mode-card.assistance .mode-icon{background:#eaf1ff;color:#0d3b9e}
.mode-card.assistance .mode-body strong{color:#0d3b9e}
.mode-card.assistance.selected{border-color:#1e63e9;border-width:2px;background:#f5f8ff}

.mode-note{margin:12px 0 0;font-size:13px;line-height:1.5;color:#66728a}

/* --- section 4: location ------------------------------------------------ */

.location-card{display:block;padding:16px 18px}
.location-head{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.location-mark{color:#ffc700;display:grid;place-items:center;flex:none}
.location-mark svg{width:26px;height:26px}
.location-text{flex:1 1 200px;min-width:0}
.location-text strong,.location-text small{display:block}
.location-text small{color:#bdc9df;font-size:12px;margin-top:4px;line-height:1.45}
.location-card.captured .location-text small{color:#c8e6d3}
.location-card button{min-height:48px}
.manual-hint{margin:18px 0 0;font-size:13px;color:#66728a;line-height:1.5}

/* --- section 5: live location, strictly opt-in -------------------------- */

.live-share{margin-top:15px;padding-top:14px;border-top:1px solid rgba(255,255,255,.16)}
.live-toggle{display:flex;gap:11px;align-items:flex-start;cursor:pointer;min-height:44px}
.live-toggle input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:#ffc700}
.live-toggle-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.live-toggle-body strong{font-size:14px}
.live-toggle-body small{font-size:12px;color:#bdc9df;line-height:1.45}

.live-state{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:13px}
.live-badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 11px;border-radius:999px;background:#0f5835;color:#8ff0bb;
  font-size:11px;font-weight:900;letter-spacing:.08em;
}
/* Paired with a text label, never colour alone: a frozen feed says so in
   words as well as in hue. */
.live-badge.stale{background:#66420b;color:#ffd894}
.live-detail{font-size:12px;color:#bdc9df}
.live-state button{
  margin-left:auto;border:1px solid rgba(255,255,255,.4);background:transparent;
  color:#fff;border-radius:10px;padding:9px 13px;font-weight:800;cursor:pointer;
  min-height:40px;
}

/* --- section 6: primary actions ----------------------------------------- */

.form-actions{display:grid;gap:11px;margin-top:26px}
@media(min-width:620px){.form-actions{grid-template-columns:1fr 1fr;align-items:stretch}}
.call-911{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:56px;font-size:15px;letter-spacing:.04em;border-radius:12px;
}
.call-911 span{display:grid;place-items:center}
.call-911 svg{width:19px;height:19px}
.submit-report{min-height:56px;font-size:15px;letter-spacing:.04em;width:100%}

/* --- the delivery rail -------------------------------------------------- */

/* Server receipt and agency acknowledgement are separate rows and never
   collapse into one. "Received" is the server accepting the report; it is not
   a person having read it, and the rail says which is which in words. */
.status-rail{
  list-style:none;margin:16px 0 0;padding:0 0 0 4px;
  display:grid;gap:0;
}
.rail-step{display:grid;grid-template-columns:auto 1fr;gap:14px;position:relative;padding-bottom:16px}
.rail-step:last-child{padding-bottom:0}
/* The connecting line stops at the last node rather than trailing off. */
.rail-step:not(:last-child)::before{
  content:"";position:absolute;left:8px;top:20px;bottom:0;width:2px;background:#dfe5ed;
}
.rail-step.is-done:not(:last-child)::before{background:#9fc3a9}
.rail-mark{
  width:18px;height:18px;border-radius:50%;background:#fff;
  border:2px solid #cfd7e4;margin-top:1px;z-index:1;display:grid;place-items:center;
}
.rail-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.rail-name{font-size:13px;font-weight:800;color:#8a94a8;letter-spacing:.03em}
.rail-what{font-size:12px;color:#8a94a8;line-height:1.45}

.rail-step.is-done .rail-mark{background:#209b53;border-color:#209b53}
.rail-step.is-done .rail-name{color:#1b5e35}
.rail-step.is-done .rail-what{color:#5f7a68}

.rail-step.is-current .rail-mark{border-color:#1e63e9;box-shadow:0 0 0 4px rgba(30,99,233,.14)}
.rail-step.is-current .rail-name{color:#0d3b9e}
.rail-step.is-current .rail-what{color:#4a5a78}

/* The one state that must never read as progress. Offline is a warning, not
   a step forward, and it is coloured and worded as one. */
.rail-step.is-offline .rail-mark{background:#e06a12;border-color:#e06a12}
.rail-step.is-offline .rail-name{color:#8b3d06}
.rail-step.is-offline .rail-what{color:#8b5b32}

/* --- messages ----------------------------------------------------------- */

.message.queued{opacity:.82}
.message .queued-tag{
  display:inline-block;margin-top:5px;padding:2px 7px;border-radius:999px;
  background:rgba(255,255,255,.22);font-size:10px;font-weight:800;letter-spacing:.06em;
}

/* --- phones ------------------------------------------------------------- */

@media(max-width:619px){
  .agency-grid{gap:12px}
  .field-grid{grid-template-columns:1fr;gap:14px}
  .report-meta{grid-template-columns:1fr 1fr}
  .critical-callout{flex-direction:column;align-items:stretch}
  .critical-callout a{text-align:center}
  .active-report-head{flex-direction:column;align-items:stretch;gap:12px}
  footer{flex-direction:column;gap:8px;padding:26px 20px 40px}
}

/* 16px floor on every control: iOS Safari zooms the viewport on focus for
   anything smaller, which on this page means the emergency form jumps under
   the reader's thumb. */
.field input,.field select,.field textarea,.message-form textarea{font-size:16px}

/* --- motion ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce){
  .agency-card{transition:none}
  .agency-card:hover,.agency-card.selected{transform:none}
}

/* --- whether anybody is actually receiving this -------------------------

   Sized and coloured as a warning, not a footnote. A person deciding whether
   to rely on this page instead of a phone call has to be able to read this
   before they start typing, so it sits directly under the 911 callout and is
   not dismissible. Amber rather than red: red on this page belongs to the
   911 action, and a second red block competing with it would weaken the one
   thing we most want tapped. */
.desk-state{
  max-width:1180px;margin:0 auto;
  padding:16px clamp(18px,4vw,20px);
  border-left:5px solid #e06a12;background:#fff4e9;color:#5c3505;
  border-radius:0 12px 12px 0;
}
.desk-state strong{display:block;font-size:16px;line-height:1.35}
.desk-state p{margin:7px 0 0;line-height:1.55;font-size:14px}
.desk-state a{color:#9d1820;font-weight:900}
@media(min-width:760px){
  .desk-state{margin-top:clamp(20px,3vw,28px)}
}

/* --- signing in is optional, and the page says so ----------------------- */

/* Deliberately quieter than .desk-state. That block is a warning about
   whether help can read this; this one is a convenience note. Ranking them
   the same would put an account prompt at the same visual weight as "nobody
   is receiving your report", which is the wrong thing to be reading first. */
.account-state{
  max-width:1180px;margin:14px auto 0;
  padding:13px clamp(18px,4vw,20px);
  border:1px solid #dce3ed;background:#fff;border-radius:12px;color:#44506a;
}
.account-state strong{display:block;font-size:14px;color:#1a2745}
.account-state p{margin:5px 0 0;line-height:1.55;font-size:13px}
.account-state a{color:#0d3b9e;font-weight:800}