/* Private Bank re-skin: pb-library screens. Scoped per tab id.
   Screens: #library-tab (Persona library), #compare-tab (Compare markets),
   #analyze-tab (Find similar areas; the Plan Campaign + Penetration tools are hidden but stay in the DOM).
   Spec: docs/design/private-bank/README.md. Loads after styles.css, shell.css.
   Desktop grids live under min-width:901px; below that everything is one column. */

/* ---------- Shared bits ---------- */
#library-tab, #compare-tab, #analyze-tab {
  --pbl-focus: 0 0 0 3px rgba(140,47,57,.18);
  background: var(--pb-bg-app);
}
#library-tab .pb-head, #compare-tab .pb-head, #analyze-tab .pb-head { flex: none; }
#library-tab .pb-head .pb-h1, #compare-tab .pb-head .pb-h1, #analyze-tab .pb-head .pb-h1 { max-width: none; }

#library-tab input:focus-visible, #compare-tab input:focus-visible, #compare-tab select:focus-visible,
#analyze-tab input:focus-visible, #analyze-tab select:focus-visible,
#library-tab button:focus-visible, #compare-tab button:focus-visible, #analyze-tab button:focus-visible {
  outline: none; box-shadow: var(--pbl-focus); border-color: var(--pb-brand);
}
#library-tab input[type="search"], #compare-tab input[type="text"], #compare-tab input[type="number"], #compare-tab select,
#analyze-tab input[type="text"], #analyze-tab input[type="number"], #analyze-tab select {
  min-height: 48px; font-size: 16px; border-radius: 10px;
  background: var(--pb-surface-2); border: 1px solid var(--pb-line-strong); color: var(--pb-ink);
}

/* =====================================================================
   PERSONA LIBRARY
   ===================================================================== */
#library-tab { padding: 28px 16px 0; overflow-y: auto; }
#library-tab .pb-head { margin-bottom: 20px; }
#library-tab .pb-h1 { font-size: 32px; }

/* app.js treats the list pane as a bottom-sheet host: a click in its top 28px
   cycles the sheet to "full" and shows a page-dimming backdrop. The chips now sit
   in that strip, so keep the backdrop off while the Library is on screen. */
body:has(#library-tab.active) > .mobile-sheet-backdrop { display: none; }

/* Left pane: chips + search + cards. Drops the old 360px sidebar chrome. */
#library-tab .library-list-pane {
  width: 100%; background: transparent; border: 0; padding: 0 0 24px; overflow: visible;
}
/* Section switcher = filter chips; the active chip has a navy fill. */
#library-tab .library-seg {
  display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0 0 16px; background: transparent; border-radius: 0;
}
#library-tab .lib-seg-btn {
  min-height: 44px; padding: 8px 18px; border-radius: 20px; white-space: nowrap;
  background: var(--pb-surface-2); color: var(--pb-ink-2); border: 1px solid var(--pb-line-strong);
  font: 500 15px/1.2 var(--pb-body); box-shadow: none; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
#library-tab .lib-seg-btn:hover { background: var(--pb-surface-3); color: var(--pb-ink); transform: none; }
#library-tab .lib-seg-btn.active { background: var(--pb-ink); color: #fffdf8; border-color: var(--pb-ink); }
#library-tab #library-search { margin-bottom: 16px; width: 100%; max-width: 420px; }

/* Cards */
#library-tab .library-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
#library-tab .library-cards > .library-empty { grid-column: 1 / -1; }
#library-tab .library-card {
  display: flex; align-items: flex-start; gap: 12px; margin: 0;
  padding: 18px 20px; background: var(--pb-surface); border: 1px solid var(--pb-line); border-radius: 14px;
  cursor: pointer; transform: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#library-tab .library-card:hover { border-color: var(--pb-line-strong); transform: none; }
#library-tab .library-card.active { border-color: var(--pb-brand); box-shadow: 0 0 0 3px rgba(140,47,57,.18); }
#library-tab .library-color-bar { width: 14px; height: 14px; border-radius: 4px; margin-top: 5px; flex: none; }
#library-tab .library-card-title { font: 600 18px/1.25 var(--pb-display); color: var(--pb-ink); }
#library-tab .library-card-sub {
  margin-top: 10px; font: 500 12.5px/1.5 var(--pb-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--pb-ink-4);
}
#library-tab .library-empty { padding: 28px 8px; text-align: left; color: var(--pb-ink-3); font: 400 16px/1.5 var(--pb-body); }

