/*
 * Original UI recovery, 2026-07-25.
 *
 * Evidence: the owner-recovered public screenshots and the 89b94fe baseline.
 * This intentionally overrides only the rejected white Atlas shell and added
 * ranking summary chrome. Runtime, data states and responsive safeguards stay
 * in the established stylesheets beneath it.
 */

:root {
  --ig-original-header: #063b25;
  --ig-original-header-deep: #032b1b;
  --ig-original-header-line: rgba(255,255,255,.16);
  --ig-original-header-active: rgba(255,255,255,.13);
}

/* Deterministic language flags. Native flag emoji are not portable: Chromium
   on Windows can render the same Unicode pair as plain "PL/GB/UA" letters. */
.lang-toggle .lang-flag,
.lang-picker .lang-option-flag {
  display: inline-block !important;
  flex: 0 0 24px;
  width: 24px;
  min-width: 24px;
  height: 16px;
  overflow: hidden;
  border-radius: 2px;
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 0 0 1px rgba(12,43,27,.24);
  font-size: 0 !important;
  line-height: 0 !important;
}
.lang-toggle .lang-flag[data-lang="pl"],
.lang-picker .lang-option-flag[data-lang="pl"] { background-image: url('/static/img/flags/pl.svg'); }
.lang-toggle .lang-flag[data-lang="en"],
.lang-picker .lang-option-flag[data-lang="en"] { background-image: url('/static/img/flags/gb.svg'); }

.topbar.compact-topbar.ig-topbar,
body.has-map-shell .topbar.compact-topbar.ig-topbar,
body.has-map-shell .topbar.compact-topbar.ig-topbar--search {
  color: #f5fff1 !important;
  background: linear-gradient(105deg, var(--ig-original-header-deep), var(--ig-original-header)) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ig-original-header-line) !important;
  box-shadow: 0 7px 18px rgba(3,31,19,.22) !important;
}

.topbar.compact-topbar.ig-topbar .brand,
.topbar.compact-topbar.ig-topbar .brand-text strong,
.topbar.compact-topbar.ig-topbar .brand-text > span,
.topbar.compact-topbar.ig-topbar .nav-tile,
.topbar.compact-topbar.ig-topbar .nav-tile:hover,
.topbar.compact-topbar.ig-topbar .nav-tile.is-active,
.topbar.compact-topbar.ig-topbar .lang-code {
  color: #f5fff1 !important;
}

.topbar.compact-topbar.ig-topbar .brand-text > span { color: #cfe7d7 !important; }
.topbar.compact-topbar.ig-topbar .nav-tile { border-color: transparent !important; }
.topbar.compact-topbar.ig-topbar .nav-tile:hover,
.topbar.compact-topbar.ig-topbar .nav-tile.is-active {
  background: var(--ig-original-header-active) !important;
  border-color: rgba(255,255,255,.12) !important;
}

.topbar.compact-topbar.ig-topbar :is(.lang-toggle,.menu-toggle,.account-toggle) {
  color: #f5fff1 !important;
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.22) !important;
}
.topbar.compact-topbar.ig-topbar .topbar-right :is(.lang-toggle,.menu-toggle,.account-toggle) {
  color: #f5fff1 !important;
  background-color: rgba(255,255,255,.08) !important;
  background-image: none !important;
  border-color: rgba(255,255,255,.22) !important;
}
.topbar.compact-topbar.ig-topbar :is(.lang-toggle,.menu-toggle,.account-toggle):hover {
  background: rgba(255,255,255,.17) !important;
}
.topbar.compact-topbar.ig-topbar .ig-header-cta {
  color: #0b2a1b !important;
  background: #a7ff45 !important;
  border-color: #a7ff45 !important;
}

/* Added by the rejected Atlas rebuild; the historical ranking has one data flow. */
body.ig-ranking .ig-rank-metrics,
body.ig-ranking .ig-ranking-aside { display: none !important; }
body.ig-ranking .ig-ranking-layout,
body.ig-ranking .ig-ranking-main { display: block !important; }
body.ig-ranking .rk-wrap { max-width: 1100px; }

