/* halfm — brand-aligned styles. Tokens follow brand-book/BRAND_SPEC.md verbatim.
   Five colors only: teal #70BEA9, caramel #D2AA83, cream #F5EDE3, black, white.
   Body text ink #212529. UI grey #EDEDED. Single typeface: Frutiger LT Arabic. */

@font-face {
  font-family: frutigerLTArabic;
  src: url("/fonts/Frutiger_Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: frutigerLTArabic;
  src: url("/fonts/Frutiger_Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: frutigerLTArabic;
  src: url("/fonts/Frutiger_Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: frutigerLTArabic;
  src: url("/fonts/Frutiger_Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --hm-teal:    #70BEA9;
  --hm-caramel: #D2AA83;
  --hm-cream:   #F5EDE3;
  --hm-black:   #000000;
  --hm-white:   #FFFFFF;
  --hm-ink:     #212529;
  --hm-grey:    #EDEDED;
  --hm-muted:   #C4C4C4;
  --hm-ff:      frutigerLTArabic, "Helvetica Neue", Arial, sans-serif;
}

html,
body {
  height: 100%;
  margin: 0;
  background: var(--hm-white);
  color: var(--hm-ink);
  font-family: var(--hm-ff);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* When the panel is in Arabic, render RTL. Header + map stay LTR. */
body[data-lang="ar"] aside#panel {
  direction: rtl;
  text-align: right;
}

/* The system signature: 1px teal hairline under the top nav. */
.hm-hairline {
  height: 1px;
  background: var(--hm-teal);
  width: 100%;
}

/* Side-panel scrollbar — thin, ink-tinted */
aside#panel::-webkit-scrollbar { width: 6px; }
aside#panel::-webkit-scrollbar-thumb { background: var(--hm-grey); border-radius: 3px; }
aside#panel::-webkit-scrollbar-track { background: transparent; }

/* Panel section transitions */
.panel-section {
  animation: hm-fade 200ms ease-out;
}
@keyframes hm-fade {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Buttons — outline teal default, sentence case, 12px radius. Brand spec verbatim. */
.hm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--hm-ff);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  padding: 10px 16px;
  background: transparent;
  color: var(--hm-teal);
  border: 1px solid var(--hm-teal);
  border-radius: 12px;
  cursor: pointer;
  text-transform: none;
  transition: background 120ms ease, color 120ms ease;
}
.hm-btn:hover {
  background: var(--hm-teal);
  color: var(--hm-white);
}
.hm-btn--ghost {
  border-color: var(--hm-grey);
  color: var(--hm-ink);
}
.hm-btn--ghost:hover {
  background: var(--hm-ink);
  color: var(--hm-white);
  border-color: var(--hm-ink);
}
.hm-btn--fill {
  background: var(--hm-teal);
  color: var(--hm-white);
  border: none;
  border-radius: 16px;
  padding: 12px 28px;
  font-weight: 400;
}
.hm-btn--fill:hover {
  background: var(--hm-ink);
}

/* Severity pills.
   Spec doesn't define a "warning" colour family; mapping severity to brand palette:
     high   → solid black bg
     medium → caramel
     low    → teal outline */
.hm-sev {
  display: inline-block;
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.hm-sev--high   { background: var(--hm-black);    color: var(--hm-white); }
.hm-sev--medium { background: var(--hm-caramel);  color: var(--hm-white); }
.hm-sev--low    { background: transparent; color: var(--hm-teal); border: 1px solid var(--hm-teal); }

/* Catchment health badges (AI insight) */
.hm-health {
  display: inline-block;
  font-weight: 700;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
}
.hm-health--strong         { background: var(--hm-teal);    color: var(--hm-white); }
.hm-health--moderate       { background: var(--hm-caramel); color: var(--hm-white); }
.hm-health--under_pressure { background: var(--hm-black);   color: var(--hm-white); }

/* Cannibalisation risk pills (zone tooltip) */
.hm-risk {
  display: inline-block;
  font-weight: 700;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
}
.hm-risk--low    { background: var(--hm-teal);    color: var(--hm-white); }
.hm-risk--medium { background: var(--hm-caramel); color: var(--hm-white); }
.hm-risk--high   { background: var(--hm-black);   color: var(--hm-white); }

/* Eyebrow / micro labels (UPPERCASE 4px tracking, teal — per spec) */
.hm-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--hm-teal);
}

/* Cards / containers */
.hm-card {
  background: var(--hm-white);
  border: 1px solid var(--hm-grey);
  border-radius: 14px;
  padding: 14px;
}
.hm-card--cream {
  background: var(--hm-cream);
  border-color: var(--hm-cream);
}

/* Inputs — per spec */
.hm-input {
  background: var(--hm-white);
  color: var(--hm-ink);
  border: 1px solid var(--hm-muted);
  border-radius: 12px;
  padding: 12px 14px;
  font-family: var(--hm-ff);
  font-size: 14px;
  width: 100%;
}
.hm-input::placeholder { color: var(--hm-muted); }

/* Map InfoWindow — match brand. Override Google Maps' default light card. */
.gm-style .gm-style-iw-c {
  background: var(--hm-white) !important;
  border-radius: 12px !important;
  border: 1px solid var(--hm-grey);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
  padding: 12px 14px !important;
  font-family: var(--hm-ff);
}
.gm-style .gm-style-iw-tc::after {
  background: var(--hm-white) !important;
}
.gm-style .gm-style-iw-d {
  overflow: hidden !important;
  color: var(--hm-ink);
}
.gm-style .gm-style-iw-d::-webkit-scrollbar { display: none; }

/* Header logo sizing */
.hm-logo {
  height: 28px;
  width: auto;
  display: block;
}

/* Map container baseline */
#map {
  background: var(--hm-grey);
}

/* Layers panel — sits over the map */
.hm-layers {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--hm-grey);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Subtle layer toggle row */
.hm-layer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--hm-ink);
  cursor: pointer;
  padding: 2px 0;
}
.hm-layer-row input[type="checkbox"] {
  accent-color: var(--hm-teal);
}
.hm-layer-row:hover { color: var(--hm-teal); }