@font-face {
  font-family: "Manrope";
  src: url("/fonts/Manrope-Variable.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --ate-blue: #1647ff;
  --ate-blue-deep: #0d34c5;
  --ate-ink: #111827;
  --ate-muted: #657083;
  --ate-line: #dce2eb;
  font-family: "Manrope", "Segoe UI", Arial, sans-serif;
  color: var(--ate-ink);
  background: #f6f7f9;
}

body,
dialog { background: #f6f7f9; color: var(--ate-ink); }

.top {
  min-height: 52px;
  margin: -18px -18px 20px;
  padding: 12px 18px;
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid var(--ate-line);
  box-shadow: 0 1px 0 rgba(17, 24, 39, .03);
}

.brand-logo {
  display: block;
  width: 92px;
  height: 42px;
  object-fit: contain;
  object-position: left center;
}

.top-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.top-back {
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  color: #26344e;
  background: #edf1f6;
  border: 1px solid var(--ate-line);
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
}

.top-back:hover {
  color: #fff;
  background: var(--ate-blue);
  border-color: var(--ate-blue);
}

.top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.account-trigger {
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  place-items: center;
  color: #fff;
  background: var(--ate-blue);
  border: 1px solid var(--ate-blue-deep);
  border-radius: 50%;
  font-size: 16px;
  font-weight: 800;
}

.account-trigger:hover {
  background: var(--ate-blue-deep);
}

.account-card .pill {
  margin-top: 18px;
}

.location-picker select {
  max-width: 154px;
  min-height: 40px;
  padding: 8px 28px 8px 10px;
  border: 1px solid var(--ate-line);
  border-radius: 6px;
  background: #fff;
  color: #26344e;
  font-weight: 750;
}

.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;
}

.location-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.location-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--ate-line);
  border-radius: 6px;
  background: #fff;
  color: var(--ate-ink);
  text-align: left;
}

.location-main {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.location-access { flex: 0 0 auto; min-height: 34px; padding: 7px 9px; font-size: 11px; }
.access-role { color: var(--ate-blue-deep); font-size: 11px; text-align: right; }

.location-row:hover { border-color: var(--ate-blue); background: #f5f7ff; }
.location-row small { display: block; margin-top: 3px; color: var(--ate-muted); }
.location-row b { color: var(--ate-blue); font-size: 12px; white-space: nowrap; }

h1,
h2,
h3,
button,
.pill,
.tab,
.zone strong,
.photo-count,
.issue-status {
  font-family: "Manrope", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
}

.card h1,
.card h2,
.card h3,
.zone strong {
  font-weight: 800;
  color: var(--ate-ink);
}

.card {
  border-color: var(--ate-line);
  box-shadow: 0 1px 3px rgba(17, 24, 39, .05);
}

.field { color: #243047; font-weight: 700; }

.field input:focus,
.field textarea:focus,
.field select:focus,
.assignment-controls select:focus,
.assignment-controls input:focus {
  outline-color: rgba(22, 71, 255, .17);
  border-color: var(--ate-blue);
}

.primary,
.tab.active {
  background: var(--ate-blue);
  box-shadow: 0 2px 5px rgba(22, 71, 255, .18);
}

.primary:hover { background: var(--ate-blue-deep); }

.secondary {
  background: #edf1f6;
  color: #26344e;
}

.zone:hover,
.dev-user:hover { border-color: var(--ate-blue); background: #f5f7ff; }

.progress i { background-color: var(--ate-blue); }
.checkpoint.complete,
.ok { border-color: var(--ate-blue); }

.pill { background: #e9edff; color: var(--ate-blue-deep); font-weight: 800; }
.hint { background: #f0f3ff; border-left-color: var(--ate-blue); color: #304268; }
.tab.active { color: #fff; }
.zone-options input { accent-color: var(--ate-blue); }

@media (min-width: 740px) {
  .top { margin: -28px -28px 24px; padding: 14px 28px; }
}