/* Detail panel */
#library-tab .library-detail {
  background: var(--pb-surface); border: 1px solid var(--pb-line); border-radius: 14px;
  padding: 24px; margin-bottom: 28px; color: var(--pb-ink); font: 400 16px/1.55 var(--pb-body);
}
#library-tab .library-detail .library-empty { padding: 4px 0; }
#library-tab .persona-hero { height: 76px; border-radius: 10px; margin-bottom: 18px; }
#library-tab .persona-hero-pop {
  left: 14px; bottom: 12px; font: 600 13px/1 var(--pb-mono); letter-spacing: .06em; text-transform: uppercase; color: #fffdf8;
}
#library-tab .persona-hero-pop::after { content: " people"; }
#library-tab .persona-name { font: 700 28px/1.15 var(--pb-display); letter-spacing: -.02em; color: var(--pb-ink); margin-bottom: 12px; }
#library-tab .persona-tags { gap: 8px; margin-bottom: 16px; }
#library-tab .persona-tag { font: 600 14px/1.2 var(--pb-body); padding: 9px 14px; border-radius: 20px; cursor: pointer; }
#library-tab .persona-portrait { font: 400 16px/1.55 var(--pb-body); color: var(--pb-ink-3); max-width: none; margin: 0 0 18px; }
#library-tab .persona-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; gap: 10px; margin-bottom: 20px; }
#library-tab .persona-stat { background: var(--pb-surface-3); border: 0; border-radius: 10px; padding: 14px; }
#library-tab .persona-stat-value { font: 700 24px/1.1 var(--pb-display); color: var(--pb-ink); }
#library-tab .persona-stat-label { font: 400 14px/1.3 var(--pb-body); color: var(--pb-ink-4); margin-top: 2px; }
#library-tab .persona-traits-title, #library-tab .profile-section h3 {
  font: 500 12.5px/1.3 var(--pb-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--pb-ink-4); margin: 0 0 10px;
}
#library-tab .persona-traits { gap: 8px; margin-bottom: 8px; }
#library-tab .persona-trait-row { font: 400 16px/1.5 var(--pb-body); color: var(--pb-ink-2); }

#library-tab .profile-section { background: transparent; border: 0; border-radius: 0; padding: 0; margin: 22px 0 0; }
#library-tab .profile-section ul { list-style: none; margin: 0; padding: 0; }
#library-tab .profile-section ul:has(> .channel-item) { display: flex; flex-wrap: wrap; gap: 8px; }
#library-tab .channel-item {
  display: inline-block; padding: 8px 14px; border-radius: 20px; background: var(--pb-surface-2); border: 1px solid var(--pb-line-strong);
  font: 500 15px/1.2 var(--pb-body); color: var(--pb-ink);
}
#library-tab .headline-item, #library-tab .do-item, #library-tab .dont-item {
  font: 400 16px/1.5 var(--pb-body); color: var(--pb-ink-2); padding: 8px 0; border-bottom: 1px solid var(--pb-line);
}
#library-tab .tag-cloud { gap: 8px; }
#library-tab .tag { font: 500 15px/1.2 var(--pb-body); padding: 7px 12px; border-radius: 7px; }
#library-tab .tag-good { background: rgba(31,107,74,.12); color: var(--pb-good); border: 1px solid rgba(31,107,74,.25); }
#library-tab .tag-bad { background: rgba(140,47,57,.10); color: var(--pb-brand); border: 1px solid rgba(140,47,57,.25); }
#library-tab .collapsible-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; padding: 10px 14px; text-align: left;
  background: var(--pb-surface-2); color: var(--pb-ink); border: 1px solid var(--pb-line); border-radius: 10px;
  font: 600 16px/1.3 var(--pb-display); box-shadow: none; cursor: pointer;
}
#library-tab .collapsible-content { font: 400 16px/1.6 var(--pb-body); color: var(--pb-ink-3); }

/* Lifemode / urbanization detail: app.js writes inline colours made for a dark
   surface. Re-map them here (!important is needed to beat inline styles). */
