/* Platform layer: Home page and supplier categories in the sidebar. Loaded after style.css and tools.css. */
:root {
  --cat-leasing: #2f7d52; --cat-leasing-tint: #edf5ec;
  --cat-fuel: #b7862a;    --cat-fuel-tint: #fbf3e3;
  --cat-ev: #3f7fb8;      --cat-ev-tint: #eaf2fa;
}

/* ---------- sidebar: Home, then one block per supplier category ---------- */
.nav-top { margin-bottom: 6px; }
.cat { display: flex; flex-direction: column; gap: 2px; }
.cat-head { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: transparent; padding: 9px 10px; border-radius: 10px; font-size: 15px; color: var(--ink); text-align: left; }
.cat-head:hover:not(:disabled) { background: rgba(17, 17, 17, 0.04); }
.cat-head .chev { width: 16px; height: 16px; margin-left: auto; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.cat[data-open] .cat-head { font-weight: 600; }
.cat[data-open] .cat-head .chev { transform: rotate(90deg); }
.cat-ico { display: inline-flex; width: 18px; height: 18px; color: var(--cat-leasing); flex: none; }
.cat-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cat-tabs { display: none; margin: 0 0 6px 19px; padding-left: 10px; border-left: 1px solid var(--border); }
.cat[data-open] .cat-tabs { display: flex; }
.cat-tabs button { font-size: 14px; padding: 7px 10px; }
.cat-tabs button svg { display: none; }
.cat.soon .cat-head { color: var(--muted); cursor: default; }
.cat.soon .cat-ico { color: var(--muted); }
.soon-pill { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--ink-2); background: var(--surface-2); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }

/* page title inside a category: "Leasing / Coverage map" */
#page-title .crumb { color: var(--muted); }
#page-title .crumb::after { content: "/"; margin: 0 8px; color: var(--axis); }

/* Home has its own hero and search; the category filter bar and top bar belong to the category pages */
body[data-tab="home"] .topbar, body[data-tab="home"] .filterbar { display: none; }
body[data-tab="home"] .content { padding-top: 0; }

