@font-face { font-family: "DM Sans"; src: url("/DMSans.ttf") format("truetype"); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: Manrope; src: url("/Manrope.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }
h1, h2, .brand { font-family: Manrope, -apple-system, sans-serif; }
:root {
  color-scheme: light;
  --paper: #ffffff;
  --ink: #191919;
  --muted: #646464;
  --line: #dededb;
  --red: #d0181d;
  --soft: #edf0e9;
  --green: #245942;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #f5f5f2;
  color: var(--ink);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.5;
}
header {
  min-height: 92px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  gap: 24px;
}
.brand {
  display: flex;
  gap: 24px;
  align-items: center;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -1.3px;
  color: inherit;
  text-decoration: none;
}
.brand span {
  font-size: 16px;
  letter-spacing: 0;
  font-weight: 500;
  border-left: 1px solid var(--line);
  padding-left: 24px;
}
.header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.drill {
  font-size: 12px;
  letter-spacing: 1.2px;
  font-weight: 750;
  background: #f7e9d7;
  color: #754210;
  padding: 8px 12px;
  border-radius: 8px;
}
main {
  max-width: 1440px;
  margin: 0 auto;
  padding: 40px;
}
.surface {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.login {
  max-width: 530px;
  margin: 32px auto;
  padding: 40px;
}
.eyebrow {
  font-size: 12px;
  letter-spacing: 1.6px;
  font-weight: 750;
  color: var(--muted);
  margin: 0 0 12px;
}
h1 {
  font-size: 38px;
  letter-spacing: -1.2px;
  line-height: 1.15;
  margin: 0 0 16px;
}
h2 {
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -0.35px;
  margin: 0;
}
h3 {
  font-size: 17px;
  margin: 24px 0 12px;
}
.muted,
.note {
  color: var(--muted);
}
.note {
  font-size: 14px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
  margin: 28px 0 0;
}
label {
  display: block;
  font-weight: 650;
  margin: 20px 0 8px;
}
input,
select,
button {
  font: inherit;
}
input,
select {
  width: 100%;
  min-height: 52px;
  border: 1px solid #7e8880;
  background: var(--paper);
  border-radius: 10px;
  padding: 12px;
  color: var(--ink);
}
button {
  cursor: pointer;
  border: 1px solid #a4ada4;
  background: var(--paper);
  color: var(--ink);
  border-radius: 10px;
  padding: 12px 18px;
  min-height: 48px;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.4;
}
button:hover {
  background: var(--soft);
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid #245942;
  outline-offset: 3px;
}
button:disabled {
  opacity: 0.55;
  cursor: wait;
}
.primary {
  background: var(--red);
  color: white;
  border-color: var(--red);
}
.primary:hover {
  background: #ad1519;
}
form > .primary {
  width: 100%;
  margin-top: 24px;
}
.heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin: 0 0 28px;
}
.heading p {
  margin-bottom: 8px;
}
.workspace {
  display: grid;
  grid-template-columns: minmax(290px, 0.85fr) minmax(400px, 1.4fr);
  gap: 24px;
  align-items: start;
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  border-bottom: 1px solid var(--line);
  gap: 16px;
}
.section-heading h2 {
  font-size: 17px;
}
.count {
  background: var(--soft);
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 14px;
}
.report {
  display: block;
  border: 0;
  border-radius: 0;
  text-align: left;
  width: 100%;
  padding: 24px;
  border-bottom: 1px solid var(--line);
  font-weight: 400;
}
.report:last-child {
  border: 0;
  border-radius: 0 0 18px 18px;
}
.report[aria-pressed="true"] {
  background: var(--soft);
  box-shadow: inset 4px 0 var(--red);
}
.report strong {
  display: block;
  font-size: 18px;
  font-weight: 650;
  margin: 0 0 10px;
}
.report small {
  color: var(--muted);
  display: block;
  font-size: 13px;
  margin-top: 10px;
}
.awaiting-action {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 650;
  color: #754210;
}
.report-navigation { display: none; }
.report-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.report-filters [aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.backup-support { margin: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 8px 0 16px; }
.backup-support > summary { cursor: pointer; min-height: 48px; padding: 12px 0; font-weight: 650; }
.backup-controls { display: grid; gap: 12px; }
.backup-request { padding: 16px 0; border-bottom: 1px solid var(--line); }
.backup-request p { margin: 8px 0; overflow-wrap: anywhere; }
.accepted-assignment { color: var(--green); border-left: 3px solid var(--green); padding: 12px 16px; }
.location-brief {
  margin: 24px 0;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.location-brief p { margin: 8px 0 0; overflow-wrap: anywhere; }
.location-brief .eyebrow { margin: 0 0 8px; }
.reported-building { font-size: 23px; line-height: 1.25; overflow-wrap: anywhere; }
.reported-coordinates { font-variant-numeric: tabular-nums; font-size: 15px; }
.location-evidence { border-bottom: 1px solid var(--line); padding: 8px 0; }
.location-evidence > summary { cursor: pointer; min-height: 48px; padding: 12px 0; }
.location-evidence > summary:focus-visible { outline: 3px solid var(--green); }
.badge {
  font-size: 13px;
  font-weight: 650;
  display: inline-block;
  padding: 5px 10px;
  background: #eaf0e8;
  color: var(--green);
  border-radius: 7px;
}
.detail {
  padding: 32px;
  min-height: 420px;
}
.empty {
  padding: 48px 16px;
  color: var(--muted);
  max-width: 430px;
  margin: auto;
}
.empty h2 {
  color: var(--ink);
  margin-bottom: 12px;
}
.detail-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 18px;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0;
}
.actions select {
  flex: 1;
  min-width: 170px;
}
.history {
  list-style: none;
  padding: 0;
  margin: 0;
}
.history li {
  border-top: 1px solid var(--line);
  padding: 14px 0;
}
.history small {
  display: block;
  color: var(--muted);
  font-size: 13px;
}
.private-note {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--soft);
  border-radius: 10px;
  padding: 16px;
}
.warning {
  border-left: 3px solid #9d6828;
  padding: 12px 16px;
  background: #f8f0e3;
  color: #694314;
  font-size: 15px;
}
#message {
  max-width: 800px;
  margin: 24px auto;
  color: #ad1519;
  font-weight: 650;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--paper);
  padding: 12px 16px;
  border-left: 3px solid var(--red);
}
#message:empty { display: none; }
footer {
  max-width: 1440px;
  margin: auto;
  padding: 24px 40px;
  color: var(--muted);
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
[hidden] {
  display: none !important;
}
@media (max-width: 800px) {
  header {
    padding: 12px 16px;
    align-items: start;
  }
  .brand {
    display: block;
  }
  .brand span {
    display: block;
    border: 0;
    padding: 0;
    font-size: 13px;
    letter-spacing: 0;
  }
  main {
    padding: 24px 16px;
  }
  .login {
    padding: 28px;
    margin-top: 16px;
  }
  .workspace {
    grid-template-columns: 1fr;
  }
  #workspace:not([data-view="detail"]) .detail { display: none; }
  #workspace[data-view="detail"] > .heading,
  #workspace[data-view="detail"] > .report-filters,
  #workspace[data-view="detail"] > .station-readiness,
  #workspace[data-view="detail"] .reports { display: none; }
  #workspace[data-view="detail"] .workspace { display: block; }
  .detail.surface { border: 0; border-radius: 0; background: transparent; padding: 0; }
  .report-navigation { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
  .report-back, .report-refresh { border: 0; padding: 8px 0; color: var(--muted); background: transparent; }
  .detail-head h2 { font-size: 30px; line-height: 1.15; letter-spacing: -1px; }
  .detail-head + .muted { font-size: 14px; }
  .location-brief { margin: 20px 0; padding: 16px 0; }
  .actions { display: grid; gap: 10px; }
  .actions button { width: 100%; min-height: 52px; }
  .brand { font-size: 26px; }
  .header-actions { gap: 8px; }
  .header-actions button { padding: 8px 10px; font-size: 13px; }
  .heading {
    align-items: start;
    flex-direction: column;
  }
  h1 {
    font-size: 32px;
  }
  .detail {
    padding: 24px;
  }
  .header-actions {
    justify-content: end;
  }
  .drill {
    font-size: 10px;
  }
  footer {
    padding: 24px 16px;
    flex-direction: column;
  }
  .detail-head {
    flex-direction: column;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
}

.pagination {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 16px;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
}
.report-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
  margin: 16px 0 28px;
}
.report-fields > div { min-width: 0; }
.report-fields dt { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.report-fields dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.revision-summary { padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.revision-summary strong, .revision-summary span { display: block; }
.revision-summary strong { font-size: 15px; }
.revision-summary span, .explanatory { font-size: 14px; color: var(--muted); }
.map-frame { position: relative; height: 340px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--soft); }
.map-frame canvas { display: block; width: 100%; height: 100%; }
.map-controls { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 6px; }
.map-controls button { width: 48px; height: 48px; padding: 0; font-size: 24px; box-shadow: 0 1px 5px #0001; }
.map-attribution { display: block; margin-top: 8px; font-size: 11px; color: #454d44; }
.map-status { font-size: 14px; color: #694314; }
.map-status:empty { display: none; }
.map-hint { font-size: 13px; }
.report-revision { border-top: 1px solid var(--line); padding: 12px 0; }
.report-revision summary { cursor: pointer; min-height: 48px; padding: 10px 0; }
.report-revision summary span { margin-left: 12px; font-size: 13px; color: var(--muted); }
.report-revision summary:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.report-pending { padding: 16px 20px; background: var(--soft); border-radius: 12px; }
.report-pending h3 { margin-top: 0; }
.report-pending p { margin-bottom: 0; }
.station-readiness { padding: 0 18px; margin-bottom: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); overflow-wrap: anywhere; }
.station-readiness summary { min-height: 52px; padding: 14px 0; cursor: pointer; font-weight: 650; }
.station-readiness summary:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.station-readiness p { font-size: 14px; }
.setup-attention { color: #694314; }
.location-status { display: block; font-size: 13px; color: #694314; }
.location-completeness { font-size: 14px; margin-bottom: 16px; }
.location-completeness p { margin: 6px 0; }
@media (max-width: 520px) {
  .report-fields { grid-template-columns: 1fr; }
  .detail { padding: 20px; }
  .map-frame { height: 320px; }
  .report-revision summary span { display: block; margin: 4px 0 0; }
}

.team-desk { display: grid; grid-template-columns: 1fr auto; gap: 16px 28px; padding: 24px; margin: 0 0 24px; border: 1px solid var(--line); border-top: 4px solid var(--ink); background: var(--paper); border-radius: 4px 4px 20px 4px; }
.team-desk[hidden] { display: none; }
.team-desk[data-duty="true"] { border-top-color: var(--green); }
.team-desk h2 { margin: 4px 0 8px; font-size: 26px; letter-spacing: -0.6px; }
.team-desk p { margin: 0; }
.team-desk .eyebrow { margin: 0; }
.team-desk .note, #team-announcement { grid-column: 1 / -1; max-width: 75ch; }
.team-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.team-status { font-weight: 650; }
.team-accept { border-top: 1px solid var(--line); padding-top: 16px; }
@media (max-width: 720px) { .team-desk { grid-template-columns: 1fr; padding: 20px; } .team-controls { flex-direction: column; align-items: stretch; } }

#team-alert-settings { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 12px; }
#team-alert-settings > summary { cursor: pointer; font-weight: 650; padding: 8px 0; }
#team-alert-settings .team-controls { margin: 12px 0; }
#team-announcement:empty { display: none; }
@media (max-width: 900px) { #workspace[data-view="detail"] > #team-desk { display: none; } }

/* Keep the current report readable before its map and audit history. */
.report-observations { margin-top: 24px; padding: 20px; background: #f5f6f2; border-radius: 12px; }
.report-observations h3 { margin: 0 0 8px; }
.report-observations .explanatory { margin: 0; }
.report-observations .report-fields { margin-bottom: 0; }
.report-situation { margin: 24px 0; }
.report-situation h3 { margin-bottom: 8px; }
.revision-summary { margin-top: 24px; }
.team-desk { padding: 20px 24px; border: 1px solid var(--line); border-radius: 12px; }
.team-desk[data-duty="true"] .team-status { color: var(--green); }
.team-desk h2 { font-size: 22px; }
@media (max-width: 520px) { .report-observations { padding: 16px; } }
