/* Jersey City Rent Control Map
   Aligned to the City of Jersey City seal-anchored brand identity.
   Palette, typography, and the navy/gold signature follow the official
   brand guidelines (Seal Navy #25235A, Seal Gold #DEB038, Cream #FAF7F0).

   Type: the city's licensed faces are Trade Gothic (sans) and Garamond (serif).
   Those aren't web-licensed, so this build maps to the closest free equivalents:
     - Oswald       -> tracked uppercase wordmarks & department lockups
     - Archivo      -> UI, headings, body (neo-grotesque, close to Trade Gothic)
     - EB Garamond  -> formal serif accent (stands in for Garamond)
   Swap in the licensed webfonts if the city has them. */

:root {
  --navy:        #25235A;   /* Seal Navy — primary */
  --navy-700:    #322f6e;
  --navy-600:    #403c82;
  --navy-900:    #1b1a44;
  --gold:        #DEB038;   /* Seal Gold — accent */
  --gold-soft:   #ecd08a;
  --gold-deep:   #a9801f;
  --cream:       #FAF7F0;   /* Cream — light background */
  --dark:        #1C1C1E;   /* Dark — body text */
  --white:       #FFFFFF;

  --slate:       #63627a;
  --line:        #e2ddd0;
  --line-cool:   #d9d7e4;
  --amber-bg:    #fbf1d4;
  --amber-line:  var(--gold);

  --shadow-panel: 0 8px 40px rgba(37, 35, 90, 0.20);
  --shadow-card:  0 1px 3px rgba(37, 35, 90, 0.10), 0 6px 20px rgba(37, 35, 90, 0.06);

  --wordmark: 'Oswald', 'Arial Narrow', sans-serif;
  --sans: 'Archivo', system-ui, -apple-system, sans-serif;
  --serif: 'EB Garamond', Garamond, 'Times New Roman', serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  font-family: var(--sans);
  color: var(--dark);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wordmark {
  font-family: var(--wordmark);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
}

/* ---------- preview banner (remove for production) ---------- */
.preview-flag {
  background: var(--navy-900);
  color: var(--gold-soft);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 5px 12px;
  font-weight: 600;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--navy-700);
}

/* ---------- masthead ---------- */
.masthead {
  background: var(--navy);
  color: var(--white);
  flex: 0 0 auto;
  border-bottom: 3px solid var(--gold);
}
.masthead-inner {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 13px 22px;
  max-width: 1440px;
  margin: 0 auto;
}

/* Tier 1 identity: the official City of Jersey City seal */
.city-seal {
  flex: 0 0 auto;
  display: block;
  width: 60px; height: 60px;
  /* the seal's outer ring is navy; a hairline gold ring + soft halo lifts it
     off the navy masthead so the edge reads cleanly */
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--gold), 0 0 0 4px rgba(250, 247, 240, 0.10);
}
.panel-head .panel-seal {
  width: 40px; height: 40px;
  box-shadow: 0 0 0 1px var(--gold), 0 0 0 3px rgba(250, 247, 240, 0.10);
}

.mast-titles { display: flex; flex-direction: column; gap: 3px; }
.mast-lockup {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--wordmark);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.15em;
  font-weight: 500;
}
.mast-lockup .jc { color: var(--white); }
.mast-lockup .rule { width: 1px; height: 12px; background: var(--gold); }
.mast-lockup .dept { color: var(--gold-soft); }
.masthead h1 {
  font-family: var(--serif);
  font-size: 22px; font-weight: 600; margin: 0; letter-spacing: 0.005em;
}

.masthead-actions { margin-left: auto; display: flex; gap: 8px; }
.mast-btn {
  background: var(--gold); color: var(--navy);
  border: 1px solid var(--gold);
  border-radius: 4px; padding: 9px 16px;
  font-family: var(--wordmark); text-transform: uppercase;
  font-size: 12px; font-weight: 600; letter-spacing: 0.09em;
  cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.15), 0 0 0 rgba(222,176,56,0.5);
  transition: background 0.15s, box-shadow 0.15s, transform 0.05s;
}
.mast-btn::before {
  content: ''; width: 15px; height: 15px; flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}
