/* Roboto, as on vertexnav.com, kept in the repository (lib/roboto, OFL). One variable font covers every weight.
   Arabic names fall back to the system's Arabic font. */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/lib/roboto/roboto-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/lib/roboto/roboto-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Vertex Nav: charcoal and grey with the logo's orange as the one colour. Orange marks what is active or
   chosen; it is never a solution type on the map. */
:root {
  --brand: #f37129;          /* the logo's deep orange; dark text on it, never white */
  --brand-light: #f79645;    /* the logo's light orange; on charcoal */
  --brand-ink: #b5490b;      /* orange as text or a focus ring on white (5.3:1) */
  --brand-wash: #fdeee4;     /* selected rows */
  --charcoal: #262626;
  --charcoal-raised: #333333;
  --on-charcoal: #e6e6e6;
  --text: #1f1f1f;
  --muted: #5f5f5f;
  --surface: #ffffff;
  --background: #f4f4f4;
  --hover: #ededed;
  --border: #dcdcdc;
  --error: #b3261e;
  --stale: #8a4b00;

  /* Solution types; any other solution is grey like Autonomous. Latest: each surveyor's newest point. */
  --fixed: #1b7f3b;
  --float: #e2ad00;
  --dgps: #2563eb;
  --autonomous: #6b7280;
  --latest: #d7191f;

  --radius: 6px;
  --ease: cubic-bezier(0.25, 1, 0.5, 1);

  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
  font-size: 93.75%; /* 15px at the browser default, and follows the user's text size */
  line-height: 1.45;
  color: var(--text);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

body { margin: 0; }

h1, h2 { font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }

:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 2px; }

/* ---- Buttons ---- */

button, a.button {
  font: inherit;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 150ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease);
}