#library-tab .library-detail [style*="#f4f4f6"] { color: var(--pb-ink) !important; }
#library-tab .library-detail [style*="#374151"] { color: var(--pb-ink-3) !important; }
#library-tab .library-detail [style*="#6b7280"], #library-tab .library-detail [style*="#9ca3af"] { color: var(--pb-ink-4) !important; }
#library-tab .library-detail [style*="#4338ca"], #library-tab .library-detail [style*="color:#8c2f39"] { color: var(--pb-brand) !important; }
#library-tab .library-detail [style*="#b6ff3a"] { color: var(--pb-good) !important; }
#library-tab .library-detail h2 { font: 700 28px/1.15 var(--pb-display) !important; letter-spacing: -.02em; margin: 0 0 6px !important; }
#library-tab .library-detail p[style] { font-size: 16px !important; line-height: 1.55; }
#library-tab .library-detail div[style*="font-size:0.8"], #library-tab .library-detail strong[style],
#library-tab .library-detail div[style*="font-size:0.78rem"], #library-tab .library-detail div[style*="font-size:0.85rem"] { font-size: 15px !important; }
#library-tab .library-detail div[style*="#0d0d12"] {
  background: var(--pb-surface-3) !important; border: 0 !important; border-radius: 10px !important; gap: 20px !important;
}
#library-tab .library-detail div[style*="#0d0d12"] > div > div:first-child { font: 500 12.5px var(--pb-mono) !important; letter-spacing: .06em; color: var(--pb-ink-4) !important; }
#library-tab .library-detail div[style*="#0d0d12"] > div > div:last-child { font: 700 24px var(--pb-display) !important; }
#library-tab .library-chip {
  display: inline-block; padding: 10px 14px; margin: 8px 8px 0 0; background: var(--pb-surface-2); color: var(--pb-ink-2);
  border: 1px solid var(--pb-line-strong); border-radius: 20px; font: 500 15px/1.2 var(--pb-body); cursor: pointer;
}
#library-tab .library-chip:hover { background: var(--pb-surface-3); color: var(--pb-ink); }
/* Distribution bars: the generated classes are nested outer=.fill / inner=.inner,
   so the fill colour goes on the inner element. */
#library-tab .library-bar-label { font: 400 15px/1.3 var(--pb-body); color: var(--pb-ink-2); }
#library-tab .library-bar-pct { font: 600 14px var(--pb-mono); color: var(--pb-ink); }
#library-tab .library-bar-fill { height: 8px; background: var(--pb-surface-3); border-radius: 4px; overflow: hidden; }
#library-tab .library-bar-inner { height: 100%; background: var(--pb-brand); border-radius: 4px; }

@media (min-width: 901px) {
  /* app.js sets style="display:flex" inline on the active tab, hence !important. */
  #library-tab.active {
    display: grid !important; grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto minmax(0, 1fr);
    column-gap: 24px; padding: 40px 48px 0; overflow: hidden; align-content: stretch;
  }
  #library-tab .pb-head { grid-column: 1 / -1; margin-bottom: 24px; }
  #library-tab .pb-h1 { font-size: 40px; }
  #library-tab .library-list-pane { grid-column: 1; grid-row: 2; min-height: 0; overflow-y: auto; padding: 4px 6px 28px 4px; margin: -4px -6px 0 -4px; }
  #library-tab .library-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #library-tab .library-detail {
    grid-column: 2; grid-row: 2; align-self: start; max-height: 100%; overflow-y: auto; margin-bottom: 28px; flex: none;
  }
}

/* Phone / narrow: keep one column. The existing mobile wizard shows list-only
   or detail-only; its back button is inserted ahead of the header. */
@media (max-width: 900px) {
  #library-tab .library-list-pane { max-height: none; overflow: visible; flex: 0 0 auto; }
  #library-tab .library-detail { max-height: none; min-height: 0; flex: 0 0 auto; }
  #library-tab.lpw-lib-detail-mode .pb-head { display: none; }
  #library-tab .persona-name, #library-tab .library-detail h2 { font-size: 26px !important; }
}

/* =====================================================================
   COMPARE MARKETS
   ===================================================================== */
#compare-tab .compare-container {
  padding: 28px 16px 32px; gap: 20px; height: 100%; overflow-y: auto; overflow-x: hidden;
}
#compare-tab .compare-container > * { flex-shrink: 0; }
#compare-tab .pb-h1 { font-size: 32px; }