@media (max-width: 760px) {
  .topbar.compact-topbar.ig-topbar,
  body.has-map-shell .topbar.compact-topbar.ig-topbar,
  body.has-map-shell .topbar.compact-topbar.ig-topbar--search {
    background: linear-gradient(160deg, var(--ig-original-header-deep), var(--ig-original-header)) !important;
  }
  body.has-map-shell .topbar.compact-topbar.ig-topbar--search .top-search .tab.active {
    color: #0c2b1b !important;
    background: #f8fff4 !important;
  }

  /* The recovered mobile captures have language + menu only.  Atlas added a
     fixed product bar and replaced this compact pair with an account CTA,
     which hid map controls beneath it.  Account remains reachable from the
     restored menu (and keeps its server-authenticated label). */
  body.has-map-shell .topbar.compact-topbar.ig-topbar .ig-header-cta { display: none !important; }
  body.has-map-shell .topbar.compact-topbar.ig-topbar .topbar-right { margin-left: auto !important; }
  body.has-map-shell .topbar.compact-topbar.ig-topbar--search .brand-text > strong {
    display: block !important;
    color: #f5fff1 !important;
    font-size: 18px !important;
    line-height: 1.05 !important;
  }
  body.has-map-shell .topbar.compact-topbar.ig-topbar--search .brand-text > span[data-i18n="tagline"] {
    display: block !important;
    color: #cfe7d7 !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
  }
  body.has-map-shell .topbar.compact-topbar.ig-topbar .topbar-right .lang-toggle,
  body.has-map-shell .topbar.compact-topbar.ig-topbar .topbar-right .menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    color: #0c2b1b !important;
    background: #f8fff4 !important;
    border-color: rgba(12,43,27,.12) !important;
    border-radius: 14px !important;
  }
  body.has-map-shell .topbar.compact-topbar.ig-topbar .topbar-right .lang-code { color: #0c2b1b !important; }

  /* Owner reference 8: on the phone the price choropleth starts immediately
     below the two-row green header.  The desktop explanatory sidebar remains
     unchanged; its factual copy is also available in #mapa-cen-info below the
     map.  The fixed legend stays interactive because it is the one child that
     is not hidden here. */
  body.ig-pricemap .ig-price-sidebar {
    position: relative !important;
    z-index: 2;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
  }
  body.ig-pricemap .ig-price-sidebar > :not(.pm-legend) {
    display: none !important;
  }
  body.ig-pricemap .app-shell.map-first.ig-price-workspace {
    height: 100vh !important;
    min-height: 100vh !important;
  }
  @supports (height: 100dvh) {
    body.ig-pricemap .app-shell.map-first.ig-price-workspace {
      height: 100dvh !important;
      min-height: 100dvh !important;
    }
  }
}

/* The report drawer is modal content. It must end above the persistent mobile
   navigation: using inset:0 here used to cover that navigation. */
@media (max-width: 860px) {
  .ig-report-recovery {
    min-height: 44px;
    margin-top: 12px;
    padding: 8px 14px;
    border: 1px solid currentColor;
    border-radius: 8px;
    background: transparent;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
  }
  .ig-report-state-long-content {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 12px 0;
    padding: 14px 16px;
    border: 1px solid #d9e4db;
    border-radius: 12px;
    background: #fbfdfb;
    box-sizing: border-box;
  }
  .ig-report-state-long-content p {
    margin: 0;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: manual;
    line-height: 1.55;
  }
  body.has-map-shell.report-open #detailsPanel.parcel-drawer .ig-report-status {
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) !important;
    column-gap: 8px !important;
    row-gap: 8px !important;
    align-items: start !important;
  }
  body.has-map-shell.report-open #detailsPanel.parcel-drawer .ig-report-status > span:nth-child(2) {
    min-width: 0 !important;
  }
  body.has-map-shell.report-open #detailsPanel.parcel-drawer .ig-report-status .ig-report-recovery {
    grid-column: 2 !important;
    justify-self: start !important;
  }
  body.has-map-shell.report-open #detailsPanel.parcel-drawer,
  body.has-map-shell.report-open .right-panel.parcel-drawer,
  body.has-map-shell #detailsPanel.parcel-drawer.is-open {
    top: 0 !important;
    right: 0 !important;
    bottom: var(--ig-mobile-nav-height) !important;
    left: 0 !important;
    z-index: 2500 !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }
  body.has-map-shell.report-open #detailsPanel.parcel-drawer .report-content,
  body.has-map-shell.report-open .right-panel.parcel-drawer .report-content {
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }

  /* Reference #2/#3: retain the four real report actions on phones. The brand
     leaves this compact row instead of hiding Watcher or reducing the change
     action to an unlabeled arrow. */
  body.has-map-shell .right-panel.parcel-drawer .drawer-titlebar {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 8px !important;
  }
  body.has-map-shell .parcel-drawer .drawer-report-brand {
    display: none !important;
  }
  body.has-map-shell .parcel-drawer .drawer-change-parcel {
    display: inline-flex !important;
    flex: 1 1 auto;
    min-width: 0 !important;
    width: auto !important;
    height: 44px !important;
    padding: 0 8px !important;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 12px !important;
    line-height: 1 !important;
    white-space: nowrap;
  }
  body.has-map-shell .parcel-drawer .drawer-change-parcel > span[aria-hidden="true"] {
    font-size: 24px;
  }
  body.has-map-shell .parcel-drawer .drawer-change-label {
    display: inline !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.has-map-shell .parcel-drawer .report-guard-btn {
    display: inline-flex !important;
  }
  body.has-map-shell .parcel-drawer :is(.report-fav-btn, .report-guard-btn, .drawer-close) {
    flex: 0 0 44px;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
  }
}