.mast-btn:hover {
  background: #e9c458;
  box-shadow: 0 1px 0 rgba(0,0,0,0.15), 0 0 0 3px rgba(222,176,56,0.35);
}
.mast-btn:active { transform: translateY(1px); }
.mast-btn:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

/* ---------- audit banner ---------- */
.audit-banner {
  background: var(--amber-bg);
  border-bottom: 1px solid var(--amber-line);
  color: #6a5310;
  font-size: 12.5px; line-height: 1.45;
  padding: 8px 22px;
  flex: 0 0 auto;
  text-align: center;
}
.audit-banner strong { font-weight: 700; color: #574209; }
.audit-banner button {
  background: none; border: none; color: var(--gold-deep);
  font: inherit; font-weight: 700; text-decoration: underline;
  cursor: pointer; padding: 0;
}

/* ---------- main split ---------- */
.stage { flex: 1 1 auto; position: relative; min-height: 0; display: flex; }

.sidebar {
  width: 344px; flex: 0 0 344px;
  background: var(--white);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  z-index: 5;
}
.search-wrap { padding: 20px 20px 16px; border-bottom: 1px solid var(--line); }
.search-label {
  font-family: var(--wordmark); text-transform: uppercase;
  font-size: 12px; font-weight: 600; color: var(--navy);
  letter-spacing: 0.12em; margin: 0 0 10px;
}
.search-label::after {
  content: ''; display: block; width: 34px; height: 2px;
  background: var(--gold); margin-top: 6px;
}
.search-box { position: relative; }
.search-box input {
  width: 100%; padding: 11px 12px 11px 36px;
  border: 1.5px solid var(--line-cool); border-radius: 6px;
  font: inherit; font-size: 14px; color: var(--dark); background: var(--cream);
}
.search-box input:focus {
  outline: none; border-color: var(--navy-600);
  box-shadow: 0 0 0 3px rgba(64,60,130,0.16); background: var(--white);
}
.search-box .icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--slate); pointer-events: none;
}
.search-hint { font-size: 11.5px; color: var(--slate); margin: 9px 2px 0; line-height: 1.45; }