#compare-tab .compare-inputs {
  background: var(--pb-surface); border: 1px solid var(--pb-line); border-radius: 14px;
  padding: 20px; gap: 16px; width: 100%; max-height: none; overflow: visible; align-items: flex-end;
}
#compare-tab .compare-inputs::after { display: none; }
#compare-tab .compare-input-group { min-width: 0; gap: 8px; }
#compare-tab .compare-input-group label {
  font: 500 13px/1.2 var(--pb-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--pb-ink-4); margin: 0;
}
#compare-tab .compare-input-group--a label { color: var(--pb-brand); }
#compare-tab .compare-input-group--b label { color: var(--pb-indigo, #3d5a80); }
#compare-tab .compare-input-group--a input { border-color: rgba(140,47,57,.35); }
#compare-tab .compare-input-group--b input { border-color: rgba(61,90,128,.4); }
#compare-tab .gps-btn {
  min-height: 44px; width: 100%; margin: 0; font: 600 15px var(--pb-display);
  background: var(--pb-surface-2) !important; color: var(--pb-ink) !important; border: 1px solid var(--pb-line-strong) !important;
}
#compare-tab .compare-btn {
  min-height: 48px; width: 100%; margin: 0; padding: 12px 28px; align-self: stretch;
  font: 600 16px var(--pb-display); background: var(--pb-brand); color: #fffdf8; border: 0; border-radius: 11px;
  box-shadow: 0 10px 26px -6px rgba(140,47,57,.5);
}
#compare-tab .compare-btn:hover { background: var(--pb-brand-hover); transform: none; filter: none; }
#compare-tab .ms-trigger { min-height: 48px; font-size: 16px; }

/* Verdict banner: only rendered by app.js after a comparison runs. */
#compare-tab #mc-recommendation {
  margin: 0; padding: 20px 24px; border-radius: 14px; font: 500 22px/1.35 var(--pb-display); letter-spacing: -.01em; color: var(--pb-ink);
}
#compare-tab #mc-recommendation strong { font-weight: 700; color: var(--pb-good); }
#compare-tab #mc-recommendation.mc-rec-winner { background: #dce5da; border: 1px solid rgba(31,107,74,.35); }
#compare-tab #mc-recommendation.mc-rec-tie { background: var(--pb-surface-2); border: 1px solid var(--pb-line-strong); }
#compare-tab #mc-recommendation.mc-rec-tie strong { color: var(--pb-ink); }

#compare-tab .mc-mobile-tabs { gap: 10px; background: transparent; padding: 0; }
#compare-tab .mc-mobile-tabs button {
  min-height: 44px; flex: 1; border-radius: 20px; background: var(--pb-surface-2); color: var(--pb-ink-2);
  border: 1px solid var(--pb-line-strong); font: 500 15px var(--pb-body); height: auto;
}
#compare-tab .mc-mobile-tabs button.active { background: var(--pb-ink); color: #fffdf8; border-color: var(--pb-ink); }

#compare-tab .compare-row { height: auto; gap: 20px; }
#compare-tab .compare-maps { gap: 16px; }
#compare-tab .compare-map-pane { border-radius: 14px; background: var(--map-bg, #ebe5d7); }
#compare-tab .compare-map-pane--a { border: 1px solid rgba(140,47,57,.35); }
#compare-tab .compare-map-pane--b { border: 1px solid rgba(61,90,128,.4); }
#compare-tab .compare-map-label { font: 600 12.5px var(--pb-mono); background: rgba(255,253,248,.94); }
#compare-tab .compare-map-label--a { color: var(--pb-brand); }
#compare-tab .compare-map-label--b { color: var(--pb-indigo, #3d5a80); }

#compare-tab .compare-results { gap: 20px; flex-direction: column; }
#compare-tab .compare-card {
  width: 100%; height: auto; background: var(--pb-surface); border: 1px solid var(--pb-line); border-radius: 14px;
  padding: 22px 24px; overflow: visible; align-items: stretch;
}
#compare-tab .compare-card-title { font: 500 13px/1.2 var(--pb-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--pb-ink-4); margin-bottom: 14px; }
#compare-tab .compare-chart-container { max-width: 420px; margin: 0 auto; }

/* Head to head: key / A / B rows. Generated <table>; colours are inline. */
#compare-tab .compare-table { font-size: 16px; }
#compare-tab .compare-table table { border-collapse: collapse; width: 100%; }
#compare-tab .compare-table th, #compare-tab .compare-table td {
  padding: 14px 8px; border-bottom: 1px solid var(--pb-line); font: 500 16px/1.3 var(--pb-display); color: var(--pb-ink); vertical-align: top;
}
#compare-tab .compare-table tr:last-child td { border-bottom: 0; }
#compare-tab .compare-table th { font: 600 13px var(--pb-mono) !important; letter-spacing: .06em; text-transform: uppercase; color: var(--pb-ink-4); }
#compare-tab .compare-table td:first-child { font: 400 16px/1.3 var(--pb-body); color: var(--pb-ink-3); padding-left: 0; }
#compare-tab .compare-table th:nth-child(n+2), #compare-tab .compare-table td:nth-child(n+2) { text-align: right; font-variant-numeric: tabular-nums; }
#compare-tab .compare-table th[style*="8c2f39"] { color: var(--pb-brand) !important; }
#compare-tab .compare-table th[style*="a7b2ff"] { color: var(--pb-indigo, #3d5a80) !important; }
#compare-tab .compare-table td[style*="b6ff3a"] { color: var(--pb-good) !important; font-weight: 700 !important; }

