/* Orin Charge website. Brand from the Orin Charge brand guidelines (2026-10-09): Orin Blue #2B3A67,
   Energy Turquoise #8FE7E4, Electric Cyan #4DEBFF, Deep Cyan #38C9D6; Montserrat, with Arial as fallback. */

:root {
  --brand-blue: #2B3A67; --brand-turquoise: #8FE7E4; --brand-cyan: #4DEBFF; --brand-deep-cyan: #38C9D6;
  --primary: #2B3A67; --on-primary: #FFFFFF;
  --primary-container: #8FE7E4; --on-primary-container: #1B2647;
  --secondary: #4F5B7D; --on-secondary: #FFFFFF;
  --secondary-container: #E3F8F7; --on-secondary-container: #1B2647;
  --tertiary: #0E7C86; --on-tertiary: #FFFFFF;
  --tertiary-container: #DDF5F8; --on-tertiary-container: #0B3B42;
  --available: #138544; --available-container: #D7F5E2; --on-available-container: #06391C;
  --warning-container: #FFE7C7; --on-warning-container: #3D2200;
  --error: #C62828;
  --surface: #FFFFFF; --on-surface: #1B2440; --on-surface-variant: #535C78;
  --surface-container-low: #F3F4FA; --surface-container: #ECEEF6;
  --surface-container-high: #E5E8F2; --surface-container-highest: #DDE1EE;
  --outline: #737C98; --outline-variant: #DDE1EE;
  --pin-ok: #179A50; --pin-warn: #D06C00; --pin-info: #3D7FD9; --pin-off: #7D848D; --pin-ring: #FFFFFF;
  --shadow: rgba(27, 36, 64, .16);
  --brand-bg: #2B3A67;

  --font-ui: "Montserrat", Arial, "Helvetica Neue", sans-serif;
  --font-display: "Montserrat", Arial, "Helvetica Neue", sans-serif;
  --font-code: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-xl: 28px; --r-full: 999px;
  --header-h: 112px;
  --wrap: 1120px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #8FE7E4; --on-primary: #1B2647;
    --primary-container: #8FE7E4; --on-primary-container: #1B2647;
    --secondary: #B4BEDA; --on-secondary: #1B2647;
    --secondary-container: #1D3150; --on-secondary-container: #CFF5F3;
    --tertiary: #4DEBFF; --on-tertiary: #0B2A33;
    --tertiary-container: #123E48; --on-tertiary-container: #CDF6FA;
    --available: #6FDB98; --available-container: #0F4F2A; --on-available-container: #C9F5D8;
    --warning-container: #5C3500; --on-warning-container: #FFE7C7;
    --error: #FFB4AB;
    --surface: #11182E; --on-surface: #E6EAF5; --on-surface-variant: #AAB3CC;
    --surface-container-low: #172039; --surface-container: #1B2541;
    --surface-container-high: #243050; --surface-container-highest: #2E3A5E;
    --outline: #7E89A8; --outline-variant: #303B5E;
    --pin-ok: #1FB15C; --pin-warn: #FF9800; --pin-info: #4A8BE3; --pin-off: #7D848D; --pin-ring: #11182E;
    --shadow: rgba(0, 0, 0, .5);
    --brand-bg: #1F2B52;
    color-scheme: dark;
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--surface); color: var(--on-surface);
  font: 400 1rem/1.6 var(--font-ui);
  min-height: 100vh; display: flex; flex-direction: column;
}
body > main { flex: 1 0 auto; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(1.9rem, 5.5vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.2rem); }
h3 { font-size: 1.1rem; font-weight: 600; }
p { margin: 0 0 1em; }
a { color: var(--primary); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
img, svg { max-width: 100%; }
:focus-visible { outline: 3px solid var(--tertiary); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 16px; }
@media (min-width: 720px) { .wrap { padding-inline: 24px; } }
main:focus { outline: none; }
code, .mono { font-family: var(--font-code); }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 2000;
  background: var(--primary); color: var(--on-primary); padding: 10px 16px; border-radius: var(--r-s);
}
.skip-link:focus { top: 12px; }

