/* ============================================================================
   Star Flock — site styles
   ----------------------------------------------------------------------------
   Hand-written, one request, no build step. Deliberately a different world from
   the Star Pilot site: that one is deep navy with blue and violet, because it
   sells a photorealistic globe. This one is black with a single lime, because
   the app is an instrument that draws one thing on a dark map.

   Committed to a single dark theme rather than following the viewer's setting.
   The subject IS a dark map at night; a white version would be a different
   product. Every colour is therefore painted explicitly.
   ========================================================================== */

:root{
  --black:      #07080A;
  --raise:      #0E1013;
  --raise-2:    #14171B;
  --line:       #1F242B;
  --line-2:     #2C333C;

  --text:       #EDF2E9;   /* very slightly warm/green-biased, not pure white */
  --text-dim:   #97A093;
  --text-faint: #646D62;

  --lime:       #8DFF2B;   /* the app's own — arrows, cones, the mark */
  --lime-dim:   rgba(141,255,43,.14);
  --purple:     #A052FA;   /* dome-camera rings, and only that */
  --purple-dim: rgba(160,82,250,.14);

  --maxw: 940px;
  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important;
                        transition-duration:.001ms!important }
}

body{
  margin:0;
  background:var(--black);
  color:var(--text);
  font:400 16px/1.65 "IBM Plex Sans",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.wrap{ width:min(100% - 40px, var(--maxw)); margin-inline:auto }

h1,h2,h3{
  font-family:"Chakra Petch","IBM Plex Sans",system-ui,sans-serif;
  margin:0; line-height:1.1; text-wrap:balance; letter-spacing:-.01em;
}
h1{ font-size:clamp(2.3rem,7vw,4rem); font-weight:700 }
h2{ font-size:clamp(1.5rem,3.4vw,2.1rem); font-weight:600 }
h3{ font-size:1.05rem; font-weight:600 }
p{ margin:0 }
a{ color:var(--lime) }

.mono{ font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace }
.eyebrow{
  font-family:"IBM Plex Mono",monospace; font-size:.72rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--lime);
}
.lede{ font-size:clamp(1.02rem,1.7vw,1.18rem); color:var(--text-dim); max-width:60ch }

/* ---------- header ---------- */
.top{
  display:flex; align-items:center; gap:11px;
  padding:22px 0; border-bottom:1px solid var(--line);
}
.top img{ width:30px; height:30px; display:block; border-radius:7px }
.top b{ font-family:"Chakra Petch",sans-serif; font-weight:600; letter-spacing:.01em;
         display:inline-flex; align-items:baseline; gap:7px }
/* GPS rides with the name in the app's lime, heavier and a touch smaller —
   the same lockup the intro screen uses, so the site and the app agree. */
.top b .gps{ font-weight:700; font-size:.82em; letter-spacing:.10em; color:var(--lime) }

/* ---------- hero ---------- */
.hero{ padding:clamp(52px,9vw,104px) 0 clamp(40px,7vw,72px) }
.hero .eyebrow{ display:block; margin-bottom:18px }
.hero h1{ margin-bottom:20px }
.hero h1 em{ font-style:normal; color:var(--lime) }
.hero .lede{ margin-bottom:26px }
.hero-note{
  font-family:"IBM Plex Mono",monospace; font-size:.78rem; color:var(--text-faint);
  border-left:2px solid var(--line-2); padding-left:12px; max-width:56ch;
}

/* ---------- sections ---------- */
section{ padding:clamp(44px,7vw,84px) 0; border-top:1px solid var(--line) }
.sec-head{ display:flex; flex-direction:column; gap:10px; margin-bottom:30px; max-width:64ch }
.prose{ display:flex; flex-direction:column; gap:14px; color:var(--text-dim); max-width:64ch }
.prose strong{ color:var(--text); font-weight:600 }

/* ---------- the taxonomy table: the page's real content ---------- */
.tbl{ overflow-x:auto; border:1px solid var(--line); border-radius:3px; background:var(--raise) }
table{ border-collapse:collapse; width:100%; min-width:560px }
th,td{ text-align:left; padding:13px 16px; border-bottom:1px solid var(--line); font-size:.9rem;
       vertical-align:top }
th{ font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--text-faint); font-weight:500; background:var(--raise-2) }
tbody tr:last-child td{ border-bottom:0 }
td code{ font-family:"IBM Plex Mono",monospace; font-size:.82rem; color:var(--text-dim) }

