@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Work+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap');

html { scroll-behavior: smooth; }

body {
  font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif;
  background-color: #103A63;
  background-image:
    repeating-linear-gradient(0deg, rgba(191,215,237,0.08) 0px, rgba(191,215,237,0.08) 1px, transparent 1px, transparent 32px),
    repeating-linear-gradient(90deg, rgba(191,215,237,0.08) 0px, rgba(191,215,237,0.08) 1px, transparent 1px, transparent 32px);
}

.font-display { font-family: 'Space Grotesk', ui-sans-serif, sans-serif; }
.font-annot { font-family: 'IBM Plex Mono', ui-monospace, monospace; }

/* Drawing annotation label, e.g. "FIG.02 / SERVICES" */
.annot-label {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FF6B35;
}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, label.btn:focus-visible {
  outline: 2px solid #FF6B35;
  outline-offset: 2px;
}

/* ---------- Drafting sheet panel with crop-mark corners ---------- */
.sheet {
  position: relative;
  background-color: #F5F8FC;
  border: 1px solid #D7E2EE;
  border-radius: 2px;
}
.sheet::before, .sheet::after,
.sheet .crop-tl, .sheet .crop-br {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
}
.sheet::before {
  top: -1px; left: -1px;
  border-top: 2px solid #103A63;
  border-left: 2px solid #103A63;
}
.sheet::after {
  bottom: -1px; right: -1px;
  border-bottom: 2px solid #103A63;
  border-right: 2px solid #103A63;
}

/* Panel sitting directly on the blue canvas (no white sheet) */
.canvas-panel {
  position: relative;
  border: 1px dashed rgba(234, 242, 251, 0.35);
  border-radius: 2px;
}

/* ---------- Titleblock (hero identity block) ---------- */
.titleblock {
  border: 1px solid rgba(234, 242, 251, 0.4);
  border-radius: 2px;
}
.titleblock-row {
  display: flex;
  justify-content: space-between;
  padding: 0.65rem 1rem;
  border-top: 1px solid rgba(234, 242, 251, 0.25);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.titleblock-row:first-child { border-top: none; }

/* Dashed leader line connector */
.leader {
  border-top: 1px dashed rgba(234, 242, 251, 0.4);
}

/* Nav tabs styled like a drawing index */
.nav-tab {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9FC2E3;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.nav-tab:hover { color: #EAF2FB; }
.nav-tab.active {
  color: #EAF2FB;
  border-bottom-color: #FF6B35;
}

/* Progress meter restyled as a dimension/scale bar */
.scale-meter {
  width: 100%;
  height: 0.55rem;
  border-radius: 1px;
  background-color: rgba(16, 58, 99, 0.12);
  border: 1px solid #D7E2EE;
  appearance: none;
}
.scale-meter::-webkit-progress-bar {
  background-color: rgba(16, 58, 99, 0.08);
}
.scale-meter::-webkit-progress-value { background-color: #FF6B35; }
.scale-meter::-moz-progress-bar { background-color: #FF6B35; }

/* Small tick/status marker */
.tick-dot {
  width: 0.5rem;
  height: 0.5rem;
  background-color: #FFC857;
  display: inline-block;
  transform: rotate(45deg);
}