/* ---------- logo: main logo, horizontal (brand guidelines; never narrower than 56px) ---------- */
.wordmark { display: inline-flex; align-items: center; text-decoration: none; }
.wordmark img { display: block; height: 36px; width: auto; }
.site-footer .wordmark img { height: 44px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--outline-variant);
}
.site-header .bar {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "brand lang" "nav nav";
  align-items: center; column-gap: 16px; padding-top: 10px;
}
.site-header .wordmark { grid-area: brand; padding-block: 4px; }
.site-nav { grid-area: nav; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
.site-nav::-webkit-scrollbar { display: none; }
.site-nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 4px 0 8px; }
.site-nav a {
  display: block; padding: 8px 12px; border-radius: var(--r-full); white-space: nowrap;
  color: var(--on-surface-variant); text-decoration: none; font-weight: 500; font-size: .95rem;
}
.site-nav a:hover { color: var(--on-surface); background: var(--surface-container); }
.site-nav a[aria-current] { color: var(--on-primary-container); background: var(--primary-container); }
.lang { grid-area: lang; display: flex; align-items: center; gap: 6px; color: var(--on-surface-variant); }
.lang svg { width: 20px; height: 20px; flex: none; }
.lang select {
  font: 500 .9rem var(--font-ui); color: var(--on-surface); background: var(--surface);
  border: 1px solid var(--outline); border-radius: var(--r-s); padding: 6px 8px; max-width: 11rem;
}
@media (min-width: 960px) {
  .site-header .bar { grid-template-columns: auto 1fr auto; grid-template-areas: "brand nav lang"; padding-block: 10px; }
  .site-nav { margin: 0; padding: 0; justify-self: center; }
  .site-nav ul { padding: 0; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 22px; border-radius: var(--r-full);
  font: 600 1rem var(--font-ui); text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent;
}
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: color-mix(in srgb, var(--primary) 88%, var(--on-surface)); }
.btn-outline { background: transparent; color: var(--primary); border-color: var(--outline); }
.btn-outline:hover { background: var(--surface-container); }
.btn-accent { background: var(--brand-turquoise); color: var(--brand-blue); }
.btn-accent:hover { background: #AAEEEC; }
.btn svg { width: 20px; height: 20px; flex: none; }

/* App store buttons. Own neutral design, not the official badges (README.md). */
.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.store {
  display: inline-flex; flex-direction: column; justify-content: center; min-width: 168px; min-height: 56px;
  padding: 8px 18px; border-radius: var(--r-m); text-decoration: none; line-height: 1.2;
  background: var(--on-surface); color: var(--surface); border: 1.5px solid var(--on-surface);
}
.store-kicker { font-size: .78rem; font-weight: 500; }
.store-name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.store[data-soon] { background: transparent; color: var(--on-surface); border-style: dashed; border-color: var(--outline); cursor: default; }
.store[data-soon] .store-kicker { color: var(--on-surface-variant); }
.stores-lg .store { min-width: 200px; min-height: 64px; flex: 1 1 200px; }
.stores-lg .store-name { font-size: 1.2rem; }

/* ---------- sections ---------- */
section[id] { scroll-margin-top: calc(var(--header-h) + 8px); }
.section { padding-block: 56px; }
@media (min-width: 720px) { .section { padding-block: 80px; } }
.section-alt { background: var(--surface-container-low); }
.lede { font-size: 1.15rem; color: var(--on-surface-variant); max-width: 40rem; }
.eyebrow { display: inline-block; font-weight: 600; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--primary); margin-bottom: .75em; }

/* hero: Orin Blue with the brand swirl (pattern 3) and a slideshow of people.
   Phone: the photos sit in a band under the text. Desktop: they fill the hero behind an Orin Blue fade. */