/* P0 A-Z v4: report uses one full-width reading lane on every phone. */
@media (max-width: 767px) {
  html body.has-map-shell.report-open #detailsPanel.parcel-drawer #reportContent,
  html body.has-map-shell.report-open .right-panel.parcel-drawer #reportContent {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 16px 14px max(24px, env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: visible !important;
    box-sizing: border-box !important;
  }

  html body.has-map-shell.report-open #reportContent :is(.ig-parcel-c,.ig-report-primary,.ig-report-group,.ig-main-card,.summary-stack),
  html body.has-map-shell.report-open #reportContent :is(.ig-report-primary__items,.ig-report-group__items,.ig-metric-list) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  html body.has-map-shell.report-open #reportContent :is(.ig-report-primary__items,.ig-report-group__items,.ig-metric-list) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  html body.has-map-shell.report-open #detailsPanel.parcel-drawer #reportContent .ig-metric,
  html body.has-map-shell.report-open #detailsPanel.parcel-drawer #reportContent details.ig-metric--collapsible,
  html body.has-map-shell.report-open .right-panel.parcel-drawer #reportContent .ig-metric,
  html body.has-map-shell.report-open .right-panel.parcel-drawer #reportContent details.ig-metric--collapsible {
    display: block !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    box-sizing: border-box !important;
  }

  html body.has-map-shell.report-open #reportContent .ig-metric__summary {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) 24px !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  html body.has-map-shell.report-open #reportContent :is(.ig-metric__body,.ig-metric__lbl,.ig-metric__val,.ig-metric__details,.ig-rich-detail) {
    min-width: 0 !important;
    max-width: 100% !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: manual !important;
  }

  html body.has-map-shell.report-open #reportContent .ig-metric__details {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 14px 14px !important;
    line-height: 1.55 !important;
    box-sizing: border-box !important;
  }

  html body.has-map-shell.report-open #reportContent :is(p,li,.ig-metric__val,.ig-metric__lbl) {
    line-height: 1.45 !important;
  }

  html body.has-map-shell.report-open #reportContent :is(a,code) {
    overflow-wrap: anywhere !important;
  }

  /* The consent script measures the banner's actual viewport top and exposes
     the required bottom clearance. Keep the report viewport above it without
     moving the nav or changing report flow. */
  html body.has-map-shell.report-open:has(#cookieBanner.active) #detailsPanel.parcel-drawer,
  html body.has-map-shell.report-open:has(#cookieBanner.active) .right-panel.parcel-drawer {
    bottom: max(var(--ig-mobile-nav-height), var(--ig-report-cookie-bottom, 0px)) !important;
  }
}

/* P0 A-Z v4: an opened report metric owns the full grid row at every width.
   Closed desktop/tablet cards keep the approved compact grid; only expanded
   content switches to a vertical reading flow, so no prose is squeezed into
   a side column. */
html body.has-map-shell.report-open #detailsPanel.parcel-drawer #reportContent details.ig-metric--collapsible[open],
html body.has-map-shell.report-open .right-panel.parcel-drawer #reportContent details.ig-metric--collapsible[open] {
  display: block !important;
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  box-sizing: border-box !important;
}

