/* shell.css -- Private Bank app shell, shared by every app page.
   Sidebar (desktop), bottom bar + More sheet (mobile), and the reusable screen
   pieces: .pb-eyebrow/.pb-h1/.pb-sub, .pb-card, .pb-btn, chips, .pb-disclaimer.
   Rendered by sidebar.js. Spec: docs/design/private-bank/README.md -> Layout.
   Loads after styles.css / workspace.css; carries its own token fallbacks so it
   also works on pages that do not load styles.css. */

:root {
  --pb-bg-app: #f7f4ec; --pb-bg-sidebar: #efeadf; --pb-surface: #fffdf8; --pb-surface-2: #f1ece1; --pb-surface-3: #efe9dc;
  --pb-line: rgba(20,33,61,.11); --pb-line-strong: rgba(20,33,61,.18);
  --pb-ink: #14213d; --pb-ink-2: #2c3a52; --pb-ink-3: #4b5363; --pb-ink-4: #6b6558;
  --pb-brand: #8c2f39; --pb-brand-hover: #5e1f27; --pb-good: #1f6b4a; --pb-warn: #a87a26;
  --pb-focus: 0 0 0 3px rgba(140,47,57,.18);
  --pb-sidebar-w: 272px;
  --pb-display: 'Space Grotesk', system-ui, sans-serif;
  --pb-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --pb-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ---------- Sidebar ---------- */
.pb-sidebar {
  width: var(--pb-sidebar-w);
  background: var(--pb-bg-sidebar);
  border-right: 1px solid var(--pb-line);
  padding: 16px 16px 14px;
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh;
  overflow-y: auto; scrollbar-width: thin;
  position: sticky; top: 0;
  font-family: var(--pb-body);
  z-index: 60;
}
.pb-logo { display: flex; align-items: center; gap: 10px; padding: 0 6px 8px; text-decoration: none; color: var(--pb-ink); }
.pb-logo:hover { text-decoration: none; }
.pb-logo-mark {
  width: 32px; height: 32px; border-radius: 9px; background: var(--pb-brand); color: #fffdf8;
  display: grid; place-items: center; font: 700 17px var(--pb-display);
}
.pb-logo-word { font: 600 19px var(--pb-display); letter-spacing: -.01em; color: var(--pb-ink); }
.pb-logo-word b { color: var(--pb-brand); font-weight: 600; }

.pb-nav { display: flex; flex-direction: column; gap: 1px; flex: 1 0 auto; }
.pb-group {
  font: 500 12px var(--pb-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--pb-ink-4); padding: 12px 12px 3px;
}
.pb-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px; min-height: 35px; border-radius: 10px;
  font: 500 15px/1.25 var(--pb-body); color: var(--pb-ink-3);
  text-decoration: none; background: transparent;
  transition: background .15s ease, color .15s ease;
}
.pb-item:hover { background: rgba(20,33,61,.05); color: var(--pb-ink); text-decoration: none; }
.pb-item:focus-visible { outline: none; box-shadow: var(--pb-focus); }
.pb-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(20,33,61,.18); flex: none; }
.pb-item.active { background: rgba(140,47,57,.12); color: var(--pb-ink); }
.pb-item.active .pb-dot { background: var(--pb-brand); }
.pb-item-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-soon {
  font: 500 11px var(--pb-mono); letter-spacing: .06em; text-transform: uppercase;
  color: #8a8373; padding: 0; margin-left: auto; flex: none; white-space: nowrap;
}

/* Profile meter on "Your business" (e.g. 6/11); sidebar.js hides it at 11/11. */
.pb-meter {
  font: 500 11px var(--pb-mono); letter-spacing: .04em; color: var(--pb-brand);
  border: 1px solid rgba(140,47,57,.35); border-radius: 10px; padding: 1px 7px; margin-left: auto; flex: none; white-space: nowrap;
}
.pb-meter[hidden] { display: none; }

