:root{
  --apple-font: "SF Pro Text","SF Pro Display","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  --apple-display: "SF Pro Display","SF Pro Text","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  --apple-ease: cubic-bezier(.22,.61,.36,1);
  --apple-ease-fast: cubic-bezier(.2,.8,.2,1);
  --apple-shadow-sm: 0 1px 3px rgba(10,14,24,.05);
  --apple-shadow-md: 0 8px 20px rgba(10,14,24,.08);
  --apple-shadow-lg: 0 14px 34px rgba(10,14,24,.12);
  --apple-shadow-hover: 0 10px 24px rgba(10,14,24,.10);
  --apple-accent-glow: 0 8px 22px color-mix(in srgb,var(--accent) 16%, transparent);
}

@media (prefers-color-scheme: dark){
  :root{
    --apple-shadow-sm: 0 10px 30px rgba(0,0,0,.32);
    --apple-shadow-md: 0 20px 48px rgba(0,0,0,.4);
    --apple-shadow-lg: 0 36px 82px rgba(0,0,0,.5);
    --apple-shadow-hover: 0 24px 62px rgba(0,0,0,.46);
    --apple-accent-glow: 0 12px 28px color-mix(in srgb,var(--accent) 20%, transparent);
  }
}

body{
  font-family:var(--apple-font);
  background:
    radial-gradient(1200px 620px at -10% -12%, color-mix(in srgb,var(--accent) 17%, transparent), transparent 62%),
    radial-gradient(900px 460px at 112% -16%, color-mix(in srgb,var(--accent) 10%, transparent), transparent 65%),
    linear-gradient(180deg, color-mix(in srgb,var(--bg) 94%, #fff 6%), var(--bg));
}

.nav{
  background:color-mix(in srgb,var(--bg) 72%, transparent);
  backdrop-filter:blur(22px) saturate(170%);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  border-bottom:1px solid color-mix(in srgb,var(--border) 70%, transparent);
}

.brand,.nav__links a,.iconbtn,.askbtn,.wabtn,.copybtn,.pv,.bp__cta,.bp__row,.ticketcard,.search,.cmprow input,.cmprow button,.voteshare{
  transition:
    transform .26s var(--apple-ease-fast),
    box-shadow .30s var(--apple-ease),
    border-color .30s var(--apple-ease),
    background-color .30s var(--apple-ease),
    color .30s var(--apple-ease),
    opacity .30s var(--apple-ease),
    filter .30s var(--apple-ease);
}

h1,h2,.nm,.tkname,.tkname a{
  font-family:var(--apple-display);
  letter-spacing:-.026em;
}

.sub,.askhead p,.tagline,.tkagency,.spentline,.due,.pulsenote,.trust,.foot,.meta,.hintbar,.status{
  letter-spacing:.002em;
}

.page,.rail,.wrap{
  gap:14px;
}

.card,.tk,.boardpanel,.daily,.msg,.cmptable,.ob__card,.lanehead,.aiblock,.ticketcard,.st,.bp__stats .st{
  border-radius:16px;
  border:1px solid color-mix(in srgb,var(--border) 72%, transparent);
  box-shadow:var(--apple-shadow-sm);
}

.card,.tk,.boardpanel,.daily,.msg.agent,.cmptable,.ob__card,.ticketcard,.st,.bp__stats .st,.lanehead,.aiblock{
  background:color-mix(in srgb,var(--surface) 86%, transparent);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
}

.nav__links a{
  border-radius:10px;
  padding:7px 11px;
  border:1px solid transparent;
  white-space:nowrap;
}
.nav__links a:hover,.nav__links a.on{
  background:color-mix(in srgb,var(--surface-2) 72%, transparent);
  border-color:color-mix(in srgb,var(--border) 70%, transparent);
}

/* Keep the primary nav on one line on small phones */
@media (max-width:560px){
  .nav__in{
    gap:6px;
    padding:0 10px;
  }
  .nav__links{
    gap:0;
    min-width:0;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .nav__links::-webkit-scrollbar{display:none}
  .nav__links a{
    padding:5px 7px;
    font-size:12px;
    flex:0 0 auto;
  }
  .brand{
    font-size:13px;
    gap:6px;
    flex-shrink:0;
  }
  .nav__btns{
    gap:4px;
    flex-shrink:0;
  }
  .iconbtn{
    height:28px;
    min-width:28px;
    padding:0 7px;
    font-size:11px;
  }
}

.iconbtn{
  border-radius:11px;
  height:32px;
  border:1px solid color-mix(in srgb,var(--border) 72%, transparent);
  background:color-mix(in srgb,var(--surface) 86%, transparent);
}
.iconbtn:active{
  transform:scale(.96);
}

.pininput,.search,.cmprow input,.controls select{
  border-radius:14px;
  border:1px solid color-mix(in srgb,var(--border) 75%, transparent);
  background:color-mix(in srgb,var(--surface) 90%, transparent);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:var(--apple-shadow-sm);
}

.pininput:focus,.search:focus-within,.cmprow input:focus,.controls select:focus{
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%, transparent),var(--apple-shadow-sm);
}

.askbtn,.cmprow button,.bp__cta{
  border-radius:12px;
}
.askbtn:active,.cmprow button:active,.bp__cta:active,.wabtn:active,.copybtn:active,.pv:active{
  transform:scale(.97);
}

.copybtn{
  border-radius:12px;
  border:1px solid color-mix(in srgb,var(--border) 75%, transparent);
  background:color-mix(in srgb,var(--surface) 88%, transparent);
}

.tk,.card,.boardpanel,.daily,.ticketcard,.cmptable,.msg.agent{
  animation:apple-materialize .52s var(--apple-ease) both;
}
.lane .tk:nth-child(3){animation-delay:.03s}
.lane .tk:nth-child(4){animation-delay:.06s}
.lane .tk:nth-child(5){animation-delay:.09s}

@keyframes apple-materialize{
  from{
    opacity:0;
    transform:translateY(10px) scale(.986);
    filter:blur(4px) saturate(108%);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0) saturate(100%);
  }
}

.lanehead{
  border-radius:13px;
  padding:9px 12px;
}

.tier,.lvl,.rankpill,.stamp,.bdg,.chiphead{
  letter-spacing:.045em;
}

.aiblock{
  border-radius:13px;
  border:1px solid color-mix(in srgb,var(--border-2) 78%, transparent);
}

.pulserow .pv{
  border-radius:10px;
  border:1px solid color-mix(in srgb,var(--border) 76%, transparent);
}

.ob{
  background:color-mix(in srgb,var(--bg) 34%, rgba(4,8,20,.52));
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
}

.ob__card{
  border-radius:22px;
  box-shadow:var(--apple-shadow-lg);
  animation:apple-materialize .42s var(--apple-ease) both;
}

.card h2,.askhead h2,.bp__head h2,.ob__s h3{
  letter-spacing:-.02em;
}

.msg.user{
  box-shadow:var(--apple-accent-glow);
}

.foot{
  opacity:.92;
}

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation:none !important;
    transition-duration:.01ms !important;
    transition-delay:0ms !important;
    scroll-behavior:auto !important;
  }
}