@media (min-width: 901px) {
  #compare-tab .compare-container { padding: 40px 48px 32px; gap: 24px; }
  #compare-tab .pb-h1 { font-size: 40px; }
  #compare-tab .compare-inputs { padding: 24px; }
  #compare-tab .compare-btn { width: auto; flex: 0 0 auto; }
  #compare-tab .compare-row { display: flex; flex-direction: column; gap: 24px; }
  #compare-tab .compare-maps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: none; }
  #compare-tab .compare-map-pane { flex: none; height: 320px; display: block; }
  #compare-tab .compare-results { flex-direction: row; align-items: stretch; }
  #compare-tab .compare-radar-card { flex: 0 1 400px; }
  #compare-tab .compare-table-card { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 900px) {
  #compare-tab .compare-inputs { max-height: none; padding: 16px; }
  #compare-tab .compare-map-pane.active { height: 320px; }
  #compare-tab .compare-maps { height: auto; min-height: 0; }
  #compare-tab #mc-recommendation { padding: 16px 18px; }
  #compare-tab .compare-card { padding: 18px 16px; }
}

/* =====================================================================
   FIND SIMILAR AREAS  (Lead Intelligence tab: lookalike tool restyled;
   Analyze Penetration and Plan Campaign are hidden, markup and logic kept)
   ===================================================================== */
#analyze-tab { --li-head-h: 124px; }
#analyze-tab .pb-head { padding: 20px 16px 8px; }
#analyze-tab .pb-h1 { font-size: 30px; }
#analyze-tab .li-top-banner {
  background: var(--pb-surface); border: 1px solid var(--pb-line); box-shadow: 0 6px 20px -10px rgba(20,33,61,.25);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
#analyze-tab .li-tool-btn {
  min-height: 44px; padding: 8px 18px; font: 500 15px/1.2 var(--pb-body); color: var(--pb-ink-2); border-radius: 22px;
}
#analyze-tab .li-tool-btn:hover { background: var(--pb-surface-3); color: var(--pb-ink); }
#analyze-tab .li-tool-btn.active { background: var(--pb-ink); color: #fffdf8; box-shadow: none; }
#analyze-tab .li-panel { background: var(--pb-surface); border-color: var(--pb-line); box-shadow: -14px 0 40px -18px rgba(20,33,61,.3); }
#analyze-tab .li-panel-header { padding: 16px 20px; background: var(--pb-surface); border-bottom: 1px solid var(--pb-line); }
#analyze-tab .li-panel-header h2 { font: 700 22px/1.2 var(--pb-display); letter-spacing: -.01em; color: var(--pb-ink); margin: 0; }
#analyze-tab .li-panel-close { width: 44px; height: 44px; border-radius: 10px; color: var(--pb-ink-3); }
#analyze-tab .li-panel-body { padding: 20px; }
#analyze-tab .li-panel label { font: 500 14px/1.3 var(--pb-body); color: var(--pb-ink-2); }
#analyze-tab .li-panel p[style] { font-size: 14px !important; line-height: 1.45; }
#analyze-tab .li-panel label span[style] { font-size: 14px !important; }
#analyze-tab .li-section { border-bottom-color: var(--pb-line); }
#analyze-tab .gps-btn {
  min-height: 44px; font: 600 15px var(--pb-display);
  background: var(--pb-surface-2) !important; color: var(--pb-ink) !important; border: 1px solid var(--pb-line-strong) !important;
}
#analyze-tab .li-run-btn {
  min-height: 48px; font: 600 16px var(--pb-display); background: var(--pb-brand); color: #fffdf8; border: 0; border-radius: 11px;
  box-shadow: 0 10px 26px -6px rgba(140,47,57,.5);
}
#analyze-tab .li-run-btn:hover { background: var(--pb-brand-hover); transform: none; filter: none; }