.hero { position: relative; overflow: hidden; padding-block: 48px 0; color: #FFFFFF; background: var(--brand-bg); }
.hero::before {
  content: ""; position: absolute; z-index: 0; left: -180px; bottom: -220px; width: 560px; height: 616px; pointer-events: none;
  background: url("../img/swirl.svg") no-repeat center / contain; opacity: .07;
}
@media (max-width: 879px) { .hero::before { display: none; } } /* the photo band would cut the swirl */
.hero .wrap { position: relative; z-index: 2; }
.hero h1 { max-width: 15ch; color: #FFFFFF; }
.hero .eyebrow { color: var(--brand-turquoise); }
.hero .lede { color: rgba(255, 255, 255, .86); }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; align-items: center; }

.hero-slides { position: relative; z-index: 1; height: 300px; margin-top: 20px; opacity: .45; }
.hero-slides img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; filter: grayscale(1);
  opacity: 0; animation: hero-fade 24s infinite;
}
.hero-slides img:nth-child(2) { animation-delay: 6s; }
.hero-slides img:nth-child(3) { animation-delay: 12s; }
.hero-slides img:nth-child(4) { animation-delay: 18s; object-position: 35% 50%; }
.hero-slides::after {
  content: ""; position: absolute; inset: -2px 0 0; pointer-events: none; /* -2px hides the photo's top edge */
  background: linear-gradient(180deg, var(--brand-bg) 0%, var(--brand-bg) 6%,
    color-mix(in srgb, var(--brand-bg) 60%, transparent) 24%, color-mix(in srgb, var(--brand-bg) 0%, transparent) 55%);
}
@keyframes hero-fade { 0% { opacity: 0; } 4%, 25% { opacity: 1; } 29%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hero-slides img { animation: none; }
  .hero-slides img:first-child { opacity: 1; }
}
@media (min-width: 880px) {
  .hero { padding-block: 104px 120px; min-height: 600px; }
  .hero .wrap > div { max-width: 34rem; }
  .hero-slides { position: absolute; inset: 0; height: auto; margin: 0; }
  .hero-slides img { left: auto; width: 64%; object-position: 50% 40%; }
  .hero-slides::after {
    background: linear-gradient(90deg,
      var(--brand-bg) 36%, color-mix(in srgb, var(--brand-bg) 55%, transparent) 50%,
      color-mix(in srgb, var(--brand-bg) 0%, transparent) 68%);
  }
}

/* on-brand blocks (hero, footer): Orin Blue background, white text */
.on-brand { --tertiary: #4DEBFF; }
.on-brand .store { background: #FFFFFF; color: var(--brand-blue); border-color: #FFFFFF; }
.on-brand .store[data-soon] { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, .55); }
.on-brand .store[data-soon] .store-kicker { color: rgba(255, 255, 255, .78); }
.on-brand .btn-outline { color: #FFFFFF; border-color: rgba(255, 255, 255, .7); }
.on-brand .btn-outline:hover { background: rgba(255, 255, 255, .1); }

/* steps */
.steps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 16px; counter-reset: step; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .steps-4 { grid-template-columns: repeat(4, 1fr); } .steps-3 { grid-template-columns: repeat(3, 1fr); } }
.steps li {
  counter-increment: step; background: var(--surface); border: 1px solid var(--outline-variant);
  border-radius: var(--r-l); padding: 20px;
}
.section-alt .steps li { background: var(--surface); }
.steps li::before {
  content: counter(step); display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px;
  border-radius: 50%; background: var(--brand-turquoise); color: var(--brand-blue);
  font: 700 1.05rem var(--font-display);
}
.steps p { margin: 0; color: var(--on-surface-variant); }

/* prices */
.price-grid { display: grid; gap: 16px; margin-top: 32px; }
@media (min-width: 880px) { .price-grid { grid-template-columns: 1fr 1fr; } }
.card { background: var(--surface); border: 1px solid var(--outline-variant); border-radius: var(--r-l); padding: 24px; }
.card > :last-child { margin-bottom: 0; }
.price-list { margin: 0; display: grid; gap: 4px; }
.price-list div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--outline-variant); }
.price-list div:last-child { border-bottom: 0; }
.price-list dt { color: var(--on-surface-variant); }
.price-list dd { margin: 0; font: 700 1.6rem var(--font-display); color: var(--primary); white-space: nowrap; }
.note-list { display: grid; gap: 16px; }
.note-list h3 { margin-bottom: .35em; }
.note-list p { color: var(--on-surface-variant); margin: 0; }