@media (prefers-reduced-transparency: reduce){
  .nav,.card,.tk,.boardpanel,.daily,.msg,.cmptable,.ob__card,.lanehead,.aiblock,.ticketcard,.st,.bp__stats .st,.iconbtn,.pininput,.search,.cmprow input,.controls select,.copybtn{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background:var(--surface) !important;
  }
}

@media (prefers-contrast: more){
  .card,.tk,.boardpanel,.daily,.msg,.cmptable,.ob__card,.lanehead,.aiblock,.ticketcard,.st,.bp__stats .st,.iconbtn,.pininput,.search,.cmprow input,.controls select,.copybtn,.pv{
    border-color:color-mix(in srgb,var(--text) 40%, var(--border)) !important;
  }
}


:root[data-theme="light"] .card,
:root[data-theme="light"] .tk,
:root[data-theme="light"] .boardpanel,
:root[data-theme="light"] .daily,
:root[data-theme="light"] .msg,
:root[data-theme="light"] .cmptable,
:root[data-theme="light"] .ob__card,
:root[data-theme="light"] .lanehead,
:root[data-theme="light"] .aiblock,
:root[data-theme="light"] .ticketcard,
:root[data-theme="light"] .st,
:root[data-theme="light"] .bp__stats .st{
  box-shadow:0 1px 2px rgba(10,14,24,.035);
}

