/* /negocios — the "barra + inspector" layout of /explorar, applied to the
   business study. Shares explorer.css (xb-*) and adds only what the page
   needs: an address input in the search slot, giro chips over the map, the
   pin and the report rows. */

.nb-page {
    position: relative;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}
.nb-page .map-admin-container { height: 100%; }

/* ---------- Address search in the top bar ---------- */
.nb-search-wrap {
    position: relative;
    flex: 1 1 280px;
    max-width: 480px;
    min-width: 0;
}
.nb-search {
    width: 100%;
    box-sizing: border-box;
    cursor: text;
}
.nb-search:focus-within { outline: 2px solid var(--xb-accent); outline-offset: 2px; background: #FFFFFF; }
.nb-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: var(--xb-ink);
    outline: none;
    padding: 0;
}
.nb-search input::placeholder { color: var(--xb-muted); }
.nb-search-icon { flex: 0 0 auto; color: var(--xb-muted); }
.nb-search-clear {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    border: 0; border-radius: 6px;
    background: transparent;
    color: var(--xb-muted);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.nb-search-clear:hover { background: #ECECE8; color: var(--xb-ink); }
.nb-search-busy {
    width: 14px; height: 14px; flex: 0 0 auto;
    border: 2px solid var(--xb-line);
    border-top-color: var(--xb-accent);
    border-radius: 50%;
    animation: nb-spin .8s linear infinite;
}
@keyframes nb-spin { to { transform: rotate(360deg); } }

.nb-suggest {
    position: absolute;
    top: 46px; left: 0; right: 0;
    background: #FFFFFF;
    border: 1px solid var(--xb-line);
    border-radius: 10px;
    box-shadow: var(--xb-shadow);
    overflow: hidden;
    z-index: 100001;
    display: flex;
    flex-direction: column;
}
.nb-suggest button {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 14px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 13px;
    color: var(--xb-ink);
    text-align: left;
    cursor: pointer;
}
.nb-suggest button:hover, .nb-suggest button:focus-visible { background: var(--xb-wash); outline: none; }
.nb-suggest button + button { border-top: 1px solid var(--xb-line-soft); }
.nb-suggest-main { display: block; }
.nb-suggest-sub { display: block; font-size: 12px; color: var(--xb-muted); }
.nb-suggest-empty { padding: 12px 14px; font-size: 13px; color: var(--xb-muted); }
.nb-suggest svg { flex: 0 0 auto; color: var(--xb-muted); }

/* ---------- Radius chips in the top bar ---------- */
.nb-radius { align-items: center; }
.nb-radius .xb-eyebrow { margin-right: 6px; }

/* ---------- Giro chips over the map ---------- */
.nb-chips {
    position: absolute;
    left: 20px;
    right: calc(var(--xb-inspector) + 20px);
    bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    z-index: 10000;
    pointer-events: none;
}
.nb-chips .xb-chip, .nb-sheet-chips .xb-chip {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px 0 10px;
    color: var(--xb-muted);
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.nb-chips .xb-chip.is-active, .nb-sheet-chips .xb-chip.is-active {
    background: #FFFFFF;
    border-color: var(--xb-ink);
    color: var(--xb-ink);
    font-weight: 500;
}
.nb-chip-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.xb-chip.is-off .nb-chip-dot { opacity: .35; }
.nb-chip-count { color: var(--xb-muted); font-weight: 400; }
.nb-chip-add { border-style: dashed; border-color: var(--xb-faint); }
.nb-chip-add svg { flex: 0 0 auto; }

/* The giro chips take the bottom-left corner, so the Mapbox wordmark moves
   to the right, above the attribution, where it stays visible. */
.nb-page .mapboxgl-ctrl-bottom-left { left: auto; right: 0; bottom: 22px; }

/* ---------- Map pin and popup ---------- */
.nb-pin {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--xb-ink, #111111);
    border: 3px solid #FFFFFF;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
    box-sizing: border-box;
    cursor: grab;
}
.nb-pin:active { cursor: grabbing; }
/* The page template styles every map popup with !important (no padding,
   another font), so this card has to insist. It sits above its feature with
   the tip on its bottom edge pointing at it. */
.nb-popup .mapboxgl-popup-content {
    font-family: 'Ruda', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif !important;
    font-size: 13px;
    line-height: 1.4;
    color: #111111;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    border: 0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.10) !important;
}
.nb-popup .mapboxgl-popup-tip { border-width: 7px; border-top-color: #FFFFFF !important; }
.nb-popup-name { font-weight: 500; display: block; }
.nb-popup-sub { display: block; color: #6B6B68; font-size: 12px; }

/* ---------- Report rows in the inspector ---------- */
.nb-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid var(--xb-line);
    border-radius: 10px;
}
.nb-row.is-off { color: var(--xb-muted); border-style: dashed; }
.nb-row-name { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nb-row-value { font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nb-row-value small { font-size: 11px; color: var(--xb-muted); }
/* Label, bar, value rows: robbery times and competitor sizes. */
.nb-bar-row {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) 40px;
    align-items: center;
    column-gap: 10px;
    min-height: 28px;
    font-size: 13px;
}
.nb-bar-name small { font-size: 11px; color: var(--xb-muted); }
.nb-bar { height: 10px; border-radius: 3px; background: var(--xb-wash); overflow: hidden; }
.nb-bar span { display: block; height: 100%; border-radius: 3px; background: #B8541A; }
.nb-bar.is-size span { background: var(--xb-ink); }
.nb-bar-value { text-align: right; font-variant-numeric: tabular-nums; color: var(--xb-muted); }

/* Foot traffic by hour: 24 columns, busiest = full height. */
.nb-hours { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; align-items: end; height: 72px; }
.nb-hours span { display: block; border-radius: 2px 2px 0 0; background: #2253A5; min-height: 2px; }
.nb-hours span.is-peak { background: #12305F; }
.nb-hours span.is-withheld {
    height: 100%;
    background: repeating-linear-gradient(135deg, var(--xb-wash) 0 3px, transparent 3px 6px);
}
.nb-hours-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--xb-muted); font-variant-numeric: tabular-nums; }
.nb-row-remove {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    margin-right: -8px;
    border: 0; border-radius: 6px;
    background: transparent;
    color: var(--xb-faint);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.nb-row-remove:hover { background: var(--xb-wash); color: var(--xb-ink); }

.nb-lede { margin: 0; font-size: 13px; color: var(--xb-muted); }

/* ---------- Report hierarchy ----------
   Header, then the verdict (one plain sentence and three figures), then
   titled sections split by a rule, each made of small sub-blocks. Data reads
   in ink; notes and empty states stay quiet so they never outweigh it. */
.nb-report-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.nb-verdict { display: flex; flex-direction: column; gap: 14px; }
.nb-verdict-text { margin: 0; font-size: 15px; line-height: 1.45; color: var(--xb-ink); }
.nb-verdict-text b { font-weight: 600; }
.nb-verdict-text small { display: block; margin-top: 4px; font-size: 13px; color: var(--xb-muted); }
.nb-verdict-text.is-loading { display: flex; align-items: center; gap: 10px; color: var(--xb-muted); }
/* Loading: a small ring, alone in a figure's place or leading a card that
   stands in for a block until its data arrives. */
.nb-spinner {
    display: inline-block;
    width: 14px; height: 14px; flex: 0 0 auto;
    border: 2px solid var(--xb-line);
    border-top-color: var(--xb-accent);
    border-radius: 50%;
    vertical-align: middle;
    animation: nb-spin .8s linear infinite;
}
.xb-stat-value .nb-spinner { width: 18px; height: 18px; margin: 3px 0; }
.nb-loading {
    display: flex; align-items: center; gap: 10px;
    min-height: 52px;
    padding: 0 14px;
    border: 1px dashed var(--xb-line);
    border-radius: 12px;
    background: var(--xb-wash-soft);
    font-size: 13px; color: var(--xb-muted);
}
@media (prefers-reduced-motion: reduce) { .nb-spinner { animation-duration: 2.4s; } }
.xb-stat-value.is-empty { color: var(--xb-faint); }

.nb-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid var(--xb-line);
}
/* A section opens with its icon, a larger title and, on the right, a short
   verdict or a control. */
.nb-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.nb-section-head h3 { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.nb-section-icon {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 11px;
    background: #EAF0FA; color: var(--xb-accent);
}
.nb-section-note { font-size: 12px; color: var(--xb-muted); }
.nb-badge { flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.nb-badge.is-neutral { background: var(--xb-wash); color: var(--xb-ink); }
.nb-badge.is-good { background: #E3EFE8; color: #245A3F; }
.nb-badge.is-warn { background: #F6E3D8; color: #8F3F1C; }
.nb-icon { flex: 0 0 auto; }
.nb-eyebrow { display: flex; align-items: center; gap: 6px; }
.nb-stat { display: flex; flex-direction: column; gap: 4px; }
.nb-stat .nb-icon { color: var(--xb-accent); margin-bottom: 2px; }
.nb-row > .nb-icon { color: var(--xb-muted); }
/* "Ver en el mapa" on a section: a small pill that stays on while active. */
.nb-map-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    height: 30px; padding: 0 12px;
    border: 1px solid var(--xb-line); border-radius: 999px;
    background: #FFFFFF; color: var(--xb-ink);
    font: inherit; font-size: 13px; cursor: pointer;
}
.nb-map-toggle:hover { border-color: var(--xb-faint); }
.nb-map-toggle.is-active { background: var(--xb-ink); border-color: var(--xb-ink); color: #FFFFFF; }
.nb-map-toggle:focus-visible { outline: 2px solid var(--xb-accent); outline-offset: 2px; }

/* The legend of the hazards on the map, top left of the map. */
.nb-map-legend {
    position: absolute;
    top: calc(var(--xb-topbar) + 12px);
    left: 12px;
    z-index: 10000;   /* over the map, like the giro chips */
    display: flex; flex-direction: column; gap: 6px;
    min-width: 190px;
    padding: 10px 12px;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: var(--xb-shadow);
    font-size: 13px;
}
.nb-map-legend-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 600; }
.nb-map-legend-close {
    width: 24px; height: 24px; margin-right: -6px;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 6px; background: transparent; color: var(--xb-muted); cursor: pointer;
}
.nb-map-legend-close:hover { background: var(--xb-wash); color: var(--xb-ink); }
.nb-map-legend-row { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 8px; }
.nb-map-legend-mark { width: 10px; height: 10px; justify-self: center; border: 2.5px solid; border-radius: 50%; background: #FFFFFF; }
.nb-map-legend-mark.is-line { width: 18px; height: 0; border-width: 0; border-top: 2px dashed; border-radius: 0; }
.nb-map-legend-count { color: var(--xb-muted); font-variant-numeric: tabular-nums; }
.nb-map-legend-empty { color: var(--xb-muted); }

/* Competition by giro: one card, rows split by hairlines, numbers in
   aligned columns, and a bar in the giro's colour for its share. */
.nb-giros { border: 1px solid var(--xb-line); border-radius: 12px; overflow: hidden; background: #FFFFFF; }
.nb-giros-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px 64px 28px;
    align-items: center;
    column-gap: 8px;
    padding: 12px 8px 12px 14px;
    border-top: 1px solid var(--xb-line-soft);
}
.nb-giros-row:first-child { border-top: 0; }
.nb-giros-row.is-head {
    padding-top: 10px; padding-bottom: 8px;
    background: var(--xb-wash-soft);
    font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--xb-muted);
}
.nb-giros-row.is-off .nb-giros-text, .nb-giros-row.is-off .nb-num { color: var(--xb-faint); }
.nb-giros-name { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.nb-giros-label { display: flex; align-items: flex-start; gap: 10px; min-width: 0; font-size: 14px; line-height: 1.35; }
.nb-giros-label .nb-chip-dot { margin-top: 5px; flex: 0 0 auto; }
/* DENUE names are long ("Restaurantes con servicio de preparación…"): two
   lines say enough; the full name is in the tooltip. */
.nb-giros-text {
    min-width: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.nb-giros-bar { display: block; height: 4px; margin-left: 20px; border-radius: 2px; background: var(--xb-wash); overflow: hidden; }
.nb-giros-bar span { display: block; height: 100%; border-radius: 2px; transition: width .3s ease; }
.nb-num { text-align: right; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nb-giros-row.is-head .nb-num { font-size: 11px; }
.nb-num.is-zero { color: var(--xb-faint); font-weight: 500; }
.nb-giros-add {
    display: flex; align-items: center; gap: 8px; width: 100%;
    min-height: 44px; padding: 0 14px;
    border: 0; border-top: 1px dashed var(--xb-line); background: transparent;
    font: inherit; font-size: 13px; font-weight: 500; color: var(--xb-accent);
    cursor: pointer; text-align: left;
}
.nb-giros-add:hover { background: var(--xb-wash-soft); }
.nb-giros-add:focus-visible { outline: 2px solid var(--xb-accent); outline-offset: -2px; }
.nb-giros-add-left { color: var(--xb-muted); font-weight: 400; }

.nb-sub { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
/* A wrapper that is only there to hide part of a sub-block on paper keeps
   the sub-block's own spacing. */
.nb-sub > .nb-screen-only { display: flex; flex-direction: column; gap: 8px; }
.nb-sub-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.nb-insight { margin: 0; font-size: 14px; color: var(--xb-ink); }
.nb-insight b { font-weight: 600; }
.nb-note { margin: 0; font-size: 12px; line-height: 1.45; color: var(--xb-muted); }
.nb-empty-note { margin: 0; font-size: 13px; color: var(--xb-muted); }

.xb-segmented.is-compact { padding: 3px; }
.xb-segmented.is-compact button { height: 28px; padding: 0 10px; font-size: 12px; }
/* The empty inspector: the reports opened before in this browser, or a
   drawing and the steps when there are none. */
.nb-recent { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.nb-recent-head { display: flex; justify-content: space-between; align-items: center; }
.nb-recent-forget { font-size: 12px; color: var(--xb-muted); }
.nb-recent-head { margin-top: 10px; }
/* "Estudiar una zona nueva": the way back to the address search. */
.nb-new-zone {
    display: flex; align-items: center; gap: 14px;
    width: 100%;
    padding: 12px 14px 12px 12px;
    border: 0; border-radius: 16px;
    background: var(--xb-accent-dark); color: #FFFFFF;
    font: inherit; text-align: left; cursor: pointer;
}
.nb-new-zone:hover { background: #102D66; }
.nb-new-zone:focus-visible { outline: 2px solid var(--xb-accent); outline-offset: 2px; }
.nb-new-zone svg:first-child { flex: 0 0 auto; }
.nb-new-zone-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.nb-new-zone-text b { font-size: 15px; font-weight: 600; }
.nb-new-zone-text span { font-size: 12px; color: #DFE5F7; }
/* One card per place, a row per report made there. */
.nb-place { border: 1px solid var(--xb-line); border-radius: 14px; overflow: hidden; background: #FFFFFF; }
.nb-place-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.nb-place-reports { list-style: none; margin: 0; padding: 0; }
.nb-place-reports li { border-top: 1px solid var(--xb-line-soft); }
.nb-place-report {
    width: 100%;
    display: flex; align-items: center; gap: 10px;
    min-height: 44px; padding: 0 14px;
    border: 0; background: transparent; color: var(--xb-ink);
    font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.nb-place-report:hover { background: var(--xb-wash-soft); }
.nb-place-report:focus-visible { outline: 2px solid var(--xb-accent); outline-offset: -2px; }
.nb-place-report .nb-icon { color: var(--xb-muted); }
.nb-place-report .nb-recent-total { flex: 0 0 auto; white-space: nowrap; }
/* Two lines, so giros that share their first words still read apart. */
.nb-place-giro {
    flex: 1 1 auto; min-width: 0; padding: 8px 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    line-height: 1.3;
}
.nb-place-radius { flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; background: var(--xb-wash); font-size: 12px; color: var(--xb-muted); }
.nb-recent-icon {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: var(--xb-wash); color: var(--xb-accent);
}
.nb-recent-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nb-recent-place, .nb-recent-meta { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nb-recent-place { font-size: 14px; font-weight: 500; }
.nb-recent-meta { font-size: 12px; color: var(--xb-muted); }
.nb-recent-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.nb-recent-total { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nb-recent-total::after { content: ' negocios'; font-size: 11px; font-weight: 400; color: var(--xb-muted); }
.nb-recent-ago { font-size: 11px; color: var(--xb-faint); }

.nb-no-recent {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    margin-top: 12px;
    padding: 24px 20px 20px;
    border: 1px dashed var(--xb-line);
    border-radius: 16px;
    text-align: center;
}
.nb-no-recent-art { margin-bottom: 6px; }
.nb-no-recent-title { margin: 0; font-size: 15px; font-weight: 600; }
.nb-no-recent .xb-muted { margin: 0; font-size: 13px; }
.nb-no-recent-steps { align-self: stretch; margin-top: 12px; padding: 14px 14px 14px 32px; background: var(--xb-wash-soft); border-radius: 10px; text-align: left; }

/* Terreno y clima: one card per group, a fact per hairline row. */
.nb-facts { border: 1px solid var(--xb-line); border-radius: 12px; overflow: hidden; }
.nb-fact {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
    padding: 11px 14px;
    font-size: 14px;
}
.nb-fact + .nb-fact { border-top: 1px solid var(--xb-line-soft); }
.nb-fact-name { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--xb-muted); }
/* The high hazards as a row of icon tiles above the facts. */
.nb-hazards { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.nb-hazard {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 10px 4px;
    border-radius: 12px;
    background: #F6E3D8; color: #8F3F1C;
    font-size: 12px; font-weight: 600; text-align: center;
}
.nb-fact-value { min-width: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; font-weight: 500; }
.nb-fact-value small { max-width: 220px; font-size: 12px; font-weight: 400; line-height: 1.35; color: var(--xb-muted); }
/* A hazard level: five steps, filled up to the level; high ones in orange. */
.nb-level { display: inline-flex; align-items: center; gap: 8px; }
.nb-level-meter { display: inline-flex; gap: 2px; }
.nb-level-meter span { width: 10px; height: 6px; border-radius: 1px; background: var(--xb-wash); }
.nb-level .is-on { background: var(--xb-faint); }
.nb-level.is-2 .is-on { background: #B7791F; }
.nb-level.is-3 .is-on, .nb-level.is-4 .is-on { background: #C2410C; }
.nb-level.is-3, .nb-level.is-4 { color: #9A3412; font-weight: 600; }

.nb-callout {
    display: flex; flex-direction: column; gap: 6px;
    padding: 14px 16px;
    background: var(--xb-wash-soft);
    border-radius: 12px;
    font-size: 13px;
}
.nb-callout-head { font-weight: 500; }
.nb-callout-icon { flex-direction: row; align-items: flex-start; gap: 12px; }
.nb-callout-icon > .nb-icon { color: #B8541A; margin-top: 1px; }
.nb-callout-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.nb-callout-name { font-size: 14px; font-weight: 600; }

/* Seguridad: the two FGJ counts side by side. */
.nb-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.nb-tile { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--xb-line); border-radius: 10px; }
.nb-tile .nb-icon { color: var(--xb-muted); margin-bottom: 2px; }
.nb-tile-value { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nb-tile-name { font-size: 12px; line-height: 1.35; color: var(--xb-muted); }
/* When robberies happen: morning, afternoon and night as cards. */
.nb-periods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.nb-period {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 12px 6px;
    border-radius: 12px;
    background: var(--xb-wash-soft); color: var(--xb-muted);
    text-align: center;
}
.nb-period-value { font-size: 19px; font-weight: 600; color: var(--xb-ink); font-variant-numeric: tabular-nums; }
.nb-period-name { display: flex; flex-direction: column; font-size: 12px; }
.nb-period-name small { font-size: 11px; }
.nb-period.is-top { background: #F6E3D8; color: #8F3F1C; }
.nb-period.is-top .nb-period-value { color: #8F3F1C; }
.nb-sources { display: flex; flex-direction: column; gap: 4px; padding-top: 16px; border-top: 1px solid var(--xb-line); font-size: 12px; color: var(--xb-muted); }
.nb-sources .xb-eyebrow { margin-bottom: 4px; }
.nb-error { font-size: 13px; color: #9B2C2C; }

/* Giro picker */
.nb-picker { display: flex; flex-direction: column; gap: 10px; }
.nb-picker-art { flex: 0 0 auto; }
.nb-picker-search {
    display: flex; align-items: center; gap: 10px;
    height: 46px;
    padding: 0 14px;
    border: 1.5px solid var(--xb-accent);
    border-radius: 12px;
    background: #FFFFFF;
    color: var(--xb-accent);
}
.nb-picker-search:focus-within { outline: 2px solid var(--xb-accent); outline-offset: 1px; }
.nb-picker-search input {
    flex: 1 1 auto; min-width: 0;
    border: 0; padding: 0; background: transparent; outline: none;
    font: inherit; font-size: 15px; color: var(--xb-ink);
}
.nb-picker-search:has(input:disabled) { border-color: var(--xb-line); color: var(--xb-faint); }
/* Sectors: a two-column grid of icon tiles that open a sector's giros. */
.nb-sectors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.nb-sector {
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    min-height: 96px;
    padding: 14px;
    border: 1px solid var(--xb-line); border-radius: 14px;
    background: #FFFFFF; color: var(--xb-ink);
    font: inherit; text-align: left; cursor: pointer;
}
.nb-sector:hover { border-color: var(--xb-faint); background: var(--xb-wash-soft); }
.nb-sector:focus-visible { outline: 2px solid var(--xb-accent); outline-offset: 2px; }
.nb-sector-name { font-size: 14px; font-weight: 600; line-height: 1.25; }
.nb-sector-count { margin-top: auto; font-size: 12px; color: var(--xb-muted); }
.nb-sector-icon {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 11px;
}
.nb-sector-head .nb-sector-icon { width: 30px; height: 30px; border-radius: 9px; }
.nb-sector-icon.is-clay { background: #F6E3D8; color: #8F3F1C; }
.nb-sector-icon.is-green { background: #E3EFE8; color: #245A3F; }
.nb-sector-icon.is-blue { background: #EAF0FA; color: var(--xb-accent); }
.nb-sector-icon.is-amber { background: #F6ECD2; color: #7A5200; }
.nb-sector-icon.is-grey { background: var(--xb-wash); color: #3D3D3D; }
.nb-sector-head { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.nb-sector-back { display: inline-flex; align-items: center; gap: 2px; padding-right: 10px; border-right: 1px solid var(--xb-line); font-size: 13px; }
.nb-picker-list { display: flex; flex-direction: column; gap: 6px; }
.nb-picker-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 6px 14px;
    border: 1px solid var(--xb-line);
    border-radius: 10px;
    background: #FFFFFF;
    font: inherit;
    font-size: 13px;
    color: var(--xb-ink);
    text-align: left;
    cursor: pointer;
}
.nb-picker-item:hover { border-color: var(--xb-faint); background: var(--xb-wash-soft); }
.nb-picker-item:disabled { color: var(--xb-faint); cursor: default; }
.nb-picker-item code { font-family: inherit; font-size: 11px; color: var(--xb-muted); flex: 0 0 auto; }

/* Footer buttons */
.nb-foot { padding: 12px 24px; border-top: 1px solid var(--xb-line-soft); display: flex; gap: 8px; }
.nb-btn {
    flex: 1 1 0;
    height: 40px;
    border: 1px solid var(--xb-line);
    border-radius: 10px;
    background: #FFFFFF;
    color: var(--xb-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.nb-btn:hover { border-color: var(--xb-faint); }
.nb-btn.is-primary { background: var(--xb-ink); border-color: var(--xb-ink); color: #FFFFFF; }
.nb-btn.is-primary:hover { background: #000000; }
.nb-btn:focus-visible { outline: 2px solid var(--xb-accent); outline-offset: 2px; }

/* ---------- Phone ---------- */
.nb-sheet-chips { display: none; }
@media (max-width: 768px) {
    .nb-chips { display: none; }
    /* The address gives way so the brand and the help button both stay on. */
    .nb-search-wrap { flex: 1 1 100px; }
    .nb-sheet-chips {
        display: flex;
        gap: 8px;
        padding: 12px 16px;
        border-bottom: 1px solid var(--xb-line-soft);
        overflow-x: auto;
        scrollbar-width: none;
        flex: 0 0 auto;
    }
    .nb-sheet-chips::-webkit-scrollbar { display: none; }
    .nb-sheet-chips .xb-chip { flex: 0 0 auto; }
    .nb-sheet-radius {
        flex: 0 0 auto;
        padding: 10px 16px;
        border-bottom: 1px solid var(--xb-line-soft);
    }
    /* One line: the label beside the three options. */
    .nb-sheet-radius .xb-field { flex-direction: row; align-items: center; gap: 12px; }
    .nb-sheet-radius .xb-segmented { flex: 1 1 auto; }
    .nb-foot { padding: 10px 16px; }
    /* Before a point is chosen the sheet only holds the short intro and the
       radius, so it fits its content and the map runs underneath it. */
    .nb-page:has(.xb-inspector.is-empty) .map-container { bottom: 0; }
    .nb-page .xb-inspector.is-empty { height: auto; max-height: var(--xb-sheet); }
    .nb-btn { height: 44px; font-size: 14px; }
    .nb-no-recent { padding: 16px 14px 14px; }
    .nb-no-recent-art { width: 104px; height: 79px; }
    .nb-map-legend { top: calc(var(--xb-topbar) + 8px); left: 8px; min-width: 0; padding: 8px 10px; gap: 4px; font-size: 12px; }
    .nb-suggest { top: 44px; }
    /* 16px keeps Safari from zooming the page when a field takes focus. */
    .nb-search input, .nb-picker-search input { font-size: 16px; }
    /* Touch targets of at least 40-44px. */
    .nb-search-clear { width: 40px; height: 40px; margin-right: -8px; }
    .nb-sheet-chips .xb-chip { height: 40px; }
    .nb-sheet-radius .xb-segmented button { height: 40px; }
    .nb-hours-axis, .nb-row-value small, .nb-bar-name small, .nb-period-name small,
    .nb-recent-ago, .nb-recent-total::after { font-size: 12px; }
}

.nb-btn:disabled { opacity: .55; cursor: default; }

/* ---------- Print: the report alone ---------- */
/* What only the paper copy carries: the date, a picture of the map, both
   foot-traffic curves and the link back. */
.nb-print-only { display: none; }
.nb-print-head {
    justify-content: space-between; align-items: baseline;
    padding-bottom: 10px; margin-bottom: 4px;
    border-bottom: 1px solid var(--xb-line);
    font-size: 11px; color: var(--xb-muted);
}
.nb-print-brand { font-size: 13px; font-weight: 600; color: var(--xb-ink); }
.nb-print-map { margin: 0; }
.nb-print-map img { display: block; width: auto; max-width: 100%; max-height: 100mm; margin: 0 auto; border: 1px solid var(--xb-line); border-radius: 8px; }
.nb-print-map figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: 11px; color: var(--xb-muted); }
.nb-print-map figcaption span:last-child { flex: 0 0 auto; white-space: nowrap; }
.nb-print-hours { display: flex; flex-direction: column; gap: 6px; }
.nb-print-hours + .nb-print-hours { margin-top: 14px; }
.nb-print-link { font-size: 11px; color: var(--xb-muted); }
.nb-print-link span { color: var(--xb-ink); word-break: break-all; }

@media print {
    @page { margin: 14mm 14mm 16mm; }
    .nb-page { height: auto; overflow: visible; }
    .nb-page .map-admin-container, .nb-page .xb-topbar, .nb-page .nb-chips,
    .nb-page .explore-help-panel, .nb-page .nb-foot, .nb-page .nb-row-remove,
    .nb-page .nb-sheet-chips, .nb-page .nb-sheet-radius, .nb-page .nb-giros-add, .nb-page .nb-map-legend,
    .nb-page .nb-screen-only { display: none !important; }
    .nb-page .nb-print-only { display: block; }
    .nb-page .nb-print-head { display: flex; }
    .nb-page span.nb-print-only { display: inline; }
    .nb-page .xb-inspector {
        position: static;
        width: auto; height: auto; max-height: none;
        border: 0; box-shadow: none; border-radius: 0;
    }
    .nb-page .xb-inspector .xb-scroll { overflow: visible; max-height: none; padding: 0; }
    /* Bars, dots and charts are backgrounds, which browsers leave out of a
       print unless told otherwise. */
    .nb-page .xb-inspector * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    /* Paper has no tooltip: the full giro name. */
    .nb-page .nb-giros-text { display: block; -webkit-line-clamp: unset; overflow: visible; }
    /* Never split a block, a row or a chart across pages. */
    .nb-page .nb-verdict, .nb-page .nb-print-map, .nb-page .nb-sub, .nb-page .nb-callout,
    .nb-page .nb-giros-row, .nb-page .nb-row, .nb-page .nb-bar-row, .nb-page .nb-print-hours, .nb-page .nb-fact,
    .nb-page .nb-tiles, .nb-page .nb-periods, .nb-page .nb-hazards,
    .nb-page .nb-sources { break-inside: avoid; }
    .nb-page .nb-section-head { break-after: avoid; }
}