/* found, venues: split blocks */
.split { display: grid; gap: 24px; align-items: center; }
@media (min-width: 880px) { .split { grid-template-columns: 1.3fr 1fr; gap: 48px; } }
.callout { background: var(--secondary-container); color: var(--on-secondary-container); border-radius: var(--r-xl); padding: 28px; }
.callout p:last-child { margin-bottom: 0; }

/* FAQ */
.faq { margin-top: 24px; max-width: 48rem; }
.faq details { border-bottom: 1px solid var(--outline-variant); }
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative;
  font-weight: 600; font-size: 1.05rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details > div { padding: 0 0 18px; color: var(--on-surface-variant); }
.faq details > div p:last-child { margin-bottom: 0; }

/* ---------- station pieces ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: var(--r-full);
  font-size: .85rem; font-weight: 600; line-height: 1.3;
}
.chip svg { width: 16px; height: 16px; flex: none; }
.chip-ok { background: var(--available-container); color: var(--on-available-container); }
.chip-warn { background: var(--warning-container); color: var(--on-warning-container); }
.chip-info { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.chip-off { background: var(--surface-container-highest); color: var(--on-surface); }
.st-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.st-name { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; margin: 0; }
.st-addr { color: var(--on-surface-variant); margin: 4px 0 10px; }
.st-counts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 6px; }
.st-counts b { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; margin-right: 4px; }
.st-counts .zero b { color: var(--on-surface-variant); }
.st-meta { font-size: .9rem; color: var(--on-surface-variant); margin: 0; }
.st-meta span + span::before { content: "·"; margin: 0 8px; }
.sample-note {
  display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 4px 12px; border-radius: var(--r-full);
  background: var(--warning-container); color: var(--on-warning-container); font-size: .85rem; font-weight: 600;
}

/* ---------- maps ---------- */
.map-box { height: 340px; border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--outline-variant); background: var(--surface-container); }
@media (min-width: 880px) { .map-box { height: 420px; } }
.map-fallback { display: grid; place-items: center; height: 100%; padding: 24px; text-align: center; color: var(--on-surface-variant); }
.where-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 24px 0 16px; }
.where-row p { margin: 0; }

.pin {
  display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  border: 2px solid var(--pin-ring); box-shadow: 0 2px 6px var(--shadow); color: #FFFFFF;
  transition: transform .15s;
}
.pin svg { width: 18px; height: 18px; transform: rotate(45deg); }
.pin-ok { background: var(--pin-ok); }
.pin-warn { background: var(--pin-warn); }
.pin-info { background: var(--pin-info); }
.pin-off { background: var(--pin-off); }
.leaflet-marker-icon.is-selected .pin { transform: rotate(-45deg) scale(1.25); }
.leaflet-marker-icon:focus-visible { outline: none; }
.leaflet-marker-icon:focus-visible .pin { outline: 3px solid var(--tertiary); outline-offset: 2px; }
.leaflet-container { font: inherit; background: var(--surface-container); }
.leaflet-container a { color: var(--primary); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface); color: var(--on-surface); box-shadow: 0 4px 16px var(--shadow); }
.leaflet-popup-content { margin: 14px 16px; min-width: 200px; }
.leaflet-popup-content .st-name { font-size: 1rem; }
.leaflet-popup-content p { margin: 4px 0; }
@media (prefers-color-scheme: dark) {
  .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.88) saturate(.6); }
  .leaflet-bar a, .leaflet-bar a:hover { background: var(--surface-container-high); color: var(--on-surface); border-color: var(--outline-variant); }
  .leaflet-control-attribution { background: rgba(16, 20, 24, .8) !important; color: var(--on-surface-variant); }
  .leaflet-container a.leaflet-popup-close-button { color: var(--on-surface-variant); }
}