/* Light mode: inputs, selects and chat composer stay flat — no resting shadow. */
:root[data-theme="light"] .pininput,
:root[data-theme="light"] .search,
:root[data-theme="light"] .cmprow input,
:root[data-theme="light"] .controls select{
  box-shadow:none;
}
:root[data-theme="light"] .pininput:focus,
:root[data-theme="light"] .search:focus-within,
:root[data-theme="light"] .cmprow input:focus,
:root[data-theme="light"] .controls select:focus{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%, transparent);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .pininput,
  :root:not([data-theme="dark"]) .search,
  :root:not([data-theme="dark"]) .cmprow input,
  :root:not([data-theme="dark"]) .controls select{
    box-shadow:none;
  }
  :root:not([data-theme="dark"]) .pininput:focus,
  :root:not([data-theme="dark"]) .search:focus-within,
  :root:not([data-theme="dark"]) .cmprow input:focus,
  :root:not([data-theme="dark"]) .controls select:focus{
    box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%, transparent);
  }
}

/* Light mode: paper-atlas treatment for OpenFreeMap liberty.
   Canvas only — HTML markers, panels, and controls stay sharp. */
:root[data-theme="light"] .mapstage .maplibregl-canvas{
  filter:saturate(.46) contrast(1.04) brightness(.97) sepia(.04) hue-rotate(-22deg);
}
:root[data-theme="light"] .pmap .maplibregl-canvas{
  /* Milder so choropleth heat still reads */
  filter:saturate(.68) contrast(1.02) brightness(.98) sepia(.03) hue-rotate(-12deg);
}
:root[data-theme="light"] .mapstage .maplibregl-canvas-container,
:root[data-theme="light"] .pmap .maplibregl-canvas-container{
  position:relative;
}
:root[data-theme="light"] .mapstage .maplibregl-canvas-container::after,
:root[data-theme="light"] .pmap .maplibregl-canvas-container::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(165deg, color-mix(in srgb,var(--accent) 8%, transparent) 0%, transparent 46%),
    linear-gradient(0deg, color-mix(in srgb,var(--bg) 22%, transparent), transparent 40%);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .mapstage .maplibregl-canvas{
    filter:saturate(.46) contrast(1.04) brightness(.97) sepia(.04) hue-rotate(-22deg);
  }
  :root:not([data-theme="dark"]) .pmap .maplibregl-canvas{
    filter:saturate(.68) contrast(1.02) brightness(.98) sepia(.03) hue-rotate(-12deg);
  }
  :root:not([data-theme="dark"]) .mapstage .maplibregl-canvas-container,
  :root:not([data-theme="dark"]) .pmap .maplibregl-canvas-container{
    position:relative;
  }
  :root:not([data-theme="dark"]) .mapstage .maplibregl-canvas-container::after,
  :root:not([data-theme="dark"]) .pmap .maplibregl-canvas-container::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      linear-gradient(165deg, color-mix(in srgb,var(--accent) 8%, transparent) 0%, transparent 46%),
      linear-gradient(0deg, color-mix(in srgb,var(--bg) 22%, transparent), transparent 40%);
  }
}


.brand__mark{
  width:22px;height:22px;border-radius:7px;background:var(--accent);color:#fff;
  display:grid;place-items:center;flex-shrink:0;
}
.brand__mark svg{width:14px;height:14px;display:block}
.brand i{display:none!important}

body{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
body > .page,
body > .rail,
body > .wrap,
body > main{
  flex:1 0 auto;
  width:100%;
}

.site-footer{
  margin-top:auto;
  width:100%;
  border-top:1px solid color-mix(in srgb,var(--border) 70%, transparent);
  background:color-mix(in srgb,var(--bg) 88%, transparent);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
}
.site-footer__in{
  max-width:960px;
  margin:0 auto;
  padding:28px 20px 36px;
  display:grid;
  gap:18px;
}
.site-footer__brand p{
  margin:8px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
  max-width:36ch;
}
.site-footer__links{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
}
.site-footer__links a{
  color:var(--muted);
  text-decoration:none;
  font-size:13px;
  font-weight:500;
}
.site-footer__links a:hover{color:var(--text)}
.site-footer__meta{
  margin:0;
  font-size:12px;
  color:var(--faint);
}
.site-footer__credit{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,currentColor 30%, transparent);
}
.site-footer__credit:hover{color:var(--muted)}
@media (min-width:720px){
  .site-footer__in{
    grid-template-columns:1.4fr 1fr;
    align-items:start;
  }
  .site-footer__meta{grid-column:1 / -1}
}