button.primary, a.button.primary { background: var(--brand); border-color: var(--brand); color: var(--text); }
button.primary:hover, a.button.primary:hover { background: var(--brand-light); border-color: var(--brand-light); }
button.primary:active, a.button.primary:active { background: #e5651f; border-color: #e5651f; }

/* Export before a surveyor is chosen: an outline, not a faded orange. */
a.button.primary[aria-disabled="true"] { background: transparent; border-color: #5a5a5a; color: #9a9a9a; pointer-events: none; }

/* ---- Login page ---- */

body.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  background: var(--charcoal);
}

body.login main { width: 100%; max-width: 23rem; }

body.login .brand-logo { display: block; width: 15rem; height: auto; margin: 0 auto 2rem; }

.login-panel {
  padding: 2rem;
  background: var(--surface);
  border-radius: 10px;
  box-shadow: 0 18px 48px rgb(0 0 0 / 0.35);
}

body.login h1 { font-size: 1.45rem; margin: 0; }

body.login .lede { margin: 0.3rem 0 1.25rem; color: var(--muted); }

body.login form { display: flex; flex-direction: column; gap: 0.3rem; }

body.login label { margin-top: 0.75rem; font-weight: 500; font-size: 0.9rem; }

body.login input {
  font: inherit;
  padding: 0.6rem 0.7rem;
  border: 1px solid #b8b8b8;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}

body.login input:hover { border-color: #8f8f8f; }

body.login input:focus { outline: none; border-color: var(--brand-ink); box-shadow: 0 0 0 3px rgb(243 113 41 / 0.25); }

body.login button { margin-top: 1.5rem; padding: 0.65rem 1rem; }

.error {
  margin: 0 0 0.25rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius);
  background: #fbeceb;
  color: var(--error);
  font-weight: 500;
}

/* ---- Viewer page ---- */

body.viewer {
  height: 100vh;
  display: grid;
  grid-template-columns: 18rem 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "header header" "nav map";
}

body.viewer.has-record {
  grid-template-columns: 18rem 1fr 26rem;
  grid-template-areas: "header header header" "nav map record";
}

body.viewer header {
  grid-area: header;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1.25rem;
  background: var(--charcoal);
  color: var(--on-charcoal);
}

body.viewer header h1 {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 auto 0 0;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #ffffff;
}

body.viewer header .brand-logo { display: block; height: 2.4rem; width: auto; }

/* A hairline between the company's logo and the product name. */
body.viewer header h1 span { padding-left: 0.9rem; border-left: 1px solid #5a5a5a; white-space: nowrap; }

body.viewer header form { margin: 0; }

body.viewer header :focus-visible { outline-color: var(--brand-light); }

.quiet { background: transparent; color: var(--on-charcoal); border-color: #5a5a5a; }
.quiet:hover { background: var(--charcoal-raised); border-color: #7a7a7a; color: #ffffff; }

.connection {
  margin: 0;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--error);
  color: #ffffff;
  font-weight: 500;
  font-size: 0.9rem;
}

/* Surveyor list */

#surveyors {
  grid-area: nav;
  overflow-y: auto;
  background: var(--surface);
  border-right: 1px solid var(--border);
}

#surveyor-list { list-style: none; margin: 0; padding: 0.5rem; display: flex; flex-direction: column; gap: 2px; }

button.surveyor {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  text-align: start;
  font-weight: 400;
}

button.surveyor:hover { background: var(--hover); }

button.surveyor[aria-pressed="true"] { background: var(--brand-wash); border-color: var(--brand-ink); }

.surveyor-name { font-weight: 500; overflow-wrap: anywhere; }
button.surveyor[aria-pressed="true"] .surveyor-name { font-weight: 700; }

.activity { font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.activity.stale { color: var(--stale); font-weight: 500; }
.warning { font-size: 0.85rem; color: var(--error); }

/* Map */

#map { grid-area: map; min-height: 0; background: #e8e8e8; font-family: inherit; }

.leaflet-container a { color: var(--brand-ink); }

.leaflet-bar a { color: var(--text); }

/* Point record */

#record {
  grid-area: record;
  overflow-y: auto;
  padding: 0 1.25rem 1.25rem;
  background: var(--surface);
  border-left: 1px solid var(--border);
}

.record-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 -1.25rem 0.75rem;
  padding: 0.9rem 1.25rem 0.75rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.record-head h2 { font-size: 1.15rem; margin: 0; overflow-wrap: anywhere; }

button.close {
  flex: none;
  width: 2rem;
  height: 2rem;
  padding: 0;
  font-size: 1.35rem;
  line-height: 1;
  background: transparent;
  color: var(--muted);
}

button.close:hover { background: var(--hover); color: var(--text); }

#record-fields { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; margin: 0; }
#record-fields dt { color: var(--muted); font-size: 0.9rem; }
#record-fields dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: break-word; white-space: pre-wrap; min-width: 0; }

/* The street map in near-grey, so the solution colours of the markers are the only strong colours on it.
   Satellite imagery keeps its colours. */
.street-tiles { filter: grayscale(0.85) brightness(1.04) contrast(0.92); }

/* Markers: colour by solution type, set by class on the SVG path. The dark edge and shadow keep the
   light colours visible on light map tiles. */
path.point { stroke: #ffffff; stroke-width: 2.5; fill-opacity: 0.92; filter: drop-shadow(0 0 0.5px #000000) drop-shadow(0 1px 2px rgb(0 0 0 / 0.6)); }
path.point.fixed { fill: var(--fixed); }
path.point.float { fill: var(--float); }
path.point.dgps { fill: var(--dgps); }
path.point.autonomous, path.point.other { fill: var(--autonomous); }
path.point.latest { fill: var(--latest); }
/* Selected: a dark ring with an orange glow, clear against every solution colour and the map. */
path.point.selected { stroke: var(--text); stroke-width: 3; filter: drop-shadow(0 0 3px var(--brand)) drop-shadow(0 0 1px var(--brand)); }
/* A clicked marker takes focus (markers are not in the tab order): no browser box around it. */
path.point:focus { outline: none; }

.legend {
  padding: 0.5rem 0.7rem;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 1px 5px rgb(0 0 0 / 0.25);
  font-size: 0.8rem;
  line-height: 1.7;
}

.swatch { display: inline-block; width: 0.7rem; height: 0.7rem; margin-right: 0.45rem; border-radius: 50%; vertical-align: -0.05rem; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.2); }
.swatch.fixed { background: var(--fixed); }
.swatch.float { background: var(--float); }
.swatch.dgps { background: var(--dgps); }
.swatch.autonomous { background: var(--autonomous); }
.swatch.latest { background: var(--latest); }

/* Narrow screens: list, map and record stacked. */
@media (max-width: 760px) {
  body.viewer, body.viewer.has-record {
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 60vh auto;
    grid-template-areas: "header" "nav" "map" "record";
  }
  body.viewer header { flex-wrap: wrap; gap: 0.6rem; padding: 0.6rem 0.9rem; }
  body.viewer header h1 { flex-basis: 100%; }
  body.viewer header .brand-logo { height: 1.8rem; }
  #surveyors { max-height: 12rem; border-right: 0; border-bottom: 1px solid var(--border); }
  #record { border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}