/* Lookalike results (#ll-results). Summary + heading + export span the grid;
   each ranked tract is a card. No match % exists in the data: the big green
   figure is the tract's population, labelled "people". */
#analyze-tab #ll-results { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 16px; }
#analyze-tab #ll-results > :not(.ll-tract-row) { grid-column: 1 / -1; }
#analyze-tab #ll-results .ll-match-note { font-size: 14px !important; color: var(--pb-ink-4) !important; margin: 0 !important; }
#analyze-tab #ll-results .lead-score-summary-card {
  margin: 0; padding: 18px 20px; background: var(--pb-surface-3); border: 0; border-radius: 14px;
  font: 400 16px/1.5 var(--pb-body); color: var(--pb-ink-2);
}
#analyze-tab #ll-results .lead-score-summary-card .big {
  font: 700 34px/1.1 var(--pb-display); color: var(--pb-good); background: none; -webkit-background-clip: border-box; background-clip: border-box;
}
#analyze-tab #ll-results .lead-score-summary-card small { font-size: 14px !important; color: var(--pb-ink-4) !important; }
#analyze-tab #ll-results .score-results-h {
  margin: 8px 0 0 !important; font: 500 13px/1.2 var(--pb-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--pb-ink-4);
}
#analyze-tab #ll-results .ll-tract-row {
  margin: 0; padding: 18px 20px; background: var(--pb-surface); border: 1px solid var(--pb-line); border-radius: 14px;
  transition: border-color .15s ease;
}
#analyze-tab #ll-results .ll-tract-row:hover { border-color: var(--pb-line-strong); }
#analyze-tab .ll-tract-top { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 12px; font-size: 16px; }
#analyze-tab .ll-tract-pop { order: -1; font: 700 34px/1 var(--pb-display); color: var(--pb-good); letter-spacing: -.02em; }
#analyze-tab .ll-tract-pop::after { content: " people"; font: 500 12.5px var(--pb-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--pb-ink-4); }
#analyze-tab .ll-tract-nm { white-space: normal; overflow: visible; font: 500 16px/1.35 var(--pb-body); color: var(--pb-ink); }
#analyze-tab .ll-pop-bar-track { height: 6px; background: var(--pb-surface-3); border-radius: 3px; }
#analyze-tab .ll-pop-bar-fill { background: var(--pb-good); }
#analyze-tab #ll-results .score-export-btn {
  min-height: 44px; padding: 10px 18px; justify-self: start; background: var(--pb-surface-2); color: var(--pb-ink);
  border: 1px solid var(--pb-line-strong); border-radius: 11px; font: 600 15px var(--pb-display); cursor: pointer;
}
#analyze-tab #ll-results .score-export-btn:hover { border-color: var(--pb-brand); color: var(--pb-brand); }

@media (min-width: 901px) {
  #analyze-tab.active { flex-direction: column; }
  #analyze-tab .pb-head { height: var(--li-head-h); box-sizing: border-box; padding: 36px 48px 0; }
  #analyze-tab .pb-h1 { font-size: 40px; }
  #analyze-tab .li-map { top: var(--li-head-h); bottom: 0; height: auto; min-height: 0; border-top: 1px solid var(--pb-line); }
  #analyze-tab .li-top-banner { top: calc(var(--li-head-h) + 16px); left: 24px; transform: none; }
  #analyze-tab .li-tool-btn { padding: 8px 14px; }
  #analyze-tab .li-panel { top: var(--li-head-h); }
  /* Wider panel while the lookalike tool is showing, so results sit 2-up. */
  #analyze-tab .li-panel:has(#li-form-lookalike:not([style*="none"])) { width: 620px; }
  #analyze-tab #ll-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* A closed side panel must not cast its shadow onto the screen edge. */
#analyze-tab .li-panel:not(.open) { box-shadow: none; }

/* ---- Nav consolidation (2026-10-13) ---------------------------------- */
/* One tool left on Find similar areas: hide the pill row, the two retired
   pills and forms, and the panel close button (sidebar.js opens the panel on
   arrival, so closing it would strand the page). DOM and ids stay for app.js. */
#analyze-tab .li-top-banner.li-single-tool,
#analyze-tab .li-tool-btn[data-li-tool="penetration"],
#analyze-tab .li-tool-btn[data-li-tool="campaign"],
#analyze-tab #li-form-penetration,
#analyze-tab #li-form-campaign,
#analyze-tab .li-panel-close { display: none !important; }

/* "Advanced" disclosure */
.pb-advanced { margin: 12px 0; }
.pb-advanced > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 44px;
  font: 600 16px/1.2 var(--pb-display); color: var(--pb-brand);
}
.pb-advanced > summary::-webkit-details-marker { display: none; }
.pb-advanced > summary::before {
  content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s ease; margin: 0 4px 0 2px;
}
.pb-advanced[open] > summary::before { transform: rotate(45deg); }
.pb-advanced > summary:hover { color: var(--pb-brand-hover); }
.pb-advanced > summary:focus-visible { outline: 2px solid var(--pb-brand); outline-offset: 2px; border-radius: 6px; }