/* A swatch that carries the drawn colour, so the table shows what it names. */
.mark{ display:inline-flex; align-items:center; gap:9px; white-space:nowrap; font-weight:500 }
.mark i{ width:0; height:0; flex:none }
.mark.cone i{
  border-left:7px solid transparent; border-right:7px solid transparent;
  border-bottom:13px solid var(--lime); filter:drop-shadow(0 0 5px rgba(141,255,43,.65));
}
.mark.cone.red i{
  border-bottom-color:#FF453A; filter:drop-shadow(0 0 5px rgba(255,69,58,.65));
}
.mark.cone.blue i{
  border-bottom-color:#5A8CFF; filter:drop-shadow(0 0 5px rgba(90,140,255,.65));
}
.mark.ring i{
  width:13px; height:13px; border-radius:50%; border:2.5px solid var(--purple);
  filter:drop-shadow(0 0 6px rgba(160,82,250,.75));
}
/* The places worth reaching. A ring is a point with a range; a square is
   ground with edges; a star is something a person put there. Same rule as in
   the app — the shape carries the category before any colour is read. */
.mark.ring.lime i{
  border-color:#8DFF2B; filter:drop-shadow(0 0 6px rgba(141,255,43,.75));
}
/* Hot pink: the health emergencies, split out of the red. See the app's
   FacilityKind.tint — the red now means the services that come to you. */
.mark.ring.pink i{
  border-color:#FF3BA5; filter:drop-shadow(0 0 6px rgba(255,59,165,.75));
}
.mark.ring.red i{
  border-color:#FF3B30; filter:drop-shadow(0 0 6px rgba(255,59,48,.75));
}
.mark.ring.gold i{
  border-color:#FFCC2E; filter:drop-shadow(0 0 6px rgba(255,204,46,.8));
}
.mark.square i{
  width:13px; height:13px; border-radius:3px; border:2.5px solid #3B96FF;
  filter:drop-shadow(0 0 6px rgba(59,150,255,.75));
}
.mark.star i{
  width:0; height:0; border-right:6px solid transparent; border-bottom:11px solid #FFCC2E;
  border-left:6px solid transparent; transform:rotate(0deg);
  filter:drop-shadow(0 0 6px rgba(255,204,46,.85));
}

/* ---------- feature rows ---------- */
.rows{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
       border-radius:3px; overflow:hidden }
.row{ background:var(--raise); padding:20px 22px; display:flex; flex-direction:column; gap:8px }
.row h3{ color:var(--text) }
.row p{ color:var(--text-dim); font-size:.93rem }
@media (min-width:720px){ .rows.two{ grid-template-columns:1fr 1fr } }

/* ---------- app screenshots ---------- */
.shots{ display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)) }
.shots figure{ margin:0; display:flex; flex-direction:column; gap:12px }
.shots img{ display:block; width:100%; height:auto; border-radius:22px;
            border:1px solid var(--line-2); background:var(--raise) }
.shots figcaption{ color:var(--text-dim); font-size:.9rem }

/* ---------- a plain fact strip ---------- */
.facts{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px }
.facts span{
  font-family:"IBM Plex Mono",monospace; font-size:.76rem; color:var(--text-dim);
  border:1px solid var(--line-2); border-radius:999px; padding:7px 14px;
}
.facts span b{ color:var(--lime); font-weight:600 }

/* ---------- footer ---------- */
footer{ border-top:1px solid var(--line); padding:34px 0 60px; color:var(--text-faint);
        font-size:.85rem; display:flex; flex-direction:column; gap:10px }
footer a{ color:var(--text-dim); text-decoration:none }
footer a:hover{ color:var(--lime) }
.foot-links{ display:flex; gap:20px; flex-wrap:wrap }

/* ---------- legal page ---------- */
.doc{ max-width:70ch }
.doc h2{ margin-top:2em; font-size:1.25rem }
.doc h2:first-of-type{ margin-top:0 }
.doc p, .doc li{ color:var(--text-dim) }
.doc ul{ padding-left:20px; display:flex; flex-direction:column; gap:8px; margin:0 }
.doc .updated{ font-family:"IBM Plex Mono",monospace; font-size:.78rem; color:var(--text-faint) }

:focus-visible{ outline:2px solid var(--lime); outline-offset:3px; border-radius:3px }

/* ---------- store badges, top and bottom ---------- */
.stores{ display:flex; align-items:center; gap:10px; margin-left:auto; flex-wrap:wrap }
.stores img, .top .stores img{ display:block; width:auto; border-radius:0 }
.stores .store-apple{ height:40px }
/* Google's badge carries its own clear margin round the artwork: drawn
   taller so the two badges' visible shapes match, then pulled in. */
.stores .store-google{ height:59px; margin:-9.5px -8px }
.stores-foot{ margin:0 0 18px; justify-content:flex-start }
@media (max-width:560px){
  .top{ flex-wrap:wrap; row-gap:14px }
  .top .stores{ margin-left:0; width:100% }
}