/* map page */
.map-layout { display: grid; grid-template-areas: "map" "panel"; }
.map-layout #map { grid-area: map; height: 55vh; height: 55dvh; min-height: 300px; }
.map-panel { grid-area: panel; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 900px) {
  .map-layout {
    grid-template-areas: "panel map"; grid-template-columns: 400px 1fr;
    height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h));
  }
  .map-layout #map { height: 100%; min-height: 0; }
  .map-panel { overflow-y: auto; border-right: 1px solid var(--outline-variant); padding: 20px; }
}
.map-panel h1 { font-size: 1.5rem; margin: 0; }
.search { position: relative; }
.search svg { position: absolute; left: 12px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--on-surface-variant); pointer-events: none; }
.search input {
  width: 100%; min-height: 48px; padding: 10px 14px 10px 42px; border-radius: var(--r-m);
  border: 1px solid var(--outline); background: var(--surface); color: var(--on-surface); font: inherit;
}
.search input::placeholder { color: var(--on-surface-variant); }
.panel-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.panel-tools .btn { min-height: 44px; padding: 8px 16px; }
.status { font-size: .9rem; color: var(--on-surface-variant); margin: 0; min-height: 1.4em; }
.status.is-error { color: var(--error); }
.status:empty { display: none; }
.map-panel .sample-note { align-self: flex-start; }
.st-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.st-item {
  position: relative; padding: 14px 16px; border-radius: var(--r-m);
  border: 1px solid var(--outline-variant); background: var(--surface);
}
.st-item:hover { border-color: var(--outline); }
.st-item.is-selected { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.st-item .st-select {
  all: unset; cursor: pointer; font-family: var(--font-display); font-weight: 500; font-size: 1.02rem;
}
.st-item .st-select::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.st-item .st-select:focus-visible::after { outline: 3px solid var(--tertiary); outline-offset: 2px; }
.st-dist { font-weight: 600; color: var(--on-surface); }

/* station page */
.station-hero { padding-block: 40px 24px; }
.barcode-tag {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 6px 12px;
  border-radius: var(--r-s); background: var(--surface-container); font-family: var(--font-code); font-size: .95rem; word-break: break-all;
}
.station-card { margin-top: 20px; }
.station-card .st-name { font-size: 1.3rem; }

/* legal and placeholder pages */
.page { padding-block: 48px 80px; max-width: 48rem; }
.notice {
  display: flex; gap: 12px; align-items: flex-start; padding: 20px; margin: 24px 0;
  border-radius: var(--r-l); background: var(--tertiary-container); color: var(--on-tertiary-container);
}
.notice svg { width: 24px; height: 24px; flex: none; margin-top: 2px; }
.notice p { margin: 0; }
.notice strong { display: block; font-size: 1.05rem; margin-bottom: 4px; }
.notice div p + p { margin-top: 12px; }
.lang-jump { display: flex; flex-wrap: wrap; gap: 8px 20px; font-weight: 600; }
.legal section { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--outline-variant); scroll-margin-top: 88px; }
.legal h2 { font-size: clamp(1.4rem, 3.5vw, 1.8rem); }
.legal h3 { font-size: 1.1rem; margin: 1.6em 0 .4em; }
.legal ul, .legal ol { padding-left: 1.25em; }
.legal li + li { margin-top: 6px; }

/* ---------- footer ---------- */
.site-footer { background: var(--brand-bg); color: #FFFFFF; padding-block: 48px; font-size: .95rem; }
.site-footer .wrap { display: grid; gap: 28px; }
@media (min-width: 880px) { .site-footer .wrap { grid-template-columns: 1fr auto; align-items: start; } }
.site-footer nav ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.site-footer nav a { color: #FFFFFF; }
.site-footer .small { color: rgba(255, 255, 255, .78); margin: 12px 0 0; }
.site-footer .slogan { color: var(--brand-turquoise); font-weight: 600; margin: 16px 0 0; }