/* ---------- Home ---------- */
#home-root { display: flex; flex-direction: column; gap: 40px; }
.home { max-width: 1120px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 40px; padding-bottom: 24px; }
.hero { padding: 56px 0 4px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.eyebrow { margin: 0; font-size: 13px; font-weight: 500; color: var(--cat-leasing); }
.hero-title { font-size: 40px; line-height: 1.12; font-weight: 600; letter-spacing: -0.025em; margin: 0; max-width: 760px; }
.hero-sub { margin: 0; font-size: 17px; color: var(--ink-2); max-width: 680px; }
.hero-search { width: 100%; max-width: 640px; margin-top: 12px; }
.hero-search input { width: 100%; font-size: 16px; padding: 14px 18px 14px 46px; box-shadow: var(--shadow); }
.hero-search .search-ico { left: 17px; width: 18px; height: 18px; }
.hero-search .dropdown { left: 0; right: auto; width: 100%; }
.quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.quick .muted-i { margin-right: 2px; }
.chip { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 5px 12px; font-size: 13px; color: var(--ink); }
.chip:hover { border-color: #c9c9c7; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

.home-sec { display: flex; flex-direction: column; gap: 14px; }
.sec-head h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }

/* category cards (same look as papayadash.com feature cards) */
.cat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cat-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 10px; text-decoration: none; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.cat-card.live:hover { border-color: #cfcfcd; box-shadow: var(--shadow-pop); }
.cat-card.live:hover .cc-arrow { transform: translateX(3px); }
.cc-art { border-radius: 14px; height: 168px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.cc-art.leasing { background: linear-gradient(140deg, var(--cat-leasing-tint), #fafaf8 75%); }
.cc-art.fuel { background: linear-gradient(140deg, var(--cat-fuel-tint), #fafaf8 75%); }
.cc-art.ev { background: linear-gradient(140deg, var(--cat-ev-tint), #fafaf8 75%); }
.cc-art svg#home-map { width: 100%; height: 100%; display: block; }
.cc-icon { width: 64px; height: 64px; color: var(--muted); }
.cc-art.fuel .cc-icon { color: var(--cat-fuel); }
.cc-art.ev .cc-icon { color: var(--cat-ev); }
.cc-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.cc-body { padding: 16px 12px 10px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.cc-kicker { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); font-weight: 500; }
.cat-card.soon .cat-ico { color: var(--muted); }
.cc-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cc-title h3 { margin: 0; font-size: 19px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.cc-arrow { font-size: 20px; color: var(--ink-2); transition: transform .15s; }
.cc-body p { margin: 0; font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.cc-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: auto; padding-top: 8px; font-size: 13px; color: var(--muted); }
.cc-stats b { color: var(--ink); font-weight: 600; font-size: 15px; }
.cat-card.soon { color: var(--ink-2); }
.cat-card.soon .cc-title h3 { color: var(--ink-2); }
/* only one live category: one wide card, map on the left */
.cat-grid.single { grid-template-columns: 1fr; }
.cat-grid.single .cat-card { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 8px; }
.cat-grid.single .cc-art { height: 280px; }
.cat-grid.single .cc-body { padding: 20px 20px 16px 24px; justify-content: center; }
.cat-grid.single .cc-title h3 { font-size: 24px; }
.cat-grid.single .cc-stats { margin-top: 8px; }

/* intents: the three ways fleet managers start */
.intent-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.intent { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.intent h3 { margin: 4px 0 0; font-size: 16px; font-weight: 600; color: var(--ink); }
.intent p { margin: 0; color: var(--ink-2); font-size: 14px; }
.in-ico { width: 36px; height: 36px; border-radius: 10px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; }
.in-ico svg { width: 19px; height: 19px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.intent .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.in-act { margin-top: auto; padding-top: 8px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.in-act select { width: 100%; border-radius: 12px; padding: 10px 12px; }
.go-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--ink); color: #fff; border-radius: 999px; padding: 9px 16px; font-size: 14px; font-weight: 500; }
.go-btn:hover:not(:disabled) { background: #000; }
.go-btn:disabled { background: var(--surface-2); color: var(--muted); cursor: default; }
.text-link { font-size: 13px; color: var(--ink-2); }

.home-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; border-top: 1px solid var(--border); padding-top: 20px; font-size: 13px; }
.home-trust div { display: flex; flex-direction: column; gap: 2px; }
.home-trust span { color: var(--muted); }

@media (max-width: 1100px) {
  .cat-grid, .intent-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  /* phone app bar: [logo ............ Papaya →] / [Home] [Leasing] [Fuel] [EV] / tabs of the open category */
  .sidebar { position: static; display: flex; flex-wrap: wrap; align-items: center; gap: 0; padding: 10px 16px 0; overflow: visible; }
  .sidebar::before { content: ""; order: 2; flex-basis: 100%; height: 8px; }
  .logo { order: 0; padding: 4px 0; margin-right: auto; }
  .logo img { height: 20px; }
  .side-card { order: 1; margin: 0; padding: 0; border: 0; background: none; }
  .side-card .cta { padding: 6px 12px; font-size: 13px; box-shadow: none; }
  .nav-label { display: none; }
  .nav-top { order: 3; width: auto !important; margin: 0; flex-direction: row; }
  .cat, #cat-more { display: contents; }
  .cat-head { order: 4; width: auto; white-space: nowrap; }
  .nav-top button, .cat-head { font-size: 14px; padding: 6px 12px; gap: 8px; border-radius: 999px; }
  .nav-top button svg, .cat-head .cat-ico, .cat-head .cat-ico svg { width: 16px; height: 16px; }
  .nav-top button[aria-selected="true"], .cat[data-open] .cat-head { background: #ececeb; font-weight: 500; }
  .cat-head .chev, .cat.soon .soon-pill { display: none; }
  /* Home + four categories on one row at 360px: Home as an icon, short category names, no category icons */
  .cat-head .cat-ico { display: none; }
  .nav-top button, .cat-head { padding: 6px 9px; }
  .nav-top button { font-size: 0; gap: 0; }
  .nav-top button svg { display: block; width: 17px; height: 17px; }
  .cat-head .nm { font-size: 0; }
  .cat-head .nm::after { content: attr(data-short); font-size: 14px; }
  .top-actions { width: 100%; }
  /* map controls: one scrollable row instead of overflowing the map */
  .map-toolbar { flex-wrap: wrap; justify-content: flex-start; }
  .map-toolbar .seg { font-size: 13px; }
  /* the open category's pages: one scrollable row of underline tabs */
  .cat-tabs, .cat[data-open] .cat-tabs { order: 6; width: calc(100% + 32px); margin: 8px -16px 0; padding: 0 12px; border: 0; border-top: 1px solid var(--border);
    flex-direction: row; gap: 0; overflow-x: auto; scrollbar-width: none; }
  .cat-tabs::-webkit-scrollbar { display: none; }
  .cat-tabs button { padding: 11px 8px 9px; margin: 0 2px; border-radius: 0; font-size: 14px; white-space: nowrap; border-bottom: 2px solid transparent; color: var(--ink-2); }
  .cat-tabs button:hover { background: none; }
  .cat-tabs button[aria-selected="true"] { background: none; color: var(--ink); font-weight: 500; border-bottom-color: var(--ink); }
  .sidebar:not(:has(.cat[data-open])) { padding-bottom: 10px; }
  .topbar { position: static; }
  .hero { padding-top: 24px; }
  .hero-title { font-size: 30px; }
  .hero-sub { font-size: 15px; }
  .hero-search input { font-size: 16px; padding: 12px 14px 12px 42px; }
  .cat-grid, .intent-grid, .home-trust, .cat-grid.single .cat-card { grid-template-columns: 1fr; }
  .cat-grid.single .cc-art { height: 200px; }
  .cat-grid.single .cc-body { padding: 16px 12px 10px; }
  .home { gap: 32px; }
  #home-root { gap: 32px; }
}
}

/* short screens: the open category and the Papaya card must both stay reachable */
@media (min-width: 861px) { .sidebar { overflow-y: auto; } }

/* ---------- Prices: providers of one country on a shared euro axis ---------- */
#tab-prices.active { display: flex; flex-direction: column; gap: 16px; }
#prices-root { display: flex; flex-direction: column; gap: 16px; }
.pr-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 24px; }
.pr-pick { display: flex; flex-direction: column; gap: 6px; min-width: 260px; }
.pr-pick select { border-radius: 12px; padding: 9px 12px; font-size: 15px; font-weight: 500; }
.pr-ctrls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pr-ctrls select { min-width: 0; padding: 6px 12px; font-size: 13.5px; }
.pr-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.pr-chart svg { display: block; overflow: visible; }
.pr-axis line { stroke: var(--grid); }
.pr-axis text { fill: var(--muted); font-size: 11px; }
.pr-row { cursor: pointer; }
.pr-hit { fill: transparent; }
.pr-row:hover .pr-hit { fill: var(--surface-3); }
.pr-row.sel .pr-hit { fill: var(--surface-2); }
.pr-row.dim { opacity: .35; }
.pr-name { font-size: 13px; fill: var(--ink); font-weight: 500; }
.pr-span { stroke: var(--axis); stroke-width: 2; stroke-linecap: round; }
.pr-dot { fill: var(--pr-4, #4f97cf); fill-opacity: .85; stroke: var(--surface); stroke-width: 1.5; cursor: pointer; }
.pr-dot:hover { fill-opacity: 1; stroke: var(--ink); }
.pr-med { fill: var(--ink); }
.pr-val { font-size: 13px; font-weight: 600; fill: var(--ink); }
.pr-val .pr-n { font-weight: 400; fill: var(--muted); font-size: 12px; }
.pr-note { margin: 12px 0 0; }
@media (max-width: 860px) {
  .pr-pick { min-width: 0; width: 100%; }
  .pr-ctrls .seg { max-width: 100%; overflow-x: auto; }
}

/* ---------- categories: each one's map ramp (same steps as CAT_RAMP in app.js) and accent ---------- */
:root[data-cat="fuel"] { --seq-1: #f6ecd2; --seq-2: #ecd6a3; --seq-3: #dfbd76; --seq-4: #cfa04f; --seq-5: #b8862f; --seq-6: #976a1e; --seq-7: #744f12; --accent: #976a1e; }
:root[data-cat="ev"] { --seq-1: #dcebf7; --seq-2: #b9d6ef; --seq-3: #8fbbe3; --seq-4: #629ed4; --seq-5: #3f82c0; --seq-6: #2b67a3; --seq-7: #1d4e80; --accent: #2b67a3; }
.cat[data-cat="fuel"] .cat-ico, .cat-ico.fuel { color: var(--cat-fuel); }
.cat[data-cat="ev"] .cat-ico, .cat-ico.ev { color: var(--cat-ev); }
.cat-ico.leasing { color: var(--cat-leasing); }
.cc-title h3 { display: flex; align-items: center; gap: 10px; }
.cc-title h3 .cat-ico { width: 20px; height: 20px; }
.cc-title h3 .cat-ico svg { width: 20px; height: 20px; }
.cc-art svg.home-map { width: 100%; height: 100%; display: block; }
/* category tag in the Home search results */
.cat-tag { display: inline-block; font-size: 11px; font-weight: 500; border-radius: 999px; padding: 1px 8px; margin-left: 6px; vertical-align: 1px; }
.cat-tag.leasing { background: var(--cat-leasing-tint); color: var(--cat-leasing); }
.cat-tag.fuel { background: var(--cat-fuel-tint); color: #8a6114; }
.cat-tag.ev { background: var(--cat-ev-tint); color: var(--cat-ev); }
/* "Expanding into a new country": one row per category with its provider count */
.in-act.col { flex-direction: column; align-items: stretch; gap: 8px; }
.in-cats { display: flex; flex-direction: column; gap: 6px; }
.in-cat { display: grid; grid-template-columns: 20px 1fr auto auto; align-items: center; gap: 10px; border: 1px solid var(--border); background: var(--surface); border-radius: 12px; padding: 9px 12px; font-size: 14px; text-align: left; }
button.in-cat:hover { border-color: #c9c9c7; background: var(--surface-3); }
.in-cat b { font-weight: 600; }
.in-cat.none { color: var(--muted); grid-template-columns: 20px 1fr auto; }
.intent select optgroup { font-weight: 600; }

/* provider figure legend (market share / sites / stations), on the main map and the provider page map */
.mx-legend { font-size: 12px; color: var(--ink-2); }
.mx-legend .title { font-weight: 500; margin-bottom: 6px; }
.mx-legend .ramp { display: flex; gap: 2px; width: 252px; }
.mx-legend .ramp div { flex: 1; height: 7px; }
.mx-legend .ramp div:first-child { border-radius: 4px 0 0 4px; }
.mx-legend .ramp div:last-child { border-radius: 0 4px 4px 0; }
.mx-legend .ticks { display: flex; justify-content: space-between; width: 268px; margin: 4px 0 0 -8px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.mx-legend .ticks span { width: 16px; text-align: center; white-space: nowrap; }
.mx-legend .keys { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; }
.mx-legend .sw.sq { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: -1px; margin-right: 6px; }

/* Fuel + EV (hybrid providers) */
:root { --cat-hybrid: #24766f; --cat-hybrid-tint: #e6f4f2; }
:root[data-cat="hybrid"] { --seq-1: #dcefed; --seq-2: #b5ded9; --seq-3: #86c8c1; --seq-4: #58afa7; --seq-5: #36938b; --seq-6: #24766f; --seq-7: #175a55; --accent: #24766f; }
.cat[data-cat="hybrid"] .cat-ico, .cat-ico.hybrid { color: var(--cat-hybrid); }
.cc-art.hybrid { background: linear-gradient(140deg, var(--cat-hybrid-tint), #fafaf8 75%); }
.cat-tag.hybrid { background: var(--cat-hybrid-tint); color: var(--cat-hybrid); }
/* four categories: two by two on Home */
.cat-grid:has(> .cat-card:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fsec { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 12px 0 2px; }

/* ranking: the figure each list is sorted by, and what the order means */
.fc-fig { font-size: 12.5px; font-weight: 500; color: var(--ink-2); margin-top: 2px; font-variant-numeric: tabular-nums; }
.fc-fig + .fc-meta { margin-top: 1px; }
.sort-note { font-size: 12.5px; line-height: 1.45; margin: 0; max-width: 760px; color: var(--ink-2); }
#panel .sort-note, .panel .sort-note { margin: 6px 0 8px; }
.find-list > .fc-break { list-style: none; font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted);
  margin: 14px 0 2px; padding-top: 12px; border-top: 1px solid var(--border); }
.find-list > .fc-break b { display: block; font-size: 13px; color: var(--ink); letter-spacing: .03em; }
.find-list > .fc-break span { display: block; margin-top: 2px; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.find-list > .fc-break:first-child { border-top: 0; padding-top: 0; margin-top: 0; }