/* Link cards under the lookalike results */
.pb-linkcards { display: grid; gap: 10px; margin-top: 20px; }
.pb-linkcard {
  display: block; padding: 14px 16px; background: var(--pb-surface-2); border: 1px solid var(--pb-line);
  border-radius: 12px; text-decoration: none; color: var(--pb-ink);
}
.pb-linkcard b { display: block; font: 600 16px/1.3 var(--pb-display); }
.pb-linkcard span { display: block; margin-top: 2px; font: 400 15px/1.4 var(--pb-body); color: var(--pb-brand); }
.pb-linkcard:hover { border-color: var(--pb-brand); }

/* One-line pointer under the Draft ads & budget header */
.pb-subline { margin: 8px 0 0; font: 400 16px/1.4 var(--pb-body); color: var(--pb-ink-3); }
.pb-subline a { color: var(--pb-brand); font-weight: 600; text-decoration: none; }
.pb-subline a:hover { text-decoration: underline; }

/* Area-count guidance (Cedric 2026-10-13: $500/area minimum, add after first 3 show results) */
#analyze-tab .pb-areas-note {
  margin: 18px 0 0; padding: 14px 16px; border-radius: 12px;
  background: var(--surface-3, #efe9dc); color: var(--ink-3, #4b5363);
  font: 400 16px/1.5 var(--pb-body, Inter, sans-serif);
}

/* =====================================================================
   PERSONA ACTIONS (persona-actions.js): "Where they live near you" + the
   action bar under a persona's detail. Rows follow Today's best-neighborhood
   rows (today.css .td-best*), which are scoped to #today-tab, hence the copy.
   ===================================================================== */
#library-tab .pa-where {
  margin: 22px 0 0; padding: 18px; border-radius: 12px;
  background: var(--pb-surface-2); border: 1px solid var(--pb-line);
  display: flex; flex-direction: column; gap: 12px;
}
#library-tab .pa-head { font: 600 20px/1.25 var(--pb-display); color: var(--pb-ink); }
#library-tab .pa-eyebrow { font: 500 12.5px/1.3 var(--pb-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--pb-ink-4); margin-top: -6px; }
#library-tab .pa-share { margin: 0; font: 400 16px/1.5 var(--pb-body); color: var(--pb-ink-2); }
#library-tab .pa-empty { margin: 0; font: 400 16px/1.5 var(--pb-body); color: var(--pb-ink-2); }
#library-tab .pa-empty-actions { display: flex; flex-wrap: wrap; gap: 10px; }
#library-tab .pa-foot { margin: 0; font: 400 14px/1.45 var(--pb-body); color: var(--pb-ink-4); }
#library-tab .pa-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
#library-tab .pa-row { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; min-width: 0; }
#library-tab .pa-row + .pa-row { border-top: 1px solid var(--pb-line); }
#library-tab .pa-row:first-child { padding-top: 0; }
#library-tab .pa-row-top { display: flex; justify-content: space-between; align-items: center; gap: 14px; min-width: 0; }
#library-tab .pa-row-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#library-tab .pa-row-name { font: 600 16px/1.3 var(--pb-body); color: var(--pb-ink); overflow-wrap: anywhere; }
#library-tab .pa-row-where { font: 500 12px/1.4 var(--pb-mono); letter-spacing: .03em; color: var(--pb-ink-4); overflow-wrap: anywhere; }
#library-tab .pa-row-score { display: flex; align-items: baseline; gap: 6px; flex-shrink: 0; }
#library-tab .pa-row-k { font: 600 11px var(--pb-mono); letter-spacing: .06em; color: var(--pb-ink-4); }
#library-tab .pa-row-v { font: 700 24px/1 var(--pb-display); font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; color: var(--pa-band, var(--pb-good)); }
#library-tab .pa-track { height: 6px; border-radius: 3px; background: var(--pb-surface-3); overflow: hidden; }
#library-tab .pa-fill { display: block; height: 100%; border-radius: 3px; background: var(--pa-band, var(--pb-good)); }
#library-tab .pa-band-strong { --pa-band: var(--pb-good); }
#library-tab .pa-band-okay { --pa-band: var(--pb-warn); }
#library-tab .pa-band-low { --pa-band: var(--pb-brand); }
#library-tab .pa-loading { gap: 6px; }
#library-tab .pa-sk { height: 48px; border-radius: 8px; background: linear-gradient(90deg, var(--pb-surface-3), #e4ddcd, var(--pb-surface-3)); }
#library-tab .pa-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; }