.pb-sb-foot { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; flex: none; }
.pb-upsell {
  display: flex; flex-direction: column; gap: 3px; text-decoration: none;
  border: 1px solid var(--pb-line); background: rgba(255,253,248,.55); border-radius: 12px;
  padding: 8px 14px; font: 400 14.5px/1.3 var(--pb-body); color: var(--pb-ink-2);
}
.pb-upsell b { color: var(--pb-brand); font-weight: 600; font-size: 14.5px; }
.pb-upsell:hover { text-decoration: none; border-color: var(--pb-line-strong); }
.pb-upsell:hover b { color: var(--pb-brand-hover); }
.pb-help {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border-radius: 12px; cursor: pointer;
  background: transparent; border: 1px solid var(--pb-line); color: var(--pb-ink-2); font: 500 14.5px/1.3 var(--pb-body); box-shadow: none; text-align: left;
}
.pb-help::before { content: "?"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--pb-surface-3); font: 700 13px var(--pb-display); color: var(--pb-brand); }
.pb-help:hover { background: rgba(20,33,61,.05); color: var(--pb-ink); transform: none; filter: none; box-shadow: none; }
.pb-help:focus-visible { outline: none; box-shadow: var(--pb-focus); }
.pb-biz { display: flex; align-items: center; gap: 12px; padding: 6px 6px; border-radius: 11px; text-decoration: none; color: var(--pb-ink); }
.pb-biz:hover { background: rgba(20,33,61,.05); text-decoration: none; }
.pb-biz-init {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--pb-line-strong); background: var(--pb-surface);
  display: grid; place-items: center; font: 600 14px var(--pb-display); color: var(--pb-ink); flex: none;
}
.pb-biz-text { display: flex; flex-direction: column; min-width: 0; }
.pb-biz-text b { font: 600 15px/1.25 var(--pb-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-biz-text small { font: 400 14px/1.3 var(--pb-body); color: var(--pb-ink-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Desktop shell (sidebar + main) ---------- */
@media (min-width: 901px) {
  body.pb-app {
    display: grid;
    grid-template-columns: var(--pb-sidebar-w) minmax(0, 1fr);
    grid-template-rows: minmax(0, 100dvh);
    grid-auto-rows: 0;
    height: 100dvh;
    overflow: hidden;
    background: var(--pb-bg-app);
  }
  body.pb-app > #lpSidebar { grid-column: 1; grid-row: 1; }
  body.pb-app > main#main, body.pb-app > .wrap { grid-column: 2; grid-row: 1; min-width: 0; }
  body.pb-app > .lp-skip { position: absolute; }

  /* The old header and tab row are replaced by the sidebar. The old tab
     buttons stay in the DOM (app.js queries .tab-btn[data-tab]); hidden. */
  body.pb-app > header, body.pb-app > .tabs, body.pb-app > .mobile-subnav { display: none !important; }

  /* index.html: main is a column: the active screen, then the disclaimer strip. */
  body.pb-app > main#main { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
  body.pb-app > main#main > .tab-content { height: auto; flex: 1 1 0; min-height: 0; }
  body.pb-app > main#main > .pb-foot {
    flex: none; padding: 12px 48px; border-top: 1px solid var(--pb-line); background: var(--pb-bg-app);
    display: flex; align-items: center; justify-content: space-between; gap: 8px 32px; flex-wrap: wrap;
  }
  /* The strip carries the disclaimer on desktop; screens do not repeat it. */
  #coverage-tab .pb-disclaimer, #landing-tab .pb-disclaimer { display: none; }
}
.pb-foot .pb-disclaimer { border: 0; padding: 0; margin: 0; }
body .pb-foot .lp-legal-links { padding: 0; justify-content: flex-end; font-size: 14px; color: var(--pb-ink-4); }
body .pb-foot .lp-legal-links a { color: var(--pb-ink-3); }

/* ---------- Disclaimer ---------- */
.pb-disclaimer { font: 400 14px/1.45 var(--pb-body); color: var(--pb-ink-4); border-top: 1px solid var(--pb-line); padding-top: 12px; margin: 24px 0 0; }

/* ---------- Screen pieces ---------- */
.pb-screen, #today-tab, #coverage-tab, #landing-tab { /* new screens that are plain scrolling pages */ }
#coverage-tab, #landing-tab {
  flex-direction: column; gap: 28px; overflow-y: auto; padding: 40px 48px 32px;
  background: var(--pb-bg-app); align-items: flex-start;
}
#today-tab { flex-direction: column; overflow-y: auto; background: var(--pb-bg-app); }
#today-tab > *, #coverage-tab > *, #landing-tab > * { flex-shrink: 0; }

.pb-eyebrow { font: 500 13px/1.3 var(--pb-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--pb-ink-4); margin: 0 0 10px; }
.pb-h1 { font: 700 40px/1.1 var(--pb-display); letter-spacing: -.025em; color: var(--pb-ink); margin: 0; max-width: 22ch; }
.pb-h1.pb-h1--lg { font-size: 42px; max-width: 24ch; }
.pb-sub { font: 400 18px/1.5 var(--pb-body); color: var(--pb-ink-3); margin: 12px 0 0; max-width: 60ch; }

.pb-card { background: var(--pb-surface); border: 1px solid var(--pb-line); border-radius: 14px; padding: 24px; }

.pb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 16px/1 var(--pb-display); min-height: 44px; padding: 12px 20px; border-radius: 11px;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background .15s ease, box-shadow .15s ease, filter .15s ease;
}
.pb-btn:hover { text-decoration: none; }
.pb-btn:focus-visible { outline: none; box-shadow: var(--pb-focus); }
.pb-btn--primary { background: var(--pb-brand); color: #fffdf8; box-shadow: 0 10px 26px -6px rgba(140,47,57,.5); }
.pb-btn--primary:hover { background: var(--pb-brand-hover); }
.pb-btn--secondary { background: var(--pb-surface-2); color: var(--pb-ink); border-color: var(--pb-line); box-shadow: none; }
.pb-btn--secondary:hover { background: var(--pb-surface-3); }
.pb-btn--green { background: var(--pb-good); color: #fffdf8; box-shadow: 0 10px 26px -6px rgba(31,107,74,.64); }
.pb-btn--green:hover { background: #17543a; }
.pb-btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }

.pb-chip { display: inline-flex; align-items: center; gap: 6px; font: 500 15px/1.2 var(--pb-body); padding: 7px 14px; border-radius: 20px; background: var(--pb-surface-2); color: var(--pb-ink-2); border: 1px solid var(--pb-line); }
.pb-chip--word { border-radius: 7px; }
.pb-chip--good { background: rgba(31,107,74,.10); color: var(--pb-good); border-color: rgba(31,107,74,.25); }
.pb-chip--bad { background: rgba(140,47,57,.10); color: var(--pb-brand); border-color: rgba(140,47,57,.25); }
.pb-chip--active { background: var(--pb-ink); color: #fffdf8; border-color: var(--pb-ink); }
.pb-link { color: var(--pb-brand); font-weight: 600; text-decoration: none; }
.pb-link:hover { color: var(--pb-brand-hover); text-decoration: underline; }
.pb-mono { font-family: var(--pb-mono); }

/* ---------- Mobile bottom bar (<900px, matches app.js isMobileLayout) ---------- */
.pb-bottom { display: none; }
.pb-more { display: none; }

@media (max-width: 900px) {
  .pb-sidebar { display: none !important; }
  body.pb-app { background: var(--pb-bg-app); padding-bottom: 0; }

  nav.pb-bottom {
    display: flex; align-items: stretch;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001;
    background: rgba(255,253,248,.94);
    backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-top: 1px solid var(--pb-line);
    padding-bottom: env(safe-area-inset-bottom);
    height: auto;
  }
  nav.pb-bottom .pb-tab {
    flex: 1; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px;
    padding: 8px 4px 12px; color: var(--pb-ink-3); text-decoration: none; position: relative;
    background: none; border: 0; border-radius: 0; box-shadow: none; cursor: pointer;
    font-family: var(--pb-body);
  }
  nav.pb-bottom .pb-tab svg { display: none; }       /* the mock's bar is text + a dot */
  nav.pb-bottom .pb-tab .mobile-nav-label { font: 600 15px/1.2 var(--pb-body); letter-spacing: 0; }
  nav.pb-bottom .pb-tab::before {
    content: ""; position: static; display: block; width: 7px; height: 7px; border-radius: 50%;
    background: transparent; left: auto; right: auto; top: auto; height: 7px; margin-bottom: 2px;
  }
  nav.pb-bottom .pb-tab.active { color: var(--pb-ink); }
  nav.pb-bottom .pb-tab.active::before { background: var(--pb-brand); height: 7px; border-radius: 50%; }
  nav.pb-bottom .pb-tab:focus-visible { outline: none; box-shadow: inset var(--pb-focus); }

  /* Slim ivory header on phones (index.html + workspace pages keep their own markup). */
  body.pb-app > header { background: var(--pb-bg-sidebar); }

  #coverage-tab, #landing-tab { padding: 24px 18px 28px; gap: 20px; }
  .pb-h1 { font-size: 30px; }
  .pb-h1.pb-h1--lg { font-size: 30px; }
  .pb-sub { font-size: 17px; }
  .pb-card { padding: 20px; }
  /* index.html: no room for a fixed strip over the maps; the disclaimer lives
     in the More sheet and at the end of the scrolling screens. */
  body.pb-app > main#main > .pb-foot { display: none; }

  /* More sheet */
  .pb-more { position: fixed; inset: 0; z-index: 1200; display: block; }
  .pb-more[hidden] { display: none; }
  .pb-more-backdrop { position: absolute; inset: 0; background: rgba(20,33,61,.38); }
  .pb-more-sheet {
    position: absolute; left: 0; right: 0; bottom: 0; max-height: 82dvh; overflow-y: auto;
    background: var(--pb-surface); border-radius: 20px 20px 0 0; border-top: 1px solid var(--pb-line-strong);
    padding: 8px 16px calc(20px + env(safe-area-inset-bottom));
    box-shadow: 0 -20px 50px -14px rgba(20,33,61,.3); outline: none;
  }
  .pb-more-grab { width: 44px; height: 5px; border-radius: 3px; background: var(--pb-line-strong); margin: 4px auto 6px; }
  .pb-more-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    min-height: 48px; padding: 12px 10px; border-radius: 11px;
    font: 500 17px/1.3 var(--pb-body); color: var(--pb-ink); text-decoration: none;
  }
  .pb-more-item:hover, .pb-more-item.active { background: rgba(140,47,57,.10); text-decoration: none; }
  .pb-more-item.active { font-weight: 600; }
  body.pb-more-open { overflow: hidden; }
  .pb-more .pb-disclaimer { margin-top: 18px; }
}

/* Desktop never shows the sheet or bar */
@media (min-width: 901px) {
  .pb-more, nav.pb-bottom { display: none !important; }
}

/* ---------- Workspace pages (plan / actions / results / customers) ---------- */
@media (min-width: 901px) {
  body.pb-page.pb-app { overflow: hidden; }
  body.pb-page.pb-app > .wrap { height: 100dvh; overflow-y: auto; margin: 0; max-width: none; padding: 40px 48px 32px; }
  body.pb-page.pb-app > .wrap > * { max-width: 1000px; }
  body.pb-page.pb-app > .wrap > header.top { display: none; }
}
@media (max-width: 900px) {
  body.pb-page.pb-app > .wrap { padding-bottom: 96px; }
  body.pb-page.pb-app .pb-disclaimer { margin-bottom: 8px; }
}

/* ---------- Account page (settings column keeps its own nav) ---------- */
@media (min-width: 901px) {
  body.pb-account > .wrap { height: 100dvh; min-height: 0; }
  body.pb-account nav.side { background: var(--pb-surface); }
}
@media (max-width: 900px) {
  body.pb-account main#main { padding-bottom: 100px; }
}

/* `.tab-content h2` (0,1,1) in styles.css out-ranks a bare .pb-h1; restore the screen title size on h2 titles. */
.tab-content .pb-h1 { font: 700 40px/1.1 var(--pb-display); letter-spacing: -.025em; }
@media (max-width: 900px) { .tab-content .pb-h1 { font-size: 30px; } }

/* "Take the tour": the global button rule is very specific, so this needs the ID-free double class + !important. */
.pb-sidebar .pb-help.pb-help {
  background: transparent !important; color: var(--pb-ink-2) !important; border: 1px solid var(--pb-line) !important;
  box-shadow: none !important; transform: none !important; filter: none !important; min-height: 38px; padding: 6px 12px;
  border-radius: 10px; font: 500 14.5px/1.3 var(--pb-body);
}
.pb-sidebar .pb-help.pb-help:hover { background: rgba(20,33,61,.05) !important; color: var(--pb-ink) !important; }
.pb-upsell b { white-space: nowrap; }
/* Short laptop screens: keep the whole sidebar (incl. business card) on screen. */
@media (min-width: 901px) and (max-height: 960px) {
  .pb-sidebar { padding-top: 12px; padding-bottom: 10px; }
  .pb-item { min-height: 32px; padding: 4px 12px; }
  .pb-group { padding-top: 8px; }
  .pb-sb-foot { margin-top: 8px; gap: 6px; }
}

/* Mobile sub-nav chips (Score / Compare / Lookalikes, Library / Build a PDF, Plan / Score Ads):
   the global primary-button rule paints every <button> oxblood, so neutral chips need !important. */
@media (max-width: 900px) {
  .mobile-subnav { background: var(--pb-bg-app); border-bottom-color: var(--pb-line); }
  .mobile-subnav .msn-chip {
    min-height: 40px; padding: 8px 16px; font: 500 14.5px/1.2 var(--pb-body) !important;
    background: var(--pb-surface-2) !important; color: var(--pb-ink-2) !important;
    border: 1px solid var(--pb-line-strong) !important; box-shadow: none !important; transform: none; filter: none;
  }
  .mobile-subnav .msn-chip.active { background: var(--pb-brand) !important; color: #fffdf8 !important; border-color: var(--pb-brand) !important; }
  /* hidden screens (2026-10-13): Score an area and Compare markets are out of navigation.
     app.js still renders their chips; hide them, and the whole row once only "Similar areas"
     is left (that chip's tab is "analyze", unique to this group). To restore, delete this block
     and empty HIDDEN_TABS in sidebar.js. */
  .mobile-subnav .msn-chip[data-mobile-tab="score"],
  .mobile-subnav .msn-chip[data-mobile-tab="compare"] { display: none !important; }
  .mobile-subnav:has(.msn-chip[data-mobile-tab="analyze"]) { display: none !important; }
}
/* mobile wizard: the heading takes programmatic focus; no ring around a title */
#lpw-root [tabindex="-1"]:focus { outline: none; box-shadow: none; }

/* Tour: "Skip" is a quiet text button, not a second primary. */
.tour-card .tour-skip.tour-skip {
  background: transparent !important; color: var(--pb-ink-3) !important; box-shadow: none !important; border: 0 !important;
  min-height: 44px; padding: 8px 12px; font: 600 15px var(--pb-body); transform: none; filter: none;
}
.tour-card .tour-skip.tour-skip:hover { color: var(--pb-ink) !important; text-decoration: underline; }