.results { overflow-y: auto; flex: 1 1 auto; }
.result-item {
  padding: 12px 20px; border-bottom: 1px solid var(--cream);
  cursor: pointer; transition: background 0.12s; border-left: 3px solid transparent;
}
.result-item:hover, .result-item.active { background: #f3f1fa; border-left-color: var(--gold); }
.result-item .addr { font-size: 14px; font-weight: 600; color: var(--dark); }
.result-item .meta {
  font-family: var(--mono); font-size: 11px; color: var(--slate); margin-top: 3px;
}
.result-empty { padding: 22px 20px; color: var(--slate); font-size: 13px; line-height: 1.55; }
.result-empty .cta-inline {
  color: var(--navy-600); font-weight: 600; text-decoration: underline;
  cursor: pointer; background: none; border: none; padding: 0; font: inherit;
}

.sidebar-foot { border-top: 1px solid var(--line); padding: 16px 20px; }
.sidebar-foot .count {
  font-family: var(--mono); font-size: 11px; color: var(--slate);
  letter-spacing: 0.02em; margin-bottom: 3px;
}
/* Fine print: the date the published list was generated. */
.sidebar-foot .generated {
  font-size: 10.5px; color: var(--slate); opacity: 0.85;
  letter-spacing: 0.01em; margin-bottom: 13px;
}
.sidebar-foot .generated time { border-bottom: 1px dotted var(--line-cool); }
.act {
  display: flex; align-items: flex-start; gap: 11px; width: 100%;
  text-align: left; text-decoration: none;
  padding: 12px 13px; border-radius: 6px; margin-bottom: 9px;
  border: 1.5px solid var(--line-cool); background: var(--white);
  color: var(--dark); font: inherit; cursor: pointer;
  transition: border-color 0.14s, background 0.14s;
}
.act:hover { border-color: var(--navy-600); background: #f7f6fc; }
.act:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.act .act-icon {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 5px;
  display: grid; place-items: center; background: var(--navy); color: var(--gold);
}
.act .act-title { font-size: 13.5px; font-weight: 700; line-height: 1.2; }
.act .act-sub { font-size: 11.5px; color: var(--slate); margin-top: 3px; line-height: 1.4; }

/* ---------- map ---------- */
.map-wrap { position: relative; flex: 1 1 auto; display: flex; min-width: 0; }
#map { flex: 1 1 auto; background: #e7e4ee; }
.leaflet-popup-content-wrapper { border-radius: 8px; box-shadow: var(--shadow-panel); padding: 0; overflow: hidden; }
.leaflet-popup-content { margin: 0; width: 264px !important; }
.pop { font-family: var(--sans); }
.pop-head { background: var(--navy); color: var(--white); padding: 13px 15px 12px; border-bottom: 2px solid var(--gold); }
.pop-head .pop-addr { font-family: var(--serif); font-size: 17px; font-weight: 600; line-height: 1.2; }
.pop-head .pop-aka { font-size: 11.5px; color: var(--gold-soft); margin-top: 3px; }
.pop-status {
  display: inline-block; margin: 11px 15px 0;
  background: var(--navy); color: var(--gold);
  font-family: var(--wordmark); text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 10.5px; font-weight: 600; padding: 4px 10px; border-radius: 3px;
}
.pop-grid { padding: 11px 15px 4px; display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; }
.pop-grid dt {
  font-family: var(--wordmark); font-size: 10.5px; color: var(--slate);
  text-transform: uppercase; letter-spacing: 0.08em; align-self: center;
}
.pop-grid dd { margin: 0; font-family: var(--mono); font-size: 12px; color: var(--dark); }
.pop-note { padding: 9px 15px 15px; font-size: 11px; color: var(--slate); line-height: 1.45; }

.map-note {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  z-index: 500; background: var(--navy-900); color: var(--gold-soft);
  font-size: 11px; padding: 6px 15px; border-radius: 4px;
  letter-spacing: 0.03em; box-shadow: var(--shadow-card); pointer-events: none;
  max-width: 90%; text-align: center; border: 1px solid var(--navy-700);
}

/* ---------- slide-over panel ---------- */
.scrim {
  position: fixed; inset: 0; background: rgba(27, 26, 68, 0.48);
  opacity: 0; pointer-events: none; transition: opacity 0.25s; z-index: 3000;
}
.scrim.open { opacity: 1; pointer-events: auto; }
.panel {
  position: fixed; top: 0; right: 0; height: 100%; width: 540px; max-width: 92vw;
  background: var(--cream); box-shadow: var(--shadow-panel);
  transform: translateX(100%); transition: transform 0.28s cubic-bezier(.4,0,.2,1);
  z-index: 3001; display: flex; flex-direction: column;
}
.panel.open { transform: translateX(0); }
.panel-head {
  background: var(--navy); color: var(--white);
  padding: 22px 28px; display: flex; align-items: center; gap: 13px;
  border-bottom: 3px solid var(--gold);
}
.panel-head h2 { margin: 0; font-family: var(--serif); font-size: 21px; font-weight: 600; }
.panel-close {
  margin-left: auto; background: none; border: none; color: var(--white);
  cursor: pointer; padding: 4px; border-radius: 5px; line-height: 0;
}
.panel-close:hover { background: rgba(255,255,255,0.14); }
.panel-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.panel-body { overflow-y: auto; padding: 8px 28px 44px; }

.panel-body h3 {
  font-family: var(--wordmark); text-transform: uppercase; letter-spacing: 0.09em;
  font-size: 14px; color: var(--navy); margin: 28px 0 10px; font-weight: 600;
  padding-bottom: 7px; border-bottom: 2px solid var(--gold);
}
.panel-body h3:first-child { margin-top: 18px; }
.panel-body h4 { font-size: 13.5px; color: var(--navy-900); margin: 16px 0 4px; }
.panel-body p { font-size: 14px; line-height: 1.62; color: var(--dark); margin: 0 0 10px; }
.panel-body ul { margin: 0 0 12px; padding-left: 20px; }
.panel-body li { font-size: 14px; line-height: 1.58; margin-bottom: 6px; }
.panel-body a { color: var(--navy-600); text-underline-offset: 2px; }
.panel-body a:hover { color: var(--gold-deep); }

.callout {
  background: var(--white); border: 1px solid var(--line);
  border-left: 3px solid var(--gold); border-radius: 6px;
  padding: 14px 16px; margin: 14px 0; box-shadow: var(--shadow-card);
}
.callout p { margin: 0; font-size: 13px; }
.exemption {
  background: var(--white); border: 1px solid var(--line); border-radius: 6px;
  padding: 13px 15px; margin-bottom: 10px;
}
.exemption .ex-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.exemption .ex-name { font-size: 13.5px; font-weight: 700; color: var(--navy); }
.exemption .ex-cite {
  font-family: var(--mono); font-size: 11px; color: var(--gold-deep);
  font-weight: 600; white-space: nowrap;
}
.exemption p { font-size: 12.5px; margin: 6px 0 0; color: var(--slate); }

.disclaimer-block {
  background: var(--amber-bg); border: 1px solid var(--amber-line);
  border-radius: 6px; padding: 15px 17px; margin: 16px 0;
}
.disclaimer-block p { font-size: 13px; color: #6a5310; margin: 0 0 8px; line-height: 1.55; }
.disclaimer-block p:last-child { margin-bottom: 0; }
.disclaimer-block strong { color: #574209; }

.panel-lockup {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line);
  text-align: center;
}
.panel-lockup .jc-word {
  font-family: var(--wordmark); text-transform: uppercase; letter-spacing: 0.2em;
  font-size: 15px; font-weight: 600; color: var(--navy); display: inline-block;
}
.panel-lockup .jc-word::after {
  content: ''; display: block; width: 60px; height: 2px; background: var(--gold);
  margin: 5px auto 0;
}
.panel-lockup .motto {
  font-family: var(--serif); font-style: italic; font-size: 13px;
  color: var(--slate); margin-top: 8px;
}

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  /* Mobile is a normal scrolling page, not a fixed two-pane split.
     The old rule capped .sidebar at 46vh while its children kept their
     natural height, so the action buttons overflowed the container and the
     map painted over them. Let the sidebar size to its content and let the
     document scroll instead. */
  html, body { height: auto; }
  body { overflow-x: hidden; overflow-y: auto; }

  .stage { flex-direction: column; min-height: 0; }

  .sidebar {
    width: 100%; flex: 0 0 auto;
    max-height: none;                 /* was 46vh - the cause of the overlap */
    border-right: none; border-bottom: 1px solid var(--line);
  }
  /* Results still scroll internally so a 40-hit list doesn't push the map
     off the bottom of the world, but the container is no longer clipped. */
  .results { max-height: 46vh; overflow-y: auto; }

  /* .map-wrap is display:flex on desktop. On mobile the map is the only child
     and must fill it, so give the wrapper block layout and the map an explicit
     width. A flex child with `flex: 0 0 auto` and no intrinsic content collapses
     to zero width - that is what blanked the map on iOS. */
  .map-wrap { display: block; flex: 0 0 auto; width: 100%; }
  #map { display: block; width: 100%; height: 58vh; min-height: 320px; flex: none; }

  /* Masthead: let it wrap instead of forcing the page wider than the screen. */
  .masthead-inner { flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
  .mast-titles { min-width: 0; flex: 1 1 auto; }
  .masthead h1 { font-size: 18px; }
  .mast-lockup { flex-wrap: wrap; font-size: 10px; letter-spacing: 0.12em; row-gap: 2px; }
  .city-seal { width: 46px; height: 46px; }
  .audit-banner { padding: 8px 16px; text-align: left; }
}

@media (max-width: 560px) {
  /* Full-width call to action reads better than a squeezed one, and it stops
     the header from overflowing horizontally on the narrowest phones. */
  .masthead-actions { width: 100%; margin-left: 0; }
  .mast-btn { width: 100%; justify-content: center; white-space: normal; }
  /* The HTML wraps "Understanding " in .label-full so the button can shorten
     to just "Rent Control" on the narrowest phones. */
  .label-full { display: none; }
  .masthead h1 { font-size: 17px; }
  .mast-lockup .dept { font-size: 9.5px; }
  #map { height: 52vh; min-height: 300px; }
  .sidebar-foot, .search-wrap { padding-left: 16px; padding-right: 16px; }
  .result-item, .result-empty, .result-head { padding-left: 16px; padding-right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .panel, .scrim { transition: none; }
}

/* ---------- marker clusters — override Leaflet defaults to navy/gold ---------- */
.marker-cluster {
  background: rgba(37, 35, 90, 0.25);
}
.marker-cluster div {
  background: var(--navy);
  color: var(--white);
  font-family: var(--wordmark);
  font-weight: 600;
  letter-spacing: 0.03em;
  border: 2px solid var(--gold);
}
.marker-cluster span { line-height: 26px; }

/* ---------- result count / suggestion header ---------- */
.result-head {
  font-size: 11.5px;
  font-family: var(--mono);
  color: var(--slate);
  letter-spacing: 0.02em;
  padding: 10px 20px 6px;
  border-bottom: 1px solid var(--cream);
}
/* A suggestion is a guess, not a determination — mark it visibly. */
.result-head.is-suggestion {
  font-family: var(--sans);
  font-weight: 600;
  color: #6a5310;
  background: var(--amber-bg);
  border-bottom: 1px solid var(--amber-line);
}

/* ---------- no-match state ---------- */
.result-empty .empty-lead {
  font-size: 14px; font-weight: 700; color: var(--dark); margin: 0 0 10px;
}
/* The "absence is not exemption" sentence carries the same weight as a result. */
.result-empty .empty-key {
  font-size: 13.5px; line-height: 1.55; color: var(--dark);
  background: var(--amber-bg);
  border: 1px solid var(--amber-line);
  border-radius: 6px;
  padding: 11px 13px;
  margin: 0 0 12px;
}
.result-empty p { margin: 0 0 10px; }
.result-empty .empty-contact {
  font-size: 12.5px; line-height: 1.6; color: var(--slate);
  border-top: 1px solid var(--line); padding-top: 10px; margin-bottom: 0;
}
.result-empty .empty-contact a { color: var(--navy-600); }

/* ---------- "About this list" modal, shown on open ---------- */
.about-scrim {
  position: fixed; inset: 0;
  background: rgba(27, 26, 68, 0.62);
  display: grid; place-items: center;
  padding: 20px;
  overflow-y: auto;
  z-index: 4000;                 /* above the panel (3001) and Leaflet */
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s;
}
.about-scrim.open { opacity: 1; pointer-events: auto; }

.about-modal {
  background: var(--cream);
  width: 560px;
  /* Bound by the viewport, not by the (possibly wider) document. */
  max-width: min(560px, calc(100vw - 32px));
  max-height: min(88vh, calc(100dvh - 32px));
  border-radius: 8px;
  box-shadow: var(--shadow-panel);
  border-top: 4px solid var(--gold);
  display: flex; flex-direction: column;
  transform: translateY(10px) scale(0.99);
  transition: transform 0.22s cubic-bezier(.4,0,.2,1);
}
.about-scrim.open .about-modal { transform: none; }

.about-head {
  background: var(--navy); color: var(--white);
  padding: 20px 26px; display: flex; align-items: center; gap: 14px;
  border-bottom: 3px solid var(--gold);
}
.about-head h2 {
  margin: 0; font-family: var(--serif); font-size: 22px; font-weight: 600;
}
.about-seal { width: 44px; height: 44px; }

.about-body { padding: 22px 26px 6px; overflow-y: auto; }
.about-body p {
  font-size: 14.5px; line-height: 1.62; color: var(--dark); margin: 0 0 14px;
}
.about-body p:last-child { margin-bottom: 0; }
.about-body strong { color: var(--navy); }

.about-foot {
  padding: 18px 26px 22px; display: flex; justify-content: flex-end;
}
.about-btn {
  background: var(--gold); color: var(--navy);
  border: 1px solid var(--gold); border-radius: 4px;
  padding: 11px 22px;
  font-family: var(--wordmark); text-transform: uppercase;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.09em;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}
.about-btn:hover { background: #e9c458; box-shadow: 0 0 0 3px rgba(222,176,56,0.35); }
.about-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

@media (max-width: 560px) {
  .about-scrim { padding: 12px; align-items: center; }
  .about-modal {
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
  }
  .about-head { padding: 14px 16px; gap: 11px; }
  .about-head h2 { font-size: 18px; line-height: 1.2; }
  .about-seal { width: 36px; height: 36px; }
  .about-body { padding: 16px 16px 4px; }
  .about-body p { font-size: 13.5px; line-height: 1.55; margin-bottom: 12px; }
  .about-foot { padding: 14px 16px 18px; }
  .about-btn { width: 100%; padding: 13px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .about-scrim, .about-modal { transition: none; }
}