/* Action bar: last thing in the panel, pinned to the bottom of the panel's
   scroll area so it stays in reach while reading the profile. */
#library-tab .pa-actions {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 10px;
  margin: 24px -24px 0; padding: 16px 24px 4px;
  background: var(--pb-surface); border-top: 1px solid var(--pb-line);
  box-shadow: 0 -12px 20px -16px rgba(20,33,61,.25);
}
/* Covers the panel's bottom padding, so text never shows under the bar. */
#library-tab .pa-actions::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 24px; background: var(--pb-surface); }
#library-tab .pa-btn { width: 100%; min-height: 44px; font-size: 16px; line-height: 1.25; white-space: normal; text-align: center; }
#library-tab .pa-empty-actions .pa-btn { width: auto; }
#library-tab .pa-btn.pb-btn--primary { background: var(--pb-brand); color: #fffdf8; border-color: var(--pb-brand); }
#library-tab .pa-btn.pb-btn--primary:hover:not(:disabled) { background: var(--pb-brand-hover); }
#library-tab .pa-btn.pb-btn--secondary { background: var(--pb-surface-2); color: var(--pb-ink); border-color: var(--pb-line-strong); box-shadow: none; }
#library-tab .pa-btn.pb-btn--secondary:hover { background: var(--pb-surface-3); }
#library-tab .pa-note { margin: 0; font: 400 14px/1.45 var(--pb-body); color: var(--pb-ink-4); }
/* What "Write an ad for them" costs (canvas-assist.js costNote), right under it. */
#library-tab .pa-cost { margin: -4px 0 0; font: 400 14px/1.45 var(--pb-body); color: var(--pb-ink-3); }
#library-tab .pa-cost a { color: var(--pb-brand); font-weight: 600; }
@media (max-width: 900px) {
  #library-tab .pa-where { padding: 16px; }
  /* The phone shell scrolls the whole tab; keep the bar in flow there. */
  #library-tab .pa-actions { position: static; box-shadow: none; }
  #library-tab .pa-actions::after { display: none; }
}

/* ---- "Near you" filter chip + badges (persona-actions.js) ---------------- */
/* Own class, not .lib-seg-btn: app.js's switchLibrarySection strips .active
   from every .lib-seg-btn that is not the chosen section. */
#library-tab .pa-near-chip {
  min-height: 44px; padding: 8px 18px; border-radius: 20px; white-space: nowrap;
  background: var(--pb-surface-2); color: var(--pb-ink-2); border: 1px solid var(--pb-line-strong);
  font: 500 15px/1.2 var(--pb-body); box-shadow: none; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
#library-tab .pa-near-chip[hidden] { display: none; }
#library-tab .pa-near-chip:hover:not([aria-disabled="true"]) { background: var(--pb-surface-3); color: var(--pb-ink); transform: none; }
#library-tab .pa-near-chip[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }
#library-tab .pa-near-chip.active { background: var(--pb-ink); color: #fffdf8; border-color: var(--pb-ink); }
#library-tab .pa-near-chip:focus-visible { outline: 3px solid rgba(31,107,74,.4); outline-offset: 2px; }
#library-tab.pa-near-on .library-card:not([data-near="1"]):not(.active) { display: none; }
/* Filter + search can leave nothing near you: say so instead of a blank list. */
#library-tab.pa-near-on #library-cards:not(:has(.library-card[data-near="1"]))::after {
  content: "None of the matching personas live near you."; display: block; padding: 18px 4px; color: var(--pb-ink-3); font: 400 16px/1.5 var(--pb-body);
}
#library-tab .pa-near-badge { margin-top: 6px; font: 600 12px/1.2 var(--pb-mono); letter-spacing: .06em; color: #1f6b4a; }
#library-tab .pa-btn[hidden] { display: none; }