html body.has-map-shell.report-open #detailsPanel.parcel-drawer #reportContent .ig-report-primary:has(details.ig-metric--collapsible[open]),
html body.has-map-shell.report-open .right-panel.parcel-drawer #reportContent .ig-report-primary:has(details.ig-metric--collapsible[open]) {
  display: block !important;
}

html body.has-map-shell.report-open #detailsPanel.parcel-drawer #reportContent .ig-report-primary:has(details.ig-metric--collapsible[open]) > h3,
html body.has-map-shell.report-open .right-panel.parcel-drawer #reportContent .ig-report-primary:has(details.ig-metric--collapsible[open]) > h3,
html body.has-map-shell.report-open #detailsPanel.parcel-drawer #reportContent .ig-report-primary:has(details.ig-metric--collapsible[open]) > .ig-report-primary__items,
html body.has-map-shell.report-open .right-panel.parcel-drawer #reportContent .ig-report-primary:has(details.ig-metric--collapsible[open]) > .ig-report-primary__items {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

html body.has-map-shell.report-open #detailsPanel.parcel-drawer #reportContent .ig-report-primary:has(details.ig-metric--collapsible[open]) > h3,
html body.has-map-shell.report-open .right-panel.parcel-drawer #reportContent .ig-report-primary:has(details.ig-metric--collapsible[open]) > h3 {
  margin-bottom: 10px !important;
}

html body.has-map-shell.report-open #detailsPanel.parcel-drawer #reportContent details.ig-metric--collapsible[open] > .ig-metric__summary,
html body.has-map-shell.report-open .right-panel.parcel-drawer #reportContent details.ig-metric--collapsible[open] > .ig-metric__summary {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) 28px !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

html body.has-map-shell.report-open #detailsPanel.parcel-drawer #reportContent details.ig-metric--collapsible[open] > .ig-metric__summary .ig-metric__body,
html body.has-map-shell.report-open .right-panel.parcel-drawer #reportContent details.ig-metric--collapsible[open] > .ig-metric__summary .ig-metric__body,
html body.has-map-shell.report-open #detailsPanel.parcel-drawer #reportContent details.ig-metric--collapsible[open] > .ig-metric__details,
html body.has-map-shell.report-open .right-panel.parcel-drawer #reportContent details.ig-metric--collapsible[open] > .ig-metric__details {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

html body.has-map-shell.report-open #detailsPanel.parcel-drawer #reportContent details.ig-metric--collapsible[open] > .ig-metric__summary > .ig-metric__icon,
html body.has-map-shell.report-open .right-panel.parcel-drawer #reportContent details.ig-metric--collapsible[open] > .ig-metric__summary > .ig-metric__icon {
  position: static !important;
  inset: auto !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  margin: 0 !important;
}

html body.has-map-shell.report-open #detailsPanel.parcel-drawer #reportContent details.ig-metric--collapsible[open] > .ig-metric__summary > .ig-metric__body,
html body.has-map-shell.report-open .right-panel.parcel-drawer #reportContent details.ig-metric--collapsible[open] > .ig-metric__summary > .ig-metric__body {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: auto !important;
  justify-self: stretch !important;
}

html body.has-map-shell.report-open #detailsPanel.parcel-drawer #reportContent details.ig-metric--collapsible[open] > .ig-metric__summary > .ig-metric__caret,
html body.has-map-shell.report-open .right-panel.parcel-drawer #reportContent details.ig-metric--collapsible[open] > .ig-metric__summary > .ig-metric__caret {
  position: static !important;
  inset: auto !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  margin: 0 !important;
}

.ig-eligibility {
  display: grid;
  gap: 5px;
  width: 100%;
  margin: 12px 0;
  padding: 14px 16px;
  border: 1px solid #e8c873;
  border-radius: 14px;
  color: #5b4310;
  background: #fff8e5;
  box-sizing: border-box;
  line-height: 1.45;
}
.ig-eligibility--blocked { border-color: #e7a4a4; color: #6e2020; background: #fff0f0; }
.ig-eligibility strong { font-size: 15px; }
.ig-eligibility span { font-size: 13px; }
.ig-eligibility small { font-size: 11px; font-weight: 750; letter-spacing: .035em; }
.ig-price-quality {
  display: inline-block;
  margin: 2px 0;
  padding: 2px 7px;
  border: 1px solid #d7c58f;
  border-radius: 999px;
  color: #694f13;
  background: #fff6d9;
  font-weight: 800;
}
